@estiva-app/ui 0.9.0 → 0.10.1

package/src/triggerDisabled.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from 'react'
+
+/**
+ * Whether the element a `Menu` or `Popover` was handed as its trigger is
+ * disabled — by `disabled`, or by a `disabledReason` (which disables the
+ * button and keeps it reachable). Base UI's trigger parts keep a disabled
+ * state of their own and write it over the rendered button's, so they have to
+ * be told (Finding 39, 2026-09-08).
+ */
+export function triggerDisabled(trigger: ReactElement): boolean {
+  const props = trigger.props as { disabled?: boolean; disabledReason?: string }
+  return !!(props.disabled || props.disabledReason)
+}

package/stories/Choosing.mdx

@@ -53,8 +53,12 @@ fork freely, owe nothing back, mention it on the package's ticket.
 
 | You need | Reach for |
 |---|---|
-| A list of verbs from a trigger | **Menu** — Escape and outside-click come with it |
-| A hint on hover | **Tooltip** / **WithTooltip** |
+| A list of verbs from a trigger | **Menu** — Escape, outside-click and the arrow keys come with it |
+| A panel of *content* from a trigger — a field, a toolbar, a small form | **Popover** — the menu's surface without a menu's keyboard |
+| More of a thing on hover | **PreviewCard** — unlike a tooltip, you can point at it |
+| A hint on hover or on keyboard focus | **Tooltip** / **WithTooltip** — one `TooltipProvider` at the app root shares the delay |
+| A strip of controls that act on one thing | **Toolbar** — one Tab stop for the row, arrow keys along it |
+| Reactions to choose from | **ReactionPicker** — the row; **Reaction** is the pill it produces |
 | Anything with a title, body and footer | **DialogShell** |
 | "Are you sure?" | **ConfirmDialog** |
 
@@ -76,7 +80,8 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | Data is on its way | **Skeleton** — shaped like what will arrive |
 | Nothing to show | **EmptyState** — says what would fill it |
 | It happened, briefly | **Toast**, via `useToast` inside a `ToastProvider` |
-| The whole surface has something to say | **Banner** — the strip under the top bar |
+| It happened, and must not be missed | **Toast** with `durationMs: 0` and an action — it floats and stays until dismissed (D21) |
+| The whole surface has something to say | **Banner** — the strip under the top bar, full width; `onDismiss` if the reader closes it rather than the app |
 
 ## The frame
 

package/tailwind-preset.js

@@ -169,7 +169,14 @@ export default {
         // glow. Every theme defines it; the shared inputs use it under `signal:`.
         'focus-ring': 'var(--focus-ring)',
         // Signal's glow and inner highlight (D16); the components use them under `signal:`.
+        // All three glows are here as box shadows, and the two below are also
+        // drop shadows: a glow on a surface is a box shadow, a glow on an icon
+        // is a filter that follows its shape. Peek's composer wrote its send
+        // button's glow as an arbitrary value for want of this one
+        // (ADOPTION P22).
         'glow-warning':    'var(--glow-warning)',
+        'glow-success':    'var(--glow-success)',
+        'glow-accent':     'var(--glow-accent)',
         'highlight-inset': 'var(--highlight-inset)',
       },
       dropShadow: {

package/src/Menu.fit.test.ts

@@ -1,90 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { clampBox, fitMenu, fitSubmenu } from './fit'
-
-/**
- * The Menu shell's viewport geometry (Katerina, 2026-09-03): the identity
- * menu vanished under a z-indexed panel header, and a reply menu's highlight
- * submenu was cut off by the right screen edge — its hand-rolled flip read a
- * ref that was never attached, so it measured nothing. The portal fixes the
- * covering; these pin the pure half of the fitting.
- */
-const viewport = { width: 1280, height: 800 }
-
-describe('fitMenu without a cap (the Menu shell)', () => {
-  it('lets a tall panel stand at its full height when the room is there — no scrollbar', () => {
-    // The identity panel: ~450px tall on a 900px screen. With Select's 288
-    // cap it grew a scrollbar at full height; without one it just stands.
-    const fit = fitMenu({
-      anchor: { left: 1100, top: 20, bottom: 56 },
-      menu: { width: 288, contentHeight: 450 },
-      viewport: { width: 1440, height: 900 },
-    })
-    expect(fit.maxHeight).toBeGreaterThanOrEqual(450)
-  })
-
-  it('still caps to the room when the screen truly runs out', () => {
-    const fit = fitMenu({
-      anchor: { left: 100, top: 20, bottom: 56 },
-      menu: { width: 288, contentHeight: 1200 },
-      viewport: { width: 1440, height: 900 },
-    })
-    expect(fit.maxHeight).toBe(900 - 56 - 4 - 8)
-  })
-})
-
-describe('clampBox', () => {
-  it('leaves a well-placed box exactly where the caller put it', () => {
-    const fit = clampBox({ box: { left: 100, top: 200, width: 300, height: 400 }, viewport })
-    expect(fit).toEqual({ left: 100, top: 200, maxHeight: 400 })
-  })
-
-  it('slides a box back inside the right edge, margin kept', () => {
-    const fit = clampBox({ box: { left: 1100, top: 200, width: 300, height: 400 }, viewport })
-    expect(fit.left).toBe(1280 - 300 - 8)
-  })
-
-  it('never pushes a box past the left edge either', () => {
-    const fit = clampBox({ box: { left: -40, top: 200, width: 300, height: 400 }, viewport })
-    expect(fit.left).toBe(8)
-  })
-
-  it('slides a box up so its tail stays on screen', () => {
-    const fit = clampBox({ box: { left: 100, top: 700, width: 300, height: 400 }, viewport })
-    expect(fit.top).toBe(800 - 400 - 8)
-  })
-
-  it('caps a box taller than the viewport and pins it to the top margin', () => {
-    const fit = clampBox({ box: { left: 100, top: 100, width: 300, height: 900 }, viewport })
-    expect(fit.maxHeight).toBe(800 - 16)
-    expect(fit.top).toBe(8)
-  })
-
-  it('keeps the 120px floor — scrollable beats invisible', () => {
-    const fit = clampBox({ box: { left: 100, top: 200, width: 300, height: 40 }, viewport })
-    expect(fit.maxHeight).toBeGreaterThanOrEqual(120)
-  })
-})
-
-describe('fitSubmenu', () => {
-  const panel = { width: 160, height: 200 }
-
-  it('opens to the right of a row with room', () => {
-    const fit = fitSubmenu({ row: { left: 500, right: 740, top: 300 }, panel, viewport })
-    expect(fit).toEqual({ left: 744, top: 300 })
-  })
-
-  it('flips to the left at the right screen edge (the highlight submenu cut)', () => {
-    const fit = fitSubmenu({ row: { left: 1000, right: 1240, top: 300 }, panel, viewport })
-    expect(fit.left).toBe(1000 - 4 - 160)
-  })
-
-  it('never lands past the left edge even when flipped from a narrow spot', () => {
-    const fit = fitSubmenu({ row: { left: 60, right: 1240, top: 300 }, panel, viewport })
-    expect(fit.left).toBe(8)
-  })
-
-  it('slides up when the tail would run past the bottom', () => {
-    const fit = fitSubmenu({ row: { left: 500, right: 740, top: 700 }, panel, viewport })
-    expect(fit.top).toBe(800 - 200 - 8)
-  })
-})

package/src/Select.fit.test.ts

@@ -1,101 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { fitMenu } from './Select'
-
-/** Select's calls carry its option-list cap (the old max-h-72); the cap is
- *  the caller's now, so these pin it alongside the geometry. */
-const fitSelect = (args: Omit<Parameters<typeof fitMenu>[0], 'cap'>) => fitMenu({ ...args, cap: 288 })
-
-/**
- * The Select menu's viewport geometry (Katerina, 2026-09-01): the files-panel
- * picker was cut off at the right edge, its tail ran past the bottom of the
- * screen, and it could not be scrolled. `fitMenu` is the pure half of the
- * fix; these pin its decisions.
- */
-const viewport = { width: 1280, height: 800 }
-
-describe('fitMenu', () => {
-  it('leaves a comfortable menu exactly where the trigger put it', () => {
-    const fit = fitSelect({
-      anchor: { left: 100, top: 200, bottom: 232 },
-      menu: { width: 240, contentHeight: 180 },
-      viewport,
-    })
-    expect(fit.left).toBe(100)
-    expect(fit.top).toBe(236)
-    expect(fit.bottom).toBeUndefined()
-    expect(fit.maxHeight).toBe(288) // room to spare — the cap is the only limit
-  })
-
-  it('clamps a menu that would run off the right edge (the files-panel cut)', () => {
-    const fit = fitSelect({
-      anchor: { left: 1200, top: 200, bottom: 232 },
-      menu: { width: 340, contentHeight: 180 },
-      viewport,
-    })
-    // 1280 - 340 - 8 margin: fully on screen, margin kept.
-    expect(fit.left).toBe(932)
-  })
-
-  it('never pushes a menu past the LEFT edge either', () => {
-    const fit = fitSelect({
-      anchor: { left: -20, top: 200, bottom: 232 },
-      menu: { width: 240, contentHeight: 180 },
-      viewport,
-    })
-    expect(fit.left).toBe(8)
-  })
-
-  it('caps height to the room below, so the last option is never off screen', () => {
-    const fit = fitSelect({
-      anchor: { left: 100, top: 560, bottom: 592 },
-      menu: { width: 240, contentHeight: 200 },
-      viewport,
-    })
-    // Room below = 800 - 592 - 4 gap - 8 margin = 196 < content 200 …but the
-    // room above (548) is not better than needed-below comparison? It is —
-    // openUp triggers only when below < min(content, cap) AND above > below.
-    // Here above (548) > below (196), content 200 > 196 → opens upward.
-    expect(fit.bottom).toBe(800 - 560 + 4)
-    expect(fit.maxHeight).toBe(288)
-  })
-
-  it('opens upward when the room above is better (the low trigger)', () => {
-    const fit = fitSelect({
-      anchor: { left: 100, top: 700, bottom: 732 },
-      menu: { width: 240, contentHeight: 400 },
-      viewport,
-    })
-    expect(fit.top).toBeUndefined()
-    expect(fit.bottom).toBe(800 - 700 + 4) // anchored to the trigger's top
-    expect(fit.maxHeight).toBe(288) // still capped
-  })
-
-  it('stays below when the room below is bad but the room above is worse', () => {
-    const fit = fitSelect({
-      anchor: { left: 100, top: 60, bottom: 92 },
-      menu: { width: 240, contentHeight: 400 },
-      viewport,
-    })
-    expect(fit.top).toBe(96)
-    // Room below = 800 - 92 - 12 = 696 ≥ cap → full cap available.
-    expect(fit.maxHeight).toBe(288)
-  })
-
-  it('keeps a 120px floor in a cramped corner — scrollable beats invisible', () => {
-    const fit = fitSelect({
-      anchor: { left: 100, top: 740, bottom: 772 },
-      menu: { width: 240, contentHeight: 400 },
-      viewport: { width: 1280, height: 800 },
-    })
-    expect(fit.maxHeight).toBeGreaterThanOrEqual(120)
-  })
-
-  it('caps a long list at 288 with plenty of room — the old max-h-72', () => {
-    const fit = fitSelect({
-      anchor: { left: 100, top: 100, bottom: 132 },
-      menu: { width: 240, contentHeight: 900 },
-      viewport,
-    })
-    expect(fit.maxHeight).toBe(288)
-  })
-})