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.
80 lines
2.2 KiB
CSS
80 lines
2.2 KiB
CSS
/* MANUSCRIPT — warm parchment, scholarly serif, ink-blue accent.
|
|
Document-first; Socrates feels like a character in a book. */
|
|
|
|
.theme-manuscript {
|
|
--font-display: "Newsreader", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
|
|
--font-prose: "Newsreader", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
|
|
--font-body: "Söhne", "Inter Tight", -apple-system, system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
|
|
--tracking: 0;
|
|
|
|
--bg: #f5efe2; /* parchment */
|
|
--surface: #faf5e9;
|
|
--surface-2: #ede4cf;
|
|
--fg: #2a241a;
|
|
--prose: #3d3527;
|
|
--muted: #8a7c63;
|
|
--muted-strong: #5e533f;
|
|
--border: #d9ceb3;
|
|
--border-strong: #b8a982;
|
|
|
|
--accent: #2c4a6b; /* ink blue */
|
|
--accent-strong: #1c3550;
|
|
--accent-soft: #d6def0;
|
|
--accent-on: #faf5e9;
|
|
|
|
--ok: #5e7a3a;
|
|
--ok-soft: #d9e3c7;
|
|
--ok-strong: #3d5421;
|
|
--warn: #a8551c;
|
|
--warn-soft: #f0d9c2;
|
|
--warn-strong: #6b3309;
|
|
--info: #5b6e8a;
|
|
|
|
--shadow: rgba(60,40,15,0.08);
|
|
--shadow-strong: rgba(60,40,15,0.18);
|
|
|
|
--grid-dot: rgba(120,90,40,0.18);
|
|
--diagram-bg: #f0e9d6;
|
|
|
|
--block-bg: #fdfaf0;
|
|
--block-border: #b8a982;
|
|
--block-divider: #d9ceb3;
|
|
--block-actor-bg: #f0e6cf;
|
|
--block-constraint-bg:#f5dccb;
|
|
|
|
--edge: #6e5d3d;
|
|
--edge-soft: #c8b88f;
|
|
--edge-label: #5e533f;
|
|
|
|
--note-bg: #f0e3c4;
|
|
|
|
--bubble-socrates: #f0e3c4;
|
|
--bubble-user: #ede4cf;
|
|
|
|
--chip-bg: #ede4cf;
|
|
--chip-bg-hover: #e2d6b8;
|
|
--chip-fg: #2a241a;
|
|
|
|
/* color-coded chips */
|
|
--c-block-bg: #d6def0; --c-block-fg: #1c3550;
|
|
--c-prop-bg: #e8e0c2; --c-prop-fg: #6b5a25;
|
|
--c-assoc-bg: #d9e3c7; --c-assoc-fg: #3d5421;
|
|
--c-req-bg: #f0d9c2; --c-req-fg: #6b3309;
|
|
}
|
|
|
|
/* Manuscript-only flourishes: drop-cap-ish heading underline */
|
|
.theme-manuscript .t-h1 {
|
|
border-bottom: 1px solid var(--border-strong);
|
|
padding-bottom: 8px;
|
|
font-style: italic;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
.theme-manuscript .t-h2 {
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--accent-strong);
|
|
}
|
|
.theme-manuscript .brand-name { font-style: italic; }
|
|
.theme-manuscript .canvas-title { font-style: italic; font-weight: 500; }
|