@edrlab/thorium-web 1.2.1 → 1.3.0

package/dist/chunk-WECWPYZB.mjs

@@ -0,0 +1,1950 @@
+import { propsToCSSVars } from './chunk-7CGMWOZN.mjs';
+import { useBreakpoints, useForcedColors, useMonochrome, useReducedMotion, useReducedTransparency } from './chunk-GFSLVQIG.mjs';
+import { defaultAudioPreferencesContextValue, devContentProtectionConfig, ThAudioPreferencesContext, defaultPreferencesContextValue, ThPreferencesContext, defaultTextSettingsMain, defaultTextSettingsSubpanel, defaultSpacingSettingsMain, defaultSpacingSettingsSubpanel, defaultSpacingPresetsOrder } from './chunk-C236BQQB.mjs';
+import { useColorScheme, useContrast } from './chunk-NQ2ZSGCX.mjs';
+import { useMemo, useState, useCallback, useEffect, useContext, useRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/preferences/helpers/buildThemeObject.ts
+var buildThemeObject = ({
+  theme,
+  themeKeys,
+  systemThemes,
+  colorScheme
+}) => {
+  if (!theme) {
+    return {};
+  }
+  if (theme === "auto" && colorScheme && systemThemes) {
+    theme = colorScheme === "dark" /* dark */ ? systemThemes.dark : systemThemes.light;
+  }
+  let themeProps = {};
+  const themeToken = themeKeys[theme];
+  if (themeToken) {
+    themeProps = {
+      backgroundColor: themeToken.background,
+      textColor: themeToken.text,
+      linkColor: themeToken.link,
+      selectionBackgroundColor: themeToken.select,
+      selectionTextColor: themeToken.onSelect,
+      visitedColor: themeToken.visited
+    };
+  } else {
+    console.warn(`Theme key "${String(theme)}" not found in themeKeys.`);
+    themeProps = {
+      backgroundColor: null,
+      textColor: null,
+      linkColor: null,
+      selectionBackgroundColor: null,
+      selectionTextColor: null,
+      visitedColor: null
+    };
+  }
+  return themeProps;
+};
+
+// src/preferences/helpers/fontPref/bunnyFonts.ts
+var DEFAULT_FALLBACK = "sans-serif";
+var createDefinitionsFromBunnyFonts = (params) => {
+  const { cssUrl, options } = params;
+  const { fallbacks, order, labels } = options || {};
+  const processedUrl = cssUrl.includes("@import") ? cssUrl.match(/@import\s+url\(['"]?([^'")]+)['"]?\)/i)?.[1] || cssUrl : cssUrl.includes("href=") ? cssUrl.match(/href=["']([^"']+)["']/)?.[1] || cssUrl : cssUrl;
+  const url = new URL(processedUrl);
+  if (!url.hostname.includes("fonts.bunny.net")) {
+    throw new Error("Invalid Bunny Fonts URL");
+  }
+  const familyParam = url.searchParams.get("family");
+  if (!familyParam) {
+    throw new Error("No family parameter found in Bunny Fonts URL");
+  }
+  const fontEntries = familyParam.split("|").map((familyStr) => {
+    const [familyName, weightsStr = ""] = familyStr.split(":");
+    if (!familyName) {
+      throw new Error(`Invalid font family format: ${familyStr}`);
+    }
+    const weightStyles = /* @__PURE__ */ new Map();
+    if (weightsStr) {
+      weightsStr.split(",").forEach((weightStr) => {
+        const isItalic = weightStr.endsWith("i");
+        const weightValue = parseInt(isItalic ? weightStr.slice(0, -1) : weightStr, 10);
+        if (!isNaN(weightValue)) {
+          if (!weightStyles.has(weightValue)) {
+            weightStyles.set(weightValue, /* @__PURE__ */ new Set());
+          }
+          weightStyles.get(weightValue)?.add(isItalic ? "italic" : "normal");
+        }
+      });
+    }
+    const weights = Array.from(weightStyles.keys()).sort((a, b) => a - b);
+    const hasItalic = Array.from(weightStyles.values()).some((styles2) => styles2.has("italic"));
+    const styles = hasItalic ? ["normal", "italic"] : ["normal"];
+    const fontId = familyName;
+    const familyDisplayName = familyName.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+    return [
+      fontId,
+      {
+        id: fontId,
+        name: familyDisplayName,
+        ...labels?.[fontId] && { label: labels[fontId] },
+        source: {
+          type: "custom",
+          provider: "bunny"
+        },
+        spec: {
+          family: familyDisplayName,
+          fallbacks: fallbacks?.[fontId] || [DEFAULT_FALLBACK],
+          weights: {
+            type: "static",
+            values: weights.length ? weights : [400]
+          },
+          styles
+        }
+      }
+    ];
+  });
+  const result = Object.fromEntries(fontEntries);
+  if (order && order.length > 0) {
+    const orderedResult = {};
+    order.forEach((fontId) => {
+      if (result[fontId]) {
+        orderedResult[fontId] = result[fontId];
+      }
+    });
+    Object.entries(result).forEach(([fontId, definition]) => {
+      if (!orderedResult[fontId]) {
+        orderedResult[fontId] = definition;
+      }
+    });
+    return orderedResult;
+  }
+  return result;
+};
+var ThDirectionSetter = ({
+  direction,
+  children
+}) => {
+  useEffect(() => {
+    if (direction) document.documentElement.dir = direction;
+  }, [direction]);
+  return children;
+};
+
+// src/preferences/adapters/ThAudioMemoryPreferencesAdapter.ts
+var ThAudioMemoryPreferencesAdapter = class {
+  currentPreferences;
+  listeners = /* @__PURE__ */ new Set();
+  constructor(initialPreferences) {
+    this.currentPreferences = { ...initialPreferences };
+  }
+  getPreferences() {
+    return { ...this.currentPreferences };
+  }
+  setPreferences(prefs) {
+    this.currentPreferences = { ...prefs };
+    this.notifyListeners(this.currentPreferences);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+  }
+  unsubscribe(listener) {
+    this.listeners.delete(listener);
+  }
+  notifyListeners(prefs) {
+    this.listeners.forEach((listener) => listener({ ...prefs }));
+  }
+};
+function ThAudioPreferencesProvider({
+  adapter,
+  initialPreferences,
+  devMode,
+  children
+}) {
+  const effectiveAdapter = useMemo(() => {
+    let fallback = defaultAudioPreferencesContextValue.preferences;
+    if (devMode && !initialPreferences) {
+      fallback = { ...fallback, contentProtection: devContentProtectionConfig };
+    }
+    return adapter || new ThAudioMemoryPreferencesAdapter(
+      initialPreferences || fallback
+    );
+  }, [adapter, initialPreferences, devMode]);
+  const [preferences, setPreferences] = useState(
+    (() => {
+      let fallback = defaultAudioPreferencesContextValue.preferences;
+      if (devMode && !initialPreferences) {
+        fallback = { ...fallback, contentProtection: devContentProtectionConfig };
+      }
+      return initialPreferences || fallback;
+    })()
+  );
+  const handlePreferenceChange = useCallback((newPrefs) => {
+    setPreferences(
+      (prev) => JSON.stringify(prev) === JSON.stringify(newPrefs) ? prev : newPrefs
+    );
+  }, []);
+  useEffect(() => {
+    effectiveAdapter.subscribe(handlePreferenceChange);
+    return () => {
+      effectiveAdapter.unsubscribe(handlePreferenceChange);
+    };
+  }, [effectiveAdapter, handlePreferenceChange]);
+  const contextValue = useMemo(() => ({
+    preferences,
+    updatePreferences: (newPrefs) => {
+      effectiveAdapter.setPreferences(newPrefs);
+    }
+  }), [preferences, effectiveAdapter]);
+  return /* @__PURE__ */ jsx(ThAudioPreferencesContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ThDirectionSetter, { direction: preferences.direction, children }) });
+}
+
+// src/preferences/adapters/ThMemoryPreferencesAdapter.ts
+var ThMemoryPreferencesAdapter = class {
+  currentPreferences;
+  listeners = /* @__PURE__ */ new Set();
+  constructor(initialPreferences) {
+    this.currentPreferences = { ...initialPreferences };
+  }
+  getPreferences() {
+    return { ...this.currentPreferences };
+  }
+  setPreferences(prefs) {
+    this.currentPreferences = { ...prefs };
+    this.notifyListeners(this.currentPreferences);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+  }
+  unsubscribe(listener) {
+    this.listeners.delete(listener);
+  }
+  notifyListeners(prefs) {
+    this.listeners.forEach((listener) => listener({ ...prefs }));
+  }
+};
+function ThPreferencesProvider({
+  adapter,
+  initialPreferences,
+  devMode,
+  children
+}) {
+  const effectiveAdapter = useMemo(() => {
+    let fallbackPreferences = defaultPreferencesContextValue.preferences;
+    if (devMode && !initialPreferences) {
+      fallbackPreferences = {
+        ...fallbackPreferences,
+        contentProtection: devContentProtectionConfig
+      };
+    }
+    return adapter || new ThMemoryPreferencesAdapter(
+      initialPreferences || fallbackPreferences
+    );
+  }, [adapter, initialPreferences, devMode]);
+  const [preferences, setPreferences] = useState(
+    (() => {
+      let fallbackPreferences = defaultPreferencesContextValue.preferences;
+      if (devMode && !initialPreferences) {
+        fallbackPreferences = {
+          ...fallbackPreferences,
+          contentProtection: devContentProtectionConfig
+        };
+      }
+      return initialPreferences || fallbackPreferences;
+    })()
+  );
+  const handlePreferenceChange = useCallback((newPrefs) => {
+    setPreferences((prev) => {
+      return JSON.stringify(prev) === JSON.stringify(newPrefs) ? prev : newPrefs;
+    });
+  }, []);
+  useEffect(() => {
+    effectiveAdapter.subscribe(handlePreferenceChange);
+    return () => {
+      effectiveAdapter.unsubscribe(handlePreferenceChange);
+    };
+  }, [effectiveAdapter, handlePreferenceChange]);
+  const contextValue = useMemo(() => ({
+    preferences,
+    updatePreferences: (newPrefs) => {
+      effectiveAdapter.setPreferences(newPrefs);
+    }
+  }), [preferences, effectiveAdapter]);
+  return /* @__PURE__ */ jsx(ThPreferencesContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ThDirectionSetter, { direction: preferences.direction, children }) });
+}
+var useActionsPreferences = () => {
+  const audioCtx = useContext(ThAudioPreferencesContext);
+  const readerCtx = useContext(ThPreferencesContext);
+  if (audioCtx) {
+    return {
+      docking: audioCtx.preferences.docking,
+      actionsKeys: {
+        ...audioCtx.preferences.actions.primary.keys,
+        ...audioCtx.preferences.actions.secondary.keys
+      }
+    };
+  }
+  if (readerCtx) {
+    return {
+      docking: readerCtx.preferences.docking,
+      actionsKeys: readerCtx.preferences.actions.keys
+    };
+  }
+  throw new Error("useActionsPreferences must be used within a ThPreferencesProvider or ThAudioPreferencesProvider");
+};
+var useAudioActionsPreferences = () => {
+  const audioCtx = useContext(ThAudioPreferencesContext);
+  if (!audioCtx) {
+    throw new Error("useAudioActionsPreferences must be used within a ThAudioPreferencesProvider");
+  }
+  return {
+    docking: audioCtx.preferences.docking,
+    primaryActionsKeys: audioCtx.preferences.actions.primary.keys,
+    secondaryActionsKeys: audioCtx.preferences.actions.secondary.keys
+  };
+};
+function useAudioPreferences() {
+  const context = useContext(ThAudioPreferencesContext);
+  if (!context) {
+    throw new Error("useAudioPreferences must be used within a ThAudioPreferencesProvider");
+  }
+  return {
+    preferences: context.preferences,
+    updatePreferences: context.updatePreferences
+  };
+}
+
+// src/preferences/services/createBunnyFontResources.ts
+var buildBunnyFontsUrl = ({
+  family,
+  weights,
+  styles = ["normal"]
+}) => {
+  if (weights.type !== "static") {
+    throw new Error("Bunny Fonts only supports static fonts");
+  }
+  const weightValues = weights.values;
+  const variants = /* @__PURE__ */ new Set();
+  for (const weight of weightValues) {
+    variants.add(weight.toString());
+    if (styles.includes("italic")) {
+      variants.add(`${weight}i`);
+    }
+  }
+  const variantList = Array.from(variants).sort();
+  const familyParam = family.replace(/ /g, "-").toLowerCase();
+  const variantParam = variantList.join(",");
+  return `https://fonts.bunny.net/css?family=${familyParam}:${variantParam}`;
+};
+var createBunnyFontResources = (font) => {
+  if (font.source.type !== "custom" || font.source.provider !== "bunny" || font.spec.weights.type !== "static") {
+    return null;
+  }
+  const { family, weights, styles } = font.spec;
+  const url = buildBunnyFontsUrl({
+    family,
+    weights,
+    styles
+  });
+  return {
+    as: "link",
+    rel: "stylesheet",
+    url
+  };
+};
+
+// src/preferences/services/createGoogleFontResources.ts
+var buildGoogleFontsV2Url = ({
+  family,
+  weights,
+  styles = ["normal"],
+  widths,
+  display = "block",
+  text
+}) => {
+  if (text) {
+    return `https://fonts.googleapis.com/css2?family=${family.replace(/ /g, "+")}&text=${encodeURIComponent(text)}`;
+  }
+  const hasItalic = styles.includes("italic");
+  const hasWidth = !!widths;
+  const weightValues = weights.type === "static" ? weights.values.join(",") : `${weights.min}..${weights.max}`;
+  const widthValues = hasWidth && widths ? `${widths.min}..${widths.max}` : void 0;
+  const familyParam = family.replace(/ /g, "+");
+  let axesParam;
+  if (hasItalic && hasWidth) {
+    const variants = [
+      `0,${widthValues},${weightValues}`,
+      // normal
+      `1,${widthValues},${weightValues}`
+      // italic
+    ];
+    axesParam = `:ital,wdth,wght@${variants.join(";")}`;
+  } else if (hasItalic) {
+    const variants = [
+      `0,${weightValues}`,
+      // normal
+      `1,${weightValues}`
+      // italic
+    ];
+    axesParam = `:ital,wght@${variants.join(";")}`;
+  } else if (hasWidth) {
+    axesParam = `:wdth,wght@${widthValues},${weightValues}`;
+  } else {
+    axesParam = `:wght@${weightValues}`;
+  }
+  const displayParam = display ? `&display=${display}` : "";
+  return `https://fonts.googleapis.com/css2?family=${familyParam}${axesParam}${displayParam}`;
+};
+var createGoogleFontResources = (font, text) => {
+  if (font.source.type !== "custom" || font.source.provider !== "google") {
+    return null;
+  }
+  const { family, weights, display, styles, widths } = font.spec;
+  const url = buildGoogleFontsV2Url({
+    family,
+    weights,
+    display,
+    styles,
+    widths,
+    text
+  });
+  return {
+    as: "link",
+    rel: "stylesheet",
+    url
+  };
+};
+
+// src/preferences/services/createLocalFontResources.ts
+var getFontFormat = (path) => {
+  const ext = path.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "woff":
+      return "woff";
+    case "woff2":
+      return "woff2";
+    case "ttf":
+      return "truetype";
+    case "otf":
+      return "opentype";
+    case "eot":
+      return "embedded-opentype";
+    case "svg":
+      return "svg";
+    default:
+      return "woff2";
+  }
+};
+var createLocalFontResources = (font) => {
+  if (font.source.type !== "custom" || font.source.provider !== "local") {
+    return null;
+  }
+  const { family, weights, display, widths } = font.spec;
+  const fontFiles = font.source.files || [];
+  const cssContent = fontFiles.map((fontFile) => {
+    const format = getFontFormat(fontFile.path);
+    const fontUrl = new URL(fontFile.path, window.location.origin).toString();
+    const isVariable = font.source.type === "custom" && font.source.provider === "local" && "variant" in font.source && font.source.variant === "variable";
+    const rules = [
+      `@font-face {`,
+      `  font-family: "${family}";`,
+      `  src: url("${fontUrl}") format("${format}");`
+    ];
+    if (isVariable && weights.type === "variable") {
+      rules.push(`  font-weight: ${weights.min} ${weights.max};`);
+    } else if ("weight" in fontFile) {
+      rules.push(`  font-weight: ${fontFile.weight};`);
+    }
+    if ("style" in fontFile) {
+      rules.push(`  font-style: ${fontFile.style};`);
+    }
+    if (isVariable && widths) {
+      rules.push(`  font-stretch: ${widths.min}% ${widths.max}%;`);
+    }
+    if (display) {
+      rules.push(`  font-display: ${display};`);
+    } else {
+      rules.push(`  font-display: block;`);
+    }
+    return rules.join("\n") + "\n}";
+  }).filter(Boolean).join("\n\n");
+  const blob = new Blob([cssContent], { type: "text/css" });
+  return {
+    as: "link",
+    rel: "stylesheet",
+    blob
+  };
+};
+
+// src/preferences/services/fonts.ts
+var createFontService = (fontFamilyPref) => {
+  const allSupportedLanguages = [];
+  const parsedFonts = /* @__PURE__ */ new Map();
+  const bunnyFonts = /* @__PURE__ */ new Map();
+  const googleFonts = /* @__PURE__ */ new Map();
+  const localFonts = /* @__PURE__ */ new Map();
+  const resolveFontLanguage = (bcp47Tag, direction = "ltr") => {
+    if (!bcp47Tag) return "default";
+    if (allSupportedLanguages.includes(bcp47Tag)) {
+      return bcp47Tag;
+    }
+    const parts = bcp47Tag.split(/[-_]/);
+    const language = parts[0].toLowerCase();
+    const scriptOrRegion = parts[1]?.toLowerCase();
+    if (scriptOrRegion) {
+      const langScriptOrRegion = `${language}-${scriptOrRegion}`;
+      if (allSupportedLanguages.includes(langScriptOrRegion)) {
+        return langScriptOrRegion;
+      }
+    }
+    if (language === "ja" && !scriptOrRegion) {
+      if (direction === "rtl" && allSupportedLanguages.includes("ja-v")) {
+        return "ja-v";
+      }
+      if (allSupportedLanguages.includes("ja")) {
+        return "ja";
+      }
+    }
+    const shouldFilter = language === "mn" && (scriptOrRegion === "mong" || scriptOrRegion === "cyrl") || language === "zh" && (scriptOrRegion === "hant" || scriptOrRegion === "tw" || scriptOrRegion === "hk");
+    if (!shouldFilter && allSupportedLanguages.includes(language)) {
+      return language;
+    }
+    return "default";
+  };
+  Object.entries(fontFamilyPref).forEach(([collectionName, collectionData]) => {
+    const fontCollection = "fonts" in collectionData ? collectionData.fonts : collectionData;
+    if ("supportedLanguages" in collectionData) {
+      const reducedLanguages = collectionData.supportedLanguages.map((lang) => {
+        const parts = lang.split(/[-_]/);
+        const language = parts[0].toLowerCase();
+        const scriptOrRegion = parts[1]?.toLowerCase();
+        return scriptOrRegion ? `${language}-${scriptOrRegion}` : language;
+      });
+      allSupportedLanguages.push(...reducedLanguages);
+    }
+    bunnyFonts.set(collectionName, []);
+    googleFonts.set(collectionName, []);
+    localFonts.set(collectionName, []);
+    const collectionBunnyFonts = bunnyFonts.get(collectionName);
+    const collectionGoogleFonts = googleFonts.get(collectionName);
+    const collectionLocalFonts = localFonts.get(collectionName);
+    Object.entries(fontCollection).forEach(([id, font]) => {
+      const fontFamily = font.spec.family;
+      let fontStack = fontFamily;
+      if (font.source.type === "custom") {
+        switch (font.source.provider) {
+          case "bunny":
+            collectionBunnyFonts.push(font);
+            break;
+          case "google":
+            collectionGoogleFonts.push(font);
+            break;
+          case "local":
+            collectionLocalFonts.push(font);
+            break;
+        }
+      }
+      const wrapIfNeeded = (name) => {
+        const trimmed = name.trim();
+        if (!trimmed) return "";
+        if (trimmed.includes(" ") && !/^['"].*['"]$/.test(trimmed)) {
+          return `"${trimmed}"`;
+        }
+        return trimmed;
+      };
+      const wrappedFontFamily = wrapIfNeeded(fontFamily);
+      if (font.spec.fallbacks?.length) {
+        const uniqueFallbacks = [...new Set(
+          font.spec.fallbacks.filter((fallback) => fallback.toLowerCase() !== fontFamily.toLowerCase()).map(wrapIfNeeded)
+        )];
+        if (uniqueFallbacks.length > 0) {
+          fontStack = [wrappedFontFamily, ...uniqueFallbacks].join(", ");
+        }
+      }
+      parsedFonts.set(id, {
+        fontStack: fontStack || wrappedFontFamily,
+        fontFamily: wrappedFontFamily,
+        weights: font.spec.weights || null,
+        widths: font.spec.widths || null
+      });
+    });
+  });
+  const defaultBunnyFonts = bunnyFonts.get("default") || [];
+  const defaultGoogleFonts = googleFonts.get("default") || [];
+  const defaultLocalFonts = localFonts.get("default") || [];
+  const processFonts = (bunnyFontsList, googleFontsList, localFontsList, optimize = false) => {
+    const result = {
+      allowedDomains: [],
+      prepend: [],
+      append: []
+    };
+    const bunnyResources = bunnyFontsList.map((font) => createBunnyFontResources(font)).filter((resource) => resource !== null);
+    if (bunnyResources.length > 0) {
+      result.allowedDomains.push(
+        "https://fonts.bunny.net"
+      );
+      result.prepend.push(
+        {
+          as: "link",
+          rel: "preconnect",
+          url: "https://fonts.bunny.net"
+        }
+      );
+      result.append.push(...bunnyResources);
+    }
+    const googleResources = googleFontsList.map((font) => createGoogleFontResources(font, optimize ? font.name : void 0)).filter((resource) => resource !== null);
+    if (googleResources.length > 0) {
+      result.allowedDomains.push(
+        "https://fonts.googleapis.com",
+        "https://fonts.gstatic.com"
+      );
+      result.prepend.push(
+        {
+          as: "link",
+          rel: "preconnect",
+          url: "https://fonts.googleapis.com"
+        },
+        {
+          as: "link",
+          rel: "preconnect",
+          url: "https://fonts.gstatic.com",
+          attributes: { crossOrigin: "anonymous" }
+        }
+      );
+      result.append.push(...googleResources);
+    }
+    const localResources = localFontsList.map(createLocalFontResources).filter((resource) => resource !== null);
+    if (localResources.length > 0) {
+      result.allowedDomains.push(window.location.origin);
+      result.append.push(...localResources);
+    }
+    return result.append.length > 0 ? result : null;
+  };
+  const getInjectables = (options, optimize = false) => {
+    if (options && "key" in options) {
+      const { key } = options;
+      if (!key || !(key in fontFamilyPref)) {
+        return null;
+      }
+      return processFonts(bunnyFonts.get(key) || [], googleFonts.get(key) || [], localFonts.get(key) || [], optimize);
+    }
+    if (options && "language" in options) {
+      const { language: publicationLanguage } = options;
+      for (const [collectionName, collectionData] of Object.entries(fontFamilyPref)) {
+        if (collectionName === "default") continue;
+        const supportedLangs = "supportedLanguages" in collectionData ? collectionData.supportedLanguages : null;
+        if (supportedLangs && Array.isArray(supportedLangs) && publicationLanguage && supportedLangs.includes(publicationLanguage)) {
+          return processFonts(bunnyFonts.get(collectionName) || [], googleFonts.get(collectionName) || [], localFonts.get(collectionName) || [], optimize);
+        }
+      }
+    }
+    return processFonts(defaultBunnyFonts, defaultGoogleFonts, defaultLocalFonts, optimize);
+  };
+  const getFontMetadata = (fontId) => {
+    const parsed = parsedFonts.get(fontId);
+    return parsed || { fontStack: null, fontFamily: null, weights: null, widths: null };
+  };
+  const getFontCollection = (options) => {
+    if (options && "key" in options) {
+      const { key } = options;
+      if (!key || !(key in fontFamilyPref)) {
+        return fontFamilyPref.default;
+      }
+      if (key === "default") {
+        return fontFamilyPref.default;
+      }
+      const prefRecord = fontFamilyPref;
+      const collection = prefRecord[key];
+      if (collection && "fonts" in collection) {
+        return collection.fonts;
+      }
+      return fontFamilyPref.default;
+    }
+    if (options && "language" in options) {
+      const { language: publicationLanguage } = options;
+      for (const [collectionName, collectionData] of Object.entries(fontFamilyPref)) {
+        if (collectionName === "default") continue;
+        const collection = "fonts" in collectionData ? collectionData : { fonts: collectionData };
+        const supportedLangs = "supportedLanguages" in collection ? collection.supportedLanguages : null;
+        if (supportedLangs?.includes(publicationLanguage)) {
+          return collection.fonts;
+        }
+      }
+      return fontFamilyPref.default;
+    }
+    return fontFamilyPref.default;
+  };
+  return {
+    getInjectables,
+    getFontMetadata,
+    getFontCollection,
+    resolveFontLanguage
+  };
+};
+
+// src/preferences/hooks/usePreferences.ts
+function usePreferences() {
+  const context = useContext(ThPreferencesContext);
+  if (!context) {
+    throw new Error("usePreferences must be used within a ThPreferencesProvider");
+  }
+  const fontService = createFontService(context.preferences.settings.keys.fontFamily);
+  return {
+    preferences: context.preferences,
+    updatePreferences: context.updatePreferences,
+    getFontInjectables: (options, optimize) => {
+      return fontService.getInjectables(options, optimize);
+    },
+    getFontsList: (options) => {
+      return fontService.getFontCollection(options);
+    },
+    getFontMetadata: (fontId) => {
+      return fontService.getFontMetadata(fontId);
+    },
+    resolveFontLanguage: (bcp47Tag, direction) => {
+      return fontService.resolveFontLanguage(bcp47Tag, direction);
+    }
+  };
+}
+
+// src/preferences/hooks/usePreferenceKeys.ts
+var usePreferenceKeys = () => {
+  const { preferences } = usePreferences();
+  const reflowActionKeys = preferences.actions.reflowOrder;
+  const fxlActionKeys = preferences.actions.fxlOrder;
+  const webPubActionKeys = preferences.actions.webPubOrder;
+  const reflowThemeKeys = preferences.theming.themes.reflowOrder;
+  const fxlThemeKeys = preferences.theming.themes.fxlOrder;
+  const reflowSettingsKeys = preferences.settings.reflowOrder;
+  const fxlSettingsKeys = preferences.settings.fxlOrder;
+  const webPubSettingsKeys = preferences.settings.webPubOrder;
+  const mainTextSettingsKeys = preferences.settings.text?.main ?? defaultTextSettingsMain;
+  const subPanelTextSettingsKeys = preferences.settings.text?.subPanel ?? defaultTextSettingsSubpanel;
+  const mainSpacingSettingsKeys = preferences.settings.spacing?.main ?? defaultSpacingSettingsMain;
+  const subPanelSpacingSettingsKeys = preferences.settings.spacing?.subPanel ?? defaultSpacingSettingsSubpanel;
+  const reflowSpacingPresetKeys = preferences.settings.spacing?.presets?.reflowOrder ?? defaultSpacingPresetsOrder;
+  const fxlSpacingPresetKeys = [];
+  const webPubSpacingPresetKeys = preferences.settings.spacing?.presets?.webPubOrder ?? defaultSpacingPresetsOrder;
+  return {
+    reflowActionKeys,
+    fxlActionKeys,
+    webPubActionKeys,
+    reflowThemeKeys,
+    fxlThemeKeys,
+    reflowSettingsKeys,
+    fxlSettingsKeys,
+    webPubSettingsKeys,
+    mainTextSettingsKeys,
+    subPanelTextSettingsKeys,
+    mainSpacingSettingsKeys,
+    subPanelSpacingSettingsKeys,
+    reflowSpacingPresetKeys,
+    fxlSpacingPresetKeys,
+    webPubSpacingPresetKeys
+  };
+};
+
+// src/core/Helpers/prefixString.ts
+var PREFIXES = {
+  short: "th",
+  full: "thorium_web"
+};
+var prefixString = (str, variant = "short") => {
+  return `${PREFIXES[variant]}-${str}`;
+};
+
+// node_modules/.pnpm/colorthief@3.3.1_sharp@0.34.5/node_modules/colorthief/dist/index.js
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+function srgbToLinear(c) {
+  const s = c / 255;
+  return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+}
+function linearToSrgb(c) {
+  const s = c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+  return Math.round(Math.max(0, Math.min(255, s * 255)));
+}
+function rgbToOklch(r, g, b) {
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+  const l_ = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  const m_ = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  const s_ = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+  const l3 = Math.cbrt(l_);
+  const m3 = Math.cbrt(m_);
+  const s3 = Math.cbrt(s_);
+  const L = 0.2104542553 * l3 + 0.793617785 * m3 - 0.0040720468 * s3;
+  const a = 1.9779984951 * l3 - 2.428592205 * m3 + 0.4505937099 * s3;
+  const bLab = 0.0259040371 * l3 + 0.7827717662 * m3 - 0.808675766 * s3;
+  const C = Math.sqrt(a * a + bLab * bLab);
+  let H = Math.atan2(bLab, a) * (180 / Math.PI);
+  if (H < 0) H += 360;
+  return { l: L, c: C, h: H };
+}
+function oklchToRgb(l, c, h) {
+  const hRad = h * (Math.PI / 180);
+  const a = c * Math.cos(hRad);
+  const bLab = c * Math.sin(hRad);
+  const l3 = l + 0.3963377774 * a + 0.2158037573 * bLab;
+  const m3 = l - 0.1055613458 * a - 0.0638541728 * bLab;
+  const s3 = l - 0.0894841775 * a - 1.291485548 * bLab;
+  const l_ = l3 * l3 * l3;
+  const m_ = m3 * m3 * m3;
+  const s_ = s3 * s3 * s3;
+  const lr = 4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_;
+  const lg = -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_;
+  const lb = -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_;
+  return [linearToSrgb(lr), linearToSrgb(lg), linearToSrgb(lb)];
+}
+function pixelsRgbToOklchScaled(pixels) {
+  const out = new Array(pixels.length);
+  for (let i = 0; i < pixels.length; i++) {
+    const [r, g, b] = pixels[i];
+    const { l, c, h } = rgbToOklch(r, g, b);
+    out[i] = [
+      Math.round(l * 255),
+      Math.round(c / 0.4 * 255),
+      Math.round(h / 360 * 255)
+    ];
+  }
+  return out;
+}
+function paletteOklchScaledToRgb(colors) {
+  return colors.map(({ color: [ls, cs, hs], population }) => {
+    const l = ls / 255;
+    const c = cs / 255 * 0.4;
+    const h = hs / 255 * 360;
+    return { color: oklchToRgb(l, c, h), population };
+  });
+}
+var init_color_space = __esm({
+  "src/color-space.ts"() {
+  }
+});
+function rgbToHsl(r, g, b) {
+  const r1 = r / 255;
+  const g1 = g / 255;
+  const b1 = b / 255;
+  const max = Math.max(r1, g1, b1);
+  const min = Math.min(r1, g1, b1);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === r1) {
+      h = ((g1 - b1) / d + (g1 < b1 ? 6 : 0)) / 6;
+    } else if (max === g1) {
+      h = ((b1 - r1) / d + 2) / 6;
+    } else {
+      h = ((r1 - g1) / d + 4) / 6;
+    }
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function relativeLuminance(r, g, b) {
+  const toLinear = (c) => {
+    const s = c / 255;
+    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+function contrastRatio(l1, l2) {
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function createColor(r, g, b, population, proportion = 0) {
+  return new ColorImpl(r, g, b, population, proportion);
+}
+var ColorImpl;
+var init_color = __esm({
+  "src/color.ts"() {
+    init_color_space();
+    ColorImpl = class {
+      constructor(r, g, b, population, proportion) {
+        this._r = r;
+        this._g = g;
+        this._b = b;
+        this.population = population;
+        this.proportion = proportion;
+      }
+      rgb() {
+        return { r: this._r, g: this._g, b: this._b };
+      }
+      hex() {
+        const toHex = (n) => n.toString(16).padStart(2, "0");
+        return `#${toHex(this._r)}${toHex(this._g)}${toHex(this._b)}`;
+      }
+      hsl() {
+        if (!this._hsl) {
+          this._hsl = rgbToHsl(this._r, this._g, this._b);
+        }
+        return this._hsl;
+      }
+      oklch() {
+        if (!this._oklch) {
+          this._oklch = rgbToOklch(this._r, this._g, this._b);
+        }
+        return this._oklch;
+      }
+      css(format = "rgb") {
+        switch (format) {
+          case "hsl": {
+            const { h, s, l } = this.hsl();
+            return `hsl(${h}, ${s}%, ${l}%)`;
+          }
+          case "oklch": {
+            const { l, c, h } = this.oklch();
+            return `oklch(${l.toFixed(3)} ${c.toFixed(3)} ${h.toFixed(1)})`;
+          }
+          case "rgb":
+          default:
+            return `rgb(${this._r}, ${this._g}, ${this._b})`;
+        }
+      }
+      array() {
+        return [this._r, this._g, this._b];
+      }
+      toString() {
+        return this.hex();
+      }
+      get textColor() {
+        return this.isDark ? "#ffffff" : "#000000";
+      }
+      get luminance() {
+        if (this._luminance === void 0) {
+          this._luminance = relativeLuminance(this._r, this._g, this._b);
+        }
+        return this._luminance;
+      }
+      get isDark() {
+        return this.luminance <= 0.179;
+      }
+      get isLight() {
+        return !this.isDark;
+      }
+      get contrast() {
+        if (!this._contrast) {
+          const lum = this.luminance;
+          const white = contrastRatio(lum, 1);
+          const black = contrastRatio(lum, 0);
+          const foreground = this.isDark ? createColor(255, 255, 255, 0, 0) : createColor(0, 0, 0, 0, 0);
+          this._contrast = {
+            white: Math.round(white * 100) / 100,
+            black: Math.round(black * 100) / 100,
+            foreground
+          };
+        }
+        return this._contrast;
+      }
+    };
+  }
+});
+var pipeline_exports = {};
+__export(pipeline_exports, {
+  computeFallbackColor: () => computeFallbackColor,
+  createPixelArray: () => createPixelArray,
+  extractPalette: () => extractPalette,
+  validateOptions: () => validateOptions
+});
+function validateOptions(options) {
+  let { colorCount, quality } = options;
+  if (typeof colorCount === "undefined" || !Number.isInteger(colorCount)) {
+    colorCount = 10;
+  } else if (colorCount === 1) {
+    throw new Error(
+      "colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()"
+    );
+  } else {
+    colorCount = Math.max(colorCount, 2);
+    colorCount = Math.min(colorCount, 20);
+  }
+  if (typeof quality === "undefined" || !Number.isInteger(quality) || quality < 1) {
+    quality = 10;
+  }
+  const ignoreWhite = options.ignoreWhite !== void 0 ? !!options.ignoreWhite : true;
+  const whiteThreshold = typeof options.whiteThreshold === "number" ? options.whiteThreshold : 250;
+  const alphaThreshold = typeof options.alphaThreshold === "number" ? options.alphaThreshold : 125;
+  const minSaturation = typeof options.minSaturation === "number" ? Math.max(0, Math.min(1, options.minSaturation)) : 0;
+  const colorSpace = options.colorSpace ?? "oklch";
+  return {
+    colorCount,
+    quality,
+    ignoreWhite,
+    whiteThreshold,
+    alphaThreshold,
+    minSaturation,
+    colorSpace
+  };
+}
+function createPixelArray(data, pixelCount, quality, filterOptions) {
+  const {
+    ignoreWhite = true,
+    whiteThreshold = 250,
+    alphaThreshold = 125,
+    minSaturation = 0
+  } = filterOptions;
+  const pixelArray = [];
+  for (let i = 0; i < pixelCount; i += quality) {
+    const offset = i * 4;
+    const r = data[offset];
+    const g = data[offset + 1];
+    const b = data[offset + 2];
+    const a = data[offset + 3];
+    if (a !== void 0 && a < alphaThreshold) continue;
+    if (ignoreWhite && r > whiteThreshold && g > whiteThreshold && b > whiteThreshold)
+      continue;
+    if (minSaturation > 0) {
+      const max = Math.max(r, g, b);
+      if (max === 0 || (max - Math.min(r, g, b)) / max < minSaturation)
+        continue;
+    }
+    pixelArray.push([r, g, b]);
+  }
+  return pixelArray;
+}
+function computeFallbackColor(data, pixelCount, quality) {
+  let rTotal = 0;
+  let gTotal = 0;
+  let bTotal = 0;
+  let count = 0;
+  for (let i = 0; i < pixelCount; i += quality) {
+    const offset = i * 4;
+    rTotal += data[offset];
+    gTotal += data[offset + 1];
+    bTotal += data[offset + 2];
+    count++;
+  }
+  if (count === 0) return null;
+  return [
+    Math.round(rTotal / count),
+    Math.round(gTotal / count),
+    Math.round(bTotal / count)
+  ];
+}
+function extractPalette(data, width, height, opts, quantizer) {
+  const pixelCount = width * height;
+  const filterOptions = {
+    ignoreWhite: opts.ignoreWhite,
+    whiteThreshold: opts.whiteThreshold,
+    alphaThreshold: opts.alphaThreshold,
+    minSaturation: opts.minSaturation
+  };
+  let pixelArray = createPixelArray(data, pixelCount, opts.quality, filterOptions);
+  if (pixelArray.length === 0) {
+    pixelArray = createPixelArray(data, pixelCount, opts.quality, {
+      ...filterOptions,
+      ignoreWhite: false
+    });
+  }
+  if (pixelArray.length === 0) {
+    pixelArray = createPixelArray(data, pixelCount, opts.quality, {
+      ...filterOptions,
+      ignoreWhite: false,
+      alphaThreshold: 0
+    });
+  }
+  let quantized;
+  if (opts.colorSpace === "oklch") {
+    const scaled = pixelsRgbToOklchScaled(pixelArray);
+    quantized = paletteOklchScaledToRgb(
+      quantizer.quantize(scaled, opts.colorCount)
+    );
+  } else {
+    quantized = quantizer.quantize(pixelArray, opts.colorCount);
+  }
+  if (quantized.length > 0) {
+    const totalPopulation = quantized.reduce((sum, q) => sum + q.population, 0);
+    return quantized.map(
+      ({ color: [r, g, b], population }) => createColor(r, g, b, population, totalPopulation > 0 ? population / totalPopulation : 0)
+    );
+  }
+  const fallback = computeFallbackColor(data, pixelCount, opts.quality);
+  return fallback ? [createColor(fallback[0], fallback[1], fallback[2], 1, 1)] : null;
+}
+var init_pipeline = __esm({
+  "src/pipeline.ts"() {
+    init_color();
+    init_color_space();
+  }
+});
+var browser_exports = {};
+__export(browser_exports, {
+  BrowserPixelLoader: () => BrowserPixelLoader
+});
+var BrowserPixelLoader;
+var init_browser = __esm({
+  "src/loaders/browser.ts"() {
+    BrowserPixelLoader = class {
+      async load(source) {
+        if (typeof HTMLImageElement !== "undefined" && source instanceof HTMLImageElement) {
+          return this.loadFromImage(source);
+        }
+        if (typeof HTMLCanvasElement !== "undefined" && source instanceof HTMLCanvasElement) {
+          return this.loadFromCanvas(source);
+        }
+        if (typeof ImageData !== "undefined" && source instanceof ImageData) {
+          return {
+            data: source.data,
+            width: source.width,
+            height: source.height
+          };
+        }
+        if (typeof HTMLVideoElement !== "undefined" && source instanceof HTMLVideoElement) {
+          return this.loadFromVideo(source);
+        }
+        if (typeof ImageBitmap !== "undefined" && source instanceof ImageBitmap) {
+          return this.loadFromImageBitmap(source);
+        }
+        if (typeof OffscreenCanvas !== "undefined" && source instanceof OffscreenCanvas) {
+          return this.loadFromOffscreenCanvas(source);
+        }
+        throw new Error(
+          "Unsupported source type. Expected HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageData, ImageBitmap, or OffscreenCanvas."
+        );
+      }
+      loadFromImage(img) {
+        if (!img.complete) {
+          throw new Error(
+            'Image has not finished loading. Wait for the "load" event before calling getColor/getPalette.'
+          );
+        }
+        if (!img.naturalWidth) {
+          throw new Error(
+            "Image has no dimensions. It may not have loaded successfully."
+          );
+        }
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const width = canvas.width = img.naturalWidth;
+        const height = canvas.height = img.naturalHeight;
+        ctx.drawImage(img, 0, 0, width, height);
+        try {
+          const imageData = ctx.getImageData(0, 0, width, height);
+          return { data: imageData.data, width, height };
+        } catch (e) {
+          if (e instanceof DOMException && e.name === "SecurityError") {
+            const err = new Error(
+              'Image is tainted by cross-origin data. Add crossorigin="anonymous" to the <img> tag and ensure the server sends appropriate CORS headers.'
+            );
+            err.cause = e;
+            throw err;
+          }
+          throw e;
+        }
+      }
+      loadFromCanvas(canvas) {
+        const ctx = canvas.getContext("2d");
+        const { width, height } = canvas;
+        const imageData = ctx.getImageData(0, 0, width, height);
+        return { data: imageData.data, width, height };
+      }
+      loadFromVideo(video) {
+        if (video.readyState < 2) {
+          throw new Error(
+            'Video is not ready. Wait for the "loadeddata" or "canplay" event before calling getColor/getPalette.'
+          );
+        }
+        const width = video.videoWidth;
+        const height = video.videoHeight;
+        if (!width || !height) {
+          throw new Error(
+            "Video has no dimensions. It may not have loaded successfully."
+          );
+        }
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.width = width;
+        canvas.height = height;
+        ctx.drawImage(video, 0, 0, width, height);
+        const imageData = ctx.getImageData(0, 0, width, height);
+        return { data: imageData.data, width, height };
+      }
+      loadFromOffscreenCanvas(canvas) {
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          throw new Error(
+            "Could not get 2D context from OffscreenCanvas."
+          );
+        }
+        const { width, height } = canvas;
+        const imageData = ctx.getImageData(0, 0, width, height);
+        return { data: imageData.data, width, height };
+      }
+      loadFromImageBitmap(bitmap) {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        ctx.drawImage(bitmap, 0, 0);
+        const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+        return { data: imageData.data, width: bitmap.width, height: bitmap.height };
+      }
+    };
+  }
+});
+var node_exports = {};
+__export(node_exports, {
+  NodePixelLoader: () => NodePixelLoader,
+  createNodeLoader: () => createNodeLoader
+});
+function createNodeLoader(options) {
+  return new NodePixelLoader(options);
+}
+var NodePixelLoader;
+var WORKER_SOURCE;
+var manager_exports = {};
+__export(manager_exports, {
+  extractInWorker: () => extractInWorker,
+  isWorkerSupported: () => isWorkerSupported,
+  terminateWorker: () => terminateWorker
+});
+function isWorkerSupported() {
+  return typeof Worker !== "undefined";
+}
+function getOrCreateWorker() {
+  if (worker) return worker;
+  if (!isWorkerSupported()) {
+    throw new Error("Web Workers are not supported in this environment.");
+  }
+  blobUrl = URL.createObjectURL(
+    new Blob([WORKER_SOURCE], { type: "application/javascript" })
+  );
+  worker = new Worker(blobUrl);
+  worker.onmessage = (e) => {
+    const { id, palette, error } = e.data;
+    const entry = pending.get(id);
+    if (!entry) return;
+    pending.delete(id);
+    if (error) {
+      entry.reject(new Error(error));
+    } else {
+      const raw = palette;
+      const totalPopulation = raw.reduce((sum, q) => sum + q.population, 0);
+      const colors = raw.map(({ color: [r, g, b], population }) => createColor(r, g, b, population, totalPopulation > 0 ? population / totalPopulation : 0));
+      entry.resolve(colors);
+    }
+  };
+  worker.onerror = (e) => {
+    for (const [, entry] of pending) {
+      entry.reject(new Error(e.message));
+    }
+    pending.clear();
+  };
+  return worker;
+}
+function extractInWorker(pixels, maxColors, signal) {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(signal.reason ?? new DOMException("Aborted", "AbortError"));
+      return;
+    }
+    const id = nextId++;
+    pending.set(id, { resolve, reject });
+    const onAbort = () => {
+      pending.delete(id);
+      reject(signal.reason ?? new DOMException("Aborted", "AbortError"));
+    };
+    signal?.addEventListener("abort", onAbort, { once: true });
+    try {
+      const w = getOrCreateWorker();
+      w.postMessage({ id, pixels, maxColors });
+    } catch (err) {
+      pending.delete(id);
+      signal?.removeEventListener("abort", onAbort);
+      reject(err);
+    }
+  });
+}
+function terminateWorker() {
+  if (worker) {
+    worker.terminate();
+    worker = null;
+  }
+  if (blobUrl) {
+    URL.revokeObjectURL(blobUrl);
+    blobUrl = null;
+  }
+  for (const [, entry] of pending) {
+    entry.reject(new Error("Worker terminated"));
+  }
+  pending.clear();
+}
+var worker;
+var blobUrl;
+var nextId;
+var pending;
+init_pipeline();
+init_pipeline();
+init_color();
+createColor(255, 255, 255, 0);
+createColor(0, 0, 0, 0);
+var SIGBITS = 5;
+var RSHIFT = 8 - SIGBITS;
+var MAX_ITERATIONS = 1e3;
+var FRACT_BY_POPULATIONS = 0.75;
+var HISTO_SIZE = 1 << 3 * SIGBITS;
+function getColorIndex(r, g, b) {
+  return (r << 2 * SIGBITS) + (g << SIGBITS) + b;
+}
+var VBox = class _VBox {
+  constructor(r1, r2, g1, g2, b1, b2, histo) {
+    this.r1 = r1;
+    this.r2 = r2;
+    this.g1 = g1;
+    this.g2 = g2;
+    this.b1 = b1;
+    this.b2 = b2;
+    this.histo = histo;
+  }
+  volume(force = false) {
+    if (this._volume === void 0 || force) {
+      this._volume = (this.r2 - this.r1 + 1) * (this.g2 - this.g1 + 1) * (this.b2 - this.b1 + 1);
+    }
+    return this._volume;
+  }
+  count(force = false) {
+    if (this._count === void 0 || force) {
+      let npix = 0;
+      for (let i = this.r1; i <= this.r2; i++) {
+        for (let j = this.g1; j <= this.g2; j++) {
+          for (let k = this.b1; k <= this.b2; k++) {
+            npix += this.histo[getColorIndex(i, j, k)] || 0;
+          }
+        }
+      }
+      this._count = npix;
+    }
+    return this._count;
+  }
+  copy() {
+    return new _VBox(this.r1, this.r2, this.g1, this.g2, this.b1, this.b2, this.histo);
+  }
+  avg(force = false) {
+    if (this._avg === void 0 || force) {
+      const mult = 1 << RSHIFT;
+      if (this.r1 === this.r2 && this.g1 === this.g2 && this.b1 === this.b2) {
+        this._avg = [
+          this.r1 << RSHIFT,
+          this.g1 << RSHIFT,
+          this.b1 << RSHIFT
+        ];
+      } else {
+        let ntot = 0;
+        let rsum = 0;
+        let gsum = 0;
+        let bsum = 0;
+        for (let i = this.r1; i <= this.r2; i++) {
+          for (let j = this.g1; j <= this.g2; j++) {
+            for (let k = this.b1; k <= this.b2; k++) {
+              const hval = this.histo[getColorIndex(i, j, k)] || 0;
+              ntot += hval;
+              rsum += hval * (i + 0.5) * mult;
+              gsum += hval * (j + 0.5) * mult;
+              bsum += hval * (k + 0.5) * mult;
+            }
+          }
+        }
+        if (ntot) {
+          this._avg = [
+            ~~(rsum / ntot),
+            ~~(gsum / ntot),
+            ~~(bsum / ntot)
+          ];
+        } else {
+          this._avg = [
+            ~~(mult * (this.r1 + this.r2 + 1) / 2),
+            ~~(mult * (this.g1 + this.g2 + 1) / 2),
+            ~~(mult * (this.b1 + this.b2 + 1) / 2)
+          ];
+        }
+      }
+    }
+    return this._avg;
+  }
+};
+var PQueue = class {
+  constructor(comparator) {
+    this.comparator = comparator;
+    this.contents = [];
+    this.sorted = false;
+  }
+  sort() {
+    this.contents.sort(this.comparator);
+    this.sorted = true;
+  }
+  push(item) {
+    this.contents.push(item);
+    this.sorted = false;
+  }
+  peek(index) {
+    if (!this.sorted) this.sort();
+    return this.contents[index ?? this.contents.length - 1];
+  }
+  pop() {
+    if (!this.sorted) this.sort();
+    return this.contents.pop();
+  }
+  size() {
+    return this.contents.length;
+  }
+  map(fn) {
+    return this.contents.map(fn);
+  }
+};
+function getHisto(pixels) {
+  const histo = new Uint32Array(HISTO_SIZE);
+  for (const pixel of pixels) {
+    const rval = pixel[0] >> RSHIFT;
+    const gval = pixel[1] >> RSHIFT;
+    const bval = pixel[2] >> RSHIFT;
+    histo[getColorIndex(rval, gval, bval)]++;
+  }
+  return histo;
+}
+function vboxFromPixels(pixels, histo) {
+  let rmin = 1e6;
+  let rmax = 0;
+  let gmin = 1e6;
+  let gmax = 0;
+  let bmin = 1e6;
+  let bmax = 0;
+  for (const pixel of pixels) {
+    const rval = pixel[0] >> RSHIFT;
+    const gval = pixel[1] >> RSHIFT;
+    const bval = pixel[2] >> RSHIFT;
+    if (rval < rmin) rmin = rval;
+    else if (rval > rmax) rmax = rval;
+    if (gval < gmin) gmin = gval;
+    else if (gval > gmax) gmax = gval;
+    if (bval < bmin) bmin = bval;
+    else if (bval > bmax) bmax = bval;
+  }
+  return new VBox(rmin, rmax, gmin, gmax, bmin, bmax, histo);
+}
+function medianCutApply(histo, vbox) {
+  if (!vbox.count()) return void 0;
+  if (vbox.count() === 1) return [vbox.copy(), null];
+  const rw = vbox.r2 - vbox.r1 + 1;
+  const gw = vbox.g2 - vbox.g1 + 1;
+  const bw = vbox.b2 - vbox.b1 + 1;
+  const maxw = Math.max(rw, gw, bw);
+  let total = 0;
+  const partialsum = [];
+  const lookaheadsum = [];
+  if (maxw === rw) {
+    for (let i = vbox.r1; i <= vbox.r2; i++) {
+      let sum = 0;
+      for (let j = vbox.g1; j <= vbox.g2; j++) {
+        for (let k = vbox.b1; k <= vbox.b2; k++) {
+          sum += histo[getColorIndex(i, j, k)] || 0;
+        }
+      }
+      total += sum;
+      partialsum[i] = total;
+    }
+  } else if (maxw === gw) {
+    for (let i = vbox.g1; i <= vbox.g2; i++) {
+      let sum = 0;
+      for (let j = vbox.r1; j <= vbox.r2; j++) {
+        for (let k = vbox.b1; k <= vbox.b2; k++) {
+          sum += histo[getColorIndex(j, i, k)] || 0;
+        }
+      }
+      total += sum;
+      partialsum[i] = total;
+    }
+  } else {
+    for (let i = vbox.b1; i <= vbox.b2; i++) {
+      let sum = 0;
+      for (let j = vbox.r1; j <= vbox.r2; j++) {
+        for (let k = vbox.g1; k <= vbox.g2; k++) {
+          sum += histo[getColorIndex(j, k, i)] || 0;
+        }
+      }
+      total += sum;
+      partialsum[i] = total;
+    }
+  }
+  partialsum.forEach((d, i) => {
+    lookaheadsum[i] = total - d;
+  });
+  function doCut(color) {
+    const dim1 = color + "1";
+    const dim2 = color + "2";
+    for (let i = vbox[dim1]; i <= vbox[dim2]; i++) {
+      if (partialsum[i] > total / 2) {
+        const vbox1 = vbox.copy();
+        const vbox2 = vbox.copy();
+        const left = i - vbox[dim1];
+        const right = vbox[dim2] - i;
+        let d2;
+        if (left <= right) {
+          d2 = Math.min(vbox[dim2] - 1, ~~(i + right / 2));
+        } else {
+          d2 = Math.max(vbox[dim1], ~~(i - 1 - left / 2));
+        }
+        while (!partialsum[d2]) d2++;
+        let count2 = lookaheadsum[d2];
+        while (!count2 && partialsum[d2 - 1]) count2 = lookaheadsum[--d2];
+        vbox1[dim2] = d2;
+        vbox2[dim1] = vbox1[dim2] + 1;
+        return [vbox1, vbox2];
+      }
+    }
+    return void 0;
+  }
+  if (maxw === rw) return doCut("r");
+  if (maxw === gw) return doCut("g");
+  return doCut("b");
+}
+function iterate(pq, target, histo) {
+  let ncolors = pq.size();
+  let niters = 0;
+  while (niters < MAX_ITERATIONS) {
+    if (ncolors >= target) return;
+    niters++;
+    const vbox = pq.pop();
+    if (!vbox.count()) {
+      pq.push(vbox);
+      continue;
+    }
+    const result = medianCutApply(histo, vbox);
+    if (!result || !result[0]) return;
+    pq.push(result[0]);
+    if (result[1]) {
+      pq.push(result[1]);
+      ncolors++;
+    }
+  }
+}
+function quantize(pixels, maxColors) {
+  if (!pixels.length || maxColors < 2 || maxColors > 256) return [];
+  const seenColors = /* @__PURE__ */ new Set();
+  const uniqueColors = [];
+  for (const color of pixels) {
+    const key = color.join(",");
+    if (!seenColors.has(key)) {
+      seenColors.add(key);
+      uniqueColors.push(color);
+    }
+  }
+  if (uniqueColors.length <= maxColors) {
+    const countMap = /* @__PURE__ */ new Map();
+    for (const color of pixels) {
+      const key = color.join(",");
+      countMap.set(key, (countMap.get(key) || 0) + 1);
+    }
+    return uniqueColors.map((color) => ({
+      color,
+      population: countMap.get(color.join(","))
+    }));
+  }
+  const histo = getHisto(pixels);
+  const vbox = vboxFromPixels(pixels, histo);
+  const pq = new PQueue((a, b) => a.count() - b.count());
+  pq.push(vbox);
+  iterate(pq, FRACT_BY_POPULATIONS * maxColors, histo);
+  const pq2 = new PQueue((a, b) => a.count() * a.volume() - b.count() * b.volume());
+  while (pq.size()) {
+    pq2.push(pq.pop());
+  }
+  iterate(pq2, maxColors, histo);
+  const results = [];
+  while (pq2.size()) {
+    const box = pq2.pop();
+    results.push({
+      color: box.avg(),
+      population: box.count()
+    });
+  }
+  return results;
+}
+var MmcqQuantizer = class {
+  async init() {
+  }
+  quantize(pixels, maxColors) {
+    return quantize(pixels, maxColors);
+  }
+};
+init_browser();
+init_pipeline();
+new BrowserPixelLoader();
+var defaultQuantizer = new MmcqQuantizer();
+function getColorSync(source, options) {
+  const palette = getPaletteSync(source, { colorCount: 5, ...options });
+  return palette ? palette[0] : null;
+}
+function getPaletteSync(source, options) {
+  const opts = validateOptions(options ?? {});
+  const quantizer = options?.quantizer ?? defaultQuantizer;
+  const pixels = loadPixelsSync(source);
+  return extractPalette(
+    pixels.data,
+    pixels.width,
+    pixels.height,
+    opts,
+    quantizer
+  );
+}
+function loadPixelsSync(source) {
+  if (typeof HTMLImageElement !== "undefined" && source instanceof HTMLImageElement) {
+    return loadFromImage(source);
+  }
+  if (typeof HTMLCanvasElement !== "undefined" && source instanceof HTMLCanvasElement) {
+    return loadFromCanvas(source);
+  }
+  if (typeof ImageData !== "undefined" && source instanceof ImageData) {
+    return { data: source.data, width: source.width, height: source.height };
+  }
+  if (typeof HTMLVideoElement !== "undefined" && source instanceof HTMLVideoElement) {
+    return loadFromVideo(source);
+  }
+  if (typeof ImageBitmap !== "undefined" && source instanceof ImageBitmap) {
+    return loadFromImageBitmap(source);
+  }
+  if (typeof OffscreenCanvas !== "undefined" && source instanceof OffscreenCanvas) {
+    return loadFromOffscreenCanvas(source);
+  }
+  throw new Error(
+    "Unsupported source type. Expected HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageData, ImageBitmap, or OffscreenCanvas."
+  );
+}
+function loadFromImage(img) {
+  if (!img.complete) {
+    throw new Error(
+      'Image has not finished loading. Wait for the "load" event before calling getColorSync/getPaletteSync.'
+    );
+  }
+  if (!img.naturalWidth) {
+    throw new Error(
+      "Image has no dimensions. It may not have loaded successfully."
+    );
+  }
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  const width = canvas.width = img.naturalWidth;
+  const height = canvas.height = img.naturalHeight;
+  ctx.drawImage(img, 0, 0, width, height);
+  try {
+    const imageData = ctx.getImageData(0, 0, width, height);
+    return { data: imageData.data, width, height };
+  } catch (e) {
+    if (e instanceof DOMException && e.name === "SecurityError") {
+      const err = new Error(
+        'Image is tainted by cross-origin data. Add crossorigin="anonymous" to the <img> tag and ensure the server sends appropriate CORS headers.'
+      );
+      err.cause = e;
+      throw err;
+    }
+    throw e;
+  }
+}
+function loadFromCanvas(canvas) {
+  const ctx = canvas.getContext("2d");
+  const { width, height } = canvas;
+  const imageData = ctx.getImageData(0, 0, width, height);
+  return { data: imageData.data, width, height };
+}
+function loadFromVideo(video) {
+  if (video.readyState < 2) {
+    throw new Error(
+      'Video is not ready. Wait for the "loadeddata" or "canplay" event before calling getColorSync/getPaletteSync.'
+    );
+  }
+  const width = video.videoWidth;
+  const height = video.videoHeight;
+  if (!width || !height) {
+    throw new Error(
+      "Video has no dimensions. It may not have loaded successfully."
+    );
+  }
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.width = width;
+  canvas.height = height;
+  ctx.drawImage(video, 0, 0, width, height);
+  const imageData = ctx.getImageData(0, 0, width, height);
+  return { data: imageData.data, width, height };
+}
+function loadFromOffscreenCanvas(canvas) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error(
+      "Could not get 2D context from OffscreenCanvas."
+    );
+  }
+  const { width, height } = canvas;
+  const imageData = ctx.getImageData(0, 0, width, height);
+  return { data: imageData.data, width, height };
+}
+function loadFromImageBitmap(bitmap) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  canvas.width = bitmap.width;
+  canvas.height = bitmap.height;
+  ctx.drawImage(bitmap, 0, 0);
+  const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+  return { data: imageData.data, width: bitmap.width, height: bitmap.height };
+}
+init_color();
+
+// src/preferences/helpers/getDominantColor.ts
+var getDominantColor = (img) => {
+  return new Promise((resolve, reject) => {
+    if (!img.complete || img.naturalWidth === 0) {
+      reject(new Error("Image not loaded"));
+      return;
+    }
+    try {
+      const color = getColorSync(img);
+      if (color) {
+        const hex = color.hex();
+        if (!/^#[0-9a-fA-F]{6}$/.test(hex)) {
+          reject(new Error(`Invalid color extracted: ${hex}`));
+        } else {
+          resolve(hex);
+        }
+      } else {
+        reject(new Error("No color extracted"));
+      }
+    } catch (error) {
+      reject(new Error(`Color extraction failed: ${error.message}`));
+    }
+  });
+};
+
+// src/preferences/helpers/themeGeneration.ts
+var hexToHsl = (hex) => {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  const h = max === r ? ((g - b) / d + (g < b ? 6 : 0)) / 6 : max === g ? ((b - r) / d + 2) / 6 : ((r - g) / d + 4) / 6;
+  return [h, s, l];
+};
+var hslToHex = (h, s, l) => {
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => {
+    const k = (n + h * 12) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+};
+var luminance = (hex) => {
+  const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  const r = toLinear(parseInt(hex.slice(1, 3), 16) / 255);
+  const g = toLinear(parseInt(hex.slice(3, 5), 16) / 255);
+  const b = toLinear(parseInt(hex.slice(5, 7), 16) / 255);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var contrastRatio2 = (a, b) => {
+  const l1 = luminance(a), l2 = luminance(b);
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+};
+var isLightColor = (hexColor) => luminance(hexColor) > 0.179;
+var shadeColor = (hex, isLight) => {
+  const [h, s] = hexToHsl(hex);
+  return isLight ? hslToHex(h, Math.min(s, 0.25), 0.93) : hslToHex(h, Math.min(s, 0.3), 0.13);
+};
+var generateThemeFromColor = (color) => {
+  const [h, s] = hexToHsl(color);
+  const isLight = isLightColor(color);
+  const background = shadeColor(color, isLight);
+  const text = contrastRatio2(background, "#ffffff") >= contrastRatio2(background, "#000000") ? "#ffffff" : "#000000";
+  const subdue = isLight ? hslToHex(h, Math.min(s, 0.15), 0.55) : hslToHex(h, Math.min(s, 0.15), 0.55);
+  const hover = isLight ? hslToHex(h, Math.min(s, 0.2), 0.83) : hslToHex(h, Math.min(s, 0.2), 0.22);
+  const elevate = `0px 0px 2px ${isLight ? hslToHex(h, 0.1, 0.7) : hslToHex(h, 0.1, 0.08)}`;
+  const link = isLight ? hslToHex(h, 0.7, 0.35) : hslToHex(h, 0.8, 0.72);
+  const visited = isLight ? hslToHex(h, 0.5, 0.28) : hslToHex(h, 0.55, 0.6);
+  const select = hslToHex(h, 0.6, isLight ? 0.8 : 0.35);
+  const focus = hslToHex(h, 0.9, isLight ? 0.4 : 0.65);
+  return {
+    background,
+    text,
+    link,
+    visited,
+    subdue,
+    disable: subdue,
+    hover,
+    onHover: text,
+    select,
+    onSelect: "inherit",
+    focus,
+    elevate,
+    immerse: isLight ? "0.6" : "0.4"
+  };
+};
+var extractThemeFromImage = async (imageUrl) => {
+  const img = new Image();
+  img.crossOrigin = "anonymous";
+  await new Promise((resolve, reject) => {
+    img.onload = () => {
+      if (img.naturalWidth === 0) {
+        reject(new Error("Image loaded but has no content (blocked or corrupt)"));
+      } else {
+        resolve();
+      }
+    };
+    img.onerror = () => reject(new Error(`Failed to load image: ${imageUrl}`));
+    img.src = imageUrl;
+  });
+  const dominantColor = await getDominantColor(img);
+  return generateThemeFromColor(dominantColor);
+};
+
+// src/helpers/proxyUrl.ts
+var proxyUrl = (url) => {
+  if (!url) return void 0;
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      return `/api/proxy?url=${encodeURIComponent(url)}`;
+    }
+  } catch {
+  }
+  return url;
+};
+
+// src/preferences/hooks/useTheming.ts
+var useTheming = ({
+  theme,
+  systemKeys,
+  themeKeys,
+  breakpointsMap,
+  initProps,
+  coverUrl,
+  autoThemeSource,
+  onBreakpointChange,
+  onColorSchemeChange,
+  onContrastChange,
+  onForcedColorsChange,
+  onMonochromeChange,
+  onReducedMotionChange,
+  onReducedTransparencyChange,
+  onCoverThemeGenerated
+}) => {
+  const [coverThemeTokens, setCoverThemeTokens] = useState(null);
+  const [coverThemeFailed, setCoverThemeFailed] = useState(false);
+  const breakpoints = useBreakpoints(breakpointsMap, onBreakpointChange);
+  const colorScheme = useColorScheme(onColorSchemeChange);
+  const colorSchemeRef = useRef(colorScheme);
+  const contrast = useContrast(onContrastChange);
+  const forcedColors = useForcedColors(onForcedColorsChange);
+  const monochrome = useMonochrome(onMonochromeChange);
+  const reducedMotion = useReducedMotion(onReducedMotionChange);
+  const reducedTransparency = useReducedTransparency(onReducedTransparencyChange);
+  useEffect(() => {
+    if (autoThemeSource === "cover" && coverUrl && !coverThemeTokens) {
+      const extractTheme = async () => {
+        try {
+          const themeTokens = await extractThemeFromImage(proxyUrl(coverUrl) ?? coverUrl);
+          setCoverThemeTokens(themeTokens);
+          onCoverThemeGenerated?.(themeTokens);
+        } catch (error) {
+          console.warn("Failed to extract cover theme:", error);
+          setCoverThemeFailed(true);
+        }
+      };
+      extractTheme();
+    }
+  }, [autoThemeSource, coverUrl, coverThemeTokens, onCoverThemeGenerated]);
+  const updateThemeColorMetaTag = useCallback((color) => {
+    if (typeof document === "undefined") return;
+    let metaTag = document.querySelector("meta[name='theme-color']");
+    if (!metaTag) {
+      metaTag = document.createElement("meta");
+      metaTag.setAttribute("name", "theme-color");
+      document.head.appendChild(metaTag);
+    }
+    metaTag.setAttribute("content", color);
+  }, []);
+  const initThemingCustomProps = useCallback(() => {
+    for (let p in initProps) {
+      document.documentElement.style.setProperty(p, initProps[p]);
+    }
+  }, [initProps]);
+  const inferThemeAuto = useCallback(() => {
+    if (autoThemeSource === "cover") {
+      if (coverThemeTokens) return "cover";
+      if (!coverThemeFailed) return void 0;
+    }
+    return colorSchemeRef.current === "dark" /* dark */ ? systemKeys?.dark : systemKeys?.light;
+  }, [systemKeys, autoThemeSource, coverThemeTokens, coverThemeFailed]);
+  const setThemeCustomProps = useCallback((t) => {
+    if (!t) {
+      return;
+    }
+    if (t === "auto") {
+      const autoTheme = inferThemeAuto();
+      if (!autoTheme) {
+        return;
+      }
+      t = autoTheme;
+    }
+    let themeTokens;
+    if (t === "cover" && coverThemeTokens) {
+      themeTokens = coverThemeTokens;
+    } else {
+      themeTokens = themeKeys[t];
+    }
+    if (!themeTokens) {
+      return;
+    }
+    const props = propsToCSSVars(themeTokens, { prefix: prefixString("theme") });
+    for (let p in props) {
+      document.documentElement.style.setProperty(p, props[p]);
+    }
+    updateThemeColorMetaTag(themeTokens.background);
+  }, [inferThemeAuto, updateThemeColorMetaTag, themeKeys, coverThemeTokens]);
+  useEffect(() => {
+    initThemingCustomProps();
+  }, [initThemingCustomProps]);
+  useEffect(() => {
+    colorSchemeRef.current = colorScheme;
+    setThemeCustomProps(theme);
+  }, [setThemeCustomProps, theme, colorScheme]);
+  useEffect(() => {
+    if (!coverThemeTokens || theme !== "auto") return;
+    const props = propsToCSSVars(coverThemeTokens, { prefix: prefixString("theme") });
+    for (let p in props) {
+      document.documentElement.style.setProperty(p, props[p]);
+    }
+    updateThemeColorMetaTag(coverThemeTokens.background);
+  }, [coverThemeTokens, theme, updateThemeColorMetaTag]);
+  const themeResolved = autoThemeSource !== "cover" || !coverUrl || !!coverThemeTokens || coverThemeFailed;
+  return {
+    inferThemeAuto,
+    theme,
+    breakpoints,
+    colorScheme,
+    contrast,
+    forcedColors,
+    monochrome,
+    reducedMotion,
+    reducedTransparency,
+    coverThemeTokens,
+    themeResolved
+  };
+};
+
+export { ThAudioMemoryPreferencesAdapter, ThAudioPreferencesProvider, ThMemoryPreferencesAdapter, ThPreferencesProvider, buildThemeObject, createDefinitionsFromBunnyFonts, prefixString, proxyUrl, useActionsPreferences, useAudioActionsPreferences, useAudioPreferences, usePreferenceKeys, usePreferences, useTheming };
+//# sourceMappingURL=chunk-WECWPYZB.mjs.map
+//# sourceMappingURL=chunk-WECWPYZB.mjs.map