@flamingo-stack/openframe-frontend-core 0.0.206 → 0.0.207-snapshot.20260526023528

package/src/components/shared/dev-section/dev-section-view.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+/**
+ * DevSectionView — the canonical chrome for ANY dev-center section
+ * (Roadmap / Delivery / Releases). One component, used in BOTH:
+ *
+ *   - tabbed `/roadmap-and-releases` (compact title mode, no `hero`)
+ *   - full-page `/roadmap`, `/bug-fixes-and-enhancements`, `/releases`
+ *     (hero mode with icon + description + back link)
+ *
+ * Owns: title rendering, the inline search input, the filter pill row,
+ * and the URL-param wiring that connects both. The list `children`
+ * receive a clean URL contract — they read `?<paramKey>=...` via
+ * `useSearchParams()` and refetch on change. No duplicated controls.
+ */
+
+import type { ReactNode } from 'react';
+import { useState, useEffect } from 'react';
+import { useRouter, useSearchParams, usePathname } from '../../../embed-shims';
+import { SearchInput } from '../../ui';
+import { StatusFilterComponent } from '../../features';
+import {
+  OPENFRAME_DEV_SECTIONS,
+  type OpenframeDevSectionKey,
+} from '../../../utils/dev-sections/openframe-dev-sections';
+
+export interface DevSectionViewProps {
+  /** Which section to render — drives title, search, and filter
+   *  config via the `OPENFRAME_DEV_SECTIONS` registry. */
+  sectionKey: OpenframeDevSectionKey;
+  /** When set, renders the rich page-level hero (icon + h1 + description).
+   *  Omit for the compact tab-context heading. */
+  hero?: {
+    /** Pre-rendered icon JSX. Server components render the icon themselves
+     *  and pass the element here — function references can't cross the
+     *  server→client boundary, but React elements can. */
+    icon: ReactNode;
+    description: string;
+  };
+  /** The page-specific list body. Reads URL params written by this
+   *  component (search input + filter pills). */
+  children: ReactNode;
+}
+
+export function DevSectionView({ sectionKey, hero, children }: DevSectionViewProps) {
+  const section = OPENFRAME_DEV_SECTIONS[sectionKey];
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const search = section.search;
+  const filter = section.filter;
+
+  const currentSearch = search ? searchParams.get(search.paramKey) || '' : '';
+  const currentFilterValue = filter
+    ? searchParams.get(filter.paramKey) || filter.defaultValue
+    : '';
+
+  // Controlled search-input state — input commits to the URL only on
+  // Enter (not on every keystroke), preserving the legacy behavior.
+  // Lazy init from URL avoids a brief flash of stale value on first
+  // paint after URL-driven re-render (e.g. tab switch).
+  const [searchValue, setSearchValue] = useState(() => currentSearch);
+  useEffect(() => {
+    setSearchValue(currentSearch);
+  }, [currentSearch]);
+
+  const handleSearchSubmit = (value: string) => {
+    if (!search) return;
+    const params = new URLSearchParams(searchParams.toString());
+    if (value.trim()) params.set(search.paramKey, value.trim());
+    else params.delete(search.paramKey);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
+  const handleFilterChange = (value: string) => {
+    if (!filter) return;
+    const params = new URLSearchParams(searchParams.toString());
+    if (value === filter.defaultValue) params.delete(filter.paramKey);
+    else params.set(filter.paramKey, value);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
+  return (
+    <div className="w-full flex flex-col gap-10">
+      {hero ? (
+        <div className="space-y-4">
+          <h1 className="text-h1 tracking-[-1.12px] text-ods-text-primary flex items-center gap-3">
+            {hero.icon}
+            {section.hero.title}
+          </h1>
+          <p className="font-['DM_Sans'] font-medium text-[18px] leading-[28px] text-ods-text-secondary max-w-3xl">
+            {hero.description}
+          </p>
+        </div>
+      ) : (
+        <div className="flex items-center justify-between w-full">
+          <h2 className="font-['Azeret_Mono'] font-semibold text-[32px] md:text-[40px] lg:text-[48px] leading-[40px] md:leading-[48px] lg:leading-[56px] text-ods-text-primary tracking-[-0.64px] md:tracking-[-0.8px] lg:tracking-[-0.96px]">
+            {section.hero.title}
+            <span className="text-ods-accent">:</span>
+          </h2>
+        </div>
+      )}
+
+      {(search || filter) && (
+        <div className="space-y-4">
+          {search && (
+            <SearchInput
+              showDropdown={false}
+              placeholder={search.placeholder}
+              value={searchValue}
+              onChange={setSearchValue}
+              onSubmit={handleSearchSubmit}
+            />
+          )}
+          {filter && (
+            <StatusFilterComponent
+              selectedStatus={currentFilterValue}
+              onStatusChange={handleFilterChange}
+              statusOptions={[...filter.options]}
+            />
+          )}
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}

package/src/components/shared/dev-section/index.ts

@@ -0,0 +1,2 @@
+export { DevSectionView, type DevSectionViewProps } from './dev-section-view';
+export { DevSectionPage, type DevSectionPageProps } from './dev-section-page';

package/src/components/shared/legal-document/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared legal-document surface barrel.
+ *
+ * Exports one parameterized `<LegalDocumentPage>` that replaces hub's
+ * formerly-duplicated `PrivacyPolicyPage` + `TermsOfServicePage`
+ * (95% identical, differing only in copy strings).
+ */
+
+export {
+  LegalDocumentPage,
+  type LegalDocumentPageProps,
+  type LegalDocumentMarkdownRendererProps,
+} from './legal-document-page';
+export {
+  useLegalDocs,
+  type LegalDocument,
+  type UseLegalDocsOptions,
+  type UseLegalDocsReturn,
+} from './use-legal-docs';

package/src/components/shared/legal-document/legal-document-page.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+/**
+ * LegalDocumentPage — unified UI for privacy-policy, terms-of-service,
+ * and any other markdown-backed legal document.
+ *
+ * Replaces two near-identical hub components (`PrivacyPolicyPage` +
+ * `TermsOfServicePage`) that differed only in title, contact email,
+ * and copy strings. Caller passes those as props.
+ *
+ * Markdown rendering: defaults to lib's `SimpleMarkdownRenderer`
+ * (sufficient for plain-markdown legal docs). Embedders that need
+ * richer markdown (embeds, video, OG previews) pass their own via
+ * the `MarkdownRenderer` prop — same injection pattern as
+ * `ReleaseDetailPage`.
+ *
+ * Endpoint configuration: forwarded to `useLegalDocs(docType, { apiEndpoint })`.
+ */
+
+import type { ComponentType } from 'react';
+import { PageShell, PageLayout } from '../../ui';
+import { SimpleMarkdownRenderer } from '../../ui/simple-markdown-renderer';
+import { useRouter } from '../../../embed-shims/next-navigation';
+import { useLegalDocs, type LegalDocument } from './use-legal-docs';
+import { formatLegalDate } from '../../../utils/format';
+
+export interface LegalDocumentMarkdownRendererProps {
+  content: string;
+  sectionIds?: Array<{ id: string; title: string; level: number }>;
+  demoteMarkdownH1ToH2?: boolean;
+}
+
+export interface LegalDocumentPageProps {
+  /** Document type identifier — drives the default API endpoint
+   *  `/api/legal/<docType>` AND the error-log prefix. Common values:
+   *  `'privacy'`, `'terms'`. Embedders may use any string. */
+  docType: string;
+  /** Heading text (e.g. "Privacy Policy", "Terms of Service"). */
+  title: string;
+  /** Fallback subtitle shown when no `lastUpdated` date is available
+   *  (e.g. "Our privacy policy and data protection practices"). */
+  fallbackDescription: string;
+  /** Email shown in the error + empty-state copy
+   *  (e.g. `'privacy@openframe.io'`, `'legal@openframe.io'`). */
+  contactEmail: string;
+  /** Prompt shown above the contact link in the error state
+   *  (e.g. "For privacy-related questions, please contact:"). */
+  errorContactPrompt: string;
+  /** Title for the error block (e.g. "Unable to load privacy policy"). */
+  errorTitle: string;
+  /** Sentence shown when the API returns no document
+   *  (e.g. "Privacy policy content is not available at this time."). */
+  emptyStateMessage: string;
+  /** SSR-prepared document, if available. */
+  initialData?: LegalDocument | null;
+  /** SSR-prepared formatted "Last Updated" label. Stable across hydration. */
+  initialLastUpdatedLabel?: string | null;
+  /** Override the default `/api/legal/<docType>` endpoint
+   *  (reverse-proxy embedders, alternate API paths). */
+  apiEndpoint?: string;
+  /** Override the default markdown renderer. */
+  MarkdownRenderer?: ComponentType<LegalDocumentMarkdownRendererProps>;
+  /** Back-button config — same pattern as `DevSectionPage`. Pass `false`
+   *  to hide. Default `{ label: 'Back to home', href: '/' }`. */
+  backButton?: { label?: string; href?: string } | false;
+}
+
+export function LegalDocumentPage({
+  docType,
+  title,
+  fallbackDescription,
+  contactEmail,
+  errorContactPrompt,
+  errorTitle,
+  emptyStateMessage,
+  initialData = null,
+  initialLastUpdatedLabel = null,
+  apiEndpoint,
+  MarkdownRenderer = SimpleMarkdownRenderer,
+  backButton,
+}: LegalDocumentPageProps) {
+  const router = useRouter();
+  const { data, isLoading, error } = useLegalDocs(docType, { initialData, apiEndpoint });
+
+  // Back-button config — mirrors DevSectionPage's `{ label: 'Back to home',
+  // onClick: () => router.push('/') }`. Hide entirely when caller passes
+  // `false` (e.g. embed-mode where the host owns navigation chrome).
+  const backCfg =
+    backButton === false
+      ? undefined
+      : {
+          label: backButton?.label ?? 'Back to home',
+          onClick: () => router.push(backButton?.href ?? '/'),
+        };
+
+  const fallbackLastUpdatedLabel =
+    data?.lastSynced != null ? formatLegalDate(data.lastSynced) : null;
+  const effectiveLastUpdatedLabel = initialLastUpdatedLabel ?? fallbackLastUpdatedLabel;
+
+  // Title with accent-colon trailing dot — matches knowledge-hub typography
+  const customTitle = (
+    <div className="flex flex-col gap-4">
+      <h1 className="font-['Azeret_Mono'] text-[32px] md:text-[40px] lg:text-[48px] font-semibold leading-[1em] tracking-[-0.02em] text-ods-text-primary">
+        <span>{title}</span>
+        <span className="text-ods-accent">.</span>
+      </h1>
+      <p className="font-['DM_Sans'] text-base md:text-lg text-ods-text-secondary max-w-2xl">
+        {effectiveLastUpdatedLabel ? `Last Updated: ${effectiveLastUpdatedLabel}` : fallbackDescription}
+        {data?.sourceFile && (
+          <span className="block text-sm mt-1 opacity-75">Source: {data.sourceFile}</span>
+        )}
+      </p>
+    </div>
+  );
+
+  return (
+    <PageShell>
+      <PageLayout backButton={backCfg}>
+        <div className="flex flex-col gap-4">{customTitle}</div>
+
+        <div className="flex flex-col lg:flex-row gap-6 lg:gap-10 items-start flex-1">
+          <div className="flex-1">
+            <div className="w-full">
+              <article className="space-y-2">
+                {isLoading ? (
+                  // Loading skeleton matching Knowledge Hub pattern
+                  <div className="space-y-6">
+                    <div className="h-10 bg-ods-skeleton rounded-lg w-3/4 animate-pulse"></div>
+                    <div className="space-y-4">
+                      <div className="h-4 bg-ods-skeleton rounded w-full animate-pulse"></div>
+                      <div className="h-4 bg-ods-skeleton rounded w-full animate-pulse"></div>
+                      <div className="h-4 bg-ods-skeleton rounded w-5/6 animate-pulse"></div>
+                    </div>
+                    <div className="h-32 bg-ods-card border border-ods-border rounded-lg animate-pulse"></div>
+                    <div className="space-y-4">
+                      <div className="h-4 bg-ods-skeleton rounded w-full animate-pulse"></div>
+                      <div className="h-4 bg-ods-skeleton rounded w-4/5 animate-pulse"></div>
+                    </div>
+                  </div>
+                ) : error ? (
+                  <div className="text-center space-y-4">
+                    <div className="bg-red-900/20 border border-red-700 rounded-lg p-6">
+                      <p className="text-red-400 mb-2">{errorTitle}</p>
+                      <p className="text-red-300 text-sm">{error}</p>
+                    </div>
+                    <div className="text-ods-text-secondary">
+                      <p>{errorContactPrompt}</p>
+                      <a href={`mailto:${contactEmail}`} className="text-ods-accent hover:underline">
+                        {contactEmail}
+                      </a>
+                    </div>
+                  </div>
+                ) : data ? (
+                  <MarkdownRenderer
+                    content={data.content}
+                    sectionIds={data.sections || []}
+                    demoteMarkdownH1ToH2
+                  />
+                ) : (
+                  <div className="text-center text-ods-text-secondary py-16">
+                    <p className="text-xl">{emptyStateMessage}</p>
+                    <p className="mt-2">
+                      Please contact{' '}
+                      <a href={`mailto:${contactEmail}`} className="text-ods-accent hover:underline">
+                        {contactEmail}
+                      </a>{' '}
+                      for more information.
+                    </p>
+                  </div>
+                )}
+              </article>
+            </div>
+          </div>
+        </div>
+      </PageLayout>
+    </PageShell>
+  );
+}

package/src/components/shared/legal-document/use-legal-docs.ts

@@ -0,0 +1,123 @@
+'use client';
+
+/**
+ * useLegalDocs — fetches a legal document (privacy policy, terms of
+ * service, or any other markdown-backed legal page) from a hub API.
+ *
+ * Endpoint configuration — `apiEndpoint`:
+ *   Default `/api/legal/<docType>`. Reverse-proxy embedders override
+ *   with their proxied path (e.g. `/proxy/legal/privacy`).
+ *
+ * Data shape mirrors the hub's `lib/data/legal-utils.ts:LegalDocument`
+ * server type. The hook intentionally re-declares the type here so
+ * lib consumers don't need to import a server-side type.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+
+export interface LegalDocument {
+  title: string;
+  content: string;
+  sourceFile: string;
+  lastSynced: string | null;
+  githubSha: string | null;
+  sections: Array<{ id: string; title: string; level: number }>;
+  docType: string;
+  meta: {
+    sectionsCount: number;
+    contentLength: number;
+    lastSyncedAgo: string;
+  };
+}
+
+export interface UseLegalDocsReturn {
+  data: LegalDocument | null;
+  isLoading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+export interface UseLegalDocsOptions {
+  /** Optional pre-fetched payload from server (SSR / RSC). When set,
+   *  the hook skips the initial client fetch. */
+  initialData?: LegalDocument | null;
+  /** Full GET endpoint URL. Default `/api/legal/<docType>`. */
+  apiEndpoint?: string;
+}
+
+/**
+ * Hook to fetch a legal document.
+ * @param docType — short identifier for the document (drives the
+ *   default endpoint path AND the error-log prefix). Common values:
+ *   `'privacy'` (SECURITY.md), `'terms'` (LICENSE). Embedders may use
+ *   any string — the hook treats it as opaque.
+ */
+export function useLegalDocs(
+  docType: string,
+  options: UseLegalDocsOptions = {}
+): UseLegalDocsReturn {
+  const { initialData = null, apiEndpoint } = options;
+  const effectiveEndpoint = apiEndpoint ?? `/api/legal/${docType}`;
+
+  const [data, setData] = useState<LegalDocument | null>(initialData ?? null);
+  const [isLoading, setIsLoading] = useState(!initialData);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchDocument = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const response = await fetch(effectiveEndpoint);
+
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch ${docType} document: ${response.status} ${response.statusText}`
+        );
+      }
+
+      const result = await response.json();
+
+      // Validate the response has required fields
+      if (!result.content) {
+        throw new Error(`${docType} document content is empty`);
+      }
+
+      setData(result);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      console.error(`Error fetching ${docType} document:`, err);
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [docType, effectiveEndpoint]);
+
+  // Reset cached data when docType changes — otherwise an embedder using
+  // the same hook instance for sequential docTypes (privacy → terms)
+  // would briefly render the OLD doc's content while the new fetch is
+  // in-flight. Not currently triggered by hub's per-route SSR (each
+  // docType mounts in a fresh component), but enforces the contract.
+  useEffect(() => {
+    setData(initialData ?? null);
+    setError(null);
+    setIsLoading(!initialData);
+  }, [docType, initialData]);
+
+  // Fetch on mount (only if we don't already have server-provided initialData)
+  useEffect(() => {
+    if (initialData) return;
+    fetchDocument();
+  }, [fetchDocument, initialData]);
+
+  const refetch = () => {
+    fetchDocument();
+  };
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch,
+  };
+}

package/src/components/shared/product-release/index.ts

@@ -8,8 +8,19 @@ export {
   type VideoDisplaySectionProps,
   type MarkdownRendererProps,
   type RoadmapItem,
-  type DeliveryResponse,
-  type RoadmapSectionProps,
-  type DeliverySectionProps
 } from './release-detail-page'
+// NOTE: `RoadmapSectionProps` / `DeliverySectionProps` (the injectable-
+// component slot types for ReleaseDetailPage) are intentionally NOT
+// re-exported from this barrel — they collide with the prop types of
+// the concrete `<RoadmapGrid>` / `<DeliverySection>` components in
+// `./shared/{roadmap,delivery}` (TS2308 ambiguous re-export at the
+// top-level `components/index.ts` barrel). The slot types remain
+// internal to `release-detail-page.tsx`; consumers needing them can
+// import directly from
+// `@flamingo-stack/openframe-frontend-core/components/shared/product-release/release-detail-page`.
+// DeliveryResponse re-sourced from the canonical types module so the
+// public deep-import path `@flamingo-stack/openframe-frontend-core/components`
+// keeps resolving (hub's components/releases/release-detail-page.tsx
+// imports it through this barrel).
+export type { DeliveryResponse } from '../../../types/delivery'
 export { ReleaseDetailSkeleton } from './release-detail-skeleton'

package/src/components/shared/product-release/release-detail-page.tsx

@@ -2,8 +2,10 @@
 
 import { useState, useEffect, ComponentType } from 'react';
 import Link from '../../../embed-shims/next-link';
+import { useRouter } from '../../../embed-shims/next-navigation';
 import { Card, CardContent } from '../../ui/card';
 import { ArticleDetailLayout } from '../../layout/article-detail-layout';
+import { BackButton } from '../../layout/back-button';
 import { ReleaseChangelogSection } from '../../ui/release-changelog-section';
 import { StatusBadge } from '../../ui/status-badge';
 import { SquareAvatar } from '../../ui/square-avatar';
@@ -29,13 +31,15 @@ export interface MarkdownRendererProps {
 // shape once the entities barrel was added; re-exporting the canonical
 // type fixes the collision while keeping the same import path for
 // downstream consumers of `./release-detail-page`.
-export type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
 import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
-
-export interface DeliveryResponse {
-  completed: unknown[];
-  inProgress: unknown[];
-}
+import type { DeliveryResponse } from '../../../types/delivery';
+// Re-export both types for source-compat with consumers importing
+// through this module. Canonical sources:
+//   - RoadmapItem  → `../../chat/types/entities/roadmap-item`
+//   - DeliveryResponse → `../../../types/delivery` (single source of
+//     truth, shared with the lib `<DeliveryLists>` / `<DeliveryTable>`
+//     components and the new types barrel).
+export type { RoadmapItem, DeliveryResponse };
 
 export interface RoadmapSectionProps {
   items: RoadmapItem[];
@@ -91,6 +95,10 @@ export interface ReleaseDetailPageProps {
   // API endpoints for fetching linked tasks
   roadmapApiEndpoint?: string;
   deliveryApiEndpoint?: string;
+  /** Back-button config — same pattern as `DevSectionPage` /
+   *  `LegalDocumentPage`. Pass `false` to hide. Default
+   *  `{ label: 'Back to home', href: '/' }`. */
+  backButton?: { label?: string; href?: string } | false;
 }
 
 // Default simple markdown renderer (just renders as text)
@@ -108,14 +116,26 @@ export function ReleaseDetailPage({
   VideoSection,
   VideoDisplaySection,
   roadmapApiEndpoint = '/api/roadmap',
-  deliveryApiEndpoint = '/api/delivery'
+  deliveryApiEndpoint = '/api/delivery',
+  backButton
 }: ReleaseDetailPageProps) {
+  const router = useRouter();
   // Use pre-fetched data if provided (admin preview), otherwise fetch via hook (public)
   const { data: fetchedRelease, error, isLoading } = useRelease(initialData ? undefined : slug);
   const release = (initialData || fetchedRelease) as Record<string, unknown> | undefined;
   const [galleryOpen, setGalleryOpen] = useState(false);
   const [galleryIndex, setGalleryIndex] = useState(0);
 
+  // Back-button config — mirrors DevSectionPage / LegalDocumentPage.
+  // Default: { label: 'Back to home', href: '/' }. Pass `false` to hide
+  // (e.g. embed-mode where the host owns navigation chrome).
+  // Narrowing note: `backButton &&` already eliminates the `false` branch,
+  // so the inner expressions are typed as `{ label?, href? } | undefined`.
+  // Don't re-compare to `false` here — tsc TS2367s on the dead branch.
+  const showBackButton = backButton !== false;
+  const backLabel = (backButton ? backButton.label : undefined) ?? 'Back to home';
+  const backHref = (backButton ? backButton.href : undefined) ?? '/';
+
   // Fetch roadmap and delivery tasks if linked to this release
   const [roadmapTasks, setRoadmapTasks] = useState<RoadmapItem[]>([]);
   const [deliveryData, setDeliveryData] = useState<DeliveryResponse | null>(null);
@@ -201,6 +221,15 @@ export function ReleaseDetailPage({
 
   return (
     <ArticleDetailLayout>
+      {/* Back button — desktop-only, matches DevSectionPage / LegalDocumentPage
+          (TitleBlock renders the same `hidden md:inline-flex` BackButton). */}
+      {showBackButton && (
+        <BackButton
+          label={backLabel}
+          onClick={() => router.push(backHref)}
+          className="hidden md:inline-flex mb-4"
+        />
+      )}
       <div className="space-y-6 md:space-y-8">
         {/* Title Block */}
         <div className="flex flex-col md:flex-row md:items-end gap-4 w-full">
@@ -399,22 +428,31 @@ export function ReleaseDetailPage({
           icon={<AlertTriangle className="h-6 w-6" />}
           SimpleMarkdownRenderer={MarkdownRenderer}
         />
+        {/* Features / Bugs / Improvements use `previewFirst` — same
+            progressive-disclosure pattern as the investor-update detail
+            page's Key Highlights / Financial Notes sections. Shows the
+            first entry in full + fade-masks the rest, with a "Show N
+            more / Show less" toggle. Breaking Changes (above) stays
+            fully expanded — it's critical info, not skim-friendly. */}
         <ReleaseChangelogSection
           title="Features Added"
           entries={featuresAdded || []}
           icon={<Sparkles className="h-6 w-6" />}
+          previewFirst
           SimpleMarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Bugs Fixed"
           entries={bugFixed || []}
           icon={<Wrench className="h-6 w-6" />}
+          previewFirst
           SimpleMarkdownRenderer={MarkdownRenderer}
         />
         <ReleaseChangelogSection
           title="Improvements"
           entries={improvements || []}
           icon={<TrendingUp className="h-6 w-6" />}
+          previewFirst
           SimpleMarkdownRenderer={MarkdownRenderer}
         />
 

package/src/components/shared/roadmap/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared roadmap surface barrel.
+ *
+ * IMPORTANT: This barrel MUST NOT re-export `RoadmapItem`. The canonical
+ * type is exported via two paths already:
+ *   - `@flamingo-stack/openframe-frontend-core/components/chat`
+ *     (the source of truth at `chat/types/entities/roadmap-item.ts`)
+ *   - `@flamingo-stack/openframe-frontend-core/components` (via
+ *     `./shared/product-release` re-export)
+ *
+ * Adding a third re-export path here would trigger TypeScript's TS2308
+ * ambiguous re-export warning. Consumers needing the type should import
+ * it from one of the two existing paths.
+ */
+
+export { RoadmapGrid, type RoadmapGridProps } from './roadmap-grid';
+export { RoadmapGridSkeleton, type RoadmapGridSkeletonProps } from './roadmap-grid-skeleton';
+// `VoteType` deliberately NOT re-exported — `./chat` already exports
+// the same-shape `VoteType` from `roadmap-card.tsx`; a duplicate path
+// triggers TS2308 ambiguous re-export at the top-level
+// `components/index.ts` barrel. Consumers can import the canonical
+// `VoteType` from `@flamingo-stack/openframe-frontend-core/components/chat`.
+export { useRoadmapVoting, type VoteState, type UseRoadmapVotingOptions } from './use-roadmap-voting';