@alpaca-headless/dynamic-renderings 1.0.4694

package/dist/next/request.js

@@ -0,0 +1,33 @@
+import "server-only";
+import { headers } from "next/headers.js";
+import { getApiHeaders } from "@alpaca-headless/alpaca-headless-nextjs";
+import { normalizeRouteSearchParams, splitProxyPrefix } from "./prefix.js";
+export { normalizeRouteSearchParams, splitProxyPrefix };
+/**
+ * Step 4 alone: the CM identity of this request. In a sealed request (the config's requestAuth
+ * recognised it) that is exactly the headers requestAuth returned, and no cookie; otherwise the
+ * forwarded Sitecore credentials. For heads that resolve their route in a cached function and
+ * need the identity there; readRequest() uses the same function. Reading request headers also
+ * opts the route out of static rendering.
+ */
+export async function requestIdentity(config) {
+    const auth = config.requestAuth?.(await headers()) ?? null;
+    if (auth)
+        return { identity: { apiKey: config.apiKey, headers: new Headers(auth.headers) }, sealed: true };
+    return { identity: { apiKey: config.apiKey, headers: await getApiHeaders() }, sealed: false };
+}
+/** Splits the proxy prefix, applies the search-param aliases, builds the CM identity and decides edit mode. */
+export async function readRequest(config, params, searchParams) {
+    const { route, prefix } = splitProxyPrefix((await params).path);
+    const normalized = normalizeRouteSearchParams(await searchParams);
+    const { identity, sealed } = await requestIdentity(config);
+    if (sealed) {
+        normalized.mode = "preview";
+        normalized.sc_mode = "preview";
+    }
+    const adapted = config.requestAdapter?.((await params).path, normalized);
+    const editing = normalized.mode === "edit";
+    const request = { route, prefix, searchParams: normalized, identity, editorFrame: editing, editing, ...adapted, sealed };
+    // A sealed request is never an editor's frame, whatever the adapter reads from its URL.
+    return sealed ? { ...request, editing: false, editorFrame: false } : request;
+}

package/dist/next/routes.d.ts

@@ -0,0 +1,16 @@
+import "server-only";
+import type { DynamicRenderingsConfig } from "../server/config.js";
+type Params<T> = {
+    params: Promise<T>;
+};
+/** src/app/api/alpaca/renderings/build/route.ts */
+export declare function buildRoute(config: DynamicRenderingsConfig): {
+    POST: (request: Request) => Promise<Response>;
+};
+/** src/app/api/alpaca/renderings/client/[file]/route.ts (the rendering id comes in the query) */
+export declare function clientRoute(config: DynamicRenderingsConfig): {
+    GET: (request: Request, { params }: Params<{
+        file: string;
+    }>) => Promise<Response>;
+};
+export {};

package/dist/next/routes.js

@@ -0,0 +1,15 @@
+import "server-only";
+import { handleBuild } from "../handlers/build.js";
+import { handleClientBundle } from "../handlers/client.js";
+/** src/app/api/alpaca/renderings/build/route.ts */
+export function buildRoute(config) {
+    return {
+        POST: (request) => handleBuild(config, request),
+    };
+}
+/** src/app/api/alpaca/renderings/client/[file]/route.ts (the rendering id comes in the query) */
+export function clientRoute(config) {
+    return {
+        GET: async (request, { params }) => handleClientBundle(config, request, (await params).file),
+    };
+}

package/dist/next/theme.d.ts

@@ -0,0 +1,8 @@
+import "server-only";
+import { type ThemeSource } from "../server/config.js";
+/**
+ * The head's theme file, relative to the working directory of the Next server (the project in
+ * development, the standalone directory in production). withDynamicRenderings traces
+ * src/app/**\/theme.css into standalone output; pass `themeFile` there for another location.
+ */
+export declare function nextThemeFile(relativePath: string): ThemeSource;

package/dist/next/theme.js

@@ -0,0 +1,26 @@
+import "server-only";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { ThemeUnavailableError } from "../server/config.js";
+/**
+ * The head's theme file, relative to the working directory of the Next server (the project in
+ * development, the standalone directory in production). withDynamicRenderings traces
+ * src/app/**\/theme.css into standalone output; pass `themeFile` there for another location.
+ */
+export function nextThemeFile(relativePath) {
+    return {
+        describe: relativePath,
+        async load() {
+            const full = path.join(/*turbopackIgnore: true*/ process.cwd(), relativePath);
+            try {
+                return await readFile(full, "utf8");
+            }
+            catch (err) {
+                const code = err?.code;
+                throw new ThemeUnavailableError(code === "ENOENT"
+                    ? `theme file not found at ${full}`
+                    : `theme file at ${full} could not be read (${code ?? (err instanceof Error ? err.message : String(err))})`);
+            }
+        },
+    };
+}

package/dist/protocol/index.d.ts

@@ -0,0 +1,3 @@
+export { protocol } from "./protocol.js";
+export type { Protocol, ProtocolLimits } from "./protocol.js";
+export type * from "./types.js";

package/dist/protocol/index.js

@@ -0,0 +1,2 @@
+// Plain module: no React, no server-only. The engine and next.config.js may import it.
+export { protocol } from "./protocol.js";

package/dist/protocol/protocol.d.ts

@@ -0,0 +1,2 @@
+export { protocol } from "@alpaca-headless/dynamic-renderings-engine/protocol";
+export type { Protocol, ProtocolLimits } from "@alpaca-headless/dynamic-renderings-engine/protocol";

package/dist/protocol/protocol.js

@@ -0,0 +1 @@
+export { protocol } from "@alpaca-headless/dynamic-renderings-engine/protocol";

package/dist/protocol/types.d.ts

@@ -0,0 +1 @@
+export type * from "@alpaca-headless/dynamic-renderings-engine/protocol";

package/dist/protocol/types.js

@@ -0,0 +1 @@
+export {};

package/dist/react/DynamicRendering.d.ts

@@ -0,0 +1,32 @@
+import "server-only";
+import { type ReactNode } from "react";
+import type { PreparedComponent } from "../protocol/types.js";
+import { type DynamicPageState } from "../server/page.js";
+import type { DynamicRenderingsConfig } from "../server/config.js";
+import { type ConvertContext, type TrustedComponents } from "./to-react.js";
+type PlaceholderProps = {
+    component: any;
+    context: any;
+    index?: number;
+    count?: number;
+};
+export declare function ErrorBox({ title, detail }: {
+    title: string;
+    detail?: string;
+}): import("react").JSX.Element;
+/**
+ * The URL of a rendering's browser bundle. It names everything needed to build the bundle again
+ * after a cache miss: its client code's hash and the compiler format in the path, the rendering
+ * and the database in the query, plus the page in a sealed request (the CM then checks the
+ * preview's access to that page). The path stays short: behind the sealed preview's proxy prefix,
+ * which holds a token, it must fit the CM's URL length limit; the query has its own.
+ */
+export declare function clientBundleUrl(state: Pick<DynamicPageState, "prefix" | "database" | "sealed" | "pageId">, renderingId: string, clientHash: string): string;
+/** Where this rendering's client code may run on this page, if anywhere. */
+export declare function clientLoading(state: DynamicPageState, prepared: PreparedComponent, editing: boolean): ConvertContext["client"];
+/**
+ * Returns the component the SDK's Placeholder mounts for every component whose layout JSON
+ * carries a `rendering` reference. It reads the result prepared for this page.
+ */
+export declare function createDynamicComponent(config: DynamicRenderingsConfig, state: DynamicPageState, trusted: TrustedComponents): ({ component, context }: PlaceholderProps) => ReactNode;
+export {};

package/dist/react/DynamicRendering.js

@@ -0,0 +1,88 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "server-only";
+import { createElement } from "react";
+import { protocol } from "../protocol/protocol.js";
+import { sanitizeTree } from "../server/sanitize-tree.js";
+import { normalizeId } from "../server/page.js";
+import { convertTree } from "./to-react.js";
+/* eslint-enable @typescript-eslint/no-explicit-any */
+export function ErrorBox({ title, detail }) {
+    return (_jsxs("div", { role: "note", style: {
+            border: "1px dashed #c2410c",
+            background: "#fff7ed",
+            color: "#7c2d12",
+            padding: "12px 16px",
+            margin: "8px 0",
+            fontFamily: "ui-sans-serif, system-ui, sans-serif",
+            fontSize: 13,
+            lineHeight: 1.45,
+        }, children: [_jsx("strong", { style: { display: "block" }, children: title }), detail ? _jsx("span", { style: { whiteSpace: "pre-wrap" }, children: detail.slice(0, 1200) }) : null] }));
+}
+/**
+ * The URL of a rendering's browser bundle. It names everything needed to build the bundle again
+ * after a cache miss: its client code's hash and the compiler format in the path, the rendering
+ * and the database in the query, plus the page in a sealed request (the CM then checks the
+ * preview's access to that page). The path stays short: behind the sealed preview's proxy prefix,
+ * which holds a token, it must fit the CM's URL length limit; the query has its own.
+ */
+export function clientBundleUrl(state, renderingId, clientHash) {
+    const query = new URLSearchParams({ id: renderingId });
+    if (state.database)
+        query.set("database", state.database);
+    if (state.sealed && state.pageId)
+        query.set("page", state.pageId);
+    return `${state.prefix}/api/alpaca/renderings/client/${clientHash}-${protocol.compiledFormat}.js?${query}`;
+}
+/** Where this rendering's client code may run on this page, if anywhere. */
+export function clientLoading(state, prepared, editing) {
+    if (editing || state.clientMode === "edit" || !prepared.clientHash)
+        return undefined;
+    if (state.clientMode === "sealed")
+        return { mode: "sealed", src: clientBundleUrl(state, prepared.renderingId, prepared.clientHash) };
+    return prepared.approved ? { mode: "approved", src: clientBundleUrl(state, prepared.renderingId, prepared.clientHash) } : undefined;
+}
+/**
+ * Returns the component the SDK's Placeholder mounts for every component whose layout JSON
+ * carries a `rendering` reference. It reads the result prepared for this page.
+ */
+export function createDynamicComponent(config, state, trusted) {
+    return function DynamicComponent({ component, context }) {
+        const componentId = normalizeId(String(component?.id ?? ""));
+        const prepared = state.components.get(componentId);
+        const editing = Boolean(context?.isEditing);
+        try {
+            if (!prepared) {
+                return editing ? _jsx(ErrorBox, { title: "Dynamic rendering not prepared", detail: "Reload the page." }) : null;
+            }
+            if (prepared.preparing) {
+                return editing ? _jsx(ErrorBox, { title: "Being prepared", detail: prepared.error }) : null;
+            }
+            if (prepared.error || !prepared.result || !prepared.buildId) {
+                return editing ? _jsx(ErrorBox, { title: "This component cannot be shown", detail: prepared.error }) : null;
+            }
+            const result = prepared.result;
+            if (!result.ok) {
+                return editing ? _jsx(ErrorBox, { title: `Rendering failed (${result.code})`, detail: result.message }) : null;
+            }
+            const tree = sanitizeTree(result.tree, prepared.renderingId, { mediaHosts: config.mediaHosts, limits: config.limits });
+            const body = convertTree(tree, {
+                component: { ...component, id: componentId },
+                renderContext: context,
+                nonce: state.nonce,
+                editor: config.editor,
+                renderingId: prepared.renderingId,
+                buildId: prepared.buildId,
+                trusted,
+                client: clientLoading(state, prepared, editing),
+            });
+            return (_jsxs(_Fragment, { children: [prepared.css
+                        ? createElement("style", { href: `rendering-${prepared.buildId}`, precedence: "dynamic-renderings" }, prepared.css)
+                        : null, _jsxs("div", { "data-parhelia-rendering": prepared.renderingId, ...(editing && config.editor ? { [config.editor.nonceAttribute]: state.nonce } : {}), style: { contain: "layout paint", isolation: "isolate" }, children: [editing && prepared.cssRejected ? _jsx(ErrorBox, { title: "Styles were not applied", detail: prepared.cssRejected }) : null, body] })] }));
+        }
+        catch (err) {
+            // A server-component error would reach the client boundary with its message redacted in
+            // production; catching here keeps the explanation visible to editors.
+            return editing ? _jsx(ErrorBox, { title: "Rendering failed", detail: err instanceof Error ? err.message : String(err) }) : null;
+        }
+    };
+}

package/dist/react/DynamicTheme.d.ts

@@ -0,0 +1,5 @@
+import "server-only";
+import { type ReactNode } from "react";
+import type { DynamicPageState } from "../server/page.js";
+/** The tenant's theme tokens as a :root rule, hoisted into <head> once per theme. */
+export declare function renderTheme(state: DynamicPageState, editing: boolean): ReactNode;

package/dist/react/DynamicTheme.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "server-only";
+import { createElement } from "react";
+import { ErrorBox } from "./DynamicRendering.js";
+/** The tenant's theme tokens as a :root rule, hoisted into <head> once per theme. */
+export function renderTheme(state, editing) {
+    const theme = state.theme;
+    if (!theme)
+        return null;
+    if (!theme.css)
+        return editing && theme.rejected ? _jsx(ErrorBox, { title: "The site theme was not applied", detail: theme.rejected }) : null;
+    return createElement("style", { href: `theme-${theme.hash}`, precedence: "dynamic-theme" }, theme.css);
+}

package/dist/react/RichText.d.ts

@@ -0,0 +1,7 @@
+import { RichText as AlpacaRichText } from "@alpaca-headless/alpaca-headless";
+import type { ComponentProps } from "react";
+/**
+ * The SDK RichText with the field HTML sanitized on the server first (see
+ * rich-text/sanitizeRichText). Rich-text fields of dynamic renderings render through this.
+ */
+export declare function RichText({ field, ...props }: ComponentProps<typeof AlpacaRichText>): import("react").JSX.Element | null;

package/dist/react/RichText.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RichText as AlpacaRichText } from "@alpaca-headless/alpaca-headless";
+import { sanitizeRichTextValue } from "../rich-text/sanitizeRichText.js";
+// The editor binds inline editing to these; the SDK applies caller props after
+// them, so they are taken from the field only, never from the caller.
+const EDITOR_OWNED_PROPS = new Set([
+    "data-fieldid",
+    "data-itemid",
+    "data-language",
+    "data-version",
+    "data-is-richtext",
+    "contentEditable",
+    "dangerouslySetInnerHTML",
+]);
+/**
+ * The SDK RichText with the field HTML sanitized on the server first (see
+ * rich-text/sanitizeRichText). Rich-text fields of dynamic renderings render through this.
+ */
+export function RichText({ field, ...props }) {
+    if (!field)
+        return null;
+    // The SDK renders jsonValue when present; sanitize the value it would render.
+    const rendered = field.jsonValue ?? field;
+    const safeField = {
+        ...rendered,
+        jsonValue: undefined,
+        value: sanitizeRichTextValue(rendered.value),
+    };
+    const safeProps = Object.fromEntries(Object.entries(props).filter(([name]) => !EDITOR_OWNED_PROPS.has(name)));
+    return _jsx(AlpacaRichText, { ...safeProps, field: safeField });
+}

package/dist/react/index.d.ts

@@ -0,0 +1,9 @@
+import "server-only";
+export { createRenderer } from "./renderer.js";
+export type { Renderer, AttachedPage, DynamicRequestInfo } from "./renderer.js";
+export { defaultTrustedComponents } from "./trusted.js";
+export { convertTree } from "./to-react.js";
+export type { TrustedComponents, ConvertContext } from "./to-react.js";
+export { createDynamicComponent, clientBundleUrl, clientLoading, ErrorBox } from "./DynamicRendering.js";
+export { renderTheme } from "./DynamicTheme.js";
+export { RichText } from "./RichText.js";

package/dist/react/index.js

@@ -0,0 +1,8 @@
+// Server components (React Server Components): render trees become React elements here.
+import "server-only";
+export { createRenderer } from "./renderer.js";
+export { defaultTrustedComponents } from "./trusted.js";
+export { convertTree } from "./to-react.js";
+export { createDynamicComponent, clientBundleUrl, clientLoading, ErrorBox } from "./DynamicRendering.js";
+export { renderTheme } from "./DynamicTheme.js";
+export { RichText } from "./RichText.js";

package/dist/react/renderer.d.ts

@@ -0,0 +1,45 @@
+import "server-only";
+import { type ReactNode } from "react";
+import type { BackendIdentity } from "../server/backend.js";
+import type { DynamicRenderingsConfig } from "../server/config.js";
+import { type DynamicPageState, type LayoutPage } from "../server/page.js";
+import type { TrustedComponents } from "./to-react.js";
+/** What the page learned before the layout call (see readRequest in the Next adapter). */
+export type DynamicRequestInfo = {
+    identity: BackendIdentity;
+    prefix: string;
+    /** Whether an editor owns this frame. */
+    editorFrame: boolean;
+    /** The request came through an editor's isolated preview (the config's requestAuth). */
+    sealed?: boolean;
+};
+type RenderContextLike = {
+    mode?: string;
+    isEditing?: boolean;
+    isPreview?: boolean;
+    resolveRendering?: unknown;
+    page?: unknown;
+} & Record<string, any>;
+export type AttachedPage<C, P> = {
+    /** The page to render, after the config's transformPage. */
+    page: P;
+    /** The render context to render with: it resolves dynamic components. */
+    context: C;
+    state: DynamicPageState;
+    /**
+     * Rendered once by the page: the client-code hint for the editor (preview only) and, on pages
+     * that load client code, the runtime its bundles take React from.
+     */
+    head: ReactNode;
+};
+export type Renderer = {
+    /** Steps 6 to 9 of the page integration: prepares every dynamic rendering on the page and plugs the resolver into the context. */
+    attach<C extends RenderContextLike, P extends LayoutPage>(context: C, page: P, request: DynamicRequestInfo): Promise<AttachedPage<C, P>>;
+    /** Step 10: the page body, preceded by the tenant's theme tokens. */
+    frame<C extends RenderContextLike, P extends LayoutPage>(attached: AttachedPage<C, P>, body: ReactNode): ReactNode;
+    readonly trusted: TrustedComponents;
+};
+export declare function createRenderer(config: DynamicRenderingsConfig, options?: {
+    components?: Partial<TrustedComponents>;
+}): Renderer;
+export {};

package/dist/react/renderer.js

@@ -0,0 +1,41 @@
+import "server-only";
+import { createElement, Fragment } from "react";
+import { prepareDynamicPage } from "../server/page.js";
+import { ClientIslandRuntime } from "../client/ClientIslandRuntime.js";
+import { clientLoading, createDynamicComponent } from "./DynamicRendering.js";
+import { renderTheme } from "./DynamicTheme.js";
+import { defaultTrustedComponents } from "./trusted.js";
+export function createRenderer(config, options = {}) {
+    const trusted = { ...defaultTrustedComponents, ...options.components };
+    return {
+        trusted,
+        async attach(context, page, request) {
+            const sealed = Boolean(request.sealed);
+            const transformed = config.transformPage ? config.transformPage(page, { sealed, prefix: request.prefix }) : page;
+            const baseContext = transformed === page ? context : { ...context, page: transformed };
+            const state = await prepareDynamicPage(config, {
+                page: transformed,
+                mode: String(baseContext.mode ?? "normal"),
+                identity: request.identity,
+                prefix: request.prefix,
+                sealed,
+            });
+            const DynamicComponent = createDynamicComponent(config, state, trusted);
+            const resolved = { ...baseContext, resolveRendering: async () => DynamicComponent };
+            const editing = Boolean(resolved.isEditing);
+            const hint = config.editor?.clientCodeHintAttribute;
+            const loadsBundles = [...state.components.values()].some((prepared) => clientLoading(state, prepared, editing));
+            const head = createElement(Fragment, null, 
+            // Tells the editor that this preview has renderings with client code, so it can offer to
+            // run them in its isolated preview. The sanitizer keeps renderings from forging it.
+            hint && state.preview && !state.sealed && !editing && state.clientCodeRenderings.length
+                ? createElement("script", { type: "application/json", [hint]: state.clientCodeRenderings.join(",") })
+                : null, loadsBundles ? createElement(ClientIslandRuntime) : null);
+            return { page: transformed, context: resolved, state, head };
+        },
+        frame(attached, body) {
+            const editing = Boolean(attached.context?.isEditing);
+            return createElement(Fragment, null, renderTheme(attached.state, editing), body);
+        },
+    };
+}

package/dist/react/to-react.d.ts

@@ -0,0 +1,42 @@
+import { type ComponentType, type ReactNode } from "react";
+import type { EditorMarkers } from "../server/config.js";
+import type { RenderNode } from "../protocol/types.js";
+export type TrustedComponents = {
+    Text: ComponentType<any>;
+    RichText: ComponentType<any>;
+    Picture: ComponentType<any>;
+    Link: ComponentType<any>;
+    Placeholder: ComponentType<any>;
+    EditorFields: ComponentType<any>;
+    Icon: (name: string, props: Record<string, unknown>) => ReactNode;
+    /** Loads a component of the rendering's client code in the browser (see client/DynamicIsland). */
+    ClientIsland: ComponentType<any>;
+};
+export type ConvertContext = {
+    component: {
+        id: string;
+        fields?: Record<string, any>;
+    } & Record<string, any>;
+    renderContext: {
+        isEditing?: boolean;
+        isPreview?: boolean;
+        dictionary?: Record<string, {
+            value?: string;
+        } | undefined>;
+    } & Record<string, any>;
+    nonce: string;
+    editor?: Readonly<EditorMarkers>;
+    renderingId: string;
+    buildId: string;
+    trusted: TrustedComponents;
+    /**
+     * Set only where this rendering's client code may run: its browser bundle and why it may load.
+     * Without it every island is its static first paint and the page carries no bundle URL.
+     */
+    client?: {
+        src: string;
+        mode: "approved" | "sealed";
+    };
+};
+export declare function convert(node: RenderNode, ctx: ConvertContext, key: number | string, islandChildren?: ReactNode): ReactNode;
+export declare function convertTree(nodes: RenderNode[], ctx: ConvertContext): ReactNode;

package/dist/react/to-react.js

@@ -0,0 +1,112 @@
+// Turns a sanitized render tree into React elements. Every editor marker in the output is
+// produced here from the component JSON: field markers by the real SDK field components
+// (with the host's descriptor), component and dictionary markers by this file, nested
+// placeholders by the real SDK Placeholder. All of them carry the per-request nonce the
+// rendering code never saw; the editor bridge honours markers inside a dynamic rendering only when
+// they carry it.
+import { createElement, Fragment } from "react";
+/* eslint-enable @typescript-eslint/no-explicit-any */
+function nonceAttributes(ctx) {
+    return ctx.editor ? { [ctx.editor.nonceAttribute]: ctx.nonce } : {};
+}
+function slotAttributes(ctx) {
+    return ctx.editor ? { [ctx.editor.slotAttribute]: ctx.nonce } : {};
+}
+function fieldByName(ctx, name) {
+    const fields = ctx.component.fields ?? {};
+    if (Object.prototype.hasOwnProperty.call(fields, name))
+        return fields[name];
+    const lower = name.toLowerCase();
+    const key = Object.keys(fields).find((k) => k.toLowerCase() === lower || fields[k]?.name?.toLowerCase?.() === lower);
+    return key ? fields[key] : undefined;
+}
+function convertChildren(nodes, ctx, islandChildren) {
+    return (nodes ?? []).map((node, index) => convert(node, ctx, index, islandChildren));
+}
+export function convert(node, ctx, key, islandChildren) {
+    if (typeof node === "string")
+        return node;
+    const { trusted } = ctx;
+    switch (node.t) {
+        case "el": {
+            const props = { key };
+            for (const [name, value] of Object.entries(node.props)) {
+                if (name === "__parheliaComponentAttrs") {
+                    if (ctx.renderContext.isEditing) {
+                        props["data-component-id"] = ctx.component.id;
+                        Object.assign(props, nonceAttributes(ctx));
+                    }
+                    continue;
+                }
+                props[name] = value;
+            }
+            const children = convertChildren(node.children, ctx, islandChildren);
+            return createElement(node.tag, props, ...(children.length ? children : []));
+        }
+        case "fragment":
+            return createElement(Fragment, { key }, ...convertChildren(node.children, ctx, islandChildren));
+        case "field": {
+            const field = fieldByName(ctx, node.field);
+            if (!field)
+                return null;
+            const props = { key, field, ...node.props };
+            if (ctx.renderContext.isEditing)
+                Object.assign(props, nonceAttributes(ctx));
+            if (node.kind === "text")
+                return createElement(trusted.Text, { ...props, tag: node.tag });
+            if (node.kind === "richtext")
+                return createElement(trusted.RichText, { ...props, tag: node.tag });
+            // The SDK's Picture builds a video's attributes from videoProps, not from the rest props,
+            // so the nonce must travel there too or the bridge ignores video fields.
+            if (node.kind === "picture") {
+                return createElement(trusted.Picture, ctx.renderContext.isEditing ? { ...props, videoProps: nonceAttributes(ctx) } : props);
+            }
+            return createElement(trusted.Link, props, ...convertChildren(node.children, ctx, islandChildren));
+        }
+        case "slot": {
+            const placeholders = (ctx.component.placeholders ?? []);
+            if (!placeholders.some((p) => p.name === node.name))
+                return null;
+            // Nested components come from the host's own Placeholder; the slot wrapper tells the
+            // bridge that markers below it are the host's, not the rendering's.
+            return createElement("div", { key, ...slotAttributes(ctx), style: { display: "contents" } }, createElement(trusted.Placeholder, { name: node.name, content: ctx.component, context: ctx.renderContext }));
+        }
+        case "icon":
+            return createElement(Fragment, { key }, trusted.Icon(node.name, node.props));
+        case "translate": {
+            const text = ctx.renderContext.dictionary?.[node.key]?.value || node.key;
+            if (!ctx.renderContext.isEditing)
+                return createElement(Fragment, { key }, text);
+            return createElement(Fragment, { key }, createElement("script", { "data-dictionary-key-start": node.key, ...nonceAttributes(ctx) }), text, createElement("script", { "data-dictionary-key-end": node.key, ...nonceAttributes(ctx) }));
+        }
+        case "editorFields": {
+            if (!ctx.renderContext.isEditing)
+                return null;
+            const own = (names) => names.filter((n) => fieldByName(ctx, n) !== undefined);
+            const props = { "data-editor-group": node.group, ...nonceAttributes(ctx), key };
+            const add = own(node.add);
+            const remove = own(node.remove);
+            if (add.length)
+                props["data-add-fields"] = add.join(",");
+            if (remove.length)
+                props["data-remove-fields"] = remove.join(",");
+            return createElement("script", props);
+        }
+        case "island": {
+            // The server code's children render once, here; the first paint and the loaded component
+            // both place them.
+            const children = createElement(Fragment, null, ...convertChildren(node.children, ctx, islandChildren));
+            const firstPaint = createElement(Fragment, null, ...convertChildren(node.firstPaint, ctx, children));
+            if (!ctx.client)
+                return createElement(Fragment, { key }, firstPaint);
+            return createElement(trusted.ClientIsland, { key, src: ctx.client.src, exportName: node.name, props: node.props, firstPaint, mode: ctx.client.mode }, children);
+        }
+        case "islandChildren":
+            return createElement(Fragment, { key }, islandChildren ?? null);
+        default:
+            return null;
+    }
+}
+export function convertTree(nodes, ctx) {
+    return createElement(Fragment, null, ...convertChildren(nodes, ctx));
+}

package/dist/react/trusted.d.ts

@@ -0,0 +1,3 @@
+import "server-only";
+import type { TrustedComponents } from "./to-react.js";
+export declare const defaultTrustedComponents: TrustedComponents;

package/dist/react/trusted.js

@@ -0,0 +1,31 @@
+import "server-only";
+import { createElement } from "react";
+import { EditorFields, Link, Picture, Placeholder, Text } from "@alpaca-headless/alpaca-headless";
+import { icons } from "lucide-react";
+import { DynamicIsland } from "../client/DynamicIsland.js";
+import { RichText } from "./RichText.js";
+// The components render-tree nodes become: the real SDK field components (they emit the
+// host's own editor markers), the sanitizing RichText, lucide icons by name and the loader of
+// a rendering's client code. A head may override single entries in createRenderer.
+function pascal(name) {
+    return name
+        .split(/[-_\s]+/)
+        .filter(Boolean)
+        .map((part) => part[0].toUpperCase() + part.slice(1))
+        .join("");
+}
+export const defaultTrustedComponents = {
+    Text,
+    RichText,
+    Picture,
+    Link,
+    Placeholder,
+    EditorFields,
+    Icon: (name, props) => {
+        const icon = icons[pascal(name)];
+        if (!icon)
+            return null;
+        return createElement(icon, { ...props, "aria-hidden": true });
+    },
+    ClientIsland: DynamicIsland,
+};

package/dist/rich-text/index.d.ts

@@ -0,0 +1 @@
+export { sanitizeRichTextHtml, sanitizeRichTextValue } from "./sanitizeRichText.js";

package/dist/rich-text/index.js

@@ -0,0 +1 @@
+export { sanitizeRichTextHtml, sanitizeRichTextValue } from "./sanitizeRichText.js";

package/dist/rich-text/sanitizeRichText.d.ts

@@ -0,0 +1,4 @@
+/** Filters rich-text HTML down to the formatting markup above. */
+export declare function sanitizeRichTextHtml(html: string): string;
+/** Same for a field value, which may be missing or not a string. */
+export declare function sanitizeRichTextValue<T>(value: T): T | string;