@flickfyi/flkr 0.0.182 → 0.0.185

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

@@ -0,0 +1,298 @@
+import { Flex, Text } from '@flickfyi/core'
+import { Input } from '@flickfyi/core/atoms'
+import { List } from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { useState } from 'react'
+import { z } from 'zod/v4'
+
+import { useClock } from '~/hooks/use-clock'
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import { nextReminder, 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,
+	FeatureEdit,
+	FeatureFacts,
+	FeatureFrame,
+	layout,
+} from '~/kowalski/frame'
+import { space } from '~/themes/scale.stylex'
+import { roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiReminder'
+const defaultScope = 'private'
+
+export const ReminderData = /* @__PURE__ */ z
+	.strictObject({
+		dueAt: z
+			.string()
+			.optional()
+			.describe(
+				'When it is due, as ISO 8601 with an offset, e.g. "2026-11-01T09:00:00-07:00". Omit if no time was given.'
+			),
+		recurrence: z
+			.enum(['none', 'daily', 'weekly'])
+			.optional()
+			.describe('How it repeats. Omit for "none".'),
+		timeZone: z
+			.string()
+			.optional()
+			.describe(
+				'An IANA time zone, e.g. "America/New_York". Omit for the device’s time zone.'
+			),
+		title: z.string().describe('What to be reminded of.'),
+	})
+	.describe(
+		'Complete, reopen, and edit an in-app reminder. Does not schedule notifications.'
+	)
+
+export type ReminderData = z.infer<typeof ReminderData>
+
+export const ReminderProps = z.strictObject({
+	data: ReminderData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type ReminderProps = z.input<typeof ReminderProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const reminderStoreSchema = store({
+	completedAt: z.number().nullable().default(null),
+	dueAt: replacement(z.string().nullable().default(null)),
+	title: replacement(z.string().default('')),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: reminderStoreSchema,
+})
+
+export function Reminder({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: ReminderProps) {
+	const timeZone = resolveTimeZone(
+		data.timeZone,
+		Intl.DateTimeFormat().resolvedOptions().timeZone
+	)
+	const recurrence = data.recurrence ?? 'none'
+	const schema = reminderStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({ dueAt: { value: data.dueAt }, title: { value: data.title } }),
+	})
+	const [draft, setDraft] = useState<{ dueAt: string | null; title: string }>({
+		dueAt: data.dueAt ?? null,
+		title: data.title,
+	})
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const [editingDate, setEditingDate] = useState(false)
+	const editing = baseline !== null
+	const done = store.value.completedAt !== null
+	const due = parseInstant(store.value.dueAt.value)
+	const now = useClock(due !== null)
+	const title = store.value.title.value.trim()
+		? store.value.title.value
+		: 'Untitled reminder'
+	const dateFormat = format.formatters.getDateTimeFormat(format.locale, {
+		day: 'numeric',
+		month: 'long',
+		timeZone,
+		weekday: 'short',
+		year: 'numeric',
+	})
+	const timeFormat = format.formatters.getDateTimeFormat(format.locale, {
+		fractionalSecondDigits: due !== null && due % 1000 !== 0 ? 3 : undefined,
+		hour: 'numeric',
+		hour12: true,
+		minute: '2-digit',
+		second: due !== null && due % 60_000 !== 0 ? '2-digit' : undefined,
+		timeZone,
+	})
+	const dueStatus =
+		due === null
+			? 'No due date'
+			: done
+				? 'Due date'
+				: due < now
+					? 'Overdue'
+					: dateFormat.format(due) === dateFormat.format(now)
+						? 'Due today'
+						: 'Upcoming'
+	const next = done ? nextReminder(store.value.dueAt.value, recurrence, now) : null
+	const validTitle = draft.title.trim().length > 0
+	const changed =
+		baseline && (draft.title !== baseline.title || draft.dueAt !== baseline.dueAt)
+	const edit = () => {
+		const values = { dueAt: store.value.dueAt.value, title: store.value.title.value }
+		setDraft(values)
+		setBaseline(values)
+	}
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="reminder"
+			title={title}
+			detail={
+				store.value.completedAt === null
+					? undefined
+					: `Completed ${format.formatters
+							.getDateTimeFormat(format.locale, {
+								dateStyle: 'medium',
+								hour12: true,
+								timeStyle: 'short',
+								timeZone,
+							})
+							.format(store.value.completedAt)}`
+			}
+			trailing={
+				!editing && (
+					<FeatureEdit disabled={!store.ready} label="Edit reminder" onClick={edit} />
+				)
+			}
+		>
+			{editing && store.saving ? (
+				<Text {...stylex.props(roles.muted)}>Saving changes…</Text>
+			) : editing ? (
+				<Flex {...stylex.props(reminderStyles.editor)}>
+					<Flex {...stylex.props(layout.field)}>
+						<Text {...stylex.props(roles.label, layout.fieldLabel)}>Reminder</Text>
+						<Input
+							placeholder="Reminder"
+							value={draft.title}
+							onChange={title => setDraft(current => ({ ...current, title }))}
+							style={[layout.input]}
+						/>
+						{!validTitle && (
+							<Text {...stylex.props(roles.muted)}>Add a reminder title.</Text>
+						)}
+					</Flex>
+					<FeatureDateTime
+						inline
+						clearable
+						component="reminder"
+						label="Due date & time"
+						onChange={dueAt => setDraft(current => ({ ...current, dueAt }))}
+						onEditingChange={setEditingDate}
+						ready={store.ready}
+						timeZone={timeZone}
+						value={draft.dueAt}
+					/>
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction component="reminder" onClick={() => setBaseline(null)}>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="reminder"
+							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.dueAt !== baseline.dueAt &&
+											draft.dueAt !== current.dueAt.value && {
+												dueAt: { value: draft.dueAt },
+											}),
+									}),
+									() => setBaseline(null)
+								)
+							}}
+							variant="primary"
+						>
+							{store.saving ? 'Saving…' : 'Save changes'}
+						</FeatureAction>
+					</Flex>
+				</Flex>
+			) : (
+				<>
+					<FeatureFacts>
+						<List.Item
+							label={dueStatus}
+							trailing={due === null ? 'Not set' : dateFormat.format(due)}
+						/>
+						{due !== null && <List.Item label="Time" trailing={timeFormat.format(due)} />}
+						{recurrence !== 'none' && (
+							<List.Item
+								description={
+									due === null ? 'Add a due date to start repeating.' : undefined
+								}
+								label="Repeats"
+								trailing={recurrence === 'daily' ? 'Every 24 hours' : 'Every 7 days'}
+							/>
+						)}
+						{next && (
+							<List.Item
+								label="Next occurrence"
+								trailing={`${dateFormat.format(Date.parse(next))} · ${timeFormat.format(Date.parse(next))}`}
+							/>
+						)}
+					</FeatureFacts>
+					<Flex {...stylex.props(layout.actions)}>
+						{next && (
+							<FeatureAction
+								component="reminder"
+								disabled={!store.ready}
+								icon="arrow.right"
+								onClick={() =>
+									store.set(current => {
+										const dueAt = nextReminder(
+											current.dueAt.value,
+											recurrence,
+											Date.now()
+										)
+										return current.completedAt !== null && dueAt
+											? { completedAt: null, dueAt: { value: dueAt } }
+											: {}
+									})
+								}
+								variant="primary"
+							>
+								Start next reminder
+							</FeatureAction>
+						)}
+						<FeatureAction
+							component="reminder"
+							disabled={!store.ready}
+							icon={done ? 'arrow.uturn.backward' : 'checkmark'}
+							onClick={() =>
+								store.set(current => ({
+									completedAt: current.completedAt === null ? Date.now() : null,
+								}))
+							}
+							variant={next ? 'secondary' : 'primary'}
+						>
+							{done ? 'Reopen' : 'Complete'}
+						</FeatureAction>
+					</Flex>
+				</>
+			)}
+		</FeatureFrame>
+	)
+}
+
+const reminderStyles = /* @__PURE__ */ stylex.create({
+	editor: { gap: space[5] },
+})

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

@@ -0,0 +1,146 @@
+import { Flex, Text } from '@flickfyi/core'
+import { Field, List } from '@flickfyi/core/molecules'
+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 { everydayStyles } from '~/kowalski/everyday'
+import { featureFields, store } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import {
+	FeatureAction,
+	FeatureFacts,
+	FeatureFrame,
+	FeatureWell,
+	layout,
+} from '~/kowalski/frame'
+import { appearance, roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiRotation'
+const defaultScope = 'private'
+
+export const RotationData = /* @__PURE__ */ z
+	.strictObject({
+		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('Everyone taking turns, in order.'),
+		task: z.string().describe('The chore or turn, e.g. "Take out the trash".'),
+		title: z.string().optional().describe('A short heading. Omit for "Whose turn".'),
+	})
+	.describe('Take turns through a fixed group in order and pass the turn on when done.')
+
+export type RotationData = z.infer<typeof RotationData>
+
+export const RotationProps = z.strictObject({
+	data: RotationData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type RotationProps = z.input<typeof RotationProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const rotationStoreSchema = store({
+	completed: z.number().default(0),
+	turn: z.string().nullable().default(null),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: rotationStoreSchema,
+})
+
+export function Rotation({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: RotationProps) {
+	const people = data.people.length > 0 ? data.people : [{ id: 'you', label: 'You' }]
+	const schema = rotationStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	// A saved turn for someone no longer in the group falls back to the first person.
+	const position = (turn: string | null) =>
+		Math.max(
+			0,
+			people.findIndex(person => person.id === turn)
+		)
+	const current = people[position(store.value.turn)]
+	const pass = (completed: boolean) =>
+		store.set(state => ({
+			completed: state.completed + (completed ? 1 : 0),
+			turn: people[(position(state.turn) + 1) % people.length].id,
+		}))
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="rotation"
+			title={data.title ?? 'Whose turn'}
+			detail={data.task}
+		>
+			<Field
+				label={
+					store.value.completed > 0
+						? `Order · ${format.formatNumber(store.value.completed)} done so far`
+						: 'Order'
+				}
+			>
+				<FeatureFacts>
+					{people.map(person => (
+						<List.Item
+							key={person.id}
+							label={person.label}
+							trailing={
+								person.id === current.id ? (
+									<Text {...stylex.props(roles.muted, appearance.accent)}>Now</Text>
+								) : undefined
+							}
+						/>
+					))}
+				</FeatureFacts>
+			</Field>
+			<FeatureWell style={everydayStyles.centered}>
+				<Text {...stylex.props(roles.label, layout.fieldLabel)}>Up now</Text>
+				<Text {...stylex.props(roles.h1)}>{current.label}</Text>
+			</FeatureWell>
+			<Flex {...stylex.props(layout.actions)}>
+				<FeatureAction
+					component="rotation"
+					disabled={!store.ready}
+					size="lg"
+					onClick={() => pass(false)}
+				>
+					Skip
+				</FeatureAction>
+				<FeatureAction
+					component="rotation"
+					disabled={!store.ready}
+					icon="checkmark"
+					size="lg"
+					variant="primary"
+					onClick={() => pass(true)}
+				>
+					Done
+				</FeatureAction>
+			</Flex>
+		</FeatureFrame>
+	)
+}

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

@@ -0,0 +1,139 @@
+import { Text } from '@flickfyi/core'
+import { List, Stepper } from '@flickfyi/core/molecules'
+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 { everydayStyles } from '~/kowalski/everyday'
+import { entries, featureFields } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import { FeatureAction, FeatureFacts, FeatureFrame } from '~/kowalski/frame'
+import { appearance, roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiScoreboard'
+const defaultScope = 'private'
+
+export const ScoreboardData = /* @__PURE__ */ z
+	.strictObject({
+		players: z
+			.array(
+				z.strictObject({
+					id: z.string().describe('A short ID, unique within this list, e.g. "tent".'),
+					label: z.string().describe('A player or team name.'),
+				})
+			)
+			.describe('Everyone keeping score.'),
+		step: z.number().optional().describe('Points per tap. Omit for 1.'),
+		title: z.string().optional().describe('A short heading. Omit for "Scores".'),
+	})
+	.describe(
+		'Keep score for a few players with a fixed step. Not a distributed counter or a league.'
+	)
+
+export type ScoreboardData = z.infer<typeof ScoreboardData>
+
+export const ScoreboardProps = z.strictObject({
+	data: ScoreboardData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type ScoreboardProps = z.input<typeof ScoreboardProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const scoreboardStoreSchema = entries('score_', z.number(), {})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: scoreboardStoreSchema,
+})
+
+export function Scoreboard({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: ScoreboardProps) {
+	const players = data.players
+	const schema = scoreboardStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	const scoreOf = (id: string) => store.value[`score_${id}`] ?? 0
+	const best = Math.max(...players.map(player => scoreOf(player.id)))
+	const leaders = players.filter(player => scoreOf(player.id) === best)
+	const started = players.some(player => scoreOf(player.id) !== 0)
+	const change = (id: string, direction: -1 | 1) =>
+		store.set(current => ({
+			[`score_${id}`]: (current[`score_${id}`] ?? 0) + direction * (data.step ?? 1),
+		}))
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="scoreboard"
+			title={data.title ?? 'Scores'}
+			trailing={
+				<Text
+					{...stylex.props(
+						roles.muted,
+						started && leaders.length === 1 && appearance.accent
+					)}
+				>
+					{started
+						? leaders.length === 1
+							? `${leaders[0].label} leads`
+							: `Tied at ${format.formatNumber(best)}`
+						: 'No scores yet'}
+				</Text>
+			}
+		>
+			<FeatureFacts>
+				{players.map(player => (
+					<List.Item
+						key={player.id}
+						label={player.label}
+						trailing={
+							<Stepper
+								decrementDisabled={!store.ready}
+								decrementLabel={`Lower ${player.label}`}
+								incrementDisabled={!store.ready}
+								incrementLabel={`Raise ${player.label}`}
+								onDecrement={() => change(player.id, -1)}
+								onIncrement={() => change(player.id, 1)}
+							>
+								<Text {...stylex.props(roles.h2, everydayStyles.score)}>
+									{format.formatNumber(scoreOf(player.id))}
+								</Text>
+							</Stepper>
+						}
+					/>
+				))}
+			</FeatureFacts>
+			{started && (
+				<FeatureAction
+					component="scoreboard"
+					disabled={!store.ready}
+					icon="arrow.counterclockwise"
+					onClick={() =>
+						store.set(() =>
+							Object.fromEntries(players.map(player => [`score_${player.id}`, 0]))
+						)
+					}
+				>
+					New game
+				</FeatureAction>
+			)}
+		</FeatureFrame>
+	)
+}