@a4ui/core 0.27.0 → 0.29.0

package/dist/ui/BalanceCard.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface BalanceCardProps {
+    label: string;
+    amount: number;
+    /** ISO 4217 currency code. Defaults to `'USD'`. */
+    currency?: string;
+    /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** Period-over-period change as a fraction (0.042 = +4.2%). Shows an up/down chip. */
+    delta?: number;
+    /** Small line under the balance (e.g. "Available" / account number). */
+    sub?: JSX.Element;
+    class?: string;
+}
+/**
+ * Balance-first summary card: label, large formatted amount, and an optional
+ * signed-percent delta chip (up/down colored via {@link Badge} tones).
+ *
+ * @example
+ * ```tsx
+ * <BalanceCard label="Total balance" amount={128430.52} delta={0.042} />
+ * ```
+ */
+export declare function BalanceCard(props: BalanceCardProps): JSX.Element;

package/dist/ui/BlockEditor.d.ts

@@ -0,0 +1,42 @@
+import { JSX } from 'solid-js';
+/** A single block in a {@link BlockEditor}. Content is supplied by the caller. */
+export interface EditorBlock {
+    id: string;
+    type: string;
+    content: JSX.Element;
+}
+/** An option offered by the "add block" menu. */
+export interface BlockTypeOption {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: JSX.Element;
+}
+export interface BlockEditorProps {
+    blocks: EditorBlock[];
+    /** Called on reorder and on delete, with the new array. */
+    onChange: (blocks: EditorBlock[]) => void;
+    /** Block types offered by the "add" menu. */
+    blockTypes?: BlockTypeOption[];
+    /** Called when the user picks a type from the add menu; the caller creates + inserts the block. */
+    onAddBlock?: (type: string) => void;
+    class?: string;
+}
+/**
+ * Reorderable, deletable stack of content blocks with a slash-style insert
+ * menu — the block-primitives layer of a Notion-style editor, not a
+ * rich-text engine. Reordering and the drag handle come from {@link Sortable};
+ * the "add block" picker reuses {@link SlashMenu} filtered by a local search
+ * input.
+ *
+ * @example
+ * ```tsx
+ * <BlockEditor
+ *   blocks={blocks()}
+ *   onChange={setBlocks}
+ *   blockTypes={[{ value: 'text', label: 'Text' }]}
+ *   onAddBlock={(type) => setBlocks([...blocks(), { id: crypto.randomUUID(), type, content: <p>New</p> }])}
+ * />
+ * ```
+ */
+export declare function BlockEditor(props: BlockEditorProps): JSX.Element;

package/dist/ui/KpiBlock.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+export interface KpiBlockProps {
+    label: string;
+    value: string | number;
+    /** Change as a fraction (0.128 = +12.8%). Shows a signed up/down chip. */
+    delta?: number;
+    /** Optional chart node (e.g. a <Sparkline/> from @a4ui/core/charts) shown at the bottom. */
+    chart?: JSX.Element;
+    class?: string;
+}
+/**
+ * Labelled metric tile for dashboards: a large value with a signed
+ * up/down delta chip and an optional chart slot at the bottom. The chart is
+ * consumer-supplied (e.g. a `<Sparkline/>` from `@a4ui/core/charts`) — this
+ * component takes it as a prop rather than importing the charts package.
+ *
+ * @example
+ * ```tsx
+ * <KpiBlock label="Monthly revenue" value="$48,204" delta={0.128} />
+ * ```
+ */
+export declare function KpiBlock(props: KpiBlockProps): JSX.Element;

package/dist/ui/MoneyActionButton.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+/** Money-movement action a {@link MoneyActionButton} represents; picks the leading icon. */
+export type MoneyActionKind = 'send' | 'request' | 'pay' | 'withdraw';
+export interface MoneyActionButtonProps {
+    children: JSX.Element;
+    /** Which money-movement action this triggers. Defaults to `'send'`. */
+    kind?: MoneyActionKind;
+    onClick?: () => void;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Bold, full-height pill CTA reserved for value-moving actions — send,
+ * request, pay, withdraw. Uses the app's single accent (`bg-primary`) so it
+ * stands out from ordinary buttons, with a leading icon chosen by `kind`.
+ *
+ * @example
+ * ```tsx
+ * <MoneyActionButton kind="send" onClick={() => sendMoney()}>Send</MoneyActionButton>
+ * ```
+ */
+export declare function MoneyActionButton(props: MoneyActionButtonProps): JSX.Element;

package/dist/ui/ScrollScene.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface ScrollSceneProps {
+    /** Render-prop receiving a reactive progress accessor (0..1). */
+    children: (progress: () => number) => JSX.Element;
+    class?: string;
+}
+/**
+ * Wraps `children` in an element that tracks its own scroll progress: 0 when
+ * its top edge reaches the bottom of the viewport, 1 when its bottom edge
+ * passes the top of the viewport. Progress is exposed as a reactive accessor
+ * via a render prop, so the caller drives whatever transform/animation it
+ * wants — this component only measures. Scroll position isn't itself motion,
+ * so it keeps measuring under `prefers-reduced-motion`; it just never
+ * animates anything on its own.
+ *
+ * @example
+ * ```tsx
+ * <ScrollScene>
+ *   {(progress) => (
+ *     <div style={{ opacity: progress() }}>Reveal on scroll</div>
+ *   )}
+ * </ScrollScene>
+ * ```
+ */
+export declare function ScrollScene(props: ScrollSceneProps): JSX.Element;

package/dist/ui/SideRail.d.ts

@@ -0,0 +1,39 @@
+import { JSX } from 'solid-js';
+/** A single destination within a {@link SideRail}. */
+export interface SideRailItem {
+    value: string;
+    label: string;
+    icon?: JSX.Element;
+    /** Optional badge (e.g. an unread count) rendered on the item. */
+    badge?: JSX.Element;
+}
+export interface SideRailProps {
+    items: SideRailItem[];
+    value: string;
+    onChange: (value: string) => void;
+    /** Show text labels under icons. When false, labels go in a tooltip. @default true */
+    labels?: boolean;
+    class?: string;
+}
+/**
+ * Narrow vertical column of stacked icon+label destinations — the vertical
+ * counterpart to {@link BottomNavigation} for side placement. The active item
+ * is highlighted with a left indicator bar and `aria-selected`. ArrowUp/
+ * ArrowDown move the selection between items (roving activation, matching the
+ * WAI-ARIA tabs pattern). Renders inline where placed — the consumer is
+ * responsible for positioning (e.g. `fixed inset-y-0 left-0`).
+ *
+ * @example
+ * ```tsx
+ * <SideRail
+ *   value={section()}
+ *   onChange={setSection}
+ *   items={[
+ *     { value: 'home', label: 'Home', icon: <HomeIcon /> },
+ *     { value: 'inbox', label: 'Inbox', icon: <InboxIcon />, badge: <Badge tone="info">3</Badge> },
+ *     { value: 'settings', label: 'Settings', icon: <SettingsIcon /> },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function SideRail(props: SideRailProps): JSX.Element;

package/dist/ui/Spaces.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from 'solid-js';
+export interface Space {
+    id: string;
+    label: string;
+    icon?: JSX.Element;
+    content: JSX.Element;
+}
+export interface SpacesProps {
+    spaces: Space[];
+    /** Controlled active space. Uncontrolled (internal signal, defaults to the first space) when omitted. */
+    activeId?: string;
+    onChange?: (id: string) => void;
+    class?: string;
+}
+/**
+ * Swipeable, switchable "context" containers — one space visible at a time,
+ * sliding horizontally between spaces, with a dot/pill indicator rail to jump
+ * directly to one. Drag/touch to swipe (the track follows the pointer and
+ * snaps on release past a threshold), same engine-free approach as Carousel.
+ *
+ * @example
+ * ```tsx
+ * <Spaces
+ *   spaces={[
+ *     { id: 'personal', label: 'Personal', icon: <User class="h-4 w-4" />, content: <PersonalPane /> },
+ *     { id: 'work', label: 'Work', icon: <Briefcase class="h-4 w-4" />, content: <WorkPane /> },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Spaces(props: SpacesProps): JSX.Element;

package/dist/ui/StickyReveal.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface StickyRevealProps {
+    children: JSX.Element;
+    /** Total scroll distance of the section (the taller it is, the longer the pin). CSS length, e.g. '200vh'. @default '180vh' */
+    height?: string;
+    class?: string;
+}
+/**
+ * A pinned hero/feature section: the outer element reserves `height` of
+ * scroll distance while the inner content sticks to the viewport and fades +
+ * rises in as the user scrolls through it. Needs real scroll room above/below
+ * to see the effect — drop it inside a page with enough surrounding content
+ * (or bump `height`) rather than in a short isolated container.
+ *
+ * @example
+ * ```tsx
+ * <StickyReveal height="200vh">
+ *   <Card class="p-10 text-center">
+ *     <h2 class="text-3xl font-bold">Pinned moment</h2>
+ *   </Card>
+ * </StickyReveal>
+ * ```
+ */
+export declare function StickyReveal(props: StickyRevealProps): JSX.Element;

package/dist/ui/TransactionFeed.d.ts

@@ -0,0 +1,40 @@
+import { JSX } from 'solid-js';
+/** A single row in a {@link TransactionFeed}. */
+export interface Transaction {
+    id: string;
+    title: string;
+    subtitle?: string;
+    /** Negative = outgoing, positive (or zero) = incoming. */
+    amount: number;
+    /** ISO or display string. Required to group rows when `groupByDate` is set. */
+    date?: string;
+    icon?: JSX.Element;
+}
+export interface TransactionFeedProps {
+    transactions: Transaction[];
+    /** ISO 4217 currency code. Defaults to `'USD'`. */
+    currency?: string;
+    /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** Group rows under date headers (uses each tx.date). @default false */
+    groupByDate?: boolean;
+    class?: string;
+}
+/**
+ * Dense vertical list of transactions/activity for finance dashboards. Each
+ * row shows an optional leading icon, a title + subtitle, and the amount
+ * formatted as currency — incoming (`amount >= 0`) in a success text tone,
+ * outgoing as `-$X` in the default foreground. Optionally groups rows under
+ * `text-xs uppercase` date headers via `groupByDate`.
+ *
+ * @example
+ * ```tsx
+ * <TransactionFeed
+ *   transactions={[
+ *     { id: '1', title: 'Acme Corp', subtitle: 'Invoice #1042', amount: 1200, date: '2026-07-18' },
+ *     { id: '2', title: 'Cloud Hosting', subtitle: 'Monthly plan', amount: -49.99, date: '2026-07-17' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function TransactionFeed(props: TransactionFeedProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.27.0",
+  "version": "0.29.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.27.0'
+export const A4UI_VERSION = '0.29.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -168,6 +168,17 @@ export { MasterDetail, type MasterDetailProps, type MasterDetailItem } from './u
 export { SlashMenu, type SlashMenuProps, type SlashItem } from './ui/SlashMenu'
 export { DataView, type DataViewProps, type DataViewColumn, type DataViewMode } from './ui/DataView'
 
+// Phase 3 — scroll storytelling, finance, spaces/rail.
+export { ScrollScene, type ScrollSceneProps } from './ui/ScrollScene'
+export { StickyReveal, type StickyRevealProps } from './ui/StickyReveal'
+export { BalanceCard, type BalanceCardProps } from './ui/BalanceCard'
+export { TransactionFeed, type TransactionFeedProps, type Transaction } from './ui/TransactionFeed'
+export { KpiBlock, type KpiBlockProps } from './ui/KpiBlock'
+export { MoneyActionButton, type MoneyActionButtonProps, type MoneyActionKind } from './ui/MoneyActionButton'
+export { Spaces, type SpacesProps, type Space } from './ui/Spaces'
+export { SideRail, type SideRailProps, type SideRailItem } from './ui/SideRail'
+export { BlockEditor, type BlockEditorProps, type EditorBlock, type BlockTypeOption } from './ui/BlockEditor'
+
 // Motion components (src/ui) — animation primitives built on the `motion` engine
 // (adapted from motion.dev examples). All tree-shakeable and reduced-motion aware;
 // `motion` is external, so importing one of these is the only thing that pulls it.

package/src/ui/BalanceCard.tsx

@@ -0,0 +1,68 @@
+// Balance-first summary card for finance dashboards: a label, a large
+// formatted balance, and an optional up/down delta chip.
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { TrendingDown, TrendingUp } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+import { Badge } from './Badge'
+import { Card, CardContent } from './Card'
+
+export interface BalanceCardProps {
+  label: string
+  amount: number
+  /** ISO 4217 currency code. Defaults to `'USD'`. */
+  currency?: string
+  /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+  locale?: string
+  /** Period-over-period change as a fraction (0.042 = +4.2%). Shows an up/down chip. */
+  delta?: number
+  /** Small line under the balance (e.g. "Available" / account number). */
+  sub?: JSX.Element
+  class?: string
+}
+
+/**
+ * Balance-first summary card: label, large formatted amount, and an optional
+ * signed-percent delta chip (up/down colored via {@link Badge} tones).
+ *
+ * @example
+ * ```tsx
+ * <BalanceCard label="Total balance" amount={128430.52} delta={0.042} />
+ * ```
+ */
+export function BalanceCard(props: BalanceCardProps): JSX.Element {
+  const format = () =>
+    new Intl.NumberFormat(props.locale ?? 'en-US', {
+      style: 'currency',
+      currency: props.currency ?? 'USD',
+    }).format(props.amount)
+
+  const isPositive = () => (props.delta ?? 0) >= 0
+
+  const deltaLabel = () => {
+    const pct = Math.abs(props.delta as number) * 100
+    const rounded = Math.round(pct * 10) / 10
+    return `${isPositive() ? '+' : '-'}${rounded}%`
+  }
+
+  return (
+    <Card glass class={cn('inline-block', props.class)}>
+      <CardContent class="flex flex-col gap-2">
+        <span class="text-sm text-muted-foreground">{props.label}</span>
+        <div class="flex items-center gap-3">
+          <span class="text-3xl font-bold text-foreground">{format()}</span>
+          <Show when={props.delta !== undefined}>
+            <Badge tone={isPositive() ? 'success' : 'danger'}>
+              <Show when={isPositive()} fallback={<TrendingDown class="h-3 w-3" aria-hidden="true" />}>
+                <TrendingUp class="h-3 w-3" aria-hidden="true" />
+              </Show>
+              {deltaLabel()}
+            </Badge>
+          </Show>
+        </div>
+        <Show when={props.sub}>{props.sub}</Show>
+      </CardContent>
+    </Card>
+  )
+}

package/src/ui/BlockEditor.tsx

@@ -0,0 +1,139 @@
+// BlockEditor — block-primitives shell for a Notion-style editor: a
+// reorderable, deletable stack of blocks plus a slash-style "add block" menu.
+// It does not know how to render or edit block content (that's the caller's
+// job via `EditorBlock.content`) — it only owns ordering, removal, and
+// insertion UI. Built entirely from existing primitives: Sortable (drag
+// handle + reorder) and SlashMenu (filterable insert picker).
+import { createSignal, Show, type JSX } from 'solid-js'
+import { Plus, Trash2 } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+import { Button } from './Button'
+import { Sortable } from './Sortable'
+import { SlashMenu } from './SlashMenu'
+
+/** A single block in a {@link BlockEditor}. Content is supplied by the caller. */
+export interface EditorBlock {
+  id: string
+  type: string
+  content: JSX.Element
+}
+
+/** An option offered by the "add block" menu. */
+export interface BlockTypeOption {
+  value: string
+  label: string
+  description?: string
+  icon?: JSX.Element
+}
+
+export interface BlockEditorProps {
+  blocks: EditorBlock[]
+  /** Called on reorder and on delete, with the new array. */
+  onChange: (blocks: EditorBlock[]) => void
+  /** Block types offered by the "add" menu. */
+  blockTypes?: BlockTypeOption[]
+  /** Called when the user picks a type from the add menu; the caller creates + inserts the block. */
+  onAddBlock?: (type: string) => void
+  class?: string
+}
+
+/**
+ * Reorderable, deletable stack of content blocks with a slash-style insert
+ * menu — the block-primitives layer of a Notion-style editor, not a
+ * rich-text engine. Reordering and the drag handle come from {@link Sortable};
+ * the "add block" picker reuses {@link SlashMenu} filtered by a local search
+ * input.
+ *
+ * @example
+ * ```tsx
+ * <BlockEditor
+ *   blocks={blocks()}
+ *   onChange={setBlocks}
+ *   blockTypes={[{ value: 'text', label: 'Text' }]}
+ *   onAddBlock={(type) => setBlocks([...blocks(), { id: crypto.randomUUID(), type, content: <p>New</p> }])}
+ * />
+ * ```
+ */
+export function BlockEditor(props: BlockEditorProps): JSX.Element {
+  const [menuOpen, setMenuOpen] = createSignal(false)
+  const [query, setQuery] = createSignal('')
+
+  const closeMenu = () => {
+    setMenuOpen(false)
+    setQuery('')
+  }
+
+  const handleDelete = (id: string) => {
+    props.onChange(props.blocks.filter((block) => block.id !== id))
+  }
+
+  const handleSelect = (type: string) => {
+    props.onAddBlock?.(type)
+    closeMenu()
+  }
+
+  return (
+    <div class={cn('flex flex-col gap-3', props.class)}>
+      <Show
+        when={props.blocks.length}
+        fallback={
+          <div class="rounded-lg border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
+            No blocks yet
+          </div>
+        }
+      >
+        <Sortable
+          items={props.blocks}
+          itemKey={(block) => block.id}
+          onReorder={(items) => props.onChange(items)}
+        >
+          {(block) => (
+            <div class="group/block flex w-full items-center justify-between gap-2">
+              <div class="min-w-0 flex-1">{block.content}</div>
+              <button
+                type="button"
+                onClick={() => handleDelete(block.id)}
+                class="shrink-0 rounded-md p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring group-hover/block:opacity-100"
+                aria-label="Delete block"
+              >
+                <Trash2 class="h-4 w-4" />
+              </button>
+            </div>
+          )}
+        </Sortable>
+      </Show>
+
+      <div
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') closeMenu()
+        }}
+      >
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => setMenuOpen((open) => !open)}
+          aria-expanded={menuOpen()}
+        >
+          <Plus class="mr-1 h-4 w-4" />
+          Add block
+        </Button>
+
+        <Show when={menuOpen()}>
+          <div class="mt-2 flex flex-col gap-2">
+            <input
+              type="text"
+              autofocus
+              value={query()}
+              onInput={(e) => setQuery(e.currentTarget.value)}
+              placeholder="Search block types..."
+              class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              aria-label="Filter block types"
+            />
+            <SlashMenu items={props.blockTypes ?? []} query={query()} onSelect={handleSelect} />
+          </div>
+        </Show>
+      </div>
+    </div>
+  )
+}

package/src/ui/KpiBlock.tsx

@@ -0,0 +1,58 @@
+// Labelled metric block for dashboards: value + a signed delta chip, with an
+// optional inline chart slot (e.g. a Sparkline from @a4ui/core/charts) passed
+// in by the consumer — this component never imports the charts package.
+import { ArrowDown, ArrowUp } from 'lucide-solid'
+import { Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Badge } from './Badge'
+import { Card, CardContent } from './Card'
+
+export interface KpiBlockProps {
+  label: string
+  value: string | number
+  /** Change as a fraction (0.128 = +12.8%). Shows a signed up/down chip. */
+  delta?: number
+  /** Optional chart node (e.g. a <Sparkline/> from @a4ui/core/charts) shown at the bottom. */
+  chart?: JSX.Element
+  class?: string
+}
+
+const formatDelta = (delta: number) => `${delta >= 0 ? '+' : ''}${(delta * 100).toFixed(1)}%`
+
+/**
+ * Labelled metric tile for dashboards: a large value with a signed
+ * up/down delta chip and an optional chart slot at the bottom. The chart is
+ * consumer-supplied (e.g. a `<Sparkline/>` from `@a4ui/core/charts`) — this
+ * component takes it as a prop rather than importing the charts package.
+ *
+ * @example
+ * ```tsx
+ * <KpiBlock label="Monthly revenue" value="$48,204" delta={0.128} />
+ * ```
+ */
+export function KpiBlock(props: KpiBlockProps): JSX.Element {
+  return (
+    <Card glass class={props.class}>
+      <CardContent class="p-5">
+        <p class="text-sm text-muted-foreground">{props.label}</p>
+        <div class="mt-1 flex items-center gap-2">
+          <span class="text-2xl font-semibold text-foreground">{props.value}</span>
+          <Show when={props.delta !== undefined}>
+            <Badge tone={(props.delta as number) >= 0 ? 'success' : 'danger'}>
+              {(props.delta as number) >= 0 ? (
+                <ArrowUp class="h-3 w-3" aria-hidden="true" />
+              ) : (
+                <ArrowDown class="h-3 w-3" aria-hidden="true" />
+              )}
+              {formatDelta(props.delta as number)}
+            </Badge>
+          </Show>
+        </div>
+        <Show when={props.chart}>
+          <div class={cn('mt-3')}>{props.chart}</div>
+        </Show>
+      </CardContent>
+    </Card>
+  )
+}

package/src/ui/MoneyActionButton.tsx

@@ -0,0 +1,54 @@
+// Prominent CTA reserved for value-moving actions (send / request / pay /
+// withdraw). One accent, tightly scoped to money movement — deliberately
+// bolder than the generic Button so it reads as "this moves money" at a
+// glance, distinct from ordinary actions elsewhere in the UI.
+import { ArrowDownLeft, ArrowUpRight, Banknote, CreditCard } from 'lucide-solid'
+import type { Component, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+
+/** Money-movement action a {@link MoneyActionButton} represents; picks the leading icon. */
+export type MoneyActionKind = 'send' | 'request' | 'pay' | 'withdraw'
+
+const KIND_ICON: Record<MoneyActionKind, Component<{ class?: string }>> = {
+  send: ArrowUpRight,
+  request: ArrowDownLeft,
+  pay: CreditCard,
+  withdraw: Banknote,
+}
+
+export interface MoneyActionButtonProps {
+  children: JSX.Element
+  /** Which money-movement action this triggers. Defaults to `'send'`. */
+  kind?: MoneyActionKind
+  onClick?: () => void
+  disabled?: boolean
+  class?: string
+}
+
+const BASE =
+  'inline-flex h-full items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold bg-primary text-primary-foreground transition-[background-color,transform] duration-150 motion-reduce:transition-none hover:bg-primary/90 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50'
+
+/**
+ * Bold, full-height pill CTA reserved for value-moving actions — send,
+ * request, pay, withdraw. Uses the app's single accent (`bg-primary`) so it
+ * stands out from ordinary buttons, with a leading icon chosen by `kind`.
+ *
+ * @example
+ * ```tsx
+ * <MoneyActionButton kind="send" onClick={() => sendMoney()}>Send</MoneyActionButton>
+ * ```
+ */
+export function MoneyActionButton(props: MoneyActionButtonProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['children', 'kind', 'class'])
+  const Icon = () => KIND_ICON[local.kind ?? 'send']
+
+  return (
+    <button type="button" class={cn(BASE, local.class)} {...rest}>
+      <Dynamic component={Icon()} class="h-4 w-4 shrink-0" aria-hidden="true" />
+      {local.children}
+    </button>
+  )
+}