@xenide-io/the-old-ui-theme 0.6.12 → 0.6.13

package/dist/suite.js

@@ -59,6 +59,54 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/suite/lib/use-lock-mobile-page-zoom.ts
+function preventGesture(event) {
+  event.preventDefault();
+}
+function useLockMobilePageZoom() {
+  (0, import_react7.useEffect)(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const media = window.matchMedia(MOBILE_PAGE_ZOOM_QUERY);
+    const meta = document.querySelector('meta[name="viewport"]');
+    const original = meta == null ? void 0 : meta.getAttribute("content");
+    const apply = () => {
+      const lock = media.matches;
+      document.documentElement.toggleAttribute(
+        "data-suite-lock-page-zoom",
+        lock
+      );
+      document.removeEventListener("gesturestart", preventGesture);
+      document.removeEventListener("gesturechange", preventGesture);
+      if (lock) {
+        meta == null ? void 0 : meta.setAttribute("content", LOCKED_VIEWPORT);
+        document.addEventListener("gesturestart", preventGesture);
+        document.addEventListener("gesturechange", preventGesture);
+        return;
+      }
+      if (original) meta == null ? void 0 : meta.setAttribute("content", original);
+    };
+    apply();
+    media.addEventListener("change", apply);
+    return () => {
+      media.removeEventListener("change", apply);
+      document.documentElement.removeAttribute("data-suite-lock-page-zoom");
+      if (original) meta == null ? void 0 : meta.setAttribute("content", original);
+      document.removeEventListener("gesturestart", preventGesture);
+      document.removeEventListener("gesturechange", preventGesture);
+    };
+  }, []);
+}
+var import_react7, MOBILE_PAGE_ZOOM_QUERY, LOCKED_VIEWPORT;
+var init_use_lock_mobile_page_zoom = __esm({
+  "src/suite/lib/use-lock-mobile-page-zoom.ts"() {
+    "use strict";
+    "use client";
+    import_react7 = require("react");
+    MOBILE_PAGE_ZOOM_QUERY = "(hover: none) and (pointer: coarse)";
+    LOCKED_VIEWPORT = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover";
+  }
+});
+
 // src/suite/components/theme-provider.tsx
 function systemTheme(fallback) {
   if (typeof window === "undefined") return fallback;
@@ -96,7 +144,8 @@ function SuiteThemeProvider({
   config,
   children
 }) {
-  const [state, setState] = (0, import_react7.useState)(() => {
+  useLockMobilePageZoom();
+  const [state, setState] = (0, import_react8.useState)(() => {
     const theme2 = readStoredTheme(config.storageKey);
     if (typeof document === "undefined") {
       return { theme: theme2, resolvedTheme: config.fallbackTheme };
@@ -106,10 +155,10 @@ function SuiteThemeProvider({
     return { theme: theme2, resolvedTheme: resolvedTheme2 };
   });
   const { theme, resolvedTheme } = state;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     applyTheme(theme, config);
   }, [theme, config]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (theme !== "system") return;
     const media = window.matchMedia("(prefers-color-scheme: dark)");
     const update = () => {
@@ -119,7 +168,7 @@ function SuiteThemeProvider({
     media.addEventListener("change", update);
     return () => media.removeEventListener("change", update);
   }, [theme, config]);
-  const setTheme = (0, import_react7.useCallback)(
+  const setTheme = (0, import_react8.useCallback)(
     (next) => {
       const resolved = applyTheme(next, config);
       setState({ theme: next, resolvedTheme: resolved });
@@ -127,7 +176,7 @@ function SuiteThemeProvider({
     },
     [config]
   );
-  const toggleTheme = (0, import_react7.useCallback)(() => {
+  const toggleTheme = (0, import_react8.useCallback)(() => {
     setState((prev) => {
       const next = resolveTheme(prev.theme, config.fallbackTheme) === "dark" ? "light" : "dark";
       const resolved = applyTheme(next, config);
@@ -135,25 +184,26 @@ function SuiteThemeProvider({
       return { theme: next, resolvedTheme: resolved };
     });
   }, [config]);
-  const value = (0, import_react7.useMemo)(
+  const value = (0, import_react8.useMemo)(
     () => ({ theme, resolvedTheme, setTheme, toggleTheme }),
     [theme, resolvedTheme, setTheme, toggleTheme]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SuiteThemeContext.Provider, { value, children });
 }
 function useSuiteTheme() {
-  const ctx = (0, import_react7.useContext)(SuiteThemeContext);
+  const ctx = (0, import_react8.useContext)(SuiteThemeContext);
   if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
   return ctx;
 }
-var import_react7, import_jsx_runtime18, SuiteThemeContext;
+var import_react8, import_jsx_runtime18, SuiteThemeContext;
 var init_theme_provider = __esm({
   "src/suite/components/theme-provider.tsx"() {
     "use strict";
     "use client";
-    import_react7 = require("react");
+    import_react8 = require("react");
+    init_use_lock_mobile_page_zoom();
     import_jsx_runtime18 = require("react/jsx-runtime");
-    SuiteThemeContext = (0, import_react7.createContext)(null);
+    SuiteThemeContext = (0, import_react8.createContext)(null);
   }
 });
 
@@ -166,8 +216,8 @@ function SuiteAiBlockNoteMessage({
   markdown
 }) {
   const { resolvedTheme } = useSuiteTheme();
-  const editor = (0, import_react10.useCreateBlockNote)({ schema: assistantSchema });
-  (0, import_react9.useEffect)(() => {
+  const editor = (0, import_react11.useCreateBlockNote)({ schema: assistantSchema });
+  (0, import_react10.useEffect)(() => {
     try {
       const blocks = editor.tryParseMarkdownToBlocks(markdown);
       editor.replaceBlocks(
@@ -181,7 +231,7 @@ function SuiteAiBlockNoteMessage({
     }
   }, [editor, markdown]);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_react10.BlockNoteViewRaw,
+    import_react11.BlockNoteViewRaw,
     {
       editor,
       editable: false,
@@ -197,14 +247,14 @@ function SuiteAiBlockNoteMessage({
     }
   );
 }
-var import_react9, import_core, import_react10, import_style, import_jsx_runtime20, assistantSchema;
+var import_react10, import_core, import_react11, import_style, import_jsx_runtime20, assistantSchema;
 var init_ai_message_blocknote = __esm({
   "src/suite/components/ai-message-blocknote.tsx"() {
     "use strict";
     "use client";
-    import_react9 = require("react");
+    import_react10 = require("react");
     import_core = require("@blocknote/core");
-    import_react10 = require("@blocknote/react");
+    import_react11 = require("@blocknote/react");
     import_style = require("@blocknote/react/style.css");
     init_theme_provider();
     import_jsx_runtime20 = require("react/jsx-runtime");
@@ -249,6 +299,8 @@ __export(suite_exports, {
   SUITE_ICON_NAMES: () => SUITE_ICON_NAMES,
   SUITE_MUTATED_EVENT: () => SUITE_MUTATED_EVENT,
   SUITE_OPEN_ASK_AI_EVENT: () => SUITE_OPEN_ASK_AI_EVENT,
+  SUITE_SIDEBAR_WIDTH_COOKIE: () => SUITE_SIDEBAR_WIDTH_COOKIE,
+  SUITE_SIDEBAR_WIDTH_KEY: () => SUITE_SIDEBAR_WIDTH_KEY,
   SUITE_SPRINGS: () => SUITE_SPRINGS,
   SourceAppGlyph: () => SourceAppGlyph,
   SuiteAiPanel: () => SuiteAiPanel,
@@ -298,11 +350,14 @@ __export(suite_exports, {
   consumePendingAskAiPrompt: () => consumePendingAskAiPrompt,
   consumeSuiteAskAiOpenFromLocation: () => consumeSuiteAskAiOpenFromLocation,
   getTodayGreeting: () => getTodayGreeting,
-  m: () => import_react14.m,
+  m: () => import_react15.m,
   openSuiteAskAi: () => openSuiteAskAi,
   pathWithSuiteAskAiOpen: () => pathWithSuiteAskAiOpen,
+  persistSidebarWidth: () => persistSidebarWidth,
   persistSuiteAskAiOpen: () => persistSuiteAskAiOpen,
+  readSidebarWidth: () => readSidebarWidth,
   readSuiteAskAiOpen: () => readSuiteAskAiOpen,
+  resetSuiteSidebarWidth: () => resetSuiteSidebarWidth,
   resolveSuiteNotificationHref: () => resolveSuiteNotificationHref,
   sidebarColumnWidth: () => sidebarColumnWidth,
   sourceToSuiteApp: () => sourceToSuiteApp,
@@ -2609,14 +2664,14 @@ function TodayCalibrating({
 init_theme_provider();
 
 // src/suite/components/ai-panel.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_iconoir_react8 = require("iconoir-react");
 
 // src/components/ui/Tooltip.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var TooltipDelayContext = (0, import_react8.createContext)(0);
+var TooltipDelayContext = (0, import_react9.createContext)(0);
 function tooltipPosition(trigger, side, align, offset) {
   const horizontal = align === "start" ? trigger.left : align === "end" ? trigger.right : trigger.left + trigger.width / 2;
   const vertical = align === "start" ? trigger.top : align === "end" ? trigger.bottom : trigger.top + trigger.height / 2;
@@ -2656,12 +2711,12 @@ function Tooltip({
   onOpenChange,
   delayDuration
 }) {
-  const providerDelay = (0, import_react8.useContext)(TooltipDelayContext);
-  const generatedId = (0, import_react8.useId)().replace(/:/g, "");
-  const triggerRef = (0, import_react8.useRef)(null);
-  const timerRef = (0, import_react8.useRef)(null);
-  const [internalOpen, setInternalOpen] = (0, import_react8.useState)(defaultOpen);
-  const [position, setPosition] = (0, import_react8.useState)(null);
+  const providerDelay = (0, import_react9.useContext)(TooltipDelayContext);
+  const generatedId = (0, import_react9.useId)().replace(/:/g, "");
+  const triggerRef = (0, import_react9.useRef)(null);
+  const timerRef = (0, import_react9.useRef)(null);
+  const [internalOpen, setInternalOpen] = (0, import_react9.useState)(defaultOpen);
+  const [position, setPosition] = (0, import_react9.useState)(null);
   const isOpen = open != null ? open : internalOpen;
   const triggerId = children.props.id;
   const tooltipId = triggerId ? `${triggerId}-tooltip` : `ph-tooltip-${generatedId}`;
@@ -2695,7 +2750,7 @@ function Tooltip({
     clearTimer();
     setOpen(false);
   }
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!isOpen) return;
     const reposition = () => updatePosition();
     window.addEventListener("resize", reposition);
@@ -2705,9 +2760,9 @@ function Tooltip({
       window.removeEventListener("scroll", reposition, true);
     };
   });
-  (0, import_react8.useEffect)(() => () => clearTimer(), []);
+  (0, import_react9.useEffect)(() => () => clearTimer(), []);
   const describedBy = [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ");
-  const trigger = (0, import_react8.cloneElement)(children, { "aria-describedby": describedBy });
+  const trigger = (0, import_react9.cloneElement)(children, { "aria-describedby": describedBy });
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "span",
@@ -2749,7 +2804,7 @@ function Tooltip({
 
 // src/suite/components/ai-panel.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var SuiteAiBlockNoteMessage2 = (0, import_react11.lazy)(() => Promise.resolve().then(() => (init_ai_message_blocknote(), ai_message_blocknote_exports)));
+var SuiteAiBlockNoteMessage2 = (0, import_react12.lazy)(() => Promise.resolve().then(() => (init_ai_message_blocknote(), ai_message_blocknote_exports)));
 var SUITE_OPEN_ASK_AI_EVENT = "shellstack:open-ask-ai";
 var SUITE_ASK_AI_OPEN_KEY = "shellstack:shelly-open";
 var SUITE_ASK_AI_OPEN_QUERY = "shelly";
@@ -2833,11 +2888,11 @@ function SuiteAiPanel({
   onSameAppNavigate,
   resolveAction
 }) {
-  const inputId = (0, import_react11.useId)();
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react11.useState)(false);
-  const [resolvingId, setResolvingId] = (0, import_react11.useState)("");
+  const inputId = (0, import_react12.useId)();
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react12.useState)(false);
+  const [resolvingId, setResolvingId] = (0, import_react12.useState)("");
   const open = openProp != null ? openProp : uncontrolledOpen;
-  const setOpen = (0, import_react11.useCallback)(
+  const setOpen = (0, import_react12.useCallback)(
     (next) => {
       persistSuiteAskAiOpen(next);
       if (openProp === void 0) setUncontrolledOpen(next);
@@ -2845,17 +2900,17 @@ function SuiteAiPanel({
     },
     [onOpenChange, openProp]
   );
-  const [prompt, setPrompt] = (0, import_react11.useState)("");
-  const [messages, setMessages] = (0, import_react11.useState)([]);
-  const [loading, setLoading] = (0, import_react11.useState)(false);
-  const [hydrating, setHydrating] = (0, import_react11.useState)(false);
-  const [error, setError] = (0, import_react11.useState)("");
-  const [atBottom, setAtBottom] = (0, import_react11.useState)(true);
-  const scrollerRef = (0, import_react11.useRef)(null);
-  const textareaRef = (0, import_react11.useRef)(null);
-  const abortRef = (0, import_react11.useRef)(null);
-  const pendingPromptRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const [prompt, setPrompt] = (0, import_react12.useState)("");
+  const [messages, setMessages] = (0, import_react12.useState)([]);
+  const [loading, setLoading] = (0, import_react12.useState)(false);
+  const [hydrating, setHydrating] = (0, import_react12.useState)(false);
+  const [error, setError] = (0, import_react12.useState)("");
+  const [atBottom, setAtBottom] = (0, import_react12.useState)(true);
+  const scrollerRef = (0, import_react12.useRef)(null);
+  const textareaRef = (0, import_react12.useRef)(null);
+  const abortRef = (0, import_react12.useRef)(null);
+  const pendingPromptRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     function onOpen(event) {
       var _a;
       const detail = event.detail;
@@ -2869,19 +2924,19 @@ function SuiteAiPanel({
     window.addEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
     return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
   }, [setOpen]);
-  const scrollToBottom = (0, import_react11.useCallback)((behavior = "auto") => {
+  const scrollToBottom = (0, import_react12.useCallback)((behavior = "auto") => {
     const el = scrollerRef.current;
     if (!el) return;
     el.scrollTo({ top: el.scrollHeight, behavior });
     setAtBottom(true);
   }, []);
-  const handleScroll = (0, import_react11.useCallback)(() => {
+  const handleScroll = (0, import_react12.useCallback)(() => {
     const el = scrollerRef.current;
     if (!el) return;
     const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
     setAtBottom(distance < 64);
   }, []);
-  const hydrate = (0, import_react11.useCallback)(async () => {
+  const hydrate = (0, import_react12.useCallback)(async () => {
     var _a;
     setHydrating(true);
     setError("");
@@ -2899,7 +2954,7 @@ function SuiteAiPanel({
       setHydrating(false);
     }
   }, [fetchChat]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     var _a;
     if (!open) return;
     const queued = (_a = pendingPromptRef.current) != null ? _a : consumePendingAskAiPrompt();
@@ -2910,14 +2965,14 @@ function SuiteAiPanel({
       if (pending) setPrompt(pending);
     });
   }, [open, hydrate]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (open && atBottom) scrollToBottom();
   }, [messages, loading, open, atBottom, scrollToBottom]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     var _a;
     if (open && !hydrating) (_a = textareaRef.current) == null ? void 0 : _a.focus();
   }, [open, hydrating]);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     const el = textareaRef.current;
     if (!el) return;
     el.style.height = "auto";
@@ -3132,7 +3187,7 @@ function SuiteAiPanel({
                         ),
                         /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "min-w-0 max-w-[85%] space-y-2", children: [
                           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                            import_react11.Suspense,
+                            import_react12.Suspense,
                             {
                               fallback: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "whitespace-pre-wrap break-words", children: message.content }),
                               children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SuiteAiBlockNoteMessage2, { markdown: message.content })
@@ -3293,7 +3348,7 @@ function SuiteAiPanel({
 }
 
 // src/suite/components/workspace-switcher.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_iconoir_react9 = require("iconoir-react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function SuiteWorkspaceSwitcher({
@@ -3311,7 +3366,7 @@ function SuiteWorkspaceSwitcher({
   footer
 }) {
   var _a;
-  const [open, setOpen] = (0, import_react12.useState)(false);
+  const [open, setOpen] = (0, import_react13.useState)(false);
   const sections = (_a = groups == null ? void 0 : groups.filter((group) => group.workspaces.length > 0)) != null ? _a : workspaces.length > 0 ? [{ id: "workspaces", label: "Switch workspace", workspaces }] : [];
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     DropdownMenu2,
@@ -3401,12 +3456,26 @@ function SuiteWorkspaceSwitcher({
 }
 
 // src/suite/lib/use-sidebar-width.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 var SIDEBAR_RAIL_WIDTH = 56;
 var SIDEBAR_COLLAPSE_THRESHOLD = 80;
 var SIDEBAR_MIN_EXPANDED_WIDTH = 180;
 var SIDEBAR_MAX_WIDTH = 640;
 var SIDEBAR_DEFAULT_WIDTH = 320;
+var SUITE_SIDEBAR_WIDTH_KEY = "shellstack:sidebar-width";
+var SUITE_SIDEBAR_WIDTH_COOKIE = "shellstack_sidebar_width";
+var LEGACY_SIDEBAR_WIDTH_KEYS = [
+  "tides-sidebar-width",
+  "tt-sidebar-width",
+  "kraken-sidebar-width",
+  "shellstack-sidebar-width",
+  "nakama-sidebar-width"
+];
+function isSuiteSidebarKey(storageKey) {
+  return storageKey === SUITE_SIDEBAR_WIDTH_KEY || LEGACY_SIDEBAR_WIDTH_KEYS.includes(
+    storageKey
+  );
+}
 function sidebarColumnWidth(width, collapsed, _chatOpen = false) {
   if (collapsed) return SIDEBAR_RAIL_WIDTH;
   return width;
@@ -3419,40 +3488,136 @@ function snapWidth(width) {
   if (width < SIDEBAR_MIN_EXPANDED_WIDTH) return SIDEBAR_MIN_EXPANDED_WIDTH;
   return Math.min(SIDEBAR_MAX_WIDTH, width);
 }
-function useSidebarWidth(storageKey, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
-  const fallbackWidth = snapWidth(clampWidth(defaultWidth));
-  const [width, setWidth] = (0, import_react13.useState)(fallbackWidth);
-  const [narrowViewport, setNarrowViewport] = (0, import_react13.useState)(false);
-  const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
-  (0, import_react13.useEffect)(() => {
-    let stored = null;
+function parseWidth(raw) {
+  if (!raw) return null;
+  const parsed = Number.parseInt(raw, 10);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+function suiteCookieDomainAttr() {
+  var _a;
+  const host = window.location.hostname;
+  if (host === "localhost" || /^\d{1,3}(?:\.\d{1,3}){3}$/.test(host)) {
+    return "";
+  }
+  if (host.endsWith(".localhost")) {
+    return "; Domain=.localhost";
+  }
+  const known = /* @__PURE__ */ new Set([
+    "tides",
+    "kraken",
+    "turtletime",
+    "time",
+    "nakama",
+    "app",
+    "shellstack",
+    "portal"
+  ]);
+  const parts = host.split(".");
+  if (parts.length >= 3 && known.has((_a = parts[0]) != null ? _a : "")) {
+    return `; Domain=.${parts.slice(1).join(".")}`;
+  }
+  if (parts.length >= 2) return `; Domain=.${parts.slice(1).join(".")}`;
+  return "";
+}
+function readCookie(name) {
+  const prefix = `${name}=`;
+  for (const part of document.cookie.split(";")) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith(prefix)) {
+      return decodeURIComponent(trimmed.slice(prefix.length));
+    }
+  }
+  return null;
+}
+function writeCookie(name, value) {
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${name}=${encodeURIComponent(value)}; Path=/; Max-Age=31536000; SameSite=Lax${suiteCookieDomainAttr()}${secure}`;
+}
+function clearCookie(name) {
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${name}=; Path=/; Max-Age=0; SameSite=Lax${suiteCookieDomainAttr()}${secure}`;
+}
+function readSidebarWidth(storageKey) {
+  try {
+    if (isSuiteSidebarKey(storageKey)) {
+      const fromCookie = parseWidth(readCookie(SUITE_SIDEBAR_WIDTH_COOKIE));
+      if (fromCookie != null) return fromCookie;
+      const shared = parseWidth(localStorage.getItem(SUITE_SIDEBAR_WIDTH_KEY));
+      if (shared != null) return shared;
+      for (const key of LEGACY_SIDEBAR_WIDTH_KEYS) {
+        const legacy = parseWidth(localStorage.getItem(key));
+        if (legacy != null) return legacy;
+      }
+    }
+    return parseWidth(localStorage.getItem(storageKey));
+  } catch (e) {
+    return null;
+  }
+}
+function persistSidebarWidth(storageKey, value) {
+  try {
+    localStorage.setItem(storageKey, String(value));
+    if (isSuiteSidebarKey(storageKey)) {
+      localStorage.setItem(SUITE_SIDEBAR_WIDTH_KEY, String(value));
+    }
+  } catch (e) {
+  }
+  if (isSuiteSidebarKey(storageKey)) {
     try {
-      stored = localStorage.getItem(storageKey);
+      writeCookie(SUITE_SIDEBAR_WIDTH_COOKIE, String(value));
     } catch (e) {
     }
-    if (!stored) return;
-    const parsed = Number.parseInt(stored, 10);
-    if (!Number.isNaN(parsed)) {
-      queueMicrotask(() => setWidth(snapWidth(clampWidth(parsed))));
+  }
+}
+function resetSuiteSidebarWidth() {
+  try {
+    localStorage.removeItem(SUITE_SIDEBAR_WIDTH_KEY);
+    for (const key of LEGACY_SIDEBAR_WIDTH_KEYS) {
+      localStorage.removeItem(key);
     }
+    localStorage.removeItem("kraken-sidebar-collapsed");
+  } catch (e) {
+  }
+  try {
+    clearCookie(SUITE_SIDEBAR_WIDTH_COOKIE);
+  } catch (e) {
+  }
+}
+function useSidebarWidth(storageKey = SUITE_SIDEBAR_WIDTH_KEY, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
+  const fallbackWidth = snapWidth(clampWidth(defaultWidth));
+  const [width, setWidth] = (0, import_react14.useState)(fallbackWidth);
+  const [narrowViewport, setNarrowViewport] = (0, import_react14.useState)(false);
+  const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
+  (0, import_react14.useLayoutEffect)(() => {
+    const sync = () => {
+      const stored = readSidebarWidth(storageKey);
+      if (stored == null) return;
+      setWidth(snapWidth(clampWidth(stored)));
+    };
+    sync();
+    window.addEventListener("pageshow", sync);
+    window.addEventListener("focus", sync);
+    document.addEventListener("visibilitychange", sync);
+    return () => {
+      window.removeEventListener("pageshow", sync);
+      window.removeEventListener("focus", sync);
+      document.removeEventListener("visibilitychange", sync);
+    };
   }, [storageKey]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     const media = window.matchMedia("(max-width: 639px)");
     const sync = () => setNarrowViewport(media.matches);
     sync();
     media.addEventListener("change", sync);
     return () => media.removeEventListener("change", sync);
   }, []);
-  const persist = (0, import_react13.useCallback)(
+  const persist = (0, import_react14.useCallback)(
     (value) => {
-      try {
-        localStorage.setItem(storageKey, String(value));
-      } catch (e) {
-      }
+      persistSidebarWidth(storageKey, value);
     },
     [storageKey]
   );
-  const setCollapsed = (0, import_react13.useCallback)(
+  const setCollapsed = (0, import_react14.useCallback)(
     (value) => {
       setWidth((current) => {
         const next = value ? SIDEBAR_RAIL_WIDTH : current <= SIDEBAR_COLLAPSE_THRESHOLD ? fallbackWidth : snapWidth(current);
@@ -3462,11 +3627,11 @@ function useSidebarWidth(storageKey, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
     },
     [fallbackWidth, persist]
   );
-  const resetWidth = (0, import_react13.useCallback)(() => {
+  const resetWidth = (0, import_react14.useCallback)(() => {
     setWidth(fallbackWidth);
     persist(fallbackWidth);
   }, [fallbackWidth, persist]);
-  const startResize = (0, import_react13.useCallback)(
+  const startResize = (0, import_react14.useCallback)(
     (event) => {
       event.preventDefault();
       const startX = event.clientX;
@@ -3488,7 +3653,7 @@ function useSidebarWidth(storageKey, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
     },
     [persist, width]
   );
-  const resizeBy = (0, import_react13.useCallback)(
+  const resizeBy = (0, import_react14.useCallback)(
     (delta) => {
       setWidth((current) => {
         const next = clampWidth(current + delta);
@@ -3502,10 +3667,10 @@ function useSidebarWidth(storageKey, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
 }
 
 // src/suite/lib/motion.tsx
-var import_react14 = require("motion/react");
+var import_react15 = require("motion/react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function SuiteMotionProvider({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react14.LazyMotion, { features: import_react14.domAnimation, strict: true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react15.LazyMotion, { features: import_react15.domAnimation, strict: true, children });
 }
 var SUITE_SPRINGS = {
   /** Snappy panel/sheet entrances — small overshoot. */
@@ -3662,7 +3827,7 @@ function SuiteEmptyState({
 }
 
 // src/suite/components/suite-settings-mobile-nav.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function SuiteSettingsMobileNav({
   items,
@@ -3681,7 +3846,7 @@ function SuiteSettingsMobileNav({
       children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex snap-x gap-2 overflow-x-auto pb-3 pt-1 scrollbar-hide [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: items.map((item) => {
         const Icon = item.icon;
         const active = activeHref === item.href || activeHref.startsWith(`${item.href}/`);
-        const iconNode = (0, import_react15.isValidElement)(item.icon) ? item.icon : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        const iconNode = (0, import_react16.isValidElement)(item.icon) ? item.icon : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Icon,
           {
             className: cn(
@@ -3719,7 +3884,7 @@ function SuiteSettingsMobileNav({
 
 // src/suite/components/suite-sidebar.tsx
 var import_link2 = __toESM(require("next/link"));
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_iconoir_react10 = require("iconoir-react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function renderNode(node, collapsed) {
@@ -3744,14 +3909,14 @@ function SuiteSidebar({
 }) {
   const showAskAi = Boolean(onAskAiOpenChange && askAi);
   const chatOpen = showAskAi && askAiOpen && !collapsed;
-  const setAskAi = (0, import_react16.useCallback)(
+  const setAskAi = (0, import_react17.useCallback)(
     (next) => {
       persistSuiteAskAiOpen(next);
       onAskAiOpenChange == null ? void 0 : onAskAiOpenChange(next);
     },
     [onAskAiOpenChange]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!onAskAiOpenChange) return;
     function onOpen() {
       onRequestExpand == null ? void 0 : onRequestExpand();
@@ -3760,7 +3925,7 @@ function SuiteSidebar({
     window.addEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
     return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
   }, [onAskAiOpenChange, onRequestExpand, setAskAi]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!chatOpen) return;
     function onKey(event) {
       if (event.key === "Escape") setAskAi(false);
@@ -3936,7 +4101,14 @@ function SuiteSidebar({
                   );
                   return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
                 }) }) }),
-                secondaryNav ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "shrink-0", "data-test": "suite-sidebar-secondary-nav", children: secondaryNav }) : null
+                secondaryNav ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  "div",
+                  {
+                    className: "min-h-0 flex-1",
+                    "data-test": "suite-sidebar-secondary-nav",
+                    children: secondaryNav
+                  }
+                ) : null
               ] })
             ]
           }
@@ -4082,6 +4254,8 @@ function SuiteAppLayout({
   SUITE_ICON_NAMES,
   SUITE_MUTATED_EVENT,
   SUITE_OPEN_ASK_AI_EVENT,
+  SUITE_SIDEBAR_WIDTH_COOKIE,
+  SUITE_SIDEBAR_WIDTH_KEY,
   SUITE_SPRINGS,
   SourceAppGlyph,
   SuiteAiPanel,
@@ -4134,8 +4308,11 @@ function SuiteAppLayout({
   m,
   openSuiteAskAi,
   pathWithSuiteAskAiOpen,
+  persistSidebarWidth,
   persistSuiteAskAiOpen,
+  readSidebarWidth,
   readSuiteAskAiOpen,
+  resetSuiteSidebarWidth,
   resolveSuiteNotificationHref,
   sidebarColumnWidth,
   sourceToSuiteApp,