@xleddyl/nuxt-cms 0.2.2 → 0.2.3

package/dist/runtime/app/blocks/CmsBlocks.d.vue.ts

@@ -0,0 +1,45 @@
+import type { PropType } from 'vue';
+import type { CmsBlockEntryName } from '#cms-types';
+import type { CmsBlockItem } from './resolve.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    blocks: {
+        type: PropType<readonly CmsBlockItem[] | null>;
+        default: null;
+    };
+    entry: {
+        type: PropType<CmsBlockEntryName>;
+        default: undefined;
+    };
+    field: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    annotate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    blocks: {
+        type: PropType<readonly CmsBlockItem[] | null>;
+        default: null;
+    };
+    entry: {
+        type: PropType<CmsBlockEntryName>;
+        default: undefined;
+    };
+    field: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    annotate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    field: string;
+    blocks: readonly CmsBlockItem[] | null;
+    entry: string;
+    annotate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/blocks/CmsBlocks.vue

@@ -0,0 +1,36 @@
+<template>
+   <component
+      :is="block.component"
+      v-for="block in resolved"
+      :key="block.key"
+      v-bind="annotate ? { ...block.props, ...annotation(block) } : block.props"
+   />
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { cmsBlockTypeName, resolveCmsBlocks } from "./resolve";
+const props = defineProps({
+  blocks: { type: Array, default: null },
+  entry: { type: String, default: void 0 },
+  field: { type: String, default: void 0 },
+  annotate: { type: Boolean, default: false }
+});
+function warnMissing(item) {
+  if (!import.meta.dev) return;
+  const name = cmsBlockTypeName(item, props.entry, props.field) ?? item.type;
+  console.warn(
+    `[nuxt-cms] <CmsBlocks> has no component for block '${name}': set component on the block in cms.config, or pass entry and field when the data has no __typename`
+  );
+}
+const resolved = computed(
+  () => resolveCmsBlocks(props.blocks, {
+    entry: props.entry,
+    field: props.field,
+    onMissing: warnMissing
+  })
+);
+function annotation(block) {
+  return { "data-cms-block": block.index, "data-cms-block-type": block.type };
+}
+</script>

package/dist/runtime/app/blocks/CmsBlocks.vue.d.ts

@@ -0,0 +1,45 @@
+import type { PropType } from 'vue';
+import type { CmsBlockEntryName } from '#cms-types';
+import type { CmsBlockItem } from './resolve.js';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    blocks: {
+        type: PropType<readonly CmsBlockItem[] | null>;
+        default: null;
+    };
+    entry: {
+        type: PropType<CmsBlockEntryName>;
+        default: undefined;
+    };
+    field: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    annotate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    blocks: {
+        type: PropType<readonly CmsBlockItem[] | null>;
+        default: null;
+    };
+    entry: {
+        type: PropType<CmsBlockEntryName>;
+        default: undefined;
+    };
+    field: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    annotate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    field: string;
+    blocks: readonly CmsBlockItem[] | null;
+    entry: string;
+    annotate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/blocks/resolve.d.ts

@@ -0,0 +1,21 @@
+import type { Component } from 'vue';
+export interface CmsBlockItem {
+    type: string;
+    __typename?: string;
+}
+export interface ResolvedCmsBlock {
+    key: string;
+    index: number;
+    type: string;
+    component: Component;
+    props: Record<string, unknown>;
+}
+export declare const isHiddenCmsBlock: (item: CmsBlockItem) => boolean;
+export declare function cmsBlockTypeName(item: CmsBlockItem, entry?: string, field?: string): string | undefined;
+export declare function cmsBlockComponent(item: CmsBlockItem, entry?: string, field?: string): Component | undefined;
+export declare function cmsBlockProps(item: CmsBlockItem): Record<string, unknown>;
+export declare function resolveCmsBlocks(blocks: readonly CmsBlockItem[] | null | undefined, options?: {
+    entry?: string;
+    field?: string;
+    onMissing?: (item: CmsBlockItem) => void;
+}): ResolvedCmsBlock[];

package/dist/runtime/app/blocks/resolve.js

@@ -0,0 +1,37 @@
+import { cmsBlockComponents } from "#cms-blocks";
+import { CONTENT_BODY_FIELD, blockTypeName, isHiddenBlock } from "../../shared/index.js";
+const OMITTED_KEYS = /* @__PURE__ */ new Set(["type", "__typename"]);
+export const isHiddenCmsBlock = isHiddenBlock;
+export function cmsBlockTypeName(item, entry, field = CONTENT_BODY_FIELD) {
+  return entry ? blockTypeName(entry, field, item.type) : item.__typename;
+}
+export function cmsBlockComponent(item, entry, field) {
+  const name = cmsBlockTypeName(item, entry, field);
+  return name && Object.hasOwn(cmsBlockComponents, name) ? cmsBlockComponents[name] : void 0;
+}
+export function cmsBlockProps(item) {
+  return Object.fromEntries(
+    Object.entries(item).filter(
+      ([key]) => !OMITTED_KEYS.has(key)
+    )
+  );
+}
+export function resolveCmsBlocks(blocks, options = {}) {
+  const resolved = [];
+  (blocks ?? []).forEach((item, index) => {
+    if (!item || typeof item !== "object" || isHiddenCmsBlock(item)) return;
+    const component = cmsBlockComponent(item, options.entry, options.field);
+    if (!component) {
+      options.onMissing?.(item);
+      return;
+    }
+    resolved.push({
+      key: `${index}:${item.type}`,
+      index,
+      type: item.type,
+      component,
+      props: cmsBlockProps(item)
+    });
+  });
+  return resolved;
+}

package/dist/runtime/app/components/cms/BlockOutline.d.vue.ts

@@ -0,0 +1,17 @@
+import type { FieldConfig } from '#nuxt-cms';
+import type { CmsBlockValue } from '../../../shared/preview.js';
+type __VLS_Props = {
+    items: CmsBlockValue[];
+    field: FieldConfig;
+    locale: string;
+    selected: number | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (index: number) => any;
+    move: (from: number, to: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+    onMove?: ((from: number, to: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/BlockOutline.vue

@@ -0,0 +1,99 @@
+<template>
+   <ol class="cms-outline" aria-label="Blocks">
+      <li
+         v-for="(item, index) in items"
+         :key="uidFor(item)"
+         class="cms-outline-row"
+         :class="{
+  'is-selected': index === selected,
+  'is-hidden': isHiddenBlock(item),
+  'is-dragging': dragIndex === index,
+  'is-drop-target': dropIndex === index && dragIndex !== index
+}"
+         draggable="true"
+         @dragstart="onDragStart(index, $event)"
+         @dragover.prevent="dropIndex = index"
+         @dragleave="dropIndex === index && (dropIndex = null)"
+         @drop.prevent="onDrop(index)"
+         @dragend="onDragEnd"
+      >
+         <span class="cms-outline-grip" aria-hidden="true">
+            <CmsIcon name="bars-2" class="size-3.5" />
+         </span>
+         <button
+            type="button"
+            class="cms-outline-main"
+            :aria-current="index === selected ? 'true' : void 0"
+            :aria-label="`${labelOf(item)}, ${index + 1} of ${items.length}${isHiddenBlock(item) ? ', hidden' : ''}. Alt and the arrow keys move it`"
+            aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown"
+            @click="emit('select', index)"
+            @keydown.alt.up.prevent="index > 0 && emit('move', index, index - 1)"
+            @keydown.alt.down.prevent="index < items.length - 1 && emit('move', index, index + 1)"
+         >
+            <CmsIcon :name="blockOf(item)?.icon ?? 'rectangle-stack'" class="size-4 shrink-0" />
+            <span class="cms-outline-text">
+               <span class="cms-outline-label">{{ labelOf(item) }}</span>
+               <span v-if="summaryOf(item)" class="cms-outline-summary">
+                  {{ summaryOf(item) }}
+               </span>
+            </span>
+            <CmsIcon
+               v-if="isHiddenBlock(item)"
+               name="eye-slash"
+               class="cms-outline-hidden size-4 shrink-0"
+            />
+         </button>
+      </li>
+   </ol>
+</template>
+
+<script setup>
+import { isHiddenBlock } from "#nuxt-cms";
+import { ref } from "#imports";
+import { blockSummary } from "../../../shared/preview";
+import { useCmsRuntime } from "../../composables/cms-runtime";
+const props = defineProps({
+  items: { type: Array, required: true },
+  field: { type: Object, required: true },
+  locale: { type: String, required: true },
+  selected: { type: [Number, null], required: true }
+});
+const emit = defineEmits(["select", "move"]);
+const { i18n } = useCmsRuntime();
+let uidCounter = 0;
+const uids = /* @__PURE__ */ new WeakMap();
+function uidFor(item) {
+  let uid = uids.get(item);
+  if (uid === void 0) {
+    uid = ++uidCounter;
+    uids.set(item, uid);
+  }
+  return uid;
+}
+function blockOf(item) {
+  return props.field.blocks?.[String(item.type)];
+}
+function labelOf(item) {
+  return blockOf(item)?.label ?? String(item.type);
+}
+function summaryOf(item) {
+  return blockSummary(blockOf(item), item, props.locale, i18n.defaultLocale, 60);
+}
+const dragIndex = ref(null);
+const dropIndex = ref(null);
+function onDragStart(index, event) {
+  dragIndex.value = index;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", String(index));
+  }
+}
+function onDrop(index) {
+  if (dragIndex.value !== null && dragIndex.value !== index) emit("move", dragIndex.value, index);
+  onDragEnd();
+}
+function onDragEnd() {
+  dragIndex.value = null;
+  dropIndex.value = null;
+}
+</script>

package/dist/runtime/app/components/cms/BlockOutline.vue.d.ts

@@ -0,0 +1,17 @@
+import type { FieldConfig } from '#nuxt-cms';
+import type { CmsBlockValue } from '../../../shared/preview.js';
+type __VLS_Props = {
+    items: CmsBlockValue[];
+    field: FieldConfig;
+    locale: string;
+    selected: number | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (index: number) => any;
+    move: (from: number, to: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((index: number) => any) | undefined;
+    onMove?: ((from: number, to: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/BlockPalette.d.vue.ts

@@ -0,0 +1,12 @@
+import type { BlockConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    blocks: Record<string, BlockConfig>;
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (type: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPick?: ((type: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/BlockPalette.vue

@@ -0,0 +1,29 @@
+<template>
+   <div class="cms-palette" role="group" :aria-label="label">
+      <button
+         v-for="(block, type) in blocks"
+         :key="type"
+         type="button"
+         class="cms-palette-item"
+         @click="emit('pick', String(type))"
+      >
+         <span class="cms-palette-icon">
+            <CmsIcon :name="block.icon ?? 'rectangle-stack'" class="size-4" />
+         </span>
+         <span class="cms-palette-text">
+            <span class="cms-palette-label">{{ block.label }}</span>
+            <span v-if="block.description" class="cms-palette-description">
+               {{ block.description }}
+            </span>
+         </span>
+      </button>
+   </div>
+</template>
+
+<script setup>
+defineProps({
+  blocks: { type: Object, required: true },
+  label: { type: String, required: false, default: "Available blocks" }
+});
+const emit = defineEmits(["pick"]);
+</script>

package/dist/runtime/app/components/cms/BlockPalette.vue.d.ts

@@ -0,0 +1,12 @@
+import type { BlockConfig } from '#nuxt-cms';
+type __VLS_Props = {
+    blocks: Record<string, BlockConfig>;
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (type: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPick?: ((type: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/BlocksField.d.vue.ts

@@ -2,6 +2,8 @@ import type { FieldConfig } from '#nuxt-cms';
 type __VLS_Props = {
     field: FieldConfig;
     locale?: string;
+    entryName?: string;
+    fieldKey?: string;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>[] | null;

package/dist/runtime/app/components/cms/BlocksField.vue

@@ -112,6 +112,45 @@
          </button>
       </div>
 
+      <CmsButton
+         v-if="visual"
+         class="self-start"
+         label="Open visual editor"
+         icon="window"
+         size="sm"
+         variant="soft"
+         color="neutral"
+         @click="visualOpen = true"
+      />
+
+      <Teleport to="body">
+         <div v-if="visual && visualOpen" class="cms-scope cms-editor-overlay" :data-theme="theme">
+            <CmsVisualEditor
+               :state="{ [fieldKey]: model }"
+               :entry-name="entryName"
+               :field-key="fieldKey"
+               :fields="{ [fieldKey]: field }"
+               :title="field.label"
+               @update:state="onVisualUpdate"
+            >
+               <template #start>
+                  <CmsButton
+                     icon="arrow-left"
+                     size="sm"
+                     variant="ghost"
+                     color="neutral"
+                     aria-label="Back to the form"
+                     title="Back to the form"
+                     @click="visualOpen = false"
+                  />
+               </template>
+               <template #actions>
+                  <CmsButton label="Done" size="sm" @click="visualOpen = false" />
+               </template>
+            </CmsVisualEditor>
+         </div>
+      </Teleport>
+
       <CmsModal v-if="mediaOnly" v-model:open="pickerOpen" title="Media" size="lg">
          <template #body>
             <CmsMediaGallery
@@ -167,6 +206,14 @@
                         color="neutral"
                         @click="duplicateCurrent"
                      />
+                     <CmsButton
+                        v-if="editorItem && !declaresHiddenField(blockOf(editorItem))"
+                        :label="isHidden(editorItem) ? 'Show' : 'Hide'"
+                        :icon="isHidden(editorItem) ? 'eye' : 'eye-slash'"
+                        variant="soft"
+                        color="neutral"
+                        @click="toggleHiddenCurrent"
+                     />
                   </div>
                   <div class="cms-actions">
                      <CmsButton
@@ -187,6 +234,8 @@
 
 <script setup>
 import {
+  declaresHiddenField,
+  isHiddenBlock,
   isTranslatableMediaField,
   mediaFilename,
   mediaIconFor,
@@ -194,13 +243,17 @@ import {
   mediaTypeForKey,
   pickTranslatedMedia
 } from "#nuxt-cms";
-import { computed, ref, useState } from "#imports";
+import { computed, ref, useState, watch } from "#imports";
 import { useCmsMediaKeys } from "../../composables/cms-media-keys";
+import { useCmsOverlay } from "../../composables/cms-overlay";
 import { useCmsRuntime } from "../../composables/cms-runtime";
+import { useCmsTheme } from "../../composables/cms-theme";
 import { fieldIcon } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true },
-  locale: { type: String, required: false }
+  locale: { type: String, required: false },
+  entryName: { type: String, required: false },
+  fieldKey: { type: String, required: false }
 });
 const model = defineModel({ type: [Array, null], ...{ required: true } });
 const { mediaBaseUrl, i18n } = useCmsRuntime();
@@ -217,6 +270,23 @@ const mediaOnly = computed(() => {
   if (field.type !== "media" || isTranslatableMediaField(field)) return null;
   return { type, key, field };
 });
+const visual = computed(() => {
+  const list = Object.values(blocks.value);
+  return !mediaOnly.value && !!props.entryName && !!props.fieldKey && !!list.length && list.every((block) => typeof block.component === "string" && !!block.component.trim());
+});
+const visualOpen = ref(false);
+const theme = useCmsTheme();
+const visualOverlay = useCmsOverlay(() => {
+  visualOpen.value = false;
+});
+watch(visualOpen, (open) => {
+  if (open) visualOverlay.activate();
+  else visualOverlay.deactivate();
+});
+function onVisualUpdate(state) {
+  const value = props.fieldKey ? state[props.fieldKey] : null;
+  model.value = Array.isArray(value) && value.length ? value : null;
+}
 const addMediaLabel = computed(() => {
   const types = [mediaOnly.value?.field.mediaType ?? []].flat();
   return types.length === 1 && types[0] === "image" ? "Add photo" : "Add media";
@@ -293,7 +363,7 @@ function summaryOf(item) {
   return "";
 }
 function isHidden(item) {
-  return blockOf(item)?.fields.hidden?.type === "boolean" && item.hidden === true;
+  return isHiddenBlock(item);
 }
 function updateField(index, key, value) {
   const current = items.value[index];
@@ -406,6 +476,16 @@ function moveCurrent(delta) {
   move(editorIndex.value, delta);
   editorIndex.value = next;
 }
+function toggleHiddenCurrent() {
+  if (editorIndex.value === null || !editorItem.value) return;
+  const index = editorIndex.value;
+  const current = items.value[index];
+  if (!current) return;
+  const { hidden: _hidden, ...rest } = current;
+  const updated = isHidden(current) ? rest : { ...rest, hidden: true };
+  uids.set(updated, uidFor(current));
+  model.value = items.value.map((item, i) => i === index ? updated : item);
+}
 function duplicateCurrent() {
   if (editorIndex.value === null) return;
   duplicate(editorIndex.value);

package/dist/runtime/app/components/cms/BlocksField.vue.d.ts

@@ -2,6 +2,8 @@ import type { FieldConfig } from '#nuxt-cms';
 type __VLS_Props = {
     field: FieldConfig;
     locale?: string;
+    entryName?: string;
+    fieldKey?: string;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>[] | null;

package/dist/runtime/app/components/cms/EntryForm.vue

@@ -70,9 +70,9 @@
                            v-model="state[key]"
                            :field="fields[key]"
                            :locale="localeFor(key)"
-                           :slug-source="
-  fields[key].from ? state[fields[key].from] : void 0
-"
+                           :slug-source="slugSource(fields[key])"
+                           :entry-name="entryName"
+                           :field-key="key"
                         />
                      </CmsFormField>
                   </div>
@@ -99,7 +99,8 @@ import {
   hasTranslatableBlockFields,
   isFieldVisible,
   isTranslatableField,
-  resolveFormLayout
+  resolveFormLayout,
+  slugSourceValue
 } from "#nuxt-cms";
 import { computed, nextTick, ref, watch } from "#imports";
 import { buildEntrySchema } from "../../../shared/validation";
@@ -168,6 +169,10 @@ function onError() {
   if (key) void nextTick(() => revealField(key));
   emit("error");
 }
+function slugSource(field) {
+  if (!field.from) return void 0;
+  return slugSourceValue(props.fields[field.from], state.value[field.from], i18n.defaultLocale);
+}
 function hasLocaleSwitch(field) {
   return isTranslatableField(field) || hasTranslatableBlockFields(field);
 }

package/dist/runtime/app/components/cms/FieldInput.d.vue.ts

@@ -3,6 +3,8 @@ type __VLS_Props = {
     field: FieldConfig;
     slugSource?: string | null;
     locale?: string;
+    entryName?: string;
+    fieldKey?: string;
 };
 type __VLS_ModelProps = {
     modelValue: unknown;

package/dist/runtime/app/components/cms/FieldInput.vue

@@ -10,6 +10,8 @@
       v-model="blocksValue"
       :field="field"
       :locale="locale"
+      :entry-name="entryName"
+      :field-key="fieldKey"
    />
    <CmsRichTextField v-else-if="field.type === 'richtext'" v-model="strOrNull" />
    <CmsTextarea
@@ -50,6 +52,7 @@
       :placeholder="field.placeholder"
    />
    <CmsInput v-else-if="field.type === 'date'" v-model="str" type="date" />
+   <CmsInput v-else-if="field.type === 'datetime'" v-model="localDateTime" type="datetime-local" />
    <CmsRelationField
       v-else-if="field.type === 'relation'"
       v-model="relationValue"
@@ -66,7 +69,9 @@ import { computed } from "#imports";
 const props = defineProps({
   field: { type: Object, required: true },
   slugSource: { type: [String, null], required: false },
-  locale: { type: String, required: false }
+  locale: { type: String, required: false },
+  entryName: { type: String, required: false },
+  fieldKey: { type: String, required: false }
 });
 const model = defineModel({ type: null, ...{ required: true } });
 const selectItems = computed(() => [
@@ -97,6 +102,18 @@ const translatable = proxy((v) => v);
 const blocksValue = proxy(
   (v) => v
 );
+function toLocalDateTime(value) {
+  if (typeof value !== "string" || !value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return new Date(date.getTime() - date.getTimezoneOffset() * 6e4).toISOString().slice(0, 16);
+}
+function fromLocalDateTime(value) {
+  if (!value) return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+const localDateTime = proxy(toLocalDateTime, fromLocalDateTime);
 const relationValue = proxy((v) => v);
 const jsonValue = proxy((v) => v);
 </script>

package/dist/runtime/app/components/cms/FieldInput.vue.d.ts

@@ -3,6 +3,8 @@ type __VLS_Props = {
     field: FieldConfig;
     slugSource?: string | null;
     locale?: string;
+    entryName?: string;
+    fieldKey?: string;
 };
 type __VLS_ModelProps = {
     modelValue: unknown;

package/dist/runtime/app/components/cms/SettingsEntry.vue

@@ -69,7 +69,8 @@ import { errorMessage } from "../../utils/ui";
 const KIND_LABELS = {
   collection: "Collection",
   single: "Single",
-  page: "Pages"
+  page: "Pages",
+  content: "Content"
 };
 const STATUS_LABELS = {
   idle: "Changes save automatically",
@@ -85,7 +86,7 @@ const toast = useCmsToast();
 const entry = computed(() => cmsConfig[props.name]);
 const fields = computed(() => entryFields(props.name));
 const parts = computed(() => [
-  ...entry.value.kind === "collection" ? [{ id: "columns", label: "Table columns" }] : [],
+  ...entry.value.kind === "collection" || entry.value.kind === "content" ? [{ id: "columns", label: "Table columns" }] : [],
   { id: "layout", label: "Form layout" }
 ]);
 const activePart = ref(parts.value[0].id);

package/dist/runtime/app/components/cms/SettingsModal.vue

@@ -144,7 +144,8 @@ const emit = defineEmits(["logout"]);
 const KIND_ICONS = {
   collection: "square-3-stack-3d",
   single: "document-text",
-  page: "window"
+  page: "window",
+  content: "newspaper"
 };
 const ENTRY_PREFIX = "entry:";
 const entries = Object.entries(cmsConfig).map(([name, entry]) => ({