rimelight-components 1.8.0 → 1.10.0

package/dist/runtime/components/app/ScrollToTop.d.vue.ts

@@ -3,8 +3,8 @@ interface Props {
     duration?: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    circleStrokeWidth: number;
     duration: number;
+    circleStrokeWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/app/ScrollToTop.vue.d.ts

@@ -3,8 +3,8 @@ interface Props {
     duration?: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    circleStrokeWidth: number;
     duration: number;
+    circleStrokeWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/backgrounds/FlickeringGrid.d.vue.ts

@@ -9,10 +9,10 @@ interface FlickeringGridProps {
     maxOpacity?: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
+    color: string;
     squareSize: number;
     gridGap: number;
     flickerChance: number;
-    color: string;
     maxOpacity: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/backgrounds/FlickeringGrid.vue.d.ts

@@ -9,10 +9,10 @@ interface FlickeringGridProps {
     maxOpacity?: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
+    color: string;
     squareSize: number;
     gridGap: number;
     flickerChance: number;
-    color: string;
     maxOpacity: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,4 @@
+import type { CalloutBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<CalloutBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,14 @@
+<script setup>
+const { variant, children, to, target } = defineProps({
+  variant: { type: String, required: true },
+  children: { type: Array, required: true },
+  to: { type: String, required: false },
+  target: { type: String, required: false }
+});
+</script>
+
+<template>
+  <RCCallout :variant="variant" :to="to" :target="target">
+    <RCBlockRenderer :blocks="children" />
+  </RCCallout>
+</template>

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

@@ -0,0 +1,4 @@
+import type { CalloutBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<CalloutBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,4 @@
+import type { CardBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<CardBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+<script setup>
+const { title, to, target, children } = defineProps({
+  title: { type: String, required: true },
+  to: { type: String, required: false },
+  target: { type: String, required: false },
+  description: { type: String, required: false },
+  children: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <NuxtLink :to="to" :target="target">
+    <UCard class="flex h-full flex-col">
+      <h3>{{ title }}</h3>
+      <RCBlockRenderer :blocks="children" />
+    </UCard>
+  </NuxtLink>
+</template>

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

@@ -0,0 +1,4 @@
+import type { CardBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<CardBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,4 @@
+import type { ImageBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<ImageBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,16 @@
+<script setup>
+const { src, alt, caption } = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, required: true },
+  caption: { type: String, required: false }
+});
+</script>
+
+<template>
+  <figure class="mx-auto">
+    <img :src="src" :alt="alt" class="h-auto w-full object-cover" />
+    <figcaption v-if="caption" class="text-muted mt-4 text-center text-sm">
+      {{ caption }}
+    </figcaption>
+  </figure>
+</template>

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

@@ -0,0 +1,4 @@
+import type { ImageBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<ImageBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,4 @@
+import type { ParagraphBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<ParagraphBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ParagraphBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,11 @@
+<script setup>
+const { text } = defineProps({
+  text: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <p>
+    <RCTextRenderer :content="text" />
+  </p>
+</template>

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

@@ -0,0 +1,4 @@
+import type { ParagraphBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<ParagraphBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ParagraphBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,4 @@
+import type { SectionBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<SectionBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,22 @@
+<script setup>
+import { computed } from "vue";
+import { slugify } from "../../utils/slugify";
+const { level, title, description, children } = defineProps({
+  level: { type: Number, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  children: { type: Array, required: true }
+});
+const headingId = computed(() => title ? slugify(title) : void 0);
+</script>
+
+<template>
+  <RCSection
+    :level="level"
+    :title="title"
+    :description="description"
+    :id="headingId"
+  >
+    <RCBlockRenderer :blocks="children" />
+  </RCSection>
+</template>

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

@@ -0,0 +1,4 @@
+import type { SectionBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<SectionBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,4 @@
+import type { UnorderedListBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<UnorderedListBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnorderedListBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,13 @@
+<script setup>
+const { items } = defineProps({
+  items: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <ul class="ml-6 list-outside list-disc space-y-2">
+    <li v-for="item in items" :key="item.id" class="list-item">
+      <RCBlockRenderer :blocks="[item]" />
+    </li>
+  </ul>
+</template>

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

@@ -0,0 +1,4 @@
+import type { UnorderedListBlockProps } from "../../types/blocks.js";
+declare const __VLS_export: import("vue").DefineComponent<UnorderedListBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnorderedListBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/nodes/LinkNode.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    href: string;
+    target?: string;
+    content: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/nodes/LinkNode.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { computed } from "vue";
+const { href, target, content } = defineProps({
+  href: { type: String, required: true },
+  target: { type: String, required: false },
+  content: { type: String, required: true }
+});
+const rel = computed(
+  () => target === "_blank" ? "noopener noreferrer" : void 0
+);
+</script>
+
+<template>
+  <ULink :to="href" :target="target" :rel="rel">{{ content }}</ULink>
+</template>

package/dist/runtime/components/nodes/LinkNode.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    href: string;
+    target?: string;
+    content: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/nodes/MentionNode.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    href: string;
+    target?: string;
+    content: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/nodes/MentionNode.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { computed } from "vue";
+const { href, target, content } = defineProps({
+  href: { type: String, required: true },
+  target: { type: String, required: false },
+  content: { type: String, required: true }
+});
+const rel = computed(
+  () => target === "_blank" ? "noopener noreferrer" : void 0
+);
+</script>
+
+<template>
+  <ULink
+    :to="href"
+    :target="target"
+    :rel="rel"
+    class="rounded-md bg-secondary-700 px-1.5 py-0.5 text-secondary-300"
+  >
+    {{ content }}
+  </ULink>
+</template>

package/dist/runtime/components/nodes/MentionNode.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    href: string;
+    target?: string;
+    content: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/nodes/TextNode.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/nodes/TextNode.vue

@@ -0,0 +1,9 @@
+<script setup>
+const { content } = defineProps({
+  content: { type: String, required: true }
+});
+</script>
+
+<template>
+  <span>{{ content }}</span>
+</template>

package/dist/runtime/components/nodes/TextNode.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/BlockRenderer.d.vue.ts

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

package/dist/runtime/components/renderers/BlockRenderer.vue

@@ -0,0 +1,51 @@
+<script setup>
+import {} from "vue";
+import { getBlockComponent } from "../../utils/blockMapper";
+const { blocks } = defineProps({
+  blocks: { type: Array, required: true }
+});
+const getComponent = (block) => {
+  if (!block || !block.type || block.type.length === 0) {
+    console.error("Block object is missing the critical 'type' field.");
+    return null;
+  }
+  const resolvedComponent = getBlockComponent(block.type);
+  if (!resolvedComponent) {
+    console.error(`Component resolution failed for block type: ${block.type}`);
+    return null;
+  }
+  return resolvedComponent;
+};
+</script>
+
+<template>
+  <div class="gap-lg flex flex-col">
+    <UEmpty
+      v-if="!blocks || blocks.length === 0"
+      variant="naked"
+      icon="lucide:blocks"
+      title="No blocks found for this page."
+      description="It looks like there isn't any content added to this page yet."
+    />
+    <template v-else v-for="block in blocks" :key="block.id">
+      <template v-if="getComponent(block)">
+        <component
+          :is="getComponent(block)"
+          v-bind="block.props"
+          :key="block.id"
+          :type="block.type"
+          class="block-container"
+        />
+      </template>
+      <template v-else>
+        <UAlert
+          color="error"
+          variant="subtle"
+          icon="lucide:octagon-alert"
+          title="Rendering Error"
+          :description="`Block component for type \'${block.type || 'UNKNOWN_OR_MISSING'}\' was not found. This block will be skipped or the type is invalid/empty.`"
+        />
+      </template>
+    </template>
+  </div>
+</template>

package/dist/runtime/components/renderers/BlockRenderer.vue.d.ts

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

package/dist/runtime/components/renderers/TOC.d.vue.ts

@@ -0,0 +1,26 @@
+import type { Block } from "../../types/blocks.js";
+import type { HeadingLevel } from "../../types/blocks.js";
+export interface TOCItem {
+    id: string;
+    title: string;
+    level: HeadingLevel;
+    children?: TOCItem[];
+}
+type __VLS_Props = {
+    pageBlocks: Block[];
+    title?: string;
+    levels?: HeadingLevel[];
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    bottom?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: 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: __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/renderers/TOC.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from "vue";
+import { slugify } from "../../utils/slugify";
+const {
+  pageBlocks,
+  title = "table_of_contents",
+  levels = [2, 3, 4]
+} = defineProps({
+  pageBlocks: { type: Array, required: true },
+  title: { type: String, required: false },
+  levels: { type: Array, required: false }
+});
+const extractHeadings = (blocks) => {
+  const headings = [];
+  if (!blocks || blocks.length === 0) {
+    return headings;
+  }
+  for (const block of blocks) {
+    if (block.type === "SectionBlock") {
+      const props = block.props;
+      const title2 = props.title;
+      const level = props.level;
+      if (title2 && level) {
+        headings.push({
+          id: slugify(title2),
+          title: title2,
+          level
+        });
+      }
+      if (props.children && props.children.length > 0) {
+        headings.push(...extractHeadings(props.children));
+      }
+    }
+  }
+  return headings;
+};
+const tocItems = computed(() => {
+  if (!pageBlocks || pageBlocks.length === 0) {
+    return [];
+  }
+  if (levels.length === 0) {
+    return [];
+  }
+  const allHeadings = extractHeadings(pageBlocks);
+  const filteredHeadings = allHeadings.filter(
+    (item) => levels.includes(item.level)
+  );
+  return Array.from(new Set(filteredHeadings.map((h) => h.id))).map(
+    (id) => filteredHeadings.find((h) => h.id === id)
+  );
+});
+</script>
+
+<template>
+  <div class="z-10 flex flex-col gap-md">
+    <nav
+      class="sticky top-(--ui-header-height) z-50 flex flex-col gap-md pt-lg"
+      aria-label="Table of Contents"
+    >
+      <h5 class="text-highlighted">
+        {{ $t(title) }}
+      </h5>
+
+      <ul
+        v-if="tocItems.length > 0"
+        class="flex flex-col gap-0 border-s border-default"
+      >
+        <li
+          v-for="item in tocItems"
+          :key="item.id"
+          class="relative flex min-w-0"
+          :class="{
+  'ms-2': item.level === 2,
+  'ms-4': item.level === 3,
+  'ms-6': item.level === 4,
+  'ms-8': item.level === 5,
+  'ms-10': item.level === 6
+}"
+        >
+          <NuxtLink
+            :href="`#${item.id}`"
+            class="group relative flex size-full items-center px-1.5 py-1.5 text-start text-sm font-medium before:absolute before:inset-x-0 before:inset-y-px before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-2 focus-visible:before:ring-inset dark:focus-visible:outline-none"
+          >
+            <span class="truncate">
+              {{ item.title }}
+            </span>
+          </NuxtLink>
+        </li>
+      </ul>
+
+      <slot name="bottom" />
+    </nav>
+  </div>
+</template>

package/dist/runtime/components/renderers/TOC.vue.d.ts

@@ -0,0 +1,26 @@
+import type { Block } from "../../types/blocks.js";
+import type { HeadingLevel } from "../../types/blocks.js";
+export interface TOCItem {
+    id: string;
+    title: string;
+    level: HeadingLevel;
+    children?: TOCItem[];
+}
+type __VLS_Props = {
+    pageBlocks: Block[];
+    title?: string;
+    levels?: HeadingLevel[];
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    bottom?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: 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: __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/renderers/TextRenderer.d.vue.ts

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

package/dist/runtime/components/renderers/TextRenderer.vue

@@ -0,0 +1,59 @@
+<script setup>
+import {
+} from "../../types/blocks";
+import TextNode from "../nodes/TextNode.vue";
+import LinkNode from "../nodes/LinkNode.vue";
+import MentionNode from "../nodes/MentionNode.vue";
+defineOptions({
+  name: "TextRenderer"
+});
+const { content } = defineProps({
+  content: { type: Array, required: true }
+});
+const getTag = (item) => {
+  switch (item.type) {
+    case "text":
+      return TextNode;
+    case "link":
+      return LinkNode;
+    case "mention":
+      return MentionNode;
+    default:
+      return TextNode;
+  }
+};
+const getProps = (item) => {
+  switch (item.type) {
+    case "text": {
+      const textProps = item.props;
+      return {
+        content: textProps.content
+      };
+    }
+    case "link": {
+      const linkProps = item.props;
+      return {
+        href: linkProps.href,
+        target: linkProps.target || void 0,
+        content: linkProps.content
+      };
+    }
+    case "mention": {
+      const mentionProps = item.props;
+      return {
+        href: mentionProps.href,
+        target: mentionProps.target,
+        content: mentionProps.content
+      };
+    }
+    default:
+      return {};
+  }
+};
+</script>
+
+<template>
+  <template v-for="item in content" :key="item.id">
+    <component :is="getTag(item)" v-bind="getProps(item)" />
+  </template>
+</template>

package/dist/runtime/components/renderers/TextRenderer.vue.d.ts

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

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

@@ -0,0 +1,146 @@
+/**
+ * Defines the allowed heading levels (h2 through h6) for the Table of Contents.
+ */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * All valid block types the application can render.
+ * This union type is the single source of truth for component names.
+ */
+export type BlockType = "SectionBlock" | "ParagraphBlock" | "CalloutBlock" | "ImageBlock" | "QuoteBlock" | "UnorderedListBlock" | "CardBlock" | "CollapsibleCardBlock";
+/**
+ * Defines the common structure for any content block object.
+ * The 'type' must be one of the registered BlockType values.
+ */
+export interface BaseContentBlock {
+    id: string;
+    type: BlockType;
+    props: Record<string, any>;
+}
+export interface SectionBlockProps {
+    level: HeadingLevel;
+    title: string;
+    description?: string;
+    children: Block[];
+}
+export interface ParagraphBlockProps {
+    text: RichTextContent;
+}
+export interface CalloutBlockProps {
+    variant: "info" | "success" | "warning" | "error" | "commentary" | "ideation" | "source";
+    children: Block[];
+    to?: string;
+    target?: string;
+}
+export interface ImageBlockProps {
+    src: string;
+    alt: string;
+    caption?: string;
+}
+export interface QuoteBlockProps {
+    quote: string;
+    source?: string;
+}
+export interface UnorderedListBlockProps {
+    items: Block[];
+}
+export interface CardBlockProps {
+    title: string;
+    to?: string;
+    target?: string;
+    description?: string;
+    children: Block[];
+}
+export interface CollapsibleCardBlockProps {
+    openText: string;
+    closeText: string;
+    name?: string;
+    children: Block[];
+}
+export interface SectionContentBlock extends BaseContentBlock {
+    type: "SectionBlock";
+    props: SectionBlockProps;
+}
+export interface ParagraphContentBlock extends BaseContentBlock {
+    type: "ParagraphBlock";
+    props: ParagraphBlockProps;
+}
+export interface CalloutContentBlock extends BaseContentBlock {
+    type: "CalloutBlock";
+    props: CalloutBlockProps;
+}
+export interface ImageContentBlock extends BaseContentBlock {
+    type: "ImageBlock";
+    props: ImageBlockProps;
+}
+export interface UnorderedListContentBlock extends BaseContentBlock {
+    type: "UnorderedListBlock";
+    props: UnorderedListBlockProps;
+}
+export interface CardBlockContent extends BaseContentBlock {
+    type: "CardBlock";
+    props: CardBlockProps;
+}
+export interface CollapsibleCardContentBlock extends BaseContentBlock {
+    type: "CollapsibleCardBlock";
+    props: CollapsibleCardBlockProps;
+}
+export interface QuoteContentBlock extends BaseContentBlock {
+    type: "QuoteBlock";
+    props: QuoteBlockProps;
+}
+/**
+ * The full union type for a single block. This allows for type-checking the
+ * payload based on the block 'type'.
+ */
+export type Block = SectionContentBlock | ParagraphContentBlock | CalloutContentBlock | ImageContentBlock | QuoteContentBlock | UnorderedListContentBlock | CardBlockContent | CollapsibleCardContentBlock;
+/**
+ * Text Rendering Components
+ */
+export type InlineContentType = "text" | "link" | "mention";
+/**
+ * Defines the common structure for any inline content object.
+ */
+export interface BaseInlineContent {
+    type: InlineContentType;
+    id: string;
+    props: Record<string, any>;
+}
+/**
+ * Represents a segment of plain text.
+ */
+export interface InlineText extends BaseInlineContent {
+    type: "text";
+    props: {
+        content: string;
+    };
+}
+/**
+ * Represents a hyperlink.
+ */
+export interface InlineLink extends BaseInlineContent {
+    type: "link";
+    props: {
+        href: string;
+        target?: "_blank" | "_self";
+        content: string;
+    };
+}
+/**
+ * Represents a mention of an internal page or user.
+ */
+export interface InlineMention extends BaseInlineContent {
+    type: "mention";
+    props: {
+        href: string;
+        target?: "_blank" | "_self";
+        content: string;
+    };
+}
+/**
+ * The full union type for a single inline content element.
+ */
+export type InlineContent = InlineText | InlineLink | InlineMention;
+/**
+ * The top-level type for a block's rich text field.
+ */
+export type RichTextContent = InlineContent[];

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

@@ -0,0 +1,9 @@
+import { type Component } from "vue";
+import { type BlockType } from "../types/blocks.js";
+/**
+ * Maps the block type string from the database to a dynamically imported Vue component.
+ *
+ * @param type The BlockType string from the content JSON (e.g., 'ParagraphBlock').
+ * @returns A lazily loaded Vue component reference, or undefined if not found.
+ */
+export declare const getBlockComponent: (type: BlockType | string) => Component | undefined;

package/dist/runtime/utils/blockMapper.js

@@ -0,0 +1,21 @@
+import { defineAsyncComponent } from "vue";
+const BLOCK_COMPONENTS = import.meta.glob(
+  "../components/blocks/*.vue"
+);
+const typeToRelativePath = (type) => {
+  return `/components/blocks/${type}.vue`;
+};
+export const getBlockComponent = (type) => {
+  const componentPath = typeToRelativePath(type);
+  const componentImporter = BLOCK_COMPONENTS[componentPath];
+  if (!componentImporter) {
+    console.warn(
+      `[BlockMapper] Block component not found for type: ${type}. Expected path: ${componentPath}`
+    );
+    return void 0;
+  }
+  return defineAsyncComponent(async () => {
+    const module = await componentImporter();
+    return module.default;
+  });
+};

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

@@ -0,0 +1,6 @@
+/**
+ * Converts a string to a URL-friendly slug.
+ * @param str The input string.
+ * @returns The slugified string.
+ */
+export declare function slugify(str: string): string;

package/dist/runtime/utils/slugify.js

@@ -0,0 +1,3 @@
+export function slugify(str) {
+  return str.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "-").replace(/^-+|-+$/g, "");
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rimelight-components",
   "description": "My new Nuxt module",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Rimelight-Entertainment/rimelight-components.git"
@@ -65,15 +65,15 @@
     "@nuxt/kit": "^4.2.0",
     "@nuxt/ui": "^4.1.0",
     "@nuxtjs/i18n": "^10.1.2",
-    "@vueuse/core": "^13.9.0",
-    "@vueuse/nuxt": "^13.9.0",
+    "@vueuse/core": "^14.0.0",
+    "@vueuse/nuxt": "^14.0.0",
     "date-fns": "^4.1.0",
     "nuxt": "^4.2.0",
     "tailwind-variants": "^3.1.1",
     "vue": "^3.5.22"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^2.7.0",
+    "@nuxt/devtools": "^3.0.1",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.2.0",
     "@nuxt/test-utils": "^3.20.1",
@@ -85,19 +85,16 @@
     "motion-v": "^1.7.4",
     "oxlint": "^1.25.0",
     "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "release-it": "^19.0.5",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.6",
     "vue-tsc": "^3.1.2"
   },
   "trustedDependencies": [
     "@parcel/watcher",
     "@tailwindcss/oxide"
-  ],
-  "npm": {
-    "skipChecks": true
-  }
+  ]
 }