@capsuletech/web-dnd 0.1.0

package/dist/autoScroll.d.ts

@@ -0,0 +1,14 @@
+import { Accessor } from 'solid-js';
+import { IPoint } from './types';
+interface IAutoScrollConfig {
+    /** Зона у края (px), внутри которой начинается скролл. */
+    edge?: number;
+    /** Максимальная скорость скролла (px/frame). */
+    maxSpeed?: number;
+}
+/**
+ * Скроллит окно когда указатель приближается к краю viewport'а.
+ * Активируется через `<DnDProvider autoScroll>` — вне drag'а ничего не делает.
+ */
+export declare const createWindowAutoScroll: (pointer: Accessor<IPoint | null>, isActive: Accessor<boolean>, config?: IAutoScrollConfig) => void;
+export {};

package/dist/context.d.ts

@@ -0,0 +1,17 @@
+import { Accessor, Component } from 'solid-js';
+import { DragData, DraggableId, DroppableId, IDnDProviderProps, IDraggableEntry, IDroppableEntry, IPoint } from './types';
+interface IDnDContext {
+    state: {
+        activeId: Accessor<DraggableId | null>;
+        activeData: Accessor<DragData | null>;
+        pointer: Accessor<IPoint | null>;
+        overId: Accessor<DroppableId | null>;
+        canDrop: Accessor<boolean>;
+    };
+    registerDraggable: (entry: IDraggableEntry) => () => void;
+    registerDroppable: (entry: IDroppableEntry) => () => void;
+    startDrag: (id: DraggableId, e: PointerEvent) => void;
+}
+export declare const useDnD: () => IDnDContext;
+export declare const DnDProvider: Component<IDnDProviderProps>;
+export {};

package/dist/draggable.d.ts

@@ -0,0 +1,13 @@
+import { DragData, IDraggable, IDraggableOptions } from './types';
+/**
+ * Primitive для draggable-источника. Применяется как `ref={drag.ref}` на
+ * элементе, который должен быть перетаскиваемым.
+ *
+ * Старт drag'а — `pointerdown` (любая кнопка/палец). На draggable-элементе
+ * проставляется `touch-action: none`, чтобы touch-drag не конфликтовал со
+ * скроллом страницы.
+ *
+ * Текстовое выделение во время drag'а гасится глобально через `user-select:
+ * none` пока `isDragging`.
+ */
+export declare const createDraggable: <T extends DragData = DragData>(options: IDraggableOptions<T>) => IDraggable;

package/dist/droppable.d.ts

@@ -0,0 +1,12 @@
+import { DragData, IDroppable, IDroppableOptions } from './types';
+/**
+ * Primitive для drop-цели. `ref={drop.ref}` на элементе.
+ *
+ * `accepts(data)` вызывается на каждом move/up для решения «можно ли сюда».
+ * Возвращаемые сигналы:
+ *  - `isOver` — pointer находится над этим droppable;
+ *  - `canDrop` — `isOver && accepts(activeData)`.
+ *
+ * Если `disabled()` true, droppable считается незарегистрированным.
+ */
+export declare const createDroppable: <T extends DragData = DragData>(options: IDroppableOptions<T>) => IDroppable;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { DnDProvider, useDnD } from './context';
+export { createDraggable } from './draggable';
+export { createDroppable } from './droppable';
+export { createSortable, isFromSortable } from './sortable';
+export { DragOverlay } from './overlay';
+export type { DraggableId, DroppableId, DragData, IPoint, IDraggable, IDraggableOptions, IDroppable, IDroppableOptions, IDropInfo, IDragEndResult, IDnDProviderProps, } from './types';
+export type { ISortableOptions, ISortableItem, ISortablePayload } from './sortable';

package/dist/index.mjs

@@ -0,0 +1,252 @@
+import { createComponent as P, Portal as R, insert as W, effect as _, className as q, setStyleProperty as C, memo as B, template as H } from "solid-js/web";
+import { createEffect as M, onCleanup as y, createContext as K, createSignal as h, createMemo as E, useContext as N, Show as T } from "solid-js";
+const U = (e, r, u = {}) => {
+  const c = u.edge ?? 50, a = u.maxSpeed ?? 15, o = (i, l) => {
+    if (i < c) {
+      const t = (c - i) / c;
+      return -Math.ceil(t * a);
+    }
+    if (i > l - c) {
+      const t = (i - (l - c)) / c;
+      return Math.ceil(t * a);
+    }
+    return 0;
+  };
+  M(() => {
+    if (!r()) return;
+    let i = null;
+    const l = () => {
+      const t = e();
+      if (t) {
+        const g = o(t.x, window.innerWidth), f = o(t.y, window.innerHeight);
+        (g !== 0 || f !== 0) && window.scrollBy(g, f);
+      }
+      i = requestAnimationFrame(l);
+    };
+    i = requestAnimationFrame(l), y(() => {
+      i !== null && cancelAnimationFrame(i);
+    });
+  });
+}, O = K(), S = () => {
+  const e = N(O);
+  if (!e)
+    throw new Error("[@capsuletech/dnd] useDnD must be used inside <DnDProvider>");
+  return e;
+}, Z = (e) => {
+  const [r, u] = h(null), [c, a] = h(null), [o, i] = h(null), [l, t] = h(null), g = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map(), D = /* @__PURE__ */ new WeakMap();
+  let p = null, w = null;
+  const b = (n, s) => {
+    let d = document.elementFromPoint(n, s);
+    for (; d; ) {
+      const v = D.get(d);
+      if (v) return f.get(v) ?? null;
+      d = d.parentElement;
+    }
+    return null;
+  }, Y = E(() => {
+    const n = c(), s = l();
+    if (!n || !s) return !1;
+    const d = f.get(s);
+    return d ? d.accepts(n) : !1;
+  }), L = (n) => {
+    i({
+      x: n.clientX,
+      y: n.clientY
+    });
+    const s = b(n.clientX, n.clientY);
+    t(s?.id ?? null);
+  }, x = (n) => {
+    const s = c(), d = r();
+    if (!s || !d) {
+      I();
+      return;
+    }
+    const v = b(n.clientX, n.clientY);
+    if (v?.accepts(s)) {
+      const m = v.el.getBoundingClientRect(), k = {
+        draggableId: d,
+        droppableId: v.id,
+        pointer: {
+          x: n.clientX,
+          y: n.clientY
+        },
+        ratio: {
+          x: m.width ? (n.clientX - m.left) / m.width : 0,
+          y: m.height ? (n.clientY - m.top) / m.height : 0
+        }
+      };
+      v.onDrop?.(s, k), e.onDragEnd?.({
+        kind: "drop",
+        data: s,
+        info: k
+      });
+    } else
+      e.onDragEnd?.({
+        kind: "cancel",
+        data: s,
+        draggableId: d
+      });
+    I();
+  }, A = (n) => {
+    if (n.key !== "Escape") return;
+    const s = c(), d = r();
+    s && d && e.onDragEnd?.({
+      kind: "cancel",
+      data: s,
+      draggableId: d
+    }), I();
+  }, I = () => {
+    if (p && w !== null)
+      try {
+        p.releasePointerCapture(w);
+      } catch {
+      }
+    p = null, w = null, window.removeEventListener("pointermove", L), window.removeEventListener("pointerup", x), window.removeEventListener("pointercancel", x), window.removeEventListener("keydown", A), u(null), a(null), i(null), t(null);
+  }, F = (n, s) => {
+    const d = g.get(n);
+    if (!d) return;
+    p = d.el, w = s.pointerId;
+    try {
+      d.el.setPointerCapture(s.pointerId);
+    } catch {
+    }
+    const v = d.data();
+    u(n), a(v), i({
+      x: s.clientX,
+      y: s.clientY
+    }), e.onDragStart?.(v, n), window.addEventListener("pointermove", L), window.addEventListener("pointerup", x), window.addEventListener("pointercancel", x), window.addEventListener("keydown", A);
+  };
+  e.autoScroll && U(o, () => r() !== null);
+  const $ = {
+    state: {
+      activeId: r,
+      activeData: c,
+      pointer: o,
+      overId: l,
+      canDrop: Y
+    },
+    registerDraggable: (n) => (g.set(n.id, n), () => {
+      g.delete(n.id);
+    }),
+    registerDroppable: (n) => (f.set(n.id, n), D.set(n.el, n.id), () => {
+      f.delete(n.id), D.delete(n.el);
+    }),
+    startDrag: F
+  };
+  return P(O.Provider, {
+    value: $,
+    get children() {
+      return e.children;
+    }
+  });
+}, j = (e) => typeof e == "function" ? e : () => e, z = (e) => {
+  const r = S(), u = j(e.data), c = e.disabled ?? (() => !1);
+  let a = null;
+  const o = E(() => r.state.activeId() === e.id), i = (t) => {
+    c() || t.button === 0 && (t.preventDefault(), r.startDrag(e.id, t));
+  }, l = (t) => {
+    if (a && a.removeEventListener("pointerdown", i), a = t, !t) return;
+    t.style.touchAction = "none", t.addEventListener("pointerdown", i);
+    const g = r.registerDraggable({
+      id: e.id,
+      data: u,
+      el: t
+    });
+    y(() => {
+      t.removeEventListener("pointerdown", i), g();
+    });
+  };
+  return M(() => {
+    if (!o()) return;
+    const t = document.body.style.userSelect;
+    document.body.style.userSelect = "none", y(() => {
+      document.body.style.userSelect = t;
+    });
+  }), { ref: l, isDragging: o };
+}, G = (e) => {
+  const r = S(), u = e.accepts ?? (() => !0), c = e.disabled ?? (() => !1);
+  let a = null;
+  const o = (t) => {
+    a?.(), a = null, t && (a = r.registerDroppable({
+      id: e.id,
+      el: t,
+      accepts: u,
+      onDrop: e.onDrop,
+      data: e.data
+    }), y(() => {
+      a?.(), a = null;
+    }));
+  }, i = E(
+    () => !c() && r.state.overId() === e.id
+  ), l = E(() => {
+    if (!i()) return !1;
+    const t = r.state.activeData();
+    return t ? u(t) : !1;
+  });
+  return { ref: o, isOver: i, canDrop: l };
+}, X = (e, r) => e.__sortable === r && typeof e.itemId == "string", ee = (e) => ({
+  createItem: (r) => {
+    const u = z({
+      id: `sortable:${e.id}:${r}`,
+      data: () => ({
+        __sortable: e.id,
+        itemId: r,
+        ...e.extra?.(r) ?? {}
+      })
+    }), c = G({
+      id: `sortable:${e.id}:${r}`,
+      accepts: (o) => X(o, e.id) && o.itemId !== r,
+      onDrop: (o, i) => {
+        const l = e.items(), t = l.indexOf(o.itemId), g = l.indexOf(r);
+        if (t === -1 || g === -1) return;
+        const f = l.filter((b) => b !== o.itemId), D = f.indexOf(r), p = i.ratio.y < 0.5 ? D : D + 1, w = [
+          ...f.slice(0, p),
+          o.itemId,
+          ...f.slice(p)
+        ];
+        e.onReorder(w);
+      }
+    });
+    return {
+      ref: (o) => {
+        u.ref(o), c.ref(o);
+      },
+      isDragging: u.isDragging,
+      isOver: c.canDrop
+    };
+  }
+}), te = (e, r) => !!e && X(e, r);
+var J = /* @__PURE__ */ H('<div style="position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%, -50%)">');
+const ne = (e) => {
+  const r = S(), u = () => e.offset?.x ?? 0, c = () => e.offset?.y ?? 0;
+  return P(T, {
+    get when() {
+      return B(() => !!r.state.activeData())() && r.state.pointer();
+    },
+    get children() {
+      return P(R, {
+        get children() {
+          var a = J();
+          return W(a, () => e.children(r.state.activeData())), _((o) => {
+            var i = e.class, l = `${r.state.pointer()?.x + u()}px`, t = `${r.state.pointer()?.y + c()}px`;
+            return i !== o.e && q(a, o.e = i), l !== o.t && C(a, "left", o.t = l), t !== o.a && C(a, "top", o.a = t), o;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          }), a;
+        }
+      });
+    }
+  });
+};
+export {
+  Z as DnDProvider,
+  ne as DragOverlay,
+  z as createDraggable,
+  G as createDroppable,
+  ee as createSortable,
+  te as isFromSortable,
+  S as useDnD
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/autoScroll.ts","../src/context.tsx","../src/draggable.ts","../src/droppable.ts","../src/sortable.ts","../src/overlay.tsx"],"sourcesContent":["import { type Accessor, createEffect, onCleanup } from 'solid-js';\nimport type { IPoint } from './types';\n\ninterface IAutoScrollConfig {\n  /** Зона у края (px), внутри которой начинается скролл. */\n  edge?: number;\n  /** Максимальная скорость скролла (px/frame). */\n  maxSpeed?: number;\n}\n\n/**\n * Скроллит окно когда указатель приближается к краю viewport'а.\n * Активируется через `<DnDProvider autoScroll>` — вне drag'а ничего не делает.\n */\nexport const createWindowAutoScroll = (\n  pointer: Accessor<IPoint | null>,\n  isActive: Accessor<boolean>,\n  config: IAutoScrollConfig = {},\n) => {\n  const edge = config.edge ?? 50;\n  const maxSpeed = config.maxSpeed ?? 15;\n\n  const delta = (coord: number, size: number) => {\n    if (coord < edge) {\n      const ratio = (edge - coord) / edge;\n      return -Math.ceil(ratio * maxSpeed);\n    }\n    if (coord > size - edge) {\n      const ratio = (coord - (size - edge)) / edge;\n      return Math.ceil(ratio * maxSpeed);\n    }\n    return 0;\n  };\n\n  createEffect(() => {\n    if (!isActive()) return;\n    let rafId: number | null = null;\n\n    const tick = () => {\n      const p = pointer();\n      if (p) {\n        const dx = delta(p.x, window.innerWidth);\n        const dy = delta(p.y, window.innerHeight);\n        if (dx !== 0 || dy !== 0) window.scrollBy(dx, dy);\n      }\n      rafId = requestAnimationFrame(tick);\n    };\n    rafId = requestAnimationFrame(tick);\n\n    onCleanup(() => {\n      if (rafId !== null) cancelAnimationFrame(rafId);\n    });\n  });\n};\n","import {\n  type Accessor,\n  type Component,\n  createContext,\n  createMemo,\n  createSignal,\n  useContext,\n} from 'solid-js';\nimport { createWindowAutoScroll } from './autoScroll';\nimport type {\n  DragData,\n  DraggableId,\n  DroppableId,\n  IDnDProviderProps,\n  IDraggableEntry,\n  IDropInfo,\n  IDroppableEntry,\n  IPoint,\n} from './types';\n\ninterface IDnDContext {\n  state: {\n    activeId: Accessor<DraggableId | null>;\n    activeData: Accessor<DragData | null>;\n    pointer: Accessor<IPoint | null>;\n    overId: Accessor<DroppableId | null>;\n    canDrop: Accessor<boolean>;\n  };\n  registerDraggable: (entry: IDraggableEntry) => () => void;\n  registerDroppable: (entry: IDroppableEntry) => () => void;\n  startDrag: (id: DraggableId, e: PointerEvent) => void;\n}\n\nconst Ctx = createContext<IDnDContext>();\n\nexport const useDnD = (): IDnDContext => {\n  const ctx = useContext(Ctx);\n  if (!ctx) {\n    throw new Error('[@capsuletech/dnd] useDnD must be used inside <DnDProvider>');\n  }\n  return ctx;\n};\n\nexport const DnDProvider: Component<IDnDProviderProps> = (props) => {\n  const [activeId, setActiveId] = createSignal<DraggableId | null>(null);\n  const [activeData, setActiveData] = createSignal<DragData | null>(null);\n  const [pointer, setPointer] = createSignal<IPoint | null>(null);\n  const [overId, setOverId] = createSignal<DroppableId | null>(null);\n\n  // Не реактивные реестры — изменения не должны триггерить ре-рендер всех\n  // потребителей контекста. Реактивность отдельных полей даёт signals выше.\n  const draggables = new Map<DraggableId, IDraggableEntry>();\n  const droppables = new Map<DroppableId, IDroppableEntry>();\n  const elToDroppableId = new WeakMap<HTMLElement, DroppableId>();\n\n  let captureEl: HTMLElement | null = null;\n  let capturePointerId: number | null = null;\n\n  const findDroppableAt = (x: number, y: number): IDroppableEntry | null => {\n    let el = document.elementFromPoint(x, y) as HTMLElement | null;\n    while (el) {\n      const id = elToDroppableId.get(el);\n      if (id) return droppables.get(id) ?? null;\n      el = el.parentElement;\n    }\n    return null;\n  };\n\n  const canDrop = createMemo(() => {\n    const data = activeData();\n    const oid = overId();\n    if (!data || !oid) return false;\n    const drop = droppables.get(oid);\n    if (!drop) return false;\n    return drop.accepts(data);\n  });\n\n  const onPointerMove = (e: PointerEvent) => {\n    setPointer({ x: e.clientX, y: e.clientY });\n    const drop = findDroppableAt(e.clientX, e.clientY);\n    setOverId(drop?.id ?? null);\n  };\n\n  const onPointerUp = (e: PointerEvent) => {\n    const data = activeData();\n    const id = activeId();\n    if (!data || !id) {\n      cleanup();\n      return;\n    }\n    const drop = findDroppableAt(e.clientX, e.clientY);\n    if (drop?.accepts(data)) {\n      const rect = drop.el.getBoundingClientRect();\n      const info: IDropInfo = {\n        draggableId: id,\n        droppableId: drop.id,\n        pointer: { x: e.clientX, y: e.clientY },\n        ratio: {\n          x: rect.width ? (e.clientX - rect.left) / rect.width : 0,\n          y: rect.height ? (e.clientY - rect.top) / rect.height : 0,\n        },\n      };\n      drop.onDrop?.(data, info);\n      props.onDragEnd?.({ kind: 'drop', data, info });\n    } else {\n      props.onDragEnd?.({ kind: 'cancel', data, draggableId: id });\n    }\n    cleanup();\n  };\n\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (e.key !== 'Escape') return;\n    const data = activeData();\n    const id = activeId();\n    if (data && id) {\n      props.onDragEnd?.({ kind: 'cancel', data, draggableId: id });\n    }\n    cleanup();\n  };\n\n  const cleanup = () => {\n    if (captureEl && capturePointerId !== null) {\n      try {\n        captureEl.releasePointerCapture(capturePointerId);\n      } catch {\n        // pointer мог уже быть отпущен браузером — ничего страшного\n      }\n    }\n    captureEl = null;\n    capturePointerId = null;\n    window.removeEventListener('pointermove', onPointerMove);\n    window.removeEventListener('pointerup', onPointerUp);\n    window.removeEventListener('pointercancel', onPointerUp);\n    window.removeEventListener('keydown', onKeyDown);\n    setActiveId(null);\n    setActiveData(null);\n    setPointer(null);\n    setOverId(null);\n  };\n\n  const startDrag = (id: DraggableId, e: PointerEvent) => {\n    const entry = draggables.get(id);\n    if (!entry) return;\n    captureEl = entry.el;\n    capturePointerId = e.pointerId;\n    try {\n      entry.el.setPointerCapture(e.pointerId);\n    } catch {\n      // setPointerCapture может бросать в некоторых средах (e.g. iframe без user gesture).\n      // Не критично — pointermove/up через window всё равно ловим.\n    }\n    const data = entry.data();\n    setActiveId(id);\n    setActiveData(data);\n    setPointer({ x: e.clientX, y: e.clientY });\n    props.onDragStart?.(data, id);\n\n    window.addEventListener('pointermove', onPointerMove);\n    window.addEventListener('pointerup', onPointerUp);\n    window.addEventListener('pointercancel', onPointerUp);\n    window.addEventListener('keydown', onKeyDown);\n  };\n\n  // Auto-scroll по краям viewport. Активен только при активном drag'е, если\n  // включено через `<DnDProvider autoScroll>`.\n  if (props.autoScroll) {\n    createWindowAutoScroll(pointer, () => activeId() !== null);\n  }\n\n  const api: IDnDContext = {\n    state: { activeId, activeData, pointer, overId, canDrop },\n    registerDraggable: (entry) => {\n      draggables.set(entry.id, entry);\n      return () => {\n        draggables.delete(entry.id);\n      };\n    },\n    registerDroppable: (entry) => {\n      droppables.set(entry.id, entry);\n      elToDroppableId.set(entry.el, entry.id);\n      return () => {\n        droppables.delete(entry.id);\n        elToDroppableId.delete(entry.el);\n      };\n    },\n    startDrag,\n  };\n\n  return <Ctx.Provider value={api}>{props.children}</Ctx.Provider>;\n};\n","import { type Accessor, createEffect, createMemo, onCleanup } from 'solid-js';\nimport { useDnD } from './context';\nimport type { DragData, IDraggable, IDraggableOptions } from './types';\n\nconst toAccessor = <T>(v: Accessor<T> | T): Accessor<T> =>\n  typeof v === 'function' ? (v as Accessor<T>) : () => v;\n\n/**\n * Primitive для draggable-источника. Применяется как `ref={drag.ref}` на\n * элементе, который должен быть перетаскиваемым.\n *\n * Старт drag'а — `pointerdown` (любая кнопка/палец). На draggable-элементе\n * проставляется `touch-action: none`, чтобы touch-drag не конфликтовал со\n * скроллом страницы.\n *\n * Текстовое выделение во время drag'а гасится глобально через `user-select:\n * none` пока `isDragging`.\n */\nexport const createDraggable = <T extends DragData = DragData>(\n  options: IDraggableOptions<T>,\n): IDraggable => {\n  const dnd = useDnD();\n  const data = toAccessor(options.data);\n  const disabled = options.disabled ?? (() => false);\n\n  let elRef: HTMLElement | null = null;\n\n  const isDragging = createMemo(() => dnd.state.activeId() === options.id);\n\n  const onPointerDown = (e: PointerEvent) => {\n    if (disabled()) return;\n    // Только основная кнопка (или touch — у touch button === 0)\n    if (e.button !== 0) return;\n    e.preventDefault();\n    dnd.startDrag(options.id, e);\n  };\n\n  const ref = (el: HTMLElement) => {\n    if (elRef) {\n      elRef.removeEventListener('pointerdown', onPointerDown);\n    }\n    elRef = el;\n    if (!el) return;\n    el.style.touchAction = 'none';\n    el.addEventListener('pointerdown', onPointerDown);\n\n    const unregister = dnd.registerDraggable({\n      id: options.id,\n      data: data as Accessor<DragData>,\n      el,\n    });\n\n    onCleanup(() => {\n      el.removeEventListener('pointerdown', onPointerDown);\n      unregister();\n    });\n  };\n\n  // Глобальное гашение text-selection пока тянем — иначе drag по тексту\n  // выделяет случайные участки.\n  createEffect(() => {\n    if (!isDragging()) return;\n    const prev = document.body.style.userSelect;\n    document.body.style.userSelect = 'none';\n    onCleanup(() => {\n      document.body.style.userSelect = prev;\n    });\n  });\n\n  return { ref, isDragging };\n};\n","import { type Accessor, createMemo, onCleanup } from 'solid-js';\nimport { useDnD } from './context';\nimport type { DragData, IDroppable, IDroppableOptions } from './types';\n\n/**\n * Primitive для drop-цели. `ref={drop.ref}` на элементе.\n *\n * `accepts(data)` вызывается на каждом move/up для решения «можно ли сюда».\n * Возвращаемые сигналы:\n *  - `isOver` — pointer находится над этим droppable;\n *  - `canDrop` — `isOver && accepts(activeData)`.\n *\n * Если `disabled()` true, droppable считается незарегистрированным.\n */\nexport const createDroppable = <T extends DragData = DragData>(\n  options: IDroppableOptions<T>,\n): IDroppable => {\n  const dnd = useDnD();\n  const accepts = options.accepts ?? (() => true);\n  const disabled = options.disabled ?? (() => false);\n\n  let cleanupRegister: (() => void) | null = null;\n\n  const ref = (el: HTMLElement) => {\n    cleanupRegister?.();\n    cleanupRegister = null;\n    if (!el) return;\n    cleanupRegister = dnd.registerDroppable({\n      id: options.id,\n      el,\n      accepts: accepts as (d: DragData) => boolean,\n      onDrop: options.onDrop as IDroppableOptions<DragData>['onDrop'],\n      data: options.data as DragData | undefined,\n    });\n    onCleanup(() => {\n      cleanupRegister?.();\n      cleanupRegister = null;\n    });\n  };\n\n  const isOver: Accessor<boolean> = createMemo(\n    () => !disabled() && dnd.state.overId() === options.id,\n  );\n\n  const canDrop: Accessor<boolean> = createMemo(() => {\n    if (!isOver()) return false;\n    const data = dnd.state.activeData() as T | null;\n    if (!data) return false;\n    return accepts(data);\n  });\n\n  return { ref, isOver, canDrop };\n};\n","import type { Accessor } from 'solid-js';\nimport { createDraggable } from './draggable';\nimport { createDroppable } from './droppable';\nimport type { DragData, IDropInfo } from './types';\n\nexport interface ISortableOptions<TExtra extends DragData = DragData> {\n  /** Уникальный id экземпляра sortable (если их несколько). */\n  id: string;\n  /** Текущий порядок item-id'ов. */\n  items: Accessor<string[]>;\n  /** Колбэк с новым порядком после успешного reorder'а. */\n  onReorder: (newOrder: string[]) => void;\n  /**\n   * Доп. поля в drag-data — пробрасываются вместе с системными `sortableId`,\n   * `itemId`. Полезно для cross-sortable accepts-логики (например, у каждого\n   * item'а есть `type`, чтобы внешний droppable знал, можно ли его принять).\n   */\n  extra?: (itemId: string) => TExtra;\n}\n\nexport interface ISortableItem {\n  ref: (el: HTMLElement) => void;\n  isDragging: Accessor<boolean>;\n  isOver: Accessor<boolean>;\n}\n\ninterface ISortablePayload {\n  /** Маркер sortable-источника. */\n  __sortable: string;\n  itemId: string;\n  [k: string]: unknown;\n}\n\nconst isSortablePayload = (d: DragData, sortableId: string): d is ISortablePayload =>\n  (d as any).__sortable === sortableId && typeof (d as any).itemId === 'string';\n\n/**\n * Лёгкая обёртка над `createDraggable + createDroppable` для упорядоченных\n * списков (например, дочерние ноды в редакторе-дереве).\n *\n * Для каждого item получается **одновременно** и draggable, и droppable.\n * Drop в верхнюю половину — вставка до target'а, в нижнюю — после.\n *\n * Sortable принимает only-свои item'ы (через `__sortable === id`). Drop из\n * палитры/иного источника нужно ловить отдельным `createDroppable` на\n * контейнере.\n */\nexport const createSortable = <TExtra extends DragData = DragData>(\n  options: ISortableOptions<TExtra>,\n) => {\n  return {\n    createItem: (itemId: string): ISortableItem => {\n      const drag = createDraggable<ISortablePayload>({\n        id: `sortable:${options.id}:${itemId}`,\n        data: () => ({\n          __sortable: options.id,\n          itemId,\n          ...(options.extra?.(itemId) ?? ({} as TExtra)),\n        }),\n      });\n\n      const drop = createDroppable<ISortablePayload>({\n        id: `sortable:${options.id}:${itemId}`,\n        accepts: (data) => isSortablePayload(data, options.id) && data.itemId !== itemId,\n        onDrop: (data, info: IDropInfo) => {\n          const current = options.items();\n          const fromIdx = current.indexOf(data.itemId);\n          const toIdx = current.indexOf(itemId);\n          if (fromIdx === -1 || toIdx === -1) return;\n\n          // Удаляем dragged из текущего порядка\n          const withoutDragged = current.filter((id) => id !== data.itemId);\n          // Целевой индекс после удаления — пересчитываем\n          const baseIdx = withoutDragged.indexOf(itemId);\n          // Вставка до/после в зависимости от вертикальной позиции pointer'а\n          const insertAt = info.ratio.y < 0.5 ? baseIdx : baseIdx + 1;\n\n          const next = [\n            ...withoutDragged.slice(0, insertAt),\n            data.itemId,\n            ...withoutDragged.slice(insertAt),\n          ];\n          options.onReorder(next);\n        },\n      });\n\n      const ref = (el: HTMLElement) => {\n        drag.ref(el);\n        drop.ref(el);\n      };\n\n      return {\n        ref,\n        isDragging: drag.isDragging,\n        isOver: drop.canDrop,\n      };\n    },\n  };\n};\n\n// Хелпер для intercept-логики: подписаться на текущий activeData и проверить,\n// что это item from-sortable. Удобно для зон-приёмников из других контекстов.\nexport const isFromSortable = (\n  data: DragData | null,\n  sortableId: string,\n): data is ISortablePayload => !!data && isSortablePayload(data as DragData, sortableId);\n\n/** Re-export для совместного использования с другими droppable'ами. */\nexport type { ISortablePayload };\n","import { type JSX, Show } from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { useDnD } from './context';\nimport type { DragData } from './types';\n\ninterface IDragOverlayProps {\n  /** Render-prop с текущим payload'ом перетаскиваемого элемента. */\n  children: (data: DragData) => JSX.Element;\n  /** Смещение preview относительно курсора (по умолчанию centered под pointer'ом). */\n  offset?: { x: number; y: number };\n  /**\n   * Дополнительный класс для preview-обёртки. Сама обёртка — `position: fixed`\n   * с `pointer-events: none`, чтобы курсор «прошивал» её и попадал в droppable.\n   */\n  class?: string;\n}\n\n/**\n * Призрак перетаскиваемого элемента, рендерится в `<body>` через Portal.\n * Не реагирует на pointer-events — иначе hit-testing не нашёл бы droppable\n * под курсором.\n */\nexport const DragOverlay = (props: IDragOverlayProps) => {\n  const dnd = useDnD();\n  const offX = () => props.offset?.x ?? 0;\n  const offY = () => props.offset?.y ?? 0;\n\n  return (\n    <Show when={dnd.state.activeData() && dnd.state.pointer()}>\n      <Portal>\n        <div\n          class={props.class}\n          style={{\n            position: 'fixed',\n            left: `${dnd.state.pointer()?.x + offX()}px`,\n            top: `${dnd.state.pointer()?.y + offY()}px`,\n            'pointer-events': 'none',\n            'z-index': '9999',\n            transform: 'translate(-50%, -50%)',\n          }}\n        >\n          {props.children(dnd.state.activeData()!)}\n        </div>\n      </Portal>\n    </Show>\n  );\n};\n"],"names":["createWindowAutoScroll","pointer","isActive","config","edge","maxSpeed","delta","coord","size","ratio","createEffect","rafId","tick","p","dx","dy","onCleanup","Ctx","createContext","useDnD","ctx","useContext","Error","DnDProvider","props","activeId","setActiveId","createSignal","activeData","setActiveData","setPointer","overId","setOverId","draggables","Map","droppables","elToDroppableId","WeakMap","captureEl","capturePointerId","findDroppableAt","x","y","el","document","elementFromPoint","id","get","parentElement","canDrop","createMemo","data","oid","drop","accepts","onPointerMove","e","clientX","clientY","onPointerUp","cleanup","rect","getBoundingClientRect","info","draggableId","droppableId","width","left","height","top","onDrop","onDragEnd","kind","onKeyDown","key","releasePointerCapture","window","removeEventListener","startDrag","entry","pointerId","setPointerCapture","onDragStart","addEventListener","autoScroll","api","state","registerDraggable","set","delete","registerDroppable","_$createComponent","Provider","value","children","toAccessor","v","createDraggable","options","dnd","disabled","elRef","isDragging","onPointerDown","ref","unregister","prev","createDroppable","cleanupRegister","isOver","isSortablePayload","d","sortableId","createSortable","itemId","drag","current","fromIdx","toIdx","withoutDragged","baseIdx","insertAt","next","isFromSortable","DragOverlay","offX","offset","offY","Show","when","_$memo","Portal","_el$","_tmpl$","_$insert","_$effect","_p$","_v$","class","_v$2","_v$3","_$className","t","_$setStyleProperty","a","undefined"],"mappings":"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"}

package/dist/overlay.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+import { DragData } from './types';
+interface IDragOverlayProps {
+    /** Render-prop с текущим payload'ом перетаскиваемого элемента. */
+    children: (data: DragData) => JSX.Element;
+    /** Смещение preview относительно курсора (по умолчанию centered под pointer'ом). */
+    offset?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Дополнительный класс для preview-обёртки. Сама обёртка — `position: fixed`
+     * с `pointer-events: none`, чтобы курсор «прошивал» её и попадал в droppable.
+     */
+    class?: string;
+}
+/**
+ * Призрак перетаскиваемого элемента, рендерится в `<body>` через Portal.
+ * Не реагирует на pointer-events — иначе hit-testing не нашёл бы droppable
+ * под курсором.
+ */
+export declare const DragOverlay: (props: IDragOverlayProps) => JSX.Element;
+export {};

package/dist/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@capsuletech/web-dnd",
+  "version": "0.0.17",
+  "type": "module",
+  "main": "./index.mjs",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "default": "./index.mjs"
+    }
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  }
+}

package/dist/sortable.d.ts

@@ -0,0 +1,44 @@
+import { Accessor } from 'solid-js';
+import { DragData } from './types';
+export interface ISortableOptions<TExtra extends DragData = DragData> {
+    /** Уникальный id экземпляра sortable (если их несколько). */
+    id: string;
+    /** Текущий порядок item-id'ов. */
+    items: Accessor<string[]>;
+    /** Колбэк с новым порядком после успешного reorder'а. */
+    onReorder: (newOrder: string[]) => void;
+    /**
+     * Доп. поля в drag-data — пробрасываются вместе с системными `sortableId`,
+     * `itemId`. Полезно для cross-sortable accepts-логики (например, у каждого
+     * item'а есть `type`, чтобы внешний droppable знал, можно ли его принять).
+     */
+    extra?: (itemId: string) => TExtra;
+}
+export interface ISortableItem {
+    ref: (el: HTMLElement) => void;
+    isDragging: Accessor<boolean>;
+    isOver: Accessor<boolean>;
+}
+interface ISortablePayload {
+    /** Маркер sortable-источника. */
+    __sortable: string;
+    itemId: string;
+    [k: string]: unknown;
+}
+/**
+ * Лёгкая обёртка над `createDraggable + createDroppable` для упорядоченных
+ * списков (например, дочерние ноды в редакторе-дереве).
+ *
+ * Для каждого item получается **одновременно** и draggable, и droppable.
+ * Drop в верхнюю половину — вставка до target'а, в нижнюю — после.
+ *
+ * Sortable принимает only-свои item'ы (через `__sortable === id`). Drop из
+ * палитры/иного источника нужно ловить отдельным `createDroppable` на
+ * контейнере.
+ */
+export declare const createSortable: <TExtra extends DragData = DragData>(options: ISortableOptions<TExtra>) => {
+    createItem: (itemId: string) => ISortableItem;
+};
+export declare const isFromSortable: (data: DragData | null, sortableId: string) => data is ISortablePayload;
+/** Re-export для совместного использования с другими droppable'ами. */
+export type { ISortablePayload };

package/dist/types.d.ts

@@ -0,0 +1,80 @@
+import { Accessor, JSX } from 'solid-js';
+export type DraggableId = string;
+export type DroppableId = string;
+/**
+ * Полезная нагрузка перетаскиваемого элемента. Произвольная — библиотека к
+ * содержимому не привязана. Потребитель сам сужает тип в `accepts` / `onDrop`.
+ */
+export type DragData = Record<string, unknown>;
+export interface IPoint {
+    x: number;
+    y: number;
+}
+export interface IDraggableEntry<T extends DragData = DragData> {
+    id: DraggableId;
+    /** Реактивный геттер — payload может меняться (e.g. имя ноды в дереве). */
+    data: Accessor<T>;
+    el: HTMLElement;
+}
+export interface IDroppableEntry<T extends DragData = DragData> {
+    id: DroppableId;
+    el: HTMLElement;
+    /** Предикат, разрешающий или запрещающий drop конкретного draggable'а. */
+    accepts: (data: T) => boolean;
+    onDrop?: (data: T, info: IDropInfo) => void;
+    /** Доп. данные о droppable'е (e.g. parent-id ноды в дереве) — пробрасываются в onDrop. */
+    data?: T;
+}
+export interface IDropInfo {
+    /** Источник drag'а. */
+    draggableId: DraggableId;
+    /** Цель drop'а. */
+    droppableId: DroppableId;
+    /** Координаты pointer'а в момент drop'а (viewport). */
+    pointer: IPoint;
+    /** Координаты pointer'а относительно droppable-элемента (0..1 нормализовано). */
+    ratio: IPoint;
+}
+export interface IDraggableOptions<T extends DragData = DragData> {
+    id: DraggableId;
+    /** Реактивная функция → payload. Вызывается при каждом start drag. */
+    data: Accessor<T> | T;
+    /** Отключить draggable (e.g. disabled state). */
+    disabled?: Accessor<boolean>;
+}
+export interface IDraggable {
+    ref: (el: HTMLElement) => void;
+    isDragging: Accessor<boolean>;
+}
+export interface IDroppableOptions<T extends DragData = DragData> {
+    id: DroppableId;
+    /** По умолчанию принимает всё. */
+    accepts?: (data: T) => boolean;
+    onDrop?: (data: T, info: IDropInfo) => void;
+    /** Опциональные мета-данные droppable'а. */
+    data?: T;
+    disabled?: Accessor<boolean>;
+}
+export interface IDroppable {
+    ref: (el: HTMLElement) => void;
+    /** Курсор сейчас над этим droppable. */
+    isOver: Accessor<boolean>;
+    /** isOver && accepts(activeData) — удобный shorthand. */
+    canDrop: Accessor<boolean>;
+}
+export interface IDnDProviderProps {
+    children: JSX.Element;
+    /** Скроллить window когда pointer у края viewport'а. По умолчанию off. */
+    autoScroll?: boolean;
+    onDragStart?: (data: DragData, draggableId: DraggableId) => void;
+    onDragEnd?: (result: IDragEndResult) => void;
+}
+export type IDragEndResult = {
+    kind: 'drop';
+    data: DragData;
+    info: IDropInfo;
+} | {
+    kind: 'cancel';
+    data: DragData;
+    draggableId: DraggableId;
+};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@capsuletech/web-dnd",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!**/*.tsbuildinfo"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  },
+  "devDependencies": {
+    "@capsuletech/shared-vite": "0.1.0"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
+}

package/src/autoScroll.ts

@@ -0,0 +1,54 @@
+import { type Accessor, createEffect, onCleanup } from 'solid-js';
+import type { IPoint } from './types';
+
+interface IAutoScrollConfig {
+  /** Зона у края (px), внутри которой начинается скролл. */
+  edge?: number;
+  /** Максимальная скорость скролла (px/frame). */
+  maxSpeed?: number;
+}
+
+/**
+ * Скроллит окно когда указатель приближается к краю viewport'а.
+ * Активируется через `<DnDProvider autoScroll>` — вне drag'а ничего не делает.
+ */
+export const createWindowAutoScroll = (
+  pointer: Accessor<IPoint | null>,
+  isActive: Accessor<boolean>,
+  config: IAutoScrollConfig = {},
+) => {
+  const edge = config.edge ?? 50;
+  const maxSpeed = config.maxSpeed ?? 15;
+
+  const delta = (coord: number, size: number) => {
+    if (coord < edge) {
+      const ratio = (edge - coord) / edge;
+      return -Math.ceil(ratio * maxSpeed);
+    }
+    if (coord > size - edge) {
+      const ratio = (coord - (size - edge)) / edge;
+      return Math.ceil(ratio * maxSpeed);
+    }
+    return 0;
+  };
+
+  createEffect(() => {
+    if (!isActive()) return;
+    let rafId: number | null = null;
+
+    const tick = () => {
+      const p = pointer();
+      if (p) {
+        const dx = delta(p.x, window.innerWidth);
+        const dy = delta(p.y, window.innerHeight);
+        if (dx !== 0 || dy !== 0) window.scrollBy(dx, dy);
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+
+    onCleanup(() => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    });
+  });
+};

package/src/context.tsx

@@ -0,0 +1,190 @@
+import {
+  type Accessor,
+  type Component,
+  createContext,
+  createMemo,
+  createSignal,
+  useContext,
+} from 'solid-js';
+import { createWindowAutoScroll } from './autoScroll';
+import type {
+  DragData,
+  DraggableId,
+  DroppableId,
+  IDnDProviderProps,
+  IDraggableEntry,
+  IDropInfo,
+  IDroppableEntry,
+  IPoint,
+} from './types';
+
+interface IDnDContext {
+  state: {
+    activeId: Accessor<DraggableId | null>;
+    activeData: Accessor<DragData | null>;
+    pointer: Accessor<IPoint | null>;
+    overId: Accessor<DroppableId | null>;
+    canDrop: Accessor<boolean>;
+  };
+  registerDraggable: (entry: IDraggableEntry) => () => void;
+  registerDroppable: (entry: IDroppableEntry) => () => void;
+  startDrag: (id: DraggableId, e: PointerEvent) => void;
+}
+
+const Ctx = createContext<IDnDContext>();
+
+export const useDnD = (): IDnDContext => {
+  const ctx = useContext(Ctx);
+  if (!ctx) {
+    throw new Error('[@capsuletech/dnd] useDnD must be used inside <DnDProvider>');
+  }
+  return ctx;
+};
+
+export const DnDProvider: Component<IDnDProviderProps> = (props) => {
+  const [activeId, setActiveId] = createSignal<DraggableId | null>(null);
+  const [activeData, setActiveData] = createSignal<DragData | null>(null);
+  const [pointer, setPointer] = createSignal<IPoint | null>(null);
+  const [overId, setOverId] = createSignal<DroppableId | null>(null);
+
+  // Не реактивные реестры — изменения не должны триггерить ре-рендер всех
+  // потребителей контекста. Реактивность отдельных полей даёт signals выше.
+  const draggables = new Map<DraggableId, IDraggableEntry>();
+  const droppables = new Map<DroppableId, IDroppableEntry>();
+  const elToDroppableId = new WeakMap<HTMLElement, DroppableId>();
+
+  let captureEl: HTMLElement | null = null;
+  let capturePointerId: number | null = null;
+
+  const findDroppableAt = (x: number, y: number): IDroppableEntry | null => {
+    let el = document.elementFromPoint(x, y) as HTMLElement | null;
+    while (el) {
+      const id = elToDroppableId.get(el);
+      if (id) return droppables.get(id) ?? null;
+      el = el.parentElement;
+    }
+    return null;
+  };
+
+  const canDrop = createMemo(() => {
+    const data = activeData();
+    const oid = overId();
+    if (!data || !oid) return false;
+    const drop = droppables.get(oid);
+    if (!drop) return false;
+    return drop.accepts(data);
+  });
+
+  const onPointerMove = (e: PointerEvent) => {
+    setPointer({ x: e.clientX, y: e.clientY });
+    const drop = findDroppableAt(e.clientX, e.clientY);
+    setOverId(drop?.id ?? null);
+  };
+
+  const onPointerUp = (e: PointerEvent) => {
+    const data = activeData();
+    const id = activeId();
+    if (!data || !id) {
+      cleanup();
+      return;
+    }
+    const drop = findDroppableAt(e.clientX, e.clientY);
+    if (drop?.accepts(data)) {
+      const rect = drop.el.getBoundingClientRect();
+      const info: IDropInfo = {
+        draggableId: id,
+        droppableId: drop.id,
+        pointer: { x: e.clientX, y: e.clientY },
+        ratio: {
+          x: rect.width ? (e.clientX - rect.left) / rect.width : 0,
+          y: rect.height ? (e.clientY - rect.top) / rect.height : 0,
+        },
+      };
+      drop.onDrop?.(data, info);
+      props.onDragEnd?.({ kind: 'drop', data, info });
+    } else {
+      props.onDragEnd?.({ kind: 'cancel', data, draggableId: id });
+    }
+    cleanup();
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== 'Escape') return;
+    const data = activeData();
+    const id = activeId();
+    if (data && id) {
+      props.onDragEnd?.({ kind: 'cancel', data, draggableId: id });
+    }
+    cleanup();
+  };
+
+  const cleanup = () => {
+    if (captureEl && capturePointerId !== null) {
+      try {
+        captureEl.releasePointerCapture(capturePointerId);
+      } catch {
+        // pointer мог уже быть отпущен браузером — ничего страшного
+      }
+    }
+    captureEl = null;
+    capturePointerId = null;
+    window.removeEventListener('pointermove', onPointerMove);
+    window.removeEventListener('pointerup', onPointerUp);
+    window.removeEventListener('pointercancel', onPointerUp);
+    window.removeEventListener('keydown', onKeyDown);
+    setActiveId(null);
+    setActiveData(null);
+    setPointer(null);
+    setOverId(null);
+  };
+
+  const startDrag = (id: DraggableId, e: PointerEvent) => {
+    const entry = draggables.get(id);
+    if (!entry) return;
+    captureEl = entry.el;
+    capturePointerId = e.pointerId;
+    try {
+      entry.el.setPointerCapture(e.pointerId);
+    } catch {
+      // setPointerCapture может бросать в некоторых средах (e.g. iframe без user gesture).
+      // Не критично — pointermove/up через window всё равно ловим.
+    }
+    const data = entry.data();
+    setActiveId(id);
+    setActiveData(data);
+    setPointer({ x: e.clientX, y: e.clientY });
+    props.onDragStart?.(data, id);
+
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', onPointerUp);
+    window.addEventListener('pointercancel', onPointerUp);
+    window.addEventListener('keydown', onKeyDown);
+  };
+
+  // Auto-scroll по краям viewport. Активен только при активном drag'е, если
+  // включено через `<DnDProvider autoScroll>`.
+  if (props.autoScroll) {
+    createWindowAutoScroll(pointer, () => activeId() !== null);
+  }
+
+  const api: IDnDContext = {
+    state: { activeId, activeData, pointer, overId, canDrop },
+    registerDraggable: (entry) => {
+      draggables.set(entry.id, entry);
+      return () => {
+        draggables.delete(entry.id);
+      };
+    },
+    registerDroppable: (entry) => {
+      droppables.set(entry.id, entry);
+      elToDroppableId.set(entry.el, entry.id);
+      return () => {
+        droppables.delete(entry.id);
+        elToDroppableId.delete(entry.el);
+      };
+    },
+    startDrag,
+  };
+
+  return <Ctx.Provider value={api}>{props.children}</Ctx.Provider>;
+};

package/src/draggable.ts

@@ -0,0 +1,71 @@
+import { type Accessor, createEffect, createMemo, onCleanup } from 'solid-js';
+import { useDnD } from './context';
+import type { DragData, IDraggable, IDraggableOptions } from './types';
+
+const toAccessor = <T>(v: Accessor<T> | T): Accessor<T> =>
+  typeof v === 'function' ? (v as Accessor<T>) : () => v;
+
+/**
+ * Primitive для draggable-источника. Применяется как `ref={drag.ref}` на
+ * элементе, который должен быть перетаскиваемым.
+ *
+ * Старт drag'а — `pointerdown` (любая кнопка/палец). На draggable-элементе
+ * проставляется `touch-action: none`, чтобы touch-drag не конфликтовал со
+ * скроллом страницы.
+ *
+ * Текстовое выделение во время drag'а гасится глобально через `user-select:
+ * none` пока `isDragging`.
+ */
+export const createDraggable = <T extends DragData = DragData>(
+  options: IDraggableOptions<T>,
+): IDraggable => {
+  const dnd = useDnD();
+  const data = toAccessor(options.data);
+  const disabled = options.disabled ?? (() => false);
+
+  let elRef: HTMLElement | null = null;
+
+  const isDragging = createMemo(() => dnd.state.activeId() === options.id);
+
+  const onPointerDown = (e: PointerEvent) => {
+    if (disabled()) return;
+    // Только основная кнопка (или touch — у touch button === 0)
+    if (e.button !== 0) return;
+    e.preventDefault();
+    dnd.startDrag(options.id, e);
+  };
+
+  const ref = (el: HTMLElement) => {
+    if (elRef) {
+      elRef.removeEventListener('pointerdown', onPointerDown);
+    }
+    elRef = el;
+    if (!el) return;
+    el.style.touchAction = 'none';
+    el.addEventListener('pointerdown', onPointerDown);
+
+    const unregister = dnd.registerDraggable({
+      id: options.id,
+      data: data as Accessor<DragData>,
+      el,
+    });
+
+    onCleanup(() => {
+      el.removeEventListener('pointerdown', onPointerDown);
+      unregister();
+    });
+  };
+
+  // Глобальное гашение text-selection пока тянем — иначе drag по тексту
+  // выделяет случайные участки.
+  createEffect(() => {
+    if (!isDragging()) return;
+    const prev = document.body.style.userSelect;
+    document.body.style.userSelect = 'none';
+    onCleanup(() => {
+      document.body.style.userSelect = prev;
+    });
+  });
+
+  return { ref, isDragging };
+};

package/src/droppable.ts

@@ -0,0 +1,53 @@
+import { type Accessor, createMemo, onCleanup } from 'solid-js';
+import { useDnD } from './context';
+import type { DragData, IDroppable, IDroppableOptions } from './types';
+
+/**
+ * Primitive для drop-цели. `ref={drop.ref}` на элементе.
+ *
+ * `accepts(data)` вызывается на каждом move/up для решения «можно ли сюда».
+ * Возвращаемые сигналы:
+ *  - `isOver` — pointer находится над этим droppable;
+ *  - `canDrop` — `isOver && accepts(activeData)`.
+ *
+ * Если `disabled()` true, droppable считается незарегистрированным.
+ */
+export const createDroppable = <T extends DragData = DragData>(
+  options: IDroppableOptions<T>,
+): IDroppable => {
+  const dnd = useDnD();
+  const accepts = options.accepts ?? (() => true);
+  const disabled = options.disabled ?? (() => false);
+
+  let cleanupRegister: (() => void) | null = null;
+
+  const ref = (el: HTMLElement) => {
+    cleanupRegister?.();
+    cleanupRegister = null;
+    if (!el) return;
+    cleanupRegister = dnd.registerDroppable({
+      id: options.id,
+      el,
+      accepts: accepts as (d: DragData) => boolean,
+      onDrop: options.onDrop as IDroppableOptions<DragData>['onDrop'],
+      data: options.data as DragData | undefined,
+    });
+    onCleanup(() => {
+      cleanupRegister?.();
+      cleanupRegister = null;
+    });
+  };
+
+  const isOver: Accessor<boolean> = createMemo(
+    () => !disabled() && dnd.state.overId() === options.id,
+  );
+
+  const canDrop: Accessor<boolean> = createMemo(() => {
+    if (!isOver()) return false;
+    const data = dnd.state.activeData() as T | null;
+    if (!data) return false;
+    return accepts(data);
+  });
+
+  return { ref, isOver, canDrop };
+};

package/src/index.ts

@@ -0,0 +1,19 @@
+export { DnDProvider, useDnD } from './context';
+export { createDraggable } from './draggable';
+export { createDroppable } from './droppable';
+export { createSortable, isFromSortable } from './sortable';
+export { DragOverlay } from './overlay';
+export type {
+  DraggableId,
+  DroppableId,
+  DragData,
+  IPoint,
+  IDraggable,
+  IDraggableOptions,
+  IDroppable,
+  IDroppableOptions,
+  IDropInfo,
+  IDragEndResult,
+  IDnDProviderProps,
+} from './types';
+export type { ISortableOptions, ISortableItem, ISortablePayload } from './sortable';

package/src/overlay.tsx

@@ -0,0 +1,47 @@
+import { type JSX, Show } from 'solid-js';
+import { Portal } from 'solid-js/web';
+import { useDnD } from './context';
+import type { DragData } from './types';
+
+interface IDragOverlayProps {
+  /** Render-prop с текущим payload'ом перетаскиваемого элемента. */
+  children: (data: DragData) => JSX.Element;
+  /** Смещение preview относительно курсора (по умолчанию centered под pointer'ом). */
+  offset?: { x: number; y: number };
+  /**
+   * Дополнительный класс для preview-обёртки. Сама обёртка — `position: fixed`
+   * с `pointer-events: none`, чтобы курсор «прошивал» её и попадал в droppable.
+   */
+  class?: string;
+}
+
+/**
+ * Призрак перетаскиваемого элемента, рендерится в `<body>` через Portal.
+ * Не реагирует на pointer-events — иначе hit-testing не нашёл бы droppable
+ * под курсором.
+ */
+export const DragOverlay = (props: IDragOverlayProps) => {
+  const dnd = useDnD();
+  const offX = () => props.offset?.x ?? 0;
+  const offY = () => props.offset?.y ?? 0;
+
+  return (
+    <Show when={dnd.state.activeData() && dnd.state.pointer()}>
+      <Portal>
+        <div
+          class={props.class}
+          style={{
+            position: 'fixed',
+            left: `${dnd.state.pointer()?.x + offX()}px`,
+            top: `${dnd.state.pointer()?.y + offY()}px`,
+            'pointer-events': 'none',
+            'z-index': '9999',
+            transform: 'translate(-50%, -50%)',
+          }}
+        >
+          {props.children(dnd.state.activeData()!)}
+        </div>
+      </Portal>
+    </Show>
+  );
+};

package/src/sortable.ts

@@ -0,0 +1,109 @@
+import type { Accessor } from 'solid-js';
+import { createDraggable } from './draggable';
+import { createDroppable } from './droppable';
+import type { DragData, IDropInfo } from './types';
+
+export interface ISortableOptions<TExtra extends DragData = DragData> {
+  /** Уникальный id экземпляра sortable (если их несколько). */
+  id: string;
+  /** Текущий порядок item-id'ов. */
+  items: Accessor<string[]>;
+  /** Колбэк с новым порядком после успешного reorder'а. */
+  onReorder: (newOrder: string[]) => void;
+  /**
+   * Доп. поля в drag-data — пробрасываются вместе с системными `sortableId`,
+   * `itemId`. Полезно для cross-sortable accepts-логики (например, у каждого
+   * item'а есть `type`, чтобы внешний droppable знал, можно ли его принять).
+   */
+  extra?: (itemId: string) => TExtra;
+}
+
+export interface ISortableItem {
+  ref: (el: HTMLElement) => void;
+  isDragging: Accessor<boolean>;
+  isOver: Accessor<boolean>;
+}
+
+interface ISortablePayload {
+  /** Маркер sortable-источника. */
+  __sortable: string;
+  itemId: string;
+  [k: string]: unknown;
+}
+
+const isSortablePayload = (d: DragData, sortableId: string): d is ISortablePayload =>
+  (d as any).__sortable === sortableId && typeof (d as any).itemId === 'string';
+
+/**
+ * Лёгкая обёртка над `createDraggable + createDroppable` для упорядоченных
+ * списков (например, дочерние ноды в редакторе-дереве).
+ *
+ * Для каждого item получается **одновременно** и draggable, и droppable.
+ * Drop в верхнюю половину — вставка до target'а, в нижнюю — после.
+ *
+ * Sortable принимает only-свои item'ы (через `__sortable === id`). Drop из
+ * палитры/иного источника нужно ловить отдельным `createDroppable` на
+ * контейнере.
+ */
+export const createSortable = <TExtra extends DragData = DragData>(
+  options: ISortableOptions<TExtra>,
+) => {
+  return {
+    createItem: (itemId: string): ISortableItem => {
+      const drag = createDraggable<ISortablePayload>({
+        id: `sortable:${options.id}:${itemId}`,
+        data: () => ({
+          __sortable: options.id,
+          itemId,
+          ...(options.extra?.(itemId) ?? ({} as TExtra)),
+        }),
+      });
+
+      const drop = createDroppable<ISortablePayload>({
+        id: `sortable:${options.id}:${itemId}`,
+        accepts: (data) => isSortablePayload(data, options.id) && data.itemId !== itemId,
+        onDrop: (data, info: IDropInfo) => {
+          const current = options.items();
+          const fromIdx = current.indexOf(data.itemId);
+          const toIdx = current.indexOf(itemId);
+          if (fromIdx === -1 || toIdx === -1) return;
+
+          // Удаляем dragged из текущего порядка
+          const withoutDragged = current.filter((id) => id !== data.itemId);
+          // Целевой индекс после удаления — пересчитываем
+          const baseIdx = withoutDragged.indexOf(itemId);
+          // Вставка до/после в зависимости от вертикальной позиции pointer'а
+          const insertAt = info.ratio.y < 0.5 ? baseIdx : baseIdx + 1;
+
+          const next = [
+            ...withoutDragged.slice(0, insertAt),
+            data.itemId,
+            ...withoutDragged.slice(insertAt),
+          ];
+          options.onReorder(next);
+        },
+      });
+
+      const ref = (el: HTMLElement) => {
+        drag.ref(el);
+        drop.ref(el);
+      };
+
+      return {
+        ref,
+        isDragging: drag.isDragging,
+        isOver: drop.canDrop,
+      };
+    },
+  };
+};
+
+// Хелпер для intercept-логики: подписаться на текущий activeData и проверить,
+// что это item from-sortable. Удобно для зон-приёмников из других контекстов.
+export const isFromSortable = (
+  data: DragData | null,
+  sortableId: string,
+): data is ISortablePayload => !!data && isSortablePayload(data as DragData, sortableId);
+
+/** Re-export для совместного использования с другими droppable'ами. */
+export type { ISortablePayload };

package/src/types.ts

@@ -0,0 +1,86 @@
+import type { Accessor, JSX } from 'solid-js';
+
+export type DraggableId = string;
+export type DroppableId = string;
+
+/**
+ * Полезная нагрузка перетаскиваемого элемента. Произвольная — библиотека к
+ * содержимому не привязана. Потребитель сам сужает тип в `accepts` / `onDrop`.
+ */
+export type DragData = Record<string, unknown>;
+
+export interface IPoint {
+  x: number;
+  y: number;
+}
+
+export interface IDraggableEntry<T extends DragData = DragData> {
+  id: DraggableId;
+  /** Реактивный геттер — payload может меняться (e.g. имя ноды в дереве). */
+  data: Accessor<T>;
+  el: HTMLElement;
+}
+
+export interface IDroppableEntry<T extends DragData = DragData> {
+  id: DroppableId;
+  el: HTMLElement;
+  /** Предикат, разрешающий или запрещающий drop конкретного draggable'а. */
+  accepts: (data: T) => boolean;
+  onDrop?: (data: T, info: IDropInfo) => void;
+  /** Доп. данные о droppable'е (e.g. parent-id ноды в дереве) — пробрасываются в onDrop. */
+  data?: T;
+}
+
+export interface IDropInfo {
+  /** Источник drag'а. */
+  draggableId: DraggableId;
+  /** Цель drop'а. */
+  droppableId: DroppableId;
+  /** Координаты pointer'а в момент drop'а (viewport). */
+  pointer: IPoint;
+  /** Координаты pointer'а относительно droppable-элемента (0..1 нормализовано). */
+  ratio: IPoint;
+}
+
+export interface IDraggableOptions<T extends DragData = DragData> {
+  id: DraggableId;
+  /** Реактивная функция → payload. Вызывается при каждом start drag. */
+  data: Accessor<T> | T;
+  /** Отключить draggable (e.g. disabled state). */
+  disabled?: Accessor<boolean>;
+}
+
+export interface IDraggable {
+  ref: (el: HTMLElement) => void;
+  isDragging: Accessor<boolean>;
+}
+
+export interface IDroppableOptions<T extends DragData = DragData> {
+  id: DroppableId;
+  /** По умолчанию принимает всё. */
+  accepts?: (data: T) => boolean;
+  onDrop?: (data: T, info: IDropInfo) => void;
+  /** Опциональные мета-данные droppable'а. */
+  data?: T;
+  disabled?: Accessor<boolean>;
+}
+
+export interface IDroppable {
+  ref: (el: HTMLElement) => void;
+  /** Курсор сейчас над этим droppable. */
+  isOver: Accessor<boolean>;
+  /** isOver && accepts(activeData) — удобный shorthand. */
+  canDrop: Accessor<boolean>;
+}
+
+export interface IDnDProviderProps {
+  children: JSX.Element;
+  /** Скроллить window когда pointer у края viewport'а. По умолчанию off. */
+  autoScroll?: boolean;
+  onDragStart?: (data: DragData, draggableId: DraggableId) => void;
+  onDragEnd?: (result: IDragEndResult) => void;
+}
+
+export type IDragEndResult =
+  | { kind: 'drop'; data: DragData; info: IDropInfo }
+  | { kind: 'cancel'; data: DragData; draggableId: DraggableId };