@sarunyu/system-one 4.9.36 → 4.9.37

package/AGENTS.md

@@ -90,6 +90,24 @@ in this package.** This file is the short version: the rules you must follow.
    share one `const body = …` between the two branches. See the `LoginSheet`
    recipe in `llms.txt`.
 
+8. **`<BottomSheet>` MUST use the lazy-mount pattern.** Vaul mounts its portal
+   immediately when `<BottomSheet>` enters the React tree — even with
+   `open={false}`. Always guard with an `everOpened` flag so the component
+   never mounts until the user first opens it.
+   ```tsx
+   // button-triggered
+   const [everOpened, setEverOpened] = useState(false);
+   const [open, setOpen] = useState(false);
+   <Button onClick={() => { setEverOpened(true); setOpen(true); }}>Open</Button>
+   {everOpened && <BottomSheet open={open} onOpenChange={setOpen}>…</BottomSheet>}
+
+   // prop-driven (receiving open from parent)
+   const [everOpened, setEverOpened] = useState(false);
+   useEffect(() => { if (open) setEverOpened(true); }, [open]);
+   if (!everOpened) return null;
+   return <BottomSheet open={open} onOpenChange={…}>…</BottomSheet>;
+   ```
+
 ## Setup check
 
 Required one-liner in the app entry (App Router: `app/layout.tsx`,

package/llms.txt

@@ -1124,6 +1124,24 @@ type BottomSheetRightSide  = "icon" | "action" | "none";
 - `rightSide="action"` — inline text button (e.g., "Save"), fires `onActionClick`.
 - `rightSide="none"` — nothing on the right.
 
+**CRITICAL — lazy-mount pattern (always required):** Vaul mounts its portal
+immediately when `<BottomSheet>` enters the React tree, even with `open={false}`.
+Always guard with an `everOpened` flag so it never mounts until first opened.
+
+```tsx
+// button-triggered
+const [everOpened, setEverOpened] = useState(false);
+const [open, setOpen] = useState(false);
+<Button onClick={() => { setEverOpened(true); setOpen(true); }}>Open</Button>
+{everOpened && <BottomSheet open={open} onOpenChange={setOpen}>…</BottomSheet>}
+
+// prop-driven (open comes from parent)
+const [everOpened, setEverOpened] = useState(false);
+useEffect(() => { if (open) setEverOpened(true); }, [open]);
+if (!everOpened) return null;
+return <BottomSheet open={open} onOpenChange={…}>…</BottomSheet>;
+```
+
 `showHandle` (default `true`) shows the grab handle at the top. Hide it only
 when you want a fully formal surface. Do not render a `<BottomSheet>` on desktop
 layouts — use `<Modal>` instead.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarunyu/system-one",
-  "version": "4.9.36",
+  "version": "4.9.37",
   "type": "module",
   "description": "A production-ready React design system built for AI-powered web generation tools (Figma Make, Lovable, V0). Tailwind CSS v4 + CSS custom properties for full theming support.",
   "keywords": [