@surflane/ui 0.1.0 → 0.3.0

package/dist/select.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { type ComponentSizeAlias } from "./sizing.js";
+import * as React from 'react';
+import { type ComponentSizeAlias } from './sizing.js';
 export type SelectOption = {
     value: string;
     label: React.ReactNode;
@@ -19,15 +19,15 @@ export type SelectProps = {
     inputRef?: React.Ref<HTMLInputElement>;
     triggerRef?: React.Ref<HTMLButtonElement>;
     size?: ComponentSizeAlias;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
 };
 export declare function Select({ options, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }: SelectProps): React.JSX.Element;
 /** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
 export declare const NativeSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "size" | "multiple"> & {
     size?: ComponentSizeAlias;
 } & React.RefAttributes<HTMLButtonElement>>;
-export declare function NativeSelectOption(props: React.ComponentProps<"option">): React.JSX.Element;
-export declare function NativeSelectOptGroup(props: React.ComponentProps<"optgroup">): React.JSX.Element;
+export declare function NativeSelectOption(props: React.ComponentProps<'option'>): React.JSX.Element;
+export declare function NativeSelectOptGroup(props: React.ComponentProps<'optgroup'>): React.JSX.Element;

package/dist/select.js

@@ -1,20 +1,20 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useComponentSize } from "./sizing.js";
-import { Select as BaseSelect } from "@base-ui/react/select";
-const cx = (...v) => v.filter(Boolean).join(" ");
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { Select as BaseSelect } from '@base-ui/react/select';
+const cx = (...v) => v.filter(Boolean).join(' ');
 function Chevron() {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m7 10 5 5 5-5" }) }));
+    return (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm7 10 5 5 5-5' }) }));
 }
 function Check() {
-    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: _jsx("path", { d: "m5 12 4 4L19 6" }) }));
+    return (_jsx("svg", { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm5 12 4 4L19 6' }) }));
 }
 export function Select({ options, value, defaultValue, onValueChange, className, inputRef, triggerRef, size, ...props }) {
     const scheme = useComponentSize(size);
-    const [localValue, setLocalValue] = React.useState(defaultValue ?? options[0]?.value ?? "");
+    const [localValue, setLocalValue] = React.useState(defaultValue ?? options[0]?.value ?? '');
     const nativeInput = React.useRef(null);
-    const initialValue = defaultValue ?? options[0]?.value ?? "";
+    const initialValue = defaultValue ?? options[0]?.value ?? '';
     const resetCallback = React.useRef(onValueChange);
     resetCallback.current = onValueChange;
     React.useEffect(() => {
@@ -32,24 +32,24 @@ export function Select({ options, value, defaultValue, onValueChange, className,
             }, 0);
             pending.add(timer);
         };
-        owner.addEventListener("reset", reset);
+        owner.addEventListener('reset', reset);
         return () => {
-            owner.removeEventListener("reset", reset);
+            owner.removeEventListener('reset', reset);
             pending.forEach(clearTimeout);
         };
     }, [initialValue, props.form]);
     const selected = value ?? localValue;
     const { name, form, required, disabled, id, ...aria } = props;
-    return (_jsx("span", { className: cx("pui-select control-shell select-control", className), "data-size": size, "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
-                setLocalValue(v ?? "");
-                onValueChange?.(v ?? "");
+    return (_jsx("span", { className: cx('pui-select control-shell select-control', className), "data-size": size, "data-ui-size": scheme, "data-disabled": disabled || undefined, children: _jsxs(BaseSelect.Root, { items: options, value: selected, onValueChange: (v) => {
+                setLocalValue(v ?? '');
+                onValueChange?.(v ?? '');
             }, inputRef: (node) => {
                 nativeInput.current = node;
-                if (typeof inputRef === "function")
+                if (typeof inputRef === 'function')
                     inputRef(node);
                 else if (inputRef)
                     inputRef.current = node;
-            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: triggerRef, className: "pui-select-trigger form-control", "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: "pui-select-icon select-chevron", children: _jsx(Chevron, {}) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: "pui-positioner", sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: "pui-select-popup", "data-ui-size": scheme, children: _jsx(BaseSelect.List, { children: options.map((o) => (_jsxs(BaseSelect.Item, { className: "pui-select-item", value: o.value, "data-option-value": o.value, disabled: o.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: "pui-select-check", children: _jsx(Check, {}) }), _jsx(BaseSelect.ItemText, { children: o.label })] }, o.value))) }) }) }) })] }) }));
+            }, name: name, form: form, required: required, disabled: disabled, id: id, children: [_jsxs(BaseSelect.Trigger, { ...aria, ref: triggerRef, className: 'pui-select-trigger form-control', "data-value": selected, children: [_jsx(BaseSelect.Value, {}), _jsx(BaseSelect.Icon, { className: 'pui-select-icon select-chevron', children: _jsx(Chevron, {}) })] }), _jsx(BaseSelect.Portal, { children: _jsx(BaseSelect.Positioner, { className: 'pui-positioner', sideOffset: 6, alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: 'pui-select-popup', "data-ui-size": scheme, children: _jsx(BaseSelect.List, { children: options.map((o) => (_jsxs(BaseSelect.Item, { className: 'pui-select-item', value: o.value, "data-option-value": o.value, disabled: o.disabled, children: [_jsx(BaseSelect.ItemIndicator, { className: 'pui-select-check', children: _jsx(Check, {}) }), _jsx(BaseSelect.ItemText, { children: o.label })] }, o.value))) }) }) }) })] }) }));
 }
 function optionList(children) {
     return React.Children.toArray(children).flatMap((child) => {
@@ -57,12 +57,12 @@ function optionList(children) {
             return [];
         const p = child.props;
         if (child.type === React.Fragment ||
-            child.type === "optgroup" ||
+            child.type === 'optgroup' ||
             child.type === NativeSelectOptGroup)
             return optionList(p.children);
         return [
             {
-                value: String(p.value ?? p.children ?? ""),
+                value: String(p.value ?? p.children ?? ''),
                 label: p.label ?? p.children,
                 disabled: p.disabled,
             },
@@ -73,15 +73,15 @@ function optionList(children) {
 export const NativeSelect = React.forwardRef(function NativeSelect({ children, onChange, value, defaultValue, className, size, ...props }, ref) {
     const input = React.useRef(null);
     const options = optionList(children);
-    return (_jsx(Select, { options: options, value: value === undefined ? undefined : String(value), defaultValue: defaultValue === undefined ? undefined : String(defaultValue), className: className, size: size, inputRef: input, triggerRef: ref, name: props.name, form: props.form, disabled: props.disabled, required: props.required, id: props.id, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-describedby": props["aria-describedby"], "aria-invalid": props["aria-invalid"], onValueChange: (next) => {
+    return (_jsx(Select, { options: options, value: value === undefined ? undefined : String(value), defaultValue: defaultValue === undefined ? undefined : String(defaultValue), className: className, size: size, inputRef: input, triggerRef: ref, name: props.name, form: props.form, disabled: props.disabled, required: props.required, id: props.id, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-invalid": props['aria-invalid'], onValueChange: (next) => {
             if (!onChange)
                 return;
             const target = input.current;
             if (!target)
                 return;
-            const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+            const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
             setter?.call(target, next);
-            const event = new Event("change", { bubbles: true });
+            const event = new Event('change', { bubbles: true });
             Object.defineProperties(event, {
                 target: { value: target },
                 currentTarget: { value: target },

package/dist/sizing.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-export type ComponentSize = "small" | "default" | "large";
-export type ComponentSizeAlias = ComponentSize | "sm" | "md" | "lg";
+import * as React from 'react';
+export type ComponentSize = 'small' | 'default' | 'large';
+export type ComponentSizeAlias = ComponentSize | 'sm' | 'md' | 'lg';
 export declare const ComponentSizeContext: React.Context<ComponentSize | undefined>;
 export declare function normalizeSize(size?: ComponentSizeAlias): ComponentSize | undefined;
 /** Explicit sizes override the surrounding scheme; portals retain React context. */

package/dist/sizing.js

@@ -1,14 +1,14 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import * as React from 'react';
 export const ComponentSizeContext = React.createContext(undefined);
 export function normalizeSize(size) {
-    return size === "sm"
-        ? "small"
-        : size === "md"
-            ? "default"
-            : size === "lg"
-                ? "large"
+    return size === 'sm'
+        ? 'small'
+        : size === 'md'
+            ? 'default'
+            : size === 'lg'
+                ? 'large'
                 : size;
 }
 /** Explicit sizes override the surrounding scheme; portals retain React context. */
@@ -19,5 +19,5 @@ export function useComponentSize(size) {
 /** No layout box: grid/flex items and semantic children retain their own layout.
  * For table internals, place the provider outside the table, never inside tbody. */
 export function SizeProvider({ size, children, }) {
-    return (_jsx(ComponentSizeContext.Provider, { value: size, children: _jsx("div", { className: "pui-size-scope", "data-ui-size": size, children: children }) }));
+    return (_jsx(ComponentSizeContext.Provider, { value: size, children: _jsx("div", { className: 'pui-size-scope', "data-ui-size": size, children: children }) }));
 }

package/dist/slot.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare function Slot({ children, ...props }: React.HTMLAttributes<HTMLElement>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/slot.js

@@ -1,10 +1,10 @@
-"use client";
-import * as React from "react";
-import { useRender } from "@base-ui/react/use-render";
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 export function Slot({ children, ...props }) {
     return useRender({
         render: React.isValidElement(children) ? children : undefined,
         props: React.isValidElement(children) ? props : { ...props, children },
-        defaultTagName: "span",
+        defaultTagName: 'span',
     });
 }

package/dist/status.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { type ComponentSize } from "./sizing.js";
-export type StatusTone = "neutral" | "success" | "danger" | "caution" | "progress";
-export type BadgeProps = React.ComponentPropsWithoutRef<"span"> & {
+import * as React from 'react';
+import { type ComponentSize } from './sizing.js';
+export type StatusTone = 'neutral' | 'success' | 'danger' | 'caution' | 'progress';
+export type BadgeProps = React.ComponentPropsWithoutRef<'span'> & {
     size?: ComponentSize;
     tone?: StatusTone;
     icon?: React.ReactNode;

package/dist/status.js

@@ -1,17 +1,17 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import { useComponentSize } from "./sizing.js";
-import { useToneTransition } from "./tone-transition.js";
-export const Badge = React.forwardRef(function Badge({ tone = "neutral", icon, children, className, size, ...props }, ref) {
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { useToneTransition } from './tone-transition.js';
+export const Badge = React.forwardRef(function Badge({ tone = 'neutral', icon, children, className, size, ...props }, ref) {
     const scheme = useComponentSize(size);
     const elementRef = useToneTransition(tone, ref);
-    return (_jsxs("span", { ...props, ref: elementRef, className: ["pui-badge", className].filter(Boolean).join(" "), "data-tone": tone, "data-ui-size": scheme, children: [icon && (_jsx("span", { className: "pui-badge-icon", "aria-hidden": "true", children: icon })), children] }));
+    return (_jsxs("span", { ...props, ref: elementRef, className: ['pui-badge', className].filter(Boolean).join(' '), "data-tone": tone, "data-ui-size": scheme, children: [icon && (_jsx("span", { className: 'pui-badge-icon', "aria-hidden": 'true', children: icon })), children] }));
 });
 export function StatusIcon({ tone }) {
-    return (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", "aria-hidden": "true", children: tone === "success" ? (_jsx("path", { d: "m5 12 4 4L19 6" })) : tone === "caution" ? (_jsxs(_Fragment, { children: [_jsx("path", { d: "m12 3 10 18H2L12 3Z" }), _jsx("path", { d: "M12 9v4m0 3v1" })] })) : tone === "danger" ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 7v6m0 3v1" })] })) : tone === "progress" ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M12 7v6l4 2" })] })) : (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M8 12h8" })] })) }));
+    return (_jsx("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: tone === 'success' ? (_jsx("path", { d: 'm5 12 4 4L19 6' })) : tone === 'caution' ? (_jsxs(_Fragment, { children: [_jsx("path", { d: 'm12 3 10 18H2L12 3Z' }), _jsx("path", { d: 'M12 9v4m0 3v1' })] })) : tone === 'danger' ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6m0 3v1' })] })) : tone === 'progress' ? (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M12 7v6l4 2' })] })) : (_jsxs(_Fragment, { children: [_jsx("circle", { cx: '12', cy: '12', r: '9' }), _jsx("path", { d: 'M8 12h8' })] })) }));
 }
 /** Domain status labels and live announcements remain the caller's responsibility. */
-export const StatusBadge = React.forwardRef(function StatusBadge({ tone = "neutral", icon, ...props }, ref) {
+export const StatusBadge = React.forwardRef(function StatusBadge({ tone = 'neutral', icon, ...props }, ref) {
     return (_jsx(Badge, { ...props, ref: ref, tone: tone, icon: icon === undefined ? _jsx(StatusIcon, { tone: tone }) : icon }));
 });

package/dist/syntax-engine.js

@@ -1,29 +1,29 @@
-import { createHighlighterCore } from "shiki/core";
-import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 const loaders = {
-    tsx: () => import("shiki/langs/tsx.mjs"),
-    jsx: () => import("shiki/langs/jsx.mjs"),
-    typescript: () => import("shiki/langs/typescript.mjs"),
-    javascript: () => import("shiki/langs/javascript.mjs"),
-    css: () => import("shiki/langs/css.mjs"),
-    html: () => import("shiki/langs/html.mjs"),
-    json: () => import("shiki/langs/json.mjs"),
-    bash: () => import("shiki/langs/bash.mjs"),
-    yaml: () => import("shiki/langs/yaml.mjs"),
-    python: () => import("shiki/langs/python.mjs"),
-    sql: () => import("shiki/langs/sql.mjs"),
-    markdown: () => import("shiki/langs/markdown.mjs"),
+    tsx: () => import('shiki/langs/tsx.mjs'),
+    jsx: () => import('shiki/langs/jsx.mjs'),
+    typescript: () => import('shiki/langs/typescript.mjs'),
+    javascript: () => import('shiki/langs/javascript.mjs'),
+    css: () => import('shiki/langs/css.mjs'),
+    html: () => import('shiki/langs/html.mjs'),
+    json: () => import('shiki/langs/json.mjs'),
+    bash: () => import('shiki/langs/bash.mjs'),
+    yaml: () => import('shiki/langs/yaml.mjs'),
+    python: () => import('shiki/langs/python.mjs'),
+    sql: () => import('shiki/langs/sql.mjs'),
+    markdown: () => import('shiki/langs/markdown.mjs'),
 };
 const roles = [
-    "plain",
-    "comment",
-    "keyword",
-    "string",
-    "number",
-    "function",
-    "tag",
-    "attribute",
-    "punctuation",
+    'plain',
+    'comment',
+    'keyword',
+    'string',
+    'number',
+    'function',
+    'tag',
+    'attribute',
+    'punctuation',
 ];
 const colors = Object.fromEntries(roles.map((role, i) => [`#00000${i + 1}`, role]));
 const color = (index) => `#00000${index + 1}`;
@@ -35,53 +35,53 @@ function highlighter() {
         langs: [],
         themes: [
             {
-                name: "platform-quiet",
-                type: "dark",
+                name: 'platform-quiet',
+                type: 'dark',
                 colors: {
-                    "editor.foreground": color(0),
-                    "editor.background": "#000000",
+                    'editor.foreground': color(0),
+                    'editor.background': '#000000',
                 },
                 tokenColors: [
                     {
-                        scope: ["comment", "punctuation.definition.comment"],
+                        scope: ['comment', 'punctuation.definition.comment'],
                         settings: { foreground: color(1) },
                     },
                     {
-                        scope: ["keyword", "storage", "constant.language"],
+                        scope: ['keyword', 'storage', 'constant.language'],
                         settings: { foreground: color(2) },
                     },
                     {
-                        scope: ["string", "markup.inline.raw", "markup.fenced_code.block"],
+                        scope: ['string', 'markup.inline.raw', 'markup.fenced_code.block'],
                         settings: { foreground: color(3) },
                     },
                     {
-                        scope: ["constant.numeric", "constant.character"],
+                        scope: ['constant.numeric', 'constant.character'],
                         settings: { foreground: color(4) },
                     },
                     {
                         scope: [
-                            "entity.name.function",
-                            "support.function",
-                            "entity.name.type",
-                            "support.type",
-                            "entity.name.class",
+                            'entity.name.function',
+                            'support.function',
+                            'entity.name.type',
+                            'support.type',
+                            'entity.name.class',
                         ],
                         settings: { foreground: color(5) },
                     },
                     {
-                        scope: ["entity.name.tag", "markup.heading"],
+                        scope: ['entity.name.tag', 'markup.heading'],
                         settings: { foreground: color(6) },
                     },
                     {
                         scope: [
-                            "entity.other.attribute-name",
-                            "support.type.property-name",
-                            "variable.other.property",
+                            'entity.other.attribute-name',
+                            'support.type.property-name',
+                            'variable.other.property',
                         ],
                         settings: { foreground: color(7) },
                     },
                     {
-                        scope: ["punctuation", "meta.brace"],
+                        scope: ['punctuation', 'meta.brace'],
                         settings: { foreground: color(8) },
                     },
                 ],
@@ -115,10 +115,10 @@ 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' })
         .map((line) => line.map((token) => ({
         content: token.content,
-        role: colors[token.color?.toLowerCase() ?? ""] ?? "plain",
+        role: colors[token.color?.toLowerCase() ?? ''] ?? 'plain',
     })));
     if (code.length <= 8000) {
         cache.set(key, tokens);

package/dist/syntax-highlighter.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const syntaxLanguages: readonly ["tsx", "jsx", "typescript", "javascript", "css", "html", "json", "bash", "yaml", "python", "sql", "markdown", "text"];
-export type SyntaxHighlighterProps = Omit<React.ComponentPropsWithoutRef<"code">, "children"> & {
+export type SyntaxHighlighterProps = Omit<React.ComponentPropsWithoutRef<'code'>, 'children'> & {
     code: string;
     language?: string;
     inline?: boolean;

package/dist/syntax-highlighter.js

@@ -1,46 +1,46 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { ScrollArea } from "./scroll-area.js";
+import * as React from 'react';
+import { ScrollArea } from './scroll-area.js';
 export const syntaxLanguages = [
-    "tsx",
-    "jsx",
-    "typescript",
-    "javascript",
-    "css",
-    "html",
-    "json",
-    "bash",
-    "yaml",
-    "python",
-    "sql",
-    "markdown",
-    "text",
+    'tsx',
+    'jsx',
+    'typescript',
+    'javascript',
+    'css',
+    'html',
+    'json',
+    'bash',
+    'yaml',
+    'python',
+    'sql',
+    'markdown',
+    'text',
 ];
 const aliases = {
-    ts: "typescript",
-    js: "javascript",
-    sh: "bash",
-    shell: "bash",
-    yml: "yaml",
-    py: "python",
-    md: "markdown",
-    xml: "html",
-    plaintext: "text",
-    txt: "text",
+    ts: 'typescript',
+    js: 'javascript',
+    sh: 'bash',
+    shell: 'bash',
+    yml: 'yaml',
+    py: 'python',
+    md: 'markdown',
+    xml: 'html',
+    plaintext: 'text',
+    txt: 'text',
 };
 /** Rendering remains selectable React text; it never inserts executable HTML. */
-export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ code, language = "text", inline = false, label = "Highlighted source", wrap = false, className, ...props }, ref) {
+export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ code, language = 'text', inline = false, label = 'Highlighted source', wrap = false, className, ...props }, ref) {
     const name = language.trim().toLowerCase();
     const lang = aliases[name] ?? name;
     const [result, setResult] = React.useState();
     React.useEffect(() => {
         let current = true;
-        if (lang === "text" ||
+        if (lang === 'text' ||
             !syntaxLanguages.includes(lang) ||
             code.length > 50000)
             return;
-        import("./syntax-engine.js")
+        import('./syntax-engine.js')
             .then((engine) => engine.highlightCode(code, lang))
             .then((tokens) => {
             if (current)
@@ -57,8 +57,8 @@ export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ c
     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: ["pui-syntax", className].filter(Boolean).join(" "), "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)))
+    const element = (_jsx("code", { ...props, ref: ref, className: ['pui-syntax', className].filter(Boolean).join(' '), "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", children: _jsx("pre", { className: "pui-syntax-pre", "data-wrap": wrap || undefined, children: element }) }));
+    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 }) }));
 });

package/dist/table-selection.d.ts

@@ -0,0 +1,31 @@
+export type TableSelectionOptions<Row> = {
+    /** Rows on the current page, in display order. */
+    rows: readonly Row[];
+    getId: (row: Row) => string;
+    /** Rows that fail stay unselectable, such as read-only resources. */
+    canSelect?: (row: Row) => boolean;
+    selected?: readonly string[];
+    defaultSelected?: readonly string[];
+    onSelectedChange?: (selected: string[]) => void;
+};
+export type TableSelectionCheckbox = {
+    checked: boolean;
+    indeterminate?: boolean;
+    disabled: boolean;
+    onCheckedChange: (checked: boolean) => void;
+};
+/**
+ * Row selection by stable ID that survives paging, sorting and filtering.
+ * The page checkbox covers only the selectable rows on the current page;
+ * hiddenCount reports selections the reader cannot see.
+ */
+export declare function useTableSelection<Row>({ rows, getId, canSelect, selected: controlled, defaultSelected, onSelectedChange, }: TableSelectionOptions<Row>): {
+    selected: readonly string[];
+    isSelected: (id: string) => boolean;
+    toggle: (id: string, checked: boolean) => void;
+    clear: () => void;
+    /** Selected rows that are not on the current page. */
+    hiddenCount: number;
+    pageCheckbox: TableSelectionCheckbox;
+    rowCheckbox: (row: Row) => TableSelectionCheckbox;
+};

package/dist/table-selection.js

@@ -0,0 +1,50 @@
+'use client';
+import * as React from 'react';
+/**
+ * Row selection by stable ID that survives paging, sorting and filtering.
+ * The page checkbox covers only the selectable rows on the current page;
+ * hiddenCount reports selections the reader cannot see.
+ */
+export function useTableSelection({ rows, getId, canSelect = () => true, selected: controlled, defaultSelected = [], onSelectedChange, }) {
+    const [uncontrolled, setUncontrolled] = React.useState(defaultSelected);
+    const selected = controlled ?? uncontrolled;
+    const update = (next) => {
+        if (controlled === undefined)
+            setUncontrolled(next);
+        onSelectedChange?.(next);
+    };
+    const chosen = new Set(selected);
+    const onPage = new Set(rows.map(getId));
+    const selectable = rows.filter(canSelect).map(getId);
+    const pageChosen = selectable.filter((id) => chosen.has(id)).length;
+    const toggle = (id, checked) => update(checked
+        ? chosen.has(id)
+            ? [...selected]
+            : [...selected, id]
+        : selected.filter((other) => other !== id));
+    const pageCheckbox = {
+        checked: selectable.length > 0 && pageChosen === selectable.length,
+        indeterminate: pageChosen > 0 && pageChosen < selectable.length,
+        disabled: selectable.length === 0,
+        onCheckedChange: (checked) => update(checked
+            ? [...new Set([...selected, ...selectable])]
+            : selected.filter((id) => !selectable.includes(id))),
+    };
+    return {
+        selected: selected,
+        isSelected: (id) => chosen.has(id),
+        toggle,
+        clear: () => update([]),
+        /** Selected rows that are not on the current page. */
+        hiddenCount: selected.filter((id) => !onPage.has(id)).length,
+        pageCheckbox,
+        rowCheckbox: (row) => {
+            const id = getId(row);
+            return {
+                checked: chosen.has(id),
+                disabled: !canSelect(row),
+                onCheckedChange: (checked) => toggle(id, checked),
+            };
+        },
+    };
+}

package/dist/toast.d.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-import { Toast as BaseToast } from "@base-ui/react/toast";
-import { type StatusTone } from "./status.js";
+import * as React from 'react';
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { type StatusTone } from './status.js';
 export type ToastRootProps = React.ComponentPropsWithoutRef<typeof BaseToast.Root> & {
     tone?: StatusTone;
 };
 export type ToastViewportProps = React.ComponentPropsWithoutRef<typeof BaseToast.Viewport> & {
-    layout?: "stack" | "list" | "anchored";
+    layout?: 'stack' | 'list' | 'anchored';
 };
 export declare const Toast: {
     Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/toast").ToastRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {