@robosystems/core 0.3.0

package/library/components/ElementBrowser.js

@@ -0,0 +1,106 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Badge, Button, Card, Select, Spinner, TextInput, } from 'flowbite-react';
+import { useEffect, useState } from 'react';
+import { HiInformationCircle, HiSearch } from 'react-icons/hi';
+import { classificationColor } from '../colors';
+import { ClassificationPicker } from './ClassificationPicker';
+const PAGE_SIZE = 50;
+export function ElementBrowser({ client, graphId, taxonomyId, taxonomies, onTaxonomyChange, selectedElementId, onSelectElement, }) {
+    const [elements, setElements] = useState([]);
+    const [state, setState] = useState('idle');
+    const [error, setError] = useState(null);
+    const [search, setSearch] = useState('');
+    const [offset, setOffset] = useState(0);
+    const [classification, setClassification] = useState(null);
+    const [activity, setActivity] = useState(null);
+    const activeQuery = search.trim();
+    const searchMode = activeQuery.length > 0;
+    useEffect(() => {
+        let cancelled = false;
+        setState('loading');
+        setError(null);
+        const run = async () => {
+            try {
+                const rows = searchMode
+                    ? await client.searchLibraryElements(graphId, activeQuery, {
+                        limit: PAGE_SIZE,
+                    })
+                    : await client.listLibraryElements(graphId, {
+                        taxonomyId: taxonomyId !== null && taxonomyId !== void 0 ? taxonomyId : undefined,
+                        classification: classification && classification !== 'abstract'
+                            ? classification
+                            : undefined,
+                        activityType: activity !== null && activity !== void 0 ? activity : undefined,
+                        isAbstract: classification === 'abstract'
+                            ? true
+                            : classification !== null
+                                ? false
+                                : null,
+                        limit: PAGE_SIZE,
+                        offset,
+                    });
+                if (cancelled)
+                    return;
+                setElements(rows);
+                setState('ready');
+            }
+            catch (err) {
+                if (cancelled)
+                    return;
+                setError(err instanceof Error ? err.message : 'Unknown error');
+                setState('error');
+            }
+        };
+        run();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        client,
+        graphId,
+        taxonomyId,
+        offset,
+        classification,
+        activity,
+        searchMode,
+        activeQuery,
+    ]);
+    const handleSearchChange = (value) => {
+        setSearch(value);
+        setOffset(0);
+    };
+    const handleClassificationChange = (value) => {
+        setClassification(value);
+        setOffset(0);
+    };
+    const handleActivityChange = (value) => {
+        setActivity(value);
+        setOffset(0);
+    };
+    const handleTaxonomyChange = (id) => {
+        setOffset(0);
+        onTaxonomyChange === null || onTaxonomyChange === void 0 ? void 0 : onTaxonomyChange(id);
+    };
+    const showTaxonomyDropdown = taxonomies && onTaxonomyChange;
+    return (_jsx("section", { className: "col-span-12 min-h-0 md:col-span-5", children: _jsxs(Card, { className: "flex h-full flex-col overflow-hidden", children: [_jsx("h2", { className: "font-heading shrink-0 text-lg font-semibold text-gray-900 dark:text-white", children: "Elements" }), _jsxs("div", { className: "flex gap-2", children: [showTaxonomyDropdown && (_jsx(Select, { sizing: "sm", value: taxonomyId !== null && taxonomyId !== void 0 ? taxonomyId : '', onChange: (e) => handleTaxonomyChange(e.target.value), className: "shrink-0", "aria-label": "Taxonomy", children: taxonomies.map((t) => {
+                                var _a;
+                                return (_jsxs("option", { value: t.id, children: [(_a = t.standard) !== null && _a !== void 0 ? _a : t.name, t.version ? ` ${t.version}` : '', typeof t.elementCount === 'number'
+                                            ? ` (${t.elementCount.toLocaleString()})`
+                                            : ''] }, t.id));
+                            }) })), _jsx(TextInput, { icon: HiSearch, sizing: "sm", placeholder: "Search qname, name, label\u2026", value: search, onChange: (e) => handleSearchChange(e.target.value), className: "flex-1" })] }), _jsx("div", { className: "space-y-1", children: _jsx(ClassificationPicker, { selected: classification, onSelect: handleClassificationChange, activity: activity, onActivityChange: handleActivityChange, disabled: searchMode }) }), state === 'loading' && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [_jsx(Spinner, { size: "sm" }), " Loading\u2026"] })), state === 'error' && (_jsx(Alert, { color: "failure", icon: HiInformationCircle, children: error })), state === 'ready' && elements.length === 0 && (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No elements match these filters." })), _jsx("ul", { className: "min-h-0 flex-1 space-y-1 overflow-y-auto", children: elements.map((el) => {
+                        var _a, _b;
+                        const isSelected = el.id === selectedElementId;
+                        return (_jsx("li", { children: _jsxs("button", { onClick: () => onSelectElement(el.id), className: `w-full rounded px-3 py-2 text-left text-sm transition-colors ${isSelected
+                                    ? 'bg-primary-100 text-primary-900 dark:bg-primary-900/50 dark:text-primary-100'
+                                    : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800'}`, children: [_jsx("div", { className: "truncate font-mono text-sm", title: el.qname, children: el.qname }), _jsxs("div", { className: "mt-0.5 flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate text-xs text-gray-500 dark:text-gray-400", title: el.name, children: el.name }), _jsx(Badge, { color: el.elementType === 'hypercube'
+                                                    ? 'indigo'
+                                                    : el.isAbstract
+                                                        ? 'purple'
+                                                        : classificationColor((_a = el.trait) !== null && _a !== void 0 ? _a : ''), size: "xs", className: "shrink-0", children: el.elementType === 'hypercube'
+                                                    ? 'hypercube'
+                                                    : el.isAbstract
+                                                        ? 'abstract'
+                                                        : ((_b = el.trait) !== null && _b !== void 0 ? _b : '—') })] })] }) }, el.id));
+                    }) }), !searchMode && state === 'ready' && elements.length === PAGE_SIZE && (_jsxs("div", { className: "flex shrink-0 justify-between pt-2", children: [_jsx(Button, { size: "xs", color: "gray", disabled: offset === 0, onClick: () => setOffset(Math.max(0, offset - PAGE_SIZE)), children: "\u2190 Previous" }), _jsxs("span", { className: "self-center text-xs text-gray-500 dark:text-gray-400", children: [offset + 1, "\u2013", offset + elements.length] }), _jsx(Button, { size: "xs", color: "gray", onClick: () => setOffset(offset + PAGE_SIZE), children: "Next \u2192" })] }))] }) }));
+}

package/library/components/ElementDetail.d.ts

@@ -0,0 +1,7 @@
+import type { LibraryClient } from '@robosystems/client/clients';
+export declare function ElementDetail({ client, graphId, elementId, onSelectElement, }: {
+    client: LibraryClient;
+    graphId: string;
+    elementId: string | null;
+    onSelectElement: (id: string) => void;
+}): import("react").JSX.Element;

package/library/components/ElementDetail.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Badge, Card, Spinner } from 'flowbite-react';
+import { useEffect, useMemo, useState } from 'react';
+import { HiExternalLink, HiInformationCircle } from 'react-icons/hi';
+import { arcTypeColor, classificationColor } from '../colors';
+const LABEL_ROLE_ORDER = [
+    'standard',
+    'verbose',
+    'terse',
+    'documentation',
+    'periodStart',
+    'periodEnd',
+    'negated',
+    'total',
+    'commentaryGuidance',
+    'other',
+];
+export function ElementDetail({ client, graphId, elementId, onSelectElement, }) {
+    const [element, setElement] = useState(null);
+    const [arcs, setArcs] = useState([]);
+    const [classifications, setClassifications] = useState([]);
+    const [state, setState] = useState('idle');
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!elementId) {
+            setElement(null);
+            setArcs([]);
+            setClassifications([]);
+            setError(null);
+            setState('idle');
+            return;
+        }
+        let cancelled = false;
+        setState('loading');
+        setError(null);
+        Promise.all([
+            client.getLibraryElement(graphId, { id: elementId }),
+            client.getLibraryElementArcs(graphId, elementId),
+            client.getLibraryElementClassifications(graphId, elementId),
+        ])
+            .then(([el, arcRows, classRows]) => {
+            if (cancelled)
+                return;
+            setElement(el);
+            setArcs(arcRows);
+            setClassifications(classRows);
+            setState('ready');
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setError(err instanceof Error ? err.message : 'Failed to load element');
+            setState('error');
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, graphId, elementId]);
+    const arcsByTaxonomy = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const groups = new Map();
+        for (const arc of arcs) {
+            const key = (_c = (_b = (_a = arc.taxonomyStandard) !== null && _a !== void 0 ? _a : arc.structureName) !== null && _b !== void 0 ? _b : arc.taxonomyName) !== null && _c !== void 0 ? _c : 'other';
+            const label = (_f = (_e = (_d = arc.taxonomyStandard) !== null && _d !== void 0 ? _d : arc.structureName) !== null && _e !== void 0 ? _e : arc.taxonomyName) !== null && _f !== void 0 ? _f : 'other';
+            if (!groups.has(key))
+                groups.set(key, { label, arcs: [] });
+            groups.get(key).arcs.push(arc);
+        }
+        return groups;
+    }, [arcs]);
+    const classificationsByCategory = useMemo(() => {
+        const groups = new Map();
+        for (const cls of classifications) {
+            if (!groups.has(cls.category))
+                groups.set(cls.category, []);
+            groups.get(cls.category).push(cls);
+        }
+        return groups;
+    }, [classifications]);
+    const sortedLabels = useMemo(() => {
+        if (!element)
+            return [];
+        return [...element.labels].sort((a, b) => {
+            const ia = LABEL_ROLE_ORDER.indexOf(a.role);
+            const ib = LABEL_ROLE_ORDER.indexOf(b.role);
+            return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
+        });
+    }, [element]);
+    return (_jsx("section", { className: "col-span-12 min-h-0 md:col-span-7", children: _jsxs(Card, { className: "flex h-full flex-col overflow-hidden", children: [state === 'idle' && (_jsx("div", { className: "flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400", children: "Select an element to view details" })), state === 'loading' && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [_jsx(Spinner, { size: "sm" }), " Loading element\u2026"] })), state === 'error' && (_jsx(Alert, { color: "failure", icon: HiInformationCircle, children: error !== null && error !== void 0 ? error : 'Failed to load element' })), state === 'ready' && element && (_jsxs("div", { className: "min-h-0 flex-1 space-y-4 overflow-y-auto pr-1", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-mono text-lg font-semibold break-words text-gray-900 dark:text-white", title: element.qname, children: element.qname }), _jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: element.name })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [element.trait && (_jsx(Badge, { color: classificationColor(element.trait), title: "FASB elementsOfFinancialStatements", children: element.trait })), _jsx(Badge, { color: "gray", children: element.balanceType }), _jsx(Badge, { color: "gray", children: element.periodType }), _jsx(Badge, { color: "gray", children: element.elementType }), element.isAbstract && _jsx(Badge, { color: "purple", children: "abstract" }), element.isMonetary && _jsx(Badge, { color: "indigo", children: "monetary" }), _jsx(Badge, { color: "info", children: element.source })] }), classificationsByCategory.size > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "font-heading mb-2 text-sm font-semibold text-gray-900 dark:text-white", children: "Classifications" }), _jsx("div", { className: "space-y-2", children: Array.from(classificationsByCategory.entries()).map(([category, items]) => (_jsxs("div", { children: [_jsx("div", { className: "mb-1 px-1 font-mono text-[11px] font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400", children: category }), _jsx("div", { className: "flex flex-wrap gap-1", children: items.map((cls) => (_jsx(Badge, { color: category === 'elementsOfFinancialStatements'
+                                                        ? classificationColor(cls.identifier)
+                                                        : 'gray', size: "xs", children: cls.identifier }, cls.identifier))) })] }, category))) })] })), sortedLabels.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "font-heading mb-2 text-sm font-semibold text-gray-900 dark:text-white", children: "Labels" }), _jsx("ul", { className: "space-y-1", children: sortedLabels.map((lab, i) => (_jsxs("li", { className: "rounded bg-gray-50 p-2 dark:bg-gray-800", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [_jsx("span", { className: "font-mono", children: lab.role }), _jsx("span", { children: "\u00B7" }), _jsx("span", { children: lab.language })] }), _jsx("p", { className: "text-sm text-gray-900 dark:text-gray-100", children: lab.text })] }, `${lab.role}-${lab.language}-${i}`))) })] })), element.references.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "font-heading mb-2 text-sm font-semibold text-gray-900 dark:text-white", children: "References" }), _jsx("ul", { className: "space-y-1", children: element.references.map((ref, i) => (_jsxs("li", { className: "text-sm text-gray-700 dark:text-gray-300", children: [ref.refType && (_jsx(Badge, { color: "gray", size: "xs", className: "mr-2", children: ref.refType })), ref.citation, ref.uri && (_jsx("a", { href: ref.uri, target: "_blank", rel: "noopener noreferrer", className: "text-primary-600 dark:text-primary-400 ml-2 inline-flex items-center gap-1 hover:underline", children: _jsx(HiExternalLink, { className: "h-3 w-3" }) }))] }, i))) })] })), arcs.length > 0 && (_jsxs("div", { children: [_jsxs("h3", { className: "font-heading mb-1 text-sm font-semibold text-gray-900 dark:text-white", children: ["Mappings (", arcs.length, ")"] }), _jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: "Cross-taxonomy arcs \u2014 equivalence, generalization, and type-subtype bridges. Click a peer to jump to it." }), _jsx("div", { className: "space-y-3", children: Array.from(arcsByTaxonomy.entries()).map(([key, { label, arcs: groupArcs }]) => (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between px-1", children: [_jsx("span", { className: "font-mono text-[11px] font-semibold tracking-wider text-gray-500 uppercase dark:text-gray-400", children: label }), _jsx(Badge, { color: "gray", size: "xs", children: groupArcs.length })] }), _jsx("ul", { className: "space-y-0.5", children: groupArcs.map((arc) => (_jsx("li", { children: _jsxs("button", { onClick: () => onSelectElement(arc.peer.id), className: "w-full rounded px-2 py-1 text-left transition-colors hover:bg-gray-100 dark:hover:bg-gray-800", title: `${arc.associationType} · ${arc.direction}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "shrink-0 text-xs text-gray-400 dark:text-gray-500", title: arc.direction === 'outgoing'
+                                                                            ? 'this element → peer'
+                                                                            : 'peer → this element', children: arc.direction === 'outgoing' ? '→' : '←' }), _jsx("span", { className: "text-primary-700 dark:text-primary-300 truncate font-mono text-xs", children: arc.peer.qname }), _jsx(Badge, { color: arcTypeColor(arc.associationType), size: "xs", className: "ml-auto shrink-0", children: arc.associationType })] }), arc.peer.name &&
+                                                                arc.peer.name !==
+                                                                    arc.peer.qname.split(':').pop() && (_jsx("div", { className: "truncate pl-5 text-xs text-gray-500 dark:text-gray-400", children: arc.peer.name }))] }) }, arc.id))) })] }, key))) })] }))] }))] }) }));
+}

package/library/components/LibraryHierarchy.d.ts

@@ -0,0 +1,13 @@
+import type { LibraryClient, LibraryTaxonomy } from '@robosystems/client/clients';
+export declare function LibraryHierarchy({ client, graphId, taxonomies, baseStandard, selectedTaxonomyId, selectedElementId, onSelectElement, }: {
+    client: LibraryClient;
+    graphId: string;
+    /** All taxonomies visible at this graph_id — used to resolve the arc-owning taxonomy. */
+    taxonomies: LibraryTaxonomy[];
+    /** Base reporting standard whose hierarchy to show (e.g. "rs-gaap", "fac"). */
+    baseStandard: string | null;
+    /** The selected taxonomy id — drives the Chart-of-Accounts parent_id tree. */
+    selectedTaxonomyId: string | null;
+    selectedElementId: string | null;
+    onSelectElement: (id: string) => void;
+}): import("react").JSX.Element;

package/library/components/LibraryHierarchy.js

@@ -0,0 +1,380 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clients } from '@robosystems/client/clients';
+import { Alert, Badge, Card, Select, Spinner } from 'flowbite-react';
+import { useEffect, useMemo, useState } from 'react';
+import { HiChevronDown, HiChevronRight, HiInformationCircle, } from 'react-icons/hi';
+import { classificationColor } from '../colors';
+/**
+ * Arc types the hierarchy view can walk, with the taxonomy-standard suffix
+ * that owns each. The calc DAG lives in ``{base}-calculations`` and the
+ * presentation networks in ``{base}-presentation`` — the arcs are NOT on the
+ * base reporting taxonomy, so we resolve the owning taxonomy by name. The
+ * general-special / type-subtype lattice is intentionally not exposed here:
+ * it's substrate (render fallback + classification), not a curated browse.
+ */
+const ARC_TYPES = [
+    { value: 'presentation', label: 'Presentation', suffix: 'presentation' },
+    { value: 'calculation', label: 'Calculation', suffix: 'calculations' },
+];
+/**
+ * Keep only genuine reporting styles in the structure picker. The arc-owning
+ * taxonomy also carries two kinds of structure that aren't styles:
+ *  • the empty seed-time catch-all (blockType 'custom', 0 arcs); and
+ *  • the auto-derived base networks — the type-subtype lattice projected as
+ *    presentation (role '…-pres-bs|is|cf'), an exhaustive, unordered substrate
+ *    the curated styles are carved from, not a statement layout.
+ * Both are substrate, not something to scope a view to.
+ */
+function isReportingStyle(s) {
+    var _a;
+    if (s.blockType === 'custom')
+        return false;
+    return !/-pres-(bs|is|cf)$/i.test((_a = s.roleUri) !== null && _a !== void 0 ? _a : '');
+}
+/**
+ * Order reporting styles by financial-statement sequence (BS → IS → SE → CF)
+ * instead of the backend's name order. ``block_type`` encodes the statement;
+ * the sort is stable, so styles within one statement keep their seed order and
+ * non-statement structures (calc rules, disclosure tables) keep theirs.
+ */
+const STATEMENT_ORDER = {
+    balance_sheet: 0,
+    income_statement: 1,
+    equity_statement: 2,
+    cash_flow_statement: 3,
+};
+function byStatementOrder(a, b) {
+    var _a, _b;
+    return (((_a = STATEMENT_ORDER[a.blockType]) !== null && _a !== void 0 ? _a : 99) - ((_b = STATEMENT_ORDER[b.blockType]) !== null && _b !== void 0 ? _b : 99));
+}
+/**
+ * The structure to land on for a given arc type. Presentation opens on a
+ * coherent statement — the balance sheet — rather than "All structures",
+ * whose union blends every statement (and the base networks) into an
+ * incoherent multi-root tree. Calculation defaults to "All structures"
+ * (null): there the union IS the single coherent calc DAG.
+ */
+function defaultStructureId(arcType, structures) {
+    var _a, _b;
+    if (arcType !== 'presentation')
+        return null;
+    return (_b = (_a = structures.find((s) => s.blockType === 'balance_sheet')) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+}
+const INITIAL_EXPAND_DEPTH = 2;
+const FETCH_PAGE = 1000;
+/** Fetch every arc for a taxonomy+type(+structure), paging past the cap. */
+async function fetchAllArcs(client, graphId, taxonomyId, associationType, structureId) {
+    const all = [];
+    let offset = 0;
+    // Guard against a runaway loop if count is ever inconsistent.
+    for (let page = 0; page < 50; page++) {
+        const { arcs, count } = await client.listLibraryTaxonomyArcs(graphId, taxonomyId, {
+            associationType,
+            structureId: structureId !== null && structureId !== void 0 ? structureId : undefined,
+            limit: FETCH_PAGE,
+            offset,
+        });
+        all.push(...arcs);
+        if (arcs.length === 0 || all.length >= count)
+            break;
+        offset += FETCH_PAGE;
+    }
+    return all;
+}
+/** Assemble a forest from a flat arc list (roots = a `from` that's never a `to`). */
+function buildForest(arcs) {
+    var _a, _b, _c;
+    const meta = new Map();
+    const childEdges = new Map();
+    const froms = new Set();
+    const tos = new Set();
+    for (const a of arcs) {
+        if (!a.fromElementId || !a.toElementId)
+            continue;
+        meta.set(a.fromElementId, {
+            qname: a.fromElementQname,
+            name: a.fromElementName,
+            trait: a.fromElementTrait,
+            isAbstract: (_a = a.fromElementIsAbstract) !== null && _a !== void 0 ? _a : false,
+        });
+        meta.set(a.toElementId, {
+            qname: a.toElementQname,
+            name: a.toElementName,
+            trait: a.toElementTrait,
+            isAbstract: (_b = a.toElementIsAbstract) !== null && _b !== void 0 ? _b : false,
+        });
+        froms.add(a.fromElementId);
+        tos.add(a.toElementId);
+        const edges = (_c = childEdges.get(a.fromElementId)) !== null && _c !== void 0 ? _c : [];
+        // Dedupe by target — the same parent→child arc recurs across structures
+        // (the "All structures" blend), which would otherwise render duplicate
+        // sibling nodes (and collide on React keys).
+        if (!edges.some((e) => e.childId === a.toElementId)) {
+            edges.push({
+                childId: a.toElementId,
+                weight: a.weight,
+                order: a.orderValue,
+            });
+            childEdges.set(a.fromElementId, edges);
+        }
+    }
+    const node = (id, weight, order, seen) => {
+        var _a, _b, _c, _d, _e;
+        const m = meta.get(id);
+        const self = {
+            id,
+            qname: (_a = m === null || m === void 0 ? void 0 : m.qname) !== null && _a !== void 0 ? _a : null,
+            name: (_b = m === null || m === void 0 ? void 0 : m.name) !== null && _b !== void 0 ? _b : null,
+            trait: (_c = m === null || m === void 0 ? void 0 : m.trait) !== null && _c !== void 0 ? _c : null,
+            isAbstract: (_d = m === null || m === void 0 ? void 0 : m.isAbstract) !== null && _d !== void 0 ? _d : false,
+            weight,
+            order,
+            children: [],
+        };
+        if (seen.has(id))
+            return self; // cycle guard
+        const next = new Set(seen);
+        next.add(id);
+        const edges = [...((_e = childEdges.get(id)) !== null && _e !== void 0 ? _e : [])].sort((a, b) => { var _a, _b; return ((_a = a.order) !== null && _a !== void 0 ? _a : 0) - ((_b = b.order) !== null && _b !== void 0 ? _b : 0); });
+        self.children = edges.map((e) => node(e.childId, e.weight, e.order, next));
+        return self;
+    };
+    const roots = [...froms]
+        .filter((id) => !tos.has(id))
+        .sort((a, b) => { var _a, _b, _c, _d; return ((_b = (_a = meta.get(a)) === null || _a === void 0 ? void 0 : _a.qname) !== null && _b !== void 0 ? _b : '').localeCompare((_d = (_c = meta.get(b)) === null || _c === void 0 ? void 0 : _c.qname) !== null && _d !== void 0 ? _d : ''); });
+    return roots.map((id) => node(id, null, null, new Set()));
+}
+// QB's standard CoA ordering by AccountType — kept in lockstep with the Chart
+// of Accounts page (ledger/chart-of-accounts). Type-first (not code-first)
+// because QB returns code == account name when account-numbering is off (the
+// sandbox default), which would otherwise degrade to alphabetic-by-name and
+// lose the asset → liability → equity → income → expense grouping.
+const ACCOUNT_TYPE_ORDER = {
+    Bank: 0,
+    'Accounts Receivable': 1,
+    'Other Current Asset': 2,
+    'Fixed Asset': 3,
+    'Other Asset': 4,
+    'Accounts Payable': 5,
+    'Credit Card': 6,
+    'Other Current Liability': 7,
+    'Long Term Liability': 8,
+    Equity: 9,
+    Income: 10,
+    'Cost of Goods Sold': 11,
+    Expense: 12,
+    'Other Income': 13,
+    'Other Expense': 14,
+};
+function compareAccountNodes(a, b) {
+    var _a, _b, _c, _d, _e, _f;
+    const ta = (_a = ACCOUNT_TYPE_ORDER[a.accountType || '']) !== null && _a !== void 0 ? _a : 99;
+    const tb = (_b = ACCOUNT_TYPE_ORDER[b.accountType || '']) !== null && _b !== void 0 ? _b : 99;
+    if (ta !== tb)
+        return ta - tb;
+    const ca = (_c = a.code) !== null && _c !== void 0 ? _c : '';
+    const cb = (_d = b.code) !== null && _d !== void 0 ? _d : '';
+    if (ca !== cb)
+        return ca.localeCompare(cb, undefined, { numeric: true });
+    return ((_e = a.name) !== null && _e !== void 0 ? _e : '').localeCompare((_f = b.name) !== null && _f !== void 0 ? _f : '');
+}
+function mapAccountNode(n) {
+    var _a, _b, _c, _d;
+    return {
+        id: n.id,
+        qname: (_a = n.code) !== null && _a !== void 0 ? _a : null,
+        name: (_b = n.name) !== null && _b !== void 0 ? _b : null,
+        trait: (_c = n.trait) !== null && _c !== void 0 ? _c : null,
+        isAbstract: false,
+        weight: null,
+        order: null,
+        children: [...((_d = n.children) !== null && _d !== void 0 ? _d : [])]
+            .sort(compareAccountNodes)
+            .map(mapAccountNode),
+    };
+}
+/** Node ids deeper than INITIAL_EXPAND_DEPTH — collapsed on first render. */
+function deepNodeIds(forest) {
+    const out = new Set();
+    const walk = (n, depth) => {
+        if (depth >= INITIAL_EXPAND_DEPTH && n.children.length > 0)
+            out.add(n.id);
+        n.children.forEach((c) => walk(c, depth + 1));
+    };
+    forest.forEach((r) => walk(r, 0));
+    return out;
+}
+export function LibraryHierarchy({ client, graphId, taxonomies, baseStandard, selectedTaxonomyId, selectedElementId, onSelectElement, }) {
+    var _a;
+    const [arcType, setArcType] = useState('presentation');
+    const [structures, setStructures] = useState([]);
+    const [structureId, setStructureId] = useState(null);
+    const [arcs, setArcs] = useState([]);
+    const [state, setState] = useState('idle');
+    const [error, setError] = useState(null);
+    const [collapsed, setCollapsed] = useState(new Set());
+    // The taxonomy id the current `structures` + `structureId` belong to. Gates
+    // arc-loading until the structure list (and its default selection) catches up
+    // with a new arc type, so we never fetch the "All structures" union as an
+    // intermediate state when entering Presentation.
+    const [structuresTaxonomyId, setStructuresTaxonomyId] = useState(null);
+    const [coaForest, setCoaForest] = useState([]);
+    // A Chart of Accounts has no presentation/calc arcs — its hierarchy is the
+    // account parent/sub-account tree carried on each element's parentId. Detect
+    // it from the selected taxonomy's type and render that tree instead.
+    const isCoa = useMemo(() => {
+        var _a;
+        return ((_a = taxonomies.find((t) => t.id === selectedTaxonomyId)) === null || _a === void 0 ? void 0 : _a.taxonomyType) ===
+            'chart_of_accounts';
+    }, [taxonomies, selectedTaxonomyId]);
+    // Resolve the taxonomy that owns this arc type for the chosen base standard.
+    const arcTaxonomy = useMemo(() => {
+        var _a, _b;
+        if (!baseStandard)
+            return null;
+        const suffix = (_a = ARC_TYPES.find((t) => t.value === arcType)) === null || _a === void 0 ? void 0 : _a.suffix;
+        return ((_b = taxonomies.find((t) => t.standard === `${baseStandard}-${suffix}`)) !== null && _b !== void 0 ? _b : null);
+    }, [taxonomies, baseStandard, arcType]);
+    // Load the structure list for the picker whenever the owning taxonomy
+    // changes, then select the per-arc-type default structure.
+    useEffect(() => {
+        if (!arcTaxonomy) {
+            setStructures([]);
+            setStructureId(null);
+            setStructuresTaxonomyId(null);
+            return;
+        }
+        let cancelled = false;
+        client
+            .listLibraryStructures(graphId, { taxonomyId: arcTaxonomy.id })
+            .then((rows) => {
+            if (cancelled)
+                return;
+            const filtered = rows.filter(isReportingStyle).sort(byStatementOrder);
+            setStructures(filtered);
+            setStructureId(defaultStructureId(arcType, filtered));
+            setStructuresTaxonomyId(arcTaxonomy.id);
+        })
+            .catch((err) => {
+            // Non-fatal: the tree still loads with "All structures"; the picker
+            // just won't appear. Log so the absence is diagnosable.
+            if (!cancelled) {
+                console.error('[LibraryHierarchy] failed to load structures', err);
+                setStructures([]);
+                setStructureId(null);
+                setStructuresTaxonomyId(arcTaxonomy.id);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, graphId, arcTaxonomy, arcType]);
+    // Load arcs for the selected taxonomy + arc type (+ optional structure scope).
+    useEffect(() => {
+        if (isCoa)
+            return; // CoA uses the parentId tree below, not arcs.
+        if (!arcTaxonomy) {
+            setArcs([]);
+            setState('ready');
+            return;
+        }
+        // Wait until the structure list (and its default selection) matches this
+        // taxonomy — otherwise switching arc types would briefly fetch with a
+        // stale / "All structures" scope before the default lands.
+        if (structuresTaxonomyId !== arcTaxonomy.id) {
+            setState('loading');
+            return;
+        }
+        let cancelled = false;
+        setState('loading');
+        setError(null);
+        fetchAllArcs(client, graphId, arcTaxonomy.id, arcType, structureId)
+            .then((rows) => {
+            if (cancelled)
+                return;
+            setArcs(rows);
+            setState('ready');
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setError(err instanceof Error ? err.message : 'Failed to load hierarchy');
+            setState('error');
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        client,
+        graphId,
+        arcTaxonomy,
+        arcType,
+        structureId,
+        structuresTaxonomyId,
+        isCoa,
+    ]);
+    // Load the Chart of Accounts tree — the backend returns it built and
+    // active-only (same source as the Chart of Accounts page); we re-order it by
+    // AccountType so the layout matches that page rather than the backend's code
+    // order (which degrades to alphabetic-by-name when account numbering is off).
+    useEffect(() => {
+        if (!isCoa) {
+            setCoaForest([]);
+            return;
+        }
+        let cancelled = false;
+        setState('loading');
+        setError(null);
+        clients.ledger
+            .getAccountTree(graphId)
+            .then((tree) => {
+            var _a;
+            if (cancelled)
+                return;
+            const roots = ((_a = tree === null || tree === void 0 ? void 0 : tree.roots) !== null && _a !== void 0 ? _a : []);
+            setCoaForest([...roots].sort(compareAccountNodes).map(mapAccountNode));
+            setState('ready');
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setError(err instanceof Error ? err.message : 'Failed to load accounts');
+            setState('error');
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [isCoa, graphId]);
+    const forest = useMemo(() => (isCoa ? coaForest : buildForest(arcs)), [isCoa, coaForest, arcs]);
+    // Reset the collapse state to the default expand depth on each new forest.
+    useEffect(() => {
+        setCollapsed(deepNodeIds(forest));
+    }, [forest]);
+    const toggle = (id) => setCollapsed((prev) => {
+        const next = new Set(prev);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        return next;
+    });
+    const showWeights = !isCoa && arcType === 'calculation';
+    return (_jsx("section", { className: "col-span-12 min-h-0 md:col-span-5", children: _jsxs(Card, { className: "flex h-full flex-col overflow-hidden", children: [_jsxs("div", { className: "flex shrink-0 flex-wrap items-center justify-between gap-2", children: [_jsx("h2", { className: "font-heading text-lg font-semibold text-gray-900 dark:text-white", children: "Hierarchy" }), !isCoa && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "flex overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700", role: "group", "aria-label": "Arc type", children: ARC_TYPES.map((t) => (_jsx("button", { onClick: () => setArcType(t.value), "aria-pressed": arcType === t.value, className: `px-3 py-1 text-xs font-medium transition-colors ${arcType === t.value
+                                            ? 'bg-primary-600 text-white'
+                                            : 'bg-white text-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'}`, children: t.label }, t.value))) }), structures.length > 0 && (_jsxs(Select, { sizing: "sm", value: structureId !== null && structureId !== void 0 ? structureId : '', onChange: (e) => setStructureId(e.target.value || null), "aria-label": "Structure", children: [_jsx("option", { value: "", children: "All structures" }), structures.map((s) => (_jsx("option", { value: s.id, children: s.name }, s.id)))] }))] }))] }), state === 'loading' && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400", children: [_jsx(Spinner, { size: "sm" }), " Loading hierarchy\u2026"] })), state === 'error' && (_jsx(Alert, { color: "failure", icon: HiInformationCircle, children: error })), state === 'ready' && !isCoa && !arcTaxonomy && (_jsxs(Alert, { color: "info", icon: HiInformationCircle, children: ["No ", (_a = ARC_TYPES.find((t) => t.value === arcType)) === null || _a === void 0 ? void 0 : _a.label.toLowerCase(), ' ', "hierarchy is published for", ' ', _jsx("span", { className: "font-mono", children: baseStandard !== null && baseStandard !== void 0 ? baseStandard : 'this taxonomy' }), "."] })), state === 'ready' && !isCoa && arcTaxonomy && forest.length === 0 && (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No arcs in this hierarchy." })), state === 'ready' && isCoa && forest.length === 0 && (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No accounts in this chart of accounts." })), state === 'ready' && forest.length > 0 && (_jsx("div", { role: "tree", "aria-label": "Taxonomy hierarchy", className: "min-h-0 flex-1 overflow-auto pr-1 font-mono text-sm", children: forest.map((root) => (_jsx(HierarchyRow, { path: root.id, node: root, depth: 0, showWeights: showWeights, collapsed: collapsed, onToggle: toggle, selectedElementId: selectedElementId, onSelectElement: onSelectElement }, root.id))) }))] }) }));
+}
+function HierarchyRow({ node, path, depth, showWeights, collapsed, onToggle, selectedElementId, onSelectElement, }) {
+    var _a, _b, _c;
+    const hasChildren = node.children.length > 0;
+    const isCollapsed = collapsed.has(node.id);
+    const isSelected = node.id === selectedElementId;
+    const label = (_b = (_a = node.name) !== null && _a !== void 0 ? _a : node.qname) !== null && _b !== void 0 ? _b : node.id;
+    return (_jsxs("div", { role: "treeitem", "aria-level": depth + 1, "aria-selected": isSelected, "aria-expanded": hasChildren ? !isCollapsed : undefined, children: [_jsxs("div", { className: `flex items-center gap-1 rounded px-1 py-0.5 ${isSelected
+                    ? 'bg-primary-100 dark:bg-primary-900/50'
+                    : 'hover:bg-gray-100 dark:hover:bg-gray-800'}`, style: { paddingLeft: `${depth * 16}px` }, children: [hasChildren ? (_jsx("button", { onClick: () => onToggle(node.id), className: "shrink-0 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200", "aria-label": isCollapsed ? `Expand ${label}` : `Collapse ${label}`, children: isCollapsed ? (_jsx(HiChevronRight, { className: "h-4 w-4" })) : (_jsx(HiChevronDown, { className: "h-4 w-4" })) })) : (_jsx("span", { className: "inline-block w-4 shrink-0" })), showWeights && node.weight != null && (_jsx("span", { className: `w-3 shrink-0 text-center font-bold ${node.weight >= 0
+                            ? 'text-green-600 dark:text-green-400'
+                            : 'text-red-600 dark:text-red-400'}`, title: `calc weight ${node.weight}`, children: node.weight >= 0 ? '+' : '−' })), _jsxs("button", { onClick: () => onSelectElement(node.id), className: "flex min-w-0 flex-1 items-center gap-2 text-left", title: (_c = node.qname) !== null && _c !== void 0 ? _c : undefined, children: [_jsx("span", { className: `truncate ${isSelected
+                                    ? 'text-primary-900 dark:text-primary-100'
+                                    : 'text-gray-800 dark:text-gray-100'}`, children: label }), node.isAbstract ? (_jsx(Badge, { color: "purple", size: "xs", className: "shrink-0", children: "abstract" })) : node.trait ? (_jsx(Badge, { color: classificationColor(node.trait), size: "xs", className: "shrink-0", children: node.trait })) : null] })] }), hasChildren && !isCollapsed && (_jsx("div", { role: "group", children: node.children.map((c) => (_jsx(HierarchyRow, { path: `${path}/${c.id}`, node: c, depth: depth + 1, showWeights: showWeights, collapsed: collapsed, onToggle: onToggle, selectedElementId: selectedElementId, onSelectElement: onSelectElement }, `${path}/${c.id}`))) }))] }));
+}

package/library/components/TaxonomySidebar.d.ts

@@ -0,0 +1,6 @@
+import type { LibraryTaxonomy } from '@robosystems/client/clients';
+export declare function TaxonomySidebar({ taxonomies, selectedId, onSelect, }: {
+    taxonomies: LibraryTaxonomy[];
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+}): import("react").JSX.Element;