@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/splitter/splitter.presentation.js

@@ -0,0 +1,443 @@
+import { defaultSizes, handleId, isInteractive as isInteractive$1, panelCollapsed, validateSizes } from "./splitter.state.js";
+import { splitter as splitter$1 } from "./splitter.machine.js";
+import { ariaControls, ariaOrientation, defineComponent, focuser, isComposing, sliderThumb } from "@spinjs/runtime";
+// src/splitter/splitter.presentation.ts
+const sameSizes = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
+/** The sends that end the gesture: release, keyboard, and the programmatic
+* writes. RESET_SIZE resizes without ending — it is not in the set. */
+const COMMIT_TYPES = /* @__PURE__ */ new Set([
+	"POINTER_UP",
+	"KEYBOARD_MOVE",
+	"ENTER",
+	"SET_SIZE",
+	"COLLAPSE_PANEL",
+	"EXPAND_PANEL",
+	"RESIZE_PANEL"
+]);
+const itemsOf = (panels) => {
+	const built = [];
+	panels.forEach((panel, index) => {
+		built.push({
+			type: "panel",
+			id: panel.id,
+			beforeId: "",
+			afterId: ""
+		});
+		const next = panels[index + 1];
+		if (next !== void 0) built.push({
+			type: "handle",
+			id: handleId(panel.id, next.id),
+			beforeId: panel.id,
+			afterId: next.id
+		});
+	});
+	return built;
+};
+/** A client point as a group percent, measured off the root node.
+* Returns null when the root is not laid out yet. */
+const groupPercent = (scope, clientX, clientY) => {
+	const rect = scope.measure("");
+	if (rect === null) return null;
+	const horizontal = scope.context.orientation === "horizontal";
+	const span = horizontal ? rect.width : rect.height;
+	if (span <= 0) return null;
+	return (horizontal ? clientX - rect.left : clientY - rect.top) / span * 100;
+};
+/** Whether the handle holds the focus: the press focused it, so a drag ends
+* focused and the keyboard keeps working on the handle it moved. */
+const handleFocused = (scope, handle) => {
+	return scope.root().ownerDocument?.activeElement?.id === scope.id("handle", handle);
+};
+const handleHandlersByBridge = /* @__PURE__ */ new WeakMap();
+const handleDragByBridge = /* @__PURE__ */ new WeakMap();
+const handlersFor = (scope, handle) => {
+	let byId = handleHandlersByBridge.get(scope.id);
+	if (byId === void 0) {
+		byId = /* @__PURE__ */ new Map();
+		handleHandlersByBridge.set(scope.id, byId);
+	}
+	const hit = byId.get(handle);
+	if (hit !== void 0) return hit;
+	const made = {
+		onPointermove: (event) => {
+			if (scope.state === "idle") {
+				if (event.pointerType !== "touch") scope.send({
+					type: "POINTER_OVER",
+					id: handle
+				});
+				return;
+			}
+		},
+		onPointerleave: () => {
+			if (scope.state === "hover") scope.send({ type: "POINTER_LEAVE" });
+		},
+		onBlur: () => {
+			scope.send({ type: "BLUR" });
+		},
+		onFocus: () => {
+			if (!isInteractive$1(scope.context)) return;
+			scope.send({
+				type: "FOCUS",
+				id: handle
+			});
+		},
+		onKeydown: (event) => {
+			if (event.defaultPrevented) return;
+			const ctx = scope.context;
+			if (!isInteractive$1(ctx)) return;
+			if (isComposing(event)) return;
+			const rawStep = scope.context.keyboardResizeBy;
+			const unit = typeof rawStep === "number" && rawStep > 0 ? Math.trunc(rawStep) : 1;
+			const keyed = (type, delta) => {
+				event.preventDefault();
+				if (type === "ENTER") scope.send({
+					type: "ENTER",
+					id: handle
+				});
+				else scope.send({
+					type: "KEYBOARD_MOVE",
+					id: handle,
+					delta: delta ?? 0
+				});
+				return true;
+			};
+			const horizontalKeys = ctx.orientation === "horizontal";
+			switch (event.key) {
+				case "Enter":
+					keyed("ENTER");
+					break;
+				case "ArrowUp":
+					keyed("KEYBOARD_MOVE", horizontalKeys ? 0 : -unit);
+					break;
+				case "ArrowDown":
+					keyed("KEYBOARD_MOVE", horizontalKeys ? 0 : unit);
+					break;
+				case "ArrowLeft":
+					keyed("KEYBOARD_MOVE", horizontalKeys ? -unit : 0);
+					break;
+				case "ArrowRight":
+					keyed("KEYBOARD_MOVE", horizontalKeys ? unit : 0);
+					break;
+				case "Home":
+					keyed("KEYBOARD_MOVE", -100);
+					break;
+				case "End": keyed("KEYBOARD_MOVE", 100);
+			}
+		}
+	};
+	byId.set(handle, made);
+	return made;
+};
+/** The handle's gesture, driven by the runtime's drag action: the press
+* arms it, the moves report the pointer's place in the group, the release
+* commits. Cached per bridge by handle id, like the DOM handlers. */
+const dragFor = (scope, handle) => {
+	let byId = handleDragByBridge.get(scope.id);
+	if (byId === void 0) {
+		byId = /* @__PURE__ */ new Map();
+		handleDragByBridge.set(scope.id, byId);
+	}
+	const hit = byId.get(handle);
+	if (hit !== void 0) return hit;
+	const focusHandle = focuser(scope.id);
+	const made = {
+		onStart: (press) => {
+			focusHandle("handle", handle);
+			const percent = groupPercent(scope, press.x, press.y);
+			if (percent === null) return;
+			scope.send({
+				type: "POINTER_DOWN",
+				id: handle,
+				startPercent: percent
+			});
+		},
+		onMove: (delta) => {
+			if (scope.state !== "dragging") return;
+			const percent = groupPercent(scope, delta.x, delta.y);
+			if (percent === null) return;
+			scope.send({
+				type: "POINTER_MOVE",
+				percent
+			});
+		},
+		onEnd: () => {
+			if (scope.state !== "dragging") return;
+			scope.send({
+				type: "POINTER_UP",
+				handleFocused: handleFocused(scope, handle)
+			});
+		}
+	};
+	byId.set(handle, made);
+	return made;
+};
+const panelBag = (scope, id) => {
+	const context = scope.context;
+	const index = context.panels.findIndex((panel) => panel.id === id);
+	const size = context.size[index] ?? 0;
+	const collapsed = panelCollapsed(context.panels, context.size, id);
+	return {
+		id: scope.id("panel", id),
+		"data-type": "panel",
+		"data-orientation": context.orientation,
+		"data-dragging": scope.attr(scope.state === "dragging"),
+		"data-id": id,
+		"data-collapsed": scope.attr(collapsed),
+		style: {
+			flexGrow: context.panels.length === 1 ? "1" : size.toPrecision(3),
+			flexShrink: "1",
+			flexBasis: "0",
+			overflow: "hidden",
+			...scope.state === "dragging" ? { pointerEvents: "none" } : {}
+		}
+	};
+};
+const handleBag = (scope, beforeId, afterId) => {
+	const handle = handleId(beforeId, afterId);
+	const context = scope.context;
+	const focused = context.focusedHandle === handle;
+	const dragging = scope.state === "dragging" && context.drag?.handleId === handle;
+	const horizontal = context.orientation === "horizontal";
+	return {
+		id: scope.id("handle", handle),
+		role: "separator",
+		"data-type": "handle",
+		"data-id": handle,
+		tabindex: scope.context.disabled === true ? void 0 : "0",
+		...sliderThumb({
+			now: String(Math.round(context.size[context.panels.findIndex((p) => p.id === beforeId)] ?? 0)),
+			min: "0",
+			max: "100"
+		}),
+		"data-orientation": context.orientation,
+		...ariaOrientation(scope.context.orientation === "horizontal" || scope.context.orientation === "vertical" ? scope.context.orientation : void 0),
+		...ariaControls(scope, { parts: [{
+			part: "panel",
+			slot: beforeId
+		}, {
+			part: "panel",
+			slot: afterId
+		}] }),
+		"data-focus": scope.attr(focused),
+		"data-dragging": scope.attr(dragging),
+		"data-disabled": scope.attr(scope.context.disabled === true),
+		style: {
+			touchAction: "none",
+			userSelect: "none",
+			flex: "0 0 auto",
+			cursor: horizontal ? "col-resize" : "row-resize",
+			...horizontal ? { minHeight: "0" } : { minWidth: "0" }
+		},
+		...handlersFor(scope, handle),
+		"use:drag": {
+			enabled: isInteractive$1(context),
+			stopPropagation: true,
+			cancelOnEscape: false,
+			...dragFor(scope, handle)
+		}
+	};
+};
+const indicatorBag = (scope, beforeId, afterId) => {
+	const handle = handleId(beforeId, afterId);
+	const context = scope.context;
+	const focused = context.focusedHandle === handle;
+	const dragging = scope.state === "dragging" && context.drag?.handleId === handle;
+	return {
+		"data-type": "handle",
+		"data-orientation": context.orientation,
+		"data-focus": scope.attr(focused),
+		"data-dragging": scope.attr(dragging)
+	};
+};
+const splitter = defineComponent({
+	name: "splitter",
+	machine: (props, authored) => splitter$1(props, authored),
+	reconcile: ({ context }) => {
+		let next;
+		try {
+			next = validateSizes(context.panels, defaultSizes(context.panels.length, context.size));
+		} catch {
+			next = defaultSizes(context.panels.length, []);
+		}
+		if (sameSizes(context.size, next)) return false;
+		context.size = next;
+		return true;
+	},
+	commitEvents: [
+		"POINTER_UP",
+		"KEYBOARD_MOVE",
+		"ENTER",
+		"SET_SIZE",
+		"COLLAPSE_PANEL",
+		"EXPAND_PANEL",
+		"RESIZE_PANEL"
+	],
+	parts: { root: { attrs: (scope) => ({ style: {
+		display: "flex",
+		flexDirection: scope.context.orientation === "horizontal" ? "row" : "column",
+		height: "100%",
+		width: "100%",
+		overflow: "hidden"
+	} }) } },
+	slots: {
+		item: {
+			indexes: (context) => itemsOf(context.panels),
+			attrs: (scope) => {
+				const item = scope.slot;
+				return item.type === "panel" ? panelBag(scope, item.id) : handleBag(scope, item.beforeId, item.afterId);
+			}
+		},
+		itemIndicator: {
+			indexes: (context) => itemsOf(context.panels),
+			attrs: (scope) => {
+				const item = scope.slot;
+				if (item.type !== "handle") return {};
+				return indicatorBag(scope, item.beforeId, item.afterId);
+			}
+		},
+		itemLabel: {
+			indexes: (context) => itemsOf(context.panels),
+			attrs: (scope) => {
+				const item = scope.slot;
+				if (typeof item !== "object" || item === null || !("type" in item)) return {};
+				return item.type === "handle" ? { "data-type": "handle" } : {};
+			}
+		},
+		panel: {
+			id: "panel",
+			indexes: (context) => context.panels.map((panel) => ({ id: panel.id })),
+			attrs: (scope) => panelBag(scope, scope.slot.id)
+		},
+		handle: {
+			id: "handle",
+			indexes: (context) => {
+				const panels = context.panels;
+				return panels.slice(0, -1).map((panel, index) => ({
+					beforeId: panel.id,
+					afterId: panels[index + 1]?.id ?? ""
+				}));
+			},
+			attrs: (scope) => handleBag(scope, scope.slot.beforeId, scope.slot.afterId)
+		},
+		handleIndicator: {
+			id: "handle-indicator",
+			indexes: (context) => {
+				const panels = context.panels;
+				return panels.slice(0, -1).map((panel, index) => ({
+					beforeId: panel.id,
+					afterId: panels[index + 1]?.id ?? ""
+				}));
+			},
+			attrs: (scope) => indicatorBag(scope, scope.slot.beforeId, scope.slot.afterId)
+		}
+	},
+	commands: {
+		setSizes: { event: (args) => {
+			const v = args[0];
+			return {
+				type: "SET_SIZE",
+				size: Array.isArray(v) && v.every((x) => typeof x === "number") ? [...v] : []
+			};
+		} },
+		resetSizes: { event: () => ({ type: "RESET_SIZE" }) },
+		collapsePanel: { event: (args) => {
+			const v = args[0];
+			return {
+				type: "COLLAPSE_PANEL",
+				id: typeof v === "string" ? v : ""
+			};
+		} },
+		expandPanel: { event: (args) => {
+			const v = args[0];
+			const id = typeof v === "string" ? v : "";
+			const m = args[1];
+			return {
+				type: "EXPAND_PANEL",
+				id,
+				...typeof m === "number" ? { minSize: m } : {}
+			};
+		} },
+		resizePanel: { event: (args) => {
+			const id = args[0];
+			const size = args[1];
+			return {
+				type: "RESIZE_PANEL",
+				id: typeof id === "string" ? id : "",
+				size: typeof size === "number" ? size : 0
+			};
+		} }
+	},
+	readers: {
+		dragging: { read: (_context, state) => state === "dragging" },
+		orientation: { read: (context) => context.orientation }
+	},
+	methods: {
+		getPanelIds: { call: (context) => context.panels.map((panel) => panel.id) },
+		getItems: { call: (context) => itemsOf(context.panels) },
+		getHandles: { call: (context) => {
+			const panels = context.panels;
+			return panels.slice(0, -1).map((panel, index) => ({
+				beforeId: panel.id,
+				afterId: panels[index + 1]?.id ?? ""
+			}));
+		} },
+		getSizes: { call: (context) => [...context.size] },
+		getPanelSize: { call: (context, _state, args) => {
+			const id = args[0];
+			if (typeof id !== "string") return 0;
+			const index = context.panels.findIndex((panel) => panel.id === id);
+			return context.size[index] ?? 0;
+		} },
+		isPanelCollapsed: { call: (context, _state, args) => {
+			const id = args[0];
+			if (typeof id !== "string") return false;
+			return panelCollapsed(context.panels, context.size, id);
+		} },
+		getHandleState: { call: (context, state, args) => {
+			const slot = args[0];
+			const beforeId = typeof slot === "object" && slot !== null && "beforeId" in slot && typeof slot.beforeId === "string" ? slot.beforeId : "";
+			const afterId = typeof slot === "object" && slot !== null && "afterId" in slot && typeof slot.afterId === "string" ? slot.afterId : "";
+			const handle = handleId(beforeId, afterId);
+			return {
+				focused: context.focusedHandle === handle,
+				dragging: state === "dragging" && context.drag?.handleId === handle
+			};
+		} }
+	},
+	events: {
+		resize: {
+			prop: "onResize",
+			watch: (context) => [...context.size],
+			detail: (watched) => {
+				const handleId = null;
+				return {
+					size: [...watched],
+					handleId
+				};
+			}
+		},
+		"resize-end": {
+			prop: "onResizeEnd",
+			watch: (context) => [...context.size],
+			detail: (watched) => {
+				const handleId = null;
+				return {
+					size: [...watched],
+					handleId
+				};
+			},
+			select: (event, _before, after) => {
+				if (!COMMIT_TYPES.has(event.type)) return null;
+				const ctx = after;
+				if (ctx.size.length === 0) return null;
+				return {
+					size: [...ctx.size],
+					handleId: ctx.drag?.handleId ?? null
+				};
+			}
+		}
+	}
+});
+export { splitter };
+
+//# sourceMappingURL=splitter.presentation.js.map

package/dist/splitter/splitter.state.d.ts

@@ -0,0 +1,48 @@
+export type SplitterState = "idle" | "hover" | "focused" | "dragging";
+export interface SplitterPanel {
+  readonly id: string;
+  readonly minSize?: number | undefined;
+  readonly maxSize?: number | undefined;
+  readonly collapsible?: boolean | undefined;
+  readonly collapsedSize?: number | undefined;
+}
+export interface SplitterDragState {
+  readonly handleId: string;
+  readonly beforeId: string;
+  readonly afterId: string;
+  readonly startPercent: number;
+  readonly startSizes: number[];
+}
+export interface SplitterContext {
+  panels: SplitterPanel[];
+  size: number[];
+  drag: SplitterDragState | null;
+  focusedHandle: string | null;
+  keyboardResizeBy: number;
+  orientation: "horizontal" | "vertical";
+  disabled: boolean;
+  beforeCollapse: Record<string, number>;
+}
+export interface SplitterArgs {
+  panels?: string;
+  size?: string;
+  orientation?: string;
+  disabled?: boolean;
+  defaultDisabled?: boolean;
+}
+export declare function fuzzyEqual(actual: number | undefined, expected: number | undefined): boolean;
+export declare function fuzzySizeEqual(a: readonly number[], b: readonly number[]): boolean;
+export declare function validateSizes(panels: SplitterPanel[], size: readonly number[]): number[];
+type Trigger = "imperative-api" | "keyboard" | "mouse-or-touch";
+export declare function resizeByDelta(panels: SplitterPanel[], delta: number, initialSize: readonly number[], pivotIndices: readonly number[], prevSize: readonly number[], trigger: Trigger): number[];
+export declare function pivotOf(panels: SplitterPanel[], index: number): [number, number];
+export declare function defaultSizes(count: number, spec: readonly number[]): number[];
+export declare function handleId(beforeId: string, afterId: string): string;
+export declare function splitHandle(id: string): [string, string];
+export declare function isInteractive(ctx: SplitterContext): boolean;
+export declare function panelCollapsed(panels: SplitterPanel[], size: readonly number[], id: string): boolean;
+export declare function parsePanels(raw: unknown): SplitterPanel[];
+declare const sizesOf: (raw: unknown) => number[] | null;
+export declare function initial(args: SplitterArgs | undefined, authored: (name: string) => boolean): SplitterContext;
+export { sizesOf };
+//# sourceMappingURL=splitter.state.d.ts.map