@woven-canvas/core 1.3.1 → 1.3.3

package/build/_tsup-dts-rollup.d.cts

@@ -992,6 +992,7 @@ export declare const FRAME_EDGE_THICKNESS = 12;
 declare const FrameContainmentState: EditorStateDef<    {
 state: StringFieldBuilder;
 highlightedFrame: RefFieldBuilder;
+draggedEntity: RefFieldBuilder;
 }>;
 export { FrameContainmentState }
 export { FrameContainmentState as FrameContainmentState_alias_1 }
@@ -1067,7 +1068,9 @@ export { getFrameInput }
 export { getFrameInput as getFrameInput_alias_1 }
 export { getFrameInput as getFrameInput_alias_2 }
 
-declare function getKeyboardInput(ctx: Context, keys: number[]): KeyboardInput[];
+declare function getKeyboardInput(ctx: Context, keys: number[], options?: {
+    repeat?: boolean;
+}): KeyboardInput[];
 export { getKeyboardInput }
 export { getKeyboardInput as getKeyboardInput_alias_1 }
 export { getKeyboardInput as getKeyboardInput_alias_2 }
@@ -1417,6 +1420,7 @@ declare class KeyboardDef extends CanvasSingletonDef<typeof KeyboardSchema> {
     constructor();
     isKeyDown(ctx: Context, key: number): boolean;
     isKeyDownTrigger(ctx: Context, key: number): boolean;
+    isKeyRepeatTrigger(ctx: Context, key: number): boolean;
     isKeyUpTrigger(ctx: Context, key: number): boolean;
     reset(ctx: Context): void;
 }
@@ -1438,6 +1442,7 @@ export { KeyboardInputType as KeyboardInputType_alias_2 }
 declare const KeyboardSchema: {
     keysDown: BufferFieldBuilder<"uint8">;
     keysDownTrigger: BufferFieldBuilder<"uint8">;
+    keysRepeatTrigger: BufferFieldBuilder<"uint8">;
     keysUpTrigger: BufferFieldBuilder<"uint8">;
     shiftDown: BooleanFieldBuilder;
     altDown: BooleanFieldBuilder;

package/build/_tsup-dts-rollup.d.ts

@@ -992,6 +992,7 @@ export declare const FRAME_EDGE_THICKNESS = 12;
 declare const FrameContainmentState: EditorStateDef<    {
 state: StringFieldBuilder;
 highlightedFrame: RefFieldBuilder;
+draggedEntity: RefFieldBuilder;
 }>;
 export { FrameContainmentState }
 export { FrameContainmentState as FrameContainmentState_alias_1 }
@@ -1067,7 +1068,9 @@ export { getFrameInput }
 export { getFrameInput as getFrameInput_alias_1 }
 export { getFrameInput as getFrameInput_alias_2 }
 
-declare function getKeyboardInput(ctx: Context, keys: number[]): KeyboardInput[];
+declare function getKeyboardInput(ctx: Context, keys: number[], options?: {
+    repeat?: boolean;
+}): KeyboardInput[];
 export { getKeyboardInput }
 export { getKeyboardInput as getKeyboardInput_alias_1 }
 export { getKeyboardInput as getKeyboardInput_alias_2 }
@@ -1417,6 +1420,7 @@ declare class KeyboardDef extends CanvasSingletonDef<typeof KeyboardSchema> {
     constructor();
     isKeyDown(ctx: Context, key: number): boolean;
     isKeyDownTrigger(ctx: Context, key: number): boolean;
+    isKeyRepeatTrigger(ctx: Context, key: number): boolean;
     isKeyUpTrigger(ctx: Context, key: number): boolean;
     reset(ctx: Context): void;
 }
@@ -1438,6 +1442,7 @@ export { KeyboardInputType as KeyboardInputType_alias_2 }
 declare const KeyboardSchema: {
     keysDown: BufferFieldBuilder<"uint8">;
     keysDownTrigger: BufferFieldBuilder<"uint8">;
+    keysRepeatTrigger: BufferFieldBuilder<"uint8">;
     keysUpTrigger: BufferFieldBuilder<"uint8">;
     shiftDown: BooleanFieldBuilder;
     altDown: BooleanFieldBuilder;

package/build/index.cjs

@@ -1882,26 +1882,38 @@ var CursorKind = /* @__PURE__ */ ((CursorKind2) => {
 })(CursorKind || {});
 var DRAG_SVG = `
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 33.94 33.94">
-  <g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-    <path d="M25.46,14.14l2.83,2.83-2.83,2.83"/>
-    <path d="M19.8,16.97h8.49"/>
-    <path d="M8.49,19.8l-2.83-2.83,2.83-2.83"/>
-    <path d="M5.66,16.97h14.57"/>
-    <path d="M14.14,25.46l2.83,2.83,2.83-2.83"/>
-    <path d="M16.97,19.8v8.49"/>
-    <path d="M19.8,8.49l-2.83-2.83-2.83,2.83"/>
-    <path d="M16.97,5.66v15.14"/>
+  <defs>
+    <g id="a">
+      <path d="M25.46,14.14l2.83,2.83-2.83,2.83"/>
+      <path d="M19.8,16.97h8.49"/>
+      <path d="M8.49,19.8l-2.83-2.83,2.83-2.83"/>
+      <path d="M5.66,16.97h14.57"/>
+      <path d="M14.14,25.46l2.83,2.83,2.83-2.83"/>
+      <path d="M16.97,19.8v8.49"/>
+      <path d="M19.8,8.49l-2.83-2.83-2.83,2.83"/>
+      <path d="M16.97,5.66v15.14"/>
+    </g>
+  </defs>
+  <g fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <use href="#a" stroke="#fff" stroke-width="4.5"/>
+    <use href="#a" stroke="#000" stroke-width="2"/>
   </g>
 </svg>`;
 function makeResizeSvg(rotateZ) {
   const degrees = rotateZ * 180 / Math.PI;
   return `
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+     fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <defs>
+    <g id="a">
+      <path d="M8 7l4 -4l4 4"/>
+      <path d="M8 17l4 4l4 -4"/>
+      <path d="M12 3l0 18"/>
+    </g>
+  </defs>
   <g transform="rotate(${degrees} 12 12)">
-    <path d="M8 7l4 -4l4 4"/>
-    <path d="M8 17l4 4l4 -4"/>
-    <path d="M12 3l0 18"/>
+    <use href="#a" stroke="#fff" stroke-width="4.5"/>
+    <use href="#a" stroke="#000" stroke-width="2"/>
   </g>
 </svg>`;
 }
@@ -1909,11 +1921,17 @@ function makeRotateSvg(rotateZ) {
   const degrees = rotateZ * 180 / Math.PI;
   return `
 <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="-10 -10 34 34"
-     fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+     fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <defs>
+    <g id="a">
+      <path d="M1,14.76l4,4,4-4"/>
+      <path d="M14.61,1l4,4-4,4"/>
+      <path d="M18.61,5h-6.02c-4.19,0-7.59,3.4-7.59,7.59v6.17"/>
+    </g>
+  </defs>
   <g transform="rotate(${degrees} 8 8)">
-    <path d="M1,14.76l4,4,4-4"/>
-    <path d="M14.61,1l4,4-4,4"/>
-    <path d="M18.61,5h-6.02c-4.19,0-7.59,3.4-7.59,7.59v6.17"/>
+    <use href="#a" stroke="#fff" stroke-width="4.5"/>
+    <use href="#a" stroke="#000" stroke-width="2"/>
   </g>
 </svg>`;
 }
@@ -2178,6 +2196,8 @@ var KeyboardSchema = {
    * Uses field.buffer for zero-allocation subarray views.
    */
   keysDownTrigger: import_core24.field.buffer(import_core24.field.uint8()).size(KEY_BUFFER_SIZE),
+  /** Native key-repeat triggers, available separately from initial presses. */
+  keysRepeatTrigger: import_core24.field.buffer(import_core24.field.uint8()).size(KEY_BUFFER_SIZE),
   /**
    * Buffer for key-up triggers (true for exactly 1 frame when key is released).
    * Uses field.buffer for zero-allocation subarray views.
@@ -2216,6 +2236,10 @@ var KeyboardDef = class extends import_canvas_store30.CanvasSingletonDef {
   isKeyDownTrigger(ctx, key) {
     return getBit(this.read(ctx).keysDownTrigger, key);
   }
+  /** Check whether a native key-repeat event occurred this frame. */
+  isKeyRepeatTrigger(ctx, key) {
+    return getBit(this.read(ctx).keysRepeatTrigger, key);
+  }
   /**
    * Check if a key was just released this frame.
    * @param ctx - Editor context
@@ -2232,6 +2256,7 @@ var KeyboardDef = class extends import_canvas_store30.CanvasSingletonDef {
     const keyboard = this.write(ctx);
     clearBits(keyboard.keysDown);
     clearBits(keyboard.keysDownTrigger);
+    clearBits(keyboard.keysRepeatTrigger);
     clearBits(keyboard.keysUpTrigger);
     keyboard.shiftDown = false;
     keyboard.altDown = false;
@@ -2696,7 +2721,14 @@ var FrameContainmentState = defineEditorState("frameContainmentState", {
   /** Current state machine state */
   state: import_core27.field.string().max(16).default(FrameContainmentStateEnum.Idle),
   /** EntityId of the frame currently highlighted as a drop target, or null */
-  highlightedFrame: import_core27.field.ref()
+  highlightedFrame: import_core27.field.ref(),
+  /**
+   * The entity being dragged while Tracking (a block, or the TransformBox for a
+   * multi-select), captured on pointerMove. The selection machine has already
+   * left Dragging by the time our pointerUp runs, so the drop fallback can't
+   * re-read it from SelectionState.
+   */
+  draggedEntity: import_core27.field.ref()
 });
 
 // src/singletons/Grid.ts
@@ -3049,10 +3081,10 @@ function getFrameInput(ctx) {
 }
 
 // src/events/keyboardInputEvents.ts
-function getKeyboardInput(ctx, keys) {
+function getKeyboardInput(ctx, keys, options = {}) {
   const events = [];
   for (const key of keys) {
-    if (Keyboard.isKeyDownTrigger(ctx, key)) {
+    if (Keyboard.isKeyDownTrigger(ctx, key) || options.repeat && Keyboard.isKeyRepeatTrigger(ctx, key)) {
       events.push({ type: "keyDown", key, ctx });
     }
     if (Keyboard.isKeyUpTrigger(ctx, key)) {
@@ -3906,8 +3938,7 @@ function clearPointerTrackingState(ctx) {
 
 // src/systems/capture/captureFrameContainmentSystem.ts
 var selectedQuery2 = (0, import_core51.defineQuery)((q) => q.with(Block, Selected));
-function spawnAssignments(ctx, targetFrame) {
-  const draggedEntity = getDraggedEntity(ctx);
+function spawnAssignments(ctx, draggedEntity, targetFrame) {
   if (draggedEntity === null) return;
   const assignments = [];
   if ((0, import_core51.hasComponent)(ctx, draggedEntity, TransformBox)) {
@@ -3955,25 +3986,44 @@ var frameContainmentMachine = (0, import_xstate2.setup)({
           if (targetFrame !== null) {
             AddFrameHighlight.spawn(ctx, { frameId: targetFrame });
           }
-          spawnAssignments(ctx, targetFrame);
+          spawnAssignments(ctx, getDraggedEntity(ctx), targetFrame);
         }
         return targetFrame;
-      }
+      },
+      draggedEntity: ({ context, event }) => getDraggedEntity(event.ctx) ?? context.draggedEntity
     }),
     clearHighlight: ({ context, event }) => {
       if (context.highlightedFrame !== null) {
         RemoveFrameHighlight.spawn(event.ctx, { frameId: context.highlightedFrame });
       }
     },
+    // Drop fallback. Tracking resolves the target frame from the CURSOR so the
+    // highlight follows the hand, but a drag can release with the cursor off every
+    // frame (the gutter between two pages, just past an edge) while the dragged
+    // block itself still sits on one. Without this the block goes loose
+    // (`parentId: null`) yet looks untouched — and anything that only renders a
+    // frame's children (page captures / print) silently drops it. On pointerUp
+    // with no cursor target, re-resolve by the dragged block's center — the same
+    // rule paste and PlaceBlockEvent use — and parent it there.
+    dropByCenter: ({ context, event }) => {
+      if (context.highlightedFrame !== null) return;
+      const ctx = event.ctx;
+      const draggedEntity = context.draggedEntity;
+      if (draggedEntity === null || !(0, import_core51.hasComponent)(ctx, draggedEntity, Block)) return;
+      const targetFrame = findFrameAtPoint(ctx, Block.getCenter(ctx, draggedEntity), draggedEntity);
+      if (targetFrame !== null) spawnAssignments(ctx, draggedEntity, targetFrame);
+    },
     resetContext: (0, import_xstate2.assign)({
-      highlightedFrame: () => null
+      highlightedFrame: () => null,
+      draggedEntity: () => null
     })
   }
 }).createMachine({
   id: "frameContainment",
   initial: FrameContainmentStateEnum.Idle,
   context: {
-    highlightedFrame: null
+    highlightedFrame: null,
+    draggedEntity: null
   },
   states: {
     [FrameContainmentStateEnum.Idle]: {
@@ -3992,7 +4042,7 @@ var frameContainmentMachine = (0, import_xstate2.setup)({
           actions: "updateHighlight"
         },
         pointerUp: {
-          actions: "clearHighlight",
+          actions: ["dropByCenter", "clearHighlight"],
           target: FrameContainmentStateEnum.Idle
         },
         cancel: {
@@ -4371,7 +4421,10 @@ function attachKeyboardListeners(domElement) {
   const state = {
     eventsBuffer: [],
     onKeyDown: (e) => {
-      if (e.key === "Tab" || e.key === "Alt" || e.key === " ") {
+      if (e.defaultPrevented) return;
+      if (e.target instanceof Element && e.target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"]'))
+        return;
+      if (e.key === "Tab" || e.key === "Alt" || e.key === " " || e.code.startsWith("Arrow")) {
         e.preventDefault();
       }
       state.eventsBuffer.push(e);
@@ -4406,14 +4459,17 @@ var keyboardSystem = defineEditorSystem({ phase: "input" }, (ctx) => {
   });
   const hasEvents = state.eventsBuffer.length > 0;
   const keyboardRead = Keyboard.read(ctx);
-  const triggersNeedClearing = !isZeroed(keyboardRead.keysDownTrigger) || !isZeroed(keyboardRead.keysUpTrigger);
+  const triggersNeedClearing = !isZeroed(keyboardRead.keysDownTrigger) || !isZeroed(keyboardRead.keysUpTrigger) || !isZeroed(keyboardRead.keysRepeatTrigger);
   if (!hasEvents && !triggersNeedClearing) return;
   const keyboard = Keyboard.write(ctx);
   clearBits(keyboard.keysDownTrigger);
+  clearBits(keyboard.keysRepeatTrigger);
   clearBits(keyboard.keysUpTrigger);
   for (const event of state.eventsBuffer) {
     if (event.type === "blur") {
       clearBits(keyboard.keysDown);
+      clearBits(keyboard.keysDownTrigger);
+      clearBits(keyboard.keysRepeatTrigger);
       keyboard.shiftDown = false;
       keyboard.altDown = false;
       keyboard.modDown = false;
@@ -4426,6 +4482,7 @@ var keyboardSystem = defineEditorSystem({ phase: "input" }, (ctx) => {
       if (!wasDown || !event.repeat) {
         setBit(keyboard.keysDownTrigger, keyIndex, true);
       }
+      if (event.repeat) setBit(keyboard.keysRepeatTrigger, keyIndex, true);
       setBit(keyboard.keysDown, keyIndex, true);
     } else if (event.type === "keyup") {
       setBit(keyboard.keysDown, keyIndex, false);