@xleddyl/nuxt-cms 0.9.4 → 0.10.0

package/dist/runtime/app/pages/admin-login.vue

@@ -1,5 +1,5 @@
 <template>
-   <KRoot class="cms-scope cms-canvas" :theme="theme" preset="default">
+   <KRoot class="is-canvas" document :theme="theme" preset="default">
       <KAuthLogin
          :submit="login"
          :submit-error="loginError"

package/dist/runtime/app/pages/admin-logout.vue

@@ -1,5 +1,5 @@
 <template>
-   <KRoot class="cms-scope cms-canvas" :theme="theme" preset="default">
+   <KRoot class="is-canvas" document :theme="theme" preset="default">
       <KAuthLogout :logout="clear" :account="account" login-to="/cms/login">
          <template #brand>
             <CmsBrandMark size="lg" hide-text />

package/dist/runtime/app/pages/admin-media.vue

@@ -1,16 +1,16 @@
 <template>
-   <div class="cms-page">
+   <div class="k-page">
       <KPageHeader
          title="Media"
          :icon="cmsIcon('photo')"
          description="Images, videos and files used across your content."
       >
          <template #badge>
-            <KBadge :label="runtime.mediaStorage" size="sm" class="cms-code-badge" />
+            <KBadge :label="runtime.mediaStorage" size="sm" class="cms-code" />
          </template>
       </KPageHeader>
 
-      <CmsMediaGallery v-model:folder="folder" />
+      <CmsMediaGallery v-model:folder="folder" fill />
    </div>
 </template>
 

package/dist/runtime/app/pages/admin-preview.vue

@@ -1,14 +1,23 @@
 <template>
    <div class="cms-preview" :data-cms-preview="state ? 'ready' : 'waiting'">
       <template v-if="state && field">
-         <component :is="wrapper" v-if="wrapper && item" :item="item" :locale="state.locale">
-            <CmsBlocks :blocks="blocks" :entry="blockEntry" :field="state.field" annotate />
-            <div v-if="!visibleCount && canAdd" class="cms-preview-empty">
+         <component
+            :is="wrapper"
+            v-if="wrapper && rendered.item"
+            :item="rendered.item"
+            :locale="state.locale"
+         >
+            <CmsBlocks
+               :blocks="rendered.blocks"
+               :entry="blockEntry"
+               :field="state.field"
+               annotate
+            />
+            <div v-if="!visibleCount && canAdd" class="cms-preview-empty" v-bind="tokenRoot">
                <button
                   type="button"
                   class="cms-preview-empty-button"
-                  data-cms-preview-keep
-                  @click="post({ type: 'insert', index: state.blocks.length })"
+                  :data-cms-insert="`${state.field}.${state.blocks.length}`"
                >
                   <KIcon name="plus" />
                   <span>Add a block</span>
@@ -16,13 +25,17 @@
             </div>
          </component>
          <template v-else>
-            <CmsBlocks :blocks="blocks" :entry="blockEntry" :field="state.field" annotate />
-            <div v-if="!visibleCount && canAdd" class="cms-preview-empty">
+            <CmsBlocks
+               :blocks="rendered.blocks"
+               :entry="blockEntry"
+               :field="state.field"
+               annotate
+            />
+            <div v-if="!visibleCount && canAdd" class="cms-preview-empty" v-bind="tokenRoot">
                <button
                   type="button"
                   class="cms-preview-empty-button"
-                  data-cms-preview-keep
-                  @click="post({ type: 'insert', index: state.blocks.length })"
+                  :data-cms-insert="`${state.field}.${state.blocks.length}`"
                >
                   <KIcon name="plus" />
                   <span>Add a block</span>
@@ -30,21 +43,38 @@
             </div>
          </template>
          <PreviewOverlay
+            ref="overlay"
             :field="field"
-            :total="state.blocks.length"
+            :field-key="state.field"
+            :fields="item ? fields : null"
+            :blocks="blocks"
+            :item="item"
+            :locale="state.locale"
+            :editable="state.editable"
+            :locked-fields="state.lockedFields"
             :selected="state.selected"
+            :highlighted="highlighted"
             :version="version"
             @message="post"
+            @inline="inline = $event"
          />
       </template>
-      <p v-else-if="standalone" class="cms-preview-notice">
+      <p v-else-if="standalone" class="cms-preview-notice" v-bind="tokenRoot">
          This page shows the live preview of the visual editor. Open an item in the admin to use it.
       </p>
    </div>
 </template>
 
 <script setup>
-import { canAddBlock, entryFieldsFor, isHiddenBlock } from "#nuxt-cms";
+import {
+  canAddBlock,
+  contentItemPath,
+  entryFieldsFor,
+  isHiddenBlock,
+  isRoutedContent,
+  readLinkValue,
+  resolveCmsLink
+} from "#nuxt-cms";
 import {
   computed,
   definePageMeta,
@@ -52,9 +82,11 @@ import {
   onMounted,
   ref,
   shallowRef,
-  useHead
+  useHead,
+  watch
 } from "#imports";
 import { Icon as KIcon } from "@xleddyl/443-components-vue";
+import tokensHref from "@xleddyl/443-components-vue/tokens.css?url";
 import cmsConfig from "#cms-config";
 import { cmsPreviewComponents } from "#cms-blocks";
 import {
@@ -64,73 +96,129 @@ import {
   previewEnvelope,
   previewItem
 } from "../../shared/preview";
+import { applyInlineOverride } from "../../shared/inline-text";
+import { useCmsLinkTargets } from "../composables/cms-link-targets";
 import { useCmsRuntime } from "../composables/cms-runtime";
 import PreviewOverlay from "../preview/PreviewOverlay.vue";
+import {
+  cmsFieldMarking,
+  cmsPreviewEditable,
+  cmsPreviewTheme,
+  cmsTokenRoot
+} from "../preview/field-marker";
 definePageMeta({ middleware: "cms-auth" });
 const { i18n } = useCmsRuntime();
 const state = shallowRef(null);
 const version = ref(0);
+const highlighted = shallowRef(null);
+const overlay = ref(null);
 const standalone = ref(false);
+const inline = shallowRef(null);
 useHead({
   title: "Preview",
   meta: [{ name: "robots", content: "noindex, nofollow" }],
+  link: [{ rel: "stylesheet", href: tokensHref }],
   htmlAttrs: { lang: computed(() => state.value?.locale) }
 });
 const entry = computed(
   () => state.value ? cmsConfig[state.value.entry] : void 0
 );
+const tokenRoot = computed(() => cmsTokenRoot(cmsPreviewTheme.value));
 const blockEntry = computed(() => state.value?.entry);
 const fields = computed(() => entry.value ? entryFieldsFor(entry.value) : {});
 const field = computed(() => {
   const candidate = state.value ? fields.value[state.value.field] : void 0;
   return candidate?.type === "blocks" ? candidate : void 0;
 });
+const linkTargets = useCmsLinkTargets(cmsConfig);
+function resolveLink(value) {
+  const locale = state.value?.locale ?? i18n.defaultLocale;
+  const link = readLinkValue(value);
+  const target = link?.entry && link.id && !link.url ? link : null;
+  if (target) linkTargets.load(target.entry, target.id);
+  const live = target && linkTargets.state(target) === "live";
+  const row = live ? linkTargets.target(target.entry, target.id) : null;
+  return resolveCmsLink(cmsConfig, value, locale, i18n.defaultLocale, row);
+}
 const blocks = computed(
   () => state.value && field.value ? previewBlocks(
     field.value,
     state.value.blocks,
     state.value.locale,
     i18n.defaultLocale,
-    state.value.media
+    state.value.media,
+    resolveLink
   ) : []
 );
-const visibleCount = computed(() => blocks.value.filter((block) => !isHiddenBlock(block)).length);
+const visibleCount = computed(
+  () => rendered.value.blocks.filter((block) => !isHiddenBlock(block)).length
+);
 const canAdd = computed(
   () => !!state.value && !!field.value && canAddBlock(field.value, state.value.blocks.length)
 );
-const item = computed(
-  () => state.value?.item && entry.value?.kind === "content" ? previewItem(
+const item = computed(() => {
+  if (!state.value?.item || entry.value?.kind !== "content") return null;
+  const preview = previewItem(
     fields.value,
     state.value.item,
     state.value.locale,
     i18n.defaultLocale,
-    state.value.media
-  ) : null
-);
+    state.value.media,
+    resolveLink
+  );
+  if (!isRoutedContent(entry.value)) return preview;
+  return { ...preview, path: contentItemPath(entry.value, state.value.item, state.value.locale) };
+});
+const rendered = computed(() => {
+  const view = applyInlineOverride(blocks.value, item.value, inline.value);
+  return { blocks: view.blocks, item: view.item };
+});
 const wrapper = computed(
   () => state.value && entry.value?.kind === "content" ? cmsPreviewComponents[state.value.entry] : void 0
 );
 function post(message) {
   if (window.parent === window) return;
-  window.parent.postMessage(previewEnvelope(message), window.location.origin);
+  const plain = JSON.parse(JSON.stringify(message));
+  window.parent.postMessage(previewEnvelope(plain), window.location.origin);
 }
 function onMessage(event) {
   if (!isTrustedPreviewEvent(event, window.location.origin, window.parent)) return;
   const message = parseHostMessage(event.data);
   if (!message) return;
-  state.value = message.state;
-  version.value++;
+  switch (message.type) {
+    case "render":
+      if (inline.value?.settled) inline.value = null;
+      state.value = message.state;
+      cmsPreviewTheme.value = message.state.theme;
+      version.value++;
+      break;
+    case "highlight":
+      highlighted.value = message.path;
+      break;
+    case "reveal":
+      void overlay.value?.reveal(message.path);
+      break;
+  }
 }
 onMounted(() => {
+  cmsFieldMarking.value = true;
   standalone.value = window.parent === window;
   window.addEventListener("message", onMessage);
   post({ type: "ready" });
 });
+watch(
+  () => !!state.value?.editable && !!field.value,
+  (editable) => {
+    cmsPreviewEditable.value = editable;
+  }
+);
 onBeforeUnmount(() => {
+  cmsFieldMarking.value = false;
+  cmsPreviewEditable.value = false;
   window.removeEventListener("message", onMessage);
 });
 </script>
 
 <style>
-.cms-preview-overlay{--cms-preview-accent:#5b5bd6;--cms-preview-ink:#111114;--cms-preview-surface:#fff;--cms-preview-line:rgba(17,17,20,.12);--cms-preview-danger:#d9383a;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:12px;inset:0;line-height:1;pointer-events:none;position:fixed;z-index:2147483000}.cms-preview-outline{border:1px dashed color-mix(in oklab,var(--cms-preview-accent) 70%,transparent);border-radius:2px;box-sizing:border-box;position:absolute}.cms-preview-outline.is-selected{border:2px solid var(--cms-preview-accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--cms-preview-accent) 14%,transparent)}.cms-preview-label{background:var(--cms-preview-accent);border-radius:2px 0 6px 0;color:#fff;font-weight:600;left:-1px;letter-spacing:.01em;padding:4px 7px;position:absolute;top:-1px;white-space:nowrap}.cms-preview-toolbar{align-items:center;background:var(--cms-preview-surface);border-radius:8px;box-shadow:0 0 0 1px var(--cms-preview-line),0 8px 24px -8px rgba(17,17,20,.28);display:flex;gap:2px;padding:3px;pointer-events:auto;position:absolute;transform:translateX(-100%)}.cms-preview-toolbar:not(.is-selected){opacity:.92}.cms-preview-empty-button,.cms-preview-insert,.cms-preview-tool{all:unset;align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center}.cms-preview-tool{border-radius:6px;color:var(--cms-preview-ink);height:28px;width:28px}.cms-preview-tool:hover:not(:disabled){background:rgba(17,17,20,.06)}.cms-preview-tool:disabled{cursor:default;opacity:.35}.cms-preview-tool.is-danger{color:var(--cms-preview-danger)}.cms-preview-handle{cursor:grab;touch-action:none}.cms-preview .cms-preview-empty .cms-preview-empty-button:focus-visible,.cms-preview-overlay .cms-preview-insert:focus-visible,.cms-preview-overlay .cms-preview-tool:focus-visible{outline:2px solid var(--cms-preview-accent);outline-offset:2px}.cms-preview-separator{background:var(--cms-preview-line);height:18px;margin:0 2px;width:1px}.cms-preview-overlay svg{flex-shrink:0;height:16px;width:16px}.cms-preview-insert{background:var(--cms-preview-accent);border-radius:999px;box-shadow:0 2px 8px -2px rgba(17,17,20,.4);color:#fff;height:26px;margin:-13px 0 0 -13px;opacity:0;pointer-events:auto;position:absolute;transform:scale(.85);transition:opacity .14s ease,transform .14s ease;width:26px}.cms-preview-insert.is-near,.cms-preview-insert:focus-visible,.cms-preview-insert:hover{opacity:1;transform:scale(1)}.cms-preview-overlay.is-dragging .cms-preview-insert,.cms-preview-overlay.is-dragging .cms-preview-toolbar:not(.is-selected){visibility:hidden}.cms-preview-dropline{background:var(--cms-preview-accent);border-radius:3px;box-shadow:0 0 0 3px color-mix(in oklab,var(--cms-preview-accent) 20%,transparent);height:3px;margin-top:-1.5px;position:absolute}.cms-preview-grabbing,.cms-preview-grabbing *{cursor:grabbing!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.cms-preview-empty{display:flex;justify-content:center;padding:48px 16px}.cms-preview-empty-button{border:1px dashed #5b5bd6;border-radius:10px;color:#5b5bd6;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;font-weight:600;gap:8px;padding:12px 18px}.cms-preview-empty-button svg{height:18px;width:18px}.cms-preview-notice{color:#6b6b75;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;margin:64px auto;max-width:32rem;padding:0 16px;text-align:center}
+.cms-preview-overlay{font-family:var(--k-font-sans);font-size:12px;inset:0;line-height:1;pointer-events:none;position:fixed;z-index:2147483000}.cms-preview-outline{border:1px dashed color-mix(in oklab,var(--k-accent) 70%,transparent);border-radius:var(--k-radius-xs);box-sizing:border-box;position:absolute}.cms-preview-outline.is-highlighted{background:color-mix(in oklab,var(--k-accent) 8%,transparent);border-style:solid}.cms-preview-outline.is-selected{border:2px solid var(--k-accent);box-shadow:0 0 0 4px var(--k-ring-soft)}.cms-preview-outline.is-drop-target{background:color-mix(in oklab,var(--k-accent) 6%,transparent);border:2px dashed var(--k-accent)}.cms-preview-label{background:var(--k-accent);border-radius:var(--k-radius-xs) 0 var(--k-radius-sm) 0;color:var(--k-accent-contrast);font-weight:600;left:-1px;letter-spacing:.01em;padding:4px 7px;position:absolute;top:-1px;white-space:nowrap}.cms-preview-field{background:color-mix(in oklab,var(--k-accent) 5%,transparent);border-radius:var(--k-radius-xs);box-sizing:border-box;outline:1px solid color-mix(in oklab,var(--k-accent) 55%,transparent);outline-offset:2px;position:absolute}.cms-preview-field.is-editing{background:none;outline:2px solid var(--k-accent)}.cms-preview-field-label{background:var(--k-elevated);border-radius:var(--k-radius-xs);box-shadow:0 0 0 1px var(--k-accent-line);color:var(--k-accent-text);font-size:11px;font-weight:600;left:-3px;margin-top:6px;padding:3px 6px;position:absolute;top:100%;white-space:nowrap}.cms-preview-field-label.is-above{bottom:100%;margin:0 0 6px;top:auto}.cms-preview-toolbar{align-items:center;background:var(--k-elevated);border-radius:var(--k-radius-md);box-shadow:var(--k-shadow-overlay);display:flex;gap:2px;padding:3px;pointer-events:auto;position:absolute;transform:translateX(-100%)}.cms-preview-toolbar:not(.is-selected){opacity:.92}.cms-preview-empty-button,.cms-preview-insert,.cms-preview-tool{all:unset;align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center}.cms-preview-tool{border-radius:var(--k-radius-sm);color:var(--k-text);height:28px;transition:background-color var(--k-duration) var(--k-ease);width:28px}.cms-preview-tool:hover:not(:disabled){background:var(--k-hover)}.cms-preview-tool:disabled{cursor:default;opacity:.35}.cms-preview-tool.is-danger{color:var(--k-danger-text)}.cms-preview-handle{cursor:grab;touch-action:none}.cms-preview .cms-preview-empty-button:focus-visible,.cms-preview-overlay .cms-preview-insert:focus-visible,.cms-preview-overlay .cms-preview-tool:focus-visible{outline:2px solid var(--k-ring);outline-offset:2px}.cms-preview-separator{background:var(--k-line);height:18px;margin:0 2px;width:1px}.cms-preview-overlay svg{flex-shrink:0;height:16px;width:16px}.cms-preview-insert{background:var(--k-accent);border-radius:var(--k-radius-full);box-shadow:var(--k-shadow-sm);color:var(--k-accent-contrast);height:26px;margin:-13px 0 0 -13px;opacity:0;pointer-events:auto;position:absolute;transform:scale(.85);transition:opacity var(--k-duration) var(--k-ease),transform var(--k-duration) var(--k-ease);width:26px}.cms-preview-insert.is-near,.cms-preview-insert:focus-visible,.cms-preview-insert:hover{opacity:1;transform:scale(1)}.cms-preview-overlay.is-dragging .cms-preview-insert,.cms-preview-overlay.is-dragging .cms-preview-toolbar:not(.is-selected){visibility:hidden}.cms-preview-dropline{background:var(--k-accent);border-radius:var(--k-radius-full);box-shadow:0 0 0 3px var(--k-ring-soft);height:3px;margin-top:-1.5px;position:absolute}.cms-preview-dropline.is-vertical{margin:0 0 0 -1.5px;width:3px}.cms-preview-grabbing,.cms-preview-grabbing *{cursor:grabbing!important;-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.cms-preview [data-cms-editing]{cursor:text;outline:none}.cms-preview-empty{display:flex;justify-content:center;padding:48px 16px}.cms-preview-empty-button{border:1px dashed var(--k-accent-line);border-radius:var(--k-radius-lg);color:var(--k-accent-text);font-family:var(--k-font-sans);font-size:14px;font-weight:600;gap:8px;padding:12px 18px;transition:background-color var(--k-duration) var(--k-ease)}.cms-preview-empty-button:hover{background:color-mix(in oklab,var(--k-accent) 6%,transparent)}.cms-preview-empty-button svg{height:18px;width:18px}.cms-preview-empty-button.is-nested{font-size:13px;justify-content:center;min-height:56px;opacity:.8;padding:10px 14px;width:100%}.cms-preview-empty-button.is-nested:hover{opacity:1}.cms-preview-empty-button.is-nested svg{height:16px;width:16px}.cms-preview-notice{color:var(--k-text-muted);font-family:var(--k-font-sans);margin:64px auto;max-width:32rem;padding:0 16px;text-align:center}
 </style>

package/dist/runtime/app/plugins/cms-field.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/app/plugins/cms-field.js

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from "#imports";
+import { vCmsField } from "../preview/field-marker.js";
+export default defineNuxtPlugin({
+  name: "nuxt-cms:field",
+  setup(nuxtApp) {
+    nuxtApp.vueApp.directive("cms-field", vCmsField);
+  }
+});

package/dist/runtime/app/plugins/cms-preview-banner.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/app/plugins/cms-preview-banner.client.js

@@ -0,0 +1,19 @@
+import { createApp, defineAsyncComponent, h } from "vue";
+import { defineNuxtPlugin } from "#imports";
+import { useCmsPreviewState } from "../composables/cms-preview-mode.js";
+export default defineNuxtPlugin({
+  name: "nuxt-cms:preview-banner",
+  dependsOn: ["nuxt-cms:preview"],
+  setup(nuxtApp) {
+    const state = useCmsPreviewState();
+    const CmsPreviewBanner = defineAsyncComponent(() => import("../preview/CmsPreviewBanner.vue"));
+    nuxtApp.hook("app:mounted", () => {
+      const host = document.createElement("div");
+      host.setAttribute("data-cms-preview-banner", "");
+      document.body.appendChild(host);
+      createApp({
+        render: () => state.value ? h(CmsPreviewBanner, { mode: state.value }) : null
+      }).mount(host);
+    });
+  }
+});

package/dist/runtime/app/plugins/cms-preview.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/app/plugins/cms-preview.js

@@ -0,0 +1,27 @@
+import { defineNuxtPlugin, useRequestURL, useRouter } from "#imports";
+import { PREVIEW_HEADER, PREVIEW_QUERY_PARAM, previewTokenFrom } from "../../shared/index.js";
+import { useCmsPreviewState } from "../composables/cms-preview-mode.js";
+export default defineNuxtPlugin({
+  name: "nuxt-cms:preview",
+  async setup(nuxtApp) {
+    const state = useCmsPreviewState();
+    const initial = previewTokenFrom(useRequestURL().searchParams.get(PREVIEW_QUERY_PARAM));
+    let current = null;
+    async function load(token) {
+      if (token === current) return;
+      current = token;
+      if (!token) {
+        state.value = null;
+        return;
+      }
+      const mode = await $fetch("/api/cms/preview", {
+        headers: { [PREVIEW_HEADER]: token }
+      }).catch(() => null);
+      if (current === token) state.value = mode;
+    }
+    if (import.meta.server || !nuxtApp.payload.serverRendered) await load(initial);
+    else current = initial;
+    if (import.meta.client)
+      useRouter().afterEach((to) => load(previewTokenFrom(to.query[PREVIEW_QUERY_PARAM])));
+  }
+});

package/dist/runtime/app/preview/CmsPreviewBanner.d.vue.ts

@@ -0,0 +1,7 @@
+import type { CmsPreviewMode } from '../../shared/index.js';
+type __VLS_Props = {
+    mode: CmsPreviewMode;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/preview/CmsPreviewBanner.vue

@@ -0,0 +1,63 @@
+<template>
+   <div
+      v-if="!dismissed"
+      class="cms-preview-banner k-root"
+      data-preset="default"
+      data-theme="dark"
+      role="status"
+   >
+      <span class="cms-preview-banner-badge">Preview</span>
+      <span class="cms-preview-banner-text">
+         Unpublished version, not visible to visitors.
+         <span v-if="expires">Link expires {{ expires }}.</span>
+      </span>
+      <button
+         type="button"
+         class="cms-preview-banner-close"
+         aria-label="Hide the preview notice"
+         title="Hide"
+         @click="dismissed = true"
+      >
+         <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+            <path
+               d="M4 4l8 8M12 4l-8 8"
+               stroke="currentColor"
+               stroke-width="1.6"
+               stroke-linecap="round"
+            />
+         </svg>
+      </button>
+   </div>
+</template>
+
+<script setup>
+import tokensHref from "@xleddyl/443-components-vue/tokens.css?url";
+import { computed, onMounted, ref, watch } from "vue";
+const props = defineProps({
+  mode: { type: Object, required: true }
+});
+const dismissed = ref(false);
+onMounted(() => {
+  if (document.querySelector("link[data-cms-tokens]")) return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = tokensHref;
+  link.dataset.cmsTokens = "";
+  document.head.appendChild(link);
+});
+watch(
+  () => props.mode.id,
+  () => {
+    dismissed.value = false;
+  }
+);
+const expires = computed(() => {
+  const date = new Date(props.mode.expiresAt);
+  if (Number.isNaN(date.getTime())) return "";
+  return `on ${date.toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" })}`;
+});
+</script>
+
+<style scoped>
+.cms-preview-banner{align-items:center;background:var(--k-elevated);border-radius:var(--k-radius-xl);bottom:16px;box-shadow:var(--k-shadow-overlay);color:var(--k-text);display:flex;font:500 13px/1.4 var(--k-font-sans);gap:10px;left:16px;margin-inline:auto;max-width:calc(100vw - 32px);padding:8px 8px 8px 10px;position:fixed;right:16px;width:-moz-max-content;width:max-content;z-index:2147483000}.cms-preview-banner-badge{background:var(--k-warning);border-radius:var(--k-radius-full);color:var(--k-text-inverted);flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;text-transform:uppercase}.cms-preview-banner-text{min-width:0}.cms-preview-banner-close{background:transparent;border:0;border-radius:var(--k-radius-full);color:var(--k-text-muted);cursor:pointer;display:grid;flex:none;height:24px;padding:0;place-items:center;transition:background-color var(--k-duration) var(--k-ease),color var(--k-duration) var(--k-ease);width:24px}.cms-preview-banner-close:focus-visible,.cms-preview-banner-close:hover{background:var(--k-hover);color:var(--k-text)}.cms-preview-banner-close:focus-visible{outline:2px solid var(--k-ring);outline-offset:2px}
+</style>

package/dist/runtime/app/preview/CmsPreviewBanner.vue.d.ts

@@ -0,0 +1,7 @@
+import type { CmsPreviewMode } from '../../shared/index.js';
+type __VLS_Props = {
+    mode: CmsPreviewMode;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/preview/PreviewOverlay.d.vue.ts

@@ -1,15 +1,29 @@
+import type { CmsBlockPath } from '../../shared/block-paths.js';
 import type { FieldConfig } from '../../shared/index.js';
+import type { CmsInlineOverride } from '../../shared/inline-text.js';
 import type { CmsPreviewFrameMessage } from '../../shared/preview.js';
 type __VLS_Props = {
     field: FieldConfig;
-    total: number;
-    selected: number | null;
+    fieldKey: string;
+    fields: Record<string, FieldConfig> | null;
+    blocks: readonly Record<string, unknown>[];
+    item: Record<string, unknown> | null;
+    locale: string;
+    editable: boolean;
+    lockedFields: readonly string[];
+    selected: CmsBlockPath | null;
+    highlighted: CmsBlockPath | null;
     version: number;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare function reveal(path: CmsBlockPath): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    reveal: typeof reveal;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     message: (message: CmsPreviewFrameMessage) => any;
+    inline: (override: CmsInlineOverride | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onMessage?: ((message: CmsPreviewFrameMessage) => any) | undefined;
+    onInline?: ((override: CmsInlineOverride | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;