@almadar/ui 6.5.0 → 6.7.0

package/dist/context/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var logger = require('@almadar/logger');
 var core = require('@almadar/core');
+var logger = require('@almadar/logger');
 var jsxRuntime = require('react/jsx-runtime');
 var providers = require('@almadar/ui/providers');
 var context = require('@almadar/ui/context');
@@ -96,18 +96,9 @@ function reconcileSlotProps(prev, next) {
 var log = logger.createLogger("almadar:ui:ui-slots");
 var DEFAULT_SOURCE_KEY = "__default__";
 var MULTI_SOURCE_STACK_TRAIT = "__multi_source_stack__";
-var ALL_SLOTS = [
-  "main",
-  "sidebar",
-  "modal",
-  "drawer",
-  "overlay",
-  "center",
-  "toast",
-  "hud-top",
-  "hud-bottom",
-  "floating"
-];
+var ALL_SLOTS = core.UI_SLOTS.filter(
+  (slot) => !slot.includes(".") && slot !== "hud" && slot !== "screen"
+);
 var DEFAULT_SLOTS = ALL_SLOTS.reduce(
   (acc, slot) => {
     acc[slot] = null;
@@ -605,6 +596,12 @@ var BUILT_IN_THEMES = [
     displayName: "Corporate",
     hasLightMode: true,
     hasDarkMode: true
+  },
+  {
+    name: "comic",
+    displayName: "Comic Studio",
+    hasLightMode: true,
+    hasDarkMode: true
   }
 ];
 var ThemeContext = React.createContext(void 0);

package/dist/context/index.js

@@ -1,6 +1,6 @@
 import React, { createContext, useMemo, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import { UI_SLOTS, isRenderBindingMarker } from '@almadar/core';
 import { createLogger } from '@almadar/logger';
-import { isRenderBindingMarker } from '@almadar/core';
 import { jsx } from 'react/jsx-runtime';
 export { ANONYMOUS_USER, CurrentPagePathContext, CurrentPagePathProvider, OrbitalThemeProvider, UserContext, UserProvider, useCurrentPagePath, useHasPermission, useHasRole, useUser, useUserForEvaluation } from '@almadar/ui/providers';
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from '@almadar/ui/context';
@@ -90,18 +90,9 @@ function reconcileSlotProps(prev, next) {
 var log = createLogger("almadar:ui:ui-slots");
 var DEFAULT_SOURCE_KEY = "__default__";
 var MULTI_SOURCE_STACK_TRAIT = "__multi_source_stack__";
-var ALL_SLOTS = [
-  "main",
-  "sidebar",
-  "modal",
-  "drawer",
-  "overlay",
-  "center",
-  "toast",
-  "hud-top",
-  "hud-bottom",
-  "floating"
-];
+var ALL_SLOTS = UI_SLOTS.filter(
+  (slot) => !slot.includes(".") && slot !== "hud" && slot !== "screen"
+);
 var DEFAULT_SLOTS = ALL_SLOTS.reduce(
   (acc, slot) => {
     acc[slot] = null;
@@ -599,6 +590,12 @@ var BUILT_IN_THEMES = [
     displayName: "Corporate",
     hasLightMode: true,
     hasDarkMode: true
+  },
+  {
+    name: "comic",
+    displayName: "Comic Studio",
+    hasLightMode: true,
+    hasDarkMode: true
   }
 ];
 var ThemeContext = createContext(void 0);

package/dist/hooks/index.cjs

@@ -1023,6 +1023,63 @@ function useEmitEvent() {
     [eventBus]
   );
 }
+function useKeyboardRouter(options) {
+  const {
+    captureTable,
+    editorFocusEvent = "EDITOR_FOCUS",
+    editorBlurEvent = "EDITOR_BLUR",
+    keyEvent = "KEY",
+    enabled = true
+  } = options;
+  const eventBus = useEventBus();
+  const captureTableRef = React.useRef(captureTable);
+  captureTableRef.current = captureTable;
+  const focusedEditorIdRef = React.useRef(null);
+  React.useEffect(() => {
+    const unsubFocus = eventBus.on(`UI:${editorFocusEvent}`, (event) => {
+      const editorId = event.payload?.editorId;
+      if (typeof editorId === "string") {
+        focusedEditorIdRef.current = editorId;
+      }
+    });
+    const unsubBlur = eventBus.on(`UI:${editorBlurEvent}`, (event) => {
+      const editorId = event.payload?.editorId;
+      if (typeof editorId === "string" && focusedEditorIdRef.current === editorId) {
+        focusedEditorIdRef.current = null;
+      }
+    });
+    return () => {
+      unsubFocus();
+      unsubBlur();
+    };
+  }, [eventBus, editorFocusEvent, editorBlurEvent]);
+  React.useEffect(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (event.isComposing) return;
+      const target = focusedEditorIdRef.current ?? "shell";
+      const entry = captureTableRef.current[target];
+      const captured = entry !== void 0 && (entry.mode === "any" || entry.keys.has(event.key));
+      if (captured) {
+        event.preventDefault();
+      }
+      eventBus.emit(`UI:${keyEvent}`, {
+        editorId: target,
+        key: event.key,
+        code: event.code,
+        ctrl: event.ctrlKey,
+        alt: event.altKey,
+        shift: event.shiftKey,
+        meta: event.metaKey,
+        repeat: event.repeat
+      });
+    };
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+    };
+  }, [eventBus, enabled, keyEvent]);
+}
 function expressionEqual(a, b) {
   if (Object.is(a, b)) return true;
   if (Array.isArray(a) && Array.isArray(b)) {
@@ -1108,18 +1165,9 @@ function reconcileSlotProps(prev, next) {
 var log11 = logger.createLogger("almadar:ui:ui-slots");
 var DEFAULT_SOURCE_KEY = "__default__";
 var MULTI_SOURCE_STACK_TRAIT = "__multi_source_stack__";
-var ALL_SLOTS = [
-  "main",
-  "sidebar",
-  "modal",
-  "drawer",
-  "overlay",
-  "center",
-  "toast",
-  "hud-top",
-  "hud-bottom",
-  "floating"
-];
+var ALL_SLOTS = core.UI_SLOTS.filter(
+  (slot) => !slot.includes(".") && slot !== "hud" && slot !== "screen"
+);
 var DEFAULT_SLOTS = ALL_SLOTS.reduce(
   (acc, slot) => {
     acc[slot] = null;
@@ -2217,7 +2265,8 @@ var en_default = {
   "richTextEditor.image": "Insert image",
   "richTextEditor.imagePrompt": "Image URL",
   "richTextEditor.placeholder": "Start writing\u2026",
-  "form.imageUrlFallback": "\u2026or paste an image address"
+  "form.imageUrlFallback": "\u2026or paste an image address",
+  "mermaid.unrenderable": "This diagram could not be displayed. Its source is shown below."
 };
 
 // hooks/useTranslate.ts
@@ -2956,6 +3005,7 @@ exports.useGitHubRepo = useGitHubRepo;
 exports.useGitHubRepos = useGitHubRepos;
 exports.useGitHubStatus = useGitHubStatus;
 exports.useInfiniteScroll = useInfiniteScroll;
+exports.useKeyboardRouter = useKeyboardRouter;
 exports.useLongPress = useLongPress;
 exports.useMediaQuery = useMediaQuery;
 exports.useOrbitalHistory = useOrbitalHistory;

package/dist/hooks/index.d.cts

@@ -1,7 +1,7 @@
 import { OrbitalSchema, FieldValue, EventPayload, EntityFrameState, EntityFieldWrite } from '@almadar/core';
 export { BusEvent, BusEventListener, BusEventSource, BusEventListener as EventListener, UISlot, Unsubscribe } from '@almadar/core';
-import { a as useEventBus } from '../useEventBus-Ckr4wqW3.cjs';
-export { u as useEmitEvent, b as useEventListener } from '../useEventBus-Ckr4wqW3.cjs';
+import { b as useEventBus } from '../useKeyboardRouter-DQEE_9mq.cjs';
+export { E as EditorKeyEvent, a as KeyCaptureEntry, K as KeyCaptureTable, U as UseKeyboardRouterOptions, u as useEmitEvent, c as useEventListener, d as useKeyboardRouter } from '../useKeyboardRouter-DQEE_9mq.cjs';
 export { E as EventBusContextType } from '../event-bus-types-Bl78kokd.cjs';
 export { D as DEFAULT_SLOTS, S as SlotAnimation, a as SlotChangeCallback, b as SlotContent, c as SlotRenderConfig, U as UISlotManager, u as useUISlotManager } from '../useUISlots-GNwGLlW2.cjs';
 export { a as NavStackApi, u as useNavStack } from '../NavStackContext-bw2nlBgT.cjs';

package/dist/hooks/index.d.ts

@@ -1,7 +1,7 @@
 import { OrbitalSchema, FieldValue, EventPayload, EntityFrameState, EntityFieldWrite } from '@almadar/core';
 export { BusEvent, BusEventListener, BusEventSource, BusEventListener as EventListener, UISlot, Unsubscribe } from '@almadar/core';
-import { a as useEventBus } from '../useEventBus-CQWyAWpK.js';
-export { u as useEmitEvent, b as useEventListener } from '../useEventBus-CQWyAWpK.js';
+import { b as useEventBus } from '../useKeyboardRouter-D84cNWmA.js';
+export { E as EditorKeyEvent, a as KeyCaptureEntry, K as KeyCaptureTable, U as UseKeyboardRouterOptions, u as useEmitEvent, c as useEventListener, d as useKeyboardRouter } from '../useKeyboardRouter-D84cNWmA.js';
 export { E as EventBusContextType } from '../event-bus-types-Bl78kokd.js';
 export { D as DEFAULT_SLOTS, S as SlotAnimation, a as SlotChangeCallback, b as SlotContent, c as SlotRenderConfig, U as UISlotManager, u as useUISlotManager } from '../useUISlots-GNwGLlW2.js';
 export { a as NavStackApi, u as useNavStack } from '../NavStackContext-bw2nlBgT.js';

package/dist/hooks/index.js

@@ -2,7 +2,7 @@ import React, { createContext, useCallback, useState, useEffect, useMemo, useCon
 import { createLogger } from '@almadar/logger';
 import { EventBusContext, useTraitScopeChain } from '@almadar/ui/providers';
 export { useNavStack } from '@almadar/ui/providers';
-import { mergeEntityFrame, isRenderBindingMarker } from '@almadar/core';
+import { UI_SLOTS, mergeEntityFrame, isRenderBindingMarker } from '@almadar/core';
 import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 
 var log = createLogger("almadar:ui:orbital-history");
@@ -1018,6 +1018,63 @@ function useEmitEvent() {
     [eventBus]
   );
 }
+function useKeyboardRouter(options) {
+  const {
+    captureTable,
+    editorFocusEvent = "EDITOR_FOCUS",
+    editorBlurEvent = "EDITOR_BLUR",
+    keyEvent = "KEY",
+    enabled = true
+  } = options;
+  const eventBus = useEventBus();
+  const captureTableRef = useRef(captureTable);
+  captureTableRef.current = captureTable;
+  const focusedEditorIdRef = useRef(null);
+  useEffect(() => {
+    const unsubFocus = eventBus.on(`UI:${editorFocusEvent}`, (event) => {
+      const editorId = event.payload?.editorId;
+      if (typeof editorId === "string") {
+        focusedEditorIdRef.current = editorId;
+      }
+    });
+    const unsubBlur = eventBus.on(`UI:${editorBlurEvent}`, (event) => {
+      const editorId = event.payload?.editorId;
+      if (typeof editorId === "string" && focusedEditorIdRef.current === editorId) {
+        focusedEditorIdRef.current = null;
+      }
+    });
+    return () => {
+      unsubFocus();
+      unsubBlur();
+    };
+  }, [eventBus, editorFocusEvent, editorBlurEvent]);
+  useEffect(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (event.isComposing) return;
+      const target = focusedEditorIdRef.current ?? "shell";
+      const entry = captureTableRef.current[target];
+      const captured = entry !== void 0 && (entry.mode === "any" || entry.keys.has(event.key));
+      if (captured) {
+        event.preventDefault();
+      }
+      eventBus.emit(`UI:${keyEvent}`, {
+        editorId: target,
+        key: event.key,
+        code: event.code,
+        ctrl: event.ctrlKey,
+        alt: event.altKey,
+        shift: event.shiftKey,
+        meta: event.metaKey,
+        repeat: event.repeat
+      });
+    };
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+    };
+  }, [eventBus, enabled, keyEvent]);
+}
 function expressionEqual(a, b) {
   if (Object.is(a, b)) return true;
   if (Array.isArray(a) && Array.isArray(b)) {
@@ -1103,18 +1160,9 @@ function reconcileSlotProps(prev, next) {
 var log11 = createLogger("almadar:ui:ui-slots");
 var DEFAULT_SOURCE_KEY = "__default__";
 var MULTI_SOURCE_STACK_TRAIT = "__multi_source_stack__";
-var ALL_SLOTS = [
-  "main",
-  "sidebar",
-  "modal",
-  "drawer",
-  "overlay",
-  "center",
-  "toast",
-  "hud-top",
-  "hud-bottom",
-  "floating"
-];
+var ALL_SLOTS = UI_SLOTS.filter(
+  (slot) => !slot.includes(".") && slot !== "hud" && slot !== "screen"
+);
 var DEFAULT_SLOTS = ALL_SLOTS.reduce(
   (acc, slot) => {
     acc[slot] = null;
@@ -2212,7 +2260,8 @@ var en_default = {
   "richTextEditor.image": "Insert image",
   "richTextEditor.imagePrompt": "Image URL",
   "richTextEditor.placeholder": "Start writing\u2026",
-  "form.imageUrlFallback": "\u2026or paste an image address"
+  "form.imageUrlFallback": "\u2026or paste an image address",
+  "mermaid.unrenderable": "This diagram could not be displayed. Its source is shown below."
 };
 
 // hooks/useTranslate.ts
@@ -2918,4 +2967,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALMADAR_DND_MIME, DEFAULT_SLOTS, I18nProvider, SharedEntityStoreContext, createSharedEntityStore, createTranslate, parseQueryBinding, runTickFrame, useAgentChat, useAuthContext, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInfiniteScroll, useLongPress, useMediaQuery, useOrbitalHistory, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate, useUIEvents, useUISlotManager, useValidation };
+export { ALMADAR_DND_MIME, DEFAULT_SLOTS, I18nProvider, SharedEntityStoreContext, createSharedEntityStore, createTranslate, parseQueryBinding, runTickFrame, useAgentChat, useAuthContext, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInfiniteScroll, useKeyboardRouter, useLongPress, useMediaQuery, useOrbitalHistory, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate, useUIEvents, useUISlotManager, useValidation };

package/dist/lib/drawable/three/index.cjs

@@ -185,7 +185,7 @@ function collectDrawnItems(nodes) {
   for (const n of nodes) {
     switch (n.type) {
       case "draw-sprite":
-        if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id, anchor: n.anchor, width: n.width, height: n.height });
+        if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id, anchor: n.anchor, width: n.width, height: n.height, rotation: n.rotation });
         break;
       case "draw-shape":
       case "draw-text":
@@ -195,7 +195,7 @@ function collectDrawnItems(nodes) {
         break;
       case "draw-sprite-layer":
         for (const it of n.items) {
-          if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id, anchor: it.anchor, width: it.width, height: it.height });
+          if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id, anchor: it.anchor, width: it.width, height: it.height, rotation: it.rotation });
         }
         break;
       case "draw-shape-layer":
@@ -215,6 +215,22 @@ function buildHitIndex(items) {
   }
   return m;
 }
+function withPreviewPosition(nodes, id, pos) {
+  return nodes.map((n) => {
+    if (n.type === "draw-sprite-layer" || n.type === "draw-shape-layer" || n.type === "draw-text-layer") {
+      if (!n.items.some((it) => it.id === id)) return n;
+      return { ...n, items: n.items.map((it) => it.id === id ? { ...it, position: pos } : it) };
+    }
+    if (n.type === "draw-group") {
+      if (!Array.isArray(n.items)) return n;
+      return { ...n, items: withPreviewPosition(n.items, id, pos) };
+    }
+    if (n.id === id && "position" in n) {
+      return { ...n, position: pos };
+    }
+    return n;
+  });
+}
 function useGameCanvas3DEvents(options) {
   const {
     tileClickEvent,
@@ -1379,7 +1395,7 @@ function Sprite3D({ node, projector, groupOpacity = 1 }) {
       {
         url: asset.url,
         scale,
-        rotation: [0, (node.rotation ?? 0) * 180 / Math.PI, 0],
+        rotation: [0, node.rotation ?? 0, 0],
         animation: node.animation,
         fallbackGeometry: "box",
         castShadow: true,
@@ -1854,6 +1870,8 @@ function cn(...inputs) {
 }
 var DEFAULT_GRID_CONFIG = {
   cellSize: 1};
+var EDIT_SELECTION_COLOR = "#3b82f6";
+var EDIT_SELECTION_RADIUS = 0.6;
 function CameraPose({
   position,
   fov,
@@ -1917,7 +1935,13 @@ var Canvas3DHost = React3.forwardRef(
     lighting,
     post,
     children,
-    drawables
+    drawables,
+    editable = false,
+    selectedId = null,
+    onSelect,
+    onMove,
+    selectEvent,
+    moveEvent
   }, ref) => {
     const containerRef = React3.useRef(null);
     const controlsRef = React3.useRef(null);
@@ -2003,6 +2027,25 @@ var Canvas3DHost = React3.forwardRef(
       }),
       [gridBounds, gridConfig]
     );
+    const editDragRef = React3.useRef(null);
+    const [dragPreview, setDragPreview] = React3.useState(null);
+    const groundPointToScene = React3.useCallback((point) => ({
+      x: Math.round(point.x / gridConfig.cellSize + gridBounds.minX),
+      y: Math.round(point.z / gridConfig.cellSize + gridBounds.minZ)
+    }), [gridConfig, gridBounds]);
+    const paintDrawables = React3.useMemo(
+      () => dragPreview ? withPreviewPosition(allDrawables, dragPreview.id, { x: dragPreview.x, y: dragPreview.y }) : allDrawables,
+      [allDrawables, dragPreview]
+    );
+    const selectedItem = React3.useMemo(
+      () => editable && selectedId != null ? drawnItems.find((it) => it.id === selectedId) : void 0,
+      [editable, selectedId, drawnItems]
+    );
+    const selectionPos = React3.useMemo(() => {
+      if (!selectedItem) return void 0;
+      if (dragPreview && dragPreview.id === selectedItem.id) return { x: dragPreview.x, y: dragPreview.y };
+      return selectedItem.pos;
+    }, [selectedItem, dragPreview]);
     React3.useImperativeHandle(ref, () => ({
       getCameraPosition: () => {
         if (controlsRef.current) {
@@ -2083,17 +2126,14 @@ var Canvas3DHost = React3.forwardRef(
     const handleGroundClick = React3.useCallback((e) => {
       if (!tileClickEvent && !unitClickEvent) return;
       e.stopPropagation();
-      const cell = {
-        x: Math.round(e.point.x / gridConfig.cellSize + gridBounds.minX),
-        y: Math.round(e.point.z / gridConfig.cellSize + gridBounds.minZ)
-      };
+      const cell = groundPointToScene(e.point);
       const hitId = hitIndex.get(`${cell.x},${cell.y}`);
       if (hitId !== void 0 && unitClickEvent) {
         eventBus.emit(`UI:${unitClickEvent}`, { unitId: hitId, x: cell.x, z: cell.y });
       } else if (tileClickEvent) {
         eventBus.emit(`UI:${tileClickEvent}`, { x: cell.x, z: cell.y });
       }
-    }, [tileClickEvent, unitClickEvent, gridConfig, gridBounds, hitIndex, eventBus]);
+    }, [tileClickEvent, unitClickEvent, groundPointToScene, hitIndex, eventBus]);
     const handleDrawableClick = React3.useCallback((e) => {
       if (!unitClickEvent) return;
       let obj = e.object;
@@ -2111,6 +2151,57 @@ var Canvas3DHost = React3.forwardRef(
         obj = obj.parent;
       }
     }, [unitClickEvent, gridConfig, gridBounds, eventBus]);
+    const handleEditDrawablePointerDown = React3.useCallback((e) => {
+      if (!editable) return;
+      let obj = e.object;
+      while (obj) {
+        const id = obj.userData.drawableId;
+        if (id !== void 0) {
+          e.stopPropagation();
+          editDragRef.current = {
+            id,
+            startClientX: e.nativeEvent.clientX,
+            startClientY: e.nativeEvent.clientY,
+            moved: false
+          };
+          return;
+        }
+        obj = obj.parent;
+      }
+    }, [editable]);
+    const handleEditGroundPointerMove = React3.useCallback((e) => {
+      const drag = editDragRef.current;
+      if (!editable || !drag) return;
+      const dx = e.nativeEvent.clientX - drag.startClientX;
+      const dy = e.nativeEvent.clientY - drag.startClientY;
+      if (!drag.moved && Math.abs(dx) + Math.abs(dy) <= 5) return;
+      drag.moved = true;
+      const cell = groundPointToScene(e.point);
+      setDragPreview({ id: drag.id, x: cell.x, y: cell.y });
+    }, [editable, groundPointToScene]);
+    const handleEditPointerUp = React3.useCallback((_e) => {
+      if (!editable) return;
+      const drag = editDragRef.current;
+      editDragRef.current = null;
+      if (!drag) {
+        onSelect?.(null);
+        if (selectEvent) eventBus.emit(`UI:${selectEvent}`, { id: null });
+        return;
+      }
+      if (drag.moved) {
+        setDragPreview((preview) => {
+          if (preview && preview.id === drag.id) {
+            onMove?.(drag.id, preview.x, preview.y);
+            if (moveEvent) eventBus.emit(`UI:${moveEvent}`, { id: drag.id, x: preview.x, y: preview.y });
+          }
+          return null;
+        });
+        return;
+      }
+      const next = selectedId === drag.id ? null : drag.id;
+      onSelect?.(next);
+      if (selectEvent) eventBus.emit(`UI:${selectEvent}`, { id: next });
+    }, [editable, selectedId, onMove, moveEvent, onSelect, selectEvent, eventBus]);
     if (externalLoading) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Canvas3DLoadingState,
@@ -2162,6 +2253,7 @@ var Canvas3DHost = React3.forwardRef(
                     eventHandlers.handleCanvasClick(e);
                   }
                 },
+                onPointerUp: handleEditPointerUp,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(CameraController3D, { onCameraChange: eventHandlers.handleCameraChange }),
                   cameraMode !== "follow" && cameraMode !== "chase" && /* @__PURE__ */ jsxRuntime.jsx(CameraPose, { position: cameraConfig.position, fov: cameraConfig.fov, controls: controlsRef }),
@@ -2209,8 +2301,28 @@ var Canvas3DHost = React3.forwardRef(
                       fadeStrength: 1
                     }
                   ),
-                  allDrawables.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(BoneRegistryContext.Provider, { value: boneStore, children: /* @__PURE__ */ jsxRuntime.jsx("group", { onClick: unitClickEvent ? handleDrawableClick : void 0, children: allDrawables.map((node, i) => /* @__PURE__ */ jsxRuntime.jsx(Drawable3D, { node, projector: drawableProjector }, i)) }) }),
-                  (tileClickEvent || unitClickEvent) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  allDrawables.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(BoneRegistryContext.Provider, { value: boneStore, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "group",
+                    {
+                      onClick: !editable && unitClickEvent ? handleDrawableClick : void 0,
+                      onPointerDown: editable ? handleEditDrawablePointerDown : void 0,
+                      children: paintDrawables.map((node, i) => /* @__PURE__ */ jsxRuntime.jsx(Drawable3D, { node, projector: drawableProjector }, i))
+                    }
+                  ) }),
+                  selectionPos && /* @__PURE__ */ jsxRuntime.jsx(
+                    Shape3D,
+                    {
+                      node: {
+                        type: "draw-shape",
+                        shape: "ellipse",
+                        position: selectionPos,
+                        radiusX: EDIT_SELECTION_RADIUS,
+                        stroke: EDIT_SELECTION_COLOR
+                      },
+                      projector: drawableProjector
+                    }
+                  ),
+                  (tileClickEvent || unitClickEvent || editable) && /* @__PURE__ */ jsxRuntime.jsxs(
                     "mesh",
                     {
                       rotation: [-Math.PI / 2, 0, 0],
@@ -2219,7 +2331,8 @@ var Canvas3DHost = React3.forwardRef(
                         0,
                         (gridBounds.maxZ - gridBounds.minZ) / 2 * cellSize
                       ],
-                      onClick: handleGroundClick,
+                      onClick: !editable ? handleGroundClick : void 0,
+                      onPointerMove: editable ? handleEditGroundPointerMove : void 0,
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "planeGeometry",
@@ -2239,7 +2352,7 @@ var Canvas3DHost = React3.forwardRef(
                     drei.OrbitControls,
                     {
                       ref: controlsRef,
-                      enabled: controlsEnabled && cameraMode !== "follow" && cameraMode !== "chase",
+                      enabled: controlsEnabled && !editable && cameraMode !== "follow" && cameraMode !== "chase",
                       target: cameraTarget,
                       enableDamping: true,
                       dampingFactor: 0.05,

package/dist/lib/drawable/three/index.d.cts

@@ -1,5 +1,5 @@
-import { C as CanvasPointLightConfig, I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-Bt4NzAam.cjs';
-export { d as Canvas3DHost, e as Canvas3DHostHandle, f as Canvas3DHostProps, d as GameCanvas3D, U as UnitAnimationState } from '../../../avl-schema-parser-Bt4NzAam.cjs';
+import { C as CanvasPointLightConfig, I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-FQ1474v8.cjs';
+export { d as Canvas3DHost, e as Canvas3DHostHandle, f as Canvas3DHostProps, d as GameCanvas3D, U as UnitAnimationState } from '../../../avl-schema-parser-FQ1474v8.cjs';
 import * as React$1 from 'react';
 import React__default, { Component, ReactNode, ErrorInfo } from 'react';
 import * as THREE from 'three';

package/dist/lib/drawable/three/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CanvasPointLightConfig, I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-dvJKXn-o.js';
-export { d as Canvas3DHost, e as Canvas3DHostHandle, f as Canvas3DHostProps, d as GameCanvas3D, U as UnitAnimationState } from '../../../avl-schema-parser-dvJKXn-o.js';
+import { C as CanvasPointLightConfig, I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-DncJLEn9.js';
+export { d as Canvas3DHost, e as Canvas3DHostHandle, f as Canvas3DHostProps, d as GameCanvas3D, U as UnitAnimationState } from '../../../avl-schema-parser-DncJLEn9.js';
 import * as React$1 from 'react';
 import React__default, { Component, ReactNode, ErrorInfo } from 'react';
 import * as THREE from 'three';