@kidecms/core 0.1.0

package/routes/pages/admin/[...path].astro

@@ -0,0 +1,1104 @@
+---
+import { ArrowUpRight, Dot, Plus } from "lucide-react";
+
+import AdminCard from "@kidecms/core/admin/components/AdminCard.astro";
+import AiGenerateButton from "@kidecms/core/admin/components/AiGenerateButton";
+import DocumentActions from "@kidecms/core/admin/components/DocumentActions";
+import DocumentLock from "@kidecms/core/admin/components/DocumentLock";
+import DocumentsDataTable from "@kidecms/core/admin/components/DocumentsDataTable";
+import LiveHeading from "@kidecms/core/admin/components/LiveHeading";
+import UnsavedGuard from "@kidecms/core/admin/components/UnsavedGuard";
+import FieldControl from "@kidecms/core/admin/components/FieldControl.astro";
+import { StatusBadge } from "@kidecms/core/admin/components/ui/badge";
+import { buttonVariants } from "@kidecms/core/admin/components/ui/button";
+import config from "virtual:kide/config";
+import { cms } from "virtual:kide/api";
+import { isAiEnabled } from "virtual:kide/runtime";
+import { getLabelField } from "@kidecms/core";
+import {
+  formatDate,
+  formatFieldValue,
+  getFieldSets,
+  getListColumns,
+  humanize,
+  initDateFormat,
+  resolveAdminRoute,
+} from "@kidecms/core";
+import AdminLayout from "@kidecms/core/admin/layouts/AdminLayout.astro";
+export const prerender = false;
+
+initDateFormat(config, Astro.cookies.get("tz")?.value);
+const cmsRuntime = cms as Record<string, any> & { meta: typeof cms.meta };
+const route = resolveAdminRoute(Astro.params.path);
+const user = Astro.locals.user;
+const runtimeContext = user ? { user: { id: user.id, role: user.role, email: user.email } } : {};
+const localeConfig = config.locales;
+const locales = localeConfig?.supported ?? [];
+const defaultLocale = localeConfig?.default ?? "en";
+const requestedLocale = Astro.url.searchParams.get("locale") ?? defaultLocale;
+const isEmbed = Astro.url.searchParams.get("_embed") === "1";
+
+// Filter collections the user can access
+const canRead = (slug: string) => {
+  const c = config.collections.find((col) => col.slug === slug);
+  const rule = c?.access?.read;
+  if (!rule) return true;
+  return rule({ user: user ?? null, doc: null, operation: "read", collection: slug });
+};
+const canWrite = (slug: string) => {
+  const c = config.collections.find((col) => col.slug === slug);
+  const rule = c?.access?.create;
+  if (!rule) return true;
+  return rule({ user: user ?? null, doc: null, operation: "create", collection: slug });
+};
+const accessibleCollections = config.collections.filter((c) => canRead(c.slug));
+
+// Check if user can access the current collection
+const canAccessCurrent = (() => {
+  if (route.kind === "dashboard" || route.kind === "recent" || route.kind === "singles") return true;
+  const slug = "collectionSlug" in route ? route.collectionSlug : null;
+  return !slug || canRead(slug);
+})();
+
+const isFieldHidden = (fieldName: string) => {
+  if (!collection) return false;
+  const field = collection.fields[fieldName];
+  if (!field?.access?.read) return false;
+  return !field.access.read({ user: user ?? null, doc: null, operation: "read", collection: collection.slug });
+};
+const isFieldReadOnly = (fieldName: string) => {
+  if (!collection) return false;
+  const field = collection.fields[fieldName];
+  if (!field?.access?.update) return false;
+  return !field.access.update({ user: user ?? null, doc: null, operation: "update", collection: collection.slug });
+};
+
+// Redirect /admin to recent
+if (route.kind === "dashboard") {
+  return Astro.redirect("/admin/recent");
+}
+
+// Derive visual status: "draft" | "published" | "scheduled" | "changed"
+const getVisualStatus = (d: Record<string, unknown>): string => {
+  const status = String(d._status ?? "draft");
+  if (status === "scheduled") return "scheduled";
+  if (status === "published" && d._published) return "changed";
+  return status;
+};
+
+// Recent entries page — all content collections (non-utility) sorted by updatedAt
+const pinnedSlugs = new Set(["taxonomies", "menus", "authors", "users"]);
+const contentCollections = config.collections.filter((c) => !c.auth && !pinnedSlugs.has(c.slug) && canRead(c.slug));
+let recentRows: Array<{
+  id: string;
+  editHref: string;
+  status: string;
+  singleton?: boolean;
+  locales: string[];
+  searchText: string;
+  values: Record<string, string>;
+}> = [];
+if (route.kind === "recent") {
+  const allEntries: Array<{
+    doc: Record<string, unknown>;
+    collection: (typeof contentCollections)[0];
+  }> = [];
+
+  for (const cc of contentCollections) {
+    const api = cmsRuntime[cc.slug];
+    const docs = await api.find(
+      { status: "any", locale: defaultLocale, sort: { field: "_updatedAt", direction: "desc" }, limit: 50 },
+      runtimeContext,
+    );
+    for (const doc of docs) {
+      allEntries.push({ doc, collection: cc });
+    }
+  }
+
+  allEntries.sort((a, b) => String(b.doc._updatedAt ?? "").localeCompare(String(a.doc._updatedAt ?? "")));
+  const topEntries = allEntries.slice(0, 50);
+
+  recentRows = topEntries.map(({ doc, collection: cc }) => {
+    const displayTitle = cc.singleton
+      ? cc.labels.singular
+      : String(doc[getLabelField(cc)] ?? doc.slug ?? cc.labels.singular);
+    return {
+      id: String(doc._id),
+      editHref: `/admin/${cc.slug}/${doc._id}`,
+      status: getVisualStatus(doc),
+      singleton: cc.singleton,
+      locales: [
+        defaultLocale,
+        ...(Array.isArray(doc._availableLocales)
+          ? doc._availableLocales.map((l) => String(l)).filter((l) => l !== defaultLocale)
+          : []),
+      ],
+      searchText: displayTitle,
+      values: {
+        title: displayTitle,
+        collection: cc.labels.singular,
+        _status: getVisualStatus(doc),
+        _updatedAt: formatDate(doc._updatedAt),
+      },
+    };
+  });
+}
+
+// Singles listing page
+const singletonCollections = config.collections.filter((c) => c.singleton && canRead(c.slug));
+let singletonsData: Array<{
+  id: string;
+  collectionSlug: string;
+  label: string;
+  status: string;
+  locales: string[];
+  updatedAt: string;
+  editHref: string;
+}> = [];
+if (route.kind === "singles") {
+  for (const sc of singletonCollections) {
+    const api = cmsRuntime[sc.slug];
+    const singleDocs = await api.find({ status: "any", limit: 1, locale: defaultLocale }, runtimeContext);
+    const singleDoc = singleDocs[0] ?? null;
+    singletonsData.push({
+      id: singleDoc ? String(singleDoc._id) : "",
+      collectionSlug: sc.slug,
+      label: sc.labels.singular,
+      status: singleDoc && sc.drafts ? String(singleDoc._status ?? "draft") : "",
+      locales: singleDoc
+        ? [
+            defaultLocale,
+            ...(Array.isArray(singleDoc._availableLocales)
+              ? singleDoc._availableLocales.filter((l: string) => l !== defaultLocale)
+              : []),
+          ]
+        : [],
+      updatedAt: singleDoc ? formatDate(singleDoc._updatedAt) : "—",
+      editHref: `/admin/${sc.slug}`,
+    });
+  }
+}
+
+const getCollectionView = (slug: string) => {
+  const c = config.collections.find((col) => col.slug === slug);
+  return c?.views ?? {};
+};
+const getFormAction = (collectionSlug: string, documentId?: string) => {
+  if (collectionSlug === "users" && !documentId) return "/api/cms/auth/invite";
+  return documentId ? `/api/cms/${collectionSlug}/${documentId}` : `/api/cms/${collectionSlug}`;
+};
+
+const getFieldSetTitle = (position: string, index: number) => {
+  if (position === "sidebar") return "Details";
+  return index === 0 ? "Content" : "Content";
+};
+
+let collectionApi: any = null;
+let viewConfig: Record<string, any> = {};
+let docs: Array<Record<string, unknown>> = [];
+let doc: Record<string, unknown> | null = null;
+let baseDoc: Record<string, unknown> | null = null;
+let relationOptionsByField: Record<string, Array<{ value: string; label: string }>> = {};
+let relationMetaByField: Record<
+  string,
+  {
+    collectionSlug: string;
+    collectionLabel: string;
+    hasMany: boolean;
+    labelField?: string;
+  }
+> = {};
+let versions: Array<{ version: number; createdAt: string }> = [];
+let menuLinkOptions: Array<{
+  collection: string;
+  label: string;
+  items: Array<{ id: string; label: string; href: string }>;
+}> = [];
+
+const collectionSlug = "collectionSlug" in route ? route.collectionSlug : null;
+const collection = collectionSlug ? (cms.meta.getCollection(collectionSlug) as any) : null;
+const isSingleton = collection?.singleton === true;
+
+if (collection && collectionSlug && canAccessCurrent) {
+  collectionApi = cmsRuntime[collectionSlug];
+  viewConfig = getCollectionView(collectionSlug);
+
+  // Singleton collections: auto-create the single document if missing, then redirect to edit
+  if (isSingleton && (route.kind === "list" || route.kind === "new")) {
+    const singleDocs = await collectionApi.find({ status: "any", limit: 1 }, runtimeContext);
+    if (singleDocs.length > 0) {
+      return Astro.redirect(`/admin/${collectionSlug}/${singleDocs[0]._id}`);
+    }
+    return Astro.redirect(`/admin/${collectionSlug}/${(await collectionApi.create({}, runtimeContext))._id}`);
+  }
+
+  for (const [fieldName, field] of Object.entries(collection.fields) as [string, import("@kidecms/core").FieldConfig][]) {
+    if (field.type === "relation" && canRead(field.collection)) {
+      const relatedDocs = await cmsRuntime[field.collection].find(
+        {
+          status: "any",
+          limit: 100,
+          sort: { field: "_updatedAt", direction: "desc" },
+          locale: defaultLocale,
+        },
+        runtimeContext,
+      );
+
+      const relatedCollection = config.collections.find((c) => c.slug === field.collection);
+      const relLabelField = relatedCollection ? getLabelField(relatedCollection) : "title";
+      relationOptionsByField[fieldName] = relatedDocs.map((item: Record<string, unknown>) => ({
+        value: String(item._id),
+        label: String(item[relLabelField] ?? item.slug ?? item._id),
+      }));
+      if (relatedCollection) {
+        relationMetaByField[fieldName] = {
+          collectionSlug: field.collection,
+          collectionLabel: relatedCollection.labels.singular,
+          hasMany: field.hasMany ?? false,
+          labelField: getLabelField(relatedCollection),
+        };
+      }
+    }
+
+    // Also fetch relation options for relation fields inside blocks
+    if (field.type === "blocks" && field.types) {
+      for (const [typeName, typeFields] of Object.entries(field.types)) {
+        for (const [subFieldName, subField] of Object.entries(typeFields) as [
+          string,
+          import("@kidecms/core").FieldConfig,
+        ][]) {
+          if (subField.type === "relation" && canRead(subField.collection)) {
+            const key = `block:${typeName}:${subFieldName}`;
+            if (!relationOptionsByField[key]) {
+              const relatedDocs = await cmsRuntime[subField.collection].find(
+                { status: "any", limit: 100, sort: { field: "_updatedAt", direction: "desc" }, locale: defaultLocale },
+                runtimeContext,
+              );
+              const blkRelCol = config.collections.find((c) => c.slug === subField.collection);
+              const blkLabelField = blkRelCol ? getLabelField(blkRelCol) : "title";
+              relationOptionsByField[key] = relatedDocs.map((item: Record<string, unknown>) => ({
+                value: String(item._id),
+                label: String(item[blkLabelField] ?? item.slug ?? item._id),
+              }));
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Build link options for menu editors: fetch linkable documents from content collections
+  if (collectionSlug === "menus" && (route.kind === "edit" || route.kind === "new")) {
+    const linkableCollections = config.collections.filter(
+      (c) =>
+        !c.singleton &&
+        !["users", "menus", "taxonomies", "authors"].includes(c.slug) &&
+        c.fields.slug &&
+        canRead(c.slug),
+    );
+    for (const lc of linkableCollections) {
+      const lcApi = cmsRuntime[lc.slug];
+      const lcDocs = await lcApi.find(
+        { status: "published", limit: 200, sort: { field: "_updatedAt", direction: "desc" }, locale: defaultLocale },
+        runtimeContext,
+      );
+      menuLinkOptions.push({
+        collection: lc.slug,
+        label: lc.labels.plural,
+        items: lcDocs.map((d: Record<string, unknown>) => ({
+          id: String(d._id),
+          label: String(d[getLabelField(lc)] ?? d.slug ?? d._id),
+          href: cms.meta.getRouteForDocument(lc.slug, d),
+        })),
+      });
+    }
+  }
+}
+
+const PAGE_SIZE = config.admin?.pageSize ?? 20;
+let totalDocs = 0;
+let totalPages = 1;
+let currentPage = 1;
+let currentSort = viewConfig.list?.defaultSort ?? { field: "_updatedAt", direction: "desc" };
+const searchParam = Astro.url.searchParams.get("q") ?? "";
+
+if (route.kind === "list" && canAccessCurrent) {
+  const sortParam = Astro.url.searchParams.get("sort");
+  const sortDirParam = Astro.url.searchParams.get("dir");
+  if (sortParam) {
+    currentSort = { field: sortParam, direction: (sortDirParam === "asc" ? "asc" : "desc") as "asc" | "desc" };
+  }
+  currentPage = Math.max(1, Number(Astro.url.searchParams.get("page") ?? "1"));
+  const offset = (currentPage - 1) * PAGE_SIZE;
+
+  const findOptions = {
+    status: "any" as const,
+    locale: defaultLocale,
+    sort: currentSort,
+    limit: PAGE_SIZE,
+    offset,
+    search: searchParam || undefined,
+  };
+
+  [docs, totalDocs] = await Promise.all([
+    collectionApi.find(findOptions, runtimeContext),
+    collectionApi.count({ status: "any", locale: defaultLocale, search: searchParam || undefined }, runtimeContext),
+  ]);
+
+  totalPages = Math.max(1, Math.ceil(totalDocs / PAGE_SIZE));
+}
+
+if (route.kind === "edit") {
+  try {
+    doc = await collectionApi.findById(route.documentId, { status: "any", locale: requestedLocale }, runtimeContext);
+  } catch {
+    return Astro.redirect(`/admin/${route.collectionSlug}?_toast=error&_msg=Access+denied`);
+  }
+  if (!doc) {
+    return Astro.redirect(`/admin/${route.collectionSlug}`);
+  }
+  baseDoc =
+    requestedLocale === defaultLocale
+      ? doc
+      : await collectionApi.findById(route.documentId, { status: "any", locale: defaultLocale }, runtimeContext);
+  versions = await collectionApi.versions(route.documentId);
+}
+
+// Find reverse references — documents in other collections that link to this document
+type ReverseRef = { collectionLabel: string; collectionSlug: string; docs: Array<{ _id: string; label: string }> };
+const reverseRefs: ReverseRef[] = [];
+if (route.kind === "edit" && collection && route.documentId) {
+  for (const otherCollection of config.collections) {
+    if (otherCollection.slug === collection.slug || !canRead(otherCollection.slug)) continue;
+    const relationFields = Object.entries(otherCollection.fields).filter(
+      ([, f]) => f.type === "relation" && (f as any).collection === collection.slug,
+    );
+    if (relationFields.length === 0) continue;
+    const otherApi = cmsRuntime[otherCollection.slug];
+    if (!otherApi) continue;
+    const otherLabelField = getLabelField(otherCollection);
+    for (const [fieldName, field] of relationFields) {
+      try {
+        const isMany = (field as any).hasMany;
+        if (isMany) {
+          // hasMany stores JSON array — fetch all and filter in JS
+          const allDocs = await otherApi.find({ status: "any", limit: 200, locale: defaultLocale }, runtimeContext);
+          const matched = allDocs.filter((r: Record<string, unknown>) => {
+            const val = r[fieldName];
+            if (Array.isArray(val)) return val.includes(route.documentId);
+            if (typeof val === "string") return val.includes(route.documentId);
+            return false;
+          });
+          if (matched.length > 0) {
+            reverseRefs.push({
+              collectionLabel: otherCollection.labels.plural,
+              collectionSlug: otherCollection.slug,
+              docs: matched.map((r: Record<string, unknown>) => ({
+                _id: String(r._id),
+                label: String(r[otherLabelField] ?? r.slug ?? r._id),
+              })),
+            });
+          }
+        } else {
+          const refs = await otherApi.find(
+            { status: "any", where: { [fieldName]: route.documentId }, limit: 50, locale: defaultLocale },
+            runtimeContext,
+          );
+          if (refs.length > 0) {
+            reverseRefs.push({
+              collectionLabel: otherCollection.labels.plural,
+              collectionSlug: otherCollection.slug,
+              docs: refs.map((r: Record<string, unknown>) => ({
+                _id: String(r._id),
+                label: String(r[otherLabelField] ?? r.slug ?? r._id),
+              })),
+            });
+          }
+        }
+      } catch {}
+    }
+  }
+}
+
+const selectedLocale = route.kind === "new" ? defaultLocale : requestedLocale;
+const translatableFields = collection
+  ? Object.entries(collection.fields)
+      .filter(([, field]: [string, any]) => field.translatable)
+      .map(([fieldName]) => fieldName)
+  : [];
+const translationMode =
+  !!collection && route.kind === "edit" && selectedLocale !== defaultLocale && translatableFields.length > 0;
+const fieldSets = collection ? getFieldSets(collection) : [];
+const primaryFieldSets = fieldSets.filter((set: { position?: string }) => set.position !== "sidebar");
+const sidebarFieldSets = fieldSets.filter((set: { position?: string }) => set.position === "sidebar");
+const mainFieldSets = primaryFieldSets.length > 0 ? primaryFieldSets : fieldSets.slice(0, 1);
+const effectiveSidebarFieldSets =
+  sidebarFieldSets.length > 0 ? sidebarFieldSets : fieldSets.slice(mainFieldSets.length);
+const listColumns = collection ? getListColumns(collection, viewConfig.list) : [];
+const hasPreview = !!(
+  collection &&
+  route.kind === "edit" &&
+  (collection.preview || (collection.pathPrefix && doc?.slug))
+);
+const previewUrl = hasPreview
+  ? typeof collection.preview === "string"
+    ? `${collection.preview}?preview=true`
+    : `${cms.meta.getRouteForDocument(collection.slug, doc)}?preview=true`
+  : null;
+const getCurrentValue = (fieldName: string) => (doc ? doc[fieldName] : undefined);
+const getSharedValue = (fieldName: string) => (baseDoc ? baseDoc[fieldName] : undefined);
+const getBlockRelationOptions = (_fieldName: string): Record<string, Array<{ value: string; label: string }>> => {
+  const result: Record<string, Array<{ value: string; label: string }>> = {};
+  for (const [key, opts] of Object.entries(relationOptionsByField)) {
+    if (key.startsWith("block:")) result[key] = opts;
+  }
+  return result;
+};
+const aiEnabled = isAiEnabled();
+
+const tableRows =
+  collection && route.kind === "list"
+    ? docs.map((entry) => ({
+        id: String(entry._id),
+        editHref: `/admin/${collection.slug}/${entry._id}`,
+        status: getVisualStatus(entry),
+        locales: [
+          defaultLocale,
+          ...(Array.isArray(entry._availableLocales)
+            ? entry._availableLocales.map((l) => String(l)).filter((l) => l !== defaultLocale)
+            : []),
+        ],
+        searchText: String(entry[getLabelField(collection)] ?? entry.slug ?? entry._id ?? ""),
+        values: Object.fromEntries(
+          listColumns.map((column) => [
+            column,
+            column === "_status"
+              ? getVisualStatus(entry)
+              : column === "_updatedAt" || column === "_createdAt"
+                ? formatDate(entry[column])
+                : column.startsWith("_")
+                  ? String(entry[column] ?? "—")
+                  : formatFieldValue(collection.fields[column], entry[column]),
+          ]),
+        ),
+      }))
+    : [];
+---
+
+<AdminLayout
+  title={route.kind === "recent"
+    ? "Recent | Kide CMS"
+    : route.kind === "singles"
+      ? "Singles | Kide CMS"
+      : `${collection?.labels?.plural ?? "Admin"} | Kide CMS`}
+  collections={accessibleCollections}
+  activeCollection={route.kind === "recent" ? "recent" : (collectionSlug ?? "singles")}
+  embed={isEmbed}
+  customNav={config.admin?.nav}
+>
+  {
+    route.kind === "recent" && (
+      <section class="space-y-6">
+        <div class="flex items-start justify-between gap-4">
+          <h1 class="text-2xl font-semibold tracking-tight">Recent</h1>
+        </div>
+        <DocumentsDataTable
+          client:load
+          collectionSlug="recent"
+          draftsEnabled={true}
+          title="Recent"
+          columns={[
+            { key: "title", label: "Title" },
+            { key: "collection", label: "Collection" },
+            { key: "_status", label: "Status" },
+            { key: "_updatedAt", label: "Updated" },
+          ]}
+          data={recentRows}
+          searchPlaceholder="Filter recent entries..."
+        />
+      </section>
+    )
+  }
+
+  {
+    route.kind === "singles" && (
+      <section class="space-y-6">
+        <div class="flex items-start justify-between gap-4">
+          <h1 class="text-2xl font-semibold tracking-tight">Singles</h1>
+        </div>
+        <DocumentsDataTable
+          client:load
+          collectionSlug="singles"
+          draftsEnabled={true}
+          duplicateEnabled={false}
+          title="Singles"
+          columns={[
+            { key: "name", label: "Name" },
+            ...(singletonCollections.some((c) => c.drafts) ? [{ key: "_status", label: "Status" }] : []),
+            { key: "updatedAt", label: "Last updated" },
+          ]}
+          data={singletonsData.map((s) => ({
+            id: s.id,
+            collectionSlug: s.collectionSlug,
+            editHref: s.editHref,
+            locales: s.locales,
+            searchText: s.label,
+            values: { name: s.label, _status: s.status, updatedAt: s.updatedAt },
+          }))}
+          searchPlaceholder="Filter singles..."
+        />
+      </section>
+    )
+  }
+
+  {
+    route.kind !== "singles" && !canAccessCurrent && (
+      <section class="space-y-6">
+        <h1 class="text-2xl font-semibold tracking-tight">Access denied</h1>
+        <p class="text-muted-foreground">You do not have permission to view this collection.</p>
+      </section>
+    )
+  }
+
+  {
+    route.kind !== "singles" && canAccessCurrent && (
+      <section class="space-y-6">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <h1 class="text-2xl font-semibold tracking-tight">
+              {route.kind === "list" && collection.labels.plural}
+              {route.kind === "new" && <LiveHeading client:load initial={`New ${collection.labels.singular}`} />}
+              {route.kind === "edit" && (
+                <LiveHeading
+                  client:load
+                  initial={
+                    collection.singleton
+                      ? collection.labels.singular
+                      : String(doc?.[getLabelField(collection)] ?? doc?.slug ?? collection.labels.singular)
+                  }
+                />
+              )}
+            </h1>
+            {route.kind === "edit" && doc && collection.drafts && (
+              <div class="text-muted-foreground mt-1 flex flex-col gap-0.5 text-xs sm:flex-row sm:items-center sm:gap-0">
+                <StatusBadge status={getVisualStatus(doc)} styled />
+                {doc._status === "scheduled" && doc._publishAt && (
+                  <>
+                    <Dot className="hidden size-6 text-muted-foreground/70 sm:block" />
+                    <span>Publishes {formatDate(doc._publishAt)}</span>
+                    {doc._unpublishAt && (
+                      <>
+                        <Dot className="hidden size-6 text-muted-foreground/70 sm:block" />
+                        <span>Unpublishes {formatDate(doc._unpublishAt)}</span>
+                      </>
+                    )}
+                  </>
+                )}
+                <Dot className="hidden size-6 text-muted-foreground/70 sm:block" />
+                <span>Created {formatDate(doc._createdAt)}</span>
+                <Dot className="hidden size-6 text-muted-foreground/70 sm:block" />
+                <span>Updated {formatDate(doc._updatedAt)}</span>
+              </div>
+            )}
+          </div>
+
+          <div class="flex flex-wrap items-center gap-2">
+            {hasPreview && previewUrl && !translationMode && (
+              <a
+                href={previewUrl}
+                target="_blank"
+                class="text-foreground/70 hover:text-foreground flex items-center gap-1 text-sm transition-colors"
+              >
+                Preview
+                <ArrowUpRight className="size-4" />
+              </a>
+            )}
+            {route.kind === "list" && canWrite(collectionSlug!) && (
+              <a href={`/admin/${collection.slug}/new`} class={buttonVariants({})}>
+                <Plus className="size-4" />
+                {collection.slug === "users" ? "Invite user" : `New ${collection.labels.singular}`}
+              </a>
+            )}
+          </div>
+        </div>
+
+        {route.kind === "list" && (
+          <DocumentsDataTable
+            client:load
+            collectionSlug={collection.slug}
+            draftsEnabled={collection.drafts}
+            defaultLocale={locales.length > 1 ? defaultLocale : undefined}
+            labelField={getLabelField(collection)}
+            newHref={`/admin/${collection.slug}/new`}
+            title={collection.labels.plural}
+            columns={listColumns.map((column) => ({ key: column, label: humanize(column) }))}
+            data={tableRows}
+            searchPlaceholder={`Filter ${collection.labels.plural.toLowerCase()}...`}
+            serverPagination={{
+              totalDocs,
+              totalPages,
+              currentPage,
+              pageSize: PAGE_SIZE,
+              currentSort,
+              currentSearch: searchParam,
+            }}
+          />
+        )}
+
+        {(route.kind === "new" || route.kind === "edit") && (
+          <>
+            {route.kind === "edit" && (
+              <DocumentLock client:load collection={route.collectionSlug} documentId={route.documentId} />
+            )}
+            <UnsavedGuard
+              client:load
+              formId={translationMode ? "translation-form" : "document-form"}
+              isNew={route.kind === "new"}
+              isDraft={
+                !translationMode &&
+                collection.drafts &&
+                (doc?._status === "draft" ||
+                  doc?._status === "scheduled" ||
+                  (doc && getVisualStatus(doc) === "changed"))
+              }
+            />
+            <div id="document-edit-area" class="space-y-6">
+              {collection.slug === "users" && route.kind === "edit" && Astro.url.searchParams.get("inviteToken") && (
+                <AdminCard
+                  title={Astro.url.searchParams.get("emailSent") === "true" ? "Invitation sent" : "Invite link"}
+                >
+                  {Astro.url.searchParams.get("emailSent") === "true" ? (
+                    <p class="text-muted-foreground text-sm">
+                      An invitation email has been sent. The user can also use this link:
+                    </p>
+                  ) : (
+                    <p class="text-muted-foreground text-sm">
+                      Email is not configured. Share this link with the user to complete their registration:
+                    </p>
+                  )}
+                  <code class="bg-muted mt-2 block rounded-md px-3 py-2 text-sm break-all select-all">
+                    {Astro.url.origin}/admin/invite?token={Astro.url.searchParams.get("inviteToken")}
+                  </code>
+                </AdminCard>
+              )}
+              <div
+                class={
+                  effectiveSidebarFieldSets.length === 0 || translationMode
+                    ? "grid gap-6 2xl:grid-cols-[minmax(0,1.55fr)_minmax(380px,460px)]"
+                    : ""
+                }
+              >
+                <div class="flex flex-wrap items-center justify-between gap-2">
+                  <div class="flex flex-wrap items-center gap-2">
+                    {locales.length > 1 &&
+                      route.kind === "edit" &&
+                      translatableFields.length > 0 &&
+                      locales.map((locale) => {
+                        const isActive = selectedLocale === locale;
+                        return (
+                          <a
+                            href={`/admin/${collection.slug}/${route.documentId}?locale=${locale}`}
+                            class:list={[
+                              buttonVariants({ variant: "outline", size: "sm" }),
+                              isActive
+                                ? "border-primary/50 bg-background ring-ring/30 font-medium ring-2"
+                                : "text-muted-foreground border-border/60",
+                            ]}
+                          >
+                            {locale.toUpperCase()}
+                          </a>
+                        );
+                      })}
+                  </div>
+                  <div class="flex flex-wrap items-center gap-2">
+                    {translationMode ? (
+                      <button
+                        class={buttonVariants({ variant: "outline" })}
+                        type="submit"
+                        form="translation-form"
+                        value="save"
+                        disabled
+                      >
+                        Save translation
+                      </button>
+                    ) : (
+                      <>
+                        <button
+                          class={buttonVariants({ variant: "outline" })}
+                          type="submit"
+                          form="document-form"
+                          name="_intent"
+                          value="save"
+                          disabled={route.kind === "edit"}
+                        >
+                          {collection.slug === "users" && route.kind === "new"
+                            ? "Send invite"
+                            : collection?.drafts
+                              ? "Save draft"
+                              : "Save"}
+                        </button>
+                        {collection.drafts && (
+                          <button
+                            class={buttonVariants({ variant: "publish" })}
+                            type="submit"
+                            form="document-form"
+                            name="_intent"
+                            value="publish"
+                            disabled={
+                              route.kind === "edit" &&
+                              !(
+                                doc?._status === "draft" ||
+                                doc?._status === "scheduled" ||
+                                (doc && getVisualStatus(doc) === "changed")
+                              )
+                            }
+                          >
+                            Publish
+                          </button>
+                        )}
+                      </>
+                    )}
+                    {route.kind === "edit" && !translationMode && (
+                      <DocumentActions
+                        client:load
+                        formId="document-form"
+                        collectionSlug={collection.slug}
+                        documentId={route.documentId}
+                        showUnpublish={collection.drafts && doc?._status === "published"}
+                        showDiscardDraft={collection.drafts && doc?._status === "published" && !!doc?._published}
+                        showDelete={!isSingleton}
+                        showDuplicate={!isSingleton}
+                        showSchedule={!!collection.drafts}
+                        showCancelSchedule={collection.drafts && doc?._status === "scheduled"}
+                        currentPublishAt={doc?._publishAt ? String(doc._publishAt) : undefined}
+                        currentUnpublishAt={doc?._unpublishAt ? String(doc._unpublishAt) : undefined}
+                        versions={versions}
+                        restoreEndpoint={getFormAction(collection.slug, route.documentId)}
+                        redirectTo={Astro.url.pathname + Astro.url.search}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {!translationMode && (
+                <form
+                  id="document-form"
+                  method="post"
+                  action={getFormAction(collection.slug, route.kind === "edit" ? route.documentId : undefined)}
+                  class="grid gap-6 2xl:grid-cols-[minmax(0,1.55fr)_minmax(380px,460px)]"
+                >
+                  <input type="hidden" name="_action" value={route.kind === "new" ? "create" : "update"} />
+                  <input type="hidden" name="redirectTo" value={Astro.url.pathname + Astro.url.search} />
+
+                  <div class="space-y-6">
+                    {mainFieldSets.map((set, index) => (
+                      <AdminCard title={getFieldSetTitle("content", index)}>
+                        <div class="grid gap-5">
+                          {set.fields
+                            .filter((fieldName) => collection.fields[fieldName] && !isFieldHidden(fieldName))
+                            .map((fieldName) => (
+                              <FieldControl
+                                name={fieldName}
+                                field={collection.fields[fieldName]}
+                                value={getCurrentValue(fieldName)}
+                                readOnly={isFieldReadOnly(fieldName)}
+                                relationOptions={relationOptionsByField[fieldName] ?? []}
+                                relationMeta={relationMetaByField[fieldName]}
+                                menuLinkOptions={menuLinkOptions}
+                                blockRelationOptions={getBlockRelationOptions(fieldName)}
+                              />
+                            ))}
+                        </div>
+                      </AdminCard>
+                    ))}
+                  </div>
+
+                  <div class="space-y-6 text-sm [&_button]:text-sm [&_input]:text-sm [&_select]:text-sm [&_textarea]:text-sm">
+                    {effectiveSidebarFieldSets.map((set, index) => (
+                      <AdminCard title={getFieldSetTitle("sidebar", index)}>
+                        <div class="grid gap-5">
+                          {set.fields
+                            .filter((fieldName) => collection.fields[fieldName] && !isFieldHidden(fieldName))
+                            .map((fieldName) => (
+                              <div>
+                                <FieldControl
+                                  name={fieldName}
+                                  field={collection.fields[fieldName]}
+                                  value={getCurrentValue(fieldName)}
+                                  readOnly={isFieldReadOnly(fieldName)}
+                                  relationOptions={relationOptionsByField[fieldName] ?? []}
+                                  relationMeta={relationMetaByField[fieldName]}
+                                  menuLinkOptions={menuLinkOptions}
+                                />
+                                {aiEnabled && fieldName === "seoDescription" && !isFieldReadOnly(fieldName) && (
+                                  <div class="mt-1.5">
+                                    <AiGenerateButton
+                                      client:load
+                                      endpoint="/api/cms/ai/seo"
+                                      payload={{
+                                        title: getCurrentValue("title") ?? "",
+                                        excerpt: getCurrentValue("excerpt") ?? "",
+                                      }}
+                                      targetField={fieldName}
+                                      label="Generate description"
+                                    />
+                                  </div>
+                                )}
+                              </div>
+                            ))}
+                        </div>
+                      </AdminCard>
+                    ))}
+                    {reverseRefs.length > 0 &&
+                      (() => {
+                        const allDocs = reverseRefs.flatMap((ref) =>
+                          ref.docs.map((d) => ({
+                            ...d,
+                            collectionSlug: ref.collectionSlug,
+                            collectionLabel: ref.collectionLabel,
+                          })),
+                        );
+                        const visible = allDocs.slice(0, 30);
+                        const hidden = allDocs.slice(30);
+                        return (
+                          <AdminCard title="Referenced by">
+                            <ul class="grid gap-1">
+                              {visible.map((d) => (
+                                <li class="flex min-w-0 items-baseline justify-between gap-2">
+                                  <a
+                                    href={`/admin/${d.collectionSlug}/${d._id}`}
+                                    target="_blank"
+                                    class="text-foreground/70 hover:text-foreground truncate text-sm transition-colors hover:underline"
+                                  >
+                                    {d.label}
+                                  </a>
+                                  <span class="text-muted-foreground shrink-0 text-xs">{d.collectionLabel}</span>
+                                </li>
+                              ))}
+                            </ul>
+                            {hidden.length > 0 && (
+                              <details class="mt-2">
+                                <summary class="text-muted-foreground hover:text-foreground cursor-pointer text-xs transition-colors">
+                                  Show {hidden.length} more
+                                </summary>
+                                <ul class="mt-1 grid gap-1">
+                                  {hidden.map((d) => (
+                                    <li class="flex min-w-0 items-baseline justify-between gap-2">
+                                      <a
+                                        href={`/admin/${d.collectionSlug}/${d._id}`}
+                                        class="text-foreground/70 hover:text-foreground truncate text-sm transition-colors hover:underline"
+                                      >
+                                        {d.label}
+                                      </a>
+                                      <span class="text-muted-foreground shrink-0 text-xs">{d.collectionLabel}</span>
+                                    </li>
+                                  ))}
+                                </ul>
+                              </details>
+                            )}
+                          </AdminCard>
+                        );
+                      })()}
+                  </div>
+                </form>
+              )}
+
+              {translationMode && (
+                <div class="space-y-6">
+                  <form
+                    id="translation-form"
+                    method="post"
+                    action={getFormAction(collection.slug, route.documentId)}
+                    class="grid gap-6 2xl:grid-cols-[minmax(0,1.55fr)_minmax(380px,460px)]"
+                  >
+                    <input type="hidden" name="_action" value="save-translation" />
+                    <input type="hidden" name="locale" value={selectedLocale} />
+                    <input type="hidden" name="redirectTo" value={Astro.url.pathname + Astro.url.search} />
+
+                    <AdminCard title="Localized content">
+                      <div class="grid gap-5">
+                        {translatableFields
+                          .filter((fn) => !isFieldHidden(fn))
+                          .map((fieldName) => {
+                            const fieldDef = collection.fields[fieldName];
+                            const fieldType =
+                              fieldDef.type === "richText" ? "richText" : fieldDef.type === "slug" ? "slug" : "text";
+                            const sourceValue = getSharedValue(fieldName);
+                            const sourceText =
+                              typeof sourceValue === "object" && sourceValue !== null
+                                ? JSON.stringify(sourceValue)
+                                : String(sourceValue ?? "");
+                            return (
+                              <div>
+                                <FieldControl
+                                  name={fieldName}
+                                  field={fieldDef}
+                                  value={getCurrentValue(fieldName)}
+                                  readOnly={isFieldReadOnly(fieldName)}
+                                  relationOptions={relationOptionsByField[fieldName] ?? []}
+                                  relationMeta={relationMetaByField[fieldName]}
+                                  menuLinkOptions={menuLinkOptions}
+                                />
+                                {aiEnabled && sourceText && fieldDef.type !== "slug" && fieldDef.type !== "blocks" && (
+                                  <div class="mt-1.5">
+                                    <AiGenerateButton
+                                      client:load
+                                      endpoint="/api/cms/ai/translate"
+                                      payload={{
+                                        text: sourceText,
+                                        sourceLocale: defaultLocale,
+                                        targetLocale: selectedLocale,
+                                        fieldName,
+                                        fieldType,
+                                      }}
+                                      targetField={fieldName}
+                                      label={`Translate from ${defaultLocale.toUpperCase()}`}
+                                    />
+                                  </div>
+                                )}
+                              </div>
+                            );
+                          })}
+                      </div>
+                    </AdminCard>
+                  </form>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </section>
+    )
+  }
+</AdminLayout>
+
+<script is:inline>
+  (function () {
+    // --- Conditional fields ---
+    var conditionals = document.querySelectorAll("[data-condition-field]");
+    if (conditionals.length > 0) {
+      var matchesCondition = function (currentValue, expected) {
+        if (Array.isArray(expected)) {
+          return expected.some(function (v) {
+            return String(v) === String(currentValue);
+          });
+        }
+        if (typeof expected === "boolean") {
+          return expected
+            ? currentValue === "true" || currentValue === true
+            : currentValue === "false" || currentValue === false || currentValue === "";
+        }
+        return String(expected) === String(currentValue);
+      };
+
+      var getFieldValue = function (fieldName) {
+        // Radio buttons: find the checked one
+        var radio = document.querySelector('input[type="radio"][name="' + fieldName + '"]:checked');
+        if (radio) return radio.value;
+        // Check if radios exist but none checked
+        if (document.querySelector('input[type="radio"][name="' + fieldName + '"]')) return "";
+        // Checkboxes (boolean fields have a hidden "false" fallback that would match otherwise)
+        var checkbox = document.querySelector('input[type="checkbox"][name="' + fieldName + '"]');
+        if (checkbox) return checkbox.checked ? "true" : "false";
+        // Hidden inputs (React select components)
+        var hidden = document.querySelector('input[type="hidden"][name="' + fieldName + '"]');
+        if (hidden) return hidden.value;
+        // Other inputs
+        var input = document.querySelector('[name="' + fieldName + '"]');
+        if (input) return input.value;
+        return "";
+      };
+
+      var updateVisibility = function () {
+        conditionals.forEach(function (el) {
+          var depField = el.getAttribute("data-condition-field");
+          var expected = JSON.parse(el.getAttribute("data-condition-value"));
+          var currentValue = getFieldValue(depField);
+          var visible = matchesCondition(currentValue, expected);
+          // Hide the field and its parent wrapper (sidebar fields have an extra wrapping div)
+          var target = el.parentElement && el.parentElement.childElementCount === 1 ? el.parentElement : el;
+          target.style.display = visible ? "" : "none";
+          // Disable hidden inputs so they don't submit stale values
+          el.querySelectorAll("input, textarea, select").forEach(function (input) {
+            input.disabled = !visible;
+          });
+        });
+      };
+
+      // Run on load
+      updateVisibility();
+
+      // Listen for changes on the form
+      var form = document.getElementById("document-form");
+      if (form) {
+        form.addEventListener("input", updateVisibility);
+        form.addEventListener("change", updateVisibility);
+      }
+    }
+  })();
+</script>
+
+<script is:inline>
+  (function () {
+    var form = document.getElementById("document-form");
+    if (!form) return;
+    // Autofocus first text input on new document pages
+    if (location.pathname.endsWith("/new")) {
+      var first = form.querySelector('input[type="text"], textarea');
+      if (first) first.focus();
+    }
+    form.addEventListener("submit", function (e) {
+      e.preventDefault();
+      var f = e.target;
+      var sub = e.submitter;
+      var fd = new FormData(f);
+      if (sub && sub.name && sub.value) fd.set(sub.name, sub.value);
+      fetch(f.action, {
+        method: f.method || "POST",
+        body: new URLSearchParams(fd),
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      })
+        .then(function (res) {
+          var u = new URL(res.url);
+          if (u.searchParams.get("_toast") === "error") {
+            // Show error toast without navigating — preserves form data
+            var existing = document.getElementById("admin-toast");
+            if (existing) existing.parentElement.remove();
+            var msg = decodeURIComponent(u.searchParams.get("_msg") || "Something went wrong");
+            var w = document.createElement("div");
+            w.className = "fixed top-4 left-1/2 z-50 w-full max-w-sm -translate-x-1/2";
+            w.innerHTML =
+              '<div id="admin-toast" role="alert" class="bg-card flex items-center gap-2 rounded-lg border border-red-500/30 px-5 py-3 text-sm shadow-lg" style="animation:toast-in .25s ease-out,toast-out .3s ease-in 4.7s forwards">' +
+              '<svg class="size-4 shrink-0 text-red-600 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>' +
+              '<span class="text-red-700 dark:text-red-400">' +
+              msg +
+              "</span></div>";
+            document.body.appendChild(w);
+            setTimeout(function () {
+              w.remove();
+            }, 5200);
+            return;
+          }
+          // Live preview: reload preview tab after successful save
+          if (u.searchParams.get("_toast") === "success") {
+            try {
+              new BroadcastChannel("cms-preview").postMessage({ type: "reload" });
+            } catch (e) {}
+          }
+          // If embedded in a relation field drawer, notify parent instead of navigating
+          if (window.parent !== window && u.searchParams.get("_toast") === "success") {
+            var idMatch = u.pathname.match(/\/admin\/[^/]+\/([^/]+)/);
+            if (idMatch) {
+              window.parent.postMessage({ type: "cms:created", id: idMatch[1] }, "*");
+              return;
+            }
+          }
+          window.location.assign(res.url);
+        })
+        .catch(function () {
+          f.submit();
+        });
+    });
+  })();
+</script>