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.
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
// Σ inside a softened laurel, themed via CSS variables.
|
|
// Ported from docs/design-source/socrata/project/socrates.jsx (SocratesSigil).
|
|
|
|
interface SigilProps {
|
|
size?: number;
|
|
mood?: "thinking" | "still";
|
|
}
|
|
|
|
export function Sigil({ size = 44, mood = "thinking" }: SigilProps) {
|
|
return (
|
|
<div className="sigil" style={{ width: size, height: size }}>
|
|
<svg viewBox="0 0 64 64" width={size} height={size}>
|
|
<defs>
|
|
<radialGradient id="sigilGlow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stopColor="var(--accent-soft)" stopOpacity="0.55" />
|
|
<stop offset="100%" stopColor="var(--accent-soft)" stopOpacity="0" />
|
|
</radialGradient>
|
|
</defs>
|
|
<circle cx="32" cy="32" r="30" fill="url(#sigilGlow)" />
|
|
<circle cx="32" cy="32" r="22" fill="var(--surface-2)" stroke="var(--accent)" strokeWidth="1.25" />
|
|
{/* Laurel */}
|
|
<path d="M 12 32 Q 18 18 32 14" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.45" />
|
|
<path d="M 52 32 Q 46 46 32 50" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.45" />
|
|
{/* Σ */}
|
|
<text
|
|
x="32"
|
|
y="40"
|
|
textAnchor="middle"
|
|
fontSize="22"
|
|
fontFamily="var(--font-display)"
|
|
fontWeight="600"
|
|
fill="var(--accent)"
|
|
>
|
|
Σ
|
|
</text>
|
|
{mood === "thinking" && (
|
|
<circle cx="50" cy="50" r="3" fill="var(--accent)" className="sigil-pulse" />
|
|
)}
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|