canvas_erd 0.1.0 → 0.2.0

data/lib/canvas_erd/web/document.js

@@ -11,6 +11,42 @@
   const CARD_PADDING = 10;
   const NOTE_PADDING = 12;
   const CANVAS_FONT_FAMILY = "Arial";
+  const DEFAULT_BACKGROUND_COLORS = Object.freeze([
+    "#dbeafe", "#fee2e2", "#ffedd5", "#fff2a8", "#dcfce7",
+    "#cffafe", "#ede9fe", "#f3f4f6"
+  ]);
+  const DEFAULT_FOREGROUND_COLORS = Object.freeze([
+    "#243b63", "#7f1d1d", "#9a3412", "#854d0e", "#166534",
+    "#155e75", "#6b21a8", "#374151"
+  ]);
+  const NOTE_PARAGRAPH_STYLES = Object.freeze({
+    title: Object.freeze({ fontFamily: "Georgia", fontSize: 32, fontWeight: "bold", lineHeight: 1.15 }),
+    heading: Object.freeze({ fontFamily: "Georgia", fontSize: 22, fontWeight: "bold", lineHeight: 1.15 }),
+    paragraph: Object.freeze({ fontFamily: "Arial", fontSize: 15, fontWeight: "normal", lineHeight: 1.25 }),
+    code: Object.freeze({ fontFamily: "Courier New", fontSize: 14, fontWeight: "normal", lineHeight: 1.2 })
+  });
+  const DEFAULT_TABLE_HEADER_COLOR = "#243b63";
+  const DEFAULT_TABLE_HEADER_COLORS = DEFAULT_FOREGROUND_COLORS;
+  const DEFAULT_ARROW_FORMATTING = Object.freeze({
+    color: DEFAULT_FOREGROUND_COLORS[0],
+    strokeWidth: 2.25,
+    lineStyle: "solid",
+    startHead: "none",
+    endHead: "filled"
+  });
+  const DEFAULT_FRAME_FORMATTING = Object.freeze({
+    color: DEFAULT_FOREGROUND_COLORS[0],
+    lineStyle: "solid"
+  });
+  const DEFAULT_NOTE_FORMATTING = Object.freeze({
+    paragraphStyle: "paragraph",
+    ...NOTE_PARAGRAPH_STYLES.paragraph,
+    fontStyle: "normal",
+    underline: false,
+    fill: "#374151",
+    backgroundColor: "#fff2a8",
+    textAlign: "left"
+  });
 
   function topLeft(options = {}) {
     return {
@@ -37,12 +73,224 @@
     return NOTE_PADDING * zoom;
   }
 
+  function noteFormatting(note = {}) {
+    const paragraphStyle = noteParagraphStyle(note);
+    const style = NOTE_PARAGRAPH_STYLES[paragraphStyle];
+    return {
+      paragraphStyle,
+      fontWeight: ["normal", "bold"].includes(note.fontWeight) ? note.fontWeight : style.fontWeight,
+      fontStyle: note.fontStyle === "italic" ? "italic" : DEFAULT_NOTE_FORMATTING.fontStyle,
+      underline: note.underline === true,
+      fill: typeof note.fill === "string" ? note.fill : DEFAULT_NOTE_FORMATTING.fill,
+      backgroundColor: typeof note.backgroundColor === "string"
+        ? note.backgroundColor
+        : DEFAULT_NOTE_FORMATTING.backgroundColor,
+      fontFamily: style.fontFamily,
+      fontSize: style.fontSize,
+      lineHeight: style.lineHeight,
+      textAlign: ["left", "center", "right"].includes(note.textAlign)
+        ? note.textAlign
+        : DEFAULT_NOTE_FORMATTING.textAlign
+    };
+  }
+
+  function noteParagraphStyle(note = {}) {
+    if (NOTE_PARAGRAPH_STYLES[note.paragraphStyle]) return note.paragraphStyle;
+    if (note.fontFamily === "Courier New") return "code";
+    if (["Georgia", "Times New Roman"].includes(note.fontFamily)) {
+      return note.fontSize >= 28 ? "title" : "heading";
+    }
+    return "paragraph";
+  }
+
+  function noteParagraphStyleFormatting(paragraphStyle) {
+    const resolved = NOTE_PARAGRAPH_STYLES[paragraphStyle] ? paragraphStyle : "paragraph";
+    return { paragraphStyle: resolved, ...NOTE_PARAGRAPH_STYLES[resolved] };
+  }
+
+  function inheritedNoteFormatting(note) {
+    return { ...noteFormatting(note || {}) };
+  }
+
+  function noteColorSwatches(notes, property, defaults) {
+    const colors = [...defaults];
+    notes.forEach((note) => {
+      const color = note[property];
+      if (typeof color !== "string" || !/^#[0-9a-f]{6}$/i.test(color)) return;
+      const normalized = color.toLowerCase();
+      if (!colors.includes(normalized)) colors.push(normalized);
+    });
+    return colors;
+  }
+
+  function colorPaletteSections(colors, defaults) {
+    return {
+      defaults: colors.slice(0, defaults.length),
+      custom: colors.slice(defaults.length)
+    };
+  }
+
+  function noteBorderColor(backgroundColor) {
+    if (backgroundColor === "transparent") return "#94a3b8";
+    const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(backgroundColor);
+    if (!match) return "#94a3b8";
+
+    const channels = match.slice(1).map((channel) => parseInt(channel, 16));
+    const luminance = channels[0] * 0.299 + channels[1] * 0.587 + channels[2] * 0.114;
+    const target = luminance > 150 ? 0 : 255;
+    const mixed = channels.map((channel) => Math.round(channel * 0.7 + target * 0.3));
+    return `#${mixed.map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+  }
+
+  function tableHeaderColor(state, entityId) {
+    return state.tableHeaderColors?.[entityId] || DEFAULT_TABLE_HEADER_COLOR;
+  }
+
+  function setTableHeaderColor(state, entityIds, color) {
+    const tableHeaderColors = { ...(state.tableHeaderColors || {}) };
+    entityIds.forEach((entityId) => {
+      if (color === DEFAULT_TABLE_HEADER_COLOR) delete tableHeaderColors[entityId];
+      else tableHeaderColors[entityId] = color;
+    });
+    return { ...state, tableHeaderColors };
+  }
+
+  function tableHeaderColorSwatches(tableHeaderColors = {}) {
+    const colors = [...DEFAULT_TABLE_HEADER_COLORS];
+    Object.values(tableHeaderColors).forEach((color) => {
+      if (typeof color !== "string" || !/^#[0-9a-f]{6}$/i.test(color)) return;
+      const normalized = color.toLowerCase();
+      if (!colors.includes(normalized)) colors.push(normalized);
+    });
+    return colors;
+  }
+
+  function selectedTableHeaderColor(state, entityIds) {
+    if (entityIds.length === 0) return null;
+    const colors = entityIds.map((entityId) => tableHeaderColor(state, entityId));
+    return colors.every((color) => color === colors[0]) ? colors[0] : null;
+  }
+
+  function arrowFormatting(arrow = {}) {
+    const strokeWidth = Number(arrow.strokeWidth);
+    const headStyles = [
+      "none", "filled", "open", "circle", "circle-open", "diamond", "diamond-open"
+    ];
+    return {
+      color: typeof arrow.color === "string" ? arrow.color : DEFAULT_ARROW_FORMATTING.color,
+      strokeWidth: Number.isFinite(strokeWidth)
+        ? Math.min(20, Math.max(0.5, strokeWidth))
+        : DEFAULT_ARROW_FORMATTING.strokeWidth,
+      lineStyle: ["solid", "dashed", "dotted"].includes(arrow.lineStyle)
+        ? arrow.lineStyle
+        : DEFAULT_ARROW_FORMATTING.lineStyle,
+      startHead: headStyles.includes(arrow.startHead)
+        ? arrow.startHead
+        : DEFAULT_ARROW_FORMATTING.startHead,
+      endHead: headStyles.includes(arrow.endHead)
+        ? arrow.endHead
+        : DEFAULT_ARROW_FORMATTING.endHead
+    };
+  }
+
+  function arrowStrokeDashArray(lineStyle) {
+    return { dashed: [10, 7], dotted: [2, 6] }[lineStyle] || null;
+  }
+
+  function arrowHeadGeometry(style, strokeWidth) {
+    const width = arrowFormatting({ strokeWidth }).strokeWidth;
+    const length = 10 + width * 1.5;
+    const halfWidth = 5 + width;
+    const radius = halfWidth * 0.72;
+    return {
+      length,
+      halfWidth,
+      radius,
+      shaftInset: style === "circle-open" ? radius * 2 : (style === "diamond-open" ? length : 0)
+    };
+  }
+
+  function shortenedArrowLinePoints(points, startHead, endHead, strokeWidth) {
+    const x = points.x2 - points.x1;
+    const y = points.y2 - points.y1;
+    const distance = Math.hypot(x, y);
+    if (distance === 0) return { ...points };
+
+    const startInset = arrowHeadGeometry(startHead, strokeWidth).shaftInset;
+    const endInset = arrowHeadGeometry(endHead, strokeWidth).shaftInset;
+    const scale = startInset + endInset > distance ? distance / (startInset + endInset) : 1;
+    const unitX = x / distance;
+    const unitY = y / distance;
+    return {
+      x1: points.x1 + unitX * startInset * scale,
+      y1: points.y1 + unitY * startInset * scale,
+      x2: points.x2 - unitX * endInset * scale,
+      y2: points.y2 - unitY * endInset * scale
+    };
+  }
+
+  function arrowColorSwatches(arrows = []) {
+    const colors = [...DEFAULT_FOREGROUND_COLORS];
+    arrows.forEach((arrow) => {
+      const color = arrowFormatting(arrow).color;
+      if (!/^#[0-9a-f]{6}$/i.test(color)) return;
+      const normalized = color.toLowerCase();
+      if (!colors.includes(normalized)) colors.push(normalized);
+    });
+    return colors;
+  }
+
+  function frameFormatting(frame = {}) {
+    return {
+      color: typeof frame.color === "string" ? frame.color : DEFAULT_FRAME_FORMATTING.color,
+      lineStyle: ["solid", "dashed", "dotted"].includes(frame.lineStyle)
+        ? frame.lineStyle
+        : DEFAULT_FRAME_FORMATTING.lineStyle
+    };
+  }
+
+  function frameColorSwatches(frames = []) {
+    const colors = [...DEFAULT_FOREGROUND_COLORS];
+    frames.forEach((frame) => {
+      const color = frameFormatting(frame).color;
+      if (!/^#[0-9a-f]{6}$/i.test(color)) return;
+      const normalized = color.toLowerCase();
+      if (!colors.includes(normalized)) colors.push(normalized);
+    });
+    return colors;
+  }
+
+  function frameBounds(first, second) {
+    return {
+      x: Math.min(first.x, second.x),
+      y: Math.min(first.y, second.y),
+      width: Math.abs(second.x - first.x),
+      height: Math.abs(second.y - first.y)
+    };
+  }
+
+  function frameLabelPosition(frame) {
+    return { x: frame.x + 10, y: frame.y };
+  }
+
+  function frameLabelCanvasStyle(frame) {
+    const position = frameLabelPosition(frame);
+    return {
+      left: position.x,
+      top: position.y,
+      originY: "center",
+      fill: frameFormatting(frame).color,
+      backgroundColor: "#f7f8fb"
+    };
+  }
+
   function noteCanvasGeometry(note) {
     return {
       left: note.x,
       top: note.y,
       width: note.width,
-      angle: note.angle ?? 0
+      angle: note.angle ?? 0,
+      ...noteFormatting(note)
     };
   }
 
@@ -52,7 +300,8 @@
       y: object.top,
       width: object.width * object.scaleX,
       angle: object.angle,
-      text: object.text
+      text: object.text,
+      ...noteFormatting(object)
     };
   }
 
@@ -96,6 +345,19 @@
     return shortcutAction(event) === "save";
   }
 
+  function noteFormattingShortcut(event) {
+    if (!(event.metaKey || event.ctrlKey)) return null;
+    if (event.altKey) {
+      return {
+        Digit1: "title",
+        Digit2: "heading",
+        Digit3: "paragraph",
+        Digit4: "code"
+      }[event.code] || null;
+    }
+    return { b: "bold", i: "italic", u: "underline" }[String(event.key).toLowerCase()] || null;
+  }
+
   function selectedDiagramFilename(filename, availableFilenames) {
     return filename && availableFilenames.includes(filename) ? filename : "";
   }
@@ -139,7 +401,13 @@
     return null;
   }
 
+  function arrowIdForEndpointEditing(target) {
+    return target?.canvasErdType === "arrow" ? target.arrowId : null;
+  }
+
   function canvasLayer(type) {
+    if (["frame", "frame-preview"].includes(type)) return -2;
+    if (type === "frame-label") return -1;
     if (type === "relationship") return 0;
     if (["arrow", "arrow-preview"].includes(type)) return 2;
     if (type === "arrow-endpoint") return 3;
@@ -211,6 +479,8 @@
     return {
       includedEntityIds: schema.entities.map((entity) => entity.id),
       positions,
+      tableHeaderColors: {},
+      frames: [],
       notes: [],
       arrows: []
     };
@@ -271,6 +541,8 @@
         ...state,
         includedEntityIds: state.includedEntityIds.filter((id) => previousEntityIds.has(id) && nextEntityIds.has(id)),
         positions,
+        tableHeaderColors: { ...(state.tableHeaderColors || {}) },
+        frames: (state.frames || []).map((frame) => ({ ...frame })),
         notes: state.notes.map((note) => ({ ...note })),
         arrows: (state.arrows || []).map((arrow) => ({
           ...arrow,
@@ -346,6 +618,98 @@
     return `${rangeLabel(relationship.cardinality.source)} — ${rangeLabel(relationship.cardinality.destination)}`;
   }
 
+  function crowFootCardinality(range) {
+    const minimum = Number(range.minimum);
+    const maximum = range.maximum === null ? null : Number(range.maximum);
+    if (![0, 1].includes(minimum) || ![1, null].includes(maximum)) return null;
+    return { optional: minimum === 0, many: maximum === null };
+  }
+
+  function cardinalityEndpointGeometry(boundary, outward, range) {
+    const magnitude = Math.hypot(outward.x, outward.y) || 1;
+    const unit = { x: outward.x / magnitude, y: outward.y / magnitude };
+    const tangent = { x: -unit.y, y: unit.x };
+    const point = (origin, along, across = 0) => ({
+      x: origin.x + unit.x * along + tangent.x * across,
+      y: origin.y + unit.y * along + tangent.y * across
+    });
+    const cardinality = crowFootCardinality(range);
+    if (!cardinality) {
+      return {
+        boundary: { ...boundary },
+        shaftPoint: { ...boundary },
+        segments: [],
+        circles: [],
+        label: rangeLabel(range),
+        labelPosition: point(boundary, 18)
+      };
+    }
+
+    const segments = [];
+    const circles = [];
+    const maximumMarker = point(boundary, 9);
+    let cursor;
+    if (cardinality.many) {
+      const vertex = point(maximumMarker, 12);
+      segments.push(
+        { start: { ...boundary }, end: maximumMarker },
+        { start: vertex, end: point(maximumMarker, 0, -7) },
+        { start: vertex, end: maximumMarker },
+        { start: vertex, end: point(maximumMarker, 0, 7) }
+      );
+      cursor = vertex;
+    } else {
+      cursor = point(maximumMarker, 5);
+      segments.push(
+        { start: { ...boundary }, end: cursor },
+        { start: point(maximumMarker, 0, -7), end: point(maximumMarker, 0, 7) }
+      );
+    }
+
+    let shaftPoint;
+    if (cardinality.optional) {
+      const nearEdge = point(cursor, 3);
+      const center = point(nearEdge, 4);
+      shaftPoint = point(center, 7);
+      segments.push({ start: cursor, end: nearEdge });
+      circles.push({ center, radius: 4 });
+    } else {
+      const minimumMarker = point(cursor, 6);
+      shaftPoint = point(cursor, 12);
+      segments.push(
+        { start: cursor, end: shaftPoint },
+        { start: point(minimumMarker, 0, -7), end: point(minimumMarker, 0, 7) }
+      );
+    }
+
+    return {
+      boundary: { ...boundary },
+      shaftPoint,
+      segments,
+      circles,
+      label: null,
+      labelPosition: null
+    };
+  }
+
+  function relationshipEndpointGeometry(bounds, toward, range) {
+    const center = {
+      x: bounds.left + bounds.width / 2,
+      y: bounds.top + bounds.height / 2
+    };
+    const delta = { x: toward.x - center.x, y: toward.y - center.y };
+    const magnitude = Math.hypot(delta.x, delta.y) || 1;
+    const unit = { x: delta.x / magnitude, y: delta.y / magnitude };
+    const xDistance = unit.x === 0 ? Infinity : bounds.width / 2 / Math.abs(unit.x);
+    const yDistance = unit.y === 0 ? Infinity : bounds.height / 2 / Math.abs(unit.y);
+    const distance = Math.min(xDistance, yDistance);
+    const boundary = {
+      x: center.x + unit.x * distance,
+      y: center.y + unit.y * distance
+    };
+    return cardinalityEndpointGeometry(boundary, unit, range);
+  }
+
   function fitViewport(bounds, viewport, padding = 64, maximumZoom = 1) {
     if (!bounds || bounds.width <= 0 || bounds.height <= 0) return [1, 0, 0, 1, 0, 0];
 
@@ -435,10 +799,39 @@
     ROW_HEIGHT,
     NOTE_PADDING,
     CANVAS_FONT_FAMILY,
+    DEFAULT_BACKGROUND_COLORS,
+    DEFAULT_FOREGROUND_COLORS,
+    NOTE_PARAGRAPH_STYLES,
+    DEFAULT_TABLE_HEADER_COLOR,
+    DEFAULT_TABLE_HEADER_COLORS,
+    DEFAULT_ARROW_FORMATTING,
+    DEFAULT_FRAME_FORMATTING,
+    DEFAULT_NOTE_FORMATTING,
     topLeft,
     uncachedText,
     paddedBackgroundBounds,
     noteSelectionPadding,
+    noteFormatting,
+    noteParagraphStyle,
+    noteParagraphStyleFormatting,
+    inheritedNoteFormatting,
+    noteColorSwatches,
+    colorPaletteSections,
+    noteBorderColor,
+    tableHeaderColor,
+    setTableHeaderColor,
+    tableHeaderColorSwatches,
+    selectedTableHeaderColor,
+    arrowFormatting,
+    arrowStrokeDashArray,
+    arrowHeadGeometry,
+    shortenedArrowLinePoints,
+    arrowColorSwatches,
+    frameFormatting,
+    frameColorSwatches,
+    frameBounds,
+    frameLabelPosition,
+    frameLabelCanvasStyle,
     noteCanvasGeometry,
     noteStateGeometry,
     erdFilename,
@@ -446,11 +839,13 @@
     confirmDiscardChanges,
     shortcutAction,
     isSaveShortcut,
+    noteFormattingShortcut,
     selectedDiagramFilename,
     notePositionAt,
     snapPointToBounds,
     pointAtAnchor,
     arrowAttachment,
+    arrowIdForEndpointEditing,
     canvasLayer,
     transformedArrowEndpoints,
     createChangeTracker,
@@ -462,7 +857,11 @@
     setEntityIncluded,
     selectedEntityIds,
     visibleRelationships,
+    rangeLabel,
     cardinalityLabel,
+    crowFootCardinality,
+    cardinalityEndpointGeometry,
+    relationshipEndpointGeometry,
     fitViewport,
     panViewport,
     zoomForWheel,

data/lib/canvas_erd/web/index.html

@@ -66,6 +66,13 @@
               <div><dt>New</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>N</kbd></dd></div>
               <div><dt>Save</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>S</kbd></dd></div>
               <div><dt>Add note at cursor</dt><dd><kbd>N</kbd></dd></div>
+              <div><dt>Bold note</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>B</kbd></dd></div>
+              <div><dt>Italic note</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>I</kbd></dd></div>
+              <div><dt>Underline note</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>U</kbd></dd></div>
+              <div><dt>Title style</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>Alt</kbd> <kbd>1</kbd></dd></div>
+              <div><dt>Heading style</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>Alt</kbd> <kbd>2</kbd></dd></div>
+              <div><dt>Paragraph style</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>Alt</kbd> <kbd>3</kbd></dd></div>
+              <div><dt>Code style</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>Alt</kbd> <kbd>4</kbd></dd></div>
               <div><dt>Arrow tool</dt><dd><kbd>A</kbd></dd></div>
               <div><dt>Free arrow endpoint</dt><dd><kbd>Ctrl</kbd></dd></div>
               <div><dt>Toggle tables</dt><dd><kbd>T</kbd></dd></div>
@@ -76,6 +83,148 @@
               <div><dt>Shortcut help</dt><dd><kbd>?</kbd></dd></div>
             </dl>
           </div>
+          <div id="note-formatting" class="note-formatting" role="toolbar" aria-label="Note formatting" hidden>
+            <button id="note-bold" class="format-button note-bold" type="button" aria-label="Bold" title="Bold (⌘/Ctrl-B)" aria-pressed="false">B</button>
+            <button id="note-italic" class="format-button note-italic" type="button" aria-label="Italic" title="Italic (⌘/Ctrl-I)" aria-pressed="false">I</button>
+            <button id="note-underline" class="format-button note-underline" type="button" aria-label="Underline" title="Underline (⌘/Ctrl-U)" aria-pressed="false">U</button>
+            <div class="color-control">
+              <button id="note-text-color-button" class="note-color-button" type="button" aria-label="Text color" title="Text color" aria-expanded="false">
+                <span id="note-text-color-preview" class="color-preview" aria-hidden="true"></span>
+                <span>Text</span>
+              </button>
+              <div id="note-text-color-menu" class="color-menu" hidden>
+                <div id="note-text-color-swatches" class="color-swatches" role="group" aria-label="Text color swatches"></div>
+                <label class="custom-color">
+                  <span>Custom…</span>
+                  <input id="note-text-custom-color" type="color" value="#374151" aria-label="Custom text color">
+                </label>
+              </div>
+            </div>
+            <div class="color-control">
+              <button id="note-background-color-button" class="note-color-button" type="button" aria-label="Background color" title="Background color" aria-expanded="false">
+                <span id="note-background-color-preview" class="color-preview" aria-hidden="true"></span>
+                <span>Fill</span>
+              </button>
+              <div id="note-background-color-menu" class="color-menu" hidden>
+                <div id="note-background-color-swatches" class="color-swatches" role="group" aria-label="Background color swatches"></div>
+                <div class="color-menu-actions">
+                  <button id="note-background-transparent" class="transparent-option" type="button" aria-label="Transparent background" aria-pressed="false">
+                    <span class="color-preview transparent-color" aria-hidden="true"></span>
+                  </button>
+                  <label class="custom-color">
+                    <span>Custom…</span>
+                    <input id="note-background-custom-color" type="color" value="#fff2a8" aria-label="Custom background color">
+                  </label>
+                </div>
+              </div>
+            </div>
+            <label class="note-format-field">
+              <span>Style</span>
+              <select id="note-paragraph-style" aria-label="Paragraph style">
+                <option value="title">Title</option>
+                <option value="heading">Heading</option>
+                <option value="paragraph" selected>Paragraph</option>
+                <option value="code">Code</option>
+              </select>
+            </label>
+            <label class="note-format-field">
+              <span>Align</span>
+              <select id="note-alignment" aria-label="Text alignment">
+                <option value="left">Left</option>
+                <option value="center">Center</option>
+                <option value="right">Right</option>
+              </select>
+            </label>
+          </div>
+          <div id="table-formatting" class="table-formatting" role="toolbar" aria-label="Table formatting" hidden>
+            <div class="color-control">
+              <button id="table-header-color-button" class="note-color-button" type="button" aria-label="Table header color" title="Table header color" aria-expanded="false">
+                <span id="table-header-color-preview" class="color-preview" aria-hidden="true"></span>
+                <span>Header</span>
+              </button>
+              <div id="table-header-color-menu" class="color-menu" hidden>
+                <div id="table-header-color-swatches" class="color-swatches" role="group" aria-label="Table header color swatches"></div>
+                <label class="custom-color">
+                  <span>Custom…</span>
+                  <input id="table-header-custom-color" type="color" value="#243b63" aria-label="Custom table header color">
+                </label>
+              </div>
+            </div>
+          </div>
+          <div id="arrow-formatting" class="arrow-formatting" role="toolbar" aria-label="Arrow formatting" hidden>
+            <div class="color-control">
+              <button id="arrow-color-button" class="note-color-button" type="button" aria-label="Arrow color" title="Arrow color" aria-expanded="false">
+                <span id="arrow-color-preview" class="color-preview" aria-hidden="true"></span>
+                <span>Color</span>
+              </button>
+              <div id="arrow-color-menu" class="color-menu" hidden>
+                <div id="arrow-color-swatches" class="color-swatches" role="group" aria-label="Arrow color swatches"></div>
+                <label class="custom-color">
+                  <span>Custom…</span>
+                  <input id="arrow-custom-color" type="color" value="#243b63" aria-label="Custom arrow color">
+                </label>
+              </div>
+            </div>
+            <label class="note-format-field">
+              <span>Start</span>
+              <select id="arrow-start-head" aria-label="Start arrowhead">
+                <option value="none" selected>None</option>
+                <option value="open">Arrow — open</option>
+                <option value="filled">Arrow — closed</option>
+                <option value="circle-open">Circle — open</option>
+                <option value="circle">Circle — closed</option>
+                <option value="diamond-open">Diamond — open</option>
+                <option value="diamond">Diamond — closed</option>
+              </select>
+            </label>
+            <label class="note-format-field">
+              <span>End</span>
+              <select id="arrow-end-head" aria-label="End arrowhead">
+                <option value="none">None</option>
+                <option value="open">Arrow — open</option>
+                <option value="filled" selected>Arrow — closed</option>
+                <option value="circle-open">Circle — open</option>
+                <option value="circle">Circle — closed</option>
+                <option value="diamond-open">Diamond — open</option>
+                <option value="diamond">Diamond — closed</option>
+              </select>
+            </label>
+            <label class="note-format-field">
+              <span>Line</span>
+              <select id="arrow-line-style" aria-label="Arrow line style">
+                <option value="solid" selected>Solid</option>
+                <option value="dashed">Dashed</option>
+                <option value="dotted">Dotted</option>
+              </select>
+            </label>
+            <label class="note-format-field">
+              <span>Width</span>
+              <input id="arrow-stroke-width" type="number" min="0.5" max="20" step="0.25" value="2.25" aria-label="Arrow line width">
+            </label>
+          </div>
+          <div id="frame-formatting" class="frame-formatting" role="toolbar" aria-label="Frame formatting" hidden>
+            <div class="color-control">
+              <button id="frame-color-button" class="note-color-button" type="button" aria-label="Frame color" title="Frame color" aria-expanded="false">
+                <span id="frame-color-preview" class="color-preview" aria-hidden="true"></span>
+                <span>Color</span>
+              </button>
+              <div id="frame-color-menu" class="color-menu" hidden>
+                <div id="frame-color-swatches" class="color-swatches" role="group" aria-label="Frame color swatches"></div>
+                <label class="custom-color">
+                  <span>Custom…</span>
+                  <input id="frame-custom-color" type="color" value="#243b63" aria-label="Custom frame color">
+                </label>
+              </div>
+            </div>
+            <label class="note-format-field">
+              <span>Border</span>
+              <select id="frame-line-style" aria-label="Frame border style">
+                <option value="solid" selected>Solid</option>
+                <option value="dashed">Dashed</option>
+                <option value="dotted">Dotted</option>
+              </select>
+            </label>
+          </div>
           <div class="canvas-tools" aria-label="Canvas tools">
             <button id="toggle-tables" class="icon-button" type="button" aria-label="Show tables" title="Show tables (T)" aria-expanded="false">
               <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M3 20.4V3.6C3 3.26863 3.26863 3 3.6 3H20.4C20.7314 3 21 3.26863 21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z" stroke="#000000" stroke-width="1.5"></path><path d="M3 16.5H21" stroke="#000000" stroke-width="1.5"></path><path d="M3 12H21" stroke="#000000" stroke-width="1.5"></path><path d="M21 7.5H3" stroke="#000000" stroke-width="1.5"></path><path d="M12 21V3" stroke="#000000" stroke-width="1.5"></path></svg>
@@ -83,10 +232,13 @@
             <button id="layout-tables" class="icon-button" type="button" aria-label="Layout tables" title="Layout tables (L)" aria-expanded="false">
               <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M21 3.6V12H12V3H20.4C20.7314 3 21 3.26863 21 3.6Z" stroke="#000000" stroke-width="1.5"></path><path d="M21 20.4V12H12V21H20.4C20.7314 21 21 20.7314 21 20.4Z" stroke="#000000" stroke-width="1.5"></path><path d="M3 12V3.6C3 3.26863 3.26863 3 3.6 3H12V12H3Z" stroke="#000000" stroke-width="1.5"></path><path d="M3 12V20.4C3 20.7314 3.26863 21 3.6 21H12V12H3Z" stroke="#000000" stroke-width="1.5"></path></svg>
             </button>
+            <button id="add-frame" class="icon-button" type="button" aria-label="Frame tool" title="Frame tool" aria-pressed="false">
+              <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="16" rx="1" stroke="#000000" stroke-width="1.5" stroke-dasharray="3 2"></rect><path d="M6 8H12" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path></svg>
+            </button>
             <button id="add-note" class="icon-button" type="button" aria-label="Add note" title="Add note (N)">
               <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M12 8L12 16M12 8H8M12 8H16" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 13.5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13.5M21 10.5V5C21 3.89543 20.1046 3 19 3H5C3.89543 3 3 3.89543 3 5V10.5" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"></path><path d="M19.5 13.5V10.5H22.5V13.5H19.5Z" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"></path><path d="M1.5 13.5V10.5H4.5V13.5H1.5Z" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"></path></svg>
             </button>
-            <button id="add-arrow" class="icon-button" type="button" aria-label="Arrow tool" title="Arrow tool (A) · Double-click an arrow to edit endpoints · Hold Ctrl for a free endpoint" aria-pressed="false">
+            <button id="add-arrow" class="icon-button" type="button" aria-label="Arrow tool" title="Arrow tool (A) · Select an arrow to edit endpoints · Hold Ctrl for a free endpoint" aria-pressed="false">
               <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M6.00005 19L19 5.99996M19 5.99996V18.48M19 5.99996H6.52005" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
             </button>
           </div>