@diagrammo/dgmo 0.8.20 → 0.8.21

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

@@ -36,6 +36,7 @@ const CHAR_WIDTH_RATIO = 0.6;
 const NODE_TEXT_PADDING = 12;
 const GROUP_RX = 8;
 const GROUP_LABEL_FONT_SIZE = 14;
+const GROUP_LABEL_ZONE = 32;
 
 type D3G = d3Selection.Selection<SVGGElement, unknown, null, undefined>;
 type D3Svg = d3Selection.Selection<SVGSVGElement, unknown, null, undefined>;
@@ -45,19 +46,13 @@ const lineGeneratorLR = d3Shape
   .line<{ x: number; y: number }>()
   .x((d) => d.x)
   .y((d) => d.y)
-  .curve(d3Shape.curveMonotoneX);
+  .curve(d3Shape.curveBasis);
 
 const lineGeneratorTB = d3Shape
   .line<{ x: number; y: number }>()
   .x((d) => d.x)
   .y((d) => d.y)
-  .curve(d3Shape.curveMonotoneY);
-
-const lineGeneratorLinear = d3Shape
-  .line<{ x: number; y: number }>()
-  .x((d) => d.x)
-  .y((d) => d.y)
-  .curve(d3Shape.curveLinear);
+  .curve(d3Shape.curveBasis);
 
 // ── Text fitting ───────────────────────────────────────────
 
@@ -336,8 +331,18 @@ export function renderBoxesAndLines(
   // Compute diagram bounds for scaling
   const titleOffset = parsed.title ? 40 : 0;
   const legendH = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT + 8 : 0;
+
+  // Account for group label zone extensions (renderer-only, not in layout.height)
+  const groupLabelsSet = new Set(layout.groups.map((g) => g.label));
+  let labelZoneExtension = 0;
+  for (const group of parsed.groups) {
+    if (group.children.some((c) => groupLabelsSet.has(c))) {
+      labelZoneExtension += GROUP_LABEL_ZONE;
+    }
+  }
+
   const contentW = layout.width;
-  const contentH = layout.height + titleOffset + legendH;
+  const contentH = layout.height + titleOffset + legendH + labelZoneExtension;
 
   const scaleX = width / (contentW + DIAGRAM_PADDING * 2);
   const scaleY = height / (contentH + DIAGRAM_PADDING * 2);
@@ -390,10 +395,29 @@ export function renderBoxesAndLines(
   }
   ensureArrowMarkers(defs, arrowColors);
 
-  // ── Render groups (bottom layer) ───────────────────────
-  for (const group of layout.groups) {
+  // ── Render groups (bottom layer, largest first for nesting) ──
+  const sortedGroups = [...layout.groups].sort(
+    (a, b) => b.width * b.height - a.width * a.height
+  );
+  // Identify groups that contain sub-groups — only those need extra label space
+  const groupLabels = new Set(layout.groups.map((g) => g.label));
+  const hasSubGroups = new Set<string>();
+  for (const group of parsed.groups) {
+    for (const child of group.children) {
+      if (groupLabels.has(child)) hasSubGroups.add(group.label);
+    }
+  }
+
+  for (const group of sortedGroups) {
     const gx = group.x - group.width / 2;
-    const gy = group.y - group.height / 2;
+    // Only extend top for groups that contain sub-groups (dagre under-pads these)
+    const needsExtra = !group.collapsed && hasSubGroups.has(group.label);
+    const gy = needsExtra
+      ? group.y - group.height / 2 - GROUP_LABEL_ZONE
+      : group.y - group.height / 2;
+    const groupHeight = needsExtra
+      ? group.height + GROUP_LABEL_ZONE
+      : group.height;
 
     const groupG = diagramG
       .append('g')
@@ -464,7 +488,7 @@ export function renderBoxesAndLines(
         .attr('x', gx)
         .attr('y', gy)
         .attr('width', group.width)
-        .attr('height', group.height)
+        .attr('height', groupHeight)
         .attr('rx', GROUP_RX)
         .attr('ry', GROUP_RX)
         .attr('fill', mix(palette.surface, palette.bg, 40))
@@ -516,8 +540,73 @@ export function renderBoxesAndLines(
       if (isHidden) continue;
     }
 
-    // Apply parallel y-offset to points
-    const points = le.points.map((p) => ({ x: p.x, y: p.y + le.yOffset }));
+    // Self-loop: render as a smooth circular arc below the node
+    if (le.source === le.target) {
+      const nodeLayout = layoutNodeMap.get(le.source);
+      if (nodeLayout) {
+        const edgeG = diagramG
+          .append('g')
+          .attr('class', 'bl-edge-group')
+          .attr('data-line-number', String(le.lineNumber));
+        edgeGroups.set(i, edgeG as unknown as D3G);
+
+        const markerId = `bl-arrow-${color.replace('#', '')}`;
+        const cx = nodeLayout.x;
+        const cy = nodeLayout.y;
+        const hw = nodeLayout.width / 2;
+        const hh = nodeLayout.height / 2;
+        const pad = 20; // clearance from node edge
+
+        // Arc exits from bottom of right side, swings wide, returns to right of bottom side
+        const startX = cx + hw;
+        const startY = cy + hh * 0.4;
+        const endX = cx + hw * 0.4;
+        const endY = cy + hh;
+
+        // Control points swing far out to create a smooth circular arc
+        const cp1x = startX + hw + pad;
+        const cp1y = startY;
+        const cp2x = endX;
+        const cp2y = endY + hh + pad;
+
+        edgeG
+          .append('path')
+          .attr('class', 'bl-edge')
+          .attr(
+            'd',
+            `M ${startX} ${startY} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX} ${endY}`
+          )
+          .attr('fill', 'none')
+          .attr('stroke', color)
+          .attr('stroke-width', EDGE_STROKE_WIDTH)
+          .attr('marker-end', `url(#${markerId})`);
+      }
+      continue;
+    }
+
+    // Parallel edge fan: construct explicit 5-point geometry so lines
+    // bundle at ports and visibly spread apart in the middle.
+    let points: { x: number; y: number }[];
+    if (le.yOffset !== 0 && le.parallelCount > 1) {
+      const srcLayout = layoutNodeMap.get(le.source);
+      const tgtLayout = layoutNodeMap.get(le.target);
+      const srcY = srcLayout?.y ?? le.points[0]?.y ?? 0;
+      const tgtY = tgtLayout?.y ?? le.points[le.points.length - 1]?.y ?? 0;
+      const srcX = le.points[0]?.x ?? 0;
+      const tgtX = le.points[le.points.length - 1]?.x ?? 0;
+      const midX = (srcX + tgtX) / 2;
+      const midY = (srcY + tgtY) / 2;
+
+      points = [
+        { x: srcX, y: srcY }, // port (bundled)
+        { x: srcX + (midX - srcX) * 0.3, y: srcY + le.yOffset * 0.5 }, // separate
+        { x: midX, y: midY + le.yOffset }, // full spread
+        { x: tgtX - (tgtX - midX) * 0.3, y: tgtY + le.yOffset * 0.5 }, // converge
+        { x: tgtX, y: tgtY }, // port (bundled)
+      ];
+    } else {
+      points = le.points.map((p) => ({ x: p.x, y: p.y }));
+    }
     if (points.length < 2) continue;
 
     const edgeG = diagramG
@@ -527,11 +616,7 @@ export function renderBoxesAndLines(
     edgeGroups.set(i, edgeG as unknown as D3G);
 
     const markerId = `bl-arrow-${color.replace('#', '')}`;
-    const gen = le.deferred
-      ? lineGeneratorLinear
-      : parsed.direction === 'TB'
-        ? lineGeneratorTB
-        : lineGeneratorLR;
+    const gen = parsed.direction === 'TB' ? lineGeneratorTB : lineGeneratorLR;
     const path = edgeG
       .append('path')
       .attr('class', 'bl-edge')
@@ -546,14 +631,25 @@ export function renderBoxesAndLines(
       path.attr('marker-start', `url(#${revId})`);
     }
 
-    // Edge label
+    // Edge label — for parallel edges, place relative to each line:
+    // negative offset (top line) → label above, zero → on line, positive → below
     if (le.label && le.labelX != null && le.labelY != null) {
       const lw = le.label.length * EDGE_LABEL_FONT_SIZE * CHAR_WIDTH_RATIO;
+      const labelH = EDGE_LABEL_FONT_SIZE + 6;
+      let ly: number;
+      if (le.parallelCount > 1 && le.yOffset !== 0) {
+        // Position label on the line at midpoint, shifted above/below based on offset sign
+        const lineY = le.labelY + 10 + le.yOffset; // +10 to undo the -10 in layout
+        const labelShift = le.yOffset < 0 ? -labelH : labelH;
+        ly = lineY + labelShift * 0.5;
+      } else {
+        ly = le.labelY + le.yOffset;
+      }
       labelPositions.push({
         x: le.labelX,
-        y: le.labelY + le.yOffset,
+        y: ly,
         width: lw + 8,
-        height: EDGE_LABEL_FONT_SIZE + 6,
+        height: labelH,
         idx: i,
       });
     }
@@ -743,10 +839,12 @@ export function renderBoxesAndLinesForExport(
   options?: {
     exportDims?: { width: number; height: number };
     activeTagGroup?: string | null;
+    hiddenTagValues?: Map<string, Set<string>>;
   }
 ): void {
   renderBoxesAndLines(container, parsed, layout, palette, isDark, {
     exportDims: options?.exportDims,
     activeTagGroup: options?.activeTagGroup,
+    hiddenTagValues: options?.hiddenTagValues,
   });
 }

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

@@ -22,6 +22,7 @@ export interface BLGroup {
   children: string[];
   lineNumber: number;
   metadata: Record<string, string>;
+  parentGroup?: string;
 }
 
 export interface ParsedBoxesAndLines {

package/src/completion.ts

@@ -335,6 +335,20 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       hide: { description: 'Hide tag:value pairs' },
     }),
   ],
+  [
+    'mindmap',
+    withGlobals({
+      'hide-descriptions': { description: 'Hide node descriptions' },
+      'active-tag': { description: 'Active tag group name' },
+    }),
+  ],
+  [
+    'wireframe',
+    withGlobals({
+      mobile: { description: 'Use mobile (narrow vertical) layout' },
+      'active-tag': { description: 'Active tag group name' },
+    }),
+  ],
 ]);
 
 // ============================================================
@@ -378,6 +392,8 @@ const CHART_TYPE_DESCRIPTIONS: Record<string, string> = {
   infra: 'Infrastructure diagram',
   gantt: 'Gantt chart',
   'boxes-and-lines': 'Boxes and lines diagram',
+  mindmap: 'Mindmap diagram',
+  wireframe: 'UI wireframe diagram',
 };
 
 /** All chart types with descriptions, for chart type autocomplete. Excludes `multi-line` alias. */
@@ -511,6 +527,16 @@ export const PIPE_METADATA = new Map<
       edge: {},
     },
   ],
+  [
+    'mindmap',
+    {
+      node: {
+        description: { description: 'Node description text' },
+        collapsed: { description: 'Collapse node subtree by default' },
+      },
+      edge: {},
+    },
+  ],
 ]);
 
 // ============================================================

package/src/d3.ts

@@ -6492,12 +6492,7 @@ export async function renderForExport(
   content: string,
   theme: 'light' | 'dark' | 'transparent',
   palette?: PaletteColors,
-  orgExportState?: {
-    collapsedNodes?: Set<string>;
-    activeTagGroup?: string | null;
-    hiddenAttributes?: Set<string>;
-    swimlaneTagGroup?: string | null;
-  },
+  viewState?: import('./sharing').CompactViewState,
   options?: {
     c4Level?: 'context' | 'containers' | 'components' | 'deployment';
     c4System?: string;
@@ -6521,14 +6516,14 @@ export async function renderForExport(
     const orgParsed = parseOrg(content, effectivePalette);
     if (orgParsed.error) return '';
 
-    // Apply interactive collapse state when provided
-    const collapsedNodes = orgExportState?.collapsedNodes;
+    // Apply interactive collapse state when provided (read from unified viewState)
+    const collapsedNodes = viewState?.cg ? new Set(viewState.cg) : undefined;
     const activeTagGroup = resolveActiveTagGroup(
       orgParsed.tagGroups,
       orgParsed.options['active-tag'],
-      orgExportState?.activeTagGroup ?? options?.tagGroup
+      viewState?.tag ?? options?.tagGroup
     );
-    const hiddenAttributes = orgExportState?.hiddenAttributes;
+    const hiddenAttributes = viewState?.ha ? new Set(viewState.ha) : undefined;
 
     const { parsed: effectiveParsed, hiddenCounts } =
       collapsedNodes && collapsedNodes.size > 0
@@ -6575,14 +6570,14 @@ export async function renderForExport(
     const sitemapParsed = parseSitemap(content, effectivePalette);
     if (sitemapParsed.error || sitemapParsed.roots.length === 0) return '';
 
-    // Apply interactive collapse state when provided
-    const collapsedNodes = orgExportState?.collapsedNodes;
+    // Apply interactive collapse state when provided (read from unified viewState)
+    const collapsedNodes = viewState?.cg ? new Set(viewState.cg) : undefined;
     const activeTagGroup = resolveActiveTagGroup(
       sitemapParsed.tagGroups,
       sitemapParsed.options['active-tag'],
-      orgExportState?.activeTagGroup ?? options?.tagGroup
+      viewState?.tag ?? options?.tagGroup
     );
-    const hiddenAttributes = orgExportState?.hiddenAttributes;
+    const hiddenAttributes = viewState?.ha ? new Set(viewState.ha) : undefined;
 
     const { parsed: effectiveParsed, hiddenCounts } =
       collapsedNodes && collapsedNodes.size > 0
@@ -6635,8 +6630,12 @@ export async function renderForExport(
       activeTagGroup: resolveActiveTagGroup(
         kanbanParsed.tagGroups,
         kanbanParsed.options['active-tag'],
-        options?.tagGroup
+        viewState?.tag ?? options?.tagGroup
       ),
+      currentSwimlaneGroup: viewState?.swim ?? null,
+      collapsedLanes: viewState?.cl ? new Set(viewState.cl) : undefined,
+      collapsedColumns: viewState?.cc ? new Set(viewState.cc) : undefined,
+      compactMeta: viewState?.cm,
     });
     return finalizeSvgExport(container, theme, effectivePalette);
   }
@@ -6696,22 +6695,32 @@ export async function renderForExport(
       resolveActiveTagGroup(
         erParsed.tagGroups,
         erParsed.options['active-tag'],
-        options?.tagGroup
-      )
+        viewState?.tag ?? options?.tagGroup
+      ),
+      viewState?.sem
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }
 
   if (detectedType === 'boxes-and-lines') {
     const { parseBoxesAndLines } = await import('./boxes-and-lines/parser');
-    const { layoutBoxesAndLines } = await import('./boxes-and-lines/layout');
-    const { renderBoxesAndLinesForExport } =
-      await import('./boxes-and-lines/renderer');
-
     const effectivePalette = await resolveExportPalette(theme, palette);
     const blParsed = parseBoxesAndLines(content);
     if (blParsed.error || blParsed.nodes.length === 0) return '';
 
+    // Convert viewState.htv (Record<string, string[]>) to Map<string, Set<string>>
+    let blHiddenTagValues: Map<string, Set<string>> | undefined;
+    if (viewState?.htv) {
+      blHiddenTagValues = new Map();
+      for (const [k, v] of Object.entries(viewState.htv)) {
+        blHiddenTagValues.set(k, new Set(v));
+      }
+    }
+
+    const { layoutBoxesAndLines } = await import('./boxes-and-lines/layout');
+    const { renderBoxesAndLinesForExport } =
+      await import('./boxes-and-lines/renderer');
+
     const blLayout = layoutBoxesAndLines(blParsed);
     const PADDING = 20;
     const titleOffset = blParsed.title ? 40 : 0;
@@ -6727,12 +6736,106 @@ export async function renderForExport(
       theme === 'dark',
       {
         exportDims: { width: exportWidth, height: exportHeight },
-        activeTagGroup: options?.tagGroup,
+        activeTagGroup: viewState?.tag ?? options?.tagGroup,
+        hiddenTagValues: blHiddenTagValues,
       }
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }
 
+  if (detectedType === 'mindmap') {
+    const { parseMindmap } = await import('./mindmap/parser');
+    const { layoutMindmap } = await import('./mindmap/layout');
+    const { collapseMindmapTree } = await import('./mindmap/collapse');
+    const { renderMindmap } = await import('./mindmap/renderer');
+
+    const isDark = theme === 'dark';
+    const effectivePalette = await resolveExportPalette(theme, palette);
+
+    const mmParsed = parseMindmap(content, effectivePalette);
+    if (mmParsed.error) return '';
+
+    const collapsedNodes = viewState?.cg ? new Set(viewState.cg) : undefined;
+    const activeTagGroup = resolveActiveTagGroup(
+      mmParsed.tagGroups,
+      mmParsed.options['active-tag'],
+      viewState?.tag ?? options?.tagGroup
+    );
+    const hideDescriptions =
+      mmParsed.options['hide-descriptions'] === 'true' ||
+      viewState?.hd === true;
+
+    const { roots: effectiveRoots, hiddenCounts } =
+      collapsedNodes && collapsedNodes.size > 0
+        ? collapseMindmapTree(mmParsed.roots, collapsedNodes)
+        : { roots: mmParsed.roots, hiddenCounts: new Map<string, number>() };
+
+    const effectiveParsed = { ...mmParsed, roots: effectiveRoots };
+
+    const mmLayout = layoutMindmap(effectiveParsed, effectivePalette, {
+      interactive: false,
+      hiddenCounts: hiddenCounts.size > 0 ? hiddenCounts : undefined,
+      activeTagGroup,
+      hideDescriptions,
+    });
+
+    const PADDING = 20;
+    const titleOffset = effectiveParsed.title ? 30 : 0;
+    const exportWidth = mmLayout.width + PADDING * 2;
+    const exportHeight = mmLayout.height + PADDING * 2 + titleOffset;
+    const container = createExportContainer(exportWidth, exportHeight);
+
+    const colorByDepth = viewState?.cbd === true;
+
+    renderMindmap(
+      container,
+      effectiveParsed,
+      mmLayout,
+      effectivePalette,
+      isDark,
+      undefined,
+      { width: exportWidth, height: exportHeight },
+      undefined,
+      hideDescriptions,
+      colorByDepth ? null : activeTagGroup,
+      colorByDepth ? { colorByDepth: true } : undefined
+    );
+    return finalizeSvgExport(container, theme, effectivePalette);
+  }
+
+  if (detectedType === 'wireframe') {
+    const { parseWireframe } = await import('./wireframe/parser');
+    const { layoutWireframe } = await import('./wireframe/layout');
+    const { renderWireframe } = await import('./wireframe/renderer');
+
+    const effectivePalette = await resolveExportPalette(theme, palette);
+    const wireframeParsed = parseWireframe(content);
+    if (
+      wireframeParsed.error ||
+      (wireframeParsed.roots.length === 0 &&
+        wireframeParsed.modals.length === 0)
+    )
+      return '';
+
+    const wireframeLayout = layoutWireframe(wireframeParsed);
+
+    const exportWidth = wireframeLayout.width;
+    const exportHeight = wireframeLayout.height;
+    const container = createExportContainer(exportWidth, exportHeight);
+
+    renderWireframe(
+      container,
+      wireframeParsed,
+      wireframeLayout,
+      effectivePalette,
+      theme === 'dark',
+      undefined,
+      { width: exportWidth, height: exportHeight },
+      theme
+    );
+    return finalizeSvgExport(container, theme, effectivePalette);
+  }
+
   if (detectedType === 'c4') {
     const { parseC4 } = await import('./c4/parser');
     const {
@@ -6748,10 +6851,18 @@ export async function renderForExport(
     const c4Parsed = parseC4(content, effectivePalette);
     if (c4Parsed.error || c4Parsed.elements.length === 0) return '';
 
-    // Container/component-level rendering
-    const c4Level = options?.c4Level ?? 'context';
-    const c4System = options?.c4System;
-    const c4Container = options?.c4Container;
+    // Container/component-level rendering (viewState fallback for share links)
+    const c4Level =
+      options?.c4Level ??
+      (viewState?.c4l as
+        | 'context'
+        | 'containers'
+        | 'components'
+        | 'deployment'
+        | undefined) ??
+      'context';
+    const c4System = options?.c4System ?? viewState?.c4s;
+    const c4Container = options?.c4Container ?? viewState?.c4c;
 
     const c4Layout =
       c4Level === 'deployment'
@@ -6788,7 +6899,7 @@ export async function renderForExport(
       resolveActiveTagGroup(
         c4Parsed.tagGroups,
         c4Parsed.options['active-tag'],
-        options?.tagGroup
+        viewState?.tag ?? options?.tagGroup
       )
     );
     return finalizeSvgExport(container, theme, effectivePalette);
@@ -6834,7 +6945,7 @@ export async function renderForExport(
     const activeTagGroup = resolveActiveTagGroup(
       infraParsed.tagGroups,
       infraParsed.options['active-tag'],
-      options?.tagGroup
+      viewState?.tag ?? options?.tagGroup
     );
 
     const titleOffset = infraParsed.title ? 40 : 0;
@@ -6860,7 +6971,8 @@ export async function renderForExport(
       false,
       null,
       null,
-      true
+      true,
+      viewState?.cg ? new Set(viewState.cg) : null
     );
     // Restore explicit pixel dimensions for resvg (renderer uses 100%/viewBox for app scaling)
     const infraSvg = container.querySelector('svg');
@@ -6890,7 +7002,16 @@ export async function renderForExport(
       resolved,
       effectivePalette,
       theme === 'dark',
-      undefined,
+      {
+        collapsedGroups: viewState?.cg ? new Set(viewState.cg) : undefined,
+        currentSwimlaneGroup: viewState?.swim ?? undefined,
+        collapsedLanes: viewState?.cl ? new Set(viewState.cl) : undefined,
+        currentActiveGroup: resolveActiveTagGroup(
+          resolved.tagGroups,
+          resolved.options.activeTag ?? undefined,
+          viewState?.tag ?? options?.tagGroup
+        ),
+      },
       { width: EXPORT_W, height: EXPORT_H }
     );
     return finalizeSvgExport(container, theme, effectivePalette);
@@ -6991,9 +7112,9 @@ export async function renderForExport(
       resolveActiveTagGroup(
         parsed.timelineTagGroups,
         undefined,
-        orgExportState?.activeTagGroup ?? options?.tagGroup
+        viewState?.tag ?? options?.tagGroup
       ),
-      orgExportState?.swimlaneTagGroup
+      viewState?.swim
     );
   } else if (parsed.type === 'venn') {
     renderVenn(container, parsed, effectivePalette, isDark, undefined, dims);

package/src/dgmo-router.ts

@@ -17,6 +17,8 @@ import { looksLikeSitemap, parseSitemap } from './sitemap/parser';
 import { parseInfra } from './infra/parser';
 import { parseGantt } from './gantt/parser';
 import { parseBoxesAndLines } from './boxes-and-lines/parser';
+import { parseMindmap } from './mindmap/parser';
+import { parseWireframe } from './wireframe/parser';
 import { parseFirstLine } from './utils/parsing';
 import { makeDgmoError, suggest } from './diagnostics';
 import type { DgmoError } from './diagnostics';
@@ -149,6 +151,8 @@ const DIAGRAM_TYPES = new Set([
   'infra',
   'gantt',
   'boxes-and-lines',
+  'mindmap',
+  'wireframe',
 ]);
 const EXTENDED_CHART_TYPES = new Set([
   'scatter',
@@ -228,6 +232,8 @@ const PARSE_DISPATCH = new Map<
   ['infra', (c) => parseInfra(c)],
   ['gantt', (c) => parseGantt(c)],
   ['boxes-and-lines', (c) => parseBoxesAndLines(c)],
+  ['mindmap', (c) => parseMindmap(c)],
+  ['wireframe', (c) => parseWireframe(c)],
 ]);
 
 /**

package/src/editor/keywords.ts

@@ -13,6 +13,7 @@ export const CHART_TYPES = new Set([
   'infra',
   'gantt',
   'boxes-and-lines',
+  'wireframe',
   // Data chart types
   'bar',
   'line',
@@ -170,6 +171,17 @@ export const CONTROL_KEYWORDS = new Set([
   'loop',
   'parallel',
   'note',
+  // Wireframe elements
+  'nav',
+  'tabs',
+  'table',
+  'image',
+  'modal',
+  'skeleton',
+  'alert',
+  'progress',
+  'chart',
+  'mobile',
 ]);
 
 /** Status keywords — kanban. */