@ims360/svelte-ivory 0.0.42 → 0.0.45

package/dist/components/ai/Chat.svelte

@@ -41,7 +41,7 @@
 
     let {
         class: clazz,
-        b_chat: chat = $bindable(),
+        b_chat = $bindable(),
         userMessage = defaultUserMessage,
         systemMessage = defaultSystemMessage,
         placeholder,
@@ -60,7 +60,7 @@
         return remainHeight;
     }
 
-    async function scrollToBottom() {
+    export async function scrollToBottom() {
         if (!chatContainer) return;
         await tick();
         await tick();
@@ -74,20 +74,20 @@
     }
 
     async function submit(message: AiChatMessage) {
-        if (chat.loading) {
+        if (b_chat.loading) {
             return;
         }
 
-        chat.messages.push({
+        b_chat.messages.push({
             ...message,
             from: 'user',
             time: new Date()
         });
         // prevent the user from sending another message while we are loading the ai response
-        chat.loading = true;
+        b_chat.loading = true;
 
         // add an empty system message to the chat, this will indicate a loading state
-        chat.messages.push({
+        b_chat.messages.push({
             from: 'system',
             message: '',
             time: new Date()
@@ -97,7 +97,7 @@
 
         await externalSubmit(message);
 
-        chat.loading = false;
+        b_chat.loading = false;
     }
 </script>
 
@@ -106,11 +106,11 @@
         class="flex grow flex-col gap-4 overflow-auto pr-2 [scrollbar-gutter:stable]"
         bind:this={chatContainer}
     >
-        {#if chat.messages.length === 0 && placeholder}
+        {#if b_chat.messages.length === 0 && placeholder}
             {@render placeholder()}
         {/if}
-        {#each chat.messages as _, i}
-            {@const message = chat.messages[i]}
+        {#each b_chat.messages as _, i (i)}
+            {@const message = b_chat.messages[i]}
             {#if message.from === 'user'}
                 {@render userMessage({
                     message,
@@ -120,7 +120,7 @@
                 {@render systemMessage({
                     message,
                     i,
-                    minHeight: i === chat.messages.length - 1 ? lastMessageMinHeight : 0
+                    minHeight: i === b_chat.messages.length - 1 ? lastMessageMinHeight : 0
                 })}
             {/if}
         {/each}
@@ -136,7 +136,7 @@
     message: AiChatMessage;
     minHeight?: number;
 })}
-    <AiMessage bind:b_message={chat.messages[i]} {minHeight} />
+    <AiMessage bind:b_message={b_chat.messages[i]} {minHeight} />
 {/snippet}
 
 {#snippet defaultUserMessage({

package/dist/components/ai/Chat.svelte.d.ts

@@ -35,7 +35,9 @@ interface Props {
  * Comes with default styles for the chat messages, but can be customized with the `userMessage` and `systemMessage` props.
  * The input component has to be provided as a child component, and the `submit` function has to be provided as a callback.
  */
-declare const Chat: import("svelte").Component<Props, {}, "b_chat">;
+declare const Chat: import("svelte").Component<Props, {
+    scrollToBottom: () => Promise<void>;
+}, "b_chat">;
 type Chat = ReturnType<typeof Chat>;
 export default Chat;
 //# sourceMappingURL=Chat.svelte.d.ts.map

package/dist/components/ai/Chat.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/Chat.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,MAAM;IACnB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;IAC7E,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD;AAqHL;;;;GAIG;AACH,QAAA,MAAM,IAAI,iDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Chat.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ai/Chat.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,MAAM;IACnB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,aAAa,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;IAC7E,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrD;AAqHL;;;;GAIG;AACH,QAAA,MAAM,IAAI;;YAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/ai/UserMessage.svelte

@@ -28,7 +28,7 @@
     {@render messageText({ message })}
     {#if message.files}
         <div class="flex flex-row items-center gap-2">
-            {#each message.files as file}
+            {#each message.files as file, i (i)}
                 {@render attachedFile(file)}
             {/each}
         </div>

package/dist/components/basic/checkbox/Checkbox.svelte

@@ -55,7 +55,6 @@
     });
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions-->
 <svelte:element
     this={onclick ? 'button' : 'div'}
     type="button"

package/dist/components/basic/checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAuDL,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAsDL,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/layout/drawer/Drawer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import type { IvoryComponent, TransitionProps } from '../../../types';
+    import type { TransitionProps } from '../../../types';
     import { X } from '@lucide/svelte';
     import clsx from 'clsx';
     import type { Snippet } from 'svelte';
@@ -11,13 +11,13 @@
 
     export type DrawerPlacement = 'left' | 'right';
 
-    export interface DrawerProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
+    export type DrawerProps = TransitionProps & {
         class?: string;
         b_open: boolean;
-        title?: string;
+        title?: string | Snippet;
         children: Snippet;
         placement?: DrawerPlacement;
-    }
+    };
 </script>
 
 <script lang="ts">
@@ -42,8 +42,6 @@
 {#if b_open}
     <Portal>
         <HiddenBackground {onclose}>
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
                 class={twMerge(
                     clsx([
@@ -54,13 +52,19 @@
                     ])
                 )}
                 onclick={(e) => e.stopPropagation()}
-                in:inTransition
-                out:outTransition
+                in:inTransition|global
+                out:outTransition|global
                 {...rest}
             >
                 <div class="flex flex-row items-center justify-between gap-8">
                     {#if title}
-                        <Heading>{title}</Heading>
+                        <Heading class="flex grow flex-row items-center gap-4">
+                            {#if typeof title === 'function'}
+                                {@render title()}
+                            {:else}
+                                {title}
+                            {/if}
+                        </Heading>
                     {/if}
                     <button class="group ml-auto flex justify-end" type="button" onclick={onclose}>
                         <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />

package/dist/components/layout/drawer/Drawer.svelte.d.ts

@@ -1,13 +1,13 @@
-import type { IvoryComponent, TransitionProps } from '../../../types';
+import type { TransitionProps } from '../../../types';
 import type { Snippet } from 'svelte';
 export type DrawerPlacement = 'left' | 'right';
-export interface DrawerProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
+export type DrawerProps = TransitionProps & {
     class?: string;
     b_open: boolean;
-    title?: string;
+    title?: string | Snippet;
     children: Snippet;
     placement?: DrawerPlacement;
-}
+};
 declare const Drawer: import("svelte").Component<DrawerProps, {}, "b_open">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/components/layout/drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,eAAe;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAoDL,QAAA,MAAM,MAAM,uDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B,CAAC;AAwDN,QAAA,MAAM,MAAM,uDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/modal/Modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-    import type { IvoryComponent, TransitionProps } from '../../../types';
+    import type { TransitionProps } from '../../../types';
     import { X } from '@lucide/svelte';
     import clsx from 'clsx';
     import { type Snippet } from 'svelte';
@@ -9,7 +9,7 @@
     import { Heading, HiddenBackground, Portal } from '..';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
-    export interface ModalProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
+    export type ModalProps = TransitionProps & {
         /** Class of the modal itself, does not apply to the inner div */
         class?: ClassValue;
         /** Class of the div wrapping the children */
@@ -22,8 +22,9 @@
         preventClosing?: boolean;
         /** Variant of the modal, applies styling to the header */
         variant?: ModalVariant;
-        title?: string;
-    }
+        title?: string | Snippet;
+        onclick?: MouseEventHandler<HTMLDivElement>;
+    };
 
     export type ModalVariant = 'success' | 'warning' | 'error' | 'info';
 </script>
@@ -73,14 +74,10 @@
             class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
         >
             {#if modal}
-                <!-- svelte-ignore a11y_no_static_element_interactions -->
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <div {...rest} {onclick}>
                     {@render modal()}
                 </div>
             {:else}
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <div
                     class={twMerge(
                         clsx([
@@ -104,7 +101,13 @@
                         ]}
                     >
                         {#if title}
-                            <Heading>{title}</Heading>
+                            <Heading class="flex grow flex-row items-center gap-4">
+                                {#if typeof title === 'function'}
+                                    {@render title()}
+                                {:else}
+                                    {title}
+                                {/if}
+                            </Heading>
                         {/if}
                         <button
                             class="group ml-auto flex justify-end"

package/dist/components/layout/modal/Modal.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { IvoryComponent, TransitionProps } from '../../../types';
+import type { TransitionProps } from '../../../types';
 import { type Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
+import type { ClassValue, MouseEventHandler } from 'svelte/elements';
 /** Props for the modal, expose if you overwrite the defaults in a custom component */
-export interface ModalProps extends IvoryComponent<HTMLDivElement>, TransitionProps {
+export type ModalProps = TransitionProps & {
     /** Class of the modal itself, does not apply to the inner div */
     class?: ClassValue;
     /** Class of the div wrapping the children */
@@ -15,8 +15,9 @@ export interface ModalProps extends IvoryComponent<HTMLDivElement>, TransitionPr
     preventClosing?: boolean;
     /** Variant of the modal, applies styling to the header */
     variant?: ModalVariant;
-    title?: string;
-}
+    title?: string | Snippet;
+    onclick?: MouseEventHandler<HTMLDivElement>;
+};
 export type ModalVariant = 'success' | 'warning' | 'error' | 'info';
 interface Props extends ModalProps {
     /** If you don't want the title and close button to be included you can overwrite the default modal */

package/dist/components/layout/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAqB,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,eAAe;IAC/E,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAoFL,oFAAoF;AACpF,QAAA,MAAM,KAAK,iDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAKrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG;IACvC,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,wCAAwC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAsFL,oFAAoF;AACpF,QAAA,MAAM,KAAK,iDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/layout/popover/Popover.svelte

@@ -82,6 +82,7 @@
 
     // TODO: this is kinda hacky
     $effect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         [popover, target];
         postion(b_open);
     });

package/dist/components/layout/popover/Popover.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAMH,KAAK,qBAAqB,EAC7B,MAAM,kBAAkB,CAAC;AAK1B,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AA4DL,gEAAgE;AAChE,QAAA,MAAM,OAAO,wDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAMH,KAAK,qBAAqB,EAC7B,MAAM,kBAAkB,CAAC;AAK1B,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6DL,gEAAgE;AAChE,QAAA,MAAM,OAAO,wDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/layout/tooltip/Tooltip.svelte

@@ -1,13 +1,15 @@
 <script lang="ts" module>
-    import type { IvoryComponent } from '../../../types';
     import clsx from 'clsx';
     import type { Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { ClassValue, MouseEventHandler } from 'svelte/elements';
     import { twMerge } from 'tailwind-merge';
     import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
     import Portal from '../portal/Portal.svelte';
 
-    export interface TooltipProps extends IvoryComponent<HTMLElement> {
+    export interface TooltipProps {
+        onclick?: MouseEventHandler<HTMLElement>;
+        class?: ClassValue;
+        style?: string;
         children?: Snippet;
         /** The content of the tooltip */
         tooltip: string | Snippet;
@@ -67,8 +69,6 @@
     @component
     Shows additional information when hovering over an element.
 -->
-<!-- Ignoring this error is fine since it's a false positive -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
     this={href ? 'a' : rest.onclick ? 'button' : 'div'}
     type={rest.onclick ? 'button' : undefined}

package/dist/components/layout/tooltip/Tooltip.svelte.d.ts

@@ -1,8 +1,10 @@
-import type { IvoryComponent } from '../../../types';
 import type { Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
+import type { ClassValue, MouseEventHandler } from 'svelte/elements';
 import { type PopoverPlacement } from '../popover/Popover.svelte';
-export interface TooltipProps extends IvoryComponent<HTMLElement> {
+export interface TooltipProps {
+    onclick?: MouseEventHandler<HTMLElement>;
+    class?: ClassValue;
+    style?: string;
     children?: Snippet;
     /** The content of the tooltip */
     tooltip: string | Snippet;

package/dist/components/layout/tooltip/Tooltip.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AA+DL,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAErE,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AA6DL,kEAAkE;AAClE,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/table/Column.svelte

@@ -36,8 +36,8 @@
     }: ColumnProps = $props();
 
     // Register the new column if this is the first table row that was rendered
-    const { table, nestingInset } = getTableContext();
-    const column = table.registerColumn({ resizable, ...props });
+    const { registerColumn, nestingInset } = getTableContext();
+    const column = registerColumn({ resizable, ...props });
     const allowClicking = $derived(!!onclick);
 
     // passes updated props to the column

package/dist/components/table/ColumnHead.svelte

@@ -1,21 +1,21 @@
 <script lang="ts" module>
     import { getContext, setContext, type Snippet } from 'svelte';
     import { resize } from '../../utils/actions';
-    import type { Column } from './columnController.svelte';
+    import type { ColumnController } from './columnController.svelte';
 
     const CONTEXT = {};
-    function setColumnHeadContext(column: Column) {
+    function setColumnHeadContext(column: ColumnController) {
         setContext(CONTEXT, column);
     }
 
-    export function getColumnHeadContext(): Column {
+    export function getColumnHeadContext(): ColumnController {
         return getContext(CONTEXT);
     }
 </script>
 
 <script lang="ts">
     type Props = {
-        column: Column;
+        column: ColumnController;
         children: Snippet;
     };
 

package/dist/components/table/ColumnHead.svelte.d.ts

@@ -1,8 +1,8 @@
 import { type Snippet } from 'svelte';
-import type { Column } from './columnController.svelte';
-export declare function getColumnHeadContext(): Column;
+import type { ColumnController } from './columnController.svelte';
+export declare function getColumnHeadContext(): ColumnController;
 type Props = {
-    column: Column;
+    column: ColumnController;
     children: Snippet;
 };
 declare const ColumnHead: import("svelte").Component<Props, {}, "">;

package/dist/components/table/ColumnHead.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHead.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/ColumnHead.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAOxD,wBAAgB,oBAAoB,IAAI,MAAM,CAE7C;AAED,KAAK,KAAK,GAAG;IACT,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AA+CN,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ColumnHead.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/ColumnHead.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAOlE,wBAAgB,oBAAoB,IAAI,gBAAgB,CAEvD;AAED,KAAK,KAAK,GAAG;IACT,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AA+CN,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/table/Row.svelte

@@ -51,7 +51,6 @@
     });
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
     this={elementProps.this}
     {...elementProps}

package/dist/components/table/Row.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Row.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Row.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,wBAAgB,UAAU,CAAC,CAAC,EAAE,UAAU,QAEvC;AAED,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACrB;AAkDL,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Row.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Row.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKlD,wBAAgB,UAAU,CAAC,CAAC,EAAE,UAAU,QAEvC;AAED,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CACrB;AAiDL,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/components/table/Table.svelte

@@ -4,12 +4,14 @@
     import clsx from 'clsx';
     import { getContext, setContext, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
+    import { SvelteSet } from 'svelte/reactivity';
     import { twMerge } from 'tailwind-merge';
-    import { Column, type TableConfig, type TablePlugin, type TableRow } from '.';
+    import { Column as ColumnComponent, type TablePlugin, type TableRow } from '.';
     import ColumnHead from './ColumnHead.svelte';
     import Row from './Row.svelte';
     import VirtualList from './VirtualList.svelte';
-    import { createTableConfig } from './controller.svelte';
+    import { ColumnController, type ColumnConfig } from './columnController.svelte';
+    import { treeWalker, type TableState } from './controller';
 
     export interface TableProps<T extends TableRow<T>> {
         class?: ClassValue;
@@ -24,7 +26,11 @@
         rowClass?: ClassValue;
         headerClass?: ClassValue;
         plugins?: TablePlugin<T>[];
-        config?: TableConfig<T>;
+        /**
+         * **Bindable**
+         */
+        b_columns?: ColumnController[];
+        expanded?: SvelteSet<string>;
         /**
          * **Bindable**
          */
@@ -35,9 +41,11 @@
 
     const TABLE_CONTEXT = {};
     export type TableContext<T extends TableRow<T>> = {
-        table: TableConfig<T>;
+        registerColumn: (config: ColumnConfig) => ColumnController;
+        toggleExpansion: (id: string) => void;
         nestingInset: number;
     };
+
     function setTableContext<T extends TableRow<T>>(context: TableContext<T>) {
         setContext(TABLE_CONTEXT, context);
     }
@@ -48,8 +56,6 @@
 </script>
 
 <script lang="ts" generics="T extends TableRow<T>">
-    interface Props<TI extends { id: string }> extends TableProps<TI> {}
-
     let {
         class: clazz,
         data,
@@ -61,31 +67,57 @@
         onclick,
         href,
         plugins = [],
-        config: table = createTableConfig<T>(),
-        nestingInset = 4
-    }: Props<T> = $props();
+        expanded: expanded = new SvelteSet<string>(),
+        nestingInset = 4,
+        b_columns: externalColumns = $bindable(),
+        b_scrollTop = $bindable()
+    }: TableProps<T> = $props();
 
-    $effect(() => {
-        table.data = data;
-        table.plugins = plugins;
-    });
+    let columns = $state<ColumnController[]>(externalColumns ?? []);
+    const results = $derived(computeResults(data, expanded, plugins));
+
+    function toggleExpansion(id: string) {
+        if (expanded.has(id)) expanded.delete(id);
+        else expanded.add(id);
+    }
 
     setTableContext({
-        get table() {
-            return table;
+        toggleExpansion,
+        registerColumn(config: ColumnConfig) {
+            let existingColumn: ColumnController | undefined = undefined;
+            for (const column of existingColumn || columns) {
+                if (column.id !== config.id) continue;
+                existingColumn = column;
+                break;
+            }
+            if (existingColumn) return existingColumn;
+            const col = new ColumnController(config);
+            (externalColumns || columns).push(col);
+            return col;
         },
         get nestingInset() {
             return nestingInset;
         }
     });
 
+    function computeResults(data: T[], expanded: Set<string>, plugins: TablePlugin<T>[]) {
+        let state: TableState<T> = {
+            data,
+            expanded
+        };
+        for (const plugin of plugins) {
+            state = plugin(state);
+        }
+        return treeWalker(state);
+    }
+
     const treeIndicatorId = pseudoRandomId('tree-indicator-');
 </script>
 
 <VirtualList
-    data={table.results.entries}
+    data={results.entries}
     class={twMerge(clsx(['flex flex-col overflow-hidden border-transparent', clazz]))}
-    bind:b_scrollTop={table.scrollTop}
+    bind:b_scrollTop
     {rowHeight}
 >
     {#snippet header()}
@@ -97,7 +129,7 @@
                 )
             )}
         >
-            {#each table.columns as column (column.id)}
+            {#each externalColumns || columns as column (column.id)}
                 <ColumnHead {column}>
                     {#if typeof column.header === 'function'}
                         {@render column.header()}
@@ -119,15 +151,15 @@
             class={rowClass}
         >
             {@render firstColumn?.({ row: node })}
-            <Column
+            <ColumnComponent
                 id={treeIndicatorId}
                 resizable={false}
                 header=""
                 onclick={() => {
-                    table.toggleExpansion(node.id);
+                    toggleExpansion(node.id);
                 }}
-                ignoreWidth={table.results.someHaveChildren}
-                width={table.results.someHaveChildren ? 24 : 0}
+                ignoreWidth={results.someHaveChildren}
+                width={results.someHaveChildren ? 24 : 0}
                 minWidth={0}
             >
                 <div
@@ -138,12 +170,12 @@
                         <ChevronRight
                             class={[
                                 'ml-auto aspect-square shrink-0 transition-transform duration-100',
-                                table.expanded.has(id) && 'rotate-90'
+                                expanded.has(id) && 'rotate-90'
                             ]}
                         />
                     {/if}
                 </div>
-            </Column>
+            </ColumnComponent>
             {@render passedChildren?.({ row: node, nestingLevel, index })}
         </Row>
     {/snippet}