@a4ui/core 0.33.0 → 0.35.0

package/dist/ui/PresenceAvatars.d.ts

@@ -0,0 +1,54 @@
+import { JSX } from 'solid-js';
+/** A user currently present/active in a collaborative session. */
+export interface PresenceUser {
+    id: string;
+    name: string;
+    avatar?: string;
+    /** Accent for this user's remote cursor label. Falls back to the primary token. */
+    color?: string;
+}
+/** A remote user's pointer position, as fractions of the shared canvas. */
+export interface RemoteCursor {
+    userId: string;
+    /** 0..1 fraction of the container's width. */
+    x: number;
+    /** 0..1 fraction of the container's height. */
+    y: number;
+}
+export interface PresenceAvatarsProps {
+    users: PresenceUser[];
+    /** Max avatars shown before collapsing the rest into `+N`. @default 4 */
+    max?: number;
+    /**
+     * Remote cursors to render. Positioned absolutely against the nearest
+     * `relative` ancestor, so the caller wraps its canvas/surface with
+     * `class="relative"` for the cursors to anchor to — this component itself
+     * does not create that positioning context.
+     */
+    cursors?: RemoteCursor[];
+    class?: string;
+}
+/**
+ * Stacked avatar group of users active in a collaborative session, each with
+ * a small online dot and a name tooltip; overflow past `max` (default 4)
+ * collapses into a trailing `+N` chip, mirroring {@link AvatarGroup}. When
+ * `cursors` is given, also renders labeled remote cursors — a small arrow
+ * plus a name chip tinted with the user's `color` — positioned at `x`/`y`
+ * fractions of the nearest `relative` ancestor and animated smoothly as
+ * positions update.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative h-64 w-full overflow-hidden rounded-lg border">
+ *   <PresenceAvatars
+ *     class="absolute right-3 top-3"
+ *     users={[
+ *       { id: 'u1', name: 'Ada Lovelace' },
+ *       { id: 'u2', name: 'Grace Hopper', color: 'hsl(280 80% 60%)' },
+ *     ]}
+ *     cursors={[{ userId: 'u2', x: 0.42, y: 0.6 }]}
+ *   />
+ * </div>
+ * ```
+ */
+export declare function PresenceAvatars(props: PresenceAvatarsProps): JSX.Element;

package/dist/ui/QueryBuilder.d.ts

@@ -0,0 +1,56 @@
+import { JSX } from 'solid-js';
+/** A field the query builder can filter on. */
+export interface QueryField {
+    /** Value stored in a rule's `field`; must be unique across `fields`. */
+    name: string;
+    /** Label shown in the field `<Select>`. */
+    label: string;
+    /** Determines which operators are offered and how the value is entered. Defaults to `'text'`. */
+    type?: 'text' | 'number' | 'select';
+    /** Options for the value `<Select>` when `type` is `'select'`. */
+    options?: string[];
+}
+/** A single leaf condition: `field operator value`. */
+export type QueryRule = {
+    field: string;
+    operator: string;
+    value: string;
+};
+/** A group of rules and/or nested groups, combined with `and`/`or`. */
+export type QueryGroup = {
+    combinator: 'and' | 'or';
+    rules: (QueryRule | QueryGroup)[];
+};
+export interface QueryBuilderProps {
+    /** Fields available to filter on; drives the per-field operator and value-input set. */
+    fields: QueryField[];
+    /** Controlled tree. Omit to manage state internally, seeded with one empty rule. */
+    value?: QueryGroup;
+    /** Called with the full, updated tree on every edit. */
+    onChange?: (group: QueryGroup) => void;
+    class?: string;
+}
+/**
+ * Nested AND/OR rule builder: each group has a combinator toggle plus "+ Rule"
+ * / "+ Group" buttons, and rules/groups can be removed individually. Groups
+ * nest recursively, indented with a left border. Controlled via `value` +
+ * `onChange`, or uncontrolled (seeded with one empty rule) when `value` is
+ * omitted.
+ *
+ * @example
+ * ```tsx
+ * const [query, setQuery] = createSignal<QueryGroup>({
+ *   combinator: 'and',
+ *   rules: [{ field: 'status', operator: 'is', value: 'open' }],
+ * })
+ * <QueryBuilder
+ *   fields={[
+ *     { name: 'status', label: 'Status', type: 'select', options: ['open', 'closed'] },
+ *     { name: 'age', label: 'Age', type: 'number' },
+ *   ]}
+ *   value={query()}
+ *   onChange={setQuery}
+ * />
+ * ```
+ */
+export declare function QueryBuilder(props: QueryBuilderProps): JSX.Element;

package/dist/ui/SheetSnap.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+export interface SheetSnapProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Fractions of viewport height, ascending, e.g. `[0.4, 0.9]`. @default [0.5, 0.9] */
+    snapPoints?: number[];
+    /** Index into `snapPoints` to open at. @default 0 */
+    defaultSnap?: number;
+    children: JSX.Element;
+    class?: string;
+}
+/**
+ * A draggable bottom sheet that rests at one of several height "snap points"
+ * (fractions of viewport height) instead of just open/closed. Drag the handle
+ * to resize with the finger; releasing snaps to the nearest point, biased by
+ * flick velocity (a fast swipe jumps a level), and a hard downward flick/drag
+ * past the lowest point dismisses. Falls back to an instant show/hide at
+ * `defaultSnap` — no drag physics — under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <SheetSnap open={open()} onOpenChange={setOpen} snapPoints={[0.4, 0.9]}>
+ *   <p>Sheet content…</p>
+ * </SheetSnap>
+ * ```
+ */
+export declare function SheetSnap(props: SheetSnapProps): JSX.Element;

package/dist/ui/SignaturePad.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'solid-js';
+export interface SignaturePadProps {
+    /** Called with a PNG data URL after each completed stroke, or `null` once the pad is empty (cleared/undone to nothing). */
+    onChange?: (dataUrl: string | null) => void;
+    /** Canvas height in CSS pixels. @default 200 */
+    height?: number;
+    class?: string;
+}
+/**
+ * A signature capture pad: draw with mouse, pen, or touch on a DPR-aware
+ * `<canvas>`, with Clear and Undo controls. Strokes are kept as point lists so
+ * Undo can fully redraw the remaining ones rather than trying to erase pixels.
+ *
+ * @example
+ * ```tsx
+ * <SignaturePad height={220} onChange={(dataUrl) => setSignature(dataUrl)} />
+ * ```
+ */
+export declare function SignaturePad(props: SignaturePadProps): JSX.Element;

package/dist/ui/SpreadsheetGrid.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+export interface SpreadsheetGridProps {
+    /** Number of rows in the grid (fixed for the component's lifetime). */
+    rows: number;
+    /** Number of columns in the grid (fixed for the component's lifetime). */
+    cols: number;
+    /** Initial cell values, seeded once on mount (missing cells default to `''`). */
+    data?: string[][];
+    /** Called with the full `rows×cols` matrix after any edit or paste. */
+    onChange?: (data: string[][]) => void;
+    /** Column header labels; defaults to `A, B, C, …, Z, AA, AB, …`. */
+    columnHeaders?: string[];
+    class?: string;
+}
+/**
+ * Excel-like editable grid. Arrow keys move the active cell; typing or Enter
+ * opens an inline editor that commits on Enter/blur and cancels on Escape.
+ * Shift+click / Shift+arrow extend a rectangular selection (Ctrl/Cmd+C copies
+ * it as TSV, Ctrl/Cmd+V pastes TSV starting at the active cell).
+ *
+ * @example
+ * ```tsx
+ * const [sheet, setSheet] = createSignal<string[][]>([])
+ * <SpreadsheetGrid rows={10} cols={6} onChange={setSheet} />
+ * ```
+ */
+export declare function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element;

package/dist/ui/TreeTable.d.ts

@@ -0,0 +1,52 @@
+import { JSX } from 'solid-js';
+/** A column definition for {@link TreeTable}. */
+export interface TreeTableColumn<T> {
+    /** Row data property this column reads when `cell` is omitted. */
+    key: string;
+    /** Column heading content. */
+    header: JSX.Element;
+    /** Custom cell renderer; falls back to `String(row[key])` when omitted. */
+    cell?: (row: T) => JSX.Element;
+    /** Right-align the column (numbers, totals). */
+    align?: 'left' | 'right';
+}
+/** A single node in a {@link TreeTable}; nodes may nest via `children`. */
+export interface TreeTableRow<T> {
+    /** Unique identifier; used to track expanded state. */
+    id: string;
+    /** Row payload passed to each column's `cell` renderer. */
+    data: T;
+    /** Child rows revealed when this row is expanded. */
+    children?: TreeTableRow<T>[];
+}
+export interface TreeTableProps<T> {
+    columns: TreeTableColumn<T>[];
+    rows: TreeTableRow<T>[];
+    /** Expand every row with children on first render. Defaults to false. */
+    defaultExpanded?: boolean;
+    class?: string;
+}
+/**
+ * Hierarchical table: rows may carry `children`, revealed by clicking the
+ * chevron in the first column. Depth is shown via indentation; expanded state
+ * is tracked internally, seeded fully expanded when `defaultExpanded` is set.
+ *
+ * @example
+ * ```tsx
+ * <TreeTable
+ *   defaultExpanded
+ *   columns={[
+ *     { key: 'name', header: 'Name' },
+ *     { key: 'size', header: 'Size', align: 'right', cell: (row) => `${row.size} KB` },
+ *   ]}
+ *   rows={[
+ *     {
+ *       id: 'src',
+ *       data: { name: 'src', size: 0 },
+ *       children: [{ id: 'index', data: { name: 'index.ts', size: 2 } }],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function TreeTable<T>(props: TreeTableProps<T>): JSX.Element;

package/dist/ui/VideoPlayerShell.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'solid-js';
+export interface VideoPlayerShellProps {
+    src: string;
+    poster?: string;
+    class?: string;
+}
+/**
+ * Native `<video>` wrapped in a glass shell with fully custom controls: a big
+ * center play/pause, a bottom bar (play/pause, elapsed/duration, a scrub
+ * range, mute toggle, fullscreen, Picture-in-Picture), and a keyboard map
+ * (Space = play/pause, ArrowLeft/Right = seek ±5s). Controls auto-hide while
+ * playing and reappear on pointer movement.
+ *
+ * @example
+ * ```tsx
+ * <VideoPlayerShell src="/media/demo.mp4" poster="/media/demo-poster.jpg" />
+ * ```
+ */
+export declare function VideoPlayerShell(props: VideoPlayerShellProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "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.33.0'
+export const A4UI_VERSION = '0.35.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -209,6 +209,65 @@ export { Globe, type GlobeMarker, type GlobeArc, type GlobeProps } from './ui/Gl
 export { WorldMap, type WorldMapPoint, type WorldMapConnection, type WorldMapProps } from './ui/WorldMap'
 export { Confetti, fireConfetti, type ConfettiProps } from './ui/Confetti'
 export { CursorTrail, type CursorTrailProps } from './ui/CursorTrail'
+
+// Productivity data views.
+export { Kanban, type KanbanCard, type KanbanColumn, type KanbanProps } from './ui/Kanban'
+export { GanttChart, type GanttTask, type GanttChartProps } from './ui/GanttChart'
+export { TreeTable, type TreeTableColumn, type TreeTableRow, type TreeTableProps } from './ui/TreeTable'
+export { PivotTable, type PivotDatum, type PivotTableProps } from './ui/PivotTable'
+
+// Onboarding + commerce.
+export {
+  OnboardingChecklist,
+  type OnboardingStep,
+  type OnboardingChecklistProps,
+} from './ui/OnboardingChecklist'
+export { CouponField, type CouponFieldProps } from './ui/CouponField'
+
+// Media.
+export { Lightbox, type LightboxImage, type LightboxProps } from './ui/Lightbox'
+export { VideoPlayerShell, type VideoPlayerShellProps } from './ui/VideoPlayerShell'
+export { AudioWaveform, type AudioWaveformProps } from './ui/AudioWaveform'
+
+// Spatial + interaction.
+export { Lamp, type LampProps } from './ui/Lamp'
+export { FollowingPointer, type FollowingPointerProps } from './ui/FollowingPointer'
+export { SheetSnap, type SheetSnapProps } from './ui/SheetSnap'
+
+// Advanced form inputs.
+export { OtpInput, type OtpInputProps } from './ui/OtpInput'
+export { MaskedInput, type MaskedInputProps } from './ui/MaskedInput'
+export { CodeEditor, type CodeEditorProps } from './ui/CodeEditor'
+export { SignaturePad, type SignaturePadProps } from './ui/SignaturePad'
+export { EmojiPicker, type EmojiPickerProps } from './ui/EmojiPicker'
+
+// Scheduling.
+export { EventScheduler, type SchedulerEvent, type EventSchedulerProps } from './ui/EventScheduler'
+export { AvailabilityPicker, type AvailabilityPickerProps } from './ui/AvailabilityPicker'
+
+// Geo.
+export { InteractiveMap, type MapMarker, type InteractiveMapProps } from './ui/InteractiveMap'
+export { LocationPicker, type LocationValue, type LocationPickerProps } from './ui/LocationPicker'
+
+// Dev / data tooling.
+export {
+  QueryBuilder,
+  type QueryField,
+  type QueryRule,
+  type QueryGroup,
+  type QueryBuilderProps,
+} from './ui/QueryBuilder'
+export { JsonViewer, type JsonViewerProps } from './ui/JsonViewer'
+export { SpreadsheetGrid, type SpreadsheetGridProps } from './ui/SpreadsheetGrid'
+
+// Collaboration.
+export {
+  PresenceAvatars,
+  type PresenceUser,
+  type RemoteCursor,
+  type PresenceAvatarsProps,
+} from './ui/PresenceAvatars'
+export { ActivityFeed, type ActivityItem, type ActivityFeedProps } from './ui/ActivityFeed'
 export {
   CopyButton,
   type CopyButtonProps,

package/src/ui/ActivityFeed.tsx

@@ -0,0 +1,178 @@
+// Chronological audit-trail list, newest first, grouped by day with a
+// Timeline-style connector line down the left. Distinct from
+// TransactionFeed (dense finance rows, no day grouping/connector) — this is
+// generic activity/audit history ("who did what, when").
+import { Activity } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Avatar } from './Avatar'
+
+/** A single audit-trail entry rendered by {@link ActivityFeed}. */
+export interface ActivityItem {
+  id: string
+  /** Name of the user/system that performed the action. */
+  actor: string
+  /** What happened, rendered right after `actor` (e.g. `"commented on Invoice #42"`). */
+  action: JSX.Element
+  /** Leading icon shown when `avatar` is omitted. Defaults to a generic activity icon. */
+  icon?: JSX.Element
+  /** ISO 8601 timestamp of the event. */
+  timestamp: string
+  avatar?: string
+}
+
+export interface ActivityFeedProps {
+  items: ActivityItem[]
+  class?: string
+}
+
+interface ActivityGroup {
+  label: string
+  items: ActivityItem[]
+}
+
+const DAY_MS = 86_400_000
+
+function startOfDay(date: Date): number {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
+}
+
+/** `"Today"` / `"Yesterday"` / a locale date, based on calendar-day distance from now. */
+function dayLabel(timestamp: string): string {
+  const date = new Date(timestamp)
+  const diffDays = Math.round((startOfDay(new Date()) - startOfDay(date)) / DAY_MS)
+  if (diffDays === 0) return 'Today'
+  if (diffDays === 1) return 'Yesterday'
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+/** Compact relative time (`"2h ago"`, `"just now"`) computed from an ISO timestamp. */
+function relativeTime(timestamp: string): string {
+  const diffSeconds = Math.round((Date.now() - new Date(timestamp).getTime()) / 1000)
+  if (diffSeconds < 60) return 'just now'
+  const diffMinutes = Math.round(diffSeconds / 60)
+  if (diffMinutes < 60) return `${diffMinutes}m ago`
+  const diffHours = Math.round(diffMinutes / 60)
+  if (diffHours < 24) return `${diffHours}h ago`
+  const diffDays = Math.round(diffHours / 24)
+  if (diffDays < 7) return `${diffDays}d ago`
+  const diffWeeks = Math.round(diffDays / 7)
+  if (diffWeeks < 5) return `${diffWeeks}w ago`
+  const diffMonths = Math.round(diffDays / 30)
+  if (diffMonths < 12) return `${diffMonths}mo ago`
+  return `${Math.round(diffDays / 365)}y ago`
+}
+
+function initials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join('')
+}
+
+/** Groups items newest-first by calendar day, preserving first-seen group order. */
+function groupByDay(items: ActivityItem[]): ActivityGroup[] {
+  const sorted = [...items].sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+  const groups: ActivityGroup[] = []
+  const byLabel = new Map<string, ActivityGroup>()
+  for (const item of sorted) {
+    const label = dayLabel(item.timestamp)
+    let group = byLabel.get(label)
+    if (!group) {
+      group = { label, items: [] }
+      byLabel.set(label, group)
+      groups.push(group)
+    }
+    group.items.push(item)
+  }
+  return groups
+}
+
+/**
+ * Chronological audit-trail list (newest first), grouped under subtle day
+ * headers (`"Today"` / `"Yesterday"` / a locale date) with a continuous
+ * connector line down the left, in the same spirit as {@link Timeline}. Each
+ * row shows an avatar (or a fallback icon), `"{actor} {action}"`, and a
+ * relative timestamp whose `title` carries the absolute time. Distinct from
+ * {@link TransactionFeed}: this is generic activity/audit history, not a
+ * financial ledger.
+ *
+ * @example
+ * ```tsx
+ * <ActivityFeed
+ *   items={[
+ *     {
+ *       id: '1',
+ *       actor: 'Ada Lovelace',
+ *       action: <>commented on <strong>Invoice #42</strong></>,
+ *       timestamp: '2026-07-21T09:15:00Z',
+ *       avatar: ada.avatarUrl,
+ *     },
+ *     {
+ *       id: '2',
+ *       actor: 'System',
+ *       action: 'archived the project',
+ *       timestamp: '2026-07-20T18:02:00Z',
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export function ActivityFeed(props: ActivityFeedProps): JSX.Element {
+  const groups = () => groupByDay(props.items)
+
+  return (
+    <div class={cn('flex flex-col gap-6', props.class)}>
+      <For each={groups()}>
+        {(group) => (
+          <div>
+            <p class="mb-3 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              {group.label}
+            </p>
+            <ol class="relative flex flex-col gap-5">
+              <For each={group.items}>
+                {(item, index) => (
+                  <li class="relative flex gap-3 pl-1">
+                    <Show when={index() < group.items.length - 1}>
+                      <span
+                        aria-hidden="true"
+                        class="absolute left-[1.375rem] top-9 -bottom-5 w-px -translate-x-1/2 bg-border"
+                      />
+                    </Show>
+                    <Show
+                      when={item.avatar}
+                      fallback={
+                        <span class="relative z-[1] grid h-9 w-9 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground">
+                          {item.icon ?? <Activity class="h-4 w-4" />}
+                        </span>
+                      }
+                    >
+                      <span class="relative z-[1] shrink-0">
+                        <Avatar src={item.avatar} alt={item.actor} fallback={initials(item.actor)} />
+                      </span>
+                    </Show>
+                    <div class="min-w-0 flex-1 pt-1.5">
+                      <p class="text-sm text-foreground">
+                        <span class="font-medium">{item.actor}</span> {item.action}
+                      </p>
+                      <p
+                        class="mt-0.5 text-xs text-muted-foreground"
+                        title={new Date(item.timestamp).toLocaleString()}
+                      >
+                        {relativeTime(item.timestamp)}
+                      </p>
+                    </div>
+                  </li>
+                )}
+              </For>
+            </ol>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}