rimelight-components 2.0.46 → 2.0.48

package/dist/runtime/composables/useBlockEditor.js

@@ -0,0 +1,163 @@
+import { computed, ref, shallowRef } from "vue";
+import { v7 as uuidv7 } from "uuid";
+function findBlockLocation(blocks, id) {
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i];
+    if (!block) continue;
+    if (block.id === id) {
+      return { parentArray: blocks, index: i };
+    }
+    if ("children" in block.props && Array.isArray(block.props.children)) {
+      const result = findBlockLocation(block.props.children, id);
+      if (result) return result;
+    }
+  }
+  return null;
+}
+function regenerateIds(block) {
+  block.id = uuidv7();
+  if ("children" in block.props && Array.isArray(block.props.children)) {
+    block.props.children.forEach((child) => regenerateIds(child));
+  }
+}
+export function useBlockEditor(initialBlocks, maxHistorySize = 100) {
+  const history = shallowRef([]);
+  const future = shallowRef([]);
+  const committedBlocks = ref(JSON.parse(JSON.stringify(initialBlocks.value)));
+  const captureSnapshot = () => {
+    const snapshot = JSON.parse(JSON.stringify(initialBlocks.value));
+    future.value = [];
+    const newHistory = [...history.value, snapshot];
+    if (newHistory.length > maxHistorySize) {
+      newHistory.shift();
+    }
+    history.value = newHistory;
+  };
+  const executeMutation = (mutationFn) => {
+    captureSnapshot();
+    mutationFn();
+  };
+  const undo = () => {
+    if (history.value.length === 0) return;
+    const currentState = JSON.parse(JSON.stringify(initialBlocks.value));
+    future.value = [currentState, ...future.value];
+    const previousState = history.value[history.value.length - 1];
+    if (previousState) {
+      initialBlocks.value.splice(0, initialBlocks.value.length, ...previousState);
+      const newHistory = [...history.value];
+      newHistory.pop();
+      history.value = newHistory;
+    }
+  };
+  const redo = () => {
+    if (future.value.length === 0) return;
+    const currentState = JSON.parse(JSON.stringify(initialBlocks.value));
+    let newHistory = [...history.value, currentState];
+    if (newHistory.length > maxHistorySize) {
+      newHistory.shift();
+    }
+    history.value = newHistory;
+    const nextState = future.value[0];
+    if (nextState) {
+      initialBlocks.value.splice(0, initialBlocks.value.length, ...nextState);
+      const newFuture = [...future.value];
+      newFuture.shift();
+      future.value = newFuture;
+    }
+  };
+  const canUndo = computed(() => history.value.length > 0);
+  const canRedo = computed(() => future.value.length > 0);
+  const updateBlockProps = (id, newProps) => {
+    executeMutation(() => {
+      const loc = findBlockLocation(initialBlocks.value, id);
+      if (!loc) return;
+      const oldBlock = loc.parentArray[loc.index];
+      if (!oldBlock) return;
+      const newPropsObject = {
+        ...oldBlock.props,
+        ...newProps
+      };
+      const newBlock = {
+        id: oldBlock.id,
+        // Explicitly carry over the required BaseBlock properties
+        type: oldBlock.type,
+        // Explicitly carry over the required BaseBlock properties
+        props: newPropsObject
+      };
+      loc.parentArray.splice(loc.index, 1, newBlock);
+    });
+  };
+  const removeBlock = (id) => {
+    executeMutation(() => {
+      const loc = findBlockLocation(initialBlocks.value, id);
+      if (!loc) return;
+      loc.parentArray.splice(loc.index, 1);
+    });
+  };
+  const moveBlock = (id, direction) => {
+    executeMutation(() => {
+      const loc = findBlockLocation(initialBlocks.value, id);
+      if (!loc) return;
+      const { parentArray, index } = loc;
+      const newIndex = index + direction;
+      if (newIndex >= 0 && newIndex < parentArray.length) {
+        const movedBlock = parentArray.splice(index, 1)[0];
+        if (movedBlock) {
+          parentArray.splice(newIndex, 0, movedBlock);
+        }
+      }
+    });
+  };
+  const duplicateBlock = (id) => {
+    executeMutation(() => {
+      const loc = findBlockLocation(initialBlocks.value, id);
+      if (!loc) return;
+      const original = loc.parentArray[loc.index];
+      const clone = JSON.parse(JSON.stringify(original));
+      regenerateIds(clone);
+      loc.parentArray.splice(loc.index + 1, 0, clone);
+    });
+  };
+  const insertBlock = (newBlockType, targetId = null, position = "after") => {
+    executeMutation(() => {
+      const newBlock = {
+        id: uuidv7(),
+        type: newBlockType,
+        props: getDefaultPropsForType(newBlockType)
+      };
+      if (!targetId) {
+        initialBlocks.value.push(newBlock);
+        return;
+      }
+      const loc = findBlockLocation(initialBlocks.value, targetId);
+      if (loc) {
+        const insertIndex = position === "after" ? loc.index + 1 : loc.index;
+        loc.parentArray.splice(insertIndex, 0, newBlock);
+      }
+    });
+  };
+  const commitChanges = () => {
+    const committedSnapshot = JSON.parse(JSON.stringify(initialBlocks.value));
+    committedBlocks.value = committedSnapshot;
+    return committedSnapshot;
+  };
+  return {
+    // Mutations
+    updateBlockProps,
+    removeBlock,
+    moveBlock,
+    duplicateBlock,
+    insertBlock,
+    // History
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    // State
+    committedBlocks,
+    commitChanges
+  };
+}
+function getDefaultPropsForType(type) {
+  return { children: [] };
+}

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

@@ -6,7 +6,7 @@ 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";
+export type BlockType = "TestBlock" | "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.
@@ -16,6 +16,9 @@ export interface BaseBlock {
     type: BlockType;
     props: Record<string, any>;
 }
+export interface TestBlockProps {
+    text: string;
+}
 export interface SectionBlockProps {
     level: HeadingLevel;
     title: string;
@@ -56,6 +59,10 @@ export interface CollapsibleCardBlockProps {
     name?: string;
     children: Block[];
 }
+export interface TestBlock extends BaseBlock {
+    type: "TestBlock";
+    props: TestBlockProps;
+}
 export interface SectionBlock extends BaseBlock {
     type: "SectionBlock";
     props: SectionBlockProps;
@@ -92,7 +99,7 @@ export interface QuoteContentBlock extends BaseBlock {
  * The full union type for a single block. This allows for type-checking the
  * payload based on the block 'type'.
  */
-export type Block = SectionBlock | ParagraphContentBlock | CalloutContentBlock | ImageContentBlock | QuoteContentBlock | UnorderedListContentBlock | CardBlockContent | CollapsibleCardContentBlock;
+export type Block = TestBlock | SectionBlock | ParagraphContentBlock | CalloutContentBlock | ImageContentBlock | QuoteContentBlock | UnorderedListContentBlock | CardBlockContent | CollapsibleCardContentBlock;
 /**
  * Text Rendering Components
  */

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

@@ -1,6 +1,3 @@
-import { type ClassValue } from "clsx";
-export declare function cn(...inputs: ClassValue[]): string;
-export type ObjectValues<T> = T[keyof T];
 /**
  * Converts a string into a URL-friendly slug.
  * - Converts to lowercase.

package/dist/runtime/utils/index.js

@@ -1,8 +1,3 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-export function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 export function slugify(text) {
   if (!text) {
     return "";

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

@@ -0,0 +1,16 @@
+import type { RichTextContent } from "../types/blocks.js";
+/**
+ * Helper: Converts RichTextContent array into a plain string for a simple contenteditable area.
+ * For complex editors, this would generate full HTML/DOM nodes, preserving links/mentions.
+ * For now, we only extract the text content.
+ */
+export declare function richTextToHtml(content: RichTextContent): string;
+/**
+ * Helper: Converts a plain string from a contenteditable area back into RichTextContent.
+ *
+ * NOTE: For full rich text support, this function must parse complex HTML (<a>, <b>, <span>)
+ * and generate the correct InlineLink, InlineMention, and InlineText objects.
+ * Since we are only simulating the text content change, we convert the entire string
+ * into a single InlineText element.
+ */
+export declare function parseHtmlToRichText(html: string): RichTextContent;

package/dist/runtime/utils/richTextHelpers.js

@@ -0,0 +1,17 @@
+import { v7 as uuidv7 } from "uuid";
+export function richTextToHtml(content) {
+  return content.map((item) => item.props.content).join("");
+}
+export function parseHtmlToRichText(html) {
+  if (html.trim().length === 0) {
+    return [];
+  }
+  const newTextNode = {
+    id: uuidv7(),
+    type: "text",
+    props: {
+      content: html.trim()
+    }
+  };
+  return [newTextNode];
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rimelight-components",
   "description": "A component library by Rimelight Entertainment.",
-  "version": "2.0.46",
+  "version": "2.0.48",
   "type": "module",
   "repository": {
     "type": "git",
@@ -79,38 +79,32 @@
   },
   "dependencies": {
     "@nuxt/image": "^1.11.0",
-    "@nuxt/kit": "^4.2.0",
-    "@nuxt/ui": "^4.1.0",
-    "@nuxtjs/i18n": "^10.1.2",
-    "@vueuse/core": "^14.0.0",
-    "@vueuse/nuxt": "^14.0.0",
+    "@nuxt/kit": "^4.2.2",
+    "@nuxt/ui": "^4.2.1",
+    "@nuxtjs/i18n": "^10.2.1",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/nuxt": "^14.1.0",
     "date-fns": "^4.1.0",
     "defu": "^6.1.4",
-    "nuxt": "^4.2.0",
-    "pinia": "^3.0.4",
-    "tailwind-variants": "^3.1.1",
-    "vue": "^3.5.22"
+    "nuxt": "^4.2.2",
+    "tailwind-variants": "^3.2.2",
+    "uuid": "^13.0.0",
+    "vue": "^3.5.25"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^3.0.1",
+    "@nuxt/devtools": "^3.1.1",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.2.0",
-    "@nuxt/test-utils": "^3.20.1",
-    "@prettier/plugin-oxc": "^0.0.4",
+    "@nuxt/schema": "^4.2.2",
+    "@nuxt/test-utils": "^3.21.0",
     "@types/node": "latest",
     "changelogen": "^0.6.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "motion-v": "^1.7.4",
-    "oxlint": "^1.25.0",
-    "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.7.1",
-    "release-it": "^19.0.5",
-    "tailwind-merge": "^3.3.1",
-    "tw-animate-css": "^1.4.0",
+    "oxfmt": "^0.18.0",
+    "oxlint": "^1.33.0",
+    "release-it": "^19.1.0",
+    "tailwind-merge": "^3.4.0",
     "typescript": "~5.9.3",
-    "vitest": "^4.0.6",
-    "vue-tsc": "^3.1.2"
+    "vitest": "^4.0.15",
+    "vue-tsc": "^3.1.8"
   },
   "trustedDependencies": [
     "@parcel/watcher",

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

@@ -1,17 +0,0 @@
-interface Cards {
-    icon: string;
-    href?: string;
-    iconClass?: string;
-}
-interface Props {
-    class?: string;
-    textGlowStartColor?: string;
-    perspective?: number;
-    textGlowEndColor?: string;
-    cards: Cards[];
-    rotateX?: number;
-    rotateY?: number;
-}
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/backgrounds/AnimateGrid.vue

@@ -1,84 +0,0 @@
-<script setup>
-import { onMounted, ref, watch } from "vue";
-import { cn } from "../../utils";
-import { useMouseInElement, useDebounceFn } from "@vueuse/core";
-const card = ref();
-const props = defineProps({
-  class: { type: String, required: false },
-  textGlowStartColor: { type: String, required: false, default: "var(--color-primary-300, #38ef7d)" },
-  perspective: { type: Number, required: false, default: 750 },
-  textGlowEndColor: { type: String, required: false, default: "var(--color-primary-500, #38ef7d)" },
-  cards: { type: Array, required: true },
-  rotateX: { type: Number, required: false, default: -1 },
-  rotateY: { type: Number, required: false, default: -15 }
-});
-function adjacentCardItems(i) {
-  return [i - 1, i + 1, i - 4, i + 4].filter((index) => {
-    if (index < 0 || index > 15) return false;
-    if (i % 4 === 0 && index === i - 1) return false;
-    return !(i % 4 === 3 && index === i + 1);
-  }).map((index) => card.value?.[index]);
-}
-function removeCardClasses(el, adjacentCards) {
-  el.classList.remove("card-raised-big");
-  adjacentCards.forEach((adjacentCard) => {
-    adjacentCard?.classList.remove("card-raised-small");
-  });
-}
-onMounted(() => {
-  card.value?.forEach((el, i) => {
-    const { isOutside } = useMouseInElement(el);
-    const adjacentCards = adjacentCardItems(i);
-    const removeClasses = useDebounceFn(
-      () => removeCardClasses(el, adjacentCards),
-      200
-    );
-    watch(isOutside, (isOutside2) => {
-      if (!isOutside2) {
-        el.classList.add("card-raised-big");
-        adjacentCards.forEach((adjacentCard) => {
-          adjacentCard?.classList.add("card-raised-small");
-        });
-      } else {
-        removeClasses();
-      }
-    });
-  });
-});
-</script>
-
-<template>
-  <UContainer :class="cn('relative block', props.class)">
-    <div
-      :class="
-  cn(
-    'relative grid w-full max-w-full items-center justify-center gap-2',
-    props.cards.length < 4 ? `grid-cols-${props.cards.length}` : 'grid-cols-4'
-  )
-"
-      :style="{
-  transform: `perspective(${props.perspective}px) rotateX(${props.rotateX}deg) rotateY(${props.rotateY}deg)`
-}"
-    >
-      <div
-        v-for="(item, index) in props.cards"
-        :key="index"
-        ref="card"
-        class="card block rounded border border-transparent px-2 py-2 transition-all duration-200"
-        :style="{ zIndex: index + 1 }"
-      >
-        <NuxtLink :to="item.href" target="_blank" :index="index">
-          <UIcon
-            :name="item.icon"
-            class="icon mx-auto h-12 w-auto p-2 lg:h-16 lg:p-3"
-            :class="item.iconClass"
-          />
-        </NuxtLink>
-      </div>
-    </div>
-  </UContainer>
-</template>
-
-<style scoped>
-.icon svg{display:block;margin:0 auto;max-height:100%;max-width:100%}.grid-transform:before{background:radial-gradient(circle,#d9fbe8 0,#fff 70%,transparent 100%);content:"";height:120%;left:-10%;opacity:.5;position:absolute;top:-10%;width:150%;z-index:-1}.dark .grid-transform:before{background:radial-gradient(circle,var(--color-neutral-700) 0,var(--color-neutral-800) 70%,transparent 100%)}.card{box-shadow:2px 2px 5px var(--color-primary-300,#38ef7d),3px 3px 10px var(--color-primary-400,#38ef7d),6px 6px 20px var(--color-primary-500,#38ef7d)}.dark .card{box-shadow:2px 2px 5px oklch(from var(--color-primary-900) l c h/.25),3px 3px 10px oklch(from var(--color-primary-900) l c h/.25),6px 6px 20px oklch(from var(--color-primary-900) l c h/.25)}.card svg{opacity:.7;transition:.2s}.dark .card:hover{box-shadow:3px 3px 5px #1f2937,5px 5px 10px #1f2937,10px 10px 20px #1f2937}.card:hover svg{opacity:1}.card svg{shape-rendering:geometricPrecision}.card-raised-small{animation:text-glow-small 1.5s ease-in-out infinite alternate;border:1px solid var(--color-primary-300);transform:scale(1.05) translateX(-5px) translateY(-5px) translateZ(0)}.card-raised-big{animation:text-glow 1.5s ease-in-out infinite alternate;background-color:#fff;transform:scale(1.15) translateX(-20px) translateY(-20px) translateZ(15px)}.card-raised-big,.dark .card-raised-big{border:1px solid v-bind(textGlowStartColor)}.dark .card-raised-big{background-color:oklch(from var(--color-primary-500) l c h/.5)}.dark .card-raised-small{border:1px solid v-bind(textGlowStartColor);transform:scale(1.05) translateX(-5px) translateY(-5px) translateZ(0)}@keyframes text-glow{0%{filter:drop-shadow(0 0 2px v-bind(textGlowStartColor))}to{filter:drop-shadow(0 1px 8px v-bind(textGlowEndColor))}}@keyframes text-glow-small{0%{filter:drop-shadow(0 0 2px v-bind(textGlowEndColor))}to{filter:drop-shadow(0 1px 4px v-bind(textGlowEndColor))}}
-</style>

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

@@ -1,17 +0,0 @@
-interface Cards {
-    icon: string;
-    href?: string;
-    iconClass?: string;
-}
-interface Props {
-    class?: string;
-    textGlowStartColor?: string;
-    perspective?: number;
-    textGlowEndColor?: string;
-    cards: Cards[];
-    rotateX?: number;
-    rotateY?: number;
-}
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,13 +0,0 @@
-interface FlickeringGridProps {
-    squareSize?: number;
-    gridGap?: number;
-    flickerChance?: number;
-    color?: string;
-    width?: number;
-    height?: number;
-    class?: string;
-    maxOpacity?: number;
-}
-declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,136 +0,0 @@
-<script setup>
-import { cn } from "../../utils";
-import { ref, onMounted, onBeforeUnmount, toRefs, computed } from "vue";
-const props = defineProps({
-  squareSize: { type: Number, required: false, default: 4 },
-  gridGap: { type: Number, required: false, default: 6 },
-  flickerChance: { type: Number, required: false, default: 0.3 },
-  color: { type: String, required: false, default: "rgb(0, 0, 0)" },
-  width: { type: Number, required: false },
-  height: { type: Number, required: false },
-  class: { type: String, required: false },
-  maxOpacity: { type: Number, required: false, default: 0.3 }
-});
-const { squareSize, gridGap, flickerChance, color, maxOpacity, width, height } = toRefs(props);
-const containerRef = ref();
-const canvasRef = ref();
-const context = ref();
-const isInView = ref(false);
-const canvasSize = ref({ width: 0, height: 0 });
-const computedColor = computed(() => {
-  if (!context.value) return "rgba(255, 0, 0,";
-  const hex = color.value.replace(/^#/, "");
-  const bigint = Number.parseInt(hex, 16);
-  const r = bigint >> 16 & 255;
-  const g = bigint >> 8 & 255;
-  const b = bigint & 255;
-  return `rgba(${r}, ${g}, ${b},`;
-});
-function setupCanvas(canvas, width2, height2) {
-  const dpr = window.devicePixelRatio || 1;
-  canvas.width = width2 * dpr;
-  canvas.height = height2 * dpr;
-  canvas.style.width = `${width2}px`;
-  canvas.style.height = `${height2}px`;
-  const cols = Math.floor(width2 / (squareSize.value + gridGap.value));
-  const rows = Math.floor(height2 / (squareSize.value + gridGap.value));
-  const squares = new Float32Array(cols * rows);
-  for (let i = 0; i < squares.length; i++) {
-    squares[i] = Math.random() * maxOpacity.value;
-  }
-  return { cols, rows, squares, dpr };
-}
-function updateSquares(squares, deltaTime) {
-  for (let i = 0; i < squares.length; i++) {
-    if (Math.random() < flickerChance.value * deltaTime) {
-      squares[i] = Math.random() * maxOpacity.value;
-    }
-  }
-}
-function drawGrid(ctx, width2, height2, cols, rows, squares, dpr) {
-  ctx.clearRect(0, 0, width2, height2);
-  ctx.fillStyle = "transparent";
-  ctx.fillRect(0, 0, width2, height2);
-  for (let i = 0; i < cols; i++) {
-    for (let j = 0; j < rows; j++) {
-      const opacity = squares[i * rows + j];
-      ctx.fillStyle = `${computedColor.value}${opacity})`;
-      ctx.fillRect(
-        i * (squareSize.value + gridGap.value) * dpr,
-        j * (squareSize.value + gridGap.value) * dpr,
-        squareSize.value * dpr,
-        squareSize.value * dpr
-      );
-    }
-  }
-}
-const gridParams = ref();
-function updateCanvasSize() {
-  const newWidth = width.value || containerRef.value.clientWidth;
-  const newHeight = height.value || containerRef.value.clientHeight;
-  canvasSize.value = { width: newWidth, height: newHeight };
-  gridParams.value = setupCanvas(canvasRef.value, newWidth, newHeight);
-}
-let animationFrameId;
-let resizeObserver;
-let intersectionObserver;
-let lastTime = 0;
-function animate(time) {
-  if (!isInView.value) return;
-  const deltaTime = (time - lastTime) / 1e3;
-  lastTime = time;
-  updateSquares(gridParams.value.squares, deltaTime);
-  drawGrid(
-    context.value,
-    canvasRef.value.width,
-    canvasRef.value.height,
-    gridParams.value.cols,
-    gridParams.value.rows,
-    gridParams.value.squares,
-    gridParams.value.dpr
-  );
-  animationFrameId = requestAnimationFrame(animate);
-}
-onMounted(() => {
-  if (!canvasRef.value || !containerRef.value) return;
-  context.value = canvasRef.value.getContext("2d");
-  if (!context.value) return;
-  updateCanvasSize();
-  resizeObserver = new ResizeObserver(() => {
-    updateCanvasSize();
-  });
-  intersectionObserver = new IntersectionObserver(
-    (entries) => {
-      const entry = entries[0];
-      if (entry) {
-        isInView.value = entry.isIntersecting;
-        if (isInView.value && !animationFrameId) {
-          lastTime = performance.now();
-          animationFrameId = requestAnimationFrame(animate);
-        }
-      }
-    },
-    { threshold: 0 }
-  );
-  resizeObserver.observe(containerRef.value);
-  intersectionObserver.observe(canvasRef.value);
-});
-onBeforeUnmount(() => {
-  if (animationFrameId) {
-    cancelAnimationFrame(animationFrameId);
-  }
-  resizeObserver?.disconnect();
-  intersectionObserver?.disconnect();
-});
-</script>
-
-<template>
-  <div ref="containerRef" :class="cn('h-full w-full', props.class)">
-    <canvas
-      ref="canvasRef"
-      class="pointer-events-none"
-      :width="canvasSize.width"
-      :height="canvasSize.height"
-    />
-  </div>
-</template>

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

@@ -1,13 +0,0 @@
-interface FlickeringGridProps {
-    squareSize?: number;
-    gridGap?: number;
-    flickerChance?: number;
-    color?: string;
-    width?: number;
-    height?: number;
-    class?: string;
-    maxOpacity?: number;
-}
-declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,11 +0,0 @@
-import { type HTMLAttributes } from "vue";
-interface InteractiveGridPatternProps {
-    className?: HTMLAttributes["class"];
-    squaresClassName?: HTMLAttributes["class"];
-    width?: number;
-    height?: number;
-    squares?: [number, number];
-}
-declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;