@a4ui/core 0.29.0 → 0.30.0

package/src/ui/LikeButton.tsx

@@ -0,0 +1,199 @@
+// LikeButton — a like/favorite/save-later toggle driven by the `icon` prop
+// (heart/star/bookmark) instead of three near-identical components. On
+// becoming pressed the icon fills, morphs to the accent color, springs a
+// scale pop (Motion's `spring`), and bursts a handful of tiny icon copies
+// outward (staggered via `stagger`) before fading. Only `transform`/`opacity`
+// are animated, matching this file's Motion helpers (see ../lib/motion.ts).
+import { Bookmark, Heart, Star, type LucideProps } from 'lucide-solid'
+import type { Component, JSX } from 'solid-js'
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+import { animate, motionReduced, spring, stagger } from '../lib/motion'
+
+/** Which icon a {@link LikeButton} renders — picks the semantic use (like/favorite/save). */
+export type LikeButtonIcon = 'heart' | 'star' | 'bookmark'
+
+const ICONS: Record<LikeButtonIcon, Component<LucideProps>> = {
+  heart: Heart,
+  star: Star,
+  bookmark: Bookmark,
+}
+
+const BURST_COUNT = 5
+const BURST_RADIUS_PX = 18
+const BURST_STAGGER_S = 0.03
+const BURST_DURATION_S = 0.5
+
+interface BurstParticle {
+  id: number
+  angle: number
+}
+
+export interface LikeButtonProps {
+  /** Controlled pressed state. When set, wins over internal state — pair with `onChange`. */
+  pressed?: boolean
+  /** Initial pressed state for uncontrolled use. @default false */
+  defaultPressed?: boolean
+  onChange?: (pressed: boolean) => void
+  /** Which icon to render. @default 'heart' */
+  icon?: LikeButtonIcon
+  /** Count shown next to the icon (e.g. total likes). */
+  count?: number
+  /** Show `count`. @default false */
+  showCount?: boolean
+  /** Class applied to the icon/count when pressed. @default 'text-primary' */
+  activeClass?: string
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Like/favorite/save-later toggle button. One component covers all three via
+ * `icon` ('heart' | 'star' | 'bookmark') rather than three near-identical
+ * toggles. On becoming pressed the icon fills, morphs to `activeClass`,
+ * springs a scale pop, and bursts a handful of tiny icon copies outward —
+ * skipped under reduced motion, which just flips the filled/unfilled state
+ * instantly. Works controlled (`pressed` + `onChange`) or uncontrolled
+ * (`defaultPressed`).
+ *
+ * @example
+ * ```tsx
+ * <LikeButton defaultPressed count={128} showCount aria-label="Like this post" />
+ * ```
+ */
+export function LikeButton(props: LikeButtonProps): JSX.Element {
+  const [internalPressed, setInternalPressed] = createSignal(props.defaultPressed ?? false)
+  const pressed = createMemo(() => props.pressed ?? internalPressed())
+  const Icon = createMemo(() => ICONS[props.icon ?? 'heart'])
+
+  const [particles, setParticles] = createSignal<BurstParticle[]>([])
+  const particleEls = new Map<number, HTMLSpanElement>()
+  let particleId = 0
+  let iconEl: SVGSVGElement | undefined
+  let countEl: HTMLSpanElement | undefined
+  let popControls: ReturnType<typeof animate> | undefined
+  let disposed = false
+
+  onCleanup(() => {
+    disposed = true
+    popControls?.stop()
+  })
+
+  // Fade + slide the count in whenever it changes (not on initial mount), skipped under reduced motion.
+  let hasMountedCount = false
+  createEffect(() => {
+    void props.count
+    if (hasMountedCount && countEl && !motionReduced()) {
+      animate(countEl, { opacity: [0, 1], y: [-6, 0] }, { duration: 0.22, ease: 'easeOut' })
+    }
+    hasMountedCount = true
+  })
+
+  const playPop = (): void => {
+    if (!iconEl) return
+    popControls?.stop()
+    const el = iconEl
+    popControls = animate(el, { scale: 1.3 }, { type: spring, stiffness: 600, damping: 10 })
+    popControls.finished
+      .then(() => {
+        if (disposed) return
+        popControls = animate(el, { scale: 1 }, { type: spring, stiffness: 500, damping: 14 })
+      })
+      .catch(() => {})
+  }
+
+  const spawnBurst = (): void => {
+    const delayFor = stagger(BURST_STAGGER_S)
+    const next: BurstParticle[] = Array.from({ length: BURST_COUNT }, (_, index) => ({
+      id: particleId++,
+      angle: (360 / BURST_COUNT) * index,
+    }))
+    setParticles((current) => [...current, ...next])
+
+    queueMicrotask(() => {
+      if (disposed) return
+      const finished = next.map((particle, index) => {
+        const el = particleEls.get(particle.id)
+        if (!el) return Promise.resolve()
+        const radians = (particle.angle * Math.PI) / 180
+        const dx = Math.cos(radians) * BURST_RADIUS_PX
+        const dy = Math.sin(radians) * BURST_RADIUS_PX
+        const controls = animate(
+          el,
+          {
+            transform: [
+              'translate(-50%, -50%) scale(0.9)',
+              `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px)) scale(0.3)`,
+            ],
+            opacity: [1, 0],
+          },
+          { duration: BURST_DURATION_S, delay: delayFor(index, next.length), ease: 'easeOut' },
+        )
+        return controls.finished
+      })
+
+      Promise.allSettled(finished).then(() => {
+        for (const particle of next) particleEls.delete(particle.id)
+        if (disposed) return
+        setParticles((current) => current.filter((p) => !next.some((n) => n.id === p.id)))
+      })
+    })
+  }
+
+  const handleClick = (): void => {
+    const next = !pressed()
+    if (props.pressed === undefined) setInternalPressed(next)
+    props.onChange?.(next)
+
+    if (!next || motionReduced()) return
+    playPop()
+    spawnBurst()
+  }
+
+  return (
+    <button
+      type="button"
+      aria-pressed={pressed()}
+      aria-label={props['aria-label']}
+      class={cn(
+        'inline-flex items-center gap-1.5 rounded-md text-muted-foreground transition-colors hover:text-foreground',
+        pressed() && (props.activeClass ?? 'text-primary'),
+        props.class,
+      )}
+      onClick={handleClick}
+    >
+      <span class="relative inline-flex h-5 w-5 items-center justify-center">
+        <Dynamic
+          component={Icon()}
+          ref={(el: SVGSVGElement) => {
+            iconEl = el
+          }}
+          class={cn('h-5 w-5 will-change-transform', pressed() && 'fill-current')}
+        />
+        <span class="pointer-events-none absolute inset-0" aria-hidden="true">
+          <For each={particles()}>
+            {(particle) => (
+              <span
+                ref={(el) => particleEls.set(particle.id, el)}
+                class="absolute left-1/2 top-1/2 h-2.5 w-2.5 will-change-transform"
+                style={{ transform: 'translate(-50%, -50%)' }}
+              >
+                <Dynamic
+                  component={Icon()}
+                  class={cn('h-2.5 w-2.5 fill-current', props.activeClass ?? 'text-primary')}
+                />
+              </span>
+            )}
+          </For>
+        </span>
+      </span>
+      <Show when={props.showCount}>
+        <span ref={countEl} class="tabular-nums will-change-transform">
+          {props.count}
+        </span>
+      </Show>
+    </button>
+  )
+}

package/src/ui/MicroButton.tsx

@@ -0,0 +1,205 @@
+// MicroButton — small icon/label button that plays a short, physically-tuned
+// feedback micro-animation on interaction: spin, shake, pulse, ring, sparkle
+// (on click), or a diagonal glare sweep (on hover). Every effect animates only
+// transform/opacity (never layout), and decorative particles spawn then
+// remove themselves — the same one-shot pattern as spawnRipple in Ripple.tsx.
+// No-op (plain static button) under reduced motion.
+import { type JSX, Show, splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animate, motionReduced, stagger } from '../lib/motion'
+
+/** Feedback micro-animation a {@link MicroButton} plays. Defaults to `'ring'`. */
+export type MicroButtonEffect = 'spin' | 'shake' | 'pulse' | 'ring' | 'sparkle' | 'glare'
+
+/** Visual style of a {@link MicroButton}. Defaults to `'solid'`. */
+export type MicroButtonVariant = 'solid' | 'ghost' | 'outline'
+
+const VARIANT_CLASSES: Record<MicroButtonVariant, string> = {
+  solid: 'bg-primary text-primary-foreground',
+  ghost: 'text-foreground hover:bg-muted',
+  outline: 'border border-border text-foreground',
+}
+
+const BASE =
+  'micro-button relative inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
+
+const PARTICLE_BASE = 'pointer-events-none absolute will-change-transform'
+
+export interface MicroButtonProps {
+  children?: JSX.Element
+  /** Feedback micro-animation. `'glare'` plays on hover; the rest play on click. @default 'ring' */
+  effect?: MicroButtonEffect
+  onClick?: (e: MouseEvent) => void
+  /** Visual style. @default 'solid' */
+  variant?: MicroButtonVariant
+  disabled?: boolean
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Small icon/label button that plays a short feedback micro-animation on
+ * interaction — spin, shake, pulse, ring, or sparkle on click, or a diagonal
+ * glare sweep on hover. Every effect animates only `transform`/`opacity`, so
+ * it stays cheap even on low-end devices; decorative particles are spawned
+ * and removed on completion, never left in the DOM. Renders a plain static
+ * `<button>` with no effect under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * <MicroButton effect="sparkle" aria-label="Like">
+ *   <Heart size={16} />
+ * </MicroButton>
+ * ```
+ */
+export function MicroButton(props: MicroButtonProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['children', 'effect', 'onClick', 'variant', 'disabled', 'class'])
+
+  let buttonEl!: HTMLButtonElement
+  let contentEl!: HTMLSpanElement
+  let glareEl: HTMLSpanElement | undefined
+  let spins = 0
+
+  // Every in-flight animation registers a stopper here so onCleanup can halt
+  // it (and any pending particle removal) if the button unmounts mid-effect.
+  const activeStops = new Set<() => void>()
+
+  const track = (stop: () => void): (() => void) => {
+    activeStops.add(stop)
+    return () => activeStops.delete(stop)
+  }
+
+  const trackTransient = (controls: ReturnType<typeof animate>): void => {
+    const untrack = track(() => controls.stop())
+    controls.then(untrack)
+  }
+
+  const spawnParticle = (build: (el: HTMLSpanElement) => void): HTMLSpanElement => {
+    const el = document.createElement('span')
+    el.setAttribute('aria-hidden', 'true')
+    el.className = PARTICLE_BASE
+    build(el)
+    buttonEl.appendChild(el)
+    return el
+  }
+
+  const trackParticle = (el: HTMLSpanElement, controls: ReturnType<typeof animate>): void => {
+    const untrack = track(() => controls.stop())
+    const finish = (): void => {
+      untrack()
+      el.remove()
+    }
+    controls.then(finish)
+  }
+
+  const playSpin = (): void => {
+    spins += 360
+    trackTransient(animate(contentEl, { rotate: spins }, { type: 'spring', stiffness: 180, damping: 14 }))
+  }
+
+  const playShake = (): void => {
+    trackTransient(animate(contentEl, { x: [0, -4, 4, -3, 3, 0] }, { duration: 0.4, ease: 'easeInOut' }))
+  }
+
+  const spawnRing = (delay: number): void => {
+    const el = spawnParticle((e) => {
+      e.classList.add('inset-0', 'rounded-full', 'border-2', 'border-current')
+    })
+    trackParticle(
+      el,
+      animate(el, { scale: [1, 1.8], opacity: [0.6, 0] }, { duration: 0.7, delay, ease: 'easeOut' }),
+    )
+  }
+
+  const playRing = (): void => spawnRing(0)
+
+  const playPulse = (): void => {
+    spawnRing(0)
+    spawnRing(0.15)
+  }
+
+  const playSparkle = (): void => {
+    const count = 6
+    const radius = 20
+    for (let i = 0; i < count; i++) {
+      const angle = (i / count) * Math.PI * 2
+      const dx = Math.cos(angle) * radius
+      const dy = Math.sin(angle) * radius
+      const el = spawnParticle((e) => {
+        e.classList.add('left-1/2', 'top-1/2', 'h-1', 'w-1', 'rounded-full', 'bg-current')
+        e.style.marginLeft = '-2px'
+        e.style.marginTop = '-2px'
+      })
+      trackParticle(
+        el,
+        animate(
+          el,
+          { x: [0, dx], y: [0, dy], rotate: [0, 180], opacity: [1, 0], scale: [1, 0.4] },
+          { duration: 0.55, delay: stagger(0.03)(i, count), ease: 'easeOut' },
+        ),
+      )
+    }
+  }
+
+  const handleClick = (event: MouseEvent): void => {
+    local.onClick?.(event)
+    if (local.disabled || motionReduced()) return
+    switch (local.effect ?? 'ring') {
+      case 'spin':
+        playSpin()
+        break
+      case 'shake':
+        playShake()
+        break
+      case 'pulse':
+        playPulse()
+        break
+      case 'sparkle':
+        playSparkle()
+        break
+      case 'ring':
+        playRing()
+        break
+      // 'glare' plays on hover, not click — see handlePointerEnter.
+    }
+  }
+
+  const handlePointerEnter = (): void => {
+    if ((local.effect ?? 'ring') !== 'glare' || !glareEl || motionReduced()) return
+    trackTransient(
+      animate(glareEl, { x: ['-100%', '250%'], opacity: [0, 1, 0] }, { duration: 0.6, ease: 'easeInOut' }),
+    )
+  }
+
+  return (
+    <button
+      ref={buttonEl}
+      type="button"
+      class={cn(
+        BASE,
+        VARIANT_CLASSES[local.variant ?? 'solid'],
+        (local.effect ?? 'ring') === 'glare' && 'overflow-hidden',
+        local.class,
+      )}
+      disabled={local.disabled}
+      onClick={handleClick}
+      onPointerEnter={handlePointerEnter}
+      {...rest}
+    >
+      <span
+        ref={contentEl}
+        class="relative inline-flex items-center justify-center gap-2 will-change-transform"
+      >
+        {local.children}
+      </span>
+      <Show when={(local.effect ?? 'ring') === 'glare'}>
+        <span
+          ref={glareEl}
+          aria-hidden="true"
+          class="pointer-events-none absolute inset-y-0 left-0 w-1/3 -skew-x-12 bg-gradient-to-r from-transparent via-foreground/25 to-transparent opacity-0 will-change-transform"
+        />
+      </Show>
+    </button>
+  )
+}

package/src/ui/SlideArrowButton.tsx

@@ -0,0 +1,108 @@
+// SlideArrowButton — CTA button where the label slides toward `direction` on
+// hover while an arrow slides in from the opposite edge. Pure CSS
+// (transform + opacity only), so it needs no JS animation engine and gets
+// the reduced-motion guard for free from the global @media block in styles.css.
+import type { JSX, ParentProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { ArrowLeft, ArrowRight } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+
+/** Direction the label/arrow slide toward on hover. Defaults to `'right'`. */
+export type SlideArrowDirection = 'right' | 'left'
+
+/** Visual style of a {@link SlideArrowButton}. Defaults to `'solid'`. */
+export type SlideArrowButtonVariant = 'solid' | 'outline'
+
+const VARIANT_CLASSES: Record<SlideArrowButtonVariant, string> = {
+  solid: 'bg-primary text-primary-foreground hover:bg-primary/90',
+  outline: 'border border-border bg-transparent text-foreground hover:bg-muted',
+}
+
+const BUTTON_BASE =
+  'group relative inline-flex items-center justify-center overflow-hidden rounded-md px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50'
+
+// Both the label and the arrow only ever animate `transform`/`opacity` —
+// compositor-only properties — so this is a plain CSS transition, no JS
+// animation loop and no layout thrashing.
+const TRANSITION = 'transition-transform duration-200 ease-out'
+
+export interface SlideArrowButtonProps extends ParentProps {
+  onClick?: (e: MouseEvent) => void
+  /** Direction the label/arrow slide toward on hover. Defaults to `'right'`. */
+  direction?: SlideArrowDirection
+  /** Custom icon; defaults to `ArrowRight`/`ArrowLeft` per `direction`. */
+  icon?: JSX.Element
+  /** Visual style. Defaults to `'solid'`. */
+  variant?: SlideArrowButtonVariant
+  disabled?: boolean
+  class?: string
+  /** Accessible label, forwarded to the underlying `<button>`. */
+  'aria-label'?: string
+}
+
+/**
+ * CTA button: at rest the label sits centered; on hover it slides toward
+ * `direction` while an arrow slides in from the opposite edge. Pure CSS
+ * transform/opacity transitions — no JS animation engine.
+ *
+ * @example
+ * ```tsx
+ * <SlideArrowButton onClick={() => go()}>Get started</SlideArrowButton>
+ * <SlideArrowButton direction="left" variant="outline">Back</SlideArrowButton>
+ * ```
+ */
+export function SlideArrowButton(props: SlideArrowButtonProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'children',
+    'onClick',
+    'direction',
+    'icon',
+    'variant',
+    'disabled',
+    'class',
+    'aria-label',
+  ])
+
+  const direction = (): SlideArrowDirection => local.direction ?? 'right'
+  const isRight = () => direction() === 'right'
+
+  const icon = (): JSX.Element =>
+    local.icon ??
+    (isRight() ? (
+      <ArrowRight class="h-4 w-4" aria-hidden="true" />
+    ) : (
+      <ArrowLeft class="h-4 w-4" aria-hidden="true" />
+    ))
+
+  // Label slides fully out of the way (100%) in the hover direction, arrow
+  // slides in the same amount from the opposite edge — they swap places.
+  const labelClasses = (): string =>
+    cn(TRANSITION, isRight() ? 'group-hover:-translate-x-full' : 'group-hover:translate-x-full')
+
+  const arrowClasses = (): string =>
+    cn(
+      'absolute inset-0 flex items-center justify-center opacity-0',
+      TRANSITION,
+      'transition-[transform,opacity]',
+      isRight()
+        ? 'translate-x-full group-hover:translate-x-0 group-hover:opacity-100'
+        : '-translate-x-full group-hover:translate-x-0 group-hover:opacity-100',
+    )
+
+  return (
+    <button
+      type="button"
+      disabled={local.disabled}
+      class={cn(BUTTON_BASE, VARIANT_CLASSES[local.variant ?? 'solid'], local.class)}
+      aria-label={local['aria-label']}
+      onClick={(e) => local.onClick?.(e)}
+      {...rest}
+    >
+      <span class={labelClasses()}>{local.children}</span>
+      <Show when={!local.disabled}>
+        <span class={arrowClasses()}>{icon()}</span>
+      </Show>
+    </button>
+  )
+}

package/src/ui/StreamingText.tsx

@@ -2,7 +2,7 @@
 // added tail at `speed` chars/sec (via a rAF loop) rather than snapping
 // straight to the new length, with a blinking caret while more is expected.
 // Built for AI answer UIs where `text` grows incrementally as tokens arrive.
-import { createEffect, createSignal, onCleanup, type JSX } from 'solid-js'
+import { createEffect, createSignal, onCleanup, untrack, type JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
 import { motionReduced } from '../lib/motion'
@@ -48,7 +48,12 @@ export function StreamingText(props: StreamingTextProps): JSX.Element {
   createEffect(() => {
     const text = props.text
     const isAppend = text.startsWith(prevText)
-    const from = isAppend ? revealed() : 0
+    // `untrack`: read the current revealed count WITHOUT making this effect
+    // depend on `revealed` — otherwise the rAF loop's own `setRevealed` would
+    // re-trigger this effect every frame, cancelling and restarting the loop
+    // (a stuttery, "janky" reveal). The effect should only re-run when the
+    // incoming `text`/`streaming`/`speed` change.
+    const from = isAppend ? untrack(revealed) : 0
     prevText = text
 
     stop()