dtoro
a0566ce64c
apps/web — Next.js 16 + TypeScript + React 19 (no Tailwind) M1 Visual port - Manuscript theme + base styles ported verbatim from design-source - 100dvh layout with internal scroll regions (rail / narrative / dock thread) - TopBar, LeftRail (collapsible sections + collapsed strip), CanvasHeader, StatusBar, EditorShell composing the dual-canvas - SocratesDock (subtle/default/prominent) with bubbles + numbered options - Sigil (Σ + laurel) used across editor and seed screens - SeedScreen with emerging-seed rail, mini-graph, confidence bar, thread, typing indicator, input row - Routes: / (homepage), /editor/[projectId], /seed - Aristotle fixture in lib/fixtures (ported from data.js) M2 Real text editor - TipTap (StarterKit + custom Chip atom inline node + ReactNodeViewRenderer) - Slash-menu insertion via @tiptap/suggestion with arrow / number-key shortcuts - ChipFocusContext bridges narrative ↔ diagram hover/selection across the TipTap render boundary - fixtureToDoc converts the fixture narrative → ProseMirror JSON M3 Real diagram - React Flow (@xyflow/react) custom node (block / actor / constraint / system) matching prototype's softened look - Custom edge with bezier path + label renderer (association / composition / constraint variants) - Drag-create from a left-side palette via HTML5 DnD + screenToFlowPosition - NodeInspector panel: edit kind / label / properties (or expression for constraints); delete cascades to incident edges - Bidirectional focus highlighting between chips (narrative) and blocks (diagram) - Removed redundant legend (stereotype labels on nodes serve same purpose) State for M3 lives in component memory; persistence + bidirectional sync land in M4–M5.
88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
// The dual-canvas workspace shell.
|
|
// Composes TopBar / SocratesDock / LeftRail / TextCanvas / DiagramCanvas / StatusBar.
|
|
// Ported from docs/design-source/socrata/project/editor-shell.jsx (EditorShell).
|
|
|
|
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { TopBar } from "./TopBar";
|
|
import { LeftRail } from "./LeftRail";
|
|
import { CanvasHeader } from "./CanvasHeader";
|
|
import { StatusBar } from "./StatusBar";
|
|
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";
|
|
|
|
interface EditorShellProps {
|
|
data: FixtureData;
|
|
density?: Density;
|
|
markupStyle?: MarkupStyle;
|
|
diagramStyle?: DiagramVariant;
|
|
presence?: SocratesPresence;
|
|
}
|
|
|
|
export function EditorShell({
|
|
data,
|
|
density = "comfortable",
|
|
markupStyle = "color",
|
|
diagramStyle = "softened",
|
|
presence = "default",
|
|
}: EditorShellProps) {
|
|
const [focusBlockId, setFocusBlockId] = useState<string | null>(null);
|
|
|
|
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} />
|
|
|
|
<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="SysML · 6 blocks · 6 associations · 1 constraint"
|
|
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}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<StatusBar data={data} />
|
|
</div>
|
|
);
|
|
}
|