@btst/stack 1.4.1 → 1.5.0

package/dist/packages/better-stack/src/plugins/cms/client/components/forms/file-upload.cjs

@@ -0,0 +1,118 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const sonner = require('sonner');
+const input = require('../../../../../../../ui/src/components/input.cjs');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const form = require('../../../../../../../ui/src/components/form.cjs');
+const lucideReact = require('lucide-react');
+const label = require('../../../../../../../ui/src/components/ui/auto-form/common/label.cjs');
+const tooltip = require('../../../../../../../ui/src/components/ui/auto-form/common/tooltip.cjs');
+
+function CMSFileUpload({
+  label: label$1,
+  isRequired,
+  fieldConfigItem,
+  fieldProps,
+  field,
+  uploadImage
+}) {
+  const {
+    showLabel: _showLabel,
+    value: _value,
+    ...safeFieldProps
+  } = fieldProps;
+  const showLabel = _showLabel === void 0 ? true : _showLabel;
+  const [isUploading, setIsUploading] = React.useState(false);
+  const [previewUrl, setPreviewUrl] = React.useState(
+    field.value || null
+  );
+  React.useEffect(() => {
+    const normalizedValue = field.value || null;
+    if (normalizedValue !== previewUrl) {
+      setPreviewUrl(normalizedValue);
+    }
+  }, [field.value, previewUrl]);
+  const handleFileChange = React.useCallback(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      if (!file.type.startsWith("image/")) {
+        sonner.toast.error("Please select an image file");
+        return;
+      }
+      setIsUploading(true);
+      try {
+        const url = await uploadImage(file);
+        setPreviewUrl(url);
+        field.onChange(url);
+      } catch (error) {
+        console.error("Image upload failed:", error);
+        sonner.toast.error("Failed to upload image");
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [field, uploadImage]
+  );
+  const handleRemove = React.useCallback(() => {
+    setPreviewUrl(null);
+    field.onChange("");
+  }, [field]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+      label,
+      {
+        label: fieldConfigItem?.label || label$1,
+        isRequired
+      }
+    ),
+    !previewUrl && /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        input.Input,
+        {
+          type: "file",
+          accept: "image/*",
+          ...safeFieldProps,
+          onChange: handleFileChange,
+          disabled: isUploading,
+          className: "cursor-pointer",
+          "data-testid": "image-upload-input"
+        }
+      ),
+      isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) })
+    ] }) }),
+    previewUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-20 w-20 overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: previewUrl,
+          alt: "Preview",
+          className: "h-full w-full object-cover",
+          "data-testid": "image-preview"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: handleRemove,
+          className: "flex items-center gap-1",
+          "data-testid": "remove-image-button",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" }),
+            "Remove"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] });
+}
+
+exports.CMSFileUpload = CMSFileUpload;

package/dist/packages/better-stack/src/plugins/cms/client/components/forms/file-upload.mjs

@@ -0,0 +1,116 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { toast } from 'sonner';
+import { Input } from '../../../../../../../ui/src/components/input.mjs';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { FormItem, FormControl, FormMessage } from '../../../../../../../ui/src/components/form.mjs';
+import { Loader2, Trash2 } from 'lucide-react';
+import AutoFormLabel from '../../../../../../../ui/src/components/ui/auto-form/common/label.mjs';
+import AutoFormTooltip from '../../../../../../../ui/src/components/ui/auto-form/common/tooltip.mjs';
+
+function CMSFileUpload({
+  label,
+  isRequired,
+  fieldConfigItem,
+  fieldProps,
+  field,
+  uploadImage
+}) {
+  const {
+    showLabel: _showLabel,
+    value: _value,
+    ...safeFieldProps
+  } = fieldProps;
+  const showLabel = _showLabel === void 0 ? true : _showLabel;
+  const [isUploading, setIsUploading] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState(
+    field.value || null
+  );
+  useEffect(() => {
+    const normalizedValue = field.value || null;
+    if (normalizedValue !== previewUrl) {
+      setPreviewUrl(normalizedValue);
+    }
+  }, [field.value, previewUrl]);
+  const handleFileChange = useCallback(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      if (!file.type.startsWith("image/")) {
+        toast.error("Please select an image file");
+        return;
+      }
+      setIsUploading(true);
+      try {
+        const url = await uploadImage(file);
+        setPreviewUrl(url);
+        field.onChange(url);
+      } catch (error) {
+        console.error("Image upload failed:", error);
+        toast.error("Failed to upload image");
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [field, uploadImage]
+  );
+  const handleRemove = useCallback(() => {
+    setPreviewUrl(null);
+    field.onChange("");
+  }, [field]);
+  return /* @__PURE__ */ jsxs(FormItem, { children: [
+    showLabel && /* @__PURE__ */ jsx(
+      AutoFormLabel,
+      {
+        label: fieldConfigItem?.label || label,
+        isRequired
+      }
+    ),
+    !previewUrl && /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "file",
+          accept: "image/*",
+          ...safeFieldProps,
+          onChange: handleFileChange,
+          disabled: isUploading,
+          className: "cursor-pointer",
+          "data-testid": "image-upload-input"
+        }
+      ),
+      isUploading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) })
+    ] }) }),
+    previewUrl && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative h-20 w-20 overflow-hidden rounded-md border", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: previewUrl,
+          alt: "Preview",
+          className: "h-full w-full object-cover",
+          "data-testid": "image-preview"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: handleRemove,
+          className: "flex items-center gap-1",
+          "data-testid": "remove-image-button",
+          children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
+            "Remove"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+
+export { CMSFileUpload };

package/dist/packages/better-stack/src/plugins/cms/client/components/loading/dashboard-skeleton.cjs

@@ -0,0 +1,18 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../../../../../ui/src/components/skeleton.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+
+function DashboardSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-dashboard-skeleton", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-48" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-64" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-32 rounded-lg" }, i)) })
+  ] }) });
+}
+
+exports.DashboardSkeleton = DashboardSkeleton;

package/dist/packages/better-stack/src/plugins/cms/client/components/loading/dashboard-skeleton.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Skeleton } from '../../../../../../../ui/src/components/skeleton.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+
+function DashboardSkeleton() {
+  return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-dashboard-skeleton", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-64" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-32 rounded-lg" }, i)) })
+  ] }) });
+}
+
+export { DashboardSkeleton };

package/dist/packages/better-stack/src/plugins/cms/client/components/loading/editor-skeleton.cjs

@@ -0,0 +1,32 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../../../../../ui/src/components/skeleton.cjs');
+
+function EditorSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-48" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-16" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-full" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-full" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-20" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-24 w-full" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-16" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-full" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-24" })
+  ] });
+}
+
+exports.EditorSkeleton = EditorSkeleton;

package/dist/packages/better-stack/src/plugins/cms/client/components/loading/editor-skeleton.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Skeleton } from '../../../../../../../ui/src/components/skeleton.mjs';
+
+function EditorSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-24" })
+  ] });
+}
+
+export { EditorSkeleton };

package/dist/packages/better-stack/src/plugins/cms/client/components/loading/list-skeleton.cjs

@@ -0,0 +1,32 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../../../../../ui/src/components/skeleton.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+
+function ListSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-list-skeleton", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-48" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-32" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-28" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border rounded-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" })
+      ] }) }),
+      Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b last:border-b-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" })
+      ] }) }, i))
+    ] })
+  ] }) });
+}
+
+exports.ListSkeleton = ListSkeleton;

package/dist/packages/better-stack/src/plugins/cms/client/components/loading/list-skeleton.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Skeleton } from '../../../../../../../ui/src/components/skeleton.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+
+function ListSkeleton() {
+  return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-list-skeleton", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-28" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "border rounded-lg", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+      ] }) }),
+      Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b last:border-b-0", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+      ] }) }, i))
+    ] })
+  ] }) });
+}
+
+export { ListSkeleton };

package/dist/packages/better-stack/src/plugins/cms/client/components/pages/404-page.cjs

@@ -0,0 +1,20 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const context = require('@btst/stack/context');
+
+function NotFoundPage() {
+  const { navigate, Link } = context.usePluginOverrides("cms");
+  const basePath = context.useBasePath();
+  const LinkComponent = Link || "a";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-6xl font-bold text-muted-foreground mb-4", children: "404" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-medium text-foreground mb-2", children: "Page not found" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-6 max-w-sm", children: "The page you're looking for doesn't exist or has been moved." }),
+    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: `${basePath}/cms`, children: "Back to CMS" }) })
+  ] });
+}
+
+exports.NotFoundPage = NotFoundPage;

package/dist/packages/better-stack/src/plugins/cms/client/components/pages/404-page.mjs

@@ -0,0 +1,18 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+
+function NotFoundPage() {
+  const { navigate, Link } = usePluginOverrides("cms");
+  const basePath = useBasePath();
+  const LinkComponent = Link || "a";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-6xl font-bold text-muted-foreground mb-4", children: "404" }),
+    /* @__PURE__ */ jsx("h2", { className: "text-xl font-medium text-foreground mb-2", children: "Page not found" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6 max-w-sm", children: "The page you're looking for doesn't exist or has been moved." }),
+    /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx(LinkComponent, { href: `${basePath}/cms`, children: "Back to CMS" }) })
+  ] });
+}
+
+export { NotFoundPage };

package/dist/packages/better-stack/src/plugins/cms/client/components/pages/content-editor-page.cjs

@@ -0,0 +1,46 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const _404Page = require('./404-page.cjs');
+const editorSkeleton = require('../loading/editor-skeleton.cjs');
+
+const ContentEditorPageInternal = React.lazy(
+  () => import('./content-editor-page.internal.cjs').then((m) => ({
+    default: m.ContentEditorPage
+  }))
+);
+function ContentEditorPageComponent({
+  typeSlug,
+  id
+}) {
+  const { onRouteError } = context.usePluginOverrides("cms");
+  const isNew = !id;
+  const path = isNew ? `/cms/${typeSlug}/new` : `/cms/${typeSlug}/${id}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path,
+      PageComponent: ContentEditorPageInternal,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: editorSkeleton.EditorSkeleton,
+      NotFoundComponent: _404Page.NotFoundPage,
+      props: { typeSlug, id },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("contentEditor", error, {
+            path,
+            params: { typeSlug, id: id ?? "" },
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+
+exports.ContentEditorPageComponent = ContentEditorPageComponent;

package/dist/packages/better-stack/src/plugins/cms/client/components/pages/content-editor-page.internal.cjs

@@ -0,0 +1,83 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const context = require('@btst/stack/context');
+const contentForm = require('../forms/content-form.cjs');
+const emptyState = require('../shared/empty-state.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+const editorSkeleton = require('../loading/editor-skeleton.cjs');
+const index = require('../../localization/index.cjs');
+const cmsHooks = require('../../hooks/cms-hooks.cjs');
+
+function ContentEditorPage({ typeSlug, id }) {
+  const { navigate, localization: customLocalization } = context.usePluginOverrides("cms");
+  const localization = { ...index.CMS_LOCALIZATION, ...customLocalization };
+  const basePath = context.useBasePath();
+  const { contentTypes } = cmsHooks.useSuspenseContentTypes();
+  const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
+  const isEditing = !!id;
+  const { item, isLoading: isLoadingItem } = cmsHooks.useContentItem(typeSlug, id ?? "");
+  const createContent = cmsHooks.useCreateContent(typeSlug);
+  const updateContent = cmsHooks.useUpdateContent(typeSlug);
+  if (!contentType) {
+    return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+      emptyState.EmptyState,
+      {
+        title: localization.CMS_ERROR_NOT_FOUND,
+        description: "Content type not found"
+      }
+    ) }) });
+  }
+  if (isEditing && isLoadingItem) {
+    return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(editorSkeleton.EditorSkeleton, {}) }) });
+  }
+  if (isEditing && !item) {
+    return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+      emptyState.EmptyState,
+      {
+        title: localization.CMS_ERROR_NOT_FOUND,
+        description: "Content item not found"
+      }
+    ) }) });
+  }
+  const handleSubmit = async (data) => {
+    if (isEditing && id) {
+      await updateContent.mutateAsync({ id, data });
+    } else {
+      await createContent.mutateAsync(data);
+    }
+    navigate(`${basePath}/cms/${typeSlug}`);
+  };
+  const title = isEditing ? localization.CMS_EDITOR_TITLE_EDIT.replace("{typeName}", contentType.name) : localization.CMS_EDITOR_TITLE_NEW.replace("{typeName}", contentType.name);
+  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-2xl space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: () => navigate(`${basePath}/cms/${typeSlug}`),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      contentForm.ContentForm,
+      {
+        contentType,
+        initialData: item?.parsedData,
+        initialSlug: item?.slug,
+        isEditing,
+        onSubmit: handleSubmit,
+        onCancel: () => navigate(`${basePath}/cms/${typeSlug}`)
+      },
+      isEditing ? `edit-${id}` : "create"
+    )
+  ] }) });
+}
+
+exports.ContentEditorPage = ContentEditorPage;

package/dist/packages/better-stack/src/plugins/cms/client/components/pages/content-editor-page.internal.mjs

@@ -0,0 +1,81 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { ContentForm } from '../forms/content-form.mjs';
+import { EmptyState } from '../shared/empty-state.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+import { EditorSkeleton } from '../loading/editor-skeleton.mjs';
+import { CMS_LOCALIZATION } from '../../localization/index.mjs';
+import { useSuspenseContentTypes, useContentItem, useCreateContent, useUpdateContent } from '../../hooks/cms-hooks.mjs';
+
+function ContentEditorPage({ typeSlug, id }) {
+  const { navigate, localization: customLocalization } = usePluginOverrides("cms");
+  const localization = { ...CMS_LOCALIZATION, ...customLocalization };
+  const basePath = useBasePath();
+  const { contentTypes } = useSuspenseContentTypes();
+  const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
+  const isEditing = !!id;
+  const { item, isLoading: isLoadingItem } = useContentItem(typeSlug, id ?? "");
+  const createContent = useCreateContent(typeSlug);
+  const updateContent = useUpdateContent(typeSlug);
+  if (!contentType) {
+    return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: localization.CMS_ERROR_NOT_FOUND,
+        description: "Content type not found"
+      }
+    ) }) });
+  }
+  if (isEditing && isLoadingItem) {
+    return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx(EditorSkeleton, {}) }) });
+  }
+  if (isEditing && !item) {
+    return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: localization.CMS_ERROR_NOT_FOUND,
+        description: "Content item not found"
+      }
+    ) }) });
+  }
+  const handleSubmit = async (data) => {
+    if (isEditing && id) {
+      await updateContent.mutateAsync({ id, data });
+    } else {
+      await createContent.mutateAsync(data);
+    }
+    navigate(`${basePath}/cms/${typeSlug}`);
+  };
+  const title = isEditing ? localization.CMS_EDITOR_TITLE_EDIT.replace("{typeName}", contentType.name) : localization.CMS_EDITOR_TITLE_NEW.replace("{typeName}", contentType.name);
+  return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-2xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: () => navigate(`${basePath}/cms/${typeSlug}`),
+          children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ContentForm,
+      {
+        contentType,
+        initialData: item?.parsedData,
+        initialSlug: item?.slug,
+        isEditing,
+        onSubmit: handleSubmit,
+        onCancel: () => navigate(`${basePath}/cms/${typeSlug}`)
+      },
+      isEditing ? `edit-${id}` : "create"
+    )
+  ] }) });
+}
+
+export { ContentEditorPage };