@surflane/ui 0.0.0-stage → 0.2.0

package/dist/tone-transition.js

@@ -0,0 +1,81 @@
+'use client';
+import * as React from 'react';
+/** Animate a scalar so the color-mix expression, not a browser's default
+ * color interpolation space, determines every intermediate status color. */
+export function useToneTransition(tone, forwardedRef) {
+    const ref = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, () => ref.current, []);
+    const previous = React.useRef(undefined);
+    const paint = React.useRef([]);
+    const animation = React.useRef(null);
+    const read = (element) => {
+        const style = getComputedStyle(element);
+        return [style.backgroundColor, style.color, style.borderTopColor];
+    };
+    const clear = React.useCallback(() => {
+        animation.current?.cancel();
+        animation.current = null;
+        const element = ref.current;
+        element?.removeAttribute('data-status-transition');
+        for (let i = 0; i < 3; i++) {
+            element?.style.removeProperty(`--pui-status-from-${i}`);
+            element?.style.removeProperty(`--pui-status-to-${i}`);
+        }
+    }, []);
+    React.useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const from = animation.current ? read(element) : paint.current;
+        clear();
+        const to = read(element);
+        const changed = previous.current !== undefined && previous.current !== tone;
+        previous.current = tone;
+        paint.current = to;
+        if (!changed ||
+            !element.animate ||
+            matchMedia('(prefers-reduced-motion: reduce), (forced-colors: active)')
+                .matches ||
+            document.documentElement.hasAttribute('data-theme-switching'))
+            return;
+        const durationToken = getComputedStyle(element)
+            .getPropertyValue('--motion-feedback')
+            .trim();
+        const duration = parseFloat(durationToken) * (durationToken.endsWith('ms') ? 1 : 1000);
+        if (!Number.isFinite(duration) || duration <= 0)
+            return;
+        from.forEach((value, i) => element.style.setProperty(`--pui-status-from-${i}`, value));
+        to.forEach((value, i) => element.style.setProperty(`--pui-status-to-${i}`, value));
+        element.setAttribute('data-status-transition', '');
+        animation.current = element.animate([{ '--pui-status-progress': '0' }, { '--pui-status-progress': '1' }], {
+            duration,
+            easing: getComputedStyle(element).getPropertyValue('--ease-out').trim() ||
+                'ease-out',
+        });
+        animation.current.onfinish = clear;
+    }, [tone, clear]);
+    React.useLayoutEffect(() => {
+        const refresh = () => {
+            clear();
+            if (ref.current)
+                paint.current = read(ref.current);
+        };
+        const observer = new MutationObserver(refresh);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme', 'data-theme-switching'],
+        });
+        const media = [
+            matchMedia('(prefers-reduced-motion: reduce)'),
+            matchMedia('(forced-colors: active)'),
+            matchMedia('(prefers-color-scheme: light)'),
+        ];
+        media.forEach((query) => query.addEventListener('change', refresh));
+        return () => {
+            observer.disconnect();
+            media.forEach((query) => query.removeEventListener('change', refresh));
+            clear();
+        };
+    }, [clear]);
+    return ref;
+}

package/dist/tooltip.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export declare function TooltipProvider({ delayDuration, skipDelayDuration, children, }: {
+    delayDuration?: number;
+    skipDelayDuration?: number;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function Tooltip({ label, enabled, children, }: {
+    label: string;
+    enabled?: boolean;
+    children: React.ReactElement;
+}): React.JSX.Element;

package/dist/tooltip.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useComponentSize } from './sizing.js';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+export function TooltipProvider({ delayDuration = 150, skipDelayDuration = 300, children, }) {
+    return (_jsx(BaseTooltip.Provider, { delay: delayDuration, closeDelay: 0, timeout: skipDelayDuration, children: children }));
+}
+export function Tooltip({ label, enabled = true, children, }) {
+    const scheme = useComponentSize();
+    if (!enabled)
+        return children;
+    return (_jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: 'right', sideOffset: 10, collisionPadding: 8, className: 'pui-positioner pui-tooltip-positioner', children: _jsx(BaseTooltip.Popup, { className: 'pui-tooltip', "data-ui-size": scheme, children: label }) }) })] }));
+}

package/dist/tree.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type ComponentSize } from './sizing.js';
+export type TreeNode = {
+    id: string;
+    label: string;
+    children?: readonly TreeNode[];
+    disabled?: boolean;
+};
+export type TreeProps = {
+    nodes: readonly TreeNode[];
+    label: string;
+    expandedIds?: readonly string[];
+    defaultExpandedIds?: readonly string[];
+    onExpandedIdsChange?: (ids: string[]) => void;
+    selectedIds?: readonly string[];
+    defaultSelectedIds?: readonly string[];
+    onSelectedIdsChange?: (ids: string[]) => void;
+    selectionMode?: 'single' | 'multiple';
+    height?: number;
+    rowHeight?: number;
+    size?: ComponentSize;
+    virtualized?: boolean;
+    emptyLabel?: string;
+    dir?: 'ltr' | 'rtl';
+    className?: string;
+};
+/** Loaded, immutable hierarchy. Remote loading, permission checks and mutations remain caller-owned. */
+export declare function Tree({ nodes, label, expandedIds, defaultExpandedIds, onExpandedIdsChange, selectedIds, defaultSelectedIds, onSelectedIdsChange, selectionMode, height, rowHeight: explicitRowHeight, size, virtualized, emptyLabel, dir, className, }: TreeProps): React.JSX.Element;

package/dist/tree.js

@@ -0,0 +1,311 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import * as React from 'react';
+import { useComponentSize } from './sizing.js';
+import { buildProxiedInstance, syncDataLoaderFeature, } from '@headless-tree/core';
+import { useTree } from '@headless-tree/react';
+import { defaultRangeExtractor, useVirtualizer, } from '@tanstack/react-virtual';
+import { ScrollArea } from './scroll-area.js';
+const normalize = (text) => text.normalize('NFKC').toLocaleLowerCase();
+/** Loaded, immutable hierarchy. Remote loading, permission checks and mutations remain caller-owned. */
+export function Tree({ nodes, label, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, selectedIds, defaultSelectedIds = [], onSelectedIdsChange, selectionMode = 'single', height = 320, rowHeight: explicitRowHeight, size, virtualized = true, emptyLabel = 'No items.', dir, className, }) {
+    const scheme = useComponentSize(size);
+    const touchFloor = React.useSyncExternalStore((listener) => {
+        const query = matchMedia('(max-width: 760px), (pointer: coarse)');
+        query.addEventListener('change', listener);
+        return () => query.removeEventListener('change', listener);
+    }, () => matchMedia('(max-width: 760px), (pointer: coarse)').matches, () => false);
+    const rowHeight = explicitRowHeight ??
+        Math.max(touchFloor && scheme ? 44 : 0, scheme === 'small' ? 36 : scheme === 'large' ? 52 : 44);
+    const rootId = React.useId();
+    const model = React.useMemo(() => {
+        const data = new Map();
+        const parents = new Map();
+        function add(children, parent) {
+            for (const node of children) {
+                if (data.has(node.id) || node.id === rootId)
+                    throw new Error(`Tree node IDs must be unique: ${node.id}`);
+                data.set(node.id, node);
+                parents.set(node.id, parent);
+                if (node.children)
+                    add(node.children, node.id);
+            }
+        }
+        add(nodes, rootId);
+        data.set(rootId, { id: rootId, label, children: nodes });
+        return { data, parents };
+    }, [nodes, rootId, label]);
+    const [localExpanded, setLocalExpanded] = React.useState(defaultExpandedIds);
+    const [localSelected, setLocalSelected] = React.useState(defaultSelectedIds);
+    const [localFocus, setLocalFocus] = React.useState(() => (selectedIds ?? defaultSelectedIds)[0] ?? null);
+    const expanded = React.useMemo(() => [...new Set(expandedIds ?? localExpanded)].filter((id) => model.data.get(id)?.children?.length), [expandedIds, localExpanded, model]);
+    const selected = React.useMemo(() => {
+        const ids = [...new Set(selectedIds ?? localSelected)].filter((id) => model.data.has(id) && !model.data.get(id)?.disabled);
+        return selectionMode === 'single' ? ids.slice(-1) : ids;
+    }, [selectedIds, localSelected, model, selectionMode]);
+    const visibleIds = React.useMemo(() => {
+        const result = [], open = new Set(expanded);
+        function visit(children) {
+            for (const node of children) {
+                result.push(node.id);
+                if (open.has(node.id) && node.children)
+                    visit(node.children);
+            }
+        }
+        visit(nodes);
+        return result;
+    }, [nodes, expanded]);
+    const focused = React.useMemo(() => {
+        const visible = new Set(visibleIds);
+        let id = localFocus;
+        while (id && !visible.has(id))
+            id = model.parents.get(id) ?? null;
+        return id ?? visibleIds[0] ?? null;
+    }, [localFocus, model, visibleIds]);
+    const viewport = React.useRef(null), container = React.useRef(null);
+    const virtualizerRef = React.useRef(null);
+    const pendingFocus = React.useRef(null), focusWithin = React.useRef(false), anchor = React.useRef(null);
+    const typeahead = React.useRef({ text: '', time: 0 });
+    function changeExpanded(ids) {
+        const next = [...new Set(ids)];
+        if (expandedIds === undefined)
+            setLocalExpanded(next);
+        onExpandedIdsChange?.(next);
+    }
+    function changeSelected(ids) {
+        const allowed = [...new Set(ids)].filter((id) => model.data.has(id) && !model.data.get(id)?.disabled);
+        const next = selectionMode === 'single' ? allowed.slice(-1) : allowed;
+        if (selectedIds === undefined)
+            setLocalSelected(next);
+        onSelectedIdsChange?.(next);
+    }
+    const tree = useTree({
+        rootItemId: rootId,
+        instanceBuilder: buildProxiedInstance,
+        features: [syncDataLoaderFeature],
+        getItemName: (item) => item.getItemData().label,
+        isItemFolder: (item) => !!item.getItemData().children?.length,
+        dataLoader: {
+            getItem: (id) => model.data.get(id),
+            getChildren: (id) => model.data.get(id)?.children?.map((node) => node.id) ?? [],
+        },
+        state: { expandedItems: expanded, focusedItem: focused },
+        setExpandedItems: (update) => changeExpanded(typeof update === 'function' ? update(expanded) : update),
+        setFocusedItem: (update) => setLocalFocus(typeof update === 'function' ? update(focused) : update),
+        scrollToItem: (item) => virtualizerRef.current?.scrollToIndex(item.getItemMeta().index, {
+            align: 'auto',
+        }),
+    });
+    const items = tree.getItems();
+    const focusedIndex = visibleIds.indexOf(focused ?? '');
+    const virtualizer = useVirtualizer({
+        count: items.length,
+        getScrollElement: () => viewport.current,
+        estimateSize: () => rowHeight,
+        getItemKey: (index) => items[index].getId(),
+        overscan: 4,
+        enabled: virtualized,
+        initialRect: { height, width: 0 },
+        rangeExtractor: (range) => [
+            ...new Set([
+                ...defaultRangeExtractor(range),
+                ...(focusedIndex >= 0 ? [focusedIndex] : []),
+            ]),
+        ].sort((a, b) => a - b),
+    });
+    virtualizerRef.current = virtualizer;
+    function focusItem(item) {
+        if (!item)
+            return;
+        pendingFocus.current = item.getId();
+        item.setFocused();
+        if (virtualized)
+            virtualizer.scrollToIndex(item.getItemMeta().index, { align: 'auto' });
+        else if (viewport.current) {
+            const top = item.getItemMeta().index * rowHeight;
+            if (top < viewport.current.scrollTop)
+                viewport.current.scrollTop = top;
+            else if (top + rowHeight >
+                viewport.current.scrollTop + viewport.current.clientHeight)
+                viewport.current.scrollTop =
+                    top + rowHeight - viewport.current.clientHeight;
+        }
+        const element = item.getElement();
+        if (element) {
+            pendingFocus.current = null;
+            element.focus({ preventScroll: true });
+        }
+    }
+    React.useLayoutEffect(() => {
+        const needsRecovery = focusWithin.current && document.activeElement === document.body;
+        const id = pendingFocus.current && visibleIds.includes(pendingFocus.current)
+            ? pendingFocus.current
+            : needsRecovery
+                ? focused
+                : null;
+        if (id) {
+            const item = tree.getItemInstance(id);
+            item.getElement()?.focus({ preventScroll: true });
+            pendingFocus.current = null;
+        }
+    }, [focused, items, tree]);
+    React.useEffect(() => {
+        virtualizer.measure();
+    }, [rowHeight, virtualizer]);
+    function select(item, range = false) {
+        const id = item.getId();
+        if (item.getItemData().disabled)
+            return;
+        if (selectionMode === 'single')
+            changeSelected([id]);
+        else if (range && anchor.current && visibleIds.includes(anchor.current)) {
+            const a = visibleIds.indexOf(anchor.current), b = visibleIds.indexOf(id);
+            changeSelected(visibleIds.slice(Math.min(a, b), Math.max(a, b) + 1));
+        }
+        else
+            changeSelected(selected.includes(id)
+                ? selected.filter((key) => key !== id)
+                : [...selected, id]);
+        if (!range)
+            anchor.current = id;
+    }
+    function keydown(event) {
+        if (event.defaultPrevented ||
+            event.nativeEvent.isComposing ||
+            event.target.closest('button'))
+            return;
+        const targetId = event.target.closest('[data-tree-id]')?.dataset.treeId;
+        const item = targetId
+            ? tree.getItemInstance(targetId)
+            : focused
+                ? tree.getItemInstance(focused)
+                : items[0];
+        if (!item)
+            return;
+        if ([
+            'ArrowDown',
+            'ArrowUp',
+            'ArrowLeft',
+            'ArrowRight',
+            'Home',
+            'End',
+        ].includes(event.key))
+            typeahead.current = { text: '', time: 0 };
+        const index = item.getItemMeta().index;
+        const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+        const forward = rtl ? 'ArrowLeft' : 'ArrowRight', backward = rtl ? 'ArrowRight' : 'ArrowLeft';
+        if ((event.ctrlKey || event.metaKey) &&
+            event.key.toLowerCase() === 'a' &&
+            selectionMode === 'multiple') {
+            event.preventDefault();
+            changeSelected(visibleIds);
+            return;
+        }
+        if (event.ctrlKey || event.metaKey || event.altKey)
+            return;
+        if ([
+            'ArrowDown',
+            'ArrowUp',
+            'Home',
+            'End',
+            forward,
+            backward,
+            'Enter',
+            ' ',
+            '*',
+        ].includes(event.key))
+            event.preventDefault();
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            const next = items[index + (event.key === 'ArrowDown' ? 1 : -1)];
+            focusItem(next);
+            if (event.shiftKey && selectionMode === 'multiple' && next)
+                select(next, true);
+        }
+        else if (event.key === 'Home')
+            focusItem(items[0]);
+        else if (event.key === 'End')
+            focusItem(items.at(-1));
+        else if (event.key === forward &&
+            !item.getItemData().disabled &&
+            item.isFolder()) {
+            if (item.isExpanded())
+                focusItem(items[index + 1]);
+            else
+                item.expand();
+        }
+        else if (event.key === backward) {
+            if (item.isFolder() && item.isExpanded() && !item.getItemData().disabled)
+                item.collapse();
+            else if (item.getItemMeta().level > 0)
+                focusItem(item.getParent());
+        }
+        else if (event.key === 'Enter' || event.key === ' ')
+            select(item, event.shiftKey);
+        else if (event.key === '*')
+            changeExpanded([
+                ...expanded,
+                ...items
+                    .filter((sibling) => sibling.getItemMeta().parentId === item.getItemMeta().parentId &&
+                    sibling.isFolder() &&
+                    !sibling.getItemData().disabled)
+                    .map((sibling) => sibling.getId()),
+            ]);
+        else if (event.key.length === 1) {
+            const now = performance.now(), char = normalize(event.key), previous = now - typeahead.current.time < 700 ? typeahead.current.text : '';
+            const prefix = previous === char ? char : previous + char;
+            typeahead.current = { text: prefix, time: now };
+            for (let offset = 1; offset <= items.length; offset++) {
+                const next = items[(index + offset) % items.length];
+                if (normalize(next.getItemName()).startsWith(prefix)) {
+                    event.preventDefault();
+                    focusItem(next);
+                    break;
+                }
+            }
+        }
+    }
+    const containerProps = tree.getContainerProps(label);
+    const rows = virtualized
+        ? virtualizer
+            .getVirtualItems()
+            .map((row) => ({ index: row.index, start: row.start }))
+        : items.map((_, index) => ({ index, start: index * rowHeight }));
+    return (_jsx(ScrollArea, { orientation: 'vertical', label: `${label} scroll area`, tabIndex: -1, ref: viewport, scrollChain: 'contain', rootClassName: ['pui-tree-scroll', className].filter(Boolean).join(' '), dir: dir, rootStyle: { blockSize: height, direction: dir }, className: 'pui-tree-viewport', children: items.length ? (_jsx("div", { ...containerProps, ref: (element) => {
+                container.current = element;
+                containerProps.ref(element);
+            }, dir: dir, className: 'pui-tree', "data-ui-size": scheme, "aria-multiselectable": selectionMode === 'multiple' || undefined, onKeyDown: keydown, onFocusCapture: () => {
+                focusWithin.current = true;
+            }, onBlurCapture: (event) => {
+                if (event.relatedTarget &&
+                    !event.currentTarget.contains(event.relatedTarget)) {
+                    focusWithin.current = false;
+                    typeahead.current.text = '';
+                }
+            }, style: {
+                blockSize: virtualized
+                    ? virtualizer.getTotalSize()
+                    : items.length * rowHeight,
+            }, children: rows.map(({ index, start }) => {
+                const item = items[index], node = item.getItemData(), props = item.getProps();
+                return (_createElement("div", { ...props, key: item.getId(), className: 'pui-tree-item', "data-tree-id": node.id, "aria-disabled": node.disabled || undefined, "aria-selected": node.disabled ? undefined : selected.includes(node.id), title: node.label, onFocus: () => item.setFocused(), onClick: (event) => {
+                        focusItem(item);
+                        select(item, event.shiftKey);
+                    }, style: {
+                        position: 'absolute',
+                        insetInline: 0,
+                        top: start,
+                        blockSize: rowHeight,
+                        paddingInlineStart: `calc(var(--space-2) + ${Math.min(item.getItemMeta().level, 8)} * var(--space-4))`,
+                    } },
+                    item.isFolder() ? (_jsx("button", { type: 'button', className: 'pui-tree-toggle', tabIndex: -1, disabled: node.disabled, "aria-label": `${item.isExpanded() ? 'Collapse' : 'Expand'} ${node.label}`, onClick: (event) => {
+                            event.stopPropagation();
+                            focusItem(item);
+                            if (item.isExpanded())
+                                item.collapse();
+                            else
+                                item.expand();
+                        }, children: _jsx("svg", { "aria-hidden": 'true', width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "data-expanded": item.isExpanded() || undefined, children: _jsx("path", { d: 'm9 5 7 7-7 7' }) }) })) : (_jsx("span", { className: 'pui-tree-leaf', "aria-hidden": 'true' })),
+                    _jsx("span", { className: 'pui-tree-label', children: node.label })));
+            }) })) : (_jsx("div", { role: 'status', className: 'pui-tree-empty', children: emptyLabel })) }));
+}

package/package.json

@@ -1,6 +1,111 @@
 {
   "name": "@surflane/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "base-ui",
+    "accessibility",
+    "react-server-components",
+    "surflane"
+  ],
+  "homepage": "https://surflane.page",
+  "bugs": {
+    "url": "https://github.com/Ashon/surflane/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ashon/surflane.git",
+    "directory": "packages/ui"
+  },
+  "license": "MIT OR Apache-2.0",
+  "author": "ashon",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src/styles.css",
+    "LICENSE-MIT",
+    "LICENSE-APACHE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js"
+    },
+    "./slot": {
+      "types": "./dist/slot.d.ts",
+      "import": "./dist/slot.js"
+    },
+    "./input": {
+      "types": "./dist/input.d.ts",
+      "import": "./dist/input.js"
+    },
+    "./select": {
+      "types": "./dist/select.d.ts",
+      "import": "./dist/select.js"
+    },
+    "./popover": {
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.js"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip.d.ts",
+      "import": "./dist/tooltip.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog.d.ts",
+      "import": "./dist/dialog.js"
+    },
+    "./sizing": {
+      "types": "./dist/sizing.d.ts",
+      "import": "./dist/sizing.js"
+    },
+    "./chart": {
+      "types": "./dist/chart.d.ts",
+      "import": "./dist/chart.js"
+    },
+    "./markdown": {
+      "types": "./dist/markdown.d.ts",
+      "import": "./dist/markdown.js"
+    },
+    "./syntax-highlighter": {
+      "types": "./dist/syntax-highlighter.d.ts",
+      "import": "./dist/syntax-highlighter.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "@base-ui/react": "1.9.0",
+    "@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",
+    "recharts": "3.10.1",
+    "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"
+  }
+}