@flickfyi/flkr 0.0.141 → 0.0.146

package/node_modules/@flickfyi/core/src/kowalski/details.tsx

@@ -0,0 +1,1387 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button as NativeButton, Input } from '@flickfyi/core/atoms'
+import { List } from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { toArray } from 'lodash'
+import { useMemo, useState } from 'react'
+
+import { size, space, text } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+
+import { nextReminder } from './calculations'
+import { kowalskiCatalog, type KowalskiInput } from './catalog'
+import { FeatureDate, FeatureDateTime } from './date-time'
+import { format } from './format'
+import {
+	FeatureAction,
+	FeatureEdit,
+	FeatureFacts,
+	FeatureFrame,
+	FeatureWell,
+	layout,
+} from './frame'
+import { useClock } from './use-clock'
+import { useConfiguredFeature } from './use-configured-feature'
+
+export function Event(input: KowalskiInput<'event'>) {
+	const props = kowalskiCatalog.event.props.parse(input)
+	const schema = kowalskiCatalog.event.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiEvent',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({
+			location: { value: props.location },
+			startsAt: { value: props.startsAt },
+			title: { value: props.title },
+		}),
+	})
+	const [draft, setDraft] = useState({
+		location: '',
+		startsAt: props.startsAt,
+		title: '',
+	})
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const [editingDate, setEditingDate] = useState(false)
+	const editing = baseline !== null
+	const title = store.value.title.value.trim()
+		? store.value.title.value
+		: 'Untitled event'
+	const instant = store.value.startsAt.value
+		? Date.parse(store.value.startsAt.value)
+		: null
+	const timeParts =
+		instant === null
+			? []
+			: format.formatters
+					.getDateTimeFormat(format.locale, {
+						fractionalSecondDigits: instant % 1000 === 0 ? undefined : 3,
+						hour: 'numeric',
+						hour12: true,
+						minute: '2-digit',
+						second: instant % 60_000 === 0 ? undefined : '2-digit',
+						timeZone: props.timeZone,
+						timeZoneName: 'long',
+					})
+					.formatToParts(instant)
+	const validTitle =
+		draft.title.trim().length > 0 &&
+		kowalskiCatalog.event.props.shape.title.safeParse(draft.title).success
+	const validLocation = kowalskiCatalog.event.props.shape.location.safeParse(
+		draft.location
+	).success
+	const changed =
+		baseline &&
+		(draft.title !== baseline.title ||
+			draft.location !== baseline.location ||
+			draft.startsAt !== baseline.startsAt)
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="event"
+			title={title}
+			detail={
+				instant === null
+					? 'Date to be decided'
+					: format.formatters
+							.getDateTimeFormat(format.locale, {
+								day: 'numeric',
+								month: 'long',
+								timeZone: props.timeZone,
+								weekday: 'long',
+							})
+							.format(instant)
+			}
+		>
+			{editing && !store.saving ? (
+				<Flex {...stylex.props(eventStyles.editor)}>
+					<Flex {...stylex.props(layout.field)}>
+						<Text {...stylex.props(roles.label, layout.fieldLabel)}>Title</Text>
+						<Input
+							placeholder="Title"
+							value={draft.title}
+							onChange={title => setDraft(current => ({ ...current, title }))}
+							style={[layout.input]}
+						/>
+						{!validTitle && (
+							<Text {...stylex.props(roles.muted)}>
+								{draft.title.trim()
+									? 'Use 160 characters or fewer.'
+									: 'Add an event title.'}
+							</Text>
+						)}
+					</Flex>
+					<FeatureDateTime
+						inline
+						clearable
+						component="event"
+						label="Start date & time"
+						onChange={startsAt => setDraft(current => ({ ...current, startsAt }))}
+						onEditingChange={setEditingDate}
+						ready={store.ready}
+						timeZone={props.timeZone}
+						value={draft.startsAt}
+					/>
+					<Flex {...stylex.props(layout.field)}>
+						<Flex {...stylex.props(eventStyles.fieldLabel)}>
+							<Text {...stylex.props(roles.label, layout.fieldLabel)}>Location</Text>
+							<Text {...stylex.props(roles.muted, eventStyles.optional)}>Optional</Text>
+						</Flex>
+						<Input
+							placeholder="Location"
+							value={draft.location}
+							onChange={location => setDraft(current => ({ ...current, location }))}
+							style={[layout.input]}
+						/>
+						{!validLocation && (
+							<Text {...stylex.props(roles.muted)}>Use 500 characters or fewer.</Text>
+						)}
+					</Flex>
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction component="event" onClick={() => setBaseline(null)}>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="event"
+							disabled={
+								editingDate ||
+								store.saving ||
+								!store.ready ||
+								!changed ||
+								!validTitle ||
+								!validLocation
+							}
+							onClick={() => {
+								if (
+									editingDate ||
+									!baseline ||
+									!changed ||
+									!validTitle ||
+									!validLocation
+								) {
+									return
+								}
+								store.set(
+									current => ({
+										...(draft.title !== baseline.title &&
+											draft.title !== current.title.value && {
+												title: { value: draft.title },
+											}),
+										...(draft.startsAt !== baseline.startsAt &&
+											draft.startsAt !== current.startsAt.value && {
+												startsAt: { value: draft.startsAt },
+											}),
+										...(draft.location !== baseline.location &&
+											draft.location !== current.location.value && {
+												location: { value: draft.location },
+											}),
+									}),
+									() => setBaseline(null)
+								)
+							}}
+							variant="primary"
+						>
+							Save changes
+						</FeatureAction>
+					</Flex>
+				</Flex>
+			) : (
+				<>
+					{store.saving ? (
+						<Text {...stylex.props(roles.muted)}>Saving changes…</Text>
+					) : !store.ready && !store.error ? (
+						<Text {...stylex.props(roles.muted)}>Loading event…</Text>
+					) : null}
+					<FeatureFacts>
+						<List.Item
+							label="Time"
+							trailing={
+								instant === null
+									? 'Not set'
+									: timeParts
+											.filter(part => part.type !== 'timeZoneName')
+											.map(part => part.value)
+											.join('')
+											.trim()
+							}
+						/>
+						<List.Item
+							label="Where"
+							trailing={
+								store.value.location.value.trim()
+									? store.value.location.value
+									: 'To be decided'
+							}
+						/>
+					</FeatureFacts>
+					{!editing && (
+						<FeatureAction
+							component="event"
+							disabled={!store.ready || store.saving}
+							icon="pencil"
+							onClick={() => {
+								const values = {
+									location: store.value.location.value,
+									startsAt: store.value.startsAt.value,
+									title: store.value.title.value,
+								}
+								setDraft(values)
+								setBaseline(values)
+							}}
+						>
+							Edit event
+						</FeatureAction>
+					)}
+				</>
+			)}
+		</FeatureFrame>
+	)
+}
+
+export function Reminder(input: KowalskiInput<'reminder'>) {
+	const props = kowalskiCatalog.reminder.props.parse(input)
+	const timeZone = props.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone
+	const schema = kowalskiCatalog.reminder.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiReminder',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({ dueAt: { value: props.dueAt }, title: { value: props.title } }),
+	})
+	const [draft, setDraft] = useState({ dueAt: props.dueAt, title: props.title })
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const [editingDate, setEditingDate] = useState(false)
+	const editing = baseline !== null
+	const done = store.value.completedAt !== null
+	const due = store.value.dueAt.value ? Date.parse(store.value.dueAt.value) : null
+	const now = useClock(due !== null)
+	const title = store.value.title.value.trim()
+		? store.value.title.value
+		: 'Untitled reminder'
+	const dateFormat = format.formatters.getDateTimeFormat(format.locale, {
+		day: 'numeric',
+		month: 'long',
+		timeZone,
+		weekday: 'short',
+		year: 'numeric',
+	})
+	const timeFormat = format.formatters.getDateTimeFormat(format.locale, {
+		fractionalSecondDigits: due !== null && due % 1000 !== 0 ? 3 : undefined,
+		hour: 'numeric',
+		hour12: true,
+		minute: '2-digit',
+		second: due !== null && due % 60_000 !== 0 ? '2-digit' : undefined,
+		timeZone,
+	})
+	const dueStatus =
+		due === null
+			? 'No due date'
+			: done
+				? 'Due date'
+				: due < now
+					? 'Overdue'
+					: dateFormat.format(due) === dateFormat.format(now)
+						? 'Due today'
+						: 'Upcoming'
+	const next = done ? nextReminder(store.value.dueAt.value, props.recurrence, now) : null
+	const validTitle =
+		draft.title.trim().length > 0 &&
+		kowalskiCatalog.reminder.props.shape.title.safeParse(draft.title).success
+	const changed =
+		baseline && (draft.title !== baseline.title || draft.dueAt !== baseline.dueAt)
+	const edit = () => {
+		const values = { dueAt: store.value.dueAt.value, title: store.value.title.value }
+		setDraft(values)
+		setBaseline(values)
+	}
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="reminder"
+			title={title}
+			detail={
+				store.value.completedAt === null
+					? undefined
+					: `Completed ${format.formatters
+							.getDateTimeFormat(format.locale, {
+								dateStyle: 'medium',
+								hour12: true,
+								timeStyle: 'short',
+								timeZone,
+							})
+							.format(store.value.completedAt)}`
+			}
+			trailing={
+				!editing && (
+					<FeatureEdit disabled={!store.ready} label="Edit reminder" onClick={edit} />
+				)
+			}
+		>
+			{editing && store.saving ? (
+				<Text {...stylex.props(roles.muted)}>Saving changes…</Text>
+			) : editing ? (
+				<Flex {...stylex.props(reminderStyles.editor)}>
+					<Flex {...stylex.props(layout.field)}>
+						<Text {...stylex.props(roles.label, layout.fieldLabel)}>Reminder</Text>
+						<Input
+							placeholder="Reminder"
+							value={draft.title}
+							onChange={title => setDraft(current => ({ ...current, title }))}
+							style={[layout.input]}
+						/>
+						{!validTitle && (
+							<Text {...stylex.props(roles.muted)}>
+								{draft.title.trim()
+									? 'Use 500 characters or fewer.'
+									: 'Add a reminder title.'}
+							</Text>
+						)}
+					</Flex>
+					<FeatureDateTime
+						inline
+						clearable
+						component="reminder"
+						label="Due date & time"
+						onChange={dueAt => setDraft(current => ({ ...current, dueAt }))}
+						onEditingChange={setEditingDate}
+						ready={store.ready}
+						timeZone={timeZone}
+						value={draft.dueAt}
+					/>
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction component="reminder" onClick={() => setBaseline(null)}>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="reminder"
+							disabled={
+								editingDate || store.saving || !store.ready || !changed || !validTitle
+							}
+							onClick={() => {
+								if (editingDate || !baseline || !changed || !validTitle) {
+									return
+								}
+								store.set(
+									current => ({
+										...(draft.title !== baseline.title &&
+											draft.title !== current.title.value && {
+												title: { value: draft.title },
+											}),
+										...(draft.dueAt !== baseline.dueAt &&
+											draft.dueAt !== current.dueAt.value && {
+												dueAt: { value: draft.dueAt },
+											}),
+									}),
+									() => setBaseline(null)
+								)
+							}}
+							variant="primary"
+						>
+							{store.saving ? 'Saving…' : 'Save changes'}
+						</FeatureAction>
+					</Flex>
+				</Flex>
+			) : (
+				<>
+					<FeatureFacts>
+						<List.Item
+							label={dueStatus}
+							trailing={due === null ? 'Not set' : dateFormat.format(due)}
+						/>
+						{due !== null && <List.Item label="Time" trailing={timeFormat.format(due)} />}
+						{props.recurrence !== 'none' && (
+							<List.Item
+								description={
+									due === null ? 'Add a due date to start repeating.' : undefined
+								}
+								label="Repeats"
+								trailing={
+									props.recurrence === 'daily' ? 'Every 24 hours' : 'Every 7 days'
+								}
+							/>
+						)}
+						{next && (
+							<List.Item
+								label="Next occurrence"
+								trailing={`${dateFormat.format(Date.parse(next))} · ${timeFormat.format(Date.parse(next))}`}
+							/>
+						)}
+					</FeatureFacts>
+					<Flex {...stylex.props(layout.actions)}>
+						{next && (
+							<FeatureAction
+								component="reminder"
+								disabled={!store.ready}
+								icon="arrow.right"
+								onClick={() =>
+									store.set(current => {
+										const dueAt = nextReminder(
+											current.dueAt.value,
+											props.recurrence,
+											Date.now()
+										)
+										return current.completedAt !== null && dueAt
+											? { completedAt: null, dueAt: { value: dueAt } }
+											: {}
+									})
+								}
+								variant="primary"
+							>
+								Start next reminder
+							</FeatureAction>
+						)}
+						<FeatureAction
+							component="reminder"
+							disabled={!store.ready}
+							icon={done ? 'arrow.uturn.backward' : 'checkmark'}
+							onClick={() =>
+								store.set(current => ({
+									completedAt: current.completedAt === null ? Date.now() : null,
+								}))
+							}
+							variant={next ? 'secondary' : 'primary'}
+						>
+							{done ? 'Reopen' : 'Complete'}
+						</FeatureAction>
+					</Flex>
+				</>
+			)}
+		</FeatureFrame>
+	)
+}
+
+export function Trip(input: KowalskiInput<'trip'>) {
+	const props = kowalskiCatalog.trip.props.parse(input)
+	const schema = kowalskiCatalog.trip.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiTrip',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({
+			destination: { value: props.destination },
+			endDate: { value: props.endDate },
+			origin: { value: props.origin },
+			startDate: { value: props.startDate },
+		}),
+	})
+	const [draft, setDraft] = useState({
+		destination: props.destination,
+		endDate: props.endDate,
+		origin: props.origin,
+		startDate: props.startDate,
+	})
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const [editingEndDate, setEditingEndDate] = useState(false)
+	const [editingStartDate, setEditingStartDate] = useState(false)
+	const [saveError, setSaveError] = useState(false)
+	const editing = baseline !== null
+	const transport = {
+		car: { icon: 'car.fill', label: 'By car' },
+		other: { icon: 'suitcase.fill', label: 'Travel plans' },
+		plane: { icon: 'airplane', label: 'By plane' },
+		train: { icon: 'tram.fill', label: 'By train' },
+		walk: { icon: 'figure.walk', label: 'On foot' },
+	}[props.transport]
+	const start = store.value.startDate.value
+	const end = store.value.endDate.value
+	const dateFormat = format.formatters.getDateTimeFormat(format.locale, {
+		day: 'numeric',
+		era: start?.startsWith('0000-') || end?.startsWith('0000-') ? 'short' : undefined,
+		month: 'short',
+		timeZone: 'UTC',
+		year: 'numeric',
+	})
+	const startInstant = start ? Date.parse(`${start}T12:00:00Z`) : null
+	const endInstant = end ? Date.parse(`${end}T12:00:00Z`) : null
+	const nights =
+		startInstant !== null && endInstant !== null
+			? Math.round((endInstant - startInstant) / 86_400_000)
+			: null
+	const dates =
+		startInstant !== null && endInstant !== null
+			? start === end
+				? dateFormat.format(startInstant)
+				: `${dateFormat.format(startInstant)} – ${dateFormat.format(endInstant)}`
+			: startInstant === null
+				? endInstant === null
+					? 'Dates open'
+					: `Until ${dateFormat.format(endInstant)}`
+				: `From ${dateFormat.format(startInstant)}`
+	const duration =
+		nights === null
+			? start
+				? 'End date to be decided'
+				: end
+					? 'Start date to be decided'
+					: 'Set dates when you’re ready'
+			: nights === 0
+				? 'Day trip'
+				: format.formatMessage(
+						{
+							defaultMessage:
+								'{days, number} days · {nights, plural, one {# night} other {# nights}}',
+							id: 'kowalski.trip.duration',
+						},
+						{ days: nights + 1, nights }
+					)
+	const changed =
+		baseline &&
+		(draft.destination !== baseline.destination ||
+			draft.endDate !== baseline.endDate ||
+			draft.origin !== baseline.origin ||
+			draft.startDate !== baseline.startDate)
+	const validOrigin = kowalskiCatalog.trip.props.shape.origin.safeParse(
+		draft.origin
+	).success
+	const validDestination = kowalskiCatalog.trip.props.shape.destination.safeParse(
+		draft.destination
+	).success
+	const nextStart =
+		baseline && draft.startDate !== baseline.startDate ? draft.startDate : start
+	const nextEnd = baseline && draft.endDate !== baseline.endDate ? draft.endDate : end
+	const validDates = !nextStart || !nextEnd || nextStart <= nextEnd
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="trip"
+			title={props.title}
+			detail={transport.label}
+		>
+			{editing && store.saving ? (
+				<Text {...stylex.props(roles.muted)}>Saving changes…</Text>
+			) : editing ? (
+				<Flex {...stylex.props(tripStyles.editor)}>
+					<Flex {...stylex.props(layout.field)}>
+						<Text {...stylex.props(roles.label, layout.fieldLabel)}>From</Text>
+						<Input
+							placeholder="From"
+							value={draft.origin}
+							onChange={origin => setDraft(current => ({ ...current, origin }))}
+							style={[layout.input]}
+						/>
+						{!validOrigin && (
+							<Text {...stylex.props(roles.muted)}>Use 160 characters or fewer.</Text>
+						)}
+					</Flex>
+					<Flex {...stylex.props(layout.field)}>
+						<Text {...stylex.props(roles.label, layout.fieldLabel)}>To</Text>
+						<Input
+							placeholder="To"
+							value={draft.destination}
+							onChange={destination => setDraft(current => ({ ...current, destination }))}
+							style={[layout.input]}
+						/>
+						{!validDestination && (
+							<Text {...stylex.props(roles.muted)}>Use 160 characters or fewer.</Text>
+						)}
+					</Flex>
+					<FeatureDate
+						inline
+						clearable
+						component="trip"
+						label="Start date"
+						onChange={startDate => {
+							setDraft(current => ({ ...current, startDate }))
+							setSaveError(false)
+						}}
+						onEditingChange={setEditingStartDate}
+						ready={store.ready}
+						value={draft.startDate}
+					/>
+					<FeatureDate
+						inline
+						clearable
+						component="trip"
+						label="End date"
+						onChange={endDate => {
+							setDraft(current => ({ ...current, endDate }))
+							setSaveError(false)
+						}}
+						onEditingChange={setEditingEndDate}
+						ready={store.ready}
+						value={draft.endDate}
+					/>
+					{(!validDates || saveError) && (
+						<Text {...stylex.props(roles.muted)}>
+							The trip cannot end before it starts. Adjust either date before saving.
+						</Text>
+					)}
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction
+							component="trip"
+							onClick={() => {
+								setBaseline(null)
+								setEditingEndDate(false)
+								setEditingStartDate(false)
+							}}
+						>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="trip"
+							disabled={
+								store.saving ||
+								!store.ready ||
+								editingEndDate ||
+								editingStartDate ||
+								!changed ||
+								!validOrigin ||
+								!validDestination ||
+								!validDates
+							}
+							onClick={() => {
+								if (
+									store.saving ||
+									!store.ready ||
+									editingEndDate ||
+									editingStartDate ||
+									!baseline ||
+									!changed ||
+									!validOrigin ||
+									!validDestination ||
+									!validDates
+								) {
+									return
+								}
+								try {
+									store.set(
+										current => ({
+											...(draft.destination !== baseline.destination &&
+												draft.destination !== current.destination.value && {
+													destination: { value: draft.destination },
+												}),
+											...(draft.endDate !== baseline.endDate &&
+												draft.endDate !== current.endDate.value && {
+													endDate: { value: draft.endDate },
+												}),
+											...(draft.origin !== baseline.origin &&
+												draft.origin !== current.origin.value && {
+													origin: { value: draft.origin },
+												}),
+											...(draft.startDate !== baseline.startDate &&
+												draft.startDate !== current.startDate.value && {
+													startDate: { value: draft.startDate },
+												}),
+										}),
+										() => setBaseline(null)
+									)
+								} catch {
+									setSaveError(true)
+								}
+							}}
+							variant="primary"
+						>
+							{store.saving ? 'Saving…' : 'Save changes'}
+						</FeatureAction>
+					</Flex>
+				</Flex>
+			) : (
+				<>
+					<FeatureFacts>
+						<List.Item
+							label="From"
+							trailing={
+								store.value.origin.value.trim()
+									? store.value.origin.value
+									: 'To be decided'
+							}
+						/>
+						<List.Item
+							label="To"
+							trailing={
+								store.value.destination.value.trim()
+									? store.value.destination.value
+									: 'To be decided'
+							}
+						/>
+						<List.Item description={duration} label="Dates" trailing={dates} />
+					</FeatureFacts>
+					{!editing && (
+						<FeatureAction
+							component="trip"
+							disabled={!store.ready || store.saving}
+							icon="pencil"
+							onClick={() => {
+								const values = {
+									destination: store.value.destination.value,
+									endDate: store.value.endDate.value,
+									origin: store.value.origin.value,
+									startDate: store.value.startDate.value,
+								}
+								setDraft(values)
+								setBaseline(values)
+								setSaveError(false)
+							}}
+						>
+							Edit trip
+						</FeatureAction>
+					)}
+				</>
+			)}
+		</FeatureFrame>
+	)
+}
+
+export function Contact(input: KowalskiInput<'contact'>) {
+	const props = kowalskiCatalog.contact.props.parse(input)
+	const schema = kowalskiCatalog.contact.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiContact',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({
+			email: { value: props.email ?? null },
+			name: { value: props.name },
+			phone: { value: props.phone ?? null },
+		}),
+	})
+	const [draft, setDraft] = useState({ email: '', name: '', phone: '' })
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const editing = baseline !== null
+	const name = store.value.name.value.trim() ? store.value.name.value : 'Unnamed contact'
+	const fields = [
+		{
+			key: 'name',
+			label: 'Name',
+			valid:
+				draft.name.trim().length > 0 &&
+				kowalskiCatalog.contact.props.shape.name.safeParse(draft.name).success,
+			validation: draft.name.trim() ? 'Use 160 characters or fewer.' : 'Add a name.',
+		},
+		{
+			key: 'phone',
+			label: 'Phone',
+			valid:
+				draft.phone === '' ||
+				kowalskiCatalog.contact.props.shape.phone.safeParse(draft.phone).success,
+			validation: 'Use 80 characters or fewer.',
+		},
+		{
+			key: 'email',
+			label: 'Email',
+			valid:
+				draft.email === '' ||
+				kowalskiCatalog.contact.props.shape.email.safeParse(draft.email).success,
+			validation: 'Enter a valid email address.',
+		},
+	] as const
+	const changed =
+		baseline &&
+		(draft.email !== baseline.email ||
+			draft.name !== baseline.name ||
+			draft.phone !== baseline.phone)
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="contact"
+			title={name}
+			trailing={
+				!editing && (
+					<FeatureEdit
+						disabled={!store.ready || store.saving}
+						label="Edit contact"
+						onClick={() => {
+							const values = {
+								email: store.value.email.value ?? '',
+								name: store.value.name.value,
+								phone: store.value.phone.value ?? '',
+							}
+							setBaseline(values)
+							setDraft(values)
+						}}
+					/>
+				)
+			}
+		>
+			{editing && !store.saving ? (
+				<Flex {...stylex.props(contactStyles.editor)}>
+					{fields.map(field => (
+						<Flex key={field.key} {...stylex.props(layout.field)}>
+							<Flex {...stylex.props(contactStyles.fieldLabel)}>
+								<Text {...stylex.props(roles.label, layout.fieldLabel)}>
+									{field.label}
+								</Text>
+								{field.key !== 'name' && (
+									<Text {...stylex.props(roles.muted, contactStyles.optional)}>
+										Optional
+									</Text>
+								)}
+							</Flex>
+							<Input
+								placeholder={field.label}
+								value={draft[field.key]}
+								onChange={value =>
+									setDraft(current => ({ ...current, [field.key]: value }))
+								}
+								style={[layout.input]}
+							/>
+							{!field.valid && (
+								<Text {...stylex.props(roles.muted)}>{field.validation}</Text>
+							)}
+						</Flex>
+					))}
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction component="contact" onClick={() => setBaseline(null)}>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="contact"
+							disabled={
+								store.saving ||
+								!store.ready ||
+								!changed ||
+								fields.some(field => !field.valid)
+							}
+							variant="primary"
+							onClick={() => {
+								if (!baseline || !changed || fields.some(field => !field.valid)) {
+									return
+								}
+								store.set(
+									current => ({
+										...(draft.email !== baseline.email &&
+											draft.email !== (current.email.value ?? '') && {
+												email: { value: draft.email || null },
+											}),
+										...(draft.name !== baseline.name &&
+											draft.name !== current.name.value && {
+												name: { value: draft.name },
+											}),
+										...(draft.phone !== baseline.phone &&
+											draft.phone !== (current.phone.value ?? '') && {
+												phone: { value: draft.phone || null },
+											}),
+									}),
+									() => setBaseline(null)
+								)
+							}}
+						>
+							Save changes
+						</FeatureAction>
+					</Flex>
+				</Flex>
+			) : (
+				<>
+					{store.saving ? (
+						<Text {...stylex.props(roles.muted)}>Saving changes…</Text>
+					) : !store.ready && !store.error ? (
+						<Text {...stylex.props(roles.muted)}>Loading contact…</Text>
+					) : null}
+					<FeatureFacts>
+						<List.Item
+							label="Phone"
+							trailing={store.value.phone.value ?? 'No phone number'}
+						/>
+						<List.Item
+							label="Email"
+							trailing={store.value.email.value ?? 'No email address'}
+						/>
+					</FeatureFacts>
+					<Flex {...stylex.props(layout.actions)}>
+						{(
+							[
+								{ address: store.value.phone.value, icon: 'phone', verb: 'Call' },
+								{ address: store.value.email.value, icon: 'envelope', verb: 'Email' },
+							] as const
+						).map(
+							field =>
+								field.address !== null && (
+									<NativeButton
+										accessibilityLabel={`${field.verb} ${name}`}
+										disabled={!store.ready || store.saving}
+										href={
+											field.verb === 'Call'
+												? `tel:${encodeURIComponent(field.address.replaceAll(/[()\s.-]/g, ''))}`
+												: `mailto:${encodeURIComponent(field.address)}`
+										}
+										key={field.verb}
+										style={[button.secondary, button.lg, layout.action]}
+									>
+										<Flex {...stylex.props(layout.actionContent)}>
+											<Icon name={field.icon} />
+											<Text>{field.verb}</Text>
+										</Flex>
+									</NativeButton>
+								)
+						)}
+					</Flex>
+				</>
+			)}
+		</FeatureFrame>
+	)
+}
+
+export function Bookmark(input: KowalskiInput<'bookmark'>) {
+	const props = kowalskiCatalog.bookmark.props.parse(input)
+	const schema = kowalskiCatalog.bookmark.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiBookmark',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({
+			note: { value: props.note },
+			title: { value: props.title },
+			url: { value: props.url },
+		}),
+	})
+	const [draft, setDraft] = useState({ note: '', title: '', url: '' })
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const [showAddress, setShowAddress] = useState(false)
+	const [showFullNote, setShowFullNote] = useState(false)
+	const editing = baseline !== null
+	const domain = (store.value.url.value ?? '')
+		.replace(/^https?:\/\//i, '')
+		.split(/[/?#]/)[0]
+		?.split('@')
+		.pop()
+		?.replace(/^www\./i, '')
+	const title = store.value.title.value.trim()
+		? store.value.title.value
+		: domain || 'Untitled bookmark'
+	const note = store.value.note.value
+	const noteCharacters = toArray(note)
+	const longNote = noteCharacters.length > 360
+	const valid = {
+		note: kowalskiCatalog.bookmark.props.shape.note.safeParse(draft.note).success,
+		title: kowalskiCatalog.bookmark.props.shape.title.safeParse(draft.title).success,
+		url: kowalskiCatalog.bookmark.props.shape.url.safeParse(draft.url).success,
+	}
+	const changed =
+		baseline &&
+		(draft.note !== baseline.note ||
+			draft.title !== baseline.title ||
+			draft.url !== baseline.url)
+	function editBookmark() {
+		if (!store.ready || store.saving) {
+			return
+		}
+		const values = {
+			note: store.value.note.value,
+			title: store.value.title.value,
+			url: store.value.url.value ?? '',
+		}
+		setDraft(values)
+		setBaseline(values)
+	}
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="bookmark"
+			title={title}
+			detail={domain || 'No web address'}
+			trailing={
+				!editing && (
+					<FeatureEdit
+						disabled={!store.ready || store.saving}
+						label="Edit bookmark"
+						onClick={editBookmark}
+					/>
+				)
+			}
+		>
+			{editing ? (
+				<Flex {...stylex.props(bookmarkStyles.editor)}>
+					{store.saving && <Text {...stylex.props(roles.muted)}>Saving changes…</Text>}
+					{(
+						[
+							{ key: 'title', label: 'Title', message: 'Use 160 characters or fewer.' },
+							{
+								key: 'url',
+								label: 'Web address',
+								message: 'Use a valid address starting with https:// or http://.',
+							},
+							{ key: 'note', label: 'Note', message: 'Use 10,000 characters or fewer.' },
+						] as const
+					).map(field => (
+						<Flex key={field.key} {...stylex.props(layout.field)}>
+							<Flex {...stylex.props(bookmarkStyles.fieldLabel)}>
+								<Text {...stylex.props(roles.label, layout.fieldLabel)}>
+									{field.label}
+								</Text>
+								{field.key !== 'url' && (
+									<Text {...stylex.props(roles.muted, bookmarkStyles.caption)}>
+										Optional
+									</Text>
+								)}
+							</Flex>
+							{store.saving ? (
+								<Text
+									{...stylex.props(
+										roles.text,
+										appearance.surface,
+										layout.input,
+										bookmarkStyles.submittedValue
+									)}
+								>
+									{draft[field.key] || (field.key === 'note' ? 'No note' : 'No title')}
+								</Text>
+							) : (
+								<Input
+									multiline={field.key === 'note'}
+									placeholder={field.label}
+									value={draft[field.key]}
+									onChange={value =>
+										setDraft(current => ({ ...current, [field.key]: value }))
+									}
+									style={[layout.input, field.key === 'note' && layout.multiline]}
+								/>
+							)}
+							{!valid[field.key] && (
+								<Text {...stylex.props(roles.muted)}>{field.message}</Text>
+							)}
+						</Flex>
+					))}
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction
+							component="bookmark"
+							disabled={store.saving}
+							onClick={() => setBaseline(null)}
+						>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="bookmark"
+							disabled={
+								store.saving ||
+								!store.ready ||
+								!changed ||
+								!valid.title ||
+								!valid.url ||
+								!valid.note
+							}
+							onClick={() => {
+								if (
+									!store.ready ||
+									store.saving ||
+									!baseline ||
+									!changed ||
+									!valid.title ||
+									!valid.url ||
+									!valid.note
+								) {
+									return
+								}
+								store.set(
+									current => ({
+										...(draft.title !== baseline.title &&
+											draft.title !== current.title.value && {
+												title: { value: draft.title },
+											}),
+										...(draft.url !== baseline.url &&
+											draft.url !== (current.url.value ?? '') && {
+												url: { value: draft.url || null },
+											}),
+										...(draft.note !== baseline.note &&
+											draft.note !== current.note.value && {
+												note: { value: draft.note },
+											}),
+									}),
+									() => setBaseline(null)
+								)
+							}}
+							variant="primary"
+						>
+							{store.saving ? 'Saving…' : 'Save changes'}
+						</FeatureAction>
+					</Flex>
+				</Flex>
+			) : (
+				<Flex {...stylex.props(bookmarkStyles.details)}>
+					{store.saving ? (
+						<Text {...stylex.props(roles.muted)}>Saving changes…</Text>
+					) : !store.ready && !store.error ? (
+						<Text {...stylex.props(roles.muted)}>Loading bookmark…</Text>
+					) : null}
+					<Flex {...stylex.props(bookmarkStyles.note)}>
+						{note && (
+							<Text {...stylex.props(roles.text, bookmarkStyles.noteText)}>
+								{longNote && !showFullNote
+									? `${noteCharacters.slice(0, 360).join('')}…`
+									: note}
+							</Text>
+						)}
+						{longNote && (
+							<FeatureAction
+								component="bookmark"
+								onClick={() => setShowFullNote(current => !current)}
+								variant="quiet"
+							>
+								{showFullNote ? 'Show less' : 'Read full note'}
+							</FeatureAction>
+						)}
+						{!note && (
+							<FeatureAction
+								component="bookmark"
+								disabled={!store.ready || store.saving}
+								icon="plus"
+								onClick={editBookmark}
+								variant="quiet"
+							>
+								Add a note
+							</FeatureAction>
+						)}
+					</Flex>
+					{store.value.url.value && (
+						<Flex {...stylex.props(bookmarkStyles.address)}>
+							<NativeButton
+								onClick={() => setShowAddress(current => !current)}
+								style={[button.quiet, bookmarkStyles.addressButton]}
+							>
+								<Flex {...stylex.props(bookmarkStyles.addressRow)}>
+									<Text {...stylex.props(roles.strong, bookmarkStyles.caption)}>
+										{showAddress ? 'Hide web address' : 'Show web address'}
+									</Text>
+									<Icon
+										name={showAddress ? 'chevron.up' : 'chevron.down'}
+										{...stylex.props(roles.muted, bookmarkStyles.chevron)}
+									/>
+								</Flex>
+							</NativeButton>
+							{showAddress && (
+								<Flex {...stylex.props(appearance.surface, bookmarkStyles.addressValue)}>
+									<Text {...stylex.props(roles.muted, bookmarkStyles.caption)}>
+										{store.value.url.value}
+									</Text>
+								</Flex>
+							)}
+						</Flex>
+					)}
+					{store.value.url.value && (
+						<NativeButton
+							accessibilityLabel={`Open ${title}`}
+							disabled={!store.ready || store.saving}
+							href={store.value.url.value}
+							style={[button.primary, button.lg, layout.action]}
+						>
+							<Flex {...stylex.props(layout.actionContent)}>
+								<Icon name="arrow.up.right" />
+								<Text>Open link</Text>
+							</Flex>
+						</NativeButton>
+					)}
+				</Flex>
+			)}
+		</FeatureFrame>
+	)
+}
+
+export function Note(input: KowalskiInput<'note'>) {
+	const props = kowalskiCatalog.note.props.parse(input)
+	const schema = kowalskiCatalog.note.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiNote',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({ body: { value: props.body }, title: { value: props.title } }),
+	})
+	const [bodyDraft, setBodyDraft] = useState<{ value: string } | null>(null)
+	const [titleDraft, setTitleDraft] = useState<{ value: string } | null>(null)
+	const body = bodyDraft?.value ?? store.value.body.value
+	const title = titleDraft?.value ?? store.value.title.value
+	const validBody = body.length <= 20_000
+	const validTitle = title.length <= 160
+	const text = store.ready ? body : store.value.body.value
+	const wordCount = useMemo(
+		() =>
+			[...new Intl.Segmenter('en', { granularity: 'word' }).segment(text)].filter(
+				// Older JavaScriptCore versions mark numeric words as non-word-like.
+				word => word.isWordLike || /\p{N}/u.test(word.segment)
+			).length,
+		[text]
+	)
+	const hasDraft = bodyDraft !== null || titleDraft !== null
+	const status = store.ready
+		? !validBody || !validTitle
+			? 'Not saved'
+			: store.saving
+				? 'Saving…'
+				: hasDraft || store.error
+					? 'Not saved'
+					: 'Saved'
+		: store.error
+			? 'Read-only'
+			: 'Loading…'
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="note"
+			title={store.value.title.value || 'Untitled note'}
+			header={false}
+		>
+			<FeatureWell>
+				{store.ready ? (
+					<Input
+						multiline
+						placeholder="Untitled note"
+						value={title}
+						onChange={next => {
+							const draft = { value: next }
+							setTitleDraft(draft)
+							if (next.length <= 160) {
+								store.set(
+									() => ({ title: draft }),
+									() => setTitleDraft(current => (current === draft ? null : current))
+								)
+							}
+						}}
+						style={[roles.h2, noteStyles.page]}
+					/>
+				) : (
+					<Text {...stylex.props(roles.h2)}>
+						{store.value.title.value || 'Untitled note'}
+					</Text>
+				)}
+				{store.ready ? (
+					<Input
+						multiline
+						placeholder="Start writing…"
+						value={body}
+						onChange={next => {
+							const draft = { value: next }
+							setBodyDraft(draft)
+							if (next.length <= 20_000) {
+								store.set(
+									() => ({ body: draft }),
+									() => setBodyDraft(current => (current === draft ? null : current))
+								)
+							}
+						}}
+						style={[roles.text, noteStyles.page, noteStyles.body]}
+					/>
+				) : (
+					<Text {...stylex.props(roles.text, noteStyles.body)}>
+						{text || (store.error ? 'This note is empty.' : 'Loading note…')}
+					</Text>
+				)}
+			</FeatureWell>
+			{!validTitle && (
+				<Text {...stylex.props(roles.muted, layout.notice)}>
+					Title is too long. Use 160 characters or fewer.
+				</Text>
+			)}
+			<Flex {...stylex.props(noteStyles.writing)}>
+				{!validBody && (
+					<Text {...stylex.props(roles.muted, layout.notice)}>
+						Note is too long. Use 20,000 characters or fewer to save.
+					</Text>
+				)}
+				<Flex {...stylex.props(noteStyles.footer)}>
+					<Text {...stylex.props(roles.muted)}>
+						{format.formatMessage(
+							{
+								defaultMessage: '{count, plural, one {# word} other {# words}}',
+								id: 'kowalski.note.words',
+							},
+							{ count: wordCount }
+						)}
+					</Text>
+					<Text {...stylex.props(roles.muted)}>{status}</Text>
+				</Flex>
+				{store.ready && !store.saving && hasDraft && validBody && validTitle && (
+					<FeatureAction
+						component="note"
+						onClick={() => {
+							store.set(
+								() => ({
+									...(bodyDraft && { body: bodyDraft }),
+									...(titleDraft && { title: titleDraft }),
+								}),
+								() => {
+									setBodyDraft(current => (current === bodyDraft ? null : current))
+									setTitleDraft(current => (current === titleDraft ? null : current))
+								}
+							)
+						}}
+					>
+						Retry save
+					</FeatureAction>
+				)}
+			</Flex>
+		</FeatureFrame>
+	)
+}
+
+const eventStyles = stylex.create({
+	editor: { gap: space[5] },
+	fieldLabel: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+	optional: { fontSize: text['xs'] },
+})
+
+const contactStyles = stylex.create({
+	editor: { gap: space[5] },
+	fieldLabel: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+	optional: { fontSize: text['xs'] },
+})
+
+const reminderStyles = stylex.create({
+	editor: { gap: space[5] },
+})
+
+const tripStyles = stylex.create({
+	editor: { gap: space[5] },
+})
+
+const bookmarkStyles = stylex.create({
+	address: { gap: space[1], minWidth: size[0.5] },
+	addressButton: { padding: `${space[2]} 0`, textAlign: 'left' },
+	addressRow: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		gap: space[3],
+		justifyContent: 'space-between',
+	},
+	addressValue: { minWidth: size[0.5], padding: `${space[3]} ${space[3.5]}` },
+	caption: { fontSize: text['sm'] },
+	chevron: { fontSize: text['xs'], fontWeight: '600' },
+	details: { gap: space[4] },
+	editor: { gap: space[5] },
+	fieldLabel: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+	note: { gap: space[3] },
+	noteText: { lineHeight: '1.6' },
+	submittedValue: { minWidth: size[0.5] },
+})
+
+// The note is a page: borderless text on one surface, word count and status below it.
+const noteStyles = stylex.create({
+	body: { minHeight: space[24] },
+	footer: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[2],
+		justifyContent: 'space-between',
+	},
+	page: {
+		backgroundColor: 'transparent',
+		borderWidth: 0,
+		paddingLeft: 0,
+		paddingRight: 0,
+		textAlign: 'left',
+		width: '100%',
+	},
+	writing: { gap: space[2] },
+})