@a4ui/core 0.15.0 → 0.17.0

package/dist/styles.css

@@ -162,6 +162,72 @@ body {
   animation: toast-out 0.18s ease-in;
 }
 
+/* Skeleton shimmer — a light band sweeping across the placeholder (opt-in
+   alternative to the default pulse). The band color is token-driven so it reads
+   on every theme; the sweep is a pure CSS animation (no engine). */
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+.skeleton-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.skeleton-shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, hsl(var(--foreground) / 0.08), transparent);
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+/* Accordion open/close — animate the panel height using Kobalte's measured
+   `--kb-accordion-content-height` var (presence keyed off data-expanded/closed,
+   animationend-driven like Modal). Engine-free. */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-accordion-content-height);
+  }
+}
+@keyframes accordion-up {
+  from {
+    height: var(--kb-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+.accordion-content {
+  overflow: hidden;
+}
+.accordion-content[data-expanded] {
+  animation: accordion-down 0.2s ease-out;
+}
+.accordion-content[data-closed] {
+  animation: accordion-up 0.2s ease-out;
+}
+
+/* List stagger — rows fade/slide in on mount, delayed per index (set inline as
+   `animation-delay`). Opt-in via <List stagger>. */
+@keyframes list-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.list-row-stagger {
+  animation: list-row-in 0.35s both ease-out;
+}
+
 /* Table row enter/exit fade. */
 .row-enter-active,
 .row-exit-active {

package/dist/ui/Badge.d.ts

@@ -4,6 +4,12 @@ export type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
 interface BadgeProps extends ParentProps {
     /** Visual/semantic tone. Defaults to `'neutral'`. */
     tone?: BadgeTone;
+    /**
+     * Show a pinging dot before the label for "live"/"recording"/"online"
+     * states. Tinted with the tone's color (`currentColor`); pure CSS
+     * (`animate-ping`), reduced-motion aware.
+     */
+    pulse?: boolean;
     class?: string;
 }
 /**

package/dist/ui/Button.d.ts

@@ -7,6 +7,12 @@ interface ButtonProps extends ParentProps, Omit<JSX.ButtonHTMLAttributes<HTMLBut
     class?: string;
     /** Defaults to "button" so action buttons inside a form never submit it by accident. */
     type?: 'button' | 'submit' | 'reset';
+    /**
+     * Material-style click ripple from the press position. Engine-free (Web
+     * Animations API, shared with {@link spawnRipple}) and reduced-motion aware —
+     * costs nothing when off.
+     */
+    ripple?: boolean;
 }
 /**
  * Base button primitive: a plain `<button>` with A4ui's variants, focus ring,
@@ -15,6 +21,7 @@ interface ButtonProps extends ParentProps, Omit<JSX.ButtonHTMLAttributes<HTMLBut
  * @example
  * ```tsx
  * <Button variant="outline" onClick={() => save()}>Save</Button>
+ * <Button ripple onClick={() => save()}>Save</Button> // with a click ripple
  * ```
  */
 export declare function Button(props: ButtonProps): JSX.Element;

package/dist/ui/Card.d.ts

@@ -10,15 +10,29 @@ interface CardProps extends DivProps {
      * for glass cards so the look is uniform; pass `glow={false}` to opt out.
      */
     glow?: boolean;
+    /**
+     * 3D tilt toward the cursor on hover — the same primitive as `<TiltCard>`,
+     * baked in ({@link attachTilt}). Engine-free and reduced-motion aware.
+     */
+    tilt?: boolean;
+    /**
+     * Soft radial glow following the cursor inside the card — the same primitive
+     * as `<Spotlight>`, baked in ({@link attachSpotlight}). Engine-free and
+     * reduced-motion aware.
+     */
+    spotlight?: boolean;
 }
 /**
  * Container surface for grouping related content, with an optional frosted
  * "space glass" look. Compose with {@link CardHeader}, {@link CardTitle}, and
  * {@link CardContent}.
  *
+ * `tilt` and `spotlight` bake in the cursor interactions from the Motion
+ * category — no wrapper components needed.
+ *
  * @example
  * ```tsx
- * <Card glass>
+ * <Card glass tilt spotlight>
  *   <CardHeader>
  *     <CardTitle>Usage</CardTitle>
  *   </CardHeader>

package/dist/ui/Carousel.d.ts

@@ -4,6 +4,12 @@ export interface CarouselProps {
     slides: JSX.Element[];
     /** Auto-advance interval in ms. Omit to disable autoplay (also skipped under reduced motion / hover). */
     autoplayMs?: number;
+    /**
+     * Drag/touch to swipe between slides (in addition to arrows, dots, and arrow
+     * keys). The track follows the pointer and snaps on release — pure CSS, no
+     * engine. @default true
+     */
+    swipe?: boolean;
     class?: string;
 }
 /**

package/dist/ui/FloatingActionButton.d.ts

@@ -9,6 +9,12 @@ export interface FloatingActionButtonProps {
     onClick?: () => void;
     /** Screen corner to anchor to. Defaults to `'bottom-right'`. */
     position?: FloatingActionButtonPosition;
+    /**
+     * Material-style click ripple from the press position. Engine-free (Web
+     * Animations API, shared with {@link spawnRipple}) and reduced-motion aware —
+     * costs nothing when off.
+     */
+    ripple?: boolean;
     class?: string;
 }
 /**

package/dist/ui/Image.d.ts

@@ -5,6 +5,12 @@ export interface ImageProps {
     class?: string;
     /** When true, clicking the image opens a zoomable lightbox. @default true */
     preview?: boolean;
+    /**
+     * Reveal the thumbnail with a blur-up: it starts blurred and slightly scaled,
+     * then eases to sharp once the image finishes loading. Pure CSS transition,
+     * no-op under reduced motion. @default false
+     */
+    blurUp?: boolean;
 }
 /**
  * Lazy-loaded content image. Unless `preview` is disabled, the thumbnail is a

package/dist/ui/List.d.ts

@@ -9,6 +9,11 @@ export interface ListItem {
 }
 interface ListProps {
     items: ListItem[];
+    /**
+     * Cascade the rows in on mount — each row fades/slides up staggered by its
+     * index. Pure CSS (`list-row-stagger`), reduced-motion aware. @default false
+     */
+    stagger?: boolean;
     class?: string;
 }
 export type { ListProps };

package/dist/ui/Ripple.d.ts

@@ -7,6 +7,17 @@ export interface RippleProps {
     opacity?: number;
     class?: string;
 }
+/**
+ * Spawns one Material-style ripple inside `container` at the pointer's
+ * position, expanding to cover the container and fading out, then removes
+ * itself. The container must be `position: relative; overflow: hidden`.
+ * Engine-free (Web Animations API); no-op under reduced motion. This is the
+ * primitive behind {@link Ripple} and `<Button ripple>`.
+ */
+export declare function spawnRipple(container: HTMLElement, event: PointerEvent, opts?: {
+    color?: string;
+    opacity?: number;
+}): void;
 /**
  * Wraps `children` in a `position: relative; overflow: hidden` layer that
  * spawns a Material-style ripple — a circle centered on the pointer's down
@@ -15,10 +26,12 @@ export interface RippleProps {
  * itself once its animation finishes. A no-op under reduced motion: children
  * still render, but no ripple ever spawns.
  *
+ * Buttons don't need the wrapper — use `<Button ripple>` instead.
+ *
  * @example
  * ```tsx
  * <Ripple color="white" opacity={0.25}>
- *   <button class="rounded-lg bg-primary px-4 py-2 text-primary-foreground">Save</button>
+ *   <div class="rounded-lg bg-primary px-4 py-2 text-primary-foreground">Save</div>
  * </Ripple>
  * ```
  */

package/dist/ui/Skeleton.d.ts

@@ -2,15 +2,22 @@ import { JSX } from 'solid-js';
 interface SkeletonProps {
     /** Size/shape the placeholder to match the content it stands in for, e.g. `"h-4 w-32 rounded-full"`. */
     class?: string;
+    /**
+     * Use a light band sweeping across the placeholder instead of the default
+     * pulse. Pure CSS (`.skeleton-shimmer`), token-tinted, reduced-motion aware.
+     */
+    shimmer?: boolean;
 }
 /**
- * Pulsing placeholder block for content that is still loading. Plain `div`,
- * no Kobalte primitive — size it via `class` to match the shape of the real
- * content (text line, avatar, card, etc.).
+ * Placeholder block for content that is still loading. Plain `div`, no Kobalte
+ * primitive — size it via `class` to match the shape of the real content (text
+ * line, avatar, card, etc.). Pulses by default; pass `shimmer` for a sweeping
+ * light band instead.
  *
  * @example
  * ```tsx
  * <Skeleton class="h-4 w-48" />
+ * <Skeleton shimmer class="h-4 w-48" /> // sweeping band instead of pulse
  * ```
  */
 export declare function Skeleton(props: SkeletonProps): JSX.Element;

package/dist/ui/Spotlight.d.ts

@@ -7,11 +7,24 @@ export interface SpotlightProps {
     size?: number;
     class?: string;
 }
+/**
+ * Appends a cursor-following radial-glow overlay inside `el` (which must be
+ * `position: relative; overflow: hidden`) and binds the pointer handlers.
+ * Returns a cleanup that unbinds and removes the overlay. Engine-free; no-op
+ * under reduced motion. This is the primitive behind {@link Spotlight} and
+ * `<Card spotlight>`.
+ */
+export declare function attachSpotlight(el: HTMLElement, opts?: {
+    color?: string;
+    size?: number;
+}): () => void;
 /**
  * Wraps `children` in a `position: relative; overflow: hidden` layer with a
  * radial glow that tracks the cursor, fading in on pointerenter and out on
- * pointerleave. Children render above the glow. Respects
- * `prefers-reduced-motion` (renders children with no glow at all).
+ * pointerleave. Children render below the (pointer-transparent) glow.
+ * Respects `prefers-reduced-motion` (renders children with no glow at all).
+ *
+ * A4ui's own `Card` can do this without the wrapper — `<Card spotlight>`.
  *
  * @example
  * ```tsx

package/dist/ui/TiltCard.d.ts

@@ -5,12 +5,25 @@ export interface TiltCardProps {
     max?: number;
     class?: string;
 }
+/**
+ * Binds a cursor-following 3D tilt: pointer moves over `listenEl` rotate
+ * `animEl` toward the cursor (clamped to `max` degrees) with a slight lift,
+ * easing back flat on pointerleave. Returns a cleanup that unbinds and clears
+ * the transform. Engine-free (CSS transitions); no-op under reduced motion.
+ * This is the primitive behind {@link TiltCard} and `<Card tilt>` — pass the
+ * same element twice to tilt the element the pointer is over.
+ */
+export declare function attachTilt(listenEl: HTMLElement, animEl: HTMLElement, opts?: {
+    max?: number;
+}): () => void;
 /**
  * Wraps `children` in a card that tilts in 3D toward the cursor: as the
  * pointer moves within its bounds, the card rotates on both axes (clamped to
- * `max` degrees) and lifts slightly, springing back flat on pointerleave.
+ * `max` degrees) and lifts slightly, easing back flat on pointerleave.
  * Respects `prefers-reduced-motion` (renders static).
  *
+ * A4ui's own `Card` can do this without the wrapper — `<Card tilt>`.
+ *
  * @example
  * ```tsx
  * <TiltCard max={12}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/src/commerce/ProductCard.tsx

@@ -37,6 +37,16 @@ export interface ProductCardProps {
   currency?: string
   locale?: string
   onAddToCart?: () => void
+  /**
+   * 3D hover tilt toward the cursor — forwarded to the underlying {@link Card}
+   * ({@link attachTilt}). Engine-free and reduced-motion aware.
+   */
+  tilt?: boolean
+  /**
+   * Cursor-following radial glow inside the card — forwarded to the underlying
+   * {@link Card} ({@link attachSpotlight}). Engine-free and reduced-motion aware.
+   */
+  spotlight?: boolean
   class?: string
 }
 
@@ -72,7 +82,13 @@ function inferTone(badge: string | undefined, tone: ProductBadgeTone | undefined
  */
 export function ProductCard(props: ProductCardProps): JSX.Element {
   return (
-    <Card glass glow class={cn('flex h-full flex-col overflow-hidden p-4', props.class)}>
+    <Card
+      glass
+      glow
+      tilt={props.tilt}
+      spotlight={props.spotlight}
+      class={cn('flex h-full flex-col overflow-hidden p-4', props.class)}
+    >
       <div class="relative aspect-square overflow-hidden rounded-lg bg-muted">
         <img src={props.image} alt={props.title} loading="lazy" class="h-full w-full object-cover" />
         <Show when={props.badge}>

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.15.0'
+export const A4UI_VERSION = '0.17.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -150,10 +150,10 @@ export { MultiStateBadge, type MultiStateBadgeProps, type BadgeState } from './u
 export { NowPlaying, type NowPlayingProps } from './ui/NowPlaying'
 export { Expandable, type ExpandableProps } from './ui/Expandable'
 export { Typewriter, type TypewriterProps } from './ui/Typewriter'
-export { Ripple, type RippleProps } from './ui/Ripple'
+export { Ripple, spawnRipple, type RippleProps } from './ui/Ripple'
 export { Magnetic, type MagneticProps } from './ui/Magnetic'
-export { TiltCard, type TiltCardProps } from './ui/TiltCard'
-export { Spotlight, type SpotlightProps } from './ui/Spotlight'
+export { TiltCard, attachTilt, type TiltCardProps } from './ui/TiltCard'
+export { Spotlight, attachSpotlight, type SpotlightProps } from './ui/Spotlight'
 export { ScrollProgress, type ScrollProgressProps } from './ui/ScrollProgress'
 export { GradientText, type GradientTextProps } from './ui/GradientText'
 export { flyToCart, type FlyToCartOptions } from './lib/flyToCart'

package/src/ui/Accordion.tsx

@@ -56,7 +56,9 @@ export function Accordion(props: AccordionProps): JSX.Element {
                 </svg>
               </KAccordion.Trigger>
             </KAccordion.Header>
-            <KAccordion.Content class="pb-3 text-sm text-muted-foreground">{item.content}</KAccordion.Content>
+            <KAccordion.Content class="accordion-content text-sm text-muted-foreground">
+              <div class="pb-3">{item.content}</div>
+            </KAccordion.Content>
           </KAccordion.Item>
         )}
       </For>

package/src/ui/Badge.tsx

@@ -2,7 +2,7 @@
 // (flowBadgeProps, statusBadgeTone, priorityBadgeTone, …) stay in the consuming
 // app: they encode business vocabulary (income/expense, project priority, user
 // roles), not design-system concerns.
-import { type JSX, type ParentProps, splitProps } from 'solid-js'
+import { type JSX, type ParentProps, Show, splitProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
 
@@ -23,6 +23,12 @@ const BADGE_BASE =
 interface BadgeProps extends ParentProps {
   /** Visual/semantic tone. Defaults to `'neutral'`. */
   tone?: BadgeTone
+  /**
+   * Show a pinging dot before the label for "live"/"recording"/"online"
+   * states. Tinted with the tone's color (`currentColor`); pure CSS
+   * (`animate-ping`), reduced-motion aware.
+   */
+  pulse?: boolean
   class?: string
 }
 
@@ -37,9 +43,15 @@ interface BadgeProps extends ParentProps {
  * ```
  */
 export function Badge(props: BadgeProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['tone', 'class', 'children'])
+  const [local, rest] = splitProps(props, ['tone', 'class', 'children', 'pulse'])
   return (
     <span class={cn(BADGE_BASE, TONE_CLASSES[local.tone ?? 'neutral'], local.class)} {...rest}>
+      <Show when={local.pulse}>
+        <span class="relative flex h-1.5 w-1.5" aria-hidden="true">
+          <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75" />
+          <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
+        </span>
+      </Show>
       {local.children}
     </span>
   )

package/src/ui/Button.tsx

@@ -2,6 +2,7 @@ import type { JSX, ParentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { spawnRipple } from './Ripple'
 
 /** Visual style of a {@link Button}. Defaults to `'primary'`. */
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost'
@@ -24,6 +25,12 @@ interface ButtonProps extends ParentProps, Omit<JSX.ButtonHTMLAttributes<HTMLBut
   class?: string
   /** Defaults to "button" so action buttons inside a form never submit it by accident. */
   type?: 'button' | 'submit' | 'reset'
+  /**
+   * Material-style click ripple from the press position. Engine-free (Web
+   * Animations API, shared with {@link spawnRipple}) and reduced-motion aware —
+   * costs nothing when off.
+   */
+  ripple?: boolean
 }
 
 /**
@@ -33,14 +40,29 @@ interface ButtonProps extends ParentProps, Omit<JSX.ButtonHTMLAttributes<HTMLBut
  * @example
  * ```tsx
  * <Button variant="outline" onClick={() => save()}>Save</Button>
+ * <Button ripple onClick={() => save()}>Save</Button> // with a click ripple
  * ```
  */
 export function Button(props: ButtonProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['variant', 'class', 'type', 'children'])
+  const [local, rest] = splitProps(props, ['variant', 'class', 'type', 'children', 'ripple', 'onPointerDown'])
+
+  const handlePointerDown: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {
+    if (local.ripple) spawnRipple(event.currentTarget, event, { opacity: 0.35 })
+    const user = local.onPointerDown
+    if (typeof user === 'function') user(event)
+    else if (user) user[0](user[1], event)
+  }
+
   return (
     <button
       type={local.type ?? 'button'}
-      class={cn(BUTTON_BASE, VARIANT_CLASSES[local.variant ?? 'primary'], local.class)}
+      class={cn(
+        BUTTON_BASE,
+        VARIANT_CLASSES[local.variant ?? 'primary'],
+        local.ripple && 'relative overflow-hidden',
+        local.class,
+      )}
+      onPointerDown={handlePointerDown}
       {...rest}
     >
       {local.children}

package/src/ui/Card.tsx

@@ -1,8 +1,10 @@
 // Card + 4 sub-parts (no CardFooter/CardDescription — add if needed).
 import type { JSX, ParentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { onCleanup, onMount, splitProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { attachSpotlight } from './Spotlight'
+import { attachTilt } from './TiltCard'
 
 interface DivProps extends ParentProps {
   class?: string
@@ -16,6 +18,17 @@ interface CardProps extends DivProps {
    * for glass cards so the look is uniform; pass `glow={false}` to opt out.
    */
   glow?: boolean
+  /**
+   * 3D tilt toward the cursor on hover — the same primitive as `<TiltCard>`,
+   * baked in ({@link attachTilt}). Engine-free and reduced-motion aware.
+   */
+  tilt?: boolean
+  /**
+   * Soft radial glow following the cursor inside the card — the same primitive
+   * as `<Spotlight>`, baked in ({@link attachSpotlight}). Engine-free and
+   * reduced-motion aware.
+   */
+  spotlight?: boolean
 }
 
 /**
@@ -23,9 +36,12 @@ interface CardProps extends DivProps {
  * "space glass" look. Compose with {@link CardHeader}, {@link CardTitle}, and
  * {@link CardContent}.
  *
+ * `tilt` and `spotlight` bake in the cursor interactions from the Motion
+ * category — no wrapper components needed.
+ *
  * @example
  * ```tsx
- * <Card glass>
+ * <Card glass tilt spotlight>
  *   <CardHeader>
  *     <CardTitle>Usage</CardTitle>
  *   </CardHeader>
@@ -34,16 +50,29 @@ interface CardProps extends DivProps {
  * ```
  */
 export function Card(props: CardProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['class', 'children', 'glass', 'glow'])
+  const [local, rest] = splitProps(props, ['class', 'children', 'glass', 'glow', 'tilt', 'spotlight'])
   // Glow defaults to the card's glass state when not explicitly set.
   const showGlow = () => (local.glow ?? local.glass) === true
+
+  let el: HTMLDivElement | undefined
+  onMount(() => {
+    const cleanups = [
+      local.tilt && el ? attachTilt(el, el) : null,
+      local.spotlight && el ? attachSpotlight(el) : null,
+    ].filter((f): f is () => void => f !== null)
+    onCleanup(() => cleanups.forEach((f) => f()))
+  })
+
   return (
     <div
+      ref={el}
       class={cn(
         local.glass
           ? 'card rounded-xl text-card-foreground'
           : 'rounded-xl border border-border bg-card text-card-foreground shadow-sm',
         showGlow() && 'glow-edge',
+        local.spotlight && 'relative overflow-hidden',
+        local.tilt && 'will-change-transform',
         local.class,
       )}
       {...rest}

package/src/ui/Carousel.tsx

@@ -13,6 +13,12 @@ export interface CarouselProps {
   slides: JSX.Element[]
   /** Auto-advance interval in ms. Omit to disable autoplay (also skipped under reduced motion / hover). */
   autoplayMs?: number
+  /**
+   * Drag/touch to swipe between slides (in addition to arrows, dots, and arrow
+   * keys). The track follows the pointer and snaps on release — pure CSS, no
+   * engine. @default true
+   */
+  swipe?: boolean
   class?: string
 }
 
@@ -52,6 +58,34 @@ export function Carousel(props: CarouselProps): JSX.Element {
     }
   }
 
+  // --- drag/touch swipe (engine-free; the track follows the pointer, then the
+  // CSS transition snaps to the resolved slide on release) -------------------
+  const swipeOn = (): boolean => props.swipe !== false
+  let viewport: HTMLDivElement | undefined
+  const [dragging, setDragging] = createSignal(false)
+  const [dragPx, setDragPx] = createSignal(0)
+  let startX = 0
+
+  const onPointerDown = (e: PointerEvent): void => {
+    if (!swipeOn() || count() < 2) return
+    startX = e.clientX
+    setDragging(true)
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+  const onPointerMove = (e: PointerEvent): void => {
+    if (dragging()) setDragPx(e.clientX - startX)
+  }
+  const endDrag = (): void => {
+    if (!dragging()) return
+    const width = viewport?.clientWidth ?? 1
+    const dx = dragPx()
+    const threshold = Math.max(48, width * 0.2)
+    if (dx <= -threshold) next()
+    else if (dx >= threshold) prev()
+    setDragPx(0)
+    setDragging(false)
+  }
+
   // --- autoplay (paused on hover, skipped under reduced motion) --------------
   const [paused, setPaused] = createSignal(false)
   onMount(() => {
@@ -75,10 +109,21 @@ export function Carousel(props: CarouselProps): JSX.Element {
       onPointerEnter={() => setPaused(true)}
       onPointerLeave={() => setPaused(false)}
     >
-      <div class="relative overflow-hidden rounded-xl border border-border bg-card text-foreground">
+      <div
+        ref={viewport}
+        class="relative overflow-hidden rounded-xl border border-border bg-card text-foreground"
+      >
         <div
-          class="flex transition-transform duration-500 ease-out"
-          style={{ transform: `translateX(-${index() * 100}%)` }}
+          class={cn(
+            'flex',
+            swipeOn() && count() > 1 && 'touch-pan-y cursor-grab active:cursor-grabbing',
+            !dragging() && 'transition-transform duration-500 ease-out',
+          )}
+          style={{ transform: `translateX(calc(-${index() * 100}% + ${dragPx()}px))` }}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={endDrag}
+          onPointerCancel={endDrag}
         >
           <For each={props.slides}>{(slide) => <div class="w-full shrink-0">{slide}</div>}</For>
         </div>

package/src/ui/Collapse.tsx

@@ -1,7 +1,6 @@
 // Single controlled collapsible region with a toggle header.
 import { ChevronDown } from 'lucide-solid'
 import type { JSX, ParentProps } from 'solid-js'
-import { Show } from 'solid-js'
 import { cn } from '../lib/cn'
 
 interface CollapseProps extends ParentProps {
@@ -40,9 +39,19 @@ export function Collapse(props: CollapseProps): JSX.Element {
           class={cn('h-4 w-4 shrink-0 transition-transform duration-200', props.open && 'rotate-180')}
         />
       </button>
-      <Show when={props.open}>
-        <div class="px-3 py-2 text-sm text-muted-foreground">{props.children}</div>
-      </Show>
+      {/* grid-rows 0fr->1fr animates the panel height with pure CSS (no measuring,
+          no engine); the inner div is `overflow-hidden` so the collapsed content
+          is clipped, not just transparent. */}
+      <div
+        class={cn(
+          'grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none',
+          props.open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        )}
+      >
+        <div class="overflow-hidden">
+          <div class="px-3 py-2 text-sm text-muted-foreground">{props.children}</div>
+        </div>
+      </div>
     </div>
   )
 }