@flickfyi/flkr 0.0.182 → 0.0.185

package/node_modules/@flickfyi/core/src/kowalski/components/unit-converter.tsx

@@ -0,0 +1,285 @@
+import { Text } from '@flickfyi/core'
+import { Input, Picker } from '@flickfyi/core/atoms'
+import { Field, Segmented } from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { useEffect, useState } from 'react'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import { convertUnit, unitDefinitions } from '~/kowalski/calculations'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { featureFields, replacement, store } from '~/kowalski/feature-schema'
+import { format, parseNumberInput } from '~/kowalski/format'
+import { FeatureAction, FeatureFrame, FeatureWell, layout } from '~/kowalski/frame'
+import { roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiUnitConverter'
+const defaultScope = 'private'
+
+export const UnitConverterData = /* @__PURE__ */ z
+	.strictObject({
+		from: z
+			.enum(['m', 'km', 'mi', 'ft', 'kg', 'g', 'lb', 'c', 'f', 'k'])
+			.describe('The unit to convert from.'),
+		title: z.string().optional().describe('A short heading. Omit for "Convert".'),
+		to: z
+			.enum(['m', 'km', 'mi', 'ft', 'kg', 'g', 'lb', 'c', 'f', 'k'])
+			.describe('The unit to convert to; it must measure the same thing.'),
+		value: z.number().describe('The amount to convert.'),
+	})
+	.describe('Convert compatible length, mass, or temperature units deterministically.')
+
+export type UnitConverterData = z.infer<typeof UnitConverterData>
+
+export const UnitConverterProps = z.strictObject({
+	data: UnitConverterData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type UnitConverterProps = z.input<typeof UnitConverterProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const unitConverterStoreSchema = store({
+	from: replacement(UnitConverterData.shape.from.default('km')),
+	to: replacement(UnitConverterData.shape.from.default('mi')),
+	value: z.number().default(0),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: unitConverterStoreSchema,
+})
+
+export function UnitConverter({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: UnitConverterProps) {
+	const schema = unitConverterStoreSchema
+	// Authored units are unvalidated; seed a known pair that measures the same dimension.
+	const from = Object.hasOwn(unitDefinitions, data.from) ? data.from : 'km'
+	const to =
+		Object.hasOwn(unitDefinitions, data.to) &&
+		unitDefinitions[data.to].dimension === unitDefinitions[from].dimension
+			? data.to
+			: ((Object.keys(unitDefinitions) as (keyof typeof unitDefinitions)[]).find(
+					unit =>
+						unit !== from &&
+						unitDefinitions[unit].dimension === unitDefinitions[from].dimension
+				) ?? from)
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({ from: { value: from }, to: { value: to }, value: data.value }),
+	})
+	const units = [
+		{ label: 'Meters', value: 'm' },
+		{ label: 'Kilometers', value: 'km' },
+		{ label: 'Miles', value: 'mi' },
+		{ label: 'Feet', value: 'ft' },
+		{ label: 'Kilograms', value: 'kg' },
+		{ label: 'Grams', value: 'g' },
+		{ label: 'Pounds', value: 'lb' },
+		{ label: 'Celsius', value: 'c' },
+		{ label: 'Fahrenheit', value: 'f' },
+		{ label: 'Kelvin', value: 'k' },
+	] satisfies {
+		label: string
+		value: keyof typeof unitDefinitions
+	}[]
+	const groups = [
+		{ from: 'm', label: 'Length', to: 'ft' },
+		{ from: 'kg', label: 'Weight', to: 'lb' },
+		{ from: 'c', label: 'Temperature', to: 'f' },
+	] satisfies {
+		from: keyof typeof unitDefinitions
+		label: string
+		to: keyof typeof unitDefinitions
+	}[]
+	const dimension = unitDefinitions[store.value.from.value].dimension
+	const compatibleUnits = units.filter(
+		unit => unitDefinitions[unit.value].dimension === dimension
+	)
+	const fromUnit = units.find(unit => unit.value === store.value.from.value)
+	const toUnit = units.find(unit => unit.value === store.value.to.value)
+	const storedValue = format.formatNumber(store.value.value, { format: 'decimal' })
+	const [draft, setDraft] = useState(storedValue)
+	const [preserveDraft, setPreserveDraft] = useState<string>()
+	useEffect(() => {
+		if (store.error && store.ready) {
+			setPreserveDraft(current => current ?? draft)
+			return
+		}
+		if (preserveDraft !== undefined) {
+			return
+		}
+		setDraft(current =>
+			parseNumberInput(current) === store.value.value ? current : storedValue
+		)
+	}, [draft, preserveDraft, store.error, store.ready, store.value.value, storedValue])
+	const valid = Number.isFinite(parseNumberInput(draft))
+	const result = convertUnit(
+		valid ? parseNumberInput(draft) : store.value.value,
+		store.value.from.value,
+		store.value.to.value
+	)
+	// Four significant digits below one, three decimals above: 6.214 mi, not 6.2137119.
+	const formattedResult = valid
+		? Number.isFinite(result)
+			? format.formatNumber(result, {
+					notation:
+						Math.abs(result) >= 1e9 || (result !== 0 && Math.abs(result) < 1e-6)
+							? 'scientific'
+							: 'standard',
+					...(Math.abs(result) < 1
+						? { maximumSignificantDigits: 4 }
+						: { maximumFractionDigits: 3 }),
+				})
+			: 'Out of range'
+		: '—'
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="unitConverter"
+			title={data.title ?? 'Convert'}
+		>
+			<Segmented
+				disabled={!store.ready}
+				options={groups.map(group => ({ label: group.label, value: group.label }))}
+				value={
+					groups.find(group => unitDefinitions[group.from].dimension === dimension)?.label
+				}
+				onChange={label => {
+					const group = groups.find(option => option.label === label)
+					if (!group) {
+						return
+					}
+					store.set(current =>
+						unitDefinitions[current.from.value].dimension ===
+						unitDefinitions[group.from].dimension
+							? {}
+							: { from: { value: group.from }, to: { value: group.to } }
+					)
+				}}
+			/>
+			<Field error={!valid && 'Enter a valid number.'} label="From">
+				{store.ready ? (
+					<Input
+						placeholder="Value"
+						value={draft}
+						onChange={text => {
+							setDraft(text)
+							setPreserveDraft(text)
+							if (Number.isFinite(parseNumberInput(text))) {
+								store.set(
+									() => ({ value: parseNumberInput(text) }),
+									() =>
+										setPreserveDraft(current => (current === text ? undefined : current))
+								)
+							}
+						}}
+						style={[layout.input]}
+					/>
+				) : (
+					<Text {...stylex.props(roles.text)}>{draft}</Text>
+				)}
+				{store.ready ? (
+					<Picker
+						label="From unit"
+						value={fromUnit?.label}
+						onChange={label => {
+							store.set(current => {
+								const unit = units.find(option => option.label === label)
+								return unit &&
+									unitDefinitions[unit.value].dimension ===
+										unitDefinitions[current.to.value].dimension
+									? { from: { value: unit.value } }
+									: {}
+							})
+						}}
+						style={layout.input}
+					>
+						{compatibleUnits.map(unit => (
+							<Text key={unit.value} value={unit.label}>
+								{unit.label}
+							</Text>
+						))}
+					</Picker>
+				) : (
+					<Text {...stylex.props(roles.text)}>{fromUnit?.label}</Text>
+				)}
+				{store.saving && <Text {...stylex.props(roles.muted)}>Saving changes…</Text>}
+				{preserveDraft !== undefined &&
+					store.ready &&
+					valid &&
+					parseNumberInput(draft) !== store.value.value && (
+						<FeatureAction
+							component="unitConverter"
+							disabled={store.saving}
+							onClick={() =>
+								store.set(
+									() => ({ value: parseNumberInput(draft) }),
+									() =>
+										setPreserveDraft(current => (current === draft ? undefined : current))
+								)
+							}
+						>
+							Retry saving value
+						</FeatureAction>
+					)}
+			</Field>
+			<FeatureWell>
+				<Text {...stylex.props(roles.h1, unitStyles.result)}>{formattedResult}</Text>
+				{store.ready ? (
+					<Picker
+						label="To unit"
+						value={toUnit?.label}
+						onChange={label => {
+							store.set(current => {
+								const unit = units.find(option => option.label === label)
+								return unit &&
+									unitDefinitions[unit.value].dimension ===
+										unitDefinitions[current.from.value].dimension
+									? { to: { value: unit.value } }
+									: {}
+							})
+						}}
+						style={layout.input}
+					>
+						{compatibleUnits.map(unit => (
+							<Text key={unit.value} value={unit.label}>
+								{unit.label}
+							</Text>
+						))}
+					</Picker>
+				) : (
+					<Text {...stylex.props(roles.text)}>{toUnit?.label}</Text>
+				)}
+			</FeatureWell>
+			<FeatureAction
+				component="unitConverter"
+				icon="arrow.left.arrow.right"
+				disabled={!store.ready}
+				onClick={() => {
+					store.set(current => ({ from: current.to, to: current.from }))
+				}}
+			>
+				Swap units
+			</FeatureAction>
+		</FeatureFrame>
+	)
+}
+
+const unitStyles = /* @__PURE__ */ stylex.create({
+	result: { minWidth: 0 },
+})

package/node_modules/@flickfyi/core/src/kowalski/create-schemas.ts

@@ -0,0 +1,8 @@
+import type { z } from 'zod/v4'
+
+export type CreateSchemasInput = {
+	id?: string
+	scope?: 'private' | 'public'
+}
+
+export type CreateSchemas = (input?: CreateSchemasInput) => Record<string, z.ZodType>

package/node_modules/@flickfyi/core/src/kowalski/date-time.tsx

@@ -8,7 +8,7 @@ import { useEffect, useRef, useState } from 'react'
 import { space } from '~/themes/scale.stylex'
 import { button, roles } from '~/themes/shared'
 
-import type { KowalskiComponent } from './catalog'
+import type { KowalskiComponent } from './feature-schema'
 import { format } from './format'
 import { FeatureAction, layout } from './frame'