svelte-ag 1.0.13 → 1.0.15

package/dist/app.css

@@ -1,5 +1,5 @@
 /* Tailwind */
-@import 'tailwindcss' source(none);
+@import 'tailwindcss';
 @import 'tw-animate-css';
 
 /* Plugins */
@@ -12,9 +12,9 @@
 
 /*   --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Ubuntu', sans-serif; */
 
-html {
+/* html {
   scrollbar-gutter: stable;
-}
+} */
 
 /* Below is for shadcn */
 
@@ -185,21 +185,3 @@ html {
     }
   }
 }
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-  h1 {
-    @apply text-2xl font-bold;
-  }
-  h2 {
-    @apply text-xl font-bold;
-  }
-  h3 {
-    @apply text-lg font-bold;
-  }
-}

package/dist/lib/components/animated/animated.svelte

@@ -6,38 +6,30 @@
     variants: {
       animation: {
         flyAndScale: `
-          data-[state="visible"]:animate-in data-[state="visible"]:fade-in-0
-          data-[state="visible"]:zoom-in-95
+          data-[state="visible"]:animate-in data-[state="visible"]:fade-in-0 data-[state="visible"]:zoom-in-95
           data-[state="visible"]:slide-in-from-bottom-[10%]
-          data-[state="hidden"]:animate-out data-[state="hidden"]:fade-out-0
-          data-[state="hidden"]:zoom-out-95
-          data-[state="hidden"]:slide-out-to-bottom-[10%]
+          data-[state="hidden"]:fade-out-0 data-[state="hidden"]:zoom-out-95
+          data-[state="hidden"]:slide-out-to-bottom-[10%] data-[state="hidden"]:animate-out
         `,
         slide: `
-          data-[state="visible"]:animate-in
-          data-[state="visible"]:slide-in-from-right
-          data-[state="hidden"]:animate-out
-          data-[state="hidden"]:slide-out-to-right
+          data-[state="visible"]:animate-in data-[state="visible"]:slide-in-from-right
+          data-[state="hidden"]:slide-out-to-right data-[state="hidden"]:animate-out
         `,
         fade: `
           data-[state="visible"]:animate-in data-[state="visible"]:fade-in
-          data-[state="hidden"]:animate-out data-[state="hidden"]:fade-out
+          data-[state="hidden"]:fade-out data-[state="hidden"]:animate-out
         `,
         zoom: `
           data-[state="visible"]:animate-in data-[state="visible"]:zoom-in-95
-          data-[state="hidden"]:animate-out data-[state="hidden"]:zoom-out-95
+          data-[state="hidden"]:zoom-out-95 data-[state="hidden"]:animate-out
         `,
         slideUp: `
-          data-[state="visible"]:animate-in
-          data-[state="visible"]:slide-in-from-bottom
-          data-[state="hidden"]:animate-out
-          data-[state="hidden"]:slide-out-to-bottom
+          data-[state="visible"]:animate-in data-[state="visible"]:slide-in-from-bottom
+          data-[state="hidden"]:slide-out-to-bottom data-[state="hidden"]:animate-out
         `,
         slideDown: `
-          data-[state="visible"]:animate-in
-          data-[state="visible"]:slide-in-from-top
-          data-[state="hidden"]:animate-out
-          data-[state="hidden"]:slide-out-to-top
+          data-[state="visible"]:animate-in data-[state="visible"]:slide-in-from-top
+          data-[state="hidden"]:slide-out-to-top data-[state="hidden"]:animate-out
         `,
         growHeight: `overflow-hidden`
       },
@@ -82,12 +74,13 @@
     children
   }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
   let animationComplete = $state<boolean>(disableInitialAnimation);
   let isInitialRender = $state(true);
   //svelte-ignore non_reactive_update
   let growHeightElement: HTMLDivElement | undefined;
 
-  function handleAnimationEnd(e: AnimationEvent) {
+  function handleAnimationEnd() {
     animationComplete = true;
     onAnimationComplete?.(visible);
   }

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

@@ -1 +1 @@
-{"version":3,"file":"animated.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/animated/animated.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDAmD3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAGvE,OAAO,EAAM,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKpD,MAAM,MAAM,KAAK,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4KJ,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"animated.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/animated/animated.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDA2C3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAGvE,OAAO,EAAM,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKpD,MAAM,MAAM,KAAK,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACtD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,mBAAmB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA6KJ,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -12,7 +12,7 @@
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { symbol?: symbol } = $props();
 
-  const emblaCtx = getEmblaContext('<Carousel.Content/>', symbol);
+  const emblaCtx = $derived(getEmblaContext('<Carousel.Content/>', symbol));
 </script>
 
 <div

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

@@ -2,16 +2,15 @@
   import type { WithoutChildren } from 'bits-ui';
   import { getEmblaContext } from './context.js';
   import { cn } from '../../utils/utils.js';
-  import { Button, type Props } from '$shadcn/button/index.js';
+  import { type Props } from '$shadcn/button/index.js';
 
   let {
     ref = $bindable(null),
     class: className,
-    symbol = undefined,
-    ...restProps
+    symbol = undefined
   }: WithoutChildren<Props> & { symbol?: symbol } = $props();
 
-  const emblaCtx = getEmblaContext('<Carousel.Dots/>', symbol);
+  const emblaCtx = $derived(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;AA4BvE,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,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEpD,KAAK,gBAAgB,GAAI,eAAe,CAAC,KAAK,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA2BvE,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-item.svelte

@@ -12,7 +12,7 @@
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { symbol?: symbol } = $props();
 
-  const emblaCtx = getEmblaContext('<Carousel.Item/>', symbol);
+  const emblaCtx = $derived(getEmblaContext('<Carousel.Item/>', symbol));
 </script>
 
 <div

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

@@ -17,19 +17,21 @@
     ...restProps
   }: 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: ``
+  const emblaCtx = $derived(getEmblaContext('<Carousel.Next/>', symbol));
+  const variants = $derived(
+    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
@@ -39,7 +41,7 @@
   disabled={!emblaCtx.canScrollNext}
   onclick={(e) => {
     emblaCtx.scrollNext();
-    onclick?.(e);
+    onclick?.(e as any);
   }}
   onkeydown={emblaCtx.handleKeyDown}
   bind:ref

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":"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"}
+{"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;AAgD1D,QAAA,MAAM,YAAY;aAxC8C,MAAM;cAAY,YAAY;;;;;;;;;;;;;;;0FAAiB,CAAC,SAAS,CAAC;aAwChE,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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

@@ -17,19 +17,21 @@
     ...restProps
   }: 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: ``
+  const emblaCtx = $derived(getEmblaContext('<Carousel.Previous/>', symbol));
+  const variants = $derived(
+    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
@@ -39,7 +41,7 @@
   disabled={!emblaCtx.canScrollPrev}
   onclick={(e) => {
     emblaCtx.scrollPrev();
-    onclick?.(e);
+    onclick?.(e as any);
   }}
   onkeydown={emblaCtx.handleKeyDown}
   {...restProps}

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":"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"}
+{"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;AAgD1D,QAAA,MAAM,gBAAgB;aAxC0C,MAAM;cAAY,YAAY;;;;;;;;;;;;;;;0FAAiB,CAAC,SAAS,CAAC;aAwC5D,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/lib/components/carousel/carousel.svelte

@@ -2,6 +2,7 @@
   import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from './context.js';
   import { cn } from '../../utils/utils.js';
   import emblaCarouselSvelte from 'embla-carousel-svelte';
+  import { watch } from 'runed';
 
   let {
     opts = {},
@@ -17,7 +18,8 @@
     ...restProps
   }: CarouselProps = $props();
 
-  let carouselState = $state<EmblaContext>({
+  // WATCH this make sure the derived works
+  let carouselState = $derived<EmblaContext>({
     api: undefined,
     scrollPrev,
     scrollNext,
@@ -33,7 +35,13 @@
     scrollTo
   });
 
-  setEmblaContext(carouselState, symbol);
+  watch(
+    () => symbol,
+    () => {
+      // TODO maybe unset the old symbol
+      setEmblaContext(carouselState, symbol);
+    }
+  );
 
   function scrollPrev() {
     carouselState.api?.scrollPrev();

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;AA2HxG,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;AAoIxG,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/lib/components/dnd/DndContext.svelte

@@ -0,0 +1,80 @@
+<!-- https://next.dndkit.com/react/components/drag-drop-provider -->
+
+<script lang="ts" module>
+  import type { ComponentProps } from 'svelte';
+  import { getContext, setContext } from 'svelte';
+  import type { WritableBox } from 'svelte-toolbelt';
+
+  export type DndContextProps<T extends { id: string }> = ComponentProps<DragDropProvider> & { items: T[] };
+
+  export type DndState<T> = {
+    items: WritableBox<T[]>;
+  };
+
+  const SYMBOL_KEY = 'dnd-context';
+
+  /**
+   * Instantiates a new `DndState` instance and sets it in the context.
+   *
+   * @param props The constructor props for the `DndState` class.
+   * @returns  The `DndState` instance.
+   */
+  export function setDnd<T>(dnd: DndState<T>): DndState<T> {
+    return setContext(Symbol.for(SYMBOL_KEY), dnd);
+  }
+
+  /**
+   * Retrieves the `DndState` instance from the context. This is a class instance,
+   * so you cannot destructure it.
+   * @returns The `DndState` instance.
+   */
+  export function useDnd<T>(): DndState<T> {
+    return getContext(Symbol.for(SYMBOL_KEY));
+  }
+</script>
+
+<script lang="ts" generics="T extends {id: string; children?: T[]}">
+  import { DragDropProvider } from '@dnd-kit-svelte/svelte';
+  import { RestrictToWindowEdges } from '@dnd-kit-svelte/svelte/modifiers';
+  import { findItem, sensors } from './utils.svelte.js';
+  import { box } from 'svelte-toolbelt';
+
+  let { children, items = $bindable(), onDragEnd, ...rest }: DndContextProps<T> = $props();
+
+  const dnd = setDnd<T>({
+    items: box.with(
+      () => items,
+      (v) => (items = v)
+    )
+  });
+</script>
+
+<DragDropProvider
+  {sensors}
+  modifiers={[RestrictToWindowEdges]}
+  onDragEnd={(e, m) => {
+    const targetId = e.operation.target?.id;
+    const sourceId = e.operation.source?.id;
+
+    if (targetId && sourceId) {
+      const sourceDetails = findItem(sourceId, dnd.items.current);
+      const targetList =
+        findItem(targetId, dnd.items.current)?.item.children ?? (targetId !== undefined ? items : undefined);
+
+      if (sourceDetails && targetList) {
+        const item = sourceDetails.list.splice(sourceDetails.index, 1)[0];
+
+        if (e.operation.source && 'index' in e.operation.source && typeof e.operation.source.index === 'number') {
+          // present in sorted lists
+          targetList.splice(e.operation.source.index, 0, item);
+        } else {
+          targetList.push(item);
+        }
+      }
+    }
+    onDragEnd?.(e, m);
+  }}
+  {...rest}
+>
+  {@render children?.()}
+</DragDropProvider>

package/dist/lib/components/dnd/DndContext.svelte.d.ts

@@ -0,0 +1,64 @@
+import type { ComponentProps } from 'svelte';
+import type { WritableBox } from 'svelte-toolbelt';
+export type DndContextProps<T extends {
+    id: string;
+}> = ComponentProps<DragDropProvider> & {
+    items: T[];
+};
+export type DndState<T> = {
+    items: WritableBox<T[]>;
+};
+/**
+ * Instantiates a new `DndState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `DndState` class.
+ * @returns  The `DndState` instance.
+ */
+export declare function setDnd<T>(dnd: DndState<T>): DndState<T>;
+/**
+ * Retrieves the `DndState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `DndState` instance.
+ */
+export declare function useDnd<T>(): DndState<T>;
+import { DragDropProvider } from '@dnd-kit-svelte/svelte';
+declare function $$render<T extends {
+    id: string;
+    children?: T[];
+}>(): {
+    props: DndContextProps<T>;
+    exports: {};
+    bindings: "items";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+    children?: T[];
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "items";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+        children?: T[];
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+        children?: T[];
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DndContext: $$IsomorphicComponent;
+type DndContext<T extends {
+    id: string;
+    children?: T[];
+}> = InstanceType<typeof DndContext<T>>;
+export default DndContext;
+//# sourceMappingURL=DndContext.svelte.d.ts.map

package/dist/lib/components/dnd/DndContext.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DndContext.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/DndContext.svelte.ts"],"names":[],"mappings":"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"}

package/dist/lib/components/dnd/DndDroppable.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { useDroppable, type UseDroppableInput } from '@dnd-kit-svelte/svelte';
+  import type { ClassValue } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+
+  interface DroppableProps extends UseDroppableInput {
+    children: Snippet<[{ isDropTarget: boolean }]>;
+    class?: ClassValue;
+  }
+
+  let { children, class: className, ...rest }: DroppableProps = $props();
+
+  const { ref, isDropTarget } = useDroppable(rest);
+</script>
+
+<div class={className} {@attach ref}>
+  {@render children({ isDropTarget: isDropTarget.current })}
+</div>

package/dist/lib/components/dnd/DndDroppable.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type UseDroppableInput } from '@dnd-kit-svelte/svelte';
+import type { ClassValue } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface DroppableProps extends UseDroppableInput {
+    children: Snippet<[{
+        isDropTarget: boolean;
+    }]>;
+    class?: ClassValue;
+}
+declare const DndDroppable: import("svelte").Component<DroppableProps, {}, "">;
+type DndDroppable = ReturnType<typeof DndDroppable>;
+export default DndDroppable;
+//# sourceMappingURL=DndDroppable.svelte.d.ts.map

package/dist/lib/components/dnd/DndDroppable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DndDroppable.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/DndDroppable.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,cAAe,SAAQ,iBAAiB;IAChD,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAkBH,QAAA,MAAM,YAAY,oDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/lib/components/dnd/DndHandle.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  export type DragHandleProps = {
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { getItemContext } from './DndSortableItem.svelte';
+  import { cn } from '../../utils/utils.js';
+  let { class: className }: DragHandleProps = $props();
+
+  const item = $derived(getItemContext());
+
+  let handleClass = $derived(
+    cn(
+      `
+        icon-draghandle text-muted-foreground flex size-4 transition-colors duration-150
+        hover:text-foreground
+      `,
+      item?.isDragging?.current ? `cursor-grabbing` : `cursor-grab`,
+      className
+    )
+  );
+</script>
+
+{#if !item}
+  <div data-drag-handle class={cn(handleClass, className)}></div>
+{:else}
+  <div data-drag-handle class={cn(handleClass, className)} {@attach item!.handleRef}></div>
+{/if}

package/dist/lib/components/dnd/DndHandle.svelte.d.ts

@@ -0,0 +1,7 @@
+export type DragHandleProps = {
+    class?: string;
+};
+declare const DndHandle: import("svelte").Component<DragHandleProps, {}, "">;
+type DndHandle = ReturnType<typeof DndHandle>;
+export default DndHandle;
+//# sourceMappingURL=DndHandle.svelte.d.ts.map

package/dist/lib/components/dnd/DndHandle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DndHandle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/DndHandle.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmCJ,QAAA,MAAM,SAAS,qDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/lib/components/dnd/DndItem.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">
+  export type DndItemChildProps = {
+    isDragging: boolean;
+    isOverlay: boolean;
+  };
+
+  export type DndItemProps = HTMLDivAttributes &
+    UseDraggableInput & {
+      child: Snippet<[DndItemChildProps]>;
+    };
+</script>
+
+<script lang="ts">
+  /**
+   * This component is a draggable element.
+   * It places the necessary attributes on the div for tracking it.
+   * It styles the position of the div while its being dragged.
+   * Everything else about it needs to be done by the consumer
+   *
+   * It can either facilitate a drag handle with the item context
+   * or it can be draggable itself
+   */
+  import { cn, type HTMLDivAttributes } from '../../utils';
+  import { useDraggable, type UseDraggableInput } from '@dnd-kit-svelte/svelte';
+  import { setItemContext } from './DndSortableItem.svelte';
+  import type { Snippet } from 'svelte';
+
+  let { child, class: className, style: styleName, ...rest }: DndItemProps = $props();
+
+  const { isDragging, ref, handleRef } = useDraggable({
+    ...rest
+  });
+
+  // These are used by the drag handle
+  setItemContext({
+    isDragging,
+    handleRef
+  });
+</script>
+
+<div class={cn('relative', className)} style={styleName} {@attach ref}>
+  {@render child?.({ isDragging: isDragging.current, isOverlay: false })}
+</div>

package/dist/lib/components/dnd/{dnd-item.svelte.d.ts → DndItem.svelte.d.ts}

@@ -1,7 +1,10 @@
-export type ItemChildProps = {
+export type DndItemChildProps = {
     isDragging: boolean;
     isOverlay: boolean;
 };
+export type DndItemProps = HTMLDivAttributes & UseDraggableInput & {
+    child: Snippet<[DndItemChildProps]>;
+};
 /**
    * This component is a draggable element.
    * It places the necessary attributes on the div for tracking it.
@@ -12,16 +15,9 @@ export type ItemChildProps = {
    * or it can be draggable itself
    */
 import { type HTMLDivAttributes } from '../../utils';
+import { type UseDraggableInput } from '@dnd-kit-svelte/svelte';
 import type { Snippet } from 'svelte';
-type $$ComponentProps = Exclude<HTMLDivAttributes, 'children'> & {
-    dragHandle?: boolean;
-    child: Snippet<[{
-        isDragging: boolean;
-        isOverlay: boolean;
-    }]>;
-    item: any;
-};
-declare const DndItem: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const DndItem: import("svelte").Component<DndItemProps, {}, "">;
 type DndItem = ReturnType<typeof DndItem>;
 export default DndItem;
-//# sourceMappingURL=dnd-item.svelte.d.ts.map
+//# sourceMappingURL=DndItem.svelte.d.ts.map

package/dist/lib/components/dnd/DndItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DndItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dnd/DndItem.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,iBAAiB,GAC1C,iBAAiB,GAAG;IAClB,KAAK,EAAE,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC;CACrC,CAAC;AAGN;;;;;;;;KAQK;AACL,OAAO,EAAM,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE9E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA8BtC,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/lib/components/dnd/DndOverlay.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+  import { type Snippet } from 'svelte';
+
+  export type DragOverlayProps<T> = {
+    child: Snippet<[{ item: T } & SortableItemChildProps]>;
+  };
+</script>
+
+<script lang="ts" generics="T extends {id: string; children?: T[]}">
+  import { DragOverlay } from '@dnd-kit-svelte/svelte';
+  import { useDnd } from './DndContext.svelte';
+  import type { SortableItemChildProps } from './DndSortableItem.svelte';
+  import { findItem } from './utils.svelte.js';
+
+  const dnd = useDnd<T>();
+
+  let { child }: DragOverlayProps<T> = $props();
+</script>
+
+<DragOverlay>
+  {#snippet children(source)}
+    {@const item = findItem(source?.id, dnd.items.current)}
+    {#if item}
+      {@render child({
+        item: item.item,
+        isDragging: false,
+        isOverlay: true
+      })}
+    {:else}
+      oh dear
+    {/if}
+  {/snippet}
+</DragOverlay>