)

- add WithFooter story showing cancel/confirm footer pattern
- add DialogStateMatrix story covering all 6 states: default, with footer,
  without footer, large, x-large, fit
- add dialog-footer.test.ts with 5 structural tests verifying footer prop
  interface, slot attribute, and conditional Show wrapper

…lice 07, issue #440)

…slice 07, #440)

…7, issue #440)

…ice 07, issue #440)

Covers 4 Kobalte behavior requirements from issue #440:
- aria-modal attribute on dialog
- Escape key closes dialog
- Overlay click closes dialog
- focus-trap: Tab stays inside dialog

Also verifies [data-component="command-palette"] data attribute is set
after CommandPalette extraction in this slice.

DialogEditProject was orphaned: showEditProjectDialog had no callers
and was not exported. Per updated DESIGN.md (issue #440 §"Modals &
overlays"), form-style editing must use Sheet, not Dialog, so this
component would need a full rewrite to fit the spec. Deleting now to
keep slice 07 spec-aligned without dead code.

The dev branch removed --brand-danger / --brand-danger-hover, leaving
button[data-variant="danger"] referencing undefined custom properties
(no background, brand-orange focus ring). Map to --error / --error-text
so destructive buttons render correctly. Active state also dropped the
unrelated --surface-interactive-base (orange tint) in favour of
--error-text.

Required for slice 07 delete-session migration to secondary + danger
button pair (DESIGN.md §"Modals & overlays").

Per updated DESIGN.md §"Modals & overlays":

- Drop --scrim-overlay / --kbd-bg / --kbd-border tokens; inline values
  at consumers (spec: "no token, inline at use site").
- Dialog default width 640 -> 420; large/x-large size variants unchanged.
- Dialog overlay scrim is single value rgba(26,22,19,0.32) — no dark
  variant per spec.
- Dialog footer slot becomes MODE 1: sticky bottom + bg-cream +
  border-weaker top + 12/24 padding (for large/scrolling dialogs). MODE 2
  small confirms render footer inline outside the slot.
- Sheet width 480 -> 420 (4 sides).
- Sheet slide-in keeps --duration-slow (240ms); slide-out switches to
  --duration-base (120ms) so dismiss feels snappy.
- Sheet footer mirrors dialog footer MODE 1 styling.
- Keybind chip inlines kbd colors with explicit dark-mode variants
  (data-color-scheme + prefers-color-scheme).
- sheet.test.ts asserts inlined scrim color in dialog.css.

…440)

Per DESIGN.md §"Modals & overlays", small destructive confirms use
MODE 2: no border, no cream background, footer rendered inline inside
the dialog body with `flex justify-end gap-2 px-6 pb-6`. Buttons pair
secondary + danger (not ghost + primary).

Migrates both copies of DialogDeleteSession to match dialog-rename-session
(the MODE 2 reference):

- packages/app/src/components/dialog-delete-session.tsx
- packages/app/src/pages/session/message-timeline.tsx (inline copy)

Width pinned to 420 via `w-full max-w-[420px] mx-auto` so this dialog
keeps spec width even if Dialog primitive default changes again.

…#440)

Mirror the source change in da2f6f8: danger variant maps to
--error / --error-text per DESIGN.md §"Modals & overlays". Use regex
scoped to the data-variant="danger" block so the assertion can't
accidentally pass on a stray --error reference elsewhere in the file.

…e 07, #440)

Slice 07 introduced packages/ui/src/components/command-palette.{tsx,css}
and sheet.{tsx,css} but never added the corresponding @import lines to
src/styles/index.css. Browsers loaded the components without their
styles, so CommandPalette rendered without background/border/flex layout
(making ⌘K appear as a grey overlay with invisible content) and Sheet
was equally broken whenever a consumer would land.

Add both imports in alphabetic position. No other changes.

The inline DialogDeleteSession (line 953), deleteSession helper (line
887), and navigateAfterSessionRemoval (line 874) had no callers in the
file or anywhere else — sidebar deletion goes through
@/components/dialog-delete-session via layout.tsx:1153, not through this
file. Removing the trio drops 90+ lines of dead code that was misleading
me into double-implementing dialog visuals.

Default Spotlight/Raycast-style top-anchored layout (padding-top: 80px,
align-items: flex-start) felt too high on smaller screens. Switch to
full vertical centering.

)

Slice 07 set Dialog default width to 420 per DESIGN.md, but
dialog-select-provider renders a multi-column row (icon · name ·
description · Recommended badge) that wraps and becomes unreadable at
that width. Apply size="large" (800px) — same as connect-websearch /
custom-provider / release-notes / select-server already use.

Other 7 list dialogs (select-model, manage-models, fork, select-mcp,
select-directory, select-model-unpaid, connect-provider) were checked
and read fine at 420; not migrating preemptively.

Per CodeRabbit #3194493724: passing props.class as a classList key
(`[props.class ?? ""]: !!props.class`) breaks at runtime when the prop
holds a multi-class Tailwind string — DOMTokenList.toggle rejects tokens
containing whitespace. Forward class and classList separately so SolidJS
sets the className attribute directly and only uses classList for the
reactive map.

Sheet has no consumers yet, so no live regression — but the bug would
fire on first usage.

#440)

Per CodeRabbit #3194493692: page.evaluate(() => document.activeElement)
returns null because Playwright cannot serialize DOM nodes across
contexts; the resulting `focused` value was always null and never read
inside dialog.evaluate. The assertion is carried entirely by
el.contains(document.activeElement) re-querying the live DOM. Drop the
misleading parameter and the page.evaluate call.

Per CodeRabbit #3194493701: Kobalte.Content always renders role="dialog";
without an accessible label screen readers announce "dialog" with no
context (WCAG 4.1.2). Add an optional `label` prop on CommandPalette
that forwards to aria-label, and pass "palette.aria.label" / "命令面板"
from dialog-select-file.

Per CodeRabbit #3194829417 (partial accept): use design tokens, not
hardcoded colors. Reviewer suggested --kbd-bg / --kbd-border which
DESIGN.md does not define and dev branch never had. Apply the spec L264
contract instead: --bg-base background, 1px --border-weak ring, 1px
hard shadow (physical keycap look), padding 1px/6px, font: var(--type-kbd).

Drops the explicit dark-mode blocks because --bg-base / --border-weak
already have dark variants in theme.css that cascade automatically.

…ice 07, #440)

Earlier draft used --error-text as the hover background. In light theme
this is a deeper red and works, but in dark theme --error-text mirrors
to a *lighter* red (#f0867a) which combined with white text drops
contrast to ~2:1, well below WCAG AA (4.5:1 for 13px).

Switch to the same overlay pattern as secondary: keep --error as the
base, composite --hover-overlay (5% white in dark / 4% black in light)
on hover, --hover-overlay-warm on active. Both themes get a visible
state delta without inverting contrast.

Tests: update button-states to expect the overlay form; add a new
danger-button-contrast test that parses theme.css, composites the
overlay, and computes WCAG luminance / contrast vs --fg-on-brand for
both themes (rest >= 4.0 light / >= 3.0 dark; hover does not regress
below rest).

Hand-tested: delete-session danger button hover/active in both light
and dark themes.

…(slice 07, #440)

CommandPalette had a fixed max-height: 480px and centered layout; on
small windows (split-screen, ~400px height, remote desktop) the palette
overflowed the viewport top/bottom and content was clipped because the
shell sets overflow: hidden. Switch to max-height: min(480px, calc(100dvh - 32px))
so the palette never exceeds the available viewport.

Also sync stories: the docs blurb still claimed "Floats 80px from the
top of the viewport" (pre-centering); update to centered layout +
viewport-clamped max-height. Pass label="Command palette" to all three
stories to mirror the app caller and exercise the new aria-label prop.

…440)

Sheet declares title? as optional. When callers omit title there is no
Kobalte.Title to act as aria-labelledby and Kobalte.Content gets no
accessible name (WCAG 4.1.2). Add an optional label?: string prop and
forward it to aria-label only when title is absent (avoids
double-labelling when both are present).

Test: pin the prop in SheetProps and the conditional aria-label
expression in source, mirroring the existing structural test pattern in
sheet.test.ts.

Sheet has no app consumer yet (slice 08 form refactors will plumb this
through), but the contract is now safe by default.

…dence (slice 07, #440)

Pin the class/classList forwarding contract for both Dialog and Sheet:
both must use class={props.class} + classList={props.classList} as
separate props, not the legacy classList-key form
(classList={{ [props.class ?? ""]: !!props.class }}). The legacy form
is not actually a runtime crash because solid-js/web's toggleClassKey
trims and splits multi-token keys before delegating to DOM
classList.toggle, but the inline form is the codebase convention and
removes one layer of indirection.

Backstop: a third test reads solid-js/web/dist/web.js directly and
asserts the trim+split call is still present. If a future bun + solid
version bump removes that runtime invariant, this test fails and forces
us to re-evaluate whether the legacy form (anywhere it survives) is
still safe.

This is the indirect-evidence approach picked over launching DOM render
infra (happy-dom + babel-preset-solid + bun loader plugin) for this
slice. The DOM render infra story is tracked as a separate follow-up.

The migration from Dialog to CommandPalette dropped Dialog's
height: min(calc(100vh - 16px), 512px) clamp. The CSS fix is
max-height: min(480px, calc(100dvh - 32px)) on palette-content.

This e2e pins the behaviour at two viewport heights:
- 400px (below the 480 ceiling): palette stays inside viewport on top
  and bottom edges (1px tolerance for sub-pixel centering).
- 900px (above): palette respects the 480px ceiling rather than
  growing to fill available height.

A future refactor that drops the dvh clamp would fail here instead of
at user report time on small/split-screen windows.

Kobalte.Content renders as the role="dialog" element AND carries
data-slot="palette-content" itself. The previous spec did
`dialog.locator('[data-slot="palette-content"]')`, which queries
descendants for the same slot and finds nothing. Result: the spec
either timed out at toBeVisible() or silently passed without testing
the viewport clamp.

Switch to using the dialog locator directly and assert the slot
attribute as a positive contract check before measuring boundingBox.

The backstop test asserted the trim+split call inside
solid-js/web/dist/web.js still exists. Original intent was to alarm if
the runtime ever stopped neutralizing multi-token classList keys, since
the legacy classList-key form would then become a real crash hazard.
But Dialog and Sheet both forward via class={...} now — the legacy
form is gone, the backstop has nothing to back. It also reaches into
solid-js bundle internals (path, file naming, source string) and would
flake on any solid version bump unrelated to our code.

Keep the source-level forwarding contract assertions for both Dialog
and Sheet; drop the runtime grep.

…ice 07, #440)

The previous "active state uses --surface-interactive-base across all
variants" test was both inaccurate (danger active now overlays
--hover-overlay-warm on --error, not the cream surface) and weak
(asserted only that the token appears somewhere in the CSS, no per-
variant scoping).

Replace with one assertion per variant for primary/secondary/ghost
that actually scopes to data-variant + :active, plus a negative
assertion pinning that danger active does NOT use
--surface-interactive-base. The latter guards against a future
"convergence" refactor silently re-applying cream tone to a
destructive press.

… (slice 07, #440)

Mirror dialog.tsx's onOpenAutoFocus handler so [autofocus] elements are
explicitly focused on open. dialog-select-file uses
`<List search={{ autofocus: true }}>` to focus the textbox; without the
explicit handler we relied on Kobalte's first-focusable default, which
worked but had no regression guard.

Strengthen openPalette e2e helper with toBeFocused() and add a UI-source
test pinning the autofocus pattern.