@flamingo-stack/openframe-frontend-core 0.0.703 → 0.0.704-snapshot.20261006133653

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

@@ -172,7 +172,7 @@ type StashedDetails = {
 /** Context-panel geometry — ONE definition for the loaded card and the
  *  loading skeleton, which is what keeps the two footprint-identical. */
 const CONTEXT_PANEL_CLASS =
-  'p-[var(--spacing-system-l)] shrink-0 lg:w-[280px] border-b lg:border-b-0 lg:border-r border-ods-border lg:min-h-0 lg:overflow-y-auto';
+  'p-[var(--spacing-system-l)] shrink-0 content-lg:w-[280px] border-b content-lg:border-b-0 content-lg:border-r border-ods-border content-lg:min-h-0 content-lg:overflow-y-auto';
 
 /**
  * Action panel: the elastic half, scrolling inside the fixed card.
@@ -182,7 +182,7 @@ const CONTEXT_PANEL_CLASS =
  * inset that divider from the card's edges instead of letting it run the full
  * width the way every other rule in this card does.
  */
-const ACTION_PANEL_CLASS = 'flex-1 min-w-0 flex flex-col md:min-h-0 lg:p-[var(--spacing-system-l)]';
+const ACTION_PANEL_CLASS = 'flex-1 min-w-0 flex flex-col content-md:min-h-0 content-lg:p-[var(--spacing-system-l)]';
 
 /**
  * The action panel's inset for the steps that are ONE block — details,
@@ -195,12 +195,12 @@ const ACTION_PANEL_CLASS = 'flex-1 min-w-0 flex flex-col md:min-h-0 lg:p-[var(--
  * sections has to bring the same inset with it — without it the form ran edge
  * to edge on tablet, its inputs touching the card's border.
  *
- * `md:min-h-0 md:overflow-y-auto` comes with it: from `md` up the card states
+ * `content-md:min-h-0 content-md:overflow-y-auto` comes with it: from `md` up the card states
  * a height, and these steps have no inner scroller of their own the way the
  * times column does, so this is where a long form gets to scroll instead of
  * being cut off at the card's edge.
  */
-const PANEL_STEP_CLASS = 'p-[var(--spacing-system-l)] md:min-h-0 md:overflow-y-auto lg:p-0';
+const PANEL_STEP_CLASS = 'p-[var(--spacing-system-l)] content-md:min-h-0 content-md:overflow-y-auto content-lg:p-0';
 /** A step's panel: the inset above on a column that fills the action side. */
 const STEP_PANEL_CLASS = cn('flex flex-1 flex-col', PANEL_STEP_CLASS);
 
@@ -248,7 +248,7 @@ const STEP_PANEL_CLASS = cn('flex flex-1 flex-col', PANEL_STEP_CLASS);
  * video take the leftover space at 16:9; a stand-in that just stacks fixed
  * blocks will overflow the shorter of the two.
  */
-export const MEETING_SCHEDULER_H = 'md:h-[34.375rem] lg:h-[23.75rem]';
+export const MEETING_SCHEDULER_H = 'content-md:h-[34.375rem] content-lg:h-[23.75rem]';
 
 /**
  * The box for `flow="details-first"`'s CALENDAR and confirmation stages (and its
@@ -265,7 +265,7 @@ export const MEETING_SCHEDULER_H = 'md:h-[34.375rem] lg:h-[23.75rem]';
  *
  * Hosts read it through `SCHEDULER_FLOW_PRESETS[flow].height`, never directly.
  */
-export const MEETING_SCHEDULER_DETAILS_FIRST_H = 'h-[50.75rem] md:h-[39.875rem]';
+export const MEETING_SCHEDULER_DETAILS_FIRST_H = 'h-[50.75rem] content-md:h-[39.875rem]';
 
 export type SchedulerFlow = 'slot-first' | 'details-first';
 
@@ -314,24 +314,24 @@ export const SCHEDULER_FLOW_PRESETS: Record<
  * it on a calendar sized to fit (no scroll) and a times list that scrolls on
  * its own.
  *
- * `md:flex md:flex-col` is what makes that possible at all. A stated height on
+ * `content-md:flex content-md:flex-col` is what makes that possible at all. A stated height on
  * a plain block only clips (this card is `overflow-hidden` for its corners) —
  * it is the flex column plus the inner wrapper's `min-h-0` that lets the
  * content shrink into the height instead of being cut off by it.
  */
 const CARD_CLASS = cn(
   'overflow-hidden rounded-md border border-ods-border bg-ods-card',
-  'md:flex md:flex-col',
+  'content-md:flex content-md:flex-col',
   // The height is NOT baked in any more: it is chosen per flow at each render
   // site (`cardClass`), because details-first needs a taller box and both
   // constants are module scope.
 );
 
-/** Context strip over action panel, side by side from `lg`. `md:flex-1
- *  md:min-h-0` is the pair that makes it exactly as tall as the card states —
+/** Context strip over action panel, side by side from `lg`. `content-md:flex-1
+ *  content-md:min-h-0` is the pair that makes it exactly as tall as the card states —
  *  grow into a stated height that content does not reach, shrink into one it
  *  overruns — so neither a short stage nor a long one changes the box. */
-const CARD_INNER_CLASS = 'flex flex-col md:min-h-0 md:flex-1 lg:h-full lg:flex-row';
+const CARD_INNER_CLASS = 'flex flex-col content-md:min-h-0 content-md:flex-1 content-lg:h-full content-lg:flex-row';
 
 /** The two-line stages (load failure, "booked on HubSpot") — the SAME box as
  *  the booking card, because these are stages of one widget in one slot and a
@@ -340,7 +340,7 @@ const CARD_INNER_CLASS = 'flex flex-col md:min-h-0 md:flex-1 lg:h-full lg:flex-r
  *  outgrows it. */
 const CARD_DEGRADED_CLASS = cn(
   'flex flex-col items-start gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)]',
-  'md:justify-center md:overflow-y-auto',
+  'content-md:justify-center content-md:overflow-y-auto',
 );
 
 /**
@@ -723,7 +723,7 @@ export function HubSpotMeetingScheduler({
   const boxed = !formOnly;
   const cardClass = cn(
     CARD_CLASS,
-    boxed ? preset.height : 'md:h-auto',
+    boxed ? preset.height : 'content-md:h-auto',
     detailsFirst && 'flex flex-col',
     formOnly && 'bg-ods-bg',
     className,
@@ -880,11 +880,11 @@ export function HubSpotMeetingScheduler({
               />
             </div>
           ) : (
-            <div className="flex flex-col gap-[var(--spacing-system-m)] md:min-h-0 md:flex-1">
+            <div className="flex flex-col gap-[var(--spacing-system-m)] content-md:min-h-0 content-md:flex-1">
               {bookingError === 'SLOT_TAKEN' && (
                 <Alert
                   variant="warning"
-                  className="mx-[var(--spacing-system-l)] mt-[var(--spacing-system-l)] w-auto lg:m-0 lg:w-full"
+                  className="mx-[var(--spacing-system-l)] mt-[var(--spacing-system-l)] w-auto content-lg:m-0 content-lg:w-full"
                 >
                   <AlertDescription>
                     That time was just taken — pick another slot below. (If you already submitted, check your email for

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

@@ -110,7 +110,7 @@ function timeLabelInZone(ms: number, timeZone: string): string {
  * 48px targets and the COLUMN widens to house it, rather than the buttons
  * shrinking to fit a narrower column.
  */
-const CALENDAR_W = 'md:w-[19rem] md:shrink-0 lg:w-[16rem]';
+const CALENDAR_W = 'content-md:w-[19rem] content-md:shrink-0 content-lg:w-[16rem]';
 
 /** Column heading ("Select Date & Time" / the chosen day) — body-weight
  *  primary, 4px above its content, mirrored by both skeletons. */
@@ -150,7 +150,7 @@ const CHIP_GRID_CLASS = cn(
   // 700px card into a 1500px one and buries whatever the page puts below
   // it. This is the one nested scroller worth having: a small, obviously
   // bounded list with a visible edge, exactly as drawn.
-  'max-h-[9.75rem] md:max-h-none',
+  'max-h-[9.75rem] content-md:max-h-none',
   // No height of its own, and none borrowed from the calendar either: the card
   // states one height, the panel and this row pass it down, and what is left
   // after the column heading IS the scroll box. A long day scrolls inside it.
@@ -188,24 +188,24 @@ const CHIP_CLASS = 'w-full px-[var(--spacing-system-xxs)]';
  * is worse than the thing it saves.
  */
 const SLOT_ROW_CLASS = cn(
-  'flex min-w-0 flex-col md:flex-row',
+  'flex min-w-0 flex-col content-md:flex-row',
   // Default `stretch` at every width, deliberately. Stacked, that is what
   // makes each section span the card — an `items-start` here (it was here, to
   // stop a column growing taller than its month) collapses both sections to
   // their intrinsic WIDTH instead, which on a phone left the calendar and the
   // chips huddled against the left edge with half the card empty. The
   // calendar no longer needs protecting: its height is fixed, not derived.
-  'md:min-h-0 md:flex-1 lg:gap-[var(--spacing-system-lf)]',
+  'content-md:min-h-0 content-md:flex-1 content-lg:gap-[var(--spacing-system-lf)]',
 );
 
 /** Shared by both columns: self-padded until the panel takes over at `lg`.
  *  Widths are per-column — the calendar states one (`CALENDAR_W`) and the
  *  times take what is left, rather than a 50/50 split that would size the
  *  month by the card's width. */
-const COLUMN_BOX = 'p-[var(--spacing-system-l)] lg:p-0';
+const COLUMN_BOX = 'p-[var(--spacing-system-l)] content-lg:p-0';
 
 /** The rule between the two, wherever the layout puts it. */
-const COLUMN_DIVIDER = 'border-b border-ods-border md:border-b-0 md:border-r lg:border-0';
+const COLUMN_DIVIDER = 'border-b border-ods-border content-md:border-b-0 content-md:border-r content-lg:border-0';
 
 /** Deterministic month caption for a given offset (fixed en-US locale so
  *  the SSR and client first-paint markup agree byte-for-byte). */
@@ -288,7 +288,7 @@ function DayCalendar({ monthOffset, onMonthOffsetChange, selectedDay, onSelectDa
 export function SlotPickerSkeleton({ monthOffset = 0 }: { monthOffset?: number }) {
   return (
     <div className={SLOT_ROW_CLASS}>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'md:overflow-y-auto')}>
+      <div className={cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'content-md:overflow-y-auto')}>
         {/* Needs no data — the heading renders REAL in every loading state. */}
         <p className={COLUMN_HEADING_CLASS}>{SLOT_PICKER_HEADING}</p>
         <DayCalendar
@@ -299,7 +299,7 @@ export function SlotPickerSkeleton({ monthOffset = 0 }: { monthOffset?: number }
           slotsByDay={null}
         />
       </div>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 md:flex-1')}>
+      <div className={cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 content-md:flex-1')}>
         <TimeChipsSkeleton />
       </div>
     </div>
@@ -320,8 +320,8 @@ export function TimeChipsSkeleton() {
             grid's track count follows the card width, so no fixed number
             lands flush and a partial last row is the honest shape anyway. */}
         {Array.from({ length: 16 }, (_, i) => (
-          // h-11 md:h-12 — the loaded chip's own default-size height.
-          <Skeleton key={i} className={cn(CHIP_CLASS, 'h-11 md:h-12')} />
+          // h-11 content-md:h-12 — the loaded chip's own default-size height.
+          <Skeleton key={i} className={cn(CHIP_CLASS, 'h-11 content-md:h-12')} />
         ))}
       </div>
     </>
@@ -367,7 +367,7 @@ export function SlotPicker({
 
   return (
     <div className={SLOT_ROW_CLASS}>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'md:overflow-y-auto')}>
+      <div className={cn(COLUMN_STACK, COLUMN_BOX, COLUMN_DIVIDER, CALENDAR_W, 'content-md:overflow-y-auto')}>
         <p className={COLUMN_HEADING_CLASS}>{SLOT_PICKER_HEADING}</p>
         {/* Stays mounted through a month load — `slotsByDay: null` is what
             "nothing selectable yet" looks like, not an unmount. */}
@@ -379,7 +379,7 @@ export function SlotPicker({
           slotsByDay={isLoading ? null : slotsByDay}
         />
       </div>
-      <div className={cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 md:flex-1')}>
+      <div className={cn(COLUMN_STACK, COLUMN_BOX, 'min-w-0 content-md:flex-1')}>
         {isLoading ? (
           <TimeChipsSkeleton />
         ) : selectedDay ? (

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

@@ -47,6 +47,10 @@ export interface AppHeaderProps {
   onMingoAI?: () => void;
   /** Whether the Mingo drawer is currently open (visually pressed state). */
   isMingoAIActive?: boolean;
+  /** Swap the Mingo logo for a close "X" while active, beside the wordmark
+   *  too (icon-only mode always does). For a panel the button both opens and
+   *  closes. */
+  mingoAICloseWhenActive?: boolean;
   // User block
   showUser?: boolean;
   userName?: string;
@@ -131,6 +135,7 @@ export const AppHeader = React.memo(function AppHeaderImpl({
   showMingoAI = false,
   onMingoAI,
   isMingoAIActive = false,
+  mingoAICloseWhenActive = false,
   showUser,
   userName,
   userEmail,
@@ -327,6 +332,7 @@ export const AppHeader = React.memo(function AppHeaderImpl({
             <HeaderMingoButton
               onClick={onMingoAI}
               isActive={isMingoAIActive}
+              closeWhenActive={mingoAICloseWhenActive}
               iconOnly={!isMdUp}
               disabled={disabled || !onMingoAI}
               className={cn(cellDivider, dimmedClass)}