@immich/ui 0.47.0 → 0.49.0

package/dist/components/Breadcrumbs/Breadcrumbs.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Icon from '../Icon/Icon.svelte';
+  import Link from '../Link/Link.svelte';
+  import type { BreadcrumbItem, BreadcrumbsProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { mdiChevronRight } from '@mdi/js';
+
+  let { separator = mdiChevronRight, class: className, items, ...props }: BreadcrumbsProps = $props();
+</script>
+
+{#snippet child({ title, icon }: BreadcrumbItem)}
+  <span class="flex items-center gap-1">
+    {#if icon}
+      <Icon {icon} size="1.25rem" />
+    {/if}
+    {#if title}
+      <span>{title}</span>
+    {/if}
+  </span>
+{/snippet}
+
+<nav class={cleanClass('flex items-center gap-1', className)} {...props}>
+  {#each items as item, index (index)}
+    {#if index > 0}
+      {#if typeof separator === 'object' && 'text' in separator}
+        <span class="mx-1">{separator.text}</span>
+      {:else}
+        <Icon icon={separator} size="1rem" />
+      {/if}
+    {/if}
+    {#if item.href}
+      <Link href={item.href} class="underline">
+        {@render child(item)}
+      </Link>
+    {:else}
+      {@render child(item)}
+    {/if}
+  {/each}
+</nav>

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

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

package/dist/components/Card/Card.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import { withChildrenSnippets } from '../../common/use-child.svelte.js';
   import IconButton from '../IconButton/IconButton.svelte';
-  import Scrollable from '../Scrollable/Scrollable.svelte';
   import { ChildKey } from '../../constants.js';
   import type { Color } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { mdiChevronDown } from '@mdi/js';
-  import { slide } from 'svelte/transition';
-  import { cubicOut } from 'svelte/easing';
   import { type Snippet } from 'svelte';
+  import { cubicOut } from 'svelte/easing';
   import type { HTMLAttributes } from 'svelte/elements';
+  import { slide } from 'svelte/transition';
   import { twMerge } from 'tailwind-merge';
   import { tv } from 'tailwind-variants';
 
@@ -136,10 +135,11 @@
     {/if}
 
     {#if bodyChild && expanded}
-      <div transition:slide={{ duration: expandable ? 200 : 0, easing: cubicOut }}>
-        <Scrollable class={twMerge(cleanClass('p-4', bodyChild?.class))}>
-          {@render bodyChild?.snippet()}
-        </Scrollable>
+      <div
+        transition:slide={{ duration: expandable ? 200 : 0, easing: cubicOut }}
+        class={twMerge(cleanClass('immich-scrollbar h-full w-full overflow-auto p-4', bodyChild?.class))}
+      >
+        {@render bodyChild?.snippet()}
       </div>
     {/if}
 

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -3,7 +3,7 @@
   import Text from '../Text/Text.svelte';
   import { zIndex } from '../../constants.js';
   import { styleVariants } from '../../styles.js';
-  import { MenuItemType, type ContextMenuProps, type MenuItem } from '../../types.js';
+  import { MenuItemType, type ContextMenuProps, type ActionItem } from '../../types.js';
   import { cleanClass, isEnabled } from '../../utilities/internal.js';
   import { DropdownMenu } from 'bits-ui';
   import { fly } from 'svelte/transition';
@@ -20,7 +20,7 @@
     ...restProps
   }: ContextMenuProps = $props();
 
-  const isDivider = (item: MenuItem | MenuItemType): item is MenuItemType => {
+  const isDivider = (item: ActionItem | MenuItemType): item is MenuItemType => {
     return item === MenuItemType.Divider;
   };
 
@@ -107,7 +107,7 @@
                   <DropdownMenu.Item
                     textValue={item.title}
                     closeOnSelect
-                    onSelect={(event) => item.onSelect?.({ event, item })}
+                    onSelect={() => item.onAction(item)}
                     class="px-1"
                   >
                     <div class={itemStyles({ color: item.color })}>
@@ -125,7 +125,7 @@
                     <DropdownMenu.Item
                       textValue={item.title}
                       closeOnSelect
-                      onSelect={(event) => item.onSelect?.({ event, item })}
+                      onSelect={() => item.onAction(item)}
                       title={item.title}
                     >
                       <div class={cleanClass(itemStyles({ color: item.color }))}>

package/dist/components/ContextMenu/ContextMenuButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import IconButton from '../IconButton/IconButton.svelte';
+  import { menuManager } from '../../services/menu-manager.svelte.js';
+  import type { ContextMenuButtonProps } from '../../types.js';
+  import { mdiDotsVertical } from '@mdi/js';
+
+  const {
+    color = 'secondary',
+    position = 'top-right',
+    icon = mdiDotsVertical,
+    variant = 'ghost',
+    shape = 'round',
+    items,
+    bottomItems,
+    ...rest
+  }: ContextMenuButtonProps = $props();
+
+  const onclick = async (event: Event) => {
+    await menuManager.show({ target: event.currentTarget as HTMLElement, position, items, bottomItems });
+  };
+</script>
+
+<IconButton {icon} {color} {shape} {variant} {...rest} {onclick} />

package/dist/components/ContextMenu/ContextMenuButton.svelte.d.ts

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

package/dist/components/Scrollable/Scrollable.svelte

@@ -23,45 +23,3 @@
 <div bind:this={ref} class={cleanClass('immich-scrollbar h-full w-full overflow-auto', className)}>
   {@render children?.()}
 </div>
-
-<style>
-  /* width */
-  .immich-scrollbar::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-    visibility: hidden;
-  }
-  /* Track */
-  .immich-scrollbar::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 16px;
-    visibility: hidden;
-  }
-
-  /* Handle */
-  .immich-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(85, 86, 87, 0.408);
-    border-radius: 16px;
-    visibility: hidden;
-  }
-
-  /* Handle on hover */
-  .immich-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: #4250afad;
-    border-radius: 16px;
-  }
-
-  /*
-		* Show scrollbar elements when hovering or actively scrolling
-		* Applies to the main scrollbar, track, and thumb components
-		* Changes visibility from hidden to visible on user interaction
-	*/
-  .immich-scrollbar:hover::-webkit-scrollbar,
-  .immich-scrollbar:active::-webkit-scrollbar,
-  .immich-scrollbar:hover::-webkit-scrollbar-track,
-  .immich-scrollbar:active::-webkit-scrollbar-track,
-  .immich-scrollbar:hover::-webkit-scrollbar-thumb,
-  .immich-scrollbar:active::-webkit-scrollbar-thumb {
-    visibility: visible;
-  }
-</style>

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as AppShellHeader } from './components/AppShell/AppShellHeader.
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as Badge } from './components/Badge/Badge.svelte';
+export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.svelte';
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Card } from './components/Card/Card.svelte';
 export { default as CardBody } from './components/Card/CardBody.svelte';

package/dist/index.js

@@ -19,6 +19,7 @@ export { default as AppShellHeader } from './components/AppShell/AppShellHeader.
 export { default as AppShellSidebar } from './components/AppShell/AppShellSidebar.svelte';
 export { default as Avatar } from './components/Avatar/Avatar.svelte';
 export { default as Badge } from './components/Badge/Badge.svelte';
+export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.svelte';
 export { default as Button } from './components/Button/Button.svelte';
 export { default as Card } from './components/Card/Card.svelte';
 export { default as CardBody } from './components/Card/CardBody.svelte';

package/dist/theme/default.css

@@ -299,3 +299,43 @@
     border-color: var(--immich-ui-default-border);
   }
 }
+
+/* width */
+.immich-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  visibility: hidden;
+}
+/* Track */
+.immich-scrollbar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 16px;
+  visibility: hidden;
+}
+
+/* Handle */
+.immich-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(85, 86, 87, 0.408);
+  border-radius: 16px;
+  visibility: hidden;
+}
+
+/* Handle on hover */
+.immich-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #4250afad;
+  border-radius: 16px;
+}
+
+/*
+		* Show scrollbar elements when hovering or actively scrolling
+		* Applies to the main scrollbar, track, and thumb components
+		* Changes visibility from hidden to visible on user interaction
+	*/
+.immich-scrollbar:hover::-webkit-scrollbar,
+.immich-scrollbar:active::-webkit-scrollbar,
+.immich-scrollbar:hover::-webkit-scrollbar-track,
+.immich-scrollbar:active::-webkit-scrollbar-track,
+.immich-scrollbar:hover::-webkit-scrollbar-thumb,
+.immich-scrollbar:active::-webkit-scrollbar-thumb {
+  visibility: visible;
+}

package/dist/types.d.ts

@@ -67,6 +67,13 @@ export type CloseButtonProps = {
     class?: string;
     translations?: TranslationProps<'close'>;
 } & ButtonOrAnchor;
+export type ContextMenuButtonProps = ButtonBase & {
+    icon?: IconLike;
+    position?: ContextMenuPosition;
+    'aria-label': string;
+    items: MenuItems;
+    bottomItems?: Array<ActionItem | undefined>;
+} & Omit<HTMLButtonAttributes, 'color' | 'size'>;
 export type IconButtonProps = ButtonBase & {
     icon: IconLike;
     flipped?: boolean;
@@ -203,23 +210,13 @@ export type ToastButton = {
     variant?: Variants;
     onClick: () => void;
 };
-export type MenuSelectHandler = (context: {
-    event: Event;
-    item: MenuItem;
-}) => void;
-export type MenuItem = {
-    title: string;
-    icon: IconLike;
-    color?: Color;
-    onSelect?: MenuSelectHandler;
-} & IfLike;
 export declare enum MenuItemType {
     Divider = "divider"
 }
-export type MenuItems = Array<MenuItem | MenuItemType | undefined>;
+export type MenuItems = Array<ActionItem | MenuItemType | undefined>;
 export type MenuProps = {
     items: MenuItems;
-    bottomItems?: (MenuItem | undefined)[];
+    bottomItems?: (ActionItem | undefined)[];
     size?: MenuSize;
 } & HTMLAttributes<HTMLDivElement>;
 export type ContextMenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
@@ -242,4 +239,29 @@ export type DatePickerProps = {
 export type IfLike = {
     $if?: () => boolean;
 };
+export type ActionItemHandler<T = never> = (item: ActionItem<T>) => void | Promise<void>;
+export type ActionItem<T = never> = Omit<{
+    title: string;
+    icon: IconLike;
+    color?: Color;
+    onAction: ActionItemHandler<T>;
+    data: T;
+} & IfLike, [
+    T
+] extends [never] ? 'data' : ''>;
+export type BreadcrumbsProps = {
+    separator?: IconLike | {
+        text: string;
+    };
+    items: BreadcrumbItem[];
+} & HTMLAttributes<HTMLElement>;
+export type BreadcrumbItem = {
+    href?: string;
+} & ({
+    title: string;
+    icon?: IconLike;
+} | {
+    title?: string;
+    icon: IconLike;
+});
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.47.0",
+  "version": "0.49.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.11.0"
+    "node": "24.11.1"
   },
   "scripts": {
     "create": "node scripts/create.js",