@compill/admin 1.0.102 → 1.0.104

package/dist/index.d.ts

@@ -1,50 +1,50 @@
-export * from "./lib/SectionTitle";
-export * from "./lib/breadcrumbs/BreadCrumbs";
-export * from "./lib/buttons/DialogButton";
-export * from "./lib/buttons/InvalidateButton";
-export * from "./lib/buttons/NavigateButton";
-export * from "./lib/buttons/PublishButton";
-export * from "./lib/buttons/UpdateButton";
-export * from "./lib/buttons/ViewButton";
-export * from "./lib/cells/OrderCell";
-export * from "./lib/json/ScreenRenderer";
-export * from "./lib/json/dialog/ItemEditDialog";
-export * from "./lib/json/dialog/ItemDeleteDialog";
-export * from "./lib/json/types/DetailsView";
-export * from "./lib/json/types/EditItemDialog";
-export * from "./lib/json/types/MultiQueryWrapper";
-export * from "./lib/json/types/QueryWrapper";
-export * from "./lib/json/types/QueryWrapperDialog";
-export * from "./lib/json/types/ScreenConfig";
-export * from "./lib/json/types/TabbedView";
-export * from "./lib/json/types/TableView";
-export * from "./lib/layout/AdminLayout";
-export * from "./lib/layout/ButtonBar";
-export * from "./lib/layout/menu/Menu";
-export * from "./lib/layout/menu/MenuConfig";
-export * from "./lib/modal/AttachDialog";
-export * from "./lib/modal/FormActionDialog";
-export * from "./lib/page/PageContainer";
-export * from "./lib/page/PageContentEditor";
-export * from "./lib/page/PageMain";
-export * from "./lib/page/PageQueryStateContainer";
-export * from "./lib/page/PageSectionTitle";
-export * from "./lib/page/PageSidebar";
-export * from "./lib/page/PageSidebarSection";
-export * from "./lib/page/PageStateContainer";
-export * from "./lib/page/PageSubSectionTitle";
-export * from "./lib/page/PageTitle";
-export * from "./lib/page/PageTopBar";
-export * from "./lib/status/StatusBadge";
-export * from "./lib/table/TableContainer";
-export * from "./lib/table/TableCreateButton";
-export * from "./lib/table/TableFilterButton";
-export * from "./lib/table/TableRowActionBar";
-export * from "./lib/table/TableRowActionButton";
-export * from "./lib/table/TableRowActionDialogButton";
-export * from "./lib/table/TableRowDeleteButton";
-export * from "./lib/table/TableRowEditButton";
-export * from "./lib/table/TableRowNavigateButton";
-export * from "./lib/table/TableRowPublishPostButton";
-export * from "./lib/table/TableRowViewButton";
-export * from "./lib/table/TableTopBar";
+export * from "./lib/SectionTitle.js";
+export * from "./lib/breadcrumbs/BreadCrumbs.js";
+export * from "./lib/buttons/DialogButton.js";
+export * from "./lib/buttons/InvalidateButton.js";
+export * from "./lib/buttons/NavigateButton.js";
+export * from "./lib/buttons/PublishButton.js";
+export * from "./lib/buttons/UpdateButton.js";
+export * from "./lib/buttons/ViewButton.js";
+export * from "./lib/cells/OrderCell.js";
+export * from "./lib/json/ScreenRenderer.js";
+export * from "./lib/json/dialog/ItemEditDialog.js";
+export * from "./lib/json/dialog/ItemDeleteDialog.js";
+export * from "./lib/json/types/DetailsView.js";
+export * from "./lib/json/types/EditItemDialog.js";
+export * from "./lib/json/types/MultiQueryWrapper.js";
+export * from "./lib/json/types/QueryWrapper.js";
+export * from "./lib/json/types/QueryWrapperDialog.js";
+export * from "./lib/json/types/ScreenConfig.js";
+export * from "./lib/json/types/TabbedView.js";
+export * from "./lib/json/types/TableView.js";
+export * from "./lib/layout/AdminLayout.js";
+export * from "./lib/layout/ButtonBar.js";
+export * from "./lib/layout/menu/Menu.js";
+export * from "./lib/layout/menu/MenuConfig.js";
+export * from "./lib/modal/AttachDialog.js";
+export * from "./lib/modal/FormActionDialog.js";
+export * from "./lib/page/PageContainer.js";
+export * from "./lib/page/PageContentEditor.js";
+export * from "./lib/page/PageMain.js";
+export * from "./lib/page/PageQueryStateContainer.js";
+export * from "./lib/page/PageSectionTitle.js";
+export * from "./lib/page/PageSidebar.js";
+export * from "./lib/page/PageSidebarSection.js";
+export * from "./lib/page/PageStateContainer.js";
+export * from "./lib/page/PageSubSectionTitle.js";
+export * from "./lib/page/PageTitle.js";
+export * from "./lib/page/PageTopBar.js";
+export * from "./lib/status/StatusBadge.js";
+export * from "./lib/table/TableContainer.js";
+export * from "./lib/table/TableCreateButton.js";
+export * from "./lib/table/TableFilterButton.js";
+export * from "./lib/table/TableRowActionBar.js";
+export * from "./lib/table/TableRowActionButton.js";
+export * from "./lib/table/TableRowActionDialogButton.js";
+export * from "./lib/table/TableRowDeleteButton.js";
+export * from "./lib/table/TableRowEditButton.js";
+export * from "./lib/table/TableRowNavigateButton.js";
+export * from "./lib/table/TableRowPublishPostButton.js";
+export * from "./lib/table/TableRowViewButton.js";
+export * from "./lib/table/TableTopBar.js";

package/dist/index.js

@@ -1,50 +1,50 @@
-export * from "./lib/SectionTitle";
-export * from "./lib/breadcrumbs/BreadCrumbs";
-export * from "./lib/buttons/DialogButton";
-export * from "./lib/buttons/InvalidateButton";
-export * from "./lib/buttons/NavigateButton";
-export * from "./lib/buttons/PublishButton";
-export * from "./lib/buttons/UpdateButton";
-export * from "./lib/buttons/ViewButton";
-export * from "./lib/cells/OrderCell";
-export * from "./lib/json/ScreenRenderer";
-export * from "./lib/json/dialog/ItemEditDialog";
-export * from "./lib/json/dialog/ItemDeleteDialog";
-export * from "./lib/json/types/DetailsView";
-export * from "./lib/json/types/EditItemDialog";
-export * from "./lib/json/types/MultiQueryWrapper";
-export * from "./lib/json/types/QueryWrapper";
-export * from "./lib/json/types/QueryWrapperDialog";
-export * from "./lib/json/types/ScreenConfig";
-export * from "./lib/json/types/TabbedView";
-export * from "./lib/json/types/TableView";
-export * from "./lib/layout/AdminLayout";
-export * from "./lib/layout/ButtonBar";
-export * from "./lib/layout/menu/Menu";
-export * from "./lib/layout/menu/MenuConfig";
-export * from "./lib/modal/AttachDialog";
-export * from "./lib/modal/FormActionDialog";
-export * from "./lib/page/PageContainer";
-export * from "./lib/page/PageContentEditor";
-export * from "./lib/page/PageMain";
-export * from "./lib/page/PageQueryStateContainer";
-export * from "./lib/page/PageSectionTitle";
-export * from "./lib/page/PageSidebar";
-export * from "./lib/page/PageSidebarSection";
-export * from "./lib/page/PageStateContainer";
-export * from "./lib/page/PageSubSectionTitle";
-export * from "./lib/page/PageTitle";
-export * from "./lib/page/PageTopBar";
-export * from "./lib/status/StatusBadge";
-export * from "./lib/table/TableContainer";
-export * from "./lib/table/TableCreateButton";
-export * from "./lib/table/TableFilterButton";
-export * from "./lib/table/TableRowActionBar";
-export * from "./lib/table/TableRowActionButton";
-export * from "./lib/table/TableRowActionDialogButton";
-export * from "./lib/table/TableRowDeleteButton";
-export * from "./lib/table/TableRowEditButton";
-export * from "./lib/table/TableRowNavigateButton";
-export * from "./lib/table/TableRowPublishPostButton";
-export * from "./lib/table/TableRowViewButton";
-export * from "./lib/table/TableTopBar";
+export * from "./lib/SectionTitle.js";
+export * from "./lib/breadcrumbs/BreadCrumbs.js";
+export * from "./lib/buttons/DialogButton.js";
+export * from "./lib/buttons/InvalidateButton.js";
+export * from "./lib/buttons/NavigateButton.js";
+export * from "./lib/buttons/PublishButton.js";
+export * from "./lib/buttons/UpdateButton.js";
+export * from "./lib/buttons/ViewButton.js";
+export * from "./lib/cells/OrderCell.js";
+export * from "./lib/json/ScreenRenderer.js";
+export * from "./lib/json/dialog/ItemEditDialog.js";
+export * from "./lib/json/dialog/ItemDeleteDialog.js";
+export * from "./lib/json/types/DetailsView.js";
+export * from "./lib/json/types/EditItemDialog.js";
+export * from "./lib/json/types/MultiQueryWrapper.js";
+export * from "./lib/json/types/QueryWrapper.js";
+export * from "./lib/json/types/QueryWrapperDialog.js";
+export * from "./lib/json/types/ScreenConfig.js";
+export * from "./lib/json/types/TabbedView.js";
+export * from "./lib/json/types/TableView.js";
+export * from "./lib/layout/AdminLayout.js";
+export * from "./lib/layout/ButtonBar.js";
+export * from "./lib/layout/menu/Menu.js";
+export * from "./lib/layout/menu/MenuConfig.js";
+export * from "./lib/modal/AttachDialog.js";
+export * from "./lib/modal/FormActionDialog.js";
+export * from "./lib/page/PageContainer.js";
+export * from "./lib/page/PageContentEditor.js";
+export * from "./lib/page/PageMain.js";
+export * from "./lib/page/PageQueryStateContainer.js";
+export * from "./lib/page/PageSectionTitle.js";
+export * from "./lib/page/PageSidebar.js";
+export * from "./lib/page/PageSidebarSection.js";
+export * from "./lib/page/PageStateContainer.js";
+export * from "./lib/page/PageSubSectionTitle.js";
+export * from "./lib/page/PageTitle.js";
+export * from "./lib/page/PageTopBar.js";
+export * from "./lib/status/StatusBadge.js";
+export * from "./lib/table/TableContainer.js";
+export * from "./lib/table/TableCreateButton.js";
+export * from "./lib/table/TableFilterButton.js";
+export * from "./lib/table/TableRowActionBar.js";
+export * from "./lib/table/TableRowActionButton.js";
+export * from "./lib/table/TableRowActionDialogButton.js";
+export * from "./lib/table/TableRowDeleteButton.js";
+export * from "./lib/table/TableRowEditButton.js";
+export * from "./lib/table/TableRowNavigateButton.js";
+export * from "./lib/table/TableRowPublishPostButton.js";
+export * from "./lib/table/TableRowViewButton.js";
+export * from "./lib/table/TableTopBar.js";

package/dist/lib/SectionTitle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+export function SectionTitle({ children, ...props }) {
+    return _jsx("h2", { textSize: "xl", fontWeight: "600", textColor: "slate-800", ...props, children: children });
+}

package/dist/lib/breadcrumbs/BreadCrumbs.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { useApiQuery } from "@compill/api";
+import { Shimmer } from "@compill/components";
+import { mdiCircleSmall } from "@mdi/js";
+import { Icon } from "@valerya/ui";
+import { isArray } from "es-toolkit/compat";
+import Link from "next/link";
+import { useParams } from "react-router-dom";
+export function Breadcrumbs({ breadcrumbs, ...props }) {
+    if (isArray(breadcrumbs)) {
+        return (_jsx("div", { dflex: true, alignItems: "center", trait: "typo.h5", ...props, children: breadcrumbs.map((b, index) => _jsx(BreadcrumbItem, { breadcrumb: b, showSeparator: index > 0 }, index)) }));
+    }
+    return _jsx(QueryBreadcrumbs, { queryFn: breadcrumbs.queryFn, queryField: breadcrumbs.queryField, generate: breadcrumbs.generate });
+}
+function QueryBreadcrumbs({ queryFn, queryField, generate, ...props }) {
+    const params = useParams();
+    const id = queryField ? params[queryField] : undefined;
+    const { data, isLoading, isError } = useApiQuery([""], queryFn, id);
+    if (isLoading || isError) {
+        return (_jsxs("div", { dflex: true, alignItems: "center", children: [_jsx(Shimmer, { h: "8", w: "24" }), _jsx(Icon, { path: mdiCircleSmall, mx: "1" }), _jsx(Shimmer, { h: "8", w: "20" })] }));
+    }
+    const breadcrumbs = generate(data);
+    return (_jsx("div", { dflex: true, alignItems: "center", trait: "typo.h5", ...props, children: breadcrumbs.map((b, index) => _jsx(BreadcrumbItem, { breadcrumb: b, showSeparator: index > 0 }, index)) }));
+}
+function BreadcrumbItem({ breadcrumb, showSeparator }) {
+    return (_jsxs(_Fragment, { children: [showSeparator && _jsx(Icon, { path: mdiCircleSmall, mx: "1" }), _jsx(Link, { href: `/${breadcrumb.path || "#"}`, children: _jsx("span", { 
+                    // onClick={breadcrumb.path ? handleClick : undefined}
+                    hover_textDecoration: breadcrumb.path ? "underline" : undefined, cursor: breadcrumb.path ? "pointer" : undefined, children: breadcrumb.label }) })] }));
+}

package/dist/lib/buttons/{DialogButton.jsx → DialogButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { Button } from "@valerya/ui";
 import React from "react";
 export function DialogButton({ buildDialog, ...props }) {
@@ -10,8 +11,5 @@ export function DialogButton({ buildDialog, ...props }) {
     const onCloseDialog = React.useCallback(() => {
         setShowDialog(false);
     }, [setShowDialog]);
-    return (<>
-            <Button onClick={onShowDialog} {...props}/>
-            {showDialog && buildDialog(onCloseDialog)}
-        </>);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: onShowDialog, ...props }), showDialog && buildDialog(onCloseDialog)] }));
 }

package/dist/lib/buttons/InvalidateButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBarButtonProps } from "../layout/ButtonBar";
+import { ButtonBarButtonProps } from "../layout/ButtonBar.js";
 interface InvalidateButtonProps extends ButtonBarButtonProps {
     pathOrPermalink: string;
 }

package/dist/lib/buttons/{InvalidateButton.jsx → InvalidateButton.js}

@@ -1,10 +1,11 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { INVALIDATE_API } from "@compill/admin-api";
 import { useApiMutation, useMutate } from "@compill/api";
 import { mdiDatabaseRefreshOutline } from "@mdi/js";
-import { ButtonBarButton } from "../layout/ButtonBar";
+import { ButtonBarButton } from "../layout/ButtonBar.js";
 export function InvalidateButton({ pathOrPermalink, ...props }) {
     const api = INVALIDATE_API.new(pathOrPermalink);
     const mutation = useApiMutation(api.invalidate, api.queryKey);
     const invalidate = useMutate(mutation, { successMsg: "Page successfully invalidated" });
-    return (<ButtonBarButton title="Regenerate" disabled={mutation.isLoading} onClick={invalidate} icon={mdiDatabaseRefreshOutline} {...props}/>);
+    return (_jsx(ButtonBarButton, { title: "Regenerate", disabled: mutation.isLoading, onClick: invalidate, icon: mdiDatabaseRefreshOutline, ...props }));
 }

package/dist/lib/buttons/{NavigateButton.jsx → NavigateButton.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { mdiPost } from "@mdi/js";
 import { Button, Icon } from "@valerya/ui";
 import React from "react";
@@ -7,7 +8,5 @@ export function NavigateButton({ path, ...props }) {
     const handleClick = React.useCallback(() => {
         navigate(path);
     }, [navigate, path]);
-    return (<Button type="submit" scheme="dark" variant="glass" corners="pill" w="10" h="10" onClick={handleClick} {...props}>
-            <Icon path={mdiPost}/>
-        </Button>);
+    return (_jsx(Button, { type: "submit", scheme: "dark", variant: "glass", corners: "pill", w: "10", h: "10", onClick: handleClick, ...props, children: _jsx(Icon, { path: mdiPost }) }));
 }

package/dist/lib/buttons/{PublishButton.jsx → PublishButton.js}

@@ -1,8 +1,9 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useInvalidateMutation } from "@compill/api";
 import { mdiEye, mdiEyeOff } from "@mdi/js";
 import React from "react";
 import { toast } from "react-toastify";
-import { ButtonBarButton } from "../layout/ButtonBar";
+import { ButtonBarButton } from "../layout/ButtonBar.js";
 export function PublishButton({ status, queryId, api, ...props }) {
     const isDraft = status == "draft";
     const mutation = useInvalidateMutation(isDraft ? api.publish : api.unpublish, api.queryKey, queryId, { networkMode: "always" });
@@ -12,7 +13,5 @@ export function PublishButton({ status, queryId, api, ...props }) {
             .then(() => toast.success(isDraft ? "Published!" : "Unpublished!"))
             .catch(error => toast.error(`Error: ${error}`));
     }, [mutation, queryId]);
-    return (<ButtonBarButton disabled={mutation.isLoading} onClick={publish} icon={isDraft ? mdiEye : mdiEyeOff} {...props}>
-            {isDraft ? "Publish" : "Switch to draft"}
-        </ButtonBarButton>);
+    return (_jsx(ButtonBarButton, { disabled: mutation.isLoading, onClick: publish, icon: isDraft ? mdiEye : mdiEyeOff, ...props, children: isDraft ? "Publish" : "Switch to draft" }));
 }

package/dist/lib/buttons/{UpdateButton.jsx → UpdateButton.js}

@@ -1,12 +1,11 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { mdiCloudUpload } from "@mdi/js";
 import { useFormikContext } from "formik";
 import { useHotkeys } from "react-hotkeys-hook";
-import { ButtonBarSubmitButton } from "../layout/ButtonBar";
+import { ButtonBarSubmitButton } from "../layout/ButtonBar.js";
 export function UpdateButton({ ...props }) {
     const { dirty, handleSubmit } = useFormikContext() ?? { dirty: false, handleSubmit: undefined, values: {} };
     useHotkeys('ctrl+s', () => { if (dirty && !props.disabled)
         handleSubmit(); }, { preventDefault: true }, [dirty, props, handleSubmit]);
-    return (<ButtonBarSubmitButton icon={mdiCloudUpload} {...props}>
-            Update
-        </ButtonBarSubmitButton>);
+    return (_jsx(ButtonBarSubmitButton, { icon: mdiCloudUpload, ...props, children: "Update" }));
 }

package/dist/lib/buttons/ViewButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBarButtonProps } from "../layout/ButtonBar";
+import { ButtonBarButtonProps } from "../layout/ButtonBar.js";
 export declare function ViewButton({ label, path, icon, ...props }: ButtonBarButtonProps & {
     label?: string;
     path: string;

package/dist/lib/buttons/{ViewButton.jsx → ViewButton.js}

@@ -1,13 +1,12 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { mdiOpenInNew } from "@mdi/js";
 import React from "react";
-import { ButtonBarButton } from "../layout/ButtonBar";
+import { ButtonBarButton } from "../layout/ButtonBar.js";
 export function ViewButton({ label, path, icon, ...props }) {
     const openPage = React.useCallback(() => {
         window.open(path, '_blank');
     }, [path]);
-    return (<ButtonBarButton onClick={openPage} dflex alignItems="center" gap="2" icon={icon || mdiOpenInNew} {...props}>
-            {label}
-        </ButtonBarButton>);
+    return (_jsx(ButtonBarButton, { onClick: openPage, dflex: true, alignItems: "center", gap: "2", icon: icon || mdiOpenInNew, ...props, children: label }));
     // return (
     //     <IconButton icon={icon ? icon : mdiOpenInNew} type="submit" scheme="dark" variant="glass" size="md" onClick={openPage} {...props}/>
     // )

package/dist/lib/cells/{OrderCell.jsx → OrderCell.js}

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
 import { FlexCenter } from "@compill/components";
 import { useInvalidateMutation } from "@compill/api";
 import { mdiArrowDownBoldBox, mdiArrowUpBoldBox } from "@mdi/js";
@@ -21,15 +22,5 @@ export function OrderCell({ api, postId, order }) {
             toast.error(`Error: ${error}`);
         });
     }, [mutationUp, postId]);
-    return (<FlexCenter placeContent="start" numericFontVariant="tabular-nums">
-            {order}
-
-            <Button ms="3" variant="borderless" scheme="dark" onClick={moveUp}>
-                <Icon path={mdiArrowUpBoldBox}/>
-            </Button>
-
-            <Button variant="borderless" scheme="dark" onClick={moveDown}>
-                <Icon path={mdiArrowDownBoldBox}/>
-            </Button>
-        </FlexCenter>);
+    return (_jsxs(FlexCenter, { placeContent: "start", numericFontVariant: "tabular-nums", children: [order, _jsx(Button, { ms: "3", variant: "borderless", scheme: "dark", onClick: moveUp, children: _jsx(Icon, { path: mdiArrowUpBoldBox }) }), _jsx(Button, { variant: "borderless", scheme: "dark", onClick: moveDown, children: _jsx(Icon, { path: mdiArrowDownBoldBox }) })] }));
 }

package/dist/lib/json/DetailsView.d.ts

@@ -1,5 +1,5 @@
 import { SoperioComponent } from "@soperio/react";
-import { DetailsViewConfig } from "./types/DetailsView";
+import { DetailsViewConfig } from "./types/DetailsView.js";
 export declare function DetailsView({ queryField, api, useNextRouter, processInput, screen, tabbed, ...props }: DetailsViewConfig & {
     tabbed?: boolean;
 } & SoperioComponent): JSX.Element;

package/dist/lib/json/DetailsView.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { useInvalidateParentMutation, useMutate } from "@compill/api";
+import { FormProvider, FormRenderer, TextArea } from "@compill/form";
+import { runIfFn } from "@soperio/react";
+import React from "react";
+import { useParams } from "react-router-dom";
+import { PageContainer } from "../page/PageContainer.js";
+import { PageContentEditor } from "../page/PageContentEditor.js";
+import { PageQueryStateContainer } from "../page/PageQueryStateContainer.js";
+import { PageSidebar } from "../page/PageSidebar.js";
+import { PageSidebarSection } from "../page/PageSidebarSection.js";
+import { ScreenTopBar } from "./ScreenTopBar.js";
+import { useRouter } from "next/router";
+import { useInvalidatePage } from "@compill/admin-api";
+function useQueryField(queryField, useNextRouter) {
+    if (useNextRouter) {
+        const router = useRouter();
+        return router.query[queryField];
+    }
+    const { [queryField]: id } = useParams();
+    return id;
+}
+export function DetailsView({ queryField, api, useNextRouter, processInput, screen, tabbed, ...props }) {
+    const id = useQueryField(queryField, useNextRouter);
+    const ref = React.useRef(null);
+    return (_jsx(PageQueryStateContainer, { api: api, apiFn: "get", queryId: id, ref: ref, p: "5", ...props, children: (item) => _jsx(Internal, { item: item, screen: screen, api: api, tabbed: tabbed, processInput: processInput, containerRef: ref }) }));
+}
+function Internal({ item, screen, api, processInput, tabbed, containerRef }) {
+    const pScreen = runIfFn(screen, item);
+    const { breadcrumbs, schema, initialValues, header, sections, buttonBar, type, invalidateParentQueryKey, invalidatePage } = pScreen;
+    const mutation = useInvalidateParentMutation((api.update), invalidateParentQueryKey ?? api.queryKey, { networkMode: "always" });
+    const invalidatePageFn = useInvalidatePage(invalidatePage || "");
+    const save = useMutate(mutation, {
+        processInput,
+        successMsg: (item, values) => `${item.title || item.name} updated.`,
+        errorMsg: (error, item) => `Error updating ${item.title || item.name}: ${error}`,
+        onSuccess: () => {
+            if (invalidatePage)
+                invalidatePageFn();
+        }
+    });
+    let editorMaxW = undefined;
+    if (!type || type == "post")
+        editorMaxW = "calc(1280px - 28rem)";
+    else if (type == "section")
+        editorMaxW = "calc(1280px - 22rem)";
+    return (_jsxs(FormProvider, { initialValues: runIfFn(initialValues, item), validationSchema: schema, onSubmit: save, enableReinitialize: true, children: [_jsx(ScreenTopBar, { tabbed: tabbed, api: api, breadcrumbs: breadcrumbs, buttonBar: buttonBar, item: item, isLoading: mutation.isLoading, trackingRef: containerRef?.current }), type == "form" && sections?.map((section, index) => (_jsx(Section, { section: section, item: item }, index))), (pScreen.type == "post" || pScreen.type == "section") &&
+                (_jsx("div", { p: "5", bgColor: "slate-100", rounded: "lg", children: _jsxs(PageContainer, { w: editorMaxW ? "auto" : "full", size: "x2", id: "pagecontainer", children: [header, _jsxs("div", { dflex: true, gap: "5", children: [_jsxs("div", { dflex: true, flexCol: true, gap: "8", flexGrow: true, children: [pScreen.editor?.type != "textarea" &&
+                                                (
+                                                // TODO Find a way to make this editor shrink in width when resizing the window...
+                                                _jsx(PageContentEditor, { name: "content", maxW: editorMaxW, minW: "144", shadow: true, rounded: "lg" })), pScreen.editor?.type == "textarea" &&
+                                                (_jsx(TextArea, { name: pScreen.editor?.name, maxW: editorMaxW, minW: editorMaxW, w: editorMaxW, minH: "128", rows: 25, bgColor: "white", border: "0", shadow: true, p: "5", textColor: "slate-800" })), pScreen.editorFooter] }), _jsx(PageSidebar, { children: sections?.map((section, index) => (_jsx(Section, { section: section, item: item, cardStyle: true }, index))) })] })] }) }))] }));
+}
+function Section({ section, item, cardStyle }) {
+    if (section.type === "section") {
+        const style = cardStyle ?
+            {
+                bgColor: "white",
+                rounded: "lg",
+                p: "5",
+                textSize: "sm",
+                shadow: true
+            } : {};
+        return (_jsx(PageSidebarSection, { title: section.title, ...style, children: _jsx(FormRenderer, { form: runIfFn(section.form, item) }) }));
+    }
+    if (section.type === "custom")
+        return runIfFn(section.component, item);
+    return null;
+}

package/dist/lib/json/EditItemView.d.ts

@@ -1,2 +1,2 @@
-import { ItemEditDialogProps } from "./dialog/ItemEditDialog";
+import { ItemEditDialogProps } from "./dialog/ItemEditDialog.js";
 export declare function EditItemView({ initialValues, ...props }: Omit<ItemEditDialogProps, "show">): JSX.Element;

package/dist/lib/json/EditItemView.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
+import { runIfFn } from "@soperio/react";
+import { ItemEditDialog } from "./dialog/ItemEditDialog.js";
+export function EditItemView({ initialValues, ...props }) {
+    return (_jsx(ItemEditDialog, { ...props, initialValues: runIfFn(initialValues, null), show: true }));
+}

package/dist/lib/json/MultiQueryWrapper.d.ts

@@ -1,4 +1,4 @@
-import { MultiQueryWrapperConfig } from "./types/MultiQueryWrapper";
+import { MultiQueryWrapperConfig } from "./types/MultiQueryWrapper.js";
 import { SoperioComponent } from "@soperio/react";
 export declare function MultiQueryWrapper({ queries, config, tabbed, ...props }: Omit<MultiQueryWrapperConfig, "type"> & {
     tabbed?: boolean;

package/dist/lib/json/{MultiQueryWrapper.jsx → MultiQueryWrapper.js}

@@ -1,8 +1,9 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import { useApiQueries } from "@compill/api";
 import { useQueryClient } from "@tanstack/react-query";
 import React from "react";
 import { useParams } from "react-router-dom";
-import { ScreenRenderer } from "./ScreenRenderer";
+import { ScreenRenderer } from "./ScreenRenderer.js";
 import { isFunction, runIfFn } from "@soperio/react";
 import { QueryLoadingState, RetryOnError } from "@compill/components";
 function useQueries(queries) {
@@ -53,8 +54,8 @@ export function MultiQueryWrapper({ queries, config, tabbed, ...props }) {
     const { data, isFetching, isError } = useQueries(queries);
     const invalidate = useInvalidate(queries);
     if (isFetching)
-        return <QueryLoadingState w="full" h="100vh"/>;
+        return _jsx(QueryLoadingState, { w: "full", h: "100vh" });
     if (isError || !data)
-        return <RetryOnError p="0" w="full" h="100vh" onClick={invalidate}/>;
-    return <ScreenRenderer config={config(...data)} tabbed={tabbed} {...props}/>;
+        return _jsx(RetryOnError, { p: "0", w: "full", h: "100vh", onClick: invalidate });
+    return _jsx(ScreenRenderer, { config: config(...data), tabbed: tabbed, ...props });
 }

package/dist/lib/json/QueryWrapper.d.ts

@@ -1,4 +1,4 @@
-import { QueryWrapperConfig } from "./types/QueryWrapper";
+import { QueryWrapperConfig } from "./types/QueryWrapper.js";
 import { SoperioComponent } from "@soperio/react";
 import { CRUD_MODEL } from "@compill/api";
 export declare function QueryWrapper<T extends CRUD_MODEL, U>({ api, queryField, fn, transformFn, config, tabbed, ...props }: Omit<QueryWrapperConfig<T, U>, "type"> & {

package/dist/lib/json/{QueryWrapper.jsx → QueryWrapper.js}

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "@soperio/jsx-runtime";
 import React from "react";
-import { ScreenRenderer } from "./ScreenRenderer";
+import { ScreenRenderer } from "./ScreenRenderer.js";
 import { isFunction, runIfFn } from "@soperio/react";
 import { useParams } from "react-router-dom";
 import { useApiQuery } from "@compill/api";
@@ -24,5 +25,5 @@ export function QueryWrapper({ api, queryField, fn, transformFn, config, tabbed,
     // TODO states
     if (!data)
         return null;
-    return <ScreenRenderer config={config(transformedData)} tabbed={tabbed} {...props}/>;
+    return _jsx(ScreenRenderer, { config: config(transformedData), tabbed: tabbed, ...props });
 }

package/dist/lib/json/ScreenRenderer.d.ts

@@ -1,4 +1,4 @@
-import { ScreenConfig } from "./types/ScreenConfig";
+import { ScreenConfig } from "./types/ScreenConfig.js";
 import { SoperioComponent } from "@soperio/react";
 export declare function ScreenRenderer({ config, tabbed, ...props }: {
     config: ScreenConfig;

package/dist/lib/json/ScreenRenderer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@soperio/jsx-runtime";
+import { DetailsView } from "./DetailsView.js";
+import { QueryWrapper } from "./QueryWrapper.js";
+import { TabbedView } from "./TabbedView.js";
+import { TableView } from "./table/TableView.js";
+import { MultiQueryWrapper } from "./MultiQueryWrapper.js";
+export function ScreenRenderer({ config, tabbed, ...props }) {
+    if (config.type === "table")
+        return _jsx(TableView, { ...config, ...props });
+    if (config.type === "tabbed")
+        return _jsx(TabbedView, { ...config, ...props });
+    if (config.type === "details")
+        return _jsx(DetailsView, { ...config, tabbed: tabbed, ...props });
+    if (config.type === "query")
+        return _jsx(QueryWrapper, { ...config, tabbed: tabbed, ...props });
+    if (config.type === "multiQuery")
+        return _jsx(MultiQueryWrapper, { ...config, tabbed: tabbed, ...props });
+    return _jsx(_Fragment, {});
+}

package/dist/lib/json/ScreenTopBar.d.ts

@@ -1,6 +1,6 @@
 import { API } from "@compill/admin-api";
-import { Breadcrumb } from "../breadcrumbs/BreadCrumbs";
-import { DetailViewButton } from "./types/DetailsView";
+import { Breadcrumb } from "../breadcrumbs/BreadCrumbs.js";
+import { DetailViewButton } from "./types/DetailsView.js";
 import { CRUDAPI } from "@compill/api";
 interface ScreenTopBarProps {
     tabbed?: boolean;

package/dist/lib/json/ScreenTopBar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@soperio/jsx-runtime";
+import { API } from "@compill/admin-api";
+import { InvalidateButton } from "../buttons/InvalidateButton.js";
+import { PublishButton } from "../buttons/PublishButton.js";
+import { UpdateButton } from "../buttons/UpdateButton.js";
+import { ViewButton } from "../buttons/ViewButton.js";
+import { PageTopBar, PageTopBarToolbar } from "../page/PageTopBar.js";
+import React from "react";
+import { ButtonBar } from "../layout/ButtonBar.js";
+export function ScreenTopBar({ tabbed, breadcrumbs, api, item, isLoading, buttonBar, trackingRef }) {
+    return (_jsxs(_Fragment, { children: [tabbed &&
+                (_jsx(PageTopBarToolbar, { trackingRef: trackingRef, children: _jsx(Buttons, { api: api, item: item, isLoading: isLoading, buttonBar: buttonBar }) })), !tabbed &&
+                (_jsx(PageTopBar, { breadcrumbs: breadcrumbs, children: _jsx(Buttons, { api: api, item: item, isLoading: isLoading, buttonBar: buttonBar }) }))] }));
+}
+function Buttons({ api, item, isLoading, buttonBar }) {
+    return (_jsxs(_Fragment, { children: [buttonBar && buttonBar.length > 0 &&
+                (_jsx(ButtonBar, { children: buttonBar.map((button, index) => (_jsxs(React.Fragment, { children: [button.type === "link" && _jsx(ViewButton, { label: button.label, path: button.path, icon: button.icon }), button.type === "invalidate" && _jsx(InvalidateButton, { pathOrPermalink: button.pathOrPermalink }), button.type == "custom" && button.render(item)] }, index))) })), _jsxs(ButtonBar, { children: [api instanceof API && _jsx(PublishButton, { api: api, queryId: item.id, status: item.status, disabled: isLoading }), _jsx(UpdateButton, { disabled: isLoading })] })] }));
+}

package/dist/lib/json/TabbedView.d.ts

@@ -1,3 +1,3 @@
-import { TabbedViewConfig } from "./types/TabbedView";
+import { TabbedViewConfig } from "./types/TabbedView.js";
 import { SoperioComponent } from "@soperio/react";
 export declare function TabbedView({ queryField, api, screen, ...props }: TabbedViewConfig & SoperioComponent): JSX.Element;