@lingjingai/script-editor 0.2.0 → 0.3.0

package/dist/style.css

@@ -39,6 +39,14 @@
   --lj-se-actor-cue-7: oklch(0.46 0.18 335);
   --lj-se-actor-cue-8: oklch(0.30 0.04 270);
 
+  /* content column width (host-overridable; e.g. set to a larger px, or 100% to
+     fill the container). Applies to script segments AND asset cards alike. */
+  --lj-se-content-width: 820px;
+  /* range highlight (host-overridable) + timestamp gutter width/color */
+  --lj-se-hl-bg: oklch(0.9 0.15 95 / 0.5);
+  --lj-se-ts-fg: var(--lj-se-muted-fg);
+  --lj-se-ts-width: 52px;
+
   display: flex;
   min-height: 0;
   height: 100%;
@@ -177,6 +185,13 @@
 }
 .lj-se-paper-seg.is-sole { border-radius: 8px; box-shadow: var(--lj-se-paper-shadow); }
 
+/* Plain segment: paper surface OFF (paper={false}). Same layout box as
+   lj-se-paper-seg but flat — no parchment texture, borders, or shadow, and it
+   inherits the ambient fg/bg instead of the paper palette. Edge modifiers
+   (is-start/is-end/is-sole/is-mid) are accepted but visually inert. */
+.lj-se-plain-seg { position: relative; background: transparent; color: inherit; isolation: isolate; }
+.lj-se-plain-seg > * { position: relative; z-index: 1; }
+
 /* ── click-to-edit primitive ──────────────────────────────────────────── */
 .lj-se-editable {
   cursor: text;
@@ -339,6 +354,8 @@
 .lj-se-toc-l0 { padding-left: 8px; padding-right: 8px; font-size: 13px; font-weight: 500; }
 .lj-se-toc-l1 { padding-left: 20px; padding-right: 8px; font-size: 13px; font-weight: 500; }
 .lj-se-toc-l2 { padding-left: 36px; padding-right: 8px; font-size: 12px; color: color-mix(in oklab, var(--lj-se-fg) 65%, transparent); }
+/* 背景资产行:折叠区内缩进一级(比背景折叠头 20px 更深)。 */
+.lj-se-toc-bg { padding-left: 36px; padding-right: 8px; font-size: 13px; font-weight: 500; color: color-mix(in oklab, var(--lj-se-fg) 75%, transparent); }
 .lj-se-tocitem-icon { flex-shrink: 0; }
 .lj-se-tocitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .lj-se-tocitem-meta { flex-shrink: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--lj-se-muted-fg); }
@@ -438,6 +455,35 @@
 .lj-se-actiondiff-accept { color: oklch(0.5 0.15 150); }
 .lj-se-actiondiff-accept:hover { background: color-mix(in oklab, oklch(0.62 0.15 150) 16%, transparent); }
 
+/* ── range highlight (host-controlled, per action; same wrapper-class layer as
+   diff tints so the two can stack) ──────────────────────────────────────── */
+.lj-se-action-slot.lj-se-hl > .lj-se-row { background: var(--lj-se-hl-bg); border-radius: 6px; }
+
+/* ── timestamp: a small MM:SS chip pinned to the row's TOP-RIGHT corner. Sits
+   in the row's reserved right padding, away from the left drag handle, so it
+   never collides with edit affordances. Subtle by default; host-overridable via
+   --lj-se-ts-fg. ──────────────────────────────────────────────────────────── */
+.lj-se-ts {
+  position: absolute; right: 8px; top: 4px; z-index: 2;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 10.5px; line-height: 1; letter-spacing: 0.02em;
+  color: var(--lj-se-ts-fg); opacity: 0.6;
+  padding: 2px 5px; border-radius: 4px;
+  background: color-mix(in oklab, var(--lj-se-paper-fg) 6%, transparent);
+  user-select: none; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums;
+}
+/* Asian (compact inline) rows are short & left-aligned, so a right-corner chip
+   floats far from the text. Move the timestamp to a left gutter hugging the
+   line, and indent the row to make room. The drag handle lives OUTSIDE the row
+   (left:-34px), so a row-internal left gutter never collides with it. */
+.lj-se-actions.has-ts .lj-se-action-slot:has(.lj-se-row--asian) > .lj-se-ts {
+  left: 4px; right: auto; top: 50%; transform: translateY(-50%);
+  padding: 1px 4px; background: transparent; opacity: 0.5;
+}
+.lj-se-actions.has-ts .lj-se-action-slot:has(.lj-se-row--asian) > .lj-se-row--asian {
+  padding-left: 52px;
+}
+
 /* ── Worldview view ──────────────────────────────────────────────────── */
 .lj-se-worldview { height: 100%; overflow-y: auto; padding: 24px; }
 .lj-se-worldview, .lj-se-entity { max-width: 760px; margin: 0 auto; width: 100%; }
@@ -477,10 +523,15 @@
 .lj-se-stream { height: 100%; }
 .lj-se-stream-empty { padding: 48px; text-align: center; color: var(--lj-se-muted-fg); }
 .lj-se-stream-row { display: flex; justify-content: center; padding: 0 24px; }
-.lj-se-stream-row .lj-se-paper-seg { width: 100%; max-width: 820px; padding: 8px 48px; }
-.lj-se-paper-seg.is-start { margin-top: 16px; padding-top: 32px; }
-.lj-se-paper-seg.is-end { margin-bottom: 16px; padding-bottom: 40px; }
-.lj-se-paper-seg.is-sole { margin: 16px 0; padding-top: 32px; padding-bottom: 40px; }
+/* Layout box (width / centering / inner padding / segment margins) is shared by
+   BOTH surfaces — it's independent of the parchment look. Paper adds the texture
+   & border/shadow on top; plain keeps the same box, flat. Keeping these on both
+   avoids the "no-paper" content spilling to the edge / misaligning across segs. */
+.lj-se-stream-row .lj-se-paper-seg,
+.lj-se-stream-row .lj-se-plain-seg { width: 100%; max-width: var(--lj-se-content-width); padding: 8px 48px; }
+.lj-se-paper-seg.is-start, .lj-se-plain-seg.is-start { margin-top: 16px; padding-top: 32px; }
+.lj-se-paper-seg.is-end, .lj-se-plain-seg.is-end { margin-bottom: 16px; padding-bottom: 40px; }
+.lj-se-paper-seg.is-sole, .lj-se-plain-seg.is-sole { margin: 16px 0; padding-top: 32px; padding-bottom: 40px; }
 .lj-se-paper-seg.is-changed { box-shadow: inset 3px 0 0 0 oklch(0.7 0.16 70); }
 .lj-se-ep-banner { display: flex; align-items: baseline; gap: 12px; justify-content: center; padding: 16px 24px 6px; background: var(--lj-se-bg); }
 .lj-se-ep-banner-title { font-weight: 700; font-size: 15px; }
@@ -632,12 +683,12 @@
 
 /* ── Asset group header ──────────────────────────────────────────────── */
 .lj-se-assetgroup-head { display: flex; justify-content: center; padding: 24px 24px 8px; }
-.lj-se-assetgroup-title { width: 100%; max-width: 820px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--lj-se-fg); border-bottom: 1px solid var(--lj-se-border); padding-bottom: 6px; }
+.lj-se-assetgroup-title { width: 100%; max-width: var(--lj-se-content-width); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--lj-se-fg); border-bottom: 1px solid var(--lj-se-border); padding-bottom: 6px; }
 
 /* ── Asset card ──────────────────────────────────────────────────────── */
 .lj-se-assetcard-row { display: flex; justify-content: center; padding: 6px 24px; }
-.lj-se-assetcard { width: 100%; max-width: 820px; position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--lj-se-border); background: var(--lj-se-card); box-shadow: 0 1px 2px oklch(0 0 0 / 0.04); padding: 16px 20px; }
-.lj-se-assetcard-missing { width: 100%; max-width: 820px; border: 1px dashed var(--lj-se-border); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--lj-se-muted-fg); }
+.lj-se-assetcard { width: 100%; max-width: var(--lj-se-content-width); position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--lj-se-border); background: var(--lj-se-card); box-shadow: 0 1px 2px oklch(0 0 0 / 0.04); padding: 16px 20px; }
+.lj-se-assetcard-missing { width: 100%; max-width: var(--lj-se-content-width); border: 1px dashed var(--lj-se-border); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--lj-se-muted-fg); }
 .lj-se-assetcard-head { display: flex; align-items: baseline; gap: 8px; }
 .lj-se-assetcard-name { font-size: 18px; font-weight: 600; color: var(--lj-se-fg); }
 .lj-se-assetcard-id { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--lj-se-muted-fg); }
@@ -661,6 +712,8 @@
 .lj-se-assetcard-state { border: 1px solid var(--lj-se-border); border-radius: 8px; padding: 8px 10px; background: color-mix(in oklab, var(--lj-se-muted) 30%, transparent); }
 .lj-se-assetcard-state-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
 .lj-se-assetcard-state-name { font-size: 13px; font-weight: 600; }
+/* 状态 id 徽章:紧跟状态名,margin-right:auto 把删除按钮推到右侧。 */
+.lj-se-assetcard-state-id { margin-right: auto; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--lj-se-muted-fg); }
 .lj-se-assetcard-state-desc { display: block; margin-top: 2px; font-size: 12px; color: var(--lj-se-muted-fg); min-height: 1.2em; }
 .lj-se-assetcard-state-del { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 6px; color: var(--lj-se-muted-fg); cursor: pointer; }
 .lj-se-assetcard-state-del:hover { background: color-mix(in oklab, var(--lj-se-destructive) 10%, transparent); color: var(--lj-se-destructive); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingjingai/script-editor",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Pure, business-decoupled screenplay (剧本) editor: value:ScriptProject + onEdit(patch); dual-format (standard/asian), virtualized single-stream, click-to-edit; bundled CSS, business injected via adapters.",
   "license": "MIT",
   "type": "module",