@octane-xplat/dnd-kit 0.0.1 → 0.10.0

package/dist/web/controller.js

@@ -0,0 +1,236 @@
+import { measure } from "./geometry.web.js";
+import { DragDropManager, Draggable, Droppable, Sensor } from "@dnd-kit/abstract";
+import { defaultCollisionDetection } from "@dnd-kit/collision";
+import { batch, effect, signal, untracked } from "@dnd-kit/state";
+//#region src/controller.ts
+var PanDraggable = class extends Draggable {
+	onPan;
+};
+/** Xplat View supplies normalized pan input; the abstract core owns the drag lifecycle. */
+var PanSensor = class extends Sensor {
+	bind(input) {
+		const source = input;
+		let origin = null;
+		let bound = true;
+		let base = {
+			x: 0,
+			y: 0
+		};
+		let queue = Promise.resolve();
+		const handle = async (event) => {
+			const manager = this.manager;
+			if (!bound) return;
+			if (event.state === "began") {
+				if (source.disabled || !manager.dragOperation.status.idle) return;
+				origin = measure(manager.draggableNodes.get(source.id));
+				if (!origin) return;
+				base = {
+					x: event.dx,
+					y: event.dy
+				};
+				manager.scrollShift$.value = {
+					x: 0,
+					y: 0
+				};
+				manager.actions.start({
+					source,
+					coordinates: origin.center
+				});
+				manager.dragOperation.shape = origin;
+				manager.refresh();
+				await manager.renderer.rendering;
+				return;
+			}
+			if (!origin || manager.dragOperation.source?.id !== source.id || !manager.dragOperation.status.dragging) return;
+			const x = event.dx - base.x;
+			const y = event.dy - base.y;
+			manager.actions.move({ to: {
+				x: origin.center.x + x,
+				y: origin.center.y + y
+			} });
+			await Promise.resolve();
+			manager.dragOperation.shape = origin.translate(x, y);
+			manager.refresh();
+			if (event.state === "ended" || event.state === "cancelled") {
+				manager.actions.stop({ canceled: event.state === "cancelled" });
+				origin = null;
+			} else manager.startAutoScroll();
+		};
+		source.onPan = (event) => {
+			queue = queue.then(() => handle(event)).catch((error) => {
+				origin = null;
+				this.manager.cancel();
+				console.error("[dnd-kit] pan failed", error);
+			});
+		};
+		return () => {
+			bound = false;
+			source.onPan = void 0;
+			origin = null;
+		};
+	}
+};
+/** One controller per DndContext; no global registry or cross-root context assumptions. */
+var DndController = class extends DragDropManager {
+	options = {};
+	draggableNodes = /* @__PURE__ */ new Map();
+	droppableNodes = /* @__PURE__ */ new Map();
+	scrollShift$ = signal({
+		x: 0,
+		y: 0
+	});
+	listeners = /* @__PURE__ */ new Set();
+	snapshot = {
+		active: null,
+		over: null,
+		transform: {
+			x: 0,
+			y: 0
+		},
+		isDragging: false
+	};
+	dispose;
+	scrollTimer;
+	destroyed = false;
+	constructor() {
+		super({ sensors: [PanSensor] });
+		this.dispose = effect(() => {
+			const operation = this.dragOperation;
+			const active = operation.source;
+			const over = operation.target;
+			const transform = operation.transform;
+			const isDragging = operation.status.dragging;
+			this.snapshot = {
+				active: active && !operation.status.idle ? {
+					id: active.id,
+					data: active.data
+				} : null,
+				over: over && !operation.status.idle ? {
+					id: over.id,
+					data: over.data
+				} : null,
+				transform: {
+					x: operation.status.idle ? 0 : transform.x + this.scrollShift$.value.x,
+					y: operation.status.idle ? 0 : transform.y + this.scrollShift$.value.y
+				},
+				isDragging
+			};
+			untracked(() => {
+				for (const listener of this.listeners) listener();
+			});
+		});
+		const event = (canceled = false) => {
+			const operation = this.dragOperation;
+			return {
+				active: operation.source ? {
+					id: operation.source.id,
+					data: operation.source.data
+				} : null,
+				over: operation.target ? {
+					id: operation.target.id,
+					data: operation.target.data
+				} : null,
+				transform: { ...operation.transform },
+				isDragging: operation.status.dragging,
+				canceled
+			};
+		};
+		this.monitor.addEventListener("dragstart", () => this.options.onDragStart?.(event()));
+		this.monitor.addEventListener("dragover", () => this.options.onDragOver?.(event()));
+		this.monitor.addEventListener("dragmove", () => queueMicrotask(() => queueMicrotask(() => {
+			if (!this.destroyed && this.dragOperation.status.dragging) this.options.onDragMove?.(event());
+		})));
+		this.monitor.addEventListener("dragend", ({ canceled }) => {
+			this.stopAutoScroll();
+			if (canceled) this.options.onDragCancel?.(event(true));
+			else this.options.onDragEnd?.(event());
+		});
+	}
+	getSnapshot = () => this.snapshot;
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	registerDraggable(options) {
+		if (this.registry.draggables.has(options.id)) throw new Error(`Duplicate draggable id: ${options.id}`);
+		const source = new PanDraggable({
+			...options,
+			register: false,
+			effects: () => [() => this.registry.sensors.get(PanSensor).bind(source)]
+		}, this);
+		source.register();
+		return source;
+	}
+	registerDroppable(options) {
+		if (this.registry.droppables.has(options.id)) throw new Error(`Duplicate droppable id: ${options.id}`);
+		const target = new Droppable({
+			...options,
+			register: false,
+			accept: options.accept ? (source) => options.accept({
+				id: source.id,
+				data: source.data
+			}) : void 0,
+			collisionDetector: (input) => input.dragOperation.source?.id === input.droppable.id ? null : (this.options.collisionDetection ?? defaultCollisionDetection)(input)
+		}, this);
+		target.register();
+		return target;
+	}
+	refresh() {
+		batch(() => {
+			for (const droppable of this.registry.droppables) droppable.shape = measure(this.droppableNodes.get(droppable.id)) ?? void 0;
+		});
+		this.collisionObserver.forceUpdate();
+	}
+	cancel() {
+		this.stopAutoScroll();
+		this.actions.stop({ canceled: true });
+	}
+	startAutoScroll() {
+		if (this.scrollTimer || !this.options.autoScroll) return;
+		this.scrollTimer = setInterval(() => {
+			const scroll = this.options.autoScroll;
+			if (!scroll || !this.dragOperation.status.dragging) {
+				this.stopAutoScroll();
+				return;
+			}
+			const bounds = scroll.bounds();
+			if (!bounds) return;
+			const horizontal = scroll.axis === "x";
+			const start = horizontal ? bounds.x : bounds.y;
+			const size = horizontal ? bounds.width : bounds.height;
+			const point = horizontal ? this.dragOperation.position.current.x : this.dragOperation.position.current.y;
+			const threshold = Math.min(scroll.threshold ?? 40, size / 2);
+			if (threshold <= 0 || point < start || point > start + size) return;
+			const strength = point < start + threshold ? -(1 - (point - start) / threshold) : point > start + size - threshold ? 1 - (start + size - point) / threshold : 0;
+			const next = Math.max(0, Math.min(scroll.maxOffset(), scroll.offsetRef.current + strength * (scroll.speed ?? 12)));
+			if (next !== scroll.offsetRef.current) {
+				const before = scroll.offsetRef.current;
+				scroll.scrollTo(next);
+				const delta = scroll.offsetRef.current - before;
+				const shift = this.scrollShift$.peek();
+				this.scrollShift$.value = {
+					x: shift.x + (horizontal ? delta : 0),
+					y: shift.y + (horizontal ? 0 : delta)
+				};
+				this.refresh();
+			}
+		}, 16);
+	}
+	stopAutoScroll() {
+		if (this.scrollTimer) clearInterval(this.scrollTimer);
+		this.scrollTimer = void 0;
+	}
+	disposeController() {
+		this.destroyed = true;
+		this.cancel();
+		this.dispose();
+		this.listeners.clear();
+		this.draggableNodes.clear();
+		this.droppableNodes.clear();
+		this.destroy();
+	}
+};
+//#endregion
+export { DndController };

package/dist/web/geometry.web.js

@@ -0,0 +1,16 @@
+import { Rectangle } from "@dnd-kit/geometry";
+//#region src/geometry.web.ts
+function measure(element) {
+	if (!element?.isConnected) return null;
+	const rect = element.getBoundingClientRect();
+	return rect.width > 0 && rect.height > 0 ? Rectangle.from(rect) : null;
+}
+function dragStyle(x, y) {
+	return {
+		transform: `translate(${x}px, ${y}px)`,
+		touchAction: "none",
+		zIndex: x || y ? 1 : 0
+	};
+}
+//#endregion
+export { dragStyle, measure };

package/dist/web/index.js

@@ -0,0 +1,4 @@
+import { arrayMove } from "./sort.js";
+import { DndContext, SortableContext, SortableList, useDndContext, useDraggable, useDroppable, useSortable } from "./components.js";
+import { closestCenter, closestCorners, defaultCollisionDetection, pointerIntersection, shapeIntersection } from "@dnd-kit/collision";
+export { DndContext, SortableContext, SortableList, arrayMove, closestCenter, closestCorners, defaultCollisionDetection, pointerIntersection, shapeIntersection, useDndContext, useDraggable, useDroppable, useSortable };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "35a78e2b-b2ce-4aa0-8968-708058c15fed",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/sort.js

@@ -0,0 +1,11 @@
+//#region src/sort.ts
+/** Return a new order. Invalid indices leave the order unchanged. */
+function arrayMove(items, from, to) {
+	const result = [...items];
+	if (!Number.isInteger(from) || !Number.isInteger(to) || from < 0 || to < 0 || from >= items.length || to >= items.length || from === to) return result;
+	const [item] = result.splice(from, 1);
+	result.splice(to, 0, item);
+	return result;
+}
+//#endregion
+export { arrayMove };

package/examples/sortable.macos.tsx

@@ -0,0 +1,128 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useCallback, useRef, useState } from 'octane'
+import { Text, View, useMeasure } from '@octane-xplat/ui'
+import { SortableList } from '../src/index'
+
+/** AppKit scroll ownership stays explicit; all geometry and offsets use top-down points. */
+export default function SortableExample() {
+	const [items, setItems] = useState(Array.from({ length: 20 }, (_, index) => `task-${index + 1}`))
+	const scrollRef = useRef<any>(null)
+	const offsetRef = useRef(0)
+	const initialized = useRef(false)
+	const measure = useMeasure()
+	const bindScroll = useCallback(
+		(view: any) => {
+			scrollRef.current = view
+			measure.ref(view?.contentView ?? null)
+		},
+		[measure.ref],
+	)
+
+	const top = () => {
+		const scroll = scrollRef.current
+		const clip = scroll?.contentView
+		const content = scroll?.documentView
+		if (!clip || !content) {
+			return 0
+		}
+
+		const flipped =
+			typeof content.isFlipped === 'function' ? content.isFlipped() : content.isFlipped
+
+		return flipped
+			? Number(clip.bounds.origin.y)
+			: Number(content.frame.size.height) -
+					Number(clip.bounds.size.height) -
+					Number(clip.bounds.origin.y)
+	}
+
+	return (
+		<View>
+			<Text id="dnd-order">{items.join(',')}</Text>
+			<scrollview
+				id="dnd-scroll"
+				style={{ height: 240 }}
+				ref={bindScroll}
+				onScroll={() => {
+					offsetRef.current = top()
+				}}
+			>
+				<flexboxlayout
+					flexDirection="column"
+					onLayoutChanged={() => {
+						const scroll = scrollRef.current
+						if (
+							initialized.current ||
+							!scroll?.window ||
+							scroll.documentView.frame.size.height <= scroll.contentView.bounds.size.height
+						) {
+							return
+						}
+
+						initialized.current = true
+						const content = scroll.documentView
+						const flipped =
+							typeof content.isFlipped === 'function' ? content.isFlipped() : content.isFlipped
+
+						scroll.contentView.scrollToPoint({
+							x: 0,
+							y: flipped
+								? 0
+								: Math.max(0, content.frame.size.height - scroll.contentView.bounds.size.height),
+						})
+
+						scroll.reflectScrolledClipView(scroll.contentView)
+						measure.ref(scroll.contentView)
+						offsetRef.current = top()
+					}}
+				>
+					<SortableList
+						items={items}
+						onReorder={setItems}
+						dnd={{
+							autoScroll: {
+								bounds: () => measure.bounds,
+								offsetRef,
+								maxOffset: () => {
+									const scroll = scrollRef.current
+									return Math.max(
+										0,
+										Number(scroll?.documentView?.frame?.size?.height ?? 0) -
+											Number(scroll?.contentView?.bounds?.size?.height ?? 0),
+									)
+								},
+								scrollTo: (offset) => {
+									const scroll = scrollRef.current
+									const content = scroll.documentView
+									const clip = scroll.contentView
+									const flipped =
+										typeof content.isFlipped === 'function'
+											? content.isFlipped()
+											: content.isFlipped
+
+									const y = flipped
+										? offset
+										: Math.max(
+												0,
+												Number(content.frame.size.height) -
+													Number(clip.bounds.size.height) -
+													offset,
+											)
+
+									clip.scrollToPoint({ x: Number(clip.bounds.origin.x), y })
+									scroll.reflectScrolledClipView(clip)
+									offsetRef.current = top()
+								},
+							},
+						}}
+						renderItem={(id) => (
+							<View id={`dnd-${id}`} style={{ height: 64, padding: 12 }}>
+								<Text>{id}</Text>
+							</View>
+						)}
+					/>
+				</flexboxlayout>
+			</scrollview>
+		</View>
+	)
+}

package/examples/sortable.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'octane'
+import { Text, View } from '@octane-xplat/ui'
+import { SortableList } from '../src/index'
+
+/** Controlled order: drag a row onto another row to commit a reorder. */
+export default function SortableExample() {
+	const [items, setItems] = useState(['alpha', 'beta', 'gamma'])
+	return (
+		<View>
+			<Text id="dnd-order">{items.join(',')}</Text>
+			<SortableList
+				items={items}
+				onReorder={setItems}
+				renderItem={(id) => (
+					<View id={`dnd-${id}`} style={{ height: 64, padding: 12 }}>
+						<Text>{String(id)}</Text>
+					</View>
+				)}
+			/>
+		</View>
+	)
+}

package/package.json

@@ -1,11 +1,91 @@
 {
   "name": "@octane-xplat/dnd-kit",
-  "version": "0.0.1",
-  "description": "Placeholder stub for @octane-xplat/dnd-kit — no supported API yet.",
+  "version": "0.10.0",
+  "description": "Drag and drop and sortable lists for Octane web and NativeScript",
+  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/dnd-kit",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/dnd-kit"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src",
+    "README.md",
+    "examples"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "macos": {
+        "types": "./types/generated/index.d.ts",
+        "default": "./src/index.macos.ts"
+      },
+      "web": {
+        "types": "./types/generated/index.d.ts",
+        "default": "./dist/web/index.js"
+      },
+      "native": {
+        "types": "./types/generated/index.d.ts",
+        "default": "./dist/native/index.js"
+      },
+      "types": "./types/generated/index.d.ts",
+      "default": "./dist/native/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@dnd-kit/abstract": "0.5.0",
+    "@dnd-kit/collision": "0.5.0",
+    "@dnd-kit/geometry": "0.5.0",
+    "@dnd-kit/state": "0.5.0",
+    "@octane-xplat/ui": "0.10.0",
+    "abort-controller": "3.0.0"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.4",
+    "@nativescript/core": "9.1.2",
+    "@octane-xplat/macos-renderer": "0.10.0",
+    "@octanejs/vite-plugin": "0.1.61",
+    "@tsrx/typescript-plugin": "0.4.11",
+    "octane": "0.6.3",
+    "tsrx-typegen": "0.2.2",
+    "typescript": "5.9.3",
+    "vite": "8.3.0",
+    "vitest": "5.0.1"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    },
+    "octane": {
+      "optional": true
+    }
+  },
+  "nativescript": {
+    "platforms": {
+      "android": "9.1.0",
+      "ios": "9.1.0"
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && pnpm typegen && node ../../scripts/check-native-dist.mjs",
+    "typegen": "tsrx-typegen --project tsconfig.json",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.json && tsrx-tsc --noEmit -p tsconfig.native.json && tsrx-tsc --noEmit -p tsconfig.example.json && tsrx-tsc --noEmit -p tsconfig.macos.json",
+    "test": "vitest run",
+    "pack:check": "tsrx-typegen --pack-check",
+    "test:packed": "pnpm build && node tests/packed-consumer.mjs"
   }
-}
+}

package/src/abort.macos.ts

@@ -0,0 +1,7 @@
+import { AbortController, AbortSignal } from 'abort-controller/dist/abort-controller.js'
+
+// The abstract core constructs AbortController at drag begin. AppKit's JSC
+// host does not provide it; install only missing globals and leave other hosts intact.
+const host = globalThis as any
+host.AbortController ??= AbortController
+host.AbortSignal ??= AbortSignal