rimelight-components 2.1.11 → 2.1.13

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.11",
+  "version": "2.1.13",
   "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.11";
+const version = "2.1.13";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

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

@@ -1,6 +1,13 @@
-import type { Page } from "../../types/index.js";
+import { type Page, type PageSurround, type PageDefinition } from "../../types/index.js";
 interface PageEditorProps {
     isSaving: boolean;
+    useSurround?: boolean;
+    surround?: PageSurround | null;
+    surroundStatus?: 'idle' | 'pending' | 'success' | 'error';
+    resolvePage: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
+    pageDefinitions: Record<string, PageDefinition>;
+    onCreatePage?: (page: Partial<Page>) => Promise<void>;
+    onDeletePage?: (id: string) => Promise<void>;
 }
 type __VLS_Props = PageEditorProps;
 type __VLS_ModelProps = {

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

@@ -1,11 +1,22 @@
 <script setup>
-import { ref, computed, useTemplateRef } from "vue";
-import { usePageEditor } from "../../composables";
+import { ref, computed, useTemplateRef, provide } from "vue";
+import {} from "../../types";
+import { usePageEditor, usePageRegistry } from "../../composables";
 import { getLocalizedContent } from "../../utils";
+import { useI18n } from "vue-i18n";
+const { getTypeLabelKey } = usePageRegistry();
+const { t, locale } = useI18n();
 const page = defineModel({ type: null, ...{ required: true } });
 const { undo, redo, canUndo, canRedo, captureSnapshot } = usePageEditor(page);
-const { isSaving } = defineProps({
-  isSaving: { type: Boolean, required: true }
+const { isSaving, useSurround = false, surroundStatus = "idle", surround = null, resolvePage, onCreatePage, onDeletePage } = defineProps({
+  isSaving: { type: Boolean, required: true },
+  useSurround: { type: Boolean, required: false },
+  surround: { type: [Object, null], required: false },
+  surroundStatus: { type: String, required: false },
+  resolvePage: { type: Function, required: true },
+  pageDefinitions: { type: Object, required: true },
+  onCreatePage: { type: Function, required: false },
+  onDeletePage: { type: Function, required: false }
 });
 const emit = defineEmits(["save"]);
 const handleSave = () => {
@@ -20,12 +31,69 @@ defineExpose({
 });
 const editorRef = useTemplateRef("editor");
 const showPreview = ref(false);
-const editorPanelClass = computed(() => ({
-  // When the preview is visible, both editor/preview share 1/2 span.
-  "col-span-1 w-full": showPreview.value,
-  // When the preview is hidden, the editor uses the full grid space.
-  "col-span-2 w-full": !showPreview.value
-}));
+provide("page-resolver", resolvePage);
+const previousPage = computed(() => surround?.previous);
+const nextPage = computed(() => surround?.next);
+const hasSurround = computed(() => !!(surround?.previous || surround?.next));
+const containerRef = useTemplateRef("split-container");
+const editorWidth = ref(50);
+const isResizing = ref(false);
+const SNAP_THRESHOLD = 1.5;
+const handleMouseMove = (e) => {
+  if (!isResizing.value || !containerRef.value) return;
+  const containerRect = containerRef.value.getBoundingClientRect();
+  let newWidth = (e.clientX - containerRect.left) / containerRect.width * 100;
+  newWidth = Math.min(Math.max(newWidth, 20), 80);
+  if (Math.abs(newWidth - 50) < SNAP_THRESHOLD) {
+    editorWidth.value = 50;
+  } else {
+    editorWidth.value = newWidth;
+  }
+};
+const cursorClass = computed(() => {
+  if (isResizing.value) return "cursor-grabbing";
+  return "cursor-grab";
+});
+const startResizing = (e) => {
+  isResizing.value = true;
+  window.addEventListener("mousemove", handleMouseMove);
+  window.addEventListener("mouseup", stopResizing);
+  document.body.style.cursor = "col-resize";
+  document.body.style.userSelect = "none";
+};
+const stopResizing = () => {
+  isResizing.value = false;
+  window.removeEventListener("mousemove", handleMouseMove);
+  window.removeEventListener("mouseup", stopResizing);
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+};
+const isCreateModalOpen = ref(false);
+const isCreating = ref(false);
+const handleCreateConfirm = async (newPageData) => {
+  if (!onCreatePage) return;
+  try {
+    isCreating.value = true;
+    await onCreatePage(newPageData);
+    isCreateModalOpen.value = false;
+  } finally {
+    isCreating.value = false;
+  }
+};
+const isDeleteModalOpen = ref(false);
+const isDeleting = ref(false);
+const handleDeleteConfirm = async () => {
+  if (!onDeletePage || !page.value.id) return;
+  try {
+    isDeleting.value = true;
+    await onDeletePage(page.value.id);
+    isDeleteModalOpen.value = false;
+  } catch (err) {
+    console.error("Failed to delete page:", err);
+  } finally {
+    isDeleting.value = false;
+  }
+};
 </script>
 
 <template>
@@ -69,73 +137,169 @@ const editorPanelClass = computed(() => ({
           :loading="isSaving"
           @click="handleSave"
         />
+        <RCCreatePageModal
+          :is-open="isCreateModalOpen"
+           :definitions="pageDefinitions"
+           :loading="isCreating"
+           @close="isCreateModalOpen = false"
+           @confirm="handleCreateConfirm"
+        >
+          <UButton
+            icon="lucide:file-plus"
+            label="Create Page"
+            color="primary"
+            size="xs"
+          />
+        </RCCreatePageModal>
+        <RCDeletePageModal
+          :is-open="isDeleteModalOpen"
+          :loading="isDeleting"
+          :page-title="getLocalizedContent(page.title, locale)"
+          @close="isDeleteModalOpen = false"
+          @confirm="handleDeleteConfirm"
+        >
+          <UButton
+            icon="lucide:file-plus"
+            label="Delete Page"
+            color="error"
+            size="xs"
+          />
+        </RCDeletePageModal>
       </div>
     </template>
   </UHeader>
-  <UContainer
-    class="mt-24 grid gap-xl"
-    :class="showPreview ? 'grid-cols-2 max-w-full' : 'grid-cols-1'"
+  <main
+    ref="split-container"
+    class="flex w-full overflow-hidden"
   >
-    <div :class="editorPanelClass" class="grid grid-cols-1 lg:grid-cols-4 gap-8">
-      <UPageAside class="order-1 lg:order-2 lg:col-span-1">
-        <RCPagePropertiesEditor v-model="page" />
-      </UPageAside>
-      <div class="order-2 lg:order-1 lg:col-span-3">
-        <UPageHeader
-          :title="getLocalizedContent(page.title, 'en')"
-          :description="getLocalizedContent(page.description, 'en') ?? ''"
-        />
-        <RCBlockEditor
-          ref="editor"
-          v-model="page.blocks"
-          :class="editorPanelClass"
-          @mutation="captureSnapshot"
-        />
-        <div class="flex flex-col gap-xs text-xs">
-          <h6>Metadata</h6>
-          <span>Page ID: {{ page.id }}</span>
-          <span
-            >Created At:
-            <NuxtTime
-              :datetime="page.created_at ?? ''"
-              year="numeric"
-              month="numeric"
-              day="numeric"
-              hour="numeric"
-              minute="numeric"
-              second="numeric"
-              time-zone-name="short"
-          /></span>
-          <span
-            >Posted At:
-            <NuxtTime
-              :datetime="page.created_at ?? ''"
-              year="numeric"
-              month="numeric"
-              day="numeric"
-              hour="numeric"
-              minute="numeric"
-              second="numeric"
-              time-zone-name="short"
-          /></span>
-          <span
-            >Updated At:
-            <NuxtTime
-              :datetime="page.created_at ?? ''"
-              year="numeric"
-              month="numeric"
-              day="numeric"
-              hour="numeric"
-              minute="numeric"
-              second="numeric"
-              time-zone-name="short"
-          /></span>
+    <div
+      class="h-full overflow-y-auto"
+      :style="{ width: showPreview ? `${editorWidth}%` : '100%' }"
+    >
+      <UContainer class="flex flex-col py-16">
+        <div class="grid grid-cols-1 lg:grid-cols-24 gap-xl items-start">
+          <RCPageTOC
+            :page-blocks="page.blocks"
+            :levels="[2, 3, 4]"
+            class="hidden lg:flex lg:col-span-4 sticky top-20 self-start"
+          >
+              <template #bottom> </template>
+            </RCPageTOC>
+          <RCPagePropertiesEditor v-model="page" class="order-1 lg:order-2 lg:col-span-6" />
+          <div class="order-2 lg:order-1 lg:col-span-14 flex flex-col gap-xl">
+            <NuxtImg
+              v-if="page.banner?.src"
+              :src="page.banner?.src"
+              :alt="page.banner?.alt"
+              class="rounded-xl w-full object-cover"
+            />
+            <UPageHeader
+              :headline="t(getTypeLabelKey(page.type))"
+              :description="getLocalizedContent(page.description, 'en') ?? ''"
+              :ui="{ root: 'pt-0' }"
+            >
+              <template #title>
+                <div class="flex flex-row gap-sm">
+                  <NuxtImg
+                    v-if="page.icon?.src"
+                    :src="page.icon?.src"
+                    :alt="page.icon?.alt"
+                    class="rounded-full w-12 h-12 object-cover"
+                  />
+                  <h1>{{ getLocalizedContent(page.title, locale) }}</h1>
+                </div>
+              </template>
+            </UPageHeader>
+            <RCBlockEditor
+              ref="editor"
+              v-model="page.blocks"
+              @mutation="captureSnapshot"
+            />
+            <template v-if="useSurround">
+              <div v-if="surroundStatus === 'pending'" class="grid grid-cols-1 gap-md sm:grid-cols-2">
+                <USkeleton class="h-48 w-full rounded-xl" />
+                <USkeleton class="h-48 w-full rounded-xl" />
+              </div>
+
+              <LazyRCPageSurround
+                v-else-if="surroundStatus === 'success' && hasSurround"
+                hydrate-on-visible
+                :pageType="getTypeLabelKey(page.type)"
+                :previousTitle="getLocalizedContent(previousPage?.title, locale)"
+                :previousDescription="getLocalizedContent(previousPage?.description, locale)"
+                :previousTo="`/${previousPage?.slug}`"
+                :nextTitle="getLocalizedContent(nextPage?.title, locale)"
+                :nextDescription="getLocalizedContent(nextPage?.description, locale)"
+                :nextTo="`/${nextPage?.slug}`"
+              />
+
+              <USeparator />
+
+              <div class="flex flex-col gap-xs text-xs text-dimmed p-xl">
+                <h6>Metadata</h6>
+                <span>Page ID: {{ page.id }}</span>
+                <span
+                >Created At:
+              <NuxtTime
+                :datetime="page.created_at ?? ''"
+                year="numeric"
+                month="numeric"
+                day="numeric"
+                hour="numeric"
+                minute="numeric"
+                second="numeric"
+                time-zone-name="short"
+              /></span>
+                <span
+                >Posted At:
+              <NuxtTime
+                :datetime="page.created_at ?? ''"
+                year="numeric"
+                month="numeric"
+                day="numeric"
+                hour="numeric"
+                minute="numeric"
+                second="numeric"
+                time-zone-name="short"
+              /></span>
+                <span
+                >Updated At:
+              <NuxtTime
+                :datetime="page.created_at ?? ''"
+                year="numeric"
+                month="numeric"
+                day="numeric"
+                hour="numeric"
+                minute="numeric"
+                second="numeric"
+                time-zone-name="short"
+              /></span>
+              </div>
+            </template>
+          </div>
         </div>
-      </div>
+      </UContainer>
     </div>
-    <div class="flex flex-row gap-xl">
-      <USeparator orientation="vertical" />
-      <RCPageRenderer v-if="showPreview" v-model="page" />
+
+    <div
+      v-if="showPreview"
+      :class="cursorClass"
+      class="relative flex flex-col items-center justify-center w-6 cursor-col-resize group px-1 py-16"
+      @mousedown="startResizing"
+      @dblclick="editorWidth = 50"
+    >
+      <USeparator
+        orientation="vertical"
+        :ui="{}"
+      />
+    </div>
+
+    <div
+      v-if="showPreview"
+      class="h-full overflow-y-auto"
+      :style="{ width: `${100 - editorWidth}%` }"
+    >
+      <RCPageRenderer v-model="page" :resolve-page="resolvePage" />
     </div>
-  </UContainer>
+  </main>
 </template>

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

@@ -1,6 +1,13 @@
-import type { Page } from "../../types/index.js";
+import { type Page, type PageSurround, type PageDefinition } from "../../types/index.js";
 interface PageEditorProps {
     isSaving: boolean;
+    useSurround?: boolean;
+    surround?: PageSurround | null;
+    surroundStatus?: 'idle' | 'pending' | 'success' | 'error';
+    resolvePage: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
+    pageDefinitions: Record<string, PageDefinition>;
+    onCreatePage?: (page: Partial<Page>) => Promise<void>;
+    onDeletePage?: (id: string) => Promise<void>;
 }
 type __VLS_Props = PageEditorProps;
 type __VLS_ModelProps = {

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

@@ -1,101 +1,192 @@
 <script setup>
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import { usePageRegistry } from "../../composables";
+import { usePageRegistry, useInfobox } from "../../composables";
 import { getLocalizedContent } from "../../utils";
+import {} from "@nuxt/ui/components/Tabs.vue";
 import {} from "../../types";
-const { getTypeLabelKey } = usePageRegistry();
 const page = defineModel({ type: null, ...{ required: true } });
+const { getTypeLabelKey } = usePageRegistry();
+const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(page.value.properties);
 const { locale, t } = useI18n();
-const isFieldVisible = (fieldSchema) => {
-  if (!fieldSchema.visibleIf) return true;
-  return fieldSchema.visibleIf(page.value.properties);
-};
-const getSortedFields = (fields) => {
-  return Object.entries(fields).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
+const imageTabs = computed(() => {
+  if (!page.value.images?.length) return [];
+  return page.value.images.map((img, index) => {
+    const localizedName = getLocalizedContent(img.name, locale.value);
+    return {
+      label: localizedName || `${t("label_image")} ${index + 1}`,
+      value: `image-${index}`,
+      img
+    };
+  });
+});
+const updateTextArray = (schema, vals) => {
+  schema.value = vals.map((str) => ({
+    ...schema.value.find((i) => i.en === str),
+    // Preserve other locales if they exist
+    en: str
+  }));
 };
 </script>
 
 <template>
-  <UCard
-    variant="soft"
-    :ui="{ root: 'divide-none', header: 'bg-elevated text-center', body: 'bg-muted' }"
-  >
-    <template #header>
-      <h3>
-        {{ getLocalizedContent(page.title, locale) }}
-      </h3>
-      <UBadge variant="subtle" size="sm" color="primary" :label="t(getTypeLabelKey(page.type))" />
-    </template>
+  <aside class="flex flex-col gap-md">
+    <UCard
+      variant="soft"
+      :ui="{ root: 'divide-none', header: 'bg-accented text-center', body: 'p-0 sm:p-0 bg-muted' }"
+    >
+      <template #header>
+        <div class="flex flex-col gap-xs items-center">
+          <NuxtImg
+            v-if="page.icon?.src"
+            :src="page.icon?.src"
+            :alt="page.icon?.alt"
+            class="rounded-full w-12 h-12 object-cover"
+          />
 
-    <div v-for="(group, groupId) in page.properties" :key="groupId">
-      <div class="flex items-center gap-3">
-        <span class="text-[10px] font-bold uppercase tracking-widest text-primary">
-          {{ group.label[locale] }}
-        </span>
-        <div class="h-px flex-1 bg-border/50"></div>
-      </div>
+          <h3>
+            {{ getLocalizedContent(page.title, locale) }}
+          </h3>
 
-      <div class="grid gap-y-4 px-1">
-        <template v-for="[fieldKey, schema] in getSortedFields(group.fields)" :key="fieldKey">
-          <UFormField
-            v-if="isFieldVisible(schema)"
-            :label="getLocalizedContent(schema.label, locale)"
-            :name="fieldKey"
-          >
-            <UInput
-              v-if="schema.type === 'text'"
-              v-model="schema.value[locale]"
-              variant="subtle"
-              placeholder="..."
-            />
+          <span class="text-sm">{{ t(getTypeLabelKey(page.type)) }}</span>
 
-            <UInput
-              v-else-if="schema.type === 'number'"
-              v-model.number="schema.value"
-              type="number"
-              variant="subtle"
-            />
+          <div v-if="page.tags?.length" class="flex flex-row flex-wrap gap-xs">
+            <UBadge
+              v-for="tag in page.tags"
+              :key="tag[locale]"
+              variant="soft"
+              size="xs"
+              color="neutral"
+            >
+              {{ tag[locale] }}
+            </UBadge>
+          </div>
 
-            <USelect
-              v-else-if="schema.type === 'enum'"
-              v-model="schema.value"
-              :items="schema.options || []"
-              variant="subtle"
-            />
+          <div v-if="page.images?.length" class="w-full">
+            <UTabs
+              v-if="page.images.length > 1"
+              :items="imageTabs"
+              default-value="image-0"
+              variant="link"
+              size="xs"
+              color="neutral"
+              class="w-full"
+            >
+              <template #content="{ item }">
+                <NuxtImg :src="item.img.src" :alt="item.img.alt" class="w-full object-cover" />
+              </template>
+            </UTabs>
 
-            <UInputMenu
-              v-else-if="schema.type === 'text-array'"
-              :model-value="schema.value.map((v) => v[locale])"
-              @update:model-value="(vals) => schema.value = vals.map((str) => ({ [locale]: str }))"
-              multiple
-              creatable
-              variant="subtle"
-              placeholder="Add item..."
-            />
+            <div v-else-if="page.images[0]">
+              <NuxtImg
+                :src="page.images[0].src"
+                :alt="page.images[0].alt"
+                class="w-full object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
 
-            <UInput
-              v-else-if="schema.type === 'page'"
-              v-model="schema.value"
-              icon="lucide:link-2"
-              variant="subtle"
-              :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
-            />
-          </UFormField>
-        </template>
-      </div>
-    </div>
+      <template #default>
+        <template v-for="[groupId, group] in getSortedGroups(page.properties)" :key="groupId">
+          <UCollapsible v-if="shouldRenderGroup(group, false)" :default-open="group.defaultOpen">
+            <template #default>
+              <UButton
+                :label="getLocalizedContent(group.label, locale)"
+                variant="soft"
+                trailing-icon="lucide:chevron-down"
+                :ui="{
+  trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
+}"
+                block
+                class="group rounded-none bg-elevated text-default"
+              />
+            </template>
+
+            <template #content>
+              <dl class="p-sm flex flex-col gap-xs">
+                <template v-for="[fieldKey, schema] in getSortedFields(group.fields)" :key="fieldKey">
+                  <UFormField
+                    v-if="isFieldVisible(schema, false)"
+                    :label="getLocalizedContent(schema.label, locale)"
+                    :name="fieldKey"
+                  >
+                    <UInput
+                      v-if="schema.type === 'text'"
+                      v-model="schema.value.en"
+                      variant="subtle"
+                      placeholder="Type here..."
+                      class="w-full"
+                    />
 
-    <USeparator class="my-6" />
+                    <UInput
+                      v-else-if="schema.type === 'number'"
+                      v-model.number="schema.value"
+                      type="number"
+                      variant="subtle"
+                      class="w-full"
+                    />
 
-    <UFormField label="Global Search Tags">
-      <UInputMenu
-        v-model="page.tags"
-        multiple
-        creatable
-        icon="lucide:tag"
-        variant="subtle"
-        placeholder="Add tags..."
+                    <USelect
+                      v-else-if="schema.type === 'enum'"
+                      v-model="schema.value"
+                      :items="schema.options || []"
+                      variant="subtle"
+                      class="w-full"
+                    />
+
+                    <UInputMenu
+                      v-else-if="schema.type === 'text-array'"
+                      :model-value="schema.value.map((v) => v.en)"
+                      @update:model-value="(vals) => updateTextArray(schema, vals)"
+                      multiple
+                      creatable
+                      variant="subtle"
+                      placeholder="Add item..."
+                      class="w-full"
+                    />
+
+                    <UInput
+                      v-else-if="schema.type === 'page'"
+                      v-model="schema.value"
+                      icon="lucide:link-2"
+                      variant="subtle"
+                      :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
+                      class="w-full"
+                    />
+
+                    <USelectMenu
+                      v-else-if="schema.type === 'page-array'"
+                      v-model="schema.value"
+                      icon="lucide:link-2"
+                      variant="subtle"
+                      :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
+                      class="w-full"
+                    />
+                  </UFormField>
+                </template>
+              </dl>
+            </template>
+          </UCollapsible>
+        </template>
+      </template>
+    </UCard>
+    <div class="flex flex-col gap-xs">
+      <h6>Links</h6>
+      <UButton
+        v-for="(link, index) in page.links"
+        :key="index"
+        :label="link.label"
+        :icon="link.icon"
+        :to="link.to"
+        :target="link.to ? '_blank' : void 0"
+        :external="!!link.to"
+        :variant="link.variant || 'link'"
+        :color="link.color || 'neutral'"
+        size="sm"
+        :ui="{ base: 'pl-0' }"
       />
-    </UFormField>
-  </UCard>
+    </div>
+  </aside>
 </template>

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

@@ -1,36 +1,19 @@
 <script setup>
 import { computed } from "vue";
 import { getLocalizedContent } from "../../utils";
-import { usePageRegistry } from "../../composables";
+import { usePageRegistry, useInfobox } from "../../composables";
 import { useToast } from "@nuxt/ui/composables";
 import {} from "@nuxt/ui/components/Tabs.vue";
 import { useI18n } from "vue-i18n";
 import { useShare, useClipboard } from "@vueuse/core";
 import {} from "../../types";
-const { getTypeLabelKey } = usePageRegistry();
 const page = defineModel({ type: null, ...{ required: true } });
+const { getTypeLabelKey } = usePageRegistry();
+const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(page.value.properties);
 const { t, locale } = useI18n();
 const { share } = useShare();
 const { copy } = useClipboard();
 const toast = useToast();
-const shouldRenderField = (schema) => {
-  const isVisible = !schema.visibleIf || schema.visibleIf(page.value.properties);
-  if (!isVisible) return false;
-  const val = schema.value;
-  if (schema.type === "text") {
-    return !!val?.[locale.value];
-  }
-  if (schema.type === "text-array") {
-    return Array.isArray(val) && val.length > 0;
-  }
-  return val !== void 0 && val !== null && val !== "";
-};
-const shouldRenderGroup = (group) => {
-  return Object.values(group.fields || {}).some((schema) => shouldRenderField(schema));
-};
-const getSortedFields = (fields) => {
-  return Object.entries(fields).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
-};
 const sharePage = async () => {
   if (!page.value) {
     return;
@@ -142,8 +125,8 @@ const imageTabs = computed(() => {
       </template>
 
       <template #default>
-        <template v-for="(group, groupId) in page.properties" :key="groupId">
-          <UCollapsible v-if="shouldRenderGroup(group)" :default-open="group.defaultOpen">
+        <template v-for="[groupId, group] in getSortedGroups(page.properties)" :key="groupId">
+          <UCollapsible v-if="shouldRenderGroup(group, true)" :default-open="group.defaultOpen">
             <template #default>
               <UButton
                 :label="getLocalizedContent(group.label, locale)"
@@ -164,7 +147,7 @@ const imageTabs = computed(() => {
                   :key="fieldKey"
                 >
                   <div
-                    v-if="shouldRenderField(schema)"
+                    v-if="isFieldVisible(schema, true)"
                     class="grid grid-cols-3 gap-xs items-baseline"
                   >
                     <dt class="text-xs font-semibold text-dimmed">

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

@@ -3,7 +3,7 @@ interface PageRendererProps {
     useSurround?: boolean;
     surround?: PageSurround | null;
     surroundStatus?: 'idle' | 'pending' | 'success' | 'error';
-    resolvePage?: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
+    resolvePage: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
 }
 type __VLS_Props = PageRendererProps;
 type __VLS_ModelProps = {

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

@@ -11,7 +11,7 @@ const { useSurround = false, surroundStatus = "idle", surround = null, resolvePa
   useSurround: { type: Boolean, required: false },
   surround: { type: [Object, null], required: false },
   surroundStatus: { type: String, required: false },
-  resolvePage: { type: Function, required: false }
+  resolvePage: { type: Function, required: true }
 });
 const emit = defineEmits([]);
 provide("page-resolver", resolvePage);
@@ -26,7 +26,7 @@ const hasSurround = computed(() => !!(surround?.previous || surround?.next));
       <RCPageTOC
         :page-blocks="page.blocks"
         :levels="[2, 3, 4]"
-        class="hidden lg:flex lg:col-span-4 sticky top-32"
+        class="hidden lg:flex lg:col-span-4 sticky top-16"
       >
         <template #bottom> </template>
       </RCPageTOC>

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

@@ -3,7 +3,7 @@ interface PageRendererProps {
     useSurround?: boolean;
     surround?: PageSurround | null;
     surroundStatus?: 'idle' | 'pending' | 'success' | 'error';
-    resolvePage?: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
+    resolvePage: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
 }
 type __VLS_Props = PageRendererProps;
 type __VLS_ModelProps = {

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

@@ -84,7 +84,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <nav class="flex flex-col gap-sm self-start w-full" aria-label="Table of Contents">
+  <nav class="flex flex-col gap-sm w-full" aria-label="Table of Contents">
     <h5 v-if="title">
       {{ t(title) }}
     </h5>

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

@@ -0,0 +1,35 @@
+import { type PageDefinition, type Page } from "../../../types/index.js";
+export interface CreatePageModalProps {
+    isOpen: boolean;
+    definitions: Record<string, PageDefinition>;
+    loading?: boolean;
+}
+export interface CreatePageModalEmits {
+    close: [];
+    confirm: [page: Partial<Page>];
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CreatePageModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    confirm: (page: Partial<{
+        type: "Default";
+        properties: import("../../../types/index.js").BasePageProperties;
+    } & import("../../../types/index.js").BasePage>) => any;
+}, string, import("vue").PublicProps, Readonly<CreatePageModalProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onConfirm?: ((page: Partial<{
+        type: "Default";
+        properties: import("../../../types/index.js").BasePageProperties;
+    } & import("../../../types/index.js").BasePage>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,108 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import {} from "../../../types";
+import { tv } from "tailwind-variants";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const { isOpen, loading, definitions } = defineProps({
+  isOpen: { type: Boolean, required: true },
+  definitions: { type: Object, required: true },
+  loading: { type: Boolean, required: false }
+});
+const emits = defineEmits(["close", "confirm"]);
+const createPageModalStyles = tv({
+  slots: {
+    base: "flex flex-col gap-6",
+    group: "border border-neutral-200 rounded-lg p-4 bg-white shadow-sm",
+    groupTitle: "text-lg font-bold text-neutral-900 mb-4",
+    field: "flex flex-col gap-1.5",
+    label: "text-sm font-medium text-neutral-700",
+    input: "w-full px-3 py-2 rounded-md border border-neutral-300 focus:ring-2 focus:ring-primary-500 transition-all outline-hidden",
+    select: "w-full px-3 py-2 rounded-md border border-neutral-300 bg-white"
+  }
+});
+const styles = createPageModalStyles();
+const selectedType = ref("");
+const title = ref("");
+const slug = ref("");
+const typeOptions = computed(() => {
+  return Object.entries(definitions).map(([key, def]) => ({
+    label: t(def.typeLabelKey),
+    value: key
+  }));
+});
+watch(title, (newTitle) => {
+  slug.value = newTitle.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+});
+const handleConfirm = () => {
+  if (!selectedType.value) return;
+  const definition = definitions[selectedType.value];
+  if (!definition) {
+    console.error(`Definition for type "${selectedType.value}" not found.`);
+    return;
+  }
+  const properties = {};
+  Object.entries(definition.properties).forEach(([groupKey, group]) => {
+    properties[groupKey] = {};
+    Object.entries(group.fields).forEach(([fieldKey, field]) => {
+      properties[groupKey][fieldKey] = field.value;
+    });
+  });
+  const newPage = {
+    type: selectedType.value,
+    title: { en: title.value },
+    slug: slug.value,
+    properties,
+    blocks: definition.initialBlocks ? definition.initialBlocks() : []
+  };
+  emits("confirm", newPage);
+};
+</script>
+
+<template>
+  <UModal :model-value="isOpen" @update:model-value="emits('close')">
+    <slot/>
+    <template #content>
+      <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6">Create New Page</h3>
+          <UButton color="neutral" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="emits('close')" />
+        </div>
+      </template>
+
+      <div class="space-y-4 py-4">
+        <UFormField label="Page Template" required>
+          <USelect
+            v-model="selectedType"
+            :items="typeOptions"
+            :placeholder="t('editor.template_placeholder', 'Select a template...')"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField label="Title" required>
+          <UInput v-model="title" placeholder="e.g. My Awesome Movie" />
+        </UFormField>
+
+        <UFormField label="Slug" required>
+          <UInput v-model="slug" placeholder="my-awesome-movie" />
+        </UFormField>
+      </div>
+
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton color="neutral" variant="ghost" label="Cancel" @click="emits('close')" />
+          <UButton
+            color="primary"
+            label="Create & Edit"
+            :loading="loading"
+            :disabled="!selectedType || !title"
+            @click="handleConfirm"
+          />
+        </div>
+      </template>
+    </UCard>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,35 @@
+import { type PageDefinition, type Page } from "../../../types/index.js";
+export interface CreatePageModalProps {
+    isOpen: boolean;
+    definitions: Record<string, PageDefinition>;
+    loading?: boolean;
+}
+export interface CreatePageModalEmits {
+    close: [];
+    confirm: [page: Partial<Page>];
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CreatePageModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    confirm: (page: Partial<{
+        type: "Default";
+        properties: import("../../../types/index.js").BasePageProperties;
+    } & import("../../../types/index.js").BasePage>) => any;
+}, string, import("vue").PublicProps, Readonly<CreatePageModalProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onConfirm?: ((page: Partial<{
+        type: "Default";
+        properties: import("../../../types/index.js").BasePageProperties;
+    } & import("../../../types/index.js").BasePage>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,28 @@
+export interface DeletePageModalProps {
+    isOpen: boolean;
+    loading?: boolean;
+    pageTitle: string;
+}
+export interface DeletePageModalEmits {
+    (e: 'close'): void;
+    (e: 'confirm'): void;
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DeletePageModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<DeletePageModalProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,84 @@
+<script setup>
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+const { isOpen, loading, pageTitle } = defineProps({
+  isOpen: { type: Boolean, required: true },
+  loading: { type: Boolean, required: false },
+  pageTitle: { type: String, required: true }
+});
+const emits = defineEmits(["close", "confirm"]);
+const { t } = useI18n();
+const confirmationInput = ref("");
+const CONFIRMATION_TEXT = "DELETE";
+watch(() => isOpen, (val) => {
+  if (!val) confirmationInput.value = "";
+});
+const handleConfirm = () => {
+  if (confirmationInput.value === CONFIRMATION_TEXT) {
+    emits("confirm");
+  }
+};
+</script>
+
+<template>
+  <UModal :model-value="isOpen" @update:model-value="emits('close')">
+    <slot/>
+    <template #content>
+      <UCard :ui="{ body: 'space-y-4' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-error-600">
+              {{ t("editor.delete_page_title", "Delete Page") }}
+            </h3>
+            <UButton
+              color="neutral"
+              variant="ghost"
+              icon="lucide:x"
+              class="-my-1"
+              @click="emits('close')"
+            />
+          </div>
+        </template>
+
+        <div class="text-sm text-neutral-600 dark:text-neutral-400">
+          <p>
+            Are you sure you want to delete <strong>{{ pageTitle }}</strong>?
+            This action is permanent and cannot be undone.
+          </p>
+        </div>
+
+        <UFormField
+          :label="t('editor.delete_confirm_label', `Please type ${CONFIRMATION_TEXT} to confirm`)"
+          required
+        >
+          <UInput
+            v-model="confirmationInput"
+            :placeholder="CONFIRMATION_TEXT"
+            color="error"
+            autocomplete="off"
+            @keyup.enter="handleConfirm"
+          />
+        </UFormField>
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              :label="t('common.cancel', 'Cancel')"
+              @click="emits('close')"
+            />
+            <UButton
+              color="error"
+              icon="lucide:trash-2"
+              :label="t('editor.delete_button', 'Delete Permanently')"
+              :loading="loading"
+              :disabled="confirmationInput !== CONFIRMATION_TEXT"
+              @click="handleConfirm"
+            />
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,28 @@
+export interface DeletePageModalProps {
+    isOpen: boolean;
+    loading?: boolean;
+    pageTitle: string;
+}
+export interface DeletePageModalEmits {
+    (e: 'close'): void;
+    (e: 'confirm'): void;
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DeletePageModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<DeletePageModalProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/composables/index.d.ts

@@ -2,3 +2,4 @@ export * from "./useDateRange.js";
 export * from "./usePageEditor.js";
 export * from "./useBlockEditor.js";
 export * from "./usePageRegistry.js";
+export * from "./useInfobox.js";

package/dist/runtime/composables/index.js

@@ -2,3 +2,4 @@ export * from "./useDateRange.js";
 export * from "./usePageEditor.js";
 export * from "./useBlockEditor.js";
 export * from "./usePageRegistry.js";
+export * from "./useInfobox.js";

package/dist/runtime/composables/index.mjs

@@ -2,3 +2,4 @@ export * from "./useDateRange.mjs";
 export * from "./usePageEditor.mjs";
 export * from "./useBlockEditor.mjs";
 export * from "./usePageRegistry.mjs";
+export * from "./useInfobox.mjs";

package/dist/runtime/composables/useInfobox.d.ts

@@ -0,0 +1,8 @@
+import type { Property, PropertyGroup, BasePageProperties } from '../types/index.js';
+export declare const useInfobox: (properties: BasePageProperties) => {
+    isFieldVisible: (schema: Property, isReadOnly: boolean) => boolean;
+    shouldRenderGroup: (group: PropertyGroup, isReadOnly: boolean) => boolean;
+    getSortedFields: (fields: Record<string, Property>) => [string, Property<any>][];
+    getSortedGroups: (props: BasePageProperties) => [string, PropertyGroup][];
+    locale: import("vue").WritableComputedRef<string, string>;
+};

package/dist/runtime/composables/useInfobox.js

@@ -0,0 +1,31 @@
+import { useI18n } from "vue-i18n";
+export const useInfobox = (properties) => {
+  const { locale } = useI18n();
+  const isFieldVisible = (schema, isReadOnly) => {
+    const passesLogic = !schema.visibleIf || schema.visibleIf(properties);
+    if (!passesLogic) return false;
+    if (isReadOnly) {
+      const val = schema.value;
+      if (schema.type === "text") return !!val?.[locale.value];
+      if (schema.type === "text-array") return Array.isArray(val) && val.length > 0;
+      return val !== void 0 && val !== null && val !== "";
+    }
+    return true;
+  };
+  const shouldRenderGroup = (group, isReadOnly) => {
+    return Object.values(group.fields).some((schema) => isFieldVisible(schema, isReadOnly));
+  };
+  const getSortedFields = (fields) => {
+    return Object.entries(fields).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
+  };
+  const getSortedGroups = (props) => {
+    return Object.entries(props).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
+  };
+  return {
+    isFieldVisible,
+    shouldRenderGroup,
+    getSortedFields,
+    getSortedGroups,
+    locale
+  };
+};

package/dist/runtime/composables/useInfobox.mjs

@@ -0,0 +1,31 @@
+import { useI18n } from "vue-i18n";
+export const useInfobox = (properties) => {
+  const { locale } = useI18n();
+  const isFieldVisible = (schema, isReadOnly) => {
+    const passesLogic = !schema.visibleIf || schema.visibleIf(properties);
+    if (!passesLogic) return false;
+    if (isReadOnly) {
+      const val = schema.value;
+      if (schema.type === "text") return !!val?.[locale.value];
+      if (schema.type === "text-array") return Array.isArray(val) && val.length > 0;
+      return val !== void 0 && val !== null && val !== "";
+    }
+    return true;
+  };
+  const shouldRenderGroup = (group, isReadOnly) => {
+    return Object.values(group.fields).some((schema) => isFieldVisible(schema, isReadOnly));
+  };
+  const getSortedFields = (fields) => {
+    return Object.entries(fields).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
+  };
+  const getSortedGroups = (props) => {
+    return Object.entries(props).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
+  };
+  return {
+    isFieldVisible,
+    shouldRenderGroup,
+    getSortedFields,
+    getSortedGroups,
+    locale
+  };
+};

package/dist/runtime/composables/usePageEditor.js

@@ -13,14 +13,12 @@ export function usePageEditor(page, maxHistorySize = 100) {
   const undo = () => {
     if (history.value.length === 0) return;
     future.value = [JSON.stringify(page.value), ...future.value];
-    const previous = JSON.parse(history.value.pop());
-    page.value = previous;
+    page.value = JSON.parse(history.value.pop());
   };
   const redo = () => {
     if (future.value.length === 0) return;
     history.value = [...history.value, JSON.stringify(page.value)];
-    const next = JSON.parse(future.value.shift());
-    page.value = next;
+    page.value = JSON.parse(future.value.shift());
   };
   const canUndo = computed(() => history.value.length > 0);
   const canRedo = computed(() => future.value.length > 0);

package/dist/runtime/composables/usePageEditor.mjs

@@ -13,14 +13,12 @@ export function usePageEditor(page, maxHistorySize = 100) {
   const undo = () => {
     if (history.value.length === 0) return;
     future.value = [JSON.stringify(page.value), ...future.value];
-    const previous = JSON.parse(history.value.pop());
-    page.value = previous;
+    page.value = JSON.parse(history.value.pop());
   };
   const redo = () => {
     if (future.value.length === 0) return;
     history.value = [...history.value, JSON.stringify(page.value)];
-    const next = JSON.parse(future.value.shift());
-    page.value = next;
+    page.value = JSON.parse(future.value.shift());
   };
   const canUndo = computed(() => history.value.length > 0);
   const canRedo = computed(() => future.value.length > 0);

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

@@ -32,6 +32,7 @@ export interface PageDefinition {
     initialBlocks?: () => Block[];
 }
 export interface BasePageProperties {
+    [key: string]: PropertyGroup | undefined;
 }
 /**
  * Common fields shared by every page regardless of type.

package/package.json

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