@lovett/ui 0.0.1

package/src/folder-card.tsx

@@ -0,0 +1,188 @@
+/**
+ * FolderCard — drive-style folder tile.
+ *
+ * A horizontal tile: a colour-keyed folder-icon swatch, the folder
+ * name, an asset / subfolder count line, a hover-revealed selection
+ * checkbox, and an optional hover-revealed menu slot. Clicking the
+ * body opens the folder.
+ *
+ * Promoted to @lovett/ui in ADR-035 (Assets lens redesign). It is a
+ * primitive — not lens-local — because a folder card is a card
+ * surface and needs the internal surface tokens (`--bg-card`,
+ * `--border-card`); CLAUDE.md §5 says that is exactly when a
+ * component belongs in `packages/ui/`. Reusable by the v1.1 Swipes /
+ * Collections lenses (PRD §5.6) without a fork.
+ *
+ * Folder colour is a KEY into the `--folder-*` token palette
+ * (tokens.css — ADR-035 Decision 6), never a hex. The primitive maps
+ * the key to `rgb(var(--folder-<key>))`.
+ */
+
+import { useState, type KeyboardEvent, type ReactNode } from 'react'
+import { Check, Folder } from 'lucide-react'
+import { cn } from './lib/utils'
+
+export type FolderColorKey =
+  | 'red'
+  | 'amber'
+  | 'emerald'
+  | 'teal'
+  | 'blue'
+  | 'violet'
+  | 'pink'
+  | 'slate'
+  | 'ink'
+
+/** All folder colour keys, in palette order — for swatch pickers. */
+export const FOLDER_COLOR_KEYS: FolderColorKey[] = [
+  'red',
+  'amber',
+  'emerald',
+  'teal',
+  'blue',
+  'violet',
+  'pink',
+  'slate',
+  'ink',
+]
+
+/** Resolve a colour key to its `rgb(var(--folder-*))` CSS value. */
+export function folderColorVar(key: FolderColorKey): string {
+  return `rgb(var(--folder-${key}))`
+}
+
+export interface FolderCardProps {
+  name: string
+  colorKey: FolderColorKey
+  assetCount: number
+  /** Subfolder count — omitted or 0 → not shown. */
+  folderCount?: number
+  selected?: boolean
+  /** When true, a selection checkbox reveals on hover and stays
+   *  visible while selected. */
+  selectable?: boolean
+  onOpen: () => void
+  onSelect?: () => void
+  /** Optional menu affordance (e.g. a kebab trigger), revealed on
+   *  hover at the row end. */
+  menuSlot?: ReactNode
+  className?: string
+}
+
+export function FolderCard({
+  name,
+  colorKey,
+  assetCount,
+  folderCount = 0,
+  selected = false,
+  selectable = false,
+  onOpen,
+  onSelect,
+  menuSlot,
+  className,
+}: FolderCardProps) {
+  const [hover, setHover] = useState(false)
+  const color = folderColorVar(colorKey)
+  const showCheckbox = selectable && (hover || selected)
+
+  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onOpen()
+    }
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onOpen}
+      onKeyDown={onKeyDown}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      className={cn(
+        'group/folder relative flex items-center gap-3 px-3 py-2.5 cursor-pointer transition-shadow text-left',
+        className,
+      )}
+      style={{
+        background: selected
+          ? 'rgb(var(--accent-subtle))'
+          : 'rgb(var(--bg-card))',
+        border: `1px solid ${
+          selected ? 'rgb(var(--accent))' : 'rgb(var(--border-card))'
+        }`,
+        borderRadius: 'var(--radius-md)',
+        boxShadow: hover ? 'var(--shadow-sm)' : 'none',
+      }}
+    >
+      {/* Selection checkbox — top-left, revealed on hover / selected. */}
+      {showCheckbox && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation()
+            onSelect?.()
+          }}
+          aria-label={selected ? `Deselect ${name}` : `Select ${name}`}
+          aria-pressed={selected}
+          className="absolute top-2 left-2 z-[1] inline-flex h-[18px] w-[18px] items-center justify-center cursor-pointer text-white"
+          style={{
+            borderRadius: 'var(--radius-xs)',
+            background: selected
+              ? 'rgb(var(--accent))'
+              : 'rgb(var(--bg-card))',
+            border: `1.5px solid ${
+              selected ? 'rgb(var(--accent))' : 'rgb(var(--border-strong))'
+            }`,
+          }}
+        >
+          {selected && <Check className="h-3 w-3" strokeWidth={3} />}
+        </button>
+      )}
+
+      {/* Colour swatch + folder icon. */}
+      <span
+        className="inline-flex h-[38px] w-[38px] shrink-0 items-center justify-center"
+        style={{
+          borderRadius: 'var(--radius-sm)',
+          background: `rgb(var(--folder-${colorKey}) / 0.12)`,
+          color,
+        }}
+      >
+        <Folder className="h-5 w-5" strokeWidth={1.6} aria-hidden="true" />
+      </span>
+
+      {/* Name + count. */}
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span
+          className="truncate text-[13.5px] font-semibold"
+          style={{ color: 'rgb(var(--foreground))' }}
+        >
+          {name}
+        </span>
+        <span
+          className="text-[11.5px] tabular-nums"
+          style={{ color: 'rgb(var(--text-tertiary))' }}
+        >
+          {assetCount} {assetCount === 1 ? 'asset' : 'assets'}
+          {folderCount > 0 && (
+            <>
+              {' · '}
+              {folderCount} {folderCount === 1 ? 'folder' : 'folders'}
+            </>
+          )}
+        </span>
+      </div>
+
+      {/* Menu slot — revealed on hover. */}
+      {menuSlot && (
+        <span
+          className="shrink-0 opacity-0 transition-opacity group-hover/folder:opacity-100"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {menuSlot}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/folder-tree-picker.tsx

@@ -0,0 +1,511 @@
+/**
+ * FolderTreePicker — dropdown picker for a nestable folder tree.
+ *
+ * Behavior:
+ *   • Trigger renders the selected folder's name (with parent breadcrumb
+ *     when nested) or a placeholder when none.
+ *   • Popover shows a "(No folder)" option + DFS-ordered tree with
+ *     indent by depth.
+ *   • Optional inline "+ New folder" path — when the consumer passes
+ *     `onCreateFolder`, the popover footer exposes a create form whose
+ *     parent defaults to the currently selected folder (or root).
+ *
+ * Generic — accepts a `folders: Array<{ id, name, parentId }>` shape so
+ * any folder-like data structure can use it. First consumer: Keywords
+ * lens NewSetPage / NewGroupPage.
+ *
+ * Token discipline: tokens only (no hex). Trigger inherits the same
+ * `.btn .btn-secondary` chrome as our other dropdown triggers for
+ * visual consistency.
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type KeyboardEvent,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { Check, ChevronDown, FolderClosed, FolderPlus, X } from 'lucide-react'
+import { cn } from './lib/utils'
+
+export interface FolderTreeNode {
+  id: string
+  name: string
+  parentId: string | null
+}
+
+export interface FolderTreePickerProps {
+  /** Flat list of folder nodes (parentId references id). */
+  folders: FolderTreeNode[]
+  /** Currently selected folder id, or null for "no folder" / root. */
+  value: string | null
+  onChange: (next: string | null) => void
+  /** Optional inline-create handler. When omitted, the create UI is
+   *  hidden — the picker is read-only over the given folders. The
+   *  returned id is selected on success. */
+  onCreateFolder?: (input: {
+    name: string
+    parentId: string | null
+  }) => Promise<{ id: string }>
+  /** Placeholder when no folder is selected. */
+  placeholder?: string
+  /** Disable everything. */
+  disabled?: boolean
+  /** id for the trigger — supports label-for binding. */
+  id?: string
+  /** Optional className for the trigger button. */
+  className?: string
+  /** Apply error styling to the trigger. */
+  error?: boolean
+}
+
+interface OrderedNode extends FolderTreeNode {
+  depth: number
+}
+
+function buildOrderedTree(folders: FolderTreeNode[]): OrderedNode[] {
+  // Children index keyed by parentId (null bucket = root).
+  const byParent = new Map<string | null, FolderTreeNode[]>()
+  for (const f of folders) {
+    const list = byParent.get(f.parentId) ?? []
+    list.push(f)
+    byParent.set(f.parentId, list)
+  }
+  for (const list of byParent.values()) {
+    list.sort((a, b) => a.name.localeCompare(b.name))
+  }
+  const out: OrderedNode[] = []
+  const walk = (parentId: string | null, depth: number) => {
+    const children = byParent.get(parentId) ?? []
+    for (const child of children) {
+      out.push({ ...child, depth })
+      walk(child.id, depth + 1)
+    }
+  }
+  walk(null, 0)
+  return out
+}
+
+function buildBreadcrumb(
+  folders: FolderTreeNode[],
+  id: string | null,
+): string {
+  if (!id) return ''
+  const byId = new Map(folders.map((f) => [f.id, f]))
+  const chain: string[] = []
+  let cur: FolderTreeNode | undefined = byId.get(id)
+  while (cur) {
+    chain.unshift(cur.name)
+    cur = cur.parentId ? byId.get(cur.parentId) : undefined
+  }
+  return chain.join(' / ')
+}
+
+export function FolderTreePicker({
+  folders,
+  value,
+  onChange,
+  onCreateFolder,
+  placeholder = 'No folder',
+  disabled,
+  id,
+  className,
+  error,
+}: FolderTreePickerProps) {
+  const [open, setOpen] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [draft, setDraft] = useState('')
+  const [pending, setPending] = useState(false)
+  const [createError, setCreateError] = useState<string | null>(null)
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const popoverRef = useRef<HTMLDivElement | null>(null)
+  const draftInputRef = useRef<HTMLInputElement | null>(null)
+  const generatedId = useId()
+  const popoverId = `folder-picker-${generatedId.replace(/:/g, '')}`
+
+  const orderedTree = useMemo(() => buildOrderedTree(folders), [folders])
+  const selectedLabel = useMemo(
+    () => buildBreadcrumb(folders, value),
+    [folders, value],
+  )
+
+  const closeAndReset = useCallback(() => {
+    setOpen(false)
+    setCreating(false)
+    setDraft('')
+    setCreateError(null)
+  }, [])
+
+  // Outside-click + Escape.
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null
+      if (!target) return
+      if (triggerRef.current?.contains(target)) return
+      if (popoverRef.current?.contains(target)) return
+      closeAndReset()
+    }
+    const onKeyDown = (event: KeyboardEvent | globalThis.KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.stopPropagation()
+        closeAndReset()
+        triggerRef.current?.focus()
+      }
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown as EventListener)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown as EventListener)
+    }
+  }, [open, closeAndReset])
+
+  // Position the popover under the trigger. Same two-phase approach as
+  // <DropdownMenuContent>: render off-screen at first, measure, then
+  // reposition + reveal.
+  const [popoverPos, setPopoverPos] = useState<{
+    left: number
+    top: number
+    width: number
+  } | null>(null)
+  useLayoutEffect(() => {
+    if (!open) {
+      setPopoverPos(null)
+      return
+    }
+    const measure = () => {
+      const trig = triggerRef.current
+      if (!trig) return
+      const rect = trig.getBoundingClientRect()
+      // Width: at least 240px, capped at viewport.
+      const width = Math.max(
+        240,
+        Math.min(rect.width, window.innerWidth - 16),
+      )
+      const gutter = 8
+      let left = rect.left
+      const maxLeft = window.innerWidth - width - gutter
+      left = Math.max(gutter, Math.min(left, maxLeft))
+      const top = rect.bottom + 6
+      setPopoverPos({ left, top, width })
+    }
+    measure()
+    window.addEventListener('resize', measure)
+    window.addEventListener('scroll', measure, true)
+    return () => {
+      window.removeEventListener('resize', measure)
+      window.removeEventListener('scroll', measure, true)
+    }
+  }, [open])
+
+  // Focus the draft input when the create row opens.
+  useEffect(() => {
+    if (creating) {
+      // Delay one frame so the input renders before focus.
+      const handle = requestAnimationFrame(() => {
+        draftInputRef.current?.focus()
+      })
+      return () => cancelAnimationFrame(handle)
+    }
+    return undefined
+  }, [creating])
+
+  const handleCreate = async () => {
+    if (!onCreateFolder) return
+    const name = draft.trim()
+    if (!name) return
+    setPending(true)
+    setCreateError(null)
+    try {
+      const created = await onCreateFolder({
+        name,
+        parentId: value,
+      })
+      onChange(created.id)
+      closeAndReset()
+    } catch (err) {
+      setCreateError(
+        err instanceof Error ? err.message : 'Could not create folder.',
+      )
+    } finally {
+      setPending(false)
+    }
+  }
+
+  const handleDraftKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      handleCreate()
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      setCreating(false)
+      setDraft('')
+      setCreateError(null)
+    }
+  }
+
+  const isPositioned = popoverPos !== null
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        id={id}
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={open ? popoverId : undefined}
+        disabled={disabled}
+        onClick={() => setOpen((o) => !o)}
+        className={cn(
+          'btn btn-secondary justify-between w-full',
+          error && 'is-error',
+          className,
+        )}
+        style={{
+          borderColor: error ? 'rgb(var(--ring-error))' : undefined,
+        }}
+      >
+        <span className="inline-flex items-center gap-2 min-w-0">
+          <FolderClosed
+            className="h-4 w-4 shrink-0"
+            style={{
+              color: value
+                ? 'rgb(var(--text-secondary))'
+                : 'rgb(var(--text-tertiary))',
+            }}
+            aria-hidden="true"
+          />
+          <span
+            className="truncate"
+            style={{
+              color: value
+                ? 'rgb(var(--foreground))'
+                : 'rgb(var(--text-tertiary))',
+            }}
+          >
+            {selectedLabel || placeholder}
+          </span>
+        </span>
+        <ChevronDown
+          className="h-4 w-4 shrink-0"
+          aria-hidden="true"
+          style={{ color: 'rgb(var(--text-muted))' }}
+        />
+      </button>
+
+      {open && typeof document !== 'undefined'
+        ? createPortal(
+            <div
+              ref={popoverRef}
+              id={popoverId}
+              role="listbox"
+              className="fixed z-[100] overflow-hidden flex flex-col"
+              style={{
+                left: popoverPos?.left ?? -99999,
+                top: popoverPos?.top ?? -99999,
+                width: popoverPos?.width,
+                opacity: isPositioned ? undefined : 0,
+                visibility: isPositioned ? 'visible' : 'hidden',
+                pointerEvents: isPositioned ? undefined : 'none',
+                background: 'rgb(var(--popover))',
+                color: 'rgb(var(--popover-foreground))',
+                border: '1px solid rgb(var(--border))',
+                borderRadius: 'var(--radius-md)',
+                boxShadow:
+                  'var(--shadow-lg, 0 10px 32px rgba(0,0,0,0.18))',
+                maxHeight: 'min(60vh, 28rem)',
+              }}
+            >
+              <div className="overflow-y-auto flex-1 p-1">
+                <PickerOption
+                  label={placeholder}
+                  selected={value === null}
+                  depth={0}
+                  showIcon={false}
+                  onClick={() => {
+                    onChange(null)
+                    closeAndReset()
+                  }}
+                />
+                {orderedTree.length > 0 && (
+                  <div
+                    className="my-1 h-px"
+                    style={{ background: 'rgb(var(--border))' }}
+                  />
+                )}
+                {orderedTree.map((node) => (
+                  <PickerOption
+                    key={node.id}
+                    label={node.name}
+                    selected={value === node.id}
+                    depth={node.depth}
+                    showIcon
+                    onClick={() => {
+                      onChange(node.id)
+                      closeAndReset()
+                    }}
+                  />
+                ))}
+              </div>
+
+              {onCreateFolder && (
+                <div
+                  className="p-1 shrink-0"
+                  style={{
+                    borderTop: '1px solid rgb(var(--border))',
+                    background: 'rgb(var(--surface-overlay-soft))',
+                  }}
+                >
+                  {creating ? (
+                    <div className="flex flex-col gap-1 px-1.5 py-1">
+                      <div className="flex items-center gap-1.5">
+                        <FolderPlus
+                          className="h-3.5 w-3.5 shrink-0"
+                          style={{ color: 'rgb(var(--text-muted))' }}
+                          aria-hidden="true"
+                        />
+                        <input
+                          ref={draftInputRef}
+                          type="text"
+                          value={draft}
+                          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                            setDraft(e.target.value)
+                          }
+                          onKeyDown={handleDraftKeyDown}
+                          placeholder={
+                            value
+                              ? 'New sub-folder name'
+                              : 'New folder name'
+                          }
+                          maxLength={80}
+                          disabled={pending}
+                          className="flex-1 min-w-0 bg-transparent text-[13px] outline-none"
+                          style={{ color: 'rgb(var(--foreground))' }}
+                        />
+                        <button
+                          type="button"
+                          aria-label="Cancel new folder"
+                          onClick={() => {
+                            setCreating(false)
+                            setDraft('')
+                            setCreateError(null)
+                          }}
+                          className="inline-flex h-5 w-5 items-center justify-center rounded-[var(--radius-xs)] hover:bg-[rgb(var(--surface-overlay))]"
+                          style={{ color: 'rgb(var(--text-muted))' }}
+                        >
+                          <X className="h-3 w-3" aria-hidden="true" />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={handleCreate}
+                          disabled={pending || draft.trim().length === 0}
+                          className="btn btn-primary size-sm"
+                        >
+                          Create
+                        </button>
+                      </div>
+                      {value && (
+                        <span
+                          className="text-[11px] pl-5"
+                          style={{ color: 'rgb(var(--text-tertiary))' }}
+                        >
+                          Created inside {selectedLabel}
+                        </span>
+                      )}
+                      {createError && (
+                        <span
+                          role="alert"
+                          className="text-[11px] pl-5"
+                          style={{ color: 'rgb(var(--destructive))' }}
+                        >
+                          {createError}
+                        </span>
+                      )}
+                    </div>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={() => setCreating(true)}
+                      className="w-full flex items-center gap-2 px-2 py-1.5 text-left text-[13px] rounded-[var(--radius-xs)] hover:bg-[rgb(var(--surface-overlay))]"
+                      style={{ color: 'rgb(var(--foreground))' }}
+                    >
+                      <FolderPlus
+                        className="h-3.5 w-3.5 shrink-0"
+                        style={{ color: 'rgb(var(--text-muted))' }}
+                        aria-hidden="true"
+                      />
+                      <span>New folder</span>
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>,
+            document.body,
+          )
+        : null}
+    </>
+  )
+}
+
+interface PickerOptionProps {
+  label: string
+  selected: boolean
+  depth: number
+  showIcon: boolean
+  onClick: () => void
+}
+
+function PickerOption({
+  label,
+  selected,
+  depth,
+  showIcon,
+  onClick,
+}: PickerOptionProps) {
+  return (
+    <button
+      type="button"
+      role="option"
+      aria-selected={selected}
+      onClick={onClick}
+      className={cn(
+        'w-full flex items-center gap-2 px-2 py-1.5 text-left text-[13px]',
+        'rounded-[var(--radius-xs)] cursor-default',
+        selected
+          ? 'bg-[rgb(var(--surface-overlay))]'
+          : 'hover:bg-[rgb(var(--surface-overlay-soft))]',
+      )}
+      style={{
+        color: 'rgb(var(--foreground))',
+        paddingLeft: `${0.5 + depth * 0.875}rem`,
+      }}
+    >
+      {showIcon ? (
+        <FolderClosed
+          className="h-3.5 w-3.5 shrink-0"
+          style={{ color: 'rgb(var(--text-muted))' }}
+          aria-hidden="true"
+        />
+      ) : (
+        <span className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+      )}
+      <span className="truncate flex-1">{label}</span>
+      {selected && (
+        <Check
+          className="h-3.5 w-3.5 shrink-0"
+          style={{ color: 'rgb(var(--accent))' }}
+          aria-hidden="true"
+        />
+      )}
+    </button>
+  )
+}