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

package/src/components/meeting-scheduler/modal-header.tsx

@@ -3,8 +3,11 @@
 import type { MeetingHost } from '../../schemas/meeting-booking-schema';
 import { cn } from '../../utils/cn';
 import { formatDurationCompact } from '../../utils/format';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { SquareAvatar, AvatarStack, Button } from '../ui';
+import { AutocompleteSkeleton } from '../ui/autocomplete';
+import { useLoadingScope } from '../ui/loading-scope';
+import { SquareAvatarSkeleton } from '../ui/square-avatar';
 import { TimezoneSelect } from '../ui/timezone-select';
 
 /**
@@ -28,11 +31,19 @@ export interface SchedulerModalHeaderProps {
   disabled?: boolean;
   /** Whether the timezone row renders (not on the confirmation). */
   showTimezone?: boolean;
+  /** The meeting is read on the client and has not arrived: the header draws its skeleton, as in a loading scope. */
+  loading?: boolean;
 }
 
 const ROW_CLASS = 'border-b border-ods-border p-[var(--spacing-system-m)]';
 const STRIP_CLASS = cn(ROW_CLASS, 'flex items-center justify-between gap-[var(--spacing-system-m)]');
 const FIELD_LABEL_CLASS = 'text-h4 text-ods-text-primary';
+const TIMEZONE_ROW_CLASS = cn(ROW_CLASS, 'flex flex-col gap-[var(--spacing-system-xxs)]');
+/** The host list, one host's row and its text column, read by the header and by its skeleton. */
+const HOST_LIST_CLASS = 'flex min-w-0 flex-col gap-[var(--spacing-system-s)]';
+const HOST_ROW_CLASS = 'flex items-center gap-[var(--spacing-system-xs)]';
+const HOST_TEXT_CLASS = 'flex min-w-0 flex-col';
+const DURATION_LINE_CLASS = 'shrink-0 text-ods-text-secondary text-h6';
 
 function HostIdentity({ hosts }: { hosts: MeetingHost[] }) {
   if (hosts.length === 0) return null;
@@ -45,9 +56,9 @@ function HostIdentity({ hosts }: { hosts: MeetingHost[] }) {
     );
   }
   return (
-    <div className="flex min-w-0 flex-col gap-[var(--spacing-system-s)]">
+    <div className={HOST_LIST_CLASS}>
       {hosts.map(host => (
-        <div key={host.name} className="flex items-center gap-[var(--spacing-system-xs)]">
+        <div key={host.name} className={HOST_ROW_CLASS}>
           <SquareAvatar
             variant="round"
             size="sm"
@@ -55,7 +66,7 @@ function HostIdentity({ hosts }: { hosts: MeetingHost[] }) {
             alt={host.name}
             fallback={host.name}
           />
-          <div className="flex min-w-0 flex-col">
+          <div className={HOST_TEXT_CLASS}>
             <p className="truncate text-ods-text-primary text-h4">{host.name}</p>
             {host.title && <p className="truncate text-ods-text-secondary text-h6">{host.title}</p>}
           </div>
@@ -75,8 +86,11 @@ export function SchedulerModalHeader({
   locked = false,
   disabled = false,
   showTimezone = true,
+  loading = false,
 }: SchedulerModalHeaderProps) {
   const chips = !locked && durationsMs.length > 1;
+  // While the meeting is read the header is its skeleton (the hosts and durations are read data).
+  if (useLoadingScope() || loading) return <SchedulerModalHeaderSkeleton showTimezone={showTimezone} />;
   return (
     <>
       <div className={STRIP_CLASS}>
@@ -97,50 +111,50 @@ export function SchedulerModalHeader({
           </div>
         ) : (
           selectedDurationMs != null && (
-            <p className="shrink-0 text-ods-text-secondary text-h6">
-              {formatDurationCompact(selectedDurationMs / 1000)} call
-            </p>
+            <p className={DURATION_LINE_CLASS}>{formatDurationCompact(selectedDurationMs / 1000)} call</p>
           )
         )}
       </div>
       {showTimezone && (
-        <div className={cn(ROW_CLASS, 'flex flex-col gap-[var(--spacing-system-xxs)]')}>
+        <div className={TIMEZONE_ROW_CLASS}>
           <p className={FIELD_LABEL_CLASS}>Timezone</p>
-          {timezone ? (
-            <TimezoneSelect
-              value={timezone}
-              disabled={disabled}
-              onChange={tz => {
-                if (tz) onTimezoneChange?.(tz);
-              }}
-            />
-          ) : (
-            <UnifiedSkeleton className="h-12 w-full" />
-          )}
+          {/* The zone resolves after mount: until then the picker draws its own skeleton. */}
+          <TimezoneSelect
+            value={timezone}
+            loading={!timezone}
+            disabled={disabled}
+            onChange={tz => {
+              if (tz) onTimezoneChange?.(tz);
+            }}
+          />
         </div>
       )}
     </>
   );
 }
 
-/** Same footprint as the loaded header, for the cold load. */
-export function SchedulerModalHeaderSkeleton() {
+/** Same footprint as the loaded header, for the cold load: "Timezone" real, one host and the length as bars. */
+export function SchedulerModalHeaderSkeleton({ showTimezone = true }: { showTimezone?: boolean } = {}) {
   return (
     <>
       <div className={STRIP_CLASS}>
-        <div className="flex items-center gap-[var(--spacing-system-xs)]">
-          <UnifiedSkeleton className="h-8 w-8 shrink-0 rounded-full" />
-          <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
-            <UnifiedSkeleton className="h-5 w-32" />
-            <UnifiedSkeleton className="h-4 w-24" />
+        <div className={HOST_LIST_CLASS}>
+          <div className={HOST_ROW_CLASS}>
+            <SquareAvatarSkeleton variant="round" size="sm" />
+            <div className={HOST_TEXT_CLASS}>
+              <TextLineSkeleton type="h4" className="w-32" />
+              <TextLineSkeleton type="h6" className="w-24" />
+            </div>
           </div>
         </div>
-        <UnifiedSkeleton className="h-4 w-20 shrink-0" />
-      </div>
-      <div className={cn(ROW_CLASS, 'flex flex-col gap-[var(--spacing-system-xxs)]')}>
-        <p className={FIELD_LABEL_CLASS}>Timezone</p>
-        <UnifiedSkeleton className="h-12 w-full" />
+        <TextLineSkeleton type="h6" className={cn(DURATION_LINE_CLASS, 'w-20')} />
       </div>
+      {showTimezone && (
+        <div className={TIMEZONE_ROW_CLASS}>
+          <p className={FIELD_LABEL_CLASS}>Timezone</p>
+          <AutocompleteSkeleton />
+        </div>
+      )}
     </>
   );
 }

package/src/components/meeting-scheduler/slot-picker.tsx

@@ -5,8 +5,9 @@ import { useCallback, useMemo } from 'react';
 import { cn } from '../../utils/cn';
 import { formatDateWithTimezone, formatTimeWithTimezone, VIEWER_TIMEZONE } from '../../utils/format';
 import { MAX_MONTH_OFFSET } from '../../utils/hubspot-meetings-convention';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button, DatePickerCalendar } from '../ui';
+import { useLoadingScope } from '../ui/loading-scope';
 
 /**
  * SlotPicker — day layer + time-chip grid for the meeting scheduler.
@@ -59,8 +60,8 @@ export interface SlotPickerProps {
   slots: number[];
   /** Column layout; `card` unless the host says otherwise. */
   layout?: SlotPickerLayout;
-  /** IANA zone every label renders in (parent resolves post-mount). */
-  timezone: string;
+  /** IANA zone every label renders in (parent resolves post-mount; null until then, which draws the skeleton). */
+  timezone: string | null;
   monthOffset: number;
   onMonthOffsetChange: (offset: number) => void;
   selectedSlot: number | null;
@@ -76,6 +77,11 @@ export interface SlotPickerProps {
    * the visitor can see WHICH time is being booked.
    */
   isSubmitting?: boolean;
+  /**
+   * The availability (or the duration and zone it is read for) has not arrived: the whole picker draws its
+   * skeleton, as in a loading scope. DISTINCT from `isLoading`, a month refetch under a mounted picker.
+   */
+  loading?: boolean;
 }
 
 /** Stable per-zone day key for an instant, e.g. "2026-08-14" (exported — the
@@ -351,22 +357,22 @@ export function SlotPickerSkeleton({
             : cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 content-md:flex-1')
         }
       >
-        <TimeChipsSkeleton />
+        <TimeChipsSkeleton layout={layout} />
       </div>
     </div>
   );
 }
 
 /** Same-footprint skeleton for the time-chip column. */
-export function TimeChipsSkeleton() {
+export function TimeChipsSkeleton({ layout = 'card' }: { layout?: SlotPickerLayout } = {}) {
   return (
     <>
       {/* The day label is data — but it is held inside the REAL heading line
           box, so the skeleton's first row sits exactly where the label lands. */}
       <div className={COLUMN_HEADING_CLASS}>
-        <UnifiedSkeleton className="inline-block h-4 w-40 align-middle" />
+        <TextLineSkeleton type="h4" className="w-40" />
       </div>
-      <div className={CHIP_GRID_CLASS}>
+      <div className={layout === 'modal' ? MODAL_CHIP_GRID_CLASS : CHIP_GRID_CLASS}>
         {/* Enough to fill the visible scroll box at any column count — the
             grid's track count follows the card width, so no fixed number
             lands flush and a partial last row is the honest shape anyway. */}
@@ -391,9 +397,12 @@ export function SlotPicker({
   onSelectDay,
   isLoading = false,
   isSubmitting = false,
+  loading = false,
 }: SlotPickerProps) {
+  const inScope = useLoadingScope() || loading;
   const slotsByDay = useMemo(() => {
     const map = new Map<string, number[]>();
+    if (timezone == null) return map;
     for (const ms of slots) {
       const key = dayKeyInZone(ms, timezone);
       const list = map.get(key) ?? [];
@@ -418,6 +427,9 @@ export function SlotPicker({
   const monthHasSlots = [...slotsByDay.keys()].some(key => key.startsWith(monthPrefix));
 
   const modal = layout === 'modal';
+  // While the availability (or the zone it is shown in) is read the picker is its skeleton: the calendar real, the
+  // times as chip boxes.
+  if (inScope || timezone == null) return <SlotPickerSkeleton monthOffset={monthOffset} layout={layout} />;
   return (
     <div className={modal ? MODAL_ROW_CLASS : SLOT_ROW_CLASS}>
       <div
@@ -446,7 +458,7 @@ export function SlotPicker({
         }
       >
         {isLoading ? (
-          <TimeChipsSkeleton />
+          <TimeChipsSkeleton layout={layout} />
         ) : selectedDay ? (
           <>
             <p className={COLUMN_HEADING_CLASS}>

package/src/components/metric-value.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { cn } from '../utils/cn';
+import { TextLineSkeleton } from './loading/unified-skeleton';
+import { useLoadingScope } from './ui/loading-scope';
 
 interface MetricValueProps {
   value: string | number;
@@ -8,15 +10,30 @@ interface MetricValueProps {
   className?: string;
 }
 
+/** The value's layout, read by the value and by its skeleton, so the skeleton is the value's size. */
+const METRIC_VALUE_CLASS = 'flex items-end gap-2 whitespace-nowrap text-ods-text-primary text-h4';
+const METRIC_LABEL_CLASS = 'text-ods-text-secondary text-h6';
+
 /**
  * Displays a numeric/short textual value followed by a smaller grey label.
  * Example: 30s Generation Time
  */
 export function MetricValue({ value, label, className }: MetricValueProps) {
+  if (useLoadingScope()) return <MetricValueSkeleton label={label} className={className} />;
   return (
-    <div className={cn('flex items-end gap-2 whitespace-nowrap text-ods-text-primary text-h4', className)}>
+    <div className={cn(METRIC_VALUE_CLASS, className)}>
       {value}
-      <span className="text-ods-text-secondary text-h6">{label}</span>
+      <span className={METRIC_LABEL_CLASS}>{label}</span>
+    </div>
+  );
+}
+
+/** A value while it is read: a bar at the value's type step, the label (the page's own words) drawn as it is. */
+export function MetricValueSkeleton({ label, className }: { label: string; className?: string }) {
+  return (
+    <div className={cn(METRIC_VALUE_CLASS, className)}>
+      <TextLineSkeleton type="h4" className="w-10" />
+      <span className={METRIC_LABEL_CLASS}>{label}</span>
     </div>
   );
 }

package/src/components/msp-display.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import { cn } from '../utils/cn';
-import { getProxiedImageUrl } from '../utils/image-proxy';
-import { SquareAvatar } from './ui/square-avatar';
+import { useProxiedImageUrl } from './chat/hooks/use-proxied-image-url';
+import { TextLineSkeleton } from './loading/unified-skeleton';
+import { useLoadingScope } from './ui/loading-scope';
+import { SquareAvatar, SquareAvatarSkeleton } from './ui/square-avatar';
 
 interface MSPDisplayProps {
   name: string;
@@ -11,16 +13,29 @@ interface MSPDisplayProps {
   className?: string;
 }
 
+/** The row's layout, read by the row and by its skeleton, so the skeleton is the row's size. */
+const MSP_ROW_CLASS = 'flex min-w-0 items-center gap-2';
+const MSP_NAME_CLASS = 'truncate pl-2';
+
 export function MSPDisplay({ name, logoUrl, size = 40, className }: MSPDisplayProps) {
+  const logoSrc = useProxiedImageUrl(logoUrl);
+  if (useLoadingScope()) return <MSPDisplaySkeleton size={size} className={className} />;
+  return (
+    <div className={cn(MSP_ROW_CLASS, className)}>
+      <SquareAvatar src={logoSrc || undefined} fallback={name} alt={name} sizePx={size} />
+      <h2 className={MSP_NAME_CLASS}>{name}</h2>
+    </div>
+  );
+}
+
+/** The row while it is read: the logo's box and a bar on the name's line. */
+export function MSPDisplaySkeleton({ size = 40, className }: { size?: number; className?: string }) {
   return (
-    <div className={cn('flex min-w-0 items-center gap-2', className)}>
-      <SquareAvatar
-        src={logoUrl ? getProxiedImageUrl(logoUrl) || logoUrl : undefined}
-        fallback={name}
-        alt={name}
-        sizePx={size}
-      />
-      <h2 className="truncate pl-2">{name}</h2>
+    <div className={cn(MSP_ROW_CLASS, className)} aria-hidden>
+      <SquareAvatarSkeleton sizePx={size} />
+      <div className={MSP_NAME_CLASS}>
+        <TextLineSkeleton type="inherit" as="span" className="inline-block w-32 align-top" />
+      </div>
     </div>
   );
 }

package/src/components/navigation/app-layout.tsx

@@ -18,9 +18,6 @@ import { AppLayoutSidePanel, type AppLayoutSidePanelConfig, useAppLayoutSidePane
 import { MobileBurgerMenu, type MobileBurgerMenuProps } from './mobile-burger-menu';
 import { NavigationSidebar } from './navigation-sidebar';
 
-export { useAppLayoutDrawerContainer, useAppLayoutDrawerCoordination } from './app-layout-context';
-export type { AppLayoutDrawerHandle } from './app-layout-context';
-
 export interface AppLayoutProps {
   children: ReactNode;
   sidebarConfig: NavigationSidebarConfig;

package/src/components/navigation/index.ts

@@ -10,9 +10,11 @@ export type { NavPanelProps } from './nav-panel';
 export { NavItemRow } from './nav-item-row';
 export type { NavItemRowProps, NavItemRowVariant } from './nav-item-row';
 export type { AskAiOpenDetail } from './mingo-ai-button';
-export { ASK_AI_OPEN_EVENT, ASK_AI_OPEN_WITH_REF_EVENT, MingoAiButton, openAskAi } from './mingo-ai-button';
+export { MingoAiButton, openAskAi } from './mingo-ai-button';
+export { ASK_AI_OPEN_EVENT, ASK_AI_OPEN_WITH_REF_EVENT } from '../chat/utils/ask-ai-events';
 export type { MingoAiButtonProps } from './mingo-ai-button';
-export { MobileNavSheet, MOBILE_NAV_SHEET_ID, siteNavHasMobileMenus } from './mobile-nav-sheet';
+export { MobileNavSheet, siteNavHasMobileMenus } from './mobile-nav-sheet';
+export { MOBILE_NAV_SHEET_ID } from './mobile-nav-sheet-id';
 export type { MobileNavSheetProps } from './mobile-nav-sheet';
 export { SiteFooter } from './site-footer';
 export type { SiteFooterProps } from './site-footer';
@@ -24,6 +26,15 @@ export type { SlidingSidebarProps } from './sliding-sidebar';
 
 export { StickySectionNav, useSectionNavigation } from './sticky-section-nav';
 export type { StickyNavSection } from './sticky-section-nav';
+// THE page's sticky section bar (tabs under the site header) and the anchor offsets that go with it.
+export {
+  PAGE_ANCHOR_GAP_PX,
+  PAGE_ANCHOR_SCOPE_CLASS,
+  PAGE_ANCHOR_SCROLL_MARGIN_CLASS,
+  PageSectionBar,
+  SECTION_BAR_HEIGHT_PX,
+} from './page-section-bar';
+export type { PageSectionBarProps } from './page-section-bar';
 // The scroll spy behind a section nav that keeps the URL on the section being
 // read (`syncHash`, two levels of anchors): the docs and trust-center spy.
 export { useScrollSpy } from '../docs/use-scroll-spy';
@@ -35,7 +46,8 @@ export type { NavigationSidebarProps } from './navigation-sidebar';
 export { AppHeader } from './app-header';
 export type { AppHeaderProps, HeaderLoadingCell } from './app-header';
 
-export { AppLayout, useAppLayoutDrawerContainer } from './app-layout';
+export { AppLayout } from './app-layout';
+export { useAppLayoutDrawerContainer } from './app-layout-context';
 export type { AppLayoutProps } from './app-layout';
 export type {
   AppLayoutSidePanelConfig,

package/src/components/navigation/mingo-ai-button.tsx

@@ -7,7 +7,7 @@ import { useVisitorOs } from '../../hooks/ui/use-visitor-os';
 import { cn } from '../../utils';
 import { shortcutLabel, usesCommandKey } from '../../utils/visitor-os';
 import { AgentMark } from '../agent-mark';
-import { ASK_AI_OPEN_EVENT, ASK_AI_OPEN_WITH_REF_EVENT } from '../chat/utils/ask-ai-events';
+import { ASK_AI_OPEN_EVENT } from '../chat/utils/ask-ai-events';
 import { Button } from '../ui/button';
 
 export interface MingoAiButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -34,8 +34,6 @@ export interface MingoAiButtonProps extends React.ButtonHTMLAttributes<HTMLButto
   variant?: 'inline' | 'button' | 'field';
 }
 
-export { ASK_AI_OPEN_EVENT, ASK_AI_OPEN_WITH_REF_EVENT };
-
 /** What an `ask-ai:open` event carries. */
 export interface AskAiOpenDetail {
   source: string;
@@ -118,7 +116,8 @@ export function MingoAiButton({
       // The modifier the key cap shows, and only that one: on a Mac Ctrl+K is
       // the text fields' own "delete to the end of the line".
       const modifier = commandKey ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
-      if (event.key.toLowerCase() !== 'k' || !modifier) return;
+      // A keydown with no key is real: the browser's autofill fires one when it fills a form field.
+      if (typeof event.key !== 'string' || event.key.toLowerCase() !== 'k' || !modifier) return;
       event.preventDefault();
       openRef.current();
     };

package/src/components/navigation/mobile-nav-sheet.tsx

@@ -16,8 +16,6 @@ import { MOBILE_NAV_SHEET_ID } from './mobile-nav-sheet-id';
 import { NavItemRow } from './nav-item-row';
 import { defaultRenderSiteNavLink, NAV_FOCUS_CLASS, type SiteNavLinkRenderer } from './site-nav-link';
 
-export { MOBILE_NAV_SHEET_ID } from './mobile-nav-sheet-id';
-
 export interface MobileNavSheetProps {
   nav: SiteNav;
   isOpen: boolean;