@lovett/ui 0.0.1

package/src/chip-nav.tsx

@@ -0,0 +1,347 @@
+/**
+ * ChipNav — sticky pill bar with built-in scroll-spy.
+ *
+ * Renders a horizontally-scrolling row of chips; each chip targets a
+ * sibling element marked `data-section-id="<id>"`. On mount it wires up
+ * an IntersectionObserver to highlight the chip whose section is
+ * currently near the top of the scroll container; clicks smooth-scroll
+ * the section into view.
+ *
+ * Usage:
+ *   <ChipNav
+ *     items={[
+ *       { id: 'identity', label: 'Identity' },
+ *       { id: 'colors',   label: 'Colors' },
+ *     ]}
+ *     scrollContainer={mainScrollRef}   // or `'#scroll'` selector
+ *     stickyTop={56}                     // px from top when stuck
+ *   />
+ *
+ * Pure presentational primitive — no brand-profile coupling.
+ */
+
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react'
+import { cn } from './lib/utils'
+import { HEADER_HEIGHT, SECTION_SCROLL_OFFSET } from './lib/layout'
+
+export interface ChipNavItem {
+  id: string
+  label: string
+}
+
+interface ChipNavProps {
+  items: ChipNavItem[]
+  /**
+   * Element (ref or CSS selector) used as the scroll container for both
+   * the IntersectionObserver root and the smooth-scroll target. Falls
+   * back to the document if omitted.
+   */
+  scrollContainer?: React.RefObject<HTMLElement | null> | string
+  /** Pixel offset for sticky positioning (default: 0 — caller manages). */
+  stickyTop?: number
+  /** Pixels above the section to offset when click-scrolling. */
+  scrollOffset?: number
+  /**
+   * Optional content rendered on the right side of the bar, separated
+   * from the chips by a flexible spacer. Use for page-level actions
+   * that should stay pinned to the sticky bar (e.g. Export, Generate).
+   */
+  actions?: ReactNode
+  /** Extra Tailwind classes on the outer wrapper. */
+  className?: string
+  /** Inline style on the outer wrapper. */
+  style?: CSSProperties
+  /**
+   * Background painted on the sticky wrapper so page content scrolling
+   * behind the chip pill gets masked cleanly.
+   *
+   * - `'none'` (default) — wrapper is transparent. Correct inside a Card,
+   *   inside a tray, or anywhere the chip nav sits over a non-page surface.
+   * - `'page'` — wrapper paints `rgb(var(--main-content-bg))`. Correct
+   *   when the chip nav is mounted directly under the AppHeader, against
+   *   the page background, and needs to mask scrolling content beneath.
+   *
+   * Default was page-colored in the original brand-ai port; that bled
+   * into Card / Modal / Tray contexts as a discordant horizontal strip.
+   * Phase 2 callers that mount ChipNav against the page background must
+   * pass `surface="page"`.
+   */
+  surface?: 'none' | 'page'
+  /**
+   * Controlled mode: when provided, the parent owns the active chip.
+   * Scroll-spy is disabled and `onItemClick` is invoked instead of the
+   * default smooth-scroll behavior. Phase 7a GeoSearch uses this to
+   * drive mode-switch tabs (not scroll targets).
+   */
+  activeId?: string
+  /**
+   * Optional click handler. When provided, takes precedence over the
+   * built-in scroll-to-section behavior. Required for controlled-mode
+   * (`activeId`) use.
+   */
+  onItemClick?: (id: string) => void
+  /**
+   * `'sticky'` (default) — the wrapper is `sticky top-{stickyTop}` for
+   * the canonical scroll-spy use case.
+   * `'static'` — wrapper is `relative` with no inset; the consumer owns
+   *   positioning. Used by GeoSearch (Phase 7a) to mount ChipNav as a
+   *   floating island absolute-positioned above the map.
+   */
+  position?: 'sticky' | 'static'
+  /**
+   * `'comfortable'` (default, 32px chip height) — the canonical
+   * brand-profile lens density.
+   * `'compact'` (24px chip height) — slim variant for tight chrome
+   * like the `<PageHeaderHost />` center slot, where the surrounding
+   * header is only 48px tall. Reduces inner pill padding and chip
+   * vertical padding by 2px each.
+   */
+  density?: 'comfortable' | 'compact'
+}
+
+function resolveScrollEl(
+  scrollContainer: ChipNavProps['scrollContainer'],
+): HTMLElement | null {
+  if (!scrollContainer) return null
+  if (typeof scrollContainer === 'string') {
+    return document.querySelector(scrollContainer) as HTMLElement | null
+  }
+  return scrollContainer.current ?? null
+}
+
+export default function ChipNav({
+  items,
+  scrollContainer,
+  // Default lands the chip bar directly under the AppHeader. Callers
+  // only need to override when the chip bar lives under additional
+  // sticky chrome.
+  stickyTop = HEADER_HEIGHT,
+  scrollOffset = SECTION_SCROLL_OFFSET,
+  actions,
+  className,
+  style,
+  surface = 'none',
+  activeId: activeIdProp,
+  onItemClick,
+  position = 'sticky',
+  density = 'comfortable',
+}: ChipNavProps) {
+  const isControlled = activeIdProp !== undefined
+  const [internalActiveId, setInternalActiveId] = useState<string>(
+    items[0]?.id ?? '',
+  )
+  const activeId = isControlled ? activeIdProp : internalActiveId
+  const setActiveId = (id: string) => {
+    if (!isControlled) setInternalActiveId(id)
+  }
+  const [stuck, setStuck] = useState(false)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const navRef = useRef<HTMLDivElement>(null)
+
+  // Scroll-spy. Skipped in controlled mode — parent owns activeId.
+  useEffect(() => {
+    if (isControlled) return
+    const scrollEl = resolveScrollEl(scrollContainer)
+    const root = scrollEl ?? null
+
+    const sections = items
+      .map((it) =>
+        (root ?? document).querySelector<HTMLElement>(
+          `[data-section-id="${it.id}"]`,
+        ),
+      )
+      .filter((el): el is HTMLElement => !!el)
+
+    if (sections.length === 0) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((e) => e.isIntersecting)
+          .map((e) => ({
+            id: e.target.getAttribute('data-section-id') ?? '',
+            top: e.boundingClientRect.top,
+          }))
+          .sort((a, b) => a.top - b.top)
+        const first = visible[0]
+        // Effect early-returns when isControlled (line above), so this
+        // path always wants to update the uncontrolled state directly.
+        // Inlining `setInternalActiveId` (a stable useState setter)
+        // avoids closing over `setActiveId`, which would require
+        // including it in the deps array even though its identity
+        // changes on every render.
+        if (first) setInternalActiveId(first.id)
+      },
+      {
+        root,
+        rootMargin: `-${stickyTop + 60}px 0px -55% 0px`,
+        threshold: 0,
+      },
+    )
+
+    sections.forEach((s) => observer.observe(s))
+    return () => observer.disconnect()
+  }, [items, scrollContainer, stickyTop, isControlled])
+
+  // Track "stuck" state for backdrop blur / shadow style.
+  useEffect(() => {
+    const scrollEl = resolveScrollEl(scrollContainer)
+    if (!scrollEl || !wrapRef.current) return
+    const wrap = wrapRef.current
+    const update = () => {
+      const wRect = wrap.getBoundingClientRect()
+      const sRect = scrollEl.getBoundingClientRect()
+      setStuck(wRect.top - sRect.top <= stickyTop + 1)
+    }
+    update()
+    scrollEl.addEventListener('scroll', update, { passive: true })
+    return () => scrollEl.removeEventListener('scroll', update)
+  }, [scrollContainer, stickyTop])
+
+  // Auto-scroll active chip into view in the horizontal row.
+  useEffect(() => {
+    if (!navRef.current) return
+    const nav = navRef.current
+    const active = nav.querySelector<HTMLElement>(
+      `[data-chip-id="${activeId}"]`,
+    )
+    if (!active) return
+    const navRect = nav.getBoundingClientRect()
+    const aRect = active.getBoundingClientRect()
+    if (aRect.left < navRect.left) {
+      nav.scrollTo({ left: nav.scrollLeft + (aRect.left - navRect.left) - 12, behavior: 'smooth' })
+    } else if (aRect.right > navRect.right) {
+      nav.scrollTo({
+        left: nav.scrollLeft + (aRect.right - navRect.right) + 12,
+        behavior: 'smooth',
+      })
+    }
+  }, [activeId])
+
+  const handleClick = (id: string) => {
+    if (onItemClick) {
+      onItemClick(id)
+      setActiveId(id)
+      return
+    }
+    const scrollEl = resolveScrollEl(scrollContainer)
+    const section = (scrollEl ?? document).querySelector<HTMLElement>(
+      `[data-section-id="${id}"]`,
+    )
+    if (!section) return
+    if (scrollEl) {
+      const top =
+        section.getBoundingClientRect().top -
+        scrollEl.getBoundingClientRect().top +
+        scrollEl.scrollTop -
+        scrollOffset
+      scrollEl.scrollTo({ top, behavior: 'smooth' })
+    } else {
+      section.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+    setActiveId(id)
+  }
+
+  const isStatic = position === 'static'
+  return (
+    <div
+      ref={wrapRef}
+      data-stuck={stuck ? 'true' : undefined}
+      className={cn(
+        isStatic ? 'relative' : 'sticky z-20 py-3 -mt-3',
+        className,
+      )}
+      style={{
+        top: isStatic ? undefined : stickyTop,
+        background:
+          surface === 'page' ? 'rgb(var(--main-content-bg))' : 'transparent',
+        ...style,
+      }}
+    >
+      <div
+        className={cn(
+          'flex items-center gap-2',
+          density === 'compact' ? 'p-[3px]' : 'p-[5px]',
+        )}
+        style={{
+          background: 'rgb(var(--bg-card))',
+          border: '1px solid rgb(var(--border))',
+          borderRadius: 10,
+          boxShadow: stuck ? 'var(--shadow-md)' : 'var(--shadow-sm)',
+        }}
+      >
+        <div
+          ref={navRef}
+          role="tablist"
+          className="flex gap-1 overflow-x-auto scrollbar-hide flex-1 min-w-0"
+        >
+          {items.map((item) => {
+          const active = item.id === activeId
+          return (
+            <button
+              key={item.id}
+              type="button"
+              role="tab"
+              aria-selected={active}
+              data-chip-id={item.id}
+              onClick={() => handleClick(item.id)}
+              className={cn(
+                'inline-flex items-center gap-[7px] rounded-[7px] text-[12.5px] whitespace-nowrap cursor-pointer transition-colors border-0',
+                density === 'compact'
+                  ? 'px-[10px] py-[4px]'
+                  : 'px-[11px] py-[7px]',
+                active ? 'font-semibold' : 'font-medium',
+              )}
+              style={{
+                fontFamily: 'var(--font-sans)',
+                letterSpacing: '-0.005em',
+                color: active
+                  ? 'rgb(var(--surface-on-accent))'
+                  : 'rgb(var(--text-tertiary))',
+                background: active
+                  ? 'rgb(var(--accent))'
+                  : 'transparent',
+              }}
+              onMouseEnter={(e) => {
+                if (active) return
+                e.currentTarget.style.color = 'rgb(var(--foreground))'
+                e.currentTarget.style.background =
+                  'rgb(var(--surface-overlay-soft))'
+              }}
+              onMouseLeave={(e) => {
+                if (active) return
+                e.currentTarget.style.color = 'rgb(var(--text-tertiary))'
+                e.currentTarget.style.background = 'transparent'
+              }}
+            >
+              {item.label}
+            </button>
+          )
+        })}
+        </div>
+        {actions && (
+          <>
+            <div
+              aria-hidden
+              className="shrink-0"
+              style={{
+                width: 1,
+                height: 18,
+                background: 'rgb(var(--border))',
+              }}
+            />
+            <div className="shrink-0 flex items-center gap-1.5 pr-0.5">
+              {actions}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/choropleth.tsx

@@ -0,0 +1,62 @@
+/**
+ * Choropleth — decorative concentric trade-zone rings (ADR-104 D3).
+ *
+ * A glanceable "trade zone" graphic for the GeoDiscovery rail's report cards and
+ * the geo surface's empty state. It is DECORATIVE only — the real interactive map
+ * lives in the GeoDiscovery lens, one deep-link away. SVG is the right tool for
+ * ring geometry; the "no inline SVG" guidance applies to icons (use Lucide), not
+ * chart/decoration primitives like this one (CLAUDE.md §6).
+ *
+ * Token choice (ADR-104 D3, recorded): the ring fills use the existing
+ * ACCENT-TINT tier — `rgb(var(--accent) / α)` — NOT a new `--choropleth-ring-*`
+ * token tier, so no new public token shape and no ADR proposal is required. No
+ * hex / oklch literal lands in this SVG; every colour references a token.
+ *
+ *   <Choropleth />                 // radius (concentric circles)
+ *   <Choropleth mode="isochrone" /> // drive-time (concentric polygons)
+ */
+
+import type { CSSProperties } from 'react'
+
+export interface ChoroplethProps {
+  /** `radius` → concentric circles; `isochrone` → concentric polygons. */
+  mode?: 'radius' | 'isochrone'
+  className?: string
+  style?: CSSProperties
+}
+
+const RING_FILLS = ['rgb(var(--accent) / 0.45)', 'rgb(var(--accent) / 0.28)', 'rgb(var(--accent) / 0.14)']
+const RING_STROKE = 'rgb(var(--accent) / 0.5)'
+const GRID_STROKE = 'rgb(var(--foreground) / 0.04)'
+const RADII = [34, 24, 14]
+
+export default function Choropleth({ mode = 'radius', className, style }: ChoroplethProps) {
+  return (
+    <svg
+      viewBox="0 0 240 84"
+      width="100%"
+      height="100%"
+      preserveAspectRatio="xMidYMid slice"
+      className={className}
+      style={{ display: 'block', ...style }}
+      aria-hidden="true"
+    >
+      {[20, 60, 100, 140, 180, 220].map((x) => (
+        <line key={`v${x}`} x1={x} y1="0" x2={x} y2="84" stroke={GRID_STROKE} strokeWidth="1" />
+      ))}
+      {[21, 42, 63].map((y) => (
+        <line key={`h${y}`} x1="0" y1={y} x2="240" y2={y} stroke={GRID_STROKE} strokeWidth="1" />
+      ))}
+      {mode === 'radius'
+        ? RADII.map((r, i) => (
+            <circle key={r} cx="120" cy="42" r={r} fill={RING_FILLS[i] ?? RING_STROKE} stroke={RING_STROKE} strokeWidth="1" />
+          ))
+        : [0, 1, 2].map((i) => {
+            const s = 1 - i * 0.32
+            const pts = `120,${42 - 30 * s} ${120 + 40 * s},${42 - 8 * s} ${120 + 28 * s},${42 + 26 * s} ${120 - 30 * s},${42 + 22 * s} ${120 - 42 * s},${42 - 6 * s}`
+            return <polygon key={i} points={pts} fill={RING_FILLS[i] ?? RING_STROKE} stroke={RING_STROKE} strokeWidth="1" />
+          })}
+      <circle cx="120" cy="42" r="3" fill="rgb(var(--accent))" stroke="rgb(var(--surface-on-accent))" strokeWidth="1.5" />
+    </svg>
+  )
+}

package/src/code-block.tsx

@@ -0,0 +1,235 @@
+/**
+ * CodeBlock — syntax-highlighted code block with language label + copy button.
+ * MarkdownCode — react-markdown `code` element adapter (inline + fenced).
+ *
+ * Uses PrismLight (synchronous, tree-shakeable) so only registered languages
+ * are bundled. Theme follows the html data-theme attribute via a local
+ * MutationObserver hook.
+ *
+ * Promoted from brand-ai-extension (ADR-036 D20).
+ */
+
+import { useEffect, useState, type HTMLAttributes } from 'react'
+import { Check, Copy } from 'lucide-react'
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { vscDarkPlus, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash'
+import css from 'react-syntax-highlighter/dist/esm/languages/prism/css'
+import diff from 'react-syntax-highlighter/dist/esm/languages/prism/diff'
+import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript'
+import json from 'react-syntax-highlighter/dist/esm/languages/prism/json'
+import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
+import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown'
+import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup'
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python'
+import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql'
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'
+import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript'
+import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml'
+
+import { cn } from './lib/utils'
+
+/**
+ * Reads the html data-theme attribute and re-fires whenever it changes.
+ * Kept local until a workspace-wide useTheme hook is promoted.
+ */
+function useDataTheme(): 'light' | 'dark' {
+  const read = (): 'light' | 'dark' => {
+    if (typeof document === 'undefined') return 'dark'
+    const attr = document.documentElement.getAttribute('data-theme')
+    return attr === 'light' ? 'light' : 'dark'
+  }
+
+  const [theme, setTheme] = useState<'light' | 'dark'>(read)
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const observer = new MutationObserver(() => setTheme(read()))
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    })
+    return () => observer.disconnect()
+  }, [])
+
+  return theme
+}
+
+// Register the language allowlist once at module scope.
+const LANGUAGES: Record<string, unknown> = {
+  bash,
+  shell: bash,
+  sh: bash,
+  css,
+  diff,
+  javascript,
+  js: javascript,
+  json,
+  jsx,
+  markdown,
+  md: markdown,
+  html: markup,
+  xml: markup,
+  python,
+  py: python,
+  sql,
+  tsx,
+  typescript,
+  ts: typescript,
+  yaml,
+  yml: yaml,
+}
+
+for (const [name, lang] of Object.entries(LANGUAGES)) {
+  SyntaxHighlighter.registerLanguage(name, lang as never)
+}
+
+const LANGUAGE_LABELS: Record<string, string> = {
+  bash: 'bash',
+  sh: 'shell',
+  css: 'css',
+  diff: 'diff',
+  html: 'html',
+  javascript: 'javascript',
+  js: 'javascript',
+  json: 'json',
+  jsx: 'jsx',
+  markdown: 'markdown',
+  md: 'markdown',
+  python: 'python',
+  py: 'python',
+  shell: 'shell',
+  sql: 'sql',
+  tsx: 'tsx',
+  ts: 'typescript',
+  typescript: 'typescript',
+  xml: 'xml',
+  yaml: 'yaml',
+  yml: 'yaml',
+}
+
+export interface CodeBlockProps {
+  /** Lowercased language identifier, e.g. "typescript" or "json". */
+  language?: string
+  /** Raw source text. */
+  children: string
+}
+
+export function CodeBlock({ language, children }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+  const theme = useDataTheme()
+  const syntaxStyle = theme === 'light' ? oneLight : vscDarkPlus
+  const lang = (language ?? '').toLowerCase()
+  const supported = lang in LANGUAGES
+  const label = (LANGUAGE_LABELS[lang] ?? lang) || 'plaintext'
+  const source = String(children).replace(/\n$/, '')
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(source)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Clipboard can fail in insecure contexts — silently no-op.
+    }
+  }
+
+  return (
+    <div
+      className="my-4 overflow-hidden text-sm"
+      style={{
+        background: 'rgb(var(--bg-elevated))',
+        border: '1px solid rgb(var(--border))',
+        borderRadius: 'var(--radius-md)',
+      }}
+    >
+      {/* Header: language label + copy button */}
+      <div
+        className="flex items-center justify-between px-3 py-1.5 text-xs"
+        style={{
+          background: 'rgb(var(--muted))',
+          borderBottom: '1px solid rgb(var(--border))',
+          color: 'rgb(var(--muted-foreground))',
+        }}
+      >
+        <span className="font-mono lowercase">{label}</span>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className={cn(
+            'flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors',
+            !copied && 'hover:text-[rgb(var(--foreground))]',
+          )}
+          style={copied ? { color: 'rgb(var(--success))' } : undefined}
+          aria-label={copied ? 'Copied' : 'Copy code'}
+        >
+          {copied ? (
+            <>
+              <Check className="h-3.5 w-3.5" /> Copied
+            </>
+          ) : (
+            <>
+              <Copy className="h-3.5 w-3.5" /> Copy
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Body */}
+      {supported ? (
+        <SyntaxHighlighter
+          language={lang}
+          style={syntaxStyle}
+          customStyle={{
+            margin: 0,
+            padding: '0.875rem 1rem',
+            background: 'transparent',
+            fontSize: '0.8125rem',
+            lineHeight: 1.6,
+          }}
+          codeTagProps={{
+            style: { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' },
+          }}
+        >
+          {source}
+        </SyntaxHighlighter>
+      ) : (
+        <pre
+          className="overflow-x-auto px-4 py-3.5 font-mono text-[0.8125rem] leading-relaxed"
+          style={{ color: 'rgb(var(--foreground))' }}
+        >
+          {source}
+        </pre>
+      )}
+    </div>
+  )
+}
+
+/**
+ * MarkdownCode — react-markdown code element adapter.
+ *
+ * Inline code (single backtick, no className) renders as a small chip.
+ * Fenced code (triple backtick, className="language-xxx") delegates to
+ * CodeBlock for syntax highlighting + copy button.
+ */
+export function MarkdownCode({ className, children }: HTMLAttributes<HTMLElement>) {
+  if (!className) {
+    return (
+      <code
+        className="rounded px-1.5 py-0.5 font-mono text-[0.85em]"
+        style={{
+          background: 'rgb(var(--muted))',
+          color: 'rgb(var(--foreground))',
+          borderRadius: 'var(--radius-xs)',
+        }}
+      >
+        {children}
+      </code>
+    )
+  }
+
+  const match = /language-([\w-]+)/.exec(className)
+  const language = match?.[1]
+  return <CodeBlock {...(language !== undefined ? { language } : {})}>{String(children)}</CodeBlock>
+}