dustyui 1.0.1 → 2.0.0

package/dist/ObjectInspector/describe/getValueKind.d.ts

@@ -0,0 +1,2 @@
+export type ValueKind = "string" | "number" | "bigint" | "boolean" | "null" | "undefined" | "symbol" | "function" | "array" | "object" | "map" | "set" | "date" | "regexp" | "error" | "entry" | "getter" | "circular" | "uninspectable";
+export declare function getValueKind(value: unknown): ValueKind;

package/dist/ObjectInspector/describe/getValueKind.js

@@ -0,0 +1,64 @@
+import { getDateTime, getMapSize, getRegExpSource, getSetSize, getTypedArrayLength, } from "./safeRead.js";
+function succeeds(read) {
+    try {
+        read();
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function isRegExp(value) {
+    return value !== RegExp.prototype && succeeds(() => getRegExpSource(value));
+}
+function isError(value) {
+    const { isError: nativeIsError } = Error;
+    return nativeIsError ? nativeIsError(value) : value instanceof Error;
+}
+function isTypedArray(value) {
+    return (ArrayBuffer.isView(value) && succeeds(() => getTypedArrayLength(value)));
+}
+function hasPlainPrototype(value) {
+    try {
+        const prototype = Reflect.getPrototypeOf(value);
+        return prototype === Object.prototype || prototype === null;
+    }
+    catch {
+        return false;
+    }
+}
+function getObjectKind(value) {
+    if (Array.isArray(value) || isTypedArray(value)) {
+        return "array";
+    }
+    if (hasPlainPrototype(value)) {
+        return "object";
+    }
+    if (succeeds(() => getMapSize(value))) {
+        return "map";
+    }
+    if (succeeds(() => getSetSize(value))) {
+        return "set";
+    }
+    if (succeeds(() => getDateTime(value))) {
+        return "date";
+    }
+    if (isRegExp(value)) {
+        return "regexp";
+    }
+    if (isError(value)) {
+        return "error";
+    }
+    return "object";
+}
+export function getValueKind(value) {
+    if (value === null) {
+        return "null";
+    }
+    switch (typeof value) {
+        case "object":
+            return getObjectKind(value);
+        default:
+            return typeof value;
+    }
+}

package/dist/ObjectInspector/describe/safeRead.d.ts

@@ -0,0 +1,12 @@
+export declare const getMapSize: (target: unknown) => number;
+export declare const getSetSize: (target: unknown) => number;
+export declare const getTypedArrayLength: (target: unknown) => number;
+export declare const getRegExpSource: (target: unknown) => string;
+export declare function getDateTime(value: object): number;
+export declare function getRegExpText(value: object): string;
+export declare function getSymbolText(value: symbol): string;
+export declare function isClass(value: object): boolean;
+export declare function getDataProperty(target: object, key: PropertyKey): unknown;
+export declare function getArrayLength(value: unknown): number | undefined;
+export declare function getConstructorName(value: object): string | undefined;
+export declare function getFailureReason(error: unknown): string;

package/dist/ObjectInspector/describe/safeRead.js

@@ -0,0 +1,88 @@
+function nativeGetter(prototype, name) {
+    const get = Object.getOwnPropertyDescriptor(prototype, name)?.get;
+    if (!get) {
+        throw new TypeError(`Missing native getter: ${name}`);
+    }
+    return (target) => get.call(target);
+}
+const typedArrayPrototype = Object.getPrototypeOf(Uint8Array.prototype);
+const getTime = Date.prototype.getTime;
+const functionToString = Function.prototype.toString;
+const symbolToString = Symbol.prototype.toString;
+export const getMapSize = nativeGetter(Map.prototype, "size");
+export const getSetSize = nativeGetter(Set.prototype, "size");
+export const getTypedArrayLength = nativeGetter(typedArrayPrototype, "length");
+export const getRegExpSource = nativeGetter(RegExp.prototype, "source");
+const regExpFlags = [
+    ["d", "hasIndices"],
+    ["g", "global"],
+    ["i", "ignoreCase"],
+    ["m", "multiline"],
+    ["s", "dotAll"],
+    ["u", "unicode"],
+    ["v", "unicodeSets"],
+    ["y", "sticky"],
+].flatMap(([flag, name]) => Object.getOwnPropertyDescriptor(RegExp.prototype, name)?.get
+    ? [[flag, nativeGetter(RegExp.prototype, name)]]
+    : []);
+export function getDateTime(value) {
+    return getTime.call(value);
+}
+export function getRegExpText(value) {
+    const flags = regExpFlags
+        .filter(([, isSet]) => isSet(value))
+        .map(([flag]) => flag)
+        .join("");
+    return `/${getRegExpSource(value)}/${flags}`;
+}
+export function getSymbolText(value) {
+    return symbolToString.call(value);
+}
+export function isClass(value) {
+    return functionToString.call(value).startsWith("class");
+}
+export function getDataProperty(target, key) {
+    const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
+    return descriptor && "value" in descriptor ? descriptor.value : undefined;
+}
+export function getArrayLength(value) {
+    try {
+        if (!Array.isArray(value)) {
+            return undefined;
+        }
+        const length = getDataProperty(value, "length");
+        return typeof length === "number" ? length : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+export function getConstructorName(value) {
+    const prototype = Reflect.getPrototypeOf(value);
+    if (prototype === null) {
+        return undefined;
+    }
+    const constructor = getDataProperty(prototype, "constructor");
+    if (typeof constructor !== "function") {
+        return undefined;
+    }
+    const name = getDataProperty(constructor, "name");
+    return typeof name === "string" && name !== "" ? name : undefined;
+}
+export function getFailureReason(error) {
+    try {
+        if (typeof error === "string") {
+            return error;
+        }
+        if (typeof error === "object" && error !== null) {
+            const message = getDataProperty(error, "message");
+            if (typeof message === "string" && message !== "") {
+                return message;
+            }
+        }
+    }
+    catch {
+        return "unknown error";
+    }
+    return "unknown error";
+}

package/dist/ObjectInspector/getCopyText.d.ts

@@ -0,0 +1,2 @@
+import type { InspectorNode } from "./describe/describe.js";
+export declare function getCopyText(root: InspectorNode, limit?: number): string;

package/dist/ObjectInspector/getCopyText.js

@@ -0,0 +1,103 @@
+import { getArrayLength } from "./describe/safeRead.js";
+import { getLabelText } from "./getLabelText.js";
+import { getValueText } from "./getValueText.js";
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/u;
+const INDENT = "  ";
+const PLAIN_TYPES = new Set(["Object", "Array"]);
+function getPrefix(node, isRoot) {
+    if (isRoot || !node.label || node.label.type === "index") {
+        return "";
+    }
+    const text = getLabelText(node.label);
+    const isPlain = node.label.type !== "property" || IDENTIFIER.test(text);
+    return `${isPlain ? text : JSON.stringify(text)}: `;
+}
+function getLeafText(node) {
+    if (node.kind === "string" && typeof node.value === "string") {
+        return JSON.stringify(node.value);
+    }
+    const length = getListLength(node);
+    if (length !== undefined && length > 0) {
+        return `[${getHoleText(length).slice(0, -1)}]`;
+    }
+    return node.typeName && PLAIN_TYPES.has(node.typeName)
+        ? getOpening(node) + getClosing(node)
+        : node.preview;
+}
+function getOpening(node) {
+    const bracket = node.kind === "array" ? "[" : "{";
+    return node.typeName && !PLAIN_TYPES.has(node.typeName)
+        ? `${node.typeName} ${bracket}`
+        : bracket;
+}
+function getListLength(node) {
+    return node.kind === "array" ? getArrayLength(node.value) : undefined;
+}
+function getHoleText(count) {
+    return `<${count} empty ${count === 1 ? "item" : "items"}>,`;
+}
+function getClosing(node) {
+    return node.kind === "array" ? "]" : "}";
+}
+export function getCopyText(root, limit = 5000) {
+    if (root.childCount === 0) {
+        return root.kind === "string" ? getValueText(root) : getLeafText(root);
+    }
+    const lines = [];
+    const pending = [root];
+    const depths = new Map([[root, 0]]);
+    let remaining = limit;
+    let isCut = false;
+    for (let item = pending.pop(); item !== undefined; item = pending.pop()) {
+        if (typeof item === "string") {
+            lines.push(item);
+            continue;
+        }
+        const depth = depths.get(item) ?? 0;
+        depths.delete(item);
+        const indent = INDENT.repeat(depth);
+        const end = item === root ? "" : ",";
+        if (remaining <= 0) {
+            if (!isCut) {
+                isCut = true;
+                lines.push(`${indent}…`);
+            }
+            continue;
+        }
+        remaining -= 1;
+        const prefix = indent + getPrefix(item, item === root);
+        if (item.childCount === 0) {
+            lines.push(prefix + getLeafText(item) + end);
+            continue;
+        }
+        if (item.childCount > limit) {
+            lines.push(prefix + item.preview + end);
+            continue;
+        }
+        lines.push(prefix + getOpening(item));
+        pending.push(indent + getClosing(item) + end);
+        const children = item.children();
+        const childIndent = INDENT.repeat(depth + 1);
+        const length = getListLength(item);
+        const isList = length !== undefined;
+        let next = length ?? 0;
+        for (let index = children.length - 1; index >= 0; index--) {
+            const child = children[index];
+            if (!child) {
+                continue;
+            }
+            if (isList && child.label?.type === "index") {
+                if (child.label.index + 1 < next) {
+                    pending.push(childIndent + getHoleText(next - child.label.index - 1));
+                }
+                next = child.label.index;
+            }
+            depths.set(child, depth + 1);
+            pending.push(child);
+        }
+        if (isList && next > 0) {
+            pending.push(childIndent + getHoleText(next));
+        }
+    }
+    return lines.join("\n");
+}

package/dist/ObjectInspector/getLabelText.d.ts

@@ -0,0 +1,2 @@
+import type { NodeLabel } from "./describe/describe.js";
+export declare function getLabelText(label: NodeLabel): string;

package/dist/ObjectInspector/getLabelText.js

@@ -0,0 +1,15 @@
+export function getLabelText(label) {
+    switch (label.type) {
+        case "property":
+            return label.key === "" ? '""' : label.key;
+        case "symbol":
+            return Symbol.prototype.toString.call(label.key);
+        case "index":
+        case "entry":
+            return String(label.index);
+        case "entryKey":
+            return "key";
+        case "entryValue":
+            return "value";
+    }
+}

package/dist/ObjectInspector/getValueText.d.ts

@@ -0,0 +1,2 @@
+import type { InspectorNode } from "./describe/describe.js";
+export declare function getValueText(node: InspectorNode): string;

package/dist/ObjectInspector/getValueText.js

@@ -0,0 +1,5 @@
+export function getValueText(node) {
+    return node.kind === "string" && typeof node.value === "string"
+        ? node.value
+        : node.preview;
+}

package/dist/ObjectInspector/search/getHighlightParts.d.ts

@@ -0,0 +1,5 @@
+export interface HighlightPart {
+    readonly text: string;
+    readonly isMatch: boolean;
+}
+export declare function getHighlightParts(text: string, search: string): HighlightPart[];

package/dist/ObjectInspector/search/getHighlightParts.js

@@ -0,0 +1,20 @@
+export function getHighlightParts(text, search) {
+    const query = search.trim().toLocaleLowerCase();
+    const lowered = text.toLocaleLowerCase();
+    if (query === "" || lowered.length !== text.length) {
+        return [{ text, isMatch: false }];
+    }
+    const parts = [];
+    let position = 0;
+    for (let found = lowered.indexOf(query); found >= 0; found = lowered.indexOf(query, position)) {
+        if (found > position) {
+            parts.push({ text: text.slice(position, found), isMatch: false });
+        }
+        position = found + query.length;
+        parts.push({ text: text.slice(found, position), isMatch: true });
+    }
+    if (position < text.length || parts.length === 0) {
+        parts.push({ text: text.slice(position), isMatch: false });
+    }
+    return parts;
+}

package/dist/ObjectInspector/search/getMatches.d.ts

@@ -0,0 +1,6 @@
+import type { InspectorNode } from "../describe/describe.js";
+export interface Matches {
+    readonly ids: readonly string[];
+    readonly isComplete: boolean;
+}
+export declare function getMatches(root: InspectorNode, text: string, limit: number): Matches;

package/dist/ObjectInspector/search/getMatches.js

@@ -0,0 +1,46 @@
+import { getLabelText } from "../getLabelText.js";
+import { getValueText } from "../getValueText.js";
+const NO_MATCHES = { ids: [], isComplete: true };
+function isMatch(node, query) {
+    if (node.label &&
+        getLabelText(node.label).toLocaleLowerCase().includes(query)) {
+        return true;
+    }
+    return (node.childCount === 0 &&
+        getValueText(node).toLocaleLowerCase().includes(query));
+}
+export function getMatches(root, text, limit) {
+    const query = text.trim().toLocaleLowerCase();
+    if (query === "") {
+        return NO_MATCHES;
+    }
+    const ids = [];
+    const pending = [root];
+    let remaining = limit;
+    let isComplete = true;
+    for (let node = pending.pop(); node; node = pending.pop()) {
+        if (remaining <= 0) {
+            isComplete = false;
+            break;
+        }
+        remaining -= 1;
+        if (isMatch(node, query)) {
+            ids.push(node.id);
+        }
+        if (node.childCount === 0) {
+            continue;
+        }
+        if (node.childCount > limit) {
+            isComplete = false;
+            continue;
+        }
+        const children = node.children();
+        for (let index = children.length - 1; index >= 0; index--) {
+            const child = children[index];
+            if (child) {
+                pending.push(child);
+            }
+        }
+    }
+    return { ids, isComplete };
+}

package/dist/ObjectInspector/search/getSearchStatus.d.ts

@@ -0,0 +1,2 @@
+import type { Matches } from "./getMatches.js";
+export declare function getSearchStatus(query: string, matches: Matches, current: number): string;

package/dist/ObjectInspector/search/getSearchStatus.js

@@ -0,0 +1,14 @@
+export function getSearchStatus(query, matches, current) {
+    if (query.trim() === "") {
+        return "";
+    }
+    const count = matches.ids.length;
+    const scope = matches.isComplete ? "" : " in the part that was searched";
+    if (count === 0) {
+        return `No matches${scope}`;
+    }
+    if (current >= 0) {
+        return `${current + 1} of ${count}${scope}`;
+    }
+    return `${count} ${count === 1 ? "match" : "matches"}${scope}`;
+}

package/dist/Tree/Tree.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type TreeNode, type TreeRow } from "./treeModel.js";
+export interface TreeProps<Node extends TreeNode> extends Omit<ComponentProps<"div">, "children" | "dangerouslySetInnerHTML" | "role" | "aria-label" | "aria-labelledby"> {
+    root: Node;
+    label: string;
+    renderRow: (row: TreeRow<Node>) => ReactNode;
+    getRowText?: (row: TreeRow<Node>) => string;
+    expanded?: ReadonlySet<string>;
+    defaultExpanded?: Iterable<string>;
+    onExpandedChange?: (expanded: ReadonlySet<string>) => void;
+    selected?: string;
+    onSelectedChange?: (selected: string) => void;
+}
+export declare function Tree<Node extends TreeNode>({ root, label, renderRow, getRowText, expanded: controlledExpanded, defaultExpanded, onExpandedChange, selected: controlledSelected, onSelectedChange, className, onKeyDown, onFocus, onBlur, ref, ...props }: TreeProps<Node>): import("react").JSX.Element;

package/dist/Tree/Tree.js

@@ -0,0 +1,166 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import clsx from "clsx";
+import { getWindowItems } from "./getWindow.js";
+import { findVisibleAncestor, keyToAction, reduceTree, visibleRows, } from "./treeModel.js";
+import { useRowWindow } from "./useRowWindow.js";
+import { useTypeahead } from "./useTypeahead.js";
+import styles from "./Tree.module.css";
+const TAB_STOP = ':scope > [tabindex="0"]';
+const INTERACTIVE = [
+    "a[href]",
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "summary",
+    "label",
+    '[role="button"]',
+    '[role="link"]',
+    '[role="checkbox"]',
+    '[role="switch"]',
+    '[contenteditable=""]',
+    '[contenteditable="true"]',
+    '[tabindex]:not([tabindex="-1"])',
+].join(",");
+function hasRow(rows, id) {
+    return id !== undefined && rows.some((row) => row.id === id);
+}
+function getSelected(rows, controlled, own) {
+    return hasRow(rows, controlled) ? controlled : own;
+}
+function isInsideControl(target, row) {
+    if (!(target instanceof Element)) {
+        return false;
+    }
+    const control = target.closest(INTERACTIVE);
+    return control !== null && control !== row && row.contains(control);
+}
+export function Tree({ root, label, renderRow, getRowText, expanded: controlledExpanded, defaultExpanded, onExpandedChange, selected: controlledSelected, onSelectedChange, className, onKeyDown, onFocus, onBlur, ref, ...props }) {
+    const [ownExpanded, setOwnExpanded] = useState(() => new Set(defaultExpanded));
+    const [ownSelected, setOwnSelected] = useState();
+    const element = useRef(null);
+    const focusAfterRender = useRef(false);
+    const hasFocusWithin = useRef(false);
+    const reported = useRef(controlledSelected);
+    const expanded = controlledExpanded ?? ownExpanded;
+    const rows = useMemo(() => visibleRows(root, expanded), [root, expanded]);
+    const [previousRows, setPreviousRows] = useState(rows);
+    if (previousRows !== rows) {
+        setPreviousRows(rows);
+        const before = getSelected(previousRows, controlledSelected, ownSelected);
+        if (before !== undefined && !hasRow(rows, before)) {
+            setOwnSelected(findVisibleAncestor(previousRows, before, rows));
+        }
+    }
+    const focused = getSelected(rows, controlledSelected, ownSelected);
+    const tabStop = useMemo(() => Math.max(0, rows.findIndex((row) => row.id === focused)), [rows, focused]);
+    const rowWindow = useRowWindow(element, rows.length);
+    const withTypedText = useTypeahead();
+    const scrolledTo = useRef(focused);
+    const notifySelected = useEffectEvent((id) => {
+        onSelectedChange?.(id);
+    });
+    useEffect(() => {
+        if (focused !== undefined &&
+            focused !== controlledSelected &&
+            focused !== reported.current) {
+            reported.current = focused;
+            notifySelected(focused);
+        }
+    }, [focused, controlledSelected]);
+    useImperativeHandle(ref, () => element.current);
+    useLayoutEffect(() => {
+        const container = element.current;
+        if (!container) {
+            return;
+        }
+        for (const child of container.children) {
+            if (!(child instanceof HTMLElement)) {
+                continue;
+            }
+            const gapRows = child.dataset.gapRows;
+            if (gapRows === undefined) {
+                child.style.setProperty("--tree-level", child.getAttribute("aria-level") ?? "1");
+            }
+            else {
+                child.style.setProperty("--tree-gap-rows", gapRows);
+            }
+        }
+        const lostFocus = hasFocusWithin.current && !container.contains(document.activeElement);
+        if (focusAfterRender.current || lostFocus) {
+            focusAfterRender.current = false;
+            const target = container.querySelector(TAB_STOP);
+            if (target instanceof HTMLElement) {
+                target.focus();
+            }
+        }
+        if (scrolledTo.current !== focused) {
+            scrolledTo.current = focused;
+            container
+                .querySelector(TAB_STOP)
+                ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+        }
+    });
+    function select(id) {
+        if (id === focused) {
+            return;
+        }
+        reported.current = id;
+        if (controlledSelected === undefined) {
+            setOwnSelected(id);
+        }
+        onSelectedChange?.(id);
+    }
+    function dispatch(action) {
+        const current = { expanded, focused: rows[tabStop]?.id };
+        const next = reduceTree(rows, current, action, getRowText);
+        if (next.expanded !== expanded) {
+            if (controlledExpanded === undefined) {
+                setOwnExpanded(next.expanded);
+            }
+            onExpandedChange?.(next.expanded);
+        }
+        if (next.focused !== undefined && next.focused !== focused) {
+            focusAfterRender.current = true;
+            select(next.focused);
+        }
+    }
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey ||
+            event.target !== event.currentTarget) {
+            return;
+        }
+        const action = keyToAction(event.key);
+        if (action) {
+            event.preventDefault();
+            dispatch(withTypedText(action, event.timeStamp));
+        }
+    }
+    function renderTreeRow(row, index) {
+        if (!row) {
+            return null;
+        }
+        return (_jsxs("div", { role: "treeitem", "aria-level": row.level, "aria-setsize": row.setSize, "aria-posinset": row.positionInSet, "aria-expanded": row.expandable ? row.expanded : undefined, "aria-selected": row.id === focused, tabIndex: index === tabStop ? 0 : -1, className: styles.row, style: { "--tree-level": row.level }, onClick: (event) => {
+                if (!isInsideControl(event.target, event.currentTarget)) {
+                    dispatch({ type: "toggle", id: row.id });
+                }
+            }, onFocus: () => select(row.id), onKeyDown: handleKeyDown, children: [_jsx("span", { className: styles.toggle, "aria-hidden": "true" }), _jsx("span", { children: renderRow(row) })] }, row.id));
+    }
+    return (_jsx("div", { ...props, ref: element, role: "tree", "aria-label": label, tabIndex: -1, className: clsx(styles.tree, className), onFocus: (event) => {
+            hasFocusWithin.current = true;
+            onFocus?.(event);
+        }, onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+                hasFocusWithin.current = false;
+            }
+            onBlur?.(event);
+        }, children: rowWindow
+            ? getWindowItems(rowWindow, rows.length, tabStop).map((item) => item.type === "gap" ? (_jsx("div", { role: "none", className: styles.gap, "data-gap-rows": item.rowCount, style: { "--tree-gap-rows": item.rowCount } }, `gap-${item.id}`)) : (renderTreeRow(rows[item.index], item.index)))
+            : rows.map(renderTreeRow) }));
+}

package/dist/Tree/Tree.module.css

@@ -0,0 +1,65 @@
+.tree {
+  overflow-x: auto;
+  color: var(--dusty-text);
+  font-family: var(--dusty-font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.row {
+  display: flex;
+  align-items: baseline;
+  inline-size: max-content;
+  min-inline-size: 100%;
+  padding-inline: calc((var(--tree-level, 1) - 1) * var(--tree-indent, 1rem))
+    0.5rem;
+  block-size: var(--tree-row-height, 1.3rem);
+  border-radius: var(--dusty-radius-sm);
+  white-space: nowrap;
+  cursor: default;
+}
+
+.gap {
+  block-size: calc(var(--tree-gap-rows, 0) * var(--tree-row-height, 1.3rem));
+}
+
+.row[aria-expanded] {
+  cursor: pointer;
+}
+
+.row[aria-selected="true"] {
+  background-color: var(--dusty-surface-selected);
+}
+
+.row:focus-visible {
+  outline: var(--dusty-focus-ring-width) solid var(--dusty-focus-ring);
+  outline-offset: calc(-1 * var(--dusty-focus-ring-width));
+}
+
+.toggle {
+  flex: none;
+  inline-size: 1rem;
+  color: var(--dusty-text-muted);
+  text-align: center;
+}
+
+.row[aria-expanded] > .toggle::before {
+  display: inline-block;
+  content: "▸";
+}
+
+.row[aria-expanded="true"] > .toggle::before {
+  rotate: 90deg;
+}
+
+@media (hover: hover) {
+  .row:hover:not([aria-selected="true"]) {
+    background-color: var(--dusty-surface-hover);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .row[aria-expanded] > .toggle::before {
+    transition: rotate 120ms ease-out;
+  }
+}