@surflane/ui 0.2.0 → 0.4.0

package/dist/select.js

@@ -3,6 +3,7 @@ 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';
+import { sizeName } from './parts.js';
 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' }) }));
@@ -40,7 +41,7 @@ export function Select({ options, value, defaultValue, onValueChange, className,
     }, [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) => {
+    return (_jsx("span", { className: cx('pui-select control-shell select-control', className), "data-size": sizeName(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) => {
@@ -70,7 +71,7 @@ function optionList(children) {
     });
 }
 /** Transitional HTML-option adapter. Submitted values use Base UI's native hidden input. */
-export const NativeSelect = React.forwardRef(function NativeSelect({ children, onChange, value, defaultValue, className, size, ...props }, ref) {
+export const NativeSelect = /* @__PURE__ */ 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) => {

package/dist/sizing.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-export const ComponentSizeContext = React.createContext(undefined);
+export const ComponentSizeContext = /* @__PURE__ */ React.createContext(undefined);
 export function normalizeSize(size) {
     return size === 'sm'
         ? 'small'

package/dist/status.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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) {
+export const Badge = /* @__PURE__ */ 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] }));
@@ -12,6 +12,6 @@ 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' })] })) }));
 }
 /** 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 = /* @__PURE__ */ 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-context.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+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>;

package/dist/syntax-context.js

@@ -0,0 +1,4 @@
+'use client';
+import * as React from 'react';
+/** Loads the highlighting engine. Without a provider, code renders as plain text. */
+export const SyntaxEngineContext = /* @__PURE__ */ React.createContext(null);

package/dist/syntax-highlighter.d.ts

@@ -7,7 +7,10 @@ export type SyntaxHighlighterProps = Omit<React.ComponentPropsWithoutRef<'code'>
     label?: string;
     wrap?: boolean;
 };
-/** Rendering remains selectable React text; it never inserts executable HTML. */
+/**
+ * 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;

package/dist/syntax-highlighter.js

@@ -2,6 +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';
 export const syntaxLanguages = [
     'tsx',
     'jsx',
@@ -29,18 +30,23 @@ const aliases = {
     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) {
+/**
+ * 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);
     const name = language.trim().toLowerCase();
     const lang = aliases[name] ?? name;
     const [result, setResult] = React.useState();
     React.useEffect(() => {
         let current = true;
-        if (lang === 'text' ||
+        if (!load ||
+            lang === 'text' ||
             !syntaxLanguages.includes(lang) ||
             code.length > 50000)
             return;
-        import('./syntax-engine.js')
+        load()
             .then((engine) => engine.highlightCode(code, lang))
             .then((tokens) => {
             if (current)
@@ -53,7 +59,7 @@ export const SyntaxHighlighter = React.forwardRef(function SyntaxHighlighter({ c
         return () => {
             current = false;
         };
-    }, [code, lang]);
+    }, [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;

package/dist/syntax-highlighting.d.ts

@@ -0,0 +1,8 @@
+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.
+ */
+export declare function SyntaxHighlighting({ children, }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;

package/dist/syntax-highlighting.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SyntaxEngineContext } from './syntax-context.js';
+// The engine and each grammar load on first use, in their own chunks.
+const load = () => import('./syntax-engine.js');
+/**
+ * Turns on syntax highlighting for CodeBlock, SyntaxHighlighter and Markdown inside it.
+ * Requires the optional `shiki` package; without this provider, code renders as plain text.
+ */
+export function SyntaxHighlighting({ children, }) {
+    return (_jsx(SyntaxEngineContext.Provider, { value: load, children: children }));
+}

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/tabs.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const Tabs: {
+    Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Tab: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLElement>>;
+    Panel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+        size?: import("./sizing.js").ComponentSize;
+    } & React.RefAttributes<HTMLSpanElement>>;
+};
+export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLSpanElement>>, TabsList: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, TabsPanel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, TabsRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLDivElement>>, TabsTab: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
+    size?: import("./sizing.js").ComponentSize;
+} & React.RefAttributes<HTMLElement>>;

package/dist/tabs.js

@@ -0,0 +1,13 @@
+'use client';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { part } from './parts.js';
+export const Tabs = {
+    ...BaseTabs,
+    Root: /* @__PURE__ */ part(BaseTabs.Root, 'pui-tabs'),
+    List: /* @__PURE__ */ part(BaseTabs.List, 'pui-tabs-list'),
+    Tab: /* @__PURE__ */ part(BaseTabs.Tab, 'pui-tabs-tab'),
+    Panel: /* @__PURE__ */ part(BaseTabs.Panel, 'pui-tabs-panel'),
+    Indicator: /* @__PURE__ */ part(BaseTabs.Indicator, 'pui-tabs-indicator'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Indicator: TabsIndicator, List: TabsList, Panel: TabsPanel, Root: TabsRoot, Tab: TabsTab, } = Tabs;

package/dist/toast.js

@@ -5,21 +5,21 @@ import { useComponentSize } from './sizing.js';
 import { Toast as BaseToast } from '@base-ui/react/toast';
 import { part, skin } from './parts.js';
 import { StatusIcon } from './status.js';
-const ToneContext = React.createContext('neutral');
-const Root = React.forwardRef(function Root({ tone = 'neutral', className, ...props }, ref) {
+const ToneContext = /* @__PURE__ */ React.createContext('neutral');
+const Root = /* @__PURE__ */ React.forwardRef(function Root({ tone = 'neutral', className, ...props }, ref) {
     return (_jsx(ToneContext.Provider, { value: tone, children: _jsx(BaseToast.Root, { ...props, ref: ref, "data-tone": tone, className: skin('pui-toast', className) }) }));
 });
-const Icon = React.forwardRef(function Icon({ tone, children, className, ...props }, ref) {
+const Icon = /* @__PURE__ */ React.forwardRef(function Icon({ tone, children, className, ...props }, ref) {
     const inherited = React.useContext(ToneContext);
     return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: ['pui-toast-icon', className].filter(Boolean).join(' '), children: children ?? _jsx(StatusIcon, { tone: tone ?? inherited }) }));
 });
-const Close = React.forwardRef(function Close({ className, children, ...props }, ref) {
-    return (_jsx(BaseToast.Close, { "aria-label": 'Dismiss notification', "aria-hidden": false, "data-variant": 'ghost', "data-size": 'icon', ...props, ref: ref, className: skin('pui-button pui-toast-close', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18' }) })) }));
+const Close = /* @__PURE__ */ React.forwardRef(function Close({ className, children, ...props }, ref) {
+    return (_jsx(BaseToast.Close, { "aria-label": 'Dismiss notification', "aria-hidden": false, "data-variant": 'ghost', "data-size": 'icon-sm', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-close', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18' }) })) }));
 });
-const Action = React.forwardRef(function Action({ className, ...props }, ref) {
-    return (_jsx(BaseToast.Action, { "data-variant": 'outline', "data-size": 'sm', ...props, ref: ref, className: skin('pui-button pui-toast-action', className) }));
+const Action = /* @__PURE__ */ React.forwardRef(function Action({ className, ...props }, ref) {
+    return (_jsx(BaseToast.Action, { "data-variant": 'outline', "data-size": 'small', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-action', className) }));
 });
-const Viewport = React.forwardRef(function Viewport({ layout = 'stack', className, ...props }, ref) {
+const Viewport = /* @__PURE__ */ React.forwardRef(function Viewport({ layout = 'stack', className, ...props }, ref) {
     const viewportRef = React.useRef(null);
     React.useLayoutEffect(() => {
         const viewport = viewportRef.current;
@@ -31,7 +31,7 @@ const Viewport = React.forwardRef(function Viewport({ layout = 'stack', classNam
             const gap = parseFloat(getComputedStyle(viewport).rowGap) || 0;
             const height = cards.reduce((sum, card) => {
                 const natural = parseFloat(getComputedStyle(card).getPropertyValue('--toast-height'));
-                return (sum + (Number.isFinite(natural) ? natural : card.offsetHeight));
+                return sum + (Number.isFinite(natural) ? natural : card.offsetHeight);
             }, 0) +
                 Math.max(0, cards.length - 1) * gap;
             const wasOverflow = viewport.hasAttribute('data-stack-overflow');
@@ -89,11 +89,11 @@ export const Toast = {
     Close,
     Action,
     Viewport,
-    Content: part(BaseToast.Content, 'pui-toast-content'),
-    Title: part(BaseToast.Title, 'pui-toast-title'),
-    Description: part(BaseToast.Description, 'pui-toast-description'),
-    Text: part('div', 'pui-toast-text'),
-    Positioner: part(BaseToast.Positioner, 'pui-positioner'),
+    Content: /* @__PURE__ */ part(BaseToast.Content, 'pui-toast-content'),
+    Title: /* @__PURE__ */ part(BaseToast.Title, 'pui-toast-title'),
+    Description: /* @__PURE__ */ part(BaseToast.Description, 'pui-toast-description'),
+    Text: /* @__PURE__ */ part('div', 'pui-toast-text'),
+    Positioner: /* @__PURE__ */ part(BaseToast.Positioner, 'pui-positioner'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Action: ToastAction, Arrow: ToastArrow, Close: ToastClose, Content: ToastContent, Description: ToastDescription, Portal: ToastPortal, Positioner: ToastPositioner, Provider: ToastProvider, Root: ToastRoot, Title: ToastTitle, Viewport: ToastViewport, Icon: ToastIcon, Text: ToastText, } = Toast;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -29,6 +29,7 @@
   "files": [
     "dist",
     "src/styles.css",
+    "src/all.css",
     "LICENSE-MIT",
     "LICENSE-APACHE"
   ],
@@ -38,6 +39,7 @@
       "import": "./dist/index.js"
     },
     "./styles.css": "./src/styles.css",
+    "./all.css": "./src/all.css",
     "./button": {
       "types": "./dist/button.d.ts",
       "import": "./dist/button.js"
@@ -74,6 +76,14 @@
       "types": "./dist/chart.d.ts",
       "import": "./dist/chart.js"
     },
+    "./date-picker": {
+      "types": "./dist/date-picker.d.ts",
+      "import": "./dist/date-picker.js"
+    },
+    "./tree": {
+      "types": "./dist/tree.d.ts",
+      "import": "./dist/tree.js"
+    },
     "./markdown": {
       "types": "./dist/markdown.d.ts",
       "import": "./dist/markdown.js"
@@ -82,6 +92,10 @@
       "types": "./dist/syntax-highlighter.d.ts",
       "import": "./dist/syntax-highlighter.js"
     },
+    "./syntax-highlighting": {
+      "types": "./dist/syntax-highlighting.d.ts",
+      "import": "./dist/syntax-highlighting.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -89,10 +103,50 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@base-ui/react": "1.9.0",
+    "@base-ui/react": "1.9.0"
+  },
+  "peerDependencies": {
+    "@headless-tree/core": "^1.8.0",
+    "@headless-tree/react": "^1.8.0",
+    "@surflane/design-tokens": "^0.4.0",
+    "@tanstack/react-virtual": "^3.14.21",
+    "react": "^19.0.0",
+    "react-aria-components": "^1.22.1",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "recharts": "^3.10.1",
+    "remark-gfm": "^4.0.1",
+    "shiki": "^4.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@headless-tree/core": {
+      "optional": true
+    },
+    "@headless-tree/react": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
+    "react-aria-components": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
     "@headless-tree/core": "1.8.0",
     "@headless-tree/react": "1.8.0",
-    "@internationalized/date": "3.12.4",
     "@tanstack/react-virtual": "3.14.21",
     "react-aria-components": "1.22.1",
     "react-markdown": "10.1.0",
@@ -100,11 +154,6 @@
     "remark-gfm": "4.0.1",
     "shiki": "4.5.0"
   },
-  "peerDependencies": {
-    "@surflane/design-tokens": "^0.2.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
   "publishConfig": {
     "access": "public"
   }

package/src/all.css

@@ -0,0 +1,8 @@
+/* Every Surflane stylesheet in one import, in the recommended order: tokens, controls,
+ * composition, document typography and components. Each file keeps its cascade layer. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/controls.css';
+@import '@surflane/design-tokens/foundations.css';
+@import '@surflane/design-tokens/typography.css';
+@import './styles.css';