@signal9/era-ui 12.1.2 → 13.0.0

package/dist/generated-docs/chip.md

@@ -18,6 +18,9 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | `size?` | `'chip' \| 'pill'` | `'chip'` | `sm` (default) is the standalone free chip; `pill` is the smaller pill
 that nests inside an md container (a select trigger, a button). |
 | `ondismiss?` | `() => void` | — | — |
+| `lead?` | `Snippet` | — | Icon rendered BEFORE the label, outside it. Use this rather than putting
+an icon in `children`: the label then gets its own box, which is the only
+place era's ink centring can reach. |
 | `children?` | `Snippet` | — | — |
 
 ## Usage

package/dist/generated-docs/llms-full.txt

@@ -63,6 +63,7 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
 - `era-token-ink` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.
 - `era-label-ink` — the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).
+- `glass-blur` — the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
 - `era-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
 - `era-collapse` — the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
 - `h-icon · h-pill · h-chip · h-control · h-bar` — the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*).
@@ -87,7 +88,6 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `ease-base` — Motion — bare transition utilities default to the motion axis, so
 - `bg-divider · text-divider · border-divider · bg-divider-faded · text-divider-faded · border-divider-faded · bg-background · text-background · … (66 in all)` — Surface divider colors: border-divider, bg-divider-faded, …
 - `bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (33 in all)` — The standing pill fill — --era-fill, the latched counterpart of the
-- `glass-blur` — the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
 
 Full reference (what each emits, when to use it): `/utilities.md`. Machine-readable list: `/utilities.json`.
 
@@ -195,6 +195,7 @@ source uses it where a name exists.
 | `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
 | `era-token-ink` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there. |
 | `era-label-ink` | the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip). |
+| `glass-blur` | the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface. |
 | `era-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
 | `era-collapse` | the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden). |
 | `h-icon` `h-pill` `h-chip` `h-control` `h-bar` | the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*). |
@@ -219,7 +220,6 @@ source uses it where a name exists.
 | `ease-base` | — |
 | `bg-divider` `text-divider` `border-divider` `bg-divider-faded` `text-divider-faded` `border-divider-faded` `bg-background` `text-background` `border-background` `bg-foreground` `text-foreground` `border-foreground` `bg-1` `text-1` `border-1` `bg-2` `text-2` `border-2` `bg-3` `text-3` `border-3` `bg-4` `text-4` `border-4` `bg-5` `text-5` `border-5` `bg-6` `text-6` `border-6` `bg-7` `text-7` `border-7` `bg-8` `text-8` `border-8` `bg-9` `text-9` `border-9` `bg-10` `text-10` `border-10` `bg-11` `text-11` `border-11` `bg-12` `text-12` `border-12` `bg-border` `text-border` `border-border` `bg-surface` `text-surface` `border-surface` `bg-hover` `text-hover` `border-hover` `bg-fg` `text-fg` `border-fg` `bg-bright` `text-bright` `border-bright` `bg-muted` `text-muted` `border-muted` | — |
 | `bg-fill` `text-fill` `border-fill` `bg-link` `text-link` `border-link` `bg-primary` `text-primary` `border-primary` `bg-primary-fg` `text-primary-fg` `border-primary-fg` `bg-primary-hover` `text-primary-hover` `border-primary-hover` `bg-destructive` `text-destructive` `border-destructive` `bg-destructive-fg` `text-destructive-fg` `border-destructive-fg` `bg-success` `text-success` `border-success` `bg-success-fg` `text-success-fg` `border-success-fg` `bg-warning` `text-warning` `border-warning` `bg-warning-fg` `text-warning-fg` `border-warning-fg` | — |
-| `glass-blur` | the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface. |
 
 ## era-interactive
 
@@ -517,6 +517,35 @@ Declared in `index.css`.
 }
 ```
 
+## glass-blur
+
+**Use it for:** the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
+
+Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter
+is a registered utility, gated to glass subtrees.
+
+It lives HERE rather than in surfaces/glass.css, where a surface's own
+chrome would naturally sit, because glass.css is imported into a cascade
+layer and `@utility` cannot be nested inside one. Surface-scoped RULES stay
+in their surface file; surface-scoped UTILITIES have to come out.
+
+Declared in `index.css`.
+
+```css
+@utility` cannot be nested inside one. Surface-scoped RULES stay
+ * in their surface file; surface-scoped UTILITIES have to come out.
+ *
+ * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it
+ * applies only inside a data-surface="glass" subtree and is inert elsewhere,
+ * so it is safe to leave on a panel that renders under every surface. */
+@utility glass-blur {
+	[data-surface='glass'] & {
+		backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
+		-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
+	}
+}
+```
+
 ## era-shimmer
 
 **Use it for:** the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
@@ -1040,24 +1069,6 @@ Declared in `index.css`.
 }
 ```
 
-## glass-blur
-
-**Use it for:** the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
-
-Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter
-is a registered utility, gated to glass subtrees.
-
-Declared in `surfaces/glass.css`.
-
-```css
-@utility glass-blur {
-	[data-surface='glass'] & {
-		backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
-		-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
-	}
-}
-```
-
 <!-- end: utilities -->
 
 <!-- begin: draggable -->
@@ -1100,19 +1111,20 @@ A complete notes app — rich-text editor, slash commands, local persistence.
 
 ## Usage
 
-Apps ship on their own subpath and are **not** re-exported from `@signal9/era-ui`.
-Notes carries TipTap, and a consumer who never imports an app should never pay
-for it.
+**Notes is not published.** It lives in `src/apps/` in the era-ui repository,
+outside the packaged `src/lib`, so there is no import path that reaches it — the
+`@signal9/era-ui/apps` subpath was removed in v13.
 
-```svelte
-<script>
-	import { Notes } from '@signal9/era-ui/apps';
-</script>
+A design system that also ships a note-taking application is two products in one
+package: Notes alone brings fifteen TipTap packages, and its release cadence and
+support expectations are nothing like a primitive's. It stays in the repo as a
+reference implementation and a demo — read it, copy it, or lift it into the
+product that renders it.
 
-<Notes />
-```
+What era DOES publish is the part that generalises: `@signal9/era-ui/styles/prose`
+is the document typography Notes uses, available to anyone building an editor.
 
-That is the whole integration: a sidebar with filter, pin, and delete; a TipTap
+Read as a reference, the integration is: a sidebar with filter, pin, and delete; a TipTap
 document with a `/` command menu and a selection toolbar; and persistence to
 `localStorage` under `era-ui:notes`.
 
@@ -1146,7 +1158,7 @@ Persistence is one small interface, so server-backed hosting is a drop-in swap
 `load`/`save` may be sync or async:
 
 ```ts
-import { Notes, NotesStore } from '@signal9/era-ui/apps';
+import { Notes, NotesStore } from '$apps/index.js'; // in-repo; not published
 
 const store = new NotesStore({
 	adapter: {
@@ -1225,6 +1237,9 @@ Inherits all props from `HTMLAttributes<HTMLSpanElement>`.
 |------|------|---------|-------|
 | `ref?` | `HTMLSpanElement \| null` | `null` | bindable |
 | `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning'` | `'default'` | — |
+| `lead?` | `Snippet` | — | Icon rendered BEFORE the label, outside it. Use this rather than putting
+an icon in `children`: the label then gets its own box, which is the only
+place era's ink centring can reach. |
 | `children?` | `Snippet` | — | — |
 
 ## Usage
@@ -1347,6 +1362,10 @@ Inherits all props from `Button.RootProps`.
 spinner. The existing label stays rendered so focus, click targets,
 and screen-reader accessible names don't change shape mid-flight. |
 | `loadingLabel?` | `string` | — | Screen-reader-only label announced while `loading` is true. |
+| `lead?` | `Snippet` | — | Icon rendered BEFORE the label, outside it. Use this rather than putting
+an icon in `children`: the label then gets its own box, which is the only
+place era's ink centring can reach (see era-label-ink). |
+| `trail?` | `Snippet` | — | Icon rendered AFTER the label, outside it. Same reason as `lead`. |
 | `children?` | `Snippet` | — | — |
 | `ref?` | `(forwarded)` | `null` | bindable |
 
@@ -1490,6 +1509,9 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | `size?` | `'chip' \| 'pill'` | `'chip'` | `sm` (default) is the standalone free chip; `pill` is the smaller pill
 that nests inside an md container (a select trigger, a button). |
 | `ondismiss?` | `() => void` | — | — |
+| `lead?` | `Snippet` | — | Icon rendered BEFORE the label, outside it. Use this rather than putting
+an icon in `children`: the label then gets its own box, which is the only
+place era's ink centring can reach. |
 | `children?` | `Snippet` | — | — |
 
 ## Usage

package/dist/generated-docs/llms.txt

@@ -101,6 +101,7 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
 - `era-token-ink` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.
 - `era-label-ink` — the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).
+- `glass-blur` — the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
 - `era-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
 - `era-collapse` — the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
 - `h-icon · h-pill · h-chip · h-control · h-bar` — the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*).
@@ -125,6 +126,5 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `ease-base` — Motion — bare transition utilities default to the motion axis, so
 - `bg-divider · text-divider · border-divider · bg-divider-faded · text-divider-faded · border-divider-faded · bg-background · text-background · … (66 in all)` — Surface divider colors: border-divider, bg-divider-faded, …
 - `bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (33 in all)` — The standing pill fill — --era-fill, the latched counterpart of the
-- `glass-blur` — the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
 
 Full reference (what each emits, when to use it): `{{ORIGIN}}/utilities.md`. Machine-readable list: `{{ORIGIN}}/utilities.json`.

package/dist/generated-docs/manifest.json

@@ -44,7 +44,7 @@
       "slug": "utilities",
       "title": "Utilities",
       "summary": "The CSS classes era ships alongside the components — links, ink-centred text, shimmer, hidden scrollbars.",
-      "tokenEstimate": 10357,
+      "tokenEstimate": 10518,
       "sections": [
         "Overview",
         "era-interactive",
@@ -56,6 +56,7 @@
         "era-ink-center",
         "era-token-ink",
         "era-label-ink",
+        "glass-blur",
         "era-shimmer",
         "era-collapse",
         "h-icon · h-pill · h-chip · h-control · h-bar",
@@ -79,8 +80,7 @@
         "bg-field · text-field · border-field · bg-field-highlight · text-field-highlight · border-field-highlight",
         "ease-base",
         "bg-divider · text-divider · border-divider · bg-divider-faded · text-divider-faded · border-divider-faded · bg-background · text-background · … (66 in all)",
-        "bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (33 in all)",
-        "glass-blur"
+        "bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (33 in all)"
       ],
       "file": "utilities.md"
     },
@@ -120,7 +120,7 @@
       "slug": "notes",
       "title": "Notes",
       "summary": "A complete notes app — rich-text editor, slash commands, local persistence.",
-      "tokenEstimate": 884,
+      "tokenEstimate": 1005,
       "sections": [
         "Usage",
         "Peer dependencies",
@@ -146,7 +146,7 @@
       "slug": "badge",
       "title": "Badge",
       "summary": "A small label for status or categorization.",
-      "tokenEstimate": 226,
+      "tokenEstimate": 279,
       "sections": [
         "Import",
         "Props",
@@ -183,7 +183,7 @@
       "slug": "button",
       "title": "Button",
       "summary": "A flexible button or link element.",
-      "tokenEstimate": 455,
+      "tokenEstimate": 538,
       "sections": [
         "Import",
         "Props",
@@ -229,7 +229,7 @@
       "slug": "chip",
       "title": "Chip",
       "summary": "An interactive, optionally dismissible token.",
-      "tokenEstimate": 276,
+      "tokenEstimate": 329,
       "sections": [
         "Import",
         "Props",
@@ -1064,6 +1064,16 @@
       "description": "LABEL INK — era-token-ink's mixed-case sibling, and the general answer to\n\"this fixed-height control holds one line of text\".\n\nSame mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row\nbecomes one and `align-content` (block-container alignment) does the\ncentring. What differs is the band and the alignment, because the content\nclass differs — a label is sentence case, so the x-height band is the visual\nmass to centre (cap-band reads low on \"System\"), and it is laid out against\nthe row's padding rather than centred in it.\n\nWHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare\ntext is an ANONYMOUS flex item — a box no selector reaches and no\nnon-inherited property touches. So `era-text-trim` on a flex row is inert,\ncontributing only its `line-height: 1`, and the ink falls back to line-box\ncentring by font metrics. era-token-ink already fixed that for centred\ntokens; this fixes it for everything else.\n\nTHE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text\nneeds the box to stay flex, which re-creates the anonymous item. A component\nwhose children are an opaque slot therefore guards it —\n`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while\nleaving the icon case on line-box centring. Splitting icon and label into\nseparate slots is what would close it; typography/inert-trim reports every\nsite still on the fallback.",
       "css": "@utility era-label-ink {\n\tdisplay: block;\n\talign-content: center;\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
+    {
+      "name": "glass-blur",
+      "names": [
+        "glass-blur"
+      ],
+      "file": "index.css",
+      "useCase": "the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface=\"glass\" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.",
+      "description": "Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter\nis a registered utility, gated to glass subtrees.\n\nIt lives HERE rather than in surfaces/glass.css, where a surface's own\nchrome would naturally sit, because glass.css is imported into a cascade\nlayer and `@utility` cannot be nested inside one. Surface-scoped RULES stay\nin their surface file; surface-scoped UTILITIES have to come out.",
+      "css": "@utility` cannot be nested inside one. Surface-scoped RULES stay\n * in their surface file; surface-scoped UTILITIES have to come out.\n *\n * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it\n * applies only inside a data-surface=\"glass\" subtree and is inert elsewhere,\n * so it is safe to leave on a panel that renders under every surface. */\n@utility glass-blur {\n\t[data-surface='glass'] & {\n\t\tbackdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t\t-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t}\n}"
+    },
     {
       "name": "era-shimmer",
       "names": [
@@ -1512,16 +1522,6 @@
       "file": "index.css",
       "description": "The standing pill fill — --era-fill, the latched counterpart of the\ntransient highlight. Surface-owned: a composing wash on flat/bevel, the\nopaque swatch on glass.",
       "css": "@theme inline {\n\t--color-fill: var(--era-fill);\n\t--color-link: var(--color-link);\n\t--color-primary: var(--color-primary);\n\t--color-primary-fg: var(--color-primary-fg);\n\t--color-primary-hover: var(--color-primary-hover);\n\t--color-destructive: var(--color-destructive);\n\t--color-destructive-fg: var(--color-destructive-fg);\n\t--color-success: var(--color-success);\n\t--color-success-fg: var(--color-success-fg);\n\t--color-warning: var(--color-warning);\n\t--color-warning-fg: var(--color-warning-fg);\n}"
-    },
-    {
-      "name": "glass-blur",
-      "names": [
-        "glass-blur"
-      ],
-      "file": "surfaces/glass.css",
-      "useCase": "the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface=\"glass\" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.",
-      "description": "Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter\nis a registered utility, gated to glass subtrees.",
-      "css": "@utility glass-blur {\n\t[data-surface='glass'] & {\n\t\tbackdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t\t-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t}\n}"
     }
   ]
 }

package/dist/generated-docs/notes.md

@@ -4,19 +4,20 @@ A complete notes app — rich-text editor, slash commands, local persistence.
 
 ## Usage
 
-Apps ship on their own subpath and are **not** re-exported from `@signal9/era-ui`.
-Notes carries TipTap, and a consumer who never imports an app should never pay
-for it.
+**Notes is not published.** It lives in `src/apps/` in the era-ui repository,
+outside the packaged `src/lib`, so there is no import path that reaches it — the
+`@signal9/era-ui/apps` subpath was removed in v13.
 
-```svelte
-<script>
-	import { Notes } from '@signal9/era-ui/apps';
-</script>
+A design system that also ships a note-taking application is two products in one
+package: Notes alone brings fifteen TipTap packages, and its release cadence and
+support expectations are nothing like a primitive's. It stays in the repo as a
+reference implementation and a demo — read it, copy it, or lift it into the
+product that renders it.
 
-<Notes />
-```
+What era DOES publish is the part that generalises: `@signal9/era-ui/styles/prose`
+is the document typography Notes uses, available to anyone building an editor.
 
-That is the whole integration: a sidebar with filter, pin, and delete; a TipTap
+Read as a reference, the integration is: a sidebar with filter, pin, and delete; a TipTap
 document with a `/` command menu and a selection toolbar; and persistence to
 `localStorage` under `era-ui:notes`.
 
@@ -50,7 +51,7 @@ Persistence is one small interface, so server-backed hosting is a drop-in swap
 `load`/`save` may be sync or async:
 
 ```ts
-import { Notes, NotesStore } from '@signal9/era-ui/apps';
+import { Notes, NotesStore } from '$apps/index.js'; // in-repo; not published
 
 const store = new NotesStore({
 	adapter: {

package/dist/generated-docs/utilities.json

@@ -90,6 +90,16 @@
       "description": "LABEL INK — era-token-ink's mixed-case sibling, and the general answer to\n\"this fixed-height control holds one line of text\".\n\nSame mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row\nbecomes one and `align-content` (block-container alignment) does the\ncentring. What differs is the band and the alignment, because the content\nclass differs — a label is sentence case, so the x-height band is the visual\nmass to centre (cap-band reads low on \"System\"), and it is laid out against\nthe row's padding rather than centred in it.\n\nWHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare\ntext is an ANONYMOUS flex item — a box no selector reaches and no\nnon-inherited property touches. So `era-text-trim` on a flex row is inert,\ncontributing only its `line-height: 1`, and the ink falls back to line-box\ncentring by font metrics. era-token-ink already fixed that for centred\ntokens; this fixes it for everything else.\n\nTHE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text\nneeds the box to stay flex, which re-creates the anonymous item. A component\nwhose children are an opaque slot therefore guards it —\n`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while\nleaving the icon case on line-box centring. Splitting icon and label into\nseparate slots is what would close it; typography/inert-trim reports every\nsite still on the fallback.",
       "css": "@utility era-label-ink {\n\tdisplay: block;\n\talign-content: center;\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
+    {
+      "name": "glass-blur",
+      "names": [
+        "glass-blur"
+      ],
+      "file": "index.css",
+      "useCase": "the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface=\"glass\" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.",
+      "description": "Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter\nis a registered utility, gated to glass subtrees.\n\nIt lives HERE rather than in surfaces/glass.css, where a surface's own\nchrome would naturally sit, because glass.css is imported into a cascade\nlayer and `@utility` cannot be nested inside one. Surface-scoped RULES stay\nin their surface file; surface-scoped UTILITIES have to come out.",
+      "css": "@utility` cannot be nested inside one. Surface-scoped RULES stay\n * in their surface file; surface-scoped UTILITIES have to come out.\n *\n * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it\n * applies only inside a data-surface=\"glass\" subtree and is inert elsewhere,\n * so it is safe to leave on a panel that renders under every surface. */\n@utility glass-blur {\n\t[data-surface='glass'] & {\n\t\tbackdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t\t-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t}\n}"
+    },
     {
       "name": "era-shimmer",
       "names": [
@@ -538,16 +548,6 @@
       "file": "index.css",
       "description": "The standing pill fill — --era-fill, the latched counterpart of the\ntransient highlight. Surface-owned: a composing wash on flat/bevel, the\nopaque swatch on glass.",
       "css": "@theme inline {\n\t--color-fill: var(--era-fill);\n\t--color-link: var(--color-link);\n\t--color-primary: var(--color-primary);\n\t--color-primary-fg: var(--color-primary-fg);\n\t--color-primary-hover: var(--color-primary-hover);\n\t--color-destructive: var(--color-destructive);\n\t--color-destructive-fg: var(--color-destructive-fg);\n\t--color-success: var(--color-success);\n\t--color-success-fg: var(--color-success-fg);\n\t--color-warning: var(--color-warning);\n\t--color-warning-fg: var(--color-warning-fg);\n}"
-    },
-    {
-      "name": "glass-blur",
-      "names": [
-        "glass-blur"
-      ],
-      "file": "surfaces/glass.css",
-      "useCase": "the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface=\"glass\" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.",
-      "description": "Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter\nis a registered utility, gated to glass subtrees.",
-      "css": "@utility glass-blur {\n\t[data-surface='glass'] & {\n\t\tbackdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t\t-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t}\n}"
     }
   ]
 }

package/dist/generated-docs/utilities.md

@@ -58,6 +58,7 @@ source uses it where a name exists.
 | `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
 | `era-token-ink` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there. |
 | `era-label-ink` | the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip). |
+| `glass-blur` | the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface. |
 | `era-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
 | `era-collapse` | the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden). |
 | `h-icon` `h-pill` `h-chip` `h-control` `h-bar` | the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*). |
@@ -82,7 +83,6 @@ source uses it where a name exists.
 | `ease-base` | — |
 | `bg-divider` `text-divider` `border-divider` `bg-divider-faded` `text-divider-faded` `border-divider-faded` `bg-background` `text-background` `border-background` `bg-foreground` `text-foreground` `border-foreground` `bg-1` `text-1` `border-1` `bg-2` `text-2` `border-2` `bg-3` `text-3` `border-3` `bg-4` `text-4` `border-4` `bg-5` `text-5` `border-5` `bg-6` `text-6` `border-6` `bg-7` `text-7` `border-7` `bg-8` `text-8` `border-8` `bg-9` `text-9` `border-9` `bg-10` `text-10` `border-10` `bg-11` `text-11` `border-11` `bg-12` `text-12` `border-12` `bg-border` `text-border` `border-border` `bg-surface` `text-surface` `border-surface` `bg-hover` `text-hover` `border-hover` `bg-fg` `text-fg` `border-fg` `bg-bright` `text-bright` `border-bright` `bg-muted` `text-muted` `border-muted` | — |
 | `bg-fill` `text-fill` `border-fill` `bg-link` `text-link` `border-link` `bg-primary` `text-primary` `border-primary` `bg-primary-fg` `text-primary-fg` `border-primary-fg` `bg-primary-hover` `text-primary-hover` `border-primary-hover` `bg-destructive` `text-destructive` `border-destructive` `bg-destructive-fg` `text-destructive-fg` `border-destructive-fg` `bg-success` `text-success` `border-success` `bg-success-fg` `text-success-fg` `border-success-fg` `bg-warning` `text-warning` `border-warning` `bg-warning-fg` `text-warning-fg` `border-warning-fg` | — |
-| `glass-blur` | the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface. |
 
 ## era-interactive
 
@@ -380,6 +380,35 @@ Declared in `index.css`.
 }
 ```
 
+## glass-blur
+
+**Use it for:** the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
+
+Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter
+is a registered utility, gated to glass subtrees.
+
+It lives HERE rather than in surfaces/glass.css, where a surface's own
+chrome would naturally sit, because glass.css is imported into a cascade
+layer and `@utility` cannot be nested inside one. Surface-scoped RULES stay
+in their surface file; surface-scoped UTILITIES have to come out.
+
+Declared in `index.css`.
+
+```css
+@utility` cannot be nested inside one. Surface-scoped RULES stay
+ * in their surface file; surface-scoped UTILITIES have to come out.
+ *
+ * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it
+ * applies only inside a data-surface="glass" subtree and is inert elsewhere,
+ * so it is safe to leave on a panel that renders under every surface. */
+@utility glass-blur {
+	[data-surface='glass'] & {
+		backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
+		-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
+	}
+}
+```
+
 ## era-shimmer
 
 **Use it for:** the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
@@ -902,21 +931,3 @@ Declared in `index.css`.
 	--color-warning-fg: var(--color-warning-fg);
 }
 ```
-
-## glass-blur
-
-**Use it for:** the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
-
-Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter
-is a registered utility, gated to glass subtrees.
-
-Declared in `surfaces/glass.css`.
-
-```css
-@utility glass-blur {
-	[data-surface='glass'] & {
-		backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
-		-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
-	}
-}
-```

package/dist/os/index.d.ts

@@ -2,7 +2,6 @@ export { PaneManager, getPaneManager, tryGetPaneManager, setPaneManagerContext,
 export { persistWorkspace, loadWorkspace, saveWorkspace, clearWorkspace, WORKSPACE_STORAGE_KEY } from './workspace-storage.svelte.js';
 export { type SnapZone, type Workspace } from './pane-manager.svelte.js';
 export { NotificationService, getNotifications, setNotificationContext, type AppNotification, type NotifyOptions, type NotificationAction, type NotificationTone } from './notifications.svelte.js';
-export { LAYER } from './layers.js';
 export { default as Desktop } from './desktop.svelte';
 export { default as Pane } from './pane.svelte';
 export { default as Taskbar } from './taskbar.svelte';

package/dist/os/index.js

@@ -6,7 +6,6 @@ export { PaneManager, getPaneManager, tryGetPaneManager, setPaneManagerContext,
 export { persistWorkspace, loadWorkspace, saveWorkspace, clearWorkspace, WORKSPACE_STORAGE_KEY } from './workspace-storage.svelte.js';
 export {} from './pane-manager.svelte.js';
 export { NotificationService, getNotifications, setNotificationContext } from './notifications.svelte.js';
-export { LAYER } from './layers.js';
 export { default as Desktop } from './desktop.svelte';
 export { default as Pane } from './pane.svelte';
 export { default as Taskbar } from './taskbar.svelte';

package/dist/os/notification-center.svelte

@@ -6,7 +6,6 @@
 	import { cn } from '../utils/index.js';
 	import { getNotifications, type AppNotification } from './notifications.svelte.js';
 	import { getPaneManager } from './pane-manager.svelte.js';
-	import { LAYER } from './layers.js';
 
 	let { open = $bindable(false) }: { open?: boolean } = $props();
 	const notif = getNotifications();
@@ -34,7 +33,7 @@
 </script>
 
 {#if open}
-	<div class={cn('absolute inset-0', LAYER.notificationCenter)}>
+	<div class={cn('absolute inset-0 z-drawer')}>
 		<!-- Click-away scrim (transparent) -->
 		<button
 			class="absolute inset-0 cursor-default"

package/dist/os/taskbar.svelte

@@ -11,7 +11,6 @@
 	import { cn } from '../utils/index.js';
 	import { getPaneManager } from './pane-manager.svelte.js';
 	import { getNotifications } from './notifications.svelte.js';
-	import { LAYER } from './layers.js';
 
 	let {
 		position = 'bottom',
@@ -209,7 +208,7 @@
 					'inset-x-0 border-divider-faded',
 					position === 'top' ? 'top-0 rounded-b-bar border-b' : 'bottom-0 rounded-t-bar border-t'
 				),
-		LAYER.taskbar,
+		'z-chrome',
 		className
 	)}
 	{...restProps}
@@ -332,7 +331,7 @@
 		data-mode="touch"
 		class={cn(
 			'absolute right-gutter bottom-[max(var(--era-gap),env(safe-area-inset-bottom))] sm:hidden',
-			LAYER.taskbar
+			'z-chrome'
 		)}
 	>
 		<!-- A STANDARD era Button, just floated: era corners (rd-xs at this tier) and

package/dist/os/toaster.svelte

@@ -3,21 +3,20 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../utils/index.js';
 	import { getNotifications } from './notifications.svelte.js';
-	import { LAYER } from './layers.js';
 	import Toast from './toast.svelte';
 
 	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
 	const notif = getNotifications();
 </script>
 
-<!-- Toast stack, above the taskbar and above bits-ui overlays (LAYER.toast).
+<!-- Toast stack, above the taskbar and above bits-ui overlays (z-toast).
      flex-col-reverse: the newest toast (index 0) sits at the bottom, nearest the
      tray it came from. pointer-events-none on the column so gaps don't block the
      desktop; each toast re-enables its own. -->
 <div
 	class={cn(
 		'pointer-events-none absolute right-card bottom-(--era-h-bar) flex flex-col-reverse gap-inset-chip',
-		LAYER.toast,
+		'z-toast',
 		className
 	)}
 	{...restProps}