@flickfyi/flkr 0.0.182 → 0.0.185

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

@@ -1,1387 +0,0 @@
-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] },
-})