@12ui/design 0.2.80 → 0.2.81

package/dist/mcp-slate-ui-styles.js

@@ -1,146 +1,143 @@
 /**
- * The workspace view's stylesheet: base and inline card (the fullscreen stage
- * is in mcp-slate-ui-styles-stage.ts, the dialogs in
- * mcp-slate-ui-styles-dialog.ts). Host variables win; the fallbacks keep the
- * view usable when a host passes none. System fonts only, no external
- * requests.
+ * The workspace view's stylesheet: tokens, base and the shell (the prompt card and the tab row), shared by the inline
+ * card and the fullscreen workspace (the stage is in mcp-slate-ui-styles-stage.ts, the Designs tab and its large view in
+ * mcp-slate-ui-styles-designs.ts).
  *
- * The layout is fluid by construction: the view never asks the host for a
- * width. Every flex/grid parent sets `min-width: 0` so no child can push the
- * frame wider than its pane, and the thumbnails wrap onto as many rows as
- * they need: nothing scrolls sideways.
+ * Every colour, border, radius and font comes from the MCP Apps standard variables the host sends
+ * (`hostContext.styles.variables`, which Codex sends whole, resolved for its current theme and the person's accent),
+ * with a neutral light and dark fallback each, keyed on `color-scheme` through `light-dark()`: the theme is
+ * `[data-theme]` (set by the host's shell and by `hostContext.theme`), else `window.openai.theme` (the bridge sets the
+ * same attribute), else `prefers-color-scheme` (a plain browser: the `12ui workspace open` page). The accent is the host's
+ * ring colour (selection rings), a solid accent fills the check badges, and the primary button is ink, as Codex draws
+ * its own. No brand colour is written here; system fonts only, no external requests.
  *
- * A design's thumbnail has the design's own aspect ratio (`--ar`, set by the script on each tile from its picture, or
- * for an option still without one from what its round draws). The strip and each round of the selection are grids of
- * equal columns; a column is no narrower than a size token times the square root of the row's ratio (`--shape`, also
- * set by the script), so tiles of any ratio have about the same area, and the columns share out what is left. The
- * tokens, one place each: --thumb-card (the card's strip, 124 px under a 480 px card and 170 px from it, so a 3:2
- * design is at least 152 or 208 px wide, a 2:3 one 101 or 139, a square one 124 or 170; at least double the picture
- * a 144 px square tile used to show from 480 px) and --thumb-rail (the workspace's selection, 170 px, 124 px under a
- * 640 px window). The container queries read the card's own width
- * (`main`). Every thumbnail picture (designs, inspiration, the Based on picture and the reference chips) is
- * `object-fit: contain`, so the whole design shows and nothing is cropped or stretched.
+ * The layout is fluid by construction: the view never asks the host for a width. Every flex/grid parent sets
+ * `min-width: 0` so no child can push the frame wider than its pane, and nothing scrolls sideways.
  */
 export const SLATE_UI_STYLES = String.raw `
-  /* Host variables win; these fallbacks keep the view usable when a host passes none. System fonts only. */
   :root {
     color-scheme: light dark;
-    --f-bg: light-dark(#ffffff, #1c1c1c);
-    --f-bg2: light-dark(#f4f4f2, #2a2a2a);
-    --f-bg3: light-dark(#e8e8e4, #3a3a3a);
-    --f-text: light-dark(#1a1a1a, #f2f2f2);
-    --f-text2: light-dark(#5f5f5b, #a8a8a3);
-    --f-border: light-dark(#d9d9d3, #444440);
-    --f-inverse: light-dark(#1a1a1a, #f2f2f2);
-    --f-inverse-text: light-dark(#ffffff, #1a1a1a);
-    --f-ring: light-dark(#2f6fed, #7aa2ff);
-    --f-danger: light-dark(#b3261e, #ff8a80);
-    --f-ok: light-dark(#1d6b3a, #6fd08c);
+    /* Neutral fallbacks, used only when the host omits a variable; close to Codex's own, so the first paint never jumps. */
+    --f-bg: light-dark(#ffffff, #181818);
+    --f-bg2: light-dark(#ffffff, #363636);
+    --f-bg3: light-dark(#f6f6f6, #141414);
+    --f-text: light-dark(#1a1c1f, #ffffff);
+    --f-text2: light-dark(rgb(26 28 31 / .5), rgb(255 255 255 / .5));
+    --f-border: light-dark(rgb(26 28 31 / .12), rgb(255 255 255 / .16));
+    --f-border2: light-dark(rgb(26 28 31 / .08), rgb(255 255 255 / .08));
+    --f-inverse: light-dark(#1a1c1f, #ffffff);
+    --f-inverse-text: light-dark(#ffffff, #0d0d0d);
+    --f-accent: light-dark(#2f6fed, #7aa2ff);
+    --f-accent-tint: light-dark(#e5f2ff, #0d273f);
+    --f-danger: light-dark(#e02e2a, #ff6764);
+    --f-ok: light-dark(#00a240, #40c977);
+    /* The host's variables first, the neutral fallback second. */
     --bg: var(--color-background-primary, var(--f-bg));
     --bg2: var(--color-background-secondary, var(--f-bg2));
     --bg3: var(--color-background-tertiary, var(--f-bg3));
     --text: var(--color-text-primary, var(--f-text));
     --text2: var(--color-text-secondary, var(--f-text2));
     --border: var(--color-border-primary, var(--f-border));
+    --border2: var(--color-border-secondary, var(--f-border2));
     --inverse: var(--color-background-inverse, var(--f-inverse));
     --inverse-text: var(--color-text-inverse, var(--f-inverse-text));
-    --ring: var(--color-ring-primary, var(--f-ring));
     --danger: var(--color-text-danger, var(--f-danger));
     --ok: var(--color-text-success, var(--f-ok));
-    --radius: var(--border-radius-md, 8px);
-    --font: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
-    --thumb-rail: 170px;
+    /* The accent is the host's ring colour (the person's own accent in Codex); a solid accent fills a badge. */
+    --ring: var(--color-ring-primary, var(--f-accent));
+    --accent-solid: var(--color-text-info, var(--f-accent));
+    --accent-tint: var(--color-background-info, var(--f-accent-tint));
+    /* Fills derived from the host's ink and ground, so they read in either theme whatever the host sends
+       (--color-background-secondary is translucent and equals the page in Codex's light theme). */
+    --fill: color-mix(in srgb, var(--text) 5%, var(--bg));
+    --fill-hover: color-mix(in srgb, var(--text) 9%, var(--bg));
+    --radius: var(--border-radius-md, 10px);
+    --radius-lg: var(--border-radius-lg, 12.5px);
+    --radius-xl: var(--border-radius-xl, 15px);
+    --font: var(--font-sans, -apple-system, "system-ui", "Segoe UI", sans-serif);
+    --fs-sm: var(--font-text-sm-size, 12px);
+    --fs-md: var(--font-text-md-size, 14px);
+    --fs-lg: var(--font-text-lg-size, 16px);
+    --elev-sm: var(--shadow-sm, 0 1px 2px -1px rgb(0 0 0 / .08));
+    --elev: var(--shadow-md, 0 2px 4px -1px rgb(0 0 0 / .08));
+    --elev-lg: var(--shadow-lg, 0 4px 8px -2px rgb(0 0 0 / .1));
   }
-  @media (max-width: 639px) { :root { --thumb-rail: 124px; } }
-  #card { --thumb-card: 124px; }
-  @container (min-width: 480px) { #card { --thumb-card: 170px; } }
+  /* The host's shell sets data-theme before this script runs, and hostContext.theme keeps it current. */
   :root[data-theme="light"] { color-scheme: light; }
   :root[data-theme="dark"] { color-scheme: dark; }
   * { box-sizing: border-box; }
   html, body { margin: 0; }
-  /* Fluid by construction: the app never asks the host for a width. The layout width is whatever the host gives
-     the view (fixed width or flexible maxWidth alike), so a host can never grow the frame past its pane. */
   body {
     background: var(--bg);
     color: var(--text);
-    font: 14px/1.45 var(--font);
+    font: var(--fs-md)/1.45 var(--font);
     padding: 16px;
     min-width: 0;
   }
   main { max-width: 960px; margin: 0 auto; min-width: 0; container-type: inline-size; }
   .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
   h1 { font-size: 15px; font-weight: 600; margin: 0; }
-  .meta { color: var(--text2); font-size: 12px; }
-  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-width: 0; }
-  .tabs { display: flex; gap: 4px; min-width: 0; }
-  .tab { padding: 6px 12px; border-radius: 999px; border-color: transparent; background: transparent; color: var(--text2); font-weight: 500; }
-  .tab[aria-selected="true"] { background: var(--bg2); color: var(--text); border-color: var(--border); }
-  .iconbtn { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; }
-  /* The large image. Its box has the image's own aspect ratio and a capped height, so the card never jumps when the
-     picture lands and the badge and hairline sit on the picture itself. The card caps the height at 60 percent of
-     its own width (a container unit, so the frame's height never feeds back into it); the workspace uses the window. */
-  .hero { position: relative; width: min(100%, calc(var(--cap, 60cqw) * var(--ar, 1.5))); aspect-ratio: var(--ar, 1.5); margin: 0 auto; min-width: 0; border-radius: var(--radius); background: var(--bg3); overflow: hidden; }
-  #card .hero { --cap: 60cqw; }
-  .hero.note { width: 100%; aspect-ratio: auto; background: var(--bg2); }
-  .heroimg { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; }
-  .heroimg.empty { background: var(--bg3); }
-  /* An image with no source yet paints nothing. Chromium draws a 1 px silver placeholder frame inside an <img> that has
-     no source, square-cornered, and the rounded tile around it then cuts that frame off at its corners: the clipped
-     corners of the thumbnails that were still loading or drawing. The tile's own surface stands in until the picture
-     arrives, and an option with no picture at all (drawing, failed, stopped) has no <img>. */
-  .thumbbtn .thumb:not([src]), .opt .thumb:not([src]), .heroimg:not([src]) { visibility: hidden; }
-  .heronote { padding: 32px 16px; color: var(--text2); text-align: center; overflow-wrap: anywhere; }
-  .hero .badge, .thumbbtn .code, .opt .code { position: absolute; left: 8px; bottom: 8px; padding: 0 8px; border-radius: 999px; background: var(--inverse); color: var(--inverse-text); font-size: 12px; font-weight: 600; line-height: 20px; }
-  .hero .hair { position: absolute; left: 0; right: 0; bottom: 0; }
-  /* Select sits under the large image at the right, in line with the right edge of the thumbnails below; an error about
-     a click (Select could not be recorded, the host refused the message) shows beside it and takes no room otherwise. */
-  .pickrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-width: 0; }
-  .pickrow > button { flex: none; margin-left: auto; }
-  .cardalert { flex: 1 1 0; min-width: 0; margin: 0; font-size: 12px; color: var(--danger); overflow-wrap: anywhere; }
-  /* Every option of the strip in view, on as many rows as it takes, and the Generate more tile last; nothing scrolls. */
-  .strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--thumb-card) * var(--shape, 1))), 1fr)); gap: 8px; align-items: start; margin-top: 12px; min-width: 0; }
-  .thumbbtn, .opt, .refbtn { position: relative; padding: 0; border: 0; border-radius: 6px; background: var(--bg2); overflow: hidden; }
-  /* A design's tile is as wide as its column and as tall as its picture's ratio makes it. */
-  .thumbbtn, .opt { display: block; width: 100%; aspect-ratio: var(--ar, 1.5); align-self: start; }
-  /* The tile has the picture's ratio, so the picture fills it; contain keeps the whole design if the two ever differ. */
-  .thumb { display: block; width: 100%; height: 100%; background: var(--bg3); object-fit: contain; object-position: center; }
-  .thumbbtn .code, .opt .code { left: 6px; bottom: 6px; padding: 0 7px; font-size: 11px; line-height: 18px; }
-  .thumbbtn.selected, .opt.selected { box-shadow: 0 0 0 2px var(--text); }
-  /* An option with no picture says why on its own tile, above its code: failed (the reason, recessed tile), or stopped
-     before it was drawn (what the work said). A drawing option shimmers instead. */
-  .tilenote { position: absolute; left: 8px; right: 8px; top: 6px; bottom: 30px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; line-height: 1.35; text-align: center; color: var(--text2); }
+
+  /* The prompt card: the one input of the screen, an expanding field with its button inside the card's right edge. */
+  .briefwrap { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 14px; padding: 8px 8px 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg); box-shadow: var(--elev-sm); }
+  .briefwrap:focus-within { border-color: var(--ring); }
+  textarea.brief {
+    display: block; flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; padding: 6px 0; resize: none; overflow-y: hidden;
+    font: inherit; font-size: var(--fs-lg); line-height: 1.45; color: var(--text); background: transparent; border: 0;
+    max-height: calc(7 * 1.45em + 12px);
+  }
+  /* Folded to two lines until it has focus: the last line fades out. */
+  textarea.brief.folded { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent); cursor: text; }
+  textarea.brief::placeholder { color: var(--text2); }
+  textarea.brief:focus-visible { outline: none; }
+  button.promptgo { flex: none; align-self: flex-end; padding: 8px 18px; border-radius: 999px; }
+  #stage > .briefwrap { margin-bottom: 0; }
+
+  /* The tab row: slim underlined tabs, and at its right the quiet count and the full-screen control. */
+  .topbar, .stagehead { display: flex; align-items: center; gap: 12px; min-width: 0; border-bottom: 1px solid var(--border2); }
+  .topbar { margin-bottom: 16px; }
+  .tabs { display: flex; gap: 24px; min-width: 0; align-self: stretch; }
+  button.tab { margin-bottom: -1px; padding: 10px 0 9px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--text2); font-weight: 500; white-space: nowrap; }
+  button.tab:hover:not(:disabled) { background: transparent; color: var(--text); }
+  button.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
+  button.tab:focus-visible { outline-offset: -2px; }
+  .selcount { margin-left: auto; font-size: var(--fs-sm); color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .selcount:empty { display: none; }
+  .topbar > .iconbtn, .stagehead > .iconbtn { margin-left: auto; }
+  .selcount:not(:empty) + .iconbtn { margin-left: 0; }
+  button.iconbtn { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text2); }
+  button.iconbtn:hover:not(:disabled) { background: var(--fill); color: var(--text); }
+  @container (max-width: 440px) { .selcount { display: none; } .tabs { gap: 18px; } }
+  @media (max-width: 480px) { .selcount { display: none; } .tabs { gap: 18px; } }
+
+  .cardalert { flex: 1 1 0; min-width: 0; margin: 0; font-size: var(--fs-sm); color: var(--danger); overflow-wrap: anywhere; }
+  .cardalert:empty { display: none; }
+  /* A picture with no source yet paints nothing (Chromium draws a silver placeholder frame the rounded tile would cut). */
+  .thumb:not([src]) { visibility: hidden; }
+  .thumb { display: block; width: 100%; height: 100%; background: var(--fill); object-fit: contain; object-position: center; }
+  .tilenote { position: absolute; left: 8px; right: 8px; top: 6px; bottom: 6px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; text-align: center; color: var(--text2); }
   .tilenote > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
-  .thumbbtn.failed, .opt.failed { background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
-  .thumbbtn.failed.selected, .opt.failed.selected { box-shadow: inset 0 0 0 1px var(--border), 0 0 0 2px var(--text); }
-  .failed .tilenote { color: var(--danger); }
-  .failed .code { opacity: .6; }
-  .shimmer { background: linear-gradient(100deg, var(--bg2) 30%, var(--bg3) 50%, var(--bg2) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
+  .shimmer { background: linear-gradient(100deg, var(--fill) 30%, var(--fill-hover) 50%, var(--fill) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
   @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
-  .field { margin-top: 0; }
-  label.lbl, span.lbl { display: block; font-size: 12px; color: var(--text2); margin-bottom: 4px; }
-  input[type="text"], input[type="number"], select {
+  input[type="text"] {
     width: 100%; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg);
     border: 1px solid var(--border); border-radius: var(--radius);
   }
-  input[type="text"]:focus-visible, input[type="number"]:focus-visible, select:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
+  input[type="text"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
   .spacer { flex: 1 1 0; min-width: 0; }
   button {
     font: inherit; font-weight: 600; padding: 8px 16px; border-radius: var(--radius);
-    border: 1px solid var(--border); background: var(--bg2); color: var(--text); cursor: pointer;
+    border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer;
   }
-  button.thumbbtn, button.opt, button.refbtn { padding: 0; border: 0; }
+  button:hover:not(:disabled) { background: var(--fill); }
   button.primary { background: var(--inverse); color: var(--inverse-text); border-color: var(--inverse); }
+  button.primary:hover:not(:disabled) { background: var(--inverse); opacity: .86; }
   button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
   button:disabled { opacity: .45; cursor: default; }
-  .note { margin: 10px 0 0; font-size: 12px; color: var(--text2); }
-  .hair { display: block; height: 2px; background: var(--bg3); overflow: hidden; position: relative; min-width: 0; }
-  .hair.indeterminate::after { content: ""; position: absolute; inset: 0 auto 0 -30%; width: 30%; background: var(--text); animation: slide 1.4s ease-in-out infinite; }
-  @keyframes slide { from { left: -30%; } to { left: 100%; } }
-  @media (prefers-reduced-motion: reduce) {
-    .hair.indeterminate::after { animation: none; width: 100%; left: 0; opacity: .3; }
-    .shimmer { animation: none; }
-  }
-  .status { min-height: 18px; margin: 8px 0 0; font-size: 12px; overflow-wrap: anywhere; }
+  .note { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--text2); }
+  @media (prefers-reduced-motion: reduce) { .shimmer { animation: none; } }
+  .status { min-height: 18px; margin: 8px 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
+  .status:empty { display: none; }
   .status.ok { color: var(--ok); }
   .status.err, .err { color: var(--danger); }
   #fatal { padding: 16px; color: var(--danger); }

package/dist/mcp-slate-ui-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-styles.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HxC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIxC,CAAC"}

package/dist/mcp-slate-ui.d.ts

@@ -1,20 +1,20 @@
 import { type SlateUiTarget } from './mcp-slate-ui-script.js';
 /**
- * The workspace view for one target, as one self-contained HTML document: no external script,
- * stylesheet, font, or URL, so it renders under the strictest host sandbox.
+ * The workspace view for one target, as one self-contained HTML document: no external script, stylesheet or font, so
+ * it renders under the strictest host sandbox. Reference pictures with a public rendition load from the rendition
+ * origin the resource declares; everything else arrives through the app's tools.
  *
- * The static markup is the inline card and nothing else: the tabs, one large
- * image, Select under it (with the place an error about a click shows), the
- * strip of options on as many rows as it takes, and an icon-only control that
- * opens the workspace. The card has no status line: drawing shows on the
- * thumbnails themselves, and an option that failed says why on its own tile.
- * The fullscreen stage and its dialogs are built by the script into `#stage`
- * only when the host puts the view in fullscreen.
+ * The static markup is the inline card: the prompt card (the screen's one input, an expanding field the person can edit,
+ * with its Search button inside), then the tabs Inspiration, References and Designs with the quiet selected count and the
+ * icon-only control that opens the workspace, then one pane per tab and
+ * the host of the large view (used in the card only when the host has no fullscreen). The Designs pane is built by
+ * mcp-slate-ui-script-designs.ts; the Inspiration and References panes by their scripts. The fullscreen stage is
+ * built by the script into `#stage` only when the host puts the view in fullscreen.
  *
  * The markup's words are English, so the first paint is never blank, and each carries its catalogue key
- * (`data-l10n`, `data-l10n-aria`, `data-l10n-label`), so the script re-words it in the person's language before the
- * view shows. The document has no `lang` of its own: a host may set one before the screen is written into its
- * document (Codex does), and the script reads it, then sets the language it speaks.
+ * (`data-l10n`, `data-l10n-aria`, `data-l10n-label`, `data-l10n-placeholder`), so the script re-words it in the
+ * person's language before the view shows. The document has no `lang` of its own: a host may set one before the
+ * screen is written into its document (Codex does), and the script reads it, then sets the language it speaks.
  */
 export declare const buildSlateUiHtml: ({ target }: {
     target: SlateUiTarget;

package/dist/mcp-slate-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMlF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,GAAI,YAAY;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,KAAG,MAwCxE,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,aAAa,QAAwC,CAAC"}
+{"version":3,"file":"mcp-slate-ui.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAOlF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,GAAI,YAAY;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,KAAG,MAwCxE,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,aAAa,QAAwC,CAAC"}

package/dist/mcp-slate-ui.js

@@ -1,25 +1,26 @@
 import { SLATE_UI_COPY as COPY } from './mcp-slate-ui-copy.js';
 import { buildSlateUiScript } from './mcp-slate-ui-script.js';
 import { SLATE_UI_STYLES } from './mcp-slate-ui-styles.js';
-import { SLATE_UI_DIALOG_STYLES, SLATE_UI_MORE_STYLES } from './mcp-slate-ui-styles-dialog.js';
+import { SLATE_UI_INSPIRATION_STYLES } from './mcp-slate-ui-styles-inspiration.js';
 import { SLATE_UI_PAUSE_STYLES } from './mcp-slate-ui-styles-pause.js';
 import { SLATE_UI_STAGE_STYLES } from './mcp-slate-ui-styles-stage.js';
+import { SLATE_UI_DESIGNS_STYLES } from './mcp-slate-ui-styles-designs.js';
 /**
- * The workspace view for one target, as one self-contained HTML document: no external script,
- * stylesheet, font, or URL, so it renders under the strictest host sandbox.
+ * The workspace view for one target, as one self-contained HTML document: no external script, stylesheet or font, so
+ * it renders under the strictest host sandbox. Reference pictures with a public rendition load from the rendition
+ * origin the resource declares; everything else arrives through the app's tools.
  *
- * The static markup is the inline card and nothing else: the tabs, one large
- * image, Select under it (with the place an error about a click shows), the
- * strip of options on as many rows as it takes, and an icon-only control that
- * opens the workspace. The card has no status line: drawing shows on the
- * thumbnails themselves, and an option that failed says why on its own tile.
- * The fullscreen stage and its dialogs are built by the script into `#stage`
- * only when the host puts the view in fullscreen.
+ * The static markup is the inline card: the prompt card (the screen's one input, an expanding field the person can edit,
+ * with its Search button inside), then the tabs Inspiration, References and Designs with the quiet selected count and the
+ * icon-only control that opens the workspace, then one pane per tab and
+ * the host of the large view (used in the card only when the host has no fullscreen). The Designs pane is built by
+ * mcp-slate-ui-script-designs.ts; the Inspiration and References panes by their scripts. The fullscreen stage is
+ * built by the script into `#stage` only when the host puts the view in fullscreen.
  *
  * The markup's words are English, so the first paint is never blank, and each carries its catalogue key
- * (`data-l10n`, `data-l10n-aria`, `data-l10n-label`), so the script re-words it in the person's language before the
- * view shows. The document has no `lang` of its own: a host may set one before the screen is written into its
- * document (Codex does), and the script reads it, then sets the language it speaks.
+ * (`data-l10n`, `data-l10n-aria`, `data-l10n-label`, `data-l10n-placeholder`), so the script re-words it in the
+ * person's language before the view shows. The document has no `lang` of its own: a host may set one before the
+ * screen is written into its document (Codex does), and the script reads it, then sets the language it speaks.
  */
 export const buildSlateUiHtml = ({ target }) => `<!doctype html>
 <html>
@@ -27,7 +28,7 @@ export const buildSlateUiHtml = ({ target }) => `<!doctype html>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">${target === 'local' ? '' : `\n<meta name="slate-target" content="${target}">`}
 <title>${COPY.title}</title>
-<style>${SLATE_UI_STYLES}${SLATE_UI_STAGE_STYLES}${SLATE_UI_DIALOG_STYLES}${SLATE_UI_MORE_STYLES}${SLATE_UI_PAUSE_STYLES}</style>
+<style>${SLATE_UI_STYLES}${SLATE_UI_STAGE_STYLES}${SLATE_UI_DESIGNS_STYLES}${SLATE_UI_INSPIRATION_STYLES}${SLATE_UI_PAUSE_STYLES}</style>
 </head>
 <body>
 <div id="fatal" class="hidden" role="alert"></div>
@@ -35,26 +36,26 @@ export const buildSlateUiHtml = ({ target }) => `<!doctype html>
   <h1 class="sr" data-l10n="title">${COPY.title}</h1>
   <p class="note hidden" id="empty" data-l10n="empty">${COPY.empty}</p>
   <div id="card">
+    <div class="briefwrap"><textarea id="brief" class="brief" rows="1" spellcheck="false" aria-label="${COPY.briefLabel}" placeholder="${COPY.briefPlaceholder}" data-l10n-aria="briefLabel" data-l10n-placeholder="briefPlaceholder"></textarea><button id="briefgo" type="button" class="primary promptgo" data-l10n="search">${COPY.search}</button></div>
     <div class="topbar">
       <div class="tabs" role="tablist" aria-label="${COPY.title}" data-l10n-aria="title">
-        <button type="button" role="tab" class="tab" data-tab="designs" aria-selected="true" data-l10n="tabDesigns">${COPY.tabDesigns}</button>
         <button type="button" role="tab" class="tab" data-tab="inspiration" aria-selected="false" data-l10n="tabInspiration">${COPY.tabInspiration}</button>
+        <button type="button" role="tab" class="tab" data-tab="references" aria-selected="false" data-l10n="tabReferences">${COPY.tabReferences}</button>
+        <button type="button" role="tab" class="tab" data-tab="designs" aria-selected="true" data-l10n="tabDesigns">${COPY.tabDesigns}</button>
       </div>
+      <span class="selcount" data-selcount aria-live="polite"></span>
       <button id="expand" type="button" class="iconbtn" aria-label="${COPY.openWorkspace}" title="${COPY.openWorkspace}" data-l10n-label="openWorkspace" disabled>
         <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></svg>
       </button>
     </div>
+    <div id="pane-inspiration" class="hidden"></div>
+    <div id="pane-references" class="hidden"></div>
     <div id="pane-designs">
       <div id="pausebar" class="pausebar hidden"></div>
-      <div id="hero" class="hero"></div>
-      <div class="pickrow">
-        <p class="cardalert" id="cardalert" role="alert"></p>
-        <button id="select" type="button" class="primary" data-l10n="select" disabled>${COPY.select}</button>
-      </div>
-      <div class="strip" id="strip" role="group" aria-label="${COPY.optionsGroup}" data-l10n-aria="optionsGroup"></div>
-      <div id="more"></div>
+      <p class="cardalert" id="cardalert" role="alert"></p>
+      <div id="designs" class="designs"></div>
     </div>
-    <div id="pane-inspiration" class="hidden"></div>
+    <div id="viewer" class="hidden"></div>
   </div>
 </main>
 <div id="stage" class="hidden"></div>

package/dist/mcp-slate-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui.js","sourceRoot":"","sources":["../src/mcp-slate-ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAsB,MAAM,0BAA0B,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAC/F,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAA6B,EAAU,EAAE,CAAC;;;;sEAIb,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,wCAAwC,MAAM,IAAI;SACzI,IAAI,CAAC,KAAK;SACV,eAAe,GAAG,qBAAqB,GAAG,sBAAsB,GAAG,oBAAoB,GAAG,qBAAqB;;;;;qCAKnF,IAAI,CAAC,KAAK;wDACS,IAAI,CAAC,KAAK;;;qDAGb,IAAI,CAAC,KAAK;sHACuD,IAAI,CAAC,UAAU;+HACN,IAAI,CAAC,cAAc;;sEAE5E,IAAI,CAAC,aAAa,YAAY,IAAI,CAAC,aAAa;;;;;;;;;wFAS9B,IAAI,CAAC,MAAM;;+DAEpC,IAAI,CAAC,YAAY;;;;;;;UAOtE,kBAAkB,CAAC,MAAM,CAAC;;;CAGnC,CAAC;AAEF,yDAAyD;AACzD,MAAM,CAAC,MAAM,aAAa,GAAG,gBAAgB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC"}
+{"version":3,"file":"mcp-slate-ui.js","sourceRoot":"","sources":["../src/mcp-slate-ui.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAsB,MAAM,0BAA0B,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,MAAM,EAA6B,EAAU,EAAE,CAAC;;;;sEAIb,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,wCAAwC,MAAM,IAAI;SACzI,IAAI,CAAC,KAAK;SACV,eAAe,GAAG,qBAAqB,GAAG,uBAAuB,GAAG,2BAA2B,GAAG,qBAAqB;;;;;qCAK3F,IAAI,CAAC,KAAK;wDACS,IAAI,CAAC,KAAK;;wGAEsC,IAAI,CAAC,UAAU,kBAAkB,IAAI,CAAC,gBAAgB,oKAAoK,IAAI,CAAC,MAAM;;qDAExR,IAAI,CAAC,KAAK;+HACgE,IAAI,CAAC,cAAc;6HACrB,IAAI,CAAC,aAAa;sHACzB,IAAI,CAAC,UAAU;;;sEAG/D,IAAI,CAAC,aAAa,YAAY,IAAI,CAAC,aAAa;;;;;;;;;;;;;;;UAe5G,kBAAkB,CAAC,MAAM,CAAC;;;CAGnC,CAAC;AAEF,yDAAyD;AACzD,MAAM,CAAC,MAAM,aAAa,GAAG,gBAAgB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC"}

package/dist/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAWnE,OAAO,EAAoB,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAWzF,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;;;;OAOG;IACH,MAAM,EAAE,gBAAgB,GAAG,CAAC,MAAM,gBAAgB,CAAC,CAAC;IACpD,sFAAsF;IACtF,YAAY,CAAC,EAAE,YAAY,GAAG,CAAC,MAAM,YAAY,CAAC,CAAC;IACnD;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,eAAe,GAAI,SAAS,gBAAgB,KAAG,MA4C3D,CAAC;AAEF,wBAAsB,cAAc,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAE7E"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAWnE,OAAO,EAAoB,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAYzF,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;;;;OAOG;IACH,MAAM,EAAE,gBAAgB,GAAG,CAAC,MAAM,gBAAgB,CAAC,CAAC;IACpD,sFAAsF;IACtF,YAAY,CAAC,EAAE,YAAY,GAAG,CAAC,MAAM,YAAY,CAAC,CAAC;IACnD;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,qGAAqG;AACrG,eAAO,MAAM,eAAe,GAAI,SAAS,gBAAgB,KAAG,MA6C3D,CAAC;AAEF,wBAAsB,cAAc,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAE7E"}

package/dist/server.js

@@ -6,6 +6,7 @@ import { readCorpusConfig } from './config.js';
 import { MCP_TOOL_DEFINITIONS } from './mcp-tool-definitions.js';
 import { callMcpTool, createMcpCorpusDependencies, createMcpToolDependencies, } from './mcp-tool-handler.js';
 import { lazyCorpus } from './slate-corpus.js';
+import { startLocalReferences } from './slate-site-references-local.js';
 import { listSlateResources, readSlateResource } from './mcp-slate-resource.js';
 import { SLATE_TOOL_DEFINITIONS, createSlateToolHandler, isSlateTool, } from './mcp-slate-tools.js';
 /** Construct the transport without reading credentials; local workflow and slate tools need none. */
@@ -28,6 +29,7 @@ export const createMcpServer = (options) => {
     const slateTools = createSlateToolHandler({
         // The workspace's free reference search reads the same optional-auth corpus configuration, lazily.
         corpus: lazyCorpus(resolveCorpusConfig),
+        gatherReferences: (root) => { startLocalReferences(root); },
         ...options.slate,
     });
     const server = new Server({ name: PACKAGE_NAME, version: packageIdentity().version }, { capabilities: { tools: {}, resources: {} } });

package/dist/server.js.map

@@ -1 +1 @@
-{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EACL,qBAAqB,EACrB,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,GAE1B,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAA4C,MAAM,aAAa,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EACL,WAAW,EACX,2BAA2B,EAC3B,yBAAyB,GAG1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,EACL,sBAAsB,EACtB,sBAAsB,EACtB,WAAW,GAEZ,MAAM,sBAAsB,CAAC;AAsB9B,qGAAqG;AACrG,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAyB,EAAU,EAAE;IACnE,IAAI,YAA6C,CAAC;IAClD,IAAI,MAAyC,CAAC;IAC9C,MAAM,aAAa,GAAG,GAAqB,EAAE,CAAC,CAC5C,OAAO,OAAO,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CACzE,CAAC;IACF,MAAM,mBAAmB,GAAG,GAAiB,EAAE;QAC7C,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,OAAO,OAAO,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACzG,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC1F,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,GAA0B,EAAE;QACrD,MAAM,KAAK,2BAA2B,CAAC,mBAAmB,EAAE,CAAC,CAAC;QAC9D,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAwB,EAAE;QACnD,YAAY,KAAK,yBAAyB,CAAC,aAAa,EAAE,CAAC,CAAC;QAC5D,OAAO,YAAY,CAAC;IACtB,CAAC,CAAC;IACF,MAAM,UAAU,GAAG,sBAAsB,CAAC;QACxC,mGAAmG;QACnG,MAAM,EAAE,UAAU,CAAC,mBAAmB,CAAC;QACvC,gBAAgB,EAAE,CAAC,IAAI,EAAE,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC3D,GAAG,OAAO,CAAC,KAAK;KACjB,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,IAAI,MAAM,CACvB,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,OAAO,EAAE,EAC1D,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,CAC/C,CAAC;IAEF,MAAM,CAAC,iBAAiB,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;QAC5D,KAAK,EAAE,CAAC,GAAG,oBAAoB,EAAE,GAAG,sBAAsB,CAAC;KAC5D,CAAC,CAAC,CAAC;IACJ,MAAM,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,KAAK,EAAE,OAAO,EAA2B,EAAE;QACzF,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC;QACjD,IAAI,WAAW,CAAC,IAAI,CAAC;YAAE,OAAO,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACrD,OAAO,MAAM,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,SAAS,EAAE,kBAAkB,CAAC,CAAC;IAC1F,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,iBAAiB,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;QAChE,SAAS,EAAE,kBAAkB,EAAE;KAChC,CAAC,CAAC,CAAC;IACJ,MAAM,CAAC,iBAAiB,CAAC,yBAAyB,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CACrE,iBAAiB,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CACtC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,OAAyB;IAC5D,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,oBAAoB,EAAE,CAAC,CAAC;AACrE,CAAC"}

package/dist/slate-actions.d.ts

@@ -25,6 +25,20 @@ export type RoundAction = {
     note: string | null;
     fromVersionId: string | null;
     count: RoundOptionCount;
+    /** The design prompt as the person edited it on the screen; it becomes the workspace's brief. Absent: unchanged. */
+    brief?: string;
+};
+/**
+ * Branch: grow the other pages of the product from one design, the design attached as the identity reference. The
+ * pages are the person's names (one option each), or, with none, `count` pages the drawing model chooses.
+ */
+export type BranchAction = {
+    kind: 'round';
+    mode: 'branch';
+    note: null;
+    fromVersionId: string;
+    count: number;
+    pages: string[];
 };
 export type EditAction = {
     kind: 'edit';
@@ -32,12 +46,19 @@ export type EditAction = {
     prompt: string;
     strokes: SlateStroke[];
 };
-export type SlateWorkAction = RoundAction | EditAction;
+export type SlateWorkAction = RoundAction | BranchAction | EditAction;
+export declare const BRANCH_DEFAULT_PAGES = 4;
+export declare const BRANCH_MAX_PAGES = 8;
+export declare const PAGE_NAME_MAX_CHARACTERS = 60;
+/** The pages a branch draws when the person names none, in this order (a product without one draws its closest equivalent). */
+export declare const BRANCH_DEFAULT_PAGE_NAMES: readonly ["Detail", "Sign in", "Pricing", "Settings", "Dashboard", "Search", "Profile", "Checkout"];
 /** Control characters are stripped except tab and newline; the rest is the user's text. */
 export declare const cleanUserText: (value: string) => string;
 /** Freehand strokes as integer permille points; anything outside the limits is refused, never trimmed. */
 export declare const normalizeStrokes: (value: unknown) => SlateStroke[];
 /** A missing count is the default; anything but 1, 2, 4, 6, 8 or 12 is refused, never rounded. */
 export declare const normalizeRoundCount: (value: unknown) => RoundOptionCount;
+/** Page names: trimmed, inner whitespace collapsed, empty ones dropped; more than eight, or a name over 60 characters, is refused. */
+export declare const normalizePages: (value: unknown) => string[];
 export declare const normalizeAction: (input: unknown) => SlateWorkAction;
 //# sourceMappingURL=slate-actions.d.ts.map

package/dist/slate-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slate-actions.d.ts","sourceRoot":"","sources":["../src/slate-actions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAkD,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5G;;;GAGG;AAEH,4FAA4F;AAC5F,eAAO,MAAM,mBAAmB,8BAA+B,CAAC;AAChE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,eAAO,MAAM,0BAA0B,EAAE,gBAAoB,CAAC;AAC9D,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,qBAAqB,OAA8B,CAAC;AACjE;;;GAGG;AACH,eAAO,MAAM,sBAAsB,6KAA6K,CAAC;AACjN,eAAO,MAAM,aAAa;;;;CAAqE,CAAC;AAEhG,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AACF,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC;AACrG,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,UAAU,CAAC;AAQvD,2FAA2F;AAC3F,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAG7C,CAAC;AAEF,0GAA0G;AAC1G,eAAO,MAAM,gBAAgB,GAAI,OAAO,OAAO,KAAG,WAAW,EAsB5D,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,mBAAmB,GAAI,OAAO,OAAO,KAAG,gBAKpD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,OAAO,KAAG,eA+BhD,CAAC"}
+{"version":3,"file":"slate-actions.d.ts","sourceRoot":"","sources":["../src/slate-actions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAkD,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5G;;;GAGG;AAEH,4FAA4F;AAC5F,eAAO,MAAM,mBAAmB,8BAA+B,CAAC;AAChE,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AACpE,eAAO,MAAM,0BAA0B,EAAE,gBAAoB,CAAC;AAC9D,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,qBAAqB,OAA8B,CAAC;AACjE;;;GAGG;AACH,eAAO,MAAM,sBAAsB,6KAA6K,CAAC;AACjN,eAAO,MAAM,aAAa;;;;CAAqE,CAAC;AAGhG,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,gBAAgB,CAAC;IACxB,oHAAoH;IACpH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AACF;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,IAAI,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAChI,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC;AACrG,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAEtE,eAAO,MAAM,oBAAoB,IAAI,CAAC;AACtC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C,+HAA+H;AAC/H,eAAO,MAAM,yBAAyB,qGAAsG,CAAC;AAQ7I,2FAA2F;AAC3F,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAG7C,CAAC;AAEF,0GAA0G;AAC1G,eAAO,MAAM,gBAAgB,GAAI,OAAO,OAAO,KAAG,WAAW,EAsB5D,CAAC;AAEF,kGAAkG;AAClG,eAAO,MAAM,mBAAmB,GAAI,OAAO,OAAO,KAAG,gBAKpD,CAAC;AAEF,sIAAsI;AACtI,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,MAAM,EAWrD,CAAC;AAWF,eAAO,MAAM,eAAe,GAAI,OAAO,OAAO,KAAG,eAsChD,CAAC"}

package/dist/slate-actions.js

@@ -16,6 +16,12 @@ export const EDIT_PROMPT_MAX_BYTES = SLATE_EDIT_PROMPT_MAX_BYTES;
  */
 export const EDIT_MARKS_ONLY_PROMPT = 'Infer the change from the marks: an X or a cross-out means remove that element, a circle or a scribble means adjust it, and any words written there are the instruction.';
 export const STROKE_LIMITS = { strokes: 24, pointsPerStroke: 400, pointsTotal: 3_000 };
+const ROUND_BRIEF_MAX_CHARACTERS = 2_000;
+export const BRANCH_DEFAULT_PAGES = 4;
+export const BRANCH_MAX_PAGES = 8;
+export const PAGE_NAME_MAX_CHARACTERS = 60;
+/** The pages a branch draws when the person names none, in this order (a product without one draws its closest equivalent). */
+export const BRANCH_DEFAULT_PAGE_NAMES = ['Detail', 'Sign in', 'Pricing', 'Settings', 'Dashboard', 'Search', 'Profile', 'Checkout'];
 const isRecord = (value) => (!!value && typeof value === 'object' && !Array.isArray(value));
 const invalid = (message, l10n) => { throw new SlateError('invalid_input', message, l10n ? { l10n } : {}); };
 /** Control characters are stripped except tab and newline; the rest is the user's text. */
@@ -63,12 +69,42 @@ export const normalizeRoundCount = (value) => {
         return invalid(`count must be one of ${ROUND_OPTION_COUNTS.join(', ')}`);
     return allowed;
 };
+/** Page names: trimmed, inner whitespace collapsed, empty ones dropped; more than eight, or a name over 60 characters, is refused. */
+export const normalizePages = (value) => {
+    if (value === undefined || value === null)
+        return [];
+    if (!Array.isArray(value))
+        return invalid('pages must be a list of page names');
+    const pages = value.map((page) => {
+        if (typeof page !== 'string')
+            return invalid('a page name must be text');
+        const cleaned = cleanUserText(page).replace(/\s+/gu, ' ');
+        if ([...cleaned].length > PAGE_NAME_MAX_CHARACTERS)
+            return invalid(`A page name can be at most ${PAGE_NAME_MAX_CHARACTERS} characters.`);
+        return cleaned;
+    }).filter(Boolean);
+    if (pages.length > BRANCH_MAX_PAGES)
+        return invalid(`A branch draws at most ${BRANCH_MAX_PAGES} pages.`);
+    return pages;
+};
+const normalizeBranch = (input) => {
+    const fromVersionId = input.fromVersionId;
+    if (typeof fromVersionId !== 'string' || !VERSION_ID_PATTERN.test(fromVersionId))
+        return invalid('A branch needs the version it grows from (fromVersionId).');
+    const pages = normalizePages(input.pages);
+    const count = pages.length > 0 ? pages.length : (input.count ?? BRANCH_DEFAULT_PAGES);
+    if (typeof count !== 'number' || !Number.isInteger(count) || count < 1 || count > BRANCH_MAX_PAGES)
+        return invalid(`A branch draws 1 to ${BRANCH_MAX_PAGES} pages.`);
+    return { kind: 'round', mode: 'branch', note: null, fromVersionId, count, pages: pages.length > 0 ? pages : BRANCH_DEFAULT_PAGE_NAMES.slice(0, count) };
+};
 export const normalizeAction = (input) => {
     if (!isRecord(input))
         return invalid('action must be an object');
+    if (input.kind === 'round' && input.mode === 'branch')
+        return normalizeBranch(input);
     if (input.kind === 'round') {
         if (input.mode !== 'new' && input.mode !== 'like')
-            return invalid('mode must be new or like');
+            return invalid('mode must be new, like or branch');
         let note = null;
         if (input.note !== undefined && input.note !== null) {
             if (typeof input.note !== 'string')
@@ -88,7 +124,15 @@ export const normalizeAction = (input) => {
             return invalid('More like this needs the version to stay close to (fromVersionId).');
         if (input.mode === 'new' && fromVersionId !== null)
             return invalid('New options do not start from a version.');
-        return { kind: 'round', mode: input.mode, note, fromVersionId, count: normalizeRoundCount(input.count) };
+        let brief = null;
+        if (input.brief !== undefined && input.brief !== null) {
+            if (typeof input.brief !== 'string')
+                return invalid('brief must be text');
+            brief = cleanUserText(input.brief).replace(/\s+/gu, ' ') || null;
+            if (brief !== null && [...brief].length > ROUND_BRIEF_MAX_CHARACTERS)
+                return invalid(`The brief can be at most ${ROUND_BRIEF_MAX_CHARACTERS} characters.`);
+        }
+        return { kind: 'round', mode: input.mode, note, fromVersionId, count: normalizeRoundCount(input.count), ...(brief === null ? {} : { brief }) };
     }
     if (input.kind === 'edit') {
         const versionId = input.versionId;