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

package/dist/esm/editor/sidebar/ComponentTree.js

@@ -0,0 +1,237 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditContext } from "../editContext";
+import { Tree, } from "primereact/tree";
+import { useEffect, useRef, useState } from "react";
+import { Tag } from "primereact/tag";
+import { confirmDialog } from "primereact/confirmdialog";
+import { getComponentCommands } from "../commands/componentCommands";
+import { Tooltip } from "primereact/tooltip";
+function mapPlaceholderNode(p, parent) {
+    const node = {
+        key: p.key,
+        componentId: p.key,
+        label: p.name,
+        data: p,
+        icon: "pi pi-folder",
+        parent: parent,
+        droppable: true,
+    };
+    node.children = p.components.map((c) => mapComponentNode(c, node));
+    return node;
+}
+function mapPlaceholders(c, parent) {
+    if (c.placeholders.length > 1)
+        return c.placeholders.map((x) => mapPlaceholderNode(x, parent));
+    else if (c.placeholders.length > 0)
+        return c.placeholders[0].components.map((c) => mapComponentNode(c, parent));
+    return [];
+}
+function mapComponentNode(c, parent) {
+    var _a;
+    const node = {
+        key: c._editor.linkItemId + "_" + c.id || c.id,
+        componentId: c.id,
+        label: c.name,
+        icon: "pi pi-stop",
+        data: c,
+        parent: parent,
+        tags: [],
+        droppable: true,
+        className: c._editor.isRemovedFromMasterLanguage ? "a-text-gray-400" : "",
+    };
+    // if (c.translations && c.translations.length > 1)
+    //   node.tags!.push({
+    //     severity: "info",
+    //     value: c.translations!.length + " Languages",
+    //     icon: "pi pi-flag",
+    //   });
+    if (c._editor.isInheritedFromMasterLanguage) {
+        node.tags.push({
+            id: "inherited",
+            severity: "info",
+            value: "Inherited " +
+                (c._editor.isRemovedFromMasterLanguage ? " / removed" : ""),
+            tooltip: c._editor.isRemovedFromMasterLanguage
+                ? "Component was removed from master language"
+                : "Component is inherited from master language",
+            icon: "pi pi-caret-right",
+        });
+    }
+    if (c._editor.hostingPageItem) {
+        node.tags.push({
+            id: "layout",
+            severity: "warning",
+            value: "Layout",
+            icon: "",
+            color: "rgb(192 132 252)",
+            tooltip: "Component is inherited from layout. Click to edit layout.",
+            onClick: () => {
+                var _a;
+                confirmDialog({
+                    header: "Edit layout",
+                    message: "Edit layout " + ((_a = c._editor.hostingPageItem) === null || _a === void 0 ? void 0 : _a.path) + "?",
+                    accept: () => window.open(c._editor.hostingPageItem.editUrl, "_blank"),
+                });
+            },
+        });
+    }
+    if (c._editor.linkedComponentItem) {
+        node.tags.push({
+            id: "linked",
+            severity: "warning",
+            value: "Shared",
+            icon: "",
+            tooltip: "Component is linked to " + ((_a = c._editor.linkedComponentItem) === null || _a === void 0 ? void 0 : _a.path),
+            color: "rgb(251, 146, 60)",
+        });
+    }
+    if (!c.visible) {
+        node.tags.push({
+            id: "hidden",
+            severity: "warning",
+            value: "Hidden",
+            icon: "pi pi-exclamation-triangle",
+            color: "rgb(251, 146, 60)",
+            tooltip: "Component is hidden. " +
+                (c._editor.messages ? c._editor.messages.join(", ") : ""),
+        });
+    }
+    node.children = mapPlaceholders(c, node);
+    return node;
+}
+export function ComponentTree({}) {
+    const [expandedKeys, setExpandedKeys] = useState({
+        "0": true,
+    });
+    const [selectedKeys, setSelectedKeys] = useState();
+    let editContext = useEditContext();
+    const treeRef = useRef(null);
+    useEffect(() => {
+        if (treeRef.current) {
+            const selectedNodeKey = Object.keys(selectedKeys || {})[0];
+            const selectedNodeElement = treeRef.current.querySelector(`[data-key="${selectedNodeKey}"]`);
+            if (selectedNodeElement) {
+                selectedNodeElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "nearest",
+                });
+            }
+        }
+    }, [selectedKeys]);
+    const selection = (editContext === null || editContext === void 0 ? void 0 : editContext.selection) || [];
+    const page = editContext === null || editContext === void 0 ? void 0 : editContext.page;
+    useEffect(() => {
+        const newSelectedKeys = {};
+        selection.forEach((id) => {
+            const nodes = findNodesByComponentId(id, nodeDictionary);
+            nodes.forEach((nodeId) => {
+                newSelectedKeys[nodeId] = true;
+            });
+        });
+        const newExpandedKeys = Object.assign({}, expandedKeys);
+        Object.keys(newSelectedKeys).forEach((id) => {
+            const node = nodeDictionary[id];
+            if (node)
+                expandParents(node.parent, newExpandedKeys);
+        });
+        if (!hasSameProps(newExpandedKeys, expandedKeys))
+            setExpandedKeys(newExpandedKeys);
+        setSelectedKeys(newSelectedKeys);
+    }, [selection]);
+    if (!editContext)
+        return;
+    if (!page)
+        return _jsx(_Fragment, {});
+    const treeNodes = mapPlaceholders(page, {});
+    const nodeDictionary = {};
+    createMap(treeNodes, nodeDictionary);
+    const nodeTemplate = (node, options) => {
+        var _a;
+        let label = (_jsxs("span", { "data-key": node.key, className: "a-flex a-items-center", children: [_jsx("span", { className: node.className, children: node.label }), (_a = node.tags) === null || _a === void 0 ? void 0 : _a.map((x) => (_jsxs("span", { children: [_jsx(Tag, { id: "id-" + node.key + x.id, icon: x.icon, value: x.value, severity: x.severity, onClick: x.onClick, style: {
+                                backgroundColor: x.color,
+                                marginLeft: "8px",
+                                fontSize: "10px",
+                                padding: "1px 4px 2px 2px",
+                            } }), _jsx(Tooltip, { target: "#id-" + node.key + x.id, content: x.tooltip })] }, node.key + x.id)))] }));
+        return _jsx("span", { className: options.className, children: label });
+    };
+    return (_jsx("div", { className: "a-p-1", ref: treeRef, children: _jsx(Tree, { value: treeNodes, selectionMode: "multiple", selectionKeys: selectedKeys, className: "a-w-full alpaca-no-border a-text-xs", onToggle: (e) => setExpandedKeys(e.value), expandedKeys: expandedKeys, nodeTemplate: nodeTemplate, dragdropScope: "ignore", onSelectionChange: (ev) => {
+                if (ev.value) {
+                    const selectedKeys = Object.keys(ev.value);
+                    const selectedComponentIds = selectedKeys
+                        .filter((key) => nodeDictionary[key])
+                        .map((key) => nodeDictionary[key].componentId);
+                    editContext === null || editContext === void 0 ? void 0 : editContext.select(selectedComponentIds);
+                    if (selectedComponentIds.length === 1)
+                        editContext.setScrollIntoView(selectedComponentIds[0]);
+                }
+                else {
+                    editContext === null || editContext === void 0 ? void 0 : editContext.select([]);
+                }
+            }, onDragDrop: (e) => {
+                console.log(e.dropNode);
+                console.log(e.dragNode);
+                console.log(e.dropIndex);
+            }, onContextMenu: (e) => {
+                const componentId = nodeDictionary[e.node.key].componentId;
+                let selectedComponentIds = selection;
+                if (componentId) {
+                    if (selection.indexOf(componentId) < 0) {
+                        editContext === null || editContext === void 0 ? void 0 : editContext.select([componentId]);
+                        selectedComponentIds = [componentId];
+                    }
+                }
+                let selectedEntities = selectedComponentIds
+                    .filter((key) => nodeDictionary[key])
+                    .map((key) => nodeDictionary[key].data)
+                    .filter((x) => x);
+                if (selectedEntities.length === 0) {
+                    selectedEntities = [e.node.data];
+                }
+                let commands = getComponentCommands(selectedEntities, editContext);
+                const menu = commands.map((x) => ({
+                    label: x.label,
+                    icon: x.icon,
+                    disabled: editContext === null || editContext === void 0 ? void 0 : editContext.isCommandDisabled(x),
+                    command: (ev) => {
+                        editContext === null || editContext === void 0 ? void 0 : editContext.executeCommand({
+                            command: x,
+                            event: ev.originalEvent,
+                        });
+                    },
+                }));
+                editContext === null || editContext === void 0 ? void 0 : editContext.showContextMenu(e.originalEvent, menu);
+            } }) }));
+}
+function createMap(treeNodes, nodeDictionary) {
+    treeNodes.forEach((n) => {
+        if (n.key)
+            nodeDictionary[n.key] = n;
+        if (n.children)
+            createMap(n.children, nodeDictionary);
+    });
+}
+function findNodesByComponentId(id, nodesDictionary) {
+    const allNodes = Object.values(nodesDictionary);
+    return allNodes
+        .filter((x) => x.componentId === id)
+        .map((x) => { var _a; return ((_a = x.key) === null || _a === void 0 ? void 0 : _a.toString()) || ""; });
+}
+function expandParents(node, newExpandedKeys) {
+    if (!node)
+        return;
+    if (node.key)
+        newExpandedKeys[node.key] = true;
+    if (node.parent)
+        expandParents(node.parent, newExpandedKeys);
+}
+function hasSameProps(obj1, obj2) {
+    var obj1Props = Object.keys(obj1), obj2Props = Object.keys(obj2);
+    if (obj1Props.length == obj2Props.length) {
+        return obj1Props.every(function (prop) {
+            return obj2Props.indexOf(prop) >= 0;
+        });
+    }
+    return false;
+}

package/dist/esm/editor/sidebar/Debug.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabView, TabPanel } from "primereact/tabview";
+import { CopyToClipboardButton } from "../ui/CopyToClipboardButton";
+import { useState } from "react";
+import { useEditContext } from "../editContext";
+import { getComponentById } from "../componentTreeHelper";
+import { ObjectInspector, ObjectLabel, ObjectRootLabel } from "react-inspector";
+export function Debug({}) {
+    const [activeTab, setActiveTab] = useState(0);
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const page = editContext.page;
+    let component = null;
+    if (page) {
+        const selectedComponents = editContext.selection
+            .map((x) => getComponentById(x, page))
+            .filter((x) => x);
+        component = selectedComponents.length === 1 ? selectedComponents[0] : null;
+    }
+    if (!component && !page)
+        return;
+    const replacer = function (key, value) {
+        if (key === "parentComponent" ||
+            key === "placeholderReference" ||
+            key === "_editor") {
+            return undefined;
+        }
+        return value;
+    };
+    const tabs = [];
+    const defaultNodeRenderer = ({ depth, name, data, isNonenumerable }) => {
+        if (name == "__editor" ||
+            name == "parentComponent" ||
+            name == "placeholderReference")
+            return null;
+        return depth === 0 ? (_jsx(ObjectRootLabel, { name: name, data: data })) : (_jsx(ObjectLabel, { name: name, data: data, isNonenumerable: isNonenumerable }));
+    };
+    if (component) {
+        tabs.push(_jsx(TabPanel, { header: "Component", className: "a-relative a-h-full", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-auto a-p-2", children: _jsx(ObjectInspector, { data: component, nodeRenderer: defaultNodeRenderer }) }) }, "component"));
+    }
+    tabs.push(_jsx(TabPanel, { header: "Page", className: "a-relative a-h-full", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-auto a-p-2", children: _jsx(ObjectInspector, { data: page, nodeRenderer: defaultNodeRenderer }) }) }, "page"));
+    return (_jsxs("div", { className: "a-relative a-h-[calc(100%-6px)]", children: [_jsx(TabView, { className: "a-h-full alpaca-editor-tabs", onTabChange: (ev) => {
+                    setActiveTab(ev.index);
+                }, activeIndex: activeTab, children: tabs }), _jsx("div", { className: "a-absolute a-top-2 a-right-1", children: _jsx(CopyToClipboardButton, { text: JSON.stringify(activeTab === 0 && component ? component : page, replacer, 2) }) })] }));
+}

package/dist/esm/editor/sidebar/EditHistory.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "primereact/utils";
+import { useEditContext } from "../editContext";
+import { useState } from "react";
+import { WizardIcon } from "../ui/Icons";
+export function EditHistory() {
+    const editContext = useEditContext();
+    const [showOnlyMyChanges, setShowOnlyMyChanges] = useState(true);
+    if (!editContext)
+        return;
+    let operations = showOnlyMyChanges
+        ? editContext.editHistory.filter((x) => x.sessionId === editContext.sessionId)
+        : editContext.editHistory;
+    operations = filterUndone(operations);
+    const dateOptions = {
+        year: "numeric",
+        month: "numeric",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+        hour12: false,
+    };
+    const dateFormat = Intl.DateTimeFormat(navigator.language, dateOptions);
+    return (_jsxs("div", { className: "a-inset-0 a-absolute a-flex a-flex-col", children: [_jsx("div", { className: "a-bg-gray-50", children: _jsx("i", { className: classNames("pi pi-user a-text-xs a-cursor-pointer a-p-0.5", showOnlyMyChanges && "a-bg-gray-200"), onClick: () => setShowOnlyMyChanges(!showOnlyMyChanges), title: "Show only my changes" }) }), _jsx("div", { className: "flex-1 a-flex a-flex-col a-overflow-y-auto a-overflow-x-hidden a-text-sm", children: operations.map((o, i) => singleOperation(i, o)) })] }));
+    function getDate(o) {
+        const date = new Date(o.date);
+        return dateFormat.format(date);
+    }
+    function singleOperation(i, o) {
+        var _a, _b;
+        let className = "a-border-b a-p-1 a-flex a-justify-between a-items-start a-text-xs";
+        if (o.undone)
+            className = className + " a-text-gray-300";
+        if (o.focus)
+            className = className + " a-cursor-pointer";
+        return (_jsxs("div", { className: className, onClick: () => {
+                if (o.focus) {
+                    const focusComponents = o.focus.split(":");
+                    if (focusComponents.length > 0) {
+                        editContext === null || editContext === void 0 ? void 0 : editContext.select([focusComponents[0]]);
+                    }
+                    if (focusComponents.length > 1) {
+                        editContext === null || editContext === void 0 ? void 0 : editContext.setFocusedField({
+                            item: {
+                                id: focusComponents[0],
+                                language: editContext.page.language,
+                                version: editContext.page.version,
+                            },
+                            fieldId: focusComponents[1],
+                        }, false);
+                    }
+                }
+            }, children: [_jsxs("div", { className: "a-flex a-gap-1", children: [((_a = o.user) === null || _a === void 0 ? void 0 : _a.ai) && (_jsx(WizardIcon, { className: classNames("a-w-4 a-h-4", o.undone ? "a-text-gray-200" : "a-text-gray-500") })), _jsx("div", { children: o.description })] }), _jsxs("div", { children: [_jsx("div", { className: "a-text-xs", children: getDate(o) }), !showOnlyMyChanges && (_jsx("div", { className: "a-text-xs", children: (_b = o.user) === null || _b === void 0 ? void 0 : _b.name }))] })] }, i));
+    }
+}
+function filterUndone(operations) {
+    let allUndone = true;
+    return operations.filter((o) => {
+        if (!o.undone) {
+            allUndone = false;
+        }
+        return allUndone || !o.undone;
+    });
+}

package/dist/esm/editor/sidebar/EditorForm.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabPanel, TabView } from "primereact/tabview";
+import { useEditContext } from "../editContext";
+import { getComponentById } from "../componentTreeHelper";
+import { FieldList } from "../FieldList";
+export function EditorForm() {
+    var _a, _b;
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const page = editContext.page;
+    if (!page)
+        return;
+    const selectedComponents = editContext.selection
+        .map((x) => getComponentById(x, page))
+        .filter((x) => x);
+    const selectedComponent = selectedComponents.length === 1 ? selectedComponents[0] : page;
+    const validators = ((_b = (_a = editContext.pageValidationResult) === null || _a === void 0 ? void 0 : _a.find((x) => x.item.id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) &&
+        x.item.language === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.language) &&
+        x.item.version === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.version))) === null || _b === void 0 ? void 0 : _b.results) || [];
+    return (_jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs("h1", { className: "a-border-b a-border-gray-200 a-flex a-justify-center a-items-center a-h-12", children: [selectedComponents.length > 0 && (_jsx("i", { className: "pi pi-angle-left a-cursor-pointer a-mr-2 a-p-4", onClick: () => editContext.select([]) })), _jsx("div", { className: "a-flex-1 a-text-center", children: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.name) || page.name || "Page" }), selectedComponents.length > 0 && _jsx("div", { className: "a-w-12" })] }), _jsxs(TabView, { className: "a-flex-1 a-flex a-flex-col", children: [_jsx(TabPanel, { header: "Content", className: "a-h-full", children: _jsx("div", { className: "a-relative a-h-full", children: _jsx("div", { className: "a-p-4 a-overflow-auto a-absolute a-inset-0", children: _jsx(FieldList, { fields: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.fields) || [], validators: validators, simplified: true, filter: (x) => editContext.configuration.alwaysVisiblePageFields.includes(x._editor.name) ||
+                                        editContext.renderedFields.find((y) => y.fieldId == x.id &&
+                                            x._editor.descriptor.item.id == y.item.id) != null }) }) }) }), _jsx(TabPanel, { header: "Advanced", className: "a-h-full", children: _jsx("div", { className: "a-relative a-h-full", children: _jsx("div", { className: "a-p-2 a-overflow-auto a-absolute a-inset-0 ", children: _jsx(FieldList, { fields: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.fields) || [], validators: validators }) }) }) })] })] }));
+}

package/dist/esm/editor/sidebar/GraphQL.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabView, TabPanel } from "primereact/tabview";
+import { FieldList } from "../FieldList";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { InputTextarea } from "primereact/inputtextarea";
+import { Button } from "primereact/button";
+import { useEffect, useState } from "react";
+import { format } from "graphql-formatter";
+import { useEditContext } from "../editContext";
+import { ObjectInspector } from "react-inspector";
+export function GraphQL() {
+    const editContext = useEditContext();
+    const [query, setQuery] = useState("");
+    const [showSpinner, setShowSpinner] = useState(false);
+    const item = editContext === null || editContext === void 0 ? void 0 : editContext.page;
+    if (!(item === null || item === void 0 ? void 0 : item._editor))
+        return;
+    const graphql = item.graphql;
+    const graphql_query = item._editor.graphql_query;
+    useEffect(() => {
+        setQuery(graphql_query);
+    }, [graphql_query]);
+    useEffect(() => {
+        setShowSpinner(false);
+    }, [editContext === null || editContext === void 0 ? void 0 : editContext.refreshCompletedFlag]);
+    function findFields(json) {
+        let result = {};
+        for (let key in json) {
+            if (typeof json[key] === "object" && json[key] !== null) {
+                let subResult = findFields(json[key]);
+                for (let subKey in subResult) {
+                    if (result[subKey]) {
+                        result[subKey] = result[subKey].concat(subResult[subKey]);
+                    }
+                    else {
+                        result[subKey] = subResult[subKey];
+                    }
+                }
+            }
+            if (key === "jsonValue" && json[key]) {
+                let groupKey = `${json[key].itemId}_${json[key].language}_${json[key].version}`;
+                if (result[groupKey]) {
+                    result[groupKey].push(json[key]);
+                }
+                else {
+                    result[groupKey] = [json[key]];
+                }
+            }
+        }
+        return result;
+    }
+    const fieldsjsonValues = findFields(graphql);
+    function renderItem(fields) {
+        var _a, _b, _c;
+        const first = fields[0];
+        const item = (_a = first._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item;
+        if (!item)
+            return null;
+        return (_jsxs("div", { children: ["Item: ", item.name, " ", first.id, " ", item.language, " ", item.version, _jsx(FieldList, { fields: fields, validators: ((_c = (_b = editContext === null || editContext === void 0 ? void 0 : editContext.pageValidationResult) === null || _b === void 0 ? void 0 : _b.find((x) => x.item.id === item.id &&
+                        x.item.language === item.language &&
+                        x.item.version === item.version)) === null || _c === void 0 ? void 0 : _c.results) || [] })] }, first.id + item.id + item.language + item.version));
+    }
+    function refresh() {
+        if (!item)
+            return;
+        const field = {
+            _editor: {
+                name: "_GraphQL",
+                type: "jsonValue",
+                descriptor: {
+                    item: item,
+                    fieldId: "3622F861-ECA9-45D7-8DA7-2CDA35235002",
+                },
+            },
+            id: "3622F861-ECA9-45D7-8DA7-2CDA35235002",
+            value: query,
+        };
+        const prettyQuery = format(query);
+        setQuery(prettyQuery);
+        editContext === null || editContext === void 0 ? void 0 : editContext.editField({ field, value: prettyQuery });
+        setShowSpinner(true);
+        editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
+    }
+    return (_jsxs(Splitter, { layout: "vertical", style: { height: "100%" }, children: [_jsx(SplitterPanel, { size: 50, className: "a-relative", children: _jsxs("div", { className: "a-absolute a-inset-0 a-flex", children: [_jsx(InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1 a-text-xs", style: { height: "100%" } }), _jsx(Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), _jsx(SplitterPanel, { className: "a-relative", children: _jsxs(TabView, { className: "a-inset-0 a-absolute a-flex a-flex-col", children: [_jsx(TabPanel, { header: "JSON", className: "a-relative a-h-full", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto a-p-2", children: _jsx(ObjectInspector, { data: graphql, expandLevel: 3 }) }) }), _jsx(TabPanel, { header: "Data", className: "a-relative a-h-full", children: _jsx("div", { className: "a-m-1 a-h-full", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) })] }) })] }));
+}

package/dist/esm/editor/sidebar/Insert.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabPanel, TabView } from "primereact/tabview";
+import { ComponentPalette } from "./ComponentPalette";
+import { MainContentTree } from "./MainContentTree";
+export function Insert() {
+    return (_jsxs(TabView, { className: "a-flex-1 a-flex a-flex-col", children: [_jsx(TabPanel, { header: "New Components", className: "a-h-full", children: _jsx(ComponentPalette, {}) }, "new"), _jsx(TabPanel, { header: "Existing", className: "a-h-full", children: _jsx(MainContentTree, { mode: "insert" }) }, "existing")] }));
+}

package/dist/esm/editor/sidebar/MainContentTree.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ContentTree from "../ContentTree";
+import { useEditContext } from "../editContext";
+import { getInsertOptionsForCurrentSelection } from "../utils/insertOptions";
+export function MainContentTree({ mode }) {
+    var _a;
+    const editContext = useEditContext();
+    if (!editContext)
+        return null;
+    const page = editContext.page;
+    if (!(page === null || page === void 0 ? void 0 : page._editor))
+        return null;
+    const currentInsertOptions = getInsertOptionsForCurrentSelection(editContext);
+    return (_jsx(ContentTree, { rootItemId: "{11111111-1111-1111-1111-111111111111}", expandIdPath: page._editor.idPath, className: "a-p-1", selectionMode: mode == "insert" ? "none" : "single", selectedItemIds: editContext.secondaryItem ? [editContext.secondaryItem.id] : [page.id], secondarySelectedItemId: (_a = editContext.secondaryItem) === null || _a === void 0 ? void 0 : _a.id, onSelectionChange: (selection) => {
+            const selectedItem = selection;
+            editContext.loadItem({
+                id: selectedItem.id,
+                language: selectedItem.language,
+                version: selectedItem.version,
+                hasLayout: selectedItem.hasLayout,
+            });
+        }, isDraggable: (x) => mode !== "insert" &&
+            (currentInsertOptions === null || currentInsertOptions === void 0 ? void 0 : currentInsertOptions.find((insertOption) => {
+                var _a;
+                return insertOption.id == x.templateId ||
+                    ((_a = insertOption.compatibleTemplates) === null || _a === void 0 ? void 0 : _a.find((compatibleTemplate) => compatibleTemplate == x.templateId)) !== undefined;
+            })) !== undefined, dragStart: (itemNode) => {
+            editContext.dragStart({
+                type: "link-component",
+                templateId: itemNode.templateId,
+                component: {
+                    id: itemNode.id,
+                    language: itemNode.language,
+                    version: itemNode.version,
+                },
+            });
+        } }));
+}

package/dist/esm/editor/sidebar/Sessions.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DataTable } from "primereact/datatable";
+import { Column } from "primereact/column";
+import { useEditContext } from "../editContext";
+export function Sessions() {
+    var editContext = useEditContext();
+    if (!editContext)
+        return null;
+    const sessions = editContext === null || editContext === void 0 ? void 0 : editContext.activeSessions;
+    return (_jsxs(DataTable, { value: sessions, className: "a-text-xs a-w-full", children: [_jsx(Column, { body: (session) => { var _a; return (_a = session.user) === null || _a === void 0 ? void 0 : _a.name; }, header: "User" }), _jsx(Column, { body: (session) => { var _a; return (_a = session.page) === null || _a === void 0 ? void 0 : _a.name; }, header: "Page" }), _jsx(Column, { body: (session) => { var _a; return (_a = session.page) === null || _a === void 0 ? void 0 : _a.language; }, header: "Language" }), _jsx(Column, { body: (session) => { var _a; return (_a = session.page) === null || _a === void 0 ? void 0 : _a.version; }, header: "Version" })] }));
+}

package/dist/esm/editor/sidebar/Sidebar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "primereact/utils";
+import { useEditContext } from "../editContext";
+import { SidebarView } from "./SidebarView";
+export function Sidebar({ views }) {
+    var editContext = useEditContext();
+    if (!editContext)
+        return null;
+    const view = editContext.view;
+    return (_jsxs("div", { className: "a-flex a-items-stretch a-h-full", children: [_jsx("div", { className: "a-bg-slate-700 a-flex a-flex-col ", children: views.map((x, i) => (_jsx("div", { title: x.title, className: classNames(view.name == x.name
+                        ? "a-text-white"
+                        : "a-text-gray-400 hover:a-text-white", "a-cursor-pointer a-p-3"), onClick: () => editContext.setView(x), children: typeof x.icon === "string" ? (_jsx("i", { className: classNames(x.icon, "a-text-xl") })) : (x.icon) }, i))) }), views.map((x, i) => (_jsx(SidebarView, { view: x, editContext: editContext, active: view.name === x.name }, i)))] }));
+}

package/dist/esm/editor/sidebar/SidebarView.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "allotment/dist/style.css";
+import { Allotment } from "allotment";
+import { useEffect, useRef, useState } from "react";
+import { classNames } from "primereact/utils";
+export function SidebarView({ view, editContext, active, }) {
+    const splitter = useRef(null);
+    const [sizes, setSizes] = useState([]);
+    const [preferredSizes, setPreferredSizes] = useState([]);
+    const [panelsExpanded, setPanelsExpanded] = useState([]);
+    const panelHeaderSize = 30;
+    const toggle = (panelIndex) => {
+        const newSize = panelsExpanded[panelIndex]
+            ? panelHeaderSize
+            : preferredSizes[panelIndex];
+        resizePanel(panelIndex, newSize);
+        setPanelsExpanded((x) => {
+            const newState = [...x];
+            newState[panelIndex] = !newState[panelIndex];
+            return newState;
+        });
+    };
+    useEffect(() => {
+        var _a;
+        if (sizes.length == 0)
+            return;
+        (_a = splitter.current) === null || _a === void 0 ? void 0 : _a.resize(sizes);
+    }, [sizes]);
+    const resolvedPanels = view.leftSidebar.map((x) => {
+        if (typeof x === "function") {
+            return x(editContext);
+        }
+        return x;
+    });
+    useEffect(() => {
+        setPanelsExpanded(view.leftSidebar.map(() => true));
+        setPreferredSizes(() => resolvedPanels.map((x) => x.initialSize));
+    }, [view]);
+    const resizePanel = (panelIndex, newSize) => {
+        const totalSize = sizes.reduce((a, b) => a + b, 0);
+        const totalOther = totalSize - sizes[panelIndex];
+        const tmpSizes = [...sizes];
+        tmpSizes[panelIndex] = newSize;
+        const percentages = tmpSizes.map((x) => x / totalOther);
+        percentages[panelIndex] = 0;
+        const remaining = totalSize - newSize;
+        const newSizes = percentages.map((x) => x * remaining);
+        newSizes[panelIndex] = newSize;
+        setSizes(newSizes);
+    };
+    const getHeader = (panel, index) => {
+        if (panel.header)
+            return panel.header({ panel, index });
+        return (_jsxs("div", { className: classNames("a-p-1.5 a-bg-gray-50 a-uppercase a-text-gray-500 a-text-xs a-flex a-justify a-items-center a-cursor-pointer", panelsExpanded[index] ? "a-border-b" : ""), onClick: () => toggle(index), children: [panel.icon &&
+                    (typeof panel.icon === "string" ? (_jsx("i", { className: classNames(panel.icon, "pi a-mr-1.5") })) : (_jsx("div", { className: "a-w-4 a-h-4 a-mr-1.5", children: panel.icon }))), _jsx("div", { className: "a-mr-auto", children: panel.title }), _jsx("i", { className: classNames(panelsExpanded[index] ? "pi-chevron-up" : "pi-chevron-down", "pi  a-text-sm") })] }));
+    };
+    return (_jsx(Allotment, { vertical: true, snap: true, defaultSizes: resolvedPanels.map((x) => x.initialSize), className: !active ? "a-hidden a-h-full" : "a-h-full", ref: splitter, onChange: (s) => {
+            if (preferredSizes.length == 0)
+                return;
+            if (sizes.join(",") != s.join(","))
+                setSizes(s);
+            const newPreferred = [...preferredSizes];
+            s.forEach((x, i) => {
+                if (x > panelHeaderSize)
+                    newPreferred[i] = x;
+            });
+            setPreferredSizes(newPreferred);
+        }, children: resolvedPanels.map((panel, index) => (_jsx(Allotment.Pane, { preferredSize: preferredSizes[index] + "%", maxSize: panelsExpanded[index] ? 10000 : panelHeaderSize, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [getHeader(panel, index), panelsExpanded[index] && (_jsx("div", { className: "a-overflow-hidden a-relative a-flex-1", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: panel.content }) }))] }) }, index))) }));
+}