@diagrammo/dgmo 0.21.1 → 0.23.0

package/src/boxes-and-lines/renderer.ts

@@ -11,6 +11,7 @@ import type {
   LegendConfig,
   LegendState,
   LegendCallbacks,
+  LegendGroupData,
   ControlsGroupToggle,
 } from '../utils/legend-types';
 import {
@@ -19,7 +20,8 @@ import {
   TITLE_Y,
 } from '../utils/title-constants';
 import { contrastText, mix, shapeFill } from '../palettes/color-utils';
-import { resolveTagColor, resolveActiveTagGroup } from '../utils/tag-groups';
+import { resolveColor } from '../colors';
+import { resolveTagColor } from '../utils/tag-groups';
 import type { TagGroup } from '../utils/tag-groups';
 import type { PaletteColors } from '../palettes';
 import { renderInlineText } from '../utils/inline-markdown';
@@ -50,6 +52,9 @@ const NODE_TEXT_PADDING = 12;
 const GROUP_RX = 8;
 const GROUP_LABEL_FONT_SIZE = 14;
 const GROUP_LABEL_ZONE = 32;
+// % tint floor so the ramp minimum still reads as "low, present" (mirror map).
+const RAMP_FLOOR = 15;
+const VALUE_FONT_SIZE = 11;
 
 type D3G = d3Selection.Selection<SVGGElement, unknown, null, undefined>;
 type D3Svg = d3Selection.Selection<SVGSVGElement, unknown, null, undefined>;
@@ -184,8 +189,30 @@ function nodeColors(
   activeGroupName: string | null,
   palette: PaletteColors,
   isDark: boolean,
+  value: {
+    active: boolean;
+    hue: string;
+    fillForValue: (v: number) => string;
+  },
   solid?: boolean
 ): { fill: string; stroke: string; text: string } {
+  // Untagged-neutral fill, reused by the value path for no-value boxes.
+  const neutralFill = mix(palette.bg, palette.text, isDark ? 90 : 95);
+  // Value dimension active: choropleth tint by the node's value, neutral when a
+  // box has no value (mirror map: `value !== undefined ? fillForValue : neutral`).
+  if (value.active) {
+    const fill =
+      node.value !== undefined ? value.fillForValue(node.value) : neutralFill;
+    // Stroke = the ramp hue (NOT a tag color — there may be none); a present
+    // stroke is required for the app's --bl-node-stroke hover-dim to work.
+    const stroke = value.hue;
+    const text = contrastText(
+      fill,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    return { fill, stroke, text };
+  }
   const tagColor = resolveTagColor(
     node.metadata,
     [...tagGroups],
@@ -324,6 +351,9 @@ interface BLRenderOptions {
   onToggleDescriptions?: (active: boolean) => void;
   onToggleControlsExpand?: () => void;
   exportMode?: boolean;
+  /** When 'app', the description toggle is hosted by the app overlay strip
+   *  (inline gear suppressed, controls row + anchor reserved). */
+  controlsHost?: 'app' | 'inline';
 }
 
 export function renderBoxesAndLines(
@@ -344,6 +374,7 @@ export function renderBoxesAndLines(
     onToggleDescriptions,
     onToggleControlsExpand,
     exportMode = false,
+    controlsHost,
   } = options ?? {};
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -364,22 +395,104 @@ export function renderBoxesAndLines(
   const sGroupLabelZone = sctx.structural(GROUP_LABEL_ZONE);
   const sTitleFontSize = sctx.text(TITLE_FONT_SIZE);
   const sTitleY = sctx.structural(TITLE_Y);
-  const sLegendHeight = sctx.structural(
-    getMaxLegendReservedHeight(
-      {
-        groups: parsed.tagGroups,
-        position: { placement: 'top-center', titleRelation: 'below-title' },
-        mode: exportMode ? 'export' : 'preview',
-      },
-      width
-    )
-  );
 
-  const activeGroup = resolveActiveTagGroup(
-    parsed.tagGroups,
-    parsed.options['active-tag'],
-    activeTagGroup
+  // ── Value ramp + active-dimension resolution (mirror of map's value model) ──
+  // The ramp is computed in the renderer (architectural divergence from the
+  // map, which precomputes in layout) — node sizes are value-independent, and
+  // this file already owns all colouring + the legend build. Hoisted ONCE
+  // before the node loop so `fillForValue` is not recomputed per node.
+  const nodeValues = parsed.nodes
+    .filter((n) => n.value !== undefined)
+    .map((n) => n.value!);
+  const hasRamp = nodeValues.length > 0;
+  const allNonNegative = hasRamp && nodeValues.every((v) => v >= 0);
+  const rampMin = allNonNegative ? 0 : Math.min(...nodeValues);
+  const rampMax = Math.max(...nodeValues);
+  // Default hue = palette.primary (NOT red like the map — boxes have no water to
+  // stand out against, and red reads as alarm on a neutral metric). A trailing
+  // color on `box-metric` overrides.
+  const rampHue =
+    resolveColor(parsed.boxMetricColor ?? '', palette) ?? palette.primary;
+  // Lift the ramp anchor off the near-black surface on dark themes so the
+  // lowest values read as a clear muted tint rather than sinking to the surface.
+  const rampBase = isDark ? mix(palette.surface, palette.text, 28) : palette.bg;
+  const fillForValue = (v: number): string => {
+    const t = rampMax > rampMin ? (v - rampMin) / (rampMax - rampMin) : 1;
+    const pct = RAMP_FLOOR + Math.max(0, Math.min(1, t)) * (100 - RAMP_FLOOR);
+    return mix(rampHue, rampBase, pct);
+  };
+  const VALUE_NAME = hasRamp ? parsed.boxMetric?.trim() || 'Value' : null;
+
+  // Local active-dimension resolver — mirror map's inline matchColorGroup /
+  // activeIsScore. Do NOT extend the shared resolveActiveTagGroup (it has a
+  // fixed 3-arg signature consumed by 7 chart types). On a name collision
+  // between a tag group and the metric label, the tag group wins (AC9).
+  const matchColorGroup = (v: string): string | null => {
+    const lv = v.trim().toLowerCase();
+    if (lv === 'none') return null;
+    const tg = parsed.tagGroups.find((g) => g.name.toLowerCase() === lv);
+    if (tg) return tg.name;
+    if (lv === VALUE_NAME?.toLowerCase()) return VALUE_NAME;
+    return v; // unknown name passes through → renders neutral
+  };
+  const override = activeTagGroup; // string | null | undefined
+  let activeGroup: string | null;
+  if (override !== undefined) {
+    activeGroup = override === null ? null : matchColorGroup(override);
+  } else if (parsed.options['active-tag'] !== undefined) {
+    activeGroup = matchColorGroup(parsed.options['active-tag']);
+  } else {
+    // Default-active dimension: value ramp when any box has a value, else the
+    // first declared tag group, else none.
+    activeGroup =
+      VALUE_NAME ??
+      (parsed.tagGroups.length > 0 ? parsed.tagGroups[0]!.name : null);
+  }
+  const activeIsValue = VALUE_NAME !== null && activeGroup === VALUE_NAME;
+
+  // Synthetic legend group for the value ramp (empty entries + gradient),
+  // prepended to the tag groups handed to renderLegendD3 — exactly like the
+  // map's VALUE_NAME group. The shared legend infra renders the gradient capsule
+  // ONLY when it is the active group (legendState.activeGroup === its name).
+  const valueGroup: LegendGroupData | null =
+    VALUE_NAME !== null
+      ? {
+          name: VALUE_NAME,
+          entries: [],
+          gradient: {
+            min: rampMin,
+            max: rampMax,
+            hue: rampHue,
+            base: rampBase,
+          },
+        }
+      : null;
+  const legendGroups: readonly LegendGroupData[] = [
+    ...(valueGroup ? [valueGroup] : []),
+    ...parsed.tagGroups,
+  ];
+
+  // Reserve legend height only when a legend will actually render. App-hosted
+  // controls move the Descriptions toggle to the app overlay, so a
+  // descriptions-only chart (no tag groups) reserves nothing.
+  const reserveHasDescriptions = parsed.nodes.some(
+    (n) => n.description && n.description.length > 0
   );
+  const willRenderLegend =
+    legendGroups.length > 0 ||
+    (reserveHasDescriptions && controlsHost !== 'app');
+  const sLegendHeight = willRenderLegend
+    ? sctx.structural(
+        getMaxLegendReservedHeight(
+          {
+            groups: legendGroups,
+            position: { placement: 'top-center', titleRelation: 'below-title' },
+            mode: exportMode ? 'export' : 'preview',
+          },
+          width
+        )
+      )
+    : 0;
 
   // Build hidden set
   const hidden = hiddenTagValues ?? parsed.initialHiddenTagValues;
@@ -399,7 +512,7 @@ export function renderBoxesAndLines(
     (n) => n.description && n.description.length > 0
   );
   const needsLegend =
-    parsed.tagGroups.length > 0 || (hasAnyDescriptions && onToggleDescriptions);
+    legendGroups.length > 0 || (hasAnyDescriptions && onToggleDescriptions);
   const legendH = needsLegend ? sLegendHeight + 8 : 0;
 
   const groupLabelsSet = new Set(layout.groups.map((g) => g.label));
@@ -794,6 +907,7 @@ export function renderBoxesAndLines(
       activeGroup,
       palette,
       isDark,
+      { active: activeIsValue, hue: rampHue, fillForValue },
       parsed.options['solid-fill'] === 'on'
     );
 
@@ -811,6 +925,12 @@ export function renderBoxesAndLines(
       nodeG.attr(`data-tag-${key.toLowerCase()}`, val.toLowerCase());
     }
 
+    // Numeric value drives the gradient scrub; guard on !== undefined so a
+    // legitimate `value: 0` still emits data-value="0" (0 is falsy).
+    if (node.value !== undefined) {
+      nodeG.attr('data-value', node.value);
+    }
+
     if (onClickItem) {
       nodeG.on('click', (event: Event) => {
         // Don't intercept clicks on links in description text
@@ -989,18 +1109,76 @@ export function renderBoxesAndLines(
           .text(fitted.lines[li]!);
       }
     }
+
+    // ── show-values: print the numeric value as text (opt-in) ──
+    // Independent of the active dimension (a user may want the numbers printed
+    // while a tag group tints). Plain nodes: centered below the label. Described
+    // nodes: a top-right corner badge so it never overflows the full body (R2-6).
+    if (parsed.showValues && node.value !== undefined) {
+      const valueText = String(node.value);
+      const descShown = !!(desc && desc.length > 0 && !hideDescriptions);
+      if (descShown) {
+        // Corner badge — pill behind the number so it reads over the header.
+        const padX = 6;
+        const padY = 5;
+        const bw = valueText.length * VALUE_FONT_SIZE * CHAR_WIDTH_RATIO + 8;
+        const bh = VALUE_FONT_SIZE + 4;
+        const bx = ln.width / 2 - bw - 4;
+        const by = -ln.height / 2 + 4;
+        nodeG
+          .append('rect')
+          .attr('x', bx)
+          .attr('y', by)
+          .attr('width', bw)
+          .attr('height', bh)
+          .attr('rx', 3)
+          .attr('fill', palette.bg)
+          .attr('opacity', 0.85);
+        nodeG
+          .append('text')
+          .attr('class', 'bl-node-value')
+          .attr('x', bx + bw - padX)
+          .attr('y', by + padY)
+          .attr('text-anchor', 'end')
+          .attr('dominant-baseline', 'central')
+          .attr('font-size', VALUE_FONT_SIZE)
+          .attr('font-weight', '600')
+          .attr('fill', palette.textMuted)
+          .text(valueText);
+      } else {
+        // Plain node: value centered just above the bottom edge.
+        nodeG
+          .append('text')
+          .attr('class', 'bl-node-value')
+          .attr('x', 0)
+          .attr('y', ln.height / 2 - VALUE_FONT_SIZE)
+          .attr('text-anchor', 'middle')
+          .attr('dominant-baseline', 'central')
+          .attr('font-size', VALUE_FONT_SIZE)
+          .attr('font-weight', '600')
+          .attr('fill', colors.text)
+          .attr('opacity', 0.8)
+          .text(valueText);
+      }
+    }
   }
 
   // ── Render legend ──────────────────────────────────────
   const hasDescriptions = parsed.nodes.some(
     (n) => n.description && n.description.length > 0
   );
-  const hasLegend = parsed.tagGroups.length > 0 || hasDescriptions;
+  // App-hosted: the Descriptions control moves to the app overlay, so a
+  // descriptions-only legend (no tag groups) has nothing left to render. The
+  // value ramp (a synthetic group in legendGroups) also forces a legend.
+  const hasLegend =
+    legendGroups.length > 0 || (hasDescriptions && controlsHost !== 'app');
 
   if (hasLegend) {
-    // Build controls group for description toggle
+    // Build controls group for description toggle. App-hosted controls own the
+    // toggling, so the group is built (to gate + size the row) even without the
+    // inline-gear callback.
     let controlsGroup: { toggles: ControlsGroupToggle[] } | undefined;
-    if (hasDescriptions && onToggleDescriptions) {
+    if (hasDescriptions && (onToggleDescriptions || controlsHost === 'app')) {
       controlsGroup = {
         toggles: [
           {
@@ -1015,10 +1193,17 @@ export function renderBoxesAndLines(
     }
 
     const legendConfig: LegendConfig = {
-      groups: parsed.tagGroups,
+      groups: legendGroups,
       position: { placement: 'top-center', titleRelation: 'below-title' },
       mode: exportMode ? 'export' : 'preview',
+      // Keep inactive sibling tag groups visible as collapsed pills so the user
+      // can click one to flip the active colouring dimension (preview only —
+      // export shows just the active group). Without this, declaring a second
+      // tag group (e.g. Team) leaves it invisible whenever another group is
+      // active. The app's BoxesAndLinesPreview already wires pill clicks.
+      showInactivePills: true,
       ...(controlsGroup !== undefined && { controlsGroup }),
+      ...(controlsHost !== undefined && { controlsHost }),
     };
     const legendState: LegendState = {
       activeGroup,

package/src/boxes-and-lines/types.ts

@@ -6,6 +6,9 @@ export interface BLNode {
   readonly lineNumber: number;
   readonly metadata: Readonly<Record<string, string>>;
   readonly description?: readonly string[];
+  /** Numeric measure lifted from `value: X` metadata (mirror of map's
+   *  `region.value`). Drives the value ramp / choropleth tinting. */
+  readonly value?: number;
 }
 
 export interface BLEdge {
@@ -36,6 +39,12 @@ export interface ParsedBoxesAndLines {
   readonly options: Readonly<Record<string, string>>;
   readonly initialHiddenTagValues: ReadonlyMap<string, ReadonlySet<string>>;
   readonly direction: 'LR' | 'TB';
+  /** `box-metric <label> [color]` — names the value-ramp dimension and
+   *  optionally sets its hue. Mirror of map's `region-metric`. */
+  readonly boxMetric?: string;
+  readonly boxMetricColor?: string;
+  /** `show-values` — print each box's numeric value as text (opt-in). */
+  readonly showValues?: boolean;
   readonly diagnostics: readonly DgmoError[];
   readonly error: string | null;
 }

package/src/cli.ts

@@ -136,7 +136,7 @@ Key options:
 - \`-o <file>\` — output file; format inferred from extension (\`.svg\` → SVG, else PNG)
 - \`-o url\` — output a shareable diagrammo.app URL
 - \`--theme <theme>\` — \`light\` (default), \`dark\`, \`transparent\`
-- \`--palette <name>\` — \`nord\` (default), \`solarized\`, \`catppuccin\`, \`rose-pine\`, \`gruvbox\`, \`tokyo-night\`, \`one-dark\`, \`bold\`
+- \`--palette <name>\` — \`nord\` (default), \`atlas\`, \`blueprint\`, \`slate\`, \`tidewater\`, \`solarized\`, \`catppuccin\`, \`rose-pine\`, \`gruvbox\`, \`tokyo-night\`, \`one-dark\`, \`dracula\`, \`monokai\`
 - \`--copy\` — copy the URL to clipboard (use with \`-o url\`)
 - \`--chart-types\` — list all supported chart types
 

package/src/completion.ts

@@ -98,9 +98,12 @@ const GLOBAL_DIRECTIVES: Record<string, DirectiveValueSpec> = {
       'gruvbox',
       'tokyo-night',
       'one-dark',
-      'bold',
       'dracula',
       'monokai',
+      'atlas',
+      'blueprint',
+      'slate',
+      'tidewater',
     ],
   },
   theme: {
@@ -444,6 +447,8 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       direction: { description: 'Layout direction', values: ['LR', 'TB'] },
       'active-tag': { description: 'Active tag group name' },
       hide: { description: 'Hide tag:value pairs' },
+      'box-metric': { description: 'Metric label for the value ramp' },
+      'show-values': { description: 'Print box values as text' },
     }),
   ],
   [
@@ -508,19 +513,12 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
   ],
   [
     'map',
-    // Geographic map directives (§24B.2/.7). `poi`/`route` are content
-    // keywords, not directives; metadata keys (value/label/style) live in the
-    // reserved-key registry.
+    // Geographic map directives (§24B.2/.7). Cosmetics are ON by default — the
+    // only switches are bare `no-*` opt-outs, surfaced proactively so a
+    // zero-config map still hints at what can be turned off. `poi`/`route` are
+    // content keywords, not directives; metadata keys (value/label/style) live
+    // in the reserved-key registry.
     withGlobals({
-      region: {
-        description:
-          'Basemap: us-states (force US state mesh + scoping) | world (inert — already the default)',
-        values: ['us-states', 'world'],
-      },
-      projection: {
-        description: 'Override the auto projection',
-        values: ['equirectangular', 'natural-earth', 'albers-usa', 'mercator'],
-      },
       'region-metric': { description: 'Label for the region value ramp' },
       'poi-metric': {
         description: 'Label for the POI value (marker size) channel',
@@ -528,21 +526,32 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       'flow-metric': {
         description: 'Label for the edge/leg value (thickness) channel',
       },
-      scale: { description: 'Override value ramp anchors: scale <min> <max>' },
-      'region-labels': {
-        description: 'Subdivision name labels',
-        values: ['full', 'abbrev', 'off'],
+      locale: {
+        description:
+          'Default country/state for bare place names, e.g. locale US-GA',
       },
-      'poi-labels': {
-        description: 'POI labels/values',
-        values: ['off', 'auto', 'all'],
+      'active-tag': {
+        description: 'Which tag group leads when several are present',
       },
-      'default-country': { description: 'ISO scope for bare city resolution' },
-      'default-state': { description: 'ISO subdivision scope' },
+      caption: { description: 'Caption line (data-source attribution)' },
       'no-legend': { description: 'Suppress the legend' },
-      relief: { description: 'Subtle mountain-range relief shading' },
-      subtitle: { description: 'Subtitle line' },
-      caption: { description: 'Caption line' },
+      'no-coastline': {
+        description: 'Turn off coastal water-lines (on by default)',
+      },
+      'no-relief': {
+        description: 'Turn off mountain-range relief shading (on by default)',
+      },
+      'no-context-labels': {
+        description: 'Turn off orientation labels for water + nearby countries',
+      },
+      'no-region-labels': {
+        description: 'Turn off subdivision name labels (on by default)',
+      },
+      'no-poi-labels': { description: 'Turn off POI labels (on by default)' },
+      'no-colorize': {
+        description:
+          'Force plain green-land reference dress (regions are auto-coloured by default)',
+      },
     }),
   ],
 ]);
@@ -733,12 +742,9 @@ export const PIPE_METADATA = new Map<string, PipeContextMap>([
     {
       node: {
         description: { description: 'Node description text' },
+        value: { description: 'Numeric value for the metric ramp' },
       },
-      edge: {
-        width: { description: 'Edge stroke width in pixels' },
-        split: { description: 'Traffic split percentage' },
-        fanout: { description: 'Fanout multiplier (integer >= 1)' },
-      },
+      edge: {},
     },
   ],
   [

package/src/cycle/renderer.ts

@@ -48,6 +48,10 @@ export interface CycleRenderOptions {
   onToggleDescriptions?: (active: boolean) => void;
   onToggleControlsExpand?: () => void;
   exportMode?: boolean;
+  /** When 'app', the description toggle is hosted by the app overlay strip:
+   *  the inline gear is suppressed and a controls row + anchor are reserved.
+   *  Default (inline) renders the gear as before. */
+  controlsHost?: 'app' | 'inline';
 }
 
 /**
@@ -92,7 +96,13 @@ export function renderCycle(
   const hasDescriptions =
     parsed.nodes.some((n) => n.description.length > 0) ||
     parsed.edges.some((e) => e.description.length > 0);
-  const hasLegend = hasDescriptions && !!renderOptions?.onToggleDescriptions;
+  // App-hosted: controls live in the app overlay strip. Cycle has no tag groups,
+  // so there's no in-SVG legend left to render — don't reserve a legend band.
+  const appHostedControls = renderOptions?.controlsHost === 'app';
+  const hasLegend =
+    !appHostedControls &&
+    hasDescriptions &&
+    !!renderOptions?.onToggleDescriptions;
 
   const showTitle = !!parsed.title && parsed.options['no-title'] !== 'on';
   const legendOffset = hasLegend ? sLegendHeight : 0;
@@ -160,6 +170,9 @@ export function renderCycle(
       position: { placement: 'top-center', titleRelation: 'below-title' },
       mode: renderOptions?.exportMode ? 'export' : 'preview',
       controlsGroup,
+      ...(renderOptions?.controlsHost !== undefined && {
+        controlsHost: renderOptions.controlsHost,
+      }),
     };
     const legendState: LegendState = {
       activeGroup: null,

package/src/d3.ts

@@ -4301,8 +4301,16 @@ function renderTimelineHorizontalTimeSort(
     ? -(topScaleH + markerReserve + ERA_ROW_H / 2)
     : 0;
   const innerWidth = width - margin.left - margin.right;
-  const innerHeight = height - margin.top - margin.bottom;
-  const rowH = Math.min(ctx.structural(28), innerHeight / sorted.length);
+  const availInnerHeight = height - margin.top - margin.bottom;
+  const rowH = Math.min(ctx.structural(28), availInnerHeight / sorted.length);
+  // Each event needs only `rowH` of vertical space. When the container is
+  // taller than the rows require (rowH hits its 28px cap), draw the era
+  // bands and time axis to the content height instead of the full container
+  // so the axis sits just below the last event rather than leaving a large
+  // vertical gap. The SVG itself shrinks to match (top-aligned via
+  // preserveAspectRatio) so callers don't reserve dead space below the chart.
+  const innerHeight = rowH * sorted.length;
+  const usedHeight = margin.top + innerHeight + margin.bottom;
 
   const xScale = d3Scale
     .scaleLinear()
@@ -4313,8 +4321,8 @@ function renderTimelineHorizontalTimeSort(
     .select(container)
     .append('svg')
     .attr('width', width)
-    .attr('height', height)
-    .attr('viewBox', `0 0 ${width} ${height}`)
+    .attr('height', usedHeight)
+    .attr('viewBox', `0 0 ${width} ${usedHeight}`)
     .attr('preserveAspectRatio', 'xMidYMin meet')
     .style('background', bgColor);
 
@@ -8459,6 +8467,7 @@ export async function renderForExport(
     const { parseMap } = await import('./map/parser');
     const { resolveMap } = await import('./map/resolver');
     const { renderMapForExport } = await import('./map/renderer');
+    const { mapExportDimensions } = await import('./map/dimensions');
 
     const effectivePalette = await resolveExportPalette(theme, palette);
     const mapParsed = parseMap(content);
@@ -8478,14 +8487,19 @@ export async function renderForExport(
     }
     const mapResolved = resolveMap(mapParsed, mapData);
 
-    const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+    // Content-aware canvas: derive the height from the map's intrinsic projected
+    // aspect (world ~2.3:1, a region taller, etc.) instead of the fixed 800, so the
+    // export matches the content's natural shape — no vertical stretch, no
+    // letterbox bands. `preferContain` rides along to the renderer.
+    const dims = mapExportDimensions(mapResolved, mapData, EXPORT_WIDTH);
+    const container = createExportContainer(dims.width, dims.height);
     renderMapForExport(
       container,
       mapResolved,
       mapData,
       effectivePalette,
       theme === 'dark',
-      { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
+      dims
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }

package/src/editor/highlight-api.ts

@@ -200,6 +200,10 @@ const ATTRIBUTE_KEYS = new Set([
   'tech',
   'span',
   'split',
+  // Map (§24B) reserved keys
+  'value',
+  'label',
+  'style',
 ]);
 
 /**

package/src/editor/keywords.ts

@@ -80,11 +80,10 @@ export const METADATA_KEYS = new Set([
   'quadrant',
   'ring',
   'trend',
-  // Map (§24B) metadata keys
-  'score',
+  // Map (§24B) reserved metadata keys
+  'value',
   'label',
-  'description',
-  'weight',
+  'style',
 ]);
 
 /** Tag declaration keyword. */
@@ -111,6 +110,9 @@ export const DIRECTIVE_KEYWORDS = new Set([
   'hide',
   'mode',
   'direction',
+  // Boxes-and-lines
+  'box-metric',
+  'show-values',
   // ER
   'notation',
   // Class
@@ -150,22 +152,20 @@ export const DIRECTIVE_KEYWORDS = new Set([
   // Sequence
   'activations',
   'no-activations',
-  // Map (§24B) directives
-  'region',
-  'projection',
+  // Map (§24B) directives — cosmetics on by default, bare `no-*` opt-outs
   'region-metric',
   'poi-metric',
   'flow-metric',
-  'region-labels',
-  'poi-labels',
-  'default-country',
-  'default-state',
-  'no-legend',
-  'no-insets',
-  'muted',
-  'natural',
-  'subtitle',
+  'locale',
+  'active-tag',
   'caption',
+  'no-legend',
+  'no-coastline',
+  'no-relief',
+  'no-context-labels',
+  'no-region-labels',
+  'no-poi-labels',
+  'no-colorize',
   'poi',
   'route',
   // Data charts