@ankhorage/zora 22.0.80 → 22.0.82

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 22.0.82
+
+### Patch Changes
+
+- 37b8d04: Reveal controlled TreeView selections in standalone web artifacts without changing expansion ownership.
+
+## 22.0.81
+
+### Patch Changes
+
+- d3d3741: Preserve public GraphView type exports in standalone web materialization.
+
 ## 22.0.80
 
 ### Patch Changes

package/README.md

@@ -3,7 +3,7 @@
 
 # @ankhorage/zora
 
-![license: MIT](././paradox/badges/license.svg) ![npm: v22.0.80](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![paradox: warnings](././paradox/badges/docs.svg)
+![license: MIT](././paradox/badges/license.svg) ![npm: v22.0.82](././paradox/badges/npm.svg) ![runtime: bun](././paradox/badges/runtime.svg) ![typescript: strict](././paradox/badges/typescript.svg) ![eslint: checked](././paradox/badges/eslint.svg) ![prettier: checked](././paradox/badges/prettier.svg) ![build: checked](././paradox/badges/build.svg) ![tests: checked](././paradox/badges/tests.svg) ![paradox: warnings](././paradox/badges/docs.svg)
 
 Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.
 

package/dist/features/tree-view/adapters/inbound/web-artifact/TreeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../../../../src/features/tree-view/adapters/inbound/web-artifact/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,YAAY,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACvD,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC;IACjB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IACjD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IAC9D,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACxD,QAAQ,CAAC,KAAK,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IAC7C,QAAQ,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IACtC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC;IAC1D,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,QAAQ,CAAC,kBAAkB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACnD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,EACpD,KAAK,EACL,UAAU,EACV,WAAW,EAAE,qBAAqB,EAClC,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,kBAA6B,EAC7B,SAAS,EACT,KAAK,EACL,SAAkB,GACnB,EAAE,aAAa,CAAC,GAAG,CAAC,qBAqCpB"}
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../../../../src/features/tree-view/adapters/inbound/web-artifact/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,YAAY,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACvD,QAAQ,CAAC,EAAE,EAAE,GAAG,CAAC;IACjB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IACjD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IAC9D,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACxD,QAAQ,CAAC,KAAK,EAAE,SAAS,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;IAC7C,QAAQ,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IACtC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,EAAE,KAAK,IAAI,CAAC;IAC1D,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3E,QAAQ,CAAC,kBAAkB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACnD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,EACpD,KAAK,EACL,UAAU,EACV,WAAW,EAAE,qBAAqB,EAClC,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,kBAA6B,EAC7B,SAAS,EACT,KAAK,EACL,SAAkB,GACnB,EAAE,aAAa,CAAC,GAAG,CAAC,qBAwCpB"}

package/dist/features/tree-view/adapters/inbound/web-artifact/TreeView.js

@@ -8,6 +8,7 @@ import { TreeItemRow } from './TreeItemRow';
  */
 export function TreeView({ nodes, selectedId, expandedIds: controlledExpandedIds, defaultExpandedIds, onSelect, onExpandedChange, renderItem, expansionIndicator = 'folder', className, style, ariaLabel = 'Tree', }) {
     const [internalExpandedIds, setInternalExpandedIds] = React.useState(defaultExpandedIds ?? []);
+    const rootRef = React.useRef(null);
     const isControlled = controlledExpandedIds !== undefined;
     const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;
     const handleToggleExpand = React.useCallback((id) => {
@@ -16,10 +17,22 @@ export function TreeView({ nodes, selectedId, expandedIds: controlledExpandedIds
             setInternalExpandedIds(nextExpandedIds);
         onExpandedChange?.(nextExpandedIds);
     }, [expandedIds, isControlled, onExpandedChange]);
-    return (<div aria-label={ariaLabel} className={className} role="tree" style={{ ...TREE_STYLE, ...style }}>
+    useSelectedTreeItemReveal(rootRef, selectedId, expandedIds);
+    return (<div ref={rootRef} aria-label={ariaLabel} className={className} role="tree" style={{ ...TREE_STYLE, ...style }}>
       {nodes.map((node) => (<TreeItemRow key={node.id} depth={0} expandedIds={expandedIds} expansionIndicator={expansionIndicator} node={node} onSelect={onSelect} onToggleExpand={handleToggleExpand} renderItem={renderItem} selectedId={selectedId}/>))}
     </div>);
 }
+/*** Reveal a controlled selection after it is rendered without changing expansion ownership. */
+function useSelectedTreeItemReveal(rootRef, selectedId, expandedIds) {
+    React.useEffect(() => {
+        if (selectedId === undefined)
+            return;
+        const root = rootRef.current;
+        root
+            ?.querySelector('[role="treeitem"][aria-selected="true"]')
+            ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }, [expandedIds, rootRef, selectedId]);
+}
 const TREE_STYLE = {
     display: 'flex',
     flexDirection: 'column',

package/dist/features/tree-view/adapters/inbound/web-artifact/TreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.js","sourceRoot":"","sources":["../../../../../../src/features/tree-view/adapters/inbound/web-artifact/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAkC5C;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAA8B,EACpD,KAAK,EACL,UAAU,EACV,WAAW,EAAE,qBAAqB,EAClC,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,kBAAkB,GAAG,QAAQ,EAC7B,SAAS,EACT,KAAK,EACL,SAAS,GAAG,MAAM,GACC;IACnB,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAClE,kBAAkB,IAAI,EAAE,CACzB,CAAC;IACF,MAAM,YAAY,GAAG,qBAAqB,KAAK,SAAS,CAAC;IACzD,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAC/E,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,EAAO,EAAE,EAAE;QACV,MAAM,eAAe,GAAG,iBAAiB,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;QAC3D,IAAI,CAAC,YAAY;YAAE,sBAAsB,CAAC,eAAe,CAAC,CAAC;QAC3D,gBAAgB,EAAE,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC,EACD,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAC9C,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CACF,UAAU,CAAC,CAAC,SAAS,CAAC,CACtB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,IAAI,CAAC,MAAM,CACX,KAAK,CAAC,CAAC,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,EAAE,CAAC,CAEnC;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,CAAC,WAAW,CACV,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CACb,KAAK,CAAC,CAAC,CAAC,CAAC,CACT,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,cAAc,CAAC,CAAC,kBAAkB,CAAC,CACnC,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,UAAU,CAAC,CAAC,UAAU,CAAC,EACvB,CACH,CAAC,CACJ;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE,CAAC;CAC2B,CAAC","sourcesContent":["import React from 'react';\n\nimport { toggleExpandedIds } from '../../../utils/toggleExpandedIds';\nimport { TreeItemRow } from './TreeItemRow';\n\nexport interface TreeItemNode<TId extends string = string> {\n  readonly id: TId;\n  readonly label: React.ReactNode;\n  readonly icon?: React.ReactNode;\n  readonly children?: readonly TreeItemNode<TId>[];\n  readonly disabled?: boolean;\n  readonly meta?: React.ReactNode;\n  readonly actions?: React.ReactNode;\n}\n\nexport interface TreeItemRenderProps<TId extends string = string> {\n  readonly node: TreeItemNode<TId>;\n  readonly depth: number;\n  readonly selected: boolean;\n  readonly expanded: boolean;\n  readonly hasChildren: boolean;\n}\n\nexport interface TreeViewProps<TId extends string = string> {\n  readonly nodes: readonly TreeItemNode<TId>[];\n  readonly selectedId?: TId;\n  readonly expandedIds?: readonly TId[];\n  readonly defaultExpandedIds?: readonly TId[];\n  readonly onSelect?: (id: TId) => void;\n  readonly onExpandedChange?: (ids: readonly TId[]) => void;\n  readonly renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;\n  readonly expansionIndicator?: 'chevron' | 'folder';\n  readonly className?: string;\n  readonly style?: React.CSSProperties;\n  readonly ariaLabel?: string;\n}\n\n/***\n * Render the standalone browser TreeView artifact without React Native runtime dependencies.\n * expansionIndicator Use `chevron` beside custom node icons, or `folder` (default) for\n * built-in folder/file indicators. Expansion is leading and independent from row selection.\n */\nexport function TreeView<TId extends string = string>({\n  nodes,\n  selectedId,\n  expandedIds: controlledExpandedIds,\n  defaultExpandedIds,\n  onSelect,\n  onExpandedChange,\n  renderItem,\n  expansionIndicator = 'folder',\n  className,\n  style,\n  ariaLabel = 'Tree',\n}: TreeViewProps<TId>) {\n  const [internalExpandedIds, setInternalExpandedIds] = React.useState<readonly TId[]>(\n    defaultExpandedIds ?? [],\n  );\n  const isControlled = controlledExpandedIds !== undefined;\n  const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;\n  const handleToggleExpand = React.useCallback(\n    (id: TId) => {\n      const nextExpandedIds = toggleExpandedIds(expandedIds, id);\n      if (!isControlled) setInternalExpandedIds(nextExpandedIds);\n      onExpandedChange?.(nextExpandedIds);\n    },\n    [expandedIds, isControlled, onExpandedChange],\n  );\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      className={className}\n      role=\"tree\"\n      style={{ ...TREE_STYLE, ...style }}\n    >\n      {nodes.map((node) => (\n        <TreeItemRow\n          key={node.id}\n          depth={0}\n          expandedIds={expandedIds}\n          expansionIndicator={expansionIndicator}\n          node={node}\n          onSelect={onSelect}\n          onToggleExpand={handleToggleExpand}\n          renderItem={renderItem}\n          selectedId={selectedId}\n        />\n      ))}\n    </div>\n  );\n}\n\nconst TREE_STYLE = {\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n} as const satisfies React.CSSProperties;\n"]}
+{"version":3,"file":"TreeView.js","sourceRoot":"","sources":["../../../../../../src/features/tree-view/adapters/inbound/web-artifact/TreeView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { toggleExpandedIds } from '../../../utils/toggleExpandedIds';\nimport { TreeItemRow } from './TreeItemRow';\n\nexport interface TreeItemNode<TId extends string = string> {\n  readonly id: TId;\n  readonly label: React.ReactNode;\n  readonly icon?: React.ReactNode;\n  readonly children?: readonly TreeItemNode<TId>[];\n  readonly disabled?: boolean;\n  readonly meta?: React.ReactNode;\n  readonly actions?: React.ReactNode;\n}\n\nexport interface TreeItemRenderProps<TId extends string = string> {\n  readonly node: TreeItemNode<TId>;\n  readonly depth: number;\n  readonly selected: boolean;\n  readonly expanded: boolean;\n  readonly hasChildren: boolean;\n}\n\nexport interface TreeViewProps<TId extends string = string> {\n  readonly nodes: readonly TreeItemNode<TId>[];\n  readonly selectedId?: TId;\n  readonly expandedIds?: readonly TId[];\n  readonly defaultExpandedIds?: readonly TId[];\n  readonly onSelect?: (id: TId) => void;\n  readonly onExpandedChange?: (ids: readonly TId[]) => void;\n  readonly renderItem?: (props: TreeItemRenderProps<TId>) => React.ReactNode;\n  readonly expansionIndicator?: 'chevron' | 'folder';\n  readonly className?: string;\n  readonly style?: React.CSSProperties;\n  readonly ariaLabel?: string;\n}\n\n/***\n * Render the standalone browser TreeView artifact without React Native runtime dependencies.\n * expansionIndicator Use `chevron` beside custom node icons, or `folder` (default) for\n * built-in folder/file indicators. Expansion is leading and independent from row selection.\n */\nexport function TreeView<TId extends string = string>({\n  nodes,\n  selectedId,\n  expandedIds: controlledExpandedIds,\n  defaultExpandedIds,\n  onSelect,\n  onExpandedChange,\n  renderItem,\n  expansionIndicator = 'folder',\n  className,\n  style,\n  ariaLabel = 'Tree',\n}: TreeViewProps<TId>) {\n  const [internalExpandedIds, setInternalExpandedIds] = React.useState<readonly TId[]>(\n    defaultExpandedIds ?? [],\n  );\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const isControlled = controlledExpandedIds !== undefined;\n  const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;\n  const handleToggleExpand = React.useCallback(\n    (id: TId) => {\n      const nextExpandedIds = toggleExpandedIds(expandedIds, id);\n      if (!isControlled) setInternalExpandedIds(nextExpandedIds);\n      onExpandedChange?.(nextExpandedIds);\n    },\n    [expandedIds, isControlled, onExpandedChange],\n  );\n  useSelectedTreeItemReveal(rootRef, selectedId, expandedIds);\n\n  return (\n    <div\n      ref={rootRef}\n      aria-label={ariaLabel}\n      className={className}\n      role=\"tree\"\n      style={{ ...TREE_STYLE, ...style }}\n    >\n      {nodes.map((node) => (\n        <TreeItemRow\n          key={node.id}\n          depth={0}\n          expandedIds={expandedIds}\n          expansionIndicator={expansionIndicator}\n          node={node}\n          onSelect={onSelect}\n          onToggleExpand={handleToggleExpand}\n          renderItem={renderItem}\n          selectedId={selectedId}\n        />\n      ))}\n    </div>\n  );\n}\n\n/*** Reveal a controlled selection after it is rendered without changing expansion ownership. */\nfunction useSelectedTreeItemReveal<TId extends string>(\n  rootRef: React.RefObject<HTMLDivElement | null>,\n  selectedId: TId | undefined,\n  expandedIds: readonly TId[],\n) {\n  React.useEffect(() => {\n    if (selectedId === undefined) return;\n    const root = rootRef.current as unknown as TreeViewQueryableElement | null;\n    root\n      ?.querySelector('[role=\"treeitem\"][aria-selected=\"true\"]')\n      ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n  }, [expandedIds, rootRef, selectedId]);\n}\n\nconst TREE_STYLE = {\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n} as const satisfies React.CSSProperties;\n\ninterface TreeViewQueryableElement {\n  querySelector(selector: string): TreeViewRevealTarget | null;\n}\n\ninterface TreeViewRevealTarget {\n  scrollIntoView(options: { readonly block: 'nearest'; readonly inline: 'nearest' }): void;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "22.0.80",
+  "version": "22.0.82",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -124,7 +124,7 @@
     "version-packages": "ankhorage-changeset version"
   },
   "devDependencies": {
-    "@ankhorage/devtools": "^2.1.2",
+    "@ankhorage/devtools": "^2.1.6",
     "@ankhorage/paradox": "^0.2.27",
     "@react-native-vector-icons/fontawesome": "^13.1.4",
     "@react-native-vector-icons/fontawesome5": "^13.1.4",

package/src/features/tree-view/adapters/inbound/web-artifact/TreeView.test.tsx

@@ -66,6 +66,46 @@ test('expands from the leading control without selecting the row, including keyb
   }
 });
 
+test('reveals a controlled selection when expansion makes the row renderable', async () => {
+  const browserWindow = new Window();
+  const keys = ['window', 'document', 'Node', 'navigator', 'IS_REACT_ACT_ENVIRONMENT'] as const;
+  const previous = keys.map(
+    (key) => [key, Object.getOwnPropertyDescriptor(globalThis, key)] as const,
+  );
+  Object.assign(globalThis, {
+    IS_REACT_ACT_ENVIRONMENT: true,
+    window: browserWindow,
+    document: browserWindow.document,
+    Node: browserWindow.Node,
+    navigator: browserWindow.navigator,
+  });
+  const reveals: unknown[] = [];
+  browserWindow.HTMLElement.prototype.scrollIntoView = (options) => reveals.push(options);
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  const root = createRoot(host);
+  const interactAsync = (action: () => void) => act(() => Promise.resolve().then(action));
+  const nodes = [{ id: 'src', label: 'source', children: [{ id: 'leaf', label: 'leaf' }] }];
+  try {
+    await interactAsync(() =>
+      root.render(<TreeView expandedIds={[]} nodes={nodes} selectedId="leaf" />),
+    );
+    expect(reveals).toEqual([]);
+
+    await interactAsync(() =>
+      root.render(<TreeView expandedIds={['src']} nodes={nodes} selectedId="leaf" />),
+    );
+    expect(reveals).toEqual([{ block: 'nearest', inline: 'nearest' }]);
+  } finally {
+    await interactAsync(() => root.unmount());
+    browserWindow.close();
+    for (const [key, descriptor] of previous) {
+      if (descriptor) Object.defineProperty(globalThis, key, descriptor);
+      else Reflect.deleteProperty(globalThis, key);
+    }
+  }
+});
+
 test('renders a standalone web tree without a ZORA or React Native provider', () => {
   const markup = renderToStaticMarkup(
     <TreeView

package/src/features/tree-view/adapters/inbound/web-artifact/TreeView.tsx

@@ -56,6 +56,7 @@ export function TreeView<TId extends string = string>({
   const [internalExpandedIds, setInternalExpandedIds] = React.useState<readonly TId[]>(
     defaultExpandedIds ?? [],
   );
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
   const isControlled = controlledExpandedIds !== undefined;
   const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;
   const handleToggleExpand = React.useCallback(
@@ -66,9 +67,11 @@ export function TreeView<TId extends string = string>({
     },
     [expandedIds, isControlled, onExpandedChange],
   );
+  useSelectedTreeItemReveal(rootRef, selectedId, expandedIds);
 
   return (
     <div
+      ref={rootRef}
       aria-label={ariaLabel}
       className={className}
       role="tree"
@@ -91,8 +94,31 @@ export function TreeView<TId extends string = string>({
   );
 }
 
+/*** Reveal a controlled selection after it is rendered without changing expansion ownership. */
+function useSelectedTreeItemReveal<TId extends string>(
+  rootRef: React.RefObject<HTMLDivElement | null>,
+  selectedId: TId | undefined,
+  expandedIds: readonly TId[],
+) {
+  React.useEffect(() => {
+    if (selectedId === undefined) return;
+    const root = rootRef.current as unknown as TreeViewQueryableElement | null;
+    root
+      ?.querySelector('[role="treeitem"][aria-selected="true"]')
+      ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  }, [expandedIds, rootRef, selectedId]);
+}
+
 const TREE_STYLE = {
   display: 'flex',
   flexDirection: 'column',
   minWidth: 0,
 } as const satisfies React.CSSProperties;
+
+interface TreeViewQueryableElement {
+  querySelector(selector: string): TreeViewRevealTarget | null;
+}
+
+interface TreeViewRevealTarget {
+  scrollIntoView(options: { readonly block: 'nearest'; readonly inline: 'nearest' }): void;
+}

package/web-dist/components/graph-view/GraphView.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-import type { GraphViewProps } from '../../../../../types/graph-view';
+
+import type { GraphViewProps } from './GraphView.types-0';
+
 /***
  * Render a browser graph while one runtime owns Cytoscape layout, viewport, and disposal.
  * zoomMode Use `fit-relative` to make controller zoom, events and min/max limits relative
@@ -14,4 +16,4 @@ import type { GraphViewProps } from '../../../../../types/graph-view';
  * cramped layouts but cannot repair non-uniform overlaps.
  */
 export declare function GraphView(props: GraphViewProps): React.JSX.Element;
-//# sourceMappingURL=GraphView.d.ts.map
+export type { GraphViewCallbacks, GraphViewController, GraphViewEdge, GraphViewElementEvent, GraphViewElementEventType, GraphViewFitOptions, GraphViewLayoutName, GraphViewNode, GraphViewNodeRenderContext, GraphViewPoint, GraphViewProps, GraphViewRenderedNode, GraphViewSize, GraphViewStyleRule, GraphViewViewport } from './GraphView.types-0';

package/web-dist/components/graph-view/GraphView.types-0.d.ts

@@ -0,0 +1,98 @@
+import type React from 'react';
+export type GraphViewLayoutName = 'breadthfirst' | 'circle' | 'concentric' | 'elk' | 'grid';
+export type GraphViewElementEventType = 'press' | 'double-press' | 'select' | 'unselect' | 'pointer-enter' | 'pointer-leave';
+export interface GraphViewNode {
+    readonly id: string;
+    readonly label?: string;
+    readonly parentId?: string;
+    readonly classes?: string;
+    readonly data?: Readonly<Record<string, unknown>>;
+}
+export interface GraphViewEdge {
+    readonly id?: string;
+    readonly source: string;
+    readonly target: string;
+    readonly classes?: string;
+    readonly data?: Readonly<Record<string, unknown>>;
+}
+export interface GraphViewStyleRule {
+    readonly selector: string;
+    readonly style: Readonly<Record<string, unknown>>;
+}
+export interface GraphViewPoint {
+    readonly x: number;
+    readonly y: number;
+}
+export interface GraphViewSize {
+    readonly width: number;
+    readonly height: number;
+}
+export interface GraphViewNodeRenderContext {
+    readonly hovered: boolean;
+    readonly node: GraphViewNode;
+    readonly selected: boolean;
+    readonly zoom: number;
+}
+export interface GraphViewRenderedNode {
+    readonly hovered: boolean;
+    readonly id: string;
+    readonly position: GraphViewPoint;
+    readonly selected: boolean;
+    readonly zoom: number;
+}
+export interface GraphViewViewport {
+    readonly zoom: number;
+    readonly pan: GraphViewPoint;
+}
+export interface GraphViewFitOptions {
+    /** Optimize existing layout spacing without rerunning its algorithm; whole-graph fits only. */
+    readonly optimizeSpacing?: boolean;
+    readonly nodeIds?: readonly string[];
+    readonly padding?: number;
+}
+export interface GraphViewElementEvent {
+    readonly id: string;
+    readonly type: GraphViewElementEventType;
+}
+export interface GraphViewController {
+    fit(options?: GraphViewFitOptions): void;
+    getViewport(): GraphViewViewport;
+    getZoomRange(): {
+        readonly min: number;
+        readonly max: number;
+    };
+    setPan(pan: GraphViewPoint): void;
+    setZoom(zoom: number): void;
+    zoomBy(factor: number): void;
+}
+export interface GraphViewProps {
+    readonly nodes: readonly GraphViewNode[];
+    readonly edges: readonly GraphViewEdge[];
+    readonly layout?: GraphViewLayoutName;
+    readonly layoutOptions?: Readonly<Record<string, unknown>>;
+    readonly spacingFactor?: number;
+    readonly styleRules?: readonly GraphViewStyleRule[];
+    readonly selectedNodeIds?: readonly string[];
+    readonly renderNode?: (context: GraphViewNodeRenderContext) => React.ReactNode;
+    readonly getNodeSize?: (node: GraphViewNode) => GraphViewSize | undefined;
+    readonly fitPadding?: number;
+    readonly minZoom?: number;
+    readonly maxZoom?: number;
+    readonly minReadableLabelSize?: number;
+    readonly maxFitLabelSize?: number;
+    /** Zoom values and bounds use the full-node fit as 1 when fit-relative is selected. */
+    readonly zoomMode?: 'absolute' | 'fit-relative';
+    /** Measure plain labels before layout instead of estimating width from character count. */
+    readonly sizeNodesToLabels?: boolean;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly ariaLabel?: string;
+    readonly onReady?: (controller: GraphViewController) => void;
+    readonly onLayoutComplete?: (controller: GraphViewController) => void;
+    readonly onNodeEvent?: (event: GraphViewElementEvent) => void;
+    readonly onEdgeEvent?: (event: GraphViewElementEvent) => void;
+    readonly onViewportChange?: (viewport: GraphViewViewport) => void;
+    readonly onSpacingFactorChange?: (spacingFactor: number) => void;
+}
+export type GraphViewCallbacks = Pick<GraphViewProps, 'onEdgeEvent' | 'onLayoutComplete' | 'onNodeEvent' | 'onReady' | 'onViewportChange' | 'onSpacingFactorChange'>;
+//# sourceMappingURL=graph-view.d.ts.map

package/web-dist/components/tree-view/TreeView.js

@@ -229,6 +229,7 @@ function TreeView({
   ariaLabel = "Tree"
 }) {
   const [internalExpandedIds, setInternalExpandedIds] = React2.useState(defaultExpandedIds ?? []);
+  const rootRef = React2.useRef(null);
   const isControlled = controlledExpandedIds !== undefined;
   const expandedIds = isControlled ? controlledExpandedIds : internalExpandedIds;
   const handleToggleExpand = React2.useCallback((id) => {
@@ -237,7 +238,9 @@ function TreeView({
       setInternalExpandedIds(nextExpandedIds);
     onExpandedChange?.(nextExpandedIds);
   }, [expandedIds, isControlled, onExpandedChange]);
+  useSelectedTreeItemReveal(rootRef, selectedId, expandedIds);
   return /* @__PURE__ */ jsx3("div", {
+    ref: rootRef,
     "aria-label": ariaLabel,
     className,
     role: "tree",
@@ -254,6 +257,14 @@ function TreeView({
     }, node.id))
   });
 }
+function useSelectedTreeItemReveal(rootRef, selectedId, expandedIds) {
+  React2.useEffect(() => {
+    if (selectedId === undefined)
+      return;
+    const root = rootRef.current;
+    root?.querySelector('[role="treeitem"][aria-selected="true"]')?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [expandedIds, rootRef, selectedId]);
+}
 var TREE_STYLE = {
   display: "flex",
   flexDirection: "column",

package/web-dist/manifest.json

@@ -1475,6 +1475,7 @@
       "files": [
         "components/graph-view/GraphView.js",
         "components/graph-view/GraphView.d.ts",
+        "components/graph-view/GraphView.types-0.d.ts",
         "components/graph-view/index.js",
         "components/graph-view/index.d.ts",
         "chunks/Accordion-59pa0677.js",