@diagrammo/dgmo 0.35.0 → 0.37.0

package/.claude/commands/dgmo.md

@@ -63,7 +63,20 @@ For **examples** of real diagrams, call `mcp__dgmo__get_examples("<type>")` —
 
 ## Your Workflow
 
-**Primary goal: get the user seeing a visualization as fast as possible.**
+**Primary goal: get the user seeing a visualization as fast as possible — in the desktop app if they have it, otherwise on the web.**
+
+### Where the diagram goes — decide this once per session
+
+Before showing the first diagram, call `mcp__dgmo__check_app_installed()` **once** and remember the answer for the rest of the session. It decides your default visual output:
+
+- **App installed → open the saved file live in the app.** Save the `.dgmo` source first (see "Always save the source"), then `mcp__dgmo__open_in_app({ dgmo, filePath: "<absolute path to the saved file>" })`. The app opens *that file*, so the user edits it in the app and changes autosave back to the same file — one source of truth, live re-render. Do NOT open an online URL and do NOT render a PNG.
+- **App not installed → open the online editor.** `mcp__dgmo__share_diagram(dgmo)` then `open <url>` in the shell. This lands the user on online.diagrammo.app with the chart and the code side-by-side, tweakable and shareable. Don't just print the URL — always `open` it.
+
+**Always save the source.** Whether or not the app is installed, write the diagram to `<name>.dgmo` in the current project/working directory so the user always has one editable artifact. Use a short kebab-case name from the diagram's title (e.g. `checkout-flow.dgmo`). This file IS the deliverable; the app or URL just displays it.
+
+**Never render an image unless the user explicitly asks** (see "Image output"). A PNG/SVG is not a default output — don't create files the user didn't request.
+
+Don't ask the user how they want to view the diagram — the check above decides it. They can ask for a PNG, the desktop app, or a share URL explicitly if they want something else.
 
 ### Creating a new diagram
 
@@ -71,14 +84,12 @@ For **examples** of real diagrams, call `mcp__dgmo__get_examples("<type>")` —
 2. **Get syntax + examples** — call `mcp__dgmo__get_language_reference("<type>")` and `mcp__dgmo__get_examples("<type>")`.
 3. **Write the `.dgmo` content** — compose the markup.
 4. **Validate first** — call `mcp__dgmo__validate_diagram(dgmo)` to catch syntax errors before rendering. If errors come back, fix them and validate again.
-5. **Open on online.diagrammo.app** — the **default** visual output. Call `mcp__dgmo__share_diagram(dgmo)` to get a URL, then immediately run `open <url>` in the shell. This lands the user on the web editor where they see the chart AND the code side-by-side, can tweak the markup interactively, and can share the link as-is. Do NOT just print the URL — always `open` it.
-
-   **Exception — image-output intent detected:** if the user's prompt explicitly asks for an image or saved file (phrases like "save as PNG", "export to SVG", "make an image", "render to a file", "give me a png", "I need an SVG"), skip the share URL and go straight to `mcp__dgmo__render_diagram` (see "Image output" below). The detection is intent-based, not keyword-strict — if in doubt, default to share URL and offer "Want me to save as PNG/SVG instead?"
+5. **Save the source** — write the validated markup to `<name>.dgmo` in the working directory.
+6. **Show it** — per "Where the diagram goes": app installed → `mcp__dgmo__open_in_app({ dgmo, filePath })`; not installed → `mcp__dgmo__share_diagram(dgmo)` + `open <url>`.
 
-   **Side-by-side variants** still use `mcp__dgmo__preview_diagram` (multi-diagram preview is its killer feature). See "Side-by-side variants" below.
-6. **Save the source file** (if working in a project) — write it to `<name>.dgmo` so the user has an editable copy.
+**Exception — image-output intent detected:** if the user's prompt explicitly asks for an image or saved file (phrases like "save as PNG", "export to SVG", "make an image", "render to a file", "give me a png", "I need an SVG"), still save the `.dgmo` source, then go to `mcp__dgmo__render_diagram` (see "Image output") instead of step 6. Detection is intent-based — if in doubt, use the step-6 default and offer "Want me to save as PNG/SVG instead?"
 
-Do not ask the user how they want to view the diagram. Just open the share URL. They can ask for other formats if they want.
+**Side-by-side variants** use `mcp__dgmo__preview_diagram` (multi-diagram preview is its killer feature). See "Side-by-side variants" below.
 
 ### Editing an existing diagram
 
@@ -88,7 +99,7 @@ When the user asks to modify a `.dgmo` file or says "update this diagram":
 2. **Understand it** — identify the chart type, key elements, and structure.
 3. **Make the change** — edit the file using the Edit tool. Preserve the user's style and organization.
 4. **Validate** — call `mcp__dgmo__validate_diagram(dgmo)` on the updated content.
-5. **Preview** — call `mcp__dgmo__share_diagram(dgmo)` and `open <url>` so the user sees the result on online.diagrammo.app. (Image-output intent exception applies — if the user asked for a PNG/SVG file explicitly, render to file instead.)
+5. **Show it** — per "Where the diagram goes": app installed → `mcp__dgmo__open_in_app({ dgmo, filePath: "<the file you just edited>" })` so it re-renders live in the app; not installed → `mcp__dgmo__share_diagram(dgmo)` + `open <url>`. (Image-output exception applies — if the user asked for a PNG/SVG file explicitly, render to file instead.)
 
 Keep the diff minimal — don't rewrite the whole file when adding one element.
 
@@ -150,11 +161,12 @@ Trigger phrases: "save as PNG", "export to SVG", "make an image", "render to a f
 
 | What the user wants | How to do it |
 |---|---|
-| **Quick look in the desktop app** | `mcp__dgmo__open_in_app(dgmo)` — opens directly in Diagrammo (macOS) |
+| **Open in the desktop app (no saved file)** | `mcp__dgmo__open_in_app({ dgmo })` — deep-links an ephemeral copy into Diagrammo. Prefer the `filePath` form (open the saved file) whenever you've saved the source. |
+| **Force the online editor even though the app is installed** | `mcp__dgmo__share_diagram(dgmo)` + `open <url>` |
 | **Local HTML preview (not online.diagrammo.app)** | `mcp__dgmo__preview_diagram([{dgmo, title}])` — useful when the user specifically wants a local file or is offline |
 | **Copy markup to clipboard** | Run `echo '<dgmo markup>' \| pbcopy` |
 
-(The share URL — `mcp__dgmo__share_diagram` + `open` — is the DEFAULT visual output, not an alternative. See "Creating a new diagram → step 5" above.)
+(The default visual output is decided by `check_app_installed` — open the saved file in the app when installed, otherwise the online share URL. See "Where the diagram goes" above. The options here are for when the user explicitly asks for something else.)
 
 ### Embedding diagrams in docs
 
@@ -187,7 +199,7 @@ If the user wants the link in clipboard rather than opened (e.g., they want to p
 echo '<url>' | pbcopy
 ```
 
-Then tell the user it's been copied. Otherwise, the default is always `open <url>` — that's what step 5 of the main workflow does.
+Then tell the user it's been copied. Otherwise, the default visual output is the app-aware behavior from "Where the diagram goes" (open the saved file in the app when installed, else `open <url>`).
 
 ## CLI Reference
 
@@ -271,6 +283,7 @@ series A (red), B (blue), C (green)  ⚠  for ≥2 series, prefer the indented b
 
 ## Tips
 
+- Output target: call `mcp__dgmo__check_app_installed()` once per session. App installed → save the `.dgmo` and open that file live in the app (`open_in_app` with `filePath`); not installed → online share URL. Always save the source either way; never render a PNG unless asked.
 - Default palette: `slate` — use it unless the user requests otherwise.
 - Always validate before rendering — `validate_diagram` is much faster than a failed render.
 - Always call `get_examples` before generating an unfamiliar chart type — real examples beat guessing.

package/.cursorrules

@@ -112,6 +112,8 @@ Valid markup is the floor, not the goal. A good diagram reads at a glance. Apply
 
 **Need more than the index gives you?** Fetch the per-type section: MCP `get_language_reference(type)` / `get_examples(type)`, or read that type's section below. The `suggest_chart_type` tool returns the chosen type's section automatically.
 
+**When the type isn't obvious, ask — don't guess.** Call `suggest_chart_type` first. If it returns an `⚠️ ASK THE USER` directive (the request is ambiguous between candidates, or nothing matched), present those candidate options to the user and wait for their pick before generating — never silently choose. A confident result (high/medium) you can proceed with.
+
 ### Common examples (curated, parse-clean)
 
 _The most common types, inline so you can generate them without a fetch. For the other 37, get the per-type section (see below)._

package/.github/copilot-instructions.md

@@ -112,6 +112,8 @@ Valid markup is the floor, not the goal. A good diagram reads at a glance. Apply
 
 **Need more than the index gives you?** Fetch the per-type section: MCP `get_language_reference(type)` / `get_examples(type)`, or read that type's section below. The `suggest_chart_type` tool returns the chosen type's section automatically.
 
+**When the type isn't obvious, ask — don't guess.** Call `suggest_chart_type` first. If it returns an `⚠️ ASK THE USER` directive (the request is ambiguous between candidates, or nothing matched), present those candidate options to the user and wait for their pick before generating — never silently choose. A confident result (high/medium) you can proceed with.
+
 ### Common examples (curated, parse-clean)
 
 _The most common types, inline so you can generate them without a fetch. For the other 37, get the per-type section (see below)._

package/.windsurfrules

@@ -112,6 +112,8 @@ Valid markup is the floor, not the goal. A good diagram reads at a glance. Apply
 
 **Need more than the index gives you?** Fetch the per-type section: MCP `get_language_reference(type)` / `get_examples(type)`, or read that type's section below. The `suggest_chart_type` tool returns the chosen type's section automatically.
 
+**When the type isn't obvious, ask — don't guess.** Call `suggest_chart_type` first. If it returns an `⚠️ ASK THE USER` directive (the request is ambiguous between candidates, or nothing matched), present those candidate options to the user and wait for their pick before generating — never silently choose. A confident result (high/medium) you can proceed with.
+
 ### Common examples (curated, parse-clean)
 
 _The most common types, inline so you can generate them without a fetch. For the other 37, get the per-type section (see below)._

package/SKILL.md

@@ -117,6 +117,8 @@ Valid markup is the floor, not the goal. A good diagram reads at a glance. Apply
 
 **Need more than the index gives you?** Fetch the per-type section: MCP `get_language_reference(type)` / `get_examples(type)`, or read that type's section below. The `suggest_chart_type` tool returns the chosen type's section automatically.
 
+**When the type isn't obvious, ask — don't guess.** Call `suggest_chart_type` first. If it returns an `⚠️ ASK THE USER` directive (the request is ambiguous between candidates, or nothing matched), present those candidate options to the user and wait for their pick before generating — never silently choose. A confident result (high/medium) you can proceed with.
+
 ### Common examples (curated, parse-clean)
 
 _The most common types, inline so you can generate them without a fetch. For the other 37, get the per-type section (see below)._
@@ -429,14 +431,19 @@ era 1718-05-08 -> 1718-05-17 Blockade Active blue
 **Fetch more:** call `get_language_reference(type)` for a type's full syntax and `get_examples(type)` for starter templates. `suggest_chart_type` returns the chosen type's reference automatically.
 <!-- DGMO-AI-CORE:END -->
 
-## MCP Tools — preferred order
+## Output — where the diagram goes
+
+**Always save the `.dgmo` source** to `<name>.dgmo` in the working directory — it's the editable deliverable; the app/URL just displays it. **Never render a PNG/SVG unless the user explicitly asks** for an image.
+
+Decide the visual output **once per session** with `check_app_installed`:
+
+1. **App installed →** save the source, then `open_in_app({ dgmo, filePath: "<abs path to the saved file>" })`. The app opens *that file*, so in-app edits autosave back to it — one source of truth, live re-render. **Best UX.** Don't open an online URL and don't render a PNG.
+2. **App not installed →** `share_diagram` returns a `https://online.diagrammo.app/...` URL; `open` it. Same chart + editor view in the browser. **Preferred fallback.**
 
-When the `dgmo` MCP server is configured, prefer tools in this order:
-1. `open_in_app` — opens the diagram in the Diagrammo desktop app (macOS). **Best UX** — chart + editor side-by-side, full editing.
-2. `share_diagram` — returns a `https://online.diagrammo.app/...` URL. Tell the user to open it; same chart + editor view in the browser. **Preferred fallback** when the desktop app is not available.
-3. `render_diagram` — renders to PNG or SVG and returns a file path. Use when the user wants an image artifact (export, embed, attach).
+Other tools (use only when the user asks for them):
+3. `render_diagram` — PNG or SVG to a file path. Use when the user wants an image artifact (export, embed, attach).
 4. `generate_report` — renders multiple diagrams into an HTML report with table of contents.
-5. `preview_diagram` — local HTML preview in the browser. Last resort — only when none of the above fit.
+5. `preview_diagram` — local HTML preview in the browser; also the multi-diagram side-by-side tool.
 6. `list_chart_types` / `get_language_reference` — discovery; call `get_language_reference` before generating an unfamiliar chart type.
 
 ## When to use dgmo

package/dist/advanced.cjs

@@ -16714,6 +16714,7 @@ function parseInfra(content) {
   let currentGroup = null;
   let currentTagGroup = null;
   let baseIndent = 0;
+  let firstLineConsumed = false;
   function finishCurrentNode() {
     if (!currentNode) return;
     const key = currentNode.id;
@@ -16721,7 +16722,8 @@ function parseInfra(content) {
     if (existing) {
       const incomingDisplay = displayName(currentNode.label);
       const existingDisplay = displayName(existing.label);
-      if (incomingDisplay !== existingDisplay) {
+      const isAliasRef = nameAliasMap.get(currentNode.label) === key;
+      if (incomingDisplay !== existingDisplay && !isAliasRef) {
         result.diagnostics.push(
           makeDgmoError(
             currentNode.lineNumber,
@@ -16787,19 +16789,22 @@ function parseInfra(content) {
       if (indent === 0 && currentNode && !trimmed.startsWith("-")) {
         finishCurrentNode();
       }
-      const firstLineResult = parseFirstLine(trimmed);
-      if (firstLineResult) {
-        if (firstLineResult.chartType !== "infra") {
-          setError(
-            lineNumber,
-            `Expected chart type 'infra', got '${firstLineResult.chartType}'`
-          );
-        }
-        if (firstLineResult.title) {
-          result.title = firstLineResult.title;
-          result.titleLineNumber = lineNumber;
+      if (!firstLineConsumed) {
+        firstLineConsumed = true;
+        const firstLineResult = parseFirstLine(trimmed);
+        if (firstLineResult) {
+          if (firstLineResult.chartType !== "infra") {
+            setError(
+              lineNumber,
+              `Expected chart type 'infra', got '${firstLineResult.chartType}'`
+            );
+          }
+          if (firstLineResult.title) {
+            result.title = firstLineResult.title;
+            result.titleLineNumber = lineNumber;
+          }
+          continue;
         }
-        continue;
       }
       if (/^direction-tb$/i.test(trimmed)) {
         result.direction = "TB";
@@ -16865,18 +16870,20 @@ function parseInfra(content) {
       if (compMatch) {
         finishCurrentNode();
         finishCurrentTagGroup();
-        const rawName = (compMatch[1] ?? compMatch[2] ?? "").trim();
+        const { qname, uname, alias: asAlias, meta } = compMatch.groups;
+        const rawName = (qname ?? uname ?? "").trim();
         const peeled = peelInfraDecorations(rawName, lineNumber);
         const name = peeled.label;
-        const rest = compMatch[3] || "";
+        const alias = asAlias ?? peeled.alias;
+        const rest = meta ?? "";
         const { tags } = extractPipeMetadata(rest);
         warnUnknownMetaKeys(
           tags,
           withTagAliases(INFRA_REGISTRY, tagAliasSet),
           (msg) => warn(lineNumber, msg)
         );
-        const id = nodeId2(name);
-        if (peeled.alias) nameAliasMap.set(peeled.alias, id);
+        const id = nameAliasMap.get(name) ?? nodeId2(name);
+        if (alias) nameAliasMap.set(alias, id);
         const isEdge = EDGE_NODE_NAMES.has(id.toLowerCase());
         currentNode = {
           id,
@@ -16960,18 +16967,20 @@ function parseInfra(content) {
       const compMatch = trimmed.match(COMPONENT_RE);
       if (compMatch) {
         finishCurrentTagGroup();
-        const rawName = (compMatch[1] ?? compMatch[2] ?? "").trim();
+        const { qname, uname, alias: asAlias, meta } = compMatch.groups;
+        const rawName = (qname ?? uname ?? "").trim();
         const peeled = peelInfraDecorations(rawName, lineNumber);
         const name = peeled.label;
-        const rest = compMatch[3] || "";
+        const alias = asAlias ?? peeled.alias;
+        const rest = meta ?? "";
         const { tags: nodeTags } = extractPipeMetadata(rest);
         warnUnknownMetaKeys(
           nodeTags,
           withTagAliases(INFRA_REGISTRY, tagAliasSet),
           (msg) => warn(lineNumber, msg)
         );
-        const id = nodeId2(name);
-        if (peeled.alias) nameAliasMap.set(peeled.alias, id);
+        const id = nameAliasMap.get(name) ?? nodeId2(name);
+        if (alias) nameAliasMap.set(alias, id);
         const tags = currentGroup.metadata ? { ...currentGroup.metadata, ...nodeTags } : nodeTags;
         currentNode = {
           id,
@@ -17162,6 +17171,11 @@ function parseInfra(content) {
           }
           continue;
         }
+        if (currentNode && tagAliasSet.has(normalizeName(key))) {
+          const mut = nodeMutableTags.get(currentNode.id);
+          if (mut) mut[tagAttrKey(key)] = rawVal;
+          continue;
+        }
         if (!INFRA_BEHAVIOR_KEYS.has(key) && !EDGE_ONLY_KEYS.has(key)) {
           const allKeys = [...INFRA_BEHAVIOR_KEYS, ...EDGE_ONLY_KEYS];
           const hint = suggest(key, allKeys);
@@ -17227,18 +17241,20 @@ function parseInfra(content) {
       finishCurrentNode();
       const compMatch = trimmed.match(COMPONENT_RE);
       if (compMatch) {
-        const rawName = (compMatch[1] ?? compMatch[2] ?? "").trim();
+        const { qname, uname, alias: asAlias, meta } = compMatch.groups;
+        const rawName = (qname ?? uname ?? "").trim();
         const peeled = peelInfraDecorations(rawName, lineNumber);
         const name = peeled.label;
-        const rest = compMatch[3] || "";
+        const alias = asAlias ?? peeled.alias;
+        const rest = meta ?? "";
         const { tags: nodeTags } = extractPipeMetadata(rest);
         warnUnknownMetaKeys(
           nodeTags,
           withTagAliases(INFRA_REGISTRY, tagAliasSet),
           (msg) => warn(lineNumber, msg)
         );
-        const id = nodeId2(name);
-        if (peeled.alias) nameAliasMap.set(peeled.alias, id);
+        const id = nameAliasMap.get(name) ?? nodeId2(name);
+        if (alias) nameAliasMap.set(alias, id);
         const tags = currentGroup.metadata ? { ...currentGroup.metadata, ...nodeTags } : nodeTags;
         currentNode = {
           id,
@@ -17260,18 +17276,20 @@ function parseInfra(content) {
         finishCurrentNode();
         finishCurrentTagGroup();
         currentGroup = null;
-        const rawName = (compMatch[1] ?? compMatch[2] ?? "").trim();
+        const { qname, uname, alias: asAlias, meta } = compMatch.groups;
+        const rawName = (qname ?? uname ?? "").trim();
         const peeled = peelInfraDecorations(rawName, lineNumber);
         const name = peeled.label;
-        const rest = compMatch[3] || "";
+        const alias = asAlias ?? peeled.alias;
+        const rest = meta ?? "";
         const { tags } = extractPipeMetadata(rest);
         warnUnknownMetaKeys(
           tags,
           withTagAliases(INFRA_REGISTRY, tagAliasSet),
           (msg) => warn(lineNumber, msg)
         );
-        const id = nodeId2(name);
-        if (peeled.alias) nameAliasMap.set(peeled.alias, id);
+        const id = nameAliasMap.get(name) ?? nodeId2(name);
+        if (alias) nameAliasMap.set(alias, id);
         currentNode = {
           id,
           label: name,
@@ -17471,7 +17489,7 @@ var init_parser15 = __esm({
     DEPRECATED_FANOUT_RE = /\bx(\d+)\s*$/;
     GROUP_RE = /^\[([^\]]+)\]\s*(?:as\s+([A-Za-z][A-Za-z0-9_]{0,11})\s*)?((?:\|.*)|(?:[a-zA-Z_]\w*\s*:.*))?$/;
     TAG_VALUE_RE = /^(\w[\w\s]+?)\s*$/;
-    COMPONENT_RE = /^(?:"([^"]+)"|([a-zA-Z_][\w -]*?))\s*((?:\|.*)|(?:[a-zA-Z_]\w*\s*:.*))?$/;
+    COMPONENT_RE = /^(?:"(?<qname>[^"]+)"|(?<uname>[a-zA-Z_][\w -]*?))(?:\s+as\s+(?<alias>[A-Za-z][A-Za-z0-9_]{0,11}))?\s*(?<meta>(?:\|.*)|(?:[a-zA-Z_]\w*\s*:.*))?$/;
     PIPE_META_RE = /[|,]\s*(\w+)\s*:\s*([^|,]+)/g;
     SAMELINE_META_RE = /(?:^|[\s,])(\w+)\s*:\s*([^,]+?)(?=\s*,|\s*$)/g;
     PROPERTY_RE = /^([\w-]+):\s*(.+)$/;
@@ -18955,8 +18973,8 @@ function parseMap(content, palette) {
       continue;
     }
     if (open.route && indent > open.route.indent) {
-      const leg = parseLeg(trimmed, lineNumber, open.route.route.style);
-      open.route.route.legs.push(leg);
+      const leg = parseLeg(trimmed, lineNumber);
+      if (leg) open.route.route.legs.push(leg);
       continue;
     }
     if (open.poi && indent > open.poi.indent) {
@@ -18985,6 +19003,14 @@ function parseMap(content, palette) {
         Object.assign(open.poi.poi.meta, split.meta);
         continue;
       }
+      if (split.name) {
+        const src = open.poi.poi.alias ?? poiName(open.poi.poi.pos) ?? "the poi";
+        pushError(
+          lineNumber,
+          `Malformed hub edge: "${trimmed}" \u2014 an indented line under a poi is an edge from "${src}" and needs an arrow glyph (\`-> dest\`, \`~> dest\`, or labeled \`-label-> dest\`). For a standalone place, declare it at the top level. (\xA724B.5)`
+        );
+        continue;
+      }
     }
     closeBlocks();
     const firstWord = trimmed.split(/\s+/)[0];
@@ -19233,31 +19259,44 @@ function parseMap(content, palette) {
     const { tags, meta } = partitionMeta(split.meta, tagGroupNames());
     const originLabel = meta["label"];
     const originValue = meta["value"];
-    const style = meta["style"] === "arc" ? "arc" : "straight";
+    if (meta["style"] !== void 0) {
+      pushError(
+        line11,
+        "route header no longer takes `style:` \u2014 set leg shape with the arrow glyph instead (`~\u2026~>` for an arc leg, `-\u2026->` for a straight one). (\xA724B.6)"
+      );
+    }
     const route = {
       origin: pos,
       ...split.alias !== void 0 && { originAlias: split.alias },
       ...originLabel !== void 0 && { originLabel },
       ...originValue !== void 0 && { originValue },
       originTags: tags,
-      style,
       legs: [],
       lineNumber: line11
     };
     routes.push(route);
     open.route = { route, indent };
   }
-  function parseLeg(trimmed, line11, headerStyle) {
-    let arrowStyle = "straight";
-    let label;
-    let rest = trimmed;
+  function parseLeg(trimmed, line11) {
     const m = trimmed.match(LEG_ARROW_RE);
-    if (m) {
-      const arr = classifyArrow(m[1], line11);
-      arrowStyle = arr.style;
-      label = arr.label;
-      rest = m[2];
+    if (!m) {
+      pushError(
+        line11,
+        `Malformed route leg: "${trimmed}" \u2014 a leg needs an arrow glyph (\`-> dest\`, \`~> dest\`, or labeled \`-label-> dest\` / \`~label~> dest\`). (\xA724B.6)`
+      );
+      return null;
     }
+    const arr = classifyArrow(m[1], line11);
+    if (!arr.directed) {
+      pushError(
+        line11,
+        `A route leg is directional \u2014 "${trimmed}" uses an undirected glyph; use \`-> \` (straight) or \`~> \` (arc). (\xA724B.6)`
+      );
+      return null;
+    }
+    const arrowStyle = arr.style;
+    const label = arr.label;
+    const rest = m[2];
     const split = splitNameAndMeta(
       rest,
       registry(),
@@ -19273,10 +19312,9 @@ function parseMap(content, palette) {
     const { tags, meta } = partitionMeta(split.meta, tagGroupNames());
     const value = meta["value"];
     const destLabel = meta["label"];
-    const style = arrowStyle === "arc" || headerStyle === "arc" ? "arc" : "straight";
     return {
       ...label !== void 0 && { label },
-      style,
+      style: arrowStyle,
       ...value !== void 0 && { value },
       dest: pos,
       ...split.alias !== void 0 && { destAlias: split.alias },
@@ -54080,13 +54118,15 @@ function layoutMap(resolvedIn, data, size, opts) {
         labelY: lp.y
       };
       const routeLabelStyle = leg.label !== void 0 ? labelOnFill(fillAt(bow.labelX, bow.labelY)) : void 0;
+      const routeVal = Number(leg.value);
       legs.push({
         d: legPath(a, b, bow.curved, bow.offset),
-        width: routeWidthFor(Number(leg.value)),
+        width: routeWidthFor(routeVal),
         color: lineColor(leg.tags) ?? mix(palette.text, palette.bg, 72),
         arrow: true,
         fromId: leg.fromId,
         toId: leg.toId,
+        ...Number.isFinite(routeVal) && routeVal > 0 && { value: routeVal },
         ...Object.keys(leg.tags).length > 0 && { tags: leg.tags },
         lineNumber: leg.lineNumber,
         ...leg.label !== void 0 && {
@@ -54133,6 +54173,7 @@ function layoutMap(resolvedIn, data, size, opts) {
         labelY: lp.y
       };
       const edgeLabelStyle = e.label !== void 0 ? labelOnFill(fillAt(bow.labelX, bow.labelY)) : void 0;
+      const edgeVal = Number(e.meta["value"]);
       legs.push({
         d: legPath(a, b, bow.curved, bow.offset),
         width: widthFor(e),
@@ -54140,6 +54181,7 @@ function layoutMap(resolvedIn, data, size, opts) {
         arrow: e.directed,
         fromId: e.fromId,
         toId: e.toId,
+        ...Number.isFinite(edgeVal) && edgeVal > 0 && { value: edgeVal },
         ...Object.keys(e.tags).length > 0 && { tags: e.tags },
         lineNumber: e.lineNumber,
         ...e.label !== void 0 && {
@@ -54297,18 +54339,49 @@ function layoutMap(resolvedIn, data, size, opts) {
     const SHORT_HOP_MAX = Math.max(46, Math.min(width, height) * 0.11);
     const STEP = 4;
     const HOP_GAP = 9;
+    const CLEAR_STEP = 6;
+    const CLEAR_MAX = SHORT_HOP_MAX * 3;
+    const CLEAR_TOL = CLEAR_STEP;
+    const clearanceAt = (px, py, ox, oy) => {
+      const baseAng = Math.atan2(oy, ox);
+      let minClear = CLEAR_MAX;
+      for (let k = -2; k <= 2; k++) {
+        const a = baseAng + k * Math.PI / 4;
+        const rx = Math.cos(a);
+        const ry = Math.sin(a);
+        let d = CLEAR_STEP;
+        for (; d <= CLEAR_MAX; d += CLEAR_STEP) {
+          const qx = px + rx * d;
+          const qy = py + ry * d;
+          if (qx < FIT_PAD || qy < topPad || qx > width - FIT_PAD || qy > height - FIT_PAD)
+            break;
+          if (fillAt(qx, qy) !== water) break;
+        }
+        if (d < minClear) minClear = d;
+      }
+      return minClear;
+    };
     const tryShortHopCallout = (cx, cy, fill2, name, value, font = FONT2, gap = HOP_GAP, maxLen = SHORT_HOP_MAX) => {
       const chipW = stackW(name, value, font);
       const chipH = stackH(value !== void 0, font);
+      const D = Math.SQRT1_2;
       const dirs = [
         [0, -1],
-        // north (over Canada)
+        // north
         [0, 1],
-        // south (over Mexico / Gulf)
+        // south
         [1, 0],
-        // east (Atlantic)
-        [-1, 0]
-        // west (Pacific)
+        // east
+        [-1, 0],
+        // west
+        [D, -D],
+        // NE
+        [D, D],
+        // SE
+        [-D, -D],
+        // NW
+        [-D, D]
+        // SW
       ];
       let best = null;
       for (const [dx, dy] of dirs) {
@@ -54358,13 +54431,16 @@ function layoutMap(resolvedIn, data, size, opts) {
           (p) => segmentRectOverlap(cx, cy, innerX, innerY, p)
         ))
           continue;
-        if (best === null || len < best.len)
+        const clear = clearanceAt(ccx, ccy, dx, dy);
+        const better = best === null || clear > best.clear + CLEAR_TOL || clear >= best.clear - CLEAR_TOL && len < best.len;
+        if (better)
           best = {
             x: ccx,
             y: ccy,
             rect,
             leader: [cx, cy, innerX, innerY],
-            len
+            len,
+            clear
           };
       }
       return best ? { x: best.x, y: best.y, rect: best.rect, leader: best.leader } : null;
@@ -55025,6 +55101,9 @@ function layoutMap(resolvedIn, data, size, opts) {
       const nx = -dy / len;
       const ny = dx / len;
       const perp = labelH + 2;
+      const stroke2 = lg.width ?? W_MIN;
+      const clearW = stroke2 / 2 + labelH / 2 + 3;
+      const offList = stroke2 >= 4 ? [clearW, -clearW, clearW + perp, -(clearW + perp), 0] : [0, perp, -perp, 2 * perp, -2 * perp];
       const pm = /^M(-?[\d.]+),(-?[\d.]+)(?:L(-?[\d.]+),(-?[\d.]+)|Q(-?[\d.]+),(-?[\d.]+) (-?[\d.]+),(-?[\d.]+))$/.exec(
         lg.d
       );
@@ -55044,7 +55123,7 @@ function layoutMap(resolvedIn, data, size, opts) {
         return [a.cx + dx * t, a.cy + dy * t];
       };
       const candidates = [];
-      for (const off of [0, perp, -perp, 2 * perp, -2 * perp])
+      for (const off of offList)
         for (const t of T_LIST) {
           const [bx, by] = pointAt(t);
           candidates.push([bx + nx * off, by + ny * off - 4]);
@@ -55796,6 +55875,12 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       }
     }
     wireSync(p, leg.lineNumber);
+    if (leg.value !== void 0) {
+      p.attr("data-value", leg.value);
+      p.append("title").text(
+        leg.label !== void 0 ? `${leg.label}: ${leg.value}` : `${leg.value}`
+      );
+    }
     if (arrowTri) {
       gLegs.append("path").attr("d", arrowTri).attr("fill", leg.color).attr("stroke", leg.color).attr("stroke-width", 1).attr("stroke-linejoin", "round").attr("data-from-id", leg.fromId).attr("data-to-id", leg.toId);
     }
@@ -59426,9 +59511,9 @@ var init_renderer20 = __esm({
   }
 });
 
-// ../../diagrammo/dgmo/node_modules/.pnpm/lz-string@1.5.0/node_modules/lz-string/libs/lz-string.js
+// node_modules/.pnpm/lz-string@1.5.0/node_modules/lz-string/libs/lz-string.js
 var require_lz_string = __commonJS({
-  "../../diagrammo/dgmo/node_modules/.pnpm/lz-string@1.5.0/node_modules/lz-string/libs/lz-string.js"(exports2, module2) {
+  "node_modules/.pnpm/lz-string@1.5.0/node_modules/lz-string/libs/lz-string.js"(exports2, module2) {
     "use strict";
     var LZString = (function() {
       var f = String.fromCharCode;

package/dist/advanced.d.cts

@@ -299,9 +299,10 @@ interface MapPoi {
     readonly lineNumber: number;
 }
 /** One leg of a route (§24B.6): an edge from the previous stop to `dest`. Reuses
- *  the edge arrow idiom — in-arrow text = leg label, `value:` = leg thickness,
- *  `->`/`~>` (or the header `style: arc`) = shape. A tag on the leg line colours
- *  the LINE (§24B.6); `label:`/`as` still name the DESTINATION stop. */
+ *  the indented edge arrow idiom (same as sitemap) — in-arrow text = leg label,
+ *  `value:` = leg thickness, the arrow glyph = shape (`-…->` straight, `~…~>`
+ *  arc). A tag on the leg line colours the LINE (§24B.6); `label:`/`as` still
+ *  name the DESTINATION stop. The arrow is required — a bare destination errors. */
 interface MapRouteLeg {
     readonly label?: string;
     readonly style: 'straight' | 'arc';
@@ -314,16 +315,16 @@ interface MapRouteLeg {
     readonly tags: Readonly<Record<string, string>>;
     readonly lineNumber: number;
 }
-/** An ordered, auto-numbered route (§24B.6): `route <origin> [style: arc]` + a
- *  sequence of indented arrow legs, each continuing from the previous stop.
- *  Repeat the origin as a leg's destination to close a loop. */
+/** An ordered, auto-numbered route (§24B.6): `route <origin>` + a sequence of
+ *  indented arrow legs, each continuing from the previous stop. Leg shape is
+ *  per-leg (the arrow glyph) — there is no header-level shape option. Repeat the
+ *  origin as a leg's destination to close a loop. */
 interface MapRoute {
     readonly origin: PoiPos;
     readonly originAlias?: string;
     readonly originLabel?: string;
     readonly originValue?: string;
     readonly originTags: Readonly<Record<string, string>>;
-    readonly style: 'straight' | 'arc';
     readonly legs: readonly MapRouteLeg[];
     readonly lineNumber: number;
 }
@@ -5014,6 +5015,10 @@ interface MapLayoutLeg {
      *  (§24B.6). Omitted when the leg carries no tag. */
     readonly tags?: Readonly<Record<string, string>>;
     readonly label?: string;
+    /** The leg's numeric weight (the `value:` metadata) when present and positive.
+     *  Drives {@link width}, but kept here verbatim so the renderer can surface it
+     *  on hover (a `<title>` tooltip) — the width alone is lossy. */
+    readonly value?: number;
     readonly labelX?: number;
     readonly labelY?: number;
     /** Text colour for the label — contrast-picked against the background fill the