@lovett/ui 0.0.1

package/src/dropdown-menu.tsx

@@ -0,0 +1,450 @@
+/**
+ * DropdownMenu — workspace-native dropdown menu primitive.
+ *
+ * Inspired by gray-ui-csm `components/ui/dropdown-menu.tsx` (MIT,
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/ui/dropdown-menu.tsx)
+ * — see packages/ui/licenses/gray-ui-csm-LICENSE.txt.
+ *
+ * BUILD_FRESH per ADR-025 DEVIATION-3: source ships on
+ * `@base-ui/react/menu`, which is NOT in CLAUDE.md §1 allowed deps.
+ * The compound-component surface (Root / Trigger / Content / Item /
+ * CheckboxItem / Separator / Label / Group) carries over; the
+ * implementation is a lightweight React Context + Portal + outside-
+ * click + Escape handler.
+ *
+ * Trigger styling per ADR-026 D4 (DQ-4 LIFT): the default trigger
+ * inherits the secondary Button visual (rounded-xl, `--bg-card` fill,
+ * 1px `--border`). Consumers can pass `asChild`-equivalent custom
+ * trigger content; the wrapper applies the button-style classes
+ * unless `unstyled` is set.
+ *
+ * Workspace ADR: ADR-025 (port) + ADR-026 D4 (trigger spec)
+ * Ported 2026-05-18
+ */
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { Check } from 'lucide-react'
+import { cn } from './lib/utils'
+
+type Align = 'start' | 'center' | 'end'
+type Side = 'top' | 'bottom'
+
+interface DropdownMenuContextValue {
+  open: boolean
+  setOpen: (next: boolean) => void
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+  contentId: string
+}
+
+const DropdownMenuCtx = createContext<DropdownMenuContextValue | null>(null)
+
+function useDropdownMenuCtx(consumer: string): DropdownMenuContextValue {
+  const ctx = useContext(DropdownMenuCtx)
+  if (!ctx) {
+    throw new Error(
+      `${consumer} must be rendered inside <DropdownMenu>. ` +
+        `Wrap your trigger + content with the DropdownMenu root component.`,
+    )
+  }
+  return ctx
+}
+
+export interface DropdownMenuProps {
+  /** Controlled open state. Omit for internal state. */
+  open?: boolean
+  /** Fires whenever open transitions. */
+  onOpenChange?: (open: boolean) => void
+  defaultOpen?: boolean
+  children: ReactNode
+}
+
+export function DropdownMenu({
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen,
+  children,
+}: DropdownMenuProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(
+    Boolean(defaultOpen),
+  )
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? Boolean(controlledOpen) : uncontrolledOpen
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const generatedId = useId()
+  const contentId = `dropdown-${generatedId.replace(/:/g, '')}`
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setUncontrolledOpen(next)
+      onOpenChange?.(next)
+    },
+    [isControlled, onOpenChange],
+  )
+
+  const value = useMemo<DropdownMenuContextValue>(
+    () => ({ open, setOpen, triggerRef, contentId }),
+    [open, setOpen, contentId],
+  )
+
+  return (
+    <DropdownMenuCtx.Provider value={value}>
+      {children}
+    </DropdownMenuCtx.Provider>
+  )
+}
+
+export interface DropdownMenuTriggerProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Skip the default secondary-Button styling. Useful when wrapping
+   * an existing Button primitive. */
+  unstyled?: boolean
+}
+
+/**
+ * Default trigger styled per ADR-026 D4 (DQ-4) — inherits the
+ * secondary Button visual (rounded-xl + `--bg-card` fill + 1px
+ * `--border`). Set `unstyled` to wrap your own button shape.
+ */
+export function DropdownMenuTrigger({
+  unstyled,
+  className,
+  onClick,
+  children,
+  ...rest
+}: DropdownMenuTriggerProps) {
+  const { open, setOpen, triggerRef, contentId } =
+    useDropdownMenuCtx('DropdownMenuTrigger')
+
+  return (
+    <button
+      ref={triggerRef}
+      type="button"
+      aria-haspopup="menu"
+      aria-expanded={open}
+      aria-controls={open ? contentId : undefined}
+      className={cn(
+        !unstyled && 'btn btn-secondary',
+        className,
+      )}
+      onClick={(event) => {
+        onClick?.(event)
+        if (!event.defaultPrevented) setOpen(!open)
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}
+
+export interface DropdownMenuContentProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  children: ReactNode
+  /** Horizontal alignment relative to the trigger. Default `start`. */
+  align?: Align
+  /** Pixel offset along the alignment axis. Default 0. */
+  alignOffset?: number
+  /** Place above (`top`) or below (`bottom`) the trigger. Default `bottom`. */
+  side?: Side
+  /** Pixel offset along the side axis. Default 6. */
+  sideOffset?: number
+}
+
+export function DropdownMenuContent({
+  children,
+  align = 'start',
+  alignOffset = 0,
+  side = 'bottom',
+  sideOffset = 6,
+  className,
+  style,
+  ...rest
+}: DropdownMenuContentProps) {
+  const { open, setOpen, triggerRef, contentId } =
+    useDropdownMenuCtx('DropdownMenuContent')
+  const contentRef = useRef<HTMLDivElement | null>(null)
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(
+    null,
+  )
+
+  // Position relative to the trigger viewport rect. We measure on
+  // open + on layout changes (scroll / resize) so the panel tracks.
+  useLayoutEffect(() => {
+    if (!open) {
+      setPosition(null)
+      return
+    }
+    const measure = () => {
+      const triggerEl = triggerRef.current
+      const contentEl = contentRef.current
+      if (!triggerEl || !contentEl) return
+      const triggerRect = triggerEl.getBoundingClientRect()
+      const contentRect = contentEl.getBoundingClientRect()
+
+      let left = triggerRect.left + alignOffset
+      if (align === 'end') left = triggerRect.right - contentRect.width - alignOffset
+      else if (align === 'center')
+        left =
+          triggerRect.left +
+          triggerRect.width / 2 -
+          contentRect.width / 2 +
+          alignOffset
+
+      let top =
+        side === 'bottom'
+          ? triggerRect.bottom + sideOffset
+          : triggerRect.top - contentRect.height - sideOffset
+
+      // Keep on-screen — clamp to viewport with an 8px gutter.
+      const gutter = 8
+      const maxLeft = window.innerWidth - contentRect.width - gutter
+      const maxTop = window.innerHeight - contentRect.height - gutter
+      left = Math.max(gutter, Math.min(left, maxLeft))
+      top = Math.max(gutter, Math.min(top, maxTop))
+
+      setPosition({ left, top })
+    }
+
+    measure()
+    window.addEventListener('resize', measure)
+    window.addEventListener('scroll', measure, true)
+    return () => {
+      window.removeEventListener('resize', measure)
+      window.removeEventListener('scroll', measure, true)
+    }
+  }, [open, align, alignOffset, side, sideOffset, triggerRef])
+
+  // Outside-click + Escape dismissal.
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null
+      if (!target) return
+      if (contentRef.current?.contains(target)) return
+      if (triggerRef.current?.contains(target)) return
+      setOpen(false)
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.stopPropagation()
+        setOpen(false)
+        triggerRef.current?.focus()
+      }
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open, setOpen, triggerRef])
+
+  if (!open || typeof document === 'undefined') return null
+
+  // Two-phase render: first paint measures the content invisibly at
+  // (0,0) with opacity:0, useLayoutEffect computes the real position,
+  // and the second paint applies the correct coords + entrance animation.
+  // The animation classes are gated behind `isPositioned` so the
+  // entrance never fires from the unpositioned location — that's what
+  // caused the "flash at top of viewport then jump under the trigger"
+  // glitch.
+  const isPositioned = position !== null
+
+  return createPortal(
+    <div
+      ref={contentRef}
+      id={contentId}
+      role="menu"
+      data-slot="dropdown-menu-content"
+      data-state="open"
+      data-positioned={isPositioned ? 'true' : 'false'}
+      className={cn(
+        'fixed z-[100] min-w-48 max-w-[min(28rem,calc(100vw-16px))]',
+        'p-1.5 overflow-y-auto',
+        'rounded-[var(--radius-lg)]',
+        isPositioned && 'animate-in fade-in-0 zoom-in-95 duration-100',
+        className,
+      )}
+      style={{
+        // Anchor the unpositioned phase WAY off-screen as a defense
+        // against any browser/renderer that doesn't fully respect
+        // visibility:hidden during a same-frame double-render. If the
+        // first paint slips through, it's at (-99999, -99999), not at
+        // viewport (0, 0) where a left-edge flash would be visible.
+        left: position?.left ?? -99999,
+        top: position?.top ?? -99999,
+        opacity: isPositioned ? undefined : 0,
+        pointerEvents: isPositioned ? undefined : 'none',
+        visibility: isPositioned ? 'visible' : 'hidden',
+        background: 'rgb(var(--popover))',
+        color: 'rgb(var(--popover-foreground))',
+        border: '1px solid rgb(var(--border))',
+        boxShadow: 'var(--shadow-lg, 0 10px 32px rgba(0,0,0,0.18))',
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </div>,
+    document.body,
+  )
+}
+
+export interface DropdownMenuItemProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'destructive'
+  /** Pad-left compensation so items with no leading icon align with
+   * items that have one. */
+  inset?: boolean
+}
+
+export function DropdownMenuItem({
+  variant = 'default',
+  inset,
+  className,
+  onClick,
+  children,
+  ...rest
+}: DropdownMenuItemProps) {
+  const { setOpen } = useDropdownMenuCtx('DropdownMenuItem')
+  return (
+    <button
+      role="menuitem"
+      type="button"
+      data-slot="dropdown-menu-item"
+      data-variant={variant}
+      className={cn(
+        'group relative flex w-full cursor-default items-center gap-2.5',
+        'rounded-[var(--radius-md)] px-3 py-2 text-sm font-medium',
+        'outline-none text-left',
+        'transition-colors',
+        'hover:bg-[rgb(var(--surface-overlay))]',
+        'focus-visible:bg-[rgb(var(--surface-overlay))]',
+        'disabled:pointer-events-none disabled:opacity-50',
+        inset && 'pl-9',
+        variant === 'destructive' && 'text-[rgb(var(--destructive))]',
+        className,
+      )}
+      onClick={(event) => {
+        onClick?.(event)
+        if (!event.defaultPrevented) setOpen(false)
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}
+
+export interface DropdownMenuCheckboxItemProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+}
+
+export function DropdownMenuCheckboxItem({
+  checked,
+  onCheckedChange,
+  className,
+  children,
+  onClick,
+  disabled,
+  ...rest
+}: DropdownMenuCheckboxItemProps) {
+  return (
+    <button
+      role="menuitemcheckbox"
+      type="button"
+      data-slot="dropdown-menu-checkbox-item"
+      aria-checked={Boolean(checked)}
+      disabled={disabled}
+      className={cn(
+        'group relative flex w-full cursor-default items-center gap-2.5',
+        'rounded-[var(--radius-md)] py-2 pl-3 pr-8 text-sm font-medium',
+        'outline-none text-left',
+        'transition-colors',
+        'hover:bg-[rgb(var(--surface-overlay))]',
+        'focus-visible:bg-[rgb(var(--surface-overlay))]',
+        'disabled:pointer-events-none disabled:opacity-50',
+        className,
+      )}
+      onClick={(event) => {
+        onClick?.(event)
+        if (!event.defaultPrevented) onCheckedChange?.(!checked)
+      }}
+      {...rest}
+    >
+      {children}
+      {checked ? (
+        <span
+          className="pointer-events-none absolute right-2 flex items-center justify-center"
+          data-slot="dropdown-menu-checkbox-item-indicator"
+        >
+          <Check className="h-3.5 w-3.5" />
+        </span>
+      ) : null}
+    </button>
+  )
+}
+
+export function DropdownMenuSeparator({
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="separator"
+      data-slot="dropdown-menu-separator"
+      className={cn('-mx-1.5 my-1.5 h-px', className)}
+      style={{ background: 'rgb(var(--border))' }}
+      {...rest}
+    />
+  )
+}
+
+export interface DropdownMenuLabelProps
+  extends HTMLAttributes<HTMLDivElement> {
+  inset?: boolean
+}
+
+export function DropdownMenuLabel({
+  inset,
+  className,
+  ...rest
+}: DropdownMenuLabelProps) {
+  return (
+    <div
+      data-slot="dropdown-menu-label"
+      className={cn(
+        'px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.4px]',
+        inset && 'pl-9',
+        className,
+      )}
+      style={{ color: 'rgb(var(--text-muted))' }}
+      {...rest}
+    />
+  )
+}
+
+export function DropdownMenuGroup({
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div role="group" data-slot="dropdown-menu-group" className={className} {...rest} />
+  )
+}

package/src/empty-state.tsx

@@ -0,0 +1,85 @@
+/**
+ * EmptyState — full-area placeholder shown when a lens has no data.
+ *
+ * Distinct from `EmptyPlaceholder` (in `atoms.tsx`), which is the
+ * in-card dashed-border variant used by brand-profile sections. Use
+ * `EmptyState` for whole-lens empty states (Products / Personas /
+ * Competitors / Assets / etc.) — the prominent centered icon-tile
+ * pattern.
+ *
+ * Design (locked by ADR-019, derived from the Phase 15 Assets pattern):
+ *   • 56×56 icon tile (surface-overlay background, --radius-lg corner,
+ *     icon centered, --text-muted color)
+ *   • 28px Lucide icon inside the tile (the consumer passes a sized
+ *     element; this primitive does not size the icon)
+ *   • 15px / semibold title in --foreground
+ *   • 13px / --text-tertiary description (optional), capped at max-w-md
+ *   • py-16 vertical padding for whole-lens placement
+ *   • Action slot below the description (flex-wrap, gap-2)
+ *
+ * All values come from public tokens. Token boundary clean.
+ */
+
+import type { ReactNode } from 'react'
+
+export interface EmptyStateProps {
+  /** Lucide icon (or any ReactNode) rendered inside the 56×56 tile.
+   *  Pass at h-7 w-7 (28px) for visual parity with the canonical sites. */
+  icon: ReactNode
+  /** Headline text. */
+  title: string
+  /** Optional supporting copy. Kept under max-w-md by default. */
+  description?: string
+  /** Optional action buttons row. Wraps with gap-2. */
+  actions?: ReactNode
+  /** Optional className override on the outer container — use sparingly
+   *  (e.g. when the parent already provides vertical padding). */
+  className?: string
+}
+
+export function EmptyState({
+  icon,
+  title,
+  description,
+  actions,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div
+      className={
+        className ??
+        'mx-auto flex max-w-md flex-col items-center text-center gap-3 py-16'
+      }
+    >
+      <div
+        className="inline-flex h-14 w-14 items-center justify-center"
+        style={{
+          background: 'rgb(var(--surface-overlay))',
+          color: 'rgb(var(--text-muted))',
+          borderRadius: 'var(--radius-lg)',
+        }}
+      >
+        {icon}
+      </div>
+      <div
+        className="text-[15px] font-semibold"
+        style={{ color: 'rgb(var(--foreground))' }}
+      >
+        {title}
+      </div>
+      {description && (
+        <p
+          className="text-[13px]"
+          style={{ color: 'rgb(var(--text-tertiary))' }}
+        >
+          {description}
+        </p>
+      )}
+      {actions && (
+        <div className="mt-2 flex flex-wrap items-center justify-center gap-2">
+          {actions}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/file-upload/file-drop-zone.tsx

@@ -0,0 +1,156 @@
+/**
+ * FileDropZone — drag-and-drop overlay wrapper for file intake.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ */
+
+import { useState, useCallback, useRef, type ReactNode } from 'react'
+import { Upload } from 'lucide-react'
+import { cn } from '../lib/utils'
+
+interface FileDropZoneProps {
+  children: ReactNode
+  onFilesDropped: (files: File[]) => void
+  disabled?: boolean
+  className?: string
+}
+
+export function FileDropZone({
+  children,
+  onFilesDropped,
+  disabled = false,
+  className,
+}: FileDropZoneProps) {
+  const [isDragOver, setIsDragOver] = useState(false)
+  const dragCounterRef = useRef(0)
+
+  // Recursively collect all files from a FileSystem entry (handles folders)
+  const getFilesFromEntry = useCallback(async (entry: FileSystemEntry): Promise<File[]> => {
+    if (entry.isFile) {
+      return new Promise((resolve) => {
+        ;(entry as FileSystemFileEntry).file(
+          (file) => resolve([file]),
+          () => resolve([]),
+        )
+      })
+    }
+
+    if (entry.isDirectory) {
+      const dirReader = (entry as FileSystemDirectoryEntry).createReader()
+      const entries = await new Promise<FileSystemEntry[]>((resolve) => {
+        dirReader.readEntries(
+          (e) => resolve(e),
+          () => resolve([]),
+        )
+      })
+
+      const allFiles: File[] = []
+      for (const childEntry of entries) {
+        const files = await getFilesFromEntry(childEntry)
+        allFiles.push(...files)
+      }
+      return allFiles
+    }
+
+    return []
+  }, [])
+
+  const processDroppedItems = useCallback(async (
+    items: DataTransferItemList,
+  ): Promise<File[]> => {
+    const allFiles: File[] = []
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i]
+      if (!item || item.kind !== 'file') continue
+
+      const entry = item.webkitGetAsEntry?.()
+      if (entry) {
+        const files = await getFilesFromEntry(entry)
+        allFiles.push(...files)
+      } else {
+        const file = item.getAsFile()
+        if (file) allFiles.push(file)
+      }
+    }
+
+    return allFiles
+  }, [getFilesFromEntry])
+
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      if (disabled) return
+
+      dragCounterRef.current++
+      if (e.dataTransfer.types.includes('Files')) {
+        setIsDragOver(true)
+      }
+    },
+    [disabled],
+  )
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    dragCounterRef.current--
+    if (dragCounterRef.current === 0) {
+      setIsDragOver(false)
+    }
+  }, [])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const handleDrop = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      dragCounterRef.current = 0
+      setIsDragOver(false)
+
+      if (disabled) return
+
+      const files = await processDroppedItems(e.dataTransfer.items)
+      if (files.length > 0) {
+        onFilesDropped(files)
+      }
+    },
+    [disabled, onFilesDropped, processDroppedItems],
+  )
+
+  return (
+    <div
+      className={cn('relative', className)}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      {children}
+
+      {isDragOver && !disabled && (
+        <div
+          className="absolute inset-0 z-50 flex items-center justify-center border-2 border-dashed backdrop-blur-sm"
+          style={{
+            borderRadius: 'var(--radius-xl)',
+            borderColor: 'rgb(var(--accent))',
+            background: 'rgb(var(--accent) / 0.08)',
+          }}
+        >
+          <div
+            className="flex flex-col items-center gap-2"
+            style={{ color: 'rgb(var(--accent))' }}
+          >
+            <Upload className="h-8 w-8" />
+            <span className="text-sm font-medium">Drop files here</span>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}