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.
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
// Inline chip referencing a model element.
|
|
// Renders four visual styles via CSS (pill / color / underline / bracket).
|
|
// Ported from docs/design-source/socrata/project/text-canvas.jsx (Chip).
|
|
// M1: static. M2: becomes a TipTap node-view.
|
|
|
|
import type { ChipKind } from "../../lib/fixtures/aristotle";
|
|
|
|
export type MarkupStyle = "pill" | "color" | "underline" | "bracket";
|
|
|
|
const KIND_LABEL: Record<ChipKind, string> = {
|
|
block: "block",
|
|
property: "property",
|
|
association: "assoc",
|
|
requirement: "req",
|
|
};
|
|
|
|
function kindGlyph(kind: ChipKind): string {
|
|
switch (kind) {
|
|
case "block": return "▢";
|
|
case "property": return "·";
|
|
case "association": return "→";
|
|
case "requirement": return "§";
|
|
}
|
|
}
|
|
|
|
interface ChipProps {
|
|
kind: ChipKind;
|
|
id: string;
|
|
label: string;
|
|
markupStyle: MarkupStyle;
|
|
focused?: boolean;
|
|
onHover?: (id: string | null) => void;
|
|
onClick?: (id: string, kind: ChipKind) => void;
|
|
}
|
|
|
|
export function Chip({ kind, id, label, markupStyle, focused, onHover, onClick }: ChipProps) {
|
|
const cls = `chip chip-${kind} chip-style-${markupStyle}${focused ? " chip-focus" : ""}`;
|
|
const handlers = {
|
|
onMouseEnter: () => onHover?.(id),
|
|
onMouseLeave: () => onHover?.(null),
|
|
onClick: () => onClick?.(id, kind),
|
|
};
|
|
|
|
if (markupStyle === "bracket") {
|
|
return (
|
|
<span className={cls} {...handlers}>
|
|
<span className="chip-bracket">[</span>
|
|
<span className="chip-kind">{KIND_LABEL[kind]}:</span>
|
|
<span className="chip-label">{label}</span>
|
|
<span className="chip-bracket">]</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (markupStyle === "underline") {
|
|
return (
|
|
<span className={cls} {...handlers}>
|
|
<span className="chip-glyph">{kindGlyph(kind)}</span>
|
|
<span className="chip-label">{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// pill (default) and color both render as filled chips.
|
|
return (
|
|
<span className={cls} {...handlers}>
|
|
<span className="chip-glyph">{kindGlyph(kind)}</span>
|
|
<span className="chip-label">{label}</span>
|
|
</span>
|
|
);
|
|
}
|