@flickfyi/flkr 0.0.182 → 0.0.185

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

@@ -1,1213 +0,0 @@
-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('')}`
-}