@ompo-design/mcp-server 0.1.11 → 0.1.12

package/dist/apply-plan.d.ts

@@ -11,7 +11,7 @@ export type ApplyPlanFile = {
     layoutIntent?: string;
 };
 export type DomStructurePlan = {
-    kind: 'dom.insert' | 'dom.move' | 'dom.delete' | 'dom.flexWrap';
+    kind: 'dom.insert' | 'dom.move' | 'dom.delete' | 'dom.flexWrap' | 'dom.iconReplace';
     summary: string;
     steps: string[];
     payload: Record<string, unknown>;

package/dist/apply-plan.js

@@ -6,6 +6,7 @@ const OMPO_GLOSSARY = {
     domMove: `Ompo DOM move: reorder or reparent elements in source markup/components. Use movedElement anchors (tag, id, class, textSnippet) to find nodes. destinationChildren is the authoritative sibling order after the move — match this order in JSX/HTML or reorder mapped arrays. CSS alone cannot satisfy a dom.move.`,
     insertText: `Ompo text insert: the user added a new text block (usually <p>). insertedElement carries insertKind "text", a stable data-ompo-insert-id selector, and textSnippet for the current copy. Apply as markup or a text component at parent/index; check separate text operations for edits after insert.`,
     insertIcon: `Ompo icon insert: the user added an Iconify icon (span.ompo-insert-icon) or editable SVG. iconId is the Iconify name (e.g. lucide:home) when known. Prefer the project's icon library or @iconify/react with that id instead of inlining raw SVG when possible. Size, fill color, and stroke changes appear as style operations on the same stable data-ompo-insert-id or data-ompo-icon-id selector.`,
+    replaceIcon: `Ompo icon replace: the user swapped an existing icon/SVG to a different Iconify icon. Update the project's icon component or @iconify/react usage to the new iconId — do not only patch inline SVG unless the project already inlines icons.`,
     iconStroke: `Ompo icon/SVG stroke: iconStrokeWidth sets stroke-width on the inner SVG; iconStrokeColor sets stroke (often currentColor). Applies to inserted icons and native SVG elements selected in Ompo.`
 };
 function describeAnchor(anchor) {
@@ -73,6 +74,31 @@ function buildDomInsertPlan(operation) {
         }
     };
 }
+function buildIconReplacePlan(operation) {
+    const steps = [];
+    if (operation.element) {
+        steps.push(`Locate icon element: ${describeAnchor(operation.element)} (selector: "${operation.selector}").`);
+    }
+    else {
+        steps.push(`Locate icon element "${operation.selector}" in source.`);
+    }
+    steps.push(OMPO_GLOSSARY.replaceIcon);
+    steps.push(`Set Iconify id to ${operation.iconId}.`);
+    if (operation.previousIconId) {
+        steps.push(`Previous icon id: ${operation.previousIconId}`);
+    }
+    return {
+        kind: 'dom.iconReplace',
+        summary: `Replace icon with ${operation.iconId}`,
+        steps,
+        payload: {
+            selector: operation.selector,
+            iconId: operation.iconId,
+            previousIconId: operation.previousIconId,
+            element: operation.element
+        }
+    };
+}
 function formatChildOrder(children, movedSelector) {
     return children.map((child, index) => {
         const marker = child.selector === movedSelector ? ' ← moved element' : '';
@@ -341,6 +367,8 @@ function buildDomStructurePlan(operation) {
             return buildDomInsertPlan(operation);
         case 'dom.move':
             return buildDomMovePlan(operation);
+        case 'dom.iconReplace':
+            return buildIconReplacePlan(operation);
         case 'dom.delete':
             return {
                 kind: 'dom.delete',
@@ -446,6 +474,7 @@ export function buildApplyPlan(bundle) {
             'For dom.move: destinationChildren is the structural snapshot of the final sibling order — match it in JSX/HTML or reorder mapped arrays.',
             'For dom.flexWrap: create a new wrapper, move matched children, then apply wrapperStyles.',
             'For dom.insert with insertKind text or icon: read ompoGlossary.insertText / insertIcon; use insertedElement anchors and iconId when applying.',
+            'For dom.iconReplace: read ompoGlossary.replaceIcon; update the project icon to the new iconId.',
             'Use child anchors (tag, id, class, textSnippet, insertKind, iconId) to find elements in source when selectors are unstable.',
             'Prefer the smallest possible diff for each file.'
         ],
@@ -459,6 +488,7 @@ export function explainEdit(bundle) {
     const moveCount = bundle.operations.filter((operation) => operation.kind === 'dom.move').length;
     const textInsertCount = bundle.operations.filter((operation) => operation.kind === 'dom.insert' && operation.insertKind === 'text').length;
     const iconInsertCount = bundle.operations.filter((operation) => operation.kind === 'dom.insert' && operation.insertKind === 'icon').length;
+    const iconReplaceCount = bundle.operations.filter((operation) => operation.kind === 'dom.iconReplace').length;
     const domCount = bundle.operations.length - styleCount - textCount;
     const scopeLabel = bundle.scope.mode === 'subtree' && bundle.scope.rootLabel
         ? `${bundle.scope.rootLabel} and its children`
@@ -481,6 +511,9 @@ export function explainEdit(bundle) {
     if (iconInsertCount > 0) {
         lines.push(`${iconInsertCount} icon insert${iconInsertCount === 1 ? '' : 's'} — map iconId to project icons when possible`);
     }
+    if (iconReplaceCount > 0) {
+        lines.push(`${iconReplaceCount} icon replace${iconReplaceCount === 1 ? '' : 's'} — update iconId via domStructurePlans`);
+    }
     lines.push(`Source preview: ${bundle.source.url}`);
     return lines.join('\n');
 }

package/dist/cli.js

@@ -7,7 +7,7 @@ import { getOmpoEditsStorePath } from './edits-path.js';
 import { readOmpoMcpSession } from './session.js';
 import { readMcpTokenBalance } from './tokens.js';
 const PACKAGE_NAME = '@ompo-design/mcp-server';
-const PACKAGE_VERSION = '0.1.11';
+const PACKAGE_VERSION = '0.1.12';
 const SERVER_NAME = 'ompo';
 function resolveExecutable(name) {
     try {
@@ -187,7 +187,7 @@ async function runDoctor() {
         console.log('Edits: none yet (click Send in Ompo first)');
     }
     console.log('');
-    console.log('If tools skip token usage, quit and reopen Claude Code to reload MCP v0.1.11+');
+    console.log('If tools skip token usage, quit and reopen Claude Code to reload MCP v0.1.12+');
     console.log('Global install: npx @ompo-design/mcp-server setup-global');
 }
 function printProjectNextSteps(projectRoot) {

package/dist/index.js

@@ -10,7 +10,7 @@ import { getOmpoEditsStorePath } from './edits-path.js';
 import { McpTokenError } from './tokens.js';
 const server = new McpServer({
     name: 'ompo-mcp-server',
-    version: '0.1.11'
+    version: '0.1.12'
 });
 function requireEditsStore() {
     const storePath = getOmpoEditsStorePath();

package/dist/types.d.ts

@@ -38,6 +38,13 @@ export type DomDeleteOperation = {
     kind: 'dom.delete';
     selector: string;
 };
+export type DomIconReplaceOperation = {
+    kind: 'dom.iconReplace';
+    selector: string;
+    iconId: string;
+    previousIconId?: string;
+    element?: ElementAnchor;
+};
 export type ElementAnchor = {
     selector: string;
     tagName: string;
@@ -62,7 +69,7 @@ export type TextOperation = {
     textContent?: string;
     innerHTML?: string;
 };
-export type OmpoOperation = StyleOperation | DomInsertOperation | DomMoveOperation | DomDeleteOperation | DomFlexWrapOperation | TextOperation;
+export type OmpoOperation = StyleOperation | DomInsertOperation | DomMoveOperation | DomDeleteOperation | DomIconReplaceOperation | DomFlexWrapOperation | TextOperation;
 export type OmpoEditBundle = {
     schemaVersion: number;
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ompo-design/mcp-server",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "MCP server for applying Ompo visual edits to a codebase",
   "type": "module",
   "license": "MIT",