rimelight-components 2.0.98 → 2.0.99

package/dist/module.json

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

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

@@ -1,8 +1,8 @@
 import type { Page } from "../../types/index.js";
-interface Props {
+interface PageEditorProps {
     isSaving: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = PageEditorProps;
 type __VLS_ModelProps = {
     modelValue: Page;
 };

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

@@ -1,8 +1,12 @@
 <script setup>
 import { ref, computed, useTemplateRef } from "vue";
 import { usePageEditor } from "../../composables";
+import { getLocalizedContent } from "../../utils";
 const page = defineModel({ type: null, ...{ required: true } });
 const { undo, redo, canUndo, canRedo, captureSnapshot } = usePageEditor(page);
+const { isSaving } = defineProps({
+  isSaving: { type: Boolean, required: true }
+});
 const emit = defineEmits(["save"]);
 const handleSave = () => {
   const dataToPersist = JSON.parse(JSON.stringify(page.value));
@@ -14,9 +18,6 @@ defineExpose({
   canUndo,
   canRedo
 });
-defineProps({
-  isSaving: { type: Boolean, required: true }
-});
 const editorRef = useTemplateRef("editor");
 const showPreview = ref(false);
 const editorPanelClass = computed(() => ({
@@ -71,33 +72,58 @@ const editorPanelClass = computed(() => ({
       </div>
     </template>
   </UHeader>
-
-  <div class="mt-24 grid gap-xl" :class="showPreview ? 'grid-cols-2' : 'grid-cols-1'">
-    <UPage :class="editorPanelClass">
-      <template #default>
-        <UPageHeader />
+  <UContainer class="mt-24 grid gap-xl" :class="showPreview ? 'grid-cols-2 max-w-full' : 'grid-cols-1'">
+    <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"
         />
-      </template>
-      <template #right>
-        <UPageAside>
-          <RCPagePropertiesEditor v-model="page" />
-        </UPageAside>
-      </template>
-    </UPage>
-    <UPage v-if="showPreview">
-      <template #default>
-        <RCBlockViewRenderer :blocks="page.blocks" />
-      </template>
-      <template #right>
-        <UPageAside>
-          <RCPagePropertiesRenderer v-model="page"/>
-        </UPageAside>
-      </template>
-    </UPage>
-  </div>
+        <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>
+      </div>
+    </div>
+    <div class="flex flex-row gap-xl">
+      <USeparator orientation="vertical" />
+      <RCPageRenderer v-if="showPreview" v-model="page"/>
+    </div>
+  </UContainer>
 </template>

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

@@ -1,8 +1,8 @@
 import type { Page } from "../../types/index.js";
-interface Props {
+interface PageEditorProps {
     isSaving: boolean;
 }
-type __VLS_Props = Props;
+type __VLS_Props = PageEditorProps;
 type __VLS_ModelProps = {
     modelValue: Page;
 };

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

@@ -1,13 +1,9 @@
 <script setup>
-import { computed } from "vue";
 import { useI18n } from "vue-i18n";
+import { getLocalizedContent } from "../../utils";
 import {} from "../../types";
 const page = defineModel({ type: null, ...{ required: true } });
 const locale = useI18n().locale;
-const properties = computed(() => page.value.properties);
-const groups = computed(() => {
-  return page.value.properties;
-});
 const isFieldVisible = (fieldSchema) => {
   if (!fieldSchema.visibleIf) return true;
   return fieldSchema.visibleIf(page.value.properties);
@@ -18,17 +14,18 @@ const getSortedFields = (fields) => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-y-8 pr-2 pb-12">
-    <div class="flex items-center justify-between border-b border-border pb-4">
-      <h3 class="text-xs font-black uppercase tracking-widest text-muted-foreground">
-        {{ page.type }} Metadata
+  <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">
-        {{ page.slug }}
-      </UBadge>
-    </div>
+      <UBadge variant="subtle" size="sm" color="primary" :label="page.type"/>
+    </template>
 
-    <div v-for="(group, groupId) in groups" :key="groupId" class="space-y-4">
+    <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] }}
@@ -40,76 +37,64 @@ const getSortedFields = (fields) => {
         <template v-for="[fieldKey, schema] in getSortedFields(group.fields)" :key="fieldKey">
 
           <UFormField
-            v-if="isFieldVisible(schema)"
-            :label="schema.label"
-            :name="fieldKey"
+              v-if="isFieldVisible(schema)"
+              :label="getLocalizedContent(schema.label, locale)"
+              :name="fieldKey"
           >
             <UInput
-              v-if="schema.type === 'text'"
-              v-model="properties[groupId].fields[fieldKey].value[locale]"
-              variant="subtle"
-              placeholder="..."
+                v-if="schema.type === 'text'"
+                v-model="schema.value[locale]"
+                variant="subtle"
+                placeholder="..."
             />
 
             <UInput
-              v-else-if="schema.type === 'number'"
-              v-model.number="properties[groupId].fields[fieldKey].value"
-              type="number"
-              variant="subtle"
+                v-else-if="schema.type === 'number'"
+                v-model.number="schema.value"
+                type="number"
+                variant="subtle"
             />
 
             <USelect
-              v-else-if="schema.type === 'enum'"
-              v-model="properties[groupId].fields[fieldKey].value"
-              :items="schema.options || []"
-              variant="subtle"
+                v-else-if="schema.type === 'enum'"
+                v-model="schema.value"
+                :items="schema.options || []"
+                variant="subtle"
             />
 
             <UInputMenu
-              v-else-if="schema.type === 'text-array'"
-              v-model="properties[groupId].fields[fieldKey].value[locale]"
-              multiple
-              creatable
-              variant="subtle"
-              placeholder="Add item..."
+                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..."
             />
 
             <UInput
-              v-else-if="schema.type === 'page'"
-              v-model="properties[groupId].fields[fieldKey].value"
-              icon="lucide:link-2"
-              variant="subtle"
-              :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
+                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>
 
-    <USeparator />
+    <USeparator class="my-6" />
 
     <UFormField label="Global Search Tags">
       <UInputMenu
-        v-model="page.tags"
-        multiple
-        creatable
-        icon="lucide:tag"
-        variant="subtle"
-        placeholder="Add tags..."
+          v-model="page.tags"
+          multiple
+          creatable
+          icon="lucide:tag"
+          variant="subtle"
+          placeholder="Add tags..."
       />
     </UFormField>
-
-    <div class="mt-auto pt-6 text-[9px] font-mono text-muted-foreground/60 space-y-1">
-      <div class="flex justify-between">
-        <span>ID:</span>
-        <span>{{ page.id }}</span>
-      </div>
-      <ClientOnly>
-      <div class="flex justify-between">
-        <span>Last Updated:</span>
-        <span>{{ page.updated_at }}</span>
-      </div>
-      </ClientOnly>
-    </div>
-  </div>
+  </UCard>
 </template>

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

@@ -1,7 +1,17 @@
 import { type Page } from '../../types/index.js';
-type __VLS_Props = {
+type __VLS_ModelProps = {
     modelValue: Page;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        type: "Default";
+        properties: import("../../types/index.js").BasePageProperties;
+    } & import("../../types/index.js").BasePage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        type: "Default";
+        properties: import("../../types/index.js").BasePageProperties;
+    } & import("../../types/index.js").BasePage) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,99 +1,102 @@
 <script setup>
-import { computed } from "vue";
+import { getLocalizedContent } from "../../utils";
 import { useI18n } from "vue-i18n";
 import {
 } from "../../types";
-const props = defineProps({
-  modelValue: { type: null, required: true }
-});
-const locale = useI18n().locale;
-const properties = computed(() => props.modelValue.properties);
-const displayGroups = computed(() => {
-  return Object.entries(properties.value || {}).map(([groupId, group]) => {
-    const visibleFields = Object.entries(group.fields || {}).filter(([fieldKey, schema]) => {
-      const value = schema.type === "text" || schema.type === "text-array" ? schema.value?.[locale.value] : schema.value;
-      const isVisible = !schema.visibleIf || schema.visibleIf(props.modelValue.properties);
-      if (!isVisible) return false;
-      if (Array.isArray(value)) return value.length > 0;
-      return value !== void 0 && value !== null && value !== "";
-    }).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
-    return {
-      ...group,
-      groupId,
-      visibleFields
-    };
-  }).filter((group) => group.visibleFields.length > 0);
-});
+const page = defineModel({ type: null, ...{ required: true } });
+const { t, locale } = useI18n();
+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));
+};
 </script>
 
 <template>
-  <div class="wiki-renderer flex flex-col border border-border rounded-lg bg-muted/20 overflow-hidden shadow-sm">
-    <div class="bg-muted/50 p-4 border-b border-border text-center">
-      <div class="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/70 mb-1">
-        {{ props.modelValue.type }}
-      </div>
-      <h2 class="text-xl font-serif font-bold italic text-foreground">
-        {{ properties.name?.value?.[locale] || props.modelValue.slug }}
-      </h2>
-    </div>
-
-    <div v-for="group in displayGroups" :key="group.groupId" class="border-b last:border-b-0 border-border/40">
-      <div class="bg-muted/30 px-3 py-1.5 text-[10px] font-black text-primary uppercase tracking-tighter border-b border-border/10">
-        {{ group.label[locale] }}
-      </div>
-
-      <dl class="p-3 space-y-2.5">
-        <div
-          v-for="[fieldKey, schema] in group.visibleFields"
-          :key="fieldKey"
-          class="grid grid-cols-3 gap-x-3 items-baseline"
-        >
-          <dt class="text-[11px] font-semibold text-muted-foreground leading-tight">
-            {{ schema.label }}
-          </dt>
-
-          <dd class="text-xs col-span-2 text-foreground leading-snug">
-            <div v-if="schema.type === 'text-array'" class="flex flex-wrap gap-1">
-              <template v-for="(item, index) in properties[group.groupId].fields[fieldKey].value[locale]" :key="index">
-                <span class="font-medium">{{ item }}</span>
-                <span v-if="index < properties[group.groupId].fields[fieldKey].value[locale].length - 1" class="text-muted-foreground/50">, </span>
-              </template>
-            </div>
-
-            <span v-else-if="schema.type === 'page'" class="text-primary font-bold hover:underline cursor-pointer">
-              {{ properties[group.groupId].fields[fieldKey].value }}
-            </span>
-
-            <span v-else-if="schema.type === 'text'" class="font-medium">
-              {{ properties[group.groupId].fields[fieldKey].value[locale] }}
-            </span>
-
-            <span v-else class="font-medium">
-              {{ properties[group.groupId].fields[fieldKey].value }}
-            </span>
-          </dd>
+  <aside class="flex flex-col gap-xl">
+    <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">
+          <h3>
+            {{ getLocalizedContent(page.title, locale) }}
+          </h3>
+          <span class="text-xs">{{ page.type }}</span>
+          <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>
         </div>
-      </dl>
-    </div>
+      </template>
 
-    <div v-if="props.modelValue.tags?.length" class="p-3 bg-background/50 border-t border-border">
-      <div class="flex flex-wrap gap-1.5">
-        <UBadge
-          v-for="tag in props.modelValue.tags"
-          :key="String(tag[locale])"
-          variant="subtle"
-          size="sm"
-          color="neutral"
-          class="text-[9px] font-bold uppercase tracking-tight"
-        >
-          #{{ tag[locale] }}
-        </UBadge>
-      </div>
-    </div>
+      <template #default>
+        <template v-for="(group, groupId) in page.properties" :key="groupId">
+          <UCollapsible v-if="shouldRenderGroup(group)" :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>
 
-  </div>
-</template>
+            <template #content>
+              <dl class="p-sm flex flex-col gap-xs">
+                <template v-for="[fieldKey, schema] in getSortedFields(group.fields)" :key="fieldKey">
+                  <div
+                      v-if="shouldRenderField(schema)"
+                      class="grid grid-cols-3 gap-xs items-baseline"
+                  >
+                    <dt class="text-xs font-semibold text-dimmed">
+                      {{ getLocalizedContent(schema.label, locale) }}
+                    </dt>
 
-<style scoped>
-.font-serif{font-family:Georgia,Times New Roman,Times,serif}
-</style>
+                    <dd class="text-xs col-span-2">
+                      <ul v-if="schema.type === 'text-array'" class="flex flex-wrap">
+                        <li v-for="(item, index) in schema.value" :key="index">
+                          <span class="font-medium">
+                            {{ getLocalizedContent(item, locale) }}
+                          </span>
+                        </li>
+                      </ul>
+                      <span v-else-if="schema.type === 'text'">
+                        {{ getLocalizedContent(schema.value, locale) }}
+                      </span>
+                      <span v-else>
+                        {{ schema.value }}
+                      </span>
+                    </dd>
+                  </div>
+                </template>
+              </dl>
+            </template>
+          </UCollapsible>
+        </template>
+      </template>
+    </UCard>
+  </aside>
+</template>

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

@@ -1,7 +1,17 @@
 import { type Page } from '../../types/index.js';
-type __VLS_Props = {
+type __VLS_ModelProps = {
     modelValue: Page;
 };
-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 __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        type: "Default";
+        properties: import("../../types/index.js").BasePageProperties;
+    } & import("../../types/index.js").BasePage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        type: "Default";
+        properties: import("../../types/index.js").BasePageProperties;
+    } & import("../../types/index.js").BasePage) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,21 @@
+import type { Page } from "../../types/index.js";
+interface PageRendererProps {
+}
+type __VLS_Props = PageRendererProps;
+type __VLS_ModelProps = {
+    modelValue: Page;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        type: "Default";
+        properties: import("#imports").BasePageProperties;
+    } & import("#imports").BasePage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        type: "Default";
+        properties: import("#imports").BasePageProperties;
+    } & import("#imports").BasePage) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,57 @@
+<script setup>
+import { getLocalizedContent } from "../../utils";
+import { useI18n } from "#imports";
+const page = defineModel({ type: null, ...{ required: true } });
+const { t, locale } = useI18n();
+const {} = defineProps({});
+const emit = defineEmits([]);
+</script>
+
+<template>
+  <UContainer class="flex flex-col">
+    <div class="grid grid-cols-1 lg:grid-cols-4 gap-xl p-xl bg-muted">
+      <RCPagePropertiesRenderer v-model="page" class="order-1 lg:order-2 lg:col-span-1" />
+      <div class="order-2 lg:order-1 lg:col-span-3 flex flex-col gap-xl">
+        <UPageHeader
+            :title="getLocalizedContent(page.title, 'en')"
+            :description="getLocalizedContent(page.description, 'en') ?? ''"
+        />
+        <RCBlockViewRenderer :blocks="page.blocks" />
+      </div>
+    </div>
+    <div class="flex flex-col gap-xs text-xs 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>
+  </UContainer>
+</template>

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

@@ -0,0 +1,21 @@
+import type { Page } from "../../types/index.js";
+interface PageRendererProps {
+}
+type __VLS_Props = PageRendererProps;
+type __VLS_ModelProps = {
+    modelValue: Page;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        type: "Default";
+        properties: import("#imports").BasePageProperties;
+    } & import("#imports").BasePage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        type: "Default";
+        properties: import("#imports").BasePageProperties;
+    } & import("#imports").BasePage) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -6,8 +6,8 @@ declare global {
 }
 export type PageType = keyof RegisterPageTypes;
 export interface Property<T = any> {
-    value: T;
-    label: string;
+    value: T extends never[] ? Localized[] : T;
+    label: Localized<string>;
     type: "number" | "text" | "text-array" | "enum" | "page" | "page-array";
     options?: string[];
     allowedPageTypes?: PageType[];
@@ -19,6 +19,7 @@ export interface PropertyGroup {
     label: Localized<string>;
     order?: number;
     fields: Record<string, Property>;
+    defaultOpen: boolean;
 }
 /**
  * A PageTemplate is the single definition for a page's properties and initial blocks.

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

@@ -1,11 +1,24 @@
 import { type MaybeRefOrGetter } from 'vue';
-import type { Page, Localized, PageDefinition } from "../types/pages.js";
+import { type Page, type Localized, type PageDefinition, 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]>;
+} : T;
 /**
  * Helper to define a page with full type safety and literal preservation.
  * This is used by consuming apps to define their custom page types.
  */
-export declare function definePageDefinition<T extends PageDefinition>(def: T): T;
+export declare function definePageDefinition<T extends PageDefinition>(def: T): {
+    [K in keyof T]: K extends 'properties' ? {
+        [G in keyof T['properties']]: {
+            label: Localized<string>;
+            defaultOpen: boolean;
+            fields: {
+                [F in keyof T['properties'][G]['fields']]: Property<WidenProperty<T['properties'][G]['fields'][F]['value']>>;
+            };
+        };
+    } : T[K];
+};
 /**
  * Ensures a page strictly adheres to its PageDefinition.
  * - Adds missing properties and groups in the correct order.
@@ -14,3 +27,4 @@ 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;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rimelight-components",
   "description": "A component library by Rimelight Entertainment.",
-  "version": "2.0.98",
+  "version": "2.0.99",
   "type": "module",
   "repository": {
     "type": "git",