waybetter 0.1.1 → 0.6.0

package/dist/runtime/styles.js

@@ -0,0 +1,81 @@
+// Styles for roots the runtime (or a plugin) creates: a constructable stylesheet adopted by the
+// shadow root (or document) instead of a `<style>` element.
+//
+// Why: a site's Content-Security-Policy governs `<style>` elements (a `style-src` with a nonce or
+// hash and no 'unsafe-inline' refuses them, in shadow roots too), but not constructed sheets
+// (`new CSSStyleSheet()` + `replaceSync`), which are also parsed once instead of per element and
+// stay adopted when their host is moved to another parent in the same document (a modal
+// re-rendered by the site, a card lifted into the top layer). Engines without constructable
+// sheets (or a root from another realm that refuses the sheet) get the `<style>` element.
+const DOCUMENT_NODE = 9;
+const isDocument = (root) => root.nodeType === DOCUMENT_NODE;
+const documentOf = (root) => (isDocument(root) ? root : root.ownerDocument);
+/** A sheet built in `root`'s own realm (a sheet from another document cannot be adopted). */
+function construct(root, css) {
+    if (!root.adoptedStyleSheets)
+        return null;
+    const Sheet = documentOf(root).defaultView?.CSSStyleSheet;
+    if (typeof Sheet !== 'function' || typeof Sheet.prototype.replaceSync !== 'function')
+        return null;
+    try {
+        const sheet = new Sheet();
+        sheet.replaceSync(css);
+        return sheet;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Styles `root` with `css`. Adopted sheets come after the root's `<style>` elements in the cascade
+ * (like a `<style>` appended last), and several calls stack in call order.
+ */
+export function adoptStyles(root, css) {
+    const target = root;
+    const sheet = construct(target, css);
+    if (sheet) {
+        let on = false;
+        const attach = () => {
+            try {
+                target.adoptedStyleSheets = [...(target.adoptedStyleSheets ?? []), sheet];
+                on = true;
+            }
+            catch {
+                on = false;
+            }
+        };
+        attach();
+        if (on) {
+            return {
+                sheet,
+                adopted: true,
+                update(next) { try {
+                    sheet.replaceSync(next);
+                }
+                catch { /* Keeps the last good rules. */ } },
+                remove() {
+                    if (!on)
+                        return;
+                    on = false;
+                    try {
+                        target.adoptedStyleSheets = (target.adoptedStyleSheets ?? []).filter(item => item !== sheet);
+                    }
+                    catch { /* Root gone. */ }
+                },
+            };
+        }
+    }
+    // Fallback: a `<style>` element as the root's last child (a document: its <head>).
+    const doc = documentOf(target);
+    const style = doc.createElement('style');
+    style.textContent = css;
+    const parent = isDocument(target) ? (target.head ?? target.documentElement) : target;
+    parent.appendChild(style);
+    return {
+        get sheet() { return style.sheet; },
+        adopted: false,
+        update(next) { style.textContent = next; },
+        remove() { style.remove(); },
+    };
+}
+//# sourceMappingURL=styles.js.map

package/dist/runtime/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../runtime/src/styles.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,4DAA4D;AAC5D,EAAE;AACF,kGAAkG;AAClG,6FAA6F;AAC7F,iGAAiG;AACjG,wFAAwF;AACxF,4FAA4F;AAC5F,0FAA0F;AAe1F,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,UAAU,GAAG,CAAC,IAAe,EAAgC,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,aAAa,CAAC;AACtG,MAAM,UAAU,GAAG,CAAC,IAAe,EAAY,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,IAAmB,CAAC,aAAa,CAAC,CAAC;AAEjH,6FAA6F;AAC7F,SAAS,SAAS,CAAC,IAAe,EAAE,GAAW;IAC7C,IAAI,CAAC,IAAI,CAAC,kBAAkB;QAAE,OAAO,IAAI,CAAC;IAC1C,MAAM,KAAK,GAAI,UAAU,CAAC,IAAI,CAAC,CAAC,WAAmD,EAAE,aAAa,CAAC;IACnG,IAAI,OAAO,KAAK,KAAK,UAAU,IAAI,OAAO,KAAK,CAAC,SAAS,CAAC,WAAW,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAClG,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;QAC1B,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvB,OAAO,KAAK,CAAC;IACf,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,IAA2B,EAAE,GAAW;IAClE,MAAM,MAAM,GAAG,IAAiB,CAAC;IACjC,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,EAAE,GAAG,KAAK,CAAC;QACf,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC;gBACH,MAAM,CAAC,kBAAkB,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;gBAC1E,EAAE,GAAG,IAAI,CAAC;YACZ,CAAC;YAAC,MAAM,CAAC;gBAAC,EAAE,GAAG,KAAK,CAAC;YAAC,CAAC;QACzB,CAAC,CAAC;QACF,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,EAAE,CAAC;YACP,OAAO;gBACL,KAAK;gBACL,OAAO,EAAE,IAAI;gBACb,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC;oBAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBAAC,CAAC;gBAAC,MAAM,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,CAAC;gBAC5F,MAAM;oBACJ,IAAI,CAAC,EAAE;wBAAE,OAAO;oBAChB,EAAE,GAAG,KAAK,CAAC;oBACX,IAAI,CAAC;wBAAC,MAAM,CAAC,kBAAkB,GAAG,CAAC,MAAM,CAAC,kBAAkB,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;oBAAC,CAAC;oBAAC,MAAM,CAAC,CAAC,gBAAgB,CAAC,CAAC;gBAClI,CAAC;aACF,CAAC;QACJ,CAAC;IACH,CAAC;IACD,mFAAmF;IACnF,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;IAC/B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,MAAM,MAAM,GAAS,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAC3F,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,OAAO;QACL,IAAI,KAAK,KAAK,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QACnC,OAAO,EAAE,KAAK;QACd,MAAM,CAAC,IAAI,IAAI,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;QAC1C,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KAC7B,CAAC;AACJ,CAAC","sourcesContent":["// Styles for roots the runtime (or a plugin) creates: a constructable stylesheet adopted by the\n// shadow root (or document) instead of a `<style>` element.\n//\n// Why: a site's Content-Security-Policy governs `<style>` elements (a `style-src` with a nonce or\n// hash and no 'unsafe-inline' refuses them, in shadow roots too), but not constructed sheets\n// (`new CSSStyleSheet()` + `replaceSync`), which are also parsed once instead of per element and\n// stay adopted when their host is moved to another parent in the same document (a modal\n// re-rendered by the site, a card lifted into the top layer). Engines without constructable\n// sheets (or a root from another realm that refuses the sheet) get the `<style>` element.\n\nexport type RootStyles = {\n  /** The live sheet (insertRule/deleteRule work on it), or null when nothing could be parsed. */\n  readonly sheet: CSSStyleSheet | null;\n  /** True when the sheet is adopted (CSP-proof); false for the `<style>` fallback. */\n  readonly adopted: boolean;\n  /** Replaces the rules. */\n  update(css: string): void;\n  /** Takes the rules off the root (idempotent). */\n  remove(): void;\n};\n\ntype StyleRoot = (ShadowRoot | Document) & { adoptedStyleSheets?: CSSStyleSheet[] };\n\nconst DOCUMENT_NODE = 9;\nconst isDocument = (root: StyleRoot): root is Document & StyleRoot => root.nodeType === DOCUMENT_NODE;\nconst documentOf = (root: StyleRoot): Document => (isDocument(root) ? root : (root as ShadowRoot).ownerDocument);\n\n/** A sheet built in `root`'s own realm (a sheet from another document cannot be adopted). */\nfunction construct(root: StyleRoot, css: string): CSSStyleSheet | null {\n  if (!root.adoptedStyleSheets) return null;\n  const Sheet = (documentOf(root).defaultView as (Window & typeof globalThis) | null)?.CSSStyleSheet;\n  if (typeof Sheet !== 'function' || typeof Sheet.prototype.replaceSync !== 'function') return null;\n  try {\n    const sheet = new Sheet();\n    sheet.replaceSync(css);\n    return sheet;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Styles `root` with `css`. Adopted sheets come after the root's `<style>` elements in the cascade\n * (like a `<style>` appended last), and several calls stack in call order.\n */\nexport function adoptStyles(root: ShadowRoot | Document, css: string): RootStyles {\n  const target = root as StyleRoot;\n  const sheet = construct(target, css);\n  if (sheet) {\n    let on = false;\n    const attach = () => {\n      try {\n        target.adoptedStyleSheets = [...(target.adoptedStyleSheets ?? []), sheet];\n        on = true;\n      } catch { on = false; }\n    };\n    attach();\n    if (on) {\n      return {\n        sheet,\n        adopted: true,\n        update(next) { try { sheet.replaceSync(next); } catch { /* Keeps the last good rules. */ } },\n        remove() {\n          if (!on) return;\n          on = false;\n          try { target.adoptedStyleSheets = (target.adoptedStyleSheets ?? []).filter(item => item !== sheet); } catch { /* Root gone. */ }\n        },\n      };\n    }\n  }\n  // Fallback: a `<style>` element as the root's last child (a document: its <head>).\n  const doc = documentOf(target);\n  const style = doc.createElement('style');\n  style.textContent = css;\n  const parent: Node = isDocument(target) ? (target.head ?? target.documentElement) : target;\n  parent.appendChild(style);\n  return {\n    get sheet() { return style.sheet; },\n    adopted: false,\n    update(next) { style.textContent = next; },\n    remove() { style.remove(); },\n  };\n}\n"]}

package/dist/runtime/textNet.d.ts

@@ -0,0 +1,15 @@
+export type TextNetOptions = {
+    /** Exact original text -> replacement. A text that is not a key is left alone. */
+    map: ReadonlyMap<string, string>;
+    /** Attributes to cover (default `aria-label`, `placeholder`, `title`). */
+    attributes?: readonly string[];
+    /** Elements whose content is never touched (default: scripts, styles, editable text). */
+    skip?: string;
+};
+export type TextNetHandle = {
+    /** Text nodes and attributes currently replaced. */
+    count(): number;
+    /** Restores every node and attribute to the site's own value and stops observing. */
+    dispose(): void;
+};
+export declare function installTextNet(win: Window, options: TextNetOptions): TextNetHandle;

package/dist/runtime/textNet.js

@@ -0,0 +1,131 @@
+// A DOM safety net for strings a catalog hook cannot reach (published as
+// `waybetter/runtime/textNet`): labels the server sends already worded, or text that is painted
+// before the hook can act. It replaces exact texts in text nodes and in `aria-label`,
+// `placeholder` and `title`, keeps the site's own value per node, and puts everything back when it
+// is disposed. It is secondary to a catalog hook: it cannot see parameters or plural forms, and a
+// rendered text only maps back to one key in a language without homonyms.
+//
+// Text is written through `nodeValue` / `setAttribute` (never `textContent` or HTML), so the site's
+// framework keeps owning its nodes; when the site rewrites a node, the net looks at it again.
+const DEFAULT_ATTRIBUTES = ['aria-label', 'placeholder', 'title'];
+const DEFAULT_SKIP = 'script, style, noscript, textarea, [contenteditable=""], [contenteditable="true"]';
+const TEXT_NODE = 3;
+const ELEMENT_NODE = 1;
+const SHOW_TEXT = 4;
+export function installTextNet(win, options) {
+    const doc = win.document;
+    const attributes = options.attributes ?? DEFAULT_ATTRIBUTES;
+    const skip = options.skip ?? DEFAULT_SKIP;
+    const map = options.map;
+    /** The site's own value and ours, per text node. */
+    const texts = new WeakMap();
+    /** The same per element and attribute. */
+    const attrs = new WeakMap();
+    let count = 0;
+    let active = true;
+    const skipped = (element) => !!element && !!skip && !!element.closest(skip);
+    const text = (node) => {
+        const value = node.nodeValue ?? '';
+        const kept = texts.get(node);
+        if (kept) {
+            if (value === kept.applied)
+                return;
+            // The site wrote the node again: what it wrote is the new original.
+            texts.delete(node);
+            count -= 1;
+        }
+        const next = map.get(value);
+        if (next === undefined || next === value || skipped(node.parentElement))
+            return;
+        texts.set(node, { original: value, applied: next });
+        count += 1;
+        node.nodeValue = next;
+    };
+    const attribute = (element, name) => {
+        const value = element.getAttribute(name);
+        const kept = attrs.get(element)?.get(name);
+        if (kept) {
+            if (value === kept.applied)
+                return;
+            attrs.get(element).delete(name);
+            count -= 1;
+        }
+        if (value === null)
+            return;
+        const next = map.get(value);
+        if (next === undefined || next === value || skipped(element))
+            return;
+        let own = attrs.get(element);
+        if (!own)
+            attrs.set(element, own = new Map());
+        own.set(name, { original: value, applied: next });
+        count += 1;
+        element.setAttribute(name, next);
+    };
+    const sweep = (root) => {
+        if (root.nodeType === TEXT_NODE) {
+            text(root);
+            return;
+        }
+        if (root.nodeType !== ELEMENT_NODE)
+            return;
+        const element = root;
+        const walker = doc.createTreeWalker(element, SHOW_TEXT);
+        while (walker.nextNode())
+            text(walker.currentNode);
+        for (const name of attributes) {
+            if (element.hasAttribute(name))
+                attribute(element, name);
+            for (const child of element.querySelectorAll(`[${name}]`))
+                attribute(child, name);
+        }
+    };
+    const observer = new win.MutationObserver(records => {
+        if (!active)
+            return;
+        for (const record of records) {
+            if (record.type === 'characterData')
+                text(record.target);
+            else if (record.type === 'attributes') {
+                if (record.attributeName)
+                    attribute(record.target, record.attributeName);
+            }
+            else
+                for (const node of record.addedNodes)
+                    sweep(node);
+        }
+    });
+    if (map.size) {
+        if (doc.documentElement)
+            sweep(doc.documentElement);
+        observer.observe(doc, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: [...attributes] });
+    }
+    return {
+        count: () => count,
+        dispose() {
+            if (!active)
+                return;
+            active = false;
+            observer.disconnect();
+            if (!doc.documentElement)
+                return;
+            const walker = doc.createTreeWalker(doc.documentElement, SHOW_TEXT);
+            while (walker.nextNode()) {
+                const node = walker.currentNode;
+                const kept = texts.get(node);
+                if (kept && node.nodeValue === kept.applied)
+                    node.nodeValue = kept.original;
+                texts.delete(node);
+            }
+            for (const name of attributes) {
+                for (const element of doc.querySelectorAll(`[${name}]`)) {
+                    const kept = attrs.get(element)?.get(name);
+                    if (kept && element.getAttribute(name) === kept.applied)
+                        element.setAttribute(name, kept.original);
+                }
+            }
+            count = 0;
+        },
+    };
+}
+//# sourceMappingURL=textNet.js.map

package/dist/runtime/textNet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textNet.js","sourceRoot":"","sources":["../../../runtime/src/textNet.ts"],"names":[],"mappings":"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","sourcesContent":["// A DOM safety net for strings a catalog hook cannot reach (published as\n// `waybetter/runtime/textNet`): labels the server sends already worded, or text that is painted\n// before the hook can act. It replaces exact texts in text nodes and in `aria-label`,\n// `placeholder` and `title`, keeps the site's own value per node, and puts everything back when it\n// is disposed. It is secondary to a catalog hook: it cannot see parameters or plural forms, and a\n// rendered text only maps back to one key in a language without homonyms.\n//\n// Text is written through `nodeValue` / `setAttribute` (never `textContent` or HTML), so the site's\n// framework keeps owning its nodes; when the site rewrites a node, the net looks at it again.\n\nexport type TextNetOptions = {\n  /** Exact original text -> replacement. A text that is not a key is left alone. */\n  map: ReadonlyMap<string, string>;\n  /** Attributes to cover (default `aria-label`, `placeholder`, `title`). */\n  attributes?: readonly string[];\n  /** Elements whose content is never touched (default: scripts, styles, editable text). */\n  skip?: string;\n};\n\nexport type TextNetHandle = {\n  /** Text nodes and attributes currently replaced. */\n  count(): number;\n  /** Restores every node and attribute to the site's own value and stops observing. */\n  dispose(): void;\n};\n\nconst DEFAULT_ATTRIBUTES = ['aria-label', 'placeholder', 'title'];\nconst DEFAULT_SKIP = 'script, style, noscript, textarea, [contenteditable=\"\"], [contenteditable=\"true\"]';\nconst TEXT_NODE = 3;\nconst ELEMENT_NODE = 1;\nconst SHOW_TEXT = 4;\n\nexport function installTextNet(win: Window, options: TextNetOptions): TextNetHandle {\n  const doc = win.document;\n  const attributes = options.attributes ?? DEFAULT_ATTRIBUTES;\n  const skip = options.skip ?? DEFAULT_SKIP;\n  const map = options.map;\n  /** The site's own value and ours, per text node. */\n  const texts = new WeakMap<Node, { original: string; applied: string }>();\n  /** The same per element and attribute. */\n  const attrs = new WeakMap<Element, Map<string, { original: string; applied: string }>>();\n  let count = 0;\n  let active = true;\n\n  const skipped = (element: Element | null) => !!element && !!skip && !!element.closest(skip);\n\n  const text = (node: Node) => {\n    const value = node.nodeValue ?? '';\n    const kept = texts.get(node);\n    if (kept) {\n      if (value === kept.applied) return;\n      // The site wrote the node again: what it wrote is the new original.\n      texts.delete(node);\n      count -= 1;\n    }\n    const next = map.get(value);\n    if (next === undefined || next === value || skipped(node.parentElement)) return;\n    texts.set(node, { original: value, applied: next });\n    count += 1;\n    node.nodeValue = next;\n  };\n\n  const attribute = (element: Element, name: string) => {\n    const value = element.getAttribute(name);\n    const kept = attrs.get(element)?.get(name);\n    if (kept) {\n      if (value === kept.applied) return;\n      attrs.get(element)!.delete(name);\n      count -= 1;\n    }\n    if (value === null) return;\n    const next = map.get(value);\n    if (next === undefined || next === value || skipped(element)) return;\n    let own = attrs.get(element);\n    if (!own) attrs.set(element, own = new Map());\n    own.set(name, { original: value, applied: next });\n    count += 1;\n    element.setAttribute(name, next);\n  };\n\n  const sweep = (root: Node) => {\n    if (root.nodeType === TEXT_NODE) { text(root); return; }\n    if (root.nodeType !== ELEMENT_NODE) return;\n    const element = root as Element;\n    const walker = doc.createTreeWalker(element, SHOW_TEXT);\n    while (walker.nextNode()) text(walker.currentNode);\n    for (const name of attributes) {\n      if (element.hasAttribute(name)) attribute(element, name);\n      for (const child of element.querySelectorAll(`[${name}]`)) attribute(child, name);\n    }\n  };\n\n  const observer = new (win as unknown as { MutationObserver: typeof MutationObserver }).MutationObserver(records => {\n    if (!active) return;\n    for (const record of records) {\n      if (record.type === 'characterData') text(record.target);\n      else if (record.type === 'attributes') { if (record.attributeName) attribute(record.target as Element, record.attributeName); }\n      else for (const node of record.addedNodes) sweep(node);\n    }\n  });\n  if (map.size) {\n    if (doc.documentElement) sweep(doc.documentElement);\n    observer.observe(doc, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: [...attributes] });\n  }\n\n  return {\n    count: () => count,\n    dispose() {\n      if (!active) return;\n      active = false;\n      observer.disconnect();\n      if (!doc.documentElement) return;\n      const walker = doc.createTreeWalker(doc.documentElement, SHOW_TEXT);\n      while (walker.nextNode()) {\n        const node = walker.currentNode;\n        const kept = texts.get(node);\n        if (kept && node.nodeValue === kept.applied) node.nodeValue = kept.original;\n        texts.delete(node);\n      }\n      for (const name of attributes) {\n        for (const element of doc.querySelectorAll(`[${name}]`)) {\n          const kept = attrs.get(element)?.get(name);\n          if (kept && element.getAttribute(name) === kept.applied) element.setAttribute(name, kept.original);\n        }\n      }\n      count = 0;\n    },\n  };\n}\n"]}

package/dist/runtime/themeApi.d.ts

@@ -0,0 +1,121 @@
+export type ThemeMode = 'light' | 'dark';
+/** Every color role a theme has, resolved (derived roles filled in, legibility enforced). */
+export type ResolvedColors = {
+    /** The main surface behind content (the site's column background). */
+    bg: string;
+    /** A raised surface (cards, inputs). */
+    surface: string;
+    /** Hover / selected surface, one step above `surface`. */
+    elevated: string;
+    border: string;
+    text: string;
+    /** Secondary text. */
+    muted: string;
+    accent: string;
+    /** Readable text on `accent`. */
+    onAccent: string;
+    /** The site's filled primary button and its label. */
+    inverse: string;
+    onInverse: string;
+    /** The canvas behind the columns (equals `bg` unless the theme paints a page). */
+    page: string;
+};
+export type ResolvedTheme = {
+    /** Theme id (`x` for the site's own look). */
+    id: string;
+    name: string;
+    mode: ThemeMode;
+    /** True when the site's own colors are shown (no theme colors). */
+    siteDefault: boolean;
+    colors: ResolvedColors;
+    /** Card / dialog corner radius in px. */
+    radius: number;
+    /** Button corner radius in px (9999 = pill). */
+    buttonRadius: number;
+    /** CSS `font-family` stack of the interface. */
+    font: string;
+    /**
+     * Which font goes where: every role resolved (a role that inherits carries the stack it inherits).
+     * Always present after `normalizeResolved`; adapters without font roles may leave it out.
+     */
+    fonts?: ResolvedFonts;
+};
+/**
+ * Font roles: `interface` (the site's UI), `post` (main content text), `heading` (names and
+ * headings), `numbers` (counts), `mono` (code), `chrome` (the app's own window: tabs, address bar,
+ * panel) and `dialog` (plugin dialogs and toasts from the UI kit).
+ */
+export declare const FONT_ROLE_NAMES: readonly ["interface", "post", "heading", "numbers", "mono", "chrome", "dialog"];
+export type FontRoleName = typeof FONT_ROLE_NAMES[number];
+export type ResolvedFont = {
+    /** CSS `font-family` stack. */
+    stack: string;
+    /** Weight the role asks for, or null to keep the text's own. */
+    weight: number | null;
+    /** Size relative to the site's (1 = unchanged). */
+    size: number;
+    /** Letter spacing in em, or null to keep the text's own. */
+    tracking: number | null;
+    /** Tabular (fixed-width) figures. */
+    tabular: boolean;
+    /** True when the role inherits its family from another role or the site. */
+    inherited: boolean;
+};
+export type ResolvedFonts = Record<FontRoleName, ResolvedFont>;
+/** Monospaced families, in order: what a `mono` role that inherits (or a source without fonts) gets. */
+export declare const MONO_FAMILIES: string[];
+export declare const MONO_FONT: string;
+/** What a site adapter provides: the current resolved theme and change notifications. */
+export type ThemeSource = {
+    current(): ResolvedTheme | null;
+    onChange(listener: () => void): () => void;
+};
+export type ThemeApi = {
+    /** The active theme, resolved. A frozen snapshot: call again after `onChange`. */
+    current(): ResolvedTheme;
+    /** Calls `listener(theme)` after the theme (or the site's light/dark mode) changes. Returns a dispose. */
+    onChange(listener: (theme: ResolvedTheme) => void): () => void;
+};
+/** Where the theme file JSON Schema is published with the `waybetter` npm package (`"$schema"` in theme files). */
+export declare const THEME_SCHEMA_URL = "https://unpkg.com/waybetter/theme.schema.json";
+export declare const FALLBACK_FONT = "system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
+/** `#rrggbb` → [r, g, b]. */
+export declare function hexToRgb(hex: string): [number, number, number];
+/** WCAG relative luminance of `#rrggbb`. */
+export declare function relativeLuminance(hex: string): number;
+/** WCAG contrast ratio of two `#rrggbb` colors (1–21). */
+export declare function contrastRatio(a: string, b: string): number;
+/** White when it reaches 4.5:1 on `hex`, otherwise whichever of black and white reads better. */
+export declare function readableOn(hex: string): string;
+/** `rgb(…)` / `rgba(…)` / `#rgb` / `#rrggbb` to `#rrggbb`; null when it is transparent or unparsable. */
+export declare function toHex(value: string | null | undefined): string | null;
+/** `a` moved toward `b` by `t` (0–1), per channel. */
+export declare function mix(a: string, b: string, t: number): string;
+/**
+ * A complete resolved theme from a few page colors (background, text, accent), for sites or moments
+ * without a theme engine. Surfaces, border and muted text sit between background and text.
+ */
+export declare function themeFromColors(bg: string, text: string, accent: string, extra?: Partial<Omit<ResolvedTheme, 'colors'>>): ResolvedTheme;
+/** The page's own colors (computed body background and text), used when no theme source exists. */
+export declare function readPageTheme(win: Window, accent?: string): ResolvedTheme;
+/** Fills in any role a source left out and freezes the result. */
+export declare function normalizeResolved(theme: ResolvedTheme): ResolvedTheme;
+/** Every role filled in: missing roles inherit the interface font (`mono` a monospaced stack). */
+export declare function normalizeFonts(fonts: Partial<Record<FontRoleName, Partial<ResolvedFont>>> | undefined, font: string): ResolvedFonts;
+/**
+ * The theme as CSS custom properties: `--wb-bg`, `--wb-surface`, `--wb-elevated`, `--wb-border`,
+ * `--wb-text`, `--wb-muted`, `--wb-accent`, `--wb-on-accent`, `--wb-inverse`, `--wb-on-inverse`,
+ * `--wb-page`, `--wb-radius`, `--wb-button-radius`, `--wb-font`, `--wb-mode` (`light`/`dark`), and
+ * one stack per font role: `--wb-font-interface`, `--wb-font-post`, `--wb-font-heading`,
+ * `--wb-font-numbers`, `--wb-font-mono`, `--wb-font-chrome`, `--wb-font-dialog`.
+ */
+export declare function themeVars(theme: ResolvedTheme): Record<string, string>;
+/** `:root{--wb-…}` for a `<style>` element (values come from a resolved theme, never raw input). */
+export declare function themeVarsCss(theme: ResolvedTheme, selector?: string): string;
+/** A stable key: equal keys mean nothing visible changed. */
+export declare const themeKey: (theme: ResolvedTheme) => string;
+/**
+ * `api.theme`. With a site `source` it reports the site's resolved theme (falling back to the page's
+ * computed colors while the source has none); without one, only the page's colors.
+ */
+export declare function createThemeApi(win: Window, source?: ThemeSource, fallbackAccent?: string): ThemeApi;

package/dist/runtime/themeApi.js

@@ -0,0 +1,220 @@
+// `api.theme`: the active theme as plain values, so plugins (and the UI kit) can match it. The site
+// adapter resolves its own theme document into a `ResolvedTheme` (colors by role, radius, font,
+// mode) and says when it changes; this module turns that into `--wb-*` CSS custom properties and
+// a small `current()` / `onChange()` API. When the site keeps its own colors (no theme, e.g. X
+// default), the adapter still resolves the site's palette, so plugins always see real colors.
+//
+// Pure except `createThemeApi` / `readPageTheme`, which read the page.
+/**
+ * Font roles: `interface` (the site's UI), `post` (main content text), `heading` (names and
+ * headings), `numbers` (counts), `mono` (code), `chrome` (the app's own window: tabs, address bar,
+ * panel) and `dialog` (plugin dialogs and toasts from the UI kit).
+ */
+export const FONT_ROLE_NAMES = ['interface', 'post', 'heading', 'numbers', 'mono', 'chrome', 'dialog'];
+/** Monospaced families, in order: what a `mono` role that inherits (or a source without fonts) gets. */
+export const MONO_FAMILIES = ['Cascadia Mono', 'SF Mono', 'Consolas', 'Menlo', 'ui-monospace', 'monospace'];
+export const MONO_FONT = MONO_FAMILIES.map(name => (/^(ui-monospace|monospace)$/.test(name) ? name : `"${name}"`)).join(', ');
+/** Where the theme file JSON Schema is published with the `waybetter` npm package (`"$schema"` in theme files). */
+export const THEME_SCHEMA_URL = 'https://unpkg.com/waybetter/theme.schema.json';
+export const FALLBACK_FONT = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+const HEX = /^#[0-9a-f]{6}$/i;
+/** `#rrggbb` → [r, g, b]. */
+export function hexToRgb(hex) {
+    const n = parseInt(hex.slice(1, 7), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+/** WCAG relative luminance of `#rrggbb`. */
+export function relativeLuminance(hex) {
+    const [r, g, b] = hexToRgb(hex).map(v => { const c = v / 255; return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** WCAG contrast ratio of two `#rrggbb` colors (1–21). */
+export function contrastRatio(a, b) {
+    const [x, y] = [relativeLuminance(a), relativeLuminance(b)].sort((m, n) => n - m);
+    return (x + 0.05) / (y + 0.05);
+}
+/** White when it reaches 4.5:1 on `hex`, otherwise whichever of black and white reads better. */
+export function readableOn(hex) {
+    const white = contrastRatio(hex, '#ffffff');
+    return white >= 4.5 || white >= contrastRatio(hex, '#000000') ? '#ffffff' : '#000000';
+}
+/** `rgb(…)` / `rgba(…)` / `#rgb` / `#rrggbb` to `#rrggbb`; null when it is transparent or unparsable. */
+export function toHex(value) {
+    const text = (value ?? '').trim();
+    if (HEX.test(text))
+        return text.toLowerCase();
+    const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(text);
+    if (short)
+        return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`.toLowerCase();
+    const match = /^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/.exec(text);
+    if (!match)
+        return null;
+    if (match[4] !== undefined && parseFloat(match[4]) === 0)
+        return null;
+    return `#${[match[1], match[2], match[3]].map(v => Math.min(255, Number(v)).toString(16).padStart(2, '0')).join('')}`;
+}
+/** `a` moved toward `b` by `t` (0–1), per channel. */
+export function mix(a, b, t) {
+    const [x, y] = [hexToRgb(a), hexToRgb(b)];
+    return `#${x.map((v, i) => Math.round(v + (y[i] - v) * t).toString(16).padStart(2, '0')).join('')}`;
+}
+/**
+ * A complete resolved theme from a few page colors (background, text, accent), for sites or moments
+ * without a theme engine. Surfaces, border and muted text sit between background and text.
+ */
+export function themeFromColors(bg, text, accent, extra = {}) {
+    const dark = relativeLuminance(bg) < relativeLuminance(text);
+    const colors = {
+        bg, text, accent,
+        surface: mix(bg, text, dark ? 0.05 : 0.03),
+        elevated: mix(bg, text, dark ? 0.1 : 0.07),
+        border: mix(bg, text, dark ? 0.2 : 0.15),
+        muted: mix(bg, text, 0.62),
+        onAccent: readableOn(accent),
+        inverse: text,
+        onInverse: bg,
+        page: bg,
+    };
+    return { id: 'page', name: 'Page colors', mode: dark ? 'dark' : 'light', siteDefault: true, radius: 16, buttonRadius: 9999, font: FALLBACK_FONT, ...extra, colors };
+}
+/** The page's own colors (computed body background and text), used when no theme source exists. */
+export function readPageTheme(win, accent = '#1d9bf0') {
+    let bg = null;
+    let text = null;
+    let font = '';
+    try {
+        const body = win.document.body;
+        if (body) {
+            const style = win.getComputedStyle(body);
+            bg = toHex(style.backgroundColor) ?? toHex(win.getComputedStyle(win.document.documentElement).backgroundColor);
+            text = toHex(style.color);
+            font = style.fontFamily;
+        }
+    }
+    catch { /* No layout yet. */ }
+    const dark = !!win.matchMedia?.('(prefers-color-scheme: dark)').matches;
+    bg ??= dark ? '#000000' : '#ffffff';
+    text ??= relativeLuminance(bg) < 0.2 ? '#e7e9ea' : '#0f1419';
+    if (contrastRatio(bg, text) < 3)
+        text = readableOn(bg);
+    return themeFromColors(bg, text, accent, font ? { font } : {});
+}
+/** Fills in any role a source left out and freezes the result. */
+export function normalizeResolved(theme) {
+    const bg = toHex(theme.colors?.bg) ?? '#ffffff';
+    let text = toHex(theme.colors?.text) ?? readableOn(bg);
+    if (contrastRatio(bg, text) < 3)
+        text = readableOn(bg);
+    const base = themeFromColors(bg, text, toHex(theme.colors?.accent) ?? '#1d9bf0');
+    const colors = { ...base.colors };
+    for (const key of Object.keys(colors)) {
+        const value = theme.colors?.[key];
+        if (key !== 'bg' && key !== 'text' && typeof value === 'string' && HEX.test(value))
+            colors[key] = value.toLowerCase();
+    }
+    if (!HEX.test(theme.colors.onAccent ?? ''))
+        colors.onAccent = readableOn(colors.accent);
+    const radius = Number.isFinite(theme.radius) ? Math.max(0, Math.min(28, theme.radius)) : 16;
+    const buttonRadius = Number.isFinite(theme.buttonRadius) ? Math.max(0, theme.buttonRadius) : 9999;
+    const font = theme.font || FALLBACK_FONT;
+    return Object.freeze({
+        id: String(theme.id || 'theme'), name: String(theme.name || ''), mode: theme.mode === 'light' ? 'light' : 'dark',
+        siteDefault: !!theme.siteDefault, radius, buttonRadius, font,
+        colors: Object.freeze(colors),
+        fonts: normalizeFonts(theme.fonts, font),
+    });
+}
+const cssSafe = (value) => value.replace(/[;{}<>\\]/g, '');
+const finite = (value, min, max) => typeof value === 'number' && Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : null;
+/** Every role filled in: missing roles inherit the interface font (`mono` a monospaced stack). */
+export function normalizeFonts(fonts, font) {
+    const out = {};
+    const base = fonts?.interface?.stack ? cssSafe(fonts.interface.stack) : font;
+    for (const role of FONT_ROLE_NAMES) {
+        const given = fonts?.[role];
+        const stack = given?.stack ? cssSafe(given.stack) : role === 'mono' ? MONO_FONT : base;
+        out[role] = Object.freeze({
+            stack,
+            weight: finite(given?.weight, 100, 900),
+            size: finite(given?.size, 0.5, 2) ?? 1,
+            tracking: finite(given?.tracking, -0.1, 0.2),
+            tabular: !!given?.tabular,
+            inherited: given ? !!given.inherited : true,
+        });
+    }
+    return Object.freeze(out);
+}
+const VAR_NAMES = {
+    bg: '--wb-bg', surface: '--wb-surface', elevated: '--wb-elevated', border: '--wb-border', text: '--wb-text', muted: '--wb-muted',
+    accent: '--wb-accent', onAccent: '--wb-on-accent', inverse: '--wb-inverse', onInverse: '--wb-on-inverse', page: '--wb-page',
+};
+/**
+ * The theme as CSS custom properties: `--wb-bg`, `--wb-surface`, `--wb-elevated`, `--wb-border`,
+ * `--wb-text`, `--wb-muted`, `--wb-accent`, `--wb-on-accent`, `--wb-inverse`, `--wb-on-inverse`,
+ * `--wb-page`, `--wb-radius`, `--wb-button-radius`, `--wb-font`, `--wb-mode` (`light`/`dark`), and
+ * one stack per font role: `--wb-font-interface`, `--wb-font-post`, `--wb-font-heading`,
+ * `--wb-font-numbers`, `--wb-font-mono`, `--wb-font-chrome`, `--wb-font-dialog`.
+ */
+export function themeVars(theme) {
+    const vars = {};
+    for (const [key, name] of Object.entries(VAR_NAMES))
+        vars[name] = theme.colors[key];
+    vars['--wb-radius'] = `${theme.radius}px`;
+    vars['--wb-button-radius'] = `${theme.buttonRadius}px`;
+    vars['--wb-font'] = theme.font;
+    const fonts = theme.fonts ?? normalizeFonts(undefined, theme.font);
+    for (const role of FONT_ROLE_NAMES)
+        vars[`--wb-font-${role}`] = fonts[role].stack;
+    vars['--wb-mode'] = theme.mode;
+    return vars;
+}
+/** `:root{--wb-…}` for a `<style>` element (values come from a resolved theme, never raw input). */
+export function themeVarsCss(theme, selector = ':root') {
+    const safe = (value) => value.replace(/[;{}<>\\]/g, '');
+    return `${selector}{${Object.entries(themeVars(theme)).map(([name, value]) => `${name}:${safe(value)}`).join(';')}}`;
+}
+/** A stable key: equal keys mean nothing visible changed. */
+export const themeKey = (theme) => JSON.stringify(theme);
+/**
+ * `api.theme`. With a site `source` it reports the site's resolved theme (falling back to the page's
+ * computed colors while the source has none); without one, only the page's colors.
+ */
+export function createThemeApi(win, source, fallbackAccent) {
+    const report = (error) => console.error('[wayBetter] theme listener failed', error);
+    const current = () => {
+        let resolved = null;
+        try {
+            resolved = source?.current() ?? null;
+        }
+        catch (error) {
+            report(error);
+        }
+        return normalizeResolved(resolved ?? readPageTheme(win, fallbackAccent));
+    };
+    return Object.freeze({
+        current,
+        onChange(listener) {
+            if (!source)
+                return () => { };
+            let last = '';
+            try {
+                last = themeKey(current());
+            }
+            catch { /* Reported by current(). */ }
+            return source.onChange(() => {
+                const next = current();
+                const key = themeKey(next);
+                if (key === last)
+                    return;
+                last = key;
+                try {
+                    listener(next);
+                }
+                catch (error) {
+                    report(error);
+                }
+            });
+        },
+    });
+}
+//# sourceMappingURL=themeApi.js.map