@allshift/ui 0.5.0 → 0.5.2

package/dist/index.cjs

@@ -1004,6 +1004,20 @@ function tileItems(items, boardW, boardH) {
     return { ...it, x, y, w, h: rowH };
   });
 }
+function fitToBoard(list, boardW, boardH) {
+  if (list.length === 0) return list;
+  const extent = Math.max(...list.map((b) => b.x + b.w));
+  if (extent > boardW * 1.5) return tileItems(list, boardW, boardH);
+  let changed = false;
+  const next = list.map((b) => {
+    const w = Math.min(b.w, boardW);
+    const x = Math.max(0, Math.min(b.x, boardW - w));
+    if (w === b.w && x === b.x) return b;
+    changed = true;
+    return { ...b, w, x };
+  });
+  return changed ? next : list;
+}
 function overlaps(a, b) {
   return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
 }
@@ -1051,12 +1065,19 @@ function CanvasProvider({
   (0, import_react10.useEffect)(() => {
     persistRef.current = persist;
   }, [persist]);
+  const fitAdjustRef = (0, import_react10.useRef)(false);
+  const hadUserChangeRef = (0, import_react10.useRef)(false);
   (0, import_react10.useEffect)(() => {
     const measure = () => {
       const w = Math.max(360, window.innerWidth - 40);
       boardRef.current = w;
       boardHRef.current = Math.max(480, window.innerHeight);
       setBoardWidth(w);
+      setBlocks((prev) => {
+        const next = fitToBoard(prev, w, boardHRef.current);
+        if (next !== prev) fitAdjustRef.current = true;
+        return next;
+      });
     };
     measure();
     window.addEventListener("resize", measure);
@@ -1297,7 +1318,10 @@ function CanvasProvider({
     restoredRef.current = true;
     setCanRestore(false);
     const built = saved.filter((b) => b && typeof b.key === "string" && resolve(b.key)).map((b) => blockFromSaved(b, zRef.current++));
-    setBlocks(built.some((b) => b.placed) ? built : layoutDefault(built));
+    const arranged = built.some((b) => b.placed) ? built : layoutDefault(built);
+    const fitted = fitToBoard(arranged, boardRef.current, boardHRef.current);
+    if (fitted !== arranged) fitAdjustRef.current = true;
+    setBlocks(fitted);
   }, [savedSession, layoutDefault]);
   const clear = (0, import_react10.useCallback)((keepKey) => {
     setBlocks((prev) => keepKey ? prev.filter((b) => b.key === keepKey) : []);
@@ -1414,6 +1438,12 @@ function CanvasProvider({
       firstRun.current = false;
       return;
     }
+    if (fitAdjustRef.current) {
+      fitAdjustRef.current = false;
+      if (!hadUserChangeRef.current) return;
+    } else {
+      hadUserChangeRef.current = true;
+    }
     if (!payloadRef.current) return;
     if (saveTimer.current) clearTimeout(saveTimer.current);
     const body = JSON.stringify(payloadRef.current);
@@ -1432,6 +1462,7 @@ function CanvasProvider({
   (0, import_react10.useEffect)(() => {
     if (!persist) return;
     const flush = () => {
+      if (!hadUserChangeRef.current) return;
       if (!payloadRef.current) return;
       try {
         void fetch("/api/canvas-layout", {

package/dist/index.js

@@ -964,6 +964,20 @@ function tileItems(items, boardW, boardH) {
     return { ...it, x, y, w, h: rowH };
   });
 }
+function fitToBoard(list, boardW, boardH) {
+  if (list.length === 0) return list;
+  const extent = Math.max(...list.map((b) => b.x + b.w));
+  if (extent > boardW * 1.5) return tileItems(list, boardW, boardH);
+  let changed = false;
+  const next = list.map((b) => {
+    const w = Math.min(b.w, boardW);
+    const x = Math.max(0, Math.min(b.x, boardW - w));
+    if (w === b.w && x === b.x) return b;
+    changed = true;
+    return { ...b, w, x };
+  });
+  return changed ? next : list;
+}
 function overlaps(a, b) {
   return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
 }
@@ -1011,12 +1025,19 @@ function CanvasProvider({
   useEffect6(() => {
     persistRef.current = persist;
   }, [persist]);
+  const fitAdjustRef = useRef6(false);
+  const hadUserChangeRef = useRef6(false);
   useEffect6(() => {
     const measure = () => {
       const w = Math.max(360, window.innerWidth - 40);
       boardRef.current = w;
       boardHRef.current = Math.max(480, window.innerHeight);
       setBoardWidth(w);
+      setBlocks((prev) => {
+        const next = fitToBoard(prev, w, boardHRef.current);
+        if (next !== prev) fitAdjustRef.current = true;
+        return next;
+      });
     };
     measure();
     window.addEventListener("resize", measure);
@@ -1257,7 +1278,10 @@ function CanvasProvider({
     restoredRef.current = true;
     setCanRestore(false);
     const built = saved.filter((b) => b && typeof b.key === "string" && resolve(b.key)).map((b) => blockFromSaved(b, zRef.current++));
-    setBlocks(built.some((b) => b.placed) ? built : layoutDefault(built));
+    const arranged = built.some((b) => b.placed) ? built : layoutDefault(built);
+    const fitted = fitToBoard(arranged, boardRef.current, boardHRef.current);
+    if (fitted !== arranged) fitAdjustRef.current = true;
+    setBlocks(fitted);
   }, [savedSession, layoutDefault]);
   const clear = useCallback((keepKey) => {
     setBlocks((prev) => keepKey ? prev.filter((b) => b.key === keepKey) : []);
@@ -1374,6 +1398,12 @@ function CanvasProvider({
       firstRun.current = false;
       return;
     }
+    if (fitAdjustRef.current) {
+      fitAdjustRef.current = false;
+      if (!hadUserChangeRef.current) return;
+    } else {
+      hadUserChangeRef.current = true;
+    }
     if (!payloadRef.current) return;
     if (saveTimer.current) clearTimeout(saveTimer.current);
     const body = JSON.stringify(payloadRef.current);
@@ -1392,6 +1422,7 @@ function CanvasProvider({
   useEffect6(() => {
     if (!persist) return;
     const flush = () => {
+      if (!hadUserChangeRef.current) return;
       if (!payloadRef.current) return;
       try {
         void fetch("/api/canvas-layout", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allshift/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Shift family shared FEEL layer — glass morphism, 3D tilt physics, holographic shine, scroll-triggered generation, and the living-canvas engine (LiveCard, LiveStat, CanvasTransition, CanvasLauncher). Brand-neutral by design.",
   "license": "UNLICENSED",
   "private": false,