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

package/dist/suite.mjs

@@ -6,7 +6,7 @@ import {
 import {
   SuiteThemeProvider,
   useSuiteTheme
-} from "./chunk-VIWW7AW2.mjs";
+} from "./chunk-NOI42JNZ.mjs";
 import {
   __spreadProps,
   __spreadValues
@@ -1286,10 +1286,10 @@ function SuiteNotificationBell({
       panelClassName: "w-80 overflow-hidden p-0",
       open,
       onOpenChange,
-      trigger: /* @__PURE__ */ jsxs7("span", { className: "relative inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: [
+      trigger: /* @__PURE__ */ jsx7("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ jsxs7("span", { className: "relative inline-flex", children: [
         /* @__PURE__ */ jsx7(Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
-        unread > 0 ? /* @__PURE__ */ jsx7("span", { className: "absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
-      ] }),
+        unread > 0 ? /* @__PURE__ */ jsx7("span", { className: "absolute right-0 top-0 flex h-3.5 min-w-3.5 translate-x-0.5 -translate-y-0.5 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-1 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
+      ] }) }),
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between border-b border-ph-border px-3 py-2", children: [
           /* @__PURE__ */ jsx7("span", { className: "text-sm font-semibold text-ph-ink", children: "Notifications" }),
@@ -2182,7 +2182,7 @@ import {
   WarningTriangle
 } from "iconoir-react";
 import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
-var SuiteAiBlockNoteMessage = lazy(() => import("./ai-message-blocknote-DIUICX3G.mjs"));
+var SuiteAiBlockNoteMessage = lazy(() => import("./ai-message-blocknote-WABTHFY7.mjs"));
 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";
@@ -2836,7 +2836,7 @@ function SuiteWorkspaceSwitcher({
 // src/suite/lib/use-sidebar-width.ts
 import {
   useCallback as useCallback3,
-  useEffect as useEffect7,
+  useLayoutEffect as useLayoutEffect2,
   useState as useState9
 } from "react";
 var SIDEBAR_RAIL_WIDTH = 56;
@@ -2844,6 +2844,20 @@ 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;
@@ -2856,24 +2870,123 @@ 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] = useState9(fallbackWidth);
-  const [narrowViewport, setNarrowViewport] = useState9(false);
-  const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
-  useEffect7(() => {
-    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] = useState9(fallbackWidth);
+  const [narrowViewport, setNarrowViewport] = useState9(false);
+  const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
+  useLayoutEffect2(() => {
+    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]);
-  useEffect7(() => {
+  useLayoutEffect2(() => {
     const media = window.matchMedia("(max-width: 639px)");
     const sync = () => setNarrowViewport(media.matches);
     sync();
@@ -2882,10 +2995,7 @@ function useSidebarWidth(storageKey, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
   }, []);
   const persist = useCallback3(
     (value) => {
-      try {
-        localStorage.setItem(storageKey, String(value));
-      } catch (e) {
-      }
+      persistSidebarWidth(storageKey, value);
     },
     [storageKey]
   );
@@ -3156,7 +3266,7 @@ function SuiteSettingsMobileNav({
 
 // src/suite/components/suite-sidebar.tsx
 import Link2 from "next/link";
-import { useCallback as useCallback4, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7 } from "react";
 import { NavArrowLeft, Sparks as Sparks2 } from "iconoir-react";
 import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function renderNode(node, collapsed) {
@@ -3188,7 +3298,7 @@ function SuiteSidebar({
     },
     [onAskAiOpenChange]
   );
-  useEffect8(() => {
+  useEffect7(() => {
     if (!onAskAiOpenChange) return;
     function onOpen() {
       onRequestExpand == null ? void 0 : onRequestExpand();
@@ -3197,7 +3307,7 @@ function SuiteSidebar({
     window.addEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
     return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
   }, [onAskAiOpenChange, onRequestExpand, setAskAi]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (!chatOpen) return;
     function onKey(event) {
       if (event.key === "Escape") setAskAi(false);
@@ -3373,7 +3483,14 @@ function SuiteSidebar({
                   );
                   return collapsed ? /* @__PURE__ */ jsx22(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
                 }) }) }),
-                secondaryNav ? /* @__PURE__ */ jsx22("div", { className: "shrink-0", "data-test": "suite-sidebar-secondary-nav", children: secondaryNav }) : null
+                secondaryNav ? /* @__PURE__ */ jsx22(
+                  "div",
+                  {
+                    className: "min-h-0 flex-1",
+                    "data-test": "suite-sidebar-secondary-nav",
+                    children: secondaryNav
+                  }
+                ) : null
               ] })
             ]
           }
@@ -3518,6 +3635,8 @@ export {
   SUITE_ICON_NAMES,
   SUITE_MUTATED_EVENT,
   SUITE_OPEN_ASK_AI_EVENT,
+  SUITE_SIDEBAR_WIDTH_COOKIE,
+  SUITE_SIDEBAR_WIDTH_KEY,
   SUITE_SPRINGS,
   SourceAppGlyph,
   SuiteAiPanel,
@@ -3570,8 +3689,11 @@ export {
   m,
   openSuiteAskAi,
   pathWithSuiteAskAiOpen,
+  persistSidebarWidth,
   persistSuiteAskAiOpen,
+  readSidebarWidth,
   readSuiteAskAiOpen,
+  resetSuiteSidebarWidth,
   resolveSuiteNotificationHref,
   sidebarColumnWidth,
   sourceToSuiteApp,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.6.11",
+  "version": "0.6.13",
   "description": "Props-driven React components and theme tokens inspired by classic interface design \u2014 optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/styles/suite-skin.css

@@ -41,6 +41,14 @@ html {
   --suite-reading-max: 48rem; /* ~max-w-3xl / 65ch */
 }
 
+/* Phones/tablets only: pan/scroll, no pinch-zoom of the page. Desktop zoom stays. */
+@media (hover: none) and (pointer: coarse) {
+  html,
+  body {
+    touch-action: pan-x pan-y;
+  }
+}
+
 @media (min-width: 1536px) {
   html {
     --suite-page-pad-x-lg: var(--suite-space-7);

package/src/suite/components/suite-notification-bell.tsx

@@ -178,13 +178,15 @@ export function SuiteNotificationBell({
       open={open}
       onOpenChange={onOpenChange}
       trigger={
-        <span className="relative inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
-          <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
-          {unread > 0 ? (
-            <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-ph-surface">
-              {unread > 9 ? "9+" : unread}
-            </span>
-          ) : null}
+        <span className="inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
+          <span className="relative inline-flex">
+            <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
+            {unread > 0 ? (
+              <span className="absolute right-0 top-0 flex h-3.5 min-w-3.5 translate-x-0.5 -translate-y-0.5 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-white ring-1 ring-ph-surface">
+                {unread > 9 ? "9+" : unread}
+              </span>
+            ) : null}
+          </span>
         </span>
       }
     >

package/src/suite/components/suite-sidebar.tsx

@@ -303,7 +303,10 @@ export function SuiteSidebar({
             </nav>
 
             {secondaryNav ? (
-              <div className="shrink-0" data-test="suite-sidebar-secondary-nav">
+              <div
+                className="min-h-0 flex-1"
+                data-test="suite-sidebar-secondary-nav"
+              >
                 {secondaryNav}
               </div>
             ) : null}

package/src/suite/components/theme-provider.test.tsx

@@ -17,12 +17,27 @@ beforeEach(() => {
     getItem: () => "dark",
     setItem: vi.fn(),
   });
+  vi.stubGlobal(
+    "matchMedia",
+    (query: string) =>
+      ({
+        matches: query.includes("prefers-color-scheme: dark"),
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+        onchange: null,
+      }) satisfies MediaQueryList,
+  );
 });
 
 afterEach(() => {
   cleanup();
   vi.unstubAllGlobals();
   document.documentElement.removeAttribute("data-theme");
+  document.documentElement.removeAttribute("data-suite-lock-page-zoom");
   document.documentElement.classList.remove("dark");
   document.getElementById("theme-color-meta")?.remove();
 });

package/src/suite/components/theme-provider.tsx

@@ -10,6 +10,8 @@ import {
   type ReactNode,
 } from 'react';
 
+import { useLockMobilePageZoom } from '../lib/use-lock-mobile-page-zoom';
+
 export type SuiteTheme = 'system' | 'light' | 'dark';
 export type SuiteResolvedTheme = 'light' | 'dark';
 
@@ -104,6 +106,7 @@ export function SuiteThemeProvider({
   config: SuiteThemeConfig;
   children: ReactNode;
 }) {
+  useLockMobilePageZoom();
   const [state, setState] = useState<{
     theme: SuiteTheme;
     resolvedTheme: SuiteResolvedTheme;

package/src/suite/index.ts

@@ -103,6 +103,11 @@ export {
   SIDEBAR_MAX_WIDTH,
   SIDEBAR_MIN_EXPANDED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
+  SUITE_SIDEBAR_WIDTH_COOKIE,
+  SUITE_SIDEBAR_WIDTH_KEY,
+  persistSidebarWidth,
+  readSidebarWidth,
+  resetSuiteSidebarWidth,
   sidebarColumnWidth,
   useSidebarWidth,
 } from "./lib/use-sidebar-width";

package/src/suite/lib/use-lock-mobile-page-zoom.test.tsx

@@ -0,0 +1,65 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { useLockMobilePageZoom } from "./use-lock-mobile-page-zoom";
+
+function Probe() {
+  useLockMobilePageZoom();
+  return null;
+}
+
+function stubMedia(matches: boolean) {
+  vi.stubGlobal(
+    "matchMedia",
+    (query: string) =>
+      ({
+        matches: query.includes("pointer: coarse") ? matches : false,
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+        onchange: null,
+      }) satisfies MediaQueryList,
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  document.documentElement.removeAttribute("data-suite-lock-page-zoom");
+  document.head.innerHTML = "";
+});
+
+describe("mobile page zoom lock", () => {
+  it("locks the viewport on phones and tablets", () => {
+    document.head.innerHTML =
+      '<meta name="viewport" content="width=device-width, initial-scale=1">';
+    stubMedia(true);
+
+    render(<Probe />);
+
+    expect(document.documentElement).toHaveAttribute(
+      "data-suite-lock-page-zoom",
+    );
+    expect(
+      document.querySelector('meta[name="viewport"]')?.getAttribute("content"),
+    ).toContain("user-scalable=no");
+  });
+
+  it("leaves desktop page zoom alone", () => {
+    document.head.innerHTML =
+      '<meta name="viewport" content="width=device-width, initial-scale=1">';
+    stubMedia(false);
+
+    render(<Probe />);
+
+    expect(document.documentElement).not.toHaveAttribute(
+      "data-suite-lock-page-zoom",
+    );
+    expect(
+      document.querySelector('meta[name="viewport"]')?.getAttribute("content"),
+    ).toBe("width=device-width, initial-scale=1");
+  });
+});

package/src/suite/lib/use-lock-mobile-page-zoom.ts

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect } from "react";
+
+const MOBILE_PAGE_ZOOM_QUERY = "(hover: none) and (pointer: coarse)";
+const LOCKED_VIEWPORT =
+  "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover";
+
+function preventGesture(event: Event) {
+  event.preventDefault();
+}
+
+/**
+ * App-like mobile chrome: no pinch/page zoom. Desktop zoom is unchanged.
+ * CSS `touch-action` covers Chromium; viewport + gesture events cover iOS.
+ */
+export function useLockMobilePageZoom() {
+  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?.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?.setAttribute("content", LOCKED_VIEWPORT);
+        document.addEventListener("gesturestart", preventGesture);
+        document.addEventListener("gesturechange", preventGesture);
+        return;
+      }
+      if (original) 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?.setAttribute("content", original);
+      document.removeEventListener("gesturestart", preventGesture);
+      document.removeEventListener("gesturechange", preventGesture);
+    };
+  }, []);
+}

package/src/suite/lib/use-sidebar-width-hook.test.tsx

@@ -0,0 +1,73 @@
+import { cleanup, render, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  persistSidebarWidth,
+  SUITE_SIDEBAR_WIDTH_KEY,
+  useSidebarWidth,
+} from "./use-sidebar-width";
+
+function WidthProbe() {
+  const { width } = useSidebarWidth();
+  return <div data-testid="width">{width}</div>;
+}
+
+const store = new Map<string, string>();
+
+beforeEach(() => {
+  store.clear();
+  vi.stubGlobal("localStorage", {
+    getItem: (key: string) => store.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      store.set(key, value);
+    },
+    removeItem: (key: string) => {
+      store.delete(key);
+    },
+    clear: () => {
+      store.clear();
+    },
+  });
+  vi.stubGlobal(
+    "matchMedia",
+    (query: string) =>
+      ({
+        matches: false,
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+        onchange: null,
+      }) satisfies MediaQueryList,
+  );
+  document.cookie.split(";").forEach((part) => {
+    const name = part.split("=")[0]?.trim();
+    if (name) document.cookie = `${name}=; Path=/; Max-Age=0`;
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe("useSidebarWidth app-switch sync", () => {
+  it("picks up a cookie written by another app after pageshow", async () => {
+    persistSidebarWidth(SUITE_SIDEBAR_WIDTH_KEY, 280);
+    render(<WidthProbe />);
+    expect(document.querySelector("[data-testid=width]")?.textContent).toBe(
+      "280",
+    );
+
+    persistSidebarWidth("tides-sidebar-width", 480);
+    window.dispatchEvent(new Event("pageshow"));
+
+    await waitFor(() =>
+      expect(document.querySelector("[data-testid=width]")?.textContent).toBe(
+        "480",
+      ),
+    );
+  });
+});

package/src/suite/lib/use-sidebar-width.test.ts

@@ -0,0 +1,77 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  persistSidebarWidth,
+  readSidebarWidth,
+  resetSuiteSidebarWidth,
+  SUITE_SIDEBAR_WIDTH_COOKIE,
+  SUITE_SIDEBAR_WIDTH_KEY,
+} from "./use-sidebar-width";
+
+const store = new Map<string, string>();
+
+beforeEach(() => {
+  store.clear();
+  vi.stubGlobal("localStorage", {
+    getItem: (key: string) => store.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      store.set(key, value);
+    },
+    removeItem: (key: string) => {
+      store.delete(key);
+    },
+    clear: () => {
+      store.clear();
+    },
+  });
+  document.cookie.split(";").forEach((part) => {
+    const name = part.split("=")[0]?.trim();
+    if (name) document.cookie = `${name}=; Path=/; Max-Age=0`;
+  });
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("suite sidebar width", () => {
+  it("shares one width across app keys via cookie", () => {
+    persistSidebarWidth("tides-sidebar-width", 412);
+
+    expect(readSidebarWidth("kraken-sidebar-width")).toBe(412);
+    expect(readSidebarWidth("tt-sidebar-width")).toBe(412);
+    expect(readSidebarWidth(SUITE_SIDEBAR_WIDTH_KEY)).toBe(412);
+    expect(localStorage.getItem(SUITE_SIDEBAR_WIDTH_KEY)).toBe("412");
+    expect(document.cookie).toContain(`${SUITE_SIDEBAR_WIDTH_COOKIE}=412`);
+  });
+
+  it("prefers the cookie over a stale per-app localStorage value", () => {
+    localStorage.setItem("kraken-sidebar-width", "240");
+    persistSidebarWidth("tides-sidebar-width", 480);
+
+    expect(readSidebarWidth("kraken-sidebar-width")).toBe(480);
+  });
+
+  it("migrates a legacy per-app width when nothing shared is stored", () => {
+    localStorage.setItem("tt-sidebar-width", "360");
+
+    expect(readSidebarWidth("tides-sidebar-width")).toBe(360);
+  });
+
+  it("does not write the suite cookie for a demo-only key", () => {
+    persistSidebarWidth("the-old-ui-demo-sidebar-width", 220);
+
+    expect(document.cookie).not.toContain(SUITE_SIDEBAR_WIDTH_COOKIE);
+    expect(localStorage.getItem(SUITE_SIDEBAR_WIDTH_KEY)).toBeNull();
+    expect(readSidebarWidth("tides-sidebar-width")).toBeNull();
+  });
+
+  it("clears the shared cookie and legacy keys", () => {
+    persistSidebarWidth("kraken-sidebar-width", 400);
+    resetSuiteSidebarWidth();
+
+    expect(readSidebarWidth("tides-sidebar-width")).toBeNull();
+    expect(localStorage.getItem("kraken-sidebar-width")).toBeNull();
+    expect(document.cookie).not.toContain(`${SUITE_SIDEBAR_WIDTH_COOKIE}=400`);
+  });
+});