@getmicdrop/svelte-components 5.14.0 → 5.15.0

package/dist/index.spec.js

@@ -353,7 +353,7 @@ describe('Tree-Shaking Structure', () => {
     // patterns/index.js should use export * from subdirs
     const patternsContent = readFile('./patterns/index.js');
     const patternsReExports = (patternsContent.match(/export \* from/g) || []).length;
-    expect(patternsReExports).toBe(5); // forms, navigation, page, data, layout
+    expect(patternsReExports).toBe(6); // chat, forms, navigation, page, data, layout
   });
 
   it('leaf indexes export components individually', () => {

package/dist/patterns/chat/ChatActivityNotice.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  /**
+   * ChatActivityNotice - Centered notice for silent/background activity
+   *
+   * Displays activity that happened without notification (e.g., admin status changes)
+   * in a subtle centered format with decorative lines.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Actor name who performed the action */
+    actorName?: string;
+    /** Timestamp of the action */
+    timestamp?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Content to display (status changes, etc.) */
+    children?: Snippet;
+  }
+
+  let {
+    actorName,
+    timestamp,
+    className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div class={classNames('flex items-center justify-center gap-3 py-3', className)}>
+  <div class="h-px bg-gray-200 dark:bg-gray-700 w-12"></div>
+  <div class="flex flex-col items-center gap-1">
+    {@render children?.()}
+    {#if actorName || timestamp}
+      <span class="text-[10px] text-gray-400">
+        {#if actorName}{actorName}{/if}{#if actorName && timestamp} · {/if}{#if timestamp}{timestamp}{/if}
+      </span>
+    {/if}
+  </div>
+  <div class="h-px bg-gray-200 dark:bg-gray-700 w-12"></div>
+</div>

package/dist/patterns/chat/ChatActivityNotice.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+   * ChatActivityNotice - Centered notice for silent/background activity
+   *
+   * Displays activity that happened without notification (e.g., admin status changes)
+   * in a subtle centered format with decorative lines.
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Actor name who performed the action */
+    actorName?: string;
+    /** Timestamp of the action */
+    timestamp?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Content to display (status changes, etc.) */
+    children?: Snippet;
+}
+declare const ChatActivityNotice: import("svelte").Component<Props, {}, "">;
+type ChatActivityNotice = ReturnType<typeof ChatActivityNotice>;
+export default ChatActivityNotice;
+//# sourceMappingURL=ChatActivityNotice.svelte.d.ts.map

package/dist/patterns/chat/ChatActivityNotice.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatActivityNotice.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatActivityNotice.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8BH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/patterns/chat/ChatBubble.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  /**
+   * ChatBubble - Message bubble for chat interfaces
+   *
+   * Displays inbound (left) or outbound (right) messages with optional
+   * error state, timestamp, and sender name.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import Renew from 'carbon-icons-svelte/lib/Renew.svelte';
+
+  interface Props {
+    /** Message direction - inbound (from other) or outbound (from us) */
+    direction?: 'inbound' | 'outbound';
+    /** Sender name (shown for inbound messages) */
+    senderName?: string;
+    /** Timestamp to display */
+    timestamp?: string;
+    /** Whether delivery failed */
+    failed?: boolean;
+    /** Error message when failed */
+    errorMessage?: string;
+    /** Callback when retry is clicked */
+    onretry?: () => void;
+    /** Additional CSS classes for the bubble */
+    className?: string;
+    /** Avatar snippet (for inbound messages) */
+    avatar?: Snippet;
+    /** Message content */
+    children?: Snippet;
+  }
+
+  let {
+    direction = 'inbound',
+    senderName,
+    timestamp,
+    failed = false,
+    errorMessage,
+    onretry,
+    className = '',
+    avatar,
+    children,
+  }: Props = $props();
+
+  let isOutbound = $derived(direction === 'outbound');
+
+  let bubbleClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm',
+      isOutbound
+        ? 'bg-blue-600 text-white rounded-br-sm'
+        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class="flex {isOutbound ? 'justify-end' : 'justify-start'}">
+  <div class="flex items-end gap-2 max-w-[75%] {isOutbound ? 'flex-row-reverse' : ''}">
+    {#if !isOutbound && avatar}
+      {@render avatar()}
+    {/if}
+    <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'}">
+      {#if !isOutbound && senderName}
+        <span class="text-xs text-gray-500 mb-1 px-2">{senderName}</span>
+      {/if}
+      <div class="flex items-center gap-2 {isOutbound ? 'flex-row-reverse' : ''}">
+        <div class={bubbleClasses}>
+          {@render children?.()}
+        </div>
+        {#if failed}
+          <div class="flex items-center justify-center w-5 h-5 bg-red-500 rounded-full shrink-0">
+            <span class="text-white text-xs font-bold leading-none">!</span>
+          </div>
+        {/if}
+      </div>
+      {#if failed && errorMessage}
+        <div class="flex items-center gap-1 mt-0.5 px-2">
+          <span class="text-[9px] text-red-400">{errorMessage}</span>
+          {#if onretry}
+            <button
+              class="text-[9px] text-red-400 hover:text-red-500 flex items-center gap-0.5 opacity-75 hover:opacity-100"
+              onclick={onretry}
+            >
+              <Renew class="w-2 h-2" />
+              retry
+            </button>
+          {/if}
+        </div>
+      {:else if timestamp}
+        <span class="text-[10px] text-gray-400 mt-0.5 px-2">{timestamp}</span>
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/patterns/chat/ChatBubble.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+   * ChatBubble - Message bubble for chat interfaces
+   *
+   * Displays inbound (left) or outbound (right) messages with optional
+   * error state, timestamp, and sender name.
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Message direction - inbound (from other) or outbound (from us) */
+    direction?: 'inbound' | 'outbound';
+    /** Sender name (shown for inbound messages) */
+    senderName?: string;
+    /** Timestamp to display */
+    timestamp?: string;
+    /** Whether delivery failed */
+    failed?: boolean;
+    /** Error message when failed */
+    errorMessage?: string;
+    /** Callback when retry is clicked */
+    onretry?: () => void;
+    /** Additional CSS classes for the bubble */
+    className?: string;
+    /** Avatar snippet (for inbound messages) */
+    avatar?: Snippet;
+    /** Message content */
+    children?: Snippet;
+}
+declare const ChatBubble: import("svelte").Component<Props, {}, "">;
+type ChatBubble = ReturnType<typeof ChatBubble>;
+export default ChatBubble;
+//# sourceMappingURL=ChatBubble.svelte.d.ts.map

package/dist/patterns/chat/ChatBubble.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatBubble.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,qEAAqE;IACrE,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACnC,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuEH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/patterns/chat/ChatContainer.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  /**
+   * ChatContainer - Layout wrapper for chat interfaces
+   *
+   * Provides a flex column layout with optional header, scrollable message area,
+   * and fixed footer for message input.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Header content (title, subtitle, etc.) */
+    header?: Snippet;
+    /** Footer content (message input, actions) */
+    footer?: Snippet;
+    /** Main scrollable content */
+    children?: Snippet;
+  }
+
+  let {
+    className = '',
+    header,
+    footer,
+    children,
+  }: Props = $props();
+</script>
+
+<div class={classNames('flex flex-col h-full bg-white dark:bg-gray-900', className)}>
+  {#if header}
+    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 shrink-0">
+      {@render header()}
+    </div>
+  {/if}
+
+  <div class="flex-1 overflow-y-auto px-4 py-4 space-y-3">
+    {@render children?.()}
+  </div>
+
+  {#if footer}
+    <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 shrink-0">
+      {@render footer()}
+    </div>
+  {/if}
+</div>

package/dist/patterns/chat/ChatContainer.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+   * ChatContainer - Layout wrapper for chat interfaces
+   *
+   * Provides a flex column layout with optional header, scrollable message area,
+   * and fixed footer for message input.
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Header content (title, subtitle, etc.) */
+    header?: Snippet;
+    /** Footer content (message input, actions) */
+    footer?: Snippet;
+    /** Main scrollable content */
+    children?: Snippet;
+}
+declare const ChatContainer: import("svelte").Component<Props, {}, "">;
+type ChatContainer = ReturnType<typeof ChatContainer>;
+export default ChatContainer;
+//# sourceMappingURL=ChatContainer.svelte.d.ts.map

package/dist/patterns/chat/ChatContainer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContainer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatContainer.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmCH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/patterns/chat/ChatDateDivider.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  /**
+   * ChatDateDivider - Date separator for chat messages
+   *
+   * Displays a centered date label (Today, Yesterday, or formatted date)
+   * to separate messages by day.
+   */
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Date label to display (e.g., "Today", "Yesterday", "Monday, Jan 15, 2024") */
+    label: string;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    label,
+    className = '',
+  }: Props = $props();
+</script>
+
+<div class={classNames('text-center py-2', className)}>
+  <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full">
+    {label}
+  </span>
+</div>

package/dist/patterns/chat/ChatDateDivider.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    /** Date label to display (e.g., "Today", "Yesterday", "Monday, Jan 15, 2024") */
+    label: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const ChatDateDivider: import("svelte").Component<Props, {}, "">;
+type ChatDateDivider = ReturnType<typeof ChatDateDivider>;
+export default ChatDateDivider;
+//# sourceMappingURL=ChatDateDivider.svelte.d.ts.map

package/dist/patterns/chat/ChatDateDivider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatDateDivider.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatDateDivider.svelte.ts"],"names":[],"mappings":"AAYE,UAAU,KAAK;IACb,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/patterns/chat/ChatInvitationBubble.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  /**
+   * ChatInvitationBubble - Invitation notification bubble
+   *
+   * Shows "Invited {performerName}" with send icon in a blue bubble.
+   */
+  import { classNames } from '../../utils/utils.js';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  interface Props {
+    /** Name of the performer who was invited */
+    performerName: string;
+    /** Whether this is outbound (right side) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    performerName,
+    outbound = true,
+    className = '',
+  }: Props = $props();
+
+  let bubbleClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm bg-blue-600 text-white flex items-center gap-1.5',
+      outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class={bubbleClasses}>
+  <SendAltFilled class="w-4 h-4" />
+  Invited {performerName}
+</div>

package/dist/patterns/chat/ChatInvitationBubble.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    /** Name of the performer who was invited */
+    performerName: string;
+    /** Whether this is outbound (right side) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const ChatInvitationBubble: import("svelte").Component<Props, {}, "">;
+type ChatInvitationBubble = ReturnType<typeof ChatInvitationBubble>;
+export default ChatInvitationBubble;
+//# sourceMappingURL=ChatInvitationBubble.svelte.d.ts.map

package/dist/patterns/chat/ChatInvitationBubble.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInvitationBubble.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatInvitationBubble.svelte.ts"],"names":[],"mappings":"AAYE,UAAU,KAAK;IACb,4CAA4C;IAC5C,aAAa,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/patterns/chat/ChatInvitationNotice.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  /**
+   * ChatInvitationNotice - Inline invitation notice
+   *
+   * Shows "Invited {performerName}" with icon for activity notices.
+   * Smaller/subtler than ChatInvitationBubble.
+   */
+  import { classNames } from '../../utils/utils.js';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  interface Props {
+    /** Name of the performer who was invited */
+    performerName: string;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    performerName,
+    className = '',
+  }: Props = $props();
+</script>
+
+<span class={classNames('text-xs font-medium text-blue-600 flex items-center gap-1', className)}>
+  <SendAltFilled class="w-3 h-3" />
+  Invited {performerName}
+</span>

package/dist/patterns/chat/ChatInvitationNotice.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    /** Name of the performer who was invited */
+    performerName: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const ChatInvitationNotice: import("svelte").Component<Props, {}, "">;
+type ChatInvitationNotice = ReturnType<typeof ChatInvitationNotice>;
+export default ChatInvitationNotice;
+//# sourceMappingURL=ChatInvitationNotice.svelte.d.ts.map

package/dist/patterns/chat/ChatInvitationNotice.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInvitationNotice.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatInvitationNotice.svelte.ts"],"names":[],"mappings":"AAaE,UAAU,KAAK;IACb,4CAA4C;IAC5C,aAAa,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/patterns/chat/ChatMessageGroup.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  /**
+   * ChatMessageGroup - Groups multiple items from the same sender
+   *
+   * Wraps avatar, sender name, multiple content items, and timestamp
+   * for when a user sends multiple things at once (status change + message).
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Sender name */
+    senderName?: string;
+    /** Timestamp to display */
+    timestamp?: string;
+    /** Direction - inbound (left) or outbound (right) */
+    direction?: 'inbound' | 'outbound';
+    /** Additional CSS classes */
+    className?: string;
+    /** Avatar slot */
+    avatar?: Snippet;
+    /** Content items (status badges, messages, etc.) */
+    children?: Snippet;
+  }
+
+  let {
+    senderName,
+    timestamp,
+    direction = 'inbound',
+    className = '',
+    avatar,
+    children,
+  }: Props = $props();
+
+  let isOutbound = $derived(direction === 'outbound');
+</script>
+
+<div class={classNames('flex', isOutbound ? 'justify-end' : 'justify-start', className)}>
+  <div class="flex items-end gap-2 max-w-[75%] {isOutbound ? 'flex-row-reverse' : ''}">
+    {#if avatar && !isOutbound}
+      {@render avatar()}
+    {/if}
+    <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'}">
+      {#if senderName && !isOutbound}
+        <span class="text-xs text-gray-500 mb-1 px-2">{senderName}</span>
+      {/if}
+      <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'} gap-1">
+        {@render children?.()}
+      </div>
+      {#if timestamp}
+        <span class="text-[10px] text-gray-400 mt-0.5 px-2">
+          {#if isOutbound && senderName}{senderName} · {/if}{timestamp}
+        </span>
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/patterns/chat/ChatMessageGroup.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+   * ChatMessageGroup - Groups multiple items from the same sender
+   *
+   * Wraps avatar, sender name, multiple content items, and timestamp
+   * for when a user sends multiple things at once (status change + message).
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Sender name */
+    senderName?: string;
+    /** Timestamp to display */
+    timestamp?: string;
+    /** Direction - inbound (left) or outbound (right) */
+    direction?: 'inbound' | 'outbound';
+    /** Additional CSS classes */
+    className?: string;
+    /** Avatar slot */
+    avatar?: Snippet;
+    /** Content items (status badges, messages, etc.) */
+    children?: Snippet;
+}
+declare const ChatMessageGroup: import("svelte").Component<Props, {}, "">;
+type ChatMessageGroup = ReturnType<typeof ChatMessageGroup>;
+export default ChatMessageGroup;
+//# sourceMappingURL=ChatMessageGroup.svelte.d.ts.map

package/dist/patterns/chat/ChatMessageGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatMessageGroup.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACnC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0CH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/patterns/chat/ChatSlotUpdate.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  /**
+   * ChatSlotUpdate - Slot/role change display
+   *
+   * Shows "{fromValue} → {toValue}" for role or slot changes.
+   */
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Original value */
+    fromValue: string;
+    /** New value */
+    toValue: string;
+    /** Style variant - bubble (in message context) or inline (in notice) */
+    variant?: 'bubble' | 'inline';
+    /** Whether this is outbound (right side) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    fromValue,
+    toValue,
+    variant = 'bubble',
+    outbound = false,
+    className = '',
+  }: Props = $props();
+
+  let classes = $derived(
+    variant === 'bubble'
+      ? classNames(
+          'px-4 py-2.5 rounded-2xl text-sm bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400',
+          outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
+          className
+        )
+      : classNames(
+          'text-xs font-medium text-gray-500 dark:text-gray-400',
+          className
+        )
+  );
+</script>
+
+<span class={classes}>
+  {fromValue} → {toValue}
+</span>

package/dist/patterns/chat/ChatSlotUpdate.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    /** Original value */
+    fromValue: string;
+    /** New value */
+    toValue: string;
+    /** Style variant - bubble (in message context) or inline (in notice) */
+    variant?: 'bubble' | 'inline';
+    /** Whether this is outbound (right side) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const ChatSlotUpdate: import("svelte").Component<Props, {}, "">;
+type ChatSlotUpdate = ReturnType<typeof ChatSlotUpdate>;
+export default ChatSlotUpdate;
+//# sourceMappingURL=ChatSlotUpdate.svelte.d.ts.map

package/dist/patterns/chat/ChatSlotUpdate.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSlotUpdate.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatSlotUpdate.svelte.ts"],"names":[],"mappings":"AAWE,UAAU,KAAK;IACb,qBAAqB;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/patterns/chat/ChatStatusBadge.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  /**
+   * ChatStatusBadge - Status indicator for chat activity feeds
+   *
+   * Displays status changes (Confirmed, Declined, Invited, etc.) with
+   * appropriate colors and icons in a pill/badge format.
+   */
+  import type { Snippet, Component } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CloseFilled from 'carbon-icons-svelte/lib/CloseFilled.svelte';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  type StatusType = 'confirmed' | 'declined' | 'canceled' | 'invited' | 'pending' | string;
+
+  interface Props {
+    /** Status value */
+    status: StatusType;
+    /** Show as outbound style (right-aligned context) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional custom icon */
+    icon?: Snippet;
+  }
+
+  let {
+    status,
+    outbound = false,
+    className = '',
+    icon,
+  }: Props = $props();
+
+  interface StatusStyle {
+    textColor: string;
+    bgColor: string;
+    icon: Component<{ class?: string }> | null;
+  }
+
+  function getStatusStyle(s: string): StatusStyle {
+    switch (s?.toLowerCase()) {
+      case 'confirmed':
+        return {
+          textColor: 'text-green-600',
+          bgColor: 'bg-green-50 dark:bg-green-900/20',
+          icon: CheckmarkFilled,
+        };
+      case 'declined':
+      case 'canceled':
+        return {
+          textColor: 'text-red-600',
+          bgColor: 'bg-red-50 dark:bg-red-900/20',
+          icon: CloseFilled,
+        };
+      case 'invited':
+        return {
+          textColor: 'text-blue-600',
+          bgColor: 'bg-blue-50 dark:bg-blue-900/20',
+          icon: SendAltFilled,
+        };
+      default:
+        return {
+          textColor: 'text-gray-600',
+          bgColor: 'bg-gray-100 dark:bg-gray-800',
+          icon: null,
+        };
+    }
+  }
+
+  let style = $derived(getStatusStyle(status));
+
+  let badgeClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm font-medium flex items-center gap-1.5',
+      style.bgColor,
+      style.textColor,
+      outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class={badgeClasses}>
+  {#if icon}
+    {@render icon()}
+  {:else if style.icon}
+    {@const IconComponent = style.icon}
+    <IconComponent class="w-4 h-4" />
+  {/if}
+  <span class="capitalize">{status}</span>
+</div>

package/dist/patterns/chat/ChatStatusBadge.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+   * ChatStatusBadge - Status indicator for chat activity feeds
+   *
+   * Displays status changes (Confirmed, Declined, Invited, etc.) with
+   * appropriate colors and icons in a pill/badge format.
+   */
+import type { Snippet, Component } from 'svelte';
+type StatusType = 'confirmed' | 'declined' | 'canceled' | 'invited' | 'pending' | string;
+interface Props {
+    /** Status value */
+    status: StatusType;
+    /** Show as outbound style (right-aligned context) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional custom icon */
+    icon?: Snippet;
+}
+declare const ChatStatusBadge: Component<Props, {}, "">;
+type ChatStatusBadge = ReturnType<typeof ChatStatusBadge>;
+export default ChatStatusBadge;
+//# sourceMappingURL=ChatStatusBadge.svelte.d.ts.map

package/dist/patterns/chat/ChatStatusBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatStatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAO/C,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzF,UAAU,KAAK;IACb,mBAAmB;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAgFH,QAAA,MAAM,eAAe,0BAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/patterns/chat/ChatStatusTransition.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  /**
+   * ChatStatusTransition - Status change display with icons
+   *
+   * Shows "{fromStatus} → {toStatus}" with colored icons for each status.
+   * Used in activity notices to show silent status changes.
+   */
+  import type { Component } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CloseFilled from 'carbon-icons-svelte/lib/CloseFilled.svelte';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  interface Props {
+    /** Original status */
+    fromStatus: string;
+    /** New status */
+    toStatus: string;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    fromStatus,
+    toStatus,
+    className = '',
+  }: Props = $props();
+
+  interface StatusStyle {
+    color: string;
+    icon: Component<{ class?: string }> | null;
+  }
+
+  function getStatusStyle(status: string): StatusStyle {
+    switch (status?.toLowerCase()) {
+      case 'confirmed':
+        return { color: 'text-green-600', icon: CheckmarkFilled };
+      case 'declined':
+      case 'canceled':
+        return { color: 'text-red-600', icon: CloseFilled };
+      case 'invited':
+        return { color: 'text-blue-600', icon: SendAltFilled };
+      default:
+        return { color: 'text-gray-600', icon: null };
+    }
+  }
+
+  let fromStyle = $derived(getStatusStyle(fromStatus));
+  let toStyle = $derived(getStatusStyle(toStatus));
+</script>
+
+<span class={classNames('text-xs font-medium flex items-center gap-1', className)}>
+  {#if fromStyle.icon}
+    {@const FromIcon = fromStyle.icon}
+    <FromIcon class="w-3 h-3 {fromStyle.color}" />
+  {/if}
+  <span class={fromStyle.color}>{fromStatus}</span>
+  <span class="text-gray-400 mx-1">→</span>
+  {#if toStyle.icon}
+    {@const ToIcon = toStyle.icon}
+    <ToIcon class="w-3 h-3 {toStyle.color}" />
+  {/if}
+  <span class={toStyle.color}>{toStatus}</span>
+</span>

package/dist/patterns/chat/ChatStatusTransition.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+   * ChatStatusTransition - Status change display with icons
+   *
+   * Shows "{fromStatus} → {toStatus}" with colored icons for each status.
+   * Used in activity notices to show silent status changes.
+   */
+import type { Component } from 'svelte';
+interface Props {
+    /** Original status */
+    fromStatus: string;
+    /** New status */
+    toStatus: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const ChatStatusTransition: Component<Props, {}, "">;
+type ChatStatusTransition = ReturnType<typeof ChatStatusTransition>;
+export default ChatStatusTransition;
+//# sourceMappingURL=ChatStatusTransition.svelte.d.ts.map

package/dist/patterns/chat/ChatStatusTransition.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatStatusTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatStatusTransition.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAOtC,UAAU,KAAK;IACb,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwDH,QAAA,MAAM,oBAAoB,0BAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/patterns/chat/ChatTextBubble.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  /**
+   * ChatTextBubble - Simple text bubble without the full ChatBubble wrapper
+   *
+   * Just the bubble itself, for use within ChatMessageGroup or other contexts
+   * where you don't need avatar/timestamp handling.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Direction - inbound (gray) or outbound (blue) */
+    direction?: 'inbound' | 'outbound';
+    /** Additional CSS classes */
+    className?: string;
+    /** Content */
+    children?: Snippet;
+  }
+
+  let {
+    direction = 'inbound',
+    className = '',
+    children,
+  }: Props = $props();
+
+  let isOutbound = $derived(direction === 'outbound');
+
+  let bubbleClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm',
+      isOutbound
+        ? 'bg-blue-600 text-white rounded-br-sm'
+        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class={bubbleClasses}>
+  {@render children?.()}
+</div>

package/dist/patterns/chat/ChatTextBubble.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+   * ChatTextBubble - Simple text bubble without the full ChatBubble wrapper
+   *
+   * Just the bubble itself, for use within ChatMessageGroup or other contexts
+   * where you don't need avatar/timestamp handling.
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Direction - inbound (gray) or outbound (blue) */
+    direction?: 'inbound' | 'outbound';
+    /** Additional CSS classes */
+    className?: string;
+    /** Content */
+    children?: Snippet;
+}
+declare const ChatTextBubble: import("svelte").Component<Props, {}, "">;
+type ChatTextBubble = ReturnType<typeof ChatTextBubble>;
+export default ChatTextBubble;
+//# sourceMappingURL=ChatTextBubble.svelte.d.ts.map

package/dist/patterns/chat/ChatTextBubble.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTextBubble.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatTextBubble.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,oDAAoD;IACpD,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACnC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgCH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/patterns/chat/index.d.ts

@@ -0,0 +1,12 @@
+export { default as ChatContainer } from "./ChatContainer.svelte";
+export { default as ChatMessageGroup } from "./ChatMessageGroup.svelte";
+export { default as ChatBubble } from "./ChatBubble.svelte";
+export { default as ChatTextBubble } from "./ChatTextBubble.svelte";
+export { default as ChatInvitationBubble } from "./ChatInvitationBubble.svelte";
+export { default as ChatStatusBadge } from "./ChatStatusBadge.svelte";
+export { default as ChatStatusTransition } from "./ChatStatusTransition.svelte";
+export { default as ChatSlotUpdate } from "./ChatSlotUpdate.svelte";
+export { default as ChatDateDivider } from "./ChatDateDivider.svelte";
+export { default as ChatActivityNotice } from "./ChatActivityNotice.svelte";
+export { default as ChatInvitationNotice } from "./ChatInvitationNotice.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/chat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/index.js"],"names":[],"mappings":""}

package/dist/patterns/chat/index.js

@@ -0,0 +1,22 @@
+// =============================================================================
+// CHAT PATTERNS - Chat interface components
+// =============================================================================
+
+// Core layout
+export { default as ChatContainer } from './ChatContainer.svelte';
+export { default as ChatMessageGroup } from './ChatMessageGroup.svelte';
+
+// Message bubbles
+export { default as ChatBubble } from './ChatBubble.svelte';
+export { default as ChatTextBubble } from './ChatTextBubble.svelte';
+export { default as ChatInvitationBubble } from './ChatInvitationBubble.svelte';
+
+// Status displays
+export { default as ChatStatusBadge } from './ChatStatusBadge.svelte';
+export { default as ChatStatusTransition } from './ChatStatusTransition.svelte';
+export { default as ChatSlotUpdate } from './ChatSlotUpdate.svelte';
+
+// Dividers and notices
+export { default as ChatDateDivider } from './ChatDateDivider.svelte';
+export { default as ChatActivityNotice } from './ChatActivityNotice.svelte';
+export { default as ChatInvitationNotice } from './ChatInvitationNotice.svelte';

package/dist/patterns/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./chat/index.js";
 export * from "./forms/index.js";
 export * from "./navigation/index.js";
 export * from "./page/index.js";

package/dist/patterns/index.js

@@ -2,6 +2,9 @@
 // PATTERNS - Layout & flow components (Layer 3)
 // =============================================================================
 
+// Chat - re-export from chat/index.js
+export * from './chat/index.js';
+
 // Forms - re-export from forms/index.js
 export * from './forms/index.js';
 

package/dist/recipes/ImageUploader/ImageUploader.svelte

@@ -627,7 +627,7 @@
     {:else}
       <!-- Empty dropzone with direct drag-drop support -->
       <div
-        class="{shapeAspects[shape]} filepond-wrapper-single {shape === 'wide' ? 'filepond-wide' : ''}
+        class="{shapeAspects[shape]} filepond-wrapper-single rounded-xl {shape === 'wide' ? 'filepond-wide' : ''}
           {isDropzoneDragOver ? 'dropzone-drag-over' : ''}"
         role="button"
         tabindex="0"
@@ -883,7 +883,6 @@
   /* Single mode dropzone styling */
   .filepond-wrapper-single {
     border: 2px dashed rgb(209 213 219); /* gray-300 */
-    border-radius: 0.75rem; /* rounded-xl */
     background-color: rgb(249 250 251); /* gray-50 */
     transition-property: color, background-color, border-color;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.14.0",
+  "version": "5.15.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",