@flickfyi/flkr 0.0.182 → 0.0.185

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

@@ -0,0 +1,182 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import * as stylex from '@stylexjs/stylex'
+import { Decimal } from 'decimal.js'
+import { useMemo } from 'react'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { featureFields, store } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import {
+	FeatureAction,
+	FeatureFrame,
+	FeatureProgress,
+	FeatureWell,
+	layout,
+} from '~/kowalski/frame'
+import { space, text } from '~/themes/scale.stylex'
+import { appearance, roles } from '~/themes/shared'
+import { font } from '~/themes/tokens.stylex'
+
+const defaultId = 'KowalskiGoal'
+const defaultScope = 'private'
+
+export const GoalData = /* @__PURE__ */ z
+	.strictObject({
+		progress: z.number().optional().describe('Progress so far. Omit for 0.'),
+		step: z
+			.number()
+			.optional()
+			.describe('How much one tap adds, e.g. 1 or 0.5. Omit for 1.'),
+		target: z.number().describe('The amount that completes the goal, e.g. 10.'),
+		title: z.string().describe('A short heading.'),
+		unit: z
+			.string()
+			.optional()
+			.describe('A short unit after the numbers, e.g. "km" or "pages". Omit for none.'),
+	})
+	.describe(
+		'A personal goal with editable progress, target, and a fixed increment. Not a distributed counter.'
+	)
+
+export type GoalData = z.infer<typeof GoalData>
+
+export const GoalProps = z.strictObject({
+	data: GoalData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type GoalProps = z.input<typeof GoalProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const goalStoreSchema = store({ progress: z.number().default(0) })
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: goalStoreSchema,
+})
+
+export function Goal({ data, id, revision = 0, scope = defaultScope, style }: GoalProps) {
+	const schema = goalStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({ progress: data.progress }),
+	})
+	const progress = store.value.progress
+	const step = data.step ?? 1
+	const loading = !store.ready && !store.error
+	const reached = !loading && progress >= data.target
+	const number = useMemo(
+		() =>
+			format.formatters.getNumberFormat(format.locale, { maximumSignificantDigits: 17 }),
+		[]
+	)
+	const distance = new Decimal(data.target).minus(progress).abs().toNumber()
+	const progressLabel = loading ? '—' : number.format(progress)
+	const targetLabel = number.format(data.target)
+	const distanceLabel = number.format(distance)
+	const stepLabel = number.format(step)
+	const nextProgress = new Decimal(progress).plus(step).toNumber()
+	const previousProgress = Decimal.max(0, new Decimal(progress).minus(step)).toNumber()
+	const unit = data.unit ? ` ${data.unit}` : ''
+	const change = (direction: -1 | 1) =>
+		store.set(current => {
+			const next = Decimal.max(
+				0,
+				new Decimal(current.progress).plus(step * direction)
+			).toNumber()
+			return { progress: Number.isFinite(next) ? next : current.progress }
+		})
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="goal"
+			title={data.title}
+		>
+			<FeatureWell>
+				<Flex {...stylex.props(goalStyles.metric)}>
+					<Text
+						animated="numeric"
+						{...stylex.props(roles.display, goalStyles.value(progressLabel.length))}
+					>
+						{progressLabel}
+					</Text>
+					<Text {...stylex.props(roles.muted)}>{`of ${targetLabel}${unit}`}</Text>
+				</Flex>
+				<FeatureProgress
+					component="goal"
+					value={loading ? 0 : data.target > 0 ? progress / data.target : 1}
+				/>
+				{(loading || reached) && (
+					<Flex {...stylex.props(goalStyles.status)}>
+						{reached && (
+							<Icon name="checkmark.circle.fill" {...stylex.props(appearance.accent)} />
+						)}
+						<Text {...stylex.props(roles.muted, reached && appearance.accent)}>
+							{loading
+								? 'Loading saved progress…'
+								: progress > data.target
+									? `Goal reached, ${distanceLabel}${unit} beyond your target`
+									: 'Goal reached'}
+						</Text>
+					</Flex>
+				)}
+			</FeatureWell>
+			<Flex {...stylex.props(goalStyles.controls)}>
+				<Flex {...stylex.props(layout.actions)}>
+					<FeatureAction
+						component="goal"
+						disabled={!store.ready || previousProgress === progress}
+						onClick={() => change(-1)}
+					>{`−${stepLabel}`}</FeatureAction>
+					<FeatureAction
+						component="goal"
+						variant="primary"
+						disabled={
+							!store.ready || !Number.isFinite(nextProgress) || nextProgress === progress
+						}
+						onClick={() => change(1)}
+					>{`+${stepLabel}`}</FeatureAction>
+				</Flex>
+				{store.saving && <Text {...stylex.props(roles.muted)}>Saving progress…</Text>}
+				{store.ready && nextProgress === progress && previousProgress === progress && (
+					<Text {...stylex.props(roles.muted)}>
+						This increment is too small to change this total.
+					</Text>
+				)}
+			</Flex>
+		</FeatureFrame>
+	)
+}
+
+const goalStyles = /* @__PURE__ */ stylex.create({
+	controls: { gap: space[2] },
+	metric: {
+		alignItems: 'baseline',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[2],
+	},
+	status: { alignItems: 'center', flexDirection: 'row', gap: space[1.5] },
+	value: (length: number) => ({
+		fontSize: length > 12 ? text.xl : length > 7 ? text['4xl'] : font.displaySize,
+		lineHeight:
+			length > 12
+				? text.xlLeading
+				: length > 7
+					? text['4xlLeading']
+					: font.displayLeading,
+		maxWidth: '100%',
+		minWidth: 0,
+	}),
+})

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

@@ -0,0 +1,272 @@
+import { Flex, Text } from '@flickfyi/core'
+import { Button } from '@flickfyi/core/atoms'
+import { Field } from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { isEqual } from 'lodash'
+import { Info } 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 { localDate } from '~/kowalski/calculations'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { entries, featureFields } from '~/kowalski/feature-schema'
+import { format, resolveTimeZone } from '~/kowalski/format'
+import { FeatureAction, FeatureFrame, FeatureWell, layout } from '~/kowalski/frame'
+import { radius, size, space } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+import { colors } from '~/themes/tokens.stylex'
+
+export const weekdayNames = [
+	'sunday',
+	'monday',
+	'tuesday',
+	'wednesday',
+	'thursday',
+	'friday',
+	'saturday',
+] as const
+
+const defaultId = 'KowalskiHabit'
+const defaultScope = 'private'
+
+export const HabitData = /* @__PURE__ */ z
+	.strictObject({
+		timeZone: z
+			.string()
+			.optional()
+			.describe('An IANA time zone, e.g. "America/New_York". Omit for UTC.'),
+		title: z.string().describe('A short heading.'),
+		weekdays: z
+			.array(z.enum(weekdayNames))
+			.optional()
+			.describe('The days the habit is scheduled. Omit for every day.'),
+	})
+	.describe(
+		'Track a habit by local date and edit its weekday schedule. No notifications.'
+	)
+
+export type HabitData = z.infer<typeof HabitData>
+
+export const HabitProps = z.strictObject({
+	data: HabitData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type HabitProps = z.input<typeof HabitProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const habitStoreSchema = entries('completed_', z.boolean(), {
+	weekdays: z.array(z.enum(weekdayNames)).default([...weekdayNames]),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: habitStoreSchema,
+})
+
+export function Habit({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: HabitProps) {
+	const [editingSchedule, setEditingSchedule] = useState(false)
+	const schema = habitStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({ weekdays: data.weekdays }),
+	})
+	const now = useClock()
+	const today = localDate(now, resolveTimeZone(data.timeZone))
+	const loading = !store.ready && !store.error
+	const dayOf = (date: string) => weekdayNames[new Date(`${date}T00:00:00Z`).getUTCDay()]
+	// Luxon lists weekdays Monday first; weekdayNames is Sunday first.
+	const shortName = (day: Weekday) =>
+		Info.weekdays('short', { locale: format.locale })[(weekdayNames.indexOf(day) + 6) % 7]
+	const scheduled = store.value.weekdays.includes(dayOf(today))
+	const done = store.value[`completed_${today}`] ?? false
+	const mondayFirst = [...weekdayNames.slice(1), weekdayNames[0]]
+	const selected = mondayFirst.filter(day => store.value.weekdays.includes(day))
+	const schedule =
+		selected.length === 7
+			? 'Every day'
+			: selected.length === 0
+				? 'No scheduled days'
+				: isEqual(selected, mondayFirst.slice(0, 5))
+					? 'Monday to Friday'
+					: isEqual(selected, mondayFirst.slice(5))
+						? 'Saturday & Sunday'
+						: format.formatList(selected.map(shortName), { type: 'unit' })
+	const days = Array.from({ length: 7 }, (_, index) => {
+		const date = new Date(`${today}T00:00:00Z`)
+		date.setUTCDate(date.getUTCDate() - 6 + index)
+		const key = date.toISOString().slice(0, 10)
+		return {
+			complete: store.value[`completed_${key}`] ?? false,
+			date: key,
+			label: shortName(dayOf(key)),
+			number: date.getUTCDate(),
+			scheduled: store.value.weekdays.includes(dayOf(key)),
+		}
+	})
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="habit"
+			title={data.title}
+		>
+			<Field label="Schedule">
+				<Flex {...stylex.props(habitStyles.row)}>
+					<Text {...stylex.props(roles.text, layout.grow)}>
+						{loading ? 'Loading saved schedule…' : schedule}
+					</Text>
+					<Button
+						disabled={!store.ready}
+						onClick={() => setEditingSchedule(current => !current)}
+						style={[button.quiet, layout.trailingAction]}
+					>
+						<Text>{editingSchedule ? 'Done editing' : 'Edit schedule'}</Text>
+					</Button>
+				</Flex>
+				{editingSchedule && (
+					<>
+						<Flex {...stylex.props(habitStyles.weekdays)}>
+							{mondayFirst.map(day => (
+								<Button
+									key={day}
+									selected={store.value.weekdays.includes(day)}
+									disabled={!store.ready}
+									onClick={() => {
+										store.set(current => ({
+											weekdays: current.weekdays.includes(day)
+												? current.weekdays.filter(value => value !== day)
+												: [...current.weekdays, day],
+										}))
+									}}
+									style={[button.secondary, habitStyles.weekday]}
+								>
+									<Text>{shortName(day)}</Text>
+								</Button>
+							))}
+						</Flex>
+						<Text {...stylex.props(roles.muted)}>
+							Changes save as you tap. Completed days stay saved when the schedule
+							changes.
+						</Text>
+					</>
+				)}
+			</Field>
+			<Field label="Last seven days">
+				{loading ? (
+					<Text {...stylex.props(roles.muted)}>Loading saved history…</Text>
+				) : (
+					<Flex {...stylex.props(habitStyles.history)}>
+						{days.map(day => (
+							<Flex key={day.date} {...stylex.props(habitStyles.day)}>
+								<Text
+									{...stylex.props(roles.muted, day.date === today && appearance.accent)}
+								>
+									{day.date === today ? 'Today' : day.label}
+								</Text>
+								<Flex
+									{...stylex.props(
+										appearance.surface,
+										habitStyles.date,
+										day.date === today && appearance.selected,
+										day.complete && habitStyles.completedDate,
+										!day.scheduled && !day.complete && habitStyles.offDay
+									)}
+								>
+									<Text>{day.number}</Text>
+								</Flex>
+							</Flex>
+						))}
+					</Flex>
+				)}
+			</Field>
+			<FeatureWell>
+				<Flex {...stylex.props(habitStyles.row)}>
+					<Text {...stylex.props(roles.h1)}>
+						{loading ? 'Loading…' : done ? 'Complete' : scheduled ? 'Not yet' : 'Off day'}
+					</Text>
+					<Text {...stylex.props(roles.muted)}>
+						{format.formatters
+							.getDateTimeFormat(format.locale, {
+								day: 'numeric',
+								month: 'short',
+								timeZone: 'UTC',
+								weekday: 'short',
+							})
+							.format(new Date(`${today}T00:00:00Z`))}
+					</Text>
+				</Flex>
+				<Text {...stylex.props(roles.muted)}>
+					{loading
+						? 'Loading saved completions…'
+						: scheduled
+							? 'Scheduled today'
+							: done
+								? 'Completed on an off day'
+								: 'No completion needed today'}
+				</Text>
+			</FeatureWell>
+			{store.saving && <Text {...stylex.props(roles.muted)}>Saving changes…</Text>}
+			<FeatureAction
+				component="habit"
+				variant={done || !scheduled ? 'secondary' : 'primary'}
+				icon={done ? 'arrow.uturn.backward' : 'checkmark'}
+				size="lg"
+				disabled={!store.ready}
+				onClick={() => {
+					store.set(current => ({
+						[`completed_${today}`]: !current[`completed_${today}`],
+					}))
+				}}
+			>
+				{done ? 'Undo' : 'Complete today'}
+			</FeatureAction>
+		</FeatureFrame>
+	)
+}
+
+// A week strip: state reads from the date chip alone (filled, plain, or faded).
+const habitStyles = /* @__PURE__ */ stylex.create({
+	completedDate: {
+		backgroundColor: colors.accent,
+		borderColor: colors.accent,
+		color: colors.onAccent,
+	},
+	date: {
+		alignItems: 'center',
+		borderRadius: radius.full,
+		height: size[9],
+		justifyContent: 'center',
+		width: size[9],
+	},
+	day: { alignItems: 'center', flexBasis: '0%', flexGrow: 1, gap: space[2], minWidth: 0 },
+	history: { flexDirection: 'row', gap: space[1] },
+	offDay: { opacity: 0.5 },
+	row: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[3],
+		justifyContent: 'space-between',
+	},
+	weekday: { flexBasis: '22%', flexGrow: 1, textAlign: 'center' },
+	weekdays: { flexDirection: 'row', flexWrap: 'wrap', gap: space[2] },
+})
+
+type Weekday = (typeof weekdayNames)[number]

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

@@ -0,0 +1,211 @@
+import { Text } from '@flickfyi/core'
+import { Input } from '@flickfyi/core/atoms'
+import { Field, 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 { formatCurrency } from '~/kowalski/calculations'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { everydayStyles } from '~/kowalski/everyday'
+import { featureFields, store } from '~/kowalski/feature-schema'
+import { parseNumberInput, resolveCurrency } from '~/kowalski/format'
+import {
+	FeatureAction,
+	FeatureFacts,
+	FeatureFrame,
+	FeatureWell,
+	layout,
+} from '~/kowalski/frame'
+import { roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiLedger'
+const defaultScope = 'private'
+
+export const LedgerData = /* @__PURE__ */ z
+	.strictObject({
+		currency: z
+			.string()
+			.optional()
+			.describe('A three-letter ISO currency code, e.g. "USD" or "EUR". Omit for "USD".'),
+		people: z
+			.array(
+				z.strictObject({
+					id: z.string().describe('A short ID, unique within this list, e.g. "tent".'),
+					label: z.string().describe('A person’s name.'),
+				})
+			)
+			.describe('Exactly two people sharing the tab.'),
+		title: z.string().optional().describe('A short heading. Omit for "Shared tab".'),
+	})
+	.describe(
+		'A running tab of shared costs between two people, split evenly, with settle up. No payments.'
+	)
+
+export type LedgerData = z.infer<typeof LedgerData>
+
+export const LedgerProps = z.strictObject({
+	data: LedgerData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type LedgerProps = z.input<typeof LedgerProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const ledgerStoreSchema = store({
+	entries: z
+		.array(
+			z.strictObject({
+				amount: z.number(),
+				id: z.string(),
+				label: z.string(),
+				paidBy: z.string(),
+			})
+		)
+		.default([]),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: ledgerStoreSchema,
+})
+
+export function Ledger({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: LedgerProps) {
+	const schema = ledgerStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	const first = data.people[0] ?? { id: 'first', label: 'Person 1' }
+	const second = data.people[1] ?? { id: 'second', label: 'Person 2' }
+	const [label, setLabel] = useState({ value: '' })
+	const [amount, setAmount] = useState({ value: '' })
+	const [paidBy, setPaidBy] = useState(first.id)
+	const money = (value: number) => formatCurrency(value, data.currency)
+	const nameOf = (id: string) => (id === first.id ? first.label : second.label)
+	const parsed = parseNumberInput(amount.value, resolveCurrency(data.currency))
+	const valid = Number.isFinite(parsed) && parsed > 0
+	// Every cost is shared evenly, so whoever paid is owed half of it.
+	const balance = store.value.entries.reduce(
+		(sum, entry) => sum + (entry.paidBy === first.id ? entry.amount : -entry.amount) / 2,
+		0
+	)
+	const settled = Math.abs(balance) < 0.005
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="ledger"
+			title={data.title ?? 'Shared tab'}
+			detail={`${first.label} and ${second.label} · costs split evenly`}
+		>
+			<FeatureWell style={everydayStyles.centered}>
+				<Text {...stylex.props(roles.h1)}>
+					{settled ? 'All square' : money(Math.abs(balance))}
+				</Text>
+				{!settled && (
+					<Text {...stylex.props(roles.muted)}>
+						{balance > 0
+							? `${second.label} owes ${first.label}`
+							: `${first.label} owes ${second.label}`}
+					</Text>
+				)}
+			</FeatureWell>
+			{store.value.entries.length > 0 && (
+				<>
+					<FeatureAction
+						component="ledger"
+						disabled={!store.ready}
+						onClick={() => store.set(() => ({ entries: [] }))}
+					>
+						Settle up
+					</FeatureAction>
+					<FeatureFacts>
+						{store.value.entries.slice(0, 20).map(entry => (
+							<List.Item
+								description={`Paid by ${nameOf(entry.paidBy)}`}
+								key={entry.id}
+								label={entry.label || 'Shared cost'}
+								trailing={money(entry.amount)}
+							/>
+						))}
+					</FeatureFacts>
+				</>
+			)}
+			<Field label="What for">
+				<Input
+					placeholder="What for"
+					value={label.value}
+					onChange={value => setLabel({ value })}
+					style={[layout.input]}
+				/>
+			</Field>
+			<Field
+				error={amount.value && !valid && 'Enter an amount within the supported range.'}
+				label="Amount"
+			>
+				<Input
+					placeholder="Amount"
+					value={amount.value}
+					onChange={value => setAmount({ value })}
+					style={[layout.input]}
+				/>
+			</Field>
+			<Field label="Paid by">
+				<Segmented
+					options={data.people.map(person => ({
+						label: person.label,
+						value: person.id,
+					}))}
+					value={paidBy}
+					onChange={setPaidBy}
+				/>
+			</Field>
+			<FeatureAction
+				component="ledger"
+				disabled={
+					!valid || !store.ready || store.saving || store.value.entries.length >= 200
+				}
+				icon="plus"
+				size="lg"
+				variant="primary"
+				onClick={() =>
+					store.set(
+						current => ({
+							entries: [
+								{
+									amount: parsed,
+									id: `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`,
+									label: label.value.trim(),
+									paidBy,
+								},
+								...current.entries,
+							],
+						}),
+						() => {
+							setAmount(current => (current === amount ? { value: '' } : current))
+							setLabel(current => (current === label ? { value: '' } : current))
+						}
+					)
+				}
+			>
+				Add to the tab
+			</FeatureAction>
+		</FeatureFrame>
+	)
+}