@a4ui/core 0.37.1 → 0.38.0

package/preset.d.ts

@@ -0,0 +1,23 @@
+// Types for `@a4ui/core/preset` — the Spatial Glass Tailwind preset.
+// Requires Tailwind CSS v3 (`tailwindcss@^3.4.0`): v4 removed `presets:`.
+import type { Config } from 'tailwindcss'
+
+/**
+ * Tailwind v3 preset: semantic color names bound to the A4ui CSS variables, the
+ * glass surface classes (`.card`, `.bg-glass`, `.tile-glass`, `.glow-edge`) and
+ * the `light:` variant.
+ *
+ * @example
+ * ```ts
+ * import type { Config } from 'tailwindcss'
+ * import a4ui from '@a4ui/core/preset'
+ *
+ * export default {
+ *   presets: [a4ui],
+ *   content: ['./src/**\/*.{ts,tsx}', './node_modules/@a4ui/core/dist/**\/*.js'],
+ * } satisfies Config
+ * ```
+ */
+declare const preset: Partial<Config>
+
+export default preset

package/src/charts/AreaChart.tsx

@@ -0,0 +1,206 @@
+// AreaChart — multi-series SVG area chart (no charting library). Series either
+// overlap or stack; each area is filled with an SVG linearGradient built from
+// the series' theme token, with a solid line on top. Hover or arrow keys show
+// a tooltip with every series' value at that x.
+import { createMemo, createUniqueId, For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import {
+  ChartLegend,
+  ChartTooltip,
+  FOCUS_CLASS,
+  createChartNav,
+  createHiddenSet,
+  seriesColor,
+  seriesValue,
+  type ChartSeries,
+  ChartXLabels,
+} from './shared'
+
+export interface AreaDatum {
+  label: string
+  /** Per-series values keyed by `ChartSeries.key`. */
+  values: Record<string, number>
+}
+
+export interface AreaChartProps {
+  data: AreaDatum[]
+  series: ChartSeries[]
+  /** `overlap` (default) draws each series from the baseline; `stacked` accumulates them. */
+  mode?: 'overlap' | 'stacked'
+  /** Height of the plot area in px. Default 200. */
+  height?: number
+  /** Hover / keyboard tooltip. Default true. */
+  showTooltip?: boolean
+  /** Toggleable legend. Default true. */
+  showLegend?: boolean
+  class?: string
+}
+
+const VIEW_W = 400
+
+/**
+ * Multi-series area chart with gradient fills. Each series is tinted by a
+ * theme token (`color`), overlapping or stacked. The chart is focusable:
+ * Left / Right arrows (Home / End) move between points and show the tooltip.
+ *
+ * @example
+ * ```tsx
+ * <AreaChart
+ *   mode="stacked"
+ *   series={[{ key: 'web', label: 'Web' }, { key: 'app', label: 'App', color: 'accent' }]}
+ *   data={[
+ *     { label: 'Jan', values: { web: 4, app: 2 } },
+ *     { label: 'Feb', values: { web: 6, app: 3 } },
+ *   ]}
+ * />
+ * ```
+ */
+export function AreaChart(props: AreaChartProps): JSX.Element {
+  const uid = createUniqueId()
+  const height = () => props.height ?? 200
+  const stacked = () => props.mode === 'stacked'
+  const { hidden, toggle } = createHiddenSet()
+  const nav = createChartNav(() => props.data.length)
+  const val = (d: AreaDatum, key: string) => seriesValue(d.values, key, d.label)
+  const colorOf = (key: string) => {
+    const i = props.series.findIndex((s) => s.key === key)
+    return seriesColor(props.series[i].color, i)
+  }
+  const visible = () => props.series.filter((s) => !hidden().has(s.key))
+  const xFor = (i: number) => (props.data.length <= 1 ? VIEW_W / 2 : (i / (props.data.length - 1)) * VIEW_W)
+
+  const max = createMemo(() => {
+    const vis = visible()
+    const tops = props.data.map((d) =>
+      stacked() ? vis.reduce((s, x) => s + val(d, x.key), 0) : Math.max(0, ...vis.map((x) => val(d, x.key))),
+    )
+    return Math.max(...tops, 0) || 1
+  })
+
+  const layers = createMemo(() => {
+    const acc = props.data.map(() => 0)
+    return visible().map((s) => {
+      const base = stacked() ? [...acc] : acc.map(() => 0)
+      const top = props.data.map((d, i) => base[i] + val(d, s.key))
+      if (stacked()) top.forEach((t, i) => (acc[i] = t))
+      const y = (v: number) => height() - (v / max()) * height()
+      const upper = top.map((t, i) => `${xFor(i)},${y(t)}`)
+      const lower = base.map((b, i) => `${xFor(i)},${y(b)}`).reverse()
+      return {
+        key: s.key,
+        color: colorOf(s.key),
+        line: `M ${upper.join(' L ')}`,
+        area: `M ${upper.join(' L ')} L ${lower.join(' L ')} Z`,
+      }
+    })
+  })
+
+  const summary = () =>
+    `${stacked() ? 'Stacked area' : 'Area'} chart. ` +
+    props.data
+      .map((d) => `${d.label}: ${props.series.map((s) => `${s.label} ${val(d, s.key)}`).join(', ')}`)
+      .join('; ')
+
+  let svgRef: SVGSVGElement | undefined
+  const onPointerMove = (e: PointerEvent) => {
+    if (!svgRef || props.data.length === 0) return
+    const rect = svgRef.getBoundingClientRect()
+    const f = rect.width === 0 ? 0 : (e.clientX - rect.left) / rect.width
+    nav.setActive(
+      props.data.length <= 1 ? 0 : Math.round(Math.min(1, Math.max(0, f)) * (props.data.length - 1)),
+    )
+  }
+  const frac = () => {
+    const i = nav.active() ?? 0
+    return props.data.length <= 1 ? 0.5 : i / (props.data.length - 1)
+  }
+  const activeDatum = () => {
+    const i = nav.active()
+    return i === null ? undefined : props.data[i]
+  }
+
+  return (
+    <div class={cn('w-full', props.class)}>
+      <Show when={props.showLegend ?? true}>
+        <ChartLegend
+          class="mb-2"
+          hidden={hidden()}
+          onToggle={toggle}
+          items={props.series.map((s, i) => ({ key: s.key, label: s.label, color: seriesColor(s.color, i) }))}
+        />
+      </Show>
+      <div
+        class={cn('relative w-full', FOCUS_CLASS)}
+        tabindex="0"
+        role="img"
+        aria-label={summary()}
+        data-chart="area"
+        data-mode={props.mode ?? 'overlap'}
+        onKeyDown={nav.onKeyDown}
+        onFocus={nav.onFocus}
+        onBlur={nav.onBlur}
+      >
+        <svg
+          ref={svgRef}
+          class="block w-full overflow-visible"
+          viewBox={`0 0 ${VIEW_W} ${height()}`}
+          preserveAspectRatio="none"
+          height={height()}
+          aria-hidden="true"
+          onPointerMove={onPointerMove}
+          onPointerLeave={() => nav.setActive(null)}
+        >
+          <defs>
+            <For each={props.series}>
+              {(s, i) => (
+                <linearGradient id={`${uid}-${s.key}`} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color={seriesColor(s.color, i())} stop-opacity="0.55" />
+                  <stop offset="100%" stop-color={seriesColor(s.color, i())} stop-opacity="0.05" />
+                </linearGradient>
+              )}
+            </For>
+          </defs>
+          <For each={layers()}>
+            {(l) => (
+              <g data-series={l.key}>
+                <path d={l.area} fill={`url(#${uid}-${l.key})`} stroke="none" data-area />
+                <path
+                  d={l.line}
+                  fill="none"
+                  stroke={l.color}
+                  stroke-width={2}
+                  stroke-linejoin="round"
+                  vector-effect="non-scaling-stroke"
+                />
+              </g>
+            )}
+          </For>
+          <Show when={nav.active() !== null}>
+            <line
+              data-cursor
+              x1={xFor(nav.active() ?? 0)}
+              x2={xFor(nav.active() ?? 0)}
+              y1={0}
+              y2={height()}
+              stroke="hsl(var(--border))"
+              stroke-width={1}
+              vector-effect="non-scaling-stroke"
+            />
+          </Show>
+        </svg>
+        <Show when={(props.showTooltip ?? true) && activeDatum()}>
+          {(d) => (
+            <ChartTooltip
+              title={d().label}
+              left={`${frac() * 100}%`}
+              anchor={frac()}
+              rows={visible().map((s) => ({ label: s.label, value: val(d(), s.key), color: colorOf(s.key) }))}
+            />
+          )}
+        </Show>
+      </div>
+      <ChartXLabels labels={props.data.map((d) => d.label)} />
+    </div>
+  )
+}

package/src/charts/BarChart.tsx

@@ -2,24 +2,52 @@
 // SVG, no charting library). Bar heights are percentages of the tallest
 // value so the whole chart reflows with its container, and height changes
 // animate via `transition-all`. Colors come from theme tokens only.
-import { For, type JSX } from 'solid-js'
+import { createMemo, For, Show, type JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import {
+  ChartLegend,
+  ChartTooltip,
+  FOCUS_CLASS,
+  createChartNav,
+  createHiddenSet,
+  seriesColor,
+  seriesValue,
+  type ChartSeries,
+} from './shared'
 
 export interface BarDatum {
   label: string
-  value: number
+  /** Value for `mode="single"` (required there). */
+  value?: number
+  /** Per-series values keyed by `ChartSeries.key`, for `stacked` / `grouped`. */
+  values?: Record<string, number>
 }
 
+export type BarChartMode = 'single' | 'stacked' | 'grouped'
+
 export interface BarChartProps {
   data: BarDatum[]
   /** Height of the plot area in px. Default 160. */
   height?: number
   /** Fill color token. Default 'primary'. */
   tone?: 'primary' | 'accent'
+  /**
+   * `single` (default) draws one bar per datum from `value`; `stacked` and
+   * `grouped` draw one segment / bar per entry of `series` from `values`.
+   */
+  mode?: BarChartMode
+  /** Series definitions, required for `stacked` / `grouped`. */
+  series?: ChartSeries[]
+  /** Hover / keyboard tooltip in the multi-series modes. Default true. */
+  showTooltip?: boolean
+  /** Show a toggleable legend in the multi-series modes. Default true. */
+  showLegend?: boolean
   class?: string
 }
 
+const VIEW_W = 400
+
 /**
  * Vertical bar chart rendered with flexbox: each bar's height is `value /
  * max` of the plot area, filled with a theme token, with its label truncated
@@ -31,9 +59,22 @@ export interface BarChartProps {
  * ```
  */
 export function BarChart(props: BarChartProps): JSX.Element {
+  return (
+    <Show when={(props.mode ?? 'single') !== 'single'} fallback={<SingleBars {...props} />}>
+      <MultiBars {...props} />
+    </Show>
+  )
+}
+
+function SingleBars(props: BarChartProps): JSX.Element {
+  const value = (d: BarDatum): number => {
+    if (d.value === undefined)
+      throw new Error(`BarChart datum "${d.label}" needs a numeric "value" in single mode`)
+    return d.value
+  }
   const height = () => props.height ?? 160
   const tone = () => props.tone ?? 'primary'
-  const max = () => Math.max(...props.data.map((d) => d.value), 0) || 1
+  const max = () => Math.max(...props.data.map(value), 0) || 1
   const barClass = () => (tone() === 'accent' ? 'bg-accent' : 'bg-primary')
 
   return (
@@ -42,9 +83,9 @@ export function BarChart(props: BarChartProps): JSX.Element {
         {(datum) => (
           <div class="flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-1">
             <div
-              title={`${datum.label}: ${datum.value}`}
+              title={`${datum.label}: ${value(datum)}`}
               class={cn('w-full rounded-t transition-all', barClass())}
-              style={{ height: `${Math.max((datum.value / max()) * 100, 0)}%` }}
+              style={{ height: `${Math.max((value(datum) / max()) * 100, 0)}%` }}
             />
             <span class="w-full truncate text-center text-xs text-muted-foreground">{datum.label}</span>
           </div>
@@ -53,3 +94,198 @@ export function BarChart(props: BarChartProps): JSX.Element {
     </div>
   )
 }
+
+function MultiBars(props: BarChartProps): JSX.Element {
+  const height = () => props.height ?? 160
+  const stacked = () => props.mode === 'stacked'
+  const series = () => {
+    if (!props.series || props.series.length === 0)
+      throw new Error(`BarChart mode="${props.mode}" requires a non-empty "series" prop`)
+    return props.series
+  }
+  const { hidden, toggle } = createHiddenSet()
+  const nav = createChartNav(() => props.data.length)
+  const visible = () => series().filter((s) => !hidden().has(s.key))
+  const val = (d: BarDatum, key: string) => seriesValue(d.values, key, d.label)
+
+  const colorOf = (key: string) => {
+    const i = series().findIndex((s) => s.key === key)
+    return seriesColor(series()[i].color, i)
+  }
+
+  const max = createMemo(() => {
+    const vis = visible()
+    const perCat = props.data.map((d) =>
+      stacked()
+        ? vis.reduce((sum, s) => sum + val(d, s.key), 0)
+        : Math.max(0, ...vis.map((s) => val(d, s.key))),
+    )
+    return Math.max(...perCat, 0) || 1
+  })
+
+  const bars = createMemo(() => {
+    const n = props.data.length
+    const band = VIEW_W / Math.max(n, 1)
+    const vis = visible()
+    const m = vis.length
+    const out: {
+      cat: number
+      key: string
+      label: string
+      value: number
+      x: number
+      y: number
+      w: number
+      h: number
+      color: string
+    }[] = []
+    props.data.forEach((d, cat) => {
+      if (stacked()) {
+        const w = band * 0.6
+        const x = cat * band + (band - w) / 2
+        let acc = 0
+        vis.forEach((s) => {
+          const v = val(d, s.key)
+          const h = (v / max()) * height()
+          acc += h
+          out.push({
+            cat,
+            key: s.key,
+            label: s.label,
+            value: v,
+            x,
+            y: height() - acc,
+            w,
+            h,
+            color: colorOf(s.key),
+          })
+        })
+      } else {
+        const gap = 2
+        const groupW = band * 0.8
+        const w = m > 0 ? (groupW - gap * (m - 1)) / m : 0
+        vis.forEach((s, k) => {
+          const v = val(d, s.key)
+          const h = (v / max()) * height()
+          out.push({
+            cat,
+            key: s.key,
+            label: s.label,
+            value: v,
+            x: cat * band + band * 0.1 + k * (w + gap),
+            y: height() - h,
+            w,
+            h,
+            color: colorOf(s.key),
+          })
+        })
+      }
+    })
+    return out
+  })
+
+  const summary = () =>
+    `${props.mode === 'stacked' ? 'Stacked' : 'Grouped'} bar chart. ` +
+    props.data
+      .map(
+        (d) =>
+          `${d.label}: ${series()
+            .map((s) => `${s.label} ${val(d, s.key)}`)
+            .join(', ')}`,
+      )
+      .join('; ')
+
+  let svgRef: SVGSVGElement | undefined
+  const onPointerMove = (e: PointerEvent) => {
+    if (!svgRef || props.data.length === 0) return
+    const rect = svgRef.getBoundingClientRect()
+    const f = rect.width === 0 ? 0 : (e.clientX - rect.left) / rect.width
+    nav.setActive(Math.min(props.data.length - 1, Math.max(0, Math.floor(f * props.data.length))))
+  }
+  const activeDatum = () => {
+    const i = nav.active()
+    return i === null ? undefined : props.data[i]
+  }
+
+  return (
+    <div class={cn('w-full', props.class)}>
+      <Show when={props.showLegend ?? true}>
+        <ChartLegend
+          class="mb-2"
+          hidden={hidden()}
+          onToggle={toggle}
+          items={series().map((s, i) => ({ key: s.key, label: s.label, color: seriesColor(s.color, i) }))}
+        />
+      </Show>
+      <div
+        class={cn('relative w-full', FOCUS_CLASS)}
+        tabindex="0"
+        role="img"
+        aria-label={summary()}
+        data-chart="bar"
+        data-mode={props.mode}
+        onKeyDown={nav.onKeyDown}
+        onFocus={nav.onFocus}
+        onBlur={nav.onBlur}
+      >
+        <svg
+          ref={svgRef}
+          class="block w-full overflow-visible"
+          viewBox={`0 0 ${VIEW_W} ${height()}`}
+          preserveAspectRatio="none"
+          height={height()}
+          aria-hidden="true"
+          onPointerMove={onPointerMove}
+          onPointerLeave={() => nav.setActive(null)}
+        >
+          <Show when={nav.active() !== null}>
+            <rect
+              x={(nav.active() ?? 0) * (VIEW_W / props.data.length)}
+              y={0}
+              width={VIEW_W / props.data.length}
+              height={height()}
+              fill="hsl(var(--muted) / 0.4)"
+            />
+          </Show>
+          <For each={bars()}>
+            {(b) => (
+              <rect
+                data-bar
+                data-category={props.data[b.cat].label}
+                data-series={b.key}
+                data-value={b.value}
+                x={b.x}
+                y={b.y}
+                width={b.w}
+                height={b.h}
+                rx={1}
+                fill={b.color}
+              />
+            )}
+          </For>
+        </svg>
+        <Show when={props.showTooltip ?? true}>
+          <Show when={activeDatum()}>
+            {(d) => (
+              <ChartTooltip
+                title={d().label}
+                left={`${(((nav.active() ?? 0) + 0.5) / props.data.length) * 100}%`}
+                anchor={((nav.active() ?? 0) + 0.5) / props.data.length}
+                rows={visible().map((s) => ({
+                  label: s.label,
+                  value: val(d(), s.key),
+                  color: colorOf(s.key),
+                }))}
+              />
+            )}
+          </Show>
+        </Show>
+      </div>
+      <div class="mt-1 flex w-full text-xs text-muted-foreground">
+        <For each={props.data}>
+          {(d) => <span class="min-w-0 flex-1 truncate text-center">{d.label}</span>}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/charts/DonutChart.tsx

@@ -7,6 +7,7 @@
 import { For, Show, type JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { sliceAngles } from './shared'
 
 export type DonutTone = 'primary' | 'accent' | 'destructive' | 'emit' | 'received' | 'net'
 
@@ -71,17 +72,13 @@ export function DonutChart(props: DonutChartProps): JSX.Element {
   const circumference = () => 2 * Math.PI * radius()
   const total = () => props.data.reduce((sum, d) => sum + d.value, 0)
 
-  const arcs = () => {
-    const grandTotal = total() || 1
-    let cumulative = 0
-    return props.data.map((segment, index) => {
-      const fraction = segment.value / grandTotal
-      const arcLength = fraction * circumference()
-      const offset = cumulative
-      cumulative += arcLength
-      return { segment, index, arcLength, offset }
-    })
-  }
+  const arcs = () =>
+    sliceAngles(props.data.map((d) => d.value)).map((slice) => ({
+      segment: props.data[slice.index],
+      index: slice.index,
+      arcLength: (slice.angle / 360) * circumference(),
+      offset: (slice.start / 360) * circumference(),
+    }))
 
   return (
     <div

package/src/charts/LineChart.tsx

@@ -6,6 +6,7 @@
 import { createSignal, For, Show, type JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { ChartXLabels } from './shared'
 
 export interface LineSeries {
   name?: string
@@ -255,9 +256,7 @@ export function LineChart(props: LineChartProps): JSX.Element {
       </div>
 
       <Show when={props.labels && props.labels.length > 0}>
-        <div class="mt-1 flex w-full text-xs text-muted-foreground">
-          <For each={props.labels}>{(label) => <span class="flex-1 truncate text-center">{label}</span>}</For>
-        </div>
+        <ChartXLabels labels={props.labels ?? []} />
       </Show>
     </div>
   )