@scenography/overlay 0.2.0

package/dist/index.cjs

@@ -0,0 +1,240 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/overlay.ts
+const STYLE_ID$1 = "scenography-overlay-styles";
+const SLOT_LAYOUT = {
+	"top-left": {
+		row: 1,
+		col: 1
+	},
+	"top-center": {
+		row: 1,
+		col: 2
+	},
+	"top-right": {
+		row: 1,
+		col: 3
+	},
+	"middle-left": {
+		row: 2,
+		col: 1
+	},
+	center: {
+		row: 2,
+		col: 2
+	},
+	"middle-right": {
+		row: 2,
+		col: 3
+	},
+	"bottom-left": {
+		row: 3,
+		col: 1
+	},
+	"bottom-center": {
+		row: 3,
+		col: 2
+	},
+	"bottom-right": {
+		row: 3,
+		col: 3
+	}
+};
+const along = (n) => n === 1 ? "flex-start" : n === 3 ? "flex-end" : "center";
+/** Inject the minimal layout CSS once. No daisyUI/Tailwind here — pure positioning. */
+function ensureStyles$1() {
+	if (typeof document === "undefined" || document.getElementById(STYLE_ID$1)) return;
+	const slotRules = Object.entries(SLOT_LAYOUT).map(([slot, { row, col }]) => `.sg-overlay__slot--${slot}{grid-row:${row};grid-column:${col};justify-content:${along(row)};align-items:${along(col)};}`).join("");
+	const style = document.createElement("style");
+	style.id = STYLE_ID$1;
+	style.textContent = ".sg-overlay{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);}.sg-overlay__slot{display:flex;flex-direction:column;gap:8px;padding:12px;}.sg-overlay__item{pointer-events:auto;}" + slotRules;
+	document.head.appendChild(style);
+}
+/**
+* Create a DOM overlay layered over a gallery's canvas. The overlay itself is
+* framework- and style-agnostic: it positions a 3×3 grid of slots and mounts
+* component elements into them. What a component looks like is up to the
+* component (daisyUI widgets, your own markup, anything).
+*/
+function createOverlay(options) {
+	ensureStyles$1();
+	const canvas = options.gallery.ctx.three.renderer.domElement;
+	const surface = options.container ?? canvas.parentElement ?? document.body;
+	if (getComputedStyle(surface).position === "static") surface.style.position = "relative";
+	const root = document.createElement("div");
+	root.className = "sg-overlay";
+	const slots = /* @__PURE__ */ new Map();
+	for (const slot of Object.keys(SLOT_LAYOUT)) {
+		const el = document.createElement("div");
+		el.className = `sg-overlay__slot sg-overlay__slot--${slot}`;
+		root.appendChild(el);
+		slots.set(slot, el);
+	}
+	surface.appendChild(root);
+	const ctx = {
+		gallery: options.gallery,
+		root,
+		surface,
+		locale: options.locale
+	};
+	const handles = /* @__PURE__ */ new Set();
+	return {
+		root,
+		add(slot, component) {
+			const result = component(ctx);
+			const handle = result instanceof HTMLElement ? { element: result } : result;
+			handle.element.classList.add("sg-overlay__item");
+			slots.get(slot)?.appendChild(handle.element);
+			handles.add(handle);
+			return () => {
+				handle.destroy?.();
+				handle.element.remove();
+				handles.delete(handle);
+			};
+		},
+		destroy() {
+			for (const handle of handles) {
+				handle.destroy?.();
+				handle.element.remove();
+			}
+			handles.clear();
+			root.remove();
+		}
+	};
+}
+//#endregion
+//#region src/text.ts
+/** Resolve a `Text` to its current string value. */
+const resolveText = (text) => typeof text === "function" ? text() : text;
+//#endregion
+//#region src/components/touch-controls/touch-controls.ts
+const STYLE_ID = "scenography-touch-joysticks-styles";
+function ensureStyles() {
+	if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = ".sg-joysticks{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden;touch-action:none;}.sg-joy{position:absolute;border-radius:50%;background:rgba(0,0,0,0.25);border:2px solid rgba(255,255,255,0.35);backdrop-filter:blur(2px);display:none;}.sg-joy__knob{position:absolute;top:50%;left:50%;border-radius:50%;background:rgba(255,255,255,0.85);box-shadow:0 2px 8px rgba(0,0,0,0.4);}";
+	document.head.appendChild(style);
+}
+/**
+* Dual on-screen joysticks for touch input — both hidden until a finger lands,
+* then drawn at the touch point. One half of the screen moves the camera
+* (forward/back + strafe, like WASD), the other aims it (like dragging the
+* mouse). Multi-touch: both can be active at once. Which half is which follows
+* `handedness`. Works on any touch-capable device (no media-query gating), so it
+* also responds to a laptop touchscreen. Drives `ctx.gallery.ctx.controls`.
+*/
+function touchJoysticks(options = {}) {
+	const radius = options.radius ?? 60;
+	const resolveHand = () => typeof options.handedness === "function" ? options.handedness() : options.handedness ?? "right";
+	return (ctx) => {
+		ensureStyles();
+		const controls = ctx.gallery.ctx.controls;
+		const layer = document.createElement("div");
+		layer.className = "sg-joysticks";
+		layer.style.pointerEvents = "none";
+		const makeJoy = (role) => {
+			const base = document.createElement("div");
+			base.className = "sg-joy";
+			const size = radius * 2;
+			base.style.width = base.style.height = `${size}px`;
+			const knob = document.createElement("div");
+			knob.className = "sg-joy__knob";
+			const knobSize = radius;
+			knob.style.width = knob.style.height = `${knobSize}px`;
+			knob.style.margin = `${-knobSize / 2}px 0 0 ${-knobSize / 2}px`;
+			base.appendChild(knob);
+			layer.appendChild(base);
+			return {
+				role,
+				id: null,
+				ox: 0,
+				oy: 0,
+				base,
+				knob
+			};
+		};
+		const move = makeJoy("move");
+		const look = makeJoy("look");
+		const joys = [move, look];
+		const reset = (joy) => {
+			if (joy.role === "move") controls.setMoveInput(0, 0);
+			else controls.setLookInput(0, 0);
+		};
+		const apply = (joy, nx, ny) => {
+			if (joy.role === "move") controls.setMoveInput(-ny, nx);
+			else controls.setLookInput(nx, -ny);
+		};
+		const roleForX = (x) => {
+			return x < window.innerWidth / 2 === (resolveHand() === "right") ? "move" : "look";
+		};
+		const begin = (joy, x, y) => {
+			joy.ox = x;
+			joy.oy = y;
+			joy.base.style.left = `${x - radius}px`;
+			joy.base.style.top = `${y - radius}px`;
+			joy.base.style.display = "block";
+			joy.knob.style.transform = "translate(0px, 0px)";
+			apply(joy, 0, 0);
+		};
+		const drag = (joy, x, y) => {
+			let dx = x - joy.ox;
+			let dy = y - joy.oy;
+			const len = Math.hypot(dx, dy) || 1;
+			if (len > radius) {
+				dx = dx / len * radius;
+				dy = dy / len * radius;
+			}
+			joy.knob.style.transform = `translate(${dx}px, ${dy}px)`;
+			apply(joy, dx / radius, dy / radius);
+		};
+		const end = (joy) => {
+			joy.id = null;
+			joy.base.style.display = "none";
+			reset(joy);
+		};
+		const onStart = (e) => {
+			let claimed = false;
+			for (const t of Array.from(e.changedTouches)) {
+				if (document.elementFromPoint(t.clientX, t.clientY)?.closest(".sg-overlay__item")) continue;
+				const joy = roleForX(t.clientX) === "move" ? move : look;
+				if (joy.id !== null) continue;
+				joy.id = t.identifier;
+				begin(joy, t.clientX, t.clientY);
+				claimed = true;
+			}
+			if (claimed) e.preventDefault();
+		};
+		const onMove = (e) => {
+			let claimed = false;
+			for (const t of Array.from(e.changedTouches)) for (const joy of joys) if (joy.id === t.identifier) {
+				drag(joy, t.clientX, t.clientY);
+				claimed = true;
+			}
+			if (claimed) e.preventDefault();
+		};
+		const onEnd = (e) => {
+			for (const t of Array.from(e.changedTouches)) for (const joy of joys) if (joy.id === t.identifier) end(joy);
+		};
+		window.addEventListener("touchstart", onStart, { passive: false });
+		window.addEventListener("touchmove", onMove, { passive: false });
+		window.addEventListener("touchend", onEnd);
+		window.addEventListener("touchcancel", onEnd);
+		return {
+			element: layer,
+			destroy: () => {
+				window.removeEventListener("touchstart", onStart);
+				window.removeEventListener("touchmove", onMove);
+				window.removeEventListener("touchend", onEnd);
+				window.removeEventListener("touchcancel", onEnd);
+				controls.setMoveInput(0, 0);
+				controls.setLookInput(0, 0);
+			}
+		};
+	};
+}
+//#endregion
+exports.createOverlay = createOverlay;
+exports.resolveText = resolveText;
+exports.touchJoysticks = touchJoysticks;
+
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["STYLE_ID","ensureStyles"],"sources":["../src/overlay.ts","../src/text.ts","../src/components/touch-controls/touch-controls.ts"],"sourcesContent":["import type { Gallery } from \"@scenography/engine\";\n\nimport type { OverlayComponent, OverlayContext, OverlayHandle, OverlaySlot } from \"./types\";\nimport type { LocaleSource } from \"./text\";\n\nconst STYLE_ID = \"scenography-overlay-styles\";\n\nconst SLOT_LAYOUT: Record<OverlaySlot, { row: number; col: number }> = {\n  \"top-left\": { row: 1, col: 1 },\n  \"top-center\": { row: 1, col: 2 },\n  \"top-right\": { row: 1, col: 3 },\n  \"middle-left\": { row: 2, col: 1 },\n  center: { row: 2, col: 2 },\n  \"middle-right\": { row: 2, col: 3 },\n  \"bottom-left\": { row: 3, col: 1 },\n  \"bottom-center\": { row: 3, col: 2 },\n  \"bottom-right\": { row: 3, col: 3 },\n};\n\nconst along = (n: number): string => (n === 1 ? \"flex-start\" : n === 3 ? \"flex-end\" : \"center\");\n\n/** Inject the minimal layout CSS once. No daisyUI/Tailwind here — pure positioning. */\nfunction ensureStyles(): void {\n  if (typeof document === \"undefined\" || document.getElementById(STYLE_ID)) return;\n  const slotRules = (Object.entries(SLOT_LAYOUT) as [OverlaySlot, { row: number; col: number }][])\n    .map(\n      ([slot, { row, col }]) =>\n        `.sg-overlay__slot--${slot}{grid-row:${row};grid-column:${col};justify-content:${along(row)};align-items:${along(col)};}`,\n    )\n    .join(\"\");\n  const style = document.createElement(\"style\");\n  style.id = STYLE_ID;\n  style.textContent =\n    `.sg-overlay{position:absolute;inset:0;pointer-events:none;display:grid;` +\n    `grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);}` +\n    `.sg-overlay__slot{display:flex;flex-direction:column;gap:8px;padding:12px;}` +\n    `.sg-overlay__item{pointer-events:auto;}` +\n    slotRules;\n  document.head.appendChild(style);\n}\n\nexport interface OverlayOptions {\n  gallery: Gallery;\n  /** Element to mount into and target for fullscreen. Defaults to the canvas's parent. */\n  container?: HTMLElement;\n  /** Locale source so components can relocalize their text live. */\n  locale?: LocaleSource;\n}\n\nexport interface Overlay {\n  /** The overlay root element. */\n  readonly root: HTMLElement;\n  /** Add a component to a slot. Returns a function that removes it. */\n  add(slot: OverlaySlot, component: OverlayComponent): () => void;\n  /** Remove the overlay and tear down every component. */\n  destroy(): void;\n}\n\n/**\n * Create a DOM overlay layered over a gallery's canvas. The overlay itself is\n * framework- and style-agnostic: it positions a 3×3 grid of slots and mounts\n * component elements into them. What a component looks like is up to the\n * component (daisyUI widgets, your own markup, anything).\n */\nexport function createOverlay(options: OverlayOptions): Overlay {\n  ensureStyles();\n\n  const canvas = options.gallery.ctx.three.renderer.domElement;\n  const surface = options.container ?? canvas.parentElement ?? document.body;\n  if (getComputedStyle(surface).position === \"static\") surface.style.position = \"relative\";\n\n  const root = document.createElement(\"div\");\n  root.className = \"sg-overlay\";\n\n  const slots = new Map<OverlaySlot, HTMLElement>();\n  for (const slot of Object.keys(SLOT_LAYOUT) as OverlaySlot[]) {\n    const el = document.createElement(\"div\");\n    el.className = `sg-overlay__slot sg-overlay__slot--${slot}`;\n    root.appendChild(el);\n    slots.set(slot, el);\n  }\n  surface.appendChild(root);\n\n  const ctx: OverlayContext = { gallery: options.gallery, root, surface, locale: options.locale };\n  const handles = new Set<OverlayHandle>();\n\n  return {\n    root,\n    add(slot, component) {\n      const result = component(ctx);\n      const handle: OverlayHandle = result instanceof HTMLElement ? { element: result } : result;\n      handle.element.classList.add(\"sg-overlay__item\");\n      slots.get(slot)?.appendChild(handle.element);\n      handles.add(handle);\n      return () => {\n        handle.destroy?.();\n        handle.element.remove();\n        handles.delete(handle);\n      };\n    },\n    destroy() {\n      for (const handle of handles) {\n        handle.destroy?.();\n        handle.element.remove();\n      }\n      handles.clear();\n      root.remove();\n    },\n  };\n}\n","/** A text value that may change with locale: a literal string or a getter. */\nexport type Text = string | (() => string);\n\n/** Resolve a `Text` to its current string value. */\nexport const resolveText = (text: Text): string => (typeof text === \"function\" ? text() : text);\n\n/**\n * A source of locale changes the overlay can subscribe to (e.g. an app's i18n\n * store). Components re-apply their `Text` values whenever it fires, so text\n * relocalizes live without remounting.\n */\nexport interface LocaleSource {\n  /** Subscribe to locale changes; returns an unsubscribe function. */\n  subscribe(listener: () => void): () => void;\n}\n","import type { OverlayComponent, OverlayContext } from \"../../types\";\n\n/** Which hand drives movement: `right` → move on the left, look on the right. */\nexport type Handedness = \"right\" | \"left\";\n\nexport interface TouchJoysticksOptions {\n  /**\n   * Whether the move joystick lives on the left (\"right\"-handed) or the right\n   * (\"left\"-handed) half of the screen. A getter is read on every touch, so the\n   * setting can change live. Defaults to \"right\".\n   */\n  handedness?: Handedness | (() => Handedness);\n  /** Maximum knob travel from the touch origin, in px. Defaults to 60. */\n  radius?: number;\n}\n\nconst STYLE_ID = \"scenography-touch-joysticks-styles\";\n\nfunction ensureStyles(): void {\n  if (typeof document === \"undefined\" || document.getElementById(STYLE_ID)) return;\n  const style = document.createElement(\"style\");\n  style.id = STYLE_ID;\n  style.textContent =\n    // Full-viewport, click-through layer that just hosts the joystick visuals;\n    // input is read from window touch events, so nothing here grabs pointers.\n    `.sg-joysticks{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden;touch-action:none;}` +\n    `.sg-joy{position:absolute;border-radius:50%;background:rgba(0,0,0,0.25);` +\n    `border:2px solid rgba(255,255,255,0.35);backdrop-filter:blur(2px);display:none;}` +\n    `.sg-joy__knob{position:absolute;top:50%;left:50%;border-radius:50%;` +\n    `background:rgba(255,255,255,0.85);box-shadow:0 2px 8px rgba(0,0,0,0.4);}`;\n  document.head.appendChild(style);\n}\n\ntype Role = \"move\" | \"look\";\n\ninterface Joystick {\n  role: Role;\n  id: number | null;\n  ox: number;\n  oy: number;\n  base: HTMLElement;\n  knob: HTMLElement;\n}\n\n/**\n * Dual on-screen joysticks for touch input — both hidden until a finger lands,\n * then drawn at the touch point. One half of the screen moves the camera\n * (forward/back + strafe, like WASD), the other aims it (like dragging the\n * mouse). Multi-touch: both can be active at once. Which half is which follows\n * `handedness`. Works on any touch-capable device (no media-query gating), so it\n * also responds to a laptop touchscreen. Drives `ctx.gallery.ctx.controls`.\n */\nexport function touchJoysticks(options: TouchJoysticksOptions = {}): OverlayComponent {\n  const radius = options.radius ?? 60;\n  const resolveHand = (): Handedness =>\n    typeof options.handedness === \"function\"\n      ? options.handedness()\n      : (options.handedness ?? \"right\");\n\n  return (ctx: OverlayContext) => {\n    ensureStyles();\n    const controls = ctx.gallery.ctx.controls;\n\n    const layer = document.createElement(\"div\");\n    layer.className = \"sg-joysticks\";\n    // Inline pointer-events:none survives the overlay's `.sg-overlay__item` rule.\n    layer.style.pointerEvents = \"none\";\n\n    const makeJoy = (role: Role): Joystick => {\n      const base = document.createElement(\"div\");\n      base.className = \"sg-joy\";\n      const size = radius * 2;\n      base.style.width = base.style.height = `${size}px`;\n      const knob = document.createElement(\"div\");\n      knob.className = \"sg-joy__knob\";\n      const knobSize = radius;\n      knob.style.width = knob.style.height = `${knobSize}px`;\n      knob.style.margin = `${-knobSize / 2}px 0 0 ${-knobSize / 2}px`;\n      base.appendChild(knob);\n      layer.appendChild(base);\n      return { role, id: null, ox: 0, oy: 0, base, knob };\n    };\n\n    const move = makeJoy(\"move\");\n    const look = makeJoy(\"look\");\n    const joys = [move, look];\n\n    const reset = (joy: Joystick): void => {\n      if (joy.role === \"move\") controls.setMoveInput(0, 0);\n      else controls.setLookInput(0, 0);\n    };\n\n    const apply = (joy: Joystick, nx: number, ny: number): void => {\n      // Up (negative screen-Y) means forward / look up.\n      if (joy.role === \"move\") controls.setMoveInput(-ny, nx);\n      else controls.setLookInput(nx, -ny);\n    };\n\n    // Right-handed: move on the left half, look on the right. Mirror for lefties.\n    const roleForX = (x: number): Role => {\n      const onLeftHalf = x < window.innerWidth / 2;\n      const moveOnLeft = resolveHand() === \"right\";\n      return onLeftHalf === moveOnLeft ? \"move\" : \"look\";\n    };\n\n    const begin = (joy: Joystick, x: number, y: number): void => {\n      joy.ox = x;\n      joy.oy = y;\n      joy.base.style.left = `${x - radius}px`;\n      joy.base.style.top = `${y - radius}px`;\n      joy.base.style.display = \"block\";\n      joy.knob.style.transform = \"translate(0px, 0px)\";\n      apply(joy, 0, 0);\n    };\n\n    const drag = (joy: Joystick, x: number, y: number): void => {\n      let dx = x - joy.ox;\n      let dy = y - joy.oy;\n      const len = Math.hypot(dx, dy) || 1;\n      if (len > radius) {\n        dx = (dx / len) * radius;\n        dy = (dy / len) * radius;\n      }\n      joy.knob.style.transform = `translate(${dx}px, ${dy}px)`;\n      apply(joy, dx / radius, dy / radius);\n    };\n\n    const end = (joy: Joystick): void => {\n      joy.id = null;\n      joy.base.style.display = \"none\";\n      reset(joy);\n    };\n\n    const onStart = (e: TouchEvent): void => {\n      let claimed = false;\n      for (const t of Array.from(e.changedTouches)) {\n        // Don't steal touches that land on overlay controls (buttons, panels).\n        const hit = document.elementFromPoint(t.clientX, t.clientY);\n        if (hit?.closest(\".sg-overlay__item\")) continue;\n        const joy = roleForX(t.clientX) === \"move\" ? move : look;\n        if (joy.id !== null) continue; // that joystick is already in use\n        joy.id = t.identifier;\n        begin(joy, t.clientX, t.clientY);\n        claimed = true;\n      }\n      if (claimed) e.preventDefault();\n    };\n\n    const onMove = (e: TouchEvent): void => {\n      let claimed = false;\n      for (const t of Array.from(e.changedTouches)) {\n        for (const joy of joys) {\n          if (joy.id === t.identifier) {\n            drag(joy, t.clientX, t.clientY);\n            claimed = true;\n          }\n        }\n      }\n      if (claimed) e.preventDefault();\n    };\n\n    const onEnd = (e: TouchEvent): void => {\n      for (const t of Array.from(e.changedTouches)) {\n        for (const joy of joys) if (joy.id === t.identifier) end(joy);\n      }\n    };\n\n    window.addEventListener(\"touchstart\", onStart, { passive: false });\n    window.addEventListener(\"touchmove\", onMove, { passive: false });\n    window.addEventListener(\"touchend\", onEnd);\n    window.addEventListener(\"touchcancel\", onEnd);\n\n    return {\n      element: layer,\n      destroy: () => {\n        window.removeEventListener(\"touchstart\", onStart);\n        window.removeEventListener(\"touchmove\", onMove);\n        window.removeEventListener(\"touchend\", onEnd);\n        window.removeEventListener(\"touchcancel\", onEnd);\n        controls.setMoveInput(0, 0);\n        controls.setLookInput(0, 0);\n      },\n    };\n  };\n}\n"],"mappings":"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"}

package/dist/index.d.cts

@@ -0,0 +1,92 @@
+import { Gallery } from "@scenography/engine";
+
+//#region src/text.d.ts
+/** A text value that may change with locale: a literal string or a getter. */
+type Text = string | (() => string);
+/** Resolve a `Text` to its current string value. */
+declare const resolveText: (text: Text) => string;
+/**
+ * A source of locale changes the overlay can subscribe to (e.g. an app's i18n
+ * store). Components re-apply their `Text` values whenever it fires, so text
+ * relocalizes live without remounting.
+ */
+interface LocaleSource {
+  /** Subscribe to locale changes; returns an unsubscribe function. */
+  subscribe(listener: () => void): () => void;
+}
+//#endregion
+//#region src/types.d.ts
+/** The nine regions a component can be placed in, on a 3×3 grid. */
+type OverlaySlot = "top-left" | "top-center" | "top-right" | "middle-left" | "center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
+/** What a component receives when mounted. */
+interface OverlayContext {
+  /** The running gallery (camera, entities, three escape hatch). */
+  gallery: Gallery;
+  /** The overlay root element, layered over the canvas. */
+  root: HTMLElement;
+  /** The element fullscreen targets (the gallery container). */
+  surface: HTMLElement;
+  /** Optional locale source for live-relocalizing component text. */
+  locale?: LocaleSource;
+}
+/** A mounted component: its element plus optional teardown. */
+interface OverlayHandle {
+  element: HTMLElement;
+  destroy?(): void;
+}
+/**
+ * A component factory. Given the context, return a DOM element (and optionally a
+ * teardown). This is the whole contract — a custom component is just a function,
+ * no daisyUI or framework required.
+ */
+type OverlayComponent = (ctx: OverlayContext) => HTMLElement | OverlayHandle;
+//#endregion
+//#region src/overlay.d.ts
+interface OverlayOptions {
+  gallery: Gallery;
+  /** Element to mount into and target for fullscreen. Defaults to the canvas's parent. */
+  container?: HTMLElement;
+  /** Locale source so components can relocalize their text live. */
+  locale?: LocaleSource;
+}
+interface Overlay {
+  /** The overlay root element. */
+  readonly root: HTMLElement;
+  /** Add a component to a slot. Returns a function that removes it. */
+  add(slot: OverlaySlot, component: OverlayComponent): () => void;
+  /** Remove the overlay and tear down every component. */
+  destroy(): void;
+}
+/**
+ * Create a DOM overlay layered over a gallery's canvas. The overlay itself is
+ * framework- and style-agnostic: it positions a 3×3 grid of slots and mounts
+ * component elements into them. What a component looks like is up to the
+ * component (daisyUI widgets, your own markup, anything).
+ */
+declare function createOverlay(options: OverlayOptions): Overlay;
+//#endregion
+//#region src/components/touch-controls/touch-controls.d.ts
+/** Which hand drives movement: `right` → move on the left, look on the right. */
+type Handedness = "right" | "left";
+interface TouchJoysticksOptions {
+  /**
+   * Whether the move joystick lives on the left ("right"-handed) or the right
+   * ("left"-handed) half of the screen. A getter is read on every touch, so the
+   * setting can change live. Defaults to "right".
+   */
+  handedness?: Handedness | (() => Handedness);
+  /** Maximum knob travel from the touch origin, in px. Defaults to 60. */
+  radius?: number;
+}
+/**
+ * Dual on-screen joysticks for touch input — both hidden until a finger lands,
+ * then drawn at the touch point. One half of the screen moves the camera
+ * (forward/back + strafe, like WASD), the other aims it (like dragging the
+ * mouse). Multi-touch: both can be active at once. Which half is which follows
+ * `handedness`. Works on any touch-capable device (no media-query gating), so it
+ * also responds to a laptop touchscreen. Drives `ctx.gallery.ctx.controls`.
+ */
+declare function touchJoysticks(options?: TouchJoysticksOptions): OverlayComponent;
+//#endregion
+export { type Handedness, type LocaleSource, type Overlay, type OverlayComponent, type OverlayContext, type OverlayHandle, type OverlayOptions, type OverlaySlot, type Text, type TouchJoysticksOptions, createOverlay, resolveText, touchJoysticks };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.mts

@@ -0,0 +1,92 @@
+import { Gallery } from "@scenography/engine";
+
+//#region src/text.d.ts
+/** A text value that may change with locale: a literal string or a getter. */
+type Text = string | (() => string);
+/** Resolve a `Text` to its current string value. */
+declare const resolveText: (text: Text) => string;
+/**
+ * A source of locale changes the overlay can subscribe to (e.g. an app's i18n
+ * store). Components re-apply their `Text` values whenever it fires, so text
+ * relocalizes live without remounting.
+ */
+interface LocaleSource {
+  /** Subscribe to locale changes; returns an unsubscribe function. */
+  subscribe(listener: () => void): () => void;
+}
+//#endregion
+//#region src/types.d.ts
+/** The nine regions a component can be placed in, on a 3×3 grid. */
+type OverlaySlot = "top-left" | "top-center" | "top-right" | "middle-left" | "center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
+/** What a component receives when mounted. */
+interface OverlayContext {
+  /** The running gallery (camera, entities, three escape hatch). */
+  gallery: Gallery;
+  /** The overlay root element, layered over the canvas. */
+  root: HTMLElement;
+  /** The element fullscreen targets (the gallery container). */
+  surface: HTMLElement;
+  /** Optional locale source for live-relocalizing component text. */
+  locale?: LocaleSource;
+}
+/** A mounted component: its element plus optional teardown. */
+interface OverlayHandle {
+  element: HTMLElement;
+  destroy?(): void;
+}
+/**
+ * A component factory. Given the context, return a DOM element (and optionally a
+ * teardown). This is the whole contract — a custom component is just a function,
+ * no daisyUI or framework required.
+ */
+type OverlayComponent = (ctx: OverlayContext) => HTMLElement | OverlayHandle;
+//#endregion
+//#region src/overlay.d.ts
+interface OverlayOptions {
+  gallery: Gallery;
+  /** Element to mount into and target for fullscreen. Defaults to the canvas's parent. */
+  container?: HTMLElement;
+  /** Locale source so components can relocalize their text live. */
+  locale?: LocaleSource;
+}
+interface Overlay {
+  /** The overlay root element. */
+  readonly root: HTMLElement;
+  /** Add a component to a slot. Returns a function that removes it. */
+  add(slot: OverlaySlot, component: OverlayComponent): () => void;
+  /** Remove the overlay and tear down every component. */
+  destroy(): void;
+}
+/**
+ * Create a DOM overlay layered over a gallery's canvas. The overlay itself is
+ * framework- and style-agnostic: it positions a 3×3 grid of slots and mounts
+ * component elements into them. What a component looks like is up to the
+ * component (daisyUI widgets, your own markup, anything).
+ */
+declare function createOverlay(options: OverlayOptions): Overlay;
+//#endregion
+//#region src/components/touch-controls/touch-controls.d.ts
+/** Which hand drives movement: `right` → move on the left, look on the right. */
+type Handedness = "right" | "left";
+interface TouchJoysticksOptions {
+  /**
+   * Whether the move joystick lives on the left ("right"-handed) or the right
+   * ("left"-handed) half of the screen. A getter is read on every touch, so the
+   * setting can change live. Defaults to "right".
+   */
+  handedness?: Handedness | (() => Handedness);
+  /** Maximum knob travel from the touch origin, in px. Defaults to 60. */
+  radius?: number;
+}
+/**
+ * Dual on-screen joysticks for touch input — both hidden until a finger lands,
+ * then drawn at the touch point. One half of the screen moves the camera
+ * (forward/back + strafe, like WASD), the other aims it (like dragging the
+ * mouse). Multi-touch: both can be active at once. Which half is which follows
+ * `handedness`. Works on any touch-capable device (no media-query gating), so it
+ * also responds to a laptop touchscreen. Drives `ctx.gallery.ctx.controls`.
+ */
+declare function touchJoysticks(options?: TouchJoysticksOptions): OverlayComponent;
+//#endregion
+export { type Handedness, type LocaleSource, type Overlay, type OverlayComponent, type OverlayContext, type OverlayHandle, type OverlayOptions, type OverlaySlot, type Text, type TouchJoysticksOptions, createOverlay, resolveText, touchJoysticks };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,237 @@
+//#region src/overlay.ts
+const STYLE_ID$1 = "scenography-overlay-styles";
+const SLOT_LAYOUT = {
+	"top-left": {
+		row: 1,
+		col: 1
+	},
+	"top-center": {
+		row: 1,
+		col: 2
+	},
+	"top-right": {
+		row: 1,
+		col: 3
+	},
+	"middle-left": {
+		row: 2,
+		col: 1
+	},
+	center: {
+		row: 2,
+		col: 2
+	},
+	"middle-right": {
+		row: 2,
+		col: 3
+	},
+	"bottom-left": {
+		row: 3,
+		col: 1
+	},
+	"bottom-center": {
+		row: 3,
+		col: 2
+	},
+	"bottom-right": {
+		row: 3,
+		col: 3
+	}
+};
+const along = (n) => n === 1 ? "flex-start" : n === 3 ? "flex-end" : "center";
+/** Inject the minimal layout CSS once. No daisyUI/Tailwind here — pure positioning. */
+function ensureStyles$1() {
+	if (typeof document === "undefined" || document.getElementById(STYLE_ID$1)) return;
+	const slotRules = Object.entries(SLOT_LAYOUT).map(([slot, { row, col }]) => `.sg-overlay__slot--${slot}{grid-row:${row};grid-column:${col};justify-content:${along(row)};align-items:${along(col)};}`).join("");
+	const style = document.createElement("style");
+	style.id = STYLE_ID$1;
+	style.textContent = ".sg-overlay{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);}.sg-overlay__slot{display:flex;flex-direction:column;gap:8px;padding:12px;}.sg-overlay__item{pointer-events:auto;}" + slotRules;
+	document.head.appendChild(style);
+}
+/**
+* Create a DOM overlay layered over a gallery's canvas. The overlay itself is
+* framework- and style-agnostic: it positions a 3×3 grid of slots and mounts
+* component elements into them. What a component looks like is up to the
+* component (daisyUI widgets, your own markup, anything).
+*/
+function createOverlay(options) {
+	ensureStyles$1();
+	const canvas = options.gallery.ctx.three.renderer.domElement;
+	const surface = options.container ?? canvas.parentElement ?? document.body;
+	if (getComputedStyle(surface).position === "static") surface.style.position = "relative";
+	const root = document.createElement("div");
+	root.className = "sg-overlay";
+	const slots = /* @__PURE__ */ new Map();
+	for (const slot of Object.keys(SLOT_LAYOUT)) {
+		const el = document.createElement("div");
+		el.className = `sg-overlay__slot sg-overlay__slot--${slot}`;
+		root.appendChild(el);
+		slots.set(slot, el);
+	}
+	surface.appendChild(root);
+	const ctx = {
+		gallery: options.gallery,
+		root,
+		surface,
+		locale: options.locale
+	};
+	const handles = /* @__PURE__ */ new Set();
+	return {
+		root,
+		add(slot, component) {
+			const result = component(ctx);
+			const handle = result instanceof HTMLElement ? { element: result } : result;
+			handle.element.classList.add("sg-overlay__item");
+			slots.get(slot)?.appendChild(handle.element);
+			handles.add(handle);
+			return () => {
+				handle.destroy?.();
+				handle.element.remove();
+				handles.delete(handle);
+			};
+		},
+		destroy() {
+			for (const handle of handles) {
+				handle.destroy?.();
+				handle.element.remove();
+			}
+			handles.clear();
+			root.remove();
+		}
+	};
+}
+//#endregion
+//#region src/text.ts
+/** Resolve a `Text` to its current string value. */
+const resolveText = (text) => typeof text === "function" ? text() : text;
+//#endregion
+//#region src/components/touch-controls/touch-controls.ts
+const STYLE_ID = "scenography-touch-joysticks-styles";
+function ensureStyles() {
+	if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = ".sg-joysticks{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden;touch-action:none;}.sg-joy{position:absolute;border-radius:50%;background:rgba(0,0,0,0.25);border:2px solid rgba(255,255,255,0.35);backdrop-filter:blur(2px);display:none;}.sg-joy__knob{position:absolute;top:50%;left:50%;border-radius:50%;background:rgba(255,255,255,0.85);box-shadow:0 2px 8px rgba(0,0,0,0.4);}";
+	document.head.appendChild(style);
+}
+/**
+* Dual on-screen joysticks for touch input — both hidden until a finger lands,
+* then drawn at the touch point. One half of the screen moves the camera
+* (forward/back + strafe, like WASD), the other aims it (like dragging the
+* mouse). Multi-touch: both can be active at once. Which half is which follows
+* `handedness`. Works on any touch-capable device (no media-query gating), so it
+* also responds to a laptop touchscreen. Drives `ctx.gallery.ctx.controls`.
+*/
+function touchJoysticks(options = {}) {
+	const radius = options.radius ?? 60;
+	const resolveHand = () => typeof options.handedness === "function" ? options.handedness() : options.handedness ?? "right";
+	return (ctx) => {
+		ensureStyles();
+		const controls = ctx.gallery.ctx.controls;
+		const layer = document.createElement("div");
+		layer.className = "sg-joysticks";
+		layer.style.pointerEvents = "none";
+		const makeJoy = (role) => {
+			const base = document.createElement("div");
+			base.className = "sg-joy";
+			const size = radius * 2;
+			base.style.width = base.style.height = `${size}px`;
+			const knob = document.createElement("div");
+			knob.className = "sg-joy__knob";
+			const knobSize = radius;
+			knob.style.width = knob.style.height = `${knobSize}px`;
+			knob.style.margin = `${-knobSize / 2}px 0 0 ${-knobSize / 2}px`;
+			base.appendChild(knob);
+			layer.appendChild(base);
+			return {
+				role,
+				id: null,
+				ox: 0,
+				oy: 0,
+				base,
+				knob
+			};
+		};
+		const move = makeJoy("move");
+		const look = makeJoy("look");
+		const joys = [move, look];
+		const reset = (joy) => {
+			if (joy.role === "move") controls.setMoveInput(0, 0);
+			else controls.setLookInput(0, 0);
+		};
+		const apply = (joy, nx, ny) => {
+			if (joy.role === "move") controls.setMoveInput(-ny, nx);
+			else controls.setLookInput(nx, -ny);
+		};
+		const roleForX = (x) => {
+			return x < window.innerWidth / 2 === (resolveHand() === "right") ? "move" : "look";
+		};
+		const begin = (joy, x, y) => {
+			joy.ox = x;
+			joy.oy = y;
+			joy.base.style.left = `${x - radius}px`;
+			joy.base.style.top = `${y - radius}px`;
+			joy.base.style.display = "block";
+			joy.knob.style.transform = "translate(0px, 0px)";
+			apply(joy, 0, 0);
+		};
+		const drag = (joy, x, y) => {
+			let dx = x - joy.ox;
+			let dy = y - joy.oy;
+			const len = Math.hypot(dx, dy) || 1;
+			if (len > radius) {
+				dx = dx / len * radius;
+				dy = dy / len * radius;
+			}
+			joy.knob.style.transform = `translate(${dx}px, ${dy}px)`;
+			apply(joy, dx / radius, dy / radius);
+		};
+		const end = (joy) => {
+			joy.id = null;
+			joy.base.style.display = "none";
+			reset(joy);
+		};
+		const onStart = (e) => {
+			let claimed = false;
+			for (const t of Array.from(e.changedTouches)) {
+				if (document.elementFromPoint(t.clientX, t.clientY)?.closest(".sg-overlay__item")) continue;
+				const joy = roleForX(t.clientX) === "move" ? move : look;
+				if (joy.id !== null) continue;
+				joy.id = t.identifier;
+				begin(joy, t.clientX, t.clientY);
+				claimed = true;
+			}
+			if (claimed) e.preventDefault();
+		};
+		const onMove = (e) => {
+			let claimed = false;
+			for (const t of Array.from(e.changedTouches)) for (const joy of joys) if (joy.id === t.identifier) {
+				drag(joy, t.clientX, t.clientY);
+				claimed = true;
+			}
+			if (claimed) e.preventDefault();
+		};
+		const onEnd = (e) => {
+			for (const t of Array.from(e.changedTouches)) for (const joy of joys) if (joy.id === t.identifier) end(joy);
+		};
+		window.addEventListener("touchstart", onStart, { passive: false });
+		window.addEventListener("touchmove", onMove, { passive: false });
+		window.addEventListener("touchend", onEnd);
+		window.addEventListener("touchcancel", onEnd);
+		return {
+			element: layer,
+			destroy: () => {
+				window.removeEventListener("touchstart", onStart);
+				window.removeEventListener("touchmove", onMove);
+				window.removeEventListener("touchend", onEnd);
+				window.removeEventListener("touchcancel", onEnd);
+				controls.setMoveInput(0, 0);
+				controls.setLookInput(0, 0);
+			}
+		};
+	};
+}
+//#endregion
+export { createOverlay, resolveText, touchJoysticks };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["STYLE_ID","ensureStyles"],"sources":["../src/overlay.ts","../src/text.ts","../src/components/touch-controls/touch-controls.ts"],"sourcesContent":["import type { Gallery } from \"@scenography/engine\";\n\nimport type { OverlayComponent, OverlayContext, OverlayHandle, OverlaySlot } from \"./types\";\nimport type { LocaleSource } from \"./text\";\n\nconst STYLE_ID = \"scenography-overlay-styles\";\n\nconst SLOT_LAYOUT: Record<OverlaySlot, { row: number; col: number }> = {\n  \"top-left\": { row: 1, col: 1 },\n  \"top-center\": { row: 1, col: 2 },\n  \"top-right\": { row: 1, col: 3 },\n  \"middle-left\": { row: 2, col: 1 },\n  center: { row: 2, col: 2 },\n  \"middle-right\": { row: 2, col: 3 },\n  \"bottom-left\": { row: 3, col: 1 },\n  \"bottom-center\": { row: 3, col: 2 },\n  \"bottom-right\": { row: 3, col: 3 },\n};\n\nconst along = (n: number): string => (n === 1 ? \"flex-start\" : n === 3 ? \"flex-end\" : \"center\");\n\n/** Inject the minimal layout CSS once. No daisyUI/Tailwind here — pure positioning. */\nfunction ensureStyles(): void {\n  if (typeof document === \"undefined\" || document.getElementById(STYLE_ID)) return;\n  const slotRules = (Object.entries(SLOT_LAYOUT) as [OverlaySlot, { row: number; col: number }][])\n    .map(\n      ([slot, { row, col }]) =>\n        `.sg-overlay__slot--${slot}{grid-row:${row};grid-column:${col};justify-content:${along(row)};align-items:${along(col)};}`,\n    )\n    .join(\"\");\n  const style = document.createElement(\"style\");\n  style.id = STYLE_ID;\n  style.textContent =\n    `.sg-overlay{position:absolute;inset:0;pointer-events:none;display:grid;` +\n    `grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);}` +\n    `.sg-overlay__slot{display:flex;flex-direction:column;gap:8px;padding:12px;}` +\n    `.sg-overlay__item{pointer-events:auto;}` +\n    slotRules;\n  document.head.appendChild(style);\n}\n\nexport interface OverlayOptions {\n  gallery: Gallery;\n  /** Element to mount into and target for fullscreen. Defaults to the canvas's parent. */\n  container?: HTMLElement;\n  /** Locale source so components can relocalize their text live. */\n  locale?: LocaleSource;\n}\n\nexport interface Overlay {\n  /** The overlay root element. */\n  readonly root: HTMLElement;\n  /** Add a component to a slot. Returns a function that removes it. */\n  add(slot: OverlaySlot, component: OverlayComponent): () => void;\n  /** Remove the overlay and tear down every component. */\n  destroy(): void;\n}\n\n/**\n * Create a DOM overlay layered over a gallery's canvas. The overlay itself is\n * framework- and style-agnostic: it positions a 3×3 grid of slots and mounts\n * component elements into them. What a component looks like is up to the\n * component (daisyUI widgets, your own markup, anything).\n */\nexport function createOverlay(options: OverlayOptions): Overlay {\n  ensureStyles();\n\n  const canvas = options.gallery.ctx.three.renderer.domElement;\n  const surface = options.container ?? canvas.parentElement ?? document.body;\n  if (getComputedStyle(surface).position === \"static\") surface.style.position = \"relative\";\n\n  const root = document.createElement(\"div\");\n  root.className = \"sg-overlay\";\n\n  const slots = new Map<OverlaySlot, HTMLElement>();\n  for (const slot of Object.keys(SLOT_LAYOUT) as OverlaySlot[]) {\n    const el = document.createElement(\"div\");\n    el.className = `sg-overlay__slot sg-overlay__slot--${slot}`;\n    root.appendChild(el);\n    slots.set(slot, el);\n  }\n  surface.appendChild(root);\n\n  const ctx: OverlayContext = { gallery: options.gallery, root, surface, locale: options.locale };\n  const handles = new Set<OverlayHandle>();\n\n  return {\n    root,\n    add(slot, component) {\n      const result = component(ctx);\n      const handle: OverlayHandle = result instanceof HTMLElement ? { element: result } : result;\n      handle.element.classList.add(\"sg-overlay__item\");\n      slots.get(slot)?.appendChild(handle.element);\n      handles.add(handle);\n      return () => {\n        handle.destroy?.();\n        handle.element.remove();\n        handles.delete(handle);\n      };\n    },\n    destroy() {\n      for (const handle of handles) {\n        handle.destroy?.();\n        handle.element.remove();\n      }\n      handles.clear();\n      root.remove();\n    },\n  };\n}\n","/** A text value that may change with locale: a literal string or a getter. */\nexport type Text = string | (() => string);\n\n/** Resolve a `Text` to its current string value. */\nexport const resolveText = (text: Text): string => (typeof text === \"function\" ? text() : text);\n\n/**\n * A source of locale changes the overlay can subscribe to (e.g. an app's i18n\n * store). Components re-apply their `Text` values whenever it fires, so text\n * relocalizes live without remounting.\n */\nexport interface LocaleSource {\n  /** Subscribe to locale changes; returns an unsubscribe function. */\n  subscribe(listener: () => void): () => void;\n}\n","import type { OverlayComponent, OverlayContext } from \"../../types\";\n\n/** Which hand drives movement: `right` → move on the left, look on the right. */\nexport type Handedness = \"right\" | \"left\";\n\nexport interface TouchJoysticksOptions {\n  /**\n   * Whether the move joystick lives on the left (\"right\"-handed) or the right\n   * (\"left\"-handed) half of the screen. A getter is read on every touch, so the\n   * setting can change live. Defaults to \"right\".\n   */\n  handedness?: Handedness | (() => Handedness);\n  /** Maximum knob travel from the touch origin, in px. Defaults to 60. */\n  radius?: number;\n}\n\nconst STYLE_ID = \"scenography-touch-joysticks-styles\";\n\nfunction ensureStyles(): void {\n  if (typeof document === \"undefined\" || document.getElementById(STYLE_ID)) return;\n  const style = document.createElement(\"style\");\n  style.id = STYLE_ID;\n  style.textContent =\n    // Full-viewport, click-through layer that just hosts the joystick visuals;\n    // input is read from window touch events, so nothing here grabs pointers.\n    `.sg-joysticks{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden;touch-action:none;}` +\n    `.sg-joy{position:absolute;border-radius:50%;background:rgba(0,0,0,0.25);` +\n    `border:2px solid rgba(255,255,255,0.35);backdrop-filter:blur(2px);display:none;}` +\n    `.sg-joy__knob{position:absolute;top:50%;left:50%;border-radius:50%;` +\n    `background:rgba(255,255,255,0.85);box-shadow:0 2px 8px rgba(0,0,0,0.4);}`;\n  document.head.appendChild(style);\n}\n\ntype Role = \"move\" | \"look\";\n\ninterface Joystick {\n  role: Role;\n  id: number | null;\n  ox: number;\n  oy: number;\n  base: HTMLElement;\n  knob: HTMLElement;\n}\n\n/**\n * Dual on-screen joysticks for touch input — both hidden until a finger lands,\n * then drawn at the touch point. One half of the screen moves the camera\n * (forward/back + strafe, like WASD), the other aims it (like dragging the\n * mouse). Multi-touch: both can be active at once. Which half is which follows\n * `handedness`. Works on any touch-capable device (no media-query gating), so it\n * also responds to a laptop touchscreen. Drives `ctx.gallery.ctx.controls`.\n */\nexport function touchJoysticks(options: TouchJoysticksOptions = {}): OverlayComponent {\n  const radius = options.radius ?? 60;\n  const resolveHand = (): Handedness =>\n    typeof options.handedness === \"function\"\n      ? options.handedness()\n      : (options.handedness ?? \"right\");\n\n  return (ctx: OverlayContext) => {\n    ensureStyles();\n    const controls = ctx.gallery.ctx.controls;\n\n    const layer = document.createElement(\"div\");\n    layer.className = \"sg-joysticks\";\n    // Inline pointer-events:none survives the overlay's `.sg-overlay__item` rule.\n    layer.style.pointerEvents = \"none\";\n\n    const makeJoy = (role: Role): Joystick => {\n      const base = document.createElement(\"div\");\n      base.className = \"sg-joy\";\n      const size = radius * 2;\n      base.style.width = base.style.height = `${size}px`;\n      const knob = document.createElement(\"div\");\n      knob.className = \"sg-joy__knob\";\n      const knobSize = radius;\n      knob.style.width = knob.style.height = `${knobSize}px`;\n      knob.style.margin = `${-knobSize / 2}px 0 0 ${-knobSize / 2}px`;\n      base.appendChild(knob);\n      layer.appendChild(base);\n      return { role, id: null, ox: 0, oy: 0, base, knob };\n    };\n\n    const move = makeJoy(\"move\");\n    const look = makeJoy(\"look\");\n    const joys = [move, look];\n\n    const reset = (joy: Joystick): void => {\n      if (joy.role === \"move\") controls.setMoveInput(0, 0);\n      else controls.setLookInput(0, 0);\n    };\n\n    const apply = (joy: Joystick, nx: number, ny: number): void => {\n      // Up (negative screen-Y) means forward / look up.\n      if (joy.role === \"move\") controls.setMoveInput(-ny, nx);\n      else controls.setLookInput(nx, -ny);\n    };\n\n    // Right-handed: move on the left half, look on the right. Mirror for lefties.\n    const roleForX = (x: number): Role => {\n      const onLeftHalf = x < window.innerWidth / 2;\n      const moveOnLeft = resolveHand() === \"right\";\n      return onLeftHalf === moveOnLeft ? \"move\" : \"look\";\n    };\n\n    const begin = (joy: Joystick, x: number, y: number): void => {\n      joy.ox = x;\n      joy.oy = y;\n      joy.base.style.left = `${x - radius}px`;\n      joy.base.style.top = `${y - radius}px`;\n      joy.base.style.display = \"block\";\n      joy.knob.style.transform = \"translate(0px, 0px)\";\n      apply(joy, 0, 0);\n    };\n\n    const drag = (joy: Joystick, x: number, y: number): void => {\n      let dx = x - joy.ox;\n      let dy = y - joy.oy;\n      const len = Math.hypot(dx, dy) || 1;\n      if (len > radius) {\n        dx = (dx / len) * radius;\n        dy = (dy / len) * radius;\n      }\n      joy.knob.style.transform = `translate(${dx}px, ${dy}px)`;\n      apply(joy, dx / radius, dy / radius);\n    };\n\n    const end = (joy: Joystick): void => {\n      joy.id = null;\n      joy.base.style.display = \"none\";\n      reset(joy);\n    };\n\n    const onStart = (e: TouchEvent): void => {\n      let claimed = false;\n      for (const t of Array.from(e.changedTouches)) {\n        // Don't steal touches that land on overlay controls (buttons, panels).\n        const hit = document.elementFromPoint(t.clientX, t.clientY);\n        if (hit?.closest(\".sg-overlay__item\")) continue;\n        const joy = roleForX(t.clientX) === \"move\" ? move : look;\n        if (joy.id !== null) continue; // that joystick is already in use\n        joy.id = t.identifier;\n        begin(joy, t.clientX, t.clientY);\n        claimed = true;\n      }\n      if (claimed) e.preventDefault();\n    };\n\n    const onMove = (e: TouchEvent): void => {\n      let claimed = false;\n      for (const t of Array.from(e.changedTouches)) {\n        for (const joy of joys) {\n          if (joy.id === t.identifier) {\n            drag(joy, t.clientX, t.clientY);\n            claimed = true;\n          }\n        }\n      }\n      if (claimed) e.preventDefault();\n    };\n\n    const onEnd = (e: TouchEvent): void => {\n      for (const t of Array.from(e.changedTouches)) {\n        for (const joy of joys) if (joy.id === t.identifier) end(joy);\n      }\n    };\n\n    window.addEventListener(\"touchstart\", onStart, { passive: false });\n    window.addEventListener(\"touchmove\", onMove, { passive: false });\n    window.addEventListener(\"touchend\", onEnd);\n    window.addEventListener(\"touchcancel\", onEnd);\n\n    return {\n      element: layer,\n      destroy: () => {\n        window.removeEventListener(\"touchstart\", onStart);\n        window.removeEventListener(\"touchmove\", onMove);\n        window.removeEventListener(\"touchend\", onEnd);\n        window.removeEventListener(\"touchcancel\", onEnd);\n        controls.setMoveInput(0, 0);\n        controls.setLookInput(0, 0);\n      },\n    };\n  };\n}\n"],"mappings":";AAKA,MAAMA,aAAW;AAEjB,MAAM,cAAiE;CACrE,YAAY;EAAE,KAAK;EAAG,KAAK;CAAE;CAC7B,cAAc;EAAE,KAAK;EAAG,KAAK;CAAE;CAC/B,aAAa;EAAE,KAAK;EAAG,KAAK;CAAE;CAC9B,eAAe;EAAE,KAAK;EAAG,KAAK;CAAE;CAChC,QAAQ;EAAE,KAAK;EAAG,KAAK;CAAE;CACzB,gBAAgB;EAAE,KAAK;EAAG,KAAK;CAAE;CACjC,eAAe;EAAE,KAAK;EAAG,KAAK;CAAE;CAChC,iBAAiB;EAAE,KAAK;EAAG,KAAK;CAAE;CAClC,gBAAgB;EAAE,KAAK;EAAG,KAAK;CAAE;AACnC;AAEA,MAAM,SAAS,MAAuB,MAAM,IAAI,eAAe,MAAM,IAAI,aAAa;;AAGtF,SAASC,iBAAqB;CAC5B,IAAI,OAAO,aAAa,eAAe,SAAS,eAAeD,UAAQ,GAAG;CAC1E,MAAM,YAAa,OAAO,QAAQ,WAAW,CAAC,CAC3C,KACE,CAAC,MAAM,EAAE,KAAK,WACb,sBAAsB,KAAK,YAAY,IAAI,eAAe,IAAI,mBAAmB,MAAM,GAAG,EAAE,eAAe,MAAM,GAAG,EAAE,GAC1H,CAAC,CACA,KAAK,EAAE;CACV,MAAM,QAAQ,SAAS,cAAc,OAAO;CAC5C,MAAM,KAAKA;CACX,MAAM,cACJ,oQAIA;CACF,SAAS,KAAK,YAAY,KAAK;AACjC;;;;;;;AAyBA,SAAgB,cAAc,SAAkC;CAC9D,eAAa;CAEb,MAAM,SAAS,QAAQ,QAAQ,IAAI,MAAM,SAAS;CAClD,MAAM,UAAU,QAAQ,aAAa,OAAO,iBAAiB,SAAS;CACtE,IAAI,iBAAiB,OAAO,CAAC,CAAC,aAAa,UAAU,QAAQ,MAAM,WAAW;CAE9E,MAAM,OAAO,SAAS,cAAc,KAAK;CACzC,KAAK,YAAY;CAEjB,MAAM,wBAAQ,IAAI,IAA8B;CAChD,KAAK,MAAM,QAAQ,OAAO,KAAK,WAAW,GAAoB;EAC5D,MAAM,KAAK,SAAS,cAAc,KAAK;EACvC,GAAG,YAAY,sCAAsC;EACrD,KAAK,YAAY,EAAE;EACnB,MAAM,IAAI,MAAM,EAAE;CACpB;CACA,QAAQ,YAAY,IAAI;CAExB,MAAM,MAAsB;EAAE,SAAS,QAAQ;EAAS;EAAM;EAAS,QAAQ,QAAQ;CAAO;CAC9F,MAAM,0BAAU,IAAI,IAAmB;CAEvC,OAAO;EACL;EACA,IAAI,MAAM,WAAW;GACnB,MAAM,SAAS,UAAU,GAAG;GAC5B,MAAM,SAAwB,kBAAkB,cAAc,EAAE,SAAS,OAAO,IAAI;GACpF,OAAO,QAAQ,UAAU,IAAI,kBAAkB;GAC/C,MAAM,IAAI,IAAI,CAAC,EAAE,YAAY,OAAO,OAAO;GAC3C,QAAQ,IAAI,MAAM;GAClB,aAAa;IACX,OAAO,UAAU;IACjB,OAAO,QAAQ,OAAO;IACtB,QAAQ,OAAO,MAAM;GACvB;EACF;EACA,UAAU;GACR,KAAK,MAAM,UAAU,SAAS;IAC5B,OAAO,UAAU;IACjB,OAAO,QAAQ,OAAO;GACxB;GACA,QAAQ,MAAM;GACd,KAAK,OAAO;EACd;CACF;AACF;;;;ACzGA,MAAa,eAAe,SAAwB,OAAO,SAAS,aAAa,KAAK,IAAI;;;ACY1F,MAAM,WAAW;AAEjB,SAAS,eAAqB;CAC5B,IAAI,OAAO,aAAa,eAAe,SAAS,eAAe,QAAQ,GAAG;CAC1E,MAAM,QAAQ,SAAS,cAAc,OAAO;CAC5C,MAAM,KAAK;CACX,MAAM,cAGJ;CAKF,SAAS,KAAK,YAAY,KAAK;AACjC;;;;;;;;;AAqBA,SAAgB,eAAe,UAAiC,CAAC,GAAqB;CACpF,MAAM,SAAS,QAAQ,UAAU;CACjC,MAAM,oBACJ,OAAO,QAAQ,eAAe,aAC1B,QAAQ,WAAW,IAClB,QAAQ,cAAc;CAE7B,QAAQ,QAAwB;EAC9B,aAAa;EACb,MAAM,WAAW,IAAI,QAAQ,IAAI;EAEjC,MAAM,QAAQ,SAAS,cAAc,KAAK;EAC1C,MAAM,YAAY;EAElB,MAAM,MAAM,gBAAgB;EAE5B,MAAM,WAAW,SAAyB;GACxC,MAAM,OAAO,SAAS,cAAc,KAAK;GACzC,KAAK,YAAY;GACjB,MAAM,OAAO,SAAS;GACtB,KAAK,MAAM,QAAQ,KAAK,MAAM,SAAS,GAAG,KAAK;GAC/C,MAAM,OAAO,SAAS,cAAc,KAAK;GACzC,KAAK,YAAY;GACjB,MAAM,WAAW;GACjB,KAAK,MAAM,QAAQ,KAAK,MAAM,SAAS,GAAG,SAAS;GACnD,KAAK,MAAM,SAAS,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,WAAW,EAAE;GAC5D,KAAK,YAAY,IAAI;GACrB,MAAM,YAAY,IAAI;GACtB,OAAO;IAAE;IAAM,IAAI;IAAM,IAAI;IAAG,IAAI;IAAG;IAAM;GAAK;EACpD;EAEA,MAAM,OAAO,QAAQ,MAAM;EAC3B,MAAM,OAAO,QAAQ,MAAM;EAC3B,MAAM,OAAO,CAAC,MAAM,IAAI;EAExB,MAAM,SAAS,QAAwB;GACrC,IAAI,IAAI,SAAS,QAAQ,SAAS,aAAa,GAAG,CAAC;QAC9C,SAAS,aAAa,GAAG,CAAC;EACjC;EAEA,MAAM,SAAS,KAAe,IAAY,OAAqB;GAE7D,IAAI,IAAI,SAAS,QAAQ,SAAS,aAAa,CAAC,IAAI,EAAE;QACjD,SAAS,aAAa,IAAI,CAAC,EAAE;EACpC;EAGA,MAAM,YAAY,MAAoB;GAGpC,OAFmB,IAAI,OAAO,aAAa,OACxB,YAAY,MAAM,WACF,SAAS;EAC9C;EAEA,MAAM,SAAS,KAAe,GAAW,MAAoB;GAC3D,IAAI,KAAK;GACT,IAAI,KAAK;GACT,IAAI,KAAK,MAAM,OAAO,GAAG,IAAI,OAAO;GACpC,IAAI,KAAK,MAAM,MAAM,GAAG,IAAI,OAAO;GACnC,IAAI,KAAK,MAAM,UAAU;GACzB,IAAI,KAAK,MAAM,YAAY;GAC3B,MAAM,KAAK,GAAG,CAAC;EACjB;EAEA,MAAM,QAAQ,KAAe,GAAW,MAAoB;GAC1D,IAAI,KAAK,IAAI,IAAI;GACjB,IAAI,KAAK,IAAI,IAAI;GACjB,MAAM,MAAM,KAAK,MAAM,IAAI,EAAE,KAAK;GAClC,IAAI,MAAM,QAAQ;IAChB,KAAM,KAAK,MAAO;IAClB,KAAM,KAAK,MAAO;GACpB;GACA,IAAI,KAAK,MAAM,YAAY,aAAa,GAAG,MAAM,GAAG;GACpD,MAAM,KAAK,KAAK,QAAQ,KAAK,MAAM;EACrC;EAEA,MAAM,OAAO,QAAwB;GACnC,IAAI,KAAK;GACT,IAAI,KAAK,MAAM,UAAU;GACzB,MAAM,GAAG;EACX;EAEA,MAAM,WAAW,MAAwB;GACvC,IAAI,UAAU;GACd,KAAK,MAAM,KAAK,MAAM,KAAK,EAAE,cAAc,GAAG;IAG5C,IADY,SAAS,iBAAiB,EAAE,SAAS,EAAE,OAC7C,CAAC,EAAE,QAAQ,mBAAmB,GAAG;IACvC,MAAM,MAAM,SAAS,EAAE,OAAO,MAAM,SAAS,OAAO;IACpD,IAAI,IAAI,OAAO,MAAM;IACrB,IAAI,KAAK,EAAE;IACX,MAAM,KAAK,EAAE,SAAS,EAAE,OAAO;IAC/B,UAAU;GACZ;GACA,IAAI,SAAS,EAAE,eAAe;EAChC;EAEA,MAAM,UAAU,MAAwB;GACtC,IAAI,UAAU;GACd,KAAK,MAAM,KAAK,MAAM,KAAK,EAAE,cAAc,GACzC,KAAK,MAAM,OAAO,MAChB,IAAI,IAAI,OAAO,EAAE,YAAY;IAC3B,KAAK,KAAK,EAAE,SAAS,EAAE,OAAO;IAC9B,UAAU;GACZ;GAGJ,IAAI,SAAS,EAAE,eAAe;EAChC;EAEA,MAAM,SAAS,MAAwB;GACrC,KAAK,MAAM,KAAK,MAAM,KAAK,EAAE,cAAc,GACzC,KAAK,MAAM,OAAO,MAAM,IAAI,IAAI,OAAO,EAAE,YAAY,IAAI,GAAG;EAEhE;EAEA,OAAO,iBAAiB,cAAc,SAAS,EAAE,SAAS,MAAM,CAAC;EACjE,OAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;EAC/D,OAAO,iBAAiB,YAAY,KAAK;EACzC,OAAO,iBAAiB,eAAe,KAAK;EAE5C,OAAO;GACL,SAAS;GACT,eAAe;IACb,OAAO,oBAAoB,cAAc,OAAO;IAChD,OAAO,oBAAoB,aAAa,MAAM;IAC9C,OAAO,oBAAoB,YAAY,KAAK;IAC5C,OAAO,oBAAoB,eAAe,KAAK;IAC/C,SAAS,aAAa,GAAG,CAAC;IAC1B,SAAS,aAAa,GAAG,CAAC;GAC5B;EACF;CACF;AACF"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@scenography/overlay",
+  "version": "0.2.0",
+  "description": "Framework-agnostic DOM overlay for scenography galleries: slot positioning, a component API, and built-in touch controls. No UI-library coupling.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "devDependencies": {
+    "@scenography/engine": "0.2.0"
+  },
+  "peerDependencies": {
+    "@scenography/engine": "0.2.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}