ajo-ui 0.1.0

package/src/availability.ts

@@ -0,0 +1,261 @@
+import { remember } from 'ajo-cloves'
+import { fromISO, type SegmentsKind } from './segments'
+
+/** Half-open wall-time interval used by availability expressions. */
+export type TimeWindow = {
+	/** Inclusive wall-time start, `HH:MM[:SS]`. */
+	from?: string
+	/** Exclusive wall-time end, `HH:MM[:SS]`. */
+	to?: string
+}
+
+type DateMatcher = {
+	after?: Date
+	before?: Date
+	dayOfWeek?: number[]
+	from?: Date
+	to?: Date
+}
+
+/** Day-granular matcher grammar shared by Calendar and date fields. */
+export type CalendarMatcher =
+	| ((date: Date) => boolean)
+	| DateMatcher
+	| Date
+	| Date[]
+
+/** Calendar matcher with an optional half-open wall-time dimension. */
+export type AvailabilityMatcher =
+	| CalendarMatcher
+	| (DateMatcher & { time: TimeWindow })
+
+type DateParts = {
+	day: number
+	hour: number
+	minute: number
+	month: number
+	second: number
+	year: number
+}
+
+/** Stable compiled availability view. */
+export type Availability = {
+	day(date: Date): boolean
+	at(date: Date): boolean
+	value(kind: SegmentsKind, value: string): boolean
+	crosses(from: Date, to: Date): boolean
+}
+
+export type AvailabilityCompileOptions = {
+	/** Calendar time zone used for matcher and candidate date parts. */
+	timeZone?: string
+}
+
+const clock = (value: string | undefined, fallback: number) => {
+	if (value == null) return fallback
+	const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(value)
+	if (!match) return Number.NaN
+	const hour = Number(match[1])
+	const minute = Number(match[2])
+	const second = Number(match[3] ?? 0)
+	if (hour > 23 || minute > 59 || second > 59) return Number.NaN
+	return hour * 3600 + minute * 60 + second
+}
+
+const timePredicate = (window: TimeWindow) => {
+	const from = clock(window.from, 0)
+	const to = clock(window.to, 24 * 3600)
+	const valid = Number.isFinite(from) && Number.isFinite(to) && from < to
+	return (parts: DateParts) => {
+		const value = parts.hour * 3600 + parts.minute * 60 + parts.second
+		return valid && from <= value && value < to
+	}
+}
+
+const partFormatters = new Map<string, Intl.DateTimeFormat>()
+
+const partFormatter = (timeZone: string) => {
+	let formatter = partFormatters.get(timeZone)
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat('en-CA', {
+			day: '2-digit',
+			hour: '2-digit',
+			hourCycle: 'h23',
+			minute: '2-digit',
+			month: '2-digit',
+			second: '2-digit',
+			timeZone,
+			year: 'numeric',
+		})
+		remember(partFormatters, timeZone, formatter)
+	}
+	return formatter
+}
+
+const partsOf = (date: Date, timeZone?: string): DateParts => {
+	if (!Number.isFinite(date.getTime())) return {
+		day: Number.NaN,
+		hour: Number.NaN,
+		minute: Number.NaN,
+		month: Number.NaN,
+		second: Number.NaN,
+		year: Number.NaN,
+	}
+	if (!timeZone) return {
+		day: date.getDate(),
+		hour: date.getHours(),
+		minute: date.getMinutes(),
+		month: date.getMonth() + 1,
+		second: date.getSeconds(),
+		year: date.getFullYear(),
+	}
+	const parts = partFormatter(timeZone).formatToParts(date)
+	const value = (type: Intl.DateTimeFormatPartTypes) => Number(parts.find(part => part.type === type)?.value)
+	return {
+		day: value('day'),
+		hour: value('hour'),
+		minute: value('minute'),
+		month: value('month'),
+		second: value('second'),
+		year: value('year'),
+	}
+}
+
+const dayValue = (parts: Pick<DateParts, 'day' | 'month' | 'year'>) =>
+	parts.year * 10000 + parts.month * 100 + parts.day
+
+const exactUtcDate = (parts: Pick<DateParts, 'day' | 'month' | 'year'> & Partial<Pick<DateParts, 'hour' | 'minute' | 'second'>>) => {
+	const date = new Date(0)
+	date.setUTCFullYear(parts.year, parts.month - 1, parts.day)
+	date.setUTCHours(parts.hour ?? 0, parts.minute ?? 0, parts.second ?? 0, 0)
+	return date
+}
+
+const exactLocalDate = (parts: DateParts) => {
+	const date = new Date(0)
+	date.setFullYear(parts.year, parts.month - 1, parts.day)
+	date.setHours(parts.hour, parts.minute, parts.second, 0)
+	return date
+}
+
+const weekday = (parts: Pick<DateParts, 'day' | 'month' | 'year'>) =>
+	exactUtcDate(parts).getUTCDay()
+
+/** Constructs a stable instant for one wall-clock value in a calendar time zone. */
+export const calendarDate = (parts: DateParts, timeZone?: string) => {
+	if (!timeZone) return exactLocalDate(parts)
+	const wanted = exactUtcDate(parts).getTime()
+	let instant = wanted
+	for (let pass = 0; pass < 2; pass++) {
+		const observed = partsOf(new Date(instant), timeZone)
+		const actual = exactUtcDate(observed).getTime()
+		instant += wanted - actual
+	}
+	return new Date(instant)
+}
+
+const addDay = (parts: DateParts): DateParts => {
+	const next = exactUtcDate({ ...parts, day: parts.day + 1, hour: 12 })
+	return {
+		day: next.getUTCDate(),
+		hour: 12,
+		minute: 0,
+		month: next.getUTCMonth() + 1,
+		second: 0,
+		year: next.getUTCFullYear(),
+	}
+}
+
+/** Compiles date/time expressions into stable day- and instant-granular predicates. */
+export const compile = (
+	matcher: AvailabilityMatcher | AvailabilityMatcher[] | undefined,
+	options: AvailabilityCompileOptions = {},
+): Availability | undefined => {
+	if (matcher == null) return undefined
+	const matchers = (Array.isArray(matcher) ? matcher : [matcher]) as AvailabilityMatcher[]
+	if (!matchers.length) return undefined
+	const timeZone = options.timeZone
+	const parts = (date: Date) => partsOf(date, timeZone)
+	type Predicate = {
+		date: (value: Date, current: () => DateParts) => boolean
+		time?: (current: DateParts) => boolean
+	}
+	const compileMatcher = (item: AvailabilityMatcher): Predicate => {
+		if (item instanceof Date) {
+			const expected = dayValue(parts(item))
+			return { date: (_value, current) => dayValue(current()) === expected }
+		}
+		if (Array.isArray(item)) {
+			const expected = new Set(item
+				.map(entry => dayValue(parts(entry)))
+				.filter(Number.isFinite))
+			return { date: (_value, current) => expected.has(dayValue(current())) }
+		}
+		if (typeof item === 'function') return { date: item }
+
+		const {
+			after,
+			before,
+			dayOfWeek,
+			from,
+			to,
+		} = item
+		const afterDay = after == null ? undefined : dayValue(parts(after))
+		const beforeDay = before == null ? undefined : dayValue(parts(before))
+		const fromDay = from == null ? undefined : dayValue(parts(from))
+		const toDay = to == null ? undefined : dayValue(parts(to))
+		const weekdays = dayOfWeek == null ? undefined : new Set(dayOfWeek)
+		const hasDate = after != null || before != null || dayOfWeek != null || from != null || to != null
+		const time = 'time' in item ? timePredicate(item.time) : undefined
+
+		return {
+			date: (_value, read) => {
+				if (!hasDate) return time != null
+				const current = read()
+				const currentDay = dayValue(current)
+				if (weekdays != null && !weekdays.has(weekday(current))) return false
+				if (beforeDay != null && !(currentDay < beforeDay)) return false
+				if (afterDay != null && !(currentDay > afterDay)) return false
+				if (fromDay != null && toDay != null) return fromDay <= currentDay && currentDay <= toDay
+				if (fromDay != null) return currentDay === fromDay
+				if (toDay != null) return currentDay === toDay
+				return true
+			},
+			time,
+		}
+	}
+	const predicates = matchers.map(compileMatcher)
+	const day = (date: Date) => {
+		let current: DateParts | undefined
+		const read = () => current ??= parts(date)
+		return predicates.some(predicate => predicate.time == null && predicate.date(date, read))
+	}
+	const at = (date: Date) => {
+		let current: DateParts | undefined
+		const read = () => current ??= parts(date)
+		return predicates.some(predicate => predicate.date(date, read) && (predicate.time?.(read()) ?? true))
+	}
+
+	return {
+		day,
+		at,
+		value(kind: SegmentsKind, value: string) {
+			const units = fromISO(kind, value)
+			if (!units) return false
+			const now = parts(new Date())
+			const date = kind === 'time'
+				? calendarDate({ ...now, hour: units.hour ?? 0, minute: units.minute ?? 0, second: units.second ?? 0 }, timeZone)
+				: calendarDate({ day: units.day!, hour: units.hour ?? 12, minute: units.minute ?? 0, month: units.month!, second: units.second ?? 0, year: units.year! }, timeZone)
+			return kind === 'date' ? day(date) : at(date)
+		},
+		crosses(from: Date, to: Date) {
+			const end = dayValue(parts(to))
+			let current = parts(from)
+			if (dayValue(current) >= end) return false
+			for (current = addDay(current); dayValue(current) < end; current = addDay(current)) {
+				if (day(calendarDate(current, timeZone))) return true
+			}
+			return false
+		},
+	}
+}

package/src/avatar.tsx

@@ -0,0 +1,99 @@
+import type { IntrinsicElements, Stateless, WithChildren } from 'ajo'
+import { callHandler } from 'ajo-cloves'
+
+/** Arguments for the Avatar root. */
+export type AvatarArgs = WithChildren<IntrinsicElements['div'] & {
+	/** Size marker mirrored as `data-size`. */
+	size?: string
+}>
+
+/** Arguments for the native image inside an Avatar. */
+export type AvatarImageArgs = IntrinsicElements['img']
+/** Arguments for fallback content shown without a usable image. */
+export type AvatarFallbackArgs = WithChildren<IntrinsicElements['span']>
+/** Arguments for the status badge attached to an Avatar. */
+export type AvatarBadgeArgs = WithChildren<IntrinsicElements['span']>
+/** Arguments for a visual group of overlapping avatars. */
+export type AvatarGroupArgs = WithChildren<IntrinsicElements['div']>
+/** Arguments for the overflow count in an Avatar group. */
+export type AvatarGroupCountArgs = WithChildren<IntrinsicElements['div']>
+
+/** Unstyled avatar root that exposes image, fallback, and badge slots. */
+const Avatar: Stateless<AvatarArgs> = ({
+	children,
+	size = 'default',
+	...attrs
+}) => (
+	<div
+		{...attrs}
+		data-size={size}
+		data-slot="avatar"
+	>
+		{children}
+	</div>
+)
+
+/** Unstyled avatar image that hides itself after load errors. */
+const AvatarImage: Stateless<AvatarImageArgs> = ({
+	alt = '',
+	decoding = 'async',
+	loading = 'lazy',
+	'set:onerror': onerror,
+	'set:onload': onload,
+	...attrs
+}) => (
+	<img
+		{...attrs}
+		alt={alt}
+		data-slot="avatar-image"
+		decoding={decoding}
+		loading={loading}
+		set:onerror={(event: Event | string) => {
+			if (event instanceof Event) {
+				;(event.currentTarget as HTMLImageElement).hidden = true
+				callHandler(onerror, event)
+			}
+		}}
+		set:onload={(event: Event) => {
+			;(event.currentTarget as HTMLImageElement).hidden = false
+			callHandler(onload, event)
+		}}
+	/>
+)
+
+/** Unstyled fallback content for an Avatar. */
+const AvatarFallback: Stateless<AvatarFallbackArgs> = ({ children, ...attrs }) => (
+	<span {...attrs} data-slot="avatar-fallback">
+		{children}
+	</span>
+)
+
+/** Unstyled badge anchored to an Avatar. */
+const AvatarBadge: Stateless<AvatarBadgeArgs> = ({ children, ...attrs }) => (
+	<span {...attrs} data-slot="avatar-badge">
+		{children}
+	</span>
+)
+
+/** Unstyled container for a group of avatars. */
+const AvatarGroup: Stateless<AvatarGroupArgs> = ({ children, ...attrs }) => (
+	<div {...attrs} data-slot="avatar-group">
+		{children}
+	</div>
+)
+
+/** Unstyled count for avatars omitted from a visible group. */
+const AvatarGroupCount: Stateless<AvatarGroupCountArgs> = ({ children, ...attrs }) => (
+	<div {...attrs} data-slot="avatar-group-count">
+		{children}
+	</div>
+)
+
+export {
+	Avatar,
+	AvatarBadge,
+	AvatarFallback,
+	AvatarGroup,
+	AvatarGroupCount,
+	AvatarImage,
+}

package/src/bar.ts

@@ -0,0 +1,156 @@
+import type { Host } from 'ajo-cloves'
+import { controlled, dom, roving, typeahead } from 'ajo-cloves'
+
+export type BarView = {
+	/** Open trigger value; '' = every surface closed. */
+	readonly value: string
+	/** Stored roving tab-stop value; '' = defer to DOM order. */
+	readonly focused: string
+	/** Reads controlled/uncontrolled value for this render; call once per render pass. */
+	sync(value: string | undefined): string
+	/** Opens a value, or closes everything with ''. */
+	setValue(next: string, event?: Event): void
+	close(event?: Event): void
+	/** Follow policy: while the bar is open, moves the open value to the entered trigger; inert while closed. */
+	follow(next: string, event?: Event): void
+	/** Focus policy: adopts the roving tab stop, and follows while the bar is open. */
+	focus(next: string, event?: Event): void
+	/** Seeds the tab stop without invalidating (registration repair). */
+	adopt(next: string): void
+	/** Single tab stop: true when the value holds it, resolved against the live row. */
+	isTabbable(value: string): boolean
+	/** Trigger-row keydown skeleton: roving arrows, typeahead, and Escape gated on open. */
+	handle(event: KeyboardEvent): boolean
+}
+
+export type BarOptions = {
+	/** Live enabled trigger row, in DOM order. */
+	triggers: () => HTMLElement[]
+	/** Bar value of one trigger. Default: dataset.value. */
+	value?: (trigger: HTMLElement) => string
+	/** Value before the first sync; '' = closed. */
+	initialValue?: string
+	/** Blocks opening while true. */
+	disabled?: () => boolean
+	/** Wrap arrow navigation at the ends. Default: true. */
+	loop?: () => boolean
+	/** Called whenever the open value changes. */
+	onValueChange?: (value: string, event?: Event) => void
+}
+
+/**
+ * The shared root machine for horizontal trigger bars (menubar,
+ * navigation-menu): one controlled open value ('' = closed), roving over a
+ * live trigger row with typeahead, and the open-follows-focus/hover policy.
+ *
+ * Movement (arrows, typeahead) only focuses the target trigger; the follow
+ * policy runs exactly once through the trigger's own focus handler, so
+ * controlled consumers see a single onValueChange per move.
+ */
+export const bar = (host: Host, opts: BarOptions): BarView => {
+	const read = opts.value ?? ((trigger: HTMLElement) => trigger.dataset.value ?? '')
+	const state = controlled<string>(host, {
+		fallback: opts.initialValue ?? '',
+		onChange: opts.onValueChange,
+	})
+	let focused = ''
+
+	// The tab stop resolves against the live row: a stale, removed, or
+	// disabled entry falls back to the first trigger in DOM order.
+	const stop = () => {
+		if (!dom(host)) return ''
+		const row = opts.triggers()
+		if (!row.length) return ''
+		return focused && row.some(trigger => read(trigger) === focused) ? focused : read(row[0])
+	}
+
+	const setValue = (next: string, event?: Event) => {
+		if (next && opts.disabled?.()) return
+		if (next === state.value) return
+		if (next) focused = next
+		state.set(next, event)
+	}
+
+	let following = false
+
+	const follow = (next: string, event?: Event) => {
+		if (following) return
+		if (!state.value || !next || next === state.value) return
+
+		following = true
+		try {
+			// When focus sits inside the surface about to close (a DOM
+			// descendant of the bar that is not a row trigger), move it onto
+			// the followed trigger first: hiding a native popover restores
+			// focus to its invoker, which would re-run the follow policy and
+			// bounce the open value straight back.
+			if (dom(host)) {
+				const row = opts.triggers()
+				const target = row.find(trigger => read(trigger) === next)
+				const active = document.activeElement as HTMLElement | null
+				if (target && active && active !== target && (host as unknown as HTMLElement).contains(active) && !row.includes(active)) {
+					target.focus()
+				}
+			}
+			setValue(next, event)
+		} finally {
+			following = false
+		}
+	}
+
+	const nav = roving(host, {
+		items: opts.triggers,
+		orientation: () => 'horizontal',
+		loop: () => opts.loop?.() ?? true,
+		// Focus only: the focus event runs the follow policy once.
+		onMove: target => target.focus(),
+	})
+
+	const ta = typeahead(host, {
+		items: opts.triggers,
+		onMatch: (target, event) => {
+			event.preventDefault()
+			target.focus()
+		},
+	})
+
+	return {
+		get value() {
+			return state.value
+		},
+		get focused() {
+			return focused
+		},
+		sync: value => state.sync(value),
+		setValue,
+		close: event => setValue('', event),
+		follow,
+		focus(next, event) {
+			if (state.value && next && next !== state.value) {
+				follow(next, event)
+			} else if (focused !== next) {
+				focused = next
+				host.next()
+			}
+		},
+		adopt(next) {
+			focused = next
+		},
+		isTabbable(value) {
+			const current = stop()
+			return !current || current === value
+		},
+		handle(event) {
+			if (nav.handle(event)) return true
+
+			if (event.key === 'Escape') {
+				if (!state.value) return false
+				event.preventDefault()
+				setValue('', event)
+				return true
+			}
+
+			return ta.handle(event)
+		},
+	}
+}