@lovett/ui 0.0.1

package/src/profile-section.tsx

@@ -0,0 +1,389 @@
+/**
+ * ProfileSection — section primitive with the head/tray/foot anatomy
+ * used by the redesigned Brand Profile page (and reusable on any
+ * settings-style page with multiple labelled, scrollable sections).
+ *
+ * Built on `ds-card-surface` with `data-framed="true"` so it inherits
+ * the same chrome as Card / MediaCard / StatCard — slate frame around
+ * a bright focal tray, with the foot sitting back on the frame.
+ *
+ * Two head modes:
+ *   • Static (default) — pass `actions` (e.g. Edit / Generate buttons).
+ *   • Editable — pass `editable` props (onSave / onCancel / isSaving)
+ *     and the head shows an Edit pencil in view mode, swapping to
+ *     Cancel + Save buttons in edit mode. Tray content can branch on
+ *     the render-prop child: `{(isEditing) => isEditing ? <Form/> : <View/>}`.
+ *
+ * Sections expose `data-section-id="<id>"` so ChipNav can scroll-spy.
+ */
+
+import {
+  cloneElement,
+  isValidElement,
+  useState,
+  type ButtonHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from 'react'
+import { Check, Loader2, Pencil, X } from 'lucide-react'
+import { cn } from './lib/utils'
+
+// Canonical size for the head icon. Centralised so every section uses
+// the same glyph size — no more `<Compass className="h-[17px] w-[17px]" />`
+// at seven callsites.
+const HEAD_ICON_SIZE = 17
+
+// ---------------------------------------------------------------------------
+// Section head — icon + title + subtitle + actions
+// ---------------------------------------------------------------------------
+
+interface SectionHeadProps {
+  icon?: ReactNode | undefined
+  title: string
+  subtitle?: string | undefined
+  actions?: ReactNode | undefined
+}
+
+function SectionHead({ icon, title, subtitle, actions }: SectionHeadProps) {
+  const sizedIcon = isValidElement(icon)
+    ? cloneElement(
+        icon as ReactElement<{ className?: string; size?: number | string }>,
+        {
+          size: HEAD_ICON_SIZE,
+          className: cn(
+            (icon.props as { className?: string }).className,
+            `h-[${HEAD_ICON_SIZE}px] w-[${HEAD_ICON_SIZE}px]`,
+          ),
+        },
+      )
+    : icon
+
+  return (
+    <div className="flex items-center gap-3 px-4 pt-4 pb-3">
+      {icon && (
+        <span
+          className="shrink-0 inline-flex items-center justify-center w-[34px] h-[34px] rounded-[10px]"
+          style={{
+            background: 'rgb(var(--accent-muted))',
+            color: 'rgb(var(--accent))',
+          }}
+        >
+          {sizedIcon}
+        </span>
+      )}
+      <div className="flex-1 min-w-0">
+        <div
+          className="text-[14.5px] font-semibold leading-tight tracking-[-0.01em] truncate"
+          style={{ color: 'rgb(var(--foreground))' }}
+        >
+          {title}
+        </div>
+        {subtitle && (
+          <div
+            className="text-[12px] mt-[3px] leading-snug"
+            style={{ color: 'rgb(var(--text-tertiary))' }}
+          >
+            {subtitle}
+          </div>
+        )}
+      </div>
+      {actions && (
+        <div className="shrink-0 flex items-center gap-1">{actions}</div>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Action button — small icon button used in the section head
+// ---------------------------------------------------------------------------
+
+interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string
+}
+
+function ActionButton({
+  label,
+  className,
+  children,
+  ...rest
+}: ActionButtonProps) {
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      className={cn(
+        'inline-flex items-center justify-center w-[30px] h-[30px] rounded-[8px] transition-colors cursor-pointer',
+        className,
+      )}
+      style={{
+        background: 'transparent',
+        color: 'rgb(var(--text-tertiary))',
+        border: '1px solid transparent',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = 'rgb(var(--surface-overlay))'
+        e.currentTarget.style.color = 'rgb(var(--foreground))'
+        e.currentTarget.style.borderColor = 'rgb(var(--border))'
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = 'transparent'
+        e.currentTarget.style.color = 'rgb(var(--text-tertiary))'
+        e.currentTarget.style.borderColor = 'transparent'
+      }}
+      {...rest}
+    >
+      {children}
+    </button>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Foot — meta items + optional AI-action link
+// ---------------------------------------------------------------------------
+
+interface FootProps {
+  meta?: ReactNode
+  link?: { label: string; onClick: () => void; icon?: ReactNode }
+}
+
+function Foot({ meta, link }: FootProps) {
+  if (!meta && !link) return null
+  return (
+    <div className="flex items-center justify-between gap-3 px-4 pt-3 pb-4 text-[12px]">
+      <div
+        className="flex items-center gap-3.5 flex-wrap"
+        style={{ color: 'rgb(var(--text-tertiary))' }}
+      >
+        {meta}
+      </div>
+      {link && (
+        <button
+          type="button"
+          onClick={link.onClick}
+          className="inline-flex items-center gap-1 text-[11.5px] font-medium bg-transparent border-0 cursor-pointer p-0 transition-opacity"
+          style={{
+            color: 'rgb(var(--accent))',
+            fontFamily: 'var(--font-sans)',
+          }}
+          onMouseEnter={(e) => (e.currentTarget.style.textDecoration = 'underline')}
+          onMouseLeave={(e) => (e.currentTarget.style.textDecoration = 'none')}
+        >
+          {link.label}
+          {link.icon}
+        </button>
+      )}
+    </div>
+  )
+}
+
+/** FootItem — a single icon+text item inside the foot. */
+function FootItem({ children }: { children: ReactNode }) {
+  return <span className="inline-flex items-center gap-1.5">{children}</span>
+}
+
+// ---------------------------------------------------------------------------
+// Editable head — pencil → cancel/save controls
+// ---------------------------------------------------------------------------
+
+interface EditableHeadActionsProps {
+  isEditing: boolean
+  isSaving: boolean
+  saveDisabled?: boolean | undefined
+  onEdit: () => void
+  onCancel: () => void
+  onSave: () => void
+  extraViewActions?: ReactNode | undefined
+}
+
+function EditableHeadActions({
+  isEditing,
+  isSaving,
+  saveDisabled,
+  onEdit,
+  onCancel,
+  onSave,
+  extraViewActions,
+}: EditableHeadActionsProps) {
+  if (isEditing) {
+    return (
+      <>
+        <ActionButton
+          label="Cancel"
+          onClick={onCancel}
+          disabled={isSaving}
+          style={
+            isSaving
+              ? { opacity: 0.5, pointerEvents: 'none' }
+              : undefined
+          }
+        >
+          <X className="h-4 w-4" />
+        </ActionButton>
+        <ActionButton
+          label={isSaving ? 'Saving…' : 'Save'}
+          onClick={onSave}
+          disabled={isSaving || saveDisabled}
+          style={
+            isSaving || saveDisabled
+              ? { opacity: 0.5, pointerEvents: 'none' }
+              : { color: 'rgb(var(--accent))' }
+          }
+        >
+          {isSaving ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Check className="h-4 w-4" />
+          )}
+        </ActionButton>
+      </>
+    )
+  }
+  return (
+    <>
+      {extraViewActions}
+      <ActionButton label="Edit" onClick={onEdit}>
+        <Pencil className="h-[14px] w-[14px]" />
+      </ActionButton>
+    </>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// ProfileSection root
+// ---------------------------------------------------------------------------
+
+interface BaseProps {
+  /** DOM id and `data-section-id` for ChipNav scroll-spy. */
+  id: string
+  /** Lucide icon (rendered ~17px). */
+  icon?: ReactNode
+  /** Section title. */
+  title: string
+  /** Section subtitle / description. */
+  subtitle?: string
+  /** Optional foot meta + AI-action link. */
+  foot?: FootProps
+  /** Extra padding tweak. */
+  className?: string
+}
+
+interface StaticSectionProps extends BaseProps {
+  /** Right-side header actions (override default pencil/generate). */
+  actions?: ReactNode
+  children: ReactNode
+  editable?: undefined
+}
+
+interface EditableSectionProps extends BaseProps {
+  editable: {
+    onSave: () => void | Promise<void>
+    onCancel?: () => void
+    isSaving?: boolean
+    saveDisabled?: boolean
+    /** Controlled editing state. If omitted, state is internal. */
+    isEditing?: boolean
+    onEditingChange?: (editing: boolean) => void
+    /** Extra actions before the pencil in view mode (e.g. Generate). */
+    extraViewActions?: ReactNode
+  }
+  /** Render-prop child receives the current editing state. */
+  children: (isEditing: boolean) => ReactNode
+  actions?: undefined
+}
+
+type ProfileSectionProps = StaticSectionProps | EditableSectionProps
+
+function ProfileSection(props: ProfileSectionProps) {
+  const { id, icon, title, subtitle, foot, className } = props
+  const [internalEditing, setInternalEditing] = useState(false)
+
+  const editable = 'editable' in props ? props.editable : undefined
+  const isEditing = editable
+    ? editable.isEditing ?? internalEditing
+    : false
+
+  const setEditing = (v: boolean) => {
+    if (editable?.onEditingChange) editable.onEditingChange(v)
+    else setInternalEditing(v)
+  }
+
+  const handleCancel = () => {
+    editable?.onCancel?.()
+    setEditing(false)
+  }
+
+  const handleSave = async () => {
+    if (!editable) return
+    try {
+      await editable.onSave()
+      setEditing(false)
+    } catch {
+      // Caller surfaces the error via toast / mutation state.
+    }
+  }
+
+  const headActions = editable ? (
+    <EditableHeadActions
+      isEditing={isEditing}
+      isSaving={!!editable.isSaving}
+      saveDisabled={editable.saveDisabled}
+      onEdit={() => setEditing(true)}
+      onCancel={handleCancel}
+      onSave={handleSave}
+      extraViewActions={editable.extraViewActions}
+    />
+  ) : (
+    props.actions ?? (
+      <ActionButton label="Edit">
+        <Pencil className="h-[14px] w-[14px]" />
+      </ActionButton>
+    )
+  )
+
+  const children = editable
+    ? (props.children as (e: boolean) => ReactNode)(isEditing)
+    : (props.children as ReactNode)
+
+  return (
+    <section
+      id={id}
+      data-section-id={id}
+      data-framed="true"
+      className={cn('ds-card-surface flex flex-col', className)}
+      style={{ scrollMarginTop: 'var(--section-scroll-offset)' }}
+    >
+      <SectionHead
+        icon={icon}
+        title={title}
+        subtitle={subtitle}
+        actions={headActions}
+      />
+      {/* flex:1 lets the tray fill remaining height when the section is
+          stretched (e.g. side-by-side in an equal-height grid), so trays
+          bottom-align instead of leaving a gap under a shorter-header card.
+          No effect on un-stretched (vertically-stacked) sections. */}
+      <div className="ds-card-tray p-5" style={{ flex: '1 1 auto' }}>
+        {children}
+      </div>
+      {foot && <Foot {...foot} />}
+    </section>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Compose
+// ---------------------------------------------------------------------------
+
+type ProfileSectionComponent = typeof ProfileSection & {
+  ActionButton: typeof ActionButton
+  FootItem: typeof FootItem
+}
+
+const PS = ProfileSection as ProfileSectionComponent
+PS.ActionButton = ActionButton
+PS.FootItem = FootItem
+
+export default PS
+export type { ProfileSectionProps }

package/src/progress-bar.tsx

@@ -0,0 +1,84 @@
+/**
+ * ProgressBar — labeled fill bar.
+ *
+ * Promoted in ADR-020 (Phase 3a Discovery report generation, first
+ * committed consumer). Cross-batch consumers: Phase 8 (AI-suggest
+ * progress if surfaced), Phase 12 (generation step in wizard).
+ *
+ * Indeterminate variant for unknown-duration progress (animated
+ * stripe sweep); determinate variant for known-percent progress.
+ *
+ * Token discipline: all colors via public tokens.
+ */
+
+export interface ProgressBarProps {
+  /** Optional label above the bar. */
+  label?: string
+  /** 0-100 percent (determinate). Omit for indeterminate animation. */
+  percent?: number
+  /** Optional secondary text shown right of the label. Often "X%" or a status message. */
+  status?: string
+  /** Track height in px (default 8). */
+  height?: number
+}
+
+export function ProgressBar({ label, percent, status, height = 8 }: ProgressBarProps) {
+  const determinate = typeof percent === 'number'
+  const clamped = determinate ? Math.max(0, Math.min(100, percent)) : 0
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {(label || status) && (
+        <div className="flex items-center justify-between">
+          {label && (
+            <span
+              className="text-[12px] font-medium"
+              style={{ color: 'rgb(var(--text-secondary))' }}
+            >
+              {label}
+            </span>
+          )}
+          {status && (
+            <span
+              className="text-[11px] tabular-nums"
+              style={{ color: 'rgb(var(--text-tertiary))' }}
+            >
+              {status}
+            </span>
+          )}
+        </div>
+      )}
+      <div
+        role="progressbar"
+        aria-valuenow={determinate ? clamped : undefined}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className="w-full overflow-hidden"
+        style={{
+          height,
+          background: 'rgb(var(--surface-overlay))',
+          borderRadius: 'var(--radius-full)',
+        }}
+      >
+        {determinate ? (
+          <div
+            className="h-full transition-[width] duration-300 ease-out"
+            style={{
+              width: `${clamped}%`,
+              background: 'rgb(var(--accent))',
+              borderRadius: 'var(--radius-full)',
+            }}
+          />
+        ) : (
+          <div
+            className="h-full progress-indeterminate"
+            style={{
+              background: 'rgb(var(--accent))',
+              borderRadius: 'var(--radius-full)',
+            }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/radio.tsx

@@ -0,0 +1,172 @@
+/**
+ * Radio + RadioGroup primitives (ADR-029 D3).
+ *
+ * Stand-alone radio inputs for cases where the OptionTile pattern is
+ * too visual — inline form labels, compact mode pickers. For tinted-
+ * card mode pickers use <OptionTileGroup type="radio"> instead.
+ *
+ * API mirrors RadioGroup conventions:
+ *   <RadioGroup name="case" value={mode} onChange={setMode}>
+ *     <Radio value="lower" label="lowercase" />
+ *     <Radio value="upper" label="UPPERCASE" description="all caps" />
+ *   </RadioGroup>
+ *
+ * Token discipline: all public tokens (--accent, --border, --foreground,
+ * --text-tertiary, --ring-focus). Composable inside <Field>.
+ */
+
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  type ReactNode,
+} from 'react'
+import { cn } from './lib/utils'
+
+export interface RadioGroupProps<T extends string = string> {
+  /** Form name — required for proper radio semantics + form submission. */
+  name: string
+  /** Currently selected value. */
+  value: T | null
+  /** Fires when the user picks a different option. */
+  onChange: (next: T) => void
+  /** <Radio> children. */
+  children: ReactNode
+  /** Visually-hidden label for screen readers. Renders as <legend>. */
+  ariaLabel?: string
+  /** Layout direction. Defaults to vertical. */
+  orientation?: 'horizontal' | 'vertical'
+  /** Extra classes on the wrapping <fieldset>. */
+  className?: string
+  /** Disable every child radio. */
+  disabled?: boolean
+}
+
+interface RadioGroupContextValue {
+  name: string
+  value: string | null
+  onChange: (next: string) => void
+  disabled: boolean
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)
+
+export function RadioGroup<T extends string = string>({
+  name,
+  value,
+  onChange,
+  children,
+  ariaLabel,
+  orientation = 'vertical',
+  className,
+  disabled = false,
+}: RadioGroupProps<T>) {
+  const ctx: RadioGroupContextValue = {
+    name,
+    value,
+    onChange: onChange as (next: string) => void,
+    disabled,
+  }
+  return (
+    <RadioGroupContext.Provider value={ctx}>
+      <fieldset
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? 'flex-row gap-4' : 'flex-col gap-2',
+          className,
+        )}
+      >
+        {ariaLabel && <legend className="sr-only">{ariaLabel}</legend>}
+        {children}
+      </fieldset>
+    </RadioGroupContext.Provider>
+  )
+}
+
+export interface RadioProps {
+  /** Value emitted to the group's onChange when picked. */
+  value: string
+  /** Visible label. */
+  label: ReactNode
+  /** Optional secondary text (smaller, --text-tertiary). */
+  description?: ReactNode
+  /** Disable this specific radio (overrides group default). */
+  disabled?: boolean
+  /** Extra classes on the outer <label>. */
+  className?: string
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
+  { value, label, description, disabled, className },
+  ref,
+) {
+  const ctx = useContext(RadioGroupContext)
+  if (!ctx) {
+    throw new Error('<Radio> must be rendered inside <RadioGroup>')
+  }
+  const inputId = useId()
+  const isSelected = ctx.value === value
+  const isDisabled = disabled ?? ctx.disabled
+
+  return (
+    <label
+      htmlFor={inputId}
+      className={cn(
+        'inline-flex items-start gap-2.5 cursor-pointer select-none group',
+        isDisabled && 'cursor-not-allowed opacity-50',
+        className,
+      )}
+    >
+      <input
+        ref={ref}
+        id={inputId}
+        type="radio"
+        name={ctx.name}
+        value={value}
+        checked={isSelected}
+        disabled={isDisabled}
+        onChange={() => ctx.onChange(value)}
+        className="peer sr-only"
+      />
+      {/* Visual dot — 16px outer ring, 8px inner fill. */}
+      <span
+        aria-hidden
+        className={cn(
+          'mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition-colors',
+          'peer-focus-visible:[box-shadow:var(--ring-focus)]',
+        )}
+        style={{
+          border: `1.5px solid rgb(var(${
+            isSelected ? '--accent' : '--border-strong'
+          }))`,
+          background: 'transparent',
+        }}
+      >
+        <span
+          className={cn(
+            'h-2 w-2 rounded-full transition-opacity',
+            isSelected ? 'opacity-100' : 'opacity-0',
+          )}
+          style={{ background: 'rgb(var(--accent))' }}
+        />
+      </span>
+      <span className="flex flex-col gap-0.5 min-w-0">
+        <span
+          className="text-[13px] font-medium"
+          style={{ color: 'rgb(var(--foreground))' }}
+        >
+          {label}
+        </span>
+        {description && (
+          <span
+            className="text-[12px]"
+            style={{ color: 'rgb(var(--text-tertiary))' }}
+          >
+            {description}
+          </span>
+        )}
+      </span>
+    </label>
+  )
+})