@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.766

package/src/components/vendor-tag.tsx

@@ -6,6 +6,7 @@ import { cn } from '../utils/cn';
 import { formatClassification } from '../utils/format';
 import { type VendorClassificationIconConfig, vendorClassificationCopy } from '../utils/vendor-classification';
 import { resolveIcon } from './chat/utils/icon-library';
+import { MediaSkeleton, TextLineSkeleton } from './loading/unified-skeleton';
 
 export interface VendorTagProps {
   type:
@@ -100,12 +101,25 @@ function classificationTag(
   };
 }
 
+/** The tag's frame and padding per size: read by the tag and by its skeleton. */
+const VENDOR_TAG_FRAME_CLASS = 'flex items-center gap-1.5 whitespace-nowrap rounded border border-ods-border bg-ods-bg';
+const VENDOR_TAG_SIZE_CLASS = { sm: 'px-2 py-1', md: 'px-2.5 py-1.5' } as const;
+/** The label's type step (`text-h5` on the label): the skeleton's bar takes the same step. */
+const VENDOR_TAG_LABEL_TYPE = 'h5';
+
+/** A vendor's tag while it is read: the tag's own frame, an icon box and a bar at the label's type step. */
+export function VendorTagSkeleton({ size = 'md', className }: { size?: 'sm' | 'md'; className?: string }) {
+  return (
+    <div aria-hidden className={cn(VENDOR_TAG_FRAME_CLASS, VENDOR_TAG_SIZE_CLASS[size], className)}>
+      <MediaSkeleton.Icon size="sm" className="shrink-0 rounded-sm" />
+      <TextLineSkeleton type={VENDOR_TAG_LABEL_TYPE} className="w-16" />
+    </div>
+  );
+}
+
 export function VendorTag({ type, text, className = '', hidden = false, size = 'md', accentColor }: VendorTagProps) {
   // Base classes for the tag container
-  const baseClasses = cn(
-    'flex items-center gap-1.5 whitespace-nowrap rounded border border-ods-border bg-ods-bg',
-    size === 'sm' ? 'px-2 py-1' : 'px-2.5 py-1.5',
-  );
+  const baseClasses = cn(VENDOR_TAG_FRAME_CLASS, VENDOR_TAG_SIZE_CLASS[size]);
 
   // Get display text and styling based on type
   const getTagContent = (): { text: string; icon: ReactNode; textColor?: string } => {

package/src/embed-shims/next-image.tsx

@@ -20,8 +20,11 @@
  * code goes through the barrel (`@flamingo-stack/.../embed-shims`).
  */
 'use client';
-import { forwardRef, type ComponentType, type ImgHTMLAttributes, type Ref } from 'react';
+import { forwardRef, type ComponentType, type CSSProperties, type ImgHTMLAttributes, type Ref } from 'react';
 
+import { UnifiedSkeleton } from '../components/loading/unified-skeleton';
+import { useLoadingScope } from '../components/ui/loading-scope';
+import { cn } from '../utils/cn';
 import { fetchPriorityProp } from '../utils/fetch-priority';
 
 type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'placeholder'> & {
@@ -87,7 +90,39 @@ export function resizedImageUrl(src: string, widthPx: number): string {
   return resizer ? resizer(src, widthPx) : src;
 }
 
+/** A size class on the picture's own classes: its width or height comes from CSS, not from its attributes. */
+const SIZED_BY_CLASS = /(?:^|\s)(?:[a-z0-9-]+:)*(?:w|h|size|inset)-(?!auto(?:\s|$))/;
+
+/**
+ * The picture in a loading scope: a box where the picture would be, and nothing fetched. It keeps the picture's
+ * own classes (its size, radius, position) and its proportions (the `width` / `height` it states), so the box is
+ * the size the picture is drawn at.
+ */
+function HeldImage({ className, style, width, height, fill }: ImageProps) {
+  const w = Number(width);
+  const h = Number(height);
+  const ratio = w > 0 && h > 0 ? `${w} / ${h}` : undefined;
+  const boxStyle = fill
+    ? { position: 'absolute' as const, inset: 0, width: '100%', height: '100%', ...style }
+    : { aspectRatio: ratio, width: SIZED_BY_CLASS.test(className ?? '') || !(w > 0) ? undefined : w, ...style };
+  const { width: boxWidth, height: boxHeight, ...rest } = boxStyle as CSSProperties;
+  return (
+    <UnifiedSkeleton
+      as="span"
+      variant="rectangular"
+      width={boxWidth}
+      height={boxHeight}
+      // The picture's own classes last, so its size and radius win over the skeleton's defaults.
+      className={cn('inline-block h-auto w-auto max-w-full', className)}
+      style={{ ...rest, objectFit: undefined, objectPosition: undefined }}
+    />
+  );
+}
+
 const Image = forwardRef<HTMLImageElement, ImageProps>(function NextImageShim({ optimizedWidth, ...given }, ref) {
+  // In a loading scope the picture is a box of its own size, and it is not fetched.
+  const held = useLoadingScope();
+  if (held) return <HeldImage {...given} />;
   // A picture asked for at a width is the host resizer's URL, drawn as it comes.
   const props: ImageProps =
     optimizedWidth && resizer && typeof given.src === 'string'

package/src/hooks/state/flatten-schema.ts

@@ -174,7 +174,3 @@ export function getRequiredParams(schema: Record<string, FlattenedParam>): strin
     .filter(([_, param]) => param.required)
     .map(([key]) => key);
 }
-
-// THE omission rule lives in the search-params leaf (the server serializer and
-// this flattened-schema path must agree); re-exported for existing importers.
-export { shouldIncludeInUrl } from '../../utils/search-params';

package/src/hooks/state/index.ts

@@ -22,8 +22,10 @@
 export { useQueryParams } from './use-query-params';
 export type { UseQueryParamsOptions, UseQueryParamsReturn } from './use-query-params';
 
-export { useApiParams, createSearchParams } from './use-api-params';
-export type { ParamSchema, UseApiParamsOptions, UseApiParamsReturn } from './use-api-params';
+export { useApiParams } from './use-api-params';
+export { createSearchParams } from '../../utils/search-params';
+export type { UseApiParamsOptions, UseApiParamsReturn } from './use-api-params';
+export type { ParamSchema } from '../../utils/search-params';
 
 // Introspection
 export { introspector, GraphQLIntrospector } from './introspection';
@@ -48,8 +50,8 @@ export {
   validateSchema,
   getArrayParams,
   getRequiredParams,
-  shouldIncludeInUrl,
 } from './flatten-schema';
+export { shouldIncludeInUrl } from '../../utils/search-params';
 
 export {
   urlParamsToVariables,

package/src/hooks/state/url-converter.ts

@@ -5,9 +5,9 @@
  * Handles type coercion, nested paths, and array parameters.
  */
 
-import { positiveInt } from '../../utils/search-params';
+import { positiveInt, shouldIncludeInUrl } from '../../utils/search-params';
 import type { JSType } from '../../utils/search-params';
-import { type FlattenedParam, shouldIncludeInUrl } from './flatten-schema';
+import type { FlattenedParam } from './flatten-schema';
 
 /** A single URL-decodable value. */
 export type UrlScalar = string | number | boolean | null;

package/src/hooks/state/use-api-params.ts

@@ -22,7 +22,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter, useSearchParams } from '../../embed-shims/next-navigation';
 import { createSearchParams, parseSchemaParams, type ParamSchema, type JSType } from '../../utils/search-params';
-import { type FlattenedParam, shouldIncludeInUrl } from './flatten-schema';
+import { shouldIncludeInUrl } from '../../utils/search-params';
+import type { FlattenedParam } from './flatten-schema';
 
 /**
  * Returns the previous reference if the JSON-serialized content of `value`
@@ -117,11 +118,6 @@ type OutputTypeForJSType<T extends JSType> = OutputTypeMap[T];
  */
 type InputTypeForJSType<T extends JSType> = InputTypeMap[T];
 
-// Schema types + the schema helper live in the search-params leaf, so the hook's
-// `params` ARE the same parsed contract a server route produces for that URL.
-export type { ParamConfig, ParamSchema } from '../../utils/search-params';
-export { defineParamSchema } from '../../utils/search-params';
-
 /**
  * Options for useApiParams hook
  */
@@ -517,7 +513,3 @@ export function useApiParams<TSchema extends ParamSchema>(
     resetParams,
   };
 }
-
-// THE serializer lives in the search-params leaf (one array/object/omission
-// rule for the hook and for server code); re-exported for existing importers.
-export { createSearchParams } from '../../utils/search-params';

package/src/hooks/ui/index.ts

@@ -36,3 +36,4 @@ export * from './use-active-section';
 export * from './use-nav-menus';
 export * from './use-visitor-os';
 export * from './use-resumable-timeout';
+export type { OnboardingState } from '../../utils/onboarding-storage';

package/src/hooks/ui/use-image-edge-color.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { useLoadingScope } from '../../components/ui/loading-scope';
 import { resizedImageUrl } from '../../embed-shims/next-image';
 
 /** The sample is drawn 100px at most, so that is all of the picture that is downloaded. */
@@ -100,7 +101,9 @@ function extractEdgeColor(img: HTMLImageElement): string {
  * @param fallback - Fallback color if extraction fails (default: '#000000')
  * @returns CSS color string (e.g., 'rgb(34, 28, 22)')
  */
-export function useImageEdgeColor(imageUrl: string | undefined | null, fallback = '#000000'): string {
+export function useImageEdgeColor(givenUrl: string | undefined | null, fallback = '#000000'): string {
+  // In a loading scope the picture is not drawn, so its colour is not sampled.
+  const imageUrl = useLoadingScope() ? null : givenUrl;
   const [color, setColor] = useState(fallback);
 
   // Losing the url (or being given a different fallback) is a prop-driven

package/src/hooks/ui/use-onboarding-state.ts

@@ -25,8 +25,6 @@ export interface OnboardingStepConfig {
   checkComplete?: () => boolean | Promise<boolean>;
 }
 
-export type { OnboardingState };
-
 /**
  * Hook for managing onboarding state with localStorage persistence
  * Uses simple storage utilities for atomic updates and reliable re-renders

package/src/hooks/use-downloads.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useSyncExternalStore } from 'react';
+import { useLoadingScope } from '../components/ui/loading-scope';
 import { DOWNLOADS_API_PATH, type AppDownload, type DownloadsPublic } from '../types/downloads';
 import { contentFetch } from '../utils/embed-content-fetch';
 import { desktopOsOf } from '../utils/visitor-os';
@@ -78,7 +79,14 @@ export interface UseDownloadsOptions {
  * environment; no client holds a copy of its own. Every caller on a page shares
  * one request.
  */
-export function useDownloads({ endpoint = DOWNLOADS_API_PATH, initialData, enabled = true }: UseDownloadsOptions = {}) {
+export function useDownloads({
+  endpoint = DOWNLOADS_API_PATH,
+  initialData,
+  enabled: enabledGiven = true,
+}: UseDownloadsOptions = {}) {
+  // In a loading scope nothing is asked for.
+  const held = useLoadingScope();
+  const enabled = enabledGiven && !held;
   const entry = entryFor(endpoint);
   // A server copy is the answer: held from the first render (server and client alike), and never re-requested.
   // Written during render so THIS caller's first paint has it; a render cannot notify other callers.

package/src/hooks/use-meeting-booking.ts

@@ -2,6 +2,7 @@
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useLoadingScope } from '../components/ui/loading-scope';
 import {
   MEETING_BOOKING_ERROR_CODES,
   type BookingConfirmation,
@@ -93,6 +94,8 @@ export function useMeetingBooking(options: {
   }, [meetingId]);
 
   // The SSR seed covers exactly one (link, month) cell of the cache.
+  // In a loading scope nothing is fetched: the scheduler's components draw their skeletons there.
+  const inScope = useLoadingScope();
   const seed =
     initialAvailability?.meetingId === meetingId && initialAvailability.monthOffset === monthOffset
       ? initialAvailability
@@ -107,6 +110,7 @@ export function useMeetingBooking(options: {
       return (await res.json()) as MeetingAvailability;
     },
     staleTime: AVAILABILITY_STALE_MS,
+    enabled: !inScope,
     initialData: seed,
     // Stamped as infinitely old on purpose: the seed is first-paint
     // scaffolding for a 60-second-volatile resource, not truth, so it paints

package/src/hooks/use-self-fetch.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState, type Dispatch, type SetStateAction } from 'react';
+import { useLoadingScope } from '../components/ui/loading-scope';
 import { contentFetch } from '../utils/embed-content-fetch';
 
 export interface UseSelfFetchResult<T> {
@@ -45,14 +46,21 @@ export interface UseSelfFetchResult<T> {
  * url string (the url IS the cache key).
  */
 export function useSelfFetch<T>(
-  url: string | null,
+  givenUrl: string | null,
   options?: { initialData?: T; revalidateOnVisibleAfterMs?: number },
 ): UseSelfFetchResult<T> {
+  // In a loading scope nothing is fetched: the view draws itself with the data it was given (its loading state
+  // when it was given none).
+  const held = useLoadingScope();
+  const url = held ? null : givenUrl;
   const initialData = options?.initialData;
   const revalidateOnVisibleAfterMs = options?.revalidateOnVisibleAfterMs;
   const [data, setData] = useState<T | null>(initialData ?? null);
-  const [dataUrl, setDataUrl] = useState<string | null>(initialData !== undefined ? url : null);
-  const [isLoading, setIsLoading] = useState(initialData === undefined && url !== null);
+  const [dataUrl, setDataUrl] = useState<string | null>(initialData !== undefined ? givenUrl : null);
+  // From `givenUrl`, not the held `url`, on purpose: a view held in a loading scope with no data IS loading
+  // (callers such as RoadmapView draw their skeleton from `isLoading && !data`). When the scope ends, `url` becomes
+  // `givenUrl` and the fetch below settles it.
+  const [isLoading, setIsLoading] = useState(initialData === undefined && givenUrl !== null);
   const [error, setError] = useState(false);
   const [reloadKey, setReloadKey] = useState(0);
   // When the held data was obtained: seeded at mount for SSR-hydrated data,
@@ -67,7 +75,7 @@ export function useSelfFetch<T>(
   // rendered data isn't re-fetched on mount). A VALUE compare (not a one-shot flag) so the
   // SSR-hydration skip survives React 18 StrictMode's mount→unmount→remount in dev;
   // `reload()` nulls it to force a re-fetch of the same url.
-  const dataUrlRef = useRef<string | null>(initialData !== undefined ? url : null);
+  const dataUrlRef = useRef<string | null>(initialData !== undefined ? givenUrl : null);
 
   // Both resets below are prop-driven, so they use React's "adjust state while
   // rendering" pattern rather than an effect. From an effect each one commits a

package/src/nats/index.ts

@@ -2,3 +2,4 @@ export * from './nats';
 export * from './shared-connection';
 export * from './nats-provider';
 export * from './use-nats-subscription';
+export type { JsMsg, Msg, Subscription } from 'nats.ws';

package/src/nats/nats-provider.tsx

@@ -10,8 +10,6 @@ import {
   type NatsReconnectionBackoff,
 } from './shared-connection';
 
-export type { NatsReconnectionBackoff } from './shared-connection';
-
 export interface NatsProviderProps {
   children: ReactNode;
   /** Return the current NATS WebSocket URL (or null when not yet available, e.g. unauthenticated). */

package/src/nats/nats.ts

@@ -12,8 +12,6 @@ import type {
   Subscription,
 } from 'nats.ws';
 
-export type { JsMsg, Msg, Subscription } from 'nats.ws';
-
 export type JetStreamDeliverPolicy = 'new' | 'byStartSequence';
 
 export interface JetStreamOrderedSubscribeOptions {

package/src/nats/use-nats-subscription.ts

@@ -1,7 +1,8 @@
 'use client';
 
+import type { JsMsg, Msg } from 'nats.ws';
 import { useRef, useEffect, useState, useCallback } from 'react';
-import type { JsMsg, Msg, NatsSubscribeOptions } from './nats';
+import type { NatsSubscribeOptions } from './nats';
 import { useOptionalNats } from './nats-provider';
 
 export interface UseNatsSubscriptionOptions extends NatsSubscribeOptions {

package/src/schemas/meeting-booking-schema.ts

@@ -432,6 +432,17 @@ export function normalizeFormField(
   return normalized;
 }
 
+/**
+ * Whether the form asks a question the link declares: a required one always, an optional one when the host's
+ * `optionalFields` names it (or names none). THE rule; a host that answers a question outside the form reads it.
+ */
+export function bookingFormAsks(
+  field: { name: string; required?: boolean },
+  optionalFields: readonly string[] | undefined,
+): boolean {
+  return Boolean(field.required) || !optionalFields || optionalFields.includes(field.name);
+}
+
 /** The questions the native form draws and validates, in declared order. */
 export function normalizeFormFields(fields: readonly MeetingFormField[]): SupportedMeetingFormField[] {
   return fields.flatMap(f => normalizeFormField(f) ?? []);

package/src/styles/component-sizes.ts

@@ -0,0 +1,105 @@
+/**
+ * THE sizes of the library's components, the one place each is written. A component and its loading skeleton read
+ * the same entry, so the two are one size at every width; a per-file copy of a size (or a height computed by hand in
+ * pixels) is what drifted before. Layout (frames, gaps, borders, radii) stays beside its component; only SIZES live
+ * here.
+ *
+ * Every value is a static Tailwind class string (Tailwind finds classes by scanning source, so a class is never built
+ * from parts). Import-free, so a server module or a config can read it too.
+ */
+
+/**
+ * A box that keeps N lines of its OWN text class whatever its content's length: `lh` is the element's computed line
+ * height, so the minimum follows the class at every breakpoint. Put the text class (`text-h3`, `text-h6`…) on the SAME
+ * element, never a pixel height worked out from today's line height.
+ */
+export const TEXT_LINES_MIN = {
+  1: 'min-h-[1lh]',
+  2: 'min-h-[2lh]',
+  3: 'min-h-[3lh]',
+} as const;
+
+/** A box exactly N lines of its own text class tall (a text skeleton's lines). Past 6, set the height inline in `lh`. */
+export const TEXT_LINES_HEIGHT = {
+  1: 'h-[1lh]',
+  2: 'h-[2lh]',
+  3: 'h-[3lh]',
+  4: 'h-[4lh]',
+  5: 'h-[5lh]',
+  6: 'h-[6lh]',
+} as const;
+
+/** A cover or media box's shape. `og`: the 1200×630 link-preview card every content cover is cut to. */
+export const MEDIA_ASPECT = {
+  og: 'aspect-[1200/630]',
+  video: 'aspect-video',
+  square: 'aspect-square',
+  photo: 'aspect-[3/2]',
+} as const;
+
+/**
+ * An avatar's box (a person's photo or an organisation's logo): ONE scale, read by `SquareAvatar`, by every avatar
+ * drawn by hand and by every skeleton that stands in for one. `byline` and `profile` are the article byline's and the
+ * profile header's.
+ */
+export const AVATAR_SIZE = {
+  xs: 'h-6 w-6',
+  sm: 'h-8 w-8',
+  md: 'h-10 w-10',
+  lg: 'h-12 w-12',
+  byline: 'h-14 w-14',
+  xl: 'h-16 w-16',
+  profile: 'h-24 w-24',
+} as const;
+
+/** The same scale in pixels, for an image's intrinsic `width`/`height` attributes (layout comes from the class). */
+export const AVATAR_SIZE_PX = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  byline: 56,
+  xl: 64,
+  profile: 96,
+} as const satisfies Record<keyof typeof AVATAR_SIZE, number>;
+
+export type AvatarSize = keyof typeof AVATAR_SIZE;
+
+/** A glyph drawn in a line of text or a control (an icon, a mark, a check). `step`: one step up from `md`. */
+export const ICON_SIZE = {
+  xs: 'size-3',
+  sm: 'size-4',
+  md: 'size-5',
+  lg: 'size-6',
+  step: 'size-5 md:size-6',
+} as const;
+
+/** A dot (a status light, a live indicator). */
+export const DOT_SIZE = {
+  sm: 'size-2',
+  md: 'size-3',
+} as const;
+
+/**
+ * A square tile that holds an icon, a logo, a QR code or a thumbnail. `entity`: an entity's logo beside its name;
+ * `touch`: a tap target (44px on a phone, 48px from `md`); `qr`: a scannable code.
+ */
+export const TILE_SIZE = {
+  sm: 'size-8',
+  md: 'size-9',
+  lg: 'size-10',
+  xl: 'size-12',
+  thumb: 'size-14',
+  feature: 'size-16',
+  entity: 'size-[52px] content-md:size-[60px]',
+  touch: 'size-11 md:size-12',
+  qr: 'size-36',
+} as const;
+
+/** A form control's own box. */
+export const CONTROL_SIZE = {
+  checkbox: 'size-4',
+  selection: 'size-6',
+  /** A textarea's least height: four rows of its `text-h4` (one row of it is the vertical padding). */
+  textarea: 'min-h-[96px]',
+} as const;

package/src/types/announcement.ts

@@ -252,9 +252,6 @@ export interface AnnouncementValidation {
   };
 }
 
-// Import unified platform configuration (removed duplicate definition)
-export type { PlatformConfig } from './platform';
-
 // Component Props Types
 export interface AnnouncementBarProps {
   /**

package/src/types/blog.ts

@@ -200,10 +200,6 @@ export interface BlogPostStats {
   recent_posts: BlogPost[];
 }
 
-// Import unified platform configuration (removed duplicate definition)
-// PLATFORM_CONFIGS removed - all platform data now comes from database via getPlatformsConfig()
-export type { PlatformConfig } from './platform';
-
 // SEO Analysis Types
 export interface SEOAnalysisResult {
   overall_score: number;

package/src/types/case-study.ts

@@ -2,12 +2,12 @@
 // Following the blog.ts pattern for consistency
 
 import type { BlogTag, TagAssoc } from './blog';
-import type { VideoTeaser, CustomerInterview } from './customer-interview';
+import type { CustomerInterview } from './customer-interview';
 import type { EntityPlatformAssoc } from './entity-platform';
 import type { PlatformRecord } from './platform';
 import type { MSP } from './stack';
 import type { UserProfile } from './user';
-import type { EntityQuote } from './video-processing';
+import type { VideoTeaser, EntityQuote } from './video-processing';
 
 /**
  * One headline number of a story ("50%" / "of routine tasks automated"). A

package/src/types/customer-interview-ai.types.ts

@@ -5,7 +5,7 @@
  * transcription, summarization, and video clip extraction.
  */
 
-import type { Speaker, VideoClip } from './customer-interview';
+import type { Speaker, VideoClip } from './video-processing';
 
 // ============================================================================
 // Status Types
@@ -216,6 +216,3 @@ export interface VideoAIConfig {
     retryAttempts: number;
   };
 }
-
-// Re-export types from customer-interview for convenience
-export type { Speaker, VideoClip } from './customer-interview';

package/src/types/customer-interview.ts

@@ -6,17 +6,6 @@ import type { EntityPlatformAssoc } from './entity-platform';
 import type { PlatformRecord } from './platform';
 import type { MSP } from './stack';
 import type { UserProfile } from './user';
-
-// Re-export shared video processing types for backwards compatibility
-export type {
-  VideoTeaser,
-  Speaker,
-  VideoClip,
-  TranscriptWord,
-  SpeakerMapping,
-  ExcludedRange,
-  EntityQuote,
-} from './video-processing';
 import type {
   EntityQuote,
   VideoTeaser,

package/src/types/index.ts

@@ -80,3 +80,5 @@ export * from './access-code-cohorts';
 export * from './icons';
 export * from './permissions';
 export * from './tmcg';
+export type { PlatformConfig } from './platform';
+export type { RealCategory } from './categories';

package/src/types/product-release.ts

@@ -1,7 +1,7 @@
+import type { BlogTag, TagAssoc } from './blog';
 // Product Release Types
 // Following the blog.ts pattern for consistency
-
-import type { BlogTag, TagAssoc } from './blog';
+import type { DataSync } from './data-sync';
 import type { EntityAuthor } from './entity-author';
 import type { PlatformRecord } from './platform';
 import type { VideoTeaser, TranscriptWord, SpeakerMapping } from './video-processing';
@@ -245,6 +245,8 @@ export interface ProductReleaseFilters {
 export interface ProductReleaseListResponse {
   data: ProductRelease[];
   count: number;
+  /** Where the releases are mirrored from, when the host states it (the page's sync line). */
+  sync?: DataSync | null;
 }
 
 // GitHub Release interface (for wizard)

package/src/types/stack.ts

@@ -1,5 +1,4 @@
 import type { RealCategory } from './categories';
-import type { UserProfile } from './user';
 import type { Vendor, VendorPricing } from './vendor';
 
 // Selection source enum – indicates whether the vendor selection was AI-generated or manually selected
@@ -161,9 +160,6 @@ export interface StackTemplate {
   updated_at: string;
 }
 
-// Export types for external use
-export type { UserProfile, Vendor, VendorPricing, RealCategory };
-
 // Cost calculation interfaces (use slugs for identification)
 export interface StackCostCalculation {
   /** Total cost of all current vendors (commercial or OSS) */

package/src/utils/announcement-storage.ts

@@ -33,13 +33,6 @@ export function announcementDismissCookieName(platform: string): string {
   return `${platform}-announcement-dismissed`;
 }
 
-/** THE dismissal match rule (id-match, not presence), shared across the
- *  server/client boundary. `undefined` id (no active announcement) → false. */
-// The match rule + cookie IO live in `utils/dismiss-cookie.ts` — shared with
-// every other dismissible surface. Re-exported so existing importers (incl. the
-// hub's SSR layout) keep their import path.
-export { isDismissedCookieValue } from './dismiss-cookie';
-
 const legacyDismissKey = (platform: string, id: string) => `${platform}-announcement-${id}-dismissed`;
 
 /** Persist a dismissal (1 year). The SSR layout sees it on the next request —

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

@@ -72,6 +72,12 @@ export interface OpenframeDevSection {
     title: string;
     description: string;
   };
+  /**
+   * The section's records are mirrored from another system (ClickUp, HubSpot), so its list states where they are
+   * synced from: the page's sync line is drawn, loading and loaded. `false` for records the host authors itself
+   * (releases, onboarding guides): no line is drawn while loading, so a page that states none never loses a row.
+   */
+  mirrored: boolean;
   /** Inline search bar configuration. */
   search: {
     /** Placeholder text shown in the search input. */
@@ -101,6 +107,7 @@ export interface OpenframeDevSection {
 
 export const OPENFRAME_DEV_SECTIONS = {
   roadmap: {
+    mirrored: true,
     href: '/roadmap',
     icon: MapIcon,
     navigator: {
@@ -121,6 +128,7 @@ export const OPENFRAME_DEV_SECTIONS = {
     },
   },
   delivery: {
+    mirrored: true,
     href: '/bug-fixes-and-enhancements',
     icon: Wrench,
     navigator: {
@@ -141,6 +149,7 @@ export const OPENFRAME_DEV_SECTIONS = {
     },
   },
   releases: {
+    mirrored: false,
     href: '/releases',
     icon: Rocket,
     navigator: {
@@ -161,6 +170,7 @@ export const OPENFRAME_DEV_SECTIONS = {
     },
   },
   onboarding: {
+    mirrored: false,
     href: '/onboarding-guides',
     icon: GraduationCap,
     navigator: {
@@ -183,6 +193,7 @@ export const OPENFRAME_DEV_SECTIONS = {
     filter: null,
   },
   tickets: {
+    mirrored: true,
     href: '/tickets',
     icon: LifeBuoy,
     navigator: {