@jamesyong42/infinite-canvas 1.0.0 → 1.2.0

package/dist/hooks-DHShH86C.cjs

@@ -0,0 +1,707 @@
+require("./WebGLWidgetLayer-BBMuwzHq.cjs");
+let _jamesyong42_reactive_ecs = require("@jamesyong42/reactive-ecs");
+let react = require("react");
+//#region src/components.ts
+/** Position, size, and rotation of an entity in local coordinates (world units). */
+const Transform2D = (0, _jamesyong42_reactive_ecs.defineComponent)("Transform2D", {
+	x: 0,
+	y: 0,
+	width: 100,
+	height: 100,
+	rotation: 0
+});
+/** Computed world-space bounding box. Read-only -- updated by the transform propagation system. */
+const WorldBounds = (0, _jamesyong42_reactive_ecs.defineComponent)("WorldBounds", {
+	worldX: 0,
+	worldY: 0,
+	worldWidth: 0,
+	worldHeight: 0
+});
+/** Rendering and hit-test ordering. Higher values render on top. */
+const ZIndex = (0, _jamesyong42_reactive_ecs.defineComponent)("ZIndex", { value: 0 });
+/** Parent entity reference. Used for nested containers and handle sync. */
+const Parent = (0, _jamesyong42_reactive_ecs.defineComponent)("Parent", { id: 0 });
+/** Child entity IDs. Used for nested containers and handle sync. */
+const Children = (0, _jamesyong42_reactive_ecs.defineComponent)("Children", { ids: [] });
+/** Marks an entity as a renderable widget with a type identifier and rendering surface. */
+const Widget = (0, _jamesyong42_reactive_ecs.defineComponent)("Widget", {
+	surface: "dom",
+	type: ""
+});
+/** Arbitrary application data attached to a widget entity. Access via useWidgetData(). */
+const WidgetData = (0, _jamesyong42_reactive_ecs.defineComponent)("WidgetData", { data: {} });
+/** Computed responsive breakpoint based on screen-space size. Read-only. */
+const WidgetBreakpoint = (0, _jamesyong42_reactive_ecs.defineComponent)("WidgetBreakpoint", {
+	current: "normal",
+	screenWidth: 0,
+	screenHeight: 0
+});
+/**
+* Marks an entity as an iOS-style card with a fixed preset size.
+* The `cardSystem` reconciles `Transform2D.width/height` from the preset
+* each tick, so cards cannot be resized freely — change `preset` instead.
+*/
+const Card = (0, _jamesyong42_reactive_ecs.defineComponent)("Card", { preset: "small" });
+/** Marks an entity as an enterable container (double-click/double-tap to enter). */
+const Container = (0, _jamesyong42_reactive_ecs.defineComponent)("Container", { enterable: true });
+/**
+* Rectangular interactable region anchored relative to the parent entity's WorldBounds.
+* Anchor values are in 0..1 space: 0 = parent min edge, 1 = parent max edge.
+* Widget bodies do NOT need Hitbox — their WorldBounds is already their hit area.
+* Hitbox is only for sub-entities (handles, ports) whose position is parent-relative.
+*/
+const Hitbox = (0, _jamesyong42_reactive_ecs.defineComponent)("Hitbox", {
+	anchorX: 0,
+	anchorY: 0,
+	width: 0,
+	height: 0
+});
+/**
+* Declares what happens when this entity is hit, plus its hit-test priority.
+* Canonical layers: 0=canvas, 5=widget body, 10=edge handles, 15=corner handles, 20=reserved.
+*/
+const InteractionRole = (0, _jamesyong42_reactive_ecs.defineComponent)("InteractionRole", {
+	layer: 0,
+	role: { type: "canvas" }
+});
+/**
+* Component on the parent entity listing the EntityIds of its spawned handle children.
+* Enables O(1) cascade destroy without a reverse-index scan of Parent components.
+*/
+const HandleSet = (0, _jamesyong42_reactive_ecs.defineComponent)("HandleSet", { ids: [] });
+/** Declares the cursor this entity requests when hovered and when active. */
+const CursorHint = (0, _jamesyong42_reactive_ecs.defineComponent)("CursorHint", {
+	hover: "default",
+	active: "default"
+});
+/** Marks an entity as selectable by click or marquee. */
+const Selectable = (0, _jamesyong42_reactive_ecs.defineTag)("Selectable");
+/** Marks an entity as draggable via pointer interaction. */
+const Draggable = (0, _jamesyong42_reactive_ecs.defineTag)("Draggable");
+/** Marks an entity as resizable via edge/corner handles. */
+const Resizable = (0, _jamesyong42_reactive_ecs.defineTag)("Resizable");
+/** Prevents an entity from being moved or resized. */
+const Locked = (0, _jamesyong42_reactive_ecs.defineTag)("Locked");
+/** Indicates the entity is currently selected. */
+const Selected = (0, _jamesyong42_reactive_ecs.defineTag)("Selected");
+/**
+* Indicates the entity is currently being dragged by the user.
+* Added after the drag dead-zone is crossed; removed on pointer up/cancel.
+* Renderers read this to apply transient drag affordances (e.g. scale/shadow lift).
+*/
+const Dragging = (0, _jamesyong42_reactive_ecs.defineTag)("Dragging");
+/**
+* Entities with this tag get the engine-drawn selection + hover outline frame.
+* Granted automatically to Selectable entities unless explicitly disabled via
+* `Archetype.interactive.selectionFrame: false`. Widgets that render their own
+* selected/hover chrome (e.g. iOS-style cards) opt out.
+*/
+const SelectionFrame = (0, _jamesyong42_reactive_ecs.defineTag)("SelectionFrame");
+/** Indicates the entity is currently being interacted with (drag, resize). */
+const Active = (0, _jamesyong42_reactive_ecs.defineTag)("Active");
+/** Indicates the entity is within the visible viewport. Set by the cull system. */
+const Visible = (0, _jamesyong42_reactive_ecs.defineTag)("Visible");
+//#endregion
+//#region src/resources.ts
+/**
+* Output sink for the cursor system. Written by cursorSystem each tick;
+* read by the RAF loop to apply style.cursor on the root container div.
+*/
+const CursorResource = (0, _jamesyong42_reactive_ecs.defineResource)("Cursor", { cursor: "default" });
+/** Camera state: world-space position (x, y) and zoom level. Updated by pan/zoom gestures. */
+const CameraResource = (0, _jamesyong42_reactive_ecs.defineResource)("Camera", {
+	x: 0,
+	y: 0,
+	zoom: 1
+});
+/** Viewport dimensions in CSS pixels and device pixel ratio. Updated on resize. */
+const ViewportResource = (0, _jamesyong42_reactive_ecs.defineResource)("Viewport", {
+	width: 0,
+	height: 0,
+	dpr: 1
+});
+/** Minimum and maximum zoom levels. */
+const ZoomConfigResource = (0, _jamesyong42_reactive_ecs.defineResource)("ZoomConfig", {
+	min: .1,
+	max: 5
+});
+/** Screen-space pixel thresholds for responsive breakpoints (micro/compact/normal/expanded/detailed). */
+const BreakpointConfigResource = (0, _jamesyong42_reactive_ecs.defineResource)("BreakpointConfig", {
+	micro: 40,
+	compact: 120,
+	normal: 500,
+	expanded: 1200
+});
+/** Navigation stack for hierarchical container traversal. */
+const NavigationStackResource = (0, _jamesyong42_reactive_ecs.defineResource)("NavigationStack", {
+	frames: [{
+		containerId: null,
+		camera: {
+			x: 0,
+			y: 0,
+			zoom: 1
+		}
+	}],
+	changed: false
+});
+/**
+* iOS-style card preset size map. Lookup happens by `Card.preset`; the
+* `cardSystem` stamps `Transform2D.width/height` from the resolved size.
+*
+* Defaults mirror iOS widget conventions — 155×155 tile + 19px gap.
+* Override at `createLayoutEngine({ cardPresets })` for tablet-scale or
+* custom design systems.
+*/
+const CardPresetsResource = (0, _jamesyong42_reactive_ecs.defineResource)("CardPresets", {
+	presets: {
+		small: {
+			width: 155,
+			height: 155
+		},
+		medium: {
+			width: 329,
+			height: 155
+		},
+		large: {
+			width: 329,
+			height: 345
+		},
+		xl: {
+			width: 329,
+			height: 535
+		}
+	},
+	/** Gap between adjacent tiles (future tile-snap system reads this). */
+	gap: 19
+});
+//#endregion
+//#region src/react/context.ts
+const EngineContext = (0, react.createContext)(null);
+const EngineProvider = EngineContext.Provider;
+const ContainerRefContext = (0, react.createContext)(null);
+const ContainerRefProvider = ContainerRefContext.Provider;
+function useContainerRef() {
+	return (0, react.useContext)(ContainerRefContext);
+}
+/**
+* Returns the LayoutEngine instance from the nearest InfiniteCanvas context.
+* Throws if used outside an InfiniteCanvas provider.
+*/
+function useLayoutEngine() {
+	const engine = (0, react.useContext)(EngineContext);
+	if (!engine) throw new Error("useLayoutEngine must be used within an <InfiniteCanvas>");
+	return engine;
+}
+const WidgetResolverContext = (0, react.createContext)(null);
+const WidgetResolverProvider = WidgetResolverContext.Provider;
+function useWidgetResolver() {
+	return (0, react.useContext)(WidgetResolverContext);
+}
+//#endregion
+//#region src/react/hooks.ts
+function shallowEqual(a, b) {
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) if (a[key] !== b[key]) return false;
+	return true;
+}
+/**
+* Reactively reads an ECS component from an entity.
+* Returns undefined if the entity doesn't have the component. Re-renders when the component changes.
+*/
+function useComponent(entity, type) {
+	const engine = useLayoutEngine();
+	const [value, setValue] = (0, react.useState)(() => engine.get(entity, type));
+	(0, react.useEffect)(() => {
+		const current = engine.get(entity, type);
+		setValue(current === void 0 ? void 0 : { ...current });
+		return engine.world.onComponentChanged(type, (_id, _prev, next) => {
+			setValue(next === void 0 ? void 0 : { ...next });
+		}, entity);
+	}, [
+		engine,
+		entity,
+		type
+	]);
+	return value;
+}
+/**
+* Reactively checks whether an entity has a tag.
+* Re-renders when the tag is added or removed.
+*/
+function useTag(entity, type) {
+	const engine = useLayoutEngine();
+	const [has, setHas] = (0, react.useState)(() => engine.world.hasTag(entity, type));
+	(0, react.useEffect)(() => {
+		setHas(engine.world.hasTag(entity, type));
+		const unsub1 = engine.world.onTagAdded(type, () => setHas(true), entity);
+		const unsub2 = engine.world.onTagRemoved(type, () => setHas(false), entity);
+		return () => {
+			unsub1();
+			unsub2();
+		};
+	}, [
+		engine,
+		entity,
+		type
+	]);
+	return has;
+}
+/**
+* Reactively reads an ECS resource (singleton data).
+* Re-renders when any field of the resource changes (shallow comparison).
+*/
+function useResource(type) {
+	const engine = useLayoutEngine();
+	const [value, setValue] = (0, react.useState)(() => ({ ...engine.world.getResource(type) }));
+	const prevRef = (0, react.useRef)(void 0);
+	(0, react.useEffect)(() => {
+		const current = engine.world.getResource(type);
+		if (current !== void 0) {
+			prevRef.current = current;
+			setValue({ ...current });
+		}
+		return engine.onFrame(() => {
+			const current = engine.world.getResource(type);
+			if (prevRef.current === void 0 || !shallowEqual(current, prevRef.current)) {
+				prevRef.current = current;
+				setValue({ ...current });
+			}
+		});
+	}, [engine, type]);
+	return value;
+}
+/**
+* Returns entity IDs matching all specified component/tag types.
+* Re-renders when the result set changes.
+*/
+function useQuery(...types) {
+	const engine = useLayoutEngine();
+	const typesRef = (0, react.useRef)(types);
+	typesRef.current = types;
+	const typesKey = types.map((t) => t.name).join("\0");
+	const [result, setResult] = (0, react.useState)(() => engine.world.query(...types));
+	(0, react.useEffect)(() => {
+		setResult(engine.world.query(...typesRef.current));
+		return engine.onFrame(() => {
+			const next = engine.world.query(...typesRef.current);
+			setResult((prev) => {
+				if (prev.length !== next.length) return next;
+				for (let i = 0; i < prev.length; i++) if (prev[i] !== next[i]) return next;
+				return prev;
+			});
+		});
+	}, [engine, typesKey]);
+	return result;
+}
+/**
+* Returns all entity IDs that have the specified tag.
+* Re-renders when entities are tagged or untagged.
+*/
+function useTaggedEntities(type) {
+	const engine = useLayoutEngine();
+	const [result, setResult] = (0, react.useState)(() => engine.world.queryTagged(type));
+	(0, react.useEffect)(() => {
+		setResult([...engine.world.queryTagged(type)]);
+		const update = () => setResult([...engine.world.queryTagged(type)]);
+		const unsub1 = engine.world.onTagAdded(type, update);
+		const unsub2 = engine.world.onTagRemoved(type, update);
+		return () => {
+			unsub1();
+			unsub2();
+		};
+	}, [engine, type]);
+	return result;
+}
+/**
+* Returns the current camera state {x, y, zoom}.
+* Shorthand for useResource(CameraResource).
+*/
+function useCamera() {
+	const cam = useResource(CameraResource);
+	return {
+		x: cam?.x ?? 0,
+		y: cam?.y ?? 0,
+		zoom: cam?.zoom ?? 1
+	};
+}
+function sameIdList(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+function sameTypeList(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+/**
+* Reactively returns the IDs of every live entity in the world.
+* Updates on entity create and destroy.
+*/
+function useAllEntities() {
+	const engine = useLayoutEngine();
+	const [entities, setEntities] = (0, react.useState)(() => engine.world.getAllEntities());
+	(0, react.useEffect)(() => {
+		const refresh = () => {
+			const next = engine.world.getAllEntities();
+			setEntities((prev) => sameIdList(prev, next) ? prev : next);
+		};
+		refresh();
+		const unsub1 = engine.world.onEntityCreated(refresh);
+		const unsub2 = engine.world.onEntityDestroyed(refresh);
+		return () => {
+			unsub1();
+			unsub2();
+		};
+	}, [engine]);
+	return entities;
+}
+/**
+* Reactively returns the ComponentTypes currently attached to an entity.
+* Polls per frame (engine only ticks when dirty), but never re-renders unless the set changes.
+*/
+function useEntityComponents(entity) {
+	const engine = useLayoutEngine();
+	const [types, setTypes] = (0, react.useState)(() => engine.world.getComponentsOf(entity));
+	(0, react.useEffect)(() => {
+		setTypes(engine.world.getComponentsOf(entity));
+		return engine.onFrame(() => {
+			const next = engine.world.getComponentsOf(entity);
+			setTypes((prev) => sameTypeList(prev, next) ? prev : next);
+		});
+	}, [engine, entity]);
+	return types;
+}
+/**
+* Reactively returns the TagTypes currently attached to an entity.
+*/
+function useEntityTags(entity) {
+	const engine = useLayoutEngine();
+	const [types, setTypes] = (0, react.useState)(() => engine.world.getTagsOf(entity));
+	(0, react.useEffect)(() => {
+		setTypes(engine.world.getTagsOf(entity));
+		return engine.onFrame(() => {
+			const next = engine.world.getTagsOf(entity);
+			setTypes((prev) => sameTypeList(prev, next) ? prev : next);
+		});
+	}, [engine, entity]);
+	return types;
+}
+/**
+* Reactively returns every ComponentType the world has observed.
+* Grows over time as new component types are first used.
+*/
+function useRegisteredComponents() {
+	const engine = useLayoutEngine();
+	const [types, setTypes] = (0, react.useState)(() => engine.world.getRegisteredComponents());
+	(0, react.useEffect)(() => {
+		setTypes(engine.world.getRegisteredComponents());
+		return engine.onFrame(() => {
+			const next = engine.world.getRegisteredComponents();
+			setTypes((prev) => sameTypeList(prev, next) ? prev : next);
+		});
+	}, [engine]);
+	return types;
+}
+/**
+* Reactively returns every TagType the world has observed.
+*/
+function useRegisteredTags() {
+	const engine = useLayoutEngine();
+	const [types, setTypes] = (0, react.useState)(() => engine.world.getRegisteredTags());
+	(0, react.useEffect)(() => {
+		setTypes(engine.world.getRegisteredTags());
+		return engine.onFrame(() => {
+			const next = engine.world.getRegisteredTags();
+			setTypes((prev) => sameTypeList(prev, next) ? prev : next);
+		});
+	}, [engine]);
+	return types;
+}
+//#endregion
+Object.defineProperty(exports, "Active", {
+	enumerable: true,
+	get: function() {
+		return Active;
+	}
+});
+Object.defineProperty(exports, "BreakpointConfigResource", {
+	enumerable: true,
+	get: function() {
+		return BreakpointConfigResource;
+	}
+});
+Object.defineProperty(exports, "CameraResource", {
+	enumerable: true,
+	get: function() {
+		return CameraResource;
+	}
+});
+Object.defineProperty(exports, "Card", {
+	enumerable: true,
+	get: function() {
+		return Card;
+	}
+});
+Object.defineProperty(exports, "CardPresetsResource", {
+	enumerable: true,
+	get: function() {
+		return CardPresetsResource;
+	}
+});
+Object.defineProperty(exports, "Children", {
+	enumerable: true,
+	get: function() {
+		return Children;
+	}
+});
+Object.defineProperty(exports, "Container", {
+	enumerable: true,
+	get: function() {
+		return Container;
+	}
+});
+Object.defineProperty(exports, "ContainerRefProvider", {
+	enumerable: true,
+	get: function() {
+		return ContainerRefProvider;
+	}
+});
+Object.defineProperty(exports, "CursorHint", {
+	enumerable: true,
+	get: function() {
+		return CursorHint;
+	}
+});
+Object.defineProperty(exports, "CursorResource", {
+	enumerable: true,
+	get: function() {
+		return CursorResource;
+	}
+});
+Object.defineProperty(exports, "Draggable", {
+	enumerable: true,
+	get: function() {
+		return Draggable;
+	}
+});
+Object.defineProperty(exports, "Dragging", {
+	enumerable: true,
+	get: function() {
+		return Dragging;
+	}
+});
+Object.defineProperty(exports, "EngineProvider", {
+	enumerable: true,
+	get: function() {
+		return EngineProvider;
+	}
+});
+Object.defineProperty(exports, "HandleSet", {
+	enumerable: true,
+	get: function() {
+		return HandleSet;
+	}
+});
+Object.defineProperty(exports, "Hitbox", {
+	enumerable: true,
+	get: function() {
+		return Hitbox;
+	}
+});
+Object.defineProperty(exports, "InteractionRole", {
+	enumerable: true,
+	get: function() {
+		return InteractionRole;
+	}
+});
+Object.defineProperty(exports, "Locked", {
+	enumerable: true,
+	get: function() {
+		return Locked;
+	}
+});
+Object.defineProperty(exports, "NavigationStackResource", {
+	enumerable: true,
+	get: function() {
+		return NavigationStackResource;
+	}
+});
+Object.defineProperty(exports, "Parent", {
+	enumerable: true,
+	get: function() {
+		return Parent;
+	}
+});
+Object.defineProperty(exports, "Resizable", {
+	enumerable: true,
+	get: function() {
+		return Resizable;
+	}
+});
+Object.defineProperty(exports, "Selectable", {
+	enumerable: true,
+	get: function() {
+		return Selectable;
+	}
+});
+Object.defineProperty(exports, "Selected", {
+	enumerable: true,
+	get: function() {
+		return Selected;
+	}
+});
+Object.defineProperty(exports, "SelectionFrame", {
+	enumerable: true,
+	get: function() {
+		return SelectionFrame;
+	}
+});
+Object.defineProperty(exports, "Transform2D", {
+	enumerable: true,
+	get: function() {
+		return Transform2D;
+	}
+});
+Object.defineProperty(exports, "ViewportResource", {
+	enumerable: true,
+	get: function() {
+		return ViewportResource;
+	}
+});
+Object.defineProperty(exports, "Visible", {
+	enumerable: true,
+	get: function() {
+		return Visible;
+	}
+});
+Object.defineProperty(exports, "Widget", {
+	enumerable: true,
+	get: function() {
+		return Widget;
+	}
+});
+Object.defineProperty(exports, "WidgetBreakpoint", {
+	enumerable: true,
+	get: function() {
+		return WidgetBreakpoint;
+	}
+});
+Object.defineProperty(exports, "WidgetData", {
+	enumerable: true,
+	get: function() {
+		return WidgetData;
+	}
+});
+Object.defineProperty(exports, "WidgetResolverProvider", {
+	enumerable: true,
+	get: function() {
+		return WidgetResolverProvider;
+	}
+});
+Object.defineProperty(exports, "WorldBounds", {
+	enumerable: true,
+	get: function() {
+		return WorldBounds;
+	}
+});
+Object.defineProperty(exports, "ZIndex", {
+	enumerable: true,
+	get: function() {
+		return ZIndex;
+	}
+});
+Object.defineProperty(exports, "ZoomConfigResource", {
+	enumerable: true,
+	get: function() {
+		return ZoomConfigResource;
+	}
+});
+Object.defineProperty(exports, "useAllEntities", {
+	enumerable: true,
+	get: function() {
+		return useAllEntities;
+	}
+});
+Object.defineProperty(exports, "useCamera", {
+	enumerable: true,
+	get: function() {
+		return useCamera;
+	}
+});
+Object.defineProperty(exports, "useComponent", {
+	enumerable: true,
+	get: function() {
+		return useComponent;
+	}
+});
+Object.defineProperty(exports, "useContainerRef", {
+	enumerable: true,
+	get: function() {
+		return useContainerRef;
+	}
+});
+Object.defineProperty(exports, "useEntityComponents", {
+	enumerable: true,
+	get: function() {
+		return useEntityComponents;
+	}
+});
+Object.defineProperty(exports, "useEntityTags", {
+	enumerable: true,
+	get: function() {
+		return useEntityTags;
+	}
+});
+Object.defineProperty(exports, "useLayoutEngine", {
+	enumerable: true,
+	get: function() {
+		return useLayoutEngine;
+	}
+});
+Object.defineProperty(exports, "useQuery", {
+	enumerable: true,
+	get: function() {
+		return useQuery;
+	}
+});
+Object.defineProperty(exports, "useRegisteredComponents", {
+	enumerable: true,
+	get: function() {
+		return useRegisteredComponents;
+	}
+});
+Object.defineProperty(exports, "useRegisteredTags", {
+	enumerable: true,
+	get: function() {
+		return useRegisteredTags;
+	}
+});
+Object.defineProperty(exports, "useResource", {
+	enumerable: true,
+	get: function() {
+		return useResource;
+	}
+});
+Object.defineProperty(exports, "useTag", {
+	enumerable: true,
+	get: function() {
+		return useTag;
+	}
+});
+Object.defineProperty(exports, "useTaggedEntities", {
+	enumerable: true,
+	get: function() {
+		return useTaggedEntities;
+	}
+});
+Object.defineProperty(exports, "useWidgetResolver", {
+	enumerable: true,
+	get: function() {
+		return useWidgetResolver;
+	}
+});
+
+//# sourceMappingURL=hooks-DHShH86C.cjs.map