@signal9/era-ui 13.0.0 → 14.0.1

package/dist/ai/conversations/conversations-item.svelte

@@ -129,11 +129,11 @@
 <div
 	data-active={active || undefined}
 	class={cn(
-		// The trailing buttons are xxs-tier icon buttons: h-pill box + h-icon glyph =
-		// 2px of air around the glyph (xs/icon would hug it flush — density.css:
-		// "xs IS the icon tier"). pr is their concentric inset: a button's rounded
-		// box nests in the row's rd-md corner only when its right gap equals
-		// rd-md − rd-xxs = xxs-inset-md (3/5/7), which its vertical gap already is
+		// The trailing buttons are pill-tier icon buttons: h-pill box + h-icon glyph =
+		// 2px of air around the glyph (the icon tier would hug it flush — density.css:
+		// the icon tier IS the glyph). pr is their concentric inset: a button's rounded
+		// box nests in the row's rd-control corner only when its right gap equals
+		// rd-control − rd-pill = pill-inset-control (3/5/7), which its vertical gap already is
 		// via items-center. pl stays inset-md so the leading glyph + title align
 		// with the group heading (a bare glyph has no corner to nest).
 		//

package/dist/docs/button.md

@@ -6,7 +6,7 @@
 </script>
 
 <Button onclick={() => console.log('clicked')}>Save</Button>
-<Button tone="accent" size="sm">Confirm</Button>
+<Button tone="accent" size="chip">Confirm</Button>
 <Button tone="destructive" variant="link">Delete</Button>
 <Button icon size="icon" aria-label="Close"><X /></Button>
 ```

package/dist/docs/component-docs-core.js

@@ -1,4 +1,4 @@
-import { PACKAGE } from './package-name.js';
+import { importLine } from './consumer-import.js';
 import { extractProps } from './extract-props.js';
 export function buildComponentDocFromSources(entry, sources, appendix) {
     const { slug, name, description } = entry;
@@ -12,7 +12,7 @@ export function buildComponentDocFromSources(entry, sources, appendix) {
         }
         return lines.join('\n');
     }
-    lines.push('## Import', '', '```ts', `import { ${root.alias} } from "${PACKAGE}/${slug}";`, '```', '');
+    lines.push('## Import', '', '```ts', importLine(root.kind, root.alias, slug), '```', '');
     const subs = sources.subExportsBySlug[slug] ?? [];
     const files = sources.svelteBySlug[slug] ?? {};
     if (root.kind === 'namespace') {

package/dist/docs/consumer-import.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The import line a CONSUMER writes, and the two ways it has been wrong.
+ *
+ * WRONG ONCE (fixed in 12.1.1): the docs printed `$lib/ui/<slug>`, a SvelteKit
+ * alias that resolves inside this repo and nowhere else.
+ *
+ * WRONG AGAIN, and this one survived that fix because it is a different
+ * mistake: every component was documented with NAMED import syntax. That is
+ * right for `export { Button }` and silently wrong for `export * as PinInput`,
+ * where the component's own index exports `Root` and `Cell` and no `PinInput`
+ * at all. `import { PinInput } from '@signal9/era-ui/pin-input'` therefore
+ * type-checks, builds, and evaluates to `undefined` — it fails at RENDER, and
+ * the docs are the only place a consumer could have learned otherwise.
+ *
+ * The shape is decided by how src/lib/ui/index.ts re-exports the component,
+ * which is a barrel consumers cannot import — so the two spellings have to be
+ * translated here rather than copied from it.
+ *
+ * npm's name deliberately: the package publishes under two names
+ * (`@sig-nine/era-ui` on GitHub Packages, where the scope must match the repo
+ * owner) and npm's is the one a reader can install without auth.
+ *
+ * Its own module, with no imports of its own, because the node doc builder
+ * loads it through --experimental-strip-types — which cannot follow the `.js`
+ * specifiers the rest of src/lib/docs uses.
+ */
+export declare const PACKAGE = "@signal9/era-ui";
+/** How a component is re-exported by the internal barrel. */
+export type ImportKind = 'named' | 'namespace';
+/** The import statement, in the spelling that actually resolves. */
+export declare function importLine(kind: ImportKind, alias: string, slug: string): string;
+/**
+ * The symbol a consumer must be able to reach, given the documented import.
+ * For a namespace import that is nothing — `import * as X` always binds — so
+ * only named imports can be checked against the component's own exports.
+ */
+export declare function requiredExport(kind: ImportKind, alias: string): string | null;

package/dist/docs/consumer-import.js

@@ -0,0 +1,42 @@
+/**
+ * The import line a CONSUMER writes, and the two ways it has been wrong.
+ *
+ * WRONG ONCE (fixed in 12.1.1): the docs printed `$lib/ui/<slug>`, a SvelteKit
+ * alias that resolves inside this repo and nowhere else.
+ *
+ * WRONG AGAIN, and this one survived that fix because it is a different
+ * mistake: every component was documented with NAMED import syntax. That is
+ * right for `export { Button }` and silently wrong for `export * as PinInput`,
+ * where the component's own index exports `Root` and `Cell` and no `PinInput`
+ * at all. `import { PinInput } from '@signal9/era-ui/pin-input'` therefore
+ * type-checks, builds, and evaluates to `undefined` — it fails at RENDER, and
+ * the docs are the only place a consumer could have learned otherwise.
+ *
+ * The shape is decided by how src/lib/ui/index.ts re-exports the component,
+ * which is a barrel consumers cannot import — so the two spellings have to be
+ * translated here rather than copied from it.
+ *
+ * npm's name deliberately: the package publishes under two names
+ * (`@sig-nine/era-ui` on GitHub Packages, where the scope must match the repo
+ * owner) and npm's is the one a reader can install without auth.
+ *
+ * Its own module, with no imports of its own, because the node doc builder
+ * loads it through --experimental-strip-types — which cannot follow the `.js`
+ * specifiers the rest of src/lib/docs uses.
+ */
+export const PACKAGE = '@signal9/era-ui';
+/** The import statement, in the spelling that actually resolves. */
+export function importLine(kind, alias, slug) {
+    const spec = `"${PACKAGE}/${slug}"`;
+    return kind === 'namespace'
+        ? `import * as ${alias} from ${spec};`
+        : `import { ${alias} } from ${spec};`;
+}
+/**
+ * The symbol a consumer must be able to reach, given the documented import.
+ * For a namespace import that is nothing — `import * as X` always binds — so
+ * only named imports can be checked against the component's own exports.
+ */
+export function requiredExport(kind, alias) {
+    return kind === 'named' ? alias : null;
+}

package/dist/docs/css-utilities.js

@@ -248,6 +248,17 @@ const INTRO = [
     '| `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-`,',