Fix editor rendered authoring board

Refs #20, #47, #51

Author: KSemenenko

src/PrompterOne.Shared/AGENTS.md

@@ -47,6 +47,7 @@
 - Assistant spotlight suggestions and script graph UI must not use ad-hoc language heuristics for intent or similarity. Use LLM-backed semantics when available, or explicit tokenizer/vector similarity over localized action descriptions and the user query when a non-LLM fallback is needed.
 - Script graph editing must support a split source/graph workflow: the user should be able to inspect the graph beside the editor, click a meaningful graph node, and have the owning source range revealed or highlighted without leaving the graph workspace.
 - Script graph split mode must expose a user-resizable divider between source and graph panes, and graph view must also support a graph-only workspace mode for focused exploration.
+- Script graph canvas must fill the graph panel's remaining workspace in split and graph-only modes; keep the G6 host and rendered canvas synchronized to the panel size after render, resize, and divider changes so the graph is not clipped unless the user intentionally pans or zooms.
 - Script graph nodes must explain article/book meaning through themes, terms, entities, characters, concepts, claims, and references; do not let generic layout groupings or unexplained extracted snippets dominate the graph.
 - Script graph controls must expose an explicit auto-layout action so users can recover a readable layout after a broken preset, resize, drag, pan, or zoom interaction without rebuilding the document.
 - Script graph layout presets must remain readable with PrompterOne's rectangular text nodes; do not add or keep a G6 layout mode without explicit node-size spacing, overlap prevention, or a deterministic fallback that prevents stacked or clipped node labels.
@@ -57,7 +58,11 @@
 - Editor dropdown rows must stay compact menu rows, not stacks of tall rounded mini-cards; overlays may feel premium, but menu items still need fast scannable list rhythm.
 - Dropdown item content across `PrompterOne.Shared` must align from the left edge as one readable cluster; do not push tags, shortcuts, or meta copy to a fake right column inside menu rows.
 - Editor Cards view must behave like a real card board: script cards should support drag-and-drop reordering, expose clear drag handles, and persist the resulting source order instead of relying only on up/down buttons.
+- Editor Cards view must use the available workspace as a multi-column scenario board: segments act as swimlanes or grouped sections, and block cards must wrap into multiple visible columns when a segment contains many blocks instead of collapsing into one narrow vertical list.
+- Editor Cards drag-and-drop must provide visible interaction feedback, including lifted-card state, drop target/position affordance, and smooth movement/settle animation so reordering reads like a real board interaction.
 - Editor Cards view must be theme-aware across light and dark themes; do not hardcode white card/page backgrounds or dark-only text that bypasses shared app color tokens.
+- Editor workspace authoring modes must be explicit: `Raw` is the canonical TPS source editor, `Rendered` is the visual editable authoring mode. Do not label the rendered authoring mode as generic cards when the user needs to edit without knowing Markdown or TPS syntax.
+- Editor Rendered mode must expose visible cue affordances directly on the rendered blocks and segments, including tone, pace, pause, energy, volume, delivery, pronunciation, and similar TPS intent, so non-technical authors can understand and revise the script without reading raw tags.
 - Editor header export actions must use one clear `Export` entry point with format choices inside it; do not render separate top-level buttons for each export format because they read as duplicated actions and crowd the shell chrome.
 - Tooltip surfaces across the app must feel intentional and premium: compact, aligned, clearly separated from the background, and positioned so they do not clip, overlap, or awkwardly fight the control that owns them.
 - Editor header toolbar tooltips must reveal more slowly than dropdown intent so quick menu interactions open the dropdown without competing hover tooltip paint.

src/PrompterOne.Shared/Contracts/UiTestIds.Editor.cs

@@ -193,6 +193,8 @@ public static class Editor
 
         public static string RenderedBlockDragHandle(int segmentIndex, int blockIndex) => $"editor-rendered-block-drag-handle-{segmentIndex}-{blockIndex}";
 
+        public static string RenderedBlockCues(int segmentIndex, int blockIndex) => $"editor-rendered-block-cues-{segmentIndex}-{blockIndex}";
+
         public static string RenderedBlockAttachment(int segmentIndex, int blockIndex, int attachmentIndex) =>
             $"editor-rendered-block-attachment-{segmentIndex}-{blockIndex}-{attachmentIndex}";
 
@@ -208,6 +210,8 @@ public static string RenderedBlockAttachments(int segmentIndex, int blockIndex)
 
         public static string RenderedBlockText(int segmentIndex, int blockIndex) => $"editor-rendered-block-text-{segmentIndex}-{blockIndex}";
 
+        public static string RenderedSegmentCues(int segmentIndex) => $"editor-rendered-segment-cues-{segmentIndex}";
+
         public static string RenderedSegment(int segmentIndex) => $"editor-rendered-segment-{segmentIndex}";
 
         public static string SplitResultItem(int index) => $"editor-split-result-item-{index}";

src/PrompterOne.Shared/Editor/Components/EditorRenderedTextView.razor

@@ -9,6 +9,7 @@
 
 <div class="editor-rendered-view"
      @ref="_rootElement"
+     data-rendered-authoring-mode="visual"
      data-test="@UiTestIds.Editor.RenderedView">
     <div class="editor-rendered-strip" data-test="@UiTestIds.Editor.RenderedStrip">
         @if (Segments.Count == 0)
@@ -39,6 +40,22 @@
                             <span>@segment.DurationLabel</span>
                         }
                     </div>
+                    @if (segment.Cues.Count > 0)
+                    {
+                        <div class="editor-rendered-cue-row editor-rendered-cue-row--segment"
+                             aria-label="@segment.Name"
+                             data-test="@UiTestIds.Editor.RenderedSegmentCues(segment.Index)">
+                            @foreach (var cue in segment.Cues)
+                            {
+                                <span class="editor-rendered-cue-chip"
+                                      data-cue-kind="@cue.Kind"
+                                      data-cue-tone="@cue.Tone">
+                                    <span class="editor-rendered-cue-icon" aria-hidden="true">@cue.Icon</span>
+                                    <span class="editor-rendered-cue-label">@cue.Label</span>
+                                </span>
+                            }
+                        </div>
+                    }
 
                     @foreach (var block in segment.Blocks)
                     {
@@ -76,6 +93,22 @@
                                     </label>
                                 </span>
                             </div>
+                            @if (block.Cues.Count > 0)
+                            {
+                                <div class="editor-rendered-cue-row"
+                                     aria-label="@block.Name"
+                                     data-test="@UiTestIds.Editor.RenderedBlockCues(block.SegmentIndex, block.BlockIndex)">
+                                    @foreach (var cue in block.Cues)
+                                    {
+                                        <span class="editor-rendered-cue-chip"
+                                              data-cue-kind="@cue.Kind"
+                                              data-cue-tone="@cue.Tone">
+                                            <span class="editor-rendered-cue-icon" aria-hidden="true">@cue.Icon</span>
+                                            <span class="editor-rendered-cue-label">@cue.Label</span>
+                                        </span>
+                                    }
+                                </div>
+                            }
                             <textarea class="editor-rendered-text"
                                       aria-label="@block.Name"
                                       data-test="@UiTestIds.Editor.RenderedBlockText(block.SegmentIndex, block.BlockIndex)"

src/PrompterOne.Shared/Editor/Components/EditorRenderedTextView.razor.css

@@ -7,6 +7,8 @@
     --editor-rendered-control-hover: color-mix(in srgb, var(--gold-09) 70%, var(--bg-4));
     --editor-rendered-drop: color-mix(in srgb, var(--gold-10) 22%, transparent);
     --editor-rendered-drop-line: color-mix(in srgb, var(--gold) 72%, transparent);
+    --editor-rendered-lane: color-mix(in srgb, var(--bg-3) 54%, transparent);
+    --editor-rendered-lift-shadow: 0 22px 48px color-mix(in srgb, var(--bg-deep) 46%, transparent);
     display: flex;
     flex: 1 1 auto;
     min-width: 0;
@@ -20,27 +22,30 @@
 
 .editor-rendered-strip {
     display: grid;
-    grid-auto-columns: minmax(280px, 360px);
-    grid-auto-flow: column;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
     gap: 12px;
     min-width: 0;
     width: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
     padding: 12px;
     scrollbar-color: color-mix(in srgb, var(--text-4) 42%, transparent) transparent;
 }
 
 .editor-rendered-card {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+    align-content: start;
     min-width: 0;
-    min-height: 100%;
-    gap: 18px;
-    padding: 34px 24px 28px;
+    min-height: 0;
+    gap: 12px;
+    padding: 18px;
     border: 1px solid var(--editor-rendered-card-border);
     border-radius: 8px;
-    background: var(--editor-rendered-card);
+    background:
+        linear-gradient(180deg, color-mix(in srgb, var(--editor-rendered-lane) 86%, transparent), transparent 190px),
+        var(--editor-rendered-card);
     box-shadow: var(--editor-rendered-card-shadow), var(--glass-inset);
 }
 
@@ -50,6 +55,7 @@
 
 .editor-rendered-card-header {
     display: flex;
+    grid-column: 1 / -1;
     align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
@@ -74,6 +80,7 @@
 }
 
 .editor-rendered-segment-title {
+    grid-column: 1 / -1;
     color: var(--text-1);
     font-size: 25px;
     font-weight: 760;
@@ -83,6 +90,7 @@
 
 .editor-rendered-segment-detail {
     display: flex;
+    grid-column: 1 / -1;
     flex-wrap: wrap;
     gap: 8px;
     min-height: 18px;
@@ -93,11 +101,99 @@
     text-transform: uppercase;
 }
 
+.editor-rendered-cue-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    min-width: 0;
+}
+
+.editor-rendered-cue-row--segment {
+    grid-column: 1 / -1;
+}
+
+.editor-rendered-cue-chip {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    min-height: 24px;
+    gap: 5px;
+    padding: 3px 7px;
+    border: 1px solid color-mix(in srgb, var(--text-4) 19%, transparent);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--bg-1) 42%, transparent);
+    color: var(--text-3);
+    font-size: 11px;
+    font-weight: 740;
+    line-height: 1.15;
+}
+
+.editor-rendered-cue-icon {
+    display: inline-grid;
+    min-width: 13px;
+    place-items: center;
+    color: var(--text-2);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 800;
+    line-height: 1;
+}
+
+.editor-rendered-cue-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.editor-rendered-cue-chip[data-cue-kind="emotion"] {
+    border-color: color-mix(in srgb, #d8ab65 38%, transparent);
+    background: color-mix(in srgb, #d8ab65 12%, var(--bg-1));
+}
+
+.editor-rendered-cue-chip[data-cue-tone="warm"],
+.editor-rendered-cue-chip[data-cue-tone="happy"] {
+    border-color: color-mix(in srgb, #f1b85f 45%, transparent);
+    color: color-mix(in srgb, #f5d7a5 74%, var(--text-1));
+}
+
+.editor-rendered-cue-chip[data-cue-tone="urgent"] {
+    border-color: color-mix(in srgb, #ff756f 46%, transparent);
+    color: color-mix(in srgb, #ffc0b9 70%, var(--text-1));
+}
+
+.editor-rendered-cue-chip[data-cue-tone="calm"],
+.editor-rendered-cue-chip[data-cue-tone="focused"] {
+    border-color: color-mix(in srgb, #7db7ff 40%, transparent);
+    color: color-mix(in srgb, #b9d8ff 68%, var(--text-1));
+}
+
+.editor-rendered-cue-chip[data-cue-kind="pace"],
+.editor-rendered-cue-chip[data-cue-kind="timing"],
+.editor-rendered-cue-chip[data-cue-kind="pause"] {
+    border-color: color-mix(in srgb, var(--gold) 34%, transparent);
+    background: color-mix(in srgb, var(--gold-09) 32%, transparent);
+}
+
+.editor-rendered-cue-chip[data-cue-kind="energy"],
+.editor-rendered-cue-chip[data-cue-kind="delivery"] {
+    border-color: color-mix(in srgb, #8cd68f 34%, transparent);
+    color: color-mix(in srgb, #bfe9c1 68%, var(--text-1));
+}
+
+.editor-rendered-cue-chip[data-cue-kind="pronunciation"],
+.editor-rendered-cue-chip[data-cue-kind="phonetic"],
+.editor-rendered-cue-chip[data-cue-kind="stress"] {
+    border-color: color-mix(in srgb, #a89cff 38%, transparent);
+    color: color-mix(in srgb, #d5d0ff 68%, var(--text-1));
+}
+
 .editor-rendered-block {
     display: flex;
     flex-direction: column;
     gap: 10px;
     min-width: 0;
+    min-height: 244px;
     padding: 9px 10px 10px;
     border: 1px solid color-mix(in srgb, var(--text-4) 13%, transparent);
     border-radius: 8px;
@@ -108,7 +204,9 @@
         border-color .16s ease,
         box-shadow .16s ease,
         opacity .16s ease,
-        transform .16s ease;
+        transform .16s ease,
+        filter .16s ease;
+    will-change: transform;
 }
 
 .editor-rendered-block:hover {
@@ -117,15 +215,55 @@
 }
 
 .editor-rendered-block--dragging {
-    opacity: .62;
-    transform: rotate(.25deg) scale(.99);
+    opacity: .48;
+    transform: scale(.985);
     cursor: grabbing;
+    filter: saturate(.84);
 }
 
 .editor-rendered-block--drop-target {
     background: var(--editor-rendered-drop);
     border-color: var(--editor-rendered-drop-line);
-    box-shadow: inset 3px 0 0 var(--editor-rendered-drop-line);
+    box-shadow:
+        inset 0 0 0 1px var(--editor-rendered-drop-line),
+        var(--editor-rendered-card-shadow);
+    transform: translateY(-2px);
+}
+
+.editor-rendered-block--drop-before,
+.editor-rendered-block--drop-after {
+    position: relative;
+}
+
+.editor-rendered-block--drop-before::before,
+.editor-rendered-block--drop-after::after {
+    position: absolute;
+    z-index: 2;
+    right: 12px;
+    left: 12px;
+    height: 3px;
+    content: "";
+    border-radius: 999px;
+    background: var(--editor-rendered-drop-line);
+    box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 38%, transparent);
+}
+
+.editor-rendered-block--drop-before::before {
+    top: -7px;
+}
+
+.editor-rendered-block--drop-after::after {
+    bottom: -7px;
+}
+
+.editor-rendered-drag-ghost {
+    position: fixed;
+    z-index: 1000;
+    width: min(330px, calc(100vw - 32px));
+    pointer-events: none;
+    opacity: .92;
+    transform: translate3d(-50%, -18px, 0) rotate(.45deg);
+    box-shadow: var(--editor-rendered-lift-shadow);
 }
 
 .editor-rendered-block-head {
@@ -222,7 +360,7 @@
 
 .editor-rendered-text {
     width: 100%;
-    min-height: 150px;
+    min-height: 126px;
     padding: 0;
     resize: vertical;
     border: 0;
@@ -311,14 +449,17 @@ body.theme-light .editor-rendered-view {
     --editor-rendered-card-shadow: 0 14px 28px color-mix(in srgb, var(--bg-deep) 15%, transparent);
     --editor-rendered-control: color-mix(in srgb, var(--bg-1) 86%, transparent);
     --editor-rendered-control-hover: color-mix(in srgb, var(--gold-09) 48%, var(--bg-1));
+    --editor-rendered-lane: color-mix(in srgb, var(--bg-2) 70%, transparent);
+    --editor-rendered-lift-shadow: 0 22px 44px color-mix(in srgb, var(--bg-deep) 22%, transparent);
 }
 
 @media (max-width: 760px) {
     .editor-rendered-strip {
-        grid-auto-columns: minmax(240px, 82vw);
+        padding: 10px;
     }
 
     .editor-rendered-card {
-        padding: 28px 18px 22px;
+        grid-template-columns: minmax(0, 1fr);
+        padding: 14px;
     }
 }

src/PrompterOne.Shared/Editor/Components/EditorViewModels.cs

@@ -53,6 +53,7 @@ public sealed record EditorRenderedSegmentViewModel(
     string EmotionLabel,
     string TargetWpmLabel,
     string DurationLabel,
+    IReadOnlyList<EditorRenderedCueViewModel> Cues,
     IReadOnlyList<EditorRenderedBlockViewModel> Blocks);
 
 public sealed record EditorRenderedBlockViewModel(
@@ -64,8 +65,15 @@ public sealed record EditorRenderedBlockViewModel(
     string EmotionLabel,
     string TargetWpmLabel,
     string Text,
+    IReadOnlyList<EditorRenderedCueViewModel> Cues,
     IReadOnlyList<EditorBlockAttachmentViewModel> Attachments);
 
+public sealed record EditorRenderedCueViewModel(
+    string Kind,
+    string Icon,
+    string Label,
+    string Tone);
+
 public sealed record EditorBlockAttachmentViewModel(
     string Id,
     string FileName,