@12ui/design 0.2.76 → 0.2.78

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-script.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,4BAA4B,EAAE,iCAAiC,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvN,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAuBhE,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAY3B,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAqB,EAAU,EAAE,CAAC;IACnE,eAAe;IACf,gBAAgB;IAChB,eAAe;SACZ,OAAO,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;SAC1D,OAAO,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;SACxD,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SACnD,OAAO,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC;QAC3C,OAAO,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,qBAAqB;QACnF,YAAY,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,0BAA0B;QAClG,QAAQ,EAAE,uBAAuB;KAClC,CAAC,CAAC;IACL,cAAc;IACd,iBAAiB;IACjB,eAAe;IACf,eAAe;IACf,oBAAoB;IACpB,cAAc;IACd,eAAe;IACf,aAAa,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1E,iBAAiB;IACjB,eAAe;IACf,gBAAgB;IAChB,SAAS;IACT,OAAO;CACR,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-script.js","sourceRoot":"","sources":["../src/mcp-slate-ui-script.ts"],"names":[],"mappings":"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"}

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

@@ -1,16 +1,15 @@
 /**
- * The dialogs (Edit, Branch, Convert), the scribble layer of Edit and the
- * Inspiration tab. A dialog is a centred box over a dimmed workspace; it
- * scrolls inside itself when the window is short, and fills the width on a
- * phone. The reference tiles are square and fluid: at least 192 px across in
- * the card and 256 px in the workspace (--ref-min), two across under 420 px.
+ * The dialogs (Edit, Branch, Convert), the scribble layer of Edit and, at the
+ * end, the Inspiration tab (mcp-slate-ui-styles-inspiration.ts). A dialog is a
+ * centred box over a dimmed workspace; it scrolls inside itself when the window
+ * is short, and fills the width on a phone.
  */
 export declare const SLATE_UI_DIALOG_STYLES: string;
 /**
  * The Generate more tile and its panel. The tile is quiet but findable: a
  * dashed border in the secondary text colour, a plus and the words "Generate
- * more", no fill; it takes the size of the thumbnails around it (--thumb-card
- * beside the card's strip, --thumb-rail in the selection). The panel is one bordered block under the thumbnails:
+ * more", no fill; it is one more tile of the thumbnails' grid (the card's strip, and in the selection a row of the
+ * same columns), as wide as a column and with the newest round's ratio. The panel is one bordered block under the thumbnails:
  * heading, one helper line, the "Based on" switch, the selected inspiration as
  * small chips, a note, the count and the two buttons. In the card, the script
  * shortens the large image by the panel's height while it is open (an inline

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-styles-dialog.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,QAoClC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,QAuChC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles-dialog.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,QAqBJ,CAAC;AAEhC;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,QAsChC,CAAC"}

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

@@ -1,9 +1,9 @@
+import { SLATE_UI_INSPIRATION_STYLES } from './mcp-slate-ui-styles-inspiration.js';
 /**
- * The dialogs (Edit, Branch, Convert), the scribble layer of Edit and the
- * Inspiration tab. A dialog is a centred box over a dimmed workspace; it
- * scrolls inside itself when the window is short, and fills the width on a
- * phone. The reference tiles are square and fluid: at least 192 px across in
- * the card and 256 px in the workspace (--ref-min), two across under 420 px.
+ * The dialogs (Edit, Branch, Convert), the scribble layer of Edit and, at the
+ * end, the Inspiration tab (mcp-slate-ui-styles-inspiration.ts). A dialog is a
+ * centred box over a dimmed workspace; it scrolls inside itself when the window
+ * is short, and fills the width on a phone.
  */
 export const SLATE_UI_DIALOG_STYLES = String.raw `
   .modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .45); overflow: auto; }
@@ -26,27 +26,12 @@ export const SLATE_UI_DIALOG_STYLES = String.raw `
   .imgwrap { position: relative; width: min(100%, calc(60vh * 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; touch-action: none; }
   .stageimg { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; }
   .scribble { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
-  .searchrow { display: flex; gap: 8px; min-width: 0; }
-  .searchrow .query { flex: 1 1 0; min-width: 0; }
-  .insp { container-type: inline-size; }
-  .insp.card { --ref-min: 192px; }
-  .insp.stage { --ref-min: 256px; }
-  .results { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
-  .refhead { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
-  .refgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ref-min), 1fr)); gap: 8px; }
-  @container (max-width: 419px) { .refgrid { grid-template-columns: repeat(2, 1fr); } }
-  .refbtn, .skeleton { width: 100%; aspect-ratio: 1; }
-  .skeleton { border-radius: 6px; background: var(--bg2); }
-  .refbtn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
-  .check { position: absolute; top: 6px; right: 6px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--inverse); color: var(--inverse-text); }
-  .refbtn[aria-pressed="true"] .check { display: grid; }
-  .placeholder { display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text2); padding: 16px; text-align: center; }
-`;
+${SLATE_UI_INSPIRATION_STYLES}`;
 /**
  * The Generate more tile and its panel. The tile is quiet but findable: a
  * dashed border in the secondary text colour, a plus and the words "Generate
- * more", no fill; it takes the size of the thumbnails around it (--thumb-card
- * beside the card's strip, --thumb-rail in the selection). The panel is one bordered block under the thumbnails:
+ * more", no fill; it is one more tile of the thumbnails' grid (the card's strip, and in the selection a row of the
+ * same columns), as wide as a column and with the newest round's ratio. The panel is one bordered block under the thumbnails:
  * heading, one helper line, the "Based on" switch, the selected inspiration as
  * small chips, a note, the count and the two buttons. In the card, the script
  * shortens the large image by the panel's height while it is open (an inline
@@ -56,8 +41,7 @@ export const SLATE_UI_MORE_STYLES = String.raw `
   button.moretile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none; padding: 0; border: 1px dashed var(--text2); border-radius: 6px; background: none; color: var(--text2); font-size: 12px; font-weight: 500; line-height: 1.2; }
   button.moretile:hover:not(:disabled), button.moretile[aria-expanded="true"] { color: var(--text); border-color: var(--text); }
   button.moretile:disabled { opacity: .35; }
-  .stripwrap .moretile { width: var(--thumb-card); height: var(--thumb-card); }
-  .rail .moretile { width: var(--thumb-rail); height: var(--thumb-rail); }
+  .strip .moretile, .rail .moretile { width: 100%; aspect-ratio: var(--ar, 1.5); align-self: start; }
   .morepanel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
   #more:not(:empty) { padding-top: 10px; }
   #card .hero.folded { display: none; }
@@ -80,13 +64,13 @@ export const SLATE_UI_MORE_STYLES = String.raw `
   .morepanel textarea { width: 100%; min-width: 0; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); resize: vertical; }
   .morepanel textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
   .morerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
-  .morebtns { display: flex; gap: 8px; margin-left: auto; }
-  .morerow button { padding: 8px 10px; }
+  .morebtns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; margin-left: auto; }
+  .morerow button { min-width: 0; max-width: 100%; padding: 8px 10px; overflow-wrap: anywhere; }
   .seg { display: flex; flex: 1 1 auto; min-width: 0; max-width: 260px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
   .morehost .seg { max-width: none; flex-basis: 100%; }
-  .segopt { position: relative; display: block; flex: 1 1 0; min-width: 28px; }
+  .segopt { position: relative; display: block; flex: 1 1 0; min-width: 22px; }
   .segopt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
-  .segopt span { display: block; padding: 7px 4px; text-align: center; font-weight: 600; }
+  .segopt span { display: block; padding: 7px 2px; text-align: center; font-weight: 600; }
   .segopt input:checked + span { background: var(--inverse); color: var(--inverse-text); }
   .segopt input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: -2px; }
   .morepanel .alert { margin: 0; }

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-styles-dialog.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC/C,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC7C,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles-dialog.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AAEnF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;EAqB9C,2BAA2B,EAAE,CAAC;AAEhC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC7C,CAAC"}

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

@@ -0,0 +1,18 @@
+/**
+ * The Inspiration tab. The reference tiles are a collage: the script places each
+ * tile at its picture's own aspect ratio in bands as wide as the grid
+ * (`mcp-slate-ui-script-inspiration-collage.ts` holds the sizes), so the grid is
+ * a positioned box and its tiles are absolute; the picture fills its tile (the
+ * `.thumb` rule contains it, so a recorded ratio that is off shows the whole
+ * picture). A reference a round used carries a badge at its lower left and
+ * a ring in the accent colour inside its edge; a selected one keeps the outer
+ * ring and the check at its upper right, so the two read apart when a tile is
+ * both.
+ *
+ * In the card the results scroll inside themselves (the host grows the frame
+ * and never scrolls the thread, so a long page would push the card out of
+ * sight); Generate sits under them. In the workspace the page scrolls and
+ * Generate sticks to the bottom of the window.
+ */
+export declare const SLATE_UI_INSPIRATION_STYLES: string;
+//# sourceMappingURL=mcp-slate-ui-styles-inspiration.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-styles-inspiration.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-inspiration.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,2BAA2B,QAyBvC,CAAC"}

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

@@ -0,0 +1,43 @@
+/**
+ * The Inspiration tab. The reference tiles are a collage: the script places each
+ * tile at its picture's own aspect ratio in bands as wide as the grid
+ * (`mcp-slate-ui-script-inspiration-collage.ts` holds the sizes), so the grid is
+ * a positioned box and its tiles are absolute; the picture fills its tile (the
+ * `.thumb` rule contains it, so a recorded ratio that is off shows the whole
+ * picture). A reference a round used carries a badge at its lower left and
+ * a ring in the accent colour inside its edge; a selected one keeps the outer
+ * ring and the check at its upper right, so the two read apart when a tile is
+ * both.
+ *
+ * In the card the results scroll inside themselves (the host grows the frame
+ * and never scrolls the thread, so a long page would push the card out of
+ * sight); Generate sits under them. In the workspace the page scrolls and
+ * Generate sticks to the bottom of the window.
+ */
+export const SLATE_UI_INSPIRATION_STYLES = String.raw `
+  .searchrow { display: flex; gap: 8px; min-width: 0; }
+  .searchrow .query { flex: 1 1 0; min-width: 0; }
+  .insp { container-type: inline-size; }
+  .insphow { margin: 6px 0 0; font-size: 12px; color: var(--text2); overflow-wrap: anywhere; }
+  .insp .status:empty { min-height: 0; margin: 0; }
+  .results { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
+  /* The gutter is kept, so the scroll bar coming and going never changes the collage's width. */
+  .insp.card .results { max-height: max(360px, 75cqw); overflow-y: auto; scrollbar-gutter: stable; padding: 3px; margin-top: 9px; }
+  .refhead { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
+  .refgrid { position: relative; }
+  .refgrid > .refbtn, .refgrid > .skeleton { position: absolute; }
+  .skeleton { border-radius: 6px; background: var(--bg2); }
+  .refbtn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
+  /* Drawn over the picture, which fills the tile and would hide an inset shadow on the button itself. */
+  .refbtn.used::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ring); pointer-events: none; }
+  .check { position: absolute; top: 6px; right: 6px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--inverse); color: var(--inverse-text); }
+  .refbtn[aria-pressed="true"] .check { display: grid; }
+  .usedbadge { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 1px 8px; border-radius: 9px; background: var(--inverse); color: var(--inverse-text); font-size: 11px; font-weight: 600; line-height: 16px; text-align: left; overflow-wrap: anywhere; }
+  .placeholder { display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text2); padding: 16px; text-align: center; }
+  .inspbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); background: var(--bg); }
+  .inspbar .help { flex: 1 1 200px; min-width: 0; }
+  .inspbar button { flex: none; }
+  /* Sticky in the workspace, and 4 px wider than the grid on each side, so a selected tile's ring never shows past it. */
+  .insp.stage .inspbar { position: sticky; bottom: 0; z-index: 1; margin: 12px -4px 0; padding: 10px 4px 12px; }
+`;
+//# sourceMappingURL=mcp-slate-ui-styles-inspiration.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-styles-inspiration.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-inspiration.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBpD,CAAC"}

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

@@ -0,0 +1,10 @@
+/**
+ * The inspiration pause's bar (mcp-slate-ui-script-pause.ts): the words of the countdown with Change and Continue at
+ * their right, and a thin line under them that shortens once a second. Calm by design: no colour but the line's, no
+ * animation but the line's one-second step, and none at all when motion is reduced (the line then jumps). In the card
+ * the bar sits above the large image; in the workspace it is as wide as the picture; in the Inspiration tab it sits at
+ * the foot, under the line that says how the options take the references. A tile of the waiting round shows the
+ * reference it will be drawn from, dimmed a little, so it never reads as a finished design.
+ */
+export declare const SLATE_UI_PAUSE_STYLES: string;
+//# sourceMappingURL=mcp-slate-ui-styles-pause.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-styles-pause.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-pause.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,QAejC,CAAC"}

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

@@ -0,0 +1,25 @@
+/**
+ * The inspiration pause's bar (mcp-slate-ui-script-pause.ts): the words of the countdown with Change and Continue at
+ * their right, and a thin line under them that shortens once a second. Calm by design: no colour but the line's, no
+ * animation but the line's one-second step, and none at all when motion is reduced (the line then jumps). In the card
+ * the bar sits above the large image; in the workspace it is as wide as the picture; in the Inspiration tab it sits at
+ * the foot, under the line that says how the options take the references. A tile of the waiting round shows the
+ * reference it will be drawn from, dimmed a little, so it never reads as a finished design.
+ */
+export const SLATE_UI_PAUSE_STYLES = String.raw `
+  .pausebar { min-width: 0; }
+  .pausebox { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg2); overflow: hidden; }
+  .pausetext { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+  .pausebtns { display: flex; flex: none; gap: 8px; margin-left: auto; }
+  .pausebtns button { flex: none; padding: 6px 14px; }
+  .pauseline { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bg3); }
+  .pauseline > span { display: block; height: 100%; background: var(--text2); transform-origin: left center; transition: transform 1s linear; }
+  @media (prefers-reduced-motion: reduce) { .pauseline > span { transition: none; } }
+  #pane-designs > .pausebar { margin-bottom: 12px; }
+  #stage .main > .pausebar { width: var(--w); margin-left: auto; margin-right: auto; }
+  .insp .pausebar { margin-top: 8px; }
+  .insp.stage .pausebar { position: sticky; bottom: 0; z-index: 1; padding-bottom: 12px; background: var(--bg); }
+  .pausechoice { margin-top: 12px; }
+  .thumbbtn.paused .thumb, .opt.paused .thumb { opacity: .72; }
+`;
+//# sourceMappingURL=mcp-slate-ui-styles-pause.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp-slate-ui-styles-pause.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-pause.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;CAe9C,CAAC"}

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

@@ -4,12 +4,16 @@
  * selection and its panel opens under it. Fluid at any width (`min-width: 0`
  * on every grid and flex parent).
  *
- * The selection's thumbnails are --thumb-rail (144 px), so its column is sized
- * to hold whole ones: 168 px (one per row) from 640px to 899px, where the image
- * keeps its room in the desktop app's default 708 px tab; 320 px (two per row)
- * from 900px; 472 px (three per row) from 1400px. Below 640px the selection
- * becomes one horizontal row above the image, scrolling inside itself, with each
- * option's version chips under its thumbnail.
+ * The selection lists every round, each as a grid of equal columns no narrower
+ * than --thumb-rail times the square root of the round's picture ratio (see
+ * mcp-slate-ui-styles.ts), and each tile has its design's own ratio. Its
+ * column is 168 px from 640px to 899px, where the image keeps its room in the
+ * desktop app's default 708 px tab (one tile across); 320 px from 900px (one
+ * 3:2 tile across, two 2:3 ones); 472 px from 1400px (two 3:2 tiles across,
+ * three 2:3 ones). Below 640px the selection sits above the image, its rows
+ * wrapping at the window's width and the list scrolling down inside a box
+ * under half the window's height (the Generate more panel opens below that
+ * box); nothing scrolls sideways.
  *
  * The action row is right-aligned and as wide as the picture (--ar is set by
  * the script on the shared parent), so Select, last, ends at the picture's

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-styles-stage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,qBAAqB,QAgDjC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles-stage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,qBAAqB,QAoDjC,CAAC"}

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

@@ -4,12 +4,16 @@
  * selection and its panel opens under it. Fluid at any width (`min-width: 0`
  * on every grid and flex parent).
  *
- * The selection's thumbnails are --thumb-rail (144 px), so its column is sized
- * to hold whole ones: 168 px (one per row) from 640px to 899px, where the image
- * keeps its room in the desktop app's default 708 px tab; 320 px (two per row)
- * from 900px; 472 px (three per row) from 1400px. Below 640px the selection
- * becomes one horizontal row above the image, scrolling inside itself, with each
- * option's version chips under its thumbnail.
+ * The selection lists every round, each as a grid of equal columns no narrower
+ * than --thumb-rail times the square root of the round's picture ratio (see
+ * mcp-slate-ui-styles.ts), and each tile has its design's own ratio. Its
+ * column is 168 px from 640px to 899px, where the image keeps its room in the
+ * desktop app's default 708 px tab (one tile across); 320 px from 900px (one
+ * 3:2 tile across, two 2:3 ones); 472 px from 1400px (two 3:2 tiles across,
+ * three 2:3 ones). Below 640px the selection sits above the image, its rows
+ * wrapping at the window's width and the list scrolling down inside a box
+ * under half the window's height (the Generate more panel opens below that
+ * box); nothing scrolls sideways.
  *
  * The action row is right-aligned and as wide as the picture (--ar is set by
  * the script on the shared parent), so Select, last, ends at the picture's
@@ -21,14 +25,21 @@ export const SLATE_UI_STAGE_STYLES = String.raw `
   .stagehead { display: flex; align-items: center; gap: 12px; min-width: 0; }
   .stagebody { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; min-width: 0; align-items: start; }
   .selection { min-width: 0; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 96px); }
-  .rail { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; overflow: auto; padding: 4px; }
+  /* The padding is room for a tile's ring and focus outline, which the scrolling list would otherwise cut. */
+  .rail { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; overflow: auto; padding: 6px; }
   .morehost:empty { display: none; }
-  .moreslot { position: sticky; bottom: 0; padding: 4px 0; background: var(--bg); }
   .round { min-width: 0; }
   .roundhead { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
-  .options { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, var(--thumb-rail)); gap: 10px 8px; }
-  .option { min-width: 0; width: var(--thumb-rail); }
-  .opt { display: block; width: var(--thumb-rail); height: var(--thumb-rail); }
+  /* Each round's options, and the row of the Generate more tile, share the columns of the selection's grid. */
+  .options, .moreslot { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--thumb-rail) * var(--shape, 1))), 1fr)); gap: 10px 8px; }
+  .options { list-style: none; margin: 0; padding: 0; }
+  /* The tile sticks to the list's bottom edge: its row reaches down over the list's padding (the 6 px under it) and out
+     over the padding at each side, so no sliver of a tile scrolled under it, nor of its selection ring or focus
+     outline (painted in that padding), shows below or beside it; its top edge fades, so a tile passing under it is
+     not cut by a hard line. */
+  .moreslot { position: sticky; bottom: -6px; margin: 0 -6px; padding: 4px 6px 10px; background: var(--bg); }
+  .moreslot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
+  .option { min-width: 0; }
   .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
   .chip { padding: 1px 7px; font-size: 11px; font-weight: 500; }
   .chip.selected { background: var(--inverse); color: var(--inverse-text); border-color: var(--inverse); }
@@ -55,12 +66,9 @@ export const SLATE_UI_STAGE_STYLES = String.raw `
   }
   @media (max-width: 639px) {
     .stagebody { grid-template-columns: minmax(0, 1fr); }
+    /* The list scrolls down inside a box under half the window; the Generate more panel opens below it at full height. */
     .selection { max-height: none; }
-    .rail { flex: none; flex-direction: row; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 8px; }
-    /* The selection is a row that scrolls sideways: the tile sticks to its right edge, so it is in view however many options there are. */
-    .moreslot { position: sticky; bottom: auto; right: 0; flex: none; align-self: flex-end; padding: 0 0 0 8px; }
-    .round { flex: none; }
-    .options { display: flex; }
+    .rail { flex: none; max-height: 45vh; }
     #stage .main { --cap: 60vh; }
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-styles-stage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD9C,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles-stage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-stage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoD9C,CAAC"}

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

@@ -7,12 +7,19 @@
  *
  * 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 strip of thumbnails scrolls inside itself.
+ * frame wider than its pane, and the thumbnails wrap onto as many rows as
+ * they need: nothing scrolls sideways.
  *
- * Thumbnail sizes are tokens, one place each: --thumb-card (the card's strip, 112 px under a 480 px card and 144 px from
- * it) and --thumb-rail (the workspace's selection, 144 px). The container queries read the card's own width (`main`).
- * Every thumbnail (designs, inspiration, the Based on picture and the reference chips) is `object-fit: contain`, so the
- * whole design shows at its own aspect ratio, letterboxed on the neutral tile background.
+ * 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.
  */
 export declare const SLATE_UI_STYLES: string;
 //# sourceMappingURL=mcp-slate-ui-styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"mcp-slate-ui-styles.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,QAkH3B,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,eAAe,QA4H3B,CAAC"}

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

@@ -7,12 +7,19 @@
  *
  * 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 strip of thumbnails scrolls inside itself.
+ * frame wider than its pane, and the thumbnails wrap onto as many rows as
+ * they need: nothing scrolls sideways.
  *
- * Thumbnail sizes are tokens, one place each: --thumb-card (the card's strip, 112 px under a 480 px card and 144 px from
- * it) and --thumb-rail (the workspace's selection, 144 px). The container queries read the card's own width (`main`).
- * Every thumbnail (designs, inspiration, the Based on picture and the reference chips) is `object-fit: contain`, so the
- * whole design shows at its own aspect ratio, letterboxed on the neutral tile background.
+ * 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.
  */
 export const SLATE_UI_STYLES = String.raw `
   /* Host variables win; these fallbacks keep the view usable when a host passes none. System fonts only. */
@@ -42,10 +49,11 @@ export const SLATE_UI_STYLES = String.raw `
     --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: 144px;
+    --thumb-rail: 170px;
   }
-  #card { --thumb-card: 112px; }
-  @container (min-width: 480px) { #card { --thumb-card: 144px; } }
+  @media (max-width: 639px) { :root { --thumb-rail: 124px; } }
+  #card { --thumb-card: 124px; }
+  @container (min-width: 480px) { #card { --thumb-card: 170px; } }
   :root[data-theme="light"] { color-scheme: light; }
   :root[data-theme="dark"] { color-scheme: dark; }
   * { box-sizing: border-box; }
@@ -76,27 +84,36 @@ export const SLATE_UI_STYLES = String.raw `
   .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; }
-  /* Under 640 px the strip takes the row and Select wraps to its own line at the right; from 640 px Select sits beside the strip. */
-  .pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; min-width: 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; }
-  /* The wrap holds the scrolling strip and, pinned at its right end outside the scroll, the Generate more tile, so the
-     tile is in view at every width and however many options there are. */
-  .stripwrap { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }
-  @container (min-width: 640px) { .stripwrap { flex: 1 1 0; } }
-  /* One row of thumbnails; more than fit scroll sideways inside the strip, never the page, with a fade at the edge. */
-  .strip { flex: 1 1 0; display: flex; gap: 8px; min-width: 0; margin: 0; padding: 4px; overflow-x: auto; }
-  .strip.fade { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
+  .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; }
-  .thumbbtn { flex: none; width: var(--thumb-card); height: var(--thumb-card); }
-  /* A thumbnail shows the whole design at its own aspect ratio: the tile stays the token's square, the picture is
-     contained in it and the rest is the neutral tile background, never a crop of the edges. */
+  /* 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); }
-  .thumbbtn.failed, .opt.failed { opacity: .5; }
+  /* 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); }
+  .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; }
   @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
   .field { margin-top: 0; }

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;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHxC,CAAC"}
+{"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"}

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

@@ -4,9 +4,17 @@ import { type SlateUiTarget } from './mcp-slate-ui-script.js';
  * stylesheet, font, or URL, so it renders under the strictest host sandbox.
  *
  * The static markup is the inline card and nothing else: the tabs, one large
- * image, one row with the strip of options and Select, one status line, and an
- * icon-only control that opens the workspace. The fullscreen stage and its dialogs are built by the
- * script into `#stage` only when the host puts the view in fullscreen.
+ * 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 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.
  */
 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;AAKlF;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,GAAI,YAAY;IAAE,MAAM,EAAE,aAAa,CAAA;CAAE,KAAG,MAyCxE,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;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"}

package/dist/mcp-slate-ui.js

@@ -2,49 +2,57 @@ 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_PAUSE_STYLES } from './mcp-slate-ui-styles-pause.js';
 import { SLATE_UI_STAGE_STYLES } from './mcp-slate-ui-styles-stage.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 static markup is the inline card and nothing else: the tabs, one large
- * image, one row with the strip of options and Select, one status line, and an
- * icon-only control that opens the workspace. The fullscreen stage and its dialogs are built by the
- * script into `#stage` only when the host puts the view in fullscreen.
+ * 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 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.
  */
 export const buildSlateUiHtml = ({ target }) => `<!doctype html>
-<html lang="en">
+<html>
 <head>
 <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}</style>
+<style>${SLATE_UI_STYLES}${SLATE_UI_STAGE_STYLES}${SLATE_UI_DIALOG_STYLES}${SLATE_UI_MORE_STYLES}${SLATE_UI_PAUSE_STYLES}</style>
 </head>
 <body>
 <div id="fatal" class="hidden" role="alert"></div>
 <main id="app" class="hidden">
-  <h1 class="sr">${COPY.title}</h1>
-  <p class="note hidden" id="empty">${COPY.empty}</p>
+  <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="topbar">
-      <div class="tabs" role="tablist" aria-label="${COPY.title}">
-        <button type="button" role="tab" class="tab" data-tab="designs" aria-selected="true">${COPY.tabDesigns}</button>
-        <button type="button" role="tab" class="tab" data-tab="inspiration" aria-selected="false">${COPY.tabInspiration}</button>
+      <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>
       </div>
-      <button id="expand" type="button" class="iconbtn" aria-label="${COPY.openWorkspace}" title="${COPY.openWorkspace}" disabled>
+      <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-designs">
+      <div id="pausebar" class="pausebar hidden"></div>
       <div id="hero" class="hero"></div>
       <div class="pickrow">
-        <div class="stripwrap" id="stripwrap">
-          <div class="strip" id="strip" role="group" aria-label="${COPY.optionsGroup}"></div>
-        </div>
-        <button id="select" type="button" class="primary" disabled>${COPY.select}</button>
+        <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="status" id="status" data-status role="status" aria-live="polite"></p>
     </div>
     <div id="pane-inspiration" class="hidden"></div>
   </div>