@hraness/design-kit 0.31.1

package/dist/browser/index.js

@@ -0,0 +1,2345 @@
+// src/appearance.ts
+var designThemes = ["light", "dark", "system"];
+var defaultDesignTheme = "system";
+var designThemeStorageKey = "hraness-design-theme-v1";
+function isDesignTheme(value) {
+  return typeof value === "string" && designThemes.some((theme) => theme === value);
+}
+function normalizeDesignTheme(value) {
+  return isDesignTheme(value) ? value : defaultDesignTheme;
+}
+function designThemeLabel(theme, labels) {
+  return labels?.[theme] ?? `${theme.charAt(0).toUpperCase()}${theme.slice(1)}`;
+}
+function resolveDesignTheme(theme, systemPrefersDark) {
+  return theme === "system" ? systemPrefersDark ? "dark" : "light" : theme;
+}
+
+// src/browser/appearance-menu.ts
+import { ComputerIcon, Moon02Icon, Sun03Icon } from "@hugeicons/core-free-icons";
+
+// src/browser/theme-color-sync.ts
+var themeColorSyncActiveAttribute = "data-hraness-design-theme-color-sync-active";
+var themeColorSyncDisabledAttribute = "data-hraness-design-theme-color-sync-disabled";
+var managersByDocument = new WeakMap;
+var ownerSequence = 0;
+function exactThemeColorMetas(manager) {
+  return Array.from(manager.document.head.querySelectorAll("meta[name]")).filter((meta) => meta.name === manager.metaName);
+}
+function currentRegisteredColor(manager) {
+  let color;
+  for (const registeredColor of manager.registrations.values())
+    color = registeredColor;
+  if (color === undefined)
+    throw new Error("Theme color synchronization has no active owner.");
+  return color;
+}
+function restoreDisabledMeta(meta, original) {
+  if (original.media === null)
+    meta.removeAttribute("media");
+  else
+    meta.setAttribute("media", original.media);
+  meta.removeAttribute(themeColorSyncDisabledAttribute);
+}
+function createActiveMeta(manager) {
+  const meta = manager.document.createElement("meta");
+  meta.name = manager.metaName;
+  meta.content = currentRegisteredColor(manager);
+  meta.setAttribute(themeColorSyncActiveAttribute, manager.owner);
+  manager.activeMetas.add(meta);
+  const first = exactThemeColorMetas(manager).find((candidate) => candidate.parentElement === manager.document.head);
+  manager.document.head.insertBefore(meta, first ?? null);
+  return meta;
+}
+function activeMetaIsOwned(manager) {
+  const active = manager.activeMeta;
+  return active !== null && active.parentElement === manager.document.head && active.name === manager.metaName && !active.hasAttribute("media") && active.getAttribute(themeColorSyncActiveAttribute) === manager.owner;
+}
+function disableCompetingMeta(manager, meta) {
+  if (manager.disabledMetas.has(meta)) {
+    if (meta.getAttribute(themeColorSyncDisabledAttribute) !== manager.owner) {
+      meta.setAttribute(themeColorSyncDisabledAttribute, manager.owner);
+    }
+    if (meta.getAttribute("media") !== "not all")
+      meta.setAttribute("media", "not all");
+    return;
+  }
+  const ownedBy = meta.getAttribute(themeColorSyncDisabledAttribute);
+  if (ownedBy !== null || meta.getAttribute("media")?.trim().toLowerCase() === "not all") {
+    return;
+  }
+  manager.disabledMetas.set(meta, {
+    media: meta.getAttribute("media")
+  });
+  meta.setAttribute(themeColorSyncDisabledAttribute, manager.owner);
+  meta.setAttribute("media", "not all");
+}
+function reconcileThemeColorMetas(manager) {
+  if (manager.registrations.size === 0)
+    return;
+  for (const [meta, original] of manager.disabledMetas) {
+    if (!manager.document.head.contains(meta) || meta.name !== manager.metaName) {
+      restoreDisabledMeta(meta, original);
+      manager.disabledMetas.delete(meta);
+    }
+  }
+  if (!activeMetaIsOwned(manager))
+    manager.activeMeta = createActiveMeta(manager);
+  const active = manager.activeMeta;
+  if (active === null)
+    return;
+  const metas = exactThemeColorMetas(manager);
+  const first = metas.find((meta) => meta.parentElement === manager.document.head);
+  if (first !== undefined && first !== active)
+    manager.document.head.insertBefore(active, first);
+  const color = currentRegisteredColor(manager);
+  if (active.content !== color)
+    active.content = color;
+  for (const meta of metas) {
+    if (meta !== active)
+      disableCompetingMeta(manager, meta);
+  }
+  observeThemeColorMetas(manager);
+}
+function observeThemeColorMetas(manager) {
+  const head = manager.document.head;
+  if (manager.observer !== null && manager.observedHead === head)
+    return;
+  manager.observer?.disconnect();
+  manager.observedHead = null;
+  const Observer = manager.document.defaultView?.MutationObserver;
+  if (Observer === undefined)
+    return;
+  manager.observer ??= new Observer(() => reconcileThemeColorMetas(manager));
+  manager.observer.observe(head, {
+    attributeFilter: ["content", "media", "name", themeColorSyncActiveAttribute, themeColorSyncDisabledAttribute],
+    attributes: true,
+    childList: true,
+    subtree: true
+  });
+  manager.observedHead = head;
+}
+function destroyThemeColorManager(manager) {
+  manager.observer?.disconnect();
+  manager.observer = null;
+  manager.observedHead = null;
+  for (const meta of manager.activeMetas)
+    meta.remove();
+  for (const [meta, original] of manager.disabledMetas) {
+    restoreDisabledMeta(meta, original);
+  }
+  manager.activeMetas.clear();
+  manager.disabledMetas.clear();
+  manager.activeMeta = null;
+  const documentManagers = managersByDocument.get(manager.document);
+  if (documentManagers?.get(manager.metaName) === manager) {
+    documentManagers.delete(manager.metaName);
+  }
+}
+function acquireThemeColorMeta(document, metaName, registrationId, color) {
+  let documentManagers = managersByDocument.get(document);
+  if (documentManagers === undefined) {
+    documentManagers = new Map;
+    managersByDocument.set(document, documentManagers);
+  }
+  let manager = documentManagers.get(metaName);
+  if (manager === undefined) {
+    ownerSequence += 1;
+    manager = {
+      activeMeta: null,
+      activeMetas: new Set,
+      disabledMetas: new Map,
+      document,
+      metaName,
+      observer: null,
+      observedHead: null,
+      owner: String(ownerSequence),
+      registrations: new Map
+    };
+    documentManagers.set(metaName, manager);
+  }
+  manager.registrations.set(registrationId, color);
+  reconcileThemeColorMetas(manager);
+  let released = false;
+  return {
+    release: () => {
+      if (released)
+        return;
+      released = true;
+      manager.registrations.delete(registrationId);
+      if (manager.registrations.size === 0)
+        destroyThemeColorManager(manager);
+      else
+        reconcileThemeColorMetas(manager);
+    },
+    update: (nextColor) => {
+      if (released || !manager.registrations.has(registrationId))
+        return;
+      manager.registrations.set(registrationId, nextColor);
+      reconcileThemeColorMetas(manager);
+    }
+  };
+}
+
+// src/browser/appearance-menu.ts
+var menuSelector = "[data-hraness-appearance-menu]";
+var triggerSelector = ".hraness-design-theme-toggle__trigger";
+var popoverSelector = ".hraness-design-theme-toggle__popover";
+var menuElementSelector = ".hraness-design-theme-toggle__menu";
+var itemSelector = ".hraness-design-theme-toggle__item[data-theme-value]";
+var systemDarkQuery = "(prefers-color-scheme: dark)";
+var svgNamespace = "http://www.w3.org/2000/svg";
+var appearanceIcons = {
+  dark: Moon02Icon,
+  light: Sun03Icon,
+  system: ComputerIcon
+};
+var installationByDocument = new WeakMap;
+function requireNonBlank(value, name) {
+  if (value.trim().length === 0)
+    throw new Error(`${name} must not be blank.`);
+  return value;
+}
+function resolveDocument(candidate) {
+  const ownedDocument = candidate ?? (typeof globalThis.document === "undefined" ? undefined : globalThis.document);
+  if (ownedDocument === undefined) {
+    throw new Error("installAppearanceMenus requires a browser Document.");
+  }
+  if (ownedDocument.documentElement === null || ownedDocument.head === null) {
+    throw new Error("installAppearanceMenus requires a complete HTML document.");
+  }
+  return ownedDocument;
+}
+function defaultStorage(document) {
+  try {
+    return document.defaultView?.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+function storedPreference(storage, storageKey) {
+  if (storage === null)
+    return defaultDesignTheme;
+  try {
+    const value = storage.getItem(storageKey);
+    if (value === null || value === undefined)
+      return defaultDesignTheme;
+    if (isDesignTheme(value))
+      return value;
+    storage.setItem(storageKey, defaultDesignTheme);
+  } catch {}
+  return defaultDesignTheme;
+}
+function persistPreference(storage, storageKey, preference) {
+  if (storage === null)
+    return;
+  try {
+    storage.setItem(storageKey, preference);
+  } catch {}
+}
+function isElement(value) {
+  return value !== null && typeof value === "object" && "nodeType" in value && value.nodeType === 1;
+}
+function attributeName(name) {
+  return name.replace(/[A-Z]/gu, (letter) => `-${letter.toLowerCase()}`);
+}
+function appearanceIcon(document, theme) {
+  const svg = document.createElementNS(svgNamespace, "svg");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("class", "hraness-icon");
+  svg.setAttribute("color", "currentColor");
+  svg.setAttribute("data-slot", "icon");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("height", "18");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.5");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", "18");
+  for (const [tag, attributes] of appearanceIcons[theme]) {
+    const child = document.createElementNS(svgNamespace, tag);
+    for (const [name, value] of Object.entries(attributes)) {
+      if (name !== "key")
+        child.setAttribute(attributeName(name), String(value));
+    }
+    child.setAttribute("stroke", "currentColor");
+    child.setAttribute("stroke-width", "1.5");
+    svg.append(child);
+  }
+  return svg;
+}
+function renderIconHost(document, host, theme) {
+  host.classList.add("hraness-appearance-icon");
+  host.setAttribute("aria-hidden", "true");
+  host.setAttribute("data-appearance-icon", theme);
+  host.setAttribute("data-slot", "appearance-icon");
+  host.replaceChildren(appearanceIcon(document, theme));
+}
+function themeValue(element) {
+  const value = element.getAttribute("data-theme-value");
+  return isDesignTheme(value) ? value : null;
+}
+function requireMenuElements(root) {
+  const triggers = root.querySelectorAll(triggerSelector);
+  const popovers = root.querySelectorAll(popoverSelector);
+  const menus = root.querySelectorAll(menuElementSelector);
+  const trigger = triggers[0];
+  const popover = popovers[0];
+  const menu = menus[0];
+  if (triggers.length !== 1 || popovers.length !== 1 || menus.length !== 1 || trigger?.tagName !== "BUTTON" || popover === undefined || menu === undefined) {
+    throw new Error("Appearance menu markup requires one button trigger, popover, and menu.");
+  }
+  if (menu.id.trim().length === 0 || trigger.getAttribute("aria-controls") !== menu.id || menu.getAttribute("role") !== "menu") {
+    throw new Error("Appearance menu trigger and menu ownership is invalid.");
+  }
+  const items = new Map;
+  for (const element of menu.querySelectorAll(itemSelector)) {
+    const theme = themeValue(element);
+    if (theme === null || items.has(theme) || element.getAttribute("role") !== "menuitemradio") {
+      throw new Error("Appearance menu items must be unique Light, Dark, and System radios.");
+    }
+    items.set(theme, element);
+  }
+  if (items.size !== designThemes.length || designThemes.some((theme) => !items.has(theme))) {
+    throw new Error("Appearance menu must contain Light, Dark, and System exactly once.");
+  }
+  return {
+    items,
+    menu,
+    popover,
+    root,
+    trigger,
+    typeahead: "",
+    typeaheadTimer: null
+  };
+}
+function menuItemFromEvent(elements, event) {
+  if (!isElement(event.target))
+    return null;
+  const item = event.target.closest(itemSelector);
+  return item !== null && elements.menu.contains(item) ? item : null;
+}
+function focusItem(elements, theme) {
+  elements.items.get(theme)?.focus();
+}
+function orderedItems(elements) {
+  return designThemes.flatMap((theme) => {
+    const item = elements.items.get(theme);
+    return item === undefined ? [] : [item];
+  });
+}
+function adjacentItem(elements, current, offset) {
+  const items = orderedItems(elements);
+  if (items.length === 0)
+    throw new Error("Appearance menu has no focusable items.");
+  const currentIndex = current === null ? -1 : items.indexOf(current);
+  const nextIndex = currentIndex < 0 ? offset === 1 ? 0 : items.length - 1 : (currentIndex + offset + items.length) % items.length;
+  const next = items[nextIndex];
+  if (next === undefined)
+    throw new Error("Appearance menu focus order is invalid.");
+  return next;
+}
+function storageEventValue(event, storageKey) {
+  const candidate = event;
+  return candidate.key === storageKey ? candidate.newValue : undefined;
+}
+function installAppearanceMenus(options) {
+  const document = resolveDocument(options.document);
+  const active = installationByDocument.get(document);
+  if (active !== undefined && !active.disposed) {
+    throw new Error("Appearance menus are already installed for this document.");
+  }
+  const darkThemeColor = requireNonBlank(options.darkThemeColor, "darkThemeColor");
+  const lightThemeColor = requireNonBlank(options.lightThemeColor, "lightThemeColor");
+  const metaName = requireNonBlank(options.metaName ?? "theme-color", "metaName");
+  const storageKey = requireNonBlank(options.storageKey ?? designThemeStorageKey, "storageKey");
+  const storage = options.storage === undefined ? defaultStorage(document) : options.storage;
+  const view = document.defaultView;
+  const systemMedia = typeof view?.matchMedia === "function" ? view.matchMedia(systemDarkQuery) : null;
+  let preference = storedPreference(storage, storageKey);
+  let disposed = false;
+  let mounted = false;
+  let openMenu = null;
+  let metaRegistration = null;
+  const menus = new Set;
+  const menuIds = new Set;
+  const cleanups = [];
+  const resolvedTheme = () => resolveDesignTheme(preference, systemMedia?.matches ?? false);
+  const currentThemeColor = () => resolvedTheme() === "dark" ? darkThemeColor : lightThemeColor;
+  const closeMenu = (elements, returnFocus) => {
+    elements.popover.hidden = true;
+    elements.root.removeAttribute("data-open");
+    elements.trigger.setAttribute("aria-expanded", "false");
+    if (openMenu === elements)
+      openMenu = null;
+    if (returnFocus)
+      elements.trigger.focus();
+  };
+  const syncMenu = (elements) => {
+    elements.root.setAttribute("data-theme-value", preference);
+    const currentLabel = designThemeLabel(preference);
+    const menuLabel = elements.menu.getAttribute("aria-label")?.trim() || "Appearance";
+    elements.trigger.setAttribute("aria-label", `${menuLabel}: ${currentLabel}`);
+    elements.trigger.setAttribute("title", `${menuLabel}: ${currentLabel}`);
+    const currentHost = elements.trigger.querySelector("[data-current-appearance-icon]");
+    if (currentHost === null) {
+      throw new Error("Appearance menu trigger is missing its current icon host.");
+    }
+    currentHost.setAttribute("data-current-appearance-icon", preference);
+    renderIconHost(document, currentHost, preference);
+    for (const theme of designThemes) {
+      const item = elements.items.get(theme);
+      if (item === undefined)
+        continue;
+      const selected = theme === preference;
+      item.setAttribute("aria-checked", String(selected));
+      item.setAttribute("tabindex", "-1");
+      item.toggleAttribute("data-selected", selected);
+      const iconHost = item.querySelector("[data-appearance-icon]");
+      if (iconHost === null) {
+        throw new Error(`Appearance menu ${theme} item is missing its icon host.`);
+      }
+      renderIconHost(document, iconHost, theme);
+    }
+  };
+  const syncAppearance = () => {
+    document.documentElement.setAttribute("data-theme", resolvedTheme());
+    metaRegistration?.update(currentThemeColor());
+    for (const menu of menus)
+      syncMenu(menu);
+  };
+  const setPreference = (nextPreference, persist) => {
+    preference = nextPreference;
+    if (persist)
+      persistPreference(storage, storageKey, preference);
+    syncAppearance();
+  };
+  const focusForOpen = (elements, target) => {
+    if (target === "selected")
+      focusItem(elements, preference);
+    else {
+      const items = orderedItems(elements);
+      const item = target === "first" ? items[0] : items.at(-1);
+      item?.focus();
+    }
+  };
+  const showMenu = (elements, focus) => {
+    if (openMenu !== null && openMenu !== elements)
+      closeMenu(openMenu, false);
+    openMenu = elements;
+    elements.popover.hidden = false;
+    elements.root.setAttribute("data-open", "true");
+    elements.trigger.setAttribute("aria-expanded", "true");
+    focusForOpen(elements, focus);
+  };
+  const selectItem = (elements, item) => {
+    const theme = themeValue(item);
+    if (theme === null)
+      return;
+    setPreference(theme, true);
+    closeMenu(elements, true);
+  };
+  const clearTypeahead = (elements) => {
+    elements.typeahead = "";
+    if (elements.typeaheadTimer !== null)
+      clearTimeout(elements.typeaheadTimer);
+    elements.typeaheadTimer = null;
+  };
+  const typeahead = (elements, key) => {
+    if (elements.typeaheadTimer !== null)
+      clearTimeout(elements.typeaheadTimer);
+    elements.typeahead += key.toLocaleLowerCase();
+    const find = (query) => orderedItems(elements).find((item) => (item.textContent ?? "").trim().toLocaleLowerCase().startsWith(query));
+    const match = find(elements.typeahead) ?? find(key.toLocaleLowerCase());
+    match?.focus();
+    elements.typeaheadTimer = setTimeout(() => clearTypeahead(elements), 500);
+  };
+  const mount = () => {
+    if (disposed || mounted)
+      return;
+    mounted = true;
+    for (const root of document.querySelectorAll(menuSelector)) {
+      const elements = requireMenuElements(root);
+      if (menuIds.has(elements.menu.id)) {
+        throw new Error("Appearance menu ids must be unique within the document.");
+      }
+      menuIds.add(elements.menu.id);
+      menus.add(elements);
+      syncMenu(elements);
+      root.setAttribute("data-display", "icons");
+      root.setAttribute("data-presentation", "menu");
+      root.setAttribute("data-ready", "true");
+      root.removeAttribute("aria-busy");
+      elements.trigger.disabled = false;
+      elements.trigger.setAttribute("aria-expanded", "false");
+      elements.trigger.setAttribute("aria-haspopup", "menu");
+      elements.popover.hidden = true;
+      const onTriggerClick = () => {
+        if (openMenu === elements)
+          closeMenu(elements, false);
+        else
+          showMenu(elements, "selected");
+      };
+      const onTriggerKeyDown = (event) => {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          showMenu(elements, event.key === "ArrowDown" ? "first" : "last");
+        } else if (event.key === "Escape" && openMenu === elements) {
+          event.preventDefault();
+          closeMenu(elements, true);
+        }
+      };
+      const onMenuClick = (event) => {
+        const item = menuItemFromEvent(elements, event);
+        if (item !== null)
+          selectItem(elements, item);
+      };
+      const onMenuKeyDown = (event) => {
+        const item = menuItemFromEvent(elements, event);
+        if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          closeMenu(elements, true);
+          return;
+        }
+        if (event.key === "Tab") {
+          closeMenu(elements, false);
+          return;
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          adjacentItem(elements, item, event.key === "ArrowDown" ? 1 : -1).focus();
+          return;
+        }
+        if (event.key === "Home" || event.key === "End") {
+          event.preventDefault();
+          const items = orderedItems(elements);
+          (event.key === "Home" ? items[0] : items.at(-1))?.focus();
+          return;
+        }
+        if ((event.key === "Enter" || event.key === " ") && item !== null) {
+          event.preventDefault();
+          selectItem(elements, item);
+          return;
+        }
+        if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+          typeahead(elements, event.key);
+        }
+      };
+      elements.trigger.addEventListener("click", onTriggerClick);
+      elements.trigger.addEventListener("keydown", onTriggerKeyDown);
+      elements.menu.addEventListener("click", onMenuClick);
+      elements.menu.addEventListener("keydown", onMenuKeyDown);
+      cleanups.push(() => {
+        clearTypeahead(elements);
+        elements.trigger.removeEventListener("click", onTriggerClick);
+        elements.trigger.removeEventListener("keydown", onTriggerKeyDown);
+        elements.menu.removeEventListener("click", onMenuClick);
+        elements.menu.removeEventListener("keydown", onMenuKeyDown);
+        closeMenu(elements, false);
+        elements.root.setAttribute("aria-busy", "true");
+        elements.root.setAttribute("data-ready", "false");
+        elements.trigger.disabled = true;
+      });
+    }
+  };
+  const state = {
+    disposed: false,
+    publicInstallation: {
+      dispose: () => {
+        if (disposed)
+          return;
+        disposed = true;
+        state.disposed = true;
+        for (const cleanup of cleanups.splice(0).reverse())
+          cleanup();
+        metaRegistration?.release();
+        metaRegistration = null;
+        menus.clear();
+        if (installationByDocument.get(document) === state) {
+          installationByDocument.delete(document);
+        }
+      },
+      preference: () => preference
+    }
+  };
+  const {
+    publicInstallation
+  } = state;
+  installationByDocument.set(document, state);
+  try {
+    metaRegistration = acquireThemeColorMeta(document, metaName, Symbol("hraness-static-appearance"), currentThemeColor());
+    document.documentElement.setAttribute("data-theme", resolvedTheme());
+    const onSystemChange = () => {
+      if (preference === "system")
+        syncAppearance();
+    };
+    systemMedia?.addEventListener("change", onSystemChange);
+    if (systemMedia !== null) {
+      cleanups.push(() => systemMedia.removeEventListener("change", onSystemChange));
+    }
+    const onStorage = (event) => {
+      const value = storageEventValue(event, storageKey);
+      if (value === undefined)
+        return;
+      if (isDesignTheme(value)) {
+        setPreference(value, false);
+        return;
+      }
+      setPreference(defaultDesignTheme, value !== null);
+    };
+    view?.addEventListener("storage", onStorage);
+    if (view !== null) {
+      cleanups.push(() => view.removeEventListener("storage", onStorage));
+    }
+    const closeForOutsideTarget = (target) => {
+      if (openMenu !== null && (!isElement(target) || !openMenu.root.contains(target))) {
+        closeMenu(openMenu, false);
+      }
+    };
+    const onDocumentPointerDown = (event) => {
+      closeForOutsideTarget(event.target);
+    };
+    const onDocumentFocusIn = (event) => {
+      closeForOutsideTarget(event.target);
+    };
+    document.addEventListener("pointerdown", onDocumentPointerDown, true);
+    document.addEventListener("focusin", onDocumentFocusIn);
+    cleanups.push(() => {
+      document.removeEventListener("pointerdown", onDocumentPointerDown, true);
+      document.removeEventListener("focusin", onDocumentFocusIn);
+    });
+    if (document.readyState === "loading") {
+      const mountAfterParse = () => {
+        try {
+          mount();
+        } catch (error) {
+          publicInstallation.dispose();
+          throw error;
+        }
+      };
+      document.addEventListener("DOMContentLoaded", mountAfterParse, {
+        once: true
+      });
+      cleanups.push(() => document.removeEventListener("DOMContentLoaded", mountAfterParse));
+    } else {
+      mount();
+    }
+  } catch (error) {
+    publicInstallation.dispose();
+    throw error;
+  }
+  return publicInstallation;
+}
+
+// src/browser/artifact-share.ts
+function nonblank(value, label) {
+  if (value.trim().length === 0) {
+    throw new RangeError(`${label} must contain a non-whitespace character.`);
+  }
+  return value;
+}
+function publicWebUrl(value) {
+  const normalized = nonblank(value, "An artifact share URL").trim();
+  let url;
+  try {
+    url = new URL(normalized);
+  } catch {
+    throw new RangeError("An artifact share URL must be an absolute URL.");
+  }
+  if (url.protocol !== "https:" && url.protocol !== "http:") {
+    throw new RangeError("An artifact share URL must use HTTP or HTTPS.");
+  }
+  return url.href;
+}
+function normalizedIntent(input) {
+  return {
+    text: nonblank(input.text, "Artifact share text"),
+    url: publicWebUrl(input.url)
+  };
+}
+function buildXShareIntentUrl(input) {
+  const {
+    text,
+    url
+  } = normalizedIntent(input);
+  const intent = new URL("https://x.com/intent/post");
+  intent.searchParams.set("text", text);
+  intent.searchParams.set("url", url);
+  return intent.href;
+}
+function buildLinkedInShareIntentUrl(url) {
+  const intent = new URL("https://www.linkedin.com/sharing/share-offsite/");
+  intent.searchParams.set("url", publicWebUrl(url));
+  return intent.href;
+}
+function buildBlueskyShareIntentUrl(input) {
+  const {
+    text,
+    url
+  } = normalizedIntent(input);
+  const intent = new URL("https://bsky.app/intent/compose");
+  intent.searchParams.set("text", `${text}
+${url}`);
+  return intent.href;
+}
+async function copyTextToClipboard(text) {
+  const clipboard = globalThis.navigator?.clipboard;
+  if (clipboard === undefined || typeof clipboard.writeText !== "function") {
+    throw new Error("Clipboard text writing is unavailable in this environment.");
+  }
+  await clipboard.writeText(text);
+}
+function downloadBlob(blob, filename) {
+  const normalizedFilename = nonblank(filename, "A download filename").trim();
+  const document = globalThis.document;
+  if (document === undefined || typeof URL.createObjectURL !== "function" || typeof URL.revokeObjectURL !== "function") {
+    throw new Error("Blob downloads are unavailable in this environment.");
+  }
+  const objectUrl = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.download = normalizedFilename;
+  anchor.hidden = true;
+  anchor.href = objectUrl;
+  anchor.rel = "noopener";
+  document.body.append(anchor);
+  try {
+    anchor.click();
+  } finally {
+    anchor.remove();
+    globalThis.setTimeout(() => URL.revokeObjectURL(objectUrl), 0);
+  }
+}
+function isAbortError(error) {
+  return typeof error === "object" && error !== null && "name" in error && error.name === "AbortError";
+}
+function filesOnlyShareData(file) {
+  return {
+    files: [file]
+  };
+}
+function nativeFileShareNavigator() {
+  const shareNavigator = globalThis.navigator;
+  if (shareNavigator === undefined || typeof shareNavigator.canShare !== "function" || typeof shareNavigator.share !== "function") {
+    return;
+  }
+  return shareNavigator;
+}
+function canShareFileWithNavigator(shareNavigator, file) {
+  try {
+    return shareNavigator.canShare(filesOnlyShareData(file));
+  } catch {
+    return false;
+  }
+}
+function canShareFileNatively(file) {
+  const shareNavigator = nativeFileShareNavigator();
+  return shareNavigator !== undefined && canShareFileWithNavigator(shareNavigator, file);
+}
+async function shareFileNatively(file) {
+  const shareNavigator = nativeFileShareNavigator();
+  if (shareNavigator === undefined || !canShareFileWithNavigator(shareNavigator, file)) {
+    return {
+      kind: "unavailable"
+    };
+  }
+  try {
+    await shareNavigator.share(filesOnlyShareData(file));
+    return {
+      kind: "shared"
+    };
+  } catch (error) {
+    if (isAbortError(error))
+      return {
+        kind: "cancelled"
+      };
+    return {
+      error,
+      kind: "failed"
+    };
+  }
+}
+// src/palette-color.ts
+function channels(hex) {
+  if (!/^#[0-9a-f]{6}$/iu.test(hex))
+    throw new Error("Palette colors must be six-digit hex values.");
+  return [Number.parseInt(hex.slice(1, 3), 16), Number.parseInt(hex.slice(3, 5), 16), Number.parseInt(hex.slice(5, 7), 16)];
+}
+function mixPaletteColor(color, toward, amount) {
+  const target = channels(toward);
+  return `#${channels(color).map((value, index) => Math.round(value * (1 - amount) + (target[index] ?? 0) * amount).toString(16).padStart(2, "0")).join("")}`;
+}
+function luminance(hex) {
+  const linearize = (channel) => {
+    const value = channel / 255;
+    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  };
+  const [red, green, blue] = channels(hex);
+  return linearize(red) * 0.2126 + linearize(green) * 0.7152 + linearize(blue) * 0.0722;
+}
+function paletteContrast(a, b) {
+  const first = luminance(a);
+  const second = luminance(b);
+  return (Math.max(first, second) + 0.05) / (Math.min(first, second) + 0.05);
+}
+function readablePaletteColor(color, toward, backgrounds, minimum) {
+  for (let step = 0;step <= 100; step += 1) {
+    const candidate = mixPaletteColor(color, toward, step / 100);
+    if (backgrounds.every((background) => paletteContrast(candidate, background) >= minimum))
+      return candidate;
+  }
+  throw new Error("The authored palette cannot meet its contrast contract.");
+}
+
+// src/palettes.ts
+var designPalettes = ["catppuccin", "gruvbox", "rose-pine", "tokyo-night", "paper"];
+function isDesignPalette(value) {
+  return typeof value === "string" && designPalettes.some((palette) => palette === value);
+}
+var designPaletteSources = {
+  paper: {
+    light: {
+      background: "#f8f7f4",
+      surface: "#fffefa",
+      raised: "#fffefa",
+      hover: "#ebe8e3",
+      text: "#1c1917",
+      muted: "#6f6962",
+      border: "#8b8278",
+      primary: "#1f5eea",
+      danger: "#b23c34",
+      warning: "#a65f00",
+      success: "#26814d",
+      info: "#1f5eea",
+      violet: "#7959a5",
+      rose: "#a44b65"
+    },
+    dark: {
+      background: "#12100f",
+      surface: "#1d1a18",
+      raised: "#211d1a",
+      hover: "#292522",
+      text: "#f5f2ed",
+      muted: "#aaa29a",
+      border: "#827a72",
+      primary: "#8fb0ff",
+      danger: "#ef8c82",
+      warning: "#efae55",
+      success: "#5fc98b",
+      info: "#8fb0ff",
+      violet: "#b7a0dc",
+      rose: "#db91aa"
+    }
+  },
+  catppuccin: {
+    dark: {
+      background: "#1e1e2e",
+      surface: "#181825",
+      raised: "#313244",
+      hover: "#45475a",
+      text: "#cdd6f4",
+      muted: "#a6adc8",
+      border: "#7f849c",
+      primary: "#89b4fa",
+      danger: "#f38ba8",
+      warning: "#f9e2af",
+      success: "#a6e3a1",
+      info: "#89dceb",
+      violet: "#cba6f7",
+      rose: "#f5c2e7"
+    },
+    light: {
+      background: "#eff1f5",
+      surface: "#e6e9ef",
+      raised: "#dce0e8",
+      hover: "#ccd0da",
+      text: "#4c4f69",
+      muted: "#6c6f85",
+      border: "#7c7f93",
+      primary: "#1e66f5",
+      danger: "#d20f39",
+      warning: "#df8e1d",
+      success: "#40a02b",
+      info: "#179299",
+      violet: "#8839ef",
+      rose: "#ea76cb"
+    }
+  },
+  gruvbox: {
+    dark: {
+      background: "#282828",
+      surface: "#1d2021",
+      raised: "#3c3836",
+      hover: "#504945",
+      text: "#ebdbb2",
+      muted: "#bdae93",
+      border: "#928374",
+      primary: "#83a598",
+      danger: "#fb4934",
+      warning: "#fabd2f",
+      success: "#b8bb26",
+      info: "#8ec07c",
+      violet: "#d3869b",
+      rose: "#fe8019"
+    },
+    light: {
+      background: "#fbf1c7",
+      surface: "#f9f5d7",
+      raised: "#ebdbb2",
+      hover: "#d5c4a1",
+      text: "#3c3836",
+      muted: "#665c54",
+      border: "#7c6f64",
+      primary: "#076678",
+      danger: "#9d0006",
+      warning: "#b57614",
+      success: "#79740e",
+      info: "#427b58",
+      violet: "#8f3f71",
+      rose: "#af3a03"
+    }
+  },
+  "rose-pine": {
+    dark: {
+      background: "#191724",
+      surface: "#1f1d2e",
+      raised: "#26233a",
+      hover: "#403d52",
+      text: "#e0def4",
+      muted: "#908caa",
+      border: "#908caa",
+      primary: "#c4a7e7",
+      danger: "#eb6f92",
+      warning: "#f6c177",
+      success: "#9ccfd8",
+      info: "#ebbcba",
+      violet: "#c4a7e7",
+      rose: "#ebbcba"
+    },
+    light: {
+      background: "#faf4ed",
+      surface: "#fffaf3",
+      raised: "#f2e9e1",
+      hover: "#dfdad9",
+      text: "#575279",
+      muted: "#797593",
+      border: "#797593",
+      primary: "#907aa9",
+      danger: "#b4637a",
+      warning: "#ea9d34",
+      success: "#286983",
+      info: "#56949f",
+      violet: "#907aa9",
+      rose: "#d7827e"
+    }
+  },
+  "tokyo-night": {
+    dark: {
+      background: "#1a1b26",
+      surface: "#16161e",
+      raised: "#24283b",
+      hover: "#292e42",
+      text: "#c0caf5",
+      muted: "#a9b1d6",
+      border: "#737aa2",
+      primary: "#7aa2f7",
+      danger: "#f7768e",
+      warning: "#e0af68",
+      success: "#9ece6a",
+      info: "#7dcfff",
+      violet: "#bb9af7",
+      rose: "#ff9e64"
+    },
+    light: {
+      background: "#e1e2e7",
+      surface: "#d0d5e3",
+      raised: "#c4c8da",
+      hover: "#b7c1e3",
+      text: "#3760bf",
+      muted: "#6172b0",
+      border: "#6172b0",
+      primary: "#2e7de9",
+      danger: "#f52a65",
+      warning: "#8c6c3e",
+      success: "#587539",
+      info: "#007197",
+      violet: "#9854f1",
+      rose: "#b15c00"
+    }
+  }
+};
+function createPalette(source, mode) {
+  const surfaces = [source.background, source.surface, source.raised, source.hover];
+  const endpoint = mode === "dark" ? "#ffffff" : "#000000";
+  const foreground = readablePaletteColor(source.text, endpoint, surfaces, 7);
+  const muted = readablePaletteColor(source.muted, endpoint, surfaces, 4.6);
+  const status = (seed) => {
+    const soft = mixPaletteColor(source.background, seed, 0.12);
+    const color = readablePaletteColor(seed, endpoint, [...surfaces, soft], 4.6);
+    const onColor = paletteContrast(color, source.background) >= 4.5 ? source.background : endpoint === "#ffffff" ? "#000000" : "#ffffff";
+    return {
+      color,
+      foreground: onColor,
+      soft
+    };
+  };
+  const primary = status(source.primary);
+  const danger = status(source.danger);
+  const warning = status(source.warning);
+  const success = status(source.success);
+  const info = status(source.info);
+  return Object.freeze({
+    background: source.background,
+    foreground,
+    muted,
+    faint: muted,
+    grid: source.raised,
+    line: source.hover,
+    controlBorder: readablePaletteColor(source.border, endpoint, surfaces, 3.1),
+    surface: source.surface,
+    surfaceRaised: source.raised,
+    surfaceHover: source.hover,
+    card: source.surface,
+    cardForeground: foreground,
+    popover: source.raised,
+    popoverForeground: foreground,
+    primary: primary.color,
+    primaryForeground: primary.foreground,
+    primarySoft: primary.soft,
+    secondary: source.raised,
+    secondaryForeground: foreground,
+    accent: primary.soft,
+    accentForeground: foreground,
+    focus: primary.color,
+    scrim: mode === "dark" ? "#000000b8" : "#00000070",
+    disabled: source.raised,
+    disabledForeground: muted,
+    inverse: foreground,
+    inverseForeground: source.background,
+    danger: danger.color,
+    dangerForeground: danger.foreground,
+    dangerSoft: danger.soft,
+    warning: warning.color,
+    warningForeground: warning.foreground,
+    warningSoft: warning.soft,
+    success: success.color,
+    successForeground: success.foreground,
+    successSoft: success.soft,
+    info: info.color,
+    infoForeground: info.foreground,
+    infoSoft: info.soft,
+    chart1: readablePaletteColor(source.rose, endpoint, surfaces, 4.6),
+    chart2: success.color,
+    chart3: info.color,
+    chart4: warning.color,
+    chart5: readablePaletteColor(source.violet, endpoint, surfaces, 4.6)
+  });
+}
+var paletteColors = Object.freeze({
+  paper: Object.freeze({
+    light: Object.freeze({
+      ...createPalette(designPaletteSources.paper.light, "light"),
+      grid: "#dfdcd6",
+      line: "#b9b3ab",
+      secondary: "#ebe8e3"
+    }),
+    dark: Object.freeze({
+      ...createPalette(designPaletteSources.paper.dark, "dark"),
+      grid: "#302b27",
+      line: "#514a44",
+      secondary: "#292522"
+    })
+  }),
+  catppuccin: Object.freeze({
+    light: createPalette(designPaletteSources.catppuccin.light, "light"),
+    dark: createPalette(designPaletteSources.catppuccin.dark, "dark")
+  }),
+  gruvbox: Object.freeze({
+    light: createPalette(designPaletteSources.gruvbox.light, "light"),
+    dark: createPalette(designPaletteSources.gruvbox.dark, "dark")
+  }),
+  "rose-pine": Object.freeze({
+    light: createPalette(designPaletteSources["rose-pine"].light, "light"),
+    dark: createPalette(designPaletteSources["rose-pine"].dark, "dark")
+  }),
+  "tokyo-night": Object.freeze({
+    light: createPalette(designPaletteSources["tokyo-night"].light, "light"),
+    dark: createPalette(designPaletteSources["tokyo-night"].dark, "dark")
+  })
+});
+
+// src/palette-appearance.ts
+var defaultDesignPalettePreference = Object.freeze({
+  palette: "catppuccin",
+  mode: "dark"
+});
+var designPaletteStorageKey = "hraness-design-palette-v1";
+function parseDesignPalettePreference(value) {
+  if (typeof value === "string") {
+    if (value.length > 256)
+      return null;
+    try {
+      value = JSON.parse(value);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof value !== "object" || value === null || Array.isArray(value))
+    return null;
+  const record = value;
+  if (!isDesignPalette(record.palette) || !isDesignTheme(record.mode))
+    return null;
+  return Object.freeze({
+    palette: record.palette,
+    mode: record.mode
+  });
+}
+function normalizeDesignPalettePreference(value, fallback = defaultDesignPalettePreference) {
+  return parseDesignPalettePreference(value) ?? parseDesignPalettePreference(fallback) ?? defaultDesignPalettePreference;
+}
+function resolveDesignPalettePreference(preference, systemPrefersDark) {
+  return {
+    palette: preference.palette,
+    mode: resolveDesignTheme(preference.mode, systemPrefersDark)
+  };
+}
+
+// src/palette-themes.ts
+import * as stylex from "@stylexjs/stylex";
+
+// src/palette-tokens.stylex.ts
+var catppuccinLight = {
+  x18acsur: "xadus2s x18acsur",
+  $$css: true
+};
+var catppuccinDark = {
+  x18acsur: "x18wthyl x18acsur",
+  $$css: true
+};
+var gruvboxLight = {
+  x18acsur: "xdktuxt x18acsur",
+  $$css: true
+};
+var gruvboxDark = {
+  x18acsur: "x1fsd05x x18acsur",
+  $$css: true
+};
+var rosePineLight = {
+  x18acsur: "x131glkb x18acsur",
+  $$css: true
+};
+var rosePineDark = {
+  x18acsur: "xivpxii x18acsur",
+  $$css: true
+};
+var tokyoNightLight = {
+  x18acsur: "x11phk89 x18acsur",
+  $$css: true
+};
+var tokyoNightDark = {
+  x18acsur: "xgp1gpt x18acsur",
+  $$css: true
+};
+var paperLight = {
+  x18acsur: "xjfxk3y x18acsur",
+  $$css: true
+};
+var paperDark = {
+  x18acsur: "x1lresar x18acsur",
+  $$css: true
+};
+
+// src/palette-themes.ts
+var classes = {
+  paper: {
+    light: stylex.props(paperLight).className,
+    dark: stylex.props(paperDark).className
+  },
+  catppuccin: {
+    light: stylex.props(catppuccinLight).className,
+    dark: stylex.props(catppuccinDark).className
+  },
+  gruvbox: {
+    light: stylex.props(gruvboxLight).className,
+    dark: stylex.props(gruvboxDark).className
+  },
+  "rose-pine": {
+    light: stylex.props(rosePineLight).className,
+    dark: stylex.props(rosePineDark).className
+  },
+  "tokyo-night": {
+    light: stylex.props(tokyoNightLight).className,
+    dark: stylex.props(tokyoNightDark).className
+  }
+};
+function getDesignPaletteTheme(palette, mode) {
+  return {
+    className: `hraness-palette ${classes[palette][mode]}`,
+    background: paletteColors[palette][mode].background
+  };
+}
+
+// src/browser/design-palette.ts
+var installationKey = Symbol.for("hraness.design-palette.controller.v1");
+var darkQuery = "(prefers-color-scheme: dark)";
+function designPaletteSnapshot(preference, systemPrefersDark, isForced = false) {
+  const resolved = resolveDesignPalettePreference(preference, systemPrefersDark);
+  const theme = getDesignPaletteTheme(resolved.palette, resolved.mode);
+  return Object.freeze({
+    preference: Object.freeze({
+      ...preference
+    }),
+    resolvedMode: resolved.mode,
+    className: theme.className,
+    background: theme.background,
+    isForced
+  });
+}
+function readStorage(storage, key) {
+  try {
+    return storage?.getItem(key);
+  } catch {
+    return;
+  }
+}
+function writeStorage(storage, key, preference) {
+  try {
+    storage?.setItem(key, JSON.stringify(preference));
+  } catch {}
+}
+function initDesignPalette(options = {}) {
+  const document = options.document ?? globalThis.document;
+  if (document === undefined || document.documentElement === null || document.head === null) {
+    throw new Error("initDesignPalette requires an HTML document with a head.");
+  }
+  const view = document.defaultView;
+  const storageKey = options.storageKey ?? designPaletteStorageKey;
+  const legacyStorageKey = options.legacyStorageKey === undefined ? designThemeStorageKey : options.legacyStorageKey;
+  if (storageKey.trim() === "" || legacyStorageKey?.trim() === "")
+    throw new Error("Appearance storage keys must not be blank.");
+  const fallback = normalizeDesignPalettePreference(options.defaultPreference);
+  const forced = options.forcedPreference === undefined ? null : parseDesignPalettePreference(options.forcedPreference);
+  if (options.forcedPreference !== undefined && (forced === null || forced.mode === "system")) {
+    throw new Error("A forced palette requires a valid palette and a light or dark mode.");
+  }
+  const configuration = JSON.stringify({
+    storageKey,
+    legacyStorageKey,
+    fallback,
+    forced
+  });
+  const ownerDocument = document;
+  const previous = ownerDocument[installationKey];
+  if (previous !== undefined) {
+    if (previous.version !== 1 || previous.configuration !== configuration) {
+      throw new Error("This document already has a different palette configuration.");
+    }
+    return previous.acquire();
+  }
+  let storage = options.storage ?? null;
+  const usesDefaultStorage = options.storage === undefined;
+  if (usesDefaultStorage && forced === null) {
+    try {
+      storage = view?.localStorage ?? null;
+    } catch {}
+  }
+  let media = null;
+  try {
+    media = view?.matchMedia?.(darkQuery) ?? null;
+  } catch {}
+  const readPreference = () => {
+    if (forced !== null)
+      return forced;
+    const raw = readStorage(storage, storageKey);
+    const saved = parseDesignPalettePreference(raw);
+    if (saved !== null)
+      return saved;
+    if ((raw === null || raw === undefined) && legacyStorageKey !== null) {
+      const legacy = readStorage(storage, legacyStorageKey);
+      if (isDesignTheme(legacy))
+        return Object.freeze({
+          palette: fallback.palette,
+          mode: legacy
+        });
+    }
+    return fallback;
+  };
+  let snapshot = designPaletteSnapshot(readPreference(), media?.matches ?? false, forced !== null);
+  const listeners = new Set;
+  const ownedClasses = new Set(designPalettes.flatMap((palette) => ["light", "dark"].flatMap((mode) => getDesignPaletteTheme(palette, mode).className.split(/\s+/u))));
+  const themeColor = acquireThemeColorMeta(document, "theme-color", Symbol("palette-theme-color"), snapshot.background);
+  const apply = () => {
+    const root = document.documentElement;
+    const nextClasses = new Set(snapshot.className.split(/\s+/u).filter(Boolean));
+    for (const token of ownedClasses)
+      if (token !== "" && !nextClasses.has(token))
+        root.classList.remove(token);
+    for (const token of nextClasses)
+      root.classList.add(token);
+    root.setAttribute("data-palette", snapshot.preference.palette);
+    root.setAttribute("data-theme", snapshot.resolvedMode);
+    themeColor.update(snapshot.background);
+  };
+  const update = (preference) => {
+    const next = designPaletteSnapshot(preference, media?.matches ?? false, forced !== null);
+    if (next.preference.palette === snapshot.preference.palette && next.preference.mode === snapshot.preference.mode && next.resolvedMode === snapshot.resolvedMode)
+      return false;
+    snapshot = next;
+    apply();
+    for (const listener of listeners)
+      listener();
+    return true;
+  };
+  const onMedia = () => {
+    update(snapshot.preference);
+  };
+  const onStorage = (event) => {
+    if (forced !== null || event.key !== storageKey && event.key !== null)
+      return;
+    if (usesDefaultStorage && event.storageArea !== null && event.storageArea !== undefined && event.storageArea !== storage)
+      return;
+    update(readPreference());
+  };
+  if (forced === null) {
+    writeStorage(storage, storageKey, snapshot.preference);
+    view?.addEventListener("storage", onStorage);
+    media?.addEventListener("change", onMedia);
+  }
+  let owners = 0;
+  const installation = {
+    version: 1,
+    configuration,
+    acquire: () => {
+      apply();
+      owners += 1;
+      let disposed = false;
+      const subscriptions = new Set;
+      return {
+        getSnapshot: () => snapshot,
+        subscribe: (listener) => {
+          if (disposed)
+            return () => {
+              return;
+            };
+          const subscription = () => {
+            listener();
+          };
+          subscriptions.add(subscription);
+          listeners.add(subscription);
+          return () => {
+            subscriptions.delete(subscription);
+            listeners.delete(subscription);
+          };
+        },
+        setPreference: (value) => {
+          if (disposed || forced !== null)
+            return false;
+          const preference = parseDesignPalettePreference(value);
+          if (preference === null)
+            throw new Error("Choose a supported palette and appearance mode.");
+          writeStorage(storage, storageKey, preference);
+          return update(preference);
+        },
+        dispose: () => {
+          if (disposed)
+            return;
+          disposed = true;
+          for (const listener of subscriptions)
+            listeners.delete(listener);
+          subscriptions.clear();
+          owners -= 1;
+          if (owners !== 0)
+            return;
+          view?.removeEventListener("storage", onStorage);
+          media?.removeEventListener("change", onMedia);
+          themeColor.release();
+          if (ownerDocument[installationKey] === installation)
+            Reflect.deleteProperty(ownerDocument, installationKey);
+        }
+      };
+    }
+  };
+  ownerDocument[installationKey] = installation;
+  return installation.acquire();
+}
+// src/browser/foil.ts
+var REST = 50;
+var SETTLE = 0.05;
+var RESPONSE_MS = 85;
+var MIN_LIGHT = 8;
+var MAX_LIGHT = 92;
+var INPUTS = ["--hraness-foil-x", "--hraness-foil-y"];
+var clampLight = (value) => Math.max(MIN_LIGHT, Math.min(MAX_LIGHT, value));
+function attachFoil(root) {
+  const document = root.ownerDocument;
+  const view = document.defaultView;
+  if (!view || typeof view.matchMedia !== "function" || typeof view.requestAnimationFrame !== "function" || typeof view.cancelAnimationFrame !== "function")
+    return () => {};
+  const preference = view.matchMedia("(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none)");
+  const states = new Map;
+  let targets = [];
+  let needsTargets = true;
+  let pointer;
+  let frame = null;
+  let previousTime;
+  let detached = false;
+  const restore = (target) => {
+    for (const input of INPUTS)
+      target.style.removeProperty(input);
+  };
+  const reset = () => {
+    if (frame !== null)
+      view.cancelAnimationFrame(frame);
+    frame = null;
+    previousTime = undefined;
+    pointer = undefined;
+    for (const target of states.keys())
+      restore(target);
+    states.clear();
+    targets = [];
+    needsTargets = true;
+  };
+  const refreshTargets = () => {
+    targets = [...root.matches("[data-foil]") ? [root] : [], ...root.querySelectorAll("[data-foil]")].filter((target) => {
+      const ancestor = target.parentElement?.closest("[data-foil]");
+      return !ancestor || !root.contains(ancestor);
+    });
+    const live = new Set(targets);
+    for (const target of states.keys()) {
+      if (!live.has(target)) {
+        restore(target);
+        states.delete(target);
+      }
+    }
+    needsTargets = false;
+  };
+  const paint = (time) => {
+    frame = null;
+    if (detached || !preference.matches || document.hidden || !pointer) {
+      reset();
+      return;
+    }
+    if (needsTargets)
+      refreshTargets();
+    const elapsed = previousTime === undefined ? 1000 / 60 : Math.max(0, Math.min(64, time - previousTime));
+    previousTime = time;
+    const ease = 1 - Math.exp(-elapsed / RESPONSE_MS);
+    const measured = targets.map((target) => ({
+      target,
+      bounds: target.getBoundingClientRect()
+    }));
+    let moving = false;
+    for (const {
+      target,
+      bounds
+    } of measured) {
+      if (!target.isConnected || !root.contains(target) || bounds.width <= 0 || bounds.height <= 0 || bounds.bottom <= 0 || bounds.right <= 0 || bounds.top >= view.innerHeight || bounds.left >= view.innerWidth) {
+        if (states.has(target)) {
+          restore(target);
+          states.delete(target);
+        }
+        continue;
+      }
+      const goal = {
+        x: clampLight(REST + (pointer.x - bounds.left - bounds.width / 2) / Math.max(160, bounds.width) * 60),
+        y: clampLight(REST + (pointer.y - bounds.top - bounds.height / 2) / Math.max(120, bounds.height) * 50)
+      };
+      const light = states.get(target) ?? {
+        x: REST,
+        y: REST
+      };
+      for (const axis of ["x", "y"]) {
+        const distance = goal[axis] - light[axis];
+        if (Math.abs(distance) > SETTLE) {
+          light[axis] += distance * ease;
+          moving = true;
+        } else
+          light[axis] = goal[axis];
+      }
+      states.set(target, light);
+      for (const axis of ["x", "y"]) {
+        const input = `--hraness-foil-${axis}`;
+        const value = `${light[axis].toFixed(2)}%`;
+        if (target.style.getPropertyValue(input) !== value)
+          target.style.setProperty(input, value);
+      }
+    }
+    if (moving)
+      frame = view.requestAnimationFrame(paint);
+    else
+      previousTime = undefined;
+  };
+  const move = (event) => {
+    if (!preference.matches || document.hidden || event.pointerType === "touch") {
+      reset();
+      return;
+    }
+    if (!Number.isFinite(event.clientX) || !Number.isFinite(event.clientY))
+      return;
+    pointer = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    needsTargets = true;
+    if (frame === null)
+      frame = view.requestAnimationFrame(paint);
+  };
+  const leave = (event) => {
+    if (event.relatedTarget === null)
+      reset();
+  };
+  const visibility = () => {
+    if (document.hidden)
+      reset();
+  };
+  view.addEventListener("pointermove", move, {
+    passive: true
+  });
+  view.addEventListener("pointerdown", move, {
+    passive: true
+  });
+  view.addEventListener("pointerout", leave, {
+    passive: true
+  });
+  view.addEventListener("pointercancel", reset);
+  view.addEventListener("blur", reset);
+  view.addEventListener("scroll", reset, {
+    passive: true,
+    capture: true
+  });
+  view.addEventListener("resize", reset, {
+    passive: true
+  });
+  document.addEventListener("visibilitychange", visibility);
+  preference.addEventListener("change", reset);
+  return () => {
+    detached = true;
+    reset();
+    view.removeEventListener("pointermove", move);
+    view.removeEventListener("pointerdown", move);
+    view.removeEventListener("pointerout", leave);
+    view.removeEventListener("pointercancel", reset);
+    view.removeEventListener("blur", reset);
+    view.removeEventListener("scroll", reset, true);
+    view.removeEventListener("resize", reset);
+    document.removeEventListener("visibilitychange", visibility);
+    preference.removeEventListener("change", reset);
+  };
+}
+// src/browser/hero-light.ts
+function attachHeroLight(root) {
+  return () => {};
+}
+// src/status-page.ts
+var STATUS_PAGE_MAX_ROUTES = 2000;
+function isSitePath(href) {
+  return /^\/(?![/\\])/u.test(href);
+}
+function parseStatusPageRoutes(value) {
+  if (!value)
+    return [];
+  let parsed;
+  try {
+    parsed = JSON.parse(value);
+  } catch {
+    return [];
+  }
+  if (!Array.isArray(parsed))
+    return [];
+  const routes = [];
+  for (const entry of parsed.slice(0, STATUS_PAGE_MAX_ROUTES)) {
+    if (!Array.isArray(entry))
+      continue;
+    const [href, label] = entry;
+    if (typeof href !== "string" || typeof label !== "string")
+      continue;
+    if (!isSitePath(href) || label.trim() === "")
+      continue;
+    routes.push({
+      href,
+      label
+    });
+  }
+  return routes;
+}
+var MAX_PATH = 160;
+function normalizeStatusPath(value) {
+  let path = value.slice(0, MAX_PATH * 4);
+  const end = path.search(/[?#]/u);
+  if (end !== -1)
+    path = path.slice(0, end);
+  try {
+    path = decodeURIComponent(path);
+  } catch {}
+  path = path.toLowerCase().split("/").filter((part, index) => index === 0 || part !== "").join("/");
+  path = path.replace(/(?:\/index)?\.html?$/u, "");
+  while (path.length > 1 && path.endsWith("/"))
+    path = path.slice(0, -1);
+  if (!path.startsWith("/"))
+    path = `/${path}`;
+  return path.slice(0, MAX_PATH);
+}
+var MAX_EDITS = 3;
+var BEYOND = MAX_EDITS + 1;
+function editDistance(a, b, limit) {
+  if (Math.abs(a.length - b.length) > limit)
+    return limit + 1;
+  const columns = b.length + 1;
+  let before = new Int32Array(columns).fill(BEYOND);
+  let previous = Int32Array.from({
+    length: columns
+  }, (_, index) => Math.min(index, BEYOND));
+  let current = new Int32Array(columns).fill(BEYOND);
+  for (let i = 1;i <= a.length; i++) {
+    const low = Math.max(1, i - limit);
+    const high = Math.min(b.length, i + limit);
+    current[low - 1] = low === 1 ? Math.min(i, BEYOND) : BEYOND;
+    if (high < b.length)
+      current[high + 1] = BEYOND;
+    let rowMin = BEYOND;
+    for (let j = low;j <= high; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      let value = Math.min((previous[j] ?? BEYOND) + 1, (current[j - 1] ?? BEYOND) + 1, (previous[j - 1] ?? BEYOND) + cost);
+      if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) {
+        value = Math.min(value, (before[j - 2] ?? BEYOND) + 1);
+      }
+      current[j] = Math.min(value, BEYOND);
+      rowMin = Math.min(rowMin, value);
+    }
+    if (rowMin > limit)
+      return limit + 1;
+    [before, previous, current] = [previous, current, before];
+  }
+  return Math.min(previous[b.length] ?? BEYOND, limit + 1);
+}
+function words(path) {
+  return path.split(/[/\-_.]+/u).filter((word) => word.length > 0);
+}
+function wordAllowance(word) {
+  if (word.length < 4)
+    return 0;
+  return word.length < 8 ? 1 : 2;
+}
+function wordsMatch(missing, candidate) {
+  return missing.every((word) => {
+    const allowance = wordAllowance(word);
+    return candidate.some((other) => other === word || allowance > 0 && editDistance(word, other, allowance) <= allowance);
+  });
+}
+function candidate(path) {
+  const parts = words(path);
+  return {
+    path,
+    words: parts,
+    joined: parts.join(""),
+    last: path.slice(path.lastIndexOf("/") + 1)
+  };
+}
+function score(missing, page) {
+  if (page.path === missing.path)
+    return 0;
+  if (missing.joined.length >= 6 && missing.joined === page.joined)
+    return 0.1;
+  const longest = Math.max(missing.path.length, page.path.length);
+  const limit = Math.min(MAX_EDITS, Math.floor(longest / 4));
+  if (limit > 0 && wordsMatch(missing.words, page.words)) {
+    const distance = editDistance(missing.path, page.path, limit);
+    if (distance <= limit)
+      return distance / longest;
+  }
+  if (missing.last.length >= 6 && missing.last === page.last)
+    return 0.5;
+  const longer = missing.words.filter((word) => word.length >= 3);
+  if (longer.length >= 2 && longer.length === missing.words.length && longer.every((word) => page.words.includes(word)))
+    return 0.6;
+  return;
+}
+function suggestStatusRoute(pathname, routes) {
+  const normalized = normalizeStatusPath(pathname);
+  if (normalized === "/")
+    return;
+  const exactOnly = normalized.length < 5;
+  const missing = candidate(normalized);
+  let best;
+  for (const route of routes.slice(0, STATUS_PAGE_MAX_ROUTES)) {
+    if (!isSitePath(route.href))
+      continue;
+    const path = normalizeStatusPath(route.href);
+    if (path === "/" || exactOnly && path !== normalized)
+      continue;
+    const value = score(missing, candidate(path));
+    if (value === undefined)
+      continue;
+    if (best === undefined || value < best.score || value === best.score && (path.length < best.path.length || path.length === best.path.length && path < best.path)) {
+      best = {
+        route,
+        score: value,
+        path
+      };
+    }
+  }
+  return best?.route;
+}
+
+// src/browser/status-field.ts
+var MAX_DOTS = 5200;
+var STRIDE = 4;
+var SPRING = 0.034;
+var DAMPING = 0.86;
+var PUSH = 5.5;
+var BURST = 24;
+var REST_DISTANCE = 0.08;
+var ACCENT_SHARE = 0.14;
+var VERTEX = `
+attribute vec2 a_position;
+attribute float a_heat;
+attribute float a_tone;
+uniform vec2 u_size;
+uniform float u_point;
+varying float v_mix;
+void main() {
+  vec2 clip = a_position / u_size * 2.0 - 1.0;
+  gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+  gl_PointSize = u_point * (1.0 + a_heat * 0.55);
+  v_mix = clamp(max(a_tone * 0.85, a_heat), 0.0, 1.0);
+}`;
+var FRAGMENT = `
+precision mediump float;
+uniform vec3 u_ink;
+uniform vec3 u_accent;
+uniform float u_alpha;
+varying float v_mix;
+void main() {
+  float d = length(gl_PointCoord - 0.5);
+  float a = smoothstep(0.5, 0.18, d) * u_alpha;
+  gl_FragColor = vec4(mix(u_ink, u_accent, v_mix) * a, a);
+}`;
+function random(seed) {
+  let state = seed >>> 0 || 2654435769;
+  return () => {
+    state ^= state << 13;
+    state >>>= 0;
+    state ^= state >>> 17;
+    state ^= state << 5;
+    state >>>= 0;
+    return state / 4294967296;
+  };
+}
+function compile(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader)
+    return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (gl.getShaderParameter(shader, gl.COMPILE_STATUS))
+    return shader;
+  gl.deleteShader(shader);
+  return null;
+}
+function attachStatusField(code, options = {}) {
+  const document = code.ownerDocument;
+  const view = document.defaultView;
+  const canvas = code.querySelector("canvas");
+  const glyph = code.querySelector(".hraness-status-page__glyph");
+  if (!view || !canvas || !glyph || typeof view.matchMedia !== "function" || typeof view.requestAnimationFrame !== "function" || typeof view.ResizeObserver !== "function")
+    return () => {};
+  if (view.matchMedia("(forced-colors: active)").matches)
+    return () => {};
+  const motion = view.matchMedia("(prefers-reduced-motion: reduce)");
+  let gl = null;
+  try {
+    gl = canvas.getContext("webgl", {
+      alpha: true,
+      antialias: false,
+      depth: false,
+      premultipliedAlpha: true,
+      preserveDrawingBuffer: false,
+      stencil: false
+    });
+  } catch {
+    gl = null;
+  }
+  if (!gl || gl.isContextLost())
+    return () => {};
+  const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX);
+  const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);
+  const program = gl.createProgram();
+  if (!vertex || !fragment || !program)
+    return () => {};
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS))
+    return () => {};
+  gl.useProgram(program);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  const attribute = (name, size, offset) => {
+    const location = gl.getAttribLocation(program, name);
+    gl.enableVertexAttribArray(location);
+    gl.vertexAttribPointer(location, size, gl.FLOAT, false, STRIDE * 4, offset * 4);
+  };
+  attribute("a_position", 2, 0);
+  attribute("a_heat", 1, 2);
+  attribute("a_tone", 1, 3);
+  const uniform = (name) => gl.getUniformLocation(program, name);
+  const uSize = uniform("u_size");
+  const uPoint = uniform("u_point");
+  const uInk = uniform("u_ink");
+  const uAccent = uniform("u_accent");
+  const uAlpha = uniform("u_alpha");
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+  const next = random(options.seed ?? 404);
+  let homes = new Float32Array(0);
+  let velocity = new Float32Array(0);
+  let vertices = new Float32Array(0);
+  let count = 0;
+  let width = 0;
+  let height = 0;
+  let pointSize = 2;
+  let pointer;
+  let frame;
+  let previous;
+  let introStart;
+  let delays = new Float32Array(0);
+  let live = false;
+  let disposed = false;
+  let lost = false;
+  const probe = document.createElement("canvas");
+  probe.width = 1;
+  probe.height = 1;
+  const probeContext = probe.getContext("2d", {
+    willReadFrequently: true
+  });
+  const rgba = (value) => {
+    if (!probeContext)
+      return [0.5, 0.5, 0.5, 1];
+    probeContext.clearRect(0, 0, 1, 1);
+    probeContext.fillStyle = "#808080";
+    probeContext.fillStyle = value;
+    probeContext.fillRect(0, 0, 1, 1);
+    const [r = 128, g = 128, b = 128, a = 255] = probeContext.getImageData(0, 0, 1, 1).data;
+    return [r / 255, g / 255, b / 255, a / 255];
+  };
+  const readColors = () => {
+    const ink = rgba(view.getComputedStyle(glyph).color);
+    const accent = rgba(view.getComputedStyle(canvas).color);
+    gl.uniform3f(uInk, ink[0], ink[1], ink[2]);
+    gl.uniform3f(uAccent, accent[0], accent[1], accent[2]);
+    gl.uniform1f(uAlpha, Math.max(0.35, ink[3]));
+  };
+  const sample = () => {
+    const bounds = canvas.getBoundingClientRect();
+    const box = code.getBoundingClientRect();
+    const centerX = box.left - bounds.left + box.width / 2;
+    const centerY = box.top - bounds.top + box.height / 2;
+    width = Math.round(bounds.width);
+    height = Math.round(bounds.height);
+    if (width < 8 || height < 8)
+      return false;
+    const ratio = Math.min(2, view.devicePixelRatio || 1);
+    canvas.width = Math.round(width * ratio);
+    canvas.height = Math.round(height * ratio);
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    gl.uniform2f(uSize, width, height);
+    const style = view.getComputedStyle(glyph);
+    const fontSize = Number.parseFloat(style.fontSize) || 96;
+    const mask = document.createElement("canvas");
+    mask.width = width;
+    mask.height = height;
+    const context = mask.getContext("2d", {
+      willReadFrequently: true
+    });
+    if (!context)
+      return false;
+    context.font = `${style.fontStyle} ${style.fontWeight} ${fontSize}px ${style.fontFamily}`;
+    context.textAlign = "center";
+    context.textBaseline = "alphabetic";
+    const text = glyph.textContent ?? "";
+    const metrics = context.measureText(text);
+    const ascent = metrics.actualBoundingBoxAscent || fontSize * 0.7;
+    const descent = metrics.actualBoundingBoxDescent || 0;
+    context.fillStyle = "#000";
+    context.fillText(text, centerX, centerY + (ascent - descent) / 2);
+    const pixels = context.getImageData(0, 0, width, height).data;
+    let gap = Math.max(3, Math.min(8, fontSize / 30));
+    let points = [];
+    for (let attempt = 0;attempt < 6; attempt++) {
+      points = [];
+      const rowHeight = gap * 0.866;
+      for (let row = 0, y = rowHeight / 2;y < height; row++, y += rowHeight) {
+        for (let x = row % 2 ? gap : gap / 2;x < width; x += gap) {
+          if ((pixels[(Math.floor(y) * width + Math.floor(x)) * 4 + 3] ?? 0) >= 128)
+            points.push(x, y);
+        }
+      }
+      if (points.length / 2 <= MAX_DOTS)
+        break;
+      gap *= 1.2;
+    }
+    const nextCount = points.length / 2;
+    const nextHomes = Float32Array.from(points);
+    const nextVertices = new Float32Array(nextCount * STRIDE);
+    const nextVelocity = new Float32Array(nextCount * 2);
+    const nextDelays = new Float32Array(nextCount);
+    const intro = count === 0 && !motion.matches;
+    for (let index = 0;index < nextCount; index++) {
+      const base = index * STRIDE;
+      const hx = nextHomes[index * 2] ?? 0;
+      const hy = nextHomes[index * 2 + 1] ?? 0;
+      if (index < count) {
+        nextVertices[base] = vertices[index * STRIDE] ?? 0;
+        nextVertices[base + 1] = vertices[index * STRIDE + 1] ?? 0;
+        nextVertices[base + 3] = vertices[index * STRIDE + 3] ?? 0;
+      } else {
+        const angle = next() * Math.PI * 2;
+        const reach = intro ? (0.25 + next() * 0.6) * Math.max(width, height) * 0.5 : 0;
+        nextVertices[base] = hx + Math.cos(angle) * reach;
+        nextVertices[base + 1] = hy + Math.sin(angle) * reach * 0.6;
+        nextVertices[base + 3] = next() < ACCENT_SHARE ? 1 : 0;
+        nextDelays[index] = intro ? next() * 420 : 0;
+      }
+    }
+    homes = nextHomes;
+    vertices = nextVertices;
+    velocity = nextVelocity;
+    delays = nextDelays;
+    count = nextCount;
+    pointSize = gap * 0.6 * ratio;
+    gl.uniform1f(uPoint, pointSize);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
+    if (intro)
+      introStart = undefined;
+    return count > 0;
+  };
+  const draw = () => {
+    if (disposed || lost)
+      return;
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
+    gl.drawArrays(gl.POINTS, 0, count);
+    if (!live) {
+      live = true;
+      options.onLive?.(true);
+    }
+  };
+  const settle = () => {
+    for (let index = 0;index < count; index++) {
+      vertices[index * STRIDE] = homes[index * 2] ?? 0;
+      vertices[index * STRIDE + 1] = homes[index * 2 + 1] ?? 0;
+      vertices[index * STRIDE + 2] = 0;
+      velocity[index * 2] = 0;
+      velocity[index * 2 + 1] = 0;
+    }
+  };
+  const step = (time) => {
+    frame = undefined;
+    if (disposed || lost)
+      return;
+    if (document.hidden) {
+      previous = undefined;
+      return;
+    }
+    introStart ??= time;
+    const dt = previous === undefined ? 1 : Math.max(0.25, Math.min(2, (time - previous) / 16.67));
+    previous = time;
+    const since = time - introStart;
+    const radius = Math.max(72, width * 0.16);
+    const damping = DAMPING ** dt;
+    let moving = false;
+    for (let index = 0;index < count; index++) {
+      const base = index * STRIDE;
+      if (since < (delays[index] ?? 0)) {
+        moving = true;
+        continue;
+      }
+      let x = vertices[base] ?? 0;
+      let y = vertices[base + 1] ?? 0;
+      let vx = velocity[index * 2] ?? 0;
+      let vy = velocity[index * 2 + 1] ?? 0;
+      let ax = ((homes[index * 2] ?? 0) - x) * SPRING;
+      let ay = ((homes[index * 2 + 1] ?? 0) - y) * SPRING;
+      if (pointer) {
+        const dx = x - pointer.x;
+        const dy = y - pointer.y;
+        const distance = Math.hypot(dx, dy);
+        if (distance < radius) {
+          const force = (1 - distance / radius) ** 2 * PUSH / Math.max(distance, 0.5);
+          ax += dx * force;
+          ay += dy * force;
+        }
+      }
+      vx = (vx + ax * dt) * damping;
+      vy = (vy + ay * dt) * damping;
+      x += vx * dt;
+      y += vy * dt;
+      vertices[base] = x;
+      vertices[base + 1] = y;
+      velocity[index * 2] = vx;
+      velocity[index * 2 + 1] = vy;
+      const speed = Math.hypot(vx, vy);
+      vertices[base + 2] = Math.max((vertices[base + 2] ?? 0) * 0.93 ** dt, Math.min(1, speed / 2));
+      if (speed > REST_DISTANCE * 0.5 || (vertices[base + 2] ?? 0) > 0.02 || !pointer && Math.abs((homes[index * 2] ?? 0) - x) + Math.abs((homes[index * 2 + 1] ?? 0) - y) > REST_DISTANCE)
+        moving = true;
+    }
+    if (!moving && !pointer)
+      settle();
+    draw();
+    if (moving)
+      frame = view.requestAnimationFrame(step);
+    else
+      previous = undefined;
+  };
+  const wake = () => {
+    if (disposed || lost || motion.matches || frame !== undefined)
+      return;
+    frame = view.requestAnimationFrame(step);
+  };
+  const paintStill = () => {
+    if (disposed || lost)
+      return;
+    if (frame !== undefined)
+      view.cancelAnimationFrame(frame);
+    frame = undefined;
+    settle();
+    draw();
+  };
+  const rebuild = () => {
+    if (disposed || lost)
+      return;
+    if (!sample())
+      return;
+    readColors();
+    if (motion.matches)
+      paintStill();
+    else {
+      draw();
+      wake();
+    }
+  };
+  const local = (event) => {
+    const bounds = canvas.getBoundingClientRect();
+    return {
+      x: event.clientX - bounds.left,
+      y: event.clientY - bounds.top
+    };
+  };
+  const onMove = (event) => {
+    if (motion.matches)
+      return;
+    pointer = local(event);
+    wake();
+  };
+  const onLeave = () => {
+    pointer = undefined;
+    wake();
+  };
+  const onDown = (event) => {
+    if (motion.matches)
+      return;
+    const origin = local(event);
+    const reach = Math.max(120, width * 0.34);
+    for (let index = 0;index < count; index++) {
+      const dx = (vertices[index * STRIDE] ?? 0) - origin.x;
+      const dy = (vertices[index * STRIDE + 1] ?? 0) - origin.y;
+      const distance = Math.hypot(dx, dy);
+      if (distance >= reach)
+        continue;
+      const force = (1 - distance / reach) * BURST / Math.max(distance, 0.5);
+      velocity[index * 2] = (velocity[index * 2] ?? 0) + dx * force;
+      velocity[index * 2 + 1] = (velocity[index * 2 + 1] ?? 0) + dy * force;
+    }
+    if (event.pointerType !== "mouse")
+      pointer = undefined;
+    wake();
+  };
+  const area = code.closest(".hraness-status-page") ?? code;
+  area.addEventListener("pointermove", onMove, {
+    passive: true
+  });
+  area.addEventListener("pointerleave", onLeave, {
+    passive: true
+  });
+  area.addEventListener("pointerdown", onDown, {
+    passive: true
+  });
+  const onVisibility = () => {
+    if (!document.hidden)
+      wake();
+  };
+  document.addEventListener("visibilitychange", onVisibility);
+  const onMotion = () => {
+    if (motion.matches)
+      paintStill();
+    else
+      wake();
+  };
+  motion.addEventListener?.("change", onMotion);
+  const scheme = view.matchMedia("(prefers-color-scheme: dark)");
+  const onScheme = () => {
+    if (disposed || lost)
+      return;
+    readColors();
+    if (frame === undefined)
+      draw();
+  };
+  scheme.addEventListener?.("change", onScheme);
+  const themeObserver = typeof view.MutationObserver === "function" ? new view.MutationObserver(onScheme) : undefined;
+  themeObserver?.observe(document.documentElement, {
+    attributeFilter: ["class", "data-theme", "data-palette", "style"],
+    attributes: true
+  });
+  let resizeFrame;
+  const resizeObserver = new view.ResizeObserver(() => {
+    if (resizeFrame !== undefined)
+      view.cancelAnimationFrame(resizeFrame);
+    resizeFrame = view.requestAnimationFrame(() => {
+      resizeFrame = undefined;
+      rebuild();
+    });
+  });
+  const onLost = () => {
+    lost = true;
+    if (frame !== undefined)
+      view.cancelAnimationFrame(frame);
+    frame = undefined;
+    if (live) {
+      live = false;
+      options.onLive?.(false);
+    }
+  };
+  canvas.addEventListener("webglcontextlost", onLost);
+  const fonts = document.fonts;
+  const onFonts = () => rebuild();
+  let started = false;
+  const start = () => {
+    if (started || disposed)
+      return;
+    started = true;
+    resizeObserver.observe(code);
+    rebuild();
+  };
+  if (fonts?.ready) {
+    fonts.ready.then(start, start);
+    fonts.addEventListener?.("loadingdone", onFonts);
+  } else
+    start();
+  return () => {
+    if (disposed)
+      return;
+    disposed = true;
+    if (frame !== undefined)
+      view.cancelAnimationFrame(frame);
+    if (resizeFrame !== undefined)
+      view.cancelAnimationFrame(resizeFrame);
+    area.removeEventListener("pointermove", onMove);
+    area.removeEventListener("pointerleave", onLeave);
+    area.removeEventListener("pointerdown", onDown);
+    document.removeEventListener("visibilitychange", onVisibility);
+    motion.removeEventListener?.("change", onMotion);
+    scheme.removeEventListener?.("change", onScheme);
+    fonts?.removeEventListener?.("loadingdone", onFonts);
+    themeObserver?.disconnect();
+    resizeObserver.disconnect();
+    canvas.removeEventListener("webglcontextlost", onLost);
+    gl.deleteBuffer(buffer);
+    gl.deleteProgram(program);
+    gl.deleteShader(vertex);
+    gl.deleteShader(fragment);
+    if (live)
+      options.onLive?.(false);
+    const release = () => {
+      if (!canvas.isConnected && !gl.isContextLost())
+        gl.getExtension("WEBGL_lose_context")?.loseContext();
+    };
+    release();
+    view.setTimeout(release, 0);
+  };
+}
+
+// src/browser/status-page.ts
+function parseUrl(value) {
+  if (!value)
+    return;
+  try {
+    return new URL(value);
+  } catch {
+    return;
+  }
+}
+function previousPage(view, document) {
+  const navigation = view.navigation;
+  const index = navigation?.currentEntry?.index;
+  if (navigation?.entries !== undefined && typeof index === "number") {
+    return index < 1 ? undefined : parseUrl(navigation.entries()[index - 1]?.url);
+  }
+  return view.history.length > 1 ? parseUrl(document.referrer) : undefined;
+}
+function attachStatusPage(root) {
+  const document = root.ownerDocument;
+  const view = document.defaultView;
+  if (!view)
+    return () => {};
+  const cleanups = [];
+  const hint = root.querySelector(".hraness-status-page__hint");
+  const hintLink = hint?.querySelector("a");
+  if (hint && hintLink && root.dataset.kind === "not-found") {
+    const match = suggestStatusRoute(view.location.pathname, parseStatusPageRoutes(root.getAttribute("data-hraness-status-routes")));
+    const target = match === undefined ? undefined : new URL(match.href, view.location.href);
+    if (match && target && target.origin === view.location.origin) {
+      hintLink.href = target.pathname + target.search + target.hash;
+      hintLink.textContent = match.label;
+      hint.hidden = false;
+      root.dataset.hranessStatusSuggestion = match.href;
+      cleanups.push(() => {
+        hint.hidden = true;
+        hintLink.setAttribute("href", "/");
+        hintLink.textContent = "";
+        delete root.dataset.hranessStatusSuggestion;
+      });
+    }
+  }
+  const back = root.querySelector(".hraness-status-page__back");
+  if (back) {
+    const previous = previousPage(view, document);
+    if (previous && previous.origin === view.location.origin && previous.pathname !== view.location.pathname) {
+      back.href = previous.href;
+      back.hidden = false;
+      const onBack = (event) => {
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+          return;
+        event.preventDefault();
+        view.history.back();
+      };
+      back.addEventListener("click", onBack);
+      cleanups.push(() => {
+        back.removeEventListener("click", onBack);
+        back.hidden = true;
+        back.setAttribute("href", "/");
+      });
+    }
+  }
+  const code = root.querySelector(".hraness-status-page__code");
+  if (code) {
+    cleanups.push(attachStatusField(code, {
+      onLive: (live) => {
+        if (live)
+          root.dataset.hranessStatusField = "live";
+        else
+          delete root.dataset.hranessStatusField;
+      }
+    }));
+  }
+  cleanups.push(attachFoil(root));
+  return () => {
+    for (const cleanup of cleanups.splice(0).reverse())
+      cleanup();
+  };
+}
+// src/browser/sticky-offset.ts
+var stickyOffsetCustomProperty = "--hraness-sticky-offset";
+var stickyOffsetHeaderSelector = [".hraness-marketing-header:not([data-position='static'])", ".hraness-marketing-header-surface:not([data-position='static'])"].join(", ");
+function canQuery(root) {
+  return typeof root.querySelector === "function";
+}
+function ownerDocumentOf(node) {
+  if (node === undefined)
+    return globalThis.document;
+  if (node.nodeType === 9)
+    return node;
+  const owner = node.ownerDocument;
+  return owner ?? undefined;
+}
+function resolveHeader(root, header) {
+  if (typeof header === "object")
+    return header;
+  if (!canQuery(root))
+    return null;
+  if (typeof header === "string")
+    return root.querySelector(header);
+  return root.querySelector(stickyOffsetHeaderSelector);
+}
+function resolveTarget(header, target) {
+  if (target !== undefined)
+    return target;
+  const page = header.closest(".hraness-marketing-page");
+  return page ?? header.ownerDocument.documentElement;
+}
+function measureStickyOffset(header) {
+  return `${header.getBoundingClientRect().height}px`;
+}
+function publishStickyOffset(header, target) {
+  const value = measureStickyOffset(header);
+  resolveTarget(header, target).style.setProperty(stickyOffsetCustomProperty, value);
+  return value;
+}
+function syncStickyOffset(options = {}) {
+  const document = typeof options.header === "object" ? options.header.ownerDocument : ownerDocumentOf(options.root);
+  if (document === undefined)
+    return () => {};
+  const root = options.root ?? document;
+  const header = resolveHeader(root, options.header);
+  if (header === null)
+    return () => {};
+  const target = resolveTarget(header, options.target);
+  const publish = () => {
+    publishStickyOffset(header, target);
+  };
+  publish();
+  const view = document.defaultView;
+  if (view === null || typeof view.ResizeObserver !== "function") {
+    return () => {
+      target.style.removeProperty(stickyOffsetCustomProperty);
+    };
+  }
+  const observer = new view.ResizeObserver(publish);
+  observer.observe(header);
+  return () => {
+    observer.disconnect();
+    target.style.removeProperty(stickyOffsetCustomProperty);
+  };
+}
+
+// src/browser/index.ts
+var defaultDesignTheme2 = defaultDesignTheme;
+var designThemeLabel2 = designThemeLabel;
+var designThemes2 = designThemes;
+var designThemeStorageKey2 = designThemeStorageKey;
+var installAppearanceMenus2 = installAppearanceMenus;
+var isDesignTheme2 = isDesignTheme;
+var normalizeDesignTheme2 = normalizeDesignTheme;
+var resolveDesignTheme2 = resolveDesignTheme;
+export {
+  syncStickyOffset,
+  stickyOffsetHeaderSelector,
+  stickyOffsetCustomProperty,
+  shareFileNatively,
+  resolveDesignTheme2 as resolveDesignTheme,
+  resolveDesignPalettePreference,
+  publishStickyOffset,
+  parseDesignPalettePreference,
+  normalizeDesignTheme2 as normalizeDesignTheme,
+  normalizeDesignPalettePreference,
+  measureStickyOffset,
+  isDesignTheme2 as isDesignTheme,
+  installAppearanceMenus2 as installAppearanceMenus,
+  initDesignPalette,
+  downloadBlob,
+  designThemes2 as designThemes,
+  designThemeStorageKey2 as designThemeStorageKey,
+  designThemeLabel2 as designThemeLabel,
+  designPaletteStorageKey,
+  designPaletteSnapshot,
+  defaultDesignTheme2 as defaultDesignTheme,
+  defaultDesignPalettePreference,
+  copyTextToClipboard,
+  canShareFileNatively,
+  buildXShareIntentUrl,
+  buildLinkedInShareIntentUrl,
+  buildBlueskyShareIntentUrl,
+  attachStatusPage,
+  attachStatusField,
+  attachHeroLight,
+  attachFoil
+};