@flickfyi/flkr 0.0.140 → 0.0.146

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

@@ -0,0 +1,1213 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button, Input, Picker } from '@flickfyi/core/atoms'
+import { Field, List, Segmented, Stat, Stepper } from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { isEqual, uniqBy } from 'lodash'
+import { useEffect, useMemo, useState } from 'react'
+
+import { buttonVars } from '~/atoms/button/button.stylex'
+import { radius, size, space, text } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+import { colors, font } from '~/themes/tokens.stylex'
+
+import { billShares, convertUnit, formatCurrency, pickResult } from './calculations'
+import {
+	calculatorDisplay,
+	calculatorEquation,
+	calculatorKeyLabel,
+	calculatorKeys,
+	initialCalculator,
+	pressCalculatorKey,
+} from './calculator'
+import {
+	kowalskiCatalog,
+	type KowalskiInput,
+	type PickerDomain,
+	unitDefinitions,
+} from './catalog'
+import { format, parseNumberInput } from './format'
+import {
+	FeatureAction,
+	FeatureFacts,
+	FeatureField,
+	FeatureFrame,
+	FeatureNumber,
+	FeatureWell,
+	layout,
+} from './frame'
+import { useConfiguredFeature } from './use-configured-feature'
+
+export function BillSplit(input: KowalskiInput<'billSplit'>) {
+	const props = kowalskiCatalog.billSplit.props.parse(input)
+	const schema = kowalskiCatalog.billSplit.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiBillSplit',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({
+			people: props.people,
+			tipPercent: props.tipPercent,
+			total: props.total,
+		}),
+	})
+	const result = billShares(
+		store.value.total,
+		store.value.people,
+		store.value.tipPercent,
+		props.currency
+	)
+	const money = format.formatters.getNumberFormat(format.locale, {
+		currency: props.currency,
+		style: 'currency',
+	})
+	const billTotal = formatCurrency(store.value.total, props.currency)
+	const perPerson = money.format(result.perPerson)
+	const subtotal = billShares(store.value.total, 1, 0, props.currency).total
+	const tipPresets = [0, 15, 20, 25]
+	const [customTipOpen, setCustomTipOpen] = useState(false)
+	const [peopleDraft, setPeopleDraft] = useState(
+		format.formatNumber(store.value.people, { format: 'integer' })
+	)
+	const [preservePeopleDraft, setPreservePeopleDraft] = useState<{ text: string }>()
+	useEffect(() => {
+		if (preservePeopleDraft === undefined) {
+			setPeopleDraft(current =>
+				parseNumberInput(current) === store.value.people
+					? current
+					: format.formatNumber(store.value.people, { format: 'integer' })
+			)
+		}
+	}, [preservePeopleDraft, store.value.people])
+	const customTipVisible = customTipOpen || !tipPresets.includes(store.value.tipPercent)
+	const peopleValid = schema.shape.people.safeParse(parseNumberInput(peopleDraft)).success
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="billSplit"
+			title={props.title}
+		>
+			<FeatureField
+				component="billSplit"
+				label="Bill total"
+				value={billTotal}
+				ready={store.ready}
+				saving={store.saving}
+				parseValue={value => parseNumberInput(value, props.currency)}
+				validate={value =>
+					schema.shape.total.safeParse(parseNumberInput(value, props.currency)).success
+				}
+				onChange={(value, onSaved) => {
+					store.set({ total: parseNumberInput(value, props.currency) }, onSaved)
+				}}
+			/>
+			<Field label="Tip">
+				<Segmented
+					disabled={!store.ready}
+					options={[
+						...tipPresets.map(tip => ({
+							label: format.formatNumber(tip / 100, { style: 'percent' }),
+							value: tip,
+						})),
+						{ label: 'Custom', value: 'custom' as const },
+					]}
+					value={customTipVisible ? 'custom' : store.value.tipPercent}
+					onChange={tip => {
+						setCustomTipOpen(tip === 'custom')
+						if (typeof tip === 'number') {
+							store.set({ tipPercent: tip })
+						}
+					}}
+				/>
+			</Field>
+			{customTipVisible && (
+				<FeatureNumber
+					component="billSplit"
+					label="Tip percent"
+					min={0}
+					max={100}
+					ready={store.ready}
+					saving={store.saving}
+					value={store.value.tipPercent}
+					onChange={(tipPercent, onSaved) => {
+						store.set({ tipPercent }, onSaved)
+					}}
+				/>
+			)}
+			<Field error={!peopleValid && 'Choose 1–1,000 people.'} label="People">
+				<Stepper
+					decrementDisabled={!store.ready || store.value.people <= 1}
+					decrementLabel="Fewer people"
+					incrementDisabled={!store.ready || store.value.people >= 1000}
+					incrementLabel="More people"
+					onDecrement={() => {
+						setPreservePeopleDraft(undefined)
+						store.set(current => ({ people: Math.max(1, current.people - 1) }))
+					}}
+					onIncrement={() => {
+						setPreservePeopleDraft(undefined)
+						store.set(current => ({ people: Math.min(1000, current.people + 1) }))
+					}}
+				>
+					{store.ready ? (
+						<Input
+							placeholder="People"
+							value={peopleDraft}
+							onChange={text => {
+								setPeopleDraft(text)
+								const edit = { text }
+								setPreservePeopleDraft(edit)
+								if (schema.shape.people.safeParse(parseNumberInput(text)).success) {
+									store.set({ people: parseNumberInput(text) }, () =>
+										setPreservePeopleDraft(current =>
+											current === edit ? undefined : current
+										)
+									)
+								}
+							}}
+							style={[layout.input, layout.stepperInput]}
+						/>
+					) : (
+						<Text {...stylex.props(roles.text, layout.stepperInput)}>
+							{format.formatNumber(store.value.people, { format: 'integer' })}
+						</Text>
+					)}
+				</Stepper>
+				{store.ready &&
+					peopleValid &&
+					preservePeopleDraft !== undefined &&
+					!store.saving && (
+						<FeatureAction
+							component="billSplit"
+							onClick={() =>
+								store.set({ people: parseNumberInput(peopleDraft) }, () =>
+									setPreservePeopleDraft(current =>
+										current === preservePeopleDraft ? undefined : current
+									)
+								)
+							}
+						>
+							Retry people
+						</FeatureAction>
+					)}
+			</Field>
+			<FeatureWell>
+				<Stat>
+					<Stat.Value style={billStyles.amount(perPerson.length)}>{perPerson}</Stat.Value>
+					<Stat.Caption>Per person</Stat.Caption>
+				</Stat>
+				{result.remainder > 0 && (
+					<Text {...stylex.props(roles.muted, billStyles.centered)}>
+						{`One person pays ${money.format(result.perPerson + result.remainder)} — ${money.format(result.remainder)} extra to cover rounding.`}
+					</Text>
+				)}
+				{store.value.tipPercent > 0 && (
+					<Flex {...stylex.props(billStyles.row)}>
+						<Text
+							{...stylex.props(roles.muted)}
+						>{`Tip (${format.formatNumber(store.value.tipPercent, { format: 'decimal', style: 'unit', unit: 'percent', unitDisplay: 'narrow' })})`}</Text>
+						<Text {...stylex.props(roles.text)}>
+							{money.format(result.total - subtotal)}
+						</Text>
+					</Flex>
+				)}
+				<Flex {...stylex.props(billStyles.row)}>
+					<Text {...stylex.props(roles.strong)}>Total with tip</Text>
+					<Text {...stylex.props(roles.strong)}>{money.format(result.total)}</Text>
+				</Flex>
+			</FeatureWell>
+		</FeatureFrame>
+	)
+}
+
+export function Expense(input: KowalskiInput<'expense'>) {
+	const props = kowalskiCatalog.expense.props.parse(input)
+	const schema = kowalskiCatalog.expense.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiExpense',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({
+			amount: props.amount,
+			category: { value: props.category },
+			title: { value: props.title },
+		}),
+	})
+	const [draft, setDraft] = useState({ amount: '', category: '', title: '' })
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const editing = baseline !== null
+	const amount = parseNumberInput(draft.amount, props.currency)
+	const validAmount = schema.shape.amount.safeParse(amount).success
+	const validTitle =
+		draft.title.trim().length > 0 &&
+		kowalskiCatalog.expense.props.shape.title.safeParse(draft.title).success
+	const validCategory = kowalskiCatalog.expense.props.shape.category.safeParse(
+		draft.category
+	).success
+	const changed =
+		baseline !== null &&
+		(amount !== parseNumberInput(baseline.amount, props.currency) ||
+			draft.category !== baseline.category ||
+			draft.title !== baseline.title)
+	const formattedAmount = formatCurrency(store.value.amount, props.currency)
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="expense"
+			title={
+				editing
+					? 'Edit expense'
+					: store.value.title.value.trim()
+						? store.value.title.value
+						: 'Untitled expense'
+			}
+		>
+			{editing ? (
+				<>
+					<Field
+						error={!validAmount && 'Enter an amount from 0 to 1,000,000,000,000.'}
+						label={props.currency === 'USD' ? 'Amount' : `Amount (${props.currency})`}
+					>
+						{store.saving ? (
+							<Text {...stylex.props(roles.text)}>{draft.amount}</Text>
+						) : (
+							<Input
+								placeholder="Amount"
+								value={draft.amount}
+								onChange={value => setDraft(current => ({ ...current, amount: value }))}
+								style={[layout.input]}
+							/>
+						)}
+					</Field>
+					{(
+						[
+							{
+								key: 'title',
+								label: 'Description',
+								valid: validTitle,
+								validation: 'Add a description using 160 characters or fewer.',
+							},
+							{
+								key: 'category',
+								label: 'Category',
+								valid: validCategory,
+								validation: 'Use 80 characters or fewer.',
+							},
+						] as const
+					).map(field => (
+						<Field
+							error={!field.valid && field.validation}
+							key={field.key}
+							label={field.label}
+						>
+							{store.saving ? (
+								<Text {...stylex.props(roles.text)}>
+									{draft[field.key] || 'Uncategorized'}
+								</Text>
+							) : (
+								<Input
+									placeholder={field.label}
+									value={draft[field.key]}
+									onChange={value =>
+										setDraft(current => ({ ...current, [field.key]: value }))
+									}
+									style={[layout.input]}
+								/>
+							)}
+						</Field>
+					))}
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction
+							component="expense"
+							disabled={store.saving}
+							onClick={() => {
+								if (!store.saving) {
+									setBaseline(null)
+								}
+							}}
+						>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="expense"
+							disabled={
+								store.saving ||
+								!store.ready ||
+								!changed ||
+								!validAmount ||
+								!validTitle ||
+								!validCategory
+							}
+							variant="primary"
+							onClick={() => {
+								if (
+									!baseline ||
+									!store.ready ||
+									store.saving ||
+									!changed ||
+									!validAmount ||
+									!validTitle ||
+									!validCategory
+								) {
+									return
+								}
+								store.set(
+									() => ({
+										...(amount !== parseNumberInput(baseline.amount, props.currency) && {
+											amount,
+										}),
+										...(draft.category !== baseline.category && {
+											category: { value: draft.category },
+										}),
+										...(draft.title !== baseline.title && {
+											title: { value: draft.title },
+										}),
+									}),
+									() => setBaseline(null)
+								)
+							}}
+						>
+							{store.saving ? 'Saving…' : 'Save changes'}
+						</FeatureAction>
+					</Flex>
+					{store.saving && <Text {...stylex.props(roles.muted)}>Saving changes…</Text>}
+				</>
+			) : (
+				<>
+					<FeatureWell>
+						<Text
+							animated="numeric"
+							{...stylex.props(
+								roles.display,
+								expenseStyles.amount(formattedAmount.length)
+							)}
+						>
+							{formattedAmount}
+						</Text>
+						<Text {...stylex.props(roles.muted)}>
+							{store.value.category.value.trim()
+								? store.value.category.value
+								: 'Uncategorized'}
+						</Text>
+					</FeatureWell>
+					{!editing && (
+						<FeatureAction
+							component="expense"
+							disabled={!store.ready || store.saving}
+							icon="pencil"
+							onClick={() => {
+								const values = {
+									amount: formattedAmount,
+									category: store.value.category.value,
+									title: store.value.title.value,
+								}
+								setBaseline(values)
+								setDraft(values)
+							}}
+						>
+							Edit expense
+						</FeatureAction>
+					)}
+				</>
+			)}
+		</FeatureFrame>
+	)
+}
+
+export function UnitConverter(input: KowalskiInput<'unitConverter'>) {
+	const props = kowalskiCatalog.unitConverter.props.parse(input)
+	const schema = kowalskiCatalog.unitConverter.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiUnitConverter',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({
+			from: { value: props.from },
+			to: { value: props.to },
+			value: props.value,
+		}),
+	})
+	const units = [
+		{ label: 'Meters', value: 'm' },
+		{ label: 'Kilometers', value: 'km' },
+		{ label: 'Miles', value: 'mi' },
+		{ label: 'Feet', value: 'ft' },
+		{ label: 'Kilograms', value: 'kg' },
+		{ label: 'Grams', value: 'g' },
+		{ label: 'Pounds', value: 'lb' },
+		{ label: 'Celsius', value: 'c' },
+		{ label: 'Fahrenheit', value: 'f' },
+		{ label: 'Kelvin', value: 'k' },
+	] satisfies {
+		label: string
+		value: keyof typeof unitDefinitions
+	}[]
+	const groups = [
+		{ from: 'm', label: 'Length', to: 'ft' },
+		{ from: 'kg', label: 'Weight', to: 'lb' },
+		{ from: 'c', label: 'Temperature', to: 'f' },
+	] satisfies {
+		from: keyof typeof unitDefinitions
+		label: string
+		to: keyof typeof unitDefinitions
+	}[]
+	const dimension = unitDefinitions[store.value.from.value].dimension
+	const compatibleUnits = units.filter(
+		unit => unitDefinitions[unit.value].dimension === dimension
+	)
+	const fromUnit = units.find(unit => unit.value === store.value.from.value)
+	const toUnit = units.find(unit => unit.value === store.value.to.value)
+	const storedValue = format.formatNumber(store.value.value, { format: 'decimal' })
+	const [draft, setDraft] = useState(storedValue)
+	const [preserveDraft, setPreserveDraft] = useState<string>()
+	useEffect(() => {
+		if (store.error && store.ready) {
+			setPreserveDraft(current => current ?? draft)
+			return
+		}
+		if (preserveDraft !== undefined) {
+			return
+		}
+		setDraft(current =>
+			parseNumberInput(current) === store.value.value ? current : storedValue
+		)
+	}, [draft, preserveDraft, store.error, store.ready, store.value.value, storedValue])
+	const valid = Number.isFinite(parseNumberInput(draft))
+	const result = convertUnit(
+		valid ? parseNumberInput(draft) : store.value.value,
+		store.value.from.value,
+		store.value.to.value
+	)
+	// Four significant digits below one, three decimals above: 6.214 mi, not 6.2137119.
+	const formattedResult = valid
+		? Number.isFinite(result)
+			? format.formatNumber(result, {
+					notation:
+						Math.abs(result) >= 1e9 || (result !== 0 && Math.abs(result) < 1e-6)
+							? 'scientific'
+							: 'standard',
+					...(Math.abs(result) < 1
+						? { maximumSignificantDigits: 4 }
+						: { maximumFractionDigits: 3 }),
+				})
+			: 'Out of range'
+		: '—'
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="unitConverter"
+			title={props.title}
+		>
+			<Segmented
+				disabled={!store.ready}
+				options={groups.map(group => ({ label: group.label, value: group.label }))}
+				value={
+					groups.find(group => unitDefinitions[group.from].dimension === dimension)?.label
+				}
+				onChange={label => {
+					const group = groups.find(option => option.label === label)
+					if (!group) {
+						return
+					}
+					store.set(current =>
+						unitDefinitions[current.from.value].dimension ===
+						unitDefinitions[group.from].dimension
+							? {}
+							: { from: { value: group.from }, to: { value: group.to } }
+					)
+				}}
+			/>
+			<Field error={!valid && 'Enter a valid number.'} label="From">
+				{store.ready ? (
+					<Input
+						placeholder="Value"
+						value={draft}
+						onChange={text => {
+							setDraft(text)
+							setPreserveDraft(text)
+							if (Number.isFinite(parseNumberInput(text))) {
+								store.set(
+									() => ({ value: parseNumberInput(text) }),
+									() =>
+										setPreserveDraft(current => (current === text ? undefined : current))
+								)
+							}
+						}}
+						style={[layout.input]}
+					/>
+				) : (
+					<Text {...stylex.props(roles.text)}>{draft}</Text>
+				)}
+				{store.ready ? (
+					<Picker
+						label="From unit"
+						value={fromUnit?.label}
+						onChange={label => {
+							store.set(current => {
+								const unit = units.find(option => option.label === label)
+								return unit &&
+									unitDefinitions[unit.value].dimension ===
+										unitDefinitions[current.to.value].dimension
+									? { from: { value: unit.value } }
+									: {}
+							})
+						}}
+						style={layout.input}
+					>
+						{compatibleUnits.map(unit => (
+							<Text key={unit.value} value={unit.label}>
+								{unit.label}
+							</Text>
+						))}
+					</Picker>
+				) : (
+					<Text {...stylex.props(roles.text)}>{fromUnit?.label}</Text>
+				)}
+				{store.saving && <Text {...stylex.props(roles.muted)}>Saving changes…</Text>}
+				{preserveDraft !== undefined &&
+					store.ready &&
+					valid &&
+					parseNumberInput(draft) !== store.value.value && (
+						<FeatureAction
+							component="unitConverter"
+							disabled={store.saving}
+							onClick={() =>
+								store.set(
+									() => ({ value: parseNumberInput(draft) }),
+									() =>
+										setPreserveDraft(current => (current === draft ? undefined : current))
+								)
+							}
+						>
+							Retry saving value
+						</FeatureAction>
+					)}
+			</Field>
+			<FeatureWell>
+				<Text {...stylex.props(roles.h1, unitStyles.result)}>{formattedResult}</Text>
+				{store.ready ? (
+					<Picker
+						label="To unit"
+						value={toUnit?.label}
+						onChange={label => {
+							store.set(current => {
+								const unit = units.find(option => option.label === label)
+								return unit &&
+									unitDefinitions[unit.value].dimension ===
+										unitDefinitions[current.from.value].dimension
+									? { to: { value: unit.value } }
+									: {}
+							})
+						}}
+						style={layout.input}
+					>
+						{compatibleUnits.map(unit => (
+							<Text key={unit.value} value={unit.label}>
+								{unit.label}
+							</Text>
+						))}
+					</Picker>
+				) : (
+					<Text {...stylex.props(roles.text)}>{toUnit?.label}</Text>
+				)}
+			</FeatureWell>
+			<FeatureAction
+				component="unitConverter"
+				icon="arrow.left.arrow.right"
+				disabled={!store.ready}
+				onClick={() => {
+					store.set(current => ({ from: current.to, to: current.from }))
+				}}
+			>
+				Swap units
+			</FeatureAction>
+		</FeatureFrame>
+	)
+}
+
+export function Calculator(input: KowalskiInput<'calculator'>) {
+	const props = kowalskiCatalog.calculator.props.parse(input)
+	const schema = kowalskiCatalog.calculator.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiCalculator',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({ calculation: initialCalculator(props) }),
+	})
+	const calculation = store.value.calculation
+	const display = calculatorDisplay(calculation.entry)
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="calculator"
+			title={props.title}
+		>
+			<FeatureWell>
+				<Text {...stylex.props(roles.muted, calculatorStyles.equation)}>
+					{calculatorEquation(calculation)}
+				</Text>
+				<Text {...stylex.props(roles.display, calculatorStyles.value(display.length))}>
+					{display}
+				</Text>
+				{calculation.phase === 'error' && (
+					<Text {...stylex.props(roles.muted, calculatorStyles.error)}>
+						{calculation.operator === '/' && calculation.right === 0
+							? 'Cannot divide by zero'
+							: 'Number out of range'}
+					</Text>
+				)}
+			</FeatureWell>
+			<Flex {...stylex.props(calculatorStyles.keypad)}>
+				{calculatorKeys.map(key => {
+					const operation = key === '+' || key === '-' || key === '*' || key === '/'
+					const utility =
+						key === 'backspace' || key === 'clear' || key === 'sign' || key === '%'
+					const selected =
+						operation && calculation.phase === 'operator' && calculation.operator === key
+					return (
+						<Button
+							accessibilityLabel={
+								key === 'backspace'
+									? '⌫: delete last digit'
+									: calculatorKeyLabel(calculation, key)
+							}
+							key={key}
+							disabled={!store.ready}
+							selected={selected}
+							onClick={() => {
+								store.set(current => ({
+									calculation: pressCalculatorKey(current.calculation, key),
+								}))
+							}}
+							style={[
+								button.secondary,
+								(operation || utility) && calculatorStyles.operation,
+								key === '=' && button.primary,
+								calculatorStyles.key,
+								utility && calculatorStyles.utility,
+								operation && calculatorStyles.operator,
+							]}
+						>
+							<Text {...stylex.props(roles.h2)}>
+								{calculatorKeyLabel(calculation, key)}
+							</Text>
+						</Button>
+					)
+				})}
+			</Flex>
+		</FeatureFrame>
+	)
+}
+
+export function RandomPicker(input: KowalskiInput<'randomPicker'>) {
+	const props = kowalskiCatalog.randomPicker.props.parse(input)
+	const schema = kowalskiCatalog.randomPicker.storeSchema
+	const name = props.id ?? 'KowalskiRandomPicker'
+	const [poolExpanded, setPoolExpanded] = useState(false)
+	const store = useConfiguredFeature({
+		name,
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({}),
+	})
+	const domain: PickerDomain =
+		props.mode === 'list'
+			? { mode: props.mode, options: props.options }
+			: props.mode === 'range'
+				? { maximum: props.maximum, minimum: props.minimum, mode: props.mode }
+				: { mode: props.mode }
+	// A stable key for the effect below; the saved domain itself stays structured.
+	const domainKey = JSON.stringify(domain)
+	const numbers = format.formatters.getNumberFormat(format.locale)
+	const detail =
+		props.mode === 'range'
+			? `${numbers.format(props.minimum)} to ${numbers.format(props.maximum)}, inclusive`
+			: undefined
+	const { ready, set, value } = store
+	const result =
+		value.result && isEqual(value.result.domain, domain) ? value.result.value : null
+	const resultDisplay = typeof result === 'number' ? numbers.format(result) : result
+	const resultLabel =
+		props.mode === 'dice'
+			? 'You rolled'
+			: props.mode === 'coin'
+				? 'It landed on'
+				: 'Your pick'
+	const attemptedReset = useMemo<{ key?: string }>(() => ({}), [name, props.scope])
+	useEffect(() => {
+		const key = JSON.stringify([domainKey, props.revision, value.result])
+		if (
+			ready &&
+			attemptedReset.key !== key &&
+			props.revision >= value.configurationRevision &&
+			value.result &&
+			JSON.stringify(value.result.domain) !== domainKey
+		) {
+			attemptedReset.key = key
+			set({ result: null })
+		}
+	}, [
+		attemptedReset,
+		props.revision,
+		domainKey,
+		ready,
+		set,
+		value.configurationRevision,
+		value.result,
+	])
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="randomPicker"
+			title={props.title}
+			detail={detail}
+		>
+			{props.mode === 'list' && (
+				<Field label="Choices">
+					<FeatureFacts>
+						{props.options
+							.slice(0, poolExpanded ? props.options.length : 4)
+							.map((option, index) => (
+								<List.Item
+									key={index}
+									label={`${format.formatNumber(index + 1)}. ${option}`}
+									trailing={
+										result === option ? (
+											<Icon name="checkmark" {...stylex.props(appearance.accent)} />
+										) : undefined
+									}
+								/>
+							))}
+					</FeatureFacts>
+					{props.options.length > 4 && (
+						<Button
+							onClick={() => setPoolExpanded(current => !current)}
+							style={[button.quiet, randomPickerStyles.disclosure]}
+						>
+							<Text>
+								{poolExpanded
+									? 'Show fewer'
+									: `Show all ${format.formatNumber(props.options.length)} options`}
+							</Text>
+						</Button>
+					)}
+				</Field>
+			)}
+			<FeatureWell style={randomPickerStyles.stage}>
+				{!store.ready && !store.error ? (
+					<Text {...stylex.props(roles.muted)}>Loading last result…</Text>
+				) : props.mode === 'coin' || props.mode === 'dice' ? (
+					<>
+						<Text {...stylex.props(roles.h2)}>
+							{result === null
+								? props.mode === 'coin'
+									? 'Heads or tails?'
+									: 'Ready to roll'
+								: resultLabel}
+						</Text>
+						<Flex
+							{...stylex.props(
+								appearance.surface,
+								randomPickerStyles.face,
+								props.mode === 'coin' && randomPickerStyles.coin
+							)}
+						>
+							<Text
+								{...stylex.props(
+									roles.display,
+									randomPickerStyles.faceValue,
+									props.mode === 'coin' && result !== null && randomPickerStyles.coinValue
+								)}
+							>
+								{resultDisplay ?? '?'}
+							</Text>
+						</Flex>
+					</>
+				) : resultDisplay === null ? (
+					<Text {...stylex.props(roles.muted)}>No pick yet</Text>
+				) : (
+					<>
+						<Text {...stylex.props(roles.muted)}>{resultLabel}</Text>
+						<Text
+							{...stylex.props(
+								roles.display,
+								randomPickerStyles.result(resultDisplay.length),
+								props.mode === 'list' && randomPickerStyles.listResult
+							)}
+						>
+							{resultDisplay}
+						</Text>
+					</>
+				)}
+			</FeatureWell>
+			{store.saving && <Text {...stylex.props(roles.muted)}>Saving pick…</Text>}
+			<FeatureAction
+				component="randomPicker"
+				icon="shuffle"
+				size="lg"
+				variant="primary"
+				disabled={!store.ready}
+				onClick={() => {
+					store.set(() => ({
+						result: { domain, value: pickResult(domain, Math.random()) },
+					}))
+				}}
+			>
+				{props.mode === 'coin'
+					? result === null
+						? 'Flip coin'
+						: 'Flip again'
+					: props.mode === 'dice'
+						? result === null
+							? 'Roll die'
+							: 'Roll again'
+						: result === null
+							? 'Pick one'
+							: 'Pick again'}
+			</FeatureAction>
+		</FeatureFrame>
+	)
+}
+
+export function ColorPalette(input: KowalskiInput<'colorPalette'>) {
+	const props = kowalskiCatalog.colorPalette.props.parse(input)
+	const schema = kowalskiCatalog.colorPalette.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiColorPalette',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({ color: { value: props.color } }),
+	})
+	const color = store.value.color.value
+	const [hexDraft, setHexDraft] = useState<string | null>(null)
+	const [paletteBase, setPaletteBase] = useState(color.toLowerCase())
+	const editing = hexDraft !== null
+	const draftColor = `#${hexDraft ?? ''}`
+	const validDraft =
+		kowalskiCatalog.colorPalette.props.shape.color.safeParse(draftColor).success
+	const editDisabled = !store.ready || store.saving || (editing && !validDraft)
+	const shadesDisabled = !store.ready || editing
+	const shades = uniqBy(
+		[
+			{ label: 'Darker', mix: -0.6 },
+			{ label: 'Dark', mix: -0.3 },
+			{ label: 'Base', mix: 0 },
+			{ label: 'Light', mix: 0.3 },
+			{ label: 'Lighter', mix: 0.6 },
+		].map(shade => {
+			const value = mixColor(paletteBase, shade.mix)
+			return { color: value, label: value === paletteBase ? 'Base' : shade.label }
+		}),
+		'color'
+	)
+	useEffect(() => {
+		if (
+			!editing &&
+			!store.saving &&
+			![-0.6, -0.3, 0, 0.3, 0.6].some(
+				mix => mixColor(paletteBase, mix) === color.toLowerCase()
+			)
+		) {
+			setPaletteBase(color.toLowerCase())
+		}
+	}, [color, editing, paletteBase, store.saving])
+	const channels = [1, 3, 5].map(index =>
+		Number.parseInt(color.slice(index, index + 2), 16)
+	)
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="colorPalette"
+			title={props.title}
+		>
+			<Flex {...stylex.props(colorStyles.specimen)}>
+				<Flex {...stylex.props(appearance.surface, colorStyles.preview(color))} />
+				<Flex {...stylex.props(colorStyles.identity)}>
+					<Flex {...stylex.props(colorStyles.value)}>
+						<Text {...stylex.props(roles.h2)}>{color.toUpperCase()}</Text>
+						<Text {...stylex.props(roles.muted)}>
+							{`RGB (${channels.map(channel => format.formatNumber(channel)).join(', ')})`}
+						</Text>
+					</Flex>
+				</Flex>
+			</Flex>
+			<Field label="Shades & tints">
+				<Flex {...stylex.props(colorStyles.swatches(shades.length))}>
+					{shades.map(shade => {
+						const selected = shade.color === color.toLowerCase()
+						return (
+							<Button
+								key={shade.color}
+								selected={selected}
+								disabled={shadesDisabled}
+								onClick={() => {
+									if (!shadesDisabled) {
+										store.set(() => ({ color: { value: shade.color } }))
+									}
+								}}
+								style={[
+									button.secondary,
+									colorStyles.swatchButton,
+									shadesDisabled && button.disabled,
+								]}
+							>
+								<Flex {...stylex.props(colorStyles.swatchContent)}>
+									<Flex
+										{...stylex.props(appearance.surface, colorStyles.swatch(shade.color))}
+									>
+										{selected && (
+											<Flex {...stylex.props(colorStyles.selected)}>
+												<Icon name="checkmark" />
+											</Flex>
+										)}
+									</Flex>
+									<Text {...stylex.props(roles.label, colorStyles.centered)}>
+										{shade.label}
+									</Text>
+									<Text {...stylex.props(roles.muted, colorStyles.centered)}>
+										{shade.color.toUpperCase()}
+									</Text>
+								</Flex>
+							</Button>
+						)
+					})}
+				</Flex>
+				{(store.saving || (!store.ready && !store.error) || editing) && (
+					<Text {...stylex.props(roles.muted)}>
+						{store.saving
+							? 'Saving color…'
+							: editing
+								? 'Finish editing to choose a shade.'
+								: 'Loading saved color…'}
+					</Text>
+				)}
+			</Field>
+			{editing && (
+				<Field
+					error={!validDraft && 'Enter six digits using 0–9 and A–F.'}
+					label="Hex color"
+				>
+					<Flex {...stylex.props(colorStyles.inputRow)}>
+						<Text {...stylex.props(roles.h2, colorStyles.prefix)}>#</Text>
+						{store.ready && !store.saving ? (
+							<Input
+								placeholder="Hex color"
+								value={hexDraft}
+								onChange={value => setHexDraft(value.replace(/^#/, '').toUpperCase())}
+								style={[colorStyles.input]}
+							/>
+						) : (
+							<Text {...stylex.props(roles.text, colorStyles.input)}>{hexDraft}</Text>
+						)}
+					</Flex>
+				</Field>
+			)}
+			<Flex {...stylex.props(layout.actions)}>
+				{editing && (
+					<FeatureAction
+						component="colorPalette"
+						disabled={store.saving}
+						onClick={() => setHexDraft(null)}
+					>
+						Cancel
+					</FeatureAction>
+				)}
+				<FeatureAction
+					component="colorPalette"
+					disabled={editDisabled}
+					variant={editing ? 'primary' : 'secondary'}
+					onClick={() => {
+						if (editDisabled) {
+							return
+						}
+						if (!editing) {
+							setHexDraft(color.slice(1).toUpperCase())
+						} else if (draftColor.toLowerCase() === color.toLowerCase()) {
+							setHexDraft(null)
+						} else {
+							store.set(
+								() => ({ color: { value: draftColor } }),
+								() => {
+									setPaletteBase(draftColor.toLowerCase())
+									setHexDraft(null)
+								}
+							)
+						}
+					}}
+				>
+					{store.saving && editing ? 'Saving…' : editing ? 'Done' : 'Edit hex'}
+				</FeatureAction>
+			</Flex>
+		</FeatureFrame>
+	)
+}
+
+const randomPickerStyles = stylex.create({
+	coin: { borderRadius: radius['full'] },
+	coinValue: { fontSize: text['3xl'], lineHeight: text['3xlLeading'] },
+	disclosure: { alignSelf: 'flex-start', paddingLeft: 0, paddingRight: 0 },
+	face: {
+		alignItems: 'center',
+		borderRadius: radius['3xl'],
+		height: space[24],
+		justifyContent: 'center',
+		width: space[24],
+	},
+	faceValue: { textAlign: 'center' },
+	listResult: { fontSize: text['3xl'], lineHeight: text['3xlLeading'] },
+	result: (length: number) => ({
+		fontSize: length > 14 ? text['2xl'] : length > 8 ? text['4xl'] : font.displaySize,
+		lineHeight:
+			length > 14
+				? text['2xlLeading']
+				: length > 8
+					? text['4xlLeading']
+					: font.displayLeading,
+		textAlign: 'center',
+	}),
+	stage: { alignItems: 'center', gap: space[4], justifyContent: 'center' },
+})
+
+// Long totals step down the display scale so they never overflow the well.
+const billStyles = stylex.create({
+	amount: (length: number) => ({
+		fontSize: length > 16 ? text.lg : length > 9 ? text['4xl'] : font.displaySize,
+		lineHeight:
+			length > 16
+				? text.lgLeading
+				: length > 9
+					? text['4xlLeading']
+					: font.displayLeading,
+	}),
+	centered: { textAlign: 'center' },
+	row: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[2],
+		justifyContent: 'space-between',
+	},
+})
+
+const colorStyles = stylex.create({
+	centered: { textAlign: 'center' },
+	identity: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[3],
+		justifyContent: 'space-between',
+	},
+	input: { flexGrow: 1, minWidth: 0 },
+	inputRow: { alignItems: 'center', flexDirection: 'row', gap: space[2] },
+	prefix: { flexShrink: 0 },
+	preview: (color: string) => ({
+		backgroundColor: color,
+		borderRadius: radius['xl'],
+		height: space[24],
+	}),
+	selected: {
+		alignItems: 'center',
+		backgroundColor: colors.accent,
+		borderRadius: radius['xl'],
+		color: colors.onAccent,
+		height: size[6],
+		justifyContent: 'center',
+		width: size[6],
+	},
+	specimen: { gap: space[4] },
+	swatch: (color: string) => ({
+		alignItems: 'center',
+		backgroundColor: color,
+		borderRadius: radius['lg'],
+		height: size[16],
+		justifyContent: 'center',
+	}),
+	swatchButton: {
+		alignItems: 'stretch',
+		minWidth: 0,
+		paddingBottom: space[2],
+		paddingLeft: space[1],
+		paddingRight: space[1],
+		paddingTop: space[1],
+	},
+	swatchContent: { alignItems: 'stretch', gap: space[1.5] },
+	swatches: (count: number) => ({
+		display: 'grid',
+		gap: space[2],
+		gridTemplateColumns: `repeat(${Math.min(count, 3)}, minmax(0, 1fr))`,
+	}),
+	value: { gap: space[1], minWidth: 0 },
+})
+
+// Keys sit directly in the tray at p-4, so their control radius stays concentric with it.
+const calculatorStyles = stylex.create({
+	equation: { textAlign: 'right' },
+	error: { textAlign: 'right' },
+	key: {
+		alignItems: 'center',
+		justifyContent: 'center',
+		minHeight: size[12],
+		minWidth: 0,
+		paddingLeft: 0,
+		paddingRight: 0,
+		textAlign: 'center',
+	},
+	keypad: {
+		display: 'grid',
+		gap: space[2],
+		gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+	},
+	operation: { [buttonVars.background]: colors.tray },
+	operator: { [buttonVars.text]: colors.accentInk },
+	utility: { [buttonVars.text]: colors.muted },
+	value: (length: number) => ({
+		fontSize: length > 16 ? text.lg : length > 9 ? text['4xl'] : font.displaySize,
+		lineHeight:
+			length > 16
+				? text.lgLeading
+				: length > 9
+					? text['4xlLeading']
+					: font.displayLeading,
+		textAlign: 'right',
+	}),
+})
+
+const unitStyles = stylex.create({
+	result: { minWidth: 0 },
+})
+
+// Long amounts step down the display scale so they never overflow the well.
+const expenseStyles = stylex.create({
+	amount: (length: number) => ({
+		fontSize: length > 16 ? text.lg : length > 9 ? text['2xl'] : text['4xl'],
+		lineHeight:
+			length > 16 ? text.lgLeading : length > 9 ? text['2xlLeading'] : text['4xlLeading'],
+		width: '100%',
+	}),
+})
+
+function mixColor(hex: string, amount: number) {
+	const target = amount < 0 ? 0 : 255
+	return `#${[1, 3, 5]
+		.map(index =>
+			Math.round(
+				Number.parseInt(hex.slice(index, index + 2), 16) * (1 - Math.abs(amount)) +
+					target * Math.abs(amount)
+			)
+				.toString(16)
+				.padStart(2, '0')
+		)
+		.join('')}`
+}