rimelight-components 2.0.45 → 2.0.47

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.0.45",
+  "version": "2.0.47",
   "docs": "https://rimelight.com/tools/rimelight-components",
   "configKey": "rimelightComponents",
   "compatibility": {

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { readdirSync } from 'node:fs';
 import { basename } from 'node:path';
 
 const name = "rimelight-components";
-const version = "2.0.45";
+const version = "2.0.47";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

package/dist/runtime/components/blocks/editor/ImageBlockEditor.vue

@@ -31,26 +31,26 @@ watch(fileToUpload, (newFile) => {
 </script>
 
 <template>
-  <figure class="mx-auto space-y-4 max-w-lg">
+  <figure class="mx-auto space-y-4 flex flex-col gap-xs w-full">
     <UFileUpload
       v-slot="{ open }"
       v-model="fileToUpload"
       accept="image/*"
-      class="min-h-48"
+      class="min-h-48 w-full"
       variant="area"
       color="neutral"
       label="Drop image here"
       description="JPG, PNG, GIF or WEBP. Click to select."
     >
       <div class="flex flex-col items-center justify-center space-y-3 p-4">
-        <div class="w-full relative rounded-lg border border-default overflow-hidden aspect-video">
+        <div class="w-full relative rounded-lg border border-default overflow-hidden">
           <img
             v-if="previewSrc"
             :src="previewSrc"
             :alt="localAlt || 'Image preview'"
-            class="w-full h-full object-cover transition-opacity duration-300"
+            class="w-full h-auto object-contain transition-opacity duration-300"
           />
-          <div v-else class="w-full h-full flex items-center justify-center bg-elevated/25">
+          <div v-else class="w-full h-48 flex items-center justify-center bg-elevated/25">
             <UIcon name="i-lucide-image" class="w-10 h-10 text-muted" />
           </div>
 
@@ -75,31 +75,45 @@ watch(fileToUpload, (newFile) => {
             </div>
           </div>
         </div>
+      </div>
+    </UFileUpload>
 
-        <UInput
-          v-model="localAlt"
-          type="text"
-          placeholder="Alt text (for accessibility)"
-          class="w-full"
-          variant="outline"
-        >
-          <template #leading>
+    <UInput
+      v-model="localAlt"
+      type="text"
+      placeholder="Alt text (accessibility)"
+      class="w-full"
+      variant="outline"
+    >
+      <template #leading>
+        <UTooltip>
+          <template #default>
             <span class="text-xs text-muted">Alt</span>
           </template>
-        </UInput>
+          <template #content>
+            The text description for the image used by screen readers.
+          </template>
+        </UTooltip>
+      </template>
+    </UInput>
 
-        <UTextarea
-          v-model="localCaption"
-          autoresize
-          placeholder="Caption (optional)"
-          class="w-full"
-          variant="outline"
-        >
-          <template #leading>
+    <UTextarea
+      v-model="localCaption"
+      autoresize
+      placeholder="Caption (optional)"
+      class="w-full"
+      variant="outline"
+    >
+      <template #leading>
+        <UTooltip>
+          <template #default>
             <span class="text-xs text-muted">Caption</span>
           </template>
-        </UTextarea>
-      </div>
-    </UFileUpload>
+          <template #content>
+            The text description for the image used by screen readers.
+          </template>
+        </UTooltip>
+      </template>
+    </UTextarea>
   </figure>
 </template>

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

@@ -36,7 +36,7 @@ const getComponent = (block) => {
         title="Start adding content blocks."
         description="There is no content yet. Use the '+' button below to add your first block."
     />
-    <div v-else class="flex flex-col gap-md ml-8">
+    <div v-else class="flex flex-col gap-md ml-10">
       <template v-for="block in blocks" :key="block.id">
         <RCBlock v-if="getComponent(block)" :id="block.id">
           <component

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rimelight-components",
   "description": "A component library by Rimelight Entertainment.",
-  "version": "2.0.45",
+  "version": "2.0.47",
   "type": "module",
   "repository": {
     "type": "git",
@@ -99,15 +99,11 @@
     "@prettier/plugin-oxc": "^0.0.4",
     "@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",
     "typescript": "~5.9.3",
     "vitest": "^4.0.6",
     "vue-tsc": "^3.1.2"

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;

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

@@ -1,58 +0,0 @@
-<script setup>
-import { cn } from "../../utils";
-import { ref, computed } from "vue";
-const props = defineProps({
-  className: { type: null, required: false },
-  squaresClassName: { type: null, required: false },
-  width: { type: Number, required: false, default: 40 },
-  height: { type: Number, required: false, default: 40 },
-  squares: { type: Array, required: false, default: () => [24, 24] }
-});
-const horizontal = computed(() => props.squares[0]);
-const vertical = computed(() => props.squares[1]);
-const totalSquares = computed(() => horizontal.value * vertical.value);
-const hoveredSquare = ref(null);
-const gridWidth = computed(() => props.width * horizontal.value);
-const gridHeight = computed(() => props.height * vertical.value);
-function getX(index) {
-  return index % horizontal.value * props.width;
-}
-function getY(index) {
-  return Math.floor(index / horizontal.value) * props.height;
-}
-const svgClass = computed(
-  () => cn(
-    "absolute inset-0 h-full w-full border border-neutral-400/30",
-    props.className
-  )
-);
-function getRectClass(index) {
-  return cn(
-    "stroke-neutral-400/30 transition-all duration-100 ease-in-out [&:not(:hover)]:duration-1000",
-    hoveredSquare.value === index ? "fill-neutral-300/30" : "fill-transparent",
-    props.squaresClassName
-  );
-}
-function handleMouseEnter(index) {
-  hoveredSquare.value = index;
-}
-function handleMouseLeave() {
-  hoveredSquare.value = null;
-}
-</script>
-
-<template>
-  <svg :width="gridWidth" :height="gridHeight" :class="svgClass">
-    <rect
-      v-for="(_, index) in totalSquares"
-      :key="index"
-      :x="getX(index)"
-      :y="getY(index)"
-      :width="width"
-      :height="height"
-      :class="getRectClass(index)"
-      @mouseenter="handleMouseEnter(index)"
-      @mouseleave="handleMouseLeave"
-    />
-  </svg>
-</template>

package/dist/runtime/components/backgrounds/InteractiveGrid.vue.d.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;