@diagrammo/dgmo 0.50.1 → 0.50.2

package/dist/element.mjs

@@ -13545,6 +13545,8 @@ function parseChart(content, palette) {
         result.solidFill = true;
       } else if (firstToken === "no-title") {
         result.noTitle = true;
+      } else if (firstToken === "no-auto-y") {
+        result.noAutoY = true;
       } else if (firstToken === "fill") {
         result.fill = true;
       } else if (firstToken === "hole") {
@@ -13839,6 +13841,7 @@ var init_chart = __esm({
       "orientation-horizontal",
       "solid-fill",
       "no-title",
+      "no-auto-y",
       "fill",
       "hole"
     ]);
@@ -31924,7 +31927,14 @@ function renderLine(svg, chart, width, height, colors, palette, isDark, textColo
           hi = Math.max(hi, v);
         }
     if (!isFinite(lo)) return [0, 1];
-    if (lo > 0) lo = 0;
+    if (chart.noAutoY) {
+      if (lo > 0) lo = 0;
+    } else {
+      const pad3 = (hi - lo) * 0.05 || Math.abs(hi) * 0.05 || 1;
+      const nlo = lo - pad3;
+      lo = lo >= 0 && nlo < 0 ? 0 : nlo;
+      hi = hi + pad3;
+    }
     if (lo === hi) hi = lo + 1;
     return [lo, hi];
   };
@@ -72501,6 +72511,7 @@ function haloRect(svg, x, y, w, h, rx, C) {
 function pickBand(nowMs, resolvedMs, hasTime) {
   const days = dayDelta(nowMs, resolvedMs);
   if (hasTime && days <= 0) return "clock";
+  if (days > 3 * 365) return "years";
   if (days > 365) return "year";
   if (days > 92) return "months";
   if (days > 18) return "monthgrid";
@@ -72531,9 +72542,31 @@ function monthGridLayout(nowMs, resolvedMs, contentW) {
   }
   return { months, dim };
 }
+function yearsLayout(nowMs, resolvedMs) {
+  const y0 = new Date(nowMs).getFullYear();
+  const y1 = new Date(resolvedMs).getFullYear();
+  const d0 = Math.floor(y0 / 10) * 10;
+  const d1 = Math.floor(y1 / 10) * 10;
+  return { d0, d1, rows: (d1 - d0) / 10 + 1 };
+}
 function bandHeightFor(kind, nowMs, resolvedMs, contentW) {
   const clamp5 = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
   switch (kind) {
+    case "years": {
+      const { rows } = yearsLayout(nowMs, resolvedMs);
+      const rowGap = 11;
+      const labW = 54;
+      const gap = 7;
+      const cellW = (contentW - labW - 10 * gap) / 10;
+      let cellH = clamp5(cellW * 0.5, 26, 40);
+      const MAX = 380;
+      let total = rows * cellH + (rows - 1) * rowGap;
+      if (total > MAX) {
+        cellH = Math.max(9, (MAX - (rows - 1) * rowGap) / rows);
+        total = rows * cellH + (rows - 1) * rowGap;
+      }
+      return total;
+    }
     case "year": {
       const R = new Date(resolvedMs).getFullYear() - new Date(nowMs).getFullYear() + 1;
       const yearW = 66;
@@ -72572,6 +72605,61 @@ function bandHeightFor(kind, nowMs, resolvedMs, contentW) {
       return clamp5(contentW * 0.22, 125, 170);
   }
 }
+function vizYears(svg, g, nowMs, resolvedMs, C) {
+  const now = new Date(nowMs);
+  const ev = new Date(resolvedMs);
+  const nowY = now.getFullYear();
+  const evY = ev.getFullYear();
+  const { d0, rows } = yearsLayout(nowMs, resolvedMs);
+  const labW = 54;
+  const gap = 7;
+  const rowGap = 11;
+  const rowH = (g.height - rowGap * (rows - 1)) / rows;
+  const cellH = rowH;
+  const cellW = (g.contentW - labW - 10 * gap) / 10;
+  const rx = Math.min(6, Math.min(cellW, cellH) * 0.22);
+  const showLabel = cellH >= 18 && cellW >= 22;
+  const yrFont = Math.min(12, cellW * 0.34, cellH * 0.5);
+  for (let r = 0; r < rows; r++) {
+    const dec = d0 + r * 10;
+    const ry = g.top + r * (rowH + rowGap);
+    aText(
+      svg,
+      g.left + labW - 12,
+      ry + rowH / 2,
+      Math.min(14, rowH * 0.5),
+      C.muted,
+      800,
+      "end",
+      `${dec}s`,
+      { "dominant-baseline": "central" }
+    );
+    for (let i = 0; i < 10; i++) {
+      const yr = dec + i;
+      const before = yr < nowY;
+      const isNow = yr === nowY;
+      const isEv = yr === evY;
+      const between = yr > nowY && yr < evY;
+      const st = isEv ? roleStyle(C, "event") : isNow ? roleStyle(C, "today") : between ? gradStyle(C, (yr - nowY) / (evY - nowY)) : roleStyle(C, before ? "past" : "future");
+      const x = g.left + labW + i * (cellW + gap);
+      aRect(svg, x, ry, cellW, cellH, rx, st.fill, st.stroke, 1);
+      if (isEv) haloRect(svg, x, ry, cellW, cellH, rx, C);
+      if (showLabel) {
+        aText(
+          svg,
+          x + cellW / 2,
+          ry + cellH / 2,
+          yrFont,
+          st.text,
+          isNow || isEv ? 800 : 650,
+          "middle",
+          String(yr),
+          { "dominant-baseline": "central" }
+        );
+      }
+    }
+  }
+}
 function vizYear(svg, g, nowMs, resolvedMs, C) {
   const now = new Date(nowMs);
   const ev = new Date(resolvedMs);
@@ -73083,6 +73171,8 @@ function pad22(n) {
 }
 function drawBand2(svg, kind, g, nowMs, resolvedMs, C) {
   switch (kind) {
+    case "years":
+      return vizYears(svg, g, nowMs, resolvedMs, C);
     case "year":
       return vizYear(svg, g, nowMs, resolvedMs, C);
     case "months":
@@ -73762,13 +73852,13 @@ function drawRow(svg, entry, index, parsed, now, rowTop, rowH, geom, col) {
     const mainFont = 48;
     const baseY = center + 16;
     const capTop = baseY - mainFont * 0.7;
-    g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("x", contentLeft).attr("y", baseY).attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", mainFont).attr("font-weight", 600).style("font-variant-numeric", "tabular-nums").text(ts.main);
     const sf = 20;
     const mainW = [...ts.main].reduce(
-      (w, c) => w + mainFont * (c === ":" ? 0.28 : 0.6),
+      (w, c) => w + mainFont * (c === ":" ? 0.334 : 0.6),
       0
     );
     const stackX = contentLeft + mainW + 5;
+    g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("x", contentLeft).attr("y", baseY).attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", mainFont).attr("font-weight", 600).attr("textLength", mainW).attr("lengthAdjust", "spacing").style("font-variant-numeric", "tabular-nums").text(ts.main);
     g.append("text").attr("data-dgmo-clock-digital-part", "sec").attr("x", stackX).attr("y", capTop + sf * 0.72).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", sf).attr("font-weight", 600).style("font-variant-numeric", "tabular-nums").text(`:${ts.sec}`);
     if (ts.ap)
       g.append("text").attr("data-dgmo-clock-digital-part", "ap").attr("x", stackX).attr("y", baseY).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", sf).attr("font-weight", 600).text(ts.ap);
@@ -73907,13 +73997,13 @@ function drawColumns(body, parsed, now, top, geom, col) {
       const sf = 13;
       const tf = fitFont(ts.main, 44, innerW - 30, 20);
       const mainW = [...ts.main].reduce(
-        (w, c) => w + tf * (c === ":" ? 0.28 : 0.6),
+        (w, c) => w + tf * (c === ":" ? 0.334 : 0.6),
         0
       );
       const stackW = Math.max(estWidth(`:${ts.sec}`, sf), estWidth(ts.ap, sf));
       const gLeft = cx - (mainW + 7 + stackW) / 2;
       const baseY = cy + tf * 0.34;
-      g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("x", gLeft).attr("y", baseY).attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", tf).attr("font-weight", 600).style("font-variant-numeric", "tabular-nums").text(ts.main);
+      g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("x", gLeft).attr("y", baseY).attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", tf).attr("font-weight", 600).attr("textLength", mainW).attr("lengthAdjust", "spacing").style("font-variant-numeric", "tabular-nums").text(ts.main);
       const stackX = gLeft + mainW + 7;
       g.append("text").attr("data-dgmo-clock-digital-part", "sec").attr("x", stackX).attr("y", baseY - tf * 0.32).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", sf).attr("font-weight", 500).text(`:${ts.sec}`);
       if (ts.ap)
@@ -81465,7 +81555,7 @@ async function render(content, options) {
     try {
       const raw = await renderDataChartD3(renderContent, theme, paletteColors);
       const svg2 = injectHoverStyles(raw, chartType, { bakeHover });
-      return { svg: svg2, diagnostics };
+      return { svg: svg2, diagnostics, chartType: chartType ?? void 0 };
     } finally {
       releaseDom();
     }
@@ -81506,7 +81596,7 @@ async function render(content, options) {
     } catch {
     }
   }
-  return { svg, diagnostics };
+  return { svg, diagnostics, chartType: chartType ?? void 0 };
 }
 
 // src/countdown/ticker.ts
@@ -82714,6 +82804,7 @@ function resolveBlockOptions(opts) {
     mode,
     palette: opts.palette ?? "slate",
     colorMode: opts.colorMode ?? "auto",
+    background: opts.background ?? "auto",
     showSource: opts.showSource ?? showcase,
     showCopy: opts.showCopy ?? showcase,
     showExpand: opts.showExpand ?? showcase,
@@ -82816,7 +82907,7 @@ var CSS = AUTO_BASE_CSS + "\n" + BLOCK_CSS + "\n" + darkScopedBlockCss(BLOCK_CSS
 
 // src/auto/shared.ts
 init_safe_href();
-var VERSION = "0.50.1";
+var VERSION = "0.50.2";
 var ARIA_LABEL_MAX = 200;
 var COPIED_INTERACTION_MS = 1500;
 var LOG_PREFIX = "[dgmo]";

package/dist/index.d.ts

@@ -0,0 +1,185 @@
+import { ab as DiagnosticSpec, a as PaletteConfig, J as Theme, C as CompactViewState, D as DgmoError } from './themes-PdPR1-hC.js';
+export { f as ChartTypeMeta, h as DgmoSeverity, ac as DiagnosticParams, ad as EmitOptions, j as Gazetteer, k as GazetteerEntry, l as MapCompletionOptions, M as MapData, o as MapLocationMatch, p as MapPlaceCompletion, s as MapRegionCompletion, P as PaletteColors, w as RegionName, x as RegionNames, N as chartTypes, O as completeMapPlaces, Q as completeMapRegions, ae as emit, X as formatDgmoError, _ as getPalette, a4 as palettes, af as resolvePaletteOrFallback, a8 as searchMapLocations, aa as themes, a5 as validate } from './themes-PdPR1-hC.js';
+
+declare function getMinDimensions(content: string): {
+    width: number;
+    height: number;
+};
+
+/**
+ * Make an SVG produced by `@diagrammo/dgmo`'s static `render()` suitable for
+ * responsive inline embedding in any host (Obsidian, remark/markdown, web
+ * pages):
+ *
+ * - dgmo renders diagrams inside a fixed export canvas (e.g.
+ *   `viewBox="0 0 1200 800"`), with content often occupying only a fraction
+ *   of it. We compute a tight content bounding box from element coordinates
+ *   and set the root `viewBox` to bbox+padding, so the diagram's intrinsic
+ *   aspect ratio matches its CONTENT — no dead space above/below or beside it.
+ * - Ensure the root `<svg>` has a `viewBox` so it scales responsively.
+ * - Strip fixed `width="N"` / `height="N"` so CSS (e.g. `width:100%;
+ *   height:auto`, or an aspect-ratio derived from the tight viewBox) controls
+ *   sizing.
+ * - The root background (the theme's opaque `palette.bg` — both the inline
+ *   `background:` style and the full-canvas `<rect>` some renderers paint) is
+ *   STRIPPED by default so the embed inherits the host page surface and blends
+ *   into Obsidian / doc-site / arbitrary pages instead of showing a mismatched
+ *   rectangle. Pass `{ background: 'opaque' }` to keep it — the embedder
+ *   opt-out, and the automatic default for background-meaningful types like
+ *   `map` (whose bg is the ocean) via `defaultEmbedBackground`. Standalone
+ *   PNG/SVG export does NOT go through here and stays opaque.
+ *
+ * This is intentionally a string transform, not a DOM `getBBox()` step: dgmo
+ * can dual-render light/dark SVGs where one is hidden by color-mode CSS, and
+ * `getBBox()` returns 0 for the hidden copy. Parsing coordinates from the
+ * markup measures both copies reliably and works server-side (Node).
+ */
+interface NormalizeSvgForEmbedOptions {
+    /**
+     * `transparent` (default) strips the theme's opaque root background so the
+     * embed inherits the host page surface. `opaque` preserves it — the embedder
+     * opt-out for diagrams that need their own solid backdrop. Callers that know
+     * the chart type should resolve this via `defaultEmbedBackground`.
+     */
+    background?: 'transparent' | 'opaque';
+}
+declare function normalizeSvgForEmbed(input: string, opts?: NormalizeSvgForEmbedOptions): string;
+/**
+ * The embed background an embedder gets by default for a given chart type:
+ * `transparent` (blend into the host) for everything except
+ * background-meaningful types, which stay `opaque`.
+ */
+declare function defaultEmbedBackground(chartType?: string): 'transparent' | 'opaque';
+/**
+ * Parse the content bounding box of a normalized embed SVG, if one can be
+ * derived. Returns `null` when no usable coordinates are found (e.g. an empty
+ * diagram). Useful for hosts that want to set an explicit `aspect-ratio` from
+ * the tight viewBox.
+ */
+declare function getEmbedSvgViewBox(svg: string): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | null;
+
+interface MountD3Opts {
+    theme?: 'light' | 'dark' | 'transparent';
+    palette?: string;
+    /** Forwarded to the interaction adapter: source-line navigation on click. */
+    onNavigate?: (line: number) => void;
+    mutedColor?: string;
+    surface?: string;
+    text?: string;
+}
+interface MountedD3Chart {
+    /** Re-render with new content and/or theme/palette; re-attaches interactions. */
+    update: (content: string, opts?: Partial<MountD3Opts>) => Promise<void>;
+    /** Emphasize the chart element on the given source line (editor cursor sync);
+     *  pass null to clear. */
+    highlight: (line: number | null) => void;
+    /** Tear down listeners + overlays and clear the container. */
+    destroy: () => void;
+}
+declare function mountD3DataChart(container: HTMLElement, content: string, opts?: MountD3Opts): MountedD3Chart;
+
+interface DataChartInteractionOpts {
+    onNavigate?: (line: number) => void;
+    mutedColor?: string;
+    surface?: string;
+    text?: string;
+}
+interface DataChartController {
+    /** Remove all listeners + overlays. */
+    destroy: () => void;
+    /** Emphasize the chart element(s) on the given source line (editor cursor
+     *  sync); pass null to clear. No-op while the pointer is actively hovering. */
+    highlight: (line: number | null) => void;
+}
+declare function attachDataChartInteractions(svg: SVGSVGElement, opts?: DataChartInteractionOpts): DataChartController;
+
+/** All data-chart types the hand-built renderers currently cover. */
+declare const D3_DATA_CHART_TYPES: Set<string>;
+declare function supportsD3DataChart(type: string): boolean;
+
+/**
+ * The full diagnostic catalog, sorted by code. Every coded diagnostic
+ * dgmo can emit — its severity, owning chart type, canonical message,
+ * fix hint, and a triggering example. This is the enumerable source of
+ * truth for the CLI `diagnostics` subcommand, the console error-review
+ * surface, MCP, and the language-spec catalog.
+ */
+declare function listDiagnosticCodes(): DiagnosticSpec[];
+/** Look up a single spec by its code, or `undefined` if not cataloged. */
+declare function getDiagnosticSpec(code: string): DiagnosticSpec | undefined;
+
+interface RenderOptions {
+    theme?: Theme;
+    /**
+     * A `PaletteConfig` (e.g. `palettes.catppuccin`) or a palette id string
+     * (e.g. `'catppuccin'`). Unknown ids fall back to the default palette.
+     */
+    palette?: PaletteConfig | string;
+    /**
+     * How to handle parse errors:
+     *   'svg'    — render an inline error SVG (default)
+     *   'silent' — return empty svg + diagnostics; caller handles UI
+     *   'throw'  — throw an Error with the diagnostics
+     */
+    onError?: 'svg' | 'silent' | 'throw';
+    /**
+     * Pre-applied interactive view state — collapsed sections/columns,
+     * active swimlane tag-group, etc. Used to render a specific view
+     * non-interactively (server-side render, share-link decode).
+     */
+    viewState?: CompactViewState;
+}
+interface RenderResult {
+    svg: string;
+    diagnostics: DgmoError[];
+}
+/**
+ * Render DGMO source to an SVG string.
+ *
+ * @example
+ * ```ts
+ * import { render, palettes, themes } from '@diagrammo/dgmo';
+ *
+ * const { svg } = await render(text, {
+ *   palette: palettes.catppuccin,
+ *   theme: themes.dark,
+ * });
+ * document.getElementById('chart').innerHTML = svg;
+ * ```
+ */
+declare function render(text: string, options?: RenderOptions): Promise<RenderResult>;
+
+interface EncodeDiagramUrlOptions {
+    baseUrl?: string;
+    palette?: PaletteConfig;
+    theme?: Theme;
+    filename?: string;
+    /**
+     * Initial view state to embed in the URL — re-applied when the link is
+     * decoded so recipients open the diagram in the same configuration.
+     */
+    viewState?: CompactViewState;
+}
+/**
+ * Encode DGMO text into a shareable URL. Returns null if the compressed
+ * payload exceeds the 8 KB URL limit.
+ */
+declare function encodeDiagramUrl(text: string, options?: EncodeDiagramUrlOptions): string | null;
+interface DecodedDiagramUrl {
+    text: string;
+    palette?: PaletteConfig;
+    theme?: Theme;
+    filename?: string;
+}
+/**
+ * Decode a share URL back into DGMO text plus optional palette/theme/filename.
+ * Returns null if the URL contains no valid DGMO payload.
+ */
+declare function decodeDiagramUrl(url: string): DecodedDiagramUrl | null;
+
+export { CompactViewState, D3_DATA_CHART_TYPES, type DataChartInteractionOpts, type DecodedDiagramUrl, DgmoError, DiagnosticSpec, type EncodeDiagramUrlOptions, type MountD3Opts, type MountedD3Chart, type NormalizeSvgForEmbedOptions, PaletteConfig, type RenderOptions, type RenderResult, Theme, attachDataChartInteractions, decodeDiagramUrl, defaultEmbedBackground, encodeDiagramUrl, getDiagnosticSpec, getEmbedSvgViewBox, getMinDimensions, listDiagnosticCodes, mountD3DataChart, normalizeSvgForEmbed, render, supportsD3DataChart };

package/dist/index.js

@@ -1,8 +1,9 @@
 import {
+  defaultEmbedBackground,
   getEmbedSvgViewBox,
   normalizeSvgForEmbed,
   renderErrorCard
-} from "./chunk-YIA4LEX4.js";
+} from "./chunk-DN66GPY5.js";
 import {
   completeMapPlaces,
   completeMapRegions,
@@ -16,7 +17,7 @@ import {
   decodeDiagramUrl,
   encodeDiagramUrl,
   render
-} from "./chunk-ZAD4HV2G.js";
+} from "./chunk-SVTI362O.js";
 import "./chunk-66RUL3XF.js";
 import "./chunk-YRYKTYMQ.js";
 import "./chunk-YYVTBZZC.js";
@@ -25,7 +26,7 @@ import {
   REGISTRY_BY_ID,
   chartTypes,
   parseDgmo
-} from "./chunk-VVZRV54S.js";
+} from "./chunk-KQ57MHRO.js";
 import "./chunk-Q4V4XQWV.js";
 import "./chunk-BTUTZMPT.js";
 import "./chunk-YNRDWYZP.js";
@@ -42,7 +43,7 @@ import {
   D3_DATA_CHART_TYPES,
   renderDataChartD3,
   supportsD3DataChart
-} from "./chunk-4S52SK6G.js";
+} from "./chunk-QJJZSROI.js";
 import "./chunk-HGN652MU.js";
 import "./chunk-U6EQI3U6.js";
 import "./chunk-7UEMZREK.js";
@@ -50,7 +51,7 @@ import "./chunk-A4GOY3PE.js";
 import "./chunk-6KFWC4CO.js";
 import "./chunk-HQCHYB5F.js";
 import "./chunk-5LWQH6QV.js";
-import "./chunk-XDXNDSKO.js";
+import "./chunk-XEGTMVYY.js";
 import "./chunk-I2WKW7C7.js";
 import "./chunk-TSA237IM.js";
 import "./chunk-6IAA2QQ2.js";
@@ -866,6 +867,7 @@ export {
   completeMapPlaces,
   completeMapRegions,
   decodeDiagramUrl2 as decodeDiagramUrl,
+  defaultEmbedBackground,
   emit,
   encodeDiagramUrl2 as encodeDiagramUrl,
   formatDgmoError,

package/dist/{renderer-72LGR2YF.js → renderer-5KVCNMOJ.js}

@@ -1,7 +1,7 @@
 import {
   renderClock,
   renderClockForExport
-} from "./chunk-7PQYTZMA.js";
+} from "./chunk-5WFIYXQ6.js";
 import "./chunk-6KFWC4CO.js";
 import "./chunk-P6T66CCZ.js";
 import "./chunk-TLVIHFRO.js";
@@ -11,4 +11,4 @@ export {
   renderClock,
   renderClockForExport
 };
-//# sourceMappingURL=renderer-72LGR2YF.js.map
+//# sourceMappingURL=renderer-5KVCNMOJ.js.map

package/dist/{renderer-PJM35LJN.js → renderer-P5ROYQGU.js}

@@ -1,7 +1,7 @@
 import {
   renderCountdown,
   renderCountdownForExport
-} from "./chunk-Y4RNXEAO.js";
+} from "./chunk-T5SHNNGP.js";
 import "./chunk-3HDBAXF5.js";
 import "./chunk-BMR4CIEO.js";
 import "./chunk-YNRDWYZP.js";
@@ -14,4 +14,4 @@ export {
   renderCountdown,
   renderCountdownForExport
 };
-//# sourceMappingURL=renderer-PJM35LJN.js.map
+//# sourceMappingURL=renderer-P5ROYQGU.js.map