@hoardodile/ui 0.0.0

package/src/components/filter-rail.tsx

@@ -0,0 +1,139 @@
+import { Button } from "@hoardodile/ui/components/button"
+import { Checkbox } from "@hoardodile/ui/components/checkbox"
+import { Separator } from "@hoardodile/ui/components/separator"
+import { cn } from "@hoardodile/ui/lib/utils"
+import { type ReactNode, useId } from "react"
+
+type FilterRailProps = {
+	/** Rail title, e.g. "Filters". */
+	readonly title: ReactNode
+	/** Header link that resets every staged filter (applies immediately). */
+	readonly clearAllLabel: ReactNode
+	readonly onClearAll: () => void
+	/** Footer apply button label, e.g. "Show 24 resources". */
+	readonly resultLabel: ReactNode
+	readonly onApply: () => void
+	/** When false (live-search mode) the footer apply button is omitted. */
+	readonly showApply?: boolean
+	/**
+	 * Live-search toggle row above the apply button — checked means every
+	 * filter change applies immediately instead of staging. Rendered when
+	 * provided.
+	 */
+	readonly liveSearch?: boolean
+	readonly onLiveSearchChange?: (live: boolean) => void
+	readonly liveSearchLabel?: ReactNode
+	readonly children: ReactNode
+	readonly className?: string
+}
+
+/**
+ * Filter rail: the faceted filter surface on index pages. Lives in the
+ * AppShell's right panel column on wide screens and in a route-owned
+ * drawer below the panel breakpoint, so it always fills its parent's
+ * height and scrolls its own sections.
+ */
+export function FilterRail(props: FilterRailProps) {
+	const {
+		title,
+		clearAllLabel,
+		onClearAll,
+		resultLabel,
+		onApply,
+		showApply = true,
+		liveSearch,
+		onLiveSearchChange,
+		liveSearchLabel,
+		children,
+		className,
+	} = props
+	const liveToggleId = useId()
+	return (
+		<div
+			className={cn("flex h-full w-full flex-col overflow-hidden", className)}
+		>
+			<div className="flex items-baseline px-5 pt-5">
+				<span className="text-xs font-semibold tracking-label uppercase text-foreground">
+					{title}
+				</span>
+				<button
+					type="button"
+					className="ml-auto cursor-pointer text-xs text-muted-foreground hover:text-secondary-foreground"
+					data-testid="filter-rail-clear-all"
+					onClick={onClearAll}
+				>
+					{clearAllLabel}
+				</button>
+			</div>
+			<div className="flex-1 overflow-y-auto px-5 pb-5">{children}</div>
+			{liveSearch !== undefined ? (
+				<>
+					<Separator size="seam" />
+					<div className="mb-3 flex items-center justify-between px-5 pt-3">
+						<div className="flex items-center gap-2">
+							<Checkbox
+								id={liveToggleId}
+								checked={liveSearch}
+								onCheckedChange={(v) => onLiveSearchChange?.(v === true)}
+								data-testid="live-search-toggle"
+							/>
+							<label
+								htmlFor={liveToggleId}
+								className="cursor-pointer text-xs text-muted-foreground"
+							>
+								{liveSearchLabel}
+							</label>
+						</div>
+					</div>
+				</>
+			) : null}
+			{showApply ? (
+				<div className="mb-3 px-5">
+					<Button
+						type="button"
+						className="w-full justify-center"
+						onClick={onApply}
+						data-testid="filter-rail-apply"
+					>
+						{resultLabel}
+					</Button>
+				</div>
+			) : null}
+		</div>
+	)
+}
+
+type FilterRailSectionProps = {
+	/** Section label (uppercase tracking-label); omitted for the
+	    label-less first panel section. */
+	readonly label?: ReactNode
+	/**
+	 * Pad the label and content (`px-5`) while the seam stays full-bleed —
+	 * detail panels whose sections take their own padding without touching
+	 * the edge-to-edge separators.
+	 */
+	readonly padded?: boolean
+	readonly children: ReactNode
+}
+
+/** One facet group; sections are separated by 2px structural seams. */
+export function FilterRailSection(props: FilterRailSectionProps) {
+	const { label, children, padded = false } = props
+	return (
+		<section className="mt-5 first:mt-4 first:pt-0 first:*:data-[slot=separator]:hidden">
+			<Separator size="seam" className="mb-4" />
+			<div className={padded ? "px-5" : undefined}>
+				{label !== undefined ? (
+					<div className="text-xs font-semibold tracking-label uppercase text-foreground">
+						{label}
+					</div>
+				) : null}
+				{label !== undefined ? (
+					<div className="mt-2 flex flex-col">{children}</div>
+				) : (
+					children
+				)}
+			</div>
+		</section>
+	)
+}

package/src/components/fixed-action-bar.tsx

@@ -0,0 +1,46 @@
+import { cn } from "@hoardodile/ui/lib/utils"
+import type { ReactNode } from "react"
+
+type FixedActionBarProps = {
+	readonly children: ReactNode
+	readonly className?: string
+	/**
+	 * 0–100 shows the 2px top progress strip while an upload is staging;
+	 * omit when idle. The track doubles as the seam.
+	 */
+	readonly progress?: number
+}
+
+/**
+ * Fixed bottom action bar for long forms. Pinned to the viewport bottom
+ * so the submit control is always reachable, starting after the sidebar
+ * on md+; the top progress strip separates it from scrolling content (a
+ * quiet muted track when idle, a foreground fill while staging). The
+ * inner row mirrors PageScaffold's gutters and centers at `max-w-content`,
+ * so the buttons right-align with the page column's edge. Forms using it
+ * reserve clearance with bottom padding.
+ */
+export function FixedActionBar(props: FixedActionBarProps) {
+	return (
+		<div
+			className={cn(
+				"fixed inset-x-0 bottom-0 z-40 bg-background/90 backdrop-blur supports-backdrop-filter:bg-background/60 md:left-sidebar",
+				props.className,
+			)}
+		>
+			<div className="mx-auto w-full max-w-content">
+				<div className="h-0.5 bg-muted">
+					{props.progress !== undefined ? (
+						<div
+							className="h-full bg-foreground transition-[width] duration-(--duration-2) ease-standard"
+							style={{ width: `${props.progress}%` }}
+						/>
+					) : null}
+				</div>
+			</div>
+			<div className="mx-auto flex w-full max-w-content items-center justify-end gap-2 px-3 py-4 sm:px-6 lg:px-10">
+				{props.children}
+			</div>
+		</div>
+	)
+}

package/src/components/font-picker.tsx

@@ -0,0 +1,257 @@
+import {
+	closestCenter,
+	DndContext,
+	type DragEndEvent,
+	KeyboardSensor,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from "@dnd-kit/core"
+import {
+	arrayMove,
+	rectSortingStrategy,
+	SortableContext,
+	sortableKeyboardCoordinates,
+	useSortable,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { Input } from "@hoardodile/ui/components/input"
+import { Switch } from "@hoardodile/ui/components/switch"
+import { Cross } from "@hoardodile/ui/icons/marks"
+import { SortVertical } from "@hoardodile/ui/icons/registry"
+import { cn } from "@hoardodile/ui/lib/utils"
+import { type ReactNode, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+export type FontPickerProps = {
+	readonly value: readonly string[]
+	readonly onChange: (value: string[]) => void
+	/**
+	 * Controlled "inherit app font" state. When `onInheritChange` is
+	 * provided the picker renders an inherit switch; the switch only
+	 * decides whether the chosen stack is used (implementation-level
+	 * fallback) — the picker itself always stays visible and editable,
+	 * so the user can keep a stack ready while inheriting.
+	 */
+	readonly inherit?: boolean
+	readonly onInheritChange?: (checked: boolean) => void
+	readonly inheritedFonts?: readonly string[]
+	readonly inheritedFamily?: string
+	/** Preset tag rows (web/system/extra) — the consumer renders them
+	    (registry knowledge and localized labels are app-side). */
+	readonly presetTags?: ReactNode
+	/**
+	 * Resolves an entered name to its canonical stack value (and may load
+	 * its CSS); returning `undefined` keeps the raw name.
+	 */
+	readonly resolveFont?: (name: string) => string | undefined
+	/** Label and chip family for a stack entry. */
+	readonly resolveEntry?: (name: string) => { label: string; family?: string }
+	/** `font-family` for the live preview stack. */
+	readonly previewFamily?: string
+	readonly "data-testid"?: string
+	readonly "aria-label"?: string
+}
+
+/**
+ * Font picker with tag-style layout: optional preset tag rows on top,
+ * a custom input below them, the selected fonts as draggable chips, and
+ * an always-visible live preview. The font registry itself lives in the
+ * consumer — presets, CSS loading and localized display names come in
+ * through props.
+ */
+export function FontPicker(props: FontPickerProps) {
+	const {
+		value,
+		onChange,
+		inherit = false,
+		onInheritChange,
+		inheritedFonts,
+		inheritedFamily,
+		presetTags,
+		resolveFont,
+		resolveEntry,
+		previewFamily,
+		"data-testid": testId,
+		"aria-label": ariaLabel,
+	} = props
+	const { t } = useTranslation("ui", { useSuspense: false })
+
+	const [customInput, setCustomInput] = useState("")
+
+	function addFont(name: string) {
+		const trimmed = name.trim()
+		if (trimmed.length === 0) return
+		const resolved = resolveFont?.(trimmed) ?? trimmed
+		if (value.includes(resolved)) return
+		onChange([...value, resolved])
+	}
+
+	function removeFont(index: number) {
+		onChange(value.filter((_, i) => i !== index))
+	}
+
+	function handleDragEnd(event: DragEndEvent) {
+		const { active, over } = event
+		if (over === null || active.id === over.id) return
+		const oldIndex = value.indexOf(String(active.id))
+		const newIndex = value.indexOf(String(over.id))
+		onChange(arrayMove([...value], oldIndex, newIndex))
+	}
+
+	function handleCustomKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+		if (e.key === "Enter") {
+			e.preventDefault()
+			addFont(customInput)
+			setCustomInput("")
+		}
+	}
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 3 } }),
+		useSensor(KeyboardSensor, {
+			coordinateGetter: sortableKeyboardCoordinates,
+		}),
+	)
+
+	return (
+		<div className="flex flex-col gap-4" data-testid={testId}>
+			{onInheritChange !== undefined && (
+				<div className="flex items-center gap-2">
+					<Switch
+						checked={inherit}
+						onCheckedChange={onInheritChange}
+						aria-label={t("fontPicker.inherit")}
+					/>
+					<span className="text-sm">{t("fontPicker.inherit")}</span>
+				</div>
+			)}
+
+			{inherit && (
+				<p className="text-xs text-muted-foreground">
+					{t("fontPicker.inheritedHint")}
+					{inheritedFonts !== undefined && inheritedFonts.length > 0 && (
+						<span className="ml-1" style={{ fontFamily: inheritedFamily }}>
+							({inheritedFonts.join(" → ")})
+						</span>
+					)}
+				</p>
+			)}
+
+			{presetTags !== undefined ? (
+				<div className="flex flex-col gap-2">{presetTags}</div>
+			) : null}
+
+			{/* Custom font input */}
+			<Input
+				value={customInput}
+				onChange={(e) => setCustomInput(e.target.value)}
+				onKeyDown={handleCustomKeyDown}
+				placeholder={t("fontPicker.addCustom")}
+				aria-label={ariaLabel ?? t("fontPicker.addCustom")}
+			/>
+
+			{/* Selected font chips with drag sorting */}
+			{value.length > 0 && (
+				<div className="flex flex-col gap-2">
+					<p className="text-xs text-muted-foreground">{t("fontPicker.selected")}</p>
+					<DndContext
+						sensors={sensors}
+						collisionDetection={closestCenter}
+						onDragEnd={handleDragEnd}
+					>
+						<SortableContext
+							items={value as string[]}
+							strategy={rectSortingStrategy}
+						>
+							<div className="flex flex-wrap gap-2">
+								{value.map((name, index) => (
+									<SortableFontChip
+										key={name}
+										name={name}
+										resolveEntry={resolveEntry}
+										onRemove={() => removeFont(index)}
+									/>
+								))}
+							</div>
+						</SortableContext>
+					</DndContext>
+				</div>
+			)}
+
+			{/* Live preview — the stack rendered in its own family. Always
+			    visible: with no stack chosen the sample simply renders in
+			    the system font. */}
+			<div className="rounded-xl bg-background px-5 py-4">
+				<div
+					className="text-lg text-foreground"
+					style={{ fontFamily: previewFamily }}
+				>
+					{t("fontPicker.description")}
+				</div>
+				{value.length > 0 && (
+					<div className="mt-2 text-tiny text-muted-foreground">
+						{value
+							.map((name) => resolveEntry?.(name)?.label ?? name)
+							.join(" · ")}
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}
+
+type SortableFontChipProps = {
+	readonly name: string
+	readonly resolveEntry?: FontPickerProps["resolveEntry"]
+	readonly onRemove: () => void
+}
+
+function SortableFontChip(props: SortableFontChipProps) {
+	const { name, resolveEntry, onRemove } = props
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id: name, transition: null })
+
+	const style: React.CSSProperties = {
+		transform: CSS.Translate.toString(transform),
+		transition,
+		opacity: isDragging ? 0.5 : 1,
+	}
+
+	const entry = resolveEntry?.(name)
+	const displayName = entry?.label ?? name
+
+	return (
+		<div
+			ref={setNodeRef}
+			style={style}
+			className={cn(
+				"inline-flex items-center gap-1 rounded-md border bg-card px-2 py-1 text-sm",
+				isDragging && "z-10",
+			)}
+		>
+			<button
+				type="button"
+				className="cursor-grab text-muted-foreground active:cursor-grabbing"
+				{...attributes}
+				{...listeners}
+			>
+				<SortVertical className="size-3.5" />
+			</button>
+			<span style={{ fontFamily: entry?.family ?? name }}>{displayName}</span>
+			<button
+				type="button"
+				onClick={onRemove}
+				className="text-muted-foreground hover:text-destructive"
+			>
+				<Cross className="size-3.5" />
+			</button>
+		</div>
+	)
+}

package/src/components/form.tsx

@@ -0,0 +1,127 @@
+import { useRender } from "@base-ui/react/use-render"
+import { Label } from "@hoardodile/ui/components/label"
+import {
+	FormFieldContext,
+	FormItemContext,
+	useFormField,
+} from "@hoardodile/ui/hooks/use-form-field"
+import { cn } from "@hoardodile/ui/lib/utils"
+import * as React from "react"
+import {
+	Controller,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
+	FormProvider,
+} from "react-hook-form"
+
+const Form = FormProvider
+
+const FormField = <
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+	...props
+}: ControllerProps<TFieldValues, TName>) => {
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	)
+}
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+	const id = React.useId()
+
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div
+				data-slot="form-item"
+				className={cn("grid gap-2", className)}
+				{...props}
+			/>
+		</FormItemContext.Provider>
+	)
+}
+
+function FormLabel({
+	className,
+	...props
+}: React.ComponentProps<typeof Label>) {
+	const { error, formItemId } = useFormField()
+
+	return (
+		<Label
+			data-slot="form-label"
+			data-error={!!error}
+			className={cn("data-[error=true]:text-destructive", className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	)
+}
+
+function FormControl({ children }: { children: React.ReactElement }) {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+	return useRender({
+		render: children,
+		props: {
+			"data-slot": "form-control",
+			id: formItemId,
+			"aria-describedby": error
+				? `${formDescriptionId} ${formMessageId}`
+				: formDescriptionId,
+			"aria-invalid": !!error,
+		},
+	})
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+	const { formDescriptionId } = useFormField()
+
+	return (
+		<p
+			data-slot="form-description"
+			id={formDescriptionId}
+			className={cn("text-sm text-muted-foreground", className)}
+			{...props}
+		/>
+	)
+}
+
+function FormMessage({
+	className,
+	children,
+	...props
+}: React.ComponentProps<"p">) {
+	const { error, formMessageId } = useFormField()
+	const body = error ? String(error.message ?? "") : children
+
+	if (!body) {
+		return null
+	}
+
+	return (
+		<p
+			data-slot="form-message"
+			id={formMessageId}
+			role="alert"
+			className={cn("text-sm text-destructive", className)}
+			{...props}
+		>
+			{body}
+		</p>
+	)
+}
+
+export {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	useFormField,
+}

package/src/components/group-label.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react"
+
+/**
+ * Tiny group label inside picker blocks ("Selected", "Available", "Tags")
+ * — the PickerGroupLabel voice: 11px, uppercase, tracked.
+ */
+export function GroupLabel({ children }: { readonly children: ReactNode }) {
+	return (
+		<span className="text-tiny font-semibold tracking-label uppercase text-muted-foreground">
+			{children}
+		</span>
+	)
+}

package/src/components/icon-tile.tsx

@@ -0,0 +1,35 @@
+import {
+	Icon,
+	type IconSize,
+	type IconType,
+} from "@hoardodile/ui/components/icon"
+import { cn } from "@hoardodile/ui/lib/utils"
+
+/**
+ * 32/40px fill icon tile used by list rows and directory rows; the 40px
+ * tier pairs with the lg icon.
+ */
+export function IconTile({
+	icon,
+	size = 32,
+	iconSize,
+	className,
+}: {
+	readonly icon: IconType
+	readonly size?: 32 | 40
+	/** Icon tier — md (16) by default, lg (20) on the 40px tile. */
+	readonly iconSize?: IconSize
+	readonly className?: string
+}) {
+	return (
+		<span
+			className={cn(
+				"flex shrink-0 items-center justify-center rounded-lg bg-muted text-secondary-foreground",
+				size === 40 ? "size-10" : "size-8",
+				className,
+			)}
+		>
+			<Icon icon={icon} size={iconSize ?? "md"} />
+		</span>
+	)
+}

package/src/components/icon-toggle.tsx

@@ -0,0 +1,57 @@
+import { Icon, type IconType } from "@hoardodile/ui/components/icon"
+import { cn } from "@hoardodile/ui/lib/utils"
+
+export type IconToggleOption<T extends string> = {
+	readonly value: T
+	readonly icon: IconType
+	/** Accessible name (also the tooltip). */
+	readonly label: string
+	readonly testId?: string
+}
+
+type IconToggleProps<T extends string> = {
+	readonly value: T
+	readonly options: readonly IconToggleOption<T>[]
+	readonly onChange: (value: T) => void
+	readonly className?: string
+}
+
+/**
+ * Icon toggle: a segmented control of square icon buttons (grid/masonry
+ * view switchers). Muted track; the active button lifts to the card fill
+ * and its icon takes the Bold weight.
+ */
+export function IconToggle<T extends string>(props: IconToggleProps<T>) {
+	const { value, options, onChange, className } = props
+	return (
+		<span
+			className={cn(
+				"inline-flex shrink-0 items-center gap-0.5 rounded-lg bg-muted p-0.5",
+				className,
+			)}
+		>
+			{options.map((option) => {
+				const active = option.value === value
+				return (
+					<button
+						type="button"
+						key={option.value}
+						title={option.label}
+						aria-label={option.label}
+						aria-pressed={active}
+						data-testid={option.testId}
+						onClick={() => onChange(option.value)}
+						className={cn(
+							"flex size-7 cursor-pointer items-center justify-center rounded-md",
+							active
+								? "bg-card text-foreground"
+								: "text-muted-foreground hover:text-secondary-foreground",
+						)}
+					>
+						<Icon icon={option.icon} selected={active} className="size-4" />
+					</button>
+				)
+			})}
+		</span>
+	)
+}