ply-ui-cli 1.1.130 → 1.1.132

package/README.md

@@ -17,7 +17,7 @@ The old npm name `base-ui-cli` is **deprecated** (name collision with [MUI Base
 
 ## What's new
 
-- **3-way merge** — `npx ply-ui-cli update --merge` (or the interactive Merge choice) uses `git merge-file` with the install snapshot under `.ply-ui/snapshots`. Aliases: `sheet` → `drawer`, `carousel` → `slider`.
+- **3-way merge** — `npx ply-ui-cli update --merge` (or the interactive Merge choice) uses `git merge-file` with the install snapshot under `.ply-ui/snapshots`. Aliases: `sheet` → `drawer`, `gallery` → `slider`. `carousel` installs the horizontal scroller.
 - **add picker** — `npx ply-ui-cli add` with no names opens a catalog filter + type-to-select. `--yes` still requires explicit names.
 - **doctor** — `npx ply-ui-cli doctor` checks `ply-ui.json`, Tailwind v4 `@source` paths, `ply-ui.css`, CDK, and icon sprites. Read-only.
 - **hover-card**, **menubar**, **loading-overlay**, **currency-input** (free) — hover preview panel, application menubar, blocking spinner overlay, locale-aware currency field.
@@ -220,7 +220,7 @@ Ply works with standard Tailwind CSS 4 — no custom theme required. Create `src
 @source "./src/**/*.{html,ts}";
 ```
 
-Buttons, inputs, folder/underline/pills tabs, selects, combobox, toast, accordion, and the command palette read `--ply-primary` from `ply-ui.css`. Remaining widgets follow `--color-blue-*`. To use a custom brand color, override both:
+Buttons, inputs, folder/underline/pills tabs, selects, combobox, toast, accordion, and the command palette read `--ply-primary` from `ply-ui.css`. That file aliases `--color-blue-*` to the same scale, so `blue-*` widgets follow it. To use a custom brand color, override `--ply-primary` in a stylesheet that loads after `ply-ui.css`:
 
 ```css
 :root {
@@ -228,7 +228,6 @@ Buttons, inputs, folder/underline/pills tabs, selects, combobox, toast, accordio
   --ply-primary-hover: rgb(109 40 217);
   --ply-primary-active: rgb(91 33 182);
   --ply-ring: rgb(124 58 237);
-  --color-blue-500: rgb(139 92 246); /* remaining blue-* widgets */
 }
 ```
 
@@ -241,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 215 components and blocks (125 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 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.
 
 **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.
@@ -250,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?**  
-125 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.
+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.
 
 **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.
@@ -259,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 125 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 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.
 
 **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.
@@ -268,7 +267,7 @@ npx ply-ui-cli init once per project, then npx ply-ui-cli add <name>. Omit the n
 Run npx ply-ui-cli doctor. It checks ply-ui.json, the Angular workspace, @angular/cdk, Tailwind v4 @source paths, the ply-ui.css import, icon sprites, and the components directory — read-only, nothing is written.
 
 **How do I export a Tailwind v4 theme?**  
-Open Theme Studio at https://ply-ui.com/theme/ or the docs customizer, pick a preset or hue, then copy the Tailwind v4 @theme block into src/tailwind.css. Brand color is --ply-primary (buttons, inputs, folder/underline/pills tabs, selects, combobox, toast, accordion, command palette). Remaining blue-* widgets follow the same hue. The live preview shows those controls together.
+Open Theme Studio at https://ply-ui.com/theme/ or the docs customizer, pick a preset or hue, then copy the Tailwind v4 @theme block into src/tailwind.css. ply-ui.css points --ply-primary and Tailwind blue-* utilities at that palette (--ply-brand and --ply-scale-*). The live preview shows buttons, tabs, forms, and overlays together.
 
 **Can AI agents install Ply?**  
 Yes. npx -y ply-ui-mcp is stdio for Cursor, Claude (Code/Desktop), Kimi, VS Code, Windsurf, and other local hosts. ChatGPT and Gemini chat apps use the Streamable HTTP connector at https://mcp.ply-ui.com/mcp (catalog tools) or a local npx -y ply-ui-mcp --http without --read-only so add/init/update can see the project. Pro add uses PLY_LICENSE_KEY on the MCP process. Editors that skip MCP can copy the Cursor rule and snippet pack from https://ply-ui.com/getting-started/#editor-rules.

package/dist/commands/add.js

@@ -244,9 +244,9 @@ async function pickComponents(index) {
 var COMPONENT_ALIASES = {
   sheet: "drawer",
   "side-sheet": "drawer",
-  carousel: "slider",
   gallery: "slider",
   "image-slider": "slider",
+  slideshow: "slider",
   range: "range-slider",
   "slider-input": "range-slider",
   "input-slider": "range-slider",

package/dist/commands/init.js

@@ -85,7 +85,7 @@ 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`. Theme Studio writes the same tokens and remaps `--color-blue-*` so remaining `blue-*` widgets follow the hue. 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 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';
 
 // src/brand.ts
@@ -102,16 +102,17 @@ var BASE_CSS = `/* Ply global styles \u2014 ${import_registry.SITE_URL} */
 
 /*
  * Semantic tokens. Buttons, inputs, tabs, selects, combobox, toast, accordion,
- * and the command palette read these. Remaining widgets follow --color-blue-*.
- * Override in :root (or paste a Theme Studio export) \u2014 do not fork components
- * just to change brand color.
+ * and the command palette read --ply-*. Widgets that still use Tailwind blue-*
+ * utilities follow the same hue: --color-blue-* aliases to this scale.
+ * Set --ply-primary in a later :root, or paste a Theme Studio export
+ * (--ply-brand and --ply-scale-*) \u2014 do not fork components to change brand color.
  */
 :root {
   --ply-background: #ffffff;
   --ply-foreground: #0f172a;
-  --ply-primary: #2563eb;
-  --ply-primary-hover: #1d4ed8;
-  --ply-primary-active: #1e40af;
+  --ply-primary: var(--ply-brand, #2563eb);
+  --ply-primary-hover: var(--ply-brand-hover, #1d4ed8);
+  --ply-primary-active: var(--ply-brand-active, #1e40af);
   --ply-primary-foreground: #ffffff;
   --ply-primary-soft: color-mix(in srgb, var(--ply-primary) 14%, transparent);
   --ply-muted: #e2e8f0;
@@ -120,7 +121,18 @@ var BASE_CSS = `/* Ply global styles \u2014 ${import_registry.SITE_URL} */
   --ply-destructive-hover: #b91c1c;
   --ply-destructive-foreground: #ffffff;
   --ply-border: #cbd5e1;
-  --ply-ring: #2563eb;
+  --ply-ring: var(--ply-primary);
+  --color-blue-50: var(--ply-scale-50, color-mix(in srgb, var(--ply-primary) 8%, white));
+  --color-blue-100: var(--ply-scale-100, color-mix(in srgb, var(--ply-primary) 14%, white));
+  --color-blue-200: var(--ply-scale-200, color-mix(in srgb, var(--ply-primary) 26%, white));
+  --color-blue-300: var(--ply-scale-300, color-mix(in srgb, var(--ply-primary) 42%, white));
+  --color-blue-400: var(--ply-scale-400, color-mix(in srgb, var(--ply-primary) 68%, white));
+  --color-blue-500: var(--ply-scale-500, var(--ply-primary));
+  --color-blue-600: var(--ply-scale-600, var(--ply-primary-hover));
+  --color-blue-700: var(--ply-scale-700, var(--ply-primary-active));
+  --color-blue-800: var(--ply-scale-800, color-mix(in srgb, var(--ply-primary-active) 78%, black));
+  --color-blue-900: var(--ply-scale-900, color-mix(in srgb, var(--ply-primary-active) 62%, black));
+  --color-blue-950: var(--ply-scale-950, color-mix(in srgb, var(--ply-primary-active) 48%, black));
   --ply-radius: 0.5rem;
   --radius: var(--ply-radius);
   /* Compat for components copied before the Ply rename. */

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.130");
+    console.log("1.1.132");
     return;
   }
   if (flags.help || !command) {
@@ -158,7 +158,7 @@ async function main() {
     }
     case "--version":
     case "-V":
-      console.log("1.1.130");
+      console.log("1.1.132");
       return;
     default:
       console.error(`Unknown command: ${command}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ply-ui-cli",
-  "version": "1.1.130",
+  "version": "1.1.132",
   "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": {