feat: implement Convex-synced canvas foundation
This commit is contained in:
Matthias
794
.docs/Canvas_Implementation_Guide.md
Normal file
794
.docs/Canvas_Implementation_Guide.md
Normal file
@@ -0,0 +1,794 @@
|
||||
# 🍋 LemonSpace — Canvas Implementation Guide
|
||||
|
||||
**Schritte 1–3: Basis-Canvas mit Convex-Sync**
|
||||
|
||||
---
|
||||
|
||||
## Voraussetzungen
|
||||
|
||||
Das Convex-Backend ist deployed und folgende Funktionen existieren bereits:
|
||||
|
||||
- `api.nodes.list` (Query, benötigt `canvasId`)
|
||||
- `api.nodes.create` (Mutation)
|
||||
- `api.nodes.move` (Mutation, benötigt `nodeId` + `position`)
|
||||
- `api.nodes.resize` (Mutation)
|
||||
- `api.nodes.batchMove` (Mutation)
|
||||
- `api.nodes.updateData` (Mutation)
|
||||
- `api.nodes.updateStatus` (Mutation)
|
||||
- `api.nodes.remove` (Mutation)
|
||||
- `api.edges.list` (Query, benötigt `canvasId`)
|
||||
- `api.edges.create` (Mutation)
|
||||
- `api.edges.remove` (Mutation)
|
||||
- `api.canvases.list`, `api.canvases.get`, `api.canvases.create`
|
||||
|
||||
Auth via Better Auth + `@convex-dev/better-auth` ist funktionsfähig.
|
||||
|
||||
---
|
||||
|
||||
## Schritt 0 — Package-Installation
|
||||
|
||||
```bash
|
||||
pnpm add @xyflow/react
|
||||
```
|
||||
|
||||
> **dnd-kit** wird erst in einem späteren Schritt benötigt (Sidebar → Canvas Drag). Für Schritt 1–3 reicht @xyflow/react allein — das bringt Drag & Drop von bestehenden Nodes bereits mit.
|
||||
|
||||
---
|
||||
|
||||
## Schritt 1 — Dateistruktur anlegen
|
||||
|
||||
```
|
||||
components/
|
||||
canvas/
|
||||
canvas.tsx ← Haupt-Canvas (ReactFlow + Convex-Sync)
|
||||
canvas-toolbar.tsx ← Toolbar oben (Node hinzufügen, Zoom)
|
||||
node-types.ts ← nodeTypes-Map (AUSSERHALB jeder Komponente!)
|
||||
nodes/
|
||||
image-node.tsx ← Bild-Node (Upload/URL)
|
||||
text-node.tsx ← Freitext (Markdown)
|
||||
prompt-node.tsx ← Prompt für KI-Nodes
|
||||
ai-image-node.tsx ← KI-Bild-Output
|
||||
group-node.tsx ← Container/Gruppe
|
||||
frame-node.tsx ← Artboard/Export-Boundary
|
||||
note-node.tsx ← Annotation
|
||||
compare-node.tsx ← Slider-Vergleich
|
||||
base-node-wrapper.tsx ← Shared Wrapper (Border, Selection-Ring, Status)
|
||||
|
||||
app/
|
||||
(app)/
|
||||
canvas/
|
||||
[canvasId]/
|
||||
page.tsx ← Canvas-Page (Server Component, Auth-Check)
|
||||
|
||||
lib/
|
||||
canvas-utils.ts ← Hilfsfunktionen (Convex → RF Mapping)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Schritt 2 — Custom Node Components
|
||||
|
||||
### 2.1 Base Node Wrapper
|
||||
|
||||
Jeder Node teilt sich visuelle Grundeigenschaften: Border, Selection-Ring, Status-Anzeige. Das kapseln wir in einem Wrapper.
|
||||
|
||||
```tsx
|
||||
// components/canvas/nodes/base-node-wrapper.tsx
|
||||
'use client';
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
interface BaseNodeWrapperProps {
|
||||
selected?: boolean;
|
||||
status?: 'idle' | 'executing' | 'done' | 'error';
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function BaseNodeWrapper({
|
||||
selected,
|
||||
status = 'idle',
|
||||
children,
|
||||
className = '',
|
||||
}: BaseNodeWrapperProps) {
|
||||
const statusStyles = {
|
||||
idle: '',
|
||||
executing: 'animate-pulse border-yellow-400',
|
||||
done: 'border-green-500',
|
||||
error: 'border-red-500',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
rounded-xl border bg-card shadow-sm transition-shadow
|
||||
${selected ? 'ring-2 ring-primary shadow-md' : ''}
|
||||
${statusStyles[status]}
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2.2 Note Node (einfachster Node — guter Startpunkt)
|
||||
|
||||
```tsx
|
||||
// components/canvas/nodes/note-node.tsx
|
||||
'use client';
|
||||
|
||||
import { type NodeProps, type Node } from '@xyflow/react';
|
||||
import BaseNodeWrapper from './base-node-wrapper';
|
||||
|
||||
export type NoteNodeData = {
|
||||
content?: string;
|
||||
};
|
||||
|
||||
export type NoteNode = Node<NoteNodeData, 'note'>;
|
||||
|
||||
export default function NoteNode({ data, selected }: NodeProps<NoteNode>) {
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="w-52 p-3">
|
||||
<div className="text-xs font-medium text-muted-foreground mb-1">📌 Notiz</div>
|
||||
<p className="text-sm whitespace-pre-wrap">
|
||||
{data.content || 'Leere Notiz'}
|
||||
</p>
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2.3 Image Node
|
||||
|
||||
```tsx
|
||||
// components/canvas/nodes/image-node.tsx
|
||||
'use client';
|
||||
|
||||
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
|
||||
import BaseNodeWrapper from './base-node-wrapper';
|
||||
|
||||
export type ImageNodeData = {
|
||||
storageId?: string;
|
||||
url?: string;
|
||||
filename?: string;
|
||||
};
|
||||
|
||||
export type ImageNode = Node<ImageNodeData, 'image'>;
|
||||
|
||||
export default function ImageNode({ data, selected }: NodeProps<ImageNode>) {
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="p-2">
|
||||
<div className="text-xs font-medium text-muted-foreground mb-1">🖼️ Bild</div>
|
||||
{data.url ? (
|
||||
<img
|
||||
src={data.url}
|
||||
alt={data.filename ?? 'Bild'}
|
||||
className="rounded-lg object-cover max-w-[280px]"
|
||||
draggable={false}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg border-2 border-dashed text-sm text-muted-foreground">
|
||||
Bild hochladen oder URL einfügen
|
||||
</div>
|
||||
)}
|
||||
<Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-primary !border-2 !border-background" />
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2.4 Text Node
|
||||
|
||||
```tsx
|
||||
// components/canvas/nodes/text-node.tsx
|
||||
'use client';
|
||||
|
||||
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
|
||||
import BaseNodeWrapper from './base-node-wrapper';
|
||||
|
||||
export type TextNodeData = {
|
||||
content?: string;
|
||||
};
|
||||
|
||||
export type TextNode = Node<TextNodeData, 'text'>;
|
||||
|
||||
export default function TextNode({ data, selected }: NodeProps<TextNode>) {
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="w-64 p-3">
|
||||
<div className="text-xs font-medium text-muted-foreground mb-1">📝 Text</div>
|
||||
<p className="text-sm whitespace-pre-wrap min-h-[2rem]">
|
||||
{data.content || 'Text eingeben…'}
|
||||
</p>
|
||||
<Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-primary !border-2 !border-background" />
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2.5 Prompt Node
|
||||
|
||||
```tsx
|
||||
// components/canvas/nodes/prompt-node.tsx
|
||||
'use client';
|
||||
|
||||
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
|
||||
import BaseNodeWrapper from './base-node-wrapper';
|
||||
|
||||
export type PromptNodeData = {
|
||||
prompt?: string;
|
||||
model?: string;
|
||||
};
|
||||
|
||||
export type PromptNode = Node<PromptNodeData, 'prompt'>;
|
||||
|
||||
export default function PromptNode({ data, selected }: NodeProps<PromptNode>) {
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="w-72 p-3 border-purple-500/30">
|
||||
<div className="text-xs font-medium text-purple-500 mb-1">✨ Prompt</div>
|
||||
<p className="text-sm whitespace-pre-wrap min-h-[2rem]">
|
||||
{data.prompt || 'Prompt eingeben…'}
|
||||
</p>
|
||||
{data.model && (
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
Modell: {data.model}
|
||||
</div>
|
||||
)}
|
||||
{/* Nur Source — verbindet sich ausschließlich mit KI-Nodes */}
|
||||
<Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-purple-500 !border-2 !border-background" />
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2.6 AI Image Node
|
||||
|
||||
```tsx
|
||||
// components/canvas/nodes/ai-image-node.tsx
|
||||
'use client';
|
||||
|
||||
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
|
||||
import BaseNodeWrapper from './base-node-wrapper';
|
||||
|
||||
export type AiImageNodeData = {
|
||||
url?: string;
|
||||
prompt?: string;
|
||||
model?: string;
|
||||
status?: 'idle' | 'executing' | 'done' | 'error';
|
||||
error?: string;
|
||||
};
|
||||
|
||||
export type AiImageNode = Node<AiImageNodeData, 'ai-image'>;
|
||||
|
||||
export default function AiImageNode({ data, selected }: NodeProps<AiImageNode>) {
|
||||
const status = data.status ?? 'idle';
|
||||
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} status={status} className="p-2">
|
||||
<div className="text-xs font-medium text-emerald-500 mb-1">🤖 KI-Bild</div>
|
||||
|
||||
{status === 'executing' && (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg bg-muted">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === 'done' && data.url && (
|
||||
<img
|
||||
src={data.url}
|
||||
alt={data.prompt ?? 'KI-generiertes Bild'}
|
||||
className="rounded-lg object-cover max-w-[280px]"
|
||||
draggable={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
{status === 'error' && (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg bg-red-50 dark:bg-red-950/20 text-sm text-red-600">
|
||||
{data.error ?? 'Fehler bei der Generierung'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === 'idle' && (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg border-2 border-dashed text-sm text-muted-foreground">
|
||||
Prompt verbinden
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.prompt && status === 'done' && (
|
||||
<p className="mt-1 text-xs text-muted-foreground truncate max-w-[280px]">
|
||||
{data.prompt}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Target: Empfängt Input von Prompt/Bild */}
|
||||
<Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-emerald-500 !border-2 !border-background" />
|
||||
{/* Source: Output weitergeben (an Compare, Frame, etc.) */}
|
||||
<Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-primary !border-2 !border-background" />
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2.7 Platzhalter für Group, Frame, Compare
|
||||
|
||||
Diese sind komplexer (Group braucht `expandParent`, Frame braucht Resize, Compare braucht Slider). Für Schritt 1–3 reichen einfache Platzhalter:
|
||||
|
||||
```tsx
|
||||
// components/canvas/nodes/group-node.tsx
|
||||
'use client';
|
||||
import { type NodeProps, type Node } from '@xyflow/react';
|
||||
import BaseNodeWrapper from './base-node-wrapper';
|
||||
|
||||
export type GroupNode = Node<{ label?: string }, 'group'>;
|
||||
|
||||
export default function GroupNode({ data, selected }: NodeProps<GroupNode>) {
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="min-w-[200px] min-h-[150px] p-3 border-dashed">
|
||||
<div className="text-xs font-medium text-muted-foreground">📁 {data.label || 'Gruppe'}</div>
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
```tsx
|
||||
// components/canvas/nodes/frame-node.tsx
|
||||
'use client';
|
||||
import { type NodeProps, type Node } from '@xyflow/react';
|
||||
import BaseNodeWrapper from './base-node-wrapper';
|
||||
|
||||
export type FrameNode = Node<{ label?: string; resolution?: string }, 'frame'>;
|
||||
|
||||
export default function FrameNode({ data, selected }: NodeProps<FrameNode>) {
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="min-w-[300px] min-h-[200px] p-3 border-blue-500/30">
|
||||
<div className="text-xs font-medium text-blue-500">
|
||||
🖥️ {data.label || 'Frame'} {data.resolution && `(${data.resolution})`}
|
||||
</div>
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
```tsx
|
||||
// components/canvas/nodes/compare-node.tsx
|
||||
'use client';
|
||||
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
|
||||
import BaseNodeWrapper from './base-node-wrapper';
|
||||
|
||||
export type CompareNode = Node<{ leftUrl?: string; rightUrl?: string }, 'compare'>;
|
||||
|
||||
export default function CompareNode({ data, selected }: NodeProps<CompareNode>) {
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="w-[500px] p-2">
|
||||
<div className="text-xs font-medium text-muted-foreground mb-1">🔀 Vergleich</div>
|
||||
<div className="flex gap-2 h-40">
|
||||
<div className="flex-1 rounded bg-muted flex items-center justify-center text-xs text-muted-foreground">
|
||||
{data.leftUrl ? <img src={data.leftUrl} className="rounded object-cover h-full w-full" /> : 'Bild A'}
|
||||
</div>
|
||||
<div className="flex-1 rounded bg-muted flex items-center justify-center text-xs text-muted-foreground">
|
||||
{data.rightUrl ? <img src={data.rightUrl} className="rounded object-cover h-full w-full" /> : 'Bild B'}
|
||||
</div>
|
||||
</div>
|
||||
<Handle type="target" position={Position.Left} id="left" className="!h-3 !w-3 !bg-primary !border-2 !border-background" style={{ top: '40%' }} />
|
||||
<Handle type="target" position={Position.Left} id="right" className="!h-3 !w-3 !bg-primary !border-2 !border-background" style={{ top: '60%' }} />
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Schritt 3 — nodeTypes registrieren
|
||||
|
||||
**Kritisch:** Diese Map muss AUSSERHALB jeder React-Komponente definiert werden. Wenn sie innerhalb einer Komponente liegt, erstellt React bei jedem Render ein neues Objekt → React Flow re-rendert alle Nodes.
|
||||
|
||||
```tsx
|
||||
// components/canvas/node-types.ts
|
||||
import ImageNode from './nodes/image-node';
|
||||
import TextNode from './nodes/text-node';
|
||||
import PromptNode from './nodes/prompt-node';
|
||||
import AiImageNode from './nodes/ai-image-node';
|
||||
import GroupNode from './nodes/group-node';
|
||||
import FrameNode from './nodes/frame-node';
|
||||
import NoteNode from './nodes/note-node';
|
||||
import CompareNode from './nodes/compare-node';
|
||||
|
||||
export const nodeTypes = {
|
||||
image: ImageNode,
|
||||
text: TextNode,
|
||||
prompt: PromptNode,
|
||||
'ai-image': AiImageNode,
|
||||
group: GroupNode,
|
||||
frame: FrameNode,
|
||||
note: NoteNode,
|
||||
compare: CompareNode,
|
||||
} as const;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Schritt 4 — Convex ↔ React Flow Mapping
|
||||
|
||||
Das Herzstück: Convex-Daten in React Flow-Format transformieren und Änderungen zurückschreiben.
|
||||
|
||||
```tsx
|
||||
// lib/canvas-utils.ts
|
||||
import type { Node as RFNode, Edge as RFEdge } from '@xyflow/react';
|
||||
import type { Doc } from '@/convex/_generated/dataModel';
|
||||
|
||||
/**
|
||||
* Transformiert einen Convex-Node in das React Flow-Format.
|
||||
*/
|
||||
export function convexNodeToRF(node: Doc<'nodes'>): RFNode {
|
||||
return {
|
||||
id: node._id,
|
||||
type: node.type,
|
||||
position: node.position,
|
||||
data: node.data ?? {},
|
||||
// parentId: node.parentNodeId ?? undefined, // ← für Group-Nodes, aktivieren wenn nötig
|
||||
style: node.size
|
||||
? { width: node.size.width, height: node.size.height }
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Transformiert einen Convex-Edge in das React Flow-Format.
|
||||
*/
|
||||
export function convexEdgeToRF(edge: Doc<'edges'>): RFEdge {
|
||||
return {
|
||||
id: edge._id,
|
||||
source: edge.sourceNodeId,
|
||||
target: edge.targetNodeId,
|
||||
// sourceHandle und targetHandle können später ergänzt werden
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Schritt 5 — Haupt-Canvas-Komponente
|
||||
|
||||
Die zentrale Architekturentscheidung: **Lokaler State für flüssiges Interagieren, Convex als Sync-Layer.**
|
||||
|
||||
React Flow braucht `onNodesChange` für jede Interaktion (Drag, Select, Remove). Wenn wir jede Drag-Bewegung direkt an Convex senden würden, wäre das zu viel Traffic und der Canvas würde laggen. Stattdessen:
|
||||
|
||||
1. Convex-Daten kommen rein → werden in lokalen State geschrieben
|
||||
2. Lokaler State wird von React Flow gesteuert (Drag, Select, etc.)
|
||||
3. Bei `onNodeDragStop` wird die finale Position an Convex committed
|
||||
4. Convex-Subscription aktualisiert den lokalen State bei Remote-Änderungen
|
||||
|
||||
```tsx
|
||||
// components/canvas/canvas.tsx
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
ReactFlow,
|
||||
Background,
|
||||
Controls,
|
||||
MiniMap,
|
||||
applyNodeChanges,
|
||||
applyEdgeChanges,
|
||||
type Node as RFNode,
|
||||
type Edge as RFEdge,
|
||||
type NodeChange,
|
||||
type EdgeChange,
|
||||
type Connection,
|
||||
type ReactFlowInstance,
|
||||
BackgroundVariant,
|
||||
} from '@xyflow/react';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
|
||||
import { useMutation, useQuery } from 'convex/react';
|
||||
import { api } from '@/convex/_generated/api';
|
||||
import type { Id } from '@/convex/_generated/dataModel';
|
||||
|
||||
import { nodeTypes } from './node-types';
|
||||
import { convexNodeToRF, convexEdgeToRF } from '@/lib/canvas-utils';
|
||||
|
||||
interface CanvasProps {
|
||||
canvasId: Id<'canvases'>;
|
||||
}
|
||||
|
||||
export default function Canvas({ canvasId }: CanvasProps) {
|
||||
// ─── Convex Realtime Queries ───
|
||||
const convexNodes = useQuery(api.nodes.list, { canvasId });
|
||||
const convexEdges = useQuery(api.edges.list, { canvasId });
|
||||
|
||||
// ─── Convex Mutations ───
|
||||
const moveNode = useMutation(api.nodes.move);
|
||||
const createNode = useMutation(api.nodes.create);
|
||||
const removeNode = useMutation(api.nodes.remove);
|
||||
const createEdge = useMutation(api.edges.create);
|
||||
const removeEdge = useMutation(api.edges.remove);
|
||||
|
||||
// ─── Lokaler State (für flüssiges Dragging) ───
|
||||
const [nodes, setNodes] = useState<RFNode[]>([]);
|
||||
const [edges, setEdges] = useState<RFEdge[]>([]);
|
||||
|
||||
// Track ob gerade gedraggt wird — dann kein Convex-Override
|
||||
const isDragging = useRef(false);
|
||||
|
||||
// React Flow Instance Ref (für screenToFlowPosition, etc.)
|
||||
const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
|
||||
|
||||
// ─── Convex → Lokaler State Sync ───
|
||||
useEffect(() => {
|
||||
if (!convexNodes) return;
|
||||
// Nur aktualisieren wenn NICHT gerade gedraggt wird
|
||||
if (!isDragging.current) {
|
||||
setNodes(convexNodes.map(convexNodeToRF));
|
||||
}
|
||||
}, [convexNodes]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!convexEdges) return;
|
||||
setEdges(convexEdges.map(convexEdgeToRF));
|
||||
}, [convexEdges]);
|
||||
|
||||
// ─── Node Changes (Drag, Select, Remove) ───
|
||||
const onNodesChange = useCallback((changes: NodeChange[]) => {
|
||||
setNodes((nds) => applyNodeChanges(changes, nds));
|
||||
}, []);
|
||||
|
||||
const onEdgesChange = useCallback((changes: EdgeChange[]) => {
|
||||
setEdges((eds) => applyEdgeChanges(changes, eds));
|
||||
}, []);
|
||||
|
||||
// ─── Drag Start → Lock Convex-Sync ───
|
||||
const onNodeDragStart = useCallback(() => {
|
||||
isDragging.current = true;
|
||||
}, []);
|
||||
|
||||
// ─── Drag Stop → Commit zu Convex ───
|
||||
const onNodeDragStop = useCallback(
|
||||
(_: React.MouseEvent, node: RFNode) => {
|
||||
isDragging.current = false;
|
||||
moveNode({
|
||||
nodeId: node.id as Id<'nodes'>,
|
||||
position: { x: node.position.x, y: node.position.y },
|
||||
});
|
||||
},
|
||||
[moveNode]
|
||||
);
|
||||
|
||||
// ─── Neue Verbindung → Convex Edge ───
|
||||
const onConnect = useCallback(
|
||||
(connection: Connection) => {
|
||||
if (connection.source && connection.target) {
|
||||
createEdge({
|
||||
canvasId,
|
||||
sourceNodeId: connection.source as Id<'nodes'>,
|
||||
targetNodeId: connection.target as Id<'nodes'>,
|
||||
});
|
||||
}
|
||||
},
|
||||
[createEdge, canvasId]
|
||||
);
|
||||
|
||||
// ─── Node löschen → Convex ───
|
||||
const onNodesDelete = useCallback(
|
||||
(deletedNodes: RFNode[]) => {
|
||||
for (const node of deletedNodes) {
|
||||
removeNode({ nodeId: node.id as Id<'nodes'> });
|
||||
}
|
||||
},
|
||||
[removeNode]
|
||||
);
|
||||
|
||||
// ─── Edge löschen → Convex ───
|
||||
const onEdgesDelete = useCallback(
|
||||
(deletedEdges: RFEdge[]) => {
|
||||
for (const edge of deletedEdges) {
|
||||
removeEdge({ edgeId: edge.id as Id<'edges'> });
|
||||
}
|
||||
},
|
||||
[removeEdge]
|
||||
);
|
||||
|
||||
// ─── Loading State ───
|
||||
if (convexNodes === undefined || convexEdges === undefined) {
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center bg-background">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<span className="text-sm text-muted-foreground">Canvas lädt…</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
nodeTypes={nodeTypes}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onNodeDragStart={onNodeDragStart}
|
||||
onNodeDragStop={onNodeDragStop}
|
||||
onConnect={onConnect}
|
||||
onNodesDelete={onNodesDelete}
|
||||
onEdgesDelete={onEdgesDelete}
|
||||
onInit={setRfInstance}
|
||||
fitView
|
||||
snapToGrid
|
||||
snapGrid={[16, 16]}
|
||||
deleteKeyCode={['Backspace', 'Delete']}
|
||||
multiSelectionKeyCode="Shift"
|
||||
proOptions={{ hideAttribution: true }}
|
||||
className="bg-background"
|
||||
>
|
||||
<Background variant={BackgroundVariant.Dots} gap={16} size={1} />
|
||||
<Controls className="!bg-card !border !shadow-sm !rounded-lg" />
|
||||
<MiniMap
|
||||
className="!bg-card !border !shadow-sm !rounded-lg"
|
||||
nodeColor="#6366f1"
|
||||
maskColor="rgba(0, 0, 0, 0.1)"
|
||||
/>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Schritt 6 — Canvas Toolbar
|
||||
|
||||
Eine einfache Toolbar zum Anlegen neuer Nodes. In Phase 1 ist das der einfachste Weg, Nodes zu erstellen (Sidebar + Drag kommt danach).
|
||||
|
||||
```tsx
|
||||
// components/canvas/canvas-toolbar.tsx
|
||||
'use client';
|
||||
|
||||
import { useMutation } from 'convex/react';
|
||||
import { api } from '@/convex/_generated/api';
|
||||
import type { Id } from '@/convex/_generated/dataModel';
|
||||
|
||||
const nodeTemplates = [
|
||||
{ type: 'image', label: '🖼️ Bild', defaultData: {} },
|
||||
{ type: 'text', label: '📝 Text', defaultData: { content: '' } },
|
||||
{ type: 'prompt', label: '✨ Prompt', defaultData: { prompt: '' } },
|
||||
{ type: 'note', label: '📌 Notiz', defaultData: { content: '' } },
|
||||
{ type: 'frame', label: '🖥️ Frame', defaultData: { label: 'Untitled', resolution: '1080x1080' } },
|
||||
] as const;
|
||||
|
||||
interface CanvasToolbarProps {
|
||||
canvasId: Id<'canvases'>;
|
||||
}
|
||||
|
||||
export default function CanvasToolbar({ canvasId }: CanvasToolbarProps) {
|
||||
const createNode = useMutation(api.nodes.create);
|
||||
|
||||
const handleAddNode = async (type: string, data: Record<string, any>) => {
|
||||
// Platziere neue Nodes leicht versetzt, damit sie nicht übereinander liegen
|
||||
const offset = Math.random() * 200;
|
||||
await createNode({
|
||||
canvasId,
|
||||
type,
|
||||
position: { x: 100 + offset, y: 100 + offset },
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1 rounded-xl border bg-card/90 p-1.5 shadow-lg backdrop-blur-sm">
|
||||
{nodeTemplates.map((t) => (
|
||||
<button
|
||||
key={t.type}
|
||||
onClick={() => handleAddNode(t.type, t.defaultData)}
|
||||
className="rounded-lg px-3 py-1.5 text-sm hover:bg-accent transition-colors"
|
||||
title={`${t.label} hinzufügen`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Schritt 7 — Canvas Page (Next.js App Router)
|
||||
|
||||
```tsx
|
||||
// app/(app)/canvas/[canvasId]/page.tsx
|
||||
import Canvas from '@/components/canvas/canvas';
|
||||
import CanvasToolbar from '@/components/canvas/canvas-toolbar';
|
||||
import type { Id } from '@/convex/_generated/dataModel';
|
||||
|
||||
export default async function CanvasPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ canvasId: string }>;
|
||||
}) {
|
||||
const { canvasId } = await params;
|
||||
const typedCanvasId = canvasId as Id<'canvases'>;
|
||||
|
||||
return (
|
||||
<div className="relative h-screen w-screen overflow-hidden">
|
||||
<CanvasToolbar canvasId={typedCanvasId} />
|
||||
<Canvas canvasId={typedCanvasId} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Schritt 8 — CSS Import nicht vergessen!
|
||||
|
||||
@xyflow/react braucht sein eigenes CSS. Importiere es entweder in der Canvas-Komponente (wie oben) oder global in `app/globals.css`:
|
||||
|
||||
```css
|
||||
/* app/globals.css — NACH den Tailwind-Imports */
|
||||
@import '@xyflow/react/dist/style.css';
|
||||
```
|
||||
|
||||
> **Tailwind v4 Hinweis:** Falls die React Flow Styles von Tailwinds Reset überschrieben werden, importiere sie NACH dem Tailwind-Import.
|
||||
|
||||
---
|
||||
|
||||
## Testing-Reihenfolge
|
||||
|
||||
Nachdem du alle Dateien erstellt hast, teste in dieser Reihenfolge:
|
||||
|
||||
### Test 1: Canvas rendert
|
||||
- Navigiere zu `/canvas/<eine-canvas-id>` (du brauchst eine existierende Canvas-ID aus Convex)
|
||||
- Erwartung: Leerer Canvas mit Dot-Background, Controls unten links, MiniMap unten rechts
|
||||
- Falls 404: Prüfe ob die Route `app/(app)/canvas/[canvasId]/page.tsx` korrekt liegt
|
||||
|
||||
### Test 2: Node hinzufügen
|
||||
- Klicke auf "📌 Notiz" in der Toolbar
|
||||
- Erwartung: Note-Node erscheint auf dem Canvas
|
||||
- Prüfe im Convex Dashboard: neuer Eintrag in der `nodes`-Tabelle
|
||||
|
||||
### Test 3: Node verschieben
|
||||
- Ziehe den Node an eine neue Position, lasse los
|
||||
- Erwartung: Node bleibt an der neuen Position
|
||||
- Prüfe im Convex Dashboard: `position.x` und `position.y` haben sich aktualisiert
|
||||
|
||||
### Test 4: Verbindung erstellen
|
||||
- Erstelle einen Prompt-Node und einen (leeren) AI-Image-Node
|
||||
- Ziehe vom Source-Handle (rechts am Prompt) zum Target-Handle (links am AI-Image)
|
||||
- Erwartung: Edge erscheint als Linie zwischen den Nodes
|
||||
- Prüfe im Convex Dashboard: neuer Eintrag in der `edges`-Tabelle
|
||||
|
||||
### Test 5: Node löschen
|
||||
- Selektiere einen Node (Klick), drücke `Delete` oder `Backspace`
|
||||
- Erwartung: Node verschwindet, zugehörige Edges werden ebenfalls entfernt
|
||||
- Prüfe im Convex Dashboard: Node und Edges sind gelöscht
|
||||
|
||||
---
|
||||
|
||||
## Bekannte Fallstricke
|
||||
|
||||
### 1. `nodeTypes` innerhalb der Komponente definiert
|
||||
→ React Flow re-rendert ALLE Nodes bei jedem State-Update. Die Map MUSS in einer eigenen Datei liegen.
|
||||
|
||||
### 2. React Flow CSS fehlt
|
||||
→ Nodes sind unsichtbar oder falsch positioniert. Import von `@xyflow/react/dist/style.css` ist Pflicht.
|
||||
|
||||
### 3. Convex-Sync während Drag
|
||||
→ Wenn Convex einen neuen Wert pusht während der User draggt, springt der Node zur alten Position zurück. Die `isDragging`-Ref verhindert das.
|
||||
|
||||
### 4. Handle-Styling
|
||||
→ Die Standard-Handles von React Flow sind winzig und dunkel. Die `!`-Klassen in Tailwind erzwingen Custom-Styling über die React Flow Defaults.
|
||||
|
||||
### 5. Batch-Drag (mehrere Nodes selektiert)
|
||||
→ `onNodeDragStop` feuert nur für den primär gedraggten Node. Für Batch-Moves nutze `onSelectionDragStop` oder `batchMove` Mutation.
|
||||
|
||||
---
|
||||
|
||||
## Nächste Schritte (nach Schritt 1–3)
|
||||
|
||||
- **Schritt 4:** Sidebar mit Node-Palette + dnd-kit (Drag von Sidebar auf Canvas)
|
||||
- **Schritt 5:** Inline-Editing (Text direkt im Node bearbeiten → `updateData` Mutation)
|
||||
- **Schritt 6:** Bild-Upload (Convex File Storage + Image-Node)
|
||||
- **Schritt 7:** OpenRouter-Integration (Prompt → KI-Bild-Generierung)
|
||||
- **Schritt 8:** Node-Status-Modell visuell ausbauen (Shimmer, Progress, Error)
|
||||
639
.docs/lemonspace_wireframes.html
Normal file
639
.docs/lemonspace_wireframes.html
Normal file
@@ -0,0 +1,639 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LemonSpace — Wireframes v1</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--color-background-primary: #ffffff;
|
||||
--color-background-secondary: #f5f5f3;
|
||||
--color-background-tertiary: #ebebea;
|
||||
--color-background-info: #e6f1fb;
|
||||
--color-background-success: #eaf3de;
|
||||
--color-background-warning: #faeeda;
|
||||
--color-background-danger: #fcebeb;
|
||||
--color-text-primary: #1a1a18;
|
||||
--color-text-secondary: #6b6b68;
|
||||
--color-text-info: #185fa5;
|
||||
--color-text-success: #3b6d11;
|
||||
--color-text-warning: #854f0b;
|
||||
--color-text-danger: #a32d2d;
|
||||
--color-border-tertiary: rgba(0,0,0,0.12);
|
||||
--color-border-secondary: rgba(0,0,0,0.22);
|
||||
--color-border-info: rgba(24,95,165,0.4);
|
||||
--color-border-success: rgba(59,109,17,0.4);
|
||||
--color-border-warning: rgba(133,79,11,0.4);
|
||||
--color-border-danger: rgba(163,45,45,0.4);
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--border-radius-md: 8px;
|
||||
--border-radius-lg: 12px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background-primary: #1e1e1c;
|
||||
--color-background-secondary: #2a2a28;
|
||||
--color-background-tertiary: #333331;
|
||||
--color-background-info: #042c53;
|
||||
--color-background-success: #173404;
|
||||
--color-background-warning: #412402;
|
||||
--color-background-danger: #501313;
|
||||
--color-text-primary: #f0efe8;
|
||||
--color-text-secondary: #9b9b96;
|
||||
--color-text-info: #85b7eb;
|
||||
--color-text-success: #97c459;
|
||||
--color-text-warning: #ef9f27;
|
||||
--color-text-danger: #f09595;
|
||||
--color-border-tertiary: rgba(255,255,255,0.1);
|
||||
--color-border-secondary: rgba(255,255,255,0.2);
|
||||
--color-border-info: rgba(133,183,235,0.35);
|
||||
--color-border-success: rgba(151,196,89,0.35);
|
||||
--color-border-warning: rgba(239,159,39,0.35);
|
||||
--color-border-danger: rgba(240,149,149,0.35);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background: var(--color-background-tertiary);
|
||||
color: var(--color-text-primary);
|
||||
padding: 24px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-header h1 { font-size: 18px; font-weight: 500; }
|
||||
.page-header span { font-size: 12px; color: var(--color-text-secondary); }
|
||||
|
||||
.nav {
|
||||
display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
|
||||
}
|
||||
.nav-btn {
|
||||
padding: 5px 14px; font-size: 12px; border-radius: var(--border-radius-md);
|
||||
border: 0.5px solid var(--color-border-secondary);
|
||||
background: var(--color-background-primary);
|
||||
color: var(--color-text-secondary); cursor: pointer;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.nav-btn.sel {
|
||||
background: var(--color-background-info);
|
||||
color: var(--color-text-info);
|
||||
border-color: transparent; font-weight: 500;
|
||||
}
|
||||
|
||||
.wf { display: none; }
|
||||
.wf.active { display: block; }
|
||||
|
||||
.screen-wrap {
|
||||
border: 0.5px solid var(--color-border-tertiary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: var(--color-background-primary);
|
||||
border-bottom: 0.5px solid var(--color-border-tertiary);
|
||||
font-size: 12px;
|
||||
}
|
||||
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.dot-r { background: #e05a4e; }
|
||||
.dot-y { background: #e8b84b; }
|
||||
.dot-g { background: #59b96f; }
|
||||
.tb-title { margin-left: 8px; font-size: 12px; color: var(--color-text-secondary); }
|
||||
|
||||
.pill {
|
||||
display: inline-flex; align-items: center; padding: 2px 8px;
|
||||
border-radius: 99px; font-size: 11px; font-weight: 500;
|
||||
border: 0.5px solid var(--color-border-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.pill.active { background: var(--color-background-info); color: var(--color-text-info); border-color: transparent; }
|
||||
.pill.success { background: var(--color-background-success); color: var(--color-text-success); border-color: transparent; }
|
||||
.pill.warn { background: var(--color-background-warning); color: var(--color-text-warning); border-color: transparent; }
|
||||
.pill.danger { background: var(--color-background-danger); color: var(--color-text-danger); border-color: transparent; }
|
||||
|
||||
.node-card {
|
||||
background: var(--color-background-primary);
|
||||
border: 0.5px solid var(--color-border-secondary);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: 10px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.node-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
|
||||
.node-label { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.node-thumb {
|
||||
border-radius: 4px;
|
||||
background: var(--color-background-tertiary);
|
||||
border: 0.5px solid var(--color-border-tertiary);
|
||||
}
|
||||
.connector-dot {
|
||||
width: 10px; height: 10px; border-radius: 50%;
|
||||
background: var(--color-background-primary);
|
||||
border: 1.5px solid var(--color-border-secondary);
|
||||
position: absolute;
|
||||
}
|
||||
.divider { border: none; border-top: 0.5px solid var(--color-border-tertiary); margin: 12px 0; }
|
||||
.label-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-secondary); margin-bottom: 4px; }
|
||||
.label-row strong { color: var(--color-text-primary); font-weight: 500; }
|
||||
|
||||
.shimmer {
|
||||
background: linear-gradient(90deg, var(--color-background-tertiary) 25%, var(--color-background-secondary) 50%, var(--color-background-tertiary) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.6s infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
|
||||
|
||||
input, select, textarea, button {
|
||||
font-family: var(--font-sans);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-background-secondary);
|
||||
border: 0.5px solid var(--color-border-tertiary);
|
||||
border-radius: var(--border-radius-md);
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
}
|
||||
button { cursor: pointer; }
|
||||
textarea { resize: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="page-header">
|
||||
<h1>🍋 LemonSpace — Wireframes</h1>
|
||||
<span>Mid-Fi · v1 · März 2026</span>
|
||||
</div>
|
||||
|
||||
<div class="nav" id="nav">
|
||||
<button class="nav-btn sel" data-screen="0">1 — Canvas interface</button>
|
||||
<button class="nav-btn" data-screen="1">2 — Node status & skeletons</button>
|
||||
<button class="nav-btn" data-screen="2">3 — Agent clarification UX</button>
|
||||
<button class="nav-btn" data-screen="3">4 — Dashboard</button>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN 1: Canvas Interface -->
|
||||
<div class="wf active" id="wf-0">
|
||||
<div class="screen-wrap">
|
||||
<div class="topbar">
|
||||
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
||||
<span class="tb-title">LemonSpace — Brand Campaign Q2</span>
|
||||
<div style="margin-left: auto; display:flex; gap:6px; align-items:center;">
|
||||
<span class="pill active">Autosaved</span>
|
||||
<span class="pill">Share</span>
|
||||
<div style="width:22px;height:22px;border-radius:50%;background:var(--color-background-info);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--color-text-info);font-weight:500;">MH</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; height: 560px;">
|
||||
|
||||
<!-- Left sidebar -->
|
||||
<div style="width: 200px; flex-shrink:0; background:var(--color-background-primary); border-right:0.5px solid var(--color-border-tertiary); padding:12px; overflow-y:auto; display:flex;flex-direction:column;gap:12px;">
|
||||
<div>
|
||||
<div class="label-row" style="margin-bottom:8px;"><strong>Quelle</strong></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px;">
|
||||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="1" y="1" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.2"/><path d="M1 11l4-4 3 3 2-2 4 4" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
|
||||
<span style="font-size:12px;">Bild</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" rx="1" fill="currentColor" opacity=".5"/><rect x="1" y="7" width="10" height="2" rx="1" fill="currentColor" opacity=".5"/><rect x="1" y="11" width="12" height="2" rx="1" fill="currentColor" opacity=".5"/></svg>
|
||||
<span style="font-size:12px;">Text</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-card" style="padding:7px 10px; cursor:grab; opacity:.5;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.2"/><path d="M6 8l2-3 2 3H6z" fill="currentColor" opacity=".5"/></svg>
|
||||
<span style="font-size:12px;">Prompt <span style="font-size:10px;opacity:.6;">Phase 2</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="divider">
|
||||
<div>
|
||||
<div class="label-row" style="margin-bottom:8px;"><strong>KI-Ausgabe</strong></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px;">
|
||||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M8 2L9.6 6.4H14L10.4 9 11.6 14 8 11.2 4.4 14 5.6 9 2 6.4H6.4L8 2z" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
|
||||
<span style="font-size:12px;">KI-Bild</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="divider">
|
||||
<div>
|
||||
<div class="label-row" style="margin-bottom:8px;"><strong>Canvas & Layout</strong></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px;">
|
||||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="1" y="1" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.2" stroke-dasharray="3 2"/></svg>
|
||||
<span style="font-size:12px;">Frame</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" stroke-width="1.2"/></svg>
|
||||
<span style="font-size:12px;">Gruppe</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-card" style="padding:7px 10px; cursor:grab;">
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.2"/><path d="M5 7h6M5 9.5h4" stroke="currentColor" stroke-width="1" stroke-linecap="round"/></svg>
|
||||
<span style="font-size:12px;">Notiz</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Canvas area -->
|
||||
<div style="flex:1; position:relative; overflow:hidden; background: radial-gradient(circle, var(--color-border-tertiary) 1px, transparent 1px); background-size: 24px 24px;">
|
||||
<svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;">
|
||||
<path d="M 222 130 C 270 130, 270 200, 320 200" stroke="var(--color-border-secondary)" stroke-width="1.5" fill="none"/>
|
||||
<path d="M 222 130 C 270 130, 270 300, 320 300" stroke="var(--color-border-secondary)" stroke-width="1.5" fill="none"/>
|
||||
<path d="M 490 200 C 540 200, 540 250, 590 250" stroke="var(--color-border-secondary)" stroke-width="1.5" fill="none"/>
|
||||
</svg>
|
||||
|
||||
<div class="node-card" style="position:absolute; left:80px; top:96px; width:150px;">
|
||||
<div class="node-header">
|
||||
<span class="node-label">Quelle</span>
|
||||
<span class="pill success" style="font-size:10px; padding:1px 6px;">Bild</span>
|
||||
</div>
|
||||
<div class="node-thumb" style="height:80px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><rect x="1" y="1" width="26" height="26" rx="3" stroke="var(--color-border-secondary)" stroke-width="1.2"/><path d="M1 19l7-7 5 5 4-4 9 9" stroke="var(--color-border-secondary)" stroke-width="1.5" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div style="margin-top:6px;font-size:11px;color:var(--color-text-secondary);">product-hero.jpg</div>
|
||||
<div class="connector-dot" style="right:-5px;top:50%;transform:translateY(-50%);"></div>
|
||||
</div>
|
||||
|
||||
<div class="node-card" style="position:absolute; left:320px; top:170px; width:170px;">
|
||||
<div class="node-header">
|
||||
<span class="node-label">KI-Ausgabe</span>
|
||||
<span class="pill active" style="font-size:10px; padding:1px 6px;">KI-Bild</span>
|
||||
</div>
|
||||
<div class="node-thumb" style="height:90px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 4L16.8 11.2H24L18 15.6 20.4 24 14 19.6 7.6 24 10 15.6 4 11.2H11.2L14 4z" stroke="var(--color-border-info)" stroke-width="1.2" stroke-linejoin="round" fill="var(--color-background-info)"/></svg>
|
||||
</div>
|
||||
<div style="margin-top:6px;font-size:11px;color:var(--color-text-secondary);">Gemini 2.5 Flash</div>
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);margin-top:2px;">~€0,03 / Bild</div>
|
||||
<div class="connector-dot" style="left:-5px;top:50%;transform:translateY(-50%);"></div>
|
||||
<div class="connector-dot" style="right:-5px;top:50%;transform:translateY(-50%);"></div>
|
||||
</div>
|
||||
|
||||
<div class="node-card" style="position:absolute; left:320px; top:280px; width:170px; opacity:.7;">
|
||||
<div class="node-header">
|
||||
<span class="node-label">KI-Ausgabe</span>
|
||||
<span class="pill active" style="font-size:10px; padding:1px 6px;">KI-Bild</span>
|
||||
</div>
|
||||
<div class="node-thumb" style="height:90px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M14 4L16.8 11.2H24L18 15.6 20.4 24 14 19.6 7.6 24 10 15.6 4 11.2H11.2L14 4z" stroke="var(--color-border-info)" stroke-width="1.2" stroke-linejoin="round" fill="var(--color-background-info)"/></svg>
|
||||
</div>
|
||||
<div class="connector-dot" style="left:-5px;top:50%;transform:translateY(-50%);"></div>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute;left:570px;top:180px;width:180px;height:140px;border:1.5px dashed var(--color-border-info);border-radius:6px;background:var(--color-background-info);opacity:.25;"></div>
|
||||
<div style="position:absolute;left:574px;top:167px;font-size:11px;color:var(--color-text-info);font-weight:500;">Frame — 1080×1080px</div>
|
||||
|
||||
<div style="position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:99px;padding:5px 10px;">
|
||||
<button style="padding:3px 10px;border-radius:99px;border:none;background:transparent;font-size:12px;color:var(--color-text-secondary);">Fit</button>
|
||||
<div style="width:0.5px;background:var(--color-border-tertiary);"></div>
|
||||
<button style="padding:3px 10px;border-radius:99px;border:none;background:transparent;font-size:12px;color:var(--color-text-secondary);">50%</button>
|
||||
<div style="width:0.5px;background:var(--color-border-tertiary);"></div>
|
||||
<button style="padding:3px 10px;border-radius:99px;border:none;background:transparent;font-size:12px;color:var(--color-text-secondary);">100%</button>
|
||||
<div style="width:0.5px;background:var(--color-border-tertiary);"></div>
|
||||
<button style="padding:3px 10px;border-radius:99px;border:none;background:var(--color-background-info);font-size:12px;color:var(--color-text-info);font-weight:500;">+ Node</button>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:6px;background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:99px;padding:4px 10px;font-size:11px;">
|
||||
<span style="color:var(--color-text-secondary);">Credits:</span>
|
||||
<strong style="color:var(--color-text-primary); font-weight:500;">€34,18</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right inspector -->
|
||||
<div style="width:220px;flex-shrink:0;background:var(--color-background-primary);border-left:0.5px solid var(--color-border-tertiary);padding:14px;overflow-y:auto;">
|
||||
<div style="font-size:12px;font-weight:500;color:var(--color-text-primary);margin-bottom:12px;">KI-Bild — Inspector</div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||||
<div>
|
||||
<div class="label-row"><span>Modell</span></div>
|
||||
<select style="width:100%;font-size:12px;">
|
||||
<option>Gemini 2.5 Flash Image</option>
|
||||
<option>FLUX.2 Klein 4B</option>
|
||||
<option>GPT-5 Image</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label-row"><span>Prompt</span></div>
|
||||
<textarea style="width:100%;font-size:12px;height:70px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:6px 8px;color:var(--color-text-primary);">Product on white background, studio lighting, soft shadows</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label-row"><span>Auflösung</span></div>
|
||||
<select style="width:100%;font-size:12px;"><option>1024×1024</option><option>1792×1024</option></select>
|
||||
</div>
|
||||
<hr class="divider">
|
||||
<div style="display:flex;justify-content:space-between;font-size:11px;">
|
||||
<span style="color:var(--color-text-secondary);">Geschätzte Kosten</span>
|
||||
<span style="font-weight:500;">~€0,03</span>
|
||||
</div>
|
||||
<button style="width:100%;padding:7px;font-size:12px;font-weight:500;border-radius:var(--border-radius-md);border:none;background:var(--color-background-info);color:var(--color-text-info);">Generieren</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN 2: Node Status & Skeletons -->
|
||||
<div class="wf" id="wf-1">
|
||||
<div class="screen-wrap">
|
||||
<div class="topbar">
|
||||
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
||||
<span class="tb-title">Node Status — Ausführungsmodell</span>
|
||||
</div>
|
||||
<div style="padding:20px;background:var(--color-background-secondary);">
|
||||
<div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;">
|
||||
<div>
|
||||
<div class="label-row" style="margin-bottom:8px;"><strong>Idle</strong></div>
|
||||
<div class="node-card">
|
||||
<div class="node-header"><span class="node-label">KI-Bild</span><span class="pill" style="font-size:10px;padding:1px 6px;">idle</span></div>
|
||||
<div class="node-thumb" style="height:70px;display:flex;align-items:center;justify-content:center;opacity:.4;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 3L14 9H20L15 13L17 20L12 16L7 20L9 13L4 9H10L12 3Z" stroke="currentColor" stroke-width="1.2" fill="none"/></svg>
|
||||
</div>
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);margin-top:6px;">Bereit zur Ausführung</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label-row" style="margin-bottom:8px;"><strong>Executing</strong></div>
|
||||
<div class="node-card" style="border-color:var(--color-border-info);">
|
||||
<div class="node-header"><span class="node-label">KI-Bild</span><span class="pill active" style="font-size:10px;padding:1px 6px;">executing</span></div>
|
||||
<div class="node-thumb" style="height:70px;display:flex;align-items:center;justify-content:center;">
|
||||
<div style="display:flex;gap:5px;align-items:center;">
|
||||
<div style="width:6px;height:6px;border-radius:50%;background:var(--color-text-info);animation:pulse 1s 0s infinite;"></div>
|
||||
<div style="width:6px;height:6px;border-radius:50%;background:var(--color-text-info);animation:pulse 1s 0.2s infinite;"></div>
|
||||
<div style="width:6px;height:6px;border-radius:50%;background:var(--color-text-info);animation:pulse 1s 0.4s infinite;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:var(--color-text-info);margin-top:6px;">Gemini 2.5 Flash — ~€0,03 reserviert</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label-row" style="margin-bottom:8px;"><strong>Done</strong></div>
|
||||
<div class="node-card" style="border-color:var(--color-border-success);">
|
||||
<div class="node-header"><span class="node-label">KI-Bild</span><span class="pill success" style="font-size:10px;padding:1px 6px;">done</span></div>
|
||||
<div class="node-thumb" style="height:70px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="2" y="2" width="20" height="20" rx="3" fill="var(--color-background-success)"/><path d="M4 14l5 5 10-10" stroke="var(--color-text-success)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div style="font-size:11px;color:var(--color-text-success);margin-top:6px;">€0,028 verbucht — 4,2s</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label-row" style="margin-bottom:8px;"><strong>Error</strong></div>
|
||||
<div class="node-card" style="border-color:var(--color-border-danger);">
|
||||
<div class="node-header"><span class="node-label">KI-Bild</span><span class="pill danger" style="font-size:10px;padding:1px 6px;">error</span></div>
|
||||
<div class="node-thumb" style="height:70px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="2" y="2" width="20" height="20" rx="3" fill="var(--color-background-danger)"/><path d="M8 8l8 8M16 8l-8 8" stroke="var(--color-text-danger)" stroke-width="1.8" stroke-linecap="round"/></svg>
|
||||
</div>
|
||||
<div style="font-size:11px;color:var(--color-text-danger);margin-top:6px;">Timeout — Credits nicht abgebucht</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="divider" style="margin:20px 0;">
|
||||
<div style="font-size:13px;font-weight:500;color:var(--color-text-primary);margin-bottom:12px;">Skeleton-Nodes — Agent Execution Plan</div>
|
||||
<div style="background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:12px;margin-bottom:12px;">
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);margin-bottom:10px;">
|
||||
Agent hat Plan erstellt: <strong style="color:var(--color-text-primary);">3× KI-Bild, 2× KI-Text, 1× Text-Overlay</strong> — Skeleton-Nodes platziert
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;">
|
||||
<div class="node-card" style="width:110px;border-color:var(--color-border-success);">
|
||||
<div style="font-size:10px;color:var(--color-text-success);font-weight:500;margin-bottom:6px;">KI-Bild 1/3</div>
|
||||
<div style="height:50px;display:flex;align-items:center;justify-content:center;background:var(--color-background-success);border-radius:4px;">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2l1.5 4.5H15L11.5 9l1.5 5L9 11.5 5 14l1.5-5L3 6.5h4.5L9 2z" stroke="var(--color-text-success)" stroke-width="1.2" fill="none"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-card" style="width:110px;border-color:var(--color-border-info);">
|
||||
<div style="font-size:10px;color:var(--color-text-info);font-weight:500;margin-bottom:6px;">KI-Bild 2/3</div>
|
||||
<div class="shimmer" style="height:50px;"></div>
|
||||
</div>
|
||||
<div class="node-card" style="width:110px;opacity:.55;">
|
||||
<div style="font-size:10px;color:var(--color-text-secondary);font-weight:500;margin-bottom:6px;">KI-Bild 3/3</div>
|
||||
<div class="shimmer" style="height:50px;opacity:.5;"></div>
|
||||
</div>
|
||||
<div class="node-card" style="width:110px;opacity:.55;">
|
||||
<div style="font-size:10px;color:var(--color-text-secondary);font-weight:500;margin-bottom:6px;">KI-Text 1/2</div>
|
||||
<div style="display:flex;flex-direction:column;gap:3px;">
|
||||
<div class="shimmer" style="height:8px;opacity:.5;"></div>
|
||||
<div class="shimmer" style="height:8px;width:70%;opacity:.5;"></div>
|
||||
<div class="shimmer" style="height:8px;width:85%;opacity:.5;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-card" style="width:110px;opacity:.55;">
|
||||
<div style="font-size:10px;color:var(--color-text-secondary);font-weight:500;margin-bottom:6px;">KI-Text 2/2</div>
|
||||
<div style="display:flex;flex-direction:column;gap:3px;">
|
||||
<div class="shimmer" style="height:8px;opacity:.5;"></div>
|
||||
<div class="shimmer" style="height:8px;width:60%;opacity:.5;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="node-card" style="width:110px;opacity:.55;">
|
||||
<div style="font-size:10px;color:var(--color-text-secondary);font-weight:500;margin-bottom:6px;">Text-Overlay</div>
|
||||
<div class="shimmer" style="height:50px;opacity:.5;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:10px;font-size:11px;color:var(--color-text-secondary);">
|
||||
<span class="pill active" style="font-size:10px;margin-right:6px;">executing 2/6</span>
|
||||
Nodes verschiebbar — Position bleibt bei Output-Ersatz erhalten
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN 3: Agent Clarification -->
|
||||
<div class="wf" id="wf-2">
|
||||
<div class="screen-wrap">
|
||||
<div class="topbar">
|
||||
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
||||
<span class="tb-title">Agent Clarification — 3 Varianten</span>
|
||||
</div>
|
||||
<div style="padding:20px;background:var(--color-background-secondary);">
|
||||
<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;">
|
||||
|
||||
<div>
|
||||
<div class="label-row" style="margin-bottom:8px;"><strong>Option A</strong> <span>— Inline am Node</span></div>
|
||||
<div class="node-card" style="border-color:var(--color-border-warning);">
|
||||
<div class="node-header"><span class="node-label">Agent</span><span class="pill warn" style="font-size:10px;padding:1px 6px;">clarifying</span></div>
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);margin:6px 0 8px;">Instagram Curator</div>
|
||||
<div style="background:var(--color-background-warning);border-radius:4px;padding:8px;margin-bottom:8px;">
|
||||
<div style="font-size:11px;color:var(--color-text-warning);font-weight:500;margin-bottom:4px;">Fehlende Angabe</div>
|
||||
<div style="font-size:11px;color:var(--color-text-warning);">Welche Zielgruppe soll angesprochen werden?</div>
|
||||
</div>
|
||||
<textarea style="width:100%;font-size:11px;height:44px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-warning);border-radius:4px;padding:5px 7px;color:var(--color-text-primary);" placeholder="Antwort eingeben..."></textarea>
|
||||
<button style="margin-top:6px;width:100%;padding:5px;font-size:11px;border-radius:4px;border:none;background:var(--color-background-warning);color:var(--color-text-warning);font-weight:500;">Weiter</button>
|
||||
</div>
|
||||
<div style="margin-top:8px;font-size:11px;color:var(--color-text-secondary);line-height:1.6;">
|
||||
+ Direkt am Node, kein Kontextverlust<br>
|
||||
+ Canvas bleibt sichtbar<br>
|
||||
− Wenig Platz für lange Antworten
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="label-row" style="margin-bottom:8px;"><strong>Option B</strong> <span>— Modal</span></div>
|
||||
<div style="min-height:200px;background:rgba(0,0,0,0.35);border-radius:var(--border-radius-md);display:flex;align-items:center;justify-content:center;padding:16px;">
|
||||
<div class="node-card" style="width:100%;max-width:260px;border-color:var(--color-border-warning);">
|
||||
<div style="font-size:13px;font-weight:500;color:var(--color-text-primary);margin-bottom:4px;">Agent braucht Angaben</div>
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);margin-bottom:10px;">Instagram Curator — Clarification</div>
|
||||
<div style="font-size:12px;color:var(--color-text-primary);margin-bottom:6px;">Welche Zielgruppe soll angesprochen werden?</div>
|
||||
<textarea style="width:100%;font-size:12px;height:60px;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:4px;padding:6px 8px;color:var(--color-text-primary);" placeholder="z.B. 25–35, Mode-affin, urban"></textarea>
|
||||
<div style="display:flex;gap:6px;margin-top:8px;">
|
||||
<button style="flex:1;padding:6px;font-size:11px;border-radius:4px;border:0.5px solid var(--color-border-secondary);background:transparent;color:var(--color-text-secondary);">Abbrechen</button>
|
||||
<button style="flex:1;padding:6px;font-size:11px;border-radius:4px;border:none;background:var(--color-background-info);color:var(--color-text-info);font-weight:500;">Weiter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:8px;font-size:11px;color:var(--color-text-secondary);line-height:1.6;">
|
||||
+ Mehr Platz, klarer Fokus<br>
|
||||
+ Bekanntes Interaktionsmuster<br>
|
||||
− Canvas wird verdeckt
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="label-row" style="margin-bottom:8px;"><strong>Option C</strong> <span>— Chat-Sidebar</span></div>
|
||||
<div style="background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);overflow:hidden;">
|
||||
<div style="padding:8px 10px;border-bottom:0.5px solid var(--color-border-tertiary);font-size:11px;font-weight:500;">Agent — Instagram Curator</div>
|
||||
<div style="padding:10px;display:flex;flex-direction:column;gap:6px;min-height:130px;">
|
||||
<div style="align-self:flex-start;background:var(--color-background-secondary);border-radius:0 6px 6px 6px;padding:6px 8px;font-size:11px;max-width:85%;">Ich habe alle Inputs analysiert. Eine Angabe fehlt noch: Welche Zielgruppe soll angesprochen werden?</div>
|
||||
<div style="align-self:flex-end;background:var(--color-background-info);border-radius:6px 0 6px 6px;padding:6px 8px;font-size:11px;color:var(--color-text-info);max-width:85%;">25–35, Mode-affin, urban</div>
|
||||
<div style="align-self:flex-start;background:var(--color-background-secondary);border-radius:0 6px 6px 6px;padding:6px 8px;font-size:11px;color:var(--color-text-success);max-width:85%;">Danke! Starte jetzt Execution...</div>
|
||||
</div>
|
||||
<div style="padding:6px 8px;border-top:0.5px solid var(--color-border-tertiary);display:flex;gap:6px;">
|
||||
<input type="text" placeholder="Antworten..." style="flex:1;font-size:11px;padding:4px 7px;"/>
|
||||
<button style="padding:4px 10px;font-size:11px;border-radius:4px;border:none;background:var(--color-background-info);color:var(--color-text-info);">→</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:8px;font-size:11px;color:var(--color-text-secondary);line-height:1.6;">
|
||||
+ Natürlich, erweiterbar auf Multi-Turn<br>
|
||||
+ Verlauf bleibt sichtbar<br>
|
||||
− Platzbedarf, Canvas verkleinert
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="divider" style="margin:20px 0;">
|
||||
<div style="background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);padding:12px;">
|
||||
<div style="font-size:12px;font-weight:500;color:var(--color-text-primary);margin-bottom:6px;">Empfehlung zur Entscheidung</div>
|
||||
<div style="font-size:12px;color:var(--color-text-secondary);line-height:1.6;">Option A (inline) passt am besten zur Canvas-nativen Philosophie von LemonSpace. Option C (Chat) skaliert besser für komplexere Agent-Workflows mit mehreren Rückfragen. Option B (Modal) ist der sicherste UX-Kompromiss — vertraut, fokussiert, aber ohne Canvas-Nähe.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCREEN 4: Dashboard -->
|
||||
<div class="wf" id="wf-3">
|
||||
<div class="screen-wrap">
|
||||
<div class="topbar">
|
||||
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
||||
<span class="tb-title">LemonSpace — Dashboard</span>
|
||||
<div style="margin-left:auto;display:flex;gap:8px;align-items:center;">
|
||||
<span class="pill">Starter</span>
|
||||
<div style="width:22px;height:22px;border-radius:50%;background:var(--color-background-info);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--color-text-info);font-weight:500;">MH</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;height:520px;">
|
||||
<div style="width:180px;flex-shrink:0;background:var(--color-background-primary);border-right:0.5px solid var(--color-border-tertiary);padding:16px 10px;display:flex;flex-direction:column;gap:2px;">
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);padding:4px 8px;margin-bottom:4px;letter-spacing:.04em;">LemonSpace</div>
|
||||
<div style="padding:6px 8px;border-radius:var(--border-radius-md);background:var(--color-background-secondary);font-size:12px;color:var(--color-text-primary);">Alle Canvases</div>
|
||||
<div style="padding:6px 8px;border-radius:var(--border-radius-md);font-size:12px;color:var(--color-text-secondary);">Zuletzt geöffnet</div>
|
||||
<div style="padding:6px 8px;border-radius:var(--border-radius-md);font-size:12px;color:var(--color-text-secondary);">Templates</div>
|
||||
<hr class="divider" style="margin:8px 0;">
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);padding:4px 8px;letter-spacing:.04em;">Konto</div>
|
||||
<div style="padding:6px 8px;border-radius:var(--border-radius-md);font-size:12px;color:var(--color-text-secondary);">Credits & Abo</div>
|
||||
<div style="padding:6px 8px;border-radius:var(--border-radius-md);font-size:12px;color:var(--color-text-secondary);">Einstellungen</div>
|
||||
<div style="margin-top:auto;background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:10px;">
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);margin-bottom:4px;">Credits verbleibend</div>
|
||||
<div style="font-size:18px;font-weight:500;color:var(--color-text-primary);">€6,18</div>
|
||||
<div style="height:4px;background:var(--color-border-tertiary);border-radius:2px;margin:6px 0;">
|
||||
<div style="height:4px;width:98%;background:var(--color-text-info);border-radius:2px;"></div>
|
||||
</div>
|
||||
<div style="font-size:10px;color:var(--color-text-secondary);">Starter — erneuert am 1. Apr</div>
|
||||
<button style="margin-top:6px;width:100%;padding:4px;font-size:11px;border-radius:4px;border:0.5px solid var(--color-border-secondary);background:transparent;color:var(--color-text-secondary);">Upgrade</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="flex:1;padding:20px;overflow-y:auto;background:var(--color-background-secondary);">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
|
||||
<div style="font-size:15px;font-weight:500;color:var(--color-text-primary);">Meine Canvases</div>
|
||||
<button style="padding:6px 14px;font-size:12px;font-weight:500;border-radius:var(--border-radius-md);border:none;background:var(--color-background-info);color:var(--color-text-info);">+ Neuer Canvas</button>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;">
|
||||
<div class="node-card" style="cursor:pointer;">
|
||||
<div class="node-thumb" style="height:90px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;background:var(--color-background-info);">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect x="4" y="4" width="24" height="24" rx="4" stroke="var(--color-border-info)" stroke-width="1.5"/><path d="M4 20l8-8 5 5 4-4 9 9" stroke="var(--color-border-info)" stroke-width="1.5" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div style="font-size:13px;font-weight:500;">Brand Campaign Q2</div>
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);margin-top:2px;">12 Nodes · vor 2h</div>
|
||||
</div>
|
||||
<div class="node-card" style="cursor:pointer;">
|
||||
<div class="node-thumb" style="height:90px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;background:var(--color-background-success);">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"><rect x="4" y="4" width="24" height="24" rx="4" stroke="var(--color-border-success)" stroke-width="1.5"/><path d="M8 16l5 5 10-10" stroke="var(--color-border-success)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div style="font-size:13px;font-weight:500;">Instagram Curator Test</div>
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);margin-top:2px;">8 Nodes · gestern</div>
|
||||
</div>
|
||||
<div class="node-card" style="cursor:pointer;border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:140px;opacity:.6;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 4v16M4 12h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
<div style="font-size:12px;color:var(--color-text-secondary);margin-top:6px;">Neuer Canvas</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="divider" style="margin:20px 0;">
|
||||
<div style="font-size:13px;font-weight:500;color:var(--color-text-primary);margin-bottom:12px;">Templates</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;">
|
||||
<div class="node-card" style="cursor:pointer;">
|
||||
<div style="font-size:12px;font-weight:500;margin-bottom:2px;">Instagram Curator</div>
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);">Agent · Phase 2</div>
|
||||
</div>
|
||||
<div class="node-card" style="cursor:pointer;opacity:.5;">
|
||||
<div style="font-size:12px;font-weight:500;margin-bottom:2px;">Product Batch</div>
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);">Agent · coming soon</div>
|
||||
</div>
|
||||
<div class="node-card" style="cursor:pointer;opacity:.5;">
|
||||
<div style="font-size:12px;font-weight:500;margin-bottom:2px;">Brand Guidelines</div>
|
||||
<div style="font-size:11px;color:var(--color-text-secondary);">Agent · coming soon</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const btns = document.querySelectorAll('.nav-btn');
|
||||
const screens = document.querySelectorAll('.wf');
|
||||
btns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const i = +btn.dataset.screen;
|
||||
btns.forEach(b => b.classList.remove('sel'));
|
||||
screens.forEach(s => s.classList.remove('active'));
|
||||
btn.classList.add('sel');
|
||||
screens[i].classList.add('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user