AlbertZJ/dsh-genui-stateful

GenUI – Generative UI-Ausgabe-Spezifikation

Sprache: Stimme mit der vom Benutzer angeforderten Sprache überein (andernfalls mit der Sprache seiner Nachricht), und zwar sowohl im umgebenden Prosa als auch in allen sichtbaren UI-Texten: Titel, Beschriftungen, Inhalt, Optionen und Erklärungen. Die nachfolgenden chinesischen Beispiele veranschaulichen nur das Schema; wechsle die Konversation nach dem Laden dieses Skills nicht ins Chinesische. Behalte JSON-Schlüssel, Komponententypen, IDs und Aktionen bei. Eine englische Anfrage erhält englischen Prosa und UI-Text; eine chinesische Anfrage erhält chinesischen Prosa und UI-Text. <user-language ...>-Token sind reine Meta-Platzhalter. Ersetze jeden von ihnen durch tatsächlichen Inhalt in der Konversationssprache; gib diese Platzhalter niemals wörtlich aus.

Du kannst mitten im Antworttext interaktive UI-Komponenten ausgeben: Schreibe einen dsh-ui-Zaun (eingerückter Block mit Sprach-Tag dsh-ui), der eine JSON-Spezifikation enthält; der Renderer zeichnet diesen gesamten Block als echte Komponenten, während der Text normal davor und danach eingefügt wird. Die Komponente ist ein Teil der Antwort, kein Tool-Aufruf.

{"title":"<user-language text>","gap":14,"items":[...]}

Unveränderliche Regeln für den Zaun (lies diesen Abschnitt zuerst)

Das Sprach-Tag in der ersten Zeile des Zauns ist einheitlich dsh-ui; füge keine Satzzeichen, Anführungszeichen oder Kommentare hinzu. Der Renderer toleriert Groß-/Kleinschreibung, führende/nachfolgende Leerzeichen und einige nachgestellte Satzzeichen; andere Sprach-Tags werden nicht als GenUI übernommen, und der Benutzer sieht normale Codeblöcke.

Schreibweise	Ergebnis
```dsh-ui	✅ Gerendert
```dsh-ui>	✅ Fehlertolerantes Rendern; beim Erstellen sollte > dennoch entfernt werden
```dsh-ui mit nachgestellten Leerzeichen	✅ Gerendert (automatisch trimmed)
``` DSH-UI	✅ Gerendert (Groß-/Kleinschreibung ignorieren)
```dshui / ```ds-ui	❌ Kein gültiges Tag

Zuvor hat dasselbe Modell in derselben Sitzung 182 ```dsh-ui>-Zäune geschrieben, was zu einer stillen Fehlfunktion führte; jetzt wird für solche nachgestellten Satzzeichen eine einheitliche Fehlertoleranz angewendet. Schreibe beim Erstellen eines Zauns nur die sieben Zeichen dsh-ui, ohne Satzzeichen, Anführungszeichen oder Kommentare; der Abschluss muss ein einzelnes ``` in einer eigenen Zeile sein.

Position des Zauns: Nur im Antworttext. In reasoning- / Denkblöcken wird er nicht gerendert, der Benutzer sieht ihn nicht.

Formeln: $...$ / \(...\) für Inline-Formeln, $$...$$ / \[...\] für eigenständige Formeln; unterstützt werden Matrizen, abschnittsweise Funktionen, mehrzeilige Ausrichtungen, sowie Formeln in fettem / hervorgehobenem Text. Diese Funktion wird angewendet auf: Fließtext, Listen, Schlüssel-Wert-Paare, Tabellenüberschriften/-zellen, Karten-/Schritt-/Zeitachsen-/Registerkartentitel, Fragen und Anweisungen, Schaltflächen- und Formularbeschriftungen, Metriken, Medienbeschreibungen und äußere Diagrammtitel. Backslashes in JSON-Strings müssen verdoppelt werden, z.B. "content": "\(\\frac{a}{b}\)". Quellcode, Eingabewerte/Platzhalter, native Dropdown-Optionen und interner Diagramm-Engine-Text folgen weiterhin ihren eigenen nativen Formaten und werden nicht als Rich-Text geparst. Die mathematische Syntax folgt KaTeX; keine Ausführung von HTML, externen Ressourcen oder Skripten; kein LaTeX-Dokument-Kompilieren oder Laden beliebiger Makropakete.

Komponenten-Vokabular (nur diese Typen sind erlaubt)

Layout: text row col grid card carousel divider spacer arrow hero Anzeigen: stat badge progress list table keyvalue avatar image image-group audio video timeline file-tree breadcrumb diff json code callout steps icon blocks Diagramme: chart (Balken/Linie/Donut, mehrfache Serien möglich) plot (mathematische Funktionsgraphen) echart (ECharts Vollfunktions-Diagramme) Interaktion: button input select checkbox radio switch slider textarea tabs accordion copy link submit Erweitert: svg mermaid diagram scene3d quiz

Layout

• text: {"type":"text","size":"display|h1|h2|h3|body|muted|caption","content":"...","align":"left|center|right"?} (tone:"danger|success|warning|info|muted" färbt die gesamte Textzeile semantisch ein, ohne Badge; mono:true verwendet eine monospaced Schrift für Hexadezimal/Binär/Identifier, ohne inline-code-Hintergrund) (size:"display" ist eine Stufe größer als h1, für Einleitung/Eröffnungssätze, maximal 1 pro Antwort; center:true ist eine alte Schreibweise, äquivalent zu align:"center", verwende für neue Schreibweisen immer align)
• row / col: {"type":"row"|"col","items":[...],"wrap":true?,"spacer":true?,"gap":n?}; row.justify:"center" zentriert die Hauptachse (für Symbol+Text-Köpfe); col.width:n (1-100) gibt den prozentualen Anteil dieser Spalte an der Zeilenbreite an; wenn nicht gesetzt, wird inhaltsbreit verwendet
• grid: {"type":"grid","cols":n,"items":[...]}
• carousel: {"type":"carousel","title":"<user-language title>","items":[{"type":"card","title":"...","items":[...]}],"itemWidth":240?,"gap":3?} – natives horizontales Scrollen der Knoten; maximal 24 Elemente, Breite 80–640px und nicht mehr als 85% der Gleisbreite; Standardbreite 240px. gap-Wert multipliziert mit 4px, Standard 12px, negative Werte werden als 0 behandelt. Navigationsschaltflächen scrollen jeweils 85% der Gleisbreite, werden nur bei Überlauf angezeigt, auf Touch-Geräten wird das Gleis direkt gewischt. Keine automatische Wiedergabe. Bei Fokus auf das Gleis werden Links-/Rechts-Pfeile / Home / End unterstützt, Formulare in Karten funktionieren nach den üblichen Übermittlungsregeln. Durchsuchen und Scrollen lösen keine Aktionen aus; von untergeordneten Komponenten selbst deklarierte Aktionen werden gemäß den bestehenden Interaktionsregeln ausgelöst. Streaming-Ausgabe hängt Karten nur am Ende an, um bestehende Eingabepfade zu erhalten.
• hero: {"type":"hero","title":"<user-language title>","subtitle":"<user-language text>","value":"99.96%","label":"<user-language metric>","delta":"+0.02%","spark":[...],"tone":"accent|success|warning|danger"} – Cover-Block: Augenbraue + riesige Zahl (52px, mit Eintrittszähler) + Titel + Untertitel + tone-Verlaufshintergrund. Maximal eines pro Antwort, ganz vorne als visueller Anker
• span: Jeder Knoten kann "span":2 hinzugefügt werden (Anzahl der Spalten, die ein untergeordneter Knoten im Grid einnimmt) – das einzige Primitiv für Bento-Layouts: eine breite Karte mit span:2 kombiniert mit einer schmalen Karte, viel schöner als ein Stapel quadratischer Blöcke
• card: {"type":"card","title":"...","items":[...]}; "tone":"info|success|warning|danger" gibt der Karte einen semantischen Hintergrund (für Fazit-/Risiko-Karten); "accent":"#f59e0b" gibt eine spezifische Akzentfarbe an (Rahmen + Titel + sehr heller Hintergrund); "flat":true entfernt Schatten und verwendet einen sehr hellen neutralen Hintergrund – Panels in der Abbildung müssen flat sein, sonst sieht jede Schicht wie eine schwebende Karte aus, und nach zwei Schichten wird es unübersichtlich; "eyebrow":"<user-language kleiner Einleitungssatz>" fügt eine Meta-Zeile in kleiner Schrift über dem Titel hinzu (verwende dies, um mehrere Karten in Kapitel zu unterteilen – nicht für jede Karte in einer fortlaufenden Reihe desselben Kapitels verwenden, maximal 3 pro Antwort)
• palette: chart / echart unterstützen beide "palette":["#ff8800","#3ecf8e"], um die kategoriale Farbpalette zu überschreiben (standardmäßig folgt sie dem Host-Theme). Verwende dies nur, wenn aus semantischen Gründen eine Farbe angegeben werden muss (Kosten=rot, Gewinn=grün), sonst ist es sicherer, dem Theme zu folgen
• divider: {"type":"divider"}; mit Kapitelnamen {"type":"divider","label":"<user-language Kapitelname>"} (Linie + kleines Etikett zentriert, als Kapitelwechsler: verwende dies in Berichten, wenn du von der Zusammenfassung zu Daten übergehst, oder in Diagrammbüchern, wenn ein neues Kapitel beginnt; nicht innerhalb von Karten/Listen oder zwischen fortlaufenden Inhalten desselben Themas verwenden, max. 3 pro Antwort); spacer: {"type":"spacer"}

Anzeigen

• stat: {"type":"stat","label":"...","value":"...","delta":"+12.4%|-3%"} (automatisch rot bei -, grün bei +); optional "spark":[3,5,4,8,6] für eine Mikro-Trendlinie (2–60 endliche Werte); "size":"hero" rendert eine riesige Zahl (maximal einmal pro Antwort, als visueller Anker)
• badge: {"type":"badge","label":"...","tone":"success|warn|danger|accent","icon":"emoji?"}
• progress: {"type":"progress","label":"...","value":0-100,"valueLabel":"70%"}; "variant":"ring" zeichnet einen kreisförmigen Fortschritt, "target":70 markiert eine Zielmarke auf der Spur
• avatar: {"type":"avatar","name":"...","color":"#hex?"}
• image: {"type":"image","src":"/mmx-files/result.png","alt":"<user-language description>"} – Zeigt browserzugängliche http(s)- oder gleichnamige relative Bildadressen an; Lazy-Loading; Unterstützt keine file:/data:- oder andere lokale/aktive Protokolle; "caption":"<user-language Bildunterschrift>" fügt eine Erklärungszeile unter dem Bild hinzu (Quelle/Interpretation/Urheber; alt ist die obere Beschriftungszeile des Bildes, beide haben unterschiedliche Funktionen)
• image-group: {"type":"image-group","title":"<user-language title>","items":[{"src":"/mmx-files/a.png","alt":"<description>","caption":"<caption>"},{"src":"/mmx-files/b.png","alt":"<description>"}]} – Maximal 24 Bilder, die automatisch je nach Seitenverhältnis umbrechen; Klicken öffnet natives Lightbox mit Vergrößerung, Links-/Rechts-Pfeile / Home / End zum Blättern, Esc / Schließen-Schaltfläche kehrt zurück und stellt den Fokus wieder her. Es gelten die gleichen http(s) / relativen Adressbeschränkungen wie bei image; keine file/data/javascript. Nur lokales Durchsuchen, keine Aktionen senden; wenn eine Modellaktion erforderlich ist, platziere eine separate Schaltfläche daneben. Anhängen / Neuanordnen behält die aktuelle src; das Entfernen des aktuellen Bildes schließt den Viewer; doppelte src werden nach dem Erscheinungsdatum unterschieden. Leere Listen und fehlgeschlagene Bildladungen haben klare Status. Exportiertes HTML bettet keine Bildbytes ein, Bilder bleiben von der Originaladresse abhängig. Vollständige Verwendung und Akzeptanz.
• audio: {"type":"audio","src":"/mmx-files/result.mp3","alt":"<user-language description>","loop":true?} – Native Steuerleiste; Benutzer spielt aktiv ab, keine automatische Wiedergabe; nur http(s) oder gleichnamige relative Adressen
• video: {"type":"video","src":"/mmx-files/result.mp4","alt":"<user-language description>","poster":"/mmx-files/poster.jpg"?,"loop":true?,"muted":true?,"aspectRatio":"16:9|4:3|1:1|9:16"?} – Native Wiedergabe-/Lautstärke-/Vollbild-Steuerung; keine automatische Wiedergabe
• list: {"type":"list","items":["..."] oder [{"title":"...","desc":"..."}] oder verschachtelte Knoten (z.B. {"type":"badge","label":"TS"})} – Kann Inline-Knoten enthalten (werden im Knotenbudget gezählt); label/name in Datensätzen wird zu title normalisiert, description/content/text/body/detail wird zu desc normalisiert; wenn nur Text vorhanden ist, wird dieser als Titel verwendet; unbekannte Felder geben eine Warnung aus
• table: {"type":"table","columns":["..."],"rows":[["...","..."]],"types":["text|num|delta|bar|badge"]?,"details":[[...]]?,"total":true?} – Tabellenkopf-Klicken sortiert lokal (auf/ab/zurücksetzen, kein Roundtrip); zahlenbewusst: Tausendertrennzeichen (1.234), k/m/b-Notation, Prozentzeichen, Währungssymbole werden numerisch verglichen, reine Zahlenspalten automatisch rechtsbündig; Zellen mit Vorzeichen werden automatisch eingefärbt (+12,4% grün, -3 rot, keine zusätzlichen Felder erforderlich); types kann spaltenweise spezifizieren: bar (0-100 Inline-Fortschrittsbalken), ring (0-100 kleiner Ring), spark (Zelle schreibt "3,5,4,8" für Mikro-Trendlinie), badge (Kapsel-Label), delta (erzwungene Gewinn-/Verlustfarbe), num (erzwungene Rechtsbündigkeit), index (Zeilennummer), group (erste Spalte als Gruppenüberschrift: diese Zeile wird als spaltenübergreifende Zwischenüberschrift gerendert, wenn nur die erste Zelle Inhalt hat); "total":true fügt eine Summenzeile hinzu (Zahlenspalten werden automatisch summiert); "export":true: Zwei kleine Schaltflächen „Markdown kopieren“ / „CSV kopieren“ erscheinen über der Tabelle (reine lokale Zwischenablage, keine Anfragen); "filter":"Eingabe-ID": Verknüpft die Tabelle mit einem input/select, wobei die Lesereingabe sofort gefiltert wird (filterColumn kann die Spalte einschränken) – bei vielen Daten sollte dies standardmäßig konfiguriert sein; "sortField":"Dropdown-ID" sortiert nach dem Wert (Spaltenname) des Dropdowns; "details" in gleicher Reihenfolge wie rows, das i-te Element ist der erweiterte Inhalt für diese Zeile (kann beliebige Komponenten enthalten, null = Zeile kann nicht erweitert werden) – in der ersten Spalte erscheint ein Chevron, beim Klicken werden unter der gesamten Zeile Details angezeigt, geeignet für „Haupttabelle + Details“
• keyvalue: {"type":"keyvalue","pairs":[{"key":"...","value":"..."}]}
• timeline: {"type":"timeline","items":[{"title":"...","desc":"...","time":"..."}]}
• file-tree: {"type":"file-tree","items":[{"name":"...","type":"file|dir","children":[...]?}]} – Verzeichniszeilen können durch Klicken ein-/ausgeklappt werden (lokal, kein Roundtrip)
• breadcrumb: {"type":"breadcrumb","items":["<user-language text>","<user-language text>","<user-language text>"]}
• diff: {"type":"diff","diffs":[{"path":"...","oldText":"..."|"null","newText":"..."}]}
• json: {"type":"json","value":...} (JSON-Baumansicht)
• code: {"type":"code","lang":"ts","code":"..."}
• callout: {"type":"callout","tone":"info|success|warning|error","title":"...","content":"..."} – Für einzelne Hervorhebungen, Erinnerungen oder Risikozusammenfassungen; content ist ein Text-String, kann mit JSON "\n"" in Zeilen umbrechen. Für mehrere unabhängige Punkte verwende list mit {title,desc}, um eine Hierarchie pro Punkt zu erhalten.
• steps: {"type":"steps","current":n,"steps":[{"title":"...","desc":"..."}]}
• arrow: {"type":"arrow","dir":"down|right","length":16-96,"label":"..."} – Dünne Linienverbindung zwischen zwei Blöcken in der Abbildung (1,4px Linienbreite + V-förmige Pfeilspitze, feste Länge). Verwende dies immer für vertikale Flussdiagramme, verwende nicht das Zeichen „↓“: Zeichenpfeile folgen der Textgrundlinie und können den Abstand nicht aufspannen
• icon: {"type":"icon","name":"Nodes","tone":"info|success|warning|danger|muted|default","size":16|20|24|32,"tile":true,"label":"<user-language Accessible-Name>"} – Integrierte Symbolbibliothek (749 Symbole können originalgetreu gerendert werden; 64 werden inline sofort geöffnet, die restlichen werden beim ersten Gebrauch geladen, vollständige Liste siehe ICON-NAMES.md). tile:true zeichnet sie auf heller, abgerundeter, quadratischer Grundfläche für Phasenkarten/semantische Markierungen; ohne tile ist es ein Inline-Symbol in Textfarbe. label kann weggelassen werden (rein dekorativ), bei Paaren gib nur einem ein Label.
• blocks: {"type":"blocks","title":"...","rows":[{"label":"Initial","cells":["0","1","2"],"color":"#64748b"}],"columns":n?,"caption":"..."} – Farbblock-Diagramm: Nach Zeilen gruppierte Zellen. Drei Formen, gleiche Struktur: ① Treppendiagramm (unterschiedliche Anzahl Zellen pro Zeile, jede Zeile teilt ihre Breite gleichmäßig auf, z.B. 8→4→2→1) ② Gleiche Blöcke (eine Zeile mit 4 Blöcken) ③ Schwimmbahndiagramm (columns feste Spaltenanzahl, in cells schreibe "—" oder lasse es leer). Wenn color weggelassen wird, wird der Akzentfarbton mit hellem Hintergrund verwendet; die Textfarbe wird automatisch basierend auf der Helligkeit invertiert (dunkler Hintergrund weiße Schrift / heller Hintergrund schwarze Schrift). Wenn ein „Aufteilen, schrittweise vorantreiben, gruppieren/vergleichen“ vorliegt, verwende dies; schreibe keine SVG-Koordinaten von Hand. caption ist obligatorisch: Ein Satz, der erklärt, was jede Zelle darstellt.
  • Zeilenebene "variant":"outline": Dünner Rahmen ohne Füllung, für Matrizen (jede Zelle ist ein Kästchen); "variant":"plain": überhaupt kein Rahmen, für Bitstrings (1 0 1 0 0 0 0 0 liest sich wie eine Zahl, nicht wie eine Tabelle) – nur Zellen mit tone/color erhalten einen Hintergrund
  • Zellen können als Objekte geschrieben werden: {"text":"1","tone":"danger","sub":"SF"} – tone (accent/success/warning/danger/muted) färbt einzelne Zellen semantisch ein, sub fügt eine kleine Zeile unter der Zelle hinzu (Bitname, Sequenznummer, Rolle). color kann explizit als Hexadezimalwert angegeben werden, hat Vorrang vor tone
  • Beispiel: {"columns":8,"rows":[{"variant":"outline","cells":[{"text":"1","tone":"danger","sub":"SF"},"0","1","1","0","0","1","0","0"]}],"caption":"Das höchstwertige Bit ist 1, also SF=1."}

Integrierte Icons: Die folgenden 64 sind im Paket enthalten und werden sofort gerendert, wähle bevorzugt aus diesen aus:

Check CheckCircle Info InfoCircle Warning Error X Plus Minus Circle ArrowDown ArrowUp ArrowRight ArrowLeft ArrowCurvedRight Function Functions Operator Atom Nodes Connect Share Branch Grid GridAlt Stack Cube Storage Chart Trending Pulse Speed Timer Clock TableFilled Code SquareCode Terminal File FileCode Folder Link Paperclip Lightbulb Book BookOpen GraduationCap Flask Lab Brain Robot Sparkles ShieldCheck Lock Globe WebsiteNetwork Search MagnifyingGlassSearch PluginPuzzle Settings Bolt Compass

Die restlichen 685 werden bei Bedarf geladen (beim ersten Gebrauch werden ca. 1 MB abgerufen, danach sind sie auf dieser Seite alle verfügbar). Die vollständige Liste befindet sich im selben Verzeichnis wie dieses SKILL in ICON-NAMES.md – wenn du einen Namen erraten musst, lies es oder grep es, zähle im Dialog nicht alles auf.

Diagramme

• chart: {"type":"chart","kind":"bars|line|donut","data":[{"label":"...","value":n,"color":"#hex?"}],"series":[{"label":"...","data":[...]}]?,"horizontal":true?} – bars Standard; line Trend; donut Anteile; series: bars sind gruppierte Balken, line sind Mehrfach-Liniendiagramme; jedes series[].data verwendet ein Array von Objekten wie [{"label":"Q1","value":30},{"label":"Q2","value":45}], nicht reine Zahlenarrays wie [30,45]; horizontal:true zeichnet horizontale Balken (bevorzugt für Rangfolgen/lange Bezeichnungen); stacked:true stapelt die series (Zusammensetzung/Anteile im Zeitverlauf); wenn die gestapelten Segmente hoch genug sind, werden die Werte direkt im Segment angezeigt; beim Überfahren mit der Maus über einen beliebigen Balken/ein Segment/einen Punkt/einen Sektor wird ein sofortiger Tooltip eingeblendet (gestapelt zeigt den Wert des Segments + Summe). V3-Rendering: Breitenanpassung, Y-Achse 1/2/5 Skalenteilung, einzelne negative Serien werden unterhalb der Nulllinie realistisch gezeichnet, line mit Flächenverlauf und ausgedünnten X-Labels, Donut-Legende zeigt Werte und Prozentsätze. Für schnelle Vergleiche mit ≤8 Punkten verwende chart; für mehrere Serien, Zoom-/Interaktionsbedarf oder große Datenmengen verwende echart.
• plot: {"type":"plot","series":[{"expr":"a*sin(b*x)","label":"...","color":"#hex?","params":[{"name":"a","value":1,"min":0,"max":5,"animateTo":3,"durationMs":4000,"loop":true},{"name":"b","value":1,"min":0.5,"max":5}]}],"xMin":-6.28,"xMax":6.28,"title":"..."} – SVG-Funktionsgraphen; series können "kind":"line|area|scatter" haben (Standard line; area füllt die Fläche bis zur Grundlinie; scatter Streudiagramm); params werden als Echtzeit-Schieberegeler gerendert (Ziehen löst sofortiges Neulackieren aus, y-Achse fixiert=nur die Kurve ändert sich, die Zahlenachse nicht); animateTo-Parameter zeigen eine Wiedergabeschaltfläche an (automatische Animations-Vorführung); SVG kann per Ziehen verschoben und mit dem Mausrad gezoomt werden; Ausdruck unterstützt sin/cos/tan/asin/acos/atan/sqrt/cbrt/exp/log/ln/abs/floor/ceil/round/min/max/pow, Konstanten pi/e/tau, Variable x (andere Buchstaben = Parameter)
• echart: {"type":"echart","title":"...","height":300,"preset":"bar|line|area|pie|scatter","data":[{"label":"...","value":n}],"series":[...]?} – ECharts Vollfunktions-Diagramme, visuell weit überlegen (chart: Verlauf, Tooltip, Animation, Legendeninteraktion); preset-Modus: Verwende das gleiche data/series-Format wie chart, um automatisch thematisierte ECharts-Konfigurationen zu erstellen (Farben folgen dem Host-Theme); preset-Übersicht (nur preset + data/series/links schreiben, Theme folgt automatisch): bar · line · area · pie · scatter · radar (jede series ein Polygon, Metriken aus den Labels der ersten series) · gauge (jeder datum eine Anzeige, geeignet für einzelne KPIs) · funnel (Trichter/Konvertierung) · treemap (Volumen/Hierachieanteile) · sankey (Flüsse, verwende links:[{from,to,value}]) · graph (Beziehungsdiagramm, angetrieben von links, Knotengröße folgt Verbindungsanzahl) · heatmap (series als Zeilen, Labels der ersten series als Spalten) · bigline (lange Sequenz + integrierter Zoom) · wordCloud (Wortwolke, data:[{label,value}] Wert = Gewicht; Farben folgen palette oder Themenpalette) full option Modus: Übergib "option":{...}, um native ECharts-Konfiguration direkt zu schreiben (unterstützt integrierte ECharts-Diagramme und registrierte wordCloud-Wortwolken-Erweiterungen; andere Drittanbieter-Erweiterungen nicht garantiert). Funktionen in Optionen werden herausgefiltert (nur Daten akzeptiert). Auswahlprinzip: chart ist leichtgewichtig (kein zusätzlicher Download) geeignet für schnelle Vergleiche von ≤8 Punkten; echart ist visuell reichhaltiger (Verlauf, Tooltip, Legendeninteraktion, dataZoom), erfordert aber bei Bedarf einen Download von etwa 1 MB Engine, priorisiere es für mehrere Serien / große Bildschirme / interaktive Szenarien.

Interaktion

Lokal zuerst (v2.6): Statusänderungen, die die UI selbst vornehmen kann – Bewertung, Aufgabenkontrolle, Zurücksetzen, Erweitern, Auswählen – werden alle lokal und sofort durchgeführt, null Modell-Roundtrips. Action wird nur für Dinge verwendet, bei denen das Modell beteiligt sein muss (neue Inhalte generieren, Tools ausführen, nächste Schritte vorschlagen). Interaktive Komponenten müssen eine action haben: Schaltflächen ohne action werden deaktiviert gerendert, der Benutzer kann sie nicht anklicken; Schaltflächen mit action geben nach dem Klicken eine 'ausgelöst'-Rückmeldung lokal.

• button: {"type":"button","label":"...","tone":"primary|danger|success|ghost","full":true?,"small":true?,"icon":"emoji?","action":"refresh"?}
• Geheimverbot: Keine Passwörter, API-Schlüssel, Zugriffstoken, Wiederherstellungscodes usw. anfordern oder generieren; bei solchen Anfragen direkt ablehnen und erklären.
• input: {"type":"input","label":"...","placeholder":"...","inputType":"text|email|color|number","value":"...","action":"name"?,"id":"field-id"?} – color verwendet den nativen Farbwähler des Browsers, Wert verwendet #RRGGBB; number kann als numerischer Computed-Eingang verwendet werden; action wird bei Fokusverlust und Enter ausgelöst (Enter sendet submit:true); blur wird nur gesendet, wenn sich der Wert geändert hat (Fokus und Verlassen erzeugt keinen leeren Roundtrip); Payload enthält id, um das Feld für das Modell zu lokalisieren; Werte mit id bleiben nach dem Aktualisieren erhalten und werden von submit in fields gesammelt.
• select: {"type":"select","label":"...","options":["...","..."],"selected":Index?,"action":"pick"?,"id":"field-id"?} – selected wählt eine Option vor (standardmäßig wird „Bitte wählen Sie...“ als Platzhalter angezeigt, nicht stillschweigend die erste Option); Auswahl mit id bleibt nach Aktualisierung erhalten und wird in fields von submit aufgenommen.
• checkbox: {"type":"checkbox","label":"<user-language option>","checked":true?,"action":"toggle"?,"group":"group-id"?} – Standardmäßig beibehaltenes sequenzielles action-Verhalten; Hinzufügen von group aktiviert den Aggregations-Modus mit Mehrfachauswahl: Kontrollkästchen der gleichen Gruppe können wiederholt aktiviert/deaktiviert werden, Änderungen werden nur lokal aufgezeichnet, keine sequenziellen actions gesendet; ein übergeordnetes submit sammelt die ausgewählten Labels dieser Gruppe als String-Array in answers (z.B. {"styles":["<user-language option>","<user-language option>"]}).
• slider: {"type":"slider","label":"...","min":0,"max":100,"step":1,"value":n?,"action":"name"?,"id":"field-id"?} – Numerischer Formularschieber: zeigt den Wert in Echtzeit an; mit id bleibt er nach Aktualisierung erhalten und wird in fields von submit aufgenommen (Ziehen wird entprellt und zu einer einzigen action zusammengefasst).
• radio: {"type":"radio","label":"<user-language label>","options":["<user-language option>","<user-language option>"],"selected":n?,"action":"pick"?} – Einfachauswahl; Hinzufügen von "group":"group-id" aktiviert den Aggregations-Modus: Auswahl wird nur lokal aufgezeichnet, kein Roundtrip; es kann "answer":korrekterIndex oder Label und "explanation":"<user-language explanation>" gesetzt werden, was bei reinen radio-Schaltflächen ohne andere zu sendende Formularstatus die lokale Bewertung ermöglicht.
• link: {"type":"link","label":"...","href":"https://..."?} – Nur http(s)/mailto-Protokolle werden akzeptiert; ohne href wird es als reiner Textstil gerendert (wird nicht als anklickbar vorgetäuscht).
• submit: {"type":"submit","label":"<user-language action>","action":"grade","groups":["q1","styles"],"resetAction":"redo"?} – Aggregations-Schaltfläche: groups referenziert submission-member-keys im aktuellen Block, Quellen sind radio.group, checkbox.group, input.id, textarea.id, select.id, slider.id; radio muss ausgewählt sein, checkbox-Gruppe muss mindestens eine Auswahl haben, der Wert eines normalen Felds muss nach trimmen nicht leer sein. groups steuert die erforderlichen Mitglieder für die Einreichung und den Fortschritt; wenn nicht gesetzt, kann mindestens ein abgeschlossenes Mitglied eingereicht werden. Bei reinen radio-Bereichen mit answer und ohne Bereichsüberschreitungs-Payload kann lokal bewertet werden; in anderen Szenarien wird einmalig [genui-action] gesendet, der Payload sammelt weiterhin den ausgefüllten Formularstatus des aktuellen Blocks. Felder

...