PlotDirector Phase 17B Follow-up - Scene/Edit Focused Editor Flyout Layout

PlotLine/Views/Shared/SceneInspectorV2/_SceneInspectorEditPage.cshtml

@@ -1,6 +1,7 @@
 @model SceneEditViewModel
 
 <div class="scene-inspector-v2 scene-inspector-v2-edit" data-scene-inspector-v2 data-scene-id="@Model.SceneID">
+    <div class="scene-inspector-v2-summary-pane">
         <partial name="~/Views/Shared/SceneInspectorV2/_SceneInspectorHealthStrip.cshtml" model="Model" />
 
         <div class="scene-inspector-v2-grid">
@@ -11,6 +12,8 @@
             <partial name="~/Views/Shared/SceneInspectorV2/_SceneWriterCard.cshtml" model="Model" />
             <partial name="~/Views/Shared/SceneInspectorV2/_SceneContinuityCard.cshtml" model="Model" />
         </div>
+    </div>
 
+    <div class="scene-inspector-editor-resizer" data-scene-editor-resizer role="separator" aria-orientation="vertical" aria-label="Resize focused editor"></div>
     <partial name="~/Views/Shared/SceneInspectorV2/_SceneInspectorEditorHost.cshtml" />
 </div>

PlotLine/wwwroot/css/site.css

@@ -4646,9 +4646,31 @@ body.dragging-location [data-drag-type="location"] {
 }
 
 .scene-inspector-v2-edit {
+  --scene-editor-width: 480px;
   padding-bottom: 24px;
 }
 
+.scene-inspector-v2-edit.editor-overlay-open {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 10px minmax(360px, min(var(--scene-editor-width), 50%));
+  align-items: stretch;
+  gap: 12px;
+  height: clamp(420px, calc(100vh - 280px), 760px);
+  min-height: 0;
+}
+
+.scene-inspector-v2-summary-pane {
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+}
+
+.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-v2-summary-pane {
+  min-height: 0;
+  overflow: auto;
+  padding-right: 2px;
+}
+
 .scene-inspector-v2-timeline {
   min-height: 100%;
 }
@@ -4865,9 +4887,46 @@ body.dragging-location [data-drag-type="location"] {
 }
 
 .scene-inspector-v2-edit .scene-inspector-editor-overlay {
-  position: fixed;
-  inset: 96px 24px 24px;
-  z-index: 1030;
+  position: static;
+  inset: auto;
+  z-index: 1;
+  min-width: 0;
+  height: 100%;
+  max-height: none;
+}
+
+.scene-inspector-editor-resizer {
+  display: none;
+}
+
+.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-editor-resizer {
+  display: block;
+  align-self: stretch;
+  min-height: 100%;
+  border-radius: 999px;
+  cursor: col-resize;
+  background: linear-gradient(180deg, rgba(47, 111, 99, 0.16), rgba(47, 111, 99, 0.04));
+}
+
+.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-editor-resizer::before {
+  content: "";
+  display: block;
+  width: 2px;
+  height: 48px;
+  margin: 18px auto;
+  border-radius: 999px;
+  background: var(--plotline-accent);
+  opacity: 0.55;
+}
+
+.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-editor-resizer:focus-visible,
+.scene-inspector-v2-edit.editor-overlay-open .scene-inspector-editor-resizer:hover {
+  background: rgba(47, 111, 99, 0.16);
+}
+
+body.scene-inspector-editor-resizing {
+  cursor: col-resize;
+  user-select: none;
 }
 
 .scene-inspector-editor-shell {
@@ -5051,6 +5110,10 @@ body.dragging-location [data-drag-type="location"] {
 }
 
 @media (max-width: 1100px) {
+  .scene-inspector-v2-edit.editor-overlay-open {
+    grid-template-columns: minmax(0, 1fr) 10px minmax(360px, min(var(--scene-editor-width), 52%));
+  }
+
   .scene-inspector-v2-grid,
   .scene-inspector-v2-health {
     grid-template-columns: repeat(2, minmax(0, 1fr));

PlotLine/wwwroot/js/scene-inspector-v2.js

@@ -123,6 +123,20 @@
     }
   }
 
+  function editorWidthBounds(root) {
+    const rootWidth = root.getBoundingClientRect().width || 960;
+    return {
+      min: Math.min(360, Math.max(280, rootWidth - 420)),
+      max: Math.max(360, rootWidth * 0.5)
+    };
+  }
+
+  function setEditEditorWidth(root, width) {
+    const bounds = editorWidthBounds(root);
+    const nextWidth = Math.min(bounds.max, Math.max(bounds.min, width));
+    root.style.setProperty("--scene-editor-width", `${Math.round(nextWidth)}px`);
+  }
+
   document.addEventListener("click", async event => {
     const openButton = event.target.closest("[data-scene-editor]");
     if (openButton) {
@@ -228,4 +242,34 @@
       }
     }
   });
+
+  document.addEventListener("pointerdown", event => {
+    const resizer = event.target.closest("[data-scene-editor-resizer]");
+    if (!resizer) {
+      return;
+    }
+
+    const root = resizer.closest(".scene-inspector-v2-edit");
+    if (!root) {
+      return;
+    }
+
+    event.preventDefault();
+    document.body.classList.add("scene-inspector-editor-resizing");
+    resizer.setPointerCapture?.(event.pointerId);
+
+    const onMove = moveEvent => {
+      const rect = root.getBoundingClientRect();
+      setEditEditorWidth(root, rect.right - moveEvent.clientX);
+    };
+
+    const onUp = () => {
+      document.body.classList.remove("scene-inspector-editor-resizing");
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+    };
+
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+  });
 })();