@shiguri/solid-grid 0.0.1

package/README.md

@@ -0,0 +1,42 @@
+# solid-grid
+
+Headless spreadsheet-like grid for SolidJS. Works with a 2D array (`T[][]`) and gives you full control over rendering and styling.
+
+## Install
+
+```bash
+npm install @shiguri/solid-grid
+```
+
+## Quick Start
+
+```tsx
+import { Gridsheet } from "@shiguri/solid-grid";
+import { createSignal } from "solid-js";
+
+const [data, setData] = createSignal([
+  ["A1", "B1"],
+  ["A2", "B2"],
+]);
+
+<Gridsheet
+  data={data()}
+  onDataChange={setData}
+  renderCell={(ctx) =>
+    ctx.isEditing ? (
+      <input
+        value={ctx.value}
+        onKeyDown={(e) =>
+          e.key === "Enter" && ctx.commitEdit(e.currentTarget.value)
+        }
+      />
+    ) : (
+      <span>{ctx.value}</span>
+    )
+  }
+/>;
+```
+
+## More Info
+
+See full docs in the root repository `docs/`.

package/dist/index.d.ts

@@ -0,0 +1,73 @@
+import { JSX } from "solid-js/jsx-runtime";
+
+//#region src/index.d.ts
+interface CellPosition {
+  row: number;
+  col: number;
+}
+interface CellRange {
+  min: CellPosition;
+  max: CellPosition;
+}
+interface CellRenderContext<T> {
+  /** Row index */
+  row: number;
+  /** Column index */
+  col: number;
+  /** Cell value */
+  value: T;
+  /** Is this the active cell (focused) */
+  isActive: boolean;
+  /** Is this cell currently selected */
+  isSelected: boolean;
+  /** Is this cell currently being edited */
+  isEditing: boolean;
+  /** Solid ref for scrolling, focusing, measuring, etc. */
+  cellRef: HTMLTableCellElement | undefined;
+  /** Enter editing mode for this cell */
+  beginEdit: () => void;
+  /** Commit edit with new value */
+  commitEdit: (value: T) => void;
+  /** Exit editing mode for this cell */
+  cancelEditing: () => void;
+}
+interface GridsheetProps<T> {
+  /** 2D matrix of values */
+  data: T[][];
+  onDataChange?: (next: T[][]) => void;
+  /** Renderer for each cell */
+  renderCell: (ctx: CellRenderContext<T>) => JSX.Element;
+  /** Currently focused cell */
+  activeCell?: CellPosition | null;
+  onActiveCellChange?: (pos: CellPosition | null) => void;
+  /** Current selection range */
+  selection?: CellRange | null;
+  onSelectionChange?: (range: CellRange | null) => void;
+  /** Is the active cell in editing mode */
+  isEditing?: boolean;
+  onIsEditingChange?: (isEditing: boolean) => void;
+  ref?: HTMLTableElement | ((el: HTMLTableElement) => void) | undefined;
+  class?: string;
+  style?: JSX.CSSProperties | string;
+  classes?: {
+    cell?: string | ((ctx: CellRenderContext<T>) => string);
+    row?: string | ((ctx: {
+      rowIndex: number;
+    }) => string);
+    rowHeader?: string | ((ctx: {
+      rowIndex: number;
+      isSelected: boolean;
+    }) => string);
+    colHeader?: string | ((ctx: {
+      colIndex: number;
+      isSelected: boolean;
+    }) => string);
+    corner?: string;
+    header?: string;
+    body?: string;
+  };
+}
+declare function Gridsheet<T>(props: GridsheetProps<T>): JSX.Element;
+//#endregion
+export { CellPosition, CellRange, CellRenderContext, Gridsheet, GridsheetProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.tsx"],"sourcesContent":[],"mappings":";;;UAYiB,YAAA;;EAAA,GAAA,EAAA,MAAA;AAKjB;AA2BiB,UA3BA,SAAA,CA2BiB;EAQzB,GAAA,EAlCF,YAkCE;EAYE,GAAA,EA7CJ,YA6CI;;AAMY,UA1BN,iBA0BM,CAAA,CAAA,CAAA,CAAA;EAMN;EAET,GAAA,EAAA,MAAA;EACgB;EAGc,GAAA,EAAA,MAAA;EAAlB;EAAyB,KAAI,EA9BxC,CA8BwC;EAGlC;EACc,QAAA,EAAA,OAAA;EAGf;EACgB,UAAA,EAAA,OAAA;EAMtB;EAAyB,SAAA,EAAA,OAAA;EAEvB;EAEmC,OAAA,EApClC,oBAoCkC,GAAA,SAAA;EAAlB;EAAiB,SAAA,EAAA,GAAA,GAAA,IAAA;EAiB5B;EAAmC,UAAA,EAAA,CAAA,KAAA,EA/C7B,CA+C6B,EAAA,GAAA,IAAA;EAAf;EAAoB,aAAI,EAAA,GAAA,GAAA,IAAA;;UAzC3C;;QAET;wBACgB;;oBAGJ,kBAAkB,OAAO,GAAA,CAAI;;eAGlC;6BACc;;cAGf;8BACgB;;;;QAMtB,yBAAyB;;UAEvB,GAAA,CAAI;;2BAEa,kBAAkB;;;;;;;;;;;;;;;;;iBAiB7B,oBAAoB,eAAe,KAAK,GAAA,CAAI"}

package/dist/index.js

@@ -0,0 +1,554 @@
+import { className, createComponent, delegateEvents, effect, insert, setAttribute, style, template, use } from "solid-js/web";
+import { For, Index, batch, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+
+//#region src/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<table data-slot=gridsheet tabindex=-1><thead data-slot=gridsheet-header><tr data-slot=gridsheet-row><th data-slot=gridsheet-corner></th></tr></thead><tbody data-slot=gridsheet-body>`), _tmpl$2 = /* @__PURE__ */ template(`<tr data-slot=gridsheet-row>`), _tmpl$3 = /* @__PURE__ */ template(`<th data-slot=gridsheet-rowheader>`), _tmpl$4 = /* @__PURE__ */ template(`<th data-slot=gridsheet-colheader>`), _tmpl$5 = /* @__PURE__ */ template(`<td data-slot=gridsheet-cell tabindex=-1>`);
+function isPositionInRange(pos, range) {
+	return pos.row >= range.min.row && pos.row <= range.max.row && pos.col >= range.min.col && pos.col <= range.max.col;
+}
+function normalizeRange(pos1, pos2) {
+	return {
+		min: {
+			row: Math.min(pos1.row, pos2.row),
+			col: Math.min(pos1.col, pos2.col)
+		},
+		max: {
+			row: Math.max(pos1.row, pos2.row),
+			col: Math.max(pos1.col, pos2.col)
+		}
+	};
+}
+const DEFAULT_SELECTION_MODE = "cell";
+function Gridsheet(props) {
+	const numRows = createMemo(() => props.data.length);
+	const numCols = createMemo(() => props.data[0] ? props.data[0].length : 0);
+	const [innerActiveCell, setInnerActiveCell] = createSignal(null);
+	const activeCell = createMemo(() => props.activeCell === void 0 ? innerActiveCell() : props.activeCell);
+	const setActiveCell = (pos) => {
+		setInnerActiveCell(pos);
+		if (props.onActiveCellChange) props.onActiveCellChange(pos);
+	};
+	const isCellActive = (pos) => {
+		const ac = activeCell();
+		return ac !== null && ac.row === pos.row && ac.col === pos.col;
+	};
+	const [innerSelection, setInnerSelection] = createSignal(null);
+	const selection = createMemo(() => props.selection === void 0 ? innerSelection() : props.selection);
+	const setSelection = (range) => {
+		const normalizedRange = range ? normalizeRange(range.min, range.max) : null;
+		setInnerSelection(normalizedRange);
+		if (props.onSelectionChange) props.onSelectionChange(normalizedRange);
+	};
+	const isCellSelected = (pos) => {
+		const sel = selection();
+		return sel !== null && isPositionInRange(pos, sel);
+	};
+	const isRowHeaderSelected = (rowIndex) => {
+		const sel = selection();
+		return sel !== null && rowIndex >= sel.min.row && rowIndex <= sel.max.row;
+	};
+	const isColHeaderSelected = (colIndex) => {
+		const sel = selection();
+		return sel !== null && colIndex >= sel.min.col && colIndex <= sel.max.col;
+	};
+	const [innerIsEditing, setInnerIsEditing] = createSignal(false);
+	const isEditing = createMemo(() => props.isEditing === void 0 ? innerIsEditing() : props.isEditing);
+	const setIsEditing = (editing) => {
+		setInnerIsEditing(editing);
+		if (props.onIsEditingChange) props.onIsEditingChange(editing);
+	};
+	const isCellEditing = (pos) => {
+		return isEditing() && isCellActive(pos);
+	};
+	const beginCellEdit = (pos) => {
+		batch(() => {
+			setIsEditing(true);
+			setActiveCell(pos);
+			setSelection(normalizeRange(pos, pos));
+		});
+	};
+	const commitCellEdit = (pos, value) => {
+		const nextData = props.data.map((row) => row.slice());
+		const targetRow = nextData[pos.row];
+		if (targetRow && pos.col >= 0 && pos.col < targetRow.length) {
+			targetRow[pos.col] = value;
+			if (props.onDataChange) props.onDataChange(nextData);
+		}
+		setIsEditing(false);
+	};
+	const cancelCellEdit = () => {
+		setIsEditing(false);
+	};
+	const [isMouseDown, setIsMouseDown] = createSignal(false);
+	const [selectionMode, setSelectionMode] = createSignal(DEFAULT_SELECTION_MODE);
+	const [selectionAnchor, setSelectionAnchor] = createSignal(null);
+	let previousBodyUserSelect = null;
+	const disableTextSelectionDuringDrag = () => {
+		if (typeof document === "undefined" || previousBodyUserSelect !== null) return;
+		const body = document.body;
+		if (!body) return;
+		previousBodyUserSelect = body.style.userSelect;
+		body.style.userSelect = "none";
+	};
+	const restoreTextSelectionAfterDrag = () => {
+		if (typeof document === "undefined" || previousBodyUserSelect === null) return;
+		const body = document.body;
+		if (body) body.style.userSelect = previousBodyUserSelect;
+		previousBodyUserSelect = null;
+	};
+	const handleMouseUp = () => {
+		setIsMouseDown(false);
+		setSelectionMode(DEFAULT_SELECTION_MODE);
+		setSelectionAnchor(null);
+		restoreTextSelectionAfterDrag();
+	};
+	onMount(() => {
+		window.addEventListener("mouseup", handleMouseUp);
+	});
+	onCleanup(() => {
+		window.removeEventListener("mouseup", handleMouseUp);
+		restoreTextSelectionAfterDrag();
+	});
+	const handleMouseDownOnCell = (pos, e) => {
+		if (e.button !== 0) return;
+		if (isCellEditing(pos)) return;
+		if (e.detail === 2) {
+			e.preventDefault();
+			beginCellEdit(pos);
+			return;
+		}
+		e.preventDefault();
+		batch(() => {
+			disableTextSelectionDuringDrag();
+			setIsMouseDown(true);
+			setSelectionMode("cell");
+			setSelectionAnchor(pos);
+			setIsEditing(false);
+			setSelection(normalizeRange(pos, pos));
+			setActiveCell(pos);
+		});
+	};
+	const handleMouseOverOnCell = (pos, e) => {
+		if ((e.buttons & 1) === 0) return;
+		batch(() => {
+			if (!isMouseDown() || selectionMode() !== "cell") return;
+			const start = selectionAnchor();
+			if (start) setSelection(normalizeRange(start, pos));
+			else console.warn("selectionAnchor is null during mouse drag selection");
+		});
+	};
+	const handleMouseDownOnRowHeader = (rowIndex) => {
+		if (numCols() === 0) return;
+		batch(() => {
+			disableTextSelectionDuringDrag();
+			setIsMouseDown(true);
+			setSelectionMode("row");
+			const start = {
+				row: rowIndex,
+				col: 0
+			};
+			const end = {
+				row: rowIndex,
+				col: numCols() - 1
+			};
+			setSelectionAnchor(start);
+			setIsEditing(false);
+			setSelection(normalizeRange(start, end));
+			setActiveCell(start);
+		});
+	};
+	const handleMouseOverOnRowHeader = (rowIndex) => {
+		batch(() => {
+			if (!isMouseDown() || selectionMode() !== "row") return;
+			const start = selectionAnchor();
+			if (start) setSelection(normalizeRange(start, {
+				row: rowIndex,
+				col: numCols() - 1
+			}));
+			else console.warn("selectionAnchor is null during mouse drag selection");
+		});
+	};
+	const handleMouseDownOnColHeader = (colIndex) => {
+		if (numRows() === 0) return;
+		batch(() => {
+			disableTextSelectionDuringDrag();
+			setIsMouseDown(true);
+			setSelectionMode("col");
+			const start = {
+				row: 0,
+				col: colIndex
+			};
+			const end = {
+				row: numRows() - 1,
+				col: colIndex
+			};
+			setSelectionAnchor(start);
+			setIsEditing(false);
+			setSelection(normalizeRange(start, end));
+			setActiveCell(start);
+		});
+	};
+	const handleMouseOverOnColHeader = (colIndex) => {
+		batch(() => {
+			if (!isMouseDown() || selectionMode() !== "col") return;
+			const start = selectionAnchor();
+			if (start) setSelection(normalizeRange(start, {
+				row: numRows() - 1,
+				col: colIndex
+			}));
+			else console.warn("selectionAnchor is null during mouse drag selection");
+		});
+	};
+	const handleClickOnCorner = () => {
+		if (numCols() === 0 || numRows() === 0) return;
+		batch(() => {
+			setIsEditing(false);
+			setSelection(normalizeRange({
+				row: 0,
+				col: 0
+			}, {
+				row: numRows() - 1,
+				col: numCols() - 1
+			}));
+			setActiveCell({
+				row: 0,
+				col: 0
+			});
+		});
+	};
+	const navigate = (deltaRow, deltaCol, isSelection) => {
+		const ac = activeCell();
+		if (!ac) return;
+		if (isSelection) {
+			let anchor = selectionAnchor();
+			if (!anchor) {
+				anchor = ac;
+				setSelectionAnchor(anchor);
+			}
+			const sel = selection();
+			let headRow = anchor.row;
+			let headCol = anchor.col;
+			if (sel) {
+				headRow = sel.min.row === anchor.row ? sel.max.row : sel.min.row;
+				headCol = sel.min.col === anchor.col ? sel.max.col : sel.min.col;
+			}
+			const nextHeadRow = Math.max(0, Math.min(numRows() - 1, headRow + deltaRow));
+			const nextHeadCol = Math.max(0, Math.min(numCols() - 1, headCol + deltaCol));
+			setSelection(normalizeRange(anchor, {
+				row: nextHeadRow,
+				col: nextHeadCol
+			}));
+		} else {
+			const nextPos = {
+				row: Math.max(0, Math.min(numRows() - 1, ac.row + deltaRow)),
+				col: Math.max(0, Math.min(numCols() - 1, ac.col + deltaCol))
+			};
+			setActiveCell(nextPos);
+			setSelection(normalizeRange(nextPos, nextPos));
+			setSelectionAnchor(null);
+		}
+	};
+	const handleKeyDown = (e) => {
+		if (e.isComposing) return;
+		if (isEditing()) return;
+		const ac = activeCell();
+		if (!ac) return;
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault();
+				navigate(-1, 0, e.shiftKey);
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				navigate(1, 0, e.shiftKey);
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				navigate(0, -1, e.shiftKey);
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				navigate(0, 1, e.shiftKey);
+				break;
+			case "Tab":
+				e.preventDefault();
+				navigate(0, e.shiftKey ? -1 : 1, false);
+				break;
+			case "Enter":
+				e.preventDefault();
+				beginCellEdit(ac);
+				break;
+			default: break;
+		}
+	};
+	const cellRefs = /* @__PURE__ */ new Map();
+	const getCellKey = (pos) => `${pos.row}:${pos.col}`;
+	createEffect(() => {
+		if (isEditing()) return;
+		const ac = activeCell();
+		if (ac) cellRefs.get(getCellKey(ac))?.focus();
+	});
+	return (() => {
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$2.nextSibling;
+		var _ref$ = props.ref;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
+		_el$.$$keydown = handleKeyDown;
+		_el$4.$$click = handleClickOnCorner;
+		insert(_el$3, createComponent(Index, {
+			get each() {
+				return Array.from({ length: numCols() });
+			},
+			children: (_, colIndex) => createComponent(ColHeader, {
+				index: colIndex,
+				get isSelected() {
+					return isColHeaderSelected(colIndex);
+				},
+				onMouseDown: handleMouseDownOnColHeader,
+				onMouseOver: handleMouseOverOnColHeader,
+				get ["class"]() {
+					return props.classes?.colHeader;
+				}
+			})
+		}), null);
+		insert(_el$5, createComponent(For, {
+			get each() {
+				return props.data;
+			},
+			children: (row, rowIndex) => (() => {
+				var _el$6 = _tmpl$2();
+				insert(_el$6, createComponent(RowHeader, {
+					get index() {
+						return rowIndex();
+					},
+					get isSelected() {
+						return isRowHeaderSelected(rowIndex());
+					},
+					onMouseDown: handleMouseDownOnRowHeader,
+					onMouseOver: handleMouseOverOnRowHeader,
+					get ["class"]() {
+						return props.classes?.rowHeader;
+					}
+				}), null);
+				insert(_el$6, createComponent(For, {
+					each: row,
+					children: (cell, colIndex) => createComponent(Cell, {
+						get row() {
+							return rowIndex();
+						},
+						get col() {
+							return colIndex();
+						},
+						value: cell,
+						get isActive() {
+							return isCellActive({
+								row: rowIndex(),
+								col: colIndex()
+							});
+						},
+						get isEditing() {
+							return isCellEditing({
+								row: rowIndex(),
+								col: colIndex()
+							});
+						},
+						get isSelected() {
+							return isCellSelected({
+								row: rowIndex(),
+								col: colIndex()
+							});
+						},
+						beginEdit: beginCellEdit,
+						commitEdit: commitCellEdit,
+						cancelEditing: cancelCellEdit,
+						setActiveCell,
+						setSelection,
+						get renderCell() {
+							return props.renderCell;
+						},
+						onMouseDown: handleMouseDownOnCell,
+						onMouseOver: handleMouseOverOnCell,
+						registerCellRef: (rowPos, colPos, el) => {
+							cellRefs.set(getCellKey({
+								row: rowPos,
+								col: colPos
+							}), el);
+						},
+						get ["class"]() {
+							return props.classes?.cell;
+						}
+					})
+				}), null);
+				effect(() => className(_el$6, typeof props.classes?.row === "function" ? props.classes?.row({ rowIndex: rowIndex() }) : props.classes?.row));
+				return _el$6;
+			})()
+		}));
+		effect((_p$) => {
+			var _v$ = props.class, _v$2 = props.style, _v$3 = props.classes?.header, _v$4 = props.classes?.corner, _v$5 = props.classes?.body;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_p$.t = style(_el$, _v$2, _p$.t);
+			_v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+			_v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+}
+function getRowLabel(rowIndex) {
+	return `${rowIndex + 1}`;
+}
+function RowHeader(props) {
+	return (() => {
+		var _el$7 = _tmpl$3();
+		_el$7.$$mouseover = () => props.onMouseOver(props.index);
+		_el$7.$$mousedown = () => props.onMouseDown(props.index);
+		insert(_el$7, () => getRowLabel(props.index));
+		effect((_p$) => {
+			var _v$6 = typeof props.class === "function" ? props.class({
+				rowIndex: props.index,
+				isSelected: props.isSelected
+			}) : props.class, _v$7 = props.isSelected || void 0;
+			_v$6 !== _p$.e && className(_el$7, _p$.e = _v$6);
+			_v$7 !== _p$.t && setAttribute(_el$7, "data-selected", _p$.t = _v$7);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$7;
+	})();
+}
+const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+function getColLabel(colIndex) {
+	let label = "";
+	let n = colIndex + 1;
+	while (n > 0) {
+		label = ALPHABET[(n - 1) % 26] + label;
+		n = Math.floor((n - 1) / 26);
+	}
+	return label;
+}
+function ColHeader(props) {
+	return (() => {
+		var _el$8 = _tmpl$4();
+		_el$8.$$mouseover = () => props.onMouseOver(props.index);
+		_el$8.$$mousedown = () => props.onMouseDown(props.index);
+		insert(_el$8, () => getColLabel(props.index));
+		effect((_p$) => {
+			var _v$8 = typeof props.class === "function" ? props.class({
+				colIndex: props.index,
+				isSelected: props.isSelected
+			}) : props.class, _v$9 = props.isSelected || void 0;
+			_v$8 !== _p$.e && className(_el$8, _p$.e = _v$8);
+			_v$9 !== _p$.t && setAttribute(_el$8, "data-selected", _p$.t = _v$9);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$8;
+	})();
+}
+function Cell(props) {
+	let cellRef;
+	const beginEdit = () => props.beginEdit({
+		row: props.row,
+		col: props.col
+	});
+	const commitEdit = (value) => {
+		props.commitEdit({
+			row: props.row,
+			col: props.col
+		}, value);
+	};
+	const cancelEditing = () => props.cancelEditing();
+	const handleMouseDown = (e) => {
+		props.onMouseDown({
+			row: props.row,
+			col: props.col
+		}, e);
+	};
+	const handleMouseOver = (e) => {
+		props.onMouseOver({
+			row: props.row,
+			col: props.col
+		}, e);
+	};
+	const handleDoubleClick = (e) => {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		if (!props.isEditing) beginEdit();
+	};
+	const className$1 = createMemo(() => {
+		if (typeof props.class === "function") return props.class({
+			row: props.row,
+			col: props.col,
+			value: props.value,
+			isSelected: props.isSelected,
+			isActive: props.isActive,
+			isEditing: props.isEditing,
+			cellRef,
+			beginEdit,
+			commitEdit,
+			cancelEditing
+		});
+		else return props.class;
+	});
+	return (() => {
+		var _el$9 = _tmpl$5();
+		_el$9.$$dblclick = handleDoubleClick;
+		_el$9.$$mouseover = handleMouseOver;
+		_el$9.$$mousedown = handleMouseDown;
+		use((el) => {
+			cellRef = el;
+			props.registerCellRef(props.row, props.col, el);
+		}, _el$9);
+		insert(_el$9, () => props.renderCell({
+			row: props.row,
+			col: props.col,
+			value: props.value,
+			cellRef,
+			isSelected: props.isSelected,
+			isActive: props.isActive,
+			isEditing: props.isEditing,
+			beginEdit,
+			commitEdit,
+			cancelEditing
+		}));
+		effect((_p$) => {
+			var _v$0 = className$1(), _v$1 = props.row, _v$10 = props.col, _v$11 = props.isSelected || void 0, _v$12 = props.isActive || void 0, _v$13 = props.isEditing || void 0;
+			_v$0 !== _p$.e && className(_el$9, _p$.e = _v$0);
+			_v$1 !== _p$.t && setAttribute(_el$9, "data-row", _p$.t = _v$1);
+			_v$10 !== _p$.a && setAttribute(_el$9, "data-col", _p$.a = _v$10);
+			_v$11 !== _p$.o && setAttribute(_el$9, "data-selected", _p$.o = _v$11);
+			_v$12 !== _p$.i && setAttribute(_el$9, "data-active", _p$.i = _v$12);
+			_v$13 !== _p$.n && setAttribute(_el$9, "data-editing", _p$.n = _v$13);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0
+		});
+		return _el$9;
+	})();
+}
+delegateEvents([
+	"keydown",
+	"click",
+	"mousedown",
+	"mouseover",
+	"dblclick"
+]);
+
+//#endregion
+export { Gridsheet };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.tsx"],"sourcesContent":["import {\n  batch,\n  createEffect,\n  createMemo,\n  createSignal,\n  For,\n  Index,\n  onCleanup,\n  onMount,\n} from \"solid-js\";\nimport type { JSX } from \"solid-js/jsx-runtime\";\n\nexport interface CellPosition {\n  row: number;\n  col: number;\n}\n\nexport interface CellRange {\n  min: CellPosition;\n  max: CellPosition;\n}\n\nfunction isPositionInRange(pos: CellPosition, range: CellRange): boolean {\n  return (\n    pos.row >= range.min.row &&\n    pos.row <= range.max.row &&\n    pos.col >= range.min.col &&\n    pos.col <= range.max.col\n  );\n}\n\nfunction normalizeRange(pos1: CellPosition, pos2: CellPosition): CellRange {\n  return {\n    min: {\n      row: Math.min(pos1.row, pos2.row),\n      col: Math.min(pos1.col, pos2.col),\n    },\n    max: {\n      row: Math.max(pos1.row, pos2.row),\n      col: Math.max(pos1.col, pos2.col),\n    },\n  };\n}\n\nexport interface CellRenderContext<T> {\n  /** Row index */\n  row: number;\n\n  /** Column index */\n  col: number;\n\n  /** Cell value */\n  value: T;\n\n  /** Is this the active cell (focused) */\n  isActive: boolean;\n\n  /** Is this cell currently selected */\n  isSelected: boolean;\n\n  /** Is this cell currently being edited */\n  isEditing: boolean;\n\n  /** Solid ref for scrolling, focusing, measuring, etc. */\n  cellRef: HTMLTableCellElement | undefined;\n\n  /** Enter editing mode for this cell */\n  beginEdit: () => void;\n\n  /** Commit edit with new value */\n  commitEdit: (value: T) => void;\n\n  /** Exit editing mode for this cell */\n  cancelEditing: () => void;\n}\n\nexport interface GridsheetProps<T> {\n  /** 2D matrix of values */\n  data: T[][];\n  onDataChange?: (next: T[][]) => void;\n\n  /** Renderer for each cell */\n  renderCell: (ctx: CellRenderContext<T>) => JSX.Element;\n\n  /** Currently focused cell */\n  activeCell?: CellPosition | null;\n  onActiveCellChange?: (pos: CellPosition | null) => void;\n\n  /** Current selection range */\n  selection?: CellRange | null;\n  onSelectionChange?: (range: CellRange | null) => void;\n\n  /** Is the active cell in editing mode */\n  isEditing?: boolean;\n  onIsEditingChange?: (isEditing: boolean) => void;\n\n  ref?: HTMLTableElement | ((el: HTMLTableElement) => void) | undefined;\n  class?: string;\n  style?: JSX.CSSProperties | string;\n  classes?: {\n    cell?: string | ((ctx: CellRenderContext<T>) => string);\n    row?: string | ((ctx: { rowIndex: number }) => string);\n    rowHeader?:\n      | string\n      | ((ctx: { rowIndex: number; isSelected: boolean }) => string);\n    colHeader?:\n      | string\n      | ((ctx: { colIndex: number; isSelected: boolean }) => string);\n    corner?: string;\n    header?: string;\n    body?: string;\n  };\n}\n\ntype SelectionMode = \"cell\" | \"row\" | \"col\";\nconst DEFAULT_SELECTION_MODE: SelectionMode = \"cell\";\n\nexport function Gridsheet<T>(props: GridsheetProps<T>): JSX.Element {\n  const numRows = createMemo(() => props.data.length);\n  const numCols = createMemo(() => (props.data[0] ? props.data[0].length : 0));\n\n  const [innerActiveCell, setInnerActiveCell] =\n    createSignal<CellPosition | null>(null);\n  const activeCell = createMemo(() =>\n    props.activeCell === undefined ? innerActiveCell() : props.activeCell,\n  );\n  const setActiveCell = (pos: CellPosition | null) => {\n    // propsでactiveCellを管理している場合でも、内部stateを更新する\n    // props.activeCellがundefinedに変更される可能性があるため\n    setInnerActiveCell(pos);\n\n    if (props.onActiveCellChange) {\n      props.onActiveCellChange(pos);\n    }\n  };\n\n  const isCellActive = (pos: CellPosition) => {\n    const ac = activeCell();\n    return ac !== null && ac.row === pos.row && ac.col === pos.col;\n  };\n\n  const [innerSelection, setInnerSelection] = createSignal<CellRange | null>(\n    null,\n  );\n  const selection = createMemo(() =>\n    props.selection === undefined ? innerSelection() : props.selection,\n  );\n  const setSelection = (range: CellRange | null) => {\n    const normalizedRange = range ? normalizeRange(range.min, range.max) : null;\n    // propsでselectionを管理している場合でも、内部stateを更新する\n    // props.selectionがundefinedに変更される可能性があるため\n    setInnerSelection(normalizedRange);\n\n    if (props.onSelectionChange) {\n      props.onSelectionChange(normalizedRange);\n    }\n  };\n\n  const isCellSelected = (pos: CellPosition) => {\n    const sel = selection();\n    return sel !== null && isPositionInRange(pos, sel);\n  };\n\n  const isRowHeaderSelected = (rowIndex: number) => {\n    const sel = selection();\n    return sel !== null && rowIndex >= sel.min.row && rowIndex <= sel.max.row;\n  };\n\n  const isColHeaderSelected = (colIndex: number) => {\n    const sel = selection();\n    return sel !== null && colIndex >= sel.min.col && colIndex <= sel.max.col;\n  };\n\n  const [innerIsEditing, setInnerIsEditing] = createSignal<boolean>(false);\n  const isEditing = createMemo(() =>\n    props.isEditing === undefined ? innerIsEditing() : props.isEditing,\n  );\n  const setIsEditing = (editing: boolean) => {\n    setInnerIsEditing(editing);\n\n    if (props.onIsEditingChange) {\n      props.onIsEditingChange(editing);\n    }\n  };\n\n  const isCellEditing = (pos: CellPosition) => {\n    return isEditing() && isCellActive(pos);\n  };\n\n  const beginCellEdit = (pos: CellPosition) => {\n    batch(() => {\n      setIsEditing(true);\n      setActiveCell(pos);\n      setSelection(normalizeRange(pos, pos));\n    });\n  };\n\n  const commitCellEdit = (pos: CellPosition, value: T) => {\n    const nextData = props.data.map((row) => row.slice());\n\n    const targetRow = nextData[pos.row];\n    if (targetRow && pos.col >= 0 && pos.col < targetRow.length) {\n      targetRow[pos.col] = value;\n      if (props.onDataChange) {\n        props.onDataChange(nextData);\n      }\n    }\n\n    setIsEditing(false);\n  };\n\n  const cancelCellEdit = () => {\n    setIsEditing(false);\n  };\n\n  const [isMouseDown, setIsMouseDown] = createSignal(false);\n  const [selectionMode, setSelectionMode] = createSignal<SelectionMode>(\n    DEFAULT_SELECTION_MODE,\n  );\n  const [selectionAnchor, setSelectionAnchor] =\n    createSignal<CellPosition | null>(null);\n\n  let previousBodyUserSelect: string | null = null;\n  const disableTextSelectionDuringDrag = () => {\n    if (typeof document === \"undefined\" || previousBodyUserSelect !== null)\n      return;\n    const body = document.body;\n    if (!body) return;\n    previousBodyUserSelect = body.style.userSelect;\n    body.style.userSelect = \"none\";\n  };\n  const restoreTextSelectionAfterDrag = () => {\n    if (typeof document === \"undefined\" || previousBodyUserSelect === null)\n      return;\n    const body = document.body;\n    if (body) {\n      body.style.userSelect = previousBodyUserSelect;\n    }\n    previousBodyUserSelect = null;\n  };\n\n  const handleMouseUp = () => {\n    setIsMouseDown(false);\n    setSelectionMode(DEFAULT_SELECTION_MODE);\n    setSelectionAnchor(null);\n    restoreTextSelectionAfterDrag();\n  };\n  onMount(() => {\n    window.addEventListener(\"mouseup\", handleMouseUp);\n  });\n  onCleanup(() => {\n    window.removeEventListener(\"mouseup\", handleMouseUp);\n    restoreTextSelectionAfterDrag();\n  });\n\n  const handleMouseDownOnCell = (pos: CellPosition, e: MouseEvent) => {\n    if (e.button !== 0) return;\n\n    // 編集中のセルは選択操作を無効化し、編集状態を維持する\n    if (isCellEditing(pos)) return;\n\n    // ダブルクリック(2回目のmousedown)で即座に編集に入る\n    if (e.detail === 2) {\n      e.preventDefault();\n      beginCellEdit(pos);\n      return;\n    }\n\n    e.preventDefault();\n\n    batch(() => {\n      disableTextSelectionDuringDrag();\n      setIsMouseDown(true);\n      setSelectionMode(\"cell\");\n      setSelectionAnchor(pos);\n\n      setIsEditing(false);\n      setSelection(normalizeRange(pos, pos));\n      setActiveCell(pos);\n    });\n  };\n  const handleMouseOverOnCell = (pos: CellPosition, e: MouseEvent) => {\n    // ドラッグされていない場合は何もしない\n    if ((e.buttons & 1) === 0) return;\n\n    batch(() => {\n      if (!isMouseDown() || selectionMode() !== \"cell\") return;\n\n      const start = selectionAnchor();\n      if (start) {\n        setSelection(normalizeRange(start, pos));\n      } else {\n        console.warn(\"selectionAnchor is null during mouse drag selection\");\n      }\n    });\n  };\n\n  const handleMouseDownOnRowHeader = (rowIndex: number) => {\n    if (numCols() === 0) {\n      return;\n    }\n\n    batch(() => {\n      disableTextSelectionDuringDrag();\n      setIsMouseDown(true);\n      setSelectionMode(\"row\");\n      const start: CellPosition = { row: rowIndex, col: 0 };\n      const end: CellPosition = { row: rowIndex, col: numCols() - 1 };\n      setSelectionAnchor(start);\n\n      setIsEditing(false);\n      setSelection(normalizeRange(start, end));\n      setActiveCell(start);\n    });\n  };\n  const handleMouseOverOnRowHeader = (rowIndex: number) => {\n    batch(() => {\n      if (!isMouseDown() || selectionMode() !== \"row\") return;\n\n      const start = selectionAnchor();\n      if (start) {\n        const end: CellPosition = { row: rowIndex, col: numCols() - 1 };\n        setSelection(normalizeRange(start, end));\n      } else {\n        console.warn(\"selectionAnchor is null during mouse drag selection\");\n      }\n    });\n  };\n\n  const handleMouseDownOnColHeader = (colIndex: number) => {\n    if (numRows() === 0) {\n      return;\n    }\n\n    batch(() => {\n      disableTextSelectionDuringDrag();\n      setIsMouseDown(true);\n      setSelectionMode(\"col\");\n      const start: CellPosition = { row: 0, col: colIndex };\n      const end: CellPosition = { row: numRows() - 1, col: colIndex };\n      setSelectionAnchor(start);\n\n      setIsEditing(false);\n      setSelection(normalizeRange(start, end));\n      setActiveCell(start);\n    });\n  };\n  const handleMouseOverOnColHeader = (colIndex: number) => {\n    batch(() => {\n      if (!isMouseDown() || selectionMode() !== \"col\") return;\n\n      const start = selectionAnchor();\n      if (start) {\n        const end: CellPosition = { row: numRows() - 1, col: colIndex };\n        setSelection(normalizeRange(start, end));\n      } else {\n        console.warn(\"selectionAnchor is null during mouse drag selection\");\n      }\n    });\n  };\n\n  const handleClickOnCorner = () => {\n    if (numCols() === 0 || numRows() === 0) {\n      return;\n    }\n\n    batch(() => {\n      setIsEditing(false);\n      setSelection(\n        normalizeRange(\n          { row: 0, col: 0 },\n          { row: numRows() - 1, col: numCols() - 1 },\n        ),\n      );\n      setActiveCell({ row: 0, col: 0 });\n    });\n  };\n\n  const navigate = (\n    deltaRow: number,\n    deltaCol: number,\n    isSelection: boolean,\n  ) => {\n    const ac = activeCell();\n    if (!ac) return;\n\n    if (isSelection) {\n      let anchor = selectionAnchor();\n      if (!anchor) {\n        anchor = ac;\n        setSelectionAnchor(anchor);\n      }\n\n      const sel = selection();\n      let headRow = anchor.row;\n      let headCol = anchor.col;\n\n      if (sel) {\n        headRow = sel.min.row === anchor.row ? sel.max.row : sel.min.row;\n        headCol = sel.min.col === anchor.col ? sel.max.col : sel.min.col;\n      }\n\n      const nextHeadRow = Math.max(\n        0,\n        Math.min(numRows() - 1, headRow + deltaRow),\n      );\n      const nextHeadCol = Math.max(\n        0,\n        Math.min(numCols() - 1, headCol + deltaCol),\n      );\n\n      setSelection(\n        normalizeRange(anchor, { row: nextHeadRow, col: nextHeadCol }),\n      );\n    } else {\n      const nextRow = Math.max(0, Math.min(numRows() - 1, ac.row + deltaRow));\n      const nextCol = Math.max(0, Math.min(numCols() - 1, ac.col + deltaCol));\n      const nextPos = { row: nextRow, col: nextCol };\n\n      setActiveCell(nextPos);\n      setSelection(normalizeRange(nextPos, nextPos));\n      setSelectionAnchor(null);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.isComposing) return;\n\n    // 編集中のキー操作はrenderCell側で処理する\n    if (isEditing()) return;\n\n    const ac = activeCell();\n    if (!ac) return;\n\n    switch (e.key) {\n      case \"ArrowUp\":\n        e.preventDefault();\n        navigate(-1, 0, e.shiftKey);\n        break;\n      case \"ArrowDown\":\n        e.preventDefault();\n        navigate(1, 0, e.shiftKey);\n        break;\n      case \"ArrowLeft\":\n        e.preventDefault();\n        navigate(0, -1, e.shiftKey);\n        break;\n      case \"ArrowRight\":\n        e.preventDefault();\n        navigate(0, 1, e.shiftKey);\n        break;\n      case \"Tab\":\n        e.preventDefault();\n        navigate(0, e.shiftKey ? -1 : 1, false);\n        break;\n      case \"Enter\":\n        e.preventDefault();\n        beginCellEdit(ac);\n        break;\n\n      default:\n        break;\n    }\n  };\n\n  const cellRefs = new Map<string, HTMLElement>();\n  const getCellKey = (pos: CellPosition) => `${pos.row}:${pos.col}`;\n  createEffect(() => {\n    if (isEditing()) return;\n    const ac = activeCell();\n    if (ac) {\n      const el = cellRefs.get(getCellKey(ac));\n      el?.focus();\n    }\n  });\n\n  return (\n    <table\n      data-slot=\"gridsheet\"\n      tabIndex={-1}\n      onKeyDown={handleKeyDown}\n      ref={props.ref}\n      class={props.class}\n      style={props.style}\n    >\n      <thead data-slot=\"gridsheet-header\" class={props.classes?.header}>\n        <tr data-slot=\"gridsheet-row\">\n          <th\n            data-slot=\"gridsheet-corner\"\n            onClick={handleClickOnCorner}\n            class={props.classes?.corner}\n          ></th>\n          <Index each={Array.from({ length: numCols() })}>\n            {(_, colIndex) => (\n              <ColHeader\n                index={colIndex}\n                isSelected={isColHeaderSelected(colIndex)}\n                onMouseDown={handleMouseDownOnColHeader}\n                onMouseOver={handleMouseOverOnColHeader}\n                class={props.classes?.colHeader}\n              />\n            )}\n          </Index>\n        </tr>\n      </thead>\n      <tbody data-slot=\"gridsheet-body\" class={props.classes?.body}>\n        <For each={props.data}>\n          {(row, rowIndex) => (\n            <tr\n              data-slot=\"gridsheet-row\"\n              class={\n                typeof props.classes?.row === \"function\"\n                  ? props.classes?.row({ rowIndex: rowIndex() })\n                  : props.classes?.row\n              }\n            >\n              <RowHeader\n                index={rowIndex()}\n                isSelected={isRowHeaderSelected(rowIndex())}\n                onMouseDown={handleMouseDownOnRowHeader}\n                onMouseOver={handleMouseOverOnRowHeader}\n                class={props.classes?.rowHeader}\n              />\n              <For each={row}>\n                {(cell, colIndex) => (\n                  <Cell\n                    row={rowIndex()}\n                    col={colIndex()}\n                    value={cell}\n                    isActive={isCellActive({\n                      row: rowIndex(),\n                      col: colIndex(),\n                    })}\n                    isEditing={isCellEditing({\n                      row: rowIndex(),\n                      col: colIndex(),\n                    })}\n                    isSelected={isCellSelected({\n                      row: rowIndex(),\n                      col: colIndex(),\n                    })}\n                    beginEdit={beginCellEdit}\n                    commitEdit={commitCellEdit}\n                    cancelEditing={cancelCellEdit}\n                    setActiveCell={setActiveCell}\n                    setSelection={setSelection}\n                    renderCell={props.renderCell}\n                    onMouseDown={handleMouseDownOnCell}\n                    onMouseOver={handleMouseOverOnCell}\n                    registerCellRef={(rowPos, colPos, el) => {\n                      cellRefs.set(\n                        getCellKey({ row: rowPos, col: colPos }),\n                        el,\n                      );\n                    }}\n                    class={props.classes?.cell}\n                  />\n                )}\n              </For>\n            </tr>\n          )}\n        </For>\n      </tbody>\n    </table>\n  );\n}\n\ninterface RowHeaderProps {\n  index: number;\n  isSelected: boolean;\n\n  onMouseDown: (rowIndex: number) => void;\n  onMouseOver: (rowIndex: number) => void;\n\n  class?: string | ((ctx: { rowIndex: number; isSelected: boolean }) => string);\n}\n\nfunction getRowLabel(rowIndex: number): string {\n  return `${rowIndex + 1}`;\n}\n\nfunction RowHeader(props: RowHeaderProps) {\n  return (\n    // biome-ignore lint/a11y/useKeyWithMouseEvents: 親のtableでキー操作を処理している\n    <th\n      data-slot=\"gridsheet-rowheader\"\n      onMouseDown={() => props.onMouseDown(props.index)}\n      onMouseOver={() => props.onMouseOver(props.index)}\n      class={\n        typeof props.class === \"function\"\n          ? props.class({ rowIndex: props.index, isSelected: props.isSelected })\n          : props.class\n      }\n      data-selected={props.isSelected || undefined}\n    >\n      {getRowLabel(props.index)}\n    </th>\n  );\n}\n\ninterface ColHeaderProps {\n  index: number;\n  isSelected: boolean;\n\n  onMouseDown: (colIndex: number) => void;\n  onMouseOver: (colIndex: number) => void;\n\n  class?: string | ((ctx: { colIndex: number; isSelected: boolean }) => string);\n}\n\nconst ALPHABET = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\nfunction getColLabel(colIndex: number): string {\n  let label = \"\";\n  let n = colIndex + 1;\n  while (n > 0) {\n    const rem = (n - 1) % 26;\n    label = ALPHABET[rem] + label;\n    n = Math.floor((n - 1) / 26);\n  }\n  return label;\n}\n\nfunction ColHeader(props: ColHeaderProps) {\n  return (\n    // biome-ignore lint/a11y/useKeyWithMouseEvents: 親のtableでキー操作を処理している\n    <th\n      data-slot=\"gridsheet-colheader\"\n      onMouseDown={() => props.onMouseDown(props.index)}\n      onMouseOver={() => props.onMouseOver(props.index)}\n      class={\n        typeof props.class === \"function\"\n          ? props.class({ colIndex: props.index, isSelected: props.isSelected })\n          : props.class\n      }\n      data-selected={props.isSelected || undefined}\n    >\n      {getColLabel(props.index)}\n    </th>\n  );\n}\n\ninterface CellProps<T> {\n  row: number;\n  col: number;\n  value: T;\n\n  isSelected: boolean;\n  isActive: boolean;\n  isEditing: boolean;\n\n  beginEdit: (pos: CellPosition) => void;\n  commitEdit: (pos: CellPosition, value: T) => void;\n  cancelEditing: () => void;\n\n  setActiveCell?: (pos: CellPosition) => void;\n  setSelection?: (range: CellRange | null) => void;\n\n  onMouseDown: (pos: CellPosition, e: MouseEvent) => void;\n  onMouseOver: (pos: CellPosition, e: MouseEvent) => void;\n\n  registerCellRef: (row: number, col: number, el: HTMLTableCellElement) => void;\n\n  renderCell: (ctx: CellRenderContext<T>) => JSX.Element;\n\n  class?: string | ((ctx: CellRenderContext<T>) => string);\n}\n\nfunction Cell<T>(props: CellProps<T>) {\n  let cellRef!: HTMLTableCellElement;\n\n  const beginEdit = () => props.beginEdit({ row: props.row, col: props.col });\n  const commitEdit = (value: T) => {\n    props.commitEdit({ row: props.row, col: props.col }, value);\n  };\n  const cancelEditing = () => props.cancelEditing();\n\n  const handleMouseDown = (e: MouseEvent) => {\n    props.onMouseDown({ row: props.row, col: props.col }, e);\n  };\n  const handleMouseOver = (e: MouseEvent) => {\n    props.onMouseOver({ row: props.row, col: props.col }, e);\n  };\n  const handleDoubleClick = (e: MouseEvent) => {\n    if (e.button !== 0) return;\n    e.preventDefault();\n    if (!props.isEditing) {\n      beginEdit();\n    }\n  };\n\n  const className = createMemo(() => {\n    if (typeof props.class === \"function\") {\n      return props.class({\n        row: props.row,\n        col: props.col,\n        value: props.value,\n        isSelected: props.isSelected,\n        isActive: props.isActive,\n        isEditing: props.isEditing,\n        cellRef,\n        beginEdit,\n        commitEdit,\n        cancelEditing,\n      });\n    } else {\n      return props.class;\n    }\n  });\n\n  return (\n    // biome-ignore lint/a11y/useKeyWithMouseEvents: 親のtableでキー操作を処理している\n    <td\n      data-slot=\"gridsheet-cell\"\n      ref={(el) => {\n        cellRef = el;\n        props.registerCellRef(props.row, props.col, el);\n      }}\n      onMouseDown={handleMouseDown}\n      onMouseOver={handleMouseOver}\n      onDblClick={handleDoubleClick}\n      tabIndex={-1}\n      class={className()}\n      data-row={props.row}\n      data-col={props.col}\n      data-selected={props.isSelected || undefined}\n      data-active={props.isActive || undefined}\n      data-editing={props.isEditing || undefined}\n    >\n      {props.renderCell({\n        row: props.row,\n        col: props.col,\n        value: props.value,\n\n        cellRef: cellRef,\n\n        isSelected: props.isSelected,\n        isActive: props.isActive,\n        isEditing: props.isEditing,\n\n        beginEdit,\n        commitEdit,\n        cancelEditing,\n      })}\n    </td>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@shiguri/solid-grid",
+  "author": {
+    "name": "shiguri",
+    "url": "https://github.com/shiguri-01"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shiguri-01/solid-grid"
+  },
+  "license": "MIT",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  },
+  "devDependencies": {
+    "rolldown-plugin-solid": "^0.2.1",
+    "tsdown": "^0.16.1"
+  }
+}