Theme: ← Übersicht Tokens

AI-Diff (Änderungs-Ansicht)

Zeilenweise Änderungs-Ansicht (hinzugefügt/entfernt/Kontext) mit Datei-Kopf und Zähler — der Konsument liefert annotierte Zeilen, das Framework rechnet keine Diffs

Im Builder nutzen
Components v1.0.0 AI WebsiteAppDesktop component.ai-diff

Beispiele

Vorgeschlagene Änderung
config/mail.php+2−1
return [
'driver' => 'smtp',
'port' => 25,
'port' => 587,
'encryption' => 'tls',
];
XSS in Zeile → escaped
test.html+1−0
<script>alert(1)</script>

Eigenschaften

PropTypDefaultBuilder-Label
filestring""Dateiname (Kopfzeile)
lines *array—Zeilen

* Pflicht-Prop

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

TokenDefault
--ai-diff-add-surfacevar(--color-status-success-surface)
--ai-diff-add-fgvar(--color-status-success)
--ai-diff-remove-surfacevar(--color-status-danger-surface)
--ai-diff-remove-fgvar(--color-status-danger)

Genutzte Design-Tokens

border.hairlinecolor.border.defaultcolor.border.subtlecolor.status.dangercolor.status.danger-surfacecolor.status.successcolor.status.success-surfacecolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedfont.family.defaultfont.family.monoradius.controlsize.1size.2size.3size.4text.xsweight.semibold

LLM-Notizen

component.ai-diff

Zeilenweise Änderungs-Ansicht (Coding-Agent schlägt eine Änderung vor): Datei-Kopf mit +n/−n-Zähler, Zeilen mit add/remove/context-Ton. Der Konsument liefert das fertige, annotierte Diff — das Framework rechnet keine Diffs. Für die Freigabe-Frage dazu component.confirmation.

Beispiel-Node


{
  "definition": "component.ai-diff",
  "props": {
    "file": "config/mail.php",
    "lines": [
      {"type": "remove", "text": "'port' => 25,"},
      {"type": "add", "text": "'port' => 587,"}
    ]
  }
}