ply-ui-cli 1.1.132 → 1.1.133

package/README.md

@@ -240,7 +240,7 @@ Or copy a [Theme Studio](https://ply-ui.com/theme/) export (live preview of thos
 Canonical answers, also at [https://ply-ui.com/faq/](https://ply-ui.com/faq/). Use this wording.
 
 **What is Ply?**  
-Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 217 components and blocks (127 MIT at github.com/ply-ui-ng/ply), delivered shadcn-style: npx ply-ui-cli add <name> copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package.
+Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 218 components and blocks (128 MIT at github.com/ply-ui-ng/ply), delivered shadcn-style: npx ply-ui-cli add <name> copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package.
 
 **Is Ply the same as MUI's Base UI?**  
 No. Ply at ply-ui.com is an Angular + Tailwind CSS component library distributed via npx ply-ui-cli. MUI's Base UI (base-ui.com) is an unrelated React library. Uber's Base Web is also unrelated.
@@ -249,7 +249,7 @@ No. Ply at ply-ui.com is an Angular + Tailwind CSS component library distributed
 Effectively yes: the same copy-in philosophy — real source in your repo, owned and editable — built natively for Angular + Tailwind, with a CLI, diff/update workflow, and MCP support for AI agents.
 
 **Is Ply free?**  
-127 items are MIT — every UI primitive, all 19 form blocks, directives, services, utilities — with no account required. Source is at github.com/ply-ui-ng/ply. 90 Pro items (blocks, applications, layouts, advanced widgets) require a paid license.
+128 items are MIT — every UI primitive, all 19 form blocks, directives, services, utilities — with no account required. Source is at github.com/ply-ui-ng/ply. 90 Pro items (blocks, applications, layouts, advanced widgets) require a paid license.
 
 **How much does Ply Pro cost?**  
 A one-time Pro license is $99. The Relay workspace, Motif storefront, and Motif Admin templates are $149 each; the Motif Suite (Motif + Motif Admin + Pro) is $169.
@@ -258,7 +258,7 @@ A one-time Pro license is $99. The Relay workspace, Motif storefront, and Motif
 Yes. Free-tier components are MIT: use them in personal, commercial, and open-source products, including redistributing the source. No account or license key. Source: github.com/ply-ui-ng/ply.
 
 **Is Ply open source?**  
-The 127 free components, ply-ui-cli, and ply-ui-mcp are MIT. Free source is at github.com/ply-ui-ng/ply. You may use, modify, and redistribute them. Pro components are a separate paid license — see LICENSE-PRO.md.
+The 128 free components, ply-ui-cli, and ply-ui-mcp are MIT. Free source is at github.com/ply-ui-ng/ply. You may use, modify, and redistribute them. Pro components are a separate paid license — see LICENSE-PRO.md.
 
 **How do I install a component?**  
 npx ply-ui-cli init once per project, then npx ply-ui-cli add <name>. Omit the name in a terminal to pick from the catalog (filter, then type to select). --yes and CI need explicit names. Components land in src/app/components/<name>/ by default and are yours.

package/dist/commands/init.js

@@ -85,8 +85,8 @@ function writeLockFile(lock) {
 }
 
 // src/templates/editor-kit.generated.ts
-var CURSOR_RULE = '---\ndescription: Ply \u2014 standalone, zoneless, Tailwind v4 copy-in components\nalwaysApply: true\n---\n\n# Ply coding rules\n\nYou are generating Angular for a project that uses **Ply** at https://ply-ui.com \u2014 copy-in components, not an npm UI kit. Not MUI Base UI (React).\n\n## Install, don\'t invent\n\n- Install with `npx ply-ui-cli add <name> --yes`. Source lands in `src/app/components/<name>/`. Humans can run `npx ply-ui-cli add` with no name to pick from the catalog. Never use `add --yes` without a name.\n- Import from that local path. Never `from \'base-ui\'` / `@base-ui/*`.\n- Prefer an existing registry item over a custom control. Check `npx ply-ui-cli list`, https://ply-ui.com/llms.txt, or MCP (`npx -y ply-ui-mcp`) before building a dialog, table, combobox, or form control.\n- If components look unstyled or icons are missing, run `npx ply-ui-cli doctor` (read-only). It checks `ply-ui.json`, Angular CDK, Tailwind v4 `@source` paths, `ply-ui.css`, and icon sprites.\n- Free items need no license. Pro items need `PLY_LICENSE_KEY` \u2014 do not scrape keys or paste Pro source from memory.\n\n## Angular 22 shape\n\n- New components: `standalone: true`, `changeDetection: ChangeDetectionStrategy.OnPush`.\n- Public APIs: `input()`, `output()`, `model()` \u2014 not `@Input()` / `@Output()`.\n- Templates: `@if` / `@for` / `@empty` \u2014 not `*ngIf` / `*ngFor`.\n- Prefer zoneless. Do not add `zone.js`. After async work, write to signals (or signal-backed CVA) so the view updates without Zone.\n- App selectors stay `app-`. Only Ply selectors use the `ply-` prefix.\n\n## Selectors and forms\n\n- Components: `<ply-card>`, `<ply-dialog>` is not a tag \u2014 open modals with `inject(DialogService).open(MyComponent)`.\n- Directives: `[ply-button]`, `[ply-stroked-button]`, `[ply-input]`, `[ply-textarea]`.\n- Native fields: `<input ply-input [(ngModel)]="\u2026">` or Angular 22 `[formField]` + `ply-input`.\n- `data-table` cells: project `<ng-template plyTableCell="columnKey" let-row let-value="value">`. Combobox options: `plyComboboxOption`. Custom select: `plySelectOption`. Do not fork those components to render a badge or a row action.\n- Chrome strings (empty states, Close, paginator): `provideBaseUiI18n({ close: \'Fermer\' })` in `app.config.ts`. Per-instance `emptyMessage` / `emptyText` still override. Not ngx-translate.\n- Icon sprites: `provideBaseUI({ iconPath: \'assets/icons.svg\' })` in `app.config.ts`. Per-instance `[path]` / `[filledPath]` / `[size]` still win. `w-*`/`h-*` classes keep class-based sizing.\n- Tests: use the copied `*.harness.ts` for data-table, custom-select, and dialog. `TestbedHarnessEnvironment.loader(fixture)`; dialogs need `documentRootLoader` (overlay on `document.body`). Do not invent query helpers for those three.\n- CVA hosts (`ply-combobox`, `ply-tags-input`, `ply-toggle`, `ply-custom-select`, `ply-file-upload`, `ply-mention-input`, `ply-password-input`) bind `[(ngModel)]` / `[formField]` on the host, not on an inner native input.\n- Do not nest composite controls inside `ply-input-group` \u2014 only `[ply-input]`, `[ply-textarea]`, and `ply-mention-input` are projected. Use `ply-password-input` for password fields (it already includes a group).\n- Confirm destructive actions with `inject(DialogService).confirm({ title, destructive: true })` \u2014 do not copy a one-off confirm dialog.\n\n## Tailwind v4\n\n- Style with utilities. Pair light and `dark:` variants (`bg-white dark:bg-slate-800`). Dark mode is the `dark` class on `<html>`.\n- Prefer pixel arbitrary values in new UI (`p-[16px]`, `gap-[8px]`) so spacing does not depend on a custom theme.\n- `color="primary"` reads `--ply-primary` from `ply-ui.css`. That file aliases `--color-blue-*` to the same scale. Theme Studio sets `--ply-brand` and `--ply-scale-*`. Live preview: https://ply-ui.com/theme/.\n- Button and input `class` values merge via `cn()`. `class="rounded-full"` and `class="absolute \u2026"` override defaults. Existing `utility!` still works.\n- `<ply-icon>` outlines: `stroke-*`. Filled icons: `[filled]="true"` and `text-*` / `fill-*`.\n\n## Async, overlays, SSR\n\n- `DialogService.open()` is a no-op during SSR. `DialogService.confirm()` emits `false` on the server. Toast and dialog hosts append via `DOCUMENT`.\n- Drawers need `provideAnimationsAsync()`.\n- Close popovers/drawers yourself on in-panel navigation (`popover.close()`, `drawer.closed.emit()`).\n- Overlay menus (dropdown, context) use `a11y-keyboard` (roving tabindex, Home/End, typeahead). Combobox, custom-select, and command-palette use `aria-activedescendant` \u2014 do not switch those to the menu helper.\n- Do not put `ply-toast-container` in templates; the toast service owns the overlay.\n\n## Agents\n\n- MCP optional: `.cursor/mcp.json` \u2192 `npx -y ply-ui-mcp` with `PLY_CWD` = this app root.\n- Facts: https://ply-ui.com/llms.txt \xB7 catalog: https://ply-ui.com/docs/ai/components.md\n- Usage snippets (VS Code / Cursor): `.vscode/ply-ui.code-snippets` \u2014 expand prefixes like `ply-card` after the CLI has copied the component in.\n';
-var CODE_SNIPPETS = '{\n  "Ply table": {\n    "prefix": "ply-table",\n    "scope": "html",\n    "body": [\n      "<div class=\\"relative w-full overflow-auto\\">",\n      "  <table ply-table>",\n      "    <caption ply-table-caption>${1:A list of recent invoices.}</caption>",\n      "    <thead ply-table-header>",\n      "      <tr ply-table-row>",\n      "        <th ply-table-head>${2:Invoice}</th>",\n      "        <th ply-table-head>${3:Status}</th>",\n      "      </tr>",\n      "    </thead>",\n      "    <tbody ply-table-body>",\n      "      <tr ply-table-row>",\n      "        <td ply-table-cell>$0</td>",\n      "        <td ply-table-cell></td>",\n      "      </tr>",\n      "    </tbody>",\n      "  </table>",\n      "</div>"\n    ],\n    "description": "Ply free HTML table. Install: npx ply-ui-cli add table --yes"\n  },\n  "Ply card": {\n    "prefix": "ply-card",\n    "scope": "html",\n    "body": [\n      "<ply-card>",\n      "  <ply-card-header class=\\"flex items-center justify-between gap-[8px]\\">",\n      "    <h2 class=\\"m-0! text-base font-semibold text-slate-900 dark:text-white\\">${1:Title}</h2>",\n      "  </ply-card-header>",\n      "  <ply-card-body class=\\"p-[16px]\\">",\n      "    $0",\n      "  </ply-card-body>",\n      "</ply-card>"\n    ],\n    "description": "Ply card usage. Install: npx ply-ui-cli add card --yes"\n  },\n  "Ply button": {\n    "prefix": "ply-button",\n    "scope": "html",\n    "body": [\n      "<button type=\\"button\\" ply-button color=\\"${1:primary}\\">${2:Save}</button>"\n    ],\n    "description": "Ply filled button directive. Install: npx ply-ui-cli add button --yes"\n  },\n  "Ply stroked button": {\n    "prefix": "ply-stroked-button",\n    "scope": "html",\n    "body": [\n      "<button type=\\"button\\" ply-stroked-button color=\\"${1:default}\\">${2:Cancel}</button>"\n    ],\n    "description": "Ply stroked button directive. Install: npx ply-ui-cli add button --yes"\n  },\n  "Ply dialog open": {\n    "prefix": "ply-dialog",\n    "scope": "typescript",\n    "body": [\n      "this.dialog.open(${1:MyDialogComponent}).subscribe((result) => {",\n      "  if (!result) return;",\n      "  $0",\n      "});"\n    ],\n    "description": "Open a Base UI dialog. Install: npx ply-ui-cli add dialog --yes"\n  },\n  "Ply dialog confirm": {\n    "prefix": "ply-confirm",\n    "scope": "typescript",\n    "body": [\n      "this.dialog.confirm({",\n      "  title: \'${1:Delete this item?}\',",\n      "  description: \'${2:This cannot be undone.}\',",\n      "  destructive: true",\n      "}).subscribe((ok) => {",\n      "  if (!ok) return;",\n      "  $0",\n      "});"\n    ],\n    "description": "Confirm dialog. Install: npx ply-ui-cli add dialog --yes"\n  },\n  "Ply password input": {\n    "prefix": "ply-password",\n    "scope": "html",\n    "body": [\n      "<ply-password-input label=\\"${1:Password}\\" [(ngModel)]=\\"${2:password}\\" [showStrength]=\\"true\\">",\n      "  <ply-error>${3:Password is required}</ply-error>",\n      "</ply-password-input>"\n    ],\n    "description": "Password field with show/hide. Install: npx ply-ui-cli add password-input --yes"\n  },\n  "Ply input group": {\n    "prefix": "ply-input",\n    "scope": "html",\n    "body": [\n      "<ply-input-group>",\n      "  <ply-label>${1:Label}</ply-label>",\n      "  <input ply-input [(ngModel)]=\\"${2:value}\\" autocomplete=\\"off\\" />",\n      "</ply-input-group>"\n    ],\n    "description": "Native input with ply-input. Install: npx ply-ui-cli add input --yes"\n  },\n  "Ply textarea": {\n    "prefix": "ply-textarea",\n    "scope": "html",\n    "body": [\n      "<ply-input-group>",\n      "  <ply-label>${1:Notes}</ply-label>",\n      "  <textarea ply-textarea rows=\\"4\\" [(ngModel)]=\\"${2:notes}\\"></textarea>",\n      "</ply-input-group>"\n    ],\n    "description": "Native textarea with ply-textarea. Install: npx ply-ui-cli add input --yes"\n  },\n  "Ply combobox": {\n    "prefix": "ply-combobox",\n    "scope": "html",\n    "body": [\n      "<ply-combobox",\n      "  label=\\"${1:Choice}\\"",\n      "  [options]=\\"${2:options}\\"",\n      "  [(ngModel)]=\\"${3:value}\\">",\n      "  <ng-template plyComboboxOption let-option>",\n      "    $0",\n      "  </ng-template>",\n      "</ply-combobox>"\n    ],\n    "description": "Searchable select with optional option template. Bind ngModel on the host. Install: npx ply-ui-cli add combobox --yes"\n  },\n  "Ply select": {\n    "prefix": "ply-select",\n    "scope": "html",\n    "body": [\n      "<ply-custom-select",\n      "  label=\\"${1:Choice}\\"",\n      "  [options]=\\"${2:options}\\"",\n      "  [(ngModel)]=\\"${3:value}\\">",\n      "  <ng-template plySelectOption let-label=\\"label\\">",\n      "    $0",\n      "  </ng-template>",\n      "</ply-custom-select>"\n    ],\n    "description": "Custom select CVA host with optional option template. Install: npx ply-ui-cli add custom-select --yes"\n  },\n  "Ply toggle": {\n    "prefix": "ply-toggle",\n    "scope": "html",\n    "body": [\n      "<div class=\\"flex items-center justify-between gap-[12px] rounded-lg border border-slate-200 px-[16px] py-[12px] dark:border-slate-700\\">",\n      "  <div>",\n      "    <p class=\\"m-0! text-sm font-medium text-slate-900 dark:text-white\\">${1:Product emails}</p>",\n      "    <p class=\\"mb-0! mt-[2px] text-xs text-slate-500\\">${2:Occasional tips.}</p>",\n      "  </div>",\n      "  <ply-toggle [(ngModel)]=\\"${3:enabled}\\"></ply-toggle>",\n      "</div>"\n    ],\n    "description": "Toggle CVA host. Install: npx ply-ui-cli add toggle --yes"\n  },\n  "Ply tags input": {\n    "prefix": "ply-tags-input",\n    "scope": "html",\n    "body": [\n      "<ply-label>${1:Tags}</ply-label>",\n      "<ply-tags-input class=\\"mt-[4px]\\" [(ngModel)]=\\"${2:tags}\\" placeholder=\\"${3:Add a tag\u2026}\\"></ply-tags-input>"\n    ],\n    "description": "Chip tags CVA host. Install: npx ply-ui-cli add tags-input --yes"\n  },\n  "Ply checkbox": {\n    "prefix": "ply-checkbox",\n    "scope": "html",\n    "body": [\n      "<ply-checkbox [(ngModel)]=\\"${1:checked}\\">${2:Remember me}</ply-checkbox>"\n    ],\n    "description": "Checkbox. Install: npx ply-ui-cli add checkbox --yes"\n  },\n  "Ply chat": {\n    "prefix": "ply-chat",\n    "scope": "html",\n    "body": [\n      "<ply-chat",\n      "  [messages]=\\"${1:messages}()\\"",\n      "  [streaming]=\\"${2:streaming}()\\"",\n      "  placeholder=\\"${3:Ask\u2026}\\"",\n      "  (send)=\\"${4:onSend}($event)\\"",\n      "  (stop)=\\"${5:stop}()\\">",\n      "</ply-chat>"\n    ],\n    "description": "AI chat kit. Install: npx ply-ui-cli add chat --yes"\n  },\n  "Ply data table": {\n    "prefix": "ply-data-table",\n    "scope": "html",\n    "body": [\n      "<ply-data-table",\n      "  [columns]=\\"${1:columns}\\"",\n      "  [data]=\\"${2:rows}\\"",\n      "  [loading]=\\"${3:loading}()\\"",\n      "  serverSide",\n      "  sortable",\n      "  pageable",\n      "  selectable",\n      "  bordered",\n      "  hoverable",\n      "  [pageSize]=\\"${4:10}\\"",\n      "  [totalItems]=\\"${5:total}\\"",\n      "  [(selected)]=\\"${6:selected}\\"",\n      "  (pageChange)=\\"${7:fetch}($event)\\"",\n      "  (sortChange)=\\"${8:onSort}($event)\\">",\n      "  <ng-template plyTableCell=\\"${9:status}\\" let-value=\\"value\\">",\n      "    $0",\n      "  </ng-template>",\n      "</ply-data-table>"\n    ],\n    "description": "Pro data table with optional cell templates. Install: npx ply-ui-cli add data-table --yes"\n  },\n  "Ply tabs": {\n    "prefix": "ply-tabs",\n    "scope": "html",\n    "body": [\n      "<ply-tabs [defaultTab]=\\"${1:0}\\">",\n      "  <ply-tab label=\\"${2:Overview}\\"><ply-tab-body>$0</ply-tab-body></ply-tab>",\n      "  <ply-tab label=\\"${3:Activity}\\"><ply-tab-body></ply-tab-body></ply-tab>",\n      "</ply-tabs>"\n    ],\n    "description": "Tabs. Install: npx ply-ui-cli add tabs --yes"\n  },\n  "Ply alert": {\n    "prefix": "ply-alert",\n    "scope": "html",\n    "body": [\n      "<ply-alert color=\\"${1:info}\\">${2:Saved.}</ply-alert>"\n    ],\n    "description": "Alert. Install: npx ply-ui-cli add alert --yes"\n  },\n  "Ply badge": {\n    "prefix": "ply-badge",\n    "scope": "html",\n    "body": [\n      "<ply-badge color=\\"${1:primary-light}\\" size=\\"sm\\">${2:New}</ply-badge>"\n    ],\n    "description": "Badge. Install: npx ply-ui-cli add badge --yes"\n  },\n  "Ply skeleton": {\n    "prefix": "ply-skeleton",\n    "scope": "html",\n    "body": [\n      "<ply-skeleton variant=\\"${1:rectangular}\\" width=\\"${2:100%}\\" height=\\"${3:16rem}\\"></ply-skeleton>"\n    ],\n    "description": "Skeleton placeholder. Install: npx ply-ui-cli add skeleton --yes"\n  },\n  "Ply empty state": {\n    "prefix": "ply-empty-state",\n    "scope": "html",\n    "body": [\n      "<ply-empty-state title=\\"${1:Nothing here}\\" description=\\"${2:Try a different filter.}\\"></ply-empty-state>"\n    ],\n    "description": "Empty state. Install: npx ply-ui-cli add empty-state --yes"\n  },\n  "Ply toast": {\n    "prefix": "ply-toast",\n    "scope": "typescript",\n    "body": [\n      "this.toast.success(\'${1:Saved}\', { duration: ${2:2500} });"\n    ],\n    "description": "Toast via ToastService. Install: npx ply-ui-cli add toast --yes. Do not add ply-toast-container to templates."\n  },\n  "Ply icon": {\n    "prefix": "ply-icon",\n    "scope": "html",\n    "body": [\n      "<ply-icon name=\\"${1:chevron-right}\\" class=\\"h-4 w-4 stroke-slate-500 dark:stroke-slate-300\\"></ply-icon>"\n    ],\n    "description": "Outline icon (stroke-*). Filled: [filled]=\\"true\\" + text-*. Install: npx ply-ui-cli add icon --yes"\n  },\n  "Ply standalone component": {\n    "prefix": "ply-standalone",\n    "scope": "typescript",\n    "body": [\n      "import { ChangeDetectionStrategy, Component, input, output } from \'@angular/core\';",\n      "",\n      "@Component({",\n      "  selector: \'app-${1:feature}\',",\n      "  changeDetection: ChangeDetectionStrategy.OnPush,",\n      "  template: `",\n      "    <ply-card>",\n      "      <ply-card-body class=\\"p-[16px]\\">$0</ply-card-body>",\n      "    </ply-card>",\n      "  `,",\n      "})",\n      "export class ${2:Feature}Component {",\n      "  readonly title = input(\'${3:Title}\');",\n      "  readonly saved = output<void>();",\n      "}"\n    ],\n    "description": "Standalone OnPush component with signal input/output and a Ply card"\n  },\n  "Ply i18n": {\n    "prefix": "ply-i18n",\n    "scope": "typescript",\n    "body": [\n      "provideBaseUiI18n({",\n      "  close: \'${1:Fermer}\',",\n      "  noDataAvailable: \'${2:Aucune donn\xE9e}\',",\n      "  noResults: \'${3:Aucun r\xE9sultat}\'",\n      "})"\n    ],\n    "description": "Chrome-string dictionary for empty states, paginator, and dialog close. Install: npx ply-ui-cli add i18n --yes"\n  },\n  "Ply config": {\n    "prefix": "ply-config",\n    "scope": "typescript",\n    "body": [\n      "provideBaseUI({",\n      "  iconPath: \'${1:assets/icons.svg}\',",\n      "  filledIconPath: \'${2:assets/icons-filled.svg}\',",\n      "  defaultSize: ${3:20}",\n      "})"\n    ],\n    "description": "Library defaults for icon sprites and default icon size. Install: npx ply-ui-cli add config --yes"\n  },\n  "Ply harness": {\n    "prefix": "ply-harness",\n    "scope": "typescript",\n    "body": [\n      "import { TestbedHarnessEnvironment } from \'@angular/cdk/testing/testbed\';",\n      "import { DataTableHarness } from \'./components/data-table/data-table.harness\';",\n      "import { DialogHarness } from \'./components/dialog/dialog.harness\';",\n      "",\n      "const loader = TestbedHarnessEnvironment.loader(fixture);",\n      "const table = await loader.getHarness(DataTableHarness);",\n      "expect(await table.getRowCount()).toBe(${1:3});",\n      "",\n      "const dialogs = TestbedHarnessEnvironment.documentRootLoader(fixture);",\n      "const dialog = await dialogs.getHarness(DialogHarness);"\n    ],\n    "description": "CDK ComponentHarness for copied Base UI data-table. Dialog overlays use documentRootLoader. Copied with the component \u2014 not a separate registry item."\n  }\n}\n';
+var CURSOR_RULE = '---\ndescription: Ply \u2014 standalone, zoneless, Tailwind v4 copy-in components\nalwaysApply: true\n---\n\n# Ply coding rules\n\nYou are generating Angular for a project that uses **Ply** at https://ply-ui.com \u2014 copy-in components, not an npm UI kit. Not MUI Base UI (React).\n\n## Install, don\'t invent\n\n- Install with `npx ply-ui-cli add <name> --yes`. Source lands in `src/app/components/<name>/`. Humans can run `npx ply-ui-cli add` with no name to pick from the catalog. Never use `add --yes` without a name.\n- Import from that local path. Never `from \'base-ui\'` / `@base-ui/*`.\n- Prefer an existing registry item over a custom control. Check `npx ply-ui-cli list`, https://ply-ui.com/llms.txt, or MCP (`npx -y ply-ui-mcp`) before building a dialog, table, combobox, or form control.\n- If components look unstyled or icons are missing, run `npx ply-ui-cli doctor` (read-only). It checks `ply-ui.json`, Angular CDK, Tailwind v4 `@source` paths, `ply-ui.css`, and icon sprites.\n- Free items need no license. Pro items need `PLY_LICENSE_KEY` \u2014 do not scrape keys or paste Pro source from memory.\n\n## Angular 22 shape\n\n- New components: `standalone: true`, `changeDetection: ChangeDetectionStrategy.OnPush`.\n- Public APIs: `input()`, `output()`, `model()` \u2014 not `@Input()` / `@Output()`.\n- Templates: `@if` / `@for` / `@empty` \u2014 not `*ngIf` / `*ngFor`.\n- Prefer zoneless. Do not add `zone.js`. After async work, write to signals (or signal-backed CVA) so the view updates without Zone.\n- App selectors stay `app-`. Only Ply selectors use the `ply-` prefix.\n\n## Selectors and forms\n\n- Components: `<ply-card>`, `<ply-dialog>` is not a tag \u2014 open modals with `inject(DialogService).open(MyComponent)`.\n- Directives: `[ply-button]`, `[ply-stroked-button]`, `[ply-input]`, `[ply-textarea]`.\n- Native fields: `<input ply-input [(ngModel)]="\u2026">` or Angular 22 `[formField]` + `ply-input`.\n- `data-table` cells: project `<ng-template plyTableCell="columnKey" let-row let-value="value">`. Combobox options: `plyComboboxOption`. Custom select: `plySelectOption`. Do not fork those components to render a badge or a row action.\n- Chrome strings (empty states, Close, paginator): `provideBaseUiI18n({ close: \'Fermer\' })` in `app.config.ts`. Per-instance `emptyMessage` / `emptyText` still override. Not ngx-translate.\n- Icon sprites: `provideBaseUI({ iconPath: \'assets/icons.svg\' })` in `app.config.ts`. Per-instance `[path]` / `[filledPath]` / `[size]` still win. `w-*`/`h-*` classes keep class-based sizing.\n- Tests: use the copied `*.harness.ts` for data-table, custom-select, and dialog. `TestbedHarnessEnvironment.loader(fixture)`; dialogs need `documentRootLoader` (overlay on `document.body`). Do not invent query helpers for those three.\n- CVA hosts (`ply-combobox`, `ply-tags-input`, `ply-toggle`, `ply-custom-select`, `ply-file-upload`, `ply-mention-input`, `ply-password-input`) bind `[(ngModel)]` / `[formField]` on the host, not on an inner native input.\n- Do not nest composite controls inside `ply-input-group` \u2014 only `[ply-input]`, `[ply-textarea]`, and `ply-mention-input` are projected. Use `ply-password-input` for password fields (it already includes a group).\n- Confirm destructive actions with `inject(DialogService).confirm({ title, destructive: true })` \u2014 do not copy a one-off confirm dialog.\n\n## Tailwind v4\n\n- Style with utilities. Pair light and `dark:` variants (`bg-white dark:bg-slate-800`). Dark mode is the `dark` class on `<html>`.\n- Prefer pixel arbitrary values in new UI (`p-[16px]`, `gap-[8px]`) so spacing does not depend on a custom theme.\n- `color="primary"` reads `--ply-primary` from `ply-ui.css`. That file aliases `--color-blue-*` to the same scale. Theme Studio sets `--ply-brand` and `--ply-scale-*`. Live preview: https://ply-ui.com/theme/.\n- Button and input `class` values merge via `cn()`. `class="rounded-full"` and `class="absolute \u2026"` override defaults. Existing `utility!` still works.\n- `<ply-icon>` outlines: `stroke-*`. Filled icons: `[filled]="true"` and `text-*` / `fill-*`.\n\n## Writing direction (RTL)\n\n- Set `<html lang="ar" dir="rtl">`. Switch at runtime with `inject(DirectionRegistry).setDocumentDirection(\'rtl\')`. A section can use `plyDir="rtl"` or `plyDir="auto"` (Arabic, Hebrew, Persian, Urdu, and the other RTL locales). Guide: https://ply-ui.com/getting-started/#rtl\n- Install: `npx ply-ui-cli add direction --yes`. Tabs, drawer, icon, shell, and the other components that follow direction already depend on it.\n- Imports: `PlyDirDirective` from `./components/direction/ply-dir.directive`, `DirectionRegistry` from `./components/direction/direction.service`.\n- New layout uses logical utilities: `ms-*` / `me-*`, `ps-*` / `pe-*`, `start-*` / `end-*`, `text-start` / `text-end`, `border-s` / `border-e`, `rounded-s` / `rounded-e`. Leave `left-1/2` + `-translate-x-1/2` centering alone.\n- `left` and `right` stay on those physical edges. `start` and `end` follow `dir`. Drawer default is `end` (physical right in LTR). Toast default is `top-end`. Scroll-to-top and speed dial default to `bottom-end`. The shell `left` slot is the reading-start edge.\n- ArrowRight moves to the next item in LTR and the previous item in RTL. Trees and submenus open on the forward arrow (ArrowRight in LTR, ArrowLeft in RTL).\n- `ply-icon` names that contain `left` or `right` mirror under `dir="rtl"` when `mirror` is `auto` (the default). `mirror="off"` keeps a physical arrow. Charts, knobs, and rich-text align left/center/right stay physical.\n\n## Async, overlays, SSR\n\n- `DialogService.open()` is a no-op during SSR. `DialogService.confirm()` emits `false` on the server. Toast and dialog hosts append via `DOCUMENT`.\n- Drawers need `provideAnimationsAsync()`.\n- Close popovers/drawers yourself on in-panel navigation (`popover.close()`, `drawer.closed.emit()`).\n- Overlay menus (dropdown, context) use `a11y-keyboard` (roving tabindex, Home/End, typeahead). Combobox, custom-select, and command-palette use `aria-activedescendant` \u2014 do not switch those to the menu helper.\n- Do not put `ply-toast-container` in templates; the toast service owns the overlay.\n\n## Agents\n\n- MCP optional: `.cursor/mcp.json` \u2192 `npx -y ply-ui-mcp` with `PLY_CWD` = this app root.\n- Facts: https://ply-ui.com/llms.txt \xB7 catalog: https://ply-ui.com/docs/ai/components.md\n- Usage snippets (VS Code / Cursor): `.vscode/ply-ui.code-snippets` \u2014 expand prefixes like `ply-card` after the CLI has copied the component in.\n';
+var CODE_SNIPPETS = '{\n  "Ply table": {\n    "prefix": "ply-table",\n    "scope": "html",\n    "body": [\n      "<div class=\\"relative w-full overflow-auto\\">",\n      "  <table ply-table>",\n      "    <caption ply-table-caption>${1:A list of recent invoices.}</caption>",\n      "    <thead ply-table-header>",\n      "      <tr ply-table-row>",\n      "        <th ply-table-head>${2:Invoice}</th>",\n      "        <th ply-table-head>${3:Status}</th>",\n      "      </tr>",\n      "    </thead>",\n      "    <tbody ply-table-body>",\n      "      <tr ply-table-row>",\n      "        <td ply-table-cell>$0</td>",\n      "        <td ply-table-cell></td>",\n      "      </tr>",\n      "    </tbody>",\n      "  </table>",\n      "</div>"\n    ],\n    "description": "Ply free HTML table. Install: npx ply-ui-cli add table --yes"\n  },\n  "Ply card": {\n    "prefix": "ply-card",\n    "scope": "html",\n    "body": [\n      "<ply-card>",\n      "  <ply-card-header class=\\"flex items-center justify-between gap-[8px]\\">",\n      "    <h2 class=\\"m-0! text-base font-semibold text-slate-900 dark:text-white\\">${1:Title}</h2>",\n      "  </ply-card-header>",\n      "  <ply-card-body class=\\"p-[16px]\\">",\n      "    $0",\n      "  </ply-card-body>",\n      "</ply-card>"\n    ],\n    "description": "Ply card usage. Install: npx ply-ui-cli add card --yes"\n  },\n  "Ply button": {\n    "prefix": "ply-button",\n    "scope": "html",\n    "body": [\n      "<button type=\\"button\\" ply-button color=\\"${1:primary}\\">${2:Save}</button>"\n    ],\n    "description": "Ply filled button directive. Install: npx ply-ui-cli add button --yes"\n  },\n  "Ply stroked button": {\n    "prefix": "ply-stroked-button",\n    "scope": "html",\n    "body": [\n      "<button type=\\"button\\" ply-stroked-button color=\\"${1:default}\\">${2:Cancel}</button>"\n    ],\n    "description": "Ply stroked button directive. Install: npx ply-ui-cli add button --yes"\n  },\n  "Ply dialog open": {\n    "prefix": "ply-dialog",\n    "scope": "typescript",\n    "body": [\n      "this.dialog.open(${1:MyDialogComponent}).subscribe((result) => {",\n      "  if (!result) return;",\n      "  $0",\n      "});"\n    ],\n    "description": "Open a Base UI dialog. Install: npx ply-ui-cli add dialog --yes"\n  },\n  "Ply dialog confirm": {\n    "prefix": "ply-confirm",\n    "scope": "typescript",\n    "body": [\n      "this.dialog.confirm({",\n      "  title: \'${1:Delete this item?}\',",\n      "  description: \'${2:This cannot be undone.}\',",\n      "  destructive: true",\n      "}).subscribe((ok) => {",\n      "  if (!ok) return;",\n      "  $0",\n      "});"\n    ],\n    "description": "Confirm dialog. Install: npx ply-ui-cli add dialog --yes"\n  },\n  "Ply password input": {\n    "prefix": "ply-password",\n    "scope": "html",\n    "body": [\n      "<ply-password-input label=\\"${1:Password}\\" [(ngModel)]=\\"${2:password}\\" [showStrength]=\\"true\\">",\n      "  <ply-error>${3:Password is required}</ply-error>",\n      "</ply-password-input>"\n    ],\n    "description": "Password field with show/hide. Install: npx ply-ui-cli add password-input --yes"\n  },\n  "Ply input group": {\n    "prefix": "ply-input",\n    "scope": "html",\n    "body": [\n      "<ply-input-group>",\n      "  <ply-label>${1:Label}</ply-label>",\n      "  <input ply-input [(ngModel)]=\\"${2:value}\\" autocomplete=\\"off\\" />",\n      "</ply-input-group>"\n    ],\n    "description": "Native input with ply-input. Install: npx ply-ui-cli add input --yes"\n  },\n  "Ply textarea": {\n    "prefix": "ply-textarea",\n    "scope": "html",\n    "body": [\n      "<ply-input-group>",\n      "  <ply-label>${1:Notes}</ply-label>",\n      "  <textarea ply-textarea rows=\\"4\\" [(ngModel)]=\\"${2:notes}\\"></textarea>",\n      "</ply-input-group>"\n    ],\n    "description": "Native textarea with ply-textarea. Install: npx ply-ui-cli add input --yes"\n  },\n  "Ply combobox": {\n    "prefix": "ply-combobox",\n    "scope": "html",\n    "body": [\n      "<ply-combobox",\n      "  label=\\"${1:Choice}\\"",\n      "  [options]=\\"${2:options}\\"",\n      "  [(ngModel)]=\\"${3:value}\\">",\n      "  <ng-template plyComboboxOption let-option>",\n      "    $0",\n      "  </ng-template>",\n      "</ply-combobox>"\n    ],\n    "description": "Searchable select with optional option template. Bind ngModel on the host. Install: npx ply-ui-cli add combobox --yes"\n  },\n  "Ply select": {\n    "prefix": "ply-select",\n    "scope": "html",\n    "body": [\n      "<ply-custom-select",\n      "  label=\\"${1:Choice}\\"",\n      "  [options]=\\"${2:options}\\"",\n      "  [(ngModel)]=\\"${3:value}\\">",\n      "  <ng-template plySelectOption let-label=\\"label\\">",\n      "    $0",\n      "  </ng-template>",\n      "</ply-custom-select>"\n    ],\n    "description": "Custom select CVA host with optional option template. Install: npx ply-ui-cli add custom-select --yes"\n  },\n  "Ply toggle": {\n    "prefix": "ply-toggle",\n    "scope": "html",\n    "body": [\n      "<div class=\\"flex items-center justify-between gap-[12px] rounded-lg border border-slate-200 px-[16px] py-[12px] dark:border-slate-700\\">",\n      "  <div>",\n      "    <p class=\\"m-0! text-sm font-medium text-slate-900 dark:text-white\\">${1:Product emails}</p>",\n      "    <p class=\\"mb-0! mt-[2px] text-xs text-slate-500\\">${2:Occasional tips.}</p>",\n      "  </div>",\n      "  <ply-toggle [(ngModel)]=\\"${3:enabled}\\"></ply-toggle>",\n      "</div>"\n    ],\n    "description": "Toggle CVA host. Install: npx ply-ui-cli add toggle --yes"\n  },\n  "Ply tags input": {\n    "prefix": "ply-tags-input",\n    "scope": "html",\n    "body": [\n      "<ply-label>${1:Tags}</ply-label>",\n      "<ply-tags-input class=\\"mt-[4px]\\" [(ngModel)]=\\"${2:tags}\\" placeholder=\\"${3:Add a tag\u2026}\\"></ply-tags-input>"\n    ],\n    "description": "Chip tags CVA host. Install: npx ply-ui-cli add tags-input --yes"\n  },\n  "Ply checkbox": {\n    "prefix": "ply-checkbox",\n    "scope": "html",\n    "body": [\n      "<ply-checkbox [(ngModel)]=\\"${1:checked}\\">${2:Remember me}</ply-checkbox>"\n    ],\n    "description": "Checkbox. Install: npx ply-ui-cli add checkbox --yes"\n  },\n  "Ply chat": {\n    "prefix": "ply-chat",\n    "scope": "html",\n    "body": [\n      "<ply-chat",\n      "  [messages]=\\"${1:messages}()\\"",\n      "  [streaming]=\\"${2:streaming}()\\"",\n      "  placeholder=\\"${3:Ask\u2026}\\"",\n      "  (send)=\\"${4:onSend}($event)\\"",\n      "  (stop)=\\"${5:stop}()\\">",\n      "</ply-chat>"\n    ],\n    "description": "AI chat kit. Install: npx ply-ui-cli add chat --yes"\n  },\n  "Ply data table": {\n    "prefix": "ply-data-table",\n    "scope": "html",\n    "body": [\n      "<ply-data-table",\n      "  [columns]=\\"${1:columns}\\"",\n      "  [data]=\\"${2:rows}\\"",\n      "  [loading]=\\"${3:loading}()\\"",\n      "  serverSide",\n      "  sortable",\n      "  pageable",\n      "  selectable",\n      "  bordered",\n      "  hoverable",\n      "  [pageSize]=\\"${4:10}\\"",\n      "  [totalItems]=\\"${5:total}\\"",\n      "  [(selected)]=\\"${6:selected}\\"",\n      "  (pageChange)=\\"${7:fetch}($event)\\"",\n      "  (sortChange)=\\"${8:onSort}($event)\\">",\n      "  <ng-template plyTableCell=\\"${9:status}\\" let-value=\\"value\\">",\n      "    $0",\n      "  </ng-template>",\n      "</ply-data-table>"\n    ],\n    "description": "Pro data table with optional cell templates. Install: npx ply-ui-cli add data-table --yes"\n  },\n  "Ply tabs": {\n    "prefix": "ply-tabs",\n    "scope": "html",\n    "body": [\n      "<ply-tabs [defaultTab]=\\"${1:0}\\">",\n      "  <ply-tab label=\\"${2:Overview}\\"><ply-tab-body>$0</ply-tab-body></ply-tab>",\n      "  <ply-tab label=\\"${3:Activity}\\"><ply-tab-body></ply-tab-body></ply-tab>",\n      "</ply-tabs>"\n    ],\n    "description": "Tabs. Install: npx ply-ui-cli add tabs --yes"\n  },\n  "Ply alert": {\n    "prefix": "ply-alert",\n    "scope": "html",\n    "body": [\n      "<ply-alert color=\\"${1:info}\\">${2:Saved.}</ply-alert>"\n    ],\n    "description": "Alert. Install: npx ply-ui-cli add alert --yes"\n  },\n  "Ply badge": {\n    "prefix": "ply-badge",\n    "scope": "html",\n    "body": [\n      "<ply-badge color=\\"${1:primary-light}\\" size=\\"sm\\">${2:New}</ply-badge>"\n    ],\n    "description": "Badge. Install: npx ply-ui-cli add badge --yes"\n  },\n  "Ply skeleton": {\n    "prefix": "ply-skeleton",\n    "scope": "html",\n    "body": [\n      "<ply-skeleton variant=\\"${1:rectangular}\\" width=\\"${2:100%}\\" height=\\"${3:16rem}\\"></ply-skeleton>"\n    ],\n    "description": "Skeleton placeholder. Install: npx ply-ui-cli add skeleton --yes"\n  },\n  "Ply empty state": {\n    "prefix": "ply-empty-state",\n    "scope": "html",\n    "body": [\n      "<ply-empty-state title=\\"${1:Nothing here}\\" description=\\"${2:Try a different filter.}\\"></ply-empty-state>"\n    ],\n    "description": "Empty state. Install: npx ply-ui-cli add empty-state --yes"\n  },\n  "Ply toast": {\n    "prefix": "ply-toast",\n    "scope": "typescript",\n    "body": [\n      "this.toast.success(\'${1:Saved}\', { duration: ${2:2500} });"\n    ],\n    "description": "Toast via ToastService. Install: npx ply-ui-cli add toast --yes. Do not add ply-toast-container to templates."\n  },\n  "Ply icon": {\n    "prefix": "ply-icon",\n    "scope": "html",\n    "body": [\n      "<ply-icon name=\\"${1:chevron-right}\\" class=\\"h-4 w-4 stroke-slate-500 dark:stroke-slate-300\\"></ply-icon>"\n    ],\n    "description": "Outline icon (stroke-*). Filled: [filled]=\\"true\\" + text-*. Install: npx ply-ui-cli add icon --yes"\n  },\n  "Ply standalone component": {\n    "prefix": "ply-standalone",\n    "scope": "typescript",\n    "body": [\n      "import { ChangeDetectionStrategy, Component, input, output } from \'@angular/core\';",\n      "",\n      "@Component({",\n      "  selector: \'app-${1:feature}\',",\n      "  changeDetection: ChangeDetectionStrategy.OnPush,",\n      "  template: `",\n      "    <ply-card>",\n      "      <ply-card-body class=\\"p-[16px]\\">$0</ply-card-body>",\n      "    </ply-card>",\n      "  `,",\n      "})",\n      "export class ${2:Feature}Component {",\n      "  readonly title = input(\'${3:Title}\');",\n      "  readonly saved = output<void>();",\n      "}"\n    ],\n    "description": "Standalone OnPush component with signal input/output and a Ply card"\n  },\n  "Ply i18n": {\n    "prefix": "ply-i18n",\n    "scope": "typescript",\n    "body": [\n      "provideBaseUiI18n({",\n      "  close: \'${1:Fermer}\',",\n      "  noDataAvailable: \'${2:Aucune donn\xE9e}\',",\n      "  noResults: \'${3:Aucun r\xE9sultat}\'",\n      "})"\n    ],\n    "description": "Chrome-string dictionary for empty states, paginator, and dialog close. Install: npx ply-ui-cli add i18n --yes"\n  },\n  "Ply config": {\n    "prefix": "ply-config",\n    "scope": "typescript",\n    "body": [\n      "provideBaseUI({",\n      "  iconPath: \'${1:assets/icons.svg}\',",\n      "  filledIconPath: \'${2:assets/icons-filled.svg}\',",\n      "  defaultSize: ${3:20}",\n      "})"\n    ],\n    "description": "Library defaults for icon sprites and default icon size. Install: npx ply-ui-cli add config --yes"\n  },\n  "Ply harness": {\n    "prefix": "ply-harness",\n    "scope": "typescript",\n    "body": [\n      "import { TestbedHarnessEnvironment } from \'@angular/cdk/testing/testbed\';",\n      "import { DataTableHarness } from \'./components/data-table/data-table.harness\';",\n      "import { DialogHarness } from \'./components/dialog/dialog.harness\';",\n      "",\n      "const loader = TestbedHarnessEnvironment.loader(fixture);",\n      "const table = await loader.getHarness(DataTableHarness);",\n      "expect(await table.getRowCount()).toBe(${1:3});",\n      "",\n      "const dialogs = TestbedHarnessEnvironment.documentRootLoader(fixture);",\n      "const dialog = await dialogs.getHarness(DialogHarness);"\n    ],\n    "description": "CDK ComponentHarness for copied Base UI data-table. Dialog overlays use documentRootLoader. Copied with the component \u2014 not a separate registry item."\n  },\n  "Ply RTL": {\n    "prefix": "ply-rtl",\n    "scope": "html",\n    "body": [\n      "<html lang=\\"${1:ar}\\" dir=\\"rtl\\">",\n      "  $0",\n      "</html>"\n    ],\n    "description": "Document-level RTL. Ply follows the nearest dir. Install: npx ply-ui-cli add direction --yes. See https://ply-ui.com/getting-started/#rtl"\n  },\n  "Ply dir": {\n    "prefix": "ply-dir",\n    "scope": "html",\n    "body": [\n      "<section plyDir=\\"${1|rtl,ltr,auto|}\\">",\n      "  $0",\n      "</section>"\n    ],\n    "description": "Subtree writing direction. auto follows the document language. Import PlyDirDirective from ./components/direction/ply-dir.directive"\n  }\n}\n';
 
 // src/brand.ts
 var CLI_BIN = "ply-ui-cli";

package/dist/index.js

@@ -108,7 +108,7 @@ function parseArgs(argv) {
 async function main() {
   const { command, positionals, flags } = parseArgs(process.argv.slice(2));
   if (flags.version && !command) {
-    console.log("1.1.132");
+    console.log("1.1.133");
     return;
   }
   if (flags.help || !command) {
@@ -158,7 +158,7 @@ async function main() {
     }
     case "--version":
     case "-V":
-      console.log("1.1.132");
+      console.log("1.1.133");
       return;
     default:
       console.error(`Unknown command: ${command}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ply-ui-cli",
-  "version": "1.1.132",
+  "version": "1.1.133",
   "description": "Ply CLI — add Angular + Tailwind CSS components to your project (shadcn-style, code is copied in and owned by you). Not MUI Base UI.",
   "main": "dist/index.js",
   "publishConfig": {