{
"tool_response": [
{
"type": "text",
"text": "{\n \"success\": true,\n \"doc\": {\n \"id\": 151,\n \"parent_id\": 144,\n \"slug\": \"components\",\n \"path\": \"\/frontend\/components\",\n \"title\": \"UI Components\",\n \"description\": \"Wiederverwendbare UI-Komponenten Referenz\",\n \"content\": \"<nav class=\\\"breadcrumb\\\">\\n <a href=\\\"\/docs\\\">Dokumentation<\/a> »\\n <a href=\\\"\/docs\/frontend\\\">Frontend<\/a> »\\n Components\\n<\/nav>\\n\\n<h1>UI Components<\/h1>\\n<p class=\\\"doc-meta\\\"><strong>Erstellt:<\/strong> 2025-12-27 | <strong>Aktualisiert:<\/strong> 2025-12-27<\/p>\\n\\n<p>Wiederverwendbare UI-Komponenten aus <code>admin.css<\/code>.<\/p>\\n\\n<hr>\\n\\n<h2>Buttons<\/h2>\\n\\n<h3>Basis<\/h3>\\n<pre><code><button class=\\\"btn btn--primary\\\">Primary<\/button>\\n<button class=\\\"btn btn--secondary\\\">Secondary<\/button>\\n<button class=\\\"btn btn--success\\\">Success<\/button>\\n<button class=\\\"btn btn--danger\\\">Danger<\/button>\\n<button class=\\\"btn btn--info\\\">Info<\/button>\\n<button class=\\\"btn btn--light\\\">Light<\/button><\/code><\/pre>\\n\\n<h3>Größen<\/h3>\\n<pre><code><button class=\\\"btn btn--primary btn--small\\\">Klein<\/button>\\n<button class=\\\"btn btn--primary\\\">Normal<\/button>\\n<button class=\\\"btn btn--primary btn--large\\\">Groß<\/button><\/code><\/pre>\\n\\n<h3>Block (volle Breite)<\/h3>\\n<pre><code><button class=\\\"btn btn--primary btn--block\\\">Volle Breite<\/button><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Badges<\/h2>\\n\\n<h3>Status-Badges<\/h3>\\n<pre><code><span class=\\\"badge badge--pending\\\">Pending<\/span>\\n<span class=\\\"badge badge--in_progress\\\">In Progress<\/span>\\n<span class=\\\"badge badge--completed\\\">Completed<\/span>\\n<span class=\\\"badge badge--failed\\\">Failed<\/span>\\n<span class=\\\"badge badge--cancelled\\\">Cancelled<\/span><\/code><\/pre>\\n\\n<h3>Andere Badges<\/h3>\\n<pre><code><span class=\\\"badge badge--draft\\\">Entwurf<\/span>\\n<span class=\\\"badge badge--published\\\">Veröffentlicht<\/span>\\n<span class=\\\"badge badge--success\\\">Erfolg<\/span>\\n<span class=\\\"badge badge--warning\\\">Warnung<\/span>\\n<span class=\\\"badge badge--primary\\\">Primary<\/span><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Alerts<\/h2>\\n\\n<pre><code><div class=\\\"alert alert--success\\\">Erfolgreich gespeichert.<\/div>\\n<div class=\\\"alert alert--warning\\\">Achtung: Ungespeicherte Änderungen.<\/div>\\n<div class=\\\"alert alert--error\\\">Fehler beim Speichern.<\/div>\\n<div class=\\\"alert alert--info\\\">Information verfügbar.<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Forms<\/h2>\\n\\n<h3>Basis-Form<\/h3>\\n<pre><code><form class=\\\"form\\\">\\n <div class=\\\"form-group\\\">\\n <label class=\\\"form-group__label\\\">Name<\/label>\\n <input type=\\\"text\\\" class=\\\"form-input\\\">\\n <span class=\\\"form-group__hint\\\">Hilfetext<\/span>\\n <\/div>\\n \\n <div class=\\\"form-group\\\">\\n <label class=\\\"form-group__label\\\">Beschreibung<\/label>\\n <textarea class=\\\"form-textarea\\\"><\/textarea>\\n <\/div>\\n \\n <div class=\\\"form-group\\\">\\n <label class=\\\"form-group__label\\\">Status<\/label>\\n <select class=\\\"form-select\\\">\\n <option>Aktiv<\/option>\\n <option>Inaktiv<\/option>\\n <\/select>\\n <\/div>\\n \\n <div class=\\\"form-actions\\\">\\n <button type=\\\"submit\\\" class=\\\"btn btn--primary\\\">Speichern<\/button>\\n <button type=\\\"button\\\" class=\\\"btn btn--light\\\">Abbrechen<\/button>\\n <\/div>\\n<\/form><\/code><\/pre>\\n\\n<h3>Form-Row (2 Spalten)<\/h3>\\n<pre><code><div class=\\\"form-row\\\">\\n <div class=\\\"form-group\\\">\\n <label>Vorname<\/label>\\n <input class=\\\"form-input\\\">\\n <\/div>\\n <div class=\\\"form-group\\\">\\n <label>Nachname<\/label>\\n <input class=\\\"form-input\\\">\\n <\/div>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Cards<\/h2>\\n\\n<pre><code><div class=\\\"card\\\">\\n <div class=\\\"card__header\\\">\\n <h2>Titel<\/h2>\\n <span class=\\\"badge badge--success\\\">Aktiv<\/span>\\n <\/div>\\n <p>Card-Inhalt hier...<\/p>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Stats<\/h2>\\n\\n<pre><code><div class=\\\"stats-grid\\\">\\n <div class=\\\"stat-card\\\">\\n <span class=\\\"stat-card__value\\\">42<\/span>\\n <span class=\\\"stat-card__label\\\">Dokumente<\/span>\\n <\/div>\\n <div class=\\\"stat-card stat-card--success\\\">\\n <span class=\\\"stat-card__value\\\">98%<\/span>\\n <span class=\\\"stat-card__label\\\">Erfolgsrate<\/span>\\n <\/div>\\n <div class=\\\"stat-card stat-card--warning\\\">\\n <span class=\\\"stat-card__value\\\">3<\/span>\\n <span class=\\\"stat-card__label\\\">Pending<\/span>\\n <\/div>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Lists<\/h2>\\n\\n<pre><code><div class=\\\"list\\\">\\n <div class=\\\"list-item\\\">\\n <div class=\\\"list-item__main\\\">\\n <h3 class=\\\"list-item__title\\\">\\n <a href=\\\"#\\\">Item Titel<\/a>\\n <\/h3>\\n <div class=\\\"list-item__meta\\\">\\n <span>Erstellt: 2025-12-27<\/span>\\n <span>5 Einträge<\/span>\\n <\/div>\\n <\/div>\\n <span class=\\\"badge badge--completed\\\">Fertig<\/span>\\n <\/div>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Empty State<\/h2>\\n\\n<pre><code><div class=\\\"empty-state\\\">\\n <p>Keine Einträge vorhanden.<\/p>\\n <a href=\\\"\/new\\\" class=\\\"btn btn--primary\\\">Erstellen<\/a>\\n<\/div>\\n\\n<!-- Klein -->\\n<div class=\\\"empty-state empty-state--small\\\">\\n <p>Keine Daten.<\/p>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Pagination<\/h2>\\n\\n<pre><code><div class=\\\"pagination\\\">\\n <span class=\\\"pagination__info\\\">1-10 von 42<\/span>\\n <div class=\\\"pagination__buttons\\\">\\n <button class=\\\"pagination__btn\\\" disabled>&laquo;<\/button>\\n <button class=\\\"pagination__btn pagination__btn--active\\\">1<\/button>\\n <button class=\\\"pagination__btn\\\">2<\/button>\\n <button class=\\\"pagination__btn\\\">3<\/button>\\n <button class=\\\"pagination__btn\\\">&raquo;<\/button>\\n <\/div>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Action Bar<\/h2>\\n\\n<pre><code><div class=\\\"action-bar\\\">\\n <button class=\\\"btn btn--primary\\\">Speichern<\/button>\\n <button class=\\\"btn btn--danger\\\">Löschen<\/button>\\n <a href=\\\"\/back\\\" class=\\\"btn btn--light\\\">Zurück<\/a>\\n<\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>HTMX-Integration<\/h2>\\n\\n<h3>Loading Indicator<\/h3>\\n<pre><code><button class=\\\"btn btn--primary\\\">\\n <span class=\\\"htmx-content\\\">Speichern<\/span>\\n <span class=\\\"htmx-indicator\\\">Lade...<\/span>\\n<\/button><\/code><\/pre>\\n\\n<h3>HTMX Messages Container<\/h3>\\n<pre><code><div class=\\\"htmx-messages\\\" id=\\\"messages\\\"><\/div><\/code><\/pre>\\n\\n<hr>\\n\\n<h2>Layout-Helper<\/h2>\\n\\n<h3>Page Container<\/h3>\\n<pre><code><div class=\\\"page-container\\\">...<\/div>\\n<div class=\\\"page-container page-container--narrow\\\">...<\/div>\\n<div class=\\\"page-container page-container--wide\\\">...<\/div><\/code><\/pre>\\n\\n<h3>Grid Layouts<\/h3>\\n<pre><code><div class=\\\"grid-2\\\">\\n <div>Hauptinhalt<\/div>\\n <div>Sidebar (320px)<\/div>\\n<\/div>\\n\\n<div class=\\\"grid-3\\\">\\n <div>Spalte 1<\/div>\\n <div>Spalte 2<\/div>\\n <div>Spalte 3<\/div>\\n<\/div>\\n\\n<div class=\\\"grid-auto\\\">\\n <!-- Auto-fit mit min 140px -->\\n<\/div><\/code><\/pre>\\n\\n<h2>Verwandte Themen<\/h2>\\n<ul>\\n <li><a href=\\\"\/docs\/frontend\/css\\\">CSS Architektur<\/a> - Design Tokens<\/li>\\n <li><a href=\\\"\/docs\/frontend\/htmx\\\">HTMX<\/a> - Interaktivität<\/li>\\n <li><a href=\\\"\/docs\/frontend\/htmx\/patterns\\\">HTMX Patterns<\/a> - Code-Beispiele<\/li>\\n<\/ul>\",\n \"status\": \"published\",\n \"sort_order\": 0,\n \"depth\": 1,\n \"created_at\": \"2025-12-27T16:00:40\",\n \"updated_at\": \"2025-12-27T16:00:40\"\n }\n}"
}
]
}