@lingjingai/script-editor 0.1.21 → 0.1.22

package/dist/index.d.ts

@@ -618,9 +618,15 @@ declare function decrementSceneId(sceneId: string | undefined, fallbackEpisodeIn
 declare function createSceneFromDraft(draft: SceneDraft): Scene;
 declare function createItemFromDraft(draft: ItemDraft): ScriptItem;
 declare function updateSceneField(data: ScriptProject, episodeIndex: number, sceneIndex: number, field: "scene_id" | "space" | "time" | "location" | "actors" | "props", value: string): ScriptProject;
+type SceneAssetStateBindingKind = "actor" | "location" | "prop";
+interface SceneAssetStateBindingTarget {
+    episodeIndex: number;
+    sceneIndex: number;
+}
 declare function updateSceneActorState(data: ScriptProject, episodeIndex: number, sceneIndex: number, actorId: string, stateId: string | null): ScriptProject;
 declare function updateSceneLocationState(data: ScriptProject, episodeIndex: number, sceneIndex: number, locationId: string, stateId: string | null): ScriptProject;
 declare function updateScenePropState(data: ScriptProject, episodeIndex: number, sceneIndex: number, propId: string, stateId: string | null): ScriptProject;
+declare function updateSceneAssetStateBindings(data: ScriptProject, kind: SceneAssetStateBindingKind, assetId: string, targets: SceneAssetStateBindingTarget[], stateId: string | null): ScriptProject;
 declare function updateSceneItemContent(data: ScriptProject, episodeIndex: number, sceneIndex: number, itemIndex: number, content: string): ScriptProject;
 declare function updateSceneItemActor(data: ScriptProject, episodeIndex: number, sceneIndex: number, itemIndex: number, actorId: string): ScriptProject;
 declare function updateSceneItemEmotion(data: ScriptProject, episodeIndex: number, sceneIndex: number, itemIndex: number, emotion: string): ScriptProject;
@@ -705,6 +711,8 @@ declare function removeEntityState(data: ScriptProject, kind: EntityKind, id: st
 type index_EntityKind = EntityKind;
 type index_ItemDraft = ItemDraft;
 type index_ItemLocation = ItemLocation;
+type index_SceneAssetStateBindingKind = SceneAssetStateBindingKind;
+type index_SceneAssetStateBindingTarget = SceneAssetStateBindingTarget;
 type index_SceneDraft = SceneDraft;
 declare const index_addBlankScene: typeof addBlankScene;
 declare const index_addEntityState: typeof addEntityState;
@@ -735,6 +743,7 @@ declare const index_updateEntityDescription: typeof updateEntityDescription;
 declare const index_updateEntityName: typeof updateEntityName;
 declare const index_updateEntityStateField: typeof updateEntityStateField;
 declare const index_updateSceneActorState: typeof updateSceneActorState;
+declare const index_updateSceneAssetStateBindings: typeof updateSceneAssetStateBindings;
 declare const index_updateSceneField: typeof updateSceneField;
 declare const index_updateSceneItemActor: typeof updateSceneItemActor;
 declare const index_updateSceneItemContent: typeof updateSceneItemContent;
@@ -743,7 +752,7 @@ declare const index_updateSceneItemType: typeof updateSceneItemType;
 declare const index_updateSceneLocationState: typeof updateSceneLocationState;
 declare const index_updateScenePropState: typeof updateScenePropState;
 declare namespace index {
-  export { type index_EntityKind as EntityKind, type index_ItemDraft as ItemDraft, type index_ItemLocation as ItemLocation, type index_SceneDraft as SceneDraft, index_addBlankScene as addBlankScene, index_addEntityState as addEntityState, index_addEpisode as addEpisode, index_buildNewScriptItem as buildNewScriptItem, index_buildSceneDraft as buildSceneDraft, index_createItemFromDraft as createItemFromDraft, index_createSceneFromDraft as createSceneFromDraft, index_decrementSceneId as decrementSceneId, index_deleteEpisode as deleteEpisode, index_deleteScene as deleteScene, index_deleteSceneItem as deleteSceneItem, index_getPrimarySceneLocationId as getPrimarySceneLocationId, index_getSceneActorsText as getSceneActorsText, index_incrementSceneId as incrementSceneId, index_insertScene as insertScene, index_insertSceneItem as insertSceneItem, index_mergeSceneIntoPrev as mergeSceneIntoPrev, index_moveSceneItem as moveSceneItem, index_moveScriptItem as moveScriptItem, index_nextAvailableSceneId as nextAvailableSceneId, index_nextEpisodeSceneId as nextEpisodeSceneId, index_pickInheritedActorId as pickInheritedActorId, index_removeEntityState as removeEntityState, index_replaceSceneItem as replaceSceneItem, index_splitScene as splitScene, index_updateEntityDescription as updateEntityDescription, index_updateEntityName as updateEntityName, index_updateEntityStateField as updateEntityStateField, index_updateSceneActorState as updateSceneActorState, index_updateSceneField as updateSceneField, index_updateSceneItemActor as updateSceneItemActor, index_updateSceneItemContent as updateSceneItemContent, index_updateSceneItemEmotion as updateSceneItemEmotion, index_updateSceneItemType as updateSceneItemType, index_updateSceneLocationState as updateSceneLocationState, index_updateScenePropState as updateScenePropState };
+  export { type index_EntityKind as EntityKind, type index_ItemDraft as ItemDraft, type index_ItemLocation as ItemLocation, type index_SceneAssetStateBindingKind as SceneAssetStateBindingKind, type index_SceneAssetStateBindingTarget as SceneAssetStateBindingTarget, type index_SceneDraft as SceneDraft, index_addBlankScene as addBlankScene, index_addEntityState as addEntityState, index_addEpisode as addEpisode, index_buildNewScriptItem as buildNewScriptItem, index_buildSceneDraft as buildSceneDraft, index_createItemFromDraft as createItemFromDraft, index_createSceneFromDraft as createSceneFromDraft, index_decrementSceneId as decrementSceneId, index_deleteEpisode as deleteEpisode, index_deleteScene as deleteScene, index_deleteSceneItem as deleteSceneItem, index_getPrimarySceneLocationId as getPrimarySceneLocationId, index_getSceneActorsText as getSceneActorsText, index_incrementSceneId as incrementSceneId, index_insertScene as insertScene, index_insertSceneItem as insertSceneItem, index_mergeSceneIntoPrev as mergeSceneIntoPrev, index_moveSceneItem as moveSceneItem, index_moveScriptItem as moveScriptItem, index_nextAvailableSceneId as nextAvailableSceneId, index_nextEpisodeSceneId as nextEpisodeSceneId, index_pickInheritedActorId as pickInheritedActorId, index_removeEntityState as removeEntityState, index_replaceSceneItem as replaceSceneItem, index_splitScene as splitScene, index_updateEntityDescription as updateEntityDescription, index_updateEntityName as updateEntityName, index_updateEntityStateField as updateEntityStateField, index_updateSceneActorState as updateSceneActorState, index_updateSceneAssetStateBindings as updateSceneAssetStateBindings, index_updateSceneField as updateSceneField, index_updateSceneItemActor as updateSceneItemActor, index_updateSceneItemContent as updateSceneItemContent, index_updateSceneItemEmotion as updateSceneItemEmotion, index_updateSceneItemType as updateSceneItemType, index_updateSceneLocationState as updateSceneLocationState, index_updateScenePropState as updateScenePropState };
 }
 
 /**

package/dist/index.js

@@ -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) => {
@@ -2893,6 +2968,7 @@ function PreviewLine({
   ] });
 }
 var UNASSIGNED = "__unassigned__";
+var DRAG_THRESHOLD = 4;
 var CUE_COUNT = 8;
 var COL = 32;
 var MIN_EP_WIDTH = 48;
@@ -2902,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) {
@@ -2916,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;
@@ -2926,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) {
@@ -2938,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" },
@@ -3194,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" })
         }
       )
@@ -4522,6 +4782,7 @@ __export(mutations_exports, {
   updateEntityName: () => updateEntityName,
   updateEntityStateField: () => updateEntityStateField,
   updateSceneActorState: () => updateSceneActorState,
+  updateSceneAssetStateBindings: () => updateSceneAssetStateBindings,
   updateSceneField: () => updateSceneField,
   updateSceneItemActor: () => updateSceneItemActor,
   updateSceneItemContent: () => updateSceneItemContent,