ai-design-system 0.1.13 → 0.1.14

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -53,28 +53,31 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       muted: "group-hover:bg-muted/30"
     }
     const containerRef = React.useRef<HTMLDivElement>(null)
-    const [sizes, setSizes] = React.useState<number[]>(() => {
-      // Load from localStorage or use defaults (only in browser)
-      if (storageKey && typeof window !== 'undefined') {
-        const saved = localStorage.getItem(storageKey)
-        if (saved) {
-          try {
-            return JSON.parse(saved)
-          } catch {
-            // Fallback to defaults
-          }
+
+    // Compute default sizes (server-safe — no localStorage access)
+    const defaultSizes = React.useMemo(() => {
+      const raw = sections.map(section => section.defaultSize ?? (100 / sections.length))
+      const total = raw.reduce((sum, size) => sum + size, 0)
+      return raw.map(size => (size / total) * 100)
+    }, [sections])
+
+    const [sizes, setSizes] = React.useState<number[]>(defaultSizes)
+
+    // After hydration, overwrite with persisted sizes if available
+    React.useEffect(() => {
+      if (!storageKey) return
+      const saved = localStorage.getItem(storageKey)
+      if (!saved) return
+      try {
+        const parsed: number[] = JSON.parse(saved)
+        if (Array.isArray(parsed) && parsed.length === sections.length) {
+          setSizes(parsed)
         }
+      } catch {
+        // ignore malformed storage
       }
-      
-      // Calculate default sizes
-      const defaultSizes = sections.map(section => 
-        section.defaultSize ?? (100 / sections.length)
-      )
-      
-      // Normalize to 100%
-      const total = defaultSizes.reduce((sum, size) => sum + size, 0)
-      return defaultSizes.map(size => (size / total) * 100)
-    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [storageKey])
 
     const [draggingIndex, setDraggingIndex] = React.useState<number | null>(null)
     const [startX, setStartX] = React.useState(0)

package/dist/index.cjs

@@ -6797,25 +6797,27 @@ var AdjustableLayout = React33__namespace.memo(
       muted: "group-hover:bg-muted/30"
     };
     const containerRef = React33__namespace.useRef(null);
-    const [sizes, setSizes] = React33__namespace.useState(() => {
-      if (storageKey && typeof window !== "undefined") {
-        const saved = localStorage.getItem(storageKey);
-        if (saved) {
-          try {
-            return JSON.parse(saved);
-          } catch (e) {
-          }
+    const defaultSizes = React33__namespace.useMemo(() => {
+      const raw = sections.map((section) => {
+        var _a2;
+        return (_a2 = section.defaultSize) != null ? _a2 : 100 / sections.length;
+      });
+      const total = raw.reduce((sum, size) => sum + size, 0);
+      return raw.map((size) => size / total * 100);
+    }, [sections]);
+    const [sizes, setSizes] = React33__namespace.useState(defaultSizes);
+    React33__namespace.useEffect(() => {
+      if (!storageKey) return;
+      const saved = localStorage.getItem(storageKey);
+      if (!saved) return;
+      try {
+        const parsed = JSON.parse(saved);
+        if (Array.isArray(parsed) && parsed.length === sections.length) {
+          setSizes(parsed);
         }
+      } catch (e) {
       }
-      const defaultSizes = sections.map(
-        (section) => {
-          var _a2;
-          return (_a2 = section.defaultSize) != null ? _a2 : 100 / sections.length;
-        }
-      );
-      const total = defaultSizes.reduce((sum, size) => sum + size, 0);
-      return defaultSizes.map((size) => size / total * 100);
-    });
+    }, [storageKey]);
     const [draggingIndex, setDraggingIndex] = React33__namespace.useState(null);
     const [startX, setStartX] = React33__namespace.useState(0);
     const [startSizes, setStartSizes] = React33__namespace.useState([]);