@lingjingai/script-editor 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -37,6 +37,11 @@ interface ScriptItem {
     emotion?: string;
     state_changes?: StateChange[];
     transition_prompt?: TransitionPrompt;
+    /** v3 free-form namespace; `extend.timestamp` is the in-episode "M:SS.mmm". */
+    extend?: {
+        timestamp?: string;
+        [key: string]: unknown;
+    };
 }
 interface AssetState {
     state_id?: string;
@@ -500,7 +505,9 @@ interface ScriptEditorAdapters {
 
 interface ScriptEditorProps extends ScriptEditorAdapters {
     value: ScriptProject;
-    onEdit: (patch: (prev: ScriptProject) => ScriptProject) => void;
+    /** the (prev)=>next patch sink. Optional — omit for a pure read-only view
+     *  (pair with `disabled`); edits become no-ops. */
+    onEdit?: (patch: (prev: ScriptProject) => ScriptProject) => void;
     selection?: StudioSelection;
     onSelectionChange?: (next: StudioSelection) => void;
     format?: ScriptFormat;
@@ -537,8 +544,56 @@ interface ScriptEditorProps extends ScriptEditorAdapters {
     /** stable per-scope key (e.g. projectGroupNo) — remembers & restores the
      *  scroll position across editor unmount/remount (tab switch / project nav). */
     scrollScopeKey?: string;
+    /** render the asset-card groups (角色/场景/道具) below the script. Default true. */
+    showAssets?: boolean;
+    /** render the top bar's script title. Default true. */
+    showTitle?: boolean;
+    /** render the 标准/亚洲 format toggle button. Default true (format stays controlled). */
+    showFormatToggle?: boolean;
+    /** parchment paper surface. Default true; false → flat plain segments. */
+    paper?: boolean;
+    /** render a MM:SS gutter from each action's extend.timestamp. Default false. */
+    showTimestamp?: boolean;
+    /** host range highlights (per action), rendered on top of the row. */
+    highlights?: ScriptHighlight[];
+    /** content column width (script segments + asset cards). Number → px; string
+     *  passes through as-is (e.g. "100%" to fill, "60rem"). Default 820px. Sets
+     *  the --lj-se-content-width CSS var; hosts can also override that var in CSS. */
+    contentWidth?: number | string;
+    /** the floating bottom-center capsule (save status + AI-diff + 返回 breadcrumb).
+     *  Default true. Set false for a pure display surface with no floating chrome. */
+    showSaveCapsule?: boolean;
+}
+/** A host range highlight targeting one action (same coords as DiffActionMark). */
+interface ScriptHighlight {
+    target: {
+        episodeIdx: number;
+        sceneId: string;
+        actionIndex: number;
+    };
+    className?: string;
+    style?: React.CSSProperties;
 }
-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;
+declare function ScriptEditor({ value, onEdit: onEditProp, selection: controlledSelection, onSelectionChange, format: controlledFormat, onFormatChange, disabled, className, dark, toc, onTitleChange, topBarActions, saveStatus, canUndo, canRedo, onUndo, onRedo, onEditingChange, referenceFocusRequest, scrollScopeKey, showAssets, showTitle, showFormatToggle, paper, showTimestamp, highlights, contentWidth, showSaveCapsule, diff, asset, onAddChatReferences, onRequestAssetDelete, }: ScriptEditorProps): react.JSX.Element;
+
+/**
+ * Action timestamps live at `action.extend.timestamp` as an in-episode
+ * "M:SS.mmm" string (e.g. "00:03.333", "01:12.000"). The editor shows the
+ * "MM:SS" part prominently and the ".mmm" fraction de-emphasized.
+ *
+ * Parsing is lenient: anything that isn't a well-formed timestamp returns null
+ * so the caller simply renders no time gutter for that row (never a placeholder).
+ */
+interface ParsedTimestamp {
+    /** minutes:seconds, zero-padded — the prominent part, e.g. "01:07". */
+    mmss: string;
+    /** the fractional ".mmm" suffix incl. the dot, or "" when there is none. */
+    ms: string;
+    /** full normalized "MM:SS.mmm" (or "MM:SS" when no fraction) for title/hover. */
+    full: string;
+}
+/** Parse "M:SS.mmm" → { mmss, ms, full }, or null when malformed / empty. */
+declare function formatTimestamp(raw: unknown): ParsedTimestamp | null;
 
 /**
  * Headless navigation model — surfaces the script's TOC tree (the same
@@ -830,4 +885,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, type Importance, 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, type V3Speaker, 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 };
+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, type Importance, type ParsedTimestamp, 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 ScriptHighlight, 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, type V3Speaker, acceptActionIntoBaseline, acceptSceneIntoBaseline, applyActionAccept, applyActionReject, buildActionDiff, buildDiffFromBaseline, buildScriptNav, buildSelectionFrom, changeSetToDiffScenes, computeChangeSet, computeSceneActionDiff, findBaselineScene, formatTimestamp, 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

@@ -633,11 +633,11 @@ function EntityGroup({
   const valid = items.filter((i) => i.id);
   const featured = valid.filter((i) => i.importance !== "background").sort(byCount);
   const background = valid.filter((i) => i.importance === "background").sort(byCount);
-  const row = (i) => /* @__PURE__ */ jsxs(
+  const row = (i, bg = false) => /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      className: cn("lj-se-tocitem lj-se-toc-l1", isActive(i.id) && "is-active"),
+      className: cn("lj-se-tocitem", bg ? "lj-se-toc-bg" : "lj-se-toc-l1", isActive(i.id) && "is-active"),
       onClick: () => onPick(i.id),
       children: [
         /* @__PURE__ */ jsx(Icon, { className: "lj-se-tocitem-icon lj-se-ic-3", strokeWidth: 1.5 }),
@@ -648,9 +648,9 @@ function EntityGroup({
     i.id
   );
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(GroupHeader, { icon: Icon, label, count: valid.length, open, highlighted, onToggle: () => setOpen((v) => !v) }),
+    /* @__PURE__ */ jsx(GroupHeader, { icon: Icon, label, count: featured.length, open, highlighted, onToggle: () => setOpen((v) => !v) }),
     open ? valid.length === 0 ? /* @__PURE__ */ jsx("div", { className: "lj-se-toc-empty", children: emptyText }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      featured.map(row),
+      featured.map((i) => row(i)),
       background.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsxs("button", { type: "button", className: cn("lj-se-toc-fold", bgOpen && "is-open"), onClick: () => setBgOpen((v) => !v), children: [
           /* @__PURE__ */ jsx(ChevronRight, { className: "lj-se-toc-fold-chev lj-se-ic-3", strokeWidth: 2 }),
@@ -661,7 +661,7 @@ function EntityGroup({
             background.length
           ] })
         ] }),
-        bgOpen ? background.map(row) : null
+        bgOpen ? background.map((i) => row(i, true)) : null
       ] }) : null
     ] }) : null
   ] });
@@ -887,6 +887,7 @@ function CanvasTopBar({
   contextLabel,
   format,
   onFormatChange,
+  showFormatToggle = true,
   canUndo,
   canRedo,
   onUndo,
@@ -912,7 +913,7 @@ function CanvasTopBar({
       ] }) : null
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "lj-se-topbar-right", children: [
-      /* @__PURE__ */ jsx(FormatToggle, { value: format, onChange: onFormatChange }),
+      showFormatToggle ? /* @__PURE__ */ jsx(FormatToggle, { value: format, onChange: onFormatChange }) : null,
       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 }) })
@@ -933,7 +934,17 @@ function SaveCapsule({
   returnLabel,
   onReturn
 }) {
-  const showSave = saveStatus !== "idle";
+  const [savedExpired, setSavedExpired] = useState(false);
+  useEffect(() => {
+    if (saveStatus !== "saved") {
+      setSavedExpired(false);
+      return;
+    }
+    setSavedExpired(false);
+    const t = setTimeout(() => setSavedExpired(true), 1600);
+    return () => clearTimeout(t);
+  }, [saveStatus]);
+  const showSave = saveStatus !== "idle" && !(saveStatus === "saved" && savedExpired);
   const hasDiff = diffCount > 0;
   const hasReturn = !!(returnLabel && onReturn);
   if (!showSave && !hasDiff && !hasReturn) return null;
@@ -1861,6 +1872,21 @@ function useDragReorder() {
   return useContext(DragReorderContext);
 }
 
+// src/timestamp.ts
+var TS_RE = /^\s*(\d+):([0-5]?\d)(?:\.(\d{1,3}))?\s*$/;
+function formatTimestamp(raw) {
+  if (typeof raw !== "string") return null;
+  const m = TS_RE.exec(raw);
+  if (!m) return null;
+  const min = Number(m[1]);
+  const sec = Number(m[2]);
+  if (!Number.isFinite(min) || !Number.isFinite(sec)) return null;
+  const mmss = `${String(min).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
+  const frac = m[3] ? m[3].padEnd(3, "0") : "";
+  const ms = frac ? `.${frac}` : "";
+  return { mmss, ms, full: `${mmss}${ms}` };
+}
+
 // src/mutations/item-mutations.ts
 function withSceneUpdated2(data, episodeIndex, sceneIndex, updater) {
   const episodes = [...data.episodes || []];
@@ -2622,6 +2648,8 @@ function SceneEditorImpl({
   disabled,
   focused = false,
   actionDiff,
+  showTimestamp = false,
+  highlights,
   onEdit,
   onNavigateAsset,
   onRequestAssetDelete
@@ -2720,9 +2748,11 @@ function SceneEditorImpl({
         onNavigateAsset
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "lj-se-actions", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("lj-se-actions", showTimestamp && "has-ts"), children: [
       actions.map((item, idx) => {
         const mark = actionDiff?.byIndex.get(idx);
+        const hl = highlights?.get(idx);
+        const ts = showTimestamp ? formatTimestamp(item.extend?.timestamp) : null;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           renderGhosts(idx),
           /* @__PURE__ */ jsxs(
@@ -2732,11 +2762,15 @@ function SceneEditorImpl({
                 "lj-se-action-slot",
                 dragIndex === idx && "is-dragging",
                 dropSlot === idx && "drop-before",
-                mark && (mark.kind === "added" ? "is-diff-added" : "is-diff-modified")
+                mark && (mark.kind === "added" ? "is-diff-added" : "is-diff-modified"),
+                hl && "lj-se-hl",
+                hl?.className
               ),
+              style: hl?.style,
               onDragOver: (e) => onSlotDragOver(e, idx),
               onDrop: onSlotDrop,
               children: [
+                ts ? /* @__PURE__ */ jsx("span", { className: "lj-se-ts", title: ts.full, children: ts.mmss }) : null,
                 mark ? /* @__PURE__ */ jsx(
                   DiffActionControls,
                   {
@@ -2817,7 +2851,8 @@ function safeId(raw, fallback) {
 }
 var GROUP_LABEL = { actors: "\u89D2\u8272", locations: "\u573A\u666F", props: "\u9053\u5177" };
 var assetGroupLabel = (g) => GROUP_LABEL[g];
-function buildFlatStream(data) {
+function buildFlatStream(data, opts = {}) {
+  const includeAssets = opts.includeAssets ?? true;
   const items = [];
   const indexByKey = /* @__PURE__ */ new Map();
   const sceneIndexLookup = /* @__PURE__ */ new Map();
@@ -2865,14 +2900,16 @@ function buildFlatStream(data) {
     }
   });
   push({ key: "add-episode", kind: "add-episode" });
-  const specs = [
-    { group: "actors", ids: (data.actors ?? []).map((a, i) => safeId(a.actor_id, `__idx:${i}`)) },
-    { group: "locations", ids: (data.locations ?? []).map((l, i) => safeId(l.location_id, `__idx:${i}`)) },
-    { group: "props", ids: (data.props ?? []).map((p, i) => safeId(p.prop_id, `__idx:${i}`)) }
-  ];
-  for (const { group, ids } of specs) {
-    push({ key: `asset-group:${group}`, kind: "asset-group-header", group });
-    ids.forEach((assetId) => push({ key: `asset:${group}:${assetId}`, kind: "asset-card", group, assetId }));
+  if (includeAssets) {
+    const specs = [
+      { group: "actors", ids: (data.actors ?? []).map((a, i) => safeId(a.actor_id, `__idx:${i}`)) },
+      { group: "locations", ids: (data.locations ?? []).map((l, i) => safeId(l.location_id, `__idx:${i}`)) },
+      { group: "props", ids: (data.props ?? []).map((p, i) => safeId(p.prop_id, `__idx:${i}`)) }
+    ];
+    for (const { group, ids } of specs) {
+      push({ key: `asset-group:${group}`, kind: "asset-group-header", group });
+      ids.forEach((assetId) => push({ key: `asset:${group}:${assetId}`, kind: "asset-card", group, assetId }));
+    }
   }
   return { items, indexByKey, sceneIndexLookup, sceneIdLookup, assetIndexLookup, paperStartKey, paperEndKey };
 }
@@ -3553,6 +3590,7 @@ function AssetCardImpl({
                 onSave: (v) => onEdit((p) => updateEntityStateField(p, kind, assetId, sid, "state_name", v))
               }
             ),
+            (state.state_id ?? "").trim() ? /* @__PURE__ */ jsx("span", { className: "lj-se-assetcard-state-id", title: "\u72B6\u6001 id", children: (state.state_id ?? "").trim() }) : null,
             !disabled && (state.state_id ?? "").trim() ? /* @__PURE__ */ jsx(
               StateDeleteButton,
               {
@@ -3614,11 +3652,28 @@ function ScriptStream({
   onAcceptAction,
   onRejectAction,
   scrollScopeKey,
+  includeAssets = true,
+  paper = true,
+  showTimestamp = false,
+  highlights,
   onEdit,
   onSelectionChange,
   onRequestAssetDelete
 }) {
-  const stream = useMemo(() => buildFlatStream(value), [value]);
+  const stream = useMemo(() => buildFlatStream(value, { includeAssets }), [value, includeAssets]);
+  const highlightsByScene = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const h of highlights ?? []) {
+      const key = `${h.episodeIdx}:${h.sceneId}`;
+      let inner = m.get(key);
+      if (!inner) {
+        inner = /* @__PURE__ */ new Map();
+        m.set(key, inner);
+      }
+      inner.set(h.actionIndex, { className: h.className, style: h.style });
+    }
+    return m;
+  }, [highlights]);
   const maps = useMemo(
     () => ({
       actorMap: getActorMap(value.actors ?? []),
@@ -3686,6 +3741,7 @@ function ScriptStream({
     const end = key === stream.paperEndKey;
     return start && end ? "is-sole" : start ? "is-start" : end ? "is-end" : "is-mid";
   };
+  const segClass = (key, extra) => cn(paper ? "lj-se-paper-seg" : "lj-se-plain-seg", paperEdge(key), extra);
   useEffect(() => {
     const key = selectionTargetKey(selection);
     if (selection.origin === "scroll") {
@@ -3723,7 +3779,7 @@ function ScriptStream({
           case "episode-header": {
             const episode = value.episodes?.[item.episodeIdx];
             if (!episode) return null;
-            return /* @__PURE__ */ jsx("div", { className: "lj-se-stream-row", children: /* @__PURE__ */ jsx("div", { className: cn("lj-se-paper-seg", paperEdge(item.key), "lj-se-ep-seg"), children: /* @__PURE__ */ jsxs("div", { className: "lj-se-epbanner-wrap", children: [
+            return /* @__PURE__ */ jsx("div", { className: "lj-se-stream-row", children: /* @__PURE__ */ jsx("div", { className: segClass(item.key, "lj-se-ep-seg"), children: /* @__PURE__ */ jsxs("div", { className: "lj-se-epbanner-wrap", children: [
               !disabled ? /* @__PURE__ */ jsx(EpisodeMenu, { episodeIdx: item.episodeIdx, onEdit }) : null,
               /* @__PURE__ */ jsx(
                 EpisodeBanner,
@@ -3739,7 +3795,7 @@ function ScriptStream({
           }
           case "episode-empty":
             if (disabled) return null;
-            return /* @__PURE__ */ jsx("div", { className: "lj-se-stream-row", children: /* @__PURE__ */ jsx("div", { className: cn("lj-se-paper-seg", paperEdge(item.key)), children: /* @__PURE__ */ jsxs(
+            return /* @__PURE__ */ jsx("div", { className: "lj-se-stream-row", children: /* @__PURE__ */ jsx("div", { className: segClass(item.key), children: /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
@@ -3765,7 +3821,7 @@ function ScriptStream({
               onAccept: onAcceptAction,
               onReject: onRejectAction
             } : void 0;
-            return /* @__PURE__ */ jsx("div", { className: "lj-se-stream-row", "data-quote-source": true, children: /* @__PURE__ */ jsxs("div", { className: cn("lj-se-paper-seg", paperEdge(item.key), wholeKind && "is-changed"), children: [
+            return /* @__PURE__ */ jsx("div", { className: "lj-se-stream-row", "data-quote-source": true, children: /* @__PURE__ */ jsxs("div", { className: segClass(item.key, wholeKind ? "is-changed" : void 0), children: [
               sceneDiff && inDiff ? /* @__PURE__ */ jsxs("div", { className: "lj-se-scenediff", children: [
                 /* @__PURE__ */ jsx("span", { className: cn("lj-se-scenediff-tag", wholeKind === "added" && "is-added"), children: wholeKind === "added" ? "AI \u65B0\u589E" : "AI \u6539\u52A8" }),
                 /* @__PURE__ */ jsx("span", { className: "lj-se-scenediff-spacer" }),
@@ -3799,6 +3855,8 @@ function ScriptStream({
                   format,
                   disabled,
                   focused,
+                  showTimestamp,
+                  highlights: highlightsByScene.get(diffKey),
                   onEdit,
                   onNavigateAsset: select,
                   onRequestAssetDelete
@@ -4539,9 +4597,11 @@ function ScriptSearchLayer({
     /* @__PURE__ */ jsx(HighlightContext.Provider, { value: open ? query : "", children })
   ] });
 }
+var NOOP_EDIT = (patch) => {
+};
 function ScriptEditor({
   value,
-  onEdit,
+  onEdit: onEditProp,
   selection: controlledSelection,
   onSelectionChange,
   format: controlledFormat,
@@ -4560,11 +4620,20 @@ function ScriptEditor({
   onEditingChange,
   referenceFocusRequest,
   scrollScopeKey,
+  showAssets = true,
+  showTitle = true,
+  showFormatToggle = true,
+  paper = true,
+  showTimestamp = false,
+  highlights,
+  contentWidth,
+  showSaveCapsule = true,
   diff,
   asset,
   onAddChatReferences,
   onRequestAssetDelete
 }) {
+  const onEdit = onEditProp ?? NOOP_EDIT;
   const editingCount = useRef(0);
   const onEditingChangeRef = useRef(onEditingChange);
   onEditingChangeRef.current = onEditingChange;
@@ -4695,6 +4764,17 @@ function ScriptEditor({
   const contextLabel = buildContextLabel(value, selection);
   const returnTarget = resolveReturnTarget(value, selection);
   const rootClass = ["lj-se-root", dark ? "dark" : "", className].filter(Boolean).join(" ");
+  const rootStyle = contentWidth != null ? { "--lj-se-content-width": typeof contentWidth === "number" ? `${contentWidth}px` : contentWidth } : void 0;
+  const streamHighlights = useMemo(
+    () => highlights?.map((h) => ({
+      episodeIdx: h.target.episodeIdx,
+      sceneId: h.target.sceneId,
+      actionIndex: h.target.actionIndex,
+      className: h.className,
+      style: h.style
+    })),
+    [highlights]
+  );
   const center = /* @__PURE__ */ jsx(
     ScriptStream,
     {
@@ -4708,6 +4788,10 @@ function ScriptEditor({
       onAcceptAction: diff?.onAcceptAction,
       onRejectAction: diff?.onRejectAction,
       scrollScopeKey,
+      includeAssets: showAssets,
+      paper,
+      showTimestamp,
+      highlights: streamHighlights,
       onEdit,
       onSelectionChange: setSelection,
       onRequestAssetDelete
@@ -4717,6 +4801,7 @@ function ScriptEditor({
     "div",
     {
       className: rootClass,
+      style: rootStyle,
       ref: rootRef,
       children: [
         toc === "sidebar" ? /* @__PURE__ */ jsx(
@@ -4732,12 +4817,13 @@ function ScriptEditor({
           /* @__PURE__ */ jsx(
             CanvasTopBar,
             {
-              title: value.title,
-              onTitleChange: disabled ? void 0 : onTitleChange,
+              title: showTitle ? value.title : void 0,
+              onTitleChange: disabled || !showTitle ? void 0 : onTitleChange,
               titleDisabled: disabled,
               contextLabel,
               format,
               onFormatChange: setFormat,
+              showFormatToggle,
               canUndo,
               canRedo,
               onUndo,
@@ -4758,7 +4844,7 @@ function ScriptEditor({
               }
             ),
             onAddChatReferences ? /* @__PURE__ */ jsx(QuoteLayer, { containerRef: canvasRef, onAddChatReferences }) : null,
-            /* @__PURE__ */ jsx(
+            showSaveCapsule ? /* @__PURE__ */ jsx(
               SaveCapsule,
               {
                 saveStatus,
@@ -4772,7 +4858,7 @@ function ScriptEditor({
                 returnLabel: returnTarget?.label,
                 onReturn: returnTarget ? () => setSelection(returnTarget.selection) : void 0
               }
-            )
+            ) : null
           ] })
         ] })
       ]
@@ -4977,6 +5063,6 @@ function DeleteConfirmButton({
   );
 }
 
-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 };
+export { DeleteConfirmButton, EMPTY_SELECTION, EditableText, Popover, ScriptContentType, ScriptEditor, SelectField, acceptActionIntoBaseline, acceptSceneIntoBaseline, applyActionAccept, applyActionReject, buildActionDiff, buildDiffFromBaseline, buildScriptNav, buildSelectionFrom, changeSetToDiffScenes, computeChangeSet, computeSceneActionDiff, findBaselineScene, formatTimestamp, 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