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>

web/layout.ts

@@ -3,16 +3,15 @@ import type { LayoutNode } from 'officerdev';
 /**
  * A nav down the left, and beside it the pair that does the work.
  *
- * ── Why the preview and the editor are a GROUP ──
+ * ── Two children, not three ──
  *
- * They were three siblings — nav, preview, editor — and the nesting is the whole difference. With three
- * in a row every divider is between two of them, so widening the editor took from the preview and
- * dragging the nav re-proportioned all three: three panels that can only be sized against each other.
+ * The preview and its editor are a WORKSPACE INSIDE A PANEL — see WorkPanel — rather than two more
+ * children here. Nesting them as a group was tried first and looked identical: a horizontal group in a
+ * horizontal group renders three columns, because that is what it is, and all the nesting bought was
+ * which divider moved what.
  *
- * Nested, the outer divider moves the nav against THE WORK, and the inner one splits the work between
- * looking and changing. Those are the two questions somebody actually has — "give me more room to
- * work" and "I need more of the controls right now" — and each is now one drag that leaves the other
- * answer alone.
+ * A panel is a real container. The pair has its own chrome, its own dividers and its own persisted
+ * sizes, and this file has two children — so the shape on screen is the shape in the file.
  *
  * ── The nav is the narrow one ──
  *
@@ -35,17 +34,6 @@ export const defaultLayout: LayoutNode = {
   direction: 'horizontal',
   children: [
     { node: { type: 'panel', id: 'fofos-admin-nav', appType: 'fofos-admin-nav' }, size: 22 },
-    {
-      node: {
-        type: 'group',
-        id: 'fofos-admin-work',
-        direction: 'horizontal',
-        children: [
-          { node: { type: 'panel', id: 'fofos-admin-detail', appType: 'fofos-admin-detail' }, size: 70 },
-          { node: { type: 'panel', id: 'fofos-admin-editor', appType: 'fofos-admin-editor' }, size: 30 },
-        ],
-      },
-      size: 78,
-    },
+    { node: { type: 'panel', id: 'fofos-admin-work', appType: 'fofos-admin-work' }, size: 78 },
   ],
 };