@myop/cli 0.1.45 → 0.1.46

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

@@ -0,0 +1,320 @@
+---
+name: myop-angular-host
+description: "Integrate Myop components into Angular applications using @myop/angular. This skill covers the MyopComponent standalone component, inputs, outputs, content projection, data binding, preloading, auto-generated packages, and local dev setup. Activate when the user is building an Angular app that hosts Myop components, or when you see @myop/angular in package.json."
+---
+
+# Myop Angular Host Integration
+
+Embed Myop components in Angular applications using `@myop/angular`.
+
+## When This Skill Activates
+
+- `@myop/angular` is in `package.json` dependencies
+- User asks to "add a Myop component to Angular", "integrate Myop in Angular"
+- Files import from `@myop/angular`
+
+## Installation
+
+```bash
+npm install @myop/angular @myop/sdk
+```
+
+## Quick Start
+
+### Option 1: Auto-Generated Package (Recommended)
+
+```bash
+npm install https://cloud.myop.dev/npm/{componentId}/angular
+```
+
+```typescript
+import { MyComponentComponent } from "@myop/my-component";
+
+@Component({
+    selector: 'app-root',
+    standalone: true,
+    imports: [MyComponentComponent],
+    template: `
+        <my-component
+            [data]="{ title: 'Hello' }"
+            (cta)="onCta($event)"
+        />
+    `
+})
+export class AppComponent {
+    onCta(event: CtaEvent<MyComponentCtaPayloads>) {
+        console.log(event.action, event.payload);
+    }
+}
+```
+
+The auto-generated package bakes in the `componentId` and exports typed interfaces.
+
+### Option 2: MyopComponent Directly
+
+```typescript
+import { MyopComponent } from "@myop/angular";
+
+@Component({
+    selector: 'app-root',
+    standalone: true,
+    imports: [MyopComponent],
+    template: `
+        <myop-component
+            [componentId]="'your-component-id'"
+            [data]="data"
+            (cta)="onCta($event)"
+        />
+    `
+})
+export class AppComponent {
+    data = { title: 'Hello' };
+
+    onCta(event: CtaEvent) {
+        console.log(event.action, event.payload);
+    }
+}
+```
+
+## Component API
+
+**Selector:** `myop-component`
+
+**Standalone:** Yes (`standalone: true`) — import directly, no NgModule needed.
+
+### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `componentId` | `string` | — | Myop component ID (UUID) |
+| `data` | `TData` | — | Data passed to `myop_init_interface`. Reactive via `ngOnChanges` |
+| `fadeDuration` | `number` | `200` | Loader fade-out duration in ms |
+| `autoSize` | `boolean` | `false` | Auto-size container to match iframe content |
+| `environment` | `string` | — | Load from specific environment |
+| `preview` | `boolean` | — | Load unpublished preview version |
+| `on` | `(action, payload) => void` | — | Generic CTA callback |
+| `loader` | `TemplateRef` | — | Custom loader template (input approach) |
+| `fallback` | `TemplateRef` | — | Custom fallback template (input approach) |
+| `componentConfig` | `IComponentInstanceConfig` | — | Direct config object (advanced) |
+
+### Outputs
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `(load)` | `ITypedMyopComponent<TData, TCtaPayloads>` | Component finished loading |
+| `(error)` | `string` | Load failure message |
+| `(sizeChange)` | `SizeInfo` | Auto-sized component changed dimensions |
+| `(cta)` | `CtaEvent<TCtaPayloads>` | CTA event from component |
+
+The `CtaEvent` type:
+```typescript
+interface CtaEvent<TCtaPayloads> {
+    action: keyof TCtaPayloads | string;
+    payload: TCtaPayloads[keyof TCtaPayloads] | any;
+}
+```
+
+## Content Projection (Loader & Fallback)
+
+Two approaches — content projection or input binding:
+
+### Content Projection (ng-template)
+
+```html
+<myop-component [componentId]="'...'">
+    <ng-template #loader>
+        <div class="spinner">Loading...</div>
+    </ng-template>
+    <ng-template #fallback>
+        <div class="error">Failed to load</div>
+    </ng-template>
+</myop-component>
+```
+
+### Input Binding
+
+```typescript
+@Component({
+    template: `
+        <myop-component [componentId]="'...'" [loader]="loaderTpl">
+        </myop-component>
+
+        <ng-template #loaderTpl>
+            <div class="spinner">Loading...</div>
+        </ng-template>
+    `
+})
+```
+
+Input binding takes precedence over content projection.
+
+## Data Binding
+
+The `data` input is tracked via `ngOnChanges`. When the reference changes, `myop_init_interface(data)` is called:
+
+```typescript
+@Component({
+    template: `
+        <button (click)="increment()">+1</button>
+        <myop-component [componentId]="'counter'" [data]="counterData" />
+    `
+})
+export class AppComponent {
+    count = 0;
+    counterData = { count: 0 };
+
+    increment() {
+        this.count++;
+        this.counterData = { count: this.count };  // New reference triggers update
+    }
+}
+```
+
+**Important:** You must create a new object reference for Angular change detection to trigger. Mutating the existing object won't work with `OnPush` change detection.
+
+## Preloading
+
+```typescript
+import { preloadComponents, isPreloaded } from "@myop/angular";
+
+// In app initializer or route guard
+await preloadComponents(["component-id-1", "component-id-2"]);
+await preloadComponents(["component-id-1"], "staging");
+
+if (isPreloaded("component-id-1")) {
+    console.log("Will render instantly");
+}
+```
+
+## Configuration Functions
+
+```typescript
+import {
+    enableLocalDev,
+    setCloudRepositoryUrl,
+    setEnvironment,
+} from "@myop/angular";
+
+enableLocalDev();                          // localhost:9292
+setCloudRepositoryUrl("https://custom");   // Custom URL
+setEnvironment("staging");                 // Default environment
+```
+
+## CTA Event Handling
+
+```typescript
+import { CtaEvent } from "@myop/angular";
+
+// Define your component's CTA types
+interface MyCtaPayloads {
+    'task-toggled': { taskId: string; completed: boolean };
+    'task-deleted': { taskId: string };
+}
+
+@Component({
+    template: `
+        <myop-component
+            [componentId]="'task-list'"
+            [data]="{ tasks }"
+            (cta)="onCta($event)"
+        />
+    `
+})
+export class TaskListHost {
+    tasks = [{ id: '1', title: 'Review PR', completed: false }];
+
+    onCta(event: CtaEvent<MyCtaPayloads>) {
+        switch (event.action) {
+            case 'task-toggled':
+                // event.payload typed as { taskId: string; completed: boolean }
+                break;
+            case 'task-deleted':
+                // event.payload typed as { taskId: string }
+                break;
+        }
+    }
+}
+```
+
+## Auto-Generated Angular Package
+
+```bash
+npm install https://cloud.myop.dev/npm/{componentId}/angular
+```
+
+The generated package exports:
+- `MyComponentComponent` — standalone Angular component with `componentId` baked in
+- `MyComponentData` — typed data interface (from `MyopInitData`)
+- `MyComponentCtaPayloads` — typed CTA payloads
+- `MyComponentTypedComponent` — typed component instance interface
+- `COMPONENT_ID` — the component ID constant
+
+The generated component:
+- Selector is auto-derived from name (e.g., `my-component`)
+- `standalone: true`, imports `MyopComponent` from `@myop/angular`
+- All inputs/outputs forwarded
+
+## Complete Example
+
+```typescript
+import { Component } from '@angular/core';
+import { MyopComponent, preloadComponents, type CtaEvent } from '@myop/angular';
+
+preloadComponents(['sidebar-abc123']);
+
+@Component({
+    selector: 'app-dashboard',
+    standalone: true,
+    imports: [MyopComponent],
+    template: `
+        <div style="display: flex; height: 100vh">
+            <myop-component
+                [componentId]="'sidebar-abc123'"
+                [data]="{ tasks: tasks }"
+                (cta)="handleCta($event)"
+                (load)="onLoaded($event)"
+                (error)="onError($event)"
+                style="width: 300px"
+            >
+                <ng-template #loader>
+                    <div>Loading sidebar...</div>
+                </ng-template>
+            </myop-component>
+        </div>
+    `
+})
+export class DashboardComponent {
+    tasks = [
+        { id: '1', title: 'Review PR', completed: false },
+        { id: '2', title: 'Deploy', completed: true },
+    ];
+
+    handleCta(event: CtaEvent) {
+        if (event.action === 'task-toggled') {
+            const task = this.tasks.find(t => t.id === event.payload.taskId);
+            if (task) task.completed = event.payload.completed;
+        }
+    }
+
+    onLoaded(component: any) {
+        console.log('Component loaded:', component.id);
+    }
+
+    onError(error: string) {
+        console.error('Failed:', error);
+    }
+}
+```
+
+## TypeScript Types
+
+```typescript
+import type {
+    IPropTypes,           // Full props type
+    ITypedMyopComponent,  // Component instance with typed props
+    IMyopComponentProps,  // myop_init_interface + myop_cta_handler
+    CtaEvent,             // { action, payload } event type
+    SizeInfo,             // { width, height, autoSizingWidth, autoSizingHeight }
+    IComponentInstanceConfig,
+} from "@myop/angular";
+```

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

@@ -218,7 +218,9 @@ project/
 |---------|-------------|
 | `myop create` | Create a new component (scaffolds files + starts dev server) |
 | `myop dev` | Start development server with HMR on port 9292 |
-| `myop push` | Upload component to Myop platform |
+| `myop push [componentId]` | Upload component to Myop platform (optional ID overrides config) |
+| `myop pull [componentId]` | Download component HTML from Myop platform |
+| `myop list [--org <orgId>]` | Browse, search, and batch pull/push remote components |
 | `myop sync` | Build and upload component to Myop platform |
 | `myop login` | Authenticate with Myop (opens browser) |
 | `myop logout` | Clear stored credentials |
@@ -231,24 +233,30 @@ project/
 ### 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
+2. If a `componentId` argument is passed, it overrides the one in config
+3. Locates the HTML file (`index.html` for single-file mode, `dist/index.html` for multi-file)
+4. Authenticates with Myop (prompts login if needed)
+5. Uploads the HTML via a presigned URL
+6. On first push: assigns a real `componentId` (UUID) and `organization` to `myop.config.json`
+7. On subsequent pushes: adds a new version to the existing component
 
 ### Running push
 
 From the component's project directory:
 
 ```bash
+# Push using componentId from myop.config.json
 myop push
+
+# Push to a specific remote component (overrides config)
+myop push <componentId>
 ```
 
 Or using npx (no global install needed):
 
 ```bash
 npx @myop/cli push
+npx @myop/cli push <componentId>
 ```
 
 ### When the user asks to push
@@ -267,6 +275,65 @@ When the user says **"push to myop"**, **"deploy"**, **"upload"**, or **"run the
 - **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`).
 
+## Downloading with `myop pull`
+
+`myop pull` downloads a component's latest HTML from the Myop platform into your local directory.
+
+### Running pull
+
+```bash
+# Pull using componentId from myop.config.json
+myop pull
+
+# Pull a specific component by ID (works in empty directories)
+myop pull <componentId>
+
+# Pull to a custom output path
+myop pull <componentId> -o ./components/sidebar/index.html
+```
+
+### When the user asks to pull
+
+When the user says **"pull from myop"**, **"download component"**, or **"get the latest version"**, you should:
+
+1. `cd` into the component's project directory (or an empty directory for a new clone)
+2. Run `npx @myop/cli pull` (or `npx @myop/cli pull <componentId>` if pulling a specific component)
+3. Report the saved file path and size
+
+### Pull behavior
+
+- **Existing directory** — overwrites `index.html` (or `dist/index.html` if it exists) with the latest remote version
+- **Empty directory** — creates `index.html` + `myop.config.json` with component metadata
+- **Custom output** — use `-o <path>` to write the HTML to a specific file; parent directories are created automatically
+
+## Browsing with `myop list`
+
+`myop list` lets you browse all components in your organization, search and filter, select multiple, and batch pull or push them.
+
+### Running list
+
+```bash
+# Interactive browse (prompts for org if multiple)
+myop list
+
+# Specify an organization
+myop list --org <orgId>
+```
+
+### When the user asks to list or browse
+
+When the user says **"show my components"**, **"list components"**, **"browse"**, or **"clone all components"**, you should:
+
+1. Run `npx @myop/cli list` via the terminal
+2. The interactive UI handles org selection, search, and batch operations
+
+### List behavior
+
+- **Organization memory** — the selected org is saved to `~/.myop/preferences.json` and reused next time
+- **Search** — type to filter components by name, select with enter, repeat across searches
+- **Batch pull** — downloads all selected components in parallel, each into its own subdirectory with `index.html` + `myop.config.json`
+- **Batch push** — scans local directories for matching `componentId`s and uploads them in parallel
+
 ## Workflow Summary
 
 1. `myop create` - Scaffold a new component

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

@@ -25,7 +25,9 @@ After installation, the `myop` command is available globally.
 |---------|-------------|
 | `myop create` | Create a new component (interactive, starts dev server after) |
 | `myop dev` | Start dev server with file watching and HMR |
-| `myop push` | Upload component to Myop platform |
+| `myop push [componentId]` | Upload component to Myop platform |
+| `myop pull [componentId]` | Download component HTML from Myop platform |
+| `myop list [--org <orgId>]` | Browse, search, and batch pull/push remote components |
 | `myop sync` | Build and upload component to Myop platform |
 | `myop login` | Authenticate with Myop (opens browser for OAuth) |
 | `myop logout` | Clear stored credentials |
@@ -110,16 +112,21 @@ The dev server detects changes and triggers builds automatically:
 Uploads the component directly to the Myop platform (no build step).
 
 ```bash
+# Push using componentId from myop.config.json
 myop push
+
+# Push to a specific remote component (overrides myop.config.json)
+myop push <componentId>
 ```
 
 **What it does:**
 1. Reads `myop.config.json`
-2. Finds the HTML file to upload (`index.html` in root for single-file mode, or `dist/index.html`)
-3. Authenticates (prompts for login if needed)
-4. Uploads HTML to Myop via presigned URL
-5. Confirms upload
-6. Updates `myop.config.json` with `componentId` (first push only)
+2. If a `componentId` argument is passed, it overrides the one in config
+3. Finds the HTML file to upload (`index.html` in root for single-file mode, or `dist/index.html`)
+4. Authenticates (prompts for login if needed)
+5. Uploads HTML to Myop via presigned URL
+6. Confirms upload
+7. Updates `myop.config.json` with `componentId` (first push only)
 
 **After first push:**
 - `myop.config.json` gets a real `componentId` (UUID)
@@ -131,6 +138,64 @@ myop push
 https://dashboard.myop.dev/dashboard/2.0/component/<componentId>
 ```
 
+## Pull Command
+
+Downloads a component's HTML from the Myop platform.
+
+```bash
+# Pull using componentId from myop.config.json
+myop pull
+
+# Pull a specific component by ID
+myop pull <componentId>
+
+# Pull to a specific output path
+myop pull <componentId> -o ./my-component/index.html
+```
+
+**What it does:**
+1. Determines `componentId` from the argument or `myop.config.json`
+2. Authenticates (prompts for login if needed)
+3. Fetches the component HTML from Myop
+4. Writes the HTML to `index.html` (or `dist/index.html` if it exists, or `-o` path)
+5. Creates or updates `myop.config.json` with the component metadata
+
+**Use cases:**
+- **Clone a remote component locally** — `myop pull <componentId>` in an empty directory creates `index.html` + `myop.config.json`
+- **Sync latest version** — run `myop pull` in an existing component directory to get the latest remote version
+- **Download to custom path** — use `-o` flag to specify where the HTML file should be saved
+
+## List Command
+
+Browse all components in your organization, search and filter, select multiple, then batch pull or push.
+
+```bash
+# Interactive browse (prompts for org if needed)
+myop list
+
+# Use a specific organization
+myop list --org <orgId>
+```
+
+**What it does:**
+1. Authenticates and loads your organizations
+2. Resolves which org to use (saved default, `--org` flag, or prompts)
+3. Fetches all components in the organization
+4. Shows a searchable list — type to filter, enter to select, repeat
+5. When done selecting, choose Pull or Push
+6. **Pull** — downloads all selected components in parallel, each into its own subdirectory with `index.html` + `myop.config.json`
+7. **Push** — scans local directories for matching `componentId`s and uploads them in parallel
+
+**Batch pull example** (great for cloning an environment):
+```bash
+mkdir my-components && cd my-components
+myop list
+# Select components, choose Pull
+# Each component gets its own subdirectory
+```
+
+**Organization memory** — the selected org is saved to `~/.myop/preferences.json` so you don't have to pick it every time.
+
 ## Sync Command
 
 Builds and uploads the component to the Myop platform (for multi-file projects with a build step).