@flamingo-stack/openframe-frontend-core 0.0.528-1696.4455.1 → 0.0.528

package/dist/{chunk-MH4CJO6T.js → chunk-ILAQ6JAP.js}

@@ -10868,62 +10868,76 @@ var Modal = React26.forwardRef(
     }, [isOpen, onClose]);
     if (!isMounted) return null;
     const state = isOpen ? "open" : "closed";
-    return /* @__PURE__ */ jsx57(RemoveScroll, { enabled: isOpen, removeScrollBar: false, children: /* @__PURE__ */ jsxs46("div", { className: "fixed inset-0 z-[1300] flex items-end md:items-center justify-center", children: [
-      /* @__PURE__ */ jsx57(
-        "div",
-        {
-          "data-state": state,
-          className: cn(
-            "absolute inset-0 bg-ods-overlay backdrop-blur-[2px] md:backdrop-blur-none",
-            "duration-200 fill-mode-forwards",
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-            // Hold the hidden end-state until unmount so the backdrop doesn't
-            // flash back to full opacity when the animation finishes a frame
-            // before the unmount timeout fires.
-            "data-[state=closed]:fill-mode-forwards"
-          ),
-          onClick: onClose,
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx57(
-        "div",
-        {
-          ref: (node) => {
-            panelRef.current = node;
-            if (typeof ref === "function") ref(node);
-            else if (ref) ref.current = node;
-          },
-          tabIndex: -1,
-          "data-state": state,
-          className: cn(
-            // min() keeps the desktop cap at 28rem while never letting content
-            // stretch the panel past the viewport (minus the mx-4 margins) on
-            // narrow screens. A single base utility (not md:max-w-md) so consumer
-            // max-w-* overrides via className still win at every breakpoint.
-            "relative z-10 w-full min-w-0 max-w-[min(28rem,calc(100vw-2rem))] flex flex-col",
-            "mx-4 mb-4 md:mb-0",
-            "max-h-[90vh]",
-            "bg-ods-bg md:bg-ods-card",
-            "border border-ods-border rounded-md shadow-xl",
-            "p-[var(--spacing-system-xl)] gap-[var(--spacing-system-l)]",
-            "duration-200 fill-mode-forwards",
-            "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-            "data-[state=open]:slide-in-from-bottom-4 md:data-[state=open]:slide-in-from-bottom-0 md:data-[state=open]:zoom-in-95",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
-            "data-[state=closed]:slide-out-to-bottom-4 md:data-[state=closed]:slide-out-to-bottom-0 md:data-[state=closed]:zoom-out-95",
-            // Hold the hidden end-state until unmount so the panel doesn't snap
-            // back to opacity/scale 1 for a frame before it unmounts.
-            "data-[state=closed]:fill-mode-forwards",
-            className
+    return /* @__PURE__ */ jsx57(RemoveScroll, { enabled: isOpen, removeScrollBar: false, children: /* @__PURE__ */ jsxs46(
+      "div",
+      {
+        className: "fixed inset-0 z-[1300] flex items-end md:items-center justify-center transition-[padding] duration-200",
+        style: { paddingBottom: "var(--of-keyboard-inset, 0px)" },
+        children: [
+          /* @__PURE__ */ jsx57(
+            "div",
+            {
+              "data-state": state,
+              className: cn(
+                "absolute inset-0 bg-ods-overlay backdrop-blur-[2px] md:backdrop-blur-none",
+                "duration-200 fill-mode-forwards",
+                "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+                "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+                // Hold the hidden end-state until unmount so the backdrop doesn't
+                // flash back to full opacity when the animation finishes a frame
+                // before the unmount timeout fires.
+                "data-[state=closed]:fill-mode-forwards"
+              ),
+              onClick: onClose,
+              "aria-hidden": "true"
+            }
           ),
-          role: "dialog",
-          "aria-modal": "true",
-          children: /* @__PURE__ */ jsx57(ModalContext.Provider, { value: { onClose }, children })
-        }
-      )
-    ] }) });
+          /* @__PURE__ */ jsx57(
+            "div",
+            {
+              ref: (node) => {
+                panelRef.current = node;
+                if (typeof ref === "function") ref(node);
+                else if (ref) ref.current = node;
+              },
+              tabIndex: -1,
+              "data-state": state,
+              className: cn(
+                // min() keeps the desktop cap at 28rem while never letting content
+                // stretch the panel past the viewport (minus the mx-4 margins) on
+                // narrow screens. A single base utility (not md:max-w-md) so consumer
+                // max-w-* overrides via className still win at every breakpoint.
+                "relative z-10 w-full min-w-0 max-w-[min(28rem,calc(100vw-2rem))] flex flex-col",
+                "mx-4 mb-4 md:mb-0",
+                // dvh, not vh: vh ignores a mobile browser's retracting URL bar, so
+                // 90vh already overflowed behind Safari's toolbar. The `100%-2rem`
+                // arm resolves against the keyboard-padded wrapper above and caps
+                // the panel to what's left of it, less the 1rem `mb-4` and a
+                // matching 1rem of breathing room at the top — header and footer
+                // stay pinned, ModalV2Content scrolls. min() picks 90dvh on any
+                // viewport over 320px tall, so desktop is untouched.
+                "max-h-[min(90dvh,100%-2rem)]",
+                "bg-ods-bg md:bg-ods-card",
+                "border border-ods-border rounded-md shadow-xl",
+                "p-[var(--spacing-system-xl)] gap-[var(--spacing-system-l)]",
+                "duration-200 fill-mode-forwards",
+                "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+                "data-[state=open]:slide-in-from-bottom-4 md:data-[state=open]:slide-in-from-bottom-0 md:data-[state=open]:zoom-in-95",
+                "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+                "data-[state=closed]:slide-out-to-bottom-4 md:data-[state=closed]:slide-out-to-bottom-0 md:data-[state=closed]:zoom-out-95",
+                // Hold the hidden end-state until unmount so the panel doesn't snap
+                // back to opacity/scale 1 for a frame before it unmounts.
+                "data-[state=closed]:fill-mode-forwards",
+                className
+              ),
+              role: "dialog",
+              "aria-modal": "true",
+              children: /* @__PURE__ */ jsx57(ModalContext.Provider, { value: { onClose }, children })
+            }
+          )
+        ]
+      }
+    ) });
   }
 );
 Modal.displayName = "ModalV2";
@@ -21312,7 +21326,16 @@ var AlertDialogContent = React67.forwardRef(({ className, ...props }, ref) => /*
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2 md:rounded-lg",
+        // Centered on the KEYBOARD-FREE area, not the layout viewport: nothing
+        // resizes the viewport when a mobile software keyboard opens, so a
+        // plain top-[50%] leaves the lower half of the dialog behind it. The
+        // max-height keeps that upward shift from pushing the top off-screen.
+        // See modal-v2.tsx for the full reasoning; --of-keyboard-inset is
+        // published by the app (keyboard-inset.ts) and 0 everywhere else.
+        // Content scrolls directly here, where DialogContent has to hand that
+        // job to a wrapper: this Content has no absolutely-positioned close
+        // button for a scroll container to carry off the top.
+        "fixed left-[50%] top-[calc(50%_-_var(--of-keyboard-inset,0px)/2)] z-50 grid w-full max-w-lg max-h-[calc(100dvh_-_var(--of-keyboard-inset,0px)_-_2rem)] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-[var(--spacing-system-mf)] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2 md:rounded-lg",
         className
       ),
       ...props
@@ -21422,12 +21445,31 @@ var DialogContent = React68.forwardRef(({ className, children, ...props }, ref)
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-[9999] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2 md:rounded-lg",
+        // Centered on the KEYBOARD-FREE area, not the layout viewport: nothing
+        // resizes the viewport when a mobile software keyboard opens, so a
+        // plain top-[50%] leaves the lower half of the dialog behind it. See
+        // modal-v2.tsx for the full reasoning; --of-keyboard-inset is published
+        // by the app (keyboard-inset.ts) and 0 everywhere else.
+        //
+        // The cap is on THIS box but the scrolling is not: the close button
+        // below is `absolute` against it, so a scroll container here would
+        // carry the X off the top. The wrapper around `children` scrolls
+        // instead, and carries the section gap that used to sit here so
+        // header/body/footer keep their spacing.
+        //
+        // `grid-rows-[minmax(0,1fr)]` is what makes the cap bite. An implicit
+        // row track is `auto`-sized, so it grows to its content and overflows
+        // the max-height no matter what min-height the wrapper carries —
+        // measured at 1136px of rows inside an 843px box. Constraining the
+        // track is what hands the wrapper a scrollbar; `1fr` still collapses to
+        // max-content when the dialog is shorter than the cap, so short dialogs
+        // keep hugging their content.
+        "fixed left-[50%] top-[calc(50%_-_var(--of-keyboard-inset,0px)/2)] z-[9999] grid grid-rows-[minmax(0,1fr)] w-full max-w-lg max-h-[calc(100dvh_-_var(--of-keyboard-inset,0px)_-_2rem)] translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2 md:rounded-lg",
         className
       ),
       ...props,
       children: [
-        children,
+        /* @__PURE__ */ jsx141("div", { className: "grid min-h-0 gap-[var(--spacing-system-mf)] overflow-y-auto", children }),
         /* @__PURE__ */ jsxs110(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
           /* @__PURE__ */ jsx141(X3, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx141("span", { className: "sr-only", children: "Close" })
@@ -62025,4 +62067,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-MH4CJO6T.js.map
+//# sourceMappingURL=chunk-ILAQ6JAP.js.map