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

package/dist/{chunk-RDFMBOSI.js → chunk-GKGQ4DWE.js}

@@ -257,7 +257,7 @@ import {
   Skeleton,
   useCollisionBoundary,
   usePortalContainer
-} from "./chunk-RSZXB6J2.js";
+} from "./chunk-RDKJCZHY.js";
 import {
   CheckboxCheckmarkIcon,
   SearchIcon
@@ -18402,6 +18402,7 @@ function CalendarNavButton({ direction, onClick, disabled, "aria-label": ariaLab
       type: "button",
       variant: "outline",
       size: "icon",
+      className: "shrink-0",
       onClick,
       disabled,
       "aria-label": ariaLabel,
@@ -18417,7 +18418,11 @@ function DatePickerCalendar({
   fromDate,
   toDate: toDate3,
   locale,
-  fluid = false
+  fluid = false,
+  bare = false,
+  disabledDays: extraDisabledDays,
+  month: monthProp,
+  onMonthChange
 }) {
   const today = /* @__PURE__ */ new Date();
   const isMdUp = useMdUp() ?? true;
@@ -18453,18 +18458,43 @@ function DatePickerCalendar({
     setHoveredDate(void 0);
     onSelect(completed);
   };
-  const cellOuter = fluid ? "flex-1 aspect-square min-w-0" : "size-10";
-  const cellInner = fluid ? "size-full" : "size-10";
+  const isFluid = fluid || bare;
+  const cellOuter = bare ? "flex-1 min-w-0 h-[32px]" : isFluid ? "flex-1 aspect-square min-w-0" : "size-10";
+  const cellInner = bare ? "h-full w-auto aspect-square rounded-[6px]" : isFluid ? "size-full" : "size-10";
+  const weekdayOuter = bare ? "flex-1 min-w-0 h-6" : cellOuter;
+  const hoverClass = bare ? "[&>button]:hover:bg-ods-bg-surface" : "hover:bg-ods-bg-surface hover:rounded-[6px]";
+  const todayClass = bare ? "[&>button]:bg-ods-bg-surface [&>button]:hover:!bg-ods-bg-surface" : "bg-ods-bg-surface rounded-[6px] hover:!bg-ods-bg-surface";
+  const dayNumber = (date) => date.getFullYear() * 1e4 + date.getMonth() * 100 + date.getDate();
+  const isSelectedDay = (date) => {
+    const n = dayNumber(date);
+    if (mode === "single") {
+      const picked = selected;
+      return !!picked && dayNumber(picked) === n;
+    }
+    const range = rangeSelected;
+    if (!range?.from) return false;
+    if (!range.to) return dayNumber(range.from) === n;
+    return n >= dayNumber(range.from) && n <= dayNumber(range.to);
+  };
+  const isUnclaimedToday = (date) => dayNumber(date) === dayNumber(today) && !isSelectedDay(date);
+  const selectedClass = bare ? "[&>button]:!bg-ods-accent [&>button]:!text-ods-card [&>button]:!font-bold [&>button]:hover:!bg-ods-accent" : "!bg-ods-accent !text-ods-card !font-bold !rounded-[6px] hover:!bg-ods-accent";
+  const surfaceClass = bare ? "flex w-full flex-col" : cn("bg-ods-card border border-ods-border rounded-[6px] overflow-hidden", isFluid && "w-full");
+  const captionRowClass = cn("flex items-center justify-between gap-1", bare ? "shrink-0" : "px-4 pt-4");
+  const captionClass = "min-w-0 flex-1 truncate text-center text-h4 text-ods-text-primary";
   const classNames = {
-    root: cn("p-4 date-picker-calendar", fluid && "w-full"),
-    months: "flex gap-8",
-    month: cn("flex flex-col gap-2", fluid && "w-full"),
+    root: cn(
+      "date-picker-calendar",
+      bare ? "flex w-full flex-col pt-[var(--spacing-system-xsf)]" : cn("p-4", isFluid && "w-full")
+    ),
+    months: cn("flex gap-8", bare && "w-full"),
+    month: cn("flex flex-col", bare ? "w-full" : cn("gap-2", isFluid && "w-full")),
     month_caption: "hidden",
     nav: "hidden",
-    month_grid: cn("border-collapse", fluid && "w-full"),
+    month_grid: cn("border-collapse", bare ? "flex w-full flex-col" : isFluid && "w-full"),
     weekdays: "flex",
+    ...bare ? { weeks: "flex flex-col" } : {},
     weekday: cn(
-      cellOuter,
+      weekdayOuter,
       "flex items-center justify-center",
       "text-h6 text-ods-text-secondary"
     ),
@@ -18475,7 +18505,7 @@ function DatePickerCalendar({
       "text-h4 text-ods-text-primary",
       "cursor-pointer",
       "transition-colors duration-150",
-      "hover:bg-ods-bg-surface hover:rounded-[6px]"
+      hoverClass
     ),
     day_button: cn(
       cellInner,
@@ -18483,9 +18513,10 @@ function DatePickerCalendar({
       "cursor-pointer bg-transparent border-none outline-none",
       "text-inherit font-inherit"
     ),
-    today: "bg-ods-bg-surface rounded-[6px] hover:!bg-ods-bg-surface",
+    // Painted through the `todayTint` modifier instead — see `isUnclaimedToday`.
+    today: "",
     selected: cn(
-      "!bg-ods-accent !text-ods-card !font-bold !rounded-[6px] hover:!bg-ods-accent",
+      selectedClass,
       // In range mode, selected class should not override range_start/range_end/range_middle
       mode === "range" && "range-selected"
     ),
@@ -18503,7 +18534,19 @@ function DatePickerCalendar({
     // `disabled` <button> does not inherit the cell's cursor on its own.
     disabled: cn(
       "!text-ods-text-disabled !cursor-not-allowed hover:!bg-transparent",
-      "[&>button]:!cursor-not-allowed [&>button]:!text-ods-text-disabled"
+      "[&>button]:!cursor-not-allowed [&>button]:!text-ods-text-disabled",
+      // Also drop the `today` tint, or an unselectable today renders BLANK:
+      // `--color-text-disabled` and `--color-bg-surface` are the SAME token
+      // (`--ods-system-greys-soft-grey`), so the number disappears into the
+      // highlight — grey on identical grey. Reachable by any picker whose
+      // `fromDate` is in the future, and permanently by the meeting scheduler,
+      // where today usually has no bookable slots left.
+      //
+      // Dropping the tint rather than repainting the text: a disabled day is
+      // not actionable, so a highlight claiming otherwise is the wrong signal.
+      // The day still reads as today's position in the month by being the one
+      // dimmed cell between yesterday and tomorrow.
+      "!bg-transparent [&>button]:!bg-transparent"
     ),
     hidden: "invisible",
     // Range styles matching Figma design:
@@ -18521,33 +18564,34 @@ function DatePickerCalendar({
     ),
     range_middle: "range-middle !bg-ods-open-yellow-light !text-ods-card !font-medium !rounded-none hover:!bg-ods-open-yellow-light"
   };
-  const [month, setMonth] = React48.useState(
+  const [uncontrolledMonth, setUncontrolledMonth] = React48.useState(
     mode === "single" ? selected || today : selected?.from || today
   );
+  const month = monthProp ?? uncontrolledMonth;
+  const changeMonth = (next) => {
+    setUncontrolledMonth(next);
+    onMonthChange?.(next);
+  };
   const disabledDays = React48.useMemo(() => {
     const matchers = [];
     if (fromDate) matchers.push({ before: fromDate });
     if (toDate3) matchers.push({ after: toDate3 });
+    if (extraDisabledDays) {
+      matchers.push(...Array.isArray(extraDisabledDays) ? extraDisabledDays : [extraDisabledDays]);
+    }
     return matchers;
-  }, [fromDate, toDate3]);
+  }, [fromDate, toDate3, extraDisabledDays]);
   const monthIndex = (date) => date.getFullYear() * 12 + date.getMonth();
   const lastVisibleMonth = monthIndex(month) + (monthsToShow === 2 ? 1 : 0);
   const canGoPrevious = !fromDate || monthIndex(month) > monthIndex(fromDate);
   const canGoNext = !toDate3 || lastVisibleMonth < monthIndex(toDate3);
-  const handlePreviousMonth = () => {
-    setMonth((prev) => {
-      const newMonth = new Date(prev);
-      newMonth.setMonth(newMonth.getMonth() - 1);
-      return newMonth;
-    });
-  };
-  const handleNextMonth = () => {
-    setMonth((prev) => {
-      const newMonth = new Date(prev);
-      newMonth.setMonth(newMonth.getMonth() + 1);
-      return newMonth;
-    });
+  const shiftMonth = (by) => {
+    const next = new Date(month);
+    next.setMonth(next.getMonth() + by);
+    changeMonth(next);
   };
+  const handlePreviousMonth = () => shiftMonth(-1);
+  const handleNextMonth = () => shiftMonth(1);
   const formatMonthYear = (date) => {
     return date.toLocaleDateString("en-US", {
       month: "long",
@@ -18586,8 +18630,8 @@ function DatePickerCalendar({
     }
   `;
   if (mode === "single") {
-    return /* @__PURE__ */ jsxs88("div", { className: cn("bg-ods-card border border-ods-border rounded-[6px] overflow-hidden", fluid && "w-full"), children: [
-      /* @__PURE__ */ jsxs88("div", { className: "flex items-center justify-between px-4 pt-4", children: [
+    return /* @__PURE__ */ jsxs88("div", { className: surfaceClass, children: [
+      /* @__PURE__ */ jsxs88("div", { className: captionRowClass, children: [
         /* @__PURE__ */ jsx117(
           CalendarNavButton,
           {
@@ -18597,7 +18641,7 @@ function DatePickerCalendar({
             "aria-label": "Previous month"
           }
         ),
-        /* @__PURE__ */ jsx117("span", { className: "text-h4 text-ods-text-primary", children: formatMonthYear(month) }),
+        /* @__PURE__ */ jsx117("span", { className: captionClass, children: formatMonthYear(month) }),
         /* @__PURE__ */ jsx117(
           CalendarNavButton,
           {
@@ -18615,8 +18659,10 @@ function DatePickerCalendar({
           selected,
           onSelect: (date) => onSelect(date),
           month,
-          onMonthChange: setMonth,
+          onMonthChange: changeMonth,
           classNames,
+          modifiers: { todayTint: isUnclaimedToday },
+          modifiersClassNames: { todayTint: todayClass },
           showOutsideDays: true,
           fixedWeeks: true,
           disabled: disabledDays,
@@ -18629,7 +18675,7 @@ function DatePickerCalendar({
   return /* @__PURE__ */ jsxs88(
     "div",
     {
-      className: cn("bg-ods-card border border-ods-border rounded-md overflow-hidden", fluid && "w-full"),
+      className: cn("bg-ods-card border border-ods-border rounded-md overflow-hidden", isFluid && "w-full"),
       onMouseLeave: () => setHoveredDate(void 0),
       children: [
         /* @__PURE__ */ jsx117("style", { children: rangeStyles }),
@@ -18645,7 +18691,7 @@ function DatePickerCalendar({
                   "aria-label": "Previous month"
                 }
               ),
-              /* @__PURE__ */ jsx117("span", { className: "text-h4 text-ods-text-primary", children: formatMonthYear(month) }),
+              /* @__PURE__ */ jsx117("span", { className: captionClass, children: formatMonthYear(month) }),
               monthsToShow === 1 && /* @__PURE__ */ jsx117(
                 CalendarNavButton,
                 {
@@ -18664,10 +18710,10 @@ function DatePickerCalendar({
                 selected: draftRange,
                 onSelect: (_range, triggerDate) => handleRangeSelect(triggerDate),
                 onDayMouseEnter: (day) => setHoveredDate(day),
-                modifiers: { preview: isPreviewDate },
-                modifiersClassNames: { preview: "bg-ods-bg-surface" },
+                modifiers: { preview: isPreviewDate, todayTint: isUnclaimedToday },
+                modifiersClassNames: { preview: "bg-ods-bg-surface", todayTint: todayClass },
                 month,
-                onMonthChange: setMonth,
+                onMonthChange: changeMonth,
                 classNames,
                 showOutsideDays: true,
                 fixedWeeks: true,
@@ -18680,7 +18726,7 @@ function DatePickerCalendar({
           monthsToShow === 2 && /* @__PURE__ */ jsxs88("div", { className: "flex-1 border-l border-ods-border", children: [
             /* @__PURE__ */ jsxs88("div", { className: "flex items-center justify-between px-4 pt-4", children: [
               /* @__PURE__ */ jsx117("div", { className: "size-10 md:size-12" }),
-              /* @__PURE__ */ jsx117("span", { className: "text-h4 text-ods-text-primary", children: formatMonthYear(getSecondMonth(month)) }),
+              /* @__PURE__ */ jsx117("span", { className: captionClass, children: formatMonthYear(getSecondMonth(month)) }),
               /* @__PURE__ */ jsx117(
                 CalendarNavButton,
                 {
@@ -18698,8 +18744,8 @@ function DatePickerCalendar({
                 selected: draftRange,
                 onSelect: (_range, triggerDate) => handleRangeSelect(triggerDate),
                 onDayMouseEnter: (day) => setHoveredDate(day),
-                modifiers: { preview: isPreviewDate },
-                modifiersClassNames: { preview: "bg-ods-bg-surface" },
+                modifiers: { preview: isPreviewDate, todayTint: isUnclaimedToday },
+                modifiersClassNames: { preview: "bg-ods-bg-surface", todayTint: todayClass },
                 month: getSecondMonth(month),
                 classNames,
                 showOutsideDays: true,
@@ -34918,7 +34964,7 @@ function VideoBitesDisplay({
   );
 }
 
-// src/components/features/floating-walkthrough-video.tsx
+// src/components/features/walkthrough-video.tsx
 init_cn();
 init_button2();
 import { useCallback as useCallback28, useEffect as useEffect57, useMemo as useMemo35, useRef as useRef42, useState as useState75 } from "react";
@@ -34926,7 +34972,7 @@ import * as DialogPrimitive3 from "@radix-ui/react-dialog";
 import { Fragment as Fragment48, jsx as jsx261, jsxs as jsxs200 } from "react/jsx-runtime";
 var isAtEnd = (duration, time) => duration > 0 && duration - time < 1;
 var WALKTHROUGH_Z = "z-[9980]";
-function FloatingWalkthroughVideo({
+function WalkthroughVideo({
   video,
   open: openProp,
   onOpenChange,
@@ -34934,12 +34980,17 @@ 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 = 3e3,
   dismissal = {},
   hideNearSelector = "footer",
   pathname,
   className
 }) {
+  const inline = placement === "inline";
   const dismissEnabled = dismissal !== false;
   const storageKey = dismissEnabled && dismissal.storageKey || WALKTHROUGH_VIDEO_DISMISS_KEY;
   const dismissalId = video?.id != null ? String(video.id) : "dismissed";
@@ -35011,6 +35062,10 @@ function FloatingWalkthroughVideo({
   const previewAllowed = !previewSuppressed && !isYouTube;
   useEffect57(() => {
     if (!mounted) return;
+    if (inline) {
+      setFooterHidden(false);
+      return;
+    }
     const el = typeof document !== "undefined" ? document.querySelector(hideNearSelector) : null;
     if (!el || typeof IntersectionObserver === "undefined") {
       setFooterHidden(false);
@@ -35022,7 +35077,7 @@ function FloatingWalkthroughVideo({
     );
     io.observe(el);
     return () => io.disconnect();
-  }, [mounted, hideNearSelector, pathname]);
+  }, [mounted, inline, hideNearSelector, pathname]);
   useEffect57(() => {
     if (!resumeMode) return;
     const onVis = () => {
@@ -35272,7 +35327,10 @@ 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
@@ -35288,7 +35346,9 @@ 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
       ),
@@ -35415,7 +35475,11 @@ function FloatingWalkthroughVideo({
     }
   );
   return /* @__PURE__ */ jsxs200(Fragment48, { children: [
-    showCard && /* @__PURE__ */ jsx261(
+    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
+    ) : /* @__PURE__ */ jsx261(
       "div",
       {
         className: cn(
@@ -35426,7 +35490,7 @@ function FloatingWalkthroughVideo({
         style: { paddingBottom: "max(var(--spacing-system-mf), env(safe-area-inset-bottom))" },
         children: collapsed
       }
-    ),
+    )),
     /* @__PURE__ */ jsx261(DialogPrimitive3.Root, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs200(DialogPortal, { children: [
       /* @__PURE__ */ jsx261(DialogOverlay, {}),
       /* @__PURE__ */ jsxs200(
@@ -35498,6 +35562,12 @@ function FloatingWalkthroughVideo({
     ] }) })
   ] });
 }
+function FloatingWalkthroughVideo(props) {
+  return /* @__PURE__ */ jsx261(WalkthroughVideo, { ...props, placement: "floating" });
+}
+function InlineWalkthroughVideo(props) {
+  return /* @__PURE__ */ jsx261(WalkthroughVideo, { ...props, placement: "inline", appearDelayMs: 0, dismissal: false });
+}
 
 // src/components/features/use-walkthrough-video.ts
 import { useQuery } from "@tanstack/react-query";
@@ -62522,6 +62592,7 @@ export {
   SelectLabel,
   SelectItem,
   SelectSeparator,
+  DatePickerCalendar,
   DatePicker,
   DatePickerInput,
   DatePickerInputSimple,
@@ -63429,6 +63500,7 @@ export {
   WarningBlock,
   VideoBitesDisplay,
   FloatingWalkthroughVideo,
+  InlineWalkthroughVideo,
   useWalkthroughVideo,
   VideoSourceSelector,
   ConfidenceBadge,
@@ -63615,4 +63687,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-RDFMBOSI.js.map
+//# sourceMappingURL=chunk-GKGQ4DWE.js.map