MVP M1–M3: visual port, TipTap text editor, React Flow diagram
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.
This commit is contained in:
8
apps/web/app/editor/[projectId]/page.tsx
Normal file
8
apps/web/app/editor/[projectId]/page.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import { EditorShell } from "../../../components/editor/EditorShell";
|
||||
import { aristotleFixture } from "../../../lib/fixtures/aristotle";
|
||||
|
||||
// M1: every projectId resolves to the Aristotle fixture.
|
||||
// M4–M5 wire this to a real database lookup.
|
||||
export default async function EditorPage(_props: { params: Promise<{ projectId: string }> }) {
|
||||
return <EditorShell data={aristotleFixture} />;
|
||||
}
|
||||
30
apps/web/app/layout.tsx
Normal file
30
apps/web/app/layout.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import type { Metadata } from "next";
|
||||
import "../styles/base.css";
|
||||
import "../styles/theme-manuscript.css";
|
||||
import "@xyflow/react/dist/style.css";
|
||||
import "../styles/diagram.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Socrata",
|
||||
description: "Structured thinking and validation platform for product managers.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body className="theme-manuscript">{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
50
apps/web/app/page.tsx
Normal file
50
apps/web/app/page.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div style={{ padding: "60px 80px", maxWidth: 720, margin: "0 auto", lineHeight: 1.55 }}>
|
||||
<h1 style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 600, marginBottom: 8 }}>
|
||||
Socrata
|
||||
</h1>
|
||||
<p style={{ color: "var(--muted)", marginBottom: 32 }}>
|
||||
Structured thinking and validation platform for product managers.
|
||||
</p>
|
||||
<ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
|
||||
<li>
|
||||
<Link
|
||||
href="/editor/aristotle"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "12px 18px",
|
||||
border: "1px solid var(--border-strong)",
|
||||
borderRadius: 6,
|
||||
color: "var(--accent)",
|
||||
fontFamily: "var(--font-mono)",
|
||||
fontSize: 13,
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
→ Open editor (Aristotle fixture)
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/seed"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
padding: "12px 18px",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: 6,
|
||||
color: "var(--muted)",
|
||||
fontFamily: "var(--font-mono)",
|
||||
fontSize: 13,
|
||||
textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
→ Seed screen (coming next)
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
apps/web/app/seed/page.tsx
Normal file
5
apps/web/app/seed/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { SeedScreen } from "../../components/seed/SeedScreen";
|
||||
|
||||
export default function SeedPage() {
|
||||
return <SeedScreen />;
|
||||
}
|
||||
Reference in New Issue
Block a user