svelte-ag 0.0.2-dev.81 → 0.0.2-dev.83

package/dist/routes/+layout.svelte.d.ts

@@ -1,8 +1,16 @@
 export default Layout;
-type Layout = SvelteComponent<Record<string, any>, Record<string, any>, Record<string, any>> & {
+type Layout = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
     $$bindings?: string | undefined;
-} & Record<string, any>;
-declare const Layout: $$__sveltets_2_IsomorphicComponent<Record<string, any>, Record<string, any>, Record<string, any>, Record<string, any>, string>;
+};
+declare const Layout: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/routes/+layout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"+layout.svelte.d.ts","sourceRoot":"","sources":["../../src/routes/+layout.svelte.js"],"names":[],"mappings":";;;;AAcA,qJAAkH;6CATrE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"+layout.svelte.d.ts","sourceRoot":"","sources":["../../src/routes/+layout.svelte.js"],"names":[],"mappings":";;;;;;;;AAcA;;;;mBAAkH;6CATrE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-ag",
   "description": "Useful svelte components",
-  "version": "0.0.2-dev.81",
+  "version": "0.0.2-dev.83",
   "author": "Alexander Hornung",
   "bugs": "https://github.com/ageorgeh/cms/issues",
   "dependencies": {
@@ -16,6 +16,7 @@
     "@dnd-kit-svelte/utilities": "^0.0.8",
     "embla-carousel-svelte": "^8.6.0",
     "svader": "^0.5.4",
+    "vite-plugin-glsl": "1.4.2",
     "runed": "^0.26.0",
     "bits-ui": "^1.5.3",
     "@rollup/pluginutils": "^5.1.4",
@@ -23,7 +24,7 @@
     "formsnap": "2.0.1",
     "valibot": "1.1.0",
     "radash": "12.1.0",
-    "ts-ag": "0.0.1-dev.2"
+    "ts-ag": "0.0.1-dev.3"
   },
   "peerDependencies": {
     "svelte": "^5.28.2",

package/src/lib/components/animated/animated.svelte

@@ -74,47 +74,30 @@
     children
   }: Props = $props();
 
-  let animationComplete = $state<boolean>(true);
+  let animationComplete = $state<boolean>(disableInitialAnimation);
   let isInitialRender = $state(true);
   //svelte-ignore non_reactive_update
   let growHeightElement: HTMLDivElement | undefined;
 
   function handleAnimationEnd(e: AnimationEvent) {
-    if (!visible) {
-      animationComplete = true;
-    } else {
-      animationComplete = false;
-    }
-
-    // Mark initial render as complete after animation
-    isInitialRender = false;
-
-    if (onAnimationComplete) {
-      onAnimationComplete(visible);
-    }
+    animationComplete = true;
+    onAnimationComplete?.(visible);
   }
 
   // Reset animation state when visibility changes
   watch(
     () => visible,
-    (newValue) => {
-      if (newValue) {
-        animationComplete = false;
-      }
+    () => {
+      isInitialRender = false;
+      animationComplete = false;
     },
-    { lazy: false }
+    // Dont run on mount
+    { lazy: true }
   );
 
-  // Set initial render to false when component mounts if disableInitialAnimation is true
-  $effect(() => {
-    if (disableInitialAnimation) {
-      isInitialRender = false;
-    }
-  });
-
   const dataState = $derived(visible ? 'visible' : 'hidden');
   // Skip animation classes on initial render when disableInitialAnimation is true
-  const shouldApplyAnimationClasses = $derived(!isInitialRender || !disableInitialAnimation);
+  const shouldApplyAnimationClasses = $derived(!(isInitialRender && disableInitialAnimation));
 
   // Duration in ms for animations
   const durationMap = {
@@ -210,11 +193,14 @@
     }
   }
 
-  $effect(() => {
-    if (animation === 'growHeight') {
-      animateHeight();
+  watch(
+    () => visible,
+    () => {
+      if (animation === 'growHeight') {
+        animateHeight();
+      }
     }
-  });
+  );
 </script>
 
 {#if animation === 'growHeight'}

package/src/lib/components/carousel/carousel-content.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import emblaCarouselSvelte from 'embla-carousel-svelte';
   import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
   import { getEmblaContext } from './context.js';
@@ -14,31 +13,13 @@
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { symbol?: symbol } = $props();
 
   const emblaCtx = getEmblaContext('<Carousel.Content/>', symbol);
-
-  // console.log(emblaCtx);
 </script>
 
-<!-- svelte-ignore event_directive_deprecated -->
 <div
-  class="overflow-hidden"
-  use:emblaCarouselSvelte={{
-    options: {
-      container: `[data-embla-container="${symbol?.description ?? 'default'}"]`,
-      loop: true,
-      slides: `[data-embla-slide="${symbol?.description ?? 'default'}"]`,
-      ...emblaCtx.options,
-      axis: emblaCtx.orientation === 'horizontal' ? 'x' : 'y'
-    },
-    plugins: emblaCtx.plugins
-  }}
-  on:emblaInit={emblaCtx.onInit}
+  bind:this={ref}
+  class={cn('flex', emblaCtx.orientation === 'horizontal' ? '-ml-4' : `-mt-4 flex-col`, className)}
+  data-embla-container={symbol?.description ?? 'default'}
+  {...restProps}
 >
-  <div
-    bind:this={ref}
-    class={cn('flex', emblaCtx.orientation === 'horizontal' ? '-ml-4' : `-mt-4 flex-col`, className)}
-    data-embla-container={symbol?.description}
-    {...restProps}
-  >
-    {@render children?.()}
-  </div>
+  {@render children?.()}
 </div>

package/src/lib/components/carousel/carousel-dots.svelte

@@ -7,13 +7,11 @@
   let {
     ref = $bindable(null),
     class: className,
-    variant = 'outline',
-    size = 'icon',
     symbol = undefined,
     ...restProps
   }: WithoutChildren<Props> & { symbol?: symbol } = $props();
 
-  const emblaCtx = getEmblaContext('<Carousel.Next/>', symbol);
+  const emblaCtx = getEmblaContext('<Carousel.Dots/>', symbol);
 </script>
 
 <div class={cn('flex justify-center gap-1.5', className)}>

package/src/lib/components/carousel/carousel-next.svelte

@@ -4,31 +4,43 @@
   import { getEmblaContext } from './context.js';
   import { cn } from '$shadcn/utils.js';
   import { Button, type Props } from '$shadcn/button/index.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
 
   let {
     ref = $bindable(null),
     class: className,
     variant = 'outline',
     size = 'icon',
+    position = 'default',
     symbol = undefined,
+    onclick,
     ...restProps
-  }: WithoutChildren<Props> & { symbol?: symbol } = $props();
+  }: WithoutChildren<Props> & { symbol?: symbol; position: VariantProps<typeof variants>['variant'] } = $props();
 
   const emblaCtx = getEmblaContext('<Carousel.Next/>', symbol);
+  const variants = tv({
+    base: 'size-8 touch-manipulation rounded-full',
+    variants: {
+      variant: {
+        default:
+          emblaCtx.orientation === 'horizontal'
+            ? 'top-1/2 -right-12 -translate-y-1/2'
+            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        flex: ``
+      }
+    }
+  });
 </script>
 
 <Button
   {variant}
   {size}
-  class={cn(
-    'absolute size-8 touch-manipulation rounded-full',
-    emblaCtx.orientation === 'horizontal'
-      ? 'top-1/2 -right-12 -translate-y-1/2'
-      : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-    className
-  )}
+  class={cn(variants({ variant: position }), className)}
   disabled={!emblaCtx.canScrollNext}
-  onclick={emblaCtx.scrollNext}
+  onclick={(e) => {
+    emblaCtx.scrollNext();
+    onclick?.(e);
+  }}
   onkeydown={emblaCtx.handleKeyDown}
   bind:ref
   {...restProps}

package/src/lib/components/carousel/carousel-previous.svelte

@@ -4,31 +4,43 @@
   import { getEmblaContext } from './context.js';
   import { cn } from '$shadcn/utils.js';
   import { Button, type Props } from '$shadcn/button/index.js';
+  import { type VariantProps, tv } from 'tailwind-variants';
 
   let {
     ref = $bindable(null),
     class: className,
     variant = 'outline',
     size = 'icon',
+    position = 'default',
     symbol = undefined,
+    onclick,
     ...restProps
-  }: WithoutChildren<Props> & { symbol?: symbol } = $props();
+  }: WithoutChildren<Props> & { symbol?: symbol; position: VariantProps<typeof variants>['variant'] } = $props();
 
   const emblaCtx = getEmblaContext('<Carousel.Previous/>', symbol);
+  const variants = tv({
+    base: 'size-8 touch-manipulation rounded-full',
+    variants: {
+      variant: {
+        default:
+          emblaCtx.orientation === 'horizontal'
+            ? 'top-1/2 -left-12 -translate-y-1/2'
+            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        flex: ``
+      }
+    }
+  });
 </script>
 
 <Button
   {variant}
   {size}
-  class={cn(
-    'absolute size-8 touch-manipulation rounded-full',
-    emblaCtx.orientation === 'horizontal'
-      ? 'top-1/2 -left-12 -translate-y-1/2'
-      : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-    className
-  )}
+  class={cn(variants({ variant: position }), className)}
   disabled={!emblaCtx.canScrollPrev}
-  onclick={emblaCtx.scrollPrev}
+  onclick={(e) => {
+    emblaCtx.scrollPrev();
+    onclick?.(e);
+  }}
   onkeydown={emblaCtx.handleKeyDown}
   {...restProps}
   bind:ref

package/src/lib/components/carousel/carousel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from './context.js';
   import { cn } from '$shadcn/utils.js';
+  import emblaCarouselSvelte from 'embla-carousel-svelte';
 
   let {
     opts = {},
@@ -11,6 +12,7 @@
     children,
     pointerdown,
     pointerup,
+    onSelect: a_onSelect,
     symbol = undefined,
     ...restProps
   }: CarouselProps = $props();
@@ -48,6 +50,7 @@
     carouselState.canScrollPrev = api.canScrollPrev();
     carouselState.canScrollNext = api.canScrollNext();
     carouselState.selectedIndex = api.selectedScrollSnap();
+    a_onSelect?.(api);
   }
 
   function reinit(api: CarouselAPI) {
@@ -98,6 +101,23 @@
   });
 </script>
 
-<div class={cn('relative', className)} role="region" aria-roledescription="carousel" {...restProps}>
+<!-- svelte-ignore event_directive_deprecated -->
+<div
+  class={cn('relative', className)}
+  role="region"
+  aria-roledescription="carousel"
+  {...restProps}
+  use:emblaCarouselSvelte={{
+    options: {
+      container: `[data-embla-container="${symbol?.description ?? 'default'}"]`,
+      loop: true,
+      slides: `[data-embla-slide="${symbol?.description ?? 'default'}"]`,
+      ...carouselState.options,
+      axis: carouselState.orientation === 'horizontal' ? 'x' : 'y'
+    },
+    plugins: carouselState.plugins
+  }}
+  on:emblaInit={carouselState.onInit}
+>
   {@render children?.()}
 </div>

package/src/lib/components/carousel/context.ts

@@ -25,6 +25,7 @@ export type CarouselProps = {
   setApi?: (api: CarouselAPI | undefined) => void;
   pointerdown?: (api: CarouselAPI) => void;
   pointerup?: (api: CarouselAPI) => void;
+  onSelect?: (api: CarouselAPI) => void;
   orientation?: 'horizontal' | 'vertical';
 } & WithElementRef<HTMLAttributes<HTMLDivElement>>;
 

package/src/lib/components/gallery/gallery.svelte

@@ -0,0 +1,67 @@
+<!-- src/lib/components/pages/GALLERY.svelte -->
+<script lang="ts" generics="Item">
+  import { onMount, type Snippet } from 'svelte';
+  import { containerSize, cn, type HTMLDivAttributes } from '$utils/index.js';
+  import type { Size } from './utils.js';
+  import { packGrid, styleForSize } from './utils.js';
+  import type { WithElementRef } from 'bits-ui';
+
+  let {
+    images = $bindable(),
+    ref = $bindable(),
+    class: className,
+    child,
+    ...restProps
+  }: WithElementRef<HTMLDivAttributes> & {
+    images: { large: Item[]; medium: Item[]; small: Item[] };
+    child: Snippet<[{ props: { style: string }; item: Item; index: number }]>;
+  } = $props();
+
+  type ItemWithSize = Item & { size: Size };
+
+  let numCols = $state(4);
+
+  onMount(() => {
+    containerSize((size) => {
+      let cols = 2;
+      if (size.width > 640) {
+        cols = 3;
+      }
+      if (size.width > 768) {
+        cols = 4;
+      }
+      numCols = cols;
+    });
+  });
+
+  let large = $derived(images.large.map((img) => ({ ...img, size: 'L' as Size })));
+  let medium = $derived(images.medium.map((img) => ({ ...img, size: 'M' as Size })));
+  let small = $derived(images.small.map((img) => ({ ...img, size: 'S' as Size })));
+
+  // $effect.pre(() => {
+  //   allItems = packGrid($state.snapshot(small), $state.snapshot(medium), $state.snapshot(large), numCols);
+  // });
+
+  let allItems = $derived(
+    packGrid($state.snapshot(small), $state.snapshot(medium), $state.snapshot(large), numCols)
+  ) as ItemWithSize[];
+
+  export { allItems };
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(
+    `
+      @vsm:grid-cols-3
+      @vmd:grid-cols-4
+      grid grid-cols-2 gap-2
+    `,
+    className
+  )}
+  {...restProps}
+>
+  {#each allItems as o, i (i)}
+    {@render child({ props: { style: styleForSize(o.size) }, item: o, index: i })}
+  {/each}
+</div>

package/src/lib/components/gallery/index.ts

@@ -0,0 +1,3 @@
+import Gallery from './gallery.svelte';
+
+export { Gallery };

package/src/lib/components/gallery/utils.ts

@@ -0,0 +1,103 @@
+export type Size = 'S' | 'M' | 'L';
+
+const w = { S: 1, M: 1, L: 2 };
+const h = { S: 1, M: 2, L: 3 };
+
+function imageSize(size: Size) {
+  return [w[size], h[size]];
+}
+
+/**
+ * Gets the style statement for a particular size
+ */
+export function styleForSize(size: Size) {
+  return `grid-column: span ${imageSize(size)[0]}; grid-row: span ${imageSize(size)[1]};`;
+}
+
+/**
+ * Packs images of different sizes into a grid layout
+ * @param small Array of small-sized items to place in grid
+ * @param medium Array of medium-sized items to place in grid
+ * @param large Array of large-sized items to place in grid
+ * @param cols Number of columns in the grid
+ * @returns Array of items arranged in optimal grid order
+ */
+export function packGrid<Item extends { size: Size }>(small: Item[], medium: Item[], large: Item[], cols = 4): Item[] {
+  const result: Item[] = [];
+  // Create a 2D grid to track occupied cells (32 rows max, adjustable column width)
+  const occ: boolean[][] = Array.from({ length: 32 }, () => Array(cols).fill(false));
+
+  let r = 0, // Current row
+    c = 0, // Current column
+    lastSize: Size | null = null; // Track last placed item size for variety
+
+  // Check if we still have any items to place
+  const hasStock = () => small.length || medium.length || large.length;
+
+  // Organize items by size for easy access
+  const pool = { S: small, M: medium, L: large } as const;
+
+  // Dynamic preference ordering strategy for visual variety
+  // After placing one size, prefer different sizes next for better distribution
+  const pref = (prev: Size | null): Size[] => {
+    if (prev === 'L') return ['S', 'M', 'L']; // After large, prefer small
+    if (prev === 'S') return ['L', 'M', 'S']; // After small, prefer large
+    if (prev === 'M') return ['S', 'L', 'M']; // After medium, prefer small
+    return ['L', 'M', 'S']; // Initial preference (start with large items)
+  };
+
+  while (hasStock()) {
+    // Skip already occupied cells
+    while (occ[r]?.[c]) {
+      // Move to next row if end of column reached
+      if (++c === cols) {
+        c = 0;
+        r++;
+      }
+    }
+
+    // Check if item of given size can fit at current position
+    const fits = (size: Size) => {
+      // Check if item would extend beyond right edge
+      if (c + w[size] > cols) return false;
+      // Check if all required cells are unoccupied
+      for (let y = 0; y < h[size]; y++) for (let x = 0; x < w[size]; x++) if (occ[r + y]?.[c + x]) return false;
+      return true;
+    };
+
+    let chosen: Item | undefined;
+
+    // Try to place items in preferred size order
+    for (const sz of pref(lastSize)) {
+      if (pool[sz].length && fits(sz)) {
+        chosen = pool[sz].shift()!;
+        break;
+      }
+    }
+
+    if (!chosen) {
+      // If no item fits at current position, move to next cell
+      if (++c === cols) {
+        c = 0;
+        r++;
+      }
+      continue;
+    }
+
+    // Mark grid cells as occupied based on item dimensions
+    const sx = w[chosen.size],
+      sy = h[chosen.size];
+    for (let y = 0; y < sy; y++) for (let x = 0; x < sx; x++) occ[r + y][c + x] = true;
+
+    result.push(chosen);
+    lastSize = chosen.size; // Remember this size for next preference calculation
+    c += sx; // Move cursor past the placed item
+    // Move to next row if needed
+    if (c === cols) {
+      c = 0;
+      r++;
+    }
+  }
+
+  return result;
+}

package/src/lib/components/gradient/Gradient.svelte

@@ -1,66 +1,60 @@
 <script lang="ts">
   import { WebGlShader } from 'svader';
+  import type { Vec2, Vec4 } from '$utils/glsl.js';
+  import fragment from './gradient.frag?raw';
+  import { cn } from '$utils';
+  import type { BitsPrimitiveDivAttributes } from 'bits-ui';
 
   let {
+    class: className,
     center,
     edge,
     noise,
-    centerPos = ['0.5', '0.5'],
-    radius = ['1.0', '1.0']
-  }: { center: string; edge: string; noise: string; centerPos: [string, string]; radius: [string, string] } = $props();
+    centerPos = [0.5, 0.5],
+    radius = [1.0, 1.0]
+  }: BitsPrimitiveDivAttributes & {
+    center: Vec4;
+    edge: Vec4;
+    noise: number;
+    centerPos?: Vec2;
+    radius?: Vec2;
+  } = $props();
 
-  const shaderCode = `#version 300 es
-  
-  precision highp float;
-  
-  out vec4 fragColor;
-  
-  uniform vec2 u_resolution;
-  uniform vec2 u_offset;
-  
-  // Pseudo-random number between 0 and 1 generator
-  float dither(vec2 pos) {
-      return fract(sin(dot(pos, vec2(12.9898, 78.233))) * 43758.5453);
+  function toRgba(color: Vec4): string {
+    const [r, g, b, a] = color.map((c) => Math.round(c * 255));
+    return `rgba(${r}, ${g}, ${b}, ${color[3].toFixed(3)})`;
   }
-  
-  void main() {
-      vec2 fragPos = gl_FragCoord.xy + u_offset;
 
-      vec2 centerPx = vec2(${centerPos.join()}) * u_resolution;
-      vec2 radiusPx = vec2(${radius.join()}) * u_resolution;
+  let fallbackBackground = $derived.by(() => {
+    // Convert Vec4 colors to rgba() CSS strings
+    const centerColorRgba = toRgba(center);
+    const edgeColorRgba = toRgba(edge);
 
-      // Calculate distance from the center of the canvas
-      float d = distance(fragPos, u_resolution / 2.0); 
+    const posX = centerPos[0] * 100;
+    const posY = centerPos[1] * 100;
 
-      // Calculate max distance from center to corner of the canvas
-      float maxDist = length(u_resolution / 2.0); 
-      // float t = d / maxDist;
+    const sizeX = radius[0] * 100;
+    const sizeY = radius[1] * 100;
 
-      // compute “stretched” distance
-      vec2 diff = fragPos - centerPx;
-      vec2 norm = diff / radiusPx;
-      float t = length(norm);
-  
-      // Dither strength (1/255 ~ 8-bit step size)
-      float noise = (dither(gl_FragCoord.xy) - 0.5) * ( ${noise} / 255.0);
-  
-      vec4 c1 = vec4(${center}); // center 
-      vec4 c2 = vec4(${edge}); // edge 
-  
-      fragColor = mix(c1, c2, clamp(t + noise, 0.0, 1.0));
-  }
-  
-  `;
+    return `radial-gradient(ellipse ${sizeX}% ${sizeY}% at ${posX}% ${posY}%, ${centerColorRgba}, ${edgeColorRgba})`;
+  });
 </script>
 
-<WebGlShader
-  width="100%"
-  height="100%"
-  code={shaderCode}
-  parameters={[
-    { name: 'u_resolution', value: 'resolution' },
-    { name: 'u_offset', value: 'offset' }
-  ]}
->
-  <div class="fallback">WebGL not supported in this environment.</div>
-</WebGlShader>
+<div class={cn('h-full w-full', className)}>
+  <WebGlShader
+    width="100%"
+    height="100%"
+    code={fragment}
+    parameters={[
+      { name: 'u_resolution', value: 'resolution' },
+      { name: 'u_offset', value: 'offset' },
+      { name: 'u_centerPos', type: 'vec2', value: centerPos },
+      { name: 'u_radius', type: 'vec2', value: radius },
+      { name: 'u_noise', type: 'float', value: noise },
+      { name: 'u_centerColor', type: 'vec4', value: center },
+      { name: 'u_edgeColor', type: 'vec4', value: edge }
+    ]}
+  >
+    <div style="background: {fallbackBackground};" class="fallback size-full"></div>
+  </WebGlShader>
+</div>