@grandbazar/ui-baza 1.9.0 → 1.10.1

package/dist/bento.cjs

@@ -55,23 +55,48 @@ const BENTO_TILE_SHAPE_BY_SIZE = {
   "2x2": "square",
   "4x1": "wideStrip",
   "4x2": "wide",
+  "4x3": "wide",
   "6x2": "long",
+  "6x3": "long",
   "8x2": "long",
   "8x3": "long",
-  "4x5": "large"
+  "4x4": "large",
+  "4x5": "large",
+  "6x6": "large",
+  "6x7": "large"
 };
 
-const BENTO_SIZES = ["1x1", "2x1", "2x2", "4x1", "4x2", "6x2", "8x2", "8x3", "4x5"];
+const BENTO_SIZES = [
+  "1x1",
+  "2x1",
+  "2x2",
+  "4x1",
+  "4x2",
+  "4x3",
+  "6x2",
+  "6x3",
+  "8x2",
+  "8x3",
+  "4x4",
+  "4x5",
+  "6x6",
+  "6x7"
+];
 const BENTO_SPANS = {
   "1x1": { columns: 1, rows: 1 },
   "2x1": { columns: 2, rows: 1 },
   "2x2": { columns: 2, rows: 2 },
   "4x1": { columns: 4, rows: 1 },
   "4x2": { columns: 4, rows: 2 },
+  "4x3": { columns: 4, rows: 3 },
   "6x2": { columns: 6, rows: 2 },
+  "6x3": { columns: 6, rows: 3 },
   "8x2": { columns: 8, rows: 2 },
   "8x3": { columns: 8, rows: 3 },
-  "4x5": { columns: 4, rows: 5 }
+  "4x4": { columns: 4, rows: 4 },
+  "4x5": { columns: 4, rows: 5 },
+  "6x6": { columns: 6, rows: 6 },
+  "6x7": { columns: 6, rows: 7 }
 };
 const BENTO_FALLBACKS = {
   "1x1": ["2x1", "2x2"],
@@ -79,15 +104,20 @@ const BENTO_FALLBACKS = {
   "2x2": ["4x2", "2x1", "6x2"],
   "4x1": ["4x2", "2x1", "2x2"],
   "4x2": ["2x2", "4x1", "6x2", "8x2", "8x3"],
+  "4x3": ["4x2", "4x1", "2x2"],
   "6x2": ["4x2", "8x2", "8x3", "2x2"],
+  "6x3": ["6x2", "8x3", "4x2", "8x2"],
   "8x2": ["8x3", "6x2", "4x2", "2x2"],
   "8x3": ["8x2", "6x2", "4x2"],
-  "4x5": []
+  "4x4": [],
+  "4x5": [],
+  "6x6": [],
+  "6x7": []
 };
 const BENTO_THIN_SIZES = ["2x1", "4x1"];
 const BENTO_CONFIGURABLE_SIZES = {
-  mobile: ["2x2", "4x2", "4x1", "2x1", "1x1"],
-  desktop: ["2x2", "4x2", "6x2", "8x2", "8x3", "4x1"]
+  mobile: ["2x2", "4x2", "4x3", "4x1", "2x1", "1x1"],
+  desktop: ["2x2", "4x2", "6x2", "6x3", "8x2", "8x3", "4x1"]
 };
 const BENTO_AUTO_SIZES = {
   mobile: ["2x2", "2x1", "4x2", "4x1"],
@@ -99,10 +129,15 @@ const BENTO_MOBILE_SIZE_BY_DESKTOP = {
   "2x2": "2x2",
   "4x1": "4x1",
   "4x2": "4x2",
+  "4x3": "4x3",
   "6x2": "4x2",
+  "6x3": "4x2",
   "8x2": "4x2",
   "8x3": "4x2",
-  "4x5": "4x5"
+  "4x4": "4x4",
+  "4x5": "4x5",
+  "6x6": "4x4",
+  "6x7": "4x5"
 };
 const BENTO_MAX_RESIZES = 5;
 const BENTO_SEARCH_NODE_LIMIT = 3e4;
@@ -112,6 +147,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 +272,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 +298,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 +319,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

@@ -12,7 +12,7 @@ export declare const BENTO_GRIDS: Record<TBentoGrid, TBentoGridRules>;
 
 export declare const BENTO_MOBILE_SIZE_BY_DESKTOP: Record<TBentoSize, TBentoSize>;
 
-export declare const BENTO_SIZES: readonly ["1x1", "2x1", "2x2", "4x1", "4x2", "6x2", "8x2", "8x3", "4x5"];
+export declare const BENTO_SIZES: readonly ["1x1", "2x1", "2x2", "4x1", "4x2", "4x3", "6x2", "6x3", "8x2", "8x3", "4x4", "4x5", "6x6", "6x7"];
 
 export declare const BENTO_THIN_SIZES: readonly TBentoSize[];
 
@@ -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

@@ -51,23 +51,48 @@ const BENTO_TILE_SHAPE_BY_SIZE = {
   "2x2": "square",
   "4x1": "wideStrip",
   "4x2": "wide",
+  "4x3": "wide",
   "6x2": "long",
+  "6x3": "long",
   "8x2": "long",
   "8x3": "long",
-  "4x5": "large"
+  "4x4": "large",
+  "4x5": "large",
+  "6x6": "large",
+  "6x7": "large"
 };
 
-const BENTO_SIZES = ["1x1", "2x1", "2x2", "4x1", "4x2", "6x2", "8x2", "8x3", "4x5"];
+const BENTO_SIZES = [
+  "1x1",
+  "2x1",
+  "2x2",
+  "4x1",
+  "4x2",
+  "4x3",
+  "6x2",
+  "6x3",
+  "8x2",
+  "8x3",
+  "4x4",
+  "4x5",
+  "6x6",
+  "6x7"
+];
 const BENTO_SPANS = {
   "1x1": { columns: 1, rows: 1 },
   "2x1": { columns: 2, rows: 1 },
   "2x2": { columns: 2, rows: 2 },
   "4x1": { columns: 4, rows: 1 },
   "4x2": { columns: 4, rows: 2 },
+  "4x3": { columns: 4, rows: 3 },
   "6x2": { columns: 6, rows: 2 },
+  "6x3": { columns: 6, rows: 3 },
   "8x2": { columns: 8, rows: 2 },
   "8x3": { columns: 8, rows: 3 },
-  "4x5": { columns: 4, rows: 5 }
+  "4x4": { columns: 4, rows: 4 },
+  "4x5": { columns: 4, rows: 5 },
+  "6x6": { columns: 6, rows: 6 },
+  "6x7": { columns: 6, rows: 7 }
 };
 const BENTO_FALLBACKS = {
   "1x1": ["2x1", "2x2"],
@@ -75,15 +100,20 @@ const BENTO_FALLBACKS = {
   "2x2": ["4x2", "2x1", "6x2"],
   "4x1": ["4x2", "2x1", "2x2"],
   "4x2": ["2x2", "4x1", "6x2", "8x2", "8x3"],
+  "4x3": ["4x2", "4x1", "2x2"],
   "6x2": ["4x2", "8x2", "8x3", "2x2"],
+  "6x3": ["6x2", "8x3", "4x2", "8x2"],
   "8x2": ["8x3", "6x2", "4x2", "2x2"],
   "8x3": ["8x2", "6x2", "4x2"],
-  "4x5": []
+  "4x4": [],
+  "4x5": [],
+  "6x6": [],
+  "6x7": []
 };
 const BENTO_THIN_SIZES = ["2x1", "4x1"];
 const BENTO_CONFIGURABLE_SIZES = {
-  mobile: ["2x2", "4x2", "4x1", "2x1", "1x1"],
-  desktop: ["2x2", "4x2", "6x2", "8x2", "8x3", "4x1"]
+  mobile: ["2x2", "4x2", "4x3", "4x1", "2x1", "1x1"],
+  desktop: ["2x2", "4x2", "6x2", "6x3", "8x2", "8x3", "4x1"]
 };
 const BENTO_AUTO_SIZES = {
   mobile: ["2x2", "2x1", "4x2", "4x1"],
@@ -95,10 +125,15 @@ const BENTO_MOBILE_SIZE_BY_DESKTOP = {
   "2x2": "2x2",
   "4x1": "4x1",
   "4x2": "4x2",
+  "4x3": "4x3",
   "6x2": "4x2",
+  "6x3": "4x2",
   "8x2": "4x2",
   "8x3": "4x2",
-  "4x5": "4x5"
+  "4x4": "4x4",
+  "4x5": "4x5",
+  "6x6": "4x4",
+  "6x7": "4x5"
 };
 const BENTO_MAX_RESIZES = 5;
 const BENTO_SEARCH_NODE_LIMIT = 3e4;
@@ -108,6 +143,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 +268,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 +294,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 +315,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

@@ -64,7 +64,7 @@ export declare const BENTO_GRIDS: Record<TBentoGrid, TBentoGridRules>;
 
 export declare const BENTO_MOBILE_SIZE_BY_DESKTOP: Record<TBentoSize, TBentoSize>;
 
-export declare const BENTO_SIZES: readonly ["1x1", "2x1", "2x2", "4x1", "4x2", "6x2", "8x2", "8x3", "4x5"];
+export declare const BENTO_SIZES: readonly ["1x1", "2x1", "2x2", "4x1", "4x2", "4x3", "6x2", "6x3", "8x2", "8x3", "4x4", "4x5", "6x6", "6x7"];
 
 export declare const BENTO_THIN_SIZES: readonly TBentoSize[];
 
@@ -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.1",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",