katecms 0.0.0-stage → 1.0.0-beta.1

package/dist/runtime/internal/admin/CollectionEntryForm.vue

@@ -0,0 +1,916 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from "vue";
+import {
+  buildFormValues,
+  collectPanelDefaults,
+  collectVisibleValueKeys,
+  DATE_FIELD_FORMATS,
+  formatDate,
+  isLayoutOnlyFieldType,
+  isVisible,
+  parseDate,
+  validateRequiredFields
+} from "@katecms/core";
+import { resolveField } from "../../utils/helpers";
+import { provideKateCmsFieldValues } from "../../utils/field-values";
+import { provideKateCmsFieldErrors } from "../../utils/field-errors";
+import { slugify } from "../../utils/slugify";
+import EntryRevisions from "./EntryRevisions.vue";
+import { useKateCmsEntrySidebar } from "../../composables/useKateCmsExtensions";
+const props = defineProps({
+  collection: { type: Object, required: true },
+  modelValue: { type: Object, required: true },
+  entryKey: { type: [String, Number], required: false },
+  parents: { type: Array, required: false },
+  saving: { type: Boolean, required: false },
+  error: { type: [String, null], required: false },
+  viewUrl: { type: [String, null], required: false },
+  canUpdate: { type: Boolean, required: false },
+  canDelete: { type: Boolean, required: false },
+  savedStatus: { type: String, required: false },
+  dictionaryPickers: { type: Array, required: false },
+  revisions: { type: Array, required: false },
+  revisionsLoading: { type: Boolean, required: false },
+  revisionsError: { type: String, required: false }
+});
+const emit = defineEmits(["update:modelValue", "ready", "submit", "trash", "restore", "restoreRevision", "delete"]);
+const rootClass = "katecms-collection-form";
+const PAGE_TAB = "page";
+const REVISIONS_TAB = "revisions";
+const entrySidebar = useKateCmsEntrySidebar();
+const activeSidebarTab = ref(PAGE_TAB);
+const openedSidebarTabs = ref({});
+const showRevisionsTab = computed(() => props.entryKey != null && props.collection.revisions !== false);
+const sidebarTabs = computed(() => {
+  const seen = /* @__PURE__ */ new Set();
+  const tabs = [];
+  for (const tab of entrySidebar.value) {
+    if (!tab || typeof tab !== "object") {
+      continue;
+    }
+    const key = tab.key?.trim();
+    const label = tab.label?.trim();
+    const component = tab.component?.trim();
+    if (!key || key === PAGE_TAB || !label || !component || seen.has(key)) {
+      continue;
+    }
+    seen.add(key);
+    tabs.push({ key, label, component });
+  }
+  return tabs;
+});
+const showTabBar = computed(() => showRevisionsTab.value || sidebarTabs.value.length > 0);
+const tabKeys = computed(() => {
+  const keys = [PAGE_TAB];
+  if (showRevisionsTab.value) {
+    keys.push(REVISIONS_TAB);
+  }
+  for (const tab of sidebarTabs.value) {
+    keys.push(tab.key);
+  }
+  return keys;
+});
+watch(tabKeys, (keys) => {
+  if (!keys.includes(activeSidebarTab.value)) {
+    activeSidebarTab.value = PAGE_TAB;
+  }
+});
+function sidebarTabId(key) {
+  return `${rootClass}-tab-${key}`;
+}
+function sidebarPanelId(key) {
+  return `${rootClass}-panel-${key}`;
+}
+function selectSidebarTab(key) {
+  activeSidebarTab.value = key;
+  if (key !== PAGE_TAB) {
+    openedSidebarTabs.value = { ...openedSidebarTabs.value, [key]: true };
+  }
+}
+function onSidebarTabKeydown(event, index) {
+  const keys = tabKeys.value;
+  let next = index;
+  if (event.key === "ArrowRight") {
+    next = (index + 1) % keys.length;
+  } else if (event.key === "ArrowLeft") {
+    next = (index - 1 + keys.length) % keys.length;
+  } else if (event.key === "Home") {
+    next = 0;
+  } else if (event.key === "End") {
+    next = keys.length - 1;
+  } else {
+    return;
+  }
+  event.preventDefault();
+  const key = keys[next];
+  if (!key) {
+    return;
+  }
+  selectSidebarTab(key);
+  void nextTick(() => {
+    document.getElementById(sidebarTabId(key))?.focus();
+  });
+}
+const PUBLISH_FORMAT = DATE_FIELD_FORMATS.datetime.return;
+const fieldDefs = computed(() => props.collection.fields ?? {});
+const values = reactive({});
+provideKateCmsFieldValues(values);
+const fieldErrors = ref({});
+const attemptedSubmit = ref(false);
+provideKateCmsFieldErrors(fieldErrors);
+const readOnly = computed(() => !props.canUpdate);
+const isTrash = computed(() => (props.savedStatus ?? props.modelValue.status) === "trash");
+const statusChoices = [
+  { val: "published", lbl: "Published" },
+  { val: "draft", lbl: "Draft" }
+];
+const statusField = {
+  type: "select",
+  label: "Status",
+  choices: statusChoices
+};
+const parentChoices = computed(
+  () => (props.parents ?? []).map((parent) => {
+    const depth = parent.depth ?? 0;
+    const title = depth < 1 ? parent.title : `${"\u2014 ".repeat(depth)}${parent.title}`;
+    return {
+      val: parent.id,
+      lbl: title
+    };
+  })
+);
+const parentField = computed(() => ({
+  type: "select",
+  label: "Parent",
+  allowNull: true,
+  placeholder: "\u2014 None \u2014",
+  choices: parentChoices.value
+}));
+const dictionaryPickers = computed(() => props.dictionaryPickers ?? []);
+function dictionaryChoices(picker) {
+  return picker.terms.map((term) => {
+    const depth = term.depth ?? 0;
+    const title = depth < 1 ? term.title : `${"\u2014 ".repeat(depth)}${term.title}`;
+    return {
+      val: term.id,
+      lbl: title
+    };
+  });
+}
+function dictionaryField(picker) {
+  return {
+    type: "select",
+    label: picker.labels.name,
+    multiple: picker.multiple,
+    allowNull: !picker.multiple,
+    placeholder: picker.multiple ? void 0 : "\u2014 None \u2014",
+    search: picker.terms.length > 6,
+    choices: dictionaryChoices(picker)
+  };
+}
+function dictionaryValue(picker) {
+  const raw = props.modelValue.dictionaryIds?.[picker.slug];
+  if (picker.multiple) {
+    return Array.isArray(raw) ? raw : [];
+  }
+  if (Array.isArray(raw)) {
+    return raw[0] ?? null;
+  }
+  return raw ?? null;
+}
+function sameDictionaryValue(current, next, multiple) {
+  if (multiple) {
+    const left = Array.isArray(current) ? current : [];
+    const right = Array.isArray(next) ? next : [];
+    return left.length === right.length && left.every((id, i) => id === right[i]);
+  }
+  return (current ?? null) === next;
+}
+function setDictionaryValue(picker, value) {
+  let next;
+  if (picker.multiple) {
+    const raw = Array.isArray(value) ? value : [];
+    next = raw.map((item) => Number(item)).filter((id) => Number.isInteger(id) && id > 0);
+  } else if (value === "" || value === null || value === void 0) {
+    next = null;
+  } else {
+    const id = Number(value);
+    next = Number.isInteger(id) && id > 0 ? id : null;
+  }
+  if (sameDictionaryValue(dictionaryValue(picker), next, picker.multiple)) {
+    return;
+  }
+  emit("update:modelValue", {
+    ...props.modelValue,
+    dictionaryIds: {
+      ...props.modelValue.dictionaryIds,
+      [picker.slug]: next
+    }
+  });
+}
+const publishedField = {
+  type: "date_time_picker",
+  label: "Publish date",
+  returnFormat: PUBLISH_FORMAT
+};
+const authorField = {
+  type: "user",
+  label: "Author",
+  returnFormat: "id"
+};
+const menuOrderField = {
+  type: "number",
+  label: "Order",
+  step: 1,
+  instructions: "Lower numbers appear first in lists."
+};
+const titleField = { type: "text", label: "Title", required: true };
+const slugField = { type: "text", label: "Slug", required: true };
+let syncingFromParent = false;
+let hydrating = false;
+let hydrateGen = 0;
+function replaceValues(next) {
+  syncingFromParent = true;
+  for (const key of Object.keys(values)) {
+    Reflect.deleteProperty(values, key);
+  }
+  Object.assign(values, next);
+  queueMicrotask(() => {
+    syncingFromParent = false;
+  });
+}
+function emitFields() {
+  emit("update:modelValue", {
+    ...props.modelValue,
+    fields: { ...values }
+  });
+}
+async function hydrateFromModel() {
+  const gen = ++hydrateGen;
+  hydrating = true;
+  replaceValues({
+    ...buildFormValues(fieldDefs.value),
+    ...props.modelValue.fields ?? {}
+  });
+  await nextTick();
+  await nextTick();
+  if (gen !== hydrateGen) {
+    return;
+  }
+  emitFields();
+  hydrating = false;
+  emit("ready");
+}
+watch(
+  () => `${props.collection.slug}:${props.entryKey ?? "default"}`,
+  () => {
+    void hydrateFromModel();
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => {
+  hydrateGen += 1;
+});
+watch(
+  values,
+  () => {
+    if (syncingFromParent || hydrating) {
+      return;
+    }
+    emitFields();
+  },
+  { deep: true }
+);
+const visibleFields = computed(
+  () => Object.entries(fieldDefs.value).filter(
+    ([, field]) => isVisible(field.conditionalLogic, values)
+  )
+);
+const mainFields = computed(
+  () => visibleFields.value.filter(([, field]) => (field.position ?? "main") === "main")
+);
+const sidebarFields = computed(
+  () => visibleFields.value.filter(([, field]) => field.position === "sidebar")
+);
+const hiddenCache = {};
+function restoreFieldValue(key, field) {
+  if (isLayoutOnlyFieldType(field.type)) {
+    if (field.type === "tab" || field.type === "accordion") {
+      for (const [panelKey, panelDefault] of Object.entries(collectPanelDefaults(field))) {
+        if (!(panelKey in values)) {
+          values[panelKey] = panelKey in hiddenCache ? hiddenCache[panelKey] : panelDefault;
+          Reflect.deleteProperty(hiddenCache, panelKey);
+        }
+      }
+    }
+    Reflect.deleteProperty(values, key);
+    return;
+  }
+  if (!(key in values)) {
+    values[key] = key in hiddenCache ? hiddenCache[key] : "defaultValue" in field ? field.defaultValue : field.type === "group" ? void 0 : field.type === "repeater" || field.type === "flexible_content" || field.type === "gallery" ? [] : field.type === "open_street_map" && field.multiple ? [] : void 0;
+    Reflect.deleteProperty(hiddenCache, key);
+  }
+}
+watch(visibleFields, (visible) => {
+  const visibleKeys = collectVisibleValueKeys(visible);
+  for (const key of Object.keys(values)) {
+    if (!visibleKeys.has(key)) {
+      hiddenCache[key] = values[key];
+      Reflect.deleteProperty(values, key);
+    }
+  }
+  for (const [key, field] of visible) {
+    restoreFieldValue(key, field);
+  }
+}, { immediate: true });
+function updateCore(key, value) {
+  emit("update:modelValue", {
+    ...props.modelValue,
+    [key]: value
+  });
+}
+const publishedLocal = computed({
+  get() {
+    const iso = props.modelValue.publishedAt;
+    if (!iso) {
+      return "";
+    }
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) {
+      return "";
+    }
+    return formatDate(date, PUBLISH_FORMAT);
+  },
+  set(value) {
+    if (!value) {
+      updateCore("publishedAt", null);
+      return;
+    }
+    const date = parseDate(value, PUBLISH_FORMAT);
+    updateCore("publishedAt", date ? date.toISOString() : null);
+  }
+});
+const parentModel = computed({
+  get() {
+    return props.modelValue.parentId;
+  },
+  set(value) {
+    if (value === "" || value === null || value === void 0) {
+      updateCore("parentId", null);
+      return;
+    }
+    const id = Number(value);
+    updateCore("parentId", Number.isInteger(id) && id > 0 ? id : null);
+  }
+});
+const authorModel = computed({
+  get() {
+    return props.modelValue.authorId;
+  },
+  set(value) {
+    const id = Number(value);
+    updateCore("authorId", Number.isInteger(id) && id > 0 ? id : null);
+  }
+});
+const menuOrderModel = computed({
+  get() {
+    return props.modelValue.menuOrder;
+  },
+  set(value) {
+    if (value === "" || value === null || value === void 0) {
+      updateCore("menuOrder", 0);
+      return;
+    }
+    const n = typeof value === "number" ? value : Number(value);
+    if (!Number.isFinite(n)) {
+      updateCore("menuOrder", 0);
+      return;
+    }
+    updateCore("menuOrder", Math.trunc(n));
+  }
+});
+const canSubmit = computed(
+  () => !readOnly.value && !isTrash.value && !props.saving
+);
+const submitLabel = computed(() => {
+  if (props.saving) {
+    return "Saving\u2026";
+  }
+  return props.modelValue.status === "published" ? "Publish" : "Save draft";
+});
+const requiredNotice = computed(() => {
+  const messages = Object.values(fieldErrors.value);
+  if (messages.length === 0) {
+    return "";
+  }
+  if (messages.length === 1) {
+    return messages[0];
+  }
+  return "Please fill in the required fields.";
+});
+function collectFieldErrors(slug = props.modelValue.slug) {
+  const next = {};
+  if (!props.modelValue.title.trim()) {
+    next["cms-entry-title"] = "Title is required.";
+  }
+  if (!slug.trim()) {
+    next["cms-entry-slug"] = "Slug is required.";
+  }
+  if (props.modelValue.status === "published") {
+    for (const issue of validateRequiredFields(fieldDefs.value, values)) {
+      next[issue.key] = issue.message;
+    }
+  }
+  return next;
+}
+function scrollToFirstError(errors) {
+  const key = Object.keys(errors)[0];
+  if (!key || typeof document === "undefined") {
+    return;
+  }
+  const target = document.querySelector(`[data-field-key="${CSS.escape(key)}"]`);
+  if (target instanceof HTMLElement) {
+    target.scrollIntoView({ block: "center", behavior: "smooth" });
+  }
+}
+function onSubmit() {
+  if (!validateForSubmit()) {
+    return;
+  }
+  emit("submit");
+}
+function validateForSubmit() {
+  if (!canSubmit.value) {
+    return false;
+  }
+  let slug = props.modelValue.slug.trim();
+  if (!slug && props.modelValue.title.trim()) {
+    slug = slugify(props.modelValue.title) || "entry";
+    updateCore("slug", slug);
+  }
+  attemptedSubmit.value = true;
+  const errors = collectFieldErrors(slug);
+  fieldErrors.value = errors;
+  if (Object.keys(errors).length > 0) {
+    nextTick(() => scrollToFirstError(errors));
+    return false;
+  }
+  return true;
+}
+defineExpose({ validateForSubmit });
+watch(
+  [values, () => props.modelValue.title, () => props.modelValue.slug, () => props.modelValue.status],
+  () => {
+    if (!attemptedSubmit.value) {
+      return;
+    }
+    fieldErrors.value = collectFieldErrors();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <KateCmsUiNotice
+    v-if="requiredNotice"
+    placement="fixed"
+    variant="danger"
+    :message="requiredNotice"
+    :closable="false"
+  />
+  <KateCmsUiNotice
+    v-if="error"
+    placement="fixed"
+    variant="danger"
+    :message="error"
+  />
+
+  <form
+    :class="rootClass"
+    novalidate
+    @submit.prevent="onSubmit"
+  >
+    <div :class="`${rootClass}__main`">
+      <div :class="`${rootClass}__main-wrap`">
+        <KateCmsFieldWrapper
+          field-key="cms-entry-title"
+          :field="titleField"
+        >
+          <KateCmsInputControl
+            :model-value="modelValue.title"
+            field-key="cms-entry-title"
+            :field="titleField"
+            @update:model-value="updateCore('title', String($event ?? ''))"
+          />
+        </KateCmsFieldWrapper>
+
+        <KateCmsFieldWrapper
+          field-key="cms-entry-slug"
+          :field="slugField"
+        >
+          <KateCmsInputControl
+            :model-value="modelValue.slug"
+            field-key="cms-entry-slug"
+            :field="slugField"
+            @update:model-value="updateCore('slug', String($event ?? ''))"
+          />
+        </KateCmsFieldWrapper>
+
+        <div :class="`${rootClass}__fields`">
+          <div
+            v-for="[key, field] in mainFields"
+            :key="key"
+            :class="`${rootClass}__field`"
+            :style="field.columnWidth ? { width: `${field.columnWidth}%` } : void 0"
+          >
+            <component
+              :is="resolveField(field.type)"
+              v-model="values[key]"
+              :field-key="key"
+              :field="field"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div :class="[`${rootClass}__sidebar`, { [`${rootClass}__sidebar--tabs`]: showTabBar }]">
+      <div
+        v-if="showTabBar"
+        :class="`${rootClass}__tabs`"
+        role="tablist"
+      >
+        <button
+          :id="sidebarTabId(PAGE_TAB)"
+          type="button"
+          role="tab"
+          :aria-selected="activeSidebarTab === PAGE_TAB"
+          :aria-controls="sidebarPanelId(PAGE_TAB)"
+          :tabindex="activeSidebarTab === PAGE_TAB ? 0 : -1"
+          :class="[`${rootClass}__tabs-item`, { 'is-active': activeSidebarTab === PAGE_TAB }]"
+          @click="selectSidebarTab(PAGE_TAB)"
+          @keydown="onSidebarTabKeydown($event, 0)"
+        >
+          Page
+        </button>
+        <button
+          v-if="showRevisionsTab"
+          :id="sidebarTabId(REVISIONS_TAB)"
+          type="button"
+          role="tab"
+          :aria-selected="activeSidebarTab === REVISIONS_TAB"
+          :aria-controls="sidebarPanelId(REVISIONS_TAB)"
+          :tabindex="activeSidebarTab === REVISIONS_TAB ? 0 : -1"
+          :class="[`${rootClass}__tabs-item`, { 'is-active': activeSidebarTab === REVISIONS_TAB }]"
+          @click="selectSidebarTab(REVISIONS_TAB)"
+          @keydown="onSidebarTabKeydown($event, 1)"
+        >
+          Revisions
+        </button>
+        <button
+          v-for="(tab, index) in sidebarTabs"
+          :id="sidebarTabId(tab.key)"
+          :key="tab.key"
+          type="button"
+          role="tab"
+          :aria-selected="activeSidebarTab === tab.key"
+          :aria-controls="sidebarPanelId(tab.key)"
+          :tabindex="activeSidebarTab === tab.key ? 0 : -1"
+          :class="[`${rootClass}__tabs-item`, { 'is-active': activeSidebarTab === tab.key }]"
+          @click="selectSidebarTab(tab.key)"
+          @keydown="onSidebarTabKeydown($event, index + (showRevisionsTab ? 2 : 1))"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <div
+        v-show="!showTabBar || activeSidebarTab === PAGE_TAB"
+        :id="showTabBar ? sidebarPanelId(PAGE_TAB) : void 0"
+        :class="showTabBar ? `${rootClass}__panel` : `${rootClass}__page`"
+        :role="showTabBar ? 'tabpanel' : void 0"
+        :aria-labelledby="showTabBar ? sidebarTabId(PAGE_TAB) : void 0"
+      >
+        <div :class="`${rootClass}__block`">
+          <div :class="`${rootClass}__block-title`">
+            Publish
+          </div>
+
+          <KateCmsUiNotice
+            v-if="isTrash"
+            placement="static"
+            variant="warning"
+            message="This entry is in the trash."
+            :closable="false"
+          />
+
+          <template v-else>
+            <KateCmsSelectField
+              :model-value="modelValue.status === 'trash' ? 'draft' : modelValue.status"
+              field-key="cms-entry-status"
+              :field="statusField"
+              @update:model-value="updateCore('status', $event === 'published' ? 'published' : 'draft')"
+            />
+
+            <KateCmsUserField
+              v-model="authorModel"
+              field-key="cms-entry-author"
+              :field="authorField"
+            />
+
+            <KateCmsDateTimePickerField
+              v-model="publishedLocal"
+              field-key="cms-entry-published"
+              :field="publishedField"
+            />
+
+            <KateCmsNumberField
+              v-model="menuOrderModel"
+              field-key="cms-entry-menu-order"
+              :field="menuOrderField"
+            />
+
+            <KateCmsSelectField
+              v-if="collection.hierarchical"
+              v-model="parentModel"
+              field-key="cms-entry-parent"
+              :field="parentField"
+            />
+          </template>
+
+          <div :class="`${rootClass}__block-actions`">
+            <KateCmsUiButton
+              v-if="!isTrash && canUpdate"
+              tag="button"
+              type="submit"
+              variant="full"
+              :disabled="!canSubmit"
+            >
+              {{ submitLabel }}
+            </KateCmsUiButton>
+
+            <KateCmsUiButton
+              v-if="viewUrl && !isTrash"
+              tag="a"
+              :variant="['secondary', 'small', 'full']"
+              :link="{ url: viewUrl, title: 'View', target: '_blank' }"
+            >
+              View
+            </KateCmsUiButton>
+
+            <KateCmsUiButton
+              v-if="!isTrash && canUpdate"
+              tag="button"
+              type="button"
+              :variant="['red', 'small', 'full']"
+              :disabled="saving"
+              @click="emit('trash')"
+            >
+              Move to trash
+            </KateCmsUiButton>
+
+            <KateCmsUiButton
+              v-if="isTrash && canUpdate"
+              tag="button"
+              type="button"
+              :disabled="saving"
+              @click="emit('restore')"
+            >
+              Restore
+            </KateCmsUiButton>
+
+            <KateCmsUiButton
+              v-if="isTrash && canDelete"
+              tag="button"
+              type="button"
+              :variant="['red', 'small']"
+              :disabled="saving"
+              @click="emit('delete')"
+            >
+              Delete permanently
+            </KateCmsUiButton>
+          </div>
+        </div>
+
+        <div
+          v-if="!isTrash && dictionaryPickers.length"
+          :class="`${rootClass}__block`"
+        >
+          <div :class="`${rootClass}__block-title`">
+            Dictionaries
+          </div>
+          <KateCmsSelectField
+            v-for="picker in dictionaryPickers"
+            :key="picker.slug"
+            :model-value="dictionaryValue(picker)"
+            :field-key="`cms-entry-dictionary-${picker.slug}`"
+            :field="dictionaryField(picker)"
+            @update:model-value="setDictionaryValue(picker, $event)"
+          />
+        </div>
+
+        <div
+          v-if="sidebarFields.length"
+          :class="`${rootClass}__block`"
+        >
+          <component
+            :is="resolveField(field.type)"
+            v-for="[key, field] in sidebarFields"
+            :key="key"
+            v-model="values[key]"
+            :field-key="key"
+            :field="field"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="showRevisionsTab && openedSidebarTabs[REVISIONS_TAB]"
+        v-show="activeSidebarTab === REVISIONS_TAB"
+        :id="sidebarPanelId(REVISIONS_TAB)"
+        :class="`${rootClass}__panel`"
+        role="tabpanel"
+        :aria-labelledby="sidebarTabId(REVISIONS_TAB)"
+      >
+        <div :class="`${rootClass}__block`">
+          <EntryRevisions
+            :items="revisions ?? []"
+            :loading="revisionsLoading"
+            :error="revisionsError"
+            :can-restore="canUpdate === true"
+            :disabled="saving || canUpdate !== true"
+            @restore="emit('restoreRevision', $event)"
+          />
+        </div>
+      </div>
+
+      <template
+        v-for="tab in sidebarTabs"
+        :key="tab.key"
+      >
+        <div
+          v-if="openedSidebarTabs[tab.key]"
+          v-show="activeSidebarTab === tab.key"
+          :id="sidebarPanelId(tab.key)"
+          :class="`${rootClass}__panel`"
+          role="tabpanel"
+          :aria-labelledby="sidebarTabId(tab.key)"
+        >
+          <component :is="tab.component" />
+        </div>
+      </template>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-collection-form {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 21.875rem;
+  grid-template-rows: minmax(0, 1fr);
+}
+@media (max-width: 1100px) {
+  body#katecms-body .katecms-collection-form {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: none;
+    overflow: auto;
+  }
+}
+body#katecms-body .katecms-collection-form__main {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+body#katecms-body .katecms-collection-form__main-wrap {
+  padding: 1rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+@media (max-width: 1100px) {
+  body#katecms-body .katecms-collection-form__main-wrap {
+    overflow: visible;
+  }
+}
+body#katecms-body .katecms-collection-form__sidebar {
+  background: var(--katecms-color-bg);
+  border-left: 1px solid var(--katecms-color-border);
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+@media (max-width: 1100px) {
+  body#katecms-body .katecms-collection-form__sidebar {
+    overflow: visible;
+  }
+}
+body#katecms-body .katecms-collection-form__sidebar--tabs {
+  padding-top: 0;
+  gap: 0;
+}
+body#katecms-body .katecms-collection-form__tabs {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-shrink: 0;
+  overflow-x: auto;
+  background: var(--katecms-color-bg);
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+body#katecms-body .katecms-collection-form__tabs-item {
+  flex: 1 0 auto;
+  min-width: 4.5rem;
+  margin: 0;
+  padding: 0.75rem 0.875rem;
+  border: 0;
+  border-right: 1px solid var(--katecms-color-border);
+  background: transparent;
+  color: var(--katecms-color-muted);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+body#katecms-body .katecms-collection-form__tabs-item:last-child {
+  border-right: 0;
+}
+body#katecms-body .katecms-collection-form__tabs-item:hover {
+  color: var(--katecms-color-ink);
+  background: var(--katecms-color-accent-wash);
+}
+body#katecms-body .katecms-collection-form__tabs-item.is-active {
+  color: var(--katecms-color-ink);
+  background: var(--katecms-color-surface);
+  box-shadow: inset 0 -2px 0 var(--katecms-color-accent);
+}
+body#katecms-body .katecms-collection-form__tabs-item:focus {
+  outline: none;
+}
+body#katecms-body .katecms-collection-form__tabs-item:focus-visible {
+  outline: 2px solid rgb(from var(--katecms-color-accent) r g b / 0.35);
+  outline-offset: -2px;
+}
+body#katecms-body .katecms-collection-form__page {
+  display: contents;
+}
+body#katecms-body .katecms-collection-form__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 0;
+  padding-top: 1rem;
+}
+body#katecms-body .katecms-collection-form__fields {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 1rem;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+  min-width: 0;
+}
+body#katecms-body .katecms-collection-form__field {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+body#katecms-body .katecms-collection-form__block {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+body#katecms-body .katecms-collection-form__block:not(:last-child) {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--katecms-color-border);
+}
+body#katecms-body .katecms-collection-form__block-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--katecms-color-ink);
+}
+body#katecms-body .katecms-collection-form__block-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+</style>