themelia-ui 1.0.3 → 2.0.0

package/.agents/skills/themelia-ui/references/components/base--overlay.md

@@ -117,12 +117,8 @@ Kind: interface.
 
 Kind: callable.
 
-Wraps children so any button inside dismisses the overlay.
-
-The verbose form — `<OverlayClose render={<Button/>}/>` per action — is
-still available and is the right tool when only SOME footer actions should close. This
-exists because "every button in this footer closes" is the common case, and repeating
-the wrapper per button is where the wiring gets forgotten.
+Wraps children so any button inside dismisses the overlay. When only some actions
+should close, use `<OverlayClose render={<Button />} />` per action.
 
 ```text
 ({ children, ...props }: React.ComponentProps<"div">) => React.JSX.Element
@@ -148,11 +144,8 @@ React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttribute
 
 Kind: type.
 
-The gap between the surface and the viewport edges.
-
-`false` is flush — a panel welded to the side, which is what a sheet has always been.
-`true` uses the kit's gap, and any CSS length sets your own. Inset, the panel rounds
-all four corners and reads as a dialog anchored to a corner rather than an edge.
+The gap to the viewport edges: `false` is flush, `true` the kit's gap, or any CSS length.
+An inset panel rounds all four corners.
 
 ```text
 boolean | (string & {})
@@ -162,11 +155,7 @@ boolean | (string & {})
 
 Kind: type.
 
-How much of the axis it runs ALONG — the height of a side panel.
-
-`full` welds it to both ends. Anything less detaches it, and the panel centres on that
-axis: `95%` is the tall-dialog-from-the-corner shape, still showing the page above and
-below it.
+Along-axis extent (a side panel's height). `full` welds it to both ends; less centres it.
 
 ```text
 "full" | (string & {})
@@ -176,11 +165,8 @@ below it.
 
 Kind: type.
 
-How much of the page the surface takes hostage.
-
 `modal` — focus trap, scrim, inert page, scroll lock.
-`trap-focus` — focus stays inside, page keeps its scroll and pointer events. For a
-  panel you work beside: an inspector, a live filter rail.
+`trap-focus` — focus stays inside; the page keeps scroll and pointer events (an inspector).
 `non-modal` — no trap, no scrim, page fully interactive.
 
 ```text
@@ -212,8 +198,7 @@ Kind: interface.
 
 Kind: type.
 
-How much of the CROSS axis an edge-placed surface takes — the width of a side panel,
-the height of a top one. A named step, or any CSS length.
+Cross-axis extent of an edge-placed surface (a side panel's width): a step or any CSS length.
 
 ```text
 "sm" | "md" | "lg" | "full" | (string & {})
@@ -255,7 +240,7 @@ Kind: callable.
 
 ## Preview recipes
 
-Preview route: Overlay — `/overlay`
+Preview route: Overlay, dialog & sheet — `/overlay`
 
 ### placement
 
@@ -272,13 +257,10 @@ Preview route: Overlay — `/overlay`
 ### modality
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<OverlayContent placement="inline-end" modality="trap-focus" />
-```
-
-### size, length and inset
+<OverlayContent placement="inline-end" modality="non-modal" />
 
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<OverlayContent placement="inline-end" size="lg" length="95%" inset />
+{/* the same, as the preset */}
+<SheetContent modality="non-modal" />
 ```
 
 ### dismissal
@@ -294,3 +276,110 @@ Preview route: Overlay — `/overlay`
   <OverlayContent>…</OverlayContent>
 </Overlay>
 ```
+
+### Header, body and footer
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<Overlay>
+  <OverlayTrigger render={<Button>Open</Button>} />
+  <OverlayContent>
+    <OverlayHeader><OverlayTitle>Title</OverlayTitle></OverlayHeader>
+    <OverlayBody>…</OverlayBody>
+    <OverlayFooter>
+      <OverlayDismissArea>
+        <Button>Cancel</Button><Button>Save</Button>
+      </OverlayDismissArea>
+    </OverlayFooter>
+  </OverlayContent>
+</Overlay>
+
+{/* or per action, when only some of them close: */}
+<OverlayClose render={<Button>Cancel</Button>} />
+```
+
+### Bare surface
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<OverlayContent surface="bare" showCloseButton={false}>
+```
+
+### Where focus lands
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+const nameRef = useRef<HTMLInputElement>(null)
+
+<OverlayContent initialFocusRef={nameRef}>
+  <Input ref={nameRef} />
+</OverlayContent>
+```
+
+### Popups inside an overlay
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<OverlayContent>
+  <OverlayBody>
+    <Select options={roles} />
+    <ActionMenu actions={actions} />
+  </OverlayBody>
+</OverlayContent>
+```
+
+### Three presets, one surface
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<Overlay>
+  <OverlayTrigger render={<Button>Rename</Button>} />
+  <DialogContent>
+    <OverlayHeader><OverlayTitle>Rename project</OverlayTitle></OverlayHeader>
+    <OverlayBody>…</OverlayBody>
+    <OverlayFooter>
+      <OverlayClose render={<Button>Cancel</Button>} />
+      <OverlayClose render={<Button>Save</Button>} />
+    </OverlayFooter>
+  </DialogContent>
+</Overlay>
+
+{/* DialogContent is exactly */}
+<OverlayContent placement="center">…</OverlayContent>
+```
+
+### Alert dialog
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<Overlay>
+  <OverlayTrigger render={<Button tone="destructive">Delete account</Button>} />
+  <AlertDialogContent>
+    <OverlayHeader><OverlayTitle>Delete this account?</OverlayTitle></OverlayHeader>
+    <OverlayFooter>
+      <AlertDialogCancel render={<Button tone="neutral" buttonStyle="outline" />}>Cancel</AlertDialogCancel>
+      <AlertDialogAction render={<Button tone="destructive" />}>Delete</AlertDialogAction>
+    </OverlayFooter>
+  </AlertDialogContent>
+</Overlay>
+
+{/* AlertDialogContent is exactly */}
+<OverlayContent
+  role="alertdialog"
+  dismissal={{ backdrop: false, escape: false }}
+  showCloseButton={false}
+/>
+```
+
+### An alert dialog cannot be dismissed by accident
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<Overlay>
+  <OverlayTrigger render={<Button>Edit</Button>} />
+  <SheetContent side="inline-end">
+    <OverlayHeader><OverlayTitle>Edit booking</OverlayTitle></OverlayHeader>
+    <OverlayBody>…</OverlayBody>
+    <OverlayFooter>
+      <OverlayClose render={<Button>Cancel</Button>} />
+      <OverlayClose render={<Button>Save</Button>} />
+    </OverlayFooter>
+  </SheetContent>
+</Overlay>
+
+{/* SheetContent is exactly */}
+<OverlayContent placement="inline-end" size="md" length="full" inset={false}>…</OverlayContent>
+```

package/.agents/skills/themelia-ui/references/components/base--popover-menu.md

@@ -20,7 +20,7 @@ import "themelia-ui/base/popover-menu.css"
 
 ## Composition
 
-This family composes `base/command`, `base/popover`, `base/typography`.
+This family composes `base/buttons`, `base/command`, `base/popover`, `base/typography`.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.
@@ -39,14 +39,12 @@ PopoverMenuStrings
 
 Kind: callable.
 
-The recurring "trigger → optional header → search → list" picker: filter facets,
-operator selects, assignee menus.
-
-For anything outside that shape, compose `Popover` and `Command` directly — this is a
-bounded convenience over them, not a replacement.
+A "trigger → optional header → search → list" picker: filter facets, operator selects,
+assignee menus. For other shapes compose `Popover` and `Command`; inside a surface
+something else owns, render `PopoverMenuPanel`.
 
 ```text
-({ trigger, items, onSelect, open, onOpenChange, search, searchValue, onSearchChange, loading, header, footer, empty, loadingSlot, strings, renderItem, align, sideOffset, className, }: PopoverMenuProps<T>) => import("react").JSX.Element
+({ trigger, items, onSelect, open, onOpenChange, search, searchValue, onSearchChange, minSearchLength, loading, error, onRetry, header, footer, closeOnSelect, empty, loadingSlot, strings, renderItem, align, sideOffset, label, className, }: PopoverMenuProps<T>) => import("react").JSX.Element
 ```
 
 ### `PopoverMenuItem`
@@ -64,6 +62,42 @@ Kind: interface.
 | `searchValue` | no | `string` | Match string, for when `label` is a node rather than plain text. |
 | `data` | no | `T` | Arbitrary payload handed back to `onSelect`. |
 
+### `PopoverMenuPanel`
+
+Kind: callable.
+
+The body of a `PopoverMenu` (header, search, rows, footer) without the popover, for a
+surface something else owns: one step of a two-step popup, a sheet on a phone.
+
+```text
+({ items, onSelect, search, searchValue, onSearchChange, minSearchLength, loading, error, onRetry, header, footer, empty, loadingSlot, strings, renderItem, label, ref, className, }: PopoverMenuPanelProps<T>) => import("react").JSX.Element
+```
+
+### `PopoverMenuPanelProps`
+
+Kind: interface.
+
+| member | required | type | description / documented default |
+| --- | :-: | --- | --- |
+| `items` | yes | `readonly PopoverMenuItem<T>[]` |  |
+| `onSelect` | yes | `(item: PopoverMenuItem<T>) => void` | A row was chosen. The panel neither tracks selection nor closes; its host decides both. |
+| `search` | no | `boolean` | Shows the search field above the list. Defaults to true. |
+| `searchValue` | no | `string` | Controlled search value. Supplying `onSearchChange` also hands filtering to the<br>caller: the local matcher turns off. |
+| `onSearchChange` | no | `(value: string) => void` |  |
+| `minSearchLength` | no | `number` | Characters (trimmed) the search needs before rows show. Defaults to 0. An empty field<br>still shows `items`; below the minimum, `strings.formatTypeToSearch` shows instead. |
+| `loading` | no | `boolean` |  |
+| `error` | no | `ReactNode` | The items could not be loaded: `true` shows `strings.error`, any other node is the<br>message. Replaces the rows and the empty state; `loading` takes precedence. |
+| `onRetry` | no | `() => void` | Adds a retry control under the error. |
+| `header` | no | `ReactNode` | Band above the search field. |
+| `footer` | no | `ReactNode` | Band below the list — confirm and clear buttons. |
+| `empty` | no | `ReactNode` | A rendered empty state. For plain copy, use `strings.empty`. |
+| `loadingSlot` | no | `ReactNode` | Replaces the default spinner strip. |
+| `strings` | no | `Partial<PopoverMenuStrings>` | Overrides the panel's own copy — the filter placeholder, the loading, empty and error rows. |
+| `renderItem` | no | `(item: PopoverMenuItem<T>) => ReactNode` | Full control over a row. |
+| `label` | no | `string` | Accessible name for the list. Most needed with `search={false}`, where focus lands on the list. |
+| `ref` | no | `Ref<HTMLDivElement>` | The list element. Without a search field it is the tab stop, and what a host's<br>`initialFocus` should target. |
+| `className` | no | `string` |  |
+
 ### `PopoverMenuProps`
 
 Kind: interface.
@@ -76,17 +110,22 @@ Kind: interface.
 | `open` | no | `boolean` |  |
 | `onOpenChange` | no | `(open: boolean) => void` |  |
 | `search` | no | `boolean` | Shows the search field above the list. |
-| `searchValue` | no | `string` | Controlled search value. Supplying `onSearchChange` also hands filtering to the<br>caller — the local matcher steps aside rather than filtering an already-filtered<br>list, which is how a server-side search ends up showing nothing. |
+| `searchValue` | no | `string` | Controlled search value. Supplying `onSearchChange` also hands filtering to the<br>caller: the local matcher turns off. |
 | `onSearchChange` | no | `(value: string) => void` |  |
+| `minSearchLength` | no | `number` | Characters (trimmed) the search needs before rows show. Defaults to 0. An empty field<br>still shows `items`; below the minimum, `strings.formatTypeToSearch` shows instead. |
 | `loading` | no | `boolean` |  |
+| `error` | no | `ReactNode` | The items could not be loaded: `true` shows `strings.error`, any other node is the<br>message. Replaces the rows and the empty state; `loading` takes precedence. |
+| `onRetry` | no | `() => void` | Adds a retry control under the error. |
 | `header` | no | `ReactNode` | Band above the search field. |
 | `footer` | no | `ReactNode` | Band below the list — confirm and clear buttons. |
-| `empty` | no | `ReactNode` | Replaces the default no-results copy.<br>A rendered empty state. For plain copy, use `strings.empty`. |
+| `closeOnSelect` | no | `boolean` | Closes the popover after a row is chosen and returns focus to the trigger. Defaults<br>to true unless a `footer` is present (the multi-pick shape). |
+| `empty` | no | `ReactNode` | A rendered empty state. For plain copy, use `strings.empty`. |
 | `loadingSlot` | no | `ReactNode` | Replaces the default spinner strip. |
-| `strings` | no | `Partial<PopoverMenuStrings>` | Overrides this menu's own copy — the filter placeholder and the loading row. |
+| `strings` | no | `Partial<PopoverMenuStrings>` | Overrides this menu's own copy — the filter placeholder, the loading, empty and error rows. |
 | `renderItem` | no | `(item: PopoverMenuItem<T>) => ReactNode` | Full control over a row. |
 | `align` | no | `ComponentProps<typeof PopoverContent>["align"]` |  |
 | `sideOffset` | no | `ComponentProps<typeof PopoverContent>["sideOffset"]` |  |
+| `label` | no | `string` | Accessible name for the list. Most needed with `search={false}`, where focus lands on the list. |
 | `className` | no | `string` |  |
 
 ### `PopoverMenuStrings`
@@ -98,6 +137,9 @@ Kind: interface.
 | `loading` | yes | `string` | Announced while the items are being fetched. |
 | `searchPlaceholder` | yes | `string` | Placeholder in the filter field. |
 | `empty` | yes | `string` | Shown when the filter matches nothing. |
+| `error` | no | `string` | Shown in place of the rows when `error` is `true`. |
+| `retry` | no | `string` | The control beside the error, when `onRetry` is wired. |
+| `formatTypeToSearch` | no | `(minimum: number) => string` | Shown in place of the rows while the search is shorter than `minSearchLength`. |
 
 ## Preview recipes
 
@@ -112,3 +154,27 @@ Preview route: Popover menu — `/popover-menu`
   onSelect={(item) => setOwner(item.value)}
 />
 ```
+
+### Error and minimum search
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<PopoverMenu
+  trigger={<Button buttonStyle="outline">Owner</Button>}
+  items={owners}
+  error={query.isError}
+  onRetry={query.refetch}
+  onSelect={(item) => setOwner(item.value)}
+/>
+
+<PopoverMenu trigger={trigger} items={owners} minSearchLength={2} onSelect={pick} />
+```
+
+### PopoverMenuPanel
+
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<PopoverMenuPanel
+  search={false}
+  items={owners.map((owner) => ({ ...owner, selected: picked.includes(owner.value) }))}
+  onSelect={(item) => toggle(item.value)}
+/>
+```

package/.agents/skills/themelia-ui/references/components/base--popover.md

@@ -48,7 +48,7 @@ Kind: callable.
 Kind: callable.
 
 ```text
-({ container, className, align, alignOffset, side, sideOffset, disablePortal, inset, width, minWidth, maxWidth, onOpenAutoFocus, onInteractOutside, ...props }: PopoverContentProps) => React.JSX.Element
+({ container, className, align, alignOffset, side, sideOffset, disablePortal, inset, width, minWidth, maxWidth, style, ...props }: PopoverContentProps) => React.JSX.Element
 ```
 
 ### `PopoverContentProps`
@@ -56,7 +56,7 @@ Kind: callable.
 Kind: type.
 
 ```text
-PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & { disablePortal?: boolean; inset?: "padded" | "flush"; width?: string | number | "auto" | "trigger"; minWidth?: string | number; maxWidth?: string | number; onOpenAutoFocus?: (event: Event) => void; onInteractOutside?: (event: Event) => void; container?: UIPortalContainer; }
+PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & { disablePortal?: boolean; inset?: "padded" | "flush"; width?: string | number | "auto" | "trigger"; minWidth?: string | number; maxWidth?: string | number; container?: UIPortalContainer; }
 ```
 
 ### `PopoverDescription`

package/.agents/skills/themelia-ui/references/components/base--qr-code.md

@@ -57,18 +57,14 @@ Extends: `Omit<ComponentProps<"div">, "children">`.
 | `robustness` | no | `QRRobustness` |  |
 | `placeholder` | no | `string` | Shown while encoding. Defaults to this component's own `generating` string. |
 | `strings` | no | `Partial<QRCodeStrings>` | Overrides this code's own copy — the two placeholder states and its name. |
-| `emptyState` | no | `React.ReactNode` | Shown when `value` is empty. Defaults to rendering nothing, because an empty value<br>usually means the thing being encoded does not exist yet — a placeholder there<br>claims something is loading when nothing is. |
+| `emptyState` | no | `React.ReactNode` | Shown when `value` is empty. Defaults to rendering nothing (it is not a loading state). |
 | `label` | no | `string` | Announced in place of the symbol, which is meaningless to a screen reader. |
 
 ### `QRCodeStrings`
 
 Kind: interface.
 
-What a QR code says while it has nothing to show.
-
-Both states were English literals: the placeholder as a default parameter, the failure
-as a string inside a ternary — which is why one of them was invisible to a scanner
-looking for text between tags.
+A QR code's copy: its pending and failed states, and the symbol's accessible name.
 
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
@@ -80,10 +76,8 @@ looking for text between tags.
 
 Kind: type.
 
-How much of the symbol can be obscured and still decode: L ≈ 7%, M ≈ 15%, Q ≈ 25%,
-H ≈ 30%. Higher costs density — the same payload needs a larger grid.
-
-Named for the source kit's prop rather than the encoder's `errorCorrectionLevel`.
+Error correction (the encoder's `errorCorrectionLevel`): how much of the symbol can be
+obscured and still decode — L ≈ 7%, M ≈ 15%, Q ≈ 25%, H ≈ 30%. Higher needs a larger grid.
 
 ```text
 "L" | "M" | "Q" | "H"

package/.agents/skills/themelia-ui/references/components/base--repeaters.md

@@ -20,7 +20,7 @@ import "themelia-ui/base/repeaters.css"
 
 ## Composition
 
-This family composes `base/buttons`, `base/choice-inputs`, `base/forms`, `base/structure`, `base/text-inputs`.
+This family composes `base/buttons`, `base/choice-inputs`, `base/display`, `base/forms`, `base/structure`, `base/text-inputs`.
 
 Application policy—routing, fetching, persistence, permissions, and translation—stays
 outside the package and arrives through the public props, callbacks, slots, or accessors below.
@@ -86,7 +86,7 @@ Extends: `RepeaterStrings`.
 | --- | :-: | --- | --- |
 | `keyPlaceholder` | yes | `string` |  |
 | `valuePlaceholder` | yes | `string` |  |
-| `keyLabel` | yes | `(index: number) => string` | Names each field by its row, so a column of them can be told apart.<br><br>The placeholder cannot do this job: it names the KIND of field, and every row's is<br>identical. A screen reader moving down the column heard "Key" eleven times. |
+| `keyLabel` | yes | `(index: number) => string` | Names each field by its row (the placeholder is identical on every row). |
 | `valueLabel` | yes | `(index: number) => string` |  |
 
 ### `KeyValuePair`
@@ -157,7 +157,7 @@ Record<string, Record<string, string>>
 Kind: callable.
 
 ```text
-({ locales, value, onValueChange, multiline, placeholder, disabled, invalid, requiredLocales, className, "aria-label": ariaLabel, }: LocalizedStringFieldProps) => import("react").JSX.Element
+({ locales, value, onValueChange, multiline, placeholder, disabled, invalid, requiredLocales, className, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": ariaInvalid, }: LocalizedStringFieldProps) => import("react").JSX.Element
 ```
 
 ### `LocalizedStringFieldProps`
@@ -176,6 +176,9 @@ Kind: interface.
 | `requiredLocales` | no | `string[]` | Marks locales that must be filled, so the switcher can flag what is missing. |
 | `className` | no | `string` |  |
 | `"aria-label"` | no | `string` |  |
+| `"aria-labelledby"` | no | `string` |  |
+| `"aria-describedby"` | no | `string` |  |
+| `"aria-invalid"` | no | `boolean \| "true" \| "false"` |  |
 
 ### `LocalizedStringRepeater`
 
@@ -260,7 +263,7 @@ Kind: interface.
 | `value` | yes | `ObjectRow[]` |  |
 | `onValueChange` | yes | `(value: ObjectRow[]) => void` |  |
 | `fields` | yes | `ObjectFieldDef[]` |  |
-| `name` | no | `string` | Prefixes the generated field paths, so they match the shape a form library expects.<br>Purely a naming aid — this component reads and writes the array it is given. |
+| `name` | no | `string` | Prefixes the generated field paths (`items.2.email`) to match a form library. Naming only. |
 | `emptyState` | no | `ReactNode` |  |
 | `maxItems` | no | `number` |  |
 | `sortable` | no | `boolean` |  |
@@ -332,8 +335,10 @@ Kind: interface.
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
 | `add` | yes | `string` | The control that appends a row. |
-| `remove` | yes | `(index: number) => string` | Names the row's remove control, by the row it removes.<br><br>A function rather than a bare label, because every remove button in a list saying<br>the same thing is a column of controls a screen reader cannot tell apart — and<br>because "Remove item 3" does not reorder cleanly into every language. |
-| `reorder` | yes | `(index: number) => string` | Names the drag handle, and says how to use it without a pointer.<br><br>The instruction is part of the sentence rather than a separate key, because a<br>language that puts it first has no way to reassemble two halves in the right order. |
+| `moved` | no | `(position: number, total: number) => string` | Announced after a keyboard move. Optional so older complete strings objects still<br>type-check. |
+| `remove` | yes | `(index: number) => string` | Names each row's remove control, by its row. |
+| `reorder` | yes | `(index: number) => string` | Names the drag handle, including how to move it by keyboard. |
+| `emptyState` | no | `string` | Shown when the list is empty; the `emptyState` prop replaces it. Optional so older<br>complete strings objects still type-check. |
 
 ### `StringRepeater`
 

package/.agents/skills/themelia-ui/references/components/base--resizable.md

@@ -43,7 +43,7 @@ Extends: `ResizablePrimitive.SeparatorProps`.
 
 | member | required | type | description / documented default |
 | --- | :-: | --- | --- |
-| `withHandle` | no | `boolean` | Draws a grip on the line.<br><br>Off by default: a 1px rule between two panes is the quiet version, and the hit area<br>is wider than the line either way. On for a split where the reader has no other cue<br>that the boundary moves. |
+| `withHandle` | no | `boolean` | Draws a grip on the line, for a split with no other cue that it moves. Defaults to false. |
 
 ### `ResizablePanel`
 
@@ -79,14 +79,14 @@ No own members are present in the normalized public snapshot.
 
 ## Preview recipes
 
-Preview route: Menubar & hover card — `/menubar`
+Preview route: Resizable panels — `/resizable`
 
 ### Resizable
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<ResizablePanelGroup orientation="horizontal" autoSaveId="inspector">
-  <ResizablePanel defaultSize={65}>…</ResizablePanel>
+<ResizablePanelGroup orientation="horizontal" defaultLayout={savedLayout} onLayoutChanged={saveLayout}>
+  <ResizablePanel defaultSize="65%">…</ResizablePanel>
   <ResizableHandle withHandle />
-  <ResizablePanel defaultSize={35}>…</ResizablePanel>
+  <ResizablePanel defaultSize="35%">…</ResizablePanel>
 </ResizablePanelGroup>
 ```

package/.agents/skills/themelia-ui/references/components/base--sheet.md

@@ -14,7 +14,7 @@ Documenting the sheet anatomy, or inside base where features/overlays cannot be
 ## Import
 
 ```tsx fragment — import-only example
-import { Sheet } from "themelia-ui/base/sheet"
+import { SheetContent } from "themelia-ui/base/sheet"
 import "themelia-ui/base/sheet.css"
 ```
 
@@ -27,30 +27,6 @@ outside the package and arrives through the public props, callbacks, slots, or a
 
 ## Public declarations
 
-### `Sheet`
-
-Kind: const.
-
-```text
-typeof Overlay
-```
-
-### `SheetBody`
-
-Kind: const.
-
-```text
-React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>
-```
-
-### `SheetClose`
-
-Kind: const.
-
-```text
-typeof OverlayClose
-```
-
 ### `SheetContent`
 
 Kind: callable.
@@ -69,30 +45,6 @@ Extends: `Omit<OverlayContentProps, "placement">`, `Omit<React.ComponentProps<"d
 | --- | :-: | --- | --- |
 | `side` | no | `SheetSide` | The edge it enters from. |
 
-### `SheetDescription`
-
-Kind: const.
-
-```text
-React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>
-```
-
-### `SheetFooter`
-
-Kind: callable.
-
-```text
-({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element
-```
-
-### `SheetHeader`
-
-Kind: callable.
-
-```text
-({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element
-```
-
 ### `SheetSide`
 
 Kind: type.
@@ -103,30 +55,36 @@ The edge a sheet enters from, in writing-mode-relative terms.
 Exclude<OverlayPlacement, "center">
 ```
 
-### `SheetTitle`
-
-Kind: const.
+## Preview recipes
 
-```text
-React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>
-```
+Preview route: Overlay, dialog & sheet — `/overlay`
 
-### `SheetTrigger`
+### modality
 
-Kind: const.
+```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
+<OverlayContent placement="inline-end" modality="non-modal" />
 
-```text
-typeof OverlayTrigger
+{/* the same, as the preset */}
+<SheetContent modality="non-modal" />
 ```
 
-## Preview recipes
-
-Preview route: Sheet — `/sheet`
-
-### Sheet
+### An alert dialog cannot be dismissed by accident
 
 ```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<SheetContent side="inline-end" />
+<Overlay>
+  <OverlayTrigger render={<Button>Edit</Button>} />
+  <SheetContent side="inline-end">
+    <OverlayHeader><OverlayTitle>Edit booking</OverlayTitle></OverlayHeader>
+    <OverlayBody>…</OverlayBody>
+    <OverlayFooter>
+      <OverlayClose render={<Button>Cancel</Button>} />
+      <OverlayClose render={<Button>Save</Button>} />
+    </OverlayFooter>
+  </SheetContent>
+</Overlay>
+
+{/* SheetContent is exactly */}
+<OverlayContent placement="inline-end" size="md" length="full" inset={false}>…</OverlayContent>
 ```
 
 ### Size, length, and inset
@@ -141,9 +99,3 @@ Preview route: Sheet — `/sheet`
 {/* shorter still, centred in what the offset left */}
 <SheetContent side="inline-end" size="28rem" length="70%" inset />
 ```
-
-### Modality
-
-```tsx fragment — excerpt from the live preview; surrounding values are supplied by the application
-<SheetContent modality="non-modal" />
-```