@immich/ui 0.60.2 → 0.60.3

package/dist/common/context.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { FieldContext, TableContext } from '../types.js';
+import type { ChildKey } from '../constants.js';
+import type { ChildData, FieldContext, TableContext } from '../types.js';
 export declare const setFieldContext: (context: () => FieldContext) => () => FieldContext;
 export declare const getFieldContext: () => () => {
     class?: (string & (import("svelte/elements").ClassValue | null)) | undefined;
@@ -455,3 +456,9 @@ export declare const getTableContext: () => () => {
     size: import("../types.js").Size;
     striped: boolean;
 };
+export declare const setChildContext: (key: ChildKey) => {
+    getByKey: (key: ChildKey) => ChildData | undefined;
+};
+export declare const getChildContext: (key: ChildKey) => () => {
+    register: (key: ChildKey, data: () => ChildData) => void;
+};

package/dist/common/context.svelte.js

@@ -1,5 +1,6 @@
 import { withPrefix } from '../utilities/internal.js';
 import { getContext, setContext } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
 const fieldKey = Symbol(withPrefix('field'));
 export const setFieldContext = (context) => setContext(fieldKey, context);
 export const getFieldContext = () => {
@@ -18,3 +19,30 @@ export const getTableContext = () => {
         return { spacing, size, striped };
     };
 };
+const asChildKey = (key) => withPrefix(key);
+export const setChildContext = (key) => {
+    const map = new SvelteMap();
+    const context = {
+        register: (child, data) => {
+            map.set(child, data);
+            return () => {
+                map.delete(child);
+            };
+        },
+    };
+    setContext(asChildKey(key), () => context);
+    return {
+        getByKey: (key) => map.get(key)?.(),
+    };
+};
+const noop = () => { };
+export const getChildContext = (key) => {
+    return () => {
+        const context = getContext(asChildKey(key));
+        if (!context) {
+            console.log(`Unable to find child context for key: ${key}`);
+        }
+        const { register } = context?.() ?? { register: () => noop };
+        return { register };
+    };
+};

package/dist/components/AppShell/AppShell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import { setChildContext } from '../../common/context.svelte.js';
   import Scrollable from '../Scrollable/Scrollable.svelte';
   import { ChildKey, zIndex } from '../../constants.js';
   import { cleanClass } from '../../utilities/internal.js';
@@ -12,25 +12,23 @@
 
   const { class: className, children }: Props = $props();
 
-  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.AppShell);
-  const bar = $derived(getChildSnippet(ChildKey.AppShellBar));
-  const header = $derived(getChildSnippet(ChildKey.AppShellHeader));
-  const sidebar = $derived(getChildSnippet(ChildKey.AppShellSidebar));
+  const { getByKey } = setChildContext(ChildKey.AppShell);
+  const bar = $derived(getByKey(ChildKey.AppShellBar));
+  const header = $derived(getByKey(ChildKey.AppShellHeader));
+  const sidebar = $derived(getByKey(ChildKey.AppShellSidebar));
 </script>
 
 <div class={cleanClass('flex h-dvh flex-col overflow-hidden', className)}>
   {#if bar}
     <div class={cleanClass('h-control-bar-container px-2 pt-2', zIndex.AppShellBar, bar.class)}>
-      {@render bar.snippet()}
+      {@render bar.children?.()}
     </div>
   {:else if header}
-    <header class={cleanClass('h-control-bar-container flex items-center gap-2 border-b', header.class)}>
-      {@render header.snippet()}
-    </header>
+    {@render header.children?.()}
   {/if}
   <div class="relative flex w-full grow overflow-y-auto">
     {#if sidebar}
-      {@render sidebar.snippet()}
+      {@render sidebar.children?.()}
     {/if}
     <Scrollable class="grow" resetOnNavigate>
       {@render children?.()}

package/dist/components/AppShell/AppShellBar.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    children: Snippet;
-    class?: string;
-  };
-
-  let { children, class: className }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.AppShell} as={ChildKey.AppShellBar} class={className}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.AppShell} as={ChildKey.AppShellBar} {...props} />

package/dist/components/AppShell/AppShellBar.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    children: Snippet;
-    class?: string;
-};
-declare const AppShellBar: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const AppShellBar: import("svelte").Component<ChildData, {}, "">;
 type AppShellBar = ReturnType<typeof AppShellBar>;
 export default AppShellBar;

package/dist/components/AppShell/AppShellHeader.svelte

@@ -1,15 +1,29 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { tv } from 'tailwind-variants';
 
   type Props = {
-    children: Snippet;
-  };
+    border?: boolean;
+  } & ChildData;
 
-  let { children }: Props = $props();
+  let { border = true, class: className, children }: Props = $props();
+
+  const styles = tv({
+    base: 'h-control-bar-container flex items-center gap-2',
+    variants: {
+      border: {
+        true: 'border-b',
+        false: '',
+      },
+    },
+  });
 </script>
 
 <Child for={ChildKey.AppShell} as={ChildKey.AppShellHeader}>
-  {@render children?.()}
+  <header class={cleanClass(styles({ border }), className)}>
+    {@render children?.()}
+  </header>
 </Child>

package/dist/components/AppShell/AppShellHeader.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Snippet } from 'svelte';
+import type { ChildData } from '../../types.js';
 type Props = {
-    children: Snippet;
-};
+    border?: boolean;
+} & ChildData;
 declare const AppShellHeader: import("svelte").Component<Props, {}, "">;
 type AppShellHeader = ReturnType<typeof AppShellHeader>;
 export default AppShellHeader;

package/dist/components/Avatar/Avatar.svelte

@@ -1,25 +1,20 @@
 <script lang="ts">
   import type { Size } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
   import { tv } from 'tailwind-variants';
 
   type Props = {
     size?: Size;
     color?: 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green' | 'purple' | 'orange' | 'gray' | 'amber';
     name: string;
+    class?: string;
   };
 
-  const { color = 'primary', size = 'medium', name }: Props = $props();
+  const { color = 'primary', size = 'medium', name, class: className }: Props = $props();
 
   const styles = tv({
-    base: 'flex items-center justify-center font-medium text-white select-none',
+    base: 'flex items-center overflow-hidden rounded-full align-middle text-white shadow-md',
     variants: {
-      size: {
-        tiny: 'h-5 w-5 text-xs',
-        small: 'h-7 w-7 text-sm',
-        medium: 'h-10 w-10 text-base',
-        large: 'h-12 w-12 text-lg',
-        giant: 'h-16 w-16 text-xl',
-      },
       color: {
         primary: 'bg-primary text-light',
         pink: 'bg-pink-400',
@@ -32,25 +27,28 @@
         blue: 'bg-blue-500',
         green: 'bg-green-600',
       },
+      size: {
+        tiny: 'h-5 w-5 text-xs',
+        small: 'h-7 w-7 text-sm',
+        medium: 'h-10 w-10 text-base',
+        large: 'h-12 w-12 text-lg',
+        giant: 'h-16 w-16 text-xl',
+      },
     },
   });
 
-  const wrapper = tv({
-    base: 'block w-full overflow-hidden rounded-full shadow-md',
-  });
-
   const getInitials = (name: string) => {
     return name
       .split(' ')
       .map((part) => part.at(0))
       .join('')
-      .substr(0, 2)
+      .substring(0, 2)
       .toUpperCase();
   };
 
   const initials = $derived(getInitials(name));
 </script>
 
-<figure class={wrapper()}>
-  <span class={styles({ size, color })}>{initials}</span>
+<figure class={cleanClass(styles({ size, color }), className)}>
+  <span class="w-full text-center font-medium select-none">{initials}</span>
 </figure>

package/dist/components/Avatar/Avatar.svelte.d.ts

@@ -3,6 +3,7 @@ type Props = {
     size?: Size;
     color?: 'primary' | 'pink' | 'red' | 'yellow' | 'blue' | 'green' | 'purple' | 'orange' | 'gray' | 'amber';
     name: string;
+    class?: string;
 };
 declare const Avatar: import("svelte").Component<Props, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;

package/dist/components/Card/Card.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import { setChildContext } from '../../common/context.svelte.js';
   import IconButton from '../IconButton/IconButton.svelte';
   import { ChildKey } from '../../constants.js';
   import type { Color } from '../../types.js';
@@ -77,10 +77,10 @@
     expanded = !expanded;
   };
 
-  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Card);
-  const headerChild = $derived(getChildSnippet(ChildKey.CardHeader));
-  const bodyChild = $derived(getChildSnippet(ChildKey.CardBody));
-  const footerChild = $derived(getChildSnippet(ChildKey.CardFooter));
+  const { getByKey } = setChildContext(ChildKey.Card);
+  const headerChild = $derived(getByKey(ChildKey.CardHeader));
+  const bodyChild = $derived(getByKey(ChildKey.CardBody));
+  const footerChild = $derived(getByKey(ChildKey.CardFooter));
 
   const headerBorder = $derived(!color);
   const headerPadding = $derived(headerBorder || !expanded);
@@ -103,8 +103,8 @@
       onclick={onToggle}
       class={cleanClass('flex w-full items-center justify-between px-4', headerContainerClasses)}
     >
-      <div class="flex flex-col">
-        {@render headerChild?.snippet()}
+      <div class={cleanClass('flex flex-col', headerChild?.class)}>
+        {@render headerChild?.children?.()}
       </div>
       <div>
         <IconButton
@@ -119,8 +119,8 @@
       </div>
     </button>
   {:else}
-    <div class={cleanClass('flex flex-col', headerContainerClasses)}>
-      {@render headerChild?.snippet()}
+    <div class={cleanClass('flex flex-col', headerContainerClasses, headerChild?.class)}>
+      {@render headerChild?.children?.()}
     </div>
   {/if}
 {/snippet}
@@ -136,13 +136,13 @@
         transition:slide={{ duration: expandable ? 200 : 0, easing: cubicOut }}
         class={cleanClass('immich-scrollbar h-full w-full overflow-auto p-4', bodyChild?.class)}
       >
-        {@render bodyChild?.snippet()}
+        {@render bodyChild?.children?.()}
       </div>
     {/if}
 
     {#if footerChild}
       <div class={cleanClass('flex items-center border-t p-4', footerChild.class)}>
-        {@render footerChild.snippet()}
+        {@render footerChild.children?.()}
       </div>
     {/if}
 

package/dist/components/Card/CardBody.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    class?: string;
-    children: Snippet;
-  };
-
-  let { class: className, children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.Card} as={ChildKey.CardBody} class={className}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.Card} as={ChildKey.CardBody} {...props} />

package/dist/components/Card/CardBody.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    class?: string;
-    children: Snippet;
-};
-declare const CardBody: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const CardBody: import("svelte").Component<ChildData, {}, "">;
 type CardBody = ReturnType<typeof CardBody>;
 export default CardBody;

package/dist/components/Card/CardFooter.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    class?: string;
-    children: Snippet;
-  };
-
-  let { class: className, children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.Card} as={ChildKey.CardFooter} class={className}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.Card} as={ChildKey.CardFooter} {...props} />

package/dist/components/Card/CardFooter.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    class?: string;
-    children: Snippet;
-};
-declare const CardFooter: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const CardFooter: import("svelte").Component<ChildData, {}, "">;
 type CardFooter = ReturnType<typeof CardFooter>;
 export default CardFooter;

package/dist/components/Card/CardHeader.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    class?: string;
-    children: Snippet;
-  };
-
-  let { class: className, children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.Card} as={ChildKey.CardHeader} class={className}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.Card} as={ChildKey.CardHeader} {...props} />

package/dist/components/Card/CardHeader.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    class?: string;
-    children: Snippet;
-};
-declare const CardHeader: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const CardHeader: import("svelte").Component<ChildData, {}, "">;
 type CardHeader = ReturnType<typeof CardHeader>;
 export default CardHeader;

package/dist/components/ControlBar/ControlBar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcuts } from '../../actions/shortcut.js';
-  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import { setChildContext } from '../../common/context.svelte.js';
   import IconButton from '../IconButton/IconButton.svelte';
   import { ChildKey } from '../../constants.js';
   import { t } from '../../services/translation.svelte.js';
@@ -45,10 +45,10 @@
     }
   };
 
-  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.ControlBar);
-  const headerChild = $derived(getChildSnippet(ChildKey.ControlBarHeader));
-  const contentChild = $derived(getChildSnippet(ChildKey.ControlBarContent));
-  const overflowChild = $derived(getChildSnippet(ChildKey.ControlBarOverflow));
+  const { getByKey } = setChildContext(ChildKey.ControlBar);
+  const headerChild = $derived(getByKey(ChildKey.ControlBarHeader));
+  const contentChild = $derived(getByKey(ChildKey.ControlBarContent));
+  const overflowChild = $derived(getByKey(ChildKey.ControlBarOverflow));
 </script>
 
 <svelte:window use:shortcuts={[{ shortcut: { key: 'Escape' }, onShortcut: onEscape }]} />
@@ -73,18 +73,20 @@
       />
     {/if}
 
-    <div class={cleanClass('flex shrink-0 flex-col')}>
-      {@render headerChild?.snippet()}
-    </div>
+    {#if headerChild}
+      <div class={cleanClass('flex shrink-0 flex-col', headerChild.class)}>
+        {@render headerChild.children?.()}
+      </div>
+    {/if}
   </div>
 
   <div class={cleanClass('flex grow items-center gap-2', contentChild?.class)}>
-    {@render contentChild?.snippet()}
+    {@render contentChild?.children?.()}
   </div>
 
   {#if overflowChild}
     <div class={cleanClass('flex shrink-0 items-center gap-2', overflowChild.class)}>
-      {@render overflowChild.snippet()}
+      {@render overflowChild.children?.()}
     </div>
   {/if}
 

package/dist/components/ControlBar/ControlBarContent.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    class?: string;
-    children: Snippet;
-  };
-
-  let { class: className, children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.ControlBar} as={ChildKey.ControlBarContent} class={className}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.ControlBar} as={ChildKey.ControlBarContent} {...props} />

package/dist/components/ControlBar/ControlBarContent.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    class?: string;
-    children: Snippet;
-};
-declare const ControlBarContent: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const ControlBarContent: import("svelte").Component<ChildData, {}, "">;
 type ControlBarContent = ReturnType<typeof ControlBarContent>;
 export default ControlBarContent;

package/dist/components/ControlBar/ControlBarHeader.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    class?: string;
-    children: Snippet;
-  };
-
-  let { class: className, children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.ControlBar} as={ChildKey.ControlBarHeader} class={className}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.ControlBar} as={ChildKey.ControlBarHeader} {...props} />

package/dist/components/ControlBar/ControlBarHeader.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    class?: string;
-    children: Snippet;
-};
-declare const ControlBarHeader: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const ControlBarHeader: import("svelte").Component<ChildData, {}, "">;
 type ControlBarHeader = ReturnType<typeof ControlBarHeader>;
 export default ControlBarHeader;

package/dist/components/ControlBar/ControlBarOverflow.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    class?: string;
-    children: Snippet;
-  };
-
-  let { class: className, children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.ControlBar} as={ChildKey.ControlBarOverflow} class={className}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.ControlBar} as={ChildKey.ControlBarOverflow} {...props} />

package/dist/components/ControlBar/ControlBarOverflow.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    class?: string;
-    children: Snippet;
-};
-declare const ControlBarOverflow: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const ControlBarOverflow: import("svelte").Component<ChildData, {}, "">;
 type ControlBarOverflow = ReturnType<typeof ControlBarOverflow>;
 export default ControlBarOverflow;

package/dist/components/Field/Field.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { setFieldContext } from '../../common/context.svelte.js';
-  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import { setChildContext, setFieldContext } from '../../common/context.svelte.js';
   import { ChildKey } from '../../constants.js';
   import type { FieldContext } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
@@ -17,15 +16,11 @@
 
   setFieldContext(() => state);
 
-  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Field);
-  const helperTextChildren = $derived(getChildSnippet(ChildKey.HelperText));
+  const { getByKey } = setChildContext(ChildKey.Field);
+  const helperTextChild = $derived(getByKey(ChildKey.HelperText));
 </script>
 
 <div class={cleanClass('w-full', className)}>
   {@render children()}
-  {#if helperTextChildren}
-    <div class={cleanClass('pt-1', helperTextChildren.class)}>
-      {@render helperTextChildren.snippet()}
-    </div>
-  {/if}
+  {@render helperTextChild?.children?.()}
 </div>

package/dist/components/HelperText/HelperText.svelte

@@ -2,23 +2,16 @@
   import Text from '../Text/Text.svelte';
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { TextColor } from '../../types.js';
+  import type { ChildData, TextColor } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
-  import type { Snippet } from 'svelte';
 
   type Props = {
     color?: TextColor;
-    class?: string;
-    children?: Snippet;
-  };
+  } & ChildData;
 
   let { class: className, children, color = 'muted' }: Props = $props();
 </script>
 
 <Child for={ChildKey.Field} as={ChildKey.HelperText}>
-  <div class={cleanClass(className)}>
-    <Text {color} size="small">
-      {@render children?.()}
-    </Text>
-  </div>
+  <Text {color} size="small" {children} class={cleanClass('pt-1', className)} />
 </Child>

package/dist/components/HelperText/HelperText.svelte.d.ts

@@ -1,10 +1,7 @@
-import type { TextColor } from '../../types.js';
-import type { Snippet } from 'svelte';
+import type { ChildData, TextColor } from '../../types.js';
 type Props = {
     color?: TextColor;
-    class?: string;
-    children?: Snippet;
-};
+} & ChildData;
 declare const HelperText: import("svelte").Component<Props, {}, "">;
 type HelperText = ReturnType<typeof HelperText>;
 export default HelperText;

package/dist/components/Modal/Modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import { setChildContext } from '../../common/context.svelte.js';
   import Card from '../Card/Card.svelte';
   import CardBody from '../Card/CardBody.svelte';
   import CardFooter from '../Card/CardFooter.svelte';
@@ -70,10 +70,10 @@
     },
   });
 
-  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Modal);
-  const headerChildren = $derived(getChildSnippet(ChildKey.ModalHeader));
-  const bodyChildren = $derived(getChildSnippet(ChildKey.ModalBody));
-  const footerChildren = $derived(getChildSnippet(ChildKey.ModalFooter));
+  const { getByKey } = setChildContext(ChildKey.Modal);
+  const headerChildren = $derived(getByKey(ChildKey.ModalHeader));
+  const bodyChildren = $derived(getByKey(ChildKey.ModalBody));
+  const footerChildren = $derived(getByKey(ChildKey.ModalFooter));
 
   let cardRef = $state<HTMLElement | null>(null);
 
@@ -110,7 +110,7 @@
           <Card bind:ref={cardRef} class={cleanClass(modalStyles({ size }), className)}>
             <CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
               {#if headerChildren}
-                {@render headerChildren.snippet()}
+                {@render headerChildren.children?.()}
               {:else if title}
                 <div class="flex items-center justify-between gap-2">
                   {#if typeof icon === 'string'}
@@ -124,13 +124,13 @@
               {/if}
             </CardHeader>
 
-            <CardBody class="grow px-5">
-              {@render bodyChildren?.snippet()}
+            <CardBody class={cleanClass('grow px-5', bodyChildren?.class)}>
+              {@render bodyChildren?.children?.()}
             </CardBody>
 
             {#if footerChildren}
-              <CardFooter class="border-t border-gray-200 dark:border-white/10">
-                {@render footerChildren.snippet()}
+              <CardFooter class={cleanClass('border-t border-gray-200 dark:border-white/10', footerChildren.class)}>
+                {@render footerChildren.children?.()}
               </CardFooter>
             {/if}
           </Card>

package/dist/components/Modal/ModalBody.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    children: Snippet;
-  };
-
-  let { children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.Modal} as={ChildKey.ModalBody}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.Modal} as={ChildKey.ModalBody} {...props} />

package/dist/components/Modal/ModalBody.svelte.d.ts

@@ -1,7 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    children: Snippet;
-};
-declare const ModalBody: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const ModalBody: import("svelte").Component<ChildData, {}, "">;
 type ModalBody = ReturnType<typeof ModalBody>;
 export default ModalBody;

package/dist/components/Modal/ModalFooter.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    children: Snippet;
-  };
-
-  let { children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.Modal} as={ChildKey.ModalFooter}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.Modal} as={ChildKey.ModalFooter} {...props} />

package/dist/components/Modal/ModalFooter.svelte.d.ts

@@ -1,7 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    children: Snippet;
-};
-declare const ModalFooter: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const ModalFooter: import("svelte").Component<ChildData, {}, "">;
 type ModalFooter = ReturnType<typeof ModalFooter>;
 export default ModalFooter;

package/dist/components/Modal/ModalHeader.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    children: Snippet;
-  };
-
-  let { children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.Modal} as={ChildKey.ModalHeader}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.Modal} as={ChildKey.ModalHeader} {...props} />

package/dist/components/Modal/ModalHeader.svelte.d.ts

@@ -1,7 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    children: Snippet;
-};
-declare const ModalHeader: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const ModalHeader: import("svelte").Component<ChildData, {}, "">;
 type ModalHeader = ReturnType<typeof ModalHeader>;
 export default ModalHeader;

package/dist/components/Table/Table.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { setTableContext } from '../../common/context.svelte.js';
-  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import { setChildContext, setTableContext } from '../../common/context.svelte.js';
   import { ChildKey } from '../../constants.js';
   import { styleVariants } from '../../styles.js';
   import type { TableContext } from '../../types.js';
@@ -32,10 +31,10 @@
 
   setTableContext(() => ({ spacing, striped, size }));
 
-  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.Table);
-  const headerChild = $derived(getChildSnippet(ChildKey.TableHeader));
-  const bodyChild = $derived(getChildSnippet(ChildKey.TableBody));
-  const footerChild = $derived(getChildSnippet(ChildKey.TableFooter));
+  const { getByKey } = setChildContext(ChildKey.Table);
+  const headerChild = $derived(getByKey(ChildKey.TableHeader));
+  const bodyChild = $derived(getByKey(ChildKey.TableBody));
+  const footerChild = $derived(getByKey(ChildKey.TableFooter));
 
   const headerRowStyles = tv({
     base: 'bg-dark-900 flex w-full place-items-center',
@@ -66,15 +65,15 @@
 <table bind:this={ref} class={cleanClass('w-full text-center', className)} {...restProps}>
   {#if headerChild}
     <thead class={cleanClass('text-primary mb-4 flex w-full overflow-hidden', commonStyles({ shape, border }))}>
-      <tr class={headerRowStyles({ spacing })}>
-        {@render headerChild?.snippet()}
+      <tr class={cleanClass(headerRowStyles({ spacing }), headerChild.class)}>
+        {@render headerChild?.children?.()}
       </tr>
     </thead>
   {/if}
 
   {#if bodyChild}
-    <tbody class={cleanClass('block w-full overflow-y-auto', bodyChild.class, commonStyles({ shape, border }))}>
-      {@render bodyChild?.snippet()}
+    <tbody class={cleanClass('block w-full overflow-y-auto', commonStyles({ shape, border }), bodyChild.class)}>
+      {@render bodyChild?.children?.()}
     </tbody>
   {/if}
 
@@ -86,8 +85,9 @@
     class={cleanClass(
       'text-primary bg-subtle mt-4 flex h-12 w-full place-items-center p-4',
       commonStyles({ shape, border }),
+      footerChild.class,
     )}
   >
-    {@render footerChild?.snippet()}
+    {@render footerChild?.children?.()}
   </div>
 {/if}

package/dist/components/Table/TableBody.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    class?: string;
-    children: Snippet;
-  };
-
-  let { class: className, children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.Table} as={ChildKey.TableBody} class={className}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.Table} as={ChildKey.TableBody} {...props} />

package/dist/components/Table/TableBody.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    class?: string;
-    children: Snippet;
-};
-declare const TableBody: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const TableBody: import("svelte").Component<ChildData, {}, "">;
 type TableBody = ReturnType<typeof TableBody>;
 export default TableBody;

package/dist/components/Table/TableFooter.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    class?: string;
-    children: Snippet;
-  };
-
-  let { class: className, children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.Table} as={ChildKey.TableFooter} class={className}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.Table} as={ChildKey.TableFooter} {...props} />

package/dist/components/Table/TableFooter.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    class?: string;
-    children: Snippet;
-};
-declare const TableFooter: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const TableFooter: import("svelte").Component<ChildData, {}, "">;
 type TableFooter = ReturnType<typeof TableFooter>;
 export default TableFooter;

package/dist/components/Table/TableHeader.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../../constants.js';
   import Child from '../../internal/Child.svelte';
-  import type { Snippet } from 'svelte';
+  import type { ChildData } from '../../types.js';
 
-  type Props = {
-    class?: string;
-    children: Snippet;
-  };
-
-  let { class: className, children }: Props = $props();
+  let props: ChildData = $props();
 </script>
 
-<Child for={ChildKey.Table} as={ChildKey.TableHeader} class={className}>
-  {@render children?.()}
-</Child>
+<Child for={ChildKey.Table} as={ChildKey.TableHeader} {...props} />

package/dist/components/Table/TableHeader.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    class?: string;
-    children: Snippet;
-};
-declare const TableHeader: import("svelte").Component<Props, {}, "">;
+import type { ChildData } from '../../types.js';
+declare const TableHeader: import("svelte").Component<ChildData, {}, "">;
 type TableHeader = ReturnType<typeof TableHeader>;
 export default TableHeader;

package/dist/components/Text/Text.svelte

@@ -14,7 +14,7 @@
     variant?: TextVariant;
     inline?: boolean;
     class?: string;
-    children: Snippet;
+    children?: Snippet;
   } & HTMLAttributes<HTMLElement>;
 
   const { color, inline, size, fontWeight = 'normal', children, class: className, ...restProps }: Props = $props();
@@ -27,5 +27,5 @@
 </script>
 
 <Text tag={inline ? 'span' : 'p'} {color} {fontWeight} class={cleanClass(styles({ size }), className)} {...restProps}>
-  {@render children()}
+  {@render children?.()}
 </Text>

package/dist/components/Text/Text.svelte.d.ts

@@ -9,7 +9,7 @@ type Props = {
     variant?: TextVariant;
     inline?: boolean;
     class?: string;
-    children: Snippet;
+    children?: Snippet;
 } & HTMLAttributes<HTMLElement>;
 declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;

package/dist/internal/Child.svelte

@@ -1,30 +1,19 @@
 <script lang="ts">
+  import { getChildContext } from '../common/context.svelte.js';
   import { ChildKey } from '../constants.js';
-  import type { ContextType } from '../types.js';
-  import { withPrefix } from '../utilities/internal.js';
-  import { getContext, onDestroy, type Snippet } from 'svelte';
+  import type { ChildData } from '../types.js';
+  import { onMount } from 'svelte';
 
   type Props = {
     for: ChildKey;
     as: ChildKey;
-    class?: string;
-    children: Snippet;
-    props?: unknown;
-  };
+  } & ChildData;
 
-  const { for: key, as, children, class: className, props = {} }: Props = $props();
+  const { for: key, as, ...rest }: Props = $props();
 
-  const context = getContext<ContextType>(withPrefix(key));
+  const context = getChildContext(key);
+  const { register } = $derived(context());
+  const data = $derived(rest);
 
-  const data = $derived({ snippet: children, class: className, props });
-
-  if (context) {
-    context.register(as, () => data);
-  } else {
-    console.log('Unable to find context for key:', key);
-  }
-
-  onDestroy(() => {
-    context?.unregister(as);
-  });
+  onMount(() => register(as, () => data));
 </script>

package/dist/internal/Child.svelte.d.ts

@@ -1,12 +1,9 @@
 import { ChildKey } from '../constants.js';
-import { type Snippet } from 'svelte';
+import type { ChildData } from '../types.js';
 type Props = {
     for: ChildKey;
     as: ChildKey;
-    class?: string;
-    children: Snippet;
-    props?: unknown;
-};
+} & ChildData;
 declare const Child: import("svelte").Component<Props, {}, "">;
 type Child = ReturnType<typeof Child>;
 export default Child;

package/dist/types.d.ts

@@ -104,10 +104,9 @@ type StackBaseProps = {
     fullWidth?: boolean;
     fullHeight?: boolean;
 };
-export type ChildData<T = unknown> = {
-    snippet: Snippet;
+export type ChildData = {
+    children?: Snippet;
     class?: string;
-    props?: T;
 };
 export type StackProps = StackBaseProps & {
     align?: 'start' | 'center' | 'end';
@@ -320,8 +319,7 @@ export type ActionBarProps = ControlBarProps & {
     actions?: ActionItem[];
     overflowActions?: ActionItem[];
 };
-export type ContextType = {
+export type ChildContext = {
     register: (key: ChildKey, data: () => ChildData) => void;
-    unregister: (key: ChildKey) => void;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.60.2",
+  "version": "0.60.3",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",

package/dist/common/use-child.svelte.d.ts

@@ -1,5 +0,0 @@
-import { ChildKey } from '../constants.js';
-import { type ChildData } from '../types.js';
-export declare const withChildrenSnippets: (key: ChildKey) => {
-    getChildren: <T>(key: ChildKey) => ChildData<T> | undefined;
-};

package/dist/common/use-child.svelte.js

@@ -1,15 +0,0 @@
-import { ChildKey } from '../constants.js';
-import {} from '../types.js';
-import { withPrefix } from '../utilities/internal.js';
-import { setContext } from 'svelte';
-import { SvelteMap } from 'svelte/reactivity';
-export const withChildrenSnippets = (key) => {
-    const map = new SvelteMap();
-    setContext(withPrefix(key), {
-        register: (child, data) => map.set(child, data),
-        unregister: (child) => map.delete(child),
-    });
-    return {
-        getChildren: (key) => map.get(key)?.(),
-    };
-};