@dxos/plugin-sheet 0.10.0 → 0.11.1

package/dist/lib/components.mjs

@@ -0,0 +1,1377 @@
+import { n as sheetExtension, t as rangeExtension } from "./chunk-extensions.mjs";
+import { n as useSelectThreadOnCellFocus } from "./chunk-thread-ranges.mjs";
+import { DetailedCellError, ExportedCellChange, addressFromA1Notation, addressToA1Notation, createSheetName, inRange, isFormula, rangeToA1Notation } from "@dxos/compute-hyperformula";
+import { Obj } from "@dxos/echo";
+import { assertArgument, invariant } from "@dxos/invariant";
+import { meta } from "#meta";
+import { PublicKey } from "@dxos/keys";
+import { DEFAULT_COLS, DEFAULT_ROWS, MAX_COLS, MAX_ROWS, ReadonlyException, SheetCapabilities, SheetOperation, addressFromIndex, addressToIndex, alignKey, cellClassNameForRange, initialize, insertIndices, mapFormulaIndicesToRefs, mapFormulaRefsToIndices, rangeFromIndex, rangeToIndex } from "#types";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { raise } from "@dxos/debug";
+import { useAsyncState } from "@dxos/react-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Grid, GridCellEditor, closestCell, colToA1Notation, editorKeys, parseCellIndex, rowToA1Notation, useGridContext } from "@dxos/react-ui-grid";
+import { Event } from "@dxos/async";
+import { Resource } from "@dxos/context";
+import { Format, TypeEnum } from "@dxos/echo/Format";
+import { log } from "@dxos/log";
+import { useCapabilities, useOperationInvoker } from "@dxos/app-framework/ui";
+import { defaultColSize, defaultRowSize } from "@dxos/lit-grid";
+import { DropdownMenu, Icon, composable, composableProps, useTranslation } from "@dxos/react-ui";
+import { useAttention } from "@dxos/react-ui-attention";
+import { mx } from "@dxos/ui-theme";
+import { Doc } from "@dxos/echo-doc";
+import { cellClassesForFieldType, parseValue } from "@dxos/react-ui-form";
+import { Atom, RegistryContext } from "@effect-atom/atom-react";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
+import { Menu, createGapSeparator, createMenuAction, createMenuItemGroup, graphActions, isToolbarAction, useMenuActions } from "@dxos/react-ui-menu";
+//#region src/components/ComputeGraph/ComputeGraphContext.ts
+/**
+* The compute graph context manages a ComputeGraph for each space.
+*/
+var ComputeGraphContext = createContext(void 0);
+var useComputeGraph = (space) => {
+	const { registry } = useContext(ComputeGraphContext) ?? raise(/* @__PURE__ */ new Error("Missing ComputeGraphContext"));
+	const [graph] = useAsyncState(async () => {
+		if (space) {
+			const graph = registry.getOrCreateGraph(space);
+			await graph.open();
+			return graph;
+		}
+	}, [space, registry]);
+	return graph;
+};
+//#endregion
+//#region src/components/ComputeGraph/ComputeGraphContextProvider.tsx
+var ComputeGraphContextProvider = ({ registry, children }) => {
+	return /* @__PURE__ */ jsx(ComputeGraphContext.Provider, {
+		value: { registry },
+		children
+	});
+};
+//#endregion
+//#region src/components/SheetRoot/SheetContext.ts
+var SheetContext = createContext(void 0);
+var useSheetContext = () => {
+	return useContext(SheetContext) ?? raise(/* @__PURE__ */ new Error("Missing SheetContext"));
+};
+//#endregion
+//#region src/model/sheet-model.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-sheet/src/model/sheet-model.ts";
+var typeMap = {
+	BOOLEAN: { type: TypeEnum.Boolean },
+	NUMBER_RAW: { type: TypeEnum.Number },
+	NUMBER_PERCENT: {
+		type: TypeEnum.Number,
+		format: Format.TypeFormat.Percent
+	},
+	NUMBER_CURRENCY: {
+		type: TypeEnum.Number,
+		format: Format.TypeFormat.Currency
+	},
+	NUMBER_DATETIME: {
+		type: TypeEnum.String,
+		format: Format.TypeFormat.DateTime
+	},
+	NUMBER_DATE: {
+		type: TypeEnum.String,
+		format: Format.TypeFormat.Date
+	},
+	NUMBER_TIME: {
+		type: TypeEnum.String,
+		format: Format.TypeFormat.Time
+	}
+};
+var getTopLeft = (range) => {
+	const to = range.to ?? range.from;
+	return {
+		row: Math.min(range.from.row, to.row),
+		col: Math.min(range.from.col, to.col)
+	};
+};
+var toSimpleCellAddress = (sheet, cell) => ({
+	sheet,
+	row: cell.row,
+	col: cell.col
+});
+var toModelRange = (sheet, range) => ({
+	start: toSimpleCellAddress(sheet, range.from),
+	end: toSimpleCellAddress(sheet, range.to ?? range.from)
+});
+/**
+* Spreadsheet data model.
+*
+* [ComputeGraphContext] > [SheetContext]:[SheetModel] > [Sheet.Root]
+*/
+var SheetModel = class extends Resource {
+	_graph;
+	_sheet;
+	_options;
+	id = `model-${PublicKey.random().truncate()}`;
+	update = new Event();
+	_node;
+	constructor(_graph, _sheet, _options = {}) {
+		super();
+		this._graph = _graph;
+		this._sheet = _sheet;
+		this._options = _options;
+	}
+	get graph() {
+		return this._graph;
+	}
+	get sheet() {
+		return this._sheet;
+	}
+	get readonly() {
+		return this._options.readonly;
+	}
+	get bounds() {
+		return {
+			rows: this._sheet.rows.length,
+			columns: this._sheet.columns.length
+		};
+	}
+	/**
+	* Initialize sheet and engine.
+	*/
+	async _open() {
+		log("initialize", { id: this.id }, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 124,
+			S: this
+		});
+		Obj.update(this._sheet, (obj) => {
+			initialize(obj);
+		});
+		this._graph.update.on((event) => {
+			if (event.type === "functionsUpdated") this.reset();
+		});
+		this._node = this._graph.getOrCreateNode(createSheetName({
+			type: Obj.getTypename(this._sheet),
+			id: this._sheet.id
+		}));
+		await this._node.open();
+		const unsubscribe = this._node.update.on((event) => this.update.emit(event));
+		this._ctx.onDispose(unsubscribe);
+		this.reset();
+	}
+	/**
+	* Update engine.
+	* NOTE: This resets the undo history.
+	* @deprecated
+	*/
+	reset() {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 154,
+			S: this,
+			A: ["this._node", ""]
+		});
+		this._node.graph.hf.clearSheet(this._node.sheetId);
+		Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
+			invariant(this._node, void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 157,
+				S: this,
+				A: ["this._node", ""]
+			});
+			const { col, row } = addressFromIndex(this._sheet, key);
+			if (isFormula(value)) {
+				const binding = this._graph.mapFunctionBindingFromId(mapFormulaIndicesToRefs(this._sheet, value));
+				if (binding) value = this._graph.mapFormulaToNative(binding);
+				else value = "";
+			}
+			this._node.graph.hf.setCellContents({
+				sheet: this._node.sheetId,
+				row,
+				col
+			}, value);
+		});
+	}
+	/**
+	* Recalculate formulas.
+	* NOTE: This resets the undo history.
+	* https://hyperformula.handsontable.com/guide/volatile-functions.html#volatile-actions
+	* @deprecated
+	*/
+	recalculate() {
+		this._node?.graph.hf.rebuildAndRecalculate();
+	}
+	insertRows(i, n = 1) {
+		let idx = [];
+		Obj.update(this._sheet, (obj) => {
+			idx = insertIndices(obj.rows, i, n, MAX_ROWS);
+		});
+		this.reset();
+		return idx;
+	}
+	insertColumns(i, n = 1) {
+		let idx = [];
+		Obj.update(this._sheet, (obj) => {
+			idx = insertIndices(obj.columns, i, n, MAX_COLS);
+		});
+		this.reset();
+		return idx;
+	}
+	dropRow(rowIndex) {
+		const range = {
+			from: addressFromIndex(this._sheet, `${this._sheet.columns[0]}@${rowIndex}`),
+			to: addressFromIndex(this._sheet, `${this._sheet.columns[this._sheet.columns.length - 1]}@${rowIndex}`)
+		};
+		const values = this.getCellValues(range).flat();
+		const index = this._sheet.rows.indexOf(rowIndex);
+		this.clear(range);
+		Obj.update(this._sheet, (obj) => {
+			obj.rows.splice(index, 1);
+			delete obj.rowMeta[rowIndex];
+		});
+		this.reset();
+		return {
+			axis: "row",
+			index,
+			axisIndex: rowIndex,
+			axisMeta: this._sheet.rowMeta[rowIndex],
+			values
+		};
+	}
+	dropColumn(colIndex) {
+		const range = {
+			from: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[0]}`),
+			to: addressFromIndex(this._sheet, `${colIndex}@${this._sheet.rows[this._sheet.rows.length - 1]}`)
+		};
+		const values = this.getCellValues(range).flat();
+		const index = this._sheet.columns.indexOf(colIndex);
+		this.clear(range);
+		Obj.update(this._sheet, (obj) => {
+			obj.columns.splice(index, 1);
+			delete obj.columnMeta[colIndex];
+		});
+		this.reset();
+		return {
+			axis: "col",
+			index,
+			axisIndex: colIndex,
+			axisMeta: this._sheet.rowMeta[colIndex],
+			values
+		};
+	}
+	restoreRow({ index, axisIndex, axisMeta, values }) {
+		Obj.update(this._sheet, (obj) => {
+			obj.rows.splice(index, 0, axisIndex);
+			values.forEach((value, col) => {
+				if (value) obj.cells[`${obj.columns[col]}@${axisIndex}`] = { value };
+			});
+			if (axisMeta) obj.rowMeta[axisIndex] = axisMeta;
+		});
+		this.reset();
+	}
+	restoreColumn({ index, axisIndex, axisMeta, values }) {
+		Obj.update(this._sheet, (obj) => {
+			obj.columns.splice(index, 0, axisIndex);
+			values.forEach((value, row) => {
+				if (value) obj.cells[`${axisIndex}@${obj.rows[row]}`] = { value };
+			});
+			if (axisMeta) obj.columnMeta[axisIndex] = axisMeta;
+		});
+		this.reset();
+	}
+	/**
+	* Clear range of values.
+	*/
+	clear(range) {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 276,
+			S: this,
+			A: ["this._node", ""]
+		});
+		const topLeft = getTopLeft(range);
+		const values = this._iterRange(range, () => null);
+		this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
+		Obj.update(this._sheet, (obj) => {
+			this._iterRange(range, (cell) => {
+				const idx = addressToIndex(this._sheet, cell);
+				delete obj.cells[idx];
+			});
+		});
+	}
+	cut(range) {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 289,
+			S: this,
+			A: ["this._node", ""]
+		});
+		this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
+		Obj.update(this._sheet, (obj) => {
+			this._iterRange(range, (cell) => {
+				const idx = addressToIndex(this._sheet, cell);
+				delete obj.cells[idx];
+			});
+		});
+	}
+	copy(range) {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 300,
+			S: this,
+			A: ["this._node", ""]
+		});
+		this._node.graph.hf.copy(toModelRange(this._node.sheetId, range));
+	}
+	paste(cell) {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 305,
+			S: this,
+			A: ["this._node", ""]
+		});
+		if (!this._node.graph.hf.isClipboardEmpty()) {
+			const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
+			Obj.update(this._sheet, (obj) => {
+				for (const change of changes) if (change instanceof ExportedCellChange) {
+					const { address, newValue } = change;
+					const idx = addressToIndex(this._sheet, {
+						row: address.row,
+						col: address.col
+					});
+					obj.cells[idx] = { value: newValue };
+				}
+			});
+		}
+	}
+	undo() {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 322,
+			S: this,
+			A: ["this._node", ""]
+		});
+		if (this._node.graph.hf.isThereSomethingToUndo()) this._node.graph.hf.undo();
+	}
+	redo() {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 330,
+			S: this,
+			A: ["this._node", ""]
+		});
+		if (this._node.graph.hf.isThereSomethingToRedo()) this._node.graph.hf.redo();
+	}
+	/**
+	* Get value from sheet.
+	*/
+	getCellValue(cell) {
+		const idx = addressToIndex(this._sheet, cell);
+		return this._sheet.cells[idx]?.value ?? null;
+	}
+	/**
+	* Get value as a string for editing.
+	*/
+	getCellText(cell) {
+		const value = this.getCellValue(cell);
+		if (value == null) return;
+		if (isFormula(value)) return this._graph.mapFunctionBindingFromId(mapFormulaIndicesToRefs(this._sheet, value));
+		else return String(value);
+	}
+	/**
+	* Get array of raw values from sheet.
+	*/
+	getCellValues(range) {
+		return this._iterRange(range, (cell) => this.getCellValue(cell));
+	}
+	/**
+	* Gets the regular or computed value from the engine.
+	*/
+	getValue(cell) {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 373,
+			S: this,
+			A: ["this._node", ""]
+		});
+		const address = toSimpleCellAddress(this._node.sheetId, cell);
+		const value = this._node.graph.hf.getCellValue(address);
+		if (value instanceof DetailedCellError) {
+			log.warn("cell error", {
+				cell,
+				error: value
+			}, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 378,
+				S: this
+			});
+			return value.toString();
+		}
+		return value;
+	}
+	/**
+	* Get value type.
+	*/
+	getValueDescription(cell) {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 389,
+			S: this,
+			A: ["this._node", ""]
+		});
+		const addr = toSimpleCellAddress(this._node.sheetId, cell);
+		return typeMap[this._node.graph.hf.getCellValueDetailedType(addr)];
+	}
+	/**
+	* Sets the value, updating the sheet and engine.
+	*/
+	setValue(cell, value) {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 399,
+			S: this,
+			A: ["this._node", ""]
+		});
+		if (this._options.readonly) throw new ReadonlyException();
+		let refresh = false;
+		if (cell.row >= this._sheet.rows.length) {
+			Obj.update(this._sheet, (obj) => {
+				insertIndices(obj.rows, cell.row, 1, MAX_ROWS);
+			});
+			refresh = true;
+		}
+		if (cell.col >= this._sheet.columns.length) {
+			Obj.update(this._sheet, (obj) => {
+				insertIndices(obj.columns, cell.col, 1, MAX_COLS);
+			});
+			refresh = true;
+		}
+		if (refresh) this.reset();
+		this._node.graph.hf.setCellContents({
+			sheet: this._node.sheetId,
+			row: cell.row,
+			col: cell.col
+		}, [[isFormula(value) ? this._graph.mapFormulaToNative(value) : value]]);
+		const idx = addressToIndex(this._sheet, cell);
+		if (value === void 0 || value === null) Obj.update(this._sheet, (obj) => {
+			delete obj.cells[idx];
+		});
+		else {
+			if (isFormula(value)) value = this._graph.mapFunctionBindingToId(mapFormulaRefsToIndices(this._sheet, value));
+			Obj.update(this._sheet, (obj) => {
+				obj.cells[idx] = { value };
+			});
+		}
+	}
+	/**
+	* Sets values from a simple map.
+	*/
+	setValues(values) {
+		Object.entries(values).forEach(([key, { value }]) => {
+			this.setValue(addressFromA1Notation(key), value);
+		});
+	}
+	/**
+	* Iterate range.
+	*/
+	_iterRange(range, cb) {
+		const to = range.to ?? range.from;
+		const rowRange = [Math.min(range.from.row, to.row), Math.max(range.from.row, to.row)];
+		const columnRange = [Math.min(range.from.col, to.col), Math.max(range.from.col, to.col)];
+		const rows = [];
+		for (let row = rowRange[0]; row <= rowRange[1]; row++) {
+			const rowCells = [];
+			for (let column = columnRange[0]; column <= columnRange[1]; column++) {
+				const value = cb({
+					row,
+					col: column
+				});
+				if (value !== void 0) rowCells.push(value);
+			}
+			rows.push(rowCells);
+		}
+		return rows;
+	}
+	_deleteIndices(indices, i, n) {
+		throw new Error("Not implemented");
+	}
+	_moveIndices(indices, i, j, n) {
+		throw new Error("Not implemented");
+	}
+	/**
+	* Map from indices to A1 notation.
+	*/
+	mapFormulaIndicesToRefs(formula) {
+		assertArgument(isFormula(formula), "formula");
+		return formula.replace(/([a-zA-Z0-9]+)@([a-zA-Z0-9]+)/g, (idx) => {
+			return addressToA1Notation(addressFromIndex(this._sheet, idx));
+		});
+	}
+	/**
+	* https://hyperformula.handsontable.com/guide/date-and-time-handling.html#example
+	* https://hyperformula.handsontable.com/api/interfaces/configparams.html#nulldate
+	* NOTE: TODAY() is number of FULL days since nullDate. It will typically be -1 days from NOW().
+	*/
+	toLocalDate(num) {
+		const { year, month, day, hours, minutes, seconds } = this.toDateTime(num);
+		return new Date(year, month - 1, day, hours, minutes, seconds);
+	}
+	toDateTime(num) {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 513,
+			S: this,
+			A: ["this._node", ""]
+		});
+		return this._node.graph.hf.numberToDateTime(num);
+	}
+	toDate(num) {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 518,
+			S: this,
+			A: ["this._node", ""]
+		});
+		return this._node.graph.hf.numberToDate(num);
+	}
+	toTime(num) {
+		invariant(this._node, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 523,
+			S: this,
+			A: ["this._node", ""]
+		});
+		return this._node.graph.hf.numberToTime(num);
+	}
+};
+//#endregion
+//#region src/model/useSheetModel.ts
+var useSheetModel = (graph, sheet, { readonly } = {}) => {
+	const [model, setModel] = useState();
+	useEffect(() => {
+		if (!graph || !sheet) return;
+		let model;
+		const t = setTimeout(async () => {
+			model = new SheetModel(graph, sheet, { readonly });
+			await model.open();
+			setModel(model);
+		});
+		return () => {
+			clearTimeout(t);
+			model?.close();
+		};
+	}, [
+		graph,
+		sheet,
+		readonly
+	]);
+	return model;
+};
+//#endregion
+//#region src/components/SheetRoot/SheetRoot.tsx
+var SheetRoot = ({ children, graph, sheet, attendableId, readonly, ignoreAttention, onInfo }) => {
+	const model = useSheetModel(graph, sheet, { readonly });
+	if (!model) return null;
+	return /* @__PURE__ */ jsx(Grid.Root, {
+		id: attendableId,
+		children: /* @__PURE__ */ jsx(SheetProviderImpl, {
+			model,
+			attendableId,
+			onInfo,
+			ignoreAttention,
+			children
+		})
+	});
+};
+var SheetProviderImpl = ({ __gridScope, children, attendableId, ignoreAttention, model, onInfo }) => {
+	const { id, editing, setEditing } = useGridContext("SheetProvider", __gridScope);
+	const [cursor, setCursorInternal] = useState();
+	const [range, setRangeInternal] = useState();
+	const [cursorFallbackRange, setCursorFallbackRange] = useState();
+	const [activeRefs, setActiveRefs] = useState("");
+	const setCursor = useCallback((nextCursor) => {
+		setCursorInternal(nextCursor);
+		setCursorFallbackRange(range?.to ? range : nextCursor ? {
+			from: nextCursor,
+			to: nextCursor
+		} : void 0);
+	}, [range]);
+	const setRange = useCallback((nextRange) => {
+		setRangeInternal(nextRange);
+		setCursorFallbackRange(nextRange?.to ? nextRange : cursor ? {
+			from: cursor,
+			to: cursor
+		} : void 0);
+	}, [cursor]);
+	return /* @__PURE__ */ jsx(SheetContext.Provider, {
+		value: {
+			id,
+			attendableId,
+			model,
+			editing,
+			setEditing,
+			cursor,
+			setCursor,
+			range,
+			setRange,
+			cursorFallbackRange,
+			activeRefs,
+			setActiveRefs,
+			ignoreAttention,
+			onInfo
+		},
+		children
+	});
+};
+//#endregion
+//#region src/components/SheetContent/util.ts
+var createDxGridColumns = (model) => {
+	return model.sheet.columns.reduce((acc, columnId, numericIndex) => {
+		if (model.sheet.columnMeta[columnId] && model.sheet.columnMeta[columnId].size) acc.grid[numericIndex] = {
+			size: model.sheet.columnMeta[columnId].size,
+			resizeable: true
+		};
+		return acc;
+	}, { grid: {} });
+};
+var createDxGridRows = (model) => {
+	return model.sheet.rows.reduce((acc, rowId, numericIndex) => {
+		if (model.sheet.rowMeta[rowId] && model.sheet.rowMeta[rowId].size) acc.grid[numericIndex] = {
+			size: model.sheet.rowMeta[rowId].size,
+			resizeable: true
+		};
+		return acc;
+	}, { grid: {} });
+};
+var projectCellProps = (model, col, row) => {
+	const address = {
+		col,
+		row
+	};
+	const rawValue = model.getValue(address);
+	const ranges = model.sheet.ranges?.filter(({ range }) => inRange(rangeFromIndex(model.sheet, range), address));
+	const threadRefs = void 0;
+	const description = model.getValueDescription(address);
+	const type = description?.type;
+	const format = description?.format;
+	const classNames = ranges?.map(cellClassNameForRange).reverse();
+	return {
+		value: parseValue({
+			type,
+			format,
+			value: rawValue
+		}),
+		className: mx(cellClassesForFieldType({
+			type,
+			format
+		}), threadRefs, classNames),
+		dataRefs: threadRefs
+	};
+};
+var gridCellGetter = (model) => {
+	const cachedGridCells = {};
+	return (nextBounds) => {
+		[...Array(nextBounds.end.col - nextBounds.start.col)].forEach((_, c0) => {
+			return [...Array(nextBounds.end.row - nextBounds.start.row)].forEach((_, r0) => {
+				const col = nextBounds.start.col + c0;
+				const row = nextBounds.start.row + r0;
+				cachedGridCells[`${col},${row}`] = projectCellProps(model, col, row);
+			});
+		});
+		return cachedGridCells;
+	};
+};
+var rowLabelCell = (row) => ({
+	value: rowToA1Notation(row),
+	className: "bg-axis-surface! text-axis-text text-end pe-1",
+	resizeHandle: "row"
+});
+var colLabelCell = (col) => ({
+	value: colToA1Notation(col),
+	className: "bg-axis-surface! text-axis-text",
+	resizeHandle: "col"
+});
+var cellGetter = (model) => {
+	const getGridCells = gridCellGetter(model);
+	return (nextBounds, plane) => {
+		switch (plane) {
+			case "grid": return getGridCells(nextBounds);
+			case "fixedStartStart": return { "0,0": { className: "bg-axis-surface!" } };
+			case "frozenColsStart": return [...Array(nextBounds.end.row - nextBounds.start.row)].reduce((acc, _, r0) => {
+				const r = nextBounds.start.row + r0;
+				acc[`0,${r}`] = rowLabelCell(r);
+				return acc;
+			}, {});
+			case "frozenRowsStart": return [...Array(nextBounds.end.col - nextBounds.start.col)].reduce((acc, _, c0) => {
+				const c = nextBounds.start.col + c0;
+				acc[`${c},0`] = colLabelCell(c);
+				return acc;
+			}, {});
+			default: return {};
+		}
+	};
+};
+var useSheetModelDxGridProps = (dxGrid, model) => {
+	const [columns, setColumns] = useState(createDxGridColumns(model));
+	const [rows, setRows] = useState(createDxGridRows(model));
+	useEffect(() => {
+		const cellsAccessor = Doc.createAccessor(model.sheet, ["cells"]);
+		if (dxGrid) dxGrid.getCells = cellGetter(model);
+		const handleCellsUpdate = () => {
+			dxGrid?.requestUpdate("initialCells");
+		};
+		cellsAccessor.handle.addListener("change", handleCellsUpdate);
+		const unsubscribe = model.graph.update.on(handleCellsUpdate);
+		return () => {
+			cellsAccessor.handle.removeListener("change", handleCellsUpdate);
+			unsubscribe();
+		};
+	}, [model, dxGrid]);
+	useEffect(() => {
+		const columnMetaAccessor = Doc.createAccessor(model.sheet, ["columnMeta"]);
+		const rowMetaAccessor = Doc.createAccessor(model.sheet, ["rowMeta"]);
+		const handleColumnMetaUpdate = () => {
+			setColumns(createDxGridColumns(model));
+		};
+		const handleRowMetaUpdate = () => {
+			setRows(createDxGridRows(model));
+		};
+		columnMetaAccessor.handle.addListener("change", handleColumnMetaUpdate);
+		rowMetaAccessor.handle.addListener("change", handleRowMetaUpdate);
+		return () => {
+			columnMetaAccessor.handle.removeListener("change", handleColumnMetaUpdate);
+			rowMetaAccessor.handle.removeListener("change", handleRowMetaUpdate);
+		};
+	}, [model, dxGrid]);
+	return {
+		columns,
+		rows
+	};
+};
+//#endregion
+//#region src/components/SheetContent/SheetContent.tsx
+var inertPosition = {
+	plane: "grid",
+	col: 0,
+	row: 0
+};
+var initialCells = {
+	grid: {},
+	frozenColsStart: [...Array(64)].reduce((acc, _, i) => {
+		acc[`0,${i}`] = rowLabelCell(i);
+		return acc;
+	}, {}),
+	frozenRowsStart: [...Array(12)].reduce((acc, _, i) => {
+		acc[`${i},0`] = colLabelCell(i);
+		return acc;
+	}, {})
+};
+var frozen = {
+	frozenColsStart: 1,
+	frozenRowsStart: 1
+};
+var sheetColDefault = {
+	frozenColsStart: {
+		size: 48,
+		readonly: true,
+		focusUnfurl: false
+	},
+	grid: {
+		size: defaultColSize,
+		resizeable: true
+	}
+};
+var sheetRowDefault = {
+	frozenRowsStart: {
+		size: defaultRowSize,
+		readonly: true,
+		focusUnfurl: false
+	},
+	grid: {
+		size: defaultRowSize,
+		resizeable: true
+	}
+};
+var SheetContent = composable((props, forwardedRef) => {
+	const { t } = useTranslation(meta.profile.key);
+	const { id, attendableId, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs, setActiveRefs, ignoreAttention } = useSheetContext();
+	const [dxGrid, setDxGrid] = useState(null);
+	const [extraplanarFocus, setExtraplanarFocus] = useState(null);
+	const { invokePromise } = useOperationInvoker();
+	const rangeController = useRef(null);
+	const { hasAttention } = useAttention(id);
+	const handleFocus = useCallback((event) => {
+		if (!editing) {
+			const cell = closestCell(event.target);
+			if (cell) if (cell.plane === "grid") {
+				setCursor({
+					col: cell.col,
+					row: cell.row
+				});
+				setExtraplanarFocus(null);
+			} else setExtraplanarFocus(cell);
+			else setExtraplanarFocus(null);
+		}
+	}, [editing]);
+	const handleClose = useCallback((_value, event) => {
+		if (event) {
+			const { key, shift } = event;
+			const axis = [
+				"Enter",
+				"ArrowUp",
+				"ArrowDown"
+			].includes(key) ? "row" : [
+				"Tab",
+				"ArrowLeft",
+				"ArrowRight"
+			].includes(key) ? "col" : void 0;
+			const delta = key.startsWith("Arrow") ? ["ArrowUp", "ArrowLeft"].includes(key) ? -1 : 1 : shift ? -1 : 1;
+			dxGrid?.refocus(axis, delta);
+		}
+	}, [
+		model,
+		editing,
+		dxGrid
+	]);
+	const handleBlur = useCallback((value) => {
+		if (value !== void 0) model.setValue(parseCellIndex(editing.index), value);
+	}, [model, editing]);
+	const handleAxisResize = useCallback(({ axis, size, index: numericIndex }) => {
+		Obj.update(model.sheet, (sheet) => {
+			if (axis === "row") {
+				const rowId = sheet.rows[parseInt(numericIndex)];
+				sheet.rowMeta[rowId] ??= {};
+				sheet.rowMeta[rowId].size = size;
+			} else {
+				const columnId = sheet.columns[parseInt(numericIndex)];
+				sheet.columnMeta[columnId] ??= {};
+				sheet.columnMeta[columnId].size = size;
+			}
+		});
+	}, [model]);
+	const handleSelect = useCallback(({ minCol, maxCol, minRow, maxRow }) => {
+		const range = { from: {
+			col: minCol,
+			row: minRow
+		} };
+		if (minCol !== maxCol || minRow !== maxRow) range.to = {
+			col: maxCol,
+			row: maxRow
+		};
+		if (editing) rangeController.current?.setRange(rangeToA1Notation(range));
+		else setRange(range.to ? range : void 0);
+	}, [editing]);
+	const handleWheel = useCallback((event) => {
+		if (!ignoreAttention && !hasAttention) event.stopPropagation();
+	}, [hasAttention, ignoreAttention]);
+	const selectEntireAxis = useCallback((pos) => {
+		switch (pos.plane) {
+			case "frozenRowsStart": return dxGrid?.setSelection({
+				start: {
+					col: pos.col,
+					row: 0,
+					plane: "grid"
+				},
+				end: {
+					col: pos.col,
+					row: model.sheet.rows.length - 1,
+					plane: "grid"
+				}
+			});
+			case "frozenColsStart": return dxGrid?.setSelection({
+				start: {
+					row: pos.row,
+					col: 0,
+					plane: "grid"
+				},
+				end: {
+					row: pos.row,
+					col: model.sheet.columns.length - 1,
+					plane: "grid"
+				}
+			});
+		}
+	}, [dxGrid, model.sheet]);
+	const handleClick = useCallback((event) => {
+		const cell = closestCell(event.target);
+		if (cell) selectEntireAxis(cell);
+	}, [selectEntireAxis]);
+	const handleKeyDown = useCallback((event) => {
+		switch (event.key) {
+			case "Backspace":
+			case "Delete":
+				event.preventDefault();
+				return cursorFallbackRange && model.clear(cursorFallbackRange);
+			case "Enter":
+			case "Space": if (dxGrid && extraplanarFocus) switch (extraplanarFocus.plane) {
+				case "frozenRowsStart":
+				case "frozenColsStart":
+					event.preventDefault();
+					return selectEntireAxis(extraplanarFocus);
+			}
+		}
+		if (event.metaKey || event.ctrlKey) switch (event.key) {
+			case "x":
+			case "X":
+				event.preventDefault();
+				return cursorFallbackRange && model.cut(cursorFallbackRange);
+			case "c":
+			case "C":
+				event.preventDefault();
+				return cursorFallbackRange && model.copy(cursorFallbackRange);
+			case "v":
+			case "V":
+				event.preventDefault();
+				return cursor && model.paste(cursor);
+			case "z":
+				event.preventDefault();
+				return event.shiftKey ? model.redo() : model.undo();
+			case "Z":
+			case "y":
+				event.preventDefault();
+				return model.redo();
+		}
+	}, [
+		cursorFallbackRange,
+		model,
+		cursor,
+		extraplanarFocus,
+		selectEntireAxis
+	]);
+	const contextMenuAnchorRef = useRef(null);
+	const [contextMenuOpen, setContextMenuOpen] = useState(null);
+	const contextMenuAxis = contextMenuOpen?.plane.startsWith("frozenRows") ? "col" : "row";
+	const handleContextMenu = useCallback((event) => {
+		const cell = closestCell(event.target);
+		if (cell && cell.plane.startsWith("frozen")) {
+			event.preventDefault();
+			contextMenuAnchorRef.current = event.target;
+			setContextMenuOpen(cell);
+		}
+	}, []);
+	const handleAxisMenuAction = useCallback((operation) => {
+		switch (operation) {
+			case "insert-before":
+			case "insert-after": return invokePromise(SheetOperation.InsertAxis, {
+				model,
+				axis: contextMenuAxis,
+				index: contextMenuOpen[contextMenuAxis] + (operation === "insert-before" ? 0 : 1)
+			});
+			case "drop": return invokePromise(SheetOperation.DropAxis, {
+				model,
+				axis: contextMenuAxis,
+				axisIndex: model.sheet[contextMenuAxis === "row" ? "rows" : "columns"][contextMenuOpen[contextMenuAxis]]
+			});
+		}
+	}, [
+		contextMenuAxis,
+		contextMenuOpen,
+		model,
+		invokePromise
+	]);
+	const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
+	const extensions = useMemo(() => [
+		editorKeys({
+			onClose: handleClose,
+			...editing?.initialContent && { onNav: handleClose }
+		}),
+		sheetExtension({ functions: model.graph.getFunctions() }),
+		rangeExtension({
+			onInit: (fn) => rangeController.current = fn,
+			onStateChange: (state) => {
+				if (dxGrid) dxGrid.mode = typeof state.activeRange === "undefined" ? "edit" : "edit-select";
+			}
+		})
+	], [
+		model,
+		handleClose,
+		editing
+	]);
+	const getCellContent = useCallback((index) => {
+		return model.getCellText(parseCellIndex(index));
+	}, [model]);
+	const [gridInstances] = useCapabilities(SheetCapabilities.GridInstances);
+	useEffect(() => {
+		if (dxGrid && gridInstances) {
+			gridInstances.register(attendableId, dxGrid, setActiveRefs);
+			return () => gridInstances.unregister(attendableId);
+		}
+	}, [
+		dxGrid,
+		gridInstances,
+		attendableId,
+		setActiveRefs
+	]);
+	useSelectThreadOnCellFocus();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardedRef,
+		...composableProps(props, { classNames: "relative min-h-0" }),
+		children: [
+			/* @__PURE__ */ jsx(GridCellEditor, {
+				getCellContent,
+				extensions,
+				onBlur: handleBlur
+			}),
+			/* @__PURE__ */ jsx(Grid.Content, {
+				className: "[--dx-grid-base:var(--base-surface)] [&_.dx-grid]:absolute [&_.dx-grid]:inset-0",
+				initialCells,
+				limitColumns: DEFAULT_COLS,
+				limitRows: DEFAULT_ROWS,
+				columns,
+				rows,
+				columnDefault: sheetColDefault,
+				rowDefault: sheetRowDefault,
+				activeRefs,
+				frozen,
+				overscroll: "trap",
+				onAxisResize: handleAxisResize,
+				onSelect: handleSelect,
+				onFocus: handleFocus,
+				onWheelCapture: handleWheel,
+				onKeyDown: handleKeyDown,
+				onContextMenu: handleContextMenu,
+				onClick: handleClick,
+				ref: setDxGrid
+			}),
+			/* @__PURE__ */ jsxs(DropdownMenu.Root, {
+				modal: false,
+				open: !!contextMenuOpen,
+				onOpenChange: (nextOpen) => setContextMenuOpen(nextOpen ? inertPosition : null),
+				children: [/* @__PURE__ */ jsx(DropdownMenu.VirtualTrigger, { virtualRef: contextMenuAnchorRef }), /* @__PURE__ */ jsxs(DropdownMenu.Content, {
+					side: contextMenuAxis === "col" ? "bottom" : "right",
+					sideOffset: 4,
+					collisionPadding: 8,
+					children: [/* @__PURE__ */ jsxs(DropdownMenu.Viewport, { children: [
+						/* @__PURE__ */ jsxs(DropdownMenu.Item, {
+							onClick: () => handleAxisMenuAction("insert-before"),
+							"data-testid": `grid.${contextMenuAxis}.insert-before`,
+							children: [/* @__PURE__ */ jsx(Icon, { icon: contextMenuAxis === "col" ? "ph--columns-plus-left--regular" : "ph--rows-plus-top--regular" }), /* @__PURE__ */ jsx("span", { children: t(`add-${contextMenuAxis}-before.label`) })]
+						}),
+						/* @__PURE__ */ jsxs(DropdownMenu.Item, {
+							onClick: () => handleAxisMenuAction("insert-after"),
+							"data-testid": `grid.${contextMenuAxis}.insert-after`,
+							children: [/* @__PURE__ */ jsx(Icon, { icon: contextMenuAxis === "col" ? "ph--columns-plus-right--regular" : "ph--rows-plus-bottom--regular" }), /* @__PURE__ */ jsx("span", { children: t(`add-${contextMenuAxis}-after.label`) })]
+						}),
+						/* @__PURE__ */ jsxs(DropdownMenu.Item, {
+							onClick: () => handleAxisMenuAction("drop"),
+							"data-testid": `grid.${contextMenuAxis}.drop`,
+							children: [/* @__PURE__ */ jsx(Icon, { icon: "ph--backspace--regular" }), /* @__PURE__ */ jsx("span", { children: t(`delete-${contextMenuAxis}.label`) })]
+						})
+					] }), /* @__PURE__ */ jsx(DropdownMenu.Arrow, {})]
+				})]
+			})
+		]
+	});
+});
+//#endregion
+//#region src/components/SheetStatusbar/SheetStatusbar.tsx
+var SheetStatusbar = composable((props, forwardedRef) => {
+	const { className, ...rest } = composableProps(props);
+	const { model, cursor, range } = useSheetContext();
+	let value;
+	let formula = false;
+	if (cursor) {
+		value = model.getCellValue(cursor);
+		if (isFormula(value)) {
+			value = model.graph.mapFunctionBindingFromId(mapFormulaIndicesToRefs(model.sheet, value));
+			formula = true;
+		} else if (value != null) value = String(value);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardedRef,
+		...rest,
+		className: mx("flex shrink-0 justify-between items-center px-4 py-1 text-sm dx-toolbar-surface border-y !border-subdued-separator", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-4 items-center",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex w-16 items-center font-mono",
+				children: range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2 items-center",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph--function--regular",
+					classNames: ["text-green-text", formula ? "visible" : "invisible"]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-mono",
+					children: value
+				})]
+			})]
+		})
+	});
+});
+//#endregion
+//#region src/components/SheetToolbar/align.ts
+var aligns = {
+	start: "ph--text-align-left--regular",
+	center: "ph--text-align-center--regular",
+	end: "ph--text-align-right--regular"
+};
+var useAlignState = (stateAtom) => {
+	const registry = useContext(RegistryContext);
+	const { cursor, model } = useSheetContext();
+	useEffect(() => {
+		const alignValue = cursor ? model.sheet.ranges?.findLast(({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor))?.value : void 0;
+		const prev = registry.get(stateAtom);
+		registry.set(stateAtom, {
+			...prev,
+			[alignKey]: alignValue
+		});
+	}, [
+		cursor,
+		model.sheet,
+		registry,
+		stateAtom
+	]);
+};
+var createAlignGroupAction = (value) => createMenuItemGroup("align", {
+	label: ["align.label", { ns: meta.profile.key }],
+	variant: "toggleGroup",
+	selectCardinality: "single",
+	value: `${alignKey}--${value}`
+});
+var createAlignActions = ({ model, state, stateAtom, registry, cursorFallbackRange }) => Object.entries(aligns).map(([alignValue, icon]) => {
+	return createMenuAction(`${alignKey}--${alignValue}`, () => {
+		if (!cursorFallbackRange) return;
+		const index = model.sheet.ranges?.findIndex((range) => range.key === alignKey && inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from)) ?? -1;
+		const nextRangeEntity = {
+			range: rangeToIndex(model.sheet, cursorFallbackRange),
+			key: alignKey,
+			value: alignValue
+		};
+		const currentState = registry.get(stateAtom);
+		if (index < 0) {
+			Obj.update(model.sheet, (obj) => {
+				obj.ranges?.push(nextRangeEntity);
+			});
+			registry.set(stateAtom, {
+				...currentState,
+				[alignKey]: nextRangeEntity.value
+			});
+		} else if (model.sheet.ranges[index].value === nextRangeEntity.value) {
+			Obj.update(model.sheet, (obj) => {
+				obj.ranges?.splice(index, 1);
+			});
+			registry.set(stateAtom, {
+				...currentState,
+				[alignKey]: void 0
+			});
+		} else {
+			Obj.update(model.sheet, (obj) => {
+				obj.ranges?.splice(index, 1, nextRangeEntity);
+			});
+			registry.set(stateAtom, {
+				...currentState,
+				[alignKey]: nextRangeEntity.value
+			});
+		}
+	}, {
+		key: alignKey,
+		value: alignValue,
+		checked: state[alignKey] === alignValue,
+		label: [`range-value.${alignValue}.label`, { ns: meta.profile.key }],
+		icon,
+		testId: `grid.toolbar.${alignKey}.${alignValue}`
+	});
+});
+var createAlign = (context) => {
+	const alignGroup = createAlignGroupAction(context.state[alignKey]);
+	const alignActions = createAlignActions(context);
+	return {
+		nodes: [alignGroup, ...alignActions],
+		edges: [{
+			source: "root",
+			target: "align",
+			relation: "child"
+		}, ...alignActions.map(({ id }) => ({
+			source: alignGroup.id,
+			target: id,
+			relation: "child"
+		}))]
+	};
+};
+//#endregion
+//#region src/components/SheetToolbar/style.ts
+var styles = {
+	highlight: "ph--highlighter--regular",
+	softwrap: "ph--paragraph--regular"
+};
+var useStyleState = (stateAtom) => {
+	const registry = useContext(RegistryContext);
+	const { cursorFallbackRange, model } = useSheetContext();
+	useEffect(() => {
+		let highlight = false;
+		let softwrap = false;
+		if (cursorFallbackRange && model.sheet.ranges) model.sheet.ranges.filter(({ range, key }) => key === "style" && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from)).forEach(({ value }) => {
+			if (value === "highlight") highlight = true;
+			if (value === "softwrap") softwrap = true;
+		});
+		const prev = registry.get(stateAtom);
+		registry.set(stateAtom, {
+			...prev,
+			highlight,
+			softwrap
+		});
+	}, [
+		cursorFallbackRange,
+		model.sheet,
+		registry,
+		stateAtom
+	]);
+};
+var createStyleGroup = (state) => {
+	return createMenuItemGroup("style", {
+		variant: "toggleGroup",
+		selectCardinality: "multiple",
+		value: Object.keys(styles).filter((key) => !!state[key]).map((styleValue) => `style--${styleValue}`)
+	});
+};
+var createStyleActions = ({ model, state, stateAtom, registry, cursorFallbackRange }) => Object.entries(styles).map(([styleValue, icon]) => {
+	return createMenuAction(`style--${styleValue}`, () => {
+		if (!cursorFallbackRange) return;
+		const index = model.sheet.ranges?.findIndex((range) => range.key === "style" && inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from)) ?? -1;
+		const nextRangeEntity = {
+			range: rangeToIndex(model.sheet, cursorFallbackRange),
+			key: "style",
+			value: styleValue
+		};
+		const currentState = registry.get(stateAtom);
+		if (model.sheet.ranges.filter(({ range, key: rangeKey }) => rangeKey === "style" && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from)).some(({ value: rangeValue }) => rangeValue === styleValue)) {
+			if (index >= 0) Obj.update(model.sheet, (obj) => {
+				obj.ranges?.splice(index, 1);
+			});
+			registry.set(stateAtom, {
+				...currentState,
+				[nextRangeEntity.value]: false
+			});
+		} else {
+			Obj.update(model.sheet, (obj) => {
+				obj.ranges?.push(nextRangeEntity);
+			});
+			registry.set(stateAtom, {
+				...currentState,
+				[nextRangeEntity.value]: true
+			});
+		}
+	}, {
+		key: "style",
+		value: styleValue,
+		icon,
+		label: [`range-value.${styleValue}.label`, { ns: meta.profile.key }],
+		checked: !!state[styleValue]
+	});
+});
+var createStyle = (context) => {
+	const styleGroupAction = createStyleGroup(context.state);
+	const styleActions = createStyleActions(context);
+	return {
+		nodes: [styleGroupAction, ...styleActions],
+		edges: [{
+			source: "root",
+			target: "style",
+			relation: "child"
+		}, ...styleActions.map(({ id }) => ({
+			source: styleGroupAction.id,
+			target: id,
+			relation: "child"
+		}))]
+	};
+};
+//#endregion
+//#region src/components/SheetToolbar/useToolbarState.ts
+/**
+* Creates a reactive toolbar state Atom.
+*/
+var useToolbarState = (initialState = {}) => {
+	return useMemo(() => Atom.make(initialState).pipe(Atom.keepAlive), []);
+};
+//#endregion
+//#region src/components/SheetToolbar/SheetToolbar.tsx
+var createToolbarActions = ({ model, stateAtom, registry, cursorFallbackRange, customActions }) => {
+	return Atom.make((get) => {
+		const context = {
+			model,
+			state: get(stateAtom),
+			stateAtom,
+			registry,
+			cursorFallbackRange
+		};
+		const align = createAlign(context);
+		const style = createStyle(context);
+		const gap = createGapSeparator();
+		const graph = {
+			nodes: [
+				...align.nodes,
+				...style.nodes,
+				...gap.nodes
+			],
+			edges: [
+				...align.edges,
+				...style.edges,
+				...gap.edges
+			]
+		};
+		if (customActions) {
+			const custom = get(customActions);
+			graph.nodes.push(...custom.nodes);
+			graph.edges.push(...custom.edges);
+		}
+		return graph;
+	});
+};
+var SheetToolbar = composable((props, forwardedRef) => {
+	const { attendableId, model, cursorFallbackRange } = useSheetContext();
+	const stateAtom = useToolbarState({});
+	const registry = useContext(RegistryContext);
+	useAlignState(stateAtom);
+	useStyleState(stateAtom);
+	const { graph } = useAppGraph();
+	const customActions = useMemo(() => {
+		return Atom.make((get) => graphActions(graph, get, attendableId, { filter: isToolbarAction }));
+	}, [graph, attendableId]);
+	const menuActions = useMenuActions(useMemo(() => createToolbarActions({
+		model,
+		stateAtom,
+		registry,
+		cursorFallbackRange,
+		customActions
+	}), [
+		model,
+		stateAtom,
+		registry,
+		cursorFallbackRange,
+		customActions
+	]));
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		...menuActions,
+		attendableId,
+		children: /* @__PURE__ */ jsx(Menu.Toolbar, {
+			...composableProps(props),
+			ref: forwardedRef
+		})
+	});
+});
+SheetToolbar.displayName = "SheetToolbar";
+//#endregion
+//#region src/components/Sheet/Sheet.tsx
+var Sheet = {
+	Root: SheetRoot,
+	Toolbar: SheetToolbar,
+	Content: SheetContent,
+	Statusbar: SheetStatusbar
+};
+//#endregion
+export { ComputeGraphContextProvider, Sheet, useComputeGraph, useSheetContext };
+
+//# sourceMappingURL=components.mjs.map