@flickfyi/flkr 0.0.182 → 0.0.185

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

@@ -0,0 +1,173 @@
+import { Flex, Text } from '@flickfyi/core'
+import * as stylex from '@stylexjs/stylex'
+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 { FeatureFrame, FeatureWell } from '~/kowalski/frame'
+import { space, text } from '~/themes/scale.stylex'
+import { roles } from '~/themes/shared'
+import { font } from '~/themes/tokens.stylex'
+
+const defaultId = 'KowalskiCountdown'
+const defaultScope = 'private'
+
+export const CountdownData = /* @__PURE__ */ z
+	.strictObject({
+		target: z
+			.string()
+			.describe(
+				'The moment to count down to, as ISO 8601 with an offset, e.g. "2026-12-31T23:59:59-08:00".'
+			),
+		timeZone: z
+			.string()
+			.optional()
+			.describe('An IANA time zone, e.g. "America/New_York". Omit for UTC.'),
+		title: z.string().describe('A short heading.'),
+	})
+	.describe(
+		'Count down to an explicit instant. Resolve missing dates before instantiation.'
+	)
+
+export type CountdownData = z.infer<typeof CountdownData>
+
+export const CountdownProps = z.strictObject({
+	data: CountdownData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type CountdownProps = z.input<typeof CountdownProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const countdownStoreSchema = store({
+	target: replacement(z.string().nullable().default(null)),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: countdownStoreSchema,
+})
+
+export function Countdown({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: CountdownProps) {
+	const schema = countdownStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({ target: { value: data.target } }),
+	})
+	const now = useClock()
+	const target = parseInstant(store.value.target.value)
+	const seconds = target === null ? 0 : Math.max(0, Math.ceil((target - now) / 1000))
+	const units = [
+		{ label: 'day', value: Math.floor(seconds / 86_400) },
+		{ label: 'hour', value: Math.floor((seconds % 86_400) / 3600) },
+		{ label: 'minute', value: Math.floor((seconds % 3600) / 60) },
+		{ label: 'second', value: seconds % 60 },
+	]
+	const leadingIndex = seconds >= 86_400 ? 0 : seconds >= 3600 ? 1 : seconds >= 60 ? 2 : 3
+	const leading = units[leadingIndex]
+	const amount = format.formatNumber(leading.value)
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="countdown"
+			title={data.title}
+		>
+			<FeatureWell style={countdownStyles.remaining}>
+				<Text
+					animated={seconds > 0 ? 'numeric' : undefined}
+					{...stylex.props(
+						roles.display,
+						countdownStyles.amount(amount.length),
+						seconds === 0 && countdownStyles.arrived
+					)}
+				>
+					{target === null ? '—' : seconds === 0 ? 'It’s time' : amount}
+				</Text>
+				<Text {...stylex.props(roles.muted)}>
+					{target === null
+						? 'Choose a target below'
+						: seconds === 0
+							? 'Your countdown has arrived'
+							: `${format.formatNumberToParts(leading.value, { style: 'unit', unit: leading.label, unitDisplay: 'long' }).find(part => part.type === 'unit')?.value} to go`}
+				</Text>
+				{seconds > 0 && leadingIndex < 3 && (
+					<Flex {...stylex.props(countdownStyles.units)}>
+						{units.slice(leadingIndex + 1).map(unit => (
+							<Flex key={unit.label} {...stylex.props(countdownStyles.unit)}>
+								<Text animated="numeric" {...stylex.props(roles.strong)}>
+									{format.formatNumber(unit.value)}
+								</Text>
+								<Text {...stylex.props(roles.muted)}>
+									{
+										format
+											.formatNumberToParts(unit.value, {
+												style: 'unit',
+												unit: unit.label,
+												unitDisplay: 'long',
+											})
+											.find(part => part.type === 'unit')?.value
+									}
+								</Text>
+							</Flex>
+						))}
+					</Flex>
+				)}
+			</FeatureWell>
+			<FeatureDateTime
+				component="countdown"
+				label="Target date & time"
+				ready={store.ready}
+				saving={store.saving}
+				timeZone={data.timeZone ?? 'UTC'}
+				value={store.value.target.value || null}
+				onChange={(target, onSaved) =>
+					target === null
+						? false
+						: store.set(() => ({ target: { value: target } }), onSaved)
+				}
+			/>
+		</FeatureFrame>
+	)
+}
+
+const countdownStyles = /* @__PURE__ */ stylex.create({
+	amount: (length: number) => ({
+		fontSize: length > 6 ? text['4xl'] : length > 4 ? text['6xl'] : font.displaySize,
+		lineHeight:
+			length > 6
+				? text['4xlLeading']
+				: length > 4
+					? text['6xlLeading']
+					: font.displayLeading,
+	}),
+	arrived: { fontSize: text['4xl'], lineHeight: text['4xlLeading'] },
+	remaining: { alignItems: 'stretch', gap: space[2], textAlign: 'center' },
+	unit: { alignItems: 'baseline', flexDirection: 'row', gap: space[1] },
+	units: {
+		columnGap: space[3],
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		justifyContent: 'center',
+		rowGap: space[1],
+	},
+})

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

@@ -0,0 +1,260 @@
+import { Flex, Text } from '@flickfyi/core'
+import { Input } from '@flickfyi/core/atoms'
+import { List } from '@flickfyi/core/molecules'
+import { Event as EventEntity } from '@flickfyi/schemas/event'
+import * as stylex from '@stylexjs/stylex'
+import { useState } from 'react'
+import { z } from 'zod/v4'
+
+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, resolveTimeZone } from '~/kowalski/format'
+import { FeatureAction, FeatureFacts, FeatureFrame, layout } from '~/kowalski/frame'
+import { space, text } from '~/themes/scale.stylex'
+import { roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiEvent'
+const defaultScope = 'private'
+
+export const EventData = EventEntity
+
+export type EventData = EventEntity
+
+export const EventProps = z.strictObject({
+	data: EventData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type EventProps = z.input<typeof EventProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const eventStoreSchema = store({
+	location: replacement(z.string().default('')),
+	startsAt: replacement(z.string().nullable().default(null)),
+	title: replacement(z.string().default('')),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: eventStoreSchema,
+})
+
+export function Event({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: EventProps) {
+	const schema = eventStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({
+			location: { value: data.location },
+			startsAt: { value: data.startsAt },
+			title: { value: data.title },
+		}),
+	})
+	const timeZone = resolveTimeZone(data.timeZone)
+	const [draft, setDraft] = useState<{
+		location: string
+		startsAt: string | null
+		title: string
+	}>({
+		location: '',
+		startsAt: data.startsAt ?? null,
+		title: '',
+	})
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const [editingDate, setEditingDate] = useState(false)
+	const editing = baseline !== null
+	const title = store.value.title.value.trim()
+		? store.value.title.value
+		: 'Untitled event'
+	const instant = parseInstant(store.value.startsAt.value)
+	const timeParts =
+		instant === null
+			? []
+			: format.formatters
+					.getDateTimeFormat(format.locale, {
+						fractionalSecondDigits: instant % 1000 === 0 ? undefined : 3,
+						hour: 'numeric',
+						hour12: true,
+						minute: '2-digit',
+						second: instant % 60_000 === 0 ? undefined : '2-digit',
+						timeZone,
+						timeZoneName: 'long',
+					})
+					.formatToParts(instant)
+	const validTitle = draft.title.trim().length > 0
+	const changed =
+		baseline &&
+		(draft.title !== baseline.title ||
+			draft.location !== baseline.location ||
+			draft.startsAt !== baseline.startsAt)
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="event"
+			title={title}
+			detail={
+				instant === null
+					? 'Date to be decided'
+					: format.formatters
+							.getDateTimeFormat(format.locale, {
+								day: 'numeric',
+								month: 'long',
+								timeZone,
+								weekday: 'long',
+							})
+							.format(instant)
+			}
+		>
+			{editing && !store.saving ? (
+				<Flex {...stylex.props(eventStyles.editor)}>
+					<Flex {...stylex.props(layout.field)}>
+						<Text {...stylex.props(roles.label, layout.fieldLabel)}>Title</Text>
+						<Input
+							placeholder="Title"
+							value={draft.title}
+							onChange={title => setDraft(current => ({ ...current, title }))}
+							style={[layout.input]}
+						/>
+						{!validTitle && (
+							<Text {...stylex.props(roles.muted)}>Add an event title.</Text>
+						)}
+					</Flex>
+					<FeatureDateTime
+						inline
+						clearable
+						component="event"
+						label="Start date & time"
+						onChange={startsAt => setDraft(current => ({ ...current, startsAt }))}
+						onEditingChange={setEditingDate}
+						ready={store.ready}
+						timeZone={timeZone}
+						value={draft.startsAt}
+					/>
+					<Flex {...stylex.props(layout.field)}>
+						<Flex {...stylex.props(eventStyles.fieldLabel)}>
+							<Text {...stylex.props(roles.label, layout.fieldLabel)}>Location</Text>
+							<Text {...stylex.props(roles.muted, eventStyles.optional)}>Optional</Text>
+						</Flex>
+						<Input
+							placeholder="Location"
+							value={draft.location}
+							onChange={location => setDraft(current => ({ ...current, location }))}
+							style={[layout.input]}
+						/>
+					</Flex>
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction component="event" onClick={() => setBaseline(null)}>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="event"
+							disabled={
+								editingDate || store.saving || !store.ready || !changed || !validTitle
+							}
+							onClick={() => {
+								if (editingDate || !baseline || !changed || !validTitle) {
+									return
+								}
+								store.set(
+									current => ({
+										...(draft.title !== baseline.title &&
+											draft.title !== current.title.value && {
+												title: { value: draft.title },
+											}),
+										...(draft.startsAt !== baseline.startsAt &&
+											draft.startsAt !== current.startsAt.value && {
+												startsAt: { value: draft.startsAt },
+											}),
+										...(draft.location !== baseline.location &&
+											draft.location !== current.location.value && {
+												location: { value: draft.location },
+											}),
+									}),
+									() => setBaseline(null)
+								)
+							}}
+							variant="primary"
+						>
+							Save changes
+						</FeatureAction>
+					</Flex>
+				</Flex>
+			) : (
+				<>
+					{store.saving ? (
+						<Text {...stylex.props(roles.muted)}>Saving changes…</Text>
+					) : !store.ready && !store.error ? (
+						<Text {...stylex.props(roles.muted)}>Loading event…</Text>
+					) : null}
+					<FeatureFacts>
+						<List.Item
+							label="Time"
+							trailing={
+								instant === null
+									? 'Not set'
+									: timeParts
+											.filter(part => part.type !== 'timeZoneName')
+											.map(part => part.value)
+											.join('')
+											.trim()
+							}
+						/>
+						<List.Item
+							label="Where"
+							trailing={
+								store.value.location.value.trim()
+									? store.value.location.value
+									: 'To be decided'
+							}
+						/>
+					</FeatureFacts>
+					{!editing && (
+						<FeatureAction
+							component="event"
+							disabled={!store.ready || store.saving}
+							icon="pencil"
+							onClick={() => {
+								const values = {
+									location: store.value.location.value,
+									startsAt: store.value.startsAt.value,
+									title: store.value.title.value,
+								}
+								setDraft(values)
+								setBaseline(values)
+							}}
+						>
+							Edit event
+						</FeatureAction>
+					)}
+				</>
+			)}
+		</FeatureFrame>
+	)
+}
+
+const eventStyles = /* @__PURE__ */ stylex.create({
+	editor: { gap: space[5] },
+	fieldLabel: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+	optional: { fontSize: text['xs'] },
+})

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

@@ -0,0 +1,257 @@
+import { Flex, Text } from '@flickfyi/core'
+import { Input } from '@flickfyi/core/atoms'
+import { Field } 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 { featureFields, replacement, store } from '~/kowalski/feature-schema'
+import { parseNumberInput, resolveCurrency } from '~/kowalski/format'
+import { FeatureAction, FeatureFrame, FeatureWell, layout } from '~/kowalski/frame'
+import { text } from '~/themes/scale.stylex'
+import { roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiExpense'
+const defaultScope = 'private'
+
+export const ExpenseData = /* @__PURE__ */ z
+	.strictObject({
+		amount: z.number().describe('The amount spent, e.g. 12.5.'),
+		category: z
+			.string()
+			.optional()
+			.describe('A short category, e.g. "Food". Omit for "Other".'),
+		currency: z
+			.string()
+			.optional()
+			.describe('A three-letter ISO currency code, e.g. "USD" or "EUR". Omit for "USD".'),
+		title: z.string().describe('A short heading.'),
+	})
+	.describe(
+		'Edit and retain one expense. No payments, bank connection, or exchange-rate lookup.'
+	)
+
+export type ExpenseData = z.infer<typeof ExpenseData>
+
+export const ExpenseProps = z.strictObject({
+	data: ExpenseData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type ExpenseProps = z.input<typeof ExpenseProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const expenseStoreSchema = store({
+	amount: z.number().default(0),
+	category: replacement(z.string().default('Other')),
+	title: replacement(z.string().default('')),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: expenseStoreSchema,
+})
+
+export function Expense({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: ExpenseProps) {
+	const schema = expenseStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({
+			amount: data.amount,
+			category: { value: data.category },
+			title: { value: data.title },
+		}),
+	})
+	const [draft, setDraft] = useState({ amount: '', category: '', title: '' })
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const editing = baseline !== null
+	const currency = resolveCurrency(data.currency)
+	const amount = parseNumberInput(draft.amount, currency)
+	const validAmount = amount >= 0
+	const validTitle = draft.title.trim().length > 0
+	const changed =
+		baseline !== null &&
+		(amount !== parseNumberInput(baseline.amount, currency) ||
+			draft.category !== baseline.category ||
+			draft.title !== baseline.title)
+	const formattedAmount = formatCurrency(store.value.amount, currency)
+	return (
+		<FeatureFrame
+			style={style}
+			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.'}
+						label={currency === 'USD' ? 'Amount' : `Amount (${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.',
+							},
+							{ key: 'category', label: 'Category', valid: true, validation: '' },
+						] 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
+							}
+							variant="primary"
+							onClick={() => {
+								if (
+									!baseline ||
+									!store.ready ||
+									store.saving ||
+									!changed ||
+									!validAmount ||
+									!validTitle
+								) {
+									return
+								}
+								store.set(
+									() => ({
+										...(amount !== parseNumberInput(baseline.amount, 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>
+	)
+}
+
+// Long amounts step down the display scale so they never overflow the well.
+const expenseStyles = /* @__PURE__ */ 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%',
+	}),
+})