@lovett/ui 0.0.1

package/README.md

@@ -0,0 +1,28 @@
+# @lovett/ui
+
+Design system for the Lovett portfolio. Tokens, primitives, layouts, and patterns consumed by the workspace, the launcher, and (eventually) the utility and partners apps.
+
+## Phase 0 status
+
+This package is **a skeleton**. It exposes:
+- `src/tokens.css` — a minimal placeholder token sheet so the workspace and launcher apps can render against it
+- `src/index.ts` — an empty barrel
+
+Phase 1 populates this package by extracting the stabilized design system from `brand-ai-extension/webapp/`. See `docs/phases/MASTER_PLAN.md` (Phase 1) and `docs/adr/ADR-001-workspace-architecture.md`.
+
+## Consumption
+
+Apps in the monorepo consume via workspace path:
+
+```ts
+import '@lovett/ui/tokens.css'
+// (primitives are added in Phase 1)
+```
+
+## Token discipline
+
+`packages/ui/tokens.css` is the **single source of truth** for visual design. Apps reference tokens via `rgb(var(--token-name))` or `var(--space-N)`; raw color literals and magic numbers are ESLint errors outside this package. See **CLAUDE.md §4** and **ADR-006**.
+
+## Publishing
+
+Today: `private: true`, consumed via workspace path. Publishes to GitHub Packages as `@lovett/ui` once three real external consumers exist (workspace + utility app + partners app). See PRD §4.8.

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@lovett/ui",
+  "version": "0.0.1",
+  "private": false,
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "type": "module",
+  "description": "Design system primitives, tokens, layouts, and patterns for the Lovett portfolio.",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./tokens.css": "./src/tokens.css",
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "build": "echo 'no-op (source-only consumption in v0)'"
+  },
+  "peerDependencies": {
+    "lucide-react": "^0.469.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "eslint": "^9.17.0",
+    "lucide-react": "^0.469.0",
+    "react-router-dom": "^7.1.0",
+    "typescript": "^5.7.2"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "clsx": "^2.1.1",
+    "mammoth": "^1.12.0",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0"
+  }
+}

package/src/accordion.tsx

@@ -0,0 +1,153 @@
+/**
+ * Accordion — controlled collapsible-section group.
+ *
+ * A vertical stack of card sections; each has a rich header (status
+ * indicator + title + optional badge + summary + chevron) and a body
+ * revealed when open. The consumer owns open state via `openIds` +
+ * `onToggle`, so single-open, multi-open, and "expand all" are all
+ * just different caller logic.
+ *
+ *   <Accordion openIds={openIds} onToggle={toggle}>
+ *     <Accordion.Section id="objective" title="Campaign objective"
+ *       summary="Lead generation" complete>
+ *       …body…
+ *     </Accordion.Section>
+ *   </Accordion>
+ *
+ * Workspace ADR: ADR-033.
+ */
+
+import { createContext, useContext, type ReactNode } from 'react'
+import { Check, ChevronDown } from 'lucide-react'
+import { cn } from './lib/utils'
+
+interface AccordionContextValue {
+  openIds: ReadonlySet<string>
+  onToggle: (id: string) => void
+}
+
+const AccordionCtx = createContext<AccordionContextValue | null>(null)
+
+export interface AccordionProps {
+  /** Ids of the currently-open sections. */
+  openIds: string[]
+  /** Fired with a section id when its header is clicked. */
+  onToggle: (id: string) => void
+  children: ReactNode
+  className?: string
+}
+
+function Accordion({ openIds, onToggle, children, className }: AccordionProps) {
+  return (
+    <AccordionCtx.Provider value={{ openIds: new Set(openIds), onToggle }}>
+      <div className={cn('flex flex-col gap-2.5', className)}>{children}</div>
+    </AccordionCtx.Provider>
+  )
+}
+
+export interface AccordionSectionProps {
+  /** Stable id — matched against the Accordion's `openIds`. */
+  id: string
+  title: string
+  /** Muted one-line summary under the title. */
+  summary?: ReactNode
+  /** Optional node right of the title — e.g. a "New" <Badge>. */
+  badge?: ReactNode
+  /** When true the leading indicator is an accent filled check;
+   *  otherwise an empty ring. */
+  complete?: boolean
+  children: ReactNode
+}
+
+function AccordionSection({
+  id,
+  title,
+  summary,
+  badge,
+  complete,
+  children,
+}: AccordionSectionProps) {
+  const ctx = useContext(AccordionCtx)
+  if (!ctx) {
+    throw new Error('Accordion.Section must be rendered inside <Accordion>.')
+  }
+  const open = ctx.openIds.has(id)
+
+  return (
+    <section
+      data-slot="accordion-section"
+      data-state={open ? 'open' : 'closed'}
+      style={{
+        background: 'rgb(var(--bg-card))',
+        border: '1px solid rgb(var(--border-card))',
+        borderRadius: 'var(--radius-lg)',
+      }}
+    >
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => ctx.onToggle(id)}
+        className="flex w-full items-center gap-3 px-4 py-3.5 text-left"
+      >
+        <span
+          className="inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full"
+          style={
+            complete
+              ? {
+                  background: 'rgb(var(--accent))',
+                  color: 'rgb(var(--primary-foreground))',
+                }
+              : { border: '1.5px solid rgb(var(--border-strong))' }
+          }
+          aria-hidden="true"
+        >
+          {complete && <Check className="h-3.5 w-3.5" strokeWidth={3} />}
+        </span>
+
+        <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="flex items-center gap-2">
+            <span
+              className="text-[14px] font-semibold tracking-[-0.01em]"
+              style={{ color: 'rgb(var(--foreground))' }}
+            >
+              {title}
+            </span>
+            {badge}
+          </span>
+          {summary && (
+            <span
+              className="text-[12.5px] leading-snug"
+              style={{ color: 'rgb(var(--text-tertiary))' }}
+            >
+              {summary}
+            </span>
+          )}
+        </span>
+
+        <ChevronDown
+          className="h-4 w-4 shrink-0 transition-transform"
+          style={{
+            color: 'rgb(var(--text-tertiary))',
+            transform: open ? 'rotate(180deg)' : 'none',
+          }}
+          aria-hidden="true"
+        />
+      </button>
+
+      {open && (
+        <div
+          className="px-4 pb-4 pt-3.5"
+          style={{ borderTop: '1px solid rgb(var(--border))' }}
+        >
+          {children}
+        </div>
+      )}
+    </section>
+  )
+}
+
+const AccordionCompound = Object.assign(Accordion, {
+  Section: AccordionSection,
+})
+
+export { AccordionCompound as Accordion }

package/src/atoms.tsx

@@ -0,0 +1,197 @@
+/**
+ * Brand-profile atoms — promoted from brand-ai-extension
+ * `webapp/src/components/brand-profile-v2/atoms.tsx` per ADR-010 Decision 3.
+ *
+ * Seven presentational primitives the Phase 2b brand-profile lens (and
+ * later sibling lenses — Discovery, Creative Brief) reach for:
+ *
+ *   IdentityLabel, IdentityValue, EmptyPlaceholder, ListItem, SectionLabel,
+ *   TextInput, TextareaInput
+ *
+ * The source's local `Card` + `CardGrid` are intentionally NOT promoted
+ * (ADR-010 Decision 4) — the canonical `Card` from `@lovett/ui` replaces
+ * both, and the source's `ListItems` wrapper is `<div class="flex flex-col
+ * gap-1.5">` boilerplate that callers can inline.
+ *
+ * `TextInput` + `TextareaInput` are thin (string)-callback wrappers around
+ * the canonical `<Input>` + `<Textarea>` so source section files don't
+ * need callsite churn during the port.
+ */
+
+import type { ReactNode } from 'react'
+import { Input } from './input'
+import { Textarea } from './textarea'
+
+// =======================================================================
+// LABELS
+// =======================================================================
+
+export function SectionLabel({ children }: { children: ReactNode }) {
+  return (
+    <div className="text-[11px] font-semibold uppercase tracking-[0.5px] text-[rgb(var(--text-muted))]">
+      {children}
+    </div>
+  )
+}
+
+export function IdentityLabel({ children }: { children: ReactNode }) {
+  return (
+    <div className="text-[11px] font-semibold uppercase tracking-[0.4px] text-[rgb(var(--text-muted))] mb-1.5">
+      {children}
+    </div>
+  )
+}
+
+export function IdentityValue({
+  children,
+  className = '',
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={`text-[14px] text-[rgb(var(--foreground))] ${className}`}
+      style={{ lineHeight: 1.6 }}
+    >
+      {children}
+    </div>
+  )
+}
+
+// =======================================================================
+// INPUTS
+// Thin (string)-callback wrappers around the canonical <Input> / <Textarea>.
+// Section files across brand-profile-v2 pass `value + onChange(string)` so
+// keeping that API means zero callsite churn during the Phase 2b port.
+// =======================================================================
+
+export function TextInput({
+  value,
+  onChange,
+  placeholder,
+  autoFocus,
+  autoComplete,
+  name,
+}: {
+  value: string
+  onChange: (v: string) => void
+  placeholder?: string | undefined
+  autoFocus?: boolean | undefined
+  /** Forwarded so the browser's autofill / password manager can identify the field. */
+  autoComplete?: string | undefined
+  /** Forwarded so the field participates in form submission / autofill heuristics. */
+  name?: string | undefined
+}) {
+  return (
+    <Input
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      autoFocus={autoFocus}
+      autoComplete={autoComplete}
+      name={name}
+    />
+  )
+}
+
+export function TextareaInput({
+  value,
+  onChange,
+  placeholder,
+  autoFocus,
+  autoComplete,
+  name,
+  rows = 4,
+}: {
+  value: string
+  onChange: (v: string) => void
+  placeholder?: string | undefined
+  autoFocus?: boolean | undefined
+  autoComplete?: string | undefined
+  name?: string | undefined
+  rows?: number | undefined
+}) {
+  return (
+    <Textarea
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      autoFocus={autoFocus}
+      autoComplete={autoComplete}
+      name={name}
+      rows={rows}
+    />
+  )
+}
+
+// =======================================================================
+// EMPTY PLACEHOLDER (always-visible placeholder card for missing content)
+// =======================================================================
+
+export function EmptyPlaceholder({
+  label,
+  description,
+  onAdd,
+}: {
+  label: string
+  description?: string | undefined
+  onAdd?: (() => void) | undefined
+}) {
+  const clickable = !!onAdd
+  return (
+    <div
+      onClick={onAdd}
+      className={`flex flex-col items-center justify-center text-center py-8 px-6 transition-colors ${
+        clickable ? 'cursor-pointer' : ''
+      }`}
+      style={{
+        background: 'rgb(var(--bg-card))',
+        border: '1px dashed rgb(var(--border-strong))',
+        borderRadius: 'var(--radius-lg)',
+      }}
+      onMouseEnter={(e) => {
+        if (!clickable) return
+        e.currentTarget.style.background = 'rgb(var(--accent-subtle))'
+        e.currentTarget.style.borderColor = 'rgb(var(--accent))'
+      }}
+      onMouseLeave={(e) => {
+        if (!clickable) return
+        e.currentTarget.style.background = 'rgb(var(--bg-card))'
+        e.currentTarget.style.borderColor = 'rgb(var(--border-strong))'
+      }}
+    >
+      <div className="text-[13px] font-medium text-[rgb(var(--text-secondary))] mb-1">
+        {clickable ? `+ Add ${label}` : `No ${label} yet`}
+      </div>
+      {description && (
+        <div className="text-[11px] text-[rgb(var(--text-muted))] max-w-xs">{description}</div>
+      )}
+    </div>
+  )
+}
+
+// =======================================================================
+// LIST ITEMS (with accent bullet)
+// =======================================================================
+
+export function ListItem({ children }: { children: ReactNode }) {
+  return (
+    <div
+      className="flex items-start gap-2 text-[13px] text-[rgb(var(--text-secondary))]"
+      style={{ lineHeight: 1.5 }}
+    >
+      <div
+        className="rounded-full shrink-0"
+        style={{
+          width: 'var(--bullet-size)',
+          height: 'var(--bullet-size)',
+          background: 'rgb(var(--accent))',
+          marginTop: 'var(--bullet-offset-y)',
+        }}
+      />
+      <div>{children}</div>
+    </div>
+  )
+}

package/src/badge.tsx

@@ -0,0 +1,91 @@
+/**
+ * Badge — semantic pill chip with optional leading icon.
+ *
+ * Promoted in ADR-021 (Phase 3b Discovery Contacts, first committed
+ * consumer — decision-maker level + salary range). Cross-batch
+ * consumers: Phase 8 (keyword competition + brand-type), Phase 12
+ * (validation severity).
+ *
+ * Distinct from EmptyPlaceholder + EmptyState + ChipNav.ChipNavItem —
+ * this is the pure-pill labeled-chip primitive for inline use within
+ * other components.
+ *
+ * Token discipline: all colors via public semantic tokens. Each tone
+ * pairs a background-tint + foreground-color from the matching token
+ * pair (--success / --success-bg, etc.).
+ */
+
+import type { ReactNode } from 'react'
+
+export type BadgeTone =
+  | 'neutral'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'destructive'
+  | 'info'
+
+const TONE_STYLE: Record<BadgeTone, { bg: string; color: string }> = {
+  neutral: {
+    bg: 'rgb(var(--surface-overlay))',
+    color: 'rgb(var(--text-secondary))',
+  },
+  accent: {
+    bg: 'rgb(var(--accent-subtle))',
+    color: 'rgb(var(--accent))',
+  },
+  success: {
+    bg: 'rgb(var(--success-bg))',
+    color: 'rgb(var(--success))',
+  },
+  warning: {
+    bg: 'rgb(var(--warning-bg))',
+    color: 'rgb(var(--warning))',
+  },
+  destructive: {
+    bg: 'rgb(var(--destructive) / 0.12)',
+    color: 'rgb(var(--destructive))',
+  },
+  info: {
+    bg: 'rgb(var(--info-bg))',
+    color: 'rgb(var(--info))',
+  },
+}
+
+export interface BadgeProps {
+  tone: BadgeTone
+  children: ReactNode
+  /** Optional leading icon — sized 12-14px expected. */
+  icon?: ReactNode
+  /** Size variant. `sm` = compact (10px text), `md` = default (11px). */
+  size?: 'sm' | 'md'
+  /** Optional className override on the outer span. */
+  className?: string
+}
+
+export function Badge({
+  tone,
+  children,
+  icon,
+  size = 'md',
+  className,
+}: BadgeProps) {
+  const { bg, color } = TONE_STYLE[tone]
+  const sizeClass = size === 'sm' ? 'text-[10px] px-1.5 py-0.5' : 'text-[11px] px-2 py-0.5'
+  return (
+    <span
+      className={
+        className ??
+        `inline-flex items-center gap-1 font-medium ${sizeClass}`
+      }
+      style={{
+        background: bg,
+        color,
+        borderRadius: 'var(--radius-full)',
+      }}
+    >
+      {icon && <span className="flex-shrink-0">{icon}</span>}
+      {children}
+    </span>
+  )
+}