@immich/ui 0.60.2 → 0.61.0

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/Markdown/Table.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import Table from '../Table/Table.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children?: Snippet;
+  };
+
+  const { children }: Props = $props();
+</script>
+
+<Table striped {children} />

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

@@ -0,0 +1,8 @@
+import Table from '../Table/Table.svelte';
+import type { Snippet } from 'svelte';
+type Props = {
+    children?: Snippet;
+};
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;