@estiva-app/ui 0.8.0 → 0.10.0

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/stories/TokensPage.tsx

@@ -88,9 +88,9 @@ const FAMILIES: Family[] = [
   },
   {
     label: 'Accent',
-    blurb: 'The brand colour: the primary button, the checked box, the brand chip. Muted is its wash, outline its thin border.',
+    blurb: 'The brand colour: the primary button, the checked box, the brand chip. Muted is its opaque wash, wash the translucent one a row tints with on hover, outline its thin border.',
     utilities: COLOUR_UTILITIES,
-    tokens: [colour('accent', 'primary', 'fill'), colour('accent', 'hover', 'fill'), colour('accent', 'muted', 'fill'), colour('accent', 'outline', 'outline')],
+    tokens: [colour('accent', 'primary', 'fill'), colour('accent', 'hover', 'fill'), colour('accent', 'muted', 'fill'), colour('accent', 'wash', 'fill'), colour('accent', 'outline', 'outline')],
   },
   {
     label: 'Tones',
@@ -100,6 +100,10 @@ const FAMILIES: Family[] = [
       colour(tone, 'default', 'text'),
       colour(tone, 'muted', 'fill'),
       colour(tone, 'outline', 'outline'),
+      // Only success has a translucent wash so far, because only success needed
+      // one: it is the tint on a resolved thread. The others gain one when a
+      // component asks, not before.
+      ...(tone === 'success' ? [colour(tone, 'wash', 'fill')] : []),
     ]),
   },
   {

package/tailwind-preset.js

@@ -154,6 +154,11 @@ export default {
         'warning-outline': 'var(--warning-outline)',
         'success-outline': 'var(--success-outline)',
         'error-outline':   'var(--error-outline)',
+        // The same hues as the outlines, at a fill's strength rather than an
+        // edge's: `-outline` is 30%, `-wash` is 11%. Peek tinted rows with its
+        // own copies of these before they moved here.
+        'accent-wash':     'var(--accent-wash)',
+        'success-wash':    'var(--success-wash)',
         'scrim':           'var(--scrim)',
       },
       boxShadow: {
@@ -164,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/tokens.css

@@ -72,6 +72,8 @@
   --warning-outline: rgba(245, 158, 11, 0.3);
   --success-outline: rgba(14, 160, 111, 0.3);
   --error-outline:   rgba(239, 68, 68, 0.3);
+  --accent-wash:     rgba(139, 92, 246, 0.11);
+  --success-wash:    rgba(14, 160, 111, 0.11);
   --glow-warning:    0 0 5px rgba(245, 158, 11, 0.4);
   --glow-success:    0 0 5px rgba(14, 160, 111, 0.7);
   --glow-accent:     0 0 5px rgba(139, 92, 246, 0.6);
@@ -133,6 +135,8 @@
   --warning-outline: rgba(251, 191, 36, 0.3);
   --success-outline: rgba(52, 211, 153, 0.3);
   --error-outline:   rgba(248, 113, 113, 0.3);
+  --accent-wash:     rgba(167, 139, 250, 0.11);
+  --success-wash:    rgba(52, 211, 153, 0.11);
   --glow-warning:    0 0 5px rgba(251, 191, 36, 0.4);
   --glow-success:    0 0 5px rgba(52, 211, 153, 0.7);
   --glow-accent:     0 0 5px rgba(167, 139, 250, 0.6);
@@ -198,6 +202,8 @@
   --warning-outline: rgba(255, 176, 32, 0.3);
   --success-outline: rgba(63, 222, 140, 0.3);
   --error-outline:   rgba(255, 107, 107, 0.3);
+  --accent-wash:     rgba(86, 200, 255, 0.11);
+  --success-wash:    rgba(63, 222, 140, 0.11);
   --glow-warning:    0 0 5px rgba(255, 176, 32, 0.4);
   --glow-success:    0 0 5px rgba(63, 222, 140, 0.7);
   --glow-accent:     0 0 5px rgba(86, 200, 255, 0.6);
@@ -269,6 +275,8 @@
   --warning-outline: rgba(224, 176, 74, 0.3);
   --success-outline: rgba(70, 192, 138, 0.3);
   --error-outline:   rgba(229, 105, 122, 0.3);
+  --accent-wash:     rgba(75, 88, 212, 0.11);
+  --success-wash:    rgba(70, 192, 138, 0.11);
   --glow-warning:    0 0 5px rgba(224, 176, 74, 0.4);
   --glow-success:    0 0 5px rgba(70, 192, 138, 0.7);
   --glow-accent:     0 0 5px rgba(75, 88, 212, 0.6);

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)
-  })
-})