@immich/ui 0.59.0 → 0.60.0

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

@@ -1,5 +1,5 @@
 import { ChildKey } from '../constants.js';
-import type { ChildData } from '../types.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,4 +1,5 @@
 import { ChildKey } from '../constants.js';
+import {} from '../types.js';
 import { withPrefix } from '../utilities/internal.js';
 import { setContext } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
@@ -6,6 +7,7 @@ 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)?.(),

package/dist/components/ActionBar/ActionBar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import ActionButton from '../ActionButton/ActionButton.svelte';
+  import ContextMenuButton from '../ContextMenu/ContextMenuButton.svelte';
+  import ControlBar from '../ControlBar/ControlBar.svelte';
+  import ControlBarOverflow from '../ControlBar/ControlBarOverflow.svelte';
+  import type { ActionBarProps } from '../../types.js';
+  import { isEnabled } from '../../utilities/common.js';
+
+  const { actions, overflowActions = [], children, ...restProps }: ActionBarProps = $props();
+
+  const items = $derived(overflowActions.filter((action) => isEnabled(action)));
+</script>
+
+<ControlBar {...restProps}>
+  {@render children?.()}
+  <ControlBarOverflow>
+    {#each actions as action, i (i)}
+      <ActionButton {action} />
+    {/each}
+    <ContextMenuButton {items} />
+  </ControlBarOverflow>
+</ControlBar>

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

@@ -0,0 +1,4 @@
+import type { ActionBarProps } from '../../types.js';
+declare const ActionBar: import("svelte").Component<ActionBarProps, {}, "">;
+type ActionBar = ReturnType<typeof ActionBar>;
+export default ActionBar;

package/dist/components/ActionButton/ActionButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import IconButton from '../IconButton/IconButton.svelte';
+  import type { ActionItem, Color, Size, Variants } from '../../types.js';
+  import { isEnabled } from '../../utilities/common.js';
+  import { mdiPlus } from '@mdi/js';
+
+  type Props = {
+    action: ActionItem & { data?: { title?: string } };
+    color?: Color;
+    size?: Size;
+    variant?: Variants;
+    type?: 'icon' | 'button';
+  };
+
+  const { action, type = 'icon', size, color: colorOverride, variant: variantOverride }: Props = $props();
+  const { title, icon, onAction } = $derived(action);
+  const common = $derived({
+    variant: variantOverride ?? 'ghost',
+    color: colorOverride ?? action.color ?? 'secondary',
+    onclick: () => onAction(action),
+  });
+</script>
+
+{#if isEnabled(action)}
+  {#if type === 'icon'}
+    <IconButton {...common} {size} shape="round" icon={icon ?? mdiPlus} aria-label={title} />
+  {:else if type === 'button'}
+    <Button {...common} size={size ?? 'small'} leadingIcon={icon} title={action.data?.title}>
+      {title}
+    </Button>
+  {/if}
+{/if}

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

@@ -0,0 +1,15 @@
+import type { ActionItem, Color, Size, Variants } from '../../types.js';
+type Props = {
+    action: ActionItem & {
+        data?: {
+            title?: string;
+        };
+    };
+    color?: Color;
+    size?: Size;
+    variant?: Variants;
+    type?: 'icon' | 'button';
+};
+declare const ActionButton: import("svelte").Component<Props, {}, "">;
+type ActionButton = ReturnType<typeof ActionButton>;
+export default ActionButton;

package/dist/components/AppShell/AppShell.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { withChildrenSnippets } from '../../common/use-child.svelte.js';
   import Scrollable from '../Scrollable/Scrollable.svelte';
-  import { ChildKey } from '../../constants.js';
+  import { ChildKey, zIndex } from '../../constants.js';
   import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
 
@@ -13,19 +13,24 @@
   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));
 </script>
 
 <div class={cleanClass('flex h-dvh flex-col overflow-hidden', className)}>
-  {#if header}
-    <header class="border-b">
-      {@render header?.snippet()}
+  {#if bar}
+    <div class={cleanClass('h-control-bar-container px-2 pt-2', zIndex.AppShellBar, bar.class)}>
+      {@render bar.snippet()}
+    </div>
+  {:else if header}
+    <header class={cleanClass('h-control-bar-container flex items-center gap-2 border-b', header.class)}>
+      {@render header.snippet()}
     </header>
   {/if}
   <div class="relative flex w-full grow overflow-y-auto">
     {#if sidebar}
-      {@render sidebar?.snippet()}
+      {@render sidebar.snippet()}
     {/if}
     <Scrollable class="grow" resetOnNavigate>
       {@render children?.()}

package/dist/components/AppShell/AppShellBar.svelte

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

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

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

package/dist/components/ContextMenu/ContextMenuButton.svelte

@@ -23,12 +23,14 @@
   };
 </script>
 
-<IconButton
-  {icon}
-  {color}
-  {shape}
-  {variant}
-  aria-label={ariaLabel ?? t('open_menu', translations)}
-  {...rest}
-  {onclick}
-/>
+{#if items.length > 0}
+  <IconButton
+    {icon}
+    {color}
+    {shape}
+    {variant}
+    aria-label={ariaLabel ?? t('open_menu', translations)}
+    {...rest}
+    {onclick}
+  />
+{/if}

package/dist/components/ControlBar/ControlBar.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { shortcuts } from '../../actions/shortcut.js';
+  import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+  import IconButton from '../IconButton/IconButton.svelte';
+  import { ChildKey } from '../../constants.js';
+  import { t } from '../../services/translation.svelte.js';
+  import type { ControlBarProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { mdiClose } from '@mdi/js';
+  import { fly } from 'svelte/transition';
+  import { tv } from 'tailwind-variants';
+
+  let {
+    ref = $bindable(null),
+    closeIcon,
+    class: className,
+    shape = 'semi-round',
+    variant = 'ghost',
+    closeOnEsc = true,
+    static: isStatic = false,
+    translations,
+    onClose,
+    children,
+    ...restProps
+  }: ControlBarProps = $props();
+
+  const styles = tv({
+    base: `h-control-bar flex w-full items-center gap-2 px-2`,
+    variants: {
+      variant: {
+        filled: 'dark:bg-subtle bg-white shadow-lg',
+        outline: 'dark:border-light-200 border-light-200 border shadow-md',
+        ghost: '',
+      },
+      shape: {
+        'semi-round': 'rounded-lg',
+        rectangle: 'rounded-none',
+      },
+    },
+  });
+
+  const onEscape = () => {
+    if (closeOnEsc) {
+      onClose?.();
+    }
+  };
+
+  const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.ControlBar);
+  const headerChild = $derived(getChildSnippet(ChildKey.ControlBarHeader));
+  const contentChild = $derived(getChildSnippet(ChildKey.ControlBarContent));
+  const overflowChild = $derived(getChildSnippet(ChildKey.ControlBarOverflow));
+</script>
+
+<svelte:window use:shortcuts={[{ shortcut: { key: 'Escape' }, onShortcut: onEscape }]} />
+
+<nav
+  bind:this={ref}
+  in:fly={{ y: 10, duration: isStatic ? 0 : 200 }}
+  class={cleanClass(styles({ shape, variant }), className)}
+  {...restProps}
+>
+  <div class={cleanClass('flex shrink-0 items-center gap-2')}>
+    {#if typeof closeIcon === 'function'}
+      {@render closeIcon?.()}
+    {:else if onClose}
+      <IconButton
+        icon={closeIcon ?? mdiClose}
+        shape="round"
+        variant="ghost"
+        color="secondary"
+        aria-label={t('close', translations)}
+        onclick={() => onClose()}
+      />
+    {/if}
+
+    <div class={cleanClass('flex shrink-0 flex-col')}>
+      {@render headerChild?.snippet()}
+    </div>
+  </div>
+
+  <div class={cleanClass('flex grow items-center gap-2', contentChild?.class)}>
+    {@render contentChild?.snippet()}
+  </div>
+
+  {#if overflowChild}
+    <div class={cleanClass('flex shrink-0 items-center gap-2', overflowChild.class)}>
+      {@render overflowChild.snippet()}
+    </div>
+  {/if}
+
+  {@render children?.()}
+</nav>

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

@@ -0,0 +1,4 @@
+import type { ControlBarProps } from '../../types.js';
+declare const ControlBar: import("svelte").Component<ControlBarProps, {}, "ref">;
+type ControlBar = ReturnType<typeof ControlBar>;
+export default ControlBar;

package/dist/components/ControlBar/ControlBarContent.svelte

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

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

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

package/dist/components/ControlBar/ControlBarDescription.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Text from '../Text/Text.svelte';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    class?: string;
+    children: Snippet;
+  };
+
+  let { children, class: className }: Props = $props();
+</script>
+
+<Text size="small" color="muted" class={className}>
+  {@render children?.()}
+</Text>

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

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

package/dist/components/ControlBar/ControlBarHeader.svelte

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

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

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

package/dist/components/ControlBar/ControlBarOverflow.svelte

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

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

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

package/dist/components/ControlBar/ControlBarTitle.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Heading from '../Heading/Heading.svelte';
+  import type { Color, FontWeight, HeadingSize, HeadingTag } from '../../types.js';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    /**
+     * The HTML element type.
+     */
+    tag?: HeadingTag;
+    class?: string;
+    size?: HeadingSize;
+    color?: Color;
+    fontWeight?: FontWeight;
+    children: Snippet;
+  };
+
+  const { size = 'small', fontWeight = 'medium', color = 'primary', tag, class: className, children }: Props = $props();
+</script>
+
+<Heading {tag} {size} {color} {fontWeight} class={className}>
+  {@render children?.()}
+</Heading>

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

@@ -0,0 +1,16 @@
+import type { Color, FontWeight, HeadingSize, HeadingTag } from '../../types.js';
+import type { Snippet } from 'svelte';
+type Props = {
+    /**
+     * The HTML element type.
+     */
+    tag?: HeadingTag;
+    class?: string;
+    size?: HeadingSize;
+    color?: Color;
+    fontWeight?: FontWeight;
+    children: Snippet;
+};
+declare const ControlBarTitle: import("svelte").Component<Props, {}, "">;
+type ControlBarTitle = ReturnType<typeof ControlBarTitle>;
+export default ControlBarTitle;

package/dist/components/ProgressBar/ProgressBar.svelte

@@ -10,22 +10,31 @@
     size?: Size;
     shape?: Shape;
     color?: Color;
+    border?: boolean;
     class?: string;
     children?: Snippet;
   };
 
-  let { progress, shape = 'round', size = 'medium', color = 'primary', class: className, children }: Props = $props();
+  let {
+    progress,
+    shape = 'round',
+    size = 'medium',
+    color = 'primary',
+    border = false,
+    class: className,
+    children,
+  }: Props = $props();
 
   const containerStyles = tv({
-    base: 'bg-light-100 dark:bg-light-200 dark:border-light-300 relative w-full overflow-hidden border',
+    base: 'bg-light-100 dark:bg-light-200 relative w-full overflow-hidden',
     variants: {
       shape: styleVariants.shape,
       size: {
-        tiny: 'h-3',
-        small: 'h-4',
-        medium: 'h-5',
-        large: 'h-6',
-        giant: 'h-12',
+        tiny: 'h-2',
+        small: 'h-3',
+        medium: 'h-4',
+        large: 'h-5',
+        giant: 'h-7',
       },
       roundedSize: {
         tiny: 'rounded-sm',
@@ -34,6 +43,9 @@
         large: 'rounded-lg',
         giant: 'rounded-xl',
       },
+      border: {
+        true: 'dark:border-light-300 border',
+      },
     },
   });
 
@@ -42,18 +54,28 @@
     variants: {
       color: styleVariants.filledColor,
       shape: styleVariants.shape,
+      size: {
+        tiny: 'min-w-2',
+        small: 'min-w-3',
+        medium: 'min-w-4',
+        large: 'min-w-5',
+        giant: 'min-w-7',
+      },
     },
   });
 </script>
 
 <div
   class={cleanClass(
-    containerStyles({ size, shape, roundedSize: shape === 'semi-round' ? size : undefined }),
+    containerStyles({ size, shape, roundedSize: shape === 'semi-round' ? size : undefined, border }),
     className,
   )}
 >
   <div class="absolute flex h-full w-full items-center justify-center">
     {@render children?.()}
   </div>
-  <div class={cleanClass(barStyles({ color, shape }))} style="width: {progress * 100}%"></div>
+  <div
+    class={cleanClass(barStyles({ size: progress > 0 ? size : undefined, color, shape }))}
+    style="width: {progress * 100}%"
+  ></div>
 </div>

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

@@ -5,6 +5,7 @@ type Props = {
     size?: Size;
     shape?: Shape;
     color?: Color;
+    border?: boolean;
     class?: string;
     children?: Snippet;
 };

package/dist/constants.d.ts

@@ -3,11 +3,16 @@ export declare enum ChildKey {
     HelperText = "helped-text",
     AppShell = "app-shell",
     AppShellHeader = "app-shell-header",
+    AppShellBar = "app-shell-bar",
     AppShellSidebar = "app-shell-sidebar",
     Card = "card",
     CardHeader = "card-header",
     CardBody = "card-body",
     CardFooter = "card-footer",
+    ControlBar = "control-bar",
+    ControlBarHeader = "control-bar-header",
+    ControlBarContent = "control-bar-content",
+    ControlBarOverflow = "control-bar-overflow",
     Modal = "modal",
     ModalHeader = "modal-header",
     ModalBody = "modal-body",
@@ -20,6 +25,7 @@ export declare enum ChildKey {
 export declare const zIndex: {
     CarouselImage: string;
     AppShellSidebar: string;
+    AppShellBar: string;
     ModalBackdrop: string;
     ModalContent: string;
     SelectDropdown: string;

package/dist/constants.js

@@ -4,11 +4,16 @@ export var ChildKey;
     ChildKey["HelperText"] = "helped-text";
     ChildKey["AppShell"] = "app-shell";
     ChildKey["AppShellHeader"] = "app-shell-header";
+    ChildKey["AppShellBar"] = "app-shell-bar";
     ChildKey["AppShellSidebar"] = "app-shell-sidebar";
     ChildKey["Card"] = "card";
     ChildKey["CardHeader"] = "card-header";
     ChildKey["CardBody"] = "card-body";
     ChildKey["CardFooter"] = "card-footer";
+    ChildKey["ControlBar"] = "control-bar";
+    ChildKey["ControlBarHeader"] = "control-bar-header";
+    ChildKey["ControlBarContent"] = "control-bar-content";
+    ChildKey["ControlBarOverflow"] = "control-bar-overflow";
     ChildKey["Modal"] = "modal";
     ChildKey["ModalHeader"] = "modal-header";
     ChildKey["ModalBody"] = "modal-body";
@@ -21,6 +26,7 @@ export var ChildKey;
 export const zIndex = {
     CarouselImage: 'z-1',
     AppShellSidebar: 'z-30',
+    AppShellBar: 'z-35',
     ModalBackdrop: 'z-40',
     ModalContent: 'z-50',
     SelectDropdown: 'z-55',

package/dist/index.d.ts

@@ -10,9 +10,12 @@ export { default as immichLogoJson } from './assets/immich-logo.json';
 export { default as immichLogo } from './assets/immich-logo.svg';
 export { default as obtainiumBadge } from './assets/obtainium-badge.png';
 export { default as playStoreBadge } from './assets/playstore-badge.png';
+export { default as ActionBar } from './components/ActionBar/ActionBar.svelte';
+export { default as ActionButton } from './components/ActionButton/ActionButton.svelte';
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as AnnouncementBanner } from './components/AnnouncementBanner/AnnouncementBanner.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
+export { default as AppShellBar } from './components/AppShell/AppShellBar.svelte';
 export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
@@ -35,6 +38,12 @@ export { default as CommandPaletteProvider } from './components/CommandPalette/C
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
 export { default as ContextMenuButton } from './components/ContextMenu/ContextMenuButton.svelte';
+export { default as ControlBar } from './components/ControlBar/ControlBar.svelte';
+export { default as ControlBarContent } from './components/ControlBar/ControlBarContent.svelte';
+export { default as ControlBarDescription } from './components/ControlBar/ControlBarDescription.svelte';
+export { default as ControlBarHeader } from './components/ControlBar/ControlBarHeader.svelte';
+export { default as ControlBarOverflow } from './components/ControlBar/ControlBarOverflow.svelte';
+export { default as ControlBarTitle } from './components/ControlBar/ControlBarTitle.svelte';
 export { default as DatePicker } from './components/DatePicker/DatePicker.svelte';
 export { default as Field } from './components/Field/Field.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';

package/dist/index.js

@@ -12,9 +12,12 @@ export { default as immichLogo } from './assets/immich-logo.svg';
 export { default as obtainiumBadge } from './assets/obtainium-badge.png';
 export { default as playStoreBadge } from './assets/playstore-badge.png';
 // components
+export { default as ActionBar } from './components/ActionBar/ActionBar.svelte';
+export { default as ActionButton } from './components/ActionButton/ActionButton.svelte';
 export { default as Alert } from './components/Alert/Alert.svelte';
 export { default as AnnouncementBanner } from './components/AnnouncementBanner/AnnouncementBanner.svelte';
 export { default as AppShell } from './components/AppShell/AppShell.svelte';
+export { default as AppShellBar } from './components/AppShell/AppShellBar.svelte';
 export { default as AppShellHeader } from './components/AppShell/AppShellHeader.svelte';
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
@@ -37,6 +40,12 @@ export { default as CommandPaletteProvider } from './components/CommandPalette/C
 export { default as ConfirmModal } from './components/ConfirmModal/ConfirmModal.svelte';
 export { default as Container } from './components/Container/Container.svelte';
 export { default as ContextMenuButton } from './components/ContextMenu/ContextMenuButton.svelte';
+export { default as ControlBar } from './components/ControlBar/ControlBar.svelte';
+export { default as ControlBarContent } from './components/ControlBar/ControlBarContent.svelte';
+export { default as ControlBarDescription } from './components/ControlBar/ControlBarDescription.svelte';
+export { default as ControlBarHeader } from './components/ControlBar/ControlBarHeader.svelte';
+export { default as ControlBarOverflow } from './components/ControlBar/ControlBarOverflow.svelte';
+export { default as ControlBarTitle } from './components/ControlBar/ControlBarTitle.svelte';
 export { default as DatePicker } from './components/DatePicker/DatePicker.svelte';
 export { default as Field } from './components/Field/Field.svelte';
 export { default as FormatBytes } from './components/FormatBytes/FormatBytes.svelte';

package/dist/internal/Child.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
   import { ChildKey } from '../constants.js';
-  import type { ChildData } from '../types.js';
+  import type { ContextType } from '../types.js';
   import { withPrefix } from '../utilities/internal.js';
-  import { getContext, type Snippet } from 'svelte';
+  import { getContext, onDestroy, type Snippet } from 'svelte';
 
-  type ContextType = {
-    register: (key: ChildKey, data: () => ChildData) => void;
-  };
   type Props = {
     for: ChildKey;
     as: ChildKey;
@@ -26,4 +23,8 @@
   } else {
     console.log('Unable to find context for key:', key);
   }
+
+  onDestroy(() => {
+    context?.unregister(as);
+  });
 </script>

package/dist/theme/default.css

@@ -5,6 +5,11 @@
 
 @import 'tailwindcss';
 
+@theme {
+  --spacing-control-bar-container: --spacing(18);
+  --spacing-control-bar: --spacing(16);
+}
+
 @theme inline {
   --color-primary-50: var(--immich-ui-primary-50);
   --color-primary-100: var(--immich-ui-primary-100);

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import type { Shortcut } from './actions/shortcut.js';
+import type { ChildKey } from './constants.js';
 import type { Translations } from './services/translation.svelte.js';
 import type { DateTime } from 'luxon';
 import type { Component, Snippet } from 'svelte';
@@ -304,4 +305,23 @@ export type CarouselImageItem = {
     alt?: string;
     id?: string;
 };
+export type ControlBarProps = {
+    ref?: HTMLElement | null;
+    closeIcon?: IconLike | Snippet;
+    variant?: Variants;
+    shape?: 'semi-round' | 'rectangle';
+    translations?: TranslationProps<'close'>;
+    onClose?: () => void;
+    children?: Snippet;
+    closeOnEsc?: boolean;
+    static?: boolean;
+} & HTMLAttributes<HTMLElement>;
+export type ActionBarProps = ControlBarProps & {
+    actions: ActionItem[];
+    overflowActions?: ActionItem[];
+};
+export type ContextType = {
+    register: (key: ChildKey, data: () => ChildData) => void;
+    unregister: (key: ChildKey) => void;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -58,7 +58,7 @@
     "@immich/svelte-markdown-preprocess": "^0.1.0"
   },
   "volta": {
-    "node": "24.12.0"
+    "node": "24.13.0"
   },
   "scripts": {
     "create": "node scripts/create.js",