@diagrammo/dgmo 0.8.17 → 0.8.19

package/src/sharing.ts

@@ -6,24 +6,45 @@ import {
 const DEFAULT_BASE_URL = 'https://online.diagrammo.app';
 const COMPRESSED_SIZE_LIMIT = 8192; // 8 KB
 
-export interface DiagramViewState {
-  activeTagGroup?: string;
-  collapsedGroups?: string[];
-  swimlaneTagGroup?: string;
-  collapsedLanes?: string[];
-  palette?: string;
-  theme?: 'light' | 'dark';
+/**
+ * Compact view state schema (ADR-6).
+ * All fields optional. Only non-default values are encoded.
+ * `tag: null` means "user chose none"; absent `tag` means "use DSL default" (ADR-5).
+ */
+export interface CompactViewState {
+  tag?: string | null; // active tag override (null = "none")
+  cs?: number[]; // collapsed sections (sequence line numbers)
+  cg?: string[]; // collapsed groups/nodes (IDs or names)
+  swim?: string | null; // swimlane tag group
+  cl?: string[]; // collapsed lanes
+  cc?: string[]; // collapsed columns (kanban)
+  rm?: string; // render mode override
+  htv?: Record<string, string[]>; // hidden tag values
+  ha?: string[]; // hidden attributes
+  enl?: number[]; // expanded note lines (sequence)
+  sem?: boolean; // semantic colors (ER)
+  cm?: boolean; // compact meta (kanban)
+  c4l?: string; // C4 level
+  c4s?: string; // C4 system
+  c4c?: string; // C4 container
+  rps?: number; // RPS multiplier (infra)
+  spd?: number; // playback speed (infra)
+  io?: Record<string, number>; // instance overrides (infra)
 }
 
 export interface DecodedDiagramUrl {
   dsl: string;
-  viewState: DiagramViewState;
+  viewState: CompactViewState;
+  palette?: string;
+  theme?: 'light' | 'dark';
   filename?: string;
 }
 
 export interface EncodeDiagramUrlOptions {
   baseUrl?: string;
-  viewState?: DiagramViewState;
+  viewState?: CompactViewState;
+  palette?: string;
+  theme?: 'light' | 'dark';
   filename?: string;
 }
 
@@ -36,6 +57,34 @@ export type EncodeDiagramUrlResult =
       limit: number;
     };
 
+/**
+ * Encode a CompactViewState to a compressed string for URL embedding.
+ * Returns empty string if state has no keys (ADR-4).
+ */
+export function encodeViewState(state: CompactViewState): string {
+  const keys = Object.keys(state);
+  if (keys.length === 0) return '';
+  return compressToEncodedURIComponent(JSON.stringify(state));
+}
+
+/**
+ * Decode a compressed view state string back to CompactViewState.
+ * Returns empty object on failure (no crash).
+ */
+export function decodeViewState(encoded: string): CompactViewState {
+  if (!encoded) return {};
+  try {
+    const json = decompressFromEncodedURIComponent(encoded);
+    if (!json) return {};
+    const parsed = JSON.parse(json);
+    if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed))
+      return {};
+    return parsed as CompactViewState;
+  } catch {
+    return {};
+  }
+}
+
 /**
  * Compress a DGMO DSL string into a shareable URL.
  * Returns `{ url }` on success, or `{ error: 'too-large', compressedSize, limit }` if the
@@ -59,28 +108,21 @@ export function encodeDiagramUrl(
 
   let hash = `dgmo=${compressed}`;
 
-  if (options?.viewState?.activeTagGroup) {
-    hash += `&tag=${encodeURIComponent(options.viewState.activeTagGroup)}`;
-  }
-
-  if (options?.viewState?.collapsedGroups?.length) {
-    hash += `&cg=${encodeURIComponent(options.viewState.collapsedGroups.join(','))}`;
-  }
-
-  if (options?.viewState?.swimlaneTagGroup) {
-    hash += `&swim=${encodeURIComponent(options.viewState.swimlaneTagGroup)}`;
-  }
-
-  if (options?.viewState?.collapsedLanes?.length) {
-    hash += `&cl=${encodeURIComponent(options.viewState.collapsedLanes.join(','))}`;
+  // View state as single compressed blob (ADR-1)
+  if (options?.viewState) {
+    const vsEncoded = encodeViewState(options.viewState);
+    if (vsEncoded) {
+      hash += `&vs=${vsEncoded}`;
+    }
   }
 
-  if (options?.viewState?.palette && options.viewState.palette !== 'nord') {
-    hash += `&pal=${encodeURIComponent(options.viewState.palette)}`;
+  // Palette and theme are app-level, kept as separate params
+  if (options?.palette && options.palette !== 'nord') {
+    hash += `&pal=${encodeURIComponent(options.palette)}`;
   }
 
-  if (options?.viewState?.theme && options.viewState.theme !== 'dark') {
-    hash += `&th=${encodeURIComponent(options.viewState.theme)}`;
+  if (options?.theme && options.theme !== 'dark') {
+    hash += `&th=${encodeURIComponent(options.theme)}`;
   }
 
   if (options?.filename) {
@@ -95,8 +137,8 @@ export function encodeDiagramUrl(
 /**
  * Decode a DGMO DSL string and view state from a URL query string or hash.
  * Accepts any of:
- *   - `?dgmo=<payload>&tag=<name>`
- *   - `#dgmo=<payload>&tag=<name>` (backwards compat)
+ *   - `?dgmo=<payload>&vs=<state>`
+ *   - `#dgmo=<payload>&vs=<state>` (backwards compat)
  *   - `dgmo=<payload>`
  *   - `<bare payload>`
  *
@@ -105,6 +147,8 @@ export function encodeDiagramUrl(
 export function decodeDiagramUrl(hash: string): DecodedDiagramUrl {
   const empty: DecodedDiagramUrl = { dsl: '', viewState: {} };
   let filename: string | undefined;
+  let palette: string | undefined;
+  let theme: 'light' | 'dark' | undefined;
   if (!hash) return empty;
 
   let raw = hash;
@@ -120,29 +164,22 @@ export function decodeDiagramUrl(hash: string): DecodedDiagramUrl {
   const parts = raw.split('&');
   let payload = parts[0];
 
-  // Parse extra params (e.g. tag=Location)
-  const viewState: DiagramViewState = {};
+  // Parse extra params
+  let viewState: CompactViewState = {};
   for (let i = 1; i < parts.length; i++) {
     const eq = parts[i].indexOf('=');
     if (eq === -1) continue;
     const key = parts[i].slice(0, eq);
-    const val = decodeURIComponent(parts[i].slice(eq + 1));
-    if (key === 'tag' && val) {
-      viewState.activeTagGroup = val;
-    }
-    if (key === 'cg' && val) {
-      viewState.collapsedGroups = val.split(',').filter(Boolean);
-    }
-    if (key === 'swim' && val) {
-      viewState.swimlaneTagGroup = val;
+    const val = parts[i].slice(eq + 1);
+    if (key === 'vs' && val) {
+      viewState = decodeViewState(val);
     }
-    if (key === 'cl' && val) {
-      viewState.collapsedLanes = val.split(',').filter(Boolean);
+    if (key === 'pal' && val) palette = decodeURIComponent(val);
+    if (key === 'th') {
+      const decoded = decodeURIComponent(val);
+      if (decoded === 'light' || decoded === 'dark') theme = decoded;
     }
-    if (key === 'pal' && val) viewState.palette = val;
-    if (key === 'th' && (val === 'light' || val === 'dark'))
-      viewState.theme = val;
-    if (key === 'fn' && val) filename = val;
+    if (key === 'fn' && val) filename = decodeURIComponent(val);
   }
 
   // Strip 'dgmo=' prefix
@@ -150,12 +187,12 @@ export function decodeDiagramUrl(hash: string): DecodedDiagramUrl {
     payload = payload.slice(5);
   }
 
-  if (!payload) return { dsl: '', viewState, filename };
+  if (!payload) return { dsl: '', viewState, palette, theme, filename };
 
   try {
     const result = decompressFromEncodedURIComponent(payload);
-    return { dsl: result ?? '', viewState, filename };
+    return { dsl: result ?? '', viewState, palette, theme, filename };
   } catch {
-    return { dsl: '', viewState, filename };
+    return { dsl: '', viewState, palette, theme, filename };
   }
 }

package/src/utils/duration.ts

@@ -120,7 +120,8 @@ export function addGanttDuration(
   duration: Duration,
   holidays: GanttHolidays,
   holidaySet: Set<string>,
-  direction: 1 | -1 = 1
+  direction: 1 | -1 = 1,
+  opts?: { sprintLength?: Duration }
 ): Date {
   const { amount, unit } = duration;
 
@@ -197,6 +198,19 @@ export function addGanttDuration(
       result.setTime(result.getTime() + amount * 60000 * direction);
       return result;
     }
+
+    case 's': {
+      if (!opts?.sprintLength) {
+        throw new Error(
+          'Sprint duration unit "s" requires sprintLength configuration'
+        );
+      }
+      const sl = opts.sprintLength;
+      const totalDays = amount * sl.amount * (sl.unit === 'w' ? 7 : 1);
+      const result = new Date(startDate);
+      result.setDate(result.getDate() + Math.round(totalDays) * direction);
+      return result;
+    }
   }
 }
 
@@ -204,7 +218,7 @@ export function addGanttDuration(
  * Parse a duration string like "3bd" or "5d".
  */
 export function parseDuration(s: string): Duration | null {
-  const match = s.trim().match(/^(\d+(?:\.\d+)?)(min|bd|d|w|m|q|y|h)$/);
+  const match = s.trim().match(/^(\d+(?:\.\d+)?)(min|bd|d|w|m|q|y|h|s)$/);
   if (!match) return null;
   return { amount: parseFloat(match[1]), unit: match[2] as DurationUnit };
 }

package/src/utils/legend-constants.ts

@@ -54,3 +54,14 @@ export const EYE_OPEN_PATH =
   'M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z';
 export const EYE_CLOSED_PATH =
   'M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1';
+
+// ── Controls group constants ────────────────────────────────
+// Gear/cog icon (14×14 viewBox) — 6 flat teeth with center hole
+// Computed from polar coordinates: outerR=5.5, innerR=3.5, holeR=2, center=(7,7)
+// Uses evenodd fill-rule for the center hole
+export const CONTROLS_ICON_PATH =
+  'M5.6 1.7L8.4 1.7L7.9 3.6L9.5 4.5L10.9 3.1L12.3 5.6L10.4 6.1L10.4 7.9L12.3 8.4L10.9 10.9L9.5 9.5L7.9 10.4L8.4 12.3L5.6 12.3L6.1 10.4L4.5 9.5L3.1 10.9L1.7 8.4L3.6 7.9L3.6 6.1L1.7 5.6L3.1 3.1L4.5 4.5L6.1 3.6Z' +
+  'M5 7a2 2 0 1 0 4 0a2 2 0 1 0-4 0Z';
+export const LEGEND_TOGGLE_DOT_R = LEGEND_DOT_R;
+export const LEGEND_TOGGLE_OFF_OPACITY = 0.4;
+export const LEGEND_GEAR_PILL_W = 14 + LEGEND_PILL_PAD; // gear icon (14) + padding

package/src/utils/legend-d3.ts

@@ -9,6 +9,9 @@ import {
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
   LEGEND_ENTRY_DOT_GAP,
+  LEGEND_TOGGLE_DOT_R,
+  LEGEND_TOGGLE_OFF_OPACITY,
+  CONTROLS_ICON_PATH,
   measureLegendText,
 } from './legend-constants';
 import { computeLegendLayout } from './legend-layout';
@@ -24,6 +27,7 @@ import type {
   LegendPillLayout,
   LegendCapsuleLayout,
   LegendControlLayout,
+  ControlsGroupLayout,
   D3Sel,
 } from './legend-types';
 
@@ -83,6 +87,19 @@ export function renderLegendD3(
       renderPill(legendG, pill, palette, groupBg, callbacks);
     }
 
+    // Render controls group (gear pill / capsule)
+    if (currentLayout.controlsGroup) {
+      renderControlsGroup(
+        legendG,
+        currentLayout.controlsGroup,
+        palette,
+        groupBg,
+        pillBorder,
+        callbacks,
+        config
+      );
+    }
+
     // Render controls
     for (const ctrl of currentLayout.controls) {
       renderControl(
@@ -398,3 +415,157 @@ function renderControl(
     g.on('click', () => onClick());
   }
 }
+
+// ── Controls group (gear pill / capsule) ───────────────────
+
+function renderControlsGroup(
+  parent: D3Sel,
+  layout: ControlsGroupLayout,
+  palette: LegendPalette,
+  groupBg: string,
+  pillBorder: string,
+  callbacks?: LegendCallbacks,
+  config?: LegendConfig
+): void {
+  const g = parent
+    .append('g')
+    .attr('transform', `translate(${layout.x},${layout.y})`)
+    .attr('data-legend-controls', layout.expanded ? 'expanded' : 'collapsed')
+    .attr('data-export-ignore', 'true')
+    .style('cursor', 'pointer');
+
+  if (!layout.expanded) {
+    // Collapsed: gear pill
+    g.append('rect')
+      .attr('width', layout.width)
+      .attr('height', layout.height)
+      .attr('rx', layout.height / 2)
+      .attr('fill', groupBg);
+
+    // Gear icon centered
+    const iconSize = 14;
+    const iconX = (layout.width - iconSize) / 2;
+    const iconY = (layout.height - iconSize) / 2;
+    g.append('path')
+      .attr('d', CONTROLS_ICON_PATH)
+      .attr('transform', `translate(${iconX},${iconY})`)
+      .attr('fill', palette.textMuted)
+      .attr('fill-rule', 'evenodd')
+      .attr('pointer-events', 'none');
+
+    if (callbacks?.onControlsExpand) {
+      const cb = callbacks.onControlsExpand;
+      g.on('click', () => cb());
+    }
+  } else {
+    // Expanded: capsule with gear pill + toggle entries
+    const pill = layout.pill;
+
+    // Outer capsule background
+    g.append('rect')
+      .attr('width', layout.width)
+      .attr('height', layout.height)
+      .attr('rx', LEGEND_HEIGHT / 2)
+      .attr('fill', groupBg);
+
+    // Inner gear pill
+    const pillG = g
+      .append('g')
+      .attr('class', 'controls-gear-pill')
+      .style('cursor', 'pointer');
+
+    pillG
+      .append('rect')
+      .attr('x', pill.x)
+      .attr('y', pill.y)
+      .attr('width', pill.width)
+      .attr('height', pill.height)
+      .attr('rx', pill.height / 2)
+      .attr('fill', palette.bg);
+
+    pillG
+      .append('rect')
+      .attr('x', pill.x)
+      .attr('y', pill.y)
+      .attr('width', pill.width)
+      .attr('height', pill.height)
+      .attr('rx', pill.height / 2)
+      .attr('fill', 'none')
+      .attr('stroke', pillBorder)
+      .attr('stroke-width', 0.75);
+
+    // Gear icon inside pill
+    const iconSize = 14;
+    const iconX = pill.x + (pill.width - iconSize) / 2;
+    const iconY = pill.y + (pill.height - iconSize) / 2;
+    pillG
+      .append('path')
+      .attr('d', CONTROLS_ICON_PATH)
+      .attr('transform', `translate(${iconX},${iconY})`)
+      .attr('fill', palette.text)
+      .attr('fill-rule', 'evenodd')
+      .attr('pointer-events', 'none');
+
+    // Click on gear pill collapses
+    if (callbacks?.onControlsExpand) {
+      const cb = callbacks.onControlsExpand;
+      pillG.on('click', (event: Event) => {
+        event.stopPropagation();
+        cb();
+      });
+    }
+
+    // Toggle entries
+    const toggles = config?.controlsGroup?.toggles ?? [];
+    for (const tl of layout.toggles) {
+      const toggle = toggles.find((t) => t.id === tl.id);
+      const entryG = g
+        .append('g')
+        .attr('data-controls-toggle', tl.id)
+        .style('cursor', 'pointer');
+
+      if (tl.active) {
+        // Filled dot
+        entryG
+          .append('circle')
+          .attr('cx', tl.dotCx)
+          .attr('cy', tl.dotCy)
+          .attr('r', LEGEND_TOGGLE_DOT_R)
+          .attr('fill', palette.primary ?? palette.text);
+      } else {
+        // Hollow dot
+        entryG
+          .append('circle')
+          .attr('cx', tl.dotCx)
+          .attr('cy', tl.dotCy)
+          .attr('r', LEGEND_TOGGLE_DOT_R)
+          .attr('fill', 'none')
+          .attr('stroke', palette.textMuted)
+          .attr('stroke-width', 1);
+      }
+
+      // Label
+      entryG
+        .append('text')
+        .attr('x', tl.textX)
+        .attr('y', tl.textY)
+        .attr('dominant-baseline', 'central')
+        .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
+        .attr('fill', palette.textMuted)
+        .attr('opacity', tl.active ? 1 : LEGEND_TOGGLE_OFF_OPACITY)
+        .attr('font-family', FONT_FAMILY)
+        .text(tl.label);
+
+      // Click on toggle entry
+      if (callbacks?.onControlsToggle && toggle) {
+        const cb = callbacks.onControlsToggle;
+        const id = tl.id;
+        const newActive = !tl.active;
+        entryG.on('click', (event: Event) => {
+          event.stopPropagation();
+          cb(id, newActive);
+        });
+      }
+    }
+  }
+}