phase-9: add builder sandbox for in-memory configuration editing

src/app/pages/builder/builder-sandbox.component.ts

@@ -0,0 +1,67 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BuilderConfigFacade } from '../../facades/builder/builder-config.facade';
+
+@Component({
+  selector: 'app-builder-sandbox',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <main class="builder-sandbox">
+      <h1>Builder Sandbox</h1>
+      <p>Configuration-only editing surface.</p>
+
+      @if (branding(); as brand) {
+        <section class="builder-card">
+          <h2>Branding</h2>
+          <label>
+            Brand Name
+            <input type="text" [ngModel]="brand.brandName" (ngModelChange)="onBrandNameChange($event)" />
+          </label>
+        </section>
+      }
+
+      @if (featureFlags(); as flags) {
+        <section class="builder-card">
+          <h2>Feature Flags</h2>
+          @for (flag of featureFlagKeys(); track flag) {
+            <label class="flag-row">
+              <input type="checkbox" [checked]="flags[flag]" (change)="onFlagToggle(flag, $event)" />
+              <span>{{ flag }}</span>
+            </label>
+          }
+        </section>
+      }
+    </main>
+  `,
+  styles: [
+    `
+      .builder-sandbox { padding: 1.5rem; display: grid; gap: 1rem; }
+      .builder-card { border: 1px solid var(--border-color, #d3dad9); border-radius: 12px; padding: 1rem; display: grid; gap: 0.75rem; }
+      input[type='text'] { width: 100%; max-width: 420px; padding: 0.5rem; border-radius: 8px; border: 1px solid var(--border-color, #d3dad9); }
+      .flag-row { display: flex; align-items: center; gap: 0.5rem; }
+    `
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BuilderSandboxComponent {
+  private readonly facade = inject(BuilderConfigFacade);
+
+  readonly branding = this.facade.branding;
+  readonly featureFlags = this.facade.featureFlags;
+  readonly featureFlagKeys = computed(() => Object.keys(this.featureFlags() ?? {}).sort());
+
+  constructor() {
+    this.facade.load();
+  }
+
+  onBrandNameChange(value: string): void {
+    this.facade.updateBrandName(value);
+  }
+
+  onFlagToggle(flag: string, event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.facade.setFeatureFlag(flag, input.checked);
+  }
+}