rimelight-components 2.0.99 → 2.1.1

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

@@ -25,7 +25,7 @@ const {
     <div>
       <ULink v-if="previousTitle" :to="previousTo" class="h-full">
         <UCard
-          variant="outline"
+          variant="soft"
           class="group block h-full bg-transparent hover:bg-elevated/50 focus-visible:outline-primary"
         >
           <div class="flex flex-col gap-md">
@@ -33,18 +33,18 @@ const {
               <UButton
                 variant="outline"
                 icon="lucide:arrow-left"
-                class="group-hover w-fit rounded-full text-primary group-hover:text-highlighted"
+                class="group-hover w-fit text-md rounded-full text-primary group-hover:text-highlighted"
               />
               <span class="text-muted">
                 {{ t("navigation_previous") }}
                 {{ t(pageType) }}
               </span>
             </div>
-            <div class="flex flex-col gap-xs">
-              <p class="text-primary group-hover:text-highlighted">
+            <div class="flex flex-col gap-sm">
+              <p class="text-primary text-sm group-hover:text-highlighted">
                 {{ previousTitle }}
               </p>
-              <p class="text-toned">
+              <p class="text-toned text-xs">
                 {{ previousDescription }}
               </p>
             </div>
@@ -55,7 +55,7 @@ const {
     <div>
       <ULink v-if="nextTitle" :to="nextTo" class="h-full">
         <UCard
-          variant="outline"
+          variant="soft"
           class="group block h-full bg-transparent hover:bg-elevated/50 focus-visible:outline-primary"
         >
           <div class="flex flex-col items-end gap-md">
@@ -63,7 +63,7 @@ const {
               <UButton
                 variant="outline"
                 icon="lucide:arrow-right"
-                class="w-fit rounded-full text-primary group-hover:text-highlighted"
+                class="w-fit rounded-full text-primary text-md group-hover:text-highlighted"
               />
               <span class="text-muted">
                 {{ t("navigation_next") }}
@@ -71,10 +71,10 @@ const {
               >
             </div>
             <div class="flex flex-col items-end gap-xs">
-              <p class="text-right text-primary group-hover:text-highlighted">
+              <p class="text-right text-sm text-primary group-hover:text-highlighted">
                 {{ nextTitle }}
               </p>
-              <p class="text-right text-toned">
+              <p class="text-right text-toned text-xs">
                 {{ nextDescription }}
               </p>
             </div>

package/dist/runtime/components/{blocks/TOC.d.vue.ts → page/PageTOC.d.vue.ts}

@@ -1,10 +1,4 @@
-import { type Block, type HeadingLevel } from "../../types/index.js";
-export interface TOCItem {
-    id: string;
-    title: string;
-    level: HeadingLevel;
-    children?: TOCItem[];
-}
+import type { Block, HeadingLevel } from "../../types/index.js";
 type __VLS_Props = {
     pageBlocks: Block[] | null;
     title?: string;
@@ -14,7 +8,10 @@ declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     bottom?: (props: typeof __VLS_7) => 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_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    levels: HeadingLevel[];
+}, {}, {}, {}, 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;

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

@@ -0,0 +1,107 @@
+<script setup>
+import { computed, ref, onMounted, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useIntersectionObserver } from "@vueuse/core";
+import { tv } from "tailwind-variants";
+import { slugify } from "../../utils";
+const props = defineProps({
+  pageBlocks: { type: [Array, null], required: true },
+  title: { type: String, required: false, default: "table_of_contents" },
+  levels: { type: Array, required: false, default: () => [2, 3, 4] }
+});
+const { t } = useI18n();
+const activeId = ref(null);
+const tocVariants = tv({
+  slots: {
+    link: "group relative flex items-center px-3 py-1.5 text-sm transition-all duration-200 border-s-2 -ms-px",
+    text: "truncate"
+  },
+  variants: {
+    active: {
+      true: {
+        link: "border-accented font-semibold text-foreground"
+      },
+      false: {
+        link: "border-dimmed text-dimmed"
+      }
+    },
+    level: {
+      1: { link: "ps-3" },
+      2: { link: "ps-3" },
+      3: { link: "ps-6" },
+      4: { link: "ps-9" },
+      5: { link: "ps-12" },
+      6: { link: "ps-15" }
+    }
+  }
+});
+const extractHeadings = (blocks) => {
+  const headings = [];
+  if (!blocks) return headings;
+  for (const block of blocks) {
+    if (block.type === "SectionBlock") {
+      const p = block.props;
+      if (p.title && p.level) {
+        headings.push({
+          id: slugify(p.title),
+          title: p.title,
+          level: p.level
+        });
+      }
+      if (p.children?.length) {
+        headings.push(...extractHeadings(p.children));
+      }
+    }
+  }
+  return headings;
+};
+const items = computed(() => {
+  const all = extractHeadings(props.pageBlocks ?? []);
+  return all.filter((h) => props.levels.includes(h.level));
+});
+onMounted(() => {
+  watch(() => items.value, (newItems) => {
+    newItems.forEach((item) => {
+      const el = document.getElementById(item.id);
+      if (!el) return;
+      useIntersectionObserver(
+        el,
+        (entries) => {
+          const entry = entries?.[0];
+          if (entry?.isIntersecting) {
+            activeId.value = item.id;
+          }
+        },
+        {
+          // Adjust rootMargin to detect the section when it's in the top third of the screen
+          rootMargin: "-80px 0px -80% 0px",
+          threshold: 0
+        }
+      );
+    });
+  }, { immediate: true });
+});
+</script>
+
+<template>
+  <nav class="flex flex-col gap-sm self-start w-full" aria-label="Table of Contents">
+    <h5 v-if="title">
+      {{ t(title) }}
+    </h5>
+
+    <ul v-if="items.length > 0" class="flex flex-col">
+      <li v-for="item in items" :key="item.id">
+        <NuxtLink
+          :to="{ hash: `#${item.id}` }"
+          :class="tocVariants({ active: activeId === item.id, level: item.level }).link()"
+        >
+          <span :class="tocVariants().text()">
+            {{ item.title }}
+          </span>
+        </NuxtLink>
+      </li>
+    </ul>
+
+    <slot name="bottom" />
+  </nav>
+</template>

package/dist/runtime/components/{blocks/TOC.vue.d.ts → page/PageTOC.vue.d.ts}

@@ -1,10 +1,4 @@
-import { type Block, type HeadingLevel } from "../../types/index.js";
-export interface TOCItem {
-    id: string;
-    title: string;
-    level: HeadingLevel;
-    children?: TOCItem[];
-}
+import type { Block, HeadingLevel } from "../../types/index.js";
 type __VLS_Props = {
     pageBlocks: Block[] | null;
     title?: string;
@@ -14,7 +8,10 @@ declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     bottom?: (props: typeof __VLS_7) => 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_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    levels: HeadingLevel[];
+}, {}, {}, {}, 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;

package/dist/runtime/components/swatches/ColorSwatch.vue

@@ -47,10 +47,7 @@ const color = computed(() => {
       <h3 class="text-lg font-bold">{{ name }}</h3>
     </template>
     <div class="flex flex-col items-center gap-sm xl:flex-row xl:items-start">
-      <div
-        class="flex aspect-square size-48 p-sm"
-        :style="{ backgroundColor: color }"
-      >
+      <div class="flex aspect-square size-48 p-sm" :style="{ backgroundColor: color }">
         <div class="flex flex-col justify-end gap-xs text-xs">
           <span v-if="name" class="text-sm">{{ formatColor(name) }}</span>
           <span v-if="hex">HEX {{ formatColor(hex) }}</span>

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

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

package/dist/runtime/composables/index.js

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