@alpaca-headless/alpaca-headless-nextjs 1.0.129 → 1.0.246

package/dist/esm/alpacaContext.js

@@ -0,0 +1,16 @@
+export function getAlpacaContext() {
+    let context = globalThis.alpacaContext;
+    if (!context) {
+        context = {};
+        globalThis.alpacaContext = context;
+    }
+    return context;
+}
+/**
+ * @deprecated The method should not be used
+ */
+export const useAlpacaContext = getAlpacaContext;
+export function registerComponents(components) {
+    const context = useAlpacaContext();
+    context.components = components;
+}

package/dist/esm/client-components/ClientLink.js

@@ -0,0 +1,34 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEditContext, usePreviewContext } from "../editor";
+import LinkEditor from "./LinkEditor";
+import LinkPreview from "../components/LinkPreview";
+export function ClientLink(_a) {
+    var { field, children } = _a, props = __rest(_a, ["field", "children"]);
+    if (!field)
+        return;
+    if (field.jsonValue) {
+        field = field.jsonValue;
+    }
+    if (!field.value)
+        return;
+    const previewContext = usePreviewContext();
+    if (previewContext) {
+        return (_jsx(LinkPreview, Object.assign({ field: field }, props, { children: children })));
+    }
+    const editing = useEditContext();
+    if (editing)
+        return (_jsx(LinkEditor, Object.assign({ field: field }, props, { children: children })));
+    return (_jsx("a", Object.assign({ href: field.value.url }, props, { children: children })));
+}

package/dist/{cjs/components → esm/client-components}/LinkEditor.js

@@ -1,4 +1,3 @@
-"use strict";
 "use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
@@ -11,20 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const LinkEditorDialog_1 = require("../editor/LinkEditorDialog");
-const __1 = require("..");
-function LinkEditor(_a) {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//import { useEditContext } from "../editor/editContext";
+import { LinkEditorDialog } from "../editor/LinkEditorDialog";
+import { useEditContext } from "../editor/editContext";
+export default function LinkEditor(_a) {
     var { field, children } = _a, props = __rest(_a, ["field", "children"]);
-    const [showDialog, setShowDialog] = (0, react_1.useState)(false);
-    const [link, setLink] = (0, react_1.useState)();
-    const editContext = (0, __1.useEditContext)();
+    const [showDialog, setShowDialog] = useState(false);
+    const [link, setLink] = useState();
+    const editContext = useEditContext();
     if (!editContext)
         return;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         var _a;
+        if (!field)
+            return;
         setLink({
             url: field.value.url,
             target: field.value.target,
@@ -33,17 +34,20 @@ function LinkEditor(_a) {
             itemId: (_a = field.value.targetItemLongId) === null || _a === void 0 ? void 0 : _a.split("/").pop(),
             queryString: field.value.queryString,
         });
+        editContext.registerAsRenderedField(field);
     }, [field]);
     if (!field)
-        return;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", Object.assign({ href: field.value.url }, props, { onClick: (e) => {
-                    editContext.setFocusedField(field);
+        return (_jsxs("a", Object.assign({}, props, { children: [_jsx("i", { className: "pi pi-exclamation-triangle a-text-sm a-text-red-500", title: "Unknown link field" }), children] })));
+    return (_jsxs(_Fragment, { children: [_jsxs("a", Object.assign({ href: field.value.url }, props, { onClick: (e) => {
+                    var _a;
+                    editContext.setFocusedField((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor, true);
                     e.preventDefault();
-                }, children: [children, " ", (0, jsx_runtime_1.jsx)("i", { onClick: (e) => {
+                }, children: [children, " ", _jsx("i", { onClick: (e) => {
+                            var _a;
                             setShowDialog(true);
-                            editContext.setFocusedField(field);
+                            editContext.setFocusedField((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor, true);
                             e.preventDefault();
-                        }, className: "pi pi-link a-cursor-pointer" })] })), showDialog && ((0, jsx_runtime_1.jsx)(LinkEditorDialog_1.LinkEditorDialog, { linkValue: link || { type: "internal" }, onOk: (link) => {
+                        }, className: "pi pi-link a-cursor-pointer" })] })), showDialog && (_jsx(LinkEditorDialog, { linkValue: link || { type: "internal" }, onOk: (link) => {
                     var _a, _b;
                     const xml = link.type == "internal"
                         ? '<link linktype="internal" querystring="' +
@@ -55,7 +59,7 @@ function LinkEditor(_a) {
                             '" />'
                         : '<link linktype="external" querystring="' +
                             ((_b = link.queryString) !== null && _b !== void 0 ? _b : "") +
-                            ' url="' +
+                            '" url="' +
                             link.url +
                             '" target="' +
                             link.target +
@@ -65,4 +69,3 @@ function LinkEditor(_a) {
                     setShowDialog(false);
                 }, onCancel: () => setShowDialog(false) }))] }));
 }
-exports.default = LinkEditor;

package/dist/esm/client-components/MultiComponentEditor.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditFilterChildrenContextProvider, useEditContext, } from "../editor";
+export function MultiComponentEditor({ component, children, thumbZoom = 0.2, thumbHeight = "150px", thumbWidth = "150px", numComponentsVisibleWhenNotEditing = 1, listClassName = "", listClassNameEditing = "a-flex a-gap-2 a-flex-wrap a-items-center", }) {
+    var editContext = useEditContext();
+    if (!editContext)
+        return null;
+    const style = {
+        "--a-mce-thumb-zoom": thumbZoom,
+        "--a-mce-thumb-width": thumbWidth,
+        "--a-mce-thumb-height": thumbHeight,
+    };
+    const filterChildCallback = ({ component, index, }) => {
+        var _a;
+        return index > numComponentsVisibleWhenNotEditing &&
+            ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.selection) === null || _a === void 0 ? void 0 : _a.indexOf(component === null || component === void 0 ? void 0 : component.id)) === -1;
+    };
+    return (_jsxs("div", { className: "a-mce", style: style, children: [_jsxs("div", { className: listClassNameEditing + " a-mce-items", children: [children, _jsx("div", { onClick: (ev) => {
+                            editContext === null || editContext === void 0 ? void 0 : editContext.setSelectedForInsertion(component.id);
+                            ev.stopPropagation();
+                        }, children: _jsx("i", { className: "pi pi-plus-circle text-3xl cursor-pointer" }) })] }), _jsx("div", { className: "a-mce-selected " + listClassName, children: _jsx(EditFilterChildrenContextProvider, { value: { filterChildCallback }, children: children }) })] }));
+}

package/dist/esm/client-components/index.js

@@ -0,0 +1,4 @@
+"use client";
+export { ClientLink } from "./ClientLink";
+export { MultiComponentEditor } from "./MultiComponentEditor";
+export { useEditContext } from "../editor/editContext";

package/dist/esm/components/Error.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ErrorFallback() {
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    return (_jsx("div", { role: "alert", children: _jsx("p", { children: "Something went wrong." }) }));
+}
+export function ErrorFallbackWithDetails({ error }) {
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    return (_jsxs("div", { role: "alert", children: [_jsx("p", { children: "Something went wrong:" }), _jsxs("pre", { style: { color: "red" }, children: [error.message, " ", error.stack] })] }));
+}

package/dist/{cjs → esm}/components/Image.js

@@ -1,4 +1,3 @@
-"use strict";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,9 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Image = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx } from "react/jsx-runtime";
+import "server-only";
 // const addClassName = (otherAttrs: { [key: string]: unknown }): void => {
 //   if (otherAttrs.class) {
 //     // if any classes are defined properly already
@@ -26,11 +24,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 //     delete otherAttrs.class;
 //   }
 // };
-const Image = (_a) => {
+export const Image = (_a) => {
     var { field } = _a, otherProps = __rest(_a, ["field"]);
     if (!field)
         return;
     const attrs = Object.assign(Object.assign({}, field.value), otherProps);
-    return (0, jsx_runtime_1.jsx)("img", Object.assign({}, attrs, { alt: "" }));
+    return _jsx("img", Object.assign({}, attrs, { alt: "" }));
 };
-exports.Image = Image;

package/dist/esm/components/Link.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import "server-only";
+import { useAlpacaContext } from "../alpacaContext";
+import LinkEditor from "../client-components/LinkEditor";
+import LinkPreview from "./LinkPreview";
+export function Link(_a) {
+    var { field, children } = _a, props = __rest(_a, ["field", "children"]);
+    if (field === null || field === void 0 ? void 0 : field.jsonValue) {
+        field = field.jsonValue;
+    }
+    const pageContext = useAlpacaContext().pageContext;
+    const editing = pageContext === null || pageContext === void 0 ? void 0 : pageContext.pageEditing;
+    if (editing)
+        return (_jsx(LinkEditor, Object.assign({ field: field }, props, { children: children })));
+    if (!(field === null || field === void 0 ? void 0 : field.value))
+        return;
+    if (pageContext === null || pageContext === void 0 ? void 0 : pageContext.previewing) {
+        return (_jsx(LinkPreview, Object.assign({ field: field }, props, { children: children })));
+    }
+    return (_jsx("a", Object.assign({ href: field.value.url }, props, { children: children })));
+}

package/dist/esm/components/LinkPreview.js

@@ -0,0 +1,30 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname, useSearchParams, useRouter } from "next/navigation";
+export default function LinkPreview(_a) {
+    var { field, children } = _a, props = __rest(_a, ["field", "children"]);
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const pathname = usePathname();
+    return (_jsx("a", Object.assign({ href: field.value.url, onClick: (ev) => {
+            if (field.value.targetItemId) {
+                const current = new URLSearchParams(Array.from(searchParams.entries()));
+                current.set("itemid", field.value.targetItemId);
+                current.delete("version");
+                const newUrl = `${pathname}?${current.toString()}`;
+                router.push(newUrl);
+                ev.preventDefault();
+            }
+        } }, props, { children: children })));
+}

package/dist/esm/components/LockedFieldIndicator.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEditContext } from "../editor/editContext";
+import ReactDOM from "react-dom";
+export function LockedFieldIndicator({ elementRef, field, }) {
+    var _a, _b, _c, _d;
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const rect = (_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const editorRect = (_b = editContext.pageView.editorContainerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    if ((elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) &&
+        rect &&
+        editorRect &&
+        editContext.pageView.editorContainerRef.current) {
+        return ReactDOM.createPortal(_jsx("div", { className: "a-absolute a-bg-pink-300 a-text-xs a-text-white a-p-0.5 a-rounded hover:a-opacity-100 a-opacity-90", style: {
+                left: rect.left - editorRect.left + "px",
+                top: rect.top - editorRect.top + "px",
+            }, children: (_d = (_c = field._editor) === null || _c === void 0 ? void 0 : _c.lockedBy) === null || _d === void 0 ? void 0 : _d.user.name }), editContext.pageView.editorContainerRef.current);
+    }
+    return null;
+}

package/dist/esm/components/Picture.js

@@ -0,0 +1,133 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "server-only";
+import { hashImageUrl } from "../mediaProtection";
+import { getAlpacaContext } from "../alpacaContext";
+import { getRenderedPictureVariant, } from "./picture-shared";
+import { PictureEditorWrapper } from "./PictureEditorWrapper";
+export const Picture = (_a) => {
+    var _b, _c, _d, _e;
+    var { field, params, renderJsonLinkedData, renderEditButton } = _a, otherProps = __rest(_a, ["field", "params", "renderJsonLinkedData", "renderEditButton"]);
+    if (!field)
+        return null;
+    if (field.jsonValue) {
+        field = field.jsonValue;
+    }
+    if (!((_b = field.value) === null || _b === void 0 ? void 0 : _b.variants) || field.value.variants.length === 0)
+        return;
+    const mediaParams = typeof params === "object" && "default" in params ? params : undefined;
+    const defaultParams = (_d = (_c = mediaParams === null || mediaParams === void 0 ? void 0 : mediaParams.default) !== null && _c !== void 0 ? _c : params) !== null && _d !== void 0 ? _d : { variant: "auto" };
+    const sources = Object.keys(mediaParams !== null && mediaParams !== void 0 ? mediaParams : {}).filter((x) => x != "default");
+    //const variants = field.value?.variants;
+    // const img =
+    //   field.value?.variants.find(
+    //     (x) => x.name.toUpperCase() == defaultVariant?.toUpperCase()
+    //   ) ?? field.value?.variants[0];
+    //const attrs = { src: img?.src, ...otherProps };
+    //const video = img?.videoUrl;
+    //const videoAttr = { src: video, ...otherProps };
+    const renderPicture = () => {
+        var _a;
+        const defaultImg = (_jsx("img", Object.assign({}, otherProps, getSourceAttrs(field.value.variants, defaultParams), { alt: (_a = field.value) === null || _a === void 0 ? void 0 : _a.alt })));
+        if (!mediaParams || !(sources === null || sources === void 0 ? void 0 : sources.length))
+            return defaultImg;
+        else {
+            return (_jsxs("picture", Object.assign({}, otherProps, { children: [sources === null || sources === void 0 ? void 0 : sources.map((source) => (_jsx("source", Object.assign({}, getSourceAttrs(field.value.variants, mediaParams[source], source, defaultParams))))), defaultImg] })));
+        }
+    };
+    const picture = _jsx(_Fragment, { children: renderPicture() });
+    // {renderJsonLinkedData && !video ? (
+    //   <script
+    //     type="application/ld+json"
+    //     dangerouslySetInnerHTML={{
+    //       __html: JSON.stringify({
+    //         "@context": "http://schema.org",
+    //         "@type": "ImageObject",
+    //         image: img?.src,
+    //         description: field.value?.alt,
+    //         name: field.value?.name,
+    //       }),
+    //     }}
+    //   />
+    // ) : null}
+    // {video && <video {...videoAttr}></video>}
+    // {renderJsonLinkedData && video ? (
+    //   <script
+    //     type="application/ld+json"
+    //     dangerouslySetInnerHTML={{
+    //       __html: JSON.stringify({
+    //         "@context": "http://schema.org",
+    //         "@type": "VideoObject",
+    //         contentUrl: img?.src,
+    //         description: field.value?.alt,
+    //         name: field.value?.name,
+    //       }),
+    //     }}
+    //   />
+    // ) : null}
+    if ((_e = getAlpacaContext().pageContext) === null || _e === void 0 ? void 0 : _e.pageEditing)
+        return (_jsx(PictureEditorWrapper, { field: field, renderEditButton: renderEditButton, params: params, picture: picture }));
+    else
+        return picture;
+};
+const getScaledImage = (variant, params, maxWidth, scale = 1) => {
+    const width = (maxWidth !== null && maxWidth !== void 0 ? maxWidth : variant.width) * scale;
+    if (!params.aspectRatio) {
+        if (width >= variant.width)
+            return { src: variant.src, width: 0 };
+        else
+            return {
+                src: variant.src + `${variant.src.includes("?") ? "&" : "?"}mw=${width}`,
+                width: width,
+            };
+    }
+    else {
+        const height = width / params.aspectRatio;
+        if (width >= variant.width || height >= variant.height)
+            return { src: variant.src, width: 0 };
+        return {
+            src: variant.src +
+                `${variant.src.includes("?") ? "&" : "?"}w=${width}&h=${height}&crop=1`,
+            width: width,
+        };
+    }
+};
+function getSourceAttrs(variants, params, mediaQuery, defaultParams) {
+    var _a, _b;
+    const variant = getRenderedPictureVariant(params, variants);
+    if (!(variant === null || variant === void 0 ? void 0 : variant.src))
+        return;
+    const maxWidth = (_a = params.maxWidth) !== null && _a !== void 0 ? _a : defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams.maxWidth;
+    const srcSet = getSourceSet(variant, params, maxWidth, (_b = params.scales) !== null && _b !== void 0 ? _b : defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams.scales);
+    const props = { srcSet };
+    if (mediaQuery)
+        props.media = mediaQuery;
+    return props;
+}
+function getSourceSet(variant, params, maxWidth, scales) {
+    if (!scales || scales.length === 0) {
+        const scaledImage = getScaledImage(variant, params);
+        const srcSet = hashImageUrl(scaledImage.src);
+        return srcSet;
+    }
+    let srcSet = "";
+    for (let w = 0; w < scales.length; w++) {
+        const scaledImage = getScaledImage(variant, params, maxWidth, scales[w]);
+        if (srcSet.length)
+            srcSet = srcSet + ", ";
+        srcSet += hashImageUrl(scaledImage.src) + " " + scales[w] + "x";
+        if (scaledImage.width === 0)
+            break;
+    }
+    return srcSet;
+}

package/dist/esm/components/PictureEditor.js

@@ -0,0 +1,77 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { PictureEditorDialog } from "../editor/PictureEditorDialog";
+import { getFieldContextMenu } from "../editor/ContextMenu";
+import { isFieldActionExecuting } from "../editor/utils";
+import { useEditContext, useEditFrameContext } from "../editor";
+export const PictureEditor = (_a) => {
+    var _b, _c, _d, _e;
+    var { field, params, renderEditButton, picture } = _a, otherProps = __rest(_a, ["field", "params", "renderEditButton", "picture"]);
+    const editContext = useEditContext();
+    const [editorVisible, setEditorVisible] = useState(false);
+    if (!editContext)
+        return;
+    const editFrameContext = useEditFrameContext();
+    if (!editFrameContext)
+        return;
+    useEffect(() => {
+        var _a;
+        if (renderEditButton &&
+            editFrameContext.componentId === ((_a = field === null || field === void 0 ? void 0 : field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item.id) &&
+            !editFrameContext.customButtons.find((x) => { var _a; return x.id == "edit-image-" + ((_a = field === null || field === void 0 ? void 0 : field._editor) === null || _a === void 0 ? void 0 : _a.name); })) {
+            editFrameContext.setCustomButtons([
+                ...editFrameContext.customButtons,
+                {
+                    id: "edit-image-" + (field === null || field === void 0 ? void 0 : field._editor.name),
+                    icon: "pi pi-image",
+                    label: "Edit " + (field === null || field === void 0 ? void 0 : field._editor.name),
+                    onClick: () => {
+                        launchEditor();
+                    },
+                },
+            ]);
+        }
+        editContext.registerAsRenderedField(field);
+    }, []);
+    let className = (otherProps.className ? otherProps.className + " " : "") +
+        "a-cursor-pointer a-inline-block";
+    const onContextMenu = getFieldContextMenu(field, editContext, [
+        {
+            id: "edit-image-" + ((_b = field === null || field === void 0 ? void 0 : field._editor) === null || _b === void 0 ? void 0 : _b.name),
+            icon: "pi pi-image",
+            onClick: () => launchEditor(),
+            label: "Edit " + ((_c = field === null || field === void 0 ? void 0 : field._editor) === null || _c === void 0 ? void 0 : _c.name),
+        },
+    ]);
+    if (isFieldActionExecuting(field, editContext))
+        className += " a-executing-action a-focus-shadow ";
+    const launchEditor = () => {
+        var _a, _b, _c;
+        if (((_a = field._editor) === null || _a === void 0 ? void 0 : _a.canWrite) &&
+            ((_b = field._editor) === null || _b === void 0 ? void 0 : _b.hasLock) &&
+            editFrameContext.isSelected)
+            setEditorVisible(true);
+        editContext.setFocusedField((_c = field._editor) === null || _c === void 0 ? void 0 : _c.descriptor, true);
+    };
+    const props = Object.assign(Object.assign({}, otherProps), { onContextMenu,
+        className, onClick: (e) => {
+            //only handle primary mouse button
+            if ((e === null || e === void 0 ? void 0 : e.button) !== 0)
+                return;
+            if (!(e === null || e === void 0 ? void 0 : e.ctrlKey) && !(e === null || e === void 0 ? void 0 : e.altKey))
+                launchEditor();
+        } });
+    return (_jsxs(_Fragment, { children: [React.cloneElement(picture, props), !((_e = (_d = field === null || field === void 0 ? void 0 : field.value) === null || _d === void 0 ? void 0 : _d.variants) === null || _e === void 0 ? void 0 : _e.find((x) => x.src)) && (_jsx("div", Object.assign({}, props, { children: _jsx("div", { className: "pi pi-image a-text-6xl a-text-gray-300" }) }))), editorVisible && (_jsx(PictureEditorDialog, { field: field, params: params, onCancel: () => setEditorVisible(false), onOk: () => setEditorVisible(false) }))] }));
+};

package/dist/esm/components/PictureEditorWrapper.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+const PictureEditor = dynamic(() => import("./PictureEditor").then((dnd) => dnd.PictureEditor), { ssr: false });
+export const PictureEditorWrapper = (props) => {
+    return _jsx(PictureEditor, Object.assign({}, props));
+};

package/dist/esm/components/Placeholder.js

@@ -0,0 +1,117 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "server-only";
+import { useAlpacaContext } from "../alpacaContext";
+import { PlaceholderDropZoneHost } from "../editor/PlaceholderDropZoneHost";
+import { EditFrameWrapper } from "../editor/EditFrameWrapper";
+import Slot from "./Slot";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorFallback } from "./Error";
+import React from "react";
+export function Placeholder({ name, description, content, tag, className, mapComponent, getComponentProps, }) {
+    const data = content;
+    if (!data || !("placeholders" in data))
+        return;
+    const placeholderData = data.placeholders.find((x) => x.name == name);
+    if (!placeholderData)
+        return;
+    const context = useAlpacaContext();
+    const components = placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.components.filter((c) => c.visible).map((component, index) => {
+        if (component.componentType == "Slot")
+            return {
+                Component: Slot,
+                data: component,
+                parent: data,
+            };
+        const componentType = mapComponent
+            ? mapComponent({ data: component, index })
+            : component.componentType;
+        if (!context.components) {
+            console.log("No components registered");
+            return {
+                data: { name: componentType, id: "0" },
+                Component: ComponentNotFound,
+            };
+        }
+        const reactComponent = context.components[componentType];
+        if (!reactComponent) {
+            console.log("Could not find module for component type: " + componentType);
+            return {
+                data: { name: componentType, id: "0" },
+                Component: ComponentNotFound,
+            };
+        }
+        return {
+            parent: data,
+            data: component,
+            Component: reactComponent,
+        };
+    });
+    function wrap(children) {
+        if (!tag)
+            return children;
+        if (context.pageContext.pageEditing || components.length > 0) {
+            return React.createElement(tag, { className }, children);
+        }
+    }
+    // const mappedComponents = mapComponent
+    //   ? components.map(({ Component, data, parent }, index) => ({
+    //       Component: mapComponent({
+    //         Component,
+    //         data: data as ComponentData,
+    //         index,
+    //       }),
+    //       data,
+    //       parent,
+    //     }))
+    //   : components;
+    const componentsWithProps = components.map(({ Component, data, parent }, index) => {
+        const defaultProps = {
+            component: data,
+            index,
+            count: components.length,
+        };
+        var props = getComponentProps
+            ? getComponentProps(defaultProps)
+            : defaultProps;
+        return { Component, props, data, parent };
+    });
+    if (context.pageContext.pageEditing) {
+        let phIndex = 0;
+        return wrap(_jsxs(_Fragment, { children: [componentsWithProps.map(({ Component, props, data, parent }) => {
+                    try {
+                        return (_jsxs(_Fragment, { children: [(!data._editor.hostingPageItem ||
+                                    data.componentType == "Slot") && (_jsx(PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, description: description, placeholder: placeholderData, index: phIndex++ }, data.id + "_zone" + phIndex)), _jsx(EditFrameWrapper, { componentId: data.id, index: phIndex, children: _jsx(Component, Object.assign({}, props)) }, data.id)] }));
+                    }
+                    catch (e) {
+                        return (_jsxs("div", { children: ["Error rendering component ", data.name, ": ", e.message] }));
+                    }
+                }), (!data._editor.hostingPageItem ||
+                    data.componentType == "Slot") && (_jsx(PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, description: description, placeholder: placeholderData, index: phIndex++ }, data.id + "_zone" + phIndex))] }));
+    }
+    else {
+        return wrap(_jsx(_Fragment, { children: components.map(({ Component, data }, index) => {
+                var props = getComponentProps
+                    ? getComponentProps({
+                        component: data,
+                        index,
+                        count: components.length,
+                    })
+                    : {
+                        component: data,
+                        index,
+                        count: components.length,
+                    };
+                return (_jsx(_Fragment, { children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: _createElement(Component, Object.assign({}, props, { key: data.id })) }, data.id) }));
+            }) }));
+    }
+}
+function ComponentNotFound({ component }) {
+    return (_jsxs("div", { style: {
+            backgroundColor: "orange",
+            color: "red",
+            fontSize: 18,
+            padding: 10,
+            border: "3px solid red",
+        }, children: ["Component not found: ", component.name] }));
+}