@signal9/era-ui 26.1.1 → 28.0.0

package/dist/ui/nav/nav-item.svelte.d.ts

@@ -5,48 +5,64 @@
  * `filled` is the raised control: bg-fill and the pressed shadow, held on
  * hover so it does not spring back up on bevel. Unchanged.
  *
- * `link` needed a different answer, and two obvious ones are wrong.
+ * `link` is DECORATION ONLY. The current item is not bolder, and not a
+ * different colour. Both of those were tried; here is why neither is here.
  *
- * A full-strength underline alone is the HOVER state — era-link is already
- * underlined at rest (currentColor at 30%) and hover resolves it to full ink,
- * so a current item painted that way reads as permanently hovered.
+ * COLOUR CANNOT CARRY IT. `text-bright` is a zero delta — --color-link IS
+ * --color-bright in the default theme — and on themes pointing link at
+ * --color-primary or --color-10 it REVERSES the emphasis, turning the
+ * current item neutral while its neighbours stay coloured.
  *
- * `text-bright` does nothing. --color-link IS --color-bright in the default
- * theme, so the delta is zero — measured, after writing it. Worse, themes
- * that point link at --color-primary or --color-10 would have it REVERSE the
- * emphasis: the current item goes neutral while its neighbours stay coloured.
+ * Knocking the OTHER items back so the current one can read as brighter is
+ * the obvious repair, and it does not survive the theme set either. Measured
+ * as composited contrast against --color-1, a 70% knock-back leaves
+ * sand/light at 3.59:1 — under the 4.5 floor — while every other theme sits
+ * between 4.74 and 7.86. The binding constraint is not whether a theme's
+ * link hue is muted (signalnine's --color-10 survives fine); it is how much
+ * headroom that theme's link had to begin with, and sand's light pair starts
+ * at 6.90:1. The deepest knock-back legal everywhere is around 88%, which is
+ * not a cue anyone would notice. A consumer who wants it on a theme with the
+ * headroom can do it in one line, since the decoration derives from
+ * currentColor and follows.
  *
- * So the current face uses the two axes that are independent of whatever hue
- * a theme gives links: decoration WEIGHT (2px, which no other state uses) and
- * font weight. Both survive every theme, and hover keeps its own meaning for
- * the items that are not current.
+ * WEIGHT WAS HERE AND IS NOT ANY MORE. It went in as a second axis beside
+ * the decoration, then had to be raised 500 -> 600 (012eeed) because in a
+ * monospace face 400 -> 500 keeps the advance width and reads as almost
+ * nothing — and era's default font axis is mono. That fix was correct about
+ * its own facts and wrong about the conclusion: an axis that has to be
+ * retuned per font stack is not a second axis, it is a liability with a
+ * setting. At 600 it is unmistakable in mono and heavy-handed in sans, which
+ * is how the next consumer came to report the opposite complaint — that the
+ * current item should not go bold at all.
  *
- * THE FONT WEIGHT IS 600, NOT 500, AND THAT IS THE WHOLE POINT OF IT. era's
- * default font axis is mono, and in a monospace face 400 -> 500 is very
- * nearly nothing: the glyphs keep their advance width, so there is no shape
- * change to notice and only a trace more ink. Rendered at 8x in the shipped
- * stack, 400 and 500 are hard to tell apart and 600 is unmistakable. At 500
- * the "two axes" were one axis for most consumers, since most of them are on
- * the default. Reported by a consumer running a mono nav, who could see the
- * decoration doing all the work.
+ * The report behind 012eeed already contained the answer: "all the signal
+ * was coming from the 2px decoration." That was offered as the problem. It
+ * is the solution. The decoration is three-way distinct on its own, in every
+ * font and every theme, because it is the same ink at three strengths:
  *
- * 600 costs no layout: measured across weights, the advance width is
- * identical in mono, so the bar does not reflow when the route changes.
+ *   at rest   auto thickness, currentColor at 30%   (era-link's whisper)
+ *   hover     auto thickness, currentColor at 100%
+ *   current   2px thickness,  currentColor at 100%
+ *
+ * So a current item cannot read as "permanently hovered" — hover is thin and
+ * current is thick, and the two are told apart by the axis neither shares
+ * with colour. Dropping the weight also removes the last thing in this
+ * variant that could reflow a bar on a route change.
  */
 export declare const navItemVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: "no-underline aria-[current=page]:bg-fill aria-[current=page]:text-bright aria-[current=page]:shadow-pressed aria-[current=page]:hover:shadow-pressed";
-        link: "aria-[current=page]:font-semibold aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
+        link: "aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
     };
 }, undefined, undefined, {
     variant: {
         filled: "no-underline aria-[current=page]:bg-fill aria-[current=page]:text-bright aria-[current=page]:shadow-pressed aria-[current=page]:hover:shadow-pressed";
-        link: "aria-[current=page]:font-semibold aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
+        link: "aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         filled: "no-underline aria-[current=page]:bg-fill aria-[current=page]:text-bright aria-[current=page]:shadow-pressed aria-[current=page]:hover:shadow-pressed";
-        link: "aria-[current=page]:font-semibold aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
+        link: "aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
     };
 }, undefined>>;
 import type { Snippet } from 'svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "26.1.1",
+	"version": "28.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -25,15 +25,16 @@
 		"check:classes": "node --experimental-strip-types scripts/check-classes.ts",
 		"check:twmerge": "node --experimental-strip-types scripts/check-twmerge.ts",
 		"build:llm-docs": "node --experimental-strip-types scripts/build-llm-docs.ts",
-		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:package-name && npm run check:double-edge && npm run build:llm-docs",
-		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:package-name && npm run check:double-edge",
+		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:double-edge && npm run build:llm-docs",
+		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:double-edge",
 		"test": "npm run test:visual",
 		"check:doc-tokens": "node --experimental-strip-types scripts/check-doc-tokens.ts",
 		"check:audit-controls": "node --experimental-strip-types scripts/check-audit-controls.ts",
 		"check:specimen-coverage": "node --experimental-strip-types scripts/check-specimen-coverage.ts",
 		"check:eslint-rules": "node --experimental-strip-types scripts/check-eslint-rules.ts",
-		"check:package-name": "node --experimental-strip-types scripts/check-package-name.ts",
-		"check:double-edge": "node --experimental-strip-types scripts/check-double-edge.ts"
+		"check:install": "node --experimental-strip-types scripts/check-install.ts",
+		"check:double-edge": "node --experimental-strip-types scripts/check-double-edge.ts",
+		"verify:published": "node scripts/verify-published.mjs"
 	},
 	"files": [
 		"dist",

package/skill/SKILL.md

@@ -181,10 +181,19 @@ a component into the role. Full reference (including every named scale above):
 
 ## Composing the library
 
+One entry point per component — nothing re-exports them together, so an import
+can never pull in a component you did not ask for. The ROOT is the system layer
+(`cn`, `tv`, the axis registry, `ModeProvider`) and holds no components.
+
 ```svelte
 <script lang="ts">
-	import { Button, Badge, OS, AI } from '@signal9/era-ui';
-	import * as Select from '@signal9/era-ui'; // namespaced parts: Select.Root…
+	import { Button } from '@signal9/era-ui/button';
+	import { Badge } from '@signal9/era-ui/badge';
+	import * as Select from '@signal9/era-ui/select'; // namespaced parts: Select.Root…
+	import { Desktop } from '@signal9/era-ui/os';
+	import { Conversation } from '@signal9/era-ui/ai/conversation';
+
+	import { cn } from '@signal9/era-ui'; // the root: system only
 </script>
 ```
 
@@ -192,8 +201,8 @@ a component into the role. Full reference (including every named scale above):
   through; style via `class` (merged with tailwind-merge, consumer wins — the
   named classes conflict-resolve against internals, so `class="h-bar"` on a
   control-tier control just works).
-- `OS` (or `@signal9/era-ui/os`): WindowManager + workspaces, Desktop,
-  Window, Taskbar (built-in command bar). `AI` (or `/ai`): Conversation,
+- `@signal9/era-ui/os`: WindowManager + workspaces, Desktop, Pane, Taskbar
+  (built-in command bar), Toaster. `@signal9/era-ui/ai/<part>`: Conversation,
   Message, Response, PromptInput, Tool/Reasoning/Task over the Step primitive.
 - List-item keyboard highlight is `data-[highlighted]:bg-hover` — never
   `hover:text-bright` on items.

package/dist/docs/llms-txt.d.ts

@@ -1,2 +0,0 @@
-export declare function buildLlmsTxt(origin?: string): string;
-export declare function buildLlmsFullTxt(): string;

package/dist/docs/llms-txt.js

@@ -1,100 +0,0 @@
-import { docs, hasDoc, listEntries } from './index.js';
-import { buildUtilitiesIndex } from './css-utilities.js';
-import { utilities } from './utilities.js';
-import { modes, defaultMode, surfaces, defaultSurface, corners, defaultCorners, fonts, defaultFont, motions, defaultMotion } from '../ui/provider/index.js';
-const H1 = '# era-ui';
-const MISSION = '> A Svelte 5 + Bits UI component library. Every surface — heights, paddings, radii, gaps — derives from a single spacing atom, so density is a one-attribute override at any scope.';
-function orientation(origin) {
-    const axisList = (arr, dflt) => arr.map((v) => (v === dflt ? `**${v}** (default)` : v)).join(' · ');
-    return [
-        '## Using the library',
-        '',
-        '```ts',
-        'import { Button, Table, Select } from "@signal9/era-ui";',
-        'import "@signal9/era-ui/css";',
-        '```',
-        '',
-        'Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …). Namespace exports compose primitives via sub-components (`Table.Root`, `Table.Row`, `Select.Trigger`, `Dialog.Content`, …). Every wrapper forwards unknown props to its underlying element or bits-ui primitive, so standard HTML attributes (`class`, `style`, event handlers, `aria-*`, `data-*`) work without ceremony.',
-        '',
-        '## Scoped overrides',
-        '',
-        'Five orthogonal axes are exposed as HTML attributes on any ancestor. The entire subtree re-tiers through CSS inheritance — no JS, no context provider.',
-        '',
-        `- \`data-mode\`: ${axisList(modes, defaultMode)} — adjusts the spacing atom (\`--era-sp\`).`,
-        `- \`data-surface\`: ${axisList(surfaces, defaultSurface)} — swaps the background treatment.`,
-        `- \`data-corners\`: ${axisList(corners, defaultCorners)} — scales all radii toward 0.`,
-        `- \`data-font\`: ${axisList(fonts, defaultFont)} — switches the font stack.`,
-        `- \`data-motion\`: ${axisList(motions, defaultMotion)} — sets animation speed (\`--era-duration\` / \`--era-ease\`), independent of density.`,
-        '',
-        'The `Mode` component is a thin wrapper that applies these attributes plus optional `primary` / `primaryFg` color overrides to a subtree.',
-        '',
-        '## Spacing system',
-        '',
-        'One atom, `--era-sp` (8px dense / 10px balanced / 12px spacious), drives everything. The tier ladder is:',
-        '',
-        '```',
-        'xs   = sp + 6       icons, tight affordances        14 / 16 / 18 px',
-        'xxs  = sp + 10      nested pill (badge, chip)       18 / 20 / 22 px',
-        'sm   = 2·sp + 6     standalone pill (kv)            22 / 26 / 30 px',
-        'md   = 3·sp         buttons, inputs, triggers       24 / 30 / 36 px',
-        'lg   = 4·sp         bars, top-level containers      32 / 40 / 48 px',
-        '```',
-        '',
-        'Heights (`--era-h-*`), insets (`--era-inset-*`), radii (`--era-rd-*`), and concentric gaps (`--era-icon-inset-chip`, `--era-pill-inset-control`, …) are all `calc()` chains off `--era-sp`. Never hard-code pixel values — setting `data-mode` on any ancestor re-derives the whole subtree. Type is the second density input (12 px at dense, 14 px above); the spacing atom moves with it.',
-        '',
-        '## Per-component docs',
-        '',
-        `Every component has a passive markdown doc at \`${origin}/<slug>.md\`.`,
-        `Examples: \`${origin}/button.md\`, \`${origin}/select.md\`, \`${origin}/table.md\`.`,
-        `Full concatenated reference: \`${origin}/llms-full.txt\`.`,
-        '',
-        'Each page is generated from the component source, so props/variants/defaults stay in sync with the code automatically.'
-    ].join('\n');
-}
-function utilitiesSection(origin) {
-    return [
-        '## CSS utilities',
-        '',
-        'Classes, not components — they need no import beyond the stylesheet. Reach for one of these before hand-rolling the same styling or bending a component into the role.',
-        '',
-        ...buildUtilitiesIndex(utilities),
-        '',
-        `Full reference (what each emits, when to use it): \`${origin}/utilities.md\`. Machine-readable list: \`${origin}/utilities.json\`.`
-    ].join('\n');
-}
-export function buildLlmsTxt(origin = '') {
-    const entries = listEntries();
-    const lines = [H1, '', MISSION, '', orientation(origin), ''];
-    if (entries.length) {
-        lines.push('## Components', '');
-        lines.push(entries.map((e) => e.slug).join(', '), '');
-    }
-    lines.push(utilitiesSection(origin), '');
-    return lines.join('\n');
-}
-// Module-init-cached: the concatenated reference has no request-dependent
-// inputs, so we pay its ~80 KB assembly cost once per worker instance instead
-// of on every request.
-let llmsFullTxtCache;
-export function buildLlmsFullTxt() {
-    if (llmsFullTxtCache !== undefined)
-        return llmsFullTxtCache;
-    const entries = listEntries().filter((e) => hasDoc(e.slug));
-    const parts = [
-        H1,
-        '',
-        MISSION,
-        '',
-        orientation(''),
-        '',
-        utilitiesSection(''),
-        '',
-        '<!-- Full component documentation, concatenated. The utilities page below carries the CSS each utility emits. -->',
-        ''
-    ];
-    for (const e of entries) {
-        parts.push(`<!-- begin: ${e.slug} -->`, '', docs[e.slug].trim(), '', `<!-- end: ${e.slug} -->`, '');
-    }
-    llmsFullTxtCache = parts.join('\n');
-    return llmsFullTxtCache;
-}