@ompo-design/mcp-server 0.1.9 → 0.1.11

package/dist/apply-plan.js

@@ -2,8 +2,154 @@ const OMPO_GLOSSARY = {
     gap: `Ompo "Gap" is the space between children inside a flex or grid container. Apply \`gap\` on the parent layout element (not on children). The parent needs \`display: flex\` or \`display: grid\`. Example: gap "16px" → CSS \`gap: 16px\` or Tailwind \`gap-4\`.`,
     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.`
+    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.`,
+    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.`,
+    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];
+    if (anchor.id)
+        parts.push(`#${anchor.id}`);
+    if (anchor.className) {
+        const classes = anchor.className.split(/\s+/).filter(Boolean).slice(0, 3).join('.');
+        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 formatChildOrder(children, movedSelector) {
+    return children.map((child, index) => {
+        const marker = child.selector === movedSelector ? ' ← moved element' : '';
+        return `${index + 1}. ${describeAnchor(child)}${marker}`;
+    });
+}
+function buildDomMovePlan(operation) {
+    const reordered = operation.fromParentSelector === operation.toParentSelector;
+    const moved = operation.movedElement;
+    const steps = [];
+    if (moved) {
+        steps.push(`Find the moved element in source: ${describeAnchor(moved)}.`);
+    }
+    else {
+        steps.push(`Locate element "${operation.selector}" in source using tag, id, class, or visible text.`);
+    }
+    if (operation.toParent) {
+        steps.push(`Destination parent: ${describeAnchor(operation.toParent)}.`);
+    }
+    else {
+        steps.push(`Destination parent selector: "${operation.toParentSelector}".`);
+    }
+    if (operation.insertBefore) {
+        steps.push(`Place the moved element immediately before: ${describeAnchor(operation.insertBefore)}.`);
+    }
+    else if (operation.destinationChildren && operation.destinationChildren.length > 0) {
+        steps.push('Place the moved element as the last child of the destination parent.');
+    }
+    if (operation.destinationChildren && operation.destinationChildren.length > 0) {
+        steps.push('Match this sibling order in source (structural snapshot after the move):');
+        steps.push(...formatChildOrder(operation.destinationChildren, operation.selector));
+    }
+    else {
+        steps.push(reordered
+            ? `Reorder inside the parent from index ${operation.fromIndex} to index ${operation.index}.`
+            : `Move from "${operation.fromParentSelector}" (index ${operation.fromIndex}) to "${operation.toParentSelector}" at index ${operation.index}.`);
+    }
+    if (operation.fromChildrenBefore && operation.fromChildrenBefore.length > 0) {
+        steps.push('Previous sibling order before the move:');
+        steps.push(...formatChildOrder(operation.fromChildrenBefore, operation.selector));
+    }
+    steps.push('Update JSX/HTML/component structure — this is a markup or children-order change, not CSS.', 'If children come from a mapped array (React .map, v-for, etc.), reorder that array or its data source.', 'Preserve element content and styling that Ompo did not change.');
+    const payload = {
+        selector: operation.selector,
+        fromParentSelector: operation.fromParentSelector,
+        fromIndex: operation.fromIndex,
+        toParentSelector: operation.toParentSelector,
+        insertIndex: operation.index,
+        reordered
+    };
+    if (moved)
+        payload.movedElement = moved;
+    if (operation.fromParent)
+        payload.fromParent = operation.fromParent;
+    if (operation.toParent)
+        payload.toParent = operation.toParent;
+    if (operation.insertBefore)
+        payload.insertBefore = operation.insertBefore;
+    if (operation.destinationChildren) {
+        payload.destinationChildren = operation.destinationChildren;
+    }
+    if (operation.fromChildrenBefore) {
+        payload.fromChildrenBefore = operation.fromChildrenBefore;
+    }
+    return {
+        kind: 'dom.move',
+        summary: moved
+            ? reordered
+                ? `Reorder ${describeAnchor(moved)} within its parent`
+                : `Move ${describeAnchor(moved)} to ${operation.toParent ? describeAnchor(operation.toParent) : operation.toParentSelector}`
+            : reordered
+                ? `Reorder element within parent "${operation.toParentSelector}"`
+                : `Move element to parent "${operation.toParentSelector}"`,
+        steps,
+        payload
+    };
+}
 function formatChangedValue(property, value) {
     const text = String(value);
     if (text !== '')
@@ -133,6 +279,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,
@@ -184,47 +338,9 @@ 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
-                }
-            };
-        case 'dom.move': {
-            const reordered = operation.fromParentSelector === operation.toParentSelector;
-            return {
-                kind: 'dom.move',
-                summary: reordered
-                    ? `Reorder element within parent "${operation.toParentSelector}"`
-                    : `Move element to a new parent "${operation.toParentSelector}"`,
-                steps: [
-                    `Locate element "${operation.selector}" in source using selector, tag, id, class, or nearby text.`,
-                    reordered
-                        ? `Reorder it inside "${operation.toParentSelector}" from child index ${operation.fromIndex} to index ${operation.index}.`
-                        : `Move it from "${operation.fromParentSelector}" (index ${operation.fromIndex}) to "${operation.toParentSelector}" at index ${operation.index}.`,
-                    'Update JSX/HTML/component structure in source — this is a markup change, not a CSS tweak.',
-                    'Preserve the element’s content and non-Ompo styling.',
-                    'If the project uses mapped lists or arrays, update item order in data when that drives rendering.'
-                ],
-                payload: {
-                    selector: operation.selector,
-                    fromParentSelector: operation.fromParentSelector,
-                    fromIndex: operation.fromIndex,
-                    toParentSelector: operation.toParentSelector,
-                    insertIndex: operation.index,
-                    reordered
-                }
-            };
-        }
+            return buildDomInsertPlan(operation);
+        case 'dom.move':
+            return buildDomMovePlan(operation);
         case 'dom.delete':
             return {
                 kind: 'dom.delete',
@@ -295,6 +411,14 @@ export function buildApplyPlan(bundle) {
         if (domPlan)
             domStructurePlans.push(domPlan);
         domChanges.push(operation);
+        if (operation.kind === 'dom.move') {
+            if (!operation.movedElement && operation.selector.includes('nth-of-type')) {
+                warnings.push(`DOM move "${operation.selector}" uses nth-of-type selectors. Re-export from Ompo after rearranging to get richer anchors, or match by visible text and parent structure.`);
+            }
+            else if (operation.movedElement && !operation.movedElement.id && !operation.movedElement.textSnippet) {
+                warnings.push(`DOM move target "${describeAnchor(operation.movedElement)}" has no id or text. Use destinationChildren order and parent context to locate it in source.`);
+            }
+        }
         if (operation.kind === 'dom.flexWrap') {
             for (const child of operation.children) {
                 if (!child.id && !child.className && child.selector.includes('nth-of-type')) {
@@ -318,8 +442,11 @@ export function buildApplyPlan(bundle) {
             'When widthMode or heightMode is "fill", apply the grouped flex properties together (flexGrow, flexBasis, alignSelf, removed width/height) — do not set a fixed px width/height on the filled axis.',
             'Gap belongs on the flex/grid parent. Fill belongs on the child inside a flex parent.',
             'DOM moves are in domStructurePlans and domChanges — reorder or reparent elements in source markup/components, not just CSS.',
+            '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.',
+            '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
@@ -329,6 +456,9 @@ export function explainEdit(bundle) {
     const styleCount = bundle.operations.filter((operation) => operation.kind === 'style').length;
     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 domCount = bundle.operations.length - styleCount - textCount;
     const scopeLabel = bundle.scope.mode === 'subtree' && bundle.scope.rootLabel
         ? `${bundle.scope.rootLabel} and its children`
@@ -342,6 +472,15 @@ export function explainEdit(bundle) {
     if (flexWrapCount > 0) {
         lines.push(`${flexWrapCount} flex-wrap operation${flexWrapCount === 1 ? '' : 's'}`);
     }
+    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`);
+    }
     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.9';
+const PACKAGE_VERSION = '0.1.11';
 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.9+');
+    console.log('If tools skip token usage, quit and reopen Claude Code to reload MCP v0.1.11+');
     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.9'
+    version: '0.1.11'
 });
 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';
@@ -23,6 +27,12 @@ export type DomMoveOperation = {
     fromIndex: number;
     toParentSelector: string;
     index: number;
+    movedElement?: ElementAnchor;
+    fromParent?: ElementAnchor;
+    toParent?: ElementAnchor;
+    insertBefore?: ElementAnchor;
+    destinationChildren?: ElementAnchor[];
+    fromChildrenBefore?: ElementAnchor[];
 };
 export type DomDeleteOperation = {
     kind: 'dom.delete';
@@ -34,6 +44,8 @@ export type ElementAnchor = {
     id?: string;
     className?: string;
     textSnippet?: string;
+    insertKind?: 'text' | 'icon';
+    iconId?: string;
 };
 export type DomFlexWrapOperation = {
     kind: 'dom.flexWrap';

package/package.json

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