@flamingo-stack/openframe-frontend-core 0.0.560 → 0.0.561-1846.5000.1

package/src/components/features/index.ts

@@ -68,7 +68,7 @@ export * from './video-bites-display'
 export * from './card-hit-layer'
 export * from './video-hover-preview'
 export * from './entity-video-section'
-export * from './floating-walkthrough-video'
+export * from './walkthrough-video'
 export * from './use-walkthrough-video'
 export * from './use-video-warmup'
 export * from './captions-url'

package/src/components/features/use-walkthrough-video.ts

@@ -17,8 +17,8 @@
  */
 
 import { useQuery } from '@tanstack/react-query';
-import type { WalkthroughVideoData } from './floating-walkthrough-video';
 import { useCaptions } from './use-captions';
+import type { WalkthroughVideoData } from './walkthrough-video';
 
 export interface UseWalkthroughVideoOptions {
   /** Absolute or proxied URL of the public GET route. */

package/src/components/features/{floating-walkthrough-video.tsx → walkthrough-video.tsx}

@@ -1,12 +1,35 @@
 "use client";
 
 /**
- * <FloatingWalkthroughVideo> — THE generic, embeddable per-platform demo-video
- * widget. A collapsed card pinned to a bottom corner — left unless the video
- * data says `position: 'right'` — (bite-identical hover grammar via
+ * THE generic, embeddable per-platform demo-video widget, in the two placements
+ * hosts actually mount: <FloatingWalkthroughVideo> and <InlineWalkthroughVideo>.
+ *
+ * SHARED GRAMMAR. A collapsed card (bite-identical hover grammar via
  * <VideoHoverPreviewSurface>) that opens a large in-page theater (Radix Dialog
  * primitives, NOT native fullscreen) showing ONLY the video: a bare 16:9 stage
  * with the player's own controls + captions. No card chrome, no summary.
+ *   - FLOATING pins that card to a bottom corner over the page — left unless
+ *     the video data says `position: 'right'`.
+ *   - INLINE lays it out in the host's own flow, filling its container at 16:9.
+ *     Every overlay-only behaviour drops out with the pinning: no fixed
+ *     positioning, no z-layer, no shadow, no appear delay (nothing to stagger
+ *     against an already-painted page), no footer fade (no footer to collide
+ *     with) and no dismissal (an X is an overlay's "get out of my way"; in a
+ *     host's own layout it just leaves a hole, and the cookie is per-platform,
+ *     so one dismissal in the corner would silently empty the in-page block).
+ *
+ * ONE ENGINE, TWO PRESETS. <WalkthroughVideo> below takes `placement` and is
+ * deliberately NOT exported: placement is a constant at every call site, so the
+ * public API is two components that say what they are instead of one that takes
+ * a mode — a <FloatingWalkthroughVideo placement="inline"> reads as a
+ * contradiction, and naming a family after one of its variants is what produced
+ * it. The presets are one line each; everything below the wrapper — the player
+ * mode machine, the audio invariant, the corner map, dismissal — stays shared,
+ * because forking THAT is how the two placements would drift.
+ *
+ * The split pays off in the types: the overlay-only knobs are absent from
+ * `InlineWalkthroughVideoProps` outright, so "floating only" is a compile error
+ * rather than a line of prose each caller has to read.
  *
  * All UI lives here in the lib so every platform site AND the react-embedding
  * example mount the same component; the host supplies only the video data.
@@ -78,7 +101,8 @@ export interface WalkthroughVideoData {
   position?: 'left' | 'right' | null;
 }
 
-export interface FloatingWalkthroughVideoProps {
+/** Everything the two placements share — the widget's actual contract. */
+interface WalkthroughVideoBaseProps {
   video: WalkthroughVideoData | null | undefined;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -101,17 +125,35 @@ export interface FloatingWalkthroughVideoProps {
    *  so the hydrated (non-portal) markup is identical either way. */
   deepLinkParam?: string;
   label?: string;
+  className?: string;
+}
+
+/**
+ * <FloatingWalkthroughVideo>: the shared contract plus the knobs that only mean
+ * something for an OVERLAY. Each of these is inert inline — the appear delay
+ * staggers against a page the visitor hasn't seen yet, dismissal is an overlay
+ * affordance, and the footer fade (with the `pathname` that re-queries its
+ * target) exists to keep a pinned card off the page chrome. So they live here,
+ * not in the base.
+ */
+export interface FloatingWalkthroughVideoProps extends WalkthroughVideoBaseProps {
   appearDelayMs?: number;
   /** Cookie-based dismissal (id-match, mirrors the announcement bar). `false`
    *  disables the X entirely. `storageKey` is the per-platform cookie name. */
   dismissal?: { storageKey?: string } | false;
+  /** Fades the card out while `hideNearSelector` is in view. */
   hideNearSelector?: string;
   /** Route identity from the host (the lib can't observe navigation). Changing
    *  it re-queries the footer IO target. */
   pathname?: string;
-  className?: string;
 }
 
+/** <InlineWalkthroughVideo>: the shared contract and nothing else — see above. */
+export type InlineWalkthroughVideoProps = WalkthroughVideoBaseProps;
+
+/** Engine props. Internal: `placement` never reaches a call site. */
+type WalkthroughVideoProps = FloatingWalkthroughVideoProps & { placement: 'floating' | 'inline' };
+
 /** "Paused at the end" — used by BOTH the close snapshot and the reopen seed,
  *  which must agree or a finished video reopens at its own last frame. */
 const isAtEnd = (duration: number, time: number) => duration > 0 && duration - time < 1;
@@ -124,7 +166,7 @@ interface Handoff {
   playing: boolean;
 }
 
-export function FloatingWalkthroughVideo({
+function WalkthroughVideo({
   video,
   open: openProp,
   onOpenChange,
@@ -132,12 +174,17 @@ export function FloatingWalkthroughVideo({
   defaultOpenPaused,
   deepLinkParam = WALKTHROUGH_OPEN_QUERY_PARAM,
   label = 'Play Demo Video',
+  placement,
+  // Keeps the FLOATING card off the critical path. The inline preset passes 0:
+  // an in-page block is part of a page the visitor is already looking at, so
+  // staggering it in would only jump the layout.
   appearDelayMs = 3000,
   dismissal = {},
   hideNearSelector = 'footer',
   pathname,
   className,
-}: FloatingWalkthroughVideoProps): React.ReactElement | null {
+}: WalkthroughVideoProps): React.ReactElement | null {
+  const inline = placement === 'inline';
   const dismissEnabled = dismissal !== false;
   const storageKey = (dismissEnabled && dismissal.storageKey) || WALKTHROUGH_VIDEO_DISMISS_KEY;
   // id-match dismissal key: a new video (new id) re-shows the card. No id
@@ -257,6 +304,12 @@ export function FloatingWalkthroughVideo({
   // --- footer fade (re-query on pathname change; null-tolerant) ---
   useEffect(() => {
     if (!mounted) return;
+    // An inline card scrolls WITH the page — fading it out over the footer
+    // would blank the very block the visitor scrolled down to.
+    if (inline) {
+      setFooterHidden(false);
+      return;
+    }
     const el = typeof document !== 'undefined' ? document.querySelector(hideNearSelector) : null;
     if (!el || typeof IntersectionObserver === 'undefined') {
       setFooterHidden(false);
@@ -268,7 +321,7 @@ export function FloatingWalkthroughVideo({
     );
     io.observe(el);
     return () => io.disconnect();
-  }, [mounted, hideNearSelector, pathname]);
+  }, [mounted, inline, hideNearSelector, pathname]);
 
   // --- tab-hidden: pause resume-mode playback, keep the timestamp ---
   useEffect(() => {
@@ -697,7 +750,10 @@ export function FloatingWalkthroughVideo({
         // badge accents off it. It must live on an element that actually
         // receives pointer events — the media layer is pointer-events-none, so
         // a group inside it can never match :hover.
-        'group/card pointer-events-auto relative overflow-hidden rounded-lg border border-ods-border bg-ods-card shadow-2xl',
+        'group/card pointer-events-auto relative overflow-hidden rounded-md border border-ods-border bg-ods-card',
+        // The lift is what separates a FLOATING card from the page beneath it;
+        // an in-flow block sitting inside a host card needs no shadow at all.
+        !inline && 'shadow-2xl',
         // MOBILE = PiP dimensions, not a shrunken desktop card. This is an
         // UNINVITED overlay on the smallest screens, so it is sized against
         // the corner-PiP conventions, NOT against system PiP (which is
@@ -713,7 +769,9 @@ export function FloatingWalkthroughVideo({
         // Do NOT go below ~150px: the corner chrome (32px transport pair +
         // 32px dismiss + the title pill) stops fitting, and the card's own
         // controls — not the poster — are what set the real floor here.
-        'aspect-video w-[min(52vw,192px)] sm:w-80 transition-opacity duration-200',
+        'aspect-video transition-opacity duration-200',
+        // Inline: the HOST owns the width — the card only keeps 16:9 within it.
+        inline ? 'w-full' : 'w-[min(52vw,192px)] sm:w-80',
         footerHidden ? 'opacity-0 pointer-events-none' : 'opacity-100',
         className,
       )}
@@ -906,18 +964,23 @@ export function FloatingWalkthroughVideo({
 
   return (
     <>
-      {showCard && (
-        <div
-          className={cn(
-            'pointer-events-none fixed bottom-0 p-[var(--spacing-system-mf)]',
-            video.position === 'right' ? 'right-0' : 'left-0',
-            WALKTHROUGH_Z,
-          )}
-          style={{ paddingBottom: 'max(var(--spacing-system-mf), env(safe-area-inset-bottom))' }}
-        >
-          {collapsed}
-        </div>
-      )}
+      {showCard &&
+        (inline ? (
+          // No wrapper: a positioning / z-index / safe-area shell around an
+          // in-flow block is exactly what stops it sizing to its container.
+          collapsed
+        ) : (
+          <div
+            className={cn(
+              'pointer-events-none fixed bottom-0 p-[var(--spacing-system-mf)]',
+              video.position === 'right' ? 'right-0' : 'left-0',
+              WALKTHROUGH_Z,
+            )}
+            style={{ paddingBottom: 'max(var(--spacing-system-mf), env(safe-area-inset-bottom))' }}
+          >
+            {collapsed}
+          </div>
+        ))}
 
       <DialogPrimitive.Root open={open} onOpenChange={handleOpenChange}>
         <DialogPortal>
@@ -993,3 +1056,26 @@ export function FloatingWalkthroughVideo({
     </>
   );
 }
+
+/**
+ * The widget pinned into a bottom corner over the page — the app-shell / site
+ * placement. Every host that wants "a demo video somewhere on the page, out of
+ * the way" mounts this.
+ */
+export function FloatingWalkthroughVideo(props: FloatingWalkthroughVideoProps): React.ReactElement {
+  return <WalkthroughVideo {...props} placement="floating" />;
+}
+
+/**
+ * The same widget as an in-flow block, sized by whatever the host puts it in —
+ * for a page that gives the video a slot of its own rather than a corner.
+ *
+ * The two overlay defaults are fixed here rather than left to the caller: an
+ * in-page block has nothing to stagger against (`appearDelayMs={0}`), and a
+ * dismissable one would leave the host's layout with a hole while sharing the
+ * floating card's per-platform cookie (`dismissal={false}`). Both are stated
+ * once here instead of at every call site, where forgetting either is silent.
+ */
+export function InlineWalkthroughVideo(props: InlineWalkthroughVideoProps): React.ReactElement {
+  return <WalkthroughVideo {...props} placement="inline" appearDelayMs={0} dismissal={false} />;
+}

package/src/components/meeting-scheduler/booking-form.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../schemas/meeting-booking-schema'
 import {
   Button,
+  FieldWrapper,
   Input,
   Textarea,
   Label,
@@ -104,65 +105,76 @@ export function BookingForm({
 
   // Field chrome mirrors ContactForm 1:1 (`contact/contact-form.tsx`) — the
   // booking form must be indistinguishable from every other form in the app.
-  const inputClass = 'bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-12'
+  const inputClass = 'bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-11 md:h-12'
+  // One step ABOVE the `spacing system/m` the design names (16/24 instead of
+  // 12/16), because the field messages hang out of flow: they need ~16px on a
+  // phone and ~20 on desktop of clear space under the control, and `m` leaves
+  // 12/16 — four pixels short at both ends, so an error would print over the
+  // next field's label. The design has no error state drawn; this is the
+  // smallest ODS step that houses it.
+  const FORM_STACK = 'flex flex-col gap-[var(--spacing-system-l)]'
 
   return (
-    <form onSubmit={submit} className="flex flex-col space-y-4 md:space-y-6" noValidate>
+    <form onSubmit={submit} className={FORM_STACK} noValidate>
       <HoneypotField {...honeypotInputProps} />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
-        <div className="flex flex-col">
-          <Label htmlFor="ms-first-name">
-            First name<span className="text-ods-accent">*</span>
-          </Label>
+      {/* Email first, name pair below — the order the desktop and mobile mocks
+          both draw. The pair stays TWO columns even on a phone (164px each at
+          375): two short fields side by side cost one line instead of two on
+          the layout that can least afford them.
+
+          Every field goes through `FieldWrapper`, which hangs its message OUT
+          OF FLOW below the control. That is the whole reason it is here: a
+          message rendered in flow grows its field, which pushes everything
+          under it down and — inside a card that states its height — walks the
+          submit button off the bottom the moment validation fails. Required-ness
+          is carried by `required` on the control (read out by assistive tech),
+          not by an asterisk the design does not draw. */}
+      <FieldWrapper label="Email" htmlFor="ms-email" error={errors.email?.message}>
+        <Input
+          id="ms-email"
+          type="email"
+          required
+          autoComplete="email"
+          placeholder="jane@company.com"
+          aria-invalid={!!errors.email}
+          className={inputClass}
+          {...register('email')}
+        />
+      </FieldWrapper>
+
+      <div className="grid grid-cols-2 gap-[var(--spacing-system-m)]">
+        <FieldWrapper label="First Name" htmlFor="ms-first-name" error={errors.firstName?.message}>
           <Input
             id="ms-first-name"
+            required
             autoComplete="given-name"
             placeholder="Jane"
             aria-invalid={!!errors.firstName}
             className={inputClass}
             {...register('firstName')}
           />
-          {errors.firstName && <span className="text-ods-error text-h6 mt-1">{errors.firstName.message}</span>}
-        </div>
-        <div className="flex flex-col">
-          <Label htmlFor="ms-last-name">
-            Last name<span className="text-ods-accent">*</span>
-          </Label>
+        </FieldWrapper>
+        <FieldWrapper label="Last Name" htmlFor="ms-last-name" error={errors.lastName?.message}>
           <Input
             id="ms-last-name"
+            required
             autoComplete="family-name"
             placeholder="Doe"
             aria-invalid={!!errors.lastName}
             className={inputClass}
             {...register('lastName')}
           />
-          {errors.lastName && <span className="text-ods-error text-h6 mt-1">{errors.lastName.message}</span>}
-        </div>
-      </div>
-
-      <div className="flex flex-col">
-        <Label htmlFor="ms-email">
-          Email<span className="text-ods-accent">*</span>
-        </Label>
-        <Input
-          id="ms-email"
-          type="email"
-          autoComplete="email"
-          placeholder="jane@company.com"
-          aria-invalid={!!errors.email}
-          className={inputClass}
-          {...register('email')}
-        />
-        {errors.email && <span className="text-ods-error text-h6 mt-1">{errors.email.message}</span>}
+        </FieldWrapper>
       </div>
 
       {supportedFields.map((field) => (
-        <div key={field.name} className="flex flex-col">
-          <Label htmlFor={`ms-q-${field.name}`}>
-            {field.label}
-            {field.required && <span className="text-ods-accent">*</span>}
-          </Label>
+        <FieldWrapper
+          key={field.name}
+          label={field.label}
+          htmlFor={`ms-q-${field.name}`}
+          error={fieldError(field.name)}
+        >
           {field.type === 'textarea' && (
             <Textarea
               id={`ms-q-${field.name}`}
@@ -173,7 +185,7 @@ export function BookingForm({
           {field.type === 'text' && (
             <Input
               id={`ms-q-${field.name}`}
-              className="bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-12"
+              className="bg-ods-card border-ods-border text-ods-text-primary placeholder-ods-text-secondary px-3 h-11 md:h-12"
               {...register(`formFields.${field.name}` as never)}
             />
           )}
@@ -226,14 +238,16 @@ export function BookingForm({
               )}
             />
           )}
-          {fieldError(field.name) && (
-            <span className="text-ods-error text-h6 mt-1">{fieldError(field.name)}</span>
-          )}
-        </div>
+        </FieldWrapper>
       ))}
 
       {legalConsent && (
-        <div className="flex flex-col gap-[var(--spacing-system-xs)] border border-ods-border rounded-md p-[var(--spacing-system-md)]">
+        // Same out-of-flow message as the fields above, so a missed consent
+        // box doesn't shove the submit button down the card. With no error the
+        // wrapper is `display:contents` and the panel below is the flex item,
+        // exactly as it was.
+        <FieldWrapper error={errors.legalConsentResponses?.message as string | undefined}>
+        <div className="flex flex-col gap-[var(--spacing-system-xs)] border border-ods-border rounded-md p-[var(--spacing-system-m)]">
           {/* GDPR surface — HubSpot's consent copy rendered VERBATIM, never edited. */}
           <p className="text-h6 text-ods-text-secondary">{legalConsent.processingConsentText}</p>
           {legalConsent.communicationConsentText && (
@@ -260,10 +274,7 @@ export function BookingForm({
                           )
                         }
                       />
-                      <Label htmlFor={`ms-consent-${box.communicationTypeId}`}>
-                        {box.label}
-                        {box.required ? ' *' : ''}
-                      </Label>
+                      <Label htmlFor={`ms-consent-${box.communicationTypeId}`}>{box.label}</Label>
                     </div>
                   )
                 })}
@@ -273,18 +284,16 @@ export function BookingForm({
           {legalConsent.privacyPolicyText && (
             <p className="text-h6 text-ods-text-secondary">{legalConsent.privacyPolicyText}</p>
           )}
-          {errors.legalConsentResponses && (
-            <p className="text-h6 text-ods-error">{errors.legalConsentResponses.message as string}</p>
-          )}
         </div>
+        </FieldWrapper>
       )}
 
       {/* Step navigation back to the calendar lives in the step header (the
           app-standard BackButton, rendered by the parent) — the form ships
           only its submit. */}
       <div className="flex">
-        <Button type="submit" loading={isSubmitting} disabled={isSubmitting} className="w-full md:w-auto">
-          Confirm booking
+        <Button type="submit" loading={isSubmitting} disabled={isSubmitting}>
+          Confirm Booking
         </Button>
       </div>
     </form>

package/src/components/meeting-scheduler/confirmation.tsx

@@ -27,7 +27,7 @@ export function Confirmation({ confirmation, timezone }: ConfirmationProps) {
   }).format(new Date(confirmation.startTimeMs))
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-md)] text-center">
+    <div className="flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-m)] text-center">
       <p className="text-h1" role="img" aria-label="Celebration">
         🎉
       </p>