@estiva-app/ui 0.24.1 → 0.26.0

package/src/SectionHeader.mdx

@@ -16,6 +16,9 @@ title the toggle — that is where a section folds.
 
 - A sidebar or panel section that carries its own actions — add, sort,
   filter.
+- **A heading over a group of rows, even with nothing to act on**: no
+  `actions`, and `hover="none"` so the row stays still under the pointer.
+  Never a row drawn by hand with a SectionLabel in it.
 - `showActions="always"` keeps the actions visible — for touch, or for a
   section whose actions are the point.
 
@@ -25,7 +28,8 @@ title the toggle — that is where a section folds.
 
 - A section that opens and closes → **CollapsibleSection**: the header,
   the rows, the slide, and a `storageKey` that remembers.
-- A title with no chevron and no actions → **SectionLabel** alone.
+- A label inside a row of another shape — a dialog's section, a panel's
+  title, a card's line → **SectionLabel**.
 - A heading inside a menu → **MenuSection**.
 - Page-level headings → the `h*` type tokens.
 

package/src/SectionLabel.mdx

@@ -15,13 +15,15 @@ how).
 ## When
 
 - **It is a bare label**: the row it sits in, and the room around it, are yours.
-- Titling a group of rows in a sidebar, a panel, a rail.
+- A label inside a row of another shape: a dialog's section, a panel's
+  title, a card's line.
 - Inside a menu it arrives via **MenuSection** — don't place it there by
   hand.
 
 ## When not
 
-- A heading that also collapses or carries actions → **SectionHeader**.
+- A heading over a group of rows → **SectionHeader**, even with nothing to
+  act on; a group that folds → **CollapsibleSection**.
 - The label above a stacked control → **Property** `stacked` — a field
   label is a different voice, at a different size, on purpose.
 - Page-level headings → the `h*` type tokens.

package/src/eslint/no-rebuilt-behaviour.ts

@@ -190,7 +190,7 @@ export const OWNED_BEHAVIOURS: OwnedBehaviour[] = [
     id: 'portal',
     behaviour: 'Floats on top of the page',
     baseUi: ['Dialog', 'AlertDialog', 'Popover', 'Menu', 'Select', 'Combobox', 'Autocomplete', 'Tooltip', 'PreviewCard', 'Toast'],
-    owners: ['DialogShell', 'ConfirmDialog', 'CommandPalette', 'Popover', 'Menu', 'Select', 'ChipInput', 'Tooltip', 'PreviewCard', 'Toast'],
+    owners: ['DialogShell', 'ConfirmDialog', 'CommandPalette', 'Lightbox', 'Popover', 'Menu', 'Select', 'ChipInput', 'Tooltip', 'PreviewCard', 'Toast'],
     reads: 'createPortal, called, or imported and never called',
   },
   {
@@ -204,21 +204,21 @@ export const OWNED_BEHAVIOURS: OwnedBehaviour[] = [
     id: 'page-keys',
     behaviour: 'Takes its keys by itself',
     baseUi: ['Dialog', 'AlertDialog', 'Popover', 'Menu', 'Select', 'Combobox', 'Tooltip', 'PreviewCard', 'Toast'],
-    owners: ['DialogShell', 'Popover', 'Menu', 'Select', 'Tabs', 'Toolbar'],
+    owners: ['DialogShell', 'Lightbox', 'Popover', 'Menu', 'Select', 'Tabs', 'Toolbar'],
     reads: 'a keydown, keyup or keypress listener on window or document',
   },
   {
     id: 'focus',
     behaviour: 'Holds focus inside while open, and gives it back',
     baseUi: ['Dialog', 'AlertDialog', 'Popover', 'Menu', 'Select', 'Combobox'],
-    owners: ['DialogShell', 'CommandPalette'],
+    owners: ['DialogShell', 'CommandPalette', 'Lightbox'],
     reads: 'a focusin or focusout listener on window or document; the Tab key compared by hand',
   },
   {
     id: 'scroll-lock',
     behaviour: 'Stops the page behind it scrolling',
     baseUi: ['Dialog', 'AlertDialog'],
-    owners: ['DialogShell'],
+    owners: ['DialogShell', 'Lightbox'],
     reads: 'overflow written into the style of document.body or document.documentElement',
   },
   {

package/src/index.ts

@@ -44,6 +44,7 @@ export {
   type InlineChipProps,
   type InlineChipTone,
 } from './InlineChip'
+export { Lightbox, type LightboxProps } from './Lightbox'
 export { Link, type LinkProps, type LinkVariant } from './Link'
 export { IconButton, type IconButtonProps, type IconButtonVariant } from './IconButton'
 export { Kbd, type KbdProps } from './Kbd'
@@ -60,10 +61,11 @@ export { DialogShell, type DialogShellProps } from './DialogShell'
 export { Divider, type DividerProps } from './Divider'
 export { EditableText, type EditableTextProps } from './EditableText'
 export { EmptyState, type EmptyStateProps } from './EmptyState'
+export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary'
 export { ProgressBar, type ProgressBarProps, type ProgressBarVariant } from './ProgressBar'
 export { SkeletonBar, SkeletonList, SkeletonRow } from './Skeleton'
 export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb'
-export { EnterHint, Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSub, type MenuItemProps, type MenuPanelProps, type MenuProps, type MenuSubProps } from './Menu'
+export { EnterHint, Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSeparator, MenuSub, type MenuItemProps, type MenuPanelProps, type MenuProps, type MenuSubProps } from './Menu'
 export { NavItem, type NavItemProps } from './NavItem'
 export { Popover, type PopoverProps } from './Popover'
 export { ScrollArea, type ScrollAreaProps } from './ScrollArea'

package/src/registry/registry.test.ts

@@ -45,17 +45,17 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 84 names over 55 files: 77 components, 6 helpers and 1 hook (ListColumn and ToolbarLink joined in UIG-14)', () => {
+  it('counts 87 names over 57 files: 80 components, 6 helpers and 1 hook (Lightbox joined in UIG-35)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 77, helper: 6, hook: 1 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(55)
+    expect(kinds).toEqual({ component: 80, helper: 6, hook: 1 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(57)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
-    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(55)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(29)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(57)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(30)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {
@@ -278,7 +278,7 @@ describe('the ids point at something', () => {
 describe('a second parser agrees', async () => {
   const docgen = await import('react-docgen').catch(() => null)
 
-  it.skipIf(!docgen)('finds the same props on all 77 components', async () => {
+  it.skipIf(!docgen)('finds the same props on all 79 components', async () => {
     if (!docgen) return
     const resolver = new docgen.builtinResolvers.FindExportedDefinitionsResolver({ limit: 0 })
     const byName = new Map(registry.entries.map((one) => [one.name, one]))

package/tailwind-preset.js

@@ -188,6 +188,9 @@ export default {
         'accent-wash':     'var(--accent-wash)',
         'success-wash':    'var(--success-wash)',
         'scrim':           'var(--scrim)',
+        // A picture viewer dims harder than a dialog does: the page behind is
+        // not context there, it is glare beside the thing you opened (UIG-35).
+        'scrim-strong':    'var(--scrim-strong)',
       },
       boxShadow: {
         'sm':  'var(--shadow-sm)',

package/tokens.css

@@ -79,6 +79,7 @@
   --glow-accent:     0 0 5px rgba(139, 92, 246, 0.6);
   --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
   --scrim:           rgba(0, 0, 0, 0.5);
+  --scrim-strong:    rgba(0, 0, 0, 0.8);
 }
 
 /* ─── dark ─── Peek's dark theme (peek/src/index.css .dark, 2026-08-28). */
@@ -142,6 +143,7 @@
   --glow-accent:     0 0 5px rgba(167, 139, 250, 0.6);
   --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
   --scrim:           rgba(0, 0, 0, 0.5);
+  --scrim-strong:    rgba(0, 0, 0, 0.8);
 }
 
 
@@ -209,6 +211,7 @@
   --glow-accent:     0 0 5px rgba(86, 200, 255, 0.6);
   --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
   --scrim:           rgba(0, 0, 0, 0.5);
+  --scrim-strong:    rgba(0, 0, 0, 0.8);
 }
 
 /* ─── ship ─── Ship's palette (Katerina's ruling, 2026-08-28; ship/web/src/index.css). */
@@ -282,4 +285,5 @@
   --glow-accent:     0 0 5px rgba(75, 88, 212, 0.6);
   --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
   --scrim:           rgba(0, 0, 0, 0.5);
+  --scrim-strong:    rgba(0, 0, 0, 0.8);
 }