npm - @myop/cli - Versions diffs - 0.1.46 → 0.1.48 - Mend

@myop/cli 0.1.46 → 0.1.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/myop-cli.js +844 -812
package/dist/skills/myop-angular-host/SKILL.md +118 -1
package/dist/skills/myop-cli/SKILL.md +147 -0
package/dist/skills/myop-component/SKILL.md +105 -73
package/dist/skills/myop-component/references/component-api.md +0 -28
package/dist/skills/myop-component/references/dev-workflow.md +3 -2
package/dist/skills/myop-component/references/sizing-and-layout.md +41 -71
package/dist/skills/myop-component/references/type-definitions.md +2 -19
package/dist/skills/myop-react-host/SKILL.md +143 -1
package/dist/skills/myop-react-native-host/SKILL.md +119 -1
package/dist/skills/myop-vue-host/SKILL.md +112 -1
package/package.json +1 -1

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

@@ -122,25 +122,6 @@ window.myop_cta_handler(action_id, payload);
 })();
 ```
-### Standard Actions
-These action IDs have special meaning and are handled by the Myop SDK:
-| Action ID | Payload | Purpose |
-|-----------|---------|---------|
-| `'size-requested'` | `{ width?, height?, minWidth?, maxWidth?, minHeight?, maxHeight?, required? }` | Request the host to resize the component container |
-```javascript
-// Request more width
-window.myop_cta_handler('size-requested', {
-    width: 400,
-    minWidth: 300,
-    maxWidth: 600,
-    required: true   // true = content is clipped without this size
-                     // false = preference only, host may ignore
-});
-```
 ### Custom Actions
 Define any custom actions your component needs. Use kebab-case for action IDs:
@@ -226,15 +207,6 @@ The `<script id="myop_preview">` block provides mock data for development. In pr
     interface MyopCtaPayloads {
         'task-toggled': { taskId: string; completed: boolean };
         'task-deleted': { taskId: string };
-        'size-requested': {
-            width?: number | null;
-            height?: number | null;
-            minWidth?: number | null;
-            maxWidth?: number | null;
-            minHeight?: number | null;
-            maxHeight?: number | null;
-            required?: boolean;
-        };
     }
     declare function myop_init_interface(): MyopInitData;

package/dist/skills/myop-component/references/dev-workflow.md CHANGED Viewed

@@ -14,10 +14,11 @@ The Myop CLI provides commands for creating, developing, and deploying component
 ## CLI Installation
 ```bash
-npm install -g @myop/cli
+npm install -g myop
+# Or use without installing: npx myop <command>
 ```
-After installation, the `myop` command is available globally.
+The npm package name is `myop`.
 ## Commands Reference

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

@@ -6,7 +6,6 @@ Myop components run inside a container managed by the host application. Proper s
 - [Size Meta Tag](#size-meta-tag)
 - [Required Base CSS](#required-base-css)
 - [Layout Patterns](#layout-patterns)
-- [Dynamic Size Requests](#dynamic-size-requests)
 - [Common Mistakes](#common-mistakes)
 ## Size Meta Tag
@@ -14,10 +13,13 @@ Myop components run inside a container managed by the host application. Proper s
 Every component should declare its preferred dimensions in a `<meta>` tag inside `<head>`:
 ```html
-<meta name="myop:size" content='{"width":"100%","height":"100%"}'>
+<meta name="myop:size" content='{"width":"100%","height":300}'>
 ```
-The host reads this BEFORE rendering the component, so the container can be sized correctly from the start (no layout shift).
+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
 ### Properties
@@ -26,7 +28,7 @@ All values are either a number (pixels) or the string `"100%"`:
 | Property | Type | Description |
 |----------|------|-------------|
 | `width` | `number \| "100%"` | Preferred width in px, or `"100%"` to fill container |
-| `height` | `number \| "100%"` | Preferred height in px, or `"100%"` to fill container |
+| `height` | `number \| "100%"` | Preferred height in px (content mode), or `"100%"` to fill container (fill mode) |
 | `minWidth` | `number` | Minimum acceptable width in px |
 | `maxWidth` | `number` | Maximum useful width in px |
 | `minHeight` | `number` | Minimum acceptable height in px |
@@ -35,13 +37,16 @@ All values are either a number (pixels) or the string `"100%"`:
 ### Examples
 ```html
-<!-- Fill all available space (most common) -->
+<!-- Content mode (default): auto-sizes to content -->
+<meta name="myop:size" content='{"width":"100%","height":300}'>
+<!-- Fill mode: fills all available space -->
 <meta name="myop:size" content='{"width":"100%","height":"100%"}'>
-<!-- Fixed width sidebar component -->
+<!-- Fixed width sidebar, fills height -->
 <meta name="myop:size" content='{"width":300,"height":"100%","minWidth":200,"maxWidth":400}'>
-<!-- Fixed height banner -->
+<!-- Fixed height banner, content mode -->
 <meta name="myop:size" content='{"width":"100%","height":80}'>
 <!-- Card with constraints -->
@@ -50,32 +55,31 @@ All values are either a number (pixels) or the string `"100%"`:
 ## Required Base CSS
-Every Myop component MUST include this base CSS to prevent unexpected scrollbars and ensure the component fills its container:
+There are two base CSS patterns depending on the sizing mode:
+### Content Mode (default) — component acts like a `<div>`
+The component auto-sizes to its content. Width fills the parent, height grows with content. Use for cards, forms, lists, banners, modals, and any component where the height depends on the content.
 ```css
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { width: 100%; margin: 0; padding: 0; }
+#app-root { width: 100%; }
+```
-html, body {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;       /* Component handles its own scrolling */
-    margin: 0;
-    padding: 0;
-}
+### Fill Mode (opt-in) — component fills its parent container
-#app-root {
-    width: 100%;
-    height: 100%;
-}
+The component fills all available space. Use for sidebars, full-page panels, dashboards, and any component that must stretch to fit the parent.
+```css
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; }
+#app-root { width: 100%; height: 100%; }
 ```
-### Why `overflow: hidden` on body?
+### Why `overflow: hidden` on body in fill mode?
-The component is rendered inside an iframe by the host. If the body scrolls, the host has no way to control or sync that scroll. Instead, the component should manage scrolling internally with specific scrollable regions.
+The component is rendered inside an iframe by the host. If the body scrolls, the host has no way to control or sync that scroll. Instead, fill-mode components should manage scrolling internally with specific scrollable regions. In content mode, overflow is omitted so the host can control it.
 ## Layout Patterns
@@ -147,47 +151,6 @@ For simple display components:
 }
 ```
-## Dynamic Size Requests
-If the component needs to change its size after initialization (e.g., content loaded, accordion expanded), use the `size-requested` CTA:
-```javascript
-// Request specific dimensions
-window.myop_cta_handler('size-requested', {
-    width: 400,
-    height: 600,
-    required: true      // true = content will be clipped without this size
-});
-// Request only width change
-window.myop_cta_handler('size-requested', {
-    width: 500,
-    minWidth: 350,
-    maxWidth: 700
-});
-// Request based on content height
-var contentHeight = document.getElementById('content').scrollHeight;
-window.myop_cta_handler('size-requested', {
-    height: contentHeight + 40,   // Add padding
-    required: false               // Preference, not critical
-});
-```
-### Size Request Payload
-| Property | Type | Description |
-|----------|------|-------------|
-| `width` | `number \| null` | Desired width in px (`null` = no preference) |
-| `height` | `number \| null` | Desired height in px (`null` = no preference) |
-| `minWidth` | `number \| null` | Minimum acceptable width |
-| `maxWidth` | `number \| null` | Maximum acceptable width |
-| `minHeight` | `number \| null` | Minimum acceptable height |
-| `maxHeight` | `number \| null` | Maximum acceptable height |
-| `required` | `boolean` | `true` = content is clipped/broken without this size; `false` = preference only |
-**Important:** The host application may choose to ignore size requests. Always design the component to be functional at any reasonable size, and use `required: true` sparingly.
 ## Common Mistakes
 ### Missing `min-height: 0` on flex children
@@ -207,15 +170,15 @@ window.myop_cta_handler('size-requested', {
 }
 ```
-### Body scrolling instead of internal scrolling
+### Body scrolling instead of internal scrolling (fill mode)
 ```css
-/* WRONG: Body scrolls, host can't control it */
+/* WRONG: Body scrolls in fill mode, host can't control it */
 html, body {
     overflow: auto;
 }
-/* CORRECT: Body never scrolls, content region scrolls */
+/* CORRECT (fill mode): Body never scrolls, content region scrolls */
 html, body {
     overflow: hidden;
 }
@@ -224,6 +187,8 @@ html, body {
 }
 ```
+Note: In content mode, body overflow is not set — the host controls overflow.
 ### Forgetting `box-sizing: border-box`
 ```css
@@ -252,11 +217,16 @@ html, body {
     height: 400px;
 }
-/* CORRECT: Fills whatever container the host provides */
+/* CORRECT (fill mode): Fills whatever container the host provides */
 #app-root {
     width: 100%;
     height: 100%;
 }
+/* CORRECT (content mode): Width fills, height is content-driven */
+#app-root {
+    width: 100%;
+}
 ```
 ### Size meta tag with invalid JSON

package/dist/skills/myop-component/references/type-definitions.md CHANGED Viewed

@@ -135,16 +135,6 @@ interface MyopCtaPayloads {
     'page-changed': { page: number };
     'tab-switched': { tabId: string };
-    // Standard Myop actions (always include if component needs resizing)
-    'size-requested': {
-        width?: number | null;
-        height?: number | null;
-        minWidth?: number | null;
-        maxWidth?: number | null;
-        minHeight?: number | null;
-        maxHeight?: number | null;
-        required?: boolean;
-    };
 }
 ```
@@ -152,9 +142,8 @@ interface MyopCtaPayloads {
 1. **Use kebab-case** for action names: `'item-selected'` not `'itemSelected'`
 2. **Use `void`** for actions with no payload (e.g., `'refresh-requested': void`)
-3. **Include `size-requested`** if the component ever needs to request a resize
-4. **Payload must be JSON-serializable** - no functions, DOM elements, or class instances
-5. **Every action called in code must be defined here** - keep types in sync with implementation
+3. **Payload must be JSON-serializable** - no functions, DOM elements, or class instances
+4. **Every action called in code must be defined here** - keep types in sync with implementation
 ## Standard Declarations
@@ -205,12 +194,6 @@ interface MyopInitData {
 interface MyopCtaPayloads {
     'point-clicked': { datasetIndex: number; pointIndex: number; value: number };
-    'size-requested': {
-        width?: number | null; height?: number | null;
-        minWidth?: number | null; maxWidth?: number | null;
-        minHeight?: number | null; maxHeight?: number | null;
-        required?: boolean;
-    };
 }
 ```

package/dist/skills/myop-react-host/SKILL.md CHANGED Viewed

@@ -1,12 +1,144 @@
 ---
 name: myop-react-host
-description: "Integrate Myop components into React applications using @myop/react. This skill covers MyopComponent props, typed event handlers, data binding, preloading, auto-generated packages, and local dev setup. Activate when the user is building a React app that hosts Myop components, or when you see @myop/react in package.json."
+description: "Integrate Myop components into React applications using @myop/react. ALWAYS use the MyopComponent React component or auto-generated packages — NEVER create iframes manually. This skill covers MyopComponent props, typed event handlers, data binding, preloading, auto-generated packages, and local dev setup. Activate when the user is building a React app that hosts Myop components, or when you see @myop/react in package.json."
 ---
 # Myop React Host Integration
 Embed Myop components in React applications using `@myop/react`.
+## CRITICAL: Always Use the SDK
+**NEVER create `<iframe>` elements manually. NEVER call `myop_init_interface()` or wire `myop_cta_handler()` directly.**
+The `@myop/react` SDK handles all iframe management, communication, loading, error handling, sizing, and caching. Always use `<MyopComponent>` or an auto-generated package.
+```tsx
+// WRONG — never do this
+<iframe ref={ref} src="/component.html" />
+ref.current.contentWindow.myop_init_interface(data)
+// CORRECT — always use the SDK
+<MyopComponent componentId="abc-123" data={data} on={handler} />
+```
+## End-to-End Workflow: React App with Myop Components
+Each Myop component is a **separate project** in its own directory. You create them, develop them, push them to get a `componentId`, then reference that ID in your React host app.
+### Step 1: Create component projects
+Each component needs its own directory with `myop.config.json` + `index.html`:
+```bash
+# Create first component
+mkdir components/sidebar && cd components/sidebar
+npx myop create        # Scaffolds index.html + myop.config.json, starts dev server
+# Build the component UI (see myop-component skill)
+# Ctrl+C to stop dev server when done
+# Create second component
+cd ../
+mkdir chart && cd chart
+npx myop create
+# Build this component too
+```
+### Step 2: Push components to get IDs
+Each component must be pushed to the Myop platform to get a `componentId`:
+```bash
+cd components/sidebar
+npx myop push          # Uploads and assigns a componentId (UUID)
+# Output: componentId is now in myop.config.json
+cd ../chart
+npx myop push
+```
+After push, each `myop.config.json` has a real `componentId` (UUID).
+### Step 3: Set up the React host app
+```bash
+cd my-react-app
+npm install @myop/react @myop/sdk
+```
+### Step 4: Use components in React
+```tsx
+import { MyopComponent } from "@myop/react";
+function App() {
+    return (
+        <div style={{ display: "flex", gap: 16 }}>
+            <MyopComponent
+                componentId="<sidebar-componentId-from-step-2>"
+                data={{ items: ["Home", "Settings"] }}
+                onItemSelected={({ itemId }) => console.log(itemId)}
+                style={{ width: 300, height: "100%" }}
+            />
+            <MyopComponent
+                componentId="<chart-componentId-from-step-2>"
+                data={{ values: [10, 20, 30] }}
+                style={{ flex: 1 }}
+            />
+        </div>
+    );
+}
+```
+### Working locally on existing components (componentId already in code)
+When you find `componentId` values already used in the codebase and the developer wants to modify those components locally:
+**Step A: Pull the component source**
+```bash
+# Create a directory for the component and pull it by ID
+mkdir components/sidebar && cd components/sidebar
+npx myop pull <componentId>
+# Downloads index.html + creates myop.config.json with the componentId
+```
+**Step B: Start the local dev server**
+```bash
+npx myop dev           # Serves component on port 9292 with HMR
+```
+**Step C: Point the React app to local dev server**
+```tsx
+import { enableLocalDev } from "@myop/react";
+enableLocalDev();      // All <MyopComponent> instances load from localhost:9292 instead of cloud
+```
+Now edits to `index.html` in the component directory are reflected instantly in the React app.
+**Step D: Push changes when done**
+```bash
+cd components/sidebar
+npx myop push          # Uploads updated component to the same componentId
+```
+Remove or comment out `enableLocalDev()` to go back to loading from the Myop cloud.
+**Full local dev flow (multiple components):**
+```bash
+# Pull all components you need to work on
+mkdir -p components && cd components
+npx myop pull <sidebar-id> -o sidebar/index.html
+npx myop pull <chart-id> -o chart/index.html
+# Start dev server (serves all components in subdirectories)
+npx myop dev -m        # Monorepo mode — select which components to serve
+```
 ## When This Skill Activates
 - `@myop/react` is in `package.json` dependencies
@@ -260,6 +392,16 @@ import type {
 } from "@myop/react";
 ```
+## Common Mistakes — WRONG vs CORRECT
+| WRONG | CORRECT |
+|-------|---------|
+| Creating `<iframe>` elements manually | Using `<MyopComponent>` from `@myop/react` |
+| Calling `myop_init_interface()` on iframe contentWindow | Passing `data` prop to `<MyopComponent>` |
+| Wiring `myop_cta_handler` via refs | Using `on` or `onActionName` props |
+| Loading component HTML from local file | Using `componentId` — SDK fetches from Myop cloud |
+| Managing iframe lifecycle with useEffect | SDK handles load, error, cleanup automatically |
 ## Reference
 - [Auto-Generated Packages](references/auto-generated-packages.md)

package/dist/skills/myop-react-native-host/SKILL.md CHANGED Viewed

@@ -1,12 +1,130 @@
 ---
 name: myop-react-native-host
-description: "Integrate Myop components into React Native applications using @myop/react-native. This skill covers MyopComponent props, CTA event handling, data binding, preloading, auto-generated packages, native-specific features (scroll, zoom, selection control), and local dev setup. Activate when the user is building a React Native app that hosts Myop components, or when you see @myop/react-native in package.json."
+description: "Integrate Myop components into React Native applications using @myop/react-native. ALWAYS use the MyopComponent component or auto-generated packages — NEVER create WebViews manually. Covers MyopComponent props, CTA event handling, data binding, preloading, auto-generated packages, native-specific features (scroll, zoom, selection control), and local dev setup. Activate when the user is building a React Native app that hosts Myop components, or when you see @myop/react-native in package.json."
 ---
 # Myop React Native Host Integration
 Embed Myop components in React Native applications using `@myop/react-native`. Components render inside a WebView with a native bridge for CTA communication.
+## CRITICAL: Always Use the SDK
+**NEVER create `<WebView>` elements manually. NEVER call `myop_init_interface()` or wire `myop_cta_handler()` directly.**
+The `@myop/react-native` SDK handles all WebView management, native bridge communication, loading, error handling, and caching. Always use `<MyopComponent>` or an auto-generated package.
+```tsx
+// WRONG — never do this
+<WebView source={{ uri: componentUrl }} />
+// CORRECT — always use the SDK
+<MyopComponent componentId="abc-123" data={data} on={handler} />
+```
+## End-to-End Workflow: React Native App with Myop Components
+Each Myop component is a **separate project** in its own directory. You create them, develop them, push them to get a `componentId`, then reference that ID in your React Native host app.
+### Step 1: Create component projects
+```bash
+# Each component gets its own directory
+mkdir components/sidebar && cd components/sidebar
+npx myop create        # Scaffolds index.html + myop.config.json
+# Build the component UI (see myop-component skill), then Ctrl+C
+cd ../ && mkdir chart && cd chart
+npx myop create
+```
+### Step 2: Push components to get IDs
+```bash
+cd components/sidebar
+npx myop push          # Uploads → componentId written to myop.config.json
+cd ../chart
+npx myop push
+```
+### Step 3: Use in your React Native app
+```bash
+cd my-rn-app
+npm install @myop/react-native react-native-webview
+```
+```tsx
+import { MyopComponent } from "@myop/react-native";
+function App() {
+    return (
+        <View style={{ flex: 1 }}>
+            <MyopComponent
+                componentId="<sidebar-componentId-from-step-2>"
+                data={{ items: ["Home", "Settings"] }}
+                on={(action, payload) => console.log(action, payload)}
+                style={{ height: 300 }}
+            />
+            <MyopComponent
+                componentId="<chart-componentId-from-step-2>"
+                data={{ values: [10, 20, 30] }}
+                style={{ flex: 1 }}
+            />
+        </View>
+    );
+}
+```
+### Working locally on existing components (componentId already in code)
+When you find `componentId` values already used in the codebase and the developer wants to modify those components locally:
+**Step A: Pull the component source**
+```bash
+mkdir components/sidebar && cd components/sidebar
+npx myop pull <componentId>
+# Downloads index.html + creates myop.config.json with the componentId
+```
+**Step B: Start the local dev server**
+```bash
+npx myop dev           # Serves component on port 9292 with HMR
+```
+**Step C: Point the React Native app to local dev server**
+```tsx
+import { enableLocalDev, setCloudRepositoryUrl } from "@myop/react-native";
+enableLocalDev();      // All <MyopComponent> instances load from localhost:9292
+// Android emulator requires explicit IP:
+// setCloudRepositoryUrl("http://10.0.2.2:9292");
+// Physical device — use your machine's IP:
+// setCloudRepositoryUrl("http://192.168.1.100:9292");
+```
+Now edits to `index.html` are reflected instantly in the React Native app.
+**Step D: Push changes when done**
+```bash
+npx myop push          # Uploads updated component to the same componentId
+```
+Remove or comment out `enableLocalDev()` to go back to loading from the Myop cloud.
+**Multiple components:**
+```bash
+mkdir -p components && cd components
+npx myop pull <sidebar-id> -o sidebar/index.html
+npx myop pull <chart-id> -o chart/index.html
+npx myop dev -m        # Monorepo mode — select which components to serve
+```
 ## When This Skill Activates
 - `@myop/react-native` is in `package.json` dependencies