viteboard 0.1.0 → 0.1.1

package/src/styles.css

@@ -1456,6 +1456,81 @@ body {
   font-weight: 600;
 }
 
+/* Canonical project tree: every visible row receives its depth explicitly. */
+.nav-tree-group,
+.nav-tree-children {
+  margin: 0;
+  padding: 0;
+}
+
+.nav-tree-row {
+  --tree-depth: 0;
+  width: 100%;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px 4px calc(8px + var(--tree-depth) * 16px);
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.35;
+  text-align: left;
+  text-decoration: none;
+}
+
+button.nav-tree-row { cursor: pointer; }
+.nav-tree-row:hover { background: var(--bg-hover); color: var(--text-primary); }
+.nav-tree-row:focus-visible { outline: 2px solid var(--selection); outline-offset: -1px; }
+.nav-tree-row.active { background: var(--bg-active); color: var(--selection); font-weight: 600; }
+
+.nav-tree-folder { font-weight: 550; }
+.nav-tree-docs-root { color: var(--text-primary); font-weight: 650; }
+.nav-tree-badge { margin-left: auto; color: var(--selection); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }
+.nav-tree-doc { color: var(--text-secondary); }
+.nav-tree-board { color: var(--nav-board-color); }
+.nav-tree-capability { color: var(--nav-cap-color); }
+.nav-tree-file,
+.nav-tree-scaffold { opacity: 0.52; }
+.nav-tree-file { cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nav-tree-scaffold:hover { opacity: 0.8; }
+.nav-tree-group.collapsed > .nav-tree-row .nav-repo-chevron { transform: rotate(0deg); }
+
+/* A valid folder destination gets one unambiguous, local drop affordance. */
+.nav-tree-group.nav-drop-target > .nav-tree-row {
+  position: relative;
+  background: color-mix(in srgb, var(--selection) 13%, var(--surface-raised));
+  color: var(--text-primary);
+  outline: 2px solid var(--selection);
+  outline-offset: 0;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--selection) 17%, transparent);
+}
+
+.nav-tree-group.nav-drop-target > .nav-tree-row::after {
+  content: "Drop into";
+  margin-left: auto;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--selection);
+  color: var(--bg-canvas);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+/* After the hover delay opens a folder, show the newly revealed drop area. */
+.nav-tree-group.nav-drop-target.nav-drop-auto-expanded > .nav-tree-children {
+  position: relative;
+  margin: 3px 0;
+  border: 1px dashed color-mix(in srgb, var(--selection) 68%, transparent);
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--selection) 5%, transparent);
+}
+
 [data-theme="dark"] .nav-link.active {
   color: var(--neutral-100);
 }

package/src/templates/handoffTemplate.ts

@@ -0,0 +1,34 @@
+import type { BoardElement } from "../elements/types";
+import { arrow, beginTemplate, label, palette, rect } from "./helpers";
+
+/** A neutral collaboration map for decisions, ownership, and feedback. */
+export function handoffTemplate(
+  ox: number,
+  oy: number,
+  theme: "light" | "dark",
+  baseZ: number
+): BoardElement[] {
+  const p = palette(theme);
+  beginTemplate(baseZ);
+  const els: BoardElement[] = [];
+  els.push(label(ox, oy, 800, "Handoff map", 26, p.heading, "700"));
+  const cards = [
+    ["Explore", "#dbeafe"],
+    ["Decide", "#fef3c7"],
+    ["Act", "#dcfce7"],
+  ] as const;
+  cards.forEach(([text, fill], index) => {
+    els.push(rect(ox + index * 270, oy + 150, 170, 92, {
+      fill, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 12,
+      shadow: true, fontSize: 16, fontWeight: "650", textColor: "#1f2933",
+    }, text));
+  });
+  els.push(arrow(ox + 170, oy + 196, ox + 270, oy + 196, p.accent, { label: "proposal" }));
+  els.push(arrow(ox + 440, oy + 196, ox + 540, oy + 196, p.accent, { label: "owner | outcome", sides: true, arrowStart: true }));
+  els.push(arrow(ox + 625, oy + 245, ox + 355, oy + 330, "#9ca3af", { label: "feedback", dashed: true }));
+  els.push(rect(ox + 265, oy + 320, 180, 70, {
+    fill: p.zone, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 10,
+    fontSize: 14, textColor: p.text,
+  }, "Review signal"));
+  return els;
+}

package/src/templates/helpers.ts

@@ -98,12 +98,20 @@ export function arrow(
   y1: number,
   x2: number,
   y2: number,
-  stroke: string
+  stroke: string,
+  options: { label?: string; dashed?: boolean; arrowStart?: boolean; sides?: boolean } = {}
 ): BoardElement {
   return createElement("arrow", {
     x: x1, y: y1, width: x2 - x1, height: y2 - y1,
     zIndex: ++z,
-    style: { stroke, strokeWidth: 2, arrowEnd: true },
+    style: {
+      stroke,
+      strokeWidth: 2,
+      arrowEnd: true,
+      arrowStart: options.arrowStart,
+      strokeDash: options.dashed ? [8, 6] : undefined,
+    },
+    data: { text: options.label ?? "", labelPosition: options.sides ? "sides" : "center" },
   });
 }
 

package/src/templates/index.ts

@@ -6,6 +6,8 @@ import { requirementsFlowTemplate } from "./requirementsFlowTemplate";
 import { systemDiagramTemplate } from "./systemDiagramTemplate";
 import { opportunityTreeTemplate } from "./opportunityTreeTemplate";
 import { screenshotReviewTemplate } from "./screenshotReviewTemplate";
+import { workflowTemplate } from "./workflowTemplate";
+import { handoffTemplate } from "./handoffTemplate";
 
 export type TemplateDef = {
   id: string;
@@ -62,4 +64,16 @@ export const TEMPLATES: TemplateDef[] = [
     description: "Screenshot zone with observations, problems, UX notes.",
     build: screenshotReviewTemplate,
   },
+  {
+    id: "workflow",
+    name: "Workflow Map",
+    description: "Labeled handoffs, a dashed feedback loop, and editable steps.",
+    build: workflowTemplate,
+  },
+  {
+    id: "handoff",
+    name: "Handoff Map",
+    description: "A shared decision flow with ownership, outcomes, and feedback.",
+    build: handoffTemplate,
+  },
 ];

package/src/templates/systemDiagramTemplate.ts

@@ -30,12 +30,12 @@ export function systemDiagramTemplate(
   // notifications
   els.push(box(ox + 470, oy + 330, 180, 90, "#fef08a", "Notification Service"));
 
-  els.push(arrow(ox + 115, oy + 185, ox + 195, oy + 185, p.heading));
-  els.push(arrow(ox + 385, oy + 185, ox + 465, oy + 185, p.heading));
-  els.push(arrow(ox + 655, oy + 165, ox + 735, oy + 110, p.heading));
-  els.push(arrow(ox + 655, oy + 205, ox + 735, oy + 240, p.heading));
-  els.push(arrow(ox + 560, oy + 235, ox + 560, oy + 325, p.heading));
-  els.push(arrow(ox + 470, oy + 375, ox + 80, oy + 245, p.heading));
+  els.push(arrow(ox + 115, oy + 185, ox + 195, oy + 185, p.heading, { label: "uses" }));
+  els.push(arrow(ox + 385, oy + 185, ox + 465, oy + 185, p.heading, { label: "request | response", sides: true, arrowStart: true }));
+  els.push(arrow(ox + 655, oy + 165, ox + 735, oy + 110, p.heading, { label: "read" }));
+  els.push(arrow(ox + 655, oy + 205, ox + 735, oy + 240, p.heading, { label: "webhook", dashed: true }));
+  els.push(arrow(ox + 560, oy + 235, ox + 560, oy + 325, p.heading, { label: "event", dashed: true }));
+  els.push(arrow(ox + 470, oy + 375, ox + 80, oy + 245, p.heading, { label: "notify", dashed: true }));
 
   return els;
 }

package/src/templates/workflowTemplate.ts

@@ -0,0 +1,35 @@
+import type { BoardElement } from "../elements/types";
+import { arrow, beginTemplate, label, palette, rect } from "./helpers";
+
+/** A general-purpose process diagram that demonstrates labeled/dashed arrows. */
+export function workflowTemplate(
+  ox: number,
+  oy: number,
+  theme: "light" | "dark",
+  baseZ: number
+): BoardElement[] {
+  const p = palette(theme);
+  beginTemplate(baseZ);
+  const els: BoardElement[] = [];
+  els.push(label(ox, oy, 880, "Workflow map", 26, p.heading, "700"));
+  const steps = [
+    ["Request", "#dbeafe"],
+    ["Review", "#fef3c7"],
+    ["Deliver", "#dcfce7"],
+  ] as const;
+  for (let i = 0; i < steps.length; i++) {
+    const x = ox + i * 280;
+    els.push(rect(x, oy + 130, 180, 96, {
+      fill: steps[i][1], stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 12,
+      fontSize: 16, fontWeight: "650", textColor: "#1f2933", shadow: true,
+    }, steps[i][0]));
+  }
+  els.push(arrow(ox + 180, oy + 178, ox + 280, oy + 178, p.accent, { label: "approve" }));
+  els.push(arrow(ox + 460, oy + 178, ox + 560, oy + 178, p.accent, { label: "ship" }));
+  els.push(arrow(ox + 650, oy + 226, ox + 370, oy + 310, "#9ca3af", { label: "feedback", dashed: true }));
+  els.push(rect(ox + 280, oy + 300, 180, 72, {
+    fill: p.zone, stroke: p.cardStroke, strokeWidth: 1.5, borderRadius: 10,
+    fontSize: 14, textColor: p.text,
+  }, "Learn and iterate"));
+  return els;
+}

package/src/tools/ArrowTool.ts

@@ -2,14 +2,20 @@ import type { Tool, ToolContext } from "./ToolContext";
 import { createElement, type BoardElement } from "../elements/types";
 import { screenToWorld } from "../canvas/Viewport";
 
+type ArrowToolName = Extract<Tool["name"], "arrow" | "dashedArrow" | "twoWayArrow" | "labeledArrow" | "sidedLabelArrow">;
+
 export class ArrowTool implements Tool {
-  name = "arrow" as const;
+  name: ArrowToolName;
   cursor = "crosshair";
 
   private drawing = false;
   private startWorld = { x: 0, y: 0 };
   private preview: BoardElement | null = null;
 
+  constructor(name: ArrowToolName = "arrow") {
+    this.name = name;
+  }
+
   onPointerDown(e: PointerEvent, ctx: ToolContext): void {
     const { state } = ctx;
     this.drawing = true;
@@ -24,7 +30,10 @@ export class ArrowTool implements Tool {
         stroke: state.theme === "dark" ? "#d1d5db" : "#374151",
         strokeWidth: 2,
         arrowEnd: true,
+        arrowStart: this.name === "twoWayArrow",
+        strokeDash: this.name === "dashedArrow" || e.altKey ? [8, 6] : undefined,
       },
+      data: { text: "", labelPosition: this.name === "sidedLabelArrow" ? "sides" : "center" },
     });
     ctx.renderer.overlay.preview = this.preview;
   }
@@ -76,6 +85,7 @@ export class ArrowTool implements Tool {
     state.clearSelection();
     state.selectedIds.add(el.id);
     ctx.setTool("select");
+    if (this.name === "labeledArrow" || this.name === "sidedLabelArrow") ctx.openTextEditor(el);
   }
 
   onCancel(ctx: ToolContext): void {

package/src/tools/SelectTool.ts

@@ -213,7 +213,7 @@ export class SelectTool implements Tool {
     const { state, hitTester } = ctx;
     const world = screenToWorld(e.clientX, e.clientY, state.viewport);
     const hit = hitTester.hitTest(world.x, world.y, state.viewport.scale);
-    if (hit && (hit.type === "sticky" || hit.type === "task" || hit.type === "text" || hit.type === "rectangle" || hit.type === "ellipse" || hit.type === "frame")) {
+    if (hit && (hit.type === "sticky" || hit.type === "task" || hit.type === "text" || hit.type === "rectangle" || hit.type === "ellipse" || hit.type === "frame" || hit.type === "arrow" || hit.type === "line" || hit.type === "connector")) {
       ctx.openTextEditor(hit);
     }
   }

package/src/tools/ShapeTool.ts

@@ -3,7 +3,7 @@ import type { ToolName } from "./ToolContext";
 import { createElement, type BoardElement, type ElementType } from "../elements/types";
 import { screenToWorld } from "../canvas/Viewport";
 
-type ShapeToolName = Extract<ToolName, "rectangle" | "ellipse" | "diamond" | "triangle" | "pill" | "chevron">;
+type ShapeToolName = Extract<ToolName, "rectangle" | "ellipse" | "diamond" | "triangle" | "pill" | "chevron" | "parallelogram" | "hexagon" | "cylinder">;
 
 export class ShapeTool implements Tool {
   name: ShapeToolName;
@@ -26,7 +26,7 @@ export class ShapeTool implements Tool {
     this.drawing = true;
     this.startWorld = screenToWorld(e.clientX, e.clientY, state.viewport);
     const isDark = state.theme === "dark";
-    const isGraphicShape = !["rectangle", "ellipse", "pill"].includes(this.shapeKind);
+    const isGraphicShape = !["rectangle", "ellipse", "pill", "cylinder"].includes(this.shapeKind);
     this.preview = createElement(this.shapeType, {
       x: this.startWorld.x,
       y: this.startWorld.y,

package/src/tools/ToolContext.ts

@@ -16,8 +16,15 @@ export type ToolName =
   | "triangle"
   | "pill"
   | "chevron"
+  | "parallelogram"
+  | "hexagon"
+  | "cylinder"
   | "text"
   | "arrow"
+  | "dashedArrow"
+  | "twoWayArrow"
+  | "labeledArrow"
+  | "sidedLabelArrow"
   | "image";
 
 export type ToolContext = {

package/src/ui/TextEditorOverlay.ts

@@ -11,7 +11,7 @@ import { getRenderedTextFontSize, invalidateTextCache } from "../elements/render
 export class TextEditorOverlay {
   private state: BoardState;
   private commands: CommandManager;
-  private textarea: HTMLTextAreaElement | null = null;
+  private textareas: HTMLTextAreaElement[] = [];
   private editingId: string | null = null;
 
   constructor(state: BoardState, commands: CommandManager) {
@@ -26,14 +26,19 @@ export class TextEditorOverlay {
   open(el: BoardElement): void {
     this.close();
     this.editingId = el.id;
+    if (el.data.labelPosition === "sides") {
+      this.openSideEditors(el);
+      return;
+    }
 
     const ta = document.createElement("textarea");
     ta.className = "text-editor";
     ta.value = (el.data.text as string) ?? "";
+    if (el.data.labelPosition === "sides") ta.placeholder = "left label | right label";
     this.position(ta, el);
 
     document.body.appendChild(ta);
-    this.textarea = ta;
+    this.textareas = [ta];
     ta.focus();
     ta.select();
 
@@ -93,9 +98,121 @@ export class TextEditorOverlay {
     });
   }
 
+  private openSideEditors(el: BoardElement): void {
+    const originalText = String(el.data.text ?? "");
+    const [leftValue = "", rightValue = ""] = originalText.split("|", 2).map((part) => part.trim());
+    const left = this.makeSideEditor("Left label", leftValue);
+    const right = this.makeSideEditor("Right label", rightValue);
+    this.positionSideEditors(left, right, el);
+    document.body.append(left, right);
+    this.textareas = [left, right];
+    left.focus();
+    left.select();
+
+    el.data.text = "";
+    el.updatedAt = Date.now();
+    invalidateTextCache(el.id);
+    this.state.requestRender();
+
+    let settled = false;
+    const commit = () => {
+      if (settled) return;
+      settled = true;
+      const next = `${left.value.trim()} | ${right.value.trim()}`;
+      el.data.text = next;
+      el.updatedAt = Date.now();
+      invalidateTextCache(el.id);
+      if (next !== originalText) this.pushTextCommand(el.id, originalText, next);
+      this.state.emitChange();
+      this.close();
+    };
+    const cancel = () => {
+      if (settled) return;
+      settled = true;
+      el.data.text = originalText;
+      invalidateTextCache(el.id);
+      this.close();
+      this.state.requestRender();
+    };
+    for (const editor of [left, right]) {
+      editor.addEventListener("keydown", (e) => {
+        e.stopPropagation();
+        if (e.key === "Escape") cancel();
+        else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) commit();
+      });
+      editor.addEventListener("blur", () => {
+        window.setTimeout(() => {
+          if (!this.textareas.includes(document.activeElement as HTMLTextAreaElement)) commit();
+        }, 0);
+      });
+    }
+  }
+
+  private makeSideEditor(placeholder: string, value: string): HTMLTextAreaElement {
+    const ta = document.createElement("textarea");
+    ta.className = "text-editor text-editor-side";
+    ta.placeholder = placeholder;
+    ta.value = value;
+    ta.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+    ta.style.fontWeight = "600";
+    ta.style.textAlign = "center";
+    ta.style.lineHeight = "1.35";
+    ta.style.color = this.state.theme === "dark" ? "#f2f2f2" : "#1f2933";
+    return ta;
+  }
+
+  private positionSideEditors(left: HTMLTextAreaElement, right: HTMLTextAreaElement, el: BoardElement): void {
+    const vp = this.state.viewport;
+    const start = worldToScreen(el.x, el.y, vp);
+    const end = worldToScreen(el.x + el.width, el.y + el.height, vp);
+    const fontSize = 13 * vp.scale;
+    const width = Math.max(82, Math.min(150, Math.hypot(end.x - start.x, end.y - start.y) * 0.34));
+    const height = Math.max(24, fontSize * 1.35 + 4);
+    for (const [editor, position] of [[left, 0.24], [right, 0.76]] as const) {
+      editor.style.left = (start.x + (end.x - start.x) * position - width / 2) + "px";
+      editor.style.top = (start.y + (end.y - start.y) * position - height / 2) + "px";
+      editor.style.width = width + "px";
+      editor.style.height = height + "px";
+      editor.style.fontSize = fontSize + "px";
+    }
+  }
+
+  private pushTextCommand(id: string, originalText: string, newText: string): void {
+    const state = this.state;
+    this.commands.push(
+      "edit-text",
+      () => {
+        const target = state.elementsById.get(id);
+        if (target) { target.data.text = newText; target.updatedAt = Date.now(); invalidateTextCache(id); state.emitChange(); }
+      },
+      () => {
+        const target = state.elementsById.get(id);
+        if (target) { target.data.text = originalText; target.updatedAt = Date.now(); invalidateTextCache(id); state.emitChange(); }
+      }
+    );
+  }
+
   /** Reposition while viewport changes (e.g. window resize). */
   private position(ta: HTMLTextAreaElement, el: BoardElement): void {
     const vp = this.state.viewport;
+    if (el.type === "arrow" || el.type === "line" || el.type === "connector") {
+      const start = worldToScreen(el.x, el.y, vp);
+      const end = worldToScreen(el.x + el.width, el.y + el.height, vp);
+      const fontSize = 13 * vp.scale;
+      const width = Math.max(100, Math.min(240, Math.hypot(end.x - start.x, end.y - start.y) - 16));
+      const height = Math.max(24, fontSize * 1.35 + 4);
+      ta.style.left = (start.x + end.x) / 2 - width / 2 + "px";
+      ta.style.top = (start.y + end.y) / 2 - height / 2 + "px";
+      ta.style.width = width + "px";
+      ta.style.height = height + "px";
+      ta.style.fontSize = fontSize + "px";
+      ta.style.lineHeight = "1.35";
+      ta.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+      ta.style.fontWeight = "600";
+      ta.style.color = this.state.theme === "dark" ? "#f2f2f2" : "#1f2933";
+      ta.style.textAlign = "center";
+      return;
+    }
     const tl = worldToScreen(el.x, el.y, vp);
     const isChevron = el.data.shapeKind === "chevron";
     const fontSize = getRenderedTextFontSize(el) * vp.scale;
@@ -104,12 +221,20 @@ export class TextEditorOverlay {
         ? Math.min(Math.abs(el.width) * 0.18, Math.abs(el.height) * 0.55) + 8
         : 10;
     const xPad = (el.type === "sticky" ? 14 : el.type === "task" ? 50 : el.type === "text" ? 0 : chevronPad) * vp.scale;
-    const editorHeight = isChevron
-      ? Math.max(28, fontSize * 1.28)
-      : Math.max(24, el.height * vp.scale - (el.type === "sticky" ? 28 : el.type === "task" ? 0 : el.type === "text" ? 0 : chevronPad * 2) * vp.scale);
-    const yPad = isChevron
+    const isCentered = el.type !== "text" && el.type !== "task";
+    const availableHeight = isChevron
+      ? el.height * vp.scale
+      : el.height * vp.scale - (el.type === "sticky" ? 28 : isCentered ? chevronPad * 2 : 0) * vp.scale;
+    // A textarea fills from its top edge. Give centered diagram nodes a
+    // content-height editor and position that editor on the canvas baseline.
+    const lineCount = Math.max(1, String(el.data.text ?? "").split(/\r?\n/).length);
+    const contentHeight = Math.max(24, fontSize * (isChevron ? 1.18 : 1.35) * lineCount + 4);
+    const editorHeight = isCentered
+      ? Math.min(Math.max(24, availableHeight), contentHeight)
+      : Math.max(24, availableHeight);
+    const yPad = isCentered
       ? Math.max(0, (el.height * vp.scale - editorHeight) / 2)
-      : (el.type === "sticky" ? 14 : el.type === "task" ? 0 : el.type === "text" ? 0 : chevronPad) * vp.scale;
+      : el.type === "sticky" ? 14 * vp.scale : 0;
     const rightPad = (el.type === "task" ? 16 : el.type === "sticky" ? 14 : el.type === "text" ? 0 : chevronPad) * vp.scale;
 
     ta.style.left = tl.x + xPad + "px";
@@ -127,11 +252,11 @@ export class TextEditorOverlay {
   }
 
   close(): void {
-    if (this.textarea) {
-      const ta = this.textarea;
-      this.textarea = null;
+    if (this.textareas.length) {
+      const editors = this.textareas;
+      this.textareas = [];
       this.editingId = null;
-      ta.remove();
+      for (const editor of editors) editor.remove();
     }
   }
 }

package/src/ui/Toolbar.ts

@@ -17,7 +17,6 @@ const TOOL_BUTTONS: { tool: ToolName; icon: string; label: string; key: string }
   { tool: "sticky", icon: "sticky", label: "Sticky note", key: "S" },
   { tool: "task", icon: "task", label: "Task", key: "" },
   { tool: "text", icon: "text", label: "Text", key: "T" },
-  { tool: "arrow", icon: "arrow", label: "Arrow", key: "A" },
   { tool: "image", icon: "image", label: "Image", key: "I" },
 ];
 
@@ -28,6 +27,17 @@ const SHAPE_BUTTONS: { tool: ToolName; icon: string; label: string; key: string
   { tool: "triangle", icon: "triangle", label: "Triangle", key: "" },
   { tool: "pill", icon: "pill", label: "Pill", key: "" },
   { tool: "chevron", icon: "chevron", label: "Chevron", key: "" },
+  { tool: "parallelogram", icon: "parallelogram", label: "Parallelogram", key: "" },
+  { tool: "hexagon", icon: "hexagon", label: "Hexagon", key: "" },
+  { tool: "cylinder", icon: "cylinder", label: "Cylinder", key: "" },
+];
+
+const ARROW_BUTTONS: { tool: ToolName; icon: string; label: string; key: string }[] = [
+  { tool: "arrow", icon: "arrow", label: "Arrow (hold Shift to snap)", key: "A" },
+  { tool: "dashedArrow", icon: "arrowDashed", label: "Dashed arrow", key: "" },
+  { tool: "twoWayArrow", icon: "arrowBoth", label: "Two-way arrow", key: "" },
+  { tool: "labeledArrow", icon: "arrowLabel", label: "Centered label arrow", key: "" },
+  { tool: "sidedLabelArrow", icon: "arrowLabel", label: "Left and right labels", key: "" },
 ];
 
 const SHAPE_TOOLS = new Set<ToolName>(SHAPE_BUTTONS.map((item) => item.tool));
@@ -38,6 +48,7 @@ export class Toolbar {
   private shapeButtons = new Map<ToolName, HTMLButtonElement>();
   private shapeBtn!: HTMLButtonElement;
   private shapeGroup!: HTMLDivElement;
+  private arrowGroup!: HTMLDivElement;
   private themeBtn!: HTMLButtonElement;
 
   constructor(parent: HTMLElement, actions: ToolbarActions) {
@@ -50,6 +61,7 @@ export class Toolbar {
       this.toolButtons.set(def.tool, btn);
       this.element.appendChild(btn);
       if (def.tool === "sticky") this.element.appendChild(this.makeShapePicker(actions));
+      if (def.tool === "text") this.element.appendChild(this.makeArrowPicker(actions));
     }
 
     this.element.appendChild(this.divider());
@@ -127,6 +139,32 @@ export class Toolbar {
     return this.shapeGroup;
   }
 
+  private makeArrowPicker(actions: ToolbarActions): HTMLDivElement {
+    this.arrowGroup = document.createElement("div");
+    this.arrowGroup.className = "shape-tool-group";
+    const trigger = this.makeButton("arrow", "Arrow types", "");
+    trigger.classList.add("shape-tool-trigger");
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.arrowGroup.classList.toggle("open");
+    });
+    const menu = document.createElement("div");
+    menu.className = "shape-tool-popover";
+    for (const def of ARROW_BUTTONS) {
+      const btn = this.makeButton(def.icon, def.label, def.key);
+      btn.classList.add("shape-option-btn");
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        actions.setTool(def.tool);
+        this.arrowGroup.classList.remove("open");
+      });
+      this.toolButtons.set(def.tool, btn);
+      menu.appendChild(btn);
+    }
+    this.arrowGroup.append(trigger, menu);
+    return this.arrowGroup;
+  }
+
   private divider(): HTMLDivElement {
     const d = document.createElement("div");
     d.className = "toolbar-divider";

package/src/ui/icons.ts

@@ -13,6 +13,12 @@ export const ICONS: Record<string, string> = {
   triangle: `<svg viewBox="0 0 24 24"><path d="M12 4l9 16H3z"/></svg>`,
   pill: `<svg viewBox="0 0 24 24"><rect x="3.5" y="7" width="17" height="10" rx="5"/></svg>`,
   chevron: `<svg viewBox="0 0 24 24"><path d="M4 6h12l5 6-5 6H4l5-6z"/></svg>`,
+  parallelogram: `<svg viewBox="0 0 24 24"><path d="M7 5h13l-3 14H4z"/></svg>`,
+  hexagon: `<svg viewBox="0 0 24 24"><path d="M8 4h8l5 8-5 8H8l-5-8z"/></svg>`,
+  cylinder: `<svg viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v11c0 1.7 3.1 3 7 3s7-1.3 7-3V6"/></svg>`,
+  arrowDashed: `<svg viewBox="0 0 24 24"><path stroke-dasharray="4 3" d="M4 12h14m0 0l-5-5m5 5l-5 5"/></svg>`,
+  arrowBoth: `<svg viewBox="0 0 24 24"><path d="M4 12h16m-16 0l5-5m-5 5l5 5m11-5l-5-5m5 5l-5 5"/></svg>`,
+  arrowLabel: `<svg viewBox="0 0 24 24"><path d="M3 17L17 7m0 0h-6m6 0v6"/><rect x="7" y="9" width="10" height="6" rx="1"/></svg>`,
   text: `<svg viewBox="0 0 24 24"><path d="M5 6V4h14v2M12 4v16m-3 0h6"/></svg>`,
   arrow: `<svg viewBox="0 0 24 24"><path d="M5 19L19 5m0 0h-7m7 0v7"/></svg>`,
   image: `<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="M21 16l-5-5-9 9"/></svg>`,

package/vite.config.ts

@@ -358,7 +358,7 @@ function contentApiPlugin(): Plugin {
     return nodes;
   }
 
-  /** Walk full project directory tree — returns only directories (no files). */
+  /** Walk the project tree for Raw sidebar mode. */
   async function walkProjectTree(dir: string, base: string): Promise<TreeNode[]> {
     let entries: import("node:fs").Dirent[];
     try {
@@ -368,18 +368,24 @@ function contentApiPlugin(): Plugin {
     }
     const nodes: TreeNode[] = [];
     for (const entry of entries) {
-      if (!entry.isDirectory()) continue;
       if (entry.name.startsWith(".")) continue;
-      if (isIgnoredDir(entry.name)) continue;
       const rel = base ? `${base}/${entry.name}` : entry.name;
-      nodes.push({
-        type: "dir",
-        name: entry.name,
-        path: rel,
-        children: await walkProjectTree(path.join(dir, entry.name), rel),
-      });
+      if (entry.isDirectory()) {
+        if (isIgnoredDir(entry.name)) continue;
+        nodes.push({
+          type: "dir",
+          name: entry.name,
+          path: rel,
+          children: await walkProjectTree(path.join(dir, entry.name), rel),
+        });
+      } else {
+        nodes.push({ type: "file", name: entry.name, path: rel });
+      }
     }
-    nodes.sort((a, b) => a.name.localeCompare(b.name));
+    nodes.sort((a, b) => {
+      if (a.type !== b.type) return a.type === "dir" ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
     return nodes;
   }