@heyramzi/ui 6.1.0 → 8.0.0

package/src/ai/conversation/stick-to-bottom-context.svelte.ts

@@ -1,131 +0,0 @@
-import { setContext, getContext } from "svelte";
-
-const STICK_TO_BOTTOM_CONTEXT_KEY = Symbol("stick-to-bottom-context");
-
-const SCROLL_THRESHOLD_PX = 200;
-
-export class StickToBottomContext {
-  #element: HTMLElement | null = $state(null);
-  #isAtBottom = $state(true);
-  #userHasScrolled = $state(false);
-  #resizeObserver: ResizeObserver | null = null;
-  #mutationObserver: MutationObserver | null = null;
-  #intersectionObserver: IntersectionObserver | null = null;
-  #sentinel: HTMLElement | null = null;
-
-  isAtBottom = $derived(this.#isAtBottom);
-
-  setElement(element: HTMLElement) {
-    this.#cleanup();
-    this.#element = element;
-    if (element) this.#setupObservers();
-  }
-
-  scrollToBottom = (behavior: ScrollBehavior = "smooth") => {
-    if (!this.#element) return;
-    this.#userHasScrolled = false;
-    this.#element.scrollTo({ top: this.#element.scrollHeight, behavior });
-  };
-
-  destroy() {
-    this.#cleanup();
-    this.#element = null;
-  }
-
-  #handleScroll = () => {
-    if (!this.#element) return;
-    const { scrollTop, scrollHeight, clientHeight } = this.#element;
-    const isAtBottom = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD_PX;
-    this.#isAtBottom = isAtBottom;
-    if (!isAtBottom) {
-      this.#userHasScrolled = true;
-    } else if (this.#userHasScrolled) {
-      this.#userHasScrolled = false;
-    }
-  };
-
-  #setupObservers() {
-    if (!this.#element) return;
-
-    this.#sentinel = document.createElement("div");
-    this.#sentinel.style.height = "1px";
-    this.#sentinel.style.width = "100%";
-    this.#sentinel.style.pointerEvents = "none";
-    this.#sentinel.style.opacity = "0";
-    this.#sentinel.setAttribute("data-stick-to-bottom-sentinel", "");
-    this.#element.appendChild(this.#sentinel);
-
-    this.#intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (entry?.isIntersecting) {
-          this.#isAtBottom = true;
-          this.#userHasScrolled = false;
-        }
-      },
-      { threshold: 0, root: this.#element },
-    );
-    this.#intersectionObserver.observe(this.#sentinel);
-
-    this.#element.addEventListener("scroll", this.#handleScroll, { passive: true });
-
-    this.#resizeObserver = new ResizeObserver(() => {
-      this.#checkPosition();
-      if (this.#isAtBottom && !this.#userHasScrolled) {
-        this.scrollToBottom("auto");
-      }
-    });
-    this.#resizeObserver.observe(this.#element);
-
-    this.#mutationObserver = new MutationObserver(() => {
-      requestAnimationFrame(() => {
-        const shouldAutoScroll = this.#isAtBottom && !this.#userHasScrolled;
-        this.#checkPosition();
-        if (shouldAutoScroll) this.scrollToBottom("smooth");
-      });
-    });
-    this.#mutationObserver.observe(this.#element, {
-      childList: true,
-      subtree: true,
-      characterData: true,
-    });
-
-    this.#checkPosition();
-  }
-
-  #checkPosition() {
-    if (!this.#element) return;
-    const { scrollTop, scrollHeight, clientHeight } = this.#element;
-    this.#isAtBottom = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD_PX;
-  }
-
-  #cleanup() {
-    this.#resizeObserver?.disconnect();
-    this.#mutationObserver?.disconnect();
-    this.#intersectionObserver?.disconnect();
-    if (this.#element) {
-      this.#element.removeEventListener("scroll", this.#handleScroll);
-    }
-    if (this.#sentinel && this.#element?.contains(this.#sentinel)) {
-      this.#element.removeChild(this.#sentinel);
-    }
-    this.#resizeObserver = null;
-    this.#mutationObserver = null;
-    this.#intersectionObserver = null;
-    this.#sentinel = null;
-  }
-}
-
-export function setStickToBottomContext(): StickToBottomContext {
-  const context = new StickToBottomContext();
-  setContext(STICK_TO_BOTTOM_CONTEXT_KEY, context);
-  return context;
-}
-
-export function getStickToBottomContext(): StickToBottomContext {
-  const context = getContext<StickToBottomContext>(STICK_TO_BOTTOM_CONTEXT_KEY);
-  if (!context) {
-    throw new Error("Conversation parts must be used inside a <Conversation>.");
-  }
-  return context;
-}

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;
-  }
-}