convex-cms 0.0.2 → 0.0.5-alpha.0

package/admin-dist/server/_ssr/content-types-BZqY_BER.mjs

@@ -0,0 +1,1342 @@
+import { j as jsxRuntimeExports, r as reactExports } from "../_chunks/_libs/react.mjs";
+import { a as api, c as cn } from "./router-D1BMAMJT.mjs";
+import { C as CmsButton, B as Badge } from "./CmsButton-B45JAKR1.mjs";
+import { I as Input, a as Checkbox, C as CmsEmptyState, c as CmsDialog } from "./CmsEmptyState-D_BQFAVR.mjs";
+import { L as Label } from "./label-T-QNKAr6.mjs";
+import { T as Textarea } from "./textarea-4K5OJgeh.mjs";
+import { S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, d as SelectItem } from "./select-CqmuN2F6.mjs";
+import { E as ErrorState, a as ErrorAlert } from "./ErrorState-cI-bKLez.mjs";
+import { C as CmsPageHeader } from "./CmsPageHeader-CrUZA59A.mjs";
+import { C as CmsToolbar } from "./CmsToolbar-ByaW5iXf.mjs";
+import { u as useTanStackNavigation } from "./tanstack-adapter-BXZrMauE.mjs";
+import { u as useQuery, d as useMutation } from "../_libs/convex.mjs";
+import { ad as Grid3x3, ae as List, Q as Plus, N as Search, af as FileType, W as Pencil, ag as TextAlignStart, ah as FolderOpen, V as Tag, d as ChevronDown, p as Braces, I as Image, a8 as Link2, u as Calendar, T as ToggleLeft, r as Hash, ai as ChevronUp, X, O as TriangleAlert } from "../_libs/lucide-react.mjs";
+import "../_chunks/_libs/@tanstack/react-router.mjs";
+import "../_libs/tiny-warning.mjs";
+import "../_chunks/_libs/@tanstack/router-core.mjs";
+import "../_libs/cookie-es.mjs";
+import "../_chunks/_libs/@tanstack/store.mjs";
+import "../_chunks/_libs/@tanstack/history.mjs";
+import "../_libs/tiny-invariant.mjs";
+import "../_libs/seroval.mjs";
+import "../_libs/seroval-plugins.mjs";
+import "node:stream/web";
+import "node:stream";
+import "../_chunks/_libs/react-dom.mjs";
+import "util";
+import "crypto";
+import "async_hooks";
+import "stream";
+import "../_libs/isbot.mjs";
+import "../_chunks/_libs/@tanstack/react-store.mjs";
+import "../_libs/use-sync-external-store.mjs";
+import "../_libs/clsx.mjs";
+import "../_libs/tailwind-merge.mjs";
+import "../_chunks/_libs/@radix-ui/react-slot.mjs";
+import "../_chunks/_libs/@radix-ui/react-compose-refs.mjs";
+import "../_chunks/_libs/@radix-ui/react-dropdown-menu.mjs";
+import "../_chunks/_libs/@radix-ui/primitive.mjs";
+import "../_chunks/_libs/@radix-ui/react-context.mjs";
+import "../_chunks/_libs/@radix-ui/react-use-controllable-state.mjs";
+import "../_chunks/_libs/@radix-ui/react-use-layout-effect.mjs";
+import "../_chunks/_libs/@radix-ui/react-primitive.mjs";
+import "../_chunks/_libs/@radix-ui/react-menu.mjs";
+import "../_chunks/_libs/@radix-ui/react-collection.mjs";
+import "../_chunks/_libs/@radix-ui/react-direction.mjs";
+import "../_chunks/_libs/@radix-ui/react-dismissable-layer.mjs";
+import "../_chunks/_libs/@radix-ui/react-use-callback-ref.mjs";
+import "../_chunks/_libs/@radix-ui/react-use-escape-keydown.mjs";
+import "../_chunks/_libs/@radix-ui/react-focus-guards.mjs";
+import "../_chunks/_libs/@radix-ui/react-focus-scope.mjs";
+import "../_chunks/_libs/@radix-ui/react-popper.mjs";
+import "../_chunks/_libs/@floating-ui/react-dom.mjs";
+import "../_chunks/_libs/@floating-ui/dom.mjs";
+import "../_chunks/_libs/@floating-ui/core.mjs";
+import "../_chunks/_libs/@floating-ui/utils.mjs";
+import "../_chunks/_libs/@radix-ui/react-arrow.mjs";
+import "../_chunks/_libs/@radix-ui/react-use-size.mjs";
+import "../_chunks/_libs/@radix-ui/react-portal.mjs";
+import "../_chunks/_libs/@radix-ui/react-presence.mjs";
+import "../_chunks/_libs/@radix-ui/react-roving-focus.mjs";
+import "../_chunks/_libs/@radix-ui/react-id.mjs";
+import "../_libs/aria-hidden.mjs";
+import "../_libs/react-remove-scroll.mjs";
+import "../_libs/tslib.mjs";
+import "../_libs/react-remove-scroll-bar.mjs";
+import "../_libs/react-style-singleton.mjs";
+import "../_libs/get-nonce.mjs";
+import "../_libs/use-sidecar.mjs";
+import "../_libs/use-callback-ref.mjs";
+import "../_chunks/_libs/@radix-ui/react-avatar.mjs";
+import "../_chunks/_libs/@radix-ui/react-use-is-hydrated.mjs";
+import "../_libs/class-variance-authority.mjs";
+import "../_chunks/_libs/@radix-ui/react-popover.mjs";
+import "./index.mjs";
+import "node:async_hooks";
+import "../_libs/h3-v2.mjs";
+import "../_libs/rou3.mjs";
+import "../_libs/srvx.mjs";
+import "node:http";
+import "node:https";
+import "node:http2";
+import "../_libs/zod.mjs";
+import "../_chunks/_libs/@radix-ui/react-dialog.mjs";
+import "../_chunks/_libs/@radix-ui/react-checkbox.mjs";
+import "../_chunks/_libs/@radix-ui/react-use-previous.mjs";
+import "../_chunks/_libs/@radix-ui/react-label.mjs";
+import "../_chunks/_libs/@radix-ui/react-select.mjs";
+import "../_chunks/_libs/@radix-ui/number.mjs";
+import "../_chunks/_libs/@radix-ui/react-visually-hidden.mjs";
+function BreakingChangesWarningDialog({
+  isOpen,
+  onClose,
+  breakingChanges,
+  onForceUpdate,
+  onCancel,
+  isLoading
+}) {
+  const handleCancel = () => {
+    onCancel();
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    CmsDialog,
+    {
+      open: isOpen,
+      onOpenChange: (open) => !open && !isLoading && handleCancel(),
+      title: "Breaking Changes Detected",
+      size: "lg",
+      footer: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { variant: "outline", onClick: handleCancel, disabled: isLoading, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { variant: "danger", onClick: onForceUpdate, loading: isLoading, children: "Force Update" })
+      ] }),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "mt-0.5 size-5 shrink-0 text-amber-600" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-amber-800", children: "These changes may affect existing content" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-amber-700", children: "The following changes could cause data loss or validation errors for existing entries. Review carefully before proceeding." })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm font-medium text-foreground", children: [
+            breakingChanges.length,
+            " breaking change",
+            breakingChanges.length !== 1 ? "s" : "",
+            " detected:"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-2", children: breakingChanges.map((change, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "li",
+            {
+              className: "flex items-start gap-2 rounded-md border bg-muted/30 px-3 py-2 text-sm",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "mt-0.5 size-1.5 shrink-0 rounded-full bg-amber-500" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: change })
+              ]
+            },
+            index
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: 'Click "Force Update" to apply these changes anyway, or "Cancel" to go back and modify your changes.' })
+      ] })
+    }
+  );
+}
+const FIELD_TYPE_INFO = {
+  text: {
+    label: "Text",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(TextAlignStart, { className: "size-4" }),
+    description: "Single line text input"
+  },
+  richText: {
+    label: "Rich Text",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FileType, { className: "size-4" }),
+    description: "Multi-line formatted text"
+  },
+  number: {
+    label: "Number",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Hash, { className: "size-4" }),
+    description: "Numeric value"
+  },
+  boolean: {
+    label: "Boolean",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleLeft, { className: "size-4" }),
+    description: "True/false toggle"
+  },
+  date: {
+    label: "Date",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: "size-4" }),
+    description: "Date picker"
+  },
+  datetime: {
+    label: "Date & Time",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: "size-4" }),
+    description: "Date and time picker"
+  },
+  reference: {
+    label: "Reference",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Link2, { className: "size-4" }),
+    description: "Link to another content entry"
+  },
+  media: {
+    label: "Media",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { className: "size-4" }),
+    description: "Image, video, or file"
+  },
+  json: {
+    label: "JSON",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Braces, { className: "size-4" }),
+    description: "Custom JSON data"
+  },
+  select: {
+    label: "Select",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }),
+    description: "Dropdown selection"
+  },
+  multiSelect: {
+    label: "Multi-Select",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "size-4" }),
+    description: "Multiple selections"
+  },
+  tags: {
+    label: "Tags",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Tag, { className: "size-4" }),
+    description: "Free-form tag list"
+  },
+  category: {
+    label: "Category",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FolderOpen, { className: "size-4" }),
+    description: "Taxonomy category selection"
+  }
+};
+function generateMachineName(displayName) {
+  return displayName.toLowerCase().trim().replace(/[^a-z0-9\s]/g, "").replace(/\s+/g, "_").replace(/^[0-9]/, "_$&").slice(0, 64);
+}
+function isValidMachineName(name) {
+  return /^[a-z][a-z0-9_]{0,63}$/.test(name);
+}
+function ContentTypeFormModal({
+  isOpen,
+  onClose,
+  onCreated,
+  onUpdated,
+  contentType
+}) {
+  const isEditing = !!contentType;
+  const [displayName, setDisplayName] = reactExports.useState("");
+  const [machineName, setMachineName] = reactExports.useState("");
+  const [machineNameManuallyEdited, setMachineNameManuallyEdited] = reactExports.useState(
+    false
+  );
+  const [description, setDescription] = reactExports.useState("");
+  const [singleton, setSingleton] = reactExports.useState(false);
+  const [fields, setFields] = reactExports.useState([
+    { name: "title", label: "Title", type: "text", required: true }
+  ]);
+  const [titleField, setTitleField] = reactExports.useState("title");
+  const [slugField, setSlugField] = reactExports.useState("title");
+  const [isSubmitting, setIsSubmitting] = reactExports.useState(false);
+  const [submitError, setSubmitError] = reactExports.useState(null);
+  const [activeFieldIndex, setActiveFieldIndex] = reactExports.useState(null);
+  const [showFieldEditor, setShowFieldEditor] = reactExports.useState(false);
+  const [breakingChanges, setBreakingChanges] = reactExports.useState([]);
+  const [showBreakingWarning, setShowBreakingWarning] = reactExports.useState(false);
+  const [isForceUpdating, setIsForceUpdating] = reactExports.useState(false);
+  const createContentType = useMutation(api.contentTypes.create);
+  const updateContentType = useMutation(api.contentTypes.update);
+  reactExports.useEffect(() => {
+    if (contentType && isOpen) {
+      setDisplayName(contentType.displayName);
+      setMachineName(contentType.name);
+      setMachineNameManuallyEdited(true);
+      setDescription(contentType.description || "");
+      setSingleton(contentType.singleton || false);
+      setFields(contentType.fields);
+      setTitleField(contentType.titleField || "");
+      setSlugField(contentType.slugField || "");
+    }
+  }, [contentType, isOpen]);
+  const resetForm = reactExports.useCallback(() => {
+    setDisplayName("");
+    setMachineName("");
+    setMachineNameManuallyEdited(false);
+    setDescription("");
+    setSingleton(false);
+    setFields([
+      { name: "title", label: "Title", type: "text", required: true }
+    ]);
+    setTitleField("title");
+    setSlugField("title");
+    setIsSubmitting(false);
+    setSubmitError(null);
+    setActiveFieldIndex(null);
+    setShowFieldEditor(false);
+    setBreakingChanges([]);
+    setShowBreakingWarning(false);
+    setIsForceUpdating(false);
+  }, []);
+  const handleDisplayNameChange = reactExports.useCallback(
+    (value) => {
+      setDisplayName(value);
+      if (!machineNameManuallyEdited) {
+        setMachineName(generateMachineName(value));
+      }
+    },
+    [machineNameManuallyEdited]
+  );
+  const handleMachineNameChange = reactExports.useCallback((value) => {
+    setMachineNameManuallyEdited(true);
+    setMachineName(value.toLowerCase().replace(/[^a-z0-9_]/g, ""));
+  }, []);
+  const addField = reactExports.useCallback(() => {
+    const newFieldName = `field_${fields.length + 1}`;
+    setFields((prev) => [
+      ...prev,
+      {
+        name: newFieldName,
+        label: `Field ${prev.length + 1}`,
+        type: "text",
+        required: false
+      }
+    ]);
+    setActiveFieldIndex(fields.length);
+    setShowFieldEditor(true);
+  }, [fields.length]);
+  const removeField = reactExports.useCallback(
+    (index) => {
+      const fieldToRemove = fields[index];
+      setFields((prev) => prev.filter((_, i) => i !== index));
+      if (titleField === fieldToRemove.name) {
+        const firstTextField = fields.find(
+          (f, i) => i !== index && f.type === "text"
+        );
+        setTitleField(firstTextField?.name || "");
+      }
+      if (slugField === fieldToRemove.name) {
+        const firstTextField = fields.find(
+          (f, i) => i !== index && f.type === "text"
+        );
+        setSlugField(firstTextField?.name || "");
+      }
+      if (activeFieldIndex === index) {
+        setActiveFieldIndex(null);
+        setShowFieldEditor(false);
+      } else if (activeFieldIndex !== null && activeFieldIndex > index) {
+        setActiveFieldIndex(activeFieldIndex - 1);
+      }
+    },
+    [fields, activeFieldIndex, titleField, slugField]
+  );
+  const updateField = reactExports.useCallback(
+    (index, updates) => {
+      setFields(
+        (prev) => prev.map(
+          (field, i) => i === index ? { ...field, ...updates } : field
+        )
+      );
+    },
+    []
+  );
+  const moveField = reactExports.useCallback((fromIndex, toIndex) => {
+    setFields((prev) => {
+      const newFields = [...prev];
+      const [movedField] = newFields.splice(fromIndex, 1);
+      newFields.splice(toIndex, 0, movedField);
+      return newFields;
+    });
+    setActiveFieldIndex(toIndex);
+  }, []);
+  const validationErrors = reactExports.useMemo(() => {
+    const errors = [];
+    if (!displayName.trim()) {
+      errors.push("Display name is required");
+    }
+    if (!machineName.trim()) {
+      errors.push("System Name is required");
+    } else if (!isValidMachineName(machineName)) {
+      errors.push(
+        "System Name must start with a letter and contain only lowercase letters, numbers, and underscores"
+      );
+    }
+    if (fields.length === 0) {
+      errors.push("At least one field is required");
+    }
+    const fieldNames = fields.map((f) => f.name);
+    const duplicates = fieldNames.filter(
+      (name, index) => fieldNames.indexOf(name) !== index
+    );
+    if (duplicates.length > 0) {
+      errors.push(
+        `Duplicate field names: ${[...new Set(duplicates)].join(", ")}`
+      );
+    }
+    for (const field of fields) {
+      if (!field.name.trim()) {
+        errors.push(`Field "${field.label}" has an empty name`);
+      } else if (!/^[a-z][a-z0-9_]{0,63}$/.test(field.name)) {
+        errors.push(`Field "${field.name}" has an invalid name format`);
+      }
+      if (!field.label.trim()) {
+        errors.push(`Field with name "${field.name}" has an empty label`);
+      }
+      if ((field.type === "select" || field.type === "multiSelect") && (!field.options?.options || field.options.options.length === 0)) {
+        errors.push(
+          `${field.type} field "${field.label}" requires at least one option`
+        );
+      }
+    }
+    return errors;
+  }, [displayName, machineName, fields]);
+  const textFields = reactExports.useMemo(() => fields.filter((f) => f.type === "text"), [
+    fields
+  ]);
+  const parseBreakingChanges = (errorMessage) => {
+    const lines = errorMessage.split("\n");
+    return lines.filter((line) => line.trim().startsWith("-")).map((line) => line.trim().substring(2));
+  };
+  const handleSubmit = reactExports.useCallback(
+    async (e, force = false) => {
+      e.preventDefault();
+      if (validationErrors.length > 0) {
+        setSubmitError(validationErrors.join(". "));
+        return;
+      }
+      setIsSubmitting(true);
+      setSubmitError(null);
+      try {
+        if (isEditing && contentType) {
+          const result = await updateContentType({
+            id: contentType._id,
+            displayName: displayName.trim(),
+            description: description.trim() || void 0,
+            fields,
+            singleton,
+            titleField: titleField || void 0,
+            slugField: slugField || void 0,
+            force
+          });
+          onUpdated?.(result);
+          resetForm();
+          onClose();
+        } else {
+          const result = await createContentType({
+            name: machineName,
+            displayName: displayName.trim(),
+            description: description.trim() || void 0,
+            fields,
+            singleton,
+            titleField: titleField || void 0,
+            slugField: slugField || void 0
+          });
+          onCreated?.(result);
+          resetForm();
+          onClose();
+        }
+      } catch (error) {
+        const message = error instanceof Error ? error.message : isEditing ? "Failed to update content type" : "Failed to create content type";
+        if (isEditing && !force && message.includes("breaking change")) {
+          const changes = parseBreakingChanges(message);
+          setBreakingChanges(changes);
+          setShowBreakingWarning(true);
+        } else {
+          setSubmitError(message);
+        }
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [
+      validationErrors,
+      isEditing,
+      contentType,
+      createContentType,
+      updateContentType,
+      machineName,
+      displayName,
+      description,
+      fields,
+      singleton,
+      titleField,
+      slugField,
+      onCreated,
+      onUpdated,
+      resetForm,
+      onClose
+    ]
+  );
+  const handleForceUpdate = reactExports.useCallback(async () => {
+    setIsForceUpdating(true);
+    try {
+      if (contentType) {
+        const result = await updateContentType({
+          id: contentType._id,
+          displayName: displayName.trim(),
+          description: description.trim() || void 0,
+          fields,
+          singleton,
+          titleField: titleField || void 0,
+          slugField: slugField || void 0,
+          force: true
+        });
+        onUpdated?.(result);
+        resetForm();
+        setShowBreakingWarning(false);
+        onClose();
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to update content type";
+      setSubmitError(message);
+      setShowBreakingWarning(false);
+    } finally {
+      setIsForceUpdating(false);
+    }
+  }, [
+    contentType,
+    updateContentType,
+    displayName,
+    description,
+    fields,
+    singleton,
+    titleField,
+    slugField,
+    onUpdated,
+    resetForm,
+    onClose
+  ]);
+  const handleClose = reactExports.useCallback(() => {
+    if (isSubmitting) return;
+    resetForm();
+    onClose();
+  }, [isSubmitting, resetForm, onClose]);
+  if (!isOpen) return null;
+  const activeField = activeFieldIndex !== null ? fields[activeFieldIndex] : null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CmsDialog,
+      {
+        open: isOpen,
+        onOpenChange: (open) => !open && handleClose(),
+        title: isEditing ? "Edit Content Type" : "Create Content Type",
+        size: "2xl",
+        footer: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CmsButton,
+            {
+              variant: "outline",
+              onClick: handleClose,
+              disabled: isSubmitting,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CmsButton,
+            {
+              variant: "primary",
+              onClick: handleSubmit,
+              disabled: validationErrors.length > 0,
+              loading: isSubmitting,
+              "data-testid": isEditing ? "update-content-type-submit" : "create-content-type-submit",
+              children: isEditing ? "Save Changes" : "Create Content Type"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold text-foreground", children: "Basic Information" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { htmlFor: "displayName", children: [
+                "Display Name ",
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Input,
+                {
+                  id: "displayName",
+                  value: displayName,
+                  onChange: (e) => handleDisplayNameChange(e.target.value),
+                  placeholder: "e.g., Blog Post",
+                  disabled: isSubmitting,
+                  autoFocus: true,
+                  "data-testid": "display-name-input"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { htmlFor: "machineName", children: [
+                "System Name ",
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Input,
+                {
+                  id: "machineName",
+                  value: machineName,
+                  onChange: (e) => handleMachineNameChange(e.target.value),
+                  placeholder: "e.g., blog_post",
+                  disabled: isSubmitting || isEditing,
+                  className: cn(
+                    !isValidMachineName(machineName) && machineName && "border-destructive"
+                  ),
+                  "data-testid": "machine-name-input"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: isEditing ? "System name cannot be changed after creation" : "Lowercase letters, numbers, and underscores only. Used in API queries." })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "description", children: "Description" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Textarea,
+                {
+                  id: "description",
+                  value: description,
+                  onChange: (e) => setDescription(e.target.value),
+                  placeholder: "Optional description of this content type",
+                  disabled: isSubmitting,
+                  rows: 2
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Checkbox,
+                {
+                  id: "singleton",
+                  checked: singleton,
+                  onCheckedChange: (checked) => setSingleton(checked),
+                  disabled: isSubmitting
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "singleton", className: "cursor-pointer", children: "Singleton (only one entry allowed)" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold text-foreground", children: "Fields" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                CmsButton,
+                {
+                  type: "button",
+                  variant: "secondary",
+                  size: "sm",
+                  onClick: addField,
+                  disabled: isSubmitting,
+                  "data-testid": "add-field-button",
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-3.5" }),
+                    "Add Field"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: fields.map((field, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex cursor-pointer items-center gap-2 rounded-lg border p-2 transition-colors hover:bg-muted/50",
+                  activeFieldIndex === index && "border-primary bg-primary/5"
+                ),
+                onClick: () => {
+                  setActiveFieldIndex(index);
+                  setShowFieldEditor(true);
+                },
+                "data-testid": `field-item-${index}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                    index > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          moveField(index, index - 1);
+                        },
+                        className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronUp, { className: "size-3" })
+                      }
+                    ),
+                    index < fields.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          moveField(index, index + 1);
+                        },
+                        className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-8 items-center justify-center rounded bg-muted text-muted-foreground", children: FIELD_TYPE_INFO[field.type].icon }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-sm font-medium", children: field.label }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                      FIELD_TYPE_INFO[field.type].label,
+                      field.required && " *"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        removeField(index);
+                      },
+                      disabled: isSubmitting || fields.length === 1,
+                      className: "rounded p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive disabled:opacity-50",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" })
+                    }
+                  )
+                ]
+              },
+              index
+            )) }),
+            showFieldEditor && activeField && activeFieldIndex !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: "rounded-lg border bg-muted/30 p-4",
+                "data-testid": "field-editor",
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("h5", { className: "font-medium", children: [
+                      "Edit Field: ",
+                      activeField.label
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          setShowFieldEditor(false);
+                          setActiveFieldIndex(null);
+                        },
+                        className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { htmlFor: "fieldLabel", children: [
+                        "Label ",
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Input,
+                        {
+                          id: "fieldLabel",
+                          value: activeField.label,
+                          onChange: (e) => updateField(activeFieldIndex, {
+                            label: e.target.value,
+                            name: machineNameManuallyEdited ? activeField.name : generateMachineName(e.target.value) || activeField.name
+                          }),
+                          disabled: isSubmitting,
+                          "data-testid": "field-label-input"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { htmlFor: "fieldName", children: [
+                        "Name ",
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Input,
+                        {
+                          id: "fieldName",
+                          value: activeField.name,
+                          onChange: (e) => updateField(activeFieldIndex, {
+                            name: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "")
+                          }),
+                          disabled: isSubmitting,
+                          "data-testid": "field-name-input"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { htmlFor: "fieldType", children: [
+                        "Type ",
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                        Select,
+                        {
+                          value: activeField.type,
+                          onValueChange: (value) => updateField(activeFieldIndex, {
+                            type: value,
+                            options: void 0
+                          }),
+                          disabled: isSubmitting,
+                          children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { "data-testid": "field-type-select", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectContent, { children: Object.entries(FIELD_TYPE_INFO).map(([type, info]) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: type, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                              info.icon,
+                              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: info.label }),
+                              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground", children: [
+                                "- ",
+                                info.description
+                              ] })
+                            ] }) }, type)) })
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Checkbox,
+                        {
+                          id: "fieldRequired",
+                          checked: activeField.required,
+                          onCheckedChange: (checked) => updateField(activeFieldIndex, {
+                            required: checked
+                          }),
+                          disabled: isSubmitting
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "fieldRequired", className: "cursor-pointer", children: "Required" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "fieldDescription", children: "Help Text" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Input,
+                        {
+                          id: "fieldDescription",
+                          value: activeField.description || "",
+                          onChange: (e) => updateField(activeFieldIndex, {
+                            description: e.target.value || void 0
+                          }),
+                          placeholder: "Help text shown below the field",
+                          disabled: isSubmitting
+                        }
+                      )
+                    ] }),
+                    (activeField.type === "select" || activeField.type === "multiSelect") && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      SelectOptionsEditor,
+                      {
+                        options: activeField.options?.options || [],
+                        onChange: (options) => updateField(activeFieldIndex, {
+                          options: { ...activeField.options, options }
+                        }),
+                        disabled: isSubmitting
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          textFields.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-semibold text-foreground", children: "Display Settings" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "titleField", children: "Title Field" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                Select,
+                {
+                  value: titleField || "none",
+                  onValueChange: (v) => setTitleField(v === "none" ? "" : v),
+                  disabled: isSubmitting,
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "None" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "none", children: "None" }),
+                      textFields.map((field) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: field.name, children: field.label }, field.name))
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Field to display as the entry title in lists" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "slugField", children: "Slug Field" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                Select,
+                {
+                  value: slugField || "none",
+                  onValueChange: (v) => setSlugField(v === "none" ? "" : v),
+                  disabled: isSubmitting,
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "None (auto-generate)" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "none", children: "None (auto-generate)" }),
+                      textFields.map((field) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: field.name, children: field.label }, field.name))
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: "Field to use for generating URL-friendly slugs" })
+            ] })
+          ] }),
+          submitError && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: "rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800",
+              role: "alert",
+              "data-testid": "submit-error",
+              children: submitError
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      BreakingChangesWarningDialog,
+      {
+        isOpen: showBreakingWarning,
+        onClose: () => setShowBreakingWarning(false),
+        breakingChanges,
+        onForceUpdate: handleForceUpdate,
+        onCancel: () => {
+          setShowBreakingWarning(false);
+          setBreakingChanges([]);
+        },
+        isLoading: isForceUpdating
+      }
+    )
+  ] });
+}
+function SelectOptionsEditor({
+  options,
+  onChange,
+  disabled
+}) {
+  const addOption = () => {
+    onChange([
+      ...options,
+      { value: `option_${options.length + 1}`, label: "" }
+    ]);
+  };
+  const removeOption = (index) => {
+    onChange(options.filter((_, i) => i !== index));
+  };
+  const updateOption = (index, updates) => {
+    onChange(
+      options.map((opt, i) => i === index ? { ...opt, ...updates } : opt)
+    );
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { children: [
+      "Options ",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-destructive", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: options.map((option, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Input,
+        {
+          value: option.label,
+          onChange: (e) => {
+            const label = e.target.value;
+            const value = label.toLowerCase().replace(/[^a-z0-9]/g, "_").replace(/^_+|_+$/g, "");
+            updateOption(index, { label, value });
+          },
+          placeholder: "Option label",
+          disabled,
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Input,
+        {
+          value: option.value,
+          onChange: (e) => updateOption(index, {
+            value: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "")
+          }),
+          placeholder: "value",
+          disabled,
+          className: "w-32"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => removeOption(index),
+          disabled,
+          className: "rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" })
+        }
+      )
+    ] }, index)) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      CmsButton,
+      {
+        type: "button",
+        variant: "secondary",
+        size: "sm",
+        onClick: addOption,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-3.5" }),
+          "Add Option"
+        ]
+      }
+    )
+  ] });
+}
+const FIELD_ICONS = {
+  text: /* @__PURE__ */ jsxRuntimeExports.jsx(TextAlignStart, { className: "size-3" }),
+  richText: /* @__PURE__ */ jsxRuntimeExports.jsx(FileType, { className: "size-3" }),
+  number: /* @__PURE__ */ jsxRuntimeExports.jsx(Hash, { className: "size-3" }),
+  boolean: /* @__PURE__ */ jsxRuntimeExports.jsx(ToggleLeft, { className: "size-3" }),
+  date: /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: "size-3" }),
+  datetime: /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: "size-3" }),
+  reference: /* @__PURE__ */ jsxRuntimeExports.jsx(Link2, { className: "size-3" }),
+  media: /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { className: "size-3" }),
+  json: /* @__PURE__ */ jsxRuntimeExports.jsx(Braces, { className: "size-3" }),
+  select: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" }),
+  multiSelect: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "size-3" }),
+  tags: /* @__PURE__ */ jsxRuntimeExports.jsx(Tag, { className: "size-3" }),
+  category: /* @__PURE__ */ jsxRuntimeExports.jsx(FolderOpen, { className: "size-3" })
+};
+function ContentTypesPage({ api: api2, navigation }) {
+  const [searchQuery, setSearchQuery] = reactExports.useState("");
+  const [viewMode, setViewMode] = reactExports.useState("grid");
+  const [showActiveOnly, setShowActiveOnly] = reactExports.useState(true);
+  const [showCreateModal, setShowCreateModal] = reactExports.useState(false);
+  const [editingContentType, setEditingContentType] = reactExports.useState(null);
+  const [dismissedError, setDismissedError] = reactExports.useState(false);
+  const handleContentTypeCreated = reactExports.useCallback(() => {
+    setShowCreateModal(false);
+  }, []);
+  const handleContentTypeUpdated = reactExports.useCallback(() => {
+    setEditingContentType(null);
+  }, []);
+  const contentTypesResult = useQuery(api2.contentTypes.list, {
+    isActive: showActiveOnly ? true : void 0,
+    includeEntryCounts: true
+  });
+  const contentTypes = contentTypesResult?.page ?? [];
+  const isLoading = contentTypesResult === void 0;
+  const error = contentTypesResult?.error;
+  const handleRetry = reactExports.useCallback(() => {
+    setDismissedError(false);
+    window.location.reload();
+  }, []);
+  const filteredContentTypes = reactExports.useMemo(() => {
+    if (!searchQuery.trim()) {
+      return contentTypes;
+    }
+    const query = searchQuery.toLowerCase();
+    return contentTypes.filter(
+      (type) => type.name.toLowerCase().includes(query) || type.displayName.toLowerCase().includes(query)
+    );
+  }, [contentTypes, searchQuery]);
+  const formatDate = (timestamp) => {
+    return new Date(timestamp).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+  };
+  const getRelativeTime = (timestamp) => {
+    const now = Date.now();
+    const diff = now - timestamp;
+    const seconds = Math.floor(diff / 1e3);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (days > 30) {
+      return formatDate(timestamp);
+    } else if (days > 0) {
+      return `${days}d ago`;
+    } else if (hours > 0) {
+      return `${hours}h ago`;
+    } else if (minutes > 0) {
+      return `${minutes}m ago`;
+    } else {
+      return "Just now";
+    }
+  };
+  if (error && !isLoading) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6 p-6", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CmsPageHeader,
+        {
+          title: "Content Types",
+          description: "Define the structure of your content with custom fields and validation rules."
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ErrorState,
+        {
+          error,
+          title: "Failed to load content types",
+          onRetry: handleRetry
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6 p-6", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CmsPageHeader,
+      {
+        title: "Content Types",
+        description: "Define the structure of your content with custom fields and validation rules."
+      }
+    ),
+    error && !dismissedError && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ErrorAlert,
+      {
+        error,
+        onDismiss: () => setDismissedError(true),
+        onRetry: handleRetry
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CmsToolbar,
+      {
+        left: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Input,
+              {
+                type: "search",
+                placeholder: "Search content types...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                className: "w-64 pl-9"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Checkbox,
+              {
+                checked: showActiveOnly,
+                onCheckedChange: (checked) => setShowActiveOnly(checked)
+              }
+            ),
+            "Active only"
+          ] })
+        ] }),
+        right: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex rounded-md border bg-muted/30", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                className: cn(
+                  "rounded-l-md p-2 transition-colors",
+                  viewMode === "grid" ? "bg-background shadow-sm" : "hover:bg-muted/50"
+                ),
+                onClick: () => setViewMode("grid"),
+                title: "Grid view",
+                "aria-label": "Grid view",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Grid3x3, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                className: cn(
+                  "rounded-r-md p-2 transition-colors",
+                  viewMode === "list" ? "bg-background shadow-sm" : "hover:bg-muted/50"
+                ),
+                onClick: () => setViewMode("list"),
+                title: "List view",
+                "aria-label": "List view",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "size-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            CmsButton,
+            {
+              onClick: () => setShowCreateModal(true),
+              "data-testid": "create-content-type-button",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4" }),
+                "Create Content Type"
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-12", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-8 animate-spin rounded-full border-2 border-muted border-t-primary" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: "Loading content types..." })
+    ] }) : filteredContentTypes.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CmsEmptyState,
+      {
+        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FileType, { className: "size-6" }),
+        title: searchQuery ? "No content types match your search" : "No content types defined",
+        description: searchQuery ? "Try adjusting your search query or filters." : "Content types define the schema for your content. Create one to get started."
+      }
+    ) : viewMode === "grid" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: filteredContentTypes.map((contentType) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "group flex flex-col rounded-lg border bg-card p-4 transition-all hover:border-primary/50 hover:shadow-md",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FileType, { className: "size-5" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [
+              !contentType.isActive && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "secondary", className: "text-xs font-normal", children: "Inactive" }),
+              contentType.singleton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Badge,
+                {
+                  variant: "secondary",
+                  className: "border-amber-200 bg-amber-50 text-xs font-normal text-amber-700",
+                  children: "Singleton"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  onClick: () => setEditingContentType(contentType),
+                  className: "rounded p-1.5 text-muted-foreground opacity-0 transition-all hover:bg-muted hover:text-foreground group-hover:opacity-100",
+                  title: "Edit content type",
+                  "aria-label": "Edit content type",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pencil, { className: "size-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => navigation.navigateToContentType(contentType._id),
+              className: "flex flex-1 flex-col text-left",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-base font-semibold text-foreground", children: contentType.displayName }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: contentType.name }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold text-foreground", children: contentType.fields.length }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: contentType.fields.length === 1 ? "Field" : "Fields" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold text-foreground", children: contentType.entryCount ?? 0 }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: contentType.entryCount === 1 ? "Entry" : "Entries" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 flex flex-wrap gap-1.5", children: [
+                  contentType.fields.slice(0, 4).map((field) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "span",
+                    {
+                      className: "flex items-center gap-1 rounded-md bg-muted px-1.5 py-0.5 text-xs text-muted-foreground",
+                      title: field.label,
+                      children: [
+                        FIELD_ICONS[field.type] || /* @__PURE__ */ jsxRuntimeExports.jsx(TextAlignStart, { className: "size-3" }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: field.label })
+                      ]
+                    },
+                    field.name
+                  )),
+                  contentType.fields.length > 4 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs text-muted-foreground", children: [
+                    "+",
+                    contentType.fields.length - 4,
+                    " more"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-auto pt-3 text-xs text-muted-foreground", children: [
+                  "Updated ",
+                  getRelativeTime(contentType._creationTime)
+                ] })
+              ]
+            }
+          )
+        ]
+      },
+      contentType._id
+    )) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-lg border bg-card", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: "border-b", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "p-3 text-left text-sm font-medium text-muted-foreground", children: "Name" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "p-3 text-left text-sm font-medium text-muted-foreground", children: "Fields" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "p-3 text-left text-sm font-medium text-muted-foreground", children: "Entries" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "p-3 text-left text-sm font-medium text-muted-foreground", children: "Status" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "p-3 text-left text-sm font-medium text-muted-foreground", children: "Last Updated" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "p-3 text-left text-sm font-medium text-muted-foreground", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: filteredContentTypes.map((contentType) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "tr",
+        {
+          className: "border-b last:border-0 transition-colors hover:bg-muted/50",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("td", { className: "p-3", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium text-foreground", children: contentType.displayName }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: contentType.name })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-3 text-sm text-muted-foreground", children: contentType.fields.length }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-3 text-sm text-muted-foreground", children: contentType.entryCount ?? 0 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Badge,
+                {
+                  variant: contentType.isActive ? "default" : "secondary",
+                  className: cn(
+                    "text-xs font-normal",
+                    contentType.isActive && "border-emerald-200 bg-emerald-50 text-emerald-700"
+                  ),
+                  children: contentType.isActive ? "Active" : "Inactive"
+                }
+              ),
+              contentType.singleton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Badge,
+                {
+                  variant: "secondary",
+                  className: "border-amber-200 bg-amber-50 text-xs font-normal text-amber-700",
+                  children: "Singleton"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-3 text-sm text-muted-foreground", children: formatDate(contentType._creationTime) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                CmsButton,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => setEditingContentType(contentType),
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Pencil, { className: "size-3.5" }),
+                    "Edit"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CmsButton,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => navigation.navigateToContentType(contentType._id),
+                  children: "View Entries"
+                }
+              )
+            ] }) })
+          ]
+        },
+        contentType._id
+      )) })
+    ] }) }),
+    !isLoading && filteredContentTypes.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-center text-sm text-muted-foreground", children: [
+      "Showing ",
+      filteredContentTypes.length,
+      " of ",
+      contentTypes.length,
+      " content type",
+      contentTypes.length !== 1 ? "s" : ""
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ContentTypeFormModal,
+      {
+        isOpen: showCreateModal || !!editingContentType,
+        onClose: () => {
+          setShowCreateModal(false);
+          setEditingContentType(null);
+        },
+        contentType: editingContentType,
+        onCreated: handleContentTypeCreated,
+        onUpdated: handleContentTypeUpdated
+      }
+    )
+  ] });
+}
+function ContentTypesRoute() {
+  const navigation = useTanStackNavigation();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ContentTypesPage, { api, navigation });
+}
+export {
+  ContentTypesRoute as component
+};