rimelight-components 2.1.17 → 2.1.18

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

@@ -4,9 +4,20 @@ import { getLocalizedContent } from "../../utils";
 import { useI18n } from "vue-i18n";
 import {} from "../../types";
 import { useAsyncData } from "#imports";
+import { tv } from "tailwind-variants";
 const { pageId } = defineProps({
   pageId: { type: String, required: true }
 });
+const emit = defineEmits([]);
+const pageMentionStyles = tv({
+  slots: {
+    link: "inline-flex items-baseline gap-1 align-middle hover:text-primary transition-colors font-medium text-inherit",
+    icon: "w-4 h-4 rounded-full object-cover shrink-0",
+    text: "truncate font-medium",
+    skeleton: "h-3 w-24"
+  }
+});
+const { link, icon, text, skeleton } = pageMentionStyles();
 const { locale } = useI18n();
 const resolver = inject("page-resolver");
 const { data: linkedPage, status } = await useAsyncData(`page-mention-${pageId}`, async () => {
@@ -26,17 +37,17 @@ const { data: linkedPage, status } = await useAsyncData(`page-mention-${pageId}`
   <NuxtLink
     v-if="linkedPage"
     :to="`/${linkedPage.slug}`"
-    class="inline-flex items-baseline gap-1 align-middle hover:text-primary transition-colors font-medium text-inherit"
+    :class="link()"
   >
     <NuxtImg
       v-if="linkedPage.icon?.src"
       :src="linkedPage.icon.src"
       :alt="linkedPage.icon.alt"
-      class="w-4 h-4 rounded-full object-cover shrink-0"
+      :class="icon()"
     />
-    <span class="truncate font-medium">
+    <span :class="text()">
       {{ getLocalizedContent(linkedPage.title, locale) }}
     </span>
   </NuxtLink>
-  <USkeleton v-else-if="status === 'pending'" class="h-3 w-24" />
+  <USkeleton v-else-if="status === 'pending'" :class="skeleton()" />
 </template>

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

@@ -1,6 +1,8 @@
-interface PageMentionProps {
+export interface PageMentionProps {
     pageId: string;
 }
+export interface PageMentionEmits {
+}
 declare const __VLS_export: import("vue").DefineComponent<PageMentionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageMentionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,13 +1,19 @@
 import { type Page } from "../../types/index.js";
+export interface PagePropertiesEditorProps {
+}
+type __VLS_Props = PagePropertiesEditorProps;
+export interface PagePropertiesEditorEmits {
+}
 type __VLS_ModelProps = {
     modelValue: Page;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;

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

@@ -5,6 +5,37 @@ import { usePageRegistry, useInfobox } from "../../composables";
 import { getLocalizedContent } from "../../utils";
 import {} from "@nuxt/ui/components/Tabs.vue";
 import {} from "../../types";
+import { tv } from "tailwind-variants";
+const props = defineProps({});
+const emit = defineEmits([]);
+const pagePropertiesEditorStyles = tv({
+  slots: {
+    aside: "flex flex-col gap-md",
+    icon: "rounded-full w-12 h-12 object-cover",
+    titleInput: "w-full",
+    type: "text-sm",
+    tags: "flex flex-row flex-wrap gap-xs",
+    tabs: "w-full",
+    image: "w-full object-cover",
+    groupButton: "group rounded-none bg-elevated text-default",
+    details: "p-sm flex flex-col gap-xs",
+    field: "w-full",
+    links: "flex flex-col gap-xs"
+  }
+});
+const {
+  aside,
+  icon,
+  titleInput,
+  type,
+  tags,
+  tabs,
+  image,
+  groupButton,
+  details,
+  field,
+  links
+} = pagePropertiesEditorStyles();
 const page = defineModel({ type: null, ...{ required: true } });
 const { getTypeLabelKey } = usePageRegistry();
 const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(page.value.properties);
@@ -30,7 +61,7 @@ const updateTextArray = (schema, vals) => {
 </script>
 
 <template>
-  <aside class="flex flex-col gap-md">
+  <aside :class="aside()">
     <UCard
       variant="soft"
       :ui="{ root: 'divide-none', header: 'bg-accented text-center', body: 'p-0 sm:p-0 bg-muted' }"
@@ -41,7 +72,7 @@ const updateTextArray = (schema, vals) => {
             v-if="page.icon?.src"
             :src="page.icon?.src"
             :alt="page.icon?.alt"
-            class="rounded-full w-12 h-12 object-cover"
+            :class="icon()"
           />
 
           <UInput
@@ -50,12 +81,12 @@ const updateTextArray = (schema, vals) => {
             placeholder="Enter page title..."
             size="xl"
             :ui="{ base: 'text-center font-bold text-lg' }"
-            class="w-full"
+            :class="titleInput()"
           />
 
-          <span class="text-sm">{{ t(getTypeLabelKey(page.type)) }}</span>
+          <span :class="type()">{{ t(getTypeLabelKey(page.type)) }}</span>
 
-          <div v-if="page.tags?.length" class="flex flex-row flex-wrap gap-xs">
+          <div v-if="page.tags?.length" :class="tags()">
             <UBadge
               v-for="tag in page.tags"
               :key="tag[locale]"
@@ -75,10 +106,10 @@ const updateTextArray = (schema, vals) => {
               variant="link"
               size="xs"
               color="neutral"
-              class="w-full"
+              :class="tabs()"
             >
               <template #content="{ item }">
-                <RCImage :src="item.img.src" :alt="item.img.alt" class="w-full object-cover" />
+                <RCImage :src="item.img.src" :alt="item.img.alt" :class="image()" />
               </template>
             </UTabs>
 
@@ -86,7 +117,7 @@ const updateTextArray = (schema, vals) => {
               <RCImage
                 :src="page.images[0].src"
                 :alt="page.images[0].alt"
-                class="w-full object-cover"
+                :class="image()"
               />
             </div>
           </div>
@@ -105,12 +136,13 @@ const updateTextArray = (schema, vals) => {
   trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
 }"
                 block
-                class="group rounded-none bg-elevated text-default"
+                :class="groupButton()"
               />
             </template>
 
             <template #content>
-              <dl class="p-sm flex flex-col gap-xs">
+              <ClientOnly>
+               <dl :class="details()">
                 <template v-for="[fieldKey, schema] in getSortedFields(group.fields)" :key="fieldKey">
                   <UFormField
                     v-if="isFieldVisible(schema, false)"
@@ -122,7 +154,7 @@ const updateTextArray = (schema, vals) => {
                       v-model="schema.value.en"
                       variant="subtle"
                       placeholder="Type here..."
-                      class="w-full"
+                      :class="field()"
                     />
 
                     <UInput
@@ -130,7 +162,7 @@ const updateTextArray = (schema, vals) => {
                       v-model.number="schema.value"
                       type="number"
                       variant="subtle"
-                      class="w-full"
+                      :class="field()"
                     />
 
                     <USelect
@@ -138,7 +170,7 @@ const updateTextArray = (schema, vals) => {
                       v-model="schema.value"
                       :items="schema.options || []"
                       variant="subtle"
-                      class="w-full"
+                      :class="field()"
                     />
 
                     <UInputMenu
@@ -149,7 +181,7 @@ const updateTextArray = (schema, vals) => {
                       creatable
                       variant="subtle"
                       placeholder="Add item..."
-                      class="w-full"
+                      :class="field()"
                     />
 
                     <UInput
@@ -158,7 +190,7 @@ const updateTextArray = (schema, vals) => {
                       icon="lucide:link-2"
                       variant="subtle"
                       :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
-                      class="w-full"
+                      :class="field()"
                     />
 
                     <USelectMenu
@@ -167,17 +199,18 @@ const updateTextArray = (schema, vals) => {
                       icon="lucide:link-2"
                       variant="subtle"
                       :placeholder="`Select ${schema.allowedPageTypes?.join('/')}`"
-                      class="w-full"
+                      :class="field()"
                     />
                   </UFormField>
                 </template>
               </dl>
+              </ClientOnly>
             </template>
           </UCollapsible>
         </template>
       </template>
     </UCard>
-    <div class="flex flex-col gap-xs">
+    <div :class="links()">
       <h6>Links</h6>
       <UButton
         v-for="(link, index) in page.links"

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

@@ -1,13 +1,19 @@
 import { type Page } from "../../types/index.js";
+export interface PagePropertiesEditorProps {
+}
+type __VLS_Props = PagePropertiesEditorProps;
+export interface PagePropertiesEditorEmits {
+}
 type __VLS_ModelProps = {
     modelValue: Page;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;

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

@@ -1,13 +1,19 @@
 import { type Page } from '../../types/index.js';
+export interface PagePropertiesRendererProps {
+}
+type __VLS_Props = PagePropertiesRendererProps;
+export interface PagePropertiesRendererEmits {
+}
 type __VLS_ModelProps = {
     modelValue: Page;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;

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

@@ -7,6 +7,53 @@ import {} from "@nuxt/ui/components/Tabs.vue";
 import { useI18n } from "vue-i18n";
 import { useShare, useClipboard } from "@vueuse/core";
 import {} from "../../types";
+import { tv } from "tailwind-variants";
+const props = defineProps({});
+const emit = defineEmits([]);
+const pagePropertiesRendererStyles = tv({
+  slots: {
+    aside: "flex flex-col gap-md",
+    actions: "flex flex-row flex-wrap gap-sm",
+    icon: "rounded-full w-12 h-12 object-cover",
+    title: "",
+    type: "text-sm",
+    tags: "flex flex-row flex-wrap gap-xs",
+    tabs: "w-full",
+    image: "w-full object-cover",
+    groupButton: "group rounded-none bg-elevated text-default",
+    details: "p-sm flex flex-col gap-xs",
+    field: "grid grid-cols-3 gap-xs items-baseline",
+    fieldLabel: "text-xs font-semibold text-dimmed",
+    fieldValue: "text-xs col-span-2",
+    list: "flex flex-wrap list-disc list-inside",
+    listItem: "font-medium",
+    pageArrayList: "flex flex-col gap-y-1",
+    pageArrayItem: "flex items-center gap-x-2",
+    pageArrayBullet: "w-1 h-1 rounded-full bg-inverted shrink-0",
+    links: "flex flex-col gap-xs"
+  }
+});
+const {
+  aside,
+  actions,
+  icon,
+  title: titleClass,
+  type,
+  tags,
+  tabs,
+  image,
+  groupButton,
+  details,
+  field,
+  fieldLabel,
+  fieldValue,
+  list,
+  listItem,
+  pageArrayList,
+  pageArrayItem,
+  pageArrayBullet,
+  links
+} = pagePropertiesRendererStyles();
 const page = defineModel({ type: null, ...{ required: true } });
 const { getTypeLabelKey } = usePageRegistry();
 const { isFieldVisible, shouldRenderGroup, getSortedFields, getSortedGroups } = useInfobox(page.value.properties);
@@ -62,8 +109,8 @@ const imageTabs = computed(() => {
 </script>
 
 <template>
-  <aside class="flex flex-col gap-md">
-    <div class="flex flex-row flex-wrap gap-sm">
+  <aside :class="aside()">
+    <div :class="actions()">
       <UButton variant="soft" color="neutral" icon="lucide:share" size="sm" @click="sharePage()" />
       <UButton variant="soft" color="neutral" icon="lucide:link" size="sm" @click="copyLink()" />
     </div>
@@ -77,16 +124,16 @@ const imageTabs = computed(() => {
             v-if="page.icon?.src"
             :src="page.icon?.src"
             :alt="page.icon?.alt"
-            class="rounded-full w-12 h-12 object-cover"
+            :class="icon()"
           />
 
-          <h3>
+          <h3 :class="titleClass()">
             {{ getLocalizedContent(page.title, locale) }}
           </h3>
 
-          <span class="text-sm">{{ t(getTypeLabelKey(page.type)) }}</span>
+          <span :class="type()">{{ t(getTypeLabelKey(page.type)) }}</span>
 
-          <div v-if="page.tags?.length" class="flex flex-row flex-wrap gap-xs">
+          <div v-if="page.tags?.length" :class="tags()">
             <UBadge
               v-for="tag in page.tags"
               :key="tag[locale]"
@@ -106,17 +153,17 @@ const imageTabs = computed(() => {
               variant="link"
               size="xs"
               color="neutral"
-              class="w-full"
+              :class="tabs()"
             >
               <template #content="{ item }">
-                <RCImage :src="item.img.src" :alt="item.img.alt" class="w-full object-cover" />
+                <RCImage :src="item.img.src" :alt="item.img.alt" :class="image()" />
               </template>
             </UTabs>
 
             <div v-else-if="page.images[0]">
               <RCImage :src="page.images[0].src"
                        :alt="page.images[0].alt"
-                       class="w-full object-cover" />
+                       :class="image()" />
             </div>
           </div>
         </div>
@@ -134,34 +181,34 @@ const imageTabs = computed(() => {
   trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
 }"
                 block
-                class="group rounded-none bg-elevated text-default"
+                :class="groupButton()"
               />
             </template>
 
             <template #content>
-              <dl class="p-sm flex flex-col gap-xs">
+              <dl :class="details()">
                 <template
                   v-for="[fieldKey, schema] in getSortedFields(group.fields)"
                   :key="fieldKey"
                 >
                   <div
                     v-if="isFieldVisible(schema, true)"
-                    class="grid grid-cols-3 gap-xs items-baseline"
+                    :class="field()"
                   >
-                    <dt class="text-xs font-semibold text-dimmed">
+                    <dt :class="fieldLabel()">
                       {{ getLocalizedContent(schema.label, locale) }}
                     </dt>
 
-                    <dd class="text-xs col-span-2">
+                    <dd :class="fieldValue()">
                       <span v-if="schema.type === 'text'">
                         {{ getLocalizedContent(schema.value, locale) }}
                       </span>
                       <ul
                         v-else-if="schema.type === 'text-array'"
-                        class="flex flex-wrap list-disc list-inside"
+                        :class="list()"
                       >
                         <li v-for="(item, index) in schema.value" :key="index">
-                          <span class="font-medium">
+                          <span :class="listItem()">
                             {{ getLocalizedContent(item, locale) }}
                           </span>
                         </li>
@@ -173,11 +220,11 @@ const imageTabs = computed(() => {
 
                       <ul
                         v-else-if="schema.type === 'page-array' && Array.isArray(schema.value)"
-                        class="flex flex-col gap-y-1"
+                        :class="pageArrayList()"
                       >
-                        <li v-for="id in schema.value" :key="id" class="flex items-center gap-x-2">
+                        <li v-for="id in schema.value" :key="id" :class="pageArrayItem()">
                           <span
-                            class="w-1 h-1 rounded-full bg-inverted shrink-0"
+                            :class="pageArrayBullet()"
                             aria-hidden="true"
                           />
 
@@ -197,7 +244,7 @@ const imageTabs = computed(() => {
         </template>
       </template>
     </UCard>
-    <div class="flex flex-col gap-xs">
+    <div :class="links()">
       <h6>Links</h6>
       <UButton
         v-for="(link, index) in page.links"

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

@@ -1,13 +1,19 @@
 import { type Page } from '../../types/index.js';
+export interface PagePropertiesRendererProps {
+}
+type __VLS_Props = PagePropertiesRendererProps;
+export interface PagePropertiesRendererEmits {
+}
 type __VLS_ModelProps = {
     modelValue: Page;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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("../../types/index.js").BasePageProperties;
     } & import("../../types/index.js").BasePage) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         type: "Default";
         properties: import("../../types/index.js").BasePageProperties;

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

@@ -1,11 +1,13 @@
 import { type Page, type PageSurround } from "../../types/index.js";
-interface PageRendererProps {
+export interface PageRendererProps {
     useSurround?: boolean;
     surround?: PageSurround | null;
     surroundStatus?: 'idle' | 'pending' | 'success' | 'error';
     resolvePage: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
 }
 type __VLS_Props = PageRendererProps;
+export interface PageRendererEmits {
+}
 type __VLS_ModelProps = {
     modelValue: Page;
 };

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

@@ -4,16 +4,50 @@ import {} from "../../types";
 import { getLocalizedContent } from "../../utils";
 import { useI18n } from "vue-i18n";
 import { usePageRegistry } from "../../composables";
-const { getTypeLabelKey } = usePageRegistry();
-const page = defineModel({ type: null, ...{ required: true } });
-const { t, locale } = useI18n();
-const { useSurround = false, surroundStatus = "idle", surround = null, resolvePage } = defineProps({
+import { tv } from "tailwind-variants";
+const {
+  useSurround = false,
+  surroundStatus = "idle",
+  surround = null,
+  resolvePage
+} = defineProps({
   useSurround: { type: Boolean, required: false },
   surround: { type: [Object, null], required: false },
   surroundStatus: { type: String, required: false },
   resolvePage: { type: Function, required: true }
 });
 const emit = defineEmits([]);
+const pageRendererStyles = tv({
+  slots: {
+    container: "flex flex-col py-16",
+    grid: "grid grid-cols-1 lg:grid-cols-24 gap-xl items-start",
+    toc: "hidden lg:flex lg:col-span-4 sticky top-16",
+    properties: "order-1 lg:order-2 lg:col-span-6",
+    contentWrapper: "order-2 lg:order-1 lg:col-span-14 flex flex-col gap-xl",
+    banner: "rounded-xl w-full object-cover",
+    icon: "rounded-full w-12 h-12 object-cover",
+    title: "",
+    surroundSkeleton: "grid grid-cols-1 gap-md sm:grid-cols-2",
+    skeleton: "h-48 w-full rounded-xl",
+    metadata: "flex flex-col gap-xs text-xs text-dimmed p-xl"
+  }
+});
+const {
+  container,
+  grid,
+  toc,
+  properties,
+  contentWrapper,
+  banner,
+  icon,
+  title: titleClass,
+  surroundSkeleton,
+  skeleton,
+  metadata
+} = pageRendererStyles();
+const { getTypeLabelKey } = usePageRegistry();
+const page = defineModel({ type: null, ...{ required: true } });
+const { t, locale } = useI18n();
 provide("page-resolver", resolvePage);
 const previousPage = computed(() => surround?.previous);
 const nextPage = computed(() => surround?.next);
@@ -21,22 +55,22 @@ const hasSurround = computed(() => !!(surround?.previous || surround?.next));
 </script>
 
 <template>
-  <UContainer class="flex flex-col py-16">
-    <div class="grid grid-cols-1 lg:grid-cols-24 gap-xl items-start">
+  <UContainer :class="container()">
+    <div :class="grid()">
       <RCPageTOC
         :page-blocks="page.blocks"
         :levels="[2, 3, 4]"
-        class="hidden lg:flex lg:col-span-4 sticky top-16"
+        :class="toc()"
       >
         <template #bottom> </template>
       </RCPageTOC>
-      <RCPagePropertiesRenderer 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">
+      <RCPagePropertiesRenderer v-model="page" :class="properties()" />
+      <div :class="contentWrapper()">
         <RCImage
           v-if="page.banner?.src"
           :src="page.banner?.src"
           :alt="page.banner?.alt"
-          class="rounded-xl w-full object-cover"
+          :class="banner()"
         />
         <UPageHeader
           :headline="t(getTypeLabelKey(page.type))"
@@ -49,17 +83,17 @@ const hasSurround = computed(() => !!(surround?.previous || surround?.next));
                 v-if="page.icon?.src"
                 :src="page.icon?.src"
                 :alt="page.icon?.alt"
-                class="rounded-full w-12 h-12 object-cover"
+                :class="icon()"
               />
-              <h1>{{ getLocalizedContent(page.title, locale) }}</h1>
+              <h1 :class="titleClass()">{{ getLocalizedContent(page.title, locale) }}</h1>
             </div>
           </template>
         </UPageHeader>
         <RCBlockViewRenderer :blocks="page.blocks" />
         <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 v-if="surroundStatus === 'pending'" :class="surroundSkeleton()">
+            <USkeleton :class="skeleton()" />
+            <USkeleton :class="skeleton()" />
           </div>
 
           <LazyRCPageSurround
@@ -76,7 +110,7 @@ const hasSurround = computed(() => !!(surround?.previous || surround?.next));
 
           <USeparator />
 
-          <div class="flex flex-col gap-xs text-xs text-dimmed p-xl">
+          <div :class="metadata()">
             <h6>Metadata</h6>
             <span>Page ID: {{ page.id }}</span>
             <span

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

@@ -1,11 +1,13 @@
 import { type Page, type PageSurround } from "../../types/index.js";
-interface PageRendererProps {
+export interface PageRendererProps {
     useSurround?: boolean;
     surround?: PageSurround | null;
     surroundStatus?: 'idle' | 'pending' | 'success' | 'error';
     resolvePage: (id: string) => Promise<Pick<Page, 'title' | 'icon' | 'slug'>>;
 }
 type __VLS_Props = PageRendererProps;
+export interface PageRendererEmits {
+}
 type __VLS_ModelProps = {
     modelValue: Page;
 };

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

@@ -1,4 +1,4 @@
-type __VLS_Props = {
+export interface PageSurroundProps {
     pageType: string;
     previousTitle?: string;
     previousDescription?: string;
@@ -6,7 +6,9 @@ type __VLS_Props = {
     nextTitle?: string;
     nextDescription?: string;
     nextTo?: string;
-};
-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>;
+}
+export interface PageSurroundEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<PageSurroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageSurroundProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;