snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

templates/branching-chat/client/components/WorkflowToolbar.tsx

@@ -0,0 +1,131 @@
+import {
+	AssetToolbarItem,
+	CheckBoxToolbarItem,
+	CloudToolbarItem,
+	createShapeId,
+	DefaultToolbar,
+	DiamondToolbarItem,
+	DrawToolbarItem,
+	Editor,
+	EllipseToolbarItem,
+	HandToolbarItem,
+	HeartToolbarItem,
+	HexagonToolbarItem,
+	HighlightToolbarItem,
+	LaserToolbarItem,
+	NoteToolbarItem,
+	onDragFromToolbarToCreateShape,
+	OvalToolbarItem,
+	RectangleToolbarItem,
+	RhombusToolbarItem,
+	SelectToolbarItem,
+	StarToolbarItem,
+	TextToolbarItem,
+	TldrawUiMenuGroup,
+	TLShapeId,
+	TLUiOverrides,
+	ToolbarItem,
+	TriangleToolbarItem,
+	Vec,
+	XBoxToolbarItem,
+} from 'tldraw'
+import { NodeShape } from '../nodes/NodeShapeUtil'
+import { getNodeDefinitions, NodeType } from '../nodes/nodeTypes'
+
+function createNodeShape(editor: Editor, shapeId: TLShapeId, center: Vec, node: NodeType) {
+	// Mark a history stopping point for undo/redo
+	editor.markHistoryStoppingPoint('create node')
+
+	editor.run(() => {
+		// Create the shape with the node definition
+		editor.createShape({
+			id: shapeId,
+			type: 'node',
+			props: { node },
+		})
+
+		// Get the created shape and its bounds
+		const shape = editor.getShape<NodeShape>(shapeId)!
+		const shapeBounds = editor.getShapePageBounds(shapeId)!
+
+		// Position the shape so its center aligns with the drop point
+		editor.updateShape({
+			...shape,
+			x: center.x - shapeBounds.width / 2,
+			y: center.y - shapeBounds.height / 2,
+		})
+
+		// Select the newly created shape
+		editor.select(shapeId)
+	})
+}
+
+export const overrides: TLUiOverrides = {
+	tools: (editor, tools, _) => {
+		for (const nodeDef of Object.values(getNodeDefinitions(editor))) {
+			tools[`node-${nodeDef.type}`] = {
+				id: `node-${nodeDef.type}`,
+				label: nodeDef.title,
+				icon: nodeDef.icon,
+				onSelect: () => {
+					createNodeShape(
+						editor,
+						createShapeId(),
+						editor.getViewportPageBounds().center,
+						nodeDef.getDefault()
+					)
+				},
+				onDragStart: (_, info) => {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) => {
+							editor.createShape({
+								id,
+								type: 'node',
+								props: { node: nodeDef.getDefault() },
+							})
+						},
+						onDragEnd: () => {},
+					})
+				},
+			}
+		}
+		return tools
+	},
+}
+
+export function WorkflowToolbar() {
+	return (
+		<DefaultToolbar orientation="vertical" maxItems={7}>
+			<TldrawUiMenuGroup id="selection">
+				<SelectToolbarItem />
+				<HandToolbarItem />
+				<DrawToolbarItem />
+			</TldrawUiMenuGroup>
+			<TldrawUiMenuGroup id="nodes">
+				<ToolbarItem tool="node-message" />
+			</TldrawUiMenuGroup>
+			<TldrawUiMenuGroup id="shapes">
+				<RectangleToolbarItem />
+				<EllipseToolbarItem />
+				<TriangleToolbarItem />
+				<NoteToolbarItem />
+
+				<DiamondToolbarItem />
+				<HexagonToolbarItem />
+				<OvalToolbarItem />
+				<RhombusToolbarItem />
+
+				<StarToolbarItem />
+				<CloudToolbarItem />
+				<HeartToolbarItem />
+				<XBoxToolbarItem />
+
+				<CheckBoxToolbarItem />
+				<TextToolbarItem />
+				<AssetToolbarItem />
+				<HighlightToolbarItem />
+				<LaserToolbarItem />
+			</TldrawUiMenuGroup>
+		</DefaultToolbar>
+	)
+}

templates/branching-chat/client/components/icons/HandleIcon.tsx

@@ -0,0 +1,12 @@
+export function HandleIcon() {
+	return (
+		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M5.5 4.625C6.12132 4.625 6.625 4.12132 6.625 3.5C6.625 2.87868 6.12132 2.375 5.5 2.375C4.87868 2.375 4.375 2.87868 4.375 3.5C4.375 4.12132 4.87868 4.625 5.5 4.625ZM9.5 4.625C10.1213 4.625 10.625 4.12132 10.625 3.5C10.625 2.87868 10.1213 2.375 9.5 2.375C8.87868 2.375 8.375 2.87868 8.375 3.5C8.375 4.12132 8.87868 4.625 9.5 4.625ZM10.625 7.5C10.625 8.12132 10.1213 8.625 9.5 8.625C8.87868 8.625 8.375 8.12132 8.375 7.5C8.375 6.87868 8.87868 6.375 9.5 6.375C10.1213 6.375 10.625 6.87868 10.625 7.5ZM5.5 8.625C6.12132 8.625 6.625 8.12132 6.625 7.5C6.625 6.87868 6.12132 6.375 5.5 6.375C4.87868 6.375 4.375 6.87868 4.375 7.5C4.375 8.12132 4.87868 8.625 5.5 8.625ZM10.625 11.5C10.625 12.1213 10.1213 12.625 9.5 12.625C8.87868 12.625 8.375 12.1213 8.375 11.5C8.375 10.8787 8.87868 10.375 9.5 10.375C10.1213 10.375 10.625 10.8787 10.625 11.5ZM5.5 12.625C6.12132 12.625 6.625 12.1213 6.625 11.5C6.625 10.8787 6.12132 10.375 5.5 10.375C4.87868 10.375 4.375 10.8787 4.375 11.5C4.375 12.1213 4.87868 12.625 5.5 12.625Z"
+				fill="currentColor"
+				fillRule="evenodd"
+				clipRule="evenodd"
+			></path>
+		</svg>
+	)
+}

templates/branching-chat/client/components/icons/SendIcon.tsx

@@ -0,0 +1,12 @@
+export function SendIcon() {
+	return (
+		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M1.20308 1.04312C1.00481 0.954998 0.772341 1.0048 0.627577 1.16641C0.482813 1.32802 0.458794 1.56455 0.568117 1.75196L3.92115 7.50002L0.568117 13.2481C0.458794 13.4355 0.482813 13.672 0.627577 13.8336C0.772341 13.9952 1.00481 14.045 1.20308 13.9569L14.7031 7.95693C14.8836 7.87668 15 7.69762 15 7.50002C15 7.30243 14.8836 7.12337 14.7031 7.04312L1.20308 1.04312ZM4.84553 7.10002L2.21234 2.586L13.2689 7.50002L2.21234 12.414L4.84552 7.90002H9C9.22092 7.90002 9.4 7.72094 9.4 7.50002C9.4 7.27911 9.22092 7.10002 9 7.10002H4.84553Z"
+				fill="currentColor"
+				fillRule="evenodd"
+				clipRule="evenodd"
+			></path>
+		</svg>
+	)
+}