@xleddyl/nuxt-cms 0.9.4 → 0.10.0

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

@@ -1,35 +1,159 @@
 <template>
-   <div class="cms-editor">
-      <header class="cms-editor-bar">
-         <div class="cms-editor-bar-start">
-            <slot name="start" />
-            <div class="cms-editor-heading">
-               <span class="cms-editor-title" :title="title">{{ title }}</span>
-               <slot name="status" />
-            </div>
+   <KWorkspaceLayout
+      ref="workspace"
+      v-model:pane="pane"
+      v-model:right-collapsed="inspectorCollapsed"
+      storage-key="visual-editor"
+      :left="leftPane"
+      :main="{ label: 'Preview' }"
+      :right="rightPane"
+      panes-label="Editor panels"
+   >
+      <template #start="{ compact }">
+         <slot name="start" />
+         <KPageHeader
+            size="sm"
+            :title="title"
+            :trail="compact ? void 0 : trail"
+            :level="1"
+            truncate
+         >
+            <template v-if="$slots.status" #badge><slot name="status" /></template>
+         </KPageHeader>
+      </template>
+
+      <template #center="{ compact }">
+         <CmsLocaleSwitch
+            v-if="i18n.locales.length > 1"
+            v-model="locale"
+            :progress="translations"
+         />
+         <KSegmentedControl
+            v-model="device"
+            :options="deviceOptions"
+            size="sm"
+            icon-only
+            required
+            aria-label="Preview width"
+         />
+         <CmsEditorHistory
+            v-if="!readonly && compact"
+            :can-undo="canUndo"
+            :can-redo="canRedo"
+            @undo="undo"
+            @redo="redo"
+         />
+      </template>
+
+      <template #end="{ compact }">
+         <CmsEditorHistory
+            v-if="!readonly && !compact"
+            :can-undo="canUndo"
+            :can-redo="canRedo"
+            @undo="undo"
+            @redo="redo"
+         />
+         <slot name="actions" :compact="compact" />
+      </template>
+
+      <template #left-header>
+         <KPageHeader size="sm" :title="blocksField.label" :level="2" truncate>
+            <template #badge>
+               <KBadge size="sm" variant="outline" :label="blockCount" />
+            </template>
+         </KPageHeader>
+      </template>
+
+      <template #left>
+         <div class="cms-editor-tree">
+            <KFieldMessage v-if="blocksFieldError" :message="blocksFieldError" />
+            <KFieldMessage v-else tone="warning" :message="form.warnings[fieldKey]" />
+            <CmsBlockTree
+               :items="blocks"
+               :field="blocksField"
+               :field-key="fieldKey"
+               :locale="locale"
+               :selected="selected"
+               :highlighted="canvasHover"
+               :errors="blockErrors"
+               :can-add="canAddTo"
+               :label="blocksField.label"
+               :menu="blockMenu"
+               :readonly="readonly"
+               @select="selectFromTree"
+               @move="move"
+               @hover="highlight"
+               @insert="openPalette"
+            />
+            <template v-if="blocks.length && !readonly">
+               <KButton
+                  v-if="canAdd"
+                  :icon="cmsIcon('plus')"
+                  label="Add a block"
+                  size="sm"
+                  variant="soft"
+                  tone="neutral"
+                  block
+                  aria-haspopup="dialog"
+                  @click="
+  (event) => openPalette([fieldKey], blocks.length, event.currentTarget)
+"
+               />
+               <KFieldMessage v-else tone="neutral" :icon="false" :message="maxReached" />
+            </template>
          </div>
-         <div class="cms-editor-bar-center">
-            <CmsLocaleSwitch
-               v-if="i18n.locales.length > 1"
-               v-model="locale"
-               :value="localeFilled"
+      </template>
+
+      <template #main-header="{ compact, collapsed, toggle }">
+         <div class="cms-editor-canvas-bar">
+            <KButton
+               v-if="!compact"
+               class="cms-editor-canvas-toggle"
+               :icon="cmsIcon('queue-list')"
+               size="sm"
+               :variant="collapsed.left ? 'ghost' : 'soft'"
+               tone="neutral"
+               aria-label="Blocks panel"
+               :tooltip="collapsed.left ? 'Show blocks' : 'Hide blocks'"
+               :aria-pressed="!collapsed.left"
+               @click="toggle('left')"
             />
-            <KSegmentedControl
-               v-model="device"
-               :options="deviceOptions"
+            <div class="cms-editor-canvas-tools">
+               <span v-if="canvasWidth" class="cms-editor-width" aria-live="polite">
+                  {{ canvasWidth }} px
+               </span>
+               <KButton
+                  :icon="cmsIcon('arrow-path')"
+                  size="sm"
+                  variant="ghost"
+                  tone="neutral"
+                  aria-label="Reload preview"
+                  @click="reloadPreview"
+               />
+            </div>
+            <KButton
+               v-if="!compact"
+               class="cms-editor-canvas-toggle is-end"
+               :icon="cmsIcon('adjustments-horizontal')"
                size="sm"
-               icon-only
-               aria-label="Preview width"
+               :variant="collapsed.right ? 'ghost' : 'soft'"
+               tone="neutral"
+               aria-label="Fields panel"
+               :tooltip="collapsed.right ? 'Show fields' : 'Hide fields'"
+               :aria-pressed="!collapsed.right"
+               @click="toggle('right')"
             />
          </div>
-         <div class="cms-editor-bar-end">
-            <slot name="actions" />
-         </div>
-      </header>
+      </template>
 
-      <div class="cms-editor-body">
-         <div class="cms-editor-canvas">
-            <div class="cms-editor-frame" :class="`is-${device}`">
+      <template #main="{ compact }">
+         <div class="cms-editor-stage" :class="{ 'is-compact': compact }">
+            <div
+               ref="frameBox"
+               class="cms-editor-frame"
+               :class="{ 'is-fixed': deviceWidth !== null }"
+               :style="deviceWidth === null ? void 0 : { width: `${deviceWidth}px` }"
+            >
                <iframe
                   ref="frame"
                   :src="previewPath"
@@ -39,165 +163,126 @@
                />
             </div>
          </div>
+      </template>
+
+      <template v-if="selectedItem && selected" #right-header>
+         <KPageHeader
+            size="sm"
+            :title="selectedBlock?.label ?? String(selectedItem.type)"
+            :description="selectedSummary || selectedPosition"
+            :icon="cmsIcon(selectedBlock?.icon ?? 'rectangle-stack')"
+            :breadcrumbs="breadcrumbs"
+            breadcrumbs-ancestors
+            :level="2"
+            truncate
+         >
+            <template v-if="isHiddenBlock(selectedItem)" #badge>
+               <KBadge size="sm" label="Hidden" />
+            </template>
+            <template #actions>
+               <KDropdownMenu :items="blockMenu(selected)" placement="bottom-end">
+                  <KButton
+                     :icon="cmsIcon('ellipsis-horizontal')"
+                     size="sm"
+                     variant="ghost"
+                     tone="neutral"
+                     aria-label="Block actions"
+                  />
+               </KDropdownMenu>
+               <KTooltip text="Close" shortcut="escape">
+                  <KButton
+                     :icon="cmsIcon('x-mark')"
+                     size="sm"
+                     variant="ghost"
+                     tone="neutral"
+                     aria-label="Close the block"
+                     @click="select(null)"
+                  />
+               </KTooltip>
+            </template>
+         </KPageHeader>
+      </template>
+
+      <template #right>
+         <KForm
+            as="div"
+            :form="form"
+            :alerts="false"
+            :disabled="readonly"
+            class="cms-editor-inspector"
+         >
+            <div v-if="selectedItem && selected" class="cms-editor-panel-body">
+               <KFormAlerts />
+               <KFieldMessage
+                  v-if="form.errors[selectedName]"
+                  :message="form.errors[selectedName]"
+               />
+               <KFieldMessage v-else tone="warning" :message="form.warnings[selectedName]" />
+               <CmsFormSections
+                  v-if="selectedBlock"
+                  ref="sectionsRef"
+                  :key="selectedKey"
+                  :layout="selectedLayout"
+                  :shown="isBlockFieldShown"
+               >
+                  <template #field="{ fieldKey: blockKey }">
+                     <KFormField
+                        :name="`${selectedName}.${blockKey}`"
+                        :label="selectedBlock.fields[blockKey].label"
+                        :description="selectedBlock.fields[blockKey].description"
+                        :icon="cmsIcon(fieldIcon(selectedBlock.fields[blockKey]))"
+                        :required="selectedBlock.fields[blockKey].required"
+                        :highlight="highlighted === blockKey"
+                     >
+                        <CmsNestedBlockList
+                           v-if="selectedBlock.fields[blockKey].type === 'blocks'"
+                           :field="selectedBlock.fields[blockKey]"
+                           :items="selectedItem[blockKey]"
+                           :locale="locale"
+                           :invalid="(index) => childInvalid(blockKey, index)"
+                           :readonly="readonly"
+                           @select="(index) => selectChild(blockKey, index)"
+                           @insert="(anchor) => insertChild(blockKey, anchor)"
+                        />
+                        <CmsFieldInput
+                           v-else
+                           :model-value="selectedItem[blockKey]"
+                           :field="selectedBlock.fields[blockKey]"
+                           :locale="locale"
+                           @update:model-value="
+  (value) => updateBlockField(blockKey, value)
+"
+                        />
+                     </KFormField>
+                  </template>
+               </CmsFormSections>
+            </div>
 
-         <aside class="cms-editor-panel" aria-label="Inspector">
             <component
                :is="tabbed ? KTabs : 'div'"
+               v-else-if="content"
                v-bind="tabsBinding"
-               class="cms-editor-inspector"
+               class="cms-editor-tabs"
             >
                <template #[panelSlot]>
-                  <KForm ref="panel" as="div" :form="form" class="cms-editor-panel-body">
-                     <template v-if="activeTab === 'block'">
-                        <template v-if="selectedItem && selected !== null">
-                           <div class="cms-editor-block-head">
-                              <KButton
-                                 icon="arrow-left"
-                                 size="sm"
-                                 variant="ghost"
-                                 tone="neutral"
-                                 label="All blocks"
-                                 @click="select(null)"
-                              />
-                              <span class="cms-editor-block-position k-mono">
-                                 {{ selected + 1 }} / {{ blocks.length }}
-                              </span>
-                           </div>
-                           <div class="cms-editor-block-title">
-                              <KIcon :name="cmsIcon(selectedBlock?.icon ?? 'rectangle-stack')" />
-                              <span>{{ selectedBlock?.label ?? selectedItem.type }}</span>
-                              <KBadge v-if="isHiddenBlock(selectedItem)" size="sm" label="Hidden" />
-                           </div>
-                           <KStack direction="row" gap="sm" wrap class="cms-editor-block-actions">
-                              <KButton
-                                 icon="arrow-up"
-                                 size="sm"
-                                 variant="soft"
-                                 tone="neutral"
-                                 aria-label="Move up"
-                                 title="Move up"
-                                 :disabled="selected === 0"
-                                 @click="moveSelected(-1)"
-                              />
-                              <KButton
-                                 icon="arrow-down"
-                                 size="sm"
-                                 variant="soft"
-                                 tone="neutral"
-                                 aria-label="Move down"
-                                 title="Move down"
-                                 :disabled="selected === blocks.length - 1"
-                                 @click="moveSelected(1)"
-                              />
-                              <KButton
-                                 :icon="cmsIcon('document-duplicate')"
-                                 size="sm"
-                                 variant="soft"
-                                 tone="neutral"
-                                 label="Duplicate"
-                                 :disabled="!canAdd"
-                                 @click="duplicate(selected)"
-                              />
-                              <KButton
-                                 v-if="canHideBlock(selectedBlock)"
-                                 :icon="cmsIcon(isHiddenBlock(selectedItem) ? 'eye' : 'eye-slash')"
-                                 size="sm"
-                                 variant="soft"
-                                 tone="neutral"
-                                 :label="isHiddenBlock(selectedItem) ? 'Show' : 'Hide'"
-                                 @click="toggleHidden(selected)"
-                              />
-                              <KButton
-                                 icon="trash"
-                                 size="sm"
-                                 variant="soft"
-                                 tone="danger"
-                                 aria-label="Delete block"
-                                 title="Delete"
-                                 @click="remove(selected)"
-                              />
-                           </KStack>
-                           <KFieldMessage
-                              v-if="form.errors[`${fieldKey}.${selected}`]"
-                              :message="form.errors[`${fieldKey}.${selected}`]"
-                           />
-                           <KFieldMessage
-                              v-else
-                              tone="warning"
-                              :message="form.warnings[`${fieldKey}.${selected}`]"
-                           />
-                           <KStack gap="md" class="cms-editor-fields">
-                              <KFormField
-                                 v-for="(blockField, blockKey) in selectedBlock?.fields ?? {}"
-                                 :key="`${selected}-${blockKey}`"
-                                 :name="`${fieldKey}.${selected}.${blockKey}`"
-                                 :label="blockField.label"
-                                 :description="blockField.description"
-                                 :icon="cmsIcon(fieldIcon(blockField))"
-                                 :required="blockField.required"
-                              >
-                                 <CmsFieldInput
-                                    :model-value="selectedItem[blockKey]"
-                                    :field="blockField"
-                                    :locale="locale"
-                                    @update:model-value="
-  (value) => updateBlockField(String(blockKey), value)
-"
-                                 />
-                              </KFormField>
-                           </KStack>
-                        </template>
-
-                        <template v-else>
-                           <KFieldMessage
-                              v-if="form.errors[fieldKey]"
-                              :message="form.errors[fieldKey]"
-                           />
-                           <KFieldMessage
-                              v-else
-                              tone="warning"
-                              :message="form.warnings[fieldKey]"
-                           />
-                           <KStack v-if="blocks.length" gap="sm">
-                              <span class="k-label">{{ blocksField.label }}</span>
-                              <CmsBlockOutline
-                                 :items="blocks"
-                                 :field="blocksField"
-                                 :locale="locale"
-                                 :selected="selected"
-                                 @select="select"
-                                 @move="move"
-                              />
-                           </KStack>
-                           <KStack v-if="canAdd" gap="sm">
-                              <span class="k-label">Add a block</span>
-                              <CmsBlockPalette
-                                 :blocks="blocksField.blocks ?? {}"
-                                 @pick="(type) => insert(blocks.length, type)"
-                              />
-                           </KStack>
-                           <p v-else class="cms-field-hint">{{ maxReached }}</p>
-                        </template>
-                     </template>
-
-                     <KStack v-else gap="md" class="cms-editor-fields">
-                        <template v-for="section in sections" :key="section.id">
-                           <div v-if="section.title" class="cms-editor-section-title">
-                              <span class="k-label">{{ section.title }}</span>
-                              <span v-if="section.description" class="cms-field-hint">
-                                 {{ section.description }}
-                              </span>
-                           </div>
+                  <div class="cms-editor-panel-body">
+                     <KFormAlerts />
+                     <slot v-if="activeTab === 'content'" name="content-start" :locale="locale" />
+                     <CmsFormSections
+                        ref="sectionsRef"
+                        :key="activeTab"
+                        :layout="tabLayout"
+                        :shown="isShown"
+                     >
+                        <template #field="{ fieldKey: key }">
                            <KFormField
-                              v-for="key in section.keys"
-                              :key="key"
                               :name="key"
                               :label="fields[key].label"
                               :description="fields[key].description"
                               :icon="cmsIcon(fieldIcon(fields[key]))"
                               :required="fields[key].required"
-                              :data-cms-field="key"
-                              :class="{ 'cms-search-focus': highlighted === key }"
+                              :disabled="locked?.includes(key) || void 0"
+                              :highlight="highlighted === key"
                            >
                               <CmsFieldInput
                                  :model-value="state[key]"
@@ -206,73 +291,163 @@
                                  :slug-source="slugSource(fields[key])"
                                  :entry-name="entryName"
                                  :field-key="key"
-                                 @update:model-value="(value) => setValue(key, value)"
+                                 @update:model-value="(value) => setValue(key, value, key)"
                               />
                            </KFormField>
                         </template>
-                     </KStack>
-                  </KForm>
+                     </CmsFormSections>
+                  </div>
                </template>
             </component>
-         </aside>
-      </div>
 
-      <KModal v-model:open="paletteOpen" title="Insert a block">
-         <CmsBlockPalette :blocks="blocksField.blocks ?? {}" @pick="insertFromPalette" />
-      </KModal>
-   </div>
+            <div v-else class="cms-editor-panel-body is-empty">
+               <KFormAlerts />
+               <KEmptyState
+                  :icon="cmsIcon('cursor-arrow-rays')"
+                  title="No block selected"
+                  description="Pick a block in the list or in the preview to edit its fields."
+                  variant="plain"
+                  size="sm"
+               />
+            </div>
+         </KForm>
+      </template>
+   </KWorkspaceLayout>
+
+   <CmsBlockPickerPopover
+      v-model:open="paletteOpen"
+      :anchor="paletteAnchor"
+      :blocks="pickerField?.blocks ?? {}"
+      :disabled-reason="canAddTo(picker.list) ? void 0 : maxReachedIn(picker.list)"
+      :paste-count="pasteCount"
+      :presets="presets"
+      @pick="insertFromPalette"
+      @paste="pasteFromPalette"
+      @preset="insertPresetFromPalette"
+   />
+
+   <CmsPresetModal
+      v-model:open="presetOpen"
+      title="Save as preset"
+      submit-label="Save preset"
+      :hint="presetHint"
+      :save="savePreset"
+   />
 </template>
 
 <script setup>
 import {
+  blockAt,
+  blockFormLayout,
+  blockListAt,
+  blockListPath,
+  blockPathIndex,
+  blockSchemaPath,
+  blocksFieldAt,
   canAddBlock,
+  formatBlockPath,
+  insertBlocks,
+  isBlockListPath,
   isFieldVisible,
   isHiddenBlock,
   isTranslatableField,
-  slugSourceValue
+  moveBlock,
+  movedBlockPath,
+  parentBlockPath,
+  pathAfterInsert,
+  pathAfterMove,
+  pathAfterRemove,
+  remapInsertionPoint,
+  removeBlock,
+  resolveBlockPath,
+  slugSourceValue,
+  updateBlockAt,
+  updateBlockList
 } from "#nuxt-cms";
 import {
   Badge as KBadge,
+  Breadcrumbs as KBreadcrumbs,
   Button as KButton,
+  DropdownMenu as KDropdownMenu,
+  EmptyState as KEmptyState,
   FieldMessage as KFieldMessage,
   Form as KForm,
+  FormAlerts as KFormAlerts,
   FormField as KFormField,
-  Icon as KIcon,
-  Modal as KModal,
+  PageHeader as KPageHeader,
   SegmentedControl as KSegmentedControl,
-  Stack as KStack,
   Tabs as KTabs,
-  useForm
+  Tooltip as KTooltip,
+  WorkspaceLayout as KWorkspaceLayout,
+  useFieldHighlight,
+  useForm,
+  useTheme
 } from "@xleddyl/443-components-vue";
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "#imports";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  useTemplateRef,
+  watch
+} from "#imports";
 import cmsConfig from "#cms-config";
+import { CMS_EDITOR_PANES, CMS_PREVIEW_DEVICE_WIDTHS } from "../../../shared/editor-layout";
 import { buildEntrySchema, entryValidationWarnings } from "../../../shared/validation";
+import {
+  clampInlineText,
+  inlineFieldPath,
+  inlineFieldValue,
+  inlineTextLimit,
+  isInlineTextField,
+  lockedInlineFields,
+  normalizeInlineText
+} from "../../../shared/inline-text";
+import { copyNotice, pasteBlocks, pasteNotice, pasteableCount } from "../../../shared/clipboard";
+import { CMS_PRESET_ICON, presetInsertNotice } from "../../../shared/presets";
 import {
   DEFAULT_CMS_PREVIEW_PATH,
+  blockErrorPaths,
+  blockSummary,
   canHideBlock,
+  canMoveBlock,
+  clipboardActionApplies,
   collectMediaKeys,
-  duplicateBlock,
+  duplicateBlockAt,
+  editorIssueKeys,
+  editorShortcut,
   emptyBlock,
-  insertBlock,
+  firstBlockError,
   isTrustedPreviewEvent,
-  moveBlock,
   parseFrameMessage,
   previewEnvelope,
+  previewFieldConfig,
   previewMedia,
-  removeBlock,
-  selectionAfterMove,
-  selectionAfterRemove,
-  toggleBlockHidden
+  shortcutApplies,
+  toggleBlockHiddenAt
 } from "../../../shared/preview";
-import { useCmsConfirm } from "../../composables/cms-confirm";
-import { useCmsFieldFocus } from "../../composables/cms-field-focus";
+import { translationProgress } from "../../../shared/translations";
+import { useCmsClipboard } from "../../composables/cms-clipboard";
+import { useCmsHistory } from "../../composables/cms-history";
+import { useCmsPermissions } from "../../composables/cms-permissions";
+import { useCmsPresets } from "../../composables/cms-presets";
+import { useCmsPageQuery } from "../../composables/cms-route";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { entryFormLayout, useCmsSettingsState } from "../../composables/cms-settings";
+import {
+  clipboardTarget,
+  isInForeignOverlay,
+  onApplePlatform,
+  shortcutTarget
+} from "../../utils/keyboard";
 import { cmsIcon, fieldIcon } from "../../utils/ui";
-const SEO_KEYS = ["seoTitle", "seoDescription", "seoImage"];
+const SEO_KEYS = ["seoTitle", "seoDescription", "seoImage", "seoNoindex"];
 const deviceOptions = [
   { value: "desktop", label: "Desktop width", icon: cmsIcon("computer-desktop") },
-  { value: "mobile", label: "Mobile width", icon: cmsIcon("device-phone-mobile") }
+  { value: "tablet", label: "Tablet width, 768 px", icon: cmsIcon("device-tablet") },
+  { value: "mobile", label: "Mobile width, 390 px", icon: cmsIcon("device-phone-mobile") }
 ];
 const props = defineProps({
   entryName: { type: String, required: true },
@@ -280,71 +455,148 @@ const props = defineProps({
   fields: { type: Object, required: true },
   title: { type: String, required: true },
   content: { type: Boolean, required: false },
-  focus: { type: [Object, null], required: false }
+  focus: { type: [Object, null], required: false },
+  locked: { type: Array, required: false },
+  readonly: { type: Boolean, required: false },
+  tabQuery: { type: String, required: false },
+  trail: { type: Array, required: false }
 });
 const state = defineModel("state", { type: Object, ...{ required: true } });
+const emit = defineEmits(["save"]);
 const runtime = useCmsRuntime();
 const { i18n } = runtime;
 const previewPath = runtime.previewPath ?? DEFAULT_CMS_PREVIEW_PATH;
-const confirmAction = useCmsConfirm();
 const settings = useCmsSettingsState();
+const workspace = useTemplateRef("workspace");
 const locale = ref(i18n.defaultLocale);
 const device = ref("desktop");
-const selected = ref(null);
+const pane = ref("main");
+const inspectorCollapsed = ref(false);
+const selected = shallowRef(null);
+const canvasHover = shallowRef(null);
+const canvasWidth = ref(null);
 const paletteOpen = ref(false);
-const paletteIndex = ref(0);
+const picker = shallowRef({
+  list: [props.fieldKey],
+  index: 0
+});
+const paletteAnchor = shallowRef(null);
 const frame = ref(null);
+const frameBox = ref(null);
 const library = shallowRef(/* @__PURE__ */ new Map());
+const deviceWidth = computed(() => CMS_PREVIEW_DEVICE_WIDTHS[device.value]);
 const blocksField = computed(() => props.fields[props.fieldKey]);
 const blocks = computed(() => {
   const value = state.value[props.fieldKey];
   return Array.isArray(value) ? value : [];
 });
-const canAdd = computed(() => canAddBlock(blocksField.value, blocks.value.length));
-const maxReached = computed(() => {
-  const max = blocksField.value.max ?? 0;
+function inField(path) {
+  return !!path && path[0] === props.fieldKey;
+}
+function listField(list) {
+  return inField(list) ? blocksFieldAt(props.fields, state.value, list) : null;
+}
+function listLength(list) {
+  return blockListAt(state.value, list)?.length ?? 0;
+}
+function canAddTo(list) {
+  const field = listField(list);
+  return !!field && !props.readonly && canAddBlock(field, listLength(list));
+}
+function maxReachedIn(list) {
+  const max = listField(list)?.max ?? 0;
   return `This field holds at most ${max} ${max === 1 ? "block" : "blocks"}.`;
+}
+const canAdd = computed(() => canAddBlock(blocksField.value, blocks.value.length));
+const blockCount = computed(() => {
+  const max = blocksField.value.max;
+  return max === void 0 ? String(blocks.value.length) : `${blocks.value.length} / ${max}`;
 });
-const selectedItem = computed(
-  () => selected.value === null ? void 0 : blocks.value[selected.value]
-);
-const selectedBlock = computed(
-  () => selectedItem.value ? blocksField.value.blocks?.[String(selectedItem.value.type)] : void 0
+const maxReached = computed(() => maxReachedIn([props.fieldKey]));
+function locate(path) {
+  return inField(path) ? resolveBlockPath(props.fields, state.value, path) : null;
+}
+const selectedLocation = computed(() => locate(selected.value));
+const selectedItem = computed(() => selectedLocation.value?.item);
+const selectedBlock = computed(() => selectedLocation.value?.block);
+const selectedName = computed(() => selected.value ? formatBlockPath(selected.value) : "");
+const selectedSummary = computed(
+  () => selectedItem.value ? blockSummary(selectedBlock.value, selectedItem.value, locale.value, i18n.defaultLocale) : ""
 );
+const selectedPosition = computed(() => {
+  const path = selected.value;
+  if (!path) return "";
+  return `Block ${blockPathIndex(path) + 1} of ${listLength(blockListPath(path))}`;
+});
+function blockLabelAt(path) {
+  const location = locate(path);
+  return location?.block?.label ?? String(location?.item.type ?? "");
+}
+const breadcrumbs = computed(() => {
+  const path = selected.value;
+  if (!path) return [];
+  const items = [];
+  for (let end = 2; end < path.length; end += 2) {
+    const ancestor = path.slice(0, end);
+    items.push({ label: blockLabelAt(ancestor), onClick: () => selectFromTree(ancestor) });
+  }
+  return items;
+});
+const seoKeys = computed(() => SEO_KEYS.filter((key) => Object.hasOwn(props.fields, key)));
 const tabList = computed(() => {
-  if (!props.content) return [{ id: "block", label: "Block" }];
-  const tabs = [
-    { id: "content", label: "Content" },
-    { id: "block", label: "Block" }
-  ];
+  const tabs = [{ id: "content", label: "Content" }];
   if (seoKeys.value.length) tabs.push({ id: "seo", label: "SEO" });
   return tabs;
 });
-const activeTab = ref(props.content ? "content" : "block");
+const localTab = ref("content");
+const routeTab = props.tabQuery ? useCmsPageQuery(props.tabQuery) : null;
+const activeTab = computed({
+  get: () => {
+    const wanted = routeTab ? routeTab.value : localTab.value;
+    return tabList.value.some((tab) => tab.id === wanted) ? wanted : "content";
+  },
+  set: (value) => {
+    if (!routeTab) localTab.value = value;
+    else routeTab.value = value === "content" ? "" : value;
+  }
+});
 const tabbed = computed(() => tabList.value.length > 1);
 const panelSlot = computed(() => tabbed.value ? "panel" : "default");
+function errorBadge(count) {
+  return {
+    badge: count || void 0,
+    badgeTone: "danger",
+    badgeLabel: count ? `${count} ${count === 1 ? "error" : "errors"}` : void 0
+  };
+}
 const tabsBinding = computed(
   () => tabbed.value ? {
-    items: tabList.value.map((tab) => {
-      const errorCount = tabErrorCount(tab.id);
-      return {
-        value: tab.id,
-        label: tab.label,
-        badge: errorCount || void 0,
-        badgeTone: "danger",
-        badgeLabel: errorCount ? `${errorCount} ${errorCount === 1 ? "error" : "errors"}` : void 0
-      };
-    }),
+    items: tabList.value.map((tab) => ({
+      value: tab.id,
+      label: tab.label,
+      ...errorBadge(tabErrorCount(tab.id))
+    })),
+    label: "Entry fields",
     modelValue: activeTab.value,
     panelFocusable: false,
     stretch: true,
     inset: true,
+    fill: true,
     "onUpdate:modelValue": (value) => {
-      activeTab.value = String(value ?? "");
+      activeTab.value = value === "seo" ? "seo" : "content";
     }
   } : {}
 );
-const seoKeys = computed(() => SEO_KEYS.filter((key) => Object.hasOwn(props.fields, key)));
+const leftPane = computed(() => ({
+  label: "Blocks",
+  ...CMS_EDITOR_PANES.left,
+  ...errorBadge(topLevelErrorCount.value + (blocksFieldError.value ? 1 : 0))
+}));
+const rightPane = computed(() => ({
+  label: "Fields",
+  ...CMS_EDITOR_PANES.right,
+  ...errorBadge(tabErrorCount("content") + tabErrorCount("seo"))
+}));
 const contentFields = computed(
   () => Object.fromEntries(
     Object.entries(props.fields).filter(
@@ -352,85 +604,481 @@ const contentFields = computed(
     )
   )
 );
-const sections = computed(() => {
-  if (activeTab.value === "seo")
-    return [{ id: "seo", title: void 0, description: void 0, keys: seoKeys.value }];
-  const layout = entryFormLayout(props.entryName, settings.value, contentFields.value);
-  return layout.main.map((section, index) => ({
-    id: `${index}-${section.title ?? ""}`,
-    title: section.title,
-    description: section.description,
-    keys: section.rows.flat().filter((key) => {
-      const field = props.fields[key];
-      return !!field && isFieldVisible(field, state.value);
-    })
-  })).filter((section) => section.keys.length);
-});
-const localeFilled = computed(() => {
-  const title = props.content ? state.value.title : null;
-  return title && typeof title === "object" ? title : null;
-});
-function setValue(key, value) {
-  state.value = { ...state.value, [key]: value };
+const tabLayout = computed(
+  () => activeTab.value === "seo" ? { main: [{ rows: seoKeys.value.map((key) => [key]) }] } : entryFormLayout(props.entryName, settings.value, contentFields.value)
+);
+function isShown(key) {
+  const field = props.fields[key];
+  return !!field && isFieldVisible(field, state.value, props.fields);
+}
+function isBlockFieldShown(key) {
+  const fields = selectedBlock.value?.fields ?? {};
+  const field = fields[key];
+  return !!field && isFieldVisible(field, selectedItem.value, fields);
+}
+const selectedKey = computed(
+  () => selected.value ? `${selectedName.value}-${String(selectedItem.value?.type)}` : ""
+);
+const selectedLayout = computed(
+  () => selectedBlock.value ? blockFormLayout(selectedBlock.value) : { main: [] }
+);
+const sectionsRef = ref(null);
+function expandSection(key) {
+  void nextTick(() => sectionsRef.value?.reveal(key));
+}
+function revealInPanel(key) {
+  void nextTick(() => {
+    sectionsRef.value?.reveal(key);
+    highlightField(key);
+  });
+}
+const translations = computed(() => translationProgress(props.fields, state.value, i18n));
+let ownBlocks = state.value[props.fieldKey];
+const pendingPastes = /* @__PURE__ */ new Set();
+function setValue(key, value, coalesce, hold = false) {
+  if (props.readonly) return;
+  change(coalesce, hold);
+  const next = { ...state.value, [key]: value };
+  ownBlocks = next[props.fieldKey];
+  state.value = next;
+}
+function commitValues(next, coalesce, hold = false) {
+  if (props.readonly || next === state.value) return false;
+  change(coalesce, hold);
+  ownBlocks = next[props.fieldKey];
+  state.value = next;
+  return true;
+}
+function dropInsertionPoints() {
+  paletteOpen.value = false;
+  picker.value = { list: [props.fieldKey], index: 0 };
+  pendingPastes.clear();
 }
-function setBlocks(list) {
-  setValue(props.fieldKey, list.length ? list : null);
+function remapPaths(remap) {
+  if (selected.value) selected.value = remap(selected.value);
+  canvasHover.value = null;
+  const target = remapInsertionPoint(picker.value, remap);
+  if (target) picker.value = target;
+  else {
+    paletteOpen.value = false;
+    picker.value = { list: [props.fieldKey], index: 0 };
+  }
+  for (const point of [...pendingPastes]) {
+    pendingPastes.delete(point);
+    const next = remapInsertionPoint(point, remap);
+    if (next) pendingPastes.add(Object.assign(point, next));
+  }
 }
 function slugSource(field) {
   if (!field.from) return void 0;
   return slugSourceValue(props.fields[field.from], state.value[field.from], i18n.defaultLocale);
 }
-function select(index) {
-  selected.value = index;
-  if (selected.value !== null) activeTab.value = "block";
+function select(path) {
+  selected.value = inField(path) ? path : null;
+}
+function isCompact() {
+  return !!workspace.value?.compact;
+}
+function showPanel(name) {
+  workspace.value?.reveal(name);
+}
+function selectFromTree(path) {
+  select(locate(path) ? path : null);
+  if (selected.value) post({ type: "reveal", path: selected.value });
+  if (isCompact()) pane.value = "right";
 }
-function blockConfigAt(index) {
-  return blocksField.value.blocks?.[String(blocks.value[index]?.type)];
+function highlight(path) {
+  post({ type: "highlight", path });
 }
-function insert(index, type) {
-  const block = blocksField.value.blocks?.[type];
-  if (!block || !canAdd.value) return;
-  const at = Math.min(Math.max(index, 0), blocks.value.length);
-  setBlocks(insertBlock(blocks.value, at, emptyBlock(type, block)));
-  select(at);
+function insert(list, index, type) {
+  const field = listField(list);
+  const block = field?.blocks?.[type];
+  if (!block || !canAddTo(list)) return;
+  const at = Math.min(Math.max(index, 0), listLength(list));
+  if (!commitValues(insertBlocks(state.value, list, at, [emptyBlock(type, block)]))) return;
+  remapPaths((path) => pathAfterInsert(path, list, at));
+  select([...list, at]);
 }
 function insertFromPalette(type) {
   paletteOpen.value = false;
-  insert(paletteIndex.value, type);
+  insert(picker.value.list, picker.value.index, type);
 }
-function openPalette(index) {
-  if (!canAdd.value) return;
-  paletteIndex.value = index;
+function pasteFromPalette() {
+  paletteOpen.value = false;
+  void paste(picker.value.list, picker.value.index, null);
+}
+function openPalette(list, index, anchor = null) {
+  if (props.readonly || !canAddTo(list)) return;
+  picker.value = { list, index };
+  presetList.value = list;
+  paletteAnchor.value = anchor ?? canvasAnchor([...list, index]) ?? focusedElement() ?? frame.value;
   paletteOpen.value = true;
 }
-function move(from, to) {
-  if (to < 0 || to >= blocks.value.length || from === to) return;
-  setBlocks(moveBlock(blocks.value, from, to));
-  selected.value = selectionAfterMove(selected.value, from, to);
+const pickerField = computed(() => listField(picker.value.list));
+function insertButton(path) {
+  let element = null;
+  try {
+    element = frame.value?.contentDocument?.querySelector(
+      `[data-cms-insert="${formatBlockPath(path)}"]`
+    ) ?? null;
+  } catch {
+    return null;
+  }
+  return element?.getClientRects().length ? element : null;
+}
+function canvasAnchor(path) {
+  const element = insertButton(path);
+  const host = frame.value;
+  if (!element || !host) return null;
+  let last = new DOMRect();
+  return {
+    getBoundingClientRect() {
+      if (!element.isConnected || !host.isConnected) return last;
+      const box = host.getBoundingClientRect();
+      const rect = element.getBoundingClientRect();
+      last = new DOMRect(
+        box.left + host.clientLeft + rect.left,
+        box.top + host.clientTop + rect.top,
+        rect.width,
+        rect.height
+      );
+      return last;
+    }
+  };
+}
+function focusedElement() {
+  const element = document.activeElement;
+  return element instanceof HTMLElement && element !== document.body ? element : null;
+}
+function move(from, toList, toIndex) {
+  if (!inField(from) || !inField(toList) || !isBlockListPath(toList)) return false;
+  if (!canMoveBlock(props.fields, state.value, from, toList)) return false;
+  if (!commitValues(moveBlock(state.value, from, toList, toIndex))) return false;
+  remapPaths((path) => pathAfterMove(path, from, toList, toIndex));
+  return true;
+}
+function moveBy(path, delta) {
+  const index = blockPathIndex(path);
+  const target = index + delta;
+  if (target < 0 || target >= listLength(blockListPath(path))) return;
+  move(path, blockListPath(path), delta > 0 ? target + 1 : target);
+}
+function duplicate(path) {
+  const list = blockListPath(path);
+  if (!canAddTo(list) || !commitValues(duplicateBlockAt(state.value, path))) return;
+  const at = blockPathIndex(path) + 1;
+  remapPaths((current) => pathAfterInsert(current, list, at));
+  select([...list, at]);
+}
+function toggleHidden(path) {
+  commitValues(toggleBlockHiddenAt(state.value, path, locate(path)?.block));
+}
+function remove(path) {
+  if (!locate(path) || !commitValues(removeBlock(state.value, path))) return;
+  remapPaths((current) => pathAfterRemove(current, path));
+}
+function selectChild(key, index) {
+  if (selected.value) selectFromTree([...selected.value, key, index]);
+}
+function insertChild(key, anchor) {
+  if (!selected.value) return;
+  const list = [...selected.value, key];
+  openPalette(list, listLength(list), anchor);
+}
+function childInvalid(key, index) {
+  return blockErrors.value.has(`${selectedName.value}.${key}.${index}`);
+}
+const clipboard = useCmsClipboard();
+const PASTE_CANCELLED = {
+  title: "Nothing pasted",
+  description: "The blocks changed while the clipboard was read. Paste again.",
+  color: "error"
+};
+const pasteCount = computed(
+  () => pickerField.value ? pasteableCount(clipboard.items.value, pickerField.value) : 0
+);
+function copy(path, event) {
+  const item = locate(path)?.item;
+  if (!item) return;
+  clipboard.copy([item], event);
+  clipboard.notify(copyNotice(1));
+}
+function cut(path, event) {
+  const item = locate(path)?.item;
+  if (!item || props.readonly) return;
+  clipboard.copy([item], event);
+  remove(path);
+  clipboard.notify(copyNotice(1, true));
+}
+function insertItems(list, index, items) {
+  const field = listField(list);
+  if (!field) return null;
+  const current = blockListAt(state.value, list) ?? [];
+  const result = pasteBlocks(current, index, items, field, i18n);
+  if (result.pasted && commitValues(updateBlockList(state.value, list, () => result.list))) {
+    remapPaths((path) => pathAfterInsert(path, list, result.at, result.pasted));
+    select([...list, result.at]);
+    if (selected.value) post({ type: "reveal", path: selected.value });
+  }
+  return result;
+}
+async function paste(list, index, text) {
+  if (props.readonly || !listField(list)) return;
+  const point = { list, index };
+  pendingPastes.add(point);
+  let cancelled = false;
+  let items;
+  try {
+    items = await clipboard.read(text);
+  } finally {
+    cancelled = !pendingPastes.delete(point);
+  }
+  const field = listField(point.list);
+  if (cancelled || !field) {
+    clipboard.notify(PASTE_CANCELLED);
+    return;
+  }
+  const result = items ? insertItems(point.list, point.index, items) : null;
+  clipboard.notify(pasteNotice(result, field));
+}
+const { can } = useCmsPermissions();
+const presetsAllowed = computed(() => !props.readonly && can(`${props.entryName}.update`));
+const presetList = shallowRef([props.fieldKey]);
+const presetFieldKey = computed(() => {
+  const list = presetList.value;
+  return inField(list) ? blockSchemaPath(props.fields, state.value, list)?.join(".") : void 0;
+});
+const {
+  presets,
+  load: loadPresets,
+  create: createPreset
+} = useCmsPresets(
+  () => presetsAllowed.value ? props.entryName : void 0,
+  () => presetFieldKey.value
+);
+const presetOpen = ref(false);
+const presetItems = ref([]);
+const presetField = shallowRef(null);
+const presetHint = computed(() => {
+  const types = presetItems.value.map(
+    (item) => presetField.value?.blocks?.[String(item.type)]?.label ?? String(item.type)
+  );
+  return `A copy of ${types.join(
+    ", "
+  )}. Insert it from the block picker of any field with the same blocks.`;
+});
+function openPresetSave(path) {
+  const location = locate(path);
+  if (!location) return;
+  presetList.value = blockListPath(path);
+  presetField.value = location.field;
+  presetItems.value = [JSON.parse(JSON.stringify(location.item))];
+  presetOpen.value = true;
+}
+async function savePreset(details) {
+  const preset = await createPreset({ ...details, items: presetItems.value });
+  clipboard.notify({ title: `Preset "${preset.name}" saved`, color: "success" });
 }
-function moveSelected(delta) {
-  if (selected.value === null) return;
-  move(selected.value, selected.value + delta);
+function insertPresetFromPalette(id) {
+  paletteOpen.value = false;
+  const preset = presets.value.find((candidate) => candidate.id === id);
+  const { list, index } = picker.value;
+  const field = listField(list);
+  if (!preset || !field || !canAddTo(list)) return;
+  const result = insertItems(list, index, preset.items);
+  if (result) clipboard.notify(presetInsertNotice(result, field, preset));
+}
+watch(paletteOpen, (open) => {
+  if (open) void loadPresets();
+});
+function selectedPath() {
+  return selected.value && locate(selected.value) ? selected.value : null;
+}
+function after(path) {
+  return path ? [blockListPath(path), blockPathIndex(path) + 1] : [[props.fieldKey], blocks.value.length];
+}
+function onClipboard(event) {
+  if (event.defaultPrevented || paletteOpen.value) return;
+  if (isInForeignOverlay(event.target, workspaceElement())) return;
+  const action = event.type;
+  if (props.readonly && action !== "copy") return;
+  const path = selectedPath();
+  if (!clipboardActionApplies(action, clipboardTarget(event, path !== null))) return;
+  if (action === "paste") {
+    event.preventDefault();
+    void paste(...after(path), event.clipboardData?.getData("text/plain") ?? null);
+  } else if (path) {
+    if (action === "copy") copy(path, event);
+    else cut(path, event);
+  }
 }
-function duplicate(index) {
-  if (!canAdd.value) return;
-  setBlocks(duplicateBlock(blocks.value, index));
-  select(index + 1);
+function copyMenuItem(path) {
+  return {
+    label: "Copy",
+    icon: cmsIcon("clipboard-document"),
+    shortcut: "mod+c",
+    onSelect: () => copy(path)
+  };
 }
-function toggleHidden(index) {
-  setBlocks(toggleBlockHidden(blocks.value, index, blockConfigAt(index)));
+function nestedLists(path) {
+  const location = locate(path);
+  const fields = location?.block?.fields ?? {};
+  return Object.entries(fields).filter(
+    ([, field]) => field.type === "blocks" && isFieldVisible(field, location.item, fields)
+  ).map(([key, field]) => ({ key, label: field.label, list: [...path, key] }));
 }
-async function remove(index) {
-  const label = blockConfigAt(index)?.label ?? "block";
-  if (!await confirmAction(`Delete this ${label.toLowerCase()} block?`)) return;
-  setBlocks(removeBlock(blocks.value, index));
-  selected.value = selectionAfterRemove(selected.value, index);
+function blockMenu(path) {
+  const location = locate(path);
+  if (!location) return [];
+  if (props.readonly) return [[copyMenuItem(path)]];
+  const list = blockListPath(path);
+  const index = blockPathIndex(path);
+  const full = canAddTo(list) ? void 0 : maxReachedIn(list);
+  const hidden = isHiddenBlock(location.item);
+  const length = listLength(list);
+  return [
+    [
+      {
+        label: "Add a block before",
+        icon: cmsIcon("bars-arrow-up"),
+        disabled: !!full,
+        disabledReason: full,
+        onSelect: () => openPalette(list, index)
+      },
+      {
+        label: "Add a block after",
+        icon: cmsIcon("bars-arrow-down"),
+        disabled: !!full,
+        disabledReason: full,
+        onSelect: () => openPalette(list, index + 1)
+      },
+      ...nestedLists(path).map((nested) => {
+        const reason = canAddTo(nested.list) ? void 0 : maxReachedIn(nested.list);
+        return {
+          label: `Add to ${nested.label}`,
+          icon: cmsIcon("plus"),
+          disabled: !!reason,
+          disabledReason: reason,
+          onSelect: () => openPalette(nested.list, listLength(nested.list))
+        };
+      })
+    ],
+    [
+      {
+        label: "Move up",
+        icon: cmsIcon("arrow-up"),
+        disabled: index === 0,
+        onSelect: () => moveBy(path, -1)
+      },
+      {
+        label: "Move down",
+        icon: cmsIcon("arrow-down"),
+        disabled: index === length - 1,
+        onSelect: () => moveBy(path, 1)
+      },
+      {
+        label: "Duplicate",
+        icon: cmsIcon("document-duplicate"),
+        disabled: !!full,
+        disabledReason: full,
+        onSelect: () => duplicate(path)
+      },
+      ...canHideBlock(location.block) ? [
+        {
+          label: hidden ? "Show" : "Hide",
+          icon: cmsIcon(hidden ? "eye" : "eye-slash"),
+          onSelect: () => toggleHidden(path)
+        }
+      ] : []
+    ],
+    [
+      copyMenuItem(path),
+      {
+        label: "Cut",
+        icon: cmsIcon("scissors"),
+        shortcut: "mod+x",
+        onSelect: () => cut(path)
+      },
+      {
+        label: "Paste after",
+        icon: cmsIcon("clipboard"),
+        shortcut: "mod+v",
+        disabled: !!full,
+        disabledReason: full,
+        onSelect: () => void paste(list, index + 1)
+      },
+      ...presetsAllowed.value ? [
+        {
+          label: "Save as preset",
+          icon: cmsIcon(CMS_PRESET_ICON),
+          onSelect: () => openPresetSave(path)
+        }
+      ] : []
+    ],
+    [
+      {
+        label: "Delete",
+        icon: cmsIcon("trash"),
+        tone: "danger",
+        onSelect: () => remove(path)
+      }
+    ]
+  ];
 }
 function updateBlockField(key, value) {
-  const index = selected.value;
-  const current = index === null ? void 0 : blocks.value[index];
-  if (index === null || !current) return;
-  setBlocks(blocks.value.map((item, i) => i === index ? { ...current, [key]: value } : item));
+  const path = selectedPath();
+  if (!path) return;
+  commitValues(
+    updateBlockAt(state.value, path, (item) => ({ ...item, [key]: value })),
+    `${formatBlockPath(path)}.${key}`
+  );
+}
+const { canUndo, canRedo, change, release, undo, redo } = useCmsHistory({
+  state: () => state.value,
+  selected: () => selected.value,
+  restore: (values, path) => {
+    state.value = values;
+    select(path);
+  },
+  omit: props.content ? ["status"] : []
+});
+function runShortcut(event) {
+  if (event.defaultPrevented || event.isComposing || paletteOpen.value) return;
+  if (isInForeignOverlay(event.target, workspaceElement())) return;
+  const action = editorShortcut(event, onApplePlatform());
+  const path = selectedPath();
+  if (!action || !shortcutApplies(action, shortcutTarget(event, path !== null))) return;
+  if (props.readonly && action !== "deselect") return;
+  event.preventDefault();
+  if (action === "undo") undo();
+  else if (action === "redo") redo();
+  else if (action === "save") emit("save");
+  else if (path) runBlockShortcut(action, path);
+}
+function runBlockShortcut(action, path) {
+  const list = blockListPath(path);
+  const index = blockPathIndex(path);
+  switch (action) {
+    case "remove":
+      remove(path);
+      break;
+    case "duplicate":
+      duplicate(path);
+      break;
+    case "move-up":
+    case "move-down":
+      moveBy(path, action === "move-up" ? -1 : 1);
+      break;
+    case "insert-after":
+      openPalette(list, index + 1);
+      break;
+    case "insert-before":
+      openPalette(list, index);
+      break;
+    case "deselect":
+      select(parentBlockPath(path));
+      break;
+  }
 }
 const media = computed(
   () => Object.fromEntries(
@@ -440,6 +1088,8 @@ const media = computed(
     ])
   )
 );
+const blocksFields = computed(() => ({ [props.fieldKey]: blocksField.value }));
+const { resolved: adminTheme } = useTheme();
 const previewState = computed(() => ({
   entry: props.entryName,
   field: props.fieldKey,
@@ -447,38 +1097,97 @@ const previewState = computed(() => ({
   blocks: blocks.value,
   item: props.content ? state.value : null,
   media: media.value,
-  selected: selected.value
+  selected: selected.value,
+  editable: !props.readonly,
+  theme: adminTheme.value,
+  lockedFields: lockedInlineFields({
+    fields: props.content ? props.fields : null,
+    values: state.value,
+    blocksFields: blocksFields.value,
+    blocksValues: state.value,
+    locked: props.locked
+  })
 }));
-function sendState() {
+const READONLY_FRAME_MESSAGES = /* @__PURE__ */ new Set(["ready", "select", "hover", "copy", "focus-field"]);
+function post(message) {
   const target = frame.value?.contentWindow;
   if (!target) return;
-  const snapshot = JSON.parse(JSON.stringify(previewState.value));
-  target.postMessage(previewEnvelope({ type: "render", state: snapshot }), window.location.origin);
+  const plain = JSON.parse(JSON.stringify(message));
+  target.postMessage(previewEnvelope(plain), window.location.origin);
+}
+function sendState() {
+  post({ type: "render", state: previewState.value });
 }
 watch(previewState, sendState, { deep: true });
+function reloadPreview() {
+  canvasHover.value = null;
+  frame.value?.contentWindow?.location.reload();
+}
 function onFrameMessage(message) {
+  if (props.readonly && !READONLY_FRAME_MESSAGES.has(message.type)) return;
   switch (message.type) {
     case "ready":
       sendState();
       break;
     case "select":
-      select(message.index);
+      paletteOpen.value = false;
+      select(locate(message.path) ? message.path : null);
+      break;
+    case "hover":
+      canvasHover.value = inField(message.path) ? message.path : null;
       break;
     case "insert":
-      openPalette(message.index);
+      if (inField(message.path))
+        openPalette(
+          blockListPath(message.path),
+          blockPathIndex(message.path),
+          insertButton(message.path)
+        );
       break;
-    case "move":
-      move(message.from, message.to);
-      select(message.to);
+    case "move": {
+      const list = blockListPath(message.to);
+      const index = blockPathIndex(message.to);
+      const target = movedBlockPath(message.from, list, index);
+      if (move(message.from, list, index) && target) select(target);
       break;
+    }
     case "duplicate":
-      duplicate(message.index);
+      if (inField(message.path)) duplicate(message.path);
       break;
     case "toggle-hidden":
-      toggleHidden(message.index);
+      if (inField(message.path)) toggleHidden(message.path);
       break;
     case "remove":
-      void remove(message.index);
+      if (inField(message.path)) remove(message.path);
+      break;
+    case "copy":
+      if (inField(message.path)) copy(message.path);
+      break;
+    case "cut":
+      if (inField(message.path)) cut(message.path);
+      break;
+    case "paste":
+      if (inField(message.path))
+        void paste(
+          blockListPath(message.path),
+          blockPathIndex(message.path),
+          message.text ?? null
+        );
+      break;
+    case "focus-field":
+      focusField(message.path, message.key);
+      break;
+    case "field-input":
+      inlineInput(message);
+      break;
+    case "undo":
+      undo();
+      break;
+    case "redo":
+      redo();
+      break;
+    case "save":
+      emit("save");
       break;
   }
 }
@@ -495,45 +1204,135 @@ async function loadLibrary() {
     library.value = /* @__PURE__ */ new Map();
   }
 }
-const panel = ref(null);
-const { highlighted, reveal } = useCmsFieldFocus();
+const { highlighted, highlight: highlightField } = useFieldHighlight();
+function workspaceElement() {
+  const element = workspace.value?.$el;
+  return element instanceof Element ? element : null;
+}
+function revealBlock(path) {
+  select(path);
+  if (!selected.value) {
+    showPanel("left");
+    return;
+  }
+  showPanel("right");
+  post({ type: "reveal", path: selected.value });
+}
+function revealField(key) {
+  select(null);
+  activeTab.value = tabOfKey(key) === "seo" ? "seo" : "content";
+  showPanel("right");
+}
+function fieldAt(path, key) {
+  if (path && !inField(path)) return void 0;
+  return previewFieldConfig(
+    { path, key },
+    blocksFields.value,
+    state.value,
+    props.content ? props.fields : null,
+    props.fieldKey
+  );
+}
+function focusField(path, key) {
+  if (!fieldAt(path, key)) return;
+  select(path);
+  if (!path) activeTab.value = tabOfKey(key) === "seo" ? "seo" : "content";
+  if (!isCompact()) inspectorCollapsed.value = false;
+  revealInPanel(key);
+}
+function inlineInput(message) {
+  if (!applyInlineInput(message)) sendState();
+}
+function applyInlineInput(message) {
+  const { path, key, locale: code } = message;
+  const declared = fieldAt(path, key);
+  if (props.readonly || !isInlineTextField(declared)) return false;
+  if (previewState.value.lockedFields.includes(inlineFieldPath(path, key))) return false;
+  const localized = isTranslatableField(declared) && i18n.locales.length > 0;
+  if (localized && !i18n.locales.includes(code)) return false;
+  const field = localized ? declared : { ...declared, translatable: false };
+  const item = path ? blockAt(state.value, path) : null;
+  if (path && !item) return false;
+  const text = clampInlineText(
+    normalizeInlineText(message.value, !!field.textarea),
+    inlineTextLimit(field)
+  );
+  const value = inlineFieldValue(
+    field,
+    item ? item[key] : state.value[key],
+    code,
+    i18n.defaultLocale,
+    text
+  );
+  const coalesce = `inline:${path ? formatBlockPath(path) : ""}.${key}`;
+  if (!path) setValue(key, value, coalesce, true);
+  else
+    commitValues(
+      updateBlockAt(state.value, path, (current) => ({ ...current, [key]: value })),
+      coalesce,
+      true
+    );
+  if (message.commit) void nextTick(release);
+  return true;
+}
 function applyFocus(focus) {
   if (focus.locale && i18n.locales.includes(focus.locale)) locale.value = focus.locale;
   const key = focus.field;
   if (!key || !Object.hasOwn(props.fields, key)) return;
   if (key === props.fieldKey) {
-    activeTab.value = "block";
-    if (focus.block != null && focus.block < blocks.value.length) select(focus.block);
+    const path = focus.blockPath ?? (focus.block != null ? [key, focus.block] : null);
+    revealBlock(locate(path) ? path : null);
     return;
   }
-  activeTab.value = tabOfKey(key);
-  reveal(() => panel.value?.el, key);
+  revealField(key);
+  revealInPanel(key);
 }
+let frameObserver = null;
 onMounted(() => {
   window.addEventListener("message", onMessage);
+  document.addEventListener("keydown", runShortcut);
+  document.addEventListener("copy", onClipboard);
+  document.addEventListener("cut", onClipboard);
+  document.addEventListener("paste", onClipboard);
+  frameObserver = new ResizeObserver(([entry]) => {
+    canvasWidth.value = entry ? Math.round(entry.contentRect.width) : null;
+  });
+  watch(
+    frameBox,
+    (element, previous) => {
+      if (previous) frameObserver?.unobserve(previous);
+      if (element) frameObserver?.observe(element);
+    },
+    { immediate: true }
+  );
   void loadLibrary();
+  void loadPresets();
   if (props.focus) applyFocus(props.focus);
 });
 onBeforeUnmount(() => {
   window.removeEventListener("message", onMessage);
+  document.removeEventListener("keydown", runShortcut);
+  document.removeEventListener("copy", onClipboard);
+  document.removeEventListener("cut", onClipboard);
+  document.removeEventListener("paste", onClipboard);
+  frameObserver?.disconnect();
 });
 const validateHook = computed(
   () => props.content ? cmsConfig[props.entryName]?.validate : void 0
 );
 const schema = computed(
   () => buildEntrySchema(
-    { fields: props.fields, drafts: props.content, validate: validateHook.value },
+    {
+      fields: props.fields,
+      drafts: props.content,
+      validate: validateHook.value,
+      config: cmsConfig
+    },
     i18n
   )
 );
 function issueKey(path) {
-  const [key, index, blockKey] = path;
-  const keys = [String(key)];
-  if (String(key) === props.fieldKey && typeof index === "number")
-    keys.push(
-      blockKey === void 0 ? `${String(key)}.${index}` : `${String(key)}.${index}.${String(blockKey)}`
-    );
-  return keys;
+  return editorIssueKeys(props.fields, state.value, path, props.fieldKey);
 }
 const form = useForm({
   values: state,
@@ -541,8 +1340,15 @@ const form = useForm({
   warnings: (values) => entryValidationWarnings({ fields: props.fields, validate: validateHook.value }, values, i18n),
   issueKey
 });
+const blockErrors = computed(() => blockErrorPaths(form.errors, props.fieldKey));
+const topLevelErrorCount = computed(
+  () => [...blockErrors.value].filter((path) => path.split(".").length === 2).length
+);
+const blocksFieldError = computed(
+  () => blockErrors.value.size ? void 0 : form.errors[props.fieldKey]
+);
 function tabOfKey(key) {
-  if (key === props.fieldKey) return "block";
+  if (key === props.fieldKey) return "blocks";
   return SEO_KEYS.includes(key) ? "seo" : "content";
 }
 function tabErrorCount(tab) {
@@ -551,35 +1357,46 @@ function tabErrorCount(tab) {
   );
   return keys.size;
 }
-function firstError() {
+function revealFirstError() {
   const keys = Object.keys(form.errors).filter((key) => form.errors[key]);
   const name = Object.keys(props.fields).find(
-    (field) => keys.some((key) => key === field || key.startsWith(`${field}.`))
+    (field2) => keys.some((key) => key === field2 || key.startsWith(`${field2}.`))
   );
-  if (!name) return void 0;
-  const indexes = keys.filter((key) => key.startsWith(`${name}.`)).map((key) => Number(key.split(".")[1])).filter(Number.isInteger);
-  return { name, index: indexes.length ? Math.min(...indexes) : null };
+  if (!name) return;
+  const field = props.fields[name];
+  if (name === props.fieldKey) {
+    const first = firstBlockError(form.errors, props.fieldKey);
+    revealBlock(first?.path ?? null);
+    if (first?.key) revealInPanel(first.key);
+  } else if (field) {
+    revealField(name);
+    expandSection(name);
+    if (isTranslatableField(field)) locale.value = i18n.defaultLocale;
+  }
 }
 function validate() {
   form.submitCount.value++;
   if (form.validateSync()) return true;
-  const first = firstError();
-  if (!first) return false;
-  const field = props.fields[first.name];
-  if (first.name === props.fieldKey) {
-    select(first.index);
-    activeTab.value = "block";
-  } else if (field) {
-    activeTab.value = tabOfKey(first.name);
-    if (isTranslatableField(field)) locale.value = i18n.defaultLocale;
-  }
+  revealFirstError();
   return false;
 }
-watch(
-  () => blocks.value.length,
-  (length) => {
-    if (selected.value !== null && selected.value >= length) selected.value = null;
+function setIssues(issues) {
+  const fieldIssues = issues.filter((issue) => issue.path.length);
+  if (!fieldIssues.length) return;
+  form.setIssues(fieldIssues);
+  revealFirstError();
+}
+watch(state, (values) => {
+  if (values[props.fieldKey] !== ownBlocks) {
+    ownBlocks = values[props.fieldKey];
+    dropInsertionPoints();
   }
-);
-defineExpose({ validate, locale });
+  if (selected.value && !blockAt(values, selected.value)) selected.value = null;
+});
+function applyChange(values) {
+  if (props.readonly) return;
+  change();
+  state.value = values;
+}
+defineExpose({ validate, setIssues, applyChange, locale });
 </script>