@lingjingai/script-editor 0.1.16 → 0.1.18

package/INTEGRATION.md

@@ -64,6 +64,7 @@ function Host({ script, setScript }) {
 - `selection` / `onSelectionChange`(`StudioSelection`,不传则内部自管)
 - `format` / `onFormatChange`(`"standard" | "asian"`)
 - `disabled`、`dark`、`className`
+- `toc?: "sidebar" | "none"`:内置左侧目录。默认 `"sidebar"` 渲染自带 256px 目录列;`"none"` = **无目录模式**——只渲染顶栏 + 画布(占满宽度),宿主自建导航。见 §10。`0.1.18+`
 
 **HUD(顶栏)**
 - `onTitleChange?(next: string)`：顶栏左侧常驻**剧本标题**(取 `value.title`)。传了它,标题变**点击即改**;不传则只读展示(`value.title` 为空时不显示)。包**不碰存储**——拿到新标题宿主自己持久化(可 `onEdit(p => ({...p, title}))` 写回 `script.json`,或另调重命名接口)。`0.1.16+`
@@ -127,3 +128,61 @@ function Host({ script, setScript }) {
 - `apps/web/src/features/script-editor/useScriptDocument.ts` —— 自动保存 + undo/redo + 8s 轮询探测
 - `apps/web/src/features/script-editor/script-output-api.ts` —— 后端存取
 - `apps/web/src/main.tsx` / `apps/web/vite.config.ts` —— CSS 引入 + `development` 解析条件
+
+---
+
+## 10. 无目录模式 / 自建导航(`toc="none"`)`0.1.18+`
+
+把内置左侧目录关掉、导航**透出**给宿主自己渲染(嵌进已有全局导航、或做成面包屑下拉 / ⌘K 命令面板 / 移动端 sheet 等完全不同的形态)。包只给**纯数据模型**,不给 UI。
+
+```tsx
+import {
+  ScriptEditor,
+  buildScriptNav,
+  selectionTargetKey,
+  withOrigin,
+  type StudioSelection,
+} from "@lingjingai/script-editor";
+
+function Host({ script, onEdit }) {
+  // 无目录模式下 selection 必须受控(宿主自己的导航要驱动它)
+  const [sel, setSel] = useState<StudioSelection>({ kind: "empty" });
+  const nav = buildScriptNav(script);          // 派生导航树(纯函数)
+  const active = selectionTargetKey(sel);       // 当前激活节点的 key
+
+  return (
+    <>
+      {/* 宿主自建的任意导航 UI —— 这里是最朴素的列表 */}
+      <MyNav>
+        {nav.episodes.flatMap((e) => e.scenes).map((s) => (
+          <button
+            key={s.key}
+            data-active={s.key === active}
+            onClick={() => setSel(withOrigin(s.selection, "sidebar"))}
+          >
+            {s.label} · {s.meta}
+          </button>
+        ))}
+      </MyNav>
+
+      <ScriptEditor
+        value={script}
+        onEdit={onEdit}
+        toc="none"                 {/* ← 关掉内置目录,画布占满 */}
+        selection={sel}
+        onSelectionChange={setSel} {/* ← 编辑器内滚动 spy 也会回吐 selection */}
+      />
+    </>
+  );
+}
+```
+
+`buildScriptNav(value): ScriptNav` 返回:
+- `worldview` / `episodes[]` / `actors[]` / `locations[]` / `props[]`,`episodes[].scenes[]` 内嵌。
+- 每个节点都带 **`key`**(= `selectionTargetKey(node.selection)`,拿去和 `selectionTargetKey(当前selection)` 比对即判激活)和 **`selection`**(即用型 `StudioSelection`,**不带 origin**;点击时 `withOrigin(node.selection, "sidebar")` 再喂 `onSelectionChange`)。
+- 标签字段(`label`/`title`/`meta`/`name`)与内置目录**同 helper 派生**,长相一致。
+
+要点:
+- selection 同时也是**回吐**通道:编辑器画布滚动时会上抛 `onSelectionChange`(origin `"scroll"`),宿主导航据此高亮当前位置。
+- 无目录模式下内置「新增一集」按钮消失——宿主可自行调 `mutations.addEpisode`(已从包导出:`mutations.addEpisode(prev)`)接到自己的按钮上。
+- 形态对照交互演示:`toc-modes-demo.html`(本包根目录,不随包发布)「形态 B」tab,演示用同一个 `buildScriptNav` 模型同时驱动面包屑下拉 + ⌘K 两种 UI。

package/dist/index.d.ts

@@ -488,6 +488,12 @@ interface ScriptEditorProps extends ScriptEditorAdapters {
     disabled?: boolean;
     className?: string;
     dark?: boolean;
+    /** built-in left directory. Default "sidebar" renders the bundled 256px TOC
+     *  column; "none" → directory-less mode: the editor renders top bar + canvas
+     *  only (full width) and the host drives navigation via controlled
+     *  selection/onSelectionChange + the exported buildScriptNav(value) model.
+     *  0.1.18+ */
+    toc?: "sidebar" | "none";
     /** when provided, the script title (value.title) becomes click-to-edit in the
      *  top bar; the host persists the new value (the editor never touches storage,
      *  matching the value + onEdit contract — just one more delegated hook). Omit →
@@ -512,7 +518,65 @@ interface ScriptEditorProps extends ScriptEditorAdapters {
      *  scroll position across editor unmount/remount (tab switch / project nav). */
     scrollScopeKey?: string;
 }
-declare function ScriptEditor({ value, onEdit, selection: controlledSelection, onSelectionChange, format: controlledFormat, onFormatChange, disabled, className, dark, onTitleChange, topBarActions, saveStatus, canUndo, canRedo, onUndo, onRedo, onEditingChange, referenceFocusRequest, scrollScopeKey, diff, asset, onAddChatReferences, onRequestAssetDelete, }: ScriptEditorProps): react.JSX.Element;
+declare function ScriptEditor({ value, onEdit, selection: controlledSelection, onSelectionChange, format: controlledFormat, onFormatChange, disabled, className, dark, toc, onTitleChange, topBarActions, saveStatus, canUndo, canRedo, onUndo, onRedo, onEditingChange, referenceFocusRequest, scrollScopeKey, diff, asset, onAddChatReferences, onRequestAssetDelete, }: ScriptEditorProps): react.JSX.Element;
+
+/**
+ * Headless navigation model — surfaces the script's TOC tree (the same
+ * episodes/scenes/entity structure `StudioToc` renders) as plain data so a host
+ * in directory-less mode (`<ScriptEditor toc="none" />`) can build its OWN
+ * navigation UI: breadcrumb dropdown, ⌘K command palette, mobile sheet, etc.
+ *
+ * Each node carries:
+ *   - `key`       — `selectionTargetKey` of its selection; compare against
+ *                   `selectionTargetKey(currentSelection)` to mark the active node.
+ *   - `selection` — a ready-to-use `StudioSelection` (no origin). On click do
+ *                   `onSelectionChange(withOrigin(node.selection, "sidebar"))`.
+ *
+ * Labels reuse the exact same helpers as `StudioToc`, so a custom nav stays
+ * label-identical to the built-in one. Pure function, zero side effects.
+ */
+
+interface ScriptNavScene {
+    key: string;
+    episodeIdx: number;
+    sceneIdx: number;
+    sceneId: string;
+    /** e.g. "场 7" */
+    label: string;
+    /** e.g. "scn_007 · 夜内" */
+    meta: string;
+    selection: StudioSelection;
+}
+interface ScriptNavEpisode {
+    key: string;
+    episodeIdx: number;
+    /** zero-padded episode number, e.g. "01" */
+    label: string;
+    /** human title (falls back to "第 NN 集") */
+    title: string;
+    sceneCount: number;
+    scenes: ScriptNavScene[];
+    selection: StudioSelection;
+}
+interface ScriptNavEntity {
+    key: string;
+    id: string;
+    name: string;
+    selection: StudioSelection;
+}
+interface ScriptNav {
+    worldview: {
+        key: string;
+        label: string;
+        selection: StudioSelection;
+    };
+    episodes: ScriptNavEpisode[];
+    actors: ScriptNavEntity[];
+    locations: ScriptNavEntity[];
+    props: ScriptNavEntity[];
+}
+/** Derive the navigation tree from a ScriptProject (see file header). */
+declare function buildScriptNav(value: ScriptProject): ScriptNav;
 
 /**
  * Pure ScriptProject mutations.
@@ -739,4 +803,4 @@ declare function DeleteConfirmButton({ onConfirm, disabled, targetScope, title,
     description?: string;
 }): react.JSX.Element;
 
-export { type AssetAdapter, type AssetDeleteRequest, type AssetState, type ChangeSet, type ChatReference, DeleteConfirmButton, type DiffActionMark, type DiffAdapter, type DiffSceneMark, EMPTY_SELECTION, EditableText, type EpisodeWorkspaceView, type FieldChange, Popover, type SaveStatus, type Scene, type SceneActionDiff, type SceneChangeKind, type SceneContext, type SceneEnvironment, type ScriptActor, ScriptContentType, type ScriptData, ScriptEditor, type ScriptEditorAdapters, type ScriptEditorProps, type ScriptEpisode, type ScriptFormat, type ScriptItem, type ScriptLocation, type ScriptProject, type ScriptProp, type ScriptReferenceFocusRequest, type ScriptReferenceLocator, type ScriptSpeaker, type ScriptTargetKind, SelectField, type StateChange, type StudioSelection, type StudioSelectionFrom, type StudioSelectionOrigin, type TransitionPrompt, acceptActionIntoBaseline, acceptSceneIntoBaseline, applyActionAccept, applyActionReject, buildActionDiff, buildDiffFromBaseline, buildSelectionFrom, changeSetToDiffScenes, computeChangeSet, computeSceneActionDiff, findBaselineScene, fromToSelection, getActorCueVar, getActorMap, getEpisodeTitle, getLocationMap, getPropMap, getSceneContext, getSelectionEpisodeIdx, getSpeakerMap, isClipSelected, isEpisodeOpen, isSameSelectionTarget, isSceneSelected, index as mutations, rejectActionToBaseline, rejectSceneToBaseline, sceneChangeKey, selectionFromScriptReference, selectionTargetKey, withOrigin };
+export { type AssetAdapter, type AssetDeleteRequest, type AssetState, type ChangeSet, type ChatReference, DeleteConfirmButton, type DiffActionMark, type DiffAdapter, type DiffSceneMark, EMPTY_SELECTION, EditableText, type EpisodeWorkspaceView, type FieldChange, Popover, type SaveStatus, type Scene, type SceneActionDiff, type SceneChangeKind, type SceneContext, type SceneEnvironment, type ScriptActor, ScriptContentType, type ScriptData, ScriptEditor, type ScriptEditorAdapters, type ScriptEditorProps, type ScriptEpisode, type ScriptFormat, type ScriptItem, type ScriptLocation, type ScriptNav, type ScriptNavEntity, type ScriptNavEpisode, type ScriptNavScene, type ScriptProject, type ScriptProp, type ScriptReferenceFocusRequest, type ScriptReferenceLocator, type ScriptSpeaker, type ScriptTargetKind, SelectField, type StateChange, type StudioSelection, type StudioSelectionFrom, type StudioSelectionOrigin, type TransitionPrompt, 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, index as mutations, rejectActionToBaseline, rejectSceneToBaseline, sceneChangeKey, selectionFromScriptReference, selectionTargetKey, withOrigin };

package/dist/index.js

@@ -1360,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
         });
       }
     });
@@ -1378,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
         });
       }
     });
@@ -2893,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" },
@@ -3051,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
   ] }) });
 }
@@ -3773,6 +3989,7 @@ function ScriptEditor({
   disabled = false,
   className,
   dark,
+  toc = "sidebar",
   onTitleChange,
   topBarActions,
   saveStatus = "idle",
@@ -3936,7 +4153,7 @@ function ScriptEditor({
     }
   );
   return /* @__PURE__ */ jsx(EditingSignalContext.Provider, { value: editingSignal, children: /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
-    /* @__PURE__ */ jsx(
+    toc === "sidebar" ? /* @__PURE__ */ jsx(
       StudioToc,
       {
         data: value,
@@ -3944,7 +4161,7 @@ function ScriptEditor({
         onSelect: setSelection,
         onAddEpisode: disabled ? void 0 : () => onEdit((p) => addEpisode(p))
       }
-    ),
+    ) : null,
     /* @__PURE__ */ jsxs("div", { className: "lj-se-main", children: [
       /* @__PURE__ */ jsx(
         CanvasTopBar,
@@ -4042,6 +4259,54 @@ function resolveReturnTarget(value, selection) {
   return { label, selection: withOrigin(fromToSelection(from), "reference") };
 }
 
+// src/toc/nav-model.ts
+function nav(selection) {
+  return { key: selectionTargetKey(selection), selection };
+}
+function buildScriptNav(value) {
+  const episodes = (value.episodes ?? []).map((episode, episodeIdx) => {
+    const scenes = (episode.scenes ?? []).map((scene, sceneIdx) => {
+      const selection2 = { kind: "scene", episodeIdx, sceneIdx };
+      return {
+        ...nav(selection2),
+        episodeIdx,
+        sceneIdx,
+        sceneId: scene.scene_id ?? "",
+        label: getSceneNumberLabel(scene, sceneIdx),
+        meta: getSceneSidebarLabel(scene, sceneIdx)
+      };
+    });
+    const selection = { kind: "episode", episodeIdx };
+    return {
+      ...nav(selection),
+      episodeIdx,
+      label: getEpisodeNumberLabel(episode, episodeIdx),
+      title: getEpisodeTitle(episode, episodeIdx),
+      sceneCount: scenes.length,
+      scenes
+    };
+  });
+  const actors = (value.actors ?? []).map((a) => {
+    const id = (a.actor_id ?? "").trim();
+    return { ...nav({ kind: "actor", actorId: id }), id, name: getActorDisplayName(a) };
+  }).filter((e) => e.id);
+  const locations = (value.locations ?? []).map((l) => {
+    const id = (l.location_id ?? "").trim();
+    return { ...nav({ kind: "location", locationId: id }), id, name: getLocationDisplayName(l) };
+  }).filter((e) => e.id);
+  const props = (value.props ?? []).map((p) => {
+    const id = (p.prop_id ?? "").trim();
+    return { ...nav({ kind: "prop", propId: id }), id, name: getPropDisplayName(p) };
+  }).filter((e) => e.id);
+  return {
+    worldview: { ...nav({ kind: "worldview" }), label: "\u4E16\u754C\u89C2 & \u98CE\u683C" },
+    episodes,
+    actors,
+    locations,
+    props
+  };
+}
+
 // src/mutations/index.ts
 var mutations_exports = {};
 __export(mutations_exports, {
@@ -4083,6 +4348,6 @@ __export(mutations_exports, {
   updateScenePropState: () => updateScenePropState
 });
 
-export { DeleteConfirmButton, EMPTY_SELECTION, EditableText, Popover, ScriptContentType, ScriptEditor, SelectField, acceptActionIntoBaseline, acceptSceneIntoBaseline, applyActionAccept, applyActionReject, buildActionDiff, buildDiffFromBaseline, 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 };
+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
 //# sourceMappingURL=index.js.map