svelte-ag 0.0.2-dev.80 → 0.0.2-dev.82

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

@@ -1 +1 @@
-{"version":3,"file":"carousel-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/carousel-content.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIrD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAuC/F,QAAA,MAAM,eAAe,yDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"carousel-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/carousel-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIrD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAwB/F,QAAA,MAAM,eAAe,yDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"carousel-dots.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/carousel-dots.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAE5D,KAAK,gBAAgB,GAAI,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA8BvE,QAAA,MAAM,YAAY,yDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"carousel-dots.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/carousel-dots.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAE5D,KAAK,gBAAgB,GAAI,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA4BvE,QAAA,MAAM,YAAY,yDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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

@@ -1,9 +1,24 @@
-import type { WithoutChildren } from 'bits-ui';
 import { type Props } from '$shadcn/button/index.js';
-type $$ComponentProps = WithoutChildren<Props> & {
+import { type VariantProps } from 'tailwind-variants';
+declare const CarouselNext: import("svelte").Component<Omit<Props, "children"> & {
     symbol?: symbol;
-};
-declare const CarouselNext: import("svelte").Component<$$ComponentProps, {}, "ref">;
+    position: VariantProps<import("tailwind-variants").TVReturnType<{
+        variant: {
+            default: string;
+            flex: string;
+        };
+    }, undefined, "size-8 touch-manipulation rounded-full", {
+        variant: {
+            default: string;
+            flex: string;
+        };
+    }, undefined, import("tailwind-variants").TVReturnType<{
+        variant: {
+            default: string;
+            flex: string;
+        };
+    }, undefined, "size-8 touch-manipulation rounded-full", unknown, unknown, undefined>>>["variant"];
+}, {}, "ref">;
 type CarouselNext = ReturnType<typeof CarouselNext>;
 export default CarouselNext;
 //# sourceMappingURL=carousel-next.svelte.d.ts.map

package/dist/lib/components/carousel/carousel-next.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-next.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/carousel-next.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAE5D,KAAK,gBAAgB,GAAI,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAiCvE,QAAA,MAAM,YAAY,yDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"carousel-next.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/carousel-next.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AA8C1D,QAAA,MAAM,YAAY;aAtC8C,MAAM;cAAY,YAAY;;;;;;;;;;;;;;;0FAAiB,CAAC,SAAS,CAAC;aAsChE,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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

@@ -1,9 +1,24 @@
-import type { WithoutChildren } from 'bits-ui';
 import { type Props } from '$shadcn/button/index.js';
-type $$ComponentProps = WithoutChildren<Props> & {
+import { type VariantProps } from 'tailwind-variants';
+declare const CarouselPrevious: import("svelte").Component<Omit<Props, "children"> & {
     symbol?: symbol;
-};
-declare const CarouselPrevious: import("svelte").Component<$$ComponentProps, {}, "ref">;
+    position: VariantProps<import("tailwind-variants").TVReturnType<{
+        variant: {
+            default: string;
+            flex: string;
+        };
+    }, undefined, "size-8 touch-manipulation rounded-full", {
+        variant: {
+            default: string;
+            flex: string;
+        };
+    }, undefined, import("tailwind-variants").TVReturnType<{
+        variant: {
+            default: string;
+            flex: string;
+        };
+    }, undefined, "size-8 touch-manipulation rounded-full", unknown, unknown, undefined>>>["variant"];
+}, {}, "ref">;
 type CarouselPrevious = ReturnType<typeof CarouselPrevious>;
 export default CarouselPrevious;
 //# sourceMappingURL=carousel-previous.svelte.d.ts.map

package/dist/lib/components/carousel/carousel-previous.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-previous.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/carousel-previous.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAE5D,KAAK,gBAAgB,GAAI,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAiCvE,QAAA,MAAM,gBAAgB,yDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"carousel-previous.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/carousel-previous.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,KAAK,YAAY,EAAM,MAAM,mBAAmB,CAAC;AA8C1D,QAAA,MAAM,gBAAgB;aAtC0C,MAAM;cAAY,YAAY;;;;;;;;;;;;;;;0FAAiB,CAAC,SAAS,CAAC;aAsC5D,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/carousel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,aAAa,EAAsC,MAAM,cAAc,CAAC;AA6GxG,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/carousel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,aAAa,EAAsC,MAAM,cAAc,CAAC;AA2HxG,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/lib/components/carousel/context.d.ts

@@ -13,6 +13,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>>;
 export type EmblaContext = {

package/dist/lib/components/carousel/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,mBAAmB,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,WAAW,GACrB,WAAW,CAAC,WAAW,CAAC,uBAAuB,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,SAAS,CACzF,GAAG,EAAE,WAAW,CAAC,MAAM,WAAW,CAAC,KAChC,IAAI,GACL,WAAW,GACX,KAAK,CAAC;AAEZ,KAAK,mBAAmB,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAElF,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;AAC7D,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;AAI7D,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,WAAW,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,eAAe,CAAC;IACzB,OAAO,EAAE,eAAe,CAAC;IACzB,MAAM,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAIF,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,GAAE,MAA+B,GAAG,YAAY,CAG3G;AAED,wBAAgB,eAAe,CAAC,IAAI,SAAmB,EAAE,MAAM,GAAE,MAA+B,GAAG,YAAY,CAK9G"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/carousel/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,mBAAmB,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,WAAW,GACrB,WAAW,CAAC,WAAW,CAAC,uBAAuB,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,SAAS,CACzF,GAAG,EAAE,WAAW,CAAC,MAAM,WAAW,CAAC,KAChC,IAAI,GACL,WAAW,GACX,KAAK,CAAC;AAEZ,KAAK,mBAAmB,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAElF,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;AAC7D,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;AAI7D,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,WAAW,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,eAAe,CAAC;IACzB,OAAO,EAAE,eAAe,CAAC;IACzB,MAAM,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAIF,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,GAAE,MAA+B,GAAG,YAAY,CAG3G;AAED,wBAAgB,eAAe,CAAC,IAAI,SAAmB,EAAE,MAAM,GAAE,MAA+B,GAAG,YAAY,CAK9G"}

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;
+}