@flickfyi/flkr 0.0.182 → 0.0.185

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

@@ -0,0 +1,225 @@
+import { Flex, Text } from '@flickfyi/core'
+import * as stylex from '@stylexjs/stylex'
+import { Duration } from 'luxon'
+import { z } from 'zod/v4'
+
+import { useClock } from '~/hooks/use-clock'
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import { elapsedSeconds } from '~/kowalski/calculations'
+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 = 'KowalskiTimer'
+const defaultScope = 'private'
+
+export const TimerData = /* @__PURE__ */ z
+	.strictObject({
+		durationSeconds: z
+			.number()
+			.optional()
+			.describe('Countdown length in seconds, e.g. 1500 for 25 minutes. Omit for 300.'),
+		mode: z
+			.enum(['countdown', 'focus', 'break', 'stopwatch'])
+			.optional()
+			.describe('Omit for "countdown".'),
+		title: z.string().optional().describe('A short heading. Omit for "Timer".'),
+	})
+	.describe(
+		'Countdown, focus, break, or stopwatch. Start, pause, resume, reset; no background alarm.'
+	)
+
+export type TimerData = z.infer<typeof TimerData>
+
+export const TimerProps = z.strictObject({
+	data: TimerData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type TimerProps = z.input<typeof TimerProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const timerStoreSchema = store({
+	elapsedSeconds: z.number().default(0),
+	startedAt: z.number().nullable().default(null),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: timerStoreSchema,
+})
+
+export function Timer({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: TimerProps) {
+	const schema = timerStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({}),
+	})
+	const { durationSeconds = 300, mode = 'countdown', title = 'Timer' } = data
+	const stopwatch = mode === 'stopwatch'
+	const complete =
+		!stopwatch && elapsedSeconds(store.value, Date.now()) >= durationSeconds
+	const now = useClock(store.value.startedAt !== null && !complete)
+	const elapsed = complete ? durationSeconds : elapsedSeconds(store.value, now)
+	const remaining = Math.max(0, durationSeconds - elapsed)
+	const running = store.value.startedAt !== null && !complete
+	const clockSeconds = stopwatch ? Math.floor(elapsed) : Math.ceil(remaining)
+	const showHours = (stopwatch ? clockSeconds : durationSeconds) >= 3600
+	// Older JavaScriptCore versions misplace separators when Intl hides zero hours.
+	const clockParts = format.formatDurationToParts(
+		Duration.fromObject({ seconds: clockSeconds })
+			.shiftTo('hours', 'minutes', 'seconds')
+			.toObject(),
+		{
+			hours: '2-digit',
+			hoursDisplay: 'always',
+			minutes: '2-digit',
+			minutesDisplay: 'always',
+			seconds: '2-digit',
+			secondsDisplay: 'always',
+			style: 'digital',
+		}
+	)
+	const clock = clockParts
+		.slice(showHours ? 0 : clockParts.findIndex(part => part.unit === 'minute'))
+		.map(part => part.value)
+		.join('')
+	const modeLabel =
+		mode === 'focus'
+			? 'Focus session'
+			: mode === 'break'
+				? 'Break time'
+				: stopwatch
+					? 'Stopwatch'
+					: 'Countdown timer'
+	const status = store.saving
+		? 'Saving…'
+		: !store.ready && !store.error
+			? 'Loading…'
+			: complete
+				? 'Complete'
+				: running
+					? 'Running'
+					: elapsed > 0
+						? 'Paused'
+						: 'Ready'
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="timer"
+			title={title}
+			detail={modeLabel}
+			trailing={
+				<Text {...stylex.props(roles.muted, (running || complete) && appearance.accent)}>
+					{status}
+				</Text>
+			}
+		>
+			<FeatureWell style={timerStyles.clock}>
+				<Text
+					animated={running ? 'numeric' : undefined}
+					{...stylex.props(roles.display, timerStyles.digits(clock.length))}
+				>
+					{clock}
+				</Text>
+				<Text {...stylex.props(roles.muted)}>
+					{complete ? 'Time’s up' : stopwatch ? 'Time elapsed' : 'Time remaining'}
+				</Text>
+				{!stopwatch && (
+					<FeatureProgress component="timer" value={elapsed / durationSeconds} />
+				)}
+			</FeatureWell>
+			<Flex {...stylex.props(layout.actions)}>
+				<Flex {...stylex.props(timerStyles.primary)}>
+					<FeatureAction
+						component="timer"
+						icon={complete ? 'arrow.counterclockwise' : running ? 'pause' : 'play'}
+						variant="primary"
+						disabled={!store.ready}
+						onClick={() =>
+							store.set(current => {
+								const instant = Date.now()
+								if (complete) {
+									return { elapsedSeconds: 0, startedAt: instant }
+								}
+								const currentElapsed = elapsedSeconds(current, instant)
+								return current.startedAt === null
+									? { startedAt: instant }
+									: {
+											elapsedSeconds: stopwatch
+												? currentElapsed
+												: Math.min(durationSeconds, currentElapsed),
+											startedAt: null,
+										}
+							})
+						}
+					>
+						{complete
+							? 'Start again'
+							: running
+								? 'Pause'
+								: elapsed > 0
+									? 'Resume'
+									: 'Start'}
+					</FeatureAction>
+				</Flex>
+				<FeatureAction
+					component="timer"
+					variant="quiet"
+					disabled={!store.ready || (elapsed === 0 && store.value.startedAt === null)}
+					onClick={() => store.set(() => ({ elapsedSeconds: 0, startedAt: null }))}
+				>
+					Reset
+				</FeatureAction>
+			</Flex>
+		</FeatureFrame>
+	)
+}
+
+const timerStyles = /* @__PURE__ */ stylex.create({
+	clock: { alignItems: 'stretch', gap: space[3], textAlign: 'center' },
+	digits: (length: number) => ({
+		fontSize:
+			length > 11
+				? text['3xl']
+				: length > 8
+					? text['4xl']
+					: length > 5
+						? text['5xl']
+						: font.displaySize,
+		lineHeight:
+			length > 11
+				? text['3xlLeading']
+				: length > 8
+					? text['4xlLeading']
+					: length > 5
+						? text['5xlLeading']
+						: font.displayLeading,
+	}),
+	primary: { flexBasis: 0, flexGrow: 1, minWidth: 0 },
+})

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

@@ -0,0 +1,338 @@
+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 { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import { parseInstant } from '~/kowalski/calculations'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { FeatureDate } from '~/kowalski/date-time'
+import { featureFields, replacement, store } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import { FeatureAction, FeatureFacts, FeatureFrame, layout } from '~/kowalski/frame'
+import { space } from '~/themes/scale.stylex'
+import { roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiTrip'
+const defaultScope = 'private'
+
+export const TripData = /* @__PURE__ */ z
+	.strictObject({
+		destination: z.string().describe('Where the trip goes.'),
+		endDate: z
+			.string()
+			.optional()
+			.describe('The last day as YYYY-MM-DD. Omit if unknown.'),
+		origin: z.string().describe('Where the trip starts.'),
+		startDate: z
+			.string()
+			.optional()
+			.describe('The first day as YYYY-MM-DD. Omit if unknown.'),
+		title: z.string().optional().describe('A short heading. Omit for "Trip".'),
+		transport: z
+			.enum(['car', 'train', 'plane', 'walk', 'other'])
+			.optional()
+			.describe('How the trip is made. Omit for "other".'),
+	})
+	.describe('Edit and retain trip details. No bookings or itinerary retrieval.')
+
+export type TripData = z.infer<typeof TripData>
+
+export const TripProps = z.strictObject({
+	data: TripData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type TripProps = z.input<typeof TripProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const tripStoreSchema = store({
+	destination: replacement(z.string().default('')),
+	endDate: replacement(z.string().nullable().default(null)),
+	origin: replacement(z.string().default('')),
+	startDate: replacement(z.string().nullable().default(null)),
+}).refine(
+	value =>
+		!value.startDate.value ||
+		!value.endDate.value ||
+		value.endDate.value >= value.startDate.value,
+	'The trip cannot end before it starts.'
+)
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: tripStoreSchema,
+})
+
+export function Trip({ data, id, revision = 0, scope = defaultScope, style }: TripProps) {
+	const schema = tripStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({
+			destination: { value: data.destination },
+			endDate: { value: data.endDate },
+			origin: { value: data.origin },
+			startDate: { value: data.startDate },
+		}),
+	})
+	const [draft, setDraft] = useState<{
+		destination: string
+		endDate: string | null
+		origin: string
+		startDate: string | null
+	}>({
+		destination: data.destination,
+		endDate: data.endDate ?? null,
+		origin: data.origin,
+		startDate: data.startDate ?? null,
+	})
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const [editingEndDate, setEditingEndDate] = useState(false)
+	const [editingStartDate, setEditingStartDate] = useState(false)
+	const [saveError, setSaveError] = useState(false)
+	const editing = baseline !== null
+	const transport = {
+		car: { icon: 'car.fill', label: 'By car' },
+		other: { icon: 'suitcase.fill', label: 'Travel plans' },
+		plane: { icon: 'airplane', label: 'By plane' },
+		train: { icon: 'tram.fill', label: 'By train' },
+		walk: { icon: 'figure.walk', label: 'On foot' },
+	}[data.transport ?? 'other']
+	const start = store.value.startDate.value
+	const end = store.value.endDate.value
+	const dateFormat = format.formatters.getDateTimeFormat(format.locale, {
+		day: 'numeric',
+		era: start?.startsWith('0000-') || end?.startsWith('0000-') ? 'short' : undefined,
+		month: 'short',
+		timeZone: 'UTC',
+		year: 'numeric',
+	})
+	const startInstant = parseInstant(start && `${start}T12:00:00Z`)
+	const endInstant = parseInstant(end && `${end}T12:00:00Z`)
+	const nights =
+		startInstant !== null && endInstant !== null
+			? Math.round((endInstant - startInstant) / 86_400_000)
+			: null
+	const dates =
+		startInstant !== null && endInstant !== null
+			? start === end
+				? dateFormat.format(startInstant)
+				: `${dateFormat.format(startInstant)} – ${dateFormat.format(endInstant)}`
+			: startInstant === null
+				? endInstant === null
+					? 'Dates open'
+					: `Until ${dateFormat.format(endInstant)}`
+				: `From ${dateFormat.format(startInstant)}`
+	const duration =
+		nights === null
+			? start
+				? 'End date to be decided'
+				: end
+					? 'Start date to be decided'
+					: 'Set dates when you’re ready'
+			: nights === 0
+				? 'Day trip'
+				: format.formatMessage(
+						{
+							defaultMessage:
+								'{days, number} days · {nights, plural, one {# night} other {# nights}}',
+							id: 'kowalski.trip.duration',
+						},
+						{ days: nights + 1, nights }
+					)
+	const changed =
+		baseline &&
+		(draft.destination !== baseline.destination ||
+			draft.endDate !== baseline.endDate ||
+			draft.origin !== baseline.origin ||
+			draft.startDate !== baseline.startDate)
+	const nextStart =
+		baseline && draft.startDate !== baseline.startDate ? draft.startDate : start
+	const nextEnd = baseline && draft.endDate !== baseline.endDate ? draft.endDate : end
+	const validDates = !nextStart || !nextEnd || nextStart <= nextEnd
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="trip"
+			title={data.title ?? 'Trip'}
+			detail={transport.label}
+		>
+			{editing && store.saving ? (
+				<Text {...stylex.props(roles.muted)}>Saving changes…</Text>
+			) : editing ? (
+				<Flex {...stylex.props(tripStyles.editor)}>
+					<Flex {...stylex.props(layout.field)}>
+						<Text {...stylex.props(roles.label, layout.fieldLabel)}>From</Text>
+						<Input
+							placeholder="From"
+							value={draft.origin}
+							onChange={origin => setDraft(current => ({ ...current, origin }))}
+							style={[layout.input]}
+						/>
+					</Flex>
+					<Flex {...stylex.props(layout.field)}>
+						<Text {...stylex.props(roles.label, layout.fieldLabel)}>To</Text>
+						<Input
+							placeholder="To"
+							value={draft.destination}
+							onChange={destination => setDraft(current => ({ ...current, destination }))}
+							style={[layout.input]}
+						/>
+					</Flex>
+					<FeatureDate
+						inline
+						clearable
+						component="trip"
+						label="Start date"
+						onChange={startDate => {
+							setDraft(current => ({ ...current, startDate }))
+							setSaveError(false)
+						}}
+						onEditingChange={setEditingStartDate}
+						ready={store.ready}
+						value={draft.startDate}
+					/>
+					<FeatureDate
+						inline
+						clearable
+						component="trip"
+						label="End date"
+						onChange={endDate => {
+							setDraft(current => ({ ...current, endDate }))
+							setSaveError(false)
+						}}
+						onEditingChange={setEditingEndDate}
+						ready={store.ready}
+						value={draft.endDate}
+					/>
+					{(!validDates || saveError) && (
+						<Text {...stylex.props(roles.muted)}>
+							The trip cannot end before it starts. Adjust either date before saving.
+						</Text>
+					)}
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction
+							component="trip"
+							onClick={() => {
+								setBaseline(null)
+								setEditingEndDate(false)
+								setEditingStartDate(false)
+							}}
+						>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="trip"
+							disabled={
+								store.saving ||
+								!store.ready ||
+								editingEndDate ||
+								editingStartDate ||
+								!changed ||
+								!validDates
+							}
+							onClick={() => {
+								if (
+									store.saving ||
+									!store.ready ||
+									editingEndDate ||
+									editingStartDate ||
+									!baseline ||
+									!changed ||
+									!validDates
+								) {
+									return
+								}
+								try {
+									store.set(
+										current => ({
+											...(draft.destination !== baseline.destination &&
+												draft.destination !== current.destination.value && {
+													destination: { value: draft.destination },
+												}),
+											...(draft.endDate !== baseline.endDate &&
+												draft.endDate !== current.endDate.value && {
+													endDate: { value: draft.endDate },
+												}),
+											...(draft.origin !== baseline.origin &&
+												draft.origin !== current.origin.value && {
+													origin: { value: draft.origin },
+												}),
+											...(draft.startDate !== baseline.startDate &&
+												draft.startDate !== current.startDate.value && {
+													startDate: { value: draft.startDate },
+												}),
+										}),
+										() => setBaseline(null)
+									)
+								} catch {
+									setSaveError(true)
+								}
+							}}
+							variant="primary"
+						>
+							{store.saving ? 'Saving…' : 'Save changes'}
+						</FeatureAction>
+					</Flex>
+				</Flex>
+			) : (
+				<>
+					<FeatureFacts>
+						<List.Item
+							label="From"
+							trailing={
+								store.value.origin.value.trim()
+									? store.value.origin.value
+									: 'To be decided'
+							}
+						/>
+						<List.Item
+							label="To"
+							trailing={
+								store.value.destination.value.trim()
+									? store.value.destination.value
+									: 'To be decided'
+							}
+						/>
+						<List.Item description={duration} label="Dates" trailing={dates} />
+					</FeatureFacts>
+					{!editing && (
+						<FeatureAction
+							component="trip"
+							disabled={!store.ready || store.saving}
+							icon="pencil"
+							onClick={() => {
+								const values = {
+									destination: store.value.destination.value,
+									endDate: store.value.endDate.value,
+									origin: store.value.origin.value,
+									startDate: store.value.startDate.value,
+								}
+								setDraft(values)
+								setBaseline(values)
+								setSaveError(false)
+							}}
+						>
+							Edit trip
+						</FeatureAction>
+					)}
+				</>
+			)}
+		</FeatureFrame>
+	)
+}
+
+const tripStyles = /* @__PURE__ */ stylex.create({
+	editor: { gap: space[5] },
+})