@signal9/era-ui 12.1.2 → 14.0.0

package/dist/dev/audit-overlay.svelte

@@ -59,7 +59,7 @@
 
 {#if dev && open}
 	<div
-		class="fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-96 flex-col overflow-hidden rounded-control bg-surface font-mono text-body shadow-[inset_0_0_0_0.5px_var(--color-border),var(--era-shadow)]"
+		class="fixed right-4 bottom-4 z-debug flex max-h-[70vh] w-96 flex-col overflow-hidden rounded-control bg-surface font-mono text-body shadow-[inset_0_0_0_0.5px_var(--color-border),var(--era-shadow)]"
 	>
 		<header
 			class="flex items-center gap-icon-inset-chip px-inset-chip py-gutter shadow-[inset_0_-0.5px_0_0_var(--color-border)]"

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

@@ -1,4 +1,4 @@
-import { PACKAGE } from './package-name.js';
+import { PACKAGE, 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

@@ -175,7 +175,12 @@ export function themeKeyClasses(themeKey, prefixes = THEME_CLASS_PREFIXES) {
  * the whole run, so the radius ladder or the spacing scale documents once.
  */
 function parseTheme(file, source) {
-    const theme = source.match(/@theme[^{]*\{([\s\S]*?)\n\}/);
+    // Anchored to the start of a line: `@theme` also appears in PROSE (the layering
+    // comment in index.css explains that @utility and @theme are Tailwind's to
+    // place), and an unanchored match happily started inside that comment, ran to
+    // the next `{` it found, and returned garbage — silently dropping every
+    // theme-derived class from the docs.
+    const theme = source.match(/^@theme[^{]*\{([\s\S]*?)\n\}/m);
     if (!theme)
         return [];
     const body = theme[1];
@@ -243,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-`,',

package/dist/docs/notes.md

@@ -1,18 +1,19 @@
 ## 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`.
 
@@ -46,7 +47,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: {