@lovett/ui 0.0.1

package/src/option-tile.tsx

@@ -0,0 +1,252 @@
+/**
+ * OptionTile + OptionTileGroup primitives (ADR-029 D2).
+ *
+ * Tinted-card-with-input pattern — clickable card surface that wraps a
+ * native radio OR checkbox input, with accent fill + border when active
+ * and an optional preview/description sub-line.
+ *
+ * Replaces 4 lens-local forks of the same idiom across Convert Case
+ * (route + modal), Text Formatter, and the Replace/Dedupe modals.
+ *
+ * Group usage (recommended):
+ *   <OptionTileGroup
+ *     type="radio"
+ *     name="case-mode"
+ *     value={mode}
+ *     onChange={setMode}
+ *     options={[
+ *       { value: 'lower', label: 'lowercase', description: 'all small letters' },
+ *       { value: 'upper', label: 'UPPERCASE' },
+ *     ]}
+ *   />
+ *
+ *   <OptionTileGroup
+ *     type="checkbox"
+ *     value={enabledOps}
+ *     onChange={setEnabledOps}
+ *     options={...}
+ *   />
+ *
+ * Standalone usage (escape hatch for non-group layouts):
+ *   <OptionTile
+ *     selected={mode === 'lower'}
+ *     onSelect={() => setMode('lower')}
+ *     inputType="radio"
+ *     inputName="case-mode"
+ *     label="lowercase"
+ *     description="all small letters"
+ *   />
+ */
+
+import { useId, type ReactNode } from 'react'
+import { cn } from './lib/utils'
+
+// ─── single tile ─────────────────────────────────────────────────────
+
+export interface OptionTileProps {
+  selected: boolean
+  onSelect: () => void
+  inputType: 'radio' | 'checkbox'
+  /** Required for radio (shared name across the group). */
+  inputName: string | undefined
+  label: ReactNode
+  description: ReactNode | undefined
+  disabled: boolean | undefined
+  className: string | undefined
+}
+
+export function OptionTile({
+  selected,
+  onSelect,
+  inputType,
+  inputName,
+  label,
+  description,
+  disabled = false,
+  className,
+}: OptionTileProps) {
+  const inputId = useId()
+
+  return (
+    <label
+      htmlFor={inputId}
+      className={cn(
+        'flex items-start gap-2.5 px-3 py-2.5 cursor-pointer select-none transition-colors',
+        'focus-within:[box-shadow:var(--ring-focus)]',
+        disabled && 'cursor-not-allowed opacity-50',
+        className,
+      )}
+      style={{
+        borderRadius: 'var(--radius-md)',
+        background: selected
+          ? 'rgb(var(--accent-subtle))'
+          : 'rgb(var(--surface-overlay-soft))',
+        border: `1px solid rgb(var(${
+          selected ? '--accent-muted' : '--border'
+        }))`,
+      }}
+    >
+      <input
+        id={inputId}
+        type={inputType}
+        name={inputName}
+        checked={selected}
+        disabled={disabled}
+        onChange={onSelect}
+        className="sr-only"
+      />
+      {/* Visual indicator — dot for radio, check for checkbox. */}
+      <span
+        aria-hidden
+        className="mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center"
+        style={{
+          borderRadius: inputType === 'radio' ? '9999px' : '4px',
+          border: `1.5px solid rgb(var(${
+            selected ? '--accent' : '--border-strong'
+          }))`,
+          background:
+            selected && inputType === 'checkbox'
+              ? 'rgb(var(--accent))'
+              : 'transparent',
+        }}
+      >
+        {selected && inputType === 'radio' && (
+          <span
+            className="h-2 w-2 rounded-full"
+            style={{ background: 'rgb(var(--accent))' }}
+          />
+        )}
+        {selected && inputType === 'checkbox' && (
+          <CheckGlyph />
+        )}
+      </span>
+      <span className="flex flex-col gap-0.5 min-w-0 flex-1">
+        <span
+          className="text-[13px] font-medium leading-tight"
+          style={{ color: 'rgb(var(--foreground))' }}
+        >
+          {label}
+        </span>
+        {description && (
+          <span
+            className="text-[12px] leading-snug"
+            style={{ color: 'rgb(var(--text-tertiary))' }}
+          >
+            {description}
+          </span>
+        )}
+      </span>
+    </label>
+  )
+}
+
+function CheckGlyph() {
+  // Lucide-style check, rendered as inline SVG path inside a primitive.
+  // Kept inline because the parent <span> already provides the colored
+  // background — we just need the white tick on top. NOT a violation of
+  // CLAUDE.md §6 (icon discipline only forbids inline SVG OUTSIDE
+  // packages/ui — primitives in this package may render their own
+  // canonical glyphs).
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="white"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  )
+}
+
+// ─── group wrapper ──────────────────────────────────────────────────
+
+interface OptionTileGroupOption<T extends string> {
+  value: T
+  label: ReactNode
+  description?: ReactNode
+  disabled?: boolean
+}
+
+// Discriminated by `type` so TS narrows value + onChange shapes correctly.
+export type OptionTileGroupProps<T extends string = string> =
+  | {
+      type: 'radio'
+      name: string
+      value: T | null
+      onChange: (next: T) => void
+      options: OptionTileGroupOption<T>[]
+      ariaLabel?: string
+      columns?: number
+      className?: string
+    }
+  | {
+      type: 'checkbox'
+      value: T[]
+      onChange: (next: T[]) => void
+      options: OptionTileGroupOption<T>[]
+      ariaLabel?: string
+      columns?: number
+      className?: string
+      /** Optional shared `name` attr on the underlying checkboxes (rarely needed). */
+      name?: string
+    }
+
+export function OptionTileGroup<T extends string = string>(
+  props: OptionTileGroupProps<T>,
+) {
+  const gridStyle = props.columns
+    ? { gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))` }
+    : { gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))' }
+
+  return (
+    <fieldset
+      className={cn('grid gap-2', props.className)}
+      style={gridStyle}
+    >
+      {props.ariaLabel && <legend className="sr-only">{props.ariaLabel}</legend>}
+      {props.options.map((opt) => {
+        if (props.type === 'radio') {
+          return (
+            <OptionTile
+              key={opt.value}
+              selected={props.value === opt.value}
+              onSelect={() => props.onChange(opt.value)}
+              inputType="radio"
+              inputName={props.name}
+              label={opt.label}
+              description={opt.description}
+              disabled={opt.disabled}
+              className={undefined}
+            />
+          )
+        }
+        // checkbox variant
+        const isSelected = props.value.includes(opt.value)
+        return (
+          <OptionTile
+            key={opt.value}
+            selected={isSelected}
+            onSelect={() =>
+              props.onChange(
+                isSelected
+                  ? props.value.filter((v) => v !== opt.value)
+                  : [...props.value, opt.value],
+              )
+            }
+            inputType="checkbox"
+            inputName={props.name}
+            label={opt.label}
+            description={opt.description}
+            disabled={opt.disabled}
+            className={undefined}
+          />
+        )
+      })}
+    </fieldset>
+  )
+}

package/src/page-hero.tsx

@@ -0,0 +1,78 @@
+/**
+ * PageHero — large title row that sits IN the content area, beneath the
+ * sticky header. At rest it owns the visual weight; on scroll the
+ * AppHeader's breadcrumbs become the persistent label.
+ *
+ * Promoted from `brand-ai-extension/webapp/src/components/ui/page-hero.tsx`
+ * as part of Phase A of the v1.1 lens port batch — used by Swipes,
+ * Collections, Discover; shared lens-local equivalents existed in earlier
+ * ports.
+ *
+ * Token-clean: only public tokens (`--accent`, `--foreground`,
+ * `--text-tertiary`).
+ */
+import type { ReactNode } from 'react'
+import { cn } from './lib/utils'
+
+export interface PageHeroProps {
+  /** Small uppercase label above the title, usually colored with --accent. */
+  eyebrow?: string
+  title: string
+  subtitle?: string
+  /** Right-aligned trailing content — typically a row of action buttons. */
+  actions?: ReactNode
+  /**
+   * Optional left-side adornment rendered alongside the title — e.g. the
+   * brand profile's logo block. Sits in the title row (not next to the
+   * eyebrow), vertically aligned with the title text. The hero gracefully
+   * collapses if this is `undefined` so pages without an adornment look
+   * unchanged.
+   */
+  leading?: ReactNode
+  className?: string
+}
+
+export function PageHero({
+  eyebrow,
+  title,
+  subtitle,
+  actions,
+  leading,
+  className,
+}: PageHeroProps) {
+  return (
+    <div className={cn('flex items-end justify-between gap-4 flex-wrap pt-4 pb-5', className)}>
+      <div className="min-w-0 flex-1 flex items-center gap-5">
+        {leading && <div className="shrink-0">{leading}</div>}
+        <div className="min-w-0 flex-1">
+          {eyebrow && (
+            <div
+              className="text-[11px] font-bold uppercase tracking-[0.1em] mb-1.5"
+              style={{ color: 'rgb(var(--accent))' }}
+            >
+              {eyebrow}
+            </div>
+          )}
+          <h1
+            className="text-[24px] font-bold tracking-[-0.02em] leading-tight"
+            style={{ color: 'rgb(var(--foreground))' }}
+          >
+            {title}
+          </h1>
+          {subtitle && (
+            <p
+              className="text-[13px] mt-1.5 leading-[1.5]"
+              style={{
+                color: 'rgb(var(--text-tertiary))',
+                maxWidth: 'var(--prose-narrow)',
+              }}
+            >
+              {subtitle}
+            </p>
+          )}
+        </div>
+      </div>
+      {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+    </div>
+  )
+}