rimelight-components 2.1.88 → 2.1.90

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.88",
+  "version": "2.1.90",
   "docs": "https://rimelight.com/tools/rimelight-components",
   "configKey": "rimelightComponents",
   "compatibility": {

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { readdirSync } from 'node:fs';
 import { basename } from 'node:path';
 
 const name = "rimelight-components";
-const version = "2.1.88";
+const version = "2.1.90";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

package/dist/runtime/components/blocks/BlockEditor.d.vue.ts

@@ -6,6 +6,7 @@ export interface BlockEditorProps {
 type __VLS_Props = BlockEditorProps;
 export interface BlockEditorEmits {
     save: [];
+    mutation: [];
 }
 export interface BlockEditorSlots {
 }
@@ -21,9 +22,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     canRedo: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     save: () => any;
+    mutation: () => any;
     "update:modelValue": (value: Block[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSave?: (() => any) | undefined;
+    onMutation?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Block[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/blocks/BlockEditor.vue

@@ -8,7 +8,7 @@ const { historyLimit, rc: rcProp } = defineProps({
   rc: { type: Object, required: false }
 });
 const blocks = defineModel({ type: Array, ...{ required: true } });
-const emit = defineEmits(["save"]);
+const emit = defineEmits(["save", "mutation"]);
 const slots = defineSlots();
 const blockTypes = [
   { label: "Paragraph", value: "ParagraphBlock", icon: "i-lucide-pilcrow" },
@@ -31,7 +31,7 @@ const {
   redo,
   canUndo,
   canRedo
-} = useBlockEditor(blocks, { maxHistorySize: historyLimit });
+} = useBlockEditor(blocks, { maxHistorySize: historyLimit, onMutation: () => emit("mutation") });
 const dropdownItems = computed(() => [
   blockTypes.map((type) => ({
     label: type.label,

package/dist/runtime/components/blocks/BlockEditor.vue.d.ts

@@ -6,6 +6,7 @@ export interface BlockEditorProps {
 type __VLS_Props = BlockEditorProps;
 export interface BlockEditorEmits {
     save: [];
+    mutation: [];
 }
 export interface BlockEditorSlots {
 }
@@ -21,9 +22,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     canRedo: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     save: () => any;
+    mutation: () => any;
     "update:modelValue": (value: Block[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSave?: (() => any) | undefined;
+    onMutation?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Block[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/page/PageEditor.d.vue.ts

@@ -10,6 +10,7 @@ export interface PageEditorProps {
     onDeletePage?: (id: string) => Promise<void>;
     onFetchPages?: () => Promise<Pick<Page, 'title' | 'slug'>[]>;
     onNavigateToPage?: (slug: string) => void;
+    onViewPage?: (slug: string) => void;
     currentVersionId?: string | null;
     isViewingVersion?: boolean;
     isAdmin?: boolean;
@@ -37,6 +38,8 @@ type __VLS_Props = PageEditorProps;
 export interface PageEditorEmits {
     save: [value: Page];
     'version-navigate': [version: PageVersion];
+    'version-approved': [version: PageVersion];
+    'version-reverted': [version: PageVersion];
 }
 export interface PageEditorSlots {
     'header-actions'?: (props: {}) => any;
@@ -52,6 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     redo: () => void;
     canUndo: import("vue").ComputedRef<boolean>;
     canRedo: import("vue").ComputedRef<boolean>;
+    resetHistory: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     save: (value: {
         type: "Default";
@@ -62,6 +66,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any;
     "version-navigate": (version: PageVersion) => any;
+    "version-approved": (version: PageVersion) => any;
+    "version-reverted": (version: PageVersion) => any;
     "update:currentVersionId": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSave?: ((value: {
@@ -73,6 +79,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any) | undefined;
     "onVersion-navigate"?: ((version: PageVersion) => any) | undefined;
+    "onVersion-approved"?: ((version: PageVersion) => any) | undefined;
+    "onVersion-reverted"?: ((version: PageVersion) => any) | undefined;
     "onUpdate:currentVersionId"?: ((value: string | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/page/PageEditor.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { ref, computed, useTemplateRef, provide } from "vue";
+import { navigateTo } from "#imports";
 import {} from "../../types";
-import { usePageEditor, usePageRegistry, useRC, useHeaderStack } from "../../composables";
+import { usePageEditor, usePageRegistry, useRC, useHeaderStack, useConfirm } from "../../composables";
 import { getLocalizedContent } from "../../utils";
 import { useI18n } from "vue-i18n";
 import { tv } from "../../internal/tv";
@@ -15,6 +16,7 @@ const {
   onDeletePage,
   onFetchPages,
   onNavigateToPage,
+  onViewPage,
   currentVersionId = null,
   isViewingVersion = false,
   isAdmin = false,
@@ -30,6 +32,7 @@ const {
   onDeletePage: { type: Function, required: false },
   onFetchPages: { type: Function, required: false },
   onNavigateToPage: { type: Function, required: false },
+  onViewPage: { type: Function, required: false },
   currentVersionId: { type: [String, null], required: false },
   isViewingVersion: { type: Boolean, required: false },
   isAdmin: { type: Boolean, required: false },
@@ -37,7 +40,7 @@ const {
 });
 const page = defineModel({ type: null, ...{ required: true } });
 const versionId = defineModel("currentVersionId", { type: [String, null], ...{ default: null } });
-const emit = defineEmits(["save", "version-navigate"]);
+const emit = defineEmits(["save", "version-navigate", "version-approved", "version-reverted"]);
 const slots = defineSlots();
 const { rc } = useRC("PageEditor", rcProp);
 const pageEditorStyles = tv({
@@ -82,7 +85,25 @@ const {
 } = pageEditorStyles();
 const { getTypeLabelKey } = usePageRegistry();
 const { t, locale } = useI18n();
-const { undo, redo, canUndo, canRedo, captureSnapshot } = usePageEditor(page);
+const { undo, redo, canUndo, canRedo, captureSnapshot, resetHistory } = usePageEditor(page);
+const { confirm } = useConfirm();
+const handleViewPage = async () => {
+  if (canUndo.value) {
+    const confirmed = await confirm({
+      title: t("page_editor.unsaved_changes_title"),
+      description: t("page_editor.unsaved_changes_description"),
+      confirmLabel: t("page_editor.leave_anyway"),
+      cancelLabel: t("common.cancel"),
+      danger: true
+    });
+    if (!confirmed) return;
+  }
+  if (onViewPage) {
+    onViewPage(page.value.slug);
+  } else {
+    navigateTo(`/${page.value.slug}`);
+  }
+};
 const handleSave = () => {
   const dataToPersist = JSON.parse(JSON.stringify(page.value));
   emit("save", dataToPersist);
@@ -91,7 +112,8 @@ defineExpose({
   undo,
   redo,
   canUndo,
-  canRedo
+  canRedo,
+  resetHistory
 });
 const editorRef = useTemplateRef("editor");
 const showPreview = ref(false);
@@ -232,6 +254,14 @@ const handleTreeNavigate = (slug) => {
             size="xs"
             @click="showPreview = !showPreview"
           />
+          <UButton
+            icon="lucide:external-link"
+            :label="t('page_editor.view_page')"
+            variant="outline"
+            color="neutral"
+            size="xs"
+            @click="handleViewPage"
+          />
           <UButton
             icon="lucide:save"
             :label="t('page_editor.save')"
@@ -261,22 +291,22 @@ const handleTreeNavigate = (slug) => {
             :page-id="page.id"
             :is-admin="isAdmin"
             @version-selected="(v) => emit('version-navigate', v)"
+            @version-approved="(v) => emit('version-approved', v)"
+            @version-reverted="(v) => emit('version-reverted', v)"
           />
           <slot name="header-actions" />
           <RCCreatePageModal
-            :is-open="isCreateModalOpen"
+            v-model:open="isCreateModalOpen"
             :definitions="pageDefinitions"
             :loading="isCreating"
-            @close="isCreateModalOpen = false"
             @confirm="handleCreateConfirm"
           >
             <UButton icon="lucide:file-plus" :label="t('page_editor.create_page')" color="primary" size="xs" />
           </RCCreatePageModal>
           <RCDeletePageModal
-            :is-open="isDeleteModalOpen"
+            v-model:open="isDeleteModalOpen"
             :loading="isDeleting"
             :page-title="getLocalizedContent(page.title, locale)"
-            @close="isDeleteModalOpen = false"
             @confirm="handleDeleteConfirm"
           >
             <UButton icon="lucide:file-plus" :label="t('page_editor.delete_page')" color="error" size="xs" />
@@ -420,4 +450,5 @@ const handleTreeNavigate = (slug) => {
       />
     </div>
   </div>
+  <RCConfirmModal />
 </template>

package/dist/runtime/components/page/PageEditor.vue.d.ts

@@ -10,6 +10,7 @@ export interface PageEditorProps {
     onDeletePage?: (id: string) => Promise<void>;
     onFetchPages?: () => Promise<Pick<Page, 'title' | 'slug'>[]>;
     onNavigateToPage?: (slug: string) => void;
+    onViewPage?: (slug: string) => void;
     currentVersionId?: string | null;
     isViewingVersion?: boolean;
     isAdmin?: boolean;
@@ -37,6 +38,8 @@ type __VLS_Props = PageEditorProps;
 export interface PageEditorEmits {
     save: [value: Page];
     'version-navigate': [version: PageVersion];
+    'version-approved': [version: PageVersion];
+    'version-reverted': [version: PageVersion];
 }
 export interface PageEditorSlots {
     'header-actions'?: (props: {}) => any;
@@ -52,6 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     redo: () => void;
     canUndo: import("vue").ComputedRef<boolean>;
     canRedo: import("vue").ComputedRef<boolean>;
+    resetHistory: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     save: (value: {
         type: "Default";
@@ -62,6 +66,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any;
     "version-navigate": (version: PageVersion) => any;
+    "version-approved": (version: PageVersion) => any;
+    "version-reverted": (version: PageVersion) => any;
     "update:currentVersionId": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSave?: ((value: {
@@ -73,6 +79,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
         properties: import("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any) | undefined;
     "onVersion-navigate"?: ((version: PageVersion) => any) | undefined;
+    "onVersion-approved"?: ((version: PageVersion) => any) | undefined;
+    "onVersion-reverted"?: ((version: PageVersion) => any) | undefined;
     "onUpdate:currentVersionId"?: ((value: string | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/page/PageVersionSelector.d.vue.ts

@@ -11,15 +11,15 @@ export interface PageVersionSelectorProps {
     };
 }
 declare const __VLS_export: import("vue").DefineComponent<PageVersionSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:currentVersionId": (value: string | null) => any;
-    "version-selected": (version: PageVersion) => any;
     "version-approved": (version: PageVersion) => any;
     "version-reverted": (version: PageVersion) => any;
+    "update:currentVersionId": (value: string | null) => any;
+    "version-selected": (version: PageVersion) => any;
 }, string, import("vue").PublicProps, Readonly<PageVersionSelectorProps> & Readonly<{
-    "onUpdate:currentVersionId"?: ((value: string | null) => any) | undefined;
-    "onVersion-selected"?: ((version: PageVersion) => any) | undefined;
     "onVersion-approved"?: ((version: PageVersion) => any) | undefined;
     "onVersion-reverted"?: ((version: PageVersion) => any) | undefined;
+    "onUpdate:currentVersionId"?: ((value: string | null) => any) | undefined;
+    "onVersion-selected"?: ((version: PageVersion) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/page/PageVersionSelector.vue.d.ts

@@ -11,15 +11,15 @@ export interface PageVersionSelectorProps {
     };
 }
 declare const __VLS_export: import("vue").DefineComponent<PageVersionSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:currentVersionId": (value: string | null) => any;
-    "version-selected": (version: PageVersion) => any;
     "version-approved": (version: PageVersion) => any;
     "version-reverted": (version: PageVersion) => any;
+    "update:currentVersionId": (value: string | null) => any;
+    "version-selected": (version: PageVersion) => any;
 }, string, import("vue").PublicProps, Readonly<PageVersionSelectorProps> & Readonly<{
-    "onUpdate:currentVersionId"?: ((value: string | null) => any) | undefined;
-    "onVersion-selected"?: ((version: PageVersion) => any) | undefined;
     "onVersion-approved"?: ((version: PageVersion) => any) | undefined;
     "onVersion-reverted"?: ((version: PageVersion) => any) | undefined;
+    "onUpdate:currentVersionId"?: ((value: string | null) => any) | undefined;
+    "onVersion-selected"?: ((version: PageVersion) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/page/modals/CreatePageModal.vue

@@ -85,9 +85,9 @@ watch(open, (isOpen) => {
             <UButton
               color="neutral"
               variant="ghost"
-              icon="i-heroicons-x-mark-20-solid"
+              icon="lucide:x"
               :class="closeButton({ class: rc.closeButton })"
-              @click="emit('close')"
+              @click="open = false"
             />
           </div>
         </template>
@@ -113,7 +113,7 @@ watch(open, (isOpen) => {
 
         <template #footer>
           <div :class="footer({ class: rc.footer })">
-            <UButton color="neutral" variant="ghost" :label="t('common.cancel')" @click="emit('close')" />
+            <UButton color="neutral" variant="ghost" :label="t('common.cancel')" @click="open = false" />
             <UButton
               color="primary"
               :label="t('page_properties.create_and_edit')"

package/dist/runtime/components/page/modals/DeletePageModal.d.vue.ts

@@ -1,5 +1,4 @@
 export interface DeletePageModalProps {
-    isOpen: boolean;
     loading?: boolean;
     pageTitle: string;
     rc?: {
@@ -10,6 +9,7 @@ export interface DeletePageModalProps {
         footer?: string;
     };
 }
+type __VLS_Props = DeletePageModalProps;
 export interface DeletePageModalEmits {
     close: [];
     confirm: [];
@@ -18,11 +18,17 @@ export interface DeletePageModalSlots {
     default: (props: {}) => any;
 }
 type __VLS_Slots = DeletePageModalSlots;
-declare const __VLS_base: import("vue").DefineComponent<DeletePageModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
+    "update:open": (value: boolean) => any;
     confirm: () => any;
-}, string, import("vue").PublicProps, Readonly<DeletePageModalProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onConfirm?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/page/modals/DeletePageModal.vue

@@ -3,8 +3,8 @@ import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { tv } from "../../../internal/tv";
 import { useRC } from "../../../composables";
-const { isOpen, loading, pageTitle, rc: rcProp } = defineProps({
-  isOpen: { type: Boolean, required: true },
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const { loading, pageTitle, rc: rcProp } = defineProps({
   loading: { type: Boolean, required: false },
   pageTitle: { type: String, required: true },
   rc: { type: Object, required: false }
@@ -31,8 +31,11 @@ const {
 const { t } = useI18n();
 const confirmationInput = ref("");
 const CONFIRMATION_TEXT = "DELETE";
-watch(() => isOpen, (val) => {
-  if (!val) confirmationInput.value = "";
+watch(open, (val) => {
+  if (!val) {
+    confirmationInput.value = "";
+    emits("close");
+  }
 });
 const handleConfirm = () => {
   if (confirmationInput.value === CONFIRMATION_TEXT) {
@@ -42,7 +45,7 @@ const handleConfirm = () => {
 </script>
 
 <template>
-  <UModal :model-value="isOpen" @update:model-value="emits('close')">
+  <UModal v-model:open="open">
     <slot />
     <template #content>
       <UCard :ui="{ body: 'space-y-4' }">
@@ -56,7 +59,7 @@ const handleConfirm = () => {
               variant="ghost"
               icon="lucide:x"
               :class="closeButton({ class: rc.closeButton })"
-              @click="emits('close')"
+              @click="open = false"
             />
           </div>
         </template>
@@ -87,7 +90,7 @@ const handleConfirm = () => {
               color="neutral"
               variant="ghost"
               :label="t('common.cancel', 'Cancel')"
-              @click="emits('close')"
+              @click="open = false"
             />
             <UButton
               color="error"

package/dist/runtime/components/page/modals/DeletePageModal.vue.d.ts

@@ -1,5 +1,4 @@
 export interface DeletePageModalProps {
-    isOpen: boolean;
     loading?: boolean;
     pageTitle: string;
     rc?: {
@@ -10,6 +9,7 @@ export interface DeletePageModalProps {
         footer?: string;
     };
 }
+type __VLS_Props = DeletePageModalProps;
 export interface DeletePageModalEmits {
     close: [];
     confirm: [];
@@ -18,11 +18,17 @@ export interface DeletePageModalSlots {
     default: (props: {}) => any;
 }
 type __VLS_Slots = DeletePageModalSlots;
-declare const __VLS_base: import("vue").DefineComponent<DeletePageModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_ModelProps = {
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
+    "update:open": (value: boolean) => any;
     confirm: () => any;
-}, string, import("vue").PublicProps, Readonly<DeletePageModalProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onConfirm?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/page/modals/PageTreeModal.vue

@@ -32,6 +32,7 @@ const treeItems = computed(() => {
       const label = pageObj ? getLocalizedContent(pageObj.title, locale.value) || partLabel : partLabel.charAt(0).toUpperCase() + partLabel.slice(1);
       const newNode = {
         label,
+        path,
         slug: pageObj ? pageObj.slug : void 0,
         icon: pageObj ? "i-lucide-file" : "i-lucide-folder",
         children: []
@@ -67,15 +68,28 @@ const treeItems = computed(() => {
       parent = node;
     });
   });
-  const sortNodes = (nodes) => {
+  const processNodes = (nodes) => {
     nodes.sort((a, b) => a.label.localeCompare(b.label));
-    nodes.forEach((n) => {
-      if (n.children && n.children.length > 0) {
-        sortNodes(n.children);
+    for (const node of nodes) {
+      if (node.slug && node.children && node.children.length > 0) {
+        const indexNode = {
+          label: node.label,
+          // Or t('common.overview') / same name
+          slug: node.slug,
+          path: `${node.path}:index`,
+          icon: "i-lucide-file-text",
+          children: []
+        };
+        node.children.unshift(indexNode);
+        node.slug = void 0;
+        node.icon = "i-lucide-folder";
       }
-    });
+      if (node.children && node.children.length > 0) {
+        processNodes(node.children);
+      }
+    }
   };
-  sortNodes(rootNodes);
+  processNodes(rootNodes);
   return rootNodes;
 });
 const handleSelect = (node) => {
@@ -84,7 +98,7 @@ const handleSelect = (node) => {
     open.value = false;
   }
 };
-const getKey = (item) => item.slug || item.label;
+const getKey = (item) => item.path;
 </script>
 
 <template>
@@ -97,7 +111,7 @@ const getKey = (item) => item.slug || item.label;
             <UButton
               color="neutral"
               variant="ghost"
-              icon="i-heroicons-x-mark-20-solid"
+              icon="lucide:x"
               :class="closeButton({ class: rc.closeButton })"
               @click="open = false"
             />
@@ -114,12 +128,16 @@ const getKey = (item) => item.slug || item.label;
           <UTree 
               v-else
               :items="treeItems" 
-              :ui="{ item: 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800' }"
+              :get-key="getKey"
+              :ui="{
+  item: 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800',
+  linkLabel: 'w-full'
+}"
+              @select="(e, item2) => handleSelect(item2)"
           >
-              <template #item="{ item }">
-                  <div class="flex items-center gap-2 py-1 w-full" @click="handleSelect(item)">
-                      <UIcon :name="item.icon || (item.children?.length ? 'i-lucide-folder' : 'i-lucide-file')" class="w-4 h-4 text-gray-400" />
-                      <span :class="{ 'text-gray-900 dark:text-gray-100': item.slug, 'text-gray-500 font-medium': !item.slug }">
+              <template #item-label="{ item }">
+                  <div class="flex items-center gap-2 py-1 w-full">
+                      <span :class="{ 'text-gray-900 dark:text-gray-100 font-medium': item.slug, 'text-gray-400': !item.slug }">
                           {{ item.label }}
                       </span>
                       <UIcon v-if="item.slug" name="i-heroicons-arrow-right-20-solid" class="w-3 h-3 ml-auto text-gray-300 opacity-0 group-hover:opacity-100" />

package/dist/runtime/composables/pages/usePageEditor.d.ts

@@ -7,4 +7,5 @@ export declare function usePageEditor(page: Ref<Page>, maxHistorySize?: number):
     canRedo: import("vue").ComputedRef<boolean>;
     save: () => any;
     captureSnapshot: () => void;
+    resetHistory: () => void;
 };

package/dist/runtime/composables/pages/usePageEditor.js

@@ -2,23 +2,38 @@ import { computed, shallowRef, watch } from "vue";
 export function usePageEditor(page, maxHistorySize = 100) {
   const history = shallowRef([]);
   const future = shallowRef([]);
+  let lastCapturedState = JSON.stringify(page.value);
   const captureSnapshot = () => {
-    const snapshot = JSON.stringify(page.value);
-    if (history.value.length > 0 && history.value[history.value.length - 1] === snapshot) return;
+    const currentSnapshot = JSON.stringify(page.value);
+    if (currentSnapshot === lastCapturedState) return;
     future.value = [];
-    const newHistory = [...history.value, snapshot];
+    const newHistory = [...history.value, lastCapturedState];
     if (newHistory.length > maxHistorySize) newHistory.shift();
     history.value = newHistory;
+    lastCapturedState = currentSnapshot;
   };
   const undo = () => {
     if (history.value.length === 0) return;
-    future.value = [JSON.stringify(page.value), ...future.value];
-    page.value = JSON.parse(history.value.pop());
+    const currentState = JSON.stringify(page.value);
+    future.value = [currentState, ...future.value];
+    const previousStateString = history.value[history.value.length - 1];
+    lastCapturedState = previousStateString;
+    page.value = JSON.parse(previousStateString);
+    const newHistory = [...history.value];
+    newHistory.pop();
+    history.value = newHistory;
   };
   const redo = () => {
     if (future.value.length === 0) return;
-    history.value = [...history.value, JSON.stringify(page.value)];
-    page.value = JSON.parse(future.value.shift());
+    const currentState = JSON.stringify(page.value);
+    history.value = [...history.value, currentState];
+    lastCapturedState = currentState;
+    const nextStateString = future.value[0];
+    page.value = JSON.parse(nextStateString);
+    lastCapturedState = nextStateString;
+    const newFuture = [...future.value];
+    newFuture.shift();
+    future.value = newFuture;
   };
   const canUndo = computed(() => history.value.length > 0);
   const canRedo = computed(() => future.value.length > 0);
@@ -26,18 +41,24 @@ export function usePageEditor(page, maxHistorySize = 100) {
     return JSON.parse(JSON.stringify(page.value));
   };
   watch(
-    () => page.value.properties,
+    [() => page.value.properties, () => page.value.title, () => page.value.blocks],
     () => {
       captureSnapshot();
     },
     { deep: true }
   );
+  const resetHistory = () => {
+    history.value = [];
+    future.value = [];
+    lastCapturedState = JSON.stringify(page.value);
+  };
   return {
     undo,
     redo,
     canUndo,
     canRedo,
     save,
-    captureSnapshot
+    captureSnapshot,
+    resetHistory
   };
 }

package/dist/runtime/composables/pages/usePageEditor.mjs

@@ -2,23 +2,38 @@ import { computed, shallowRef, watch } from "vue";
 export function usePageEditor(page, maxHistorySize = 100) {
   const history = shallowRef([]);
   const future = shallowRef([]);
+  let lastCapturedState = JSON.stringify(page.value);
   const captureSnapshot = () => {
-    const snapshot = JSON.stringify(page.value);
-    if (history.value.length > 0 && history.value[history.value.length - 1] === snapshot) return;
+    const currentSnapshot = JSON.stringify(page.value);
+    if (currentSnapshot === lastCapturedState) return;
     future.value = [];
-    const newHistory = [...history.value, snapshot];
+    const newHistory = [...history.value, lastCapturedState];
     if (newHistory.length > maxHistorySize) newHistory.shift();
     history.value = newHistory;
+    lastCapturedState = currentSnapshot;
   };
   const undo = () => {
     if (history.value.length === 0) return;
-    future.value = [JSON.stringify(page.value), ...future.value];
-    page.value = JSON.parse(history.value.pop());
+    const currentState = JSON.stringify(page.value);
+    future.value = [currentState, ...future.value];
+    const previousStateString = history.value[history.value.length - 1];
+    lastCapturedState = previousStateString;
+    page.value = JSON.parse(previousStateString);
+    const newHistory = [...history.value];
+    newHistory.pop();
+    history.value = newHistory;
   };
   const redo = () => {
     if (future.value.length === 0) return;
-    history.value = [...history.value, JSON.stringify(page.value)];
-    page.value = JSON.parse(future.value.shift());
+    const currentState = JSON.stringify(page.value);
+    history.value = [...history.value, currentState];
+    lastCapturedState = currentState;
+    const nextStateString = future.value[0];
+    page.value = JSON.parse(nextStateString);
+    lastCapturedState = nextStateString;
+    const newFuture = [...future.value];
+    newFuture.shift();
+    future.value = newFuture;
   };
   const canUndo = computed(() => history.value.length > 0);
   const canRedo = computed(() => future.value.length > 0);
@@ -26,18 +41,24 @@ export function usePageEditor(page, maxHistorySize = 100) {
     return JSON.parse(JSON.stringify(page.value));
   };
   watch(
-    () => page.value.properties,
+    [() => page.value.properties, () => page.value.title, () => page.value.blocks],
     () => {
       captureSnapshot();
     },
     { deep: true }
   );
+  const resetHistory = () => {
+    history.value = [];
+    future.value = [];
+    lastCapturedState = JSON.stringify(page.value);
+  };
   return {
     undo,
     redo,
     canUndo,
     canRedo,
     save,
-    captureSnapshot
+    captureSnapshot,
+    resetHistory
   };
 }

package/dist/runtime/locale/en.js

@@ -47,10 +47,14 @@ export default defineLocale({
     },
     page_editor: {
       preview: "Preview",
+      view_page: "View Page",
       save: "Save",
       create_page: "Create Page",
       delete_page: "Delete Page",
       viewing_version_notice: "Viewing a previous version. Changes made here will create a new version.",
+      unsaved_changes_title: "Unsaved Changes",
+      unsaved_changes_description: "You have unsaved changes. Are you sure you want to leave?",
+      leave_anyway: "Leave Anyway",
       metadata: "Metadata",
       page_id: "Page ID",
       created_at: "Created At",

package/dist/runtime/locale/en.mjs

@@ -47,10 +47,14 @@ export default defineLocale({
     },
     page_editor: {
       preview: "Preview",
+      view_page: "View Page",
       save: "Save",
       create_page: "Create Page",
       delete_page: "Delete Page",
       viewing_version_notice: "Viewing a previous version. Changes made here will create a new version.",
+      unsaved_changes_title: "Unsaved Changes",
+      unsaved_changes_description: "You have unsaved changes. Are you sure you want to leave?",
+      leave_anyway: "Leave Anyway",
       metadata: "Metadata",
       page_id: "Page ID",
       created_at: "Created At",

package/dist/runtime/types/pages.d.ts

@@ -68,6 +68,7 @@ export interface PageSurround {
     next: SurroundItem | null;
 }
 export interface PageVersion extends BasePage {
+    pageId: string;
     status: "pending" | "approved" | "rejected";
     type: PageType;
     content: {

package/dist/runtime/utils/page.d.ts

@@ -1,5 +1,5 @@
 import { type MaybeRefOrGetter } from "vue";
-import { type Localized, type Page, type PageDefinition, type Property } from "../types/index.js";
+import { type Localized, type Page, type PageDefinition, type PageVersion, type Property } from "../types/index.js";
 export declare const getLocalizedContent: <T = string>(field: Localized<T> | undefined, currentLocale: MaybeRefOrGetter<string>) => T | string;
 type WidenProperty<T> = T extends string ? string : T extends number ? number : T extends never[] ? Localized[] : T extends object ? {
     [K in keyof T]: WidenProperty<T[K]>;
@@ -27,4 +27,8 @@ export declare function definePageDefinition<T extends PageDefinition>(def: T):
  * - Removes templated blocks no longer in the definition.
  */
 export declare function syncPageWithDefinition(page: Page, definition?: PageDefinition): Page;
+/**
+ * Converts a PageVersion to a Page structure for display in the editor.
+ */
+export declare function convertVersionToPage(version: PageVersion): Page;
 export {};

package/dist/runtime/utils/page.js

@@ -81,3 +81,13 @@ export function syncPageWithDefinition(page, definition) {
   }
   return page;
 }
+export function convertVersionToPage(version) {
+  return {
+    ...version,
+    id: version.pageId,
+    type: version.type,
+    blocks: version.content?.blocks || version.blocks,
+    properties: version.content?.properties,
+    authorsIds: version.authorsIds
+  };
+}

package/dist/runtime/utils/page.mjs

@@ -81,3 +81,13 @@ export function syncPageWithDefinition(page, definition) {
   }
   return page;
 }
+export function convertVersionToPage(version) {
+  return {
+    ...version,
+    id: version.pageId,
+    type: version.type,
+    blocks: version.content?.blocks || version.blocks,
+    properties: version.content?.properties,
+    authorsIds: version.authorsIds
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.88",
+  "version": "2.1.90",
   "description": "A component library by Rimelight Entertainment.",
   "keywords": [
     "nuxt",