@manta-eu/react 0.1.0

package/dist/graph/GraphListView.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useEffect, useMemo } from "react";
+import { flattenVisibleRows, listPageSize } from "./graph-list-utils.js";
+import { Button } from "#components/button/index";
+export function GraphListView(props) {
+    const { nodes, parentChildMap, collapsedNodeIds, selectedNodeId, planGraphIri, currentPage, onPageChange, renderHeader, renderRow, } = props;
+    const nodeMap = useMemo(() => new Map(nodes.map((node) => [node.id, node])), [nodes]);
+    const visibleRows = useMemo(() => flattenVisibleRows({ nodes, parentChildMap, collapsedNodeIds }), [nodes, parentChildMap, collapsedNodeIds]);
+    const totalPages = Math.max(1, Math.ceil(visibleRows.length / listPageSize));
+    const page = Math.min(currentPage, totalPages);
+    useEffect(() => {
+        if (page !== currentPage) {
+            onPageChange(page);
+        }
+    }, [currentPage, onPageChange, page]);
+    const pageStart = (page - 1) * listPageSize;
+    const pageRows = visibleRows.slice(pageStart, pageStart + listPageSize);
+    return (_jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col overflow-hidden bg-background", children: [_jsxs("div", { className: "border-b border-default-border px-4 py-3", children: [_jsx("div", { className: "typography-small-medium text-default-foreground", children: "List view" }), _jsxs("div", { className: "typography-tiny text-muted-foreground", children: [visibleRows.length, " visible row", visibleRows.length === 1 ? "" : "s"] })] }), _jsx("div", { className: "flex-1 overflow-auto pb-16", children: pageRows.length === 0 ? (_jsx("div", { className: "flex h-full items-center justify-center px-6", children: _jsx("span", { className: "typography-small text-muted-foreground", children: "No graph rows available." }) })) : (_jsxs("div", { children: [renderHeader({ nodes: pageRows.map((r) => r.node), nodeMap, planGraphIri }), _jsx("div", { children: pageRows.map(({ node, depth }) => {
+                                const parentNode = node.data.parentId ? nodeMap.get(node.data.parentId) : undefined;
+                                return (_jsx("div", { children: renderRow({
+                                        node,
+                                        depth,
+                                        parentLabel: parentNode?.data.label,
+                                        isSelected: selectedNodeId === node.id,
+                                        isCollapsed: collapsedNodeIds.has(node.id),
+                                        planGraphIri,
+                                    }) }, node.id));
+                            }) })] })) }), _jsx("div", { className: "border-t border-default-border bg-background/95 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/80", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("span", { className: "typography-tiny text-muted-foreground", children: ["Showing ", visibleRows.length === 0 ? 0 : pageStart + 1, "-", Math.min(pageStart + listPageSize, visibleRows.length), " of ", visibleRows.length] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", rounded: "md", icon: ChevronLeft, label: "Previous", onClick: () => onPageChange(page - 1), disabled: page <= 1 }), _jsxs("span", { className: "typography-tiny min-w-[4.5rem] text-center text-muted-foreground", children: ["Page ", page, " / ", totalPages] }), _jsx(Button, { variant: "ghost", size: "sm", rounded: "md", icon: ChevronRight, showRightIcon: true, showLeftIcon: false, label: "Next", onClick: () => onPageChange(page + 1), disabled: page >= totalPages })] })] }) })] }));
+}

package/dist/graph/NodeContextMenu.d.ts

@@ -0,0 +1,17 @@
+import type { RDFNodeData } from "./types.js";
+export type NodeContextMenuProps = {
+    nodeId: string;
+    nodeLabel: string;
+    nodeData?: RDFNodeData;
+    x: number;
+    y: number;
+    onClose: () => void;
+    onLoadRelationships?: (nodeId: string) => void;
+    onExpandAll?: (nodeId: string) => void;
+    onCollapseAll?: (nodeId: string) => void;
+    onExportNode?: (nodeId: string) => void;
+    canLoadRelationships?: boolean;
+    isExpanded?: boolean;
+};
+export declare const NodeContextMenu: import("react").NamedExoticComponent<NodeContextMenuProps>;
+//# sourceMappingURL=NodeContextMenu.d.ts.map

package/dist/graph/NodeContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeContextMenu.d.ts","sourceRoot":"","sources":["../../src/graph/NodeContextMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,eAAe,4DAwI1B,CAAC"}

package/dist/graph/NodeContextMenu.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Download, ExternalLink, Link, Maximize2, Minimize2 } from "lucide-react";
+import { memo, useCallback } from "react";
+import { useNodeExternalLink } from "./special-nodes/use-node-external-link.js";
+import { cn } from "#style";
+export const NodeContextMenu = memo(function NodeContextMenu(props) {
+    const { nodeId, nodeLabel, nodeData, x, y, onClose, onLoadRelationships, onExpandAll, onCollapseAll, onExportNode, canLoadRelationships = true, isExpanded = false, } = props;
+    const externalLink = useNodeExternalLink(nodeData);
+    const handleLoadRelationships = useCallback(() => {
+        onLoadRelationships?.(nodeId);
+        onClose();
+    }, [nodeId, onLoadRelationships, onClose]);
+    const handleToggleExpand = useCallback(() => {
+        if (isExpanded) {
+            onCollapseAll?.(nodeId);
+        }
+        else {
+            onExpandAll?.(nodeId);
+        }
+        onClose();
+    }, [nodeId, isExpanded, onExpandAll, onCollapseAll, onClose]);
+    const handleExportNode = useCallback(() => {
+        onExportNode?.(nodeId);
+        onClose();
+    }, [nodeId, onExportNode, onClose]);
+    const handleOpenExternal = useCallback(() => {
+        if (externalLink) {
+            window.open(externalLink.url, "_blank", "noopener,noreferrer");
+        }
+        onClose();
+    }, [externalLink, onClose]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-[9998]", onClick: onClose }), _jsxs("div", { className: cn("fixed z-[9999]", "bg-background", "border border-default-border", "rounded-lg shadow-xl overflow-hidden", "min-w-[220px] max-w-[280px]"), style: { left: `${x}px`, top: `${y}px` }, children: [_jsxs("div", { className: "px-3 py-2 border-b border-default-border bg-background", children: [_jsx("div", { className: "typography-small-medium truncate text-default-foreground", children: nodeLabel }), _jsx("div", { className: "typography-tiny text-muted-foreground truncate font-mono", children: nodeId })] }), _jsxs("div", { className: "py-1", children: [externalLink && (_jsxs("button", { onClick: handleOpenExternal, className: cn("w-full px-3 py-2 text-left typography-small", "flex items-center gap-2", "text-default-foreground", "hover:bg-muted", "transition-colors"), children: [_jsx(ExternalLink, { className: "size-4" }), externalLink.label] })), canLoadRelationships && (_jsxs("button", { onClick: handleLoadRelationships, className: cn("w-full px-3 py-2 text-left typography-small", "flex items-center gap-2", "text-default-foreground", "hover:bg-background/50", "transition-colors"), children: [_jsx(Link, { className: "size-4" }), "Load relationships"] })), _jsx("button", { onClick: handleToggleExpand, className: cn("w-full px-3 py-2 text-left typography-small", "flex items-center gap-2", "text-default-foreground", "hover:bg-muted", "transition-colors"), children: isExpanded ? (_jsxs(_Fragment, { children: [_jsx(Minimize2, { className: "size-4" }), "Collapse all children"] })) : (_jsxs(_Fragment, { children: [_jsx(Maximize2, { className: "size-4" }), "Expand all children"] })) }), _jsxs("button", { onClick: handleExportNode, className: cn("w-full px-3 py-2 text-left typography-small", "flex items-center gap-2", "text-default-foreground", "hover:bg-background/50", "transition-colors"), children: [_jsx(Download, { className: "size-4" }), "Export node data"] })] })] })] }));
+});

package/dist/graph/NodeDetailPanel/NodeDetailPanel.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import type { RDFNode, RDFNodeData } from "../types.js";
+export type RenderPropertyDiffArgs = {
+    node: RDFNodeData;
+    nodeIri: string;
+    planGraphIri?: string;
+};
+export type NodeDetailPanelProps = {
+    node: RDFNodeData;
+    allNodes?: RDFNode[];
+    planGraphIri?: string;
+    onClose?: () => void;
+    renderPropertyDiff?: (args: RenderPropertyDiffArgs) => ReactNode;
+};
+export declare function NodeDetailPanel(props: NodeDetailPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NodeDetailPanel.d.ts.map

package/dist/graph/NodeDetailPanel/NodeDetailPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeDetailPanel.d.ts","sourceRoot":"","sources":["../../../src/graph/NodeDetailPanel/NodeDetailPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAkB,MAAM,UAAU,CAAC;AAUrE,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,SAAS,CAAC;CAClE,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CA8H1D"}

package/dist/graph/NodeDetailPanel/NodeDetailPanel.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { arrayWrap } from "@manta-eu/lib/array";
+import { isPresent } from "@manta-eu/lib/present";
+import { expandPrefix } from "@manta-eu/rdf-lib/namespaces";
+import { ChevronLeft, ExternalLink } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { NodeJsonView } from "../NodeJsonView.js";
+import { getNodeChannel } from "../special-nodes/node-data.js";
+import { useNodeExternalLink } from "../special-nodes/use-node-external-link.js";
+import { InstanceDetailView, TypeSummaryListView } from "./TypeSummaryPanel.js";
+import { ChannelIcon } from "#components/channel-icon/index";
+import { EntityRelationTree } from "#entity-tree/index";
+import { useConnectedAccountEntityIris } from "#hooks/use-connected-account-entity-iris";
+import { jsonLdToTurtle } from "#shacl/jsonld-to-turtle";
+import { ShaclForm } from "#shacl/ShaclForm";
+import { findShapeForTypes } from "#shacl/shape-registry";
+import { cn } from "#style";
+export function NodeDetailPanel(props) {
+    const { node, planGraphIri, onClose, renderPropertyDiff } = props;
+    const isSummaryNode = Array.isArray(node.allInstances);
+    const [selectedInstance, setSelectedInstance] = useState(null);
+    const nodeKey = `${node.label}-${node.type ?? ""}`;
+    useEffect(() => {
+        setSelectedInstance(null);
+    }, [nodeKey]);
+    const nodeTypes = useMemo(() => {
+        if (node.type)
+            return [node.type];
+        const jsonLdNode = node.jsonLd;
+        if (jsonLdNode["@type"]) {
+            return arrayWrap(jsonLdNode["@type"]);
+        }
+        return [];
+    }, [node]);
+    const shape = useMemo(() => findShapeForTypes(nodeTypes), [nodeTypes]);
+    const nodeIri = useMemo(() => {
+        const jsonLdNode = node.jsonLd;
+        return expandPrefix(jsonLdNode["@id"] || "");
+    }, [node]);
+    const { iris: connectedAccountIris } = useConnectedAccountEntityIris();
+    const isConnectedAccountRoot = isPresent(nodeIri) && connectedAccountIris.has(nodeIri);
+    const rootTypeIri = useMemo(() => {
+        if (!isConnectedAccountRoot)
+            return;
+        return nodeTypes.map(expandPrefix)[0];
+    }, [isConnectedAccountRoot, nodeTypes]);
+    const valuesTurtle = useMemo(() => {
+        if (!shape || !nodeIri)
+            return;
+        try {
+            return jsonLdToTurtle(node.jsonLd, nodeIri);
+        }
+        catch {
+            return;
+        }
+    }, [shape, node.jsonLd, nodeIri]);
+    const headerTitle = isSummaryNode && selectedInstance ? selectedInstance.label : node.label;
+    const externalLink = useNodeExternalLink(node);
+    const channel = getNodeChannel(node);
+    return (_jsxs("div", { className: "w-full bg-background border border-default-border rounded-lg shadow-lg overflow-hidden", children: [_jsxs("div", { className: "px-3 py-2 border-b border-default-border bg-background flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [isSummaryNode && selectedInstance && (_jsx("button", { type: "button", onClick: () => setSelectedInstance(null), className: "text-muted-foreground hover:text-default-foreground transition-colors shrink-0 -ml-1", "aria-label": "Back to list", children: _jsx(ChevronLeft, { className: "size-4" }) })), channel && _jsx(ChannelIcon, { channel: channel, iconClassName: "size-4" }), _jsx("h3", { className: "typography-small-semibold text-default-foreground min-w-0 flex-1 break-all line-clamp-1", title: headerTitle, children: headerTitle })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [externalLink && (_jsx("a", { href: externalLink.url, target: "_blank", rel: "noopener noreferrer", className: "text-muted-foreground hover:text-default-foreground transition-colors p-0.5", "aria-label": externalLink.label, title: externalLink.label, children: _jsx(ExternalLink, { className: "size-4" }) })), onClose && (_jsx("button", { type: "button", onClick: onClose, className: cn("text-muted-foreground hover:text-default-foreground", "transition-colors"), "aria-label": "Close panel", children: _jsx("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] })] }), isSummaryNode ? (selectedInstance ? (_jsx(InstanceDetailView, { instance: selectedInstance })) : (_jsx(TypeSummaryListView, { node: node, onSelectInstance: setSelectedInstance }))) : (_jsxs("div", { className: "p-3 overflow-auto max-h-[50vh] space-y-4", children: [shape && valuesTurtle ? (_jsx(ShaclForm, { shapes: shape.shapeTurtle, values: valuesTurtle, valuesSubject: nodeIri, viewMode: true, collapse: "open" })) : nodeIri && renderPropertyDiff ? (renderPropertyDiff({ node, nodeIri, planGraphIri })) : !isConnectedAccountRoot ? (_jsx(NodeJsonView, { jsonLd: node.jsonLd, message: "No form definition available for this type" })) : null, isConnectedAccountRoot && nodeIri ? (_jsx(EntityRelationTree, { rootIri: nodeIri, rootLabel: node.label, rootTypeIri: rootTypeIri })) : null] }))] }));
+}

package/dist/graph/NodeDetailPanel/PropertyDiffView.d.ts

@@ -0,0 +1,18 @@
+import type { NodePropertyChange } from "../graph-list-utils.js";
+import type { RDFNodeData } from "../types.js";
+export type PropertyDiffViewProps = {
+    node: RDFNodeData;
+    displayType?: string;
+    properties?: NodePropertyChange[];
+    isLoading?: boolean;
+    error?: unknown;
+};
+export declare function PropertyValue(props: {
+    value: string;
+    predicate?: string;
+    predicateLabel?: string | null;
+    currencyCode?: string | null;
+    valueScale?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PropertyDiffView(props: PropertyDiffViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PropertyDiffView.d.ts.map

package/dist/graph/NodeDetailPanel/PropertyDiffView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyDiffView.d.ts","sourceRoot":"","sources":["../../../src/graph/NodeDetailPanel/PropertyDiffView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,WAAW,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAmDF,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAuBA;AA0ED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAmF5D"}

package/dist/graph/NodeDetailPanel/PropertyDiffView.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { Loader2 } from "lucide-react";
+import { useMemo } from "react";
+import { formatDisplayValue, normalizeCurrencyCode } from "../property-formatters.js";
+import { cn } from "#style";
+const changeTypeStyles = {
+    UPDATED: "bg-warning/10",
+    ADDED: "bg-accent-foreground/10",
+    UNCHANGED: "",
+};
+const changeTypeBadge = {
+    UPDATED: {
+        label: "changed",
+        className: "bg-warning-foreground text-background",
+    },
+    ADDED: { label: "new", className: "text-accent-foreground bg-accent-foreground/15" },
+};
+function parseListValue(value) {
+    const trimmed = value.trim();
+    if (!trimmed.startsWith("[") || !trimmed.endsWith("]"))
+        return null;
+    const inner = trimmed.slice(1, -1).trim();
+    if (!inner)
+        return null;
+    const items = inner.split(/,\s*(?=\{)/).map((s) => s.trim());
+    if (items.length < 2)
+        return null;
+    return items;
+}
+function formatListItem(item) {
+    const stripped = item.replace(/^\{|\}$/g, "").trim();
+    return stripped
+        .split(",")
+        .map((pair) => {
+        const [key, val] = pair.split(":").map((s) => s.trim());
+        if (!key || val === undefined)
+            return pair.trim();
+        const label = key.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+        return `${label}: ${val.replace(/_/g, " ")}`;
+    })
+        .join(", ");
+}
+export function PropertyValue(props) {
+    const items = parseListValue(props.value);
+    if (items) {
+        return (_jsx("ul", { className: "list-disc pl-4 space-y-0.5", children: items.map((item) => (_jsx("li", { className: "typography-tiny text-default-foreground", children: formatListItem(item) }, item))) }));
+    }
+    return (_jsx("span", { className: "typography-tiny text-default-foreground break-words", children: formatDisplayValue(props.value, {
+            predicate: props.predicate,
+            predicateLabel: props.predicateLabel,
+            currencyCode: props.currencyCode,
+            valueScale: props.valueScale,
+        }) }));
+}
+function extractCurrencyCode(node, properties) {
+    const propertyCurrency = properties?.find((property) => {
+        const combined = `${property.predicateLabel ?? ""} ${property.predicate}`.toLowerCase();
+        return combined.includes("currency");
+    })?.object ?? null;
+    const nodeCurrency = node.properties.find((property) => {
+        const key = property.key.toLowerCase();
+        return key.includes("currency");
+    })?.value ?? null;
+    return normalizeCurrencyCode(String(propertyCurrency ?? nodeCurrency ?? ""));
+}
+function PropertyRow(props) {
+    const { predicateLabel, predicate, object, objectLabel, beforeObject, beforeObjectLabel, changeType, currencyCode, valueScale, } = props;
+    const label = predicateLabel || predicate.split(/[#/]/).pop() || predicate;
+    const value = objectLabel || object;
+    const badge = changeTypeBadge[changeType];
+    const formattedBeforeValue = beforeObject != null
+        ? formatDisplayValue(beforeObjectLabel || beforeObject, {
+            predicate,
+            predicateLabel,
+            currencyCode,
+            valueScale,
+        })
+        : null;
+    return (_jsxs("div", { className: cn("flex flex-col gap-0.5 px-3 py-1.5 border-b border-default-border last:border-b-0", changeTypeStyles[changeType]), children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "typography-tiny-medium text-muted-foreground min-w-[90px] flex-shrink-0", children: label }), badge && (_jsx("span", { className: cn("typography-tiny-medium rounded-full px-1.5 py-0.5", badge.className), children: badge.label }))] }), _jsxs("div", { className: "pl-0", children: [changeType === "UPDATED" && formattedBeforeValue != null && (_jsx("span", { className: "typography-tiny text-muted-foreground line-through mr-1.5", children: formattedBeforeValue })), _jsx(PropertyValue, { value: value, predicate: predicate, predicateLabel: predicateLabel, currencyCode: currencyCode, valueScale: valueScale })] })] }));
+}
+export function PropertyDiffView(props) {
+    const { node, displayType, properties, isLoading, error } = props;
+    const changedProperties = useMemo(() => properties?.filter((p) => p.changeType !== "UNCHANGED") ?? [], [properties]);
+    const unchangedProperties = useMemo(() => properties?.filter((p) => p.changeType === "UNCHANGED") ?? [], [properties]);
+    const currencyCode = useMemo(() => extractCurrencyCode(node, properties), [node, properties]);
+    return (_jsxs(_Fragment, { children: [displayType && (_jsx("div", { className: "px-3 py-1.5 flex items-center gap-1.5", children: _jsx("span", { className: "typography-tiny text-muted-foreground shrink-0", children: displayType }) })), _jsxs("div", { className: "overflow-auto max-h-[50vh]", children: [isLoading && (_jsxs("div", { className: "flex items-center justify-center gap-2 py-6", children: [_jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" }), _jsx("span", { className: "typography-tiny text-muted-foreground", children: "Loading properties..." })] })), !!error && (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-3 py-2 typography-tiny text-muted-foreground bg-warning/10", children: "Network request failed - showing local properties" }), node.properties && node.properties.length > 0 ? (_jsxs("div", { children: [_jsxs("div", { className: "px-3 py-1.5 typography-tiny-semibold text-default-foreground bg-background/50 border-t border-default-border", children: ["Node Properties (", node.properties.length, ")"] }), node.properties.map((p) => (_jsx(PropertyRow, { predicateLabel: p.key, predicate: p.key, object: String(p.value), objectLabel: null, beforeObject: null, beforeObjectLabel: null, changeType: "UNCHANGED", currencyCode: currencyCode }, `${p.key}-${p.value}`)))] })) : (_jsx("div", { className: "px-3 py-3 typography-tiny text-muted-foreground italic", children: "No properties available" }))] })), properties && properties.length === 0 && (_jsx("div", { className: "px-3 py-4 typography-tiny text-muted-foreground italic text-center", children: "No properties found" })), isPresent(changedProperties) && (_jsxs("div", { children: [_jsxs("div", { className: "px-3 py-1.5 typography-tiny-semibold text-accent-foreground bg-accent-foreground/10", children: ["Plan Changes (", changedProperties.length, ")"] }), changedProperties.map((p) => (_jsx(PropertyRow, { ...p, currencyCode: currencyCode }, `${p.predicate}-${p.object}`)))] })), isPresent(unchangedProperties) && (_jsxs("div", { children: [_jsxs("div", { className: "px-3 py-1.5 typography-tiny-semibold text-default-foreground bg-background/50 border-t border-default-border", children: ["Current Properties (", unchangedProperties.length, ")"] }), unchangedProperties.map((p) => (_jsx(PropertyRow, { ...p, currencyCode: currencyCode }, `${p.predicate}-${p.object}`)))] }))] })] }));
+}

package/dist/graph/NodeDetailPanel/TypeSummaryPanel.d.ts

@@ -0,0 +1,13 @@
+import type { RDFNodeData, SampleInstance } from "../types.js";
+/** Most common non-status preview keys across instances; ties break by graph preview priority, then first-seen. */
+export declare function previewPropertyKeys(instances: SampleInstance[], limit?: number): string[];
+export type InstanceDetailViewProps = {
+    instance: SampleInstance;
+};
+export declare function InstanceDetailView(props: InstanceDetailViewProps): import("react/jsx-runtime").JSX.Element;
+export type TypeSummaryListViewProps = {
+    node: RDFNodeData;
+    onSelectInstance: (instance: SampleInstance) => void;
+};
+export declare function TypeSummaryListView(props: TypeSummaryListViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TypeSummaryPanel.d.ts.map

package/dist/graph/NodeDetailPanel/TypeSummaryPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeSummaryPanel.d.ts","sourceRoot":"","sources":["../../../src/graph/NodeDetailPanel/TypeSummaryPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AA0B5D,mHAAmH;AACnH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,cAAc,EAAE,EAAE,KAAK,SAAuB,GAAG,MAAM,EAAE,CAoCvG;AA2DD,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,cAAc,CAAC;CAC1B,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CA4BhE;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,WAAW,CAAC;IAClB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CA2BlE"}

package/dist/graph/NodeDetailPanel/TypeSummaryPanel.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { isDisplayablePreviewKey, previewFieldPriority, shouldHidePreviewField } from "../graph-list-utils.js";
+import { formatDisplayValue } from "../property-formatters.js";
+import { filterStatusProps, getStatusFromProperties, statusColors, titleCase } from "../status-utils.js";
+import { PropertyValue } from "./PropertyDiffView.js";
+import { DataTable } from "#components/table/index";
+const previewPropertyLimit = 2;
+const denseCellMeta = { className: "h-9 max-w-40 px-2 py-1" };
+function StatusBadge(props) {
+    const style = statusColors[props.status.toLowerCase()];
+    if (!style)
+        return null;
+    return (_jsx("span", { className: "px-1.5 py-0.5 rounded typography-tiny flex-shrink-0", style: { backgroundColor: style.bg, color: style.text }, children: props.status.toLowerCase() }));
+}
+/** Most common non-status preview keys across instances; ties break by graph preview priority, then first-seen. */
+export function previewPropertyKeys(instances, limit = previewPropertyLimit) {
+    const stats = new Map();
+    let nextFirstSeen = 0;
+    for (const instance of instances) {
+        const seenInInstance = new Set();
+        for (const prop of filterStatusProps(instance.properties)) {
+            if (!isDisplayablePreviewKey(prop.key))
+                continue;
+            const label = prop.label ?? prop.key;
+            if (shouldHidePreviewField(label, prop.key))
+                continue;
+            if (seenInInstance.has(prop.key))
+                continue;
+            seenInInstance.add(prop.key);
+            const existing = stats.get(prop.key);
+            const priority = previewFieldPriority(label, prop.key);
+            if (existing) {
+                existing.count += 1;
+                existing.priority = Math.max(existing.priority, priority);
+                continue;
+            }
+            stats.set(prop.key, { count: 1, priority, firstSeen: nextFirstSeen });
+            nextFirstSeen += 1;
+        }
+    }
+    return [...stats.entries()]
+        .sort(([, left], [, right]) => right.count - left.count || right.priority - left.priority || left.firstSeen - right.firstSeen)
+        .slice(0, limit)
+        .map(([key]) => key);
+}
+function propertyValue(instance, key) {
+    return instance.properties.find((prop) => prop.key === key)?.value;
+}
+function buildInstanceColumns(args) {
+    const { previewKeys, hasStatus } = args;
+    const columns = [
+        {
+            id: "name",
+            header: "Name",
+            meta: denseCellMeta,
+            cell: ({ row }) => (_jsx("span", { className: "typography-small block truncate text-default-foreground", title: row.original.label, children: row.original.label })),
+        },
+    ];
+    if (hasStatus) {
+        columns.push({
+            id: "status",
+            header: "Status",
+            meta: denseCellMeta,
+            cell: ({ row }) => {
+                const status = getStatusFromProperties(row.original.properties);
+                return status ? _jsx(StatusBadge, { status: status }) : null;
+            },
+        });
+    }
+    columns.push(...previewKeys.map((key) => ({
+        id: `preview:${key}`,
+        header: titleCase(key),
+        meta: denseCellMeta,
+        cell: ({ row }) => {
+            const value = propertyValue(row.original, key);
+            if (!isPresent(value))
+                return null;
+            return (_jsx("span", { className: "typography-tiny block truncate text-muted-foreground", children: formatDisplayValue(value) }));
+        },
+    })));
+    return columns;
+}
+export function InstanceDetailView(props) {
+    const { instance } = props;
+    const status = getStatusFromProperties(instance.properties);
+    const detailProps = filterStatusProps(instance.properties);
+    return (_jsxs("div", { className: "overflow-auto max-h-[50vh]", children: [status && (_jsx("div", { className: "px-3 py-1.5 border-b border-default-border", children: _jsx(StatusBadge, { status: status }) })), detailProps.length === 0 && !status && (_jsx("div", { className: "px-3 py-4 typography-tiny text-muted-foreground italic text-center", children: "No properties available" })), detailProps.map((prop, index) => (_jsxs("div", { className: "flex flex-col gap-0.5 px-3 py-1.5 border-b border-default-border last:border-b-0", children: [_jsx("span", { className: "typography-tiny-medium text-muted-foreground break-words", children: titleCase(prop.key) }), _jsx(PropertyValue, { value: prop.value })] }, `${prop.key}-${index}`)))] }));
+}
+export function TypeSummaryListView(props) {
+    const { node, onSelectInstance } = props;
+    const allInstances = (node.allInstances ?? []);
+    const previewKeys = useMemo(() => previewPropertyKeys(allInstances), [allInstances]);
+    const hasStatus = useMemo(() => allInstances.some((instance) => isPresent(getStatusFromProperties(instance.properties))), [allInstances]);
+    const columns = useMemo(() => buildInstanceColumns({ previewKeys, hasStatus }), [previewKeys, hasStatus]);
+    const table = useReactTable({
+        data: allInstances,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getRowId: (instance) => instance.id,
+    });
+    return (_jsx("div", { className: "overflow-auto max-h-[50vh]", children: _jsx(DataTable, { table: table, noResultsMessage: "No instances available", onRowClick: (row) => onSelectInstance(row.original) }) }));
+}

package/dist/graph/NodeDetailPanel/index.d.ts

@@ -0,0 +1,4 @@
+export { NodeDetailPanel, type NodeDetailPanelProps, type RenderPropertyDiffArgs } from "./NodeDetailPanel.js";
+export { PropertyDiffView, PropertyValue, type PropertyDiffViewProps } from "./PropertyDiffView.js";
+export { InstanceDetailView, TypeSummaryListView, type InstanceDetailViewProps, type TypeSummaryListViewProps, } from "./TypeSummaryPanel.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/graph/NodeDetailPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/graph/NodeDetailPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAC5G,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACjG,OAAO,EACL,kBAAkB,EAClB,mBAAmB,EACnB,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,GAC9B,MAAM,oBAAoB,CAAC"}

package/dist/graph/NodeDetailPanel/index.js

@@ -0,0 +1,3 @@
+export { NodeDetailPanel } from "./NodeDetailPanel.js";
+export { PropertyDiffView, PropertyValue } from "./PropertyDiffView.js";
+export { InstanceDetailView, TypeSummaryListView, } from "./TypeSummaryPanel.js";

package/dist/graph/NodeJsonView.d.ts

@@ -0,0 +1,7 @@
+export type NodeJsonViewProps = {
+    jsonLd: Record<string, unknown>;
+    message?: string;
+    className?: string;
+};
+export declare function NodeJsonView(props: NodeJsonViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NodeJsonView.d.ts.map

package/dist/graph/NodeJsonView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeJsonView.d.ts","sourceRoot":"","sources":["../../src/graph/NodeJsonView.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAepD"}

package/dist/graph/NodeJsonView.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "#style";
+export function NodeJsonView(props) {
+    const { jsonLd, message, className } = props;
+    return (_jsxs("div", { className: cn("flex flex-col", className), children: [message && (_jsx("div", { className: "px-3 py-2 typography-tiny text-muted-foreground bg-background border-b border-default-border", children: message })), _jsx("pre", { className: "p-3 typography-tiny text-default-foreground overflow-auto max-h-[50vh]", children: JSON.stringify(jsonLd, null, 2) })] }));
+}

package/dist/graph/OpenInPlatformLink.d.ts

@@ -0,0 +1,18 @@
+import { type IRI } from "@manta-eu/rdf-lib/namespaces";
+import type { MouseEvent } from "react";
+export type OpenInPlatformLinkProps = {
+    iri: IRI;
+    schema: {
+        "@type": IRI;
+    };
+    redirectEndpoint?: string;
+    className?: string;
+    onClick?: (event: MouseEvent) => void;
+};
+export type ResolvedLink = {
+    href: string;
+    label: string;
+};
+export declare function resolveOpenInPlatformLink(props: OpenInPlatformLinkProps): ResolvedLink | undefined;
+export declare function OpenInPlatformLink(props: OpenInPlatformLinkProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=OpenInPlatformLink.d.ts.map

package/dist/graph/OpenInPlatformLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenInPlatformLink.d.ts","sourceRoot":"","sources":["../../src/graph/OpenInPlatformLink.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,uBAAuB,GAAG;IACpC,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,EAAE;QAAE,OAAO,EAAE,GAAG,CAAA;KAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,SAAS,CAYlG;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,kDAsBhE"}

package/dist/graph/OpenInPlatformLink.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveExternalLinkLabel } from "@manta-eu/ldo/external-links";
+import { redirectPath } from "@manta-eu/ldo/redirect-queries";
+import { ExternalLink as ExternalLinkIcon } from "lucide-react";
+import { defaultRedirectEndpoint, useRedirectEndpoint } from "../hooks/use-redirect-endpoint.js";
+import { cn } from "#style";
+export function resolveOpenInPlatformLink(props) {
+    const { iri, schema, redirectEndpoint = defaultRedirectEndpoint } = props;
+    const entityTypeUri = schema["@type"];
+    if (!iri || !entityTypeUri)
+        return undefined;
+    const label = resolveExternalLinkLabel(entityTypeUri);
+    if (!label)
+        return undefined;
+    return {
+        href: redirectPath(iri, redirectEndpoint),
+        label,
+    };
+}
+export function OpenInPlatformLink(props) {
+    const { className, onClick, redirectEndpoint } = props;
+    const contextEndpoint = useRedirectEndpoint();
+    const resolved = resolveOpenInPlatformLink({ ...props, redirectEndpoint: redirectEndpoint ?? contextEndpoint });
+    if (!resolved)
+        return null;
+    return (_jsx("a", { href: resolved.href, target: "_blank", rel: "noopener noreferrer", title: resolved.label, "aria-label": resolved.label, onClick: onClick, className: cn("text-muted-foreground hover:text-default-foreground inline-flex items-center transition-colors", className), children: _jsx(ExternalLinkIcon, { size: 11 }) }));
+}

package/dist/graph/change-node.d.ts

@@ -0,0 +1,5 @@
+import type { ActivityChangeTriple } from "../lib/activity-changeset.js";
+import { findEntityNode } from "./EntityCard.js";
+export type ChangeEntityNode = NonNullable<ReturnType<typeof findEntityNode>>;
+export declare function entityNodeFromChangeTriples(subjectIri: string, triples: ActivityChangeTriple[]): ChangeEntityNode | undefined;
+//# sourceMappingURL=change-node.d.ts.map

package/dist/graph/change-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"change-node.d.ts","sourceRoot":"","sources":["../../src/graph/change-node.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC;AAG9E,wBAAgB,2BAA2B,CACzC,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,oBAAoB,EAAE,GAC9B,gBAAgB,GAAG,SAAS,CAc9B"}

package/dist/graph/change-node.js

@@ -0,0 +1,16 @@
+import { createLiteral, createNamedNode } from "../lib/rdf-helpers.js";
+import { findEntityNode } from "./EntityCard.js";
+import { rdfGraphToNodesAndEdges } from "./graph-model.js";
+// Undefined without an rdf:type: rdfGraphToNodesAndEdges yields no nodes, so there is nothing to route on.
+export function entityNodeFromChangeTriples(subjectIri, triples) {
+    if (triples.length === 0)
+        return undefined;
+    const predicates = new Map();
+    for (const { predicate, object, objectIsIri } of triples) {
+        const terms = predicates.get(predicate) ?? [];
+        terms.push(objectIsIri ? createNamedNode(object) : createLiteral(object));
+        predicates.set(predicate, terms);
+    }
+    const graph = new Map([[subjectIri, predicates]]);
+    return findEntityNode(rdfGraphToNodesAndEdges(graph).nodes, subjectIri);
+}

package/dist/graph/createNodeRouter.d.ts

@@ -0,0 +1,18 @@
+import { type IRI } from "@manta-eu/rdf-lib/namespaces";
+import type { NodeProps } from "@xyflow/react";
+import type { ComponentType } from "react";
+import type { EntityView, RDFNode } from "./types.js";
+export type RDFNodeComponent = ComponentType<NodeProps<RDFNode>>;
+export type CreateNodeRouterOptions = {
+    wrap: (View: EntityView) => RDFNodeComponent;
+    fallback: RDFNodeComponent;
+};
+export type NodeRouter = {
+    getNodeComponent: (entityType?: string, actionShape?: IRI) => RDFNodeComponent;
+    getEntityView: (entityType?: string, actionShape?: IRI) => EntityView | undefined;
+};
+export declare const typedEntityTypeIris: ReadonlySet<IRI>;
+export declare const diffSubsumingViewIris: ReadonlySet<IRI>;
+export declare const typedActionShapeIris: ReadonlySet<IRI>;
+export declare function createNodeRouter(opts: CreateNodeRouterOptions): NodeRouter;
+//# sourceMappingURL=createNodeRouter.d.ts.map

package/dist/graph/createNodeRouter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createNodeRouter.d.ts","sourceRoot":"","sources":["../../src/graph/createNodeRouter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,GAAG,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAgD3C,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEnD,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AAEjE,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,gBAAgB,CAAC;IAC7C,QAAQ,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,gBAAgB,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,GAAG,KAAK,gBAAgB,CAAC;IAC/E,aAAa,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,GAAG,KAAK,UAAU,GAAG,SAAS,CAAC;CACnF,CAAC;AAsEF,eAAO,MAAM,mBAAmB,EAAE,WAAW,CAAC,GAAG,CAA0D,CAAC;AAK5G,eAAO,MAAM,qBAAqB,EAAE,WAAW,CAAC,GAAG,CAQjD,CAAC;AAEH,eAAO,MAAM,oBAAoB,EAAE,WAAW,CAAC,GAAG,CAAuD,CAAC;AAgB1G,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,uBAAuB,GAAG,UAAU,CAqB1E"}