Laioutr Release News Juli 2026

Der Juli stand im Zeichen der Content-Vorschau: Redakteurinnen und Redakteure können unveröffentlichte Inhalte jetzt serverseitig gerendert im echten Storefront ansehen - vom Token in den Projekteinstellungen über den Studio-Befehl bis zur Absicherung gegen Suchmaschinen-Indexierung. Parallel dazu wurde die Medienbibliothek grundlegend überarbeitet und als Orchestr-Integration angebunden, mit Ordner-Navigation, Cursor-Pagination und direktem Browser-Upload. Frontend Core lernte mit dem neuen pageIndex-Handler, den kompletten Seitenraum eines Seitentyps aufzuzählen - Grundlage für korrekte hreflang-Alternates pro Sprache und für Sitemaps. In Laioutr UI kamen Produktspezifikations- und Öffnungszeiten-Tabellen, ein automatisches Inhaltsverzeichnis für Artikel und der EU-Widerrufs-Button hinzu.

Frontend Core v0.33.1 - v0.38.1

Highlights

• Content-Vorschau für unveröffentlichte Inhalte: Wer eine Storefront-URL mit ?preview_token=<token> öffnet, sieht ab sofort die unveröffentlichte Fassung der Seite - serverseitig gerendert, nicht nachträglich im Browser ersetzt. Der Token wird serverseitig gegen den previewToken des Projekts geprüft (timing-sicherer Vergleich); nur das Ergebnis dieser Prüfung erreicht die Connectoren als clientEnv.isPreview. Ein falscher Token führt nicht zu einem Fehler, sondern rendert schlicht den veröffentlichten Stand. Jede Antwort auf eine Anfrage mit Token - angenommen oder abgelehnt - wird als private, no-store ausgeliefert und landet damit nicht in einem geteilten Cache wie einem CDN. Neu ist das auto-importierte Composable useContentPreview(), das enabled, status (off / pending / active / rejected) und state liefert; enabled wird erst nach erfolgreicher Serverprüfung true und eignet sich damit direkt für v-if. Zwei Hooks stehen bereit: frontend-core:content-preview:resolve-token (Bail-Hook, um den Token statt aus dem Query-Parameter aus einem Cookie oder Header zu beziehen) und frontend-core:content-preview:changed (feuert nach einem Vorschau-Wechsel, etwa um eigene Caches zu invalidieren).
• Vorschau-Seiten werden nicht indexiert: PageRenderer erzwingt auf jedem Render, der einen Vorschau-Token trägt, noindex, nofollow - unabhängig davon, ob die Vorschau aktiv, ausstehend oder abgelehnt ist, und unabhängig vom konfigurierten robots-Wert der Seite. Vorschau-URLs liefern unveröffentlichte, tokengeschützte Inhalte und tragen den Token in der URL; sie dürfen deshalb unter keinen Umständen in einen Suchindex geraten.
• Medienbibliotheken als Orchestr-Integration (Breaking): Eine Medienbibliothek wird jetzt über defineX.mediaLibrary(...) am Orchestr-Builder der App deklariert statt über die eigenständige defineMediaLibraryProvider-Factory. Identität (id, label, iconSrc) stammt aus dem .meta() des Builders; der Connector deklariert seine capabilities (Suche, Tags, Ordner, Sortierungen, Upload-Verfahren) explizit. Das Blättern läuft über Cursor-Pagination (MediaQuery → MediaListResult), Ordner sind in die eine list-Methode gefaltet (die separate browseFolders-Methode entfällt), und der Upload kennt neben dem Proxy-Weg jetzt auch einen Staged-Weg direkt vom Browser zum Backend - beide mit Ergebnis pro Datei, sodass eine fehlgeschlagene Datei nicht den ganzen Stapel kippt. Der Shopify-Connector nutzt Staged-Uploads und wartet, bis jede Datei READY ist; der Shopware-Connector kann jetzt durch den echten Medienordner-Baum navigieren. Alle Adapter-Ausgaben werden an der Vertrauensgrenze validiert (kanonischer Zod-Parse, URL-Schema-Prüfung inklusive verschachtelter Poster- und Cover-Bilder); verworfene Einträge erzeugen eine serverseitige Warnung. defineMediaLibraryProvider(...) funktioniert als abgekündigter Kompatibilitäts-Shim weiter, allerdings in eingeschränktem Umfang (keine Ordner, kein Staged-Upload, keine deklarierten Sortierungen) und mit einer einmaligen Warnung bei der Registrierung.
• CMS-Medienbibliothek über die Laioutr-CDN-API: Neu ist der @laioutr-app/cms-Medienbibliotheks-Connector samt RcProject.config.cdn-Container. Er implementiert die neue Schnittstelle gegen apps/cdn-api - Cursor-Blättern mit Ordnern, Staged-Upload und Cloudflare-Provider für Bild und Video-Poster auf dem projekteigenen Delivery-Host. RcCoreConfig erhält dafür ein optionales cdn: { key, deliveryHost }, das über die bestehende Config-Bereinigung nicht an den Client gelangt.
• Herkunft und KI-Kennzeichnung an Medien: Jede Media-Quelle trägt jetzt ein optionales origin ({ libraryId, externalId? }), das die erzeugende Bibliothek und die stabile Asset-ID festhält. Es wird automatisch gesetzt, wenn ein Asset aus einer Medienbibliothek gewählt wird, ist rein verwaltungsseitig (der Renderer liest es nie) und additiv - zuvor gespeicherte Medien bleiben gültig. Ergänzend kam aiDisclosure hinzu, das festhält, ob ein Asset vollständig KI-generiert ('generated') oder mit generativer KI verändert ('modified') wurde. Das Feld gibt es für Bild, Video und Audio; der Poster eines Videos und das Cover eines Audios tragen einen eigenen Wert unabhängig vom Elternobjekt. Anbieter sollten es nur aus einem verlässlichen Backend-Signal setzen und sonst weglassen: „nicht gesetzt" bedeutet „keine Angabe bekannt", nicht „von Menschen erstellt".
• pageIndex-Handler: der komplette Seitenraum eines Seitentyps: Mit defineOrchestr.pageIndex({ for, list, search?, count?, locate?, cache?, order? }) gibt es eine Registrierung pro Seitentyp, die dessen gesamten Seitenraum verantwortet. list läuft den Seitenraum in stabiler Reihenfolge ab und liefert je konkreter Seite einen PageIndexEntry; der neue paginate()-Helper macht aus einer cursor-basierten Plattform-API genau das. search beantwortet einen Suchbegriff mit einer relevanz-sortierten Top-N-Liste - optional, denn ohne eigene Implementierung durchsucht der Runner die ersten 1000 aufgezählten Einträge nach Titel und Route-Parametern. count liefert eine günstige Gesamtzahl für Sitemaps und Picker, locate schlägt eine einzelne Seite nach und meldet deren Route-Parameter in allen Sprachen, in denen sie existiert. Auf Konsumentenseite stehen die auto-importierten Server-Utilities listPages(), searchPages(), countPages(), locatePage() und invalidateEntity() bereit. Seitentypen ohne Registrierung verhalten sich exakt wie zuvor - Anbieter müssen das nicht implementieren.
• hreflang-Alternates mit den Route-Parametern der jeweiligen Sprache: Auf Seiten mit pro Sprache übersetztem Slug wurden die Alternate-URLs, og:locale:alternate, x-default und das Ziel des Sprachumschalters bisher aus den Parametern der aktuellen Sprache gebildet - und zeigten damit auf URLs, die es in der Zielsprache gar nicht gibt. Wo die pageIndex-Registrierung eines Seitentyps locate implementiert und eine vollständige Sprachkarte meldet, bekommt jede Sprache jetzt ihren eigenen Slug; Sprachen, in denen die Seite nicht existiert, entfallen aus den Alternates, statt geraten zu werden. Weggelassen wird ausschließlich auf Basis einer vollständigen Karte: Meldet ein locate nur die Sprache, in der es aufgerufen wurde, bleibt es beim bisherigen Verhalten. Die Auflösung läuft parallel zu den Seiten-Queries und ist durch ein SSR-Budget von zwei Sekunden begrenzt; wird es überschritten, fällt genau dieser Render auf das alte Verhalten zurück, wärmt aber den Server-Cache, sodass der nächste Render korrekt ist. Einsprachige Projekte und Seiten ohne dynamische Parameter führen keine Auflösung durch.
• ai-Metadaten an Sektionen und Blöcken (Breaking): Die ai-Metadaten einer Sektions- oder Block-Definition sind jetzt ein typisiertes AiComponentMetadata-Objekt mit genau zwei optionalen Feldern: description für agentenseitige Fakten, die nicht in die Picker-Beschreibung passen, und examples für eine ausformulierte Slot-/Block-Komposition bei mehrteiligen Sektionen. Die frühere freie { label, description }-Form, die begleitenden ai-descriptions/*.md-Dateien und der aiDescription()-Helper sind entfallen. Kein ai-Objekt zu haben ist der Normalfall - studio.description und das Feld-/Slot-Schema tragen die Last, und sämtliche eingebauten Beschreibungen wurden um die Fakten ergänzt, die zuvor in den ai-Metadaten standen. Die vorschreibenden Felder (useWhen, avoidWhen, constraints, neverWith, pairsWellWith, typicallyFollowedBy, supports) sind ersatzlos gestrichen: Auswertungen haben gezeigt, dass sie die Seitenkomposition durch Agenten messbar verschlechtern.
• DateTime-Wertetyp: Ein zeitzonenbehafteter ISO-8601-Zeitpunkt (z.iso.datetime({ offset: true })), der den temporalen Satz neben CalendarDate, Time und Duration vervollständigt.
• Fokuspunkt für Videos: Video-Quellen unterstützen jetzt einen focalPoint analog zu Bildern. Der eingebaute MediaVideo-Renderer setzt ihn als object-position um - pro Viewport, mit center center als Rückfall -, sodass der wichtige Bildausschnitt sichtbar bleibt, wenn das Video durch object-fit: cover beschnitten wird.
• ClientEnv.domain: Der aufgelöste Client-Kontext trägt jetzt die Markt-Domain (Host, Pfad, Sprache), auf die die aktuelle Anfrage aufgelöst wurde. Für den kanonischen Host einer Anfrage sollte dieses Feld gelesen werden statt market.defaultDomain anzunehmen. Die i18n-Konfigurationsprüfung warnt außerdem, wenn zwei Domains desselben Markts dieselbe Sprache verwenden - dann ist die aufgelöste Domain mehrdeutig und die Sprachen sollten regional qualifiziert werden (etwa de-DE gegenüber de-AT).

Fehlerbehebungen & Verbesserungen

• content_alignment-Werte, die außerhalb der aus der Achse abgeleiteten Menge liegen, werden beim Auflösen der Render-Props jetzt geheilt statt verworfen. Wurde die axis eines Felds nachträglich geändert, wird der gespeicherte Wert auf die neue Achse projiziert: Beim Einschränken von both auf eine Achse bleibt die passende Komponente erhalten (top-left rendert auf einem vertikalen Feld als top), beim Erweitern wird die fehlende Achse mit center ergänzt (top wird zu top-center). Nur ein Wert ohne Entsprechung auf der neuen Achse oder ein fehlerhafter Wert fällt noch auf die Vorgabe zurück. Zuvor ging in all diesen Fällen die gespeicherte Ausrichtungsabsicht verloren.
• Behoben: Medienbibliotheken älterer Anbieter tauchten im Cockpit nicht auf, weil ihr v2-Provider und -Deskriptor mit falschen Registry-Argumenten registriert wurden.
• Behoben: Über onConsentChange registrierte Verbraucher des Consent-Stores wurden nie benachrichtigt. Der Store veränderte seine State-Ref direkt, beobachtete sie aber ohne deep, sodass der Watcher nie auslöste. Der State wird jetzt neu zugewiesen und der Watcher greift.
• Medienbibliotheks-Anfragen aus dem Asset-Browser des Cockpits laufen jetzt mit dem Standardmarkt und der Standardsprache des Projekts statt mit einem Platzhalter ({ locale: 'en', currency: '' }). Anbieter, die sich auf die leere Währung als Auslöser ihres eigenen Rückfalls verlassen haben, erhalten nun die echte Währung des Standardmarkts.

Hinweise für Entwickler (Breaking Changes)

• Medienbibliotheken: Umstellung von defineMediaLibraryProvider({ name, label, iconSrc, list, upload }) auf defineX.mediaLibrary({ capabilities, list, createUploadTargets, finalizeUploads }) am Orchestr-Builder. Der alte Weg bleibt als Shim funktionsfähig, aber im eingeschränkten Modus. ProjectFrontendContext.mediaLibraries trägt jetzt Deskriptoren { id, label, iconSrc, capabilities }. Frontend Core 0.35.0 ist zugleich die Schwelle für das mediaLibraryV2-Capability-Gate im Cockpit.
• ai-Metadaten: aiDescription() und die ai-descriptions/*.md-Dateien entfernen; Fakten nach studio.description verschieben und ai nur dort setzen, wo eine Aussage nicht in den Picker-Text passt.
• WireClientEnv umgezogen: Der Typ liegt jetzt in @laioutr-core/core-types/orchestr statt in @laioutr-core/orchestr - Handler des orchestr:client-env:modify-Hooks importieren ihn von dort. Zusätzlich sind die clientEnv-Felder der query-templates- und page-index-Request-Schemas als WireClientEnv statt unknown typisiert. Solange sie unknown waren, passierte jedes Objekt die Validierung - auch ein vertippter Schlüssel wie marketid statt marketId, worauf die Anfrage kommentarlos gegen den Standardmarkt auflöste. Ein solcher Schlüssel ist jetzt ein Compile-Fehler, und eine Anfrage mit fehlerhaftem clientEnv wird mit 400 und Angabe des betroffenen Pfads abgelehnt statt später als 500 zu scheitern.
• page-index/locate ist ungeschützt erreichbar: Neben den geschützten Endpunkten unter /api/laioutr/ wird locate zusätzlich ungated unter POST /api/orchestr/page-index/locate bereitgestellt, weil das Frontend die sprachspezifischen Slugs auch bei clientseitiger Navigation auflösen muss und dort niemals den Projekt-Secret halten kann. Der Endpunkt gibt nur die Route-Parameter preis, die die gerenderten hreflang-Tags ohnehin veröffentlichen. Reverse Proxies oder Edge-Regeln, die die API-Pfade der Anwendung einschränken, müssen diesen Pfad zulassen.

Orchestr v0.34.0 - v0.38.1

Highlights

• clientEnv.isPreview ist eine serverseitig geprüfte Tatsache (Breaking): Der Client-Kontext ist jetzt in zwei Typen getrennt. WireClientEnv ist das, was der Browser schickt (isPreview, previewToken, marketId, languageId, custom), und gilt als nicht vertrauenswürdig; locale und currency trägt er nicht mehr - der Server leitet beides aus dem aufgelösten Markt und der aufgelösten Sprache ab. ClientEnv ist das, was Handler erhalten, und entsteht ausschließlich über resolveClientEnv(). Diese Funktion prüft den vorgelegten Vorschau-Token, entfernt ihn, bevor ihn ein Handler sehen kann, und macht aus marketId/languageId vollständige, gegen die i18n-Konfiguration validierte market- und language-Objekte. Damit kann die ausgelieferte Sprache dem gelesenen Markt nie widersprechen, und eine Middleware kann market, language oder isPreview nicht mehr überschreiben. Query-, Link- und Component-Caches sind vorschau-bewusst: Die Schlüssel tragen die Vorschau-Stufe, und während einer Vorschau wird der Cache vollständig umgangen, damit unveröffentlichte Inhalte nie gespeichert und nie an Käuferinnen und Käufer ausgeliefert werden. Neu ist das auto-importierte invalidateOrchestrQueries(), das alle gespeicherten Query-Ergebnisse auf einmal verwirft.
• Fortsetzbare Seitenraum-Aufzählung mit listPagesFrom: Für Aufzählungen, die nicht in einem Durchgang fertig werden, nimmt paginate jetzt einen optionalen startCursor und legt cursor sowie consumedSinceCursor offen - ein Durchlauf kann also melden, wo er stehen geblieben ist. Darauf baut listPagesFrom(token, { take, resumeFrom }) auf: Der zurückgegebene Stream trägt einen endCursor, den der Aufrufer speichert, um später weiterzumachen. Sammelt man die endCursor aller Durchgänge, erhält man unabhängig auslieferbare Shards - genau das, was eine geshardete Sitemap braucht. Die Funktion ist cursor-adressiert und rührt den Chunk-Cache des Page-Index nicht an, sodass kein TTL den Fortschritt über mehrere Besuche hinweg begrenzt. listPages bleibt unverändert. Page-Index-Handler erhalten einen optionalen startCursor; wer ihn ignoriert, behält das heutige Verhalten, aber listPagesFrom wirft dann einen Fehler, statt bei jedem Durchgang stillschweigend wieder bei Eintrag 0 zu beginnen. Beide mitgelieferten Produkt-Connectoren sind fortsetzbar.

Fehlerbehebungen & Verbesserungen

• Die Component-Reflection listet die Resolver einer Entity-Komponente jetzt mit dem effektiven zuerst - also dem, den get() zur Laufzeit tatsächlich auswählt (höchste order, bei Gleichstand der zuletzt registrierte). Zuvor kam die Registrierungsreihenfolge zurück, sodass Werkzeuge, die implementations[0] lesen, um eine Komponente ihrer App zuzuordnen, bei mehreren installierten Apps die falsche App anzeigen konnten.
• Behoben: Ein SSR-500 ([nuxt] instance unavailable) auf datengebundenen Seiten. renderQueryToWire löste die Nuxt-App zum Aufrufzeitpunkt auf, lief dabei aber in verzögert ausgewerteten Computeds außerhalb von Nuxts asynchronem Kontext. Die Nuxt-App wird jetzt bei der Composable-Einrichtung erfasst und durchgereicht.

Hinweise für Entwickler (Breaking Changes)

• @laioutr/logger wurde entfernt: Das Nuxt-Modul wird weder von frontend-core noch von orchestr installiert, und das Paket selbst wird nicht mehr veröffentlicht. Internes Logging läuft jetzt über consola, den Standard-Logger von Nuxt. Das entfernt die pino-Abhängigkeitskette und bereitet eine Observability-Einrichtung auf OpenTelemetry-Basis vor. Für Projekte bedeutet das: Das auto-importierte useLogger() entfällt - stattdessen import { consola } from 'consola' und consola.withTag('my-scope') verwenden. Das globale $logger (globalThis.$logger, event.node.req.log) wird nicht mehr bereitgestellt. Der Konfigurationsschlüssel ltrLogger (logLevelServer, logLevelClient, logForDevelopment, logNitroRequestsVerbose, logNitroResponsesVerbose) wird nicht mehr gelesen und sollte aus der nuxt.config.ts entfernt werden. Die Request-ID-Middleware (pino-http-Request-Logging, x-request-id-Response-Header, Sentry-Request-ID-Tagging) ist ebenfalls entfallen.
• ClientEnv verlangt market und language: Handler lesen den Kontext wie bisher, aber wer einen ClientEnv von Hand baut, muss beide Felder liefern oder den Weg über resolveClientEnv(event, rawClientEnvFromRequest) gehen. ClientEnv.locale und ClientEnv.currency sind abgekündigt: Sie lösen weiterhin auf, sind aber flache Kopien von Feldern, die die aufgelösten Objekte bereits tragen - künftig clientEnv.language.code und clientEnv.market.currency lesen. Hängt die Ausgabe eines Handlers vom Markt ab, gehört ein Skalar wie clientEnv.market.slug in das eigene getKeySuffix; der Standard-Cache-Schlüssel weitet sich bewusst nicht auf den ClientEnv aus, und JSON.stringify(clientEnv) wirft, weil market und language zyklisch sind. Da die Cache-Schlüssel jetzt die Vorschau-Stufe enthalten, sind von früheren Versionen geschriebene Einträge verwaist - nach dem Deployment ist gegen einen geteilten Cache mit einem einmaligen Cold-Cache-Fenster zu rechnen; von Hand geleert werden muss nichts.

Laioutr UI v2.5.0 - v2.8.1

Highlights

• Produktspezifikations-Tabelle: TableProductSpecifications rendert ein Datenblatt auf Basis von BasicTable. Jede Zeile trägt ein label und einen typisierten value (string | number | boolean | Measurement | Money), den die neue Unterkomponente TableProductSpecificationsValue je Sprache formatiert - Zahlen über Intl.NumberFormat, Wahrheitswerte als lokalisiertes Ja/Nein, Measurement über $measurement, Money über $money. Ein optionales sectionName pro Zeile gruppiert die Ausgabe in Abschnitte. Datenseitig steht dahinter die neue kanonische Entity-Komponente ProductSpecifications, modelliert nach schema.org PropertyValue: Jede Zeile führt neben dem lokalisierten Namen einen optionalen wellKnownName aus einer offenen Vokabular-Union (material, weight, dimensions, warranty, countryOfOrigin, …), den das Frontend auf ein lokalisiertes Label mit Icon abbildet. Die Werte bleiben typisiert statt vorformatiert, damit Mengen ihre Einheit und Preise ihre Währung mitführen. Die Komponente ist für die Produktdetailseite gedacht, nicht für Listen.
• Zwei neue Tabellen-Blöcke für Studio: BlockTableOpeningHours und BlockTableProductSpecifications lassen sich jeweils aus einer Query befüllen (die Öffnungszeiten eines Standorts beziehungsweise die specifications eines Produkts) oder mit manuell erfassten Zeilen - umschaltbar über einen Datenquelle-Schalter - und bieten eine outlined/plain-Darstellung. Passend dazu ist OpeningHoursWeeklyTable aus dem UI Kit nach @laioutr-core/ui als TableOpeningHours umgezogen und steht jetzt ebenfalls auf BasicTable.
• Automatisches Inhaltsverzeichnis für Artikel: ArticleDetail kann ein aus den H2-Überschriften des Textkörpers erzeugtes Inhaltsverzeichnis anzeigen - als klebrige Seitenleiste auf dem Desktop, als aufklappbares Akkordeon auf dem Mobilgerät. Steuerbar ist das über das Studio-Flag showTableOfContents an SectionBlogPostDetail, das standardmäßig aktiv ist. Darunter liegen die neue Komponente TableOfContents (nummerierte Navigationsliste mit Scroll-Spy für den aktiven Eintrag) und das Composable useScrollSpy, die auch eigenständig nutzbar sind.
• EU-Widerrufsbutton: WithdrawalForm rendert ein Formular für die Ausübung des gesetzlichen Widerrufsrechts mit genau den drei rechtlich zulässigen Feldern (Name, Bestell- beziehungsweise Vertragsreferenz, E-Mail) samt clientseitiger Validierung. BlockWithdrawalButton macht daraus einen in Studio konfigurierbaren Button, der das Formular in einem Dialog öffnet und die Aktion ecommerce/legal/withdrawal auslöst. Damit der Button dort landen kann, wo er hingehört, haben Footer und SectionFooter einen bottomContent-Slot für die untere Fußzeilen-Reihe bekommen. Ein withdrawal-Locale-Namespace (Deutsch und Englisch) liefert die Standardbeschriftungen und Validierungsmeldungen.
• Glossar-Detailseite: SectionGlossaryDetail ist die Leseansicht für einen einzelnen Glossareintrag. Sie bindet die base- und content-Komponenten der Glossary-Entität und rendert sie über dieselbe ArticleDetail-Komponente wie die Blog-Post-Sektion - mit abgeschaltetem Social-Share.
• Gutschein-Box auf der Produktdetailseite: BlockProductDetailCouponBox ist ein nicht eigenständiger Block für den Inhalts-Slot der Produktdetail-Sektion. Er umschließt CouponBox mit im Editor konfigurierbarem Text, Code, optionalem Rabatt-Badge und Icon und ist fest auf action="copy" gesetzt, sodass Kundinnen und Kunden den Code in die Zwischenablage kopieren. Ein variant-Schalter wechselt zwischen der Standard- und der Promotion-Code-Darstellung.
• Reaktive Dialog- und Toast-Inhalte: openDialog und addToast nehmen ihren Inhalt jetzt auch als Ref oder Getter entgegen (MaybeRefOrGetter<…>). Titel, Beschreibung und weitere Felder eines geöffneten Dialogs oder Toasts bleiben damit reaktiv - openDialog(() => ({ title: t('...'), ... })) rendert bei einem Sprach- oder Prop-Wechsel neu. Ein einfaches Objekt zu übergeben funktioniert unverändert. addToast gibt zusätzlich die id des neuen Toasts zurück, passend zu openDialog.
• Textfarbe für Menüeinträge: MenuBasicItem, MegaMenuItem und NavigationNode tragen jetzt eine optionale textColor, die die aus dem Oberflächen-Ton abgeleitete Beschriftungsfarbe eines Menüeintrags oder Triggers überschreibt. In Studio steht dafür an BlockMenuBasic, BlockMenuSideBySide und BlockMegaMenu ein Farbwähler pro Eintrag bereit; für Einträge aus einer CMS-Query wird er nicht angeboten.
• Neue Layout- und Abstands-Steuerungen: Die Banner-Sektionen (BannerBasic, BannerIntegrated, BannerShowcase) haben unter Design → Layout eine Content Padding-Steuerung erhalten (default / m / s / none), SectionMediaText eine Padding-Steuerung (keine/S/M/L). Ohne gesetzten Wert rendern bestehende Sektionen unverändert. Im UI Kit hat GridFill justify- und align-Props bekommen, Input eine plain-Variante für Felder auf bereits gestalteten Oberflächen, und EmailInputForm reicht eine variant (boxed / plain) durch, damit Newsletter-Anmeldungen in Fußzeilen und Pop-ups bündig auf farbigem Grund sitzen.
• Studio-Picker mit Paket-Tabs: Sektionen und Blöcke tragen jetzt studio.package- und studio.kit-Metadaten, über die der Studio-Picker sie in Paket-Tabs gruppiert und nach Kit filtert. Sämtliche eingebauten Beschreibungen wurden dabei überarbeitet, sodass der Picker-Text die nicht offensichtlichen Fähigkeiten und Datenbindungen einer Komponente mitträgt.

Fehlerbehebungen & Verbesserungen

• Formularfelder innerhalb von <Field> erben jetzt dessen disabled-, readonly-, required- und invalid-Zustand. Zuvor wurden diese stillschweigend verworfen (nur id und errorMessage wurden durchgereicht), sodass ein Feld in <Field disabled> weiterhin bedienbar blieb. Ein Steuerelement ist jetzt in diesem Zustand, wenn entweder sein eigener Prop oder das umgebende <Field> ihn setzt - analog zu nativem <fieldset disabled>.
• Der $unitPrice-Formatter ist jetzt als Auto-Import registriert und damit sowohl als Template-Global als auch aus #imports verfügbar. Zuvor war er nur im Runtime-Plugin verdrahtet, sodass Typprüfungen in Projekten Property '$unitPrice' does not exist meldeten, obwohl er zur Laufzeit funktionierte.
• Behoben: Die Container-Ausrichtung war im Sizing-Modus „Greedy First" gespiegelt. Container bildet seine zweidimensionale alignment jetzt auf die logischen justify/align-Props von GridFill ab, und die Achsen-Umkehr wird in GridFill selbst behandelt.
• Behoben: BlockButton mit Breite „Hug" dehnte sich innerhalb von Media & Text auf die volle Spaltenbreite.
• Behoben: Die Medienspalte von NewsletterRegistration fiel in sich zusammen; das E-Mail-Feld nutzt jetzt die plain-Darstellung.
• Behoben: Gruppeninhalte im AlphabeticalIndex sind jetzt oben ausgerichtet, sodass unterschiedlich hohe Spalten an ihrer Oberkante abschließen.
• Behoben: .location-finder--boxed begrenzt sich ab dem --lg-Breakpoint auf --container-max-width und zentriert sich, statt auf dem Desktop über die volle Breite zu laufen.
• Behoben: LocationFinderMap bündelt vue3-google-map über Vite optimizeDeps vor, womit ESM-Export-Fehler in der Entwicklungsumgebung entfallen.
• Behoben: Das fehlende Vorschaubild für den Produkt-Slider wurde ergänzt, sodass der Studio-Picker jetzt eine Vorschau statt eines toten Bildlinks zeigt.

Hinweise für Entwickler (Breaking Changes)

• DescriptionList → BasicTable: DescriptionList heißt jetzt BasicTable, DescriptionListItem heißt BasicTableRow. BasicTable rendert als semantische Beschreibungsliste (<dl> mit <dt>/<dd>) statt als präsentationale <div>s, und die Beschriftungsspalte ist über die öffentliche Custom-Property --basic-table-label-col überschreibbar. Layout und CSS-Oberfläche (.basic-table-Wurzelklasse, BEM-Klassen) bleiben unverändert.
• OpeningHoursWeeklyTable → TableOpeningHours: Die Komponente ist aus dem UI Kit nach @laioutr-core/ui umgezogen, steht auf BasicTable und hat eine variant (outlined / plain) bekommen. Die Wochentags-Gruppierung ist unverändert. Import künftig aus #ui/components/TableOpeningHours/TableOpeningHours.vue.
• BlogPostDetail → ArticleDetail: Die Komponente wurde umbenannt und zur gemeinsamen Leseansicht hinter der Blog-Post- und der Glossar-Sektion befördert. Einen abwärtskompatiblen Alias gibt es nicht - <LBlogPostDetail> wird zu <LArticleDetail>. Zusätzlich hat ArticleDetail ein optionales showSocialShare (Vorgabe false) für die abschließende SocialShare-Reihe bekommen.
• SectionGlossaryList → SectionGlossaryListing: Der Studio-Komponenten-String hat sich geändert und es wurde keine Datenmigration ausgeliefert - gespeicherte Sektionen müssen neu hinzugefügt werden. Passend dazu heißt der Locale-Namespace jetzt sectionGlossaryListing (Schlüssel sectionGlossaryListing.heading); eigene Locales, die den alten Namespace überschreiben, müssen umbenannt werden.
• ai-Metadaten: Wie unter Frontend Core beschrieben - die freie { label, description }-Form, die ai-descriptions/*.md-Dateien und aiDescription() sind entfallen.

Nicht betroffen: Die Container-Style-Steuerung von SectionLocationFinder ist auf das gemeinsame containerStyleField-Toggle umgestellt worden. Feldname (containerStyle) und gespeicherte Werte ('full-width' | 'boxed') bleiben gleich, die Migration ist datensicher.

CLI v0.4.1

• Die Deployment-Logs folgen jetzt den CLI-Ausgabekonventionen, HTTP-Fehler sind handlungsleitend formuliert und berücksichtigen Timeouts, und die CLI schickt einen versionierten API-User-Agent mit.
• Flags werden auf Kebab-Case umgestellt; die bisherigen camelCase-Schreibweisen bleiben als abgekündigte Aliasse erhalten.

Cockpit (Studio) Juli 2026

Highlights

• Content-Vorschau im Studio: In den Projekteinstellungen lässt sich ein Content-Preview-Token erzeugen; mit dem Befehl „Show Preview Content" zeigt Studio anschließend unveröffentlichte Inhalte an. Neue Projekte bringen ein Token bereits mit, neu ausgestellte Tokens tragen das Präfix pvtk_ (bereits ausgegebene funktionieren unverändert weiter). Ist das im Projekt ausgerollte Frontend Core zu alt, um die Vorschau zu unterstützen, ist der Befehl deaktiviert und ein Tooltip nennt die benötigte Version. Ergänzend führt in den Projekteinstellungen ein „Open Preview"-Link die live ausgelieferte Storefront im Vorschaumodus in einem neuen Tab auf, sobald das Projekt einen bereitgestellten Host hat.
• Präzisere Vorschau-Daten-Auswahl: Die Auswahl der Vorschau-Daten zeigt jetzt Icon und Namen der liefernden App und benennt das vorgeschaute Produkt, statt dessen rohe URL-Parameter anzuzeigen - und zwar sofort nach der Auswahl. Sie verfolgt außerdem, welche Seite gerade in der Vorschau steht: Ein Klick auf einen Link in der Vorschau aktualisiert die Auswahl auf die neue Seite, auch bei Shops, deren Produkt-URLs über mehrere Pfadsegmente laufen.
• Seiten direkt im Link-Picker auswählen: Im Link-Picker lässt sich jetzt eine konkrete Seite auswählen; die manuelle Parametereingabe bleibt daneben bestehen. Die Vorschau- und Link-Seitenauswahl spricht dabei von „Seite" statt wie bisher von „Instanz".
• Sektions-Picker mit Paket-Tabs: „Add a Section" gruppiert die Sektionen jetzt in Paket-Tabs und filtert sie nach Kit.
• Bessere Seitenkomposition durch KI-Agenten: Studio-KI-Agenten bauen vollständigere Seiten, weil sie sich an Kompositionsmustern aus dem Produktivbetrieb orientieren.
• npm-Registry-Login vom Terminal: Die Anmeldung an der npm-Registry funktioniert jetzt per npm login --auth-type=web. Die eigenen Registry-Web-Login-Sitzungen lassen sich in den Sicherheitseinstellungen des Kontos einsehen und widerrufen, und der Anmeldebildschirm der Registry entspricht jetzt dem Erscheinungsbild der App. Die Projekteinstellungen verlinken auf die Organisations-API-Schlüssel für den Registry-Zugriff, abgelaufene API-Schlüssel werden in der Tabelle abgeblendet dargestellt, und der Projekt-Secret-Key lässt sich dort direkt kopieren.
• Medien-Auswahl mit Fokuspunkt für Videos: Der Fokuspunkt-Wähler funktioniert jetzt auch für Videoquellen, nicht mehr nur für Bilder. Die Medienbibliotheks-Auswahl zeigt außerdem das Icon jeder Bibliothek neben ihrem Namen.

Fehlerbehebungen & Verbesserungen

• Behoben: KI-Agenten konnten sich nicht mit dem Studio-MCP-Server verbinden, weil die vom Server angekündigte OAuth-Discovery-URL auf eine nicht existierende Seite zeigte und die Autorisierung damit nie abschließen konnte.
• Behoben: Medienfelder zeigen jetzt klarere Dateiangaben und bleiben über verschiedene Frontend-Versionen hinweg zuverlässig. Uploads aktualisieren sich sofort, fehlgeschlagene Uploads lassen sich erneut versuchen, und SVGs werden sicher gerendert.
• Behoben: SVG-Medienvorschauen wurden auf Containergröße gerendert, statt in sich zusammenzufallen.
• Behoben: Die Dropdowns der Medien-Auswahl blitzten keinen Fokusring mehr auf; Bibliotheken ohne Namen zeigen ihre ID.
• Behoben: Fehlende oder defekte Vorschaubilder in der Sektions- und Block-Auswahl zeigen jetzt einen Platzhalter.
• Behoben: Die Auswahl der dynamischen Datenquelle zeigt das Icon der App, die den jeweiligen Wert tatsächlich liefert - auch wenn mehrere Apps dieselben Daten bereitstellen.
• Behoben: Die Datenquellen-Optionen im Query-Picker richten sich jetzt nach dem in Studio gewählten Markt.
• Behoben: Die Vorschau-Daten folgen jetzt auch Links auf der Seite, die einen Query-String oder akzentuierte Zeichen enthalten.
• Behoben: Das Markt-Domain-Feld zeigte fälschlich ein vorangestelltes „laioutr.com.".
• Behoben: Wer sich über einen Link auf eine bestimmte Seite (etwa eine Studio-URL) anmeldet, landet jetzt auf dieser Seite statt auf einer „Nicht gefunden"-Meldung.

Hinweis für Entwickler (Breaking Change im MCP-Server)

• Das MCP-Tool studio_set_static_prop heißt jetzt studio_set_static_props und schreibt mehrere Props in einem Aufruf. Relevant für alle, die eigene Agenten-Integrationen gegen den Studio-MCP-Server gebaut haben.

Die vollständigen Changelogs mit allen technischen Details findest du unter docs.laioutr.io/getting-started/changelogs.

Weiterführend bei Laioutr

Mehr zur Laioutr-Plattform: Agentic Frontend Management Platform · Composable Visual Page Builder