supipowers 1.5.3 → 2.0.1

package/src/ui-design/backend-adapter.ts

@@ -0,0 +1,78 @@
+import type { UiDesignBackendId } from "./types.js";
+import { createLocalHtmlBackend } from "./backends/local-html.js";
+import { createPencilMcpBackend } from "./backends/pencil-mcp.js";
+
+/**
+ * Session-start options passed by the command handler to a backend.
+ * `sessionDir` is created by the caller; the adapter never creates it.
+ */
+export interface BackendStartSessionOptions {
+  sessionDir: string;
+  port?: number;
+  /** Absolute path to the target .pen file — required for `pencil-mcp`. */
+  penFilePath?: string;
+}
+
+/**
+ * Handle returned by `startSession` — the canonical shape.
+ * `cleanup()` is idempotent; callers may invoke it multiple times.
+ */
+export interface BackendStartResult {
+  url: string;
+  cleanup: () => Promise<void>;
+}
+
+export type BackendFinalizeReason = "complete" | "discarded";
+
+/**
+ * Backend contract. Implementations manage the lifecycle of the artifact
+ * surface (HTTP companion, MCP connection, etc.) — they do NOT own manifest.json.
+ */
+export interface UiDesignBackend {
+  id: UiDesignBackendId;
+  startSession(opts: BackendStartSessionOptions): Promise<BackendStartResult>;
+  artifactUrl(sessionDir: string, artifactPath: string): string | null;
+  finalize(sessionDir: string, reason: BackendFinalizeReason): Promise<void>;
+}
+
+/** Thrown when a requested backend cannot be provided. */
+export class BackendUnavailableError extends Error {
+  readonly code = "backend-unavailable" as const;
+  constructor(message: string) {
+    super(message);
+    this.name = "BackendUnavailableError";
+  }
+}
+
+/** Runtime dependencies a backend factory may require. */
+export interface GetBackendDeps {
+  /** Active tool names from the OMP harness. Used by the pencil-mcp backend. */
+  getActiveTools?: () => string[];
+}
+
+/**
+ * Resolve a backend by id. Local-html has no runtime deps; pencil-mcp needs
+ * the harness's active tool list to validate that the Pencil MCP server is
+ * connected. Additional MCP-based backends (figma, paper) will register
+ * through the same factory.
+ */
+export function getBackend(
+  id: UiDesignBackendId,
+  deps: GetBackendDeps = {},
+): UiDesignBackend {
+  if (id === "local-html") {
+    return createLocalHtmlBackend();
+  }
+  if (id === "pencil-mcp") {
+    const getActiveTools = deps.getActiveTools;
+    if (!getActiveTools) {
+      throw new BackendUnavailableError(
+        "Backend 'pencil-mcp' requires `getActiveTools` — pass the OMP platform's tool introspection hook.",
+      );
+    }
+    return createPencilMcpBackend({ getActiveTools });
+  }
+  throw new BackendUnavailableError(
+    `Backend '${id}' is not available. Supported: local-html, pencil-mcp.`,
+  );
+}

package/src/ui-design/backends/local-html.ts

@@ -0,0 +1,82 @@
+import * as path from "node:path";
+import type { VisualServerInfo } from "../../visual/types.js";
+import { startVisualServer as realStartVisualServer } from "../../visual/start-server.js";
+import { stopVisualServer as realStopVisualServer } from "../../visual/stop-server.js";
+import {
+  BackendUnavailableError,
+  type BackendFinalizeReason,
+  type BackendStartResult,
+  type BackendStartSessionOptions,
+  type UiDesignBackend,
+} from "../backend-adapter.js";
+
+export interface LocalHtmlBackendDeps {
+  startVisualServer: (opts: { sessionDir: string; port?: number }) => Promise<VisualServerInfo | null>;
+  stopVisualServer: (sessionDir: string) => { status: string };
+}
+
+const DEFAULT_DEPS: LocalHtmlBackendDeps = {
+  startVisualServer: realStartVisualServer,
+  stopVisualServer: realStopVisualServer,
+};
+
+/**
+ * Local HTML companion backend. Wraps `src/visual/` server lifecycle.
+ *
+ * `sessionDir` is the caller-created directory — we do not manage the manifest
+ * file or write design artifacts. The server streams files written to
+ * `sessionDir` to a browser companion.
+ */
+export function createLocalHtmlBackend(
+  deps: LocalHtmlBackendDeps = DEFAULT_DEPS,
+): UiDesignBackend {
+  let currentUrl: string | null = null;
+  let currentSessionDir: string | null = null;
+
+  return {
+    id: "local-html",
+
+    async startSession(opts: BackendStartSessionOptions): Promise<BackendStartResult> {
+      const info = await deps.startVisualServer(
+        opts.port !== undefined
+          ? { sessionDir: opts.sessionDir, port: opts.port }
+          : { sessionDir: opts.sessionDir },
+      );
+
+      if (!info) {
+        throw new BackendUnavailableError(
+          `Failed to start local HTML companion for session ${opts.sessionDir}. Check that the port is free and try again.`,
+        );
+      }
+
+      currentUrl = info.url;
+      currentSessionDir = opts.sessionDir;
+
+      let stopped = false;
+      const cleanup = async (): Promise<void> => {
+        if (stopped) return;
+        stopped = true;
+        deps.stopVisualServer(opts.sessionDir);
+      };
+
+      return { url: info.url, cleanup };
+    },
+
+    artifactUrl(sessionDir: string, artifactPath: string): string | null {
+      if (!currentUrl || currentSessionDir !== sessionDir) {
+        return null;
+      }
+
+      const normalizedPath = artifactPath.split(path.sep).join("/").replace(/^\/?/, "/");
+      return new URL(normalizedPath, `${currentUrl}/`).toString();
+    },
+
+    async finalize(sessionDir: string, _reason: BackendFinalizeReason): Promise<void> {
+      deps.stopVisualServer(sessionDir);
+      if (currentSessionDir === sessionDir) {
+        currentUrl = null;
+        currentSessionDir = null;
+      }
+    },
+  };
+}

package/src/ui-design/backends/pencil-mcp.ts

@@ -0,0 +1,111 @@
+import * as path from "node:path";
+import { pathToFileURL } from "node:url";
+import {
+  BackendUnavailableError,
+  type BackendFinalizeReason,
+  type BackendStartResult,
+  type BackendStartSessionOptions,
+  type UiDesignBackend,
+} from "../backend-adapter.js";
+
+/**
+ * Minimal set of `mcp__pencil_*` tools the Director and its mandatory
+ * pencil sub-agents must be able to call for a pencil-mcp session to have a
+ * chance of succeeding. Availability is detected by checking the harness's
+ * active tools list for these exact names.
+ */
+export const REQUIRED_PENCIL_TOOLS = [
+  "mcp__pencil_open_document",
+  "mcp__pencil_get_editor_state",
+  "mcp__pencil_batch_get",
+  "mcp__pencil_batch_design",
+  "mcp__pencil_get_screenshot",
+  "mcp__pencil_snapshot_layout",
+  "mcp__pencil_search_all_unique_properties",
+  "mcp__pencil_export_nodes",
+];
+
+/**
+ * Check whether the Pencil MCP server is currently connected by inspecting
+ * the harness's active tools list. OMP exposes MCP tools as
+ * `mcp__<server>_<tool>` — we require every non-optional tool named by the
+ * Director workflow or its pencil sub-agent templates.
+ */
+export function detectPencilMcp(activeTools: string[]): boolean {
+  if (!Array.isArray(activeTools) || activeTools.length === 0) return false;
+  const set = new Set(activeTools);
+  return REQUIRED_PENCIL_TOOLS.every((name) => set.has(name));
+}
+
+export interface PencilMcpBackendDeps {
+  getActiveTools: () => string[];
+}
+
+export interface PencilMcpStartOptions extends BackendStartSessionOptions {
+  /** Absolute path to the target .pen file, chosen by the caller. */
+  penFilePath?: string;
+}
+
+/**
+ * Pencil-MCP backend. Owns no long-running process — edits happen through
+ * `mcp__pencil_*` tool calls driven by the Design Director. `startSession`
+ * validates that the server is still connected and pins the chosen `.pen`
+ * path for later `artifactUrl` lookups.
+ */
+export function createPencilMcpBackend(
+  deps: PencilMcpBackendDeps,
+): UiDesignBackend {
+  let currentSessionDir: string | null = null;
+
+  return {
+    id: "pencil-mcp",
+
+    async startSession(opts: PencilMcpStartOptions): Promise<BackendStartResult> {
+      if (!detectPencilMcp(deps.getActiveTools())) {
+        throw new BackendUnavailableError(
+          "Pencil MCP server is not connected. Start the `pencil` MCP server (exposes `mcp__pencil_batch_design` + `mcp__pencil_batch_get`) and retry.",
+        );
+      }
+
+      if (!opts.penFilePath || !path.isAbsolute(opts.penFilePath)) {
+        throw new BackendUnavailableError(
+          "pencil-mcp backend requires an absolute `penFilePath`.",
+        );
+      }
+
+      currentSessionDir = opts.sessionDir;
+
+      // No companion server to tear down — cleanup is an idempotent no-op so
+      // the command layer can call it freely on startup-failure paths.
+      let cleaned = false;
+      const cleanup = async (): Promise<void> => {
+        if (cleaned) return;
+        cleaned = true;
+      };
+
+      return {
+        url: pathToFileURL(opts.penFilePath).toString(),
+        cleanup,
+      };
+    },
+
+    artifactUrl(sessionDir: string, artifactPath: string): string | null {
+      if (currentSessionDir !== sessionDir) return null;
+      if (!artifactPath) return null;
+      const absolute = path.isAbsolute(artifactPath)
+        ? artifactPath
+        : path.join(sessionDir, artifactPath);
+      return pathToFileURL(absolute).toString();
+    },
+
+    async finalize(sessionDir: string, _reason: BackendFinalizeReason): Promise<void> {
+      // Deliberately a no-op: the `.pen` file is user-owned and must survive
+      // both `complete` and `discarded` terminal states. The command layer
+      // handles session-directory removal on discard; external `.pen` files
+      // are never touched here.
+      if (currentSessionDir === sessionDir) {
+        currentSessionDir = null;
+      }
+    },
+  };
+}

package/src/ui-design/components-scanner.ts

@@ -0,0 +1,124 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type { ExistingComponent } from "./types.js";
+import { normalizeRepoPath } from "../workspace/path-mapping.js";
+
+export interface ScanExistingComponentsOptions {
+  globs?: string[];
+  excludes?: string[];
+  max?: number;
+}
+
+export type ComponentsScanResult =
+  | { status: "missing"; items: [] }
+  | { status: "error"; items: []; reason: string }
+  | { status: "ok"; items: ExistingComponent[] };
+
+const DEFAULT_GLOBS = [
+  "components/**/*.{tsx,jsx,vue,svelte}",
+  "src/components/**/*.{tsx,jsx,vue,svelte}",
+  "app/components/**/*.{tsx,jsx,vue,svelte}",
+  "ui/**/*.{tsx,jsx,vue,svelte}",
+];
+
+const DEFAULT_EXCLUDES = [
+  "node_modules/**",
+  "dist/**",
+  ".omp/**",
+  "*.test.*",
+  "*.spec.*",
+  "*.stories.*",
+];
+
+const DEFAULT_MAX = 100;
+
+function detectFramework(filePath: string): ExistingComponent["framework"] {
+  if (filePath.endsWith(".vue")) return "vue";
+  if (filePath.endsWith(".svelte")) return "svelte";
+  if (filePath.endsWith(".tsx") || filePath.endsWith(".jsx")) return "react";
+  return "unknown";
+}
+
+function extractExports(content: string): string[] {
+  const names = new Set<string>();
+  const re = /export\s+(?:default\s+)?(?:function|const|class|let|var)\s+(\w+)/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(content)) !== null) {
+    names.add(m[1]!);
+  }
+  return Array.from(names);
+}
+
+function inferName(filePath: string): string {
+  const base = path.basename(filePath);
+  return base.replace(/\.(tsx|jsx|vue|svelte)$/, "");
+}
+
+function matchesExcludePattern(relPath: string, patterns: string[]): boolean {
+  for (const p of patterns) {
+    const glob = new Bun.Glob(p);
+    if (glob.match(relPath)) return true;
+    const base = path.basename(relPath);
+    if (glob.match(base)) return true;
+  }
+  return false;
+}
+
+export async function scanExistingComponents(
+  repoRoot: string,
+  opts: ScanExistingComponentsOptions = {},
+): Promise<ComponentsScanResult> {
+  const globs = opts.globs ?? DEFAULT_GLOBS;
+  const excludes = opts.excludes ?? DEFAULT_EXCLUDES;
+  const max = opts.max ?? DEFAULT_MAX;
+
+  try {
+    if (!fs.existsSync(repoRoot) || !fs.statSync(repoRoot).isDirectory()) {
+      return { status: "missing", items: [] };
+    }
+
+    const items: ExistingComponent[] = [];
+    const seen = new Set<string>();
+
+    for (const pattern of globs) {
+      const glob = new Bun.Glob(pattern);
+      for await (const match of glob.scan({ cwd: repoRoot, onlyFiles: true })) {
+        const repoRelativePath = normalizeRepoPath(match);
+        if (seen.has(repoRelativePath)) continue;
+        if (matchesExcludePattern(repoRelativePath, excludes)) continue;
+        seen.add(repoRelativePath);
+
+        const absPath = path.join(repoRoot, repoRelativePath);
+        let content = "";
+        try {
+          content = fs.readFileSync(absPath, "utf-8");
+        } catch {
+          continue;
+        }
+
+        items.push({
+          name: inferName(repoRelativePath),
+          path: repoRelativePath,
+          framework: detectFramework(repoRelativePath),
+          exports: extractExports(content),
+        });
+
+        if (items.length >= max) break;
+      }
+      if (items.length >= max) break;
+    }
+
+    if (items.length === 0) {
+      return { status: "missing", items: [] };
+    }
+
+    items.sort((a, b) => a.path.localeCompare(b.path));
+    return { status: "ok", items };
+  } catch (err) {
+    return {
+      status: "error",
+      items: [],
+      reason: (err as Error).message,
+    };
+  }
+}

package/src/ui-design/config.ts

@@ -0,0 +1,55 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import type { PlatformPaths } from "../platform/types.js";
+import type { UiDesignBackendId } from "./types.js";
+
+const CONFIG_FILENAME = "ui-design.json";
+const SUPPORTED_BACKENDS: UiDesignBackendId[] = ["local-html", "pencil-mcp"];
+
+export interface UiDesignConfig {
+  backend: UiDesignBackendId;
+  /** Optional port override for local HTML companion. */
+  port?: number;
+  /** Optional overrides for the components-scanner glob list. */
+  componentsGlobs?: string[];
+}
+
+export const DEFAULT_UI_DESIGN_CONFIG: UiDesignConfig = {
+  backend: "local-html",
+};
+
+function getConfigPath(paths: PlatformPaths, cwd: string): string {
+  return paths.project(cwd, CONFIG_FILENAME);
+}
+
+function isValidConfig(data: unknown): data is UiDesignConfig {
+  if (!data || typeof data !== "object") return false;
+  const backend = (data as { backend?: unknown }).backend;
+  if (typeof backend !== "string") return false;
+  return SUPPORTED_BACKENDS.includes(backend as UiDesignBackendId);
+}
+
+export function loadUiDesignConfig(
+  paths: PlatformPaths,
+  cwd: string,
+): UiDesignConfig | null {
+  const configPath = getConfigPath(paths, cwd);
+  if (!fs.existsSync(configPath)) return null;
+  try {
+    const parsed = JSON.parse(fs.readFileSync(configPath, "utf-8"));
+    if (!isValidConfig(parsed)) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+export function saveUiDesignConfig(
+  paths: PlatformPaths,
+  cwd: string,
+  config: UiDesignConfig,
+): void {
+  const configPath = getConfigPath(paths, cwd);
+  fs.mkdirSync(path.dirname(configPath), { recursive: true });
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+}

package/src/ui-design/pen-scanner.ts

@@ -0,0 +1,95 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+export interface PenFileEntry {
+  /** Absolute path — passed to `mcp__pencil_*` tools as `filePath`. */
+  absolutePath: string;
+  /** Path relative to the repo root, using POSIX separators for display. */
+  relativePath: string;
+  /** File size in bytes (cheap disambiguation between same-named files). */
+  bytes: number;
+}
+
+export interface ScanPenFilesOptions {
+  excludes?: string[];
+  max?: number;
+}
+
+const DEFAULT_EXCLUDES = [
+  "node_modules",
+  "dist",
+  "build",
+  ".next",
+  ".cache",
+  ".omp",
+  ".git",
+];
+
+const DEFAULT_MAX = 50;
+
+/**
+ * Walk `repoRoot` recursively and collect every `.pen` file outside the
+ * excluded directories. Never throws: IO failures degrade to an empty list.
+ * Entries are returned sorted by relative path for deterministic UI order.
+ */
+export function scanPenFiles(
+  repoRoot: string,
+  opts: ScanPenFilesOptions = {},
+): PenFileEntry[] {
+  const excludes = new Set(opts.excludes ?? DEFAULT_EXCLUDES);
+  const max = opts.max ?? DEFAULT_MAX;
+
+  let root: string;
+  try {
+    const stat = fs.statSync(repoRoot);
+    if (!stat.isDirectory()) return [];
+    root = path.resolve(repoRoot);
+  } catch {
+    return [];
+  }
+
+  const entries: PenFileEntry[] = [];
+
+  const visit = (absDir: string): void => {
+    if (entries.length >= max) return;
+    let dirents: fs.Dirent[];
+    try {
+      dirents = fs.readdirSync(absDir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+
+    for (const entry of dirents) {
+      if (entries.length >= max) return;
+      const entryAbs = path.join(absDir, entry.name);
+
+      if (entry.isDirectory()) {
+        if (excludes.has(entry.name)) continue;
+        visit(entryAbs);
+        continue;
+      }
+
+      if (!entry.isFile()) continue;
+      if (!entry.name.endsWith(".pen")) continue;
+
+      let bytes = 0;
+      try {
+        bytes = fs.statSync(entryAbs).size;
+      } catch {
+        continue;
+      }
+
+      const relative = path.relative(root, entryAbs).split(path.sep).join("/");
+      entries.push({
+        absolutePath: entryAbs,
+        relativePath: relative,
+        bytes,
+      });
+    }
+  };
+
+  visit(root);
+
+  entries.sort((a, b) => a.relativePath.localeCompare(b.relativePath));
+  return entries;
+}

package/src/ui-design/pen-selector.ts

@@ -0,0 +1,72 @@
+import * as path from "node:path";
+import { scanPenFiles, type PenFileEntry } from "./pen-scanner.js";
+
+export interface PenSelection {
+  kind: "existing" | "new";
+  /** Absolute path — passed directly to `mcp__pencil_*` tools. */
+  penFilePath: string;
+}
+
+export interface SelectPenFileOptions {
+  ctx: any;
+  repoRoot: string;
+  /** Used as the parent for the "Create a new .pen" fallback. */
+  sessionDir: string;
+  /** Injection hook for tests. Defaults to `scanPenFiles`. */
+  scan?: (repoRoot: string) => PenFileEntry[];
+}
+
+const CREATE_NEW_LABEL = "Create a new .pen in the session directory";
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatLabel(entry: PenFileEntry): string {
+  return `${entry.relativePath} (${formatBytes(entry.bytes)})`;
+}
+
+function newPenPath(sessionDir: string): string {
+  return path.join(sessionDir, "design.pen");
+}
+
+/**
+ * Ask the user which `.pen` file to drive this `/supi:ui-design` session
+ * against. Scans `repoRoot` for existing `.pen` files and offers them plus a
+ * "create a new one in the session dir" fallback.
+ *
+ * Zero discovered files or a headless context → auto-default (no prompt). A
+ * null UI selection (user cancelled) → returns `null`; the caller aborts.
+ */
+export async function selectPenFile(
+  opts: SelectPenFileOptions,
+): Promise<PenSelection | null> {
+  const scan = opts.scan ?? scanPenFiles;
+  const entries = scan(opts.repoRoot);
+
+  if (entries.length === 0) {
+    return { kind: "new", penFilePath: newPenPath(opts.sessionDir) };
+  }
+
+  if (!opts.ctx?.hasUI) {
+    // Headless: deterministic fallback to the first (alphabetically sorted) entry
+    // so CI smokes stay non-interactive.
+    const first = entries[0]!;
+    return { kind: "existing", penFilePath: first.absolutePath };
+  }
+
+  const labels = [...entries.map(formatLabel), CREATE_NEW_LABEL];
+  const choice = await opts.ctx.ui.select("Select a .pen file", labels);
+  if (!choice) return null;
+
+  if (choice === CREATE_NEW_LABEL) {
+    return { kind: "new", penFilePath: newPenPath(opts.sessionDir) };
+  }
+
+  const matched = entries.find((entry) => formatLabel(entry) === choice);
+  if (!matched) return null;
+
+  return { kind: "existing", penFilePath: matched.absolutePath };
+}

package/src/ui-design/prompt-builder.ts

@@ -0,0 +1,73 @@
+import type { ContextScan } from "./types.js";
+
+export interface UiDesignKickoffOptions {
+  topic?: string;
+  sessionDir: string;
+  companionUrl: string;
+  contextScanSummary: string;
+  /** When set, the kickoff cites this .pen path and instructs the director
+   *  to `mcp__pencil_open_document` it at the start of Phase 2. */
+  penFilePath?: string;
+}
+
+/**
+ * Build the kickoff user-message. The system-prompt override carries the full
+ * phase contract; the kickoff itself just triggers the first turn and provides
+ * the session coordinates.
+ */
+export function buildUiDesignKickoffPrompt(opts: UiDesignKickoffOptions): string {
+  const lines: string[] = [
+    "Begin the Design Director workflow for `/supi:ui-design`.",
+    "",
+    `Session directory: \`${opts.sessionDir}\``,
+    `Companion URL: ${opts.companionUrl}`,
+  ];
+
+  if (opts.penFilePath) {
+    lines.push(`Target .pen file: \`${opts.penFilePath}\``);
+    lines.push(
+      "At the start of Phase 2, call `mcp__pencil_open_document` on the target .pen file. Every subsequent `mcp__pencil_*` call MUST pass the same `filePath`.",
+    );
+  }
+
+  lines.push("", "## Context Scan", "", opts.contextScanSummary.trim(), "");
+
+  if (opts.topic) {
+    lines.push(`Design target: ${opts.topic}`, "");
+    lines.push(
+      "Start Phase 1: use `planning_ask` to confirm the scope (page / flow / component) for this target, then update `manifest.json`.",
+    );
+  } else {
+    lines.push(
+      "No target provided. Start Phase 1: use `planning_ask` to learn what the user wants to design, then confirm the scope (page / flow / component) before updating `manifest.json`.",
+    );
+  }
+
+  return lines.join("\n");
+}
+
+/**
+ * Pre-render a compact markdown summary of the ContextScan for use in the
+ * kickoff prompt and the director system-prompt block. Stays under ~500 bytes.
+ */
+export function renderContextScanSummary(scan: ContextScan): string {
+  const framework = scan.packageInfo.status === "ok" ? scan.packageInfo.framework : "missing";
+  const tokens = scan.tokens.status === "ok" ? scan.tokens.source : scan.tokens.status;
+  const componentCount = scan.components.status === "ok" ? scan.components.items.length : 0;
+  const componentsLabel =
+    scan.components.status === "ok" ? `${componentCount}` : scan.components.status;
+  const designMd =
+    scan.designMd.status === "ok" ? scan.designMd.path : `design.md: ${scan.designMd.status}`;
+  const uiLibs =
+    scan.packageInfo.status === "ok" && scan.packageInfo.uiLibraries.length > 0
+      ? scan.packageInfo.uiLibraries.join(", ")
+      : "none";
+
+  return [
+    `- Framework: ${framework}`,
+    `- Tokens: ${tokens}`,
+    `- Components: ${componentsLabel}`,
+    `- design.md: ${scan.designMd.status === "ok" ? designMd : "missing"}`,
+    `- UI libraries: ${uiLibs}`,
+  ].join("\n");
+}