@a4ui/core 0.34.0 → 0.35.0

package/dist/ui/ActivityFeed.d.ts

@@ -0,0 +1,49 @@
+import { JSX } from 'solid-js';
+/** 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;
+}
+/**
+ * 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 declare function ActivityFeed(props: ActivityFeedProps): JSX.Element;

package/dist/ui/AvailabilityPicker.d.ts

@@ -0,0 +1,35 @@
+import { JSX } from 'solid-js';
+export interface AvailabilityPickerProps {
+    /** Open slots per date, keyed by local ISO 'YYYY-MM-DD'; each value is a list of 'HH:mm' times. */
+    slotsByDate: Record<string, string[]>;
+    /** Controlled selection; omit to manage selection internally. */
+    value?: {
+        date: string;
+        time: string;
+    };
+    onChange?: (selection: {
+        date: string;
+        time: string;
+    }) => void;
+    /** Label shown near the slots. @default the browser's Intl timezone */
+    timezone?: string;
+    class?: string;
+}
+/**
+ * Booking-style availability picker: a scrollable list of bookable dates on the
+ * left (built from the keys of `slotsByDate`) and a scrollable grid of open
+ * 'HH:mm' slots for the selected date on the right, with a timezone label.
+ * Controlled via `value`/`onChange`, or self-managed when `value` is omitted.
+ * Fully keyboard accessible (native buttons, `aria-pressed` on the current pick).
+ *
+ * @example
+ * ```tsx
+ * const [selection, setSelection] = createSignal<{ date: string; time: string }>()
+ * <AvailabilityPicker
+ *   slotsByDate={{ '2026-07-22': ['09:00', '09:30', '14:00'], '2026-07-23': ['10:00'] }}
+ *   value={selection()}
+ *   onChange={setSelection}
+ * />
+ * ```
+ */
+export declare function AvailabilityPicker(props: AvailabilityPickerProps): JSX.Element;

package/dist/ui/CodeEditor.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface CodeEditorProps {
+    value: string;
+    /** Called with the new source string on every input event. */
+    onInput?: (v: string) => void;
+    /** Language used to pick the keyword set for highlighting. Default `'ts'`. */
+    language?: 'ts' | 'js' | 'json' | 'html' | 'css';
+    /** Hides the caret and blocks editing; the overlay still highlights. */
+    readOnly?: boolean;
+    class?: string;
+}
+/**
+ * A minimal code editor: line numbers in a gutter, a transparent textarea for
+ * input, and a `<pre>` overlay underneath it that renders approximate syntax
+ * highlighting from simple regexes (keywords, strings, numbers, comments).
+ * Not a full parser — good for READMEs, config editors, and demo panes, not
+ * a replacement for a real editor component (CodeMirror/Monaco).
+ *
+ * @example
+ * ```tsx
+ * const [src, setSrc] = createSignal('const x: number = 1\n')
+ * <CodeEditor value={src()} onInput={setSrc} language="ts" />
+ * ```
+ */
+export declare function CodeEditor(props: CodeEditorProps): JSX.Element;

package/dist/ui/EmojiPicker.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'solid-js';
+export interface EmojiPickerProps {
+    /** Called with the emoji character whenever the user picks one. */
+    onSelect: (emoji: string) => void;
+    class?: string;
+}
+/**
+ * A searchable emoji grid with an inline curated dataset (no network fetch),
+ * category tabs that scroll to their section, and a session-only "Recents"
+ * row. Type in the search box to filter by keyword, or click a category icon
+ * to jump the grid to that section.
+ *
+ * @example
+ * ```tsx
+ * <EmojiPicker onSelect={(emoji) => insertAtCursor(emoji)} />
+ * ```
+ */
+export declare function EmojiPicker(props: EmojiPickerProps): JSX.Element;

package/dist/ui/EventScheduler.d.ts

@@ -0,0 +1,41 @@
+import { JSX } from 'solid-js';
+/** A single scheduled event; `start`/`end` are local ISO datetimes ('YYYY-MM-DDTHH:mm'). */
+export interface SchedulerEvent {
+    id: string;
+    title: string;
+    start: string;
+    end: string;
+    tone?: 'primary' | 'accent';
+}
+export interface EventSchedulerProps {
+    events: SchedulerEvent[];
+    /** Day to show (day view) or the week containing it (week view). ISO 'YYYY-MM-DD'. @default today */
+    date?: string;
+    /** @default 'day' */
+    view?: 'day' | 'week';
+    /** First hour band shown (0–23). @default 7 */
+    startHour?: number;
+    /** Last hour band shown, exclusive (0–23). @default 21 */
+    endHour?: number;
+    class?: string;
+}
+/**
+ * Time-grid calendar: one column per visible day, hour bands from `startHour` to
+ * `endHour`, events absolutely positioned by their start/end minutes and split
+ * side-by-side when they overlap. Draws a "now" line through today's column
+ * when it's in view. Read-only positioning (drag-to-create/resize is out of
+ * scope). Scrolls vertically when the hour range is tall.
+ *
+ * @example
+ * ```tsx
+ * <EventScheduler
+ *   view="week"
+ *   date="2026-07-21"
+ *   events={[
+ *     { id: '1', title: 'Standup', start: '2026-07-21T09:00', end: '2026-07-21T09:30', tone: 'primary' },
+ *     { id: '2', title: 'Design review', start: '2026-07-21T09:15', end: '2026-07-21T10:00', tone: 'accent' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function EventScheduler(props: EventSchedulerProps): JSX.Element;

package/dist/ui/InteractiveMap.d.ts

@@ -0,0 +1,50 @@
+import { JSX } from 'solid-js';
+export interface MapMarker {
+    lat: number;
+    lng: number;
+    label?: string;
+    id?: string;
+}
+export interface InteractiveMapProps {
+    /** Initial view center. Also acts as a recenter trigger: passing a new
+     * `{ lat, lng }` after mount pans the view there (e.g. a "use my
+     * location" button) without fighting the user's own drag/zoom in between.
+     * @default { lat: 0, lng: 0 } */
+    center?: {
+        lat: number;
+        lng: number;
+    };
+    /** Initial integer zoom level, clamped to `[2, 18]`. Synced the same way
+     * as `center` when it changes after mount. @default 3 */
+    zoom?: number;
+    /** Pins rendered on top of the tiles, projected to their pixel position. */
+    markers?: MapMarker[];
+    /** Tile URL template with `{z}`/`{x}`/`{y}` placeholders.
+     * @default 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' */
+    tileUrl?: string;
+    /** Height of the map, in px. @default 400 */
+    height?: number;
+    /** Fires with the lat/lng under the pointer on a click (drags don't count). */
+    onClick?: (coord: {
+        lat: number;
+        lng: number;
+    }) => void;
+    class?: string;
+}
+/**
+ * A slippy tile map built directly on Web Mercator math — no map SDK. Pan by
+ * dragging, zoom with the +/- buttons or the wheel (zoom keeps the point
+ * under the cursor fixed), place `markers`, and get the lat/lng of a click
+ * via `onClick`. Recomputes its tile grid on resize (`ResizeObserver`).
+ *
+ * @example
+ * ```tsx
+ * <InteractiveMap
+ *   center={{ lat: 48.8584, lng: 2.2945 }}
+ *   zoom={13}
+ *   markers={[{ lat: 48.8584, lng: 2.2945, label: 'Eiffel Tower' }]}
+ *   onClick={(coord) => console.log('clicked', coord)}
+ * />
+ * ```
+ */
+export declare function InteractiveMap(props: InteractiveMapProps): JSX.Element;

package/dist/ui/JsonViewer.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface JsonViewerProps {
+    /** The value to render — object, array, or a primitive at the root. */
+    data: unknown;
+    /** Expand every object/array node on first render. Defaults to `false`. */
+    defaultExpanded?: boolean;
+    class?: string;
+}
+/**
+ * Collapsible, indented JSON tree. Objects/arrays are expandable nodes (chevron
+ * + key + a `{…}` / `[…]` summary with child count); primitives render as
+ * `key: value` with the value tinted by type. Expanded state is tracked
+ * internally by path, seeded fully-open when `defaultExpanded` is set. An
+ * optional search box highlights keys/values that match.
+ *
+ * @example
+ * ```tsx
+ * <JsonViewer
+ *   defaultExpanded
+ *   data={{ user: { id: 1, name: 'Ada', active: true, tags: ['admin', 'core'] } }}
+ * />
+ * ```
+ */
+export declare function JsonViewer(props: JsonViewerProps): JSX.Element;

package/dist/ui/LocationPicker.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface LocationValue {
+    lat: number;
+    lng: number;
+    label?: string;
+}
+export interface LocationPickerProps {
+    /** Controlled value. Omit to let the component manage its own state. */
+    value?: LocationValue;
+    /** Fires with the full value whenever the label, the pin, or geolocation changes it. */
+    onChange?: (v: LocationValue) => void;
+    class?: string;
+}
+/**
+ * Text label + compact map field for picking a location: click or drag the
+ * map to drop the pin (no geocoding — the label is a free-text tag the caller
+ * attaches to the coordinates), or use the "use my location" button.
+ *
+ * @example
+ * ```tsx
+ * const [place, setPlace] = createSignal<LocationValue>({ lat: 48.8584, lng: 2.2945, label: 'Eiffel Tower' })
+ * <LocationPicker value={place()} onChange={setPlace} />
+ * ```
+ */
+export declare function LocationPicker(props: LocationPickerProps): JSX.Element;

package/dist/ui/MaskedInput.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+export interface MaskedInputProps {
+    /** `#` = digit slot, `A` = letter slot, any other char is a literal, e.g. `'(###) ###-####'`. */
+    mask: string;
+    /** Controlled raw value (just the entered #/A characters, no literals). */
+    value?: string;
+    /** Called with `(raw, formatted)` on every accepted keystroke or paste. */
+    onInput?: (raw: string, formatted: string) => void;
+    placeholder?: string;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Format-as-you-type input over a real `<input>`. `mask` uses `#` for a digit
+ * slot and `A` for a letter slot; any other character is a literal inserted
+ * automatically as the user reaches it. Characters that don't fit the next
+ * slot are rejected, and pasted text is normalized by re-extracting only its
+ * valid #/A characters. Controlled (`value`) or uncontrolled.
+ *
+ * @example
+ * ```tsx
+ * const [phone, setPhone] = createSignal('')
+ * <MaskedInput mask="(###) ###-####" value={phone()} onInput={setPhone} placeholder="(555) 123-4567" />
+ * ```
+ */
+export declare function MaskedInput(props: MaskedInputProps): JSX.Element;

package/dist/ui/OtpInput.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'solid-js';
+export interface OtpInputProps {
+    /** Number of single-character boxes. @default 6 */
+    length?: number;
+    /** Controlled value; when provided, the group renders it and the parent owns state. */
+    value?: string;
+    /** Called with the full joined value on every box change (both typing and deletion). */
+    onInput?: (value: string) => void;
+    /** Called once with the full value when every box is filled. */
+    onComplete?: (value: string) => void;
+    /** Restrict input to digits and switch the mobile keyboard to numeric. */
+    numeric?: boolean;
+    class?: string;
+    'aria-label'?: string;
+}
+/**
+ * Segmented one-time-passcode input: one `<input maxlength=1>` per character.
+ * Typing advances focus to the next box, Backspace on an empty box moves back
+ * and clears the previous one, arrow keys move focus, and pasting a string
+ * distributes its characters across boxes starting at the focused index.
+ * Works controlled (pass `value`) or uncontrolled.
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = createSignal('')
+ * <OtpInput length={6} value={code()} onInput={setCode} numeric onComplete={verify} />
+ * ```
+ */
+export declare function OtpInput(props: OtpInputProps): JSX.Element;

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.34.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.34.0'
+export const A4UI_VERSION = '0.35.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -233,6 +233,41 @@ export { AudioWaveform, type AudioWaveformProps } from './ui/AudioWaveform'
 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,