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.
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
// Drag source for new blocks. Drop on the React Flow canvas to create.
|
|
|
|
"use client";
|
|
|
|
import type { BlockKind } from "../../lib/fixtures/aristotle";
|
|
|
|
interface PaletteItem {
|
|
kind: BlockKind | "system";
|
|
label: string;
|
|
glyph: string;
|
|
}
|
|
|
|
const ITEMS: PaletteItem[] = [
|
|
{ kind: "system", label: "System", glyph: "◎" },
|
|
{ kind: "block", label: "Block", glyph: "▢" },
|
|
{ kind: "actor", label: "Actor", glyph: "◐" },
|
|
{ kind: "constraint", label: "Constraint", glyph: "{}" },
|
|
];
|
|
|
|
export function Palette() {
|
|
function onDragStart(event: React.DragEvent, kind: string) {
|
|
event.dataTransfer.setData("application/sysml-kind", kind);
|
|
event.dataTransfer.effectAllowed = "move";
|
|
}
|
|
|
|
return (
|
|
<div className="diagram-palette">
|
|
<div className="diagram-palette-label">Add</div>
|
|
{ITEMS.map(item => (
|
|
<div
|
|
key={item.kind}
|
|
className="diagram-palette-item"
|
|
draggable
|
|
onDragStart={e => onDragStart(e, item.kind)}
|
|
title={`Drag to create a ${item.label}`}
|
|
>
|
|
<span className="diagram-palette-glyph">{item.glyph}</span>
|
|
<span>{item.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|