@myop/cli 0.1.41 → 0.1.42

package/dist/myop-cli.js

@@ -1906,7 +1906,7 @@ const $e = (o = !1) => {
   new Fe(),
   ...Et
 ];
-const eo = "0.1.41";
+const eo = "0.1.42";
 y.program = new ft();
 y.program.name("@myop/cli").description("Myop CLI - Remote UI Made Easy").version(eo);
 y.program.addOption(new me("-c, --config <value>", "myop.config.json file location").default("./myop.config.json", "./myop.config.json"));

package/dist/skills/myop-component/SKILL.md

@@ -224,10 +224,53 @@ project/
 | `myop logout` | Clear stored credentials |
 | `myop whoami` | Show current authenticated user |
 
+## Deploying with `myop push`
+
+`myop push` uploads the current component HTML to the Myop platform. After a successful push, any CTA wiring (e.g., `myop_cta_handler('button-clicked', …)`) is live in the Myop host — no rebuild or redeploy of the host application is needed.
+
+### What push does
+
+1. Reads `myop.config.json` to identify the component
+2. Locates the HTML file (`index.html` for single-file mode, `dist/index.html` for multi-file)
+3. Authenticates with Myop (prompts login if needed)
+4. Uploads the HTML via a presigned URL
+5. On first push: assigns a real `componentId` (UUID) and `organization` to `myop.config.json`
+6. On subsequent pushes: adds a new version to the existing component
+
+### Running push
+
+From the component's project directory:
+
+```bash
+myop push
+```
+
+Or using npx (no global install needed):
+
+```bash
+npx @myop/cli push
+```
+
+### When the user asks to push
+
+When the user says **"push to myop"**, **"deploy"**, **"upload"**, or **"run the push"**, you should:
+
+1. `cd` into the component's project directory (where `myop.config.json` lives)
+2. Run `npx @myop/cli push` via the terminal
+3. If push succeeds, report the dashboard URL: `https://dashboard.myop.dev/dashboard/2.0/component/<componentId>`
+4. If push fails, show the error output and suggest the user run the command manually
+
+### Push behavior
+
+- **First push** — `componentId` in `myop.config.json` changes from `"DEV"` to a real UUID. The `organization` field is also added. The component now exists on the Myop platform.
+- **Subsequent pushes** — A new version is added to the existing component. The previous version remains accessible. The latest version becomes the live version immediately.
+- **What goes live** — The full HTML file is uploaded as-is. All CTA handlers, type definitions, styles, and preview scripts are included. The host application picks up changes automatically on next load (no host redeploy).
+- **Multi-file projects** — For projects with a build step, run `myop sync` instead (which runs `npm run build` first, then uploads `dist/index.html`).
+
 ## Workflow Summary
 
 1. `myop create` - Scaffold a new component
 2. Edit `index.html` - Build your component UI
 3. `myop dev` - Preview with hot reload at http://localhost:9292
-4. `myop push` - Upload to Myop platform
+4. `myop push` - Upload to Myop platform (live immediately)
 5. View on dashboard: `https://dashboard.myop.dev/dashboard/2.0/component/<componentId>`

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

@@ -323,35 +323,135 @@ The `<script id="myop_preview">` block provides mock data for development. In pr
 
 ## Host-Side Integration
 
-For context on how the host application uses these functions (useful when debugging):
+For context on how the host application consumes these functions in React (useful when debugging or advising host developers):
 
-```javascript
-// React host example using @myop/sdk
-import { getHostModule } from '@myop/sdk';
+### Option 1: Auto-Generated React Package (Recommended)
 
-const { hostSDK } = await getHostModule();
-const component = await hostSDK.loadComponent(componentConfig, containerElement);
+Myop auto-generates a fully typed React package for every component. Install it directly:
 
-// Send data to component
-component.props.myop_init_interface({
-    tasks: fetchedTasks
-});
+```bash
+npm install https://cloud.myop.dev/npm/{component-id}/react
+```
 
-// Listen for component actions
-component.props.myop_cta_handler = (action, payload) => {
-    switch (action) {
-        case 'task-toggled':
-            updateTask(payload.taskId, { completed: payload.completed });
-            break;
-        case 'task-deleted':
-            deleteTask(payload.taskId);
-            break;
-        case 'size-requested':
-            resizeContainer(payload);
-            break;
-    }
-};
+Then import and use it like any React component — with full TypeScript types for `data` and all CTA event payloads:
+
+```tsx
+// Auto-generated package gives you a typed React component
+// e.g. npm install https://cloud.myop.dev/npm/{component-id}/react
+import { TaskList } from "@myop/task-list";
+
+function App() {
+    const [tasks, setTasks] = useState(fetchedTasks);
+
+    return (
+        <TaskList
+            data={{ tasks }}
+            onTaskToggled={(payload) => {
+                // payload is typed as { taskId: string; completed: boolean }
+                updateTask(payload.taskId, { completed: payload.completed });
+            }}
+            onTaskDeleted={(payload) => {
+                // payload is typed as { taskId: string }
+                deleteTask(payload.taskId);
+            }}
+        />
+    );
+}
+```
+
+**Why auto-generated packages are preferred:**
+- Fully typed — TypeScript types for `data` and all CTA event payloads are auto-generated
+- Zero configuration — no `componentId` needed, component is loaded automatically
+- Zero bundle impact — the package is a thin typed wrapper (~6KB total for `@myop/react`), actual component loads at runtime
+
+### Option 2: MyopComponent with `data` and `on` Props
+
+For cases where you don't want to install a per-component package, use `MyopComponent` directly:
+
+```tsx
+import { MyopComponent } from "@myop/react";
+
+function App() {
+    const [tasks, setTasks] = useState(fetchedTasks);
+
+    return (
+        <MyopComponent
+            componentId="your-component-id"
+            data={{ tasks }}
+            on={(action, payload) => {
+                switch (action) {
+                    case 'task-toggled':
+                        updateTask(payload.taskId, { completed: payload.completed });
+                        break;
+                    case 'task-deleted':
+                        deleteTask(payload.taskId);
+                        break;
+                }
+            }}
+        />
+    );
+}
+```
+
+You can also use typed specific handlers alongside the generic `on` handler:
+
+```tsx
+<MyopComponent<TaskData, TaskCtaPayloads>
+    componentId="your-component-id"
+    data={{ tasks }}
+    onTaskToggled={(payload) => {
+        updateTask(payload.taskId, { completed: payload.completed });
+    }}
+    onTaskDeleted={(payload) => {
+        deleteTask(payload.taskId);
+    }}
+/>
+```
+
+### Key Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `componentId` | `string` | The Myop component ID (not needed with auto-generated packages) |
+| `data` | `TData` | Data passed to the component via `myop_init_interface` |
+| `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 |
+| `environment` | `string` | Load from a specific environment (e.g., `"staging"`) |
+| `preview` | `boolean` | Load the unpublished preview version |
+
+### Preloading Components
+
+Preloading fetches and caches component configs before they render, eliminating the network delay when the component mounts. This is useful for components that appear on user navigation or behind tabs — preload them early so they render instantly when needed.
 
-// Read current component state
-const currentState = component.props.myop_init_interface();
+```tsx
+import { preloadComponents, isPreloaded } from "@myop/react";
+
+// Preload on app startup or route entry
+await preloadComponents(["component-id-1", "component-id-2"]);
+
+// Optionally preload for a specific environment
+await preloadComponents(["component-id-1"], "staging");
+
+// Check if a component is already cached
+if (isPreloaded("component-id-1")) {
+    console.log("Ready — will render without loading delay");
+}
 ```
+
+**How it works:**
+- `preloadComponents(ids, env?, preview?)` fetches each component config from the Myop cloud and caches it in memory. Uses `Promise.allSettled` so a single failure doesn't block the rest.
+- When `<MyopComponent>` (or an auto-generated component) later mounts with a preloaded ID, it hits the cache and loads instantly — no network request, no loader flash.
+- The cache is keyed by `{componentId}:{environment}:{preview|live}`, so the same component can be preloaded for different environments separately.
+- If no explicit `environment`/`preview` props are passed to the component, it automatically uses the params from the preload call.
+
+**When to preload:**
+- App startup — preload components used on the landing page
+- Route transitions — preload components for the next likely page
+- Tab containers — preload all tab contents when the container mounts
+
+| Function | Returns | Description |
+|----------|---------|-------------|
+| `preloadComponents(ids, env?, preview?)` | `Promise<PromiseSettledResult[]>` | Fetch and cache component configs ahead of time |
+| `isPreloaded(id, env?, preview?)` | `boolean` | Check if a component is already cached |
+| `getPreloadedParams(id)` | `{ env, preview } \| undefined` | Get the environment/preview params used during preload |

package/package.json

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