@ag2/weave 0.13.0 → 0.14.0

package/README.md

@@ -4,6 +4,27 @@
 
 The AG2 Space design system. Forked from [folds](https://github.com/cinnyapp/folds) 2.6.2 (Apache-2.0); `@ag2/weave@0.1.0` is folds@2.6.2 under the new name.
 
+## Temporary sidebar collapse
+
+Keep `PageNav` mounted and call `useRoomNavAutoCollapse` once from the room layout:
+
+```tsx
+import { useRoomNavAutoCollapse } from "@ag2/weave";
+
+useRoomNavAutoCollapse(commonsOpen && !isMobile, roomId);
+```
+
+The hook collapses the sidebar before paint without writing `roomNavCollapsed`.
+Closing Commons or unmounting the layout releases the request and restores the saved
+preference. Manual controls still use `useRoomNavCollapsed()`; they toggle the effective
+state, save the user's choice, and override requests already active. Switching tabs in
+the same room preserves that choice. Closing and reopening Commons, or changing `roomId`,
+starts a fresh automatic collapse. Leave the optional scope unchanged for the lifetime
+of one open panel, and disable the request on mobile.
+
+`useRoomNavCollapsed()` retains its existing tuple and animation options. The collapsed
+sidebar's restore button remains the way to expand it; no room-header control is needed.
+
 ## Ambient orb background
 
 `OrbBackground` renders the Absorb / Calm / Aura field and is the default background

package/dist/components/page/Page.d.ts

@@ -12,6 +12,12 @@ export declare type RoomNavToggleOptions = {
     animate?: boolean;
 };
 export declare function useRoomNavCollapsed(): [boolean, (options?: RoomNavToggleOptions) => void];
+/** Temporarily collapse the sidebar without writing its saved preference.
+ * Manual toggles win until this request ends. Changing scope starts a new request
+ * (for example, entering another room); switching surfaces in one scope does not.
+ * Call once from the layout owning the request, outside the collapsible content.
+ */
+export declare function useRoomNavAutoCollapse(active: boolean, scope?: string): void;
 declare type PageNavProps = ClientDrawerLayoutProps & css.PageNavVariants & {
     /** Decorative brand mark shown in the collapsed rail until hover or keyboard focus. */
     collapsedMark?: ReactNode;

package/dist/components/page/roomNavCollapseStore.d.ts

@@ -0,0 +1,7 @@
+/** One effective state shared by the sidebar and all of its manual controls. */
+export declare const createRoomNavCollapseStore: (storage: () => Pick<Storage, "getItem" | "setItem">) => {
+    getSnapshot: () => boolean;
+    subscribe: (listener: () => void) => () => void;
+    toggle: () => void;
+    requestCollapse: () => () => void;
+};

package/dist/index.js

@@ -16328,39 +16328,85 @@ function beginDragOverlay(cursor) {
   document.body.appendChild(overlay);
   return () => overlay.remove();
 }
+const ROOM_NAV_COLLAPSED_KEY = "roomNavCollapsed";
+const createRoomNavCollapseStore = (storage) => {
+  const listeners = /* @__PURE__ */ new Set();
+  const requests = /* @__PURE__ */ new Map();
+  let preference = false;
+  let unsavedPreference = false;
+  const readPreference = () => {
+    if (unsavedPreference)
+      return preference;
+    try {
+      preference = storage().getItem(ROOM_NAV_COLLAPSED_KEY) === "1";
+    } catch {
+    }
+    return preference;
+  };
+  const getSnapshot = () => readPreference() || Array.from(requests.values()).some(Boolean);
+  const emit = () => listeners.forEach((listener) => listener());
+  return {
+    getSnapshot,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    toggle: () => {
+      preference = !getSnapshot();
+      try {
+        storage().setItem(ROOM_NAV_COLLAPSED_KEY, preference ? "1" : "0");
+        unsavedPreference = false;
+      } catch {
+        unsavedPreference = true;
+      }
+      requests.forEach((_, token) => requests.set(token, false));
+      emit();
+    },
+    requestCollapse: () => {
+      const token = Symbol("auto-collapse");
+      requests.set(token, true);
+      emit();
+      return () => {
+        requests.delete(token);
+        emit();
+      };
+    }
+  };
+};
 const PageRoot = ({ nav, children }) => /* @__PURE__ */ jsxs(Box, { grow: "Yes", className: PageRoot$1, children: [
   nav,
   children
 ] });
-const ROOM_NAV_COLLAPSED_KEY = "roomNavCollapsed";
-const navCollapseListeners = /* @__PURE__ */ new Set();
+const navCollapseStore = createRoomNavCollapseStore(() => localStorage);
 let animateNavChange = false;
-const readNavCollapsed = () => {
-  try {
-    return localStorage.getItem(ROOM_NAV_COLLAPSED_KEY) === "1";
-  } catch {
-    return false;
-  }
-};
 function useRoomNavCollapsed() {
-  const [collapsed, set] = useState(readNavCollapsed);
-  useEffect(() => {
-    const cb = () => set(readNavCollapsed());
-    navCollapseListeners.add(cb);
-    return () => {
-      navCollapseListeners.delete(cb);
-    };
+  const [collapsed, set] = useState(navCollapseStore.getSnapshot);
+  useLayoutEffect(() => {
+    const cb = () => set(navCollapseStore.getSnapshot());
+    const unsubscribe = navCollapseStore.subscribe(cb);
+    cb();
+    return unsubscribe;
   }, []);
   const toggle = useCallback((options) => {
     animateNavChange = (options == null ? void 0 : options.animate) ?? false;
-    try {
-      localStorage.setItem(ROOM_NAV_COLLAPSED_KEY, readNavCollapsed() ? "0" : "1");
-    } catch {
-    }
-    navCollapseListeners.forEach((cb) => cb());
+    navCollapseStore.toggle();
   }, []);
   return [collapsed, toggle];
 }
+function useRoomNavAutoCollapse(active, scope) {
+  useLayoutEffect(() => {
+    if (!active)
+      return void 0;
+    animateNavChange = false;
+    const release = navCollapseStore.requestCollapse();
+    return () => {
+      animateNavChange = false;
+      release();
+    };
+  }, [active, scope]);
+}
 const ROOM_NAV_WIDTH_KEY = "roomNavWidth";
 const NAV_MIN_WIDTH = 180;
 const NAV_MAX_WIDTH = 480;
@@ -16407,16 +16453,16 @@ const PageNav = ({ size: size2, children, collapsedMark }) => {
     duration = closed ? NAV_EXIT_MS : NAV_ENTER_MS;
   }
   useLayoutEffect(() => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const before = previousExtent.current;
     const wasClosed = previousClosed.current;
     previousExtent.current = extent;
     previousClosed.current = closed;
     if (before !== void 0 && wasClosed !== closed) {
-      if (closed)
-        (_a = showButtonRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
-      else if (document.activeElement === showButtonRef.current) {
-        const target = ((_b = drawerRef.current) == null ? void 0 : _b.querySelector("[data-nav-collapse]")) ?? ((_c = drawerRef.current) == null ? void 0 : _c.querySelector("button, a"));
+      if (closed && ((_a = drawerRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+        (_b = showButtonRef.current) == null ? void 0 : _b.focus({ preventScroll: true });
+      } else if (!closed && document.activeElement === showButtonRef.current) {
+        const target = ((_c = drawerRef.current) == null ? void 0 : _c.querySelector("[data-nav-collapse]")) ?? ((_d = drawerRef.current) == null ? void 0 : _d.querySelector("button, a"));
         target == null ? void 0 : target.focus({ preventScroll: true });
       }
     }
@@ -16436,13 +16482,13 @@ const PageNav = ({ size: size2, children, collapsedMark }) => {
     }
     if (before === void 0 || before === extent)
       return;
-    const main = (_d = rootRef.current) == null ? void 0 : _d.nextElementSibling;
+    const main = (_e = rootRef.current) == null ? void 0 : _e.nextElementSibling;
     if (!main)
       return;
     const matrix = getComputedStyle(main).transform;
     const values = matrix.match(/matrix(3d)?\((.+)\)/);
     const currentX = values ? Number(values[2].split(",")[values[1] ? 12 : 4]) || 0 : 0;
-    (_e = mainMotion.current) == null ? void 0 : _e.cleanup();
+    (_f = mainMotion.current) == null ? void 0 : _f.cleanup();
     main.style.transition = "none";
     main.style.transform = `translateX(${currentX + before - extent}px)`;
     main.getBoundingClientRect();
@@ -18366,6 +18412,7 @@ export {
   useOverlayContainer,
   usePopOutContainer,
   useResizeObserver,
+  useRoomNavAutoCollapse,
   useRoomNavCollapsed,
   useScreenSize,
   useScreenSizeContext,