@a4ui/core 0.30.0 → 0.31.1

package/dist/ui/MorphPresets.d.ts

@@ -0,0 +1,126 @@
+import { JSX } from 'solid-js';
+import { IconMorphButtonVariant } from './IconMorphButton';
+export interface CopyButtonProps {
+    /** Text copied to the clipboard when the button is pressed. */
+    value: string;
+    /** Optional label shown next to the icon before copying. */
+    label?: JSX.Element;
+    /** Optional label shown next to the icon once copied. */
+    copiedLabel?: JSX.Element;
+    /** Visual style. Defaults to `'ghost'`. */
+    variant?: IconMorphButtonVariant;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Copy-to-clipboard button that morphs Copy → Check and auto-reverts after
+ * 1.5s.
+ *
+ * @example
+ * ```tsx
+ * <CopyButton value="npm install @a4ui/core" aria-label="Copy install command" />
+ * ```
+ */
+export declare function CopyButton(props: CopyButtonProps): JSX.Element;
+export interface PlayPauseButtonProps {
+    /** Controlled playing state. Omit to let the button manage its own state. */
+    pressed?: boolean;
+    /** Initial playing state when uncontrolled. Defaults to `false`. */
+    defaultPressed?: boolean;
+    /** Fired with the next playing state, controlled or uncontrolled. */
+    onChange?: (pressed: boolean) => void;
+    /** Optional label shown next to the icon while paused. */
+    label?: JSX.Element;
+    /** Optional label shown next to the icon while playing. */
+    activeLabel?: JSX.Element;
+    /** Visual style. Defaults to `'ghost'`. */
+    variant?: IconMorphButtonVariant;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Play/pause toggle button whose icon morphs Play → Pause.
+ *
+ * @example
+ * ```tsx
+ * <PlayPauseButton defaultPressed={false} aria-label="Play" />
+ * ```
+ */
+export declare function PlayPauseButton(props: PlayPauseButtonProps): JSX.Element;
+export interface MuteButtonProps {
+    /** Controlled muted state. Omit to let the button manage its own state. */
+    pressed?: boolean;
+    /** Initial muted state when uncontrolled. Defaults to `false`. */
+    defaultPressed?: boolean;
+    /** Fired with the next muted state, controlled or uncontrolled. */
+    onChange?: (pressed: boolean) => void;
+    /** Optional label shown next to the icon while unmuted. */
+    label?: JSX.Element;
+    /** Optional label shown next to the icon while muted. */
+    activeLabel?: JSX.Element;
+    /** Visual style. Defaults to `'ghost'`. */
+    variant?: IconMorphButtonVariant;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Mute toggle button whose icon morphs Volume2 → VolumeX.
+ *
+ * @example
+ * ```tsx
+ * <MuteButton defaultPressed={false} aria-label="Mute" />
+ * ```
+ */
+export declare function MuteButton(props: MuteButtonProps): JSX.Element;
+export interface LockButtonProps {
+    /** Controlled locked state. Omit to let the button manage its own state. */
+    pressed?: boolean;
+    /** Initial locked state when uncontrolled. Defaults to `false`. */
+    defaultPressed?: boolean;
+    /** Fired with the next locked state, controlled or uncontrolled. */
+    onChange?: (pressed: boolean) => void;
+    /** Optional label shown next to the icon while unlocked. */
+    label?: JSX.Element;
+    /** Optional label shown next to the icon while locked. */
+    activeLabel?: JSX.Element;
+    /** Visual style. Defaults to `'ghost'`. */
+    variant?: IconMorphButtonVariant;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Lock toggle button whose icon morphs Unlock → Lock.
+ *
+ * @example
+ * ```tsx
+ * <LockButton defaultPressed={false} aria-label="Lock" />
+ * ```
+ */
+export declare function LockButton(props: LockButtonProps): JSX.Element;
+export interface ThemeMorphButtonProps {
+    /** Controlled dark-mode state. Omit to let the button manage its own state. */
+    pressed?: boolean;
+    /** Initial dark-mode state when uncontrolled. Defaults to `false`. */
+    defaultPressed?: boolean;
+    /** Fired with the next dark-mode state, controlled or uncontrolled. */
+    onChange?: (pressed: boolean) => void;
+    /** Optional label shown next to the icon in light mode. */
+    label?: JSX.Element;
+    /** Optional label shown next to the icon in dark mode. */
+    activeLabel?: JSX.Element;
+    /** Visual style. Defaults to `'ghost'`. */
+    variant?: IconMorphButtonVariant;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Purely presentational theme toggle whose icon morphs Sun → Moon. Does not
+ * touch the theme system itself — wire `pressed`/`onChange` to your theme
+ * state.
+ *
+ * @example
+ * ```tsx
+ * <ThemeMorphButton pressed={isDark()} onChange={setIsDark} aria-label="Toggle theme" />
+ * ```
+ */
+export declare function ThemeMorphButton(props: ThemeMorphButtonProps): JSX.Element;

package/package.json

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

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.30.0'
+export const A4UI_VERSION = '0.31.1'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -179,6 +179,18 @@ export { FocusBlurGroup, type FocusBlurGroupProps } from './ui/FocusBlurGroup'
 export { CardSpread, type CardSpreadProps, type CardSpreadLayout } from './ui/CardSpread'
 export { Carousel3D, type Carousel3DProps, type Carousel3DVariant } from './ui/Carousel3D'
 export { TimeMachineStack, type TimeMachineStackProps } from './ui/TimeMachineStack'
+export {
+  CopyButton,
+  type CopyButtonProps,
+  PlayPauseButton,
+  type PlayPauseButtonProps,
+  MuteButton,
+  type MuteButtonProps,
+  LockButton,
+  type LockButtonProps,
+  ThemeMorphButton,
+  type ThemeMorphButtonProps,
+} from './ui/MorphPresets'
 
 // Phase 2 — code, search, navigation, master-detail.
 export { CodeTabs, type CodeTabsProps, type CodeTab } from './ui/CodeTabs'

package/src/ui/CardSpread.tsx

@@ -48,10 +48,12 @@ function pseudoRandom(i: number): number {
   return (s - Math.floor(s)) * 2 - 1
 }
 
-function restTransform(i: number): CardTransform {
-  // Tight near-centered stack: a hair of offset/rotation per card so the
-  // pile still reads as separate cards.
-  return { x: i * 1.5, y: -i * 1, rotate: (i % 2 === 0 ? 1 : -1) * 1.5, origin: 'bottom center' }
+function restTransform(i: number, n: number): CardTransform {
+  // Resting deck: a gentle symmetric peek-fan (cards' edges show) so the pile
+  // reads as multiple cards even before it opens, without stealing the reveal.
+  const mid = (n - 1) / 2
+  const d = i - mid
+  return { x: d * 7, y: Math.abs(d) * 2.5, rotate: d * 2.5, origin: 'bottom center' }
 }
 
 function openTransform(layout: CardSpreadLayout, i: number, n: number, spread: number): CardTransform {
@@ -131,7 +133,7 @@ export function CardSpread(props: CardSpreadProps): JSX.Element {
 
     cardRefs.forEach((card, i) => {
       if (!card) return
-      const t = open ? openTransform(layout(), i, n, spread()) : restTransform(i)
+      const t = open ? openTransform(layout(), i, n, spread()) : restTransform(i, n)
       card.style.transformOrigin = t.origin
       card.style.zIndex = String(open ? i : n - i)
 
@@ -174,21 +176,27 @@ export function CardSpread(props: CardSpreadProps): JSX.Element {
     <div
       role="group"
       aria-label={props['aria-label']}
-      class={cn('relative inline-block h-56 w-40', props.class)}
+      class={cn('relative mx-auto h-96 w-full max-w-lg', props.class)}
       onPointerEnter={handleEnter}
       onPointerLeave={handleLeave}
     >
-      <For each={props.items}>
-        {(item, i) => (
-          <div
-            ref={(el) => (cardRefs[i()] = el)}
-            class="absolute inset-x-0 top-0 h-56 w-40 rounded-xl border border-border bg-card text-card-foreground shadow-sm will-change-transform"
-            style={{ transform: transformString(restTransform(i())) }}
-          >
-            {item}
-          </div>
-        )}
-      </For>
+      {/* The cards fan around this fixed, centered anchor while the wider root
+          above stays the (stable) hover zone: a fanned spread reaches far past
+          a single card's box, so anchoring the hit-area to one card made the
+          cards leave it and flicker enter/leave. */}
+      <div class="absolute left-1/2 top-1/2 h-56 w-40 -translate-x-1/2 -translate-y-1/2">
+        <For each={props.items}>
+          {(item, i) => (
+            <div
+              ref={(el) => (cardRefs[i()] = el)}
+              class="absolute inset-0 rounded-xl border border-border bg-card text-card-foreground shadow-sm will-change-transform"
+              style={{ transform: transformString(restTransform(i(), props.items.length)) }}
+            >
+              {item}
+            </div>
+          )}
+        </For>
+      </div>
     </div>
   )
 }

package/src/ui/Carousel3D.tsx

@@ -201,19 +201,31 @@ export function Carousel3D(props: Carousel3DProps): JSX.Element {
 
   // --- pointer drag: horizontal movement past a threshold advances one slide
   // per threshold crossed, so a long drag can page through several slides. --
-  const [dragging, setDragging] = createSignal(false)
+  // Capture is DEFERRED until the pointer actually moves past a small
+  // threshold. Capturing on pointerdown (the old behaviour) retargeted the
+  // pointer to the stage and swallowed the `click` on the chevron buttons and
+  // any interactive slide content. A plain click no longer starts a drag, so
+  // those clicks work again.
   let startX = 0
+  let pointerId: number | null = null
+  let captured = false
+  const CAPTURE_THRESHOLD = 8
   const DRAG_THRESHOLD = 60
 
   const onPointerDown = (e: PointerEvent): void => {
     if (count() < 2) return
     startX = e.clientX
-    setDragging(true)
-    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+    pointerId = e.pointerId
+    captured = false
   }
   const onPointerMove = (e: PointerEvent): void => {
-    if (!dragging()) return
+    if (pointerId === null) return
     const dx = e.clientX - startX
+    if (!captured) {
+      if (Math.abs(dx) < CAPTURE_THRESHOLD) return
+      captured = true
+      ;(e.currentTarget as HTMLElement).setPointerCapture(pointerId)
+    }
     if (dx <= -DRAG_THRESHOLD) {
       next()
       startX = e.clientX
@@ -222,8 +234,16 @@ export function Carousel3D(props: Carousel3DProps): JSX.Element {
       startX = e.clientX
     }
   }
-  const endDrag = (): void => {
-    setDragging(false)
+  const endDrag = (e: PointerEvent): void => {
+    if (pointerId !== null && captured) {
+      try {
+        ;(e.currentTarget as HTMLElement).releasePointerCapture(pointerId)
+      } catch {
+        /* already released */
+      }
+    }
+    pointerId = null
+    captured = false
   }
 
   return (
@@ -266,6 +286,7 @@ export function Carousel3D(props: Carousel3DProps): JSX.Element {
           type="button"
           aria-label="Previous slide"
           disabled={count() === 0 || active() === 0}
+          onPointerDown={(e) => e.stopPropagation()}
           onClick={prev}
           class="absolute left-2 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow transition-opacity hover:opacity-90 disabled:pointer-events-none disabled:opacity-40"
         >
@@ -275,6 +296,7 @@ export function Carousel3D(props: Carousel3DProps): JSX.Element {
           type="button"
           aria-label="Next slide"
           disabled={count() === 0 || active() === count() - 1}
+          onPointerDown={(e) => e.stopPropagation()}
           onClick={next}
           class="absolute right-2 top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-primary text-primary-foreground shadow transition-opacity hover:opacity-90 disabled:pointer-events-none disabled:opacity-40"
         >

package/src/ui/MorphPresets.tsx

@@ -0,0 +1,218 @@
+// MorphPresets — thin, opinionated wrappers over IconMorphButton for common
+// two-state icon toggles (copy, play/pause, mute, lock, theme). Each preset
+// only supplies icons + sensible defaults; the morph animation itself lives
+// in IconMorphButton and is not reimplemented here.
+import type { JSX } from 'solid-js'
+import { Check, Copy, Lock, Moon, Pause, Play, Sun, Unlock, Volume2, VolumeX } from 'lucide-solid'
+
+import { IconMorphButton, type IconMorphButtonVariant } from './IconMorphButton'
+
+export interface CopyButtonProps {
+  /** Text copied to the clipboard when the button is pressed. */
+  value: string
+  /** Optional label shown next to the icon before copying. */
+  label?: JSX.Element
+  /** Optional label shown next to the icon once copied. */
+  copiedLabel?: JSX.Element
+  /** Visual style. Defaults to `'ghost'`. */
+  variant?: IconMorphButtonVariant
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Copy-to-clipboard button that morphs Copy → Check and auto-reverts after
+ * 1.5s.
+ *
+ * @example
+ * ```tsx
+ * <CopyButton value="npm install @a4ui/core" aria-label="Copy install command" />
+ * ```
+ */
+export function CopyButton(props: CopyButtonProps): JSX.Element {
+  return (
+    <IconMorphButton
+      inactive={<Copy size={18} />}
+      active={<Check size={18} />}
+      label={props.label}
+      activeLabel={props.copiedLabel}
+      variant={props.variant}
+      class={props.class}
+      aria-label={props['aria-label']}
+      revertAfter={1500}
+      onChange={(pressed) => {
+        if (pressed) void navigator.clipboard?.writeText(props.value)
+      }}
+    />
+  )
+}
+
+export interface PlayPauseButtonProps {
+  /** Controlled playing state. Omit to let the button manage its own state. */
+  pressed?: boolean
+  /** Initial playing state when uncontrolled. Defaults to `false`. */
+  defaultPressed?: boolean
+  /** Fired with the next playing state, controlled or uncontrolled. */
+  onChange?: (pressed: boolean) => void
+  /** Optional label shown next to the icon while paused. */
+  label?: JSX.Element
+  /** Optional label shown next to the icon while playing. */
+  activeLabel?: JSX.Element
+  /** Visual style. Defaults to `'ghost'`. */
+  variant?: IconMorphButtonVariant
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Play/pause toggle button whose icon morphs Play → Pause.
+ *
+ * @example
+ * ```tsx
+ * <PlayPauseButton defaultPressed={false} aria-label="Play" />
+ * ```
+ */
+export function PlayPauseButton(props: PlayPauseButtonProps): JSX.Element {
+  return (
+    <IconMorphButton
+      inactive={<Play size={18} />}
+      active={<Pause size={18} />}
+      pressed={props.pressed}
+      defaultPressed={props.defaultPressed}
+      onChange={props.onChange}
+      label={props.label}
+      activeLabel={props.activeLabel}
+      variant={props.variant}
+      class={props.class}
+      aria-label={props['aria-label']}
+    />
+  )
+}
+
+export interface MuteButtonProps {
+  /** Controlled muted state. Omit to let the button manage its own state. */
+  pressed?: boolean
+  /** Initial muted state when uncontrolled. Defaults to `false`. */
+  defaultPressed?: boolean
+  /** Fired with the next muted state, controlled or uncontrolled. */
+  onChange?: (pressed: boolean) => void
+  /** Optional label shown next to the icon while unmuted. */
+  label?: JSX.Element
+  /** Optional label shown next to the icon while muted. */
+  activeLabel?: JSX.Element
+  /** Visual style. Defaults to `'ghost'`. */
+  variant?: IconMorphButtonVariant
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Mute toggle button whose icon morphs Volume2 → VolumeX.
+ *
+ * @example
+ * ```tsx
+ * <MuteButton defaultPressed={false} aria-label="Mute" />
+ * ```
+ */
+export function MuteButton(props: MuteButtonProps): JSX.Element {
+  return (
+    <IconMorphButton
+      inactive={<Volume2 size={18} />}
+      active={<VolumeX size={18} />}
+      pressed={props.pressed}
+      defaultPressed={props.defaultPressed}
+      onChange={props.onChange}
+      label={props.label}
+      activeLabel={props.activeLabel}
+      variant={props.variant}
+      class={props.class}
+      aria-label={props['aria-label']}
+    />
+  )
+}
+
+export interface LockButtonProps {
+  /** Controlled locked state. Omit to let the button manage its own state. */
+  pressed?: boolean
+  /** Initial locked state when uncontrolled. Defaults to `false`. */
+  defaultPressed?: boolean
+  /** Fired with the next locked state, controlled or uncontrolled. */
+  onChange?: (pressed: boolean) => void
+  /** Optional label shown next to the icon while unlocked. */
+  label?: JSX.Element
+  /** Optional label shown next to the icon while locked. */
+  activeLabel?: JSX.Element
+  /** Visual style. Defaults to `'ghost'`. */
+  variant?: IconMorphButtonVariant
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Lock toggle button whose icon morphs Unlock → Lock.
+ *
+ * @example
+ * ```tsx
+ * <LockButton defaultPressed={false} aria-label="Lock" />
+ * ```
+ */
+export function LockButton(props: LockButtonProps): JSX.Element {
+  return (
+    <IconMorphButton
+      inactive={<Unlock size={18} />}
+      active={<Lock size={18} />}
+      pressed={props.pressed}
+      defaultPressed={props.defaultPressed}
+      onChange={props.onChange}
+      label={props.label}
+      activeLabel={props.activeLabel}
+      variant={props.variant}
+      class={props.class}
+      aria-label={props['aria-label']}
+    />
+  )
+}
+
+export interface ThemeMorphButtonProps {
+  /** Controlled dark-mode state. Omit to let the button manage its own state. */
+  pressed?: boolean
+  /** Initial dark-mode state when uncontrolled. Defaults to `false`. */
+  defaultPressed?: boolean
+  /** Fired with the next dark-mode state, controlled or uncontrolled. */
+  onChange?: (pressed: boolean) => void
+  /** Optional label shown next to the icon in light mode. */
+  label?: JSX.Element
+  /** Optional label shown next to the icon in dark mode. */
+  activeLabel?: JSX.Element
+  /** Visual style. Defaults to `'ghost'`. */
+  variant?: IconMorphButtonVariant
+  class?: string
+  'aria-label'?: string
+}
+
+/**
+ * Purely presentational theme toggle whose icon morphs Sun → Moon. Does not
+ * touch the theme system itself — wire `pressed`/`onChange` to your theme
+ * state.
+ *
+ * @example
+ * ```tsx
+ * <ThemeMorphButton pressed={isDark()} onChange={setIsDark} aria-label="Toggle theme" />
+ * ```
+ */
+export function ThemeMorphButton(props: ThemeMorphButtonProps): JSX.Element {
+  return (
+    <IconMorphButton
+      inactive={<Sun size={18} />}
+      active={<Moon size={18} />}
+      pressed={props.pressed}
+      defaultPressed={props.defaultPressed}
+      onChange={props.onChange}
+      label={props.label}
+      activeLabel={props.activeLabel}
+      variant={props.variant}
+      class={props.class}
+      aria-label={props['aria-label']}
+    />
+  )
+}