bento-grid-builder 0.1.0

package/dist/index.js

@@ -0,0 +1,800 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BentoCard: () => BentoCard,
+  BentoGrid: () => BentoGrid,
+  PRESET_LAYOUTS: () => PRESET_LAYOUTS,
+  UnifiedBentoGrid: () => UnifiedBentoGrid,
+  createSimpleLayout: () => createSimpleLayout,
+  getPresetSlotNames: () => getPresetSlotNames,
+  isPresetName: () => isPresetName,
+  isResponsiveConfig: () => isResponsiveConfig,
+  layoutBuilder: () => layoutBuilder,
+  presetToLayout: () => presetToLayout,
+  useCardDefinitions: () => useCardDefinitions,
+  useDataMapping: () => useDataMapping,
+  useLayout: () => useLayout,
+  useResponsiveLayout: () => useResponsiveLayout,
+  useWindowWidth: () => useWindowWidth,
+  validateLayout: () => validateLayout
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/BentoGrid.tsx
+var import_react2 = __toESM(require("react"));
+
+// src/presets.ts
+var PRESET_LAYOUTS = {
+  "2x2": {
+    name: "2x2",
+    columns: 2,
+    rows: 2,
+    slots: [
+      { name: "top-left", col: 1, row: 1 },
+      { name: "top-right", col: 2, row: 1 },
+      { name: "bottom-left", col: 1, row: 2 },
+      { name: "bottom-right", col: 2, row: 2 }
+    ]
+  },
+  "3x2": {
+    name: "3x2",
+    columns: 3,
+    rows: 2,
+    slots: [
+      { name: "top-1", col: 1, row: 1 },
+      { name: "top-2", col: 2, row: 1 },
+      { name: "top-3", col: 3, row: 1 },
+      { name: "bottom-1", col: 1, row: 2 },
+      { name: "bottom-2", col: 2, row: 2 },
+      { name: "bottom-3", col: 3, row: 2 }
+    ]
+  },
+  "3x3": {
+    name: "3x3",
+    columns: 3,
+    rows: 3,
+    slots: [
+      { name: "r1-c1", col: 1, row: 1 },
+      { name: "r1-c2", col: 2, row: 1 },
+      { name: "r1-c3", col: 3, row: 1 },
+      { name: "r2-c1", col: 1, row: 2 },
+      { name: "r2-c2", col: 2, row: 2 },
+      { name: "r2-c3", col: 3, row: 2 },
+      { name: "r3-c1", col: 1, row: 3 },
+      { name: "r3-c2", col: 2, row: 3 },
+      { name: "r3-c3", col: 3, row: 3 }
+    ]
+  },
+  "4x2": {
+    name: "4x2",
+    columns: 4,
+    rows: 2,
+    slots: [
+      { name: "top-1", col: 1, row: 1 },
+      { name: "top-2", col: 2, row: 1 },
+      { name: "top-3", col: 3, row: 1 },
+      { name: "top-4", col: 4, row: 1 },
+      { name: "bottom-1", col: 1, row: 2 },
+      { name: "bottom-2", col: 2, row: 2 },
+      { name: "bottom-3", col: 3, row: 2 },
+      { name: "bottom-4", col: 4, row: 2 }
+    ]
+  },
+  "2x1-hero-left": {
+    name: "2x1-hero-left",
+    columns: 3,
+    rows: 2,
+    slots: [
+      { name: "hero", col: 1, row: 1, colSpan: 2, rowSpan: 2 },
+      { name: "side-top", col: 3, row: 1 },
+      { name: "side-bottom", col: 3, row: 2 }
+    ]
+  },
+  "2x1-hero-right": {
+    name: "2x1-hero-right",
+    columns: 3,
+    rows: 2,
+    slots: [
+      { name: "side-top", col: 1, row: 1 },
+      { name: "side-bottom", col: 1, row: 2 },
+      { name: "hero", col: 2, row: 1, colSpan: 2, rowSpan: 2 }
+    ]
+  },
+  "dashboard-9": {
+    name: "dashboard-9",
+    columns: 3,
+    rows: 4,
+    slots: [
+      { name: "header-wide", col: 1, row: 1, colSpan: 2 },
+      { name: "header-right", col: 3, row: 1 },
+      { name: "hero", col: 1, row: 2, rowSpan: 2 },
+      { name: "mid-center", col: 2, row: 2 },
+      { name: "mid-right", col: 3, row: 2 },
+      { name: "lower-center", col: 2, row: 3 },
+      { name: "lower-right", col: 3, row: 3 },
+      { name: "footer-left", col: 1, row: 4 },
+      { name: "footer-wide", col: 2, row: 4, colSpan: 2 }
+    ]
+  }
+};
+function presetToLayout(presetName, cardIdsOrMapping) {
+  const preset = PRESET_LAYOUTS[presetName];
+  if (!preset) {
+    throw new Error(`Unknown preset layout: ${presetName}`);
+  }
+  let placements;
+  if (cardIdsOrMapping.length > 0 && typeof cardIdsOrMapping[0] === "object" && "slot" in cardIdsOrMapping[0]) {
+    const slotMapping = cardIdsOrMapping;
+    placements = slotMapping.map((mapping) => {
+      const slotIndex = typeof mapping.slot === "number" ? mapping.slot : preset.slots.findIndex((s) => s.name === mapping.slot);
+      if (slotIndex === -1 || slotIndex >= preset.slots.length) {
+        console.warn(
+          `Preset "${presetName}": slot "${mapping.slot}" not found`
+        );
+        return null;
+      }
+      const slot = preset.slots[slotIndex];
+      return {
+        cardId: mapping.cardId,
+        col: slot.col,
+        row: slot.row,
+        colSpan: slot.colSpan,
+        rowSpan: slot.rowSpan
+      };
+    }).filter((p) => p !== null);
+  } else {
+    const cardIds = cardIdsOrMapping;
+    placements = preset.slots.map((slot, index) => ({
+      cardId: cardIds[index] ?? `card-${index}`,
+      col: slot.col,
+      row: slot.row,
+      colSpan: slot.colSpan,
+      rowSpan: slot.rowSpan
+    }));
+  }
+  return {
+    columns: preset.columns,
+    rows: preset.rows,
+    placements
+  };
+}
+function getPresetSlotNames(presetName) {
+  const preset = PRESET_LAYOUTS[presetName];
+  if (!preset) {
+    throw new Error(`Unknown preset layout: ${presetName}`);
+  }
+  return preset.slots.map((s, i) => s.name ?? `slot-${i}`);
+}
+function isPresetName(value) {
+  return typeof value === "string" && value in PRESET_LAYOUTS;
+}
+
+// src/BentoCard.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var BentoCard = ({
+  children,
+  className = "",
+  style
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    className: `bento-card ${className}`,
+    style: {
+      backgroundColor: "var(--bento-card-bg, transparent)",
+      borderRadius: "var(--bento-card-radius, 12px)",
+      padding: "var(--bento-card-padding, 16px)",
+      border: "var(--bento-card-border, 1px solid rgba(128, 128, 128, 0.2))",
+      height: "100%",
+      boxSizing: "border-box",
+      ...style
+    },
+    children
+  }
+);
+
+// src/utils.ts
+function createSimpleLayout(columns, cardIds, gap) {
+  const placements = cardIds.map((cardId, index) => ({
+    cardId,
+    col: index % columns + 1,
+    row: Math.floor(index / columns) + 1
+  }));
+  return {
+    columns,
+    gap,
+    placements
+  };
+}
+function layoutBuilder(columns) {
+  const config = {
+    columns,
+    placements: []
+  };
+  const builder = {
+    gap(value) {
+      config.gap = value;
+      return builder;
+    },
+    columnGap(value) {
+      config.columnGap = value;
+      return builder;
+    },
+    rowGap(value) {
+      config.rowGap = value;
+      return builder;
+    },
+    rows(value) {
+      config.rows = value;
+      return builder;
+    },
+    place(cardId, col, row, options) {
+      config.placements.push({
+        cardId,
+        col,
+        row,
+        ...options
+      });
+      return builder;
+    },
+    build() {
+      return config;
+    }
+  };
+  return builder;
+}
+function validateLayout(layout) {
+  const errors = [];
+  if (layout.columns < 1) {
+    errors.push("columns must be at least 1");
+  }
+  if (layout.rows !== void 0 && layout.rows < 1) {
+    errors.push("rows must be at least 1");
+  }
+  if (layout.gap !== void 0 && layout.gap < 0) {
+    errors.push("gap cannot be negative");
+  }
+  const occupied = /* @__PURE__ */ new Set();
+  for (const placement of layout.placements) {
+    const colSpan = placement.colSpan ?? 1;
+    const rowSpan = placement.rowSpan ?? 1;
+    if (placement.col < 1 || placement.col + colSpan - 1 > layout.columns) {
+      errors.push(
+        `Card "${placement.cardId}" exceeds column bounds (col: ${placement.col}, span: ${colSpan})`
+      );
+    }
+    if (placement.row < 1) {
+      errors.push(
+        `Card "${placement.cardId}" has invalid row: ${placement.row}`
+      );
+    }
+    for (let c = placement.col; c < placement.col + colSpan; c++) {
+      for (let r = placement.row; r < placement.row + rowSpan; r++) {
+        const key = `${c},${r}`;
+        if (occupied.has(key)) {
+          errors.push(
+            `Card "${placement.cardId}" overlaps at position (${c}, ${r})`
+          );
+        }
+        occupied.add(key);
+      }
+    }
+  }
+  return errors;
+}
+
+// src/hooks.ts
+var import_react = require("react");
+function useStableValue(value) {
+  const ref = (0, import_react.useRef)(value);
+  const prevJson = (0, import_react.useRef)("");
+  const json = JSON.stringify(value, (key, val) => {
+    if (typeof val === "function") {
+      return val.toString();
+    }
+    return val;
+  });
+  if (json !== prevJson.current) {
+    ref.current = value;
+    prevJson.current = json;
+  }
+  return ref.current;
+}
+function isResponsiveConfig(layout) {
+  return typeof layout === "object" && "default" in layout && "breakpoints" in layout;
+}
+function useResponsiveLayout(config) {
+  const [width, setWidth] = (0, import_react.useState)(
+    () => typeof window !== "undefined" ? window.innerWidth : 0
+  );
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const handleResize = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return (0, import_react.useMemo)(() => {
+    if (!isResponsiveConfig(config)) {
+      return config;
+    }
+    const sortedBreakpoints = [...config.breakpoints].sort(
+      (a, b) => b.minWidth - a.minWidth
+    );
+    for (const bp of sortedBreakpoints) {
+      if (width >= bp.minWidth) {
+        return bp.layout;
+      }
+    }
+    return config.default;
+  }, [config, width]);
+}
+function useWindowWidth(debounceMs = 100) {
+  const [width, setWidth] = (0, import_react.useState)(
+    () => typeof window !== "undefined" ? window.innerWidth : 0
+  );
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    let timeoutId;
+    const handleResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => setWidth(window.innerWidth), debounceMs);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [debounceMs]);
+  return width;
+}
+function useCardDefinitions(definitions) {
+  const stableDefinitions = useStableValue(definitions);
+  return (0, import_react.useMemo)(() => {
+    return Object.entries(stableDefinitions).map(([id, def]) => ({
+      id,
+      ...def
+    }));
+  }, [stableDefinitions]);
+}
+function useDataMapping(mappings) {
+  const stableMappings = useStableValue(mappings);
+  return (0, import_react.useMemo)(() => {
+    return Object.entries(stableMappings).map(([cardId, propsSelector]) => ({
+      cardId,
+      propsSelector
+    }));
+  }, [stableMappings]);
+}
+function useLayout(config, cardIds) {
+  return (0, import_react.useMemo)(() => {
+    if (isPresetName(config)) {
+      if (!cardIds) {
+        throw new Error("cardIds required when using preset layout name");
+      }
+      return presetToLayout(config, cardIds);
+    }
+    return config;
+  }, [config, cardIds]);
+}
+
+// src/BentoGrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DefaultCardWrapper = ({
+  children,
+  className,
+  style
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BentoCard, { className, style, children });
+var DefaultLoadingComponent = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "div",
+  {
+    className: "bento-card-loading",
+    style: {
+      width: "100%",
+      height: "100%",
+      minHeight: 100,
+      backgroundColor: "var(--bento-loading-bg, rgba(128, 128, 128, 0.1))",
+      borderRadius: "var(--bento-card-radius, 12px)",
+      animation: "bento-pulse 1.5s ease-in-out infinite"
+    },
+    "aria-label": "Loading",
+    role: "status"
+  }
+);
+function useGridStyles() {
+  (0, import_react2.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const styleId = "bento-grid-styles";
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      .bento-grid {
+        display: grid;
+        grid-template-columns: repeat(var(--bento-columns, 3), 1fr);
+        grid-template-rows: repeat(var(--bento-rows, 2), minmax(0, 1fr));
+        column-gap: var(--bento-column-gap, var(--bento-gap, 16px));
+        row-gap: var(--bento-row-gap, var(--bento-gap, 16px));
+      }
+      .bento-cell {
+        grid-column: var(--bento-col, 1) / span var(--bento-col-span, 1);
+        grid-row: var(--bento-row, 1) / span var(--bento-row-span, 1);
+      }
+    `;
+    document.head.appendChild(style);
+  }, []);
+}
+function useAnimationStyles() {
+  (0, import_react2.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const styleId = "bento-grid-animations";
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      @keyframes bento-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+      @keyframes bento-fade-in {
+        from { opacity: 0; transform: scale(0.95); }
+        to { opacity: 1; transform: scale(1); }
+      }
+      .bento-cell-animated {
+        animation: bento-fade-in var(--bento-animation-duration, 300ms) ease-out;
+      }
+    `;
+    document.head.appendChild(style);
+  }, []);
+}
+var CardErrorBoundary = class extends import_react2.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      errorKey: `${props.cardId}-${props.resetKey ?? ""}`
+    };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  static getDerivedStateFromProps(props, state) {
+    const newKey = `${props.cardId}-${props.resetKey ?? ""}`;
+    if (newKey !== state.errorKey) {
+      return { hasError: false, errorKey: newKey };
+    }
+    return null;
+  }
+  componentDidCatch(error) {
+    this.props.onError?.(this.props.cardId, error);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: "bento-card-error",
+          role: "alert",
+          style: { color: "#ef4444", padding: 16 },
+          children: "Failed to render card"
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+function BentoGrid({
+  layout,
+  cards,
+  data,
+  dataMapping,
+  className = "",
+  style,
+  cardWrapper,
+  onCardError,
+  ariaLabel,
+  ariaLabelledBy,
+  animated = false,
+  animationDuration = 300,
+  cellClassName
+}) {
+  useGridStyles();
+  useAnimationStyles();
+  const responsiveLayout = useResponsiveLayout(layout);
+  const CardWrapper = cardWrapper ?? DefaultCardWrapper;
+  const resolvedLayout = (0, import_react2.useMemo)(() => {
+    if (isPresetName(responsiveLayout)) {
+      const cardIds = dataMapping.map((m) => m.cardId);
+      return presetToLayout(responsiveLayout, cardIds);
+    }
+    return responsiveLayout;
+  }, [responsiveLayout, dataMapping]);
+  const cardMap = (0, import_react2.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    cards.forEach((card) => map.set(card.id, card));
+    return map;
+  }, [cards]);
+  const dataMappingMap = (0, import_react2.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    dataMapping.forEach((mapping) => map.set(mapping.cardId, mapping));
+    return map;
+  }, [dataMapping]);
+  (0, import_react2.useMemo)(() => {
+    if (process.env.NODE_ENV !== "production") {
+      const errors = validateLayout(resolvedLayout);
+      if (errors.length > 0) {
+        console.warn("BentoGrid layout validation errors:", errors);
+      }
+      for (const placement of resolvedLayout.placements) {
+        if (!cards.some((c) => c.id === placement.cardId)) {
+          console.warn(
+            `BentoGrid: Card "${placement.cardId}" in layout but not in cards array`
+          );
+        }
+      }
+      for (const placement of resolvedLayout.placements) {
+        if (!dataMapping.some((m) => m.cardId === placement.cardId)) {
+          console.warn(
+            `BentoGrid: Card "${placement.cardId}" has no data mapping`
+          );
+        }
+      }
+    }
+  }, [resolvedLayout, cards, dataMapping]);
+  const {
+    columns,
+    rows,
+    gap = 16,
+    columnGap,
+    rowGap,
+    placements
+  } = resolvedLayout;
+  const calculatedRows = rows ?? Math.max(...placements.map((p) => p.row + (p.rowSpan ?? 1) - 1), 1);
+  const gridStyle = {
+    "--bento-columns": columns,
+    "--bento-rows": calculatedRows,
+    "--bento-gap": `${gap}px`,
+    "--bento-column-gap": `${columnGap ?? gap}px`,
+    "--bento-row-gap": `${rowGap ?? gap}px`,
+    ...animated && { "--bento-animation-duration": `${animationDuration}ms` },
+    ...style
+  };
+  const getCellClassName = (cardId) => {
+    const baseClass = `bento-cell ${animated ? "bento-cell-animated" : ""}`;
+    if (!cellClassName) return baseClass;
+    if (typeof cellClassName === "function")
+      return `${baseClass} ${cellClassName(cardId)}`;
+    return `${baseClass} ${cellClassName}`;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: `bento-grid ${className}`,
+      style: gridStyle,
+      role: "region",
+      "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Dashboard grid"),
+      "aria-labelledby": ariaLabelledBy,
+      children: placements.map((placement) => {
+        const card = cardMap.get(placement.cardId);
+        const mapping = dataMappingMap.get(placement.cardId);
+        if (!card) {
+          console.warn(`BentoGrid: Card "${placement.cardId}" not found`);
+          return null;
+        }
+        const cardProps = mapping ? mapping.propsSelector(data) : {};
+        const resetKey = JSON.stringify(cardProps);
+        const colSpan = placement.colSpan ?? card.colSpan ?? 1;
+        const rowSpan = placement.rowSpan ?? card.rowSpan ?? 1;
+        const cellStyle = {
+          "--bento-col": placement.col,
+          "--bento-row": placement.row,
+          "--bento-col-span": colSpan,
+          "--bento-row-span": rowSpan
+        };
+        const CardComponent = card.component;
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: getCellClassName(placement.cardId),
+            style: cellStyle,
+            "data-card-id": placement.cardId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              CardErrorBoundary,
+              {
+                cardId: placement.cardId,
+                onError: onCardError,
+                resetKey,
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CardWrapper, { cardId: placement.cardId, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CardComponent, { ...cardProps }) })
+              }
+            )
+          },
+          `${placement.cardId}-${placement.col}-${placement.row}`
+        );
+      })
+    }
+  );
+}
+function isCardVisible(card, data) {
+  if (card.visible === void 0) return true;
+  if (typeof card.visible === "function") return card.visible(data);
+  return card.visible;
+}
+function isCardLoading(card, data) {
+  if (card.loading === void 0) return false;
+  if (typeof card.loading === "function") return card.loading(data);
+  return card.loading;
+}
+function UnifiedBentoGrid({
+  layout,
+  cards,
+  data,
+  className = "",
+  style,
+  cardWrapper,
+  onCardError,
+  ariaLabel,
+  ariaLabelledBy,
+  animated = false,
+  animationDuration = 300,
+  loadingComponent: GlobalLoadingComponent = DefaultLoadingComponent,
+  cellClassName
+}) {
+  useGridStyles();
+  useAnimationStyles();
+  const responsiveLayout = useResponsiveLayout(layout);
+  const CardWrapper = cardWrapper ?? DefaultCardWrapper;
+  const visibleCards = (0, import_react2.useMemo)(() => {
+    return cards.filter((card) => isCardVisible(card, data));
+  }, [cards, data]);
+  const resolvedLayout = (0, import_react2.useMemo)(() => {
+    if (isPresetName(responsiveLayout)) {
+      const cardIds = visibleCards.map((c) => c.id);
+      return presetToLayout(responsiveLayout, cardIds);
+    }
+    return responsiveLayout;
+  }, [responsiveLayout, visibleCards]);
+  const cardMap = (0, import_react2.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    visibleCards.forEach((card) => map.set(card.id, card));
+    return map;
+  }, [visibleCards]);
+  (0, import_react2.useMemo)(() => {
+    if (process.env.NODE_ENV !== "production") {
+      const errors = validateLayout(resolvedLayout);
+      if (errors.length > 0) {
+        console.warn("UnifiedBentoGrid layout validation errors:", errors);
+      }
+      for (const placement of resolvedLayout.placements) {
+        if (!visibleCards.some((c) => c.id === placement.cardId)) {
+          console.warn(
+            `UnifiedBentoGrid: Card "${placement.cardId}" in layout but not in cards array`
+          );
+        }
+      }
+    }
+  }, [resolvedLayout, visibleCards]);
+  const {
+    columns,
+    rows,
+    gap = 16,
+    columnGap,
+    rowGap,
+    placements
+  } = resolvedLayout;
+  const calculatedRows = rows ?? Math.max(...placements.map((p) => p.row + (p.rowSpan ?? 1) - 1), 1);
+  const gridStyle = {
+    "--bento-columns": columns,
+    "--bento-rows": calculatedRows,
+    "--bento-gap": `${gap}px`,
+    "--bento-column-gap": `${columnGap ?? gap}px`,
+    "--bento-row-gap": `${rowGap ?? gap}px`,
+    ...animated && { "--bento-animation-duration": `${animationDuration}ms` },
+    ...style
+  };
+  const getCellClassName = (cardId) => {
+    const baseClass = `bento-cell ${animated ? "bento-cell-animated" : ""}`;
+    if (!cellClassName) return baseClass;
+    if (typeof cellClassName === "function")
+      return `${baseClass} ${cellClassName(cardId)}`;
+    return `${baseClass} ${cellClassName}`;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: `bento-grid ${className}`,
+      style: gridStyle,
+      role: "region",
+      "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Dashboard grid"),
+      "aria-labelledby": ariaLabelledBy,
+      children: placements.map((placement) => {
+        const card = cardMap.get(placement.cardId);
+        if (!card) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(
+              `UnifiedBentoGrid: Card "${placement.cardId}" not found`
+            );
+          }
+          return null;
+        }
+        const loading = isCardLoading(card, data);
+        const cardProps = card.propsSelector(data);
+        const resetKey = JSON.stringify(cardProps);
+        const colSpan = placement.colSpan ?? card.colSpan ?? 1;
+        const rowSpan = placement.rowSpan ?? card.rowSpan ?? 1;
+        const cellStyle = {
+          "--bento-col": placement.col,
+          "--bento-row": placement.row,
+          "--bento-col-span": colSpan,
+          "--bento-row-span": rowSpan
+        };
+        const CardComponent = card.component;
+        const LoadingComponent = card.loadingComponent ?? GlobalLoadingComponent;
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: getCellClassName(placement.cardId),
+            style: cellStyle,
+            "data-card-id": placement.cardId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              CardErrorBoundary,
+              {
+                cardId: placement.cardId,
+                onError: onCardError,
+                resetKey,
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CardWrapper, { cardId: placement.cardId, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CardComponent, { ...cardProps }) })
+              }
+            )
+          },
+          `${placement.cardId}-${placement.col}-${placement.row}`
+        );
+      })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BentoCard,
+  BentoGrid,
+  PRESET_LAYOUTS,
+  UnifiedBentoGrid,
+  createSimpleLayout,
+  getPresetSlotNames,
+  isPresetName,
+  isResponsiveConfig,
+  layoutBuilder,
+  presetToLayout,
+  useCardDefinitions,
+  useDataMapping,
+  useLayout,
+  useResponsiveLayout,
+  useWindowWidth,
+  validateLayout
+});
+//# sourceMappingURL=index.js.map