@grandbazar/ui-baza 1.7.1 → 1.9.0

package/dist/bento.cjs

@@ -0,0 +1,294 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const BENTO_GRID_NAMES = ["mobile", "desktop"];
+const BENTO_GRIDS = {
+  mobile: {
+    columns: 4,
+    presets: {
+      1: ["4x2"],
+      2: ["4x2", "4x2"],
+      3: ["4x2", "2x2", "2x2"],
+      4: ["4x2", "2x2", "2x1", "2x1"],
+      5: ["4x2", "2x2", "2x2", "2x2", "2x2"]
+    },
+    rhythm: ["4x2", "2x2", "2x2", "2x2", "2x1", "2x1"]
+  },
+  desktop: {
+    columns: 12,
+    presets: {
+      1: ["6x2"],
+      2: ["6x2", "6x2"],
+      3: ["4x2", "4x2", "4x2"],
+      4: ["4x2", "4x2", "2x2", "2x2"],
+      5: ["4x2", "2x2", "2x2", "4x1", "4x1"],
+      6: ["4x2", "2x2", "6x2", "4x2", "4x2", "4x2"],
+      7: ["4x2", "2x2", "6x2", "4x2", "4x2", "4x1", "4x1"],
+      10: ["4x2", "2x2", "6x2", "4x2", "2x2", "2x2", "4x1", "4x1", "6x2", "6x2"]
+    },
+    rhythm: [
+      "4x2",
+      "2x2",
+      "6x2",
+      "4x2",
+      "2x2",
+      "2x2",
+      "4x1",
+      "4x1",
+      "6x2",
+      "2x2",
+      "4x2",
+      "2x2",
+      "2x2",
+      "4x2",
+      "4x1",
+      "4x1"
+    ]
+  }
+};
+
+const BENTO_TILE_SHAPES = ["square", "strip", "wide", "wideStrip", "large", "long", "picture"];
+const BENTO_TILE_SHAPE_BY_SIZE = {
+  "1x1": "picture",
+  "2x1": "strip",
+  "2x2": "square",
+  "4x1": "wideStrip",
+  "4x2": "wide",
+  "6x2": "long",
+  "8x2": "long",
+  "8x3": "long",
+  "4x5": "large"
+};
+
+const BENTO_SIZES = ["1x1", "2x1", "2x2", "4x1", "4x2", "6x2", "8x2", "8x3", "4x5"];
+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 },
+  "6x2": { columns: 6, rows: 2 },
+  "8x2": { columns: 8, rows: 2 },
+  "8x3": { columns: 8, rows: 3 },
+  "4x5": { columns: 4, rows: 5 }
+};
+const BENTO_FALLBACKS = {
+  "1x1": ["2x1", "2x2"],
+  "2x1": ["2x2", "4x1", "4x2"],
+  "2x2": ["4x2", "2x1", "6x2"],
+  "4x1": ["4x2", "2x1", "2x2"],
+  "4x2": ["2x2", "4x1", "6x2", "8x2", "8x3"],
+  "6x2": ["4x2", "8x2", "8x3", "2x2"],
+  "8x2": ["8x3", "6x2", "4x2", "2x2"],
+  "8x3": ["8x2", "6x2", "4x2"],
+  "4x5": []
+};
+const BENTO_THIN_SIZES = ["2x1", "4x1"];
+const BENTO_CONFIGURABLE_SIZES = {
+  mobile: ["2x2", "4x2", "4x1", "2x1", "1x1"],
+  desktop: ["2x2", "4x2", "6x2", "8x2", "8x3", "4x1"]
+};
+const BENTO_AUTO_SIZES = {
+  mobile: ["2x2", "2x1", "4x2", "4x1"],
+  desktop: ["2x2", "4x2", "4x1", "6x2", "8x2", "8x3"]
+};
+const BENTO_MOBILE_SIZE_BY_DESKTOP = {
+  "1x1": "1x1",
+  "2x1": "2x1",
+  "2x2": "2x2",
+  "4x1": "4x1",
+  "4x2": "4x2",
+  "6x2": "4x2",
+  "8x2": "4x2",
+  "8x3": "4x2",
+  "4x5": "4x5"
+};
+const BENTO_MAX_RESIZES = 5;
+const BENTO_SEARCH_NODE_LIMIT = 3e4;
+
+function toBentoSpan(size, columns) {
+  const span = BENTO_SPANS[size];
+  return { columns: Math.min(span.columns, columns), rows: span.rows };
+}
+
+function findHoleFreeBentoSizes(preferredSizes, slots, columns) {
+  const fullRow = (1 << columns) - 1;
+  const innerEdges = (1 << columns - 1) - 1;
+  let visitedCount = 0;
+  const candidatesAt = slots.map(({ allowedSizes }, index) => {
+    const preferred = preferredSizes[index];
+    const orderedSizes = preferred ? [preferred, ...BENTO_FALLBACKS[preferred], ...allowedSizes] : [...allowedSizes];
+    return orderedSizes.filter((size, at) => allowedSizes.includes(size) && orderedSizes.indexOf(size) === at).map((size) => ({ size, span: toBentoSpan(size, columns) }));
+  });
+  const oddSlotCounts = candidatesAt.reduceRight(
+    (after, candidates) => [(after[0] ?? 0) + Number(candidates.some(({ span }) => span.rows % 2)), ...after],
+    [0]
+  );
+  const remainderMasks = candidatesAt.reduceRight(
+    (after, candidates) => {
+      const next = after[0] ?? 0;
+      const reachable = candidates.reduce((mask, { span }) => {
+        const shift = span.columns * span.rows % columns;
+        return mask | (next << shift | next >>> columns - shift) & fullRow;
+      }, 0);
+      return [reachable, ...after];
+    },
+    [1]
+  );
+  const place = (rows, span) => {
+    const mask = (1 << span.columns) - 1;
+    for (let row = 0; ; row++) {
+      for (let column = 0; column + span.columns <= columns; column++) {
+        let isFree = true;
+        for (let offset = 0; offset < span.rows && isFree; offset++) {
+          isFree = !((rows[row + offset] ?? 0) & mask << column);
+        }
+        if (isFree) {
+          const nextRows = rows.slice();
+          for (let at = nextRows.length; at < row + span.rows; at++) {
+            nextRows.push(0);
+          }
+          for (let offset = 0; offset < span.rows; offset++) {
+            nextRows[row + offset] = (nextRows[row + offset] ?? 0) | mask << column;
+          }
+          let firstOpenRow = 0;
+          while (firstOpenRow < nextRows.length && nextRows[firstOpenRow] === fullRow) {
+            firstOpenRow++;
+          }
+          return nextRows.slice(firstOpenRow);
+        }
+      }
+    }
+  };
+  const isClosable = (index, rows, filledArea) => {
+    const missing = (columns - filledArea % columns) % columns;
+    const parity = rows.reduce((xor, taken) => xor ^ taken, 0);
+    let parityEdges = (parity ^ parity >>> 1) & innerEdges;
+    let parityEdgeCount = 0;
+    while (parityEdges) {
+      parityEdges &= parityEdges - 1;
+      parityEdgeCount++;
+    }
+    return Boolean((remainderMasks[index] ?? 0) & 1 << missing) && parityEdgeCount <= 2 * (oddSlotCounts[index] ?? 0);
+  };
+  const search = (index, rows, filledArea, resizesLeft, deadEnds) => {
+    if (index === slots.length) {
+      return rows.length ? null : [];
+    }
+    const key = `${index}:${resizesLeft}:${rows.join(",")}`;
+    if (deadEnds.has(key) || !isClosable(index, rows, filledArea) || ++visitedCount > BENTO_SEARCH_NODE_LIMIT) {
+      return null;
+    }
+    const allCandidates = candidatesAt[index] ?? [];
+    const candidates = resizesLeft ? allCandidates : allCandidates.slice(0, 1);
+    for (const [at, { size, span }] of candidates.entries()) {
+      const restSizes = search(
+        index + 1,
+        place(rows, span),
+        filledArea + span.columns * span.rows,
+        resizesLeft - Number(at > 0),
+        deadEnds
+      );
+      if (restSizes) {
+        return [size, ...restSizes];
+      }
+    }
+    deadEnds.add(key);
+    return null;
+  };
+  for (let resizeCount = 0; resizeCount <= BENTO_MAX_RESIZES; resizeCount++) {
+    const foundSizes = search(0, [], 0, resizeCount, /* @__PURE__ */ new Set());
+    if (foundSizes) {
+      return foundSizes;
+    }
+  }
+  return null;
+}
+
+function arrangeBento(slots, { columns, presets, rhythm }) {
+  const fitAllowed = (size, { allowedSizes }) => {
+    return [size, ...BENTO_FALLBACKS[size]].find((candidate) => allowedSizes.includes(candidate)) ?? allowedSizes[0] ?? size;
+  };
+  const isFixed = ({ allowedSizes }) => {
+    return allowedSizes.length === 1;
+  };
+  const flexibleIndexes = slots.flatMap((slot, index) => isFixed(slot) ? [] : [index]);
+  const presetSizes = presets[flexibleIndexes.length];
+  const layOut = ({ isPreferenceKept }) => {
+    return slots.map((slot, index) => {
+      const order = flexibleIndexes.indexOf(index);
+      const patternSize = presetSizes?.[order] ?? rhythm[order % rhythm.length];
+      const size = isFixed(slot) && slot.allowedSizes[0] || isPreferenceKept && slot.preferredSize || patternSize;
+      return fitAllowed(size ?? slot.preferredSize ?? slot.allowedSizes[0] ?? "2x2", slot);
+    });
+  };
+  const preferredSizes = layOut({ isPreferenceKept: true });
+  return findHoleFreeBentoSizes(preferredSizes, slots, columns) ?? findHoleFreeBentoSizes(layOut({ isPreferenceKept: false }), slots, columns) ?? preferredSizes;
+}
+
+function arrangeBentoGrids(slotsByGrid) {
+  const mobileSizes = arrangeBento(slotsByGrid.mobile, BENTO_GRIDS.mobile);
+  const desktopSizes = arrangeBento(slotsByGrid.desktop, BENTO_GRIDS.desktop);
+  return mobileSizes.flatMap((mobile, index) => {
+    const desktop = desktopSizes[index];
+    return desktop ? [{ mobile, desktop }] : [];
+  });
+}
+
+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];
+  if (fixedSize) {
+    return { preferredSize: fixedSize, allowedSizes: [fixedSize] };
+  }
+  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))
+  };
+}
+
+exports.BENTO_AUTO_SIZES = BENTO_AUTO_SIZES;
+exports.BENTO_CONFIGURABLE_SIZES = BENTO_CONFIGURABLE_SIZES;
+exports.BENTO_GRIDS = BENTO_GRIDS;
+exports.BENTO_GRID_NAMES = BENTO_GRID_NAMES;
+exports.BENTO_MOBILE_SIZE_BY_DESKTOP = BENTO_MOBILE_SIZE_BY_DESKTOP;
+exports.BENTO_SIZES = BENTO_SIZES;
+exports.BENTO_THIN_SIZES = BENTO_THIN_SIZES;
+exports.BENTO_TILE_SHAPES = BENTO_TILE_SHAPES;
+exports.BENTO_TILE_SHAPE_BY_SIZE = BENTO_TILE_SHAPE_BY_SIZE;
+exports.arrangeBento = arrangeBento;
+exports.arrangeBentoGrids = arrangeBentoGrids;
+exports.countBentoHoles = countBentoHoles;
+exports.toBentoSlot = toBentoSlot;

package/dist/bento.d.ts

@@ -0,0 +1,54 @@
+export declare function arrangeBento(slots: readonly TBentoSlot[], { columns, presets, rhythm }: TBentoGridRules): TBentoSize[];
+
+export declare function arrangeBentoGrids(slotsByGrid: Record<TBentoGrid, readonly TBentoSlot[]>): TBentoSizes[];
+
+export declare const BENTO_AUTO_SIZES: Record<TBentoGrid, readonly TBentoSize[]>;
+
+export declare const BENTO_CONFIGURABLE_SIZES: Record<TBentoGrid, readonly TBentoSize[]>;
+
+export declare const BENTO_GRID_NAMES: readonly ["mobile", "desktop"];
+
+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_THIN_SIZES: readonly TBentoSize[];
+
+export declare const BENTO_TILE_SHAPE_BY_SIZE: Record<TBentoSize, TBentoTileShape>;
+
+export declare const BENTO_TILE_SHAPES: readonly ["square", "strip", "wide", "wideStrip", "large", "long", "picture"];
+
+export declare function countBentoHoles(sizes: readonly TBentoSize[], columns: number): number;
+
+declare type TArrayElement<T extends readonly unknown[]> = T[number];
+
+export declare type TBentoGrid = TArrayElement<typeof BENTO_GRID_NAMES>;
+
+export declare type TBentoGridRules = {
+    columns: number;
+    presets: Partial<Record<number, readonly TBentoSize[]>>;
+    rhythm: readonly TBentoSize[];
+};
+
+export declare type TBentoSize = TArrayElement<typeof BENTO_SIZES>;
+
+export declare type TBentoSizes = Record<TBentoGrid, TBentoSize>;
+
+export declare type TBentoSlot = {
+    preferredSize: TBentoSize | null;
+    allowedSizes: readonly TBentoSize[];
+};
+
+declare type TBentoSlotSource = {
+    allowedSizes: readonly TBentoSize[];
+    sizes: Partial<Record<TBentoGrid, TBentoSize | null>>;
+    defaultSize: TBentoSize | null;
+};
+
+export declare type TBentoTileShape = TArrayElement<typeof BENTO_TILE_SHAPES>;
+
+export declare function toBentoSlot(grid: TBentoGrid, { allowedSizes, sizes, defaultSize }: TBentoSlotSource): TBentoSlot;
+
+export { }

package/dist/bento.js

@@ -0,0 +1,278 @@
+const BENTO_GRID_NAMES = ["mobile", "desktop"];
+const BENTO_GRIDS = {
+  mobile: {
+    columns: 4,
+    presets: {
+      1: ["4x2"],
+      2: ["4x2", "4x2"],
+      3: ["4x2", "2x2", "2x2"],
+      4: ["4x2", "2x2", "2x1", "2x1"],
+      5: ["4x2", "2x2", "2x2", "2x2", "2x2"]
+    },
+    rhythm: ["4x2", "2x2", "2x2", "2x2", "2x1", "2x1"]
+  },
+  desktop: {
+    columns: 12,
+    presets: {
+      1: ["6x2"],
+      2: ["6x2", "6x2"],
+      3: ["4x2", "4x2", "4x2"],
+      4: ["4x2", "4x2", "2x2", "2x2"],
+      5: ["4x2", "2x2", "2x2", "4x1", "4x1"],
+      6: ["4x2", "2x2", "6x2", "4x2", "4x2", "4x2"],
+      7: ["4x2", "2x2", "6x2", "4x2", "4x2", "4x1", "4x1"],
+      10: ["4x2", "2x2", "6x2", "4x2", "2x2", "2x2", "4x1", "4x1", "6x2", "6x2"]
+    },
+    rhythm: [
+      "4x2",
+      "2x2",
+      "6x2",
+      "4x2",
+      "2x2",
+      "2x2",
+      "4x1",
+      "4x1",
+      "6x2",
+      "2x2",
+      "4x2",
+      "2x2",
+      "2x2",
+      "4x2",
+      "4x1",
+      "4x1"
+    ]
+  }
+};
+
+const BENTO_TILE_SHAPES = ["square", "strip", "wide", "wideStrip", "large", "long", "picture"];
+const BENTO_TILE_SHAPE_BY_SIZE = {
+  "1x1": "picture",
+  "2x1": "strip",
+  "2x2": "square",
+  "4x1": "wideStrip",
+  "4x2": "wide",
+  "6x2": "long",
+  "8x2": "long",
+  "8x3": "long",
+  "4x5": "large"
+};
+
+const BENTO_SIZES = ["1x1", "2x1", "2x2", "4x1", "4x2", "6x2", "8x2", "8x3", "4x5"];
+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 },
+  "6x2": { columns: 6, rows: 2 },
+  "8x2": { columns: 8, rows: 2 },
+  "8x3": { columns: 8, rows: 3 },
+  "4x5": { columns: 4, rows: 5 }
+};
+const BENTO_FALLBACKS = {
+  "1x1": ["2x1", "2x2"],
+  "2x1": ["2x2", "4x1", "4x2"],
+  "2x2": ["4x2", "2x1", "6x2"],
+  "4x1": ["4x2", "2x1", "2x2"],
+  "4x2": ["2x2", "4x1", "6x2", "8x2", "8x3"],
+  "6x2": ["4x2", "8x2", "8x3", "2x2"],
+  "8x2": ["8x3", "6x2", "4x2", "2x2"],
+  "8x3": ["8x2", "6x2", "4x2"],
+  "4x5": []
+};
+const BENTO_THIN_SIZES = ["2x1", "4x1"];
+const BENTO_CONFIGURABLE_SIZES = {
+  mobile: ["2x2", "4x2", "4x1", "2x1", "1x1"],
+  desktop: ["2x2", "4x2", "6x2", "8x2", "8x3", "4x1"]
+};
+const BENTO_AUTO_SIZES = {
+  mobile: ["2x2", "2x1", "4x2", "4x1"],
+  desktop: ["2x2", "4x2", "4x1", "6x2", "8x2", "8x3"]
+};
+const BENTO_MOBILE_SIZE_BY_DESKTOP = {
+  "1x1": "1x1",
+  "2x1": "2x1",
+  "2x2": "2x2",
+  "4x1": "4x1",
+  "4x2": "4x2",
+  "6x2": "4x2",
+  "8x2": "4x2",
+  "8x3": "4x2",
+  "4x5": "4x5"
+};
+const BENTO_MAX_RESIZES = 5;
+const BENTO_SEARCH_NODE_LIMIT = 3e4;
+
+function toBentoSpan(size, columns) {
+  const span = BENTO_SPANS[size];
+  return { columns: Math.min(span.columns, columns), rows: span.rows };
+}
+
+function findHoleFreeBentoSizes(preferredSizes, slots, columns) {
+  const fullRow = (1 << columns) - 1;
+  const innerEdges = (1 << columns - 1) - 1;
+  let visitedCount = 0;
+  const candidatesAt = slots.map(({ allowedSizes }, index) => {
+    const preferred = preferredSizes[index];
+    const orderedSizes = preferred ? [preferred, ...BENTO_FALLBACKS[preferred], ...allowedSizes] : [...allowedSizes];
+    return orderedSizes.filter((size, at) => allowedSizes.includes(size) && orderedSizes.indexOf(size) === at).map((size) => ({ size, span: toBentoSpan(size, columns) }));
+  });
+  const oddSlotCounts = candidatesAt.reduceRight(
+    (after, candidates) => [(after[0] ?? 0) + Number(candidates.some(({ span }) => span.rows % 2)), ...after],
+    [0]
+  );
+  const remainderMasks = candidatesAt.reduceRight(
+    (after, candidates) => {
+      const next = after[0] ?? 0;
+      const reachable = candidates.reduce((mask, { span }) => {
+        const shift = span.columns * span.rows % columns;
+        return mask | (next << shift | next >>> columns - shift) & fullRow;
+      }, 0);
+      return [reachable, ...after];
+    },
+    [1]
+  );
+  const place = (rows, span) => {
+    const mask = (1 << span.columns) - 1;
+    for (let row = 0; ; row++) {
+      for (let column = 0; column + span.columns <= columns; column++) {
+        let isFree = true;
+        for (let offset = 0; offset < span.rows && isFree; offset++) {
+          isFree = !((rows[row + offset] ?? 0) & mask << column);
+        }
+        if (isFree) {
+          const nextRows = rows.slice();
+          for (let at = nextRows.length; at < row + span.rows; at++) {
+            nextRows.push(0);
+          }
+          for (let offset = 0; offset < span.rows; offset++) {
+            nextRows[row + offset] = (nextRows[row + offset] ?? 0) | mask << column;
+          }
+          let firstOpenRow = 0;
+          while (firstOpenRow < nextRows.length && nextRows[firstOpenRow] === fullRow) {
+            firstOpenRow++;
+          }
+          return nextRows.slice(firstOpenRow);
+        }
+      }
+    }
+  };
+  const isClosable = (index, rows, filledArea) => {
+    const missing = (columns - filledArea % columns) % columns;
+    const parity = rows.reduce((xor, taken) => xor ^ taken, 0);
+    let parityEdges = (parity ^ parity >>> 1) & innerEdges;
+    let parityEdgeCount = 0;
+    while (parityEdges) {
+      parityEdges &= parityEdges - 1;
+      parityEdgeCount++;
+    }
+    return Boolean((remainderMasks[index] ?? 0) & 1 << missing) && parityEdgeCount <= 2 * (oddSlotCounts[index] ?? 0);
+  };
+  const search = (index, rows, filledArea, resizesLeft, deadEnds) => {
+    if (index === slots.length) {
+      return rows.length ? null : [];
+    }
+    const key = `${index}:${resizesLeft}:${rows.join(",")}`;
+    if (deadEnds.has(key) || !isClosable(index, rows, filledArea) || ++visitedCount > BENTO_SEARCH_NODE_LIMIT) {
+      return null;
+    }
+    const allCandidates = candidatesAt[index] ?? [];
+    const candidates = resizesLeft ? allCandidates : allCandidates.slice(0, 1);
+    for (const [at, { size, span }] of candidates.entries()) {
+      const restSizes = search(
+        index + 1,
+        place(rows, span),
+        filledArea + span.columns * span.rows,
+        resizesLeft - Number(at > 0),
+        deadEnds
+      );
+      if (restSizes) {
+        return [size, ...restSizes];
+      }
+    }
+    deadEnds.add(key);
+    return null;
+  };
+  for (let resizeCount = 0; resizeCount <= BENTO_MAX_RESIZES; resizeCount++) {
+    const foundSizes = search(0, [], 0, resizeCount, /* @__PURE__ */ new Set());
+    if (foundSizes) {
+      return foundSizes;
+    }
+  }
+  return null;
+}
+
+function arrangeBento(slots, { columns, presets, rhythm }) {
+  const fitAllowed = (size, { allowedSizes }) => {
+    return [size, ...BENTO_FALLBACKS[size]].find((candidate) => allowedSizes.includes(candidate)) ?? allowedSizes[0] ?? size;
+  };
+  const isFixed = ({ allowedSizes }) => {
+    return allowedSizes.length === 1;
+  };
+  const flexibleIndexes = slots.flatMap((slot, index) => isFixed(slot) ? [] : [index]);
+  const presetSizes = presets[flexibleIndexes.length];
+  const layOut = ({ isPreferenceKept }) => {
+    return slots.map((slot, index) => {
+      const order = flexibleIndexes.indexOf(index);
+      const patternSize = presetSizes?.[order] ?? rhythm[order % rhythm.length];
+      const size = isFixed(slot) && slot.allowedSizes[0] || isPreferenceKept && slot.preferredSize || patternSize;
+      return fitAllowed(size ?? slot.preferredSize ?? slot.allowedSizes[0] ?? "2x2", slot);
+    });
+  };
+  const preferredSizes = layOut({ isPreferenceKept: true });
+  return findHoleFreeBentoSizes(preferredSizes, slots, columns) ?? findHoleFreeBentoSizes(layOut({ isPreferenceKept: false }), slots, columns) ?? preferredSizes;
+}
+
+function arrangeBentoGrids(slotsByGrid) {
+  const mobileSizes = arrangeBento(slotsByGrid.mobile, BENTO_GRIDS.mobile);
+  const desktopSizes = arrangeBento(slotsByGrid.desktop, BENTO_GRIDS.desktop);
+  return mobileSizes.flatMap((mobile, index) => {
+    const desktop = desktopSizes[index];
+    return desktop ? [{ mobile, desktop }] : [];
+  });
+}
+
+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];
+  if (fixedSize) {
+    return { preferredSize: fixedSize, allowedSizes: [fixedSize] };
+  }
+  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))
+  };
+}
+
+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.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const bento = require('./bento.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const reactDom = require('react-dom');
@@ -3890,6 +3891,19 @@ function Tooltip(props) {
 }
 Tooltip.Content = TooltipContent;
 
+exports.BENTO_AUTO_SIZES = bento.BENTO_AUTO_SIZES;
+exports.BENTO_CONFIGURABLE_SIZES = bento.BENTO_CONFIGURABLE_SIZES;
+exports.BENTO_GRIDS = bento.BENTO_GRIDS;
+exports.BENTO_GRID_NAMES = bento.BENTO_GRID_NAMES;
+exports.BENTO_MOBILE_SIZE_BY_DESKTOP = bento.BENTO_MOBILE_SIZE_BY_DESKTOP;
+exports.BENTO_SIZES = bento.BENTO_SIZES;
+exports.BENTO_THIN_SIZES = bento.BENTO_THIN_SIZES;
+exports.BENTO_TILE_SHAPES = bento.BENTO_TILE_SHAPES;
+exports.BENTO_TILE_SHAPE_BY_SIZE = bento.BENTO_TILE_SHAPE_BY_SIZE;
+exports.arrangeBento = bento.arrangeBento;
+exports.arrangeBentoGrids = bento.arrangeBentoGrids;
+exports.countBentoHoles = bento.countBentoHoles;
+exports.toBentoSlot = bento.toBentoSlot;
 exports.Badge = Badge;
 exports.BadgeTabs = BadgeTabs;
 exports.Breadcrumbs = Breadcrumbs;

package/dist/index.d.ts

@@ -6,6 +6,10 @@ import { JSX } from 'react/jsx-runtime';
 import { ReactPortal } from 'react';
 import { SetStateAction } from 'react';
 
+export declare function arrangeBento(slots: readonly TBentoSlot[], { columns, presets, rhythm }: TBentoGridRules): TBentoSize[];
+
+export declare function arrangeBentoGrids(slotsByGrid: Record<TBentoGrid, readonly TBentoSlot[]>): TBentoSizes[];
+
 /**
  * Badge displays a label or indicator with customizable color and size.
  * Supports multiple color schemes and display modes for different contexts.
@@ -50,6 +54,24 @@ declare function BadgeTabsItem({ className, children, isActive, mode, ...props }
 
 declare function BadgeTabsRoot({ className, children, ...props }: TBadgeTabsRootProps): JSX.Element;
 
+export declare const BENTO_AUTO_SIZES: Record<TBentoGrid, readonly TBentoSize[]>;
+
+export declare const BENTO_CONFIGURABLE_SIZES: Record<TBentoGrid, readonly TBentoSize[]>;
+
+export declare const BENTO_GRID_NAMES: readonly ["mobile", "desktop"];
+
+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_THIN_SIZES: readonly TBentoSize[];
+
+export declare const BENTO_TILE_SHAPE_BY_SIZE: Record<TBentoSize, TBentoTileShape>;
+
+export declare const BENTO_TILE_SHAPES: readonly ["square", "strip", "wide", "wideStrip", "large", "long", "picture"];
+
 declare function BreadcrumbItem({ children, className, isActive, asChild, ...props }: TBreadcrumbItemProps): JSX.Element;
 
 /**
@@ -138,6 +160,8 @@ declare const CHIP_MODES: readonly ["default", "glass", "white"];
 
 declare const CHIP_SHAPES: readonly ["default", "pill"];
 
+export declare function countBentoHoles(sizes: readonly TBentoSize[], columns: number): number;
+
 export declare function Counter({ className, size, color, ...props }: TCounterProps): JSX.Element;
 
 declare const COUNTER_COLORS: readonly ["red", "accent", "neutral", "secondary", "white"];
@@ -776,6 +800,31 @@ declare type TBadgeTabsRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'c
     children: React.ReactNode;
 };
 
+export declare type TBentoGrid = TArrayElement<typeof BENTO_GRID_NAMES>;
+
+export declare type TBentoGridRules = {
+    columns: number;
+    presets: Partial<Record<number, readonly TBentoSize[]>>;
+    rhythm: readonly TBentoSize[];
+};
+
+export declare type TBentoSize = TArrayElement<typeof BENTO_SIZES>;
+
+export declare type TBentoSizes = Record<TBentoGrid, TBentoSize>;
+
+export declare type TBentoSlot = {
+    preferredSize: TBentoSize | null;
+    allowedSizes: readonly TBentoSize[];
+};
+
+declare type TBentoSlotSource = {
+    allowedSizes: readonly TBentoSize[];
+    sizes: Partial<Record<TBentoGrid, TBentoSize | null>>;
+    defaultSize: TBentoSize | null;
+};
+
+export declare type TBentoTileShape = TArrayElement<typeof BENTO_TILE_SHAPES>;
+
 declare type TBreadcrumbItemProps = TAsChildProps<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
     children: React.ReactNode;
     className?: string;
@@ -937,6 +986,8 @@ declare type TNotificationInlineProps = Omit<React.HTMLAttributes<HTMLDivElement
     onClose?: () => void;
 };
 
+export declare function toBentoSlot(grid: TBentoGrid, { allowedSizes, sizes, defaultSize }: TBentoSlotSource): TBentoSlot;
+
 /**
  * Tooltip is a compound component for displaying contextual hints.
  * Provides a trigger wrapper and content rendering for short descriptions.

package/dist/index.js

@@ -1,3 +1,4 @@
+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 } from './bento.js';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import React, { isValidElement, cloneElement, Fragment, useMemo, useState, useCallback, createContext, useEffect, useRef, useContext, useId, Children } from 'react';
 import { createPortal } from 'react-dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.7.1",
+  "version": "1.9.0",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",
@@ -40,6 +40,16 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./bento": {
+      "import": {
+        "types": "./dist/bento.d.ts",
+        "default": "./dist/bento.js"
+      },
+      "require": {
+        "types": "./dist/bento.d.ts",
+        "default": "./dist/bento.cjs"
+      }
+    },
     "./css": "./dist/style.css"
   },
   "scripts": {