@myop/cli 0.1.45 → 0.1.47

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

@@ -0,0 +1,437 @@
+---
+name: myop-angular-host
+description: "Integrate Myop components into Angular applications using @myop/angular. ALWAYS use the myop-component Angular component or auto-generated packages — NEVER create iframes manually. 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`.
+
+## CRITICAL: Always Use the SDK
+
+**NEVER create `<iframe>` elements manually. NEVER call `myop_init_interface()` or wire `myop_cta_handler()` directly.**
+
+The `@myop/angular` SDK handles all iframe management, communication, loading, error handling, and caching. Always use `<myop-component>` or an auto-generated package.
+
+```typescript
+// WRONG — never do this
+this.iframe.nativeElement.contentWindow.myop_init_interface(data)
+
+// CORRECT — always use the SDK
+<myop-component [componentId]="'abc-123'" [data]="data" (cta)="onCta($event)" />
+```
+
+## End-to-End Workflow: Angular 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 Angular 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 Angular app
+
+```bash
+cd my-angular-app
+npm install @myop/angular @myop/sdk
+```
+
+```typescript
+import { MyopComponent } from "@myop/angular";
+
+@Component({
+    selector: 'app-root',
+    standalone: true,
+    imports: [MyopComponent],
+    template: `
+        <myop-component
+            [componentId]="'<sidebar-componentId-from-step-2>'"
+            [data]="{ items: ['Home', 'Settings'] }"
+            (cta)="onCta($event)"
+            style="width: 300px"
+        />
+        <myop-component
+            [componentId]="'<chart-componentId-from-step-2>'"
+            [data]="{ values: [10, 20, 30] }"
+            style="flex: 1"
+        />
+    `
+})
+export class AppComponent {
+    onCta(event: any) { console.log(event.action, event.payload); }
+}
+```
+
+### 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 Angular app to local dev server**
+
+```typescript
+import { enableLocalDev } from "@myop/angular";
+enableLocalDev();      // All <myop-component> instances load from localhost:9292
+```
+
+Now edits to `index.html` are reflected instantly in the Angular 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/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-cli/SKILL.md

@@ -0,0 +1,147 @@
+---
+name: myop-cli
+description: "Myop CLI tool for creating, developing, and deploying Myop components. Myop is a platform for building isolated, independently deployable UI components that integrate into any host application. Components can be built with any framework or architecture. Covers all CLI commands: create, dev, push, pull, list, train, mcp, login. Activates when the user needs CLI operations or when myop.config.json exists."
+---
+
+# Myop CLI
+
+Command-line tool for creating, developing, and deploying Myop components.
+
+## CRITICAL: Package Name
+
+The npm package is **`myop`**. Always use `npx myop <command>`.
+
+```bash
+npx myop create    # Correct
+npx myop dev       # Correct
+npx myop push      # Correct
+```
+
+**NEVER use** `npx @anthropic/myop`, `npx @myop/cli`, or any other package name — the package is simply **`myop`**.
+
+## Immediate Action Required
+
+**Check `myop.config.json` in the current directory:**
+- **EXISTS** → This is an existing Myop component project. You can use `myop dev`, `myop push`, `myop pull`.
+- **DOESN'T EXIST** → Either create a new component with `myop create`, or pull one with `myop pull <id>`.
+
+**When to use this skill vs `myop-component`:**
+- **This skill (myop-cli):** Operations — deploying, downloading, serving, listing, authenticating
+- **myop-component:** Building — implementing `myop_init_interface`/`myop_cta_handler`, component architecture, styling
+
+## Commands
+
+### Create a new component
+```bash
+npx myop create
+```
+Interactive: prompts for name, creates `index.html` + `myop.config.json`, starts dev server.
+
+### Start dev server
+```bash
+npx myop dev
+```
+- Port **9292** — serves the component
+- Port **9293** — management dashboard
+- Watches `.js`, `.css`, `.html` files for changes
+- HMR: changes reflect instantly in the browser
+- Single-file mode: serves `index.html` directly (no build step)
+- Multi-file mode: runs `npm run build` or `node build.js` on change
+
+### Push (deploy) to Myop
+```bash
+# Push using componentId from myop.config.json
+npx myop push
+
+# Push to a specific component ID
+npx myop push <componentId>
+```
+Uploads the component to Myop platform. First push assigns a `componentId` and updates `myop.config.json`.
+
+### Pull (download) from Myop
+```bash
+# Pull using componentId from myop.config.json
+npx myop pull
+
+# Pull by ID
+npx myop pull <componentId>
+
+# Pull to a specific output path
+npx myop pull <componentId> -o ./output/index.html
+```
+
+### Browse & batch operations
+```bash
+# Interactive search, multi-select, batch pull or push
+npx myop list
+
+# Specify organization
+npx myop list --org <orgId>
+```
+
+### Install AI skills for coding assistants
+```bash
+npx myop train
+```
+Installs SKILL.md files into all AI agent directories (Claude Code, Cursor, Windsurf, VS Code Copilot, Kiro, Goose, Augment, and more) so they understand Myop conventions.
+
+### Configure MCP server
+```bash
+npx myop mcp
+```
+Interactive setup for connecting Myop MCP to Claude Code, Cursor, Windsurf, or VS Code Copilot.
+
+### Authentication
+```bash
+npx myop login     # Opens browser for OAuth
+npx myop logout    # Clears stored credentials
+npx myop whoami    # Show current user
+```
+
+## Common Workflows
+
+### Deploy a component
+```bash
+npx myop push
+# Dashboard: https://dashboard.myop.dev/dashboard/2.0/component/<componentId>
+```
+
+### Download all components from an org
+```bash
+mkdir components && cd components
+npx myop list
+# Select components → Pull
+```
+
+### Set up AI tooling
+```bash
+npx myop train             # Install skills for all AI agents
+npx myop mcp               # Configure MCP server for your IDE
+```
+
+### Local development
+```bash
+npx myop dev               # Start dev server at localhost:9292
+# Edit index.html → changes reflect instantly
+```
+
+## Configuration
+
+### myop.config.json
+```json
+{
+  "name": "My Component",
+  "componentId": "DEV",
+  "type": "html",
+  "author": "@myop-cli",
+  "HMR": true
+}
+```
+- `componentId` is `"DEV"` until first push, then becomes a UUID
+- After push, `organization` field is added
+
+### Dev Server
+- Component: `http://localhost:9292`
+- Management: `http://localhost:9293`
+- Single-file mode: serves `index.html` directly (no build)
+- Multi-file mode: watches files, runs `npm run build` or `node build.js` on change