@heyramzi/ui 0.0.0-stage → 6.1.0

package/src/ai/composer/Composer.css

@@ -0,0 +1,108 @@
+.chat-composer {
+  border-top: 1px solid color-mix(in srgb, var(--border, rgba(0, 0, 0, 0.1)) 40%, transparent);
+  padding: 0.625rem 0.75rem;
+}
+
+.chat-composer-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.375rem;
+}
+
+.chat-composer-input {
+  /* WHY: grows with content; min/max bounds can be widened via `inputClass`. */
+  field-sizing: content;
+  max-height: 6rem;
+  flex: 1;
+  resize: none;
+  border: 0;
+  border-radius: 1rem;
+  background: color-mix(in srgb, var(--muted, rgba(0, 0, 0, 0.06)) 40%, transparent);
+  padding: 0.5rem 0.875rem;
+  font-size: 0.875rem;
+  color: inherit;
+  transition: background-color 120ms ease;
+}
+
+.chat-composer-input::placeholder {
+  color: var(--muted-foreground, rgba(0, 0, 0, 0.45));
+}
+
+.chat-composer-input:focus {
+  outline: none;
+  background: color-mix(in srgb, var(--muted, rgba(0, 0, 0, 0.06)) 60%, transparent);
+  /* WHY: a soft ring in the conversation's accent, which is per-surface. */
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--chat-accent, var(--primary, #6647f0)) 28%, transparent);
+}
+
+.chat-composer-input:disabled {
+  opacity: 0.4;
+}
+
+.chat-composer-send {
+  display: flex;
+  height: 2.25rem;
+  width: 2.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--chat-accent, var(--primary, #6647f0));
+  color: var(--chat-accent-foreground, #fff);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition:
+    transform 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.chat-composer-send:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+}
+
+.chat-composer-send:active:not(:disabled) {
+  transform: translateY(0) scale(0.95);
+}
+
+.chat-composer-send:disabled {
+  cursor: not-allowed;
+  opacity: 0.2;
+  box-shadow: none;
+}
+
+.chat-composer-icon {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+.chat-composer-spin {
+  animation: chat-composer-spin 800ms linear infinite;
+}
+
+@keyframes chat-composer-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.chat-composer-error {
+  margin-top: 0.25rem;
+  padding: 0 0.25rem;
+  font-size: 0.75rem;
+  color: var(--destructive, #dc2626);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-composer-send {
+    transition: background-color 150ms ease;
+  }
+  .chat-composer-send:hover:not(:disabled) {
+    transform: none;
+  }
+  .chat-composer-spin {
+    animation: none;
+  }
+}

package/src/ai/composer/Composer.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ComposerProps {
+		value: string;
+		class?: string;
+		/** Extra classes for the textarea (e.g. a taller min/max height). */
+		inputClass?: string;
+		placeholder?: string;
+		/** Accent color for the send button and focus ring. Falls back to `--primary`. */
+		accent?: string;
+		sending?: boolean;
+		disabled?: boolean;
+		error?: string | null;
+		sendLabel?: string;
+		/**
+		 * Whether the message can be sent. When omitted, falls back to
+		 * "has non-empty text".
+		 */
+		canSend?: boolean;
+		onSubmit: () => void;
+		inputRef?: HTMLTextAreaElement | null;
+		/** Rendered left of the textarea (e.g. an attach button). */
+		leading?: Snippet;
+		/** Rendered above the input row (e.g. a reply-to banner). */
+		header?: Snippet;
+		/** Replaces the default spinner shown while sending. */
+		busy?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import "./Composer.css";
+	import { cn } from "@heyramzi/utils";
+	import { fade } from "svelte/transition";
+	import PaperPlaneRight from "phosphor-svelte/lib/PaperPlaneRight";
+	import Spinner from "phosphor-svelte/lib/Spinner";
+
+	let {
+		value = $bindable(),
+		class: className,
+		inputClass,
+		placeholder = "Write a message...",
+		accent,
+		sending = false,
+		disabled = false,
+		error = null,
+		sendLabel = "Send message",
+		canSend,
+		onSubmit,
+		inputRef = $bindable(null),
+		leading,
+		header,
+		busy,
+	}: ComposerProps = $props();
+
+	// When canSend is not supplied, fall back to "has non-empty text".
+	const submittable = $derived(canSend ?? value.trim().length > 0);
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			onSubmit();
+		}
+	}
+</script>
+
+<!-- WHY: visuals are scoped CSS so the composer renders without the consumer's
+     Tailwind generating arbitrary classes; theme hooks come from CSS vars. -->
+<div class={cn("chat-composer", className)} style:--chat-accent={accent}>
+	{@render header?.()}
+
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			onSubmit();
+		}}
+		class="chat-composer-row"
+	>
+		{@render leading?.()}
+
+		<textarea
+			bind:this={inputRef}
+			bind:value
+			onkeydown={handleKeydown}
+			{placeholder}
+			disabled={disabled || sending}
+			rows={1}
+			class={cn("chat-composer-input", inputClass)}
+		></textarea>
+
+		<button
+			type="submit"
+			disabled={disabled || sending || !submittable}
+			class="chat-composer-send"
+			aria-label={sendLabel}
+		>
+			{#if sending && busy}
+				{@render busy()}
+			{:else if sending}
+				<Spinner class="chat-composer-icon chat-composer-spin" />
+			{:else}
+				<PaperPlaneRight class="chat-composer-icon" />
+			{/if}
+		</button>
+	</form>
+
+	{#if error}
+		<p class="chat-composer-error" in:fade={{ duration: 150 }}>{error}</p>
+	{/if}
+</div>

package/src/ai/composer/index.ts

@@ -0,0 +1,10 @@
+import Composer from "./Composer.svelte";
+
+import type { ComposerProps } from "./Composer.svelte";
+
+export {
+  Composer,
+  type ComposerProps,
+  //
+  Composer as Root,
+};

package/src/ai/confirmation/Confirmation.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { ConfirmationState } from "./confirmation-context.svelte.js";
+
+	export interface ConfirmationProps extends HTMLAttributes<HTMLElement> {
+		kind: ConfirmationState;
+		executing?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { setConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let {
+		kind,
+		executing = false,
+		class: className,
+		children,
+		...rest
+	}: ConfirmationProps = $props();
+
+	// WHY: setContext runs once on mount but the value is referenced reactively via the proxy Svelte sets up on objects passed to setContext.
+
+	// State changes rerun any $derived in child components.
+	const ctx = $state({ kind, executing });
+	$effect(() => {
+		ctx.kind = kind;
+		ctx.executing = executing;
+	});
+	setConfirmationContext(ctx);
+</script>
+
+{#if kind !== "idle"}
+	{@const isResolved = kind === "accepted" || kind === "rejected" || kind === "failed"}
+	<section
+		class={cn(
+			"flex flex-col gap-2 rounded-lg border p-3",
+			"border-[color:var(--border,rgba(0,0,0,0.1))] bg-[color:var(--card,white)] shadow-sm",
+			className,
+		)}
+		aria-label="Confirmation"
+		aria-busy={executing ? "true" : undefined}
+		role={isResolved ? "status" : undefined}
+		aria-live={isResolved ? "polite" : undefined}
+		data-state={kind}
+		{...rest}
+	>
+		{@render children?.()}
+	</section>
+{/if}

package/src/ai/confirmation/ConfirmationAccepted.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ConfirmationAcceptedProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let { children }: ConfirmationAcceptedProps = $props();
+
+	const ctx = getConfirmationContext();
+</script>
+
+{#if ctx.kind === "accepted"}
+	<div
+		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/src/ai/confirmation/ConfirmationAction.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import type { ButtonProps } from "../../shadcn/button/index.js";
+
+	export interface ConfirmationActionProps extends ButtonProps {
+		busyLabel?: string;
+		busyWhen?: "always" | "default" | "never";
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { Button } from "../../shadcn/button/index.js";
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let {
+		class: className,
+		variant = "default",
+		size = "sm",
+		disabled,
+		children,
+		busyLabel,
+		busyWhen = "default",
+		...rest
+	}: ConfirmationActionProps = $props();
+
+	const ctx = getConfirmationContext();
+	// WHY: by default the primary action shows the busy spinner during execute,
+	// while the cancel/secondary action stays clickable until disabled. Consumers
+	// can override per-button with busyWhen="always"/"never".
+	const showBusy = $derived(
+		busyWhen === "always"
+			? ctx.executing
+			: busyWhen === "never"
+				? false
+				: ctx.executing && variant === "default",
+	);
+	const isDisabled = $derived(Boolean(disabled) || ctx.executing);
+</script>
+
+<Button
+	{...rest}
+	{variant}
+	{size}
+	type="button"
+	disabled={isDisabled}
+	class={cn("h-8 px-3 text-sm", className)}
+>
+	{#if showBusy && busyLabel}
+		{busyLabel}
+	{:else}
+		{@render children?.()}
+	{/if}
+</Button>

package/src/ai/confirmation/ConfirmationActions.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface ConfirmationActionsProps extends HTMLAttributes<HTMLDivElement> {
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let { class: className, children, ...rest }: ConfirmationActionsProps = $props();
+
+	const ctx = getConfirmationContext();
+</script>
+
+{#if ctx.kind === "requested"}
+	<div class={cn("mt-1 flex items-center gap-2", className)} {...rest}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/ai/confirmation/ConfirmationFailed.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ConfirmationFailedProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let { children }: ConfirmationFailedProps = $props();
+
+	const ctx = getConfirmationContext();
+</script>
+
+{#if ctx.kind === "failed"}
+	<div
+		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/src/ai/confirmation/ConfirmationRejected.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ConfirmationRejectedProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let { children }: ConfirmationRejectedProps = $props();
+
+	const ctx = getConfirmationContext();
+</script>
+
+{#if ctx.kind === "rejected"}
+	<div
+		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/src/ai/confirmation/ConfirmationRequest.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+
+	export interface ConfirmationRequestProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { getConfirmationContext } from "./confirmation-context.svelte.js";
+
+	let { children }: ConfirmationRequestProps = $props();
+
+	const ctx = getConfirmationContext();
+</script>
+
+{#if ctx.kind === "requested"}
+	<!-- WHY: the wrapper mirrors the parent section's stack so the state swap can
+       animate as one block without changing the children's layout. -->
+	<div
+		class="flex flex-col gap-2 animate-in fade-in slide-in-from-top-1 duration-300 motion-reduce:animate-none"
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/src/ai/confirmation/ConfirmationTitle.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface ConfirmationTitleProps extends HTMLAttributes<HTMLParagraphElement> {
+		class?: string;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+
+	let { class: className, children, ...rest }: ConfirmationTitleProps = $props();
+</script>
+
+<p
+	class={cn(
+		"text-[11px] font-medium uppercase tracking-[0.16em] text-[color:var(--muted-foreground,inherit)]",
+		className,
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</p>

package/src/ai/confirmation/confirmation-context.svelte.ts

@@ -0,0 +1,22 @@
+import { getContext, setContext } from "svelte";
+
+const CONFIRMATION_CONTEXT_KEY = Symbol("confirmation-context");
+
+export type ConfirmationState = "idle" | "requested" | "accepted" | "rejected" | "failed";
+
+export interface ConfirmationContextValue {
+  kind: ConfirmationState;
+  executing: boolean;
+}
+
+export function setConfirmationContext(value: ConfirmationContextValue) {
+  setContext(CONFIRMATION_CONTEXT_KEY, value);
+}
+
+export function getConfirmationContext(): ConfirmationContextValue {
+  const context = getContext<ConfirmationContextValue>(CONFIRMATION_CONTEXT_KEY);
+  if (!context) {
+    throw new Error("Confirmation parts must be used inside a <Confirmation>.");
+  }
+  return context;
+}

package/src/ai/confirmation/index.ts

@@ -0,0 +1,50 @@
+import Confirmation from "./Confirmation.svelte";
+import ConfirmationTitle from "./ConfirmationTitle.svelte";
+import ConfirmationRequest from "./ConfirmationRequest.svelte";
+import ConfirmationAccepted from "./ConfirmationAccepted.svelte";
+import ConfirmationRejected from "./ConfirmationRejected.svelte";
+import ConfirmationFailed from "./ConfirmationFailed.svelte";
+import ConfirmationActions from "./ConfirmationActions.svelte";
+import ConfirmationAction from "./ConfirmationAction.svelte";
+
+import type { ConfirmationProps } from "./Confirmation.svelte";
+import type { ConfirmationTitleProps } from "./ConfirmationTitle.svelte";
+import type { ConfirmationRequestProps } from "./ConfirmationRequest.svelte";
+import type { ConfirmationAcceptedProps } from "./ConfirmationAccepted.svelte";
+import type { ConfirmationRejectedProps } from "./ConfirmationRejected.svelte";
+import type { ConfirmationFailedProps } from "./ConfirmationFailed.svelte";
+import type { ConfirmationActionsProps } from "./ConfirmationActions.svelte";
+import type { ConfirmationActionProps } from "./ConfirmationAction.svelte";
+
+export type {
+  ConfirmationContextValue,
+  ConfirmationState,
+} from "./confirmation-context.svelte.js";
+
+export {
+  Confirmation,
+  ConfirmationTitle,
+  ConfirmationRequest,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationFailed,
+  ConfirmationActions,
+  ConfirmationAction,
+  type ConfirmationProps,
+  type ConfirmationTitleProps,
+  type ConfirmationRequestProps,
+  type ConfirmationAcceptedProps,
+  type ConfirmationRejectedProps,
+  type ConfirmationFailedProps,
+  type ConfirmationActionsProps,
+  type ConfirmationActionProps,
+  //
+  Confirmation as Root,
+  ConfirmationTitle as Title,
+  ConfirmationRequest as Request,
+  ConfirmationAccepted as Accepted,
+  ConfirmationRejected as Rejected,
+  ConfirmationFailed as Failed,
+  ConfirmationActions as Actions,
+  ConfirmationAction as Action,
+};

package/src/ai/conversation/Conversation.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface ConversationProps extends HTMLAttributes<HTMLDivElement> {
+		children?: Snippet;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { setStickToBottomContext } from "./stick-to-bottom-context.svelte.js";
+
+	let { class: className, children, ...rest }: ConversationProps = $props();
+
+	setStickToBottomContext();
+</script>
+
+<div
+	class={cn("relative flex h-full flex-col overflow-hidden", className)}
+	role="log"
+	aria-live="polite"
+	aria-atomic="false"
+	{...rest}
+>
+	{@render children?.()}
+</div>

package/src/ai/conversation/ConversationContent.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface ConversationContentProps extends HTMLAttributes<HTMLDivElement> {
+		children?: Snippet;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { onDestroy } from "svelte";
+	import { getStickToBottomContext } from "./stick-to-bottom-context.svelte.js";
+
+	let { class: className, children, ...rest }: ConversationContentProps = $props();
+
+	const context = getStickToBottomContext();
+	let element = $state<HTMLDivElement | null>(null);
+
+	$effect(() => {
+		if (element) {
+			context.setElement(element);
+			context.scrollToBottom("smooth");
+		}
+	});
+
+	onDestroy(() => {
+		context.destroy();
+	});
+</script>
+
+<div bind:this={element} class={cn("flex-1 overflow-y-auto", className)} {...rest}>
+	{@render children?.()}
+</div>

package/src/ai/conversation/ConversationEmptyState.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface ConversationEmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+		title?: string;
+		description?: string;
+		icon?: Snippet;
+		children?: Snippet;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		class: className,
+		title,
+		description,
+		icon,
+		children,
+		...rest
+	}: ConversationEmptyStateProps = $props();
+</script>
+
+<div
+	class={cn("flex size-full flex-col items-center justify-center gap-3 p-6 text-center", className)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if icon}
+			<div class="text-[color:var(--muted-foreground,inherit)]">
+				{@render icon()}
+			</div>
+		{/if}
+		<div class="space-y-1">
+			{#if title}<h3 class="text-sm font-medium">{title}</h3>{/if}
+			{#if description}
+				<p class="text-[color:var(--muted-foreground,inherit)] text-sm">{description}</p>
+			{/if}
+		</div>
+	{/if}
+</div>