@lovett/ui 0.0.1

package/src/filter-dropdown.tsx

@@ -0,0 +1,289 @@
+/**
+ * FilterDropdown — pill-shaped "Key: Value ▾" filter trigger that opens
+ * a menu of options. Each option can show a right-aligned count.
+ *
+ *   <FilterDropdown
+ *     label="Platform"
+ *     value={activePlatform}
+ *     onChange={setActivePlatform}
+ *     options={[
+ *       { value: 'all', label: 'All platforms' },
+ *       { value: 'facebook', label: 'Facebook', count: 12 },
+ *     ]}
+ *   />
+ *
+ * Visual matches the `prototype/assets.html` filter row: muted-key
+ * trigger that flips to accent-muted bg when a non-default value is
+ * selected; menu items show count on the right.
+ *
+ * Promoted from `brand-ai-extension/webapp/src/components/ui/filter-dropdown.tsx`
+ * as part of Phase A of the v1.1 lens port batch — used by Swipes
+ * (multi-filter strip), candidate for Collections + Prompts.
+ */
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react'
+import { ChevronDown, Check } from 'lucide-react'
+import { cn } from './lib/utils'
+
+export interface FilterOption<T extends string = string> {
+  value: T
+  label: string
+  /** Right-aligned count chip in the menu. */
+  count?: number
+  /** Optional left-side adornment (icon, color dot). */
+  leading?: ReactNode
+}
+
+export interface FilterDropdownProps<T extends string = string> {
+  label: string
+  value: T
+  onChange: (value: T) => void
+  options: FilterOption<T>[]
+  /** The value treated as "no filter applied" — defaults to "all". When
+   *  `value` differs from this, the trigger flips to its active style. */
+  neutralValue?: T
+  /** Defaults to the option label. */
+  triggerValueLabel?: string
+  className?: string
+  align?: 'left' | 'right'
+}
+
+export function FilterDropdown<T extends string = string>({
+  label,
+  value,
+  onChange,
+  options,
+  neutralValue = 'all' as T,
+  triggerValueLabel,
+  className,
+  align = 'left',
+}: FilterDropdownProps<T>) {
+  const [open, setOpen] = useState(false)
+  const [highlight, setHighlight] = useState(-1)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([])
+
+  const active = value !== neutralValue
+  const selectedIndex = useMemo(
+    () => options.findIndex((o) => o.value === value),
+    [options, value],
+  )
+  const selected = selectedIndex >= 0 ? options[selectedIndex] : undefined
+  const valueLabel =
+    triggerValueLabel ?? (selected ? shortLabel(selected.label) : 'All')
+
+  const triggerLeading = active ? selected?.leading : undefined
+
+  const close = useCallback(() => {
+    setOpen(false)
+    setHighlight(-1)
+  }, [])
+
+  const openMenu = useCallback(() => {
+    setOpen(true)
+    setHighlight(selectedIndex >= 0 ? selectedIndex : 0)
+  }, [selectedIndex])
+
+  useEffect(() => {
+    if (!open) return
+    function onDocClick(e: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+        close()
+      }
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') close()
+    }
+    document.addEventListener('mousedown', onDocClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDocClick)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open, close])
+
+  useLayoutEffect(() => {
+    if (!open || highlight < 0) return
+    itemRefs.current[highlight]?.scrollIntoView({ block: 'nearest' })
+  }, [open, highlight])
+
+  const onTriggerKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    const lastIndex = options.length - 1
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (!open) {
+        openMenu()
+      } else {
+        setHighlight((h) => (h >= lastIndex ? 0 : h + 1))
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      if (!open) {
+        openMenu()
+      } else {
+        setHighlight((h) => (h <= 0 ? lastIndex : h - 1))
+      }
+    } else if (e.key === 'Home') {
+      if (open) {
+        e.preventDefault()
+        setHighlight(0)
+      }
+    } else if (e.key === 'End') {
+      if (open) {
+        e.preventDefault()
+        setHighlight(lastIndex)
+      }
+    } else if (e.key === 'Enter' || e.key === ' ') {
+      if (open && highlight >= 0) {
+        e.preventDefault()
+        const opt = options[highlight]
+        if (opt) {
+          onChange(opt.value)
+          close()
+        }
+      }
+    }
+  }
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={cn('relative inline-block', className)}
+    >
+      <button
+        type="button"
+        onClick={() => (open ? close() : openMenu())}
+        onKeyDown={onTriggerKeyDown}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className="inline-flex items-center gap-1.5 h-8 px-3 text-[12px] font-medium cursor-pointer transition-colors"
+        style={{
+          background: active
+            ? 'rgb(var(--accent-muted))'
+            : 'rgb(var(--bg-elevated))',
+          border: `1px solid ${active ? 'rgb(var(--accent) / 0.35)' : 'rgb(var(--border))'}`,
+          color: active ? 'rgb(var(--accent))' : 'rgb(var(--text-secondary))',
+          borderRadius: 999,
+        }}
+      >
+        <span
+          className="font-semibold"
+          style={{
+            color: active ? 'rgb(var(--accent))' : 'rgb(var(--text-muted))',
+          }}
+        >
+          {label}:
+        </span>
+        {triggerLeading && (
+          <span className="shrink-0 inline-flex items-center">
+            {triggerLeading}
+          </span>
+        )}
+        <span
+          style={{
+            color: active ? 'rgb(var(--accent))' : 'rgb(var(--foreground))',
+          }}
+        >
+          {valueLabel}
+        </span>
+        <ChevronDown
+          className={cn('h-3 w-3 transition-transform', open && 'rotate-180')}
+          style={{
+            color: active ? 'rgb(var(--accent))' : 'rgb(var(--text-muted))',
+          }}
+        />
+      </button>
+
+      {open && (
+        <div
+          role="listbox"
+          aria-label={label}
+          aria-activedescendant={
+            highlight >= 0 ? `${label}-opt-${highlight}` : undefined
+          }
+          className={cn(
+            'absolute z-30 mt-1.5 min-w-[200px] p-1.5',
+            align === 'right' ? 'right-0' : 'left-0',
+          )}
+          style={{
+            background: 'rgb(var(--bg-elevated))',
+            border: '1px solid rgb(var(--border))',
+            borderRadius: 'var(--radius-md)',
+            boxShadow: 'var(--shadow-lg)',
+          }}
+        >
+          {options.map((opt, i) => {
+            const isActive = opt.value === value
+            const isHighlighted = i === highlight
+            const bg = isActive
+              ? 'rgb(var(--accent-muted))'
+              : isHighlighted
+                ? 'rgb(var(--surface-overlay))'
+                : 'transparent'
+            const fg = isActive
+              ? 'rgb(var(--accent))'
+              : isHighlighted
+                ? 'rgb(var(--foreground))'
+                : 'rgb(var(--text-secondary))'
+            return (
+              <button
+                key={opt.value}
+                ref={(el) => {
+                  itemRefs.current[i] = el
+                }}
+                id={`${label}-opt-${i}`}
+                role="option"
+                aria-selected={isActive}
+                type="button"
+                onClick={() => {
+                  onChange(opt.value)
+                  close()
+                }}
+                onMouseEnter={() => setHighlight(i)}
+                className="flex w-full items-center gap-2 px-2.5 py-[7px] text-[12.5px] text-left cursor-pointer rounded-[8px] border-0"
+                style={{ background: bg, color: fg }}
+              >
+                {opt.leading && (
+                  <span className="shrink-0 inline-flex items-center">
+                    {opt.leading}
+                  </span>
+                )}
+                <span className="truncate flex-1">{opt.label}</span>
+                {typeof opt.count === 'number' && (
+                  <span
+                    className="text-[11px] font-medium tabular-nums"
+                    style={{
+                      color: isActive
+                        ? 'rgb(var(--accent) / 0.7)'
+                        : 'rgb(var(--text-muted))',
+                    }}
+                  >
+                    {opt.count.toLocaleString()}
+                  </span>
+                )}
+                {isActive && typeof opt.count !== 'number' && (
+                  <Check
+                    className="h-3 w-3 shrink-0"
+                    style={{ color: 'rgb(var(--accent))' }}
+                  />
+                )}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function shortLabel(label: string) {
+  if (label.toLowerCase().startsWith('all ')) return 'All'
+  return label
+}

package/src/floating-drawer.tsx

@@ -0,0 +1,420 @@
+/**
+ * FloatingDrawer — edge-anchored, floating-shell drawer.
+ *
+ * Promoted in Phase 7a (ADR-012 Decision 4) from
+ * brand-ai-extension/webapp/src/components/ui/detail-drawer.tsx. The
+ * right-anchored variant ports verbatim from that source. The bottom-
+ * anchored variant with drag-to-resize is BUILD_FRESH inside this
+ * primitive, born of GeoSearch's ResultsDrawer needs.
+ *
+ * Two committed consumers from day 1 (zero-current-consumers rule):
+ *   • GeoSearch (`side="bottom"`, `anchor="container"`, resizable) —
+ *     Phase 7a — non-modal, scoped to the lens main pane
+ *   • Future card-grid lenses (`side="right"`, modal) — Phase 4+
+ *
+ * Anatomy:
+ *   ResizeHandle (optional)        — leading edge for drag-to-resize
+ *   Header (title + titleSlot)     — single compact row; consumer
+ *                                     drives layout via `title` slot
+ *   Body (scrollable children)
+ *   Footer (optional)              — action row, separator above
+ *
+ * The drawer owns its internal token references (`--bg-surface`,
+ * `--border`, `--modal-overlay`) — consumers never reach for them.
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from 'react'
+import { X } from 'lucide-react'
+import { cn } from './lib/utils'
+
+type Side = 'right' | 'bottom'
+type Anchor = 'viewport' | 'container'
+
+export interface FloatingDrawerProps {
+  isOpen: boolean
+  onClose: () => void
+  side: Side
+  /** Width (`side="right"`) or height (`side="bottom"`) in px. Defaults: 520 / 480. */
+  size?: number
+  /** When true, render a drag handle along the leading edge of the panel. */
+  resizable?: boolean
+  /** Called as the user drags the resize handle. */
+  onResize?: (next: number) => void
+  /** Header title — short, e.g. the record's name or the drawer's purpose. */
+  title?: ReactNode
+  /** Optional element rendered to the right of the title, before close. */
+  titleSlot?: ReactNode
+  /** Optional footer — action buttons. */
+  footer?: ReactNode
+  children: ReactNode
+  className?: string
+  /** Optional className on the inner panel for fine-grained body styling. */
+  panelClassName?: string
+  /**
+   * Modal mode renders a backdrop, locks body scroll, and closes on Esc
+   * (default — matches the card-grid drawer use case). Non-modal mode
+   * (used by GeoSearch's always-on results panel per Phase 7a) skips
+   * the backdrop + scroll lock + Esc handler so the user can interact
+   * with content behind the panel.
+   */
+  modal?: boolean
+  /**
+   * Collapsed mode hides the body and footer entirely so the panel
+   * shrinks to just the header — no residual flex-1 body div, no
+   * seam between header and panel edge. Designed for non-modal,
+   * always-on consumers (GeoSearch) where the user toggles the panel
+   * between "show table" and "hide table" without dismissing it.
+   * The header keeps its border-bottom hidden in this state so it
+   * reads as a clean single-bar strip.
+   *
+   * When collapsed, callers should pass `size` matching the header's
+   * natural height (Phase 7a uses 44px); panel border + header chrome
+   * fit cleanly inside that height with `box-sizing: border-box`.
+   */
+  collapsed?: boolean
+  /**
+   * `'viewport'` (default) anchors the drawer with `position: fixed` to
+   * the browser viewport — the card-grid drawer pattern. `'container'`
+   * anchors with `position: absolute` to the nearest positioned ancestor
+   * (the parent MUST establish a containing block, e.g.
+   * `position: relative`). Container mode scopes the drawer to a lens
+   * pane so it doesn't escape the surrounding chrome — used by
+   * GeoSearch in Phase 7a.
+   */
+  anchor?: Anchor
+  /** Whether to render a default close (X) button after `titleSlot`. Default true. */
+  showClose?: boolean
+  /** Override the header padding. Default: `px-4 py-2.5` — tighter than
+   * the right-drawer's body padding so the action bar feels integrated. */
+  headerClassName?: string
+}
+
+const DEFAULT_SIZE: Record<Side, number> = { right: 520, bottom: 480 }
+// Bottom drawer minimum — at least header + a row of content visible.
+const MIN_SIZE: Record<Side, number> = { right: 360, bottom: 180 }
+// 16px of gap budget keeps the floating shell off the screen edges.
+const EDGE_GAP = 8
+
+export function FloatingDrawer({
+  isOpen,
+  onClose,
+  side,
+  size,
+  resizable = false,
+  onResize,
+  title,
+  titleSlot,
+  footer,
+  children,
+  className,
+  panelClassName,
+  modal = true,
+  anchor = 'viewport',
+  showClose = true,
+  headerClassName,
+  collapsed = false,
+}: FloatingDrawerProps) {
+  const resolvedSize = size ?? DEFAULT_SIZE[side]
+
+  // Close on Esc — modal mode only.
+  useEffect(() => {
+    if (!isOpen || !modal) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [isOpen, onClose, modal])
+
+  // Body scroll lock — modal mode only.
+  useEffect(() => {
+    if (!isOpen || !modal) return
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = prev
+    }
+  }, [isOpen, modal])
+
+  // Pointer-drag resize. Tracks the live size locally so the handle feels
+  // responsive even when the parent throttles `onResize` updates.
+  const [dragSize, setDragSize] = useState<number | null>(null)
+  const draggingRef = useRef(false)
+
+  const onPointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!resizable) return
+      event.preventDefault()
+      draggingRef.current = true
+      const startCoord = side === 'bottom' ? event.clientY : event.clientX
+      const startSize = resolvedSize
+
+      const onMove = (e: PointerEvent) => {
+        if (!draggingRef.current) return
+        const coord = side === 'bottom' ? e.clientY : e.clientX
+        const delta = startCoord - coord
+        const next = Math.max(MIN_SIZE[side], startSize + delta)
+        setDragSize(next)
+        onResize?.(next)
+      }
+
+      const onUp = () => {
+        draggingRef.current = false
+        setDragSize(null)
+        document.removeEventListener('pointermove', onMove)
+        document.removeEventListener('pointerup', onUp)
+      }
+
+      document.addEventListener('pointermove', onMove)
+      document.addEventListener('pointerup', onUp)
+    },
+    [resizable, side, resolvedSize, onResize],
+  )
+
+  const liveSize = dragSize ?? resolvedSize
+  const isContainer = anchor === 'container'
+
+  // Viewport vs container only differs in (a) position and (b) maxSize
+  // bounds. Edge gap + transform geometry is identical.
+  const panelStyle =
+    side === 'right'
+      ? {
+          position: isContainer ? ('absolute' as const) : ('fixed' as const),
+          top: EDGE_GAP,
+          right: EDGE_GAP,
+          bottom: EDGE_GAP,
+          width: liveSize,
+          maxWidth: isContainer
+            ? `calc(100% - ${EDGE_GAP * 2}px)`
+            : 'calc(100vw - 16px)',
+          boxShadow: '-8px 0 40px rgba(0,0,0,0.3)',
+          transform: isOpen
+            ? 'translateX(0)'
+            : 'translateX(calc(100% + 16px))',
+        }
+      : {
+          position: isContainer ? ('absolute' as const) : ('fixed' as const),
+          left: EDGE_GAP,
+          right: EDGE_GAP,
+          bottom: EDGE_GAP,
+          height: liveSize,
+          maxHeight: isContainer
+            ? `calc(100% - ${EDGE_GAP * 2}px)`
+            : 'calc(100dvh - 16px)',
+          boxShadow: '0 -8px 40px rgba(0,0,0,0.3)',
+          transform: isOpen
+            ? 'translateY(0)'
+            : 'translateY(calc(100% + 16px))',
+        }
+
+  const backdropClass = isContainer
+    ? 'absolute inset-0 z-[40] transition-opacity duration-200'
+    : 'fixed inset-0 z-[99] transition-opacity duration-200'
+
+  const panelZ = isContainer ? 'z-[50]' : 'z-[100]'
+
+  return (
+    <>
+      {/* Backdrop — modal mode only. */}
+      {modal && (
+        <div
+          onClick={onClose}
+          aria-hidden="true"
+          className={cn(
+            backdropClass,
+            isOpen
+              ? 'opacity-100 pointer-events-auto'
+              : 'opacity-0 pointer-events-none',
+          )}
+          style={{ background: 'rgb(var(--modal-overlay))' }}
+        />
+      )}
+
+      {/* Drawer panel */}
+      <aside
+        role="dialog"
+        aria-modal={modal ? 'true' : undefined}
+        aria-label={typeof title === 'string' ? title : undefined}
+        className={cn(
+          panelZ,
+          'flex flex-col overflow-hidden',
+          'transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]',
+          className,
+        )}
+        style={{
+          ...panelStyle,
+          background: 'rgb(var(--bg-surface))',
+          border: '1px solid rgb(var(--border))',
+          borderRadius: 'var(--radius-2xl)',
+        }}
+      >
+        {resizable && (
+          <ResizeHandle side={side} onPointerDown={onPointerDown} />
+        )}
+
+        {/* Header — single compact row. Consumer provides layout inside
+            `title` + `titleSlot`. Default close button can be hidden via
+            `showClose={false}` for non-modal always-on consumers. The
+            border-bottom is dropped when `collapsed` so the panel reads
+            as a clean single-bar strip without a separator line above
+            an empty area. */}
+        {(title || titleSlot || showClose) && (
+          <div
+            className={cn(
+              'flex items-center justify-between gap-3 shrink-0',
+              headerClassName ?? 'px-4 py-2.5',
+            )}
+            style={
+              collapsed
+                ? undefined
+                : { borderBottom: '1px solid rgb(var(--border))' }
+            }
+          >
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              {title && (
+                <div
+                  className="text-[13px] font-semibold flex items-center gap-2 min-w-0"
+                  style={{ color: 'rgb(var(--foreground))' }}
+                >
+                  {title}
+                </div>
+              )}
+              {titleSlot && (
+                <div className="flex items-center gap-2 min-w-0 flex-1">
+                  {titleSlot}
+                </div>
+              )}
+            </div>
+            {showClose && <CloseButton onClose={onClose} />}
+          </div>
+        )}
+
+        {/* Body — omitted entirely when collapsed so no residual flex-1
+            div eats space below the header. */}
+        {!collapsed && (
+          <div
+            className={cn(
+              'flex-1 overflow-y-auto',
+              panelClassName ?? 'px-4 py-3',
+            )}
+          >
+            {children}
+          </div>
+        )}
+
+        {/* Footer — also omitted when collapsed. */}
+        {!collapsed && footer && (
+          <div
+            className="flex items-center gap-2 px-4 py-2.5 shrink-0"
+            style={{ borderTop: '1px solid rgb(var(--border))' }}
+          >
+            {footer}
+          </div>
+        )}
+      </aside>
+    </>
+  )
+}
+
+function CloseButton({ onClose }: { onClose: () => void }) {
+  return (
+    <button
+      onClick={onClose}
+      aria-label="Close"
+      className="w-7 h-7 flex items-center justify-center rounded-[6px] shrink-0 transition-colors"
+      style={{
+        background: 'transparent',
+        color: 'rgb(var(--text-tertiary))',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = 'rgb(var(--surface-overlay))'
+        e.currentTarget.style.color = 'rgb(var(--foreground))'
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = 'transparent'
+        e.currentTarget.style.color = 'rgb(var(--text-tertiary))'
+      }}
+    >
+      <X className="h-3.5 w-3.5" />
+    </button>
+  )
+}
+
+function ResizeHandle({
+  side,
+  onPointerDown,
+}: {
+  side: Side
+  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void
+}) {
+  // `side="right"` puts the grab strip on the LEFT edge of the panel
+  // (user drags leftward to widen); `side="bottom"` puts it on the TOP
+  // edge (user drags upward to grow).
+  const positional =
+    side === 'right'
+      ? 'top-0 bottom-0 left-0 w-1.5 cursor-ew-resize'
+      : 'left-0 right-0 top-0 h-1.5 cursor-ns-resize'
+
+  return (
+    <div
+      role="separator"
+      aria-orientation={side === 'right' ? 'vertical' : 'horizontal'}
+      onPointerDown={onPointerDown}
+      className={cn(
+        'absolute z-10 flex items-center justify-center group',
+        positional,
+      )}
+      style={{ touchAction: 'none' }}
+    >
+      <span
+        className={cn(
+          'rounded-full transition-opacity',
+          side === 'right' ? 'h-8 w-0.5' : 'h-0.5 w-8',
+          'opacity-30 group-hover:opacity-100',
+        )}
+        style={{ background: 'rgb(var(--border-strong))' }}
+      />
+    </div>
+  )
+}
+
+/**
+ * DetailSection — small label/value layout for drawer body content.
+ * Ports verbatim from brand-ai-extension's detail-drawer.tsx.
+ */
+export function DetailSection({
+  label,
+  children,
+  className,
+}: {
+  label: string
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn('mb-6', className)}>
+      <div
+        className="text-[11px] font-semibold uppercase tracking-[0.4px] mb-2"
+        style={{ color: 'rgb(var(--text-muted))' }}
+      >
+        {label}
+      </div>
+      <div
+        className="text-[14px] leading-[1.6]"
+        style={{ color: 'rgb(var(--foreground))' }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+// Default export intentionally omitted; named export is the canonical
+// import path. Re-exported via packages/ui/src/index.ts.