@pantheon-systems/puck-css 0.8.0 → 0.10.0

package/dist/editor/thumbnails/LiveThumbnail.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * LiveThumbnail
+ *
+ * Renders a real, scaled-down preview of a single Puck component using the
+ * component's own `defaultProps`, via Puck's <Render>. The preview is clipped
+ * to a fixed height and made non-interactive so it reads as a static thumbnail
+ * inside the visual component sidebar.
+ *
+ * Rendering is cached (see thumbnailCache): on a miss we render live and
+ * capture the resulting HTML; on a hit we re-inject the cached HTML instead of
+ * re-rendering the component. The cache survives editor remounts within a
+ * page load, avoiding re-rendering identical previews on every document
+ * switch.
+ *
+ * The initial capture happens right after the component's first commit, but a
+ * component that renders its own content asynchronously (e.g. after a fetch,
+ * in its own effect) may still be showing a loading state at that point. A
+ * MutationObserver keeps watching the live render and re-captures on every
+ * DOM change, so the cache converges on the settled output instead of
+ * permanently freezing whatever was on screen first.
+ *
+ * The config handed to Puck's <Render> has its `root` swapped for a
+ * pass-through: this preview is a single component, not a page, so it must
+ * not run the site's real page-root wrapper (e.g. a title `<h1>`) — that
+ * wrapper reflects the actual document currently open in the editor, not
+ * this isolated stub, and would otherwise leak into every preview.
+ *
+ * Unlike the exploratory spike this does NOT self-measure its height — grid
+ * cards want a uniform, fixed size, so we clip overflow instead.
+ */
+import React from 'react';
+import { Render } from '@puckeditor/core';
+import { getCachedThumbnail, setCachedThumbnail, getThumbnailCacheKey } from './thumbnailCache.js';
+import { DEFAULT_THUMBNAIL_HEIGHT } from './ThumbnailCard.js';
+function LiveThumbnailImpl({ config, name, scale = 0.2, height = DEFAULT_THUMBNAIL_HEIGHT }) {
+    const defaultProps = config?.components?.[name]?.defaultProps ?? {};
+    const cacheKey = getThumbnailCacheKey(config, name);
+    // Read once at mount: a hit lets us skip the live render entirely.
+    const [cached] = React.useState(() => getCachedThumbnail(cacheKey));
+    const innerRef = React.useRef(null);
+    // Isolated document: this preview is the one component, not a page — the
+    // real root wrapper is swapped for a pass-through below.
+    const data = {
+        root: { props: {} },
+        content: [
+            {
+                type: name,
+                props: { id: `thumb-${name}`, ...defaultProps },
+            },
+        ],
+        zones: {},
+    };
+    const isolatedConfig = React.useMemo(() => ({ ...config, root: { render: ({ children }) => children } }), [config]);
+    // On a miss, capture the live-rendered HTML once it has committed, then
+    // keep re-capturing on any further mutation so a component that finishes
+    // rendering asynchronously (its own effect, a fetch, an image swap) doesn't
+    // get an incomplete snapshot cached permanently.
+    //
+    // Mutations are debounced through requestAnimationFrame so a burst of DOM
+    // changes (e.g. a component updating several nodes at once) produces one
+    // capture per frame. Attribute mutations are excluded — they fire continuously
+    // for animations and class toggles without changing rendered content.
+    // The observer disconnects after 500 ms of DOM quiet so it doesn't run for
+    // the drawer's entire lifetime.
+    React.useEffect(() => {
+        if (cached !== undefined)
+            return;
+        const node = innerRef.current;
+        if (!node)
+            return;
+        const capture = () => {
+            const html = node.innerHTML;
+            if (html)
+                setCachedThumbnail(cacheKey, html);
+        };
+        let rafId = null;
+        let settleTimer = null;
+        const onMutation = () => {
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => {
+                capture();
+                rafId = null;
+            });
+            if (settleTimer !== null)
+                clearTimeout(settleTimer);
+            settleTimer = setTimeout(() => observer.disconnect(), 500);
+        };
+        capture();
+        const observer = new MutationObserver(onMutation);
+        observer.observe(node, { childList: true, subtree: true, characterData: true });
+        return () => {
+            observer.disconnect();
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            if (settleTimer !== null)
+                clearTimeout(settleTimer);
+        };
+    }, [cached, cacheKey]);
+    const boxStyle = {
+        width: '100%',
+        height,
+        overflow: 'hidden',
+        background: '#fff',
+        pointerEvents: 'none',
+    };
+    const innerStyle = {
+        transform: `scale(${scale})`,
+        transformOrigin: 'top left',
+        width: `${100 / scale}%`,
+    };
+    return (_jsx("div", { style: boxStyle, children: cached !== undefined ? (
+        // Trusted source: this HTML was produced by our own <Render> of the
+        // component's defaultProps — never user input.
+        _jsx("div", { style: innerStyle, dangerouslySetInnerHTML: { __html: cached } })) : (_jsx("div", { style: innerStyle, ref: innerRef, children: _jsx(Render, { config: isolatedConfig, data: data }) })) }));
+}
+/** Memoized so re-expanding a category doesn't re-render existing previews. */
+export const LiveThumbnail = React.memo(LiveThumbnailImpl);
+//# sourceMappingURL=LiveThumbnail.js.map

package/dist/editor/thumbnails/LiveThumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveThumbnail.js","sourceRoot":"","sources":["../../../src/editor/thumbnails/LiveThumbnail.tsx"],"names":[],"mappings":"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"}

package/dist/editor/thumbnails/ThumbnailCard.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ThumbnailCard
+ *
+ * One card in the visual component sidebar grid: a live preview above a
+ * centered, human-readable name.
+ *
+ * To keep opening a category feeling instant, the expensive live <Render> is
+ * NOT mounted on the first commit unless a preview is already cached.
+ * Otherwise, a lightweight skeleton paints immediately and the real preview
+ * is scheduled on idle time, then swapped in. The preview is wrapped in an
+ * error boundary so a single misbehaving component degrades to a placeholder
+ * rather than taking down the drawer.
+ *
+ * Seeding `ready` from the cache matters beyond the first paint: Puck's own
+ * <Drawer>/<Drawer.Item> primitives remount on unrelated editor state changes
+ * (e.g. typing in any field), which remounts every ThumbnailCard too. Without
+ * the cache check, `ready` would reset to false on every one of those
+ * remounts, flashing the skeleton back in even for previews already rendered.
+ */
+import React from 'react';
+type RenderConfig = any;
+/** Default preview-card height in pixels, shared across LiveThumbnail, ThumbnailCard, and the drawer. */
+export declare const DEFAULT_THUMBNAIL_HEIGHT = 96;
+export interface ThumbnailCardProps {
+    config: RenderConfig;
+    name: string;
+    /** Preferred display name; falls back to a humanized component key. */
+    label?: string;
+    scale?: number;
+    /** Fixed height of the preview area, in pixels. */
+    height?: number;
+}
+declare function ThumbnailCardImpl({ config, name, label, scale, height }: ThumbnailCardProps): React.JSX.Element;
+/** Memoized so a category re-expand keeps already-rendered cards mounted. */
+export declare const ThumbnailCard: React.MemoExoticComponent<typeof ThumbnailCardImpl>;
+export {};
+//# sourceMappingURL=ThumbnailCard.d.ts.map

package/dist/editor/thumbnails/ThumbnailCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailCard.d.ts","sourceRoot":"","sources":["../../../src/editor/thumbnails/ThumbnailCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,YAAY,GAAG,GAAG,CAAC;AAExB,yGAAyG;AACzG,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwED,iBAAS,iBAAiB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAiC,EAAE,EAAE,kBAAkB,qBA+B/G;AAED,6EAA6E;AAC7E,eAAO,MAAM,aAAa,qDAAgC,CAAC"}

package/dist/editor/thumbnails/ThumbnailCard.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ThumbnailCard
+ *
+ * One card in the visual component sidebar grid: a live preview above a
+ * centered, human-readable name.
+ *
+ * To keep opening a category feeling instant, the expensive live <Render> is
+ * NOT mounted on the first commit unless a preview is already cached.
+ * Otherwise, a lightweight skeleton paints immediately and the real preview
+ * is scheduled on idle time, then swapped in. The preview is wrapped in an
+ * error boundary so a single misbehaving component degrades to a placeholder
+ * rather than taking down the drawer.
+ *
+ * Seeding `ready` from the cache matters beyond the first paint: Puck's own
+ * <Drawer>/<Drawer.Item> primitives remount on unrelated editor state changes
+ * (e.g. typing in any field), which remounts every ThumbnailCard too. Without
+ * the cache check, `ready` would reset to false on every one of those
+ * remounts, flashing the skeleton back in even for previews already rendered.
+ */
+import React from 'react';
+import { LiveThumbnail } from './LiveThumbnail.js';
+import { humanizeComponentName } from './humanizeComponentName.js';
+import { getCachedThumbnail, getThumbnailCacheKey } from './thumbnailCache.js';
+/** Default preview-card height in pixels, shared across LiveThumbnail, ThumbnailCard, and the drawer. */
+export const DEFAULT_THUMBNAIL_HEIGHT = 96;
+// ─── Idle scheduling (with a jsdom/SSR-safe fallback) ───────────────────────
+function scheduleIdle(cb) {
+    const ric = globalThis.requestIdleCallback;
+    if (ric)
+        return ric(cb);
+    return setTimeout(cb, 1);
+}
+function cancelIdle(id) {
+    const cic = globalThis.cancelIdleCallback;
+    if (cic)
+        cic(id);
+    else
+        clearTimeout(id);
+}
+// ─── Error boundary ─────────────────────────────────────────────────────────
+class PreviewErrorBoundary extends React.Component {
+    state = { hasError: false };
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    render() {
+        return this.state.hasError ? this.props.fallback : this.props.children;
+    }
+}
+// ─── Pieces ─────────────────────────────────────────────────────────────────
+function Skeleton({ height }) {
+    return (_jsx("div", { role: "status", "aria-label": "Loading preview", style: {
+            height,
+            background: 'linear-gradient(90deg, #f1f3f5 25%, #e9ecef 37%, #f1f3f5 63%)',
+            backgroundSize: '400% 100%',
+            animation: 'p1-thumb-shimmer 1.2s ease-in-out infinite',
+        } }));
+}
+function PreviewUnavailable({ height }) {
+    return (_jsx("div", { role: "img", "aria-label": "Preview unavailable", style: {
+            height,
+            display: 'grid',
+            placeItems: 'center',
+            background: '#f8f9fa',
+            color: '#adb5bd',
+            fontSize: 11,
+        }, children: "No preview" }));
+}
+// ─── Card ─────────────────────────────────────────────────────────────────────
+function ThumbnailCardImpl({ config, name, label, scale, height = DEFAULT_THUMBNAIL_HEIGHT }) {
+    const [ready, setReady] = React.useState(() => getCachedThumbnail(getThumbnailCacheKey(config, name)) !== undefined);
+    React.useEffect(() => {
+        if (ready)
+            return;
+        let cancelled = false;
+        const id = scheduleIdle(() => {
+            if (!cancelled)
+                setReady(true);
+        });
+        return () => {
+            cancelled = true;
+            cancelIdle(id);
+        };
+    }, [ready]);
+    const displayName = label ?? humanizeComponentName(name);
+    return (_jsxs("div", { className: "p1-thumb-card", children: [ready ? (_jsx(PreviewErrorBoundary, { fallback: _jsx(PreviewUnavailable, { height: height }), children: _jsx(LiveThumbnail, { config: config, name: name, scale: scale, height: height }) })) : (_jsx(Skeleton, { height: height })), _jsx("div", { className: "p1-thumb-card__label", title: displayName, children: displayName })] }));
+}
+/** Memoized so a category re-expand keeps already-rendered cards mounted. */
+export const ThumbnailCard = React.memo(ThumbnailCardImpl);
+//# sourceMappingURL=ThumbnailCard.js.map

package/dist/editor/thumbnails/ThumbnailCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailCard.js","sourceRoot":"","sources":["../../../src/editor/thumbnails/ThumbnailCard.tsx"],"names":[],"mappings":"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"}

package/dist/editor/thumbnails/buildLiveThumbnailDrawer.d.ts

@@ -0,0 +1,33 @@
+/**
+ * buildLiveThumbnailDrawer
+ *
+ * Builds a Puck `drawer` override that replaces the default component list
+ * with a visual, thumbnail-driven sidebar:
+ *
+ *   - components are grouped into collapsible category sections
+ *     (from `config.categories`, plus an "Other" bucket for anything
+ *     uncategorized);
+ *   - the first category is expanded by default, the rest collapsed, so the
+ *     initial paint mounts as few live previews as possible;
+ *   - each category renders a 2-column grid of ThumbnailCards, each wrapped in
+ *     Puck's <Drawer.Item> so it stays draggable onto the canvas.
+ *
+ * Pass the result to useP1Editor's `additionalOverrides`.
+ */
+import type { PuckOverrides } from '../plugin/index.js';
+type RenderConfig = any;
+export interface LiveThumbnailDrawerOptions {
+    /** Zoom factor for each preview. */
+    scale?: number;
+    /** Height of each preview area, in pixels. */
+    cardHeight?: number;
+    /** Optional callback to close/collapse the blocks panel. */
+    onClose?: () => void;
+}
+/**
+ * Returns a `drawer` override rendering the visual thumbnail sidebar for the
+ * given Puck config.
+ */
+export declare function buildLiveThumbnailDrawer(config: RenderConfig, options?: LiveThumbnailDrawerOptions): Partial<PuckOverrides>;
+export {};
+//# sourceMappingURL=buildLiveThumbnailDrawer.d.ts.map

package/dist/editor/thumbnails/buildLiveThumbnailDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildLiveThumbnailDrawer.d.ts","sourceRoot":"","sources":["../../../src/editor/thumbnails/buildLiveThumbnailDrawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAMH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOxD,KAAK,YAAY,GAAG,GAAG,CAAC;AAExB,MAAM,WAAW,0BAA0B;IACzC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAmID;;;GAGG;AACH,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,YAAY,EACpB,OAAO,GAAE,0BAA+B,GACvC,OAAO,CAAC,aAAa,CAAC,CAIxB"}

package/dist/editor/thumbnails/buildLiveThumbnailDrawer.js

@@ -0,0 +1,79 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * buildLiveThumbnailDrawer
+ *
+ * Builds a Puck `drawer` override that replaces the default component list
+ * with a visual, thumbnail-driven sidebar:
+ *
+ *   - components are grouped into collapsible category sections
+ *     (from `config.categories`, plus an "Other" bucket for anything
+ *     uncategorized);
+ *   - the first category is expanded by default, the rest collapsed, so the
+ *     initial paint mounts as few live previews as possible;
+ *   - each category renders a 2-column grid of ThumbnailCards, each wrapped in
+ *     Puck's <Drawer.Item> so it stays draggable onto the canvas.
+ *
+ * Pass the result to useP1Editor's `additionalOverrides`.
+ */
+import React from 'react';
+import { Drawer } from '@puckeditor/core';
+import { Icon } from '@pantheon-systems/pds-toolkit-react';
+import { PanelShell } from '../components/PanelShell.js';
+import { useP1Puck } from '../../core/P1PuckContext.js';
+import { PreviewPanelOverlay } from '../components/PreviewPanelOverlay.js';
+import { CollapsibleSectionHeader } from '../components/CollapsibleSectionHeader.js';
+import { ThumbnailCard, DEFAULT_THUMBNAIL_HEIGHT } from './ThumbnailCard.js';
+const OTHER_KEY = '__other';
+function computeSections(config) {
+    const categories = config?.categories ?? {};
+    const components = config?.components ?? {};
+    const categorized = new Set();
+    const sections = [];
+    for (const [key, category] of Object.entries(categories)) {
+        const names = (category.components ?? []).filter((name) => name in components);
+        names.forEach((name) => categorized.add(name));
+        if (names.length)
+            sections.push({ key, title: category.title ?? key, names });
+    }
+    const uncategorized = Object.keys(components).filter((name) => !categorized.has(name));
+    if (uncategorized.length) {
+        sections.push({ key: OTHER_KEY, title: 'Other', names: uncategorized });
+    }
+    return sections;
+}
+// ─── Drawer ─────────────────────────────────────────────────────────────────
+function LiveThumbnailDrawer({ config, options, }) {
+    const { isViewingHistoricalVersion, viewingVersion, returnToLatest } = useP1Puck();
+    const sections = React.useMemo(() => computeSections(config), [config]);
+    const [expanded, setExpanded] = React.useState(() => {
+        const first = sections[0];
+        return first ? { [first.key]: true } : {};
+    });
+    const toggle = (key) => setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));
+    const allOpen = sections.length > 0 && sections.every((s) => !!expanded[s.key]);
+    const toggleAll = () => {
+        if (allOpen) {
+            setExpanded({});
+        }
+        else {
+            setExpanded(Object.fromEntries(sections.map((s) => [s.key, true])));
+        }
+    };
+    const components = config?.components ?? {};
+    return (_jsx(PreviewPanelOverlay, { isViewingHistoricalVersion: isViewingHistoricalVersion, versionNumber: viewingVersion?.versionNumber ?? undefined, onExitPreview: returnToLatest, children: _jsxs(PanelShell, { title: "Blocks", onCollapse: options.onClose, children: [sections.length > 0 && (_jsxs("div", { className: "p1-blocks-drawer__toolbar", children: [_jsxs("span", { className: "p1-blocks-drawer__toolbar-label", children: [sections.length, " ", sections.length === 1 ? 'category' : 'categories'] }), _jsxs("button", { type: "button", className: "p1-blocks-drawer__expand-btn", onClick: toggleAll, "aria-label": allOpen ? 'Collapse all categories' : 'Expand all categories', children: [_jsx(Icon, { iconName: allOpen ? 'angleUp' : 'angleDown', size: "s" }), allOpen ? 'Collapse all' : 'Expand all'] })] })), sections.map((section) => {
+                    const open = !!expanded[section.key];
+                    const btnId = `p1-cat-btn-${section.key}`;
+                    const gridId = `p1-cat-grid-${section.key}`;
+                    return (_jsxs("section", { "aria-labelledby": btnId, children: [_jsx(CollapsibleSectionHeader, { id: btnId, controlsId: gridId, title: section.title, count: section.names.length, open: open, onToggle: () => toggle(section.key) }), open && (_jsx(Drawer, { children: _jsx("div", { id: gridId, className: "p1-blocks-drawer__grid", children: section.names.map((name) => (_jsx(Drawer.Item, { name: name, children: () => (_jsx(ThumbnailCard, { config: config, name: name, label: components[name]?.label, scale: options.scale, height: options.cardHeight ?? DEFAULT_THUMBNAIL_HEIGHT })) }, name))) }) }))] }, section.key));
+                })] }) }));
+}
+/**
+ * Returns a `drawer` override rendering the visual thumbnail sidebar for the
+ * given Puck config.
+ */
+export function buildLiveThumbnailDrawer(config, options = {}) {
+    return {
+        drawer: () => _jsx(LiveThumbnailDrawer, { config: config, options: options }),
+    };
+}
+//# sourceMappingURL=buildLiveThumbnailDrawer.js.map

package/dist/editor/thumbnails/buildLiveThumbnailDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildLiveThumbnailDrawer.js","sourceRoot":"","sources":["../../../src/editor/thumbnails/buildLiveThumbnailDrawer.tsx"],"names":[],"mappings":"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"}

package/dist/editor/thumbnails/humanizeComponentName.d.ts

@@ -0,0 +1,18 @@
+/**
+ * humanizeComponentName
+ *
+ * Derives a human-readable label from a Puck component key for display in the
+ * visual component sidebar. Callers should prefer a component's explicit
+ * `label` when one exists and fall back to this for the raw key.
+ *
+ * Transform: strip a trailing "Block" suffix, split PascalCase (and
+ * digit→capital boundaries) into words, and upper-case known acronyms.
+ *
+ *   "HeroBlock"        -> "Hero"
+ *   "CardGridBlock"    -> "Card Grid"
+ *   "P1WelcomeBlock"   -> "P1 Welcome"
+ *   "CtaBannerBlock"   -> "CTA Banner"
+ *   "FaqBlock"         -> "FAQ"
+ */
+export declare function humanizeComponentName(name: string): string;
+//# sourceMappingURL=humanizeComponentName.d.ts.map

package/dist/editor/thumbnails/humanizeComponentName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"humanizeComponentName.d.ts","sourceRoot":"","sources":["../../../src/editor/thumbnails/humanizeComponentName.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAQH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAS1D"}

package/dist/editor/thumbnails/humanizeComponentName.js

@@ -0,0 +1,32 @@
+/**
+ * humanizeComponentName
+ *
+ * Derives a human-readable label from a Puck component key for display in the
+ * visual component sidebar. Callers should prefer a component's explicit
+ * `label` when one exists and fall back to this for the raw key.
+ *
+ * Transform: strip a trailing "Block" suffix, split PascalCase (and
+ * digit→capital boundaries) into words, and upper-case known acronyms.
+ *
+ *   "HeroBlock"        -> "Hero"
+ *   "CardGridBlock"    -> "Card Grid"
+ *   "P1WelcomeBlock"   -> "P1 Welcome"
+ *   "CtaBannerBlock"   -> "CTA Banner"
+ *   "FaqBlock"         -> "FAQ"
+ */
+/** Words (lower-cased) that should render fully upper-cased. */
+const ACRONYMS = {
+    cta: 'CTA',
+    faq: 'FAQ',
+};
+export function humanizeComponentName(name) {
+    return name
+        .replace(/Block$/, '')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((word) => ACRONYMS[word.toLowerCase()] ?? word)
+        .join(' ');
+}
+//# sourceMappingURL=humanizeComponentName.js.map

package/dist/editor/thumbnails/humanizeComponentName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"humanizeComponentName.js","sourceRoot":"","sources":["../../../src/editor/thumbnails/humanizeComponentName.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,gEAAgE;AAChE,MAAM,QAAQ,GAA2B;IACvC,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;CACX,CAAC;AAEF,MAAM,UAAU,qBAAqB,CAAC,IAAY;IAChD,OAAO,IAAI;SACR,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;SACrB,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;SACtC,IAAI,EAAE;SACN,KAAK,CAAC,KAAK,CAAC;SACZ,MAAM,CAAC,OAAO,CAAC;SACf,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC;SACnD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC"}

package/dist/editor/thumbnails/resolveLiveThumbnailDrawer.d.ts

@@ -0,0 +1,15 @@
+/**
+ * resolveLiveThumbnailDrawer
+ *
+ * Decides whether useP1Editor should apply the live thumbnail component drawer,
+ * turning the `liveThumbnailDrawer` option into a Puck override layer (or null).
+ *
+ * The drawer is ON by default — passing `undefined` or `true` builds it, an
+ * options object builds it with those settings, and `false` opts out (Puck's
+ * default drawer is kept). Kept as a pure function so the default-on / opt-out
+ * policy is unit-testable independently of the drawer's rendering internals.
+ */
+import type { PuckOverrides } from '../plugin/index.js';
+import { type LiveThumbnailDrawerOptions } from './buildLiveThumbnailDrawer.js';
+export declare function resolveLiveThumbnailDrawer(config: unknown, option: boolean | LiveThumbnailDrawerOptions | undefined): Partial<PuckOverrides> | null;
+//# sourceMappingURL=resolveLiveThumbnailDrawer.d.ts.map

package/dist/editor/thumbnails/resolveLiveThumbnailDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveLiveThumbnailDrawer.d.ts","sourceRoot":"","sources":["../../../src/editor/thumbnails/resolveLiveThumbnailDrawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAA4B,KAAK,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAE1G,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,OAAO,EACf,MAAM,EAAE,OAAO,GAAG,0BAA0B,GAAG,SAAS,GACvD,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAI/B"}

package/dist/editor/thumbnails/resolveLiveThumbnailDrawer.js

@@ -0,0 +1,19 @@
+/**
+ * resolveLiveThumbnailDrawer
+ *
+ * Decides whether useP1Editor should apply the live thumbnail component drawer,
+ * turning the `liveThumbnailDrawer` option into a Puck override layer (or null).
+ *
+ * The drawer is ON by default — passing `undefined` or `true` builds it, an
+ * options object builds it with those settings, and `false` opts out (Puck's
+ * default drawer is kept). Kept as a pure function so the default-on / opt-out
+ * policy is unit-testable independently of the drawer's rendering internals.
+ */
+import { buildLiveThumbnailDrawer } from './buildLiveThumbnailDrawer.js';
+export function resolveLiveThumbnailDrawer(config, option) {
+    if (option === false)
+        return null;
+    const options = typeof option === 'object' ? option : undefined;
+    return buildLiveThumbnailDrawer(config, options);
+}
+//# sourceMappingURL=resolveLiveThumbnailDrawer.js.map

package/dist/editor/thumbnails/resolveLiveThumbnailDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveLiveThumbnailDrawer.js","sourceRoot":"","sources":["../../../src/editor/thumbnails/resolveLiveThumbnailDrawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAE,wBAAwB,EAAmC,MAAM,+BAA+B,CAAC;AAE1G,MAAM,UAAU,0BAA0B,CACxC,MAAe,EACf,MAAwD;IAExD,IAAI,MAAM,KAAK,KAAK;QAAE,OAAO,IAAI,CAAC;IAClC,MAAM,OAAO,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IAChE,OAAO,wBAAwB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACnD,CAAC"}

package/dist/editor/thumbnails/thumbnailCache.d.ts

@@ -0,0 +1,39 @@
+/**
+ * thumbnailCache
+ *
+ * In-memory, client-side cache for rendered component-preview HTML: a
+ * module-level Map that survives editor/document remounts within a single
+ * page load (Puck is force-remounted via `key` on every document switch,
+ * which would otherwise re-render every preview from scratch).
+ *
+ * Deliberately NOT persisted to localStorage: the cached value is later
+ * injected via `dangerouslySetInnerHTML` (see LiveThumbnail), and localStorage
+ * is writable by any same-origin script. Persisting it would let a same-origin
+ * write to a `p1-thumb:*` key plant markup that gets trusted and replayed on a
+ * future load. Keeping the cache in-memory only means an attacker would need
+ * live script execution in this exact session to influence it — at which
+ * point they already have full DOM control and this cache buys them nothing.
+ *
+ * A preview depends only on component name + defaultProps, NOT on the document
+ * being edited, so entries are reused across every page. The key embeds a hash
+ * of the defaultProps plus a caller-supplied version so stale entries
+ * invalidate when a component's inputs change.
+ */
+/**
+ * Build a cache key for a component preview. Changing `defaultProps` or
+ * `version` yields a different key, so cached previews invalidate.
+ */
+export declare function makeThumbnailKey(name: string, defaultProps: unknown, version?: string): string;
+/** Cache key for a component preview, shared by LiveThumbnail and ThumbnailCard. */
+export declare function getThumbnailCacheKey(config: {
+    components?: Record<string, {
+        defaultProps?: unknown;
+    }>;
+} | undefined, name: string, version?: string): string;
+/** Read a cached preview (in-memory only — see file header for why). */
+export declare function getCachedThumbnail(key: string): string | undefined;
+/** Write a preview to the in-memory cache. */
+export declare function setCachedThumbnail(key: string, html: string): void;
+/** Clear the in-memory cache, plus any stray entries left by an older, localStorage-backed version of this cache. */
+export declare function clearThumbnailCache(): void;
+//# sourceMappingURL=thumbnailCache.d.ts.map

package/dist/editor/thumbnails/thumbnailCache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnailCache.d.ts","sourceRoot":"","sources":["../../../src/editor/thumbnails/thumbnailCache.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AA8BH;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,SAAM,GAAG,MAAM,CAS3F;AAUD,oFAAoF;AACpF,wBAAgB,oBAAoB,CAClC,MAAM,EAAE;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAA;CAAE,GAAG,SAAS,EAC/E,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,MAAM,GACf,MAAM,CAER;AAED,wEAAwE;AACxE,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAElE;AAED,8CAA8C;AAC9C,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAElE;AAED,qHAAqH;AACrH,wBAAgB,mBAAmB,IAAI,IAAI,CAgB1C"}