@grandbazar/ui-baza 1.9.0 → 1.10.0

package/dist/bento.cjs

@@ -112,6 +112,37 @@ function toBentoSpan(size, columns) {
   return { columns: Math.min(span.columns, columns), rows: span.rows };
 }
 
+function countBentoHoles(sizes, columns) {
+  const takenRows = [];
+  let takenCellCount = 0;
+  const fits = (row, mask, rowSpan) => {
+    for (let offset = 0; offset < rowSpan; offset++) {
+      if ((takenRows[row + offset] ?? 0) & mask) {
+        return false;
+      }
+    }
+    return true;
+  };
+  for (const size of sizes) {
+    const span = toBentoSpan(size, columns);
+    const widthMask = (1 << span.columns) - 1;
+    let isPlaced = false;
+    for (let row = 0; !isPlaced; row++) {
+      for (let column = 0; column + span.columns <= columns && !isPlaced; column++) {
+        const mask = widthMask << column;
+        if (fits(row, mask, span.rows)) {
+          for (let offset = 0; offset < span.rows; offset++) {
+            takenRows[row + offset] = (takenRows[row + offset] ?? 0) | mask;
+          }
+          isPlaced = true;
+        }
+      }
+    }
+    takenCellCount += span.columns * span.rows;
+  }
+  return takenRows.length * columns - takenCellCount;
+}
+
 function findHoleFreeBentoSizes(preferredSizes, slots, columns) {
   const fullRow = (1 << columns) - 1;
   const innerEdges = (1 << columns - 1) - 1;
@@ -206,6 +237,14 @@ function findHoleFreeBentoSizes(preferredSizes, slots, columns) {
   return null;
 }
 
+function isBentoDevMode() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+
 function arrangeBento(slots, { columns, presets, rhythm }) {
   const fitAllowed = (size, { allowedSizes }) => {
     return [size, ...BENTO_FALLBACKS[size]].find((candidate) => allowedSizes.includes(candidate)) ?? allowedSizes[0] ?? size;
@@ -224,7 +263,16 @@ function arrangeBento(slots, { columns, presets, rhythm }) {
     });
   };
   const preferredSizes = layOut({ isPreferenceKept: true });
-  return findHoleFreeBentoSizes(preferredSizes, slots, columns) ?? findHoleFreeBentoSizes(layOut({ isPreferenceKept: false }), slots, columns) ?? preferredSizes;
+  const arrangedSizes = findHoleFreeBentoSizes(preferredSizes, slots, columns) ?? findHoleFreeBentoSizes(layOut({ isPreferenceKept: false }), slots, columns) ?? preferredSizes;
+  if (isBentoDevMode()) {
+    const holeCount = countBentoHoles(arrangedSizes, columns);
+    if (holeCount > 0) {
+      console.warn(
+        `arrangeBento: no hole-free arrangement on a ${columns}-column grid, ${holeCount} cell(s) left empty: ${arrangedSizes.join(", ")}`
+      );
+    }
+  }
+  return arrangedSizes;
 }
 
 function arrangeBentoGrids(slotsByGrid) {
@@ -236,47 +284,21 @@ function arrangeBentoGrids(slotsByGrid) {
   });
 }
 
-function countBentoHoles(sizes, columns) {
-  const takenRows = [];
-  let takenCellCount = 0;
-  const fits = (row, mask, rowSpan) => {
-    for (let offset = 0; offset < rowSpan; offset++) {
-      if ((takenRows[row + offset] ?? 0) & mask) {
-        return false;
-      }
-    }
-    return true;
-  };
-  for (const size of sizes) {
-    const span = toBentoSpan(size, columns);
-    const widthMask = (1 << span.columns) - 1;
-    let isPlaced = false;
-    for (let row = 0; !isPlaced; row++) {
-      for (let column = 0; column + span.columns <= columns && !isPlaced; column++) {
-        const mask = widthMask << column;
-        if (fits(row, mask, span.rows)) {
-          for (let offset = 0; offset < span.rows; offset++) {
-            takenRows[row + offset] = (takenRows[row + offset] ?? 0) | mask;
-          }
-          isPlaced = true;
-        }
-      }
-    }
-    takenCellCount += span.columns * span.rows;
-  }
-  return takenRows.length * columns - takenCellCount;
-}
-
-function toBentoSlot(grid, { allowedSizes, sizes, defaultSize }) {
-  const fixedSize = allowedSizes.length === 1 && allowedSizes[0] || sizes[grid];
+function toBentoSlot(grid, { allowedSizes, sizes, defaultSize, isAdjustable = false }) {
+  const givenSize = sizes[grid];
+  const fixedSize = allowedSizes.length === 1 && allowedSizes[0] || !isAdjustable && givenSize;
+  const autoSizes = BENTO_AUTO_SIZES[grid].filter((size) => allowedSizes.includes(size));
   if (fixedSize) {
     return { preferredSize: fixedSize, allowedSizes: [fixedSize] };
   }
+  if (givenSize) {
+    return {
+      preferredSize: givenSize,
+      allowedSizes: autoSizes.includes(givenSize) ? autoSizes : [...autoSizes, givenSize]
+    };
+  }
   const sizeFromDesktop = grid === "mobile" && sizes.desktop && BENTO_MOBILE_SIZE_BY_DESKTOP[sizes.desktop];
-  return {
-    preferredSize: sizeFromDesktop || defaultSize,
-    allowedSizes: BENTO_AUTO_SIZES[grid].filter((size) => allowedSizes.includes(size))
-  };
+  return { preferredSize: sizeFromDesktop || defaultSize, allowedSizes: autoSizes };
 }
 
 exports.BENTO_AUTO_SIZES = BENTO_AUTO_SIZES;

package/dist/bento.d.ts

@@ -45,10 +45,11 @@ declare type TBentoSlotSource = {
     allowedSizes: readonly TBentoSize[];
     sizes: Partial<Record<TBentoGrid, TBentoSize | null>>;
     defaultSize: TBentoSize | null;
+    isAdjustable?: boolean;
 };
 
 export declare type TBentoTileShape = TArrayElement<typeof BENTO_TILE_SHAPES>;
 
-export declare function toBentoSlot(grid: TBentoGrid, { allowedSizes, sizes, defaultSize }: TBentoSlotSource): TBentoSlot;
+export declare function toBentoSlot(grid: TBentoGrid, { allowedSizes, sizes, defaultSize, isAdjustable }: TBentoSlotSource): TBentoSlot;
 
 export { }

package/dist/bento.js

@@ -108,6 +108,37 @@ function toBentoSpan(size, columns) {
   return { columns: Math.min(span.columns, columns), rows: span.rows };
 }
 
+function countBentoHoles(sizes, columns) {
+  const takenRows = [];
+  let takenCellCount = 0;
+  const fits = (row, mask, rowSpan) => {
+    for (let offset = 0; offset < rowSpan; offset++) {
+      if ((takenRows[row + offset] ?? 0) & mask) {
+        return false;
+      }
+    }
+    return true;
+  };
+  for (const size of sizes) {
+    const span = toBentoSpan(size, columns);
+    const widthMask = (1 << span.columns) - 1;
+    let isPlaced = false;
+    for (let row = 0; !isPlaced; row++) {
+      for (let column = 0; column + span.columns <= columns && !isPlaced; column++) {
+        const mask = widthMask << column;
+        if (fits(row, mask, span.rows)) {
+          for (let offset = 0; offset < span.rows; offset++) {
+            takenRows[row + offset] = (takenRows[row + offset] ?? 0) | mask;
+          }
+          isPlaced = true;
+        }
+      }
+    }
+    takenCellCount += span.columns * span.rows;
+  }
+  return takenRows.length * columns - takenCellCount;
+}
+
 function findHoleFreeBentoSizes(preferredSizes, slots, columns) {
   const fullRow = (1 << columns) - 1;
   const innerEdges = (1 << columns - 1) - 1;
@@ -202,6 +233,14 @@ function findHoleFreeBentoSizes(preferredSizes, slots, columns) {
   return null;
 }
 
+function isBentoDevMode() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+
 function arrangeBento(slots, { columns, presets, rhythm }) {
   const fitAllowed = (size, { allowedSizes }) => {
     return [size, ...BENTO_FALLBACKS[size]].find((candidate) => allowedSizes.includes(candidate)) ?? allowedSizes[0] ?? size;
@@ -220,7 +259,16 @@ function arrangeBento(slots, { columns, presets, rhythm }) {
     });
   };
   const preferredSizes = layOut({ isPreferenceKept: true });
-  return findHoleFreeBentoSizes(preferredSizes, slots, columns) ?? findHoleFreeBentoSizes(layOut({ isPreferenceKept: false }), slots, columns) ?? preferredSizes;
+  const arrangedSizes = findHoleFreeBentoSizes(preferredSizes, slots, columns) ?? findHoleFreeBentoSizes(layOut({ isPreferenceKept: false }), slots, columns) ?? preferredSizes;
+  if (isBentoDevMode()) {
+    const holeCount = countBentoHoles(arrangedSizes, columns);
+    if (holeCount > 0) {
+      console.warn(
+        `arrangeBento: no hole-free arrangement on a ${columns}-column grid, ${holeCount} cell(s) left empty: ${arrangedSizes.join(", ")}`
+      );
+    }
+  }
+  return arrangedSizes;
 }
 
 function arrangeBentoGrids(slotsByGrid) {
@@ -232,47 +280,21 @@ function arrangeBentoGrids(slotsByGrid) {
   });
 }
 
-function countBentoHoles(sizes, columns) {
-  const takenRows = [];
-  let takenCellCount = 0;
-  const fits = (row, mask, rowSpan) => {
-    for (let offset = 0; offset < rowSpan; offset++) {
-      if ((takenRows[row + offset] ?? 0) & mask) {
-        return false;
-      }
-    }
-    return true;
-  };
-  for (const size of sizes) {
-    const span = toBentoSpan(size, columns);
-    const widthMask = (1 << span.columns) - 1;
-    let isPlaced = false;
-    for (let row = 0; !isPlaced; row++) {
-      for (let column = 0; column + span.columns <= columns && !isPlaced; column++) {
-        const mask = widthMask << column;
-        if (fits(row, mask, span.rows)) {
-          for (let offset = 0; offset < span.rows; offset++) {
-            takenRows[row + offset] = (takenRows[row + offset] ?? 0) | mask;
-          }
-          isPlaced = true;
-        }
-      }
-    }
-    takenCellCount += span.columns * span.rows;
-  }
-  return takenRows.length * columns - takenCellCount;
-}
-
-function toBentoSlot(grid, { allowedSizes, sizes, defaultSize }) {
-  const fixedSize = allowedSizes.length === 1 && allowedSizes[0] || sizes[grid];
+function toBentoSlot(grid, { allowedSizes, sizes, defaultSize, isAdjustable = false }) {
+  const givenSize = sizes[grid];
+  const fixedSize = allowedSizes.length === 1 && allowedSizes[0] || !isAdjustable && givenSize;
+  const autoSizes = BENTO_AUTO_SIZES[grid].filter((size) => allowedSizes.includes(size));
   if (fixedSize) {
     return { preferredSize: fixedSize, allowedSizes: [fixedSize] };
   }
+  if (givenSize) {
+    return {
+      preferredSize: givenSize,
+      allowedSizes: autoSizes.includes(givenSize) ? autoSizes : [...autoSizes, givenSize]
+    };
+  }
   const sizeFromDesktop = grid === "mobile" && sizes.desktop && BENTO_MOBILE_SIZE_BY_DESKTOP[sizes.desktop];
-  return {
-    preferredSize: sizeFromDesktop || defaultSize,
-    allowedSizes: BENTO_AUTO_SIZES[grid].filter((size) => allowedSizes.includes(size))
-  };
+  return { preferredSize: sizeFromDesktop || defaultSize, allowedSizes: autoSizes };
 }
 
 export { BENTO_AUTO_SIZES, BENTO_CONFIGURABLE_SIZES, BENTO_GRIDS, BENTO_GRID_NAMES, BENTO_MOBILE_SIZE_BY_DESKTOP, BENTO_SIZES, BENTO_THIN_SIZES, BENTO_TILE_SHAPES, BENTO_TILE_SHAPE_BY_SIZE, arrangeBento, arrangeBentoGrids, countBentoHoles, toBentoSlot };

package/dist/index.d.ts

@@ -821,6 +821,7 @@ declare type TBentoSlotSource = {
     allowedSizes: readonly TBentoSize[];
     sizes: Partial<Record<TBentoGrid, TBentoSize | null>>;
     defaultSize: TBentoSize | null;
+    isAdjustable?: boolean;
 };
 
 export declare type TBentoTileShape = TArrayElement<typeof BENTO_TILE_SHAPES>;
@@ -986,7 +987,7 @@ declare type TNotificationInlineProps = Omit<React.HTMLAttributes<HTMLDivElement
     onClose?: () => void;
 };
 
-export declare function toBentoSlot(grid: TBentoGrid, { allowedSizes, sizes, defaultSize }: TBentoSlotSource): TBentoSlot;
+export declare function toBentoSlot(grid: TBentoGrid, { allowedSizes, sizes, defaultSize, isAdjustable }: TBentoSlotSource): TBentoSlot;
 
 /**
  * Tooltip is a compound component for displaying contextual hints.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",