@intentface/ui 0.0.0-stage → 0.7.0

package/dist/generative/tree.js

@@ -0,0 +1,365 @@
+// Reading what the model wrote: a whole call checked against the catalog, a
+// partial one read as nodes to draw, and its data bindings resolved.
+import { componentOf, isBinding, isObject, limitsOf, } from "./catalog.js";
+import { dropNulls, jsonSchemaOf } from "./json-schema.js";
+/** The id a single-component call gets. */
+const SINGLE_ID = "root";
+const issue = (code, message, path) => ({
+    code,
+    message,
+    path,
+});
+/** Issues as text for the model, one per line: where, then what's wrong. */
+export const formatIssues = (issues, max = 8) => {
+    const lines = issues
+        .slice(0, max)
+        .map((entry) => `${entry.path.join(".") || "(input)"}: ${entry.message}`);
+    if (issues.length > max)
+        lines.push(`…and ${issues.length - max} more.`);
+    return lines.join("\n");
+};
+// ---------------------------------------------------------------------------
+// Bindings
+const bindingIssues = (value, path) => {
+    const columnsOk = value.columns === undefined ||
+        (Array.isArray(value.columns) && value.columns.every((column) => typeof column === "string"));
+    const columnOk = value.column === undefined || typeof value.column === "string";
+    return columnsOk && columnOk
+        ? []
+        : [
+            issue("invalid_binding", "A binding takes columns as a list of names, or one column.", path),
+        ];
+};
+/** A row's value at a column name, which may be a dotted path (`owner.name`). */
+const cell = (row, column) => {
+    if (!isObject(row))
+        return null;
+    if (column in row)
+        return row[column] ?? null;
+    const value = column
+        .split(".")
+        .reduce((current, key) => (isObject(current) ? current[key] : undefined), row);
+    return value ?? null;
+};
+/**
+ * What a binding points at, picked: rows of objects become rows of the named
+ * `columns` in order, or one `column`'s values. Anything else comes as it is.
+ */
+const pickColumns = (data, binding) => {
+    const { columns, column } = binding;
+    if (!Array.isArray(data))
+        return data;
+    if (columns)
+        return data.map((row) => columns.map((name) => cell(row, name)));
+    if (column)
+        return data.map((row) => cell(row, column));
+    return data;
+};
+/**
+ * Props with each binding's data in place and its columns picked, and the
+ * bindings `lookup` found nothing for, which stay as they are.
+ */
+const substitute = (props, bindings, lookup) => {
+    const next = { ...props };
+    const missing = [];
+    for (const binding of bindings) {
+        const value = lookup(binding);
+        if (value === undefined)
+            missing.push(binding);
+        else
+            next[binding.prop] = pickColumns(value, binding);
+    }
+    return { props: next, missing };
+};
+/** Every binding in a tree, for the host to resolve. */
+export const findBindings = (tree) => Object.entries(tree.elements).flatMap(([id, element]) => Object.entries(element.props)
+    .filter((entry) => isBinding(entry[1]))
+    .map(([prop, binding]) => ({ ...binding, id, prop })));
+/**
+ * The tree with every binding replaced by its data, each element validated
+ * again with the data in place. `resolve` returns what a ref names, such as a
+ * tool result's rows, and may fetch it; the binding's columns are picked from
+ * it. `undefined` means not found.
+ */
+export const resolveBindings = async (tree, catalog, resolve) => {
+    const issues = [];
+    // An unbound element already holds its data; each bound one is replaced below.
+    const elements = { ...tree.elements };
+    const bound = new Map();
+    for (const binding of findBindings(tree)) {
+        bound.set(binding.id, [...(bound.get(binding.id) ?? []), binding]);
+    }
+    // Every element's data looked up at once, then validated in place; read back in order.
+    const entries = [...bound];
+    const settled = await Promise.all(entries.map(async ([id, bindings]) => {
+        const element = tree.elements[id];
+        const definition = element && componentOf(catalog, element.type);
+        if (!element || !definition)
+            return undefined;
+        const values = await Promise.all(bindings.map((binding) => resolve(binding)));
+        const { props, missing } = substitute(element.props, bindings, (binding) => values[bindings.indexOf(binding)]);
+        return { element, missing, result: await definition.props["~standard"].validate(props) };
+    }));
+    entries.forEach(([id], index) => {
+        const entry = settled[index];
+        if (!entry)
+            return;
+        const path = ["elements", id, "props"];
+        for (const binding of entry.missing) {
+            const message = `No data for "${binding.$data}".`;
+            issues.push(issue("unresolved_binding", message, [...path, binding.prop]));
+        }
+        // A prop whose data wasn't found is reported above, not again as a schema failure.
+        const unresolved = new Set(entry.missing.map((binding) => binding.prop));
+        if (entry.result.issues) {
+            issues.push(...propIssues(issuesOutside(entry.result.issues, unresolved), path));
+        }
+        else
+            elements[id] = { ...entry.element, props: entry.result.value };
+    });
+    return issues.length > 0 ? { issues } : { value: { root: tree.root, elements } };
+};
+const ELEMENT_KEYS = new Set(["id", "type", "component", "props", "children"]);
+/** Two slips models make, read as meant: `component` for `type`, and props beside `type`. */
+const normalizeElement = (raw) => {
+    const beside = Object.fromEntries(Object.entries(raw).filter(([key]) => !ELEMENT_KEYS.has(key)));
+    return {
+        type: raw.type ?? raw.component,
+        props: { ...beside, ...(isObject(raw.props) ? raw.props : {}) },
+        children: raw.children,
+    };
+};
+const inElements = (id) => ["elements", id];
+// One component on its own is the input itself.
+const atTop = () => [];
+/** Elements as a list or a map keyed by id, or one component on its own. */
+const readInput = (input) => {
+    const elements = new Map();
+    if (!isObject(input)) {
+        const problem = issue("invalid_input", "The input must be an object.", []);
+        return { root: undefined, elements, pathOf: inElements, issues: [problem] };
+    }
+    if (input.elements === undefined && (input.type ?? input.component) !== undefined) {
+        elements.set(SINGLE_ID, normalizeElement(input));
+        return { root: SINGLE_ID, elements, pathOf: atTop, issues: [] };
+    }
+    const issues = [];
+    if (Array.isArray(input.elements)) {
+        input.elements.forEach((raw, index) => {
+            if (!isObject(raw) || typeof raw.id !== "string") {
+                issues.push(issue("missing_id", 'Each element needs an "id".', ["elements", index]));
+            }
+            else if (elements.has(raw.id)) {
+                const message = `More than one element has the id "${raw.id}".`;
+                issues.push(issue("duplicate_id", message, ["elements", index, "id"]));
+            }
+            else
+                elements.set(raw.id, normalizeElement(raw));
+        });
+    }
+    else if (isObject(input.elements)) {
+        for (const [id, raw] of Object.entries(input.elements)) {
+            if (isObject(raw))
+                elements.set(id, normalizeElement(raw));
+        }
+    }
+    return { root: input.root, elements, pathOf: inElements, issues };
+};
+const childIds = (element) => Array.isArray(element.children)
+    ? element.children.filter((child) => typeof child === "string")
+    : [];
+/**
+ * What a schema can't check, element by element: a known type, and children
+ * that exist, are listed once, belong to one parent and stay within the limits.
+ */
+const checkElements = (read, catalog, limits) => {
+    const issues = [];
+    const types = Object.keys(catalog.components);
+    const parents = new Map();
+    if (read.elements.size > limits.nodes) {
+        const message = `There are ${read.elements.size} elements; the limit is ${limits.nodes}. Show less at once.`;
+        issues.push(issue("too_many_nodes", message, ["elements"]));
+    }
+    for (const [id, element] of read.elements) {
+        const path = read.pathOf(id);
+        const definition = componentOf(catalog, element.type);
+        if (!definition) {
+            const message = `"${String(element.type)}" is not a component. Components: ${types.join(", ")}.`;
+            issues.push(issue("unknown_type", message, [...path, "type"]));
+        }
+        const children = childIds(element);
+        if (children.length > 0 && definition && !definition.container) {
+            const message = `${String(element.type)} doesn't hold other elements.`;
+            issues.push(issue("unexpected_children", message, [...path, "children"]));
+        }
+        if (children.length > limits.children) {
+            const message = `${children.length} children; the limit is ${limits.children}. Group them into more containers.`;
+            issues.push(issue("too_many_children", message, [...path, "children"]));
+        }
+        const listed = new Set();
+        for (const child of children) {
+            if (listed.has(child)) {
+                const message = `"${child}" is listed more than once; list each child once.`;
+                issues.push(issue("duplicate_child", message, [...path, "children"]));
+                continue;
+            }
+            listed.add(child);
+            if (!read.elements.has(child)) {
+                const message = `"${child}" is not one of the elements.`;
+                issues.push(issue("dangling_child", message, [...path, "children"]));
+                continue;
+            }
+            const other = parents.get(child);
+            if (other && other !== id) {
+                const message = `"${child}" is a child of both "${other}" and "${id}"; give each its own element.`;
+                issues.push(issue("shared_child", message, [...path, "children"]));
+            }
+            parents.set(child, id);
+        }
+    }
+    return issues;
+};
+/**
+ * The elements reached depth-first from the root, and the cycles and too-deep
+ * nesting met on the way. Each step carries its path, so a cycle is caught
+ * where it closes.
+ */
+const walkFromRoot = (read, root, limits) => {
+    // In walk order. Each element is walked once, so a child shared between
+    // parents, reported as `shared_child`, can't multiply the work.
+    const reached = new Set();
+    const issues = [];
+    const walk = (id, path) => {
+        if (path.includes(id)) {
+            const message = `"${id}" contains itself (${[...path, id].join(" → ")}).`;
+            issues.push(issue("cycle", message, [...read.pathOf(id), "children"]));
+            return;
+        }
+        if (reached.has(id))
+            return;
+        if (path.length + 1 > limits.depth) {
+            const message = `"${id}" is nested ${path.length + 1} deep; the limit is ${limits.depth}. Flatten it.`;
+            issues.push(issue("too_deep", message, read.pathOf(id)));
+            return;
+        }
+        const element = read.elements.get(id);
+        if (!element)
+            return;
+        reached.add(id);
+        for (const child of childIds(element))
+            walk(child, [...path, id]);
+    };
+    walk(root, []);
+    return { reached: [...reached], issues };
+};
+/** A validator's issues, less those under the given props. */
+const issuesOutside = (issues, props) => issues.filter((entry) => {
+    const first = entry.path?.[0];
+    return !props.has(String(isObject(first) ? first.key : first));
+});
+const propIssues = (issues, path) => issues.map((entry) => ({
+    code: "invalid_props",
+    message: entry.message,
+    path: [
+        ...path,
+        ...(entry.path ?? []).map((segment) => isObject(segment) ? String(segment.key) : segment),
+    ],
+}));
+const readBound = (definition, raw, id) => {
+    const props = dropNulls(raw, jsonSchemaOf(definition));
+    const bindings = (definition.bind ?? []).flatMap((prop) => {
+        const value = props[prop];
+        return isBinding(value) ? [{ ...value, id, prop }] : [];
+    });
+    return { props, bindings };
+};
+/** Props validated, with bound props left in place for `bindings.resolve`. */
+const checkProps = async (definition, { props, bindings }, path) => {
+    const issues = bindings.flatMap((binding) => bindingIssues(binding, [...path, binding.prop]));
+    const result = await definition.props["~standard"].validate(props);
+    if (!result.issues)
+        return { props: result.value, issues };
+    // A bound prop fails until resolved; only its binding's own shape counts now.
+    const bound = new Set(bindings.map((binding) => binding.prop));
+    return { props, issues: [...issues, ...propIssues(issuesOutside(result.issues, bound), path)] };
+};
+/**
+ * A whole call checked against the catalog: its shape read as meant, its
+ * structure and limits checked, and each element's props validated. Issues
+ * name the field, so `tree.formatIssues` can send them straight back to the model.
+ */
+export const validateTree = async (input, catalog) => {
+    const limits = limitsOf(catalog);
+    const read = readInput(input);
+    if (read.issues.length > 0)
+        return { issues: read.issues };
+    const { root } = read;
+    if (typeof root !== "string") {
+        return { issues: [issue("missing_root", "Name the id of the element at the top.", ["root"])] };
+    }
+    if (!read.elements.has(root)) {
+        const message = `"${root}" is not one of the elements.`;
+        return { issues: [issue("root_not_found", message, ["root"])] };
+    }
+    const walked = walkFromRoot(read, root, limits);
+    const issues = [...checkElements(read, catalog, limits), ...walked.issues];
+    // Every element's props validated at once; read back in tree order.
+    const checked = await Promise.all(walked.reached.map((id) => {
+        const element = read.elements.get(id);
+        const definition = componentOf(catalog, element.type);
+        const path = [...read.pathOf(id), "props"];
+        return definition && checkProps(definition, readBound(definition, element.props, id), path);
+    }));
+    const elements = {};
+    walked.reached.forEach((id, index) => {
+        const result = checked[index];
+        if (!result)
+            return;
+        const element = read.elements.get(id);
+        issues.push(...result.issues);
+        const children = childIds(element);
+        elements[id] = {
+            type: element.type,
+            props: result.props,
+            ...(children.length > 0 ? { children } : {}),
+        };
+    });
+    return issues.length > 0 ? { issues } : { value: { root, elements } };
+};
+const isPromise = (value) => isObject(value) && typeof value.then === "function";
+/** A node's props: ready once they validate and their bindings resolve. */
+const readProps = (definition, { props, bindings }, resolve) => {
+    const resolved = substitute(props, bindings, (binding) => {
+        const value = resolve?.(binding);
+        return isPromise(value) ? undefined : value;
+    });
+    if (resolved.missing.length > 0)
+        return { status: "pending", props };
+    const result = definition.props["~standard"].validate(resolved.props);
+    // An async validator can't answer within a render, so its node waits.
+    if (isPromise(result) || result.issues)
+        return { status: "pending", props: resolved.props };
+    return { status: "ready", props: result.value };
+};
+/**
+ * Partial or whole input as nodes to draw, without throwing. A node whose type
+ * isn't known yet is skipped; one whose props don't validate yet, or whose
+ * data isn't resolved, is pending.
+ */
+export const readTree = (input, catalog, options = {}) => {
+    const read = readInput(input);
+    // Each element draws once. A cycle, a shared child or a child listed twice
+    // stops at the first, so the work stays linear and React never sees a key twice.
+    const drawn = new Set();
+    const build = (id) => {
+        const element = read.elements.get(id);
+        const definition = element && componentOf(catalog, element.type);
+        if (!element || !definition || drawn.has(id))
+            return undefined;
+        drawn.add(id);
+        const children = childIds(element).flatMap((child) => build(child) ?? []);
+        const props = readProps(definition, readBound(definition, element.props, id), options.resolve);
+        return { id, type: element.type, ...props, children };
+    };
+    return typeof read.root === "string" ? { root: build(read.root) } : {};
+};

package/dist/generative/use-tree.d.ts

@@ -0,0 +1,12 @@
+import type { AnyCatalog } from "./catalog.js";
+import { type ReadTreeOptions, type TreeRead } from "./tree.js";
+export type UseTreeOptions = ReadTreeOptions & {
+    /** The input is still being written, so nodes keep their last valid props. */
+    streaming?: boolean;
+};
+/**
+ * `tree.read` in a component: the call's input as nodes to draw. While
+ * `streaming`, a node that was ready keeps its last valid props until newer
+ * ones validate, so a value caught mid-word doesn't blink back to pending.
+ */
+export declare const useTree: <C extends AnyCatalog>(input: unknown, catalog: C, options?: UseTreeOptions) => TreeRead<C>;

package/dist/generative/use-tree.js

@@ -0,0 +1,64 @@
+"use client";
+import { useMemo, useState } from "react";
+import { readTree } from "./tree.js";
+const NOTHING_HELD = new Map();
+const isPlainObject = (value) => typeof value === "object" && value !== null && Object.getPrototypeOf(value) === Object.prototype;
+/** Equal as data, so recomputed props that read the same don't count as new. */
+const isEqual = (a, b) => {
+    if (Object.is(a, b))
+        return true;
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() === b.getTime();
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((item, index) => isEqual(item, b[index]));
+    }
+    if (isPlainObject(a) && isPlainObject(b)) {
+        const keys = Object.keys(a);
+        return keys.length === Object.keys(b).length && keys.every((key) => isEqual(a[key], b[key]));
+    }
+    return false;
+};
+const sameHeld = (a, b) => a.size === b.size &&
+    [...a].every(([id, entry]) => {
+        const other = b.get(id);
+        return other?.type === entry.type && isEqual(entry.props, other.props);
+    });
+/**
+ * The tree with a pending node's held props back in place, and what to hold
+ * next. Props are kept only for the type they were valid for: while a type is
+ * still being written it can read as a shorter one (`Card` on the way to
+ * `CardGrid`).
+ */
+const holdProps = (root, held) => {
+    const next = new Map();
+    const visit = (node) => {
+        const entry = held.get(node.id);
+        const kept = node.status === "pending" && entry?.type === node.type ? entry : undefined;
+        if (node.status === "ready")
+            next.set(node.id, { type: node.type, props: node.props });
+        else if (kept)
+            next.set(node.id, kept);
+        return {
+            ...node,
+            ...(kept ? { status: "ready", props: kept.props } : {}),
+            children: node.children.map(visit),
+        };
+    };
+    return { root: visit(root), next };
+};
+/**
+ * `tree.read` in a component: the call's input as nodes to draw. While
+ * `streaming`, a node that was ready keeps its last valid props until newer
+ * ones validate, so a value caught mid-word doesn't blink back to pending.
+ */
+export const useTree = (input, catalog, options = {}) => {
+    const { resolve, streaming = false } = options;
+    const read = useMemo(() => readTree(input, catalog, { resolve }), [input, catalog, resolve]);
+    const [held, setHeld] = useState(NOTHING_HELD);
+    const holding = streaming && read.root ? holdProps(read.root, held) : undefined;
+    const next = holding?.next ?? NOTHING_HELD;
+    // Kept from earlier renders the way React documents: set during render, guarded.
+    if (!sameHeld(next, held))
+        setHeld(next);
+    return holding ? { root: holding.root } : read;
+};

package/dist/internal/change-event-details.d.ts

@@ -0,0 +1,12 @@
+/** Why a change happened, and the chance to `cancel()` it before it lands. */
+export type ChangeEventDetails<Reason extends string> = {
+    reason: Reason;
+    /** The native event behind the change. */
+    event: Event;
+    /** The element that started it, where there is one. */
+    trigger: Element | undefined;
+    /** Keeps the change from landing. */
+    cancel: () => void;
+    readonly isCanceled: boolean;
+};
+export declare const createChangeEventDetails: <Reason extends string>(reason: Reason, event?: Event, trigger?: Element) => ChangeEventDetails<Reason>;

package/dist/internal/change-event-details.js

@@ -0,0 +1,16 @@
+// Adapted from @base-ui/react v1.6.0 (MIT) — packages/react/src/internals/createBaseUIEventDetails.ts
+// https://github.com/mui/base-ui — trimmed to the change details our primitives emit.
+export const createChangeEventDetails = (reason, event = new Event("change"), trigger) => {
+    let canceled = false;
+    return {
+        reason,
+        event,
+        trigger,
+        cancel: () => {
+            canceled = true;
+        },
+        get isCanceled() {
+            return canceled;
+        },
+    };
+};

package/dist/internal/collapsible.d.ts

@@ -0,0 +1,22 @@
+import type { PrimitiveProps } from "./primitive-props.js";
+import { type TransitionStatus } from "./render/transition.js";
+export type CollapsibleState = {
+    open: boolean;
+};
+export type CollapsibleRootProps = PrimitiveProps<"div", CollapsibleState> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+export type CollapsibleTriggerProps = PrimitiveProps<"button", CollapsibleState>;
+export type CollapsiblePanelProps = PrimitiveProps<"div", CollapsiblePanelState> & {
+    /** Keep the panel in the DOM (hidden) when closed. */
+    keepMounted?: boolean;
+};
+export type CollapsiblePanelState = CollapsibleState & {
+    transitionStatus: TransitionStatus;
+};
+export declare const Collapsible: (({ open: controlledOpen, defaultOpen, onOpenChange, className, render, style, ...elementProps }: CollapsibleRootProps) => import("react").JSX.Element) & {
+    Trigger: ({ className, render, style, ...elementProps }: CollapsibleTriggerProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    Panel: ({ keepMounted, className, render, style, ...elementProps }: CollapsiblePanelProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+};

package/dist/internal/collapsible.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Minimal internal disclosure primitive — replaces the @base-ui/react
+// Collapsible dependency for the package's own parts. Trigger toggles, Panel
+// hides (or unmounts) its content; state is exposed Base UI-style via
+// presence attributes (data-open / data-closed) generated from state, plus
+// the animation contract: data-starting-style on the panel's first open
+// frame, data-ending-style while its exit animations run (hide/unmount waits
+// for them), and the panel's natural height as --panel-height. That value is
+// released once the open transition settles, so an open panel falls back to
+// `auto` and tracks content that grows underneath it.
+// Every part supports the Base UI render prop.
+import { createContext, use, useCallback, useId, useMemo, useRef, useState, } from "react";
+import { useOpenTransition } from "./render/transition.js";
+import { useRenderElement } from "./render/useRenderElement.js";
+import { openStateMapping, transitionStatusMapping } from "./state-mappings.js";
+const CollapsibleContext = createContext(null);
+const useCollapsible = () => {
+    const ctx = use(CollapsibleContext);
+    if (!ctx)
+        throw new Error("Collapsible parts must be used within <Collapsible>");
+    return ctx;
+};
+const CollapsibleRoot = ({ open: controlledOpen, defaultOpen = false, onOpenChange, className, render, style, ...elementProps }) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : internalOpen;
+    const panelId = useId();
+    const setOpen = useCallback((value) => {
+        if (!isControlled)
+            setInternalOpen(value);
+        onOpenChange?.(value);
+    }, [isControlled, onOpenChange]);
+    const element = useRenderElement("div", { className, render, style }, {
+        state: { open },
+        stateAttributesMapping: openStateMapping,
+        props: elementProps,
+    });
+    const context = useMemo(() => ({ open, setOpen, panelId }), [open, setOpen, panelId]);
+    return _jsx(CollapsibleContext, { value: context, children: element });
+};
+const CollapsibleTrigger = ({ className, render, style, ...elementProps }) => {
+    const { open, setOpen, panelId } = useCollapsible();
+    return useRenderElement("button", { className, render, style }, {
+        state: { open },
+        stateAttributesMapping: openStateMapping,
+        props: [
+            {
+                "aria-expanded": open,
+                "aria-controls": panelId,
+                // mergeProps runs the consumer's onClick first (rightmost wins), so
+                // preventDefault there still cancels the toggle — same contract as
+                // the previous inline `if (!event.defaultPrevented)` handler.
+                onClick: (event) => {
+                    if (!event.defaultPrevented)
+                        setOpen(!open);
+                },
+            },
+            elementProps,
+        ],
+    });
+};
+const CollapsiblePanel = ({ keepMounted = false, className, render, style, ...elementProps }) => {
+    const { open, panelId } = useCollapsible();
+    const panelRef = useRef(null);
+    // The shared transition hook owns the open/starting/ending/close lifecycle: it keeps the
+    // panel mounted through its exit (waiting on getAnimations), measures the natural height
+    // for the CSS var, and reports the status that drives data-starting/ending-style.
+    const { mounted, transitionStatus, height } = useOpenTransition(open, panelRef, {
+        measureHeight: true,
+    });
+    const hidden = !open && !mounted;
+    return useRenderElement("div", { className, render, style }, {
+        enabled: mounted || keepMounted,
+        state: { open, transitionStatus },
+        stateAttributesMapping: { ...openStateMapping, ...transitionStatusMapping },
+        ref: panelRef,
+        props: [
+            {
+                id: panelId,
+                hidden,
+                // Once the open transition settles the height is released back to null, so the
+                // property stops being written and a `height: var(…)` consumer falls back to auto
+                // — that is what lets an open panel track content that grows.
+                style: height !== null ? { "--panel-height": `${height}px` } : undefined,
+            },
+            elementProps,
+        ],
+    });
+};
+export const Collapsible = Object.assign(CollapsibleRoot, {
+    Trigger: CollapsibleTrigger,
+    Panel: CollapsiblePanel,
+});

package/dist/internal/collection.d.ts

@@ -0,0 +1,32 @@
+/**
+ * List maths for an ordered, mutable collection.
+ *
+ * Base UI derives collection order from the DOM, walking
+ * `compareDocumentPosition`, because its collections are declarative children.
+ * Ours are not: the order is an array of ids on the store, so order is *data*
+ * and none of that machinery is needed. What is left is arithmetic, which is
+ * pure and therefore easy to be sure about.
+ */
+/**
+ * Which item to land on when `removed` leaves the collection.
+ *
+ * The item that slides into the vacated slot, or the last one if the tail was
+ * removed — the same thing an editor does when you close a tab, and the
+ * closest thing to "stay where you were".
+ */
+export declare const adjacentTo: <Id>(items: readonly Id[], removed: Id, 
+/** Skips anything it rejects, searching outwards from the vacated slot. */
+isEligible?: (item: Id) => boolean) => (Id & {}) | null;
+/**
+ * Step one place through the collection.
+ *
+ * From nothing, arrive at whichever end you are heading away from. At an edge,
+ * either wrap or stay put.
+ */
+export declare const step: <Id>(items: readonly Id[], from: Id | null, direction: 1 | -1, { loop }?: {
+    loop?: boolean | undefined;
+}) => NonNullable<Id> | null;
+/** Move an item to a new position, clamping the target into range. */
+export declare const moveTo: <Id>(items: readonly Id[], id: Id, toIndex: number) => Id[];
+/** Insert an item, or move it if it is already present. Defaults to the end. */
+export declare const insertAt: <Id>(items: readonly Id[], id: Id, index?: number) => Id[];