@dxos/react-ui-rdf 0.0.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-rdf",
-  "version": "0.0.0",
+  "version": "0.11.0",
   "description": "Presentational viewer for extracted semantic facts.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,8 +16,7 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "import": "./dist/lib/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -26,10 +25,10 @@
     "src"
   ],
   "dependencies": {
-    "@dxos/pipeline-rdf": "0.0.0",
-    "@dxos/ui-types": "0.10.0",
-    "@dxos/react-ui-graph": "0.10.0",
-    "@dxos/react-ui-list": "0.10.0"
+    "@dxos/react-ui-graph": "0.11.0",
+    "@dxos/react-ui-list": "0.11.0",
+    "@dxos/ui-types": "0.11.0",
+    "@dxos/pipeline-rdf": "0.11.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.4.2",
@@ -37,16 +36,16 @@
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/storybook-utils": "0.10.0"
+    "vite": "^8.1.4",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0",
+    "@dxos/ui-theme": "0.11.0"
   },
   "peerDependencies": {
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/ui-theme": "0.10.0"
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/ui-theme": "0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/{FactViewer.stories.tsx → components/FactViewer/FactViewer.stories.tsx}

@@ -17,7 +17,7 @@ import React from 'react';
 import { type RDF } from '@dxos/pipeline-rdf';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { FactViewer, type FactViewerProps } from './FactViewer';
+import { FactViewer, type FactViewerRootProps } from './FactViewer';
 
 const extractor = {
   id: 'default',
@@ -88,7 +88,7 @@ const DEMO_FACTS: RDF.Fact[] = [
   },
 ] satisfies RDF.Fact[];
 
-const DefaultStory = (props: FactViewerProps) => <FactViewer {...props} />;
+const DefaultStory = (props: FactViewerRootProps) => <FactViewer.Root {...props} />;
 
 const meta = {
   title: 'ui/react-ui-rdf/FactViewer',
@@ -111,3 +111,16 @@ export const Empty: Story = {
     facts: [],
   },
 };
+
+/** Explicit composition of the parts (`FactViewer.Toolbar` + `FactViewer.List`) under `FactViewer.Root`. */
+export const Composed: Story = {
+  args: {
+    facts: DEMO_FACTS,
+  },
+  render: ({ facts }) => (
+    <FactViewer.Root facts={facts}>
+      <FactViewer.Toolbar />
+      <FactViewer.List />
+    </FactViewer.Root>
+  ),
+};

package/src/components/FactViewer/FactViewer.theme.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { tv } from '@dxos/ui-theme';
+
+/**
+ * Tailwind-variants theme for the {@link FactViewer} composite. Consumers call
+ * `factViewerTheme.styles()` for the per-slot class functions; each accepts an optional
+ * `{ class: … }` override for per-instance merging (mirrors the react-ui-list theme pattern).
+ */
+const factViewerStyles = tv({
+  slots: {
+    // Toolbar spacer pushing the view toggles to the inline-end edge.
+    toolbarSpacer: 'grow',
+
+    // List view.
+    listViewport: 'flex flex-col gap-2 py-1',
+
+    // Graph view.
+    graphContent: 'overflow-hidden',
+    graphTree: 'w-full h-full',
+
+    // Subject group card.
+    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',
+
+    // Fact row.
+    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 facts get a warning rule on the inline-start edge.
+    conflicting: {
+      true: { row: 'border-is-2 border-warning-border' },
+    },
+  },
+});
+
+/** react-ui-rdf FactViewer theme: call `.styles()` for per-slot class functions. */
+export const factViewerTheme = {
+  styles: factViewerStyles,
+};

package/src/components/FactViewer/FactViewer.tsx

@@ -0,0 +1,289 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type ReactNode, createContext, forwardRef, useContext, useMemo, useState } from 'react';
+
+import { type RDF, buildFactGraph, factSourceFromFacts } from '@dxos/pipeline-rdf';
+import { Icon, IconButton, Input, Panel, ScrollArea, Tag, type ThemedClassName, Toolbar } from '@dxos/react-ui';
+import { Tree } from '@dxos/react-ui-graph';
+import { Empty, Listbox } from '@dxos/react-ui-list';
+import { mx } from '@dxos/ui-theme';
+
+import { type Group, factualityColor, formatDate, formatTerm, graphToTreeNode, groupFacts, termKey } from '../../types';
+import { factViewerTheme } from './FactViewer.theme';
+
+const styles = factViewerTheme.styles();
+
+type View = 'list' | 'graph';
+
+//
+// Context
+//
+
+type FactViewerContextValue = {
+  facts: RDF.Fact[];
+  context?: string;
+  predicate?: string;
+  groups: Group[];
+  graph: ReturnType<typeof graphToTreeNode> | undefined;
+  filter: string;
+  setFilter: (value: string) => void;
+  view: View;
+  setView: (view: View) => void;
+};
+
+const FactViewerContext = createContext<FactViewerContextValue | null>(null);
+
+const useFactViewerContext = (consumer: string): FactViewerContextValue => {
+  const context = useContext(FactViewerContext);
+  if (!context) {
+    throw new Error(`FactViewer.${consumer} must be rendered within FactViewer.Root`);
+  }
+  return context;
+};
+
+//
+// Root
+//
+
+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;
+}>;
+
+/**
+ * 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.
+ */
+const FactViewerRoot = forwardRef<HTMLDivElement, FactViewerRootProps>(
+  ({ classNames, facts, context, predicate, children }, forwardedRef) => {
+    const [filter, setFilter] = useState('');
+    const [view, setView] = useState<View>('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 ? undefined : graphToTreeNode(buildFactGraph(context, factSourceFromFacts(facts)), context),
+      [facts, context],
+    );
+
+    const value = useMemo<FactViewerContextValue>(
+      () => ({ facts, context, predicate, groups, graph, filter, setFilter, view, setView }),
+      [facts, context, predicate, groups, graph, filter, view],
+    );
+
+    return (
+      <FactViewerContext.Provider value={value}>
+        <Panel.Root classNames={classNames} ref={forwardedRef}>
+          {children ?? (
+            <>
+              <FactViewerToolbar />
+              {view === 'list' ? <FactViewerList /> : <FactViewerGraph />}
+            </>
+          )}
+        </Panel.Root>
+      </FactViewerContext.Provider>
+    );
+  },
+);
+
+FactViewerRoot.displayName = 'FactViewer.Root';
+
+//
+// Toolbar
+//
+
+type FactViewerToolbarProps = ThemedClassName<{}>;
+
+const FactViewerToolbar = ({ classNames }: FactViewerToolbarProps) => {
+  const { filter, setFilter, view, setView } = useFactViewerContext('Toolbar');
+  return (
+    <Panel.Toolbar asChild>
+      <Toolbar.Root classNames={classNames}>
+        <Input.Root>
+          <Input.Label srOnly>Filter facts</Input.Label>
+          <Input.TextInput
+            placeholder='Filter by entity or predicate…'
+            value={filter}
+            onChange={(event) => setFilter(event.target.value)}
+          />
+        </Input.Root>
+        <div className={styles.toolbarSpacer()} />
+        <IconButton
+          icon='ph--list--regular'
+          iconOnly
+          label='List view'
+          variant={view === 'list' ? 'primary' : 'default'}
+          onClick={() => setView('list')}
+        />
+        <IconButton
+          icon='ph--graph--regular'
+          iconOnly
+          label='Graph view'
+          variant={view === 'graph' ? 'primary' : 'default'}
+          onClick={() => setView('graph')}
+        />
+      </Toolbar.Root>
+    </Panel.Toolbar>
+  );
+};
+
+FactViewerToolbar.displayName = 'FactViewer.Toolbar';
+
+//
+// List
+//
+
+type FactViewerListProps = ThemedClassName<{}>;
+
+const FactViewerList = ({ classNames }: FactViewerListProps) => {
+  const { groups } = useFactViewerContext('List');
+  return (
+    <Panel.Content asChild>
+      <ScrollArea.Root padding classNames={classNames}>
+        <ScrollArea.Viewport classNames={styles.listViewport()}>
+          {groups.length === 0 && <Empty label='No facts.' />}
+          {groups.map((group) => (
+            <FactViewerGroup key={group.subject} group={group} />
+          ))}
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </Panel.Content>
+  );
+};
+
+FactViewerList.displayName = 'FactViewer.List';
+
+//
+// Graph
+//
+
+type FactViewerGraphProps = ThemedClassName<{}>;
+
+const FactViewerGraph = ({ classNames }: FactViewerGraphProps) => {
+  const { graph } = useFactViewerContext('Graph');
+  return (
+    <Panel.Content classNames={mx(styles.graphContent(), classNames)}>
+      {graph ? (
+        <Tree data={graph} variant='tidy' margin={80} classNames={styles.graphTree()} />
+      ) : (
+        <Empty icon='ph--graph--regular' label='Select an entity to root the graph.' />
+      )}
+    </Panel.Content>
+  );
+};
+
+FactViewerGraph.displayName = 'FactViewer.Graph';
+
+//
+// Group
+//
+
+type FactViewerGroupProps = ThemedClassName<{ group: Group }>;
+
+const FactViewerGroup = forwardRef<HTMLDivElement, FactViewerGroupProps>(({ classNames, group }, forwardedRef) => (
+  <div className={styles.group({ class: mx(classNames) })} ref={forwardedRef}>
+    <div className={styles.groupHeader()}>
+      <h3>{group.subject}</h3>
+      {group.conflicted && (
+        <Tag hue='warning'>
+          <span className={styles.groupConflict()}>
+            <Icon icon='ph--warning--regular' size={3} />
+            conflict
+          </span>
+        </Tag>
+      )}
+    </div>
+    <Listbox.Root>
+      <Listbox.Content aria-label={group.subject}>
+        {group.facts.map((fact) => (
+          <FactViewerRow key={fact.id} fact={fact} conflicting={group.conflictedIds.has(fact.id)} />
+        ))}
+      </Listbox.Content>
+    </Listbox.Root>
+  </div>
+));
+
+FactViewerGroup.displayName = 'FactViewer.Group';
+
+//
+// Row
+//
+
+type FactViewerRowProps = ThemedClassName<{ fact: RDF.Fact; conflicting?: boolean }>;
+
+const FactViewerRow = forwardRef<HTMLLIElement, FactViewerRowProps>(
+  ({ classNames, fact, conflicting }, forwardedRef) => {
+    const { assertion, factuality, attribution } = fact;
+    return (
+      <Listbox.Item id={fact.id} classNames={styles.row({ conflicting, class: mx(classNames) })} ref={forwardedRef}>
+        {assertion.quote && <div className={styles.rowQuote()}>"{assertion.quote}"</div>}
+
+        <div className={styles.rowGrid()}>
+          <div className={styles.rowTriple()}>
+            <span className={styles.cell({ class: 'text-right' })}>{formatTerm(assertion.subject)}</span>
+            <span className={styles.cellDivider()} />
+            <span className={styles.cell({ class: 'text-center text-description' })}>{assertion.predicate}</span>
+            <span className={styles.cellDivider()} />
+            <span className={styles.cell()}>{formatTerm(assertion.object)}</span>
+          </div>
+
+          <div className={styles.rowMeta()}>
+            {factuality.confidence != null && (
+              <span className={styles.rowConfidence()}>{Math.round(factuality.confidence * 100)}%</span>
+            )}
+            <Tag hue={factualityColor(factuality.value)}>{factuality.value}</Tag>
+          </div>
+        </div>
+
+        <div className={styles.rowAttribution()}>
+          {[attribution.agent, attribution.source, formatDate(attribution.generatedAtTime)].filter(Boolean).join(' · ')}
+        </div>
+      </Listbox.Item>
+    );
+  },
+);
+
+FactViewerRow.displayName = 'FactViewer.Row';
+
+//
+// FactViewer
+//
+
+export const FactViewer = {
+  Root: FactViewerRoot,
+  Toolbar: FactViewerToolbar,
+  List: FactViewerList,
+  Graph: FactViewerGraph,
+  Group: FactViewerGroup,
+  Row: FactViewerRow,
+};
+
+export type {
+  FactViewerGraphProps,
+  FactViewerGroupProps,
+  FactViewerListProps,
+  FactViewerRootProps,
+  FactViewerRowProps,
+  FactViewerToolbarProps,
+};

package/src/components/FactViewer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './FactViewer';

package/src/components/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './FactViewer';

package/src/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './FactViewer';
+export * from './components';
 export * from './types';