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

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.5'
+    version: '0.1.6'
 });
 function requireEditsStore() {
     const storePath = getOmpoEditsStorePath();

package/package.json

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