T-601N-pane-content-registry

Status: closed/done · Impact: medium · Complexity: medium

Goal

The layout-hosted pane shell needs a way for a routed page to fill the secondary and aux panes it cannot reach. A page rendered through NuxtPage is a descendant of the layout, and Vue slots flow only ancestor to child, so the page cannot supply the layout’s named slots. A provide/inject registry closes that gap and unblocks T-E078-layout-host-pane-shell.

Today

Location	Role today
packages/ts/shell/app/	The @determined/shell Nuxt layer (chrome, registries, keybindings). No pane content-injection mechanism; the one in @sksizer/shells was removed when that package was collapsed.
packages/ts/panes/	@sksizer/panes — the dumb PaneGroup primitive with named-region slots. No cross-boundary content mechanism.

Proposed

@determined/shell provides a reactive registry above the routed page. A PaneContent component placed inside a page registers its default slot’s render function into the registry on mount and clears it on unmount; a PaneOutlet rendered by the layout displays whatever the registry holds for a region. The registered function closes over the page’s setup scope, so selection-driven content (aux reacting to main) stays reactive with no shared store.

Approach

1. Add usePaneRegistry.ts: a providePaneRegistry() that creates and provides a reactive Record<region, renderFn>, plus the injection key.
2. Add PaneOutlet.vue (prop region): injects the registry and renders the region’s registered function when present.
3. Add PaneContent.vue (prop region): on mount sets the region’s entry to its default-slot render function; clears on unmount; renders nothing in place.
4. Prove it with a story or shell test: a page fills aux, and it reacts to the page’s local state with no shared store.

Files to touch

Location	Kind	Change
packages/ts/shell/app/composables/usePaneRegistry.ts	new	provide/inject registry + injection key
packages/ts/shell/app/components/PaneOutlet.vue	new	renders a region’s registered content
packages/ts/shell/app/components/PaneContent.vue	new	registers a page’s content into a region

Acceptance criteria

• AC-1: A descendant component fills a named region via PaneContent, and a layout-level PaneOutlet renders it across the page/layout boundary.
• AC-2: Registered content updates reactively when the registering component’s local state changes — no shared store or prop threading.
• AC-3: Unmounting the PaneContent (navigating away) clears the region.

Out of scope

• Composing these into the layout / DAppShell — T-E078-layout-host-pane-shell.
• Keyboard wiring and persistence — T-IMOO-pane-toggle-keybindings, T-ARPY-persist-pane-state.
• Any @sksizer/panes change — the registry lives in the shell layer.

---

← Back to Tasks