@ompo-design/mcp-server 0.1.9 → 0.1.10

package/dist/apply-plan.js

@@ -2,8 +2,99 @@ 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.`
 };
+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.textSnippet)
+        parts.push(`"${anchor.textSnippet}"`);
+    return parts.join(' ');
+}
+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 !== '')
@@ -199,32 +290,8 @@ function buildDomStructurePlan(operation) {
                     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
-                }
-            };
-        }
+        case 'dom.move':
+            return buildDomMovePlan(operation);
         case 'dom.delete':
             return {
                 kind: 'dom.delete',
@@ -295,6 +362,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,6 +393,8 @@ 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.',
             'Prefer the smallest possible diff for each file.'
@@ -329,6 +406,7 @@ 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 domCount = bundle.operations.length - styleCount - textCount;
     const scopeLabel = bundle.scope.mode === 'subtree' && bundle.scope.rootLabel
         ? `${bundle.scope.rootLabel} and its children`
@@ -342,6 +420,9 @@ 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)`);
+    }
     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.10';
 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.10+');
     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.10'
 });
 function requireEditsStore() {
     const storePath = getOmpoEditsStorePath();

package/dist/types.d.ts

@@ -23,6 +23,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';

package/package.json

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