@flickfyi/flkr 0.0.182 → 0.0.185

package/node_modules/@flickfyi/core/src/kowalski/components/shopping-list.tsx

@@ -0,0 +1,144 @@
+import { Text } from '@flickfyi/core'
+import { Choice, completedTaskStyle, List, Stat } from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import { formatCurrency } from '~/kowalski/calculations'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { entries, featureFields } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import { FeatureAction, FeatureFrame, FeatureWell } from '~/kowalski/frame'
+import { roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiShoppingList'
+const defaultScope = 'private'
+
+export const ShoppingListData = /* @__PURE__ */ z
+	.strictObject({
+		currency: z
+			.string()
+			.optional()
+			.describe('A three-letter ISO currency code, e.g. "USD" or "EUR". Omit for "USD".'),
+		items: z
+			.array(
+				z.strictObject({
+					id: z.string().describe('A short ID, unique within this list, e.g. "tent".'),
+					label: z.string().describe('One item to buy, e.g. "Oat milk".'),
+					price: z.number().optional().describe('Price per unit. Omit if unknown.'),
+					quantity: z.number().optional().describe('How many to buy. Omit for 1.'),
+				})
+			)
+			.describe('The items to buy.'),
+		title: z.string().optional().describe('A short heading. Omit for "Shopping list".'),
+	})
+	.describe(
+		'Check items off a shopping list with optional prices and a running cart total. No ordering.'
+	)
+
+export type ShoppingListData = z.infer<typeof ShoppingListData>
+
+export const ShoppingListProps = z.strictObject({
+	data: ShoppingListData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type ShoppingListProps = z.input<typeof ShoppingListProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const shoppingListStoreSchema = entries('got_', z.boolean(), {})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: shoppingListStoreSchema,
+})
+
+export function ShoppingList({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: ShoppingListProps) {
+	const items = data.items.map(item => ({ ...item, quantity: item.quantity ?? 1 }))
+	const schema = shoppingListStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	const money = (value: number) => formatCurrency(value, data.currency)
+	const got = (id: string) => Boolean(store.value[`got_${id}`])
+	const priced = items.filter(item => item.price !== undefined)
+	const cost = (item: (typeof items)[number]) => (item.price ?? 0) * item.quantity
+	const total = priced.reduce((sum, item) => sum + cost(item), 0)
+	const cart = priced
+		.filter(item => got(item.id))
+		.reduce((sum, item) => sum + cost(item), 0)
+	const count = items.filter(item => got(item.id)).length
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="shoppingList"
+			title={data.title ?? 'Shopping list'}
+			trailing={
+				<Text {...stylex.props(roles.muted)}>
+					{`${format.formatNumber(count)} of ${format.formatNumber(items.length)}`}
+				</Text>
+			}
+		>
+			{priced.length > 0 && (
+				<FeatureWell>
+					<Stat>
+						<Stat.Value>{money(cart)}</Stat.Value>
+						<Stat.Caption>{`In the cart of ${money(total)}`}</Stat.Caption>
+					</Stat>
+				</FeatureWell>
+			)}
+			<List style={completedTaskStyle}>
+				{items.map(item => (
+					<Choice
+						checked={got(item.id)}
+						description={
+							item.price === undefined
+								? item.quantity > 1
+									? `× ${format.formatNumber(item.quantity)}`
+									: undefined
+								: item.quantity > 1
+									? `${format.formatNumber(item.quantity)} × ${money(item.price)}`
+									: money(item.price)
+						}
+						disabled={!store.ready}
+						key={item.id}
+						onCheckedChange={checked =>
+							store.set(() => ({ [`got_${item.id}`]: checked }))
+						}
+					>
+						{item.label}
+					</Choice>
+				))}
+			</List>
+			{count > 0 && (
+				<FeatureAction
+					component="shoppingList"
+					disabled={!store.ready}
+					onClick={() =>
+						store.set(() =>
+							Object.fromEntries(items.map(item => [`got_${item.id}`, false]))
+						)
+					}
+				>
+					Start a new trip
+				</FeatureAction>
+			)}
+		</FeatureFrame>
+	)
+}

package/node_modules/@flickfyi/core/src/kowalski/components/task-board.tsx

@@ -0,0 +1,146 @@
+import { Text } from '@flickfyi/core'
+import { Button } from '@flickfyi/core/atoms'
+import { List, Segmented } from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { useState } from 'react'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { everydayStyles } from '~/kowalski/everyday'
+import { entries, featureFields } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import { FeatureFacts, FeatureFrame, FeatureWell, layout } from '~/kowalski/frame'
+import { button, roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiTaskBoard'
+const defaultScope = 'private'
+
+export const TaskBoardData = /* @__PURE__ */ z
+	.strictObject({
+		tasks: z
+			.array(
+				z.strictObject({
+					id: z.string().describe('A short ID, unique within this list, e.g. "tent".'),
+					label: z.string().describe('One short task.'),
+				})
+			)
+			.describe('The tasks, all starting in To do.'),
+		title: z.string().optional().describe('A short heading. Omit for "Tasks".'),
+	})
+	.describe('Move tasks between To do, Doing, and Done. No assignees, dates, or sync.')
+
+export type TaskBoardData = z.infer<typeof TaskBoardData>
+
+export const TaskBoardProps = z.strictObject({
+	data: TaskBoardData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type TaskBoardProps = z.input<typeof TaskBoardProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const taskBoardStoreSchema = entries(
+	'status_',
+	z.enum(['todo', 'doing', 'done']),
+	{}
+)
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: taskBoardStoreSchema,
+})
+
+export function TaskBoard({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: TaskBoardProps) {
+	const tasks = data.tasks
+	const schema = taskBoardStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	const [column, setColumn] = useState<TaskStatus>('todo')
+	const statusOf = (id: string): TaskStatus => store.value[`status_${id}`] ?? 'todo'
+	const visible = tasks.filter(task => statusOf(task.id) === column)
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="taskBoard"
+			title={data.title ?? 'Tasks'}
+			trailing={
+				<Text {...stylex.props(roles.muted)}>
+					{`${format.formatNumber(tasks.filter(task => statusOf(task.id) === 'done').length)} of ${format.formatNumber(tasks.length)} done`}
+				</Text>
+			}
+		>
+			<Segmented
+				options={taskColumns.map(option => ({
+					label: `${option.label} ${format.formatNumber(tasks.filter(task => statusOf(task.id) === option.value).length)}`,
+					value: option.value,
+				}))}
+				value={column}
+				onChange={setColumn}
+			/>
+			{visible.length === 0 ? (
+				<FeatureWell style={everydayStyles.empty}>
+					<Text {...stylex.props(roles.muted)}>
+						{column === 'done' ? 'Nothing finished yet.' : 'Nothing here.'}
+					</Text>
+				</FeatureWell>
+			) : (
+				<FeatureFacts>
+					{visible.map(task => {
+						const next: TaskStatus =
+							column === 'todo' ? 'doing' : column === 'doing' ? 'done' : 'todo'
+						return (
+							<List.Item
+								key={task.id}
+								label={task.label}
+								trailing={
+									<Button
+										accessibilityLabel={`${moveLabels[column]}: ${task.label}`}
+										disabled={!store.ready}
+										onClick={() => {
+											store.set(() => ({ [`status_${task.id}`]: next }))
+										}}
+										style={[button.quiet, button.sm, layout.trailingAction]}
+									>
+										<Text>{moveLabels[column]}</Text>
+									</Button>
+								}
+							/>
+						)
+					})}
+				</FeatureFacts>
+			)}
+		</FeatureFrame>
+	)
+}
+
+type TaskStatus = 'doing' | 'done' | 'todo'
+
+const moveLabels: Record<TaskStatus, string> = {
+	doing: 'Finish',
+	done: 'Reopen',
+	todo: 'Start',
+}
+
+const taskColumns: { label: string; value: TaskStatus }[] = [
+	{ label: 'To do', value: 'todo' },
+	{ label: 'Doing', value: 'doing' },
+	{ label: 'Done', value: 'done' },
+]

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

@@ -0,0 +1,240 @@
+import { Flex, Text } from '@flickfyi/core'
+import * as stylex from '@stylexjs/stylex'
+import { DateTime, 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 { parseInstant } from '~/kowalski/calculations'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { FeatureDateTime } from '~/kowalski/date-time'
+import { featureFields, replacement, store } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import { FeatureAction, FeatureFrame, FeatureWell } from '~/kowalski/frame'
+import { space, text } from '~/themes/scale.stylex'
+import { appearance, roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiTimeZone'
+const defaultScope = 'private'
+
+export const TimeZoneData = /* @__PURE__ */ z
+	.strictObject({
+		at: z
+			.string()
+			.optional()
+			.describe(
+				'A moment to compare, as ISO 8601 with an offset. Omit to show the live current time.'
+			),
+		title: z.string().optional().describe('A short heading. Omit for "World clock".'),
+		zones: z
+			.array(z.string())
+			.describe('Two or more IANA time zones to compare, e.g. "Europe/London".'),
+	})
+	.describe('Compare local times in named time zones, live or at an explicit instant.')
+
+export type TimeZoneData = z.infer<typeof TimeZoneData>
+
+export const TimeZoneProps = z.strictObject({
+	data: TimeZoneData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type TimeZoneProps = z.input<typeof TimeZoneProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const timeZoneStoreSchema = store({
+	at: replacement(z.string().nullable().default(null)),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: timeZoneStoreSchema,
+})
+
+export function TimeZone({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: TimeZoneProps) {
+	const schema = timeZoneStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({ at: { value: data.at } }),
+	})
+	const [editing, setEditing] = useState(false)
+	const live = store.value.at.value === null
+	const now = useClock(live)
+	const instant = parseInstant(store.value.at.value) ?? now
+	const referenceZone = data.zones[0] ?? 'UTC'
+	const referenceCity = referenceZone.split('/').at(-1)?.replaceAll('_', ' ')
+	const reference = DateTime.fromMillis(instant, { locale: 'en', zone: referenceZone })
+	const referenceDate = DateTime.utc(reference.year, reference.month, reference.day)
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="timeZone"
+			title={data.title ?? 'World clock'}
+			detail={`Times relative to ${referenceCity}`}
+			trailing={
+				<Text {...stylex.props(roles.muted, live && appearance.accent)}>
+					{store.saving
+						? 'Saving…'
+						: !store.ready && !store.error
+							? 'Loading…'
+							: live
+								? 'Live'
+								: 'Fixed time'}
+				</Text>
+			}
+		>
+			<Flex {...stylex.props(timeZoneStyles.clocks)}>
+				{data.zones.map((zone, index) => {
+					const local = reference.setZone(zone)
+					const days = DateTime.utc(local.year, local.month, local.day).diff(
+						referenceDate,
+						'days'
+					).days
+					const minutes = local.offset - reference.offset
+					const difference = format.formatDuration(
+						Duration.fromObject({ minutes: Math.abs(minutes) })
+							.shiftTo('hours', 'minutes', 'seconds')
+							.toObject(),
+						{ style: 'long' }
+					)
+					const clockParts = format.formatTimeToParts(instant, {
+						fractionalSecondDigits: !live && local.millisecond !== 0 ? 3 : undefined,
+						hour: 'numeric',
+						hour12: true,
+						minute: '2-digit',
+						second:
+							!live && (local.second !== 0 || local.millisecond !== 0)
+								? '2-digit'
+								: undefined,
+						timeZone: zone,
+					})
+					const clock = clockParts
+						.filter(part => part.type !== 'dayPeriod')
+						.map(part => part.value)
+						.join('')
+						.trim()
+					return (
+						<FeatureWell key={`${zone}:${index}`}>
+							<Flex {...stylex.props(timeZoneStyles.zoneRow)}>
+								<Flex {...stylex.props(timeZoneStyles.city)}>
+									<Text {...stylex.props(roles.h2)}>
+										{zone.split('/').at(-1)?.replaceAll('_', ' ')}
+									</Text>
+									<Text {...stylex.props(roles.muted)}>
+										{index === 0
+											? 'Reference'
+											: minutes === 0
+												? 'Same time'
+												: `${difference} ${minutes > 0 ? 'ahead' : 'behind'}`}
+									</Text>
+									{days !== 0 && (
+										<Text {...stylex.props(roles.muted, appearance.accent)}>
+											{days === 1
+												? 'Next day'
+												: days === -1
+													? 'Previous day'
+													: `${format.formatNumber(Math.abs(days))} days ${days > 0 ? 'ahead' : 'behind'}`}
+										</Text>
+									)}
+								</Flex>
+								<Flex {...stylex.props(timeZoneStyles.local)}>
+									<Flex {...stylex.props(timeZoneStyles.time)}>
+										<Text
+											animated={live ? 'numeric' : undefined}
+											{...stylex.props(
+												roles.display,
+												timeZoneStyles.digits(clock.length)
+											)}
+										>
+											{clock}
+										</Text>
+										<Text {...stylex.props(roles.muted, timeZoneStyles.period)}>
+											{clockParts.find(part => part.type === 'dayPeriod')?.value}
+										</Text>
+									</Flex>
+									<Text {...stylex.props(roles.muted)}>
+										{format.formatDate(instant, {
+											day: 'numeric',
+											...(local.year <= 0 ? { era: 'short', year: 'numeric' } : {}),
+											month: 'short',
+											weekday: 'short',
+											timeZone: zone,
+										})}
+									</Text>
+								</Flex>
+							</Flex>
+						</FeatureWell>
+					)
+				})}
+			</Flex>
+			<FeatureDateTime
+				actionLabel="Compare another time"
+				compact
+				component="timeZone"
+				label={`Comparison time · ${referenceCity}`}
+				ready={store.ready}
+				saving={store.saving}
+				submitLabel="Compare this time"
+				timeZone={referenceZone}
+				value={store.value.at.value}
+				onChange={(at, onSaved) => store.set(() => ({ at: { value: at } }), onSaved)}
+				onEditingChange={setEditing}
+			/>
+			{!live && (
+				<FeatureAction
+					component="timeZone"
+					icon="clock"
+					disabled={!store.ready || store.saving || editing}
+					onClick={() => store.set(() => ({ at: { value: null } }))}
+				>
+					Return to live
+				</FeatureAction>
+			)}
+			{!live && editing && !store.saving && (
+				<Text {...stylex.props(roles.muted)}>
+					Save or cancel your comparison before returning to live.
+				</Text>
+			)}
+		</FeatureFrame>
+	)
+}
+
+// Long readings step down the display scale so they never overflow their well.
+const timeZoneStyles = /* @__PURE__ */ stylex.create({
+	city: { flexBasis: space[24], flexGrow: 1, gap: space[1], minWidth: 0 },
+	clocks: { gap: space[2] },
+	digits: (length: number) => ({
+		fontSize: length > 8 ? text['2xl'] : length > 5 ? text['3xl'] : text['4xl'],
+		lineHeight:
+			length > 8
+				? text['2xlLeading']
+				: length > 5
+					? text['3xlLeading']
+					: text['4xlLeading'],
+	}),
+	local: { alignItems: 'flex-end', flexGrow: 1, gap: space[1], textAlign: 'right' },
+	period: { marginBottom: space[1] },
+	time: { alignItems: 'flex-end', flexDirection: 'row', gap: space[1.5] },
+	zoneRow: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[3],
+	},
+})