@cloudgrid-io/ui 0.29.2 → 0.31.0

package/dist/blocks/stage-panel.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SOCKET_GLYPH_PATH } from "./logo.js";
 import { Panel } from "../ui/panel.js";
 import { cn } from "../lib/cloudgrid-cn.js";
 /**
@@ -20,11 +21,8 @@ import { cn } from "../lib/cloudgrid-cn.js";
  * The socket is `aria-hidden`, as is the grid: both are texture, and a screen
  * reader announcing a decorative wordmark twice per page is noise.
  */
-/** The socket from the brand wordmark, the "o" of CloudGrid. Same path the favicon
- *  carries, so it is replaced from the brand asset rather than edited. */
-const SOCKET_PATH = "M73.507 15.918C79.2174 15.918 83.9637 17.7685 87.6718 21.3962C91.4541 25.0239 93.3088 29.6883 93.3088 35.4631C93.3088 41.2378 91.454 45.9761 87.6718 49.6038C85.0356 52.1829 81.8742 53.8602 78.215 54.6154C77.054 54.855 76.0252 53.9204 76.0252 52.7349V47.5482C76.0252 46.6336 76.6575 45.8569 77.493 45.4848C81.0368 43.9067 83.2962 40.1577 83.2962 35.4872C83.2962 34.0556 83.0947 32.7167 82.7167 31.5015C82.5932 31.1043 82.2168 30.8479 81.8008 30.8479H80.8927V27.1501C80.8923 25.785 79.7842 24.6784 78.4167 24.6783C77.0492 24.6783 75.941 25.785 75.9407 27.1501V30.8479H71.3901V27.1501C71.3897 25.785 70.2801 24.6783 68.9126 24.6783C67.5454 24.6787 66.4369 25.7852 66.4366 27.1501V30.8479H65.2899C64.88 30.8479 64.5075 31.0968 64.381 31.4867C63.9866 32.7028 63.7916 34.0384 63.7916 35.4872C63.7916 38.5967 64.6821 41.188 66.5362 43.261C67.4434 44.239 68.4572 44.9856 69.5949 45.4935C70.4337 45.868 71.0717 46.6457 71.0717 47.5643V52.7493C71.0717 53.9323 70.0469 54.8663 68.8877 54.6302C65.2186 53.8826 62.07 52.2003 59.416 49.6038C55.708 45.9761 53.8545 41.2377 53.8545 35.4631C53.8545 29.6884 55.708 25.0239 59.416 21.3962C63.1241 17.7685 67.7966 15.918 73.507 15.918Z";
 function StagePanel({ shadow = true, className, children, ...props }) {
-    return (_jsxs(Panel, { inset: "flush", shadow: shadow, "data-slot": "stage-panel", className: cn("relative overflow-hidden", className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 [background-image:repeating-linear-gradient(to_right,color-mix(in_oklch,currentColor_7%,transparent)_0_1px,transparent_1px_64px),repeating-linear-gradient(to_bottom,color-mix(in_oklch,currentColor_7%,transparent)_0_1px,transparent_1px_64px)]" }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute -right-[3%] -bottom-[14%] w-[clamp(180px,24vw,300px)] text-[color-mix(in_oklch,currentColor_10%,transparent)]", children: _jsx("svg", { viewBox: "41.58 3.28 64 64", fill: "currentColor", className: "h-auto w-full", children: _jsx("path", { d: SOCKET_PATH }) }) }), _jsx("div", { className: "relative", children: children })] }));
+    return (_jsxs(Panel, { inset: "flush", shadow: shadow, "data-slot": "stage-panel", className: cn("relative overflow-hidden", className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 [background-image:repeating-linear-gradient(to_right,color-mix(in_oklch,currentColor_7%,transparent)_0_1px,transparent_1px_64px),repeating-linear-gradient(to_bottom,color-mix(in_oklch,currentColor_7%,transparent)_0_1px,transparent_1px_64px)]" }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute -right-[3%] -bottom-[14%] w-[clamp(180px,24vw,300px)] text-[color-mix(in_oklch,currentColor_10%,transparent)]", children: _jsx("svg", { viewBox: "41.58 3.28 64 64", fill: "currentColor", className: "h-auto w-full", children: _jsx("path", { d: SOCKET_GLYPH_PATH }) }) }), _jsx("div", { className: "relative", children: children })] }));
 }
 export { StagePanel };
 //# sourceMappingURL=stage-panel.js.map

package/dist/blocks/stage-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"stage-panel.js","sourceRoot":"","sources":["../../src/blocks/stage-panel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;GAkBG;AAEH;0EAC0E;AAC1E,MAAM,WAAW,GACf,+oCAA+oC,CAAA;AAEjpC,SAAS,UAAU,CAAC,EAClB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAGT;IACC,OAAO,CACL,MAAC,KAAK,IACJ,KAAK,EAAC,OAAO,EACb,MAAM,EAAE,MAAM,eACJ,aAAa,EACvB,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,KAChD,KAAK,aAET,8BACc,MAAM,EAClB,SAAS,EAAC,wRAAwR,GAClS,EACF,8BACc,MAAM,EAClB,SAAS,EAAC,4IAA4I,YAEtJ,cAAK,OAAO,EAAC,kBAAkB,EAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,eAAe,YAC3E,eAAM,CAAC,EAAE,WAAW,GAAI,GACpB,GACD,EAEP,cAAK,SAAS,EAAC,UAAU,YAAE,QAAQ,GAAO,IACpC,CACT,CAAA;AACH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"stage-panel.js","sourceRoot":"","sources":["../../src/blocks/stage-panel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;GAkBG;AAEH,SAAS,UAAU,CAAC,EAClB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAGT;IACC,OAAO,CACL,MAAC,KAAK,IACJ,KAAK,EAAC,OAAO,EACb,MAAM,EAAE,MAAM,eACJ,aAAa,EACvB,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,KAChD,KAAK,aAET,8BACc,MAAM,EAClB,SAAS,EAAC,wRAAwR,GAClS,EACF,8BACc,MAAM,EAClB,SAAS,EAAC,4IAA4I,YAEtJ,cAAK,OAAO,EAAC,kBAAkB,EAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,eAAe,YAI3E,eAAM,CAAC,EAAE,iBAAiB,GAAI,GAC1B,GACD,EAEP,cAAK,SAAS,EAAC,UAAU,YAAE,QAAQ,GAAO,IACpC,CACT,CAAA;AACH,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/blocks/step-item.d.ts

@@ -14,11 +14,31 @@
  * One deliberate change. v0's badge is 26px, which is on no step of the 4px
  * spacing ramp. This is 24px (`size-6`), which is. Two pixels, and it stops the
  * component being the reason someone thinks the ramp has exceptions.
+ *
+ * ## `tone="outline"` (#262)
+ *
+ * The install blocks number a sequence — ChatGPT's two connector steps, Claude's
+ * two — inside a pane that already carries a filled brand badge on the column
+ * beside it. Two filled pills of two different brand colours in one pane is the
+ * exact collision the note above warns about ("do not put an accent button beside
+ * one"), so those numerals are drawn as a hairline circle with the body colour
+ * inside instead.
+ *
+ * It is a TONE and not a second component because everything else about the item
+ * — the `<li>`, the aria-hidden numeral, the title, the body slot — is identical,
+ * and a fork would be a second place for the `<ol>` rule to be forgotten.
+ * `default` paints exactly what it painted before.
  */
+declare const TONES: {
+    readonly default: "bg-cyan font-bold text-on-accent";
+    readonly outline: "border border-line bg-(--cg-hover) font-medium text-body";
+};
 declare function StepList({ className, ...props }: React.ComponentProps<"ol">): import("react").JSX.Element;
-declare function StepItem({ index, title, className, children, ...props }: React.ComponentProps<"li"> & {
+declare function StepItem({ index, title, tone, className, children, ...props }: React.ComponentProps<"li"> & {
     index: number;
     title: string;
+    /** `outline` is the hairline numeral, for a pane that already has a filled badge. */
+    tone?: keyof typeof TONES;
 }): import("react").JSX.Element;
 export { StepItem, StepList };
 //# sourceMappingURL=step-item.d.ts.map

package/dist/blocks/step-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step-item.d.ts","sourceRoot":"","sources":["../../src/blocks/step-item.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,+BAepE;AAED,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,+BAqBA;AAED,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"step-item.d.ts","sourceRoot":"","sources":["../../src/blocks/step-item.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK;;;CAUD,CAAA;AAEV,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,+BAepE;AAED,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,IAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAA;CAC1B,+BA0BA;AAED,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA"}

package/dist/blocks/step-item.js

@@ -16,7 +16,32 @@ import { cn } from "../lib/cloudgrid-cn.js";
  * One deliberate change. v0's badge is 26px, which is on no step of the 4px
  * spacing ramp. This is 24px (`size-6`), which is. Two pixels, and it stops the
  * component being the reason someone thinks the ramp has exceptions.
+ *
+ * ## `tone="outline"` (#262)
+ *
+ * The install blocks number a sequence — ChatGPT's two connector steps, Claude's
+ * two — inside a pane that already carries a filled brand badge on the column
+ * beside it. Two filled pills of two different brand colours in one pane is the
+ * exact collision the note above warns about ("do not put an accent button beside
+ * one"), so those numerals are drawn as a hairline circle with the body colour
+ * inside instead.
+ *
+ * It is a TONE and not a second component because everything else about the item
+ * — the `<li>`, the aria-hidden numeral, the title, the body slot — is identical,
+ * and a fork would be a second place for the `<ol>` rule to be forgotten.
+ * `default` paints exactly what it painted before.
  */
+const TONES = {
+    // No border at all on the default, rather than a transparent one. `size-6`
+    // is a border-box, so a 1px transparent ring would quietly shrink the
+    // numeral's content area by two pixels on every existing step list.
+    default: "bg-cyan font-bold text-on-accent",
+    // `bg-(--cg-hover)` rather than `bg-subtle`: --cg-surface-subtle is declared at
+    // :root only, so on ink it freezes to a near-white lavender and the numeral
+    // becomes a white disc. --cg-hover is the one ground token declared in all
+    // three scopes. See the FIELD note in prompt-block.tsx.
+    outline: "border border-line bg-(--cg-hover) font-medium text-body",
+};
 function StepList({ className, ...props }) {
     return (_jsx("ol", { 
         // Explicit, and load-bearing. WebKit drops the implicit `list` role from an
@@ -27,8 +52,8 @@ function StepList({ className, ...props }) {
         // in review on #42.
         role: "list", "data-slot": "step-list", className: cn("flex list-none flex-col gap-5 p-0", className), ...props }));
 }
-function StepItem({ index, title, className, children, ...props }) {
-    return (_jsxs("li", { "data-slot": "step-item", className: cn("flex items-start gap-4", className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: "flex size-6 shrink-0 items-center justify-center rounded-pill bg-cyan text-caption font-bold text-on-accent", children: index }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("span", { className: "text-heading-sm font-medium text-ink", children: title }), children ? _jsx("div", { className: "text-body-sm text-body", children: children }) : null] })] }));
+function StepItem({ index, title, tone = "default", className, children, ...props }) {
+    return (_jsxs("li", { "data-slot": "step-item", className: cn("flex items-start gap-4", className), ...props, children: [_jsx("span", { "aria-hidden": "true", "data-slot": "step-item-numeral", "data-tone": tone, className: cn("flex size-6 shrink-0 items-center justify-center rounded-pill text-caption", TONES[tone]), children: index }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("span", { className: "text-heading-sm font-medium text-ink", children: title }), children ? _jsx("div", { className: "text-body-sm text-body", children: children }) : null] })] }));
 }
 export { StepItem, StepList };
 //# sourceMappingURL=step-item.js.map

package/dist/blocks/step-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"step-item.js","sourceRoot":"","sources":["../../src/blocks/step-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACnE,OAAO,CACL;QACE,4EAA4E;QAC5E,4EAA4E;QAC5E,wEAAwE;QACxE,2EAA2E;QAC3E,0EAA0E;QAC1E,oBAAoB;QACpB,IAAI,EAAC,MAAM,eACD,WAAW,EACrB,SAAS,EAAE,EAAE,CAAC,mCAAmC,EAAE,SAAS,CAAC,KACzD,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAIT;IACC,OAAO,CACL,2BACY,WAAW,EACrB,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAC9C,KAAK,aAET,8BACc,MAAM,EAClB,SAAS,EAAC,6GAA6G,YAEtH,KAAK,GACD,EACP,eAAK,SAAS,EAAC,oCAAoC,aACjD,eAAM,SAAS,EAAC,sCAAsC,YAAE,KAAK,GAAQ,EAGpE,QAAQ,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,IAAI,IACvE,IACH,CACN,CAAA;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"step-item.js","sourceRoot":"","sources":["../../src/blocks/step-item.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,KAAK,GAAG;IACZ,2EAA2E;IAC3E,sEAAsE;IACtE,oEAAoE;IACpE,OAAO,EAAE,kCAAkC;IAC3C,gFAAgF;IAChF,4EAA4E;IAC5E,2EAA2E;IAC3E,wDAAwD;IACxD,OAAO,EAAE,0DAA0D;CAC3D,CAAA;AAEV,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACnE,OAAO,CACL;QACE,4EAA4E;QAC5E,4EAA4E;QAC5E,wEAAwE;QACxE,2EAA2E;QAC3E,0EAA0E;QAC1E,oBAAoB;QACpB,IAAI,EAAC,MAAM,eACD,WAAW,EACrB,SAAS,EAAE,EAAE,CAAC,mCAAmC,EAAE,SAAS,CAAC,KACzD,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAAK,EACL,IAAI,GAAG,SAAS,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAMT;IACC,OAAO,CACL,2BACY,WAAW,EACrB,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,KAC9C,KAAK,aAET,8BACc,MAAM,eACR,mBAAmB,eAClB,IAAI,EACf,SAAS,EAAE,EAAE,CACX,4EAA4E,EAC5E,KAAK,CAAC,IAAI,CAAC,CACZ,YAEA,KAAK,GACD,EACP,eAAK,SAAS,EAAC,oCAAoC,aACjD,eAAM,SAAS,EAAC,sCAAsC,YAAE,KAAK,GAAQ,EAGpE,QAAQ,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,IAAI,IACvE,IACH,CACN,CAAA;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA"}

package/dist/blocks/tool-logo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-logo.d.ts","sourceRoot":"","sources":["../../src/blocks/tool-logo.tsx"],"names":[],"mappings":"AAgDA,iBAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAS,EACT,IAAc,EACd,YAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG;IAC7C,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,+BA8CA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"tool-logo.d.ts","sourceRoot":"","sources":["../../src/blocks/tool-logo.tsx"],"names":[],"mappings":"AAoDA,iBAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAS,EACT,IAAc,EACd,YAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG;IAC7C,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACtB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,+BA8CA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/blocks/tool-logo.js

@@ -3,12 +3,16 @@ import { cn } from "../lib/cloudgrid-cn.js";
 /**
  * Renders a tool's brand mark at a consistent size and weight.
  *
- * **This ships no marks.** It is a renderer, and the caller supplies the SVG. That
- * split is deliberate: how a mark is sized and coloured is design-system work, but
- * *which* marks exist is content. The set changes when a partnership is signed, not
- * when the design changes, and vendors rebrand on their own schedule. A library
- * holding fourteen logos carries a maintenance burden that is not about UI, plus a
- * trademark surface that travels to every consumer who installs it.
+ * **This component holds no marks; the package does.** It is a renderer, and the
+ * caller supplies the SVG. That split is still deliberate: how a mark is sized and
+ * coloured is design-system work, and which marks exist changes when a partnership
+ * is signed, not when the design changes.
+ *
+ * The original note said the library ships no marks at all. That stopped being true
+ * when `tool-marks.tsx` arrived with the vendor set and each one's brand hex, and
+ * the founder's ruling of 2026-10-05 (#266) settles it: the install content, and
+ * the marks it names, ship in this package. Take a mark from `TOOL_MARKS` and pass
+ * it here; `CloudGridInstall` does exactly that for every tool tab.
  *
  * It is also the shape `CompareTable` and `HubIndex` already assume, both of which
  * take the mark from the caller.

package/dist/blocks/tool-logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"tool-logo.js","sourceRoot":"","sources":["../../src/blocks/tool-logo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,mFAAmF;AACnF,SAAS,SAAS,CAAC,GAAW;IAC5B,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;IAC3B,OAAO,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;AACpF,CAAC;AAED,SAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,OAAO,EACd,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EAaT;IACC,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,CACL,4BACY,WAAW,iBACT,MAAM,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,GAAG,GAAG,EAAE,EAC1D,SAAS,EAAE,EAAE,CACX,2GAA2G,EAC3G,SAAS,CACV,KACG,KAAK,YAER,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAC/B,CACR,CAAA;IACH,CAAC;IAED,MAAM,MAAM,GAAG,IAAI,KAAK,OAAO,IAAI,GAAG,IAAI,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;IAE7D,OAAO,CACL,4BACY,WAAW,iBAGT,MAAM,EAClB,KAAK,EAAE;YACL,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;SAC/C,EACD,SAAS,EAAE,EAAE,CACX,oEAAoE,EACpE,SAAS,CACV,KACG,KAAK,YAER,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,IAAI,CACL,CAAC,CAAC,CAAC,CACF,eAAM,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,YAAY,GAAG,EAAE,EAAE,SAAS,EAAC,uBAAuB,YACpF,IAAI,GACA,CACR,GACI,CACR,CAAA;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"tool-logo.js","sourceRoot":"","sources":["../../src/blocks/tool-logo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,mFAAmF;AACnF,SAAS,SAAS,CAAC,GAAW;IAC5B,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;IAC3B,OAAO,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;AACpF,CAAC;AAED,SAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,OAAO,EACd,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EAaT;IACC,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,CACL,4BACY,WAAW,iBACT,MAAM,EAClB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,GAAG,GAAG,EAAE,EAC1D,SAAS,EAAE,EAAE,CACX,2GAA2G,EAC3G,SAAS,CACV,KACG,KAAK,YAER,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAC/B,CACR,CAAA;IACH,CAAC;IAED,MAAM,MAAM,GAAG,IAAI,KAAK,OAAO,IAAI,GAAG,IAAI,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;IAE7D,OAAO,CACL,4BACY,WAAW,iBAGT,MAAM,EAClB,KAAK,EAAE;YACL,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;SAC/C,EACD,SAAS,EAAE,EAAE,CACX,oEAAoE,EACpE,SAAS,CACV,KACG,KAAK,YAER,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,IAAI,CACL,CAAC,CAAC,CAAC,CACF,eAAM,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,YAAY,GAAG,EAAE,EAAE,SAAS,EAAC,uBAAuB,YACpF,IAAI,GACA,CACR,GACI,CACR,CAAA;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/blocks/tool-setup.d.ts

@@ -9,11 +9,38 @@ import { PageHeading } from "./page-heading.js";
  * were heading for two implementations of one screen, which is how the two come
  * to disagree about the same setup with nothing to catch it.
  *
- * ## The visual treatment here is PROVISIONAL
+ * ## The repaint that the PROVISIONAL note was waiting for (#262)
  *
  * Founder, 2026-08-25: a better component design exists and is not ready yet —
- * "make this nice and we will replace the full component shortly". So this file
- * is written to be *replaced*, and the effort went where replacement is cheap:
+ * "make this nice and we will replace the full component shortly". It arrived on
+ * 2026-09-23, and this file is that design: the bordered method pills, the tool
+ * strip with a glyph per group and a rule under it, the brand fill on the
+ * selected tab, the 60/40 pane with a badge per column, and `PromptBlock` and
+ * `CommandField` in place of an ink slab.
+ *
+ * The bet the original note made paid off exactly as written: the props were the
+ * contract and the class lists were the disposable half, so the repaint changed
+ * what this renders and not what a consumer passes. Everything the note protected
+ * is untouched — the methods x tools x steps engine, the render-time fallbacks,
+ * the two reconcile-after-paint effects, the grouping that rides on each tab's
+ * accessible name.
+ *
+ * ## THIS IS A COMPONENT, NOT A PAGE (founder ruling, 2026-09-23)
+ *
+ * The first pass of #262 also grew a `header` (a wordmark over a row of vendor
+ * logos), a `layout: "bare" | "card"`, a `prompt` slot and a `footnote` — enough
+ * to rebuild the marketing install page inside the library, which is what it then
+ * did in the gallery. Rejected in review, in as many words: *"I didn't mean you
+ * will design it similarly to what I showed you. The entire idea was to design it
+ * the way it already looks like in the UI library. The problem now is that we
+ * have two versions."*
+ *
+ * All four are gone. A wordmark is a page's, a hero headline is a page's, and a
+ * footer with source links is a page's; this renders a title, a sub, a control
+ * and a pane, on whichever of the library's surfaces it is dropped on. If a
+ * marketing page wants the rest, the page composes it around this.
+ *
+ * The original reasoning, kept because it is still why the repaint was cheap:
  *
  * - **The props are the contract.** `tools`, `value`/`defaultValue`/
  *   `onValueChange`, `onContinue`. A redesign changes what this renders, not
@@ -28,13 +55,61 @@ import { PageHeading } from "./page-heading.js";
  * Do not build anything on the internals — the slots and the class lists are
  * the disposable half.
  *
- * ## Presentation only
+ * ## The selected tab is the brand FILL, and that closes #223
+ *
+ * The selected tool tab used to be `bg-code`/`text-on-code`, the library's own
+ * ink pair. `--cg-surface-code` is `#222` in all three scopes and that is also
+ * the ink GROUND, so inside `data-cg-surface="ink"` the pill was the colour of
+ * what sits behind it. The backlog offered two ways out — a new semantic token
+ * declared in all three scopes, or a ruling that this is not an ink component —
+ * and the design answers it a third way that needs neither: the brand fill,
+ * which is what `hub.html` draws (`.tab.on{background:var(--cg-primary)}`).
+ *
+ * `--cg-primary` and `--cg-text-on-primary` are declared at `:root` and
+ * redeclared on NEITHER surface, so the pair is one value everywhere and carries
+ * its own ground, exactly the construction `Button`'s `cta` variant relies on
+ * (#225, #236). Measured on all three gallery strips: the selected label is
+ * 5.84:1 on its own pill in every scope, the same number by construction.
+ *
+ * ONE CAVEAT, recorded rather than fixed. On the PURPLE PANEL the pill's ground
+ * is the panel's own hue, so what separates the selected tab from the strip
+ * around it there is the 10% white wash on the bar plus the idle labels being
+ * 82% white against the selected one's 100% — a much smaller margin than on the
+ * page or on ink, where the pill reads at a glance. The label itself is legible
+ * everywhere, which is the floor; "which tab is selected" is quieter on that one
+ * surface. Fixing it means a panel-scoped selected treatment, which is a design
+ * decision and not a worker's to make. The strip is on the gallery's panel
+ * surface so it stays visible.
  *
- * The line #117 and #121 drew, held again. This component carries no CloudGrid
- * prompt, no MCP command, no tool list, and no idea what comes next. It renders
- * the tools it is handed and reports which is selected. That is exactly what
- * lets one component serve onboarding and a public guide: the strings differ,
- * the screen does not.
+ * ## THE CALLER CHOOSES WHAT IS ON SCREEN
+ *
+ * `tools` and `methods` are lists, and every one of them is the caller's: which
+ * tools, which methods, and in what order. Two tools is a valid strip. One method
+ * is a valid axis. This component renders what it is handed and sorts nothing,
+ * filters nothing by its own opinion and adds nothing that was not passed —
+ * founder, 2026-09-23: *"it's important to pick what I want to show each time —
+ * not to show all if I want, only two integrations if I want, or only CLI or only
+ * MCP."*
+ *
+ * The one thing it decides for itself is that a control with a single option is
+ * not a control. Pass one method and the method axis still works — the pane is
+ * still read from `steps[method]` — but no pill row renders, because a row of one
+ * is furniture for a choice nobody has. Pass none and there is no axis at all,
+ * which is the older shape where a tool carries a single `prompt`.
+ *
+ * ## The engine, not the content (and the package ships the content now)
+ *
+ * This component still carries no CloudGrid prompt, no MCP command and no tool
+ * list of its own. It renders the tools it is handed and reports which is
+ * selected, and that is what lets one engine serve every configuration.
+ *
+ * What changed is where the strings live. The line #117, #121 and #126 drew was
+ * that the PACKAGE ships no content at all. Founder ruling 2026-10-05 (#266)
+ * reverses that: the old integrations app is discontinued and every install
+ * panel takes its words from this library. They are `install-content.ts`, plain
+ * data with no React in it, and `CloudGridInstall` hands them to this component
+ * along with the fetch prompt and the footer. A surface that wants the install
+ * panel renders `CloudGridInstall`; this file stays the presentational half.
  *
  * ## Why tabs and not the picker beside it
  *
@@ -69,6 +144,17 @@ export interface ToolSetupMethod {
 export interface ToolSetupGroup {
     value: string;
     label: string;
+    /**
+     * A glyph in place of the visible label. The design labels a run of tools with
+     * a terminal or a chat bubble rather than a word, so the strip stays one row.
+     *
+     * It replaces the label ON SCREEN only. The label is still required and is
+     * still what reaches assistive tech, through each tab's own accessible name —
+     * see the note on the strip below for why the visible marker cannot carry it.
+     * A glyph with no words behind it would take the grouping away from everyone
+     * who is not looking at the screen.
+     */
+    icon?: React.ReactNode;
 }
 /**
  * One step of a pane.

package/dist/blocks/tool-setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-setup.d.ts","sourceRoot":"","sources":["../../src/blocks/tool-setup.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"tool-setup.d.ts","sourceRoot":"","sources":["../../src/blocks/tool-setup.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/tool-setup.js

@@ -1,21 +1,28 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
+import { Badge } from "../ui/badge.js";
 import { Button } from "../ui/button.js";
 import { CodeBlock } from "../ui/code-block.js";
+import { CommandField } from "./command-field.js";
 import { PageHeading } from "./page-heading.js";
+import { PromptBlock } from "./prompt-block.js";
 import { Separator } from "../ui/separator.js";
 import { StepItem, StepList } from "./step-item.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
 import { cn } from "../lib/cloudgrid-cn.js";
 /**
- * The tab. Sized for two lines because the real labels are "Claude Desktop" and
- * "ChatGPT Desktop", and a strip that truncates them makes two tools read alike.
+ * The tab: the tool's mark, then its name, in one 36px row.
  *
  * The overrides earn their place: `TabsList` pins itself to `h-8` for a compact
- * strip, and `TabsTrigger` sets `flex-1` and `whitespace-nowrap`. Eight tools at
- * a fixed height with nowrap is a horizontal scrollbar on a laptop, so height
- * goes auto and the list wraps to a second row instead.
+ * strip and `TabsTrigger` sets `flex-1`, and eight tools at a fixed list height
+ * is either a horizontal scrollbar on a laptop or a row painted over by the
+ * panel below it. The list goes `h-auto!` and wraps instead — see the note at
+ * the call site, which is where that one cost a session.
+ *
+ * The mark is sized by the CALLER, the way every glyph in this library is: a
+ * mark carries no width or height of its own, `ToolLogo` sizes by an inline
+ * style, and a class here could not beat it anyway. The design draws 15px.
  */
 const TRIGGER_CLASS = cn(
 // No `grow`. It stretched every tab to consume the row, so a strip that
@@ -26,20 +33,49 @@ const TRIGGER_CLASS = cn(
 // `basis-auto` rather than a fixed basis for the same reason: a tab is as wide
 // as its label, and forcing "Cursor" to the width of "ChatGPT Desktop" is the
 // same mistake one level down.
-"h-auto min-h-[3.75rem] flex-none basis-auto flex-col gap-0.5 whitespace-normal", "rounded-lg px-3 py-2 text-center text-body-sm leading-tight", 
-// The dark selected pill is `bg-code`/`text-on-code` — the library's OWN
-// ink-surface pair, the one AgentPrompt and CodeBlock already paint with. A
-// first pass invented `bg-ink-strong`/`text-on-ink`, which are not tokens:
-// `--color-ink` is a TEXT colour and the other two do not exist, so Tailwind
-// emitted nothing and the selected tab rendered identically to the rest.
-"data-active:bg-code data-active:text-on-code");
+//
+// One row per tab since #262: the mark sits BESIDE the label at 36px rather
+// than above it at 60. The strip still wraps rather than scrolling, which is
+// what `tool-setup.spec.ts` measures and what keeps a laptop from hiding the
+// eighth tool behind a horizontal scrollbar.
+"h-9 flex-none basis-auto gap-2 whitespace-nowrap", "rounded-xs border border-transparent px-2.5 text-caption font-normal text-body", 
+// THE SELECTED PILL, and the answer to #223. `bg-code`/`text-on-code` was the
+// ink ground itself, so on `data-cg-surface="ink"` the pill was the colour of
+// what was behind it. `--cg-primary` and `--cg-text-on-primary` are :root-only
+// and never redeclared per scope, so this pair is one value in all three and
+// carries its own ground. See the module docblock.
+"data-active:border-brand data-active:bg-brand data-active:text-on-primary", "hover:bg-card hover:text-ink data-active:hover:bg-brand-press data-active:hover:text-on-primary");
+/**
+ * The method pills, inside their own bordered container.
+ *
+ * Same selected treatment as the tool strip, deliberately: two controls stacked
+ * on one screen that mean "pick one of these" should not say it two different
+ * ways, and the method pill is the one a reader meets first.
+ */
+const METHOD_TRIGGER_CLASS = cn("h-[30px] flex-none basis-auto rounded-xs px-3 text-caption font-normal text-faint", "data-active:bg-brand data-active:text-on-primary", "hover:text-ink data-active:hover:bg-brand-press data-active:hover:text-on-primary");
 /** The body of one step: prompt, command and link, in that order. */
 function StepBody({ step }) {
-    return (_jsxs(_Fragment, { children: [step.body ? _jsx("div", { className: "text-body-sm text-faint", children: step.body }) : null, step.prompt ? _jsx(CodeBlock, { code: step.prompt }) : null, step.code ? _jsx(CodeBlock, { code: step.code }) : null, step.link ? (_jsxs(Button, { render: _jsx("a", { href: step.link.href, target: "_blank", rel: "noopener noreferrer" }), 
+    return (_jsxs(_Fragment, { children: [step.body ? _jsx("div", { className: "text-caption text-body", children: step.body }) : null, step.prompt ? _jsx(PromptBlock, { prompt: step.prompt, clip: true }) : null, step.code ? _jsx(CommandField, { command: step.code }) : null, step.link ? (_jsxs(Button, { render: _jsx("a", { href: step.link.href, target: "_blank", rel: "noopener noreferrer" }), 
                 // The rendered element is an anchor, so Base UI must not assume native
                 // button semantics.
                 nativeButton: false, variant: step.link.primary ? "default" : "secondary", size: "sm", className: "w-fit gap-2", children: [step.link.icon, step.link.label] })) : null] }));
 }
+/**
+ * The column geometry both pane shapes share.
+ *
+ * A 22px gutter and a hairline BETWEEN columns, never around them: the live
+ * block zeroes the outer gutters in its bare variant and the note in its
+ * stylesheet says what happens otherwise — "column two's text then started hard
+ * against the divider line". Expressing it as a right gutter on all but the last
+ * and a left gutter on all but the first gets the same result with no first/last
+ * exception to keep in sync.
+ *
+ * All of it is `md:`-prefixed. Below that the columns stack, and a vertical rule
+ * beside a full-width column is a line down the middle of nothing.
+ */
+function columnEdges(i, count) {
+    return cn(i < count - 1 && "md:border-r md:border-hairline md:pr-[22px]", i > 0 && "md:pl-[22px]");
+}
 /**
  * One pane: the steps for a tool under the selected method.
  *
@@ -50,15 +86,42 @@ function StepBody({ step }) {
  */
 function StepPane({ steps }) {
     const alternatives = Boolean(steps[0]?.label);
-    const cols = steps.length >= 3 ? "md:grid-cols-3" : steps.length === 2 ? "md:grid-cols-2" : "";
+    const cols = steps.length >= 3
+        ? "md:grid-cols-3"
+        : steps.length === 2
+            ? // 60/40, not 50/50. The recommended path carries a five-line prompt and
+                // the alternative carries one command, so equal columns give the short
+                // one half the screen and wrap the long one. `1.5fr 1fr` is the live
+                // block's own ratio.
+                "md:grid-cols-[1.5fr_1fr]"
+            : "";
     if (alternatives) {
-        return (_jsx("div", { className: cn("grid grid-cols-1 gap-6", cols), children: steps.map((step, i) => (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("span", { className: "text-caption font-medium text-faint", children: step.label }), _jsx("span", { className: "text-heading-sm font-medium", children: step.title }), _jsx(StepBody, { step: step })] }, i))) }));
+        return (_jsx("div", { "data-slot": "tool-setup-alternatives", className: cn("grid grid-cols-1 gap-6 md:gap-0", cols), children: steps.map((step, i) => (_jsxs("div", { className: cn("flex min-w-0 flex-col gap-2.5", columnEdges(i, steps.length)), children: [_jsx(Badge, { variant: i === 0 ? "default" : "outline", className: "h-6 rounded-pill px-3 font-normal", children: step.label }), _jsx("span", { className: "text-body-sm font-bold text-ink", children: step.title }), _jsx(StepBody, { step: step })] }, i))) }));
     }
-    return (_jsx(StepList, { className: cn("grid grid-cols-1 gap-6", cols), children: steps.map((step, i) => (_jsx(StepItem, { index: i + 1, title: step.title, className: "flex-col md:flex-row", children: _jsx(StepBody, { step: step }) }, i))) }));
+    return (
+    // No `data-slot` here: `StepList` spreads props after its own, so one passed
+    // in would silently replace `step-list` rather than sit beside it.
+    _jsx(StepList, { className: cn("grid grid-cols-1 gap-6 md:gap-0", cols), children: steps.map((step, i) => (_jsx(StepItem, { index: i + 1, title: step.title, 
+            // The numeral is outlined here rather than the filled cyan default:
+            // this pane sits beside one that carries a filled BRAND badge, and two
+            // filled pills in two brand colours in one pane is the collision
+            // step-item.tsx's own note warns about.
+            tone: "outline", className: cn("min-w-0 flex-col gap-2.5", columnEdges(i, steps.length)), children: _jsx(StepBody, { step: step }) }, i))) }));
 }
 function ToolSetup({ tools, methods, groups, method, defaultMethod, onMethodChange, value, defaultValue, onValueChange, title, sub, eyebrow, level = 1, headingSize = "md", continueLabel = "Continue", emptyLabel = "Nothing to set up for this one yet.", onContinue, canContinue = true, footer, className, ...props }) {
     const headingId = React.useId();
     const hasMethods = Boolean(methods?.length);
+    /**
+     * Whether to draw the method PILLS, which is not the same question as whether
+     * there is a method axis.
+     *
+     * One method is a real axis: `steps` is still keyed by it and the pane is still
+     * read from it, so `hasMethods` stays true and every filter and fallback below
+     * behaves exactly as it does with three. What a single method does not need is
+     * a segmented control with one segment — a choice with one option, drawn as
+     * though it were a choice. Founder asked for it here and on the live panel.
+     */
+    const showMethods = (methods?.length ?? 0) > 1;
     // ---- the method axis -------------------------------------------------
     const firstMethod = methods?.find((m) => !m.disabled)?.value ?? methods?.[0]?.value;
     const [ownMethod, setOwnMethod] = React.useState(defaultMethod ?? firstMethod);
@@ -240,15 +303,27 @@ function ToolSetup({ tools, methods, groups, method, defaultMethod, onMethodChan
             out.push({ group: null, items: ungrouped });
         return out;
     }, [groups, visible]);
-    return (_jsxs("section", { "data-slot": "tool-setup", className: cn("flex flex-col gap-8", className), ...props, children: [title ? (_jsx(PageHeading, { id: headingId, eyebrow: eyebrow, title: title, sub: sub, size: headingSize, level: level })) : null, hasMethods ? (_jsx(Tabs, { value: activeMethod, onValueChange: (next) => changeMethod(String(next)), "data-slot": "tool-setup-methods", children: _jsx(TabsList
+    return (_jsxs("section", { "data-slot": "tool-setup", className: cn("flex flex-col gap-6", className), ...props, children: [title ? (_jsx(PageHeading, { id: headingId, eyebrow: eyebrow, title: title, sub: sub, size: headingSize, level: level })) : null, showMethods ? (_jsx(Tabs, { value: activeMethod, onValueChange: (next) => changeMethod(String(next)), "data-slot": "tool-setup-methods", children: _jsx(TabsList
                 // Same `h-auto!` reasoning as the tool strip below: the strip must
                 // be free to grow, and the prefixed `h-8` wins the cascade without
                 // the important.
+                //
+                // The bordered container is the design's: a hairline box on the card
+                // ground with 3px of inset, so the selected pill sits INSIDE a track
+                // rather than floating on the page. `bg-muted` is what the default
+                // variant paints and it is a filled grey track, which is a second
+                // ground behind the brand fill.
                 , { 
                     // Same `h-auto!` reasoning as the tool strip below: the strip must
                     // be free to grow, and the prefixed `h-8` wins the cascade without
                     // the important.
-                    className: "h-auto! w-fit flex-wrap gap-2", children: methods.map((m) => (_jsx(TabsTrigger, { value: m.value, disabled: m.disabled, children: m.label }, m.value))) }) })) : null, visible.length === 0 ? (_jsx("p", { "data-slot": "tool-setup-empty", className: "m-0 rounded-lg border border-hairline bg-card p-5 text-body-sm text-faint", children: emptyLabel })) : (_jsxs(Tabs
+                    //
+                    // The bordered container is the design's: a hairline box on the card
+                    // ground with 3px of inset, so the selected pill sits INSIDE a track
+                    // rather than floating on the page. `bg-muted` is what the default
+                    // variant paints and it is a filled grey track, which is a second
+                    // ground behind the brand fill.
+                    className: "h-auto! w-fit flex-wrap gap-0.5 rounded-sm border border-line bg-card p-[3px]", children: methods.map((m) => (_jsx(TabsTrigger, { value: m.value, disabled: m.disabled, "data-slot": "tool-setup-method", className: METHOD_TRIGGER_CLASS, children: m.label }, m.value))) }) })) : null, visible.length === 0 ? (_jsx("p", { "data-slot": "tool-setup-empty", className: "m-0 rounded-lg border border-hairline bg-card p-5 text-body-sm text-faint", children: emptyLabel })) : (_jsx(Tabs
             // Never undefined: Base UI warns when a value goes from uncontrolled to
             // controlled, which is what an empty strip filling in later would do.
             , { 
@@ -259,37 +334,42 @@ function ToolSetup({ tools, methods, groups, method, defaultMethod, onMethodChan
                     if (value === undefined)
                         setOwnTool(id);
                     onValueChange?.(id);
-                }, className: "flex flex-col gap-4", children: [_jsx(TabsList
-                    // Labelled by the lockup when there is one, so the strip is announced
-                    // as the setup's tool list rather than an unnamed set of tabs.
-                    , { ...(title ? { "aria-labelledby": headingId } : {}), "data-slot": "tool-setup-tabs", 
-                        // `h-auto!` — important, and that is load-bearing.
-                        //
-                        // `tabsListVariants` pins the strip with `group-data-horizontal/tabs:h-8`
-                        // for a compact single row. Eight tools do not fit one row, so the list
-                        // must grow — and a bare `h-auto` does not make it: both utilities
-                        // survive `cn()` because they carry different variant prefixes, and the
-                        // prefixed rule wins the cascade. Measured, not assumed:
-                        // `getComputedStyle` reported a 32px list around a 60px tab.
-                        //
-                        // The consequence was invisible. The eighth tool wrapped into height
-                        // that was never reserved and the panel painted straight over it, while
-                        // every other assertion passed — the tab was present, focusable,
-                        // correctly announced and correctly painted. It was simply underneath.
-                        //
-                        // Important settles it without depending on which utility `cn()` keeps
-                        // or what order Tailwind emits them in.
-                        className: "h-auto! w-full flex-wrap justify-start gap-2 bg-transparent p-0", children: grouped.map(({ group, items }, gi) => (_jsxs(React.Fragment, { children: [gi > 0 ? (_jsx(Separator, { orientation: "vertical", "aria-hidden": "true", className: "mx-1 h-8 self-center" })) : null, group ? (_jsx("span", { "aria-hidden": "true", "data-slot": "tool-setup-group", className: "self-center px-1 text-caption text-faint", children: group.label })) : null, items.map((tool) => (_jsxs(TabsTrigger, { value: tool.value, disabled: tool.disabled, "data-slot": "tool-setup-tab", ...(group ? { "aria-label": `${tool.label}, ${group.label}` } : {}), className: TRIGGER_CLASS, children: [tool.mark, tool.label] }, tool.value)))] }, group?.value ?? `ungrouped-${gi}`))) }), visible.map((tool) => {
-                        const pane = hasMethods && activeMethod ? tool.steps?.[activeMethod] : undefined;
-                        return (_jsx(TabsContent, { value: tool.value, "data-slot": "tool-setup-panel", className: "rounded-lg border border-hairline bg-card p-5", children: _jsxs("div", { className: "flex flex-col gap-4", children: [tool.instruction || tool.alternative ? (_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1", children: [tool.instruction ? (_jsx("p", { className: "m-0 text-body-sm text-body", children: tool.instruction })) : (_jsx("span", {})), tool.alternative ? (_jsx("a", { href: tool.alternative.href, "data-slot": "tool-setup-alternative", 
-                                                // `--cg-link` is a token but NOT a generated utility —
-                                                // there is no `--color-link`, so `text-link` emits
-                                                // nothing and the link paints as body text. The arbitrary
-                                                // form is how the library reaches an ungenerated token,
-                                                // the same way onboarding-question writes
-                                                // `ring-(--cg-border-strong)`.
-                                                className: "text-body-sm text-(--cg-link) underline-offset-4 hover:text-(--cg-link-hover) hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: tool.alternative.label })) : null] })) : null, pane?.length ? (_jsx(StepPane, { steps: pane })) : tool.prompt ? (_jsx(CodeBlock, { code: tool.prompt })) : null] }) }, tool.value));
-                    })] })), continueLabel !== null || footer ? (_jsxs("div", { "data-slot": "tool-setup-actions", className: "flex flex-col items-start gap-4", children: [continueLabel !== null ? (_jsx(Button, { type: "button", size: "lg", "data-slot": "tool-setup-continue", onClick: onContinue, disabled: !canContinue, children: continueLabel })) : null, footer] })) : null] }));
+                }, className: "flex flex-col gap-0", children: _jsxs("div", { className: "flex flex-col overflow-hidden rounded-lg border border-hairline bg-card", children: [_jsx("div", { className: "flex items-center border-b border-hairline bg-(--cg-hover) px-3 py-2", children: _jsx(TabsList
+                            // Labelled by the lockup when there is one, so the strip is
+                            // announced as the setup's tool list rather than an unnamed
+                            // set of tabs.
+                            , { ...(title ? { "aria-labelledby": headingId } : {}), "data-slot": "tool-setup-tabs", 
+                                // `h-auto!` — important, and that is load-bearing.
+                                //
+                                // `tabsListVariants` pins the strip with
+                                // `group-data-horizontal/tabs:h-8` for a compact single row.
+                                // Eight tools do not fit one row, so the list must grow — and a
+                                // bare `h-auto` does not make it: both utilities survive `cn()`
+                                // because they carry different variant prefixes, and the
+                                // prefixed rule wins the cascade. Measured, not assumed:
+                                // `getComputedStyle` reported a 32px list around a 60px tab.
+                                //
+                                // The consequence was invisible. The eighth tool wrapped into
+                                // height that was never reserved and the panel painted straight
+                                // over it, while every other assertion passed — the tab was
+                                // present, focusable, correctly announced and correctly
+                                // painted. It was simply underneath.
+                                //
+                                // Important settles it without depending on which utility
+                                // `cn()` keeps or what order Tailwind emits them in.
+                                className: "h-auto! w-full flex-wrap justify-start gap-0.5 bg-transparent p-0", children: grouped.map(({ group, items }, gi) => (_jsxs(React.Fragment, { children: [gi > 0 ? (_jsx(Separator, { orientation: "vertical", "aria-hidden": "true", className: "mx-2 h-5 self-center" })) : null, group ? (_jsx("span", { "aria-hidden": "true", "data-slot": "tool-setup-group", "data-group": group.value, className: cn("self-center text-caption text-faint", group.icon
+                                                ? "mr-1 inline-flex size-[22px] items-center justify-center [&_svg]:size-3.5"
+                                                : "px-1"), children: group.icon ?? group.label })) : null, items.map((tool) => (_jsxs(TabsTrigger, { value: tool.value, disabled: tool.disabled, "data-slot": "tool-setup-tab", ...(group ? { "aria-label": `${tool.label}, ${group.label}` } : {}), className: TRIGGER_CLASS, children: [tool.mark, tool.label] }, tool.value)))] }, group?.value ?? `ungrouped-${gi}`))) }) }), visible.map((tool) => {
+                            const pane = hasMethods && activeMethod ? tool.steps?.[activeMethod] : undefined;
+                            return (_jsx(TabsContent, { value: tool.value, "data-slot": "tool-setup-panel", className: "p-5", children: _jsxs("div", { className: "flex flex-col gap-4", children: [tool.instruction || tool.alternative ? (_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1", children: [tool.instruction ? (_jsx("p", { className: "m-0 text-body-sm text-body", children: tool.instruction })) : (_jsx("span", {})), tool.alternative ? (_jsx("a", { href: tool.alternative.href, "data-slot": "tool-setup-alternative", 
+                                                    // `--cg-link` is a token but NOT a generated utility —
+                                                    // there is no `--color-link`, so `text-link` emits
+                                                    // nothing and the link paints as body text. The
+                                                    // arbitrary form is how the library reaches an
+                                                    // ungenerated token, the same way onboarding-question
+                                                    // writes `ring-(--cg-border-strong)`.
+                                                    className: "text-body-sm text-(--cg-link) underline-offset-4 hover:text-(--cg-link-hover) hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: tool.alternative.label })) : null] })) : null, pane?.length ? (_jsx(StepPane, { steps: pane })) : tool.prompt ? (_jsx(CodeBlock, { code: tool.prompt })) : null] }) }, tool.value));
+                        })] }) })), continueLabel !== null || footer ? (_jsxs("div", { "data-slot": "tool-setup-actions", className: "flex flex-col items-start gap-4", children: [continueLabel !== null ? (_jsx(Button, { type: "button", size: "lg", "data-slot": "tool-setup-continue", onClick: onContinue, disabled: !canContinue, children: continueLabel })) : null, footer] })) : null] }));
 }
 export { ToolSetup };
 //# sourceMappingURL=tool-setup.js.map