@weft-js/warp 0.0.0-stage → 0.1.1

package/src/parts.tsx

@@ -0,0 +1,93 @@
+import { CheckIcon } from '@weft-js/warp-icons'
+// Small 05 and 02 atoms the app patterns and flows share, each the specimen markup. Internal: not exported from the
+// index, so a pack that needs one pays only for its own CSS.
+import { derived } from '@weft-js/core'
+import type { Tone } from './Button'
+import { Icon, toneIcon } from './Icon'
+import './styles'
+import '@weft-js/warp-core/styles/app/tokens.css'
+import '@weft-js/warp-core/styles/app/avatar.css'
+import '@weft-js/warp-core/styles/components/badge.css' // the status dot
+import '@weft-js/warp-core/styles/components/empty-state.css'
+import '@weft-js/warp-core/styles/components/live-status.css'
+import '@weft-js/warp-core/styles/components/spinner.css'
+import '@weft-js/warp-core/styles/components/steps.css'
+import '@weft-js/warp-core/styles/layout/tokens.css'
+import '@weft-js/warp-core/styles/layout/banner.css'
+
+/** One path on the 24 grid, for a glyph the shared Icon set doesn't carry. */
+export const Glyph = ({ d, ...rest }: { d: string; [attr: string]: unknown }) => <svg data-icon viewBox="0 0 24 24" aria-hidden="true" focusable="false" {...rest}><path d={d} /></svg>
+
+export const initials = (name: string) => name.split(/\s+/).filter(Boolean).slice(0, 2).map(w => w[0]).join('').toUpperCase()
+
+/** Avatar with initials (07 §0); `name` is real text for the row around it, so the circle itself is aria-hidden. */
+export function Avatar({ name, size, status, presence, ...rest }: { name: string; size?: 'sm' | 'md' | 'lg' | 'xl' | undefined; status?: Tone | undefined; presence?: number | undefined; [attr: string]: unknown }) {
+  return (
+    <span data-scope="avatar" data-size={size === 'md' ? undefined : size} data-presence={presence} aria-hidden="true" {...rest}>
+      {initials(name)}
+      {status && <span data-scope="status-dot" data-tone={status}></span>}
+    </span>
+  )
+}
+
+/** Where a live connection stands. */
+export type LiveState = 'connecting' | 'live' | 'reconnecting' | 'offline'
+const LIVE: Record<LiveState, string> = { connecting: 'Connecting', live: 'Live', reconnecting: 'Reconnecting', offline: 'Offline' }
+const DOT: Partial<Record<LiveState, Tone>> = { live: 'positive', offline: 'critical' }
+
+/** The one realtime pill (07 §4.4): quiet while live, loud only in trouble. */
+export function LiveStatus({ state, label, children }: { state: LiveState; label?: string | undefined; children?: unknown }) {
+  const dot = derived(() => DOT[state])
+  return (
+    <span data-scope="live-status" data-state={state} role="status" aria-label={label ? `${label}: ${LIVE[state].toLowerCase()}` : undefined}>
+      {dot.value ? <span data-scope="status-dot" data-tone={dot.value}></span> : <span data-scope="spinner" aria-hidden="true"></span>}
+      {children ?? LIVE[state]}
+    </span>
+  )
+}
+
+/** Page-level message inside main (02 §5). `live` announces it; a Banner that was there on load stays role=note. */
+export function Banner({ tone = 'info', live, actions, children, ...rest }: { tone?: Tone | undefined; live?: 'polite' | 'assertive' | undefined; actions?: unknown; children?: unknown; [attr: string]: unknown }) {
+  const icon = derived(() => toneIcon[tone])
+  const acts = derived(() => actions) // one build, however often it is read
+  return (
+    <div data-scope="banner" data-tone={tone === 'info' ? undefined : tone} role={live === 'assertive' ? 'alert' : live ? 'status' : 'note'} {...rest}>
+      <span data-part="icon"><Icon name={icon.value} /></span>
+      <div data-part="body">{children}</div>
+      {acts.value !== undefined && <div data-part="actions">{acts.value}</div>}
+    </div>
+  )
+}
+
+export type Step = { id: string; title: unknown; description?: unknown; error?: boolean }
+
+/** Steps (05 §4): full labels, the compact count from the CSS. `current` is an index. */
+export function Steps({ label, steps, current }: { label: string; steps: Step[]; current: number }) {
+  return (
+    <div data-scope="steps">
+      <ol aria-label={label}>
+        {steps.map((s, i) => (
+          <li key={s.id} data-part="item" data-state={s.error ? 'error' : i < current ? 'complete' : i === current ? 'current' : undefined} aria-current={i === current ? 'step' : undefined}>
+            <span data-part="indicator"><CheckIcon /></span>
+            <span data-part="title">{s.title}</span>
+            {s.description !== undefined && <span data-part="description">{s.description}</span>}
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}
+
+/** Empty or error state (05 §5): the weave art, a title, one sentence, actions. */
+export function EmptyState({ title, tone, actions, children, ...rest }: { title: unknown; tone?: Tone | undefined; actions?: unknown; children?: unknown; [attr: string]: unknown }) {
+  const acts = derived(() => actions)
+  const body = derived(() => children)
+  return (
+    <div data-scope="empty-state" data-tone={tone} {...rest}>
+      <svg data-part="art" viewBox="0 0 96 64" aria-hidden="true"><g class="w"><path d="M12 4v56M28 4v56M44 4v56M60 4v56M76 4v56" /></g><path class="f" d="M4 24H92" /><path class="f" d="M4 40H92" style="stroke:var(--warp-color-border-strong)" /></svg>
+      <h2 data-part="title">{title}</h2>
+      {body.value !== undefined && <p data-part="description">{body.value}</p>}
+      {acts.value !== undefined && <div data-part="actions">{acts.value}</div>}
+    </div>
+  )
+}

package/src/schedule/Agenda.tsx

@@ -0,0 +1,173 @@
+import { PlusIcon } from '@weft-js/warp-icons'
+import { addDays, agendaItems, announce, at, clock, dayDots, eventsOn, fmt, longDuration, longPress, slide, swipePages, uid, weekDates, weekStart, ymd, type AgendaItem, type CalEvent, type IsoDate, type Slot } from '@weft-js/warp-core'
+import { derived, flush, state, untrack, type State } from '@weft-js/core'
+import { Button } from '../Button'
+import { bindable, usePickerEnv } from '../Picker'
+import { use } from '@weft-js/warp-core/weft'
+import { RepeatGlyph, tint, useNow } from './bits'
+import { EventEditor, type CalendarSource } from './EventEditor'
+import { MoveSheet } from './MoveSheet'
+import '@weft-js/warp-core/styles/app/agenda.css'
+import '@weft-js/warp-core/styles/components/fab.css'
+
+const summary = (e: CalEvent) => [e.location, e.video ? 'Video call' : '', e.attendees?.length ? `${e.attendees.length} people` : ''].filter(Boolean).join(' · ')
+
+function Row({ item, hourCycle, locale }: { item: AgendaItem; hourCycle?: string | undefined; locale: string }) {
+  const time = (m: number) => clock(m, locale, hourCycle)
+  return <>{item.kind === 'now'
+    ? <div data-part="now" role="listitem" aria-label={`Now, ${time(item.at)}`} aria-current="time"><span aria-hidden="true">{time(item.at)}</span><i></i></div>
+    : item.kind === 'free'
+      ? <div data-part="free" role="listitem"><span></span><span>{longDuration(item.minutes)} free</span></div>
+      : item.kind === 'allday'
+        ? <div data-part="row" data-allday="" data-cal={item.event.cal ?? 1} style={tint(item.event.cal)} role="listitem" data-id={item.event.id} tabindex="0"><time>All day</time><i></i><div><b>{item.event.title}</b></div></div>
+        : <div data-part="row" data-cal={item.event.cal ?? 1} style={tint(item.event.cal)} data-id={item.event.id} role="listitem" tabindex="0" aria-label={`${item.event.title}, ${time(item.s)} to ${time(item.e)}`}>
+            <time>{time(item.s)}<small>{time(item.e)}</small></time>
+            <i></i>
+            <div><b>{item.event.recurrence && <RepeatGlyph />}{item.event.recurrence ? ' ' : ''}{item.event.title}</b><span>{summary(item.event) || longDuration(item.e - item.s)}</span></div>
+          </div>}</>
+}
+
+/** One day's list of rows; the Agenda pages and the Calendar's Agenda view both draw it. */
+export function AgendaDay({ events, day, now, locale, hourCycle, label }: { events: CalEvent[]; day: string; now?: string | null | undefined; locale: string; hourCycle?: string | undefined; label: string }) {
+  const items = derived(() => agendaItems(events, day, now))
+  return <>{items.value.length
+    ? <div role="list" aria-label={label}>{items.value.map(i => <Row key={i.key} item={i} locale={locale} hourCycle={hourCycle} />)}</div>
+    : <div data-scope="empty-state"><p data-part="description">Nothing scheduled. Enjoy it.</p></div>}</>
+}
+
+/** Props for Agenda. */
+export type AgendaProps = {
+  events: CalEvent[]
+  /** The day it opens on: a state it writes as you page, or a plain value. */
+  date?: State<string> | string | undefined
+  defaultDate?: string | undefined
+  /** Called with the new day when you page or jump to today. */
+  onDateChange?: ((d: string) => void) | undefined
+  title?: unknown
+  /** The calendars the events belong to, for their colours and names. */
+  calendars?: CalendarSource[] | undefined
+  /** The IANA zone times are shown in, such as `Europe/Berlin`. The browser's otherwise. */
+  timeZone?: string | undefined
+  /** Pins today's date, for server rendering and tests. The browser's clock otherwise. */
+  today?: string | undefined
+  /** Pins the current time, for server rendering and tests. The browser's clock otherwise. */
+  now?: string | undefined
+  locale?: string | undefined
+  /** `h12` for AM and PM, `h23` for a 24-hour clock. The locale's otherwise. */
+  hourCycle?: string | undefined
+  firstDayOfWeek?: number | undefined
+  /** Long press: open your own sheet. Without it the built-in MoveSheet opens and calls `onMove`. */
+  onLongPress?: ((e: CalEvent) => void) | undefined
+  onMove?: (e: CalEvent, to: { start: string; end: string; resource?: string | undefined }) => void
+  onOpen?: ((e: CalEvent) => void) | undefined
+  /** The FAB opens the editor; Save calls this. */
+  onCreate?: ((e: CalEvent) => void) | undefined
+}
+
+/**
+ * The phone agenda (07 §2.3, `#cal-phone`): a week strip of APG tabs with dots per source, three day pages that swipe, a
+ * now marker, "1 h free" gaps and the FAB. A long press (or Shift+F10) opens the MoveSheet.
+ */
+export function Agenda(p: AgendaProps) {
+  const id = uid('agenda')
+  const env = usePickerEnv(() => p.locale, () => p.today)
+  const date = bindable<string>(() => p.date, () => p.defaultDate, untrack(() => env.today.value), () => p.onDateChange)
+  const now = useNow(() => p.now, () => p.timeZone)
+  const first = derived(() => p.firstDayOfWeek ?? weekStart(env.locale.value))
+  const week = derived(() => weekDates(date.value, first.value))
+  const pages = derived(() => [-1, 0, 1].map(d => ({ day: addDays(date.value, d), at: d })))
+  const month = derived(() => fmt(date.value, { month: 'long' }, env.locale.value))
+  const moving = state<CalEvent | null>(null)
+  const sheet = state(false)
+  const lifted = state<string | null>(null)
+  const draft = state<CalEvent | null>(null)
+  const editing = state(false)
+  let root: HTMLDivElement | undefined
+  let view: HTMLDivElement | undefined
+  let track: HTMLDivElement | undefined
+  const say = (t: string) => root && announce(root.ownerDocument, t)
+  const settle = (d: string, focus?: boolean  ) => {
+    date.set(d)
+    if (track) { track.style.removeProperty('--_dx') }
+    say(`${fmt(d, { weekday: 'long' }, env.locale.value)}, ${eventsOn(p.events, d).length} events`)
+    if (focus) { flush(); root?.querySelector<HTMLElement>('[role="tab"][aria-selected="true"]')?.focus() }
+  }
+  const go = (d: string, focus?: boolean  ) => {
+    const off = untrack(() => date.value)
+    if (d === off) { track?.style.setProperty('--_dx', '0px'); return }
+    const near = addDays(off, 1) === d || addDays(off, -1) === d
+    if (!track || !near) return settle(d, focus)
+    slide(track, `${d > off ? -100 : 100}%`, () => settle(d, focus))
+  }
+  const byId = (i: string | undefined) => p.events.find(e => e.id === i)
+  const open = (e: CalEvent) => {
+    if (p.onLongPress) return p.onLongPress(e)
+    if (!p.onMove) return
+    moving.value = e
+    lifted.value = e.id
+    sheet.value = true
+  }
+  use(swipePages, () => view, () => ({ track: () => track, onStep: (d: 1 | -1) => go(addDays(date.value, d)) }))
+  use(longPress, () => view, () => ({ selector: '[data-part="row"][data-id]', onPress: (r: HTMLElement) => { const e = byId(r.dataset.id); if (e) open(e) } }))
+  const onKey = (e: KeyboardEvent) => {
+    const r = (e.target as Element).closest?.<HTMLElement>('[data-part="row"][data-id]')
+    if (!r) return
+    const hit = byId(r.dataset.id)
+    if (!hit) return
+    if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); open(hit) }
+    else if (e.key === 'Enter') { e.preventDefault(); p.onOpen ? p.onOpen(hit) : open(hit) }
+  }
+  const onClick = (e: MouseEvent) => { const hit = byId((e.target as Element).closest?.<HTMLElement>('[data-part="row"][data-id]')?.dataset.id); if (hit) p.onOpen?.(hit) }
+  const onTabs = (e: KeyboardEvent) => {
+    const to = ({ ArrowRight: 1, ArrowLeft: -1 } as Record<string, number>)[e.key]
+    const days = week.value
+    const i = days.indexOf(date.value as IsoDate)
+    if (e.key === 'Home' || e.key === 'End') { e.preventDefault(); return settle(days[e.key === 'Home' ? 0 : 6]!, true) }
+    if (!to) return
+    e.preventDefault()
+    const rtl = getComputedStyle(e.currentTarget as Element).direction === 'rtl'
+    settle(days[(i + (rtl ? -to : to) + 7) % 7]!, true)
+  }
+  const create = () => {
+    const d = date.value
+    draft.value = { id: uid('new'), title: '', start: `${d}T13:00`, end: `${d}T14:00`, cal: 1 }
+    editing.value = true
+  }
+  const moved = (e: CalEvent, to: Slot) => {
+    p.onMove?.(e, { start: at(to.date, to.s), end: at(to.date, to.e), resource: to.resource })
+    go(to.date)
+    say(`Moved ${e.title} to ${fmt(to.date, { weekday: 'long' }, env.locale.value)} ${clock(to.s, env.locale.value, p.hourCycle)}`)
+  }
+  return (
+    <div ref={n => (root = n)} data-scope="agenda" data-part="root">
+      <div data-part="app-bar">
+        <h3 data-part="app-title">{p.title ?? month.value}</h3>
+        <span data-part="spacer"></span>
+        <Button emphasis="outline" tone="neutral" size="sm" onClick={() => go(env.today.value)}>Today</Button>
+      </div>
+      <div data-part="strip" role="tablist" aria-label={`Week of ${fmt(week.value[0]!, { month: 'short', day: 'numeric' }, env.locale.value)}`} onKeyDown={onTabs}>
+        {week.value.map(d => (
+          <button key={d} type="button" role="tab" id={`${id}-${d}`} aria-controls={`${id}-panel`} aria-selected={d === date.value ? 'true' : 'false'} tabindex={d === date.value ? '0' : '-1'} data-today={d === env.today.value ? '' : undefined} onClick={() => go(d)}>
+            <strong class="sr">{fmt(d, { weekday: 'long', month: 'short', day: 'numeric' }, env.locale.value)}</strong>
+            <span aria-hidden="true">{fmt(d, { weekday: 'narrow' }, env.locale.value)}</span>
+            <b aria-hidden="true">{ymd(d)[2]}</b>
+            <i>{dayDots(p.events, d).map(c => <em key={c} data-cal={c}></em>)}</i>
+          </button>
+        ))}
+      </div>
+      <div ref={n => (view = n)} data-part="viewport" id={`${id}-panel`} role="tabpanel" aria-labelledby={`${id}-${date.value}`} onKeyDown={onKey} onClick={onClick}>
+        <div ref={n => (track = n)} data-part="track">
+          {pages.value.map(g => (
+            <div key={g.day} data-part="page" aria-hidden={g.at ? 'true' : undefined} inert={g.at ? true : undefined}>
+              <div data-part="day-title"><h4>{fmt(g.day, { weekday: 'long' }, env.locale.value)}</h4><span class="muted">{fmt(g.day, { month: 'short', day: 'numeric' }, env.locale.value)}</span></div>
+              <AgendaDay events={p.events} day={g.day} now={now.value} locale={env.locale.value} hourCycle={p.hourCycle} label={fmt(g.day, { weekday: 'long' }, env.locale.value)} />
+            </div>
+          ))}
+        </div>
+      </div>
+      {p.onCreate && <button data-scope="fab" type="button" aria-label="New event" onClick={create}><PlusIcon /></button>}
+      <MoveSheet open={sheet} event={moving.value} events={p.events} firstDayOfWeek={first.value} locale={env.locale.value} hourCycle={p.hourCycle} onMove={moved} onClose={() => (lifted.value = null)} />
+      <EventEditor open={editing} event={draft.value} isNew calendars={p.calendars} timeZone={p.timeZone} locale={env.locale.value} today={env.today.value} onSave={e => p.onCreate?.(e)} />
+    </div>
+  )
+}

package/src/schedule/AvailabilityEditor.tsx

@@ -0,0 +1,164 @@
+import { AlertIcon, GlobeIcon, PlusIcon, XIcon } from '@weft-js/warp-icons'
+import { announce, fmt, hhmm, nextRange, rangeIssues, timeOptions, uid, weekValid, type IsoDate, type Override, type Range, type WeekDay } from '@weft-js/warp-core'
+import { derived, flush, state, untrack } from '@weft-js/core'
+import { Button } from '../Button'
+import { Switch } from '../Choice'
+import { DateField } from '../DateField'
+import { Input } from '../Field'
+import { usePickerEnv } from '../Picker'
+import { Select } from '../Select'
+import { confirmSweep } from './bits'
+import '@weft-js/warp-core/styles/app/availability.css'
+
+/** A person's bookable hours: the usual week and its exceptions. */
+export type Availability = { week: WeekDay[]; overrides: Override[] }
+/** Props for AvailabilityEditor. */
+export type AvailabilityEditorProps = {
+  defaultValue: Availability
+  /** "New York (EDT)". */
+  zoneLabel?: string | undefined
+  /** Pins today's date, for server rendering and tests. The browser's clock otherwise. */
+  today?: string | undefined
+  locale?: string | undefined
+  /** Times on offer, minutes. */
+  from?: number | undefined
+  to?: number | undefined
+  step?: number | undefined
+  /** Rejecting says so and keeps the changes. */
+  onSave: (v: Availability) => void | Promise<unknown>
+}
+
+const optionsOf = (from?: number  , to?: number  , step?: number) => timeOptions(from, to, step).map(m => ({ value: String(m), label: hhmm(m) }))
+
+/**
+ * AvailabilityEditor (07 §6.4): a Switch and From/To ranges per weekday, "Copy Monday to weekdays", date overrides. Ranges
+ * validate on change; Save stays blocked with focus on the first invalid time. Saves nothing until Save.
+ */
+export function AvailabilityEditor(p: AvailabilityEditorProps) {
+  const id = uid('avail')
+  const env = usePickerEnv(() => p.locale, () => p.today)
+  const seed = untrack(() => p.defaultValue)
+  const week = state<WeekDay[]>(seed.week.map(d => ({ ...d, ranges: d.ranges.map(r => [...r] as Range) })))
+  const overrides = state<Override[]>(seed.overrides.map(o => ({ ...o })))
+  const status = state('No unsaved changes')
+  const busy = state(false)
+  const adding = state(false)
+  const newDate = state<IsoDate | null>(null)
+  const newNote = state('')
+  const off = state(true)
+  const newFrom = state('540')
+  const newTo = state('780')
+  const options = derived(() => optionsOf(p.from, p.to, p.step))
+  const dayName = (d: number) => fmt(`2024-01-${String(7 + d).padStart(2, '0')}`, { weekday: 'long' }, env.locale.value)
+  let root: HTMLDivElement | undefined
+  let saveBtn: HTMLElement | undefined
+  const say = (t: string, loud = false) => root && announce(root.ownerDocument, t, loud)
+  const dirty = () => (status.value = 'Unsaved changes')
+  const patch = (day: number, f: (d: WeekDay) => WeekDay) => { week.value = week.value.map(d => (d.day === day ? f(d) : d)); dirty() }
+  const setTime = (day: number, at: number, side: 0 | 1, v: number) => {
+    patch(day, d => ({ ...d, ranges: d.ranges.map((r, i) => (i === at ? (side ? [r[0], v] : [v, r[1]]) : r)) }))
+    const err = rangeIssues(week.value.find(d => d.day === day)!.ranges)[at]
+    if (err) say(`${dayName(day)}: ${err}`, true)
+  }
+  const focus = (sel: string) => { flush(); root?.querySelector<HTMLElement>(sel)?.focus() }
+  const addRange = (day: number) => { patch(day, d => ({ ...d, ranges: [...d.ranges, nextRange(d.ranges, p.to)] })); say(`Range added on ${dayName(day)}`); focus(`[data-day-of="${day}"] [data-part="range"]:last-child button[data-part="input"]`) }
+  const removeRange = (day: number, at: number) => { patch(day, d => ({ ...d, ranges: d.ranges.filter((_, i) => i !== at) })); say(`Range removed from ${dayName(day)}`); focus(`[data-add="${day}"]`) }
+  const copyMonday = () => {
+    const mon = week.value.find(d => d.day === 1)
+    if (!mon) return
+    week.value = week.value.map(d => (d.day >= 2 && d.day <= 5 ? { ...d, on: mon.on, ranges: mon.ranges.map(r => [...r] as Range) } : d))
+    dirty()
+    say(`${dayName(1)}'s hours copied to ${dayName(2)} through ${dayName(5)}`)
+  }
+  const addOverride = () => {
+    if (!newDate.value) return
+    const o: Override = { id: uid('ov'), date: newDate.value, ranges: off.value ? null : [[+newFrom.value, +newTo.value]], note: newNote.value || undefined }
+    overrides.value = [...overrides.value, o]
+    adding.value = false
+    newDate.value = null
+    newNote.value = ''
+    dirty()
+    say(`Override added for ${fmt(o.date, { dateStyle: 'long' }, env.locale.value)}`)
+    focus(`[data-rov="${o.id}"]`)
+  }
+  const removeOverride = (o: Override) => { overrides.value = overrides.value.filter(x => x.id !== o.id); dirty(); say(`Override for ${fmt(o.date, { dateStyle: 'long' }, env.locale.value)} removed`); focus('[data-add-ov]') }
+  const save = async () => {
+    if (!weekValid(week.value)) {
+      say('Fix the highlighted ranges before saving.', true)
+      root?.querySelector<HTMLElement>('[data-part="range"][data-invalid] button[data-part="input"]')?.focus()
+      return
+    }
+    busy.value = true
+    try {
+      await p.onSave({ week: week.value, overrides: overrides.value })
+      status.value = 'Saved · booking pages updated'
+      confirmSweep(saveBtn)
+      say('Availability saved')
+    } catch (err) {
+      status.value = `Couldn't save: ${(err as Error | undefined)?.message ?? 'try again'}`
+      say(status.value, true)
+    } finally { busy.value = false }
+  }
+  const hours = (o: Override) => (o.ranges ? o.ranges.map(r => `${hhmm(r[0])}–${hhmm(r[1])}`).join(', ') : 'Unavailable')
+  return (
+    <div ref={n => (root = n)} data-scope="availability">
+      <div class="row">
+        {p.zoneLabel && <span class="muted"><GlobeIcon /> Times in {p.zoneLabel}</span>}
+        <span style="flex:1"></span>
+        <Button emphasis="ghost" tone="neutral" size="sm" onClick={copyMonday}>Copy Monday to weekdays</Button>
+      </div>
+      <ul data-part="week" aria-label="Weekly hours">
+        {week.value.map(d => <Day key={d.day} day={d} id={id} name={dayName(d.day)} options={options.value} onToggle={on => { patch(d.day, x => ({ ...x, on })); say(`${dayName(d.day)} ${on ? 'available' : 'unavailable'}`) }} onTime={setTime} onAdd={addRange} onRemove={removeRange} />)}
+      </ul>
+      <div class="stack">
+        <span data-part="eyebrow">Date overrides</span>
+        <ul data-part="overrides" aria-label="Date overrides">
+          {overrides.value.map(o => (
+            <li key={o.id}>
+              <span><b>{fmt(o.date, { weekday: 'short', month: 'short', day: 'numeric' }, env.locale.value)}</b> · {hours(o)}{o.note && <><br /><small>{o.note}</small></>}</span>
+              <Button emphasis="ghost" tone="neutral" size="sm" icon={XIcon} label={`Remove override for ${fmt(o.date, { month: 'short', day: 'numeric' }, env.locale.value)}`} data-rov={o.id} onClick={() => removeOverride(o)} />
+            </li>
+          ))}
+          {!overrides.value.length && <li><span class="muted">No overrides. Add one for holidays or a half day.</span></li>}
+        </ul>
+        {adding.value
+          ? <div class="stack" role="group" aria-label="New override">
+              <DateField label="Date" value={newDate} today={env.today.value} locale={env.locale.value} />
+              <Switch checked={off.value} onChange={(e: Event) => (off.value = (e.currentTarget as HTMLInputElement).checked)}>Unavailable all day</Switch>
+              {!off.value && <div class="row"><Select label="From" options={options.value} value={newFrom.value} onChange={(e: Event) => (newFrom.value = (e.currentTarget as HTMLInputElement).value)} /><Select label="To" options={options.value} value={newTo.value} onChange={(e: Event) => (newTo.value = (e.currentTarget as HTMLInputElement).value)} /></div>}
+              <Input label="Note" value={newNote.value} onInput={e => (newNote.value = e.currentTarget.value)} />
+              <div class="row"><Button size="sm" disabled={!newDate.value} onClick={addOverride}>Add</Button><Button emphasis="ghost" tone="neutral" size="sm" onClick={() => (adding.value = false)}>Cancel</Button></div>
+            </div>
+          : <div class="row"><Button emphasis="outline" tone="neutral" size="sm" data-add-ov="" onClick={() => (adding.value = true)}>Add an override</Button></div>}
+      </div>
+      <div class="row">
+        <span style="flex:1"></span>
+        <span class="muted" role="status">{status.value}</span>
+        <Button size="sm" loading={busy.value} ref={(n: HTMLElement) => (saveBtn = n)} onClick={save}>Save availability</Button>
+      </div>
+    </div>
+  )
+}
+
+function Day({ day, id, name, options, onToggle, onTime, onAdd, onRemove }: { day: WeekDay; id: string; name: string; options: { value: string; label: string }[]; onToggle: (on: boolean) => void; onTime: (d: number, at: number, side: 0 | 1, v: number) => void; onAdd: (d: number) => void; onRemove: (d: number, at: number) => void }) {
+  const issues = derived(() => rangeIssues(day.ranges))
+  const rows = derived(() => day.ranges.map((r, at) => ({ r, at, k: `${day.day}-${at}`, error: issues.value[at] })))
+  return (
+    <li data-part="day" data-day-of={day.day}>
+      <Switch checked={day.on} onChange={(e: Event) => onToggle((e.currentTarget as HTMLInputElement).checked)}>{name}</Switch>
+      <div data-part="ranges">
+        {day.on
+          ? rows.value.map(x => (
+              <div key={x.k} data-part="range" data-invalid={x.error ? '' : undefined} role="group" aria-label={`${name}, range ${x.at + 1}`}>
+                <Select label="From" size="sm" options={options} value={String(x.r[0])} aria-invalid={x.error ? 'true' : undefined} aria-describedby={x.error ? `${id}-${x.k}-e` : undefined} hold={!!x.error} onChange={(e: Event) => onTime(day.day, x.at, 0, +(e.currentTarget as HTMLInputElement).value)} />
+                <Select label="To" size="sm" options={options} value={String(x.r[1])} aria-invalid={x.error ? 'true' : undefined} aria-describedby={x.error ? `${id}-${x.k}-e` : undefined} hold={!!x.error} onChange={(e: Event) => onTime(day.day, x.at, 1, +(e.currentTarget as HTMLInputElement).value)} />
+                {day.ranges.length > 1 && <Button emphasis="ghost" tone="neutral" size="sm" icon={XIcon} label={`Remove ${name} range ${x.at + 1}`} onClick={() => onRemove(day.day, x.at)} />}
+                {x.at === day.ranges.length - 1 && <Button emphasis="ghost" tone="neutral" size="sm" label={`Add a range on ${name}`} data-icon-only="" data-add={day.day} onClick={() => onAdd(day.day)}><PlusIcon /></Button>}
+                {x.error && <span data-part="error" id={`${id}-${x.k}-e`}><AlertIcon /> {x.error}</span>}
+              </div>
+            ))
+          : <span data-part="off">Unavailable</span>}
+      </div>
+    </li>
+  )
+}

package/src/schedule/BookingCalendar.tsx

@@ -0,0 +1,132 @@
+import { announce, clock, fmt, longDuration, minutes, uid, type IsoDate, type IsoTime } from '@weft-js/warp-core'
+import { derived, flush, state, untrack, type State } from '@weft-js/core'
+import { Button } from '../Button'
+import { InlineCalendar } from '../Calendar'
+import { Alert } from '../Alert'
+import { usePickerEnv } from '../Picker'
+import { Skeleton } from '../Skeleton'
+import { TimeField } from '../TimeField'
+import { SweepParts, confirmSweep } from './bits'
+import '@weft-js/warp-core/styles/app/booking.css'
+import '@weft-js/warp-core/styles/rich/calendar-grid.css'
+
+/** A start in minutes; `disabled` shows it taken rather than hiding it. */
+export type BookingSlot = { s: number; disabled?: boolean | undefined }
+/** The slot being booked, in minutes from midnight; manual when typed rather than picked. */
+export type BookingDetails = { date: string; s: number; e: number; manual: boolean }
+/** Props for BookingCalendar. */
+export type BookingCalendarProps = {
+  /** The times for a day: a list, or read from the date. */
+  slots: BookingSlot[] | ((date: string) => BookingSlot[])
+  /** The picked day: a state it writes, or a plain value with `onDateChange`. */
+  date?: State<IsoDate | null> | IsoDate | undefined
+  /** The day picked at the start, when the calendar keeps its own state. */
+  defaultDate?: IsoDate | undefined
+  /** Called with the day picked. Load that day's slots here. */
+  onDateChange?: ((d: IsoDate) => void) | undefined
+  duration?: number | undefined
+  min?: string | undefined
+  max?: string | undefined
+  isDateUnavailable?: ((d: IsoDate) => boolean) | undefined
+  loading?: boolean | undefined
+  error?: unknown
+  /** Pins today's date, for server rendering and tests. The browser's clock otherwise. */
+  today?: string | undefined
+  locale?: string | undefined
+  /** `h12` for AM and PM, `h23` for a 24-hour clock. The locale's otherwise. */
+  hourCycle?: string | undefined
+  /** Rejecting keeps the confirm step and says why. */
+  onBook: (b: BookingDetails) => void | Promise<unknown>
+}
+
+/**
+ * BookingCalendar (07 §2.2): InlineCalendar plus slot buttons (`aria-pressed`), a confirm step with a manual time as the
+ * fallback field path, and the arrival sweep on the confirmation card.
+ */
+export function BookingCalendar(p: BookingCalendarProps) {
+  const id = uid('book')
+  const env = usePickerEnv(() => p.locale, () => p.today)
+  const own = state<IsoDate | null>(untrack(() => (typeof p.date === 'string' ? p.date : p.defaultDate) ?? null))
+  const date = derived(() => (p.date && typeof p.date === 'object' ? p.date.value : typeof p.date === 'string' ? p.date : own.value))
+  const pick = state<number | null>(null)
+  const manual = state(false)
+  const typed = state<IsoTime | null>(null)
+  const stage = state<'pick' | 'confirm' | 'done'>('pick')
+  const busy = state(false)
+  const failed = state<string | null>(null)
+  const len = derived(() => p.duration ?? 30)
+  const list = derived(() => { const d = date.value; if (!d) return []; return typeof p.slots === 'function' ? p.slots(d) : p.slots })
+  const chosen = derived(() => (manual.value ? (typed.value ? minutes(typed.value) : null) : pick.value))
+  const when = derived(() => { const d = date.value, s = chosen.value; return d && s !== null ? `${fmt(d, { weekday: 'short', month: 'short', day: 'numeric' }, env.locale.value)} · ${clock(s, env.locale.value, p.hourCycle)}–${clock(s + len.value, env.locale.value, p.hourCycle)}` : '' })
+  let root: HTMLDivElement | undefined
+  const setDate = (d: IsoDate) => {
+    if (p.date && typeof p.date === 'object') p.date.value = d
+    else own.value = d
+    p.onDateChange?.(d)
+    pick.value = null
+    stage.value = 'pick'
+  }
+  const onSlots = (e: KeyboardEvent) => {
+    const d = ({ ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 } as Record<string, number>)[e.key]
+    const on = [...(e.currentTarget as HTMLElement).querySelectorAll<HTMLButtonElement>('button:not(:disabled)')]
+    const i = on.indexOf(e.target as HTMLButtonElement)
+    if (d && i >= 0) { e.preventDefault(); on[(i + d + on.length) % on.length]!.focus() }
+  }
+  const toConfirm = () => {
+    stage.value = 'confirm'
+    flush()
+    root?.querySelector<HTMLElement>('[data-confirm-step] button:last-child')?.focus()
+  }
+  const book = async () => {
+    const d = date.value, s = chosen.value
+    if (!d || s === null || busy.value) return
+    busy.value = true
+    failed.value = null
+    try {
+      await p.onBook({ date: d, s, e: s + len.value, manual: manual.value })
+      stage.value = 'done'
+      flush()
+      if (root) { confirmSweep(root.querySelector('[data-part="slot"][aria-pressed="true"]')); announce(root.ownerDocument, `Booked ${when.value}`) }
+    } catch (err) {
+      failed.value = (err as Error | undefined)?.message ?? 'That time was just taken.'
+      if (root) announce(root.ownerDocument, `Couldn't book: ${failed.value}`, true)
+    } finally { busy.value = false }
+  }
+  const empty = derived(() => !list.value.some(s => !s.disabled))
+  return (
+    <div ref={n => (root = n)} data-scope="booking" data-part="root">
+      <InlineCalendar aria-label="Choose a date" value={date.value} onValueChange={d => setDate(d as IsoDate)} today={env.today.value} locale={env.locale.value} min={p.min} max={p.max} isDateUnavailable={p.isDateUnavailable} />
+      {stage.value === 'done'
+        ? <div data-arrive="" class="row" role="status"><div><b>Booked · {when.value}</b><p class="muted">{longDuration(len.value)}. We've sent the details.</p></div><Button emphasis="ghost" tone="neutral" size="sm" onClick={() => { stage.value = 'pick'; pick.value = null }}>Book another</Button></div>
+        : <>
+            {!date.value && <p class="muted">Pick a date to see the times.</p>}
+            {date.value && p.loading && <div data-part="slots" aria-busy="true"><Skeleton /><Skeleton /><Skeleton /></div>}
+            {date.value && !p.loading && p.error && <Alert tone="critical" title="Couldn't load the times" live>{p.error}</Alert>}
+            {date.value && !p.loading && !p.error && !manual.value && (
+              <>
+                <div data-part="slots" role="group" aria-label={`Times on ${fmt(date.value, { dateStyle: 'full' }, env.locale.value)}`} onKeyDown={onSlots}>
+                  {list.value.map(x => <button key={x.s} type="button" data-part="slot" data-sweep="" aria-pressed={x.s === pick.value ? 'true' : 'false'} disabled={x.disabled} onClick={() => { pick.value = x.s; stage.value = 'pick' }}><SweepParts />{clock(x.s, env.locale.value, p.hourCycle)}</button>)}
+                </div>
+                {empty.value && <p class="muted">No times left on this day.</p>}
+              </>
+            )}
+            {date.value && manual.value && <TimeField id={`${id}-t`} label="Time" value={typed} locale={env.locale.value} hourCycle="h23" hint="Type any time." />}
+            {date.value && !p.error && (
+              <div class="row">
+                <Button emphasis="ghost" tone="neutral" size="sm" onClick={() => { manual.value = !manual.value; stage.value = 'pick' }}>{manual.value ? 'Show suggested times' : 'Enter a time'}</Button>
+                <span style="flex:1"></span>
+                {stage.value === 'pick' && <Button disabled={chosen.value === null} onClick={toConfirm}>Continue</Button>}
+              </div>
+            )}
+            {stage.value === 'confirm' && (
+              <div class="row" data-confirm-step="">
+                <span><b>{when.value}</b> <span class="muted">{longDuration(len.value)}</span></span>
+                <Button emphasis="outline" tone="neutral" size="sm" onClick={() => (stage.value = 'pick')}>Back</Button>
+                <Button size="sm" loading={busy.value} onClick={book}>Confirm</Button>
+              </div>
+            )}
+            {failed.value && <Alert tone="critical" title="Couldn't book" live>{failed.value}</Alert>}
+          </>}
+    </div>
+  )
+}