@dxos/plugin-navtree 0.9.1-staging.ee54ba693a → 0.11.0

package/PLUGIN.mdl

@@ -74,7 +74,7 @@ component NavTree
   actions:
     openChange(item: Node, path: string[], open: boolean)
     tabChange(node: Node)
-    select(item: Node, path: string[], option: boolean)
+    select(item: Node, path: string[], option: boolean, shift: boolean)
     back()
     itemHover(item: Node)
   layout: |
@@ -101,7 +101,7 @@ component NavTreeContainer
     layout: LayoutState    # active items, sidebar open/closed, mode
     model: NavTreeModel
   actions:
-    handleSelect(item: Node, path: string[], option: boolean)
+    handleSelect(item: Node, path: string[], option: boolean, shift: boolean)
     handleOpenChange(item: Node, path: string[], open: boolean)
     handleTabChange(node: Node)
     handleBack()
@@ -197,7 +197,8 @@ feat F-3: Item Selection
 
   req F-3.1:
     when: user selects a non-current item
-    then: LayoutOperation.Open (single mode) or LayoutOperation.Set (multi mode) is invoked
+    then: LayoutOperation.Open is invoked with disposition 'solo' and the shift modifier forwarded
+          (the Open handler upgrades any disposition to 'add' when shift is held)
   req F-3.2:
     when: user option-clicks a currently active item
     then: LayoutOperation.Close is invoked for that item
@@ -285,10 +286,11 @@ test T-3: Expose navigates to nested item
 ```
 
 ```mdl
-test T-4: Select item in single mode
-  given: layout.mode === single, item not currently active
+test T-4: Select item
+  given: item not currently active
   when: user selects a tree item
-  then: LayoutOperation.Open is invoked with the item id
+  then: LayoutOperation.Open is invoked with the item id, disposition 'solo' and the shift modifier
+        forwarded (shift-click therefore adds a plank instead of navigating)
 ```
 
 ```mdl

package/dist/lib/NavTreePlugin.mjs

@@ -0,0 +1,40 @@
+import { ActivationEvent, ActivationEvents, Capabilities, Capability, Plugin } from "@dxos/app-framework";
+import { meta } from "#meta";
+import { AppActivationEvents, AppCapabilities, AppPlugin, LayoutOperation } from "@dxos/app-toolkit";
+import { Graph } from "@dxos/plugin-graph";
+import * as Effect from "effect/Effect";
+import { AttentionEvents } from "@dxos/plugin-attention";
+import { AppGraphBuilder, Keyboard, OperationHandler, ReactSurface, State } from "#capabilities";
+import { translations } from "#translations";
+import { NavTreeEvents } from "#types";
+//#endregion
+//#region src/NavTreePlugin.tsx
+var NavTreePlugin = Plugin.define(meta).pipe(AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }), AppPlugin.addOperationHandlerModule({ activate: OperationHandler }), AppPlugin.addSurfaceModule({ activate: ReactSurface }), AppPlugin.addTranslationsModule({ translations }), Plugin.addModule({
+	id: "state",
+	activatesOn: ActivationEvent.allOf(AppActivationEvents.LayoutReady, AttentionEvents.AttentionReady),
+	firesAfterActivation: [NavTreeEvents.StateReady],
+	activate: State
+}), Plugin.addModule({
+	id: "expose",
+	activatesOn: ActivationEvent.allOf(ActivationEvents.ProcessManagerReady, AppActivationEvents.AppGraphReady, AppActivationEvents.LayoutReady, NavTreeEvents.StateReady),
+	activate: Effect.fnUntraced(function* () {
+		const layout = yield* Capabilities.getAtomValue(AppCapabilities.Layout);
+		const { invokePromise } = yield* Capability.get(Capabilities.OperationInvoker);
+		const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
+		if (invokePromise && layout.active.length === 1) Graph.waitForPath(graph, { target: layout.active[0] }, { timeout: 3e4 }).then(() => invokePromise(LayoutOperation.Expose, { subject: layout.active[0] })).catch(() => {});
+		return [];
+	})
+}), Plugin.addModule({
+	id: "keyboard",
+	activatesOn: ActivationEvent.allOf(AppActivationEvents.AppGraphReady, ActivationEvents.ProcessManagerReady),
+	activate: Keyboard
+}), AppPlugin.addPluginAssetModule({ asset: {
+	pluginId: meta.profile.key,
+	path: "PLUGIN.mdl",
+	content: "---\nid: org.dxos.plugin.navtree\nname: NavTreePlugin\nversion: 0.1.0\n---\n\nHierarchical navigation sidebar for `DXOS` Composer — renders the application graph as a collapsible tree, manages workspace tabs, exposes keyboard-driven command search, and handles drag-and-drop rearrangement of spaces, folders, and objects.\n\n## Extensions\n\nThe following extension dialects are used in this document.\nEach extension is defined in the Appendix or resolved via its URI.\n\n| Term        | URI                            |\n|-------------|--------------------------------|\n| `type`      | `org.dxos.mdl.type@1.0`       |\n| `feat`      | `org.dxos.mdl.feat@1.0`       |\n| `test`      | `org.dxos.mdl.test@1.0`       |\n| `component` | `org.dxos.mdl.component@1.0`  |\n| `op`        | `org.dxos.mdl.op@1.0`         |\n\n## Types\n\n```mdl\ntype NavTreeItemState\n  fields:\n    open: boolean          # whether the tree node is expanded\n    current: boolean       # whether the node is in the active layout\n```\n\n```mdl\ntype KeyBinding\n  fields:\n    macos?: string\n    windows?: string\n    linux?: string\n    ios?: string\n    unknown?: string\n```\n\n```mdl\ntype NodeProperties\n  fields:\n    label: Label\n    icon?: string\n    iconHue?: string\n    role?: string\n    error?: string\n    modified?: boolean\n    palette?: string\n    disabled?: boolean\n    testId?: string\n    position?: Position\n    className?: string\n    keyBinding?: string | KeyBinding\n    persistenceClass?: string\n    persistenceKey?: string\n```\n\n## Components\n\n```mdl\ncomponent NavTree\n  desc: Root navigation tree that renders workspace tabs at the top level and a collapsible subtree for the active workspace.\n  props:\n    id: string             # root node id (Node.RootId)\n    root: Node             # root of the application graph\n    tab: string            # currently active workspace tab id\n    open: boolean          # whether the navigation sidebar is open\n  state:\n    model: NavTreeModel    # live tree model built from graph connections\n  slots:\n    itemEnd?: ReactNode    # per-item trailing content (e.g. action badges)\n  actions:\n    openChange(item: Node, path: string[], open: boolean)\n    tabChange(node: Node)\n    select(item: Node, path: string[], option: boolean, shift: boolean)\n    back()\n    itemHover(item: Node)\n  layout: |\n    ┌─────────────────────────┐\n    │ workspace tabs          │\n    │  [tab] [tab] [tab]      │\n    ├─────────────────────────┤\n    │ collapsible tree        │\n    │  ▾ Space                │\n    │    ▾ Folder             │\n    │      • Object           │\n    │      • Object           │\n    │    • Object             │\n    └─────────────────────────┘\n```\n\n```mdl\ncomponent NavTreeContainer\n  desc: Smart container that wires the NavTree to the app graph, layout state, and drag-and-drop monitor.\n  props:\n    tab: string\n    popoverAnchorId?: string\n  state:\n    layout: LayoutState    # active items, sidebar open/closed, mode\n    model: NavTreeModel\n  actions:\n    handleSelect(item: Node, path: string[], option: boolean, shift: boolean)\n    handleOpenChange(item: Node, path: string[], open: boolean)\n    handleTabChange(node: Node)\n    handleBack()\n    handleDrop(source: TreeData, target: TreeData, instruction: Instruction)\n  emits:\n    onNavigate(subject: string | string[])\n  layout: |\n    ┌──────────────────────────┐\n    │ NavTreeContext.Provider  │\n    │  └─ NavTree              │\n    └──────────────────────────┘\n```\n\n```mdl\ncomponent CommandsDialogContent\n  desc: Full-screen command palette dialog — surfaces all graph actions, searchable by label.\n  props:\n    onClose?: () => void\n  state:\n    query: string\n    results: Node[]\n  actions:\n    search(query: string) → Node[]\n    execute(node: Node)\n  layout: |\n    ┌──────────────────────────┐\n    │ [search input]           │\n    ├──────────────────────────┤\n    │ result list              │\n    │  icon  label  shortcut   │\n    │  icon  label             │\n    │  …                       │\n    └──────────────────────────┘\n```\n\n```mdl\ncomponent CommandsTrigger\n  desc: Search-input surface slot component — opens the commands dialog on click or ⌘K / Ctrl+K.\n  slots:\n    (none)\n  actions:\n    openCommandsDialog()\n```\n\n## Operations\n\n```mdl\nop expose\n  desc: Expands tree nodes along the path to a subject and marks each as open so the item becomes visible in the NavTree.\n  input:\n    subject: string        # attendable DXN or node id\n  output: void\n  effects: [echo:read]\n  note: |\n    Resolves the full ancestor path via expandAttendableId, calls Graph.expand per node,\n    then sets each path segment open in NavTreeCapabilities.State.\n```\n\n## Features\n\n```mdl\nfeat F-1: Sidebar Navigation\n\n  req F-1.1: NavTree renders all root-level graph connections as workspace tabs.\n  req F-1.2:\n    when: user selects a workspace tab\n    then: LayoutOperation.SwitchWorkspace is invoked; subtree for that workspace is expanded\n  req F-1.3:\n    when: sidebar is closed and user selects a workspace tab\n    then: sidebar opens (state transitions to expanded)\n  req F-1.4:\n    when: same active tab is clicked while sidebar is expanded\n    then: sidebar collapses (state transitions to collapsed or closed on mobile)\n```\n\n```mdl\nfeat F-2: Tree Expand / Collapse\n\n  req F-2.1: Tree items with children show an expand/collapse toggle.\n  req F-2.2:\n    when: user expands a node\n    then: open state persisted to localStorage keyed by path; Graph.expand called for the node\n  req F-2.3:\n    when: plugin initialises after layout is ready\n    then: all paths previously marked open are re-expanded from localStorage\n  req F-2.4:\n    when: op:expose is called\n    then: all ancestors of the subject are expanded and marked open\n```\n\n```mdl\nfeat F-3: Item Selection\n\n  req F-3.1:\n    when: user selects a non-current item\n    then: LayoutOperation.Open is invoked with disposition 'solo' and the shift modifier forwarded\n          (the Open handler upgrades any disposition to 'add' when shift is held)\n  req F-3.2:\n    when: user option-clicks a currently active item\n    then: LayoutOperation.Close is invoked for that item\n  req F-3.3:\n    when: user clicks a currently active item without option key\n    then: LayoutOperation.ScrollIntoView is invoked\n  req F-3.4:\n    when: item has a default disposition action\n    then: that action is run after navigation\n  req F-3.5:\n    when: navigation succeeds on mobile\n    then: sidebar is closed automatically\n```\n\n```mdl\nfeat F-4: Drag and Drop\n\n  req F-4.1: NavTree items can be dragged to rearrange within the same parent.\n  req F-4.2: NavTree items can be dragged to copy or transfer to a different parent.\n  req F-4.3:\n    when: drop instruction is rearrange\n    then: onRearrange callback on the parent node is called with the new order\n  req F-4.4:\n    when: drop instruction is copy\n    then: onCopy callback on the target node is called\n  req F-4.5:\n    when: drop instruction is transfer\n    then: onTransferStart and onTransferEnd callbacks are called on source and target parents\n  req F-4.6:\n    when: target node reports blockInstruction for an instruction type\n    then: that instruction is blocked and the drop is not applied\n```\n\n```mdl\nfeat F-5: Keyboard Shortcuts\n\n  req F-5.1: NavTree plugin registers keyboard shortcuts for all graph actions that declare a keyBinding property.\n  req F-5.2: Graph is traversed on change (debounced 500 ms) to bind newly added shortcuts.\n  req F-5.3: The commands dialog is opened via ⌘K (macOS) / Ctrl+K (Windows/Linux).\n  req F-5.4:\n    when: plugin deactivates\n    then: Keyboard.singleton is destroyed and all shortcuts are unregistered\n```\n\n```mdl\nfeat F-6: State Persistence\n\n  req F-6.1: Per-path open/current state is stored in an atom family keyed by path string.\n  req F-6.2: Open state (not current) is persisted to localStorage on every change.\n  req F-6.3: Current state reflects active layout items and is never persisted.\n  req F-6.4:\n    when: layout.active changes\n    then: removed items are marked not-current; newly active items are marked current\n```\n\n## Acceptance\n\n```mdl\ntest T-1: Workspace tab switch\n  given: two workspace tabs exist in the graph\n  when: user clicks the second workspace tab\n  then:\n    - LayoutOperation.SwitchWorkspace is invoked with the tab's node id\n    - sidebar transitions to expanded\n    - subtree for the selected workspace is expanded\n```\n\n```mdl\ntest T-2: Tree node expand persists\n  given: NavTree is rendered with a collapsed folder node\n  when: user expands the folder\n  then:\n    - folder node state.open === true\n    - localStorage entry updated for the folder's path\n    - Graph.expand called for the folder node id\n```\n\n```mdl\ntest T-3: Expose navigates to nested item\n  given: a deeply nested object id is active in the layout\n  when: op:expose is called with that object id\n  then:\n    - all ancestor paths are marked open\n    - Graph.expand is called for each ancestor\n```\n\n```mdl\ntest T-4: Select item\n  given: item not currently active\n  when: user selects a tree item\n  then: LayoutOperation.Open is invoked with the item id, disposition 'solo' and the shift modifier\n        forwarded (shift-click therefore adds a plank instead of navigating)\n```\n\n```mdl\ntest T-5: Command palette opens on keyboard shortcut\n  given: NavTree is active\n  when: user presses ⌘K (macOS) or Ctrl+K (Windows)\n  then:\n    - CommandsDialogContent is shown in the layout dialog slot\n    - search input is focused\n```\n\n```mdl\ntest T-6: Drag-and-drop rearrange\n  given: two sibling items in the same folder\n  when: user drags the first item below the second\n  then:\n    - onRearrange callback is called with the reordered array\n    - tree re-renders with the new order\n```\n\n---\n\n## Appendix: Extension Definitions\n\n```mdl\next type\n  uri: org.dxos.mdl.type@1.0\n  desc: A named data structure with typed fields and optional literals.\n  fields:\n    desc?: Prose\n    fields?: FieldMap\n    literals?: UnionList\n    extends?: TypeRef[]\n```\n\n```mdl\next feat\n  uri: org.dxos.mdl.feat@1.0\n  desc: A named feature grouping one or more requirements.\n  fields:\n    desc?: Prose\n    req: RequirementList\n  nesting: self\n```\n\n```mdl\next test\n  uri: org.dxos.mdl.test@1.0\n  desc: An acceptance scenario expressed as given / when / then steps.\n  fields:\n    given?: Step | Step[]\n    when?: Step | Step[]\n    then: Step | Step[]\n    tags?: TagList\n```\n\n```mdl\next component\n  uri: org.dxos.mdl.component@1.0\n  desc: A UI component with props, internal state, slots, actions, and events.\n  fields:\n    desc?: Prose\n    props?: FieldMap\n    state?: FieldMap\n    slots?: FieldMap\n    actions?: ActionMap\n    emits?: EventMap\n    layout?: CodeBlock\n```\n\n```mdl\next op\n  uri: org.dxos.mdl.op@1.0\n  desc: |\n    A named operation with typed inputs, outputs, and declared errors.\n    Pure ops have no effects or requires. Effectful ops declare both.\n  fields:\n    desc?: Prose\n    input?: FieldMap\n    output?: TypeExpr\n    errors?: ErrorMap\n    effects?: EffectList\n    requires?: ServiceList\n    note?: Prose\n```\n",
+	mimeType: "application/x-mdl"
+} }), Plugin.make);
+//#endregion
+export { NavTreePlugin, NavTreePlugin as default };
+
+//# sourceMappingURL=NavTreePlugin.mjs.map

package/dist/lib/NavTreePlugin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavTreePlugin.mjs","names":[],"sources":["../../src/NavTreePlugin.tsx"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { ActivationEvent, ActivationEvents, Capabilities, Capability, Plugin } from '@dxos/app-framework';\nimport { AppActivationEvents, AppCapabilities, AppPlugin, LayoutOperation } from '@dxos/app-toolkit';\nimport { AttentionEvents } from '@dxos/plugin-attention';\nimport { Graph } from '@dxos/plugin-graph';\n\nimport { AppGraphBuilder, Keyboard, OperationHandler, ReactSurface, State } from '#capabilities';\nimport { meta } from '#meta';\nimport { translations } from '#translations';\nimport { NavTreeEvents } from '#types';\n\n// eslint-disable-next-line import/no-relative-packages\nimport pluginSpec from '../PLUGIN.mdl?raw';\n\nexport const NavTreePlugin = Plugin.define(meta).pipe(\n  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),\n  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),\n  AppPlugin.addSurfaceModule({ activate: ReactSurface }),\n  AppPlugin.addTranslationsModule({ translations }),\n  Plugin.addModule({\n    id: 'state',\n    // Wait for AttentionReady too so the ViewState Manager (the expansion persistence backend) is available.\n    activatesOn: ActivationEvent.allOf(AppActivationEvents.LayoutReady, AttentionEvents.AttentionReady),\n    firesAfterActivation: [NavTreeEvents.StateReady],\n    activate: State,\n  }),\n  Plugin.addModule({\n    id: 'expose',\n    activatesOn: ActivationEvent.allOf(\n      ActivationEvents.ProcessManagerReady,\n      AppActivationEvents.AppGraphReady,\n      AppActivationEvents.LayoutReady,\n      NavTreeEvents.StateReady,\n    ),\n    activate: Effect.fnUntraced(function* () {\n      const layout = yield* Capabilities.getAtomValue(AppCapabilities.Layout);\n      const { invokePromise } = yield* Capability.get(Capabilities.OperationInvoker);\n      const { graph } = yield* Capability.get(AppCapabilities.AppGraph);\n      if (invokePromise && layout.active.length === 1) {\n        // TODO(wittjosiah): This should really be fired once the navtree renders for the first time.\n        //   That is the point at which the graph is expanded and the path should be available.\n        void Graph.waitForPath(graph, { target: layout.active[0] }, { timeout: 30_000 })\n          .then(() => invokePromise(LayoutOperation.Expose, { subject: layout.active[0] }))\n          .catch(() => {});\n      }\n\n      return [];\n    }),\n  }),\n  Plugin.addModule({\n    id: 'keyboard',\n    activatesOn: ActivationEvent.allOf(AppActivationEvents.AppGraphReady, ActivationEvents.ProcessManagerReady),\n    activate: Keyboard,\n  }),\n  AppPlugin.addPluginAssetModule({\n    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },\n  }),\n  Plugin.make,\n);\n\nexport default NavTreePlugin;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAa,gBAAgB,OAAO,OAAO,IAAI,CAAC,CAAC,KAC/C,UAAU,kBAAkB,EAAE,UAAU,gBAAgB,CAAC,GACzD,UAAU,0BAA0B,EAAE,UAAU,iBAAiB,CAAC,GAClE,UAAU,iBAAiB,EAAE,UAAU,aAAa,CAAC,GACrD,UAAU,sBAAsB,EAAE,aAAa,CAAC,GAChD,OAAO,UAAU;CACf,IAAI;CAEJ,aAAa,gBAAgB,MAAM,oBAAoB,aAAa,gBAAgB,cAAc;CAClG,sBAAsB,CAAC,cAAc,UAAU;CAC/C,UAAU;AACZ,CAAC,GACD,OAAO,UAAU;CACf,IAAI;CACJ,aAAa,gBAAgB,MAC3B,iBAAiB,qBACjB,oBAAoB,eACpB,oBAAoB,aACpB,cAAc,UAChB;CACA,UAAU,OAAO,WAAW,aAAa;EACvC,MAAM,SAAS,OAAO,aAAa,aAAa,gBAAgB,MAAM;EACtE,MAAM,EAAE,kBAAkB,OAAO,WAAW,IAAI,aAAa,gBAAgB;EAC7E,MAAM,EAAE,UAAU,OAAO,WAAW,IAAI,gBAAgB,QAAQ;EAChE,IAAI,iBAAiB,OAAO,OAAO,WAAW,GAG5C,MAAW,YAAY,OAAO,EAAE,QAAQ,OAAO,OAAO,GAAG,GAAG,EAAE,SAAS,IAAO,CAAC,CAAA,CAC5E,WAAW,cAAc,gBAAgB,QAAQ,EAAE,SAAS,OAAO,OAAO,GAAG,CAAC,CAAC,CAAA,CAC/E,YAAY,CAAC,CAAC;EAGnB,OAAO,CAAC;CACV,CAAC;AACH,CAAC,GACD,OAAO,UAAU;CACf,IAAI;CACJ,aAAa,gBAAgB,MAAM,oBAAoB,eAAe,iBAAiB,mBAAmB;CAC1G,UAAU;AACZ,CAAC,GACD,UAAU,qBAAqB,EAC7B,OAAO;CAAE,UAAU,KAAK,QAAQ;CAAK,MAAM;CAAc,SAAS;CAAY,UAAU;AAAoB,EAC9G,CAAC,GACD,OAAO,IACT"}

package/dist/lib/capabilities.mjs

@@ -0,0 +1,11 @@
+import { Capability } from "@dxos/app-framework";
+//#region src/capabilities/index.ts
+var AppGraphBuilder = Capability.lazy("AppGraphBuilder", () => import("./chunk-app-graph-builder.mjs"));
+var Keyboard = Capability.lazy("Keyboard", () => import("./chunk-keyboard.mjs"));
+var OperationHandler = Capability.lazy("OperationHandler", () => import("./chunk-operation-handler.mjs"));
+var ReactSurface = Capability.lazy("ReactSurface", () => import("./chunk-react-surface.mjs"));
+var State = Capability.lazy("State", () => import("./chunk-state.mjs"));
+//#endregion
+export { AppGraphBuilder, Keyboard, OperationHandler, ReactSurface, State };
+
+//# sourceMappingURL=capabilities.mjs.map

package/dist/lib/capabilities.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"capabilities.mjs","names":[],"sources":["../../src/capabilities/index.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Capability } from '@dxos/app-framework';\nimport { OperationHandlerSet } from '@dxos/compute';\n\nexport const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));\nexport const Keyboard = Capability.lazy('Keyboard', () => import('./keyboard'));\nexport const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(\n  'OperationHandler',\n  () => import('./operation-handler'),\n);\nexport const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));\nexport const State = Capability.lazy('State', () => import('./state'));\n"],"mappings":";;AAOA,IAAa,kBAAkB,WAAW,KAAK,yBAAyB,OAAO,gCAAsB;AACrG,IAAa,WAAW,WAAW,KAAK,kBAAkB,OAAO,uBAAa;AAC9E,IAAa,mBAAmB,WAAW,KACzC,0BACM,OAAO,gCACf;AACA,IAAa,eAAe,WAAW,KAAK,sBAAsB,OAAO,4BAAkB;AAC3F,IAAa,QAAQ,WAAW,KAAK,eAAe,OAAO,oBAAU"}

package/dist/lib/chunk-CommandsDialogContent.mjs

@@ -0,0 +1,100 @@
+import { getHostPlatform } from "@dxos/util";
+import { KEY_BINDING, meta } from "#meta";
+import { LayoutOperation } from "@dxos/app-toolkit";
+import { Graph, Node } from "@dxos/plugin-graph";
+import { forwardRef, useMemo, useState } from "react";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
+import { useActionRunner, useActions } from "@dxos/plugin-graph/hooks";
+import { Button, Dialog, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { osTranslations } from "@dxos/ui-theme";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { Keyboard, keySymbols } from "@dxos/keyboard";
+import { SearchList, useSearchListResults } from "@dxos/react-ui-search";
+//#region src/containers/CommandsDialogContent/CommandsDialogContent.tsx
+var CommandsDialogContent = forwardRef(({ selected: initial }, forwardedRef) => {
+	const { t } = useTranslation(meta.profile.key);
+	const { invokePromise } = useOperationInvoker();
+	const runAction = useActionRunner();
+	const { graph } = useAppGraph();
+	const [selected, setSelected] = useState(initial);
+	const allActions = useMemo(() => {
+		const current = Keyboard.singleton.getCurrentContext();
+		const actionMap = /* @__PURE__ */ new Set();
+		const actions = [];
+		Graph.traverse(graph, {
+			relation: ["child", "action"],
+			visitor: (node, path) => {
+				const isActionLike = Node.isAction(node) || Node.isActionGroup(node);
+				const parentId = path.at(-2) ?? "";
+				const matches = current === parentId || current.startsWith(parentId + "/");
+				if (isActionLike && !actionMap.has(node.id) && matches) {
+					actionMap.add(node.id);
+					actions.push(node);
+				}
+			}
+		});
+		actions.sort((a, b) => {
+			return toLocalizedString(a.properties.label, t)?.toLowerCase().localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
+		});
+		return actions;
+	}, [graph]);
+	const group = allActions.find(({ id }) => id === selected);
+	const groupActions = useActions(graph, group?.id);
+	const { results, handleSearch } = useSearchListResults({
+		items: Node.isActionGroup(group) ? groupActions : allActions,
+		extract: (action) => toLocalizedString(action.properties.label, t)
+	});
+	return /* @__PURE__ */ jsxs(Dialog.Content, {
+		ref: forwardedRef,
+		children: [
+			/* @__PURE__ */ jsx(Dialog.Title, {
+				srOnly: true,
+				children: t("commands-dialog.title", { ns: meta.profile.key })
+			}),
+			/* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs(SearchList.Root, {
+				onSearch: handleSearch,
+				children: [/* @__PURE__ */ jsx(SearchList.Input, { placeholder: t("command-list-input.placeholder") }), /* @__PURE__ */ jsx(SearchList.Viewport, { children: results.map((action) => {
+					const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[getHostPlatform()];
+					return /* @__PURE__ */ jsx(SearchList.Item, {
+						value: action.id,
+						label: toLocalizedString(action.properties.label, t),
+						icon: action.properties.icon,
+						suffix: shortcut ? keySymbols(shortcut).join("") : void 0,
+						onSelect: () => {
+							if (action.properties.disabled) return;
+							if (Node.isActionGroup(action)) {
+								setSelected(action.id);
+								return;
+							}
+							invokePromise(LayoutOperation.UpdateDialog, { state: false });
+							setTimeout(() => {
+								const lookupId = group?.id ?? action.id;
+								const node = Graph.getConnections(graph, lookupId, Node.actionRelation("inbound"))[0];
+								if (node && Node.isAction(action)) runAction(action, {
+									parent: node,
+									caller: KEY_BINDING
+								});
+							});
+						},
+						classNames: "flex items-center gap-2",
+						disabled: action.properties.disabled,
+						...action.properties?.testId && { "data-testid": action.properties.testId }
+					}, action.id);
+				}) })]
+			}) }),
+			/* @__PURE__ */ jsx(Dialog.ActionBar, { children: /* @__PURE__ */ jsx(Dialog.Close, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					classNames: "w-full",
+					children: t("close.label", { ns: osTranslations })
+				})
+			}) })
+		]
+	});
+});
+CommandsDialogContent.displayName = "CommandsDialogContent";
+//#endregion
+export { CommandsDialogContent as default };
+
+//# sourceMappingURL=chunk-CommandsDialogContent.mjs.map

package/dist/lib/chunk-CommandsDialogContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-CommandsDialogContent.mjs","names":[],"sources":["../../src/containers/CommandsDialogContent/CommandsDialogContent.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { forwardRef, useMemo, useState } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { LayoutOperation } from '@dxos/app-toolkit';\nimport { useAppGraph } from '@dxos/app-toolkit/ui';\nimport { Keyboard, keySymbols } from '@dxos/keyboard';\nimport { Graph, Node } from '@dxos/plugin-graph';\nimport { useActions } from '@dxos/plugin-graph/hooks';\nimport { useActionRunner } from '@dxos/plugin-graph/hooks';\nimport { Button, Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { SearchList, useSearchListResults } from '@dxos/react-ui-search';\nimport { osTranslations } from '@dxos/ui-theme';\nimport { getHostPlatform } from '@dxos/util';\n\nimport { KEY_BINDING, meta } from '#meta';\n\nexport type CommandsDialogContentProps = {\n  selected?: string;\n};\n\n// TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.\nexport const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogContentProps>(\n  ({ selected: initial }, forwardedRef) => {\n    const { t } = useTranslation(meta.profile.key);\n    const { invokePromise } = useOperationInvoker();\n    const runAction = useActionRunner();\n    const { graph } = useAppGraph();\n    const [selected, setSelected] = useState<string | undefined>(initial);\n\n    // Traverse graph.\n    // TODO(burdon): Factor out commonality with shortcut dialog.\n    const allActions = useMemo(() => {\n      // TODO(burdon): Get from navtree (not keyboard).\n      const current = Keyboard.singleton.getCurrentContext();\n      const actionMap = new Set<string>();\n      const actions: Node.ActionLike[] = [];\n      Graph.traverse(graph, {\n        relation: ['child', 'action'],\n        visitor: (node, path) => {\n          const isActionLike = Node.isAction(node) || Node.isActionGroup(node);\n          const parentId = path.at(-2) ?? '';\n          const matches = current === parentId || current.startsWith(parentId + '/');\n          if (isActionLike && !actionMap.has(node.id) && matches) {\n            actionMap.add(node.id);\n            actions.push(node);\n          }\n        },\n      });\n\n      actions.sort((a, b) => {\n        return toLocalizedString(a.properties.label, t)\n          ?.toLowerCase()\n          .localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());\n      });\n\n      return actions;\n    }, [graph]);\n\n    const group = allActions.find(({ id }) => id === selected);\n    const groupActions = useActions(graph, group?.id);\n    const actions = Node.isActionGroup(group) ? groupActions : allActions;\n\n    const { results, handleSearch } = useSearchListResults({\n      items: actions,\n      extract: (action) => toLocalizedString(action.properties.label, t),\n    });\n\n    return (\n      <Dialog.Content ref={forwardedRef}>\n        <Dialog.Title srOnly>{t('commands-dialog.title', { ns: meta.profile.key })}</Dialog.Title>\n        <Dialog.Body>\n          <SearchList.Root onSearch={handleSearch}>\n            <SearchList.Input placeholder={t('command-list-input.placeholder')} />\n            <SearchList.Viewport>\n              {results.map((action) => {\n                const shortcut =\n                  typeof action.properties.keyBinding === 'string'\n                    ? action.properties.keyBinding\n                    : action.properties.keyBinding?.[getHostPlatform()];\n\n                return (\n                  <SearchList.Item\n                    value={action.id}\n                    key={action.id}\n                    label={toLocalizedString(action.properties.label, t)}\n                    icon={action.properties.icon}\n                    suffix={shortcut ? keySymbols(shortcut).join('') : undefined}\n                    onSelect={() => {\n                      if (action.properties.disabled) {\n                        return;\n                      }\n\n                      if (Node.isActionGroup(action)) {\n                        setSelected(action.id);\n                        return;\n                      }\n\n                      void invokePromise(LayoutOperation.UpdateDialog, { state: false });\n                      setTimeout(() => {\n                        const lookupId = group?.id ?? action.id;\n                        const node = Graph.getConnections(graph, lookupId, Node.actionRelation('inbound'))[0];\n                        if (node && Node.isAction(action)) {\n                          void runAction(action, { parent: node, caller: KEY_BINDING });\n                        }\n                      });\n                    }}\n                    classNames='flex items-center gap-2'\n                    disabled={action.properties.disabled}\n                    {...(action.properties?.testId && {\n                      'data-testid': action.properties.testId,\n                    })}\n                  />\n                );\n              })}\n            </SearchList.Viewport>\n          </SearchList.Root>\n        </Dialog.Body>\n        <Dialog.ActionBar>\n          <Dialog.Close asChild>\n            <Button classNames='w-full'>{t('close.label', { ns: osTranslations })}</Button>\n          </Dialog.Close>\n        </Dialog.ActionBar>\n      </Dialog.Content>\n    );\n  },\n);\n\nCommandsDialogContent.displayName = 'CommandsDialogContent';\n"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAa,wBAAwB,YAClC,EAAE,UAAU,WAAW,iBAAiB;CACvC,MAAM,EAAE,MAAM,eAAe,KAAK,QAAQ,GAAG;CAC7C,MAAM,EAAE,kBAAkB,oBAAoB;CAC9C,MAAM,YAAY,gBAAgB;CAClC,MAAM,EAAE,UAAU,YAAY;CAC9B,MAAM,CAAC,UAAU,eAAe,SAA6B,OAAO;CAIpE,MAAM,aAAa,cAAc;EAE/B,MAAM,UAAU,SAAS,UAAU,kBAAkB;EACrD,MAAM,4BAAY,IAAI,IAAY;EAClC,MAAM,UAA6B,CAAC;EACpC,MAAM,SAAS,OAAO;GACpB,UAAU,CAAC,SAAS,QAAQ;GAC5B,UAAU,MAAM,SAAS;IACvB,MAAM,eAAe,KAAK,SAAS,IAAI,KAAK,KAAK,cAAc,IAAI;IACnE,MAAM,WAAW,KAAK,GAAG,EAAE,KAAK;IAChC,MAAM,UAAU,YAAY,YAAY,QAAQ,WAAW,WAAW,GAAG;IACzE,IAAI,gBAAgB,CAAC,UAAU,IAAI,KAAK,EAAE,KAAK,SAAS;KACtD,UAAU,IAAI,KAAK,EAAE;KACrB,QAAQ,KAAK,IAAI;IACnB;GACF;EACF,CAAC;EAED,QAAQ,MAAM,GAAG,MAAM;GACrB,OAAO,kBAAkB,EAAE,WAAW,OAAO,CAAC,CAAA,EAC1C,YAAY,CAAA,CACb,cAAc,kBAAkB,EAAE,WAAW,OAAO,CAAC,CAAC,EAAE,YAAY,CAAC;EAC1E,CAAC;EAED,OAAO;CACT,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,WAAW,MAAM,EAAE,SAAS,OAAO,QAAQ;CACzD,MAAM,eAAe,WAAW,OAAO,OAAO,EAAE;CAGhD,MAAM,EAAE,SAAS,iBAAiB,qBAAqB;EACrD,OAHc,KAAK,cAAc,KAAK,IAAI,eAAe;EAIzD,UAAU,WAAW,kBAAkB,OAAO,WAAW,OAAO,CAAC;CACnE,CAAC;CAED,OACE,qBAAC,OAAO,SAAR;EAAgB,KAAK;YAArB;GACE,oBAAC,OAAO,OAAR;IAAc,QAAA;cAAQ,EAAE,yBAAyB,EAAE,IAAI,KAAK,QAAQ,IAAI,CAAC;GAAgB,CAAA;GACzF,oBAAC,OAAO,MAAR,EAAA,UACE,qBAAC,WAAW,MAAZ;IAAiB,UAAU;cAA3B,CACE,oBAAC,WAAW,OAAZ,EAAkB,aAAa,EAAE,gCAAgC,EAAI,CAAA,GACrE,oBAAC,WAAW,UAAZ,EAAA,UACG,QAAQ,KAAK,WAAW;KACvB,MAAM,WACJ,OAAO,OAAO,WAAW,eAAe,WACpC,OAAO,WAAW,aAClB,OAAO,WAAW,aAAa,gBAAgB;KAErD,OACE,oBAAC,WAAW,MAAZ;MACE,OAAO,OAAO;MAEd,OAAO,kBAAkB,OAAO,WAAW,OAAO,CAAC;MACnD,MAAM,OAAO,WAAW;MACxB,QAAQ,WAAW,WAAW,QAAQ,CAAC,CAAC,KAAK,EAAE,IAAI,KAAA;MACnD,gBAAgB;OACd,IAAI,OAAO,WAAW,UACpB;OAGF,IAAI,KAAK,cAAc,MAAM,GAAG;QAC9B,YAAY,OAAO,EAAE;QACrB;OACF;OAEA,cAAmB,gBAAgB,cAAc,EAAE,OAAO,MAAM,CAAC;OACjE,iBAAiB;QACf,MAAM,WAAW,OAAO,MAAM,OAAO;QACrC,MAAM,OAAO,MAAM,eAAe,OAAO,UAAU,KAAK,eAAe,SAAS,CAAC,CAAC,CAAC;QACnF,IAAI,QAAQ,KAAK,SAAS,MAAM,GAC9B,UAAe,QAAQ;SAAE,QAAQ;SAAM,QAAQ;QAAY,CAAC;OAEhE,CAAC;MACH;MACA,YAAW;MACX,UAAU,OAAO,WAAW;MAC5B,GAAK,OAAO,YAAY,UAAU,EAChC,eAAe,OAAO,WAAW,OACnC;KACD,GA5BM,OAAO,EA4Bb;IAEL,CAAC,EACkB,CAAA,CACN;MACN,CAAA;GACb,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,OAAO,OAAR;IAAc,SAAA;cACZ,oBAAC,QAAD;KAAQ,YAAW;eAAU,EAAE,eAAe,EAAE,IAAI,eAAe,CAAC;IAAU,CAAA;GAClE,CAAA,EACE,CAAA;EACJ;;AAEpB,CACF;AAEA,sBAAsB,cAAc"}

package/dist/lib/chunk-CommandsTrigger.mjs

@@ -0,0 +1,27 @@
+import { COMMANDS_DIALOG, meta } from "#meta";
+import { LayoutOperation } from "@dxos/app-toolkit";
+import "react";
+import { Button, Icon, useTranslation } from "@dxos/react-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+//#region src/containers/CommandsTrigger/CommandsTrigger.tsx
+var CommandsTrigger = () => {
+	const { invokePromise } = useOperationInvoker();
+	const { t } = useTranslation(meta.profile.key);
+	return /* @__PURE__ */ jsxs(Button, {
+		classNames: "m-1 px-1 lg:px-2",
+		onClick: () => void invokePromise(LayoutOperation.UpdateDialog, {
+			subject: COMMANDS_DIALOG,
+			blockAlign: "start"
+		}),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-description font-normal grow text-start",
+			children: t("command-list-input.placeholder")
+		}), /* @__PURE__ */ jsx(Icon, { icon: "ph--magnifying-glass--regular" })]
+	});
+};
+CommandsTrigger.displayName = "CommandsTrigger";
+//#endregion
+export { CommandsTrigger as default };
+
+//# sourceMappingURL=chunk-CommandsTrigger.mjs.map

package/dist/lib/chunk-CommandsTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-CommandsTrigger.mjs","names":[],"sources":["../../src/containers/CommandsTrigger/CommandsTrigger.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { LayoutOperation } from '@dxos/app-toolkit';\nimport { Button, Icon, useTranslation } from '@dxos/react-ui';\n\nimport { COMMANDS_DIALOG, meta } from '#meta';\n\n// TODO(thure): Refactor to be handled by a more appropriate plugin.\nexport const CommandsTrigger = () => {\n  const { invokePromise } = useOperationInvoker();\n  const { t } = useTranslation(meta.profile.key);\n  return (\n    <Button\n      classNames='m-1 px-1 lg:px-2'\n      onClick={() =>\n        void invokePromise(LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })\n      }\n    >\n      <span className='text-description font-normal grow text-start'>{t('command-list-input.placeholder')}</span>\n      <Icon icon='ph--magnifying-glass--regular' />\n    </Button>\n  );\n};\n\nCommandsTrigger.displayName = 'CommandsTrigger';\n"],"mappings":";;;;;;;AAaA,IAAa,wBAAwB;CACnC,MAAM,EAAE,kBAAkB,oBAAoB;CAC9C,MAAM,EAAE,MAAM,eAAe,KAAK,QAAQ,GAAG;CAC7C,OACE,qBAAC,QAAD;EACE,YAAW;EACX,eACE,KAAK,cAAc,gBAAgB,cAAc;GAAE,SAAS;GAAiB,YAAY;EAAQ,CAAC;YAHtG,CAME,oBAAC,QAAD;GAAM,WAAU;aAAgD,EAAE,gCAAgC;EAAQ,CAAA,GAC1G,oBAAC,MAAD,EAAM,MAAK,gCAAiC,CAAA,CACtC;;AAEZ;AAEA,gBAAgB,cAAc"}

package/dist/lib/chunk-NavTreeDocumentTitle.mjs

@@ -0,0 +1,17 @@
+import { meta } from "#meta";
+import { useEffect } from "react";
+import { toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { osTranslations } from "@dxos/ui-theme";
+//#region src/containers/NavTreeDocumentTitle/NavTreeDocumentTitle.tsx
+var NavTreeDocumentTitle = ({ node }) => {
+	const { t } = useTranslation(meta.profile.key);
+	useEffect(() => {
+		document.title = node ? toLocalizedString(node.properties.label, t) : t("current-app.name", { ns: osTranslations });
+	}, [node?.properties?.label]);
+	return null;
+};
+NavTreeDocumentTitle.displayName = "NavTreeDocumentTitle";
+//#endregion
+export { NavTreeDocumentTitle as default };
+
+//# sourceMappingURL=chunk-NavTreeDocumentTitle.mjs.map

package/dist/lib/chunk-NavTreeDocumentTitle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-NavTreeDocumentTitle.mjs","names":[],"sources":["../../src/containers/NavTreeDocumentTitle/NavTreeDocumentTitle.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\nimport { useEffect } from 'react';\n\nimport { type Node } from '@dxos/app-graph';\nimport { toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { osTranslations } from '@dxos/ui-theme';\n\nimport { meta } from '#meta';\n\nexport const NavTreeDocumentTitle = ({ node }: { node?: Node.Node }) => {\n  const { t } = useTranslation(meta.profile.key);\n  useEffect(() => {\n    document.title = node ? toLocalizedString(node.properties.label, t) : t('current-app.name', { ns: osTranslations });\n  }, [node?.properties?.label]);\n  return null;\n};\n\nNavTreeDocumentTitle.displayName = 'NavTreeDocumentTitle';\n"],"mappings":";;;;;AAWA,IAAa,wBAAwB,EAAE,WAAiC;CACtE,MAAM,EAAE,MAAM,eAAe,KAAK,QAAQ,GAAG;CAC7C,gBAAgB;EACd,SAAS,QAAQ,OAAO,kBAAkB,KAAK,WAAW,OAAO,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,eAAe,CAAC;CACpH,GAAG,CAAC,MAAM,YAAY,KAAK,CAAC;CAC5B,OAAO;AACT;AAEA,qBAAqB,cAAc"}

package/dist/lib/chunk-app-graph-builder.mjs

@@ -0,0 +1,33 @@
+import { Capability } from "@dxos/app-framework";
+import { COMMANDS_DIALOG, meta } from "#meta";
+import { AppCapabilities, LayoutOperation } from "@dxos/app-toolkit";
+import { GraphBuilder, Node, NodeMatcher } from "@dxos/plugin-graph";
+import * as Effect from "effect/Effect";
+import { Operation } from "@dxos/compute";
+//#region src/capabilities/app-graph-builder.ts
+var app_graph_builder_default = Capability.makeModule(Effect.fnUntraced(function* () {
+	const extensions = yield* GraphBuilder.createExtension({
+		id: "root",
+		match: NodeMatcher.whenRoot,
+		actions: () => Effect.succeed([Node.makeAction({
+			id: COMMANDS_DIALOG,
+			data: () => Operation.invoke(LayoutOperation.UpdateDialog, {
+				subject: COMMANDS_DIALOG,
+				blockAlign: "start"
+			}),
+			properties: {
+				label: ["open-commands.label", { ns: meta.profile.key }],
+				icon: "ph--magnifying-glass--regular",
+				keyBinding: {
+					macos: "meta+k",
+					windows: "ctrl+k"
+				}
+			}
+		})])
+	});
+	return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+}));
+//#endregion
+export { app_graph_builder_default as default };
+
+//# sourceMappingURL=chunk-app-graph-builder.mjs.map

package/dist/lib/chunk-app-graph-builder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-app-graph-builder.mjs","names":[],"sources":["../../src/capabilities/app-graph-builder.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability } from '@dxos/app-framework';\nimport { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';\nimport { Operation } from '@dxos/compute';\nimport { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';\n\nimport { COMMANDS_DIALOG, meta } from '#meta';\n\nexport default Capability.makeModule(\n  Effect.fnUntraced(function* () {\n    const extensions = yield* GraphBuilder.createExtension({\n      id: 'root',\n      match: NodeMatcher.whenRoot,\n      actions: () =>\n        Effect.succeed([\n          Node.makeAction({\n            id: COMMANDS_DIALOG,\n            data: () =>\n              Operation.invoke(LayoutOperation.UpdateDialog, {\n                subject: COMMANDS_DIALOG,\n                blockAlign: 'start',\n              }),\n            properties: {\n              label: ['open-commands.label', { ns: meta.profile.key }],\n              icon: 'ph--magnifying-glass--regular',\n              keyBinding: {\n                macos: 'meta+k',\n                windows: 'ctrl+k',\n              },\n            },\n          }),\n        ]),\n    });\n\n    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);\n  }),\n);\n"],"mappings":";;;;;;;AAaA,IAAA,4BAAe,WAAW,WACxB,OAAO,WAAW,aAAa;CAC7B,MAAM,aAAa,OAAO,aAAa,gBAAgB;EACrD,IAAI;EACJ,OAAO,YAAY;EACnB,eACE,OAAO,QAAQ,CACb,KAAK,WAAW;GACd,IAAI;GACJ,YACE,UAAU,OAAO,gBAAgB,cAAc;IAC7C,SAAS;IACT,YAAY;GACd,CAAC;GACH,YAAY;IACV,OAAO,CAAC,uBAAuB,EAAE,IAAI,KAAK,QAAQ,IAAI,CAAC;IACvD,MAAM;IACN,YAAY;KACV,OAAO;KACP,SAAS;IACX;GACF;EACF,CAAC,CACH,CAAC;CACL,CAAC;CAED,OAAO,WAAW,YAAY,gBAAgB,iBAAiB,UAAU;AAC3E,CAAC,CACH"}

package/dist/lib/chunk-expose.mjs

@@ -0,0 +1,31 @@
+import { r as State } from "./chunk-types.mjs";
+import { Capability } from "@dxos/app-framework";
+import { AppCapabilities, LayoutOperation } from "@dxos/app-toolkit";
+import { Graph } from "@dxos/plugin-graph";
+import * as Effect from "effect/Effect";
+import * as Option from "effect/Option";
+import { Operation } from "@dxos/compute";
+import { log } from "@dxos/log";
+import { Attention } from "@dxos/react-ui-attention";
+//#region src/operations/expose.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-navtree/src/operations/expose.ts";
+var handler = LayoutOperation.Expose.pipe(Operation.withHandler(Effect.fnUntraced(function* ({ subject }) {
+	const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
+	const { getItem, setItem } = yield* Capability.get(State);
+	const prefixes = Attention.expandAttendableId(subject);
+	for (const qualifiedId of prefixes) {
+		Graph.expand(graph, qualifiedId, "child");
+		const treePath = prefixes.slice(0, prefixes.indexOf(qualifiedId) + 1);
+		if (!getItem(treePath).open) setItem(treePath, "open", true);
+	}
+	if (Option.isNone(Graph.getNode(graph, subject))) log("Node not found after expansion", { subject }, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file,
+		L: 36,
+		S: this
+	});
+})));
+//#endregion
+export { handler as default };
+
+//# sourceMappingURL=chunk-expose.mjs.map

package/dist/lib/chunk-expose.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-expose.mjs","names":[],"sources":["../../src/operations/expose.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\nimport * as Option from 'effect/Option';\n\nimport { Capability } from '@dxos/app-framework';\nimport { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';\nimport { Operation } from '@dxos/compute';\nimport { log } from '@dxos/log';\nimport { Graph } from '@dxos/plugin-graph';\nimport { Attention } from '@dxos/react-ui-attention';\n\nimport { NavTreeCapabilities } from '../types';\n\nconst handler: Operation.WithHandler<typeof LayoutOperation.Expose> = LayoutOperation.Expose.pipe(\n  Operation.withHandler(\n    Effect.fnUntraced(function* ({ subject }) {\n      const { graph } = yield* Capability.get(AppCapabilities.AppGraph);\n      const { getItem, setItem } = yield* Capability.get(NavTreeCapabilities.State);\n\n      const prefixes = Attention.expandAttendableId(subject);\n\n      for (const qualifiedId of prefixes) {\n        Graph.expand(graph, qualifiedId, 'child');\n\n        const treePath = prefixes.slice(0, prefixes.indexOf(qualifiedId) + 1);\n        const state = getItem(treePath);\n        if (!state.open) {\n          setItem(treePath, 'open', true);\n        }\n      }\n\n      if (Option.isNone(Graph.getNode(graph, subject))) {\n        log('Node not found after expansion', { subject });\n      }\n    }),\n  ),\n);\n\nexport default handler;\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,UAAgE,gBAAgB,OAAO,KAC3F,UAAU,YACR,OAAO,WAAW,WAAW,EAAE,WAAW;CACxC,MAAM,EAAE,UAAU,OAAO,WAAW,IAAI,gBAAgB,QAAQ;CAChE,MAAM,EAAE,SAAS,YAAY,OAAO,WAAW,IAAI,KAAyB;CAE5E,MAAM,WAAW,UAAU,mBAAmB,OAAO;CAErD,KAAK,MAAM,eAAe,UAAU;EAClC,MAAM,OAAO,OAAO,aAAa,OAAO;EAExC,MAAM,WAAW,SAAS,MAAM,GAAG,SAAS,QAAQ,WAAW,IAAI,CAAC;EAEpE,IAAI,CADU,QAAQ,QACjB,CAAA,CAAM,MACT,QAAQ,UAAU,QAAQ,IAAI;CAElC;CAEA,IAAI,OAAO,OAAO,MAAM,QAAQ,OAAO,OAAO,CAAC,GAC7C,IAAI,kCAAkC,EAAE,QAAQ,GAAA;EAAA,YAAA;EAAA,GAAA;EAAA,GAAA;EAAA,GAAA;CAAA,CAAC;AAErD,CAAC,CACH,CACF"}

package/dist/lib/chunk-keyboard.mjs

@@ -0,0 +1,49 @@
+import { Capabilities, Capability } from "@dxos/app-framework";
+import { getHostPlatform } from "@dxos/util";
+import { KEY_BINDING } from "#meta";
+import { AppCapabilities } from "@dxos/app-toolkit";
+import { Graph, Node, runAction } from "@dxos/plugin-graph";
+import * as Effect from "effect/Effect";
+import { debounce } from "@dxos/async";
+import { Keyboard } from "@dxos/keyboard";
+//#region src/capabilities/keyboard.ts
+var keyboard_default = Capability.makeModule(Effect.fnUntraced(function* () {
+	const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
+	const invoker = yield* Capability.get(Capabilities.OperationInvoker);
+	const pluginContext = yield* Capability.Service;
+	const visitor = (node, path) => {
+		let shortcut;
+		if (typeof node.properties.keyBinding === "object") {
+			const availablePlatforms = Object.keys(node.properties.keyBinding);
+			const platform = getHostPlatform();
+			shortcut = availablePlatforms.includes(platform) ? node.properties.keyBinding[platform] : platform === "ios" ? node.properties.keyBinding.macos : platform === "linux" || platform === "unknown" ? node.properties.keyBinding.windows : void 0;
+		} else shortcut = node.properties.keyBinding;
+		if (shortcut && Node.isAction(node)) Keyboard.singleton.getContext(path.slice(0, -1).join("/")).bind({
+			shortcut,
+			handler: () => void runAction(invoker, pluginContext, node, {
+				parent: node,
+				caller: KEY_BINDING
+			}),
+			data: node.properties.label
+		});
+	};
+	const syncBindings = () => {
+		Graph.traverse(graph, {
+			relation: ["child", "action"],
+			visitor
+		});
+	};
+	const eventHandler = debounce(syncBindings, 500);
+	const unsubscribe = graph.onNodeChanged.on(eventHandler);
+	syncBindings();
+	Keyboard.singleton.initialize();
+	Keyboard.singleton.setCurrentContext(Node.RootId);
+	return Capability.contributes(Capabilities.Null, null, () => Effect.sync(() => {
+		unsubscribe();
+		Keyboard.singleton.destroy();
+	}));
+}));
+//#endregion
+export { keyboard_default as default };
+
+//# sourceMappingURL=chunk-keyboard.mjs.map

package/dist/lib/chunk-keyboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-keyboard.mjs","names":[],"sources":["../../src/capabilities/keyboard.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capabilities, Capability } from '@dxos/app-framework';\nimport { AppCapabilities } from '@dxos/app-toolkit';\nimport { debounce } from '@dxos/async';\nimport { Keyboard } from '@dxos/keyboard';\nimport { Graph, Node, runAction } from '@dxos/plugin-graph';\nimport { getHostPlatform } from '@dxos/util';\n\nimport { KEY_BINDING } from '#meta';\n\nexport default Capability.makeModule(\n  Effect.fnUntraced(function* () {\n    const { graph } = yield* Capability.get(AppCapabilities.AppGraph);\n    const invoker = yield* Capability.get(Capabilities.OperationInvoker);\n    const pluginContext = yield* Capability.Service;\n\n    // TODO(wittjosiah): Factor out.\n    // TODO(wittjosiah): Handle removal of actions.\n    const visitor = (node: Node.Node, path: string[]) => {\n      let shortcut: string | undefined;\n      if (typeof node.properties.keyBinding === 'object') {\n        const availablePlatforms = Object.keys(node.properties.keyBinding);\n        const platform = getHostPlatform();\n        shortcut = availablePlatforms.includes(platform)\n          ? node.properties.keyBinding[platform]\n          : platform === 'ios'\n            ? node.properties.keyBinding.macos // Fallback to macos if ios-specific bindings not provided.\n            : platform === 'linux' || platform === 'unknown'\n              ? node.properties.keyBinding.windows // Fallback to windows if platform-specific bindings not provided.\n              : undefined;\n      } else {\n        shortcut = node.properties.keyBinding;\n      }\n\n      if (shortcut && Node.isAction(node)) {\n        Keyboard.singleton.getContext(path.slice(0, -1).join('/')).bind({\n          shortcut,\n          handler: () => void runAction(invoker, pluginContext, node, { parent: node, caller: KEY_BINDING }),\n          data: node.properties.label,\n        });\n      }\n    };\n\n    const syncBindings = () => {\n      Graph.traverse(graph, { relation: ['child', 'action'], visitor });\n    };\n\n    const eventHandler = debounce(syncBindings, 500);\n\n    const unsubscribe = graph.onNodeChanged.on(eventHandler);\n    syncBindings();\n\n    // TODO(burdon): Create context and plugin.\n    Keyboard.singleton.initialize();\n    Keyboard.singleton.setCurrentContext(Node.RootId);\n\n    return Capability.contributes(Capabilities.Null, null, () =>\n      Effect.sync(() => {\n        unsubscribe();\n        Keyboard.singleton.destroy();\n      }),\n    );\n  }),\n);\n"],"mappings":";;;;;;;;;AAeA,IAAA,mBAAe,WAAW,WACxB,OAAO,WAAW,aAAa;CAC7B,MAAM,EAAE,UAAU,OAAO,WAAW,IAAI,gBAAgB,QAAQ;CAChE,MAAM,UAAU,OAAO,WAAW,IAAI,aAAa,gBAAgB;CACnE,MAAM,gBAAgB,OAAO,WAAW;CAIxC,MAAM,WAAW,MAAiB,SAAmB;EACnD,IAAI;EACJ,IAAI,OAAO,KAAK,WAAW,eAAe,UAAU;GAClD,MAAM,qBAAqB,OAAO,KAAK,KAAK,WAAW,UAAU;GACjE,MAAM,WAAW,gBAAgB;GACjC,WAAW,mBAAmB,SAAS,QAAQ,IAC3C,KAAK,WAAW,WAAW,YAC3B,aAAa,QACX,KAAK,WAAW,WAAW,QAC3B,aAAa,WAAW,aAAa,YACnC,KAAK,WAAW,WAAW,UAC3B,KAAA;EACV,OACE,WAAW,KAAK,WAAW;EAG7B,IAAI,YAAY,KAAK,SAAS,IAAI,GAChC,SAAS,UAAU,WAAW,KAAK,MAAM,GAAG,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK;GAC9D;GACA,eAAe,KAAK,UAAU,SAAS,eAAe,MAAM;IAAE,QAAQ;IAAM,QAAQ;GAAY,CAAC;GACjG,MAAM,KAAK,WAAW;EACxB,CAAC;CAEL;CAEA,MAAM,qBAAqB;EACzB,MAAM,SAAS,OAAO;GAAE,UAAU,CAAC,SAAS,QAAQ;GAAG;EAAQ,CAAC;CAClE;CAEA,MAAM,eAAe,SAAS,cAAc,GAAG;CAE/C,MAAM,cAAc,MAAM,cAAc,GAAG,YAAY;CACvD,aAAa;CAGb,SAAS,UAAU,WAAW;CAC9B,SAAS,UAAU,kBAAkB,KAAK,MAAM;CAEhD,OAAO,WAAW,YAAY,aAAa,MAAM,YAC/C,OAAO,WAAW;EAChB,YAAY;EACZ,SAAS,UAAU,QAAQ;CAC7B,CAAC,CACH;AACF,CAAC,CACH"}

package/dist/lib/{neutral/chunk-IRQMJLRY.mjs → chunk-meta.mjs}

@@ -1,16 +1,13 @@
-// src/meta.ts
 import { Plugin } from "@dxos/app-framework";
 import { DXN } from "@dxos/keys";
-
-// dx.config.ts
 import { Config2 } from "@dxos/app-framework/config";
 import { trim } from "@dxos/util";
-var dx_config_default = Config2.make({
-  plugin: {
-    key: "org.dxos.plugin.navtree",
-    name: "Navtree",
-    author: "DXOS",
-    description: trim`
+//#region dx.config.ts
+var dx_config_default = Config2.make({ plugin: {
+	key: "org.dxos.plugin.navtree",
+	name: "Navtree",
+	author: "DXOS",
+	description: trim`
       NavTreePlugin renders the application graph as a collapsible hierarchical tree in the Composer sidebar.
       It manages workspace tabs at the root level and provides expand/collapse navigation for spaces, folders,
       and objects, with open/current state persisted to localStorage across sessions.
@@ -25,21 +22,15 @@ var dx_config_default = Config2.make({
       A commands dialog surfaces all discoverable graph actions as a searchable palette, making it the primary
       keyboard-first entry point for power users.
     `,
-    spec: "PLUGIN.mdl",
-    tags: [
-      "system"
-    ]
-  }
-});
-
-// src/meta.ts
+	spec: "PLUGIN.mdl",
+	tags: ["system"]
+} });
+//#endregion
+//#region src/meta.ts
 var meta = Plugin.getMetaFromConfig(dx_config_default);
 var KEY_BINDING = "KeyBinding";
 var COMMANDS_DIALOG = DXN.make(`${meta.profile.key}.commandsDialog`);
+//#endregion
+export { KEY_BINDING as n, meta as r, COMMANDS_DIALOG as t };
 
-export {
-  meta,
-  KEY_BINDING,
-  COMMANDS_DIALOG
-};
-//# sourceMappingURL=chunk-IRQMJLRY.mjs.map
+//# sourceMappingURL=chunk-meta.mjs.map

package/dist/lib/chunk-meta.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-meta.mjs","names":[],"sources":["../../dx.config.ts","../../src/meta.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Config2 } from '@dxos/app-framework/config';\nimport { trim } from '@dxos/util';\n\nexport default Config2.make({\n  plugin: {\n    key: 'org.dxos.plugin.navtree',\n    name: 'Navtree',\n    author: 'DXOS',\n    description: trim`\n      NavTreePlugin renders the application graph as a collapsible hierarchical tree in the Composer sidebar.\n      It manages workspace tabs at the root level and provides expand/collapse navigation for spaces, folders,\n      and objects, with open/current state persisted to localStorage across sessions.\n\n      The plugin wires drag-and-drop rearrangement and cross-parent transfer of tree items via Pragmatic DnD,\n      and registers graph-action keyboard shortcuts (including the ⌘K / Ctrl+K command palette) through a\n      global Keyboard singleton that tracks context as the user navigates.\n\n      An operation handler for LayoutOperation.Expose expands ancestor paths on demand so that any\n      programmatically activated item is scrolled into view in the tree.\n\n      A commands dialog surfaces all discoverable graph actions as a searchable palette, making it the primary\n      keyboard-first entry point for power users.\n    `,\n    spec: 'PLUGIN.mdl',\n    tags: ['system'],\n  },\n});\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\nimport { DXN } from '@dxos/keys';\n\nimport config from '../dx.config';\n\nexport const meta = Plugin.getMetaFromConfig(config);\n\n// TODO(wittjosiah): Factor out.\nexport const KEY_BINDING = 'KeyBinding';\n// TODO(wittjosiah): Factor out.\nexport const COMMANDS_DIALOG = DXN.make(`${meta.profile.key}.commandsDialog`);\n"],"mappings":";;;;;AAOA,IAAA,oBAAe,QAAQ,KAAK,EAC1B,QAAQ;CACN,KAAK;CACL,MAAM;CACN,QAAQ;CACR,aAAa,IAAI;;;;;;;;;;;;;;;CAejB,MAAM;CACN,MAAM,CAAC,QAAQ;AACjB,EACF,CAAC;;;ACrBD,IAAa,OAAO,OAAO,kBAAkB,iBAAM;AAGnD,IAAa,cAAc;AAE3B,IAAa,kBAAkB,IAAI,KAAK,GAAG,KAAK,QAAQ,IAAI,gBAAgB"}

package/dist/lib/chunk-operation-handler.mjs

@@ -0,0 +1,11 @@
+import { Capabilities, Capability } from "@dxos/app-framework";
+import * as Effect from "effect/Effect";
+import { NavTreeOperationHandlerSet } from "#operations";
+//#region src/capabilities/operation-handler.ts
+var operation_handler_default = Capability.makeModule(Effect.fnUntraced(function* () {
+	return Capability.contributes(Capabilities.OperationHandler, NavTreeOperationHandlerSet);
+}));
+//#endregion
+export { operation_handler_default as default };
+
+//# sourceMappingURL=chunk-operation-handler.mjs.map

package/dist/lib/chunk-operation-handler.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-operation-handler.mjs","names":[],"sources":["../../src/capabilities/operation-handler.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capabilities, Capability } from '@dxos/app-framework';\nimport type { OperationHandlerSet } from '@dxos/compute';\n\nimport { NavTreeOperationHandlerSet } from '#operations';\n\nexport default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(\n  Effect.fnUntraced(function* () {\n    return Capability.contributes(Capabilities.OperationHandler, NavTreeOperationHandlerSet);\n  }),\n);\n"],"mappings":";;;;AAWA,IAAA,4BAAe,WAAW,WACxB,OAAO,WAAW,aAAa;CAC7B,OAAO,WAAW,YAAY,aAAa,kBAAkB,0BAA0B;AACzF,CAAC,CACH"}

package/dist/lib/chunk-react-surface.mjs

@@ -0,0 +1,46 @@
+import { Capabilities, Capability } from "@dxos/app-framework";
+import { Position } from "@dxos/util";
+import { COMMANDS_DIALOG } from "#meta";
+import { Node } from "@dxos/plugin-graph";
+import * as Effect from "effect/Effect";
+import { AppSurface } from "@dxos/app-toolkit/ui";
+import { Surface } from "@dxos/app-framework/ui";
+import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from "#containers";
+//#region src/capabilities/react-surface.ts
+var react_surface_default = Capability.makeModule(() => Effect.succeed(Capability.contributes(Capabilities.ReactSurface, [
+	Surface.create({
+		id: COMMANDS_DIALOG,
+		filter: AppSurface.component(AppSurface.Dialog, COMMANDS_DIALOG),
+		component: CommandsDialogContent,
+		props: ({ data: { props }, ref }) => ({
+			...props,
+			ref
+		})
+	}),
+	Surface.create({
+		id: "navigation",
+		filter: Surface.makeFilter(AppSurface.Navigation),
+		component: NavTreeContainer,
+		props: ({ data: { current, popoverAnchorId }, ref }) => ({
+			tab: current,
+			popoverAnchorId,
+			ref
+		})
+	}),
+	Surface.create({
+		id: "documentTitle",
+		filter: Surface.makeFilter(AppSurface.DocumentTitle),
+		component: NavTreeDocumentTitle,
+		props: ({ data: { subject } }) => ({ node: Node.isGraphNode(subject) ? subject : void 0 })
+	}),
+	Surface.create({
+		id: "searchInput",
+		filter: Surface.makeFilter(AppSurface.SearchInput),
+		position: Position.last,
+		component: CommandsTrigger
+	})
+])));
+//#endregion
+export { react_surface_default as default };
+
+//# sourceMappingURL=chunk-react-surface.mjs.map

package/dist/lib/chunk-react-surface.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-react-surface.mjs","names":[],"sources":["../../src/capabilities/react-surface.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\nimport { type ComponentProps } from 'react';\n\nimport { Capabilities, Capability } from '@dxos/app-framework';\nimport { Surface } from '@dxos/app-framework/ui';\nimport { AppSurface } from '@dxos/app-toolkit/ui';\nimport { Node } from '@dxos/plugin-graph';\nimport { Position } from '@dxos/util';\n\nimport { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '#containers';\nimport { COMMANDS_DIALOG } from '#meta';\n\nexport default Capability.makeModule(() =>\n  Effect.succeed(\n    Capability.contributes(Capabilities.ReactSurface, [\n      Surface.create({\n        id: COMMANDS_DIALOG,\n        filter: AppSurface.component<ComponentProps<typeof CommandsDialogContent>>(AppSurface.Dialog, COMMANDS_DIALOG),\n        component: CommandsDialogContent,\n        props: ({ data: { props }, ref }) => ({ ...props, ref }),\n      }),\n      Surface.create({\n        id: 'navigation',\n        filter: Surface.makeFilter(AppSurface.Navigation),\n        component: NavTreeContainer,\n        props: ({ data: { current, popoverAnchorId }, ref }) => ({ tab: current, popoverAnchorId, ref }),\n      }),\n      Surface.create({\n        id: 'documentTitle',\n        filter: Surface.makeFilter(AppSurface.DocumentTitle),\n        component: NavTreeDocumentTitle,\n        props: ({ data: { subject } }) => ({ node: Node.isGraphNode(subject) ? subject : undefined }),\n      }),\n      Surface.create({\n        id: 'searchInput',\n        filter: Surface.makeFilter(AppSurface.SearchInput),\n        position: Position.last,\n        component: CommandsTrigger,\n      }),\n    ]),\n  ),\n);\n"],"mappings":";;;;;;;;;AAgBA,IAAA,wBAAe,WAAW,iBACxB,OAAO,QACL,WAAW,YAAY,aAAa,cAAc;CAChD,QAAQ,OAAO;EACb,IAAI;EACJ,QAAQ,WAAW,UAAwD,WAAW,QAAQ,eAAe;EAC7G,WAAW;EACX,QAAQ,EAAE,MAAM,EAAE,SAAS,WAAW;GAAE,GAAG;GAAO;EAAI;CACxD,CAAC;CACD,QAAQ,OAAO;EACb,IAAI;EACJ,QAAQ,QAAQ,WAAW,WAAW,UAAU;EAChD,WAAW;EACX,QAAQ,EAAE,MAAM,EAAE,SAAS,mBAAmB,WAAW;GAAE,KAAK;GAAS;GAAiB;EAAI;CAChG,CAAC;CACD,QAAQ,OAAO;EACb,IAAI;EACJ,QAAQ,QAAQ,WAAW,WAAW,aAAa;EACnD,WAAW;EACX,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,KAAK,YAAY,OAAO,IAAI,UAAU,KAAA,EAAU;CAC7F,CAAC;CACD,QAAQ,OAAO;EACb,IAAI;EACJ,QAAQ,QAAQ,WAAW,WAAW,WAAW;EACjD,UAAU,SAAS;EACnB,WAAW;CACb,CAAC;AACH,CAAC,CACH,CACF"}