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;
  density?: Density;
  markupStyle?: MarkupStyle;
  diagramStyle?: DiagramVariant;
  presence?: SocratesPresence;
}

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

function EditorShellInner({
  data,
  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]);

  const initialModel = useMemo(() => {
    const base = fromFixture(data);
    return breaks.length > 0 ? applyBreaks(base, breaks) : base;
  }, [data, breaks]);

  return (
    <ModelStoreProvider initialModel={initialModel}>
      <ShellBody
        data={data}
        density={density}
        markupStyle={markupStyle}
        diagramStyle={diagramStyle}
        presence={presence}
        breaks={breaks}
      />
    </ModelStoreProvider>
  );
}

function ShellBody({
  data,
  density,
  markupStyle,
  diagramStyle,
  presence,
  breaks,
}: Required<Omit<EditorShellProps, "data">> & { data: FixtureData; breaks: BreakName[] }) {
  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>
  );
}