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

package/dist/lib/components/form/form-description.svelte.d.ts

@@ -1,4 +1,5 @@
-declare const FormDescription: any;
+import * as FormPrimitive from "formsnap";
+declare const FormDescription: import("svelte").Component<WithoutChild<FormPrimitive.DescriptionProps>, {}, "ref">;
 type FormDescription = ReturnType<typeof FormDescription>;
 export default FormDescription;
 //# sourceMappingURL=form-description.svelte.d.ts.map

package/dist/lib/components/form/form-description.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-description.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-description.svelte.ts"],"names":[],"mappings":"AAqBA,QAAA,MAAM,eAAe,KAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"form-description.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-description.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,aAAa,MAAM,UAAU,CAAC;AAkB1C,QAAA,MAAM,eAAe,qFAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/lib/components/form/form-element-field.svelte.d.ts

@@ -3,7 +3,7 @@ declare class __sveltets_Render<T extends Record<string, unknown>, U extends For
     props(): any;
     events(): {};
     slots(): {};
-    bindings(): any;
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/lib/components/form/form-field-errors.svelte.d.ts

@@ -1,4 +1,4 @@
-declare const FormFieldErrors: any;
+declare const FormFieldErrors: import("svelte").Component<any, {}, "ref">;
 type FormFieldErrors = ReturnType<typeof FormFieldErrors>;
 export default FormFieldErrors;
 //# sourceMappingURL=form-field-errors.svelte.d.ts.map

package/dist/lib/components/form/form-field-errors.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-errors.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-field-errors.svelte.ts"],"names":[],"mappings":"AAoCA,QAAA,MAAM,eAAe,KAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"form-field-errors.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-field-errors.svelte.ts"],"names":[],"mappings":"AAoCA,QAAA,MAAM,eAAe,4CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/lib/components/form/form-field.svelte.d.ts

@@ -3,7 +3,7 @@ declare class __sveltets_Render<T extends Record<string, unknown>, U extends For
     props(): any;
     events(): {};
     slots(): {};
-    bindings(): any;
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/lib/components/form/form-fieldset.svelte.d.ts

@@ -4,7 +4,7 @@ declare class __sveltets_Render<T extends Record<string, unknown>, U extends For
     props(): WithoutChild<FormPrimitive.FieldsetProps<T_1, U_1, any>>;
     events(): {};
     slots(): {};
-    bindings(): any;
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/lib/components/form/form-label.svelte.d.ts

@@ -1,4 +1,5 @@
-declare const FormLabel: any;
+import * as FormPrimitive from "formsnap";
+declare const FormLabel: import("svelte").Component<WithoutChild<FormPrimitive.LabelProps>, {}, "ref">;
 type FormLabel = ReturnType<typeof FormLabel>;
 export default FormLabel;
 //# sourceMappingURL=form-label.svelte.d.ts.map

package/dist/lib/components/form/form-label.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-label.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-label.svelte.ts"],"names":[],"mappings":"AA8BA,QAAA,MAAM,SAAS,KAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"form-label.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-label.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,aAAa,MAAM,UAAU,CAAC;AA2B1C,QAAA,MAAM,SAAS,+EAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/lib/components/form/form-legend.svelte.d.ts

@@ -1,4 +1,5 @@
-declare const FormLegend: any;
+import * as FormPrimitive from "formsnap";
+declare const FormLegend: import("svelte").Component<WithoutChild<FormPrimitive.LegendProps>, {}, "ref">;
 type FormLegend = ReturnType<typeof FormLegend>;
 export default FormLegend;
 //# sourceMappingURL=form-legend.svelte.d.ts.map

package/dist/lib/components/form/form-legend.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-legend.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-legend.svelte.ts"],"names":[],"mappings":"AAqBA,QAAA,MAAM,UAAU,KAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"form-legend.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form-legend.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,aAAa,MAAM,UAAU,CAAC;AAkB1C,QAAA,MAAM,UAAU,gFAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/lib/components/form/form.svelte.d.ts

@@ -1,8 +1,13 @@
 export type FormContext = SuperForm<any>;
 export declare function setFormContext(form: FormContext): void;
 export declare function getFormContext(): FormContext;
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLFormAttributes } from 'svelte/elements';
 import type { SuperForm } from 'sveltekit-superforms';
-declare const Form: any;
+type $$ComponentProps = WithElementRef<HTMLFormAttributes> & {
+    form: SuperForm<any>;
+};
+declare const Form: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Form = ReturnType<typeof Form>;
 export default Form;
 //# sourceMappingURL=form.svelte.d.ts.map

package/dist/lib/components/form/form.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form.svelte.ts"],"names":[],"mappings":"AAIE,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;AAEzC,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,QAE/C;AAED,wBAAgB,cAAc,IAAI,WAAW,CAE5C;AAOH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AA+BtD,QAAA,MAAM,IAAI,KAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"form.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/form/form.svelte.ts"],"names":[],"mappings":"AAIE,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;AAEzC,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,QAE/C;AAED,wBAAgB,cAAc,IAAI,WAAW,CAE5C;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAErD,KAAK,gBAAgB,GAAI,cAAc,CAAC,kBAAkB,CAAC,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC;AA6BxF,QAAA,MAAM,IAAI,yDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/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/dist/lib/components/gallery/gallery.svelte.d.ts

@@ -0,0 +1,35 @@
+import { type Snippet } from 'svelte';
+import { type HTMLDivAttributes } from '../../utils/index.js';
+declare class __sveltets_Render<Item> {
+    props(): HTMLDivAttributes & {
+        ref?: HTMLElement | null | undefined;
+    } & {
+        images: {
+            large: Item[];
+            medium: Item[];
+            small: Item[];
+        };
+        child: Snippet<[{
+            props: {
+                style: string;
+            };
+            item: Item;
+            index: number;
+        }]>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "ref" | "images";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Gallery: $$IsomorphicComponent;
+type Gallery<Item> = InstanceType<typeof Gallery<Item>>;
+export default Gallery;
+//# sourceMappingURL=gallery.svelte.d.ts.map

package/dist/lib/components/gallery/gallery.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/gallery/gallery.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAqB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAuE5E,cAAM,iBAAiB,CAAC,IAAI;IACxB,KAAK;;;;;;;;;;uBA5D6B,MAAM;;;mBAAuB,MAAM;;;IA+DrE,MAAM;IAGN,KAAK;IAGL,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjZ,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACpI,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,OAAO,EAAE,qBAAmC,CAAC;AACjC,KAAK,OAAO,CAAC,IAAI,IAAI,YAAY,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1D,eAAe,OAAO,CAAC"}

package/dist/lib/components/gallery/index.d.ts

@@ -0,0 +1,3 @@
+import Gallery from './gallery.svelte';
+export { Gallery };
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/gallery/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/gallery/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/lib/components/gallery/index.js

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

package/dist/lib/components/gallery/utils.d.ts

@@ -0,0 +1,17 @@
+export type Size = 'S' | 'M' | 'L';
+/**
+ * Gets the style statement for a particular size
+ */
+export declare function styleForSize(size: Size): string;
+/**
+ * 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 declare function packGrid<Item extends {
+    size: Size;
+}>(small: Item[], medium: Item[], large: Item[], cols?: number): Item[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/components/gallery/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/gallery/utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AASnC;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,UAEtC;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,IAAI,SAAS;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,IAAI,SAAI,GAAG,IAAI,EAAE,CA8EpH"}

package/dist/lib/components/gallery/utils.js

@@ -0,0 +1,94 @@
+const w = { S: 1, M: 1, L: 2 };
+const h = { S: 1, M: 2, L: 3 };
+function imageSize(size) {
+    return [w[size], h[size]];
+}
+/**
+ * Gets the style statement for a particular size
+ */
+export function styleForSize(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(small, medium, large, cols = 4) {
+    const result = [];
+    // Create a 2D grid to track occupied cells (32 rows max, adjustable column width)
+    const occ = Array.from({ length: 32 }, () => Array(cols).fill(false));
+    let r = 0, // Current row
+    c = 0, // Current column
+    lastSize = 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 };
+    // Dynamic preference ordering strategy for visual variety
+    // After placing one size, prefer different sizes next for better distribution
+    const pref = (prev) => {
+        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) => {
+            // 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;
+        // 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/dist/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>

package/dist/lib/components/gradient/Gradient.svelte.d.ts

@@ -1,4 +1,13 @@
-declare const Gradient: any;
+import type { Vec2, Vec4 } from '../../utils/glsl.js';
+import type { BitsPrimitiveDivAttributes } from 'bits-ui';
+type $$ComponentProps = BitsPrimitiveDivAttributes & {
+    center: Vec4;
+    edge: Vec4;
+    noise: number;
+    centerPos?: Vec2;
+    radius?: Vec2;
+};
+declare const Gradient: import("svelte").Component<$$ComponentProps, {}, "">;
 type Gradient = ReturnType<typeof Gradient>;
 export default Gradient;
 //# sourceMappingURL=Gradient.svelte.d.ts.map

package/dist/lib/components/gradient/Gradient.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gradient.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/gradient/Gradient.svelte.ts"],"names":[],"mappings":"AAsEA,QAAA,MAAM,QAAQ,KAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Gradient.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/gradient/Gradient.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,gBAAgB,GAAI,0BAA0B,GAAG;IACnD,MAAM,EAAE,IAAI,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,MAAM,CAAC,EAAE,IAAI,CAAC;CACf,CAAC;AAqDJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/lib/components/gradient/gradient.frag

@@ -0,0 +1,43 @@
+#version 300 es
+
+precision highp float;
+
+out vec4 fragColor;
+
+uniform vec2 u_resolution;
+uniform vec2 u_offset;
+
+uniform vec2 u_centerPos;
+uniform vec2 u_radius;
+uniform float u_noise;
+uniform vec4 u_centerColor;
+uniform vec4 u_edgeColor;
+
+// Pseudo-random number between 0 and 1 generator
+float dither(vec2 pos) {
+    return fract(sin(dot(pos, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+void main() {
+    vec2 fragPos = gl_FragCoord.xy + u_offset;
+
+    vec2 centerPx = u_centerPos * u_resolution;
+    vec2 radiusPx = u_radius * u_resolution;
+
+    // Calculate distance from the center of the canvas
+    float d = distance(fragPos, u_resolution / 2.0);
+
+    // Calculate max distance from center to corner of the canvas
+    float maxDist = length(u_resolution / 2.0);
+    // float t = d / maxDist;
+
+    // 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) * (u_noise / 255.0);
+
+    fragColor = mix(u_centerColor, u_edgeColor, clamp(t + noise, 0.0, 1.0));
+}

package/dist/lib/components/safe/safe.svelte.d.ts

@@ -3,7 +3,7 @@ import type { WithElementRef } from 'svelte-toolbelt';
 export type Props = WithElementRef<HTMLDivAttributes> & {
     links?: boolean;
 };
-declare const Safe: any;
+declare const Safe: import("svelte").Component<Props, {}, "">;
 type Safe = ReturnType<typeof Safe>;
 export default Safe;
 //# sourceMappingURL=safe.svelte.d.ts.map

package/dist/lib/components/safe/safe.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"safe.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/safe/safe.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,KAAK,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAqBJ,QAAA,MAAM,IAAI,KAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"safe.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/safe/safe.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAM,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,KAAK,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAqBJ,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/lib/components/search/combinations/searchPopover.svelte.d.ts

@@ -7,7 +7,17 @@ export type SearchPopoverProps = {
 } & Omit<PopoverTriggerProps, 'value'>;
 import { Search } from '../index.js';
 import type { PopoverTriggerProps } from 'bits-ui';
-declare const SearchPopover: any;
+declare const SearchPopover: import("svelte").Component<SearchPopoverProps, {
+    focus: () => void;
+    searchPagnation: ({
+        $on?(type: string, callback: (e: any) => void): () => void;
+        $set?(props: Partial<Search.PagnationProps>): void;
+    } & {
+        activeItems: (import("../types.js").Item & {
+            score?: number;
+        })[];
+    }) | null;
+}, "value" | "perPage">;
 type SearchPopover = ReturnType<typeof SearchPopover>;
 export default SearchPopover;
 //# sourceMappingURL=searchPopover.svelte.d.ts.map

package/dist/lib/components/search/combinations/searchPopover.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchPopover.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/search/combinations/searchPopover.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IAC3C,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;CACrC,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;AAGzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA0DnD,QAAA,MAAM,aAAa,KAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"searchPopover.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/search/combinations/searchPopover.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IAC3C,IAAI,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;CACrC,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;AAGzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AA0DnD,QAAA,MAAM,aAAa;;;;;;;;;;uBAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/lib/components/search/components/search-empty.svelte.d.ts

@@ -1,4 +1,5 @@
-declare const SearchEmpty: any;
+import type { SearchEmptyProps } from '../types';
+declare const SearchEmpty: import("svelte").Component<SearchEmptyProps, {}, "ref">;
 type SearchEmpty = ReturnType<typeof SearchEmpty>;
 export default SearchEmpty;
 //# sourceMappingURL=search-empty.svelte.d.ts.map

package/dist/lib/components/search/components/search-empty.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-empty.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/search/components/search-empty.svelte.ts"],"names":[],"mappings":"AAwCA,QAAA,MAAM,WAAW,KAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"search-empty.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/search/components/search-empty.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAoCjD,QAAA,MAAM,WAAW,yDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/lib/components/search/components/search-input.svelte.d.ts

@@ -1,4 +1,5 @@
-declare const SearchInput: any;
+import type { SearchInputProps } from '../types';
+declare const SearchInput: import("svelte").Component<SearchInputProps, {}, "value" | "ref">;
 type SearchInput = ReturnType<typeof SearchInput>;
 export default SearchInput;
 //# sourceMappingURL=search-input.svelte.d.ts.map

package/dist/lib/components/search/components/search-input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-input.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/search/components/search-input.svelte.ts"],"names":[],"mappings":"AA2DA,QAAA,MAAM,WAAW,KAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"search-input.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/search/components/search-input.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAuDjD,QAAA,MAAM,WAAW,mEAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/lib/components/search/components/search-list.svelte.d.ts

@@ -1,4 +1,5 @@
-declare const SearchList: any;
+import type { SearchListProps } from '../types';
+declare const SearchList: import("svelte").Component<SearchListProps, {}, "ref">;
 type SearchList = ReturnType<typeof SearchList>;
 export default SearchList;
 //# sourceMappingURL=search-list.svelte.d.ts.map

package/dist/lib/components/search/components/search-list.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-list.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/search/components/search-list.svelte.ts"],"names":[],"mappings":"AAuDA,QAAA,MAAM,UAAU,KAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"search-list.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/search/components/search-list.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAmDhD,QAAA,MAAM,UAAU,wDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/lib/components/search/components/search-pagnation.svelte.d.ts

@@ -1,4 +1,9 @@
-declare const SearchPagnation: any;
+import type { SearchPagnationProps } from '../types';
+declare const SearchPagnation: import("svelte").Component<SearchPagnationProps, {
+    activeItems: (import("../types").Item & {
+        score?: number;
+    })[];
+}, "page" | "ref" | "perPage">;
 type SearchPagnation = ReturnType<typeof SearchPagnation>;
 export default SearchPagnation;
 //# sourceMappingURL=search-pagnation.svelte.d.ts.map

package/dist/lib/components/search/components/search-pagnation.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-pagnation.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/search/components/search-pagnation.svelte.ts"],"names":[],"mappings":"AAiFA,QAAA,MAAM,eAAe,KAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"search-pagnation.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/search/components/search-pagnation.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA6ErD,QAAA,MAAM,eAAe;;;;8BAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/lib/components/search/components/search.svelte.d.ts

@@ -1,4 +1,5 @@
-declare const Search: any;
+import type { SearchProps } from '../types';
+declare const Search: import("svelte").Component<SearchProps, {}, "value" | "ref" | "items" | "searchWith">;
 type Search = ReturnType<typeof Search>;
 export default Search;
 //# sourceMappingURL=search.svelte.d.ts.map