@dxos/react-ui-rdf 0.0.0 → 0.11.1

package/dist/lib/index.mjs

@@ -0,0 +1,338 @@
+import { createContext, forwardRef, useContext, useMemo, useState } from "react";
+import { buildFactGraph, factSourceFromFacts } from "@dxos/pipeline-rdf";
+import { Icon, IconButton, Input, Panel, ScrollArea, Tag, Toolbar } from "@dxos/react-ui";
+import { Tree } from "@dxos/react-ui-graph";
+import { Empty, Listbox } from "@dxos/react-ui-list";
+import { mx, tv } from "@dxos/ui-theme";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/types.ts
+/** Group facts by subject entity and flag predicate-level conflicts within each group. */
+var groupFacts = (facts, filter) => {
+	const needle = filter.trim().toLowerCase();
+	const filtered = needle ? facts.filter((fact) => {
+		const { subject, predicate, object } = fact.assertion;
+		return [
+			formatTerm(subject),
+			predicate,
+			formatTerm(object)
+		].some((value) => value.toLowerCase().includes(needle));
+	}) : facts;
+	const bySubject = /* @__PURE__ */ new Map();
+	const labelByKey = /* @__PURE__ */ new Map();
+	for (const fact of filtered) {
+		const key = termKey(fact.assertion.subject);
+		const list = bySubject.get(key) ?? [];
+		list.push(fact);
+		bySubject.set(key, list);
+		if (!labelByKey.has(key)) labelByKey.set(key, formatTerm(fact.assertion.subject));
+	}
+	return [...bySubject.entries()].map(([key, groupFactsList]) => {
+		const subject = labelByKey.get(key) ?? key;
+		const byPredicate = /* @__PURE__ */ new Map();
+		for (const fact of groupFactsList) {
+			const list = byPredicate.get(fact.assertion.predicate) ?? [];
+			list.push(fact);
+			byPredicate.set(fact.assertion.predicate, list);
+		}
+		const conflictedIds = /* @__PURE__ */ new Set();
+		for (const list of byPredicate.values()) if (new Set(list.map((fact) => termKey(fact.assertion.object))).size > 1) for (const fact of list) conflictedIds.add(fact.id);
+		return {
+			subject,
+			facts: groupFactsList,
+			conflicted: conflictedIds.size > 0,
+			conflictedIds
+		};
+	});
+};
+/** The join/grouping key: the entity slug (or literal). Casing variants collapse to one key. */
+var termKey = (term) => "entity" in term ? term.entity : term.literal;
+/** Display form: the preserved surface label, else a prettified slug; literals render verbatim. */
+var formatTerm = (term) => "entity" in term ? term.label ?? humanize(term.entity) : term.literal;
+/**
+* Convert a {@link FactGraph} into a rooted {@link TreeNode} hierarchy for the tidy-tree renderer.
+* A fact graph is a general (cyclic) graph; the tidy tree needs a hierarchy, so this takes the BFS
+* spanning tree from `rootId` over the undirected edges (each node appears once). Returns `undefined`
+* if the root isn't in the graph.
+*/
+var graphToTreeNode = (graph, rootId) => {
+	const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
+	if (!nodeById.has(rootId)) return;
+	const adjacency = /* @__PURE__ */ new Map();
+	const link = (from, to) => {
+		const list = adjacency.get(from) ?? [];
+		list.push(to);
+		adjacency.set(from, list);
+	};
+	for (const edge of graph.edges) {
+		link(edge.source, edge.target);
+		link(edge.target, edge.source);
+	}
+	const visited = /* @__PURE__ */ new Set([rootId]);
+	const build = (id) => {
+		const children = [];
+		for (const neighbour of adjacency.get(id) ?? []) if (!visited.has(neighbour)) {
+			visited.add(neighbour);
+			children.push(build(neighbour));
+		}
+		return {
+			id,
+			label: nodeById.get(id)?.label ?? id,
+			...children.length > 0 ? { children } : {}
+		};
+	};
+	return build(rootId);
+};
+/** Render ids like `q3-board-meeting` as `Q3 Board Meeting`. */
+var humanize = (value) => value.replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+var formatDate = (iso) => iso.slice(0, 10);
+/** Map FactBank factuality to a real react-ui palette member. */
+var factualityColor = (factuality) => {
+	switch (factuality) {
+		case "CT+": return "emerald";
+		case "PR+": return "amber";
+		case "PS+": return "sky";
+		case "CT-":
+		case "PR-":
+		case "PS-": return "red";
+		default: return "neutral";
+	}
+};
+//#endregion
+//#region src/components/FactViewer/FactViewer.tsx
+var styles = { styles: tv({
+	slots: {
+		toolbarSpacer: "grow",
+		listViewport: "flex flex-col gap-2 py-1",
+		graphContent: "overflow-hidden",
+		graphTree: "w-full h-full",
+		group: "shrink-0 flex flex-col dx-card-surface border border-subdued-separator rounded-sm overflow-hidden",
+		groupHeader: "flex px-3 py-1 items-center justify-between",
+		groupConflict: "flex items-center gap-1",
+		row: "flex flex-col items-stretch gap-2 px-3 py-1",
+		rowQuote: "text-sm text-description italic",
+		rowGrid: "grid grid-cols-[1fr_5rem] items-center justify-between gap-2",
+		rowTriple: "w-full grid grid-cols-[1fr_1rem_1fr_1rem_1fr] items-center flex-wrap",
+		cell: "bg-input-surface border border-subdued-separator rounded-sm px-2 py-0.5 font-medium whitespace-nowrap truncate",
+		cellDivider: "border border-subdued-separator",
+		rowMeta: "flex items-center justify-end gap-2 shrink-0",
+		rowConfidence: "text-xs text-subdued",
+		rowAttribution: "text-xs text-subdued text-right"
+	},
+	variants: { conflicting: { true: { row: "border-is-2 border-warning-border" } } }
+}) }.styles();
+var FactViewerContext = createContext(null);
+var useFactViewerContext = (consumer) => {
+	const context = useContext(FactViewerContext);
+	if (!context) throw new Error(`FactViewer.${consumer} must be rendered within FactViewer.Root`);
+	return context;
+};
+/**
+* Viewer for extracted semantic facts with two views: a grouped **list** (by subject entity, with
+* conflicts highlighted) and a **graph** (tidy tree rooted at the context entity). A `context` entity
+* scopes the list and roots the graph; a `predicate` further filters the list. Pure/presentational.
+*
+* Renders a default toolbar + body when given no children; pass children to compose the parts
+* (`FactViewer.Toolbar`, `FactViewer.List`, `FactViewer.Graph`) directly.
+*/
+var FactViewerRoot = forwardRef(({ classNames, facts, context, predicate, children }, forwardedRef) => {
+	const [filter, setFilter] = useState("");
+	const [view, setView] = useState("list");
+	const scoped = useMemo(() => facts.filter((fact) => (context == null || termKey(fact.assertion.subject) === context || termKey(fact.assertion.object) === context) && (predicate == null || fact.assertion.predicate === predicate)), [
+		facts,
+		context,
+		predicate
+	]);
+	const groups = useMemo(() => groupFacts(scoped, filter), [scoped, filter]);
+	const graph = useMemo(() => context == null ? void 0 : graphToTreeNode(buildFactGraph(context, factSourceFromFacts(facts)), context), [facts, context]);
+	const value = useMemo(() => ({
+		facts,
+		context,
+		predicate,
+		groups,
+		graph,
+		filter,
+		setFilter,
+		view,
+		setView
+	}), [
+		facts,
+		context,
+		predicate,
+		groups,
+		graph,
+		filter,
+		view
+	]);
+	return /* @__PURE__ */ jsx(FactViewerContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(Panel.Root, {
+			classNames,
+			ref: forwardedRef,
+			children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FactViewerToolbar, {}), view === "list" ? /* @__PURE__ */ jsx(FactViewerList, {}) : /* @__PURE__ */ jsx(FactViewerGraph, {})] })
+		})
+	});
+});
+FactViewerRoot.displayName = "FactViewer.Root";
+var FactViewerToolbar = ({ classNames }) => {
+	const { filter, setFilter, view, setView } = useFactViewerContext("Toolbar");
+	return /* @__PURE__ */ jsx(Panel.Toolbar, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Toolbar.Root, {
+			classNames,
+			children: [
+				/* @__PURE__ */ jsxs(Input.Root, { children: [/* @__PURE__ */ jsx(Input.Label, {
+					srOnly: true,
+					children: "Filter facts"
+				}), /* @__PURE__ */ jsx(Input.TextInput, {
+					placeholder: "Filter by entity or predicate…",
+					value: filter,
+					onChange: (event) => setFilter(event.target.value)
+				})] }),
+				/* @__PURE__ */ jsx("div", { className: styles.toolbarSpacer() }),
+				/* @__PURE__ */ jsx(IconButton, {
+					icon: "ph--list--regular",
+					iconOnly: true,
+					label: "List view",
+					variant: view === "list" ? "primary" : "default",
+					onClick: () => setView("list")
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					icon: "ph--graph--regular",
+					iconOnly: true,
+					label: "Graph view",
+					variant: view === "graph" ? "primary" : "default",
+					onClick: () => setView("graph")
+				})
+			]
+		})
+	});
+};
+FactViewerToolbar.displayName = "FactViewer.Toolbar";
+var FactViewerList = ({ classNames }) => {
+	const { groups } = useFactViewerContext("List");
+	return /* @__PURE__ */ jsx(Panel.Content, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+			padding: true,
+			classNames,
+			children: /* @__PURE__ */ jsxs(ScrollArea.Viewport, {
+				classNames: styles.listViewport(),
+				children: [groups.length === 0 && /* @__PURE__ */ jsx(Empty, { label: "No facts." }), groups.map((group) => /* @__PURE__ */ jsx(FactViewerGroup, { group }, group.subject))]
+			})
+		})
+	});
+};
+FactViewerList.displayName = "FactViewer.List";
+var FactViewerGraph = ({ classNames }) => {
+	const { graph } = useFactViewerContext("Graph");
+	return /* @__PURE__ */ jsx(Panel.Content, {
+		classNames: mx(styles.graphContent(), classNames),
+		children: graph ? /* @__PURE__ */ jsx(Tree, {
+			data: graph,
+			variant: "tidy",
+			margin: 80,
+			classNames: styles.graphTree()
+		}) : /* @__PURE__ */ jsx(Empty, {
+			icon: "ph--graph--regular",
+			label: "Select an entity to root the graph."
+		})
+	});
+};
+FactViewerGraph.displayName = "FactViewer.Graph";
+var FactViewerGroup = forwardRef(({ classNames, group }, forwardedRef) => /* @__PURE__ */ jsxs("div", {
+	className: styles.group({ class: mx(classNames) }),
+	ref: forwardedRef,
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: styles.groupHeader(),
+		children: [/* @__PURE__ */ jsx("h3", { children: group.subject }), group.conflicted && /* @__PURE__ */ jsx(Tag, {
+			hue: "warning",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: styles.groupConflict(),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph--warning--regular",
+					size: 3
+				}), "conflict"]
+			})
+		})]
+	}), /* @__PURE__ */ jsx(Listbox.Root, { children: /* @__PURE__ */ jsx(Listbox.Content, {
+		"aria-label": group.subject,
+		children: group.facts.map((fact) => /* @__PURE__ */ jsx(FactViewerRow, {
+			fact,
+			conflicting: group.conflictedIds.has(fact.id)
+		}, fact.id))
+	}) })]
+}));
+FactViewerGroup.displayName = "FactViewer.Group";
+var FactViewerRow = forwardRef(({ classNames, fact, conflicting }, forwardedRef) => {
+	const { assertion, factuality, attribution } = fact;
+	return /* @__PURE__ */ jsxs(Listbox.Item, {
+		id: fact.id,
+		classNames: styles.row({
+			conflicting,
+			class: mx(classNames)
+		}),
+		ref: forwardedRef,
+		children: [
+			assertion.quote && /* @__PURE__ */ jsxs("div", {
+				className: styles.rowQuote(),
+				children: [
+					"\"",
+					assertion.quote,
+					"\""
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.rowGrid(),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: styles.rowTriple(),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: styles.cell({ class: "text-right" }),
+							children: formatTerm(assertion.subject)
+						}),
+						/* @__PURE__ */ jsx("span", { className: styles.cellDivider() }),
+						/* @__PURE__ */ jsx("span", {
+							className: styles.cell({ class: "text-center text-description" }),
+							children: assertion.predicate
+						}),
+						/* @__PURE__ */ jsx("span", { className: styles.cellDivider() }),
+						/* @__PURE__ */ jsx("span", {
+							className: styles.cell(),
+							children: formatTerm(assertion.object)
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: styles.rowMeta(),
+					children: [factuality.confidence != null && /* @__PURE__ */ jsxs("span", {
+						className: styles.rowConfidence(),
+						children: [Math.round(factuality.confidence * 100), "%"]
+					}), /* @__PURE__ */ jsx(Tag, {
+						hue: factualityColor(factuality.value),
+						children: factuality.value
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: styles.rowAttribution(),
+				children: [
+					attribution.agent,
+					attribution.source,
+					formatDate(attribution.generatedAtTime)
+				].filter(Boolean).join(" · ")
+			})
+		]
+	});
+});
+FactViewerRow.displayName = "FactViewer.Row";
+var FactViewer = {
+	Root: FactViewerRoot,
+	Toolbar: FactViewerToolbar,
+	List: FactViewerList,
+	Graph: FactViewerGraph,
+	Group: FactViewerGroup,
+	Row: FactViewerRow
+};
+//#endregion
+export { FactViewer, factualityColor, formatDate, formatTerm, graphToTreeNode, groupFacts, humanize, termKey };
+
+//# sourceMappingURL=index.mjs.map

package/dist/lib/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/types.ts","../../src/components/FactViewer/FactViewer.theme.ts","../../src/components/FactViewer/FactViewer.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type FactGraph, type RDF } from '@dxos/pipeline-rdf';\nimport { type TreeNode } from '@dxos/react-ui-graph';\nimport { type ChromaticPalette, type MessageValence, type NeutralPalette } from '@dxos/ui-types';\n\nexport type Group = {\n  subject: string;\n  facts: RDF.Fact[];\n  conflicted: boolean;\n  conflictedIds: Set<string>;\n};\n\n/** Group facts by subject entity and flag predicate-level conflicts within each group. */\nexport const groupFacts = (facts: RDF.Fact[], filter: string): Group[] => {\n  const needle = filter.trim().toLowerCase();\n  const filtered = needle\n    ? facts.filter((fact) => {\n        const { subject, predicate, object } = fact.assertion;\n        return [formatTerm(subject), predicate, formatTerm(object)].some((value) =>\n          value.toLowerCase().includes(needle),\n        );\n      })\n    : facts;\n\n  // Group by the entity slug (so `DXOS`/`dxos` collapse) but remember a display label for the header.\n  const bySubject = new Map<string, RDF.Fact[]>();\n  const labelByKey = new Map<string, string>();\n  for (const fact of filtered) {\n    const key = termKey(fact.assertion.subject);\n    const list = bySubject.get(key) ?? [];\n    list.push(fact);\n    bySubject.set(key, list);\n    if (!labelByKey.has(key)) {\n      labelByKey.set(key, formatTerm(fact.assertion.subject));\n    }\n  }\n\n  return [...bySubject.entries()].map(([key, groupFactsList]) => {\n    const subject = labelByKey.get(key) ?? key;\n    const byPredicate = new Map<string, RDF.Fact[]>();\n    for (const fact of groupFactsList) {\n      const list = byPredicate.get(fact.assertion.predicate) ?? [];\n      list.push(fact);\n      byPredicate.set(fact.assertion.predicate, list);\n    }\n\n    const conflictedIds = new Set<string>();\n    for (const list of byPredicate.values()) {\n      const objects = new Set(list.map((fact) => termKey(fact.assertion.object)));\n      if (objects.size > 1) {\n        for (const fact of list) {\n          conflictedIds.add(fact.id);\n        }\n      }\n    }\n\n    return {\n      subject,\n      facts: groupFactsList,\n      conflicted: conflictedIds.size > 0,\n      conflictedIds,\n    };\n  });\n};\n\n/** The join/grouping key: the entity slug (or literal). Casing variants collapse to one key. */\nexport const termKey = (term: RDF.Term): string => ('entity' in term ? term.entity : term.literal);\n\n/** Display form: the preserved surface label, else a prettified slug; literals render verbatim. */\nexport const formatTerm = (term: RDF.Term): string =>\n  'entity' in term ? (term.label ?? humanize(term.entity)) : term.literal;\n\n/**\n * Convert a {@link FactGraph} into a rooted {@link TreeNode} hierarchy for the tidy-tree renderer.\n * A fact graph is a general (cyclic) graph; the tidy tree needs a hierarchy, so this takes the BFS\n * spanning tree from `rootId` over the undirected edges (each node appears once). Returns `undefined`\n * if the root isn't in the graph.\n */\nexport const graphToTreeNode = (graph: FactGraph, rootId: string): TreeNode | undefined => {\n  const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));\n  if (!nodeById.has(rootId)) {\n    return undefined;\n  }\n  const adjacency = new Map<string, string[]>();\n  const link = (from: string, to: string) => {\n    const list = adjacency.get(from) ?? [];\n    list.push(to);\n    adjacency.set(from, list);\n  };\n  for (const edge of graph.edges) {\n    link(edge.source, edge.target);\n    link(edge.target, edge.source);\n  }\n\n  const visited = new Set<string>([rootId]);\n  const build = (id: string): TreeNode => {\n    const children: TreeNode[] = [];\n    for (const neighbour of adjacency.get(id) ?? []) {\n      if (!visited.has(neighbour)) {\n        visited.add(neighbour);\n        children.push(build(neighbour));\n      }\n    }\n    return { id, label: nodeById.get(id)?.label ?? id, ...(children.length > 0 ? { children } : {}) };\n  };\n  return build(rootId);\n};\n\n/** Render ids like `q3-board-meeting` as `Q3 Board Meeting`. */\nexport const humanize = (value: string): string =>\n  value.replace(/[-_]/g, ' ').replace(/\\b\\w/g, (char) => char.toUpperCase());\n\nexport const formatDate = (iso: string): string => iso.slice(0, 10);\n\n/** Map FactBank factuality to a real react-ui palette member. */\nexport const factualityColor = (\n  factuality: RDF.FactualityValue,\n): NeutralPalette | ChromaticPalette | MessageValence => {\n  switch (factuality) {\n    case 'CT+':\n      return 'emerald';\n    case 'PR+':\n      return 'amber';\n    case 'PS+':\n      return 'sky';\n    case 'CT-':\n    case 'PR-':\n    case 'PS-':\n      return 'red';\n    case 'CTu':\n    case 'Uu':\n    default:\n      return 'neutral';\n  }\n};\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport { tv } from '@dxos/ui-theme';\n\n/**\n * Tailwind-variants theme for the {@link FactViewer} composite. Consumers call\n * `factViewerTheme.styles()` for the per-slot class functions; each accepts an optional\n * `{ class: … }` override for per-instance merging (mirrors the react-ui-list theme pattern).\n */\nconst factViewerStyles = tv({\n  slots: {\n    // Toolbar spacer pushing the view toggles to the inline-end edge.\n    toolbarSpacer: 'grow',\n\n    // List view.\n    listViewport: 'flex flex-col gap-2 py-1',\n\n    // Graph view.\n    graphContent: 'overflow-hidden',\n    graphTree: 'w-full h-full',\n\n    // Subject group card.\n    group: 'shrink-0 flex flex-col dx-card-surface border border-subdued-separator rounded-sm overflow-hidden',\n    groupHeader: 'flex px-3 py-1 items-center justify-between',\n    groupConflict: 'flex items-center gap-1',\n\n    // Fact row.\n    row: 'flex flex-col items-stretch gap-2 px-3 py-1',\n    rowQuote: 'text-sm text-description italic',\n    rowGrid: 'grid grid-cols-[1fr_5rem] items-center justify-between gap-2',\n    rowTriple: 'w-full grid grid-cols-[1fr_1rem_1fr_1rem_1fr] items-center flex-wrap',\n    cell: 'bg-input-surface border border-subdued-separator rounded-sm px-2 py-0.5 font-medium whitespace-nowrap truncate',\n    cellDivider: 'border border-subdued-separator',\n    rowMeta: 'flex items-center justify-end gap-2 shrink-0',\n    rowConfidence: 'text-xs text-subdued',\n    rowAttribution: 'text-xs text-subdued text-right',\n  },\n  variants: {\n    // Conflicting facts get a warning rule on the inline-start edge.\n    conflicting: {\n      true: { row: 'border-is-2 border-warning-border' },\n    },\n  },\n});\n\n/** react-ui-rdf FactViewer theme: call `.styles()` for per-slot class functions. */\nexport const factViewerTheme = {\n  styles: factViewerStyles,\n};\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { type ReactNode, createContext, forwardRef, useContext, useMemo, useState } from 'react';\n\nimport { type RDF, buildFactGraph, factSourceFromFacts } from '@dxos/pipeline-rdf';\nimport { Icon, IconButton, Input, Panel, ScrollArea, Tag, type ThemedClassName, Toolbar } from '@dxos/react-ui';\nimport { Tree } from '@dxos/react-ui-graph';\nimport { Empty, Listbox } from '@dxos/react-ui-list';\nimport { mx } from '@dxos/ui-theme';\n\nimport { type Group, factualityColor, formatDate, formatTerm, graphToTreeNode, groupFacts, termKey } from '../../types';\nimport { factViewerTheme } from './FactViewer.theme';\n\nconst styles = factViewerTheme.styles();\n\ntype View = 'list' | 'graph';\n\n//\n// Context\n//\n\ntype FactViewerContextValue = {\n  facts: RDF.Fact[];\n  context?: string;\n  predicate?: string;\n  groups: Group[];\n  graph: ReturnType<typeof graphToTreeNode> | undefined;\n  filter: string;\n  setFilter: (value: string) => void;\n  view: View;\n  setView: (view: View) => void;\n};\n\nconst FactViewerContext = createContext<FactViewerContextValue | null>(null);\n\nconst useFactViewerContext = (consumer: string): FactViewerContextValue => {\n  const context = useContext(FactViewerContext);\n  if (!context) {\n    throw new Error(`FactViewer.${consumer} must be rendered within FactViewer.Root`);\n  }\n  return context;\n};\n\n//\n// Root\n//\n\ntype FactViewerRootProps = ThemedClassName<{\n  facts: RDF.Fact[];\n  /** Context entity id; scopes the list and roots the graph. */\n  context?: string;\n  /** Predicate filter; when set, only facts with this predicate are shown. */\n  predicate?: string;\n  /** Custom composition; when omitted the default toolbar + list/graph body is rendered. */\n  children?: ReactNode;\n}>;\n\n/**\n * Viewer for extracted semantic facts with two views: a grouped **list** (by subject entity, with\n * conflicts highlighted) and a **graph** (tidy tree rooted at the context entity). A `context` entity\n * scopes the list and roots the graph; a `predicate` further filters the list. Pure/presentational.\n *\n * Renders a default toolbar + body when given no children; pass children to compose the parts\n * (`FactViewer.Toolbar`, `FactViewer.List`, `FactViewer.Graph`) directly.\n */\nconst FactViewerRoot = forwardRef<HTMLDivElement, FactViewerRootProps>(\n  ({ classNames, facts, context, predicate, children }, forwardedRef) => {\n    const [filter, setFilter] = useState('');\n    const [view, setView] = useState<View>('list');\n    const scoped = useMemo(\n      () =>\n        facts.filter(\n          (fact) =>\n            (context == null ||\n              termKey(fact.assertion.subject) === context ||\n              termKey(fact.assertion.object) === context) &&\n            (predicate == null || fact.assertion.predicate === predicate),\n        ),\n      [facts, context, predicate],\n    );\n    const groups = useMemo(() => groupFacts(scoped, filter), [scoped, filter]);\n    const graph = useMemo(\n      () =>\n        context == null ? undefined : graphToTreeNode(buildFactGraph(context, factSourceFromFacts(facts)), context),\n      [facts, context],\n    );\n\n    const value = useMemo<FactViewerContextValue>(\n      () => ({ facts, context, predicate, groups, graph, filter, setFilter, view, setView }),\n      [facts, context, predicate, groups, graph, filter, view],\n    );\n\n    return (\n      <FactViewerContext.Provider value={value}>\n        <Panel.Root classNames={classNames} ref={forwardedRef}>\n          {children ?? (\n            <>\n              <FactViewerToolbar />\n              {view === 'list' ? <FactViewerList /> : <FactViewerGraph />}\n            </>\n          )}\n        </Panel.Root>\n      </FactViewerContext.Provider>\n    );\n  },\n);\n\nFactViewerRoot.displayName = 'FactViewer.Root';\n\n//\n// Toolbar\n//\n\ntype FactViewerToolbarProps = ThemedClassName<{}>;\n\nconst FactViewerToolbar = ({ classNames }: FactViewerToolbarProps) => {\n  const { filter, setFilter, view, setView } = useFactViewerContext('Toolbar');\n  return (\n    <Panel.Toolbar asChild>\n      <Toolbar.Root classNames={classNames}>\n        <Input.Root>\n          <Input.Label srOnly>Filter facts</Input.Label>\n          <Input.TextInput\n            placeholder='Filter by entity or predicate…'\n            value={filter}\n            onChange={(event) => setFilter(event.target.value)}\n          />\n        </Input.Root>\n        <div className={styles.toolbarSpacer()} />\n        <IconButton\n          icon='ph--list--regular'\n          iconOnly\n          label='List view'\n          variant={view === 'list' ? 'primary' : 'default'}\n          onClick={() => setView('list')}\n        />\n        <IconButton\n          icon='ph--graph--regular'\n          iconOnly\n          label='Graph view'\n          variant={view === 'graph' ? 'primary' : 'default'}\n          onClick={() => setView('graph')}\n        />\n      </Toolbar.Root>\n    </Panel.Toolbar>\n  );\n};\n\nFactViewerToolbar.displayName = 'FactViewer.Toolbar';\n\n//\n// List\n//\n\ntype FactViewerListProps = ThemedClassName<{}>;\n\nconst FactViewerList = ({ classNames }: FactViewerListProps) => {\n  const { groups } = useFactViewerContext('List');\n  return (\n    <Panel.Content asChild>\n      <ScrollArea.Root padding classNames={classNames}>\n        <ScrollArea.Viewport classNames={styles.listViewport()}>\n          {groups.length === 0 && <Empty label='No facts.' />}\n          {groups.map((group) => (\n            <FactViewerGroup key={group.subject} group={group} />\n          ))}\n        </ScrollArea.Viewport>\n      </ScrollArea.Root>\n    </Panel.Content>\n  );\n};\n\nFactViewerList.displayName = 'FactViewer.List';\n\n//\n// Graph\n//\n\ntype FactViewerGraphProps = ThemedClassName<{}>;\n\nconst FactViewerGraph = ({ classNames }: FactViewerGraphProps) => {\n  const { graph } = useFactViewerContext('Graph');\n  return (\n    <Panel.Content classNames={mx(styles.graphContent(), classNames)}>\n      {graph ? (\n        <Tree data={graph} variant='tidy' margin={80} classNames={styles.graphTree()} />\n      ) : (\n        <Empty icon='ph--graph--regular' label='Select an entity to root the graph.' />\n      )}\n    </Panel.Content>\n  );\n};\n\nFactViewerGraph.displayName = 'FactViewer.Graph';\n\n//\n// Group\n//\n\ntype FactViewerGroupProps = ThemedClassName<{ group: Group }>;\n\nconst FactViewerGroup = forwardRef<HTMLDivElement, FactViewerGroupProps>(({ classNames, group }, forwardedRef) => (\n  <div className={styles.group({ class: mx(classNames) })} ref={forwardedRef}>\n    <div className={styles.groupHeader()}>\n      <h3>{group.subject}</h3>\n      {group.conflicted && (\n        <Tag hue='warning'>\n          <span className={styles.groupConflict()}>\n            <Icon icon='ph--warning--regular' size={3} />\n            conflict\n          </span>\n        </Tag>\n      )}\n    </div>\n    <Listbox.Root>\n      <Listbox.Content aria-label={group.subject}>\n        {group.facts.map((fact) => (\n          <FactViewerRow key={fact.id} fact={fact} conflicting={group.conflictedIds.has(fact.id)} />\n        ))}\n      </Listbox.Content>\n    </Listbox.Root>\n  </div>\n));\n\nFactViewerGroup.displayName = 'FactViewer.Group';\n\n//\n// Row\n//\n\ntype FactViewerRowProps = ThemedClassName<{ fact: RDF.Fact; conflicting?: boolean }>;\n\nconst FactViewerRow = forwardRef<HTMLLIElement, FactViewerRowProps>(\n  ({ classNames, fact, conflicting }, forwardedRef) => {\n    const { assertion, factuality, attribution } = fact;\n    return (\n      <Listbox.Item id={fact.id} classNames={styles.row({ conflicting, class: mx(classNames) })} ref={forwardedRef}>\n        {assertion.quote && <div className={styles.rowQuote()}>\"{assertion.quote}\"</div>}\n\n        <div className={styles.rowGrid()}>\n          <div className={styles.rowTriple()}>\n            <span className={styles.cell({ class: 'text-right' })}>{formatTerm(assertion.subject)}</span>\n            <span className={styles.cellDivider()} />\n            <span className={styles.cell({ class: 'text-center text-description' })}>{assertion.predicate}</span>\n            <span className={styles.cellDivider()} />\n            <span className={styles.cell()}>{formatTerm(assertion.object)}</span>\n          </div>\n\n          <div className={styles.rowMeta()}>\n            {factuality.confidence != null && (\n              <span className={styles.rowConfidence()}>{Math.round(factuality.confidence * 100)}%</span>\n            )}\n            <Tag hue={factualityColor(factuality.value)}>{factuality.value}</Tag>\n          </div>\n        </div>\n\n        <div className={styles.rowAttribution()}>\n          {[attribution.agent, attribution.source, formatDate(attribution.generatedAtTime)].filter(Boolean).join(' · ')}\n        </div>\n      </Listbox.Item>\n    );\n  },\n);\n\nFactViewerRow.displayName = 'FactViewer.Row';\n\n//\n// FactViewer\n//\n\nexport const FactViewer = {\n  Root: FactViewerRoot,\n  Toolbar: FactViewerToolbar,\n  List: FactViewerList,\n  Graph: FactViewerGraph,\n  Group: FactViewerGroup,\n  Row: FactViewerRow,\n};\n\nexport type {\n  FactViewerGraphProps,\n  FactViewerGroupProps,\n  FactViewerListProps,\n  FactViewerRootProps,\n  FactViewerRowProps,\n  FactViewerToolbarProps,\n};\n"],"mappings":"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"}

package/dist/types/src/components/FactViewer/FactViewer.d.ts

@@ -0,0 +1,73 @@
+import React, { type ReactNode } from 'react';
+import { type RDF } from '@dxos/pipeline-rdf';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type Group } from '../../types';
+type FactViewerRootProps = ThemedClassName<{
+    facts: RDF.Fact[];
+    /** Context entity id; scopes the list and roots the graph. */
+    context?: string;
+    /** Predicate filter; when set, only facts with this predicate are shown. */
+    predicate?: string;
+    /** Custom composition; when omitted the default toolbar + list/graph body is rendered. */
+    children?: ReactNode;
+}>;
+type FactViewerToolbarProps = ThemedClassName<{}>;
+declare function FactViewerToolbar({ classNames }: FactViewerToolbarProps): React.JSX.Element;
+declare namespace FactViewerToolbar {
+    var displayName: string;
+}
+type FactViewerListProps = ThemedClassName<{}>;
+declare function FactViewerList({ classNames }: FactViewerListProps): React.JSX.Element;
+declare namespace FactViewerList {
+    var displayName: string;
+}
+type FactViewerGraphProps = ThemedClassName<{}>;
+declare function FactViewerGraph({ classNames }: FactViewerGraphProps): React.JSX.Element;
+declare namespace FactViewerGraph {
+    var displayName: string;
+}
+type FactViewerGroupProps = ThemedClassName<{
+    group: Group;
+}>;
+type FactViewerRowProps = ThemedClassName<{
+    fact: RDF.Fact;
+    conflicting?: boolean;
+}>;
+export declare const FactViewer: {
+    Root: React.ForwardRefExoticComponent<Omit<{
+        facts: RDF.Fact[];
+        /** Context entity id; scopes the list and roots the graph. */
+        context?: string;
+        /** Predicate filter; when set, only facts with this predicate are shown. */
+        predicate?: string;
+        /** Custom composition; when omitted the default toolbar + list/graph body is rendered. */
+        children?: ReactNode;
+    }, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Toolbar: {
+        ({ classNames }: FactViewerToolbarProps): React.JSX.Element;
+        displayName: string;
+    };
+    List: {
+        ({ classNames }: FactViewerListProps): React.JSX.Element;
+        displayName: string;
+    };
+    Graph: {
+        ({ classNames }: FactViewerGraphProps): React.JSX.Element;
+        displayName: string;
+    };
+    Group: React.ForwardRefExoticComponent<Omit<{
+        group: Group;
+    }, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Row: React.ForwardRefExoticComponent<Omit<{
+        fact: RDF.Fact;
+        conflicting?: boolean;
+    }, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & React.RefAttributes<HTMLLIElement>>;
+};
+export type { FactViewerGraphProps, FactViewerGroupProps, FactViewerListProps, FactViewerRootProps, FactViewerRowProps, FactViewerToolbarProps, };
+//# sourceMappingURL=FactViewer.d.ts.map

package/dist/types/src/components/FactViewer/FactViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FactViewer.d.ts","sourceRoot":"","sources":["../../../../../src/components/FactViewer/FactViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAA4D,MAAM,OAAO,CAAC;AAExG,OAAO,EAAE,KAAK,GAAG,EAAuC,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAmD,KAAK,eAAe,EAAW,MAAM,gBAAgB,CAAC;AAKhH,OAAO,EAAE,KAAK,KAAK,EAAiF,MAAM,aAAa,CAAC;AAqCxH,KAAK,mBAAmB,GAAG,eAAe,CAAC;IACzC,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC;IAClB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC,CAAC;AA0DH,KAAK,sBAAsB,GAAG,eAAe,CAAC,EAAE,CAAC,CAAC;mCAEvB,EAAE,UAAU,EAAE,EAAE,sBAAsB;;;;AAuCjE,KAAK,mBAAmB,GAAG,eAAe,CAAC,EAAE,CAAC,CAAC;gCAEvB,EAAE,UAAU,EAAE,EAAE,mBAAmB;;;;AAsB3D,KAAK,oBAAoB,GAAG,eAAe,CAAC,EAAE,CAAC,CAAC;iCAEvB,EAAE,UAAU,EAAE,EAAE,oBAAoB;;;;AAmB7D,KAAK,oBAAoB,GAAG,eAAe,CAAC;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AA+B9D,KAAK,kBAAkB,GAAG,eAAe,CAAC;IAAE,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAwCrF,eAAO,MAAM,UAAU;IACrB,IAAI;eA/NG,GAAG,CAAC,IAAI,EAAE;QACjB,8DAA8D;kBACpD,MAAM;QAChB,4EAA4E;oBAChE,MAAM;QAClB,0FAA0F;mBAC/E,SAAS;;;;IA0NpB,OAAO;yBA7JkC,sBAAsB;;;IA8J/D,IAAI;yBArHkC,mBAAmB;;;IAsHzD,KAAK;yBA9FkC,oBAAoB;;;IA+F3D,KAAK;eA5E8C,KAAK;;;;IA6ExD,GAAG;cA9C6C,GAAG,CAAC,IAAI;sBAAgB,OAAO;;;;CA+ChF,CAAC;AAEF,YAAY,EACV,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,GACvB,CAAC"}

package/dist/types/src/{FactViewer.stories.d.ts → components/FactViewer/FactViewer.stories.d.ts}

@@ -8,14 +8,16 @@
  */
 import { type StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { type FactViewerProps } from './FactViewer';
+import { type FactViewerRootProps } from './FactViewer';
 declare const meta: {
     title: string;
-    render: (props: FactViewerProps) => React.JSX.Element;
+    render: (props: FactViewerRootProps) => React.JSX.Element;
     decorators: import("@storybook/react").Decorator[];
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Empty: Story;
+/** Explicit composition of the parts (`FactViewer.Toolbar` + `FactViewer.List`) under `FactViewer.Root`. */
+export declare const Composed: Story;
 //# sourceMappingURL=FactViewer.stories.d.ts.map

package/dist/types/src/components/FactViewer/FactViewer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FactViewer.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/FactViewer/FactViewer.stories.tsx"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAyEpE,QAAA,MAAM,IAAI;;oBAFmB,mBAAmB;;CAMX,CAAC;eAEvB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,4GAA4G;AAC5G,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC"}

package/dist/types/src/components/FactViewer/FactViewer.theme.d.ts

@@ -0,0 +1,74 @@
+/** react-ui-rdf FactViewer theme: call `.styles()` for per-slot class functions. */
+export declare const factViewerTheme: {
+    styles: import("tailwind-variants").TVReturnType<{
+        conflicting: {
+            true: {
+                row: string;
+            };
+        };
+    }, {
+        toolbarSpacer: string;
+        listViewport: string;
+        graphContent: string;
+        graphTree: string;
+        group: string;
+        groupHeader: string;
+        groupConflict: string;
+        row: string;
+        rowQuote: string;
+        rowGrid: string;
+        rowTriple: string;
+        cell: string;
+        cellDivider: string;
+        rowMeta: string;
+        rowConfidence: string;
+        rowAttribution: string;
+    }, undefined, {
+        conflicting: {
+            true: {
+                row: string;
+            };
+        };
+    }, {
+        toolbarSpacer: string;
+        listViewport: string;
+        graphContent: string;
+        graphTree: string;
+        group: string;
+        groupHeader: string;
+        groupConflict: string;
+        row: string;
+        rowQuote: string;
+        rowGrid: string;
+        rowTriple: string;
+        cell: string;
+        cellDivider: string;
+        rowMeta: string;
+        rowConfidence: string;
+        rowAttribution: string;
+    }, import("tailwind-variants").TVReturnType<{
+        conflicting: {
+            true: {
+                row: string;
+            };
+        };
+    }, {
+        toolbarSpacer: string;
+        listViewport: string;
+        graphContent: string;
+        graphTree: string;
+        group: string;
+        groupHeader: string;
+        groupConflict: string;
+        row: string;
+        rowQuote: string;
+        rowGrid: string;
+        rowTriple: string;
+        cell: string;
+        cellDivider: string;
+        rowMeta: string;
+        rowConfidence: string;
+        rowAttribution: string;
+    }, undefined, unknown, unknown, undefined>>;
+};
+//# sourceMappingURL=FactViewer.theme.d.ts.map

package/dist/types/src/components/FactViewer/FactViewer.theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FactViewer.theme.d.ts","sourceRoot":"","sources":["../../../../../src/components/FactViewer/FactViewer.theme.ts"],"names":[],"mappings":"AA+CA,oFAAoF;AACpF,eAAO,MAAM,eAAe;IAC1B,MAAM;;YAPF,IAAI;gBAAI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQhB,CAAC"}

package/dist/types/src/components/FactViewer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FactViewer';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/FactViewer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/FactViewer/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FactViewer';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,3 +1,3 @@
-export * from './FactViewer';
+export * from './components';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map