@myop/cli 0.1.46 → 0.1.47

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

@@ -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

@@ -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

package/dist/skills/myop-vue-host/SKILL.md

@@ -1,12 +1,123 @@
 ---
 name: myop-vue-host
-description: "Integrate Myop components into Vue 3 applications using @myop/vue. This skill covers MyopComponent props, events, slots, data binding, preloading, auto-generated packages, and local dev setup. Activate when the user is building a Vue app that hosts Myop components, or when you see @myop/vue in package.json."
+description: "Integrate Myop components into Vue 3 applications using @myop/vue. ALWAYS use the MyopComponent Vue component or auto-generated packages — NEVER create iframes manually. Covers MyopComponent props, events, slots, data binding, preloading, auto-generated packages, and local dev setup. Activate when the user is building a Vue app that hosts Myop components, or when you see @myop/vue in package.json."
 ---
 
 # Myop Vue Host Integration
 
 Embed Myop components in Vue 3 applications using `@myop/vue`.
 
+## CRITICAL: Always Use the SDK
+
+**NEVER create `<iframe>` elements manually. NEVER call `myop_init_interface()` or wire `myop_cta_handler()` directly.**
+
+The `@myop/vue` SDK handles all iframe management, communication, loading, error handling, and caching. Always use `<MyopComponent>` or an auto-generated package.
+
+```vue
+<!-- WRONG — never do this -->
+<iframe ref="myIframe" src="/component.html" />
+
+<!-- CORRECT — always use the SDK -->
+<MyopComponent component-id="abc-123" :data="data" @cta="handleCta" />
+```
+
+## End-to-End Workflow: Vue 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 Vue 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 Vue app
+
+```bash
+cd my-vue-app
+npm install @myop/vue @myop/sdk
+```
+
+```vue
+<script setup>
+import { MyopComponent } from "@myop/vue";
+</script>
+
+<template>
+    <MyopComponent
+        component-id="<sidebar-componentId-from-step-2>"
+        :data="{ items: ['Home', 'Settings'] }"
+        @cta="(action, payload) => console.log(action, payload)"
+        style="width: 300px"
+    />
+    <MyopComponent
+        component-id="<chart-componentId-from-step-2>"
+        :data="{ values: [10, 20, 30] }"
+        style="flex: 1"
+    />
+</template>
+```
+
+### 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 Vue app to local dev server**
+
+```ts
+import { enableLocalDev } from "@myop/vue";
+enableLocalDev();      // All <MyopComponent> instances load from localhost:9292
+```
+
+Now edits to `index.html` are reflected instantly in the Vue 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/vue` is in `package.json` dependencies

package/package.json

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