@myop/cli 0.1.50 → 0.1.51

package/dist/myop-cli.js

@@ -1967,7 +1967,7 @@ const Me = (o = !1) => {
   new De(),
   ...Ft
 ];
-const uo = "0.1.50";
+const uo = "0.1.51";
 v.program = new bt();
 v.program.name("@myop/cli").description("Myop CLI - Remote UI Made Easy").version(uo);
 v.program.addOption(new ue("-c, --config <value>", "myop.config.json file location").default("./myop.config.json", "./myop.config.json"));
@@ -3064,7 +3064,7 @@ dist/
 `), console.log("✅ Created .gitignore");
     const $ = await Ge(process.cwd());
     $.success && console.log("✅ Installed AI agent skills");
-    const C = await import("./index-DuEoKctW.js").then((M) => M.i), j = process.cwd();
+    const C = await import("./index-bsDUYxd0.js").then((M) => M.i), j = process.cwd();
     try {
       await C.init({ fs: e, dir: j });
       const M = [

package/dist/skills/myop-component/references/component-api.md

@@ -389,6 +389,7 @@ You can also use typed specific handlers alongside the generic `on` handler:
 | `on` | `(action, payload) => void` | Generic handler for all CTA events |
 | `on[ActionName]` | `(payload) => void` | Typed handler for a specific CTA (e.g., `onTaskToggled`) |
 | `style` | `CSSProperties` | CSS styles for the container |
+| `autoSize` | `boolean` | Default `true`. Set to `false` to disable auto-sizing — component fills its container, host controls dimensions via `style` |
 | `environment` | `string` | Load from a specific environment (e.g., `"staging"`) |
 | `preview` | `boolean` | Load the unpublished preview version |
 

package/dist/skills/myop-component/references/sizing-and-layout.md

@@ -18,8 +18,8 @@ Every component should declare its preferred dimensions in a `<meta>` tag inside
 
 The host reads this BEFORE rendering the component, so the container can be sized correctly from the start (no layout shift). The `height` value also determines the sizing mode:
 
-- **Number (or absent)** → **Content mode** (default): component auto-sizes to its content, like a `<div>`
-- **`"100%"`** → **Fill mode**: component fills its parent container
+- **Number (or absent)** → **Content mode** (default): component auto-sizes to its content, like a `<div>`. Pixel values are **initial hints** — after the component renders, auto-sizing measures the actual content and adjusts the height automatically.
+- **`"100%"`** → **Fill mode**: component fills its parent container. Auto-sizing is skipped.
 
 ### Properties
 
@@ -67,6 +67,8 @@ html, body { width: 100%; margin: 0; padding: 0; }
 #app-root { width: 100%; }
 ```
 
+> **Important:** In content mode, do NOT set `height: 100%` on `html` or `body`. This conflicts with auto-sizing and can cause the component to appear as a blank white screen. If your component needs to fill its parent container, use fill mode instead.
+
 ### Fill Mode (opt-in) — component fills its parent container
 
 The component fills all available space. Use for sidebars, full-page panels, dashboards, and any component that must stretch to fit the parent.
@@ -153,6 +155,21 @@ For simple display components:
 
 ## Common Mistakes
 
+### Using fill mode CSS with content mode sizing
+
+```css
+/* WRONG: height:100% on body in content mode — breaks auto-sizing, causes white screen */
+html, body { height: 100%; overflow: hidden; }
+/* with meta tag: <meta name="myop:size" content='{"height":300}'> */
+
+/* CORRECT: either use content mode CSS (no height on body)... */
+html, body { width: 100%; margin: 0; padding: 0; }
+
+/* ...or switch to fill mode (height:"100%" in meta tag) */
+html, body { width: 100%; height: 100%; overflow: hidden; }
+/* with meta tag: <meta name="myop:size" content='{"height":"100%"}'> */
+```
+
 ### Missing `min-height: 0` on flex children
 
 ```css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myop/cli",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "description": "Myop cli",
   "type": "module",
   "repository": {