@ompo-design/mcp-server 0.1.4 → 0.1.6

package/dist/apply-plan.js

@@ -1,7 +1,8 @@
 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).`
+    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.`
 };
 function formatChangedValue(property, value) {
     const text = String(value);
@@ -103,6 +104,35 @@ function styleSuggestionForProperty(property, value, changed) {
                 strategy: 'css-rule',
                 notes: 'Supporting constraint for Ompo Fill sizing. max-width/max-height: none allows the element to grow.'
             };
+        case 'backgroundImageSource':
+            return {
+                property,
+                value: formatChangedValue(property, value),
+                strategy: 'component-markup',
+                notes: `${OMPO_GLOSSARY.imageFill} Read this file from the user's machine (${String(value)}), copy it into the repo, and reference the copied asset in CSS.`
+            };
+        case 'backgroundImage':
+            if (changed.backgroundImageSource) {
+                return {
+                    property,
+                    value: formatChangedValue(property, value),
+                    strategy: 'css-rule',
+                    notes: `${OMPO_GLOSSARY.imageFill} Apply after copying the file from backgroundImageSource.`
+                };
+            }
+            break;
+        case 'backgroundSize':
+        case 'backgroundPosition':
+        case 'backgroundRepeat':
+            if (changed.backgroundImageSource) {
+                return {
+                    property,
+                    value: formatChangedValue(property, value),
+                    strategy: 'css-rule',
+                    notes: `Part of Ompo image background fill (${OMPO_GLOSSARY.imageFill}).`
+                };
+            }
+            break;
     }
     return {
         property,
@@ -169,23 +199,32 @@ function buildDomStructurePlan(operation) {
                     selector: operation.selector
                 }
             };
-        case 'dom.move':
+        case 'dom.move': {
+            const reordered = operation.fromParentSelector === operation.toParentSelector;
             return {
                 kind: 'dom.move',
-                summary: 'Move an existing element to a new parent',
+                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 and surrounding structure.`,
-                    `Move it from "${operation.fromParentSelector}" (index ${operation.fromIndex}) to "${operation.toParentSelector}" at index ${operation.index}.`,
-                    'Preserve the element’s content and non-Ompo styling.'
+                    `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
+                    insertIndex: operation.index,
+                    reordered
                 }
             };
+        }
         case 'dom.delete':
             return {
                 kind: 'dom.delete',
@@ -278,6 +317,7 @@ export function buildApplyPlan(bundle) {
             'Read ompoGlossary.fill and ompoGlossary.gap before applying layout changes — Ompo terms are not literal CSS properties.',
             '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.',
             '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.'

package/dist/index.js

@@ -8,7 +8,7 @@ import { editsStoreReady, listEdits, readEditBundle, recordEditApplied, recordEd
 import { getOmpoEditsStorePath } from './edits-path.js';
 const server = new McpServer({
     name: 'ompo-mcp-server',
-    version: '0.1.4'
+    version: '0.1.6'
 });
 function requireEditsStore() {
     const storePath = getOmpoEditsStorePath();

package/package.json

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