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

package/src/components/user-summary-stub.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Image from '../embed-shims/next-image';
-import { getProxiedImageUrl } from '../utils/image-proxy-stub';
+import { useProxiedImageUrl } from './chat/hooks/use-proxied-image-url';
 
 /**
  * NOTE — this is the STUB user summary (see the filename). Five props below are
@@ -90,6 +90,8 @@ export function UserSummary({
   compact = false,
   avatarSize = 40,
 }: Props) {
+  const avatarSrc = useProxiedImageUrl(avatarUrl, { directHttps: false });
+  const mspLogoSrc = useProxiedImageUrl(mspPreview?.logoUrl, { directHttps: false });
   // Compact variant: minimal horizontal row
   if (compact) {
     return (
@@ -97,7 +99,7 @@ export function UserSummary({
         <div className="relative shrink-0">
           {avatarUrl ? (
             <Image
-              src={getProxiedImageUrl(avatarUrl) ?? avatarUrl}
+              src={avatarSrc}
               alt={name}
               width={avatarSize}
               height={avatarSize}
@@ -117,7 +119,7 @@ export function UserSummary({
           )}
           {mspPreview && mspPreview.logoUrl && (
             <Image
-              src={getProxiedImageUrl(mspPreview.logoUrl) ?? mspPreview.logoUrl}
+              src={mspLogoSrc}
               alt={mspPreview.name || 'MSP'}
               width={24}
               height={24}
@@ -153,13 +155,7 @@ export function UserSummary({
         {/* Avatar with badge wrapper */}
         <div className="relative h-24 w-24 shrink-0 overflow-visible">
           {avatarUrl ? (
-            <Image
-              src={getProxiedImageUrl(avatarUrl) ?? avatarUrl}
-              alt={name}
-              width={96}
-              height={96}
-              className="rounded-full object-cover"
-            />
+            <Image src={avatarSrc} alt={name} width={96} height={96} className="rounded-full object-cover" />
           ) : (
             <div className="flex h-full w-full items-center justify-center rounded-full border border-ods-border bg-ods-card font-heading text-3xl text-ods-text-secondary">
               {name.charAt(0).toUpperCase()}
@@ -171,7 +167,7 @@ export function UserSummary({
             <div className="absolute -bottom-1 -right-1 flex size-10 select-none items-center justify-center overflow-hidden rounded-full bg-ods-bg ring-2 ring-ods-border">
               {mspPreview.logoUrl ? (
                 <Image
-                  src={getProxiedImageUrl(mspPreview.logoUrl) ?? mspPreview.logoUrl}
+                  src={mspLogoSrc}
                   alt={mspPreview.name || 'MSP Logo'}
                   width={40}
                   height={40}

package/src/components/vendor-display-button.tsx

@@ -1,8 +1,16 @@
 'use client';
 
 import Image from '../embed-shims/next-image';
-import { getProxiedImageUrl } from '../utils/image-proxy-stub';
+import { TILE_SIZE } from '../styles/component-sizes';
+import { cn } from '../utils/cn';
 import { getVendorLogo, type VendorWithMedia } from '../utils/vendor-media-stub';
+import { useProxiedImageUrl } from './chat/hooks/use-proxied-image-url';
+
+/** The default button's frame, without its surface and hover (a skeleton draws the same box). */
+export const VENDOR_DISPLAY_BUTTON_FRAME_CLASS =
+  'flex max-w-full items-center gap-2 overflow-hidden rounded-lg border border-ods-border px-3 py-2';
+/** The default button's logo box. */
+export const VENDOR_DISPLAY_BUTTON_LOGO_CLASS = `flex ${TILE_SIZE.sm} flex-shrink-0 items-center justify-center rounded-lg`;
 
 interface VendorDisplayButtonProps {
   vendor: VendorWithMedia;
@@ -27,6 +35,7 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
   // `getVendorLogo` three times and assert the third, which is also three
   // chances for the three calls to disagree.
   const logoUrl = getVendorLogo(vendor);
+  const logoSrc = useProxiedImageUrl(logoUrl, { directHttps: false });
 
   // Compact variant
   if (variant === 'compact') {
@@ -38,7 +47,7 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
         {logoUrl ? (
           <div className="h-5 w-5 flex-shrink-0 overflow-hidden rounded">
             <Image
-              src={getProxiedImageUrl(logoUrl) || logoUrl}
+              src={logoSrc}
               alt={`${vendor.title} logo`}
               width={20}
               height={20}
@@ -61,20 +70,14 @@ export function VendorDisplayButton({ vendor, onClick, variant = 'default', exte
   return (
     <button
       onClick={handleClick}
-      className="flex max-w-full items-center gap-2 overflow-hidden rounded-lg border border-ods-border bg-ods-card px-3 py-2 transition-colors hover:border-ods-accent"
+      className={cn(VENDOR_DISPLAY_BUTTON_FRAME_CLASS, 'bg-ods-card transition-colors hover:border-ods-accent')}
     >
       {logoUrl ? (
-        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-card">
-          <Image
-            src={getProxiedImageUrl(logoUrl) || logoUrl}
-            alt={`${vendor.title} logo`}
-            width={24}
-            height={24}
-            className="rounded object-cover"
-          />
+        <div className={cn(VENDOR_DISPLAY_BUTTON_LOGO_CLASS, 'border border-ods-border bg-ods-card')}>
+          <Image src={logoSrc} alt={`${vendor.title} logo`} width={24} height={24} className="rounded object-cover" />
         </div>
       ) : (
-        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-ods-border bg-ods-border">
+        <div className={cn(VENDOR_DISPLAY_BUTTON_LOGO_CLASS, 'border border-ods-border bg-ods-border')}>
           <span className="text-ods-text-primary text-h6">{vendor.title.charAt(0)}</span>
         </div>
       )}

package/src/components/vendor-icon.tsx

@@ -2,8 +2,10 @@
 
 import Image from '../embed-shims/next-image';
 import { cn } from '../utils/cn';
-import { getProxiedImageUrl } from '../utils/image-proxy-stub';
 import { getVendorLogo, type VendorWithMedia } from '../utils/vendor-media-stub';
+import { useProxiedImageUrl } from './chat/hooks/use-proxied-image-url';
+import { UnifiedSkeleton } from './loading/unified-skeleton';
+import { useLoadingScope } from './ui/loading-scope';
 
 interface VendorIconProps {
   vendor: VendorWithMedia & {
@@ -57,6 +59,11 @@ const backgroundClasses = {
   white: 'bg-white border border-[#E5E5E5]',
 };
 
+/** A vendor's logo while it is read: the tile's own box. */
+export function VendorIconSkeleton({ size = 'md', className }: { size?: VendorIconProps['size']; className?: string }) {
+  return <UnifiedSkeleton className={cn(sizeClasses[size], 'flex-shrink-0 rounded-lg', className)} />;
+}
+
 /**
  * Common VendorIcon component for displaying vendor logos consistently across the platform
  * Extracted from vendor-card.tsx for reuse in comparison tables, dropdowns, etc.
@@ -68,7 +75,9 @@ export function VendorIcon({
   showBackground = true,
   backgroundStyle = 'dark',
 }: VendorIconProps) {
+  const loading = useLoadingScope();
   const logoUrl = getVendorLogo(vendor);
+  const logoSrc = useProxiedImageUrl(logoUrl, { directHttps: false });
   const { width, height } = showBackground ? imageSizeMap[size] : { width: tilePxMap[size], height: tilePxMap[size] };
 
   const containerClasses = cn(
@@ -79,11 +88,13 @@ export function VendorIcon({
     className,
   );
 
+  if (loading) return <VendorIconSkeleton size={size} className={className} />;
+
   return (
     <div className={containerClasses}>
       {logoUrl ? (
         <Image
-          src={getProxiedImageUrl(logoUrl) || logoUrl}
+          src={logoSrc}
           alt={`${vendor.title} logo`}
           width={width}
           height={height}

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;