Socrates/apps/web/components/editor/EditorShell.tsx

// The dual-canvas workspace shell.
// M5: state lives in ModelStoreProvider; both canvases consume the canonical
// SysMLModel and emit ModelOps back through useApply().

"use client";

import { useMemo, useState, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { TopBar } from "./TopBar";
import { LeftRail } from "./LeftRail";
import { CanvasHeader } from "./CanvasHeader";
import { StatusBar } from "./StatusBar";
import { IssuesPanel } from "./IssuesPanel";
import { TextCanvas } from "../text-canvas/TextCanvas";
import { DiagramCanvas, type DiagramVariant } from "../diagram-canvas/DiagramCanvas";
import { SocratesDock, type Density, type SocratesPresence } from "../socrates/SocratesDock";
import type { MarkupStyle } from "../text-canvas/Chip";
import type { FixtureData } from "../../lib/fixtures/aristotle";
import { fromFixture } from "../../lib/sysml/fromFixture";
import { applyBreaks, BREAKS, type BreakName } from "../../lib/sysml/breaks";
import { ModelStoreProvider, useModelStore } from "../../lib/sync/ModelStore";

interface EditorShellProps {
  data: FixtureData;
  /** Server-loaded initial model + version (M5.9). When omitted, falls back to
   *  deriving from `data` (legacy fixture path; useful for tests). */
  initialModel?: import("../../lib/sysml/model").SysMLModel;
  initialVersion?: number;
  /** When set, apply() POSTs to /api/projects/[projectId]/apply. */
  projectId?: string;
  density?: Density;
  markupStyle?: MarkupStyle;
  diagramStyle?: DiagramVariant;
  presence?: SocratesPresence;
}

export function EditorShell(props: EditorShellProps) {
  return (
    <Suspense fallback={null}>
      <EditorShellInner {...props} />
    </Suspense>
  );
}

function EditorShellInner({
  data,
  initialModel,
  initialVersion,
  projectId,
  density = "comfortable",
  markupStyle = "color",
  diagramStyle = "softened",
  presence = "default",
}: EditorShellProps) {
  const searchParams = useSearchParams();

  const breaks = useMemo<BreakName[]>(() => {
    const raw = searchParams?.get("break") ?? "";
    if (!raw) return [];
    return raw.split(",").map(s => s.trim()).filter((s): s is BreakName => s in BREAKS);
  }, [searchParams]);

  // Prefer server-loaded model; fall back to fixture derivation for legacy
  // callers without DB persistence wiring.
  const startingModel = useMemo(() => {
    const base = initialModel ?? fromFixture(data);
    return breaks.length > 0 ? applyBreaks(base, breaks) : base;
  }, [initialModel, data, breaks]);

  return (
    <ModelStoreProvider
      initialModel={startingModel}
      initialVersion={initialVersion ?? 1}
      projectId={projectId}
    >
      <ShellBody
        data={data}
        density={density}
        markupStyle={markupStyle}
        diagramStyle={diagramStyle}
        presence={presence}
        breaks={breaks}
      />
    </ModelStoreProvider>
  );
}

interface ShellBodyProps {
  data: FixtureData;
  density: Density;
  markupStyle: MarkupStyle;
  diagramStyle: DiagramVariant;
  presence: SocratesPresence;
  breaks: BreakName[];
}

function ShellBody({ data, density, markupStyle, diagramStyle, presence, breaks }: ShellBodyProps) {
  const [focusBlockId, setFocusBlockId] = useState<string | null>(null);
  const { model, issues, issuesByElement } = useModelStore();

  const stats = `SysML · ${model.blocks.length} blocks · ${model.associations.length} associations · ${model.constraints.length} constraints`;
  const subtitle = breaks.length > 0 ? `${stats} · breaks active: ${breaks.join(", ")}` : stats;

  return (
    <div className={`shell shell-density-${density} shell-presence-${presence}`}>
      <TopBar data={data} />

      <div className="shell-body">
        <SocratesDock thread={data.socratesThread} presence={presence} density={density} />
        <LeftRail
          data={data}
          focusBlockId={focusBlockId}
          setFocusBlockId={setFocusBlockId}
          issuesByElement={issuesByElement}
        />

        <main className="canvases">
          <section className="canvas canvas-text">
            <CanvasHeader title="Narrative" subtitle="Markup-augmented prose · synced to model" />
            <div className="canvas-scroll">
              <TextCanvas
                data={data}
                density={density}
                markupStyle={markupStyle}
                focusBlockId={focusBlockId}
                setFocusBlockId={setFocusBlockId}
              />
            </div>
          </section>

          <div className="canvas-divider" />

          <section className="canvas canvas-diagram">
            <CanvasHeader
              title="Model"
              subtitle={subtitle}
              right={
                <div className="canvas-actions">
                  <span className="canvas-mode-pill">Fit</span>
                  <span className="canvas-mode-pill canvas-mode-active">100%</span>
                  <span className="canvas-mode-pill">Layout</span>
                </div>
              }
            />
            <div className="canvas-scroll canvas-scroll-diagram">
              <DiagramCanvas
                data={data}
                density={density}
                variant={diagramStyle}
                focusBlockId={focusBlockId}
                onSelect={setFocusBlockId}
                issuesByElement={issuesByElement}
              />
            </div>
          </section>
        </main>
      </div>

      <StatusBar data={data} />

      <IssuesPanel issues={issues} onSelectAnchor={id => setFocusBlockId(id)} />
    </div>
  );
}