@tenstorrent/vesper 0.1.0

package/dist/components/choicebox/choicebox.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, } from "react";
+import { Checkmark } from "../icons/icons.js";
+import { Typography } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+import { useMergedRefs } from "../../utils/hooks/useMergedRefs.js";
+/**
+ * A selection group component that supports both single-select (radio) and multi-select (checkbox) modes with card-style options.
+ *
+ * @param {string} props.name - The name attribute shared by all inputs, used for form submission
+ * @param {ChoiceboxItem[]} props.options - The list of options to render
+ * @param {boolean} [props.multiselect] - (optional) When `true`, enables multi-select (checkbox) mode. @default false
+ * @param {boolean} [props.disabled] - (optional) Disables all options in the group. @default false
+ * @param {string} [props.value] - (optional) The currently selected value (single-select, controlled)
+ * @param {string} [props.defaultValue] - (optional) The initially selected value (single-select, uncontrolled)
+ * @param {(value: string) => void} [props.onChange] - (optional) Callback fired on selection change (single-select)
+ * @param {string[]} [props.values] - (optional) The currently selected values (multi-select, controlled)
+ * @param {(values: string[]) => void} [props.onChange] - (optional) Callback fired with all selected values (multi-select)
+ *
+ * You may also pass any additional props to the underlying `fieldset` element
+
+ * @example
+ * <Choicebox
+ *   name="plan"
+ *   options={[
+ *     { value: "free", label: "Free", description: "Basic features" },
+ *     { value: "pro", label: "Pro", description: "Advanced features" },
+ *   ]}
+ *   value={selectedPlan}
+ *   onChange={setSelectedPlan}
+ * />
+ *
+ * @example
+ * <Choicebox
+ *   multiselect
+ *   name="features"
+ *   options={[
+ *     { value: "dark-mode", label: "Dark Mode" },
+ *     { value: "notifications", label: "Notifications" },
+ *   ]}
+ *   min={1}
+ *   max={3}
+ *   onChange={(values) => console.log(values)}
+ * />
+ */
+export function Choicebox(props) {
+    if (props.multiselect)
+        return _jsx(ChoiceboxMultiSelect, { ...props });
+    return _jsx(ChoiceboxSingleSelect, { ...props });
+}
+function ChoiceboxSingleSelect({ className, value, defaultValue, onChange, options, name, disabled, required, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+multiselect, ...props }) {
+    return (_jsx("fieldset", { className: cn("vesper-choicebox", className), ...props, children: options.map((option) => {
+            const checkedProps = value !== undefined
+                ? { checked: value === option.value }
+                : { defaultChecked: defaultValue === option.value };
+            return (_jsx(ChoiceboxItem, { option: option, required: required, disabled: disabled, name: name, onChange: (e) => {
+                    if (!onChange)
+                        return;
+                    if (e.target.checked)
+                        onChange(option.value);
+                }, ...checkedProps }, option.value));
+        }) }));
+}
+function ChoiceboxMultiSelect({ className, values, defaultValues, onChange, options, disabled, name, ref, min = 0, max = Infinity, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+multiselect, ...props }) {
+    const innerRef = useRef(null);
+    const mergedRef = useMergedRefs(ref, innerRef);
+    useEffect(() => {
+        if (!innerRef.current)
+            return;
+        setMinMaxValidity(getCheckboxes(innerRef.current), min, max);
+    }, [min, max]);
+    /**
+     * Mimic the keyboard accessibility of single-select (group of radio inputs)
+     * - ArrowLeft/ArrowDown moves focus forwards to the next input
+     * - ArrowRight/ArrowUp moves focus back to the previous input
+     * - disabled inputs are skipped
+     * - moving back/forward at the first/last inputs loops around
+     */
+    const handleKeyDown = useCallback((e) => {
+        if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+            return;
+        }
+        const inputs = Array.from(innerRef.current.querySelectorAll(".vesper-choicebox-input:not(:disabled)"));
+        const currentIndex = inputs.indexOf(e.target);
+        if (currentIndex === -1)
+            return;
+        e.preventDefault();
+        const direction = ["ArrowDown", "ArrowRight"].includes(e.key) ? 1 : -1;
+        const nextIndex = (currentIndex + direction + inputs.length) % inputs.length;
+        inputs[nextIndex]?.focus();
+    }, []);
+    return (_jsx("fieldset", { ref: mergedRef, className: cn("vesper-choicebox", className), onKeyDown: handleKeyDown, ...props, children: options.map((option) => {
+            const checkedProps = values !== undefined
+                ? { checked: values.includes(option.value) }
+                : { defaultChecked: defaultValues?.includes(option.value) };
+            return (_jsx(ChoiceboxItem, { multiselect: true, option: option, disabled: disabled, name: name, onChange: () => {
+                    const checkboxes = getCheckboxes(innerRef.current);
+                    setMinMaxValidity(checkboxes, min, max);
+                    if (!onChange)
+                        return;
+                    onChange(checkboxes.filter((v) => v.checked).map((v) => v.value));
+                }, ...checkedProps }, option.value));
+        }) }));
+}
+function ChoiceboxItem({ option, multiselect, disabled, required, name, checked, defaultChecked, onChange, }) {
+    const isDisabled = option.disabled || disabled;
+    return (_jsxs("label", { htmlFor: option.id, className: cn("vesper-choicebox-item", !option.description && "vesper-choicebox-item-compact"), children: [_jsxs("div", { children: [_jsx(Typography, { variant: "copy-sm-bold", className: "vesper-choicebox-item-label", children: option.label }), option.description && (_jsx(Typography, { variant: "copy-xs", className: "vesper-choicebox-item-description", children: option.description }))] }), _jsx("input", { type: multiselect ? "checkbox" : "radio", className: "vesper-choicebox-input", id: option.id, name: name, value: option.value, required: required, disabled: isDisabled, onChange: onChange, checked: checked, defaultChecked: defaultChecked }), multiselect ? (_jsx("div", { className: "vesper-choicebox-input-multi-indicator", children: _jsx(Checkmark, {}) })) : (_jsx("div", { className: "vesper-choicebox-input-single-indicator" }))] }, option.value));
+}
+function getCheckboxes(ref) {
+    return Array.from(ref.querySelectorAll(".vesper-choicebox-input"));
+}
+function setMinMaxValidity(checkboxes, min, max) {
+    if (checkboxes.length === 0)
+        return;
+    const numChecked = checkboxes.filter((c) => c.checked).length;
+    if (numChecked < min) {
+        checkboxes[0].setCustomValidity(`Please select at least ${min} ${min === 1 ? "item" : "items"}`);
+        return;
+    }
+    if (numChecked > max) {
+        checkboxes[0].setCustomValidity(`Please select ${max} or fewer items`);
+        return;
+    }
+    checkboxes[0].setCustomValidity("");
+}
+//# sourceMappingURL=choicebox.js.map

package/dist/components/choicebox/choicebox.js.map

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

package/dist/components/code/code.css

@@ -0,0 +1 @@
+.vesper-code{padding:var(--vesper-spacing-half) var(--vesper-spacing-1);border-radius:var(--vesper-radius-1);font-size:.8125em}.vesper-code-default{background:var(--vesper-tint-neutral-100);color:var(--vesper-text-primary);border:var(--vesper-stroke-base) solid var(--vesper-border-tertiary)}.vesper-code-contrast{background:var(--vesper-background-inverse-primary);color:var(--vesper-text-inverse-primary);border:var(--vesper-stroke-base) solid var(--vesper-border-strong)}

package/dist/components/code/code.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+export declare const CODE_VARIANTS: readonly ["default", "contrast"];
+export type CodeVariant = (typeof CODE_VARIANTS)[number];
+export interface CodeProps extends ComponentProps<"code"> {
+    /** The visual style variant to render. @default default */
+    variant?: CodeVariant;
+}
+/**
+ * An inline code element with consistent monospace typography and visual styling.
+ *
+ * @param {CodeVariant} [props.variant] - (optional) The visual style variant. @default default`
+ * @param {string} [props.className] - (optional) Additional CSS class names to apply
+ *
+ * You may also pass any additional props to the underlying `<code>` element
+ *
+ * @example
+ * <Code>npm install vesper</Code>
+ *
+ * @example
+ * <Code variant="contrast">const x = 42</Code>
+ */
+export declare function Code(props: CodeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=code.d.ts.map

package/dist/components/code/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../src/components/code/code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM5C,eAAO,MAAM,aAAa,kCAAmC,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,MAAM,CAAC;IACvD,2DAA2D;IAC3D,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,2CAWpC"}

package/dist/components/code/code.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from "../typography/typography.js";
+import { cn } from "../../utils/cn.js";
+export const CODE_VARIANTS = ["default", "contrast"];
+/**
+ * An inline code element with consistent monospace typography and visual styling.
+ *
+ * @param {CodeVariant} [props.variant] - (optional) The visual style variant. @default default`
+ * @param {string} [props.className] - (optional) Additional CSS class names to apply
+ *
+ * You may also pass any additional props to the underlying `<code>` element
+ *
+ * @example
+ * <Code>npm install vesper</Code>
+ *
+ * @example
+ * <Code variant="contrast">const x = 42</Code>
+ */
+export function Code(props) {
+    const { className, variant = "default", ...rest } = props;
+    return (_jsx(Typography, { as: "code", variant: "copy-xs-mono", className: cn("vesper-code", `vesper-code-${variant}`, className), ...rest }));
+}
+//# sourceMappingURL=code.js.map

package/dist/components/code/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","sourceRoot":"","sources":["../../../src/components/code/code.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,UAAU,CAAU,CAAC;AAS9D;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAE1D,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,cAAc,EACtB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,eAAe,OAAO,EAAE,EAAE,SAAS,CAAC,KAC7D,IAAI,GACR,CACH,CAAC;AACJ,CAAC"}

package/dist/components/code-block/code-block.css

@@ -0,0 +1 @@
+.vesper-code-block{border-radius:var(--vesper-radius-2);border:var(--vesper-stroke-base) solid var(--vesper-stone-200);background:var(--vesper-alpha-stone-0);box-shadow:var(--vesper-shadow-inset-100);flex-direction:column;display:flex;position:relative;overflow:hidden}.vesper-code-block .vesper-icon-button{top:min(calc(50% - 1rem), var(--vesper-spacing-5));right:var(--vesper-spacing-5);position:absolute}@media (hover:hover){.vesper-code-block[data-copy-on-hover=true] .vesper-icon-button:not(:focus-visible){opacity:0}.vesper-code-block[data-copy-on-hover=true]:hover .vesper-icon-button{opacity:1}}@media (forced-colors:active){.vesper-code-block:has(.vesper-code-block-pre-wrapper:focus-visible){outline:var(--vesper-stroke-strong) solid CanvasText}}@media not (forced-colors:active){.vesper-code-block:has(.vesper-code-block-pre-wrapper:focus-visible){box-shadow:var(--vesper-shadow-focus-ring)}}@media (forced-colors:active){.vesper-code-block-pre-wrapper:focus-visible{outline:none}}@media not (forced-colors:active){.vesper-code-block-pre-wrapper:focus-visible{box-shadow:none}}.vesper-code-block-pre-wrapper{border-radius:var(--vesper-radius-2);width:100%;overflow:auto}.vesper-code-block-pre-wrapper pre.shiki{min-width:max-content;padding:var(--vesper-spacing-5) 0;outline:none;margin:0;line-height:1.3875rem}.vesper-code-block-pre-wrapper pre.shiki code{font-family:var(--vesper-font-mono);flex-direction:column;display:flex}.vesper-code-block-pre-wrapper pre.shiki .line{padding:0 var(--vesper-spacing-5);width:calc(100% - var(--vesper-spacing-10))}.vesper-code-block-pre-wrapper pre.shiki .line:before{content:"";-webkit-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.vesper-code-block-pre-wrapper[data-line-numbers=true] pre.shiki{counter-reset:line;counter-increment:line 0}.vesper-code-block-pre-wrapper[data-line-numbers=true] pre.shiki .line:before{content:counter(line);counter-increment:line;width:var(--vesper-spacing-12);color:var(--vesper-stone-500)}@media (prefers-color-scheme:dark){html:not([data-vesper-theme=light]) .vesper-code-block .shiki{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg,transparent)!important;font-style:var(--shiki-dark-font-style,normal)!important;font-weight:var(--shiki-dark-font-weight,normal)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration,none)!important;text-decoration:var(--shiki-dark-text-decoration,none)!important}html:not([data-vesper-theme=light]) .vesper-code-block .shiki span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg,transparent)!important;font-style:var(--shiki-dark-font-style,normal)!important;font-weight:var(--shiki-dark-font-weight,normal)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration,none)!important;text-decoration:var(--shiki-dark-text-decoration,none)!important}}html[data-vesper-theme=dark] .vesper-code-block .shiki{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg,transparent)!important;font-style:var(--shiki-dark-font-style,normal)!important;font-weight:var(--shiki-dark-font-weight,normal)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration,none)!important;text-decoration:var(--shiki-dark-text-decoration,none)!important}html[data-vesper-theme=dark] .vesper-code-block .shiki span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg,transparent)!important;font-style:var(--shiki-dark-font-style,normal)!important;font-weight:var(--shiki-dark-font-weight,normal)!important;-webkit-text-decoration:var(--shiki-dark-text-decoration,none)!important;text-decoration:var(--shiki-dark-text-decoration,none)!important}

package/dist/components/code-block/code-block.d.ts

@@ -0,0 +1,48 @@
+import type { ComponentProps } from "react";
+import type { LanguageRegistration } from "@shikijs/core";
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children" | "dangerouslySetInnerHTML" | "lang"> {
+    /**
+     * The code to render. Can be a `string`, or a factory `() => ReadableStream<string>` if you wish to stream something like build logs, output from an LLM, etc.
+     *
+     * A factory is used instead of a raw `ReadableStream` because streams are single-use — once piped they are locked and cannot be re-read. Passing a factory allows the component to create a fresh stream whenever it needs one (e.g. on React Strict Mode remounts or language changes).
+     *
+     * The factory may be asynchronous, returning a `Promise<ReadableStream<string>>`, which is useful when the stream source itself requires an async setup step (e.g. making a network request).
+     */
+    children?: string | (() => ReadableStream<string> | Promise<ReadableStream<string>>);
+    /**
+     * The language syntax of the supplied code. Omitting this prop will render supplied code as plain text with no syntax highlighting.
+     *
+     * For `plaintext` and `ansi` you do not need to supply your own grammars; they are baked into shiki and can be passed in as strings. Other language grammars should be provided as plain objects, most of which can be imported from the `@shikijs/langs` library.
+     *
+     * @see https://shiki.style/languages for a list of available languages along with their `id`s
+     * */
+    lang?: LanguageRegistration[] | "text" | "ansi";
+    /** Whether or not to show line numbers on the left-hand side of the code block. @default false */
+    showLineNumbers?: boolean;
+    /** Hide the copy-to-clipboard button until CodeBlock is hovered. @default false */
+    copyOnHover?: boolean;
+}
+/**
+ * A syntax-highlighted code block with support for static code, streaming content, and line numbers.
+ *
+ * @param {string | (() => ReadableStream<string> | Promise<ReadableStream<string>>)} [props.children] - (optional) The code to render, either as a string or a stream factory
+ * @param {LanguageRegistration[] | "text" | "ansi"} [props.lang] - (optional) The language syntax for highlighting. @default text
+ * @param {boolean} [props.showLineNumbers] - (optional) Whether to display line numbers. @default false
+ * @param {boolean} [props.copyOnHover] - (optional) Hide the copy button until the code block is hovered. @default false
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * import javascript from "@shikijs/langs/javascript";
+ *
+ * <CodeBlock lang={javascript} showLineNumbers>
+ *   {`const greeting = "Hello, world!";\nconsole.log(greeting);`}
+ * </CodeBlock>
+ *
+ * @example
+ * <CodeBlock lang="ansi">
+ *   {buildLogs}
+ * </CodeBlock>
+ */
+export declare function CodeBlock(props: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=code-block.d.ts.map

package/dist/components/code-block/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAQ1D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,yBAAyB,GAAG,MAAM,CAChD;IACC;;;;;;OAMG;IACH,QAAQ,CAAC,EACP,MAAM,GAAG,CAAC,MAAM,cAAc,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC5E;;;;;;SAMK;IACL,IAAI,CAAC,EAAE,oBAAoB,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC;IAChD,kGAAkG;IAClG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAsC9C"}

package/dist/components/code-block/code-block.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { CodeBlockPreWrapper, CopyToClipboardButton } from "./components.js";
+import { StreamingCodeBlock } from "./streaming-code-block.js";
+import { codeToJsx, handleLanguageRegistration } from "./utils.js";
+/**
+ * A syntax-highlighted code block with support for static code, streaming content, and line numbers.
+ *
+ * @param {string | (() => ReadableStream<string> | Promise<ReadableStream<string>>)} [props.children] - (optional) The code to render, either as a string or a stream factory
+ * @param {LanguageRegistration[] | "text" | "ansi"} [props.lang] - (optional) The language syntax for highlighting. @default text
+ * @param {boolean} [props.showLineNumbers] - (optional) Whether to display line numbers. @default false
+ * @param {boolean} [props.copyOnHover] - (optional) Hide the copy button until the code block is hovered. @default false
+ *
+ * You may also pass any additional props to the underlying `div` element
+ *
+ * @example
+ * import javascript from "@shikijs/langs/javascript";
+ *
+ * <CodeBlock lang={javascript} showLineNumbers>
+ *   {`const greeting = "Hello, world!";\nconsole.log(greeting);`}
+ * </CodeBlock>
+ *
+ * @example
+ * <CodeBlock lang="ansi">
+ *   {buildLogs}
+ * </CodeBlock>
+ */
+export function CodeBlock(props) {
+    const { className, children: code = "", lang = "text", showLineNumbers = false, copyOnHover = false, ...rest } = props;
+    handleLanguageRegistration(lang);
+    if (typeof code === "function") {
+        return (_jsx(StreamingCodeBlock, { className: className, lang: lang, copyOnHover: copyOnHover, showLineNumbers: showLineNumbers, ...rest, children: code }));
+    }
+    return (_jsxs("div", { className: cn("vesper-code-block", className), "data-copy-on-hover": copyOnHover, ...rest, children: [_jsx(CodeBlockPreWrapper, { "data-line-numbers": showLineNumbers, children: codeToJsx(code, lang) }), _jsx(CopyToClipboardButton, {})] }));
+}
+//# sourceMappingURL=code-block.js.map

package/dist/components/code-block/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEhC,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AA6BhE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,SAAS,EACT,QAAQ,EAAE,IAAI,GAAG,EAAE,EACnB,IAAI,GAAG,MAAM,EACb,eAAe,GAAG,KAAK,EACvB,WAAW,GAAG,KAAK,EACnB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,0BAA0B,CAAC,IAAI,CAAC,CAAC;IAEjC,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE,CAAC;QAC/B,OAAO,CACL,KAAC,kBAAkB,IACjB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,KAC5B,IAAI,YAEP,IAAI,GACc,CACtB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,wBACzB,WAAW,KAC3B,IAAI,aAER,KAAC,mBAAmB,yBAAoB,eAAe,YACpD,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,GACF,EACtB,KAAC,qBAAqB,KAAG,IACrB,CACP,CAAC;AACJ,CAAC"}

package/dist/components/code-block/components.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentProps } from "react";
+export declare function CodeBlockPreWrapper({ children, ...props }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function CopyToClipboardButton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=components.d.ts.map

package/dist/components/code-block/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/components.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAMjE,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,2CAWvB;AAED,wBAAgB,qBAAqB,4CA6BpC"}

package/dist/components/code-block/components.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconButton } from "../icon-button/icon-button.js";
+import { Checkmark, Copy } from "../icons/icons.js";
+import { Typography } from "../typography/typography.js";
+export function CodeBlockPreWrapper({ children, ...props }) {
+    return (_jsx(Typography, { as: "div", variant: "copy-xs-mono", className: "vesper-code-block-pre-wrapper", ...props, children: children }));
+}
+export function CopyToClipboardButton() {
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const id = setTimeout(() => setCopied(false), 2000);
+        return () => clearTimeout(id);
+    }, [copied]);
+    return (_jsx(IconButton, { variant: "tertiary", icon: copied ? _jsx(Checkmark, {}) : _jsx(Copy, {}), "aria-label": "Copy code", size: "sm", type: "button", onClick: (e) => {
+            const pre = e.currentTarget.parentElement?.querySelector(".vesper-code-block-pre-wrapper");
+            const content = pre?.textContent || "";
+            navigator.clipboard
+                ?.writeText(content)
+                .then(() => setCopied(true))
+                .catch(() => { });
+        } }));
+}
+//# sourceMappingURL=components.js.map

package/dist/components/code-block/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../../../src/components/code-block/components.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAuB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,GAAG,KAAK,EACc;IACtB,OAAO,CACL,KAAC,UAAU,IACT,EAAE,EAAC,KAAK,EACR,OAAO,EAAC,cAAc,EACtB,SAAS,EAAC,+BAA+B,KACrC,KAAK,YAER,QAAQ,GACE,CACd,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAC,UAAU,EAClB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,KAAC,IAAI,KAAG,gBAC5B,WAAW,EACtB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,MAAM,GAAG,GACP,CAAC,CAAC,aAAa,CAAC,aAAa,EAAE,aAAa,CAC1C,gCAAgC,CACjC,CAAC;YAEJ,MAAM,OAAO,GAAG,GAAG,EAAE,WAAW,IAAI,EAAE,CAAC;YACvC,SAAS,CAAC,SAAS;gBACjB,EAAE,SAAS,CAAC,OAAO,CAAC;iBACnB,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;iBAC3B,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACrB,CAAC,GACD,CACH,CAAC;AACJ,CAAC"}

package/dist/components/code-block/fixtures.d.ts

@@ -0,0 +1,12 @@
+export declare const SAMPLE_CODE_TYPESCRIPT = "/**\n * @module ComponentSystem\n * A comprehensive component system with state management.\n * Demonstrates various TypeScript language features.\n */\n\n// Enum members, numeric constants\nenum Status {\n  Idle = 0,\n  Loading = 1,\n  Success = 2,\n  Error = 0xff,\n}\n\n// Interface with generics, readonly, optional, mapped types\ninterface EventMap {\n  readonly id: string;\n  status: Status;\n  timestamp?: number;\n}\n\n// Conditional types, infer, mapped types, template literal types\ntype ExtractKeys<T> = T extends Record<infer K, unknown> ? K : never;\ntype Nullable<T> = { [P in keyof T]: T[P] | null };\ntype EventName = `on${\"Change\" | \"Reset\"}`;\n\n// Constants with various literal types\nconst MAX_RETRIES = 3;\nconst PI = 3.14159;\nconst HEX_MASK = 0x1f;\nconst BINARY_FLAG = 0b1010;\nconst OCTAL_VAL = 0o755; // [!code --]\nconst SCIENTIFIC = 1.5e10; // [!code --]\nconst GREETING = \"Hello, world!\"; // [!code --]\nconst TEMPLATE = `Status: ${Status.Loading} at ${Date.now()}`;\nconst REGEX_PATTERN = /^[a-z]+\\d{2,4}$/gi; // [!code ++]\n\n// Abstract class with decorator-style pattern\nabstract class BaseComponent<T extends EventMap> {\n  protected state: Nullable<T> | null = null;\n  private static instanceCount = 0;\n\n  constructor(readonly name: string) {\n    BaseComponent.instanceCount++;\n  }\n\n  abstract render(): string;\n\n  // Method with overloads\n  emit(event: \"change\", data: T): void;\n  emit(event: \"reset\"): void;\n  emit(event: string, data?: T): void {\n    if (typeof data !== \"undefined\") {\n      console.log(`[${this.name}] ${event}:`, data);\n    }\n  }\n}\n\n// Class extending abstract, implements pattern\nclass StateManager<S extends Record<string, unknown>>\n  extends BaseComponent<EventMap>\n{\n  #internal: Map<string, S> = new Map();\n\n  render(): string {\n    return `<StateManager instances=${this.#internal.size} />`;\n  }\n\n  async fetchState(url: string): Promise<S | null> {\n    try {\n      const response = await fetch(url);\n      if (!response.ok) {\n        throw new Error(`HTTP ${response.status}`);\n      }\n      const data: S = await response.json();\n      return data;\n    } catch (error: unknown) {\n      if (error instanceof Error) {\n        console.error(error.message);\n      }\n      return null;\n    }\n  }\n\n  *entries(): Generator<[string, S], void, undefined> {\n    for (const [key, value] of this.#internal) {\n      yield [key, value];\n    }\n  }\n}\n\n// Arrow functions, destructuring, spread, rest params\nconst createHandler = <T,>(\n  ...middleware: Array<(ctx: T) => T>\n): ((initial: T) => T) => {\n  return (initial: T): T => {\n    let result = initial;\n    for (const fn of middleware) {\n      result = fn(result);\n    }\n    return result;\n  };\n};\n\n// Switch, type guards, type assertions\nfunction processStatus(input: unknown): string {\n  if (input === null || input === undefined) {\n    return \"empty\";\n  }\n\n  switch (true) {\n    case typeof input === \"number\":\n      return (input as number) > 0 ? \"positive\" : \"non-positive\";\n    case typeof input === \"boolean\":\n      return input ? \"truthy\" : \"falsy\";\n    case Array.isArray(input):\n      return `array[${(input as unknown[]).length}]`;\n    default:\n      return String(input);\n  }\n}\n\n// Async generator, for-await-of\nasync function* streamEvents(\n  count: number,\n): AsyncGenerator<EventMap, void, unknown> {\n  let i = 0;\n  while (i < count) {\n    await new Promise((resolve) => setTimeout(resolve, 100));\n    yield { id: `evt_${i}`, status: Status.Success, timestamp: Date.now() };\n    i++;\n  }\n}\n\n// Usage with instanceof, delete, void, in operator\nexport async function main(): Promise<void> {\n  const manager = new StateManager<{ value: number }>(\"app\");\n\n  if (manager instanceof BaseComponent) {\n    manager.emit(\"change\", {\n      id: \"init\",\n      status: Status.Idle,\n      timestamp: Date.now(),\n    });\n  }\n\n  for await (const event of streamEvents(MAX_RETRIES)) {\n    if (\"timestamp\" in event && event.timestamp !== undefined) {\n      void processStatus(event.status);\n    }\n  }\n\n  const handler = createHandler<{ count: number }>(\n    (ctx) => ({ ...ctx, count: ctx.count + 1 }),\n    (ctx) => ({ ...ctx, count: ctx.count * 2 }),\n  );\n\n  const { count } = handler({ count: 0 });\n  delete (manager as Record<string, unknown>)[\"temp\"];\n  console.log(`Final count: ${count}`);\n}";
+export declare const SAMPLE_CODE_CSS = "/* CSS Component Styles */\n:root {\n  --primary-color: #4eb3d4;\n  --spacing-unit: 0.5rem;\n  --font-stack: \"Inter\", system-ui, sans-serif;\n  --shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n}\n\nbody {\n  font-family: var(--font-stack);\n  font-size: 16px;\n  line-height: 1.6;\n  color: oklch(0.9 0.01 180);\n  background-color: hsl(170, 30%, 5%);\n}\n\n/* Class and ID selectors */\n.container {\n  max-width: 1200px;\n  margin-inline: auto;\n  padding: calc(var(--spacing-unit) * 4);\n}\n\n#main-header {\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\n\n/* Pseudo-classes and pseudo-elements */\na:hover,\na:focus-visible {\n  color: var(--primary-color);\n  text-decoration-thickness: 2px;\n}\n\nbutton:not(:disabled):active {\n  transform: scale(0.98);\n}\n\n.tooltip::after {\n  content: attr(data-tip);\n  position: absolute;\n  opacity: 0;\n  transition: opacity 200ms ease-in-out;\n}\n\n/* Nesting, has(), media queries */\n.card {\n  border-radius: 8px;\n  box-shadow: var(--shadow);\n\n  &:has(img) {\n    overflow: hidden;\n  }\n\n  & > .card-title {\n    font-weight: 700;\n    font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@layer components {\n  .btn-primary {\n    background: linear-gradient(135deg, #4eb3d4, #39c6ac);\n    border: none;\n    padding: 0.75em 1.5em;\n    border-radius: 9999px;\n    color: white;\n    cursor: pointer;\n  }\n}";
+export declare const SAMPLE_CODE_JSON = "{\n  \"name\": \"@vesper/design-system\",\n  \"version\": \"2.4.0\",\n  \"private\": true,\n  \"description\": \"A modern design system with accessible components\",\n  \"keywords\": [\"react\", \"components\", \"design-system\", \"accessibility\"],\n  \"author\": {\n    \"name\": \"Vesper Team\",\n    \"email\": \"team@vesper.dev\",\n    \"url\": \"https://vesper.dev\"\n  },\n  \"license\": \"MIT\",\n  \"engines\": {\n    \"node\": \">=20.0.0\"\n  },\n  \"config\": {\n    \"port\": 5173,\n    \"debug\": false,\n    \"verbose\": true,\n    \"timeout\": null,\n    \"retries\": 3,\n    \"ratio\": 1.618,\n    \"features\": {\n      \"darkMode\": true,\n      \"animations\": true,\n      \"ssr\": false\n    }\n  },\n  \"dependencies\": {\n    \"react\": \"^19.0.0\",\n    \"react-dom\": \"^19.0.0\"\n  }\n}";
+export declare const SAMPLE_CODE_MARKDOWN = "# Design System Documentation\n\n## Getting Started\n\nInstall the package using your preferred **package manager**:\n\n```bash\nyarn add @vesper/design-system\n```\n\n### Basic Usage\n\nImport components _directly_ from the package. Each component supports\n~~legacy props~~ the new **slot-based** API.\n\n> **Note:** All components are fully accessible and follow\n> WAI-ARIA guidelines for keyboard navigation.\n\n## Components\n\n| Component | Status | Version |\n|-----------|--------|---------|\n| Button    | Stable | 2.0.0   |\n| Dialog    | Beta   | 1.9.0   |\n| Tooltip   | Alpha  | 0.5.0   |\n\n### Features\n\n- [x] Fully typed with TypeScript\n- [x] Tree-shakeable exports\n- [ ] CSS-in-JS support\n- [ ] React Server Components\n\n1. Install dependencies\n2. Configure your theme\n3. Import and use components\n\n---\n\nFor more details, visit [the docs](https://vesper.dev/docs) or check the\n![badge](https://img.shields.io/badge/coverage-98%25-green) on GitHub.\n\nUse inline code like `<Button variant=\"primary\" />` in your JSX files.";
+export declare const SAMPLE_CODE_BASH = "#!/usr/bin/env bash\n# Build and deploy script for the design system\n\nset -euo pipefail\n\n# Variables and string interpolation\nPROJECT_ROOT=\"$(cd \"$(dirname \"${BASH_SOURCE[0]}\")\" && pwd)\"\nBUILD_DIR=\"${PROJECT_ROOT}/dist\"\nVERSION=$(node -p \"require('./package.json').version\")\nTIMESTAMP=$(date +%Y%m%d_%H%M%S)\n\n# Function definition\nbuild_package() {\n  local package_name=\"$1\"\n  local outdir=\"${BUILD_DIR}/${package_name}\"\n\n  echo \"Building ${package_name} v${VERSION}...\"\n\n  if [[ -d \"$outdir\" ]]; then\n    rm -rf \"$outdir\"\n  fi\n\n  mkdir -p \"$outdir\"\n\n  # Pipe and redirect\n  npx tsc --project \"./packages/${package_name}/tsconfig.json\" \\\n    2>&1 | tee \"${BUILD_DIR}/build_${TIMESTAMP}.log\"\n\n  local exit_code=$?\n  if (( exit_code != 0 )); then\n    echo \"Error: Build failed with exit code ${exit_code}\" >&2\n    return 1\n  fi\n\n  # Array and glob\n  local -a files=(\"${outdir}\"/*.js)\n  echo \"Generated ${#files[@]} files\"\n}\n\n# Conditional and loop\ndeploy() {\n  local env=\"${1:-staging}\"\n\n  case \"$env\" in\n    production)\n      echo \"Deploying to production...\"\n      ;;\n    staging|dev)\n      echo \"Deploying to ${env}...\"\n      ;;\n    *)\n      echo \"Unknown environment: $env\" >&2\n      exit 1\n      ;;\n  esac\n\n  for pkg in packages/*/; do\n    [[ -f \"${pkg}package.json\" ]] || continue\n    build_package \"$(basename \"$pkg\")\"\n  done\n\n  # Command substitution and arithmetic\n  local total_size=$(du -sh \"$BUILD_DIR\" | cut -f1)\n  local file_count=$(($(find \"$BUILD_DIR\" -type f | wc -l)))\n\n  cat <<EOF\nDeploy Summary\n==============\nEnvironment: $env\nTotal Size:  $total_size\nFile Count:  $file_count\nEOF\n}\n\n# Main execution\ndeploy \"${1:-staging}\"";
+export declare const SAMPLE_CODE_ANSI: string;
+export declare const SAMPLE_CODE_PYTHON = "x_dfb = ttl.make_dataflow_buffer_like(x,\n    shape = (2, 2),\n    block_count = 2)\n\n@ttl.datamovement()\ndef some_read():\n    with x_dfb.reserve() as x_blk:\n        # produce data into x_blk ...\n        # implicit x_dfb.push() at the end of the scope\n\n@ttl.compute()\ndef some_compute():\n    x_blk = x_dfb.wait()\n    # consume data in x_blk ...\n    x_blk.pop() # explicit";
+/**
+ * Simulate an incoming text stream
+ */
+export declare function createTextStream(code: string): ReadableStream<any>;
+//# sourceMappingURL=fixtures.d.ts.map

package/dist/components/code-block/fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixtures.d.ts","sourceRoot":"","sources":["../../../src/components/code-block/fixtures.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,+2IAgKjC,CAAC;AAKH,eAAO,MAAM,eAAe,oyDAkG1B,CAAC;AAGH,eAAO,MAAM,gBAAgB,izBAgC3B,CAAC;AAIH,eAAO,MAAM,oBAAoB,miCA0CwC,CAAC;AAI1E,eAAO,MAAM,gBAAgB,gvDA2EL,CAAC;AAMzB,eAAO,MAAM,gBAAgB,QA0BjB,CAAC;AAEb,eAAO,MAAM,kBAAkB,mYAcJ,CAAC;AAE5B;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,uBAkB5C"}