svelte-ag 1.2.0 → 1.2.2

package/src/lib/api/form.svelte.ts

@@ -1,5 +1,8 @@
+import { dequal } from 'dequal';
+import { watch } from 'runed';
+import { get } from 'svelte/store';
 import { superForm, defaults, setError, setMessage } from 'sveltekit-superforms';
-import type { SuperForm, SuperValidated } from 'sveltekit-superforms';
+import type { SuperForm } from 'sveltekit-superforms';
 import { valibot } from 'sveltekit-superforms/adapters';
 import type {
   ApiRequestFunction,
@@ -10,15 +13,41 @@ import type {
   ApiErrorBody,
   ApiSchema
 } from 'ts-ag';
-import { watch } from 'runed';
-import { dequal } from 'dequal';
-import { get } from 'svelte/store';
 import { safeParse, safeParseAsync } from 'valibot';
 
 export type ValidInput<E extends ApiEndpoints, P extends E['path'], M extends E['method']> = NonNullable<
   ApiInput<E, P, M>
 >;
 
+type FormProps<T extends ApiEndpoints, P extends T['path'], M extends Extract<T, { path: P }>['method']> = NonNullable<
+  Parameters<typeof superForm<ValidInput<T, P, M>>>[1]
+>;
+
+type FormOnUpdateArgs<
+  T extends ApiEndpoints,
+  P extends T['path'],
+  M extends Extract<T, { path: P }>['method']
+> = Parameters<NonNullable<FormProps<T, P, M>['onUpdate']>>[0];
+
+type FormActionArgs<
+  T extends ApiEndpoints,
+  P extends T['path'],
+  M extends Extract<T, { path: P }>['method'],
+  B = undefined
+> = FormOnUpdateArgs<T, P, M> & { body: B };
+
+type FormErrorBody<
+  T extends ApiEndpoints,
+  P extends T['path'],
+  M extends Extract<T, { path: P }>['method']
+> = ApiErrorBody<T, P, M> & {
+  message: string;
+  field?: {
+    name: string;
+    value: string;
+  };
+};
+
 /**
  * Creates a strongly-typed form factory for an API schema.
  *
@@ -44,17 +73,13 @@ export type ApiRequestForm<
    * - `beforeRequest`: called before sending the api call
    * - `onSuccess`: called after a successful response body is parsed.
    * - `onFail`: called after an error response body is parsed and mapped to form errors/messages.
+   *
+   * Each hook receives the `onUpdate` event object plus a `body` field.
    */
   actions?: {
-    beforeRequest?: (form: SuperValidated<ValidInput<API, Path, Method>>) => void | Promise<void>;
-    onSuccess?: (
-      form: SuperValidated<ValidInput<API, Path, Method>>,
-      response: ApiSuccessBody<API, Path, Method>
-    ) => void | Promise<void>;
-    onFail?: (
-      form: SuperValidated<ValidInput<API, Path, Method>>,
-      response: ApiErrorBody<API, Path, Method>
-    ) => void | Promise<void>;
+    beforeRequest?: (args: FormActionArgs<API, Path, Method>) => void | Promise<void>;
+    onSuccess?: (args: FormActionArgs<API, Path, Method, ApiSuccessBody<API, Path, Method>>) => void | Promise<void>;
+    onFail?: (args: FormActionArgs<API, Path, Method, ApiErrorBody<API, Path, Method>>) => void | Promise<void>;
   };
 
   /**
@@ -156,32 +181,31 @@ export function createFormFunction<API extends ApiEndpoints>(
           });
         }
       },
-      async onUpdate({ form }) {
-        if (actions && actions.beforeRequest) await actions.beforeRequest(form);
-
-        if (!form.valid) return;
+      async onUpdate(props) {
+        if (actions && actions.beforeRequest) await actions.beforeRequest({ ...props, body: undefined });
+        if (!props.form.valid) return;
 
         // console.log('onUpdate: sending data', form.data);
-        const res = await request(path, method, form.data);
+        const res = await request(path, method, props.form.data);
 
         if (res.ok === false) {
-          const body = await res.json();
+          const body = (await res.json()) as FormErrorBody<API, typeof path, typeof method>;
 
           // TODO set some kind of overall form error if there is no field
           if (!body.field) {
-            setMessage(form, body.message);
+            setMessage(props.form, body.message);
             // setError(form, '', body.message);
           } else {
-            setError(form, body.field!.name as any, body.field.value, { status: res.status });
+            setError(props.form, body.field!.name as any, body.field.value, { status: res.status });
           }
           if (actions && actions.onFail) {
-            await actions.onFail(form, body as ApiErrorBody<API, typeof path, typeof method>);
+            await actions.onFail({ ...props, body });
           }
         } else {
-          setMessage(form, 'Success');
+          setMessage(props.form, 'Success');
           if (actions && actions.onSuccess) {
-            const body = await res.json();
-            await actions.onSuccess(form, body);
+            const body = (await res.json()) as ApiSuccessBody<API, typeof path, typeof method>;
+            await actions.onSuccess({ ...props, body });
           }
         }
       },

package/src/lib/api/query/cache.unit.test.ts

@@ -1,4 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { Cache } from './cache.svelte.js';
 
 describe('Cache', () => {

package/src/lib/api/query/entrypoint.svelte.ts

@@ -1,7 +1,8 @@
 import { SvelteMap } from 'svelte/reactivity';
 import type { ApiEndpoints, ApiRequestFunction, ApiInput, ApiResponse } from 'ts-ag';
-import { Requestor, Query } from './query.svelte.js';
+
 import { Cache } from './cache.svelte.js';
+import { Requestor, Query } from './query.svelte.js';
 import { batchQueryKey, cacheKey } from './utils.svelte.js';
 
 // ---------------- Global state ----------------

package/src/lib/api/query/entrypoint.unit.test.ts

@@ -1,6 +1,6 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createApiRequest, type ApiEndpoints } from 'ts-ag';
 import * as v from 'valibot';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 type TestResponse = ApiEndpoints['response'];
 

package/src/lib/api/query/query.svelte.ts

@@ -1,11 +1,10 @@
+import { stringify } from 'devalue';
 import type { ApiEndpoints, ApiInput, ApiRequestFunction, ApiSuccessBody, ApiErrorBody, ApiResponse } from 'ts-ag';
 
-import { stringify } from 'devalue';
 import type { Cache } from './cache.svelte';
-
-import { cacheKey } from './utils.svelte.js';
 import type { BatchDetails } from './entrypoint.svelte';
 import { RateLimiter } from './rate.svelte';
+import { cacheKey } from './utils.svelte.js';
 
 export type QueryStatus = 'idle' | 'loading' | 'success' | 'error';
 

package/src/lib/api/query/query.unit.test.ts

@@ -1,9 +1,10 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { stringify } from 'devalue';
 import { createApiRequest, type ApiEndpoints } from 'ts-ag';
+import * as v from 'valibot';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { Cache } from './cache.svelte.js';
 import { Query, Requestor } from './query.svelte.js';
-import { stringify } from 'devalue';
-import * as v from 'valibot';
 
 type PlainUserInput = { id: number };
 type BatchedUserInput = { id: number; group?: string };

package/src/lib/api/query/rate.unit.test.ts

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { sleep } from 'radash';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
 import { RateLimiter } from './rate.svelte.js';
 
 describe('RateLimiter', () => {

package/src/lib/bin/build-tailwind-manifest.ts

@@ -2,10 +2,12 @@ import { existsSync, statSync } from 'node:fs';
 import { glob, readFile, readdir, stat } from 'node:fs/promises';
 import path from 'node:path';
 import process from 'node:process';
+
 import { init, parse as parseEsm } from 'es-module-lexer';
 import { parse as parseSvelte } from 'svelte/compiler';
-import ts from 'typescript';
 import { readPackageJson, writeIfDifferent } from 'ts-ag';
+import ts from 'typescript';
+
 import {
   ensureRelativeManifestSourcePath,
   getTailwindSourcesManifestPath,

package/src/lib/bin/build-tailwind-manifest.unit.test.ts

@@ -1,9 +1,11 @@
-import { afterEach, describe, expect, it } from 'vitest';
 import { mkdir, mkdtemp, readFile, rm, writeFile } from 'fs/promises';
-import { join } from 'path';
 import { tmpdir } from 'os';
-import { main } from './build-tailwind-manifest.js';
+import { join } from 'path';
+
+import { afterEach, describe, expect, it } from 'vitest';
+
 import { parseTailwindSourceManifest } from '../vite/tailwind-sources-manifest.js';
+import { main } from './build-tailwind-manifest.js';
 
 const tempDirectories: string[] = [];
 const originalWorkingDirectory = process.cwd();

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

@@ -50,10 +50,11 @@
 </script>
 
 <script lang="ts">
-  import { cn, type HTMLDivAttributes } from '$utils';
-  import type { WithElementRef } from 'svelte-toolbelt';
-  import { tick } from 'svelte';
   import { watch } from 'runed';
+  import { tick } from 'svelte';
+  import type { WithElementRef } from 'svelte-toolbelt';
+
+  import { cn, type HTMLDivAttributes } from '$utils';
 
   export type Props = WithElementRef<HTMLDivAttributes> & {
     visible: boolean;

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

@@ -1,9 +1,11 @@
 <script lang="ts">
   import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
-  import { getEmblaContext } from './context.js';
+
   import { cn } from '$utils/utils.js';
 
+  import { getEmblaContext } from './context.js';
+
   let {
     ref = $bindable(null),
     class: className,

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

@@ -1,8 +1,10 @@
 <script lang="ts">
   import type { WithoutChildren } from 'bits-ui';
-  import { getEmblaContext } from './context.js';
-  import { cn } from '$utils/utils.js';
+
   import { type Props } from '$shadcn/button/index.js';
+  import { cn } from '$utils/utils.js';
+
+  import { getEmblaContext } from './context.js';
 
   let {
     ref = $bindable(null),

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

@@ -1,9 +1,11 @@
 <script lang="ts">
   import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
-  import { getEmblaContext } from './context.js';
+
   import { cn } from '$utils/utils.js';
 
+  import { getEmblaContext } from './context.js';
+
   let {
     ref = $bindable(null),
     class: className,

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

@@ -1,11 +1,13 @@
 <script lang="ts">
   import ArrowRight from '@lucide/svelte/icons/arrow-right';
   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 { tv, type VariantProps } from 'tailwind-variants';
 
+  import { Button, type Props } from '$shadcn/button/index.js';
+  import { cn } from '$utils/utils.js';
+
+  import { getEmblaContext } from './context.js';
+
   let {
     ref = $bindable(null),
     class: className,

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

@@ -1,11 +1,13 @@
 <script lang="ts">
   import ArrowLeft from '@lucide/svelte/icons/arrow-left';
   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 VariantProps, tv } from 'tailwind-variants';
 
+  import { Button, type Props } from '$shadcn/button/index.js';
+  import { cn } from '$utils/utils.js';
+
+  import { getEmblaContext } from './context.js';
+
   let {
     ref = $bindable(null),
     class: className,

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

@@ -1,9 +1,11 @@
 <script lang="ts">
-  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';
 
+  import { cn } from '$utils/utils.js';
+
+  import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from './context.js';
+
   let {
     opts = {},
     plugins = [],

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

@@ -1,9 +1,9 @@
-import Root from './carousel.svelte';
 import Content from './carousel-content.svelte';
+import Dots from './carousel-dots.svelte';
 import Item from './carousel-item.svelte';
-import Previous from './carousel-previous.svelte';
 import Next from './carousel-next.svelte';
-import Dots from './carousel-dots.svelte';
+import Previous from './carousel-previous.svelte';
+import Root from './carousel.svelte';
 
 export {
   Root as Carousel,

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

@@ -25,6 +25,7 @@ It makes state handling and items sorting easier
   import { DragDropProvider } from '@dnd-kit/svelte';
   // import { move } from '@dnd-kit/helpers';
   import { box } from 'svelte-toolbelt';
+
   import { findItem } from './utils.svelte';
 
   let { children, items = $bindable(), onDragOver, onDragEnd, onDragStart, ...rest }: DndContextProps<T> = $props();

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createDroppable, type CreateDroppableInput } from '@dnd-kit/svelte';
-  import type { ClassValue } from 'svelte/elements';
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
 
   interface DroppableProps extends CreateDroppableInput {
     children: Snippet<[{ isDropTarget: boolean }]>;

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

@@ -5,8 +5,9 @@
 </script>
 
 <script lang="ts">
-  import { getItem } from './DndSortableItem.svelte';
   import { cn } from '$utils/utils.js';
+
+  import { getItem } from './DndSortableItem.svelte';
   let { class: className }: DragHandleProps = $props();
 
   const item = $derived.by(() => {

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

@@ -37,9 +37,10 @@ Usage:
 </script>
 
 <script lang="ts">
-  import { setItem } from './DndSortableItem.svelte';
-  import type { Snippet } from 'svelte';
   import { createDraggable, type CreateDraggableInput } from '@dnd-kit/svelte';
+  import type { Snippet } from 'svelte';
+
+  import { setItem } from './DndSortableItem.svelte';
 
   let { id, child, ...rest }: DndItemProps = $props();
 

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

@@ -1,5 +1,6 @@
 <script lang="ts" module>
   import { type ComponentProps, type Snippet } from 'svelte';
+
   import type { SortableItemChildProps } from './DndSortableItem.svelte';
 
   export type OverlayChildProps<T> = { item: T } & SortableItemChildProps;
@@ -10,6 +11,7 @@
 
 <script lang="ts" generics="T extends {id: string; children?: T[]}">
   import { DragOverlay } from '@dnd-kit/svelte';
+
   import { getDnd } from './DndContext.svelte';
   import { findItem } from './utils.svelte.js';
 

package/src/lib/components/dnd/examples/SimpleSortable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { cn } from '$utils';
+
   import DndDraghandle from '../DndHandle.svelte';
   import SimpleSortable from '../recipies/SimpleSortable.svelte';
 

package/src/lib/components/dnd/recipies/SimpleSortable.svelte

@@ -47,12 +47,13 @@ Usage:
 </script>
 
 <script lang="ts" generics="T extends {id: string; children?: T[]}">
-  import type { ClassValue } from 'svelte/elements';
   import type { Snippet } from 'svelte';
-  import type { SortableItemChildProps } from '../DndSortableItem.svelte';
-  import DndSortableItem from '../DndSortableItem.svelte';
+  import type { ClassValue } from 'svelte/elements';
+
   import DndContext, { type DndContextProps } from '../DndContext.svelte';
   import DndOverlay, { type OverlayChildProps } from '../DndOverlay.svelte';
+  import type { SortableItemChildProps } from '../DndSortableItem.svelte';
+  import DndSortableItem from '../DndSortableItem.svelte';
 
   let { class: className, item: itemSnippet, items = $bindable(), ...rest }: SimpleSortableProps<T> = $props();
 </script>

package/src/lib/components/form/form-button.svelte

@@ -7,10 +7,12 @@ Icons:
 -->
 
 <script module lang="ts">
-  import type { FormFieldProps } from './form-field.svelte';
   import type { FormPath } from 'sveltekit-superforms';
+
   import type { Props as ButtonProps } from '$shadcn/button/index.js';
 
+  import type { FormFieldProps } from './form-field.svelte';
+
   // eslint-disable-next-line
   export type FormButtonProps<T extends Record<string, unknown> = {}, U extends FormPath<T> = any> = Omit<
     ButtonProps,
@@ -24,6 +26,7 @@ Icons:
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
   import { Button } from '$shadcn/button/index.js';
   import { cn, flyAndScale } from '$utils/utils.js';
+
   import { getFormContext } from './form.svelte';
 
   let {

package/src/lib/components/form/form-control.svelte

@@ -5,10 +5,11 @@
 
 <script lang="ts">
   import { Control } from 'formsnap';
-  import { getFormContext, type FormContext } from './form.svelte';
   import type { Snippet } from 'svelte';
   import type { Expand } from 'svelte-toolbelt';
 
+  import { getFormContext, type FormContext } from './form.svelte';
+
   let {
     children: childrenProp,
     ...restProps

package/src/lib/components/form/form-description.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
-  import { cn } from '$utils/utils.js';
   import type { WithoutChild } from 'svelte-toolbelt';
 
+  import { cn } from '$utils/utils.js';
+
   let {
     ref = $bindable(null),
     class: className,

package/src/lib/components/form/form-element-field.svelte

@@ -1,8 +1,9 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
+  import type { WithElementRef, WithoutChildren } from 'bits-ui';
   import * as FormPrimitive from 'formsnap';
-  import type { FormPathLeaves } from 'sveltekit-superforms';
   import type { HTMLAttributes } from 'svelte/elements';
-  import type { WithElementRef, WithoutChildren } from 'bits-ui';
+  import type { FormPathLeaves } from 'sveltekit-superforms';
+
   import { cn } from '$shadcn/utils.js';
 
   let {

package/src/lib/components/form/form-field-errors.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
-  import { cn } from '$shadcn/utils.js';
   import type { WithoutChild } from 'svelte-toolbelt';
 
+  import { cn } from '$shadcn/utils.js';
+
   let {
     ref = $bindable(null),
     class: className,

package/src/lib/components/form/form-field-full.svelte

@@ -54,21 +54,23 @@ else is the same just bind the value prop as so:
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
-  import FormField, { type FormFieldProps } from './form-field.svelte';
-  import FormLabel from './form-label.svelte';
-  import Description from './form-description.svelte';
-  import FieldErrors from './form-field-errors.svelte';
-  import { Input } from '$shadcn/input/index.js';
   import { Control as FormControl } from 'formsnap';
-  import { type FormPath } from 'sveltekit-superforms';
   import { get, set } from 'radash';
+  import type { ComponentProps, Snippet } from 'svelte';
   import { type WithElementRef, type WithoutChildren } from 'svelte-toolbelt';
-  import { cn } from '$utils/index.js';
-  import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
   import { mergeProps } from 'svelte-toolbelt';
-  import { getFormContext } from './form.svelte';
-  import type { ComponentProps, Snippet } from 'svelte';
+  import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+  import { type FormPath } from 'sveltekit-superforms';
+
   import { Checkbox } from '$shadcn/checkbox/index.js';
+  import { Input } from '$shadcn/input/index.js';
+  import { cn } from '$utils/index.js';
+
+  import Description from './form-description.svelte';
+  import FieldErrors from './form-field-errors.svelte';
+  import FormField, { type FormFieldProps } from './form-field.svelte';
+  import FormLabel from './form-label.svelte';
+  import { getFormContext } from './form.svelte';
 
   let {
     ref = $bindable(null),

package/src/lib/components/form/form-field.svelte

@@ -9,10 +9,12 @@
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
   import * as FormPrimitive from 'formsnap';
-  import type { FormPath } from 'sveltekit-superforms';
   import { type WithElementRef, type WithoutChildren } from 'svelte-toolbelt';
-  import { cn } from '$utils/index.js';
   import type { HTMLAttributes } from 'svelte/elements';
+  import type { FormPath } from 'sveltekit-superforms';
+
+  import { cn } from '$utils/index.js';
+
   import { getFormContext } from './form.svelte';
 
   let {

package/src/lib/components/form/form-fieldset.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+  import type { WithoutChild } from 'bits-ui';
   import * as FormPrimitive from 'formsnap';
   import type { FormPath } from 'sveltekit-superforms';
-  import type { WithoutChild } from 'bits-ui';
+
   import { cn } from '$utils/utils.js';
 
   let {

package/src/lib/components/form/form-label.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
+  import type { WithoutChild } from 'svelte-toolbelt';
+
   import { Label } from '$shadcn/label/index.js';
   import { cn } from '$utils/utils.js';
-  import type { WithoutChild } from 'svelte-toolbelt';
 
   let {
     ref = $bindable(null),

package/src/lib/components/form/form-legend.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import * as FormPrimitive from 'formsnap';
   import type { WithoutChild } from 'bits-ui';
+  import * as FormPrimitive from 'formsnap';
+
   import { cn } from '$shadcn/utils.js';
 
   let { ref = $bindable(null), class: className, ...restProps }: WithoutChild<FormPrimitive.LegendProps> = $props();

package/src/lib/components/form/form-message.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { cn } from '$shadcn/utils.js';
   import { mergeProps, type WithChild, type WithoutChildren } from 'svelte-toolbelt';
+
+  import { cn } from '$shadcn/utils.js';
   import { flyAndScale, type HTMLDivAttributes } from '$utils/index.js';
+
   import { getFormContext } from './form.svelte';
 
   let {

package/src/lib/components/form/form.svelte

@@ -14,12 +14,13 @@
 </script>
 
 <script lang="ts">
-  import { cn } from '$utils/utils.js';
   import type { WithElementRef } from 'bits-ui';
   import { getContext, setContext } from 'svelte';
   import type { HTMLFormAttributes } from 'svelte/elements';
   import type { SuperForm } from 'sveltekit-superforms';
 
+  import { cn } from '$utils/utils.js';
+
   let { class: className, ref = $bindable(null), children, form, ...restProps }: FormRootProps = $props();
 
   // svelte-ignore state_referenced_locally

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

@@ -1,10 +1,12 @@
 <!-- src/lib/components/pages/GALLERY.svelte -->
 <script lang="ts" generics="Item">
+  import type { WithElementRef } from 'bits-ui';
   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(),

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

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import type { BitsPrimitiveDivAttributes } from 'bits-ui';
+
   import { WebGlShader } from '$components/shader/index.js';
-  import type { Vec2, Vec4 } from '$utils/glsl.js';
   // import fragment from './gradient.frag';
   import { cn } from '$utils';
-  import type { BitsPrimitiveDivAttributes } from 'bits-ui';
+  import type { Vec2, Vec4 } from '$utils/glsl.js';
 
   let {
     class: className,