@ompo-design/mcp-server 0.1.3 → 0.1.4

package/dist/apply-plan.d.ts

@@ -8,6 +8,7 @@ export type ApplySuggestion = {
 export type ApplyPlanFile = {
     selector: string;
     suggestions: ApplySuggestion[];
+    layoutIntent?: string;
 };
 export type DomStructurePlan = {
     kind: 'dom.insert' | 'dom.move' | 'dom.delete' | 'dom.flexWrap';
@@ -24,6 +25,7 @@ export type ApplyPlan = {
     domChanges: OmpoOperation[];
     warnings: string[];
     instructions: string[];
+    ompoGlossary: Record<string, string>;
 };
 export declare function buildApplyPlan(bundle: OmpoEditBundle): ApplyPlan;
 export declare function explainEdit(bundle: OmpoEditBundle): string;

package/dist/apply-plan.js

@@ -1,10 +1,135 @@
-function styleSuggestions(operation) {
-    return Object.entries(operation.changed).map(([property, value]) => ({
+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).`
+};
+function formatChangedValue(property, value) {
+    const text = String(value);
+    if (text !== '')
+        return text;
+    if (property === 'width' || property === 'height') {
+        return '(remove fixed size — required for Fill)';
+    }
+    if (property === 'alignSelf' && text === '') {
+        return '(remove align-self override)';
+    }
+    return '(empty / remove)';
+}
+function styleSuggestionForProperty(property, value, changed) {
+    const parentFlex = changed.ensureParentFlex;
+    const parentFlexLabel = parentFlex === 'row' || parentFlex === 'column' ? parentFlex : 'row or column';
+    switch (property) {
+        case 'gap':
+            return {
+                property,
+                value: formatChangedValue(property, value),
+                strategy: 'css-rule',
+                notes: `${OMPO_GLOSSARY.gap} Apply on this selector if it is the flex/grid parent.`
+            };
+        case 'widthMode':
+            if (value === 'fill') {
+                return {
+                    property,
+                    value: 'fill',
+                    strategy: 'css-rule',
+                    notes: `${OMPO_GLOSSARY.fill} This selector has Fill width. If parent flex-direction is row, prefer flex-grow on this element; if column, prefer align-self: stretch for width.`
+                };
+            }
+            if (value === 'fit') {
+                return {
+                    property,
+                    value: 'fit',
+                    strategy: 'css-rule',
+                    notes: OMPO_GLOSSARY.fit
+                };
+            }
+            break;
+        case 'heightMode':
+            if (value === 'fill') {
+                return {
+                    property,
+                    value: 'fill',
+                    strategy: 'css-rule',
+                    notes: `${OMPO_GLOSSARY.fill} This selector has Fill height. If parent flex-direction is column, prefer flex-grow on this element; if row, prefer align-self: stretch for height.`
+                };
+            }
+            if (value === 'fit') {
+                return {
+                    property,
+                    value: 'fit',
+                    strategy: 'css-rule',
+                    notes: OMPO_GLOSSARY.fit
+                };
+            }
+            break;
+        case 'ensureParentFlex':
+            return {
+                property,
+                value: String(value),
+                strategy: 'css-rule',
+                notes: `Ompo auto-enabled flex on this element's parent so Fill sizing could work. In source, ensure the parent has display: flex and flex-direction: ${parentFlexLabel}. Apply on the parent element, not this child.`
+            };
+        case 'flexGrow':
+        case 'flexShrink':
+        case 'flexBasis':
+            return {
+                property,
+                value: formatChangedValue(property, value),
+                strategy: 'css-rule',
+                notes: `Part of Ompo Fill sizing on the main flex axis. Apply together with widthMode/heightMode fill and remove fixed width/height on the filled axis.`
+            };
+        case 'alignSelf':
+            return {
+                property,
+                value: formatChangedValue(property, value),
+                strategy: 'css-rule',
+                notes: value === 'stretch'
+                    ? 'Ompo Fill on the cross axis: stretch this flex child to fill the parent’s cross size. Remove any fixed width/height that blocks stretching.'
+                    : 'Map to the matching align-self rule in source.'
+            };
+        case 'minWidth':
+        case 'minHeight':
+            return {
+                property,
+                value: formatChangedValue(property, value),
+                strategy: 'css-rule',
+                notes: 'Supporting constraint for Ompo Fill sizing. Often min-width: 0 or min-height: 0 so flex children can shrink.'
+            };
+        case 'maxWidth':
+        case 'maxHeight':
+            return {
+                property,
+                value: formatChangedValue(property, value),
+                strategy: 'css-rule',
+                notes: 'Supporting constraint for Ompo Fill sizing. max-width/max-height: none allows the element to grow.'
+            };
+    }
+    return {
         property,
-        value: String(value),
+        value: formatChangedValue(property, value),
         strategy: 'inline-style',
         notes: 'Map this changed property to the matching source stylesheet, class, or component prop. Do not modify unrelated styles.'
-    }));
+    };
+}
+function styleSuggestions(operation) {
+    const changed = operation.changed;
+    return Object.entries(changed).map(([property, value]) => styleSuggestionForProperty(property, value, changed));
+}
+function summarizeLayoutIntent(changed) {
+    const parts = [];
+    if (changed.gap !== undefined) {
+        parts.push(`Set container gap to ${changed.gap}`);
+    }
+    if (changed.widthMode === 'fill') {
+        parts.push('Width: Fill (expand on main or cross axis per parent flex-direction)');
+    }
+    if (changed.heightMode === 'fill') {
+        parts.push('Height: Fill (expand on main or cross axis per parent flex-direction)');
+    }
+    if (changed.ensureParentFlex) {
+        parts.push(`Parent needs display:flex with flex-direction:${changed.ensureParentFlex}`);
+    }
+    return parts.length > 0 ? parts.join('. ') : null;
 }
 function buildDomStructurePlan(operation) {
     switch (operation.kind) {
@@ -92,6 +217,12 @@ export function buildApplyPlan(bundle) {
                 suggestions: []
             };
             existing.suggestions.push(...styleSuggestions(operation));
+            const layoutIntent = summarizeLayoutIntent(operation.changed);
+            if (layoutIntent) {
+                existing.layoutIntent = existing.layoutIntent
+                    ? `${existing.layoutIntent} ${layoutIntent}`
+                    : layoutIntent;
+            }
             files.set(operation.selector, existing);
             if (operation.selector.includes('nth-of-type')) {
                 warnings.push(`Selector "${operation.selector}" may be unstable across builds. Prefer matching by component structure or stable attributes.`);
@@ -144,10 +275,14 @@ export function buildApplyPlan(bundle) {
         instructions: [
             'Only apply properties and operations listed in this plan.',
             'Leave all untouched styling and markup unchanged.',
+            '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.',
             '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.'
-        ]
+        ],
+        ompoGlossary: OMPO_GLOSSARY
     };
 }
 export function explainEdit(bundle) {

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

package/package.json

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