@surflane/ui 0.8.0 → 0.10.0

package/dist/slider.js

@@ -6,7 +6,7 @@ import { useResetValue, useRootRef } from './form-state.js';
 function SliderRoot({ value, defaultValue, onValueChange, ref, className, form, thumbAlignment = 'edge', ...props }) {
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected] = useResetValue(value, (defaultValue ?? props.min ?? 0), element, form);
-    return (_jsx(BaseSlider.Root, { ...props, form: form, ref: attach, value: selected, thumbAlignment: thumbAlignment, className: skin('pui-slider', className), onValueChange: (next, event) => {
+    return (_jsx(BaseSlider.Root, { ...props, form: form, ref: attach, value: selected, thumbAlignment: thumbAlignment, className: skin('surf-slider', className), onValueChange: (next, event) => {
             onValueChange?.(next, event);
             if (value === undefined && !event.isCanceled)
                 setSelected(next);
@@ -15,12 +15,12 @@ function SliderRoot({ value, defaultValue, onValueChange, ref, className, form,
 export const Slider = {
     ...BaseSlider,
     Root: SliderRoot,
-    Label: /* @__PURE__ */ part(BaseSlider.Label, 'pui-slider-label'),
-    Value: /* @__PURE__ */ part(BaseSlider.Value, 'pui-slider-value'),
-    Control: /* @__PURE__ */ part(BaseSlider.Control, 'pui-slider-control'),
-    Track: /* @__PURE__ */ part(BaseSlider.Track, 'pui-slider-track'),
-    Indicator: /* @__PURE__ */ part(BaseSlider.Indicator, 'pui-slider-indicator'),
-    Thumb: /* @__PURE__ */ part(BaseSlider.Thumb, 'pui-slider-thumb'),
+    Label: /* @__PURE__ */ part(BaseSlider.Label, 'surf-slider-label'),
+    Value: /* @__PURE__ */ part(BaseSlider.Value, 'surf-slider-value'),
+    Control: /* @__PURE__ */ part(BaseSlider.Control, 'surf-slider-control'),
+    Track: /* @__PURE__ */ part(BaseSlider.Track, 'surf-slider-track'),
+    Indicator: /* @__PURE__ */ part(BaseSlider.Indicator, 'surf-slider-indicator'),
+    Thumb: /* @__PURE__ */ part(BaseSlider.Thumb, 'surf-slider-thumb'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { SliderRoot };

package/dist/sparkline.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ComponentSizeAlias } from './sizing.js';
+import type { ComponentSizeAlias } from './size.js';
 export type SparklineTrend = 'auto' | 'up' | 'down' | 'flat' | 'neutral';
 export type SparklineProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'children' | 'role' | 'aria-label'> & {
     /** Values in order. A missing value leaves a gap. */
@@ -7,7 +7,7 @@ export type SparklineProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'childr
     /** What the line shows and how it moved, such as "KOSPI, 30 days, up 2.3%". The
      * line is an image; this is its name. */
     label: string;
-    /** 24, 32 or 48px tall. Set --sparkline-height for another height. */
+    /** 24, 32 or 48px tall. Set --surf-sparkline-height for another height. */
     size?: ComponentSizeAlias;
     /** A reference line: a value, the first value, or none. */
     baseline?: number | 'first' | 'none';
@@ -21,21 +21,6 @@ export type SparklineProps = Omit<React.ComponentPropsWithoutRef<'svg'>, 'childr
 };
 /** A small trend line for cards and table cells: no axes, legend or tooltip. Use Chart
  * when people need to read values. */
-export declare const Sparkline: React.ForwardRefExoticComponent<Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "children" | "role" | "aria-label"> & {
-    /** Values in order. A missing value leaves a gap. */
-    data: readonly (number | null | undefined)[];
-    /** What the line shows and how it moved, such as "KOSPI, 30 days, up 2.3%". The
-     * line is an image; this is its name. */
-    label: string;
-    /** 24, 32 or 48px tall. Set --sparkline-height for another height. */
-    size?: ComponentSizeAlias;
-    /** A reference line: a value, the first value, or none. */
-    baseline?: number | "first" | "none";
-    /** Marks the last value with a dot. */
-    marker?: boolean;
-    /** The line's color. auto compares the last value with the baseline, or with the
-     * first value when there is none. */
-    trend?: SparklineTrend;
-    /** For measures where a fall is good: the colors swap. */
-    lowerIsBetter?: boolean;
-} & React.RefAttributes<SVGSVGElement>>;
+export declare const Sparkline: ({ data, label, size, baseline, marker, trend, lowerIsBetter, className, ref, ...props }: SparklineProps & {
+    ref?: React.Ref<SVGSVGElement>;
+}) => React.JSX.Element;

package/dist/sparkline.js

@@ -1,11 +1,9 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { cx, sizeName } from './parts.js';
+import { cx, sizeName } from './class-names.js';
 const finite = (value) => typeof value === 'number' && Number.isFinite(value);
 /** A small trend line for cards and table cells: no axes, legend or tooltip. Use Chart
  * when people need to read values. */
-export const Sparkline = /* @__PURE__ */ React.forwardRef(function Sparkline({ data, label, size, baseline = 'none', marker = true, trend = 'auto', lowerIsBetter = false, className, ...props }, ref) {
+export const Sparkline = function Sparkline({ data, label, size, baseline = 'none', marker = true, trend = 'auto', lowerIsBetter = false, className, ref, ...props }) {
     const values = data.filter(finite);
     const first = values[0];
     const last = values[values.length - 1];
@@ -43,8 +41,8 @@ export const Sparkline = /* @__PURE__ */ React.forwardRef(function Sparkline({ d
     let end = data.length - 1;
     while (end >= 0 && !finite(data[end]))
         end--;
-    return (_jsxs("svg", { ...props, ref: ref, role: 'img', "aria-label": label, className: cx('pui-sparkline', className), "data-size": sizeName(size), "data-tone": tone, viewBox: '0 0 100 100', preserveAspectRatio: 'none', focusable: 'false', children: [finite(reference) && (_jsx("path", { className: 'pui-sparkline-baseline', d: `M0 ${y(reference)}H100`, vectorEffect: 'non-scaling-stroke' })), _jsx("path", { className: 'pui-sparkline-line', d: path, vectorEffect: 'non-scaling-stroke' }), marker && end >= 0 && (
+    return (_jsxs("svg", { ...props, ref: ref, role: 'img', "aria-label": label, className: cx('surf-sparkline', className), "data-size": sizeName(size), "data-tone": tone, viewBox: '0 0 100 100', preserveAspectRatio: 'none', focusable: 'false', children: [finite(reference) && (_jsx("path", { className: 'surf-sparkline-baseline', d: `M0 ${y(reference)}H100`, vectorEffect: 'non-scaling-stroke' })), _jsx("path", { className: 'surf-sparkline-line', d: path, vectorEffect: 'non-scaling-stroke' }), marker && end >= 0 && (
             // A zero-length segment with a round cap stays a circle however the
             // line stretches.
-            _jsx("path", { className: 'pui-sparkline-marker', d: `M${x(end)} ${y(data[end])}h0`, vectorEffect: 'non-scaling-stroke' }))] }));
-});
+            _jsx("path", { className: 'surf-sparkline-marker', d: `M${x(end)} ${y(data[end])}h0`, vectorEffect: 'non-scaling-stroke' }))] }));
+};

package/dist/spinner.d.ts

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { type ComponentSizeAlias } from './sizing.js';
+import { type ComponentSizeAlias } from './size.js';
 export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
     label?: string;
     decorative?: boolean;
     size?: ComponentSizeAlias;
 };
 /** Use decorative within a loading region that already owns the announcement. */
-export declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
-    label?: string;
-    decorative?: boolean;
-    size?: ComponentSizeAlias;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const Spinner: ({ label, decorative, size, className, ref, ...props }: SpinnerProps & {
+    ref?: React.Ref<HTMLSpanElement>;
+}) => React.JSX.Element;

package/dist/spinner.js

@@ -1,10 +1,9 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { useComponentSize } from './sizing.js';
-import { sizeName, cx } from './parts.js';
+import { normalizeSize } from './size.js';
+import { sizeName, cx } from './class-names.js';
 /** Use decorative within a loading region that already owns the announcement. */
-export const Spinner = /* @__PURE__ */ React.forwardRef(function Spinner({ label = 'Loading', decorative = false, size, className, ...props }, ref) {
-    const scheme = useComponentSize(size);
-    return (_jsxs("span", { ...props, ref: ref, className: cx('pui-spinner', className), "data-size": sizeName(size), "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'pui-feedback-sr', children: label })] }));
-});
+export const Spinner = function Spinner({ label = 'Loading', decorative = false, size, className, ref, ...props }) {
+    // An omitted size follows the surrounding size scope through CSS.
+    const scheme = normalizeSize(size);
+    return (_jsxs("span", { ...props, ref: ref, className: cx('surf-spinner', className), "data-size": sizeName(size), "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'surf-feedback-sr', children: label })] }));
+};

package/dist/stat.d.ts

@@ -14,46 +14,38 @@ export type StatChangeProps = Omit<React.ComponentPropsWithoutRef<'dd'>, 'childr
 /** A key figure: what it measures, its value, how it moved and what it covers. Renders
  * a description list, so the label names the value for assistive technology. */
 export declare const Stat: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLDListElement>>;
-    Label: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Value: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
-    Change: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
-        /** The change, such as 0.023 for 2.3%. Its sign sets the direction. */
-        value: number;
-        /** Text for the change. Defaults to a signed percentage of `value`. */
-        format?: (value: number) => React.ReactNode;
-        /** Overrides the direction the sign gives. */
-        direction?: StatDirection;
-        /** For measures where a fall is good, such as latency: the colors swap, the arrow
-         * still points the way the value moved. */
-        lowerIsBetter?: boolean;
-    } & React.RefAttributes<HTMLElement>>;
-    Caption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLElement>>;
+    Root: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLDListElement> | undefined;
+    }) => React.JSX.Element;
+    Label: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
+    Value: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
+    Change: ({ value, format, direction, lowerIsBetter, className, ref, ...props }: StatChangeProps & {
+        ref?: React.Ref<HTMLElement>;
+    }) => React.JSX.Element;
+    Caption: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+        ref?: React.Ref<HTMLElement> | undefined;
+    }) => React.JSX.Element;
 };
-export declare const StatRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLDListElement>>, StatLabel: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>, StatValue: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>, StatChange: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
-    /** The change, such as 0.023 for 2.3%. Its sign sets the direction. */
-    value: number;
-    /** Text for the change. Defaults to a signed percentage of `value`. */
-    format?: (value: number) => React.ReactNode;
-    /** Overrides the direction the sign gives. */
-    direction?: StatDirection;
-    /** For measures where a fall is good, such as latency: the colors swap, the arrow
-     * still points the way the value moved. */
-    lowerIsBetter?: boolean;
-} & React.RefAttributes<HTMLElement>>, StatCaption: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLElement>>;
+export declare const StatRoot: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLDListElement> | undefined;
+}) => React.JSX.Element, StatLabel: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element, StatValue: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element, StatChange: ({ value, format, direction, lowerIsBetter, className, ref, ...props }: StatChangeProps & {
+    ref?: React.Ref<HTMLElement>;
+}) => React.JSX.Element, StatCaption: ({ className, size, ref, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+    ref?: React.Ref<HTMLElement> | undefined;
+}) => React.JSX.Element;

package/dist/stat.js

@@ -1,26 +1,25 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { Icon } from './icon.js';
-import { part, cx } from './parts.js';
+import { cx } from './class-names.js';
+import { elementPart } from './element-part.js';
 import { formatPercent } from './format.js';
 const signed = (value) => formatPercent(value, { signed: true });
 const arrows = { up: 'arrow-up', down: 'arrow-down', flat: 'minus' };
 /** A change against an earlier value: an arrow, a signed figure and its direction's
  * color. The sign and the arrow carry the direction, so color is never alone. */
-const ChangePart = /* @__PURE__ */ React.forwardRef(function StatChange({ value, format = signed, direction, lowerIsBetter, className, ...props }, ref) {
+const ChangePart = function StatChange({ value, format = signed, direction, lowerIsBetter, className, ref, ...props }) {
     const way = direction ?? (value > 0 ? 'up' : value < 0 ? 'down' : 'flat');
     const tone = way === 'flat' || !lowerIsBetter ? way : way === 'up' ? 'down' : 'up';
-    return (_jsxs("dd", { ...props, ref: ref, "data-direction": way, "data-tone": tone, className: cx('pui-stat-change', className), children: [_jsx(Icon, { name: arrows[way] }), format(value)] }));
-});
+    return (_jsxs("dd", { ...props, ref: ref, "data-direction": way, "data-tone": tone, className: cx('surf-stat-change', className), children: [_jsx(Icon, { name: arrows[way] }), format(value)] }));
+};
 /** A key figure: what it measures, its value, how it moved and what it covers. Renders
  * a description list, so the label names the value for assistive technology. */
 export const Stat = {
-    Root: /* @__PURE__ */ part('dl', 'pui-stat'),
-    Label: /* @__PURE__ */ part('dt', 'pui-stat-label'),
-    Value: /* @__PURE__ */ part('dd', 'pui-stat-value'),
+    Root: /* @__PURE__ */ elementPart('dl', 'surf-stat'),
+    Label: /* @__PURE__ */ elementPart('dt', 'surf-stat-label'),
+    Value: /* @__PURE__ */ elementPart('dd', 'surf-stat-value'),
     Change: ChangePart,
-    Caption: /* @__PURE__ */ part('dd', 'pui-stat-caption'),
+    Caption: /* @__PURE__ */ elementPart('dd', 'surf-stat-caption'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Root: StatRoot, Label: StatLabel, Value: StatValue, Change: StatChange, Caption: StatCaption, } = Stat;

package/dist/status.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from './icon.js';
 const statusIcons = {

package/dist/switch.d.ts

@@ -1,13 +1,22 @@
 import * as React from 'react';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import { type ChoiceSize } from './choice.js';
-declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & ChoiceSize & React.RefAttributes<HTMLElement>>;
+declare const SwitchRoot: ({ size, checked, defaultChecked, onCheckedChange, className, form, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseSwitch.Root> & ChoiceSize & {
+    ref?: React.Ref<React.ComponentRef<typeof BaseSwitch.Root>>;
+}) => React.JSX.Element;
 export declare const Switch: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & ChoiceSize & React.RefAttributes<HTMLElement>>;
-    Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-        size?: import("./sizing.js").ComponentSize;
-    } & React.RefAttributes<HTMLSpanElement>>;
+    Root: ({ size, checked, defaultChecked, onCheckedChange, className, form, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseSwitch.Root> & ChoiceSize & {
+        ref?: React.Ref<React.ComponentRef<typeof BaseSwitch.Root>>;
+    }) => React.JSX.Element;
+    Thumb: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./size.js").ComponentSize;
+    } & {
+        ref?: React.Ref<HTMLSpanElement> | undefined;
+    }) => React.JSX.Element;
 };
 export { SwitchRoot };
-export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
-    size?: import("./sizing.js").ComponentSize;
-} & React.RefAttributes<HTMLSpanElement>>;
+export declare const SwitchThumb: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./size.js").ComponentSize;
+} & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}) => React.JSX.Element;

package/dist/switch.js

@@ -1,24 +1,23 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
 import { useComponentSize } from './sizing.js';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import { skin, part } from './parts.js';
 import { useRootRef, useResetValue } from './form-state.js';
-const SwitchRoot = /* @__PURE__ */ React.forwardRef(function SwitchRoot({ size, checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
+const SwitchRoot = function SwitchRoot({ size, checked, defaultChecked = false, onCheckedChange, className, form, ref, ...props }) {
     const scheme = useComponentSize(size);
     const [element, attach] = useRootRef(ref);
     const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
-    return (_jsx(BaseSwitch.Root, { ...props, "data-ui-size": size ? scheme : undefined, form: form, ref: attach, checked: selected, className: skin('pui-switch', className), onCheckedChange: (next, event) => {
+    return (_jsx(BaseSwitch.Root, { ...props, "data-ui-size": size ? scheme : undefined, form: form, ref: attach, checked: selected, className: skin('surf-switch', className), onCheckedChange: (next, event) => {
             onCheckedChange?.(next, event);
             if (checked === undefined && !event.isCanceled)
                 setSelected(next);
         } }));
-});
+};
 export const Switch = {
     ...BaseSwitch,
     Root: SwitchRoot,
-    Thumb: /* @__PURE__ */ part(BaseSwitch.Thumb, 'pui-switch-thumb'),
+    Thumb: /* @__PURE__ */ part(BaseSwitch.Thumb, 'surf-switch-thumb'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export { SwitchRoot };

package/dist/syntax-context.d.ts

@@ -3,5 +3,14 @@ import type { SyntaxToken } from './syntax-engine.js';
 export type SyntaxEngine = {
     highlightCode(code: string, language: string): Promise<SyntaxToken[][] | null>;
 };
-/** Loads the highlighting engine. Without a provider, code renders as plain text. */
-export declare const SyntaxEngineContext: React.Context<(() => Promise<SyntaxEngine>) | null>;
+/**
+ * Loads the highlighting engine, and says whether code waits for its tokens inside
+ * Suspense. Without a provider, code renders as plain text.
+ */
+export declare const SyntaxEngineContext: React.Context<{
+    load: () => Promise<SyntaxEngine>;
+    suspense: boolean;
+} | null>;
+export declare function requestTokens(load: () => Promise<SyntaxEngine>, code: string, language: string): Promise<SyntaxToken[][] | null>;
+/** Records tokens already known, such as those a server render wrote. */
+export declare function provideTokens(code: string, language: string, tokens: SyntaxToken[][]): void;

package/dist/syntax-context.js

@@ -1,4 +1,37 @@
 'use client';
 import * as React from 'react';
-/** Loads the highlighting engine. Without a provider, code renders as plain text. */
+/**
+ * Loads the highlighting engine, and says whether code waits for its tokens inside
+ * Suspense. Without a provider, code renders as plain text.
+ */
 export const SyntaxEngineContext = /* @__PURE__ */ React.createContext(null);
+// One request per language and code, so a render that suspended finds its tokens again.
+// A settled request carries React's status and value, so use() reads it at once.
+const requests = new Map();
+export function requestTokens(load, code, language) {
+    const key = `${language}\n${code}`;
+    let pending = requests.get(key);
+    if (!pending) {
+        const request = load()
+            .then((engine) => engine.highlightCode(code, language))
+            .catch(() => null);
+        void request.then((tokens) => Object.assign(request, { status: 'fulfilled', value: tokens }));
+        pending = request;
+        remember(key, pending);
+    }
+    return pending;
+}
+/** Records tokens already known, such as those a server render wrote. */
+export function provideTokens(code, language, tokens) {
+    const key = `${language}\n${code}`;
+    if (!requests.has(key))
+        remember(key, Object.assign(Promise.resolve(tokens), {
+            status: 'fulfilled',
+            value: tokens,
+        }));
+}
+function remember(key, request) {
+    requests.set(key, request);
+    if (requests.size > 500)
+        requests.delete(requests.keys().next().value);
+}

package/dist/syntax-engine.js

@@ -115,7 +115,15 @@ export async function highlightCode(code, language) {
         }));
     await languages.get(language);
     const tokens = instance
-        .codeToTokensBase(code, { lang: language, theme: 'platform-quiet' })
+        .codeToTokensBase(code, {
+        lang: language,
+        theme: 'platform-quiet',
+        // Shiki leaves the rest of a line plain once it has spent this long on it, and the
+        // lines after it too. Its 500ms default cut the first line short on a slow device,
+        // while the regular expressions were still compiling; the result was then cached.
+        // The limit stays only as a guard against runaway patterns.
+        tokenizeTimeLimit: 5000,
+    })
         .map((line) => line.map((token) => ({
         content: token.content,
         role: colors[token.color?.toLowerCase() ?? ''] ?? 'plain',

package/dist/syntax-highlighter.d.ts

@@ -11,10 +11,6 @@ export type SyntaxHighlighterProps = Omit<React.ComponentPropsWithoutRef<'code'>
  * Rendering remains selectable React text; it never inserts executable HTML. Tokens are
  * colored inside a SyntaxHighlighting provider; without one, the code renders plain.
  */
-export declare const SyntaxHighlighter: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
-    code: string;
-    language?: string;
-    inline?: boolean;
-    label?: string;
-    wrap?: boolean;
-} & React.RefAttributes<HTMLElement>>;
+export declare const SyntaxHighlighter: ({ code, language, inline, label, wrap, className, ref, ...props }: SyntaxHighlighterProps & {
+    ref?: React.Ref<HTMLElement>;
+}) => React.JSX.Element;

package/dist/syntax-highlighter.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { ScrollArea } from './scroll-area.js';
-import { SyntaxEngineContext } from './syntax-context.js';
+import { SyntaxEngineContext, requestTokens } from './syntax-context.js';
 import { cx } from './parts.js';
 export const syntaxLanguages = [
     'tsx',
@@ -31,41 +31,52 @@ const aliases = {
     plaintext: 'text',
     txt: 'text',
 };
+function Highlighted({ tokens, render, }) {
+    return render(React.use(tokens));
+}
 /**
  * Rendering remains selectable React text; it never inserts executable HTML. Tokens are
  * colored inside a SyntaxHighlighting provider; without one, the code renders plain.
  */
-export const SyntaxHighlighter = /* @__PURE__ */ React.forwardRef(function SyntaxHighlighter({ code, language = 'text', inline = false, label = 'Highlighted source', wrap = false, className, ...props }, ref) {
-    const load = React.useContext(SyntaxEngineContext);
+export const SyntaxHighlighter = function SyntaxHighlighter({ code, language = 'text', inline = false, label = 'Highlighted source', wrap = false, className, ref, ...props }) {
+    const source = React.useContext(SyntaxEngineContext);
     const name = language.trim().toLowerCase();
     const lang = aliases[name] ?? name;
+    const highlightable = source !== null &&
+        lang !== 'text' &&
+        syntaxLanguages.includes(lang) &&
+        code.length <= 50000;
+    // Without suspense, code shows plain until an effect brings its tokens.
     const [result, setResult] = React.useState();
+    // A block waits only for the code it mounted with. Code that changes later is
+    // highlighted in place, so a boundary never hides shown code behind its fallback.
+    const [first] = React.useState(() => ({ code, lang }));
+    const suspense = highlightable &&
+        source.suspense &&
+        first.code === code &&
+        first.lang === lang;
     React.useEffect(() => {
-        let current = true;
-        if (!load ||
-            lang === 'text' ||
-            !syntaxLanguages.includes(lang) ||
-            code.length > 50000)
+        if (!highlightable || suspense)
             return;
-        load()
-            .then((engine) => engine.highlightCode(code, lang))
-            .then((tokens) => {
-            if (current)
+        let live = true;
+        void requestTokens(source.load, code, lang).then((tokens) => {
+            if (live)
                 setResult({ code, language: lang, tokens });
-        })
-            .catch(() => {
-            if (current)
-                setResult({ code, language: lang, tokens: null });
         });
         return () => {
-            current = false;
+            live = false;
         };
-    }, [code, lang, load]);
-    const tokens = result?.code === code && result.language === lang ? result.tokens : null;
-    const eols = code.match(/\r\n|\n|\r/g) ?? [];
-    const valid = tokens && tokens.length === eols.length + 1;
-    const element = (_jsx("code", { ...props, ref: ref, className: cx('pui-syntax', className), "data-language": lang, "data-highlighted": valid ? 'true' : 'false', children: valid
-            ? tokens.map((line, i) => (_jsxs(React.Fragment, { children: [line.map((token, j) => (_jsx("span", { "data-syntax": token.role, children: token.content }, j))), eols[i] ?? ''] }, i)))
-            : code }));
-    return inline ? (element) : (_jsx(ScrollArea, { label: label, orientation: 'horizontal', rootClassName: 'pui-syntax-scroll', children: _jsx("pre", { className: 'pui-syntax-pre', "data-wrap": wrap || undefined, children: element }) }));
-});
+    }, [code, lang, source, highlightable, suspense]);
+    const render = (tokens) => {
+        const eols = code.match(/\r\n|\n|\r/g) ?? [];
+        const valid = tokens && tokens.length === eols.length + 1;
+        return (_jsx("code", { ...props, ref: ref, className: cx('surf-syntax', className), "data-language": lang, "data-highlighted": valid ? 'true' : 'false', children: valid
+                ? tokens.map((line, i) => (_jsxs(React.Fragment, { children: [line.map((token, j) => (_jsx("span", { "data-syntax": token.role, children: token.content }, j))), eols[i] ?? ''] }, i)))
+                : code }));
+    };
+    // With suspense, the block waits for its tokens behind its own boundary, plain
+    // meanwhile: a server render writes it highlighted and hydration keeps that HTML,
+    // while a block that appears later never suspends anything around it.
+    const element = suspense ? (_jsx(React.Suspense, { fallback: render(null), children: _jsx(Highlighted, { tokens: requestTokens(source.load, code, lang), render: render }) })) : (render(result?.code === code && result.language === lang ? result.tokens : null));
+    return inline ? (element) : (_jsx(ScrollArea, { label: label, orientation: 'horizontal', rootClassName: 'surf-syntax-scroll', children: _jsx("pre", { className: 'surf-syntax-pre', "data-wrap": wrap || undefined, children: element }) }));
+};

package/dist/syntax-highlighting.d.ts

@@ -2,7 +2,20 @@ import * as React from 'react';
 /**
  * Turns on syntax highlighting for CodeBlock, SyntaxHighlighter and Markdown inside it.
  * Requires the optional `shiki` package; without this provider, code renders as plain text.
+ * Code shows as plain text until its tokens arrive. With `suspense`, each block waits
+ * for them behind its own Suspense boundary instead, so a server render writes it
+ * highlighted and hydration keeps that HTML. Nothing around a block suspends.
  */
-export declare function SyntaxHighlighting({ children, }: {
+export declare function SyntaxHighlighting({ children, suspense, }: {
     children?: React.ReactNode;
+    suspense?: boolean;
 }): React.JSX.Element;
+/**
+ * Reads the tokens of the server-rendered code under `root` from its HTML, so
+ * hydration needs neither the engine nor a grammar. With `suspense`, await it before
+ * `hydrateRoot`: every block then hydrates at once, so no boundary is left waiting for
+ * its tokens, where a context change above it would make React drop the highlighted
+ * HTML for the plain fallback. A block whose HTML doesn't read back as its code is
+ * highlighted again.
+ */
+export declare function preloadSyntaxHighlighting(root?: ParentNode): Promise<undefined>;

package/dist/syntax-highlighting.js

@@ -1,12 +1,63 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SyntaxEngineContext } from './syntax-context.js';
+import { SyntaxEngineContext, provideTokens, requestTokens, } from './syntax-context.js';
 // The engine and each grammar load on first use, in their own chunks.
 const load = () => import('./syntax-engine.js');
+const sources = {
+    plain: { load, suspense: false },
+    suspense: { load, suspense: true },
+};
 /**
  * Turns on syntax highlighting for CodeBlock, SyntaxHighlighter and Markdown inside it.
  * Requires the optional `shiki` package; without this provider, code renders as plain text.
+ * Code shows as plain text until its tokens arrive. With `suspense`, each block waits
+ * for them behind its own Suspense boundary instead, so a server render writes it
+ * highlighted and hydration keeps that HTML. Nothing around a block suspends.
  */
-export function SyntaxHighlighting({ children, }) {
-    return (_jsx(SyntaxEngineContext.Provider, { value: load, children: children }));
+export function SyntaxHighlighting({ children, suspense = false, }) {
+    return (_jsx(SyntaxEngineContext.Provider, { value: suspense ? sources.suspense : sources.plain, children: children }));
+}
+/**
+ * Reads the tokens of the server-rendered code under `root` from its HTML, so
+ * hydration needs neither the engine nor a grammar. With `suspense`, await it before
+ * `hydrateRoot`: every block then hydrates at once, so no boundary is left waiting for
+ * its tokens, where a context change above it would make React drop the highlighted
+ * HTML for the plain fallback. A block whose HTML doesn't read back as its code is
+ * highlighted again.
+ */
+export function preloadSyntaxHighlighting(root = document) {
+    return Promise.all(Array.from(root.querySelectorAll('code.surf-syntax[data-highlighted="true"]'), (code) => {
+        const text = code.textContent ?? '';
+        const language = code.dataset.language;
+        const tokens = readTokens(code, text);
+        if (tokens)
+            provideTokens(text, language, tokens);
+        else
+            return requestTokens(load, text, language);
+    })).then(() => undefined);
+}
+// SyntaxHighlighter writes a line's tokens as spans and ends it with its line break.
+function readTokens(code, text) {
+    const lines = [[]];
+    let read = '';
+    for (const node of code.childNodes) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const content = node.textContent ?? '';
+            lines[lines.length - 1].push({
+                content,
+                role: node.dataset.syntax ?? '',
+            });
+            read += content;
+        }
+        else if (node.nodeType === Node.TEXT_NODE) {
+            const breaks = node.textContent ?? '';
+            if (!/^[\r\n]*$/.test(breaks))
+                return null;
+            const count = breaks.match(/\r\n|\n|\r/g)?.length ?? 0;
+            for (let line = 0; line < count; line++)
+                lines.push([]);
+            read += breaks;
+        }
+    }
+    return read === text ? lines : null;
 }