@12ui/design 0.2.80 → 0.2.82

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

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

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

@@ -1,18 +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.
+ * The Inspiration tab, its gallery and the large view (the References tab reuses the gallery and the large view).
  *
- * 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.
+ * - The gallery is a column of collage blocks, one per page: 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 and the gap), so a
+ *   block is a positioned box and its tiles are absolute; the picture fills its tile. No captions.
+ * - A selected tile is unmistakable: a thick ring in the host's accent hugging the picture (an overlay, so nothing
+ *   shifts in the packed collage, with a hairline of the ground inside it so it reads on a dark screenshot too) and a
+ *   filled check in the top-left corner. The expand control sits in the top-right corner: it shows on hover where
+ *   there is a pointer, and always on a touch screen.
+ * - 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) and the tray sits under them; in the workspace the page scrolls and the
+ *   tray sticks to the bottom of the window.
+ * - The large view covers the frame in the workspace's own colours, like the Designs tab's: a bar with the position,
+ *   Select or Selected and close, then the picture on a quiet port with previous and next at its sides.
  */
 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

@@ -1 +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"}
+{"version":3,"file":"mcp-slate-ui-styles-inspiration.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-inspiration.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,2BAA2B,QA2DvC,CAAC"}

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

@@ -1,43 +1,77 @@
 /**
- * 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.
+ * The Inspiration tab, its gallery and the large view (the References tab reuses the gallery and the large view).
  *
- * 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.
+ * - The gallery is a column of collage blocks, one per page: 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 and the gap), so a
+ *   block is a positioned box and its tiles are absolute; the picture fills its tile. No captions.
+ * - A selected tile is unmistakable: a thick ring in the host's accent hugging the picture (an overlay, so nothing
+ *   shifts in the packed collage, with a hairline of the ground inside it so it reads on a dark screenshot too) and a
+ *   filled check in the top-left corner. The expand control sits in the top-right corner: it shows on hover where
+ *   there is a pointer, and always on a touch screen.
+ * - 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) and the tray sits under them; in the workspace the page scrolls and the
+ *   tray sticks to the bottom of the window.
+ * - The large view covers the frame in the workspace's own colours, like the Designs tab's: a bar with the position,
+ *   Select or Selected and close, then the picture on a quiet port with previous and next at its sides.
  */
 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; }
+  .refs { container-type: inline-size; }
+  .insp > .status { margin: 0 0 10px; }
+  .results { min-width: 0; }
   /* 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); }
+  .insp.card .results { max-height: max(360px, 72cqw); overflow-y: auto; scrollbar-gutter: stable; padding: 2px; }
+  .gallery { display: flex; flex-direction: column; gap: 16px; min-width: 0; transition: opacity .15s; }
+  .insp.searching .gallery { opacity: .45; }
+  .gend { height: 1px; }
+  .refgrid { position: relative; min-width: 0; }
+  .refgrid > .gtile { position: absolute; }
+  .refbtn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius); background: var(--fill); overflow: hidden; cursor: pointer; }
+  button.refbtn:hover:not(:disabled) { background: var(--fill); }
+  .gtile .thumb:not([src]) { visibility: hidden; }
+  .refbtn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border2); pointer-events: none; }
+  .refbtn[aria-pressed="true"]::after { box-shadow: inset 0 0 0 3px var(--ring), inset 0 0 0 4.5px var(--bg); animation: picked .16s ease-out both; }
+  @keyframes picked { from { opacity: 0; } to { opacity: 1; } }
+  .refbtn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+  .check { position: absolute; top: 10px; left: 10px; z-index: 1; display: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--inverse-text); background: var(--accent-solid); box-shadow: 0 0 0 2px var(--bg); }
   .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; }
+  .zoombtn { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; color: var(--text); background: var(--bg); box-shadow: var(--elev); }
+  button.zoombtn:hover:not(:disabled) { background: var(--bg); color: var(--text); }
+  .zoombtn svg { width: 15px; height: 15px; }
+  @media (hover: hover) { .gtile .zoombtn { opacity: 0; transition: opacity .12s; } .gtile:hover .zoombtn, .gtile .zoombtn:focus-visible { opacity: 1; } }
+  .skelgrid:empty { display: none; }
+  .skelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
+  .skelgrid > .skeleton { height: 160px; border-radius: var(--radius); }
+  .placeholder { display: grid; place-items: center; min-height: 160px; border-radius: var(--radius); background: var(--fill); color: var(--text2); padding: 16px; text-align: center; font-size: var(--fs-sm); }
+  /* The tray: the picks, the countdown while a round waits, and the one action. */
+  .tray { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border2); background: var(--bg); min-width: 0; }
+  .traypicks { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
+  .traypicks:empty { display: none; }
+  .traypick { position: relative; width: 54px; height: 38px; padding: 0; border: 0; border-radius: 7px; overflow: hidden; background: var(--fill); box-shadow: inset 0 0 0 2px var(--ring); }
+  .traypick .thumb { border-radius: inherit; }
+  .trayx { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: var(--text); background: var(--bg); box-shadow: var(--elev); }
+  .trayx svg { width: 9px; height: 9px; }
+  .trayclock { font-size: var(--fs-sm); color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .trayclock:empty { display: none; }
+  .tray > button { flex: none; margin-left: auto; padding: 8px 18px; border-radius: 999px; }
   /* 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; }
+  .insp.stage .tray { position: sticky; bottom: 0; z-index: 3; margin: 16px -4px 0; padding: 12px 4px 14px; }
+  /* The large view. */
+  .bigview { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; background: var(--bg); color: var(--text); }
+  .bvbar { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 36px; }
+  .bvcount { font-size: var(--fs-sm); color: var(--text2); font-variant-numeric: tabular-nums; }
+  .bvpick { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; }
+  .bvpick.on { border-color: var(--ring); box-shadow: inset 0 0 0 1px var(--ring); }
+  .bvpick.on svg { color: var(--accent-solid); }
+  .bvview { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px 64px; border-radius: 12px; background: var(--fill); }
+  .bvimg { display: block; max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 8px; box-shadow: var(--elev-lg); user-select: none; -webkit-user-drag: none; }
+  .bvimg:not([src]) { visibility: hidden; }
+  button.bvnav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--text); background: var(--bg); box-shadow: var(--elev); }
+  button.bvnav:hover:not(:disabled) { background: var(--bg); }
+  .bvnav:disabled { opacity: .3; }
+  .bvprev { left: 12px; }
+  .bvnext { right: 12px; }
+  @media (max-width: 560px) { .bigview { padding: 8px; } .bvview { padding: 8px 8px 64px; } .bvimg { max-height: calc(100vh - 150px); } button.bvnav { top: auto; bottom: 10px; transform: none; } .bvprev { left: calc(50% - 50px); } .bvnext { right: calc(50% - 50px); } }
+  @media (prefers-reduced-motion: reduce) { .refbtn[aria-pressed="true"]::after { animation: none; } .gallery { transition: none; } .gtile .zoombtn { transition: none; } }
 `;
 //# sourceMappingURL=mcp-slate-ui-styles-inspiration.js.map

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

@@ -1 +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"}
+{"version":3,"file":"mcp-slate-ui-styles-inspiration.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-inspiration.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DpD,CAAC"}

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

@@ -2,8 +2,8 @@
  * 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
+ * the bar sits above the large image; in the workspace it is as wide as the picture. In the Inspiration tab the tray
+ * carries the countdown and Continue instead (mcp-slate-ui-styles-inspiration.ts). 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;

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

@@ -1 +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"}
+{"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,QAWjC,CAAC"}

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

@@ -2,24 +2,20 @@
  * 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
+ * the bar sits above the large image; in the workspace it is as wide as the picture. In the Inspiration tab the tray
+ * carries the countdown and Continue instead (mcp-slate-ui-styles-inspiration.ts). 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; }
+  .pausebox { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; padding: 10px 12px 12px; border-radius: var(--radius); background: var(--fill); 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 { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--fill-hover); }
   .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

@@ -1 +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"}
+{"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;;;;;;;;;;;CAW9C,CAAC"}

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

@@ -1,26 +1,7 @@
 /**
- * The fullscreen workspace: the selection on the left, one large image with
- * its band and action row in the middle. The Generate more tile tops the
- * selection, a slim bar as wide as the thumbnails (rounds are newest first, so
- * it sits where the next round will land), and its panel opens under it, both
- * in the column's own flow: the column scrolls as one, the tile in reach at
- * its top, and nothing is pinned over a thumbnail. Fluid at any width
- * (`min-width: 0` on every grid and flex parent).
- *
- * 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 rounds scrolling down inside a box
- * under half the window's height (the Generate more tile and its panel sit
- * above that box, at full height); 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
- * right edge.
+ * The fullscreen workspace: the prompt card, the tab row, then the selected tab at the window's width (the Designs tab
+ * and the large view are styled in mcp-slate-ui-styles-designs.ts). Fluid at any width (`min-width: 0` on every grid
+ * and flex parent); a wide window gets wider margins, as the inline card gets the host's.
  */
 export declare const SLATE_UI_STAGE_STYLES: string;
 //# sourceMappingURL=mcp-slate-ui-styles-stage.d.ts.map

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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,QAwDjC,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles-stage.d.ts","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-stage.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,QAOjC,CAAC"}

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

@@ -1,82 +1,14 @@
 /**
- * The fullscreen workspace: the selection on the left, one large image with
- * its band and action row in the middle. The Generate more tile tops the
- * selection, a slim bar as wide as the thumbnails (rounds are newest first, so
- * it sits where the next round will land), and its panel opens under it, both
- * in the column's own flow: the column scrolls as one, the tile in reach at
- * its top, and nothing is pinned over a thumbnail. Fluid at any width
- * (`min-width: 0` on every grid and flex parent).
- *
- * 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 rounds scrolling down inside a box
- * under half the window's height (the Generate more tile and its panel sit
- * above that box, at full height); 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
- * right edge.
+ * The fullscreen workspace: the prompt card, the tab row, then the selected tab at the window's width (the Designs tab
+ * and the large view are styled in mcp-slate-ui-styles-designs.ts). Fluid at any width (`min-width: 0` on every grid
+ * and flex parent); a wide window gets wider margins, as the inline card gets the host's.
  */
 export const SLATE_UI_STAGE_STYLES = String.raw `
-  #stage { min-width: 0; max-width: 1800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
+  #stage { min-width: 0; max-width: 1800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
+  @media (min-width: 900px) { #stage { padding: 8px 16px; gap: 20px; } }
   #stage.hidden { display: none !important; }
-  .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; }
-  /* The selection is one column that scrolls as a whole: the Generate more tile, its panel when open, then the rounds.
-     Nothing is pinned over it, so every tile shows whole when it is scrolled into view. The padding is room for a
-     tile's ring and focus outline, which the scrolling column would otherwise cut. */
-  .selection { min-width: 0; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 6px; }
-  .rail { flex: none; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
-  .moreslot, .morehost { flex: none; min-width: 0; }
-  /* The panel keeps the column's whole width, reaching out over its side padding: a narrow column has little room. */
-  .morehost { margin: 0 -6px; }
-  .morehost:empty { display: none; }
-  /* The tile here is a slim bar as wide as the thumbnails: the plus and the words on one line, wrapping when a language
-     needs it, so it costs one row rather than a thumbnail's height and leaves no half-empty row of the grid. */
-  .moreslot .moretile { flex-direction: row; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; font-size: 13px; text-align: center; }
-  .moreslot .moretile svg { flex: none; width: 18px; height: 18px; }
-  .moreslot .moretile span { min-width: 0; overflow-wrap: anywhere; }
-  .round { min-width: 0; }
-  .roundhead { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
-  /* Each round's options share the columns of the selection's grid. */
-  .options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--thumb-rail) * var(--shape, 1))), 1fr)); gap: 10px 8px; list-style: none; margin: 0; padding: 0; }
-  .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); }
-  .main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
-  #stage .main { --cap: max(240px, calc(100vh - 230px)); --w: min(100%, calc(var(--cap) * var(--ar, 100))); }
-  #stage .band, #stage .actionrow, #stage .main > .status { width: var(--w); margin-left: auto; margin-right: auto; }
-  .band { display: flex; align-items: center; gap: 12px; min-height: 28px; min-width: 0; font-size: 13px; color: var(--text2); }
-  .bandtext { min-width: 0; overflow-wrap: anywhere; }
+  .stagebody { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
   .textbtn { flex: none; padding: 2px 6px; border: 0; background: none; font-weight: 600; text-decoration: underline; }
-  .actionrow { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
-  .actionrow button { flex: none; }
-  #stage .main > .status { text-align: right; }
   .inspiration { min-width: 0; max-width: 1800px; width: 100%; margin: 0 auto; }
-  @media (min-width: 1400px) {
-    .stagebody { grid-template-columns: 472px minmax(0, 1fr); }
-  }
-  @media (max-width: 480px) {
-    .actionrow { gap: 6px; }
-    .actionrow button { flex: 1 1 auto; padding: 8px 9px; }
-    #stage .main > .status { text-align: left; }
-  }
-  @media (max-width: 899px) {
-    .stagebody { grid-template-columns: 168px minmax(0, 1fr); gap: 12px; }
-  }
-  @media (max-width: 639px) {
-    .stagebody { grid-template-columns: minmax(0, 1fr); }
-    /* The rounds scroll down inside a box under half the window, reaching out over the column's side padding so their
-       tiles line up with the Generate more tile above them; the tile and its panel stay above the box at full height. */
-    .selection { max-height: none; overflow: visible; padding: 0 6px; }
-    .rail { max-height: 45vh; overflow-y: auto; margin: 0 -6px; padding: 6px; }
-    #stage .main { --cap: 60vh; }
-  }
 `;
 //# sourceMappingURL=mcp-slate-ui-styles-stage.js.map

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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwD9C,CAAC"}
+{"version":3,"file":"mcp-slate-ui-styles-stage.js","sourceRoot":"","sources":["../src/mcp-slate-ui-styles-stage.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO9C,CAAC"}

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

@@ -1,25 +1,18 @@
 /**
- * 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 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;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,eAAe,QA4H3B,CAAC"}
+{"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,QAgI3B,CAAC"}