ply-ui-cli 1.1.118

package/dist/commands/init.js

@@ -0,0 +1,367 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/commands/init.ts
+var init_exports = {};
+__export(init_exports, {
+  init: () => init
+});
+module.exports = __toCommonJS(init_exports);
+var import_fs2 = __toESM(require("fs"));
+var import_path2 = __toESM(require("path"));
+var import_vendor = require("../vendor");
+var import_registry = require("../registry");
+
+// src/lockfile.ts
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var LOCKFILE_NAME = "base-ui-lock.json";
+var LOCKFILE_VERSION = 1;
+function lockfilePath() {
+  return import_path.default.resolve(process.cwd(), LOCKFILE_NAME);
+}
+function readLockFile() {
+  const p = lockfilePath();
+  if (!import_fs.default.existsSync(p)) {
+    return { version: LOCKFILE_VERSION, components: {} };
+  }
+  try {
+    const parsed = JSON.parse(import_fs.default.readFileSync(p, "utf8"));
+    if (parsed && typeof parsed === "object" && parsed.components) {
+      return { version: parsed.version ?? LOCKFILE_VERSION, components: parsed.components };
+    }
+  } catch {
+  }
+  return { version: LOCKFILE_VERSION, components: {} };
+}
+function writeLockFile(lock) {
+  import_fs.default.writeFileSync(lockfilePath(), JSON.stringify(lock, null, 2) + "\n", "utf8");
+}
+
+// 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 `base-ui.json`, Angular CDK, Tailwind v4 `@source` paths, `base-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 `--base-primary` from `base-ui.css`. Theme Studio Copy CSS writes the same tokens. Unmigrated widgets still follow `--color-blue-*`.\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/base-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
+var CLI_BIN = "ply-ui-cli";
+var CLI_NPX = `npx ${CLI_BIN}`;
+var MCP_PACKAGE = "ply-ui-mcp";
+var MCP_NPX = `npx -y ${MCP_PACKAGE}`;
+
+// src/commands/init.ts
+var BASE_CSS = `/* Ply global styles \u2014 ${import_registry.SITE_URL} */
+
+/* Overlay positioning for dialogs, dropdowns and tooltips (Angular CDK). */
+@import '@angular/cdk/overlay-prebuilt.css';
+
+/*
+ * Semantic tokens. Buttons, inputs, and Theme Studio read these.
+ * Override in :root (or paste a Theme Studio export) \u2014 do not fork components
+ * just to change brand color.
+ */
+:root {
+  --base-background: #ffffff;
+  --base-foreground: #0f172a;
+  --base-primary: #2563eb;
+  --base-primary-hover: #1d4ed8;
+  --base-primary-active: #1e40af;
+  --base-primary-foreground: #ffffff;
+  --base-muted: #e2e8f0;
+  --base-muted-foreground: #334155;
+  --base-destructive: #dc2626;
+  --base-destructive-hover: #b91c1c;
+  --base-destructive-foreground: #ffffff;
+  --base-border: #cbd5e1;
+  --base-ring: #2563eb;
+  --base-radius: 0.5rem;
+  --radius: var(--base-radius);
+}
+
+.dark {
+  --base-background: #0f172a;
+  --base-foreground: #f8fafc;
+  --base-muted: #1e293b;
+  --base-muted-foreground: #e2e8f0;
+  --base-border: #334155;
+  --base-primary-foreground: #ffffff;
+  --base-destructive-foreground: #ffffff;
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.4s ease-out forwards;
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 2s linear infinite;
+}
+
+/* Chrome autofill fix for dark mode */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: #334155 !important; /* slate-700 */
+  transition: background-color 5000s ease-in-out 0s;
+  box-shadow: inset 0 0 20px 20px #ffffff;
+}
+
+.dark input:-webkit-autofill,
+.dark input:-webkit-autofill:hover,
+.dark input:-webkit-autofill:focus,
+.dark input:-webkit-autofill:active {
+  -webkit-text-fill-color: #e2e8f0 !important; /* slate-200 */
+  -webkit-box-shadow: 0 0 0px 1000px #1e293b inset !important; /* slate-800 */
+}
+
+/* Hide the datalist arrow in Chrome; leave native date/time pickers visible. */
+input[list]::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+`;
+var ICON_SPRITES = ["icons.svg", "icons-filled.svg"];
+function pickAngularProject(angularJson) {
+  const projects = angularJson?.projects || {};
+  const names = Object.keys(projects);
+  if (!names.length) return null;
+  const appName = names.find((n) => projects[n].projectType === "application" && projects[n].architect?.build) || names.find((n) => projects[n].architect?.build) || names[0];
+  return { name: appName, project: projects[appName] };
+}
+async function downloadSprite(name, targetDir) {
+  try {
+    const res = await fetch(`${import_registry.SITE_URL}/assets/${name}`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const body = Buffer.from(await res.arrayBuffer());
+    import_fs2.default.mkdirSync(targetDir, { recursive: true });
+    import_fs2.default.writeFileSync(import_path2.default.join(targetDir, name), body);
+    return true;
+  } catch (err) {
+    console.warn(`
+\u26A0 Could not download ${name} (${err.message}). Download it manually from ${import_registry.SITE_URL}/assets/${name} into ${targetDir}.`);
+    return false;
+  }
+}
+function writeEditorFile(dest, content, label) {
+  if (import_fs2.default.existsSync(dest)) return;
+  try {
+    import_fs2.default.mkdirSync(import_path2.default.dirname(dest), { recursive: true });
+    import_fs2.default.writeFileSync(dest, content, "utf8");
+  } catch (err) {
+    console.warn(
+      `
+\u26A0 Could not write ${label} (${err.message}). Copy it from ${import_registry.SITE_URL}/docs/ai/${import_path2.default.basename(dest)}.`
+    );
+  }
+}
+var INIT_DEFAULTS = {
+  componentsAlias: "src/app/components",
+  styles: "src/styles.scss",
+  tailwind: "src/tailwind.css"
+};
+async function init(options = {}) {
+  const response = options.yes ? { ...INIT_DEFAULTS } : await (0, import_vendor.prompts)([
+    {
+      type: "text",
+      name: "componentsAlias",
+      message: "Configure the import alias for components:",
+      initial: INIT_DEFAULTS.componentsAlias
+    },
+    {
+      type: "text",
+      name: "styles",
+      message: "Where is your global CSS file?",
+      initial: INIT_DEFAULTS.styles
+    },
+    {
+      type: "text",
+      name: "tailwind",
+      message: "Path to your Tailwind CSS entry file:",
+      initial: INIT_DEFAULTS.tailwind
+    }
+  ]);
+  if (!response.componentsAlias) {
+    console.log("Initialization cancelled.");
+    return;
+  }
+  const spinner = (0, import_vendor.ora)("Writing base-ui.json...").start();
+  const configPath = import_path2.default.resolve(process.cwd(), "base-ui.json");
+  const config = {
+    $schema: "https://ply-ui.com/schema.json",
+    style: "scss",
+    tailwind: {
+      config: response.tailwind,
+      css: response.styles,
+      baseColor: "slate",
+      cssVariables: true
+    },
+    aliases: {
+      components: response.componentsAlias,
+      utils: "src/app/utils"
+    }
+  };
+  import_fs2.default.writeFileSync(configPath, JSON.stringify(config, null, 2), "utf8");
+  const lockPath = import_path2.default.resolve(process.cwd(), LOCKFILE_NAME);
+  if (!import_fs2.default.existsSync(lockPath)) {
+    writeLockFile(readLockFile());
+  }
+  spinner.text = "Writing global styles...";
+  const stylesPath = import_path2.default.resolve(process.cwd(), response.styles);
+  const stylesDir = import_path2.default.dirname(stylesPath);
+  const baseCssPath = import_path2.default.join(stylesDir, "base-ui.css");
+  const importLine = `@import './base-ui.css';`;
+  try {
+    import_fs2.default.mkdirSync(stylesDir, { recursive: true });
+    import_fs2.default.writeFileSync(baseCssPath, BASE_CSS, "utf8");
+    if (import_fs2.default.existsSync(stylesPath)) {
+      const stylesContent = import_fs2.default.readFileSync(stylesPath, "utf8");
+      if (!stylesContent.includes(importLine)) {
+        import_fs2.default.writeFileSync(stylesPath, `${importLine}
+${stylesContent}`, "utf8");
+      }
+    } else {
+      import_fs2.default.writeFileSync(stylesPath, `${importLine}
+`, "utf8");
+      console.warn(`
+\u26A0 ${response.styles} did not exist \u2014 created it. Make sure it is listed in the "styles" array of angular.json.`);
+    }
+  } catch (error) {
+    console.warn(`
+\u26A0 Could not update global styles (${error.message}). Add "${importLine}" to ${response.styles} manually and create base-ui.css next to it.`);
+  }
+  spinner.text = "Setting up icon sprites...";
+  let assetsDir = import_path2.default.resolve(process.cwd(), "src/assets");
+  try {
+    const angularJsonPath = import_path2.default.resolve(process.cwd(), "angular.json");
+    if (import_fs2.default.existsSync(angularJsonPath)) {
+      const angularJson = JSON.parse(import_fs2.default.readFileSync(angularJsonPath, "utf8"));
+      const picked = pickAngularProject(angularJson);
+      const buildOptions = picked?.project?.architect?.build?.options;
+      if (buildOptions) {
+        const assets = buildOptions.assets || [];
+        const hasSrcAssets = assets.some(
+          (a) => a === "src/assets" || typeof a === "object" && a?.input === "src/assets"
+        );
+        const publicEntry = assets.find(
+          (a) => a === "public" || typeof a === "object" && a?.input === "public"
+        );
+        if (hasSrcAssets) {
+          assetsDir = import_path2.default.resolve(process.cwd(), "src/assets");
+        } else if (publicEntry) {
+          assetsDir = import_path2.default.resolve(process.cwd(), "public/assets");
+        } else {
+          assetsDir = import_path2.default.resolve(process.cwd(), "src/assets");
+          for (const sprite of ICON_SPRITES) {
+            const exists = assets.some(
+              (a) => typeof a === "object" && a?.glob === sprite && a?.input === "src/assets"
+            );
+            if (!exists) {
+              assets.push({ glob: sprite, input: "src/assets", output: "/assets" });
+            }
+          }
+          buildOptions.assets = assets;
+          import_fs2.default.writeFileSync(angularJsonPath, JSON.stringify(angularJson, null, 2), "utf8");
+        }
+      } else {
+        console.warn(`
+\u26A0 Could not find build options in angular.json \u2014 serve the icon sprites at /assets/icons.svg and /assets/icons-filled.svg yourself.`);
+      }
+    } else {
+      console.warn("\n\u26A0 No angular.json found \u2014 is this an Angular workspace? Continuing anyway.");
+    }
+  } catch (error) {
+    console.warn(`
+\u26A0 Could not update angular.json (${error.message}). Make sure the icon sprites are served at /assets/icons.svg and /assets/icons-filled.svg.`);
+  }
+  spinner.text = "Downloading icon sprites...";
+  for (const sprite of ICON_SPRITES) {
+    await downloadSprite(sprite, assetsDir);
+  }
+  spinner.text = "Writing editor rules and snippets...";
+  writeEditorFile(
+    import_path2.default.resolve(process.cwd(), ".cursor/rules/base-ui.mdc"),
+    CURSOR_RULE,
+    ".cursor/rules/base-ui.mdc"
+  );
+  writeEditorFile(
+    import_path2.default.resolve(process.cwd(), ".vscode/base-ui.code-snippets"),
+    CODE_SNIPPETS,
+    ".vscode/base-ui.code-snippets"
+  );
+  spinner.succeed(`Project initialized! Add your first component with "${CLI_NPX} add button".`);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  init
+});

package/dist/commands/list.js

@@ -0,0 +1,99 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/commands/list.ts
+var list_exports = {};
+__export(list_exports, {
+  list: () => list
+});
+module.exports = __toCommonJS(list_exports);
+var import_vendor = require("../vendor");
+var import_registry = require("../registry");
+
+// src/brand.ts
+var CLI_BIN = "ply-ui-cli";
+var CLI_NPX = `npx ${CLI_BIN}`;
+var MCP_PACKAGE = "ply-ui-mcp";
+var MCP_NPX = `npx -y ${MCP_PACKAGE}`;
+
+// src/categories.ts
+var CATEGORY_TITLES = {
+  application: "Applications",
+  "page-layout": "Page layouts",
+  block: "Blocks",
+  widget: "Widgets",
+  shell: "Shells",
+  component: "Components"
+};
+var CATEGORY_ORDER = [
+  "application",
+  "page-layout",
+  "block",
+  "widget",
+  "shell",
+  "component"
+];
+
+// src/commands/list.ts
+async function list() {
+  const spinner = (0, import_vendor.ora)("Loading registry index...").start();
+  let index;
+  try {
+    index = await (0, import_registry.fetchIndex)();
+    spinner.stop();
+  } catch (err) {
+    spinner.fail(err.message);
+    process.exitCode = 1;
+    return;
+  }
+  const printColumns = (names) => {
+    if (names.length === 0) return;
+    const width = Math.max(...names.map((n) => n.length)) + 2;
+    const perRow = Math.max(1, Math.floor(80 / width));
+    for (let i = 0; i < names.length; i += perRow) {
+      console.log("  " + names.slice(i, i + perRow).map((n) => n.padEnd(width)).join(""));
+    }
+  };
+  const printTier = (tier, label, footnote) => {
+    const items = index.filter((i) => i.tier === tier);
+    console.log(`
+${label} (${items.length}) \u2014 ${footnote}
+`);
+    for (const category of CATEGORY_ORDER) {
+      const names = items.filter((i) => (i.category || "component") === category).map((i) => i.name).sort();
+      if (!names.length) continue;
+      console.log(`  ${CATEGORY_TITLES[category] || category} (${names.length})`);
+      printColumns(names);
+      console.log("");
+    }
+    const known = new Set(CATEGORY_ORDER);
+    const other = items.filter((i) => i.category && !known.has(i.category)).map((i) => i.name).sort();
+    if (other.length) {
+      console.log(`  Other (${other.length})`);
+      printColumns(other);
+      console.log("");
+    }
+  };
+  printTier("free", "Free components", `${CLI_NPX} add <name>`);
+  printTier("pro", "Pro components", `require a license (${import_registry.SITE_URL}/pricing)`);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  list
+});