@lingjingai/script-editor 0.1.15 → 0.1.17

package/dist/index.js

@@ -608,6 +608,169 @@ function EntityGroup({
     )) : null
   ] });
 }
+var EditingSignalContext = createContext(null);
+var LIVE_COMMIT_MS = 400;
+function caretOffsetFromPoint(x, y) {
+  const d = document;
+  if (typeof d.caretRangeFromPoint === "function") {
+    const r = d.caretRangeFromPoint(x, y);
+    return r ? r.startOffset : null;
+  }
+  if (typeof d.caretPositionFromPoint === "function") {
+    const p = d.caretPositionFromPoint(x, y);
+    return p ? p.offset : null;
+  }
+  return null;
+}
+function EditableText({
+  value,
+  onSave,
+  placeholder,
+  multiline = false,
+  disabled = false,
+  className,
+  autoEdit = false,
+  onEditEnd,
+  spanProps
+}) {
+  const [editing, setEditing] = useState(autoEdit);
+  const [draft, setDraft] = useState(value);
+  const caretRef = useRef(null);
+  const inputRef = useRef(null);
+  const committedRef = useRef(value);
+  const editingSignal = useContext(EditingSignalContext);
+  const liveTimerRef = useRef(null);
+  const composingRef = useRef(false);
+  const draftRef = useRef(value);
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+  const clearLiveTimer = () => {
+    if (liveTimerRef.current) {
+      clearTimeout(liveTimerRef.current);
+      liveTimerRef.current = null;
+    }
+  };
+  const flushLive = () => {
+    clearLiveTimer();
+    const next = draftRef.current;
+    if (next !== committedRef.current) {
+      committedRef.current = next;
+      onSaveRef.current(next);
+    }
+  };
+  const scheduleLive = () => {
+    clearLiveTimer();
+    liveTimerRef.current = setTimeout(() => {
+      liveTimerRef.current = null;
+      if (composingRef.current) return;
+      flushLive();
+    }, LIVE_COMMIT_MS);
+  };
+  useEffect(() => () => flushLive(), []);
+  useEffect(() => {
+    if (!editing || !editingSignal) return;
+    editingSignal.inc();
+    return () => editingSignal.dec();
+  }, [editing, editingSignal]);
+  useEffect(() => {
+    if (value === committedRef.current) return;
+    const userDiverged = editing && draft !== committedRef.current;
+    if (userDiverged) return;
+    setDraft(value);
+    committedRef.current = value;
+  }, [value, editing, draft]);
+  useEffect(() => {
+    if (autoEdit) setEditing(true);
+  }, [autoEdit]);
+  useLayoutEffect(() => {
+    if (!editing) return;
+    const el = inputRef.current;
+    if (!el) return;
+    if (multiline) autoSize(el);
+    el.focus();
+    const caret = caretRef.current;
+    const pos = caret == null ? el.value.length : Math.min(caret, el.value.length);
+    try {
+      el.setSelectionRange(pos, pos);
+    } catch {
+    }
+    caretRef.current = null;
+  }, [editing, multiline]);
+  function beginEdit(e) {
+    if (disabled) return;
+    const sel = window.getSelection();
+    if (sel && !sel.isCollapsed) return;
+    caretRef.current = caretOffsetFromPoint(e.clientX, e.clientY);
+    setDraft(committedRef.current);
+    draftRef.current = committedRef.current;
+    setEditing(true);
+  }
+  function commit() {
+    clearLiveTimer();
+    setEditing(false);
+    onEditEnd?.();
+    if (draft !== committedRef.current) {
+      committedRef.current = draft;
+      onSave(draft);
+    }
+  }
+  function cancel() {
+    clearLiveTimer();
+    setDraft(committedRef.current);
+    draftRef.current = committedRef.current;
+    setEditing(false);
+    onEditEnd?.();
+  }
+  if (!editing) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...spanProps,
+        className: "lj-se-editable" + (className ? " " + className : "") + (disabled ? " lj-se-editable--ro" : ""),
+        onClick: beginEdit,
+        children: value || /* @__PURE__ */ jsx("span", { className: "lj-se-ph", children: placeholder ?? "" })
+      }
+    );
+  }
+  const common = {
+    ref: inputRef,
+    value: draft,
+    className: "lj-se-editing" + (className ? " " + className : ""),
+    onChange: (e) => {
+      const v = e.target.value;
+      setDraft(v);
+      draftRef.current = v;
+      if (multiline) autoSize(e.target);
+      if (!composingRef.current) scheduleLive();
+    },
+    onCompositionStart: () => {
+      composingRef.current = true;
+      clearLiveTimer();
+    },
+    onCompositionEnd: (e) => {
+      composingRef.current = false;
+      draftRef.current = e.currentTarget.value;
+      scheduleLive();
+    },
+    onBlur: commit,
+    onKeyDown: (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      } else if (e.key === "Enter") {
+        if (!multiline || e.metaKey || e.ctrlKey) {
+          e.preventDefault();
+          commit();
+        }
+      }
+    }
+  };
+  return multiline ? /* @__PURE__ */ jsx("textarea", { ...common, rows: 1 }) : /* @__PURE__ */ jsx("input", { ...common, type: "text" });
+}
+function autoSize(el) {
+  el.style.height = "auto";
+  el.style.height = el.scrollHeight + "px";
+}
 function FormatToggle({
   value,
   onChange
@@ -628,22 +791,43 @@ function FormatToggle({
   )) });
 }
 function CanvasTopBar({
+  title,
+  onTitleChange,
+  titleDisabled,
   contextLabel,
   format,
   onFormatChange,
   canUndo,
   canRedo,
   onUndo,
-  onRedo
+  onRedo,
+  actions
 }) {
+  const hasTitle = onTitleChange != null || (title ?? "").length > 0;
   return /* @__PURE__ */ jsxs("header", { className: "lj-se-topbar", children: [
-    /* @__PURE__ */ jsx("div", { className: "lj-se-topbar-left", children: contextLabel }),
+    /* @__PURE__ */ jsxs("div", { className: "lj-se-topbar-left", children: [
+      hasTitle ? onTitleChange ? /* @__PURE__ */ jsx(
+        EditableText,
+        {
+          className: "lj-se-topbar-title",
+          value: title ?? "",
+          placeholder: "\u672A\u547D\u540D\u5267\u672C",
+          disabled: titleDisabled,
+          onSave: onTitleChange
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "lj-se-topbar-title lj-se-topbar-title--ro", children: title }) : null,
+      contextLabel ? /* @__PURE__ */ jsxs("span", { className: "lj-se-topbar-ctx", children: [
+        hasTitle ? /* @__PURE__ */ jsx("span", { className: "lj-se-topbar-sep", "aria-hidden": true, children: "/" }) : null,
+        contextLabel
+      ] }) : null
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "lj-se-topbar-right", children: [
       /* @__PURE__ */ jsx(FormatToggle, { value: format, onChange: onFormatChange }),
       onUndo || onRedo ? /* @__PURE__ */ jsxs("div", { className: "lj-se-topbar-undo", children: [
         /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-rowbtn", disabled: !canUndo, title: "\u64A4\u9500", onClick: onUndo, children: /* @__PURE__ */ jsx(Undo2, { className: "lj-se-ic-4", strokeWidth: 1.75 }) }),
         /* @__PURE__ */ jsx("button", { type: "button", className: "lj-se-rowbtn", disabled: !canRedo, title: "\u91CD\u505A", onClick: onRedo, children: /* @__PURE__ */ jsx(Redo2, { className: "lj-se-ic-4", strokeWidth: 1.75 }) })
-      ] }) : null
+      ] }) : null,
+      actions ? /* @__PURE__ */ jsx("div", { className: "lj-se-topbar-actions", children: actions }) : null
     ] })
   ] });
 }
@@ -1176,11 +1360,12 @@ function buildLocationDistribution(data, locationId) {
     (episode.scenes ?? []).forEach((scene, si) => {
       const inIds = (scene.location_ids ?? []).some((i) => (i ?? "").trim() === locationId);
       const ctx = getSceneContext(scene);
-      const inCtx = (ctx.locations ?? []).some((i) => (i.location_id ?? "").trim() === locationId);
-      if (inIds || inCtx) {
+      const ctxRef = (ctx.locations ?? []).find((i) => (i.location_id ?? "").trim() === locationId);
+      if (inIds || ctxRef) {
         items.push({
           key: `location-${locationId}-${ei}-${si}`,
-          ...refFields(episode, ei, scene, si)
+          ...refFields(episode, ei, scene, si),
+          stateId: ctxRef?.state_id
         });
       }
     });
@@ -1194,13 +1379,15 @@ function buildPropDistribution(data, propId, propName) {
   (data.episodes ?? []).forEach((episode, ei) => {
     (episode.scenes ?? []).forEach((scene, si) => {
       const ctx = getSceneContext(scene);
-      const byRef = (ctx.props ?? []).some((i) => (i.prop_id ?? "").trim() === id);
+      const ctxRef = (ctx.props ?? []).find((i) => (i.prop_id ?? "").trim() === id);
+      const byRef = !!ctxRef;
       const byId = !byRef && id ? (scene.actions ?? []).some((i) => (i.content ?? "").includes(id)) : false;
       const byName = !byRef && !byId && needle ? (scene.actions ?? []).some((i) => (i.content ?? "").toLowerCase().includes(needle)) : false;
       if (byRef || byId || byName) {
         items.push({
           key: `prop-${id || needle}-${ei}-${si}`,
-          ...refFields(episode, ei, scene, si)
+          ...refFields(episode, ei, scene, si),
+          stateId: ctxRef?.state_id
         });
       }
     });
@@ -2014,169 +2201,6 @@ function getActorCueVar(actorId, tone = "dialogue") {
   const idx = hashActorId(id) % PALETTE_SIZE + 1;
   return `var(--lj-se-actor-cue-${idx})`;
 }
-var EditingSignalContext = createContext(null);
-var LIVE_COMMIT_MS = 400;
-function caretOffsetFromPoint(x, y) {
-  const d = document;
-  if (typeof d.caretRangeFromPoint === "function") {
-    const r = d.caretRangeFromPoint(x, y);
-    return r ? r.startOffset : null;
-  }
-  if (typeof d.caretPositionFromPoint === "function") {
-    const p = d.caretPositionFromPoint(x, y);
-    return p ? p.offset : null;
-  }
-  return null;
-}
-function EditableText({
-  value,
-  onSave,
-  placeholder,
-  multiline = false,
-  disabled = false,
-  className,
-  autoEdit = false,
-  onEditEnd,
-  spanProps
-}) {
-  const [editing, setEditing] = useState(autoEdit);
-  const [draft, setDraft] = useState(value);
-  const caretRef = useRef(null);
-  const inputRef = useRef(null);
-  const committedRef = useRef(value);
-  const editingSignal = useContext(EditingSignalContext);
-  const liveTimerRef = useRef(null);
-  const composingRef = useRef(false);
-  const draftRef = useRef(value);
-  const onSaveRef = useRef(onSave);
-  onSaveRef.current = onSave;
-  const clearLiveTimer = () => {
-    if (liveTimerRef.current) {
-      clearTimeout(liveTimerRef.current);
-      liveTimerRef.current = null;
-    }
-  };
-  const flushLive = () => {
-    clearLiveTimer();
-    const next = draftRef.current;
-    if (next !== committedRef.current) {
-      committedRef.current = next;
-      onSaveRef.current(next);
-    }
-  };
-  const scheduleLive = () => {
-    clearLiveTimer();
-    liveTimerRef.current = setTimeout(() => {
-      liveTimerRef.current = null;
-      if (composingRef.current) return;
-      flushLive();
-    }, LIVE_COMMIT_MS);
-  };
-  useEffect(() => () => flushLive(), []);
-  useEffect(() => {
-    if (!editing || !editingSignal) return;
-    editingSignal.inc();
-    return () => editingSignal.dec();
-  }, [editing, editingSignal]);
-  useEffect(() => {
-    if (value === committedRef.current) return;
-    const userDiverged = editing && draft !== committedRef.current;
-    if (userDiverged) return;
-    setDraft(value);
-    committedRef.current = value;
-  }, [value, editing, draft]);
-  useEffect(() => {
-    if (autoEdit) setEditing(true);
-  }, [autoEdit]);
-  useLayoutEffect(() => {
-    if (!editing) return;
-    const el = inputRef.current;
-    if (!el) return;
-    if (multiline) autoSize(el);
-    el.focus();
-    const caret = caretRef.current;
-    const pos = caret == null ? el.value.length : Math.min(caret, el.value.length);
-    try {
-      el.setSelectionRange(pos, pos);
-    } catch {
-    }
-    caretRef.current = null;
-  }, [editing, multiline]);
-  function beginEdit(e) {
-    if (disabled) return;
-    const sel = window.getSelection();
-    if (sel && !sel.isCollapsed) return;
-    caretRef.current = caretOffsetFromPoint(e.clientX, e.clientY);
-    setDraft(committedRef.current);
-    draftRef.current = committedRef.current;
-    setEditing(true);
-  }
-  function commit() {
-    clearLiveTimer();
-    setEditing(false);
-    onEditEnd?.();
-    if (draft !== committedRef.current) {
-      committedRef.current = draft;
-      onSave(draft);
-    }
-  }
-  function cancel() {
-    clearLiveTimer();
-    setDraft(committedRef.current);
-    draftRef.current = committedRef.current;
-    setEditing(false);
-    onEditEnd?.();
-  }
-  if (!editing) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ...spanProps,
-        className: "lj-se-editable" + (className ? " " + className : "") + (disabled ? " lj-se-editable--ro" : ""),
-        onClick: beginEdit,
-        children: value || /* @__PURE__ */ jsx("span", { className: "lj-se-ph", children: placeholder ?? "" })
-      }
-    );
-  }
-  const common = {
-    ref: inputRef,
-    value: draft,
-    className: "lj-se-editing" + (className ? " " + className : ""),
-    onChange: (e) => {
-      const v = e.target.value;
-      setDraft(v);
-      draftRef.current = v;
-      if (multiline) autoSize(e.target);
-      if (!composingRef.current) scheduleLive();
-    },
-    onCompositionStart: () => {
-      composingRef.current = true;
-      clearLiveTimer();
-    },
-    onCompositionEnd: (e) => {
-      composingRef.current = false;
-      draftRef.current = e.currentTarget.value;
-      scheduleLive();
-    },
-    onBlur: commit,
-    onKeyDown: (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        cancel();
-      } else if (e.key === "Enter") {
-        if (!multiline || e.metaKey || e.ctrlKey) {
-          e.preventDefault();
-          commit();
-        }
-      }
-    }
-  };
-  return multiline ? /* @__PURE__ */ jsx("textarea", { ...common, rows: 1 }) : /* @__PURE__ */ jsx("input", { ...common, type: "text" });
-}
-function autoSize(el) {
-  el.style.height = "auto";
-  el.style.height = el.scrollHeight + "px";
-}
 function formatStateChangeLabels(item, actorMap, locationMap, propMap) {
   const labels = (item.state_changes ?? []).map((change) => {
     const kind = change.target_kind?.trim() || "actor";
@@ -2872,33 +2896,238 @@ function DeleteConfirmButton({
     }
   );
 }
-function AssetReferenceGrid({
+var SPACE_ZH = { interior: "\u5185", exterior: "\u5916" };
+var TIME_ZH = { day: "\u65E5", night: "\u591C", dawn: "\u6668", dusk: "\u66AE" };
+function resolveCueId(item, actorMap, speakerMap) {
+  const actorId = item.actor_id?.trim();
+  if (actorId) return actorId;
+  const spkId = item.speaker_id?.trim() || item.speakers?.[0]?.speaker_id?.trim() || "";
+  if (!spkId) return "";
+  const spk = speakerMap.get(spkId);
+  const kind = spk?.source_kind?.trim();
+  if ((kind === "actor" || kind === "prop") && spk?.source_id?.trim()) return spk.source_id.trim();
+  if (spkId.startsWith("spk_") && actorMap.has(spkId.slice(4))) return spkId.slice(4);
+  return "";
+}
+function ScenePreviewCard({
+  data,
+  anchor,
+  highlightId,
+  highlightKind,
+  onEnter,
+  onLeave
+}) {
+  const actorMap = useMemo(() => getActorMap(data.actors), [data.actors]);
+  const locationMap = useMemo(() => getLocationMap(data.locations), [data.locations]);
+  const speakerMap = useMemo(() => getSpeakerMap(data.speakers), [data.speakers]);
+  const episode = data.episodes?.[anchor.episodeIndex];
+  const scene = episode?.scenes?.[anchor.sceneIndex];
+  if (!scene) return null;
+  const locId = getPrimarySceneLocationId(scene);
+  const locName = (locId ? getLocationDisplayName(locationMap.get(locId)) : "") || "\u672A\u6307\u5B9A\u5730\u70B9";
+  const env = scene.environment ?? {};
+  const slug = `${SPACE_ZH[env.space ?? "interior"] ?? env.space ?? ""}\xB7${TIME_ZH[env.time ?? "day"] ?? env.time ?? ""}`;
+  const actions = scene.actions ?? [];
+  const W = 360;
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1280;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 800;
+  const left = Math.min(Math.max(8, anchor.rect.left + anchor.rect.width / 2 - W / 2), vw - W - 8);
+  const above = anchor.rect.top > vh * 0.55;
+  const pos = above ? { left, bottom: vh - anchor.rect.top + 8, maxHeight: anchor.rect.top - 16 } : { left, top: anchor.rect.bottom + 8, maxHeight: vh - anchor.rect.bottom - 16 };
+  const card = /* @__PURE__ */ jsxs("div", { className: "lj-se-spv", style: { width: W, ...pos }, onMouseEnter: onEnter, onMouseLeave: onLeave, children: [
+    /* @__PURE__ */ jsxs("div", { className: "lj-se-spv-head", children: [
+      /* @__PURE__ */ jsxs("span", { className: "lj-se-spv-num", children: [
+        getEpisodeNumberLabel(episode, anchor.episodeIndex),
+        " \xB7 ",
+        getSceneNumberLabel(scene, anchor.sceneIndex)
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "lj-se-spv-slug", children: [
+        locName,
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "lj-se-spv-slug-env", children: slug })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "lj-se-spv-body", children: actions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "lj-se-spv-empty", children: "\uFF08\u672C\u573A\u6682\u65E0\u5185\u5BB9\uFF09" }) : actions.map((item, i) => /* @__PURE__ */ jsx(
+      PreviewLine,
+      {
+        item,
+        actorMap,
+        speakerMap,
+        highlightId,
+        highlightKind
+      },
+      i
+    )) })
+  ] });
+  return createPortal(card, anchor.host ?? document.body);
+}
+function PreviewLine({
+  item,
+  actorMap,
+  speakerMap,
+  highlightId,
+  highlightKind
+}) {
+  const type = item.type ?? "dialogue" /* Dialogue */;
+  const content = item.content?.trim() ?? "";
+  if (type === "action" /* Action */) {
+    return /* @__PURE__ */ jsxs("p", { className: "lj-se-spv-action", children: [
+      /* @__PURE__ */ jsx("span", { className: "lj-se-spv-mark", children: "\u25B3" }),
+      content || "\u2026"
+    ] });
+  }
+  if (type === "narration" /* Narration */) {
+    return /* @__PURE__ */ jsx("p", { className: "lj-se-spv-narr", children: content || "\u2026" });
+  }
+  const isInner = type === "inner_thought" /* InnerThought */;
+  const tone = isInner ? "inner" : "dialogue";
+  const cueId = resolveCueId(item, actorMap, speakerMap);
+  const speaker = getDialogueSpeakerLabel(item, actorMap, speakerMap) || "\u672A\u77E5\u89D2\u8272";
+  const emotion = translateEmotionLabel(item.emotion);
+  const delivery = getDialogueDeliveryLabel(item.delivery);
+  const tag = isInner ? emotion ? `OS\xB7${emotion}` : "OS" : emotion;
+  const mine = !!highlightId && (highlightKind === "actor" || highlightKind === "prop") && cueId === highlightId;
+  const mineStyle = mine ? { "--mine": getActorCueVar(cueId, tone) } : void 0;
+  return /* @__PURE__ */ jsxs("p", { className: cn("lj-se-spv-cue", isInner && "is-inner", mine && "is-mine"), style: mineStyle, children: [
+    /* @__PURE__ */ jsxs("strong", { className: "lj-se-spv-speaker", style: { color: getActorCueVar(cueId, tone) }, children: [
+      speaker,
+      delivery ? /* @__PURE__ */ jsxs("span", { className: "lj-se-spv-delivery", children: [
+        "\uFF08",
+        delivery,
+        "\uFF09"
+      ] }) : null
+    ] }),
+    tag ? /* @__PURE__ */ jsxs("span", { className: "lj-se-spv-tag", children: [
+      "\uFF08",
+      tag,
+      "\uFF09"
+    ] }) : null,
+    /* @__PURE__ */ jsx("span", { className: "lj-se-spv-colon", children: "\uFF1A" }),
+    content || "\u2026"
+  ] });
+}
+var UNASSIGNED = "__unassigned__";
+var CUE_COUNT = 8;
+var COL = 32;
+var MIN_EP_WIDTH = 48;
+function AssetStateTimeline({
+  data,
+  assetId,
+  assetKind,
   refs,
-  highlight,
+  states: states2,
   onJump
 }) {
-  if (refs.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "lj-se-refgrid", children: refs.map(({ episodeIndex, episodeNumber, items }) => /* @__PURE__ */ jsxs("span", { className: "lj-se-refgrid-chunk", children: [
-    /* @__PURE__ */ jsxs("span", { className: "lj-se-refgrid-ep", children: [
-      "\u7B2C ",
-      String(episodeNumber).padStart(2, "0"),
-      " \u96C6"
+  const [hover, setHover] = useState(null);
+  const closeTimer = useRef(null);
+  const cancelClose = () => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
+  const scheduleClose = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setHover(null), 140);
+  };
+  const cols = [];
+  for (const group of refs) for (const item of group.items) cols.push(item);
+  const n = cols.length;
+  if (n === 0) return null;
+  const definedIds = states2.map((s) => (s.state_id ?? "").trim()).filter(Boolean);
+  const lanes = states2.map((s, i) => ({ id: (s.state_id ?? "").trim(), name: getStateDisplayName(s) || "\u672A\u547D\u540D\u72B6\u6001", cueIndex: i % CUE_COUNT + 1 })).filter((l) => l.id);
+  const isUnassigned = (c) => {
+    const sid = (c.stateId ?? "").trim();
+    return !sid || !definedIds.includes(sid);
+  };
+  if (cols.some(isUnassigned)) {
+    lanes.push({ id: UNASSIGNED, name: lanes.length > 0 ? "\u672A\u6807\u6CE8" : "\u51FA\u73B0", cueIndex: 0 });
+  }
+  const colMetas = [];
+  const epHeads = [];
+  let x = 0;
+  for (const group of refs) {
+    const count = group.items.length;
+    const w = Math.max(COL, Math.ceil(MIN_EP_WIDTH / count));
+    epHeads.push({ episodeIndex: group.episodeIndex, episodeNumber: group.episodeNumber, width: count * w });
+    for (const item of group.items) {
+      colMetas.push({ item, left: x, width: w });
+      x += w;
+    }
+  }
+  const trackWidth = x;
+  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)) })
     ] }),
-    /* @__PURE__ */ jsx("span", { className: "lj-se-refgrid-scenes", children: items.map((ref) => {
-      const isCurrent = !!highlight && highlight.episodeIdx === ref.episodeIndex && highlight.sceneIdx === ref.sceneIndex;
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: cn("lj-se-refgrid-scene", isCurrent && "is-current"),
-          title: ref.label,
-          onClick: () => onJump(ref.episodeIndex, ref.sceneIndex),
-          children: ref.sceneNumber
-        },
-        ref.key
-      );
-    }) })
-  ] }, 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 })
+        ] }),
+        /* @__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(
+              "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
+  ] });
 }
 var META = {
   actors: { kind: "actor" },
@@ -3030,12 +3259,20 @@ function AssetCardImpl({
         ] }, sid);
       }) }) : null
     ] }),
-    refs.length > 0 ? /* @__PURE__ */ jsx(
-      AssetReferenceGrid,
-      {
-        refs,
-        onJump: (episodeIdx, sceneIdx) => onSelect({ kind: "scene", episodeIdx, sceneIdx, from: fromRef, origin: "sidebar" })
-      }
+    refs.length > 0 ? (
+      // state→scene reverse-lookup timeline: which state appears in which
+      // scene, and how it flows. Stateless assets degrade to one "出现" lane.
+      /* @__PURE__ */ jsx(
+        AssetStateTimeline,
+        {
+          data,
+          assetId,
+          assetKind: kind,
+          refs,
+          states: states2,
+          onJump: (episodeIdx, sceneIdx) => onSelect({ kind: "scene", episodeIdx, sceneIdx, from: fromRef, origin: "sidebar" })
+        }
+      )
     ) : null
   ] }) });
 }
@@ -3752,6 +3989,8 @@ function ScriptEditor({
   disabled = false,
   className,
   dark,
+  onTitleChange,
+  topBarActions,
   saveStatus = "idle",
   canUndo,
   canRedo,
@@ -3926,13 +4165,17 @@ function ScriptEditor({
       /* @__PURE__ */ jsx(
         CanvasTopBar,
         {
+          title: value.title,
+          onTitleChange: disabled ? void 0 : onTitleChange,
+          titleDisabled: disabled,
           contextLabel,
           format,
           onFormatChange: setFormat,
           canUndo,
           canRedo,
           onUndo,
-          onRedo
+          onRedo,
+          actions: topBarActions
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "lj-se-canvas", ref: canvasRef, children: [
@@ -3990,7 +4233,7 @@ function buildContextLabel(value, selection) {
       ] });
     }
   }
-  return /* @__PURE__ */ jsx("span", { className: "lj-se-ctx-kicker", children: "\u5267\u672C" });
+  return null;
 }
 function Ctx({ kicker, name }) {
   return /* @__PURE__ */ jsxs("span", { className: "lj-se-ctx", children: [