@lovett/ui 0.0.5 → 0.0.7

package/src/__tests__/token-shape.test.ts

@@ -0,0 +1,193 @@
+// @vitest-environment node
+//
+// Pure source scan — no DOM needed, and jsdom rewrites import.meta.url to
+// an http URL that fileURLToPath rejects.
+/**
+ * Static guard for the "type-checks, lints, builds, renders nothing"
+ * defect class — CSS that is syntactically fine and semantically void.
+ *
+ * WHY THIS IS A SOURCE SCAN AND NOT A RENDER TEST
+ * ------------------------------------------------
+ * The first attempt at this asserted rendered inline styles. It could not
+ * work: any value containing `var()` is "pending substitution", so jsdom
+ * (and browsers, at parse time) store it verbatim without validating it.
+ * `rgb(var(--surface-overlay-soft) / 0.5)` and `rgb(var(--muted))` are
+ * indistinguishable through the CSSOM — a render test happily passes on
+ * the broken form. The invalidity only appears at computed-value time in
+ * a real browser, which is precisely why typecheck, lint, build and the
+ * whole test suite were all green while three primitives shipped with no
+ * error border and every SortableTable shipped unbanded.
+ *
+ * So this reads the source instead, and derives its rules from
+ * tokens.css rather than hardcoding a token list — a new alpha-carrying
+ * or shadow-valued token is covered the day it is added.
+ *
+ * The two rules:
+ *
+ *   1. A token whose VALUE is a shadow list ("0 0 0 3px rgb(...)") can
+ *      never appear inside rgb(). `rgb(var(--ring-error))` expands to
+ *      `rgb(0 0 0 3px rgb(...))`, which is dropped.
+ *
+ *   2. A token whose VALUE already carries an alpha ("0 0 0 / 0.03")
+ *      can never take a second one. `rgb(var(--surface-overlay-soft) / 0.5)`
+ *      expands to `rgb(0 0 0 / 0.03 / 0.5)`, which is dropped.
+ */
+import { readFileSync, readdirSync, statSync } from 'node:fs'
+import { join, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const SRC = fileURLToPath(new URL('..', import.meta.url))
+
+function sourceFiles(dir: string, acc: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    if (entry === 'node_modules' || entry === '__tests__') continue
+    const full = join(dir, entry)
+    if (statSync(full).isDirectory()) sourceFiles(full, acc)
+    else if (/\.(tsx?|css)$/.test(entry) && entry !== 'tokens.css') acc.push(full)
+  }
+  return acc
+}
+
+/** Parse tokens.css into { name -> [values across all theme blocks] }. */
+function readTokenValues(): Map<string, string[]> {
+  const css = readFileSync(join(SRC, 'tokens.css'), 'utf8')
+  const out = new Map<string, string[]>()
+  for (const [, name, value] of css.matchAll(/^\s*(--[a-z0-9-]+)\s*:\s*([^;]+);/gm)) {
+    const list = out.get(name!) ?? []
+    list.push(value!.trim())
+    out.set(name!, list)
+  }
+  return out
+}
+
+const TOKENS = readTokenValues()
+
+/** A shadow list — has a length unit, so it is not a colour. */
+const isShadowValued = (values: string[]) =>
+  values.some((v) => /\b\d+(px|rem|em)\b/.test(v) || v.startsWith('inset '))
+
+/** Already carries an alpha, so it cannot take a second one. */
+const isAlphaCarrying = (values: string[]) =>
+  values.some((v) => /^[\d\s.]+\/\s*[\d.]+$/.test(v))
+
+/**
+ * Blank out comments while preserving line numbers, so a violation still
+ * reports the line it is on. Without this the scan flags its own
+ * explanatory comments — every doc-block that spells out the broken form
+ * in order to warn against it.
+ *
+ * Line comments are only stripped when the line STARTS with `//`, so a
+ * `https://` inside a string is left intact.
+ */
+function stripComments(src: string): string {
+  return src
+    .replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' '))
+    .split('\n')
+    .map((line) => (/^\s*\/\//.test(line) ? '' : line))
+    .join('\n')
+}
+
+const FILES = sourceFiles(SRC)
+const rel = (f: string) => relative(SRC, f)
+const readCode = (f: string) => stripComments(readFileSync(f, 'utf8')).split('\n')
+
+describe('token shape', () => {
+  it('parsed a plausible token file', () => {
+    // Guard the guard: if the parse silently returned nothing, every
+    // assertion below would vacuously pass.
+    expect(TOKENS.size).toBeGreaterThan(100)
+    expect(isShadowValued(TOKENS.get('--ring-error') ?? [])).toBe(true)
+    expect(isAlphaCarrying(TOKENS.get('--surface-overlay-soft') ?? [])).toBe(true)
+    expect(isShadowValued(TOKENS.get('--accent') ?? [])).toBe(false)
+    expect(isAlphaCarrying(TOKENS.get('--accent') ?? [])).toBe(false)
+  })
+
+  it('finds source files to scan', () => {
+    expect(FILES.length).toBeGreaterThan(50)
+  })
+
+  it('never wraps a shadow-valued token in rgb()', () => {
+    const violations: string[] = []
+    for (const file of FILES) {
+      readCode(file).forEach((line, i) => {
+        for (const [, token] of line.matchAll(/rgb\(\s*var\((--[a-z0-9-]+)\)/g)) {
+          if (isShadowValued(TOKENS.get(token!) ?? [])) {
+            violations.push(`${rel(file)}:${i + 1} — rgb(var(${token})) is a box-shadow list, not a colour`)
+          }
+        }
+      })
+    }
+    expect(violations).toEqual([])
+  })
+
+  it('never nests a second alpha on an alpha-carrying token', () => {
+    const violations: string[] = []
+    for (const file of FILES) {
+      readCode(file).forEach((line, i) => {
+        for (const [, token] of line.matchAll(
+          /rgb\(\s*var\((--[a-z0-9-]+)\)\s*\/\s*[\d.]/g,
+        )) {
+          if (isAlphaCarrying(TOKENS.get(token!) ?? [])) {
+            violations.push(`${rel(file)}:${i + 1} — var(${token}) already carries an alpha`)
+          }
+        }
+      })
+    }
+    expect(violations).toEqual([])
+  })
+
+  it('never references a token that tokens.css does not define', () => {
+    const violations: string[] = []
+    for (const file of FILES) {
+      readCode(file).forEach((line, i) => {
+        for (const [, token] of line.matchAll(/var\((--[a-z0-9-]+)[,)]/g)) {
+          // Tailwind's own custom properties are not ours to define.
+          if (token!.startsWith('--tw-')) continue
+          if (!TOKENS.has(token!)) {
+            violations.push(`${rel(file)}:${i + 1} — var(${token}) is not defined in tokens.css`)
+          }
+        }
+      })
+    }
+    expect(violations).toEqual([])
+  })
+})
+
+describe('interpolated Tailwind classes', () => {
+  it('never builds an arbitrary-value utility from a template literal', () => {
+    // Tailwind scans source statically, so `h-[${SIZE}px]` is never
+    // generated. It type-checks, lints and builds, and does nothing.
+    const violations: string[] = []
+    for (const file of FILES) {
+      readCode(file).forEach((line, i) => {
+        if (/[a-z-]+-\[[^\]]*\$\{/.test(line)) {
+          violations.push(`${rel(file)}:${i + 1} — ${line.trim()}`)
+        }
+      })
+    }
+    expect(violations).toEqual([])
+  })
+})
+
+describe('undefined utility classes', () => {
+  // `animate-in`, `fade-in-0`, `zoom-in-95`, `slide-in-from-*` ship in
+  // tailwindcss-animate / tw-animate-css. Neither is a dependency of this
+  // repo, and Tailwind 4 core ships only spin/ping/pulse/bounce — so both
+  // of the kit's entrance animations referenced classes that had never
+  // been generated and had never run.
+  const ANIMATE_PLUGIN_CLASSES =
+    /\b(animate-in|animate-out|fade-in(-\d+)?|fade-out(-\d+)?|zoom-in(-\d+)?|zoom-out(-\d+)?|slide-in-from-\w+(-\d+)?|slide-out-to-\w+(-\d+)?)\b/
+
+  it('does not use tailwindcss-animate classes without the dependency', () => {
+    const violations: string[] = []
+    for (const file of FILES) {
+      readCode(file).forEach((line, i) => {
+        if (ANIMATE_PLUGIN_CLASSES.test(line)) {
+          violations.push(`${rel(file)}:${i + 1} — ${line.trim()}`)
+        }
+      })
+    }
+    expect(violations).toEqual([])
+  })
+})

package/src/card.tsx

@@ -203,7 +203,7 @@ function MetaItem({
           {icon}
         </span>
       )}
-      <span className="truncate tnum">{children}</span>
+      <span className="truncate tabular-nums">{children}</span>
     </div>
   )
 }

package/src/collapsible-card.tsx

@@ -0,0 +1,85 @@
+// CollapsibleCard — a Card whose titled header toggles its body open/closed.
+//
+// Reviewing long specs means scrolling past sections you don't care about right
+// now (a long Sitelinks list to reach Structured snippets, etc.). A collapsible
+// titled card lets the reviewer fold sections away as they go. Built on the
+// Card primitive; accessible (the title is a real button with aria-expanded)
+// and honors prefers-reduced-motion.
+//
+// The collapse toggle is the chevron+title region only, so header `actions`
+// (e.g. a "Suggest" button) stay independently clickable beside it — not nested
+// inside the toggle button.
+//
+// Promoted from the SEM Spec lens per ADR-136 Decision 11 (the "2+ consumers ->
+// promote" gate): the report tabs and the public share view both consume it.
+
+import { useId, useState, type ReactNode } from 'react'
+import { ChevronDown } from 'lucide-react'
+import Card from './card'
+
+export interface CollapsibleCardProps {
+  title: ReactNode
+  /** Optional leading icon (rendered before the title). */
+  icon?: ReactNode
+  /** Optional header content after the title (e.g. a count or subtitle). */
+  meta?: ReactNode
+  /** Right-aligned header controls, kept outside the collapse toggle. */
+  actions?: ReactNode
+  /** Start expanded (default) or collapsed. */
+  defaultOpen?: boolean
+  /** Body padding utility; pass '' for full-bleed bodies (e.g. tables). */
+  contentClassName?: string
+  children: ReactNode
+}
+
+export function CollapsibleCard({
+  title,
+  icon,
+  meta,
+  actions,
+  defaultOpen = true,
+  contentClassName = 'px-4 py-4',
+  children,
+}: CollapsibleCardProps) {
+  const [open, setOpen] = useState(defaultOpen)
+  const bodyId = useId()
+
+  return (
+    <Card>
+      <div
+        className="flex items-center justify-between gap-3 px-4 py-3"
+        style={{
+          borderBottom: `1px solid ${open ? 'rgb(var(--border))' : 'transparent'}`,
+        }}
+      >
+        <button
+          type="button"
+          onClick={() => setOpen((o) => !o)}
+          aria-expanded={open}
+          aria-controls={bodyId}
+          className="flex min-w-0 flex-1 items-center gap-2 rounded-[var(--radius-sm)] py-0.5 text-left transition-colors focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]"
+        >
+          <ChevronDown
+            className="h-4 w-4 shrink-0 transition-transform duration-200 ease-out motion-reduce:transition-none"
+            style={{
+              color: 'rgb(var(--text-tertiary))',
+              transform: open ? 'rotate(0deg)' : 'rotate(-90deg)',
+            }}
+            aria-hidden="true"
+          />
+          {icon}
+          <span className="truncate text-[14px] font-semibold" style={{ color: 'rgb(var(--foreground))' }}>
+            {title}
+          </span>
+          {meta}
+        </button>
+        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+      </div>
+      {open && (
+        <div id={bodyId} className={contentClassName}>
+          {children}
+        </div>
+      )}
+    </Card>
+  )
+}

package/src/data-grid/table-body.tsx

@@ -257,7 +257,14 @@ export function DataGridTableBody<
   return (
     <TableBody>
       {visibleRows.map((row, rowIndex) => (
-        <TableRow key={row.id}>
+        // TableRow styles `data-[state=selected]`; without this attribute a
+        // checked row had no visual state at all — only the checkbox changed.
+        <TableRow
+          key={row.id}
+          {...(selectedRowIds.includes(row.id)
+            ? { 'data-state': 'selected' as const }
+            : {})}
+        >
           <TableCell
             className="h-10 px-0 text-center"
             style={{

package/src/dropdown-menu.tsx

@@ -276,7 +276,7 @@ export function DropdownMenuContent({
         'fixed z-[100] min-w-48 max-w-[min(28rem,calc(100vw-16px))]',
         'p-1.5 overflow-y-auto',
         'rounded-[var(--radius-lg)]',
-        isPositioned && 'animate-in fade-in-0 zoom-in-95 duration-100',
+        isPositioned && 'ds-enter-pop',
         className,
       )}
       style={{

package/src/floating-status-bar.tsx

@@ -61,7 +61,7 @@ export function FloatingStatusBar({
       role="status"
       className={cn(
         'fixed bottom-4 left-1/2 z-30 flex -translate-x-1/2 items-center gap-3.5 px-3.5 py-2.5',
-        'motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2',
+        'ds-enter-rise',
         className,
       )}
       style={{

package/src/folder-tree-picker.tsx

@@ -265,13 +265,12 @@ export function FolderTreePicker({
         aria-controls={open ? popoverId : undefined}
         disabled={disabled}
         onClick={() => setOpen((o) => !o)}
-        className={cn(
-          'btn btn-secondary justify-between w-full',
-          error && 'is-error',
-          className,
-        )}
+        className={cn('btn btn-secondary justify-between w-full', className)}
         style={{
-          borderColor: error ? 'rgb(var(--ring-error))' : undefined,
+          /* --ring-error is a box-shadow LIST, not a colour; rgb(var(--ring-error))
+             is invalid CSS and gets dropped, which left this error state inert.
+             The colour token is --destructive (what .input-shell.is-error uses). */
+          borderColor: error ? 'rgb(var(--destructive))' : undefined,
         }}
       >
         <span className="inline-flex items-center gap-2 min-w-0">

package/src/frame-stack.tsx

@@ -1,13 +1,25 @@
 /**
  * FrameStack — slate outer-frame wrapper for the shell/tray pattern.
  *
- * Single purpose: wrap 2+ inner cards as ONE visual group. Renders a
- * slate-tinted outer frame (--card-frame-bg, --border-card) holding
- * the children with 10 px outer padding and 10 px gap between them.
+ * Single purpose: wrap 2+ inner cards as ONE visual group. Renders an
+ * outer frame (--surface-frame via --card-frame-bg, --border-card)
+ * holding the children with a --tray-inset outer padding and a slightly
+ * larger gap between them.
+ *
+ * The padding is the SAME token <Card> uses for its own tray inset, so a
+ * framed group and a framed card have an identical edge. It was a
+ * hardcoded 10 px, which made the group frame visibly chunkier than every
+ * card beside it — the two patterns are the same idea and should not
+ * measure differently.
+ *
+ * Padding smaller than the gap is deliberate, not an oversight: it is
+ * what the corpus kits measure (AI Agent's shell is pad 4 / gap 10), and
+ * it reads as panes seated in a tight frame rather than cards floating in
+ * a loose one.
  *
  *   ┌─────────────────────────────────┐  ← <FrameStack>
- *   │ ┌─────────────────────────────┐ │     slate bg (--card-frame-bg)
- *   │ │ Card / SectionCard 01       │ │     10 px padding, 10 px gap
+ *   │ ┌─────────────────────────────┐ │     frame bg (--card-frame-bg)
+ *   │ │ Card / SectionCard 01       │ │     --tray-inset padding, 10 px gap
  *   │ └─────────────────────────────┘ │     1 px --border-card outline
  *   │ ┌─────────────────────────────┐ │     --radius-xl (20 px) outer
  *   │ │ Card / SectionCard 02       │ │
@@ -28,9 +40,8 @@
  * elements as direct page-background children with `gap-3`. That's
  * "free-floating cards," not the shell/tray pattern. Wrap them.
  *
- * Lens-level lock: `apps/workspace/src/lenses/meta-creative/CLAUDE.md`
- * §"The shell/tray pattern" — the Meta Creative Builder uses this
- * primitive for the 3-section form.
+ * Consumers: the Social Spec builder (BuilderForm, TacticBuilder) and the
+ * Brand Profile section groups.
  *
  * Token discipline: internal tokens (--card-frame-bg, --border-card)
  * are touched HERE per ADR-006 D2 — primitives live under
@@ -45,10 +56,16 @@ export interface FrameStackProps extends HTMLAttributes<HTMLDivElement> {
    *  prototype's spec. Override only with a token value
    *  (e.g. `'var(--space-3)'` for 12 px) — never a literal. */
   gap?: string
+  /** Outer padding. Defaults to `--tray-inset`, the same inset <Card>
+   *  uses, so a framed group and a framed card share one edge. */
+  padding?: string
 }
 
 export const FrameStack = forwardRef<HTMLDivElement, FrameStackProps>(
-  function FrameStack({ className, style, gap = '10px', children, ...rest }, ref) {
+  function FrameStack(
+    { className, style, gap = '10px', padding = 'var(--tray-inset)', children, ...rest },
+    ref,
+  ) {
     return (
       <div
         ref={ref}
@@ -58,7 +75,7 @@ export const FrameStack = forwardRef<HTMLDivElement, FrameStackProps>(
           background: 'rgb(var(--card-frame-bg))',
           border: '1px solid rgb(var(--border-card))',
           borderRadius: 'var(--radius-xl)',
-          padding: '10px',
+          padding,
           gap,
           ...style,
         }}

package/src/hero-form-card.tsx

@@ -343,8 +343,8 @@ const BANNER_TONE: Record<
     icon: 'rgb(var(--warning))',
   },
   destructive: {
-    bg: 'rgb(var(--surface-overlay-soft))',
-    border: 'rgb(var(--ring-error))',
+    bg: 'rgb(var(--destructive-bg))',
+    border: 'rgb(var(--destructive))',
     icon: 'rgb(var(--destructive))',
   },
 }

package/src/icons/brand.tsx

@@ -0,0 +1,187 @@
+/**
+ * Brand platform glyphs — real mono (currentColor) marks for the ad platforms
+ * the Social Spec builds for, replacing approximate Lucide stand-ins (Ghost for
+ * Snapchat, Home for Nextdoor, Music for TikTok, Megaphone for Meta). ADR-135.
+ *
+ * `@lovett/ui` is the one allowed home for bespoke SVG definitions (CLAUDE.md
+ * §2/§6) — same rationale as `MicrosoftLogo`. Path data is extracted from the
+ * owner's MIT-licensed fork github.com/edwinlov3tt/logos-apps (upstream: the
+ * ln-dev7 "logos" collection); each glyph is normalized to a single-colour
+ * `currentColor` silhouette so it adapts to its context (active pill = white,
+ * inactive tab = grey) — full-colour marks would clash inside the red pill.
+ * Extraction choices were picked by visual review; Facebook, Messenger and
+ * TikTok silhouettes are true path-boolean derivations of the official marks
+ * (disc⊖f, bubble⊖bolt, glitch-layer union — computed offline with paper.js,
+ * baked here as static path data).
+ *
+ * Marks are trademarks of their platforms — used nominatively to refer to the
+ * platforms themselves, exactly like the platform-chrome in the ad previews.
+ */
+
+export interface BrandIconProps {
+  /** Square box size in px; the glyph letterboxes inside (non-square viewBoxes
+   *  centre via preserveAspectRatio). Default 16 — a tab/affix glyph. */
+  size?: number
+  className?: string
+}
+
+/** Meta brand glyph (mono, currentColor). */
+export function BrandMeta({ size = 16, className }: BrandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="-5.12 -5.12 266.24 180.28"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M27.651 112.136c0 9.775 2.146 17.28 4.95 21.82c3.677 5.947 9.16 8.466 14.751 8.466c7.211 0 13.808-1.79 26.52-19.372c10.185-14.092 22.186-33.874 30.26-46.275l13.675-21.01c9.499-14.591 20.493-30.811 33.1-41.806C161.196 4.985 172.298 0 183.47 0c18.758 0 36.625 10.87 50.3 31.257C248.735 53.584 256 81.707 256 110.729c0 17.253-3.4 29.93-9.187 39.946c-5.591 9.686-16.488 19.363-34.818 19.363v-27.616c15.695 0 19.612-14.422 19.612-30.927c0-23.52-5.484-49.623-17.564-68.273c-8.574-13.23-19.684-21.313-31.907-21.313c-13.22 0-23.859 9.97-35.815 27.75c-6.356 9.445-12.882 20.956-20.208 33.944l-8.066 14.289c-16.203 28.728-20.307 35.271-28.408 46.07c-14.2 18.91-26.324 26.076-42.287 26.076c-18.935 0-30.91-8.2-38.325-20.556C2.973 139.413 0 126.202 0 111.148z" fill="currentColor" />
+      <path d="M21.802 33.206C34.48 13.666 52.774 0 73.757 0C85.91 0 97.99 3.597 110.605 13.897c13.798 11.261 28.505 29.805 46.853 60.368l6.58 10.967c15.881 26.459 24.917 40.07 30.205 46.49c6.802 8.243 11.565 10.7 17.752 10.7c15.695 0 19.612-14.422 19.612-30.927l24.393-.766c0 17.253-3.4 29.93-9.187 39.946c-5.591 9.686-16.488 19.363-34.818 19.363c-11.395 0-21.49-2.475-32.654-13.007c-8.582-8.083-18.615-22.443-26.334-35.352l-22.96-38.352C118.528 64.08 107.96 49.73 101.845 43.23c-6.578-6.988-15.036-15.428-28.532-15.428c-10.923 0-20.2 7.666-27.963 19.39z" fill="currentColor" />
+      <path d="M73.312 27.802c-10.923 0-20.2 7.666-27.963 19.39c-10.976 16.568-17.698 41.245-17.698 64.944c0 9.775 2.146 17.28 4.95 21.82L9.027 149.482C2.973 139.413 0 126.202 0 111.148C0 83.772 7.514 55.24 21.802 33.206C34.48 13.666 52.774 0 73.757 0z" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** Facebook brand glyph (mono, currentColor). */
+export function BrandFacebook({ size = 16, className }: BrandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="-5.12 -5.12 266.24 264.69"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** Instagram brand glyph (mono, currentColor). */
+export function BrandInstagram({ size = 16, className }: BrandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="-5.12 -5.12 266.24 266.24"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M128 23.064c34.177 0 38.225.13 51.722.745c12.48.57 19.258 2.655 23.769 4.408c5.974 2.322 10.238 5.096 14.717 9.575s7.253 8.743 9.575 14.717c1.753 4.511 3.838 11.289 4.408 23.768c.615 13.498.745 17.546.745 51.723s-.13 38.226-.745 51.723c-.57 12.48-2.655 19.257-4.408 23.768c-2.322 5.974-5.096 10.239-9.575 14.718s-8.743 7.253-14.717 9.574c-4.511 1.753-11.289 3.839-23.769 4.408c-13.495.616-17.543.746-51.722.746s-38.228-.13-51.723-.746c-12.48-.57-19.257-2.655-23.768-4.408c-5.974-2.321-10.239-5.095-14.718-9.574c-4.479-4.48-7.253-8.744-9.574-14.718c-1.753-4.51-3.839-11.288-4.408-23.768c-.616-13.497-.746-17.545-.746-51.723s.13-38.225.746-51.722c.57-12.48 2.655-19.258 4.408-23.769c2.321-5.974 5.095-10.238 9.574-14.717c4.48-4.48 8.744-7.253 14.718-9.575c4.51-1.753 11.288-3.838 23.768-4.408c13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95c-8.418 3.271-15.556 7.648-22.672 14.764S9.991 35.738 6.72 44.155C3.555 52.297 1.392 61.602.77 75.226C.147 88.878 0 93.237 0 128s.147 39.122.77 52.774c.622 13.625 2.785 22.93 5.95 31.071c3.27 8.417 7.647 15.556 14.763 22.672s14.254 11.492 22.672 14.763c8.142 3.165 17.446 5.328 31.07 5.95c13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95c8.418-3.27 15.556-7.647 22.672-14.763s11.493-14.254 14.764-22.672c3.164-8.142 5.328-17.446 5.95-31.07c.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07c-3.271-8.418-7.648-15.556-14.764-22.672S220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0m0 62.27c-36.302 0-65.73 29.43-65.73 65.73s29.428 65.73 65.73 65.73c36.301 0 65.73-29.428 65.73-65.73c0-36.301-29.429-65.73-65.73-65.73m0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667m83.686-110.994c0 8.484-6.876 15.36-15.36 15.36s-15.36-6.876-15.36-15.36s6.877-15.36 15.36-15.36s15.36 6.877 15.36 15.36" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** Messenger brand glyph (mono, currentColor). */
+export function BrandMessenger({ size = 16, className }: BrandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="-5.12 -5.12 266.24 266.24"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M128,0c-72.106,0 -128,52.818 -128,124.16c0,37.317 15.293,69.562 40.2,91.835c2.09,1.871 3.352,4.493 3.438,7.298l0.697,22.77c0.223,7.262 7.724,11.988 14.37,9.054l25.406,-11.217c2.15335,-0.94916 4.56829,-1.12613 6.837,-0.501c11.675,3.21 24.1,4.92 37.052,4.92c72.106,0 128,-52.818 128,-124.16c0,-71.342 -55.894,-124.159 -128,-124.159 M51.137,160.47l37.6,-59.653c5.98,-9.49 18.788,-11.853 27.762,-5.123l29.905,22.43c2.744,2.05808 6.52006,2.04706 9.252,-0.027l40.388,-30.652c5.39,-4.091 12.428,2.36 8.82,8.085l-37.6,59.654c-5.981,9.489 -18.79,11.852 -27.763,5.122l-29.906,-22.43c-2.74359,-2.05707 -6.51846,-2.04605 -9.25,0.027l-40.39,30.652c-5.39,4.09 -12.427,-2.36 -8.818,-8.085" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** LinkedIn brand glyph (mono, currentColor). */
+export function BrandLinkedIn({ size = 16, className }: BrandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="1.44 -0.56 29.12 29.12"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M8.268 28H2.463V9.306h5.805zM5.362 6.756C3.506 6.756 2 5.218 2 3.362a3.362 3.362 0 0 1 6.724 0c0 1.856-1.506 3.394-3.362 3.394M29.994 28h-5.792v-9.1c0-2.169-.044-4.95-3.018-4.95c-3.018 0-3.481 2.356-3.481 4.794V28h-5.799V9.306h5.567v2.55h.081c.775-1.469 2.668-3.019 5.492-3.019c5.875 0 6.955 3.869 6.955 8.894V28z" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** Nextdoor brand glyph (mono, currentColor). */
+export function BrandNextdoor({ size = 16, className }: BrandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="-1.28 5.29 66.56 53.4"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M0 25.993c.285-.085.56-.2.82-.343l9.538-5.894c.166-.125.325-.26.477-.4V6.708h10.168v6.524L32 6.574l32 19.6-5.265 8.622-5.475-3.338h-.172a.21.21 0 0 0 0 .114v25.58c-1.068.267-38.343.362-41.967.134V56.8q0-12.533 0-25.104l-.114-.23-5.76 3.32L3.1 31.373c-.916-1.488-1.908-2.976-2.766-4.464A1.91 1.91 0 0 0 0 26.508z" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** Pinterest brand glyph (mono, currentColor). */
+export function BrandPinterest({ size = 16, className }: BrandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="3.38 -0.22 25.25 32.44"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M16.75.406C10.337.406 4 4.681 4 11.6c0 4.4 2.475 6.9 3.975 6.9c.619 0 .975-1.725.975-2.212c0-.581-1.481-1.819-1.481-4.238c0-5.025 3.825-8.588 8.775-8.588c4.256 0 7.406 2.419 7.406 6.863c0 3.319-1.331 9.544-5.644 9.544c-1.556 0-2.888-1.125-2.888-2.737c0-2.363 1.65-4.65 1.65-7.088c0-4.137-5.869-3.387-5.869 1.613c0 1.05.131 2.212.6 3.169c-.863 3.713-2.625 9.244-2.625 13.069c0 1.181.169 2.344.281 3.525c.212.238.106.213.431.094c3.15-4.313 3.038-5.156 4.463-10.8c.769 1.463 2.756 2.25 4.331 2.25c6.637 0 9.619-6.469 9.619-12.3c0-6.206-5.363-10.256-11.25-10.256z" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** Snapchat brand glyph (mono, currentColor). */
+export function BrandSnapchat({ size = 16, className }: BrandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="208.68 112.18 391.9 368.85"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M407.001,473.488c-1.068,0-2.087-0.039-2.862-0.076c-0.615,0.053-1.25,0.076-1.886,0.076 c-22.437,0-37.439-10.607-50.678-19.973c-9.489-6.703-18.438-13.031-28.922-14.775c-5.149-0.854-10.271-1.287-15.22-1.287 c-8.917,0-15.964,1.383-21.109,2.389c-3.166,0.617-5.896,1.148-8.006,1.148c-2.21,0-4.895-0.49-6.014-4.311 c-0.887-3.014-1.523-5.934-2.137-8.746c-1.536-7.027-2.65-11.316-5.281-11.723c-28.141-4.342-44.768-10.738-48.08-18.484 c-0.347-0.814-0.541-1.633-0.584-2.443c-0.129-2.309,1.501-4.334,3.777-4.711c22.348-3.68,42.219-15.492,59.064-35.119 c13.049-15.195,19.457-29.713,20.145-31.316c0.03-0.072,0.065-0.148,0.101-0.217c3.247-6.588,3.893-12.281,1.926-16.916 c-3.626-8.551-15.635-12.361-23.58-14.882c-1.976-0.625-3.845-1.217-5.334-1.808c-7.043-2.782-18.626-8.66-17.083-16.773 c1.124-5.916,8.949-10.036,15.273-10.036c1.756,0,3.312,0.308,4.622,0.923c7.146,3.348,13.575,5.045,19.104,5.045 c6.876,0,10.197-2.618,11-3.362c-0.198-3.668-0.44-7.546-0.674-11.214c0-0.004-0.005-0.048-0.005-0.048 c-1.614-25.675-3.627-57.627,4.546-75.95c24.462-54.847,76.339-59.112,91.651-59.112c0.408,0,6.674-0.062,6.674-0.062 c0.283-0.005,0.59-0.009,0.908-0.009c15.354,0,67.339,4.27,91.816,59.15c8.173,18.335,6.158,50.314,4.539,76.016l-0.076,1.23 c-0.222,3.49-0.427,6.793-0.6,9.995c0.756,0.696,3.795,3.096,9.978,3.339c5.271-0.202,11.328-1.891,17.998-5.014 c2.062-0.968,4.345-1.169,5.895-1.169c2.343,0,4.727,0.456,6.714,1.285l0.106,0.041c5.66,2.009,9.367,6.024,9.447,10.242 c0.071,3.932-2.851,9.809-17.223,15.485c-1.472,0.583-3.35,1.179-5.334,1.808c-7.952,2.524-19.951,6.332-23.577,14.878 c-1.97,4.635-1.322,10.326,1.926,16.912c0.036,0.072,0.067,0.145,0.102,0.221c1,2.344,25.205,57.535,79.209,66.432 c2.275,0.379,3.908,2.406,3.778,4.711c-0.048,0.828-0.248,1.656-0.598,2.465c-3.289,7.703-19.915,14.09-48.064,18.438 c-2.642,0.408-3.755,4.678-5.277,11.668c-0.63,2.887-1.271,5.717-2.146,8.691c-0.819,2.797-2.641,4.164-5.567,4.164h-0.441 c-1.905,0-4.604-0.346-8.008-1.012c-5.95-1.158-12.623-2.236-21.109-2.236c-4.948,0-10.069,0.434-15.224,1.287 c-10.473,1.744-19.421,8.062-28.893,14.758C444.443,462.88,429.436,473.488,407.001,473.488" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** TikTok brand glyph (mono, currentColor). */
+export function BrandTikTok({ size = 16, className }: BrandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="-5.79 -5.79 267.56 300.84"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M189.722,104.42243l0,96.99357c0,48.525 -39.357,87.857 -87.905,87.857c-24.62405,0 -46.88248,-10.1174 -62.84421,-26.42813c-0.00093,-0.00062 -0.00186,-0.00125 -0.00279,-0.00187c-0.00254,-0.00259 -0.00508,-0.00519 -0.00761,-0.00778c-23.49917,-15.76977 -38.96239,-42.57494 -38.96239,-72.99022c0,-48.518 39.355,-87.852 87.905,-87.852c4.03423,-0.001 8.06385,0.2723 12.061,0.818l0,10.76898c4.64967,-0.09894 9.30133,0.17007 13.911,0.80102v48.593c-3.94487,-1.25017 -8.05877,-1.88528 -12.197,-1.883c-22.209,0 -40.21,17.994 -40.21,40.186c-0.00942,6.11418 1.38223,12.11209 4.025,17.54894l-17.941,-29.11894c0,-6.79366 1.68644,-13.19354 4.66379,-18.8042c-2.97797,5.61107 -4.66479,12.01139 -4.66479,18.8052c0,15.692 8.998,29.28 22.118,35.898c0.00103,0.00136 0.00207,0.00271 0.0031,0.00407c5.60932,2.82644 11.80469,4.29426 18.0859,4.28493c22.162,0 40.132,-17.92 40.208,-40.05v-189.845h47.834v6.113c0.1689,1.82808 0.41177,3.64857 0.728,5.457l-34.643,0.001v189.844c-0.078,22.132 -18.05,40.05 -40.21,40.05c-5.67604,0 -11.07698,-1.17525 -15.97293,-3.29552c4.89621,2.12093 10.2975,3.29652 15.97393,3.29652c22.161,0 40.131,-17.92 40.21,-40.052v-189.843l47.832,0v6.113c1.356,14.892 7.624,28.362 17.17,38.785h-0.001c10.55395,6.58342 22.74707,10.06504 35.186,10.047v10.116c4.57579,0.96983 9.24056,1.45782 13.918,1.456v47.53c-24.71212,0 -47.59337,-7.85144 -66.271,-21.19557zM99.964,151.40168c0.00033,0.00011 0.00067,0.00021 0.001,0.00032l0,-37.82098c-0.00033,0.00001 -0.00067,0.00001 -0.001,0.00002zM242.075,114.045v-0.001c-24.712,0 -47.589,-7.851 -66.272,-21.195v0.001c18.682,13.344 41.561,21.195 66.272,21.195zM69.673,225.607c-1.62409,-2.12792 -3.02095,-4.40072 -4.178,-6.78106zM228.74787,72.27412c3.67381,1.65002 7.52454,2.97698 11.51604,3.94463c-3.9686,-0.96405 -7.82207,-2.2874 -11.51604,-3.94463z" fill="currentColor" />
+    </svg>
+  )
+}
+
+/** Keyed map for registry-style resolution (e.g. the Social Spec tactic icons). */
+export const BRAND_ICONS = {
+  meta: BrandMeta,
+  facebook: BrandFacebook,
+  instagram: BrandInstagram,
+  messenger: BrandMessenger,
+  linkedin: BrandLinkedIn,
+  nextdoor: BrandNextdoor,
+  pinterest: BrandPinterest,
+  snapchat: BrandSnapchat,
+  tiktok: BrandTikTok,
+} as const
+
+export type BrandIconKey = keyof typeof BRAND_ICONS