@surflane/ui 0.0.0-stage → 0.1.0

package/dist/chart.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+export type ChartDatum = {
+    id: string;
+    label: string;
+    values: Readonly<Record<string, number | null | undefined>>;
+};
+export type ChartSeries = {
+    key: string;
+    label: string;
+};
+export type ChartProps = Omit<React.ComponentPropsWithoutRef<"figure">, "children" | "title"> & {
+    title: string;
+    description: string;
+    data: readonly ChartDatum[];
+    series: readonly ChartSeries[];
+    unit: string;
+    xLabel: string;
+    yLabel: string;
+    type?: "line" | "bar" | "area";
+    height?: number;
+    locale?: string;
+    formatValue?: (value: number) => string;
+    missingLabel?: string;
+    emptyLabel?: string;
+    hiddenSeries?: readonly string[];
+    defaultHiddenSeries?: readonly string[];
+    onHiddenSeriesChange?: (keys: string[]) => void;
+};
+/** Cartesian trends with a persistent, keyboard-readable tooltip region and a
+ * full data-table alternative. Missing values are gaps, never fabricated zeros. */
+export declare const Chart: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children" | "title"> & {
+    title: string;
+    description: string;
+    data: readonly ChartDatum[];
+    series: readonly ChartSeries[];
+    unit: string;
+    xLabel: string;
+    yLabel: string;
+    type?: "line" | "bar" | "area";
+    height?: number;
+    locale?: string;
+    formatValue?: (value: number) => string;
+    missingLabel?: string;
+    emptyLabel?: string;
+    hiddenSeries?: readonly string[];
+    defaultHiddenSeries?: readonly string[];
+    onHiddenSeriesChange?: (keys: string[]) => void;
+} & React.RefAttributes<HTMLElement>>;

package/dist/chart.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Area, Bar, CartesianGrid, ComposedChart, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { Table } from "./data.js";
+import { Button } from "./button.js";
+const dashes = [undefined, "7 4", "2 4", "10 3 2 3", "12 5", "4 3"];
+const colorFor = (index) => `var(--chart-series-${(index % 3) + 1})`;
+function Marker({ cx, cy, color, index, }) {
+    if (typeof cx !== "number" ||
+        typeof cy !== "number" ||
+        !Number.isFinite(cx) ||
+        !Number.isFinite(cy))
+        return null;
+    const props = { fill: "var(--canvas)", stroke: color, strokeWidth: 1.8 };
+    return index % 3 === 0 ? (_jsx("circle", { cx: cx, cy: cy, r: 3.5, ...props })) : index % 3 === 1 ? (_jsx("rect", { x: cx - 3.5, y: cy - 3.5, width: 7, height: 7, ...props })) : (_jsx("path", { d: `M${cx},${cy - 4.5}l4.5,8h-9Z`, ...props }));
+}
+function Pattern({ id, index, color, }) {
+    return (_jsxs("pattern", { id: id, patternUnits: "userSpaceOnUse", width: "8", height: "8", children: [_jsx("rect", { width: "8", height: "8", fill: color }), index % 3 === 1 ? (_jsx("path", { d: "M-2 2L2-2M0 8L8 0M6 10L10 6", stroke: "var(--canvas)", strokeWidth: "1.5" })) : index % 3 === 2 ? (_jsx("circle", { cx: "4", cy: "4", r: "1.4", fill: "var(--canvas)" })) : null] }));
+}
+/** Cartesian trends with a persistent, keyboard-readable tooltip region and a
+ * full data-table alternative. Missing values are gaps, never fabricated zeros. */
+export const Chart = React.forwardRef(function Chart({ title, description, data, series, unit, xLabel, yLabel, type = "line", height = 280, locale = "en-US", formatValue, missingLabel = "Not available", emptyLabel = "No numeric measurements to display.", hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ...props }, ref) {
+    const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, "_");
+    const [internalHidden, setInternalHidden] = React.useState(defaultHiddenSeries);
+    const hidden = new Set(hiddenSeries ?? internalHidden);
+    const visible = series.filter((s) => !hidden.has(s.key));
+    const [host, setHost] = React.useState(null);
+    const [dismissed, setDismissed] = React.useState(false);
+    const firstLegend = React.useRef(null);
+    const [restoreRequested, setRestoreRequested] = React.useState(false);
+    React.useLayoutEffect(() => {
+        if (!restoreRequested)
+            return;
+        if (visible.length > 0)
+            firstLegend.current?.focus();
+        setRestoreRequested(false);
+    }, [restoreRequested, visible.length]);
+    const number = React.useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }), [locale]);
+    const compact = React.useMemo(() => new Intl.NumberFormat(locale, {
+        notation: "compact",
+        maximumFractionDigits: 1,
+    }), [locale]);
+    const format = (value) => typeof value === "number" && Number.isFinite(value)
+        ? `${formatValue ? formatValue(value) : number.format(value)} ${unit}`
+        : missingLabel;
+    const rows = React.useMemo(() => {
+        const ids = new Set(), keys = new Set();
+        for (const s of series) {
+            if (!s.key || keys.has(s.key))
+                throw new Error("Chart series keys must be non-empty and unique");
+            keys.add(s.key);
+        }
+        return data.map((row) => {
+            if (!row.id || ids.has(row.id))
+                throw new Error("Chart datum IDs must be non-empty and unique");
+            ids.add(row.id);
+            return {
+                ...row,
+                values: Object.fromEntries(series.map((s) => [
+                    s.key,
+                    typeof row.values[s.key] === "number" &&
+                        Number.isFinite(row.values[s.key])
+                        ? row.values[s.key]
+                        : null,
+                ])),
+            };
+        });
+    }, [data, series]);
+    const byId = new Map(rows.map((row) => [row.id, row]));
+    const values = rows
+        .flatMap((row) => visible.map((s) => row.values[s.key]))
+        .filter((value) => typeof value === "number");
+    const min = values.reduce((a, b) => Math.min(a, b), 0), max = values.reduce((a, b) => Math.max(a, b), 0);
+    const hasValues = values.length > 0;
+    const changeHidden = (next) => {
+        if (hiddenSeries === undefined)
+            setInternalHidden(next);
+        onHiddenSeriesChange?.(next);
+    };
+    const toggle = (key) => changeHidden(series
+        .filter((s) => (s.key === key ? !hidden.has(key) : hidden.has(s.key)))
+        .map((s) => s.key));
+    const chartHeight = Number.isFinite(height) ? Math.max(200, height) : 280;
+    return (_jsxs("figure", { ...props, ref: ref, className: ["pui-chart", className].filter(Boolean).join(" "), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: "pui-chart-caption", children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsx("ul", { className: "pui-chart-legend", "aria-label": `${title} series`, children: series.map((s, index) => (_jsx("li", { children: _jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: "button", className: "pui-chart-legend-button", "aria-label": `${s.label} series`, "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx("svg", { width: "32", height: "20", viewBox: "0 0 32 20", "aria-hidden": "true", children: type === "bar" ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: `${id}-legend-${index}`, color: colorFor(index), index: index }) }), _jsx("rect", { x: "4", y: "3", width: "24", height: "14", rx: "2", fill: `url(#${id}-legend-${index})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: "M1 10h30", stroke: colorFor(index), strokeWidth: "2", strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: colorFor(index) })] })) }), _jsx("span", { children: s.label })] }) }, s.key))) }), _jsxs("p", { className: "pui-chart-axis-label", children: [yLabel, " (", unit, ")"] }), hasValues ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "pui-chart-help", id: `${id}-keys`, children: "Focus the chart and use Left/Right to inspect points. Escape clears details. The data table includes every series." }), _jsx("div", { className: "pui-chart-plot", onKeyDownCapture: (event) => {
+                            if (event.key === "Escape")
+                                setDismissed(true);
+                            else if (event.key === "ArrowLeft" || event.key === "ArrowRight")
+                                setDismissed(false);
+                        }, onMouseMoveCapture: () => setDismissed(false), onTouchStartCapture: () => setDismissed(false), onFocusCapture: () => setDismissed(false), children: _jsx(ResponsiveContainer, { width: "100%", height: chartHeight, minWidth: 0, initialDimension: { width: 320, height: chartHeight }, children: _jsxs(ComposedChart, { data: rows, accessibilityLayer: true, role: "application", "aria-label": title, "aria-describedby": `${id}-summary ${id}-keys`, margin: { top: 16, right: 20, bottom: 8, left: 0 }, children: [_jsx("defs", { children: series.map((s, index) => (_jsx(Pattern, { id: `${id}-pattern-${index}`, index: index, color: colorFor(index) }, s.key))) }), _jsx(CartesianGrid, { vertical: false, stroke: "var(--line)" }), _jsx(XAxis, { dataKey: "id", tickFormatter: (value) => {
+                                            const label = byId.get(String(value))?.label ?? String(value);
+                                            return label.length > 14 ? label.slice(0, 13) + "…" : label;
+                                        }, tick: { fill: "var(--ink-muted)", fontSize: 12 }, tickLine: false, axisLine: { stroke: "var(--line)" }, minTickGap: 24, interval: "preserveStartEnd" }), _jsx(YAxis, { width: 56, tickFormatter: (value) => compact.format(Number(value)), tick: { fill: "var(--ink-muted)", fontSize: 12 }, tickLine: false, axisLine: false, domain: [min, max === min ? max + 1 : max] }), _jsx(ReferenceLine, { y: 0, stroke: "var(--ink-muted)" }), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
+                                            ? false
+                                            : {
+                                                stroke: "var(--control-border)",
+                                                fill: "transparent",
+                                            }, wrapperStyle: {
+                                            position: "static",
+                                            visibility: "visible",
+                                            pointerEvents: "auto",
+                                        }, content: (tooltip) => {
+                                            const row = tooltip.active && !dismissed
+                                                ? byId.get(String(tooltip.label))
+                                                : undefined;
+                                            return (_jsx("div", { className: "pui-chart-readout", "data-chart-readout": row?.id, children: row ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: visible.map((s) => (_jsxs("li", { children: [s.label, ": ", format(row.values[s.key])] }, s.key))) })] })) : (_jsx("span", { children: "Hover, touch or use chart arrow keys to inspect a measurement." })) }));
+                                        } })), series.map((s, index) => {
+                                        const common = {
+                                            name: s.label,
+                                            dataKey: (row) => row.values[s.key] ?? null,
+                                            hide: hidden.has(s.key),
+                                            isAnimationActive: false,
+                                            stroke: colorFor(index),
+                                        };
+                                        return type === "bar" ? (_jsx(Bar, { ...common, fill: `url(#${id}-pattern-${index})`, maxBarSize: 48 }, s.key)) : type === "area" ? (_jsx(Area, { ...common, type: "linear", strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], fill: `url(#${id}-pattern-${index})`, fillOpacity: 0.12, connectNulls: false, dot: rows.length > 40
+                                                ? false
+                                                : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key)) : (_jsx(Line, { ...common, type: "linear", strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], connectNulls: false, dot: rows.length > 40
+                                                ? false
+                                                : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key));
+                                    })] }) }) }), _jsx("p", { className: "pui-chart-axis-label pui-chart-x-label", children: xLabel })] })) : (_jsx("div", { className: "pui-chart-empty", role: "status", children: visible.length === 0 && series.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { children: "No series selected." }), _jsx(Button, { variant: "outline", onClick: () => {
+                                setRestoreRequested(true);
+                                changeHidden([]);
+                            }, children: "Show all series" })] })) : (_jsx("p", { children: emptyLabel })) })), _jsx("div", { className: "pui-chart-inspector", ref: setHost, role: "status", "aria-live": "polite", "aria-atomic": "true", "aria-label": `${title} values`, hidden: !hasValues }), _jsxs("details", { className: "pui-chart-table", children: [_jsx("summary", { children: "View data table" }), _jsx(Table.Container, { label: `${title} data table`, orientation: "both", scrollChain: "contain", style: { maxHeight: 320 }, children: _jsxs(Table.Root, { children: [_jsxs(Table.Caption, { children: ["All input measurements, including hidden series. Unit: ", unit, "."] }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: "col", children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: "col", children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: "row", children: row.label }), series.map((s) => (_jsx(Table.Cell, { children: format(row.values[s.key]) }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: "No rows." }) })) })] }) })] })] }));
+});

package/dist/commands.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { type ComponentSizeAlias } from "./sizing.js";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+export declare function Toggle<Value extends string>({ className, size, ref, ...props }: BaseToggle.Props<Value> & {
+    size?: ComponentSizeAlias | "icon";
+    ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+export declare function ToggleGroup<Value extends string>({ className, ref, ...props }: BaseToggleGroup.Props<Value> & {
+    ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+export declare const Toolbar: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    Link: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+    Input: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLInputElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const Menubar: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/menubar").MenubarProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLButtonElement>>, ToolbarGroup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ToolbarInput: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLInputElement>>, ToolbarLink: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLAnchorElement>>, ToolbarRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ToolbarSeparator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/commands.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useComponentSize } from "./sizing.js";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
+import { skin, part } from "./parts.js";
+export function Toggle({ className, size, ref, ...props }) {
+    const scheme = useComponentSize(size === "icon" ? undefined : size);
+    return (_jsx(BaseToggle, { ...props, ref: ref, className: skin("pui-button pui-toggle", className), "data-size": size, "data-ui-size": scheme }));
+}
+export function ToggleGroup({ className, ref, ...props }) {
+    return (_jsx(BaseToggleGroup, { ...props, ref: ref, className: skin("pui-toggle-group", className) }));
+}
+export const Toolbar = {
+    ...BaseToolbar,
+    Root: part(BaseToolbar.Root, "pui-toolbar"),
+    Group: part(BaseToolbar.Group, "pui-toolbar-group"),
+    Button: part(BaseToolbar.Button, "pui-button pui-toolbar-button"),
+    Link: part(BaseToolbar.Link, "pui-button pui-toolbar-link"),
+    Input: part(BaseToolbar.Input, "pui-input pui-toolbar-input"),
+    Separator: part(BaseToolbar.Separator, "pui-toolbar-separator"),
+};
+export const Menubar = part(BaseMenubar, "pui-menubar");
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Button: ToolbarButton, Group: ToolbarGroup, Input: ToolbarInput, Link: ToolbarLink, Root: ToolbarRoot, Separator: ToolbarSeparator, } = Toolbar;

package/dist/content.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+declare const CardRoot: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    tone?: "canvas" | "subtle";
+    padding?: import("./foundations.js").Space;
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    level?: 2 | 3 | 4 | 5 | 6;
+} & React.RefAttributes<HTMLHeadingElement>>;
+export declare const Card: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+        tone?: "canvas" | "subtle";
+        padding?: import("./foundations.js").Space;
+    }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+        level?: 2 | 3 | 4 | 5 | 6;
+    } & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Body: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onCopy"> & {
+    code: string;
+    label?: string;
+    language?: string;
+    wrap?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    copyErrorLabel?: string;
+    onCopy?: (code: string) => void | Promise<void>;
+};
+export declare const CodeBlock: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onCopy"> & {
+    code: string;
+    label?: string;
+    language?: string;
+    wrap?: boolean;
+    copyLabel?: string;
+    copiedLabel?: string;
+    copyErrorLabel?: string;
+    onCopy?: (code: string) => void | Promise<void>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { CardRoot, CardTitle };
+export declare const CardHeader: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, CardDescription: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLParagraphElement>>, CardBody: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, CardFooter: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/content.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Surface } from "./foundations.js";
+import { part } from "./parts.js";
+import { Button } from "./button.js";
+import { SyntaxHighlighter } from "./syntax-highlighter.js";
+import { ScrollArea } from "./scroll-area.js";
+const CardRoot = React.forwardRef(function CardRoot({ className, padding, ...props }, ref) {
+    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: ["pui-card", className].filter(Boolean).join(" ") }));
+});
+const CardTitle = React.forwardRef(function CardTitle({ level = 3, className, ...props }, ref) {
+    return React.createElement(`h${level}`, {
+        ...props,
+        ref,
+        className: ["pui-card-title", className].filter(Boolean).join(" "),
+    });
+});
+export const Card = {
+    Root: CardRoot,
+    Header: part("div", "pui-card-header"),
+    Title: CardTitle,
+    Description: part("p", "pui-card-description"),
+    Body: part("div", "pui-card-body"),
+    Footer: part("div", "pui-card-footer"),
+};
+export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = "Code", language, wrap = false, copyLabel = "Copy code", copiedLabel = "Code copied.", copyErrorLabel = "Copy unavailable. Select the code and copy it manually.", onCopy, className, ...props }, ref) {
+    const [result, setResult] = React.useState(""), [busy, setBusy] = React.useState(false);
+    const revision = React.useRef(0), mounted = React.useRef(false);
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            revision.current++;
+        };
+    }, []);
+    React.useEffect(() => {
+        revision.current++;
+        setResult("");
+        setBusy(false);
+    }, [code]);
+    async function copy() {
+        const request = ++revision.current;
+        setBusy(true);
+        setResult("");
+        let outcome;
+        try {
+            if (onCopy)
+                await onCopy(code);
+            else
+                await navigator.clipboard.writeText(code);
+            outcome = copiedLabel;
+        }
+        catch {
+            outcome = copyErrorLabel;
+        }
+        if (mounted.current && request === revision.current) {
+            setResult(outcome);
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { ...props, ref: ref, "data-wrap": wrap || undefined, className: ["pui-code-block", className].filter(Boolean).join(" "), children: [_jsxs("div", { className: "pui-code-toolbar", children: [_jsxs("span", { className: "pui-code-label", children: [label, language && _jsx("span", { className: "pui-code-language", children: language })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: copy, disabled: busy, "aria-busy": busy || undefined, children: [_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: [_jsx("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }), _jsx("path", { d: "M16 8V4H4v12h4" })] }), copyLabel] })] }), _jsx(ScrollArea, { label: label, orientation: "horizontal", children: _jsx("pre", { className: "pui-code-text", children: _jsx(SyntaxHighlighter, { code: code, language: language, inline: true }) }) }), _jsx("span", { className: "pui-code-result", role: "status", children: result })] }));
+});
+// Flat names for React Server Components, which cannot dot into client exports.
+export { CardRoot, CardTitle };
+export const { Header: CardHeader, Description: CardDescription, Body: CardBody, Footer: CardFooter, } = Card;

package/dist/context-overlays.d.ts

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+/** Same menu anatomy and styling, with the context-specific cursor positioner. */
+export declare const ContextMenu: {
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Positioner: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPositionerProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        positionerProps?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner>;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    LinkItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuLinkItemProps, "ref"> & React.RefAttributes<Element>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+    CheckboxItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    CheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    RadioItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    RadioItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuRadioItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    GroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    SubmenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuSubmenuTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
+        indicator?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Root: typeof BaseContextMenu.Root;
+    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    RadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    SubmenuRoot: typeof BaseContextMenu.SubmenuRoot;
+};
+declare function PreviewTrigger<Payload>(props: BasePreviewCard.Trigger.Props<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+export declare const PreviewCard: {
+    Trigger: typeof PreviewTrigger;
+    Positioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+        positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Root: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element;
+    Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Backdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Viewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    createHandle: typeof BasePreviewCard.createHandle;
+    Handle: typeof BasePreviewCard.Handle;
+};
+export declare const ContextMenuArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuCheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, ContextMenuGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuLinkItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuLinkItemProps, "ref"> & React.RefAttributes<Element>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLAnchorElement>>, ContextMenuPopup: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuPositioner: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPositionerProps & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuRadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react/context-menu").ContextMenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>, ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuRadioItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuRadioItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, ContextMenuRoot: typeof BaseContextMenu.Root, ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuSubmenuRoot: typeof BaseContextMenu.SubmenuRoot, ContextMenuSubmenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuSubmenuTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & {
+    indicator?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, ContextMenuContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    positionerProps?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner>;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const PreviewCardArrow: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardBackdrop: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardHandle: typeof BasePreviewCard.Handle, PreviewCardPopup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardPositioner: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, PreviewCardRoot: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element, PreviewCardTrigger: typeof PreviewTrigger, PreviewCardViewport: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/preview-card").PreviewCardViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>, PreviewCardContent: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/preview-card").PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    positionerProps?: React.ComponentPropsWithoutRef<typeof BasePreviewCard.Positioner>;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/context-overlays.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import { Menu } from "./menu.js";
+import { part, skin } from "./parts.js";
+const ContextPositioner = part(BaseContextMenu.Positioner, "pui-positioner");
+const ContextContent = React.forwardRef(function ContextContent({ positionerProps, ...props }, ref) {
+    return (_jsx(ContextPositioner, { ...positionerProps, children: _jsx(Menu.Popup, { ...props, ref: ref }) }));
+});
+/** Same menu anatomy and styling, with the context-specific cursor positioner. */
+export const ContextMenu = {
+    ...BaseContextMenu,
+    Trigger: part(BaseContextMenu.Trigger, "pui-context-trigger"),
+    Positioner: ContextPositioner,
+    Content: ContextContent,
+    Popup: Menu.Popup,
+    Item: Menu.Item,
+    LinkItem: Menu.LinkItem,
+    CheckboxItem: Menu.CheckboxItem,
+    CheckboxItemIndicator: Menu.CheckboxItemIndicator,
+    RadioItem: Menu.RadioItem,
+    RadioItemIndicator: Menu.RadioItemIndicator,
+    GroupLabel: Menu.GroupLabel,
+    Separator: Menu.Separator,
+    SubmenuTrigger: Menu.SubmenuTrigger,
+};
+const PreviewPositioner = part(BasePreviewCard.Positioner, "pui-positioner");
+// The preview is visual enhancement; its destination is the accessible interface.
+const PreviewPopup = React.forwardRef(function PreviewPopup({ className, ...props }, ref) {
+    return (_jsx(BasePreviewCard.Popup, { ...props, ref: ref, "aria-hidden": "true", className: skin("pui-preview-card", className) }));
+});
+function PreviewTrigger(props) {
+    const { className, ...rest } = props;
+    return (_jsx(BasePreviewCard.Trigger, { ...rest, className: skin("pui-link pui-preview-trigger", className) }));
+}
+const PreviewContent = React.forwardRef(function PreviewContent({ positionerProps, ...props }, ref) {
+    return (_jsx(PreviewPositioner, { sideOffset: 8, collisionPadding: 12, ...positionerProps, children: _jsx(PreviewPopup, { ...props, ref: ref }) }));
+});
+export const PreviewCard = {
+    ...BasePreviewCard,
+    Trigger: PreviewTrigger,
+    Positioner: PreviewPositioner,
+    Popup: PreviewPopup,
+    Content: PreviewContent,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Arrow: ContextMenuArrow, Backdrop: ContextMenuBackdrop, CheckboxItem: ContextMenuCheckboxItem, CheckboxItemIndicator: ContextMenuCheckboxItemIndicator, Group: ContextMenuGroup, GroupLabel: ContextMenuGroupLabel, Item: ContextMenuItem, LinkItem: ContextMenuLinkItem, Popup: ContextMenuPopup, Portal: ContextMenuPortal, Positioner: ContextMenuPositioner, RadioGroup: ContextMenuRadioGroup, RadioItem: ContextMenuRadioItem, RadioItemIndicator: ContextMenuRadioItemIndicator, Root: ContextMenuRoot, Separator: ContextMenuSeparator, SubmenuRoot: ContextMenuSubmenuRoot, SubmenuTrigger: ContextMenuSubmenuTrigger, Trigger: ContextMenuTrigger, Content: ContextMenuContent, } = ContextMenu;
+export const { Arrow: PreviewCardArrow, Backdrop: PreviewCardBackdrop, Handle: PreviewCardHandle, Popup: PreviewCardPopup, Portal: PreviewCardPortal, Positioner: PreviewCardPositioner, Root: PreviewCardRoot, Trigger: PreviewCardTrigger, Viewport: PreviewCardViewport, Content: PreviewCardContent, } = PreviewCard;