@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/components/choicebox.d.ts

@@ -0,0 +1,96 @@
+import * as React from "react";
+type ChoiceboxGroupBase = {
+    /** Names the group for assistive technology; drawn above the tiles only with `showLabel`. */
+    label: string;
+    showLabel?: boolean;
+    /** Makes every tile unavailable and writes why under the legend. */
+    disabledReason?: string;
+    name?: string;
+    orientation?: "vertical" | "horizontal";
+    className?: string;
+    children: React.ReactNode;
+};
+export type ChoiceboxGroupProps = ChoiceboxGroupBase & ({
+    type: "radio";
+    required?: boolean;
+    value?: string | null;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+} | {
+    type: "checkbox";
+    required?: undefined;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+});
+/**
+ * A group of larger tiles, each a radio or a checkbox with a title and a description.
+ *
+ * @family Choices
+ * @when "A choice that benefits from a larger tap target plus a description or icon, like a
+ * framework picker, plan comparison, or deployment region with latency."
+ * (https://vercel.com/geist/choicebox) "Single-select for mutually exclusive choices, multi-select
+ * for additive ones." (https://vercel.com/geist/choicebox) "Don’t mix the two within one group."
+ * (https://vercel.com/geist/choicebox) "Cap at 4–6 tiles." (https://vercel.com/geist/choicebox)
+ * Ours: where a Library entry applies, an API key's access level.
+ * @instead "Past that, switch to `Select` or `Combobox` so the page doesn’t scroll for a single
+ * field." (https://vercel.com/geist/choicebox) "For plain text labels with no description, use
+ * `Radio`." (https://vercel.com/geist/choicebox) Ours: Geist's `Radio` is our `RadioGroup`, or a
+ * `Checkbox` for several. Two or three views of one surface are a `SegmentedControl`.
+ * @behaviour "The whole tile is the click and focus target; tapping anywhere inside selects it."
+ * (https://vercel.com/geist/choicebox) "Don’t place nested buttons or links inside a tile that
+ * would steal the click." (https://vercel.com/geist/choicebox) "Selected state shows a check or
+ * filled dot in the corner." (https://vercel.com/geist/choicebox) "The border highlight alone isn’t
+ * enough on low-contrast screens." (https://vercel.com/geist/choicebox) "Disabled tiles need a
+ * Tooltip naming why (`Available on Pro`)." (https://vercel.com/geist/choicebox) "A faded tile with
+ * no reason reads as broken." (https://vercel.com/geist/choicebox) Ours: the group has a `label`
+ * and a `type`, and every tile a `title` and a `description`; a group or a tile without them does
+ * not compile. Tiles share one row and wrap to a column on a narrow screen;
+ * `orientation="vertical"` stacks them. They are 12 px apart, each with 12 px inside and 24 px
+ * between its words and its corner mark, the mark centred against the words. Colour: a selected,
+ * available tile is the one place blue sits on a choice, as a blue border, a blue tint behind the
+ * title and description, blue words, and a blue corner mark; a selected tile that is unavailable
+ * stays grey, never a faded blue. An unselected tile stays neutral and takes a grey fill on hover.
+ * `children` of a tile appear below its tinted row while it is selected. A tile, or the whole
+ * group, is unavailable only with a `disabledReason`, written under the tile's description or the
+ * legend, and only its title greys. A tile may carry `specs`, grey chips under its title, and one
+ * `badge` beside it for the option to prefer (*Recommended*); both are grey `secondary` badges,
+ * because blue marks only the selected tile.
+ * @words "Titles are parallel: one Title Case title plus one sentence-case description per tile,
+ * ending in a period." (https://vercel.com/geist/choicebox) "Don’t restate the title in the
+ * description." (https://vercel.com/geist/choicebox) "The description adds the differentiator
+ * (`$20/mo · 100 GB bandwidth`), not a synonym." (https://vercel.com/geist/choicebox) "Icons are
+ * decorative when paired with a title; if the icon is the only label, give the tile an `aria-label`
+ * naming the choice." (https://vercel.com/geist/choicebox) Ours: the title is a short noun phrase
+ * in sentence case: *Pro trial*; the description is *Free for two weeks.* The label names the
+ * choice: *Plan*.
+ * @access "Tiles render as radios or checkboxes under the hood, so keep them inside a `<fieldset>`
+ * with a `<legend>` so screen readers announce the group." (https://vercel.com/geist/choicebox)
+ * "Arrow keys move within a single-select group, Space toggles in multi-select."
+ * (https://vercel.com/geist/choicebox) "Don’t override those keys with custom handlers."
+ * (https://vercel.com/geist/choicebox) "Color is not the selection signal."
+ * (https://vercel.com/geist/choicebox) "Pair the highlight border with the corner check so
+ * colorblind users still see what’s active." (https://vercel.com/geist/choicebox) Ours: a
+ * `FieldSet` with the label as its legend, which names a group of checkboxes; a `role="radiogroup"`
+ * is labelled by the same legend. Each tile is named by its title and described by its description
+ * and reason. Keyboard focus outlines the whole tile, and the box in its corner draws no outline of
+ * its own.
+ */
+declare function ChoiceboxGroup(props: ChoiceboxGroupProps): React.JSX.Element;
+export type ChoiceboxGroupItemProps = {
+    value: string;
+    title: string;
+    description: string;
+    /** Grey facts under the title that set the options apart: *4 vCPU*, *8 GB*. */
+    specs?: readonly string[];
+    /** One chip beside the title that singles the tile out: *Recommended*. */
+    badge?: string;
+    /** Makes the tile unavailable and writes why under its description. */
+    disabledReason?: string;
+    className?: string;
+    /** Read-only content shown while the tile is selected. */
+    children?: React.ReactNode;
+};
+declare function ChoiceboxGroupItem({ value, title, description, specs, badge, disabledReason, className, children, }: ChoiceboxGroupItemProps): React.JSX.Element;
+export { ChoiceboxGroup, ChoiceboxGroupItem };
+//# sourceMappingURL=choicebox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"choicebox.d.ts","sourceRoot":"","sources":["../../src/components/choicebox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,KAAK,kBAAkB,GAAG;IACxB,6FAA6F;IAC7F,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAClD,CACI;IACE,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CACJ,CAAC;AAQJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,iBAAS,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAwDjD;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,cAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE,uBAAuB,qBA0FzB;AAED,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/choicebox.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";
+import { Badge } from "./badge.js";
+import { Checkbox } from "./checkbox.js";
+import { FieldDescription, FieldLegend, FieldSet } from "./field.js";
+import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+import { cn } from "../lib/utils.js";
+const ChoiceboxSelectionContext = React.createContext(null);
+function asList(value) {
+    if (value === undefined)
+        return undefined;
+    if (value === null)
+        return [];
+    return Array.isArray(value) ? value : [value];
+}
+/**
+ * A group of larger tiles, each a radio or a checkbox with a title and a description.
+ *
+ * @family Choices
+ * @when "A choice that benefits from a larger tap target plus a description or icon, like a
+ * framework picker, plan comparison, or deployment region with latency."
+ * (https://vercel.com/geist/choicebox) "Single-select for mutually exclusive choices, multi-select
+ * for additive ones." (https://vercel.com/geist/choicebox) "Don’t mix the two within one group."
+ * (https://vercel.com/geist/choicebox) "Cap at 4–6 tiles." (https://vercel.com/geist/choicebox)
+ * Ours: where a Library entry applies, an API key's access level.
+ * @instead "Past that, switch to `Select` or `Combobox` so the page doesn’t scroll for a single
+ * field." (https://vercel.com/geist/choicebox) "For plain text labels with no description, use
+ * `Radio`." (https://vercel.com/geist/choicebox) Ours: Geist's `Radio` is our `RadioGroup`, or a
+ * `Checkbox` for several. Two or three views of one surface are a `SegmentedControl`.
+ * @behaviour "The whole tile is the click and focus target; tapping anywhere inside selects it."
+ * (https://vercel.com/geist/choicebox) "Don’t place nested buttons or links inside a tile that
+ * would steal the click." (https://vercel.com/geist/choicebox) "Selected state shows a check or
+ * filled dot in the corner." (https://vercel.com/geist/choicebox) "The border highlight alone isn’t
+ * enough on low-contrast screens." (https://vercel.com/geist/choicebox) "Disabled tiles need a
+ * Tooltip naming why (`Available on Pro`)." (https://vercel.com/geist/choicebox) "A faded tile with
+ * no reason reads as broken." (https://vercel.com/geist/choicebox) Ours: the group has a `label`
+ * and a `type`, and every tile a `title` and a `description`; a group or a tile without them does
+ * not compile. Tiles share one row and wrap to a column on a narrow screen;
+ * `orientation="vertical"` stacks them. They are 12 px apart, each with 12 px inside and 24 px
+ * between its words and its corner mark, the mark centred against the words. Colour: a selected,
+ * available tile is the one place blue sits on a choice, as a blue border, a blue tint behind the
+ * title and description, blue words, and a blue corner mark; a selected tile that is unavailable
+ * stays grey, never a faded blue. An unselected tile stays neutral and takes a grey fill on hover.
+ * `children` of a tile appear below its tinted row while it is selected. A tile, or the whole
+ * group, is unavailable only with a `disabledReason`, written under the tile's description or the
+ * legend, and only its title greys. A tile may carry `specs`, grey chips under its title, and one
+ * `badge` beside it for the option to prefer (*Recommended*); both are grey `secondary` badges,
+ * because blue marks only the selected tile.
+ * @words "Titles are parallel: one Title Case title plus one sentence-case description per tile,
+ * ending in a period." (https://vercel.com/geist/choicebox) "Don’t restate the title in the
+ * description." (https://vercel.com/geist/choicebox) "The description adds the differentiator
+ * (`$20/mo · 100 GB bandwidth`), not a synonym." (https://vercel.com/geist/choicebox) "Icons are
+ * decorative when paired with a title; if the icon is the only label, give the tile an `aria-label`
+ * naming the choice." (https://vercel.com/geist/choicebox) Ours: the title is a short noun phrase
+ * in sentence case: *Pro trial*; the description is *Free for two weeks.* The label names the
+ * choice: *Plan*.
+ * @access "Tiles render as radios or checkboxes under the hood, so keep them inside a `<fieldset>`
+ * with a `<legend>` so screen readers announce the group." (https://vercel.com/geist/choicebox)
+ * "Arrow keys move within a single-select group, Space toggles in multi-select."
+ * (https://vercel.com/geist/choicebox) "Don’t override those keys with custom handlers."
+ * (https://vercel.com/geist/choicebox) "Color is not the selection signal."
+ * (https://vercel.com/geist/choicebox) "Pair the highlight border with the corner check so
+ * colorblind users still see what’s active." (https://vercel.com/geist/choicebox) Ours: a
+ * `FieldSet` with the label as its legend, which names a group of checkboxes; a `role="radiogroup"`
+ * is labelled by the same legend. Each tile is named by its title and described by its description
+ * and reason. Keyboard focus outlines the whole tile, and the box in its corner draws no outline of
+ * its own.
+ */
+function ChoiceboxGroup(props) {
+    const legendId = React.useId();
+    const reasonId = React.useId();
+    const { label, showLabel = false, disabledReason, name, orientation = "horizontal", className, } = props;
+    const groupReasonId = disabledReason ? reasonId : undefined;
+    const [internal, setInternal] = React.useState(asList(props.defaultValue) ?? []);
+    const selected = asList(props.value) ?? internal;
+    const list = cn("grid gap-3", orientation === "horizontal" && "sm:auto-cols-fr sm:grid-flow-col");
+    return (_jsx(ChoiceboxSelectionContext.Provider, { value: { type: props.type, name, selected, groupReasonId }, children: _jsxs(FieldSet, { className: className, "data-slot": "choicebox-group", children: [_jsx(FieldLegend, { className: showLabel ? "mb-2" : "sr-only", id: legendId, variant: "label", children: label }), disabledReason ? (_jsx(FieldDescription, { id: reasonId, children: disabledReason })) : null, props.type === "radio" ? (_jsx(RadioGroup, { "aria-labelledby": legendId, className: list, disabled: groupReasonId !== undefined, name: name, onValueChange: (next) => {
+                        setInternal([next]);
+                        props.onValueChange?.(next);
+                    }, required: props.required, value: selected[0] ?? null, children: props.children })) : (_jsx(CheckboxGroupPrimitive, { className: list, disabled: groupReasonId !== undefined, onValueChange: (next) => {
+                        setInternal(next);
+                        props.onValueChange?.(next);
+                    }, value: selected, children: props.children }))] }) }));
+}
+function ChoiceboxGroupItem({ value, title, description, specs, badge, disabledReason, className, children, }) {
+    const group = React.useContext(ChoiceboxSelectionContext);
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+    const specsId = React.useId();
+    const badgeId = React.useId();
+    const reasonId = React.useId();
+    if (group === null) {
+        throw new Error("ChoiceboxGroupItem belongs inside a ChoiceboxGroup");
+    }
+    const control = {
+        "aria-describedby": [
+            descriptionId,
+            specs?.length ? specsId : undefined,
+            badge ? badgeId : undefined,
+            disabledReason ? reasonId : undefined,
+            group.groupReasonId,
+        ]
+            .filter((id) => id !== undefined)
+            .join(" "),
+        "aria-labelledby": titleId,
+        disabled: Boolean(disabledReason) || group.groupReasonId !== undefined,
+        value,
+    };
+    return (_jsxs("div", { className: cn("group/choicebox flex flex-col overflow-hidden rounded-sm border bg-background nc-transition-paint not-has-data-disabled:hover:bg-accent has-focus-visible:nc-focus-outline has-focus-visible:outline-ring has-data-checked:not-has-data-disabled:border-info", className), "data-slot": "choicebox-item", children: [_jsxs("label", { className: "flex cursor-pointer items-center justify-between gap-6 p-3 nc-transition-paint has-data-checked:not-has-data-disabled:bg-info-soft has-data-disabled:cursor-not-allowed", children: [_jsxs("span", { className: "flex min-w-0 flex-col gap-1", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium group-has-data-checked/choicebox:not-group-has-data-disabled/choicebox:text-info-soft-foreground group-has-data-disabled/choicebox:text-muted-foreground", id: titleId, children: title }), badge ? (_jsx(Badge, { id: badgeId, size: "sm", variant: "secondary", children: badge })) : null] }), specs?.length ? (_jsx("span", { className: "flex flex-wrap gap-1", id: specsId, children: specs.map((spec) => (_jsx(Badge, { size: "sm", variant: "secondary", children: spec }, spec))) })) : null, _jsx("span", { className: "text-sm text-muted-foreground group-has-data-checked/choicebox:not-group-has-data-disabled/choicebox:text-info-soft-foreground", id: descriptionId, children: description }), disabledReason ? (_jsx("span", { className: "text-sm text-muted-foreground", id: reasonId, children: disabledReason })) : null] }), group.type === "radio" ? (_jsx(RadioGroupItem, { ...control, className: "outline-none data-checked:not-data-disabled:border-info-soft-foreground data-checked:not-data-disabled:text-info-soft-foreground" })) : (_jsx(Checkbox, { ...control, className: "outline-none data-checked:not-data-disabled:border-info-soft-foreground data-checked:not-data-disabled:bg-info-soft-foreground data-checked:not-data-disabled:text-info-soft", name: group.name }))] }), children && group.selected.includes(value) ? (_jsx("div", { className: "p-2", "data-slot": "choicebox-content", children: children })) : null] }));
+}
+export { ChoiceboxGroup, ChoiceboxGroupItem };

package/dist/components/clearable-input.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { type FieldName } from "../internal/field-frame.js";
+import type { FieldSize } from "../internal/input-box.js";
+import { type KbdProps } from "./kbd.js";
+/** The keys of a shortcut as `Kbd` takes them; `ClearableInput` draws them at the size of a field. */
+export type ClearableInputShortcut = KbdProps extends infer Keys ? Keys extends unknown ? Omit<Keys, "size"> : never : never;
+export type ClearableInputProps = Omit<React.ComponentProps<"input">, "defaultValue" | "onChange" | "prefix" | "ref" | "size" | "value"> & {
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Runs after the value is emptied, so the caller can reset what depends on it. */
+    onClear?: () => void;
+    /** The clear button's name, in the product's words: "Clear search". */
+    clearLabel: string;
+    size?: FieldSize;
+    /** A mark before the text. Decorative; the input keeps its own name. */
+    prefix?: React.ReactNode;
+    /** The keys that open the command palette, shown while the box is empty. Esc replaces them once it has text. */
+    shortcut?: ClearableInputShortcut;
+    /** A query is running; the results stay on screen. */
+    loading?: boolean;
+    /** The message under the box, in the product's words; it also marks the box invalid. */
+    error?: string;
+} & FieldName;
+/**
+ * A text box that empties itself: a clear button once it has text, and Escape.
+ *
+ * @family Inputs
+ * @when "Text input with a clear button that resets the value on Escape."
+ * (https://vercel.com/geist/clearable-input) Ours: a single-line value a person may want to empty
+ * in one move: a filter, a search, a reference they paste and replace.
+ * @instead A collection's search is `CollectionSearch`. A value that is never emptied is `Input`. A
+ * box with a fixed prefix or suffix is `Input`; one with a copy button is `InputGroup`.
+ * @behaviour Same ring, halo, hover, disabled and error as `Input`; colour sits where it does there
+ * and nowhere else. The clear button shows only while the box has text and is enabled, as an Esc
+ * key cap flush against the end of the box that darkens on hover and keeps a transparent fill (a
+ * close mark on a touch screen, which has no Escape). Pressing it, or Escape inside the box,
+ * empties the value, calls `onClear` and puts focus back in the box. Escape on an empty box does
+ * nothing here, so it closes the dialog or drawer around it. "Automatically clears the input if
+ * escape is pressed." (https://vercel.com/geist/input) "Displays the <kbd>⌘</kbd> <kbd>K</kbd>
+ * shortcut to indicate that the input supports a command palette." (https://vercel.com/geist/input)
+ * "Transitions to showing <kbd>Esc</kbd> when the field is dirty." (https://vercel.com/geist/input)
+ * Ours: the `shortcut` keys are one cap per key (*⌘* then *K*, 4 px apart, 10 px from the edge),
+ * hidden on a touch screen. `loading` marks the box busy and, after a second, draws the waiting
+ * line along its bottom edge; nothing spins and the results stay. `label` and `error` draw the
+ * `Field` parts around the box as on `Input`, and a string `label` requires `id`; a box with no
+ * name does not compile. `className` lands on the box.
+ * @words The clear button is named for what it empties (*Clear search*, *Clear filter*).
+ * "Placeholders show an example value (`my-awesome-project`, `example.com`), never instructions
+ * like `Enter your project name`." (https://vercel.com/geist/input) Ours: the placeholder may also
+ * be the scope.
+ * @access A visible `label` or `aria-label` names the box. The clear button is a named button,
+ * `aria-keyshortcuts` Escape; the prefix and the keys are hidden from assistive technology.
+ * `aria-busy` while `loading`.
+ */
+declare function ClearableInput({ className, value, onValueChange, onClear, clearLabel, size, prefix, shortcut, loading, label, error, disabled, onKeyDown, ...props }: ClearableInputProps): React.JSX.Element;
+export { ClearableInput };
+//# sourceMappingURL=clearable-input.d.ts.map

package/dist/components/clearable-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clearable-input.d.ts","sourceRoot":"","sources":["../../src/components/clearable-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGtD,sGAAsG;AACtG,MAAM,MAAM,sBAAsB,GAAG,QAAQ,SAAS,MAAM,IAAI,GAC5D,IAAI,SAAS,OAAO,GAClB,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,GAClB,KAAK,GACP,KAAK,CAAC;AAEV,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,cAAc,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAClE,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gHAAgH;IAChH,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAAC;AAEd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAK,EACL,aAAa,EACb,OAAO,EACP,UAAU,EACV,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAe,EACf,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAyErB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/clearable-input.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupControl, } from "./input-group.js";
+import { FieldFrame } from "../internal/field-frame.js";
+import { Kbd } from "./kbd.js";
+import { WaitingLine } from "./waiting-line.js";
+/**
+ * A text box that empties itself: a clear button once it has text, and Escape.
+ *
+ * @family Inputs
+ * @when "Text input with a clear button that resets the value on Escape."
+ * (https://vercel.com/geist/clearable-input) Ours: a single-line value a person may want to empty
+ * in one move: a filter, a search, a reference they paste and replace.
+ * @instead A collection's search is `CollectionSearch`. A value that is never emptied is `Input`. A
+ * box with a fixed prefix or suffix is `Input`; one with a copy button is `InputGroup`.
+ * @behaviour Same ring, halo, hover, disabled and error as `Input`; colour sits where it does there
+ * and nowhere else. The clear button shows only while the box has text and is enabled, as an Esc
+ * key cap flush against the end of the box that darkens on hover and keeps a transparent fill (a
+ * close mark on a touch screen, which has no Escape). Pressing it, or Escape inside the box,
+ * empties the value, calls `onClear` and puts focus back in the box. Escape on an empty box does
+ * nothing here, so it closes the dialog or drawer around it. "Automatically clears the input if
+ * escape is pressed." (https://vercel.com/geist/input) "Displays the <kbd>⌘</kbd> <kbd>K</kbd>
+ * shortcut to indicate that the input supports a command palette." (https://vercel.com/geist/input)
+ * "Transitions to showing <kbd>Esc</kbd> when the field is dirty." (https://vercel.com/geist/input)
+ * Ours: the `shortcut` keys are one cap per key (*⌘* then *K*, 4 px apart, 10 px from the edge),
+ * hidden on a touch screen. `loading` marks the box busy and, after a second, draws the waiting
+ * line along its bottom edge; nothing spins and the results stay. `label` and `error` draw the
+ * `Field` parts around the box as on `Input`, and a string `label` requires `id`; a box with no
+ * name does not compile. `className` lands on the box.
+ * @words The clear button is named for what it empties (*Clear search*, *Clear filter*).
+ * "Placeholders show an example value (`my-awesome-project`, `example.com`), never instructions
+ * like `Enter your project name`." (https://vercel.com/geist/input) Ours: the placeholder may also
+ * be the scope.
+ * @access A visible `label` or `aria-label` names the box. The clear button is a named button,
+ * `aria-keyshortcuts` Escape; the prefix and the keys are hidden from assistive technology.
+ * `aria-busy` while `loading`.
+ */
+function ClearableInput({ className, value, onValueChange, onClear, clearLabel, size, prefix, shortcut, loading = false, label, error, disabled, onKeyDown, ...props }) {
+    const input = React.useRef(null);
+    const clearable = value !== "" && !disabled;
+    const shortcutHint = shortcut ? (_jsxs(InputGroupAddon, { align: "inline-end", "aria-hidden": "true", className: "gap-1 pr-2.5 pl-3 pointer-coarse:hidden", children: [shortcut.meta ? _jsx(Kbd, { size: "sm", meta: true }) : null, shortcut.shift ? _jsx(Kbd, { size: "sm", shift: true }) : null, shortcut.alt ? _jsx(Kbd, { size: "sm", alt: true }) : null, shortcut.ctrl ? _jsx(Kbd, { size: "sm", ctrl: true }) : null, shortcut.children ? _jsx(Kbd, { size: "sm", children: shortcut.children }) : null] })) : null;
+    function clear() {
+        input.current?.focus();
+        onValueChange("");
+        onClear?.();
+    }
+    return (_jsx(FieldFrame, { label: label, error: error, size: size, control: props, children: (aria) => (_jsxs(InputGroup, { size: size, className: className, children: [prefix ? _jsx(InputGroupAddon, { "aria-hidden": "true", children: prefix }) : null, _jsx(InputGroupControl, { ref: input, "aria-busy": loading || undefined, className: "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none", disabled: disabled, onChange: (event) => onValueChange(event.target.value), onKeyDown: (event) => {
+                        onKeyDown?.(event);
+                        if (event.key !== "Escape" || event.defaultPrevented || !clearable)
+                            return;
+                        event.preventDefault();
+                        event.stopPropagation();
+                        clear();
+                    }, value: value, ...props, ...aria }), clearable ? (_jsx(InputGroupAddon, { align: "inline-end", className: "has-[>button]:pl-3", children: _jsxs(InputGroupButton, { "aria-keyshortcuts": "Escape", "aria-label": clearLabel, onClick: clear, size: "icon", children: [_jsx(Kbd, { "aria-hidden": "true", className: "pointer-coarse:hidden group-hover/button:text-foreground", size: "sm", children: "Esc" }), _jsx(XIcon, { "aria-hidden": "true", className: "hidden pointer-coarse:block" })] }) })) : (shortcutHint), loading ? (_jsx(WaitingLine, { className: "absolute inset-x-1.5 bottom-px w-auto", decorative: true })) : null] })) }));
+}
+export { ClearableInput };

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

@@ -1,23 +1,83 @@
 import { type CopyButtonProps } from "./copy-button.js";
+type MarkedState = "highlighted" | "added" | "removed";
+type LanguageSwitch = {
+    label: string;
+    options: readonly {
+        label: string;
+        value: string;
+    }[];
+    value: string;
+    onChange: (value: string) => void;
+};
+type LanguageControl = {
+    switcher?: LanguageSwitch | undefined;
+    tabs?: undefined;
+} | {
+    tabs?: LanguageSwitch | undefined;
+    switcher?: undefined;
+};
+/** A block that marks lines says each mark in words; a block that marks none has nothing to say. */
+type MarkedLines = {
+    highlightedLinesNumbers?: readonly number[] | undefined;
+    addedLinesNumbers?: readonly number[] | undefined;
+    removedLinesNumbers?: readonly number[] | undefined;
+    lineLabel: (line: number, state: MarkedState) => string;
+} | {
+    highlightedLinesNumbers?: undefined;
+    addedLinesNumbers?: undefined;
+    removedLinesNumbers?: undefined;
+    lineLabel?: undefined;
+};
+type CodeBlockProps = {
+    code: string;
+    label: string;
+    filename?: string | undefined;
+    className?: string | undefined;
+    hideLineNumbers?: boolean | undefined;
+} & MarkedLines & LanguageControl & Pick<CopyButtonProps, "copyLabel" | "copiedLabel" | "copyFailedLabel">;
 /**
- * Several lines of exact text to read or copy.
+ * Several lines of exact text to read, copy or point at line by line.
  *
  * @family Data
- * @when Several lines a person reads or copies exactly: a configuration, static JSON, a command
- * sequence.
- * @instead One short value to copy is a read-only input with a `CopyButton`. A before and after is
- * `FileDiff`. Code in a conversation is her `MarkdownText`.
- * @behaviour Read-only, no wrapping, scrolls in both directions up to 384 px. Copy takes the exact
- * text, says Copied only on success and says when it failed. No syntax colour, no line numbers.
- * @words The real filename, or an honest label. The language as its common name: *JSON*. Copy,
- * Copied, Couldn't copy.
- * @access The text area is named by its `label`; the copy button names its target (*Copy mcp.json*)
- * and announces the result.
+ * @when “Use `<CodeBlock>` for multi-line, syntax-highlighted source the reader will scan or paste.” (https://vercel.com/geist/code-block)
+ * Ours: several lines a person reads or copies exactly: a configuration, static JSON, a command
+ * sequence, a file with the lines under discussion marked. There is no syntax colour yet.
+ * @instead “For a single inline token (env var, function name, file path), use `Inline Code`.” (https://vercel.com/geist/code-block)
+ * “Pick `Snippet` for a copy-to-clipboard shell command or one-line key reveal; it ships with the prompt glyph and copy affordance built in.” (https://vercel.com/geist/code-block)
+ * Ours: a token inside a sentence is inline code. One short value to copy is `TextWithCopyButton`. A
+ * before and after to compute is `FileDiff`. Code in a conversation is Nadia's `MarkdownText`.
+ * @behaviour “Highlight only the lines under discussion. A block where every line is highlighted reads the same as no highlight at all.” (https://vercel.com/geist/code-block)
+ * “Mark added or removed lines with the `diff` syntax or the dedicated added/removed props. Faking them with `// added` comments breaks copy-paste.” (https://vercel.com/geist/code-block)
+ * “Show the filename header when the snippet has a paste destination (`app/page.tsx`, `vercel.json`). Omit it for ephemeral examples.” (https://vercel.com/geist/code-block)
+ * “You can link to lines. Just press on any line number.” (https://vercel.com/geist/code-block)
+ * “Use the `tabs` prop for a tabbed language switcher instead of the default select.” (https://vercel.com/geist/code-block)
+ * “Always pass a `language`/`syntax` (`tsx`, `bash`, `json`, `diff`). Highlighting is the primary reason to choose `<CodeBlock>` over a plain `<pre>`.” (https://vercel.com/geist/code-block)
+ * Ours: read-only, no wrapping, 20 px rows, each line numbered with a number that links to it. Colour
+ * sits on the row and its 2 px bar at the start, never on the text or the numbers:
+ * `highlightedLinesNumbers` (info), `addedLinesNumbers` (success) and `removedLinesNumbers`
+ * (destructive); a line carries one mark, and the line a link points at takes the warning fill. A
+ * mark is fill and bar with no glyph, announced by the line's name. `hideLineNumbers` is for a few
+ * lines where numbers add nothing. The header (40 px, muted fill, the file's icon and name) exists
+ * only with a `filename`, a `switcher` or `tabs`. `tabs` draw as a row above the header, a
+ * `switcher` (a select) sits in the header before the copy button; never both. In the header the
+ * filename and the copy mark are muted; without a header the copy button floats 15 px from the top
+ * right corner in the full text colour and shows while the block is hovered or something in it has
+ * focus (always on a touch screen). A line number links to its line for a pointer and is out of the
+ * tab order. The file icon follows the filename's extension. There is no syntax colour and no
+ * `language` until a highlighter is adopted, and no Open in v0 action.
+ * @words “Snippets stay runnable. Don’t paraphrase real code into pseudo-syntax, and don’t prepend `$` to shell commands. `<Snippet>` already renders the prompt, so `text="$ vercel deploy"` doubles to `$ $ vercel deploy`.” (https://vercel.com/geist/code-block)
+ * “Keep prose around the block in sentence case and put backticks around CLI flags inline (`` `--prebuilt` ``).” (https://vercel.com/geist/code-block)
+ * Ours: the real filename, or none. A switcher's `label` names what it switches (*Language*), and
+ * its options are the languages by their common names (*JSON*). `label` names the code (*MCP
+ * configuration*). `lineLabel` says a marked line and its mark in the catalogue's words (*Line 3,
+ * added*, *Riga 3, aggiunta*); it is only called for a highlighted, added or removed line.
+ * `copyLabel` names what is copied (*Copy mcp.json*); `copiedLabel` (*Copied*); `copyFailedLabel`
+ * (*Couldn't copy*). `label` and the three copy words are required, and `lineLabel` with any marked line.
+ * @access Ours: the code is a focusable, scrollable region named by `label`. Line numbers are hidden from
+ * assistive technology and are not tab stops; a highlighted, added or removed line carries
+ * `lineLabel`'s words as hidden text, with the numbers shown or not. The copy button names its
+ * target and announces the result.
  */
-export declare function CodeBlock({ code, label, filename, language, copyLabel, copiedLabel, copyFailedLabel, }: {
-    code: string;
-    label: string;
-    filename?: string;
-    language?: string;
-} & Pick<CopyButtonProps, "copyLabel" | "copiedLabel" | "copyFailedLabel">): import("react").JSX.Element;
+declare function CodeBlock({ addedLinesNumbers, className, code, copiedLabel, copyFailedLabel, copyLabel, filename, hideLineNumbers, highlightedLinesNumbers, label, lineLabel, removedLinesNumbers, switcher, tabs, }: CodeBlockProps): import("react").JSX.Element;
+export { CodeBlock, type CodeBlockProps };
 //# sourceMappingURL=code-block.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../src/components/code-block.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAQ5E;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,GAChB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAC,+BAiCzE"}
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../src/components/code-block.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAc5E,KAAK,WAAW,GAAG,aAAa,GAAG,OAAO,GAAG,SAAS,CAAC;AAGvD,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,eAAe,GAChB;IAAE,QAAQ,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GAC3D;IAAE,IAAI,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAEhE,oGAAoG;AACpG,KAAK,WAAW,GACZ;IACE,uBAAuB,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACxD,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAClD,mBAAmB,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACpD,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,KAAK,MAAM,CAAC;CACzD,GACD;IACE,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEN,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACvC,GAAG,WAAW,GACb,eAAe,GACf,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAC,CAAC;AAyDzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,iBAAS,SAAS,CAAC,EACjB,iBAAiB,EACjB,SAAS,EACT,IAAI,EACJ,WAAW,EACX,eAAe,EACf,SAAS,EACT,QAAQ,EACR,eAAuB,EACvB,uBAAuB,EACvB,KAAK,EACL,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,IAAI,GACL,EAAE,cAAc,+BA4FhB;AAED,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}

package/dist/components/code-block.js

@@ -1,22 +1,92 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
 import { CopyButton } from "./copy-button.js";
-import { InputGroup, InputGroupAddon, InputGroupText, InputGroupTextarea, } from "./input-group.js";
+import { FileTypeIcon } from "./file-type-icon.js";
+import { MiddleTruncate } from "./middle-truncate.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "./select.js";
+import { Tabs, TabsList, TabsTrigger } from "./tabs.js";
+import { cn } from "../lib/utils.js";
+const ROW = {
+    plain: "",
+    highlighted: "bg-info-soft shadow-[inset_2px_0_0_0_var(--info)]",
+    added: "bg-success-soft shadow-[inset_2px_0_0_0_var(--success)]",
+    removed: "bg-destructive-soft shadow-[inset_2px_0_0_0_var(--destructive)]",
+};
+const LINKED_ROW = "target:bg-warning-soft target:shadow-[inset_2px_0_0_0_var(--warning-soft-foreground)]";
+const SHOWN_ON_HOVER = "nc-transition-opacity [@media(hover:hover)_and_(pointer:fine)]:opacity-0 group-hover/code-block:opacity-100 group-focus-within/code-block:opacity-100";
+function LanguageSwitcher({ label, onChange, options, value }) {
+    return (_jsxs(Select, { value: value, onValueChange: (next) => {
+            if (next !== null)
+                onChange(next);
+        }, children: [_jsx(SelectTrigger, { "aria-label": label, size: "sm", className: "w-auto bg-transparent pr-2 pl-2 text-label-sm text-muted-foreground shadow-none hover:bg-accent focus-visible:shadow-[0_0_0_2px_var(--ring)] data-popup-open:bg-accent [&_svg]:size-4", children: _jsx(SelectValue, { children: options.find((option) => option.value === value)?.label }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: options.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) }) })] }));
+}
+function LanguageTabs({ label, onChange, options, value }) {
+    return (_jsx(Tabs, { value: value, onValueChange: (next) => onChange(String(next)), className: "min-w-0", children: _jsx(TabsList, { "aria-label": label, children: options.map((option) => (_jsx(TabsTrigger, { value: option.value, children: option.label }, option.value))) }) }));
+}
 /**
- * Several lines of exact text to read or copy.
+ * Several lines of exact text to read, copy or point at line by line.
  *
  * @family Data
- * @when Several lines a person reads or copies exactly: a configuration, static JSON, a command
- * sequence.
- * @instead One short value to copy is a read-only input with a `CopyButton`. A before and after is
- * `FileDiff`. Code in a conversation is her `MarkdownText`.
- * @behaviour Read-only, no wrapping, scrolls in both directions up to 384 px. Copy takes the exact
- * text, says Copied only on success and says when it failed. No syntax colour, no line numbers.
- * @words The real filename, or an honest label. The language as its common name: *JSON*. Copy,
- * Copied, Couldn't copy.
- * @access The text area is named by its `label`; the copy button names its target (*Copy mcp.json*)
- * and announces the result.
+ * @when “Use `<CodeBlock>` for multi-line, syntax-highlighted source the reader will scan or paste.” (https://vercel.com/geist/code-block)
+ * Ours: several lines a person reads or copies exactly: a configuration, static JSON, a command
+ * sequence, a file with the lines under discussion marked. There is no syntax colour yet.
+ * @instead “For a single inline token (env var, function name, file path), use `Inline Code`.” (https://vercel.com/geist/code-block)
+ * “Pick `Snippet` for a copy-to-clipboard shell command or one-line key reveal; it ships with the prompt glyph and copy affordance built in.” (https://vercel.com/geist/code-block)
+ * Ours: a token inside a sentence is inline code. One short value to copy is `TextWithCopyButton`. A
+ * before and after to compute is `FileDiff`. Code in a conversation is Nadia's `MarkdownText`.
+ * @behaviour “Highlight only the lines under discussion. A block where every line is highlighted reads the same as no highlight at all.” (https://vercel.com/geist/code-block)
+ * “Mark added or removed lines with the `diff` syntax or the dedicated added/removed props. Faking them with `// added` comments breaks copy-paste.” (https://vercel.com/geist/code-block)
+ * “Show the filename header when the snippet has a paste destination (`app/page.tsx`, `vercel.json`). Omit it for ephemeral examples.” (https://vercel.com/geist/code-block)
+ * “You can link to lines. Just press on any line number.” (https://vercel.com/geist/code-block)
+ * “Use the `tabs` prop for a tabbed language switcher instead of the default select.” (https://vercel.com/geist/code-block)
+ * “Always pass a `language`/`syntax` (`tsx`, `bash`, `json`, `diff`). Highlighting is the primary reason to choose `<CodeBlock>` over a plain `<pre>`.” (https://vercel.com/geist/code-block)
+ * Ours: read-only, no wrapping, 20 px rows, each line numbered with a number that links to it. Colour
+ * sits on the row and its 2 px bar at the start, never on the text or the numbers:
+ * `highlightedLinesNumbers` (info), `addedLinesNumbers` (success) and `removedLinesNumbers`
+ * (destructive); a line carries one mark, and the line a link points at takes the warning fill. A
+ * mark is fill and bar with no glyph, announced by the line's name. `hideLineNumbers` is for a few
+ * lines where numbers add nothing. The header (40 px, muted fill, the file's icon and name) exists
+ * only with a `filename`, a `switcher` or `tabs`. `tabs` draw as a row above the header, a
+ * `switcher` (a select) sits in the header before the copy button; never both. In the header the
+ * filename and the copy mark are muted; without a header the copy button floats 15 px from the top
+ * right corner in the full text colour and shows while the block is hovered or something in it has
+ * focus (always on a touch screen). A line number links to its line for a pointer and is out of the
+ * tab order. The file icon follows the filename's extension. There is no syntax colour and no
+ * `language` until a highlighter is adopted, and no Open in v0 action.
+ * @words “Snippets stay runnable. Don’t paraphrase real code into pseudo-syntax, and don’t prepend `$` to shell commands. `<Snippet>` already renders the prompt, so `text="$ vercel deploy"` doubles to `$ $ vercel deploy`.” (https://vercel.com/geist/code-block)
+ * “Keep prose around the block in sentence case and put backticks around CLI flags inline (`` `--prebuilt` ``).” (https://vercel.com/geist/code-block)
+ * Ours: the real filename, or none. A switcher's `label` names what it switches (*Language*), and
+ * its options are the languages by their common names (*JSON*). `label` names the code (*MCP
+ * configuration*). `lineLabel` says a marked line and its mark in the catalogue's words (*Line 3,
+ * added*, *Riga 3, aggiunta*); it is only called for a highlighted, added or removed line.
+ * `copyLabel` names what is copied (*Copy mcp.json*); `copiedLabel` (*Copied*); `copyFailedLabel`
+ * (*Couldn't copy*). `label` and the three copy words are required, and `lineLabel` with any marked line.
+ * @access Ours: the code is a focusable, scrollable region named by `label`. Line numbers are hidden from
+ * assistive technology and are not tab stops; a highlighted, added or removed line carries
+ * `lineLabel`'s words as hidden text, with the numbers shown or not. The copy button names its
+ * target and announces the result.
  */
-export function CodeBlock({ code, label, filename, language, copyLabel, copiedLabel, copyFailedLabel, }) {
-    return (_jsxs(InputGroup, { children: [_jsx(InputGroupTextarea, { "aria-label": label, value: code, readOnly: true, wrap: "off", spellCheck: false, className: "max-h-96 min-h-0 overflow-auto font-code text-code md:text-code" }), _jsxs(InputGroupAddon, { align: "block-start", className: "justify-between border-b border-border", children: [_jsx(InputGroupText, { title: filename ?? label, className: "min-w-0 truncate font-label-mono text-label-mono", children: filename ?? label }), _jsx(CopyButton, { value: code, copyLabel: copyLabel, copiedLabel: copiedLabel, copyFailedLabel: copyFailedLabel, size: "icon-xs" })] }), language ? (_jsx(InputGroupAddon, { align: "block-end", className: "border-t border-border", children: _jsx(InputGroupText, { children: language }) })) : null] }));
+function CodeBlock({ addedLinesNumbers, className, code, copiedLabel, copyFailedLabel, copyLabel, filename, hideLineNumbers = false, highlightedLinesNumbers, label, lineLabel, removedLinesNumbers, switcher, tabs, }) {
+    const id = useId();
+    const lines = (code.endsWith("\n") ? code.slice(0, -1) : code).split("\n");
+    const added = new Set(addedLinesNumbers);
+    const removed = new Set(removedLinesNumbers);
+    const highlighted = new Set(highlightedLinesNumbers);
+    const gutterWidth = `calc(${Math.max(String(lines.length).length, 2)}ch + 1rem)`;
+    const hasHeader = filename !== undefined || switcher !== undefined || tabs !== undefined;
+    const copyButton = (_jsx(CopyButton, { value: code, copyLabel: copyLabel, copiedLabel: copiedLabel, copyFailedLabel: copyFailedLabel, size: "icon-sm" }));
+    return (_jsxs("div", { "data-slot": "code-block", className: cn("flex min-w-0 flex-col gap-3", className), children: [tabs ? _jsx(LanguageTabs, { ...tabs }) : null, _jsxs("div", { className: "group/code-block relative min-w-0 overflow-hidden rounded-md border border-border bg-background", children: [hasHeader ? (_jsxs("div", { className: "flex h-10 items-center gap-1 border-b border-border bg-muted pr-0.75 pl-4 text-label-sm text-muted-foreground", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: filename === undefined ? null : (_jsxs(_Fragment, { children: [_jsx(FileTypeIcon, { path: filename }), _jsx(MiddleTruncate, { value: filename })] })) }), switcher ? _jsx(LanguageSwitcher, { ...switcher }) : null, copyButton] })) : (_jsx("div", { className: cn("absolute top-3.75 right-3.75 z-10 rounded-sm bg-muted ring-1 ring-border", SHOWN_ON_HOVER), children: copyButton })), _jsx("pre", { "aria-label": label, className: "max-h-96 overflow-auto py-4 font-label-mono-md text-label-mono-md", role: "region", tabIndex: 0, children: _jsx("code", { className: "block min-w-max", children: lines.map((text, index) => {
+                                const line = index + 1;
+                                const state = removed.has(line)
+                                    ? "removed"
+                                    : added.has(line)
+                                        ? "added"
+                                        : highlighted.has(line)
+                                            ? "highlighted"
+                                            : "plain";
+                                const anchor = `${id}-L${line}`;
+                                return (_jsxs("span", { className: cn("flex px-4", ROW[state], LINKED_ROW), "data-state": state, id: anchor, children: [state === "plain" ? null : (_jsx("span", { className: "sr-only", children: lineLabel?.(line, state) })), hideLineNumbers ? null : (_jsx("a", { "aria-hidden": "true", className: "nc-transition-paint shrink-0 pr-4 text-right text-muted-foreground tabular-nums select-none hover:text-foreground", href: `#${anchor}`, style: { minWidth: gutterWidth }, tabIndex: -1, children: line })), _jsx("span", { className: "whitespace-pre", children: text || " " })] }, anchor));
+                            }) }) })] })] }));
 }
+export { CodeBlock };