@flamingo-stack/openframe-frontend-core 0.0.204 → 0.0.205

package/src/components/chat/utils/clickup-task-type-utils.ts

@@ -0,0 +1,59 @@
+/**
+ * ClickUp custom_item_id → human-readable label resolver.
+ *
+ * Lib-side subset of the hub's `lib/utils/clickup-task-type-utils.ts`.
+ * The hub file also exports delivery / workspace slug helpers used by
+ * the sync engine; only the chat-surfaced label resolver migrates here
+ * because chat-inline cards and activity feeds need it.
+ *
+ * Reference: ClickUp's standard task types (custom_item_id values):
+ *   null/1000=Task, 1001=Milestone, 1002=Recurring, 1003=Subtask,
+ *   1004=Form, 1006=Plan, 1007=Strategy, 1008=Bug, 1009=Request,
+ *   1010=Feature, 1011=Story, 1012=Epic, 1013=Component, 1014=Initiative.
+ */
+
+export const CUSTOM_ITEM_ID = {
+  TASK: 1000,
+  MILESTONE: 1001,
+  RECURRING: 1002,
+  SUBTASK: 1003,
+  FORM: 1004,
+  PLAN: 1006,
+  STRATEGY: 1007,
+  BUG: 1008,
+  REQUEST: 1009,
+  FEATURE: 1010,
+  STORY: 1011,
+  EPIC: 1012,
+  COMPONENT: 1013,
+  INITIATIVE: 1014,
+} as const
+
+/**
+ * Display name for a ClickUp task type — used in chat-inline cards and
+ * activity feeds where the type badge would otherwise show a numeric ID.
+ *
+ * Returning `null` for unknown IDs lets callers fall back to a generic
+ * "Task" affordance rather than printing `task-1100` or similar.
+ */
+export function getTaskTypeLabel(
+  customItemId: number | null | undefined,
+): string | null {
+  switch (customItemId) {
+    case CUSTOM_ITEM_ID.TASK:       return 'Task'
+    case CUSTOM_ITEM_ID.MILESTONE:  return 'Milestone'
+    case CUSTOM_ITEM_ID.RECURRING:  return 'Recurring'
+    case CUSTOM_ITEM_ID.SUBTASK:    return 'Subtask'
+    case CUSTOM_ITEM_ID.FORM:       return 'Form'
+    case CUSTOM_ITEM_ID.PLAN:       return 'Plan'
+    case CUSTOM_ITEM_ID.STRATEGY:   return 'Strategy'
+    case CUSTOM_ITEM_ID.BUG:        return 'Bug'
+    case CUSTOM_ITEM_ID.REQUEST:    return 'Request'
+    case CUSTOM_ITEM_ID.FEATURE:    return 'Feature'
+    case CUSTOM_ITEM_ID.STORY:      return 'Story'
+    case CUSTOM_ITEM_ID.EPIC:       return 'Epic'
+    case CUSTOM_ITEM_ID.COMPONENT:  return 'Component'
+    case CUSTOM_ITEM_ID.INITIATIVE: return 'Initiative'
+    default:                         return null
+  }
+}

package/src/components/chat/utils/compact-card-classes.ts

@@ -0,0 +1,97 @@
+/**
+ * Compact-card class constants — single source of truth for the chat-inline
+ * `size='sm'` card frame.
+ *
+ * Lifted from the hub's `components/shared/compact-card/compact-card-classes.ts`
+ * so the pure-presentation cards in `entity-cards/` can stop importing from
+ * the hub tree. Every compact card across the chat shell shares the SAME
+ * outer frame, skeleton frame, image slot, icon slot, text column, and
+ * per-line typography.
+ *
+ * Card-specific variation (Play overlay on podcasts, #N pill on investor
+ * updates, status badge on roadmap) lives INSIDE the card next to its
+ * other type-specific JSX; the frame stays uniform across types.
+ */
+
+/** Loaded compact card outer frame for INTERACTIVE state — anchor wrap
+ *  with hover/transition affordance. Use ONLY when the card resolves
+ *  to a real, safe href; the user expects a clickable feel. */
+export const COMPACT_CARD_OUTER =
+  'my-1.5 flex items-start gap-3 w-full p-2 rounded-lg border border-ods-border bg-ods-card no-underline transition-colors hover:border-ods-text-secondary/40'
+
+/** Loaded compact card outer frame for NON-INTERACTIVE state — span wrap
+ *  used when `safeHref()` rejects the chat ref's url. */
+export const COMPACT_CARD_OUTER_STATIC =
+  'my-1.5 flex items-start gap-3 w-full p-2 rounded-lg border border-ods-border bg-ods-card no-underline cursor-default'
+
+/** Skeleton outer frame — same dimensions as loaded, plus `animate-pulse`. */
+export const COMPACT_CARD_SKELETON_OUTER =
+  'my-1.5 flex w-full animate-pulse items-start gap-3 rounded-lg border border-ods-border bg-ods-card p-2'
+
+/** 56×56 image slot — for cards with a cover image. */
+export const COMPACT_CARD_IMAGE_SLOT =
+  'relative block shrink-0 self-start w-14 h-14 aspect-square overflow-hidden rounded-md bg-ods-bg'
+
+/** 56×56 placeholder slot for skeletons. */
+export const COMPACT_CARD_SKELETON_IMAGE_SLOT =
+  'block h-14 w-14 aspect-square shrink-0 self-start rounded-md bg-ods-bg'
+
+/** 56×56 icon slot — for cards without a cover image. */
+export const COMPACT_CARD_ICON_SLOT =
+  'flex h-14 w-14 aspect-square shrink-0 self-start items-center justify-center rounded-md bg-ods-bg text-ods-accent'
+
+/** Text column wrapper — explicit 56px height with `flex flex-col`. */
+export const COMPACT_CARD_TEXT_COL =
+  'flex min-w-0 flex-1 flex-col gap-0.5 min-h-14'
+
+/** Title row container — fixed 20px (h-5) to match `text-sm leading-5`. */
+export const COMPACT_CARD_TITLE_ROW = 'flex items-center min-w-0 h-5'
+
+/** Subtitle / summary row container — fixed 16px (h-4). */
+export const COMPACT_CARD_META_ROW_BOX = 'flex items-center min-w-0 h-4'
+
+/** Title text — bold 14px on a 20px line. */
+export const COMPACT_CARD_TITLE =
+  'truncate text-sm font-semibold leading-5 text-ods-text-primary'
+
+/** Subtitle text — 11px on a 16px line. */
+export const COMPACT_CARD_SUBTITLE =
+  'truncate text-[11px] leading-4 text-ods-text-secondary'
+
+/** Summary text — same metrics as subtitle, dropped to 80% opacity. */
+export const COMPACT_CARD_SUMMARY =
+  'truncate text-[11px] leading-4 text-ods-text-secondary/80'
+
+/** Meta-row variant — multi-part 11px metadata. */
+export const COMPACT_CARD_META_ROW =
+  'flex items-center gap-1.5 min-w-0 text-[11px] leading-4 text-ods-text-secondary'
+
+/** Non-breaking space — used as a fallback child so the row's height stays 16px. */
+export const COMPACT_CARD_ROW_FILLER = ' '
+
+/** Schemes allowed in the outer `<a href>` of a compact card. */
+const SAFE_URL_SCHEMES = ['http:', 'https:', 'mailto:']
+
+/** Return the input url ONLY if it's safe to drop into an `<a href>`:
+ *  the scheme must be http / https / mailto, or the URL must be a
+ *  same-origin path (`/blog/foo`). Otherwise returns `null`. */
+export function safeHref(url: string | null | undefined): string | null {
+  if (!url) return null
+  // Defense in depth: control chars + zero-width / line-separator chars.
+  if (/[\u0000-\u001f\u007f\u200b-\u200d\u2028\u2029\ufeff]/.test(url)) return null
+  const trimmed = url.trim()
+  if (!trimmed) return null
+  // Pure same-origin path.
+  if (trimmed.startsWith('/') && !trimmed.startsWith('//')) return trimmed
+  if (trimmed.startsWith('#')) return trimmed
+  // Reject bare scheme-only inputs.
+  if (/^[a-z][a-z0-9+.-]*:$/i.test(trimmed)) return null
+  try {
+    const parsed = new URL(trimmed, 'https://_safehref_base.invalid')
+    if (!SAFE_URL_SCHEMES.includes(parsed.protocol)) return null
+    if ((parsed.protocol === 'https:' || parsed.protocol === 'http:') && !parsed.hostname) return null
+    return trimmed
+  } catch {
+    return null
+  }
+}

package/src/components/chat/utils/decide-new-tab.ts

@@ -0,0 +1,57 @@
+/**
+ * Pure new-tab decision helper.
+ *
+ * Same logic as the hub's prior inline `decideNewTab`, but parameterized:
+ *   - `currentSource` is passed by caller (was `currentPlatform()` reads
+ *     inside the body). Hub callers pass `currentPlatform()`; lib chip
+ *     code passes `runtime.source ?? ''`.
+ *
+ * BRANCH PRIORITY:
+ *   1. `runtimeMode === 'embed'` → always new-tab (embed-mode short-circuit)
+ *   2. `openIn === 'new-tab'` or `'same-tab'` — explicit caller override
+ *   3. `alwaysNewTab === true` (legacy synonym for `openIn: 'new-tab'`)
+ *   4. `targetPlatform` defined AND `currentSource` non-empty →
+ *      platform comparison (cross-app → new tab, same-app → same tab)
+ *   5. Legacy fallback: `isCrossOriginUrl(href)` — origin compare. Works
+ *      in prod (distinct hosts) but degrades to "always same-tab" in dev.
+ *
+ * No call site implements its own variant of the rule.
+ */
+
+import { isCrossOriginUrl } from './is-cross-origin-url'
+
+export type NavSurface = 'useNavLink' | 'useUnifiedNav'
+export type RuntimeMode = 'host' | 'embed'
+
+export interface DecideNewTabInput {
+  href: string | null | undefined
+  targetPlatform?: string | null
+  openIn?: 'new-tab' | 'same-tab'
+  alwaysNewTab?: boolean
+  /** Caller tag — labels the decision in any external trace logging. */
+  surface?: NavSurface
+  /** Optional chat-runtime mode. When omitted OR set to `'host'`,
+   *  behavior is byte-equivalent to the legacy logic. Only `'embed'`
+   *  triggers the new priority-1 branch that forces new-tab. */
+  runtimeMode?: RuntimeMode
+  /** Current chat source / platform identifier — caller-threaded.
+   *  Empty string disables the platform-comparison branch (falls
+   *  through to the origin-compare fallback). */
+  currentSource: string
+}
+
+export function decideNewTab(input: DecideNewTabInput): boolean {
+  const { href, targetPlatform, openIn, alwaysNewTab, runtimeMode, currentSource } = input
+
+  // Priority #1: embed-mode trumps every other branch.
+  if (runtimeMode === 'embed') return true
+  if (openIn === 'new-tab') return true
+  if (alwaysNewTab === true) return true
+  if (openIn === 'same-tab') return false
+  // `currentSource` falsy guard: if empty, fall through to origin check.
+  if (targetPlatform !== undefined && targetPlatform !== null && currentSource) {
+    return targetPlatform !== currentSource
+  }
+  if (!href) return false
+  return isCrossOriginUrl(href)
+}

package/src/components/chat/utils/external-app-urls.ts

@@ -0,0 +1,19 @@
+/**
+ * Unified URL builders for the third-party app deep-links used by chat
+ * surfaces (chip clicks, inline-card tracking rows).
+ *
+ * Lib-side subset of the hub's `lib/utils/external-app-urls.ts`. Today
+ * it carries the ClickUp deep-link helper only — HubSpot and admin
+ * routes stay hub-side because they're consumed exclusively by
+ * hub-internal mappers.
+ */
+
+const CLICKUP_APP_BASE = 'https://app.clickup.com'
+
+/** ClickUp task detail page in the ClickUp UI. Returns `null` when the
+ *  external id is missing so consumers don't end up with a
+ *  `.../t/undefined` link. */
+export function clickupTaskUrl(externalId: string | null | undefined): string | null {
+  if (!externalId) return null
+  return `${CLICKUP_APP_BASE}/t/${externalId}`
+}

package/src/components/chat/utils/flatten-assistant-content.ts

@@ -0,0 +1,35 @@
+/**
+ * `flattenAssistantContent` — coerce a chat message's `content` field
+ * (string OR `MessageSegment[]`) into a plain string for wire transport.
+ *
+ * Background: useChat populates assistant messages with a structured
+ * segment array as the streamed SSE arrives (text segments, approval
+ * cards, tool_execution blocks, thinking blocks). The local React
+ * state holds `content: MessageSegment[]` for those turns. When the
+ * client serializes the conversation back to the server for the NEXT
+ * turn, a naive `typeof content === 'string' ? content : ''` strip-
+ * to-empty silently drops every post-approve receipt, every Sonnet-
+ * streamed answer, and every diagnostic Q — Anthropic receives
+ * `assistant: ""` for those turns and has no context to follow.
+ *
+ * The function:
+ *   1. Returns plain strings as-is.
+ *   2. For arrays, joins every `text`-typed segment's `text` field
+ *      with `\n\n` separators. Non-text segments (approval_request,
+ *      tool_execution, thinking) have no LLM-visible textual content
+ *      and are intentionally skipped — they shouldn't bloat the
+ *      request body.
+ *   3. Returns `''` for anything else (null, undefined, unknown shape).
+ */
+export function flattenAssistantContent(raw: unknown): string {
+  if (typeof raw === 'string') return raw
+  if (!Array.isArray(raw)) return ''
+  const parts: string[] = []
+  for (const seg of raw) {
+    if (seg && typeof seg === 'object' && (seg as { type?: string }).type === 'text') {
+      const t = (seg as { text?: unknown }).text
+      if (typeof t === 'string' && t.length > 0) parts.push(t)
+    }
+  }
+  return parts.join('\n\n')
+}

package/src/components/chat/utils/icon-registry.ts

@@ -0,0 +1,297 @@
+/**
+ * Icon registry — string `icon_name` → React component.
+ *
+ * SINGLE SOURCE OF TRUTH (no, really this time) for every icon-name →
+ * React-component lookup across the lib + the hub. Two DB columns feed
+ * in with DIFFERENT conventions:
+ *
+ *   - `chat_admin_slash_commands.icon_name` — kebab-case (`'rocket'`,
+ *     `'hubspot'`, `'github'`, `'dollar-sign'`).
+ *   - `social_platforms.icon_name` — PascalCase component names
+ *     (`'LinkedInIcon'`, `'XLogo'`, `'YouTubeIcon'`, `'Github'`).
+ *
+ * The registry stores entries under kebab-case keys (URL/DB-friendly,
+ * shell-safe, matches `lucide-react`'s own file-naming convention).
+ * The PascalCase variants come in via `normalizeIconKey()`, which maps
+ * known PascalCase aliases → kebab-case before the lookup runs.
+ *
+ * Adding a new icon: import the component below, add a `'name': Component`
+ * entry in `ICON_REGISTRY`, and (if the same icon also flows in from a DB
+ * column that uses PascalCase) add a `PascalName → 'name'` row to
+ * `PASCAL_TO_KEBAB_ALIASES`.
+ *
+ * Fallback: an unknown / null icon_name resolves to `FileText` so a chip
+ * never renders without an icon.
+ */
+
+import { createElement, type ComponentType, type ReactNode } from 'react'
+import {
+  Activity,
+  Banknote,
+  Bell,
+  BookOpen,
+  Box,
+  Briefcase,
+  Calendar,
+  CheckSquare,
+  DollarSign,
+  Facebook,
+  FileText,
+  Github,
+  Globe,
+  GraduationCap,
+  Headphones,
+  Info,
+  Instagram,
+  Mail,
+  Megaphone,
+  MessageCircle,
+  MessageSquare,
+  Newspaper,
+  Package,
+  PenSquare,
+  Rocket,
+  Search,
+  Send,
+  Shield,
+  Star,
+  TableProperties,
+  TrendingUp,
+  Twitter,
+  Users,
+  Video,
+  Youtube,
+} from 'lucide-react'
+// Brand icons — lib-local exports.
+import {
+  SlackIcon,
+  GitHubIcon,
+  ClickUpIcon,
+  HubspotIcon,
+  LinkedInIcon,
+  FacebookIcon,
+  InstagramIcon,
+  YouTubeIcon,
+  XLogo,
+  OpenFrameLogo as RawOpenFrameLogo,
+} from '../../icons'
+
+// Wrapper so the OpenFrame logo's outer frame inherits the parent's text
+// color instead of its hardcoded default — that default is invisible on
+// dark chat surfaces. The white squares stay white (visible on dark).
+// With this, the parent's `text-ods-text-primary` propagates via
+// `currentColor` and the frame renders in the same primary text color
+// as the lucide icons next to it. Uses `createElement` (not JSX) so this
+// stays a `.ts` file. Accepts `color` for shape-compat with the registry's
+// IconComponent type, but ignores it — the logo's outer frame is wired
+// to `currentColor` via the upperPathColor pass-through.
+const OpenFrameLogoIcon: ComponentType<{ className?: string; color?: string }> = ({ className }) =>
+  createElement(RawOpenFrameLogo, { className, upperPathColor: 'currentColor' })
+
+/**
+ * Loose icon-component shape: every entry accepts `className`; `color` is
+ * optional (lucide + most brand icons accept it; OpenFrameLogo doesn't,
+ * but `color` is optional so passing `undefined` is a no-op). Loose enough
+ * to accept both lucide's `LucideIcon` and our brand SVG components.
+ */
+type IconComponent = ComponentType<{ className?: string; color?: string }>
+
+/**
+ * The kebab-case registry. ALL lookups go through here; PascalCase
+ * aliases route through `normalizeIconKey()` first.
+ */
+export const ICON_REGISTRY: Record<string, IconComponent> = {
+  // lucide-react (kebab-case)
+  activity:          Activity,
+  banknote:          Banknote,
+  bell:              Bell,
+  'book-open':       BookOpen,
+  box:               Box,
+  briefcase:         Briefcase,
+  calendar:          Calendar,
+  'check-square':    CheckSquare,
+  'dollar-sign':     DollarSign,
+  // For brand-vs-lucide variants the kebab key is the BRAND (most-common
+  // social-platform intent); `'<name>-lucide'` carries the lucide outline.
+  facebook:          FacebookIcon,
+  'facebook-lucide': Facebook,
+  'file-text':       FileText,
+  // `'github-lucide'` is the lucide outline glyph (used by
+  // `social_platforms.icon_name='Github'`); `'github'` is the brand icon
+  // (used by `chat_admin_slash_commands.icon_name='github'`). The PascalCase
+  // alias `'Github' → 'github-lucide'` routes the lucide glyph for
+  // social-platform DB rows; `'GitHubIcon' → 'github'` keeps brand routing
+  // consistent for callers that store the PascalCase component name.
+  github:            GitHubIcon,
+  'github-lucide':   Github,
+  globe:             Globe,
+  'graduation-cap':  GraduationCap,
+  headphones:        Headphones,
+  info:              Info,
+  instagram:         InstagramIcon,
+  'instagram-lucide': Instagram,
+  mail:              Mail,
+  megaphone:         Megaphone,
+  'message-circle':  MessageCircle,
+  'message-square':  MessageSquare,
+  newspaper:         Newspaper,
+  package:           Package,
+  'pen-square':      PenSquare,
+  rocket:            Rocket,
+  search:            Search,
+  send:              Send,
+  shield:            Shield,
+  star:              Star,
+  table:             TableProperties,
+  'trending-up':     TrendingUp,
+  twitter:           Twitter,
+  users:             Users,
+  video:             Video,
+  youtube:           YouTubeIcon,
+  'youtube-lucide':  Youtube,
+  // brand-only icons (no lucide variant in current use)
+  slack:             SlackIcon,
+  clickup:           ClickUpIcon,
+  hubspot:           HubspotIcon,
+  linkedin:          LinkedInIcon,
+  x:                 XLogo,
+  openframe:         OpenFrameLogoIcon,
+}
+
+/**
+ * PascalCase → kebab-case alias table for DB columns that store icon
+ * names as component identifiers (currently `social_platforms.icon_name`).
+ * Keep these in sync with the actual rows in those tables.
+ */
+const PASCAL_TO_KEBAB_ALIASES: Record<string, string> = {
+  // Lucide PascalCase names → kebab equivalents
+  Activity:        'activity',
+  Banknote:        'banknote',
+  Bell:            'bell',
+  BookOpen:        'book-open',
+  Box:             'box',
+  Briefcase:       'briefcase',
+  Calendar:        'calendar',
+  CheckSquare:     'check-square',
+  DollarSign:      'dollar-sign',
+  // Lucide PascalCase → the `-lucide` kebab variant (kebab default is the
+  // brand icon for the social-platform names below).
+  Facebook:        'facebook-lucide',
+  FileText:        'file-text',
+  Github:          'github-lucide',
+  Globe:           'globe',
+  GraduationCap:   'graduation-cap',
+  Headphones:      'headphones',
+  Info:            'info',
+  Instagram:       'instagram-lucide',
+  Mail:            'mail',
+  Megaphone:       'megaphone',
+  MessageCircle:   'message-circle',
+  MessageSquare:   'message-square',
+  Newspaper:       'newspaper',
+  Package:         'package',
+  PenSquare:       'pen-square',
+  Rocket:          'rocket',
+  Search:          'search',
+  Send:            'send',
+  Shield:          'shield',
+  Star:            'star',
+  TableProperties: 'table',
+  TrendingUp:      'trending-up',
+  Twitter:         'twitter',
+  Users:           'users',
+  Video:           'video',
+  Youtube:         'youtube-lucide',
+  // Brand-icon PascalCase exports → kebab (kebab default is the brand)
+  SlackIcon:        'slack',
+  GitHubIcon:       'github',
+  ClickUpIcon:      'clickup',
+  HubspotIcon:      'hubspot',
+  LinkedInIcon:     'linkedin',
+  FacebookIcon:     'facebook',
+  InstagramIcon:    'instagram',
+  YouTubeIcon:      'youtube',
+  XLogo:            'x',
+  OpenFrameLogo:    'openframe',
+}
+
+/**
+ * Normalize an icon key to the registry's canonical kebab-case form.
+ * Accepts PascalCase variants (from `social_platforms.icon_name`-style
+ * columns) and passes kebab-case keys through unchanged.
+ */
+export function normalizeIconKey(key: string): string {
+  return PASCAL_TO_KEBAB_ALIASES[key] ?? key
+}
+
+/**
+ * Resolve an `icon_name` to its React component. Accepts both PascalCase
+ * and kebab-case keys (normalizes PascalCase first). Unknown / null /
+ * undefined names fall back to `FileText` — chips always render with
+ * SOMETHING rather than a missing glyph. The fallback is intentional:
+ * a typo in a new admin-authored row shouldn't crash render.
+ */
+export function getIconComponent(
+  iconName: string | null | undefined,
+): ComponentType<{ className?: string; color?: string }> {
+  if (!iconName) return FileText
+  return ICON_REGISTRY[normalizeIconKey(iconName)] ?? FileText
+}
+
+// ---------------------------------------------------------------------------
+// Sized-icon rendering helper (migrated from `src/utils/dynamic-icons.tsx`)
+// ---------------------------------------------------------------------------
+
+export type DynamicIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+const SIZE_CLASSES: Record<DynamicIconSize, string> = {
+  xs: 'w-3 h-3',    // 12px
+  sm: 'w-4 h-4',    // 16px
+  md: 'w-6 h-6',    // 24px
+  lg: 'w-8 h-8',    // 32px
+  xl: 'w-12 h-12',  // 48px
+}
+
+/**
+ * Optional per-icon color overrides. Keys are kebab-case (canonical
+ * registry form) — pass any incoming key through `normalizeIconKey()`
+ * before lookup.
+ */
+const ICON_COLORS: Record<string, { color?: string; fill?: string }> = {
+  linkedin: { color: '#0A66C2' },
+  facebook: { color: '#1877F2' },
+  youtube: { color: '#FF0000' },
+}
+
+/**
+ * Render an icon by name with a size preset + optional className.
+ * Replaces the old `src/utils/dynamic-icons.tsx#getDynamicIcon`. Accepts
+ * both PascalCase and kebab-case keys (via `normalizeIconKey()`).
+ */
+export function getDynamicIcon(
+  iconName: string | undefined | null,
+  size: DynamicIconSize = 'md',
+  className?: string,
+): ReactNode {
+  if (!iconName) {
+    console.warn('[getDynamicIcon] No iconName provided, using Globe fallback')
+    return createElement(Globe, { className: SIZE_CLASSES[size] })
+  }
+
+  const sizeClass = SIZE_CLASSES[size]
+  const finalClassName = className ? `${sizeClass} ${className}` : sizeClass
+
+  const canonicalKey = normalizeIconKey(iconName)
+  const IconComponent = ICON_REGISTRY[canonicalKey]
+
+  if (IconComponent) {
+    const colorConfig = ICON_COLORS[canonicalKey] || {}
+    return createElement(IconComponent, { className: finalClassName, ...colorConfig })
+  }
+
+  console.error(
+    `[getDynamicIcon] Icon NOT found in registry: "${iconName}" (normalized to "${canonicalKey}"). Available icons:`,
+    Object.keys(ICON_REGISTRY),
+  )
+  return createElement(Globe, { className: finalClassName })
+}