@signal9/era-ui 29.0.0 → 30.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [30.0.0](https://github.com/sig-nine/era-ui/compare/v29.0.0...v30.0.0) (2026-08-15)
+
+### ⚠ BREAKING CHANGES
+
+* **notes:** createOverlayHost(from) now requires the element the overlay
+belongs to. It is internal to the notes app, which is not published.
+
+Claude-Session: https://claude.ai/code/session_011FjvULDrmxd61z2xUnYs6Z
+
+### Bug Fixes
+
+* **apps:** an icon beside a label goes in lead, not in children ([15d0589](https://github.com/sig-nine/era-ui/commit/15d0589045929c11b4dd6a29ef4f8a570c9a0156))
+* **notes:** the editor's overlay hosts carry the axes of the editor ([6a630c1](https://github.com/sig-nine/era-ui/commit/6a630c12d5847490305f279c73800e63094e5f8b))
+
 ## [29.0.0](https://github.com/sig-nine/era-ui/compare/v28.0.0...v29.0.0) (2026-08-15)
 
 ### ⚠ BREAKING CHANGES

package/dist/ui/provider/axes-at.d.ts

@@ -0,0 +1,16 @@
+export type Axes = {
+    /** Attributes to stamp on the receiving element. */
+    attrs: Record<string, string>;
+    /** `dark` / `light` when a scoped one is in force, else undefined. */
+    scheme?: 'dark' | 'light';
+};
+/** Read the axes governing `el`. Safe on null and on a detached node. */
+export declare function axesAt(el: Element | null | undefined): Axes;
+/**
+ * Stamp the axes governing `from` onto `to`.
+ *
+ * For hosts built by hand rather than rendered by a component, where there is
+ * no context to relay through and no markup to spread onto — the host has no
+ * other way to know where it logically belongs.
+ */
+export declare function carryAxes(to: HTMLElement, from: Element | null | undefined): void;

package/dist/ui/provider/axes-at.js

@@ -0,0 +1,65 @@
+import { axisKeys, axisRegistry } from './axes.js';
+/**
+ * THE AXES IN FORCE AT AN ELEMENT — the one implementation of that question.
+ *
+ * Anything that moves content to `document.body` has to answer it, because
+ * everything era styles with is inherited: the density ladder and roundness
+ * scale are custom properties on `*`, a surface re-baselines a token contract,
+ * the font axis publishes an inherited stack. Content that leaves its subtree
+ * stops inheriting from it and starts inheriting from `:root`.
+ *
+ * AxisRelay had this logic and could not share it. It lives in a `.svelte.ts`
+ * module because it holds `$state`, so a plain `.ts` consumer — the notes
+ * editor's overlay hosts, which are created by hand rather than by a component
+ * — could not import it without pulling runes into a non-rune module. So the
+ * notes app grew its own copy, and the copy was never written: the hosts simply
+ * did not carry the axes, and an editor inside `data-surface="flat"` opened a
+ * bevelled slash menu and bubble toolbar. Reported by signalnine.org, running
+ * flat demos inside a bevel site.
+ *
+ * Runes-free on purpose, for exactly the reason ancestor-path.ts is: the moment
+ * a shared truth can only be imported by components, the non-component callers
+ * reimplement it or skip it.
+ *
+ * NEAREST ANCESTOR PER AXIS, INDEPENDENTLY. A subtree can override density
+ * without touching surface, and `closest()` answers each question separately —
+ * which is what makes the axes orthogonal rather than a bundle.
+ */
+/** Theme is not an axis in the registry (no picker contract), but it inherits
+ *  the same way and breaks across a portal the same way. */
+const THEME_ATTR = 'data-theme';
+/** The colour-scheme pair is a CLASS, not an attribute, so it travels apart. */
+const SCHEME_CLASSES = ['dark', 'light'];
+/** Read the axes governing `el`. Safe on null and on a detached node. */
+export function axesAt(el) {
+    if (!el?.closest)
+        return { attrs: {} };
+    const attrs = {};
+    for (const key of axisKeys) {
+        const attr = axisRegistry[key].attr;
+        const value = el.closest(`[${attr}]`)?.getAttribute(attr);
+        if (value)
+            attrs[attr] = value;
+    }
+    const theme = el.closest(`[${THEME_ATTR}]`)?.getAttribute(THEME_ATTR);
+    if (theme)
+        attrs[THEME_ATTR] = theme;
+    const schemeHost = el.closest('.dark, .light');
+    const scheme = SCHEME_CLASSES.find((c) => schemeHost?.classList.contains(c));
+    return { attrs, scheme };
+}
+/**
+ * Stamp the axes governing `from` onto `to`.
+ *
+ * For hosts built by hand rather than rendered by a component, where there is
+ * no context to relay through and no markup to spread onto — the host has no
+ * other way to know where it logically belongs.
+ */
+export function carryAxes(to, from) {
+    const { attrs, scheme } = axesAt(from);
+    for (const [attr, value] of Object.entries(attrs))
+        to.setAttribute(attr, value);
+    to.classList.remove(...SCHEME_CLASSES);
+    if (scheme)
+        to.classList.add(scheme);
+}

package/dist/ui/provider/axis-relay.svelte.js

@@ -1,5 +1,5 @@
 import { getContext, hasContext, setContext } from 'svelte';
-import { axisKeys, axisRegistry } from './axes.js';
+import { axesAt } from './axes-at.js';
 /*
  * CARRYING THE AXES ACROSS A PORTAL.
  *
@@ -39,9 +39,6 @@ import { axisKeys, axisRegistry } from './axes.js';
  * absence is a null, not a crash.
  */
 const KEY = Symbol('era.axis-relay');
-/** The axis attributes, plus the theme pair, which is not in the axis registry. */
-const THEME_ATTR = 'data-theme';
-const SCHEME_CLASSES = ['dark', 'light'];
 export class AxisRelay {
     /** Attributes to stamp on portalled content. Empty until a capture runs. */
     attrs = $state({});
@@ -71,22 +68,12 @@ export class AxisRelay {
         const el = this.#anchor;
         if (!el?.closest)
             return;
-        const next = {};
-        for (const key of axisKeys) {
-            const attr = axisRegistry[key].attr;
-            const value = el.closest(`[${attr}]`)?.getAttribute(attr);
-            if (value)
-                next[attr] = value;
-        }
-        // Theme is not an axis in the registry (it has no picker contract), but it
-        // is inherited the same way and breaks across a portal the same way.
-        const theme = el.closest(`[${THEME_ATTR}]`)?.getAttribute(THEME_ATTR);
-        if (theme)
-            next[THEME_ATTR] = theme;
-        this.attrs = next;
-        // The colour-scheme pair is a CLASS, not an attribute, so it is separate.
-        const schemeHost = el.closest('.dark, .light');
-        this.scheme = SCHEME_CLASSES.find((c) => schemeHost?.classList.contains(c)) ?? undefined;
+        // The reading itself lives in axes-at.ts, runes-free, because the notes
+        // editor's hand-built overlay hosts need the same answer from a plain .ts
+        // module and cannot import this one. They had gone without it.
+        const { attrs, scheme } = axesAt(el);
+        this.attrs = attrs;
+        this.scheme = scheme;
     }
     /** The class string portalled content should carry. */
     get schemeClass() {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "29.0.0",
+	"version": "30.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",