@streamscloud/kit 0.9.2 → 0.9.4

package/dist/core/utils/array-helper.d.ts

@@ -2,6 +2,11 @@ export declare class ArrayHelper {
     static distinct<T>(items: T[]): T[];
     static distinctBy<T>(items: T[], keyFn: (elem: T) => unknown): T[];
     static intersect<T>(arrays: T[][]): T[];
+    /**
+     * Splits `items` into sequential chunks of at most `size` elements.
+     * If `size < 1`, returns a single chunk containing all items.
+     */
+    static chunk<T>(items: T[], size: number): T[][];
     static assertHasValue<T>(value: T | null | undefined): value is T;
     /**
      * Find position ("from" and "to" indexes) of the element that was moved inside array (only one element should be moved)

package/dist/core/utils/array-helper.js

@@ -11,6 +11,20 @@ export class ArrayHelper {
         }
         return arrays.reduce((result, current) => result.filter((item) => current.includes(item)));
     }
+    /**
+     * Splits `items` into sequential chunks of at most `size` elements.
+     * If `size < 1`, returns a single chunk containing all items.
+     */
+    static chunk(items, size) {
+        if (size < 1) {
+            return [[...items]];
+        }
+        const result = [];
+        for (let i = 0; i < items.length; i += size) {
+            result.push(items.slice(i, i + size));
+        }
+        return result;
+    }
     static assertHasValue(value) {
         return value !== null && value !== undefined;
     }

package/dist/ui/announcement-banner/announcement-banner-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class AnnouncementBannerLocalization {
+    get dismiss(): string;
+}

package/dist/ui/announcement-banner/announcement-banner-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    dismiss: {
+        en: 'Dismiss',
+        no: 'Lukk'
+    }
+};
+export class AnnouncementBannerLocalization {
+    get dismiss() {
+        return loc.dismiss[AppLocale.current];
+    }
+}

package/dist/ui/announcement-banner/cmp.announcement-banner.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">import { Icon, IconSlot } from '../icon';
+import { AnnouncementBannerLocalization } from './announcement-banner-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_12_regular.svg?raw';
+let { variant = 'info', title, dismissible = false, icon, action, children, on } = $props();
+const localization = new AnnouncementBannerLocalization();
+let visible = $state(true);
+const role = $derived(variant === 'maintenance' ? 'alert' : 'status');
+const dismiss = () => {
+    visible = false;
+    on?.dismiss?.();
+};
+</script>
+
+{#if visible}
+  <div class="announcement-banner announcement-banner--{variant}" class:announcement-banner--dismissible={dismissible} role={role}>
+    <div class="announcement-banner__content">
+      {#if icon}
+        <span class="announcement-banner__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+      {/if}
+      <div class="announcement-banner__body">
+        {#if title}<strong class="announcement-banner__title">{title}</strong>{/if}
+        {#if children}<span class="announcement-banner__description">{@render children()}</span>{/if}
+      </div>
+      {#if action}<div class="announcement-banner__action">{@render action()}</div>{/if}
+    </div>
+    {#if dismissible}
+      <button class="announcement-banner__close" type="button" aria-label={localization.dismiss} onclick={dismiss}>
+        <Icon src={IconDismiss} />
+      </button>
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+Full-width ribbon notification for site-wide announcements placed at the top of a page or layout.
+Supports four visual variants; `variant='maintenance'` uses `role="alert"` (assertive); all others use `role="status"` (polite).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--announcement-banner--padding-block` | Vertical padding | `--sc-kit--space--3` |
+| `--sc-kit--announcement-banner--padding-inline` | Horizontal padding | `--sc-kit--space--5` |
+| `--sc-kit--announcement-banner--gap` | Gap between icon / body / action | `--sc-kit--space--3` |
+| `--sc-kit--announcement-banner--background` | Background color | per `variant` |
+| `--sc-kit--announcement-banner--border-color` | Bottom border color | per `variant` |
+| `--sc-kit--announcement-banner--accent-color` | Icon + dismiss glyph color | per `variant` |
+| `--sc-kit--announcement-banner--title--color` | Title text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--announcement-banner--description--color` | Body text color | `--sc-kit--color--text--secondary` |
+-->
+
+<style>.announcement-banner {
+  --_ab--padding-block: var(--sc-kit--announcement-banner--padding-block, var(--sc-kit--space--3));
+  --_ab--padding-inline: var(--sc-kit--announcement-banner--padding-inline, var(--sc-kit--space--5));
+  --_ab--gap: var(--sc-kit--announcement-banner--gap, var(--sc-kit--space--3));
+  --_ab--title-color: var(--sc-kit--announcement-banner--title--color, var(--sc-kit--color--text--primary));
+  --_ab--description-color: var(--sc-kit--announcement-banner--description--color, var(--sc-kit--color--text--secondary));
+  --_ab--background-default: var(--sc-kit--color--accent--softer);
+  --_ab--border-default: var(--sc-kit--color--accent--soft);
+  --_ab--accent-default: var(--sc-kit--color--accent);
+  --_ab--background: var(--sc-kit--announcement-banner--background, var(--_ab--background-default));
+  --_ab--border-color: var(--sc-kit--announcement-banner--border-color, var(--_ab--border-default));
+  --_ab--accent-color: var(--sc-kit--announcement-banner--accent-color, var(--_ab--accent-default));
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: var(--_ab--padding-block) var(--_ab--padding-inline);
+  background: var(--_ab--background);
+  border-bottom: 1px solid var(--_ab--border-color);
+  color: var(--_ab--accent-color);
+  position: relative;
+}
+.announcement-banner--dismissible {
+  padding-inline-end: calc(var(--_ab--padding-inline) + 2rem);
+}
+.announcement-banner--info {
+  --_ab--background-default: var(--sc-kit--color--accent--softer);
+  --_ab--border-default: var(--sc-kit--color--accent--soft);
+  --_ab--accent-default: var(--sc-kit--color--accent);
+}
+.announcement-banner--announcement {
+  --_ab--background-default: var(--sc-kit--color--accent--soft);
+  --_ab--border-default: var(--sc-kit--color--accent);
+  --_ab--accent-default: var(--sc-kit--color--accent);
+}
+.announcement-banner--warning {
+  --_ab--background-default: var(--sc-kit--color--warning--soft);
+  --_ab--border-default: var(--sc-kit--color--warning);
+  --_ab--accent-default: var(--sc-kit--color--warning);
+}
+.announcement-banner--maintenance {
+  --_ab--background-default: var(--sc-kit--color--danger--soft);
+  --_ab--border-default: var(--sc-kit--color--danger);
+  --_ab--accent-default: var(--sc-kit--color--danger);
+}
+.announcement-banner__content {
+  display: flex;
+  align-items: center;
+  gap: var(--_ab--gap);
+}
+.announcement-banner__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+.announcement-banner__body {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--sc-kit--space--2);
+}
+.announcement-banner__title {
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--_ab--title-color);
+}
+.announcement-banner__description {
+  font-size: var(--sc-kit--font-size--sm);
+  line-height: var(--sc-kit--leading--normal);
+  color: var(--_ab--description-color);
+}
+.announcement-banner__action {
+  flex-shrink: 0;
+}
+.announcement-banner__close {
+  position: absolute;
+  inset-inline-end: var(--_ab--padding-inline);
+  top: 50%;
+  transform: translateY(-50%);
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0;
+  border-radius: var(--sc-kit--radius--sm);
+  background: transparent;
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  cursor: pointer;
+  --sc-kit--icon--size: 0.75rem;
+}
+.announcement-banner__close:hover {
+  opacity: 1;
+}
+.announcement-banner__close:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}</style>

package/dist/ui/announcement-banner/cmp.announcement-banner.svelte.d.ts

@@ -0,0 +1,39 @@
+import { type IconProp } from '../icon';
+import type { AnnouncementBannerVariant } from './types';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** @default 'info' */
+    variant?: AnnouncementBannerVariant;
+    /** Short headline rendered in bold. */
+    title?: string;
+    /** Show a dismiss button. Hides the banner locally when clicked and fires `on.dismiss`. @default false */
+    dismissible?: boolean;
+    /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
+    /** Optional inline call-to-action area (e.g. "Learn more →", "See status page"). */
+    action?: Snippet;
+    /** Announcement body text. */
+    children?: Snippet;
+    on?: {
+        dismiss?: () => void;
+    };
+};
+/**
+ * Full-width ribbon notification for site-wide announcements placed at the top of a page or layout.
+ * Supports four visual variants; `variant='maintenance'` uses `role="alert"` (assertive); all others use `role="status"` (polite).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--announcement-banner--padding-block` | Vertical padding | `--sc-kit--space--3` |
+ * | `--sc-kit--announcement-banner--padding-inline` | Horizontal padding | `--sc-kit--space--5` |
+ * | `--sc-kit--announcement-banner--gap` | Gap between icon / body / action | `--sc-kit--space--3` |
+ * | `--sc-kit--announcement-banner--background` | Background color | per `variant` |
+ * | `--sc-kit--announcement-banner--border-color` | Bottom border color | per `variant` |
+ * | `--sc-kit--announcement-banner--accent-color` | Icon + dismiss glyph color | per `variant` |
+ * | `--sc-kit--announcement-banner--title--color` | Title text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--announcement-banner--description--color` | Body text color | `--sc-kit--color--text--secondary` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/announcement-banner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AnnouncementBanner } from './cmp.announcement-banner.svelte';
+export type { AnnouncementBannerVariant } from './types';

package/dist/ui/announcement-banner/index.js

@@ -0,0 +1 @@
+export { default as AnnouncementBanner } from './cmp.announcement-banner.svelte';

package/dist/ui/announcement-banner/types.d.ts

@@ -0,0 +1 @@
+export type AnnouncementBannerVariant = 'info' | 'announcement' | 'warning' | 'maintenance';

package/dist/ui/announcement-banner/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/avatar/cmp.avatar.svelte

@@ -1,30 +1,48 @@
 <script lang="ts">import { Image } from '../image';
-let { src = null, name = '', size = 'md', status = null } = $props();
-const initials = $derived(name
+let { src = null, name = '', size = 'md', status = null, badge = null } = $props();
+const deriveInitials = (value) => value
     .split(/\s+/)
     .filter(Boolean)
     .slice(0, 2)
     .map((p) => p[0])
     .join('')
-    .toUpperCase());
+    .toUpperCase();
+const initials = $derived(deriveInitials(name));
+const badgeInitials = $derived(deriveInitials(badge?.name ?? ''));
 </script>
 
+{#snippet personIcon()}
+  <span class="avatar__fallback" aria-hidden="true">
+    <svg class="avatar__fallback-icon" viewBox="0 0 24 24">
+      <circle cx="12" cy="9" r="4" fill="currentColor" opacity="0.6"></circle>
+      <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="currentColor" opacity="0.6"></path>
+    </svg>
+  </span>
+{/snippet}
+
 {#snippet fallback()}
   {#if name && initials}
     <span class="avatar__initials">{initials}</span>
   {:else}
-    <span class="avatar__fallback" aria-hidden="true">
-      <svg class="avatar__fallback-icon" viewBox="0 0 24 24">
-        <circle cx="12" cy="9" r="4" fill="currentColor" opacity="0.6"></circle>
-        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="currentColor" opacity="0.6"></path>
-      </svg>
-    </span>
+    {@render personIcon()}
   {/if}
 {/snippet}
 
-<span class="avatar avatar--{size}" class:avatar--with-status={!!status} role="img" aria-label={name || 'Avatar'}>
+{#snippet badgeFallback()}
+  {#if badge?.name && badgeInitials}
+    <span class="avatar__initials avatar__initials--badge">{badgeInitials}</span>
+  {:else}
+    {@render personIcon()}
+  {/if}
+{/snippet}
+
+<span class="avatar avatar--{size}" class:avatar--with-status={!!status && !badge} role="img" aria-label={name || 'Avatar'}>
   <Image src={src} alt={name} showStubOnError stub={fallback} />
-  {#if status}
+  {#if badge}
+    <span class="avatar__badge" role={badge.name ? 'img' : undefined} aria-label={badge.name || undefined} aria-hidden={badge.name ? undefined : true}>
+      <Image src={badge.src ?? null} alt={badge.name ?? ''} showStubOnError stub={badgeFallback} />
+    </span>
+  {:else if status}
     <span class="avatar__dot avatar__dot--{status}" aria-hidden="true"></span>
   {/if}
 </span>
@@ -33,13 +51,16 @@ const initials = $derived(name
 @component
 A circular avatar with three render modes (priority order): image → initials (derived from `name`)
 → generic person icon. If `src` fails to load, automatically falls back to initials/icon. Optional
-status dot in the bottom-right corner. Built on top of the kit `Image` component, which handles
-the load / error / stub state machine.
+status dot in the bottom-right corner, or a square `badge` mini-avatar in the same corner (the
+workspace/org-with-user pattern, same fallback chain at badge scale) — `badge` and `status` are
+mutually exclusive, `badge` wins. Built on top of the kit `Image` component, which handles the
+load / error / stub state machine.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--avatar--size` | Diameter (overrides size preset) | per `size` preset (20 / 24 / 32 / 40 / 56 px) |
+| `--sc-kit--avatar--border-radius` | Avatar shape (set e.g. `--sc-kit--radius--sm` for a rounded square) | `50%` |
 | `--sc-kit--avatar--background` | Fallback container background (initials / icon mode) | `--sc-kit--color--bg--active` |
 | `--sc-kit--avatar--color` | Fallback foreground (generic icon tint) | `--sc-kit--color--text--muted` |
 | `--sc-kit--avatar--initials--background` | Initials chip background | `--sc-kit--color--accent--soft` |
@@ -48,6 +69,9 @@ the load / error / stub state machine.
 | `--sc-kit--avatar--dot--color-online` | Online dot color | `--sc-kit--color--success` |
 | `--sc-kit--avatar--dot--color-busy` | Busy dot color | `--sc-kit--color--danger` |
 | `--sc-kit--avatar--dot--color-offline` | Offline dot color | `--sc-kit--color--text--muted` |
+| `--sc-kit--avatar--badge--size` | Badge mini-avatar box | 45% of the avatar diameter |
+| `--sc-kit--avatar--badge--ring-color` | Badge separation ring (override on active/hover row backgrounds to blend) | `--sc-kit--color--bg--panel` |
+| `--sc-kit--avatar--badge--ring-width` | Badge separation ring thickness | `1.5px` |
 -->
 
 <style>.avatar {
@@ -59,7 +83,11 @@ the load / error / stub state machine.
   --_avatar--dot-online: var(--sc-kit--avatar--dot--color-online, var(--sc-kit--color--success));
   --_avatar--dot-busy: var(--sc-kit--avatar--dot--color-busy, var(--sc-kit--color--danger));
   --_avatar--dot-offline: var(--sc-kit--avatar--dot--color-offline, var(--sc-kit--color--text--muted));
-  --sc-kit--image--border-radius: 50%;
+  --_avatar--badge-size: var(--sc-kit--avatar--badge--size, calc(var(--_avatar--size) * 0.45));
+  --_avatar--badge-ring-color: var(--sc-kit--avatar--badge--ring-color, var(--sc-kit--color--bg--panel));
+  --_avatar--badge-ring-width: var(--sc-kit--avatar--badge--ring-width, 1.5px);
+  --_avatar--border-radius: var(--sc-kit--avatar--border-radius, 50%);
+  --sc-kit--image--border-radius: var(--_avatar--border-radius);
   --sc-kit--image--background: var(--_avatar--background);
   position: relative;
   display: flex;
@@ -67,7 +95,7 @@ the load / error / stub state machine.
   justify-content: center;
   width: var(--_avatar--size);
   height: var(--_avatar--size);
-  border-radius: 50%;
+  border-radius: var(--_avatar--border-radius);
   flex-shrink: 0;
   background: var(--_avatar--background);
   color: var(--_avatar--color);
@@ -91,7 +119,7 @@ the load / error / stub state machine.
 .avatar__initials {
   width: 100%;
   height: 100%;
-  border-radius: 50%;
+  border-radius: var(--_avatar--border-radius);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -102,6 +130,25 @@ the load / error / stub state machine.
   line-height: var(--sc-kit--leading--tight);
   user-select: none;
 }
+.avatar__initials--badge {
+  border-radius: var(--sc-kit--radius--sm);
+  font-size: calc(var(--_avatar--badge-size) * 0.5);
+}
+.avatar__badge {
+  position: absolute;
+  right: -0.125rem;
+  bottom: -0.125rem;
+  width: var(--_avatar--badge-size);
+  height: var(--_avatar--badge-size);
+  border-radius: var(--sc-kit--radius--sm);
+  box-shadow: 0 0 0 var(--_avatar--badge-ring-width) var(--_avatar--badge-ring-color);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--_avatar--background);
+  --sc-kit--image--border-radius: var(--sc-kit--radius--sm);
+}
 .avatar__fallback {
   width: 100%;
   height: 100%;

package/dist/ui/avatar/cmp.avatar.svelte.d.ts

@@ -1,5 +1,4 @@
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type AvatarStatus = 'online' | 'busy' | 'offline';
+import type { AvatarData, AvatarSize, AvatarStatus } from './types';
 type Props = {
     /** Image URL. If omitted or fails to load, falls back to initials, then to a generic icon. */
     src?: string | null;
@@ -7,19 +6,24 @@ type Props = {
     name?: string;
     /** Size preset. @default 'md' */
     size?: AvatarSize;
-    /** Optional status dot rendered in the bottom-right corner. */
+    /** Optional status dot rendered in the bottom-right corner. Ignored while `badge` is set — both occupy the same corner. */
     status?: AvatarStatus | null;
+    /** Secondary mini-avatar layered on the bottom-right corner — the workspace/org-with-user pattern. Reuses the image → initials → icon fallback chain at badge scale. Takes the corner over `status`. */
+    badge?: AvatarData | null;
 };
 /**
  * A circular avatar with three render modes (priority order): image → initials (derived from `name`)
  * → generic person icon. If `src` fails to load, automatically falls back to initials/icon. Optional
- * status dot in the bottom-right corner. Built on top of the kit `Image` component, which handles
- * the load / error / stub state machine.
+ * status dot in the bottom-right corner, or a square `badge` mini-avatar in the same corner (the
+ * workspace/org-with-user pattern, same fallback chain at badge scale) — `badge` and `status` are
+ * mutually exclusive, `badge` wins. Built on top of the kit `Image` component, which handles the
+ * load / error / stub state machine.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--avatar--size` | Diameter (overrides size preset) | per `size` preset (20 / 24 / 32 / 40 / 56 px) |
+ * | `--sc-kit--avatar--border-radius` | Avatar shape (set e.g. `--sc-kit--radius--sm` for a rounded square) | `50%` |
  * | `--sc-kit--avatar--background` | Fallback container background (initials / icon mode) | `--sc-kit--color--bg--active` |
  * | `--sc-kit--avatar--color` | Fallback foreground (generic icon tint) | `--sc-kit--color--text--muted` |
  * | `--sc-kit--avatar--initials--background` | Initials chip background | `--sc-kit--color--accent--soft` |
@@ -28,6 +32,9 @@ type Props = {
  * | `--sc-kit--avatar--dot--color-online` | Online dot color | `--sc-kit--color--success` |
  * | `--sc-kit--avatar--dot--color-busy` | Busy dot color | `--sc-kit--color--danger` |
  * | `--sc-kit--avatar--dot--color-offline` | Offline dot color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--avatar--badge--size` | Badge mini-avatar box | 45% of the avatar diameter |
+ * | `--sc-kit--avatar--badge--ring-color` | Badge separation ring (override on active/hover row backgrounds to blend) | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--avatar--badge--ring-width` | Badge separation ring thickness | `1.5px` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/avatar/index.d.ts

@@ -1 +1,2 @@
 export { default as Avatar } from './cmp.avatar.svelte';
+export type { AvatarData, AvatarSize, AvatarStatus } from './types';

package/dist/ui/avatar/types.d.ts

@@ -0,0 +1,8 @@
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarStatus = 'online' | 'busy' | 'offline';
+export type AvatarData = {
+    /** Image URL. `null` / `undefined` skips to the initials → icon fallback chain. */
+    src?: string | null;
+    /** Display name — drives the initials fallback and the accessible label. */
+    name?: string;
+};

package/dist/ui/avatar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/navigation/cmp.nav-menu-account-row.svelte

@@ -1,18 +1,12 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import { Avatar } from '../avatar';
+import { Icon } from '../icon';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
-const { name, subtitle, avatar, secondaryAvatar, position = 'top' } = $props();
+const { name, subtitle, avatar, badge = null, position = 'top' } = $props();
 </script>
 
-<div class="nav-menu-account-row" class:nav-menu-account-row--dual={secondaryAvatar} class:nav-menu-account-row--top={position === 'top'}>
-  <span class="nav-menu-account-row__avatar-stack">
-    <span class="nav-menu-account-row__avatar nav-menu-account-row__avatar--primary">
-      {@render avatar()}
-    </span>
-    {#if secondaryAvatar}
-      <span class="nav-menu-account-row__avatar nav-menu-account-row__avatar--secondary">
-        {@render secondaryAvatar()}
-      </span>
-    {/if}
+<div class="nav-menu-account-row" class:nav-menu-account-row--top={position === 'top'}>
+  <span class="nav-menu-account-row__avatar" class:nav-menu-account-row__avatar--dual={!!badge}>
+    <Avatar src={avatar.src} name={avatar.name} badge={badge} />
   </span>
   <span class="nav-menu-account-row__info">
     <span class="nav-menu-account-row__name">{name}</span>
@@ -29,18 +23,13 @@ const { name, subtitle, avatar, secondaryAvatar, position = 'top' } = $props();
 @component
 NavMenuAccountRow — workspace / account trigger row for the top of a `NavMenu` panel. Purely
 presentational: render it inside a `Popover` `trigger` snippet to make it a real switcher. Layout:
-32px avatar on the left, 2-line text (name + subtitle), chevron-down on the right. It owns its own
-padding + hover; for a full-width trigger set `--sc-kit--popover--width: 100%` on the `Popover`.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--nav-menu-account-row--avatar-size` | Primary avatar box | `32px` |
-| `--sc-kit--nav-menu-account-row--secondary-avatar-size` | Secondary badge box | `14px` |
+kit `Avatar` on the left at the `md` preset (rounded square; circle + corner badge in
+org-with-user mode when `badge` is set), 2-line text (name + subtitle), chevron-down on the
+right. No public CSS vars of its own — avatar sizing/colors are tuned via the
+`--sc-kit--avatar--*` vars directly. It owns its own padding + hover; for a full-width trigger
+set `--sc-kit--popover--width: 100%` on the `Popover`.
 -->
 <style>.nav-menu-account-row {
-  --_avatar-size: var(--sc-kit--nav-menu-account-row--avatar-size, 2rem);
-  --_secondary-size: var(--sc-kit--nav-menu-account-row--secondary-avatar-size, 0.875rem);
   display: flex;
   align-items: center;
   gap: var(--sc-kit--space--2);
@@ -53,56 +42,17 @@ padding + hover; for a full-width trigger set `--sc-kit--popover--width: 100%` o
 .nav-menu-account-row:hover {
   background: var(--sc-kit--color--bg--hover);
 }
-
 .nav-menu-account-row--top {
   margin-top: var(--sc-kit--space--4);
 }
-
-.nav-menu-account-row__avatar-stack {
-  position: relative;
-  display: inline-flex;
-  width: var(--_avatar-size);
-  height: var(--_avatar-size);
-  flex-shrink: 0;
-}
-
 .nav-menu-account-row__avatar {
+  --sc-kit--avatar--border-radius: var(--sc-kit--radius--sm);
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  background: var(--sc-kit--color--bg--field-alt);
-  color: var(--sc-kit--color--text--on-accent);
-  font-size: var(--sc-kit--font-size--sm);
-  font-weight: var(--sc-kit--font-weight--semibold);
-}
-.nav-menu-account-row__avatar :global(img) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.nav-menu-account-row__avatar--primary {
-  width: 100%;
-  height: 100%;
-  border-radius: var(--sc-kit--radius--sm);
-}
-
-.nav-menu-account-row--dual .nav-menu-account-row__avatar--primary {
-  border-radius: var(--sc-kit--radius--circle);
+  flex-shrink: 0;
 }
-
-.nav-menu-account-row__avatar--secondary {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  width: var(--_secondary-size);
-  height: var(--_secondary-size);
-  border-radius: var(--sc-kit--radius--sm);
-  box-shadow: 0 0 0 1.5px var(--sc-kit--color--bg--panel);
-  font-size: 0.5rem;
+.nav-menu-account-row__avatar--dual {
+  --sc-kit--avatar--border-radius: 50%;
 }
-
 .nav-menu-account-row__info {
   display: flex;
   flex-direction: column;
@@ -110,7 +60,6 @@ padding + hover; for a full-width trigger set `--sc-kit--popover--width: 100%` o
   min-width: 0;
   gap: 0.125rem;
 }
-
 .nav-menu-account-row__name {
   font-size: var(--sc-kit--font-size--md);
   font-weight: var(--sc-kit--font-weight--semibold);
@@ -121,7 +70,6 @@ padding + hover; for a full-width trigger set `--sc-kit--popover--width: 100%` o
   white-space: nowrap;
   overflow: hidden;
 }
-
 .nav-menu-account-row__subtitle {
   font-size: 0.625rem;
   color: var(--sc-kit--color--text--secondary);
@@ -131,16 +79,11 @@ padding + hover; for a full-width trigger set `--sc-kit--popover--width: 100%` o
   white-space: nowrap;
   overflow: hidden;
 }
-
 .nav-menu-account-row__chevron {
+  --sc-kit--icon--size: 0.75rem;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--sc-kit--color--text--secondary);
-}
-.nav-menu-account-row__chevron :global(svg) {
-  width: 0.75rem;
-  height: 0.75rem;
-  fill: currentColor;
 }</style>

package/dist/ui/navigation/cmp.nav-menu-account-row.svelte.d.ts

@@ -1,27 +1,24 @@
-import type { Snippet } from 'svelte';
+import { type AvatarData } from '../avatar';
 type Props = {
     /** Primary line — workspace / account name. Truncates with ellipsis. */
     name: string;
     /** Secondary line — workspace type, role, email, etc. Truncates. */
     subtitle?: string;
-    /** Primary avatar slot (32 × 32px). Renders as a rounded square by default; becomes a circle when `secondaryAvatar` is also provided (org-with-user pattern). */
-    avatar: Snippet;
+    /** Primary avatar data (image → initials → icon fallback). Renders as a rounded square by default; becomes a circle when `badge` is also provided (org-with-user pattern). */
+    avatar: AvatarData;
     /** Optional secondary avatar — square badge layered on the bottom-right of the primary. Use it to show the active user when the primary is the workspace / organization. */
-    secondaryAvatar?: Snippet;
+    badge?: AvatarData | null;
     /** Placement within the menu — `top` adds spacing above so the row clears the panel's top edge; `bottom` leaves it flush (footer use). @default 'top' */
     position?: 'top' | 'bottom';
 };
 /**
  * NavMenuAccountRow — workspace / account trigger row for the top of a `NavMenu` panel. Purely
  * presentational: render it inside a `Popover` `trigger` snippet to make it a real switcher. Layout:
- * 32px avatar on the left, 2-line text (name + subtitle), chevron-down on the right. It owns its own
- * padding + hover; for a full-width trigger set `--sc-kit--popover--width: 100%` on the `Popover`.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--nav-menu-account-row--avatar-size` | Primary avatar box | `32px` |
- * | `--sc-kit--nav-menu-account-row--secondary-avatar-size` | Secondary badge box | `14px` |
+ * kit `Avatar` on the left at the `md` preset (rounded square; circle + corner badge in
+ * org-with-user mode when `badge` is set), 2-line text (name + subtitle), chevron-down on the
+ * right. No public CSS vars of its own — avatar sizing/colors are tuned via the
+ * `--sc-kit--avatar--*` vars directly. It owns its own padding + hover; for a full-width trigger
+ * set `--sc-kit--popover--width: 100%` on the `Popover`.
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/popover/cmp.popover-item.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { popoverIgnore } from './popover-ignore';
-const { disabled = false, keepOpen = false, divider = false, on, children } = $props();
+const { disabled = false, keepOpen = false, divider = false, inset = false, on, children } = $props();
 const handleClick = () => {
     if (disabled) {
         return;
@@ -12,6 +12,7 @@ const handleClick = () => {
   class="popover-item"
   class:popover-item--disabled={disabled}
   class:popover-item--divider={divider}
+  class:popover-item--inset={inset}
   use:popoverIgnore={keepOpen}
   role="menuitem"
   tabindex={disabled ? -1 : 0}
@@ -42,6 +43,8 @@ for toggle items inside menus).
 | `--sc-kit--popover-item--divider-color` | Divider line color | `var(--sc-kit--color--border)` |
 | `--sc-kit--popover-item--divider-spacing` | Vertical gap added by divider | `var(--sc-kit--space--1)` |
 | `--sc-kit--popover-item--text-align` | Text alignment | `left` |
+| `--sc-kit--popover-item--margin-inline` | Inline margin when `inset` | `var(--sc-kit--space--2)` |
+| `--sc-kit--popover-item--border-radius` | Corner radius when `inset` | `var(--sc-kit--radius--sm)` |
 -->
 
 <style>.popover-item {
@@ -56,6 +59,8 @@ for toggle items inside menus).
   --_di--divider-color: var(--sc-kit--popover-item--divider-color, var(--sc-kit--color--border));
   --_di--divider-spacing: var(--sc-kit--popover-item--divider-spacing, var(--sc-kit--space--1));
   --_di--text-align: var(--sc-kit--popover-item--text-align, left);
+  --_di--margin-inline: var(--sc-kit--popover-item--margin-inline, var(--sc-kit--space--2));
+  --_di--border-radius: var(--sc-kit--popover-item--border-radius, var(--sc-kit--radius--sm));
   display: flex;
   align-items: center;
   gap: var(--_di--gap);
@@ -81,6 +86,10 @@ for toggle items inside menus).
   margin-bottom: var(--_di--divider-spacing);
   padding-bottom: calc(var(--_di--padding-block) + 1px);
 }
+.popover-item--inset {
+  margin-inline: var(--_di--margin-inline);
+  border-radius: var(--_di--border-radius);
+}
 .popover-item__content {
   flex: 1;
   min-width: 0;

package/dist/ui/popover/cmp.popover-item.svelte.d.ts

@@ -5,6 +5,8 @@ type Props = {
     keepOpen?: boolean;
     /** Render a separator line below this item — useful for grouping menu sections. */
     divider?: boolean;
+    /** Inset the item from the popover edges: adds an inline margin and rounds the hover background. */
+    inset?: boolean;
     on?: {
         click?: () => void;
     };
@@ -29,6 +31,8 @@ type Props = {
  * | `--sc-kit--popover-item--divider-color` | Divider line color | `var(--sc-kit--color--border)` |
  * | `--sc-kit--popover-item--divider-spacing` | Vertical gap added by divider | `var(--sc-kit--space--1)` |
  * | `--sc-kit--popover-item--text-align` | Text alignment | `left` |
+ * | `--sc-kit--popover-item--margin-inline` | Inline margin when `inset` | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--popover-item--border-radius` | Corner radius when `inset` | `var(--sc-kit--radius--sm)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",