sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: editor improvements and architectural grid prototype

Browse Source 
Multiple feature additions and improvements across the application:

- NextGen Editor: drag handles, smart paste, block actions
- Structured views: Kanban and table layouts for notes
- Architectural Grid: new brainstorming/agent interface prototype
- Flashcards: SM-2 revision algorithm with AI generation
- MCP server: robustness improvements
- Graph/PDF chat: fix click propagation and copy behavior
- Various UI/UX enhancements and bug fixes

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Antigravity
2026-05-27 19:45:15 +00:00
parent 2de66a863d
commit f46654f574
99 changed files with 29948 additions and 919 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
architectural-grid1/src/components/BrainstormView/WaveCanvas.tsx Normal file
View File

@@ -0,0 +1,348 @@
import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
import { BrainstormSession, BrainstormIdea, Note } from '../../types';
interface WaveCanvasProps {
session: BrainstormSession;
ideas: BrainstormIdea[];
onNodeSelect: (id: string) => void;
onPositionUpdate: (id: string, pos: { x: number; y: number }) => void;
onAddChild: (id: string) => void;
onManualSubmit: (title: string, parentId?: string) => void;
onManualCancel: () => void;
editingNodeId: string | null;
selectedNodeId: string | null;
relatedNotes: Note[];
}
export const WaveCanvas: React.FC<WaveCanvasProps> = ({
session,
ideas,
onNodeSelect,
onPositionUpdate,
onAddChild,
onManualSubmit,
onManualCancel,
editingNodeId,
selectedNodeId,
relatedNotes
}) => {
const svgRef = useRef<SVGSVGElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const [inputValue, setInputValue] = React.useState('');
useEffect(() => {
if (editingNodeId && inputRef.current) {
inputRef.current.focus();
}
}, [editingNodeId]);
useEffect(() => {
if (!svgRef.current || !containerRef.current) return;
const width = containerRef.current.clientWidth;
const height = containerRef.current.clientHeight;
const centerX = width / 2;
const centerY = height / 2;
const svg = d3.select(svgRef.current);
svg.selectAll("*").remove();
const g = svg.append("g");
// Zoom behavior
const zoom = d3.zoom<SVGSVGElement, unknown>()
.scaleExtent([0.1, 5])
.on("zoom", (event) => {
g.attr("transform", event.transform);
});
svg.call(zoom);
// Initial transform to center
svg.call(zoom.transform, d3.zoomIdentity.translate(centerX, centerY).scale(0.8));
// Data structures for d3
interface D3Node extends d3.SimulationNodeDatum {
id: string;
type: 'root' | 'idea' | 'note';
wave?: number;
title: string;
color: string;
radius: number;
status?: string;
}
interface D3Link extends d3.SimulationLinkDatum<D3Node> {
source: string | D3Node;
target: string | D3Node;
type: 'wave' | 'context' | 'parent';
}
const nodes: D3Node[] = [];
const links: D3Link[] = [];
// Root node
const rootNode: D3Node = {
id: 'root',
type: 'root',
title: session.seedIdea,
color: '#141414',
radius: 40,
fx: 0,
fy: 0
};
nodes.push(rootNode);
// Idea nodes
const colors = {
1: '#fb923c', // orange
2: '#60a5fa', // blue
3: '#a78bfa' // violet
};
ideas.forEach(idea => {
nodes.push({
id: idea.id,
type: 'idea',
wave: idea.waveNumber,
title: idea.title,
color: colors[idea.waveNumber as 1|2|3] || '#94a3b8',
radius: 28,
status: idea.status,
x: idea.position?.x,
y: idea.position?.y
});
if (idea.parentIdeaId) {
links.push({
source: idea.parentIdeaId,
target: idea.id,
type: 'parent'
});
} else {
links.push({
source: 'root',
target: idea.id,
type: 'wave'
});
}
});
// Radial layout forces
const simulation = d3.forceSimulation<D3Node>(nodes)
.force("link", d3.forceLink<D3Node, D3Link>(links).id(d => d.id).distance(d => {
if (d.type === 'wave') {
const targetNode = nodes.find(n => n.id === (typeof d.target === 'string' ? d.target : (d.target as any).id));
return (targetNode?.wave || 1) * 200;
}
if (d.type === 'parent') return 180;
return 100;
}))
.force("charge", d3.forceManyBody().strength(-800))
.force("radial", d3.forceRadial<D3Node>(d => {
if (d.type === 'root') return 0;
if (d.id.includes('-')) return (d.wave || 1) * 200 + 100; // Deepened ideas push out
return (d.wave || 1) * 200;
}, 0, 0).strength(0.8))
.force("collision", d3.forceCollide<D3Node>().radius(d => d.radius + 30));
// Drawing rings
const ringRadii = [200, 400, 600];
g.selectAll(".ring")
.data(ringRadii)
.enter()
.append("circle")
.attr("class", "ring")
.attr("r", d => d)
.attr("fill", "none")
.attr("stroke", "#e2e8f0")
.attr("stroke-width", 1)
.attr("stroke-dasharray", "4,4")
.style("opacity", 0.5);
// Links
const link = g.append("g")
.selectAll("line")
.data(links)
.enter()
.append("line")
.attr("stroke", d => d.type === 'wave' ? "#cbd5e1" : d.type === 'parent' ? "#fde047" : "#94a3b8")
.attr("stroke-width", d => d.type === 'wave' ? 1.5 : 2)
.attr("stroke-dasharray", d => d.type === 'parent' ? "none" : "4,4");
// Nodes
const node = g.append("g")
.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.style("opacity", d => d.status === 'dismissed' ? 0.4 : 1)
.on("click", (event, d) => {
event.stopPropagation();
if (d.type === 'idea') onNodeSelect(d.id);
})
.on("dblclick", (event, d) => {
event.stopPropagation();
if (d.type === 'idea') {
onNodeSelect(d.id);
onAddChild(d.id);
}
})
.call(d3.drag<SVGGElement, D3Node>()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended) as any);
node.append("circle")
.attr("r", d => d.radius)
.attr("fill", d => d.status === 'converted' ? '#ecfdf5' : (d.type === 'root' ? '#141414' : '#fff'))
.attr("stroke", d => d.status === 'converted' ? '#10b981' : d.color)
.attr("stroke-width", d => d.id === selectedNodeId ? 4 : 2)
.attr("class", "cursor-pointer transition-all hover:scale-110")
.style("filter", d => d.id === selectedNodeId ? `drop-shadow(0 0 12px ${d.color}cc)` : "none");
// Plus icon for selected node
node.filter(d => d.id === selectedNodeId && d.type === 'idea')
.append("circle")
.attr("r", 10)
.attr("cx", 20)
.attr("cy", -20)
.attr("fill", "#141414")
.attr("stroke", "#fff")
.attr("stroke-width", 1)
.attr("class", "cursor-pointer")
.on("click", (event, d) => {
event.stopPropagation();
onAddChild(d.id);
});
node.filter(d => d.id === selectedNodeId && d.type === 'idea')
.append("text")
.attr("x", 20)
.attr("y", -17)
.attr("text-anchor", "middle")
.attr("fill", "#fff")
.attr("class", "text-[14px] font-bold pointer-events-none")
.text("+");
// ForeignObject for inline input
const editGroup = node.filter(d => d.id === editingNodeId && d.type === 'idea')
.append("foreignObject")
.attr("width", 200)
.attr("height", 80)
.attr("x", -100)
.attr("y", 40)
.append("xhtml:div")
.attr("class", "bg-paper dark:bg-black p-2 border border-border rounded-xl shadow-2xl");
editGroup.append("input")
.attr("type", "text")
.attr("placeholder", "Nouvelle idée...")
.attr("class", "w-full bg-white dark:bg-[#1A1A1A] border-none outline-none text-xs font-bold uppercase tracking-tight p-2 rounded-lg")
.on("keydown", (event) => {
if (event.key === 'Enter') {
onManualSubmit(event.target.value, editingNodeId!);
event.target.value = '';
}
if (event.key === 'Escape') {
onManualCancel();
}
})
.on("blur", () => {
// Optional: onManualCancel();
});
// Special case for root addition input (if editingNodeId is 'new')
if (editingNodeId === 'new') {
g.append("foreignObject")
.attr("width", 200)
.attr("height", 80)
.attr("x", -100)
.attr("y", -120) // Floating above center
.append("xhtml:div")
.attr("class", "bg-paper dark:bg-black p-2 border border-border rounded-xl shadow-2xl animate-bounce")
.append("input")
.attr("type", "text")
.attr("autoFocus", "true")
.attr("placeholder", "Idée libre...")
.attr("class", "w-full bg-white dark:bg-[#1A1A1A] border-none outline-none text-xs font-bold uppercase tracking-tight p-2 rounded-lg")
.on("keydown", (event) => {
if (event.key === 'Enter') {
onManualSubmit(event.target.value);
event.target.value = '';
}
if (event.key === 'Escape') onManualCancel();
});
}
// State indicators (converted)
node.filter(d => d.status === 'converted')
.append("path")
.attr("d", d3.symbol().type(d3.symbolCircle).size(150))
.attr("fill", "#10b981");
// Icons/Text in nodes
node.append("text")
.attr("dy", d => d.type === 'root' ? ".35em" : d.radius + 20)
.attr("text-anchor", "middle")
.attr("fill", d => d.type === 'root' ? "#fff" : (d.status === 'dismissed' ? "#94a3b8" : "#141414"))
.attr("class", d => d.type === 'root' ? "text-[10px] font-bold pointer-events-none tracking-widest" : "text-[11px] font-bold uppercase tracking-tight pointer-events-none")
.text(d => d.type === 'root' ? "SEED" : d.title.length > 18 ? d.title.substring(0, 18) + "..." : d.title);
if (rootNode) {
g.append("text")
.attr("text-anchor", "middle")
.attr("dy", 80)
.attr("class", "text-2xl font-serif italic fill-ink dark:fill-dark-ink pointer-events-none shadow-sm")
.text(session.seedIdea);
}
simulation.on("tick", () => {
link
.attr("x1", d => (d.source as any).x)
.attr("y1", d => (d.source as any).y)
.attr("x2", d => (d.target as any).x)
.attr("y2", d => (d.target as any).y);
node
.attr("transform", d => `translate(${d.x},${d.y})`);
});
function dragstarted(event: any, d: D3Node) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event: any, d: D3Node) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event: any, d: D3Node) {
if (!event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
if (d.type === 'idea') {
onPositionUpdate(d.id, { x: event.x, y: event.y });
}
}
return () => {
simulation.stop();
};
}, [session, ideas, selectedNodeId, editingNodeId, onNodeSelect]);
return (
<div ref={containerRef} className="w-full h-full relative cursor-grab active:cursor-grabbing">
<svg ref={svgRef} className="w-full h-full" />
<div className="absolute top-6 left-6 pointer-events-none">
<p className="text-[10px] font-bold tracking-[0.3em] uppercase text-concrete opacity-40">Spatial Exploration Mode</p>
</div>
</div>
);
};