dustyui 1.0.2 → 2.0.0

package/dist/ObjectInspector/InspectorSearch.module.css

@@ -0,0 +1,39 @@
+.search {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.field {
+  display: flex;
+  flex: 1 1 12rem;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.input {
+  flex: 1;
+  min-inline-size: 0;
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--dusty-border-strong);
+  border-radius: var(--dusty-radius-md);
+  background-color: var(--dusty-surface-raised);
+  color: var(--dusty-text);
+  font: inherit;
+}
+
+.input:focus-visible {
+  outline: var(--dusty-focus-ring-width) solid var(--dusty-focus-ring);
+  outline-offset: var(--dusty-focus-ring-offset);
+}
+
+.status {
+  color: var(--dusty-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.move {
+  --button-padding-block: 0.375rem;
+  --button-padding-inline: 0.625rem;
+}

package/dist/ObjectInspector/ObjectInspector.d.ts

@@ -0,0 +1,8 @@
+import { type TreeProps } from "../Tree/Tree.js";
+import { type InspectorNode } from "./describe/describe.js";
+export interface ObjectInspectorProps extends Omit<TreeProps<InspectorNode>, "root" | "renderRow" | "getRowText"> {
+    value: unknown;
+    searchable?: boolean;
+    showDetails?: boolean;
+}
+export declare function ObjectInspector({ value, searchable, showDetails, expanded: controlledExpanded, defaultExpanded, onExpandedChange, selected: controlledSelected, onSelectedChange, ...props }: ObjectInspectorProps): import("react").JSX.Element;

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;