@ompo-design/mcp-server 0.1.10 → 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

@@ -3,7 +3,11 @@ const OMPO_GLOSSARY = {
     fill: `Ompo "Fill" means an element should expand to consume free space inside its parent. Fill is NOT a CSS property — read \`widthMode: fill\` / \`heightMode: fill\` together with \`ensureParentFlex\`, \`flexGrow\`, \`flexShrink\`, \`flexBasis\`, and \`alignSelf\` on the same selector. Parent must be \`display: flex\`. Main axis (direction of flex): use \`flex: 1 1 0\` (grow/shrink/basis). Cross axis: use \`align-self: stretch\` and remove fixed width/height on that axis. If \`ensureParentFlex\` is present, make the parent a flex container with that direction first.`,
     fit: `Ompo "Fit" means size to content. Map \`widthMode: fit\` → \`width: fit-content\`, \`heightMode: fit\` → \`height: fit-content\` (or the project's equivalent).`,
     imageFill: `Ompo image background fill: copy the source file from \`backgroundImageSource\` into the project (e.g. public/images/), then set \`background-image\` to a project-relative url(), with \`background-size: cover\`, \`background-position: center\`, and \`background-repeat: no-repeat\`. Do not commit file:// URLs to source.`,
-    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.`
+    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) {
     const parts = [anchor.tagName];
@@ -14,10 +18,87 @@ function describeAnchor(anchor) {
         if (classes)
             parts.push(`.${classes}`);
     }
+    if (anchor.insertKind === 'icon' && anchor.iconId) {
+        parts.push(`icon:${anchor.iconId}`);
+    }
     if (anchor.textSnippet)
         parts.push(`"${anchor.textSnippet}"`);
     return parts.join(' ');
 }
+function buildDomInsertPlan(operation) {
+    const inserted = operation.insertedElement;
+    const isIcon = operation.insertKind === 'icon';
+    const isText = operation.insertKind === 'text';
+    const steps = [];
+    if (operation.parent) {
+        steps.push(`Locate destination parent: ${describeAnchor(operation.parent)}.`);
+    }
+    else {
+        steps.push(`Locate parent "${operation.parentSelector}" in source.`);
+    }
+    if (inserted) {
+        steps.push(`New element anchor: ${describeAnchor(inserted)} (selector: "${inserted.selector}").`);
+    }
+    else if (operation.selector) {
+        steps.push(`Inserted element selector: "${operation.selector}".`);
+    }
+    if (isText) {
+        steps.push(OMPO_GLOSSARY.insertText);
+    }
+    else if (isIcon) {
+        steps.push(OMPO_GLOSSARY.insertIcon);
+        if (operation.iconId) {
+            steps.push(`Iconify id: ${operation.iconId}`);
+        }
+    }
+    steps.push(`Insert at child index ${operation.index}.`);
+    steps.push('Sanitize and adapt the HTML to the project’s component conventions before writing.');
+    const summary = isIcon
+        ? `Insert Iconify icon${operation.iconId ? ` (${operation.iconId})` : ''}`
+        : isText
+            ? 'Insert text block'
+            : 'Insert new element into the page';
+    return {
+        kind: 'dom.insert',
+        summary,
+        steps,
+        payload: {
+            parentSelector: operation.parentSelector,
+            insertIndex: operation.index,
+            html: operation.html,
+            selector: operation.selector,
+            insertKind: operation.insertKind,
+            iconId: operation.iconId,
+            insertedElement: operation.insertedElement,
+            parent: operation.parent
+        }
+    };
+}
+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' : '';
@@ -224,6 +305,14 @@ function styleSuggestionForProperty(property, value, changed) {
                 };
             }
             break;
+        case 'iconStrokeWidth':
+        case 'iconStrokeColor':
+            return {
+                property,
+                value: formatChangedValue(property, value),
+                strategy: 'inline-style',
+                notes: OMPO_GLOSSARY.iconStroke
+            };
     }
     return {
         property,
@@ -275,23 +364,11 @@ function buildDomStructurePlan(operation) {
                 }
             };
         case 'dom.insert':
-            return {
-                kind: 'dom.insert',
-                summary: 'Insert new element into the page',
-                steps: [
-                    `Locate parent "${operation.parentSelector}" in source.`,
-                    `Insert the provided HTML at child index ${operation.index}.`,
-                    'Sanitize and adapt the HTML to the project’s component conventions before writing.'
-                ],
-                payload: {
-                    parentSelector: operation.parentSelector,
-                    insertIndex: operation.index,
-                    html: operation.html,
-                    selector: operation.selector
-                }
-            };
+            return buildDomInsertPlan(operation);
         case 'dom.move':
             return buildDomMovePlan(operation);
+        case 'dom.iconReplace':
+            return buildIconReplacePlan(operation);
         case 'dom.delete':
             return {
                 kind: 'dom.delete',
@@ -396,7 +473,9 @@ export function buildApplyPlan(bundle) {
             'Read ompoGlossary.domMove before applying dom.move operations.',
             '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.',
-            'Use child anchors (tag, id, class, textSnippet) to find elements in source when selectors are unstable.',
+            '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.'
         ],
         ompoGlossary: OMPO_GLOSSARY
@@ -407,6 +486,9 @@ export function explainEdit(bundle) {
     const textCount = bundle.operations.filter((operation) => operation.kind === 'text').length;
     const flexWrapCount = bundle.operations.filter((operation) => operation.kind === 'dom.flexWrap').length;
     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`
@@ -423,6 +505,15 @@ export function explainEdit(bundle) {
     if (moveCount > 0) {
         lines.push(`${moveCount} DOM move${moveCount === 1 ? '' : 's'} — apply via domStructurePlans (markup/children order, not CSS)`);
     }
+    if (textInsertCount > 0) {
+        lines.push(`${textInsertCount} text insert${textInsertCount === 1 ? '' : 's'} — apply via domStructurePlans (markup at parent/index)`);
+    }
+    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.10';
+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.10+');
+    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.10'
+    version: '0.1.12'
 });
 function requireEditsStore() {
     const storePath = getOmpoEditsStorePath();

package/dist/types.d.ts

@@ -15,6 +15,10 @@ export type DomInsertOperation = {
     index: number;
     html: string;
     selector?: string;
+    insertKind?: 'text' | 'icon';
+    iconId?: string;
+    insertedElement?: ElementAnchor;
+    parent?: ElementAnchor;
 };
 export type DomMoveOperation = {
     kind: 'dom.move';
@@ -34,12 +38,21 @@ 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;
     id?: string;
     className?: string;
     textSnippet?: string;
+    insertKind?: 'text' | 'icon';
+    iconId?: string;
 };
 export type DomFlexWrapOperation = {
     kind: 'dom.flexWrap';
@@ -56,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.10",
+  "version": "0.1.12",
   "description": "MCP server for applying Ompo visual edits to a codebase",
   "type": "module",
   "license": "MIT",