@wildwinter/app-shell 0.40.0 → 0.41.0

package/dist/kit-gallery.css

@@ -0,0 +1,179 @@
+/* src/kit-gallery.css */
+.kit-gallery {
+  --dialog-width: 880px;
+  --kit-art-ink: var(--ink);
+  --kit-art-plate: transparent;
+}
+.kit-gallery .shell-dialog-body {
+  overflow: hidden;
+}
+.kit-gallery-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 288px;
+  gap: 18px;
+  min-height: 0;
+  max-height: 64vh;
+}
+.kit-gallery-shelves {
+  overflow-y: auto;
+  min-height: 0;
+  padding: 2px;
+}
+.kit-gallery-panel {
+  overflow-y: auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 2px 2px 2px 18px;
+  border-left: 1px solid var(--line);
+}
+.kit-gallery-shelf + .kit-gallery-shelf {
+  margin-top: 18px;
+}
+.kit-gallery-caption {
+  margin: 0 0 6px;
+  color: var(--muted);
+  font: 600 13px/1.3 var(--font-ui);
+}
+.kit-gallery-shelf-note {
+  margin: -2px 0 8px;
+  color: var(--muted);
+  font: 12.5px/1.45 var(--font-ui);
+}
+.kit-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
+  gap: 8px;
+}
+.kit-gallery-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  padding: 8px;
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  color: var(--ink);
+  font: inherit;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  transition: background var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard);
+}
+.kit-gallery-tile:hover {
+  background: color-mix(in oklab, var(--accent) 6%, transparent);
+}
+.kit-gallery-tile[aria-pressed=true] {
+  border-color: var(--accent);
+  background: color-mix(in oklab, var(--accent) 10%, transparent);
+}
+.kit-gallery-tile-head {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.kit-gallery-tile-name {
+  font: 600 14px/1.3 var(--font-ui);
+}
+.kit-gallery-tile-blurb {
+  color: var(--muted);
+  font: 12.5px/1.4 var(--font-ui);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+}
+.kit-gallery-badge {
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--accent) 16%, transparent);
+  color: var(--ink);
+  font: 600 11px/1.5 var(--font-ui);
+}
+.kit-gallery-art {
+  position: relative;
+  aspect-ratio: 5 / 3;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  background: var(--kit-art-plate);
+}
+.kit-gallery-art[hidden] {
+  display: none;
+}
+.kit-gallery-ink {
+  position: absolute;
+  inset: 0;
+  background: var(--kit-art-ink);
+  -webkit-mask: var(--kit-art) center / cover no-repeat;
+  mask: var(--kit-art) center / cover no-repeat;
+}
+.kit-gallery-panel-name {
+  margin: 2px 0 0;
+  font: 600 16px/1.3 var(--font-ui);
+}
+.kit-gallery-panel-blurb,
+.kit-gallery-panel-detail {
+  margin: 0;
+  font: 13.5px/1.5 var(--font-ui);
+  color: var(--ink);
+}
+.kit-gallery-play {
+  margin: 0;
+  font: 13.5px/1.5 var(--font-ui);
+  color: var(--ink);
+}
+.kit-gallery-shows,
+.kit-gallery-note {
+  margin: 0;
+  font: 12.5px/1.45 var(--font-ui);
+  color: var(--muted);
+}
+.kit-gallery-lands-caption {
+  margin: 6px 0 0;
+  font: 600 13px/1.3 var(--font-ui);
+  color: var(--muted);
+}
+.kit-gallery-lands {
+  margin: 0;
+  padding-left: 18px;
+  font: 13px/1.5 var(--font-ui);
+  color: var(--ink);
+}
+.kit-gallery-panel [hidden] {
+  display: none;
+}
+.kit-gallery-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
+}
+.kit-gallery-label {
+  font: 600 13px/1.3 var(--font-ui);
+  color: var(--ink);
+}
+.kit-gallery-name.kit-gallery-missing {
+  border-color: var(--danger);
+}
+@media (max-width: 760px) {
+  .kit-gallery-layout {
+    grid-template-columns: minmax(0, 1fr);
+    max-height: none;
+    overflow-y: auto;
+  }
+  .kit-gallery-panel {
+    border-left: none;
+    border-top: 1px solid var(--line);
+    padding: 12px 2px 2px;
+    overflow: visible;
+  }
+  .kit-gallery-shelves {
+    overflow: visible;
+  }
+}
+/*# sourceMappingURL=kit-gallery.css.map */

package/dist/kit-gallery.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/kit-gallery.css"],"sourcesContent":["/* ---------------------------------------------------------------------------\n   The kit gallery (kit-gallery.ts): tiles on the left, a details panel on the\n   right, on the dialog frame (dialog.css) with `.btn` from controls.css and\n   `.field` for the name. Reads the palette (--surface, --ink, --muted,\n   --line, --accent) over the shared tokens.\n\n   Pictures are masks: the image's opaque pixels are drawn in --kit-art-ink on\n   --kit-art-plate. The defaults suit a light theme (ink on the tile). A dark\n   theme should NOT invert an engraving, which turns it into a photographic\n   negative; it sets a paper-toned plate and a dark ink instead, so the\n   picture is always dark on light and only its frame follows the theme.\n   --------------------------------------------------------------------------- */\n\n.kit-gallery {\n  --dialog-width: 880px;\n  --kit-art-ink: var(--ink);\n  --kit-art-plate: transparent;\n}\n.kit-gallery .shell-dialog-body { overflow: hidden; }\n\n.kit-gallery-layout {\n  display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 18px;\n  min-height: 0; max-height: 64vh;\n}\n.kit-gallery-shelves { overflow-y: auto; min-height: 0; padding: 2px; }\n.kit-gallery-panel {\n  overflow-y: auto; min-height: 0;\n  display: flex; flex-direction: column; gap: 6px;\n  padding: 2px 2px 2px 18px; border-left: 1px solid var(--line);\n}\n\n/* A shelf per job (start / learn), captioned like the welcome's groups:\n   sentence-case label text, never an overline. */\n.kit-gallery-shelf + .kit-gallery-shelf { margin-top: 18px; }\n.kit-gallery-caption { margin: 0 0 6px; color: var(--muted); font: 600 13px/1.3 var(--font-ui); }\n.kit-gallery-shelf-note { margin: -2px 0 8px; color: var(--muted); font: 12.5px/1.45 var(--font-ui); }\n\n.kit-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }\n.kit-gallery-tile {\n  display: flex; flex-direction: column; align-items: stretch; gap: 4px;\n  padding: 8px; text-align: left; cursor: pointer;\n  background: none; color: var(--ink); font: inherit;\n  border: 1px solid var(--line); border-radius: var(--radius-md);\n  transition: background var(--dur-quick) var(--ease-standard), border-color var(--dur-quick) var(--ease-standard);\n}\n.kit-gallery-tile:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }\n.kit-gallery-tile[aria-pressed=\"true\"] {\n  border-color: var(--accent);\n  background: color-mix(in oklab, var(--accent) 10%, transparent);\n}\n.kit-gallery-tile-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }\n.kit-gallery-tile-name { font: 600 14px/1.3 var(--font-ui); }\n/* Three lines on the tile; the panel says the rest. */\n.kit-gallery-tile-blurb {\n  color: var(--muted); font: 12.5px/1.4 var(--font-ui);\n  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;\n}\n.kit-gallery-badge {\n  padding: 1px 6px; border-radius: 999px;\n  background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--ink);\n  font: 600 11px/1.5 var(--font-ui);\n}\n\n/* The picture: a plate, and the ink drawn through the image as a mask. */\n.kit-gallery-art {\n  position: relative; aspect-ratio: 5 / 3; overflow: hidden;\n  border-radius: var(--radius-sm); background: var(--kit-art-plate);\n}\n.kit-gallery-art[hidden] { display: none; }\n.kit-gallery-ink {\n  position: absolute; inset: 0; background: var(--kit-art-ink);\n  -webkit-mask: var(--kit-art) center / cover no-repeat;\n  mask: var(--kit-art) center / cover no-repeat;\n}\n\n/* The details panel: the chosen kit said in full, then the app's fields. */\n.kit-gallery-panel-name { margin: 2px 0 0; font: 600 16px/1.3 var(--font-ui); }\n.kit-gallery-panel-blurb, .kit-gallery-panel-detail { margin: 0; font: 13.5px/1.5 var(--font-ui); color: var(--ink); }\n.kit-gallery-play { margin: 0; font: 13.5px/1.5 var(--font-ui); color: var(--ink); }\n.kit-gallery-shows, .kit-gallery-note { margin: 0; font: 12.5px/1.45 var(--font-ui); color: var(--muted); }\n.kit-gallery-lands-caption { margin: 6px 0 0; font: 600 13px/1.3 var(--font-ui); color: var(--muted); }\n.kit-gallery-lands { margin: 0; padding-left: 18px; font: 13px/1.5 var(--font-ui); color: var(--ink); }\n.kit-gallery-panel [hidden] { display: none; }\n.kit-gallery-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }\n.kit-gallery-label { font: 600 13px/1.3 var(--font-ui); color: var(--ink); }\n.kit-gallery-name.kit-gallery-missing { border-color: var(--danger); }\n\n/* Narrow windows: the panel goes under the tiles. */\n@media (max-width: 760px) {\n  .kit-gallery-layout { grid-template-columns: minmax(0, 1fr); max-height: none; overflow-y: auto; }\n  .kit-gallery-panel { border-left: none; border-top: 1px solid var(--line); padding: 12px 2px 2px; overflow: visible; }\n  .kit-gallery-shelves { overflow: visible; }\n}\n"],"mappings":"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","names":[]}

package/dist/kit-gallery.d.cts

@@ -0,0 +1,64 @@
+interface KitGalleryItem<T extends string> {
+    id: T;
+    /** What you are making, in the author's terms, not the model's. */
+    name: string;
+    /** What it is FOR: one line on the tile, and the panel's first line. */
+    blurb: string;
+    /** More, for the panel only. */
+    detail?: string;
+    /** What pressing Play (or Run) shows, said as a promise. */
+    play?: string;
+    /** The model's parts it puts to work, second and quieter ("Shows: ..."). */
+    shows?: string;
+    /** What lands, in the concrete, as a short list in the panel. */
+    lands?: string[];
+    /** A word or two on the tile ("Start here"). */
+    badge?: string;
+    /** An illustration: a transparent image whose opaque pixels are the ink.
+     *  Drawn as a mask in `--kit-art-ink` on `--kit-art-plate`, so one file
+     *  serves both themes and the app chooses the colours. */
+    image?: string;
+}
+interface KitGallerySection<T extends string> {
+    /** Sentence-case label text ("Start from a kit"). Absent: no caption. */
+    caption?: string;
+    /** The consequence of a click, said before the click. */
+    note?: string;
+    items: KitGalleryItem<T>[];
+    /** The primary button's label while an item here is chosen. Default "Create". */
+    action?: string;
+    /** Show the app's detail fields (and ask for the name) for this section.
+     *  Default true. An example is opened, not named, so its shelf says false. */
+    usesDetails?: boolean;
+}
+interface KitGalleryChoice {
+    /** Present when a name was asked for and the chosen section uses details. */
+    name?: string;
+}
+interface KitGalleryOptions<T extends string> {
+    /** The dialog's heading: "New project", "New box", "New scene". */
+    title: string;
+    /** What the thing being made IS, in concrete terms. */
+    what?: string;
+    sections: KitGallerySection<T>[];
+    /** Ask for a name in the details panel, with this placeholder. Required
+     *  when asked: making a thing without one would have to invent a folder. */
+    namePlaceholder?: string;
+    /** The name field's label. Default "Name". */
+    nameLabel?: string;
+    /** The app's own fields, below the name (version control, a build path). */
+    details?: HTMLElement;
+    /** The item chosen when the gallery opens. Default: the first. */
+    initial?: T;
+    onPick: (id: T, choice: KitGalleryChoice) => void;
+    /** Runs once the gallery has closed, whichever way. */
+    onClose?: () => void;
+}
+interface KitGallery {
+    readonly dialog: HTMLDialogElement;
+    close(): void;
+}
+/** Open the gallery as a modal dialog on the family's frame. */
+declare function openKitGallery<T extends string>(opts: KitGalleryOptions<T>): KitGallery;
+
+export { type KitGallery, type KitGalleryChoice, type KitGalleryItem, type KitGalleryOptions, type KitGallerySection, openKitGallery };

package/dist/kit-gallery.d.ts

@@ -0,0 +1,64 @@
+interface KitGalleryItem<T extends string> {
+    id: T;
+    /** What you are making, in the author's terms, not the model's. */
+    name: string;
+    /** What it is FOR: one line on the tile, and the panel's first line. */
+    blurb: string;
+    /** More, for the panel only. */
+    detail?: string;
+    /** What pressing Play (or Run) shows, said as a promise. */
+    play?: string;
+    /** The model's parts it puts to work, second and quieter ("Shows: ..."). */
+    shows?: string;
+    /** What lands, in the concrete, as a short list in the panel. */
+    lands?: string[];
+    /** A word or two on the tile ("Start here"). */
+    badge?: string;
+    /** An illustration: a transparent image whose opaque pixels are the ink.
+     *  Drawn as a mask in `--kit-art-ink` on `--kit-art-plate`, so one file
+     *  serves both themes and the app chooses the colours. */
+    image?: string;
+}
+interface KitGallerySection<T extends string> {
+    /** Sentence-case label text ("Start from a kit"). Absent: no caption. */
+    caption?: string;
+    /** The consequence of a click, said before the click. */
+    note?: string;
+    items: KitGalleryItem<T>[];
+    /** The primary button's label while an item here is chosen. Default "Create". */
+    action?: string;
+    /** Show the app's detail fields (and ask for the name) for this section.
+     *  Default true. An example is opened, not named, so its shelf says false. */
+    usesDetails?: boolean;
+}
+interface KitGalleryChoice {
+    /** Present when a name was asked for and the chosen section uses details. */
+    name?: string;
+}
+interface KitGalleryOptions<T extends string> {
+    /** The dialog's heading: "New project", "New box", "New scene". */
+    title: string;
+    /** What the thing being made IS, in concrete terms. */
+    what?: string;
+    sections: KitGallerySection<T>[];
+    /** Ask for a name in the details panel, with this placeholder. Required
+     *  when asked: making a thing without one would have to invent a folder. */
+    namePlaceholder?: string;
+    /** The name field's label. Default "Name". */
+    nameLabel?: string;
+    /** The app's own fields, below the name (version control, a build path). */
+    details?: HTMLElement;
+    /** The item chosen when the gallery opens. Default: the first. */
+    initial?: T;
+    onPick: (id: T, choice: KitGalleryChoice) => void;
+    /** Runs once the gallery has closed, whichever way. */
+    onClose?: () => void;
+}
+interface KitGallery {
+    readonly dialog: HTMLDialogElement;
+    close(): void;
+}
+/** Open the gallery as a modal dialog on the family's frame. */
+declare function openKitGallery<T extends string>(opts: KitGalleryOptions<T>): KitGallery;
+
+export { type KitGallery, type KitGalleryChoice, type KitGalleryItem, type KitGalleryOptions, type KitGallerySection, openKitGallery };

package/dist/kit-gallery.js

@@ -0,0 +1,6 @@
+export { openKitGallery } from './chunk-BZ3MQDWM.js';
+import './chunk-YRFJLJUH.js';
+import './chunk-UG2P777F.js';
+import './chunk-IU7EY6BI.js';
+//# sourceMappingURL=kit-gallery.js.map
+//# sourceMappingURL=kit-gallery.js.map

package/dist/kit-gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"kit-gallery.js"}

package/dist/link-status.cjs

@@ -367,6 +367,8 @@ function linkAddress(s) {
   if (s.state !== "listening" && s.state !== "connected") return void 0;
   return s.address ?? `ws://127.0.0.1:${s.port}`;
 }
+var CORNER_INSET = 14.5;
+var CORNER_GAP = 12;
 function mountLinkStatus(host, opts) {
   const wrap = el("div", "linkstatus");
   wrap.hidden = true;
@@ -380,6 +382,15 @@ function mountLinkStatus(host, opts) {
   wrap.append(...opts.lead ?? [], url, toggle);
   host.append(wrap);
   let status = { state: "off" };
+  const root = host.ownerDocument.documentElement;
+  const publishReserve = () => {
+    const width = wrap.hidden ? 0 : wrap.getBoundingClientRect().width;
+    root.style.setProperty(
+      "--linkstatus-reserve",
+      width > 0 ? `${Math.ceil(width + CORNER_INSET + CORNER_GAP)}px` : "0px"
+    );
+  };
+  if (typeof ResizeObserver !== "undefined") new ResizeObserver(publishReserve).observe(wrap);
   const render = () => {
     toggle.className = `linkstatus-toggle ${linkStatusClass(status)}`;
     const tip2 = linkStatusTip(status);
@@ -391,6 +402,7 @@ function mountLinkStatus(host, opts) {
       url.dataset["tip"] = "Click to copy the live link address";
       url.hidden = false;
     } else url.hidden = true;
+    publishReserve();
   };
   const apply = (s) => {
     status = s;
@@ -415,6 +427,7 @@ function mountLinkStatus(host, opts) {
     status: () => status,
     setVisible(on) {
       wrap.hidden = !on;
+      publishReserve();
     },
     toggle() {
       toggle.click();