@flickfyi/flkr 0.0.182 → 0.0.185

package/node_modules/@flickfyi/core/src/kowalski/components/bill-split.tsx

@@ -0,0 +1,284 @@
+import { Flex, Text } from '@flickfyi/core'
+import { Input } from '@flickfyi/core/atoms'
+import { Field, Segmented, Stat, Stepper } 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 { billShares, formatCurrency } from '~/kowalski/calculations'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { featureFields, store } from '~/kowalski/feature-schema'
+import { format, parseNumberInput, resolveCurrency } from '~/kowalski/format'
+import {
+	FeatureAction,
+	FeatureField,
+	FeatureFrame,
+	FeatureNumber,
+	FeatureWell,
+	layout,
+} from '~/kowalski/frame'
+import { space, text } from '~/themes/scale.stylex'
+import { roles } from '~/themes/shared'
+import { font } from '~/themes/tokens.stylex'
+
+const defaultId = 'KowalskiBillSplit'
+const defaultScope = 'private'
+
+export const BillSplitData = /* @__PURE__ */ z
+	.strictObject({
+		currency: z
+			.string()
+			.optional()
+			.describe('A three-letter ISO currency code, e.g. "USD" or "EUR". Omit for "USD".'),
+		people: z.number().describe('How many people split the bill, e.g. 4.'),
+		tipPercent: z
+			.number()
+			.optional()
+			.describe('Tip as a percentage of the total, e.g. 18. Omit for no tip.'),
+		title: z.string().optional().describe('A short heading. Omit for "Split the bill".'),
+		total: z.number().describe('The bill total before tip, in the currency, e.g. 84.5.'),
+	})
+	.describe(
+		'Split a bill equally with an optional tip, rounding in the selected currency.'
+	)
+
+export type BillSplitData = z.infer<typeof BillSplitData>
+
+export const BillSplitProps = z.strictObject({
+	data: BillSplitData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type BillSplitProps = z.input<typeof BillSplitProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const billSplitStoreSchema = store({
+	people: z.number().default(1),
+	tipPercent: z.number().default(0),
+	total: z.number().default(0),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: billSplitStoreSchema,
+})
+
+export function BillSplit({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: BillSplitProps) {
+	const schema = billSplitStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({
+			people: data.people,
+			tipPercent: data.tipPercent,
+			total: data.total,
+		}),
+	})
+	const result = billShares(
+		store.value.total,
+		store.value.people,
+		store.value.tipPercent,
+		data.currency
+	)
+	const money = format.formatters.getNumberFormat(format.locale, {
+		currency: resolveCurrency(data.currency),
+		style: 'currency',
+	})
+	const billTotal = formatCurrency(store.value.total, data.currency)
+	const perPerson = money.format(result.perPerson)
+	const subtotal = billShares(store.value.total, 1, 0, data.currency).total
+	const tipPresets = [0, 15, 20, 25]
+	const [customTipOpen, setCustomTipOpen] = useState(false)
+	const [peopleDraft, setPeopleDraft] = useState(
+		format.formatNumber(store.value.people, { format: 'integer' })
+	)
+	const [preservePeopleDraft, setPreservePeopleDraft] = useState<{ text: string }>()
+	useEffect(() => {
+		if (preservePeopleDraft === undefined) {
+			setPeopleDraft(current =>
+				parseNumberInput(current) === store.value.people
+					? current
+					: format.formatNumber(store.value.people, { format: 'integer' })
+			)
+		}
+	}, [preservePeopleDraft, store.value.people])
+	const customTipVisible = customTipOpen || !tipPresets.includes(store.value.tipPercent)
+	const peopleValid = isPeopleCount(parseNumberInput(peopleDraft))
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="billSplit"
+			title={data.title ?? 'Split the bill'}
+		>
+			<FeatureField
+				component="billSplit"
+				label="Bill total"
+				value={billTotal}
+				ready={store.ready}
+				saving={store.saving}
+				parseValue={value => parseNumberInput(value, resolveCurrency(data.currency))}
+				validate={value => parseNumberInput(value, resolveCurrency(data.currency)) >= 0}
+				onChange={(value, onSaved) => {
+					store.set(
+						{ total: parseNumberInput(value, resolveCurrency(data.currency)) },
+						onSaved
+					)
+				}}
+			/>
+			<Field label="Tip">
+				<Segmented
+					disabled={!store.ready}
+					options={[
+						...tipPresets.map(tip => ({
+							label: format.formatNumber(tip / 100, { style: 'percent' }),
+							value: tip,
+						})),
+						{ label: 'Custom', value: 'custom' as const },
+					]}
+					value={customTipVisible ? 'custom' : store.value.tipPercent}
+					onChange={tip => {
+						setCustomTipOpen(tip === 'custom')
+						if (typeof tip === 'number') {
+							store.set({ tipPercent: tip })
+						}
+					}}
+				/>
+			</Field>
+			{customTipVisible && (
+				<FeatureNumber
+					component="billSplit"
+					label="Tip percent"
+					min={0}
+					ready={store.ready}
+					saving={store.saving}
+					value={store.value.tipPercent}
+					onChange={(tipPercent, onSaved) => {
+						store.set({ tipPercent }, onSaved)
+					}}
+				/>
+			)}
+			<Field error={!peopleValid && 'Choose 1–1,000 people.'} label="People">
+				<Stepper
+					decrementDisabled={!store.ready || store.value.people <= 1}
+					decrementLabel="Fewer people"
+					incrementDisabled={!store.ready}
+					incrementLabel="More people"
+					onDecrement={() => {
+						setPreservePeopleDraft(undefined)
+						store.set(current => ({ people: Math.max(1, current.people - 1) }))
+					}}
+					onIncrement={() => {
+						setPreservePeopleDraft(undefined)
+						store.set(current => ({ people: current.people + 1 }))
+					}}
+				>
+					{store.ready ? (
+						<Input
+							placeholder="People"
+							value={peopleDraft}
+							onChange={text => {
+								setPeopleDraft(text)
+								const edit = { text }
+								setPreservePeopleDraft(edit)
+								if (isPeopleCount(parseNumberInput(text))) {
+									store.set({ people: parseNumberInput(text) }, () =>
+										setPreservePeopleDraft(current =>
+											current === edit ? undefined : current
+										)
+									)
+								}
+							}}
+							style={[layout.input, layout.stepperInput]}
+						/>
+					) : (
+						<Text {...stylex.props(roles.text, layout.stepperInput)}>
+							{format.formatNumber(store.value.people, { format: 'integer' })}
+						</Text>
+					)}
+				</Stepper>
+				{store.ready &&
+					peopleValid &&
+					preservePeopleDraft !== undefined &&
+					!store.saving && (
+						<FeatureAction
+							component="billSplit"
+							onClick={() =>
+								store.set({ people: parseNumberInput(peopleDraft) }, () =>
+									setPreservePeopleDraft(current =>
+										current === preservePeopleDraft ? undefined : current
+									)
+								)
+							}
+						>
+							Retry people
+						</FeatureAction>
+					)}
+			</Field>
+			<FeatureWell>
+				<Stat>
+					<Stat.Value style={billStyles.amount(perPerson.length)}>{perPerson}</Stat.Value>
+					<Stat.Caption>Per person</Stat.Caption>
+				</Stat>
+				{result.remainder > 0 && (
+					<Text {...stylex.props(roles.muted, billStyles.centered)}>
+						{`One person pays ${money.format(result.perPerson + result.remainder)} — ${money.format(result.remainder)} extra to cover rounding.`}
+					</Text>
+				)}
+				{store.value.tipPercent > 0 && (
+					<Flex {...stylex.props(billStyles.row)}>
+						<Text
+							{...stylex.props(roles.muted)}
+						>{`Tip (${format.formatNumber(store.value.tipPercent, { format: 'decimal', style: 'unit', unit: 'percent', unitDisplay: 'narrow' })})`}</Text>
+						<Text {...stylex.props(roles.text)}>
+							{money.format(result.total - subtotal)}
+						</Text>
+					</Flex>
+				)}
+				<Flex {...stylex.props(billStyles.row)}>
+					<Text {...stylex.props(roles.strong)}>Total with tip</Text>
+					<Text {...stylex.props(roles.strong)}>{money.format(result.total)}</Text>
+				</Flex>
+			</FeatureWell>
+		</FeatureFrame>
+	)
+}
+
+// Long totals step down the display scale so they never overflow the well.
+const billStyles = /* @__PURE__ */ stylex.create({
+	amount: (length: number) => ({
+		fontSize: length > 16 ? text.lg : length > 9 ? text['4xl'] : font.displaySize,
+		lineHeight:
+			length > 16
+				? text.lgLeading
+				: length > 9
+					? text['4xlLeading']
+					: font.displayLeading,
+	}),
+	centered: { textAlign: 'center' },
+	row: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[2],
+		justifyContent: 'space-between',
+	},
+})
+
+function isPeopleCount(value: number) {
+	return Number.isInteger(value) && value >= 1
+}

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

@@ -0,0 +1,347 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button as NativeButton, Input } from '@flickfyi/core/atoms'
+import * as stylex from '@stylexjs/stylex'
+import { toArray } from 'lodash'
+import { useState } from 'react'
+import isURL from 'validator/lib/isURL.js'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import type { CreateSchemas } from '~/kowalski/create-schemas'
+import { featureFields, replacement, store } from '~/kowalski/feature-schema'
+import { FeatureAction, FeatureEdit, FeatureFrame, layout } from '~/kowalski/frame'
+import { size, space, text } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+
+export const webAddressOptions = {
+	max_allowed_length: 2048,
+	protocols: ['http', 'https'],
+	require_host: true,
+	require_protocol: true,
+	require_tld: false,
+	require_valid_protocol: true,
+}
+
+const defaultId = 'KowalskiBookmark'
+const defaultScope = 'private'
+
+export const BookmarkData = /* @__PURE__ */ z
+	.strictObject({
+		note: z.string().optional().describe('A short note about the link. Omit for none.'),
+		title: z.string().describe('A short heading.'),
+		url: z
+			.string()
+			.describe('The full http or https address, e.g. "https://example.com".'),
+	})
+	.describe('Display, edit, and retain a web bookmark. No implicit metadata fetch.')
+
+export type BookmarkData = z.infer<typeof BookmarkData>
+
+export const BookmarkProps = z.strictObject({
+	data: BookmarkData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type BookmarkProps = z.input<typeof BookmarkProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const bookmarkStoreSchema = store({
+	note: replacement(z.string().default('')),
+	title: replacement(z.string().default('')),
+	url: replacement(z.string().nullable().default(null)),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: bookmarkStoreSchema,
+})
+
+export function Bookmark({
+	data,
+	id,
+	revision = 0,
+	scope = defaultScope,
+	style,
+}: BookmarkProps) {
+	const schema = bookmarkStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({
+			note: { value: data.note },
+			title: { value: data.title },
+			url: { value: data.url },
+		}),
+	})
+	const [draft, setDraft] = useState({ note: '', title: '', url: '' })
+	const [baseline, setBaseline] = useState<typeof draft | null>(null)
+	const [showAddress, setShowAddress] = useState(false)
+	const [showFullNote, setShowFullNote] = useState(false)
+	const editing = baseline !== null
+	const domain = (store.value.url.value ?? '')
+		.replace(/^https?:\/\//i, '')
+		.split(/[/?#]/)[0]
+		?.split('@')
+		.pop()
+		?.replace(/^www\./i, '')
+	const title = store.value.title.value.trim()
+		? store.value.title.value
+		: domain || 'Untitled bookmark'
+	const note = store.value.note.value
+	const noteCharacters = toArray(note)
+	const longNote = noteCharacters.length > 360
+	const valid = {
+		note: true,
+		title: true,
+		url: isURL(draft.url, { ...webAddressOptions }),
+	}
+	const changed =
+		baseline &&
+		(draft.note !== baseline.note ||
+			draft.title !== baseline.title ||
+			draft.url !== baseline.url)
+	function editBookmark() {
+		if (!store.ready || store.saving) {
+			return
+		}
+		const values = {
+			note: store.value.note.value,
+			title: store.value.title.value,
+			url: store.value.url.value ?? '',
+		}
+		setDraft(values)
+		setBaseline(values)
+	}
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="bookmark"
+			title={title}
+			detail={domain || 'No web address'}
+			trailing={
+				!editing && (
+					<FeatureEdit
+						disabled={!store.ready || store.saving}
+						label="Edit bookmark"
+						onClick={editBookmark}
+					/>
+				)
+			}
+		>
+			{editing ? (
+				<Flex {...stylex.props(bookmarkStyles.editor)}>
+					{store.saving && <Text {...stylex.props(roles.muted)}>Saving changes…</Text>}
+					{(
+						[
+							{ key: 'title', label: 'Title', message: '' },
+							{
+								key: 'url',
+								label: 'Web address',
+								message: 'Use a valid address starting with https:// or http://.',
+							},
+							{ key: 'note', label: 'Note', message: '' },
+						] as const
+					).map(field => (
+						<Flex key={field.key} {...stylex.props(layout.field)}>
+							<Flex {...stylex.props(bookmarkStyles.fieldLabel)}>
+								<Text {...stylex.props(roles.label, layout.fieldLabel)}>
+									{field.label}
+								</Text>
+								{field.key !== 'url' && (
+									<Text {...stylex.props(roles.muted, bookmarkStyles.caption)}>
+										Optional
+									</Text>
+								)}
+							</Flex>
+							{store.saving ? (
+								<Text
+									{...stylex.props(
+										roles.text,
+										appearance.surface,
+										layout.input,
+										bookmarkStyles.submittedValue
+									)}
+								>
+									{draft[field.key] || (field.key === 'note' ? 'No note' : 'No title')}
+								</Text>
+							) : (
+								<Input
+									multiline={field.key === 'note'}
+									placeholder={field.label}
+									value={draft[field.key]}
+									onChange={value =>
+										setDraft(current => ({ ...current, [field.key]: value }))
+									}
+									style={[layout.input, field.key === 'note' && layout.multiline]}
+								/>
+							)}
+							{!valid[field.key] && (
+								<Text {...stylex.props(roles.muted)}>{field.message}</Text>
+							)}
+						</Flex>
+					))}
+					<Flex {...stylex.props(layout.actions)}>
+						<FeatureAction
+							component="bookmark"
+							disabled={store.saving}
+							onClick={() => setBaseline(null)}
+						>
+							Cancel
+						</FeatureAction>
+						<FeatureAction
+							component="bookmark"
+							disabled={
+								store.saving ||
+								!store.ready ||
+								!changed ||
+								!valid.title ||
+								!valid.url ||
+								!valid.note
+							}
+							onClick={() => {
+								if (
+									!store.ready ||
+									store.saving ||
+									!baseline ||
+									!changed ||
+									!valid.title ||
+									!valid.url ||
+									!valid.note
+								) {
+									return
+								}
+								store.set(
+									current => ({
+										...(draft.title !== baseline.title &&
+											draft.title !== current.title.value && {
+												title: { value: draft.title },
+											}),
+										...(draft.url !== baseline.url &&
+											draft.url !== (current.url.value ?? '') && {
+												url: { value: draft.url || null },
+											}),
+										...(draft.note !== baseline.note &&
+											draft.note !== current.note.value && {
+												note: { value: draft.note },
+											}),
+									}),
+									() => setBaseline(null)
+								)
+							}}
+							variant="primary"
+						>
+							{store.saving ? 'Saving…' : 'Save changes'}
+						</FeatureAction>
+					</Flex>
+				</Flex>
+			) : (
+				<Flex {...stylex.props(bookmarkStyles.details)}>
+					{store.saving ? (
+						<Text {...stylex.props(roles.muted)}>Saving changes…</Text>
+					) : !store.ready && !store.error ? (
+						<Text {...stylex.props(roles.muted)}>Loading bookmark…</Text>
+					) : null}
+					<Flex {...stylex.props(bookmarkStyles.note)}>
+						{note && (
+							<Text {...stylex.props(roles.text, bookmarkStyles.noteText)}>
+								{longNote && !showFullNote
+									? `${noteCharacters.slice(0, 360).join('')}…`
+									: note}
+							</Text>
+						)}
+						{longNote && (
+							<FeatureAction
+								component="bookmark"
+								onClick={() => setShowFullNote(current => !current)}
+								variant="quiet"
+							>
+								{showFullNote ? 'Show less' : 'Read full note'}
+							</FeatureAction>
+						)}
+						{!note && (
+							<FeatureAction
+								component="bookmark"
+								disabled={!store.ready || store.saving}
+								icon="plus"
+								onClick={editBookmark}
+								variant="quiet"
+							>
+								Add a note
+							</FeatureAction>
+						)}
+					</Flex>
+					{store.value.url.value && (
+						<Flex {...stylex.props(bookmarkStyles.address)}>
+							<NativeButton
+								onClick={() => setShowAddress(current => !current)}
+								style={[button.quiet, bookmarkStyles.addressButton]}
+							>
+								<Flex {...stylex.props(bookmarkStyles.addressRow)}>
+									<Text {...stylex.props(roles.strong, bookmarkStyles.caption)}>
+										{showAddress ? 'Hide web address' : 'Show web address'}
+									</Text>
+									<Icon
+										name={showAddress ? 'chevron.up' : 'chevron.down'}
+										{...stylex.props(roles.muted, bookmarkStyles.chevron)}
+									/>
+								</Flex>
+							</NativeButton>
+							{showAddress && (
+								<Flex {...stylex.props(appearance.surface, bookmarkStyles.addressValue)}>
+									<Text {...stylex.props(roles.muted, bookmarkStyles.caption)}>
+										{store.value.url.value}
+									</Text>
+								</Flex>
+							)}
+						</Flex>
+					)}
+					{store.value.url.value && (
+						<NativeButton
+							accessibilityLabel={`Open ${title}`}
+							disabled={!store.ready || store.saving}
+							href={store.value.url.value}
+							style={[button.primary, button.lg, layout.action]}
+						>
+							<Flex {...stylex.props(layout.actionContent)}>
+								<Icon name="arrow.up.right" />
+								<Text>Open link</Text>
+							</Flex>
+						</NativeButton>
+					)}
+				</Flex>
+			)}
+		</FeatureFrame>
+	)
+}
+
+const bookmarkStyles = /* @__PURE__ */ stylex.create({
+	address: { gap: space[1], minWidth: size[0.5] },
+	addressButton: { padding: `${space[2]} 0`, textAlign: 'left' },
+	addressRow: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		gap: space[3],
+		justifyContent: 'space-between',
+	},
+	addressValue: { minWidth: size[0.5], padding: `${space[3]} ${space[3.5]}` },
+	caption: { fontSize: text['sm'] },
+	chevron: { fontSize: text['xs'], fontWeight: '600' },
+	details: { gap: space[4] },
+	editor: { gap: space[5] },
+	fieldLabel: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
+	note: { gap: space[3] },
+	noteText: { lineHeight: '1.6' },
+	submittedValue: { minWidth: size[0.5] },
+})