@signal9/era-ui 12.1.2 → 14.0.0

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": 10647,
       "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",
@@ -468,7 +468,7 @@
       "slug": "step",
       "title": "Step",
       "summary": "Expandable inline step — tool calls, thinking, agent actions.",
-      "tokenEstimate": 315,
+      "tokenEstimate": 316,
       "sections": [
         "Import",
         "Step.Root",
@@ -543,7 +543,7 @@
       "slug": "date-range-field",
       "title": "Date Range Field",
       "summary": "Segmented start/end date input.",
-      "tokenEstimate": 297,
+      "tokenEstimate": 298,
       "sections": [
         "Import",
         "DateRangeField.Root",
@@ -693,7 +693,7 @@
       "slug": "menu",
       "title": "Menu",
       "summary": "Headless menu primitives re-exported from bits-ui.",
-      "tokenEstimate": 49,
+      "tokenEstimate": 50,
       "sections": [
         "Import"
       ],
@@ -755,7 +755,7 @@
       "slug": "pagination",
       "title": "Pagination",
       "summary": "Enables users to navigate through a series of pages.",
-      "tokenEstimate": 373,
+      "tokenEstimate": 374,
       "sections": [
         "Import",
         "Pagination.Root",
@@ -871,7 +871,7 @@
       "slug": "table",
       "title": "Table",
       "summary": "A tabular data display with rows, headers, and cells.",
-      "tokenEstimate": 732,
+      "tokenEstimate": 733,
       "sections": [
         "Import",
         "Table.Root",
@@ -917,7 +917,7 @@
       "slug": "time-range-field",
       "title": "Time Range Field",
       "summary": "Segmented start/end time input.",
-      "tokenEstimate": 297,
+      "tokenEstimate": 298,
       "sections": [
         "Import",
         "TimeRangeField.Root",
@@ -943,7 +943,7 @@
       "slug": "toolbar",
       "title": "Toolbar",
       "summary": "Headless toolbar primitives re-exported from bits-ui.",
-      "tokenEstimate": 52,
+      "tokenEstimate": 53,
       "sections": [
         "Import"
       ],
@@ -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/menu.md

@@ -5,7 +5,7 @@ Headless menu primitives re-exported from bits-ui.
 ## Import
 
 ```ts
-import { Menu } from "@signal9/era-ui/menu";
+import * as Menu from "@signal9/era-ui/menu";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/menubar.md

@@ -5,7 +5,7 @@ A horizontal bar of dropdown menus.
 ## Import
 
 ```ts
-import { Menubar } from "@signal9/era-ui/menubar";
+import * as Menubar from "@signal9/era-ui/menubar";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/navigation-menu.md

@@ -5,7 +5,7 @@ Headless navigation-menu primitives re-exported from bits-ui.
 ## Import
 
 ```ts
-import { NavigationMenu } from "@signal9/era-ui/navigation-menu";
+import * as NavigationMenu from "@signal9/era-ui/navigation-menu";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

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/pagination.md

@@ -5,7 +5,7 @@ Enables users to navigate through a series of pages.
 ## Import
 
 ```ts
-import { Pagination } from "@signal9/era-ui/pagination";
+import * as Pagination from "@signal9/era-ui/pagination";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/pin-input.md

@@ -5,7 +5,7 @@ Enables users to input a sequence of one-character inputs.
 ## Import
 
 ```ts
-import { PinInput } from "@signal9/era-ui/pin-input";
+import * as PinInput from "@signal9/era-ui/pin-input";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/popover.md

@@ -5,7 +5,7 @@ A floating panel anchored to a trigger.
 ## Import
 
 ```ts
-import { Popover } from "@signal9/era-ui/popover";
+import * as Popover from "@signal9/era-ui/popover";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/radio-group.md

@@ -5,7 +5,7 @@ Groups radio items for single selection.
 ## Import
 
 ```ts
-import { RadioGroup } from "@signal9/era-ui/radio-group";
+import * as RadioGroup from "@signal9/era-ui/radio-group";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/range-calendar.md

@@ -5,7 +5,7 @@ Headless range-calendar primitives re-exported from bits-ui.
 ## Import
 
 ```ts
-import { RangeCalendar } from "@signal9/era-ui/range-calendar";
+import * as RangeCalendar from "@signal9/era-ui/range-calendar";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/rating-group.md

@@ -5,7 +5,7 @@ A star-style single-choice rating input.
 ## Import
 
 ```ts
-import { RatingGroup } from "@signal9/era-ui/rating-group";
+import * as RatingGroup from "@signal9/era-ui/rating-group";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/scroll-area.md

@@ -5,7 +5,7 @@ A cross-platform scroll container.
 ## Import
 
 ```ts
-import { ScrollArea } from "@signal9/era-ui/scroll-area";
+import * as ScrollArea from "@signal9/era-ui/scroll-area";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/select.md

@@ -5,7 +5,7 @@ A dropdown select menu.
 ## Import
 
 ```ts
-import { Select } from "@signal9/era-ui/select";
+import * as Select from "@signal9/era-ui/select";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/sheet.md

@@ -5,7 +5,7 @@ A dialog anchored to a screen edge — a mobile drawer.
 ## Import
 
 ```ts
-import { Sheet } from "@signal9/era-ui/sheet";
+import * as Sheet from "@signal9/era-ui/sheet";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/slider.md

@@ -5,7 +5,7 @@ Enables value selection from a continuous range.
 ## Import
 
 ```ts
-import { Slider } from "@signal9/era-ui/slider";
+import * as Slider from "@signal9/era-ui/slider";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/step.md

@@ -5,7 +5,7 @@ Expandable inline step — tool calls, thinking, agent actions.
 ## Import
 
 ```ts
-import { Step } from "@signal9/era-ui/step";
+import * as Step from "@signal9/era-ui/step";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/table.md

@@ -5,7 +5,7 @@ A tabular data display with rows, headers, and cells.
 ## Import
 
 ```ts
-import { Table } from "@signal9/era-ui/table";
+import * as Table from "@signal9/era-ui/table";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/tabs.md

@@ -5,7 +5,7 @@ Organizes content into tabbed sections.
 ## Import
 
 ```ts
-import { Tabs } from "@signal9/era-ui/tabs";
+import * as Tabs from "@signal9/era-ui/tabs";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/time-field.md

@@ -5,7 +5,7 @@ Segmented time input with keyboard navigation.
 ## Import
 
 ```ts
-import { TimeField } from "@signal9/era-ui/time-field";
+import * as TimeField from "@signal9/era-ui/time-field";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/time-range-field.md

@@ -5,7 +5,7 @@ Segmented start/end time input.
 ## Import
 
 ```ts
-import { TimeRangeField } from "@signal9/era-ui/time-range-field";
+import * as TimeRangeField from "@signal9/era-ui/time-range-field";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/toggle-group.md

@@ -5,7 +5,7 @@ A set of toggle buttons with single or multiple selection.
 ## Import
 
 ```ts
-import { ToggleGroup } from "@signal9/era-ui/toggle-group";
+import * as ToggleGroup from "@signal9/era-ui/toggle-group";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/toolbar.md

@@ -5,7 +5,7 @@ Headless toolbar primitives re-exported from bits-ui.
 ## Import
 
 ```ts
-import { Toolbar } from "@signal9/era-ui/toolbar";
+import * as Toolbar from "@signal9/era-ui/toolbar";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/tooltip.md

@@ -5,7 +5,7 @@ Supplementary info on hover or focus.
 ## Import
 
 ```ts
-import { Tooltip } from "@signal9/era-ui/tooltip";
+import * as Tooltip from "@signal9/era-ui/tooltip";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

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

@@ -33,6 +33,17 @@ motion):
 | `text-body` | density-derived body/control text size |
 | `p-gutter` / `gap-gutter` / `mt-gutter` / … | the spacing scale — EVERY spacing prefix works |
 
+THE SPACING NAMES IN SIZE ORDER, smallest first, because the names do not
+imply it and guessing gets it backwards:
+
+    gutter  <  panel  <  field  <  card  <  content
+
+Measured at `data-mode="balanced"`: gutter 5px, field ~9px, card ~11px,
+content ~22px. `gutter` is the TIGHT one — the gap between sibling controls
+and a rail's own padding. `field` is a text input's side padding, not the
+label-to-input gap. Reading them the other way round produces a layout whose
+hierarchy is inverted and therefore reads flat.
+
 The spacing names (`gutter`, `card`, `panel`, `content`, `menu`, `field`, the
 `inset-*` and concentric `*-inset-*` insets, `glyph-*`) are registered as a
 Tailwind spacing scale, so every prefix derives automatically: `p-`, `px-`,
@@ -58,6 +69,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 +94,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 +391,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 +942,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}