feat: Theme engine

big changes

toju-app/src/app/domains/theme/feature/theme-picker-overlay.component.ts

@@ -0,0 +1,58 @@
+import {
+  Component,
+  computed,
+  inject
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ElementPickerService } from '../application/element-picker.service';
+import { ThemeRegistryService } from '../application/theme-registry.service';
+
+@Component({
+  selector: 'app-theme-picker-overlay',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    @if (picker.isPicking()) {
+      <div class="pointer-events-none fixed inset-x-0 bottom-4 z-[95] flex justify-center px-4">
+        <div class="pointer-events-auto max-w-xl rounded-2xl border border-border bg-card/95 px-4 py-3 shadow-2xl backdrop-blur-xl">
+          <div class="flex flex-wrap items-center gap-3">
+            <div class="min-w-0 flex-1">
+              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Theme Picker Active</p>
+              <p class="mt-1 text-sm text-foreground">
+                Click a highlighted area to inspect its theme key.
+              </p>
+              <p class="mt-1 text-xs text-muted-foreground">
+                Hovering:
+                <span class="font-medium text-foreground">{{ hoveredEntry()?.label || 'Move over a themeable region' }}</span>
+                @if (hoveredEntry()) {
+                  <span class="ml-1 rounded-full bg-secondary px-2 py-0.5 font-mono text-[11px] text-foreground/80">{{ hoveredEntry()!.key }}</span>
+                }
+              </p>
+            </div>
+
+            <button
+              type="button"
+              (click)="cancel()"
+              class="inline-flex items-center rounded-full border border-border bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  `
+})
+export class ThemePickerOverlayComponent {
+  readonly picker = inject(ElementPickerService);
+  private readonly registry = inject(ThemeRegistryService);
+
+  readonly hoveredEntry = computed(() => {
+    return this.registry.getDefinition(this.picker.hoveredKey());
+  });
+
+  cancel(): void {
+    this.picker.cancel();
+  }
+}