@jay-framework/design-system-validator 0.22.1 → 0.23.1

package/dist/index.client.js

@@ -0,0 +1,657 @@
+import { makeJayStackComponent } from "@jay-framework/fullstack-component";
+import { createSignal, createMemo, createEffect } from "@jay-framework/component";
+import { createActionCaller } from "@jay-framework/stack-client-runtime";
+const PLUGIN_ATTRS = {
+  pluginName: "design-system-validator",
+  packageName: "@jay-framework/design-system-validator"
+};
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function scopedFragment(innerHtml, scopedCss = "") {
+  const styleBlock = `<style>@scope { ${scopedCss} }</style>`;
+  return `<div>${styleBlock}${innerHtml}</div>`;
+}
+function isLargeFontSize(fontSize) {
+  if (!fontSize) return false;
+  if (/\d+(\.\d+)?\s*(vw|vh|vmin|vmax)\b/.test(fontSize)) return true;
+  const clampMatch = fontSize.match(/clamp\([^,]+,[^,]+,\s*([\d.]+)\s*(px|rem|em)/);
+  if (clampMatch) {
+    const max = parseFloat(clampMatch[1]);
+    const unit = clampMatch[2];
+    if (unit === "px") return max > 20;
+    return max > 1.25;
+  }
+  const simple = parseFloat(fontSize);
+  if (isNaN(simple)) return false;
+  if (fontSize.includes("rem") || fontSize.includes("em")) return simple > 1.25;
+  return simple > 20;
+}
+function spacingBrowseSize(value) {
+  if (/calc|clamp|var\(/.test(value)) return "large";
+  const px = parseFloat(value);
+  if (!isNaN(px) && !value.includes("rem") && !value.includes("em")) {
+    if (px <= 30) return "small";
+    if (px > 100) return "large";
+    return void 0;
+  }
+  const rem = parseFloat(value);
+  if (!isNaN(rem)) {
+    if (rem <= 2) return "small";
+    if (rem > 6) return "large";
+  }
+  return void 0;
+}
+function buildColorItem(name, value, category) {
+  return {
+    id: `design-system:color-${name}`,
+    ...PLUGIN_ATTRS,
+    title: name,
+    category,
+    subCategory: "Colors",
+    browse: { size: "small" },
+    prompt: `Use color token "${name}" with value ${value} from DESIGN.md.`,
+    interaction: {
+      mode: "stage-place",
+      stagePromptTemplate: `Apply the color token "${name}" (${value}) from DESIGN.md at this location.`
+    },
+    presentation: {
+      type: "html-fragment",
+      html: scopedFragment(`<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:sans-serif;height:100%;">
+  <div style="width:40px;height:40px;border-radius:6px;background:${esc(value)};border:1px solid rgba(0,0,0,0.1);"></div>
+  <div style="font-size:10px;color:#888;font-family:monospace;">${esc(value)}</div>
+</div>`)
+    }
+  };
+}
+function buildSpacingItem(name, value, category) {
+  return {
+    id: `design-system:spacing-${name}`,
+    ...PLUGIN_ATTRS,
+    title: name,
+    category,
+    subCategory: "Spacing",
+    prompt: `Use spacing token "${name}" with value ${value} from DESIGN.md for padding, margin, or gap.`,
+    ...spacingBrowseSize(value) ? { browse: { size: spacingBrowseSize(value) } } : {},
+    interaction: {
+      mode: "stage-place",
+      stagePromptTemplate: `Apply the spacing token "${name}" (${value}) from DESIGN.md at this location.`
+    },
+    presentation: {
+      type: "html-fragment",
+      html: scopedFragment(`<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:sans-serif;height:100%;">
+  <div style="display:flex;align-items:center;gap:0;">
+    <div style="width:16px;height:24px;background:#cbd5e1;border-radius:2px 0 0 2px;"></div>
+    <div style="width:${esc(value)};height:24px;background:repeating-linear-gradient(45deg,#e0f2fe,#e0f2fe 2px,#bae6fd 2px,#bae6fd 4px);"></div>
+    <div style="width:16px;height:24px;background:#cbd5e1;border-radius:0 2px 2px 0;"></div>
+  </div>
+  <div style="font-size:10px;color:#888;font-family:monospace;">${esc(value)}</div>
+</div>`)
+    }
+  };
+}
+function buildRoundedItem(name, value, category) {
+  return {
+    id: `design-system:rounded-${name}`,
+    ...PLUGIN_ATTRS,
+    title: name,
+    category,
+    subCategory: "Rounded",
+    browse: { size: "small" },
+    prompt: `Use border-radius token "${name}" with value ${value} from DESIGN.md.`,
+    interaction: {
+      mode: "stage-place",
+      stagePromptTemplate: `Apply the border-radius token "${name}" (${value}) from DESIGN.md at this location.`
+    },
+    presentation: {
+      type: "html-fragment",
+      html: scopedFragment(`<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:sans-serif;height:100%;">
+  <div style="width:40px;height:40px;border-radius:${esc(value)};background:#e2e8f0;border:1.5px solid #94a3b8;"></div>
+  <div style="font-size:10px;color:#888;font-family:monospace;">${esc(value)}</div>
+</div>`)
+    }
+  };
+}
+function formatTypographyCssValue(value) {
+  return String(value);
+}
+function buildTypographyItem(name, typography, category) {
+  const parts = [];
+  if (typography.fontFamily) parts.push(typography.fontFamily);
+  if (typography.fontSize) parts.push(typography.fontSize);
+  if (typography.fontWeight != null) {
+    parts.push(`weight ${formatTypographyCssValue(typography.fontWeight)}`);
+  }
+  if (typography.lineHeight != null) {
+    parts.push(`line-height ${formatTypographyCssValue(typography.lineHeight)}`);
+  }
+  if (typography.letterSpacing) parts.push(`letter-spacing ${typography.letterSpacing}`);
+  const desc = parts.join(", ");
+  const styles = [];
+  if (typography.fontFamily) styles.push(`font-family:${typography.fontFamily},sans-serif`);
+  if (typography.fontSize) styles.push(`font-size:${typography.fontSize}`);
+  if (typography.fontWeight != null) {
+    styles.push(`font-weight:${formatTypographyCssValue(typography.fontWeight)}`);
+  }
+  if (typography.lineHeight != null) {
+    styles.push(`line-height:${formatTypographyCssValue(typography.lineHeight)}`);
+  }
+  if (typography.letterSpacing) styles.push(`letter-spacing:${typography.letterSpacing}`);
+  const isLargeFont = isLargeFontSize(typography.fontSize);
+  return {
+    id: `design-system:typography-${name}`,
+    ...PLUGIN_ATTRS,
+    title: name,
+    category,
+    subCategory: "Typography",
+    prompt: `Apply typography preset "${name}" from DESIGN.md: ${desc}.`,
+    interaction: {
+      mode: "stage-place",
+      stagePromptTemplate: `Apply the typography preset "${name}" (${desc}) from DESIGN.md at this location.`
+    },
+    ...isLargeFont ? { browse: { size: "large" } } : {},
+    presentation: {
+      type: "html-fragment",
+      html: scopedFragment(`<div style="font-family:sans-serif;">
+  <div style="${styles.join(";")};margin:0;">The quick brown fox</div>
+  <div style="font-size:10px;color:#888;margin-top:6px;font-family:monospace;">${esc(name)}: ${esc(desc)}</div>
+</div>`)
+    }
+  };
+}
+function parseAddMenuItemId(id) {
+  const match = id.match(
+    /^design-system:(color|spacing|rounded|typography|breakpoint|animation|component)-(.+)$/
+  );
+  if (!match) {
+    return { kind: "unknown", tokenName: id };
+  }
+  return { kind: match[1], tokenName: match[2] };
+}
+function extractQuotedValue(prompt, label) {
+  const pattern = new RegExp(
+    `${label}\\s+"([^"]+)"\\s+with value\\s+(.+?)\\s+from DESIGN\\.md`,
+    "i"
+  );
+  const match = prompt.match(pattern);
+  if (!match) return void 0;
+  return match[2].trim().replace(/\.$/, "");
+}
+function extractTypographyFromPrompt(prompt) {
+  const nameMatch = prompt.match(/typography preset "([^"]+)"/i);
+  const afterColon = prompt.split(":").slice(1).join(":").replace(/\.\s*$/, "").trim();
+  const edit = {};
+  const fontFamilyMatch = afterColon.match(/([^,]+),\s*[\d.]+(?:px|rem|em)/);
+  if (fontFamilyMatch) {
+    edit.fontFamily = fontFamilyMatch[1].trim();
+  }
+  const fontSizeMatch = afterColon.match(/([\d.]+(?:px|rem|em|vw|vh|%|clamp\([^)]+\)))/);
+  if (fontSizeMatch) {
+    edit.fontSize = fontSizeMatch[1];
+  }
+  const weightMatch = afterColon.match(/weight\s+(\d+)/i);
+  if (weightMatch) {
+    edit.fontWeight = weightMatch[1];
+  }
+  const lineHeightMatch = afterColon.match(/line-height\s+([^,]+)/i);
+  if (lineHeightMatch) {
+    edit.lineHeight = lineHeightMatch[1].trim();
+  }
+  const letterSpacingMatch = afterColon.match(/letter-spacing\s+([^,]+)/i);
+  if (letterSpacingMatch) {
+    edit.letterSpacing = letterSpacingMatch[1].trim();
+  }
+  if (!nameMatch && Object.keys(edit).length === 0) {
+    return { fontSize: "16px", fontWeight: "400" };
+  }
+  return edit;
+}
+function extractAddMenuItemEditorFields(item) {
+  const { kind, tokenName } = parseAddMenuItemId(item.id);
+  const base = {
+    kind,
+    tokenName,
+    title: item.title,
+    tokenValue: "",
+    fontSize: "",
+    fontWeight: "",
+    fontFamily: "",
+    editable: false,
+    readOnlyReason: ""
+  };
+  switch (kind) {
+    case "color":
+      return {
+        ...base,
+        editable: true,
+        tokenValue: extractQuotedValue(item.prompt, "color token") ?? extractColorFromPresentation(item) ?? ""
+      };
+    case "spacing":
+      return {
+        ...base,
+        editable: true,
+        tokenValue: extractQuotedValue(item.prompt, "spacing token") ?? ""
+      };
+    case "rounded":
+      return {
+        ...base,
+        editable: true,
+        tokenValue: extractQuotedValue(item.prompt, "border-radius token") ?? ""
+      };
+    case "typography": {
+      const typography = extractTypographyFromPrompt(item.prompt);
+      return {
+        ...base,
+        editable: true,
+        fontFamily: typography.fontFamily ?? "",
+        fontSize: typography.fontSize ?? "",
+        fontWeight: typography.fontWeight != null ? String(typography.fontWeight) : ""
+      };
+    }
+    case "breakpoint":
+    case "animation":
+    case "component":
+      return {
+        ...base,
+        editable: false,
+        readOnlyReason: `${kind} items are read-only here — edit DESIGN.md and regenerate the catalog.`
+      };
+    default:
+      return {
+        ...base,
+        editable: false,
+        readOnlyReason: "This item type cannot be edited in the settings panel."
+      };
+  }
+}
+function extractColorFromPresentation(item) {
+  if (item.presentation?.type !== "html-fragment") return void 0;
+  const match = item.presentation.html.match(/background:([^;"]+)/);
+  return match?.[1]?.trim();
+}
+function patchAddMenuItem(item, patch) {
+  const { kind, tokenName } = parseAddMenuItemId(item.id);
+  const category = item.category;
+  const title = patch.title ?? item.title;
+  switch (kind) {
+    case "color": {
+      const value = patch.tokenValue ?? extractQuotedValue(item.prompt, "color token") ?? "";
+      const rebuilt = buildColorItem(tokenName, value, category);
+      return { ...rebuilt, title };
+    }
+    case "spacing": {
+      const value = patch.tokenValue ?? extractQuotedValue(item.prompt, "spacing token") ?? "";
+      const rebuilt = buildSpacingItem(tokenName, value, category);
+      return { ...rebuilt, title };
+    }
+    case "rounded": {
+      const value = patch.tokenValue ?? extractQuotedValue(item.prompt, "border-radius token") ?? "";
+      const rebuilt = buildRoundedItem(tokenName, value, category);
+      return { ...rebuilt, title };
+    }
+    case "typography": {
+      const current = extractTypographyFromPrompt(item.prompt);
+      const rebuilt = buildTypographyItem(
+        tokenName,
+        {
+          fontFamily: patch.fontFamily ?? current.fontFamily,
+          fontSize: patch.fontSize ?? current.fontSize,
+          fontWeight: patch.fontWeight ?? current.fontWeight,
+          lineHeight: current.lineHeight,
+          letterSpacing: current.letterSpacing
+        },
+        category
+      );
+      return { ...rebuilt, title };
+    }
+    default:
+      return { ...item, title };
+  }
+}
+function getAddMenuItemPreviewHtml(item) {
+  if (item.presentation?.type === "html-fragment") {
+    return item.presentation.html;
+  }
+  return '<div style="padding:12px;color:#64748b;font-family:sans-serif;font-size:13px;">No preview for this item.</div>';
+}
+function serializeAddMenuCatalogForCompare(items) {
+  return JSON.stringify(items);
+}
+createActionCaller("designSystem.getDesignSystemSettingsStatus", "GET");
+const runDesignSystemAnalysisAction = createActionCaller("designSystem.runDesignSystemAnalysis", "GET");
+const loadDesignSystemAddMenuCatalog = createActionCaller("designSystem.loadAddMenuCatalog", "GET");
+const saveDesignSystemAddMenuCatalog = createActionCaller("designSystem.saveAddMenuCatalog", "POST");
+const regenerateDesignSystemAddMenu = createActionCaller("designSystem.regenerateDesignSystemAddMenu", "GET");
+function buildDesignAnalysisAgentPrompt(result) {
+  const lines = [
+    "Fix design-system validation findings in this Jay project.",
+    "",
+    `Scanned ${result.filesScanned} .jay-html file(s).`,
+    `Errors: ${result.errorCount}, warnings: ${result.warningCount}.`,
+    "",
+    "Use DESIGN.md tokens and component specs. Prefer design tokens over hardcoded CSS values.",
+    ""
+  ];
+  if (result.findings.length === 0) {
+    lines.push("No design-system findings — project conforms to DESIGN.md.");
+    return lines.join("\n");
+  }
+  const byFile = /* @__PURE__ */ new Map();
+  for (const finding of result.findings) {
+    const group = byFile.get(finding.file) ?? [];
+    group.push(finding);
+    byFile.set(finding.file, group);
+  }
+  for (const [file, fileFindings] of byFile) {
+    lines.push(`## ${file}`);
+    for (const finding of fileFindings) {
+      const prefix = finding.severity === "error" ? "ERROR" : "WARN";
+      lines.push(`- [${prefix}] (${finding.validator}) ${finding.message}`);
+      if (finding.suggestion) {
+        lines.push(`  Suggestion: ${finding.suggestion}`);
+      }
+    }
+    lines.push("");
+  }
+  return lines.join("\n").trimEnd();
+}
+function notifyAddMenuChanged() {
+  window.parent.postMessage({ type: "aiditor:addMenuCatalogChanged" }, window.location.origin);
+}
+function formatReportBody(result) {
+  if (result.findings.length === 0) {
+    return "No design-system findings.";
+  }
+  const lines = [];
+  let currentFile = "";
+  for (const finding of result.findings) {
+    if (finding.file !== currentFile) {
+      currentFile = finding.file;
+      lines.push(`
+${currentFile}`);
+    }
+    const prefix = finding.severity === "error" ? "ERROR" : "WARN";
+    lines.push(`  [${prefix}] (${finding.validator}) ${finding.message}`);
+    if (finding.suggestion) {
+      lines.push(`    → ${finding.suggestion}`);
+    }
+  }
+  return lines.join("\n").trim();
+}
+function listRowClass(itemId, selectedId) {
+  return itemId === selectedId ? "catalog-item catalog-item--selected" : "catalog-item";
+}
+function settingsPageConstructor(_props, refs, _fastViewState) {
+  const [statusMessage, setStatusMessage] = createSignal("");
+  const [statusTone, setStatusTone] = createSignal("info");
+  const [showStatusMessage, setShowStatusMessage] = createSignal(false);
+  const [catalogLoading, setCatalogLoading] = createSignal(true);
+  const [showNoCatalog, setShowNoCatalog] = createSignal(false);
+  const [draftItems, setDraftItems] = createSignal([]);
+  const [savedSnapshot, setSavedSnapshot] = createSignal("");
+  const [selectedId, setSelectedId] = createSignal(null);
+  const [editorTitle, setEditorTitle] = createSignal("");
+  const [editorSubCategory, setEditorSubCategory] = createSignal("");
+  const [editorTokenValue, setEditorTokenValue] = createSignal("");
+  const [editorFontSize, setEditorFontSize] = createSignal("");
+  const [editorFontWeight, setEditorFontWeight] = createSignal("");
+  const [editorFontFamily, setEditorFontFamily] = createSignal("");
+  const [showTypographyFields, setShowTypographyFields] = createSignal(false);
+  const [showTokenValueField, setShowTokenValueField] = createSignal(false);
+  const [editorReadOnly, setEditorReadOnly] = createSignal(false);
+  const [editorReadOnlyReason, setEditorReadOnlyReason] = createSignal("");
+  const [showAnalysisSection, setShowAnalysisSection] = createSignal(false);
+  const [showReport, setShowReport] = createSignal(false);
+  const [reportSummary, setReportSummary] = createSignal("");
+  const [reportBody, setReportBody] = createSignal("");
+  let lastAnalysis = null;
+  let syncingEditorFromSelection = false;
+  const unsavedChangeCount = createMemo(() => {
+    const draft = draftItems();
+    const saved = savedSnapshot();
+    if (!saved)
+      return 0;
+    return serializeAddMenuCatalogForCompare(draft) === saved ? 0 : 1;
+  });
+  const addMenuListRows = createMemo(() => {
+    const selected = selectedId();
+    return draftItems().map((item) => ({
+      rowKey: item.id,
+      itemId: item.id,
+      title: item.title,
+      subCategory: item.subCategory ?? "Other",
+      rowClass: listRowClass(item.id, selected)
+    }));
+  });
+  const showAddMenuEditor = createMemo(() => selectedId() !== null);
+  const saveDisabled = createMemo(() => catalogLoading() || unsavedChangeCount() === 0 || draftItems().length === 0);
+  const discardDisabled = createMemo(() => catalogLoading() || unsavedChangeCount() === 0 || draftItems().length === 0);
+  const saveButtonLabel = createMemo(() => "Save and sync");
+  function updatePreview() {
+    const item = draftItems().find((entry) => entry.id === selectedId());
+    if (!item)
+      return;
+    const html = getAddMenuItemPreviewHtml(item);
+    refs.previewHost.exec$((element) => {
+      element.innerHTML = html;
+    });
+  }
+  function loadEditorFieldsFromItem(item) {
+    syncingEditorFromSelection = true;
+    const fields = extractAddMenuItemEditorFields(item);
+    setEditorTitle(fields.title);
+    setEditorSubCategory(item.subCategory ?? "");
+    setEditorTokenValue(fields.tokenValue);
+    setEditorFontSize(fields.fontSize);
+    setEditorFontWeight(fields.fontWeight);
+    setEditorFontFamily(fields.fontFamily);
+    setShowTypographyFields(fields.kind === "typography");
+    setShowTokenValueField(fields.kind === "color" || fields.kind === "spacing" || fields.kind === "rounded");
+    setEditorReadOnly(!fields.editable);
+    setEditorReadOnlyReason(fields.readOnlyReason);
+    syncingEditorFromSelection = false;
+    updatePreview();
+  }
+  function applyEditorPatchToDraft() {
+    if (syncingEditorFromSelection || editorReadOnly())
+      return;
+    const currentId = selectedId();
+    if (!currentId)
+      return;
+    setDraftItems((items) => items.map((item) => {
+      if (item.id !== currentId)
+        return item;
+      return patchAddMenuItem(item, {
+        title: editorTitle(),
+        tokenValue: editorTokenValue(),
+        fontSize: editorFontSize(),
+        fontWeight: editorFontWeight(),
+        fontFamily: editorFontFamily()
+      });
+    }));
+    updatePreview();
+  }
+  function selectItem(itemId) {
+    setSelectedId(itemId);
+    const item = draftItems().find((entry) => entry.id === itemId);
+    if (item) {
+      loadEditorFieldsFromItem(item);
+    }
+  }
+  async function loadCatalog() {
+    setCatalogLoading(true);
+    try {
+      const result = await loadDesignSystemAddMenuCatalog({});
+      const items = result.items;
+      setDraftItems(items);
+      const snapshot = serializeAddMenuCatalogForCompare(items);
+      setSavedSnapshot(snapshot);
+      setShowNoCatalog(items.length === 0);
+      if (items.length > 0) {
+        selectItem(items[0].id);
+      } else {
+        setSelectedId(null);
+      }
+    } catch (error) {
+      setShowNoCatalog(true);
+      setStatusMessage(error instanceof Error ? error.message : "Failed to load add-menu catalog.");
+      setStatusTone("error");
+      setShowStatusMessage(true);
+    } finally {
+      setCatalogLoading(false);
+    }
+  }
+  createEffect(() => {
+    void loadCatalog();
+  });
+  refs.catalogList.onclick(({ event }) => {
+    const target = event.target?.closest("[data-catalog-item]");
+    if (!target)
+      return;
+    const itemId = target.getAttribute("data-catalog-item");
+    if (itemId) {
+      selectItem(itemId);
+    }
+  });
+  refs.editorTitleInput.oninput(({ event }) => {
+    setEditorTitle(event.target.value);
+    applyEditorPatchToDraft();
+  });
+  refs.editorTokenValueInput.oninput(({ event }) => {
+    setEditorTokenValue(event.target.value);
+    applyEditorPatchToDraft();
+  });
+  refs.editorFontSizeInput.oninput(({ event }) => {
+    setEditorFontSize(event.target.value);
+    applyEditorPatchToDraft();
+  });
+  refs.editorFontWeightInput.oninput(({ event }) => {
+    setEditorFontWeight(event.target.value);
+    applyEditorPatchToDraft();
+  });
+  refs.editorFontFamilyInput.oninput(({ event }) => {
+    setEditorFontFamily(event.target.value);
+    applyEditorPatchToDraft();
+  });
+  refs.saveCatalogBtn.onclick(async () => {
+    setStatusMessage("Saving add-menu catalog…");
+    setStatusTone("info");
+    setShowStatusMessage(true);
+    try {
+      const result = await saveDesignSystemAddMenuCatalog({ items: draftItems() });
+      setSavedSnapshot(serializeAddMenuCatalogForCompare(draftItems()));
+      setStatusMessage(result.message);
+      setStatusTone("success");
+      notifyAddMenuChanged();
+    } catch (error) {
+      setStatusMessage(error instanceof Error ? error.message : "Save failed.");
+      setStatusTone("error");
+    }
+  });
+  refs.discardCatalogBtn.onclick(() => {
+    const saved = savedSnapshot();
+    if (!saved)
+      return;
+    const items = JSON.parse(saved);
+    setDraftItems(items);
+    const currentId = selectedId();
+    const nextItem = items.find((item) => item.id === currentId) ?? items[0];
+    if (nextItem) {
+      selectItem(nextItem.id);
+    }
+    setStatusMessage("Discarded unsaved changes.");
+    setStatusTone("info");
+    setShowStatusMessage(true);
+  });
+  refs.regenerateCatalogBtn.onclick(async () => {
+    if (unsavedChangeCount() > 0) {
+      setStatusMessage("Save or discard your changes before regenerating from DESIGN.md.");
+      setStatusTone("warning");
+      setShowStatusMessage(true);
+      return;
+    }
+    setStatusMessage("Regenerating add-menu catalog from DESIGN.md…");
+    setStatusTone("info");
+    setShowStatusMessage(true);
+    try {
+      const result = await regenerateDesignSystemAddMenu({});
+      await loadCatalog();
+      setStatusMessage(result.message);
+      setStatusTone("success");
+      notifyAddMenuChanged();
+    } catch (error) {
+      setStatusMessage(error instanceof Error ? error.message : "Regenerate failed.");
+      setStatusTone("error");
+    }
+  });
+  refs.toggleAnalysisBtn.onclick(() => {
+    setShowAnalysisSection((value) => !value);
+  });
+  refs.runAnalysisBtn.onclick(async () => {
+    setStatusMessage("Running design-system analysis…");
+    setStatusTone("info");
+    setShowStatusMessage(true);
+    try {
+      const result = await runDesignSystemAnalysisAction({});
+      lastAnalysis = result;
+      setShowReport(true);
+      setReportSummary(`Scanned ${result.filesScanned} file(s) — ${result.errorCount} error(s), ${result.warningCount} warning(s).`);
+      setReportBody(formatReportBody(result));
+      setStatusMessage("Analysis complete.");
+      setStatusTone(result.errorCount > 0 ? "error" : result.warningCount > 0 ? "warning" : "success");
+    } catch (error) {
+      setShowReport(false);
+      setStatusMessage(error instanceof Error ? error.message : "Analysis failed.");
+      setStatusTone("error");
+    }
+  });
+  refs.sendToAgentBtn.onclick(() => {
+    if (!lastAnalysis || lastAnalysis.findings.length === 0) {
+      setStatusMessage("Run analysis first and ensure there are findings to send.");
+      setStatusTone("warning");
+      setShowStatusMessage(true);
+      return;
+    }
+    window.parent.postMessage({
+      type: "aiditor:submitAgentTask",
+      prompt: buildDesignAnalysisAgentPrompt(lastAnalysis),
+      context: {
+        pageRoute: "/",
+        renderedUrl: window.location.origin
+      }
+    }, window.location.origin);
+  });
+  return {
+    render: () => ({
+      statusMessage: statusMessage(),
+      statusTone: statusTone(),
+      showStatusMessage: showStatusMessage(),
+      catalogLoading: catalogLoading(),
+      showNoCatalog: showNoCatalog(),
+      addMenuListRows: addMenuListRows(),
+      showAddMenuEditor: showAddMenuEditor(),
+      editorTitle: editorTitle(),
+      editorSubCategory: editorSubCategory(),
+      editorTokenValue: editorTokenValue(),
+      editorFontSize: editorFontSize(),
+      editorFontWeight: editorFontWeight(),
+      editorFontFamily: editorFontFamily(),
+      showTypographyFields: showTypographyFields(),
+      showTokenValueField: showTokenValueField(),
+      editorReadOnly: editorReadOnly(),
+      editorReadOnlyReason: editorReadOnlyReason(),
+      unsavedChangeCount: unsavedChangeCount(),
+      saveButtonLabel: saveButtonLabel(),
+      saveDisabled: saveDisabled(),
+      discardDisabled: discardDisabled(),
+      showAnalysisSection: showAnalysisSection(),
+      showReport: showReport(),
+      reportSummary: reportSummary(),
+      reportBody: reportBody()
+    })
+  };
+}
+const designSystemSettingsPage = makeJayStackComponent().withProps().withInteractive(settingsPageConstructor);
+export {
+  designSystemSettingsPage
+};