@surflane/ui 0.0.0-stage → 0.2.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,126 @@
+'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);
+                                            // minTickGap already drops ticks that would overlap; the cap
+                                            // only keeps one very long label from crowding the axis.
+                                            return label.length > 24 ? label.slice(0, 23) + '…' : 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,104 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, 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'),
+};
+const copyIcons = {
+    idle: (_jsxs(_Fragment, { children: [_jsx("rect", { x: '8', y: '8', width: '12', height: '12', rx: '2' }), _jsx("path", { d: 'M16 8V4H4v12h4' })] })),
+    copied: _jsx("path", { d: 'm5 12.5 4.5 4.5L19 7.5' }),
+    failed: (_jsx("path", { d: 'M12 7v6m0 4v.01M4.5 12a7.5 7.5 0 1 0 15 0 7.5 7.5 0 0 0-15 0' })),
+};
+// Feedback stays inside the copy button and returns to the action after this long.
+const copyFeedbackDuration = 2000;
+export const CodeBlock = React.forwardRef(function CodeBlock({ code, label = 'Code', language, wrap = false, copyLabel = 'Copy code', copiedLabel = 'Copied', copyErrorLabel = 'Copy unavailable', onCopy, className, ...props }, ref) {
+    const [state, setState] = React.useState('idle');
+    // After the first copy, each change of label fades in; the first render does not.
+    const [used, setUsed] = React.useState(false);
+    const revision = React.useRef(0), mounted = React.useRef(false), timer = React.useRef(undefined);
+    const button = React.useRef(null), source = React.useRef(null);
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            revision.current++;
+            clearTimeout(timer.current);
+        };
+    }, []);
+    React.useEffect(() => {
+        revision.current++;
+        clearTimeout(timer.current);
+        setState('idle');
+    }, [code]);
+    // The button keeps its resting width, so the feedback never moves the toolbar.
+    React.useLayoutEffect(() => {
+        const element = button.current;
+        if (!element || state !== 'idle')
+            return;
+        const measure = () => {
+            element.style.minInlineSize = '';
+            element.style.minInlineSize = `${element.getBoundingClientRect().width}px`;
+        };
+        measure();
+        document.fonts?.ready.then(() => {
+            if (mounted.current)
+                measure();
+        });
+    }, [copyLabel, state]);
+    async function copy() {
+        const request = ++revision.current;
+        clearTimeout(timer.current);
+        setUsed(true);
+        setState('busy');
+        let outcome;
+        try {
+            if (onCopy)
+                await onCopy(code);
+            else
+                await navigator.clipboard.writeText(code);
+            outcome = 'copied';
+        }
+        catch {
+            outcome = 'failed';
+        }
+        if (!mounted.current || request !== revision.current)
+            return;
+        setState(outcome);
+        // A failed copy selects the source, so the keyboard copy shortcut works next.
+        if (outcome === 'failed' && source.current)
+            window.getSelection()?.selectAllChildren(source.current);
+        timer.current = setTimeout(() => {
+            if (mounted.current && request === revision.current)
+                setState('idle');
+        }, copyFeedbackDuration);
+    }
+    const icon = state === 'copied' || state === 'failed' ? state : 'idle';
+    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, { ref: button, type: 'button', variant: 'outline', size: 'sm', className: 'pui-code-copy', onClick: copy, disabled: state === 'busy', "aria-busy": state === 'busy' || undefined, "data-copy-state": icon === 'idle' ? undefined : icon, "data-copy-used": used || undefined, children: [_jsx("svg", { className: 'pui-code-copy-icon', width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', strokeLinecap: 'round', strokeLinejoin: 'round', "aria-hidden": 'true', children: copyIcons[icon] }, icon), _jsx("span", { "aria-live": 'polite', children: _jsx("span", { className: 'pui-code-copy-label', children: state === 'copied'
+                                        ? copiedLabel
+                                        : state === 'failed'
+                                            ? copyErrorLabel
+                                            : copyLabel }, icon) })] })] }), _jsx(ScrollArea, { label: label, orientation: 'horizontal', children: _jsx("pre", { ref: source, className: 'pui-code-text', children: _jsx(SyntaxHighlighter, { code: code, language: language, inline: true }) }) })] }));
+});
+// 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;