Laioutr Release News July 2026

July was shaped by content preview: editors can now view unpublished content server-rendered in the real storefront - from generating a token in project settings, through the Studio command, to the safeguards that keep preview pages out of search indexes. Alongside that, the media library was reworked from the ground up and is now connected as an Orchestr integration, with folder navigation, cursor pagination, and direct browser-to-backend upload. Frontend Core learned to enumerate a page type's entire page-space through the new pageIndex handler - the foundation for per-locale hreflang alternates and for sitemaps. In Laioutr UI, product specification and opening-hours tables, an automatic table of contents for articles, and the EU right-of-withdrawal button arrived.

Frontend Core v0.33.1 - v0.38.1

Highlights

• Content preview for unpublished content: Opening a storefront URL with ?preview_token=<token> now shows the unpublished version of the page - server-rendered, not swapped in afterwards in the browser. The token is verified server-side against the project's previewToken with a timing-safe compare, and only that verdict reaches connectors as clientEnv.isPreview. A wrong token does not throw; it simply renders published content. Any response to a request carrying a token - granted or rejected - is sent as private, no-store, which keeps it out of a shared cache such as a CDN. There is a new auto-imported composable, useContentPreview(), returning enabled, status (off / pending / active / rejected) and state; enabled only becomes true once the server has verified the token, so it is safe to use directly with v-if. Two hooks are available: frontend-core:content-preview:resolve-token (a bail hook for sourcing the token from a cookie or header instead of the query parameter) and frontend-core:content-preview:changed (fires after a preview transition, for invalidating your own caches).
• Preview pages are never indexed: PageRenderer forces noindex, nofollow on every render that carries a preview token - whether preview is active, pending, or rejected, and regardless of the page's configured robots value. Preview URLs serve unpublished, secret-gated content and carry the token in the URL, so they must never reach a search index.
• Media libraries as an Orchestr integration (breaking): A media library is now declared with defineX.mediaLibrary(...) on the app's Orchestr builder instead of the standalone defineMediaLibraryProvider factory. Identity (id, label, iconSrc) is derived from the builder's .meta(), and the connector declares its capabilities (search, tags, folders, sorts, upload transfer) explicitly. Browsing uses cursor pagination (MediaQuery → MediaListResult), folders are folded into the single list method (the separate browseFolders method is gone), and upload now offers a staged path directly from browser to backend alongside the proxied one - both returning per-file results, so one failed file no longer sinks the batch. The Shopify connector uploads via staged targets and waits until each file is READY; the Shopware connector can now browse the real media-folder tree. All adapter output is validated at the trust boundary (canonical Zod parse, URL-scheme guard including nested poster and cover images), and dropped items produce a server-side warning. defineMediaLibraryProvider(...) keeps working as a deprecated compatibility shim, though in a degraded mode (no folders, no staged upload, no declared sorts) and with a one-time warning at registration.
• CMS media library over the Laioutr CDN API: The new @laioutr-app/cms media-library connector ships alongside the RcProject.config.cdn container it reads. It implements the new interface against apps/cdn-api - cursor browse with folders, staged upload, and Cloudflare providers for images and video posters on the per-project delivery host. RcCoreConfig gains an optional cdn: { key, deliveryHost }, which the existing config sanitisation keeps from reaching the client.
• Asset origin and AI disclosure on media: Every Media source now carries an optional origin ({ libraryId, externalId? }) recording the producing library and its stable asset id. It is stamped automatically when an asset is picked from a media library, is management-plane only (the renderer never reads it), and is additive - media stored before it existed remain valid. Alongside it, aiDisclosure records whether an asset was fully AI-generated ('generated') or altered by generative AI ('modified'). It is available on images, videos, and audio; a video's poster and an audio's cover carry their own value independently of the parent. Providers should set it only from an authoritative backend signal and omit it otherwise: absent means no disclosure is known, not that the asset is human-made.
• The pageIndex handler: a page type's entire page-space: defineOrchestr.pageIndex({ for, list, search?, count?, locate?, cache?, order? }) gives you one registration per page type that owns that page type's whole page-space. list walks the page-space in stable order and returns one PageIndexEntry per concrete page; the new paginate() helper turns a cursor-paged platform API into exactly that. search answers a search term with a relevance-ordered top-N - optional, because without it the runner scans the first 1000 enumerated entries and matches on title and route params. count supplies a cheap total for sitemaps and pickers, and locate performs a point lookup, reporting a page's route params in every locale it exists in. On the consumer side, the auto-imported server utils listPages(), searchPages(), countPages(), locatePage() and invalidateEntity() are available. Page types without a registration behave exactly as before - providers are never required to implement this.
• hreflang alternates use each locale's own route params: On pages whose slug is translated per locale, the alternate URLs, og:locale:alternate, x-default, and the locale switcher's target were previously built from the current locale's params - pointing at URLs that do not exist in the target locale. Where a page type's pageIndex registration implements locate and reports a complete per-locale map, each locale now gets its own slug, and locales the page does not exist in are omitted from the alternates rather than guessed at. Omission follows only from a complete map: a locate that resolves just the locale it was called in keeps the previous behaviour. The lookup runs alongside the page queries and is bounded by a 2s SSR budget; if it breaches, that render falls back to the old behaviour while still warming the server cache, so the next render is correct. Single-language projects and pages without dynamic params perform no lookup at all.
• ai metadata on sections and blocks (breaking): The ai metadata on a section or block definition is now a typed AiComponentMetadata object with exactly two optional fields: description for agent-facing facts that do not fit the picker-facing text, and examples for a worked slot/block composition on multi-block sections. The previous free-form { label, description } shape, the co-located ai-descriptions/*.md files, and the aiDescription() helper have been removed. Having no ai object is the normal state - studio.description plus the field/slot schema carry the load, and every built-in description has been enriched with the facts that previously lived in ai metadata. The prescriptive fields (useWhen, avoidWhen, constraints, neverWith, pairsWellWith, typicallyFollowedBy, supports) are gone entirely: evals showed they measurably degrade agent page composition.
• DateTime value type: A timezone-qualified ISO 8601 instant (z.iso.datetime({ offset: true })), completing the temporal set next to CalendarDate, Time, and Duration.
• Focal point for videos: Video sources now support a focalPoint, mirroring image sources. The built-in MediaVideo renderer applies it as object-position - per viewport, with center center as the fallback - so the important region stays in frame when the video is cropped by object-fit: cover.
• ClientEnv.domain: The resolved client env now carries the market domain (host, path, language) the current request resolved to. Read this field for a request's canonical host instead of assuming market.defaultDomain. The i18n config check also warns when two domains in the same market use the same language, which makes the resolved domain ambiguous - those languages should be region-qualified (for example de-DE versus de-AT).

Bug Fixes & Improvements

• content_alignment values that fall outside the field's axis-derived set are now healed when resolving render props, instead of being discarded. If a field's axis was changed after the value was stored, the stored value is projected onto the new axis: restricting both to a single axis keeps the matching component (top-left renders as top on a vertical field), and widening pairs the value with a neutral center for the missing axis (top becomes top-center). Only a value with no analog on the new axis, or a malformed value, still clamps to the fallback. Previously all of these silently lost the alignment intent the stored value carried.
• Fixed: legacy media-library providers were missing from Cockpit because their v2 provider and descriptor were registered with the wrong registry arguments.
• Fixed: consent-store consumers registered via onConsentChange never received updates. The store mutated its state ref in place while watching it without deep, so the watcher never fired. Consent updates now reassign the state, triggering the watcher.
• Media-library requests from Cockpit's asset browser now run with the project's default market and language instead of a placeholder ({ locale: 'en', currency: '' }). Providers that relied on the empty currency to trigger their own fallback will now receive the default market's real currency.

Notes for Developers (Breaking Changes)

• Media libraries: Migrate from defineMediaLibraryProvider({ name, label, iconSrc, list, upload }) to defineX.mediaLibrary({ capabilities, list, createUploadTargets, finalizeUploads }) on the Orchestr builder. The old path keeps working as a shim, but in degraded mode. ProjectFrontendContext.mediaLibraries now carries descriptors { id, label, iconSrc, capabilities }. Frontend Core 0.35.0 is also the threshold for Cockpit's mediaLibraryV2 capability gate.
• ai metadata: Remove aiDescription() and the ai-descriptions/*.md files, move the facts into studio.description, and set ai only where a statement does not fit the picker text.
• WireClientEnv moved: The type now lives in @laioutr-core/core-types/orchestr rather than @laioutr-core/orchestr - handlers for the orchestr:client-env:modify hook import it from there. In addition, the clientEnv field of the query-templates and page-index request schemas is typed as WireClientEnv instead of unknown. While it was unknown, any object satisfied the type - including a misspelled key such as marketid for marketId, which meant the request quietly resolved against the default market. Such a key is now a compile error, and a request carrying a malformed clientEnv is rejected with 400 naming the offending path instead of failing further in as a 500.
• page-index/locate is served ungated: Alongside the secret-protected endpoints under /api/laioutr/, locate is also served at POST /api/orchestr/page-index/locate, because the frontend must resolve per-locale slugs during client-side navigation too, where it can never hold the project secret. The endpoint discloses only the route params the rendered hreflang tags publish anyway. Reverse proxies or edge rules that restrict the app's API paths must allow it.

Orchestr v0.34.0 - v0.38.1

Highlights

• clientEnv.isPreview is a server-verified fact (breaking): The client env is now two types. WireClientEnv is what the browser sends (isPreview, previewToken, marketId, languageId, custom) and is untrusted; it no longer carries locale or currency - the server derives both from the market and language it resolves. ClientEnv is what handlers receive, and it is produced only by resolveClientEnv(). That function verifies the presented preview token, drops it before any handler can see it, and turns marketId/languageId into full market and language objects validated against the project's i18n config - so the language a handler serves can never disagree with the market it reads, and a middleware can no longer override market, language, or isPreview. Query, link, and component caches are preview-aware: keys carry the preview stage, and caching is bypassed entirely while previewing, so unpublished content is never stored and can never be served to a shopper. The new auto-imported invalidateOrchestrQueries() drops every stored query result at once.
• Resumable page-space enumeration with listPagesFrom: For enumerations that cannot finish in one request, paginate now takes an optional startCursor and exposes cursor and consumedSinceCursor, so a walk can report where it stopped. listPagesFrom(token, { take, resumeFrom }) builds on that: the returned stream carries an endCursor the caller persists to continue later. Collecting each pass's endCursor yields independently servable shards - exactly what a sharded sitemap needs. It is cursor-addressed and never touches the page-index chunk cache, so no TTL bounds a consumer's progress across visits. listPages is unchanged. Page-index handlers receive an optional startCursor; ignoring it keeps today's behaviour, but listPagesFrom then throws rather than silently restarting at entry 0 on every pass. Both shipped product connectors are resumable.

Bug Fixes & Improvements

• Component reflection now lists an entity component's resolvers with the effective one first - the one get() actually selects at runtime (highest order, last-registered on ties). Previously they came back in registration order, so tools reading implementations[0] to attribute a component to its providing app could show the wrong app when several installed apps resolve the same component.
• Fixed: an SSR 500 ([nuxt] instance unavailable) on data-bound pages. renderQueryToWire resolved the Nuxt app at call time, but ran inside lazily-evaluated computeds outside Nuxt's async context. The Nuxt app is now captured during composable setup and threaded through.

Notes for Developers (Breaking Changes)

• @laioutr/logger has been removed: The Nuxt module is no longer installed by frontend-core or orchestr, and the package itself is no longer published. Internal logging now goes through consola, Nuxt's standard logger. This removes the pino dependency chain and prepares for an OpenTelemetry-based observability setup. For your project this means: the auto-imported useLogger() is gone - use import { consola } from 'consola' and consola.withTag('my-scope') instead. The $logger global (globalThis.$logger, event.node.req.log) is no longer provided. The ltrLogger config key (logLevelServer, logLevelClient, logForDevelopment, logNitroRequestsVerbose, logNitroResponsesVerbose) is no longer read and should be removed from your nuxt.config.ts. Request-id middleware (pino-http request logging, the x-request-id response header, Sentry request-id tagging) is no longer included.
• ClientEnv requires market and language: Handlers read the context as before, but anything building a ClientEnv by hand must supply both fields or go through resolveClientEnv(event, rawClientEnvFromRequest). ClientEnv.locale and ClientEnv.currency are deprecated: they keep resolving, but they are flat copies of fields the resolved objects already carry - read clientEnv.language.code and clientEnv.market.currency instead. If a handler's output varies by market, append a scalar such as clientEnv.market.slug in your own getKeySuffix; the default cache key deliberately does not widen with ClientEnv, and JSON.stringify(clientEnv) throws because market and language are cyclic. Because cache keys now include the preview stage, entries written by earlier versions are orphaned - expect one cold-cache window against a shared cache after deploying. Nothing has to be flushed by hand.

Laioutr UI v2.5.0 - v2.8.1

Highlights

• Product specifications table: TableProductSpecifications renders a specification sheet built on BasicTable. Each row carries a label and a typed value (string | number | boolean | Measurement | Money) that the new TableProductSpecificationsValue subcomponent formats per locale - numbers via Intl.NumberFormat, booleans as localized Yes/No, Measurement via $measurement, Money via $money. An optional per-row sectionName groups the output into sections. Behind it sits the new canonical entity component ProductSpecifications, modelled on schema.org PropertyValue: alongside the locale-resolved name, each row can carry a wellKnownName from an open vocabulary (material, weight, dimensions, warranty, countryOfOrigin, …) that the frontend maps to a localized label and icon. Values stay typed rather than pre-formatted, so quantities carry their unit and prices their currency. The component is intended for the product detail page, not for listings.
• Two new table blocks for Studio: BlockTableOpeningHours and BlockTableProductSpecifications can each be filled from a query (a Location's opening hours, a Product's specifications) or with manually entered rows - switchable via a Data Source toggle - and offer an outlined / plain presentation. Alongside them, OpeningHoursWeeklyTable moved out of UI Kit into @laioutr-core/ui as TableOpeningHours and now builds on BasicTable as well.
• Automatic table of contents for articles: ArticleDetail can show a table of contents generated from the body's H2 headings - a sticky sidebar on desktop, a collapsible accordion on mobile. It is controlled by the showTableOfContents Studio flag on SectionBlogPostDetail, which defaults to on. Underneath sit the new TableOfContents component (a numbered nav list with scroll-spy active-item tracking) and the useScrollSpy composable, both usable on their own.
• EU right-of-withdrawal button: WithdrawalForm renders a form for exercising the statutory right of withdrawal with exactly the three legally permitted fields (name, order or contract reference, email) plus client-side validation. BlockWithdrawalButton turns that into a Studio-configurable button that opens the form in a dialog and dispatches the ecommerce/legal/withdrawal action. So the button can sit where it belongs, Footer and SectionFooter gained a bottomContent slot for the footer's bottom row. A withdrawal locale namespace (English and German) supplies the default labels and validation messages.
• Glossary detail page: SectionGlossaryDetail is the reading view for a single glossary entry. It binds the Glossary entity's base and content components and renders them through the same ArticleDetail component as the blog post section, with social share off.
• Coupon box on the product detail page: BlockProductDetailCouponBox is a non-standalone block for the Product Detail section's content slot. It wraps CouponBox with editor-configurable text, code, optional discount badge, and icon, and hard-wires action="copy" so shoppers copy the code to the clipboard. A variant toggle switches between the default and promotion-code presentations.
• Reactive dialog and toast content: openDialog and addToast now accept their content as a ref or getter (MaybeRefOrGetter<…>). A dialog's or toast's title, description, and other fields stay reactive after it opens - openDialog(() => ({ title: t('...'), ... })) re-renders on a locale or prop change. Passing a plain object works exactly as before. addToast additionally returns the new toast's id, matching openDialog.
• Text color for menu items: MenuBasicItem, MegaMenuItem, and NavigationNode now carry an optional textColor that overrides the surface-tone label color of a top-level menu item or trigger. In Studio, BlockMenuBasic, BlockMenuSideBySide, and BlockMegaMenu expose a per-item color picker; items driven by a CMS query do not.
• New layout and spacing controls: The banner sections (BannerBasic, BannerIntegrated, BannerShowcase) gained a Content Padding control under Design → Layout (default / m / s / none), and SectionMediaText a Padding control (none/S/M/L). With no value set, existing sections render unchanged. In UI Kit, GridFill gained justify and align props, Input a plain variant for fields that sit on an already-styled surface, and EmailInputForm forwards a variant (boxed / plain) so footer and popup signups sit flush on a colored surface.
• Studio picker with package tabs: Sections and blocks now carry studio.package and studio.kit metadata, which the Studio picker uses to group them into package tabs and filter them by kit. Every built-in description was reviewed in the process, so the picker text now carries a component's non-obvious capabilities and data-binding facts.

Bug Fixes & Improvements

• Form inputs placed inside <Field> now inherit its disabled, readonly, required, and invalid state. Previously these were silently dropped (only id and errorMessage propagated), so a control inside <Field disabled> stayed enabled. A control is now in that state if either its own prop or the surrounding <Field> declares it, matching native <fieldset disabled>.
• The $unitPrice formatter is now registered as an auto-import and is available both as a template global and from #imports. Previously it was only wired into the runtime plugin, so consumer typechecks reported Property '$unitPrice' does not exist even though it worked at runtime.
• Fixed: Container alignment was mirrored under the "Greedy First" sizing mode. Container now maps its 2D alignment onto GridFill's logical justify / align props, and the axis-reversal handling moved into GridFill itself.
• Fixed: BlockButton set to Hug width stretched to the full column width inside Media & Text.
• Fixed: the NewsletterRegistration media column collapsed; its email field now uses the plain Input styling.
• Fixed: AlphabeticalIndex group content is now top-aligned, so columns of uneven height line up along their top edge.
• Fixed: .location-finder--boxed now clamps to --container-max-width and centres itself from the --lg breakpoint up, instead of stretching full-width on desktop.
• Fixed: LocationFinderMap pre-bundles vue3-google-map via Vite optimizeDeps, resolving ESM export failures in dev.
• Fixed: the missing Product Slider preview image was added, so the Studio picker shows a preview instead of a broken link.

Notes for Developers (Breaking Changes)

• DescriptionList → BasicTable: DescriptionList is now BasicTable and DescriptionListItem is now BasicTableRow. BasicTable renders as a semantic description list (<dl> with <dt>/<dd> rows) instead of presentational <div>s, and the label column is overridable via the public --basic-table-label-col custom property. The layout and CSS surface (.basic-table root class, BEM classes) are unchanged.
• OpeningHoursWeeklyTable → TableOpeningHours: The component moved out of UI Kit into @laioutr-core/ui, builds on BasicTable, and gained an outlined / plain variant. Its weekday-grouping behavior is unchanged. Import it from #ui/components/TableOpeningHours/TableOpeningHours.vue.
• BlogPostDetail → ArticleDetail: The component was renamed and promoted to the shared reading view behind both the Blog Post and Glossary sections. There is no backwards-compatible alias - <LBlogPostDetail> becomes <LArticleDetail>. ArticleDetail also gained an optional showSocialShare prop (default false) for the trailing SocialShare row.
• SectionGlossaryList → SectionGlossaryListing: The Studio component string changed and no data migration shipped - stored sections must be re-added. The locale namespace was renamed to match (sectionGlossaryListing, key sectionGlossaryListing.heading); custom locales overriding the old namespace must be renamed.
• ai metadata: As described under Frontend Core - the free-form { label, description } shape, the ai-descriptions/*.md files, and aiDescription() are gone.

Not affected: SectionLocationFinder's container-style control migrated to the shared containerStyleField toggle. The field name (containerStyle) and stored values ('full-width' | 'boxed') are unchanged, so the migration is data-safe.

CLI v0.4.1

• Deployment logs now follow the CLI output conventions, HTTP errors are phrased actionably and account for timeouts, and the CLI sends a versioned API user agent.
• Flags move to kebab-case; the previous camelCase spellings remain as deprecated aliases.

Cockpit (Studio) July 2026

Highlights

• Content preview in Studio: You can generate a content preview token in project settings, then use the "Show Preview Content" command to see unpublished content in Studio. New projects come with a token already generated, and newly issued tokens carry a pvtk_ prefix (already-issued tokens keep working). If the frontend-core deployed in the project is too old to honour preview, the command is disabled and a tooltip names the required version. Project settings also gained an "Open Preview" link that opens the live storefront in content-preview mode in a new tab, shown once the project has a deployed host.
• More precise preview data selection: The Preview Data selector now shows the source app's icon and name and names the product being previewed instead of showing its raw URL parameters - immediately on selection. It also tracks which page is currently in preview: clicking a link inside the preview updates the selector to that page, including on stores whose product URLs span several path segments.
• Pick a page directly in the link picker: The link picker now lets you pick a concrete page, with manual parameter entry still available alongside it. The preview and link page pickers now say "page" rather than "instance".
• Section picker with package tabs: "Add a Section" now groups sections into package tabs and filters them by kit.
• Better page composition by AI agents: Studio AI agents build more complete pages, guided by composition patterns drawn from production.
• npm registry login from the terminal: You can now log in to the npm registry with npm login --auth-type=web. Your registry web-login sessions can be viewed and revoked in account security settings, and the registry login screen now matches the app's sign-in look. Project settings link to the organization API keys for registry access, expired API keys are dimmed in the table, and the project secret key can be copied there directly.
• Media picking with a focal point for videos: The focal-point picker now works for video sources, not just images. The media library picker also shows each library's icon next to its name.

Bug Fixes & Improvements

• Fixed: AI agents could not connect to the Studio MCP server, because the OAuth discovery URL the server advertised pointed at a page that did not exist, so authorization could never complete.
• Fixed: media fields now show clearer file details and remain reliable across frontend versions. Uploads refresh immediately, failed uploads can be retried, and SVGs render safely.
• Fixed: SVG media previews now render at their container size instead of collapsing.
• Fixed: media picker dropdowns no longer flash a focus ring; nameless libraries show their id.
• Fixed: missing or broken preview images in the section and block pickers now show a placeholder.
• Fixed: the dynamic data source picker now shows the icon of the app that actually provides each value, even when multiple apps provide the same data.
• Fixed: data-source options in the query picker now match the market selected in Studio.
• Fixed: preview data now follows on-page links that carry a query string or an accented URL.
• Fixed: the market domain field no longer shows a misleading "laioutr.com." prefix.
• Fixed: logging in from a link to a specific page (such as a Studio URL) now takes you to that page instead of showing a "not found" error.

Note for Developers (Breaking Change in the MCP Server)

• The MCP tool studio_set_static_prop is now studio_set_static_props and writes several props in a single call. Relevant to anyone who has built their own agent integrations against the Studio MCP server.

Related at Laioutr

More on the Laioutr platform: Agentic Frontend Management Platform · Composable Visual Page Builder