@wildwinter/app-shell 0.55.0 → 0.57.0

package/dist/tokens.css

@@ -1,6 +1,6 @@
 /* src/tokens.css */
 :root {
-  color-scheme: light dark;
+  color-scheme: var(--color-scheme, light dark);
   --ok: light-dark(#3f7d49, #79bd80);
   --on-accent: light-dark(#ffffff, #1b1916);
   --chrome-size: 14px;

package/dist/tokens.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* ============================================================================\n   Design-token GRAMMAR - the app-agnostic layer (design-language.md section 4).\n\n   The shared half of \"two palettes, one grammar\": the scales that are IDENTICAL\n   across the editor family - elevation, motion, radius, scrollbar chrome. Each\n   app supplies its own colour + font VALUES (its palette) over this grammar in\n   its own theme.css. Do not add app-specific colours here.\n\n   SCALE. Chrome is sized in px off a 14px base; the reading surface alone\n   scales with the root (\"Chrome has its own scale\", design-language.md\n   section 4, 2026-09-16). Every size in the shell's stylesheets (font-size,\n   padding, gap, margin, width, height) is a pixel value: the navigator, the\n   inspector, the bars, the dialogs and the controls in them read the same in\n   every app of the family whatever the reading size is. `em` survives only\n   where a rule deliberately scales with its own font; line-heights stay\n   unitless. The values are what Storyletter rendered at 0.39.0 (rem x 16, to\n   the nearest half pixel), so the conversion moved nothing there and brought\n   Patterpad, whose chrome had grown 7 to 10 percent with its reading root,\n   back to the same size. No `rem` in a chrome rule; the test suite greps.\n   ============================================================================ */\n\n:root {\n  color-scheme: light dark;\n\n  /* The semantic set's third member, and the only COLOUR in this file.\n\n     It is here because it kept not being anywhere. An app's palette owns\n     --danger and --warn; neither owned \"all is well\", so a real need - the live\n     debug link, an in-sync shard, a saved document - was met with a raw green\n     literal that could not theme-shift (surface-audit-shell.md F2). A default\n     in the grammar layer means the shell's own widgets may say it, and an app\n     that has not thought about green yet still gets a green that works on both\n     grounds. Every palette should override it in its theme.css, as it does the\n     other two: this is a floor, not a decision. */\n  --ok: light-dark(#3f7d49, #79bd80);\n\n  /* The ink that sits ON the accent: a primary button's label, a selected\n     row's text. Every palette overrides it (a light tan accent on a dark\n     palette wants dark ink, not white); this floor only stops the shell's own\n     primary buttons from falling back to a raw #fff literal, which is what\n     they did until 0.39.0 and which read white-on-tan on Night and Slate. */\n  --on-accent: light-dark(#ffffff, #1b1916);\n\n  /* The chrome base. `.shell-dialog`, `.pane-shell` and `.swin-head` set it as\n     their font-size, so unstyled text inside them lands at 14px regardless of\n     the app's root; a rule that wants the base by name reads it here. Not a\n     scale factor: the sizes below it are literal px, on purpose. */\n  --chrome-size: 14px;\n\n  /* The one scrim behind every modal in the family (confirm, settings,\n     identity, about, notes). Four recipes had grown across five files. */\n  --scrim: color-mix(in oklab, var(--ink) 28%, transparent);\n\n  /* Elevation: three tiers by how far a surface floats (resting cards,\n     floating menus/popovers, full overlays). Theme-agnostic black so it\n     deepens naturally on the dark palettes. */\n  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);\n  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.14);\n  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.28);\n\n  /* Motion: one easing curve + a small duration scale, plus the shared\n     panel/backdrop/screen enter-exit vocabulary. Nothing pops. */\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --dur-quick: 120ms;\n  --dur-base: 150ms;\n  --dur-settle: 200ms;\n  --dur-slow: 1s;\n  --dur-panel: 260ms;\n  --dur-exit: 170ms;\n  --anim-panel-in: panel-in var(--dur-panel) var(--ease-standard);\n  --anim-backdrop-in: backdrop-in var(--dur-settle) var(--ease-standard);\n  --anim-screen-in: screen-in var(--dur-panel) var(--ease-standard);\n  --anim-panel-out: panel-out var(--dur-exit) var(--ease-standard) forwards;\n  --anim-backdrop-out: backdrop-out var(--dur-exit) var(--ease-standard) forwards;\n  /* The long-job strip's indeterminate band (job.css draws the keyframes). */\n  --anim-job-band: job-band 1.4s var(--ease-standard) infinite;\n\n  /* Corner radius: four steps cover every surface. */\n  --radius-sm: 6px;\n  --radius-md: 10px;\n  --radius-lg: 14px;\n  --radius-pill: 999px;\n\n  /* Scrollbar thumb: a translucent ink, so it adapts per palette. */\n  --scroll-thumb: color-mix(in oklab, var(--ink) 20%, transparent);\n  --scroll-thumb-hover: color-mix(in oklab, var(--ink) 40%, transparent);\n}\n\n/* A drawn icon (`iconNode` / `iconHtml` in icons.ts stamp `data-icon`). A\n   block, so it never sits on a text baseline with descender space under it;\n   no flex shrink, so a crowded row squeezes the text and not the picture; and\n   no pointer events, so a click lands on the button and never on the drawing\n   (a handler comparing `event.target` to its button would otherwise miss).\n   Colour is inherited: every drawing is currentColor. */\n[data-icon] { display: block; flex: none; pointer-events: none; }\n\n/* The family's keyboard focus ring: one rule, zero specificity (:where), so a\n   component may draw its own and win without !important. Until 0.39.0\n   Patterpad's main window had no ring at all and Storyletter carried five\n   copies of this line. Mouse focus stays quiet; only :focus-visible draws. */\n:where(button, [role=\"button\"], input, select, textarea, summary, a[href], [tabindex]):focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n\n/* The tracked uppercase caption, kept for exactly two jobs: table column heads\n   and screenplay character cues, where uppercase is the domain's own\n   convention (design-language.md, \"Captions are words, not overlines\"). A\n   section caption anywhere else is sentence-case text at label size, weight\n   600, in the UI face, which is what the shell's own captions now are. */\n.overline { font: 600 10.5px/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }\n\n* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }\n::-webkit-scrollbar { width: 11px; height: 11px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-corner { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-sm); border: 3px solid transparent; background-clip: padding-box; }\n::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }\n\n@keyframes panel-in { from { opacity: 0; transform: translateY(-9px) scale(0.965); } to { opacity: 1; transform: none; } }\n@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n@keyframes panel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.97); } }\n@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --anim-panel-in: none; --anim-backdrop-in: none; --anim-screen-in: none;\n    --anim-panel-out: none; --anim-backdrop-out: none; --anim-job-band: none;\n  }\n}\n\n/* A floating layer from createFloating (floating.ts) carries this attribute, because its class is\n   the caller's. Never a window-drag region, even over one: Electron gives a click in a drag area to\n   the OS before the page sees it (dialog.css has the whole story, 2026-09-28). */\n[data-shell-layer], [data-shell-layer] * { -webkit-app-region: no-drag; }\n"],"mappings":";AAqBA;AACE,gBAAc,MAAM;AAYpB,QAAM,WAAW,OAAO,EAAE;AAO1B,eAAa,WAAW,OAAO,EAAE;AAMjC,iBAAe;AAIf,WAAS,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAK7C,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,cAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAItC,mBAAiB,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;AACzC,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,cAAY;AACZ,eAAa;AACb,cAAY;AACZ,mBAAiB,SAAS,IAAI,aAAa,IAAI;AAC/C,sBAAoB,YAAY,IAAI,cAAc,IAAI;AACtD,oBAAkB,UAAU,IAAI,aAAa,IAAI;AACjD,oBAAkB,UAAU,IAAI,YAAY,IAAI,iBAAiB;AACjE,uBAAqB,aAAa,IAAI,YAAY,IAAI,iBAAiB;AAEvE,mBAAiB,SAAS,KAAK,IAAI,iBAAiB;AAGpD,eAAa;AACb,eAAa;AACb,eAAa;AACb,iBAAe;AAGf,kBAAgB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AACpD,wBAAsB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAC5D;AAQA,CAAC;AAAa,WAAS;AAAO,QAAM;AAAM,kBAAgB;AAAM;AAMhE,OAAO,QAAQ,CAAC,cAAgB,OAAO,QAAQ,UAAU,SAAS,CAAC,CAAC,OAAO,CAAC,UAAU;AACpF,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;AAOA,CAAC;AAAW,QAAM,IAAI,MAAM,CAAC,EAAE,IAAI;AAAY,kBAAgB;AAAW,kBAAgB;AAAQ,SAAO,IAAI;AAAU;AAEvH;AAAI,mBAAiB;AAAM,mBAAiB,IAAI,gBAAgB;AAAa;AAC7E;AAAsB,SAAO;AAAM,UAAQ;AAAM;AACjD;AAA4B,cAAY;AAAa;AACrD;AAA6B,cAAY;AAAa;AACtD;AAA4B,cAAY,IAAI;AAAiB,iBAAe,IAAI;AAAc,UAAQ,IAAI,MAAM;AAAa,mBAAiB;AAAa;AAC3J,yBAAyB;AAAS,cAAY,IAAI;AAAuB,mBAAiB;AAAa;AAEvG,WAAW;AAAW;AAAO,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAQ;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AACzH,WAAW;AAAc;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AACjE,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW,WAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AAC5G,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAO;AAAE;AACzH,WAAW;AAAe;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AAElE,QAAO,wBAAyB;AAC9B;AACE,qBAAiB;AAAM,wBAAoB;AAAM,sBAAkB;AACnE,sBAAkB;AAAM,yBAAqB;AAAM,qBAAiB;AACtE;AACF;AAKA,CAAC;AAAmB,CAAC,kBAAkB;AAAI,sBAAoB;AAAS;","names":[]}
+{"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* ============================================================================\n   Design-token GRAMMAR - the app-agnostic layer (design-language.md section 4).\n\n   The shared half of \"two palettes, one grammar\": the scales that are IDENTICAL\n   across the editor family - elevation, motion, radius, scrollbar chrome. Each\n   app supplies its own colour + font VALUES (its palette) over this grammar in\n   its own theme.css. Do not add app-specific colours here.\n\n   SCALE. Chrome is sized in px off a 14px base; the reading surface alone\n   scales with the root (\"Chrome has its own scale\", design-language.md\n   section 4, 2026-09-16). Every size in the shell's stylesheets (font-size,\n   padding, gap, margin, width, height) is a pixel value: the navigator, the\n   inspector, the bars, the dialogs and the controls in them read the same in\n   every app of the family whatever the reading size is. `em` survives only\n   where a rule deliberately scales with its own font; line-heights stay\n   unitless. The values are what Storyletter rendered at 0.39.0 (rem x 16, to\n   the nearest half pixel), so the conversion moved nothing there and brought\n   Patterpad, whose chrome had grown 7 to 10 percent with its reading root,\n   back to the same size. No `rem` in a chrome rule; the test suite greps.\n   ============================================================================ */\n\n:root {\n  /* Native controls (an unticked checkbox, a radio, a scrollbar, a select's\n     pop-up, a date field) and every light-dark() below follow this, so it must\n     follow the palette the author chose, not the OS: a light palette under a\n     dark OS drew every unticked checkbox as a dark filled square. Every palette\n     block in an app's theme.css declares `--color-scheme: light` or `dark`;\n     with no palette chosen the fallback follows the OS, as before. */\n  color-scheme: var(--color-scheme, light dark);\n\n  /* The semantic set's third member, and the only COLOUR in this file.\n\n     It is here because it kept not being anywhere. An app's palette owns\n     --danger and --warn; neither owned \"all is well\", so a real need - the live\n     debug link, an in-sync shard, a saved document - was met with a raw green\n     literal that could not theme-shift (surface-audit-shell.md F2). A default\n     in the grammar layer means the shell's own widgets may say it, and an app\n     that has not thought about green yet still gets a green that works on both\n     grounds. Every palette should override it in its theme.css, as it does the\n     other two: this is a floor, not a decision. */\n  --ok: light-dark(#3f7d49, #79bd80);\n\n  /* The ink that sits ON the accent: a primary button's label, a selected\n     row's text. Every palette overrides it (a light tan accent on a dark\n     palette wants dark ink, not white); this floor only stops the shell's own\n     primary buttons from falling back to a raw #fff literal, which is what\n     they did until 0.39.0 and which read white-on-tan on Night and Slate. */\n  --on-accent: light-dark(#ffffff, #1b1916);\n\n  /* The chrome base. `.shell-dialog`, `.pane-shell` and `.swin-head` set it as\n     their font-size, so unstyled text inside them lands at 14px regardless of\n     the app's root; a rule that wants the base by name reads it here. Not a\n     scale factor: the sizes below it are literal px, on purpose. */\n  --chrome-size: 14px;\n\n  /* The one scrim behind every modal in the family (confirm, settings,\n     identity, about, notes). Four recipes had grown across five files. */\n  --scrim: color-mix(in oklab, var(--ink) 28%, transparent);\n\n  /* Elevation: three tiers by how far a surface floats (resting cards,\n     floating menus/popovers, full overlays). Theme-agnostic black so it\n     deepens naturally on the dark palettes. */\n  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);\n  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.14);\n  --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.28);\n\n  /* Motion: one easing curve + a small duration scale, plus the shared\n     panel/backdrop/screen enter-exit vocabulary. Nothing pops. */\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --dur-quick: 120ms;\n  --dur-base: 150ms;\n  --dur-settle: 200ms;\n  --dur-slow: 1s;\n  --dur-panel: 260ms;\n  --dur-exit: 170ms;\n  --anim-panel-in: panel-in var(--dur-panel) var(--ease-standard);\n  --anim-backdrop-in: backdrop-in var(--dur-settle) var(--ease-standard);\n  --anim-screen-in: screen-in var(--dur-panel) var(--ease-standard);\n  --anim-panel-out: panel-out var(--dur-exit) var(--ease-standard) forwards;\n  --anim-backdrop-out: backdrop-out var(--dur-exit) var(--ease-standard) forwards;\n  /* The long-job strip's indeterminate band (job.css draws the keyframes). */\n  --anim-job-band: job-band 1.4s var(--ease-standard) infinite;\n\n  /* Corner radius: four steps cover every surface. */\n  --radius-sm: 6px;\n  --radius-md: 10px;\n  --radius-lg: 14px;\n  --radius-pill: 999px;\n\n  /* Scrollbar thumb: a translucent ink, so it adapts per palette. */\n  --scroll-thumb: color-mix(in oklab, var(--ink) 20%, transparent);\n  --scroll-thumb-hover: color-mix(in oklab, var(--ink) 40%, transparent);\n}\n\n/* A drawn icon (`iconNode` / `iconHtml` in icons.ts stamp `data-icon`). A\n   block, so it never sits on a text baseline with descender space under it;\n   no flex shrink, so a crowded row squeezes the text and not the picture; and\n   no pointer events, so a click lands on the button and never on the drawing\n   (a handler comparing `event.target` to its button would otherwise miss).\n   Colour is inherited: every drawing is currentColor. */\n[data-icon] { display: block; flex: none; pointer-events: none; }\n\n/* The family's keyboard focus ring: one rule, zero specificity (:where), so a\n   component may draw its own and win without !important. Until 0.39.0\n   Patterpad's main window had no ring at all and Storyletter carried five\n   copies of this line. Mouse focus stays quiet; only :focus-visible draws. */\n:where(button, [role=\"button\"], input, select, textarea, summary, a[href], [tabindex]):focus-visible {\n  outline: 2px solid var(--accent);\n  outline-offset: 1px;\n}\n\n/* The tracked uppercase caption, kept for exactly two jobs: table column heads\n   and screenplay character cues, where uppercase is the domain's own\n   convention (design-language.md, \"Captions are words, not overlines\"). A\n   section caption anywhere else is sentence-case text at label size, weight\n   600, in the UI face, which is what the shell's own captions now are. */\n.overline { font: 600 10.5px/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }\n\n* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }\n::-webkit-scrollbar { width: 11px; height: 11px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-corner { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-sm); border: 3px solid transparent; background-clip: padding-box; }\n::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }\n\n@keyframes panel-in { from { opacity: 0; transform: translateY(-9px) scale(0.965); } to { opacity: 1; transform: none; } }\n@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n@keyframes panel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.97); } }\n@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --anim-panel-in: none; --anim-backdrop-in: none; --anim-screen-in: none;\n    --anim-panel-out: none; --anim-backdrop-out: none; --anim-job-band: none;\n  }\n}\n\n/* A floating layer from createFloating (floating.ts) carries this attribute, because its class is\n   the caller's. Never a window-drag region, even over one: Electron gives a click in a drag area to\n   the OS before the page sees it (dialog.css has the whole story, 2026-09-28). */\n[data-shell-layer], [data-shell-layer] * { -webkit-app-region: no-drag; }\n"],"mappings":";AAqBA;AAOE,gBAAc,IAAI,cAAc,EAAE,MAAM;AAYxC,QAAM,WAAW,OAAO,EAAE;AAO1B,eAAa,WAAW,OAAO,EAAE;AAMjC,iBAAe;AAIf,WAAS,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAK7C,cAAY,EAAE,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACpC,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACrC,cAAY,EAAE,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAItC,mBAAiB,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;AACzC,eAAa;AACb,cAAY;AACZ,gBAAc;AACd,cAAY;AACZ,eAAa;AACb,cAAY;AACZ,mBAAiB,SAAS,IAAI,aAAa,IAAI;AAC/C,sBAAoB,YAAY,IAAI,cAAc,IAAI;AACtD,oBAAkB,UAAU,IAAI,aAAa,IAAI;AACjD,oBAAkB,UAAU,IAAI,YAAY,IAAI,iBAAiB;AACjE,uBAAqB,aAAa,IAAI,YAAY,IAAI,iBAAiB;AAEvE,mBAAiB,SAAS,KAAK,IAAI,iBAAiB;AAGpD,eAAa;AACb,eAAa;AACb,eAAa;AACb,iBAAe;AAGf,kBAAgB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AACpD,wBAAsB,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAC5D;AAQA,CAAC;AAAa,WAAS;AAAO,QAAM;AAAM,kBAAgB;AAAM;AAMhE,OAAO,QAAQ,CAAC,cAAgB,OAAO,QAAQ,UAAU,SAAS,CAAC,CAAC,OAAO,CAAC,UAAU;AACpF,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;AAOA,CAAC;AAAW,QAAM,IAAI,MAAM,CAAC,EAAE,IAAI;AAAY,kBAAgB;AAAW,kBAAgB;AAAQ,SAAO,IAAI;AAAU;AAEvH;AAAI,mBAAiB;AAAM,mBAAiB,IAAI,gBAAgB;AAAa;AAC7E;AAAsB,SAAO;AAAM,UAAQ;AAAM;AACjD;AAA4B,cAAY;AAAa;AACrD;AAA6B,cAAY;AAAa;AACtD;AAA4B,cAAY,IAAI;AAAiB,iBAAe,IAAI;AAAc,UAAQ,IAAI,MAAM;AAAa,mBAAiB;AAAa;AAC3J,yBAAyB;AAAS,cAAY,IAAI;AAAuB,mBAAiB;AAAa;AAEvG,WAAW;AAAW;AAAO,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAQ;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AACzH,WAAW;AAAc;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AACjE,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW,WAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW;AAAM;AAAE;AAC5G,WAAW;AAAY;AAAO,aAAS;AAAG,eAAW;AAAM;AAAE;AAAK,aAAS;AAAG,eAAW,WAAW,MAAM,MAAM;AAAO;AAAE;AACzH,WAAW;AAAe;AAAO,aAAS;AAAG;AAAE;AAAK,aAAS;AAAG;AAAE;AAElE,QAAO,wBAAyB;AAC9B;AACE,qBAAiB;AAAM,wBAAoB;AAAM,sBAAkB;AACnE,sBAAkB;AAAM,yBAAqB;AAAM,qBAAiB;AACtE;AACF;AAKA,CAAC;AAAmB,CAAC,kBAAkB;AAAI,sBAAoB;AAAS;","names":[]}

package/dist/value-rows.cjs

@@ -826,13 +826,274 @@ var fieldRowFocus = {
   settle: (row) => keeper.settle(row),
   restore: (row) => keeper.restore(row)
 };
+var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+function isSet(decl, value) {
+  if (value === void 0) return false;
+  if (decl.type === "record" && decl.default === void 0 && isObject(value)) {
+    const fields = decl.fields ?? [];
+    const declared = new Set(fields.map((f) => f.name));
+    if (Object.entries(value).some(([k, v]) => !declared.has(k) && v !== void 0)) return true;
+    return fields.some((f) => isSet(f, value[f.name]));
+  }
+  return extensions.stableStringify(value) !== extensions.stableStringify(extensions.defaultOf(decl));
+}
+function foldCaption(name, set) {
+  return set > 0 ? `${name} (${set} set)` : name;
+}
+function extensionFold() {
+  const open = /* @__PURE__ */ new Set();
+  const shown = /* @__PURE__ */ new Map();
+  const keyOf = (o) => `${o.extension}\0${o.node}`;
+  const visible = (o, setNames) => {
+    const was = shown.get(keyOf(o));
+    const fields = was ? /* @__PURE__ */ new Set([...was.fields, ...setNames]) : new Set(setNames);
+    shown.set(keyOf(o), { fields, used: true });
+    return fields;
+  };
+  const fold = {
+    isOpen: (extension) => open.has(extension),
+    setOpen(extension, on) {
+      if (on) open.add(extension);
+      else open.delete(extension);
+      for (const key of shown.keys()) if (key.startsWith(`${extension}\0`)) shown.delete(key);
+    },
+    sweep() {
+      for (const [key, entry] of shown) {
+        if (!entry.used) shown.delete(key);
+        else entry.used = false;
+      }
+    },
+    section(o) {
+      const sec = el("div", `shell-fold${o.className ? ` ${o.className}` : ""}`);
+      sec.dataset["extension"] = o.extension;
+      const cap = el("button", `shell-fold-cap${o.captionClassName ? ` ${o.captionClassName}` : ""}`);
+      cap.type = "button";
+      const body = el("div", "shell-fold-body");
+      sec.append(cap, body);
+      const draw = () => {
+        const isOpen = open.has(o.extension);
+        const setNames = new Set(o.fields.filter((f) => isSet(f, o.entry?.[f.name])).map((f) => f.name));
+        const show2 = isOpen ? void 0 : visible(o, setNames);
+        cap.replaceChildren(iconNode(isOpen ? "expanded" : "collapsed"), el("span", "shell-fold-name", foldCaption(o.caption, setNames.size)));
+        cap.setAttribute("aria-expanded", String(isOpen));
+        cap.dataset["tip"] = isOpen ? `Show only the fields set here` : `Show every ${o.caption} field`;
+        sec.classList.toggle("shell-fold-open", isOpen);
+        const rows = [...o.lead ?? []];
+        let group;
+        for (const decl of o.fields) {
+          if (show2 && !show2.has(decl.name)) continue;
+          const g = decl.group;
+          if (g !== void 0 && g !== group) {
+            group = g;
+            rows.push(o.group(g));
+          }
+          rows.push(o.row(decl));
+        }
+        rows.push(...o.tail ?? []);
+        body.replaceChildren(...rows);
+      };
+      cap.addEventListener("click", () => {
+        fold.setOpen(o.extension, !open.has(o.extension));
+        draw();
+      });
+      draw();
+      return sec;
+    }
+  };
+  return fold;
+}
+var isObject2 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+function isRecordMap(decl) {
+  return decl.type === "map" && decl.of?.type === "record";
+}
+function recordMapKeyLabel(decl, key, adapter) {
+  const kind = decl.key?.type === "reference" ? decl.key.to ?? "" : void 0;
+  if (kind === void 0 || !adapter) return key;
+  return adapter.nodes(kind).find((n) => n.id === key)?.label ?? adapter.label?.(kind, key) ?? key;
+}
+function valueText(decl, value, adapter) {
+  if (!isSet(decl, value)) return "";
+  if (decl.type === "pick" && typeof value === "string") {
+    const choice = extensions.pickChoices(decl, {
+      ...adapter ? { nodes: (kind) => adapter.nodes(kind) } : {},
+      ...adapter?.list ? { list: (name) => adapter.list(name) } : {}
+    }).find((c) => c.value === value);
+    return choice?.label ?? value;
+  }
+  if (decl.type === "reference" && typeof value === "string" && decl.to !== void 0 && adapter) {
+    return adapter.nodes(decl.to).find((n) => n.id === value)?.label ?? adapter.label?.(decl.to, value) ?? value;
+  }
+  if (decl.type === "boolean") return value === true ? decl.label ?? decl.name : "";
+  if (Array.isArray(value)) return value.map(String).join(", ");
+  if (isObject2(value)) return JSON.stringify(value);
+  return String(value);
+}
+function recordMapSummary(decl, value, adapter) {
+  if (!isObject2(value)) return [];
+  const fields = decl.of?.fields ?? [];
+  return Object.entries(value).map(([key, record]) => {
+    const name = recordMapKeyLabel(decl, key, adapter);
+    const words = isObject2(record) ? fields.map((f) => valueText(f, record[f.name], adapter)).filter((w) => w !== "") : [];
+    return words.length > 0 ? `${name}: ${words.join(", ")}` : name;
+  });
+}
+function recordMapGrid(initial) {
+  let opts = initial;
+  const root = el("div", "shell-recordgrid");
+  const table = el("table", "shell-recordgrid-table");
+  const head = el("thead");
+  const body = el("tbody");
+  table.append(head, body);
+  const adder = el("div", "shell-recordgrid-add");
+  const empty = el("p", "shell-recordgrid-empty");
+  root.append(table, empty, adder);
+  const cells = /* @__PURE__ */ new Map();
+  let addKey = "";
+  const editable = () => opts.onCommit !== void 0 && opts.disabled !== true;
+  const held = () => isObject2(opts.value) ? opts.value : {};
+  const commit = (next) => {
+    const v = Object.keys(next).length > 0 ? next : void 0;
+    opts = { ...opts, value: v };
+    draw();
+    opts.onCommit?.(v);
+  };
+  const cell = (key, field, record) => {
+    const id = `${key}\0${field.name}`;
+    const o = {
+      decl: field,
+      value: record[field.name],
+      ...opts.adapter ? { adapter: opts.adapter } : {},
+      ...opts.disabled !== void 0 ? { disabled: opts.disabled } : {},
+      ...opts.controlClassName !== void 0 ? { controlClassName: opts.controlClassName } : {},
+      ...editable() ? {
+        onCommit: (v) => {
+          const map = held();
+          const rec = { ...isObject2(map[key]) ? map[key] : {} };
+          if (v === void 0) delete rec[field.name];
+          else rec[field.name] = v;
+          commit({ ...map, [key]: rec });
+        }
+      } : {},
+      className: "shell-recordgrid-cell"
+    };
+    const had = cells.get(id);
+    if (had && had.el.dataset["type"] === field.type) {
+      fieldRowFocus.settle(had.el);
+      had.update(o);
+      fieldRowFocus.restore(had.el);
+      return had.el;
+    }
+    const handle = valueRow(o);
+    handle.el.dataset["type"] = field.type;
+    cells.set(id, handle);
+    return handle.el;
+  };
+  const draw = () => {
+    const decl = opts.decl;
+    const fields = decl.of?.fields ?? [];
+    const map = held();
+    const keys = Object.keys(map);
+    const adapter = opts.adapter;
+    const keyKind = decl.key?.type === "reference" ? decl.key.to ?? "" : void 0;
+    const keyNodes = keyKind !== void 0 && adapter ? adapter.nodes(keyKind) : void 0;
+    const hr = el("tr");
+    hr.append(el("th", "shell-recordgrid-keyhead", recordMapKeyHeading(decl)));
+    for (const f of fields) {
+      const th = el("th", void 0, f.label ?? f.name);
+      const help = f.help ?? f.purpose;
+      if (help) th.dataset["tip"] = help;
+      hr.append(th);
+    }
+    hr.append(el("th", "shell-recordgrid-tools"));
+    head.replaceChildren(hr);
+    const used = /* @__PURE__ */ new Set();
+    const rows = [];
+    for (const key of keys) {
+      const record = isObject2(map[key]) ? map[key] : {};
+      const tr = el("tr");
+      tr.dataset["key"] = key;
+      const name = recordMapKeyLabel(decl, key, adapter);
+      const keyCell = el("th", "shell-recordgrid-key", name);
+      keyCell.setAttribute("scope", "row");
+      if (keyNodes !== void 0 && adapter && keyNodes.every((n) => n.id !== key) && adapter.label?.(keyKind, key) === void 0) {
+        keyCell.append(el("span", "shell-recordgrid-gone", " (not here any more)"));
+      }
+      tr.append(keyCell);
+      for (const f of fields) {
+        used.add(`${key}\0${f.name}`);
+        const td = el("td");
+        td.append(cell(key, f, record));
+        tr.append(td);
+      }
+      const tools = el("td", "shell-recordgrid-tools");
+      if (editable()) tools.append(iconBtn("close", `Remove ${name}`, () => {
+        const next = { ...held() };
+        delete next[key];
+        commit(next);
+      }));
+      tr.append(tools);
+      rows.push(tr);
+    }
+    for (const id of [...cells.keys()]) if (!used.has(id)) cells.delete(id);
+    body.replaceChildren(...rows);
+    table.hidden = keys.length === 0;
+    empty.textContent = keys.length === 0 ? "None yet." : "";
+    empty.hidden = keys.length !== 0;
+    adder.replaceChildren();
+    if (!editable()) return;
+    const add = (k) => {
+      if (k === "" || Object.prototype.hasOwnProperty.call(held(), k)) return;
+      commit({ ...held(), [k]: extensions.defaultOf(decl.of) });
+    };
+    if (keyNodes !== void 0) {
+      const pick = el("select", `field shell-valuerow-key${opts.controlClassName ? ` ${opts.controlClassName}` : ""}`);
+      const first = el("option", void 0, "Add...");
+      first.value = "";
+      pick.append(first);
+      for (const n of keyNodes.filter((n2) => !Object.prototype.hasOwnProperty.call(map, n2.id))) {
+        const opt = el("option", void 0, n.label);
+        opt.value = n.id;
+        pick.append(opt);
+      }
+      pick.disabled = pick.options.length === 1;
+      pick.addEventListener("change", () => add(pick.value));
+      adder.append(pick);
+    } else {
+      const input = el("input", "field shell-valuerow-key");
+      input.type = "text";
+      input.placeholder = "New key";
+      input.value = addKey;
+      input.addEventListener("input", () => {
+        addKey = input.value;
+      });
+      const go = () => {
+        const k = input.value.trim();
+        addKey = "";
+        add(k);
+      };
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") go();
+      });
+      adder.append(input, iconBtn("add", "Add", go));
+    }
+  };
+  draw();
+  return { el: root, update: (o) => {
+    opts = o;
+    draw();
+  } };
+}
+function recordMapKeyHeading(decl) {
+  const to = decl.key?.type === "reference" ? decl.key.to : void 0;
+  return to ? to.charAt(0).toUpperCase() + to.slice(1) : "Key";
+}
 
 // src/value-rows.ts
 function nodeLabel(adapter, kind, id) {
   return adapter.nodes(kind).find((n) => n.id === id)?.label ?? adapter.label?.(kind, id);
 }
 var SCALARS = /* @__PURE__ */ new Set(["text", "multiline", "number", "boolean", "enum", "flags", "quality", "string"]);
-var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+var isObject3 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 var nameOf = (decl) => decl.label ?? decl.name;
 var asDecl = (d, name) => ({ ...d, name: d.name ?? name });
 function ownProblems(decl, value, adapter) {
@@ -1071,31 +1332,31 @@ function structuredRow(initial) {
       }, controls));
     };
     if (decl.type === "record") {
-      const value = isObject(o.value) ? o.value : void 0;
+      const value = isObject3(o.value) ? o.value : void 0;
       const required = value === void 0 ? [] : extensions.valueProblems(decl, value).filter((p) => p.code === "required");
       for (const f of decl.fields ?? []) {
         const missing = required.find((p) => p.path === f.name);
         child(`f:${f.name}`, f, value?.[f.name], (v) => {
-          const next = { ...isObject(opts.value) ? opts.value : {} };
+          const next = { ...isObject3(opts.value) ? opts.value : {} };
           if (v === void 0) delete next[f.name];
           else next[f.name] = v;
           commit(Object.keys(next).length > 0 ? next : void 0);
         }, void 0, void 0, missing ? "Required." : void 0);
       }
     } else if (decl.type === "map" && decl.of) {
-      const value = isObject(o.value) ? o.value : {};
+      const value = isObject3(o.value) ? o.value : {};
       const keyNodes = decl.key?.type === "reference" && o.adapter ? o.adapter.nodes(decl.key.to ?? "") : void 0;
       const keyKind = decl.key?.to ?? "";
       const keyLabel = (k) => (o.adapter && keyNodes !== void 0 ? nodeLabel(o.adapter, keyKind, k) : void 0) ?? k;
       for (const k of Object.keys(value)) {
         const remove = editable() ? [iconBtn("close", `Remove ${keyLabel(k)}`, () => {
-          const next = { ...isObject(opts.value) ? opts.value : {} };
+          const next = { ...isObject3(opts.value) ? opts.value : {} };
           delete next[k];
           commit(Object.keys(next).length > 0 ? next : void 0);
         })] : [];
         const gone = keyNodes !== void 0 && o.adapter && nodeLabel(o.adapter, keyKind, k) === void 0 ? `${k} is not here any more.` : void 0;
         child(`k:${k}`, asDecl(decl.of, k), value[k], (v) => {
-          const next = { ...isObject(opts.value) ? opts.value : {} };
+          const next = { ...isObject3(opts.value) ? opts.value : {} };
           next[k] = v === void 0 ? extensions.defaultOf(decl.of) : v;
           commit(next);
         }, remove, keyLabel(k), gone);
@@ -1139,7 +1400,7 @@ function structuredRow(initial) {
       }
     } else if (decl.type === "list" && decl.of) {
       const value = Array.isArray(o.value) ? o.value : [];
-      const idOf = (item, i) => decl.id !== void 0 && isObject(item) && typeof item[decl.id] === "string" ? `id:${item[decl.id]}` : `i:${i}`;
+      const idOf = (item, i) => decl.id !== void 0 && isObject3(item) && typeof item[decl.id] === "string" ? `id:${item[decl.id]}` : `i:${i}`;
       value.forEach((item, i) => {
         const set = (next) => commit(next.length > 0 ? next : void 0);
         const controls = editable() ? [
@@ -1153,7 +1414,7 @@ function structuredRow(initial) {
           }, i === value.length - 1),
           iconBtn("close", "Remove", () => set(value.filter((_, j) => j !== i)), false, true)
         ] : [];
-        const itemLabel = decl.id !== void 0 && isObject(item) && typeof item[decl.id] === "string" ? item[decl.id] : `${i + 1}`;
+        const itemLabel = decl.id !== void 0 && isObject3(item) && typeof item[decl.id] === "string" ? item[decl.id] : `${i + 1}`;
         child(idOf(item, i), asDecl(decl.of, itemLabel), item, (v) => {
           const next = [...Array.isArray(opts.value) ? opts.value : []];
           next[i] = v === void 0 ? extensions.defaultOf(decl.of) : v;
@@ -1164,8 +1425,8 @@ function structuredRow(initial) {
       if (editable()) {
         adder.append(iconBtn("add", "Add", () => {
           const fresh = extensions.defaultOf(decl.of);
-          if (decl.id !== void 0 && isObject(fresh)) {
-            const taken = new Set(value.map((x) => isObject(x) ? x[decl.id] : void 0));
+          if (decl.id !== void 0 && isObject3(fresh)) {
+            const taken = new Set(value.map((x) => isObject3(x) ? x[decl.id] : void 0));
             let n = value.length + 1;
             while (taken.has(`item-${n}`)) n++;
             fresh[decl.id] = `item-${n}`;
@@ -1214,7 +1475,15 @@ function valueRows() {
   };
 }
 
+exports.extensionFold = extensionFold;
+exports.foldCaption = foldCaption;
+exports.isRecordMap = isRecordMap;
+exports.isSet = isSet;
+exports.recordMapGrid = recordMapGrid;
+exports.recordMapKeyLabel = recordMapKeyLabel;
+exports.recordMapSummary = recordMapSummary;
 exports.valueRow = valueRow;
 exports.valueRows = valueRows;
+exports.valueText = valueText;
 //# sourceMappingURL=value-rows.cjs.map
 //# sourceMappingURL=value-rows.cjs.map