dustyui 1.0.1 → 2.0.0

package/dist/Tree/getWindow.d.ts

@@ -0,0 +1,22 @@
+export interface RowWindow {
+    readonly start: number;
+    readonly end: number;
+}
+export interface WindowInput {
+    readonly rowCount: number;
+    readonly rowHeight: number;
+    readonly from: number;
+    readonly to: number;
+    readonly overscan: number;
+    readonly limit: number;
+}
+export type WindowItem = {
+    readonly type: "gap";
+    readonly id: "start" | "middle" | "end";
+    readonly rowCount: number;
+} | {
+    readonly type: "row";
+    readonly index: number;
+};
+export declare function getWindow({ rowCount, rowHeight, from, to, overscan, limit, }: WindowInput): RowWindow;
+export declare function getWindowItems(rowWindow: RowWindow, rowCount: number, pinned: number): WindowItem[];

package/dist/Tree/getWindow.js

@@ -0,0 +1,43 @@
+function clamp(value, minimum, maximum) {
+    if (Number.isNaN(value)) {
+        return minimum;
+    }
+    return Math.min(Math.max(value, minimum), maximum);
+}
+export function getWindow({ rowCount, rowHeight, from, to, overscan, limit, }) {
+    if (!(rowCount > 0) || !(rowHeight > 0)) {
+        return { start: 0, end: 0 };
+    }
+    const start = clamp(Math.floor(from / rowHeight) - overscan, 0, rowCount);
+    const end = clamp(Math.ceil(to / rowHeight) + overscan, start, Math.min(rowCount, start + Math.max(limit, 0)));
+    return { start, end };
+}
+export function getWindowItems(rowWindow, rowCount, pinned) {
+    const start = clamp(rowWindow.start, 0, rowCount);
+    const end = clamp(rowWindow.end, start, rowCount);
+    const isPinnedBefore = pinned >= 0 && pinned < start;
+    const isPinnedAfter = pinned >= end && pinned < rowCount;
+    const items = [];
+    function addGap(id, gapRowCount) {
+        if (gapRowCount > 0 || id === "start") {
+            items.push({ type: "gap", id, rowCount: gapRowCount });
+        }
+    }
+    addGap("start", isPinnedBefore ? pinned : start);
+    if (isPinnedBefore) {
+        items.push({ type: "row", index: pinned });
+        addGap("middle", start - pinned - 1);
+    }
+    for (let index = start; index < end; index++) {
+        items.push({ type: "row", index });
+    }
+    if (isPinnedAfter) {
+        addGap("middle", pinned - end);
+        items.push({ type: "row", index: pinned });
+        addGap("end", rowCount - pinned - 1);
+    }
+    else {
+        addGap("end", rowCount - end);
+    }
+    return items;
+}

package/dist/Tree/treeModel.d.ts

@@ -0,0 +1,55 @@
+export interface TreeNode {
+    readonly id: string;
+    readonly childCount: number;
+    children(): readonly this[];
+}
+export interface TreeRow<Node extends TreeNode = TreeNode> {
+    readonly node: Node;
+    readonly id: string;
+    readonly parentId: string | undefined;
+    readonly level: number;
+    readonly positionInSet: number;
+    readonly setSize: number;
+    readonly expandable: boolean;
+    readonly expanded: boolean;
+}
+export interface TreeState {
+    readonly expanded: ReadonlySet<string>;
+    readonly focused: string | undefined;
+}
+export type TreeAction = {
+    readonly type: "moveNext";
+} | {
+    readonly type: "movePrevious";
+} | {
+    readonly type: "moveFirst";
+} | {
+    readonly type: "moveLast";
+} | {
+    readonly type: "moveIn";
+} | {
+    readonly type: "moveOut";
+} | {
+    readonly type: "toggle";
+    readonly id?: string;
+} | {
+    readonly type: "expand";
+    readonly id: string;
+} | {
+    readonly type: "collapse";
+    readonly id: string;
+} | {
+    readonly type: "expandSiblings";
+} | {
+    readonly type: "focus";
+    readonly id: string;
+} | {
+    readonly type: "typeahead";
+    readonly text: string;
+};
+export declare const INITIAL_TREE_STATE: TreeState;
+export declare function visibleRows<Node extends TreeNode>(root: Node, expanded: ReadonlySet<string>): TreeRow<Node>[];
+export declare function reduceTree<Node extends TreeNode>(rows: readonly TreeRow<Node>[], state: TreeState, action: TreeAction, labelOf?: (row: TreeRow<Node>) => string): TreeState;
+export declare function findVisibleAncestor(previousRows: readonly TreeRow[], id: string, rows: readonly TreeRow[]): string | undefined;
+export declare function getTypeaheadText(typed: string, key: string, isContinuing: boolean): string;
+export declare function keyToAction(key: string): TreeAction | undefined;

package/dist/Tree/treeModel.js

@@ -0,0 +1,203 @@
+export const INITIAL_TREE_STATE = {
+    expanded: new Set(),
+    focused: undefined,
+};
+export function visibleRows(root, expanded) {
+    const rows = [];
+    const pending = [toRow(root, undefined, 1, 1, 1, expanded)];
+    for (let row = pending.pop(); row; row = pending.pop()) {
+        rows.push(row);
+        if (!row.expanded) {
+            continue;
+        }
+        const children = row.node.children();
+        for (let index = children.length - 1; index >= 0; index--) {
+            const child = children[index];
+            if (child) {
+                pending.push(toRow(child, row.id, row.level + 1, index + 1, children.length, expanded));
+            }
+        }
+    }
+    return rows;
+}
+function toRow(node, parentId, level, positionInSet, setSize, expanded) {
+    return {
+        node,
+        id: node.id,
+        parentId,
+        level,
+        positionInSet,
+        setSize,
+        get expandable() {
+            return node.childCount > 0;
+        },
+        expanded: expanded.has(node.id) && node.childCount > 0,
+    };
+}
+function withExpanded(state, change) {
+    const next = new Set(state.expanded);
+    change(next);
+    return next;
+}
+function isInside(rows, index, ancestorId) {
+    const byId = new Map(rows.map((row) => [row.id, row]));
+    for (let current = rows[index]; current?.parentId !== undefined; current = byId.get(current.parentId)) {
+        if (current.parentId === ancestorId) {
+            return true;
+        }
+    }
+    return false;
+}
+function focusedIndex(rows, state) {
+    return state.focused === undefined
+        ? -1
+        : rows.findIndex((row) => row.id === state.focused);
+}
+function focusRow(state, rows, index) {
+    const row = rows[Math.min(Math.max(index, 0), rows.length - 1)];
+    return row && row.id !== state.focused
+        ? { ...state, focused: row.id }
+        : state;
+}
+function expand(state, row) {
+    return row?.expandable && !row.expanded
+        ? {
+            ...state,
+            expanded: withExpanded(state, (expanded) => expanded.add(row.id)),
+        }
+        : state;
+}
+function collapse(state, rows, row) {
+    if (!row?.expanded) {
+        return state;
+    }
+    const index = focusedIndex(rows, state);
+    return {
+        expanded: withExpanded(state, (expanded) => expanded.delete(row.id)),
+        focused: index >= 0 && isInside(rows, index, row.id) ? row.id : state.focused,
+    };
+}
+function expandSiblings(state, rows, current) {
+    const closed = rows.filter((row) => row.parentId === current.parentId && row.expandable && !row.expanded);
+    if (closed.length === 0) {
+        return state;
+    }
+    return {
+        ...state,
+        expanded: withExpanded(state, (expanded) => {
+            for (const row of closed) {
+                expanded.add(row.id);
+            }
+        }),
+    };
+}
+function typeahead(state, rows, index, text, labelOf) {
+    const query = text.toLocaleLowerCase();
+    if (query === "") {
+        return state;
+    }
+    const start = query.length === 1 ? index + 1 : Math.max(index, 0);
+    for (let offset = 0; offset < rows.length; offset++) {
+        const candidate = (start + offset) % rows.length;
+        const row = rows[candidate];
+        if (row && labelOf(row).toLocaleLowerCase().startsWith(query)) {
+            return focusRow(state, rows, candidate);
+        }
+    }
+    return state;
+}
+export function reduceTree(rows, state, action, labelOf = () => "") {
+    if (rows.length === 0) {
+        return state;
+    }
+    const index = focusedIndex(rows, state);
+    const current = rows[index];
+    const byId = (id) => rows.find((row) => row.id === id);
+    switch (action.type) {
+        case "moveNext":
+            return focusRow(state, rows, index + 1);
+        case "movePrevious":
+            return focusRow(state, rows, index < 0 ? 0 : index - 1);
+        case "moveFirst":
+            return focusRow(state, rows, 0);
+        case "moveLast":
+            return focusRow(state, rows, rows.length - 1);
+        case "moveIn":
+            if (!current) {
+                return focusRow(state, rows, 0);
+            }
+            return current.expanded
+                ? focusRow(state, rows, index + 1)
+                : expand(state, current);
+        case "moveOut": {
+            if (!current) {
+                return focusRow(state, rows, 0);
+            }
+            if (current.expanded) {
+                return collapse(state, rows, current);
+            }
+            const parent = rows.findIndex((row) => row.id === current.parentId);
+            return parent >= 0 ? focusRow(state, rows, parent) : state;
+        }
+        case "toggle": {
+            const row = action.id === undefined ? current : byId(action.id);
+            return row?.expanded ? collapse(state, rows, row) : expand(state, row);
+        }
+        case "expand":
+            return expand(state, byId(action.id));
+        case "collapse":
+            return collapse(state, rows, byId(action.id));
+        case "expandSiblings":
+            return current ? expandSiblings(state, rows, current) : state;
+        case "focus":
+            return byId(action.id) ? { ...state, focused: action.id } : state;
+        case "typeahead":
+            return typeahead(state, rows, index, action.text, labelOf);
+    }
+}
+export function findVisibleAncestor(previousRows, id, rows) {
+    const visible = new Set(rows.map((row) => row.id));
+    const previous = new Map(previousRows.map((row) => [row.id, row]));
+    for (let current = previous.get(id); current; current =
+        current.parentId === undefined
+            ? undefined
+            : previous.get(current.parentId)) {
+        if (visible.has(current.id)) {
+            return current.id;
+        }
+    }
+    return undefined;
+}
+export function getTypeaheadText(typed, key, isContinuing) {
+    if (!isContinuing) {
+        return key;
+    }
+    const letter = key.toLocaleLowerCase();
+    const isRepeat = Array.from(typed.toLocaleLowerCase()).every((character) => character === letter);
+    return isRepeat ? key : typed + key;
+}
+export function keyToAction(key) {
+    switch (key) {
+        case "ArrowDown":
+            return { type: "moveNext" };
+        case "ArrowUp":
+            return { type: "movePrevious" };
+        case "ArrowRight":
+            return { type: "moveIn" };
+        case "ArrowLeft":
+            return { type: "moveOut" };
+        case "Home":
+            return { type: "moveFirst" };
+        case "End":
+            return { type: "moveLast" };
+        case "Enter":
+        case " ":
+            return { type: "toggle" };
+        case "*":
+            return { type: "expandSiblings" };
+        default:
+            return Array.from(key).length === 1
+                ? { type: "typeahead", text: key }
+                : undefined;
+    }
+}

package/dist/Tree/useRowWindow.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from "react";
+import { type RowWindow } from "./getWindow.js";
+export declare function useRowWindow(element: RefObject<HTMLElement | null>, rowCount: number): RowWindow | undefined;

package/dist/Tree/useRowWindow.js

@@ -0,0 +1,78 @@
+import { useLayoutEffect, useState } from "react";
+import { getWindow } from "./getWindow.js";
+const WINDOW_THRESHOLD = 200;
+const WINDOW_OVERSCAN = 10;
+const WINDOW_LIMIT = 500;
+const INITIAL_WINDOW = { start: 0, end: 50 };
+const ESTIMATED_ROW_HEIGHT = 21;
+const TREE_ITEM = ':scope > [role="treeitem"]';
+const GAP = ":scope > [data-gap-rows]";
+function getRowHeight(tree) {
+    let gapHeight = 0;
+    let gapRows = 0;
+    for (const gap of tree.querySelectorAll(GAP)) {
+        gapHeight += gap.getBoundingClientRect().height;
+        gapRows += Number(gap.dataset.gapRows);
+    }
+    if (gapRows > 0 && gapHeight > 0) {
+        return gapHeight / gapRows;
+    }
+    return (tree.querySelector(TREE_ITEM)?.getBoundingClientRect().height ||
+        ESTIMATED_ROW_HEIGHT);
+}
+function getVisibleSpan(tree) {
+    const bounds = tree.getBoundingClientRect();
+    let top = Math.max(bounds.top, 0);
+    let bottom = Math.min(bounds.bottom, window.innerHeight);
+    for (let ancestor = tree.parentElement; ancestor; ancestor = ancestor.parentElement) {
+        if (getComputedStyle(ancestor).overflowY !== "visible") {
+            const clip = ancestor.getBoundingClientRect();
+            top = Math.max(top, clip.top);
+            bottom = Math.min(bottom, clip.bottom);
+        }
+    }
+    return { top, bottom };
+}
+export function useRowWindow(element, rowCount) {
+    const [rowWindow, setRowWindow] = useState(INITIAL_WINDOW);
+    const isWindowed = rowCount > WINDOW_THRESHOLD;
+    useLayoutEffect(() => {
+        const tree = element.current;
+        if (!isWindowed || !tree) {
+            return;
+        }
+        const container = tree;
+        function update() {
+            const origin = container.firstElementChild;
+            if (!origin) {
+                return;
+            }
+            const start = origin.getBoundingClientRect().top;
+            const { top, bottom } = getVisibleSpan(container);
+            const next = getWindow({
+                rowCount,
+                rowHeight: getRowHeight(container),
+                from: top - start,
+                to: bottom - start,
+                overscan: WINDOW_OVERSCAN,
+                limit: WINDOW_LIMIT,
+            });
+            setRowWindow((current) => current.start === next.start && current.end === next.end
+                ? current
+                : next);
+        }
+        const observer = new ResizeObserver(update);
+        observer.observe(container);
+        document.addEventListener("scroll", update, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", update);
+        return () => {
+            observer.disconnect();
+            document.removeEventListener("scroll", update, { capture: true });
+            window.removeEventListener("resize", update);
+        };
+    }, [element, isWindowed, rowCount]);
+    return isWindowed ? rowWindow : undefined;
+}

package/dist/Tree/useTypeahead.d.ts

@@ -0,0 +1,2 @@
+import { type TreeAction } from "./treeModel.js";
+export declare function useTypeahead(): (action: TreeAction, timeStamp: number) => TreeAction;

package/dist/Tree/useTypeahead.js

@@ -0,0 +1,15 @@
+import { useRef } from "react";
+import { getTypeaheadText } from "./treeModel.js";
+const TYPEAHEAD_PAUSE = 500;
+export function useTypeahead() {
+    const typed = useRef({ text: "", at: 0 });
+    return (action, timeStamp) => {
+        if (action.type !== "typeahead") {
+            return action;
+        }
+        const isContinuing = timeStamp - typed.current.at < TYPEAHEAD_PAUSE;
+        const text = getTypeaheadText(typed.current.text, action.text, isContinuing);
+        typed.current = { text, at: timeStamp };
+        return { type: "typeahead", text };
+    };
+}

package/dist/announcer/announcer.d.ts

@@ -0,0 +1,2 @@
+export type Politeness = "polite" | "assertive";
+export declare function announce(message: string, politeness?: Politeness): void;

package/dist/announcer/announcer.js

@@ -0,0 +1,41 @@
+import visuallyHidden from "../styles/visuallyHidden.module.css";
+const REGION_READY_DELAY = 100;
+const MESSAGE_LIFETIME = 7000;
+let regions;
+let regionsReadyAt = 0;
+function createRegion(politeness) {
+    const region = document.createElement("div");
+    region.setAttribute("role", "log");
+    region.setAttribute("aria-live", politeness);
+    region.setAttribute("aria-relevant", "additions");
+    return region;
+}
+function ensureRegions() {
+    if (regions?.polite.isConnected && regions.assertive.isConnected) {
+        return regions;
+    }
+    const container = document.createElement("div");
+    container.dataset.dustyAnnouncer = "";
+    container.className = visuallyHidden.visuallyHidden ?? "";
+    regions = {
+        polite: createRegion("polite"),
+        assertive: createRegion("assertive"),
+    };
+    container.append(regions.polite, regions.assertive);
+    document.body.append(container);
+    regionsReadyAt = performance.now() + REGION_READY_DELAY;
+    return regions;
+}
+export function announce(message, politeness = "polite") {
+    if (typeof document === "undefined" || message.trim() === "") {
+        return;
+    }
+    const region = ensureRegions()[politeness];
+    const delay = Math.max(0, regionsReadyAt - performance.now());
+    setTimeout(() => {
+        const entry = document.createElement("div");
+        entry.textContent = message;
+        region.append(entry);
+        setTimeout(() => entry.remove(), MESSAGE_LIFETIME);
+    }, delay);
+}

package/dist/index.d.ts

@@ -1,2 +1,11 @@
-export { Badge } from "./Badge/Badge";
-export { Button } from "./Button/Button";
+import "./styles/tokens.css";
+import "./styles/themes/dusty.css";
+export { announce, type Politeness } from "./announcer/announcer.js";
+export { Avatar, type AvatarProps } from "./Avatar/Avatar.js";
+export { Badge, type BadgeProps } from "./Badge/Badge.js";
+export { Button, type ButtonProps, type ButtonVariant, } from "./Button/Button.js";
+export { IconButton, type IconButtonProps } from "./IconButton/IconButton.js";
+export { ObjectInspector, type ObjectInspectorProps, } from "./ObjectInspector/ObjectInspector.js";
+export { describe, type InspectorNode, type NodeLabel, type ValueKind, } from "./ObjectInspector/describe/describe.js";
+export { Tree, type TreeProps } from "./Tree/Tree.js";
+export type { TreeNode, TreeRow } from "./Tree/treeModel.js";

package/dist/index.js

@@ -1,6 +1,10 @@
-import { Badge } from "./Badge/Badge";
-import { Button } from "./Button/Button";
-export {
-  Badge,
-  Button
-};
+import "./styles/tokens.css";
+import "./styles/themes/dusty.css";
+export { announce } from "./announcer/announcer.js";
+export { Avatar } from "./Avatar/Avatar.js";
+export { Badge } from "./Badge/Badge.js";
+export { Button, } from "./Button/Button.js";
+export { IconButton } from "./IconButton/IconButton.js";
+export { ObjectInspector, } from "./ObjectInspector/ObjectInspector.js";
+export { describe, } from "./ObjectInspector/describe/describe.js";
+export { Tree } from "./Tree/Tree.js";

package/dist/styles/themes/dusty.css

@@ -0,0 +1,22 @@
+:where(:root),
+[data-theme="dusty"] {
+  --dusty-surface: light-dark(#faf7f2, #14191b);
+  --dusty-surface-raised: light-dark(#fff, #1c2326);
+  --dusty-surface-sunken: light-dark(#f1ece3, #0f1314);
+  --dusty-surface-hover: light-dark(#f1ece3, #232c30);
+  --dusty-surface-selected: light-dark(#dcebed, #1f3a40);
+  --dusty-text: light-dark(#1f2a2e, #e8e4dc);
+  --dusty-text-muted: light-dark(#55636a, #a3acaf);
+  --dusty-text-disabled: light-dark(#9aa3a3, #5f6a6e);
+  --dusty-border: light-dark(#d9d2c5, #3a4448);
+  --dusty-border-strong: light-dark(#7d837f, #7f8a8e);
+  --dusty-focus-ring: light-dark(#1d6f7a, #6cc5d0);
+  --dusty-action: light-dark(#1f2a2e, #e8e4dc);
+  --dusty-action-hover: light-dark(#33424a, #cfc9be);
+  --dusty-action-active: light-dark(#465862, #b9b3a8);
+  --dusty-on-action: light-dark(#faf7f2, #14191b);
+  --dusty-syntax-string: light-dark(#a04a1c, #e8a87c);
+  --dusty-syntax-number: light-dark(#1d5f8a, #7fb8e0);
+  --dusty-syntax-boolean: light-dark(#7a4a9a, #c79be0);
+  --dusty-syntax-function: light-dark(#2f6b3f, #8fcf9a);
+}

package/dist/styles/themes/mono.css

@@ -0,0 +1,21 @@
+[data-theme="mono"] {
+  --dusty-surface: light-dark(#fafafa, #1a1a1a);
+  --dusty-surface-raised: light-dark(#fff, #242424);
+  --dusty-surface-sunken: light-dark(#eee, #121212);
+  --dusty-surface-hover: light-dark(#eee, #2e2e2e);
+  --dusty-surface-selected: light-dark(#e0e0e0, #3a3a3a);
+  --dusty-text: light-dark(#222, #f0f0f0);
+  --dusty-text-muted: light-dark(#555, #adadad);
+  --dusty-text-disabled: light-dark(#999, #6b6b6b);
+  --dusty-border: light-dark(#ddd, #3d3d3d);
+  --dusty-border-strong: light-dark(#767676, #8a8a8a);
+  --dusty-focus-ring: light-dark(#222, #fafafa);
+  --dusty-action: light-dark(#222, #f0f0f0);
+  --dusty-action-hover: light-dark(#3a3a3a, #d6d6d6);
+  --dusty-action-active: light-dark(#505050, #bdbdbd);
+  --dusty-on-action: light-dark(#fafafa, #1a1a1a);
+  --dusty-syntax-string: light-dark(#8a3d12, #e8a87c);
+  --dusty-syntax-number: light-dark(#1d5f8a, #7fb8e0);
+  --dusty-syntax-boolean: light-dark(#7a4a9a, #c79be0);
+  --dusty-syntax-function: light-dark(#2f6b3f, #8fcf9a);
+}

package/dist/styles/tokens.css

@@ -0,0 +1,21 @@
+:root {
+  --dusty-radius-sm: 0.25rem;
+  --dusty-radius-md: 0.5rem;
+  --dusty-radius-full: 999px;
+  --dusty-weight-semibold: 600;
+  --dusty-font-mono: ui-monospace, "SFMono-Regular", menlo, consolas, monospace;
+  --dusty-focus-ring-width: 2px;
+  --dusty-focus-ring-offset: 2px;
+}
+
+:where(:root) {
+  color-scheme: light dark;
+}
+
+[data-color-scheme="light"] {
+  color-scheme: light;
+}
+
+[data-color-scheme="dark"] {
+  color-scheme: dark;
+}

package/dist/styles/visuallyHidden.module.css

@@ -0,0 +1,8 @@
+.visuallyHidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}