the preview and the editor are a workspace inside a panel

`1 | [1 | 1]`, and the brackets are a real container this time.

Nesting them as a GROUP was the first attempt and looked identical — a horizontal group inside a
horizontal group renders three columns, because that is what it is. All it bought was which divider
moved what, which is invisible until you drag one.

So the pair is a panel whose component hosts its own WorkspaceView, the way DashboardPreview does. It
has its own chrome, its own divider and its own persisted sizes, and the root layout has two children
rather than three: the shape on screen is now the shape in the file.

`useAuthoredLayout` rather than `useDashboardState`, and its own key beside the root's. The structure is
the author's and comes from source every render; only sizes are the user's. Sharing one key would have
the inner and outer trees persisting over each other's sizes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-09-01 03:02:38 +01:00
co-authored by Claude Opus 5
parent 269b6004e4
commit f24d583e67
3 changed files with 77 additions and 21 deletions
+16 -1
View File
@@ -1,9 +1,10 @@
import type { AppRegistryMeta } from 'officerdev';
import { List, PanelRight, SlidersHorizontal } from 'lucide-react';
import { Columns2, List, PanelRight, SlidersHorizontal } from 'lucide-react';
import { NavPanel } from './NavPanel';
import { DetailPanel } from './DetailPanel';
import { DetailHeader } from './DetailHeader';
import { EditorPanel } from './EditorPanel';
import { WorkPanel } from './WorkPanel';
/**
* Three panels: a nav, whatever it selects, and where an editor opens.
@@ -33,6 +34,20 @@ export const appRegistryMetas: AppRegistryMeta[] = [
header: DetailHeader,
availableOnPanel: false,
},
{
/*
The container the root layout points at: a workspace holding the preview and its editor.
Registered like any other panel because the outer WorkspaceView resolves by appType, and listed in
the root's allow-list. The two it contains stay registered too — the INNER workspace resolves them
the same way.
*/
key: 'fofos-admin-work',
name: 'Work',
icon: Columns2,
component: WorkPanel,
availableOnPanel: false,
},
{
key: 'fofos-admin-editor',
name: 'Editor',