dustyui 1.0.1 → 2.0.0

package/dist/ObjectInspector/ObjectInspector.js

@@ -0,0 +1,83 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useDeferredValue, useEffect, useMemo, useState, } from "react";
+import { announce } from "../announcer/announcer.js";
+import { Tree } from "../Tree/Tree.js";
+import { describe } from "./describe/describe.js";
+import { getNode } from "./describe/getNode.js";
+import { getAncestorIds, ROOT_ID } from "./describe/getPath.js";
+import { getLabelText } from "./getLabelText.js";
+import { InspectorDetails } from "./InspectorDetails.js";
+import { InspectorSearch } from "./InspectorSearch.js";
+import { getHighlightParts } from "./search/getHighlightParts.js";
+import { getMatches } from "./search/getMatches.js";
+import { getSearchStatus } from "./search/getSearchStatus.js";
+import styles from "./ObjectInspector.module.css";
+const ROOT_OPEN = [ROOT_ID];
+const SEARCH_LIMIT = 500_000;
+const ANNOUNCE_DELAY = 700;
+function getRowText({ node }) {
+    return node.label ? getLabelText(node.label) : "";
+}
+function Highlighted({ text, query }) {
+    if (query === "") {
+        return text;
+    }
+    return getHighlightParts(text, query).map((part, index) => part.isMatch ? (_jsx("mark", { className: styles.match, children: part.text }, index)) : (part.text));
+}
+export function ObjectInspector({ value, searchable = false, showDetails = false, expanded: controlledExpanded, defaultExpanded = ROOT_OPEN, onExpandedChange, selected: controlledSelected, onSelectedChange, ...props }) {
+    const root = useMemo(() => describe(value), [value]);
+    const [ownExpanded, setOwnExpanded] = useState(() => new Set(defaultExpanded));
+    const [ownSelected, setOwnSelected] = useState();
+    const [query, setQuery] = useState("");
+    const [position, setPosition] = useState({ matches: undefined, index: -1 });
+    const expanded = controlledExpanded ?? ownExpanded;
+    const selected = controlledSelected ?? ownSelected;
+    const searched = useDeferredValue(searchable ? query : "");
+    const matches = useMemo(() => getMatches(root, searched, SEARCH_LIMIT), [root, searched]);
+    const current = position.matches === matches ? position.index : -1;
+    const status = getSearchStatus(searched, matches, current);
+    const selectedNode = useMemo(() => showDetails && selected !== undefined
+        ? (getNode(root, selected) ?? root)
+        : root, [showDetails, root, selected]);
+    useEffect(() => {
+        if (status === "") {
+            return;
+        }
+        const timer = setTimeout(() => announce(status), ANNOUNCE_DELAY);
+        return () => clearTimeout(timer);
+    }, [status]);
+    function changeExpanded(next) {
+        if (controlledExpanded === undefined) {
+            setOwnExpanded(next);
+        }
+        onExpandedChange?.(next);
+    }
+    function changeSelected(next) {
+        if (controlledSelected === undefined) {
+            setOwnSelected(next);
+        }
+        onSelectedChange?.(next);
+    }
+    function moveToMatch(step) {
+        const count = matches.ids.length;
+        const start = current < 0 && step < 0 ? 0 : current;
+        const index = (start + step + count) % count;
+        const id = matches.ids[index];
+        if (id === undefined) {
+            return;
+        }
+        const closed = getAncestorIds(id).filter((ancestor) => !expanded.has(ancestor));
+        if (closed.length > 0) {
+            changeExpanded(new Set([...expanded, ...closed]));
+        }
+        changeSelected(id);
+        setPosition({ matches, index });
+    }
+    const renderRow = useCallback(({ node }) => (_jsxs(_Fragment, { children: [node.label ? (_jsxs(_Fragment, { children: [_jsx("span", { children: _jsx(Highlighted, { text: getLabelText(node.label), query: searched }) }), _jsx("span", { className: styles.separator, children: ": " })] })) : null, _jsx("span", { className: styles.value, "data-kind": node.kind, children: node.childCount === 0 ? (_jsx(Highlighted, { text: node.preview, query: searched })) : (node.preview) })] })), [searched]);
+    const tree = (_jsx(Tree, { ...props, root: root, expanded: expanded, onExpandedChange: changeExpanded, selected: selected, onSelectedChange: changeSelected, renderRow: renderRow, getRowText: getRowText }));
+    if (!searchable && !showDetails) {
+        return tree;
+    }
+    return (_jsxs("div", { className: styles.inspector, children: [searchable ? (_jsx(InspectorSearch, { query: query, status: status, hasMatches: matches.ids.length > 0, onQueryChange: setQuery, onMove: moveToMatch })) : null, tree, showDetails ? _jsx(InspectorDetails, { node: selectedNode }) : null] }));
+}

package/dist/ObjectInspector/ObjectInspector.module.css

@@ -0,0 +1,46 @@
+.separator {
+  color: var(--dusty-text-muted);
+}
+
+.value[data-kind="string"],
+.value[data-kind="symbol"],
+.value[data-kind="regexp"] {
+  color: var(--dusty-syntax-string);
+}
+
+.value[data-kind="number"],
+.value[data-kind="bigint"],
+.value[data-kind="date"] {
+  color: var(--dusty-syntax-number);
+}
+
+.value[data-kind="boolean"],
+.value[data-kind="null"],
+.value[data-kind="undefined"] {
+  color: var(--dusty-syntax-boolean);
+}
+
+.value[data-kind="function"] {
+  color: var(--dusty-syntax-function);
+}
+
+.value[data-kind="getter"],
+.value[data-kind="circular"],
+.value[data-kind="uninspectable"] {
+  color: var(--dusty-text-muted);
+  font-style: italic;
+}
+
+.inspector {
+  display: grid;
+  gap: 0.5rem;
+  color: var(--dusty-text);
+}
+
+.match {
+  background-color: transparent;
+  color: inherit;
+  font-weight: var(--dusty-weight-semibold);
+  text-decoration: underline;
+  text-decoration-thickness: 0.125em;
+}

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

@@ -0,0 +1,31 @@
+import { type ValueKind } from "./getValueKind.js";
+export type { ValueKind } from "./getValueKind.js";
+export type NodeLabel = {
+    readonly type: "property";
+    readonly key: string;
+} | {
+    readonly type: "symbol";
+    readonly key: symbol;
+} | {
+    readonly type: "index";
+    readonly index: number;
+} | {
+    readonly type: "entry";
+    readonly index: number;
+} | {
+    readonly type: "entryKey";
+} | {
+    readonly type: "entryValue";
+};
+export interface InspectorNode {
+    readonly id: string;
+    readonly path: string;
+    readonly label: NodeLabel | undefined;
+    readonly value: unknown;
+    readonly kind: ValueKind;
+    readonly typeName: string | undefined;
+    readonly preview: string;
+    readonly childCount: number;
+    children(): readonly InspectorNode[];
+}
+export declare function describe(value: unknown): InspectorNode;

package/dist/ObjectInspector/describe/describe.js

@@ -0,0 +1,123 @@
+var _a;
+import { getChildren, getEntryChildren, } from "./getChildren.js";
+import { getChildId, getPath, ROOT_ID } from "./getPath.js";
+import { getPreview } from "./getPreview.js";
+import { getValueKind } from "./getValueKind.js";
+import { getConstructorName, getFailureReason } from "./safeRead.js";
+const NO_CHILDREN = [];
+function isObject(value) {
+    return ((typeof value === "object" && value !== null) || typeof value === "function");
+}
+function toLeaf(kind, detail = "") {
+    return { kind, typeName: undefined, detail, children: NO_CHILDREN };
+}
+function toLabel(step) {
+    switch (step.type) {
+        case "symbol":
+            return { type: "symbol", key: step.key };
+        case "item":
+            return { type: "index", index: step.index };
+        default:
+            return step;
+    }
+}
+function findAncestor(value, ancestors) {
+    for (let current = ancestors; current; current = current.parent) {
+        if (current.value === value) {
+            return current;
+        }
+    }
+    return undefined;
+}
+function getObjectShape(target, ancestors) {
+    const repeated = findAncestor(target, ancestors);
+    if (repeated) {
+        return toLeaf("circular", repeated.path);
+    }
+    const kind = getValueKind(target);
+    return {
+        kind,
+        typeName: kind === "function" ? undefined : getConstructorName(target),
+        detail: "",
+        children: getChildren(target, kind),
+    };
+}
+function getShape(source, ancestors) {
+    switch (source.type) {
+        case "getter":
+            return toLeaf("getter");
+        case "failure":
+            return toLeaf("uninspectable", source.reason);
+        case "entry":
+            return {
+                kind: "entry",
+                typeName: undefined,
+                detail: "",
+                children: getEntryChildren(source.key, source.value),
+            };
+        case "value":
+            try {
+                return isObject(source.value)
+                    ? getObjectShape(source.value, ancestors)
+                    : toLeaf(getValueKind(source.value));
+            }
+            catch (error) {
+                return toLeaf("uninspectable", getFailureReason(error));
+            }
+    }
+}
+class ValueNode {
+    id;
+    path;
+    label;
+    #source;
+    #ancestors;
+    #shape;
+    #preview;
+    #children;
+    constructor(id, path, label, source, ancestors) {
+        this.id = id;
+        this.path = path;
+        this.label = label;
+        this.#source = source;
+        this.#ancestors = ancestors;
+    }
+    get #resolved() {
+        this.#shape ??= getShape(this.#source, this.#ancestors);
+        return this.#shape;
+    }
+    get value() {
+        return this.#source.type === "value" ? this.#source.value : undefined;
+    }
+    get kind() {
+        return this.#resolved.kind;
+    }
+    get typeName() {
+        return this.#resolved.typeName;
+    }
+    get preview() {
+        this.#preview ??= getPreview({
+            ...this.#resolved,
+            source: this.#source,
+        });
+        return this.#preview;
+    }
+    get childCount() {
+        return this.#resolved.children.length;
+    }
+    children() {
+        this.#children ??= this.#createChildren();
+        return this.#children;
+    }
+    #createChildren() {
+        const { value } = this;
+        const ancestors = this.#source.type === "value" && isObject(value)
+            ? { value, path: this.path, parent: this.#ancestors }
+            : this.#ancestors;
+        return this.#resolved.children.map(({ step, source }) => new _a(getChildId(this.id, step), getPath(this.path, step), toLabel(step), source, ancestors));
+    }
+}
+_a = ValueNode;
+export function describe(value) {
+    return new ValueNode(ROOT_ID, ROOT_ID, undefined, { type: "value", value }, undefined);
+}

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

@@ -0,0 +1,21 @@
+import { type PathStep } from "./getPath.js";
+import type { ValueKind } from "./getValueKind.js";
+export type ChildSource = {
+    readonly type: "value";
+    readonly value: unknown;
+} | {
+    readonly type: "getter";
+} | {
+    readonly type: "failure";
+    readonly reason: string;
+} | {
+    readonly type: "entry";
+    readonly key: unknown;
+    readonly value: unknown;
+};
+export interface Child {
+    readonly step: PathStep;
+    readonly source: ChildSource;
+}
+export declare function getEntryChildren(key: unknown, value: unknown): Child[];
+export declare function getChildren(target: object, kind: ValueKind): Child[];

package/dist/ObjectInspector/describe/getChildren.js

@@ -0,0 +1,77 @@
+import { getArrayIndex } from "./getPath.js";
+import { getFailureReason } from "./safeRead.js";
+function getPropertySource(target, key) {
+    try {
+        const descriptor = Reflect.getOwnPropertyDescriptor(target, key);
+        if (!descriptor?.enumerable) {
+            return undefined;
+        }
+        return "value" in descriptor
+            ? { type: "value", value: descriptor.value }
+            : { type: "getter" };
+    }
+    catch (error) {
+        return { type: "failure", reason: getFailureReason(error) };
+    }
+}
+function getPropertyStep(key, symbolPosition, indexed) {
+    if (typeof key === "symbol") {
+        return { type: "symbol", key, position: symbolPosition };
+    }
+    const index = indexed ? getArrayIndex(key) : undefined;
+    return index === undefined
+        ? { type: "property", key }
+        : { type: "index", index };
+}
+function getPropertyChildren(target, indexed) {
+    const children = [];
+    let symbolPosition = 0;
+    for (const key of Reflect.ownKeys(target)) {
+        const step = getPropertyStep(key, symbolPosition, indexed);
+        if (step.type === "symbol") {
+            symbolPosition++;
+        }
+        const source = getPropertySource(target, key);
+        if (source) {
+            children.push({ step, source });
+        }
+    }
+    return children;
+}
+function getMapChildren(target) {
+    const children = [];
+    Map.prototype.forEach.call(target, (value, key) => {
+        children.push({
+            step: { type: "entry", index: children.length },
+            source: { type: "entry", key, value },
+        });
+    });
+    return children;
+}
+function getSetChildren(target) {
+    const children = [];
+    Set.prototype.forEach.call(target, (value) => {
+        children.push({
+            step: { type: "item", index: children.length },
+            source: { type: "value", value },
+        });
+    });
+    return children;
+}
+export function getEntryChildren(key, value) {
+    return [
+        { step: { type: "entryKey" }, source: { type: "value", value: key } },
+        { step: { type: "entryValue" }, source: { type: "value", value } },
+    ];
+}
+export function getChildren(target, kind) {
+    const properties = getPropertyChildren(target, kind === "array");
+    switch (kind) {
+        case "map":
+            return [...getMapChildren(target), ...properties];
+        case "set":
+            return [...getSetChildren(target), ...properties];
+        default:
+            return properties;
+    }
+}

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

@@ -0,0 +1,2 @@
+import type { InspectorNode } from "./describe.js";
+export declare function getNode(root: InspectorNode, id: string): InspectorNode | undefined;

package/dist/ObjectInspector/describe/getNode.js

@@ -0,0 +1,9 @@
+export function getNode(root, id) {
+    let current = root;
+    while (current && current.id !== id) {
+        current = current
+            .children()
+            .find((child) => child.id === id || id.startsWith(`${child.id}/`));
+    }
+    return current;
+}

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

@@ -0,0 +1,26 @@
+export declare const ROOT_ID = "$";
+export type PathStep = {
+    readonly type: "property";
+    readonly key: string;
+} | {
+    readonly type: "symbol";
+    readonly key: symbol;
+    readonly position: number;
+} | {
+    readonly type: "index";
+    readonly index: number;
+} | {
+    readonly type: "entry";
+    readonly index: number;
+} | {
+    readonly type: "item";
+    readonly index: number;
+} | {
+    readonly type: "entryKey";
+} | {
+    readonly type: "entryValue";
+};
+export declare function getArrayIndex(key: string): number | undefined;
+export declare function getChildId(parentId: string, step: PathStep): string;
+export declare function getPath(parentPath: string, step: PathStep): string;
+export declare function getAncestorIds(id: string): string[];

package/dist/ObjectInspector/describe/getPath.js

@@ -0,0 +1,58 @@
+import { getSymbolText } from "./safeRead.js";
+export const ROOT_ID = "$";
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/u;
+const CANONICAL_INDEX = /^(?:0|[1-9]\d*)$/u;
+const MAX_ARRAY_INDEX = 2 ** 32 - 2;
+export function getArrayIndex(key) {
+    if (!CANONICAL_INDEX.test(key)) {
+        return undefined;
+    }
+    const index = Number(key);
+    return index <= MAX_ARRAY_INDEX ? index : undefined;
+}
+function getSegment(step) {
+    switch (step.type) {
+        case "property":
+            return `.${step.key.replaceAll("~", "~0").replaceAll("/", "~1")}`;
+        case "symbol":
+            return `@${step.position}`;
+        case "index":
+            return `[${step.index}]`;
+        case "entry":
+        case "item":
+            return `#${step.index}`;
+        case "entryKey":
+            return "key";
+        case "entryValue":
+            return "value";
+    }
+}
+export function getChildId(parentId, step) {
+    return `${parentId}/${getSegment(step)}`;
+}
+export function getPath(parentPath, step) {
+    switch (step.type) {
+        case "property":
+            return IDENTIFIER.test(step.key)
+                ? `${parentPath}.${step.key}`
+                : `${parentPath}[${JSON.stringify(step.key)}]`;
+        case "symbol":
+            return `${parentPath}[${getSymbolText(step.key)}]`;
+        case "index":
+            return `${parentPath}[${step.index}]`;
+        case "entry":
+            return `${parentPath}[entry ${step.index}]`;
+        case "item":
+            return `${parentPath}[item ${step.index}]`;
+        case "entryKey":
+            return `${parentPath}.key`;
+        case "entryValue":
+            return `${parentPath}.value`;
+    }
+}
+export function getAncestorIds(id) {
+    const segments = id.split("/");
+    return segments
+        .slice(0, -1)
+        .map((_segment, index) => segments.slice(0, index + 1).join("/"));
+}

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

@@ -0,0 +1,10 @@
+import type { Child, ChildSource } from "./getChildren.js";
+import { type ValueKind } from "./getValueKind.js";
+export interface PreviewInput {
+    readonly kind: ValueKind;
+    readonly typeName: string | undefined;
+    readonly detail: string;
+    readonly source: ChildSource;
+    readonly children: readonly Child[];
+}
+export declare function getPreview(input: PreviewInput): string;

package/dist/ObjectInspector/describe/getPreview.js

@@ -0,0 +1,189 @@
+import { getValueKind } from "./getValueKind.js";
+import { getConstructorName, getDataProperty, getDateTime, getFailureReason, getMapSize, getRegExpText, getSetSize, getSymbolText, getTypedArrayLength, isClass, } from "./safeRead.js";
+const MAX_TEXT_LENGTH = 80;
+const MAX_NESTED_TEXT_LENGTH = 20;
+const MAX_MEMBERS = 5;
+const ELLIPSIS = "…";
+const GETTER = "(...)";
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/u;
+const LINE_BREAKING = /[\p{Cc}\u2028\u2029]/gu;
+function toSingleLine(text) {
+    return text.replace(LINE_BREAKING, (character) => `\\u${character.charCodeAt(0).toString(16).padStart(4, "0")}`);
+}
+function truncate(text, limit) {
+    const characters = Array.from(text);
+    return characters.length > limit
+        ? `${characters.slice(0, limit).join("")}${ELLIPSIS}`
+        : text;
+}
+function quote(text, limit) {
+    return JSON.stringify(truncate(text, limit));
+}
+function withSize(name, size) {
+    return `${name}(${size})`;
+}
+function getArrayLength(value) {
+    try {
+        return getTypedArrayLength(value);
+    }
+    catch {
+        const length = getDataProperty(value, "length");
+        return typeof length === "number" ? length : 0;
+    }
+}
+function getUninspectablePreview(reason) {
+    return `Uninspectable: ${truncate(reason, MAX_TEXT_LENGTH)}`;
+}
+function getFunctionPreview(value) {
+    const name = getDataProperty(value, "name");
+    const label = typeof name === "string" ? truncate(name, MAX_NESTED_TEXT_LENGTH) : "";
+    return isClass(value) ? `class ${label}`.trimEnd() : `ƒ ${label}()`;
+}
+function getDatePreview(value) {
+    const time = getDateTime(value);
+    return Number.isNaN(time) ? "Invalid Date" : new Date(time).toISOString();
+}
+function getErrorPreview(value) {
+    const name = getConstructorName(value) ?? "Error";
+    const message = getDataProperty(value, "message");
+    return typeof message === "string" && message !== ""
+        ? `${name}: ${truncate(message, MAX_TEXT_LENGTH)}`
+        : name;
+}
+function getPrimitivePreview(value, kind, textLimit) {
+    switch (kind) {
+        case "string":
+            return quote(value, textLimit);
+        case "number":
+            return Object.is(value, -0) ? "-0" : String(value);
+        case "bigint":
+            return `${String(value)}n`;
+        case "boolean":
+        case "null":
+        case "undefined":
+            return String(value);
+        case "symbol":
+            return truncate(getSymbolText(value), textLimit);
+        default:
+            return undefined;
+    }
+}
+function getNestedObjectPreview(value, kind) {
+    switch (kind) {
+        case "function":
+            return getFunctionPreview(value);
+        case "array":
+            return withSize(getConstructorName(value) ?? "Array", getArrayLength(value));
+        case "map":
+            return withSize("Map", getMapSize(value));
+        case "set":
+            return withSize("Set", getSetSize(value));
+        case "date":
+            return getDatePreview(value);
+        case "regexp":
+            return truncate(getRegExpText(value), MAX_NESTED_TEXT_LENGTH);
+        case "error":
+            return getConstructorName(value) ?? "Error";
+        default: {
+            const name = getConstructorName(value);
+            return name && name !== "Object" ? name : `{${ELLIPSIS}}`;
+        }
+    }
+}
+function getNestedPreview(value) {
+    try {
+        const kind = getValueKind(value);
+        return (getPrimitivePreview(value, kind, MAX_NESTED_TEXT_LENGTH) ??
+            getNestedObjectPreview(value, kind));
+    }
+    catch (error) {
+        return getUninspectablePreview(getFailureReason(error));
+    }
+}
+function getSourcePreview(source) {
+    switch (source.type) {
+        case "value":
+            return getNestedPreview(source.value);
+        case "getter":
+            return GETTER;
+        case "failure":
+            return getUninspectablePreview(source.reason);
+        case "entry":
+            return `${getNestedPreview(source.key)} => ${getNestedPreview(source.value)}`;
+    }
+}
+function getMemberName(child) {
+    switch (child.step.type) {
+        case "property":
+            return IDENTIFIER.test(child.step.key)
+                ? truncate(child.step.key, MAX_NESTED_TEXT_LENGTH)
+                : quote(child.step.key, MAX_NESTED_TEXT_LENGTH);
+        case "symbol":
+            return truncate(getSymbolText(child.step.key), MAX_NESTED_TEXT_LENGTH);
+        default:
+            return "";
+    }
+}
+function getMembersPreview(children, open, close) {
+    const members = children.slice(0, MAX_MEMBERS).map((child) => {
+        const name = getMemberName(child);
+        const value = getSourcePreview(child.source);
+        return name === "" ? value : `${name}: ${value}`;
+    });
+    if (children.length > members.length) {
+        members.push(ELLIPSIS);
+    }
+    return `${open}${members.join(", ")}${close}`;
+}
+function getContainerPreview(input, value) {
+    const { kind, typeName, children } = input;
+    switch (kind) {
+        case "function":
+            return getFunctionPreview(value);
+        case "date":
+            return getDatePreview(value);
+        case "regexp":
+            return truncate(getRegExpText(value), MAX_TEXT_LENGTH);
+        case "error":
+            return getErrorPreview(value);
+        case "array":
+            return `${withSize(typeName ?? "Array", getArrayLength(value))} ${getMembersPreview(children, "[", "]")}`;
+        case "map":
+            return `${withSize("Map", getMapSize(value))} ${getMembersPreview(children, "{", "}")}`;
+        case "set":
+            return `${withSize("Set", getSetSize(value))} ${getMembersPreview(children, "{", "}")}`;
+        default: {
+            const name = typeName && typeName !== "Object"
+                ? `${truncate(typeName, MAX_NESTED_TEXT_LENGTH)} `
+                : "";
+            return `${name}${getMembersPreview(children, "{", "}")}`;
+        }
+    }
+}
+function getValuePreview(input) {
+    const value = input.source.type === "value" ? input.source.value : undefined;
+    try {
+        return (getPrimitivePreview(value, input.kind, MAX_TEXT_LENGTH) ??
+            getContainerPreview(input, value));
+    }
+    catch (error) {
+        return getUninspectablePreview(getFailureReason(error));
+    }
+}
+function getRawPreview(input) {
+    switch (input.kind) {
+        case "getter":
+            return GETTER;
+        case "uninspectable":
+            return getUninspectablePreview(input.detail);
+        case "circular":
+            return `[Circular ${truncate(input.detail, MAX_TEXT_LENGTH)}]`;
+        case "entry":
+            return getSourcePreview(input.source);
+        default:
+            return getValuePreview(input);
+    }
+}
+export function getPreview(input) {
+    return toSingleLine(getRawPreview(input));
+}