@marktiderman/genesis-ui 2.14.0 → 2.15.0

package/SKILL.md

@@ -134,6 +134,7 @@ and use it the same way.
 | A whole CRUD list page over a resource                        | `ResourcePage`                                                                     | `/data`                                                           |
 | Record detail side panel                                      | `DetailPanel`                                                                      | `/data`                                                           |
 | Dashboard / settings / form / detail page shape               | `DashboardPage`, `SettingsPage`, `FormPage`, `DetailPage`                          | `/dashboard-page`, `/settings-page`, `/form-page`, `/detail-page` |
+| A builder's outline, editor and live preview columns          | `BuilderLayout` (no tabs, rail or header: those are the shell's)                   | `/builder-layout`                                                 |
 | KPI tile                                                      | `StatCard`                                                                         | `/data`                                                           |
 | The page around one publishable thing (a form, a course, a lesson): header, readiness chip, headline numbers, summary cards, follow-ups, settings with jump links, Share | `ResourceHeader`, `ReadinessChip`, `HeadlineNumbers`, `SummaryCard`, `FollowUpList`, `ResponsesToolbar`, `ResourceSettingsPage`, `SettingsSection`, `ShareDialog` (+ `readinessOf`, `dayLabel`, `prefilledUrl` on the server) | `/resource` (`/resource/rules`)                                   |
 | Table cells: dates, numbers, money, badges, links, thumbnails | `DateCell`, `NumberCell`, `CurrencyCell`, `BadgeCell`, `LinkCell`, `ThumbnailCell` | `/data`                                                           |
@@ -148,6 +149,37 @@ and use it the same way.
 | Persisted page size / density                                 | `useViewSettings`                                                                  | `/hooks/use-view-settings`                                        |
 | Client-side links, navigate, URL filters on your router       | `ReactRouterLink` / `TanStackRouterLink` and their `use…Navigate`, `use…SearchParams`, `use…ActivePath` hooks | `/router/react-router`, `/router/tanstack-router`                 |
 
+## Builder columns
+
+`BuilderLayout` lays out a builder (forms, courses, lessons): `outline` on the left, `editor` in
+the centre (the only required slot), `preview` on the right. Container queries, so it follows
+the space it is given: three columns from a 56rem container (13rem / editor / 20rem), wider side
+columns from 76rem (16rem / editor / 24.5rem), the preview under the editor below 56rem, and
+everything stacked below 34rem. Outline and editor alone: 13rem from 34rem, 16rem from 48rem.
+The preview keeps its place in the tree, so swapping `editor` (another section, another selected
+item) never remounts it; `previewHidden` hides it without unmounting and gives its column to the
+editor. `sticky` pins the outline and/or preview (`{ preview: true }` for one), `scrollSticky`
+gives a pinned column its own scroll, and `outlineLabel` / `previewLabel` make them `nav` /
+`aside` landmarks. `outlineProps`, `editorProps` and `previewProps` pass a class or test id to
+each wrapper.
+
+It does not own tabs, the app rail or a header. A builder's sections go in `useAppShellSubNav`
+(or your own tabs inside `editor`), its title, status and actions in `AppShellPageHeader`. To
+keep one preview across sections, render one `BuilderLayout` around them and swap `editor`;
+nest an outline-and-editor `BuilderLayout` inside a section that has an outline (genesis-forms-builder
+does both).
+
+```tsx
+<BuilderLayout
+  outline={<StepList />}
+  outlineLabel="Outline"
+  editor={<StepEditor key={selectedId} />}
+  preview={<LivePreview />}
+  previewLabel="Preview"
+  sticky
+/>
+```
+
 ## Import rule
 
 Import by subpath, never the root barrel in app code: `@marktiderman/genesis-ui/button`,

package/dist/{chunk-5OFA2CQR.js → chunk-DTQHAZWN.js}

@@ -4,10 +4,10 @@ import { Collapsible, CollapsibleContent } from './chunk-B2GIBUQD.js';
 import { Badge } from './chunk-NPNADZHM.js';
 import { Tooltip } from './chunk-G5YKBPBF.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-22XB3Q6H.js';
+import { Button } from './chunk-NWSCYLPT.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './chunk-QJ6P2DW6.js';
 import { Switch } from './chunk-27ELYTGE.js';
 import { Label } from './chunk-F47U5KNW.js';
-import { Button } from './chunk-NWSCYLPT.js';
 import { cn } from './chunk-NZ5WBA4R.js';
 import { isPathActive, resolveNavigation, DefaultLink } from './chunk-J45FHL7D.js';
 import { createContext, useId, useState, useEffect, useMemo, useCallback, useContext, useRef, useLayoutEffect, useSyncExternalStore } from 'react';
@@ -1855,5 +1855,5 @@ function AppShell({
 }
 
 export { AppShell, AppShellPageHeader, AppShellSubNavEnd, PageHeader, SubNavTabs, useAppShellSubNav };
-//# sourceMappingURL=chunk-5OFA2CQR.js.map
-//# sourceMappingURL=chunk-5OFA2CQR.js.map
+//# sourceMappingURL=chunk-DTQHAZWN.js.map
+//# sourceMappingURL=chunk-DTQHAZWN.js.map