panelgrid 0.1.1 → 0.1.3

package/dist/PanelGridProvider.cjs

@@ -0,0 +1,54 @@
+const require_usePanelGrid = require('./usePanelGrid.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/PanelGridProvider.tsx
+const PanelGridStateContext = (0, react.createContext)(void 0);
+const PanelGridControlsContext = (0, react.createContext)(void 0);
+function PanelGridProvider({ panels: initialPanels, columnCount, gap, children, rearrangement }) {
+	const [baseSize, setBaseSize] = (0, react.useState)(null);
+	const { panels, panelMap, addPanel, removePanel, lockPanelSize, unlockPanelSize, exportState, ghostPanelRef } = require_usePanelGrid.usePanelGrid({
+		panels: initialPanels,
+		columnCount,
+		baseSize: baseSize || 256,
+		gap,
+		rearrangement
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PanelGridStateContext.Provider, {
+		value: {
+			panels,
+			panelMap,
+			columnCount,
+			gap,
+			baseSize,
+			ghostPanelRef
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PanelGridControlsContext.Provider, {
+			value: {
+				setBaseSize,
+				addPanel,
+				removePanel,
+				lockPanelSize,
+				unlockPanelSize,
+				exportState
+			},
+			children
+		})
+	});
+}
+function usePanelGridState() {
+	const context = (0, react.useContext)(PanelGridStateContext);
+	if (!context) throw new Error("usePanelGridState must be used within a PanelGridProvider");
+	return context;
+}
+function usePanelGridControls() {
+	const context = (0, react.useContext)(PanelGridControlsContext);
+	if (!context) throw new Error("usePanelGridControls must be used within a PanelGridProvider");
+	return context;
+}
+
+//#endregion
+exports.PanelGridProvider = PanelGridProvider;
+exports.usePanelGridControls = usePanelGridControls;
+exports.usePanelGridState = usePanelGridState;
+//# sourceMappingURL=PanelGridProvider.cjs.map

package/dist/PanelGridProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelGridProvider.cjs","names":["usePanelGrid"],"sources":["../src/PanelGridProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState } from \"react\";\nimport type { PanelCoordinate, PanelId, RearrangementFunction } from \"./types\";\nimport { usePanelGrid } from \"./usePanelGrid\";\n\ntype PanelGridState = ReturnType<typeof usePanelGrid>;\n\ninterface PanelGridContextType {\n  panels: PanelGridState[\"panels\"];\n  panelMap: PanelGridState[\"panelMap\"];\n  baseSize: number | null;\n  columnCount: number;\n  gap: number;\n  ghostPanelRef: React.RefObject<HTMLDivElement | null>;\n}\n\ninterface PanelGridControlsContextType {\n  setBaseSize: (baseSize: number) => void;\n  addPanel: (panel: Partial<PanelCoordinate>) => void;\n  removePanel: (id: PanelId) => void;\n  lockPanelSize: (id: PanelId) => void;\n  unlockPanelSize: (id: PanelId) => void;\n  exportState: () => PanelCoordinate[];\n}\n\nconst PanelGridStateContext = createContext<PanelGridContextType | undefined>(undefined);\nconst PanelGridControlsContext = createContext<PanelGridControlsContextType | undefined>(undefined);\n\ninterface PanelGridProviderProps {\n  panels: PanelCoordinate[];\n  columnCount: number;\n  gap: number;\n  children: React.ReactNode;\n  /**\n   * Optional custom rearrangement function to override default collision resolution logic\n   * If provided, this function will be called instead of the default rearrangePanels\n   */\n  rearrangement?: RearrangementFunction;\n}\n\nexport function PanelGridProvider({\n  panels: initialPanels,\n  columnCount,\n  gap,\n  children,\n  rearrangement,\n}: PanelGridProviderProps) {\n  const [baseSize, setBaseSize] = useState<number | null>(null);\n\n  const { panels, panelMap, addPanel, removePanel, lockPanelSize, unlockPanelSize, exportState, ghostPanelRef } =\n    usePanelGrid({\n      panels: initialPanels,\n      columnCount,\n      baseSize: baseSize || 256,\n      gap,\n      rearrangement,\n    });\n\n  return (\n    <PanelGridStateContext.Provider value={{ panels, panelMap, columnCount, gap, baseSize, ghostPanelRef }}>\n      <PanelGridControlsContext.Provider\n        value={{ setBaseSize, addPanel, removePanel, lockPanelSize, unlockPanelSize, exportState }}\n      >\n        {children}\n      </PanelGridControlsContext.Provider>\n    </PanelGridStateContext.Provider>\n  );\n}\n\nexport function usePanelGridState() {\n  const context = useContext(PanelGridStateContext);\n  if (!context) {\n    throw new Error(\"usePanelGridState must be used within a PanelGridProvider\");\n  }\n  return context;\n}\n\nexport function usePanelGridControls() {\n  const context = useContext(PanelGridControlsContext);\n  if (!context) {\n    throw new Error(\"usePanelGridControls must be used within a PanelGridProvider\");\n  }\n  return context;\n}\n"],"mappings":";;;;;AAwBA,MAAM,iDAAwE,OAAU;AACxF,MAAM,oDAAmF,OAAU;AAcnG,SAAgB,kBAAkB,EAChC,QAAQ,eACR,aACA,KACA,UACA,iBACyB;CACzB,MAAM,CAAC,UAAU,mCAAuC,KAAK;CAE7D,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,eAAe,iBAAiB,aAAa,kBAC5FA,kCAAa;EACX,QAAQ;EACR;EACA,UAAU,YAAY;EACtB;EACA;EACD,CAAC;AAEJ,QACE,2CAAC,sBAAsB;EAAS,OAAO;GAAE;GAAQ;GAAU;GAAa;GAAK;GAAU;GAAe;YACpG,2CAAC,yBAAyB;GACxB,OAAO;IAAE;IAAa;IAAU;IAAa;IAAe;IAAiB;IAAa;GAEzF;IACiC;GACL;;AAIrC,SAAgB,oBAAoB;CAClC,MAAM,gCAAqB,sBAAsB;AACjD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,4DAA4D;AAE9E,QAAO;;AAGT,SAAgB,uBAAuB;CACrC,MAAM,gCAAqB,yBAAyB;AACpD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,+DAA+D;AAEjF,QAAO"}

package/dist/PanelGridProvider.d.cts

@@ -0,0 +1,45 @@
+import { PanelCoordinate, PanelId, RearrangementFunction } from "./types.cjs";
+import { usePanelGrid } from "./usePanelGrid.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/PanelGridProvider.d.ts
+type PanelGridState = ReturnType<typeof usePanelGrid>;
+interface PanelGridContextType {
+  panels: PanelGridState["panels"];
+  panelMap: PanelGridState["panelMap"];
+  baseSize: number | null;
+  columnCount: number;
+  gap: number;
+  ghostPanelRef: React.RefObject<HTMLDivElement | null>;
+}
+interface PanelGridControlsContextType {
+  setBaseSize: (baseSize: number) => void;
+  addPanel: (panel: Partial<PanelCoordinate>) => void;
+  removePanel: (id: PanelId) => void;
+  lockPanelSize: (id: PanelId) => void;
+  unlockPanelSize: (id: PanelId) => void;
+  exportState: () => PanelCoordinate[];
+}
+interface PanelGridProviderProps {
+  panels: PanelCoordinate[];
+  columnCount: number;
+  gap: number;
+  children: React.ReactNode;
+  /**
+   * Optional custom rearrangement function to override default collision resolution logic
+   * If provided, this function will be called instead of the default rearrangePanels
+   */
+  rearrangement?: RearrangementFunction;
+}
+declare function PanelGridProvider({
+  panels: initialPanels,
+  columnCount,
+  gap,
+  children,
+  rearrangement
+}: PanelGridProviderProps): react_jsx_runtime0.JSX.Element;
+declare function usePanelGridState(): PanelGridContextType;
+declare function usePanelGridControls(): PanelGridControlsContextType;
+//#endregion
+export { PanelGridProvider, usePanelGridControls, usePanelGridState };
+//# sourceMappingURL=PanelGridProvider.d.cts.map

package/dist/PanelGridProvider.d.mts

@@ -0,0 +1,45 @@
+import { PanelCoordinate, PanelId, RearrangementFunction } from "./types.mjs";
+import { usePanelGrid } from "./usePanelGrid.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/PanelGridProvider.d.ts
+type PanelGridState = ReturnType<typeof usePanelGrid>;
+interface PanelGridContextType {
+  panels: PanelGridState["panels"];
+  panelMap: PanelGridState["panelMap"];
+  baseSize: number | null;
+  columnCount: number;
+  gap: number;
+  ghostPanelRef: React.RefObject<HTMLDivElement | null>;
+}
+interface PanelGridControlsContextType {
+  setBaseSize: (baseSize: number) => void;
+  addPanel: (panel: Partial<PanelCoordinate>) => void;
+  removePanel: (id: PanelId) => void;
+  lockPanelSize: (id: PanelId) => void;
+  unlockPanelSize: (id: PanelId) => void;
+  exportState: () => PanelCoordinate[];
+}
+interface PanelGridProviderProps {
+  panels: PanelCoordinate[];
+  columnCount: number;
+  gap: number;
+  children: React.ReactNode;
+  /**
+   * Optional custom rearrangement function to override default collision resolution logic
+   * If provided, this function will be called instead of the default rearrangePanels
+   */
+  rearrangement?: RearrangementFunction;
+}
+declare function PanelGridProvider({
+  panels: initialPanels,
+  columnCount,
+  gap,
+  children,
+  rearrangement
+}: PanelGridProviderProps): react_jsx_runtime0.JSX.Element;
+declare function usePanelGridState(): PanelGridContextType;
+declare function usePanelGridControls(): PanelGridControlsContextType;
+//#endregion
+export { PanelGridProvider, usePanelGridControls, usePanelGridState };
+//# sourceMappingURL=PanelGridProvider.d.mts.map

package/dist/PanelGridProvider.mjs

@@ -0,0 +1,52 @@
+import { usePanelGrid } from "./usePanelGrid.mjs";
+import { createContext, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/PanelGridProvider.tsx
+const PanelGridStateContext = createContext(void 0);
+const PanelGridControlsContext = createContext(void 0);
+function PanelGridProvider({ panels: initialPanels, columnCount, gap, children, rearrangement }) {
+	const [baseSize, setBaseSize] = useState(null);
+	const { panels, panelMap, addPanel, removePanel, lockPanelSize, unlockPanelSize, exportState, ghostPanelRef } = usePanelGrid({
+		panels: initialPanels,
+		columnCount,
+		baseSize: baseSize || 256,
+		gap,
+		rearrangement
+	});
+	return /* @__PURE__ */ jsx(PanelGridStateContext.Provider, {
+		value: {
+			panels,
+			panelMap,
+			columnCount,
+			gap,
+			baseSize,
+			ghostPanelRef
+		},
+		children: /* @__PURE__ */ jsx(PanelGridControlsContext.Provider, {
+			value: {
+				setBaseSize,
+				addPanel,
+				removePanel,
+				lockPanelSize,
+				unlockPanelSize,
+				exportState
+			},
+			children
+		})
+	});
+}
+function usePanelGridState() {
+	const context = useContext(PanelGridStateContext);
+	if (!context) throw new Error("usePanelGridState must be used within a PanelGridProvider");
+	return context;
+}
+function usePanelGridControls() {
+	const context = useContext(PanelGridControlsContext);
+	if (!context) throw new Error("usePanelGridControls must be used within a PanelGridProvider");
+	return context;
+}
+
+//#endregion
+export { PanelGridProvider, usePanelGridControls, usePanelGridState };
+//# sourceMappingURL=PanelGridProvider.mjs.map

package/dist/PanelGridProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelGridProvider.mjs","names":[],"sources":["../src/PanelGridProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState } from \"react\";\nimport type { PanelCoordinate, PanelId, RearrangementFunction } from \"./types\";\nimport { usePanelGrid } from \"./usePanelGrid\";\n\ntype PanelGridState = ReturnType<typeof usePanelGrid>;\n\ninterface PanelGridContextType {\n  panels: PanelGridState[\"panels\"];\n  panelMap: PanelGridState[\"panelMap\"];\n  baseSize: number | null;\n  columnCount: number;\n  gap: number;\n  ghostPanelRef: React.RefObject<HTMLDivElement | null>;\n}\n\ninterface PanelGridControlsContextType {\n  setBaseSize: (baseSize: number) => void;\n  addPanel: (panel: Partial<PanelCoordinate>) => void;\n  removePanel: (id: PanelId) => void;\n  lockPanelSize: (id: PanelId) => void;\n  unlockPanelSize: (id: PanelId) => void;\n  exportState: () => PanelCoordinate[];\n}\n\nconst PanelGridStateContext = createContext<PanelGridContextType | undefined>(undefined);\nconst PanelGridControlsContext = createContext<PanelGridControlsContextType | undefined>(undefined);\n\ninterface PanelGridProviderProps {\n  panels: PanelCoordinate[];\n  columnCount: number;\n  gap: number;\n  children: React.ReactNode;\n  /**\n   * Optional custom rearrangement function to override default collision resolution logic\n   * If provided, this function will be called instead of the default rearrangePanels\n   */\n  rearrangement?: RearrangementFunction;\n}\n\nexport function PanelGridProvider({\n  panels: initialPanels,\n  columnCount,\n  gap,\n  children,\n  rearrangement,\n}: PanelGridProviderProps) {\n  const [baseSize, setBaseSize] = useState<number | null>(null);\n\n  const { panels, panelMap, addPanel, removePanel, lockPanelSize, unlockPanelSize, exportState, ghostPanelRef } =\n    usePanelGrid({\n      panels: initialPanels,\n      columnCount,\n      baseSize: baseSize || 256,\n      gap,\n      rearrangement,\n    });\n\n  return (\n    <PanelGridStateContext.Provider value={{ panels, panelMap, columnCount, gap, baseSize, ghostPanelRef }}>\n      <PanelGridControlsContext.Provider\n        value={{ setBaseSize, addPanel, removePanel, lockPanelSize, unlockPanelSize, exportState }}\n      >\n        {children}\n      </PanelGridControlsContext.Provider>\n    </PanelGridStateContext.Provider>\n  );\n}\n\nexport function usePanelGridState() {\n  const context = useContext(PanelGridStateContext);\n  if (!context) {\n    throw new Error(\"usePanelGridState must be used within a PanelGridProvider\");\n  }\n  return context;\n}\n\nexport function usePanelGridControls() {\n  const context = useContext(PanelGridControlsContext);\n  if (!context) {\n    throw new Error(\"usePanelGridControls must be used within a PanelGridProvider\");\n  }\n  return context;\n}\n"],"mappings":";;;;;AAwBA,MAAM,wBAAwB,cAAgD,OAAU;AACxF,MAAM,2BAA2B,cAAwD,OAAU;AAcnG,SAAgB,kBAAkB,EAChC,QAAQ,eACR,aACA,KACA,UACA,iBACyB;CACzB,MAAM,CAAC,UAAU,eAAe,SAAwB,KAAK;CAE7D,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,eAAe,iBAAiB,aAAa,kBAC5F,aAAa;EACX,QAAQ;EACR;EACA,UAAU,YAAY;EACtB;EACA;EACD,CAAC;AAEJ,QACE,oBAAC,sBAAsB;EAAS,OAAO;GAAE;GAAQ;GAAU;GAAa;GAAK;GAAU;GAAe;YACpG,oBAAC,yBAAyB;GACxB,OAAO;IAAE;IAAa;IAAU;IAAa;IAAe;IAAiB;IAAa;GAEzF;IACiC;GACL;;AAIrC,SAAgB,oBAAoB;CAClC,MAAM,UAAU,WAAW,sBAAsB;AACjD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,4DAA4D;AAE9E,QAAO;;AAGT,SAAgB,uBAAuB;CACrC,MAAM,UAAU,WAAW,yBAAyB;AACpD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,+DAA+D;AAEjF,QAAO"}

package/dist/PanelGridRenderer.cjs

@@ -0,0 +1,76 @@
+const require_gridCalculations = require('./helpers/gridCalculations.cjs');
+const require_PanelGridProvider = require('./PanelGridProvider.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/PanelGridRenderer.tsx
+function PanelGridRenderer({ itemRenderer: ItemRenderer }) {
+	const { panels, columnCount, gap, baseSize, ghostPanelRef } = require_PanelGridProvider.usePanelGridState();
+	const { setBaseSize } = require_PanelGridProvider.usePanelGridControls();
+	const containerRef = (0, react.useRef)(null);
+	const rowCount = require_gridCalculations.getGridRowCount(panels.map(({ panelProps: p }) => ({
+		id: p.key,
+		x: p.positionData.x,
+		y: p.positionData.y,
+		w: p.positionData.w,
+		h: p.positionData.h
+	})));
+	const count = Math.max(columnCount * (rowCount + 1), columnCount * columnCount);
+	(0, react.useLayoutEffect)(() => {
+		if (!containerRef.current) return;
+		const observer = new ResizeObserver((entries) => {
+			const [entry] = entries;
+			const rect = entry.contentRect;
+			setBaseSize(Math.floor((rect.width - gap * (columnCount - 1)) / columnCount));
+		});
+		observer.observe(containerRef.current);
+		return () => observer.disconnect();
+	}, [
+		columnCount,
+		gap,
+		setBaseSize
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "panelgrid-renderer",
+		style: {
+			"--column-count": `${columnCount}`,
+			"--gap": `${gap}px`,
+			opacity: baseSize ? 1 : 0
+		},
+		ref: containerRef,
+		children: [
+			Array.from({ length: count }).map((_, i) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "panelgrid-panel-placeholder" }, i);
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "panelgrid-panel-ghost",
+				ref: ghostPanelRef
+			}),
+			panels.map((panel) => {
+				const { panelProps, resizeHandleProps } = panel;
+				const { key, lockSize, style, positionData, ref, onMouseDown } = panelProps;
+				const className = lockSize ? "panelgrid-panel panelgrid-panel--size-locked" : "panelgrid-panel";
+				const { x, y, w, h } = positionData;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className,
+					style,
+					ref,
+					onMouseDown,
+					"data-panel-id": key,
+					"data-pg-x": x,
+					"data-pg-y": y,
+					"data-pg-w": w,
+					"data-pg-h": h,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemRenderer, { id: key }), resizeHandleProps && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "panelgrid-resize-handle",
+						...resizeHandleProps
+					})]
+				}, key);
+			})
+		]
+	});
+}
+
+//#endregion
+exports.PanelGridRenderer = PanelGridRenderer;
+//# sourceMappingURL=PanelGridRenderer.cjs.map

package/dist/PanelGridRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelGridRenderer.cjs","names":["usePanelGridState","usePanelGridControls","getGridRowCount"],"sources":["../src/PanelGridRenderer.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\nimport { getGridRowCount } from \"./helpers/gridCalculations\";\nimport { usePanelGridControls, usePanelGridState } from \"./PanelGridProvider\";\nimport type { PanelId } from \"./types\";\n\ninterface PanelGridRendererProps {\n  itemRenderer: React.ComponentType<{ id: PanelId }>;\n}\n\nexport function PanelGridRenderer({ itemRenderer: ItemRenderer }: PanelGridRendererProps) {\n  const { panels, columnCount, gap, baseSize, ghostPanelRef } = usePanelGridState();\n  const { setBaseSize } = usePanelGridControls();\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const rowCount = getGridRowCount(\n    panels.map(({ panelProps: p }) => ({\n      id: p.key,\n      x: p.positionData.x,\n      y: p.positionData.y,\n      w: p.positionData.w,\n      h: p.positionData.h,\n    }))\n  );\n  const count = Math.max(columnCount * (rowCount + 1), columnCount * columnCount);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) return;\n    const observer = new ResizeObserver((entries) => {\n      const [entry] = entries;\n      const rect = entry.contentRect;\n      const baseSize = Math.floor((rect.width - gap * (columnCount - 1)) / columnCount);\n      setBaseSize(baseSize);\n    });\n    observer.observe(containerRef.current);\n    return () => observer.disconnect();\n  }, [columnCount, gap, setBaseSize]);\n\n  return (\n    <div\n      className=\"panelgrid-renderer\"\n      style={{\n        \"--column-count\": `${columnCount}`,\n        \"--gap\": `${gap}px`,\n        opacity: baseSize ? 1 : 0,\n      }}\n      ref={containerRef}\n    >\n      {Array.from({ length: count }).map((_, i) => {\n        return <div key={i} className=\"panelgrid-panel-placeholder\" />;\n      })}\n\n      <div className=\"panelgrid-panel-ghost\" ref={ghostPanelRef}></div>\n\n      {panels.map((panel) => {\n        const { panelProps, resizeHandleProps } = panel;\n        const { key, lockSize, style, positionData, ref, onMouseDown } = panelProps;\n\n        const className = lockSize ? \"panelgrid-panel panelgrid-panel--size-locked\" : \"panelgrid-panel\";\n        const { x, y, w, h } = positionData;\n\n        return (\n          <div\n            key={key}\n            className={className}\n            style={style}\n            ref={ref}\n            onMouseDown={onMouseDown}\n            data-panel-id={key}\n            data-pg-x={x}\n            data-pg-y={y}\n            data-pg-w={w}\n            data-pg-h={h}\n          >\n            <ItemRenderer id={key} />\n            {resizeHandleProps && <span className=\"panelgrid-resize-handle\" {...resizeHandleProps}></span>}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AASA,SAAgB,kBAAkB,EAAE,cAAc,gBAAwC;CACxF,MAAM,EAAE,QAAQ,aAAa,KAAK,UAAU,kBAAkBA,6CAAmB;CACjF,MAAM,EAAE,gBAAgBC,gDAAsB;CAC9C,MAAM,iCAA6C,KAAK;CACxD,MAAM,WAAWC,yCACf,OAAO,KAAK,EAAE,YAAY,SAAS;EACjC,IAAI,EAAE;EACN,GAAG,EAAE,aAAa;EAClB,GAAG,EAAE,aAAa;EAClB,GAAG,EAAE,aAAa;EAClB,GAAG,EAAE,aAAa;EACnB,EAAE,CACJ;CACD,MAAM,QAAQ,KAAK,IAAI,eAAe,WAAW,IAAI,cAAc,YAAY;AAE/E,kCAAsB;AACpB,MAAI,CAAC,aAAa,QAAS;EAC3B,MAAM,WAAW,IAAI,gBAAgB,YAAY;GAC/C,MAAM,CAAC,SAAS;GAChB,MAAM,OAAO,MAAM;AAEnB,eADiB,KAAK,OAAO,KAAK,QAAQ,OAAO,cAAc,MAAM,YAAY,CAC5D;IACrB;AACF,WAAS,QAAQ,aAAa,QAAQ;AACtC,eAAa,SAAS,YAAY;IACjC;EAAC;EAAa;EAAK;EAAY,CAAC;AAEnC,QACE,4CAAC;EACC,WAAU;EACV,OAAO;GACL,kBAAkB,GAAG;GACrB,SAAS,GAAG,IAAI;GAChB,SAAS,WAAW,IAAI;GACzB;EACD,KAAK;;GAEJ,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,MAAM;AAC3C,WAAO,2CAAC,SAAY,WAAU,iCAAb,EAA6C;KAC9D;GAEF,2CAAC;IAAI,WAAU;IAAwB,KAAK;KAAqB;GAEhE,OAAO,KAAK,UAAU;IACrB,MAAM,EAAE,YAAY,sBAAsB;IAC1C,MAAM,EAAE,KAAK,UAAU,OAAO,cAAc,KAAK,gBAAgB;IAEjE,MAAM,YAAY,WAAW,iDAAiD;IAC9E,MAAM,EAAE,GAAG,GAAG,GAAG,MAAM;AAEvB,WACE,4CAAC;KAEY;KACJ;KACF;KACQ;KACb,iBAAe;KACf,aAAW;KACX,aAAW;KACX,aAAW;KACX,aAAW;gBAEX,2CAAC,gBAAa,IAAI,MAAO,EACxB,qBAAqB,2CAAC;MAAK,WAAU;MAA0B,GAAI;OAA0B;OAZzF,IAaD;KAER;;GACE"}

package/dist/PanelGridRenderer.d.cts

@@ -0,0 +1,15 @@
+import { PanelId } from "./types.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/PanelGridRenderer.d.ts
+interface PanelGridRendererProps {
+  itemRenderer: React.ComponentType<{
+    id: PanelId;
+  }>;
+}
+declare function PanelGridRenderer({
+  itemRenderer: ItemRenderer
+}: PanelGridRendererProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PanelGridRenderer };
+//# sourceMappingURL=PanelGridRenderer.d.cts.map

package/dist/PanelGridRenderer.d.mts

@@ -0,0 +1,15 @@
+import { PanelId } from "./types.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/PanelGridRenderer.d.ts
+interface PanelGridRendererProps {
+  itemRenderer: React.ComponentType<{
+    id: PanelId;
+  }>;
+}
+declare function PanelGridRenderer({
+  itemRenderer: ItemRenderer
+}: PanelGridRendererProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PanelGridRenderer };
+//# sourceMappingURL=PanelGridRenderer.d.mts.map

package/dist/PanelGridRenderer.mjs

@@ -0,0 +1,76 @@
+import { getGridRowCount } from "./helpers/gridCalculations.mjs";
+import { usePanelGridControls, usePanelGridState } from "./PanelGridProvider.mjs";
+import { useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/PanelGridRenderer.tsx
+function PanelGridRenderer({ itemRenderer: ItemRenderer }) {
+	const { panels, columnCount, gap, baseSize, ghostPanelRef } = usePanelGridState();
+	const { setBaseSize } = usePanelGridControls();
+	const containerRef = useRef(null);
+	const rowCount = getGridRowCount(panels.map(({ panelProps: p }) => ({
+		id: p.key,
+		x: p.positionData.x,
+		y: p.positionData.y,
+		w: p.positionData.w,
+		h: p.positionData.h
+	})));
+	const count = Math.max(columnCount * (rowCount + 1), columnCount * columnCount);
+	useLayoutEffect(() => {
+		if (!containerRef.current) return;
+		const observer = new ResizeObserver((entries) => {
+			const [entry] = entries;
+			const rect = entry.contentRect;
+			setBaseSize(Math.floor((rect.width - gap * (columnCount - 1)) / columnCount));
+		});
+		observer.observe(containerRef.current);
+		return () => observer.disconnect();
+	}, [
+		columnCount,
+		gap,
+		setBaseSize
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "panelgrid-renderer",
+		style: {
+			"--column-count": `${columnCount}`,
+			"--gap": `${gap}px`,
+			opacity: baseSize ? 1 : 0
+		},
+		ref: containerRef,
+		children: [
+			Array.from({ length: count }).map((_, i) => {
+				return /* @__PURE__ */ jsx("div", { className: "panelgrid-panel-placeholder" }, i);
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "panelgrid-panel-ghost",
+				ref: ghostPanelRef
+			}),
+			panels.map((panel) => {
+				const { panelProps, resizeHandleProps } = panel;
+				const { key, lockSize, style, positionData, ref, onMouseDown } = panelProps;
+				const className = lockSize ? "panelgrid-panel panelgrid-panel--size-locked" : "panelgrid-panel";
+				const { x, y, w, h } = positionData;
+				return /* @__PURE__ */ jsxs("div", {
+					className,
+					style,
+					ref,
+					onMouseDown,
+					"data-panel-id": key,
+					"data-pg-x": x,
+					"data-pg-y": y,
+					"data-pg-w": w,
+					"data-pg-h": h,
+					children: [/* @__PURE__ */ jsx(ItemRenderer, { id: key }), resizeHandleProps && /* @__PURE__ */ jsx("span", {
+						className: "panelgrid-resize-handle",
+						...resizeHandleProps
+					})]
+				}, key);
+			})
+		]
+	});
+}
+
+//#endregion
+export { PanelGridRenderer };
+//# sourceMappingURL=PanelGridRenderer.mjs.map

package/dist/PanelGridRenderer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelGridRenderer.mjs","names":[],"sources":["../src/PanelGridRenderer.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\nimport { getGridRowCount } from \"./helpers/gridCalculations\";\nimport { usePanelGridControls, usePanelGridState } from \"./PanelGridProvider\";\nimport type { PanelId } from \"./types\";\n\ninterface PanelGridRendererProps {\n  itemRenderer: React.ComponentType<{ id: PanelId }>;\n}\n\nexport function PanelGridRenderer({ itemRenderer: ItemRenderer }: PanelGridRendererProps) {\n  const { panels, columnCount, gap, baseSize, ghostPanelRef } = usePanelGridState();\n  const { setBaseSize } = usePanelGridControls();\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const rowCount = getGridRowCount(\n    panels.map(({ panelProps: p }) => ({\n      id: p.key,\n      x: p.positionData.x,\n      y: p.positionData.y,\n      w: p.positionData.w,\n      h: p.positionData.h,\n    }))\n  );\n  const count = Math.max(columnCount * (rowCount + 1), columnCount * columnCount);\n\n  useLayoutEffect(() => {\n    if (!containerRef.current) return;\n    const observer = new ResizeObserver((entries) => {\n      const [entry] = entries;\n      const rect = entry.contentRect;\n      const baseSize = Math.floor((rect.width - gap * (columnCount - 1)) / columnCount);\n      setBaseSize(baseSize);\n    });\n    observer.observe(containerRef.current);\n    return () => observer.disconnect();\n  }, [columnCount, gap, setBaseSize]);\n\n  return (\n    <div\n      className=\"panelgrid-renderer\"\n      style={{\n        \"--column-count\": `${columnCount}`,\n        \"--gap\": `${gap}px`,\n        opacity: baseSize ? 1 : 0,\n      }}\n      ref={containerRef}\n    >\n      {Array.from({ length: count }).map((_, i) => {\n        return <div key={i} className=\"panelgrid-panel-placeholder\" />;\n      })}\n\n      <div className=\"panelgrid-panel-ghost\" ref={ghostPanelRef}></div>\n\n      {panels.map((panel) => {\n        const { panelProps, resizeHandleProps } = panel;\n        const { key, lockSize, style, positionData, ref, onMouseDown } = panelProps;\n\n        const className = lockSize ? \"panelgrid-panel panelgrid-panel--size-locked\" : \"panelgrid-panel\";\n        const { x, y, w, h } = positionData;\n\n        return (\n          <div\n            key={key}\n            className={className}\n            style={style}\n            ref={ref}\n            onMouseDown={onMouseDown}\n            data-panel-id={key}\n            data-pg-x={x}\n            data-pg-y={y}\n            data-pg-w={w}\n            data-pg-h={h}\n          >\n            <ItemRenderer id={key} />\n            {resizeHandleProps && <span className=\"panelgrid-resize-handle\" {...resizeHandleProps}></span>}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AASA,SAAgB,kBAAkB,EAAE,cAAc,gBAAwC;CACxF,MAAM,EAAE,QAAQ,aAAa,KAAK,UAAU,kBAAkB,mBAAmB;CACjF,MAAM,EAAE,gBAAgB,sBAAsB;CAC9C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,WAAW,gBACf,OAAO,KAAK,EAAE,YAAY,SAAS;EACjC,IAAI,EAAE;EACN,GAAG,EAAE,aAAa;EAClB,GAAG,EAAE,aAAa;EAClB,GAAG,EAAE,aAAa;EAClB,GAAG,EAAE,aAAa;EACnB,EAAE,CACJ;CACD,MAAM,QAAQ,KAAK,IAAI,eAAe,WAAW,IAAI,cAAc,YAAY;AAE/E,uBAAsB;AACpB,MAAI,CAAC,aAAa,QAAS;EAC3B,MAAM,WAAW,IAAI,gBAAgB,YAAY;GAC/C,MAAM,CAAC,SAAS;GAChB,MAAM,OAAO,MAAM;AAEnB,eADiB,KAAK,OAAO,KAAK,QAAQ,OAAO,cAAc,MAAM,YAAY,CAC5D;IACrB;AACF,WAAS,QAAQ,aAAa,QAAQ;AACtC,eAAa,SAAS,YAAY;IACjC;EAAC;EAAa;EAAK;EAAY,CAAC;AAEnC,QACE,qBAAC;EACC,WAAU;EACV,OAAO;GACL,kBAAkB,GAAG;GACrB,SAAS,GAAG,IAAI;GAChB,SAAS,WAAW,IAAI;GACzB;EACD,KAAK;;GAEJ,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,MAAM;AAC3C,WAAO,oBAAC,SAAY,WAAU,iCAAb,EAA6C;KAC9D;GAEF,oBAAC;IAAI,WAAU;IAAwB,KAAK;KAAqB;GAEhE,OAAO,KAAK,UAAU;IACrB,MAAM,EAAE,YAAY,sBAAsB;IAC1C,MAAM,EAAE,KAAK,UAAU,OAAO,cAAc,KAAK,gBAAgB;IAEjE,MAAM,YAAY,WAAW,iDAAiD;IAC9E,MAAM,EAAE,GAAG,GAAG,GAAG,MAAM;AAEvB,WACE,qBAAC;KAEY;KACJ;KACF;KACQ;KACb,iBAAe;KACf,aAAW;KACX,aAAW;KACX,aAAW;KACX,aAAW;gBAEX,oBAAC,gBAAa,IAAI,MAAO,EACxB,qBAAqB,oBAAC;MAAK,WAAU;MAA0B,GAAI;OAA0B;OAZzF,IAaD;KAER;;GACE"}

package/dist/helpers/animation.cjs

@@ -0,0 +1,24 @@
+
+//#region src/helpers/animation.ts
+/**
+* Applies snap-back animation to element
+* Smoothly animates the element from its dropped position to the snapped grid position
+*/
+function applySnapAnimation(options) {
+	const { element, droppedLeft, droppedTop, nextLeft, nextTop, originalTransition } = options;
+	const deltaX = droppedLeft - nextLeft;
+	const deltaY = droppedTop - nextTop;
+	element.style.transform = `translate3D(${deltaX}px, ${deltaY}px, 0)`;
+	element.style.transition = "";
+	window.requestAnimationFrame(() => {
+		element.style.transform = "translate3D(0, 0, 0)";
+		element.style.transition = "transform 0.1s ease-out";
+	});
+	element.style.left = `${nextLeft}px`;
+	element.style.top = `${nextTop}px`;
+	element.style.transition = originalTransition;
+}
+
+//#endregion
+exports.applySnapAnimation = applySnapAnimation;
+//# sourceMappingURL=animation.cjs.map

package/dist/helpers/animation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.cjs","names":[],"sources":["../../src/helpers/animation.ts"],"sourcesContent":["/**\n * Options for applying snap-back animation\n */\ninterface ApplySnapAnimationOptions {\n  element: HTMLElement;\n  droppedLeft: number;\n  droppedTop: number;\n  nextLeft: number;\n  nextTop: number;\n  originalTransition: string;\n}\n\n/**\n * Applies snap-back animation to element\n * Smoothly animates the element from its dropped position to the snapped grid position\n */\nexport function applySnapAnimation(options: ApplySnapAnimationOptions): void {\n  const { element, droppedLeft, droppedTop, nextLeft, nextTop, originalTransition } = options;\n\n  const deltaX = droppedLeft - nextLeft;\n  const deltaY = droppedTop - nextTop;\n\n  element.style.transform = `translate3D(${deltaX}px, ${deltaY}px, 0)`;\n  element.style.transition = \"\";\n\n  window.requestAnimationFrame(() => {\n    element.style.transform = \"translate3D(0, 0, 0)\";\n    element.style.transition = \"transform 0.1s ease-out\";\n  });\n\n  element.style.left = `${nextLeft}px`;\n  element.style.top = `${nextTop}px`;\n  element.style.transition = originalTransition;\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,mBAAmB,SAA0C;CAC3E,MAAM,EAAE,SAAS,aAAa,YAAY,UAAU,SAAS,uBAAuB;CAEpF,MAAM,SAAS,cAAc;CAC7B,MAAM,SAAS,aAAa;AAE5B,SAAQ,MAAM,YAAY,eAAe,OAAO,MAAM,OAAO;AAC7D,SAAQ,MAAM,aAAa;AAE3B,QAAO,4BAA4B;AACjC,UAAQ,MAAM,YAAY;AAC1B,UAAQ,MAAM,aAAa;GAC3B;AAEF,SAAQ,MAAM,OAAO,GAAG,SAAS;AACjC,SAAQ,MAAM,MAAM,GAAG,QAAQ;AAC/B,SAAQ,MAAM,aAAa"}

package/dist/helpers/animation.mjs

@@ -0,0 +1,23 @@
+//#region src/helpers/animation.ts
+/**
+* Applies snap-back animation to element
+* Smoothly animates the element from its dropped position to the snapped grid position
+*/
+function applySnapAnimation(options) {
+	const { element, droppedLeft, droppedTop, nextLeft, nextTop, originalTransition } = options;
+	const deltaX = droppedLeft - nextLeft;
+	const deltaY = droppedTop - nextTop;
+	element.style.transform = `translate3D(${deltaX}px, ${deltaY}px, 0)`;
+	element.style.transition = "";
+	window.requestAnimationFrame(() => {
+		element.style.transform = "translate3D(0, 0, 0)";
+		element.style.transition = "transform 0.1s ease-out";
+	});
+	element.style.left = `${nextLeft}px`;
+	element.style.top = `${nextTop}px`;
+	element.style.transition = originalTransition;
+}
+
+//#endregion
+export { applySnapAnimation };
+//# sourceMappingURL=animation.mjs.map

package/dist/helpers/animation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.mjs","names":[],"sources":["../../src/helpers/animation.ts"],"sourcesContent":["/**\n * Options for applying snap-back animation\n */\ninterface ApplySnapAnimationOptions {\n  element: HTMLElement;\n  droppedLeft: number;\n  droppedTop: number;\n  nextLeft: number;\n  nextTop: number;\n  originalTransition: string;\n}\n\n/**\n * Applies snap-back animation to element\n * Smoothly animates the element from its dropped position to the snapped grid position\n */\nexport function applySnapAnimation(options: ApplySnapAnimationOptions): void {\n  const { element, droppedLeft, droppedTop, nextLeft, nextTop, originalTransition } = options;\n\n  const deltaX = droppedLeft - nextLeft;\n  const deltaY = droppedTop - nextTop;\n\n  element.style.transform = `translate3D(${deltaX}px, ${deltaY}px, 0)`;\n  element.style.transition = \"\";\n\n  window.requestAnimationFrame(() => {\n    element.style.transform = \"translate3D(0, 0, 0)\";\n    element.style.transition = \"transform 0.1s ease-out\";\n  });\n\n  element.style.left = `${nextLeft}px`;\n  element.style.top = `${nextTop}px`;\n  element.style.transition = originalTransition;\n}\n"],"mappings":";;;;;AAgBA,SAAgB,mBAAmB,SAA0C;CAC3E,MAAM,EAAE,SAAS,aAAa,YAAY,UAAU,SAAS,uBAAuB;CAEpF,MAAM,SAAS,cAAc;CAC7B,MAAM,SAAS,aAAa;AAE5B,SAAQ,MAAM,YAAY,eAAe,OAAO,MAAM,OAAO;AAC7D,SAAQ,MAAM,aAAa;AAE3B,QAAO,4BAA4B;AACjC,UAAQ,MAAM,YAAY;AAC1B,UAAQ,MAAM,aAAa;GAC3B;AAEF,SAAQ,MAAM,OAAO,GAAG,SAAS;AACjC,SAAQ,MAAM,MAAM,GAAG,QAAQ;AAC/B,SAAQ,MAAM,aAAa"}

package/dist/helpers/gridCalculations.cjs

@@ -0,0 +1,76 @@
+
+//#region src/helpers/gridCalculations.ts
+/**
+* Converts a pixel value to grid units by dividing by the cell size (baseSize + gap)
+* and rounding up with Math.ceil. Ensures the result is at least 1 and does not exceed available space.
+* When columnCount and xPosition are provided, ensures x + width <= columnCount.
+*
+* ピクセル値をグリッド単位に変換します。セルサイズ (baseSize + gap) で割り、小数点は切り上げて整数にします。
+* 結果は最小1で、columnCountとxPositionが指定された場合はx + width <= columnCountを満たすように制限されます。
+*/
+function pixelsToGridSize(pixels, baseSize, gap, columnCount, xPosition) {
+	const gridSize = Math.ceil(pixels / (baseSize + gap));
+	const constrainedSize = Math.max(1, gridSize);
+	if (columnCount !== void 0 && xPosition !== void 0) {
+		const maxWidth = Math.max(1, columnCount - xPosition);
+		return Math.min(constrainedSize, maxWidth);
+	}
+	if (columnCount !== void 0) return Math.min(constrainedSize, columnCount);
+	return constrainedSize;
+}
+/**
+* Converts a pixel coordinate to grid coordinate by dividing by the cell size
+* and rounding down with Math.floor, ensuring the result is not negative and does not cause overflow.
+* When columnCount and width are provided, ensures x + width <= columnCount
+*
+* ピクセル座標をグリッド座標に変換します。セルサイズで割り、小数点は切り捨てて整数にします。
+* 結果が負にならず、columnCountとwidthが指定された場合はx + width <= columnCountを満たすようにします。
+*/
+function pixelsToGridPosition(pixels, baseSize, gap, columnCount, width) {
+	const gridPosition = Math.max(0, Math.floor(pixels / (baseSize + gap)));
+	if (columnCount !== void 0 && width !== void 0) {
+		const maxPosition = Math.max(0, columnCount - width);
+		return Math.min(gridPosition, maxPosition);
+	}
+	if (columnCount !== void 0) return Math.min(gridPosition, columnCount - 1);
+	return gridPosition;
+}
+/**
+* Converts grid units to pixels
+* Formula: gridUnits * baseSize + max(0, gridUnits - 1) * gap
+* This accounts for gaps between grid cells but not after the last cell
+*
+* グリッド単位をピクセルに変換します。
+* 計算式: gridUnits * baseSize + max(0, gridUnits - 1) * gap
+* グリッドセル間の gap を考慮しますが、最後のセルの後には gap を含めません。
+*/
+function gridToPixels(gridUnits, baseSize, gap) {
+	return gridUnits * baseSize + Math.max(0, gridUnits - 1) * gap;
+}
+/**
+* Converts grid coordinate to pixel coordinate for positioning
+* Formula: max(0, gridCoord * (baseSize + gap))
+* This includes the gap after each cell for proper positioning in the grid
+*
+* グリッド座標をピクセル座標に変換します（位置計算用）。
+* 計算式: max(0, gridCoord * (baseSize + gap))
+* 各セルの後に gap を含めて、グリッド内での適切な位置決めを行います。
+*/
+function gridPositionToPixels(gridCoord, baseSize, gap) {
+	return Math.max(0, gridCoord * (baseSize + gap));
+}
+/**
+* Gets the maximum Y coordinate of the panels
+* パネルの最大Y座標を取得します。
+*/
+function getGridRowCount(panels) {
+	return Math.max(...panels.map((p) => p.y + p.h));
+}
+
+//#endregion
+exports.getGridRowCount = getGridRowCount;
+exports.gridPositionToPixels = gridPositionToPixels;
+exports.gridToPixels = gridToPixels;
+exports.pixelsToGridPosition = pixelsToGridPosition;
+exports.pixelsToGridSize = pixelsToGridSize;
+//# sourceMappingURL=gridCalculations.cjs.map

package/dist/helpers/gridCalculations.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridCalculations.cjs","names":[],"sources":["../../src/helpers/gridCalculations.ts"],"sourcesContent":["import type { PanelCoordinate } from \"../types\";\n\n/**\n * Converts a pixel value to grid units by dividing by the cell size (baseSize + gap)\n * and rounding up with Math.ceil. Ensures the result is at least 1 and does not exceed available space.\n * When columnCount and xPosition are provided, ensures x + width <= columnCount.\n *\n * ピクセル値をグリッド単位に変換します。セルサイズ (baseSize + gap) で割り、小数点は切り上げて整数にします。\n * 結果は最小1で、columnCountとxPositionが指定された場合はx + width <= columnCountを満たすように制限されます。\n */\nexport function pixelsToGridSize(\n  pixels: number,\n  baseSize: number,\n  gap: number,\n  columnCount?: number,\n  xPosition?: number\n): number {\n  const gridSize = Math.ceil(pixels / (baseSize + gap));\n  const constrainedSize = Math.max(1, gridSize);\n\n  if (columnCount !== undefined && xPosition !== undefined) {\n    // Ensure x + width <= columnCount\n    const maxWidth = Math.max(1, columnCount - xPosition);\n    return Math.min(constrainedSize, maxWidth);\n  }\n\n  if (columnCount !== undefined) {\n    // Legacy behavior: constrain to columnCount\n    return Math.min(constrainedSize, columnCount);\n  }\n\n  return constrainedSize;\n}\n\n/**\n * Converts a pixel coordinate to grid coordinate by dividing by the cell size\n * and rounding down with Math.floor, ensuring the result is not negative and does not cause overflow.\n * When columnCount and width are provided, ensures x + width <= columnCount\n *\n * ピクセル座標をグリッド座標に変換します。セルサイズで割り、小数点は切り捨てて整数にします。\n * 結果が負にならず、columnCountとwidthが指定された場合はx + width <= columnCountを満たすようにします。\n */\nexport function pixelsToGridPosition(\n  pixels: number,\n  baseSize: number,\n  gap: number,\n  columnCount?: number,\n  width?: number\n): number {\n  const gridPosition = Math.max(0, Math.floor(pixels / (baseSize + gap)));\n\n  if (columnCount !== undefined && width !== undefined) {\n    // Ensure x + width <= columnCount\n    const maxPosition = Math.max(0, columnCount - width);\n    return Math.min(gridPosition, maxPosition);\n  }\n\n  if (columnCount !== undefined) {\n    // Legacy behavior: constrain to columnCount - 1\n    return Math.min(gridPosition, columnCount - 1);\n  }\n\n  return gridPosition;\n}\n\n/**\n * Converts grid units to pixels\n * Formula: gridUnits * baseSize + max(0, gridUnits - 1) * gap\n * This accounts for gaps between grid cells but not after the last cell\n *\n * グリッド単位をピクセルに変換します。\n * 計算式: gridUnits * baseSize + max(0, gridUnits - 1) * gap\n * グリッドセル間の gap を考慮しますが、最後のセルの後には gap を含めません。\n */\nexport function gridToPixels(gridUnits: number, baseSize: number, gap: number): number {\n  return gridUnits * baseSize + Math.max(0, gridUnits - 1) * gap;\n}\n\n/**\n * Converts grid coordinate to pixel coordinate for positioning\n * Formula: max(0, gridCoord * (baseSize + gap))\n * This includes the gap after each cell for proper positioning in the grid\n *\n * グリッド座標をピクセル座標に変換します（位置計算用）。\n * 計算式: max(0, gridCoord * (baseSize + gap))\n * 各セルの後に gap を含めて、グリッド内での適切な位置決めを行います。\n */\nexport function gridPositionToPixels(gridCoord: number, baseSize: number, gap: number): number {\n  return Math.max(0, gridCoord * (baseSize + gap));\n}\n\n/**\n * Snaps a pixel value to the nearest grid position\n * Useful for aligning elements to the grid after drag/resize operations\n *\n * ピクセル値を最も近いグリッド位置にスナップします。\n * ドラッグ・リサイズ操作後に要素をグリッドに整列させる際に利用する。\n */\nexport function snapToGrid(pixels: number, baseSize: number, gap: number): number {\n  const gridPosition = pixelsToGridPosition(pixels, baseSize, gap);\n  return gridPositionToPixels(gridPosition, baseSize, gap);\n}\n\n/**\n * Gets the maximum Y coordinate of the panels\n * パネルの最大Y座標を取得します。\n */\nexport function getGridRowCount(panels: PanelCoordinate[]): number {\n  return Math.max(...panels.map((p) => p.y + p.h));\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,iBACd,QACA,UACA,KACA,aACA,WACQ;CACR,MAAM,WAAW,KAAK,KAAK,UAAU,WAAW,KAAK;CACrD,MAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAE7C,KAAI,gBAAgB,UAAa,cAAc,QAAW;EAExD,MAAM,WAAW,KAAK,IAAI,GAAG,cAAc,UAAU;AACrD,SAAO,KAAK,IAAI,iBAAiB,SAAS;;AAG5C,KAAI,gBAAgB,OAElB,QAAO,KAAK,IAAI,iBAAiB,YAAY;AAG/C,QAAO;;;;;;;;;;AAWT,SAAgB,qBACd,QACA,UACA,KACA,aACA,OACQ;CACR,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,UAAU,WAAW,KAAK,CAAC;AAEvE,KAAI,gBAAgB,UAAa,UAAU,QAAW;EAEpD,MAAM,cAAc,KAAK,IAAI,GAAG,cAAc,MAAM;AACpD,SAAO,KAAK,IAAI,cAAc,YAAY;;AAG5C,KAAI,gBAAgB,OAElB,QAAO,KAAK,IAAI,cAAc,cAAc,EAAE;AAGhD,QAAO;;;;;;;;;;;AAYT,SAAgB,aAAa,WAAmB,UAAkB,KAAqB;AACrF,QAAO,YAAY,WAAW,KAAK,IAAI,GAAG,YAAY,EAAE,GAAG;;;;;;;;;;;AAY7D,SAAgB,qBAAqB,WAAmB,UAAkB,KAAqB;AAC7F,QAAO,KAAK,IAAI,GAAG,aAAa,WAAW,KAAK;;;;;;AAmBlD,SAAgB,gBAAgB,QAAmC;AACjE,QAAO,KAAK,IAAI,GAAG,OAAO,KAAK,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC"}

package/dist/helpers/gridCalculations.mjs

@@ -0,0 +1,71 @@
+//#region src/helpers/gridCalculations.ts
+/**
+* Converts a pixel value to grid units by dividing by the cell size (baseSize + gap)
+* and rounding up with Math.ceil. Ensures the result is at least 1 and does not exceed available space.
+* When columnCount and xPosition are provided, ensures x + width <= columnCount.
+*
+* ピクセル値をグリッド単位に変換します。セルサイズ (baseSize + gap) で割り、小数点は切り上げて整数にします。
+* 結果は最小1で、columnCountとxPositionが指定された場合はx + width <= columnCountを満たすように制限されます。
+*/
+function pixelsToGridSize(pixels, baseSize, gap, columnCount, xPosition) {
+	const gridSize = Math.ceil(pixels / (baseSize + gap));
+	const constrainedSize = Math.max(1, gridSize);
+	if (columnCount !== void 0 && xPosition !== void 0) {
+		const maxWidth = Math.max(1, columnCount - xPosition);
+		return Math.min(constrainedSize, maxWidth);
+	}
+	if (columnCount !== void 0) return Math.min(constrainedSize, columnCount);
+	return constrainedSize;
+}
+/**
+* Converts a pixel coordinate to grid coordinate by dividing by the cell size
+* and rounding down with Math.floor, ensuring the result is not negative and does not cause overflow.
+* When columnCount and width are provided, ensures x + width <= columnCount
+*
+* ピクセル座標をグリッド座標に変換します。セルサイズで割り、小数点は切り捨てて整数にします。
+* 結果が負にならず、columnCountとwidthが指定された場合はx + width <= columnCountを満たすようにします。
+*/
+function pixelsToGridPosition(pixels, baseSize, gap, columnCount, width) {
+	const gridPosition = Math.max(0, Math.floor(pixels / (baseSize + gap)));
+	if (columnCount !== void 0 && width !== void 0) {
+		const maxPosition = Math.max(0, columnCount - width);
+		return Math.min(gridPosition, maxPosition);
+	}
+	if (columnCount !== void 0) return Math.min(gridPosition, columnCount - 1);
+	return gridPosition;
+}
+/**
+* Converts grid units to pixels
+* Formula: gridUnits * baseSize + max(0, gridUnits - 1) * gap
+* This accounts for gaps between grid cells but not after the last cell
+*
+* グリッド単位をピクセルに変換します。
+* 計算式: gridUnits * baseSize + max(0, gridUnits - 1) * gap
+* グリッドセル間の gap を考慮しますが、最後のセルの後には gap を含めません。
+*/
+function gridToPixels(gridUnits, baseSize, gap) {
+	return gridUnits * baseSize + Math.max(0, gridUnits - 1) * gap;
+}
+/**
+* Converts grid coordinate to pixel coordinate for positioning
+* Formula: max(0, gridCoord * (baseSize + gap))
+* This includes the gap after each cell for proper positioning in the grid
+*
+* グリッド座標をピクセル座標に変換します（位置計算用）。
+* 計算式: max(0, gridCoord * (baseSize + gap))
+* 各セルの後に gap を含めて、グリッド内での適切な位置決めを行います。
+*/
+function gridPositionToPixels(gridCoord, baseSize, gap) {
+	return Math.max(0, gridCoord * (baseSize + gap));
+}
+/**
+* Gets the maximum Y coordinate of the panels
+* パネルの最大Y座標を取得します。
+*/
+function getGridRowCount(panels) {
+	return Math.max(...panels.map((p) => p.y + p.h));
+}
+
+//#endregion
+export { getGridRowCount, gridPositionToPixels, gridToPixels, pixelsToGridPosition, pixelsToGridSize };
+//# sourceMappingURL=gridCalculations.mjs.map