From 6fefddc8ee3f05e83006c87a8ac5e9daa0a03424 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 19:10:00 +0100
Subject: [PATCH 01/17] Implement package registry access and cached font
 middleware

---
 web/src/cached-font-middleware.ts | 39 +++++++++++++++++++++++++++++
 web/src/typst.ts                  | 41 +++++++++++++++++++++++++++++--
 2 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 web/src/cached-font-middleware.ts

diff --git a/web/src/cached-font-middleware.ts b/web/src/cached-font-middleware.ts
new file mode 100644
index 0000000..6541262
--- /dev/null
+++ b/web/src/cached-font-middleware.ts
@@ -0,0 +1,39 @@
+import { preloadFontAssets } from "@myriaddreamin/typst.ts/dist/esm/options.init.mjs";
+
+const FONT_CACHE_NAME = "typst-font-assets-v1";
+
+const cachedFetch: typeof fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+  const request = input instanceof Request ? input : new Request(input, init);
+
+  if (!("caches" in globalThis) || request.method.toUpperCase() !== "GET") {
+    return fetch(request);
+  }
+
+  const cache = await caches.open(FONT_CACHE_NAME);
+  const cached = await cache.match(request);
+  if (cached) {
+    return cached;
+  }
+
+  const response = await fetch(request);
+  if (response.ok) {
+    try {
+      await cache.put(request, response.clone());
+    } catch {
+      // Ignore cache write failures and keep network response.
+    }
+  }
+
+  return response;
+};
+
+export function cachedFontInitOptions() {
+  return {
+    beforeBuild: [
+      preloadFontAssets({
+        assets: ["text", "cjk", "emoji"],
+        fetcher: cachedFetch,
+      }),
+    ],
+  };
+}
diff --git a/web/src/typst.ts b/web/src/typst.ts
index a7132fa..d3a4c62 100644
--- a/web/src/typst.ts
+++ b/web/src/typst.ts
@@ -7,7 +7,15 @@
 
 import type * as typstWeb from "@myriaddreamin/typst.ts";
 import { createTypstCompiler, createTypstRenderer } from "@myriaddreamin/typst.ts";
-import { disableDefaultFontAssets, loadFonts } from "@myriaddreamin/typst.ts/dist/esm/options.init.mjs";
+import {
+  // disableDefaultFontAssets,
+  loadFonts,
+  withPackageRegistry,
+  withAccessModel,
+} from "@myriaddreamin/typst.ts/dist/esm/options.init.mjs";
+import { NodeFetchPackageRegistry } from "@myriaddreamin/typst.ts/dist/esm/fs/package.node.mjs";
+import { MemoryAccessModel } from "@myriaddreamin/typst.ts/dist/esm/fs/memory.mjs";
+import { cachedFontInitOptions } from "./cached-font-middleware";
 
 // @ts-expect-error ?url import
 import mathFontUrl from "/math-font.ttf?url";
@@ -20,6 +28,28 @@ import typstRendererWasm from "@myriaddreamin/typst-ts-renderer/pkg/typst_ts_ren
 let compiler: typstWeb.TypstCompiler;
 let renderer: typstWeb.TypstRenderer;
 
+interface RegistryResponse {
+  statusCode: number;
+  getBody: (_encoding?: unknown) => Uint8Array;
+}
+
+function registryRequest(method: string, url: string): RegistryResponse {
+  const request = new XMLHttpRequest();
+  request.open(method, url, false);
+  // Sync XHR from a document cannot use non-text responseType.
+  request.overrideMimeType("text/plain; charset=x-user-defined");
+  request.send();
+
+  const response = request.response as unknown;
+  const responseText = typeof response === "string" ? response : "";
+  const body = Uint8Array.from(responseText, char => char.charCodeAt(0) & 0xff);
+
+  return {
+    statusCode: request.status,
+    getBody: () => body,
+  };
+}
+
 /**
  * Initializes both the Typst compiler and renderer.
  */
@@ -32,16 +62,23 @@ export async function initTypst() {
  * Initializes the Typst compiler.
  *
  * See also https://myriad-dreamin.github.io/typst.ts/cookery/guide/all-in-one.html#label-Initializing%20using%20the%20low-level%20API
+ * And https://github.com/Myriad-Dreamin/typst.ts/blob/2a8b32d8cca70cc4d105fef074d2f35fc7546450/templates/compiler-wasm-cjs/src/main.package.cts#L20-L39
  */
 async function initCompiler() {
   compiler = createTypstCompiler();
+  const accessModel = new MemoryAccessModel();
   await compiler.init({
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     getModule: () => typstCompilerWasm,
     beforeBuild: [
-      disableDefaultFontAssets(),
+      ...cachedFontInitOptions().beforeBuild,
+      // disableDefaultFontAssets(),
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       loadFonts([mathFontUrl]),
+      withAccessModel(accessModel),
+      withPackageRegistry(
+        new NodeFetchPackageRegistry(accessModel, registryRequest),
+      ),
     ],
   });
   console.log("Typst compiler initialized");

From ae3b13bacb37f4d210a5dc333e106e5ddb62b28a Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 19:11:04 +0100
Subject: [PATCH 02/17] Move font cache file

---
 .../{cached-font-middleware.ts => registry/font-cache.ts} | 0
 web/src/typst.ts                                          | 8 ++++----
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename web/src/{cached-font-middleware.ts => registry/font-cache.ts} (100%)

diff --git a/web/src/cached-font-middleware.ts b/web/src/registry/font-cache.ts
similarity index 100%
rename from web/src/cached-font-middleware.ts
rename to web/src/registry/font-cache.ts
diff --git a/web/src/typst.ts b/web/src/typst.ts
index d3a4c62..41e3702 100644
--- a/web/src/typst.ts
+++ b/web/src/typst.ts
@@ -8,14 +8,14 @@
 import type * as typstWeb from "@myriaddreamin/typst.ts";
 import { createTypstCompiler, createTypstRenderer } from "@myriaddreamin/typst.ts";
 import {
-  // disableDefaultFontAssets,
+  disableDefaultFontAssets,
   loadFonts,
   withPackageRegistry,
   withAccessModel,
 } from "@myriaddreamin/typst.ts/dist/esm/options.init.mjs";
 import { NodeFetchPackageRegistry } from "@myriaddreamin/typst.ts/dist/esm/fs/package.node.mjs";
 import { MemoryAccessModel } from "@myriaddreamin/typst.ts/dist/esm/fs/memory.mjs";
-import { cachedFontInitOptions } from "./cached-font-middleware";
+import { cachedFontInitOptions } from "./registry/font-cache";
 
 // @ts-expect-error ?url import
 import mathFontUrl from "/math-font.ttf?url";
@@ -71,10 +71,10 @@ async function initCompiler() {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     getModule: () => typstCompilerWasm,
     beforeBuild: [
-      ...cachedFontInitOptions().beforeBuild,
-      // disableDefaultFontAssets(),
+      disableDefaultFontAssets(),
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       loadFonts([mathFontUrl]),
+      ...cachedFontInitOptions().beforeBuild,
       withAccessModel(accessModel),
       withPackageRegistry(
         new NodeFetchPackageRegistry(accessModel, registryRequest),

From e8302d5df886dd6518a182f7b75ee0d0cbe0c6d7 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 19:11:35 +0100
Subject: [PATCH 03/17] Extract registry request to new file

---
 web/src/registry/registry.ts | 21 +++++++++++++++++++++
 web/src/typst.ts             | 23 +----------------------
 2 files changed, 22 insertions(+), 22 deletions(-)
 create mode 100644 web/src/registry/registry.ts

diff --git a/web/src/registry/registry.ts b/web/src/registry/registry.ts
new file mode 100644
index 0000000..1d65a96
--- /dev/null
+++ b/web/src/registry/registry.ts
@@ -0,0 +1,21 @@
+interface RegistryResponse {
+  statusCode: number;
+  getBody: (_encoding?: unknown) => Uint8Array;
+}
+
+export function registryRequest(method: string, url: string): RegistryResponse {
+  const request = new XMLHttpRequest();
+  request.open(method, url, false);
+  // Sync XHR from a document cannot use non-text responseType.
+  request.overrideMimeType("text/plain; charset=x-user-defined");
+  request.send();
+
+  const response = request.response as unknown;
+  const responseText = typeof response === "string" ? response : "";
+  const body = Uint8Array.from(responseText, char => char.charCodeAt(0) & 0xff);
+
+  return {
+    statusCode: request.status,
+    getBody: () => body,
+  };
+}
diff --git a/web/src/typst.ts b/web/src/typst.ts
index 41e3702..039db81 100644
--- a/web/src/typst.ts
+++ b/web/src/typst.ts
@@ -24,32 +24,11 @@ import mathFontUrl from "/math-font.ttf?url";
 import typstCompilerWasm from "@myriaddreamin/typst-ts-web-compiler/pkg/typst_ts_web_compiler_bg.wasm?url";
 // @ts-expect-error WASM module import
 import typstRendererWasm from "@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm?url";
+import { registryRequest } from "./registry/registry";
 
 let compiler: typstWeb.TypstCompiler;
 let renderer: typstWeb.TypstRenderer;
 
-interface RegistryResponse {
-  statusCode: number;
-  getBody: (_encoding?: unknown) => Uint8Array;
-}
-
-function registryRequest(method: string, url: string): RegistryResponse {
-  const request = new XMLHttpRequest();
-  request.open(method, url, false);
-  // Sync XHR from a document cannot use non-text responseType.
-  request.overrideMimeType("text/plain; charset=x-user-defined");
-  request.send();
-
-  const response = request.response as unknown;
-  const responseText = typeof response === "string" ? response : "";
-  const body = Uint8Array.from(responseText, char => char.charCodeAt(0) & 0xff);
-
-  return {
-    statusCode: request.status,
-    getBody: () => body,
-  };
-}
-
 /**
  * Initializes both the Typst compiler and renderer.
  */

From 15e7f947a12481d6313f785d434ed3af25c68bad Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 19:12:20 +0100
Subject: [PATCH 04/17] Add docstring

---
 web/src/registry/registry.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/src/registry/registry.ts b/web/src/registry/registry.ts
index 1d65a96..67bc545 100644
--- a/web/src/registry/registry.ts
+++ b/web/src/registry/registry.ts
@@ -3,10 +3,18 @@ interface RegistryResponse {
   getBody: (_encoding?: unknown) => Uint8Array;
 }
 
+/**
+ * Performs a synchronous HTTP request to the given URL and returns the response as a Uint8Array.
+ *
+ * Note: This function uses XMLHttpRequest in synchronous mode, which is generally
+ * discouraged in web development due to potential UI blocking. However, it is
+ * used here to meet the requirements of the Typst package registry interface,
+ * which expects a synchronous response.
+ */
 export function registryRequest(method: string, url: string): RegistryResponse {
   const request = new XMLHttpRequest();
   request.open(method, url, false);
-  // Sync XHR from a document cannot use non-text responseType.
+  // Sync XHR from a document cannot use non-text responseType
   request.overrideMimeType("text/plain; charset=x-user-defined");
   request.send();
 

From 08b1721a23f381610610e8f19f6a321bf76f65fa Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 19:13:28 +0100
Subject: [PATCH 05/17] Increase max height of preview pane

---
 web/src/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/constants.ts b/web/src/constants.ts
index 9a06c3d..4dcbe2a 100644
--- a/web/src/constants.ts
+++ b/web/src/constants.ts
@@ -78,7 +78,7 @@ export const THEMES = {
  * Preview configuration.
  */
 export const PREVIEW_CONFIG = {
-  MAX_HEIGHT: "150px",
+  MAX_HEIGHT: "320px",
   DARK_MODE_FILL: "#ffffff",
   LIGHT_MODE_FILL: "#000000",
 } as const;

From 954de19692cfc472e7c89f09b2a2256e9dca0710 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 19:32:01 +0100
Subject: [PATCH 06/17] Add preview Typst fill color toggle

---
 web/powerpoint.html  |  6 ++++++
 web/src/constants.ts |  2 ++
 web/src/preview.ts   | 23 +++++++++++++++++++++--
 web/src/ui.ts        | 21 +++++++++++++++++++++
 4 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/web/powerpoint.html b/web/powerpoint.html
index 506cfb1..9dcc734 100644
--- a/web/powerpoint.html
+++ b/web/powerpoint.html
@@ -25,6 +25,12 @@
         <!-- eslint-disable-next-line @html-eslint/use-baseline -->
         <input id="fillColor" type="color" value="#000000">
       </div>
+      <div class="control-group checkbox-group">
+        <label title="Use Typst document colors in preview instead of overriding them">
+          <input id="previewFillEnabled" type="checkbox">
+          <span>Preview Fill</span>
+        </label>
+      </div>
       <div class="control-group checkbox-group">
         <label title="Automatically wrap your input in display math delimiters ($)">
           <input id="mathModeEnabled" type="checkbox" checked>
diff --git a/web/src/constants.ts b/web/src/constants.ts
index 4dcbe2a..dc44d01 100644
--- a/web/src/constants.ts
+++ b/web/src/constants.ts
@@ -27,6 +27,7 @@ export const DOM_IDS = {
   FONT_SIZE: "fontSize",
   FILL_COLOR_ENABLED: "fillColorEnabled",
   FILL_COLOR: "fillColor",
+  PREVIEW_FILL_ENABLED: "previewFillEnabled",
   MATH_MODE_ENABLED: "mathModeEnabled",
   INPUT_WRAPPER: "inputWrapper",
   TYPST_INPUT: "typstInput",
@@ -53,6 +54,7 @@ export const DOM_IDS = {
 export const STORAGE_KEYS = {
   FONT_SIZE: "typstFontSize",
   FILL_COLOR: "typstFillColor",
+  PREVIEW_FILL: "typstPreviewFill",
   MATH_MODE: "typstMathMode",
   THEME: "typstTheme",
 } as const;
diff --git a/web/src/preview.ts b/web/src/preview.ts
index c0dc143..98bae71 100644
--- a/web/src/preview.ts
+++ b/web/src/preview.ts
@@ -2,10 +2,20 @@ import { DiagnosticMessage, typst } from "./typst.js";
 import { applyFillColor, parseAndApplySize } from "./svg.js";
 import { DOM_IDS, PREVIEW_CONFIG, STORAGE_KEYS, FILL_COLOR_DISABLED } from "./constants.js";
 import { getAreaElement, getHTMLElement, getInputElement } from "./utils/dom";
-import { getFillColor, getFontSize, getMathModeEnabled, getTypstCode, setButtonEnabled, setMathModeEnabled } from "./ui";
+import {
+  getFillColor,
+  getFontSize,
+  getMathModeEnabled,
+  getTypstCode,
+  setButtonEnabled,
+  setMathModeEnabled,
+} from "./ui";
 import { storeValue, getStoredValue } from "./utils/storage.js";
 import { lastTypstShapeId } from "./shape.js";
 
+const PREVIEW_FILL_ENABLED_ID = "previewFillEnabled";
+const PREVIEW_FILL_STORAGE_KEY = "typstPreviewFill";
+
 /**
  * Sets up event listeners for preview updates.
  */
@@ -14,6 +24,7 @@ export function setupPreviewListeners() {
   const fontSizeInput = getInputElement(DOM_IDS.FONT_SIZE);
   const fillColorInput = getInputElement(DOM_IDS.FILL_COLOR);
   const fillColorEnabled = getInputElement(DOM_IDS.FILL_COLOR_ENABLED);
+  const previewFillEnabled = getInputElement(PREVIEW_FILL_ENABLED_ID);
   const mathModeEnabled = getInputElement(DOM_IDS.MATH_MODE_ENABLED);
 
   typstInput.addEventListener("input", () => {
@@ -41,6 +52,11 @@ export function setupPreviewListeners() {
     void updatePreview();
   });
 
+  previewFillEnabled.addEventListener("change", () => {
+    storeValue(PREVIEW_FILL_STORAGE_KEY, previewFillEnabled.checked.toString());
+    void updatePreview();
+  });
+
   mathModeEnabled.addEventListener("change", () => {
     const mathMode = getMathModeEnabled();
     if (!lastTypstShapeId) {
@@ -127,7 +143,10 @@ export async function updatePreview() {
 
   const isDarkMode = document.documentElement.classList.contains("dark-mode");
   const previewFill = isDarkMode ? PREVIEW_CONFIG.DARK_MODE_FILL : PREVIEW_CONFIG.LIGHT_MODE_FILL;
-  applyFillColor(svgElement, previewFill);
+  const shouldKeepTypstFill = getInputElement(PREVIEW_FILL_ENABLED_ID).checked;
+  if (!shouldKeepTypstFill) {
+    applyFillColor(svgElement, previewFill);
+  }
 }
 
 /**
diff --git a/web/src/ui.ts b/web/src/ui.ts
index 7094a2d..918ac71 100644
--- a/web/src/ui.ts
+++ b/web/src/ui.ts
@@ -22,6 +22,11 @@ export function initializeUIState() {
   if (savedMathMode !== null) {
     setMathModeEnabled(savedMathMode === "true");
   }
+
+  const savedPreviewFill = getStoredValue(STORAGE_KEYS.PREVIEW_FILL);
+  if (savedPreviewFill !== null) {
+    setPreviewFillEnabled(savedPreviewFill === "true");
+  }
 }
 
 /**
@@ -86,6 +91,22 @@ export function getFillColor(): string {
   return fillColorInput.value || DEFAULTS.FILL_COLOR;
 }
 
+/**
+ * @returns whether preview should keep Typst's own fill colors.
+ */
+export function getPreviewFillEnabled(): boolean {
+  const checkbox = getInputElement(DOM_IDS.PREVIEW_FILL_ENABLED);
+  return checkbox.checked;
+}
+
+/**
+ * Sets whether preview should keep Typst's own fill colors.
+ */
+export function setPreviewFillEnabled(enabled: boolean) {
+  const checkbox = getInputElement(DOM_IDS.PREVIEW_FILL_ENABLED);
+  checkbox.checked = enabled;
+}
+
 /**
  * Sets the fill color in the UI.
  *

From 9109a64427c7909eb2d4fd8b06e66d1e824d5228 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 19:39:35 +0100
Subject: [PATCH 07/17] Only allow to preview typst fill if fill is unchecked

---
 web/powerpoint.html |  2 +-
 web/src/preview.ts  | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/powerpoint.html b/web/powerpoint.html
index 9dcc734..a1d06e8 100644
--- a/web/powerpoint.html
+++ b/web/powerpoint.html
@@ -28,7 +28,7 @@
       <div class="control-group checkbox-group">
         <label title="Use Typst document colors in preview instead of overriding them">
           <input id="previewFillEnabled" type="checkbox">
-          <span>Preview Fill</span>
+          <span>Preview Typst Fill</span>
         </label>
       </div>
       <div class="control-group checkbox-group">
diff --git a/web/src/preview.ts b/web/src/preview.ts
index 98bae71..e0f002e 100644
--- a/web/src/preview.ts
+++ b/web/src/preview.ts
@@ -48,6 +48,7 @@ export function setupPreviewListeners() {
     const fillColor = getFillColor();
     const colorInput = getInputElement(DOM_IDS.FILL_COLOR);
     colorInput.disabled = !fillColorEnabled.checked;
+    syncPreviewFillToggleState(fillColorEnabled.checked);
     storeValue(STORAGE_KEYS.FILL_COLOR, fillColor || FILL_COLOR_DISABLED);
     void updatePreview();
   });
@@ -67,9 +68,26 @@ export function setupPreviewListeners() {
     void updatePreview();
   });
 
+  syncPreviewFillToggleState(fillColorEnabled.checked);
   updateMathModeVisuals();
 }
 
+/**
+ * Keeps preview fill toggle consistent with Fill checkbox behavior.
+ */
+function syncPreviewFillToggleState(isFillEnabled: boolean) {
+  const previewFillEnabled = getInputElement(PREVIEW_FILL_ENABLED_ID);
+
+  if (isFillEnabled) {
+    previewFillEnabled.checked = false;
+    previewFillEnabled.disabled = true;
+    storeValue(PREVIEW_FILL_STORAGE_KEY, "false");
+    return;
+  }
+
+  previewFillEnabled.disabled = false;
+}
+
 /**
  * Restores the math mode setting from localStorage.
  */

From a208e551e98a33fd19915c67e6b57d09e4d6706e Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 19:45:24 +0100
Subject: [PATCH 08/17] Normalize SVG transparency

---
 web/src/insertion.ts |  3 +-
 web/src/svg.ts       | 66 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/web/src/insertion.ts b/web/src/insertion.ts
index 7b1a6ad..67d90b2 100644
--- a/web/src/insertion.ts
+++ b/web/src/insertion.ts
@@ -1,5 +1,5 @@
 import { debug } from "./utils/logger.js";
-import { applyFillColor, parseAndApplySize } from "./svg.js";
+import { applyFillColor, normalizeAlphaHexColors, parseAndApplySize } from "./svg.js";
 import { typst } from "./typst.js";
 import { setStatus, getFontSize, getFillColor, getMathModeEnabled, getTypstCode } from "./ui.js";
 import { isTypstPayload, createTypstPayload, extractTypstCode } from "./payload.js";
@@ -32,6 +32,7 @@ async function prepareTypstSvg(
   if (fillColor) {
     applyFillColor(svgElement, fillColor);
   }
+  normalizeAlphaHexColors(svgElement);
 
   const serializer = new XMLSerializer();
   const svg = serializer.serializeToString(svgElement);
diff --git a/web/src/svg.ts b/web/src/svg.ts
index 9c8dfda..20b379f 100644
--- a/web/src/svg.ts
+++ b/web/src/svg.ts
@@ -67,3 +67,69 @@ export function applyFillColor(svg: SVGElement, fillColor: string) {
     }
   });
 }
+
+type ParsedHexAlpha = {
+  rgbHex: string;
+  alpha: number;
+};
+
+/**
+ * Parses #RGBA or #RRGGBBAA colors into RGB + alpha.
+ */
+function parseHexWithAlpha(value: string): ParsedHexAlpha | null {
+  const color = value.trim();
+  if (!color.startsWith("#")) {
+    return null;
+  }
+
+  const hex = color.slice(1);
+  if (hex.length === 8) {
+    const rgbHex = `#${hex.slice(0, 6)}`;
+    const alpha = parseInt(hex.slice(6, 8), 16) / 255;
+    return { rgbHex, alpha };
+  }
+
+  if (hex.length === 4) {
+    const rgbHex = `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+    const alpha = parseInt(`${hex[3]}${hex[3]}`, 16) / 255;
+    return { rgbHex, alpha };
+  }
+
+  return null;
+}
+
+/**
+ * Converts alpha hex colors to RGB + explicit opacity attributes.
+ *
+ * PowerPoint's SVG import can fail on #RRGGBBAA colors, so we normalize
+ * these to maximize compatibility when inserting shapes.
+ */
+export function normalizeAlphaHexColors(svg: SVGElement) {
+  const colorToOpacityAttr: Record<string, string> = {
+    "fill": "fill-opacity",
+    "stroke": "stroke-opacity",
+    "stop-color": "stop-opacity",
+  };
+
+  const elements = svg.querySelectorAll("*");
+  elements.forEach((el) => {
+    Object.entries(colorToOpacityAttr).forEach(([colorAttr, opacityAttr]) => {
+      const value = el.getAttribute(colorAttr);
+      if (!value) {
+        return;
+      }
+
+      const parsed = parseHexWithAlpha(value);
+      if (!parsed) {
+        return;
+      }
+
+      el.setAttribute(colorAttr, parsed.rgbHex);
+
+      const existingOpacity = parseFloat(el.getAttribute(opacityAttr) || "1");
+      const safeOpacity = Number.isFinite(existingOpacity) ? existingOpacity : 1;
+      const combinedOpacity = Math.max(0, Math.min(1, safeOpacity * parsed.alpha));
+      el.setAttribute(opacityAttr, combinedOpacity.toString());
+    });
+  });
+}

From c1adbb13fc70a39f72c44abc08e613c9f75d4555 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 19:49:26 +0100
Subject: [PATCH 09/17] Don't update the preview during fill color change

---
 web/src/preview.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/preview.ts b/web/src/preview.ts
index e0f002e..1fb5d8e 100644
--- a/web/src/preview.ts
+++ b/web/src/preview.ts
@@ -41,7 +41,6 @@ export function setupPreviewListeners() {
   fillColorInput.addEventListener("input", () => {
     const fillColor = getFillColor();
     storeValue(STORAGE_KEYS.FILL_COLOR, fillColor);
-    void updatePreview();
   });
 
   fillColorEnabled.addEventListener("change", () => {

From 6f8e35990833c6beccec8d2e4871bf7f4ff29348 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 20:14:59 +0100
Subject: [PATCH 10/17] Reuse constants

---
 web/src/preview.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/web/src/preview.ts b/web/src/preview.ts
index 1fb5d8e..07dba77 100644
--- a/web/src/preview.ts
+++ b/web/src/preview.ts
@@ -13,9 +13,6 @@ import {
 import { storeValue, getStoredValue } from "./utils/storage.js";
 import { lastTypstShapeId } from "./shape.js";
 
-const PREVIEW_FILL_ENABLED_ID = "previewFillEnabled";
-const PREVIEW_FILL_STORAGE_KEY = "typstPreviewFill";
-
 /**
  * Sets up event listeners for preview updates.
  */
@@ -24,7 +21,7 @@ export function setupPreviewListeners() {
   const fontSizeInput = getInputElement(DOM_IDS.FONT_SIZE);
   const fillColorInput = getInputElement(DOM_IDS.FILL_COLOR);
   const fillColorEnabled = getInputElement(DOM_IDS.FILL_COLOR_ENABLED);
-  const previewFillEnabled = getInputElement(PREVIEW_FILL_ENABLED_ID);
+  const previewFillEnabled = getInputElement(DOM_IDS.PREVIEW_FILL_ENABLED);
   const mathModeEnabled = getInputElement(DOM_IDS.MATH_MODE_ENABLED);
 
   typstInput.addEventListener("input", () => {
@@ -53,7 +50,7 @@ export function setupPreviewListeners() {
   });
 
   previewFillEnabled.addEventListener("change", () => {
-    storeValue(PREVIEW_FILL_STORAGE_KEY, previewFillEnabled.checked.toString());
+    storeValue(STORAGE_KEYS.PREVIEW_FILL, previewFillEnabled.checked.toString());
     void updatePreview();
   });
 
@@ -75,12 +72,12 @@ export function setupPreviewListeners() {
  * Keeps preview fill toggle consistent with Fill checkbox behavior.
  */
 function syncPreviewFillToggleState(isFillEnabled: boolean) {
-  const previewFillEnabled = getInputElement(PREVIEW_FILL_ENABLED_ID);
+  const previewFillEnabled = getInputElement(DOM_IDS.PREVIEW_FILL_ENABLED);
 
   if (isFillEnabled) {
     previewFillEnabled.checked = false;
     previewFillEnabled.disabled = true;
-    storeValue(PREVIEW_FILL_STORAGE_KEY, "false");
+    storeValue(STORAGE_KEYS.PREVIEW_FILL, "false");
     return;
   }
 
@@ -160,7 +157,7 @@ export async function updatePreview() {
 
   const isDarkMode = document.documentElement.classList.contains("dark-mode");
   const previewFill = isDarkMode ? PREVIEW_CONFIG.DARK_MODE_FILL : PREVIEW_CONFIG.LIGHT_MODE_FILL;
-  const shouldKeepTypstFill = getInputElement(PREVIEW_FILL_ENABLED_ID).checked;
+  const shouldKeepTypstFill = getInputElement(DOM_IDS.PREVIEW_FILL_ENABLED).checked;
   if (!shouldKeepTypstFill) {
     applyFillColor(svgElement, previewFill);
   }

From 9f48b9e445262d7c1530381e944795485d5fe3cf Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 20:17:54 +0100
Subject: [PATCH 11/17] Validate alpha value

---
 web/src/svg.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/svg.ts b/web/src/svg.ts
index 20b379f..614d211 100644
--- a/web/src/svg.ts
+++ b/web/src/svg.ts
@@ -85,13 +85,21 @@ function parseHexWithAlpha(value: string): ParsedHexAlpha | null {
   const hex = color.slice(1);
   if (hex.length === 8) {
     const rgbHex = `#${hex.slice(0, 6)}`;
-    const alpha = parseInt(hex.slice(6, 8), 16) / 255;
+    const alphaByte = parseInt(hex.slice(6, 8), 16);
+    if (!Number.isFinite(alphaByte)) {
+      return null;
+    }
+    const alpha = alphaByte / 255;
     return { rgbHex, alpha };
   }
 
   if (hex.length === 4) {
     const rgbHex = `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
-    const alpha = parseInt(`${hex[3]}${hex[3]}`, 16) / 255;
+    const alphaByte = parseInt(`${hex[3]}${hex[3]}`, 16);
+    if (!Number.isFinite(alphaByte)) {
+      return null;
+    }
+    const alpha = alphaByte / 255;
     return { rgbHex, alpha };
   }
 

From 1ea84085db6d0d626348059dda634dda153c9e34 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 20:20:04 +0100
Subject: [PATCH 12/17] Catch request.send()

---
 web/src/registry/registry.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/web/src/registry/registry.ts b/web/src/registry/registry.ts
index 67bc545..ae283df 100644
--- a/web/src/registry/registry.ts
+++ b/web/src/registry/registry.ts
@@ -16,7 +16,19 @@ export function registryRequest(method: string, url: string): RegistryResponse {
   request.open(method, url, false);
   // Sync XHR from a document cannot use non-text responseType
   request.overrideMimeType("text/plain; charset=x-user-defined");
-  request.send();
+  try {
+    request.send();
+  } catch (error) {
+    console.error(`Registry request to ${url} failed:`, error);
+
+    // If the request fails synchronously (e.g. CORS/network issues),
+    // return a non-2xx status code with an empty body instead of throwing
+    const emptyBody = new Uint8Array();
+    return {
+      statusCode: 0,
+      getBody: () => emptyBody,
+    };
+  }
 
   const response = request.response as unknown;
   const responseText = typeof response === "string" ? response : "";

From 802455dad5e4721ae127d85c84cd13c378b072d7 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 20:23:58 +0100
Subject: [PATCH 13/17] Sync preview fill toggle state

---
 web/src/preview.ts   | 8 ++++++++
 web/src/selection.ts | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/src/preview.ts b/web/src/preview.ts
index 07dba77..6f45c90 100644
--- a/web/src/preview.ts
+++ b/web/src/preview.ts
@@ -84,6 +84,14 @@ function syncPreviewFillToggleState(isFillEnabled: boolean) {
   previewFillEnabled.disabled = false;
 }
 
+/**
+ * Syncs preview fill toggle state based on the current fill checkbox value.
+ */
+export function syncPreviewFillToggleFromFillCheckbox() {
+  const fillColorEnabled = getInputElement(DOM_IDS.FILL_COLOR_ENABLED);
+  syncPreviewFillToggleState(fillColorEnabled.checked);
+}
+
 /**
  * Restores the math mode setting from localStorage.
  */
diff --git a/web/src/selection.ts b/web/src/selection.ts
index c3435c4..75743c7 100644
--- a/web/src/selection.ts
+++ b/web/src/selection.ts
@@ -1,6 +1,6 @@
 import { FILL_COLOR_DISABLED, SHAPE_CONFIG, DEFAULTS } from "./constants.js";
 import { extractTypstCode, isTypstPayload } from "./payload.js";
-import { updatePreview, updateButtonState, restoreMathModeFromStorage, updateMathModeVisuals } from "./preview.js";
+import { updatePreview, updateButtonState, restoreMathModeFromStorage, updateMathModeVisuals, syncPreviewFillToggleFromFillCheckbox } from "./preview.js";
 import { readShapeTag, setLastTypstId } from "./shape.js";
 import { setButtonText, setFillColor, setFontSize, setMathModeEnabled, setStatus, setTypstCode, setBulkUpdateButtonVisible, setFileButtonText } from "./ui.js";
 import { debug } from "./utils/logger.js";
@@ -86,6 +86,7 @@ async function loadTypstShape(typstShape: PowerPoint.Shape, slideId: string | nu
     }
 
     setFillColor(fillColorToSet);
+    syncPreviewFillToggleFromFillCheckbox();
     setTypstCode(typstCode);
     setMathModeEnabled(storedMathMode === "true");
     updateMathModeVisuals();

From c57c2a92cfe030883f67b56cb49503efc0cd8340 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 20:25:58 +0100
Subject: [PATCH 14/17] Update Readme

---
 README.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 5fbe7af..f0c5e3e 100644
--- a/README.md
+++ b/README.md
@@ -22,13 +22,11 @@ Easily insert Typst equations with live preview, update them, and even generate
 
 <https://github.com/user-attachments/assets/3cb307af-4c02-4665-8f2c-34c23c6f68fc>
 
-<sub>Maybe we can even integrate packages from the [Typst Universe](https://typst.app/universe/) in the future, vote for [this issue](https://github.com/Myriad-Dreamin/typst.ts/issues/825) or provide a PR if you have a solution in mind ;)</sub>
-
 ### Installation
 
 See [the Install guide](./INSTALL.md).
 
-## Tutorial
+### Tutorial
 
 [YouTube: Animate equations in PowerPoint with PPTypst](https://youtu.be/c6sfzu2--iY)
 

From 0a4fca825d3e4db7d2ec0f98d2843e0189053fcf Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 20:32:55 +0100
Subject: [PATCH 15/17] Add docs to font cache

---
 web/src/registry/font-cache.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/src/registry/font-cache.ts b/web/src/registry/font-cache.ts
index 6541262..ba97871 100644
--- a/web/src/registry/font-cache.ts
+++ b/web/src/registry/font-cache.ts
@@ -1,8 +1,18 @@
+/**
+ * Module for font downloading and caching in the browser.
+ *
+ * Inspired by the cached font middleware in the typst.ts compiler tempalte:
+ * https://github.com/Myriad-Dreamin/typst.ts/blob/2a8b32d8cca70cc4d105fef074d2f35fc7546450/templates/compiler-wasm-cjs/src/cached-font-middleware.cts#L1-L52
+ */
+
 import { preloadFontAssets } from "@myriaddreamin/typst.ts/dist/esm/options.init.mjs";
 
 const FONT_CACHE_NAME = "typst-font-assets-v1";
 
-const cachedFetch: typeof fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+/**
+ * A fetch wrapper that caches font assets in the browser's Cache API.
+ */
+async function cachedFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
   const request = input instanceof Request ? input : new Request(input, init);
 
   if (!("caches" in globalThis) || request.method.toUpperCase() !== "GET") {
@@ -25,7 +35,7 @@ const cachedFetch: typeof fetch = async (input: RequestInfo | URL, init?: Reques
   }
 
   return response;
-};
+}
 
 export function cachedFontInitOptions() {
   return {

From 97298235da2ca898b52f895baa93b9f926f1bf61 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 20:34:24 +0100
Subject: [PATCH 16/17] Also check for the SVG root element in alpha
 normalization

---
 web/src/svg.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/svg.ts b/web/src/svg.ts
index 614d211..7063f8d 100644
--- a/web/src/svg.ts
+++ b/web/src/svg.ts
@@ -119,7 +119,7 @@ export function normalizeAlphaHexColors(svg: SVGElement) {
     "stop-color": "stop-opacity",
   };
 
-  const elements = svg.querySelectorAll("*");
+  const elements: Element[] = [svg, ...Array.from(svg.querySelectorAll("*"))];
   elements.forEach((el) => {
     Object.entries(colorToOpacityAttr).forEach(([colorAttr, opacityAttr]) => {
       const value = el.getAttribute(colorAttr);

From 31515d446cdbbe598c3e4dd9ebcd5588db07f1c5 Mon Sep 17 00:00:00 2001
From: Splines <info@splines.me>
Date: Fri, 20 Mar 2026 20:39:30 +0100
Subject: [PATCH 17/17] Handle missing browser cache

---
 web/src/registry/font-cache.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/registry/font-cache.ts b/web/src/registry/font-cache.ts
index ba97871..c35b7b5 100644
--- a/web/src/registry/font-cache.ts
+++ b/web/src/registry/font-cache.ts
@@ -19,12 +19,20 @@ async function cachedFetch(input: RequestInfo | URL, init?: RequestInit): Promis
     return fetch(request);
   }
 
-  const cache = await caches.open(FONT_CACHE_NAME);
-  const cached = await cache.match(request);
-  if (cached) {
-    return cached;
+  let cache: Cache | null = null;
+  try {
+    cache = await caches.open(FONT_CACHE_NAME);
+    const cached = await cache.match(request);
+    if (cached) {
+      // 🎈 Cached response
+      return cached;
+    }
+  } catch {
+    // No cache access possible
+    return fetch(request);
   }
 
+  // 🎈 No cached response
   const response = await fetch(request);
   if (response.ok) {
     try {