@flickfyi/flkr 0.0.182 → 0.0.185

package/node_modules/@flickfyi/core/src/kowalski/components/budget.tsx

@@ -0,0 +1,169 @@
+import { Text } from '@flickfyi/core'
+import { Input, Picker } from '@flickfyi/core/atoms'
+import { Field, List, Stat } 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 { formatCurrency } from '~/kowalski/calculations'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { entries, featureFields } from '~/kowalski/feature-schema'
+import { parseNumberInput, resolveCurrency } from '~/kowalski/format'
+import {
+	FeatureAction,
+	FeatureFacts,
+	FeatureFrame,
+	FeatureProgress,
+	FeatureWell,
+	layout,
+} from '~/kowalski/frame'
+import { roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiBudget'
+const defaultScope = 'private'
+
+export const BudgetData = /* @__PURE__ */ z
+	.strictObject({
+		categories: z
+			.array(
+				z.strictObject({
+					id: z.string().describe('A short ID, unique within this list, e.g. "tent".'),
+					label: z.string().describe('The category name, e.g. "Groceries".'),
+					limit: z.number().describe('The spending limit for the period, e.g. 400.'),
+				})
+			)
+			.describe('A few spending categories.'),
+		currency: z
+			.string()
+			.optional()
+			.describe('A three-letter ISO currency code, e.g. "USD" or "EUR". Omit for "USD".'),
+		title: z.string().optional().describe('A short heading. Omit for "Budget".'),
+	})
+	.describe(
+		'Track spending against category limits for one budget period. No bank connection or payments.'
+	)
+
+export type BudgetData = z.infer<typeof BudgetData>
+
+export const BudgetProps = z.strictObject({
+	data: BudgetData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type BudgetProps = z.input<typeof BudgetProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const budgetStoreSchema = entries('spent_', z.number(), {})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: budgetStoreSchema,
+})
+
+export function Budget({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: BudgetProps) {
+	const categories =
+		data.categories.length > 0
+			? data.categories
+			: [{ id: 'general', label: 'General', limit: 0 }]
+	const currency = resolveCurrency(data.currency)
+	const schema = budgetStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	const [categoryId, setCategoryId] = useState(categories[0].id)
+	const [amount, setAmount] = useState({ value: '' })
+	const money = (value: number) => formatCurrency(value, currency)
+	const spentOn = (id: string) => store.value[`spent_${id}`] ?? 0
+	const spent = categories.reduce((total, category) => total + spentOn(category.id), 0)
+	const limit = categories.reduce((total, category) => total + category.limit, 0)
+	const left = limit - spent
+	const category = categories.find(option => option.id === categoryId) ?? categories[0]
+	const parsed = parseNumberInput(amount.value, currency)
+	const valid = Number.isFinite(parsed) && parsed > 0
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="budget"
+			title={data.title ?? 'Budget'}
+			trailing={
+				<Text {...stylex.props(roles.muted, left < 0 && layout.notice)}>
+					{left < 0 ? `${money(-left)} over` : `${money(left)} left`}
+				</Text>
+			}
+		>
+			<FeatureWell>
+				<Stat>
+					<Stat.Value>{money(spent)}</Stat.Value>
+					<Stat.Caption>{`Spent of ${money(limit)}`}</Stat.Caption>
+				</Stat>
+				<FeatureProgress
+					component="budget"
+					value={limit > 0 ? Math.min(1, spent / limit) : 0}
+				/>
+			</FeatureWell>
+			<FeatureFacts>
+				{categories.map(option => (
+					<List.Item
+						description={
+							spentOn(option.id) > option.limit
+								? `${money(spentOn(option.id) - option.limit)} over`
+								: undefined
+						}
+						key={option.id}
+						label={option.label}
+						trailing={`${money(spentOn(option.id))} of ${money(option.limit)}`}
+					/>
+				))}
+			</FeatureFacts>
+			<Field error={amount.value && !valid && 'Enter an amount.'} label="Add spending">
+				<Picker label="Category" value={category.id} onChange={setCategoryId}>
+					{categories.map(option => (
+						<Text key={option.id} value={option.id}>
+							{option.label}
+						</Text>
+					))}
+				</Picker>
+				<Input
+					placeholder="Amount"
+					value={amount.value}
+					onChange={value => setAmount({ value })}
+					style={[layout.input]}
+				/>
+			</Field>
+			<FeatureAction
+				component="budget"
+				disabled={!valid || !store.ready || store.saving}
+				icon="plus"
+				size="lg"
+				variant="primary"
+				onClick={() =>
+					store.set(
+						current => ({
+							[`spent_${category.id}`]: (current[`spent_${category.id}`] ?? 0) + parsed,
+						}),
+						() => setAmount(current => (current === amount ? { value: '' } : current))
+					)
+				}
+			>
+				{`Add to ${category.label}`}
+			</FeatureAction>
+		</FeatureFrame>
+	)
+}

package/node_modules/@flickfyi/core/src/kowalski/components/calculator.tsx

@@ -0,0 +1,202 @@
+import { Flex, Text } from '@flickfyi/core'
+import { Button } from '@flickfyi/core/atoms'
+import * as stylex from '@stylexjs/stylex'
+import { z } from 'zod/v4'
+
+import { buttonVars } from '~/atoms/button/button.stylex'
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import {
+	calculatorDisplay,
+	calculatorEquation,
+	calculatorKeyLabel,
+	calculatorKeys,
+	initialCalculator,
+	pressCalculatorKey,
+} from '~/kowalski/calculator'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { featureFields, store } from '~/kowalski/feature-schema'
+import { FeatureFrame, FeatureWell } from '~/kowalski/frame'
+import { size, space, text } from '~/themes/scale.stylex'
+import { button, roles } from '~/themes/shared'
+import { colors, font } from '~/themes/tokens.stylex'
+
+const defaultId = 'KowalskiCalculator'
+const defaultScope = 'private'
+
+export const CalculatorData = /* @__PURE__ */ z
+	.strictObject({
+		left: z.number().optional().describe('The starting number. Omit for 0.'),
+		operator: z
+			.enum(['+', '-', '*', '/'])
+			.optional()
+			.describe('The pending operator. Omit for "+".'),
+		right: z.number().optional().describe('The second operand. Omit for 0.'),
+		title: z.string().optional().describe('A short heading. Omit for "Calculate".'),
+	})
+	.describe(
+		'A persistent keypad calculator with chained arithmetic, decimals, sign, percent, and repeated equals. Supports +, -, *, /. No executable expression strings.'
+	)
+
+export type CalculatorData = z.infer<typeof CalculatorData>
+
+export const CalculatorProps = z.strictObject({
+	data: CalculatorData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type CalculatorProps = z.input<typeof CalculatorProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const calculatorStoreSchema = store({
+	calculation: z
+		.object({
+			entry: z
+				.string()
+				.max(40)
+				.regex(/^(?:-?\d+(?:\.\d*)?(?:e[+-]?\d+)?|Error)$/),
+			left: z.number(),
+			operator: z.enum(['+', '-', '*', '/']),
+			overwrite: z.boolean(),
+			phase: z.enum(['left', 'operator', 'right', 'result', 'error']),
+			right: z.number(),
+		})
+		.refine(
+			calculation =>
+				calculation.phase === 'error'
+					? calculation.entry === 'Error'
+					: calculation.entry !== 'Error' && Number.isFinite(Number(calculation.entry)),
+			'Calculator entry must match its phase and represent a finite number.'
+		)
+		.default({
+			entry: '0',
+			left: 0,
+			operator: '+',
+			overwrite: false,
+			phase: 'left',
+			right: 0,
+		}),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: calculatorStoreSchema,
+})
+
+export function Calculator({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: CalculatorProps) {
+	const schema = calculatorStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({ calculation: initialCalculator(data) }),
+	})
+	const calculation = store.value.calculation
+	const display = calculatorDisplay(calculation.entry)
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="calculator"
+			title={data.title ?? 'Calculate'}
+		>
+			<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>
+	)
+}
+
+// Keys sit directly in the tray at p-4, so their control radius stays concentric with it.
+const calculatorStyles = /* @__PURE__ */ 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',
+	}),
+})

package/node_modules/@flickfyi/core/src/kowalski/components/checklist.tsx

@@ -0,0 +1,119 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import * as stylex from '@stylexjs/stylex'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { entries, featureFields } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import { FeatureChoice, FeatureFrame, layout } from '~/kowalski/frame'
+import { space } from '~/themes/scale.stylex'
+import { appearance, roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiChecklist'
+const defaultScope = 'private'
+
+export const ChecklistData = /* @__PURE__ */ z
+	.strictObject({
+		items: 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, e.g. "Pack tent".'),
+				})
+			)
+			.describe('The checklist items, in order.'),
+		title: z.string().describe('A short heading.'),
+	})
+	.describe(
+		'A persistent checklist with independent completion and progress. No external actions.'
+	)
+
+export type ChecklistData = z.infer<typeof ChecklistData>
+
+export const ChecklistProps = z.strictObject({
+	data: ChecklistData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type ChecklistProps = z.input<typeof ChecklistProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const checklistStoreSchema = entries('completed_', z.boolean(), {})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: checklistStoreSchema,
+})
+
+export function Checklist({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: ChecklistProps) {
+	const items = data.items
+	const schema = checklistStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	const completed = (id: string) => store.value[`completed_${id}`] ?? false
+	const count = items.filter(item => completed(item.id)).length
+	const loading = !store.ready && !store.error
+	const remaining = items.length - count
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="checklist"
+			title={data.title}
+			trailing={
+				<Flex {...stylex.props(checklistStyles.status)}>
+					{!loading && remaining === 0 && (
+						<Icon name="checkmark.circle.fill" {...stylex.props(appearance.accent)} />
+					)}
+					<Text {...stylex.props(roles.muted)}>
+						{loading
+							? 'Loading checklist…'
+							: `${format.formatNumber(count)} of ${format.formatNumber(items.length)} complete`}
+					</Text>
+				</Flex>
+			}
+		>
+			<Flex {...stylex.props(layout.list)}>
+				{/* Completed items sink below open ones; each group keeps its authored order. */}
+				{items
+					.toSorted((a, b) => Number(completed(a.id)) - Number(completed(b.id)))
+					.map(item => (
+						<FeatureChoice
+							key={item.id}
+							component="checklist"
+							label={item.label}
+							ready={store.ready}
+							selected={completed(item.id)}
+							onClick={() => {
+								store.set(current => ({
+									[`completed_${item.id}`]: !current[`completed_${item.id}`],
+								}))
+							}}
+						/>
+					))}
+			</Flex>
+			{store.saving && <Text {...stylex.props(roles.muted)}>Saving changes…</Text>}
+		</FeatureFrame>
+	)
+}
+
+const checklistStyles = /* @__PURE__ */ stylex.create({
+	status: { alignItems: 'center', flexDirection: 'row', gap: space[1.5] },
+})