@ctrl-ui/react 0.9.5 → 0.9.8

package/dist/knob-contracts/tool-approval-knobs.js

@@ -0,0 +1,32 @@
+//#region src/knob-contracts/tool-approval-knobs.ts
+const toolApprovalKnobs = [
+	"--cui-tool-approval-background",
+	"--cui-tool-approval-foreground",
+	"--cui-tool-approval-border-color",
+	"--cui-tool-approval-border-width",
+	"--cui-tool-approval-radius",
+	"--cui-tool-approval-shadow",
+	"--cui-tool-approval-padding",
+	"--cui-tool-approval-body-background",
+	"--cui-tool-approval-body-border-color",
+	"--cui-tool-approval-body-border-width",
+	"--cui-tool-approval-body-radius",
+	"--cui-tool-approval-body-shadow",
+	"--cui-tool-approval-body-padding",
+	"--cui-tool-approval-body-gap",
+	"--cui-tool-approval-footer-border-color",
+	"--cui-tool-approval-footer-border-width",
+	"--cui-tool-approval-footer-padding",
+	"--cui-tool-approval-footer-gap",
+	"--cui-tool-approval-preview-background",
+	"--cui-tool-approval-preview-border-color",
+	"--cui-tool-approval-preview-border-width",
+	"--cui-tool-approval-preview-radius",
+	"--cui-tool-approval-preview-padding",
+	"--cui-tool-approval-preview-gap",
+	"--cui-tool-approval-label-foreground",
+	"--cui-tool-approval-description-foreground",
+	"--cui-tool-approval-status-foreground"
+];
+//#endregion
+export { toolApprovalKnobs };

package/dist/knob-contracts/tree-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/tree-knobs.d.ts
-export declare const treeKnobs: readonly ["--cui-tree-item-trigger-radius", "--cui-tree-item-trigger-foreground", "--cui-tree-item-trigger-hover-background", "--cui-tree-item-trigger-hover-foreground", "--cui-tree-item-trigger-selected-background", "--cui-tree-item-trigger-selected-foreground", "--cui-tree-item-trigger-font-size", "--cui-tree-item-trigger-selected-font-weight", "--cui-tree-indent-inset", "--cui-tree-item-trigger-background"];
+export declare const treeKnobs: readonly ["--cui-tree-item-trigger-radius", "--cui-tree-item-trigger-foreground", "--cui-tree-item-trigger-hover-background", "--cui-tree-item-trigger-hover-foreground", "--cui-tree-item-trigger-selected-background", "--cui-tree-item-trigger-selected-foreground", "--cui-tree-item-trigger-font-size", "--cui-tree-item-trigger-selected-font-weight", "--cui-tree-indent-inset", "--cui-tree-item-trigger-background", "--cui-tree-guide-background", "--cui-tree-guide-inline-size"];
 export type TreeKnobStyle = Partial<Record<(typeof treeKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/tree-knobs.js

@@ -9,7 +9,9 @@ const treeKnobs = [
 	"--cui-tree-item-trigger-font-size",
 	"--cui-tree-item-trigger-selected-font-weight",
 	"--cui-tree-indent-inset",
-	"--cui-tree-item-trigger-background"
+	"--cui-tree-item-trigger-background",
+	"--cui-tree-guide-background",
+	"--cui-tree-guide-inline-size"
 ];
 //#endregion
 export { treeKnobs };

package/dist/lib/infinite-canvas-camera-store.d.ts

@@ -0,0 +1,65 @@
+import { InfiniteCanvasBounds, InfiniteCanvasPoint, InfiniteCanvasTransform } from "./infinite-canvas-camera.js";
+//#region src/lib/infinite-canvas-camera-store.d.ts
+export type InfiniteCanvasMoveReason = "pointer" | "pinch" | "wheel" | "keyboard" | "control" | "reveal";
+export type InfiniteCanvasMoveDetails = {
+  reason: InfiniteCanvasMoveReason;
+};
+export type InfiniteCanvasMoveOptions = {
+  reason?: InfiniteCanvasMoveReason;
+};
+export type InfiniteCanvasZoomOptions = InfiniteCanvasMoveOptions & {
+  origin?: InfiniteCanvasPoint;
+};
+export type InfiniteCanvasRevealOptions = InfiniteCanvasMoveOptions & {
+  padding?: number;
+  area?: InfiniteCanvasBounds;
+};
+export type InfiniteCanvasFitOptions = InfiniteCanvasRevealOptions & {
+  maxScale?: number;
+};
+export type InfiniteCanvasTransformUpdate = InfiniteCanvasTransform | ((current: InfiniteCanvasTransform) => InfiniteCanvasTransform);
+export type InfiniteCanvasClientPoint = {
+  clientX: number;
+  clientY: number;
+};
+export type InfiniteCanvasCamera = {
+  getTransform: () => InfiniteCanvasTransform;
+  setTransform: (update: InfiniteCanvasTransformUpdate, options?: InfiniteCanvasMoveOptions) => void;
+  zoomBy: (factor: number, options?: InfiniteCanvasZoomOptions) => void;
+  zoomTo: (scale: number, options?: InfiniteCanvasZoomOptions) => void;
+  reset: (options?: InfiniteCanvasMoveOptions) => void;
+  fit: (options?: InfiniteCanvasFitOptions) => void;
+  fitBounds: (bounds: InfiniteCanvasBounds, options?: InfiniteCanvasFitOptions) => void;
+  revealBounds: (bounds: InfiniteCanvasBounds, options?: InfiniteCanvasRevealOptions) => void;
+  toWorldPoint: (point: InfiniteCanvasClientPoint) => InfiniteCanvasPoint;
+  subscribe: (listener: () => void) => () => void;
+};
+export type InfiniteCanvasCameraOptions = {
+  minScale: number;
+  maxScale: number;
+  defaultTransform: InfiniteCanvasTransform;
+  controlled: boolean;
+  onTransformChange?: (transform: InfiniteCanvasTransform, details: InfiniteCanvasMoveDetails) => void;
+};
+export type InfiniteCanvasCameraStore = InfiniteCanvasCamera & {
+  camera: InfiniteCanvasCamera;
+  configure: (options: InfiniteCanvasCameraOptions) => void;
+  attachRoot: (element: HTMLElement | null) => void;
+  attachContent: (element: HTMLElement | null) => void;
+  contentElement: () => HTMLElement | null;
+  getCommittedTransform: () => InfiniteCanvasTransform;
+  limitScale: (scale: number) => number;
+  move: (next: InfiniteCanvasTransform, reason: InfiniteCanvasMoveReason, eased?: boolean) => void;
+  moveNow: (next: InfiniteCanvasTransform, reason: InfiniteCanvasMoveReason) => void;
+  adopt: (next: InfiniteCanvasTransform) => void;
+  revealElement: (element: Element) => void;
+  toLocalPoint: (point: InfiniteCanvasClientPoint) => InfiniteCanvasPoint;
+  dispose: () => void;
+};
+export declare function infiniteCanvasTransformCss({ x, y, scale }: InfiniteCanvasTransform): string;
+export declare function infiniteCanvasGridStyle({ x, y, scale }: InfiniteCanvasTransform): {
+  backgroundPosition: string;
+  backgroundSize: string;
+};
+export declare function createInfiniteCanvasCamera(initial: InfiniteCanvasTransform, initialOptions: InfiniteCanvasCameraOptions): InfiniteCanvasCameraStore;
+//#endregion

package/dist/lib/infinite-canvas-camera-store.js

@@ -0,0 +1,233 @@
+import "./canvas-grid.js";
+import { boundedTransform, clampScale, fitTransform, revealOffset, sameTransform, toWorldPoint, unionBounds, zoomAroundPoint } from "./infinite-canvas-camera.js";
+//#region src/lib/infinite-canvas-camera-store.ts
+const EASED_BY_REASON = {
+	pointer: false,
+	pinch: false,
+	wheel: false,
+	keyboard: true,
+	control: true,
+	reveal: false
+};
+const CAMERA_IDLE_MS = 240;
+const DEFAULT_FIT_PADDING_PX = 48;
+const DEFAULT_FIT_MAX_SCALE = 1;
+const DEFAULT_REVEAL_PADDING_PX = 24;
+const MIN_GRID_SPACING_PX = 12;
+function infiniteCanvasTransformCss({ x, y, scale }) {
+	return `translate(${x}px, ${y}px) scale(${scale})`;
+}
+function infiniteCanvasGridStyle({ x, y, scale }) {
+	let spacing = 24 * scale;
+	while (spacing < MIN_GRID_SPACING_PX) spacing *= 2;
+	return {
+		backgroundPosition: `${x}px ${y}px`,
+		backgroundSize: `${spacing}px ${spacing}px`
+	};
+}
+function createInfiniteCanvasCamera(initial, initialOptions) {
+	let options = initialOptions;
+	let latest = initial;
+	let committed = initial;
+	let pending = null;
+	let lastEmitted = null;
+	let frame = 0;
+	let idleTimer;
+	let root = null;
+	let content = null;
+	const listeners = /* @__PURE__ */ new Set();
+	function writeTransform() {
+		if (content) {
+			content.style.transform = infiniteCanvasTransformCss(committed);
+			content.dataset.scale = String(committed.scale);
+		}
+		if (root) Object.assign(root.style, infiniteCanvasGridStyle(committed));
+	}
+	function markMotion(eased) {
+		const element = root;
+		if (!element) return;
+		element.toggleAttribute("data-moving", true);
+		if (eased) element.setAttribute("data-easing", "true");
+		else element.removeAttribute("data-easing");
+		clearTimeout(idleTimer);
+		idleTimer = setTimeout(() => element.removeAttribute("data-moving"), CAMERA_IDLE_MS);
+	}
+	function commit(next, eased) {
+		committed = next;
+		markMotion(eased);
+		writeTransform();
+		for (const listener of listeners) listener();
+	}
+	function flush() {
+		frame = 0;
+		if (!pending) return;
+		const { reason, eased } = pending;
+		pending = null;
+		lastEmitted = {
+			transform: latest,
+			eased
+		};
+		if (!options.controlled) commit(latest, eased);
+		options.onTransformChange?.(latest, { reason });
+	}
+	function flushNow() {
+		if (!frame) return;
+		cancelAnimationFrame(frame);
+		flush();
+	}
+	function move(next, reason, eased = EASED_BY_REASON[reason]) {
+		const bounded = boundedTransform(next, options.minScale, options.maxScale);
+		if (!bounded || sameTransform(bounded, latest)) return;
+		latest = bounded;
+		pending = {
+			reason,
+			eased
+		};
+		frame ||= requestAnimationFrame(flush);
+	}
+	function viewportArea() {
+		return {
+			x: 0,
+			y: 0,
+			width: root?.clientWidth ?? 0,
+			height: root?.clientHeight ?? 0
+		};
+	}
+	function toLocalPoint(point) {
+		const bounds = root?.getBoundingClientRect();
+		return {
+			x: point.clientX - (bounds?.left ?? 0),
+			y: point.clientY - (bounds?.top ?? 0)
+		};
+	}
+	function contentBounds() {
+		if (!content) return null;
+		const origin = content.getBoundingClientRect();
+		const renderedScale = new DOMMatrixReadOnly(getComputedStyle(content).transform).a || committed.scale;
+		const rects = [];
+		for (const child of content.children) for (const element of [child, ...child.children]) {
+			const bounds = element.getBoundingClientRect();
+			if (bounds.width === 0 && bounds.height === 0) continue;
+			rects.push({
+				x: (bounds.left - origin.left) / renderedScale,
+				y: (bounds.top - origin.top) / renderedScale,
+				width: bounds.width / renderedScale,
+				height: bounds.height / renderedScale
+			});
+		}
+		return unionBounds(rects);
+	}
+	function revealScreenBounds(screenBounds, revealOptions) {
+		const offset = revealOffset(screenBounds, revealOptions.area ?? viewportArea(), revealOptions.padding ?? DEFAULT_REVEAL_PADDING_PX);
+		if (offset.x === 0 && offset.y === 0) return;
+		move({
+			...latest,
+			x: latest.x + offset.x,
+			y: latest.y + offset.y
+		}, revealOptions.reason ?? "control");
+	}
+	function zoomTo(scale, zoomOptions = {}) {
+		const area = viewportArea();
+		const origin = zoomOptions.origin ?? {
+			x: area.width / 2,
+			y: area.height / 2
+		};
+		move(zoomAroundPoint(latest, clampScale(scale, options.minScale, options.maxScale), origin), zoomOptions.reason ?? "control");
+	}
+	function fitBounds(bounds, fitOptions = {}) {
+		const limits = {
+			padding: fitOptions.padding ?? DEFAULT_FIT_PADDING_PX,
+			minScale: options.minScale,
+			maxScale: Math.min(fitOptions.maxScale ?? DEFAULT_FIT_MAX_SCALE, options.maxScale)
+		};
+		move(fitTransform(bounds, fitOptions.area ?? viewportArea(), limits), fitOptions.reason ?? "control");
+	}
+	const camera = {
+		getTransform: () => latest,
+		setTransform(update, moveOptions = {}) {
+			move(typeof update === "function" ? update(latest) : update, moveOptions.reason ?? "control");
+		},
+		zoomTo,
+		zoomBy(factor, zoomOptions = {}) {
+			zoomTo(latest.scale * factor, zoomOptions);
+		},
+		reset(moveOptions = {}) {
+			move(options.defaultTransform, moveOptions.reason ?? "control");
+		},
+		fitBounds,
+		fit(fitOptions = {}) {
+			const bounds = contentBounds();
+			if (bounds) fitBounds(bounds, fitOptions);
+			else move(options.defaultTransform, fitOptions.reason ?? "control");
+		},
+		revealBounds(bounds, revealOptions = {}) {
+			revealScreenBounds({
+				x: latest.x + bounds.x * latest.scale,
+				y: latest.y + bounds.y * latest.scale,
+				width: bounds.width * latest.scale,
+				height: bounds.height * latest.scale
+			}, revealOptions);
+		},
+		toWorldPoint: (point) => toWorldPoint(latest, toLocalPoint(point)),
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+	return {
+		...camera,
+		camera,
+		configure(next) {
+			options = next;
+		},
+		attachRoot(element) {
+			root = element;
+			writeTransform();
+		},
+		attachContent(element) {
+			content = element;
+			writeTransform();
+		},
+		contentElement: () => content,
+		getCommittedTransform: () => committed,
+		limitScale: (scale) => clampScale(scale, options.minScale, options.maxScale),
+		move,
+		moveNow(next, reason) {
+			move(next, reason, false);
+			flushNow();
+		},
+		adopt(next) {
+			const bounded = boundedTransform(next, options.minScale, options.maxScale);
+			if (!bounded) return;
+			const echo = lastEmitted && sameTransform(bounded, lastEmitted.transform) ? lastEmitted : null;
+			if (!echo) {
+				cancelAnimationFrame(frame);
+				frame = 0;
+				pending = null;
+			}
+			if (!pending) latest = bounded;
+			if (!sameTransform(bounded, committed)) commit(bounded, echo?.eased ?? false);
+		},
+		revealElement(element) {
+			const bounds = element.getBoundingClientRect();
+			revealScreenBounds({
+				...toLocalPoint({
+					clientX: bounds.left,
+					clientY: bounds.top
+				}),
+				width: bounds.width,
+				height: bounds.height
+			}, { reason: "reveal" });
+			flushNow();
+		},
+		toLocalPoint,
+		dispose() {
+			flushNow();
+			clearTimeout(idleTimer);
+		}
+	};
+}
+//#endregion
+export { createInfiniteCanvasCamera, infiniteCanvasGridStyle, infiniteCanvasTransformCss };

package/dist/lib/infinite-canvas-camera.d.ts

@@ -0,0 +1,33 @@
+//#region src/lib/infinite-canvas-camera.d.ts
+export type InfiniteCanvasTransform = {
+  x: number;
+  y: number;
+  scale: number;
+};
+export type InfiniteCanvasPoint = {
+  x: number;
+  y: number;
+};
+export type InfiniteCanvasBounds = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+export type CanvasWheelInput = Pick<WheelEvent, "deltaMode" | "deltaX" | "deltaY" | "shiftKey">;
+export declare function clampScale(scale: number, minScale: number, maxScale: number): number;
+export declare function sameTransform(left: InfiniteCanvasTransform, right: InfiniteCanvasTransform): boolean;
+export declare function boundedTransform(next: InfiniteCanvasTransform, minScale: number, maxScale: number): InfiniteCanvasTransform | null;
+export declare function toWorldPoint(transform: InfiniteCanvasTransform, point: InfiniteCanvasPoint): InfiniteCanvasPoint;
+export declare function zoomAroundPoint(transform: InfiniteCanvasTransform, nextScale: number, point: InfiniteCanvasPoint): InfiniteCanvasTransform;
+export declare function pinchTransform(start: InfiniteCanvasTransform, startMidpoint: InfiniteCanvasPoint, midpoint: InfiniteCanvasPoint, nextScale: number): InfiniteCanvasTransform;
+export declare function wheelDeltaMultiplier(deltaMode: number, pageHeight: number): number;
+export declare function wheelDeltaPixels(event: CanvasWheelInput, pageHeight: number): InfiniteCanvasPoint;
+export declare function unionBounds(bounds: readonly InfiniteCanvasBounds[]): InfiniteCanvasBounds | null;
+export declare function fitTransform(bounds: InfiniteCanvasBounds, area: InfiniteCanvasBounds, limits: {
+  padding: number;
+  minScale: number;
+  maxScale: number;
+}): InfiniteCanvasTransform;
+export declare function revealOffset(screenBounds: InfiniteCanvasBounds, area: InfiniteCanvasBounds, padding: number): InfiniteCanvasPoint;
+//#endregion

package/dist/lib/infinite-canvas-camera.js

@@ -0,0 +1,98 @@
+//#region src/lib/infinite-canvas-camera.ts
+const MAX_CAMERA_OFFSET_PX = 1e7;
+const WHEEL_LINE_HEIGHT_PX = 16;
+const DOM_DELTA_LINE = 1;
+const DOM_DELTA_PAGE = 2;
+function clampScale(scale, minScale, maxScale) {
+	return Math.min(Math.max(scale, minScale), maxScale);
+}
+function sameTransform(left, right) {
+	return left.x === right.x && left.y === right.y && left.scale === right.scale;
+}
+function boundedTransform(next, minScale, maxScale) {
+	if (!(Number.isFinite(next.x) && Number.isFinite(next.y) && Number.isFinite(next.scale)) || next.scale <= 0) return null;
+	return {
+		x: Math.min(Math.max(next.x, -1e7), MAX_CAMERA_OFFSET_PX),
+		y: Math.min(Math.max(next.y, -1e7), MAX_CAMERA_OFFSET_PX),
+		scale: clampScale(next.scale, minScale, maxScale)
+	};
+}
+function toWorldPoint(transform, point) {
+	return {
+		x: (point.x - transform.x) / transform.scale,
+		y: (point.y - transform.y) / transform.scale
+	};
+}
+function zoomAroundPoint(transform, nextScale, point) {
+	const world = toWorldPoint(transform, point);
+	return {
+		x: point.x - world.x * nextScale,
+		y: point.y - world.y * nextScale,
+		scale: nextScale
+	};
+}
+function pinchTransform(start, startMidpoint, midpoint, nextScale) {
+	const zoomed = zoomAroundPoint(start, nextScale, startMidpoint);
+	return {
+		x: zoomed.x + midpoint.x - startMidpoint.x,
+		y: zoomed.y + midpoint.y - startMidpoint.y,
+		scale: nextScale
+	};
+}
+function wheelDeltaMultiplier(deltaMode, pageHeight) {
+	if (deltaMode === DOM_DELTA_LINE) return WHEEL_LINE_HEIGHT_PX;
+	if (deltaMode === DOM_DELTA_PAGE) return pageHeight;
+	return 1;
+}
+function wheelDeltaPixels(event, pageHeight) {
+	const multiplier = wheelDeltaMultiplier(event.deltaMode, pageHeight);
+	const verticalAsHorizontal = event.shiftKey && event.deltaX === 0;
+	return {
+		x: (verticalAsHorizontal ? event.deltaY : event.deltaX) * multiplier,
+		y: (verticalAsHorizontal ? 0 : event.deltaY) * multiplier
+	};
+}
+function unionBounds(bounds) {
+	if (bounds.length === 0) return null;
+	let left = Number.POSITIVE_INFINITY;
+	let top = Number.POSITIVE_INFINITY;
+	let right = Number.NEGATIVE_INFINITY;
+	let bottom = Number.NEGATIVE_INFINITY;
+	for (const entry of bounds) {
+		left = Math.min(left, entry.x);
+		top = Math.min(top, entry.y);
+		right = Math.max(right, entry.x + entry.width);
+		bottom = Math.max(bottom, entry.y + entry.height);
+	}
+	return {
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function fitTransform(bounds, area, limits) {
+	const availableWidth = Math.max(1, area.width - limits.padding * 2);
+	const availableHeight = Math.max(1, area.height - limits.padding * 2);
+	const scale = clampScale(Math.min(availableWidth / Math.max(bounds.width, 1), availableHeight / Math.max(bounds.height, 1)), limits.minScale, limits.maxScale);
+	return {
+		x: area.x + area.width / 2 - (bounds.x + bounds.width / 2) * scale,
+		y: area.y + area.height / 2 - (bounds.y + bounds.height / 2) * scale,
+		scale
+	};
+}
+function revealAxisOffset(start, size, areaStart, areaSize, padding) {
+	const visibleStart = areaStart + padding;
+	const visibleEnd = areaStart + areaSize - padding;
+	if (size > visibleEnd - visibleStart || start < visibleStart) return visibleStart - start;
+	if (start + size > visibleEnd) return visibleEnd - (start + size);
+	return 0;
+}
+function revealOffset(screenBounds, area, padding) {
+	return {
+		x: revealAxisOffset(screenBounds.x, screenBounds.width, area.x, area.width, padding),
+		y: revealAxisOffset(screenBounds.y, screenBounds.height, area.y, area.height, padding)
+	};
+}
+//#endregion
+export { boundedTransform, clampScale, fitTransform, pinchTransform, revealOffset, sameTransform, toWorldPoint, unionBounds, wheelDeltaMultiplier, wheelDeltaPixels, zoomAroundPoint };

package/dist/lib/infinite-canvas-navigation.d.ts

@@ -0,0 +1,19 @@
+import { InfiniteCanvasPoint } from "./infinite-canvas-camera.js";
+import { InfiniteCanvasCameraStore } from "./infinite-canvas-camera-store.js";
+//#region src/lib/infinite-canvas-navigation.d.ts
+export type InfiniteCanvasPanOnDrag = "background" | "anywhere" | "never";
+export type InfiniteCanvasNavigationOptions = {
+  panOnDrag: InfiniteCanvasPanOnDrag;
+  onWheel?: (event: WheelEvent) => void;
+};
+export type InfiniteCanvasNavigation = {
+  beginBackgroundPan: (event: PointerEvent) => void;
+  syncPanReady: () => void;
+  detach: () => void;
+};
+export declare const INFINITE_CANVAS_KEY_SHORTCUTS = "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0 1";
+export declare const ARROW_KEY_DIRECTIONS: Partial<Record<string, InfiniteCanvasPoint>>;
+export declare function keyboardStep(shiftKey: boolean): number;
+export declare function runInfiniteCanvasKeyCommand(camera: InfiniteCanvasCameraStore, key: string, shiftKey: boolean): boolean;
+export declare function attachInfiniteCanvasNavigation(root: HTMLElement, camera: InfiniteCanvasCameraStore, readOptions: () => InfiniteCanvasNavigationOptions): InfiniteCanvasNavigation;
+//#endregion