@a4ui/core 0.33.0 → 0.34.0

package/src/ui/Kanban.tsx

@@ -0,0 +1,250 @@
+// Kanban board: columns of draggable cards, reorderable within a column and
+// movable across columns. Pointer-events based drag (no HTML5 drag/drop),
+// the same grip-handle + floating-clone idiom as Sortable.tsx, extended to
+// track which column the pointer is currently over so cards can cross
+// container boundaries. No transition/animation is applied to the drag
+// itself (same as Sortable), so there's nothing to gate on reduced motion —
+// drops are instant either way.
+import { createEffect, createSignal, For, Show, type JSX } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import { GripVertical } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+import { Badge } from './Badge'
+import { Card } from './Card'
+
+/** A single card on a {@link Kanban} board. */
+export interface KanbanCard {
+  /** Stable unique id (used for drag tracking + list keying). */
+  id: string
+  /** Card body — usually a title/label. */
+  title: JSX.Element
+  /** Optional trailing badge (e.g. priority, assignee initials). */
+  badge?: JSX.Element
+}
+
+/** A column of a {@link Kanban} board. */
+export interface KanbanColumn {
+  /** Stable unique id. */
+  id: string
+  /** Column heading. */
+  title: string
+  /** Cards in the column, top to bottom. */
+  cards: KanbanCard[]
+  /** Optional WIP limit — the count badge switches to a warning tone past it. */
+  limit?: number
+}
+
+export interface KanbanProps {
+  /** Columns, in display order left to right. */
+  columns: KanbanColumn[]
+  /** Called with the full new columns array after any drag (reorder or move). */
+  onChange?: (columns: KanbanColumn[]) => void
+  class?: string
+}
+
+interface Drag {
+  cardId: string
+  card: KanbanCard
+  fromColumnId: string
+  currentColumnId: string
+  y: number
+  x: number
+  offsetY: number
+  offsetX: number
+  height: number
+  width: number
+}
+
+/**
+ * Horizontal Kanban board: glass column panels holding vertical lists of
+ * draggable cards. Drag a card by its grip handle to reorder it within a
+ * column or drop it into another column — a dashed placeholder marks the
+ * drop slot and a floating clone follows the pointer, the same pointer-events
+ * idiom as {@link Sortable} extended to track which column's list the
+ * pointer is currently over. Works controlled (pass `columns` sourced from
+ * your own state + `onChange` to write it back) or uncontrolled (pass
+ * `columns` once and just read the final layout from `onChange`).
+ *
+ * @example
+ * ```tsx
+ * const [columns, setColumns] = createSignal<KanbanColumn[]>([
+ *   { id: 'todo', title: 'To do', cards: [{ id: '1', title: 'Write spec' }] },
+ *   { id: 'doing', title: 'Doing', cards: [], limit: 2 },
+ *   { id: 'done', title: 'Done', cards: [] },
+ * ])
+ * <Kanban columns={columns()} onChange={setColumns} />
+ * ```
+ */
+export function Kanban(props: KanbanProps): JSX.Element {
+  // eslint-disable-next-line solid/reactivity -- seed once; a createEffect below keeps it in sync
+  const [local, setLocal] = createSignal<KanbanColumn[]>(props.columns)
+  const [drag, setDrag] = createSignal<Drag | null>(null)
+  const listRefs: Record<string, HTMLDivElement | undefined> = {}
+
+  createEffect(() => {
+    const next = props.columns
+    if (!drag()) setLocal(next)
+  })
+
+  const moveCard = (cardId: string, targetColumnId: string, targetIndex: number) => {
+    setLocal((cur) => {
+      const next = cur.map((col) => ({ ...col, cards: col.cards.slice() }))
+      const fromCol = next.find((col) => col.cards.some((card) => card.id === cardId))
+      const toCol = next.find((col) => col.id === targetColumnId)
+      if (!fromCol || !toCol) return cur
+      const fromIndex = fromCol.cards.findIndex((card) => card.id === cardId)
+      const [moved] = fromCol.cards.splice(fromIndex, 1)
+      toCol.cards.splice(Math.min(targetIndex, toCol.cards.length), 0, moved)
+      return next
+    })
+  }
+
+  const onDragMove = (e: PointerEvent) => {
+    const d = drag()
+    if (!d) return
+
+    // Which column's list is the pointer over horizontally?
+    let targetColumnId = d.currentColumnId
+    for (const [colId, el] of Object.entries(listRefs)) {
+      if (!el) continue
+      const r = el.getBoundingClientRect()
+      if (e.clientX >= r.left && e.clientX <= r.right) {
+        targetColumnId = colId
+        break
+      }
+    }
+
+    // Where in that column's (other) cards does the pointer sit vertically?
+    const listEl = listRefs[targetColumnId]
+    const rows = listEl
+      ? Array.from(listEl.querySelectorAll<HTMLElement>('[data-kanban-card]')).filter(
+          (row) => row.dataset.kanbanCard !== d.cardId,
+        )
+      : []
+    let targetIndex = rows.length
+    for (let i = 0; i < rows.length; i++) {
+      const r = rows[i].getBoundingClientRect()
+      if (e.clientY < r.top + r.height / 2) {
+        targetIndex = i
+        break
+      }
+    }
+
+    setDrag({ ...d, y: e.clientY, x: e.clientX, currentColumnId: targetColumnId })
+    moveCard(d.cardId, targetColumnId, targetIndex)
+  }
+
+  const onDragStart = (e: PointerEvent, card: KanbanCard, columnId: string) => {
+    e.preventDefault()
+    const row = (e.currentTarget as HTMLElement).closest<HTMLElement>('[data-kanban-card]')
+    if (!row) return
+    const r = row.getBoundingClientRect()
+    setDrag({
+      cardId: card.id,
+      card,
+      fromColumnId: columnId,
+      currentColumnId: columnId,
+      y: e.clientY,
+      x: e.clientX,
+      offsetY: e.clientY - r.top,
+      offsetX: e.clientX - r.left,
+      height: r.height,
+      width: r.width,
+    })
+
+    const move = (ev: PointerEvent) => onDragMove(ev)
+    const up = () => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      const had = drag() !== null
+      setDrag(null)
+      if (had) props.onChange?.(local())
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+  }
+
+  return (
+    <div class={cn('flex gap-4 overflow-x-auto pb-2', drag() && 'select-none', props.class)}>
+      <For each={local()}>
+        {(column) => {
+          const count = () => column.cards.length
+          const overLimit = () => column.limit !== undefined && count() > column.limit
+          return (
+            <Card glass class="flex w-72 shrink-0 flex-col">
+              <div class="flex items-center justify-between gap-2 border-b border-border p-3">
+                <h3 class="truncate font-semibold text-foreground">{column.title}</h3>
+                <Badge tone={overLimit() ? 'warning' : 'neutral'}>
+                  {column.limit !== undefined ? `${count()}/${column.limit}` : `${count()}`}
+                </Badge>
+              </div>
+              <div
+                ref={(el) => (listRefs[column.id] = el)}
+                class="flex min-h-[60px] flex-1 flex-col gap-2 overflow-y-auto p-3"
+              >
+                <For each={column.cards}>
+                  {(card) => {
+                    const isDragged = () => drag()?.cardId === card.id
+                    return (
+                      <Show
+                        when={!isDragged()}
+                        fallback={
+                          <div
+                            data-kanban-card={card.id}
+                            class="rounded-lg border-2 border-dashed border-primary/40 bg-primary/5"
+                            style={{ height: `${drag()?.height ?? 0}px` }}
+                          />
+                        }
+                      >
+                        <div
+                          data-kanban-card={card.id}
+                          tabIndex={0}
+                          class="flex items-center gap-2 rounded-lg border border-border bg-card p-2 text-card-foreground"
+                        >
+                          <button
+                            type="button"
+                            onPointerDown={(e) => onDragStart(e, card, column.id)}
+                            style={{ 'touch-action': 'none' }}
+                            class="shrink-0 cursor-grab text-muted-foreground active:cursor-grabbing"
+                            aria-label="Drag to move card"
+                          >
+                            <GripVertical class="h-4 w-4" />
+                          </button>
+                          <div class="min-w-0 flex-1">{card.title}</div>
+                          <Show when={card.badge}>{card.badge}</Show>
+                        </div>
+                      </Show>
+                    )
+                  }}
+                </For>
+              </div>
+            </Card>
+          )
+        }}
+      </For>
+      <Show when={drag()}>
+        {(d) => (
+          <Portal>
+            <div
+              class="fixed flex items-center gap-2 rounded-lg border border-border bg-card p-2 text-card-foreground shadow-2xl"
+              style={{
+                left: `${d().x - d().offsetX}px`,
+                top: `${d().y - d().offsetY}px`,
+                width: `${d().width}px`,
+                'pointer-events': 'none',
+                'z-index': 70,
+              }}
+            >
+              <span class="shrink-0 text-muted-foreground">
+                <GripVertical class="h-4 w-4" />
+              </span>
+              <div class="min-w-0 flex-1">{d().card.title}</div>
+              <Show when={d().card.badge}>{d().card.badge}</Show>
+            </div>
+          </Portal>
+        )}
+      </Show>
+    </div>
+  )
+}

package/src/ui/Lamp.tsx

@@ -0,0 +1,88 @@
+// Lamp — a hero/section backdrop: a spotlight beam fanning down from the top
+// center (two symmetric blurred gradient cones + a bright thin line), with
+// `children` sitting in the illuminated area below. Same "self-contained
+// backdrop" idiom as Aurora/SpaceBackground (dark base, token-tinted glow,
+// motionReduced()-aware), just scoped to one hero/section instead of the
+// whole page.
+import { onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animate, motionReduced } from '../lib/motion'
+
+export interface LampProps {
+  children?: JSX.Element
+  class?: string
+}
+
+/**
+ * Hero/section backdrop: a spotlight beam fanning down from the top center —
+ * two symmetric blurred gradient cones (`--primary` / `--accent`) plus a
+ * bright thin source line — over a dark base, with `children` centered in
+ * the illuminated area below. Grows/brightens in on mount via Motion
+ * (opacity + scale); static under {@link motionReduced}. Self-contained
+ * (`relative overflow-hidden`); size it with `class` (e.g. `min-h-[28rem]`).
+ *
+ * @example
+ * ```tsx
+ * <Lamp class="min-h-[28rem]">
+ *   <h1 class="text-4xl font-semibold text-foreground">Build in the light</h1>
+ *   <p class="mt-4 text-muted-foreground">A hero backdrop with a spotlight glow.</p>
+ * </Lamp>
+ * ```
+ */
+export function Lamp(props: LampProps): JSX.Element {
+  let beamEl: HTMLDivElement | undefined
+
+  onMount(() => {
+    if (motionReduced() || !beamEl) return
+    animate(beamEl, { opacity: [0, 1], scale: [0.85, 1] }, { duration: 0.9, ease: 'easeOut' })
+  })
+
+  return (
+    <div
+      class={cn(
+        'relative flex min-h-[24rem] w-full flex-col items-center overflow-hidden bg-background',
+        props.class,
+      )}
+    >
+      <div
+        ref={beamEl}
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-0"
+        style={motionReduced() ? undefined : { opacity: 0, 'transform-origin': 'top center' }}
+      >
+        {/* Left cone: apex at top-center, fanning down-left. */}
+        <div
+          class="absolute left-1/2 top-0 h-72 w-72 -translate-x-full blur-2xl"
+          style={{
+            background: 'linear-gradient(115deg, hsl(var(--primary) / 0.75), transparent 70%)',
+            'clip-path': 'polygon(100% 0%, 0% 100%, 100% 100%)',
+          }}
+        />
+        {/* Right cone: mirror of the left, same apex. */}
+        <div
+          class="absolute left-1/2 top-0 h-72 w-72 blur-2xl"
+          style={{
+            background: 'linear-gradient(245deg, hsl(var(--accent) / 0.75), transparent 70%)',
+            'clip-path': 'polygon(0% 0%, 100% 100%, 0% 100%)',
+          }}
+        />
+        {/* Bright thin line at the beam's source. */}
+        <div
+          class="absolute left-1/2 top-0 h-px w-64 -translate-x-1/2 blur-[1px]"
+          style={{ background: 'hsl(var(--primary))' }}
+        />
+        {/* Soft bloom under the line, grounding the beam. */}
+        <div
+          class="absolute left-1/2 top-0 h-40 w-80 -translate-x-1/2 blur-2xl"
+          style={{
+            background: 'radial-gradient(ellipse at top, hsl(var(--primary) / 0.5), transparent 70%)',
+          }}
+        />
+      </div>
+      <div class="relative z-10 flex flex-1 flex-col items-center justify-center px-4 py-16 text-center">
+        {props.children}
+      </div>
+    </div>
+  )
+}

package/src/ui/Lightbox.tsx

@@ -0,0 +1,261 @@
+// Full-screen image viewer: a responsive thumbnail grid that opens (via
+// Portal, dark backdrop) into an overlay with the active image, prev/next
+// navigation, a close button, an alt-text caption, and a thumbnail strip —
+// same overlay idiom as Modal (backdrop click / Escape closes, body scroll
+// locks while open), just built directly on Portal instead of Kobalte's
+// Dialog so index/open state can be driven by the caller.
+import { ChevronLeft, ChevronRight, X, ZoomIn } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+import { Portal } from './Portal'
+
+/** One image in a {@link Lightbox}. */
+export interface LightboxImage {
+  src: string
+  alt?: string
+  /** Smaller image used in the thumbnail grid/strip; falls back to `src`. */
+  thumb?: string
+}
+
+export interface LightboxProps {
+  images: LightboxImage[]
+  /** Controlled overlay open state. When set, wins over internal state — pair with `onOpenChange`. */
+  open?: boolean
+  /** Controlled active image index (clamped to the images array). When set, wins over internal state — pair with `onIndexChange`. */
+  index?: number
+  onOpenChange?: (open: boolean) => void
+  onIndexChange?: (index: number) => void
+  /** Show the thumbnail strip at the bottom of the overlay. @default true */
+  showThumbnails?: boolean
+  class?: string
+}
+
+/**
+ * Responsive thumbnail grid (`thumb || src`) that opens into a full-screen
+ * viewer on click: the active image centered, prev/next chevrons, a close
+ * button, an alt-text caption, a zoom toggle, and (by default) a thumbnail
+ * strip with the active image highlighted. Navigate with the arrow keys or
+ * Escape, click the backdrop to close. Works controlled
+ * (`open`/`index` + `onOpenChange`/`onIndexChange`) or uncontrolled. Body
+ * scroll locks while open, like `Modal`; the zoom transition is skipped
+ * under `prefers-reduced-motion` but stays fully functional.
+ *
+ * @example
+ * ```tsx
+ * <Lightbox
+ *   images={[
+ *     { src: '/photos/1-full.jpg', thumb: '/photos/1-thumb.jpg', alt: 'Sunset over the bay' },
+ *     { src: '/photos/2-full.jpg', thumb: '/photos/2-thumb.jpg', alt: 'Mountain trail' },
+ *   ]}
+ * />
+ * ```
+ */
+export function Lightbox(props: LightboxProps): JSX.Element {
+  const [internalOpen, setInternalOpen] = createSignal(false)
+  const open = createMemo(() => props.open ?? internalOpen())
+
+  const [internalIndex, setInternalIndex] = createSignal(0)
+  const rawIndex = createMemo(() => props.index ?? internalIndex())
+
+  const lastIndex = createMemo(() => Math.max(0, props.images.length - 1))
+  const clampIndex = (i: number): number => Math.min(Math.max(i, 0), lastIndex())
+  const index = createMemo(() => clampIndex(rawIndex()))
+  const current = createMemo(() => props.images[index()])
+
+  const setOpen = (next: boolean): void => {
+    setInternalOpen(next)
+    props.onOpenChange?.(next)
+  }
+  const setIndex = (next: number): void => {
+    const clamped = clampIndex(next)
+    setInternalIndex(clamped)
+    props.onIndexChange?.(clamped)
+  }
+
+  const openAt = (i: number): void => {
+    setIndex(i)
+    setOpen(true)
+  }
+  const close = (): void => setOpen(false)
+  const prev = (): void => setIndex(index() - 1)
+  const next = (): void => setIndex(index() + 1)
+  const showThumbnails = (): boolean => props.showThumbnails !== false
+
+  // Zoom toggle for the active image; reset whenever the image or open state changes.
+  const [zoomed, setZoomed] = createSignal(false)
+  createEffect(() => {
+    index()
+    open()
+    setZoomed(false)
+  })
+
+  // Lock body scroll while the overlay is open — same idiom as Modal's Dialog.
+  createEffect(() => {
+    if (!open() || typeof document === 'undefined') return
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    onCleanup(() => {
+      document.body.style.overflow = previousOverflow
+    })
+  })
+
+  // Escape closes, ArrowLeft/ArrowRight navigate, while the overlay is open.
+  createEffect(() => {
+    if (!open() || typeof window === 'undefined') return
+    const onKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        close()
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        prev()
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        next()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    onCleanup(() => window.removeEventListener('keydown', onKeyDown))
+  })
+
+  return (
+    <div class={cn('grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4', props.class)}>
+      <For each={props.images}>
+        {(image, i) => (
+          <button
+            type="button"
+            class="group relative aspect-square overflow-hidden rounded-lg border border-border bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={image.alt ?? `Open image ${i() + 1}`}
+            onClick={() => openAt(i())}
+          >
+            <img
+              src={image.thumb ?? image.src}
+              alt={image.alt ?? ''}
+              loading="lazy"
+              class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          </button>
+        )}
+      </For>
+
+      <Show when={open() && current()}>
+        <Portal>
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-label={current()?.alt ?? 'Image viewer'}
+            tabindex="-1"
+            class="fixed inset-0 z-50 flex flex-col bg-background/95 backdrop-blur-sm outline-none"
+            onClick={close}
+            ref={(el) => {
+              queueMicrotask(() => el.focus())
+            }}
+          >
+            <div class="flex items-center justify-end p-4" onClick={(e) => e.stopPropagation()}>
+              <button
+                type="button"
+                aria-label="Close"
+                onClick={close}
+                class="grid h-10 w-10 place-items-center rounded-lg bg-card/80 text-foreground transition hover:bg-muted"
+              >
+                <X class="h-5 w-5" />
+              </button>
+            </div>
+
+            <div class="relative flex flex-1 items-center justify-center px-4">
+              <Show when={props.images.length > 1}>
+                <button
+                  type="button"
+                  aria-label="Previous image"
+                  disabled={index() === 0}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    prev()
+                  }}
+                  class="absolute left-2 z-10 grid h-10 w-10 place-items-center rounded-full bg-card/80 text-foreground transition hover:bg-muted disabled:pointer-events-none disabled:opacity-40 sm:left-4"
+                >
+                  <ChevronLeft class="h-6 w-6" />
+                </button>
+              </Show>
+
+              <img
+                src={current()?.src}
+                alt={current()?.alt ?? ''}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setZoomed((z) => !z)
+                }}
+                class={cn(
+                  'max-h-[calc(100vh-10rem)] max-w-[92vw] rounded-lg object-contain',
+                  !motionReduced() && 'transition-transform duration-300 ease-out',
+                  zoomed() ? 'scale-150 cursor-zoom-out' : 'cursor-zoom-in',
+                )}
+              />
+
+              <Show when={props.images.length > 1}>
+                <button
+                  type="button"
+                  aria-label="Next image"
+                  disabled={index() === lastIndex()}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    next()
+                  }}
+                  class="absolute right-2 z-10 grid h-10 w-10 place-items-center rounded-full bg-card/80 text-foreground transition hover:bg-muted disabled:pointer-events-none disabled:opacity-40 sm:right-4"
+                >
+                  <ChevronRight class="h-6 w-6" />
+                </button>
+              </Show>
+            </div>
+
+            <div class="flex flex-col items-center gap-3 p-4" onClick={(e) => e.stopPropagation()}>
+              <div class="flex items-center gap-3">
+                <Show when={current()?.alt}>
+                  <p class="text-center text-sm text-muted-foreground">{current()?.alt}</p>
+                </Show>
+                <button
+                  type="button"
+                  aria-label={zoomed() ? 'Zoom out' : 'Zoom in'}
+                  aria-pressed={zoomed()}
+                  onClick={() => setZoomed((z) => !z)}
+                  class={cn(
+                    'grid h-8 w-8 shrink-0 place-items-center rounded-lg text-muted-foreground transition hover:bg-muted hover:text-foreground',
+                    zoomed() && 'bg-muted text-foreground',
+                  )}
+                >
+                  <ZoomIn class="h-4 w-4" />
+                </button>
+              </div>
+
+              <Show when={showThumbnails() && props.images.length > 1}>
+                <div class="flex max-w-full gap-2 overflow-x-auto py-1">
+                  <For each={props.images}>
+                    {(image, i) => (
+                      <button
+                        type="button"
+                        aria-label={image.alt ?? `Go to image ${i() + 1}`}
+                        aria-current={index() === i() ? 'true' : undefined}
+                        onClick={() => setIndex(i())}
+                        class={cn(
+                          'h-14 w-14 shrink-0 overflow-hidden rounded-md border-2 transition',
+                          index() === i()
+                            ? 'border-primary'
+                            : 'border-transparent opacity-60 hover:opacity-100',
+                        )}
+                      >
+                        <img src={image.thumb ?? image.src} alt="" class="h-full w-full object-cover" />
+                      </button>
+                    )}
+                  </For>
+                </div>
+              </Show>
+            </div>
+          </div>
+        </Portal>
+      </Show>
+    </div>
+  )
+}