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

package/src/components/shared/roadmap/roadmap-grid-skeleton.tsx

@@ -0,0 +1,74 @@
+/**
+ * RoadmapGridSkeleton — loading state for the `/roadmap` grid view.
+ *
+ * Pure JSX (no hooks, no events) — `'use client'` not strictly required
+ * here; tsup's client-entry banner injects it automatically when this
+ * file is bundled into the client output. We match the playbook's
+ * skeleton-file convention (no directive when no hooks).
+ *
+ * NOTE: lib's `chat/entity-cards/roadmap-card.tsx` also exports a
+ * `RoadmapCardSkeleton` — that one is the COMPACT 56px chat-card
+ * variant. This file's internal card-skeleton (340px grid card)
+ * intentionally stays file-internal to avoid the naming collision;
+ * only `RoadmapGridSkeleton` is exported.
+ */
+
+function RoadmapCardSkeleton() {
+  return (
+    <div className="bg-ods-card border border-ods-border rounded-[6px] p-[24px] flex flex-col gap-[16px] min-h-[340px] relative">
+      {/* Status Badge Skeleton - Top Right */}
+      <div className="absolute top-[24px] right-[24px]">
+        <div className="h-[20px] w-[80px] bg-ods-border rounded animate-pulse"></div>
+      </div>
+
+      {/* Icon and title skeleton */}
+      <div className="flex items-center gap-[16px] pr-[120px]">
+        <div className="w-[80px] h-[80px] bg-ods-border rounded-lg flex-shrink-0 animate-pulse"></div>
+        <div className="flex-1 min-w-0 flex flex-col gap-1">
+          <div className="min-h-[48px] flex items-center">
+            <div className="h-[24px] w-full bg-ods-border rounded animate-pulse"></div>
+          </div>
+          <div className="min-h-[20px] flex items-center">
+            <div className="h-[14px] w-1/2 bg-ods-border rounded animate-pulse"></div>
+          </div>
+        </div>
+      </div>
+
+      {/* Description skeleton - exactly 3 lines */}
+      <div className="min-h-[72px] flex items-center">
+        <div className="w-full space-y-2">
+          <div className="h-[24px] bg-ods-border rounded animate-pulse"></div>
+          <div className="h-[24px] bg-ods-border rounded animate-pulse"></div>
+          <div className="h-[24px] w-4/5 bg-ods-border rounded animate-pulse"></div>
+        </div>
+      </div>
+
+      <div className="flex-1"></div>
+
+      {/* Bottom skeleton */}
+      <div className="flex items-center justify-between">
+        <div className="h-[48px] w-[120px] bg-ods-border rounded animate-pulse"></div>
+        <div className="h-[32px] w-[100px] bg-ods-border rounded animate-pulse"></div>
+      </div>
+    </div>
+  );
+}
+
+export interface RoadmapGridSkeletonProps {
+  /** Number of skeleton cards to show. Default 4. */
+  count?: number;
+  /** Show the desktop left margin (~120px) that aligns the grid with
+   *  the page hero's title block. Default `true`. Related-content rails
+   *  inside narrower surfaces (e.g. the release detail page) pass `false`. */
+  showLeftMargin?: boolean;
+}
+
+export function RoadmapGridSkeleton({ count = 4, showLeftMargin = true }: RoadmapGridSkeletonProps) {
+  return (
+    <div className={`grid grid-cols-1 md:grid-cols-2 gap-6 ${showLeftMargin ? 'md:ml-[120px]' : ''}`}>
+      {Array.from({ length: count }).map((_, i) => (
+        <RoadmapCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}

package/src/components/shared/roadmap/roadmap-grid.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+/**
+ * RoadmapGrid — full-page roadmap surface.
+ *
+ * Renders a responsive 2-col grid of `<RoadmapCard>`s (lib's chat-entity
+ * card, default density), threads voting state through `useRoadmapVoting`,
+ * and follows up a successful vote with a single-task refresh fetch so
+ * the displayed counts stay live.
+ *
+ * Endpoint configuration — `buildRefreshUrl`:
+ *   The single-task refresh hits a PATH-based endpoint
+ *   (`/api/roadmap/<taskId>` by default). A string-concat `refreshEndpoint`
+ *   would silently break embedders whose by-id route is shaped
+ *   differently (e.g. `/api/roadmap?id=…`), so this prop is a function
+ *   builder. The default matches the hub's pre-migration shape.
+ *
+ * Empty state — uses lib's `<EmptyState>` directly (identical API to
+ * hub's, lives in `src/components/empty-state.tsx`).
+ */
+
+import { useState } from 'react';
+import { RoadmapCard } from '../../chat/entity-cards/roadmap-card';
+import { useRoadmapVoting, type UseRoadmapVotingOptions } from './use-roadmap-voting';
+import { EmptyState } from '../../empty-state';
+import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
+
+const DEFAULT_BUILD_REFRESH_URL = (taskId: string) => `/api/roadmap/${taskId}`;
+
+export interface RoadmapGridProps {
+  items: RoadmapItem[];
+  onItemUpdate?: (updatedItem: RoadmapItem) => void;
+  /** Show the desktop left margin (~120px) that aligns the grid with
+   *  the page hero. Default `true`. Related-content rails pass `false`. */
+  showLeftMargin?: boolean;
+  /** URL builder for the per-task refresh call after a successful vote.
+   *  Function shape because the taskId sits in the URL path, not a
+   *  query param. Default `(t) => \`/api/roadmap/${t}\``. */
+  buildRefreshUrl?: (taskId: string) => string;
+  /** Voting hook options (vote endpoint + storage key) — see
+   *  `useRoadmapVoting`. */
+  votingOptions?: UseRoadmapVotingOptions;
+}
+
+export function RoadmapGrid({
+  items,
+  onItemUpdate,
+  showLeftMargin = true,
+  buildRefreshUrl = DEFAULT_BUILD_REFRESH_URL,
+  votingOptions,
+}: RoadmapGridProps) {
+  const { getVote, toggleVote } = useRoadmapVoting(votingOptions);
+  const [votingTasks, setVotingTasks] = useState<Set<string>>(new Set());
+
+  const handleVote = async (taskId: string, voteType: 'up' | 'down') => {
+    // Prevent double-clicking
+    if (votingTasks.has(taskId)) return;
+
+    setVotingTasks(prev => new Set(prev).add(taskId));
+
+    try {
+      const result = await toggleVote(taskId, voteType);
+
+      if (result.success) {
+        // Refresh the specific task from server
+        const response = await fetch(buildRefreshUrl(taskId));
+        if (response.ok) {
+          const data = await response.json();
+          if (data.item && onItemUpdate) {
+            onItemUpdate(data.item);
+          }
+        }
+      }
+    } finally {
+      setVotingTasks(prev => {
+        const next = new Set(prev);
+        next.delete(taskId);
+        return next;
+      });
+    }
+  };
+
+  if (items.length === 0) {
+    return (
+      <EmptyState
+        type="generic"
+        title="No roadmap items"
+        description="Check back soon for upcoming features and improvements!"
+      />
+    );
+  }
+
+  return (
+    <div className={`grid grid-cols-1 md:grid-cols-2 gap-6 ${showLeftMargin ? 'md:ml-[120px]' : ''}`}>
+      {items.map((item) => (
+        <RoadmapCard
+          key={item.id}
+          item={item}
+          userVote={getVote(item.id)}
+          onVote={(voteType) => handleVote(item.id, voteType)}
+          isVoting={votingTasks.has(item.id)}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/shared/roadmap/use-roadmap-voting.ts

@@ -0,0 +1,163 @@
+'use client';
+
+/**
+ * useRoadmapVoting — localStorage-backed optimistic voting for roadmap cards.
+ *
+ * One vote per task per user (storage key scoped per `storageKey` option,
+ * default `'roadmap_votes_v1'`). Toggling the same vote removes it;
+ * switching directions sends a remove + add pair so the server's running
+ * totals stay correct.
+ *
+ * Endpoint configuration — `voteApiEndpoint`:
+ *   The hook posts to ONE endpoint (default `/api/roadmap/vote`) for
+ *   BOTH the optimistic add AND the opposite-vote remove. Reverse-proxy
+ *   embedders override this with their proxied path; lib otherwise
+ *   matches the hub's pre-migration call shape.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+
+export type VoteType = 'up' | 'down' | null;
+
+export interface VoteState {
+  [taskId: string]: VoteType;
+}
+
+export interface UseRoadmapVotingOptions {
+  /** Vote endpoint URL. Default `/api/roadmap/vote`. */
+  voteApiEndpoint?: string;
+  /** localStorage key. Default `'roadmap_votes_v1'`. Embedders mounting
+   *  multiple roadmap surfaces in the same origin can scope per-surface
+   *  (e.g. `'roadmap_votes_v1_main'` vs `'roadmap_votes_v1_admin'`) so
+   *  votes don't cross-contaminate. */
+  storageKey?: string;
+}
+
+const DEFAULT_VOTE_ENDPOINT = '/api/roadmap/vote';
+const DEFAULT_STORAGE_KEY = 'roadmap_votes_v1';
+
+export function useRoadmapVoting(options: UseRoadmapVotingOptions = {}) {
+  const voteApiEndpoint = options.voteApiEndpoint ?? DEFAULT_VOTE_ENDPOINT;
+  const storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY;
+
+  const [votes, setVotes] = useState<VoteState>({});
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load votes from localStorage. Runs on mount AND whenever `storageKey`
+  // changes — when the key changes mid-lifecycle (e.g. an embedder
+  // remounts with a new namespace), we MUST reset state first so the
+  // save-effect below doesn't write the old key's data into the new
+  // key. We also re-enter the loading phase so the load completes
+  // before any save runs.
+  useEffect(() => {
+    setIsLoading(true);
+    setVotes({});
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        setVotes(JSON.parse(stored));
+      }
+    } catch (error) {
+      console.error('[Voting] Error loading votes from localStorage:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [storageKey]);
+
+  // Save votes to localStorage whenever they change
+  useEffect(() => {
+    if (!isLoading) {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(votes));
+      } catch (error) {
+        console.error('[Voting] Error saving votes to localStorage:', error);
+      }
+    }
+  }, [votes, isLoading, storageKey]);
+
+  const getVote = useCallback(
+    (taskId: string): VoteType => {
+      return votes[taskId] || null;
+    },
+    [votes]
+  );
+
+  const toggleVote = useCallback(
+    async (
+      taskId: string,
+      voteType: 'up' | 'down'
+    ): Promise<{ success: boolean; newVote: VoteType; action: 'add' | 'remove' }> => {
+      const currentVote = votes[taskId];
+
+      let newVote: VoteType = null;
+      let action: 'add' | 'remove' = 'add';
+
+      if (currentVote === voteType) {
+        // User clicked same vote - remove it
+        newVote = null;
+        action = 'remove';
+      } else {
+        // User clicked different vote - set it. If they had an opposite
+        // vote, remove that first so the server totals stay consistent.
+        if (currentVote) {
+          await fetch(voteApiEndpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              taskId,
+              voteType: currentVote,
+              action: 'remove',
+            }),
+          }).catch(err => console.error('[Voting] Error removing opposite vote:', err));
+        }
+
+        newVote = voteType;
+        action = 'add';
+      }
+
+      // Optimistic update
+      setVotes(prev => ({
+        ...prev,
+        [taskId]: newVote,
+      }));
+
+      try {
+        const response = await fetch(voteApiEndpoint, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ taskId, voteType, action }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Vote API request failed');
+        }
+
+        return { success: true, newVote, action };
+      } catch (error) {
+        console.error('[Voting] API error:', error);
+
+        // Revert optimistic update on error
+        setVotes(prev => ({
+          ...prev,
+          [taskId]: currentVote,
+        }));
+
+        return { success: false, newVote: currentVote, action };
+      }
+    },
+    [votes, voteApiEndpoint]
+  );
+
+  const clearVotes = useCallback(() => {
+    setVotes({});
+    localStorage.removeItem(storageKey);
+  }, [storageKey]);
+
+  return {
+    votes,
+    isLoading,
+    getVote,
+    toggleVote,
+    clearVotes,
+  };
+}

package/src/components/ui/release-changelog-section.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Badge } from './badge';
 import { ChevronDown } from 'lucide-react';
 import type { ChangelogEntry } from '../../types/product-release';
@@ -10,10 +10,21 @@ interface ReleaseChangelogSectionProps {
   entries: ChangelogEntry[];
   isBreaking?: boolean;
   hideTitle?: boolean;
-  /** When true, section starts collapsed and can be toggled open/closed */
+  /** When true, section starts collapsed and can be toggled open/closed
+   *  via a button on the title row. Mutually exclusive with `previewFirst`. */
   collapsible?: boolean;
   /** Initial collapsed state (only used when collapsible=true). Defaults to true (collapsed). */
   defaultCollapsed?: boolean;
+  /** When true, render the first entry in full and fade-mask the rest
+   *  with a "Show N more / Show less" toggle below the list. Hides the
+   *  fade + toggle when there's only one entry. Mutually exclusive with
+   *  `collapsible` — when both are passed, `collapsible` wins.
+   *
+   *  This is the same progressive-disclosure pattern used on the
+   *  investor-update detail page's Key Highlights / Financial Notes
+   *  sections (formerly a duplicated `FadedHighlightSection` component
+   *  in the hub — unified here). */
+  previewFirst?: boolean;
   /** Optional lucide icon rendered inline before the title text. Matches the
    *  catalog card's changelog-strip icons (Sparkles for Features, Wrench for
    *  Fixes, TrendingUp for Improvements, AlertTriangle for Breaking) — same
@@ -23,6 +34,10 @@ interface ReleaseChangelogSectionProps {
   SimpleMarkdownRenderer: React.ComponentType<{ content: string }>;
 }
 
+// Collapsed height for the preview-first mode. ~120px shows the first
+// entry's title + the start of its description before the mask kicks in.
+const PREVIEW_COLLAPSED_HEIGHT = 120;
+
 export function ReleaseChangelogSection({
   title,
   entries,
@@ -30,13 +45,29 @@ export function ReleaseChangelogSection({
   hideTitle = false,
   collapsible = false,
   defaultCollapsed = true,
+  previewFirst = false,
   icon,
   SimpleMarkdownRenderer
 }: ReleaseChangelogSectionProps) {
   const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
+  const [previewExpanded, setPreviewExpanded] = useState(false);
+  const previewContentRef = useRef<HTMLDivElement>(null);
+
+  // Reset preview-expanded state when the entries set changes — otherwise
+  // a parent that refetches and shrinks entries from N → 1 would leave
+  // the user with a stale "expanded" state and a momentarily-wrong
+  // "Show 0 more" button before the `previewNeedsFade` gate hides it.
+  // Keyed on `entries.length` (not identity) so re-renders with the same
+  // length don't churn state unnecessarily.
+  useEffect(() => {
+    setPreviewExpanded(false);
+  }, [entries.length]);
 
   if (!entries || entries.length === 0) return null;
 
+  // collapsible wins when both flags are passed (documented in JSDoc).
+  const inPreviewMode = previewFirst && !collapsible;
+  const previewNeedsFade = inPreviewMode && entries.length > 1;
   const showEntries = !collapsible || !collapsed;
 
   return (
@@ -68,37 +99,87 @@ export function ReleaseChangelogSection({
         )
       )}
       {showEntries && (
-        <ul className="space-y-6">
-          {entries.map((entry, index) => (
-            <li key={index} className="border-l-2 border-ods-border pl-4 ml-0">
-              {/* Entry title — `text-h3` is body family + BOLD weight (per
-                  ODS tokens: `--font-h3-weight: var(--font-weight-bold)`)
-                  at 14/18px responsive. Same body size as the description
-                  below, distinguished by weight — clean visual hierarchy
-                  without inflating the body scale. */}
-              <p className="text-h3 text-ods-text-primary mb-2">{entry.title}</p>
-              {entry.description && (
-                /* Entry description — body text matches the main release
-                   summary (release-detail-page.tsx:321) at the SAME 14/18px
-                   responsive `text-h4` scale. The `SimpleMarkdownRenderer`
-                   forces its own `<p>` typography
-                   (`text-[16px] md:text-[18px] lg:text-[20px]`) which
-                   overrides the wrapper's `text-h4` on `lg+` viewports and
-                   inflates the changelog body to 20px — larger than the
-                   main summary AND larger than the entry title.
-                   The `[&_p]:!` overrides pin every descendant `<p>` back
-                   to the h4 responsive tokens (`var(--font-size-h4-body)`
-                   + `var(--font-line-space-h4-body)`) — same variables
-                   `text-h4` itself uses, so the responsive breakpoints
-                   stay aligned with the rest of the page. */
-                <div className="text-h4 text-ods-text-primary [&_p]:!text-[length:var(--font-size-h4-body)] [&_p]:!leading-[var(--font-line-space-h4-body)] [&_p]:!font-medium">
-                  <SimpleMarkdownRenderer content={entry.description} />
-                </div>
-              )}
-            </li>
-          ))}
-        </ul>
+        inPreviewMode ? (
+          /* Preview-first mode: render the list in a height-clamped +
+             mask-faded wrapper. The CSS mask creates the soft fade-out
+             at the bottom of the collapsed region; the inline maxHeight
+             + transition animate the open/close. When `previewExpanded`
+             flips, the wrapper falls back to its natural scrollHeight
+             (or 2000px on first render before the ref measures). */
+          <div className="relative">
+            <div
+              ref={previewContentRef}
+              className="overflow-hidden transition-[max-height] duration-500"
+              style={{
+                transitionTimingFunction: 'cubic-bezier(0.33, 1, 0.68, 1)',
+                maxHeight: previewExpanded || !previewNeedsFade
+                  ? previewContentRef.current?.scrollHeight ?? 2000
+                  : PREVIEW_COLLAPSED_HEIGHT,
+                ...(previewNeedsFade && !previewExpanded ? {
+                  maskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)',
+                  WebkitMaskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)',
+                } : {}),
+              }}
+            >
+              <ChangelogEntryList entries={entries} SimpleMarkdownRenderer={SimpleMarkdownRenderer} />
+            </div>
+            {previewNeedsFade && (
+              <button
+                type="button"
+                onClick={() => setPreviewExpanded(!previewExpanded)}
+                className="mt-4 flex items-center gap-1.5 text-sm text-ods-text-secondary hover:text-ods-accent transition-colors duration-200"
+              >
+                <span>{previewExpanded ? 'Show less' : `Show ${entries.length - 1} more`}</span>
+                <ChevronDown
+                  className={`w-3.5 h-3.5 transition-transform duration-300 ${previewExpanded ? 'rotate-180' : ''}`}
+                />
+              </button>
+            )}
+          </div>
+        ) : (
+          <ChangelogEntryList entries={entries} SimpleMarkdownRenderer={SimpleMarkdownRenderer} />
+        )
       )}
     </div>
   );
 }
+
+/**
+ * Internal list renderer — shared by the default and preview-first
+ * branches. Each entry is a bordered-left list item with bold title
+ * + markdown-rendered description body.
+ */
+function ChangelogEntryList({
+  entries,
+  SimpleMarkdownRenderer,
+}: {
+  entries: ChangelogEntry[];
+  SimpleMarkdownRenderer: React.ComponentType<{ content: string }>;
+}) {
+  return (
+    <ul className="space-y-6">
+      {entries.map((entry, index) => (
+        <li key={index} className="border-l-2 border-ods-border pl-4 ml-0">
+          {/* Entry title — `text-h3` is body family + BOLD weight (per
+              ODS tokens: `--font-h3-weight: var(--font-weight-bold)`)
+              at 14/18px responsive. Same body size as the description
+              below, distinguished by weight — clean visual hierarchy
+              without inflating the body scale. */}
+          <p className="text-h3 text-ods-text-primary mb-2">{entry.title}</p>
+          {entry.description && (
+            /* Entry description — body text matches the main release
+               summary at the SAME 14/18px responsive `text-h4` scale.
+               The `SimpleMarkdownRenderer` forces its own `<p>` typography
+               which would override `text-h4` on `lg+` viewports and
+               inflate the changelog body to 20px. The `[&_p]:!` overrides
+               pin every descendant `<p>` back to the h4 responsive tokens
+               so the breakpoints stay aligned with the rest of the page. */
+            <div className="text-h4 text-ods-text-primary [&_p]:!text-[length:var(--font-size-h4-body)] [&_p]:!leading-[var(--font-line-space-h4-body)] [&_p]:!font-medium">
+              <SimpleMarkdownRenderer content={entry.description} />
+            </div>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/types/delivery.ts

@@ -0,0 +1,54 @@
+/**
+ * Delivery (ClickUp Bug-fixes & Enhancements) wire types — shared between the
+ * hub's `/api/delivery*` route shapes and the lib's `DeliveryTable`/`DeliveryLists`/
+ * `DeliverySection` components.
+ *
+ * Lifted from hub `types/delivery.ts` so embedders consuming the lib's
+ * delivery surfaces and the lib's own `ReleaseDetailPage` (which renders
+ * related delivery items) share one canonical shape.
+ */
+
+export interface DeliveryItem {
+  id: string;
+  title: string;
+  description: string;
+  status: string;
+  statusColor: string; // ClickUp status color
+  taskType: 'Request' | 'Bug' | string; // ClickUp task type
+  /**
+   * Canonical ClickUp custom_item_id (1008 = Bug, 1009 = Request, …).
+   * Surfaced here so the chat's compact card can render a type-specific
+   * lucide icon via `TaskTypeIcon` instead of the two-letter initials
+   * fallback. Single source of truth lives in
+   * `lib/utils/clickup-task-type-utils.ts` (hub-side).
+   */
+  customItemId: number | null;
+  /**
+   * Every ClickUp list the task is associated with (home list + ClickUp's
+   * "Tasks in Multiple Lists" locations). UI joins these for display.
+   * Falls back to a single-element array containing the home list when
+   * there are no additional locations.
+   */
+  listNames: string[];
+  dateOpened: number; // Unix timestamp
+  dateUpdated: number; // Unix timestamp
+  dateClosed: number | null; // Unix timestamp or null if not closed
+  clickupUrl: string;
+}
+
+export interface DeliveryResponse {
+  completed: DeliveryItem[];
+  inProgress: DeliveryItem[];
+}
+
+// Task type to badge label mapping
+export const TASK_TYPE_LABELS = {
+  Request: 'ENHANCEMENT',
+  Bug: 'BUG-FIX',
+} as const;
+
+// Task type to badge text-color mapping (ODS attention-red for Bug; default for others)
+export const TASK_TYPE_TEXT_COLORS = {
+  Request: '', // Default white/grey
+  Bug: 'text-[var(--ods-attention-red-error)]',
+} as const;

package/src/types/index.ts

@@ -21,6 +21,7 @@ export * from './customer-interview'
 export * from './customer-interview-ai.types'
 export * from './luma'
 export * from './product-release'
+export * from './delivery'
 export * from './vendor'
 export * from './vendor-links'
 export * from './video-processing'

package/src/utils/dev-sections/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Dev-sections registry barrel.
+ *
+ * `RELEASE_STATUS_OPTIONS` (the hub's old alias) is deliberately NOT
+ * re-exported — embedders that need the release-status options should
+ * import `releaseStatusOptions` from `@flamingo-stack/openframe-frontend-core/types`
+ * directly. That matches lib's existing canonical export name and
+ * avoids one-way alias drift.
+ */
+
+export {
+  OPENFRAME_DEV_SECTIONS,
+  ROADMAP_STATUS_OPTIONS,
+  DELIVERY_TASK_TYPE_OPTIONS,
+  type OpenframeDevSection,
+  type OpenframeDevSectionKey,
+} from './openframe-dev-sections'