@flickfyi/flkr 0.0.182 → 0.0.185

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

@@ -7,23 +7,26 @@ import {
 	List,
 	Stepper,
 } from '@flickfyi/core/molecules'
+import { Recipe as RecipeEntity } from '@flickfyi/schemas/recipe'
 import * as stylex from '@stylexjs/stylex'
 import { formatQuantity } from 'format-quantity'
 import { Duration } from 'luxon'
 import { useState } from 'react'
+import { z } from 'zod/v4'
 
+import { useClock } from '~/hooks/use-clock'
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
 import { space } from '~/themes/scale.stylex'
 import { appearance, button, roles } from '~/themes/shared'
 
-import { kowalskiCatalog, type KowalskiInput, type KowalskiProps } from './catalog'
+import { entries, featureFields } from './feature-schema'
 import { format } from './format'
 import { FeatureAction, FeatureFacts, FeatureFrame, FeatureWell, layout } from './frame'
-import { useClock } from './use-clock'
-import { useConfiguredFeature } from './use-configured-feature'
 
-type RecipeProps = KowalskiProps<'recipe'>
-type Ingredient = RecipeProps['ingredients'][number]
-type Step = RecipeProps['steps'][number]
+type RecipeContent = z.output<typeof RecipeData>
+type Ingredient = RecipeContent['ingredients'][number]
+type Step = RecipeContent['steps'][number]
 
 /**
  * Cooks an RGF recipe in two modes. The overview is for reading: ingredients, servings, and
@@ -31,39 +34,77 @@ type Step = RecipeProps['steps'][number]
  * the bottom, or the next timer to go off when nothing is ready; above it, in falling order of
  * attention, the other running timers, the next few steps (greyed until ready), and what's done.
  */
-export function Recipe(input: KowalskiInput<'recipe'>) {
-	const props = kowalskiCatalog.recipe.props.parse(input)
-	const schema = kowalskiCatalog.recipe.storeSchema
-	const baseServings = props.servings ?? null
+/** Recipe Graph Format: ingredients, step outputs, and explicit dependency edges. */
+
+const defaultId = 'KowalskiRecipe'
+const defaultScope = 'private'
+
+export const RecipeData = RecipeEntity
+export type RecipeData = RecipeEntity
+
+export const RecipeProps = z.strictObject({
+	data: RecipeData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+export type RecipeProps = z.input<typeof RecipeProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const recipeStoreSchema = entries(
+	'step_',
+	z.strictObject({ done: z.boolean(), endsAt: z.number().nullable() }),
+	{
+		cooking: z.boolean().default(false),
+		servings: z.number().default(1),
+	}
+)
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: recipeStoreSchema,
+})
+
+export function Recipe({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: RecipeProps) {
+	const schema = recipeStoreSchema
+	const baseServings = data.servings ?? null
 	const store = useConfiguredFeature({
-		name: props.id ?? 'KowalskiRecipe',
-		revision: props.revision,
+		name: id ?? defaultId,
+		revision,
 		schema,
-		scope: props.scope,
+		scope,
 		seed: schema.parse({ servings: baseServings ?? 1 }),
 	})
 	const [prepOpen, setPrepOpen] = useState(false)
 	const [showEarlier, setShowEarlier] = useState(false)
 	const [showLater, setShowLater] = useState(false)
-	const graph = recipeGraph(props.steps)
+	const graph = recipeGraph(data.steps)
 	const checked = (id: string) => store.value[`step_${id}`]?.done
 	const endsAt = (id: string) => store.value[`step_${id}`]?.endsAt ?? null
 	// The clock runs while any unfinished step has a timer, including one whose time is up.
 	// Timer ends are the key, so starting or extending one refreshes the clock before paint.
 	const now = useClock(
-		props.steps.some(step => endsAt(step.id) !== null && !checked(step.id)),
-		props.steps.map(step => endsAt(step.id) ?? '').join(',')
+		data.steps.some(step => endsAt(step.id) !== null && !checked(step.id)),
+		data.steps.map(step => endsAt(step.id) ?? '').join(',')
 	)
 	const factor = baseServings === null ? 1 : store.value.servings / baseServings
 	const waitingOn = (step: Step) =>
 		(graph.prerequisites.get(step.id) ?? []).filter(id => !checked(id))
-	const done = props.steps.filter(step => checked(step.id))
+	const done = data.steps.filter(step => checked(step.id))
 	const history = showEarlier ? done : done.slice(-1)
-	const active = props.steps
+	const active = data.steps
 		.filter(step => !checked(step.id) && endsAt(step.id) !== null)
 		.toSorted((a, b) => (endsAt(a.id) ?? 0) - (endsAt(b.id) ?? 0))
 	// Ready steps first, longest remaining chain first so long waits start early; then waiting steps in order.
-	const queue = props.steps
+	const queue = data.steps
 		.filter(step => !checked(step.id) && endsAt(step.id) === null)
 		.toSorted(
 			(a, b) =>
@@ -71,7 +112,7 @@ export function Recipe(input: KowalskiInput<'recipe'>) {
 				(waitingOn(a).length > 0
 					? 0
 					: (graph.chain.get(b.id) ?? 0) - (graph.chain.get(a.id) ?? 0)) ||
-				props.steps.indexOf(a) - props.steps.indexOf(b)
+				data.steps.indexOf(a) - data.steps.indexOf(b)
 		)
 	const [first, ...rest] = queue
 	const current = first && waitingOn(first).length === 0 ? first : undefined
@@ -93,11 +134,11 @@ export function Recipe(input: KowalskiInput<'recipe'>) {
 		step.doneness ? `Time’s up. Done when ${step.doneness}.` : 'Time’s up'
 	// What a step takes: an ingredient with its scaled amount, or an earlier output by name.
 	const uses = (step: Step) =>
-		step.uses.map(({ id, portion, source }) => {
+		(step.uses ?? []).map(({ id, portion, source }) => {
 			if (source.kind === 'output') {
 				return { id, label: graph.outputs.get(source.outputId) ?? '', value: portion }
 			}
-			const ingredient = props.ingredients.find(item => item.id === source.ingredientId)
+			const ingredient = data.ingredients.find(item => item.id === source.ingredientId)
 			return {
 				id,
 				label: ingredient?.label ?? '',
@@ -108,7 +149,7 @@ export function Recipe(input: KowalskiInput<'recipe'>) {
 		<>
 			<Field label="Ingredients">
 				<FeatureFacts>
-					{props.ingredients.map(ingredient => (
+					{data.ingredients.map(ingredient => (
 						<List.Item
 							description={ingredient.notes?.join(' · ')}
 							key={ingredient.id}
@@ -123,14 +164,12 @@ export function Recipe(input: KowalskiInput<'recipe'>) {
 					<Stepper
 						decrementDisabled={!store.ready || store.value.servings <= 1}
 						decrementLabel="Fewer servings"
-						incrementDisabled={!store.ready || store.value.servings >= 100}
+						incrementDisabled={!store.ready}
 						incrementLabel="More servings"
 						onDecrement={() =>
 							store.set(current => ({ servings: Math.max(1, current.servings - 1) }))
 						}
-						onIncrement={() =>
-							store.set(current => ({ servings: Math.min(100, current.servings + 1) }))
-						}
+						onIncrement={() => store.set(current => ({ servings: current.servings + 1 }))}
 					>
 						<Text {...stylex.props(roles.h2, layout.stepperInput)}>
 							{format.formatNumber(store.value.servings)}
@@ -207,11 +246,12 @@ export function Recipe(input: KowalskiInput<'recipe'>) {
 	if (!store.value.cooking) {
 		return (
 			<FeatureFrame
+				style={style}
 				onRetry={store.retry}
 				notice={store.error}
 				component="recipe"
-				title={props.title}
-				detail={timeSummary(props.steps, graph)}
+				title={data.title}
+				detail={timeSummary(data.steps, graph)}
 			>
 				{prep}
 				<FeatureAction
@@ -229,13 +269,14 @@ export function Recipe(input: KowalskiInput<'recipe'>) {
 	}
 	return (
 		<FeatureFrame
+			style={style}
 			onRetry={store.retry}
 			notice={store.error}
 			component="recipe"
-			title={props.title}
+			title={data.title}
 			trailing={
 				<Text {...stylex.props(roles.muted)}>
-					{`${format.formatNumber(done.length)} of ${format.formatNumber(props.steps.length)} done`}
+					{`${format.formatNumber(done.length)} of ${format.formatNumber(data.steps.length)} done`}
 				</Text>
 			}
 		>
@@ -248,7 +289,7 @@ export function Recipe(input: KowalskiInput<'recipe'>) {
 				<Disclosure
 					label={[
 						baseServings === null
-							? props.yield
+							? data.yield
 							: format.formatMessage(
 									{
 										defaultMessage: '{count, plural, one {# serving} other {# servings}}',
@@ -262,7 +303,7 @@ export function Recipe(input: KowalskiInput<'recipe'>) {
 									'{count, plural, one {# ingredient} other {# ingredients}}',
 								id: 'kowalski.recipe.ingredients',
 							},
-							{ count: props.ingredients.length }
+							{ count: data.ingredients.length }
 						),
 					]
 						.filter(Boolean)
@@ -323,7 +364,7 @@ export function Recipe(input: KowalskiInput<'recipe'>) {
 				{current ? (
 					<>
 						<Text {...stylex.props(roles.h2)}>{current.instruction}</Text>
-						{current.uses.length > 0 && (
+						{(current.uses ?? []).length > 0 && (
 							<List>
 								{uses(current).map(use => (
 									<List.Item key={use.id} label={use.label} trailing={use.value} />
@@ -403,7 +444,7 @@ export function Recipe(input: KowalskiInput<'recipe'>) {
 								store.set(() => ({
 									cooking: false,
 									...Object.fromEntries(
-										props.steps.map(step => [
+										data.steps.map(step => [
 											`step_${step.id}`,
 											{ done: false, endsAt: null },
 										])
@@ -439,7 +480,7 @@ function Disclosure({
 	)
 }
 
-const recipeStyles = stylex.create({
+const recipeStyles = /* @__PURE__ */ stylex.create({
 	disclosure: { alignSelf: 'flex-start', paddingLeft: 0, paddingRight: 0 },
 	row: { alignItems: 'center', columnGap: space[3], flexDirection: 'row' },
 	trailing: { flexShrink: 0 },
@@ -489,7 +530,7 @@ function recipeGraph(steps: Step[]) {
 			[
 				...new Set([
 					...(step.after ?? []),
-					...step.uses.flatMap(use =>
+					...(step.uses ?? []).flatMap(use =>
 						use.source.kind === 'output' ? [producers.get(use.source.outputId) ?? ''] : []
 					),
 				]),

package/node_modules/@flickfyi/core/src/kowalski/schemas.ts

@@ -0,0 +1,67 @@
+// Generated from component createSchemas exports. Do not edit.
+import type { CreateSchemas, CreateSchemasInput } from './create-schemas'
+import { createSchemas as generator0 } from "./components/bill-split"
+import { createSchemas as generator1 } from "./components/bookmark"
+import { createSchemas as generator2 } from "./components/budget"
+import { createSchemas as generator3 } from "./components/calculator"
+import { createSchemas as generator4 } from "./components/checklist"
+import { createSchemas as generator5 } from "./components/color-palette"
+import { createSchemas as generator6 } from "./components/contact"
+import { createSchemas as generator7 } from "./components/countdown"
+import { createSchemas as generator8 } from "./components/event"
+import { createSchemas as generator9 } from "./components/expense"
+import { createSchemas as generator10 } from "./components/goal"
+import { createSchemas as generator11 } from "./components/habit"
+import { createSchemas as generator12 } from "./components/ledger"
+import { createSchemas as generator13 } from "./components/note"
+import { createSchemas as generator14 } from "./components/poll"
+import { createSchemas as generator15 } from "./components/random-picker"
+import { createSchemas as generator16 } from "./components/rating"
+import { createSchemas as generator17 } from "./components/reminder"
+import { createSchemas as generator18 } from "./components/rotation"
+import { createSchemas as generator19 } from "./components/scoreboard"
+import { createSchemas as generator20 } from "./components/shopping-list"
+import { createSchemas as generator21 } from "./components/task-board"
+import { createSchemas as generator22 } from "./components/time-zone"
+import { createSchemas as generator23 } from "./components/timer"
+import { createSchemas as generator24 } from "./components/trip"
+import { createSchemas as generator25 } from "./components/unit-converter"
+import { createSchemas as generator26 } from "./lesson"
+import { createSchemas as generator27 } from "./recipe"
+import { createSchemas as generator28 } from "./time-since"
+
+const generators = new Map<string, CreateSchemas>([["BillSplit", generator0],
+["Bookmark", generator1],
+["Budget", generator2],
+["Calculator", generator3],
+["Checklist", generator4],
+["ColorPalette", generator5],
+["Contact", generator6],
+["Countdown", generator7],
+["Event", generator8],
+["Expense", generator9],
+["Goal", generator10],
+["Habit", generator11],
+["Ledger", generator12],
+["Note", generator13],
+["Poll", generator14],
+["RandomPicker", generator15],
+["Rating", generator16],
+["Reminder", generator17],
+["Rotation", generator18],
+["Scoreboard", generator19],
+["ShoppingList", generator20],
+["TaskBoard", generator21],
+["TimeZone", generator22],
+["Timer", generator23],
+["Trip", generator24],
+["UnitConverter", generator25],
+["Lesson", generator26],
+["Recipe", generator27],
+["TimeSince", generator28]])
+export const schemaComponents = [...generators.keys()]
+export { kowalskiFeatureId, kowalskiScope } from './feature-schema'
+
+export function componentSchemas(name: string, input?: CreateSchemasInput) {
+	return generators.get(name)?.(input) ?? {}
+}

package/node_modules/@flickfyi/core/src/kowalski/stories/composition.tsx

@@ -21,30 +21,27 @@ export function TrainingComposition({ theme = athletic }: { theme?: CompositionT
 				<Flex {...stylex.props(styles.feature)}>
 					<Goal
 						id="TrackDayLaps"
-						progress={3}
-						target={8}
-						title="Your laps"
-						unit="laps"
+						data={{ progress: 3, target: 8, title: 'Your laps', unit: 'laps' }}
 					/>
 				</Flex>
 				<Flex {...stylex.props(styles.feature)}>
 					<Timer
-						durationSeconds={90}
 						id="TrackDayRecovery"
-						mode="break"
-						title="Catch your breath"
+						data={{ durationSeconds: 90, mode: 'break', title: 'Catch your breath' }}
 					/>
 				</Flex>
 			</Flex>
 			<Flex {...stylex.props(styles.preparation)}>
 				<Checklist
 					id="TrackDayPreparation"
-					items={[
-						{ id: 'water', label: 'Fill your water bottle' },
-						{ id: 'warmup', label: 'Walk a lap and loosen up' },
-						{ id: 'laces', label: 'Check your laces' },
-					]}
-					title="Before the first lap"
+					data={{
+						items: [
+							{ id: 'water', label: 'Fill your water bottle' },
+							{ id: 'warmup', label: 'Walk a lap and loosen up' },
+							{ id: 'laces', label: 'Check your laces' },
+						],
+						title: 'Before the first lap',
+					}}
 				/>
 			</Flex>
 		</Flex>
@@ -62,15 +59,20 @@ export function FamilyRoutineComposition({ theme = kids }: { theme?: Composition
 			</Flex>
 			<Checklist
 				id="FamilyRoutineEvening"
-				items={[
-					{ id: 'toys', label: 'Give every toy a home' },
-					{ id: 'bag', label: 'Pack tomorrow’s bag' },
-					{ id: 'teeth', label: 'Brush those teeth' },
-				]}
-				title="Three small things"
+				data={{
+					items: [
+						{ id: 'toys', label: 'Give every toy a home' },
+						{ id: 'bag', label: 'Pack tomorrow’s bag' },
+						{ id: 'teeth', label: 'Brush those teeth' },
+					],
+					title: 'Three small things',
+				}}
 			/>
 			<Flex {...stylex.props(styles.preparation)}>
-				<Timer durationSeconds={600} id="FamilyRoutineStory" title="Time for a story" />
+				<Timer
+					id="FamilyRoutineStory"
+					data={{ durationSeconds: 600, title: 'Time for a story' }}
+				/>
 			</Flex>
 		</Flex>
 	)

package/node_modules/@flickfyi/core/src/kowalski/time-since.tsx

@@ -0,0 +1,145 @@
+import { Flex, Text } from '@flickfyi/core'
+import * as stylex from '@stylexjs/stylex'
+import { DateTime } from 'luxon'
+import { z } from 'zod/v4'
+
+import { useClock } from '~/hooks/use-clock'
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { space, text } from '~/themes/scale.stylex'
+import { appearance, roles } from '~/themes/shared'
+
+import { featureFields, store } from './feature-schema'
+import { format } from './format'
+import { FeatureAction, FeatureFrame, FeatureWell, layout } from './frame'
+
+const defaultId = 'KowalskiTimeSince'
+const defaultScope = 'public'
+
+export const TimeSinceData = /* @__PURE__ */ z
+	.strictObject({
+		action: z
+			.string()
+			.describe(
+				'The big button that updates it, as a short command for doing it now, e.g. "Give pill" or "Water plants".'
+			),
+		label: z
+			.string()
+			.describe(
+				'A small line above the title naming the kind of tracker, e.g. "Pill timer". Pass an empty string to hide it.'
+			),
+		subject: z
+			.string()
+			.describe(
+				'What gets done, as a short noun, e.g. "pill" or "watering". With "pill", the timestamp reads "Last pill today at 5:04 PM".'
+			),
+		title: z
+			.string()
+			.describe(
+				'Who or what is being tracked, shown as the heading, e.g. "Winnie" or "Fern".'
+			),
+	})
+	.describe(
+		'Four short UI strings for an existing TimeSince React component: a heading, tracker label, event noun, and button command. The component already implements the elapsed clock, reset button, and saved state. Supply concise copy for each field, not explanations, implementation instructions, timestamps, or claims about the timer’s current state.'
+	)
+export type TimeSinceData = z.input<typeof TimeSinceData>
+
+export const TimeSinceProps = z.strictObject({
+	data: TimeSinceData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+export type TimeSinceProps = z.input<typeof TimeSinceProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const timeSinceStoreSchema = store({ lastAt: z.number().nullable().default(null) })
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: timeSinceStoreSchema,
+})
+
+export function TimeSince({
+	data,
+	id = defaultId,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: TimeSinceProps) {
+	const schema = timeSinceStoreSchema
+	const store = useConfiguredFeature({
+		name: id,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	const lastAt = store.value.lastAt
+	const now = useClock(lastAt !== null, String(lastAt))
+	const loading = !store.ready && !store.error
+	const since = loading
+		? '—'
+		: lastAt === null
+			? 'Not yet'
+			: DateTime.fromMillis(lastAt).toRelative({
+					base: DateTime.fromMillis(now),
+					locale: format.locale,
+				})
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="timeSince"
+			header={
+				<Flex {...stylex.props(layout.header)}>
+					{data.label && (
+						<Text {...stylex.props(roles.caption, appearance.accent)}>{data.label}</Text>
+					)}
+					<Text {...stylex.props(roles.h1)}>{data.title}</Text>
+				</Flex>
+			}
+			style={style}
+			title={data.title}
+		>
+			<FeatureWell style={timeSinceStyles.well}>
+				<Flex {...stylex.props(timeSinceStyles.reading)}>
+					<Text
+						animated={lastAt === null ? undefined : 'numeric'}
+						{...stylex.props(roles.display, timeSinceStyles.since)}
+					>
+						{since}
+					</Text>
+					{lastAt !== null && (
+						<Text {...stylex.props(roles.caption)}>
+							{`Last ${data.subject} ${DateTime.fromMillis(lastAt).toRelativeCalendar({
+								base: DateTime.fromMillis(now),
+								locale: format.locale,
+								unit: 'days',
+							})} at ${format.formatTime(lastAt, { hour: 'numeric', minute: '2-digit' })}`}
+						</Text>
+					)}
+				</Flex>
+				<FeatureAction
+					component="timeSince"
+					disabled={!store.ready}
+					onClick={() => store.set(() => ({ lastAt: Date.now() }))}
+					size="lg"
+					variant="primary"
+				>
+					{data.action}
+				</FeatureAction>
+			</FeatureWell>
+			{store.saving && <Text {...stylex.props(roles.muted)}>Saving…</Text>}
+		</FeatureFrame>
+	)
+}
+
+const timeSinceStyles = /* @__PURE__ */ stylex.create({
+	reading: { alignItems: 'flex-start', gap: space[3] },
+	// 60px keeps "59 seconds" on one line of a 393pt-wide phone card; "ago" wraps below.
+	since: { fontSize: text['6xl'], lineHeight: text['6xlLeading'] },
+	well: { alignItems: 'stretch', gap: space[4] },
+})

package/node_modules/@flickfyi/core/src/molecules/progress/progress.tsx

@@ -24,7 +24,10 @@ export function Progress({
 	const fill = stylex.props(styles.progressFill, fillStyle)
 	return (
 		<Flex {...stylex.props(styles.progressTrack, style)}>
-			<Flex {...fill} style={{ ...fill.style, width: spring.width.to(value => `${value}%`) }} />
+			<Flex
+				{...fill}
+				style={{ ...fill.style, width: spring.width.to(value => `${value}%`) }}
+			/>
 		</Flex>
 	)
 }

package/node_modules/@flickfyi/core/src/oklch.ts

@@ -64,12 +64,7 @@ export function parseOklch(css: string): string {
 		return css
 	}
 	const l = Number(m[1]) / (m[2] === '%' ? 100 : 1)
-	return oklchToRgba(
-		l,
-		Number(m[3]),
-		Number(m[4]),
-		m[5] === undefined ? 1 : Number(m[5])
-	)
+	return oklchToRgba(l, Number(m[3]), Number(m[4]), m[5] === undefined ? 1 : Number(m[5]))
 }
 
 /**

package/node_modules/@flickfyi/core/src/parrott/theme.ts

@@ -22,7 +22,9 @@ type Foreground = NonNullable<NonNullable<Core.TextProps['style']>['color']>
 
 /** Opaque styles accepted by the public StyleX composition API. */
 export type ParrotStyle = stylex.StyleXArray<
-	stylex.StyleXStyles | stylex.StyleXStyles<{ color: Foreground }> | ReturnType<typeof stylex.createTheme>
+	| stylex.StyleXStyles
+	| stylex.StyleXStyles<{ color: Foreground }>
+	| ReturnType<typeof stylex.createTheme>
 >
 
 export type ParrotTheme = {

package/node_modules/@flickfyi/core/src/themes/editorial/editorial.ts

@@ -7,7 +7,12 @@ export const spec = {
 	display: { family: '"Instrument Serif"', step: '6xl', weight: '400' },
 	emphasis: { italic: true, weight: '400' },
 	fonts: { body: 'Newsreader', ui: '"Libre Franklin"', uiWeight: '600' },
-	heading: { family: '"Instrument Serif"', step: '5xl', tracking: 'tight', weight: '400' },
+	heading: {
+		family: '"Instrument Serif"',
+		step: '5xl',
+		tracking: 'tight',
+		weight: '400',
+	},
 	label: { uppercase: true },
 	radius: 0,
 	stroke: 1,

package/node_modules/@flickfyi/core/src/themes/palette.ts

@@ -186,7 +186,7 @@ const palettes: Record<
 		},
 	}),
 	// Newsprint: the paper drifts warm whatever the hue, which becomes a spot ink.
-	editorial: hue => {
+	editorial(hue) {
 		const paper = toward(hue, 85, 0.8)
 		return {
 			dark: {
@@ -218,7 +218,7 @@ const palettes: Record<
 		}
 	},
 	// A legal pad: cream paper, ballpoint ink and ruled lines in the hue.
-	handwritten: hue => {
+	handwritten(hue) {
 		const paper = toward(hue, 95, 0.85)
 		return {
 			dark: {
@@ -249,7 +249,7 @@ const palettes: Record<
 		}
 	},
 	// Candy pairs: the tray takes the hue's far side, the actions take the hue.
-	kids: hue => {
+	kids(hue) {
 		const pop = turn(hue, 150)
 		return {
 			dark: {
@@ -288,7 +288,7 @@ const palettes: Record<
 		}
 	},
 	// Sherbet: the tray warms 40° past the hue and the page cools 25° below it.
-	rounded: hue => {
+	rounded(hue) {
 		const cool = turn(hue, -25)
 		const warm = turn(hue, 40)
 		return {
@@ -323,7 +323,7 @@ const palettes: Record<
 		}
 	},
 	// A bench instrument: cool steel housing, and the hue lights the display.
-	technical: hue => {
+	technical(hue) {
 		const steel = toward(hue, 250, 0.7)
 		return {
 			dark: {

package/node_modules/@flickfyi/core/src/themes/stories/composition.tsx

@@ -1,16 +1,14 @@
 import { Flex, Text } from '@flickfyi/core'
 import { Button, Container } from '@flickfyi/core/atoms'
-import {
-	Card,
-	Choice,
-	completedTaskStyle,
-	List,
-	Stat,
-} from '@flickfyi/core/molecules'
+import { Card, Choice, completedTaskStyle, List, Stat } from '@flickfyi/core/molecules'
 import * as stylex from '@stylexjs/stylex'
 import { useState } from 'react'
 
-import { previewTheme, type ThemeGlobals, themeSelection } from '~/storybook/theme-fixtures'
+import {
+	previewTheme,
+	type ThemeGlobals,
+	themeSelection,
+} from '~/storybook/theme-fixtures'
 import { space } from '~/themes/scale.stylex'
 import { colors, shape } from '~/themes/tokens.stylex'
 
@@ -261,7 +259,11 @@ export function ThemeComposition({ globals }: { globals: Partial<ThemeGlobals> }
 										checked ? [...items, item] : items.filter(value => value !== item)
 									)
 								}
-								style={[theme.surface, styles.tile, selected.includes(item) && theme.selected]}
+								style={[
+									theme.surface,
+									styles.tile,
+									selected.includes(item) && theme.selected,
+								]}
 							>
 								{item}
 							</Choice>