@flickfyi/flkr 0.0.182 → 0.0.185

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

@@ -0,0 +1,188 @@
+import { Flex, Text } from '@flickfyi/core'
+import { Input } from '@flickfyi/core/atoms'
+import * as stylex from '@stylexjs/stylex'
+import { useMemo, useState } from 'react'
+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 { format } from '~/kowalski/format'
+import { FeatureAction, FeatureFrame, FeatureWell } from '~/kowalski/frame'
+import { space } from '~/themes/scale.stylex'
+import { roles } from '~/themes/shared'
+
+const defaultId = 'KowalskiNote'
+const defaultScope = 'private'
+
+export const NoteData = /* @__PURE__ */ z
+	.strictObject({
+		body: z.string().describe('The note text, as plain text.'),
+		title: z.string().describe('A short heading. Use an empty string for none.'),
+	})
+	.describe('An editable persistent note. Plain text; no HTML or code execution.')
+
+export type NoteData = z.infer<typeof NoteData>
+
+export const NoteProps = z.strictObject({
+	data: NoteData,
+	...featureFields,
+	scope: featureFields.scope.default(defaultScope),
+})
+
+export type NoteProps = z.input<typeof NoteProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const noteStoreSchema = store({
+	body: replacement(z.string().default('')),
+	title: replacement(z.string().default('')),
+})
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope = defaultScope,
+} = {}) => ({
+	[`stores/${scope}/${id}`]: noteStoreSchema,
+})
+
+export function Note({ data, id, revision = 0, scope = defaultScope, style }: NoteProps) {
+	const schema = noteStoreSchema
+	const store = useConfiguredFeature({
+		name: id ?? defaultId,
+		revision,
+		schema,
+		scope,
+		seed: schema.parse({ body: { value: data.body }, title: { value: data.title } }),
+	})
+	const [bodyDraft, setBodyDraft] = useState<{ value: string } | null>(null)
+	const [titleDraft, setTitleDraft] = useState<{ value: string } | null>(null)
+	const body = bodyDraft?.value ?? store.value.body.value
+	const title = titleDraft?.value ?? store.value.title.value
+	const text = store.ready ? body : store.value.body.value
+	const wordCount = useMemo(
+		() =>
+			[...new Intl.Segmenter('en', { granularity: 'word' }).segment(text)].filter(
+				// Older JavaScriptCore versions mark numeric words as non-word-like.
+				word => word.isWordLike || /\p{N}/u.test(word.segment)
+			).length,
+		[text]
+	)
+	const hasDraft = bodyDraft !== null || titleDraft !== null
+	const status = store.ready
+		? store.saving
+			? 'Saving…'
+			: hasDraft || store.error
+				? 'Not saved'
+				: 'Saved'
+		: store.error
+			? 'Read-only'
+			: 'Loading…'
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={store.retry}
+			notice={store.error}
+			component="note"
+			title={store.value.title.value || 'Untitled note'}
+			header={false}
+		>
+			<FeatureWell>
+				{store.ready ? (
+					<Input
+						multiline
+						placeholder="Untitled note"
+						value={title}
+						onChange={next => {
+							const draft = { value: next }
+							setTitleDraft(draft)
+							store.set(
+								() => ({ title: draft }),
+								() => setTitleDraft(current => (current === draft ? null : current))
+							)
+						}}
+						style={[roles.h2, noteStyles.page]}
+					/>
+				) : (
+					<Text {...stylex.props(roles.h2)}>
+						{store.value.title.value || 'Untitled note'}
+					</Text>
+				)}
+				{store.ready ? (
+					<Input
+						multiline
+						placeholder="Start writing…"
+						value={body}
+						onChange={next => {
+							const draft = { value: next }
+							setBodyDraft(draft)
+							store.set(
+								() => ({ body: draft }),
+								() => setBodyDraft(current => (current === draft ? null : current))
+							)
+						}}
+						style={[roles.text, noteStyles.page, noteStyles.body]}
+					/>
+				) : (
+					<Text {...stylex.props(roles.text, noteStyles.body)}>
+						{text || (store.error ? 'This note is empty.' : 'Loading note…')}
+					</Text>
+				)}
+			</FeatureWell>
+			<Flex {...stylex.props(noteStyles.writing)}>
+				<Flex {...stylex.props(noteStyles.footer)}>
+					<Text {...stylex.props(roles.muted)}>
+						{format.formatMessage(
+							{
+								defaultMessage: '{count, plural, one {# word} other {# words}}',
+								id: 'kowalski.note.words',
+							},
+							{ count: wordCount }
+						)}
+					</Text>
+					<Text {...stylex.props(roles.muted)}>{status}</Text>
+				</Flex>
+				{store.ready && !store.saving && hasDraft && (
+					<FeatureAction
+						component="note"
+						onClick={() => {
+							store.set(
+								() => ({
+									...(bodyDraft && { body: bodyDraft }),
+									...(titleDraft && { title: titleDraft }),
+								}),
+								() => {
+									setBodyDraft(current => (current === bodyDraft ? null : current))
+									setTitleDraft(current => (current === titleDraft ? null : current))
+								}
+							)
+						}}
+					>
+						Retry save
+					</FeatureAction>
+				)}
+			</Flex>
+		</FeatureFrame>
+	)
+}
+
+// The note is a page: borderless text on one surface, word count and status below it.
+const noteStyles = /* @__PURE__ */ stylex.create({
+	body: { minHeight: space[24] },
+	footer: {
+		alignItems: 'center',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[2],
+		justifyContent: 'space-between',
+	},
+	page: {
+		backgroundColor: 'transparent',
+		borderWidth: 0,
+		paddingLeft: 0,
+		paddingRight: 0,
+		textAlign: 'left',
+		width: '100%',
+	},
+	writing: { gap: space[2] },
+})

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

@@ -0,0 +1,242 @@
+import { Flex, Text } from '@flickfyi/core'
+import { Button } from '@flickfyi/core/atoms'
+import * as stylex from '@stylexjs/stylex'
+import { useMemo } from 'react'
+import { z } from 'zod/v4'
+
+import { useConfiguredFeature } from '~/hooks/use-configured-feature'
+import { useFeatureStore } from '~/hooks/use-feature-store'
+import { ChecklistData } from '~/kowalski/components/checklist'
+import type { CreateSchemas, CreateSchemasInput } from '~/kowalski/create-schemas'
+import { entries, featureFields } from '~/kowalski/feature-schema'
+import { format } from '~/kowalski/format'
+import { FeatureFrame, FeatureProgress, layout } from '~/kowalski/frame'
+import { radius, size, space } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+import { colors, shape } from '~/themes/tokens.stylex'
+
+const defaultId = 'KowalskiPoll'
+
+export const PollData = /* @__PURE__ */ z
+	.strictObject({
+		options: z
+			.array(
+				z.strictObject({
+					id: z.string().describe('A short ID, unique within this list, e.g. "tent".'),
+					label: z.string().describe('One short answer choice.'),
+				})
+			)
+			.describe('Two or more answer choices.'),
+		question: z.string().describe('The question being voted on.'),
+		shared: z
+			.boolean()
+			.optional()
+			.describe(
+				'True only when other people vote on the same poll. Omit for a private poll.'
+			),
+	})
+	.describe(
+		'Cast or change a vote and derive totals from votes. Shared voting only when explicitly requested.'
+	)
+
+export type PollData = z.infer<typeof PollData>
+
+export const PollProps = z.strictObject({
+	data: PollData,
+	...featureFields,
+})
+
+export type PollProps = z.input<typeof PollProps> & {
+	style?: stylex.StyleXArray<stylex.StyleXStyles>
+}
+
+export const pollStoreSchema = entries(
+	'vote_',
+	ChecklistData.shape.items.element.shape.id,
+	{}
+)
+
+export const createSchemas: CreateSchemas = ({
+	id = defaultId,
+	scope,
+}: CreateSchemasInput = {}) => {
+	const schemas: Record<string, z.ZodType> = {}
+	for (const voteScope of scope === undefined ? ['private', 'public'] : [scope]) {
+		schemas[`stores/${voteScope}/${id}`] = pollStoreSchema
+		schemas[`stores/private/${id}Voter`] = pollVoterSchema
+	}
+	return schemas
+}
+
+export function Poll({ data, id, revision = 0, style }: PollProps) {
+	const options = data.options
+	const schema = pollStoreSchema
+	const name = id ?? defaultId
+	const identity = useMemo(
+		() =>
+			`${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`,
+		[name]
+	)
+	const voter = useFeatureStore({
+		initialState: { configuration: '', voter: identity },
+		name: `${name}Voter`,
+		schema: pollVoterSchema,
+		scope: 'private',
+	})
+	const store = useConfiguredFeature({
+		name,
+		revision,
+		schema,
+		scope: data.shared ? 'public' : 'private',
+		seed: schema.parse({}),
+	})
+	const validIds = new Set(options.map(option => option.id))
+	const ballotKey = `vote_${voter.value.voter}`
+	const votes = Object.entries(store.value)
+		.filter(
+			([key, id]) => key.startsWith('vote_') && typeof id === 'string' && validIds.has(id)
+		)
+		.map(([, id]) => id)
+	const choice = options.find(option => option.id === store.value[ballotKey])
+	const notice = store.error ?? voter.error
+	const ready = store.ready && voter.ready
+	const loading = !ready && !notice
+	const percent = format.formatters.getNumberFormat(format.locale, {
+		maximumFractionDigits: 1,
+		style: 'percent',
+	})
+	return (
+		<FeatureFrame
+			style={style}
+			onRetry={
+				store.retry || voter.retry
+					? () => {
+							store.retry?.()
+							voter.retry?.()
+						}
+					: undefined
+			}
+			notice={notice}
+			component="poll"
+			title={data.question}
+			trailing={
+				<Text {...stylex.props(roles.muted)}>
+					{loading
+						? 'Loading…'
+						: format.formatMessage(
+								{
+									defaultMessage: '{count, plural, one {# vote} other {# votes}}',
+									id: 'kowalski.poll.votes',
+								},
+								{ count: votes.length }
+							)}
+				</Text>
+			}
+		>
+			<Flex {...stylex.props(pollStyles.options)}>
+				{options.map(option => {
+					const count = votes.filter(id => id === option.id).length
+					const selected = choice?.id === option.id
+					const share = votes.length ? count / votes.length : 0
+					const shareLabel =
+						share > 0 && share < 0.001
+							? '<0.1%'
+							: share < 1 && share > 0.999
+								? '>99.9%'
+								: percent.format(share)
+					return (
+						<Button
+							key={option.id}
+							selected={selected}
+							disabled={!ready}
+							onClick={() => {
+								store.set(() => ({ [ballotKey]: option.id }))
+							}}
+							style={[button.secondary, pollStyles.option, !ready && button.disabled]}
+						>
+							<Flex {...stylex.props(pollStyles.optionHeading)}>
+								<Flex
+									{...stylex.props(
+										pollStyles.radio,
+										selected && pollStyles.selectedRadio
+									)}
+								>
+									{selected && <Flex {...stylex.props(pollStyles.dot)} />}
+								</Flex>
+								<Flex {...stylex.props(layout.grow, layout.choiceText)}>
+									<Text>{option.label}</Text>
+									{selected && (
+										<Text {...stylex.props(roles.muted, appearance.accent)}>
+											Your vote
+										</Text>
+									)}
+									{votes.length > 0 && (
+										<>
+											<FeatureProgress component="poll" value={share} />
+											<Text {...stylex.props(roles.muted)}>
+												{format.formatMessage(
+													{
+														defaultMessage:
+															'{count, plural, one {# vote} other {# votes}} · {share}',
+														id: 'kowalski.poll.share',
+													},
+													{ count, share: shareLabel }
+												)}
+											</Text>
+										</>
+									)}
+								</Flex>
+							</Flex>
+						</Button>
+					)
+				})}
+			</Flex>
+			<Text {...stylex.props(roles.muted)}>
+				{ready
+					? store.saving && choice
+						? 'Saving… You can still change your vote.'
+						: notice
+							? 'Choose an option to try again.'
+							: choice
+								? 'Tap another option to change your vote.'
+								: votes.length === 0
+									? 'Be the first to vote. Choose one option.'
+									: 'Choose one option to add your vote.'
+					: notice
+						? 'Voting is unavailable.'
+						: 'Loading your ballot…'}
+			</Text>
+		</FeatureFrame>
+	)
+}
+
+// A real radio: a round size-6 ring, filled with a centred dot when chosen.
+const pollStyles = /* @__PURE__ */ stylex.create({
+	dot: {
+		backgroundColor: colors.onAccent,
+		borderRadius: radius.full,
+		height: size[2],
+		width: size[2],
+	},
+	option: { alignItems: 'stretch', padding: space[3] },
+	optionHeading: { alignItems: 'flex-start', flexDirection: 'row', gap: space[3] },
+	options: { gap: space[2] },
+	radio: {
+		alignItems: 'center',
+		backgroundColor: colors.surface,
+		borderColor: colors.border,
+		borderRadius: radius.full,
+		borderStyle: 'solid',
+		borderWidth: shape.stroke,
+		flexShrink: 0,
+		height: size[6],
+		justifyContent: 'center',
+		width: size[6],
+	},
+	selectedRadio: { backgroundColor: colors.accent, borderColor: colors.accent },
+})
+
+export const pollVoterSchema = z.object({
+	configuration: z.string().default(''),
+	voter: z.string(),
+})