@flickfyi/flkr 0.0.141 → 0.0.153

package/node_modules/@flickfyi/core/src/kowalski/clocks.tsx

@@ -0,0 +1,464 @@
+import { Flex, Text } from '@flickfyi/core'
+import * as stylex from '@stylexjs/stylex'
+import { DateTime, Duration } from 'luxon'
+import { useState } from 'react'
+
+import { space, text } from '~/themes/scale.stylex'
+import { appearance, roles } from '~/themes/shared'
+import { font } from '~/themes/tokens.stylex'
+
+import { elapsedSeconds } from './calculations'
+import { kowalskiCatalog, type KowalskiInput } from './catalog'
+import { FeatureDateTime } from './date-time'
+import { format } from './format'
+import {
+	FeatureAction,
+	FeatureFrame,
+	FeatureProgress,
+	FeatureWell,
+	layout,
+} from './frame'
+import { useClock } from './use-clock'
+import { useConfiguredFeature } from './use-configured-feature'
+
+export function Timer(input: KowalskiInput<'timer'>) {
+	const props = kowalskiCatalog.timer.props.parse(input)
+	const schema = kowalskiCatalog.timer.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiTimer',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({}),
+	})
+	const stopwatch = props.mode === 'stopwatch'
+	const complete =
+		!stopwatch && elapsedSeconds(store.value, Date.now()) >= props.durationSeconds
+	const now = useClock(store.value.startedAt !== null && !complete)
+	const elapsed = complete ? props.durationSeconds : elapsedSeconds(store.value, now)
+	const remaining = Math.max(0, props.durationSeconds - elapsed)
+	const running = store.value.startedAt !== null && !complete
+	const clockSeconds = stopwatch ? Math.floor(elapsed) : Math.ceil(remaining)
+	const showHours = (stopwatch ? clockSeconds : props.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 =
+		props.mode === 'focus'
+			? 'Focus session'
+			: props.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
+			onRetry={store.retry}
+			notice={store.error}
+			component="timer"
+			title={props.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 / props.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(props.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>
+	)
+}
+
+export function Countdown(input: KowalskiInput<'countdown'>) {
+	const props = kowalskiCatalog.countdown.props.parse(input)
+	const schema = kowalskiCatalog.countdown.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiCountdown',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({ target: { value: props.target } }),
+	})
+	const now = useClock()
+	const target = store.value.target.value
+		? Date.parse(store.value.target.value)
+		: undefined
+	const seconds = target === undefined ? 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
+			onRetry={store.retry}
+			notice={store.error}
+			component="countdown"
+			title={props.title}
+		>
+			<FeatureWell style={countdownStyles.remaining}>
+				<Text
+					animated={seconds > 0 ? 'numeric' : undefined}
+					{...stylex.props(
+						roles.display,
+						countdownStyles.amount(amount.length),
+						seconds === 0 && countdownStyles.arrived
+					)}
+				>
+					{target === undefined ? '—' : seconds === 0 ? 'It’s time' : amount}
+				</Text>
+				<Text {...stylex.props(roles.muted)}>
+					{target === undefined
+						? '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={props.timeZone}
+				value={store.value.target.value || null}
+				onChange={(target, onSaved) =>
+					target === null
+						? false
+						: store.set(() => ({ target: { value: target } }), onSaved)
+				}
+			/>
+		</FeatureFrame>
+	)
+}
+
+export function TimeZone(input: KowalskiInput<'timeZone'>) {
+	const props = kowalskiCatalog.timeZone.props.parse(input)
+	const schema = kowalskiCatalog.timeZone.storeSchema
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiTimeZone',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({ at: { value: props.at } }),
+	})
+	const [editing, setEditing] = useState(false)
+	const live = store.value.at.value === null
+	const now = useClock(live)
+	const instant = store.value.at.value ? Date.parse(store.value.at.value) : now
+	const referenceZone = props.zones[0]
+	const referenceCity = referenceZone.split('/').at(-1)?.replaceAll('_', ' ')
+	const reference = DateTime.fromMillis(instant, { locale: 'en', zone: referenceZone })
+	const referenceDate = DateTime.utc(reference.year, reference.month, reference.day)
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="timeZone"
+			title={props.title}
+			detail={`Times relative to ${referenceCity}`}
+			trailing={
+				<Text {...stylex.props(roles.muted, live && appearance.accent)}>
+					{store.saving
+						? 'Saving…'
+						: !store.ready && !store.error
+							? 'Loading…'
+							: live
+								? 'Live'
+								: 'Fixed time'}
+				</Text>
+			}
+		>
+			<Flex {...stylex.props(timeZoneStyles.clocks)}>
+				{props.zones.map((zone, index) => {
+					const local = reference.setZone(zone)
+					const days = DateTime.utc(local.year, local.month, local.day).diff(
+						referenceDate,
+						'days'
+					).days
+					const minutes = local.offset - reference.offset
+					const difference = format.formatDuration(
+						Duration.fromObject({ minutes: Math.abs(minutes) })
+							.shiftTo('hours', 'minutes', 'seconds')
+							.toObject(),
+						{ style: 'long' }
+					)
+					const clockParts = format.formatTimeToParts(instant, {
+						fractionalSecondDigits: !live && local.millisecond !== 0 ? 3 : undefined,
+						hour: 'numeric',
+						hour12: true,
+						minute: '2-digit',
+						second:
+							!live && (local.second !== 0 || local.millisecond !== 0)
+								? '2-digit'
+								: undefined,
+						timeZone: zone,
+					})
+					const clock = clockParts
+						.filter(part => part.type !== 'dayPeriod')
+						.map(part => part.value)
+						.join('')
+						.trim()
+					return (
+						<FeatureWell key={`${zone}:${index}`}>
+							<Flex {...stylex.props(timeZoneStyles.zoneRow)}>
+								<Flex {...stylex.props(timeZoneStyles.city)}>
+									<Text {...stylex.props(roles.h2)}>
+										{zone.split('/').at(-1)?.replaceAll('_', ' ')}
+									</Text>
+									<Text {...stylex.props(roles.muted)}>
+										{index === 0
+											? 'Reference'
+											: minutes === 0
+												? 'Same time'
+												: `${difference} ${minutes > 0 ? 'ahead' : 'behind'}`}
+									</Text>
+									{days !== 0 && (
+										<Text {...stylex.props(roles.muted, appearance.accent)}>
+											{days === 1
+												? 'Next day'
+												: days === -1
+													? 'Previous day'
+													: `${format.formatNumber(Math.abs(days))} days ${days > 0 ? 'ahead' : 'behind'}`}
+										</Text>
+									)}
+								</Flex>
+								<Flex {...stylex.props(timeZoneStyles.local)}>
+									<Flex {...stylex.props(timeZoneStyles.time)}>
+										<Text
+											animated={live ? 'numeric' : undefined}
+											{...stylex.props(
+												roles.display,
+												timeZoneStyles.digits(clock.length)
+											)}
+										>
+											{clock}
+										</Text>
+										<Text {...stylex.props(roles.muted, timeZoneStyles.period)}>
+											{clockParts.find(part => part.type === 'dayPeriod')?.value}
+										</Text>
+									</Flex>
+									<Text {...stylex.props(roles.muted)}>
+										{format.formatDate(instant, {
+											day: 'numeric',
+											...(local.year <= 0 ? { era: 'short', year: 'numeric' } : {}),
+											month: 'short',
+											weekday: 'short',
+											timeZone: zone,
+										})}
+									</Text>
+								</Flex>
+							</Flex>
+						</FeatureWell>
+					)
+				})}
+			</Flex>
+			<FeatureDateTime
+				actionLabel="Compare another time"
+				compact
+				component="timeZone"
+				label={`Comparison time · ${referenceCity}`}
+				ready={store.ready}
+				saving={store.saving}
+				submitLabel="Compare this time"
+				timeZone={referenceZone}
+				value={store.value.at.value}
+				onChange={(at, onSaved) => store.set(() => ({ at: { value: at } }), onSaved)}
+				onEditingChange={setEditing}
+			/>
+			{!live && (
+				<FeatureAction
+					component="timeZone"
+					icon="clock"
+					disabled={!store.ready || store.saving || editing}
+					onClick={() => store.set(() => ({ at: { value: null } }))}
+				>
+					Return to live
+				</FeatureAction>
+			)}
+			{!live && editing && !store.saving && (
+				<Text {...stylex.props(roles.muted)}>
+					Save or cancel your comparison before returning to live.
+				</Text>
+			)}
+		</FeatureFrame>
+	)
+}
+
+// Long readings step down the display scale so they never overflow their well.
+const timeZoneStyles = stylex.create({
+	city: { flexBasis: space[24], flexGrow: 1, gap: space[1], minWidth: 0 },
+	clocks: { gap: space[2] },
+	digits: (length: number) => ({
+		fontSize: length > 8 ? text['2xl'] : length > 5 ? text['3xl'] : text['4xl'],
+		lineHeight:
+			length > 8
+				? text['2xlLeading']
+				: length > 5
+					? text['3xlLeading']
+					: text['4xlLeading'],
+	}),
+	local: { alignItems: 'flex-end', flexGrow: 1, gap: space[1], textAlign: 'right' },
+	period: { marginBottom: space[1] },
+	time: { alignItems: 'flex-end', flexDirection: 'row', gap: space[1.5] },
+	zoneRow: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[3],
+	},
+})
+
+const timerStyles = 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 },
+})
+
+const countdownStyles = 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],
+	},
+})