@universalcms/connect 0.0.0-stage → 0.13.0

package/dist/react-publication.mjs

@@ -0,0 +1,301 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { bindingTextFingerprint } from './public-bindings.mjs';
+import { validatePublishedDocumentEntry as validateEntry } from './publication-document.mjs';
+export { validatePublishedDocumentEntry as validateEntry } from './publication-document.mjs';
+import { CmsDocument } from "./vendor/react-document.mjs";
+const Context = createContext(null);
+const MetadataOwner = createContext(false);
+/** Website settings own head metadata when both integrations share a tree. */
+export function PublicationMetadataOwner({ children }) {
+    return _jsx(MetadataOwner.Provider, { value: true, children: children });
+}
+const revision = (entry) => `${entry.id}:${entry.version}${entry.revisionId ? `:${entry.revisionId}` : ""}`;
+const flatten = (blocks) => blocks.flatMap(block => [block, ...(block.type === "section" && Array.isArray(block.data?.blocks) ? flatten(block.data.blocks) : block.type === "columns" && Array.isArray(block.data?.columns) ? flatten(block.data.columns.flat()) : [])]);
+/** The initial payload was validated server-side. Refreshes only use the same-origin
+ * published-document endpoint; there is deliberately no native/draft fallback. */
+export function PublishedDocumentProvider({ initialEntry, pathname, route, children, formEndpoint }) {
+    const identity = route.identity ?? initialEntry;
+    if (!identity || !route.baseline || !route.bindings)
+        throw Error("Missing reviewed CMS binding inventory");
+    const key = `${pathname}:${identity.kind}:${identity.slug}:${identity.locale}`;
+    return _jsx(PublishedProvider, { initialEntry: initialEntry, pathname: pathname, route: route, identity: identity, formEndpoint: formEndpoint, children: children }, key);
+}
+function PublishedProvider({ initialEntry, pathname, route, identity, children, formEndpoint }) {
+    const websiteOwnsMetadata = useContext(MetadataOwner);
+    const [entry, setEntry] = useState(() => initialEntry ? validateEntry(initialEntry, identity) : undefined);
+    const [failure, setFailure] = useState(null);
+    const generation = useRef(0);
+    const previousTitle = useRef(initialEntry?.document.title);
+    useEffect(() => {
+        let controller;
+        let disposed = false;
+        const refresh = () => {
+            const request = ++generation.current;
+            controller?.abort();
+            const requestController = new AbortController();
+            controller = requestController;
+            const timeout = window.setTimeout(() => requestController.abort(), 10000);
+            void (async () => {
+                try {
+                    const response = await fetch(`/api/universalcms/document?path=${encodeURIComponent(pathname)}`, { cache: "no-store", credentials: "same-origin", redirect: "error", signal: requestController.signal, headers: { Accept: "application/json" } });
+                    if (response.status !== 200)
+                        throw response.status === 404 ? 404 : 503;
+                    if (!response.headers.get("content-type")?.includes("application/json"))
+                        throw 503;
+                    const value = await readPayload(response);
+                    if (value?.state !== "published")
+                        throw 503;
+                    const next = validateEntry(value.entry, identity);
+                    if (value.revision !== revision(next))
+                        throw 503;
+                    if (!disposed && request === generation.current) {
+                        setEntry(next);
+                        setFailure(null);
+                    }
+                }
+                catch (error) {
+                    if (!disposed && request === generation.current) {
+                        const status = error === 404 ? 404 : 503;
+                        setEntry(undefined);
+                        setFailure(status);
+                        window.dispatchEvent(new CustomEvent("universalcms:document-unavailable", { detail: { status, path: pathname } }));
+                    }
+                }
+                finally {
+                    window.clearTimeout(timeout);
+                }
+            })();
+        };
+        const update = (event) => {
+            const change = event;
+            if (change.detail?.path !== pathname)
+                return;
+            change.preventDefault();
+            refresh();
+        };
+        window.addEventListener("universalcms:publication-change", update);
+        if (!initialEntry)
+            refresh();
+        return () => { disposed = true; generation.current++; controller?.abort(); window.removeEventListener("universalcms:publication-change", update); };
+    }, [pathname, identity.kind, identity.slug, identity.locale]);
+    useEffect(() => {
+        if (initialEntry) {
+            generation.current++;
+            setEntry(validateEntry(initialEntry, identity));
+            setFailure(null);
+        }
+    }, [initialEntry]);
+    useEffect(() => {
+        if (!entry || websiteOwnsMetadata)
+            return;
+        const before = previousTitle.current, title = entry.document.title;
+        if (before !== title) {
+            const current = document.title;
+            // Keep a server-rendered layout title template, such as “Page | Brand”.
+            // Unknown client-only templates need an explicit native integration.
+            document.title = before && current.split(before).length === 2 ? current.replace(before, title) : title;
+        }
+        previousTitle.current = title;
+        let description = document.querySelector('meta[name="description"]');
+        if (!description) {
+            description = document.createElement('meta');
+            description.name = 'description';
+            document.head.append(description);
+        }
+        description.content = entry.document.excerpt;
+    }, [entry, websiteOwnsMetadata]);
+    const value = useMemo(() => entry ? ({ entry, route, blocks: new Map(flatten(entry.document.blocks).map(block => [block.id, block])), formEndpoint }) : null, [entry, route, formEndpoint]);
+    if (failure)
+        return _jsxs("main", { role: "alert", children: [_jsx("h1", { children: failure }), _jsx("p", { children: failure === 404 ? "Page not found" : "Page temporarily unavailable" })] });
+    if (!value || !entry)
+        return _jsx("main", { role: "status", "aria-busy": "true", children: "Loading published content\u2026" });
+    return _jsxs(Context.Provider, { value: value, children: [_jsx("meta", { name: "universalcms-publication-revision", content: revision(entry), "data-path": pathname }), children] });
+}
+async function readPayload(response) {
+    const limit = 2 * 1024 * 1024;
+    if (Number(response.headers.get('content-length')) > limit)
+        throw 503;
+    if (!response.body)
+        throw 503;
+    const reader = response.body.getReader();
+    const chunks = [];
+    let length = 0;
+    try {
+        for (;;) {
+            const { value, done } = await reader.read();
+            if (done)
+                break;
+            length += value.length;
+            if (length > limit)
+                throw 503;
+            chunks.push(value);
+        }
+    }
+    catch (error) {
+        await reader.cancel();
+        throw error;
+    }
+    finally {
+        reader.releaseLock();
+    }
+    const bytes = new Uint8Array(length);
+    let offset = 0;
+    for (const chunk of chunks) {
+        bytes.set(chunk, offset);
+        offset += chunk.length;
+    }
+    return JSON.parse(new TextDecoder('utf-8', { fatal: true }).decode(bytes));
+}
+function usePublished() { const value = useContext(Context); if (!value)
+    throw Error("Published content requires its server-loaded document"); return value; }
+/** Read the validated public snapshot for reviewed native component mappings. */
+export function usePublishedDocument() {
+    const { entry, route, blocks } = usePublished();
+    return { entry, route, blocks };
+}
+/** Search published display copy without mutating native row identities/handlers. */
+export function useCmsSearchText() {
+    const { route, blocks } = usePublished();
+    return (selector) => Object.values(route.bindings).flatMap(slot => slot.variants.filter(variant => JSON.stringify(variant.values) === JSON.stringify(selector)).map(variant => blocks.get(variant.id)?.text ?? "")).join(" ");
+}
+function presentation(block) {
+    const token = block.style ?? {};
+    const sizes = { small: ".875em", normal: "1em", large: "1.25em" };
+    const colors = { default: "inherit", muted: "var(--text-muted, #64748b)", accent: "var(--primary, #0d9488)", inverse: "#fff" };
+    const spacing = { none: "0", small: ".5rem", medium: "1.25rem", large: "2.5rem" };
+    const style = {};
+    if (["left", "center", "right"].includes(String(token.align)))
+        style.textAlign = token.align;
+    if (sizes[String(token.size)])
+        style.fontSize = sizes[String(token.size)];
+    if (colors[String(token.tone)])
+        style.color = colors[String(token.tone)];
+    if (spacing[String(token.spaceAbove)])
+        style.marginTop = spacing[String(token.spaceAbove)];
+    if (spacing[String(token.spaceBelow)])
+        style.marginBottom = spacing[String(token.spaceBelow)];
+    return { className: [token.hideOnMobile === true ? "cms-hide-mobile" : "", token.hideOnDesktop === true ? "cms-hide-desktop" : ""].filter(Boolean).join(" "), style, ...(typeof token.anchor === "string" && /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(token.anchor) ? { id: token.anchor } : {}) };
+}
+function replaceNativeText(children, text) {
+    // Custom components may render copy from props, context or closures. Traversing
+    // their supplied children cannot prove that their visible text was replaced.
+    // Keep an enclosing native control's handlers, but replace opaque contents.
+    if (hasOpaqueContent(children))
+        return text;
+    let written = false;
+    const visit = (value) => React.Children.map(value, child => {
+        if (typeof child === "string" || typeof child === "number") {
+            if (!String(child).trim())
+                return child;
+            if (written)
+                return "";
+            written = true;
+            return text;
+        }
+        if (!React.isValidElement(child))
+            return child;
+        if (typeof child.type !== "string" && child.type !== React.Fragment)
+            return child;
+        if (typeof child.type === "string" && ["select", "option", "input", "textarea", "script", "style", "svg", "form", "noscript", "iframe"].includes(child.type))
+            return child;
+        return React.cloneElement(child, {}, visit(child.props.children));
+    });
+    const result = visit(children);
+    return written ? result : _jsxs(_Fragment, { children: [result, text] });
+}
+function hasOpaqueContent(children) {
+    return React.Children.toArray(children).some(child => React.isValidElement(child) && (typeof child.type !== "string" && child.type !== React.Fragment ||
+        child.props.dangerouslySetInnerHTML != null || hasOpaqueContent(child.props.children)));
+}
+/** Exact source slot + immutable native row identity selects a frozen block ID.
+ * Existing elements and handlers remain mounted when a publication refreshes. */
+export function CmsBound({ slot, selector, children }) {
+    const { entry, route, blocks } = usePublished();
+    const variants = route.bindings[slot]?.variants;
+    if (!variants)
+        throw Error("Unknown reviewed CMS source slot");
+    const variant = variants.find(candidate => JSON.stringify(candidate.values) === JSON.stringify(selector));
+    // An application-created row that was never exported is outside CMS ownership.
+    if (!variant)
+        return route.publicSource === 1 ? null : _jsx(_Fragment, { children: children });
+    const block = blocks.get(variant.id);
+    if (!block)
+        return null;
+    const baseline = flatten(route.baseline.blocks).find(candidate => candidate.id === variant.id);
+    if (!baseline)
+        throw Error("Missing frozen source block");
+    const projected = route.publicSource === 1;
+    if (projected && !route.fingerprints?.blocks[variant.id])
+        throw Error("Missing public binding comparison");
+    let text = block.text;
+    const sameText = projected ? bindingTextFingerprint(block.text) === route.fingerprints.blocks[variant.id] : block.text === baseline.text;
+    if (sameText && variant.id === route.titleBlockId && (projected ? bindingTextFingerprint(entry.document.title) !== route.fingerprints.title : entry.document.title !== route.baseline.title))
+        text = entry.document.title;
+    const excerptBlockId = route.excerptBlockId ?? route.baseline.blocks.find(candidate => candidate.type === "paragraph")?.id;
+    if (sameText && variant.id === excerptBlockId && (projected ? bindingTextFingerprint(entry.document.excerpt) !== route.fingerprints.excerpt : entry.document.excerpt !== route.baseline.excerpt))
+        text = entry.document.excerpt;
+    const tokens = presentation(block);
+    const unchanged = !projected && text === baseline.text && block.type === baseline.type;
+    if (block.type !== baseline.type || !["paragraph", "heading", "list", "quote", "code"].includes(block.type) && JSON.stringify(block.data) !== JSON.stringify(baseline.data))
+        return _jsx(CmsBlock, { block: block });
+    if (React.isValidElement(children) && children.type === React.Fragment) {
+        const meaningful = React.Children.toArray(children.props.children).filter(child => typeof child !== "string" || child.trim());
+        if (meaningful.length === 1 && React.isValidElement(meaningful[0]) && typeof meaningful[0].type === "string")
+            children = meaningful[0];
+    }
+    if (React.isValidElement(children) && typeof children.type === "string") {
+        const properties = { ...tokens, "data-cms-block": block.id, "data-cms-slot": slot, className: [children.props.className, tokens.className].filter(Boolean).join(" "), style: { ...children.props.style, ...tokens.style } };
+        if (!tokens.id)
+            delete properties.id;
+        if (block.type === "list" && children.type === "li" && !unchanged && text.includes("\n")) {
+            const native = children;
+            return _jsx(_Fragment, { children: text.split("\n").map((line, index) => React.cloneElement(native, { ...properties, key: `${block.id}:${index}` }, replaceNativeText(native.props.children, line))) });
+        }
+        const renderedChildren = unchanged ? children.props.children : replaceNativeText(children.props.children, text);
+        if (block.type === "heading" && block.data?.level !== baseline.data?.level && [2, 3, 4].includes(Number(block.data?.level)))
+            return React.createElement(`h${block.data?.level}`, { ...children.props, ...properties }, renderedChildren);
+        return React.cloneElement(children, properties, renderedChildren);
+    }
+    // An opaque root has no known native element to preserve. Render only the
+    // reviewed published block instead of appending new text beside stale copy.
+    if (!unchanged && hasOpaqueContent(children))
+        return _jsx(CmsBlock, { block: { ...block, text } });
+    return _jsx("span", { ...tokens, className: `${tokens.className} cms-inline-bound`, "data-cms-block": block.id, "data-cms-slot": slot, children: unchanged ? children : replaceNativeText(children, text) });
+}
+function CmsBlock({ block }) {
+    return _jsx(PublishedBlocks, { blocks: [block] });
+}
+/** Render a complete public page using the same reviewed block and form policy. */
+export function CmsPublishedDocument() {
+    const { entry } = usePublished();
+    return _jsx(PublishedBlocks, { blocks: entry.document.blocks });
+}
+function PublishedBlocks({ blocks }) {
+    const { entry, formEndpoint } = usePublished();
+    const endpoint = typeof formEndpoint === 'string' && /^\/(?!\/)/.test(formEndpoint) && !/[\s\\]/.test(formEndpoint) ? formEndpoint : undefined;
+    return _jsx(CmsDocument, { document: { blocks: blocks }, entryId: entry.id, revisionId: entry.revisionId, formEndpoint: endpoint, components: endpoint ? {} : { form: () => _jsx("p", { role: "status", children: "Submissions are currently unavailable." }) } });
+}
+export function CmsAdditionalContent({ includeUnbound = false } = {}) {
+    const { entry, route } = usePublished();
+    const known = new Set(flatten(route.baseline.blocks).map(block => block.id));
+    const bound = new Set(Object.values(route.bindings).flatMap(slot => slot.variants.map(variant => variant.id)));
+    // Bound IDs stay at native design locations. Reviewed partial adapters may
+    // explicitly include baseline blocks that have no native binding as well.
+    const additional = (blocks) => blocks.flatMap(block => {
+        if (bound.has(block.id))
+            return [];
+        if (block.type === "section" && Array.isArray(block.data?.blocks)) {
+            const children = additional(block.data.blocks);
+            return children.length ? [{ ...block, data: { ...block.data, blocks: children } }] : [];
+        }
+        if (block.type === "columns" && Array.isArray(block.data?.columns)) {
+            const columns = block.data.columns.map(additional);
+            return columns.some(column => column.length) ? [{ ...block, data: { ...block.data, columns } }] : [];
+        }
+        return known.has(block.id) && !includeUnbound ? [] : [block];
+    });
+    const blocks = additional(entry.document.blocks);
+    return blocks.length ? _jsx("section", { className: "cms-additional-content", "aria-label": "Additional information", "data-cms-additional-content": true, children: blocks.map(block => _jsx(CmsBlock, { block: block }, block.id)) }) : null;
+}

package/dist/react-website.d.mts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { PublishedDocumentEntry } from './publication.mjs';
+import type { WebsiteSettings, Consent } from './website-model.mjs';
+export type WebsiteEntry = PublishedDocumentEntry & Record<string, any>;
+export type WebsiteArchive = { kind: 'category' | 'tag'; path: string; title: string; description: string };
+export type WebsiteProps = { children: ReactNode; initialSettings?: unknown; entry?: WebsiteEntry; archive?: WebsiteArchive; scope?: string; originalPaths?: string[]; applyTemplate?: boolean; chrome?: boolean };
+export function WebsiteProvider(props: Omit<WebsiteProps, 'originalPaths' | 'applyTemplate' | 'chrome'>): ReactNode;
+export function CmsWebsite(props: WebsiteProps): ReactNode;
+export function CmsWebsitePage(props: { scope?: string; pathname?: string; initialEntry?: WebsiteEntry; initialResult?: unknown; initialSettings?: unknown; chrome?: boolean }): ReactNode;
+export function useWebsiteSettings(): { settings: WebsiteSettings; entry?: WebsiteEntry; archive?: WebsiteArchive; related: unknown[]; scope: string; consent: Consent | null; saveConsent(choices: { analytics: boolean; marketing: boolean }): void; preferencesOpen: boolean; setPreferencesOpen(value: boolean): void };
+export function CmsBranding(props?: { homePath?: string; fallback?: ReactNode }): ReactNode;
+export function CmsNavigation(props?: { location?: 'header' | 'footer'; originalLinks?: Array<{ label: string; url: string }>; excludeUrls?: string[]; onNavigate?: () => void; className?: string }): ReactNode;
+export function CmsSocialLinks(): ReactNode;
+export function CmsLanguages(): ReactNode;
+export function CmsExperience(props?: { notFound?: boolean }): ReactNode;