@hoardodile/ui 0.0.0

package/src/components/close-confirm-dialog.tsx

@@ -0,0 +1,99 @@
+import { AppDialog } from "@hoardodile/ui/components/app-dialog"
+import { Button } from "@hoardodile/ui/components/button"
+import { Checkbox } from "@hoardodile/ui/components/checkbox"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+export type CloseConfirmDialogProps = {
+	readonly open: boolean
+	readonly onOpenChange: (open: boolean) => void
+	readonly onDecide: (action: "tray" | "quit", remember: boolean) => void
+}
+
+/**
+ * The shared close confirmation: hide to tray (primary), quit, or cancel,
+ * plus a "remember my choice" checkbox. Copy comes from the shared `ui`
+ * catalog namespace, so the SPA, the shell's static pages and the
+ * workbench all render the same strings for the current language (the
+ * native dialog in the Electron main process reads the same catalog
+ * directly). The three-button footer follows DESIGN.md: quit at the left
+ * edge, cancel and the primary action right-aligned.
+ */
+export function CloseConfirmDialog(props: CloseConfirmDialogProps) {
+	const { open, onOpenChange, onDecide } = props
+	const { t } = useTranslation("ui", { useSuspense: false })
+	const [remember, setRemember] = useState(false)
+
+	// One-shot choice: the checkbox applies only to the close it was
+	// checked on. Resetting it whenever the dialog closes stops a stale
+	// check from re-persisting the old action (and undoing the Settings →
+	// App preference) the next time the dialog opens.
+	useEffect(() => {
+		if (!open) setRemember(false)
+	}, [open])
+
+	const footer = (
+		<>
+			{/* Three-button footer (DESIGN.md — Overlays): the secondary
+			    function key (quit) sits at the left edge; cancel and the
+			    primary action (hide to tray) stay right-aligned. */}
+			<Button
+				variant="secondary"
+				className="mr-auto"
+				onClick={() => {
+					onDecide("quit", remember)
+				}}
+				data-testid="close-confirm-quit"
+			>
+				{t("closeConfirm.quit")}
+			</Button>
+			<Button
+				variant="secondary"
+				onClick={() => {
+					onOpenChange(false)
+				}}
+				data-testid="close-confirm-cancel"
+			>
+				{t("closeConfirm.cancel")}
+			</Button>
+			<Button
+				variant="default"
+				onClick={() => {
+					onDecide("tray", remember)
+				}}
+				data-testid="close-confirm-tray"
+			>
+				{t("closeConfirm.tray")}
+			</Button>
+		</>
+	)
+
+	return (
+		<AppDialog
+			open={open}
+			onOpenChange={onOpenChange}
+			title={t("closeConfirm.title")}
+			description={t("closeConfirm.description")}
+			footer={footer}
+		>
+			{/* The checkbox is the only toggle (no label row); `py-2` keeps
+			    it from sitting flush against the description and the
+			    footer hairline. */}
+			<div
+				className="flex items-center gap-2 py-2 select-none"
+				data-testid="close-confirm-remember"
+			>
+				<Checkbox
+					checked={remember}
+					onCheckedChange={(checked) => {
+						setRemember(checked === true)
+					}}
+					aria-label={t("closeConfirm.remember")}
+				/>
+				<span className="text-xs text-muted-foreground">
+					{t("closeConfirm.remember")}
+				</span>
+			</div>
+		</AppDialog>
+	)
+}

package/src/components/color-picker.tsx

@@ -0,0 +1,186 @@
+import { Cross } from "@hoardodile/ui/icons/marks"
+import { Bookmark, Palette } from "@hoardodile/ui/icons/registry"
+import { cn } from "@hoardodile/ui/lib/utils"
+import { type ReactNode } from "react"
+import { useTranslation } from "react-i18next"
+
+export type ColorPickerProps = {
+	readonly value: string
+	readonly onChange: (color: string) => void
+	/** Default preset colors — one dot each. */
+	readonly presets?: readonly string[]
+	/** User presets appended after the defaults; their dots carry a
+	    hover-revealed remove. */
+	readonly userPresets?: readonly string[]
+	/** Pins the current custom value to the user presets. */
+	readonly onAddPreset?: () => void
+	readonly onRemovePreset?: (index: number) => void
+	/** Special-style ids rendered as chips by the injected renderer
+	    (the consumer owns the surface, e.g. gradient chips). */
+	readonly specialStyles?: readonly string[]
+	readonly renderSpecialStyle?: (
+		style: string,
+		active: boolean,
+		onPick: () => void,
+	) => ReactNode
+	readonly placeholder?: string
+	readonly testId?: string
+}
+
+/**
+ * Color field: the current value leads as a removable pill (a dot + hex
+ * in a muted pill, or the special-style chip), the default and user
+ * presets merge into one row of dots — whitespace parts the registers —
+ * and the special styles ride below as their own chips. Custom colors
+ * enter through the dashed swatch at the row's end (a real color input
+ * underneath — the OS picker opens on click).
+ */
+export function ColorPicker(props: ColorPickerProps) {
+	const {
+		value,
+		onChange,
+		presets = [],
+		userPresets = [],
+		onAddPreset,
+		onRemovePreset,
+		specialStyles = [],
+		renderSpecialStyle,
+		placeholder,
+		testId,
+	} = props
+	const { t } = useTranslation("ui", { useSuspense: false })
+
+	const hasColor = value !== ""
+	const isSpecial = specialStyles.includes(value)
+	const isCustom =
+		hasColor &&
+		!isSpecial &&
+		![...presets, ...userPresets]
+			.map((c) => c.toLowerCase())
+			.includes(value.toLowerCase())
+
+	const inputValue = hasColor && !isSpecial ? value : "#9D9D9D"
+
+	return (
+		<div className="flex flex-col gap-2.5" data-testid={testId}>
+			<span className="flex items-center gap-1.5">
+				{hasColor && (
+					<span
+						className={cn(
+							"inline-flex h-chip w-fit items-center gap-1 rounded-md pr-1.5 text-xs text-foreground",
+							!isSpecial && "bg-muted pl-2",
+						)}
+					>
+						{isSpecial && renderSpecialStyle !== undefined ? (
+							<span className="pointer-events-none">
+								{renderSpecialStyle(value, true, () => {})}
+							</span>
+						) : (
+							<>
+								<span
+									className="size-2 shrink-0 rounded-full"
+									style={{ backgroundColor: value }}
+								/>
+								<span className="-translate-y-px">{value}</span>
+							</>
+						)}
+						<button
+							type="button"
+							onClick={() => onChange("")}
+							aria-label={t("colorPicker.clear")}
+							className="flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 text-muted-foreground hover:text-foreground"
+							data-testid={testId !== undefined ? `${testId}-clear` : undefined}
+						>
+							<Cross className="size-3" />
+						</button>
+					</span>
+				)}
+				{isCustom && onAddPreset !== undefined && (
+					<button
+						type="button"
+						onClick={onAddPreset}
+						aria-label={t("colorPicker.addPreset")}
+						className="flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent p-0 text-muted-foreground hover:bg-muted hover:text-foreground"
+						data-testid={
+							testId !== undefined ? `${testId}-add-preset` : undefined
+						}
+					>
+						<Bookmark className="size-3" />
+					</button>
+				)}
+			</span>
+
+			{/* One row of dots: the default presets, then the user's own —
+			    parted by whitespace, not labels. A my-preset dot's remove
+			    appears on hover (pinned on the last one). */}
+			<span className="flex flex-wrap items-center gap-1.5">
+				{presets.map((color) => (
+					<button
+						type="button"
+						key={color}
+						onClick={() => onChange(color)}
+						className="size-5 shrink-0 cursor-pointer rounded-full border-0 p-0"
+						style={{ backgroundColor: color }}
+						aria-label={color}
+					/>
+				))}
+				{userPresets.map((color, index) => (
+					<span key={`${color}-${index}`} className="group/color relative ml-2">
+						<button
+							type="button"
+							onClick={() => onChange(color)}
+							className="block size-5 cursor-pointer rounded-full border-0 p-0"
+							style={{ backgroundColor: color }}
+							aria-label={color}
+						/>
+						{onRemovePreset !== undefined && (
+							<button
+								type="button"
+								onClick={() => onRemovePreset(index)}
+								aria-label={t("colorPicker.removePresetAria", { color })}
+								className={cn(
+									"absolute -top-1 -right-1 flex size-3.5 cursor-pointer items-center justify-center rounded-full border border-border bg-background p-0 text-muted-foreground hover:text-foreground",
+									index === userPresets.length - 1
+										? "opacity-100"
+										: "opacity-0 transition-opacity group-hover/color:opacity-100",
+								)}
+							>
+								<Cross className="size-2" />
+							</button>
+						)}
+					</span>
+				))}
+				{/* The custom swatch — dashed until a custom color is set, then
+				    filled; the real color input underneath opens the OS
+				    picker. */}
+				<span
+					title={t("colorPicker.customSwatch")}
+					className={cn(
+						"relative ml-2 flex size-5 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full",
+						isCustom ? "" : "border border-dashed border-border-strong",
+					)}
+					style={isCustom ? { backgroundColor: value } : undefined}
+				>
+					{!isCustom && <Palette className="size-3 text-muted-foreground" />}
+					<input
+						type="color"
+						value={inputValue}
+						onChange={(e) => onChange(e.target.value)}
+						className="absolute inset-0 cursor-pointer opacity-0"
+						data-testid={testId !== undefined ? `${testId}-input` : undefined}
+						title={placeholder}
+						aria-label={t("colorPicker.customSwatch")}
+					/>
+				</span>
+			</span>
+
+			{specialStyles.length > 0 && renderSpecialStyle !== undefined ? (
+				<span className="flex flex-wrap gap-1.5">
+					{specialStyles.map((style) =>
+						renderSpecialStyle(style, value === style, () => onChange(style)),
+					)}
+				</span>
+			) : null}
+		</div>
+	)
+}

package/src/components/combobox.tsx

@@ -0,0 +1,335 @@
+"use client"
+
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+
+import { cn } from "@hoardodile/ui/lib/utils"
+import { useMobileBackToClose } from "@hoardodile/ui/hooks/useMobileBackToClose"
+import { Button } from "@hoardodile/ui/components/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@hoardodile/ui/components/input-group"
+import { AltArrowDown } from "@hoardodile/ui/icons/registry"
+import { Check, Cross } from "@hoardodile/ui/icons/marks"
+
+function Combobox<Value, Multiple extends boolean | undefined = false>({
+  open,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}: Omit<ComboboxPrimitive.Root.Props<Value, Multiple>, "onOpenChange"> & {
+  /**
+   * `eventDetails` is absent for closes triggered by the mobile back
+   * gesture (a synthetic close with no underlying Base UI event).
+   */
+  onOpenChange?: (
+    open: boolean,
+    eventDetails?: ComboboxPrimitive.Root.ChangeEventDetails,
+  ) => void
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+    defaultOpen ?? false,
+  )
+  const isControlled = open !== undefined
+  const currentOpen = isControlled ? open : uncontrolledOpen
+  function handleOpenChange(
+    next: boolean,
+    eventDetails?: ComboboxPrimitive.Root.ChangeEventDetails,
+  ) {
+    if (!isControlled) setUncontrolledOpen(next)
+    onOpenChange?.(next, eventDetails)
+  }
+  useMobileBackToClose(currentOpen, handleOpenChange)
+  return (
+    <ComboboxPrimitive.Root<Value, Multiple>
+      open={currentOpen}
+      onOpenChange={handleOpenChange}
+      {...props}
+    />
+  )
+}
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <AltArrowDown className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <Cross className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            render={<ComboboxTrigger />}
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <Check className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <Cross className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}