@heyramzi/ui 1.54.1 → 2.0.0

package/src/canvas/ui/canvas-grid.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { useStore } from "@xyflow/svelte";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	/** Flow units between dots at the finest level, the same as the snap grid. */
+	gap?: number;
+	/** Dot diameter in flow units at the finest level, so it grows and shrinks with zoom. */
+	size?: number;
+	/** Any CSS colour; the theme's pattern colour when unset. */
+	color?: string;
+}
+
+// =========================
+// CONSTANTS
+// =========================
+// Five levels, each twice as wide. A level fades out between these screen spacings,
+// so a zoomed-out board keeps an even texture instead of a grey haze.
+const LEVELS = 5;
+const FADE_START = 6;
+const FADE_END = 12;
+// Screen-pixel bounds: a dot never vanishes zoomed out or turns into a blob zoomed in.
+const MIN_RADIUS = 0.5;
+const MAX_RADIUS = 2;
+
+// =========================
+// PROPS
+// =========================
+let { gap = 20, size = 2, color = "var(--xy-background-pattern-color, var(--xy-background-pattern-color-default))" }: Props = $props();
+
+// =========================
+// STATE
+// =========================
+const store = useStore();
+let canvas = $state<HTMLCanvasElement | null>(null);
+let width = $state(0);
+let height = $state(0);
+let ratio = $state(1);
+let theme = $state(0);
+
+// =========================
+// FUNCTIONS
+// =========================
+function smoothstep(from: number, to: number, value: number) {
+	const t = Math.min(1, Math.max(0, (value - from) / (to - from)));
+	return t * t * (3 - 2 * t);
+}
+
+// Pan redraws every frame, so a tile is built once per size and colour.
+// eslint-disable-next-line svelte/prefer-svelte-reactivity -- render cache written inside the draw effect, never rendered
+const tiles = new Map<string, HTMLCanvasElement>();
+
+function dotTile(step: number, radius: number, fill: string) {
+	const key = `${step}:${radius.toFixed(2)}:${fill}`;
+	const hit = tiles.get(key);
+	if (hit) return hit;
+	if (tiles.size > 64) tiles.clear();
+	const tile = document.createElement("canvas");
+	tiles.set(key, tile);
+	tile.width = step;
+	tile.height = step;
+	const context = tile.getContext("2d");
+	if (!context) return tile;
+	context.fillStyle = fill;
+	context.beginPath();
+	context.arc(step / 2, step / 2, radius, 0, Math.PI * 2);
+	context.fill();
+	return tile;
+}
+
+// fallow-ignore-next-line complexity
+function draw(element: HTMLCanvasElement, view: { x: number; y: number; zoom: number }, fill: string) {
+	const context = element.getContext("2d");
+	if (!context) return;
+	context.setTransform(1, 0, 0, 1, 0, 0);
+	context.clearRect(0, 0, element.width, element.height);
+
+	for (let level = 0; level < LEVELS; level++) {
+		const spacing = gap * 2 ** level * view.zoom;
+		// A coarser level draws bigger dots, so zooming out reads as moving away.
+		const screenRadius = (size / 2) * 2 ** level * view.zoom;
+		const radius = Math.min(MAX_RADIUS, Math.max(MIN_RADIUS, screenRadius)) * ratio;
+		const last = level === LEVELS - 1;
+		const alpha = last ? 1 : smoothstep(FADE_START, FADE_END, spacing);
+		if (alpha <= 0.01) continue;
+		const step = spacing * ratio;
+		const tileSize = Math.max(2, Math.round(step));
+		const scale = step / tileSize;
+		const pattern = context.createPattern(dotTile(tileSize, radius / scale, fill), "repeat");
+		if (!pattern) return;
+		pattern.setTransform(
+			new DOMMatrix([scale, 0, 0, scale, view.x * ratio - step / 2, view.y * ratio - step / 2]),
+		);
+		context.globalAlpha = alpha;
+		context.fillStyle = pattern;
+		context.fillRect(0, 0, element.width, element.height);
+		if (alpha >= 0.999) break;
+	}
+	context.globalAlpha = 1;
+}
+
+// =========================
+// EFFECTS
+// =========================
+$effect(() => {
+	if (!canvas) return;
+	const element = canvas;
+	const observer = new ResizeObserver(() => {
+		width = element.clientWidth;
+		height = element.clientHeight;
+		ratio = window.devicePixelRatio || 1;
+	});
+	observer.observe(element);
+	return () => observer.disconnect();
+});
+
+// The dot colour is a theme token, so a theme switch redraws.
+$effect(() => {
+	const root = document.documentElement;
+	const observer = new MutationObserver(() => (theme += 1));
+	observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+	return () => observer.disconnect();
+});
+
+// Read once per theme: a computed style read mid-pan restyles the whole page every frame.
+let fill = $derived.by(() => {
+	void theme;
+	void color;
+	return canvas ? getComputedStyle(canvas).color : "";
+});
+
+// fallow-ignore-next-line complexity
+$effect(() => {
+	if (!canvas || !width || !height) return;
+	const pixelWidth = Math.round(width * ratio);
+	const pixelHeight = Math.round(height * ratio);
+	if (canvas.width !== pixelWidth) canvas.width = pixelWidth;
+	if (canvas.height !== pixelHeight) canvas.height = pixelHeight;
+	draw(canvas, store.viewport, fill);
+});
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<canvas
+	bind:this={canvas}
+	aria-hidden="true"
+	class="svelte-flow__background svelte-flow__container"
+	style:color
+></canvas>

package/src/canvas/ui/canvas-ui.css

@@ -0,0 +1,350 @@
+/* Canvas chrome: tool rail, pill, selection bar. Each colour reads a host token with a plain fallback. */
+
+:root {
+  --cv-surface: var(--card, #fff);
+  --cv-surface-hover: var(--accent, #f1f1f4);
+  --cv-line: var(--border, #e4e4e9);
+  --cv-ink: var(--foreground, #1c1c24);
+  --cv-ink-muted: var(--muted-foreground, #6b6b78);
+  --cv-selection: var(--ring, #4a4ad8);
+  --cv-selection-fill: color-mix(in oklch, var(--cv-selection) 12%, transparent);
+  --cv-elevation: var(--elev-raised, 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06));
+  --cv-elevation-pop: var(
+    --elev-overlay,
+    0 8px 24px rgb(0 0 0 / 0.12),
+    0 1px 3px rgb(0 0 0 / 0.08)
+  );
+  --cv-radius-btn: var(--radius-lg, 8px);
+  /* Concentric: the bar's corner is the button's plus the 4px padding, so the two curves stay parallel. */
+  --cv-radius-bar: calc(var(--cv-radius-btn) + 4px);
+  --cv-btn: 32px;
+  --cv-edge: 12px;
+}
+
+@media (pointer: coarse) {
+  :root {
+    --cv-btn: 40px;
+  }
+}
+
+.svelte-flow .svelte-flow__panel.cv-dock {
+  margin: var(--cv-edge);
+  /* The panel's box is wider than its bars, so only the bars take the pointer; the rest is canvas. */
+  pointer-events: none;
+}
+
+/* xyflow's centring assumes a 15px margin. */
+.svelte-flow .svelte-flow__panel.cv-dock.left.center {
+  transform: translateY(-50%);
+}
+
+.svelte-flow .svelte-flow__panel.cv-dock.top.center,
+.svelte-flow .svelte-flow__panel.cv-dock.bottom.center {
+  transform: translateX(-50%);
+}
+
+/* Beside the selection: StylePanel writes the spot, and a phone keeps its own row above the pill. */
+@media (min-width: 640px) {
+  .svelte-flow .svelte-flow__panel.cv-dock.cv-style-dock.is-placed {
+    inset: auto;
+    left: var(--cv-style-x);
+    top: var(--cv-style-y);
+    margin: 0;
+    transform: none;
+  }
+}
+
+/* One surface for every bar, the rail, the pill, the selection bar and the style bar. */
+.cv-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid var(--cv-line);
+  border-radius: var(--cv-radius-bar);
+  background: var(--cv-surface);
+  box-shadow: var(--cv-elevation);
+  pointer-events: auto;
+}
+
+.cv-rail {
+  flex-direction: column;
+}
+
+/* The rail and its style bar side by side, the style bar centred on the rail. */
+.cv-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+}
+
+/* Groups are set apart by space, never by a rule. */
+.cv-gap {
+  flex: none;
+  width: 6px;
+  height: 6px;
+}
+
+.cv-btn {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--cv-btn);
+  height: var(--cv-btn);
+  border: 0;
+  border-radius: var(--cv-radius-btn);
+  background: transparent;
+  color: var(--cv-ink-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out),
+    color var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out),
+    scale var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out);
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .cv-btn:hover:not(:disabled) {
+    background: var(--cv-surface-hover);
+    color: var(--cv-ink);
+  }
+}
+
+.cv-btn:active:not(:disabled) {
+  scale: 0.94;
+}
+
+/* One active style for a tool, a size, a brush and an open popover. */
+.cv-btn[aria-pressed="true"],
+.cv-btn[aria-expanded="true"],
+.cv-btn[data-state="open"] {
+  background: var(--cv-surface-hover);
+  color: var(--cv-ink);
+}
+
+.cv-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.cv-btn:focus-visible,
+.cv-swatch:focus-visible {
+  outline: 2px solid var(--cv-selection);
+  outline-offset: 1px;
+}
+
+/* A readout between two buttons, like the zoom percentage. */
+.cv-readout {
+  width: auto;
+  min-width: 44px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.cv-swatch {
+  position: relative;
+  flex: none;
+  width: var(--cv-btn);
+  height: var(--cv-btn);
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* The ink disc is 16px inside a 32px hit area. */
+.cv-swatch::before {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: 16px;
+  height: 16px;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: var(--swatch);
+  outline: 1px solid oklch(0 0 0 / 0.14);
+  outline-offset: -1px;
+  transition: scale var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out);
+}
+
+:root.dark .cv-swatch::before {
+  outline-color: oklch(1 0 0 / 0.16);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .cv-swatch:hover::before {
+    scale: 1.1;
+  }
+}
+
+.cv-swatch[aria-pressed="true"]::before {
+  box-shadow:
+    0 0 0 2px var(--cv-surface),
+    0 0 0 4px var(--cv-ink);
+}
+
+.cv-dot {
+  width: var(--dot);
+  height: var(--dot);
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* A label on hover, for a pointer that can hover. Touch gets the aria-label alone. */
+@media (hover: hover) {
+  .cv-btn[data-tip]::after,
+  .cv-swatch[data-tip]::after {
+    content: attr(data-tip);
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    translate: -50% 4px;
+    padding: 4px 8px;
+    border-radius: var(--radius-sm, 6px);
+    background: var(--foreground, #1c1c24);
+    color: var(--background, #fff);
+    font-size: 12px;
+    line-height: 1.2;
+    white-space: pre;
+    pointer-events: none;
+    opacity: 0;
+    z-index: 5;
+    transition:
+      opacity var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out),
+      translate var(--duration-fast, 150ms) var(--ease-smooth-out, ease-out);
+  }
+
+  .cv-btn[data-tip]:hover::after,
+  .cv-btn[data-tip]:focus-visible::after,
+  .cv-swatch[data-tip]:hover::after,
+  .cv-swatch[data-tip]:focus-visible::after {
+    opacity: 1;
+    translate: -50% 0;
+    transition-delay: 350ms;
+  }
+
+  /* On the rail the label opens to the right. */
+  .cv-rail .cv-btn[data-tip]::after {
+    top: 50%;
+    bottom: auto;
+    left: calc(100% + 10px);
+    translate: -4px -50%;
+  }
+
+  .cv-rail .cv-btn[data-tip]:hover::after,
+  .cv-rail .cv-btn[data-tip]:focus-visible::after {
+    translate: 0 -50%;
+  }
+
+  .cv-btn:active::after,
+  .cv-btn:disabled::after,
+  .cv-btn[aria-expanded="true"]::after,
+  .cv-btn[data-state="open"]::after {
+    opacity: 0 !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cv-btn,
+  .cv-swatch::before,
+  .cv-btn[data-tip]::after {
+    transition: none;
+  }
+
+  .cv-btn:active:not(:disabled) {
+    scale: 1;
+  }
+}
+
+/* On a bar docked to the right edge the label opens to the left. */
+@media (hover: hover) {
+  .cv-side .cv-btn[data-tip]::after,
+  .cv-side .cv-swatch[data-tip]::after {
+    top: 50%;
+    bottom: auto;
+    left: auto;
+    right: calc(100% + 10px);
+    translate: 4px -50%;
+  }
+
+  .cv-side .cv-btn[data-tip]:hover::after,
+  .cv-side .cv-btn[data-tip]:focus-visible::after,
+  .cv-side .cv-swatch[data-tip]:hover::after,
+  .cv-side .cv-swatch[data-tip]:focus-visible::after {
+    translate: 0 -50%;
+  }
+}
+
+@property --cv-fade-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --cv-fade-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+/* The scroll position moves each fade, so only the side that still scrolls is faded. */
+@keyframes cv-fade-start {
+  0% {
+    --cv-fade-start: 0px;
+  }
+  4%,
+  100% {
+    --cv-fade-start: 28px;
+  }
+}
+@keyframes cv-fade-end {
+  0%,
+  96% {
+    --cv-fade-end: 28px;
+  }
+  100% {
+    --cv-fade-end: 0px;
+  }
+}
+
+/* Narrow screens: the style panel docks above the pill as a scrolling row, so it never covers the canvas. */
+@media (max-width: 639px) {
+  .svelte-flow .svelte-flow__panel.cv-dock.cv-style-dock {
+    /* Starts right of the rail, so the two never overlap. */
+    inset: auto 0 calc(var(--cv-edge) + 64px) calc(var(--cv-edge) * 2 + var(--cv-btn) + 10px);
+    transform: none;
+  }
+
+  .svelte-flow .cv-style-dock .cv-style {
+    flex-direction: row;
+    max-width: 100%;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--cv-fade-start),
+      black calc(100% - var(--cv-fade-end)),
+      transparent
+    );
+    animation:
+      cv-fade-start linear both,
+      cv-fade-end linear both;
+    animation-timeline: scroll(self inline);
+  }
+
+  .svelte-flow .cv-style-dock .cv-section {
+    flex: none;
+  }
+
+  .svelte-flow .cv-style-dock .cv-swatches {
+    grid-template-columns: none;
+    grid-template-rows: repeat(2, var(--cv-btn));
+    grid-auto-flow: column;
+    grid-auto-columns: var(--cv-btn);
+  }
+}

package/src/canvas/ui/forward-wheel.ts

@@ -0,0 +1,29 @@
+// An overlay above xyflow's zoom pane never sees a wheel or a pinch, so it hands them down.
+
+export function forwardWheel(node: HTMLElement): () => void {
+  const handler = (event: WheelEvent) => {
+    const zoomPane = node.closest(".svelte-flow")?.querySelector(".svelte-flow__zoom");
+    if (!zoomPane) return;
+    event.preventDefault();
+    zoomPane.dispatchEvent(
+      new WheelEvent("wheel", {
+        deltaX: event.deltaX,
+        deltaY: event.deltaY,
+        deltaZ: event.deltaZ,
+        deltaMode: event.deltaMode,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        screenX: event.screenX,
+        screenY: event.screenY,
+        ctrlKey: event.ctrlKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+  };
+  node.addEventListener("wheel", handler, { passive: false });
+  return () => node.removeEventListener("wheel", handler);
+}

package/src/canvas/ui/icons.ts

@@ -0,0 +1,124 @@
+// Stroke paths for the tool bar icons, drawn on a 24px grid. One list per icon, one path per entry.
+
+export type IconName =
+  | "select"
+  | "hand"
+  | "pen"
+  | "highlighter"
+  | "eraser"
+  | "text"
+  | "rectangle"
+  | "ellipse"
+  | "diamond"
+  | "frame"
+  | "shapes"
+  | "undo"
+  | "redo"
+  | "cards"
+  | "search"
+  | "note"
+  | "insert"
+  | "connect"
+  | "distribute-h"
+  | "distribute-v"
+  | "minus"
+  | "more"
+  | "mm-child"
+  | "mm-sibling"
+  | "mm-line-solid"
+  | "mm-line-dashed"
+  | "mm-ai"
+  | "mm-map"
+  | "mm-right"
+  | "mm-tree"
+  | "mm-curve"
+  | "mm-elbow"
+  | "mm-straight"
+  | "mm-center";
+
+export const ICON_PATHS: Record<IconName, readonly string[]> = {
+  select: ["M5 3.5 18.5 10l-5.6 1.9L10.7 17.5z"],
+  hand: [
+    "M8 13V6.5a1.5 1.5 0 0 1 3 0V11m0-5.5a1.5 1.5 0 0 1 3 0V11m0-4a1.5 1.5 0 0 1 3 0v6.5a6.5 6.5 0 0 1-6.5 6.5h-.4a6 6 0 0 1-4.7-2.3L4.6 14.6a1.5 1.5 0 0 1 2.3-1.9L8 14",
+  ],
+  pen: ["M4 20l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L8 19z", "M14.5 6.5l3 3"],
+  highlighter: ["M14.5 4.5l5 5-8 8-5 1.5 1-5z", "M4 21h16"],
+  eraser: [
+    "M4.5 15l8.5-8.5a2.1 2.1 0 0 1 3 0l3 3a2.1 2.1 0 0 1 0 3L12 20H8z",
+    "M10.5 9l6 6M12 20h8",
+  ],
+  text: ["M5 7V5.5h14V7M12 5.5V19M9 19h6"],
+  rectangle: ["M6 6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z"],
+  ellipse: ["M4 12a8 6 0 1 0 16 0a8 6 0 1 0-16 0"],
+  diamond: ["M12 4l8 8-8 8-8-8z"],
+  frame: ["M8 4v16M16 4v16M4 8h16M4 16h16"],
+  shapes: [
+    "M5 12.5h5a1.5 1.5 0 0 1 1.5 1.5v5a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 19v-5A1.5 1.5 0 0 1 5 12.5z",
+    "M11.5 8a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0",
+  ],
+  undo: ["M9 14 4 9l5-5M4 9h9.5a6 6 0 0 1 0 12H11"],
+  redo: ["M15 14l5-5-5-5M20 9h-9.5a6 6 0 0 0 0 12H13"],
+  cards: [
+    "M7 4h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z",
+    "M12 8.5v7M8.5 12h7",
+  ],
+  search: ["M4.5 11a6.5 6.5 0 1 0 13 0a6.5 6.5 0 1 0-13 0", "M16 16l4 4"],
+  note: [
+    "M6 4h12a1 1 0 0 1 1 1v9l-5 5H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z",
+    "M19 14h-4a1 1 0 0 0-1 1v4",
+  ],
+  insert: ["M12 5v14M5 12h14"],
+  connect: [
+    "M4.5 4.5a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0-3 0",
+    "M6 6v4.5a3 3 0 0 0 3 3h9",
+    "M15 10.5l3.5 3-3.5 3",
+  ],
+  "distribute-h": ["M4 4v16M20 4v16", "M9 8h6v8H9z"],
+  "distribute-v": ["M4 4h16M4 20h16", "M8 9h8v6H8z"],
+  minus: ["M5 12h14"],
+  more: [
+    "M4.8 12a1.2 1.2 0 1 0 2.4 0a1.2 1.2 0 1 0-2.4 0",
+    "M10.8 12a1.2 1.2 0 1 0 2.4 0a1.2 1.2 0 1 0-2.4 0",
+    "M16.8 12a1.2 1.2 0 1 0 2.4 0a1.2 1.2 0 1 0-2.4 0",
+  ],
+  "mm-child": [
+    "M4.0 8h3.0a1.5 1.5 0 0 1 1.5 1.5v5.0a1.5 1.5 0 0 1-1.5 1.5h-3.0a1.5 1.5 0 0 1-1.5-1.5v-5.0a1.5 1.5 0 0 1 1.5-1.5z",
+    "M8.5 12h3.5",
+    "M14 7h5.5a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2z",
+    "M16.75 10v4M14.75 12h4",
+  ],
+  "mm-sibling": [
+    "M4 6h2.5M4 17.5h2.5M4 6v11.5",
+    "M8.5 3h7a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2z",
+    "M8.5 14.5h7a2 2 0 0 1 2 2v2.5a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-2.5a2 2 0 0 1 2-2z",
+    "M12 15.75v4M10 17.75h4",
+  ],
+  "mm-line-solid": [
+    "M2.5 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0",
+    "M6.5 12h11",
+    "M17.5 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0",
+  ],
+  "mm-line-dashed": [
+    "M2.5 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0",
+    "M7.5 12h2M11 12h2M14.5 12h2",
+    "M17.5 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0",
+  ],
+  "mm-ai": [
+    "M10.5 5l1.9 5.1L17.5 12l-5.1 1.9L10.5 19l-1.9-5.1L3.5 12l5.1-1.9z",
+    "M18.5 3.5v4M16.5 5.5h4",
+  ],
+  "mm-map": [
+    "M9 10h6v4H9z",
+    "M9 12C6 12 6 6 3 6M9 12c-3 0-3 6-6 6M15 12c3 0 3-6 6-6M15 12c3 0 3 6 6 6",
+  ],
+  "mm-right": ["M3 10h6v4H3z", "M9 12c4 0 4-6 8-6h4M9 12c4 0 4 6 8 6h4"],
+  "mm-tree": [
+    "M9 3h6v4H9z",
+    "M12 7v4M5 11h14M5 11v3M19 11v3M12 11v3",
+    "M3 14h4v4H3zM10 14h4v4h-4zM17 14h4v4h-4z",
+  ],
+  "mm-curve": ["M4 18c8 0 8-12 16-12"],
+  "mm-elbow": ["M4 18h8V6h8"],
+  "mm-straight": ["M4 18 20 6"],
+  "mm-center": ["M12 8a4 4 0 1 0 0 8 4 4 0 1 0 0-8z", "M12 3v3M12 18v3M3 12h3M18 12h3"],
+};