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

package/src/components/chat/utils/source-row-cta.ts

@@ -0,0 +1,215 @@
+/**
+ * Single source of truth for "what does clicking THIS row do?" across
+ * the chat-adjacent surfaces (source chips, inline cards, search results).
+ *
+ * Lib-side refactor of the hub's `lib/utils/source-row-cta.ts`. Drops:
+ *   - `currentPlatform()`        — host injects via `ctx.currentPlatform`
+ *   - `traceCompose()` logging   — lib stays log-free; hosts can wrap
+ *   - `tableIdForDocumentType`   — host injects via `ctx.tableIdForDocumentType`
+ *
+ * The contract:
+ *   - `icon` + `iconLabel` — for visual + a11y. Sourced from
+ *     `SOURCE_ICON_NAMES` keyed by the row's `sourceRepo` (config id),
+ *     resolved to a React component via `ICON_REGISTRY`.
+ *   - `href` — destination URL. `null` means "no public viewer; Ask is
+ *     the only action". Honors the inline card / chip / search bar's
+ *     existing fallback chain (externalUrl → in-app path → null) and
+ *     also runs `safeHref()` on the final value so a hostile RAG row
+ *     can't land `javascript:` / `data:` in the DOM.
+ *   - `askable` — whether the Ask drill-in flow can fire. Requires a
+ *     non-empty `id` AND a `documentType`.
+ *   - `chatRef` — pre-synthesized `ChatRef` for the Ask handler.
+ */
+
+import React from 'react'
+import { FileText } from 'lucide-react'
+import { getSourceIconName } from './source-icons'
+import { getIconComponent } from './icon-registry'
+import { getBaseUrl } from '../../../utils/cn'
+import { safeHref } from './compact-card-classes'
+import type { ChatRef } from '../chat-ref.types'
+
+/** Path sanitization — keep alphanumerics, slash, dash, dot, underscore;
+ *  strip everything else. Defends against a hostile mapper returning a
+ *  path with `..` traversal or query-string injection. */
+function sanitizePath(path: string): string {
+  return (path || '').replace(/[^a-zA-Z0-9/_\-.]/g, '')
+}
+
+export interface SourceRowInput {
+  /** RagTableConfig.id (e.g. 'blog-posts', 'financial-cap-table'). Drives
+   *  icon resolution via `SOURCE_ICON_NAMES` + `ICON_REGISTRY`. */
+  sourceRepo?: string | null
+  /** The config's `documentType` (e.g. 'blog_post', 'cap_table'). Drives
+   *  the Ask drill-in's `ChatRef.type`. */
+  documentType?: string | null
+  /** Primary-key value of the row (config.primaryKey). Required for Ask. */
+  id?: string | null
+  /** Display title. */
+  title: string
+  /** Resolved public URL when the row HAS a viewer. `null`/undefined when
+   *  the row has no public destination — surface decides Ask-only behavior. */
+  externalUrl?: string | null
+  /** Platform that owns `externalUrl`. */
+  targetPlatform?: string | null
+  /** In-app navigator path (e.g. `legal/fundraising/.../safe`). */
+  path?: string | null
+}
+
+export interface SourceRowContext {
+  /** Chat shell's base route — `/data-room`, `/knowledge-base`, etc. */
+  baseRoute?: string
+  /** Cross-platform target for the chip / card click. */
+  chipBasePlatform?: string
+  /**
+   * Host-supplied current-platform identifier. Used as the
+   * `targetPlatform` for path-based fallback URLs that point to the
+   * host's own surface. When omitted, path-based fallback rows get a
+   * `null` targetPlatform — consumers fall back to their legacy
+   * origin-check.
+   */
+  currentPlatform?: string | null
+  /**
+   * Host-supplied reverse map: documentType → tableId. Used to derive
+   * `sourceRepo` from `documentType` when the caller didn't supply it
+   * (inline cards know `ref.type` but not `sourceRepo`). When omitted,
+   * the resolver falls back to the documentType reverse-map miss and
+   * keeps the FileText icon.
+   */
+  tableIdForDocumentType?: (documentType: string) => string | null
+}
+
+export interface SourceRowCTA {
+  /** Source icon component. Always defined — falls back to `FileText`. */
+  icon: React.ComponentType<{ className?: string }>
+  /** Human-readable label for the icon. */
+  iconLabel: string
+  /** Resolved destination URL. `null` when the row has no openable
+   *  target. Already passed through `safeHref()`. */
+  href: string | null
+  /** Platform that owns the destination. `null` when the row has no
+   *  openable target OR the destination is external/unknown. */
+  targetPlatform: string | null
+  /** When true, the surface can fire the Ask drill-in flow for this row. */
+  askable: boolean
+  /** Pre-synthesized `ChatRef` for the Ask handler. `null` when not askable. */
+  chatRef: ChatRef | null
+}
+
+/**
+ * Pure icon-resolution helper — `sourceRepo` (RagTableConfig.id) →
+ * icon_name via `SOURCE_ICON_NAMES`, then icon_name → React component
+ * via `ICON_REGISTRY`.
+ */
+function pickSourceIcon(sourceRepo: string | null, documentType: string | null | undefined) {
+  const iconName = sourceRepo ? getSourceIconName(sourceRepo) : undefined
+  const icon = iconName ? getIconComponent(iconName) : FileText
+  const iconLabel = documentType ?? 'Source'
+  return { icon, iconLabel }
+}
+
+/**
+ * Only certain row kinds should fall back to in-app `path` navigation
+ * when no `externalUrl` is set. Specifically: doc-tables (markdown,
+ * data-room PDFs) that the in-app doc viewer can render. Entity-table
+ * rows MUST come with an explicit `externalUrl` from the mapper.
+ */
+function shouldFallbackToPathNav(row: SourceRowInput): boolean {
+  const t = row.documentType
+  return t === 'markdown' || t === 'data_room_doc'
+}
+
+/**
+ * Resolve the CTA contract for a row. Pure function — no DOM, no fetch,
+ * no logging. Call from any surface (chip, card, search result) with the
+ * same row shape and get the same answer back.
+ */
+export function resolveSourceRowCTA(
+  row: SourceRowInput,
+  ctx: SourceRowContext = {},
+): SourceRowCTA {
+  // Derive sourceRepo from documentType when the caller didn't supply
+  // it. Inline cards know `ref.type` (documentType) but not `sourceRepo`;
+  // chips and search results have sourceRepo directly. The host supplies
+  // the reverse map via `ctx.tableIdForDocumentType`.
+  const sourceRepo = row.sourceRepo
+    ?? (row.documentType && ctx.tableIdForDocumentType ? ctx.tableIdForDocumentType(row.documentType) : null)
+    ?? null
+
+  const { icon, iconLabel } = pickSourceIcon(sourceRepo, row.documentType)
+
+  // URL resolution.
+  let href: string | null = null
+  let targetPlatform: string | null = null
+  if (row.externalUrl) {
+    href = safeHref(row.externalUrl) ?? null
+    targetPlatform = row.targetPlatform ?? null
+  } else if (ctx.baseRoute && row.path && shouldFallbackToPathNav(row)) {
+    const safePath = sanitizePath(row.path)
+    if (safePath) {
+      if (ctx.chipBasePlatform) {
+        const base = `${getBaseUrl(ctx.chipBasePlatform)}/knowledge-base/`
+        href = new URL(safePath, base).toString()
+        targetPlatform = ctx.chipBasePlatform
+      } else {
+        const synthetic = `https://_internal_.local${ctx.baseRoute.startsWith('/') ? ctx.baseRoute : '/' + ctx.baseRoute}/`
+        const absolute = new URL(safePath, synthetic).toString()
+        href = absolute.replace('https://_internal_.local', '')
+        targetPlatform = ctx.currentPlatform ?? null
+      }
+      // Final safeHref pass on the composed URL — defense-in-depth.
+      href = safeHref(href) ?? null
+    }
+  }
+
+  // Ask drill-in viability.
+  const idValue = (row.id ?? '').trim()
+  const askable = !!(idValue && row.documentType)
+  const chatRef: ChatRef | null = askable
+    ? ({
+        type: row.documentType!,
+        ...(sourceRepo ? { sourceRepo } : {}),
+        id: idValue,
+        title: row.title,
+        url: href,
+        targetPlatform,
+        // Carry `path` so a downstream inline card (rendered from this
+        // chatRef on a subsequent turn) gets the same doc-tree-swap
+        // routing the chip already used. Without it, the Ask drill-in
+        // would resolve to a same-tab full-page nav even when an in-app
+        // path is available.
+        ...(row.path ? { metadata: { path: row.path } } : {}),
+      } as ChatRef)
+    : null
+
+  return { icon, iconLabel, href, targetPlatform, askable, chatRef }
+}
+
+/**
+ * Convenience helper for callers that just need the source icon —
+ * inline cards' tracking strip + the search-bar dropdown row, today.
+ *
+ * Single source of truth: every consumer (chips, search results,
+ * inline cards) routes through `SOURCE_ICON_NAMES` + `ICON_REGISTRY`.
+ *
+ * Accepts a string for backward-compatibility with the single-arg call
+ * shape — treated as `documentType`.
+ */
+export function resolveSourceIcon(
+  input: { sourceRepo?: string | null; documentType?: string | null } | string | null | undefined,
+  ctx: { tableIdForDocumentType?: (documentType: string) => string | null } = {},
+): {
+  Icon: React.ComponentType<{ className?: string }>
+  label: string
+} {
+  if (!input) return { Icon: FileText, label: 'Source' }
+  const { sourceRepo, documentType } = typeof input === 'string'
+    ? { sourceRepo: null, documentType: input }
+    : input
+  if (!sourceRepo && !documentType) return { Icon: FileText, label: 'Source' }
+  const resolvedRepo = sourceRepo
+    ?? (documentType && ctx.tableIdForDocumentType ? ctx.tableIdForDocumentType(documentType) : null)
+    ?? null
+  const { icon, iconLabel } = pickSourceIcon(resolvedRepo, documentType)
+  return { Icon: icon, label: iconLabel }
+}

package/src/components/empty-state.tsx

@@ -2,7 +2,7 @@
 
 import { Search, FileText, Package } from "lucide-react"
 import { Button } from "./ui/button"
-import { useRouter } from "next/navigation"
+import { useRouter } from "../embed-shims/next-navigation"
 
 export interface EmptyStateProps {
   type: 'vendors' | 'posts' | 'search' | 'generic'

package/src/components/features/board/ticket-card.tsx

@@ -2,7 +2,7 @@
 
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import Link from 'next/link'
+import Link from '../../../embed-shims/next-link'
 import * as React from 'react'
 import { LaptopIcon, Flag02Icon } from '../../icons-v2-generated'
 import { SquareAvatar } from '../../ui/square-avatar'

package/src/components/features/figma-prototype-viewer.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react'
 import { cn } from '../../utils/cn'
+import { fetchPriorityProp } from '../../utils/fetch-priority'
 import { Badge } from '../ui/badge'
 import { SectionSelector, type SectionItem } from './section-selector'
 
@@ -421,7 +422,7 @@ function renderUnifiedUI(state: UnifiedState, handlers: {
           sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
           title={config.title}
           loading="eager"
-          {...({ fetchPriority: 'high' } as any)}
+          {...fetchPriorityProp('high')}
         />
 
         {/* Loading Skeleton */}

package/src/components/features/media-gallery-manager.tsx

@@ -11,7 +11,7 @@ import {
   GripVertical,
   Plus
 } from 'lucide-react';
-import Image from 'next/image';
+import Image from '../../embed-shims/next-image';
 
 export interface MediaItem {
   id?: string | number; // Optional for new items

package/src/components/features/parallax-image-showcase.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import React, { useEffect, useState, useRef } from 'react'
-import Image from 'next/image'
+import Image from '../../embed-shims/next-image'
 import { motion, useScroll, useTransform, useMotionValue, useSpring } from 'framer-motion'
 
 interface ParallaxImageShowcaseProps {

package/src/components/features/release-media-manager.tsx

@@ -3,7 +3,7 @@
 import { useState, useRef } from 'react';
 import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea } from '../ui';
 import { Trash2, Plus, Image as ImageIcon, Video, Upload, Loader2, GripVertical } from 'lucide-react';
-import Image from 'next/image';
+import Image from '../../embed-shims/next-image';
 
 export interface ReleaseMediaItem {
   media_type: 'image' | 'video' | 'screenshot' | 'demo';

package/src/components/features/seo-editor-preview.tsx

@@ -5,7 +5,7 @@ import { Input, Textarea, Label, Button, Badge } from '../ui';
 import { ConfidenceBadge } from '../features';
 import { Globe, ExternalLink, Upload, X, Loader2, Sparkles } from 'lucide-react';
 import { cn } from '../../utils';
-import Image from 'next/image';
+import Image from '../../embed-shims/next-image';
 
 export interface SEOEditorPreviewProps {
   // SEO fields - must be strings (not undefined)

package/src/components/features/video.tsx

@@ -33,6 +33,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import MuxPlayer from '@mux/mux-player-react';
 import { PlayIcon } from '../icons-v2-generated/media-playback/play-icon';
+import { fetchPriorityProp } from '../../utils/fetch-priority';
 
 // =============================================================================
 // Suppress Google Cast SDK loading (CSP-friendly)
@@ -64,6 +65,46 @@ if (typeof window !== 'undefined') {
   }
 }
 
+// =============================================================================
+// Suppress benign "Media Chrome: No style sheet found ..." warning.
+// =============================================================================
+//
+// Why: MuxPlayer's UI is built on `media-chrome`, which uses custom
+// elements with shadow-DOM `<style>` tags. `media-chrome`'s internal
+// `insertCSSRule()` helper queries `style.sheet` during the element's
+// `connectedCallback`. When the player mounts inside a React portal
+// (the chat panel renders `<Video>` inside Radix's `<Dialog.Portal>`),
+// the element is moved across DOM trees BEFORE the browser hydrates
+// the shadow `<style>`'s `.sheet`. The helper then logs:
+//   "Media Chrome: No style sheet found on style tag of #shadow-root (open)"
+// and returns a no-op style shim. The warning is purely cosmetic —
+// playback, controls, and theming all render correctly because the
+// shadow stylesheet does hydrate on the next paint.
+//
+// Until upstream `media-chrome` either retries on the next microtask
+// or downgrades the warning (tracked in their issue tracker), patch
+// `console.warn` once at module load to drop only THIS exact string.
+// All other `console.warn` calls pass through unchanged.
+//
+// Why patch instead of opting out: `@mux/mux-player-react` exposes no
+// prop to disable internal style queries, importing CSS explicitly
+// doesn't seed the shadow-root stylesheets (they're per-element), and
+// the warning fires before any consumer can intercept the element.
+if (typeof window !== 'undefined' && typeof console !== 'undefined') {
+  const w = window as unknown as { __MEDIA_CHROME_WARN_PATCHED__?: boolean };
+  if (!w.__MEDIA_CHROME_WARN_PATCHED__) {
+    w.__MEDIA_CHROME_WARN_PATCHED__ = true;
+    const MEDIA_CHROME_NO_STYLESHEET_PREFIX = 'Media Chrome: No style sheet found on style tag of';
+    const originalWarn = console.warn.bind(console);
+    console.warn = (...args: unknown[]): void => {
+      if (typeof args[0] === 'string' && args[0].startsWith(MEDIA_CHROME_NO_STYLESHEET_PREFIX)) {
+        return;
+      }
+      originalWarn(...args);
+    };
+  }
+}
+
 // =============================================================================
 // URL classifiers (private — `<Video>` is the only consumer)
 // =============================================================================
@@ -251,10 +292,16 @@ function wrapWithLayout(
       // doesn't flicker tiny→full while video metadata loads. Both branches
       // are sized to fill 100% of this container (MuxPlayer via `style`,
       // YouTube facade via internal `paddingBottom: 56.25%` which compounds
-      // harmlessly inside an already-16:9 box).
+      // harmlessly inside an already-16:9 box). `rounded-lg overflow-hidden
+      // border border-ods-border` is on the wrapper (not the inner) so BOTH
+      // branches end up with the same rounded card look — YouTube's facade
+      // also paints its own internal rounded-lg on the button + iframe,
+      // matching the outer radius (so the corners stay sharp through the
+      // poster → iframe transition); MuxPlayer renders flat and inherits
+      // the wrapper's rounded corners via `overflow-hidden` clipping.
       return (
         <div className="flex justify-center w-full">
-          <div className="w-full max-w-3xl aspect-video">{inner}</div>
+          <div className="w-full max-w-3xl aspect-video rounded-lg overflow-hidden border border-ods-border">{inner}</div>
         </div>
       );
     case 'fill':
@@ -564,7 +611,11 @@ function YouTubeFacadeInner({
             src={posterJpg}
             alt={title}
             loading="lazy"
-            fetchPriority={priority ? 'high' : 'low'}
+            // React 18 wants lowercase (`fetchpriority` DOM attribute);
+            // React 19 wants camelCase (`fetchPriority` prop). Detect at
+            // module load and spread the right shape so both runtimes
+            // render the DOM attribute cleanly with no console warnings.
+            {...fetchPriorityProp(priority)}
             decoding={priority ? 'sync' : 'async'}
             className="absolute inset-0 w-full h-full object-cover"
           />

package/src/components/footer-waitlist-button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname, useRouter } from '../embed-shims/next-navigation';
 import { useCallback } from 'react';
 import { OpenFrameLogo } from './icons';
 import { Button } from './ui/button';

package/src/components/navigation/header.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import Link from 'next/link'
+import Link from '../../embed-shims/next-link'
 import React, { useEffect, useRef, useState } from 'react'
 import { HeaderConfig, NavigationItem } from '../../types/navigation'
 import { cn } from '../../utils'

package/src/components/shared/onboarding/onboarding-step-card.tsx

@@ -53,7 +53,7 @@ export function OnboardingStepCard({
 
   return (
     <InteractiveCard
-      clickable={true}
+      clickable={false}
       className={cn(
         'bg-ods-card border border-ods-border rounded-[6px]',
         'flex flex-col md:flex-row',

package/src/components/shared/product-release/product-release-card-skeleton.tsx

@@ -8,11 +8,11 @@ export interface ProductReleaseCardSkeletonProps {
   className?: string
   /** Card density. Must match the loaded card's `size` prop so the loading
    *  height matches the resolved height (no layout shift on resolve). */
-  size?: 'default' | 'sm' | 'catalog'
+  size?: 'lg' | 'sm'
 }
 
-export function ProductReleaseCardSkeleton({ className, size = 'default' }: ProductReleaseCardSkeletonProps) {
-  // ----- CATALOG branch — must match ProductReleaseCard size='catalog'.
+export function ProductReleaseCardSkeleton({ className, size = 'lg' }: ProductReleaseCardSkeletonProps) {
+  // ----- LG branch — must match ProductReleaseCard size='lg'.
   // Same outer frame (`bg-ods-system-greys-black border border-ods-border …
   // p-6 gap-4`). Inner: hero (16:9 cover + version pill + title + summary),
   // changelog strip placeholder, metadata-grid footer (4 cells via grid).
@@ -21,7 +21,7 @@ export function ProductReleaseCardSkeleton({ className, size = 'default' }: Prod
   // loaded card ALSO always renders the changelog strip + a fixed 4-cell
   // grid (with em-dash placeholders for missing values), so this
   // skeleton's shape matches exactly with zero load-to-resolve reflow.
-  if (size === 'catalog') {
+  if (size === 'lg') {
     return (
       <div
         className={cn(
@@ -151,44 +151,8 @@ export function ProductReleaseCardSkeleton({ className, size = 'default' }: Prod
     )
   }
 
-  return (
-    <div
-      className={cn(
-        'bg-ods-card border border-ods-border rounded-[6px]',
-        'flex flex-col md:flex-row',
-        'items-start md:items-center',
-        'gap-3 md:gap-4',
-        'p-4',
-        'animate-pulse',
-        className
-      )}
-    >
-      {/* Left column - content */}
-      <div className="flex-1 w-full md:w-auto min-w-0 flex flex-col justify-center gap-2">
-        {/* Title skeleton - 2 lines height */}
-        <div className="min-h-[48px] flex items-center">
-          <div className="flex flex-col gap-1 w-full">
-            <div className="h-[24px] w-3/4 bg-ods-border rounded" />
-            <div className="h-[24px] w-1/2 bg-ods-border rounded" />
-          </div>
-        </div>
-        {/* Description skeleton - 3 lines */}
-        <div className="flex flex-col gap-1">
-          <div className="h-[24px] w-full bg-ods-border rounded" />
-          <div className="h-[24px] w-full bg-ods-border rounded" />
-          <div className="h-[24px] w-2/3 bg-ods-border rounded" />
-        </div>
-      </div>
-
-      {/* Right column - version + date */}
-      <div className="flex items-center gap-2 w-full md:w-auto justify-start md:justify-end shrink-0">
-        <div className="w-[200px] flex flex-col justify-center gap-2">
-          <div className="h-[24px] w-20 bg-ods-border rounded" />
-          <div className="h-[20px] w-32 bg-ods-border rounded" />
-        </div>
-        {/* Icon column */}
-        <div className="h-6 w-6 bg-ods-border rounded shrink-0 mx-3" />
-      </div>
-    </div>
-  )
+  // Unreachable — `size` is typed `'lg' | 'sm'` and both branches return
+  // above. Kept as a defensive throw so a future variant addition that
+  // forgets to return doesn't silently render `undefined`.
+  throw new Error(`ProductReleaseCardSkeleton: unsupported size '${size as string}'`)
 }