@lovett/ui 0.0.1

package/src/range-slider.tsx

@@ -0,0 +1,161 @@
+/**
+ * RangeSlider — dual-thumb numeric range selector.
+ *
+ *   Label                                    1,000 – 48,000
+ *   ●━━━━━━━━━━━━━━━━━━●─────────────────────────────────
+ *
+ * Two native `<input type="range">` elements are stacked over a shared
+ * track + fill. Native inputs give keyboard support (arrows / Home /
+ * End) and accessibility for free; the `.ds-range-input` CSS in
+ * styles.css makes the input bodies transparent + click-through so the
+ * two thumbs don't block each other.
+ *
+ * Controlled — the parent owns `value` as a `[low, high]` tuple. The
+ * component clamps so the thumbs can meet but never cross.
+ *
+ * Token discipline: track / fill colors from CSS variables; thumb
+ * styling lives in `.ds-range-input` (pseudo-elements can't be styled
+ * inline). No hex.
+ *
+ * First consumer: Keywords lens filter bar (Volume + Avg CPC ranges).
+ * Generic — reusable for any numeric min/max filter.
+ */
+
+import { useId, type ReactNode } from 'react'
+import { cn } from './lib/utils'
+
+export interface RangeSliderProps {
+  /** Lower bound of the track. */
+  min: number
+  /** Upper bound of the track. */
+  max: number
+  /** Current selection — `[low, high]`. Clamped within `[min, max]`. */
+  value: [number, number]
+  onChange: (next: [number, number]) => void
+  /** Step granularity. Default 1. */
+  step?: number
+  /** Optional label rendered above the track. */
+  label?: ReactNode
+  /** Formats the two end values shown beside the label. Default
+   *  `toLocaleString`. */
+  formatValue?: (value: number) => string
+  /** id base — the two range inputs get `${id}-min` / `${id}-max`. */
+  id?: string
+  disabled?: boolean
+  className?: string
+}
+
+function clamp(n: number, lo: number, hi: number): number {
+  return Math.max(lo, Math.min(hi, n))
+}
+
+export function RangeSlider({
+  min,
+  max,
+  value,
+  onChange,
+  step = 1,
+  label,
+  formatValue = (n) => n.toLocaleString('en-US'),
+  id,
+  disabled,
+  className,
+}: RangeSliderProps) {
+  const generatedId = useId()
+  const baseId = id ?? `range-${generatedId.replace(/:/g, '')}`
+
+  const span = max - min || 1
+  const [lowRaw, highRaw] = value
+  const low = clamp(lowRaw, min, max)
+  const high = clamp(highRaw, min, max)
+
+  const lowPct = ((low - min) / span) * 100
+  const highPct = ((high - min) / span) * 100
+
+  const handleLow = (next: number) => {
+    // Low thumb can meet the high thumb but not pass it.
+    onChange([clamp(next, min, high), high])
+  }
+  const handleHigh = (next: number) => {
+    onChange([low, clamp(next, low, max)])
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-1.5', className)}>
+      {label && (
+        <div className="flex items-baseline justify-between gap-2">
+          <span
+            className="text-[12px] font-semibold tracking-[0.02em]"
+            style={{ color: 'rgb(var(--foreground))' }}
+          >
+            {label}
+          </span>
+          <span
+            className="text-[12px] tabular-nums"
+            style={{ color: 'rgb(var(--text-tertiary))' }}
+          >
+            {formatValue(low)} – {formatValue(high)}
+          </span>
+        </div>
+      )}
+
+      <div className="ds-range-slider relative h-4 flex items-center">
+        {/* Base track */}
+        <div
+          className="absolute left-0 right-0 h-1.5 rounded-full"
+          style={{ background: 'rgb(var(--surface-overlay-strong))' }}
+        />
+        {/* Selected fill */}
+        <div
+          className="absolute h-1.5 rounded-full"
+          style={{
+            left: `${lowPct}%`,
+            right: `${100 - highPct}%`,
+            background: disabled
+              ? 'rgb(var(--border-strong))'
+              : 'rgb(var(--accent))',
+          }}
+        />
+        {/* Low thumb. z-index lifts when both thumbs sit at the top
+            end so the low thumb stays grabbable. */}
+        <input
+          id={`${baseId}-min`}
+          type="range"
+          className="ds-range-input"
+          style={{ zIndex: low >= max ? 4 : 3 }}
+          min={min}
+          max={max}
+          step={step}
+          value={low}
+          disabled={disabled}
+          onChange={(e) => handleLow(Number(e.target.value))}
+          aria-label={
+            typeof label === 'string'
+              ? `${label} — minimum`
+              : 'Range minimum'
+          }
+          aria-valuetext={formatValue(low)}
+        />
+        {/* High thumb */}
+        <input
+          id={`${baseId}-max`}
+          type="range"
+          className="ds-range-input"
+          style={{ zIndex: 3 }}
+          min={min}
+          max={max}
+          step={step}
+          value={high}
+          disabled={disabled}
+          onChange={(e) => handleHigh(Number(e.target.value))}
+          aria-label={
+            typeof label === 'string'
+              ? `${label} — maximum`
+              : 'Range maximum'
+          }
+          aria-valuetext={formatValue(high)}
+        />
+      </div>
+    </div>
+  )
+}

package/src/resizable.tsx

@@ -0,0 +1,282 @@
+/**
+ * ResizableHandle — pointer-driven splitter handle with WAI-ARIA splitter
+ * a11y. Controlled `value` (px); `onChange` fires every animation frame
+ * during drag, `onCommit` once on release. Arrow keys nudge by `step`;
+ * `Home` and double-click reset to `defaultValue ?? (min + max) / 2`.
+ *
+ * Pointer events (with `setPointerCapture`) give touch + mouse parity in
+ * a single code path; the capture also keeps the drag live when the
+ * cursor leaves the 1-px handle. State during drag lives in refs so
+ * pointermove never triggers a React re-render — `onChange` is the
+ * caller's signal that the controlled value should update.
+ *
+ * Promoted per ADR-049 D8/D9: the Generate lens (`form-panel.tsx`) had
+ * a local mouse-event resize; ADR-049's pinned sidebar panel is the
+ * second consumer (ADR-008 D3 gate).
+ *
+ * ResizablePane is an optional thin `<aside>` wrapper that sizes itself
+ * to `value` on the relevant axis and mounts a `<ResizableHandle>` on
+ * the matching edge.
+ */
+
+import {
+  useCallback,
+  useRef,
+  useState,
+  type CSSProperties,
+  type KeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from 'react'
+import { cn } from './lib/utils'
+
+export interface ResizableHandleProps {
+  /** Which edge of the parent the handle decorates. */
+  side: 'left' | 'right' | 'top' | 'bottom'
+  /** Controlled width/height (px). */
+  value: number
+  /** Called on every animation-frame-throttled pointermove during drag. */
+  onChange: (next: number) => void
+  /** Called once on pointerup with the final value. Use for persistence. */
+  onCommit?: (final: number) => void
+  /** Lower bound (px). */
+  min: number
+  /** Upper bound (px). */
+  max: number
+  /** Double-click / Home target. Defaults to `(min + max) / 2`. */
+  defaultValue?: number
+  /** Keyboard nudge step (px). Default 16. */
+  step?: number
+  /** ARIA label for the splitter. Required. */
+  'aria-label': string
+  /** Disable all interaction. Used by the sidebar's hover-out mode. */
+  disabled?: boolean
+  className?: string
+}
+
+function clamp(n: number, lo: number, hi: number): number {
+  return Math.max(lo, Math.min(hi, n))
+}
+
+function isHorizontal(side: ResizableHandleProps['side']): boolean {
+  return side === 'left' || side === 'right'
+}
+
+export function ResizableHandle({
+  side,
+  value,
+  onChange,
+  onCommit,
+  min,
+  max,
+  defaultValue,
+  step = 16,
+  'aria-label': ariaLabel,
+  disabled = false,
+  className,
+}: ResizableHandleProps) {
+  const horizontal = isHorizontal(side)
+  const resetValue = defaultValue ?? (min + max) / 2
+
+  // Drag state lives in refs — pointermove must not re-render.
+  const dragStartCoord = useRef(0)
+  const dragStartValue = useRef(0)
+  const rafIdRef = useRef<number | null>(null)
+  const pendingValueRef = useRef<number>(value)
+  const lastEmittedRef = useRef<number>(value)
+
+  const [isDragging, setIsDragging] = useState(false)
+
+  const flushPending = useCallback(() => {
+    rafIdRef.current = null
+    const next = pendingValueRef.current
+    if (next !== lastEmittedRef.current) {
+      lastEmittedRef.current = next
+      onChange(next)
+    }
+  }, [onChange])
+
+  const handlePointerDown = useCallback(
+    (e: ReactPointerEvent<HTMLDivElement>) => {
+      if (disabled) return
+      // Only react to primary pointer (left mouse, primary touch).
+      if (e.button !== 0 && e.pointerType === 'mouse') return
+      e.preventDefault()
+      e.currentTarget.setPointerCapture(e.pointerId)
+      dragStartCoord.current = horizontal ? e.clientX : e.clientY
+      dragStartValue.current = value
+      pendingValueRef.current = value
+      lastEmittedRef.current = value
+      setIsDragging(true)
+    },
+    [disabled, horizontal, value],
+  )
+
+  const handlePointerMove = useCallback(
+    (e: ReactPointerEvent<HTMLDivElement>) => {
+      if (disabled) return
+      if (!e.currentTarget.hasPointerCapture(e.pointerId)) return
+      const coord = horizontal ? e.clientX : e.clientY
+      const delta = coord - dragStartCoord.current
+      // For `left` and `top` sides, dragging "toward" the parent shrinks it,
+      // so the sign of the delta is inverted.
+      const signed = side === 'left' || side === 'top' ? -delta : delta
+      const next = clamp(dragStartValue.current + signed, min, max)
+      pendingValueRef.current = next
+      if (rafIdRef.current === null) {
+        rafIdRef.current = requestAnimationFrame(flushPending)
+      }
+    },
+    [disabled, flushPending, horizontal, max, min, side],
+  )
+
+  const endDrag = useCallback(
+    (e: ReactPointerEvent<HTMLDivElement>) => {
+      if (!e.currentTarget.hasPointerCapture(e.pointerId)) return
+      e.currentTarget.releasePointerCapture(e.pointerId)
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current)
+        rafIdRef.current = null
+      }
+      const final = pendingValueRef.current
+      // Ensure the final value reached the caller before commit.
+      if (final !== lastEmittedRef.current) {
+        lastEmittedRef.current = final
+        onChange(final)
+      }
+      setIsDragging(false)
+      onCommit?.(final)
+    },
+    [onChange, onCommit],
+  )
+
+  const handleDoubleClick = useCallback(() => {
+    if (disabled) return
+    const next = clamp(resetValue, min, max)
+    onChange(next)
+    onCommit?.(next)
+  }, [disabled, max, min, onChange, onCommit, resetValue])
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) return
+      const decreaseKey = horizontal ? 'ArrowLeft' : 'ArrowUp'
+      const increaseKey = horizontal ? 'ArrowRight' : 'ArrowDown'
+      // For `left`/`top` sides, "decrease size" maps to the OPPOSITE arrow
+      // because the handle sits on the far side of the parent.
+      const inverted = side === 'left' || side === 'top'
+      // PageUp/PageDown follow the conventional splitter pattern of nudging
+      // by step * 4 — large-step navigation for keyboard-only users.
+      const largeStep = step * 4
+      let next: number | null = null
+      if (e.key === decreaseKey) {
+        next = clamp(value + (inverted ? step : -step), min, max)
+      } else if (e.key === increaseKey) {
+        next = clamp(value + (inverted ? -step : step), min, max)
+      } else if (e.key === 'PageDown') {
+        // PageDown shrinks (mirrors decrease arrow direction).
+        next = clamp(value + (inverted ? largeStep : -largeStep), min, max)
+      } else if (e.key === 'PageUp') {
+        // PageUp grows (mirrors increase arrow direction).
+        next = clamp(value + (inverted ? -largeStep : largeStep), min, max)
+      } else if (e.key === 'Home') {
+        next = clamp(resetValue, min, max)
+      }
+      if (next !== null) {
+        e.preventDefault()
+        onChange(next)
+        onCommit?.(next)
+      }
+    },
+    [disabled, horizontal, max, min, onChange, onCommit, resetValue, side, step, value],
+  )
+
+  const cursor = horizontal ? 'col-resize' : 'row-resize'
+  const orientation = horizontal ? 'vertical' : 'horizontal'
+
+  // MAJ-2 (Sidebar-A hot-fix): hit-target widened to 8 px while the visible
+  // line stays 4 px (`w-1`/`h-1`). Padding extends the interactive area on the
+  // cross-axis; `background-clip: content-box` keeps the rest-state background
+  // painting only on the inner 4 px. Negative margin on the cross-axis
+  // recenters the element over the parent's edge so the visual line still
+  // sits on the seam.
+  //
+  // Math: 4 px line + 2 × 2 px padding = 8 px effective hit zone.
+  // `box-sizing: content-box` makes the padding additive to width/height
+  // (Tailwind's preflight sets box-sizing: border-box globally, which would
+  // otherwise eat the padding into the existing 4 px).
+  const HIT_PAD = 2
+  const style: CSSProperties = {
+    cursor: disabled ? 'default' : cursor,
+    backgroundColor: isDragging
+      ? 'rgb(var(--accent-muted))'
+      : undefined,
+    touchAction: 'none',
+    padding: horizontal ? `0 ${HIT_PAD}px` : `${HIT_PAD}px 0`,
+    backgroundClip: 'content-box',
+    boxSizing: 'content-box',
+    // Recenter on the parent's edge so the inner 4 px line stays where it
+    // was before the padding was added.
+    marginLeft: horizontal ? `-${HIT_PAD}px` : undefined,
+    marginTop: horizontal ? undefined : `-${HIT_PAD}px`,
+  }
+
+  return (
+    <div
+      role="separator"
+      aria-orientation={orientation}
+      aria-valuenow={value}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-label={ariaLabel}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : 0}
+      data-resizable-handle
+      data-side={side}
+      data-orientation={orientation}
+      data-dragging={isDragging || undefined}
+      onPointerDown={disabled ? undefined : handlePointerDown}
+      onPointerMove={disabled ? undefined : handlePointerMove}
+      onPointerUp={disabled ? undefined : endDrag}
+      onPointerCancel={disabled ? undefined : endDrag}
+      onDoubleClick={disabled ? undefined : handleDoubleClick}
+      onKeyDown={disabled ? undefined : handleKeyDown}
+      className={cn(
+        'resizable-handle',
+        horizontal
+          ? 'absolute top-0 w-1 h-full'
+          : 'absolute left-0 h-1 w-full',
+        side === 'right' && 'right-0',
+        side === 'left' && 'left-0',
+        side === 'bottom' && 'bottom-0',
+        side === 'top' && 'top-0',
+        !isDragging && !disabled && 'hover:bg-[rgb(var(--accent-subtle))]',
+        'focus-visible:outline-none focus-visible:bg-[rgb(var(--accent-subtle))]',
+        className,
+      )}
+      style={style}
+    />
+  )
+}
+
+export interface ResizablePaneProps extends ResizableHandleProps {
+  children: ReactNode
+  paneClassName?: string
+}
+
+export function ResizablePane({
+  children,
+  paneClassName,
+  ...handleProps
+}: ResizablePaneProps) {
+  const horizontal = isHorizontal(handleProps.side)
+  const paneStyle: CSSProperties = horizontal
+    ? { width: `${handleProps.value}px` }
+    : { height: `${handleProps.value}px` }
+  return (
+    <aside className={cn('relative', paneClassName)} style={paneStyle}>
+      {children}
+      <ResizableHandle {...handleProps} />
+    </aside>
+  )
+}

package/src/search-bar.tsx

@@ -0,0 +1,81 @@
+/**
+ * SearchBar — input-shaped search field with a leading magnifier icon
+ * and an inline clear button when the value is non-empty. The width prop
+ * accepts a px number or any CSS length.
+ *
+ * Promoted from `brand-ai-extension/webapp/src/components/ui/search-bar.tsx`
+ * as part of Phase A of the v1.1 lens port batch — used by Collections,
+ * Swipes, Prompts.
+ *
+ * Internal tokens (--bg-input, --border, --accent-subtle) are fine to use
+ * inside packages/ui per the token-boundary rule.
+ */
+import { Search, X } from 'lucide-react'
+
+export interface SearchBarProps {
+  value: string
+  onChange: (v: string) => void
+  placeholder?: string
+  width?: number | string
+  className?: string
+}
+
+export function SearchBar({
+  value,
+  onChange,
+  placeholder = 'Search…',
+  width = 260,
+  className,
+}: SearchBarProps) {
+  return (
+    <div
+      className={`flex items-center gap-2 px-3.5 py-2 transition-all ${className ?? ''}`.trim()}
+      style={{
+        background: 'rgb(var(--bg-input))',
+        border: '1px solid rgb(var(--border))',
+        borderRadius: 'var(--radius-sm)',
+        width,
+      }}
+      onFocus={(e) => {
+        e.currentTarget.style.borderColor = 'rgb(var(--accent))'
+        e.currentTarget.style.boxShadow = '0 0 0 3px rgb(var(--accent-subtle))'
+      }}
+      onBlur={(e) => {
+        e.currentTarget.style.borderColor = 'rgb(var(--border))'
+        e.currentTarget.style.boxShadow = 'none'
+      }}
+    >
+      <Search
+        className="h-4 w-4 shrink-0"
+        style={{ color: 'rgb(var(--text-muted))' }}
+      />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="flex-1 bg-transparent outline-none text-[13px]"
+        style={{
+          color: 'rgb(var(--foreground))',
+          fontFamily: 'var(--font-sans)',
+        }}
+      />
+      {value && (
+        <button
+          type="button"
+          onClick={() => onChange('')}
+          aria-label="Clear"
+          style={{ color: 'rgb(var(--text-muted))' }}
+          onMouseEnter={(e) =>
+            (e.currentTarget.style.color = 'rgb(var(--foreground))')
+          }
+          onMouseLeave={(e) =>
+            (e.currentTarget.style.color = 'rgb(var(--text-muted))')
+          }
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/segmented-pill.tsx

@@ -0,0 +1,143 @@
+/**
+ * SegmentedPill — segmented control with an outlined-accent active state.
+ *
+ * Visual:
+ *
+ *   ╭──────────────────────────────────────────────────────────────╮
+ *   │ ┌──────────────┐                                              │
+ *   │ │ ⚙  Active    │   ☰  Inactive    ⚙  Inactive    ☰  Inactive │
+ *   │ └──────────────┘                                              │
+ *   ╰──────────────────────────────────────────────────────────────╯
+ *
+ *   • Whole strip sits in a subtle `--surface-overlay-soft` rounded
+ *     container so the inactive segments read as text rather than
+ *     borderless buttons.
+ *   • The active segment is wrapped in a 1px accent border with an
+ *     `--accent-subtle` fill — reads as an "outlined pill" sitting
+ *     inside the strip.
+ *   • Each segment is a button with an optional leading icon.
+ *
+ * Generic — accepts a typed `items` array. First consumer: Keywords
+ * lens SearchPanel (research-mode picker). Reusable anywhere a small
+ * (2–5 item) mutually-exclusive choice needs a low-emphasis tab-like
+ * control.
+ *
+ * Icon-agnostic. Token-only styling.
+ */
+
+import { useId, type ReactNode } from 'react'
+import { cn } from './lib/utils'
+
+export interface SegmentedPillItem<Id extends string = string> {
+  id: Id
+  label: ReactNode
+  icon?: ReactNode
+  disabled?: boolean
+  /** Optional accessible label override for icon-heavy segments. */
+  ariaLabel?: string
+}
+
+export interface SegmentedPillProps<Id extends string = string> {
+  items: SegmentedPillItem<Id>[]
+  value: Id
+  onChange: (next: Id) => void
+  /** Accessible label for the whole group (rendered as aria-label on
+   *  the `role="tablist"` container). */
+  ariaLabel?: string
+  /** Size variant — controls vertical padding + font. Default `md`.
+   *  `xs` is for dense inline contexts (e.g. a sort toggle inside a tab bar). */
+  size?: 'xs' | 'sm' | 'md'
+  /** Fill the available width and stretch segments. Default `true`. */
+  stretch?: boolean
+  className?: string
+}
+
+export function SegmentedPill<Id extends string = string>({
+  items,
+  value,
+  onChange,
+  ariaLabel,
+  size = 'md',
+  stretch = true,
+  className,
+}: SegmentedPillProps<Id>) {
+  const reactId = useId()
+
+  const padY = size === 'xs' ? 'py-1' : size === 'sm' ? 'py-1.5' : 'py-2'
+  const textSize = size === 'xs' ? 'text-[11px]' : size === 'sm' ? 'text-[12px]' : 'text-[13px]'
+  const padX = size === 'xs' ? 'px-2.5' : 'px-3'
+  const containerPad = size === 'xs' ? 'p-0.5' : 'p-1'
+
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      className={cn(
+        'flex items-center gap-1',
+        containerPad,
+        stretch && 'w-full',
+        className,
+      )}
+      style={{
+        background: 'rgb(var(--surface-overlay-soft))',
+        border: '1px solid rgb(var(--border))',
+        borderRadius: 'var(--radius-full)',
+      }}
+    >
+      {items.map((item) => {
+        const isActive = item.id === value
+        return (
+          <button
+            key={item.id}
+            type="button"
+            role="tab"
+            aria-selected={isActive}
+            aria-controls={`${reactId}-panel-${item.id}`}
+            disabled={item.disabled}
+            onClick={() => onChange(item.id)}
+            aria-label={item.ariaLabel}
+            className={cn(
+              'inline-flex items-center justify-center gap-1.5',
+              padX,
+              padY,
+              textSize,
+              'font-medium transition-colors',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+              stretch && 'flex-1',
+              isActive ? 'cursor-default' : 'cursor-pointer',
+            )}
+            style={{
+              borderRadius: 'var(--radius-full)',
+              ...(isActive
+                ? {
+                    background: 'rgb(var(--accent-subtle))',
+                    border: '1px solid rgb(var(--accent))',
+                    color: 'rgb(var(--accent))',
+                  }
+                : {
+                    background: 'transparent',
+                    border: '1px solid transparent',
+                    color: 'rgb(var(--text-secondary))',
+                  }),
+            }}
+          >
+            {item.icon && (
+              <span
+                className="inline-flex shrink-0"
+                style={{
+                  color: isActive
+                    ? 'rgb(var(--accent))'
+                    : 'rgb(var(--text-muted))',
+                }}
+                aria-hidden="true"
+              >
+                {item.icon}
+              </span>
+            )}
+            <span className="truncate">{item.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}