@kouji-ui/components 0.1.1

package/src/checkbox/_examples/checkbox.default.example.ts

@@ -0,0 +1,20 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjCheckboxComponent } from '../checkbox';
+
+@Component({
+  selector: 'kj-checkbox-default-example',
+  standalone: true,
+  imports: [KjCheckboxComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-checkbox [(checked)]="value">Accept terms</kj-checkbox>`,
+})
+export class KjCheckboxDefaultExample {
+  readonly value = signal(false);
+}

package/src/checkbox/_examples/checkbox.disabled.example.ts

@@ -0,0 +1,26 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjCheckboxComponent } from '../checkbox';
+
+@Component({
+  selector: 'kj-checkbox-disabled-example',
+  standalone: true,
+  imports: [KjCheckboxComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+        display: flex;
+        gap: 1rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-checkbox [(checked)]="off" [disabled]="true">Disabled off</kj-checkbox>
+    <kj-checkbox [(checked)]="on" [disabled]="true">Disabled on</kj-checkbox>
+  `,
+})
+export class KjCheckboxDisabledExample {
+  readonly off = signal(false);
+  readonly on = signal(true);
+}

package/src/checkbox/_examples/checkbox.indeterminate.example.ts

@@ -0,0 +1,20 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjCheckboxComponent } from '../checkbox';
+
+@Component({
+  selector: 'kj-checkbox-indeterminate-example',
+  standalone: true,
+  imports: [KjCheckboxComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-checkbox [(checked)]="value" [indeterminate]="true">Mixed selection</kj-checkbox>`,
+})
+export class KjCheckboxIndeterminateExample {
+  readonly value = signal(false);
+}

package/src/checkbox/_examples/checkbox.usage.example.ts

@@ -0,0 +1,62 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjCheckboxComponent } from '../checkbox';
+
+/**
+ * A walkthrough of the most common checkbox usages — basic checked binding,
+ * indeterminate "parent" state, size variants, and disabled. Use this as the
+ * copy-paste starting point for forms.
+ */
+@Component({
+  selector: 'kj-checkbox-usage-example',
+  standalone: true,
+  imports: [KjCheckboxComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+      }
+      .row {
+        display: flex;
+        gap: var(--kj-space-md);
+        flex-wrap: wrap;
+        align-items: center;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <kj-checkbox [(checked)]="terms">Accept terms</kj-checkbox>
+      <kj-checkbox [(checked)]="newsletter">Subscribe to newsletter</kj-checkbox>
+    </div>
+
+    <div class="row">
+      <kj-checkbox [(checked)]="all" [indeterminate]="someSelected()">Select all</kj-checkbox>
+    </div>
+
+    <div class="row">
+      <kj-checkbox size="sm" [(checked)]="small">Small</kj-checkbox>
+      <kj-checkbox size="md" [(checked)]="medium">Medium</kj-checkbox>
+      <kj-checkbox size="lg" [(checked)]="large">Large</kj-checkbox>
+    </div>
+
+    <div class="row">
+      <kj-checkbox [disabled]="true">Disabled (unchecked)</kj-checkbox>
+      <kj-checkbox [disabled]="true" [checked]="true">Disabled (checked)</kj-checkbox>
+    </div>
+  `,
+})
+export class KjCheckboxUsageExample {
+  readonly terms = signal(true);
+  readonly newsletter = signal(false);
+  readonly all = signal(false);
+  readonly small = signal(false);
+  readonly medium = signal(true);
+  readonly large = signal(false);
+
+  someSelected(): boolean {
+    return !this.all() && this.newsletter();
+  }
+}

package/src/checkbox/_examples/index.ts

@@ -0,0 +1,7 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjCheckboxCheckedExample } from './checkbox.checked.example';
+export { KjCheckboxDefaultExample } from './checkbox.default.example';
+export { KjCheckboxDisabledExample } from './checkbox.disabled.example';
+export { KjCheckboxIndeterminateExample } from './checkbox.indeterminate.example';
+export { KjCheckboxUsageExample } from './checkbox.usage.example';

package/src/checkbox/checkbox.css

@@ -0,0 +1,74 @@
+@layer kj.component {
+  /* Outer host. Acts as a single click target whose label area forwards to
+     the inner box. */
+  .kj-checkbox {
+    display: inline-flex;
+  }
+
+  .kj-checkbox-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    cursor: pointer;
+    color: var(--kj-fg-default);
+    font: 0.875rem / 1.4 var(--kj-font-sans);
+  }
+  .kj-checkbox-label { user-select: none; }
+
+  /* The interactive box (carries the kjCheckbox directive). */
+  .kj-checkbox-box {
+    --kj-checkbox-size:        1rem;
+    --kj-checkbox-bg:          var(--kj-bg-body);
+    --kj-checkbox-bg-checked:  var(--kj-bg-primary);
+    --kj-checkbox-fg-checked:  var(--kj-fg-on-primary);
+    --kj-checkbox-border:      var(--kj-border-default);
+    --kj-checkbox-radius:      var(--kj-radius-selector);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--kj-checkbox-size);
+    height: var(--kj-checkbox-size);
+    background: var(--kj-checkbox-bg);
+    border: var(--kj-border) solid var(--kj-checkbox-border);
+    border-radius: var(--kj-checkbox-radius);
+    transition: var(--kj-transition);
+  }
+
+  .kj-checkbox-box[data-checked] {
+    background: var(--kj-checkbox-bg-checked);
+    border-color: var(--kj-checkbox-bg-checked);
+  }
+  .kj-checkbox-box[data-checked]::after {
+    content: '✓';
+    color: var(--kj-checkbox-fg-checked);
+    font-size: 0.75rem;
+    line-height: 1;
+  }
+
+  .kj-checkbox-box[data-indeterminate]::after {
+    content: '';
+    width: 60%;
+    height: 2px;
+    background: var(--kj-checkbox-fg-checked);
+  }
+  .kj-checkbox-box[data-indeterminate] {
+    background: var(--kj-checkbox-bg-checked);
+    border-color: var(--kj-checkbox-bg-checked);
+  }
+
+  .kj-checkbox-box[data-size="sm"] { --kj-checkbox-size: 0.875rem; }
+  .kj-checkbox-box[data-size="lg"] { --kj-checkbox-size: 1.25rem; }
+
+  .kj-checkbox-box:focus-visible { outline: 2px solid var(--kj-border-focus); outline-offset: 2px; }
+
+  /* Disabled — dim the whole checkbox (box + label text) for visual
+     consistency with native form controls. */
+  .kj-checkbox[data-disabled] .kj-checkbox-inner { cursor: not-allowed; }
+  .kj-checkbox[data-disabled] .kj-checkbox-box,
+  .kj-checkbox[data-disabled] .kj-checkbox-label {
+    opacity: 0.45;
+  }
+  .kj-checkbox[data-disabled] .kj-checkbox-box { pointer-events: none; }
+}

package/src/checkbox/checkbox.playground.ts

@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { KjCheckboxComponent } from './checkbox';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Knobs cover the visible axes of
+ * `KjCheckboxComponent` (size, checked, indeterminate, disabled) plus the
+ * label text projected into the slot.
+ */
+const size = signal<'sm' | 'md' | 'lg'>('md');
+const checked = signal(false);
+const indeterminate = signal(false);
+const disabled = signal(false);
+const label = signal('Accept the terms');
+
+@Component({
+  selector: 'kj-checkbox-playground',
+  standalone: true,
+  imports: [KjCheckboxComponent],
+  template: `
+    <kj-checkbox
+      [size]="size()"
+      [(checked)]="checked"
+      [indeterminate]="indeterminate()"
+      [disabled]="disabled()"
+    >{{ label() }}</kj-checkbox>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjCheckboxPlaygroundDemo {
+  protected readonly size = size;
+  protected readonly checked = checked;
+  protected readonly indeterminate = indeterminate;
+  protected readonly disabled = disabled;
+  protected readonly label = label;
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjCheckboxPlaygroundDemo,
+  state: {
+    size: size as unknown as ReturnType<typeof signal>,
+    checked: checked as unknown as ReturnType<typeof signal>,
+    indeterminate: indeterminate as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+    label: label as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    { kind: 'chips', name: 'size', label: 'size', options: ['sm', 'md', 'lg'] },
+    { kind: 'text', name: 'label', label: 'label' },
+    { kind: 'toggle', name: 'checked', label: 'checked' },
+    { kind: 'toggle', name: 'indeterminate', label: 'indeterminate' },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      size: string;
+      checked: boolean;
+      indeterminate: boolean;
+      disabled: boolean;
+      label: string;
+    };
+    const attrs: string[] = [`size="${s.size}"`];
+    if (s.checked) attrs.push('[checked]="true"');
+    if (s.indeterminate) attrs.push('[indeterminate]="true"');
+    if (s.disabled) attrs.push('[disabled]="true"');
+    return `<kj-checkbox\n  ${attrs.join('\n  ')}\n>${s.label}</kj-checkbox>`;
+  },
+};

package/src/checkbox/checkbox.ts

@@ -0,0 +1,122 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, model, input, viewChild, ElementRef } from '@angular/core';
+import { KjCheckbox } from '@kouji-ui/core';
+
+let checkboxIdCounter = 0;
+
+/**
+ * Styled wrapper around the headless `KjCheckbox` directive.
+ *
+ * The host renders a `<label>` wrapping the checkbox box and any projected
+ * content (label text). Clicking anywhere on the label checks/unchecks the
+ * box. When `disabled` is set, both the box and label text dim via
+ * `[data-disabled]` on the host.
+ *
+ * @doc-example Default
+ *   The default checkbox bound to a `signal<boolean>` via `[(checked)]`.
+ *   @doc-file checkbox.default.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common checkbox usages — checked binding,
+ *   indeterminate parent, size variants, and disabled.
+ *   @doc-file checkbox.usage.example.ts
+ * @doc-example Checked
+ *   Pre-selected on first render. Two-way bind to persist user changes.
+ *   @doc-file checkbox.checked.example.ts
+ * @doc-example Indeterminate
+ *   Tri-state "some-of-many" parent for a select-all row.
+ *   @doc-file checkbox.indeterminate.example.ts
+ * @doc-example Disabled
+ *   `[disabled]="true"` dims the box + label and removes pointer events.
+ *   @doc-file checkbox.disabled.example.ts
+ *
+ * @doc-keyboard
+ *   Space — Toggles the checked state
+ *   Tab   — Moves focus to the next focusable element
+ *
+ * @doc-aria
+ *   role="checkbox"     — Applied to the inner focusable box by the headless directive
+ *   aria-checked        — Reflects `true`, `false`, or `"mixed"` for indeterminate
+ *   aria-disabled       — Reflected when `[disabled]` is true
+ *   aria-labelledby     — Auto-wired to the projected label span
+ *   data-disabled       — Mirrors the disabled posture for theme/scope hooks
+ *   data-indeterminate  — Reflects the indeterminate posture for the dash glyph
+ *
+ * @doc-css-var
+ *   --kj-checkbox-size         — Box edge length. `data-size="sm|lg"` overrides; default 1rem.
+ *   --kj-checkbox-bg           — Unchecked background fill. Defaults to --kj-bg-body.
+ *   --kj-checkbox-bg-checked   — Background when checked or indeterminate. Defaults to --kj-bg-primary.
+ *   --kj-checkbox-fg-checked   — Checkmark/dash color. Defaults to --kj-fg-on-primary.
+ *   --kj-checkbox-border       — Border color when unchecked. Defaults to --kj-border-default.
+ *   --kj-checkbox-radius       — Corner radius of the box. Inherits --kj-radius-selector.
+ *
+ * @doc-touch
+ *   The wrapping label is the click target — its width plus the `lg` size keeps
+ *   the touch surface ≥ 44×44px. For dense form rows, `sm` / `md` rely on the
+ *   inline-text-link exception (WCAG 2.5.5).
+ *
+ * @doc-a11y
+ *   The visible label and the box share a single click region — the label
+ *   forwards taps to the inner focusable span (which is the actual checkbox
+ *   per the WAI-ARIA Checkbox pattern). Focus is restricted to the box;
+ *   `:focus-visible` shows a 2px ring. Indeterminate is a presentation-only
+ *   tri-state — committing to a value still flips between checked/unchecked.
+ *
+ * @doc-related toggle,radio,field
+ *
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name checkbox
+ * @doc-description Themed checkbox with label, indeterminate state, and size variants for use in forms.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-checkbox',
+  standalone: true,
+  imports: [KjCheckbox],
+  template: `
+    <!-- Click-region wrapper. The focusable element is the inner kjCheckbox span
+         (role="checkbox", tabindex, Space handler); this div only proxies pointer
+         events from the label area, so the lint rules below don't apply. -->
+    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+    <div class="kj-checkbox-inner" (click)="onLabelClick($event)">
+      <span
+        #box
+        kjCheckbox
+        tabindex="0"
+        class="kj-checkbox-box"
+        [(kjChecked)]="checked"
+        [kjDisabled]="disabled()"
+        [attr.data-size]="size()"
+        [attr.data-indeterminate]="indeterminate() ? '' : null"
+        [attr.aria-labelledby]="labelId"
+      ></span>
+      <span class="kj-checkbox-label" [id]="labelId"><ng-content /></span>
+    </div>
+  `,
+  styleUrl: './checkbox.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'class': 'kj-checkbox',
+    '[attr.data-disabled]': "disabled() ? '' : null",
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjCheckboxComponent {
+  readonly checked = model<boolean>(false);
+  readonly disabled = input(false);
+  readonly indeterminate = input(false);
+  readonly size = input<'sm' | 'md' | 'lg'>('md');
+
+  protected readonly labelId = `kj-checkbox-${++checkboxIdCounter}`;
+
+  private readonly box = viewChild.required<ElementRef<HTMLElement>>('box');
+
+  /** Forward label-area clicks to the checkbox box. The box itself bubbles
+   *  through, so we early-return to avoid a double-toggle. */
+  protected onLabelClick(e: MouseEvent): void {
+    if (this.disabled()) return;
+    const boxEl = this.box().nativeElement;
+    const target = e.target as Node;
+    if (target === boxEl || boxEl.contains(target)) return;
+    boxEl.click();
+  }
+}

package/src/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './checkbox';

package/src/color-picker/_examples/color-picker.alpha.example.ts

@@ -0,0 +1,36 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjColorPickerComponent } from '../color-picker';
+
+/**
+ * Color-picker with the alpha slider mounted. When alpha < 1 the
+ * trigger swatch shows a checkerboard backdrop and the emitted hex
+ * grows to eight digits (`#rrggbbaa`).
+ */
+@Component({
+  selector: 'kj-color-picker-alpha-example',
+  standalone: true,
+  imports: [KjColorPickerComponent, FormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        gap: var(--kj-space-md);
+        align-items: center;
+        min-height: 280px;
+      }
+      code {
+        font: 0.8125rem/1 var(--kj-font-mono, monospace);
+        color: var(--kj-fg-muted);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-color-picker [(ngModel)]="hex" [kjShowAlpha]="true" />
+    <code>{{ hex() }}</code>
+  `,
+})
+export class KjColorPickerAlphaExample {
+  readonly hex = signal('#ec489980');
+}

package/src/color-picker/_examples/color-picker.example.ts

@@ -0,0 +1,34 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjColorPickerComponent } from '../color-picker';
+
+/**
+ * Default color-picker — hex output, no alpha, no presets.
+ */
+@Component({
+  selector: 'kj-color-picker-example',
+  standalone: true,
+  imports: [KjColorPickerComponent, FormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        gap: var(--kj-space-md);
+        align-items: center;
+        min-height: 240px;
+      }
+      code {
+        font: 0.8125rem/1 var(--kj-font-mono, monospace);
+        color: var(--kj-fg-muted);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-color-picker [(ngModel)]="hex" />
+    <code>{{ hex() }}</code>
+  `,
+})
+export class KjColorPickerExample {
+  readonly hex = signal('#b8f500');
+}

package/src/color-picker/_examples/color-picker.hex-input.example.ts

@@ -0,0 +1,53 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjColorPickerComponent } from '../color-picker';
+
+/**
+ * Color-picker that focuses on the hex text input — designers paste
+ * hex values constantly; the panel commits on blur or Enter and
+ * reverts on Escape if the value cannot be parsed.
+ */
+@Component({
+  selector: 'kj-color-picker-hex-input-example',
+  standalone: true,
+  imports: [KjColorPickerComponent, FormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+        min-height: 280px;
+      }
+      .row {
+        display: flex;
+        gap: var(--kj-space-md);
+        align-items: center;
+      }
+      code {
+        font: 0.8125rem/1 var(--kj-font-mono, monospace);
+        color: var(--kj-fg-muted);
+      }
+      p {
+        font: 0.8125rem var(--kj-font-sans);
+        color: var(--kj-fg-default);
+        margin: 0;
+        max-width: 28rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <p>
+      Open the panel and type or paste a hex value. The picker accepts 3-, 4-, 6-, and 8-digit hex
+      with or without the leading hash.
+    </p>
+    <div class="row">
+      <kj-color-picker [(ngModel)]="hex" />
+      <code>{{ hex() }}</code>
+    </div>
+  `,
+})
+export class KjColorPickerHexInputExample {
+  readonly hex = signal('#0ea5e9');
+}

package/src/color-picker/_examples/color-picker.in-form.example.ts

@@ -0,0 +1,60 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { KjColorPickerComponent } from '../color-picker';
+
+/**
+ * Color-picker integrated with a reactive form, including a custom
+ * required-hex validator. Demonstrates the `formControl` binding and
+ * the touched-gated `kjInvalid` posture.
+ */
+@Component({
+  selector: 'kj-color-picker-in-form-example',
+  standalone: true,
+  imports: [KjColorPickerComponent, ReactiveFormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+        min-height: 320px;
+      }
+      label {
+        display: flex;
+        align-items: center;
+        gap: var(--kj-space-md);
+        color: var(--kj-fg-default);
+        font: 0.875rem var(--kj-font-sans);
+      }
+      .error {
+        color: var(--kj-fg-danger, #ef4444);
+        font: 0.75rem var(--kj-font-sans);
+      }
+      code {
+        font: 0.8125rem/1 var(--kj-font-mono, monospace);
+        color: var(--kj-fg-muted);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <label for="color-picker-brand">
+      Brand color
+      <kj-color-picker
+        id="color-picker-brand"
+        [formControl]="ctrl"
+        [kjInvalid]="ctrl.invalid && ctrl.touched"
+      />
+      <code>{{ ctrl.value }}</code>
+    </label>
+    @if (ctrl.invalid && ctrl.touched) {
+      <span class="error">A valid hex color is required.</span>
+    }
+  `,
+})
+export class KjColorPickerInFormExample {
+  readonly ctrl = new FormControl('#3b82f6', {
+    nonNullable: true,
+    validators: [Validators.required, Validators.pattern(/^#?[0-9a-fA-F]{3,8}$/)],
+  });
+}

package/src/color-picker/_examples/color-picker.usage.example.ts

@@ -0,0 +1,58 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjColorPickerComponent, type KjColorPreset } from '../color-picker';
+
+/**
+ * A walkthrough of the most common color-picker usages — hex output, an alpha
+ * channel for tinting, brand presets, and a disabled state.
+ */
+@Component({
+  selector: 'kj-color-picker-usage-example',
+  standalone: true,
+  imports: [KjColorPickerComponent, FormsModule],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+      }
+      .row {
+        display: flex;
+        gap: var(--kj-space-md);
+        align-items: center;
+      }
+      code {
+        font: 0.8125rem/1 var(--kj-font-mono, monospace);
+        color: var(--kj-fg-muted);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <kj-color-picker [(ngModel)]="brand" />
+      <code>{{ brand() }}</code>
+    </div>
+
+    <div class="row">
+      <kj-color-picker [(ngModel)]="tinted" kjShowAlpha />
+      <code>{{ tinted() }}</code>
+    </div>
+
+    <div class="row">
+      <kj-color-picker [(ngModel)]="brand" [kjPresets]="presets" />
+      <code>preset palette</code>
+    </div>
+  `,
+})
+export class KjColorPickerUsageExample {
+  readonly brand = signal('#b8f500');
+  readonly tinted = signal('#1e90ffaa');
+  readonly presets: readonly KjColorPreset[] = [
+    { value: '#b8f500', label: 'Lime' },
+    { value: '#1e90ff', label: 'Blue' },
+    { value: '#f97316', label: 'Orange' },
+    { value: '#a855f7', label: 'Purple' },
+  ];
+}