@birdapi/velinstyle 1.2.2 → 1.3.0

package/packages/velinstyle-cli-registry/data/layouts.json

@@ -0,0 +1,33 @@
+{
+  "version": "1.2.5",
+  "layouts": [
+    {
+      "id": "standard",
+      "slots": ["hero", "project", "work", "result", "suggestions", "footer"]
+    },
+    {
+      "id": "build",
+      "slots": ["hero", "project", "progress", "breakdown", "diff", "suggestions", "footer"]
+    },
+    {
+      "id": "doctor",
+      "slots": ["hero", "environment", "checks", "result", "suggestions", "footer"]
+    },
+    {
+      "id": "review",
+      "slots": ["hero", "scores", "issues", "result", "suggestions", "footer"]
+    },
+    {
+      "id": "dashboard",
+      "slots": ["hero", "project", "cards", "result", "suggestions", "footer"]
+    },
+    {
+      "id": "audit",
+      "slots": ["hero", "counts", "findings", "result", "suggestions", "footer"]
+    },
+    {
+      "id": "wizard",
+      "slots": ["hero", "steps", "work", "result", "footer"]
+    }
+  ]
+}

package/packages/velinstyle-cli-registry/data/widgets.json

@@ -0,0 +1,35 @@
+{
+  "version": "1.2.5",
+  "widgets": [
+    { "id": "hero", "title": "Hero", "category": "layout" },
+    { "id": "section", "title": "Section", "category": "layout" },
+    { "id": "divider", "title": "Divider", "category": "layout" },
+    { "id": "footer", "title": "Footer", "category": "layout" },
+    { "id": "badge", "title": "Badge", "category": "status" },
+    { "id": "status", "title": "Status", "category": "status" },
+    { "id": "alert", "title": "Alert", "category": "status" },
+    { "id": "toast", "title": "Toast", "category": "status" },
+    { "id": "hint", "title": "Hint", "category": "status" },
+    { "id": "suggestion", "title": "Suggestion", "category": "status" },
+    { "id": "notification", "title": "Notification", "category": "status" },
+    { "id": "table", "title": "Table", "category": "data" },
+    { "id": "tree", "title": "Tree", "category": "data" },
+    { "id": "timeline", "title": "Timeline", "category": "data" },
+    { "id": "progress", "title": "Progress", "category": "data" },
+    { "id": "stats", "title": "Stats", "category": "data" },
+    { "id": "kpi", "title": "KPI", "category": "data" },
+    { "id": "diff", "title": "Diff", "category": "data" },
+    { "id": "score", "title": "Score Card", "category": "reports" },
+    { "id": "summary", "title": "Summary", "category": "reports" },
+    { "id": "recommendation", "title": "Recommendation", "category": "reports" },
+    { "id": "health", "title": "Health", "category": "reports" },
+    { "id": "bundle", "title": "Bundle", "category": "widgets" },
+    { "id": "savings", "title": "Savings", "category": "widgets" },
+    { "id": "memory", "title": "Memory", "category": "widgets" },
+    { "id": "cpu", "title": "CPU", "category": "widgets" },
+    { "id": "duration", "title": "Duration", "category": "widgets" },
+    { "id": "files", "title": "Files", "category": "widgets" },
+    { "id": "size", "title": "Size", "category": "widgets" },
+    { "id": "review", "title": "Review", "category": "widgets" }
+  ]
+}

package/packages/velinstyle-cli-registry/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@birdapi/velinstyle-cli-registry",
+  "version": "1.3.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./commands": "./data/commands.json",
+    "./widgets": "./data/widgets.json",
+    "./layouts": "./data/layouts.json"
+  }
+}

package/packages/velinstyle-cli-registry/src/index.js

@@ -0,0 +1,88 @@
+import { readFileSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
+
+function loadJson(rel) {
+  return JSON.parse(readFileSync(join(ROOT, rel), 'utf8'));
+}
+
+let _commands;
+let _widgets;
+let _layouts;
+
+export function getCommandsRegistry() {
+  if (!_commands) _commands = loadJson('data/commands.json');
+  return _commands;
+}
+
+export function getWidgetsRegistry() {
+  if (!_widgets) _widgets = loadJson('data/widgets.json');
+  return _widgets;
+}
+
+export function getLayoutsRegistry() {
+  if (!_layouts) _layouts = loadJson('data/layouts.json');
+  return _layouts;
+}
+
+export function getCommand(id) {
+  return getCommandsRegistry().commands.find((c) => c.id === id || (c.aliases || []).includes(id)) || null;
+}
+
+export function getLayout(id) {
+  return getLayoutsRegistry().layouts.find((l) => l.id === id) || getLayoutsRegistry().layouts.find((l) => l.id === 'standard');
+}
+
+export function getWidget(id) {
+  return getWidgetsRegistry().widgets.find((w) => w.id === id) || null;
+}
+
+export function listCommandsByCategory() {
+  const map = new Map();
+  for (const cmd of getCommandsRegistry().commands) {
+    if (!map.has(cmd.category)) map.set(cmd.category, []);
+    map.get(cmd.category).push(cmd);
+  }
+  return map;
+}
+
+/** Bridge: shape compatible with legacy cli-manifest.json consumers */
+export function toCliManifest(version = getCommandsRegistry().version) {
+  return {
+    version,
+    commands: getCommandsRegistry().commands
+      .filter((c) => !['dashboard', 'replay'].includes(c.id) || true)
+      .map((c) => ({
+        name: c.id,
+        summary: c.description,
+        flags: c.flags || [],
+        example: (c.examples && c.examples[0]) || `velinstyle ${c.id}`,
+        ...(c.subcommands?.length ? { subcommands: c.subcommands } : {}),
+      })),
+  };
+}
+
+/** Register a plugin command at runtime (skeleton). */
+export function registerPluginCommand(record, { pluginId } = {}) {
+  const reg = getCommandsRegistry();
+  const existing = reg.commands.findIndex((c) => c.id === record.id);
+  const entry = {
+    maturity: 'experimental',
+    since: '1.2.5',
+    aliases: [],
+    tags: ['plugin'],
+    supports: ['standard', 'json'],
+    widgets: [],
+    layout: 'standard',
+    flags: [],
+    examples: [],
+    subcommands: [],
+    ...record,
+    pluginId: pluginId || record.pluginId || null,
+  };
+  if (existing >= 0) reg.commands[existing] = entry;
+  else reg.commands.push(entry);
+  return entry;
+}

package/packages/velinstyle-cli-renderer/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@birdapi/velinstyle-cli-renderer",
+  "version": "1.3.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.js",
+  "exports": { ".": "./src/index.js" }
+}

package/packages/velinstyle-cli-renderer/src/index.js

@@ -0,0 +1,286 @@
+import { resolveTheme } from '../../velinstyle-cli-theme/src/index.js';
+import { getLayout, getCommand } from '../../velinstyle-cli-registry/src/index.js';
+import { createUi } from '../../velinstyle-cli-ui/src/index.js';
+
+function pad(s, n) {
+  const str = String(s);
+  return str.length >= n ? str : str + ' '.repeat(n - str.length);
+}
+
+function formatKb(n) {
+  if (n == null) return '—';
+  if (Math.abs(n) < 1024) return `${n} B`;
+  return `${(n / 1024).toFixed(n >= 10240 ? 0 : 1)} KB`;
+}
+
+function progressBar(pct, width = 22, theme) {
+  const p = Math.max(0, Math.min(100, Math.round(pct || 0)));
+  const filled = Math.round((p / 100) * width);
+  const bar = '█'.repeat(filled) + '░'.repeat(Math.max(0, width - filled));
+  return theme.unicode === false ? `[${'#'.repeat(filled)}${'.'.repeat(width - filled)}] ${p}%` : `${bar} ${p}%`;
+}
+
+function boxLine(theme, width, title) {
+  const { tl, tr, h } = theme.box;
+  const inner = Math.max(4, width - 2);
+  const label = title ? ` ${title} ` : '';
+  const left = Math.floor((inner - label.length) / 2);
+  const right = inner - label.length - left;
+  return `${tl}${h.repeat(Math.max(0, left))}${label}${h.repeat(Math.max(0, right))}${tr}`;
+}
+
+function boxBottom(theme, width) {
+  const { bl, br, h } = theme.box;
+  return `${bl}${h.repeat(Math.max(0, width - 2))}${br}`;
+}
+
+function renderWidget(w, theme, lines) {
+  const p = w.props || {};
+  switch (w.id) {
+    case 'hero': {
+      const width = p.width || 48;
+      lines.push(theme.paint('accent', boxLine(theme, width, p.eyebrow || 'Velin Experience')));
+      lines.push(`${theme.box.v} ${theme.bold(pad(p.title || '', width - 4))} ${theme.box.v}`);
+      if (p.subtitle) lines.push(`${theme.box.v} ${theme.dim(pad(p.subtitle, width - 4))} ${theme.box.v}`);
+      lines.push(theme.paint('accent', boxBottom(theme, width)));
+      lines.push('');
+      break;
+    }
+    case 'section': {
+      lines.push(theme.dim('─'.repeat(46)));
+      lines.push(theme.bold(p.title || 'Section'));
+      lines.push(theme.dim('─'.repeat(46)));
+      break;
+    }
+    case 'badge':
+    case 'status': {
+      const tone = p.tone || (p.label === 'PASS' ? 'ok' : p.label === 'FAIL' || p.label === 'ERROR' ? 'err' : 'warn');
+      lines.push(theme.paint(tone, `${theme.icons.dot} ${p.label || w.id}`));
+      break;
+    }
+    case 'alert':
+    case 'notification': {
+      const icon = p.tone === 'ok' ? theme.icons.pass : p.tone === 'err' ? theme.icons.fail : p.tone === 'warn' ? theme.icons.warn : theme.icons.info;
+      lines.push(`${theme.paint(p.tone || 'accent', icon)} ${p.message || ''}`);
+      break;
+    }
+    case 'progress': {
+      const width = p.width || 28;
+      lines.push(theme.paint('accent', boxLine(theme, width + 6, p.label || 'Progress')));
+      lines.push(`${theme.box.v} ${progressBar(p.percent ?? 0, width, { unicode: true })} ${theme.box.v}`);
+      lines.push(theme.paint('accent', boxBottom(theme, width + 6)));
+      break;
+    }
+    case 'table': {
+      const cols = p.columns || [];
+      const rows = p.rows || [];
+      if (cols.length) lines.push(theme.bold(cols.map((c) => pad(c, 14)).join('')));
+      for (const row of rows) {
+        lines.push((Array.isArray(row) ? row : cols.map((c) => row[c])).map((c) => pad(c, 14)).join(''));
+      }
+      break;
+    }
+    case 'stats':
+    case 'kpi': {
+      const items = p.items || [];
+      for (const it of items) {
+        lines.push(`${pad(it.label, 16)}${theme.bold(String(it.value))}`);
+      }
+      break;
+    }
+    case 'score': {
+      lines.push(theme.bold(p.title || 'Scores'));
+      for (const s of p.scores || []) {
+        lines.push(`${pad(s.label, 16)}${theme.bold(String(s.value))}`);
+      }
+      break;
+    }
+    case 'health': {
+      lines.push(theme.bold(p.title || 'Health'));
+      for (const row of p.rows || []) {
+        const ok = row.status === 'PASS' || row.status === 'ok';
+        lines.push(`${pad(row.label, 16)}${theme.paint(ok ? 'ok' : 'warn', row.status)}`);
+      }
+      break;
+    }
+    case 'bundle':
+    case 'savings': {
+      lines.push(theme.bold(p.title || 'Production Report'));
+      lines.push('');
+      for (const row of p.rows || []) {
+        const before = row.beforeCount != null ? row.beforeCount : formatKb(row.before);
+        const after = row.afterCount != null ? row.afterCount : formatKb(row.after);
+        lines.push(`${pad(row.label, 14)}${pad(before, 10)}→  ${after}`);
+      }
+      if (p.savingsPct != null) {
+        lines.push('');
+        lines.push(`${pad('Savings', 14)}${theme.paint('ok', `${p.savingsPct} %`)}`);
+      }
+      break;
+    }
+    case 'diff': {
+      lines.push(theme.bold(p.title || 'Diff'));
+      for (const line of p.removed || []) lines.push(theme.paint('err', `- ${line}`));
+      for (const line of p.added || []) lines.push(theme.paint('ok', `+ ${line}`));
+      for (const line of p.changed || []) lines.push(theme.paint('warn', `~ ${line}`));
+      break;
+    }
+    case 'tree': {
+      lines.push(theme.bold(p.title || 'Tree'));
+      for (const node of p.nodes || []) {
+        const indent = '  '.repeat(node.depth || 0);
+        const branch = node.depth ? '├─ ' : '';
+        lines.push(`${indent}${branch}${node.label}`);
+      }
+      break;
+    }
+    case 'timeline': {
+      for (const step of p.steps || []) {
+        lines.push(`${theme.dim(step.at || '')}  ${step.label}`);
+      }
+      break;
+    }
+    case 'suggestion': {
+      lines.push(`${theme.icons.star} ${p.text || ''}`);
+      break;
+    }
+    case 'footer': {
+      lines.push('');
+      lines.push(theme.dim(p.text || `Done · Velin Experience`));
+      break;
+    }
+    default:
+      if (p.message) lines.push(String(p.message));
+  }
+}
+
+/** Order widgets by layout slots when possible (id or props.slot). */
+function orderWidgetsByLayout(widgets, layout) {
+  if (!layout?.slots?.length || !widgets?.length) return widgets || [];
+  const used = new Set();
+  const ordered = [];
+  for (const slot of layout.slots) {
+    const match = widgets.find((w, i) => !used.has(i) && ((w.props?.slot || w.slot || w.id) === slot));
+    if (match) {
+      const idx = widgets.indexOf(match);
+      used.add(idx);
+      ordered.push(match);
+    }
+  }
+  widgets.forEach((w, i) => {
+    if (!used.has(i)) ordered.push(w);
+  });
+  return ordered;
+}
+
+export function renderTerminal(contract, config = {}) {
+  const theme = resolveTheme(config.theme || 'modern', { unicode: config.unicode !== false });
+  const cmd = getCommand(contract.meta?.commandId);
+  const layout = getLayout(contract.meta?.layout || cmd?.layout || 'standard');
+  const lines = [];
+  const mode = config.output || config.mode || 'standard';
+
+  if (mode === 'compact') {
+    const st = contract.result?.status || 'PASS';
+    lines.push(`${st}  ${contract.result?.message || contract.meta?.commandId || ''}`.trim());
+    return lines.join('\n');
+  }
+
+  const ordered = orderWidgetsByLayout(contract.widgets || [], layout);
+  for (const w of ordered) {
+    renderWidget(w, theme, lines);
+  }
+
+  if (!contract.widgets?.length) {
+    lines.push(theme.bold(cmd?.title || contract.meta?.commandId || 'Velin Experience'));
+  }
+
+  if (contract.result?.message && mode !== 'dashboard') {
+    const tone = contract.result.status === 'PASS' ? 'ok' : contract.result.status === 'ERROR' ? 'err' : 'warn';
+    lines.push('');
+    lines.push(theme.paint(tone, `${contract.result.status}  ${contract.result.message}`));
+  }
+
+  for (const s of contract.suggestions || []) {
+    lines.push(`${theme.icons.star} ${s.text || s}`);
+  }
+
+  for (const n of contract.notifications || []) {
+    lines.push(`${theme.icons.info} ${n.message || n}`);
+  }
+
+  if (mode === 'debug' || mode === 'verbose') {
+    lines.push('');
+    lines.push(theme.dim(`lifecycle: ${(contract.lifecycle?.stages || []).map((s) => s.stage).join(' → ')}`));
+    lines.push(theme.dim(`layout: ${layout.id} · theme: ${theme.id} · ${contract.meta?.durationMs ?? 0} ms`));
+  }
+
+  if (contract.meta?.durationMs != null && mode !== 'compact') {
+    lines.push('');
+    lines.push(theme.dim(`Done in ${(contract.meta.durationMs / 1000).toFixed(2)} s · Velin Experience`));
+  }
+
+  return lines.join('\n');
+}
+
+export function renderJson(contract) {
+  return JSON.stringify(contract, null, 2);
+}
+
+export function renderMarkdown(contract) {
+  const lines = [`# ${contract.meta?.commandId || 'Velin Experience'}`, ''];
+  lines.push(`**Status:** ${contract.result?.status || 'PASS'} — ${contract.result?.message || ''}`, '');
+  for (const w of contract.widgets || []) {
+    lines.push(`## ${w.title || w.id}`, '');
+    if (w.id === 'bundle' || w.id === 'savings') {
+      lines.push('| Metric | Before | After |', '| --- | --- | --- |');
+      for (const row of w.props?.rows || []) {
+        const before = row.beforeCount != null ? row.beforeCount : formatKb(row.before);
+        const after = row.afterCount != null ? row.afterCount : formatKb(row.after);
+        lines.push(`| ${row.label} | ${before} | ${after} |`);
+      }
+      if (w.props?.savingsPct != null) lines.push('', `**Savings:** ${w.props.savingsPct}%`);
+      lines.push('');
+    } else if (w.id === 'score' || w.id === 'stats' || w.id === 'kpi') {
+      for (const it of w.props?.scores || w.props?.items || []) {
+        lines.push(`- **${it.label}:** ${it.value}`);
+      }
+      lines.push('');
+    } else if (w.props?.message) {
+      lines.push(w.props.message, '');
+    }
+  }
+  if (contract.suggestions?.length) {
+    lines.push('## Suggestions', '');
+    for (const s of contract.suggestions) lines.push(`- ${s.text || s}`);
+  }
+  return lines.join('\n');
+}
+
+export function renderSarif(contract) {
+  const runs = [{
+    tool: { driver: { name: 'Velin Experience', informationUri: 'https://velinstyle.info' } },
+    results: (contract.diagnostics || []).map((d) => ({
+      level: d.severity === 'error' ? 'error' : d.severity === 'warning' ? 'warning' : 'note',
+      message: { text: d.message || String(d) },
+      locations: d.path ? [{ physicalLocation: { artifactLocation: { uri: d.path } } }] : [],
+    })),
+  }];
+  return JSON.stringify({ $schema: 'https://json.schemastore.org/sarif-2.1.0.json', version: '2.1.0', runs }, null, 2);
+}
+
+export function renderContract(contract, config = {}) {
+  const mode = (config.output || config.mode || 'standard').toLowerCase();
+  if (mode === 'json') return renderJson(contract);
+  if (mode === 'sarif') return renderSarif(contract);
+  if (mode === 'markdown' || mode === 'md') return renderMarkdown(contract);
+  return renderTerminal(contract, config);
+}
+
+export function createExperienceSession(config = {}) {
+  const theme = resolveTheme(config.theme || 'modern', { unicode: config.unicode !== false });
+  const ui = createUi(theme);
+  return { theme, ui, render: (contract) => renderContract(contract, config) };
+}
+
+export { formatKb, progressBar };

package/packages/velinstyle-cli-theme/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@birdapi/velinstyle-cli-theme",
+  "version": "1.3.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.js",
+  "exports": { ".": "./src/index.js" }
+}

package/packages/velinstyle-cli-theme/src/index.js

@@ -0,0 +1,84 @@
+const ANSI = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  gray: '\x1b[90m',
+};
+
+const ICONS_UNICODE = {
+  pass: '✓',
+  fail: '✖',
+  warn: '⚠',
+  info: 'ℹ',
+  star: '★',
+  play: '►',
+  dot: '●',
+  hex: '⬢',
+  hexEmpty: '⬡',
+};
+
+const ICONS_ASCII = {
+  pass: '[OK]',
+  fail: '[X]',
+  warn: '[!]',
+  info: '[i]',
+  star: '*',
+  play: '>',
+  dot: '*',
+  hex: '#',
+  hexEmpty: 'o',
+};
+
+const BOX = {
+  modern: { h: '─', v: '│', tl: '╭', tr: '╮', bl: '╰', br: '╯', cross: '┼' },
+  minimal: { h: '-', v: '|', tl: '+', tr: '+', bl: '+', br: '+', cross: '+' },
+  classic: { h: '=', v: '|', tl: '+', tr: '+', bl: '+', br: '+', cross: '+' },
+  matrix: { h: '═', v: '║', tl: '╔', tr: '╗', bl: '╚', br: '╝', cross: '╬' },
+  light: { h: '─', v: '│', tl: '┌', tr: '┐', bl: '└', br: '┘', cross: '┼' },
+  professional: { h: '─', v: '│', tl: '┌', tr: '┐', bl: '└', br: '┘', cross: '┼' },
+  velin: { h: '─', v: '│', tl: '╭', tr: '╮', bl: '╰', br: '╯', cross: '┼' },
+};
+
+const COLORS = {
+  modern: { accent: 'cyan', ok: 'green', warn: 'yellow', err: 'red', muted: 'gray' },
+  minimal: { accent: 'white', ok: 'green', warn: 'yellow', err: 'red', muted: 'gray' },
+  classic: { accent: 'blue', ok: 'green', warn: 'yellow', err: 'red', muted: 'gray' },
+  matrix: { accent: 'green', ok: 'green', warn: 'yellow', err: 'red', muted: 'dim' },
+  light: { accent: 'blue', ok: 'green', warn: 'yellow', err: 'red', muted: 'gray' },
+  professional: { accent: 'cyan', ok: 'green', warn: 'yellow', err: 'red', muted: 'gray' },
+  velin: { accent: 'magenta', ok: 'green', warn: 'yellow', err: 'red', muted: 'gray' },
+};
+
+export const THEME_IDS = Object.keys(COLORS);
+
+export function resolveTheme(name = 'modern', { unicode = true } = {}) {
+  const id = THEME_IDS.includes(name) ? name : 'modern';
+  const colors = COLORS[id];
+  const box = BOX[id] || BOX.modern;
+  const icons = unicode ? ICONS_UNICODE : ICONS_ASCII;
+
+  function paint(tone, text) {
+    const key = colors[tone] || tone;
+    const code = ANSI[key] || '';
+    if (!code) return String(text);
+    return `${code}${text}${ANSI.reset}`;
+  }
+
+  return {
+    id,
+    box,
+    icons,
+    colors,
+    paint,
+    bold: (s) => `${ANSI.bold}${s}${ANSI.reset}`,
+    dim: (s) => `${ANSI.dim}${s}${ANSI.reset}`,
+    ansi: ANSI,
+  };
+}

package/packages/velinstyle-cli-ui/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@birdapi/velinstyle-cli-ui",
+  "version": "1.3.0",
+  "private": true,
+  "type": "module",
+  "main": "src/index.js",
+  "exports": { ".": "./src/index.js" }
+}

package/packages/velinstyle-cli-ui/src/index.js

@@ -0,0 +1,34 @@
+/**
+ * Velin Experience UI — thin wrappers over widget registry ids.
+ */
+import { getWidget } from '../../velinstyle-cli-registry/src/index.js';
+
+export function createUi(theme) {
+  function widget(id, props = {}) {
+    const meta = getWidget(id);
+    return { id, title: meta?.title || id, category: meta?.category || 'data', props, theme: theme.id };
+  }
+
+  return {
+    theme,
+    widget,
+    hero: (props) => widget('hero', props),
+    section: (props) => widget('section', props),
+    badge: (props) => widget('badge', props),
+    alert: (props) => widget('alert', props),
+    table: (props) => widget('table', props),
+    tree: (props) => widget('tree', props),
+    timeline: (props) => widget('timeline', props),
+    progress: (props) => widget('progress', props),
+    stats: (props) => widget('stats', props),
+    kpi: (props) => widget('kpi', props),
+    diff: (props) => widget('diff', props),
+    score: (props) => widget('score', props),
+    health: (props) => widget('health', props),
+    bundle: (props) => widget('bundle', props),
+    savings: (props) => widget('savings', props),
+    notification: (props) => widget('notification', props),
+    suggestion: (props) => widget('suggestion', props),
+    footer: (props) => widget('footer', props),
+  };
+}