test

# KI-Beschreibung: HTML in Blogi-XML (Widget-Format) umwandeln

Diese Datei beschreibt, wie eine KI HTML in das von blogi-webedit erwartete XML-Format konvertieren soll.

## Ziel

- Eingabe: Rohes HTML (optional mit CSS).

- Ausgabe: Gueltiges Blogi-Widget-XML mit Wurzel `WebEditor`.

- Fokus: Strukturerhalt, sinnvolle Widget-Auswahl, stabile Wiederladefaehigkeit.

## Pflichtregeln fuer die Ausgabe

1. Gib nur XML aus (kein Markdown, keine Erklaerung).

2. Root muss immer `<WebEditor>` sein.

3. Jeder Top-Level-Knoten unterhalb von `WebEditor` ist ein Widget.

4. Wenn ein Widget per NodeJS-Widget gespeichert wird, muss `type_id` gesetzt sein.

5. Unbekannte oder komplexe HTML-Strukturen in `CustomHtml` ablegen statt zu verwerfen.

6. Inhalt darf nicht verloren gehen.

## Allgemeine XML-Struktur

```xml

<WebEditor>

  <Section>

    <TextBox>Hallo Welt</TextBox>

  </Section>

</WebEditor>

```

Hinweise:

- Widget-Tagnamen entsprechen den Widgetnamen (z. B. `Section`, `Article`, `Container`, `Grid`, `TextBox`, `Button`, `Image`, `List`, `Accordion`, `CustomHtml`).

- Textknoten koennen direkt als Inhalt von `TextBox` stehen.

## NodeJS-Widget-Format (empfohlen)

Fuer NodeJS-Widgets ist dieses Format robust:

```xml

<TextBox type_id="f1228389-0f7f-4fe0-ab0f-968451f9f04d" instance_id="optional-instance-id">

  <PropsJson>{"text":"Hallo","hidden":false}</PropsJson>

</TextBox>

```

Regeln:

1. `type_id` ist die hardcoded UUID des Widgets (aus `getUUID()` im Widget-Skript).

2. `PropsJson` enthaelt alle Widget-Eigenschaften als JSON-Objekt.

3. Wenn `PropsJson` vorhanden ist, soll es vollstaendig und konsistent sein.

## HTML -> Widget-Mapping (Richtlinie)

- `section` -> `Section`

- `article` -> `Article`

- `div` mit `display:grid` -> `Grid`

- `div` sonst -> `Container`

- `p`, `span`, reine Textbereiche -> `TextBox`

- `button`, `a` mit Button-Look -> `Button`

- `img`, `picture` -> `Image`

- `ul`/`ol` -> `List`

- Akkordeon-Strukturen -> `Accordion`

- Nicht abbildbare Spezialstruktur -> `CustomHtml`

## Style-Transfer (wichtig)

- Uebertrage wichtige Styles in Widget-Properties (z. B. padding, margin, border, background-color, width, height).

- Nicht direkt zuordenbare Styles in `custom_css` oder `CustomCss` sichern.

- Responsive/Media-Regeln nicht verwerfen; in `custom_css` sichern.

## Robustheitsregeln

1. Bei Unsicherheit lieber `CustomHtml` statt falsches Widget.

2. Keine leeren Widgets ohne Inhalt erzeugen.

3. ID/Klassen aus HTML nur uebernehmen, wenn sie fuer Funktion oder Styling relevant sind.

4. Script-Tags nicht als aktive Scripts uebernehmen; stattdessen Struktur sichern.

## Prompt-Vorlage fuer eine KI

Nutze diese Vorlage, wenn du ein LLM fuer die Konvertierung verwendest:

"""

Du bist ein Konverter von HTML nach Blogi-Widget-XML.

Aufgabe:

- Konvertiere das folgende HTML in gueltiges Blogi-XML.

- Ausgabe ausschliesslich als XML, ohne Markdown.

- Root muss <WebEditor> sein.

- Nutze passende Widgets (Section, Article, Container, Grid, TextBox, Button, Image, List, Accordion, CustomHtml).

- Fuer NodeJS-Widgets setze type_id (hardcoded UUID) und nutze <PropsJson> als JSON.

- Verliere keinen Inhalt. Unbekannte Strukturen in CustomHtml sichern.

HTML:

{{HTML_INPUT}}

"""

## Minimalbeispiel

Eingabe-HTML:

```html

<section style="padding:20px;background:#f5f5f5">

  <h2>FAQ</h2>

  <div class="acc">

    <h3>Frage 1</h3>

    <p>Antwort 1</p>

  </div>

</section>

```

Moegliche Ausgabe:

```xml

<WebEditor>

  <Section>

    <TextBox>FAQ</TextBox>

    <Accordion type_id="a2f7c1e3-49d8-4b5a-9c6e-8d1f3a7b2e04">

      <PropsJson>{"title":"Frage 1","allow_multiple":false}</PropsJson>

      <TextBox>Antwort 1</TextBox>

    </Accordion>

  </Section>

</WebEditor>

```

## Technischer Kontext (Code)

- HTML-Import erzeugt intern `WebEditor`-XML.

- Laden erfolgt ueber XML -> Widget-Rekonstruktion.

- Rekonstruktion nutzt bevorzugt `type_id` (UUID), danach Name-Fallback.

Damit ist die UUID-basierte Zuordnung fuer persistente Vorlagen stabil.

## Zusatzreferenz

Fuer eine detaillierte, KI-gerechte Beschreibung aller NodeJS-Widgets inkl.

type_id und Properties siehe:

- `AI_WIDGET_UUID_PROPERTIES.md`

# KI-Referenz: Blogi NodeJS Widgets (UUID + Eigenschaften)

Diese Datei ist fuer LLMs gedacht, die HTML in Blogi-XML umwandeln.

Sie enthaelt pro Widget:

- Widget-Name

- hardcoded type_id (UUID aus getUUID)

- wichtige Eigenschaften (PropsJson-Keys)

- kurze, KI-gerechte Bedeutung

## Nutzung in XML

Empfohlenes Muster:

```xml

<WidgetName type_id="WIDGET_UUID">

  <PropsJson>{"key":"value"}</PropsJson>

</WidgetName>

```

Regeln fuer KI:

1. type_id immer setzen, wenn bekannt.

2. Nur gueltige PropsJson-Keys je Widget verwenden.

3. Nicht passende CSS-Reste in custom_css ablegen.

4. hidden als bool setzen (`true`/`false`).

## Gemeinsame Property-Konventionen

- `width`, `height`: CSS-Werte wie `100%`, `320px`, `auto`.

- `padding`, `margin`, `border_radius`, `border_style`: direkte CSS-Strings.

- `background_color`, `text_color`, `font_color`: Farbe oder CSS-Variable.

- `l_*`: Light-Theme-Variante.

- `m_*`: Mobile-Variante.

- `custom_css`: Freier CSS-Block fuer Sonderfaelle.

## Widget-Referenz

### Accordion

- Datei: accordion.js

- Name: Accordion

- type_id: a2f7c1e3-49d8-4b5a-9c6e-8d1f3a7b2e04

- Props:

  - `title`: Ueberschrift des Accordion-Headers.

  - `allow_multiple`: Mehrere geoeffnete Items erlauben.

  - `border_style`: Rahmenstil der Items.

  - `header_bg`: Header-Hintergrund.

  - `content_bg`: Content-Hintergrund.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### Article

- Datei: article.js

- Name: Article

- type_id: 58e70fdb-d4b4-45bf-8c59-e7a8ce2db735

- Props:

  - `title`: Titel.

  - `intro`: Einleitungstext.

  - `padding`: Innenabstand.

  - `background_color`: Hintergrund.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### Button

- Datei: button.js

- Name: Button

- type_id: f77fcdg4-5i98-7h6i-d7f9-2i89g4e989f7

- Props:

  - `label`: Button-Text.

  - `link_type`: Linkmodus (z. B. URL, Sektion).

  - `link_url`: Ziel-URL.

  - `section_id`: Zielsektion bei internem Sprung.

  - `open_new_tab`: In neuem Tab oeffnen.

  - `background_color`, `l_background_color`: Hintergrund (Dark/Light).

  - `text_color`, `l_text_color`: Textfarbe (Dark/Light).

  - `font_size`: Schriftgroesse.

  - `padding`: Innenabstand.

  - `border_radius`: Rundung.

  - `border_style`: Rahmen.

  - `text_align`: Textausrichtung.

  - `width`, `height`: Dimensionen.

  - `m_font_size`, `m_padding`, `m_width`, `m_height`: Mobile-Werte.

  - `hidden`, `m_hidden`: Sichtbarkeit allgemein/mobil.

  - `g_event_enabled`: Tracking aktivieren.

  - `g_event_name`, `g_event_category`, `g_event_label`, `g_event_value`: Event-Daten.

  - `g_consent_update`: Consent-Steuerung.

  - `custom_css`: Zusatz-CSS.

### Container

- Datei: container.js

- Name: Container

- type_id: a22a7ef9-0d43-4c1d-82b4-7d34b9545a24

- Props:

  - `background_color`, `l_background_color`: Hintergrund.

  - `background_image`: Hintergrundbild-URL.

  - `background_size`, `background_position`, `background_repeat`: Hintergrundsteuerung.

  - `width`, `height`: Dimensionen.

  - `padding`, `margin`: Abstaende.

  - `border_radius`, `border_style`: Rahmen.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### CustomHtml

- Datei: customhtml.js

- Name: CustomHtml

- type_id: a12c3d4e-5f67-8901-abcd-ef2345678901

- Props:

  - `html_content`: Roh-HTML.

  - `css_content`: Widget-lokales CSS.

  - `js_content`: Widget-lokales JS.

  - `width`, `height`: Dimensionen.

  - `hidden`: Sichtbarkeit.

### Grid

- Datei: grid.js

- Name: Grid

- type_id: c44c9af1-2f65-4e3f-a4c6-9f56d1b656c4

- Props:

  - `columns`, `rows`: Grid-Definition.

  - `gap`: Abstand zwischen Zellen.

  - `padding`: Innenabstand.

  - `background_color`: Hintergrund.

  - `width`, `height`: Dimensionen.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### Image

- Datei: image.js

- Name: Image

- type_id: e66ebcf3-4h87-6g5h-c6e8-1h78f3d878e6

- Props:

  - `media_id`, `media_ext`: Medienreferenz im Blogi-System.

  - `src`: Bild-URL (direkt).

  - `alt`: Alt-Text.

  - `real_width`, `real_height`: Originalgroesse.

  - `width`, `height`: Ausgabe-Dimension.

  - `object_fit`: Darstellungsmodus.

  - `border_radius`: Rundung.

  - `link_url`: Optionaler Klick-Link.

  - `fullscreen`: Vollbild aktivierbar.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### List

- Datei: list.js

- Name: List

- type_id: a1b2c3d4-list-4e5f-6a7b-8c9d0e1f2a3b

- Props:

  - `list_type`: Typ (`ul`/`ol`-aehnlich).

  - `list_style_type`: Marker-Stil.

  - `direction`: Layout-Richtung.

  - `gap`: Abstand.

  - `items`: Listenelemente.

  - `font_size`, `font_color`: Typografie.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### Nodewidget (Basis)

- Datei: nodewidget.js

- Name: Nodewidget

- type_id: 24d09685-874a-4d40-9c4d-30b1a3e39d01

- Hinweis: Basis-/Fallback-Widget, wenn kein spezialisiertes Mapping vorhanden ist.

### Popup

- Datei: popup.js

- Name: Popup

- type_id: c44bde81-7a23-4f0e-b6d1-9e83a5cf67b2

- Props:

  - `button_label`: Trigger-Text.

  - `button_bg_color`, `l_button_bg_color`: Trigger-Hintergrund.

  - `button_text_color`, `l_button_text_color`: Trigger-Textfarbe.

  - `button_font_size`, `button_font_weight`: Trigger-Typografie.

  - `button_padding`, `button_border_radius`: Trigger-Form.

  - `overlay_bg_color`: Overlay-Hintergrund.

  - `popup_bg_color`, `l_popup_bg_color`: Popup-Hintergrund.

  - `popup_text_color`, `l_popup_text_color`: Popup-Textfarbe.

  - `popup_width`, `popup_max_height`: Popup-Groesse.

  - `popup_padding`, `popup_border_radius`: Innenabstand/Form.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### Section

- Datei: section.js

- Name: Section

- type_id: be6ba833-c0be-4906-b97a-78045302d1d2

- Props:

  - `background_color`, `l_background_color`: Hintergrund.

  - `css_class`: zusaetzliche CSS-Klasse.

  - `padding`, `margin`: Abstaende.

  - `max_width`, `min_height`, `width`, `height`: Groessensteuerung.

  - `border_radius`, `border_style`: Rahmen.

  - `opacity`: Transparenz.

  - `vertical_align`: Vertikale Ausrichtung.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### Slider

- Datei: slider.js

- Name: Slider

- type_id: ba0937c1-fbb2-44cf-b622-6a50bdfc3161

- Props:

  - `width`, `height`: Groesse.

  - `background_color`, `l_background_color`: Hintergrund.

  - `border_radius`: Rundung.

  - `transition`: Uebergangsart.

  - `interval`: Wechselintervall.

  - `autoplay`: Automatischer Wechsel.

  - `show_arrows`, `show_dots`: Navigationselemente.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### Survey

- Datei: survey.js

- Name: Survey

- type_id: b83de5f1-9a27-4c3b-b1e6-7d45f8a2c901

- Props:

  - `survey_name`: Interner Survey-Bezeichner.

  - `survey_title`: Sichtbarer Titel.

  - `width`, `height`: Groesse.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### Table

- Datei: table.js

- Name: Table

- type_id: d55dabe2-3g76-5f4g-b5d7-0g67e2c767d5

- Props:

  - `num_rows`, `num_cols`: Tabellengroesse.

  - `has_header`: Header aktiv.

  - `border_style`: Rahmenstil.

  - `cell_padding`: Zellabstand innen.

  - `width`, `height`: Groesse.

  - `background_color`, `l_background_color`: Hintergrund.

  - `vertical_align`: Vertikale Ausrichtung.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### TextBox

- Datei: textbox.js

- Name: TextBox

- type_id: b33b8ef0-1e54-4d2e-93b5-8e45c0a65b35

- Props:

  - `content`: Text/HTML-Inhalt je nach Widget-Interpretation.

  - `width`, `height`: Groesse.

  - `font_family`, `font_size`: Typografie.

  - `font_color`, `l_font_color`: Farbe.

  - `text_align`: Ausrichtung.

  - `font_weight`, `font_style`: Schriftschnitt.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

### Video

- Datei: video.js

- Name: Video

- type_id: a77fbcd4-5i98-7h6i-d7f9-2i89g4e989f7

- Props:

  - `media_id`, `media_ext`: Medienreferenz.

  - `src`: Video-URL.

  - `width`, `height`: Groesse.

  - `controls`: Bedienelemente sichtbar.

  - `play_on_hover`: Hover-Start.

  - `poster_time`: Poster-Frame-Zeit.

  - `hidden`: Sichtbarkeit.

  - `custom_css`: Zusatz-CSS.

## Wichtiger Hinweis fuer KI

Einige in den Dateien hinterlegte IDs sehen nicht wie RFC-UUIDs aus. Verwende trotzdem exakt den im Widget definierten Wert, da dieser im System als type_id-Schluessel dient.