@weft-js/warp 0.0.0-stage → 0.1.1

package/src/schedule/EventEditor.tsx

@@ -0,0 +1,87 @@
+import { at, asTime, dateOf, fmt, minuteOf, minutes, type CalEvent, 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 { Switch } from '../Choice'
+import { DateField } from '../DateField'
+import { Drawer } from '../Drawer'
+import { Input } from '../Field'
+import { RecurrenceField } from '../RecurrenceField'
+import { TimeZoneSelect } from '../RichSelect'
+import { Select } from '../Select'
+import { TimeField } from '../TimeField'
+import './bits'
+
+/** A calendar an event can live in. */
+export type CalendarSource = { id: number; name: string }
+/** Props for EventEditor. */
+export type EventEditorProps = {
+  open: State<boolean>
+  /** What it edits; rebuild the fields by passing a new object. */
+  event: CalEvent | null
+  isNew?: boolean | undefined
+  calendars?: CalendarSource[] | undefined
+  /** The IANA zone the times are edited in, such as `Europe/Berlin`. */
+  timeZone?: string | undefined
+  locale?: string | undefined
+  /** Pins today's date, for server rendering and tests. The browser's clock otherwise. */
+  today?: string | undefined
+  onSave: (e: CalEvent) => void
+  onCancel?: (() => void) | undefined
+}
+
+/** The event editor (07 §2.1, `#ev-sheet`): a Sheet, right on wide screens and bottom on a phone; the fields path for every drag. */
+export function EventEditor(p: EventEditorProps) {
+  let form: HTMLFormElement | undefined
+  const label = derived(() => (p.isNew ? 'New event' : 'Edit event'))
+  const save = () => form?.requestSubmit()
+  const cancel = () => { p.open.value = false; p.onCancel?.() }
+  return (
+    <Drawer open={p.open} title={label.value} description={p.event ? fmt(dateOf(p.event.start), { weekday: 'long', month: 'short', day: 'numeric' }, p.locale ?? 'en-US') : undefined} footer={<><Button emphasis="outline" tone="neutral" onClick={cancel}>Cancel</Button><Button onClick={save}>Save</Button></>}>
+      {p.event && p.open.value && <Fields key={p.event.id} draft={p.event} props={p} form={(n: HTMLFormElement) => (form = n)} />}
+    </Drawer>
+  )
+}
+
+function Fields({ draft, props: p, form }: { draft: CalEvent; props: EventEditorProps; form: (n: HTMLFormElement) => void }) {
+  const e = untrack(() => draft)
+  const title = state(e.title)
+  const date = state<IsoDate | null>(dateOf(e.start))
+  const start = state<IsoTime | null>(asTime(minuteOf(e.start)))
+  const end = state<IsoTime | null>(asTime(minuteOf(e.end)))
+  const repeats = state(!!e.recurrence)
+  const rule = state<string | null>(e.recurrence ?? 'FREQ=WEEKLY')
+  const zone = state<string | null>(e.tz ?? untrack(() => p.timeZone) ?? null)
+  const place = state(e.location ?? '')
+  const cal = state(String(e.cal ?? 1))
+  // '' not undefined: Field only builds its message row for an error it knows about at setup
+  const titleError = state('')
+  const timeError = state('')
+  const sources = derived(() => (p.calendars ?? [{ id: 1, name: 'Calendar' }]).map(c => ({ value: String(c.id), label: c.name })))
+  let box: HTMLFormElement | undefined
+  const submit = (ev: Event) => {
+    ev.preventDefault()
+    const s = minutes(start.value ?? '00:00'), z = minutes(end.value ?? '00:00')
+    titleError.value = title.value.trim() ? '' : 'Give it a title.'
+    timeError.value = e.allDay || z > s ? '' : 'Ends before it starts'
+    if (titleError.value || timeError.value) {
+      flush()
+      box?.querySelector<HTMLElement>('[aria-invalid="true"], [aria-invalid="true"] input')?.focus()
+      return
+    }
+    const d = date.value ?? dateOf(e.start)
+    p.open.value = false
+    p.onSave({ ...e, title: title.value.trim(), start: e.allDay ? d : at(d, s), end: e.allDay ? e.end : at(d, z), recurrence: repeats.value ? rule.value : null, tz: zone.value && zone.value !== p.timeZone ? zone.value : e.tz, location: place.value || undefined, cal: +cal.value })
+  }
+  return (
+    <form ref={n => { box = n; form(n) }} class="stack" onSubmit={submit} noValidate>
+      <Input label="Title" value={title.value} error={titleError.value} required autofocus onInput={i => (title.value = i.currentTarget.value)} />
+      <DateField label="Date" value={date} today={p.today} locale={p.locale} />
+      {!e.allDay && <div class="row"><TimeField label="Starts" value={start} locale={p.locale} hourCycle="h23" /><TimeField label="Ends" value={end} locale={p.locale} hourCycle="h23" error={timeError.value} /></div>}
+      <Switch checked={repeats.value} onChange={(i: Event) => (repeats.value = (i.currentTarget as HTMLInputElement).checked)}>Repeats</Switch>
+      {repeats.value && <RecurrenceField label="Repeats" value={rule} dtstart={date.value ?? dateOf(e.start)} locale={p.locale} />}
+      <TimeZoneSelect label="Time zone" value={zone} referenceDate={date.value ?? undefined} today={p.today} locale={p.locale} />
+      <Input label="Location or link" value={place.value} onInput={i => (place.value = i.currentTarget.value)} />
+      <Select label="Calendar" options={sources.value} value={cal.value} onChange={(i: Event) => (cal.value = (i.currentTarget as HTMLInputElement).value)} />
+    </form>
+  )
+}

package/src/schedule/EventPopover.tsx

@@ -0,0 +1,65 @@
+import { ClockIcon, InfoIcon, PinIcon, RepeatIcon, UsersIcon, VideoIcon } from '@weft-js/warp-icons'
+import { clockRange, dateOf, fmt, longDuration, popover, ruleSentence, parseRule, slotOf, type Align, type CalEvent, type Side } from '@weft-js/warp-core'
+import { derived, type State } from '@weft-js/core'
+import { Avatar } from '../parts'
+import { Badge } from '../Badge'
+import { Button } from '../Button'
+import { use } from '@weft-js/warp-core/weft'
+import '@weft-js/warp-core/styles/components/popover.css'
+import '@weft-js/warp-core/styles/app/avatar-stack.css'
+import '@weft-js/warp-core/styles/app/event-card.css'
+
+/** Props for EventPopover. */
+export type EventPopoverProps = {
+  event: CalEvent | null
+  open: State<boolean>
+  /** The element it hangs from; focus returns there. */
+  anchor: () => HTMLElement | undefined
+  /** "New York (EDT)". */
+  zoneLabel?: string | undefined
+  locale?: string | undefined
+  /** `h12` for AM and PM, `h23` for a 24-hour clock. The locale's otherwise. */
+  hourCycle?: string | undefined
+  side?: Side | undefined
+  align?: Align | undefined
+  onEdit?: ((e: CalEvent) => void) | undefined
+  onDelete?: ((e: CalEvent) => void) | undefined
+  onJoin?: ((e: CalEvent) => void) | undefined
+}
+
+/** The event card (07 §2.1, `#ev-pop`): a non-modal dialog on the event; Escape returns to it. */
+export function EventPopover(p: EventPopoverProps) {
+  let panel: HTMLDivElement | undefined
+  const locale = derived(() => p.locale ?? 'en-US')
+  const when = derived(() => {
+    const e = p.event
+    if (!e) return null
+    const s = slotOf(e), l = locale.value
+    return { date: fmt(dateOf(e.start), { weekday: 'long', month: 'short', day: 'numeric' }, l), time: e.allDay ? 'All day' : clockRange(s.s, s.e, l, p.hourCycle), length: e.allDay ? undefined : longDuration(s.e - s.s) }
+  })
+  const close = () => (p.open.value = false)
+  use(popover, () => panel, () => ({ open: p.open.value, trigger: p.anchor()!, side: p.side ?? 'right', align: p.align ?? 'start', onClose: close }))
+  const act = (f?: (e: CalEvent) => void) => () => { const e = p.event!; close(); f?.(e) }
+  return (
+    <div ref={n => (panel = n)} data-scope="popover" data-part="content" popover="manual" role="dialog" aria-label="Event details">
+      {p.event && (
+        <div data-scope="event-card" data-cal={p.event.cal ?? 1}>
+          <h4 data-part="title">{p.event.title}</h4>
+          <dl>
+            <dt><ClockIcon /></dt>
+            <dd>{when.value!.date} · {when.value!.time}{(when.value!.length || p.zoneLabel) && <><br /><span class="muted">{[when.value!.length, p.zoneLabel].filter(Boolean).join(' · ')}</span></>}</dd>
+            {p.event.recurrence && <><dt><RepeatIcon /></dt><dd>{ruleSentence(parseRule(p.event.recurrence), dateOf(p.event.start), locale.value)}</dd></>}
+            {p.event.location && <><dt><PinIcon /></dt><dd>{p.event.location}</dd></>}
+            {p.event.attendees?.length ? <><dt><UsersIcon /></dt><dd><span data-scope="avatar-stack">{p.event.attendees.slice(0, 5).map(n => <Avatar key={n} name={n} size="sm" />)}</span> <span class="muted">{p.event.attendees.length} going</span></dd></> : null}
+            {p.event.tentative && <><dt><InfoIcon /></dt><dd><Badge tone="caution">Tentative</Badge></dd></>}
+          </dl>
+          <div data-part="actions">
+            {!p.event.locked && p.onDelete && <Button emphasis="ghost" tone="critical" size="sm" onClick={act(p.onDelete)}>Delete</Button>}
+            {!p.event.locked && p.onEdit && <Button emphasis="outline" tone="neutral" size="sm" onClick={act(p.onEdit)}>Edit</Button>}
+            {p.event.video && <Button size="sm" onClick={act(p.onJoin)}><VideoIcon />Join</Button>}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/schedule/MeetingPlanner.tsx

@@ -0,0 +1,214 @@
+import { ClockIcon, SendIcon, XIcon } from '@weft-js/warp-icons'
+import { announce, asTime, clock, clockRange, fmt, minutes, sharedFree, suggestSlots, uid, withinHours, zoneCity, zoneMinute, type Attendee, type IsoTime, type Range } from '@weft-js/warp-core'
+import { derived, flush, state, untrack, watch } from '@weft-js/core'
+import { Badge } from '../Badge'
+import { Button } from '../Button'
+import { Card } from '../Card'
+import { Segmented } from '../Choice'
+import { ComboField } from '../Combobox'
+import { Input } from '../Field'
+import { Avatar } from '../parts'
+import { usePickerEnv } from '../Picker'
+import { TimeField } from '../TimeField'
+import { SweepParts, confirmSweep } from './bits'
+import '@weft-js/warp-core/styles/app/booking.css'
+import '@weft-js/warp-core/styles/app/calendar.css'
+
+/** What the planner sends: who, when and about what. */
+export type MeetingDetails = { attendees: Attendee[]; title: string; link: string; tags: string[]; date: string; s: number; e: number }
+/** Props for MeetingPlanner. */
+export type MeetingPlannerProps = {
+  date: string
+  attendees?: Attendee[] | undefined
+  /** Search for people to add. */
+  loadAttendees?: ((q: string, signal: AbortSignal) => Promise<Attendee[]>) | undefined
+  /** The app's own suggestions; else they come from everyone's `busy`. */
+  loadSlots?: ((input: { attendees: Attendee[]; date: string; duration: number }) => number[] | Promise<number[]>) | undefined
+  /** The meeting's starting length, in minutes. Default 30. */
+  duration?: number | undefined
+  durations?: number[] | undefined
+  title?: string | undefined
+  /** The meeting link the form starts with, such as a video call URL. */
+  link?: string | undefined
+  tags?: string[] | undefined
+  /** The strip's hours, minutes since midnight. */
+  from?: number | undefined
+  /** Where the strip's hours end, in minutes since midnight. */
+  to?: number | undefined
+  /** The IANA zone times are shown in, such as `Europe/Berlin`. */
+  timeZone?: string | undefined
+  /** 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
+  onSubmit: (m: MeetingDetails) => void | Promise<unknown>
+  onUndo?: (() => void) | undefined
+}
+
+const BUSY_BAR = 'position:absolute;inset-block:7px;border-radius:3px;background:color-mix(in oklab,var(--warp-color-text) 22%,transparent)'
+const FREE_BAR = 'position:absolute;inset-block:6px;background:var(--warp-color-positive-soft);border-block:1px solid var(--warp-color-positive-border)'
+const PICK_BAR = 'position:absolute;inset-block:0;background:color-mix(in oklab,var(--warp-color-sweep) 18%,transparent);border-inline:var(--warp-border-emphasis) solid var(--warp-color-sweep)'
+
+/**
+ * MeetingPlanner (07 §2.2, `#planner`): attendees, details, an availability table with an Everyone row, three suggested
+ * times as a radiogroup, a manual time, Send. Everything is drawn from `busy`, so it works from a query or a signal.
+ */
+export function MeetingPlanner(p: MeetingPlannerProps) {
+  const id = uid('plan')
+  const env = usePickerEnv(() => p.locale, () => p.today)
+  const people = state<Attendee[]>(untrack(() => p.attendees ?? []))
+  const len = state(untrack(() => p.duration ?? 30))
+  const lens = derived(() => (p.durations ?? [15, 30, 45, 60]).map(m => ({ value: String(m), label: `${m} min` })))
+  const title = state(untrack(() => p.title ?? ''))
+  const link = state(untrack(() => p.link ?? ''))
+  const query = state('')
+  const manual = state(false)
+  const typed = state<IsoTime | null>(null)
+  const sent = state(false)
+  const busy = state(false)
+  const failed = state<string | null>(null)
+  const remote = state<number[] | null>(null)
+  const from = derived(() => p.from ?? 480)
+  const to = derived(() => p.to ?? 1080)
+  const width = derived(() => to.value - from.value)
+  const ticks = derived(() => Array.from({ length: Math.round(width.value / 60) }, (_, i) => from.value + i * 60))
+  const busyLists = derived(() => people.value.map(a => a.busy ?? []))
+  const slots = derived(() => remote.value ?? suggestSlots(people.value, p.date, { len: len.value, from: from.value, to: to.value, zone: p.timeZone }))
+  const shared = derived(() => sharedFree(busyLists.value, from.value, to.value))
+  const pick = state<number | null>(null)
+  const chosen = derived(() => (manual.value ? (typed.value ? minutes(typed.value) : null) : pick.value !== null && slots.value.includes(pick.value) ? pick.value : slots.value[0] ?? null))
+  const time = (m: number) => clock(m, env.locale.value, p.hourCycle)
+  const span = (a: number, b: number) => clockRange(a, b, env.locale.value, p.hourCycle)
+  const left = (m: number) => ((m - from.value) / width.value) * 100
+  const size = (m: number) => (m / width.value) * 100
+  let root: HTMLDivElement | undefined
+  let group: HTMLDivElement | undefined
+  const say = (t: string, loud = false) => root && announce(root.ownerDocument, t, loud)
+  watch(() => [people.value, len.value] as const, ([a, l]) => {
+    if (!p.loadSlots) return
+    const r = p.loadSlots({ attendees: a, date: p.date, duration: l })
+    if (Array.isArray(r)) remote.value = r
+    else void r.then(v => (remote.value = v))
+  })
+  const fit = derived(() => { const s = chosen.value; return s === null ? 0 : withinHours(people.value, p.date, s, len.value, p.timeZone) })
+  const elsewhere = derived(() => { const s = chosen.value; if (s === null) return []; return [...new Set(people.value.map(a => a.zone).filter(z => z && z !== p.timeZone))].slice(0, 2).map(z => `${zoneCity(z!)} ${time(zoneMinute(p.date, s, p.timeZone, z))}`) })
+  const summary = derived(() => (chosen.value === null ? 'No common time today' : `${fmt(p.date, { weekday: 'short', month: 'short', day: 'numeric' }, env.locale.value)} · ${span(chosen.value, chosen.value + len.value)}`))
+  const add = (a: Attendee) => {
+    if (!people.value.some(x => x.id === a.id)) people.value = [...people.value, a]
+    query.value = ''
+    say(`${a.name} added. ${slots.value.length} times work for everyone.`)
+  }
+  const drop = (a: Attendee) => { people.value = people.value.filter(x => x.id !== a.id); say(`${a.name} removed`) }
+  const setLen = (v: string) => { len.value = +v; flush(); say(`${v} minutes. ${slots.value.length} times work for everyone.`) }
+  const onRadio = (e: KeyboardEvent) => {
+    const d = ({ ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 } as Record<string, number>)[e.key]
+    const list = slots.value
+    const i = list.indexOf(chosen.value!)
+    const n = d ? (i + d + list.length) % list.length : e.key === 'Home' ? 0 : e.key === 'End' ? list.length - 1 : -1
+    if (n < 0) return
+    e.preventDefault()
+    pick.value = list[n]!
+    flush()
+    group?.querySelector<HTMLElement>('[aria-checked="true"]')?.focus()
+  }
+  const send = async () => {
+    const s = chosen.value
+    if (s === null || busy.value) return
+    busy.value = true
+    failed.value = null
+    try {
+      await p.onSubmit({ attendees: people.value, title: title.value, link: link.value, tags: p.tags ?? [], date: p.date, s, e: s + len.value })
+      sent.value = true
+      say(`Invite sent for ${summary.value}`)
+      flush()
+      confirmSweep(root?.querySelector('[data-arrive]'))
+    } catch (err) {
+      failed.value = (err as Error | undefined)?.message ?? 'Try again.'
+      say(`Couldn't send the invite: ${failed.value}`, true)
+    } finally { busy.value = false }
+  }
+  return (
+    <div ref={n => (root = n)} class="stack">
+      <div class="row">
+        <div><span data-part="eyebrow">MeetingPlanner</span><h3>Find a time</h3></div>
+        <span style="flex:1"></span>
+        <Segmented label="Duration" size="sm" value={String(len.value)} onChange={setLen} options={lens.value} />
+      </div>
+      <Card sweep={false}>
+        <div class="stack">
+          <h4 id={`${id}-att`}>Attendees <span class="muted">{people.value.length}</span></h4>
+          {p.loadAttendees && <ComboField label="Add people" text={() => query.value} onText={t => (query.value = t)} find={p.loadAttendees} row={(a: Attendee) => ({ main: a.name, sub: a.zone && zoneCity(a.zone) })} onPick={add} />}
+          <ul class="stack" aria-labelledby={`${id}-att`}>
+            {people.value.map(a => (
+              <li key={a.id} class="row">
+                <Avatar name={a.name} size="sm" />
+                <span>{a.name}{a.organizer && <span class="muted"> (organizer)</span>}</span>
+                <span style="flex:1"></span>
+                <span class="muted">{a.zone ? zoneCity(a.zone) : ''}</span>
+                {!a.organizer && <Button emphasis="ghost" tone="neutral" size="sm" icon={XIcon} label={`Remove ${a.name}`} onClick={() => drop(a)} />}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Card>
+      <Card sweep={false}>
+        <div class="stack">
+          <h4>Details</h4>
+          <Input label="Title" value={title.value} onInput={e => (title.value = e.currentTarget.value)} />
+          <Input label="Video link" value={link.value} onInput={e => (link.value = e.currentTarget.value)} />
+          {p.tags && <div class="row">{p.tags.map(t => <Badge key={t} tone="neutral">{t}</Badge>)}</div>}
+        </div>
+      </Card>
+      <Card sweep={false}>
+        <div class="stack">
+          <h4 id={`${id}-grid`}>{fmt(p.date, { weekday: 'long', month: 'short', day: 'numeric' }, env.locale.value)} {p.timeZone && <span class="muted">· {zoneCity(p.timeZone)}</span>}</h4>
+          <div data-scope="calendar">
+            <div data-part="timeline" role="table" aria-labelledby={`${id}-grid`}>
+              <span aria-hidden="true"></span>
+              <div class="muted" aria-hidden="true" style={`display:grid;grid-template-columns:repeat(${ticks.value.length},1fr)`}>{ticks.value.map((m, n) => <span key={m}>{n % 2 ? '' : time(m)}</span>)}</div>
+              {people.value.map(a => (
+                <div key={a.id} role="row">
+                  <div data-part="lane-label" role="rowheader"><Avatar name={a.name} size="sm" /><span>{a.name.split(' ')[0]}</span></div>
+                  <div data-part="lane" role="cell" style={`--_slots:${ticks.value.length}`}>
+                    <span class="sr">{(a.busy ?? []).length ? `Busy ${(a.busy as Range[]).map(r => span(r[0], r[1])).join(', ')}` : 'Free all day'}</span>
+                    {(a.busy ?? []).map(r => <span key={r[0]} aria-hidden="true" style={`${BUSY_BAR};inset-inline-start:${left(r[0])}%;inline-size:${size(r[1] - r[0])}%`}></span>)}
+                    {chosen.value !== null && <span aria-hidden="true" style={`${PICK_BAR};inset-inline-start:${left(chosen.value)}%;inline-size:${size(len.value)}%`}></span>}
+                  </div>
+                </div>
+              ))}
+              <div role="row">
+                <div data-part="lane-label" role="rowheader">Everyone</div>
+                <div data-part="lane" role="cell" style={`--_slots:${ticks.value.length}`}>
+                  <span class="sr">Everyone free: {shared.value.map(r => span(r[0], r[1])).join(', ') || 'no shared time'}</span>
+                  {shared.value.map(r => <span key={r[0]} aria-hidden="true" style={`${FREE_BAR};inset-inline-start:${left(r[0])}%;inline-size:${size(r[1] - r[0])}%`}></span>)}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+      <Card sweep={false}>
+        {sent.value
+          ? <div data-arrive="" data-sweep="" class="row" role="status"><div><b>Invite sent · {summary.value}</b><p class="muted">{people.value.length} people · added to your calendar · we'll tell you when they answer.</p></div>{p.onUndo && <Button emphasis="ghost" tone="neutral" size="sm" onClick={() => { sent.value = false; p.onUndo?.() }}>Undo</Button>}</div>
+          : <div class="stack">
+              <div class="row"><h4 id={`${id}-slots`}>Suggested times</h4><span style="flex:1"></span><span class="muted">{slots.value.length ? `Everyone is free · within working hours for ${fit.value} of ${people.value.length}` : 'No time works for everyone'}</span></div>
+              {manual.value
+                ? <TimeField label="Start" value={typed} locale={env.locale.value} hourCycle="h23" />
+                : <div data-scope="booking" data-part="root">
+                    <div ref={n => (group = n)} data-part="slots" role="radiogroup" aria-labelledby={`${id}-slots`} onKeyDown={onRadio}>
+                      {slots.value.map(m => <button key={m} type="button" data-part="slot" data-sweep="" role="radio" aria-checked={m === chosen.value ? 'true' : 'false'} data-hold={m === chosen.value ? '' : undefined} tabindex={m === chosen.value ? '0' : '-1'} onClick={() => (pick.value = m)}><SweepParts />{time(m)}</button>)}
+                    </div>
+                  </div>}
+              <div class="row">
+                <span><b>{summary.value}</b> {elsewhere.value.length > 0 && <span class="muted">· {elsewhere.value.join(' · ')}</span>}</span>
+                <span style="flex:1"></span>
+                <Button emphasis="outline" tone="neutral" size="sm" icon={ClockIcon} onClick={() => { typed.value = chosen.value !== null ? asTime(chosen.value) : null; manual.value = !manual.value }}>{manual.value ? 'Suggested times' : 'Pick manually'}</Button>
+                <Button loading={busy.value} disabled={chosen.value === null} onClick={send}><SendIcon />Send invite</Button>
+              </div>
+              {failed.value && <p role="alert" class="muted">Couldn't send the invite: {failed.value}</p>}
+            </div>}
+      </Card>
+    </div>
+  )
+}

package/src/schedule/MoveSheet.tsx

@@ -0,0 +1,78 @@
+import { LeftIcon, RightIcon } from '@weft-js/warp-icons'
+import { clock, clockRange, dateOf, fmt, longDuration, moveSlots, slotOf, weekDates, type CalEvent, type Slot } from '@weft-js/warp-core'
+import { derived, state, untrack, type State } from '@weft-js/core'
+import { Alert } from '../Alert'
+import { Button } from '../Button'
+import { Chip } from '../Chip'
+import { Drawer } from '../Drawer'
+import { SweepParts, confirmSweep } from './bits'
+import '@weft-js/warp-core/styles/app/booking.css'
+
+/** Props for MoveSheet. */
+export type MoveSheetProps = {
+  open: State<boolean>
+  event: CalEvent | null
+  /** Everything else on the calendar: a start that collides is disabled. */
+  events: CalEvent[]
+  /** The day the week strip starts on, 0 for Sunday to 6. Default 1, Monday. */
+  firstDayOfWeek?: number | undefined
+  locale?: string | undefined
+  /** `h12` for AM and PM, `h23` for a 24-hour clock. The locale's otherwise. */
+  hourCycle?: string | undefined
+  step?: number | undefined
+  onMove: (e: CalEvent, to: Slot) => void
+  onClose?: (() => void) | undefined
+}
+
+/** The move sheet (07 §2.2, `#move-sheet`): a bottom Sheet with day, start and duration, the touch path for a drag. */
+export function MoveSheet(p: MoveSheetProps) {
+  const title = derived(() => (p.event ? `Move “${p.event.title}”` : 'Move event'))
+  const hold = state<(() => void) | null>(null)
+  const go = () => hold.value?.()
+  const cancel = () => { p.open.value = false; p.onClose?.() }
+  return (
+    <Drawer open={p.open} side="bottom" title={title.value} description={p.event ? `${longDuration(slotOf(p.event).e - slotOf(p.event).s)} · now ${fmt(dateOf(p.event.start), { weekday: 'short' }, p.locale ?? 'en-US')} ${clockRange(slotOf(p.event).s, slotOf(p.event).e, p.locale ?? 'en-US', p.hourCycle)}` : undefined} footer={<><Button emphasis="outline" tone="neutral" onClick={cancel}>Cancel</Button><Button onClick={go}>Move event</Button></>}>
+      {p.event && p.open.value && <Body key={p.event.id} event={p.event} props={p} bind={f => (hold.value = f)} />}
+    </Drawer>
+  )
+}
+
+function Body({ event, props: p, bind }: { event: CalEvent; props: MoveSheetProps; bind: (go: () => void) => void }) {
+  const e = untrack(() => event)
+  const origin = slotOf(e)
+  const day = state<string>(origin.date)
+  const start = state(origin.s)
+  const len = state(origin.e - origin.s)
+  const locale = derived(() => p.locale ?? 'en-US')
+  const week = derived(() => weekDates(origin.date, p.firstDayOfWeek ?? 1))
+  const slots = derived(() => moveSlots(p.events, e, day.value, len.value))
+  const stepBy = untrack(() => p.step ?? 15)
+  const go = () => {
+    const to = { date: day.value, s: start.value, e: start.value + len.value, resource: origin.resource }
+    p.open.value = false
+    p.onMove(e, to)
+    p.onClose?.()
+  }
+  untrack(() => bind(go))
+  const pick = (s: number, ev: MouseEvent) => { start.value = s; confirmSweep(ev.currentTarget as Element) }
+  return (
+    <div class="stack">
+      <div class="chips" role="group" aria-label="Day">
+        {week.value.map(d => <Chip key={d} pressed={d === day.value} onClick={() => (day.value = d)}>{fmt(d, { weekday: 'short', day: 'numeric' }, locale.value)}</Chip>)}
+      </div>
+      <div data-scope="booking" data-part="root">
+        <div data-part="slots" role="group" aria-label="Start time">
+          {slots.value.map(x => (
+            <button key={x.s} type="button" data-part="slot" data-sweep="" aria-pressed={x.s === start.value ? 'true' : 'false'} disabled={x.busy} onClick={(ev: MouseEvent) => pick(x.s, ev)}><SweepParts />{clock(x.s, locale.value, p.hourCycle)}</button>
+          ))}
+        </div>
+      </div>
+      <div class="row" role="group" aria-label="Duration">
+        <Button emphasis="outline" tone="neutral" size="sm" label="Shorter" icon={LeftIcon} disabled={len.value <= stepBy} onClick={() => (len.value = Math.max(stepBy, len.value - stepBy))} />
+        <output aria-live="polite">{longDuration(len.value)}</output>
+        <Button emphasis="outline" tone="neutral" size="sm" label="Longer" icon={RightIcon} onClick={() => (len.value += stepBy)} />
+      </div>
+      {e.recurrence && <Alert tone="info" title="This event repeats">Moving changes this one only. Use Edit for the series.</Alert>}
+    </div>
+  )
+}

package/src/schedule/YearView.tsx

@@ -0,0 +1,163 @@
+import { LeftIcon, RightIcon } from '@weft-js/warp-icons'
+import { addMonths, announce, clock, eventsOn, fmt, minuteOf, monthStart, monthSummary, monthWeeks, motionOff, uid, weekStart, weekdays, ymd, yearKey, yearLevel, yearMonths, yearTotal, type CalEvent, type IsoDate } from '@weft-js/warp-core'
+import { derived, flush, state, untrack } from '@weft-js/core'
+import { Button } from '../Button'
+import { usePickerEnv } from '../Picker'
+import './bits'
+import '@weft-js/warp-core/styles/app/year.css'
+
+/** Props for YearView. */
+export type YearViewProps = {
+  /** `{ [isoDay]: n }`: a year's counts only (07 §2.7). */
+  counts: Record<string, number>
+  /** Names the section when the year alone won't do: two on a page. */
+  label?: string | undefined
+  /** Events for the picked day's detail: from `events`, or fetched by the app when it is picked. */
+  events?: CalEvent[] | undefined
+  year?: number | undefined
+  /** 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
+  /** The day each month's rows start on, 0 for Sunday to 6. The locale's otherwise. */
+  firstDayOfWeek?: number | undefined
+  /** Inside a Calendar: return true when the day or month opened there, and the picker stays out of the way. */
+  openDay?: ((iso: IsoDate) => boolean | void) | undefined
+  openMonth?: ((iso: IsoDate) => boolean | void) | undefined
+  /** Open straight away; off, a pick shows the detail and offers the jump. */
+  direct?: boolean | undefined
+  /** Called with the new year when you page. */
+  onYearChange?: ((y: number) => void) | undefined
+}
+
+const events = (n: number) => (n ? `${n} event${n > 1 ? 's' : ''}` : 'no events')
+
+/**
+ * The year (07 §2.7): twelve mini months with density dots, one roving stop across all twelve grids, a polite detail
+ * for the picked day or month. Columns follow the container. Enter opens the day, `M` its month, `T` today.
+ */
+export function YearView(p: YearViewProps) {
+  const id = uid('year')
+  const env = usePickerEnv(() => p.locale, () => p.today)
+  const first = derived(() => p.firstDayOfWeek ?? weekStart(env.locale.value))
+  const heads = derived(() => weekdays(first.value, env.locale.value))
+  const focus = state<string>(untrack(() => (p.year && p.year !== ymd(env.today.value)[0] ? `${p.year}-01-01` : env.today.value)))
+  const year = derived(() => ymd(focus.value)[0])
+  const picked = state<{ iso: string; kind: 'day' | 'month' } | null>(null)
+  const swapping = state(false)
+  let months: HTMLDivElement | undefined
+  const say = (t: string) => months && announce(months.ownerDocument, t)
+  const long = (iso: string) => fmt(iso, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }, env.locale.value)
+  const list = derived(() => yearMonths(year.value).map(month => {
+    const { total } = monthSummary(p.counts, month)
+    return {
+      month, total, name: fmt(month, { month: 'long' }, env.locale.value), current: month === monthStart(env.today.value),
+      weeks: monthWeeks(month, first.value).map((days, r) => ({ key: `${month}-${r}`, cells: days.map((iso, c) => ({ key: iso ?? `${month}-${r}-${c}`, iso, count: iso ? p.counts[iso] ?? 0 : 0, weekend: (first.value + c) % 7 === 0 || (first.value + c) % 7 === 6 })) })),
+    }
+  }))
+  const toCell = () => { flush(); months?.querySelector<HTMLElement>('[data-day][tabindex="0"]')?.focus() }
+  const go = (iso: string, move = true) => {
+    const was = year.value
+    const swap = ymd(iso)[0] !== was
+    const apply = () => {
+      focus.value = iso
+      swapping.value = false
+      if (move) toCell()
+      if (swap) { say(`${ymd(iso)[0]}, ${yearTotal(p.counts, ymd(iso)[0]).toLocaleString(env.locale.value)} events`); p.onYearChange?.(ymd(iso)[0]) }
+    }
+    if (!swap || !months || motionOff(months)) return apply()
+    swapping.value = true
+    setTimeout(apply, 140)
+  }
+  const dayName = (iso: string) => `${long(iso)}, ${events(p.counts[iso] ?? 0)}`
+  const day = (iso: string) => {
+    if (p.direct !== false && p.openDay?.(iso as IsoDate)) return say(`Day view, ${long(iso)}`)
+    focus.value = iso
+    picked.value = { iso, kind: 'day' }
+    say(dayName(iso))
+  }
+  const month = (iso: string) => {
+    const m = monthStart(iso)
+    if (p.direct !== false && p.openMonth?.(m)) return say(`Month view, ${fmt(m, { month: 'long', year: 'numeric' }, env.locale.value)}`)
+    focus.value = m
+    picked.value = { iso: m, kind: 'month' }
+    toCell()
+    const s = monthSummary(p.counts, m)
+    say(`${fmt(m, { month: 'long', year: 'numeric' }, env.locale.value)}, ${s.total} events`)
+  }
+  const onKey = (e: KeyboardEvent) => {
+    const c = (e.target as Element).closest?.<HTMLElement>('[data-day]')
+    if (!c || e.metaKey || e.ctrlKey) return
+    const to = yearKey(e.key, e.shiftKey, c.dataset.day!, first.value, getComputedStyle(c).direction === 'rtl')
+    if (!to) return
+    e.preventDefault()
+    if (to === 'pick') day(c.dataset.day!)
+    else if (to === 'month') month(c.dataset.day!)
+    else if (to === 'today') go(env.today.value)
+    else go(to)
+  }
+  const onClick = (e: MouseEvent) => {
+    const t = e.target as Element
+    const title = t.closest?.<HTMLElement>('[data-part="month-title"]')
+    if (title) return month(title.dataset.month!)
+    const c = t.closest?.<HTMLElement>('[data-day]')
+    if (c) day(c.dataset.day!)
+  }
+  const detail = derived(() => {
+    const at = picked.value
+    if (!at || ymd(at.iso)[0] !== year.value) return null
+    if (at.kind === 'month') {
+      const s = monthSummary(p.counts, at.iso)
+      return { kind: 'month' as const, iso: at.iso, head: `${fmt(at.iso, { month: 'long', year: 'numeric' }, env.locale.value)} · ${s.total} events`, busiest: s.busiest ? `Busiest day: ${long(s.busiest)}, ${s.most} events.` : undefined }
+    }
+    const n = p.counts[at.iso] ?? 0
+    const rows = p.events ? eventsOn(p.events, at.iso) : []
+    return { kind: 'day' as const, iso: at.iso, head: `${long(at.iso)} · ${n ? events(n) : 'nothing booked'}`, rows: rows.slice(0, 4), more: Math.max(0, rows.length - 4) }
+  })
+  return (
+    <section data-scope="year" aria-label={p.label} aria-labelledby={p.label ? undefined : `${id}-t`}>
+      <div data-part="toolbar">
+        <Button emphasis="ghost" tone="neutral" size="sm" icon={LeftIcon} label="Previous year" onClick={() => go(addMonths(focus.value, -12), false)} />
+        <h3 data-part="title" id={`${id}-t`} aria-live="polite">{year.value}</h3>
+        <Button emphasis="ghost" tone="neutral" size="sm" icon={RightIcon} label="Next year" onClick={() => go(addMonths(focus.value, 12), false)} />
+        <Button emphasis="outline" tone="neutral" size="sm" onClick={() => go(env.today.value)}>Today</Button>
+        <span data-part="legend" aria-hidden="true"><span><i data-part="dots" data-zero=""></i>none</span><span><i data-part="dots" style="--_n:1"></i>1–2</span><span><i data-part="dots" style="--_n:2"></i>3–4</span><span><i data-part="dots" style="--_n:3"></i>5+</span></span>
+      </div>
+      <div ref={n => (months = n)} data-part="months" role="group" aria-labelledby={`${id}-t`} aria-describedby={`${id}-h`} data-swapping={swapping.value ? '' : undefined} onKeyDown={onKey} onClick={onClick}>
+        {list.value.map(m => (
+          <div key={m.month} data-part="year-month" data-current={m.current ? '' : undefined}>
+            <button type="button" data-part="month-title" id={`${id}-${m.month}`} data-month={m.month} tabindex="-1">{m.name} <small>{m.total}<span class="sr"> events</span></small></button>
+            <div role="grid" aria-labelledby={`${id}-${m.month}`}>
+              <div role="row">{heads.value.map(h => <span key={h[0]} role="columnheader"><span aria-hidden="true">{h[0][0]}</span><span class="sr">{h[0]}</span></span>)}</div>
+              {m.weeks.map(w => (
+                <div key={w.key} role="row">
+                  {w.cells.map(c => (c.iso
+                    ? <span key={c.key} role="gridcell" data-day={c.iso} tabindex={c.iso === focus.value ? '0' : '-1'} aria-selected={picked.value?.iso === c.iso && picked.value.kind === 'day' ? 'true' : 'false'} aria-current={c.iso === env.today.value ? 'date' : undefined} data-weekend={c.weekend ? '' : undefined} aria-label={`${dayName(c.iso)}${c.iso === env.today.value ? ', today' : ''}`}><span data-part="num" aria-hidden="true">{ymd(c.iso)[2]}</span><i data-part="dots" style={`--_n:${yearLevel(c.count)}`} aria-hidden="true"></i></span>
+                    : <span key={c.key} role="gridcell" data-outside="" aria-hidden="true"></span>))}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      <span class="sr" id={`${id}-h`}>One stop for the whole year. Arrow keys move by day and week, Home and End to the week's ends, Page Up and Page Down by month, with Shift by year. Enter opens the day, M opens its month, T goes to today.</span>
+      <div data-part="detail" role="status" aria-live="polite">
+        {detail.value
+          ? <>
+              <div class="row"><b>{detail.value.head}</b>
+                {detail.value.kind === 'day' && p.openDay && <Button emphasis="outline" tone="neutral" size="sm" onClick={() => p.openDay!(picked.value!.iso as IsoDate)}>Open in Day view</Button>}
+                {p.openMonth && <Button emphasis="ghost" tone="neutral" size="sm" onClick={() => p.openMonth!(monthStart(picked.value!.iso))}>Open in Month view</Button>}
+              </div>
+              {detail.value.kind === 'month'
+                ? detail.value.busiest && <span class="muted">{detail.value.busiest}</span>
+                : detail.value.rows.length > 0 && <ul>
+                    {detail.value.rows.map(e => <li key={e.id}><i data-cal={e.cal ?? 1}></i><span>{e.allDay ? 'All day' : clock(minuteOf(e.start), env.locale.value, p.hourCycle)}</span>{e.title}</li>)}
+                    {detail.value.more > 0 && <li>+{detail.value.more} more</li>}
+                  </ul>}
+            </>
+          : <span class="muted">Pick a day to see what's on it. More dots, busier day: one for 1–2 events, two for 3–4, three for 5 or more.</span>}
+      </div>
+    </section>
+  )
+}