@signal9/era-ui 3.9.0 → 3.11.0

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

@@ -199,7 +199,7 @@ Declared in `index.css`.
 	 * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —
 	 * muted knocked back to 30% so it barely whispers — that resolves to the full
 	 * text colour on hover. */
-	color: var(--color-bright);
+	color: var(--color-link);
 	text-decoration-line: underline;
 	text-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);
 	text-underline-offset: 0.2em;
@@ -590,6 +590,97 @@ Release history — every version, grouped by change type.
 
 <!-- end: changelog -->
 
+<!-- begin: notes -->
+
+# Notes
+
+A complete notes app — rich-text editor, slash commands, local persistence.
+
+## Usage
+
+Apps ship on their own subpath and are **not** re-exported from `@sig-nine/era-ui`.
+Notes carries TipTap, and a consumer who never imports an app should never pay
+for it.
+
+```svelte
+<script>
+	import { Notes } from '@sig-nine/era-ui/apps';
+</script>
+
+<Notes />
+```
+
+That is the whole integration: 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`.
+
+## Peer dependencies
+
+Install alongside the library (they are not bundled):
+
+```
+@tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/suggestion
+@tiptap/extension-code-block-lowlight @tiptap/extension-details
+@tiptap/extension-highlight @tiptap/extension-image
+@tiptap/extension-placeholder @tiptap/extension-table
+@tiptap/extension-task-item @tiptap/extension-task-list
+@tiptap/extension-typography @tiptap/extension-unique-id
+lowlight tiptap-markdown
+```
+
+## Props
+
+| Prop         | Type             | Default            | Notes                                                             |
+| ------------ | ---------------- | ------------------ | ----------------------------------------------------------------- |
+| `store`      | `NotesStore`     | created internally | Bring your own; when set, the host owns its lifecycle.            |
+| `adapter`    | `NotesAdapter`   | `localStorage`     | Persistence for the internally-created store.                     |
+| `storageKey` | `string`         | `era-ui:notes`     | Key for the default adapter.                                      |
+| `noteId`     | `string \| null` | `null`             | `$bindable` — the open note, for deep-linking or session restore. |
+| `seed`       | `NoteInit[]`     | —                  | Created only when storage comes back empty (first-run sample).    |
+
+## Persistence
+
+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 '@sig-nine/era-ui/apps';
+
+const store = new NotesStore({
+	adapter: {
+		load: () => fetch('/api/notes').then((r) => r.json()),
+		save: (notes) => fetch('/api/notes', { method: 'PUT', body: JSON.stringify(notes) })
+	}
+});
+```
+
+`NotesStore` is the reactive source of truth (`notes`, `ordered`, `loading`,
+`status`, `lastError`) with `create` / `update` / `remove` / `togglePin` /
+`setIcon` / `search` / `toMarkdown` / `flush`. Writes are debounced and
+coalesced, so a burst of keystrokes costs one `save`.
+
+## The heading index
+
+Every document is also a tree. `buildGlobalTree()` walks heading structure,
+`treeToText()` renders it as a table of contents a model can read, and
+`extractSection(title, doc, headingId)` returns just the requested slice as
+structure-preserving markdown — reasoning-based retrieval rather than
+embeddings. Heading ids are stable (`@tiptap/extension-unique-id`), so a section
+address survives edits above it.
+
+## Notes
+
+- Keyboard: `/` opens the command menu, `Mod-K` links a selection, `Mod-S`
+  flushes pending writes immediately.
+- The slash menu and selection toolbar are real Svelte components mounted into
+  the document root, so they follow every axis — density tiers, surface chrome,
+  corners, motion, font — instead of carrying their own hardcoded styling.
+- `@tiptap/extension-mathematics` is deliberately absent: it needs KaTeX's
+  stylesheet and fonts to render. Spread `noteExtensions` and add it yourself if
+  you want math.
+
+<!-- end: notes -->
+
 <!-- begin: aspect-ratio -->
 
 # Aspect Ratio

package/dist/generated-docs/llms.txt

@@ -31,7 +31,7 @@ Full concatenated reference: `{{ORIGIN}}/llms-full.txt`.
 
 ## Components
 
-getting-started, spacing, surfaces, measurements, text, utilities, draggable, llm-shell, os, changelog, aspect-ratio, badge, avatar, bar, button, button-group, pane, card, chip, code-block, copy-button, cycle, kv, separator, sheet, skeleton, switch, toggle, accordion, alert-dialog, calendar, checkbox, collapsible, combobox, command, command-bar, step, context-menu, date-field, date-picker, date-range-field, date-range-picker, dialog, dropdown-menu, file-upload, scroll-area, input, link-preview, label, logo, menu, menubar, meter, navigation-menu, mode, pagination, pin-input, popover, progress, range-calendar, radio-group, rating-group, select, slider, table, tabs, time-field, time-range-field, toggle-group, toolbar, video-player, tooltip
+getting-started, spacing, surfaces, measurements, text, utilities, draggable, llm-shell, os, changelog, notes, aspect-ratio, badge, avatar, bar, button, button-group, pane, card, chip, code-block, copy-button, cycle, kv, separator, sheet, skeleton, switch, toggle, accordion, alert-dialog, calendar, checkbox, collapsible, combobox, command, command-bar, step, context-menu, date-field, date-picker, date-range-field, date-range-picker, dialog, dropdown-menu, file-upload, scroll-area, input, link-preview, label, logo, menu, menubar, meter, navigation-menu, mode, pagination, pin-input, popover, progress, range-calendar, radio-group, rating-group, select, slider, table, tabs, time-field, time-range-field, toggle-group, toolbar, video-player, tooltip
 
 ## CSS utilities
 

package/dist/generated-docs/manifest.json

@@ -100,6 +100,21 @@
       "sections": [],
       "file": "changelog.md"
     },
+    {
+      "slug": "notes",
+      "title": "Notes",
+      "summary": "A complete notes app — rich-text editor, slash commands, local persistence.",
+      "tokenEstimate": 885,
+      "sections": [
+        "Usage",
+        "Peer dependencies",
+        "Props",
+        "Persistence",
+        "The heading index",
+        "Notes"
+      ],
+      "file": "notes.md"
+    },
     {
       "slug": "aspect-ratio",
       "title": "Aspect Ratio",
@@ -960,7 +975,7 @@
       "file": "index.css",
       "useCase": "understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant=\"link\"` (which is a control, not running text).",
       "description": "Inline text link. An understated, permanent underline that darkens from\nmuted to the text colour on hover — no layout shift, no appearing/vanishing\nunderline. The colour fade rides the MOTION axis (--era-duration/-ease), so\nit snaps at data-motion=\"instant\", eases at \"normal\", and sweeps longer at\n\"extra\" — matching every other era transition. Font-agnostic: it styles\ndecoration + colour only, so it reads correctly in mono, sans, or serif, and\nthe 0.2em offset scales with the type size. Keyboard focus mirrors hover so\nthe affordance is reachable without a pointer.",
-      "css": "@utility era-link {\n\t/* The text is bright at rest and never changes — the link reads as a link\n\t * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —\n\t * muted knocked back to 30% so it barely whispers — that resolves to the full\n\t * text colour on hover. */\n\tcolor: var(--color-bright);\n\ttext-decoration-line: underline;\n\ttext-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);\n\ttext-underline-offset: 0.2em;\n\ttransition: text-decoration-color var(--era-duration) var(--era-ease);\n\t&:hover,\n\t&:focus-visible {\n\t\ttext-decoration-color: var(--color-fg);\n\t}\n}"
+      "css": "@utility era-link {\n\t/* The text is bright at rest and never changes — the link reads as a link\n\t * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —\n\t * muted knocked back to 30% so it barely whispers — that resolves to the full\n\t * text colour on hover. */\n\tcolor: var(--color-link);\n\ttext-decoration-line: underline;\n\ttext-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);\n\ttext-underline-offset: 0.2em;\n\ttransition: text-decoration-color var(--era-duration) var(--era-ease);\n\t&:hover,\n\t&:focus-visible {\n\t\ttext-decoration-color: var(--color-fg);\n\t}\n}"
     },
     {
       "name": "scrollbar-none",

package/dist/generated-docs/notes.md

@@ -0,0 +1,86 @@
+# Notes
+
+A complete notes app — rich-text editor, slash commands, local persistence.
+
+## Usage
+
+Apps ship on their own subpath and are **not** re-exported from `@sig-nine/era-ui`.
+Notes carries TipTap, and a consumer who never imports an app should never pay
+for it.
+
+```svelte
+<script>
+	import { Notes } from '@sig-nine/era-ui/apps';
+</script>
+
+<Notes />
+```
+
+That is the whole integration: 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`.
+
+## Peer dependencies
+
+Install alongside the library (they are not bundled):
+
+```
+@tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/suggestion
+@tiptap/extension-code-block-lowlight @tiptap/extension-details
+@tiptap/extension-highlight @tiptap/extension-image
+@tiptap/extension-placeholder @tiptap/extension-table
+@tiptap/extension-task-item @tiptap/extension-task-list
+@tiptap/extension-typography @tiptap/extension-unique-id
+lowlight tiptap-markdown
+```
+
+## Props
+
+| Prop         | Type             | Default            | Notes                                                             |
+| ------------ | ---------------- | ------------------ | ----------------------------------------------------------------- |
+| `store`      | `NotesStore`     | created internally | Bring your own; when set, the host owns its lifecycle.            |
+| `adapter`    | `NotesAdapter`   | `localStorage`     | Persistence for the internally-created store.                     |
+| `storageKey` | `string`         | `era-ui:notes`     | Key for the default adapter.                                      |
+| `noteId`     | `string \| null` | `null`             | `$bindable` — the open note, for deep-linking or session restore. |
+| `seed`       | `NoteInit[]`     | —                  | Created only when storage comes back empty (first-run sample).    |
+
+## Persistence
+
+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 '@sig-nine/era-ui/apps';
+
+const store = new NotesStore({
+	adapter: {
+		load: () => fetch('/api/notes').then((r) => r.json()),
+		save: (notes) => fetch('/api/notes', { method: 'PUT', body: JSON.stringify(notes) })
+	}
+});
+```
+
+`NotesStore` is the reactive source of truth (`notes`, `ordered`, `loading`,
+`status`, `lastError`) with `create` / `update` / `remove` / `togglePin` /
+`setIcon` / `search` / `toMarkdown` / `flush`. Writes are debounced and
+coalesced, so a burst of keystrokes costs one `save`.
+
+## The heading index
+
+Every document is also a tree. `buildGlobalTree()` walks heading structure,
+`treeToText()` renders it as a table of contents a model can read, and
+`extractSection(title, doc, headingId)` returns just the requested slice as
+structure-preserving markdown — reasoning-based retrieval rather than
+embeddings. Heading ids are stable (`@tiptap/extension-unique-id`), so a section
+address survives edits above it.
+
+## Notes
+
+- Keyboard: `/` opens the command menu, `Mod-K` links a selection, `Mod-S`
+  flushes pending writes immediately.
+- The slash menu and selection toolbar are real Svelte components mounted into
+  the document root, so they follow every axis — density tiers, surface chrome,
+  corners, motion, font — instead of carrying their own hardcoded styling.
+- `@tiptap/extension-mathematics` is deliberately absent: it needs KaTeX's
+  stylesheet and fonts to render. Spread `noteExtensions` and add it yourself if
+  you want math.

package/dist/generated-docs/utilities.json

@@ -18,7 +18,7 @@
       "file": "index.css",
       "useCase": "understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant=\"link\"` (which is a control, not running text).",
       "description": "Inline text link. An understated, permanent underline that darkens from\nmuted to the text colour on hover — no layout shift, no appearing/vanishing\nunderline. The colour fade rides the MOTION axis (--era-duration/-ease), so\nit snaps at data-motion=\"instant\", eases at \"normal\", and sweeps longer at\n\"extra\" — matching every other era transition. Font-agnostic: it styles\ndecoration + colour only, so it reads correctly in mono, sans, or serif, and\nthe 0.2em offset scales with the type size. Keyboard focus mirrors hover so\nthe affordance is reachable without a pointer.",
-      "css": "@utility era-link {\n\t/* The text is bright at rest and never changes — the link reads as a link\n\t * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —\n\t * muted knocked back to 30% so it barely whispers — that resolves to the full\n\t * text colour on hover. */\n\tcolor: var(--color-bright);\n\ttext-decoration-line: underline;\n\ttext-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);\n\ttext-underline-offset: 0.2em;\n\ttransition: text-decoration-color var(--era-duration) var(--era-ease);\n\t&:hover,\n\t&:focus-visible {\n\t\ttext-decoration-color: var(--color-fg);\n\t}\n}"
+      "css": "@utility era-link {\n\t/* The text is bright at rest and never changes — the link reads as a link\n\t * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —\n\t * muted knocked back to 30% so it barely whispers — that resolves to the full\n\t * text colour on hover. */\n\tcolor: var(--color-link);\n\ttext-decoration-line: underline;\n\ttext-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);\n\ttext-underline-offset: 0.2em;\n\ttransition: text-decoration-color var(--era-duration) var(--era-ease);\n\t&:hover,\n\t&:focus-visible {\n\t\ttext-decoration-color: var(--color-fg);\n\t}\n}"
     },
     {
       "name": "scrollbar-none",

package/dist/generated-docs/utilities.md

@@ -99,7 +99,7 @@ Declared in `index.css`.
 	 * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —
 	 * muted knocked back to 30% so it barely whispers — that resolves to the full
 	 * text colour on hover. */
-	color: var(--color-bright);
+	color: var(--color-link);
 	text-decoration-line: underline;
 	text-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);
 	text-underline-offset: 0.2em;

package/dist/styles/index.css

@@ -93,7 +93,7 @@
 	 * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —
 	 * muted knocked back to 30% so it barely whispers — that resolves to the full
 	 * text colour on hover. */
-	color: var(--color-bright);
+	color: var(--color-link);
 	text-decoration-line: underline;
 	text-decoration-color: color-mix(in oklch, var(--color-muted) 30%, transparent);
 	text-underline-offset: 0.2em;
@@ -283,6 +283,7 @@
 	--color-fg: var(--color-fg);
 	--color-bright: var(--color-bright);
 	--color-muted: var(--color-muted);
+	--color-link: var(--color-link);
 	--color-primary: var(--color-primary);
 	--color-primary-fg: var(--color-primary-fg);
 	--color-primary-hover: var(--color-primary-hover);

package/dist/styles/themes.css

@@ -51,27 +51,29 @@
 	--color-fg: var(--color-11);
 	--color-bright: var(--color-12);
 	--color-muted: var(--color-10);
+	/* Inline link ink. Declared once here and inherited by every theme —
+	 * var(--color-bright) resolves in the element's own context, so a theme only
+	 * names this if it wants links to differ from emphasis text (signalnine
+	 * light does: yahoo.co.jp links are navy, not black). */
+	--color-link: var(--color-bright);
 
 	/* Accent tokens — override these to theme the library */
 	--color-primary: var(--color-fg);
 	--color-primary-fg: var(--color-1);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
-	/* Destructive carries DARK text, like warning: the red is bright and
-	 * saturated enough that near-black out-contrasts white on it, and a black
-	 * glyph on red reads harder-edged than a white one. Every theme's
-	 * -fg here is that theme's own warning-fg, so the two bright accents
-	 * behave identically.
+	/* Destructive carries LIGHT text — a white glyph on the red fill.
 	 *
-	 * The two constraints fight, so the value is load-bearing. The old
-	 * oklch(0.675 0.3 30) sat outside sRGB and clipped to a flat #ff0000 —
-	 * that clipping is what made it read glaring. This is in gamut at
-	 * L 0.59 / hue 27 (#eb001a): darker, and swung off the orange-leaning
-	 * 30deg onto a truer crimson, which is most of what reads as "deeper".
-	 * L 0.59 is the floor — below it a light glyph would out-contrast a dark
-	 * one and the black X stops being the right call. Here it holds 4.2:1,
-	 * well past the 3:1 a non-text glyph needs. */
-	--color-destructive: oklch(0.59 0.241 27);
-	--color-destructive-fg: oklch(0.162 0 0);
+	 * The original oklch(0.675 0.3 30) sat outside sRGB and clipped to a flat
+	 * #ff0000, which is what made it read glaring. This one is in gamut:
+	 * #f14b43, softer and lighter than the clipped red it replaces.
+	 *
+	 * Worth knowing if this is retuned: at this lightness BLACK actually
+	 * out-contrasts white on it (5.8 vs 3.6). White is the deliberate call,
+	 * not the higher-contrast one, and 3.6:1 clears the 3:1 a non-text glyph
+	 * needs but not the 4.5:1 body copy would. Pushing the red LIGHTER widens
+	 * that gap; pushing it darker closes it. */
+	--color-destructive: oklch(0.6468 0.2039 27.2); /* #f14b43 */
+	--color-destructive-fg: oklch(0.96 0 0);
 	--color-success: oklch(0.65 0.17 145);
 	--color-success-fg: oklch(0.96 0 0);
 	--color-warning: oklch(0.8 0.16 85);
@@ -109,8 +111,8 @@
 		--color-primary: var(--color-fg);
 		--color-primary-fg: var(--color-1);
 		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
-		--color-destructive: oklch(0.59 0.241 27);
-		--color-destructive-fg: oklch(0.162 0 0);
+		--color-destructive: oklch(0.6468 0.2039 27.2); /* #f14b43 */
+		--color-destructive-fg: oklch(0.98 0 0);
 		--color-success: oklch(0.5 0.17 145);
 		--color-success-fg: oklch(0.98 0 0);
 		--color-warning: oklch(0.72 0.15 85);
@@ -145,8 +147,8 @@
 	--color-primary: var(--color-fg);
 	--color-primary-fg: var(--color-1);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
-	--color-destructive: oklch(0.59 0.241 27);
-	--color-destructive-fg: oklch(0.162 0 0);
+	--color-destructive: oklch(0.6468 0.2039 27.2); /* #f14b43 */
+	--color-destructive-fg: oklch(0.98 0 0);
 	--color-success: oklch(0.5 0.17 145);
 	--color-success-fg: oklch(0.98 0 0);
 	--color-warning: oklch(0.72 0.15 85);
@@ -190,7 +192,7 @@
 	--color-primary-fg: oklch(0.19 0.014 50);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 78%, var(--color-success));
 	--color-destructive: oklch(0.61 0.17 30);
-	--color-destructive-fg: oklch(0.19 0.014 50);
+	--color-destructive-fg: oklch(0.96 0.016 90);
 	--color-success: oklch(0.7 0.125 184);
 	--color-success-fg: oklch(0.19 0.014 50);
 	--color-warning: oklch(0.78 0.14 82);
@@ -233,7 +235,7 @@
 		--color-primary-fg: oklch(0.96 0.014 78);
 		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
 		--color-destructive: oklch(0.575 0.22 28);
-		--color-destructive-fg: oklch(0.19 0.014 50);
+		--color-destructive-fg: oklch(0.98 0.012 78);
 		--color-success: oklch(0.5 0.13 158);
 		--color-success-fg: oklch(0.98 0.012 78);
 		--color-warning: oklch(0.7 0.13 80);
@@ -268,7 +270,7 @@
 	--color-primary-fg: oklch(0.96 0.014 78);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
 	--color-destructive: oklch(0.575 0.22 28);
-	--color-destructive-fg: oklch(0.19 0.014 50);
+	--color-destructive-fg: oklch(0.98 0.012 78);
 	--color-success: oklch(0.5 0.13 158);
 	--color-success-fg: oklch(0.98 0.012 78);
 	--color-warning: oklch(0.7 0.13 80);
@@ -306,7 +308,7 @@
 	--color-primary-fg: var(--color-1);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 80%, var(--color-success));
 	--color-destructive: oklch(0.615 0.15 33);
-	--color-destructive-fg: var(--color-1);
+	--color-destructive-fg: var(--color-12);
 	--color-success: oklch(0.71 0.09 164);
 	--color-success-fg: var(--color-1);
 	--color-warning: oklch(0.78 0.1 85);
@@ -344,7 +346,7 @@
 		--color-primary-fg: oklch(0.97 0.008 80);
 		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
 		--color-destructive: oklch(0.59 0.18 32);
-		--color-destructive-fg: oklch(0.2 0.012 60);
+		--color-destructive-fg: oklch(0.98 0.008 80);
 		--color-success: oklch(0.54 0.11 164);
 		--color-success-fg: oklch(0.98 0.008 80);
 		--color-warning: oklch(0.68 0.1 82);
@@ -379,7 +381,7 @@
 	--color-primary-fg: oklch(0.97 0.008 80);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
 	--color-destructive: oklch(0.59 0.18 32);
-	--color-destructive-fg: oklch(0.2 0.012 60);
+	--color-destructive-fg: oklch(0.98 0.008 80);
 	--color-success: oklch(0.54 0.11 164);
 	--color-success-fg: oklch(0.98 0.008 80);
 	--color-warning: oklch(0.68 0.1 82);
@@ -433,7 +435,7 @@
 	--color-primary-fg: oklch(0.97 0.022 98);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 80%, var(--color-destructive));
 	--color-destructive: oklch(0.6 0.244 25);
-	--color-destructive-fg: oklch(0.2 0.006 265);
+	--color-destructive-fg: oklch(0.97 0.022 98);
 	--color-success: oklch(0.62 0.13 158);
 	--color-success-fg: oklch(0.2 0.006 265);
 	--color-warning: oklch(0.8 0.15 88);
@@ -482,31 +484,39 @@
 	:root[data-theme='signalnine']:not(.dark) {
 		color-scheme: light;
 
-		--color-1: oklch(1 0 0); /* #ffffff */
-		--color-2: oklch(0.97 0.014 268.5); /* #f1f5ff */
-		--color-3: oklch(0.944 0.025 271.1); /* #e6ecfe */
-		--color-4: oklch(0.887 0.037 265.1); /* #cedaf3 */
-		--color-5: oklch(0.766 0.0565 265.7); /* #a2b3d8 — rgb(162,179,216) */
+		--color-1: oklch(1 0 0); /* #ffffff  page */
+		--color-2: oklch(0.9439 0.0251 271.14); /* #e6ecfe  card fill */
+		--color-3: oklch(0.887 0.0368 265.13); /* #cedaf3  border */
+		--color-4: oklch(0.844 0.0447 265.6); /* #bcccea */
+		--color-5: oklch(0.7667 0.0612 261.83); /* #9eb4db  the measured dominant rule */
 		--color-6: oklch(0.7 0.074 263);
-		--color-7: oklch(0.631 0.0915 260.3); /* #698ac1 */
-		--color-8: oklch(0.585 0.062 261);
-		--color-9: oklch(0.548 0.031 261);
-		--color-10: oklch(0.51 0 0); /* #666666 */
+		--color-7: oklch(0.631 0.0915 260.33); /* #698ac1  muted text */
+		--color-8: oklch(0.57 0.12 262);
+		--color-9: oklch(0.51 0 0); /* #666666 */
+		--color-10: oklch(0.3855 0.1534 266.07); /* #1d3994  link text */
 		--color-11: oklch(0.16 0.008 266);
-		--color-12: oklch(0 0 0); /* #000000 */
+		--color-12: oklch(0 0 0); /* #000000  body text */
 
+		/* Repointed off the conventional steps on purpose — these name the roles
+		 * yahoo.co.jp actually paints, so each points at the step holding its
+		 * measured colour rather than the step other themes happen to use.
+		 * (border is back on the conventional step 5, which now holds the
+		 * measured dominant rule #9eb4db.) */
 		--color-border: var(--color-5);
 		--color-surface: var(--color-2);
-		--color-hover: oklch(0.955 0.02 270);
+		--color-hover: oklch(0.97 0.014 268.5); /* #f1f5ff */
 		--color-fg: var(--color-11);
 		--color-bright: var(--color-12);
-		--color-muted: var(--color-10);
+		--color-muted: var(--color-7);
+		--color-link: var(--color-10);
+		/* Cards read --era-surface-bg, which the surface contract defines as
+		 * --color-2 — so the card fill follows from the scale, no override. */
 
 		--color-primary: oklch(0.596 0.22 265.8); /* #4070ff */
 		--color-primary-fg: oklch(1 0 0);
 		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
 		--color-destructive: oklch(0.59 0.242 27.7); /* #eb0013 */
-		--color-destructive-fg: oklch(0.16 0.008 266);
+		--color-destructive-fg: oklch(1 0 0);
 		--color-success: oklch(0.58 0.15 152);
 		--color-success-fg: oklch(1 0 0);
 		--color-warning: oklch(0.76 0.145 80);
@@ -517,31 +527,39 @@
 [data-theme='signalnine'].light {
 	color-scheme: light;
 
-	--color-1: oklch(1 0 0); /* #ffffff */
-	--color-2: oklch(0.97 0.014 268.5); /* #f1f5ff */
-	--color-3: oklch(0.944 0.025 271.1); /* #e6ecfe */
-	--color-4: oklch(0.887 0.037 265.1); /* #cedaf3 */
-	--color-5: oklch(0.766 0.0565 265.7); /* #a2b3d8 — rgb(162,179,216) */
+	--color-1: oklch(1 0 0); /* #ffffff  page */
+	--color-2: oklch(0.9439 0.0251 271.14); /* #e6ecfe  card fill */
+	--color-3: oklch(0.887 0.0368 265.13); /* #cedaf3  border */
+	--color-4: oklch(0.844 0.0447 265.6); /* #bcccea */
+	--color-5: oklch(0.7667 0.0612 261.83); /* #9eb4db  the measured dominant rule */
 	--color-6: oklch(0.7 0.074 263);
-	--color-7: oklch(0.631 0.0915 260.3); /* #698ac1 */
-	--color-8: oklch(0.585 0.062 261);
-	--color-9: oklch(0.548 0.031 261);
-	--color-10: oklch(0.51 0 0); /* #666666 */
+	--color-7: oklch(0.631 0.0915 260.33); /* #698ac1  muted text */
+	--color-8: oklch(0.57 0.12 262);
+	--color-9: oklch(0.51 0 0); /* #666666 */
+	--color-10: oklch(0.3855 0.1534 266.07); /* #1d3994  link text */
 	--color-11: oklch(0.16 0.008 266);
-	--color-12: oklch(0 0 0); /* #000000 */
+	--color-12: oklch(0 0 0); /* #000000  body text */
 
+	/* Repointed off the conventional steps on purpose — these name the roles
+	 * yahoo.co.jp actually paints, so each points at the step holding its
+	 * measured colour rather than the step other themes happen to use.
+	 * (border is back on the conventional step 5, which now holds the
+	 * measured dominant rule #9eb4db.) */
 	--color-border: var(--color-5);
 	--color-surface: var(--color-2);
-	--color-hover: oklch(0.955 0.02 270);
+	--color-hover: oklch(0.97 0.014 268.5); /* #f1f5ff */
 	--color-fg: var(--color-11);
 	--color-bright: var(--color-12);
-	--color-muted: var(--color-10);
+	--color-muted: var(--color-7);
+	--color-link: var(--color-10);
+	/* Cards read --era-surface-bg, which the surface contract defines as
+	 * --color-2 — so the card fill follows from the scale, no override. */
 
 	--color-primary: oklch(0.596 0.22 265.8); /* #4070ff */
 	--color-primary-fg: oklch(1 0 0);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
 	--color-destructive: oklch(0.59 0.242 27.7); /* #eb0013 */
-	--color-destructive-fg: oklch(0.16 0.008 266);
+	--color-destructive-fg: oklch(1 0 0);
 	--color-success: oklch(0.58 0.15 152);
 	--color-success-fg: oklch(1 0 0);
 	--color-warning: oklch(0.76 0.145 80);

package/dist/ui/badge/badge.svelte.d.ts

@@ -1,28 +1,28 @@
 export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     tone: {
-        default: string;
-        accent: string;
-        destructive: string;
-        success: string;
-        warning: string;
+        default: "bg-hover text-fg";
+        accent: "bg-primary text-primary-fg";
+        destructive: "bg-destructive text-destructive-fg";
+        success: "bg-success text-success-fg";
+        warning: "bg-warning text-warning-fg";
     };
 }, undefined, "inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none has-[svg]:gap-(--era-inset-xxs) era-text-trim", {
     tone: {
-        default: string;
-        accent: string;
-        destructive: string;
-        success: string;
-        warning: string;
+        default: "bg-hover text-fg";
+        accent: "bg-primary text-primary-fg";
+        destructive: "bg-destructive text-destructive-fg";
+        success: "bg-success text-success-fg";
+        warning: "bg-warning text-warning-fg";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
-        default: string;
-        accent: string;
-        destructive: string;
-        success: string;
-        warning: string;
+        default: "bg-hover text-fg";
+        accent: "bg-primary text-primary-fg";
+        destructive: "bg-destructive text-destructive-fg";
+        success: "bg-success text-success-fg";
+        warning: "bg-warning text-warning-fg";
     };
-}, undefined, "inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none has-[svg]:gap-(--era-inset-xxs) era-text-trim", unknown, unknown, undefined>>;
+}, undefined>>;
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {

package/dist/ui/bar/bar.svelte.d.ts

@@ -1,22 +1,22 @@
 export declare const barVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
+        md: "h-(--era-h-md) rounded-(--era-rd-md)";
+        lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
     };
 }, undefined, "flex items-center gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm) era-text-trim", {
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
+        md: "h-(--era-h-md) rounded-(--era-rd-md)";
+        lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
+        md: "h-(--era-h-md) rounded-(--era-rd-md)";
+        lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
     };
-}, undefined, "flex items-center gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm) era-text-trim", unknown, unknown, undefined>>;
+}, undefined>>;
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {