pmx-canvas 0.3.3 → 0.4.0

package/src/cli/commands/pins.ts

@@ -0,0 +1,42 @@
+// Context pin commands: pin.
+
+import { cmd, invokeOperation, output, parseFlags, showCommandHelp } from '../shared.js';
+
+// ── pin ──────────────────────────────────────────────────────
+cmd(
+  'pin',
+  'Manage context pins',
+  [
+    'pmx-canvas pin node1 node2 node3',
+    'pmx-canvas pin --set node1 node2 node3',
+    'pmx-canvas pin --list',
+    'pmx-canvas pin --clear',
+  ],
+  async (args) => {
+    const { positional, flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('pin');
+
+    if (flags.list) {
+      const result = await invokeOperation('pinned-context.get', {});
+      output(result);
+      return;
+    }
+
+    if (flags.clear) {
+      const result = await invokeOperation('pin.set', { nodeIds: [] });
+      output(result);
+      return;
+    }
+
+    // --set: positional args are node IDs
+    if (positional.length > 0 || flags.set) {
+      const result = await invokeOperation('pin.set', { nodeIds: positional });
+      output(result);
+      return;
+    }
+
+    // Default: list
+    const result = await invokeOperation('pinned-context.get', {});
+    output(result);
+  },
+);

package/src/cli/commands/query.ts

@@ -0,0 +1,223 @@
+// Query/analysis commands: search, validate, validate spec, code-graph,
+// spatial, and watch.
+
+import {
+  buildGraphRequestBody,
+  buildHtmlPrimitiveRequestBody,
+  buildJsonRenderRequestBody,
+  cmd,
+  die,
+  getBaseUrl,
+  getStringFlag,
+  invokeOperation,
+  isRecord,
+  optionalNumberFlag,
+  output,
+  parseFlags,
+  showCommandHelp,
+} from '../shared.js';
+import {
+  ALL_SEMANTIC_WATCH_EVENT_TYPES,
+  formatCompactWatchEvent,
+  parseSemanticEventFilter,
+  parseSseStream,
+  SemanticWatchReducer,
+} from '../watch.js';
+
+// ── search ───────────────────────────────────────────────────
+cmd(
+  'search',
+  'Search nodes by title or content',
+  ['pmx-canvas search "design doc"', 'pmx-canvas search --query "TODO"'],
+  async (args) => {
+    const { positional, flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('search');
+
+    const query = positional[0] || (typeof flags.query === 'string' ? flags.query : '');
+    if (!query) die('Missing search query', 'pmx-canvas search "query"');
+
+    const result = await invokeOperation('search', { q: query });
+    output(result);
+  },
+);
+
+// ── validate ─────────────────────────────────────────────────
+cmd(
+  'validate',
+  'Validate the current layout for collisions and missing edge endpoints',
+  ['pmx-canvas validate'],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('validate');
+
+    const result = await invokeOperation('validate.get', {});
+    output(result);
+  },
+);
+
+cmd(
+  'validate spec',
+  'Validate a json-render spec or graph payload without creating a node',
+  [
+    'pmx-canvas validate spec --type json-render --spec-file ./dashboard.json',
+    'pmx-canvas validate spec --type graph --graph-type bar --data-file ./metrics.json --x-key label --y-key value',
+    'pmx-canvas validate spec --type html-primitive --kind choice-grid --data-file ./options.json',
+    'pmx-canvas validate spec --type json-render --spec-file ./dashboard.json --summary',
+  ],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('validate spec');
+
+    const type = getStringFlag(flags, 'type');
+    if (type !== 'json-render' && type !== 'graph' && type !== 'html-primitive') {
+      die('validate spec requires --type json-render, --type graph, or --type html-primitive.');
+    }
+
+    let body: Record<string, unknown>;
+    if (type === 'json-render') {
+      body = {
+        type,
+        spec: (await buildJsonRenderRequestBody({ ...flags, title: String(flags.title ?? 'Validation') })).spec,
+      };
+    } else if (type === 'html-primitive') {
+      const primitiveBody = await buildHtmlPrimitiveRequestBody(flags);
+      body = {
+        type,
+        kind: primitiveBody.primitive,
+        ...(typeof primitiveBody.title === 'string' ? { title: primitiveBody.title } : {}),
+        ...(isRecord(primitiveBody.data) ? { data: primitiveBody.data } : {}),
+      };
+    } else {
+      body = { type, ...(await buildGraphRequestBody(flags)) };
+    }
+
+    const result = (await invokeOperation('spec.validate', body)) as Record<string, unknown>;
+    if (flags.summary) {
+      output({
+        ok: result.ok,
+        type: result.type,
+        summary: result.summary,
+      });
+      return;
+    }
+    output(result);
+  },
+);
+
+// ── code-graph ───────────────────────────────────────────────
+cmd('code-graph', 'Show auto-detected file dependency graph', ['pmx-canvas code-graph'], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('code-graph');
+
+  const result = await invokeOperation('code-graph.get', {});
+  output(result);
+});
+
+// ── spatial ──────────────────────────────────────────────────
+cmd('spatial', 'Spatial analysis: clusters, reading order, neighborhoods', ['pmx-canvas spatial'], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('spatial');
+
+  const result = await invokeOperation('spatial.get', {});
+  output(result);
+});
+
+// ── watch ────────────────────────────────────────────────────
+cmd(
+  'watch',
+  'Watch low-token semantic canvas changes over the existing SSE stream',
+  [
+    'pmx-canvas watch',
+    'pmx-canvas watch --json',
+    'pmx-canvas watch --events context-pin,move-end',
+    'pmx-canvas watch --json --events connect --max-events 1',
+  ],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('watch');
+
+    if (flags.json && flags.compact) {
+      die('Use either --json or --compact, not both.');
+    }
+
+    const filtersRaw = typeof flags.events === 'string' ? flags.events : undefined;
+    const requestedFilters = filtersRaw
+      ? Array.from(
+          new Set(
+            filtersRaw
+              .split(',')
+              .map((value) => value.trim())
+              .filter((value) => value.length > 0),
+          ),
+        )
+      : [];
+    const invalidFilter = requestedFilters.find(
+      (value) => !ALL_SEMANTIC_WATCH_EVENT_TYPES.includes(value as (typeof ALL_SEMANTIC_WATCH_EVENT_TYPES)[number]),
+    );
+    if (invalidFilter) {
+      die(
+        `Invalid value in --events: ${invalidFilter}`,
+        'Use a comma-separated subset of: context-pin,move-end,group,connect,remove',
+      );
+    }
+    const filters = parseSemanticEventFilter(filtersRaw);
+    if (filtersRaw && filters.size === 0) {
+      die(
+        `Invalid value for --events: ${filtersRaw}`,
+        'Use a comma-separated subset of: context-pin,move-end,group,connect,remove',
+      );
+    }
+
+    const maxEvents = optionalNumberFlag(flags, 'max-events', 'Use a positive integer, e.g. --max-events 1');
+    const jsonMode = Boolean(flags.json);
+    const reducer = new SemanticWatchReducer();
+    const pinned = (await invokeOperation('pinned-context.get', {})) as { nodeIds?: string[] };
+    reducer.setInitialPins(Array.isArray(pinned.nodeIds) ? pinned.nodeIds : []);
+
+    const base = getBaseUrl();
+    const controller = new AbortController();
+    let response: Response;
+    try {
+      response = await fetch(`${base}/api/workbench/events`, {
+        method: 'GET',
+        headers: { Accept: 'text/event-stream' },
+        signal: controller.signal,
+      });
+    } catch (error) {
+      die(
+        `Cannot connect to pmx-canvas event stream at ${base}: ${error instanceof Error ? error.message : String(error)}`,
+        'Start the server first: pmx-canvas --no-open',
+      );
+    }
+
+    if (!response.ok) {
+      const text = await response.text();
+      die(`Failed to open event stream: HTTP ${response.status}`, text);
+    }
+    if (!response.body) {
+      die('Workbench event stream did not return a readable body.');
+    }
+
+    let emitted = 0;
+    try {
+      for await (const message of parseSseStream(response.body)) {
+        const semanticEvents = reducer.handleMessage(message).filter((event) => filters.has(event.type));
+
+        for (const event of semanticEvents) {
+          console.log(jsonMode ? JSON.stringify(event) : formatCompactWatchEvent(event));
+          emitted++;
+          if (maxEvents !== undefined && emitted >= maxEvents) {
+            controller.abort();
+            return;
+          }
+        }
+      }
+    } catch (error) {
+      if (controller.signal.aborted) return;
+      die(
+        `Watch stream failed: ${error instanceof Error ? error.message : String(error)}`,
+        'Ensure the server is still running and reachable.',
+      );
+    }
+  },
+);

package/src/cli/commands/view.ts

@@ -0,0 +1,186 @@
+// Viewport/canvas commands: open, layout, status, arrange, focus, fit, clear,
+// and the serve usage stub.
+
+import { openUrlInExternalBrowser } from '../../server/server.js';
+import {
+  cmd,
+  die,
+  getBaseUrl,
+  invokeOperation,
+  isRecord,
+  optionalPositiveFiniteFlag,
+  output,
+  parseFlags,
+  showCommandHelp,
+} from '../shared.js';
+
+cmd('open', 'Open the current workbench in the browser', ['pmx-canvas open'], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('open');
+
+  const base = getBaseUrl();
+  try {
+    const response = await fetch(`${base}/health`);
+    if (!response.ok) {
+      die(`Cannot reach pmx-canvas health endpoint at ${base}: HTTP ${response.status}`);
+    }
+  } catch (error) {
+    die(
+      `Cannot connect to pmx-canvas at ${base}: ${error instanceof Error ? error.message : String(error)}`,
+      'Start the server first: pmx-canvas --no-open',
+    );
+  }
+
+  const url = `${base}/workbench`;
+  if (!openUrlInExternalBrowser(url)) {
+    die(`Failed to open browser for ${url}`);
+  }
+  output({ ok: true, url });
+});
+
+// ── layout ───────────────────────────────────────────────────
+cmd(
+  'layout',
+  'Get the full canvas layout (nodes, edges, viewport)',
+  ['pmx-canvas layout', 'pmx-canvas layout --summary'],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('layout');
+
+    if (flags.summary || flags.compact) {
+      output(await invokeOperation('summary.get', {}));
+      return;
+    }
+    const result = await invokeOperation('layout.get', {});
+    output(result);
+  },
+);
+
+// ── status ───────────────────────────────────────────────────
+cmd('status', 'Quick canvas summary', ['pmx-canvas status'], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('status');
+
+  const layout = (await invokeOperation('layout.get', {})) as {
+    nodes: Array<Record<string, unknown>>;
+    edges: unknown[];
+    viewport: unknown;
+  };
+  const pinned = (await invokeOperation('pinned-context.get', {})) as { count: number; nodeIds: string[] };
+
+  const typeCounts: Record<string, number> = {};
+  for (const n of layout.nodes) {
+    const data = isRecord(n.data) ? n.data : {};
+    const t =
+      typeof n.kind === 'string'
+        ? n.kind
+        : n.type === 'mcp-app' && data.hostMode === 'hosted' && typeof data.path === 'string'
+          ? 'web-artifact'
+          : (n.type as string);
+    typeCounts[t] = (typeCounts[t] || 0) + 1;
+  }
+
+  output({
+    nodes: layout.nodes.length,
+    edges: layout.edges.length,
+    pinned: pinned.count,
+    types: typeCounts,
+    viewport: layout.viewport,
+  });
+});
+
+// ── arrange ──────────────────────────────────────────────────
+cmd(
+  'arrange',
+  'Auto-arrange nodes on the canvas',
+  ['pmx-canvas arrange', 'pmx-canvas arrange --layout column', 'pmx-canvas arrange --layout flow'],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('arrange');
+
+    const body: Record<string, unknown> = {};
+    if (flags.layout && flags.layout !== true) body.layout = flags.layout;
+
+    const result = await invokeOperation('arrange', body);
+    output(result);
+  },
+);
+
+// ── focus ────────────────────────────────────────────────────
+cmd('focus', 'Pan viewport to center on a node', ['pmx-canvas focus <node-id>'], async (args) => {
+  const { positional, flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('focus');
+
+  const id = positional[0];
+  if (!id) die('Missing node ID', 'pmx-canvas focus <node-id>');
+
+  const result = await invokeOperation('node.focus', { id, ...(flags['no-pan'] ? { noPan: true } : {}) });
+  output(result);
+});
+
+cmd(
+  'fit',
+  'Fit the viewport to all nodes or a selected subset',
+  ['pmx-canvas fit', 'pmx-canvas fit --width 1440 --height 900 --padding 80', 'pmx-canvas fit node-a node-b'],
+  async (args) => {
+    const { positional, flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('fit');
+
+    const body: Record<string, unknown> = {};
+    const width = optionalPositiveFiniteFlag(flags, 'width', 'Use a positive number, e.g. --width 1440');
+    const height = optionalPositiveFiniteFlag(flags, 'height', 'Use a positive number, e.g. --height 900');
+    const padding = optionalPositiveFiniteFlag(flags, 'padding', 'Use a positive number, e.g. --padding 80');
+    const maxScale = optionalPositiveFiniteFlag(flags, 'max-scale', 'Use a positive number, e.g. --max-scale 1');
+    if (width !== undefined) body.width = width;
+    if (height !== undefined) body.height = height;
+    if (padding !== undefined) body.padding = padding;
+    if (maxScale !== undefined) body.maxScale = maxScale;
+    if (positional.length > 0) body.nodeIds = positional;
+
+    const result = await invokeOperation('view.fit', body);
+    output(result);
+  },
+);
+
+// ── clear ────────────────────────────────────────────────────
+cmd(
+  'clear',
+  'Remove all nodes and edges from the canvas',
+  ['pmx-canvas clear --yes', 'pmx-canvas clear --dry-run'],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('clear');
+
+    if (flags['dry-run']) {
+      const layout = (await invokeOperation('layout.get', {})) as { nodes: unknown[]; edges: unknown[] };
+      output({
+        dry_run: true,
+        would_remove: { nodes: layout.nodes.length, edges: layout.edges.length },
+        message: 'No changes made. Pass --yes to confirm.',
+      });
+      return;
+    }
+
+    if (!flags.yes) {
+      die('Destructive operation requires --yes flag', 'pmx-canvas clear --yes (or preview with --dry-run)');
+    }
+
+    const result = await invokeOperation('canvas.clear', {});
+    output(result);
+  },
+);
+
+// ── serve (delegates back to original CLI) ───────────────────
+cmd(
+  'serve',
+  'Start the canvas server',
+  [
+    'pmx-canvas serve',
+    'pmx-canvas serve --port=8080 --no-open',
+    'pmx-canvas serve --demo --theme=light',
+    'pmx-canvas --no-open --webview-automation',
+  ],
+  async (_args) => {
+    console.log('Use: pmx-canvas [--port=PORT] [--demo] [--no-open] [--theme=THEME] [--webview-automation]');
+  },
+);

package/src/cli/commands/webview.ts

@@ -0,0 +1,227 @@
+// WebView automation commands: webview status|start|stop|evaluate|resize|
+// screenshot and the top-level screenshot alias.
+
+import { readFileSync, writeFileSync } from 'node:fs';
+import { wrapCanvasAutomationScript } from '../../server/server.js';
+import {
+  cmd,
+  COMMANDS,
+  die,
+  getBaseUrl,
+  invokeOperation,
+  optionalNumberFlag,
+  output,
+  parseFlags,
+  requireFlag,
+  showCommandHelp,
+} from '../shared.js';
+
+// ── webview status ────────────────────────────────────────────
+cmd('webview status', 'Show Bun.WebView automation status', ['pmx-canvas webview status'], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('webview status');
+
+  const result = await invokeOperation('webview.status', {});
+  output(result);
+});
+
+// ── webview start ─────────────────────────────────────────────
+cmd(
+  'webview start',
+  'Start or replace the Bun.WebView automation session',
+  [
+    'pmx-canvas webview start',
+    'pmx-canvas webview start --backend chrome --width 1440 --height 900',
+    'pmx-canvas webview start --chrome-path /Applications/Google\\ Chrome.app/.../Google\\ Chrome',
+  ],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('webview start');
+
+    const backend = flags.backend;
+    if (backend && backend !== true && backend !== 'chrome' && backend !== 'webkit') {
+      die('Invalid value for --backend', 'Use: --backend chrome or --backend webkit');
+    }
+
+    const body: Record<string, unknown> = {};
+    if (backend && backend !== true) body.backend = backend;
+
+    const width = optionalNumberFlag(flags, 'width', 'Use a positive integer width, e.g. --width 1440');
+    const height = optionalNumberFlag(flags, 'height', 'Use a positive integer height, e.g. --height 900');
+    if (width !== undefined) body.width = width;
+    if (height !== undefined) body.height = height;
+
+    if (flags['chrome-path'] && flags['chrome-path'] !== true) {
+      body.chromePath = flags['chrome-path'];
+    }
+
+    if (flags['data-dir'] && flags['data-dir'] !== true) {
+      body.dataStoreDir = flags['data-dir'];
+    }
+
+    if (flags['chrome-argv'] && flags['chrome-argv'] !== true) {
+      const chromeArgv = String(flags['chrome-argv'])
+        .split(',')
+        .map((value) => value.trim())
+        .filter((value) => value.length > 0);
+      if (chromeArgv.length > 0) body.chromeArgv = chromeArgv;
+    }
+
+    // webview.start declares errorBodyAsResult, so failure envelopes
+    // ({ ok:false, error, webview? }) are returned and printed like before.
+    const result = await invokeOperation('webview.start', body);
+    output(result);
+  },
+);
+
+// ── webview stop ──────────────────────────────────────────────
+cmd('webview stop', 'Stop the active Bun.WebView automation session', ['pmx-canvas webview stop'], async (args) => {
+  const { flags } = parseFlags(args);
+  if (flags.help || flags.h) return showCommandHelp('webview stop');
+
+  const result = await invokeOperation('webview.stop', {});
+  output(result);
+});
+
+// ── webview evaluate ──────────────────────────────────────────
+cmd(
+  'webview evaluate',
+  'Evaluate JavaScript in the active Bun.WebView automation session',
+  [
+    'pmx-canvas webview evaluate --expression "document.title"',
+    'pmx-canvas webview evaluate --script "const title = document.title; return title.toUpperCase()"',
+    'pmx-canvas webview evaluate --file ./probe.js',
+  ],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('webview evaluate');
+
+    const sourceCount = [flags.expression, flags.script, flags.file].filter(Boolean).length;
+    if (sourceCount > 1) {
+      die(
+        'Use only one of --expression, --script, or --file.',
+        'pmx-canvas webview evaluate --expression "document.title"',
+      );
+    }
+
+    let expression = '';
+    if (typeof flags.file === 'string') {
+      let script = '';
+      try {
+        script = readFileSync(flags.file, 'utf-8');
+      } catch (error) {
+        die(
+          `Unable to read --file: ${error instanceof Error ? error.message : String(error)}`,
+          'pmx-canvas webview evaluate --file ./probe.js',
+        );
+      }
+      expression = wrapCanvasAutomationScript(script);
+    } else if (typeof flags.script === 'string') {
+      expression = wrapCanvasAutomationScript(flags.script);
+    } else {
+      expression = requireFlag(flags, 'expression', 'pmx-canvas webview evaluate --expression "document.title"');
+    }
+
+    // Send ONLY expression — the CLI already wraps --script/--file into an
+    // expression; passing the op's `script` input would double-wrap server-side.
+    const result = await invokeOperation('webview.evaluate', { expression });
+    output(result);
+  },
+);
+
+// ── webview resize ────────────────────────────────────────────
+cmd(
+  'webview resize',
+  'Resize the active Bun.WebView automation session viewport',
+  ['pmx-canvas webview resize --width 1280 --height 800'],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('webview resize');
+
+    const width = optionalNumberFlag(flags, 'width', 'Use: pmx-canvas webview resize --width 1280 --height 800');
+    const height = optionalNumberFlag(flags, 'height', 'Use: pmx-canvas webview resize --width 1280 --height 800');
+    if (width === undefined || height === undefined) {
+      die('Missing required flags: --width, --height', 'Use: pmx-canvas webview resize --width 1280 --height 800');
+    }
+
+    const result = await invokeOperation('webview.resize', { width, height });
+    output(result);
+  },
+);
+
+// ── webview screenshot ────────────────────────────────────────
+cmd(
+  'webview screenshot',
+  'Capture a screenshot from the active Bun.WebView automation session',
+  [
+    'pmx-canvas webview screenshot --output ./canvas.png',
+    'pmx-canvas webview screenshot --output ./canvas.webp --format webp --quality 80',
+  ],
+  async (args) => {
+    const { flags } = parseFlags(args);
+    if (flags.help || flags.h) return showCommandHelp('webview screenshot');
+
+    const outputPath = requireFlag(flags, 'output', 'pmx-canvas webview screenshot --output ./canvas.png');
+
+    const body: Record<string, unknown> = {};
+    if (flags.format && flags.format !== true) {
+      const format = String(flags.format);
+      if (format !== 'png' && format !== 'jpeg' && format !== 'webp') {
+        die('Invalid value for --format', 'Use: --format png, jpeg, or webp');
+      }
+      body.format = format;
+    }
+
+    if (flags.quality && flags.quality !== true) {
+      const quality = Number(flags.quality);
+      if (!Number.isFinite(quality)) {
+        die(`Invalid value for --quality: ${String(flags.quality)}`, 'Use a numeric quality, e.g. --quality 80');
+      }
+      body.quality = quality;
+    }
+
+    const base = getBaseUrl();
+    const response = await fetch(`${base}/api/workbench/webview/screenshot`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      try {
+        const json = JSON.parse(text) as Record<string, unknown>;
+        die(
+          json.error ? String(json.error) : `HTTP ${response.status}`,
+          typeof json.hint === 'string' ? json.hint : undefined,
+        );
+      } catch {
+        die(`HTTP ${response.status}: ${text}`);
+      }
+    }
+
+    const bytes = new Uint8Array(await response.arrayBuffer());
+    writeFileSync(outputPath, bytes);
+    output({
+      ok: true,
+      output: outputPath,
+      bytes: bytes.byteLength,
+      mimeType: response.headers.get('Content-Type') ?? 'application/octet-stream',
+    });
+  },
+);
+
+cmd(
+  'screenshot',
+  'Capture a screenshot from the active Bun.WebView automation session',
+  [
+    'pmx-canvas screenshot --output ./canvas.png',
+    'pmx-canvas screenshot --output ./canvas.webp --format webp --quality 80',
+  ],
+  async (args) => {
+    if (args.includes('--help') || args.includes('-h')) return showCommandHelp('screenshot');
+    const screenshotCommand = COMMANDS['webview screenshot'];
+    if (!screenshotCommand) die('Internal error: webview screenshot command is unavailable.');
+    await screenshotCommand.run(args);
+  },
+);