@weasel-js/labkit 1.2.0 → 1.3.0-pre.0

package/dist/{chunk-SFL7NFKN.js → chunk-V7PRSIRQ.js}

@@ -1,7 +1,7 @@
+import { DragHandleGlyph } from './chunk-PQJ5B2U2.js';
 import { useState, useRef } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/layers/LayerList.tsx
 function LayerList({ layers, visibility, onReorder, onToggle, className }) {
   const reorderable = layers.filter((l) => !l.alwaysOn);
   const pinned = layers.filter((l) => l.alwaysOn);
@@ -12,14 +12,22 @@ function LayerList({ layers, visibility, onReorder, onToggle, className }) {
   }
   const startDrag = (e, index) => {
     e.currentTarget.setPointerCapture(e.pointerId);
-    dragRef.current = { pointerId: e.pointerId, fromIndex: index, startY: e.clientY };
+    const row = e.currentTarget.closest(".lk-layer-list__row");
+    const list = row?.parentElement;
+    const gap = list ? Number.parseFloat(getComputedStyle(list).rowGap) || 0 : 0;
+    const pitch = row ? row.getBoundingClientRect().height + gap : 0;
+    dragRef.current = {
+      pointerId: e.pointerId,
+      fromIndex: index,
+      startY: e.clientY,
+      pitch: pitch > 0 ? pitch : 1
+    };
     setDragIndex(index);
   };
   const moveDrag = (e) => {
     const drag = dragRef.current;
     if (!drag || drag.pointerId !== e.pointerId) return;
-    const rowHeight = 28;
-    const delta = Math.round((e.clientY - drag.startY) / rowHeight);
+    const delta = Math.round((e.clientY - drag.startY) / drag.pitch);
     const target = Math.min(reorderable.length - 1, Math.max(0, drag.fromIndex + delta));
     setDragIndex(target);
   };
@@ -55,7 +63,7 @@ function LayerList({ layers, visibility, onReorder, onToggle, className }) {
                 onPointerDown: (e) => startDrag(e, i),
                 onPointerMove: moveDrag,
                 onPointerUp: endDrag,
-                children: "\u22EE\u22EE"
+                children: /* @__PURE__ */ jsx(DragHandleGlyph, { size: 13 })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -82,5 +90,5 @@ function LayerList({ layers, visibility, onReorder, onToggle, className }) {
 }
 
 export { LayerList };
-//# sourceMappingURL=chunk-SFL7NFKN.js.map
-//# sourceMappingURL=chunk-SFL7NFKN.js.map
+//# sourceMappingURL=chunk-V7PRSIRQ.js.map
+//# sourceMappingURL=chunk-V7PRSIRQ.js.map

package/dist/chunk-V7PRSIRQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layers/LayerList.tsx"],"names":[],"mappings":"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","file":"chunk-V7PRSIRQ.js","sourcesContent":["import { type PointerEvent, useRef, useState } from 'react';\nimport type { LayerDescriptor } from '../instrument/types';\nimport { DragHandleGlyph } from '../primitives/DragHandleGlyph';\n\n/** Props for `<LayerList>`. */\nexport interface LayerListProps {\n  layers: LayerDescriptor[];\n  visibility: Record<string, boolean>;\n  onReorder: (newOrder: LayerDescriptor[]) => void;\n  onToggle: (id: string, visible: boolean) => void;\n  className?: string;\n}\n\ninterface DragState {\n  pointerId: number;\n  fromIndex: number;\n  startY: number;\n  /** Row height plus row gap, measured when the drag starts. */\n  pitch: number;\n}\n\n/** A reorderable list of layers with per-layer visibility toggles. Layers\n *  marked `alwaysOn` are pinned and cannot be reordered or hidden. */\nexport function LayerList({ layers, visibility, onReorder, onToggle, className }: LayerListProps) {\n  const reorderable = layers.filter((l) => !l.alwaysOn);\n  const pinned = layers.filter((l) => l.alwaysOn);\n  const [dragIndex, setDragIndex] = useState<number | null>(null);\n  const dragRef = useRef<DragState | null>(null);\n\n  if (layers.length === 0) {\n    return (\n      <div className={className ? `lk-layer-list ${className}` : 'lk-layer-list'}>\n        <div className=\"lk-layer-list__empty\">No layers</div>\n      </div>\n    );\n  }\n\n  const startDrag = (e: PointerEvent<HTMLElement>, index: number) => {\n    e.currentTarget.setPointerCapture(e.pointerId);\n    // Measured at grab time rather than hardcoded: a restyle that changes row\n    // height or gap would otherwise silently skew every drag distance.\n    const row = e.currentTarget.closest('.lk-layer-list__row');\n    const list = row?.parentElement;\n    const gap = list ? Number.parseFloat(getComputedStyle(list).rowGap) || 0 : 0;\n    const pitch = row ? row.getBoundingClientRect().height + gap : 0;\n    dragRef.current = {\n      pointerId: e.pointerId,\n      fromIndex: index,\n      startY: e.clientY,\n      pitch: pitch > 0 ? pitch : 1,\n    };\n    setDragIndex(index);\n  };\n\n  const moveDrag = (e: PointerEvent<HTMLElement>) => {\n    const drag = dragRef.current;\n    if (!drag || drag.pointerId !== e.pointerId) return;\n    const delta = Math.round((e.clientY - drag.startY) / drag.pitch);\n    const target = Math.min(reorderable.length - 1, Math.max(0, drag.fromIndex + delta));\n    setDragIndex(target);\n  };\n\n  const endDrag = (e: PointerEvent<HTMLElement>) => {\n    const drag = dragRef.current;\n    if (!drag || drag.pointerId !== e.pointerId) return;\n    if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n      e.currentTarget.releasePointerCapture(e.pointerId);\n    }\n    if (dragIndex !== null && dragIndex !== drag.fromIndex) {\n      const next = [...reorderable];\n      const [moved] = next.splice(drag.fromIndex, 1);\n      if (moved) next.splice(dragIndex, 0, moved);\n      onReorder([...next, ...pinned]);\n    }\n    dragRef.current = null;\n    setDragIndex(null);\n  };\n\n  return (\n    <div className={className ? `lk-layer-list ${className}` : 'lk-layer-list'}>\n      {reorderable.map((layer, i) => {\n        const isDragging = dragIndex === i;\n        return (\n          <div\n            key={layer.id}\n            className={\n              isDragging ? 'lk-layer-list__row lk-layer-list__row--dragging' : 'lk-layer-list__row'\n            }\n          >\n            <button\n              type=\"button\"\n              className=\"lk-layer-list__handle\"\n              aria-label={`Reorder ${layer.label}`}\n              onPointerDown={(e) => startDrag(e, i)}\n              onPointerMove={moveDrag}\n              onPointerUp={endDrag}\n            >\n              <DragHandleGlyph size={13} />\n            </button>\n            <input\n              className=\"lk-layer-list__check\"\n              type=\"checkbox\"\n              checked={visibility[layer.id] !== false}\n              onChange={(e) => onToggle(layer.id, e.target.checked)}\n              aria-label={`Toggle ${layer.label}`}\n            />\n            <span className=\"lk-layer-list__label\">{layer.label}</span>\n          </div>\n        );\n      })}\n      {pinned.map((layer) => (\n        <div key={layer.id} className=\"lk-layer-list__row lk-layer-list__row--pinned\">\n          <span className=\"lk-layer-list__lock\" role=\"img\" aria-label=\"Always on\">\n            🔒\n          </span>\n          <span className=\"lk-layer-list__label\">{layer.label}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n"]}