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

package/dist/esm/editor/EditHistory.js

@@ -1,26 +0,0 @@
-"use client";
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-export function EditHistory({ operations }) {
-    if (!operations)
-        return;
-    const description = (op) => {
-        if (op.type === "add-component")
-            return _jsxs(_Fragment, { children: ["Add ", op.itemName] });
-        if (op.type === "link-component")
-            return _jsxs(_Fragment, { children: ["Insert ", op.itemName] });
-        if (op.type === "remove-component")
-            return _jsxs(_Fragment, { children: ["Remove ", op.id] });
-        if (op.type === "edit-field") {
-            const editFieldOp = op;
-            return (_jsxs(_Fragment, { children: ["Edit ", editFieldOp.fieldName, _jsxs("span", { className: "a-text-gray-400 a-ml-1", children: ["(", editFieldOp.itemName, ", ", editFieldOp.language, ",", " ", editFieldOp.version, ")"] })] }));
-        }
-        return _jsx("div", { children: op.type });
-    };
-    return (_jsxs("div", { className: "a-inset-0 a-absolute", children: [_jsx("div", { className: "a-p-2 a-bg-gray-100 a-m-1", children: "History" }), _jsx("div", { className: "a-flex a-flex-col a-overflow-y-auto a-overflow-x-hidden", style: { height: "calc(100% - 45px)" }, children: operations.map((o, i) => singleOperation(i, o)) })] }));
-    function singleOperation(i, o) {
-        let className = "a-border-b a-p-2 a-flex a-justify-between";
-        if (o.undone)
-            className = className + " a-text-gray-300";
-        return (_jsxs("div", { className: className, children: [_jsx("div", { children: _jsx("small", { className: "a-text-color-secondary", children: description(o) }) }), _jsx("div", { className: "a-text-xs", children: o.user })] }, i));
-    }
-}

package/dist/esm/editor/Editor.js

@@ -1,23 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useAlpacaContext, } from "..";
-import { EditorClientHost } from "./EditorClientHost";
-export function Editor({ children, content, }) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const data = yield content;
-        if (data.type !== "page")
-            return;
-        if (!data.editing)
-            return _jsx(_Fragment, { children: children });
-        var alpacaContext = useAlpacaContext();
-        return (_jsx(_Fragment, { children: _jsx(EditorClientHost, { content: data, dictionaryObject: alpacaContext.dictionary, edit: alpacaContext.edit, children: children }) }));
-    });
-}

package/dist/esm/editor/EditorClient.js

@@ -1,477 +0,0 @@
-"use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
-import uuid from "react-uuid";
-import { PrimeReactProvider } from "primereact/api";
-import { Menubar } from "primereact/menubar";
-import { ProgressSpinner } from "primereact/progressspinner";
-import { TabView, TabPanel } from "primereact/tabview";
-import { Toast } from "primereact/toast";
-import { Splitter, SplitterPanel } from "primereact/splitter";
-import { BlockUI } from "primereact/blockui";
-import { ConfirmDialog, confirmDialog } from "primereact/confirmdialog";
-import { Sidebar } from "primereact/sidebar";
-import { EditContextProvider, } from "..";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { FieldList } from "./FieldList";
-import { GraphQL } from "./GraphQL";
-import { ComponentTree } from "./ComponentTree";
-import { ComponentInfo } from "./ComponentInfo";
-import { LanguageSelector } from "./LanguageSelector";
-import { findComponent } from "./componentTreeHelper";
-import { ComponentPalette } from "./ComponentPalette";
-import { DictionaryEditor } from "./DictionaryEditor";
-import { AiTerminal } from "./AiTerminal";
-import { EditHistory } from "./EditHistory";
-import { Debug } from "./Debug";
-import { PageInfo } from "./PageInfo";
-import { VersionSelector } from "./VersionSelector";
-import { commitChanges, currentOperation, executeRedo, executeUndo, executeEditOperation, setCurrentOperation, } from "./editService";
-import "../../editor.css";
-import "../../primereact/resources/primereact.min.css";
-import "../../primeicons/primeicons.css";
-import "../../primereact/resources/themes/lara-light-indigo/theme.css";
-// Hook
-function useEventListener(eventName, handler, element) {
-    // Create a ref that stores handler
-    const savedHandler = useRef();
-    // Update ref.current value if handler changes.
-    // This allows our effect below to always get latest handler ...
-    // ... without us needing to pass it in effect deps array ...
-    // ... and potentially cause effect to re-run every render.
-    useEffect(() => {
-        savedHandler.current = handler;
-    }, [handler]);
-    useEffect(() => {
-        // Make sure element supports addEventListener
-        // On
-        const isSupported = element && element.addEventListener;
-        if (!isSupported)
-            return;
-        // Create event listener that calls handler function stored in ref
-        const eventListener = (event) => savedHandler.current(event);
-        // Add event listener
-        element.addEventListener(eventName, eventListener);
-        // Remove event listener on cleanup
-        return () => {
-            element.removeEventListener(eventName, eventListener);
-        };
-    }, [eventName, element] // Re-run if eventName or element changes
-    );
-}
-export function EditorClient({ content, dictionaryObject, edit, children, }) {
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    const [selection, setSelection] = useState([]);
-    const [selectedForInsertion, setSelectedForInsertion] = useState("");
-    const [liveUpdatingFields, setLiveUpdatingFields] = useState([]);
-    const [currentEditOperation, setCurrentEditOperation] = useState();
-    const [dictionary, setDictionary] = useState(dictionaryObject);
-    const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = useState([]);
-    const [editData, setEditData] = useState(edit);
-    const [refreshCompletedFlag, setRefreshCompletedFlag] = useState(false);
-    const [updateContentEditingFields, setUpdateContentEditingFields] = useState(false);
-    const [page, setPageData] = useState(null);
-    const [uiBlocked, setUiBlocked] = useState(false);
-    const [componentsPaletteVisible, setComponentsPaletteVisible] = useState(false);
-    const [dragObject, setDragObject] = useState();
-    const [hidePalette, setHidePalette] = useState(false);
-    const [refreshTimer, setRefreshTimer] = useState();
-    const sessionId = searchParams.get("session");
-    if (!sessionId)
-        return;
-    function switchLanguage(language) {
-        const current = new URLSearchParams(Array.from(searchParams.entries()));
-        current.set("language", language);
-        const newUrl = `${pathname}?${current.toString()}`;
-        router.replace(newUrl, { scroll: false });
-    }
-    function switchVersion(version) {
-        const current = new URLSearchParams(Array.from(searchParams.entries()));
-        current.set("version", version.toString());
-        const newUrl = `${pathname}?${current.toString()}`;
-        router.replace(newUrl, { scroll: false });
-    }
-    function handleErrorResult(result) {
-        if (result.type === "error") {
-            showErrorToast(result);
-            return true;
-        }
-        if (result.type === "unauthenticated") {
-            confirmDialog({
-                header: "Not logged in",
-                message: "You are not logged in anymore. Proceed to login page?",
-                accept: () => {
-                    window.location.href = edit.loginUrl;
-                },
-            });
-            showErrorToast(result);
-            return true;
-        }
-    }
-    useEffect(() => {
-        if (selection.length)
-            setSelectedForInsertion("");
-    }, [selection]);
-    useEffect(() => {
-        const sync = () => __awaiter(this, void 0, void 0, function* () {
-            if (currentEditOperation) {
-                const result = yield executeEditOperation(currentEditOperation, sessionId);
-                if (handleErrorResult(result))
-                    return;
-                if ((result.id && edit.operations.length == 0) ||
-                    edit.operations[edit.operations.length - 1].id !=
-                        result.id) {
-                    edit.operations = edit.operations.filter((x) => !x.undone);
-                    edit.operations.push(result);
-                    setEditData(Object.assign({}, edit));
-                }
-                if (result.type === "add-component" ||
-                    result.type === "link-component") {
-                    console.log("CURRENT: " + JSON.stringify(result));
-                    setSelection([result.componentId]);
-                }
-                if (!currentEditOperation.noRefresh)
-                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod
-                        ? "waitForQuietPeriod"
-                        : "delayed");
-            }
-        });
-        sync();
-    }, [currentEditOperation]);
-    const requestRefresh = (mode) => {
-        if (mode === "immediate") {
-            console.log("Immediate refresh requested");
-            clearTimeout(refreshTimer);
-            router.refresh();
-            setRefreshCompletedFlag(!refreshCompletedFlag);
-            setRefreshTimer(undefined);
-            return;
-        }
-        console.log("request refresh with mode: " + mode);
-        if (mode === "waitForQuietPeriod" && refreshTimer) {
-            clearTimeout(refreshTimer);
-        }
-        if (!refreshTimer || mode === "waitForQuietPeriod") {
-            setRefreshTimer(setTimeout(() => {
-                console.log("refreshing");
-                router.refresh();
-                setRefreshCompletedFlag(!refreshCompletedFlag);
-                setRefreshTimer(undefined);
-            }, mode === "waitForQuietPeriod" ? 2000 : 1000));
-        }
-    };
-    const saveAndRefresh = (callback) => __awaiter(this, void 0, void 0, function* () {
-        if (!edit.operations.length) {
-            if (callback)
-                callback();
-            return;
-        }
-        setUiBlocked(true);
-        if (!(yield commitChanges(sessionId))) {
-            setUiBlocked(false);
-            return;
-        }
-        router.refresh();
-        //setEditOperations([]);
-        setUiBlocked(false);
-        toast.current.show({
-            severity: "success",
-            summary: "Saved",
-            detail: "Your changes were saved successfully.",
-            life: 3000,
-        });
-        if (callback)
-            callback();
-    });
-    // function ensureSaved(callback: () => void) {
-    //   if (!edit.operations.length) {
-    //     callback();
-    //     return;
-    //   }
-    //   confirmDialog({
-    //     message: "Save changes?",
-    //     header: "Save changes?",
-    //     icon: "pi pi-exclamation-triangle",
-    //     accept: () => saveAndRefresh(callback),
-    //     reject: callback,
-    //   });
-    // }
-    function handleKeyDown(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (event.ctrlKey && event.key === "s") {
-                event.preventDefault();
-                yield saveAndRefresh();
-            }
-            if (event.ctrlKey && event.key === "z") {
-                event.preventDefault();
-                yield undo();
-            }
-            if (event.ctrlKey && event.key === "y") {
-                event.preventDefault();
-                yield redo();
-            }
-        });
-    }
-    if (typeof window !== "undefined")
-        useEventListener("keydown", handleKeyDown, window);
-    const toast = useRef();
-    useEffect(() => {
-        setPageData(content);
-    }, [content]);
-    useEffect(() => {
-        setEditData(edit);
-    }, [edit]);
-    function getComponentById(id) {
-        if (!page)
-            return null;
-        return findComponent(id, page.placeholders);
-    }
-    function redo() {
-        return __awaiter(this, void 0, void 0, function* () {
-            setUpdateContentEditingFields(!updateContentEditingFields);
-            let result = yield executeRedo(sessionId);
-            if (result.type === "success") {
-                router.refresh();
-                return true;
-            }
-            else {
-                showErrorToast(result);
-                return false;
-            }
-        });
-    }
-    function showErrorToast(result) {
-        toast.current.show({
-            severity: "error",
-            summary: result.summary,
-            detail: result.details,
-            life: 3000,
-        });
-    }
-    function undo() {
-        return __awaiter(this, void 0, void 0, function* () {
-            setUpdateContentEditingFields(!updateContentEditingFields);
-            let result = yield executeUndo(sessionId);
-            if (result.type === "success") {
-                router.refresh();
-                return true;
-            }
-            else {
-                showErrorToast(result);
-                return false;
-            }
-        });
-    }
-    const getLiveField = (field) => {
-        const existingField = liveUpdatingFields.find((f) => f.id === field.id &&
-            f.language === field.language &&
-            f.version === field.version &&
-            f.itemId === field.itemId);
-        if (existingField)
-            return existingField;
-        setLiveUpdatingFields([...liveUpdatingFields, field]);
-        return field;
-    };
-    const selectedComponent = selection.length === 1 && page ? getComponentById(selection[0]) : null;
-    const editField = (field, value, noRefresh = true) => {
-        var _a;
-        if (!page)
-            return;
-        const component = findComponent(field.itemId, page.placeholders);
-        let op = currentOperation;
-        if (!op ||
-            op.type !== "edit-field" ||
-            op.itemId !== field.itemId ||
-            op.fieldId !== field.id ||
-            op.language !== field.language ||
-            op.version !== field.version) {
-            op = {
-                type: "edit-field",
-                itemId: field.itemId,
-                fieldId: field.id,
-                version: field.version,
-                language: field.language,
-                fieldName: field.name,
-                itemName: field.itemId == page.id ? "Page" : (_a = component === null || component === void 0 ? void 0 : component.name) !== null && _a !== void 0 ? _a : "<unknown>",
-                pageItemId: page.id,
-                pageItemLanguage: page.language,
-                pageItemVersion: page.version,
-                date: new Date(),
-                id: uuid(),
-            };
-        }
-        op.date = new Date();
-        op.noRefresh = noRefresh;
-        op.refreshAfterQuietPeriod = !noRefresh;
-        op.value = value;
-        getLiveField(field).value = value;
-        function getField(fields, id) {
-            return Object.values(fields).find((f) => f.id === id);
-        }
-        if (component) {
-            const f = getField(component.fields, field.id);
-            if (f && f.value != value) {
-                f.value = value;
-            }
-        }
-        else {
-            const f = getField(page.fields, field.id);
-            if (f && f.value != value)
-                f.value = value;
-        }
-        setCurrentOperation(op);
-        setCurrentEditOperation(Object.assign({}, op));
-    };
-    const menuItems = [
-        {
-            label: "Save",
-            icon: "pi pi-fw pi-save text-red",
-            command: () => saveAndRefresh(),
-        },
-        {
-            label: "Insert",
-            icon: "pi pi-fw pi-sitemap",
-            command: () => setComponentsPaletteVisible(true),
-        },
-    ];
-    const spinner = _jsx(ProgressSpinner, {});
-    const endContent = (_jsxs(_Fragment, { children: [_jsx(LanguageSelector, { page: page, onLanguageSelected: (language) => {
-                    if (!language)
-                        return;
-                    //ensureSaved(() => switchLanguage(language));
-                    switchLanguage(language);
-                } }), _jsx(VersionSelector, { page: page, onVersionSelected: (version) => {
-                    switchVersion(version);
-                } })] }));
-    return (_jsxs(EditContextProvider, { value: {
-            sessionId: sessionId,
-            selection,
-            setSelection,
-            selectedForInsertion,
-            setSelectedForInsertion,
-            editField,
-            getComponentById,
-            dragObject,
-            dictionary,
-            setDictionary,
-            requestRefresh,
-            refreshCompletedFlag,
-            unresolvedDictionaryKeys,
-            setUnresolvedDictionaryKeys,
-            updateContentEditingFields,
-            getLiveField,
-            showToast: () => { },
-            removeComponent: (componentId, callback) => {
-                confirmDialog({
-                    message: "Are you sure you want to remove this component?",
-                    header: "Remove component",
-                    icon: "pi pi-exclamation-triangle",
-                    accept: () => {
-                        var _a;
-                        const op = {
-                            type: "remove-component",
-                            date: new Date(),
-                            id: uuid(),
-                            pageItemId: page.id,
-                            pageItemLanguage: page.language,
-                            pageItemVersion: page.version,
-                            componentId,
-                            componentName: (_a = getComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.name,
-                        };
-                        setCurrentEditOperation(op);
-                        callback(true);
-                    },
-                });
-            },
-            openComponentPalette: () => setComponentsPaletteVisible(true),
-            dragStart: (dragObject) => {
-                console.log("dragging " + JSON.stringify(dragObject));
-                setDragObject(dragObject);
-            },
-            droppedInPlaceholder: (placeholderKey, index) => __awaiter(this, void 0, void 0, function* () {
-                if (!dragObject)
-                    return;
-                console.log(dragObject.templateId +
-                    " dropped in " +
-                    placeholderKey +
-                    " " +
-                    index);
-                // console.log(JSON.stringify(page));
-                const placeholderKeyComponents = placeholderKey.split("_");
-                const parentId = placeholderKeyComponents.length === 1
-                    ? null
-                    : placeholderKeyComponents[0];
-                const placeholderName = placeholderKeyComponents.length === 1
-                    ? placeholderKeyComponents[0]
-                    : placeholderKeyComponents[1];
-                let op;
-                if (dragObject.type == "template") {
-                    op = {
-                        type: "add-component",
-                        pageItemId: page.id,
-                        pageItemLanguage: page.language,
-                        pageItemVersion: page.version,
-                        parentItemId: parentId,
-                        placeholderName: placeholderName,
-                        placeholderIndex: index,
-                        templateId: dragObject === null || dragObject === void 0 ? void 0 : dragObject.templateId,
-                        date: new Date(),
-                        id: uuid(),
-                    };
-                }
-                if (dragObject.type == "component" ||
-                    (dragObject.type == "link-component" && dragObject.componentId)) {
-                    op = {
-                        type: dragObject.type == "link-component"
-                            ? "link-component"
-                            : "move-component",
-                        pageItemId: page.id,
-                        pageItemLanguage: page.language,
-                        pageItemVersion: page.version,
-                        parentItemId: parentId,
-                        placeholderName: placeholderName,
-                        placeholderIndex: index,
-                        componentId: dragObject.componentId,
-                        date: new Date(),
-                        id: uuid(),
-                    };
-                }
-                //const newOps = [...editOperations, op];
-                //setEditOperations();
-                // await sendEditOperationsToServer(newOps as EditOperation[]);
-                // router.refresh();
-                //setEditOperations(newOps);
-                if (op)
-                    setCurrentEditOperation(op);
-                setDragObject(undefined);
-            }),
-        }, children: [_jsx(Toast, { ref: toast }), _jsxs(PrimeReactProvider, { children: [_jsx(ConfirmDialog, {}), _jsx(Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), header: "Insert component", pt: {
-                            mask: {
-                                onDragOver: () => setHidePalette(true),
-                                style: {
-                                    left: hidePalette || !componentsPaletteVisible ? "100vw" : 0,
-                                },
-                            },
-                        }, children: page && (_jsx(ComponentPalette, { page: page, selection: selection, dragStart: (dragObject) => {
-                                //console.log("dragging " + JSON.stringify(dragObject));
-                                setDragObject(dragObject);
-                            }, dragEnd: () => {
-                                setDragObject(undefined);
-                                if (hidePalette) {
-                                    setComponentsPaletteVisible(false);
-                                    setHidePalette(false);
-                                }
-                                setSelectedForInsertion("");
-                            } })) }), _jsxs(BlockUI, { blocked: uiBlocked, template: spinner, children: [_jsx(Menubar, { model: menuItems, end: endContent }), _jsxs(Splitter, { children: [_jsx(SplitterPanel, { size: 30, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 30, className: "a-overflow-hidden a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(ComponentTree, { page: page, selection: selection }) }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && (_jsxs(TabPanel, { header: "Fields", children: [_jsx(ComponentInfo, { component: selectedComponent }), _jsx(FieldList, { fields: selectedComponent.fields })] })), selectedComponent && (_jsx(TabPanel, { header: "GraphQL", style: { height: "100%" }, children: _jsx(GraphQL, { component: selectedComponent }) })), _jsxs(TabPanel, { header: "Page", children: [page && _jsx(PageInfo, { page: page }), page && _jsx(FieldList, { fields: page.fields })] }), _jsx(TabPanel, { header: "Dictionary", children: _jsx(DictionaryEditor, { dictionary: dictionary }) }), _jsx(TabPanel, { header: "Debug", children: _jsx(Debug, { component: selectedComponent, page: page }) })] }) })] }) }), _jsx(SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: _jsx("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), _jsx(SplitterPanel, { size: 15, children: _jsxs(Splitter, { layout: "vertical", className: "alpaca-editor", children: [_jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), _jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
-}

package/dist/esm/editor/EditorClientHost.js

@@ -1,7 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import dynamic from "next/dynamic";
-const EditorClient = dynamic(() => import("./EditorClient").then((dnd) => dnd.EditorClient), { ssr: false });
-export function EditorClientHost({ content, dictionaryObject, children, edit, }) {
-    return (_jsx(EditorClient, { content: content, dictionaryObject: dictionaryObject, edit: edit, children: children }));
-}

package/dist/esm/editor/FieldList.js

@@ -1,60 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEditContext, } from "..";
-import { InputText } from "primereact/inputtext";
-import { Checkbox } from "primereact/checkbox";
-import { SingleLineText } from "./fieldTypes/SingleLineText";
-import { RichTextEditor } from "./fieldTypes/RichTextEditor";
-export function FieldList({ fields }) {
-    const editContext = useEditContext();
-    if (!editContext)
-        if (!fields)
-            return;
-    if (!Array.isArray(fields))
-        fields = Object.values(fields);
-    const sections = fields.reduce((acc, value) => {
-        // Group initialization
-        if (!acc[value.section || "Default"]) {
-            acc[value.section || "Default"] = [];
-        }
-        // Grouping
-        acc[value.section || "Default"].push(value);
-        return acc;
-    }, {});
-    const sectionList = Object.values(sections);
-    sectionList.sort((a, b) => b[0].sortOrder - a[0].sortOrder);
-    return (_jsx("div", { className: "a-p-1", children: Object.keys(sections).map((section) => (_jsxs("div", { children: [_jsx("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section], editContext)] }, section))) }));
-}
-function getSectionFields(fields, editContext) {
-    return fields
-        .map((field) => editContext.getLiveField(field))
-        .map((field) => (_jsxs("div", { children: [_jsx("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? (_jsx("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : (_jsx("button", { children: "Fallback" })), _jsx("div", { children: getFieldEditor(field) })] }, field.id)));
-}
-function getFieldEditor(field) {
-    switch (field.type) {
-        case "checkbox":
-            return checkbox(field);
-        case "picture":
-            return picture(field);
-        case "image":
-            return image(field);
-        case "rich text":
-            return _jsx(RichTextEditor, { field: field });
-        default:
-            return _jsx(SingleLineText, { field: field });
-    }
-}
-function checkbox(field) {
-    return _jsx(Checkbox, { checked: field.value === "1" });
-}
-// function singleLineText(field: Field) {
-//   return <InputText value={field.value as string} />;
-// }
-function picture(field) {
-    var _a, _b;
-    return (_jsxs(_Fragment, { children: [_jsx("label", { className: "alpaca-minor-label", children: "Alt" }), _jsx(InputText, { value: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.alt) !== null && _b !== void 0 ? _b : "" })] }));
-}
-function image(field) {
-    var _a, _b;
-    return (_jsxs(_Fragment, { children: [_jsx("label", { className: "alpaca-minor-label", children: "Alt" }), _jsx(InputText, { value: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.altText) !== null && _b !== void 0 ? _b : "" })] }));
-}