From b1f801b816fe4a19b226adbb626f7bc4323c2863 Mon Sep 17 00:00:00 2001
From: Clifford <33897029+cray-com@users.noreply.github.com>
Date: Sun, 30 Aug 2026 22:03:13 +0200
Subject: [PATCH 1/7] feat: add targets and changes exports to devtools

---
 PROJECT.md     |   3 +-
 README.md      |  18 ++++++++-
 src/core.ts    | 106 ++++++++++++++++++++++++++++++++++++++++++++-----
 src/element.ts |  52 ++++++++++++++++++++----
 4 files changed, 161 insertions(+), 18 deletions(-)

diff --git a/PROJECT.md b/PROJECT.md
index aac79b0..316f142 100644
--- a/PROJECT.md
+++ b/PROJECT.md
@@ -40,7 +40,8 @@ Der Astro-Adapter montiert ein browserseitiges Custom Element. Das Panel verwend
 
 V1 liefert:
 
-- Range-, Select- und Toggle-Controls;
+- Range-, Select- und Toggle-Controls; optionale Target/Page-Map-Zuordnung (`global`/`section`) und Token-/Local-Klassifikation; labeled Select-Optionen;
+- stabile Changes-/JSON-/Agent-Brief-Exporte gegenüber `initialState` (reiner Design-State, ohne Panel-UI-State);
 - benannte Variant Families mit Defaults;
 - URL-persistierten State und kopierbare Permalinks;
 - Reset, JSON-/TypeScript-Rezept, Copy und Download;
diff --git a/README.md b/README.md
index 7f73c56..f5049bf 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,23 @@ Website-Markup deklariert Scopes mit `data-fd-scope`. Effects setzen ausschließ
 <section data-fd-scope="grid"><article data-fd-scope="card"></article></section>
 ```
 
-Ohne eigenen Effect werden Familien als `data-fd-variant-card="default"` auf dem gleichnamigen Scope markiert. Ein Family-Effect kann stattdessen ein vorhandenes Website-Attribut wie `data-card-variant` setzen. Ein Control-Effect mit `attribute: 'card-density'` setzt entsprechend `data-card-density`.
+Ohne eigenen Effect werden Familien als `data-fd-variant-card="default"` auf dem gleichnamigen Scope markiert.
+
+### Targets und Changes
+
+Optional ordnet `targets` Controls und Families einer Seite bzw. einem Bereich zu. Sections werden im Markup mit `data-fd-target` registriert; ungültige Zuordnungen werden verworfen. `kind: 'global'` bleibt seitenweit, `kind: 'section'` scoped auf das registrierte Element:
+
+```ts
+const config = defineDevtoolsConfig({ project: 'site', targets: [
+  { key: 'hero', label: 'Hero', kind: 'section' },
+], families: [{ key: 'card', label: 'Card', target: 'hero', variants: [{ name: 'default' }] }], controls: [{
+  type: 'select', key: 'density', label: 'Density', classification: 'token',
+  options: [{ value: 'comfortable', label: 'Comfortable' }, 'compact'], default: 'comfortable',
+  target: 'hero', effect: { scope: 'card', attribute: 'density' },
+}] });
+```
+
+`changes(config, state)` und `changesJson` liefern ausschließlich geänderte Werte gegenüber `initialState`; `agentBrief` erzeugt eine knappe Markdown-Zusammenfassung. Panel-Auswahl und Vergleichsmodus sind UI-State und werden nicht exportiert. Ein Family-Effect kann stattdessen ein vorhandenes Website-Attribut wie `data-card-variant` setzen. Ein Control-Effect mit `attribute: 'card-density'` setzt entsprechend `data-card-density`.
 
 Website-CSS kann Tailwind über semantische Layer verwenden. Dynamische Reglerwerte bleiben CSS Custom Properties:
 
diff --git a/src/core.ts b/src/core.ts
index bfad7ae..ceb005b 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -12,6 +12,14 @@ export type Effect = {
   attribute?: string;
 };
 
+export type Target = {
+  key: string;
+  label: string;
+  kind: 'global' | 'section';
+};
+
+export type SelectOption = string | { value: string; label: string };
+
 export type Range = {
   type: 'range';
   key: string;
@@ -22,15 +30,19 @@ export type Range = {
   unit?: string;
   default: number;
   effect: Effect;
+  target?: string;
+  classification?: 'token' | 'local';
 };
 
 export type Select = {
   type: 'select';
   key: string;
   label: string;
-  options: readonly string[];
+  options: readonly SelectOption[];
   default: string;
   effect: Effect;
+  target?: string;
+  classification?: 'token' | 'local';
 };
 
 export type Toggle = {
@@ -39,6 +51,8 @@ export type Toggle = {
   label: string;
   default: boolean;
   effect: Effect;
+  target?: string;
+  classification?: 'token' | 'local';
 };
 
 export type Control = Range | Select | Toggle;
@@ -54,11 +68,13 @@ export type Family = {
   variants: readonly Variant[];
   default?: string;
   effect?: Effect;
+  target?: string;
 };
 export type DevtoolsConfig = {
   project: string;
   families: readonly Family[];
   controls?: readonly Control[];
+  targets?: readonly Target[];
   metadata?: Metadata;
   queryKey?: string;
 };
@@ -102,6 +118,15 @@ export function validateConfig(input: unknown): DevtoolsConfig {
   if (input.queryKey !== undefined && (typeof input.queryKey !== 'string' || !keyPattern.test(input.queryKey))) {
     fail('query key');
   }
+  if (input.targets !== undefined && !Array.isArray(input.targets)) fail('targets');
+  const targets: Target[] = [];
+  const targetKeys = new Set<string>();
+  for (const targetValue of (Array.isArray(input.targets) ? input.targets : [])) {
+    if (!isRecord(targetValue) || typeof targetValue.key !== 'string' || !keyPattern.test(targetValue.key) ||
+        targetKeys.has(targetValue.key) || typeof targetValue.label !== 'string' ||
+        (targetValue.kind !== 'global' && targetValue.kind !== 'section')) fail('target');
+    targetKeys.add(targetValue.key); targets.push(targetValue as unknown as Target);
+  }
   if (input.metadata !== undefined) {
     if (!isRecord(input.metadata) || Object.values(input.metadata).some((value) => value !== undefined && typeof value !== 'string')) {
       fail('metadata');
@@ -136,6 +161,7 @@ export function validateConfig(input: unknown): DevtoolsConfig {
       fail('family default');
     }
     if (familyValue.effect !== undefined) validateEffect(familyValue.effect);
+    if (familyValue.target !== undefined && (typeof familyValue.target !== 'string' || !targetKeys.has(familyValue.target))) fail('family target');
     families.push(familyValue as unknown as Family);
   }
 
@@ -148,6 +174,8 @@ export function validateConfig(input: unknown): DevtoolsConfig {
     }
     names.add(controlValue.key);
     validateEffect(controlValue.effect);
+    if (controlValue.target !== undefined && (typeof controlValue.target !== 'string' || !targetKeys.has(controlValue.target))) fail('control target');
+    if (controlValue.classification !== undefined && controlValue.classification !== 'token' && controlValue.classification !== 'local') fail('control classification');
     if (controlValue.type === 'range') {
       const { min, max, step = 1, unit = '' } = controlValue as {
         min: unknown;
@@ -164,9 +192,10 @@ export function validateConfig(input: unknown): DevtoolsConfig {
       }
     } else if (controlValue.type === 'select') {
       if (!Array.isArray(controlValue.options) || controlValue.options.length === 0 ||
-          controlValue.options.some((option) => typeof option !== 'string' || option.length === 0) ||
-          new Set(controlValue.options).size !== controlValue.options.length ||
-          typeof controlValue.default !== 'string' || !controlValue.options.includes(controlValue.default)) {
+          controlValue.options.some((option) => (typeof option !== 'string' && !isRecord(option)) ||
+            optionValue(option as SelectOption).length === 0 || (typeof option !== 'string' && typeof option.label !== 'string')) ||
+          new Set(controlValue.options.map((option) => optionValue(option))).size !== controlValue.options.length ||
+          typeof controlValue.default !== 'string' || !controlValue.options.some((option) => optionValue(option) === controlValue.default)) {
         fail('select');
       }
     } else if (controlValue.type === 'toggle') {
@@ -190,9 +219,11 @@ export function validateConfig(input: unknown): DevtoolsConfig {
   return config;
 }
 
+function optionValue(option: SelectOption): string { return typeof option === 'string' ? option : option.value; }
+
 function isValidValue(control: Control, value: unknown): value is ControlValue {
   if (control.type === 'range') return typeof value === 'number' && Number.isFinite(value) && value >= control.min && value <= control.max;
-  if (control.type === 'select') return typeof value === 'string' && control.options.includes(value);
+  if (control.type === 'select') return typeof value === 'string' && control.options.some((option) => optionValue(option) === value);
   return typeof value === 'boolean';
 }
 
@@ -261,10 +292,17 @@ export function formatCssValue(control: Range, value: number): string {
   return `${number}${control.unit ?? ''}`;
 }
 
+function scopedElements(root: ParentNode, scope: string, target?: string, targets?: readonly Target[]): HTMLElement[] {
+  const targetDefinition = target ? targets?.find((item) => item.key === target) : undefined;
+  const base = target && targetDefinition?.kind === 'section' ? root.querySelector<HTMLElement>(`[data-fd-target="${CSS.escape(target)}"]`) : root;
+  if (!base) return [];
+  const selector = `[data-fd-scope="${CSS.escape(scope)}"]`;
+  return Array.from(base.querySelectorAll<HTMLElement>(selector));
+}
+
 export function applyEffects(config: DevtoolsConfig, state: DevtoolsState, root: ParentNode = document): void {
   for (const control of config.controls ?? []) {
-    const selector = `[data-fd-scope="${CSS.escape(control.effect.scope)}"]`;
-    for (const element of Array.from(root.querySelectorAll<HTMLElement>(selector))) {
+    for (const element of scopedElements(root, control.effect.scope, control.target, config.targets)) {
       const value = state.values[control.key];
       if (control.effect.variable) {
         const cssValue = control.type === 'range' ? formatCssValue(control, value as number) : String(value);
@@ -276,8 +314,7 @@ export function applyEffects(config: DevtoolsConfig, state: DevtoolsState, root:
   }
   for (const family of config.families) {
     const scope = family.effect?.scope ?? family.key;
-    const selector = `[data-fd-scope="${CSS.escape(scope)}"]`;
-    for (const element of Array.from(root.querySelectorAll<HTMLElement>(selector))) {
+    for (const element of scopedElements(root, scope, family.target, config.targets)) {
       if (family.effect?.variable) element.style.setProperty(family.effect.variable, state.families[family.key]);
       else if (family.effect?.attribute) element.setAttribute(`data-${family.effect.attribute}`, state.families[family.key]);
       else element.setAttribute(`data-fd-variant-${kebab(family.key)}`, state.families[family.key]);
@@ -285,6 +322,57 @@ export function applyEffects(config: DevtoolsConfig, state: DevtoolsState, root:
   }
 }
 
+export type ChangeEntry = {
+  key: string;
+  label: string;
+  kind: 'family' | 'control';
+  from: ControlValue;
+  to: ControlValue;
+  target?: string;
+  targetKind?: 'global' | 'section';
+  classification?: 'token' | 'local';
+};
+export type Changes = {
+  project: string;
+  metadata?: Metadata;
+  changes: ChangeEntry[];
+  count: number;
+};
+
+/** Pure, deterministic comparison against the initial (or supplied) baseline. */
+export function changes(config: DevtoolsConfig, state: DevtoolsState, baseline: DevtoolsState = initialState(config)): Changes {
+  const current = validateState(config, state);
+  const base = validateState(config, baseline);
+  const targetMap = new Map((config.targets ?? []).map((target) => [target.key, target]));
+  const result: ChangeEntry[] = [];
+  for (const family of config.families) {
+    const from = base.families[family.key], to = current.families[family.key];
+    if (from !== to) { const target = family.target ? targetMap.get(family.target) : undefined;
+      result.push({ key: family.key, label: family.label, kind: 'family', from, to, ...(family.target ? { target: family.target, targetKind: target?.kind } : {}) }); }
+  }
+  for (const control of config.controls ?? []) {
+    const from = base.values[control.key], to = current.values[control.key];
+    if (from !== to) { const target = control.target ? targetMap.get(control.target) : undefined;
+      result.push({ key: control.key, label: control.label, kind: 'control', from, to, ...(control.target ? { target: control.target, targetKind: target?.kind } : {}), ...(control.classification ? { classification: control.classification } : {}) }); }
+  }
+  return { project: config.project, ...(config.metadata ? { metadata: config.metadata } : {}), changes: result, count: result.length };
+}
+
+export function changesJson(config: DevtoolsConfig, state: DevtoolsState, baseline?: DevtoolsState): string {
+  return JSON.stringify(changes(config, state, baseline), null, 2);
+}
+
+export function agentBrief(config: DevtoolsConfig, state: DevtoolsState, baseline?: DevtoolsState): string {
+  const diff = changes(config, state, baseline);
+  if (!diff.count) return `# ${config.project} changes\n\nNo changes.`;
+  const lines = diff.changes.map((item) => `- **${item.label}** (${item.kind}${item.target ? `, target: ${item.target}` : ''}${item.classification ? `, ${item.classification}` : ''}): \`${String(item.from)}\` → \`${String(item.to)}\``);
+  return `# ${config.project} changes\n\n${lines.join('\n')}`;
+}
+
+export const changesRecipe = changes;
+export const diff = changes;
+export const changesJSON = changesJson;
+
 export function recipe(config: DevtoolsConfig, state: DevtoolsState): string {
   return JSON.stringify({
     project: config.project,
diff --git a/src/element.ts b/src/element.ts
index 08fcdce..3d58cae 100644
--- a/src/element.ts
+++ b/src/element.ts
@@ -2,6 +2,9 @@ import {
   applyEffects,
   decodeState,
   recipe,
+  changesJson,
+  agentBrief,
+  initialState,
   stateUrl,
   typescriptRecipe,
   validateConfig,
@@ -32,6 +35,8 @@ export class FoundationDevtoolsElement extends HTMLElement {
   private status?: HTMLElement;
   private storageKey = 'foundation-devtools:panel';
   private ready = false;
+  private selectedTarget: string | undefined;
+  private compareMode: 'modified' | 'original' = 'modified';
 
   connectedCallback(): void {
     if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
@@ -61,12 +66,12 @@ export class FoundationDevtoolsElement extends HTMLElement {
           <button class="icon" data-action="collapse" aria-label="Panel öffnen" aria-expanded="false">+</button>
           <button class="icon" data-action="hide" aria-label="Ausblenden">×</button>
         </header><div class="body"></div><div class="meta"></div><div class="status" role="status" aria-live="polite"></div>
-        <footer><button data-action="reset">Reset</button><button data-action="permalink">Permalink</button>
+        <footer><button data-action="reset">Reset</button><button data-action="pick">Pick section</button><button data-action="changes">Copy changes</button><button data-action="brief">Copy agent brief</button><button data-action="permalink">Permalink</button>
           <button data-action="json">JSON</button><button data-action="ts">TypeScript</button><button data-action="download">Download</button></footer>
       </section>`;
     this.panel = root.querySelector('.panel')!;
     this.status = root.querySelector('.status')!;
-    root.addEventListener('click', (event) => this.action((event.target as HTMLElement).dataset.action));
+    root.addEventListener('click', (event) => { const target = event.target as HTMLElement; this.action(target.dataset.action, target.dataset.control); });
     this.ready = true;
   }
 
@@ -82,7 +87,19 @@ export class FoundationDevtoolsElement extends HTMLElement {
     if (!this.config || !this.state) return;
     const body = this.shadowRoot!.querySelector('.body')!;
     body.replaceChildren();
+    const compare = document.createElement('div'); compare.className = 'compare';
+    compare.innerHTML = '<button data-action="compare-original">Original</button><button data-action="compare-modified">Modified</button>';
+    body.append(compare);
+    if (this.config.targets?.length) {
+      const map = document.createElement('nav'); map.className = 'map'; map.setAttribute('aria-label', 'Targets');
+      const all = ['all', ...this.config.targets.map((target) => target.key)];
+      for (const key of all) { const button = document.createElement('button'); button.textContent = key === 'all' ? 'All' : this.config.targets.find((target) => target.key === key)!.label; button.dataset.target = key; button.setAttribute('aria-pressed', String((this.selectedTarget ?? 'all') === key)); button.addEventListener('click', () => { this.selectedTarget = key === 'all' ? undefined : key; this.render(); }); map.append(button); }
+      body.append(map);
+    }
+    let rendered = 0;
     for (const family of this.config.families) {
+      if (this.selectedTarget && family.target !== this.selectedTarget) continue;
+      rendered++;
       const select = document.createElement('select');
       select.id = `fd-family-${family.key}`;
       for (const variant of family.variants) select.add(new Option(variant.label ?? variant.name, variant.name));
@@ -96,7 +113,8 @@ export class FoundationDevtoolsElement extends HTMLElement {
       });
       body.append(this.row(family.label, select, `fd-family-label-${family.key}`));
     }
-    for (const control of this.config.controls ?? []) body.append(this.control(control));
+    for (const control of this.config.controls ?? []) { if (!this.selectedTarget || control.target === this.selectedTarget) { rendered++; body.append(this.control(control)); } }
+    if (this.selectedTarget && rendered === 0) { const empty = document.createElement('p'); empty.textContent = 'Keine Controls für dieses Target.'; body.append(empty); }
     const metadata = Object.entries(this.config.metadata ?? {}).map(([key, value]) => `${key}: ${value}`).join(' · ');
     this.shadowRoot!.querySelector('.meta')!.textContent = `${this.config.project}${metadata ? ` · ${metadata}` : ''}`;
   }
@@ -141,14 +159,16 @@ export class FoundationDevtoolsElement extends HTMLElement {
       });
     } else {
       const select = input as HTMLSelectElement;
-      for (const option of control.options) select.add(new Option(option, option));
+      for (const option of control.options) select.add(new Option(typeof option === 'string' ? option : option.label, typeof option === 'string' ? option : option.value));
       select.value = String(this.state!.values[control.key]);
       select.addEventListener('change', () => {
         this.state!.values[control.key] = select.value;
         this.update();
       });
     }
-    return this.row(control.label, input, `fd-label-${control.key}`, control.type === 'range' ? output : undefined);
+    const row = this.row(control.label, input, `fd-label-${control.key}`, control.type === 'range' ? output : undefined);
+    const reset = document.createElement('button'); reset.textContent = 'Reset'; reset.dataset.action = 'reset-control'; reset.dataset.control = control.key; row.append(reset);
+    return row;
   }
 
   private rangeText(control: Range, value: string): string {
@@ -182,7 +202,7 @@ export class FoundationDevtoolsElement extends HTMLElement {
     }
   }
 
-  private apply(): void { if (this.config && this.state) applyEffects(this.config, this.state); }
+  private apply(): void { if (this.config && this.state) applyEffects(this.config, this.compareMode === 'modified' ? this.state : initialState(this.config)); }
 
   private update(): void {
     if (!this.config || !this.state) return;
@@ -194,17 +214,35 @@ export class FoundationDevtoolsElement extends HTMLElement {
     }
   }
 
-  private async action(action?: string): Promise<void> {
+  private async action(action?: string, controlKey?: string): Promise<void> {
     if (!action || !this.config || !this.state) return;
     if (action === 'collapse') this.setPanelMode(this.panel?.classList.contains('collapsed') ? 'open' : 'collapsed');
     if (action === 'hide') this.setPanelMode('hidden');
     if (action === 'reset') { this.state = decodeState(this.config, null); this.render(); this.update(); }
+    if (action === 'reset-control' && controlKey) { const control = this.config.controls?.find((item) => item.key === controlKey); if (control) { this.state.values[controlKey] = control.default; this.render(); this.update(); } }
+    if (action === 'changes') await this.copy(changesJson(this.config, this.state));
+    if (action === 'brief') await this.copy(agentBrief(this.config, this.state));
+    if (action === 'pick') { this.feedback('Pick a registered section or press Escape'); this.startPicker(); }
+    if (action === 'compare-original') { this.compareMode = 'original'; this.apply(); }
+    if (action === 'compare-modified') { this.compareMode = 'modified'; this.apply(); }
     if (action === 'permalink') await this.copy(stateUrl(this.config, this.state));
     if (action === 'json') await this.copy(recipe(this.config, this.state));
     if (action === 'ts') await this.copy(typescriptRecipe(this.config, this.state));
     if (action === 'download') this.download(recipe(this.config, this.state));
   }
 
+  private startPicker(): void {
+    if (!this.config?.targets) return;
+    const targets = this.config.targets.filter((target) => target.kind === 'section').map((target) => target.key);
+    const elements = targets.flatMap((key) => Array.from(document.querySelectorAll<HTMLElement>(`[data-fd-target="${CSS.escape(key)}"]`)));
+    const old = new Map<HTMLElement, string>();
+    const cleanup = () => { elements.forEach((element) => { element.style.outline = old.get(element) ?? ''; element.removeEventListener('click', onClick); }); document.removeEventListener('keydown', onKey); };
+    const onClick = (event: Event) => { const element = event.currentTarget as HTMLElement; event.preventDefault(); event.stopPropagation(); this.selectedTarget = element.dataset.fdTarget; cleanup(); this.render(); };
+    const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') cleanup(); };
+    elements.forEach((element) => { old.set(element, element.style.outline); element.style.outline = '2px solid #8f98a3'; element.addEventListener('click', onClick); });
+    document.addEventListener('keydown', onKey);
+  }
+
   private async copy(value: string): Promise<void> {
     try {
       if (!navigator.clipboard?.writeText) throw new Error('Clipboard API unavailable');

From 1e7b516bc68dc660969253551e68efa7cf2bdefd Mon Sep 17 00:00:00 2001
From: Clifford <33897029+cray-com@users.noreply.github.com>
Date: Sun, 30 Aug 2026 22:05:31 +0200
Subject: [PATCH 2/7] fix: improve target map navigation and resets

---
 src/element.ts | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/element.ts b/src/element.ts
index 3d58cae..6bb2df4 100644
--- a/src/element.ts
+++ b/src/element.ts
@@ -2,6 +2,7 @@ import {
   applyEffects,
   decodeState,
   recipe,
+  changes,
   changesJson,
   agentBrief,
   initialState,
@@ -93,8 +94,26 @@ export class FoundationDevtoolsElement extends HTMLElement {
     if (this.config.targets?.length) {
       const map = document.createElement('nav'); map.className = 'map'; map.setAttribute('aria-label', 'Targets');
       const all = ['all', ...this.config.targets.map((target) => target.key)];
-      for (const key of all) { const button = document.createElement('button'); button.textContent = key === 'all' ? 'All' : this.config.targets.find((target) => target.key === key)!.label; button.dataset.target = key; button.setAttribute('aria-pressed', String((this.selectedTarget ?? 'all') === key)); button.addEventListener('click', () => { this.selectedTarget = key === 'all' ? undefined : key; this.render(); }); map.append(button); }
+      const changed = new Set(changes(this.config, this.state).changes.map((item) => item.target).filter((key): key is string => Boolean(key)));
+      for (const key of all) {
+        const target = key === 'all' ? undefined : this.config.targets.find((item) => item.key === key);
+        const button = document.createElement('button');
+        button.textContent = `${key === 'all' ? 'All' : target!.label}${target && changed.has(key) ? ' • changed' : ''}`;
+        button.dataset.target = key;
+        button.setAttribute('aria-pressed', String((this.selectedTarget ?? 'all') === key));
+        button.addEventListener('click', () => {
+          this.selectedTarget = key === 'all' ? undefined : key;
+          if (target?.kind === 'section') {
+            const section = document.querySelector<HTMLElement>(`[data-fd-target="${CSS.escape(key)}"]`);
+            section?.scrollIntoView({ block: 'nearest', behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+            if (section) { const previous = section.style.outline; section.style.outline = '2px solid #8f98a3'; window.setTimeout(() => { section.style.outline = previous; }, 500); }
+          }
+          this.render();
+        });
+        map.append(button);
+      }
       body.append(map);
+      if (this.selectedTarget) { const resetTarget = document.createElement('button'); resetTarget.textContent = 'Reset target'; resetTarget.dataset.action = 'reset-target'; resetTarget.dataset.control = this.selectedTarget; body.append(resetTarget); }
     }
     let rendered = 0;
     for (const family of this.config.families) {
@@ -220,6 +239,7 @@ export class FoundationDevtoolsElement extends HTMLElement {
     if (action === 'hide') this.setPanelMode('hidden');
     if (action === 'reset') { this.state = decodeState(this.config, null); this.render(); this.update(); }
     if (action === 'reset-control' && controlKey) { const control = this.config.controls?.find((item) => item.key === controlKey); if (control) { this.state.values[controlKey] = control.default; this.render(); this.update(); } }
+    if (action === 'reset-target' && controlKey) { for (const family of this.config.families.filter((item) => item.target === controlKey)) this.state.families[family.key] = family.default ?? family.variants[0].name; for (const control of this.config.controls ?? []) if (control.target === controlKey) this.state.values[control.key] = control.default; this.render(); this.update(); }
     if (action === 'changes') await this.copy(changesJson(this.config, this.state));
     if (action === 'brief') await this.copy(agentBrief(this.config, this.state));
     if (action === 'pick') { this.feedback('Pick a registered section or press Escape'); this.startPicker(); }

From f8b375aa7e73786f1e8fe7872188ee319eced62c Mon Sep 17 00:00:00 2001
From: Clifford <33897029+cray-com@users.noreply.github.com>
Date: Sun, 30 Aug 2026 22:07:09 +0200
Subject: [PATCH 3/7] fix: reset target defaults and scope target roots

---
 src/core.ts    |  3 ++-
 src/element.ts | 11 ++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/core.ts b/src/core.ts
index ceb005b..e065f0c 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -297,7 +297,8 @@ function scopedElements(root: ParentNode, scope: string, target?: string, target
   const base = target && targetDefinition?.kind === 'section' ? root.querySelector<HTMLElement>(`[data-fd-target="${CSS.escape(target)}"]`) : root;
   if (!base) return [];
   const selector = `[data-fd-scope="${CSS.escape(scope)}"]`;
-  return Array.from(base.querySelectorAll<HTMLElement>(selector));
+  const descendants = Array.from(base.querySelectorAll<HTMLElement>(selector));
+  return base instanceof HTMLElement && base.matches(selector) ? [base, ...descendants] : descendants;
 }
 
 export function applyEffects(config: DevtoolsConfig, state: DevtoolsState, root: ParentNode = document): void {
diff --git a/src/element.ts b/src/element.ts
index 6bb2df4..c0fe718 100644
--- a/src/element.ts
+++ b/src/element.ts
@@ -239,7 +239,16 @@ export class FoundationDevtoolsElement extends HTMLElement {
     if (action === 'hide') this.setPanelMode('hidden');
     if (action === 'reset') { this.state = decodeState(this.config, null); this.render(); this.update(); }
     if (action === 'reset-control' && controlKey) { const control = this.config.controls?.find((item) => item.key === controlKey); if (control) { this.state.values[controlKey] = control.default; this.render(); this.update(); } }
-    if (action === 'reset-target' && controlKey) { for (const family of this.config.families.filter((item) => item.target === controlKey)) this.state.families[family.key] = family.default ?? family.variants[0].name; for (const control of this.config.controls ?? []) if (control.target === controlKey) this.state.values[control.key] = control.default; this.render(); this.update(); }
+    if (action === 'reset-target' && controlKey) {
+      for (const family of this.config.families.filter((item) => item.target === controlKey)) {
+        const selected = family.default ?? family.variants[0].name;
+        this.state.families[family.key] = selected;
+        const variant = family.variants.find((item) => item.name === selected);
+        Object.assign(this.state.values, variant?.defaults ?? {});
+      }
+      for (const control of this.config.controls ?? []) if (control.target === controlKey) this.state.values[control.key] = control.default;
+      this.render(); this.update();
+    }
     if (action === 'changes') await this.copy(changesJson(this.config, this.state));
     if (action === 'brief') await this.copy(agentBrief(this.config, this.state));
     if (action === 'pick') { this.feedback('Pick a registered section or press Escape'); this.startPicker(); }

From 0c4abb42e37a8cfe3cafc7193e35e96624c2802a Mon Sep 17 00:00:00 2001
From: Clifford <33897029+cray-com@users.noreply.github.com>
Date: Sun, 30 Aug 2026 22:15:57 +0200
Subject: [PATCH 4/7] test: verify devtools targets and reset behavior

---
 README.md          |  2 +-
 fixture/smoke.html | 26 +++++++++++++++++++-----
 src/core.ts        | 22 ++++++++++++++++----
 src/element.ts     | 50 +++++++++++++++++++++++++++-------------------
 test/core.test.mjs | 12 ++++++++++-
 5 files changed, 81 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index f5049bf..a433212 100644
--- a/README.md
+++ b/README.md
@@ -78,7 +78,7 @@ Website-CSS kann Tailwind über semantische Layer verwenden. Dynamische Reglerwe
 
 ## Öffentliche Schnittstelle
 
-`DevtoolsConfig`, `Metadata`, `Family`, `Variant`, `Range`, `Select`, `Toggle`, `DevtoolsState` sowie `defineDevtoolsConfig`, `validateConfig`, `initialState`, `validateState`, `encodeState`, `decodeState`, `stateUrl`, `applyEffects`, `recipe` und `typescriptRecipe` sind serialisierbar bzw. strict typisiert. Ungültige URL-Werte werden verworfen (fail-closed).
+`DevtoolsConfig`, `Metadata`, `Target`, `Family`, `Variant`, `Range`, `Select`, `Toggle`, `DevtoolsState` sowie `defineDevtoolsConfig`, `validateConfig`, `initialState`, `validateState`, `encodeState`, `decodeState`, `stateUrl`, `applyEffects`, `changes`, `changesJson`, `agentBrief`, `resetBaseline`, `recipe` und `typescriptRecipe` sind serialisierbar bzw. strict typisiert. Nicht-kanonische Alias-Exporte werden nicht angeboten. Ungültige URL-Werte werden verworfen (fail-closed).
 
 Das Panel startet platzsparend eingeklappt. Es bietet Reset, Permalink-, JSON- und TypeScript-Copy sowie JSON-Download. Es ist vollständig ausblendbar und per Cmd/Ctrl+Shift+D wiederherstellbar beziehungsweise umschaltbar. Tastaturfokus und Reduced Motion werden berücksichtigt. URL-State verwendet nur den Parameter `fd` und erhält vorhandene Parameter.
 
diff --git a/fixture/smoke.html b/fixture/smoke.html
index eef85b2..847c356 100644
--- a/fixture/smoke.html
+++ b/fixture/smoke.html
@@ -5,7 +5,7 @@
   .grid { display: grid; gap: var(--fd-gap, 1rem); }
   [data-fd-scope="card"] { color: rebeccapurple; }
 </style>
-<main class="grid" data-fd-scope="grid"><article data-fd-scope="card">Card</article><article data-fd-scope="card">Card</article></main>
+<main class="grid" data-fd-target="hero" data-fd-scope="grid"><article data-fd-scope="card">Card</article><article data-fd-scope="card">Card</article></main>
 <script type="module">
   window.addEventListener('error', (event) => { document.title = `FD error ${event.message}`; });
   import { defineDevtoolsElement } from '../dist/element.js';
@@ -13,11 +13,12 @@
   localStorage.clear();
   const config = {
     project: 'fixture',
-    families: [{ key: 'card', label: 'Card', effect: { scope: 'card', attribute: 'card-variant' }, variants: [
+    targets: [{ key: 'hero', label: 'Hero', kind: 'section' }],
+    families: [{ key: 'card', label: 'Card', target: 'hero', effect: { scope: 'card', attribute: 'card-variant' }, variants: [
       { name: 'one' }, { name: 'two', defaults: { gap: 3 } },
     ] }],
     controls: [
-      { type: 'range', key: 'gap', label: 'Gap', min: 1, max: 4, default: 2,
+      { type: 'range', key: 'gap', label: 'Gap', min: 1, max: 4, default: 2, target: 'hero',
         unit: 'rem', effect: { scope: 'grid', variable: '--fd-gap' } },
       { type: 'select', key: 'density', label: 'Density', options: ['compact', 'roomy'], default: 'compact',
         effect: { scope: 'card', attribute: 'card-density' } },
@@ -45,9 +46,11 @@
   toggle.dispatchEvent(new Event('change', { bubbles: true }));
   const card = document.querySelector('[data-fd-scope="card"]');
   const grid = document.querySelector('[data-fd-scope="grid"]');
+  const map = root.querySelector('.map');
+  const mapCounts = map && /All \(4\/2\)/.test(map.textContent) && map.textContent.includes('Global') && map.textContent.includes('Section');
   const passed = root && card.getAttribute('data-card-variant') === 'two' &&
     card.getAttribute('data-card-density') === 'roomy' && card.getAttribute('data-featured') === 'true' &&
-    grid.style.getPropertyValue('--fd-gap') === '4rem' &&
+    grid.style.getPropertyValue('--fd-gap') === '4rem' && mapCounts &&
     new URL(location.href).searchParams.has('fd');
   root.querySelector('[data-action="hide"]').click();
   const hidden = root.querySelector('.panel').classList.contains('hidden');
@@ -56,10 +59,23 @@
     root.querySelector('.panel').classList.contains('collapsed');
   document.dispatchEvent(new KeyboardEvent('keydown', { key: 'd', ctrlKey: true, shiftKey: true }));
   const shortcutOpened = !root.querySelector('.panel').classList.contains('collapsed');
+  root.querySelector('[data-action="changes"]').click();
+  await new Promise((resolve) => setTimeout(resolve, 50));
+  const copiedChanges = ['Copied', 'Copy unavailable'].includes(root.querySelector('.status').textContent);
+  root.querySelector('[data-action="compare-original"]').click();
+  const originalApplied = grid.style.getPropertyValue('--fd-gap') === '2rem';
+  root.querySelector('[data-action="compare-modified"]').click();
+  const modifiedRestored = grid.style.getPropertyValue('--fd-gap') === '4rem';
+  root.querySelector('[data-action="pick"]').click();
+  const hero = document.querySelector('[data-fd-target="hero"]');
+  hero.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
+  const marked = hero.style.outline !== '';
+  document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+  const cleaned = hero.style.outline === '';
   root.querySelector('[data-action="json"]').click();
   range.focus();
   await new Promise((resolve) => setTimeout(resolve, 50));
   const feedback = ['Copied', 'Copy unavailable'].includes(root.querySelector('.status').textContent);
-  document.title = passed && initiallyCollapsed && opened && hidden && restoredCollapsed && shortcutOpened && feedback
+  document.title = passed && initiallyCollapsed && opened && hidden && restoredCollapsed && shortcutOpened && feedback && copiedChanges && originalApplied && modifiedRestored && marked && cleaned
     ? 'FD browser PASS' : 'FD browser FAIL';
 </script>
diff --git a/src/core.ts b/src/core.ts
index e065f0c..e676ec2 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -193,7 +193,7 @@ export function validateConfig(input: unknown): DevtoolsConfig {
     } else if (controlValue.type === 'select') {
       if (!Array.isArray(controlValue.options) || controlValue.options.length === 0 ||
           controlValue.options.some((option) => (typeof option !== 'string' && !isRecord(option)) ||
-            optionValue(option as SelectOption).length === 0 || (typeof option !== 'string' && typeof option.label !== 'string')) ||
+            !isValidOption(option) || optionValue(option as SelectOption).length === 0) ||
           new Set(controlValue.options.map((option) => optionValue(option))).size !== controlValue.options.length ||
           typeof controlValue.default !== 'string' || !controlValue.options.some((option) => optionValue(option) === controlValue.default)) {
         fail('select');
@@ -219,6 +219,10 @@ export function validateConfig(input: unknown): DevtoolsConfig {
   return config;
 }
 
+function isValidOption(option: unknown): option is SelectOption {
+  return typeof option === 'string' ? option.length > 0 : isRecord(option) && typeof option.value === 'string' && option.value.length > 0 && typeof option.label === 'string' && option.label.length > 0;
+}
+
 function optionValue(option: SelectOption): string { return typeof option === 'string' ? option : option.value; }
 
 function isValidValue(control: Control, value: unknown): value is ControlValue {
@@ -370,9 +374,19 @@ export function agentBrief(config: DevtoolsConfig, state: DevtoolsState, baselin
   return `# ${config.project} changes\n\n${lines.join('\n')}`;
 }
 
-export const changesRecipe = changes;
-export const diff = changes;
-export const changesJSON = changesJson;
+/** Return a fresh state baseline; useful for scoped reset controls. */
+export function resetBaseline(config: DevtoolsConfig, state: DevtoolsState, target?: string): DevtoolsState {
+  const result = validateState(config, state);
+  const baseline = initialState(config);
+  if (!target) return baseline;
+  for (const family of config.families) if (family.target === target) {
+    result.families[family.key] = baseline.families[family.key];
+    const variant = family.variants.find((item) => item.name === baseline.families[family.key]);
+    for (const key of Object.keys(variant?.defaults ?? {})) result.values[key] = baseline.values[key];
+  }
+  for (const control of config.controls ?? []) if (control.target === target) result.values[control.key] = baseline.values[control.key];
+  return result;
+}
 
 export function recipe(config: DevtoolsConfig, state: DevtoolsState): string {
   return JSON.stringify({
diff --git a/src/element.ts b/src/element.ts
index c0fe718..af117d3 100644
--- a/src/element.ts
+++ b/src/element.ts
@@ -6,6 +6,7 @@ import {
   changesJson,
   agentBrief,
   initialState,
+  resetBaseline,
   stateUrl,
   typescriptRecipe,
   validateConfig,
@@ -38,6 +39,9 @@ export class FoundationDevtoolsElement extends HTMLElement {
   private ready = false;
   private selectedTarget: string | undefined;
   private compareMode: 'modified' | 'original' = 'modified';
+  private targetFilter = '';
+  private targetKind: 'all' | 'global' | 'section' = 'all';
+  private pickerCleanup?: () => void;
 
   connectedCallback(): void {
     if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
@@ -47,6 +51,7 @@ export class FoundationDevtoolsElement extends HTMLElement {
 
   disconnectedCallback(): void {
     document.removeEventListener('keydown', this.recover);
+    this.pickerCleanup?.(); this.pickerCleanup = undefined;
   }
 
   configure(config: DevtoolsConfig): void {
@@ -93,12 +98,18 @@ export class FoundationDevtoolsElement extends HTMLElement {
     body.append(compare);
     if (this.config.targets?.length) {
       const map = document.createElement('nav'); map.className = 'map'; map.setAttribute('aria-label', 'Targets');
-      const all = ['all', ...this.config.targets.map((target) => target.key)];
-      const changed = new Set(changes(this.config, this.state).changes.map((item) => item.target).filter((key): key is string => Boolean(key)));
+      const search = document.createElement('input'); search.type = 'search'; search.placeholder = 'Filter targets'; search.value = this.targetFilter; search.setAttribute('aria-label', 'Filter targets');
+      search.addEventListener('input', () => { this.targetFilter = search.value; this.render(); }); map.append(search);
+      for (const kind of ['all', 'global', 'section'] as const) { const tab = document.createElement('button'); tab.textContent = kind[0].toUpperCase() + kind.slice(1); tab.dataset.mapKind = kind; tab.setAttribute('aria-pressed', String(this.targetKind === kind)); tab.addEventListener('click', () => { this.targetKind = kind; this.render(); }); map.append(tab); }
+      const diff = changes(this.config, this.state).changes;
+      const matches = (key: string) => { const target = this.config!.targets!.find((item) => item.key === key); return key === 'all' || (this.targetKind === 'all' || target?.kind === this.targetKind) && (!this.targetFilter || (target?.label ?? key).toLowerCase().includes(this.targetFilter.toLowerCase())); };
+      const all = ['all', ...this.config.targets.map((target) => target.key)].filter(matches);
       for (const key of all) {
         const target = key === 'all' ? undefined : this.config.targets.find((item) => item.key === key);
+        const available = key === 'all' ? this.config.families.length + (this.config.controls ?? []).length : this.config.families.filter((item) => item.target === key).length + (this.config.controls ?? []).filter((item) => item.target === key).length;
+        const changed = key === 'all' ? diff.length : diff.filter((item) => item.target === key).length;
         const button = document.createElement('button');
-        button.textContent = `${key === 'all' ? 'All' : target!.label}${target && changed.has(key) ? ' • changed' : ''}`;
+        button.textContent = `${key === 'all' ? 'All' : target!.label} (${available}/${changed})`;
         button.dataset.target = key;
         button.setAttribute('aria-pressed', String((this.selectedTarget ?? 'all') === key));
         button.addEventListener('click', () => {
@@ -114,6 +125,7 @@ export class FoundationDevtoolsElement extends HTMLElement {
       }
       body.append(map);
       if (this.selectedTarget) { const resetTarget = document.createElement('button'); resetTarget.textContent = 'Reset target'; resetTarget.dataset.action = 'reset-target'; resetTarget.dataset.control = this.selectedTarget; body.append(resetTarget); }
+      if (all.length === 0) { const empty = document.createElement('p'); empty.textContent = 'Keine Targets gefunden.'; map.append(empty); }
     }
     let rendered = 0;
     for (const family of this.config.families) {
@@ -237,18 +249,12 @@ export class FoundationDevtoolsElement extends HTMLElement {
     if (!action || !this.config || !this.state) return;
     if (action === 'collapse') this.setPanelMode(this.panel?.classList.contains('collapsed') ? 'open' : 'collapsed');
     if (action === 'hide') this.setPanelMode('hidden');
-    if (action === 'reset') { this.state = decodeState(this.config, null); this.render(); this.update(); }
-    if (action === 'reset-control' && controlKey) { const control = this.config.controls?.find((item) => item.key === controlKey); if (control) { this.state.values[controlKey] = control.default; this.render(); this.update(); } }
-    if (action === 'reset-target' && controlKey) {
-      for (const family of this.config.families.filter((item) => item.target === controlKey)) {
-        const selected = family.default ?? family.variants[0].name;
-        this.state.families[family.key] = selected;
-        const variant = family.variants.find((item) => item.name === selected);
-        Object.assign(this.state.values, variant?.defaults ?? {});
-      }
-      for (const control of this.config.controls ?? []) if (control.target === controlKey) this.state.values[control.key] = control.default;
-      this.render(); this.update();
+    if (action === 'reset') { this.state = initialState(this.config); this.render(); this.update(); }
+    if (action === 'reset-control' && controlKey) {
+      const control = this.config.controls?.find((item) => item.key === controlKey);
+      if (control) { this.state.values[controlKey] = initialState(this.config).values[controlKey]; this.render(); this.update(); }
     }
+    if (action === 'reset-target' && controlKey) { this.state = resetBaseline(this.config, this.state, controlKey); this.render(); this.update(); }
     if (action === 'changes') await this.copy(changesJson(this.config, this.state));
     if (action === 'brief') await this.copy(agentBrief(this.config, this.state));
     if (action === 'pick') { this.feedback('Pick a registered section or press Escape'); this.startPicker(); }
@@ -261,15 +267,19 @@ export class FoundationDevtoolsElement extends HTMLElement {
   }
 
   private startPicker(): void {
+    this.pickerCleanup?.();
     if (!this.config?.targets) return;
-    const targets = this.config.targets.filter((target) => target.kind === 'section').map((target) => target.key);
-    const elements = targets.flatMap((key) => Array.from(document.querySelectorAll<HTMLElement>(`[data-fd-target="${CSS.escape(key)}"]`)));
-    const old = new Map<HTMLElement, string>();
-    const cleanup = () => { elements.forEach((element) => { element.style.outline = old.get(element) ?? ''; element.removeEventListener('click', onClick); }); document.removeEventListener('keydown', onKey); };
+    const keys = this.config.targets.filter((target) => target.kind === 'section').map((target) => target.key);
+    const elements = keys.flatMap((key) => Array.from(document.querySelectorAll<HTMLElement>(`[data-fd-target="${CSS.escape(key)}"]`)));
+    const old = new Map<HTMLElement, string>(); let hovered: HTMLElement | undefined;
+    const listeners = new Map<HTMLElement, { enter: () => void; leave: () => void; focus: () => void }>();
+    const clearMark = () => { if (hovered) { hovered.style.outline = old.get(hovered) ?? ''; hovered = undefined; } };
+    const mark = (element: HTMLElement) => { clearMark(); old.set(element, element.style.outline); hovered = element; element.style.outline = '2px solid #8f98a3'; };
+    const cleanup = () => { clearMark(); elements.forEach((element) => { element.removeEventListener('click', onClick); const listener = listeners.get(element); if (listener) { element.removeEventListener('pointerenter', listener.enter); element.removeEventListener('pointerleave', listener.leave); element.removeEventListener('focus', listener.focus); } }); document.removeEventListener('keydown', onKey); this.pickerCleanup = undefined; };
     const onClick = (event: Event) => { const element = event.currentTarget as HTMLElement; event.preventDefault(); event.stopPropagation(); this.selectedTarget = element.dataset.fdTarget; cleanup(); this.render(); };
     const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') cleanup(); };
-    elements.forEach((element) => { old.set(element, element.style.outline); element.style.outline = '2px solid #8f98a3'; element.addEventListener('click', onClick); });
-    document.addEventListener('keydown', onKey);
+    elements.forEach((element) => { const enter = () => mark(element); const leave = () => { if (hovered === element) clearMark(); }; const focus = () => mark(element); listeners.set(element, { enter, leave, focus }); element.addEventListener('pointerenter', enter); element.addEventListener('pointerleave', leave); element.addEventListener('focus', focus); element.addEventListener('click', onClick); });
+    document.addEventListener('keydown', onKey); this.pickerCleanup = cleanup;
   }
 
   private async copy(value: string): Promise<void> {
diff --git a/test/core.test.mjs b/test/core.test.mjs
index 0ce1b37..3f6c69b 100644
--- a/test/core.test.mjs
+++ b/test/core.test.mjs
@@ -1,10 +1,20 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { defineDevtoolsConfig, initialState, validateState, encodeState, decodeState, stateUrl, recipe } from '../dist/core.js';
+import { defineDevtoolsConfig, initialState, validateState, encodeState, decodeState, stateUrl, recipe, changes, resetBaseline } from '../dist/core.js';
 const config=defineDevtoolsConfig({project:'fixture',metadata:{route:'/x'},families:[{key:'card',label:'Card',variants:[{name:'a'},{name:'b'}]}],controls:[{type:'range',key:'gap',label:'Gap',min:0,max:20,default:4,effect:{scope:'grid',variable:'--fd-gap'}},{type:'toggle',key:'featured',label:'Featured',default:false,effect:{scope:'card',attribute:'featured'}}]});
 test('defaults and fail-closed state',()=>{const s=initialState(config);assert.equal(s.values.gap,4);assert.equal(validateState(config,{values:{gap:999,featured:'yes'},families:{card:'unknown'}}).values.gap,4);});
 test('URL codec is reproducible and preserves params',()=>{const s={families:{card:'b'},values:{gap:8,featured:true}};const encoded=encodeState(config,s);assert.deepEqual(decodeState(config,encoded),s);const u=stateUrl(config,s,'https://example.test/?utm=x');assert.equal(new URL(u).searchParams.get('utm'),'x');assert.ok(u.includes('fd='));});
 test('recipe is JSON',()=>{assert.equal(JSON.parse(recipe(config,initialState(config))).project,'fixture');});
+test('targets, labeled options and fail-closed object validation', () => {
+  const targetConfig = defineDevtoolsConfig({ project: 'targets', targets: [{ key: 'hero', label: 'Hero', kind: 'section' }], families: [{ key: 'layout', label: 'Layout', target: 'hero', variants: [{ name: 'base', defaults: { density: 'compact' } }, { name: 'wide' }] }], controls: [{ type: 'select', key: 'density', label: 'Density', options: [{ value: 'compact', label: 'Compact' }, 'roomy'], default: 'roomy', target: 'hero', classification: 'token', effect: { scope: 'hero', attribute: 'density' } }] });
+  assert.equal(initialState(targetConfig).values.density, 'compact');
+  assert.equal(changes(targetConfig, initialState(targetConfig)).count, 0);
+  const modified = validateState(targetConfig, { families: { layout: 'wide' }, values: { density: 'compact' } });
+  assert.equal(changes(targetConfig, modified).count, 1);
+  assert.equal(changes(targetConfig, resetBaseline(targetConfig, modified, 'hero')).count, 0);
+  for (const options of [[{ label: 'Missing value' }], [{ value: '', label: 'Empty' }], [{ value: 'x' }]]) assert.throws(() => defineDevtoolsConfig({ project: 'x', families: [{ key: 'f', label: 'F', variants: [{ name: 'a' }] }], controls: [{ type: 'select', key: 's', label: 'S', options, default: 'x', effect: { scope: 'f', attribute: 'x' } }] }));
+});
+
 test('invalid config rejects', () => {
   assert.throws(() => defineDevtoolsConfig({ project: 'x', families: [{ key: 'bad key', variants: [] }] }));
   assert.throws(() => defineDevtoolsConfig({

From ae13930d8086f30f3116e8410f40e0284374fa6d Mon Sep 17 00:00:00 2001
From: Clifford <33897029+cray-com@users.noreply.github.com>
Date: Sun, 30 Aug 2026 22:18:35 +0200
Subject: [PATCH 5/7] fix: harden reset map filter and compare state

---
 src/core.ts        | 5 +++--
 src/element.ts     | 8 +++++---
 test/core.test.mjs | 3 +++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/core.ts b/src/core.ts
index e676ec2..982d3de 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -381,8 +381,9 @@ export function resetBaseline(config: DevtoolsConfig, state: DevtoolsState, targ
   if (!target) return baseline;
   for (const family of config.families) if (family.target === target) {
     result.families[family.key] = baseline.families[family.key];
-    const variant = family.variants.find((item) => item.name === baseline.families[family.key]);
-    for (const key of Object.keys(variant?.defaults ?? {})) result.values[key] = baseline.values[key];
+    // A reset must also clear defaults from the previously selected variant.
+    const variantKeys = new Set(family.variants.flatMap((variant) => Object.keys(variant.defaults ?? {})));
+    for (const key of variantKeys) result.values[key] = baseline.values[key];
   }
   for (const control of config.controls ?? []) if (control.target === target) result.values[control.key] = baseline.values[control.key];
   return result;
diff --git a/src/element.ts b/src/element.ts
index af117d3..1c8290c 100644
--- a/src/element.ts
+++ b/src/element.ts
@@ -22,7 +22,7 @@ const styles = `
 .panel { width: min(360px, calc(100vw - 24px)); max-height: min(760px, calc(100vh - 24px)); overflow: auto; background: #17191c; border: 1px solid #454a51; border-radius: 6px; box-shadow: 0 5px 24px #0008; }
 .bar { display: flex; align-items: center; gap: 6px; padding: 5px 7px; background: #22262a; position: sticky; top: 0; }
 .title { flex: 1; font-weight: 700; } button { border: 0; border-radius: 3px; padding: 4px 6px; color: inherit; background: #292e34; cursor: pointer; } .icon { background: transparent; font-size: 15px; }
-button:focus, select:focus, input:focus { outline: 2px solid #74b9ff; outline-offset: 1px; }
+button:focus, select:focus, input:focus { outline: 2px solid #74b9ff; outline-offset: 1px; } button[aria-pressed="true"] { background: #4a5868; color: #fff; }
 .body { display: grid; gap: 8px; padding: 9px; } .control { display: grid; gap: 3px; } label { display: flex; justify-content: space-between; gap: 8px; color: #c8cdd3; } output { color: #fff; }
 input, select { width: 100%; min-width: 0; color: #fff; background: #292e34; border: 1px solid #555b64; border-radius: 3px; padding: 3px; } input[type=checkbox] { width: auto; justify-self: start; }
 .meta, .status { padding: 7px 9px; color: #9ba3ad; border-top: 1px solid #353a40; } .status:empty { display: none; } footer { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border-top: 1px solid #353a40; } .collapsed .body, .collapsed footer, .collapsed .meta, .collapsed .status { display: none; } .hidden { display: none; }
@@ -94,7 +94,9 @@ export class FoundationDevtoolsElement extends HTMLElement {
     const body = this.shadowRoot!.querySelector('.body')!;
     body.replaceChildren();
     const compare = document.createElement('div'); compare.className = 'compare';
-    compare.innerHTML = '<button data-action="compare-original">Original</button><button data-action="compare-modified">Modified</button>';
+    compare.innerHTML = '<button data-action="compare-original" aria-pressed="false">Original</button><button data-action="compare-modified" aria-pressed="true">Modified</button>';
+    compare.querySelector<HTMLButtonElement>('[data-action="compare-original"]')!.setAttribute('aria-pressed', String(this.compareMode === 'original'));
+    compare.querySelector<HTMLButtonElement>('[data-action="compare-modified"]')!.setAttribute('aria-pressed', String(this.compareMode === 'modified'));
     body.append(compare);
     if (this.config.targets?.length) {
       const map = document.createElement('nav'); map.className = 'map'; map.setAttribute('aria-label', 'Targets');
@@ -102,7 +104,7 @@ export class FoundationDevtoolsElement extends HTMLElement {
       search.addEventListener('input', () => { this.targetFilter = search.value; this.render(); }); map.append(search);
       for (const kind of ['all', 'global', 'section'] as const) { const tab = document.createElement('button'); tab.textContent = kind[0].toUpperCase() + kind.slice(1); tab.dataset.mapKind = kind; tab.setAttribute('aria-pressed', String(this.targetKind === kind)); tab.addEventListener('click', () => { this.targetKind = kind; this.render(); }); map.append(tab); }
       const diff = changes(this.config, this.state).changes;
-      const matches = (key: string) => { const target = this.config!.targets!.find((item) => item.key === key); return key === 'all' || (this.targetKind === 'all' || target?.kind === this.targetKind) && (!this.targetFilter || (target?.label ?? key).toLowerCase().includes(this.targetFilter.toLowerCase())); };
+      const matches = (key: string) => { const target = this.config!.targets!.find((item) => item.key === key); return key === 'all' ? !this.targetFilter : (this.targetKind === 'all' || target?.kind === this.targetKind) && (!this.targetFilter || (target?.label ?? key).toLowerCase().includes(this.targetFilter.toLowerCase())); };
       const all = ['all', ...this.config.targets.map((target) => target.key)].filter(matches);
       for (const key of all) {
         const target = key === 'all' ? undefined : this.config.targets.find((item) => item.key === key);
diff --git a/test/core.test.mjs b/test/core.test.mjs
index 3f6c69b..b3746dc 100644
--- a/test/core.test.mjs
+++ b/test/core.test.mjs
@@ -12,6 +12,9 @@ test('targets, labeled options and fail-closed object validation', () => {
   const modified = validateState(targetConfig, { families: { layout: 'wide' }, values: { density: 'compact' } });
   assert.equal(changes(targetConfig, modified).count, 1);
   assert.equal(changes(targetConfig, resetBaseline(targetConfig, modified, 'hero')).count, 0);
+  const variantConfig = defineDevtoolsConfig({ project: 'variants', targets: [{ key: 'hero', label: 'Hero', kind: 'section' }], families: [{ key: 'family', label: 'Family', target: 'hero', variants: [{ name: 'base' }, { name: 'custom', defaults: { density: 'compact' } }] }], controls: [{ type: 'select', key: 'density', label: 'Density', options: ['roomy', 'compact'], default: 'roomy', effect: { scope: 'hero', attribute: 'density' } }] });
+  const stale = validateState(variantConfig, { families: { family: 'custom' }, values: { density: 'compact' } });
+  assert.equal(changes(variantConfig, resetBaseline(variantConfig, stale, 'hero')).count, 0);
   for (const options of [[{ label: 'Missing value' }], [{ value: '', label: 'Empty' }], [{ value: 'x' }]]) assert.throws(() => defineDevtoolsConfig({ project: 'x', families: [{ key: 'f', label: 'F', variants: [{ name: 'a' }] }], controls: [{ type: 'select', key: 's', label: 'S', options, default: 'x', effect: { scope: 'f', attribute: 'x' } }] }));
 });
 

From 2947cf3dac61c8e4105cf81ce0aada6d2bba8083 Mon Sep 17 00:00:00 2001
From: Clifford <33897029+cray-com@users.noreply.github.com>
Date: Sun, 30 Aug 2026 22:20:01 +0200
Subject: [PATCH 6/7] fix: refresh compare button state

---
 src/element.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/element.ts b/src/element.ts
index 1c8290c..2d16c1c 100644
--- a/src/element.ts
+++ b/src/element.ts
@@ -260,8 +260,8 @@ export class FoundationDevtoolsElement extends HTMLElement {
     if (action === 'changes') await this.copy(changesJson(this.config, this.state));
     if (action === 'brief') await this.copy(agentBrief(this.config, this.state));
     if (action === 'pick') { this.feedback('Pick a registered section or press Escape'); this.startPicker(); }
-    if (action === 'compare-original') { this.compareMode = 'original'; this.apply(); }
-    if (action === 'compare-modified') { this.compareMode = 'modified'; this.apply(); }
+    if (action === 'compare-original') { this.compareMode = 'original'; this.render(); this.apply(); }
+    if (action === 'compare-modified') { this.compareMode = 'modified'; this.render(); this.apply(); }
     if (action === 'permalink') await this.copy(stateUrl(this.config, this.state));
     if (action === 'json') await this.copy(recipe(this.config, this.state));
     if (action === 'ts') await this.copy(typescriptRecipe(this.config, this.state));

From 4eec01ae9af82d3ab9a3fddb4655c1245315e40b Mon Sep 17 00:00:00 2001
From: Clifford <33897029+cray-com@users.noreply.github.com>
Date: Sun, 30 Aug 2026 22:30:48 +0200
Subject: [PATCH 7/7] feat: complete page targets and changes workflow (#7 #8)

---
 PROJECT.md         |   4 +-
 README.md          |   4 +-
 fixture/smoke.html |  47 +++++++++++++----
 package-lock.json  |   4 +-
 package.json       |   2 +-
 src/core.ts        |  27 +++++++---
 src/element.ts     | 126 +++++++++++++++++++++++++++++++++------------
 test/core.test.mjs |  19 +++++--
 8 files changed, 176 insertions(+), 57 deletions(-)

diff --git a/PROJECT.md b/PROJECT.md
index 316f142..796a985 100644
--- a/PROJECT.md
+++ b/PROJECT.md
@@ -36,9 +36,9 @@ serialisierbare Website-Konfiguration
 
 Der Astro-Adapter montiert ein browserseitiges Custom Element. Das Panel verwendet Shadow DOM, damit Website-CSS und Tool-CSS einander nicht beeinflussen.
 
-## V1
+## V1.1
 
-V1 liefert:
+V1.1 liefert:
 
 - Range-, Select- und Toggle-Controls; optionale Target/Page-Map-Zuordnung (`global`/`section`) und Token-/Local-Klassifikation; labeled Select-Optionen;
 - stabile Changes-/JSON-/Agent-Brief-Exporte gegenüber `initialState` (reiner Design-State, ohne Panel-UI-State);
diff --git a/README.md b/README.md
index a433212..57a5fd0 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 ## Installation
 
 ```bash
-npm install --save-dev https://github.com/cray-com/foundation-devtools/releases/download/v0.1.1/cray-com-foundation-devtools-0.1.1.tgz
+npm install --save-dev https://github.com/cray-com/foundation-devtools/releases/download/v0.2.0/cray-com-foundation-devtools-0.2.0.tgz
 ```
 
 ## Astro
@@ -78,7 +78,7 @@ Website-CSS kann Tailwind über semantische Layer verwenden. Dynamische Reglerwe
 
 ## Öffentliche Schnittstelle
 
-`DevtoolsConfig`, `Metadata`, `Target`, `Family`, `Variant`, `Range`, `Select`, `Toggle`, `DevtoolsState` sowie `defineDevtoolsConfig`, `validateConfig`, `initialState`, `validateState`, `encodeState`, `decodeState`, `stateUrl`, `applyEffects`, `changes`, `changesJson`, `agentBrief`, `resetBaseline`, `recipe` und `typescriptRecipe` sind serialisierbar bzw. strict typisiert. Nicht-kanonische Alias-Exporte werden nicht angeboten. Ungültige URL-Werte werden verworfen (fail-closed).
+`DevtoolsConfig`, `Metadata`, `Target`, `Family`, `Variant`, `Range`, `Select`, `SelectOption`, `Toggle`, `DevtoolsState` sowie `defineDevtoolsConfig`, `validateConfig`, `initialState`, `validateState`, `encodeState`, `decodeState`, `stateUrl`, `applyEffects`, `changes`, `changesJson`, `agentBrief`, `resetBaseline`, `recipe` und `typescriptRecipe` sind serialisierbar bzw. strict typisiert. Nicht-kanonische Alias-Exporte werden nicht angeboten. Ungültige URL-Werte werden verworfen (fail-closed).
 
 Das Panel startet platzsparend eingeklappt. Es bietet Reset, Permalink-, JSON- und TypeScript-Copy sowie JSON-Download. Es ist vollständig ausblendbar und per Cmd/Ctrl+Shift+D wiederherstellbar beziehungsweise umschaltbar. Tastaturfokus und Reduced Motion werden berücksichtigt. URL-State verwendet nur den Parameter `fd` und erhält vorhandene Parameter.
 
diff --git a/fixture/smoke.html b/fixture/smoke.html
index 847c356..5050a17 100644
--- a/fixture/smoke.html
+++ b/fixture/smoke.html
@@ -6,23 +6,26 @@
   [data-fd-scope="card"] { color: rebeccapurple; }
 </style>
 <main class="grid" data-fd-target="hero" data-fd-scope="grid"><article data-fd-scope="card">Card</article><article data-fd-scope="card">Card</article></main>
+<aside data-fd-target="hero" data-fd-scope="grid">Second registered hero target</aside>
+<section data-fd-target="notes">Notes</section>
 <script type="module">
   window.addEventListener('error', (event) => { document.title = `FD error ${event.message}`; });
   import { defineDevtoolsElement } from '../dist/element.js';
+  import { applyEffects, initialState } from '../dist/core.js';
 
   localStorage.clear();
   const config = {
     project: 'fixture',
-    targets: [{ key: 'hero', label: 'Hero', kind: 'section' }],
+    targets: [{ key: 'global', label: 'Global', kind: 'global' }, { key: 'hero', label: 'Hero', kind: 'section' }, { key: 'notes', label: 'Notes', kind: 'section' }],
     families: [{ key: 'card', label: 'Card', target: 'hero', effect: { scope: 'card', attribute: 'card-variant' }, variants: [
       { name: 'one' }, { name: 'two', defaults: { gap: 3 } },
     ] }],
     controls: [
       { type: 'range', key: 'gap', label: 'Gap', min: 1, max: 4, default: 2, target: 'hero',
         unit: 'rem', effect: { scope: 'grid', variable: '--fd-gap' } },
-      { type: 'select', key: 'density', label: 'Density', options: ['compact', 'roomy'], default: 'compact',
+      { type: 'select', key: 'density', label: 'Density', options: ['compact', 'roomy'], default: 'compact', target: 'global',
         effect: { scope: 'card', attribute: 'card-density' } },
-      { type: 'toggle', key: 'featured', label: 'Featured', default: false,
+      { type: 'toggle', key: 'featured', label: 'Featured', default: false, target: 'global',
         effect: { scope: 'card', attribute: 'featured' } },
     ],
   };
@@ -47,10 +50,16 @@
   const card = document.querySelector('[data-fd-scope="card"]');
   const grid = document.querySelector('[data-fd-scope="grid"]');
   const map = root.querySelector('.map');
-  const mapCounts = map && /All \(4\/2\)/.test(map.textContent) && map.textContent.includes('Global') && map.textContent.includes('Section');
+  const mapCounts = map && map.textContent.includes('All 4 · Δ4') && map.textContent.includes('Global 2 · Δ2') && map.textContent.includes('Hero 2 · Δ2') && map.textContent.includes('Notes 0 · Δ0');
+  const isolatedRoot = document.querySelectorAll('[data-fd-target="hero"]')[1];
+  isolatedRoot.style.removeProperty('--fd-gap');
+  const isolatedState = initialState(config); isolatedState.values.gap = 3;
+  applyEffects(config, isolatedState, isolatedRoot);
+  const rootScopedEffect = isolatedRoot.style.getPropertyValue('--fd-gap') === '3rem';
+  applyEffects(config, { families: { card: 'two' }, values: { gap: 4, density: 'roomy', featured: true } });
   const passed = root && card.getAttribute('data-card-variant') === 'two' &&
     card.getAttribute('data-card-density') === 'roomy' && card.getAttribute('data-featured') === 'true' &&
-    grid.style.getPropertyValue('--fd-gap') === '4rem' && mapCounts &&
+    grid.style.getPropertyValue('--fd-gap') === '4rem' && rootScopedEffect && Array.from(document.querySelectorAll('[data-fd-target="hero"]')).every((element) => element.style.getPropertyValue('--fd-gap') === '4rem') && mapCounts &&
     new URL(location.href).searchParams.has('fd');
   root.querySelector('[data-action="hide"]').click();
   const hidden = root.querySelector('.panel').classList.contains('hidden');
@@ -62,20 +71,40 @@
   root.querySelector('[data-action="changes"]').click();
   await new Promise((resolve) => setTimeout(resolve, 50));
   const copiedChanges = ['Copied', 'Copy unavailable'].includes(root.querySelector('.status').textContent);
+  root.querySelector('[data-action="brief"]').click();
+  await new Promise((resolve) => setTimeout(resolve, 50));
+  const copiedBrief = ['Copied', 'Copy unavailable'].includes(root.querySelector('.status').textContent);
   root.querySelector('[data-action="compare-original"]').click();
-  const originalApplied = grid.style.getPropertyValue('--fd-gap') === '2rem';
+  const originalApplied = grid.style.getPropertyValue('--fd-gap') === '2rem' && root.querySelector('[data-action="compare-original"]').getAttribute('aria-pressed') === 'true';
   root.querySelector('[data-action="compare-modified"]').click();
-  const modifiedRestored = grid.style.getPropertyValue('--fd-gap') === '4rem';
+  const modifiedRestored = grid.style.getPropertyValue('--fd-gap') === '4rem' && root.querySelector('[data-action="compare-modified"]').getAttribute('aria-pressed') === 'true';
+
+  const notesButton = root.querySelector('[data-map-target="notes"]');
+  notesButton.click();
+  const emptyTarget = root.querySelector('.body').textContent.includes('Keine Controls für dieses Target.');
+  root.querySelector('[data-map-target="all"]').click();
+  root.querySelector('[data-action="reset-control"][data-control="gap"]').click();
+  const controlReset = grid.style.getPropertyValue('--fd-gap') === '2rem';
+  range.value = '4'; range.dispatchEvent(new Event('input', { bubbles: true }));
+
   root.querySelector('[data-action="pick"]').click();
   const hero = document.querySelector('[data-fd-target="hero"]');
   hero.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
   const marked = hero.style.outline !== '';
   document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-  const cleaned = hero.style.outline === '';
+  const cleaned = hero.style.outline === '' && !hero.hasAttribute('tabindex');
+  root.querySelector('[data-action="pick"]').click();
+  hero.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+  const picked = root.querySelector('[data-map-target="hero"]').getAttribute('aria-pressed') === 'true' && hero.style.outline === '' && !hero.hasAttribute('tabindex');
+  root.querySelector('[data-action="reset-target"]').click();
+  const targetReset = grid.style.getPropertyValue('--fd-gap') === '2rem' && card.getAttribute('data-card-variant') === 'one';
+  root.querySelector('[data-action="reset"]').click();
+  const fullReset = card.getAttribute('data-card-density') === 'compact' && card.getAttribute('data-featured') === 'false' && root.querySelector('[data-map-target="all"] .count').textContent.endsWith('Δ0');
+
   root.querySelector('[data-action="json"]').click();
   range.focus();
   await new Promise((resolve) => setTimeout(resolve, 50));
   const feedback = ['Copied', 'Copy unavailable'].includes(root.querySelector('.status').textContent);
-  document.title = passed && initiallyCollapsed && opened && hidden && restoredCollapsed && shortcutOpened && feedback && copiedChanges && originalApplied && modifiedRestored && marked && cleaned
+  document.title = passed && initiallyCollapsed && opened && hidden && restoredCollapsed && shortcutOpened && feedback && copiedChanges && copiedBrief && originalApplied && modifiedRestored && emptyTarget && controlReset && marked && cleaned && picked && targetReset && fullReset
     ? 'FD browser PASS' : 'FD browser FAIL';
 </script>
diff --git a/package-lock.json b/package-lock.json
index 01d589b..bb06d82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@cray-com/foundation-devtools",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cray-com/foundation-devtools",
-      "version": "0.1.1",
+      "version": "0.2.0",
       "license": "MIT",
       "devDependencies": {
         "@playwright/test": "^1.61.1",
diff --git a/package.json b/package.json
index 4e91a2c..ac3300f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cray-com/foundation-devtools",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Dense, design-neutral development tooling for website variants",
   "type": "module",
   "sideEffects": false,
diff --git a/src/core.ts b/src/core.ts
index 982d3de..6fd9811 100644
--- a/src/core.ts
+++ b/src/core.ts
@@ -98,7 +98,7 @@ function fail(message: string): never {
 }
 
 function validateEffect(effect: unknown): asserts effect is Effect {
-  if (!isRecord(effect) || !scopePattern.test(String(effect.scope))) {
+  if (!isRecord(effect) || typeof effect.scope !== 'string' || !scopePattern.test(effect.scope)) {
     fail('effect scope');
   }
   const hasVariable = typeof effect.variable === 'string';
@@ -187,6 +187,7 @@ export function validateConfig(input: unknown): DevtoolsConfig {
           !Number.isFinite(min) || !Number.isFinite(max) || !Number.isFinite(step) ||
           min >= max || step <= 0 || typeof controlValue.default !== 'number' ||
           !Number.isFinite(controlValue.default) || controlValue.default < min || controlValue.default > max ||
+          !isOnStep(controlValue.default, min, step) ||
           typeof unit !== 'string' || !unitPattern.test(unit)) {
         fail('range');
       }
@@ -225,8 +226,13 @@ function isValidOption(option: unknown): option is SelectOption {
 
 function optionValue(option: SelectOption): string { return typeof option === 'string' ? option : option.value; }
 
+function isOnStep(value: number, min: number, step: number): boolean {
+  const steps = (value - min) / step;
+  return Math.abs(steps - Math.round(steps)) < 1e-9;
+}
+
 function isValidValue(control: Control, value: unknown): value is ControlValue {
-  if (control.type === 'range') return typeof value === 'number' && Number.isFinite(value) && value >= control.min && value <= control.max;
+  if (control.type === 'range') return typeof value === 'number' && Number.isFinite(value) && value >= control.min && value <= control.max && isOnStep(value, control.min, control.step ?? 1);
   if (control.type === 'select') return typeof value === 'string' && control.options.some((option) => optionValue(option) === value);
   return typeof value === 'boolean';
 }
@@ -298,11 +304,20 @@ export function formatCssValue(control: Range, value: number): string {
 
 function scopedElements(root: ParentNode, scope: string, target?: string, targets?: readonly Target[]): HTMLElement[] {
   const targetDefinition = target ? targets?.find((item) => item.key === target) : undefined;
-  const base = target && targetDefinition?.kind === 'section' ? root.querySelector<HTMLElement>(`[data-fd-target="${CSS.escape(target)}"]`) : root;
-  if (!base) return [];
+  const targetSelector = target ? `[data-fd-target="${CSS.escape(target)}"]` : '';
+  const bases: ParentNode[] = target && targetDefinition?.kind === 'section'
+    ? [
+        ...(root instanceof HTMLElement && root.matches(targetSelector) ? [root] : []),
+        ...Array.from(root.querySelectorAll<HTMLElement>(targetSelector)),
+      ]
+    : [root];
   const selector = `[data-fd-scope="${CSS.escape(scope)}"]`;
-  const descendants = Array.from(base.querySelectorAll<HTMLElement>(selector));
-  return base instanceof HTMLElement && base.matches(selector) ? [base, ...descendants] : descendants;
+  const elements = new Set<HTMLElement>();
+  for (const base of bases) {
+    if (base instanceof HTMLElement && base.matches(selector)) elements.add(base);
+    for (const descendant of base.querySelectorAll<HTMLElement>(selector)) elements.add(descendant);
+  }
+  return Array.from(elements);
 }
 
 export function applyEffects(config: DevtoolsConfig, state: DevtoolsState, root: ParentNode = document): void {
diff --git a/src/element.ts b/src/element.ts
index 2d16c1c..f843eaa 100644
--- a/src/element.ts
+++ b/src/element.ts
@@ -23,7 +23,8 @@ const styles = `
 .bar { display: flex; align-items: center; gap: 6px; padding: 5px 7px; background: #22262a; position: sticky; top: 0; }
 .title { flex: 1; font-weight: 700; } button { border: 0; border-radius: 3px; padding: 4px 6px; color: inherit; background: #292e34; cursor: pointer; } .icon { background: transparent; font-size: 15px; }
 button:focus, select:focus, input:focus { outline: 2px solid #74b9ff; outline-offset: 1px; } button[aria-pressed="true"] { background: #4a5868; color: #fff; }
-.body { display: grid; gap: 8px; padding: 9px; } .control { display: grid; gap: 3px; } label { display: flex; justify-content: space-between; gap: 8px; color: #c8cdd3; } output { color: #fff; }
+.body { display: grid; gap: 8px; padding: 9px; } .compare { display: flex; gap: 3px; } .map { display: grid; gap: 2px; padding: 5px; border: 1px solid #353a40; border-radius: 4px; } .map::before { content: 'Page'; padding: 1px 3px 3px; color: #9ba3ad; text-transform: uppercase; letter-spacing: .08em; } .map button { display: flex; justify-content: space-between; gap: 8px; text-align: left; } .count { color: #9ba3ad; font-variant-numeric: tabular-nums; }
+.control { display: grid; gap: 3px; } .control.changed label::after { content: 'modified'; color: #9dbde0; font-size: 10px; } label { display: flex; justify-content: space-between; gap: 8px; color: #c8cdd3; } output { margin-left: auto; color: #fff; }
 input, select { width: 100%; min-width: 0; color: #fff; background: #292e34; border: 1px solid #555b64; border-radius: 3px; padding: 3px; } input[type=checkbox] { width: auto; justify-self: start; }
 .meta, .status { padding: 7px 9px; color: #9ba3ad; border-top: 1px solid #353a40; } .status:empty { display: none; } footer { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border-top: 1px solid #353a40; } .collapsed .body, .collapsed footer, .collapsed .meta, .collapsed .status { display: none; } .hidden { display: none; }
 @media (max-width: 420px) { :host { inset: auto 6px 6px auto; } .panel { width: min(320px, calc(100vw - 12px)); max-height: calc(100vh - 12px); } }
@@ -39,8 +40,6 @@ export class FoundationDevtoolsElement extends HTMLElement {
   private ready = false;
   private selectedTarget: string | undefined;
   private compareMode: 'modified' | 'original' = 'modified';
-  private targetFilter = '';
-  private targetKind: 'all' | 'global' | 'section' = 'all';
   private pickerCleanup?: () => void;
 
   connectedCallback(): void {
@@ -98,36 +97,26 @@ export class FoundationDevtoolsElement extends HTMLElement {
     compare.querySelector<HTMLButtonElement>('[data-action="compare-original"]')!.setAttribute('aria-pressed', String(this.compareMode === 'original'));
     compare.querySelector<HTMLButtonElement>('[data-action="compare-modified"]')!.setAttribute('aria-pressed', String(this.compareMode === 'modified'));
     body.append(compare);
+    const changedKeys = new Set(changes(this.config, this.state).changes.map((entry) => entry.key));
     if (this.config.targets?.length) {
-      const map = document.createElement('nav'); map.className = 'map'; map.setAttribute('aria-label', 'Targets');
-      const search = document.createElement('input'); search.type = 'search'; search.placeholder = 'Filter targets'; search.value = this.targetFilter; search.setAttribute('aria-label', 'Filter targets');
-      search.addEventListener('input', () => { this.targetFilter = search.value; this.render(); }); map.append(search);
-      for (const kind of ['all', 'global', 'section'] as const) { const tab = document.createElement('button'); tab.textContent = kind[0].toUpperCase() + kind.slice(1); tab.dataset.mapKind = kind; tab.setAttribute('aria-pressed', String(this.targetKind === kind)); tab.addEventListener('click', () => { this.targetKind = kind; this.render(); }); map.append(tab); }
-      const diff = changes(this.config, this.state).changes;
-      const matches = (key: string) => { const target = this.config!.targets!.find((item) => item.key === key); return key === 'all' ? !this.targetFilter : (this.targetKind === 'all' || target?.kind === this.targetKind) && (!this.targetFilter || (target?.label ?? key).toLowerCase().includes(this.targetFilter.toLowerCase())); };
-      const all = ['all', ...this.config.targets.map((target) => target.key)].filter(matches);
-      for (const key of all) {
+      const map = document.createElement('nav'); map.className = 'map'; map.setAttribute('aria-label', 'Page targets');
+      for (const key of ['all', ...this.config.targets.map((target) => target.key)]) {
         const target = key === 'all' ? undefined : this.config.targets.find((item) => item.key === key);
-        const available = key === 'all' ? this.config.families.length + (this.config.controls ?? []).length : this.config.families.filter((item) => item.target === key).length + (this.config.controls ?? []).filter((item) => item.target === key).length;
-        const changed = key === 'all' ? diff.length : diff.filter((item) => item.target === key).length;
         const button = document.createElement('button');
-        button.textContent = `${key === 'all' ? 'All' : target!.label} (${available}/${changed})`;
-        button.dataset.target = key;
+        button.dataset.mapTarget = key;
         button.setAttribute('aria-pressed', String((this.selectedTarget ?? 'all') === key));
+        button.append(document.createTextNode(`${key === 'all' ? 'All' : target!.label} `), this.targetCount(key));
         button.addEventListener('click', () => {
           this.selectedTarget = key === 'all' ? undefined : key;
-          if (target?.kind === 'section') {
-            const section = document.querySelector<HTMLElement>(`[data-fd-target="${CSS.escape(key)}"]`);
-            section?.scrollIntoView({ block: 'nearest', behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
-            if (section) { const previous = section.style.outline; section.style.outline = '2px solid #8f98a3'; window.setTimeout(() => { section.style.outline = previous; }, 500); }
-          }
+          if (target?.kind === 'section') this.revealTarget(key);
           this.render();
         });
         map.append(button);
       }
       body.append(map);
-      if (this.selectedTarget) { const resetTarget = document.createElement('button'); resetTarget.textContent = 'Reset target'; resetTarget.dataset.action = 'reset-target'; resetTarget.dataset.control = this.selectedTarget; body.append(resetTarget); }
-      if (all.length === 0) { const empty = document.createElement('p'); empty.textContent = 'Keine Targets gefunden.'; map.append(empty); }
+      if (this.selectedTarget && this.availableForTarget(this.selectedTarget) > 0) {
+        const resetTarget = document.createElement('button'); resetTarget.textContent = 'Reset target'; resetTarget.dataset.action = 'reset-target'; resetTarget.dataset.control = this.selectedTarget; body.append(resetTarget);
+      }
     }
     let rendered = 0;
     for (const family of this.config.families) {
@@ -144,7 +133,9 @@ export class FoundationDevtoolsElement extends HTMLElement {
         this.render();
         this.update();
       });
-      body.append(this.row(family.label, select, `fd-family-label-${family.key}`));
+      const row = this.row(family.label, select, `fd-family-label-${family.key}`);
+      row.dataset.changeKey = family.key; row.classList.toggle('changed', changedKeys.has(family.key));
+      body.append(row);
     }
     for (const control of this.config.controls ?? []) { if (!this.selectedTarget || control.target === this.selectedTarget) { rendered++; body.append(this.control(control)); } }
     if (this.selectedTarget && rendered === 0) { const empty = document.createElement('p'); empty.textContent = 'Keine Controls für dieses Target.'; body.append(empty); }
@@ -200,6 +191,8 @@ export class FoundationDevtoolsElement extends HTMLElement {
       });
     }
     const row = this.row(control.label, input, `fd-label-${control.key}`, control.type === 'range' ? output : undefined);
+    row.dataset.changeKey = control.key;
+    row.classList.toggle('changed', Boolean(this.config && this.state && changes(this.config, this.state).changes.some((entry) => entry.key === control.key)));
     const reset = document.createElement('button'); reset.textContent = 'Reset'; reset.dataset.action = 'reset-control'; reset.dataset.control = control.key; row.append(reset);
     return row;
   }
@@ -208,6 +201,48 @@ export class FoundationDevtoolsElement extends HTMLElement {
     return `${value}${control.unit ?? ''}`;
   }
 
+  private availableForTarget(target: string): number {
+    if (!this.config) return 0;
+    if (target === 'all') return this.config.families.length + (this.config.controls ?? []).length;
+    return this.config.families.filter((item) => item.target === target).length
+      + (this.config.controls ?? []).filter((item) => item.target === target).length;
+  }
+
+  private changedForTarget(target: string): number {
+    if (!this.config || !this.state) return 0;
+    const entries = changes(this.config, this.state).changes;
+    return target === 'all' ? entries.length : entries.filter((entry) => entry.target === target).length;
+  }
+
+  private targetCount(target: string): HTMLElement {
+    const count = document.createElement('span');
+    count.className = 'count';
+    count.textContent = `${this.availableForTarget(target)} · Δ${this.changedForTarget(target)}`;
+    count.title = 'Available · modified';
+    return count;
+  }
+
+  private revealTarget(key: string): void {
+    const section = document.querySelector<HTMLElement>(`[data-fd-target="${CSS.escape(key)}"]`);
+    if (!section) return;
+    section.scrollIntoView({ block: 'nearest', behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+    const previous = section.style.outline;
+    section.style.outline = '2px solid #8f98a3';
+    window.setTimeout(() => { if (section.style.outline === '2px solid rgb(143, 152, 163)' || section.style.outline === '2px solid #8f98a3') section.style.outline = previous; }, 500);
+  }
+
+  private refreshIndicators(): void {
+    if (!this.config || !this.state || !this.shadowRoot) return;
+    const changedKeys = new Set(changes(this.config, this.state).changes.map((entry) => entry.key));
+    for (const row of this.shadowRoot.querySelectorAll<HTMLElement>('[data-change-key]')) row.classList.toggle('changed', changedKeys.has(row.dataset.changeKey ?? ''));
+    for (const button of this.shadowRoot.querySelectorAll<HTMLButtonElement>('[data-map-target]')) {
+      const count = button.querySelector<HTMLElement>('.count');
+      if (count) count.replaceWith(this.targetCount(button.dataset.mapTarget ?? 'all'));
+    }
+    this.shadowRoot.querySelector<HTMLButtonElement>('[data-action="compare-original"]')?.setAttribute('aria-pressed', String(this.compareMode === 'original'));
+    this.shadowRoot.querySelector<HTMLButtonElement>('[data-action="compare-modified"]')?.setAttribute('aria-pressed', String(this.compareMode === 'modified'));
+  }
+
   private restorePanelMode(): void {
     let mode: 'open' | 'collapsed' | 'hidden' = 'collapsed';
     try {
@@ -239,7 +274,9 @@ export class FoundationDevtoolsElement extends HTMLElement {
 
   private update(): void {
     if (!this.config || !this.state) return;
+    this.compareMode = 'modified';
     this.apply();
+    this.refreshIndicators();
     try {
       history.replaceState(null, '', stateUrl(this.config, this.state));
     } catch {
@@ -273,15 +310,40 @@ export class FoundationDevtoolsElement extends HTMLElement {
     if (!this.config?.targets) return;
     const keys = this.config.targets.filter((target) => target.kind === 'section').map((target) => target.key);
     const elements = keys.flatMap((key) => Array.from(document.querySelectorAll<HTMLElement>(`[data-fd-target="${CSS.escape(key)}"]`)));
-    const old = new Map<HTMLElement, string>(); let hovered: HTMLElement | undefined;
-    const listeners = new Map<HTMLElement, { enter: () => void; leave: () => void; focus: () => void }>();
-    const clearMark = () => { if (hovered) { hovered.style.outline = old.get(hovered) ?? ''; hovered = undefined; } };
-    const mark = (element: HTMLElement) => { clearMark(); old.set(element, element.style.outline); hovered = element; element.style.outline = '2px solid #8f98a3'; };
-    const cleanup = () => { clearMark(); elements.forEach((element) => { element.removeEventListener('click', onClick); const listener = listeners.get(element); if (listener) { element.removeEventListener('pointerenter', listener.enter); element.removeEventListener('pointerleave', listener.leave); element.removeEventListener('focus', listener.focus); } }); document.removeEventListener('keydown', onKey); this.pickerCleanup = undefined; };
-    const onClick = (event: Event) => { const element = event.currentTarget as HTMLElement; event.preventDefault(); event.stopPropagation(); this.selectedTarget = element.dataset.fdTarget; cleanup(); this.render(); };
-    const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') cleanup(); };
-    elements.forEach((element) => { const enter = () => mark(element); const leave = () => { if (hovered === element) clearMark(); }; const focus = () => mark(element); listeners.set(element, { enter, leave, focus }); element.addEventListener('pointerenter', enter); element.addEventListener('pointerleave', leave); element.addEventListener('focus', focus); element.addEventListener('click', onClick); });
-    document.addEventListener('keydown', onKey); this.pickerCleanup = cleanup;
+    const oldOutline = new Map<HTMLElement, string>();
+    const oldTabIndex = new Map<HTMLElement, string | null>();
+    let hovered: HTMLElement | undefined;
+    const listeners = new Map<HTMLElement, { enter: () => void; leave: () => void; focus: () => void; key: (event: KeyboardEvent) => void }>();
+    const clearMark = () => { if (hovered) { hovered.style.outline = oldOutline.get(hovered) ?? ''; hovered = undefined; } };
+    const mark = (element: HTMLElement) => { clearMark(); oldOutline.set(element, element.style.outline); hovered = element; element.style.outline = '2px solid #8f98a3'; };
+    const select = (element: HTMLElement, event: Event) => { event.preventDefault(); event.stopPropagation(); this.selectedTarget = element.dataset.fdTarget; cleanup(); this.render(); };
+    const cleanup = () => {
+      clearMark();
+      elements.forEach((element) => {
+        element.removeEventListener('click', onClick);
+        const listener = listeners.get(element);
+        if (listener) { element.removeEventListener('pointerenter', listener.enter); element.removeEventListener('pointerleave', listener.leave); element.removeEventListener('focus', listener.focus); element.removeEventListener('keydown', listener.key); }
+        const tabIndex = oldTabIndex.get(element);
+        if (tabIndex === null) element.removeAttribute('tabindex'); else if (tabIndex !== undefined) element.setAttribute('tabindex', tabIndex);
+      });
+      document.removeEventListener('keydown', onDocumentKey);
+      this.pickerCleanup = undefined;
+    };
+    const onClick = (event: Event) => select(event.currentTarget as HTMLElement, event);
+    const onDocumentKey = (event: KeyboardEvent) => { if (event.key === 'Escape') cleanup(); };
+    elements.forEach((element) => {
+      const enter = () => mark(element);
+      const leave = () => { if (hovered === element) clearMark(); };
+      const focus = () => mark(element);
+      const key = (event: KeyboardEvent) => { if (event.key === 'Enter' || event.key === ' ') select(element, event); };
+      listeners.set(element, { enter, leave, focus, key });
+      oldTabIndex.set(element, element.getAttribute('tabindex'));
+      element.tabIndex = 0;
+      element.addEventListener('pointerenter', enter); element.addEventListener('pointerleave', leave); element.addEventListener('focus', focus); element.addEventListener('keydown', key); element.addEventListener('click', onClick);
+    });
+    document.addEventListener('keydown', onDocumentKey);
+    this.pickerCleanup = cleanup;
+    elements[0]?.focus({ preventScroll: true });
   }
 
   private async copy(value: string): Promise<void> {
diff --git a/test/core.test.mjs b/test/core.test.mjs
index b3746dc..f8175ee 100644
--- a/test/core.test.mjs
+++ b/test/core.test.mjs
@@ -1,6 +1,6 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { defineDevtoolsConfig, initialState, validateState, encodeState, decodeState, stateUrl, recipe, changes, resetBaseline } from '../dist/core.js';
+import { defineDevtoolsConfig, initialState, validateState, encodeState, decodeState, stateUrl, recipe, changes, changesJson, agentBrief, resetBaseline } from '../dist/core.js';
 const config=defineDevtoolsConfig({project:'fixture',metadata:{route:'/x'},families:[{key:'card',label:'Card',variants:[{name:'a'},{name:'b'}]}],controls:[{type:'range',key:'gap',label:'Gap',min:0,max:20,default:4,effect:{scope:'grid',variable:'--fd-gap'}},{type:'toggle',key:'featured',label:'Featured',default:false,effect:{scope:'card',attribute:'featured'}}]});
 test('defaults and fail-closed state',()=>{const s=initialState(config);assert.equal(s.values.gap,4);assert.equal(validateState(config,{values:{gap:999,featured:'yes'},families:{card:'unknown'}}).values.gap,4);});
 test('URL codec is reproducible and preserves params',()=>{const s={families:{card:'b'},values:{gap:8,featured:true}};const encoded=encodeState(config,s);assert.deepEqual(decodeState(config,encoded),s);const u=stateUrl(config,s,'https://example.test/?utm=x');assert.equal(new URL(u).searchParams.get('utm'),'x');assert.ok(u.includes('fd='));});
@@ -10,16 +10,29 @@ test('targets, labeled options and fail-closed object validation', () => {
   assert.equal(initialState(targetConfig).values.density, 'compact');
   assert.equal(changes(targetConfig, initialState(targetConfig)).count, 0);
   const modified = validateState(targetConfig, { families: { layout: 'wide' }, values: { density: 'compact' } });
-  assert.equal(changes(targetConfig, modified).count, 1);
+  const targetChanges = changes(targetConfig, modified);
+  assert.equal(targetChanges.count, 1);
+  assert.deepEqual(targetChanges.changes[0], { key: 'layout', label: 'Layout', kind: 'family', from: 'base', to: 'wide', target: 'hero', targetKind: 'section' });
+  assert.equal(JSON.parse(changesJson(targetConfig, modified)).count, 1);
+  assert.match(agentBrief(targetConfig, modified), /Layout.*`base` → `wide`/);
+  const tokenModified = validateState(targetConfig, { families: { layout: 'base' }, values: { density: 'roomy' } });
+  assert.deepEqual(changes(targetConfig, tokenModified).changes[0], { key: 'density', label: 'Density', kind: 'control', from: 'compact', to: 'roomy', target: 'hero', targetKind: 'section', classification: 'token' });
   assert.equal(changes(targetConfig, resetBaseline(targetConfig, modified, 'hero')).count, 0);
   const variantConfig = defineDevtoolsConfig({ project: 'variants', targets: [{ key: 'hero', label: 'Hero', kind: 'section' }], families: [{ key: 'family', label: 'Family', target: 'hero', variants: [{ name: 'base' }, { name: 'custom', defaults: { density: 'compact' } }] }], controls: [{ type: 'select', key: 'density', label: 'Density', options: ['roomy', 'compact'], default: 'roomy', effect: { scope: 'hero', attribute: 'density' } }] });
   const stale = validateState(variantConfig, { families: { family: 'custom' }, values: { density: 'compact' } });
   assert.equal(changes(variantConfig, resetBaseline(variantConfig, stale, 'hero')).count, 0);
-  for (const options of [[{ label: 'Missing value' }], [{ value: '', label: 'Empty' }], [{ value: 'x' }]]) assert.throws(() => defineDevtoolsConfig({ project: 'x', families: [{ key: 'f', label: 'F', variants: [{ name: 'a' }] }], controls: [{ type: 'select', key: 's', label: 'S', options, default: 'x', effect: { scope: 'f', attribute: 'x' } }] }));
+  for (const options of [[{ label: 'Missing value' }], [{ value: '', label: 'Empty' }], [{ value: 'x' }]]) assert.throws(() => defineDevtoolsConfig({ project: 'x', families: [{ key: 'f', label: 'F', variants: [{ name: 'a' }] }], controls: [{ type: 'select', key: 's', label: 'S', options, default: 'x', effect: { scope: 'f', attribute: 'x' } }] }), /Invalid devtools config/);
+  assert.throws(() => defineDevtoolsConfig({ project: 'x', targets: [{ key: 'hero', label: 'Hero', kind: 'section' }], families: [{ key: 'f', label: 'F', target: 'missing', variants: [{ name: 'a' }] }] }), /family target/);
+  assert.throws(() => defineDevtoolsConfig({ project: 'x', families: [{ key: 'f', label: 'F', variants: [{ name: 'a' }] }], controls: [{ type: 'toggle', key: 't', label: 'T', target: 'missing', default: false, effect: { scope: 'f', attribute: 't' } }] }), /control target/);
+  assert.equal(defineDevtoolsConfig({ project: 'legacy', families: [{ key: 'f', label: 'F', variants: [{ name: 'a' }] }] }).targets, undefined);
 });
 
 test('invalid config rejects', () => {
   assert.throws(() => defineDevtoolsConfig({ project: 'x', families: [{ key: 'bad key', variants: [] }] }));
+  assert.throws(() => defineDevtoolsConfig({ project: 'x', families: [{ key: 'f', label: 'F', variants: [{ name: 'a' }] }], controls: [{ type: 'toggle', key: 't', label: 'T', default: false, effect: { scope: ['f'], attribute: 't' } }] }), /effect scope/);
+  assert.throws(() => defineDevtoolsConfig({ project: 'x', families: [{ key: 'f', label: 'F', variants: [{ name: 'a' }] }], controls: [{ type: 'range', key: 'r', label: 'R', min: 0, max: 10, step: 3, default: 2, effect: { scope: 'f', variable: '--r' } }] }), /range/);
+  const stepped = defineDevtoolsConfig({ project: 'x', families: [{ key: 'f', label: 'F', variants: [{ name: 'a' }] }], controls: [{ type: 'range', key: 'r', label: 'R', min: 0, max: 10, step: 3, default: 3, effect: { scope: 'f', variable: '--r' } }] });
+  assert.equal(validateState(stepped, { families: { f: 'a' }, values: { r: 2 } }).values.r, 3);
   assert.throws(() => defineDevtoolsConfig({
     project: 'x',
     families: [{ key: 'card', label: 'Card', variants: [{ name: 'default' }] }],