@heyramzi/ui 7.0.0 → 8.0.0

package/src/ai/composer/Composer.svelte

@@ -1,111 +0,0 @@
-<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

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

package/src/animations/accordion.css

@@ -1,58 +0,0 @@
-/* Accordion expand — transitions.dev 21.
-   Height animates on grid-template-rows 0fr -> 1fr, so no JS measures a
-   height and a panel of any size collapses cleanly. Padding belongs on
-   `-inner`: on the 0fr track it leaves a residual strip and the panel
-   never fully closes. The chevron flips rather than morphing its `d`,
-   because CSS path interpolation is Chromium-only. */
-:root {
-  --acc-expand: var(--duration-fast, 250ms);
-  --acc-collapse: var(--duration-fast, 250ms);
-  --acc-chevron: var(--duration-fast, 250ms);
-  --acc-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-}
-
-.t-acc-panel {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
-}
-.t-acc[data-open="true"] .t-acc-panel {
-  grid-template-rows: 1fr;
-  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
-}
-.t-acc-panel-inner {
-  overflow: hidden;
-  opacity: 0;
-  filter: blur(2px);
-  transition:
-    opacity var(--acc-collapse) var(--acc-ease),
-    filter var(--acc-collapse) var(--acc-ease);
-}
-.t-acc[data-open="true"] .t-acc-panel-inner {
-  opacity: 1;
-  filter: blur(0);
-  transition:
-    opacity var(--acc-expand) var(--acc-ease),
-    filter var(--acc-expand) var(--acc-ease);
-}
-
-.t-acc-chevron {
-  display: inline-flex;
-  transform: scaleY(1);
-  transform-origin: center;
-  transition: transform var(--acc-chevron) var(--acc-ease);
-}
-.t-acc-chevron path {
-  vector-effect: non-scaling-stroke;
-}
-.t-acc[data-open="true"] .t-acc-chevron {
-  transform: scaleY(-1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-acc-panel,
-  .t-acc-panel-inner,
-  .t-acc-chevron {
-    transition: none !important;
-  }
-}

package/src/animations/icon-swap.css

@@ -1,43 +0,0 @@
-/* Transitions.dev — Icon swap */
-/* Source: https://github.com/Jakubantalik/transitions.dev */
-
-:root {
-  --icon-swap-dur: 200ms;
-  --icon-swap-blur: var(--blur-small, 2px);
-  --icon-swap-start-scale: 0.85;
-  --icon-swap-ease: var(--ease-in-out, ease-in-out);
-}
-
-.t-icon-swap {
-  position: relative;
-  display: inline-grid;
-}
-
-.t-icon-swap .t-icon {
-  grid-area: 1 / 1;
-  transition:
-    opacity var(--icon-swap-dur) var(--icon-swap-ease),
-    filter var(--icon-swap-dur) var(--icon-swap-ease),
-    transform var(--icon-swap-dur) var(--icon-swap-ease);
-  will-change: opacity, filter, transform;
-}
-
-.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
-.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
-  opacity: 1;
-  filter: blur(0);
-  transform: scale(1);
-}
-
-.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
-.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
-  opacity: 0;
-  filter: blur(var(--icon-swap-blur));
-  transform: scale(var(--icon-swap-start-scale));
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-icon-swap .t-icon {
-    transition: none !important;
-  }
-}

package/src/animations/notification-badge.css

@@ -1,81 +0,0 @@
-/* Transitions.dev — Notification badge */
-/* Source: https://github.com/Jakubantalik/transitions.dev */
-
-/*
-  Usage:
-    Place .t-badge inside your trigger (bell icon, button, etc.).
-    The trigger must be position: relative so .t-badge can anchor to it.
-
-    <button class="your-trigger" style="position: relative">
-      <span class="t-badge" data-open="false">
-        <span class="t-badge-dot">1</span>
-      </span>
-    </button>
-
-  State: toggle data-open="true" / "false" on .t-badge.
-  Only the badge slides + pops, the trigger itself stays put.
-*/
-
-:root {
-  --badge-slide-dur: 260ms;
-  --badge-pop-dur: var(--duration-very-slow, 500ms);
-  --badge-pop-close-dur: 180ms;
-  --badge-fade-dur: var(--duration-slow, 400ms);
-  --badge-fade-close-dur: 180ms;
-  --badge-blur: var(--blur-small, 2px);
-  --badge-offset-x: -8.2px;
-  --badge-offset-y: 12.4px;
-  --badge-slide-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --badge-pop-ease: var(--ease-smooth-out);
-  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-@keyframes t-badge-slide-in {
-  from {
-    transform: translate(var(--badge-offset-x), var(--badge-offset-y));
-  }
-  to {
-    transform: translate(0, 0);
-  }
-}
-
-.t-badge {
-  position: absolute;
-  top: -6px;
-  right: -8px;
-  pointer-events: none;
-  will-change: transform;
-}
-.t-badge[data-open="true"] {
-  animation: t-badge-slide-in var(--badge-slide-dur) var(--badge-slide-ease);
-}
-
-.t-badge-dot {
-  display: block;
-  transform-origin: center;
-  transform: scale(1);
-  opacity: 1;
-  filter: blur(0);
-  transition:
-    transform var(--badge-pop-dur) var(--badge-pop-ease),
-    opacity var(--badge-fade-dur) var(--badge-pop-ease),
-    filter var(--badge-pop-dur) var(--badge-pop-ease);
-  will-change: transform, opacity, filter;
-}
-.t-badge[data-open="false"] .t-badge-dot {
-  transform: scale(0);
-  opacity: 0;
-  filter: blur(var(--badge-blur));
-  transition:
-    transform var(--badge-pop-close-dur) var(--badge-close-ease),
-    opacity var(--badge-fade-close-dur) var(--badge-close-ease),
-    filter var(--badge-pop-close-dur) var(--badge-close-ease);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-badge,
-  .t-badge-dot {
-    animation: none !important;
-    transition: none !important;
-  }
-}

package/src/animations/panel.css

@@ -1,86 +0,0 @@
-/* Transitions.dev — Side panel */
-/* Source: https://github.com/Jakubantalik/transitions.dev */
-
-:root {
-  --panel-open-dur: var(--duration-slow, 400ms);
-  --panel-close-dur: var(--duration-medium, 350ms);
-  --panel-translate-y: calc(187px * 0.5);
-  --panel-blur: var(--blur-small, 2px);
-  --panel-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-}
-
-.t-panel-slide {
-  transform: translateY(var(--panel-translate-y));
-  opacity: 0;
-  filter: blur(var(--panel-blur));
-  pointer-events: none;
-  transition:
-    transform var(--panel-close-dur) var(--panel-ease),
-    opacity var(--panel-close-dur) var(--panel-ease),
-    filter var(--panel-close-dur) var(--panel-ease);
-  will-change: transform, opacity, filter;
-}
-
-.t-panel-slide[data-open="true"] {
-  transform: translateY(0);
-  opacity: 1;
-  filter: blur(0);
-  pointer-events: auto;
-  transition:
-    transform var(--panel-open-dur) var(--panel-ease),
-    opacity var(--panel-open-dur) var(--panel-ease),
-    filter var(--panel-open-dur) var(--panel-ease);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-panel-slide {
-    transition: none !important;
-  }
-}
-
-:root {
-  --sheet-open-dur: 300ms;
-  --sheet-close-dur: 250ms;
-  --sheet-translate: 100%;
-  --sheet-ease: cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.t-sheet {
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    transform var(--sheet-close-dur) var(--sheet-ease),
-    opacity var(--sheet-close-dur) var(--sheet-ease);
-  will-change: transform, opacity;
-}
-
-.t-sheet[data-side="right"] {
-  transform: translateX(var(--sheet-translate));
-}
-
-.t-sheet[data-side="left"] {
-  transform: translateX(calc(-1 * var(--sheet-translate)));
-}
-
-.t-sheet[data-side="top"] {
-  transform: translateY(calc(-1 * var(--sheet-translate)));
-}
-
-.t-sheet[data-side="bottom"] {
-  transform: translateY(var(--sheet-translate));
-}
-
-.t-sheet[data-state="open"] {
-  transform: translate(0, 0);
-  opacity: 1;
-  pointer-events: auto;
-  transition:
-    transform var(--sheet-open-dur) var(--sheet-ease),
-    opacity var(--sheet-open-dur) var(--sheet-ease);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-sheet {
-    transition: none !important;
-  }
-}

package/src/animations/reasoning-stream.css

@@ -1,49 +0,0 @@
-/* Reasoning stream — transitions.dev 29.
-   A card that clips a tall transcript and steps it upward while a model thinks.
-   JS moves the scroll --reason-lines lines every --reason-hold and clones the
-   text once, so the offset can wrap by one copy's height mid-hold and the loop
-   never shows a seam. The edge fades are a mask on the viewport, not gradients
-   painted over the text, so the card background can be anything. */
-:root {
-  --reason-hold: 840ms;
-  --reason-step: var(--duration-very-slow, 500ms);
-  --reason-lines: 2;
-  --reason-fade: 28px;
-  --reason-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-}
-
-.t-reason {
-  position: relative;
-  overflow: hidden;
-}
-.t-reason-viewport {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  -webkit-mask-image: linear-gradient(
-    transparent 0,
-    black var(--reason-fade),
-    black calc(100% - var(--reason-fade)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    transparent 0,
-    black var(--reason-fade),
-    black calc(100% - var(--reason-fade)),
-    transparent 100%
-  );
-}
-.t-reason-scroll {
-  position: absolute;
-  left: 0;
-  right: 0;
-  transform: translateY(0);
-  will-change: transform;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-reason-scroll {
-    transition: none !important;
-    transform: none !important;
-  }
-}

package/src/animations/skeleton-reveal.css

@@ -1,97 +0,0 @@
-/* Transitions.dev — Skeleton loader and reveal */
-/* Source: https://github.com/Jakubantalik/transitions.dev */
-
-/*
-  Usage:
-      <div class="t-skel" data-state="loading">
-        <div class="t-skel-skeleton is-pulsing">…</div>
-        <div class="t-skel-content">…</div>
-      </div>
-
-  State:
-    Mount with .is-pulsing on the skeleton so it pulses
-    --pulse-count times. When data arrives, add .is-revealed to
-    .t-skel. To replay without animating the reverse, add
-    .is-resetting, remove .is-revealed, force a reflow, then
-    drop .is-resetting.
-*/
-
-:root {
-  --pulse-dur: 1000ms;
-  --pulse-count: 1;
-  --pulse-min: 0.5;
-  --reveal-dur: var(--duration-slow, 400ms);
-  --reveal-blur: var(--blur-small, 2px);
-  --reveal-ease: var(--ease-in-out, ease-in-out);
-}
-
-/* The wrap stacks two layers on the same coordinates. The
-   skeleton owns the cold pulse + the fade-out side of the
-   reveal; the content owns the fade-in side. They share the
-   same duration / ease so the swap reads as one motion. */
-.t-skel {
-  position: relative;
-}
-.t-skel-skeleton,
-.t-skel-content {
-  position: absolute;
-  inset: 0;
-}
-
-.t-skel-skeleton {
-  z-index: 1;
-  opacity: 1;
-  filter: blur(0);
-  transition:
-    opacity var(--reveal-dur) var(--reveal-ease),
-    filter var(--reveal-dur) var(--reveal-ease);
-}
-.t-skel-content {
-  z-index: 2;
-  opacity: 0;
-  filter: blur(var(--reveal-blur));
-  transition:
-    opacity var(--reveal-dur) var(--reveal-ease),
-    filter var(--reveal-dur) var(--reveal-ease);
-}
-.t-skel.is-revealed .t-skel-skeleton {
-  opacity: 0;
-  filter: blur(var(--reveal-blur));
-}
-.t-skel.is-revealed .t-skel-content {
-  opacity: 1;
-  filter: blur(0);
-}
-/* Snap-back when replaying: kill transitions so the reverse
-   (revealed → skeleton) is instant. Drop .is-resetting after a
-   forced reflow and the next reveal animates again. */
-.t-skel.is-resetting .t-skel-skeleton,
-.t-skel.is-resetting .t-skel-content {
-  transition: none !important;
-}
-
-/* Pulse: place the animation on the bar/avatar children, not
-   on the skeleton itself, so the skeleton's opacity / filter
-   stay free for the cross-fade transition above. */
-.t-skel-skeleton.is-pulsing > * {
-  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
-}
-@keyframes t-skel-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: var(--pulse-min);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-skel-skeleton,
-  .t-skel-content {
-    transition: none !important;
-  }
-  .t-skel-skeleton.is-pulsing > * {
-    animation: none !important;
-  }
-}

package/src/animations/streaming-text.css

@@ -1,31 +0,0 @@
-/* Streaming text — transitions.dev 30.
-   JS wraps each word in a `.t-stream-w` and adds `.is-in` word by word every
-   --stream-gap, so each word resolves out of a small blur instead of appearing.
-   To replay: wipe every span with transition: none, force one reflow, restore
-   the transition, then release the words again. */
-:root {
-  --stream-gap: 60ms;
-  --stream-fade: var(--duration-medium, 350ms);
-  --stream-blur: 1px;
-  --stream-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-}
-
-.t-stream-w {
-  opacity: 0;
-  filter: blur(var(--stream-blur));
-  transition:
-    opacity var(--stream-fade) var(--stream-ease),
-    filter var(--stream-fade) var(--stream-ease);
-}
-.t-stream-w.is-in {
-  opacity: 1;
-  filter: blur(0);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-stream-w {
-    transition: none !important;
-    filter: none !important;
-    opacity: 1 !important;
-  }
-}

package/src/animations/tabs-sliding.css

@@ -1,83 +0,0 @@
-/* Transitions.dev — Tabs sliding */
-/* Source: https://github.com/Jakubantalik/transitions.dev */
-
-/*
-  Usage:
-      <div class="t-tabs" role="tablist">
-        <span class="t-tabs-pill" aria-hidden="true"></span>
-        <button class="t-tab" role="tab" aria-selected="true">Plan</button>
-        <button class="t-tab" role="tab" aria-selected="false">Debug</button>
-      </div>
-
-  Wire-up:
-    On click, flip aria-selected on each tab and write the active
-    tab's offsetLeft / offsetWidth onto the pill. On first paint
-    and resize, write the same values WITHOUT a transition so the
-    pill snaps to position before any animation can run.
-*/
-
-:root {
-  --tabs-dur: var(--duration-fast, 250ms);
-  --tabs-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --tabs-text-muted: rgba(15, 15, 15, 0.8);
-  --tabs-text-active: #0f0f0f;
-  --tabs-bar-bg: #f1f1f1;
-  --tabs-pill-bg: #ffffff;
-}
-
-/* The bar is just a flex container with padding for the pill
-   to sit inside. Tabs sit on z-index: 1, the pill on z-index: 0,
-   so labels read above the pill background. */
-.t-tabs {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 3px;
-  border-radius: 48px;
-  background: var(--tabs-bar-bg);
-}
-.t-tab {
-  position: relative;
-  appearance: none;
-  border: 0;
-  background: transparent;
-  height: 30px;
-  padding: 4px 12px;
-  color: var(--tabs-text-muted);
-  cursor: pointer;
-  border-radius: 48px;
-  z-index: 1;
-  transition: color var(--tabs-dur) var(--tabs-ease);
-}
-.t-tab:not([aria-selected="true"]):hover,
-.t-tab[aria-selected="true"] {
-  color: var(--tabs-text-active);
-}
-
-/* The pill: width + transform are written inline by JS so the
-   transition tweens between the previous and next measured
-   positions. */
-.t-tabs-pill {
-  position: absolute;
-  top: 3px;
-  left: 0;
-  height: 30px;
-  width: 0;
-  background: var(--tabs-pill-bg);
-  border-radius: 48px;
-  transform: translateX(0);
-  transition:
-    transform var(--tabs-dur) var(--tabs-ease),
-    width var(--tabs-dur) var(--tabs-ease);
-  will-change: transform, width;
-  z-index: 0;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-tabs-pill,
-  .t-tab {
-    transition: none !important;
-  }
-}