@lingjingai/script-editor 0.1.20 → 0.1.22

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, memo, useState, useMemo, useCallback, Fragment, useRef, useContext, useEffect, useLayoutEffect, useDeferredValue } from 'react';
-import { Plus, Trash2, X, Check, Eraser, ArrowUp, ArrowDown, GripVertical, MessageCircle, Film, Brain, BookOpen, Scissors, ArrowUpToLine, BookText, ChevronRight, FileText, Users, MapPin, Package, Undo2, Redo2, MessageSquareQuote, ArrowLeft, ChevronLeft, Search, Loader2, AlertCircle } from 'lucide-react';
+import { Plus, Trash2, X, Check, ArrowUp, ArrowDown, GripVertical, MessageCircle, Film, Brain, BookOpen, Eraser, Scissors, ArrowUpToLine, BookText, ChevronRight, FileText, Users, MapPin, Package, Undo2, Redo2, MessageSquareQuote, ArrowLeft, ChevronLeft, Search, Loader2, AlertCircle } from 'lucide-react';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Virtuoso } from 'react-virtuoso';
 import { createPortal } from 'react-dom';
@@ -1087,33 +1087,108 @@ function updateSceneField(data, episodeIndex, sceneIndex, field, value) {
     });
   });
 }
-function updateSceneAssetRefState(data, episodeIndex, sceneIndex, field, idKey, targetId, stateId) {
+function updateSceneActorRefState(scene, actorId, stateId) {
+  const context = getSceneContext(scene);
+  let matched = false;
+  let changed = false;
+  const actors = (context.actors ?? []).map((item) => {
+    if ((item.actor_id ?? "").trim() !== actorId) return item;
+    matched = true;
+    if ((item.state_id ?? null) === stateId) return item;
+    changed = true;
+    return { ...item, state_id: stateId };
+  });
+  if (!matched) {
+    changed = true;
+    actors.push({ actor_id: actorId, state_id: stateId });
+  }
+  return changed ? setSceneContext(scene, { actors }) : scene;
+}
+function updateSceneLocationRefState(scene, locationId, stateId) {
+  const context = getSceneContext(scene);
+  let matched = false;
+  let changed = false;
+  const locations = (context.locations ?? []).map((item) => {
+    if ((item.location_id ?? "").trim() !== locationId) return item;
+    matched = true;
+    if ((item.state_id ?? null) === stateId) return item;
+    changed = true;
+    return { ...item, state_id: stateId };
+  });
+  if (!matched) {
+    changed = true;
+    locations.push({ location_id: locationId, state_id: stateId });
+  }
+  return changed ? setSceneContext(scene, { locations }) : scene;
+}
+function updateScenePropRefState(scene, propId, stateId) {
+  const context = getSceneContext(scene);
+  let matched = false;
+  let changed = false;
+  const props = (context.props ?? []).map((item) => {
+    if ((item.prop_id ?? "").trim() !== propId) return item;
+    matched = true;
+    if ((item.state_id ?? null) === stateId) return item;
+    changed = true;
+    return { ...item, state_id: stateId };
+  });
+  if (!matched) {
+    changed = true;
+    props.push({ prop_id: propId, state_id: stateId });
+  }
+  return changed ? setSceneContext(scene, { props }) : scene;
+}
+function updateSceneAssetRefState(data, episodeIndex, sceneIndex, kind, targetId, stateId) {
   const normalizedTarget = targetId.trim();
   const normalizedState = stateId?.trim() || null;
   if (!normalizedTarget) return data;
   return withSceneUpdated(data, episodeIndex, sceneIndex, (scene) => {
-    const context = getSceneContext(scene);
-    const list = context[field] || [];
-    let matched = false;
-    const next = list.map((item) => {
-      if ((item[idKey] || "").toString().trim() !== normalizedTarget) return item;
-      matched = true;
-      return { ...item, state_id: normalizedState };
-    });
-    if (!matched) {
-      next.push({ [idKey]: normalizedTarget, state_id: normalizedState });
-    }
-    return setSceneContext(scene, { [field]: next });
+    if (kind === "actor") return updateSceneActorRefState(scene, normalizedTarget, normalizedState);
+    if (kind === "location") return updateSceneLocationRefState(scene, normalizedTarget, normalizedState);
+    return updateScenePropRefState(scene, normalizedTarget, normalizedState);
   });
 }
 function updateSceneActorState(data, episodeIndex, sceneIndex, actorId, stateId) {
-  return updateSceneAssetRefState(data, episodeIndex, sceneIndex, "actors", "actor_id", actorId, stateId);
+  return updateSceneAssetRefState(data, episodeIndex, sceneIndex, "actor", actorId, stateId);
 }
 function updateSceneLocationState(data, episodeIndex, sceneIndex, locationId, stateId) {
-  return updateSceneAssetRefState(data, episodeIndex, sceneIndex, "locations", "location_id", locationId, stateId);
+  return updateSceneAssetRefState(data, episodeIndex, sceneIndex, "location", locationId, stateId);
 }
 function updateScenePropState(data, episodeIndex, sceneIndex, propId, stateId) {
-  return updateSceneAssetRefState(data, episodeIndex, sceneIndex, "props", "prop_id", propId, stateId);
+  return updateSceneAssetRefState(data, episodeIndex, sceneIndex, "prop", propId, stateId);
+}
+function updateSceneAssetStateBindings(data, kind, assetId, targets, stateId) {
+  const normalizedAssetId = assetId.trim();
+  if (!normalizedAssetId || targets.length === 0) return data;
+  const normalizedState = stateId?.trim() || null;
+  const byEpisode = /* @__PURE__ */ new Map();
+  for (const target of targets) {
+    if (target.episodeIndex < 0 || target.sceneIndex < 0) continue;
+    let scenes = byEpisode.get(target.episodeIndex);
+    if (!scenes) {
+      scenes = /* @__PURE__ */ new Set();
+      byEpisode.set(target.episodeIndex, scenes);
+    }
+    scenes.add(target.sceneIndex);
+  }
+  if (byEpisode.size === 0) return data;
+  let changed = false;
+  const episodes = (data.episodes ?? []).map((episode, episodeIndex) => {
+    const sceneIndexes = byEpisode.get(episodeIndex);
+    if (!sceneIndexes) return episode;
+    let episodeChanged = false;
+    const scenes = episode.scenes?.map((scene, sceneIndex) => {
+      if (!sceneIndexes.has(sceneIndex)) return scene;
+      const nextScene = kind === "actor" ? updateSceneActorRefState(scene, normalizedAssetId, normalizedState) : kind === "location" ? updateSceneLocationRefState(scene, normalizedAssetId, normalizedState) : updateScenePropRefState(scene, normalizedAssetId, normalizedState);
+      if (nextScene !== scene) {
+        episodeChanged = true;
+        changed = true;
+      }
+      return nextScene;
+    });
+    return scenes && episodeChanged ? { ...episode, scenes } : episode;
+  });
+  return changed ? { ...data, episodes } : data;
 }
 function updateSceneItemContent(data, episodeIndex, sceneIndex, itemIndex, content) {
   return withSceneUpdated(data, episodeIndex, sceneIndex, (scene) => {
@@ -2782,56 +2857,6 @@ function removeEntityState(data, kind, id, stateId) {
     states: (e.states ?? []).filter((s) => (s.state_id ?? "").trim() !== stateId)
   }));
 }
-var CONFIRM_TTL_MS = 2500;
-function DeleteConfirmButton({
-  onConfirm,
-  disabled,
-  targetScope,
-  title = "\u5220\u9664\uFF1F"
-}) {
-  const [confirming, setConfirming] = useState(false);
-  const timerRef = useRef(null);
-  useEffect(
-    () => () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    },
-    []
-  );
-  const cancel = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    setConfirming(false);
-  };
-  const handleClick = () => {
-    if (confirming) {
-      cancel();
-      void onConfirm();
-      return;
-    }
-    setConfirming(true);
-    if (timerRef.current) clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(() => {
-      setConfirming(false);
-      timerRef.current = null;
-    }, CONFIRM_TTL_MS);
-  };
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      disabled,
-      "data-delete-target": targetScope,
-      "data-confirming": confirming || void 0,
-      onClick: handleClick,
-      "aria-label": confirming ? `\u518D\u70B9\u4E00\u6B21\u786E\u8BA4\uFF1A${title}` : title,
-      title: confirming ? "\u518D\u70B9\u4E00\u6B21\u786E\u8BA4\uFF082.5 \u79D2\u540E\u81EA\u52A8\u53D6\u6D88\uFF09" : title,
-      className: cn("lj-se-del", confirming && "is-confirming"),
-      children: confirming ? /* @__PURE__ */ jsx(Check, { className: "lj-se-icon", strokeWidth: 2.2 }) : /* @__PURE__ */ jsx(Eraser, { className: "lj-se-icon", strokeWidth: 1.5 })
-    }
-  );
-}
 var SPACE_ZH = { interior: "\u5185", exterior: "\u5916" };
 var TIME_ZH = { day: "\u65E5", night: "\u591C", dawn: "\u6668", dusk: "\u66AE" };
 function resolveCueId(item, actorMap, speakerMap) {
@@ -2943,6 +2968,7 @@ function PreviewLine({
   ] });
 }
 var UNASSIGNED = "__unassigned__";
+var DRAG_THRESHOLD = 4;
 var CUE_COUNT = 8;
 var COL = 32;
 var MIN_EP_WIDTH = 48;
@@ -2952,9 +2978,20 @@ function AssetStateTimeline({
   assetKind,
   refs,
   states: states2,
+  disabled = false,
+  onBind,
   onJump
 }) {
   const [hover, setHover] = useState(null);
+  const [selectedKeys, setSelectedKeys] = useState(() => /* @__PURE__ */ new Set());
+  const [draggingKeys, setDraggingKeys] = useState(() => /* @__PURE__ */ new Set());
+  const [dropLaneId, setDropLaneId] = useState(null);
+  const [box, setBox] = useState(null);
+  const [dragGhost, setDragGhost] = useState(null);
+  const rootRef = useRef(null);
+  const dragRef = useRef(null);
+  const boxRef = useRef(null);
+  const suppressClickRef = useRef(false);
   const closeTimer = useRef(null);
   const cancelClose = () => {
     if (closeTimer.current) {
@@ -2966,6 +3003,7 @@ function AssetStateTimeline({
     cancelClose();
     closeTimer.current = setTimeout(() => setHover(null), 140);
   };
+  useEffect(() => () => cancelClose(), []);
   const cols = [];
   for (const group of refs) for (const item of group.items) cols.push(item);
   const n = cols.length;
@@ -2976,10 +3014,11 @@ function AssetStateTimeline({
     const sid = (c.stateId ?? "").trim();
     return !sid || !definedIds.includes(sid);
   };
-  if (cols.some(isUnassigned)) {
+  if (cols.some(isUnassigned) || !disabled && lanes.length > 0) {
     lanes.push({ id: UNASSIGNED, name: lanes.length > 0 ? "\u672A\u6807\u6CE8" : "\u51FA\u73B0", cueIndex: 0 });
   }
   const colMetas = [];
+  const itemByKey = /* @__PURE__ */ new Map();
   const epHeads = [];
   let x = 0;
   for (const group of refs) {
@@ -2988,82 +3027,251 @@ function AssetStateTimeline({
     epHeads.push({ episodeIndex: group.episodeIndex, episodeNumber: group.episodeNumber, width: count * w });
     for (const item of group.items) {
       colMetas.push({ item, left: x, width: w });
+      itemByKey.set(item.key, item);
       x += w;
     }
   }
   const trackWidth = x;
+  useEffect(() => {
+    setSelectedKeys((prev) => {
+      const next = new Set(Array.from(prev).filter((key) => itemByKey.has(key)));
+      return next.size === prev.size ? prev : next;
+    });
+  }, [refs]);
   const center = (m) => m.left + m.width / 2;
   const cueVar = (cueIndex) => cueIndex === 0 ? "var(--lj-se-muted-fg)" : `var(--lj-se-actor-cue-${cueIndex})`;
   const laneMetas = (laneId) => colMetas.filter((m) => laneId === UNASSIGNED ? isUnassigned(m.item) : (m.item.stateId ?? "").trim() === laneId);
-  return /* @__PURE__ */ jsxs("div", { className: "lj-se-sttl", children: [
-    /* @__PURE__ */ jsxs("div", { className: "lj-se-sttl-axis", children: [
-      /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-axis-lab", children: "\u72B6\u6001 \uFF3C \u573A" }),
-      /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-axis-eps", style: { width: trackWidth }, children: epHeads.map((g) => /* @__PURE__ */ jsxs("span", { className: "lj-se-sttl-ep", style: { width: g.width }, title: `\u7B2C ${g.episodeNumber} \u96C6`, children: [
-        "\u7B2C",
-        String(g.episodeNumber).padStart(2, "0"),
-        "\u96C6"
-      ] }, g.episodeIndex)) })
-    ] }),
-    lanes.map((lane) => {
-      const mine = laneMetas(lane.id);
-      return /* @__PURE__ */ jsxs("div", { className: "lj-se-sttl-lane", children: [
-        /* @__PURE__ */ jsxs("span", { className: "lj-se-sttl-lane-head", title: lane.name, children: [
-          /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-dot", style: { background: cueVar(lane.cueIndex) } }),
-          /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-lane-name", children: lane.name }),
-          /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-lane-count", children: mine.length })
+  const laneIds = new Set(lanes.map((lane) => lane.id));
+  const stateIdForLane = (laneId) => laneId === UNASSIGNED ? null : laneId;
+  const targetsForKeys = (keys) => Array.from(keys).map((key) => itemByKey.get(key)).filter((item) => !!item).map((item) => ({ episodeIndex: item.episodeIndex, sceneIndex: item.sceneIndex }));
+  const findLaneIdAt = (clientX, clientY) => {
+    const lane = document.elementFromPoint(clientX, clientY)?.closest(".lj-se-sttl-lane");
+    const laneId = lane?.dataset.sttlLaneId;
+    return laneId && laneIds.has(laneId) ? laneId : null;
+  };
+  const selectKeysInBox = (nextBox) => {
+    const left = Math.min(nextBox.startX, nextBox.currentX);
+    const right = Math.max(nextBox.startX, nextBox.currentX);
+    const top = Math.min(nextBox.startY, nextBox.currentY);
+    const bottom = Math.max(nextBox.startY, nextBox.currentY);
+    const next = /* @__PURE__ */ new Set();
+    rootRef.current?.querySelectorAll("[data-sttl-node-key]").forEach((node) => {
+      const r = node.getBoundingClientRect();
+      const x2 = r.left + r.width / 2;
+      const y = r.top + r.height / 2;
+      if (x2 >= left && x2 <= right && y >= top && y <= bottom) {
+        const key = node.dataset.sttlNodeKey;
+        if (key) next.add(key);
+      }
+    });
+    setSelectedKeys(next);
+  };
+  const boxStyle = () => {
+    if (!box || !rootRef.current) return void 0;
+    const r = rootRef.current.getBoundingClientRect();
+    return {
+      left: Math.min(box.startX, box.currentX) - r.left + rootRef.current.scrollLeft,
+      top: Math.min(box.startY, box.currentY) - r.top + rootRef.current.scrollTop,
+      width: Math.abs(box.currentX - box.startX),
+      height: Math.abs(box.currentY - box.startY)
+    };
+  };
+  const clearPointerState = (pointerId) => {
+    if (rootRef.current?.hasPointerCapture(pointerId)) rootRef.current.releasePointerCapture(pointerId);
+    dragRef.current = null;
+    boxRef.current = null;
+    setDraggingKeys(/* @__PURE__ */ new Set());
+    setDropLaneId(null);
+    setBox(null);
+    setDragGhost(null);
+  };
+  const handleNodePointerDown = (e, key) => {
+    if (disabled || e.button !== 0) return;
+    e.stopPropagation();
+    cancelClose();
+    setHover(null);
+    const keys = selectedKeys.has(key) ? new Set(selectedKeys) : /* @__PURE__ */ new Set([key]);
+    setSelectedKeys(keys);
+    dragRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      keys,
+      dragging: false
+    };
+    rootRef.current?.setPointerCapture(e.pointerId);
+  };
+  const dragLabel = (keys) => {
+    if (keys.size !== 1) return `${keys.size} \u573A`;
+    const item = itemByKey.get(Array.from(keys)[0]);
+    return item ? String(item.sceneNumber) : "1 \u573A";
+  };
+  const handleTrackPointerDown = (e) => {
+    if (disabled || e.button !== 0 || e.target instanceof HTMLElement && e.target.closest("[data-sttl-node-key]")) return;
+    const next = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      currentX: e.clientX,
+      currentY: e.clientY,
+      moved: false
+    };
+    setSelectedKeys(/* @__PURE__ */ new Set());
+    boxRef.current = next;
+    setBox(next);
+    rootRef.current?.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    const drag = dragRef.current;
+    if (drag?.pointerId === e.pointerId) {
+      const moved2 = Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) >= DRAG_THRESHOLD;
+      if (!drag.dragging && moved2) {
+        drag.dragging = true;
+        setDraggingKeys(new Set(drag.keys));
+      }
+      if (drag.dragging) {
+        e.preventDefault();
+        setDragGhost({ x: e.clientX, y: e.clientY, label: dragLabel(drag.keys) });
+        setDropLaneId(findLaneIdAt(e.clientX, e.clientY));
+      }
+      return;
+    }
+    const nextBox = boxRef.current;
+    if (nextBox?.pointerId !== e.pointerId) return;
+    const moved = nextBox.moved || Math.hypot(e.clientX - nextBox.startX, e.clientY - nextBox.startY) >= DRAG_THRESHOLD;
+    const updated = { ...nextBox, currentX: e.clientX, currentY: e.clientY, moved };
+    boxRef.current = updated;
+    setBox(updated);
+    if (updated.moved) selectKeysInBox(updated);
+  };
+  const handlePointerUp = (e) => {
+    const drag = dragRef.current;
+    if (drag?.pointerId === e.pointerId) {
+      if (drag.dragging) {
+        const laneId = dropLaneId ?? findLaneIdAt(e.clientX, e.clientY);
+        if (laneId) {
+          const targets = targetsForKeys(drag.keys);
+          if (targets.length > 0) onBind(targets, stateIdForLane(laneId));
+        }
+        suppressClickRef.current = true;
+        window.setTimeout(() => {
+          suppressClickRef.current = false;
+        }, 0);
+        e.preventDefault();
+      }
+      clearPointerState(e.pointerId);
+      return;
+    }
+    const nextBox = boxRef.current;
+    if (nextBox?.pointerId !== e.pointerId) return;
+    if (nextBox.moved) selectKeysInBox(nextBox);
+    else setSelectedKeys(/* @__PURE__ */ new Set());
+    clearPointerState(e.pointerId);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("lj-se-sttl", !disabled && "is-editable", draggingKeys.size > 0 && "is-dragging"),
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: (e) => clearPointerState(e.pointerId),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "lj-se-sttl-axis", children: [
+          /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-axis-lab", children: "\u72B6\u6001 \uFF3C \u573A" }),
+          /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-axis-eps", style: { width: trackWidth }, children: epHeads.map((g) => /* @__PURE__ */ jsxs("span", { className: "lj-se-sttl-ep", style: { width: g.width }, title: `\u7B2C ${g.episodeNumber} \u96C6`, children: [
+            "\u7B2C",
+            String(g.episodeNumber).padStart(2, "0"),
+            "\u96C6"
+          ] }, g.episodeIndex)) })
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "lj-se-sttl-track", style: { width: trackWidth, "--cue": cueVar(lane.cueIndex) }, children: [
-          colMetas.map((m, i) => /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-col", style: { left: m.left } }, `col-${i}`)),
-          mine.map((m, k) => {
-            const next = mine[k + 1];
-            if (!next) return null;
-            return /* @__PURE__ */ jsx(
+        lanes.map((lane) => {
+          const mine = laneMetas(lane.id);
+          return /* @__PURE__ */ jsxs("div", { className: cn("lj-se-sttl-lane", dropLaneId === lane.id && "is-drop"), "data-sttl-lane-id": lane.id, children: [
+            /* @__PURE__ */ jsxs("span", { className: "lj-se-sttl-lane-head", title: lane.name, children: [
+              /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-dot", style: { background: cueVar(lane.cueIndex) } }),
+              /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-lane-name", children: lane.name }),
+              /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-lane-count", children: mine.length })
+            ] }),
+            /* @__PURE__ */ jsxs(
               "span",
               {
-                className: "lj-se-sttl-flow",
-                style: { left: center(m), width: center(next) - center(m) }
-              },
-              `flow-${m.item.key}`
-            );
-          }),
-          mine.map((m) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "lj-se-sttl-node",
-              style: { left: center(m) },
-              title: m.item.label,
-              onClick: () => onJump(m.item.episodeIndex, m.item.sceneIndex),
-              onMouseEnter: (e) => {
-                cancelClose();
-                const r = e.currentTarget.getBoundingClientRect();
-                setHover({
-                  episodeIndex: m.item.episodeIndex,
-                  sceneIndex: m.item.sceneIndex,
-                  rect: { top: r.top, bottom: r.bottom, left: r.left, width: r.width },
-                  host: e.currentTarget.closest(".lj-se-root")
-                });
-              },
-              onMouseLeave: scheduleClose,
-              children: m.item.sceneNumber
-            },
-            m.item.key
-          ))
-        ] })
-      ] }, lane.id);
-    }),
-    hover ? /* @__PURE__ */ jsx(
-      ScenePreviewCard,
-      {
-        data,
-        anchor: hover,
-        highlightId: assetId,
-        highlightKind: assetKind,
-        onEnter: cancelClose,
-        onLeave: scheduleClose
-      }
-    ) : null
-  ] });
+                className: "lj-se-sttl-track",
+                style: { width: trackWidth, "--cue": cueVar(lane.cueIndex) },
+                onPointerDown: handleTrackPointerDown,
+                children: [
+                  colMetas.map((m, i) => /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-col", style: { left: m.left } }, `col-${i}`)),
+                  mine.map((m, k) => {
+                    const next = mine[k + 1];
+                    if (!next) return null;
+                    return /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "lj-se-sttl-flow",
+                        style: { left: center(m), width: center(next) - center(m) }
+                      },
+                      `flow-${m.item.key}`
+                    );
+                  }),
+                  mine.map((m) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: cn(
+                        "lj-se-sttl-node",
+                        selectedKeys.has(m.item.key) && "is-selected",
+                        draggingKeys.has(m.item.key) && "is-dragging"
+                      ),
+                      "data-sttl-node-key": m.item.key,
+                      "aria-pressed": selectedKeys.has(m.item.key),
+                      style: { left: center(m) },
+                      title: m.item.label,
+                      onPointerDown: (e) => handleNodePointerDown(e, m.item.key),
+                      onClick: (e) => {
+                        if (suppressClickRef.current) {
+                          suppressClickRef.current = false;
+                          e.preventDefault();
+                          return;
+                        }
+                        onJump(m.item.episodeIndex, m.item.sceneIndex);
+                      },
+                      onMouseEnter: (e) => {
+                        if (dragRef.current?.dragging) return;
+                        cancelClose();
+                        const r = e.currentTarget.getBoundingClientRect();
+                        setHover({
+                          episodeIndex: m.item.episodeIndex,
+                          sceneIndex: m.item.sceneIndex,
+                          rect: { top: r.top, bottom: r.bottom, left: r.left, width: r.width },
+                          host: e.currentTarget.closest(".lj-se-root")
+                        });
+                      },
+                      onMouseLeave: scheduleClose,
+                      children: m.item.sceneNumber
+                    },
+                    m.item.key
+                  ))
+                ]
+              }
+            )
+          ] }, lane.id);
+        }),
+        box ? /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-select-box", style: boxStyle() }) : null,
+        dragGhost ? /* @__PURE__ */ jsx("span", { className: "lj-se-sttl-drag-ghost", style: { left: dragGhost.x, top: dragGhost.y }, children: dragGhost.label }) : null,
+        hover ? /* @__PURE__ */ jsx(
+          ScenePreviewCard,
+          {
+            data,
+            anchor: hover,
+            highlightId: assetId,
+            highlightKind: assetKind,
+            onEnter: cancelClose,
+            onLeave: scheduleClose
+          }
+        ) : null
+      ]
+    }
+  );
 }
 var META = {
   actors: { kind: "actor" },
@@ -3073,6 +3281,38 @@ var META = {
 function newStateId(id) {
   return `st_${id}_${Date.now().toString(36)}`;
 }
+function StateDeleteButton({ stateName, onConfirm }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-assetcard-state-del", title: "\u5220\u9664\u8BE5\u72B6\u6001", "aria-label": "\u5220\u9664\u8BE5\u72B6\u6001", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx(X, { className: "lj-se-ic-3", strokeWidth: 1.8 }) }),
+    open ? /* @__PURE__ */ jsx("div", { className: "lj-se-modal-backdrop", role: "presentation", onMouseDown: () => setOpen(false), children: /* @__PURE__ */ jsxs("div", { className: "lj-se-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "lj-se-delete-state-title", onMouseDown: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs("div", { className: "lj-se-modal-head", children: [
+        /* @__PURE__ */ jsx("h2", { id: "lj-se-delete-state-title", className: "lj-se-modal-title", children: "\u5220\u9664\u72B6\u6001" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-modal-x", "aria-label": "\u5173\u95ED", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx(X, { className: "lj-se-ic-3", strokeWidth: 1.8 }) })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "lj-se-modal-body", children: [
+        "\u786E\u8BA4\u5220\u9664\u300C",
+        stateName || "\u672A\u547D\u540D\u72B6\u6001",
+        "\u300D\uFF1F"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "lj-se-modal-actions", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-modal-btn", onClick: () => setOpen(false), children: "\u53D6\u6D88" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "lj-se-modal-btn lj-se-modal-btn-danger",
+            onClick: () => {
+              setOpen(false);
+              onConfirm();
+            },
+            children: "\u5220\u9664"
+          }
+        )
+      ] })
+    ] }) }) : null
+  ] });
+}
 function AssetCardImpl({
   data,
   group,
@@ -3179,7 +3419,13 @@ function AssetCardImpl({
                 onSave: (v) => onEdit((p) => updateEntityStateField(p, kind, assetId, sid, "state_name", v))
               }
             ),
-            !disabled && (state.state_id ?? "").trim() ? /* @__PURE__ */ jsx(DeleteConfirmButton, { targetScope: "row", title: "\u5220\u9664\u8BE5\u72B6\u6001\uFF1F", onConfirm: () => onEdit((p) => removeEntityState(p, kind, assetId, sid)) }) : null
+            !disabled && (state.state_id ?? "").trim() ? /* @__PURE__ */ jsx(
+              StateDeleteButton,
+              {
+                stateName: state.state_name ?? state.name ?? "",
+                onConfirm: () => onEdit((p) => removeEntityState(p, kind, assetId, sid))
+              }
+            ) : null
           ] }),
           /* @__PURE__ */ jsx(
             EditableText,
@@ -3206,6 +3452,8 @@ function AssetCardImpl({
           assetKind: kind,
           refs,
           states: states2,
+          disabled,
+          onBind: (targets, stateId) => onEdit((p) => updateSceneAssetStateBindings(p, kind, assetId, targets, stateId)),
           onJump: (episodeIdx, sceneIdx) => onSelect({ kind: "scene", episodeIdx, sceneIdx, from: fromRef, origin: "sidebar" })
         }
       )
@@ -4534,6 +4782,7 @@ __export(mutations_exports, {
   updateEntityName: () => updateEntityName,
   updateEntityStateField: () => updateEntityStateField,
   updateSceneActorState: () => updateSceneActorState,
+  updateSceneAssetStateBindings: () => updateSceneAssetStateBindings,
   updateSceneField: () => updateSceneField,
   updateSceneItemActor: () => updateSceneItemActor,
   updateSceneItemContent: () => updateSceneItemContent,
@@ -4542,6 +4791,56 @@ __export(mutations_exports, {
   updateSceneLocationState: () => updateSceneLocationState,
   updateScenePropState: () => updateScenePropState
 });
+var CONFIRM_TTL_MS = 2500;
+function DeleteConfirmButton({
+  onConfirm,
+  disabled,
+  targetScope,
+  title = "\u5220\u9664\uFF1F"
+}) {
+  const [confirming, setConfirming] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const cancel = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setConfirming(false);
+  };
+  const handleClick = () => {
+    if (confirming) {
+      cancel();
+      void onConfirm();
+      return;
+    }
+    setConfirming(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setConfirming(false);
+      timerRef.current = null;
+    }, CONFIRM_TTL_MS);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      disabled,
+      "data-delete-target": targetScope,
+      "data-confirming": confirming || void 0,
+      onClick: handleClick,
+      "aria-label": confirming ? `\u518D\u70B9\u4E00\u6B21\u786E\u8BA4\uFF1A${title}` : title,
+      title: confirming ? "\u518D\u70B9\u4E00\u6B21\u786E\u8BA4\uFF082.5 \u79D2\u540E\u81EA\u52A8\u53D6\u6D88\uFF09" : title,
+      className: cn("lj-se-del", confirming && "is-confirming"),
+      children: confirming ? /* @__PURE__ */ jsx(Check, { className: "lj-se-icon", strokeWidth: 2.2 }) : /* @__PURE__ */ jsx(Eraser, { className: "lj-se-icon", strokeWidth: 1.5 })
+    }
+  );
+}
 
 export { DeleteConfirmButton, EMPTY_SELECTION, EditableText, Popover, ScriptContentType, ScriptEditor, SelectField, acceptActionIntoBaseline, acceptSceneIntoBaseline, applyActionAccept, applyActionReject, buildActionDiff, buildDiffFromBaseline, buildScriptNav, buildSelectionFrom, changeSetToDiffScenes, computeChangeSet, computeSceneActionDiff, findBaselineScene, fromToSelection, getActorCueVar, getActorMap, getEpisodeTitle, getLocationMap, getPropMap, getSceneContext, getSelectionEpisodeIdx, getSpeakerMap, isClipSelected, isEpisodeOpen, isSameSelectionTarget, isSceneSelected, mutations_exports as mutations, rejectActionToBaseline, rejectSceneToBaseline, sceneChangeKey, selectionFromScriptReference, selectionTargetKey, withOrigin };
 //# sourceMappingURL=index.js.map