maverick-wave 5.30.0 → 5.31.0

package/.claude/skills/mw-maverick-wave/examples/angular-form.md

@@ -1,279 +0,0 @@
-# Example: reactive form
-
-Every control type in one form, with the error handling the framework expects:
-`mw-field-has-error` on the wrapper, `mw-field-error` for the message. Nothing
-reacts to `ng-invalid` on its own - the bindings below are the whole mechanism.
-
-## Component
-
-```ts
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  signal,
-} from '@angular/core';
-import { TitleCasePipe } from '@angular/common';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-
-@Component({
-  selector: 'app-project-form',
-  imports: [ReactiveFormsModule, TitleCasePipe],
-  templateUrl: './project-form.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ProjectFormComponent {
-  private readonly fb = inject(FormBuilder);
-
-  protected readonly saving = signal(false);
-
-  protected readonly form = this.fb.nonNullable.group({
-    name: ['', [Validators.required, Validators.maxLength(80)]],
-    email: ['', [Validators.required, Validators.email]],
-    budget: [''], // text + inputmode="decimal", parsed on submit
-    type: ['', Validators.required],
-    priority: ['normal'],
-    description: [''],
-    teamSize: [3],
-    notify: [true],
-    terms: [false, Validators.requiredTrue],
-  });
-
-  protected readonly f = this.form.controls;
-
-  // A control shows its error once the user has touched it
-  protected invalid(name: keyof typeof this.f): boolean {
-    const control = this.f[name];
-    return control.invalid && (control.touched || control.dirty);
-  }
-
-  protected submit(): void {
-    if (this.form.invalid) {
-      this.form.markAllAsTouched();
-      return;
-    }
-    this.saving.set(true);
-    // …persist, then this.saving.set(false)
-  }
-}
-```
-
-## Template
-
-```html
-<form class="mw-form" [formGroup]="form" (ngSubmit)="submit()">
-  <!-- Group: base data -->
-  <div class="mw-form-group">
-    <p class="mw-text-muted mw-mb-3">Base data</p>
-
-    <div class="mw-grid-2">
-      <div class="mw-field" [class.mw-field-has-error]="invalid('name')">
-        <label class="mw-field-label mw-required" for="name"
-          >Project name</label
-        >
-        <input id="name" type="text" class="mw-input" formControlName="name" />
-        @if (invalid('name')) {
-        <span class="mw-field-error">
-          <i class="fas fa-exclamation-circle"></i>
-          @if (f.name.hasError('required')) { A name is required. } @else { At
-          most 80 characters. }
-        </span>
-        } @else {
-        <span class="mw-field-hint">Shown in the project list.</span>
-        }
-      </div>
-
-      <div class="mw-field" [class.mw-field-has-error]="invalid('email')">
-        <label class="mw-field-label mw-required" for="email">Contact</label>
-        <div class="mw-input-group">
-          <span class="mw-input-group-prefix"
-            ><i class="fas fa-envelope"></i
-          ></span>
-          <input
-            id="email"
-            type="email"
-            class="mw-input"
-            formControlName="email"
-          />
-        </div>
-        @if (invalid('email')) {
-        <span class="mw-field-error">
-          <i class="fas fa-exclamation-circle"></i> Please enter a valid email
-          address.
-        </span>
-        }
-      </div>
-
-      <!-- Money: text + inputmode, never type="number" -->
-      <div class="mw-field">
-        <label class="mw-field-label" for="budget">Budget</label>
-        <div class="mw-input-group">
-          <span class="mw-input-group-prefix"
-            ><i class="fas fa-euro-sign"></i
-          ></span>
-          <input
-            id="budget"
-            type="text"
-            inputmode="decimal"
-            class="mw-input mw-input-numeric"
-            placeholder="0,00"
-            formControlName="budget"
-          />
-          <span class="mw-input-group-suffix">EUR</span>
-        </div>
-        <span class="mw-field-hint">Comma as decimal separator.</span>
-      </div>
-
-      <div class="mw-field" [class.mw-field-has-error]="invalid('type')">
-        <label class="mw-field-label mw-required" for="type">Type</label>
-        <select id="type" class="mw-select" formControlName="type">
-          <option value="" disabled>Choose…</option>
-          <option value="internal">Internal</option>
-          <option value="customer">Customer project</option>
-        </select>
-        @if (invalid('type')) {
-        <span class="mw-field-error">
-          <i class="fas fa-exclamation-circle"></i> Please choose a type.
-        </span>
-        }
-      </div>
-
-      <!-- Full width inside the two-column grid -->
-      <div class="mw-field" style="grid-column: 1 / -1">
-        <label class="mw-field-label" for="description">Description</label>
-        <textarea
-          id="description"
-          class="mw-textarea mw-textarea-resizable-vertical"
-          rows="4"
-          formControlName="description"
-        ></textarea>
-        <span class="mw-field-hint">Markdown is allowed.</span>
-      </div>
-    </div>
-  </div>
-
-  <!-- Group: settings -->
-  <div class="mw-form-group">
-    <p class="mw-text-muted mw-mb-3">Settings</p>
-
-    <div class="mw-grid-2">
-      <div>
-        <p class="mw-text-muted mw-text-sm mw-mb-2">Priority</p>
-        <div class="mw-radio-group mw-radio-group-inline">
-          @for (option of ['low', 'normal', 'high']; track option) {
-          <label class="mw-radio">
-            <input type="radio" [value]="option" formControlName="priority" />
-            <div class="mw-radio-button"></div>
-            <div class="mw-radio-label">{{ option | titlecase }}</div>
-          </label>
-          }
-        </div>
-      </div>
-
-      <div>
-        <p class="mw-text-muted mw-text-sm mw-mb-2">Notifications</p>
-        <div class="mw-toggle-group">
-          <label class="mw-toggle mw-toggle-success">
-            <input type="checkbox" formControlName="notify" />
-            <div class="mw-toggle-track"></div>
-            <span class="mw-toggle-label">Notify me about changes</span>
-          </label>
-        </div>
-      </div>
-
-      <!-- Slider: both bindings are needed, the framework computes nothing -->
-      <div class="mw-field" style="grid-column: 1 / -1">
-        <label class="mw-field-label" for="team">Team size</label>
-        <div class="mw-slider-container">
-          <div
-            class="mw-slider-value mw-slider-numeric"
-            [attr.data-value]="f.teamSize.value"
-          ></div>
-          <input
-            id="team"
-            type="range"
-            class="mw-slider mw-slider-primary"
-            min="1"
-            max="10"
-            formControlName="teamSize"
-            [style.--value.%]="f.teamSize.value * 10"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Single control without a field wrapper -->
-  <div
-    class="mw-checkbox-group"
-    [class.mw-form-element-error]="invalid('terms')"
-  >
-    <label class="mw-checkbox">
-      <input type="checkbox" formControlName="terms" />
-      <div class="mw-checkbox-box"></div>
-      <div class="mw-checkbox-label">I accept the terms.</div>
-    </label>
-  </div>
-
-  <div class="mw-form-actions">
-    <p class="mw-actions-note">Fields marked with * are required.</p>
-    <button type="button" class="mw-btn mw-btn-outline" (click)="form.reset()">
-      Reset
-    </button>
-    <button type="submit" class="mw-btn mw-btn-primary" [disabled]="saving()">
-      @if (saving()) {
-      <span class="mw-spinner-border mw-spinner-sm"></span> Saving… } @else {
-      <i class="fas fa-save"></i> Save }
-    </button>
-  </div>
-</form>
-```
-
-## Notes
-
-- **The error state is two bindings**: `mw-field-has-error` on the wrapper
-  (border and halo) and the `mw-field-error` element (the message). Hint and
-  error should not be visible at the same time.
-- **For a control without a wrapper** - a checkbox group, radio group or slider
-  container - use `mw-form-element-error` instead.
-- **`disabled`/`readonly` are attributes**, not classes. With reactive forms use
-  `control.disable()`; the muted look comes from the `:disabled` selector.
-- **Prefilled values** take `mw-prefilled` on the control, not on the wrapper.
-  In an edit form that starts from `patchValue()`, bind it to your own flag:
-  `[class.mw-prefilled]="loaded() && !form.controls.name.dirty"`. Repeat the
-  information in the `mw-field-hint`, the marker itself is decoration.
-- **The slider needs two bindings**: `data-value` for the badge text,
-  `--value` for the filled part of the track.
-- **A spinner inside a button** needs its shape class (`mw-spinner-border`) plus
-  a size; the button already provides the gap.
-- Multi-column layout comes from `mw-grid-2` inside the group, a full-width
-  field from `style="grid-column: 1 / -1"`.
-
-## Number formatting
-
-`mw-text-numeric` aligns from the right edge, so it works with both `1,204.50`
-and `1.204,50` - what matters is a constant number of decimals per column. Let
-the pipe do it:
-
-```html
-<td class="mw-text-numeric">
-  {{ invoice.total | currency: 'EUR' : 'symbol' : '1.2-2' }}
-</td>
-<td class="mw-text-numeric">{{ item.amount | number: '1.2-2' }}</td>
-```
-
-```ts
-// app.config.ts
-import { registerLocaleData } from '@angular/common';
-import localeDe from '@angular/common/locales/de';
-
-registerLocaleData(localeDe);
-
-export const appConfig: ApplicationConfig = {
-  providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
-};
-```
-
-`'1.2-2'` is the part that keeps the column aligned - it forces exactly two
-decimals. `tabular-nums` only takes effect if the loaded font ships tabular
-figures; the framework bundles no font.

package/.claude/skills/mw-maverick-wave/examples/angular-list-page.md

@@ -1,309 +0,0 @@
-# Example: list page with filters, table, modal and toasts
-
-A complete application page built only from framework classes: page header with
-counters and actions, a filter panel, a data table with status chips and a
-sticky header, loading and empty states, a delete confirmation modal and a toast
-stack.
-
-The Angular parts are signals, the new control flow and `inject()` - swap them
-for any other framework, the markup does not change.
-
-## Component
-
-```ts
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  signal,
-} from '@angular/core';
-import { CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { RouterLink } from '@angular/router';
-import { InvoiceService } from './invoice.service';
-import { ToastService } from '../shared/toast.service';
-
-type Status = 'paid' | 'open' | 'cancelled' | 'draft';
-
-interface Invoice {
-  id: string;
-  number: string;
-  customer: string;
-  issuedAt: Date;
-  total: number;
-  status: Status;
-}
-
-@Component({
-  selector: 'app-invoice-list',
-  imports: [FormsModule, RouterLink, CurrencyPipe, DatePipe, TitleCasePipe],
-  templateUrl: './invoice-list.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class InvoiceListComponent {
-  private readonly invoices = inject(InvoiceService);
-  private readonly toasts = inject(ToastService);
-
-  protected readonly loading = this.invoices.loading;
-  protected readonly search = signal('');
-  protected readonly status = signal<Status | 'all'>('all');
-  protected readonly toDelete = signal<Invoice | null>(null);
-
-  protected readonly filtered = computed(() => {
-    const term = this.search().trim().toLowerCase();
-    const status = this.status();
-    return this.invoices
-      .all()
-      .filter(
-        (invoice) =>
-          (status === 'all' || invoice.status === status) &&
-          (term === '' ||
-            invoice.number.toLowerCase().includes(term) ||
-            invoice.customer.toLowerCase().includes(term))
-      );
-  });
-
-  protected readonly drafts = computed(
-    () => this.invoices.all().filter((i) => i.status === 'draft').length
-  );
-
-  // Status → tag variant. Keep this mapping in TS, not in the template -
-  // it is the only place that knows which colour means what.
-  protected readonly tagClass: Record<Status, string> = {
-    paid: 'mw-tag-success',
-    open: 'mw-tag-warning',
-    cancelled: 'mw-tag-danger',
-    draft: 'mw-tag-muted',
-  };
-
-  protected resetFilters(): void {
-    this.search.set('');
-    this.status.set('all');
-  }
-
-  protected confirmDelete(): void {
-    const invoice = this.toDelete();
-    if (!invoice) return;
-
-    this.invoices.remove(invoice.id).subscribe({
-      next: () => {
-        this.toasts.success(`Invoice ${invoice.number} deleted.`);
-        this.toDelete.set(null);
-      },
-      error: () => this.toasts.error('Deleting failed. Please try again.'),
-    });
-  }
-}
-```
-
-## Template
-
-```html
-<!-- Page header: title, counters, actions -->
-<header class="mw-page-header">
-  <div>
-    <h1>Invoices</h1>
-    <div class="mw-meta-header">
-      <div class="mw-meta-item">
-        <i class="fas fa-list"></i><span>Total: {{ filtered().length }}</span>
-      </div>
-      <div class="mw-meta-item">
-        <i class="fas fa-pen"></i><span>Drafts: {{ drafts() }}</span>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-page-header-actions">
-    <button
-      type="button"
-      class="mw-btn mw-btn-outline mw-btn-sm"
-      (click)="resetFilters()"
-    >
-      <i class="fas fa-rotate-left"></i> Reset
-    </button>
-    <button
-      type="button"
-      class="mw-btn mw-btn-primary mw-btn-sm"
-      routerLink="new"
-    >
-      <i class="fas fa-plus"></i> New invoice
-    </button>
-  </div>
-</header>
-
-<!-- Filter bar -->
-<div class="mw-panel mw-mb-6">
-  <h4 class="mw-panel-header">Filter</h4>
-  <div class="mw-panel-body">
-    <div class="mw-form">
-      <div class="mw-grid-2">
-        <div class="mw-field">
-          <label class="mw-field-label" for="search">Search</label>
-          <div class="mw-input-group">
-            <span class="mw-input-group-prefix"
-              ><i class="fas fa-search"></i
-            ></span>
-            <input
-              id="search"
-              type="text"
-              class="mw-input"
-              placeholder="Number or customer…"
-              [ngModel]="search()"
-              (ngModelChange)="search.set($event)"
-            />
-          </div>
-        </div>
-
-        <div class="mw-field">
-          <label class="mw-field-label" for="status">Status</label>
-          <select
-            id="status"
-            class="mw-select"
-            [ngModel]="status()"
-            (ngModelChange)="status.set($event)"
-          >
-            <option value="all">All</option>
-            <option value="open">Open</option>
-            <option value="paid">Paid</option>
-            <option value="cancelled">Cancelled</option>
-            <option value="draft">Draft</option>
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-@if (loading()) {
-<!-- Loading -->
-<div class="mw-skeleton-card">
-  <span class="mw-skeleton mw-skeleton-title"></span>
-  <span class="mw-skeleton mw-skeleton-text"></span>
-  <span class="mw-skeleton mw-skeleton-text"></span>
-  <span class="mw-skeleton mw-skeleton-text"></span>
-</div>
-} @else if (filtered().length === 0) {
-<!-- Empty -->
-<div class="mw-empty-state mw-empty-state-primary">
-  <div class="mw-empty-state-icon"><i class="fas fa-file-invoice"></i></div>
-  <p class="mw-empty-state-title">No invoices found</p>
-  <p class="mw-empty-state-desc">Adjust the filters or create a new invoice.</p>
-  <button type="button" class="mw-btn mw-btn-outline" (click)="resetFilters()">
-    Reset filters
-  </button>
-</div>
-} @else {
-<!-- Table -->
-<div class="mw-table-responsive-scroll" style="--mw-table-scroll-height: 520px">
-  <table class="mw-table mw-table-subtle mw-table-sticky-head mw-table-cards">
-    <thead>
-      <tr>
-        <th>Number</th>
-        <th>Customer</th>
-        <th>Date</th>
-        <th>Status</th>
-        <th class="mw-text-numeric">Total</th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      @for (invoice of filtered(); track invoice.id) {
-      <tr>
-        <td data-label="Number">{{ invoice.number }}</td>
-        <td data-label="Customer">{{ invoice.customer }}</td>
-        <td data-label="Date">{{ invoice.issuedAt | date: 'dd.MM.yyyy' }}</td>
-        <td data-label="Status">
-          <span class="mw-tag" [class]="tagClass[invoice.status]">
-            {{ invoice.status | titlecase }}
-          </span>
-        </td>
-        <td data-label="Total" class="mw-text-numeric">
-          {{ invoice.total | currency: 'EUR' : 'symbol' : '1.2-2' }}
-        </td>
-        <td data-label="">
-          <div class="mw-d-flex mw-gap-2 mw-justify-end">
-            <button
-              type="button"
-              class="mw-btn-mini mw-btn-mini-primary"
-              data-tooltip="Edit"
-              [routerLink]="[invoice.id]"
-            >
-              <i class="fas fa-pen"></i>
-            </button>
-            <button
-              type="button"
-              class="mw-btn-mini mw-btn-mini-danger"
-              data-tooltip="Delete"
-              (click)="toDelete.set(invoice)"
-            >
-              <i class="fas fa-trash"></i>
-            </button>
-          </div>
-        </td>
-      </tr>
-      }
-    </tbody>
-  </table>
-</div>
-}
-
-<!-- Delete confirmation - ModalDirective is in angular-services.md -->
-<dialog
-  class="mw-modal mw-modal-sm"
-  closedby="any"
-  appModal
-  [isOpen]="toDelete() !== null"
-  (dismiss)="toDelete.set(null)"
-  aria-labelledby="delete-title"
->
-  <div class="mw-modal-header">
-    <h4 class="mw-modal-title" id="delete-title">Delete invoice</h4>
-    <button type="button" class="mw-modal-close" (click)="toDelete.set(null)">
-      &#120299;
-    </button>
-  </div>
-  <div class="mw-modal-body">
-    <p class="mw-text-center">
-      <strong>Delete {{ toDelete()?.number }}?</strong>
-    </p>
-    <p class="mw-text-center mw-text-muted">This action cannot be undone.</p>
-  </div>
-  <div class="mw-modal-footer">
-    <button
-      type="button"
-      class="mw-btn mw-btn-outline"
-      (click)="toDelete.set(null)"
-    >
-      Cancel
-    </button>
-    <button
-      type="button"
-      class="mw-btn mw-btn-danger"
-      (click)="confirmDelete()"
-    >
-      <i class="fas fa-trash"></i> Delete
-    </button>
-  </div>
-</dialog>
-```
-
-## Notes
-
-- **`mw-table-subtle` for data tables.** The default primary header bar is a
-  landing-page look; over 200 rows it shouts louder than the data.
-- **Sticky needs a height cap.** `mw-table-sticky-head` only works inside
-  `mw-table-responsive-scroll`; the height comes from
-  `--mw-table-scroll-height` and can be set per table inline.
-- **`mw-table-cards` needs `data-label` on every cell**, including the action
-  column (empty string is fine) - below `md` each row becomes a card and the
-  label is rendered as the cell heading.
-- **`mw-text-numeric` on the header cell as well**, otherwise the column heading
-  sits left while the figures sit right.
-- **`mw-tag`, not `mw-tags`**, for a single status chip in a cell.
-- **`mw-btn-danger` for the destructive action** in the modal footer.
-- The modal is always in the DOM; `ModalDirective` calls `showModal()` when the
-  signal turns true, and Escape, the focus trap and the scroll lock follow from
-  the element.
-- The toast stack lives in the app shell, not on this page - see
-  `angular-services.md`.