@work-graph/cli 0.2.0

package/vendor/src/stepGraphSlice.mjs

@@ -0,0 +1,318 @@
+import { readdir, readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+export const STEP_GRAPH_SLICE_SCHEMA = 'step-graph.slice.v1';
+export const STEP_GRAPH_PROJECTION_SCHEMA = 'step-graph.projection.v1';
+export const STEP_GRAPH_NODE_SEP = '\u001f';
+
+const STEP_BLOCK_PATTERN = /^#([^\n<]+)<\[\n([\s\S]*?)\n\]>/gmu;
+const STEP_REF_PATTERN = /#([A-Za-zА-Яа-яЁё0-9_]+)/gu;
+
+const DEFAULT_SCAN_ROOTS = [
+  'charter',
+  'protocols',
+  'plans',
+  'intent',
+  'ui',
+  'rules',
+  'skills',
+  'work',
+];
+
+const DEFAULT_MAX_NODES = 32;
+const DEFAULT_MAX_DEPTH = 2;
+
+const compareText = (left, right) => String(left).localeCompare(String(right), 'en', { sensitivity: 'variant' });
+
+function normalizeLogicalPath(path) {
+  return String(path ?? '').replace(/\\/g, '/').trim();
+}
+
+function globalNodeId(logicalPath, stepName) {
+  return `${normalizeLogicalPath(logicalPath)}${STEP_GRAPH_NODE_SEP}${stepName}`;
+}
+
+function previewText(body, maxLen = 120) {
+  const lines = String(body ?? '')
+    .split(/\r?\n/u)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .slice(0, 4);
+  const text = lines.join(' ').replace(/\s+/gu, ' ').trim();
+  if (text.length <= maxLen) {
+    return text;
+  }
+
+  return `${text.slice(0, maxLen)}…`;
+}
+
+function extractStepRefTargets(text, selfName) {
+  const out = new Set();
+  for (const match of String(text ?? '').matchAll(STEP_REF_PATTERN)) {
+    const name = match[1];
+    if (!name || name === selfName) {
+      continue;
+    }
+
+    if (name.endsWith('[') || name.includes('<')) {
+      continue;
+    }
+
+    out.add(name);
+  }
+
+  return [...out];
+}
+
+function parseStepBlocks(text) {
+  return [...String(text ?? '').matchAll(STEP_BLOCK_PATTERN)].map((match) => ({
+    name: match[1].trim(),
+    body: match[2],
+  }));
+}
+
+async function walkStepFiles(absoluteRoot, relativeDir, output) {
+  const current = join(absoluteRoot, relativeDir);
+  let entries = [];
+
+  try {
+    entries = await readdir(current, { withFileTypes: true });
+  } catch {
+    return;
+  }
+
+  for (const entry of entries) {
+    const rel = relativeDir ? `${relativeDir}/${entry.name}` : entry.name;
+    if (entry.isDirectory()) {
+      if (entry.name === 'node_modules' || entry.name === '.git') {
+        continue;
+      }
+
+      await walkStepFiles(absoluteRoot, rel, output);
+      continue;
+    }
+
+    if (entry.isFile() && (entry.name.endsWith('.bvc') || entry.name.endsWith('.bvc'))) {
+      output.add(normalizeLogicalPath(rel));
+    }
+  }
+}
+
+export async function collectStepFilePaths(options = {}) {
+  const cwd = options.cwd ?? process.cwd();
+  const roots = options.roots ?? DEFAULT_SCAN_ROOTS;
+  const paths = new Set();
+
+  for (const root of roots) {
+    await walkStepFiles(cwd, root, paths);
+  }
+
+  return [...paths].sort(compareText);
+}
+
+export async function readProjectStepFiles(options = {}) {
+  const cwd = options.cwd ?? process.cwd();
+  const paths = options.paths ?? await collectStepFilePaths(options);
+  const files = [];
+
+  for (const logicalPath of paths) {
+    const text = await readFile(join(cwd, logicalPath), 'utf8');
+    files.push({ logicalPath, text });
+  }
+
+  return files.sort((left, right) => compareText(left.logicalPath, right.logicalPath));
+}
+
+export function buildStepGraphProjectionV1(files, options = {}) {
+  if (!Array.isArray(files)) {
+    throw new TypeError('files must be an array');
+  }
+
+  const nameToGlobalIds = new Map();
+  const nodes = [];
+  const edges = [];
+  let edgeIndex = 0;
+
+  for (const { logicalPath, text } of files) {
+    const blocks = parseStepBlocks(text);
+    const blockNames = new Set(blocks.map((block) => block.name));
+
+    for (const block of blocks) {
+      const nodeId = globalNodeId(logicalPath, block.name);
+      nodes.push({
+        id: nodeId,
+        stepName: block.name,
+        logicalPath,
+        preview: previewText(block.body),
+      });
+
+      const bucket = nameToGlobalIds.get(block.name) ?? [];
+      bucket.push(nodeId);
+      nameToGlobalIds.set(block.name, bucket);
+    }
+
+    for (const block of blocks) {
+      const sourceId = globalNodeId(logicalPath, block.name);
+      const refs = extractStepRefTargets(block.body, block.name);
+
+      for (const refName of refs) {
+        if (blockNames.has(refName)) {
+          edges.push({
+            id: `step-edge-${edgeIndex += 1}`,
+            from: sourceId,
+            to: globalNodeId(logicalPath, refName),
+            relation: 'step_ref',
+            scope: 'intra_file',
+          });
+          continue;
+        }
+
+        const candidates = [...(nameToGlobalIds.get(refName) ?? [])].sort(compareText);
+        if (candidates.length === 0) {
+          continue;
+        }
+
+        edges.push({
+          id: `step-edge-${edgeIndex += 1}`,
+          from: sourceId,
+          to: candidates[0],
+          relation: 'step_ref',
+          scope: candidates.length > 1 ? 'cross_file_ambiguous' : 'cross_file',
+          candidateCount: candidates.length,
+        });
+      }
+    }
+  }
+
+  const maxNodes = Number.isInteger(options.maxNodes) && options.maxNodes > 0
+    ? options.maxNodes
+    : null;
+
+  const sortedNodes = nodes.sort((left, right) => compareText(left.id, right.id));
+  const sortedEdges = edges.sort((left, right) => compareText(left.id, right.id));
+
+  return {
+    schema: STEP_GRAPH_PROJECTION_SCHEMA,
+    fileCount: files.length,
+    nodeCount: sortedNodes.length,
+    edgeCount: sortedEdges.length,
+    truncated: maxNodes !== null && sortedNodes.length > maxNodes,
+    nodes: maxNodes === null ? sortedNodes : sortedNodes.slice(0, maxNodes),
+    edges: sortedEdges,
+  };
+}
+
+function resolveSeedNodeId(projection, options = {}) {
+  const seedNodeId = normalizeLogicalPath(options.seedNodeId ?? options.nodeId ?? '');
+  if (seedNodeId.includes(STEP_GRAPH_NODE_SEP)) {
+    return seedNodeId;
+  }
+
+  const seedStepName = String(options.seedStepName ?? options.stepName ?? '').trim();
+  const seedPath = normalizeLogicalPath(options.seedPath ?? options.logicalPath ?? '');
+
+  if (seedStepName && seedPath) {
+    return globalNodeId(seedPath, seedStepName);
+  }
+
+  if (seedStepName) {
+    const matches = projection.nodes.filter((node) => node.stepName === seedStepName);
+    if (matches.length === 1) {
+      return matches[0].id;
+    }
+
+    if (matches.length > 1) {
+      throw new Error(`ambiguous seedStepName: ${seedStepName} (${matches.length} nodes)`);
+    }
+
+    throw new Error(`unknown seedStepName: ${seedStepName}`);
+  }
+
+  if (seedPath) {
+    const matches = projection.nodes.filter((node) => node.logicalPath === seedPath);
+    if (matches.length >= 1) {
+      return matches[0].id;
+    }
+
+    throw new Error(`no step blocks in seedPath: ${seedPath}`);
+  }
+
+  throw new Error('seedStepName, seedPath or seedNodeId is required');
+}
+
+export function buildStepGraphSliceV1(projection, options = {}) {
+  const seedId = resolveSeedNodeId(projection, options);
+  const nodeById = new Map(projection.nodes.map((node) => [node.id, node]));
+  if (!nodeById.has(seedId)) {
+    throw new Error(`seed node not found in projection: ${seedId}`);
+  }
+
+  const maxNodes = Number.isInteger(options.maxNodes) && options.maxNodes > 0
+    ? options.maxNodes
+    : DEFAULT_MAX_NODES;
+  const maxDepth = Number.isInteger(options.maxDepth) && options.maxDepth >= 0
+    ? options.maxDepth
+    : DEFAULT_MAX_DEPTH;
+
+  const adjacency = new Map();
+  for (const edge of projection.edges) {
+    const bucket = adjacency.get(edge.from) ?? [];
+    bucket.push(edge);
+    adjacency.set(edge.from, bucket);
+  }
+
+  const nodes = new Map([[seedId, nodeById.get(seedId)]]);
+  const edges = [];
+  const queue = [{ id: seedId, depth: 0 }];
+  const visited = new Set([seedId]);
+
+  while (queue.length > 0 && nodes.size < maxNodes) {
+    const current = queue.shift();
+    for (const edge of adjacency.get(current.id) ?? []) {
+      edges.push(edge);
+      const next = nodeById.get(edge.to);
+      if (!next) {
+        continue;
+      }
+
+      nodes.set(next.id, next);
+      if (current.depth < maxDepth && !visited.has(next.id) && nodes.size < maxNodes) {
+        visited.add(next.id);
+        queue.push({ id: next.id, depth: current.depth + 1 });
+      }
+    }
+  }
+
+  return {
+    schema: STEP_GRAPH_SLICE_SCHEMA,
+    seedNodeId: seedId,
+    maxNodes,
+    maxDepth,
+    truncated: nodes.size >= maxNodes,
+    nodeCount: nodes.size,
+    edgeCount: edges.length,
+    nodes: [...nodes.values()].sort((left, right) => compareText(left.id, right.id)),
+    edges: [...edges].sort((left, right) => compareText(left.id, right.id)),
+  };
+}
+
+export async function buildStepGraphProjectionFromRepo(options = {}) {
+  const files = await readProjectStepFiles(options);
+  return buildStepGraphProjectionV1(files, options);
+}
+
+export async function buildStepGraphSliceFromRepo(options = {}) {
+  const { maxNodes, maxDepth, seedStepName, seedPath, seedNodeId, nodeId, stepName, logicalPath, ...projectionOptions } =
+    options;
+  const projection = await buildStepGraphProjectionFromRepo(projectionOptions);
+  return buildStepGraphSliceV1(projection, {
+    ...(maxNodes !== undefined ? { maxNodes } : {}),
+    ...(maxDepth !== undefined ? { maxDepth } : {}),
+    ...(seedStepName !== undefined ? { seedStepName } : {}),
+    ...(seedPath !== undefined ? { seedPath } : {}),
+    ...(seedNodeId !== undefined ? { seedNodeId } : {}),
+    ...(nodeId !== undefined ? { nodeId } : {}),
+    ...(stepName !== undefined ? { stepName } : {}),
+    ...(logicalPath !== undefined ? { logicalPath } : {}),
+  });
+}

package/vendor/src/ui/atoms/badge.mjs

@@ -0,0 +1,40 @@
+import { escapeHtml, escapeHtmlAttr } from '../htmlEscape.mjs';
+
+const TONE_CLASS = {
+  default: 'wg-badge--default',
+  accent: 'wg-badge--accent',
+  muted: 'wg-badge--muted',
+  danger: 'wg-badge--danger',
+  ok: 'wg-badge--ok',
+};
+
+/**
+ * @param {{ label?: string, tone?: string, testId?: string }} props
+ */
+export function renderUiBadge(props = {}) {
+  const label = props.label ?? '';
+  const tone = TONE_CLASS[props.tone] ? props.tone : 'default';
+  const attrs = [
+    'class="wg-badge ' + TONE_CLASS[tone] + '"',
+    props.testId ? `data-testid="${escapeHtmlAttr(props.testId)}"` : '',
+  ].filter(Boolean).join(' ');
+  return `<span ${attrs}>${escapeHtml(label)}</span>`;
+}
+
+export const UI_BADGE_CSS = `
+.wg-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  background: var(--panel-2);
+  color: var(--text);
+}
+.wg-badge--accent { background: var(--accent-soft); color: var(--accent); }
+.wg-badge--muted { background: var(--panel-2); color: var(--muted); }
+.wg-badge--danger { background: rgba(var(--ui-danger-rgb, 241 76 76), 0.18); color: rgb(var(--ui-danger-rgb, 241 76 76)); }
+.wg-badge--ok { background: rgba(106, 153, 85, 0.2); color: var(--ok); }
+`;

package/vendor/src/ui/atoms/badgeClient.mjs

@@ -0,0 +1,32 @@
+/**
+ * Browser-inline badge renderer (no imports).
+ * @param {{ label?: string, tone?: string, testId?: string, title?: string }} props
+ */
+export function renderClientUiBadge(props = {}) {
+  const escapeAttr = (value) => String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/</g, '&lt;');
+
+  const escapeText = (value) => String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  const TONE_CLASS = {
+    default: 'wg-badge--default',
+    accent: 'wg-badge--accent',
+    muted: 'wg-badge--muted',
+    danger: 'wg-badge--danger',
+    ok: 'wg-badge--ok',
+  };
+
+  const tone = TONE_CLASS[props.tone] ? props.tone : 'default';
+  const attrs = [
+    'class="wg-badge ' + TONE_CLASS[tone] + '"',
+    props.testId ? 'data-testid="' + escapeAttr(props.testId) + '"' : '',
+    props.title ? 'title="' + escapeAttr(props.title) + '"' : '',
+  ].filter(Boolean);
+
+  return '<span ' + attrs.join(' ') + '>' + escapeText(props.label ?? '') + '</span>';
+}

package/vendor/src/ui/atoms/button.mjs

@@ -0,0 +1,114 @@
+import { escapeHtml, escapeHtmlAttr } from '../htmlEscape.mjs';
+
+const VARIANT_CLASS = {
+  primary: 'wg-btn--primary',
+  secondary: 'wg-btn--secondary',
+  flat: 'wg-btn--flat',
+  soft: 'wg-btn--soft',
+  black: 'wg-btn--black',
+  inverse: 'wg-btn--inverse',
+};
+
+const SIZE_CLASS = {
+  lg: 'wg-btn--lg',
+  md: 'wg-btn--md',
+  sm: 'wg-btn--sm',
+  xs: 'wg-btn--xs',
+};
+
+/**
+ * @param {{
+ *   label?: string,
+ *   labelHtml?: string,
+ *   variant?: string,
+ *   size?: string,
+ *   type?: string,
+ *   disabled?: boolean,
+ *   hidden?: boolean,
+ *   testId?: string,
+ *   id?: string,
+ *   className?: string,
+ *   href?: string | null,
+ *   unstyled?: boolean,
+ *   ariaLabel?: string,
+ *   ariaPressed?: boolean | string,
+ *   ariaSelected?: boolean | string,
+ *   role?: string,
+ *   attrs?: Record<string, string | number | boolean | null | undefined>,
+ * }} props
+ */
+export function renderUiButton(props = {}) {
+  const label = props.label ?? '';
+  const variant = VARIANT_CLASS[props.variant] ? props.variant : 'primary';
+  const size = SIZE_CLASS[props.size] ? props.size : 'md';
+  const type = props.type ?? 'button';
+  const classes = props.unstyled
+    ? (props.className ?? '')
+    : [
+      'wg-btn',
+      VARIANT_CLASS[variant],
+      SIZE_CLASS[size],
+      props.className ?? '',
+    ].filter(Boolean).join(' ');
+  const attrs = [
+    `class="${escapeHtmlAttr(classes)}"`,
+    props.id ? `id="${escapeHtmlAttr(props.id)}"` : '',
+    props.testId ? `data-testid="${escapeHtmlAttr(props.testId)}"` : '',
+    props.role ? `role="${escapeHtmlAttr(props.role)}"` : '',
+    props.ariaLabel ? `aria-label="${escapeHtmlAttr(props.ariaLabel)}"` : '',
+    props.ariaPressed != null
+      ? `aria-pressed="${props.ariaPressed === true || props.ariaPressed === 'true' ? 'true' : 'false'}"`
+      : '',
+    props.ariaSelected != null
+      ? `aria-selected="${props.ariaSelected === true || props.ariaSelected === 'true' ? 'true' : 'false'}"`
+      : '',
+    props.hidden ? 'hidden' : '',
+    props.disabled ? 'disabled' : '',
+  ].filter(Boolean);
+
+  if (props.attrs) {
+    for (const [key, value] of Object.entries(props.attrs)) {
+      if (value == null || value === false) continue;
+      if (value === true) attrs.push(key);
+      else attrs.push(`${key}="${escapeHtmlAttr(String(value))}"`);
+    }
+  }
+
+  const inner = props.labelHtml ?? escapeHtml(label);
+
+  if (props.href) {
+    return `<a href="${escapeHtmlAttr(props.href)}" ${attrs.join(' ')}>${inner}</a>`;
+  }
+  return `<button type="${escapeHtmlAttr(type)}" ${attrs.join(' ')}>${inner}</button>`;
+}
+
+export const UI_BUTTON_CSS = `
+.wg-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius-control, 0.375rem);
+  font: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  color: rgb(var(--ui-accent-foreground-rgb, 255 255 255));
+  background: rgb(var(--ui-accent-rgb, 0 102 255));
+  padding: 8px 14px;
+}
+.wg-btn--primary:hover:not(:disabled),
+.wg-btn:not([class*="wg-btn--"]):hover:not(:disabled) { background: rgb(var(--ui-accent-hover-rgb, 0 90 230)); }
+.wg-btn:disabled { opacity: 0.55; cursor: not-allowed; }
+.wg-btn--secondary { background: rgb(var(--ui-control-bg-rgb, 45 45 48)); color: rgb(var(--ui-text-rgb, 212 212 212)); border-color: rgb(var(--brand-border-rgb, 60 60 60)); }
+.wg-btn--secondary:hover:not(:disabled) { background: rgb(var(--ui-control-bg-hover-rgb, 60 60 60)); color: rgb(var(--ui-text-rgb, 212 212 212)); }
+.wg-btn--flat { background: transparent; color: rgb(var(--ui-link-rgb, 0 102 255)); }
+.wg-btn--flat:hover:not(:disabled) { background: rgba(var(--ui-accent-rgb, 0 102 255), 0.12); color: rgb(var(--ui-link-hover-rgb, 0 90 230)); }
+.wg-btn--soft { background: rgba(var(--ui-accent-rgb, 0 102 255), 0.16); color: rgb(var(--ui-accent-rgb, 0 102 255)); }
+.wg-btn--soft:hover:not(:disabled) { background: rgba(var(--ui-accent-rgb, 0 102 255), 0.24); color: rgb(var(--ui-accent-rgb, 0 102 255)); }
+.wg-btn--black { background: rgb(var(--ui-cta-rgb, 0 0 0)); color: rgb(var(--ui-cta-foreground-rgb, 255 255 255)); }
+.wg-btn--inverse { background: rgb(var(--ui-surface-rgb, 37 37 38)); color: rgb(var(--ui-text-rgb, 212 212 212)); border-color: rgb(var(--brand-border-rgb, 60 60 60)); }
+.wg-btn--sm { padding: 4px 10px; font-size: 13px; }
+.wg-btn--xs { padding: 2px 8px; font-size: 12px; }
+.wg-btn--lg { padding: 10px 18px; font-size: 15px; }
+`;

package/vendor/src/ui/atoms/buttonClient.mjs

@@ -0,0 +1,49 @@
+/**
+ * Browser-inline button renderer (no imports). Injected into backlog UI client script.
+ * @param {Record<string, unknown>} props
+ */
+export function renderClientUiButton(props = {}) {
+  const escapeAttr = (value) => String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;');
+
+  const escapeText = (value) => String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  const VARIANT_CLASS = {
+    primary: 'wg-btn--primary',
+    secondary: 'wg-btn--secondary',
+    flat: 'wg-btn--flat',
+    soft: 'wg-btn--soft',
+  };
+  const SIZE_CLASS = {
+    sm: 'wg-btn--sm',
+    xs: 'wg-btn--xs',
+    md: 'wg-btn--md',
+  };
+
+  const label = props.label ?? '';
+  const variant = VARIANT_CLASS[props.variant] ? props.variant : 'secondary';
+  const size = SIZE_CLASS[props.size] ? props.size : 'sm';
+  const classes = props.unstyled
+    ? (props.className ?? '')
+    : ['wg-btn', VARIANT_CLASS[variant], SIZE_CLASS[size], props.className ?? ''].filter(Boolean).join(' ');
+
+  const attrs = [`class="${escapeAttr(classes)}"`, 'type="button"'];
+  if (props.id) attrs.push(`id="${escapeAttr(props.id)}"`);
+  if (props.testId) attrs.push(`data-testid="${escapeAttr(props.testId)}"`);
+  if (props.disabled) attrs.push('disabled');
+  if (props.attrs && typeof props.attrs === 'object') {
+    for (const [key, value] of Object.entries(props.attrs)) {
+      if (value == null || value === false) continue;
+      if (value === true) attrs.push(key);
+      else attrs.push(`${key}="${escapeAttr(String(value))}"`);
+    }
+  }
+
+  const inner = props.labelHtml ?? escapeText(label);
+  return `<button ${attrs.join(' ')}>${inner}</button>`;
+}

package/vendor/src/ui/atoms/icon.mjs

@@ -0,0 +1,23 @@
+import { escapeHtml, escapeHtmlAttr } from '../htmlEscape.mjs';
+
+/**
+ * @param {{ name?: string, size?: number, testId?: string, title?: string }} props
+ */
+export function renderUiIcon(props = {}) {
+  const name = props.name ?? 'dot';
+  const size = Number(props.size) > 0 ? Number(props.size) : 16;
+  const title = props.title ?? name;
+  const attrs = [
+    'class="wg-icon"',
+    `data-icon="${escapeHtmlAttr(name)}"`,
+    `width="${size}"`,
+    `height="${size}"`,
+    `aria-hidden="true"`,
+    props.testId ? `data-testid="${escapeHtmlAttr(props.testId)}"` : '',
+  ].filter(Boolean).join(' ');
+  return `<svg ${attrs} viewBox="0 0 16 16" role="img"><title>${escapeHtml(title)}</title><circle cx="8" cy="8" r="4" fill="currentColor"/></svg>`;
+}
+
+export const UI_ICON_CSS = `
+.wg-icon { display: inline-block; vertical-align: middle; color: rgb(var(--ui-accent-rgb, 0 102 255)); flex-shrink: 0; }
+`;

package/vendor/src/ui/atoms/input.mjs

@@ -0,0 +1,38 @@
+import { escapeHtml, escapeHtmlAttr } from '../htmlEscape.mjs';
+
+/**
+ * @param {{ name?: string, value?: string, placeholder?: string, type?: string, disabled?: boolean, testId?: string }} props
+ */
+export function renderUiTextInput(props = {}) {
+  const name = props.name ?? '';
+  const value = props.value ?? '';
+  const placeholder = props.placeholder ?? '';
+  const type = props.type ?? 'text';
+  const attrs = [
+    'class="wg-input"',
+    name ? `name="${escapeHtmlAttr(name)}"` : '',
+    `type="${escapeHtmlAttr(type)}"`,
+    placeholder ? `placeholder="${escapeHtmlAttr(placeholder)}"` : '',
+    value ? `value="${escapeHtmlAttr(value)}"` : '',
+    props.disabled ? 'disabled' : '',
+    props.testId ? `data-testid="${escapeHtmlAttr(props.testId)}"` : '',
+  ].filter(Boolean).join(' ');
+  return `<input ${attrs}>`;
+}
+
+export const UI_INPUT_CSS = `
+.wg-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid rgb(var(--brand-border-rgb, 60 60 60));
+  border-radius: var(--ui-radius-control-sm, 0.25rem);
+  background: rgb(var(--ui-control-bg-rgb, 45 45 48));
+  color: rgb(var(--ui-text-rgb, 212 212 212));
+  padding: 8px 10px;
+  font: inherit;
+}
+.wg-input:focus {
+  outline: 2px solid rgb(var(--ui-focus-ring-rgb, 0 102 255));
+  outline-offset: 1px;
+}
+`;

package/vendor/src/ui/atoms/modal.mjs

@@ -0,0 +1,44 @@
+import { escapeHtml, escapeHtmlAttr } from '../htmlEscape.mjs';
+import { renderUiButton } from './button.mjs';
+
+/**
+ * @param {{ title?: string, bodyHtml?: string, open?: boolean, testId?: string }} props
+ */
+export function renderUiModal(props = {}) {
+  const title = props.title ?? 'Modal';
+  const bodyHtml = props.bodyHtml ?? '';
+  const open = props.open !== false;
+  const hidden = open ? '' : ' hidden';
+  const testId = props.testId ?? 'ui-modal';
+  return (
+    '<div class="wg-modal' + (open ? ' is-open' : '') + '"' + hidden +
+    ' data-testid="' + escapeHtmlAttr(testId) + '" role="dialog" aria-modal="true" aria-label="' + escapeHtmlAttr(title) + '">' +
+    '<div class="wg-modal__backdrop"></div>' +
+    '<div class="wg-modal__panel">' +
+    '<header class="wg-modal__header"><h3>' + escapeHtml(title) + '</h3>' +
+    renderUiButton({ label: '×', variant: 'flat', size: 'xs', testId: 'ui-modal-close', className: 'wg-modal__close' }) +
+    '</header>' +
+    '<div class="wg-modal__body">' + bodyHtml + '</div>' +
+    '</div></div>'
+  );
+}
+
+export const UI_MODAL_CSS = `
+.wg-modal { position: fixed; inset: 0; z-index: 100; display: none; }
+.wg-modal.is-open { display: block; }
+.wg-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
+.wg-modal__panel {
+  position: relative;
+  margin: 10vh auto;
+  width: min(480px, 92vw);
+  background: rgb(var(--ui-surface-rgb, 37 37 38));
+  border: 1px solid rgb(var(--brand-border-rgb, 60 60 60));
+  border-radius: var(--ui-radius-modal, 0.5rem);
+  color: rgb(var(--ui-text-rgb, 212 212 212));
+  box-shadow: var(--shadow-card, 0 8px 24px rgba(0,0,0,0.35));
+}
+.wg-modal__header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgb(var(--brand-border-rgb, 60 60 60)); }
+.wg-modal__header h3 { margin: 0; font-size: 15px; }
+.wg-modal__body { padding: 14px; }
+.wg-modal__close { min-width: 28px; }
+`;