@tempoxyz/ds 0.2.6 → 0.3.0

package/dist/web/components/Snippet.css

@@ -1 +1 @@
-.z_tds_2f_web-q8zJDk0{color:var(--z-tds_2f_web-color-gray-900,light-dark(#4d4d4d,#bcbbbb))}.z_tds_2f_web-q8zJDk1{flex-shrink:0}.z_tds_2f_web-q8zJDk2{user-select:none}.z_tds_2f_web-q8zJDk3{align-items:center}.z_tds_2f_web-q8zJDk4{background-color:var(--z-tds_2f_web-color-grayAlpha-100,light-dark(#0000000d,#ffffff12))}.z_tds_2f_web-q8zJDk5{box-sizing:border-box}.z_tds_2f_web-q8zJDk6{column-gap:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-q8zJDk7{cursor:pointer}.z_tds_2f_web-q8zJDk8{display:flex}.z_tds_2f_web-q8zJDk9{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-q8zJDka{position:relative}.z_tds_2f_web-q8zJDkb{transition-duration:.2s,.16s}.z_tds_2f_web-q8zJDkc{transition-property:background-color,scale}.z_tds_2f_web-q8zJDkd{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-q8zJDke{font-family:var(--z-tds_2f_web-typography-label-14-mono-fontFamily,"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)}.z_tds_2f_web-q8zJDkf{font-size:var(--z-tds_2f_web-typography-label-14-mono-fontSize,14px)}.z_tds_2f_web-q8zJDkg{font-weight:var(--z-tds_2f_web-typography-label-14-mono-fontWeight,400)}.z_tds_2f_web-q8zJDkh{letter-spacing:var(--z-tds_2f_web-typography-label-14-mono-letterSpacing,0px)}.z_tds_2f_web-q8zJDki{line-height:var(--z-tds_2f_web-typography-label-14-mono-lineHeight,20px)}.z_tds_2f_web-q8zJDkj{&:hover:not(:has(button:hover)){background-color:var(--z-tds_2f_web-color-grayAlpha-200,light-dark(#00000014,#ffffff1a))}}.z_tds_2f_web-q8zJDkk{&:active:not(:has(button:active)){scale:var(--z-tds_2f_web-scale-press,.98)}}.z_tds_2f_web-q8zJDkl{&[data-copied]{background-color:var(--z-tds_2f_web-color-green-200,light-dark(#e8fbed,#032f1c))}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-q8zJDkm{transition-property:background-color}.z_tds_2f_web-q8zJDkn{&:active:not(:has(button:active)){scale:none}}}.z_tds_2f_web-q8zJDko{&:where([data-size=large]){border-radius:var(--z-tds_2f_web-radius-16,1rem)}}.z_tds_2f_web-q8zJDkp{&:where([data-size=large]){height:var(--z-tds_2f_web-spacing-56,3.5rem)}}.z_tds_2f_web-q8zJDkq{&:where([data-size=large]){padding-inline-end:var(--z-tds_2f_web-spacing-8,.5rem)}}.z_tds_2f_web-q8zJDkr{&:where([data-size=large]){padding-inline-start:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z_tds_2f_web-q8zJDks{&:where([data-size=medium]){border-radius:var(--z-tds_2f_web-radius-12,.75rem)}}.z_tds_2f_web-q8zJDkt{&:where([data-size=medium]){height:var(--z-tds_2f_web-spacing-40,2.5rem)}}.z_tds_2f_web-q8zJDku{&:where([data-size=medium]){padding-inline-end:var(--z-tds_2f_web-spacing-4,.25rem)}}.z_tds_2f_web-q8zJDkv{&:where([data-size=medium]){padding-inline-start:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-q8zJDkw{&:where([data-size=small]){border-radius:var(--z-tds_2f_web-radius-8,.5rem)}}.z_tds_2f_web-q8zJDkx{&:where([data-size=small]){height:var(--z-tds_2f_web-spacing-32,2rem)}}.z_tds_2f_web-q8zJDky{&:where([data-size=small]){padding-inline-end:var(--z-tds_2f_web-spacing-4,.25rem)}}.z_tds_2f_web-q8zJDkz{&:where([data-size=small]){padding-inline-start:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-q8zJDk10{&:where([data-size=small]){&>button{height:var(--z-tds_2f_web-spacing-24,1.5rem)}}}.z_tds_2f_web-q8zJDk11{&:where([data-size=small]){&>button{min-width:var(--z-tds_2f_web-spacing-24,1.5rem)}}}.z_tds_2f_web-q8zJDk12{&:where([data-size=small]){&>button{width:var(--z-tds_2f_web-spacing-24,1.5rem)}}}.z_tds_2f_web-q8zJDk13{flex-grow:1}.z_tds_2f_web-q8zJDk14{font-family:var(--z-tds_2f_web-fontFamily-mono,"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)}.z_tds_2f_web-q8zJDk15{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-q8zJDk16{outline-color:#0000}.z_tds_2f_web-q8zJDk17{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-q8zJDk18{outline-style:solid}.z_tds_2f_web-q8zJDk19{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-q8zJDk1a{overflow-x:auto}.z_tds_2f_web-q8zJDk1b{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-q8zJDk1c{transition-property:outline-color,outline-offset}.z_tds_2f_web-q8zJDk1d{white-space:nowrap}.z_tds_2f_web-q8zJDk1e{&:focus-visible{outline-color:var(--z-tds_2f_web-color-blue-700,#4471ed)}}.z_tds_2f_web-q8zJDk1f{&:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-q8zJDk1g{transition-property:outline-color}}
+.z_tds_2f_web-q8zJDk0{align-items:flex-start}.z_tds_2f_web-q8zJDk1{background-color:var(--z-tds_2f_web-color-container-subtle,light-dark(var(--z-tds_2f_web-color-neutral-shade-003,#00000008),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}.z_tds_2f_web-q8zJDk2{column-gap:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-q8zJDk3{cursor:pointer}.z_tds_2f_web-q8zJDk4{display:flex}.z_tds_2f_web-q8zJDk5{padding:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-q8zJDk6{&>button{color:var(--z-tds_2f_web-color-content-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-056,#0000008f),var(--z-tds_2f_web-color-neutral-tint-056,#ffffff8f)))}}.z_tds_2f_web-q8zJDk7{&:active>button:not(:disabled){scale:var(--z-tds_2f_web-scale-press,.98)}}.z_tds_2f_web-q8zJDk8{&:hover>button:not(:disabled){background-color:var(--z-tds_2f_web-color-container-strong,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-016,#ffffff29)))}}.z_tds_2f_web-q8zJDk9{&>button[data-copied]:not(:disabled){background-color:var(--z-tds_2f_web-color-container-positive,light-dark(var(--z-tds_2f_web-color-accent-alpha-regular-green-100,#13a96314),var(--z-tds_2f_web-color-accent-alpha-regular-green-200,#59e5a429)))}}.z_tds_2f_web-q8zJDka{&>button[data-copied]:not(:disabled){color:var(--z-tds_2f_web-color-content-positive,var(--z-tds_2f_web-color-accent-green-background,light-dark(#13a963,#59e5a4)))}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-q8zJDkb{&:active>button:not(:disabled){scale:none}}}.z_tds_2f_web-q8zJDkc{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-q8zJDkd{color:var(--z-tds_2f_web-color-content-tertiary,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-040,#fff6)))}.z_tds_2f_web-q8zJDke{user-select:none}.z_tds_2f_web-q8zJDkf{background-color:var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}.z_tds_2f_web-q8zJDkg{border-color:var(--z-tds_2f_web-color-line-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}.z_tds_2f_web-q8zJDkh{border-radius:var(--z-tds_2f_web-radius-sm,calc(1rem * var(--tds-corner-scale,1)))}.z_tds_2f_web-q8zJDki{border-style:solid}.z_tds_2f_web-q8zJDkj{border-width:var(--z-tds_2f_web-borderWidth-regular,var(--z-tds_2f_web-spacing-1,1px))}.z_tds_2f_web-q8zJDkk{box-sizing:border-box}.z_tds_2f_web-q8zJDkl{color:var(--z-tds_2f_web-color-content-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-056,#0000008f),var(--z-tds_2f_web-color-neutral-tint-056,#ffffff8f)))}.z_tds_2f_web-q8zJDkm{min-width:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-q8zJDkn{overflow:hidden}.z_tds_2f_web-q8zJDko{position:relative}.z_tds_2f_web-q8zJDkp{border-block-end-color:var(--z-tds_2f_web-color-line-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}.z_tds_2f_web-q8zJDkq{border-block-end-style:solid}.z_tds_2f_web-q8zJDkr{border-block-end-width:var(--z-tds_2f_web-borderWidth-regular,var(--z-tds_2f_web-spacing-1,1px))}.z_tds_2f_web-q8zJDks{padding-inline:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-q8zJDkt{& [role=tab]{outline-offset:var(--z-tds_2f_web-outlineOffset-_2d_2,-2px)}}.z_tds_2f_web-q8zJDku{align-self:center}.z_tds_2f_web-q8zJDkv{flex-grow:1}.z_tds_2f_web-q8zJDkw{overflow-wrap:anywhere}.z_tds_2f_web-q8zJDkx{font-family:var(--z-tds_2f_web-typography-mono-m1-fontFamily,var(--z-tds_2f_web-fontFamily-mono,"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace))}.z_tds_2f_web-q8zJDky{font-size:var(--z-tds_2f_web-typography-mono-m1-fontSize,12px)}.z_tds_2f_web-q8zJDkz{font-weight:var(--z-tds_2f_web-typography-mono-m1-fontWeight,400)}.z_tds_2f_web-q8zJDk10{letter-spacing:var(--z-tds_2f_web-typography-mono-m1-letterSpacing,0px)}.z_tds_2f_web-q8zJDk11{line-height:var(--z-tds_2f_web-typography-mono-m1-lineHeight,16px)}

package/dist/web/components/Snippet.d.ts

@@ -1,13 +1,16 @@
-import type { ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type * as zyzz from 'zyzz';
 /**
- * A one-line command or value in a `code` element, with a copy button at the end. A click anywhere
- * on the block copies `children` unless an `onClick` handler calls `preventDefault()`. The button
+ * A command or value in a `code` element, with a copy button at the top end. A click anywhere on
+ * the command copies `children` unless an `onClick` handler calls `preventDefault()`. The button
  * is the keyboard path and announces `Copied` through a polite status region.
  *
  * - Pass only the command text. The `prompt` glyph is decorative, hidden from assistive technology
  *   and never copied.
- * - Keep it to one line. Long values scroll horizontally inside the focusable `code` element.
+ * - The first word, the program, renders in the primary color, and the arguments after it in the
+ *   secondary color. Long commands wrap, and wrapped lines align with the arguments.
+ * - Pass a `Tabs.List` as `tabs` to switch between commands, such as one per agent. Wrap the
+ *   snippet in `Tabs.Root`, and pass the command of the active tab as `children`.
  * - Name the copy button with `labels.copy`, such as `Copy install command`, when a page shows
  *   several snippets. It defaults to `Copy`.
  *
@@ -36,78 +39,37 @@ export declare namespace Snippet {
          * @default '$'
          */
         prompt?: string | false | undefined;
+        /**
+         * Has no effect. The snippet has one size, and its height follows the lines of the command.
+         * @deprecated Remove the prop.
+         */
+        size?: 'large' | 'medium' | 'small' | undefined;
+        /**
+         * A `Tabs.List` shown above the command, inside the border and over a rule. A click on it
+         * does not copy. Absent by default.
+         */
+        tabs?: ReactNode | undefined;
     };
 }
 declare namespace styles {
+    const command: zyzz.style.ReturnType<"react">;
+    const program: zyzz.style.ReturnType<"react">;
     const prompt: zyzz.style.ReturnType<"react">;
     const root: zyzz.variants.ReturnType<{
         readonly base: {
-            readonly alignItems: "center";
-            readonly backgroundColor: "grayAlpha.100";
+            readonly backgroundColor: "background.elevated";
+            readonly borderColor: "line.secondary";
+            readonly borderRadius: "sm";
+            readonly borderStyle: "solid";
+            readonly borderWidth: "regular";
             readonly boxSizing: "border-box";
-            readonly color: "gray.900";
-            readonly columnGap: "8";
-            readonly cursor: "pointer";
-            readonly display: "flex";
+            readonly color: "content.secondary";
             readonly minWidth: "0";
+            readonly overflow: "hidden";
             readonly position: "relative";
-            readonly transitionDuration: "200ms, 160ms !custom";
-            readonly transitionProperty: "background-color, scale";
-            readonly transitionTimingFunction: "snappy";
-            readonly typography: "label.14.mono";
-            readonly selectors: {
-                readonly '&:hover:not(:has(button:hover))': {
-                    readonly backgroundColor: "grayAlpha.200";
-                };
-                readonly '&:active:not(:has(button:active))': {
-                    readonly scale: "press";
-                };
-                readonly '&[data-copied]': {
-                    readonly backgroundColor: "green.200";
-                };
-            };
-            readonly '@media (prefers-reduced-motion: reduce)': {
-                readonly transitionProperty: "background-color";
-                readonly selectors: {
-                    readonly '&:active:not(:has(button:active))': {
-                        readonly scale: "none !custom";
-                    };
-                };
-            };
-        };
-        readonly defaultVariants: {
-            readonly size: "medium";
-        };
-        readonly variants: {
-            readonly size: {
-                readonly large: {
-                    readonly borderRadius: "16";
-                    readonly height: "56";
-                    readonly paddingInlineEnd: "8";
-                    readonly paddingInlineStart: "20";
-                };
-                readonly medium: {
-                    readonly borderRadius: "12";
-                    readonly height: "40";
-                    readonly paddingInlineEnd: "4";
-                    readonly paddingInlineStart: "16";
-                };
-                readonly small: {
-                    readonly borderRadius: "8";
-                    readonly height: "32";
-                    readonly paddingInlineEnd: "4";
-                    readonly paddingInlineStart: "12";
-                    readonly selectors: {
-                        readonly '& > button': {
-                            readonly height: "24";
-                            readonly minWidth: "24";
-                            readonly width: "24";
-                        };
-                    };
-                };
-            };
         };
     }, "react">;
+    const tabs: zyzz.style.ReturnType<"react">;
     const text: zyzz.style.ReturnType<"react">;
 }
 export {};

package/dist/web/components/Snippet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snippet.d.ts","sourceRoot":"","sources":["../../../src/web/components/Snippet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAKjC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,+BAyB3C;AAED,yBAAiB,OAAO,CAAC;IACvB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG;QACxC,+CAA+C;QAC/C,QAAQ,EAAE,MAAM,CAAA;QAChB;;;WAGG;QACH,MAAM,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,GAAG,SAAS,CAAA;QAClD;;;WAGG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAAA;KACpC,CAAA;CACJ;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,MAAM,gCAGlB,CAAA;IAEM,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAsDhB,CAAA;IAEM,MAAM,IAAI,gCAoBhB,CAAA;CACF"}
+{"version":3,"file":"Snippet.d.ts","sourceRoot":"","sources":["../../../src/web/components/Snippet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAA;AAC1E,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAKjC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,+BA6E3C;AAED,yBAAiB,OAAO,CAAC;IACvB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG;QACxC,+CAA+C;QAC/C,QAAQ,EAAE,MAAM,CAAA;QAChB;;;WAGG;QACH,MAAM,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,GAAG,SAAS,CAAA;QAClD;;;WAGG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAAA;QACnC;;;WAGG;QACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;QAC/C;;;WAGG;QACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;KAC7B,CAAA;CACJ;AAED,kBAAU,MAAM,CAAC;IAIR,MAAM,OAAO,gCAsBnB,CAAA;IAEM,MAAM,OAAO,gCAAyE,CAAA;IAEtF,MAAM,MAAM,gCAGlB,CAAA;IAGM,MAAM,IAAI;;;;;;;;;;;;;eAgBhB,CAAA;IAGM,MAAM,IAAI,gCAShB,CAAA;IAGM,MAAM,IAAI,gCAShB,CAAA;CACF"}

package/dist/web/components/Snippet.js

@@ -1,17 +1,21 @@
 
 import { Props as __zyzzProps } from 'zyzz/runtime';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { style, variants } from '../zyzz.config.js';
 import { CopyButton } from './CopyButton.js';
 import { useCopy } from './internal/useCopy.js';
 /**
- * A one-line command or value in a `code` element, with a copy button at the end. A click anywhere
- * on the block copies `children` unless an `onClick` handler calls `preventDefault()`. The button
+ * A command or value in a `code` element, with a copy button at the top end. A click anywhere on
+ * the command copies `children` unless an `onClick` handler calls `preventDefault()`. The button
  * is the keyboard path and announces `Copied` through a polite status region.
  *
  * - Pass only the command text. The `prompt` glyph is decorative, hidden from assistive technology
  *   and never copied.
- * - Keep it to one line. Long values scroll horizontally inside the focusable `code` element.
+ * - The first word, the program, renders in the primary color, and the arguments after it in the
+ *   secondary color. Long commands wrap, and wrapped lines align with the arguments.
+ * - Pass a `Tabs.List` as `tabs` to switch between commands, such as one per agent. Wrap the
+ *   snippet in `Tabs.Root`, and pass the command of the active tab as `children`.
  * - Name the copy button with `labels.copy`, such as `Copy install command`, when a page shows
  *   several snippets. It defaults to `Copy`.
  *
@@ -24,19 +28,52 @@ import { useCopy } from './internal/useCopy.js';
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
  */
 export function Snippet(props) {
-    const { children, className, labels, onClick, prompt = '$', size, vars, ...attributes } = props;
+    const { children, className, labels, onClick, prompt = '$', 
+    // The deprecated size has no style, and stays off the element.
+    size: _size, tabs, vars, ...attributes } = props;
+    const header = useRef(null);
     const state = useCopy(children);
+    // The program ends at the first whitespace. The arguments keep that whitespace, so the text
+    // reads, selects and copies as one command.
+    const [, program = '', rest = ''] = /^(\S*)([\s\S]*)$/.exec(children) ?? [];
+    // Each part of the command takes a whole number of pixels, rounded up as the design sizes its
+    // texts, and the next part starts 8px after it. Every glyph of the mono face advances by `1ch`,
+    // so the margin after a part adds the rest.
+    const width = (text) => `round(up, ${text.length}ch, 1px)`;
+    const gap = (text) => `calc(${width(text)} + 8px - ${text.length}ch)`;
+    // Wrapped lines start under the arguments.
+    const indent = rest
+        ? `calc(${prompt ? `${width(prompt)} + 8px + ` : ''}${width(program)} + 8px)`
+        : undefined;
     return (_jsxs("div", { "data-copied": state.copied || undefined, ...attributes, onClick: (event) => {
             onClick?.(event);
-            if (!event.defaultPrevented)
-                void state.copy();
-        }, ...styles.root({ className, size, style: props.style, vars }), children: [prompt && (_jsx("span", { "aria-hidden": "true", ...styles.prompt(), children: prompt })), _jsx("code", { ...styles.text(), tabIndex: 0, children: children }), _jsx(CopyButton, { "aria-label": labels?.copy ?? 'Copy', copied: state.copied, value: children })] }));
+            // The tabs switch the command, so a click on them does not copy.
+            if (event.defaultPrevented || header.current?.contains(event.target))
+                return;
+            void state.copy();
+        }, ...styles.root({ className, style: props.style, vars }), children: [tabs && (_jsx("div", { ref: header, ...styles.tabs(), children: tabs })), _jsxs("div", { ...styles.command(), children: [_jsxs("code", { ...styles.text({
+                            style: indent
+                                ? { paddingInlineStart: indent, textIndent: `calc(-1 * ${indent})` }
+                                : undefined,
+                        }), children: [prompt && (_jsx("span", { "aria-hidden": "true", ...styles.prompt({ style: { marginInlineEnd: gap(prompt) } }), children: prompt })), _jsx("span", { ...styles.program({
+                                    // The space before the arguments advances by another `1ch`.
+                                    style: rest ? { marginInlineEnd: `calc(${gap(program)} - 1ch)` } : undefined,
+                                }), children: program }), rest] }), _jsx(CopyButton, { "aria-label": labels?.copy ?? 'Copy', copied: state.copied, value: children })] })] }));
 }
 var styles;
 (function (styles) {
-    styles.prompt = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-q8zJDk0 z_tds_2f_web-q8zJDk1 z_tds_2f_web-q8zJDk2"});
-    styles.root = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-q8zJDk3 z_tds_2f_web-q8zJDk4 z_tds_2f_web-q8zJDk5 z_tds_2f_web-q8zJDk0 z_tds_2f_web-q8zJDk6 z_tds_2f_web-q8zJDk7 z_tds_2f_web-q8zJDk8 z_tds_2f_web-q8zJDk9 z_tds_2f_web-q8zJDka z_tds_2f_web-q8zJDkb z_tds_2f_web-q8zJDkc z_tds_2f_web-q8zJDkd z_tds_2f_web-q8zJDke z_tds_2f_web-q8zJDkf z_tds_2f_web-q8zJDkg z_tds_2f_web-q8zJDkh z_tds_2f_web-q8zJDki z_tds_2f_web-q8zJDkj z_tds_2f_web-q8zJDkk z_tds_2f_web-q8zJDkl z_tds_2f_web-q8zJDkm z_tds_2f_web-q8zJDkn z_tds_2f_web-q8zJDko z_tds_2f_web-q8zJDkp z_tds_2f_web-q8zJDkq z_tds_2f_web-q8zJDkr z_tds_2f_web-q8zJDks z_tds_2f_web-q8zJDkt z_tds_2f_web-q8zJDku z_tds_2f_web-q8zJDkv z_tds_2f_web-q8zJDkw z_tds_2f_web-q8zJDkx z_tds_2f_web-q8zJDky z_tds_2f_web-q8zJDkz z_tds_2f_web-q8zJDk10 z_tds_2f_web-q8zJDk11 z_tds_2f_web-q8zJDk12"+" "+external:"z_tds_2f_web-q8zJDk3 z_tds_2f_web-q8zJDk4 z_tds_2f_web-q8zJDk5 z_tds_2f_web-q8zJDk0 z_tds_2f_web-q8zJDk6 z_tds_2f_web-q8zJDk7 z_tds_2f_web-q8zJDk8 z_tds_2f_web-q8zJDk9 z_tds_2f_web-q8zJDka z_tds_2f_web-q8zJDkb z_tds_2f_web-q8zJDkc z_tds_2f_web-q8zJDkd z_tds_2f_web-q8zJDke z_tds_2f_web-q8zJDkf z_tds_2f_web-q8zJDkg z_tds_2f_web-q8zJDkh z_tds_2f_web-q8zJDki z_tds_2f_web-q8zJDkj z_tds_2f_web-q8zJDkk z_tds_2f_web-q8zJDkl z_tds_2f_web-q8zJDkm z_tds_2f_web-q8zJDkn z_tds_2f_web-q8zJDko z_tds_2f_web-q8zJDkp z_tds_2f_web-q8zJDkq z_tds_2f_web-q8zJDkr z_tds_2f_web-q8zJDks z_tds_2f_web-q8zJDkt z_tds_2f_web-q8zJDku z_tds_2f_web-q8zJDkv z_tds_2f_web-q8zJDkw z_tds_2f_web-q8zJDkx z_tds_2f_web-q8zJDky z_tds_2f_web-q8zJDkz z_tds_2f_web-q8zJDk10 z_tds_2f_web-q8zJDk11 z_tds_2f_web-q8zJDk12",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"size")?input["size"]:void 0;if(value===void 0)value="medium";if(value!==null&&value!==void 0)result["data-size"]=String(value);return result});
-    styles.text = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-q8zJDk13 z_tds_2f_web-q8zJDk14 z_tds_2f_web-q8zJDk15 z_tds_2f_web-q8zJDk16 z_tds_2f_web-q8zJDk17 z_tds_2f_web-q8zJDk18 z_tds_2f_web-q8zJDk19 z_tds_2f_web-q8zJDk1a z_tds_2f_web-q8zJDk1b z_tds_2f_web-q8zJDk1c z_tds_2f_web-q8zJDkd z_tds_2f_web-q8zJDk1d z_tds_2f_web-q8zJDk1e z_tds_2f_web-q8zJDk1f z_tds_2f_web-q8zJDk1g"});
+    // The copy button sits in the corner, and fills on hover anywhere on the command, since a click
+    // there copies. The fill selectors outrank the hover and press fills of the button, and the
+    // copied fill stays last, so it wins over the hover fill.
+    styles.command = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-q8zJDk0 z_tds_2f_web-q8zJDk1 z_tds_2f_web-q8zJDk2 z_tds_2f_web-q8zJDk3 z_tds_2f_web-q8zJDk4 z_tds_2f_web-q8zJDk5 z_tds_2f_web-q8zJDk6 z_tds_2f_web-q8zJDk7 z_tds_2f_web-q8zJDk8 z_tds_2f_web-q8zJDk9 z_tds_2f_web-q8zJDka z_tds_2f_web-q8zJDkb"});
+    styles.program = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-q8zJDkc"});
+    styles.prompt = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-q8zJDkd z_tds_2f_web-q8zJDke"});
+    // The snippet clips the command to its corners.
+    styles.root = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-q8zJDkf z_tds_2f_web-q8zJDkg z_tds_2f_web-q8zJDkh z_tds_2f_web-q8zJDki z_tds_2f_web-q8zJDkj z_tds_2f_web-q8zJDkk z_tds_2f_web-q8zJDkl z_tds_2f_web-q8zJDkm z_tds_2f_web-q8zJDkn z_tds_2f_web-q8zJDko"+" "+external:"z_tds_2f_web-q8zJDkf z_tds_2f_web-q8zJDkg z_tds_2f_web-q8zJDkh z_tds_2f_web-q8zJDki z_tds_2f_web-q8zJDkj z_tds_2f_web-q8zJDkk z_tds_2f_web-q8zJDkl z_tds_2f_web-q8zJDkm z_tds_2f_web-q8zJDkn z_tds_2f_web-q8zJDko",result=inline?{className,style:inline}:{className};let value;return result});
+    // The tabs touch the top edge, where the snippet clips, so their focus rings draw inside them.
+    styles.tabs = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-q8zJDkp z_tds_2f_web-q8zJDkq z_tds_2f_web-q8zJDkr z_tds_2f_web-q8zJDks z_tds_2f_web-q8zJDkt"});
+    // A one-line command centers on the copy button, and a longer one starts level with it.
+    styles.text = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-q8zJDku z_tds_2f_web-q8zJDkv z_tds_2f_web-q8zJDkm z_tds_2f_web-q8zJDkw z_tds_2f_web-q8zJDkx z_tds_2f_web-q8zJDky z_tds_2f_web-q8zJDkz z_tds_2f_web-q8zJDk10 z_tds_2f_web-q8zJDk11"});
 })(styles || (styles = {}));
 //# sourceMappingURL=Snippet.js.map
 import './Snippet.css';

package/dist/web/components/Snippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snippet.js","sourceRoot":"","sources":["../../../src/web/components/Snippet.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Snippet.js","sourceRoot":"","sources":["../../../src/web/components/Snippet.tsx"],"names":[],"mappings":"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"}