@joewinke/jatui 0.1.33 → 0.2.0

package/dist/components/graph/GraphCanvas.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import '@xyflow/svelte/dist/style.css'
+
+	import { SvelteFlow, Background, Controls, MiniMap, type Node, type Edge } from '@xyflow/svelte'
+	import JatuiNode from './JatuiNode.svelte'
+	import { watchAndApplyTheme } from './theme.js'
+
+	import type { NodeEventWithPointer } from '@xyflow/svelte'
+
+	interface Props {
+		/** Flow nodes — bindable for interactive graphs. */
+		nodes: Node[]
+		/** Flow edges — bindable for interactive graphs. */
+		edges: Edge[]
+		/** When true, disables pan/zoom/selection interactions. */
+		readonly?: boolean
+		/** Fit the graph to the viewport on first render. */
+		fitView?: boolean
+		/** Show the minimap panel. */
+		minimap?: boolean
+		/** Fired when the user clicks a node. */
+		onNodeClick?: NodeEventWithPointer<MouseEvent | TouchEvent>
+		/** Height of the canvas container (CSS value). Defaults to 100%. */
+		height?: string
+	}
+
+	let {
+		nodes = $bindable([]),
+		edges = $bindable([]),
+		readonly = false,
+		fitView = true,
+		minimap = false,
+		onNodeClick,
+		height = '100%',
+	}: Props = $props()
+
+	const nodeTypes = { jatuiNode: JatuiNode }
+
+	let flowEl: HTMLDivElement | null = $state(null)
+	let stopWatch: (() => void) | null = null
+
+	$effect(() => {
+		if (!flowEl) return
+		stopWatch?.()
+		stopWatch = watchAndApplyTheme(flowEl)
+		return () => {
+			stopWatch?.()
+			stopWatch = null
+		}
+	})
+</script>
+
+<div class="graph-canvas" style:height bind:this={flowEl}>
+	<SvelteFlow
+		{nodes}
+		{edges}
+		{nodeTypes}
+		{fitView}
+		nodesDraggable={!readonly}
+		nodesConnectable={!readonly}
+		elementsSelectable={!readonly}
+		panOnDrag={!readonly}
+		zoomOnScroll={!readonly}
+		onnodeclick={onNodeClick as NodeEventWithPointer<MouseEvent | TouchEvent> | undefined}
+		fitViewOptions={{ padding: 0.2 }}
+		attributionPosition="bottom-right"
+	>
+		<Background gap={16} size={1} />
+		<Controls showLock={false} />
+		{#if minimap}
+			<MiniMap />
+		{/if}
+	</SvelteFlow>
+</div>
+
+<style>
+	.graph-canvas {
+		width: 100%;
+		position: relative;
+		/* Contain the xyflow absolute-positioned layers */
+		overflow: hidden;
+		border-radius: var(--jatui-radius-box);
+		border: var(--jatui-border-w) solid var(--color-base-300, oklch(0.9 0 0));
+		background: var(--color-base-100, oklch(0.98 0 0));
+	}
+
+	/* Strip xyflow's built-in node box-shadow (house rule: no at-rest shadows) */
+	:global(.svelte-flow .svelte-flow__node) {
+		box-shadow: none !important;
+		filter: none !important;
+	}
+
+	/* Edge animation uses opacity+stroke transitions, not layout — allowed */
+	:global(.svelte-flow .svelte-flow__edge path) {
+		transition: stroke var(--motion-fast) var(--motion-glide);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(.svelte-flow .svelte-flow__edge path) {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/graph/GraphCanvas.svelte.d.ts

@@ -0,0 +1,22 @@
+import '@xyflow/svelte/dist/style.css';
+import { type Node, type Edge } from '@xyflow/svelte';
+import type { NodeEventWithPointer } from '@xyflow/svelte';
+interface Props {
+    /** Flow nodes — bindable for interactive graphs. */
+    nodes: Node[];
+    /** Flow edges — bindable for interactive graphs. */
+    edges: Edge[];
+    /** When true, disables pan/zoom/selection interactions. */
+    readonly?: boolean;
+    /** Fit the graph to the viewport on first render. */
+    fitView?: boolean;
+    /** Show the minimap panel. */
+    minimap?: boolean;
+    /** Fired when the user clicks a node. */
+    onNodeClick?: NodeEventWithPointer<MouseEvent | TouchEvent>;
+    /** Height of the canvas container (CSS value). Defaults to 100%. */
+    height?: string;
+}
+declare const GraphCanvas: import("svelte").Component<Props, {}, "nodes" | "edges">;
+type GraphCanvas = ReturnType<typeof GraphCanvas>;
+export default GraphCanvas;

package/dist/components/graph/JatuiNode.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { Handle, Position } from '@xyflow/svelte'
+	import type { NodeProps } from '@xyflow/svelte'
+	import type { NodeStatus } from './theme.js'
+
+	interface JatuiNodeData {
+		label?: string
+		status?: NodeStatus
+		/** Extra text below the label — e.g. type or description */
+		sublabel?: string
+	}
+
+	type Props = NodeProps & { data: JatuiNodeData }
+
+	let { data, selected = false, sourcePosition = Position.Bottom, targetPosition = Position.Top }: Props = $props()
+
+	const STATUS_TINT: Record<NodeStatus, string> = {
+		default: '',
+		primary: 'bg-primary/10 border-primary text-primary',
+		secondary: 'bg-secondary/10 border-secondary text-secondary',
+		info: 'bg-info/10 border-info text-info',
+		success: 'bg-success/10 border-success text-success',
+		warning: 'bg-warning/10 border-warning text-warning',
+		error: 'bg-error/10 border-error text-error',
+	}
+
+	const STATUS_DOT: Record<NodeStatus, string> = {
+		default: '',
+		primary: 'bg-primary',
+		secondary: 'bg-secondary',
+		info: 'bg-info',
+		success: 'bg-success',
+		warning: 'bg-warning',
+		error: 'bg-error',
+	}
+
+	const status = $derived(data?.status ?? 'default')
+	const tintClass = $derived(STATUS_TINT[status])
+	const dotClass = $derived(STATUS_DOT[status])
+</script>
+
+<Handle type="target" position={targetPosition} />
+
+<div
+	class="jatui-node"
+	class:jatui-node--selected={selected}
+	class:jatui-node--tinted={status !== 'default'}
+>
+	<div class="jatui-node__inner {tintClass}">
+		{#if status !== 'default'}
+			<span class="jatui-node__dot {dotClass}" aria-hidden="true"></span>
+		{/if}
+		<span class="jatui-node__label">{data?.label ?? ''}</span>
+		{#if data?.sublabel}
+			<span class="jatui-node__sublabel">{data.sublabel}</span>
+		{/if}
+	</div>
+</div>
+
+<Handle type="source" position={sourcePosition} />
+
+<style>
+	.jatui-node {
+		min-width: 120px;
+		max-width: 240px;
+	}
+
+	.jatui-node__inner {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm);
+		padding: var(--jatui-space-base) var(--jatui-space-lg);
+		background: var(--color-base-200, oklch(0.96 0 0));
+		border: var(--jatui-border-w) solid var(--color-base-300, oklch(0.9 0 0));
+		border-radius: var(--jatui-radius-box);
+		transition:
+			border-color var(--motion-fast) var(--motion-glide),
+			background var(--motion-fast) var(--motion-glide);
+		cursor: default;
+		user-select: none;
+	}
+
+	/* Tinted nodes: bg-X/10 and border-X classes applied via class binding */
+	.jatui-node--tinted .jatui-node__inner {
+		/* colors come from DaisyUI utility classes in the markup */
+	}
+
+	/* Selected ring — uses primary without shadows (house rule) */
+	.jatui-node--selected .jatui-node__inner {
+		border-color: var(--color-primary, oklch(0.6 0.2 264));
+	}
+
+	.jatui-node__dot {
+		flex-shrink: 0;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+	}
+
+	.jatui-node__label {
+		font-size: 0.8125rem; /* 13px */
+		font-weight: 500;
+		color: var(--color-base-content, currentColor);
+		line-height: 1.3;
+		word-break: break-word;
+	}
+
+	/* Tinted label inherits color from the tint utility class text-* */
+	.jatui-node--tinted .jatui-node__inner .jatui-node__label {
+		color: inherit;
+	}
+
+	.jatui-node__sublabel {
+		display: block;
+		font-size: 0.6875rem; /* 11px */
+		color: var(--color-base-content, currentColor);
+		opacity: 0.55;
+		line-height: 1.3;
+		margin-top: 2px;
+	}
+
+	/* Reduced motion: strip transitions */
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-node__inner {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/graph/JatuiNode.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { NodeProps } from '@xyflow/svelte';
+import type { NodeStatus } from './theme.js';
+interface JatuiNodeData {
+    label?: string;
+    status?: NodeStatus;
+    /** Extra text below the label — e.g. type or description */
+    sublabel?: string;
+}
+type Props = NodeProps & {
+    data: JatuiNodeData;
+};
+declare const JatuiNode: import("svelte").Component<Props, {}, "">;
+type JatuiNode = ReturnType<typeof JatuiNode>;
+export default JatuiNode;

package/dist/components/graph/theme.d.ts

@@ -0,0 +1,27 @@
+/**
+ * GraphCanvas theme bridge — maps DaisyUI --color-* custom properties onto
+ * xyflow CSS vars so the graph follows the active DaisyUI theme at runtime.
+ *
+ * Call applyXyflowTheme(el) after mount and whenever the theme changes.
+ * el should be the .svelte-flow wrapper element.
+ */
+/**
+ * Status colors available for JatuiNode status-tinting.
+ * Returns a map of status → resolved CSS color string.
+ */
+export type NodeStatus = 'default' | 'info' | 'success' | 'warning' | 'error' | 'primary' | 'secondary';
+export declare function getStatusColor(status: NodeStatus): {
+    bg: string;
+    border: string;
+    text: string;
+};
+/**
+ * Apply DaisyUI-derived xyflow CSS vars to the flow container element.
+ * Safe to call multiple times — just re-sets the vars.
+ */
+export declare function applyXyflowTheme(el: HTMLElement): void;
+/**
+ * Setup watcher: re-applies theme whenever DaisyUI theme changes.
+ * Returns cleanup fn.
+ */
+export declare function watchAndApplyTheme(el: HTMLElement): () => void;

package/dist/components/graph/theme.js

@@ -0,0 +1,136 @@
+/**
+ * GraphCanvas theme bridge — maps DaisyUI --color-* custom properties onto
+ * xyflow CSS vars so the graph follows the active DaisyUI theme at runtime.
+ *
+ * Call applyXyflowTheme(el) after mount and whenever the theme changes.
+ * el should be the .svelte-flow wrapper element.
+ */
+import { getDaisyUIColor, watchThemeChanges } from '../../utils/daisyuiColors.js';
+/** All xyflow CSS vars we override, plus the fallback xyflow var they replace. */
+var THEME_MAP = [
+    // Edges
+    ['--xy-edge-stroke', 'var(--color-base-content, #b1b1b7)'],
+    ['--xy-edge-stroke-selected', 'var(--color-primary, #555)'],
+    ['--xy-connectionline-stroke', 'var(--color-base-content, #b1b1b7)'],
+    // Background canvas
+    ['--xy-background-color', 'var(--color-base-100, transparent)'],
+    ['--xy-background-pattern-dots-color', 'var(--color-base-300, #91919a)'],
+    ['--xy-background-pattern-lines-color', 'var(--color-base-200, #eee)'],
+    ['--xy-background-pattern-cross-color', 'var(--color-base-300, #e2e2e2)'],
+    // Node defaults
+    ['--xy-node-color', 'var(--color-base-content, #333)'],
+    ['--xy-node-border', '1px solid var(--color-base-300, #bbb)'],
+    ['--xy-node-border-selected', '1px solid var(--color-primary, #555)'],
+    ['--xy-node-background-color', 'var(--color-base-200, #fff)'],
+    // Handle
+    ['--xy-handle-background-color', 'var(--color-base-content, #333)'],
+    ['--xy-handle-border-color', 'var(--color-base-100, #fff)'],
+    // Minimap
+    ['--xy-minimap-background-color', 'var(--color-base-100, #fff)'],
+    ['--xy-minimap-mask-background-color', 'color-mix(in oklch, var(--color-base-200, #f0f0f0) 60%, transparent)'],
+    ['--xy-minimap-node-background-color', 'var(--color-base-200, #e2e2e2)'],
+    // Selection box
+    ['--xy-selection-background-color', 'color-mix(in oklch, var(--color-primary, #6366f1) 10%, transparent)'],
+    ['--xy-selection-border', '1px dotted color-mix(in oklch, var(--color-primary, #6366f1) 50%, transparent)'],
+    // Attribution
+    ['--xy-attribution-background-color', 'color-mix(in oklch, var(--color-base-100, #fff) 80%, transparent)'],
+];
+export function getStatusColor(status) {
+    switch (status) {
+        case 'primary':
+            return {
+                bg: getDaisyUIColor('primary'),
+                border: getDaisyUIColor('primary'),
+                text: getDaisyUIColor('primary-content'),
+            };
+        case 'secondary':
+            return {
+                bg: getDaisyUIColor('secondary'),
+                border: getDaisyUIColor('secondary'),
+                text: getDaisyUIColor('secondary-content'),
+            };
+        case 'info':
+            return {
+                bg: getDaisyUIColor('info'),
+                border: getDaisyUIColor('info'),
+                text: getDaisyUIColor('info-content'),
+            };
+        case 'success':
+            return {
+                bg: getDaisyUIColor('success'),
+                border: getDaisyUIColor('success'),
+                text: getDaisyUIColor('success-content'),
+            };
+        case 'warning':
+            return {
+                bg: getDaisyUIColor('warning'),
+                border: getDaisyUIColor('warning'),
+                text: getDaisyUIColor('warning-content'),
+            };
+        case 'error':
+            return {
+                bg: getDaisyUIColor('error'),
+                border: getDaisyUIColor('error'),
+                text: getDaisyUIColor('error-content'),
+            };
+        default:
+            return { bg: '', border: '', text: '' };
+    }
+}
+/**
+ * Apply DaisyUI-derived xyflow CSS vars to the flow container element.
+ * Safe to call multiple times — just re-sets the vars.
+ */
+export function applyXyflowTheme(el) {
+    for (var _i = 0, THEME_MAP_1 = THEME_MAP; _i < THEME_MAP_1.length; _i++) {
+        var prop = THEME_MAP_1[_i][0];
+        // We set the vars as CSS custom properties on the element itself.
+        // xyflow reads them from .svelte-flow context, so setting on the wrapper is correct.
+        var cssVarName = prop.replace('--xy-', '--xy-'); // identity — keep readable
+        // Read the DaisyUI value dynamically then set
+        var mappedValue = resolveThemeValue(prop);
+        el.style.setProperty(cssVarName, mappedValue);
+    }
+}
+function resolveThemeValue(prop) {
+    var _a, _b;
+    // Map the xyflow prop name to the DaisyUI color resolution
+    var propToColor = {
+        '--xy-edge-stroke': function () { return getDaisyUIColor('base-content'); },
+        '--xy-edge-stroke-selected': function () { return getDaisyUIColor('primary'); },
+        '--xy-connectionline-stroke': function () { return getDaisyUIColor('base-content'); },
+        '--xy-background-color': function () { return getDaisyUIColor('base-100'); },
+        '--xy-background-pattern-dots-color': function () { return getDaisyUIColor('base-300'); },
+        '--xy-background-pattern-lines-color': function () { return getDaisyUIColor('base-200'); },
+        '--xy-background-pattern-cross-color': function () { return getDaisyUIColor('base-300'); },
+        '--xy-node-color': function () { return getDaisyUIColor('base-content'); },
+        '--xy-node-border': function () { return "1px solid ".concat(getDaisyUIColor('base-300')); },
+        '--xy-node-border-selected': function () { return "1px solid ".concat(getDaisyUIColor('primary')); },
+        '--xy-node-background-color': function () { return getDaisyUIColor('base-200'); },
+        '--xy-handle-background-color': function () { return getDaisyUIColor('base-content'); },
+        '--xy-handle-border-color': function () { return getDaisyUIColor('base-100'); },
+        '--xy-minimap-background-color': function () { return getDaisyUIColor('base-100'); },
+        '--xy-minimap-mask-background-color': function () {
+            return "color-mix(in oklch, ".concat(getDaisyUIColor('base-200'), " 60%, transparent)");
+        },
+        '--xy-minimap-node-background-color': function () { return getDaisyUIColor('base-200'); },
+        '--xy-selection-background-color': function () {
+            return "color-mix(in oklch, ".concat(getDaisyUIColor('primary'), " 10%, transparent)");
+        },
+        '--xy-selection-border': function () {
+            return "1px dotted color-mix(in oklch, ".concat(getDaisyUIColor('primary'), " 50%, transparent)");
+        },
+        '--xy-attribution-background-color': function () {
+            return "color-mix(in oklch, ".concat(getDaisyUIColor('base-100'), " 80%, transparent)");
+        },
+    };
+    return (_b = (_a = propToColor[prop]) === null || _a === void 0 ? void 0 : _a.call(propToColor)) !== null && _b !== void 0 ? _b : '';
+}
+/**
+ * Setup watcher: re-applies theme whenever DaisyUI theme changes.
+ * Returns cleanup fn.
+ */
+export function watchAndApplyTheme(el) {
+    applyXyflowTheme(el);
+    return watchThemeChanges(function () { return applyXyflowTheme(el); });
+}

package/dist/components/messaging/MessageItem.svelte

@@ -21,6 +21,8 @@
   import MessageAttachment from './MessageAttachment.svelte'
   import EmojiSelector from './EmojiSelector.svelte'
 
+  import type { Snippet } from 'svelte'
+
   interface Props {
     message: Message
     isOwn?: boolean
@@ -43,6 +45,10 @@
     onopenthread?: (data: { messageId: string }) => void
     onquotereply?: (data: { messageId: string }) => void
     onreactionchange?: () => void
+    /** Enable swipe-to-reveal on coarse pointers (touch). Defaults to false. */
+    swipeActions?: boolean
+    /** Snippet rendered in the revealed action zone (right side, behind the item). */
+    swipeContent?: Snippet
   }
 
   let {
@@ -64,6 +70,8 @@
     onopenthread,
     onquotereply,
     onreactionchange,
+    swipeActions = false,
+    swipeContent,
   }: Props = $props()
 
   let isEditing = $state(false)
@@ -72,6 +80,66 @@
   let showEmojiSelector = $state(false)
   let emojiSelectorPosition = $state({ x: 0, y: 0 })
 
+  // Swipe-to-reveal state (coarse pointer / touch only)
+  const SWIPE_THRESHOLD = 96
+  const RUBBER_BAND_LIMIT = 130
+  let swipeOpen = $state(false)
+  let swipeDragging = $state(false)
+  let swipeOffset = $state(0)
+  let swipeStartX = 0
+  let swipeStartOpen = false
+
+  function isCoarsePointer(e: PointerEvent) {
+    return e.pointerType === 'touch' || e.pointerType === 'pen'
+  }
+
+  function swipeRubberBand(raw: number): number {
+    if (raw >= 0) return 0
+    const abs = Math.abs(raw)
+    if (abs <= SWIPE_THRESHOLD) return raw
+    const over = abs - SWIPE_THRESHOLD
+    const damped = SWIPE_THRESHOLD + over * (1 - over / (RUBBER_BAND_LIMIT * 2))
+    return -Math.min(damped, RUBBER_BAND_LIMIT)
+  }
+
+  function onSwipePointerDown(e: PointerEvent) {
+    if (!swipeActions || !swipeContent || !isCoarsePointer(e)) return
+    swipeStartX = e.clientX
+    swipeStartOpen = swipeOpen
+    swipeDragging = true
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+
+  function onSwipePointerMove(e: PointerEvent) {
+    if (!swipeDragging) return
+    const baseOffset = swipeStartOpen ? -SWIPE_THRESHOLD : 0
+    const raw = baseOffset + (e.clientX - swipeStartX)
+    swipeOffset = swipeRubberBand(raw)
+  }
+
+  function onSwipePointerUp(e: PointerEvent) {
+    if (!swipeDragging) return
+    swipeDragging = false
+    const baseOffset = swipeStartOpen ? -SWIPE_THRESHOLD : 0
+    const delta = baseOffset + (e.clientX - swipeStartX)
+    // Velocity hint: fast leftward swipe counts even without crossing threshold
+    const velocity = e.clientX - swipeStartX
+    if (delta < -SWIPE_THRESHOLD / 2 || velocity < -30) {
+      swipeOpen = true
+    } else {
+      swipeOpen = false
+    }
+    swipeOffset = 0
+  }
+
+  const swipeTranslateX = $derived(
+    swipeDragging
+      ? swipeOffset
+      : swipeOpen
+        ? -SWIPE_THRESHOLD
+        : 0
+  )
+
   function formatTime(dateString: string): string {
     const date = new Date(dateString)
     const now = new Date()
@@ -182,6 +250,27 @@
   }
 </script>
 
+<!-- Swipe wrapper: always rendered; overflow-hidden clips the action zone -->
+<div
+  class="swipe-wrapper relative overflow-hidden"
+  class:rounded={swipeActions && !!swipeContent}
+>
+  <!-- Action zone — only present when swipe is enabled -->
+  {#if swipeActions && swipeContent}
+    <div class="swipe-actions absolute inset-y-0 right-0 flex items-center pr-2 gap-1" aria-hidden={!swipeOpen}>
+      {@render swipeContent()}
+    </div>
+  {/if}
+
+  <!-- Draggable layer (swipe) or passthrough div -->
+  <div
+    style={swipeActions && swipeContent ? `transform: translateX(${swipeTranslateX}px); transition: ${swipeDragging ? 'none' : 'transform var(--motion-move) var(--motion-spring)'};` : undefined}
+    onpointerdown={swipeActions && swipeContent ? onSwipePointerDown : undefined}
+    onpointermove={swipeActions && swipeContent ? onSwipePointerMove : undefined}
+    onpointerup={swipeActions && swipeContent ? onSwipePointerUp : undefined}
+    onpointercancel={swipeActions && swipeContent ? onSwipePointerUp : undefined}
+  >
+
 <div
   class="group flex gap-3 px-2 py-1 rounded relative transition-colors w-full text-left cursor-pointer {message.isPinned ? 'bg-warning/5 hover:bg-warning/10' : 'hover:bg-base-200'}"
   class:pt-2={!isConsecutive}
@@ -328,6 +417,9 @@
   </div>
 </div>
 
+  </div><!-- /draggable layer -->
+</div><!-- /swipe-wrapper -->
+
 <!-- Emoji Selector -->
 {#if showEmojiSelector && currentUserId}
   <EmojiSelector

package/dist/components/messaging/MessageItem.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Message, ReactionSummary, StandardEmoji, CustomEmoji, ReactionCallbacks, AttachmentCallbacks } from '../../types/messaging';
+import type { Snippet } from 'svelte';
 interface Props {
     message: Message;
     isOwn?: boolean;
@@ -35,6 +36,10 @@ interface Props {
         messageId: string;
     }) => void;
     onreactionchange?: () => void;
+    /** Enable swipe-to-reveal on coarse pointers (touch). Defaults to false. */
+    swipeActions?: boolean;
+    /** Snippet rendered in the revealed action zone (right side, behind the item). */
+    swipeContent?: Snippet;
 }
 declare const MessageItem: import("svelte").Component<Props, {}, "">;
 type MessageItem = ReturnType<typeof MessageItem>;

package/dist/components/messaging/TypingIndicator.svelte

@@ -0,0 +1,63 @@
+<!--
+  TypingIndicator — three-dot phase-offset bounce (kinetics: Typing Indicator).
+  Infinite loop is sanctioned for functional status indicators.
+  Reduced-motion: static dots + label remain visible.
+-->
+
+<script lang="ts">
+  interface Props {
+    users?: string[]
+    class?: string
+  }
+
+  let { users = [], class: cls = '' }: Props = $props()
+
+  const label = $derived(
+    users.length === 0
+      ? 'typing…'
+      : users.length === 1
+        ? `${users[0]} is typing…`
+        : users.length === 2
+          ? `${users[0]} and ${users[1]} are typing…`
+          : `${users[0]} and ${users.length - 1} others are typing…`
+  )
+</script>
+
+<div class="typing-indicator inline-flex items-center gap-1.5 {cls}" aria-label={label} role="status">
+  <span class="dot" aria-hidden="true"></span>
+  <span class="dot" style="animation-delay: 0.16s" aria-hidden="true"></span>
+  <span class="dot" style="animation-delay: 0.32s" aria-hidden="true"></span>
+  {#if users.length > 0}
+    <span class="text-xs text-base-content/60 ml-0.5">{label}</span>
+  {/if}
+</div>
+
+<style>
+  .dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: oklch(from var(--color-base-content, currentColor) l c h / 0.6);
+    animation: typing-bounce 1.2s ease-in-out infinite;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  @keyframes typing-bounce {
+    0%, 60%, 100% {
+      transform: translateY(0);
+      opacity: 0.4;
+    }
+    30% {
+      transform: translateY(-6px);
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dot {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+</style>

package/dist/components/messaging/TypingIndicator.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    users?: string[];
+    class?: string;
+}
+declare const TypingIndicator: import("svelte").Component<Props, {}, "">;
+type TypingIndicator = ReturnType<typeof TypingIndicator>;
+export default TypingIndicator;