@xemahq/ui-kernel 0.11.1 → 0.12.0

package/src/ui/charts/line-chart.tsx

@@ -1,202 +0,0 @@
-// ═══════════════════════════════════════════════════════════════════════════
-// LineChart — one or more line series over shared x-labels, pure SVG (Wave 9.2)
-//
-// Non-finite points break the line (a new segment starts after the gap) rather
-// than emitting a NaN coordinate.
-// ═══════════════════════════════════════════════════════════════════════════
-
-import { ChartEmpty, ChartFrame, type ChartLegendItem } from './chart-frame';
-import {
-  buildAriaSummary,
-  chartColorAt,
-  defaultFormatValue,
-  niceScale,
-} from './chart-utils';
-
-import type { ChartBaseProps, ChartLineSeries } from './chart-types';
-import type { ReactNode } from 'react';
-
-const VIEW_W = 640;
-const VIEW_H = 360;
-const PAD = { top: 12, right: 12, bottom: 44, left: 48 } as const;
-const PLOT_L = PAD.left;
-const PLOT_R = VIEW_W - PAD.right;
-const PLOT_T = PAD.top;
-const PLOT_B = VIEW_H - PAD.bottom;
-const PLOT_W = PLOT_R - PLOT_L;
-const PLOT_H = PLOT_B - PLOT_T;
-
-export interface LineChartProps extends ChartBaseProps {
-  /** One or more named line series. */
-  readonly series: readonly ChartLineSeries[];
-}
-
-/** Break a series' points into finite segments (a gap ends the current run). */
-function toSegments(
-  points: readonly { value: number }[],
-  xToPx: (i: number) => number,
-  yToPx: (v: number) => number,
-): string[] {
-  const segments: string[] = [];
-  let current: string[] = [];
-  points.forEach((p, i) => {
-    if (Number.isFinite(p.value)) {
-      current.push(`${xToPx(i)},${yToPx(p.value)}`);
-    } else if (current.length > 0) {
-      segments.push(current.join(' '));
-      current = [];
-    }
-  });
-  if (current.length > 0) {
-    segments.push(current.join(' '));
-  }
-  return segments;
-}
-
-export function LineChart({
-  series,
-  title,
-  ariaLabel,
-  formatValue,
-  className,
-  emptyLabel = 'No data',
-}: LineChartProps): ReactNode {
-  const format = formatValue ?? defaultFormatValue;
-
-  // Every finite value across all series drives the y-domain and the summary.
-  const finiteValues: number[] = [];
-  let maxLen = 0;
-  for (const s of series) {
-    maxLen = Math.max(maxLen, s.points.length);
-    for (const p of s.points) {
-      if (Number.isFinite(p.value)) {
-        finiteValues.push(p.value);
-      }
-    }
-  }
-
-  if (finiteValues.length === 0) {
-    return (
-      <ChartEmpty title={title} label={emptyLabel} className={className} />
-    );
-  }
-
-  const scale = niceScale(
-    Math.min(...finiteValues),
-    Math.max(...finiteValues),
-    {
-      pinZero: false,
-    },
-  );
-  const span = scale.max - scale.min;
-  const yToPx = (v: number): number =>
-    PLOT_B - ((v - scale.min) / span) * PLOT_H;
-  const xToPx = (i: number): number =>
-    maxLen <= 1 ? PLOT_L + PLOT_W / 2 : PLOT_L + (i / (maxLen - 1)) * PLOT_W;
-
-  // x labels from the longest series (deterministic pick: first of that length).
-  const xLabelSource =
-    series.find((s) => s.points.length === maxLen)?.points ?? [];
-
-  const legend: ChartLegendItem[] = series.map((s, i) => ({
-    label: s.name,
-    color: chartColorAt(i, s.color),
-  }));
-
-  // Summarize the first series' points (or the union count) for the aria label.
-  const summaryPoints = series.flatMap((s) =>
-    s.points
-      .filter((p) => Number.isFinite(p.value))
-      .map((p) => ({ label: `${s.name} ${p.label}`, value: p.value })),
-  );
-  const summary =
-    ariaLabel ?? buildAriaSummary(title, summaryPoints, format, 'point');
-
-  const plot = (
-    <svg
-      role="img"
-      aria-label={summary}
-      width="100%"
-      viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
-      preserveAspectRatio="xMidYMid meet"
-      className="block h-auto w-full overflow-visible text-ink-4"
-    >
-      {/* y gridlines + tick labels */}
-      {scale.ticks.map((t) => {
-        const y = yToPx(t);
-        return (
-          <g key={`y-${t}`}>
-            <line
-              x1={PLOT_L}
-              x2={PLOT_R}
-              y1={y}
-              y2={y}
-              stroke="currentColor"
-              strokeOpacity={0.12}
-            />
-            <text
-              x={PLOT_L - 8}
-              y={y}
-              textAnchor="end"
-              dominantBaseline="middle"
-              fontSize={12}
-              fill="currentColor"
-            >
-              {format(t)}
-            </text>
-          </g>
-        );
-      })}
-
-      {/* x labels */}
-      {xLabelSource.map((p, i) => (
-        <text
-          key={`x-${p.label}-${i}`}
-          x={xToPx(i)}
-          y={PLOT_B + 16}
-          textAnchor="middle"
-          fontSize={12}
-          fill="currentColor"
-        >
-          {p.label}
-        </text>
-      ))}
-
-      {/* lines */}
-      {series.map((s, si) => {
-        const color = chartColorAt(si, s.color);
-        const segments = toSegments(s.points, xToPx, yToPx);
-        return (
-          <g key={`line-${s.name}-${si}`}>
-            {segments.map((pts, gi) => (
-              <polyline
-                key={`seg-${gi}`}
-                points={pts}
-                fill="none"
-                stroke={color}
-                strokeWidth={2}
-                strokeLinejoin="round"
-                strokeLinecap="round"
-              />
-            ))}
-            {s.points.map((p, i) =>
-              Number.isFinite(p.value) ? (
-                <circle
-                  key={`pt-${i}`}
-                  cx={xToPx(i)}
-                  cy={yToPx(p.value)}
-                  r={2.5}
-                  fill={color}
-                >
-                  <title>{`${s.name} — ${p.label}: ${format(p.value)}`}</title>
-                </circle>
-              ) : null,
-            )}
-          </g>
-        );
-      })}
-    </svg>
-  );
-
-  return <ChartFrame plot={plot} legend={legend} className={className} />;
-}

package/src/ui/charts/sparkline.tsx

@@ -1,109 +0,0 @@
-// ═══════════════════════════════════════════════════════════════════════════
-// Sparkline — tiny inline trend line, pure SVG, no axes/legend (Wave 9.2)
-// ═══════════════════════════════════════════════════════════════════════════
-
-import { cn } from '../cn';
-import { chartColorAt, defaultFormatValue, niceScale } from './chart-utils';
-
-import type { ChartValueFormatter } from './chart-types';
-import type { ReactNode } from 'react';
-
-const VIEW_W = 100;
-const VIEW_H = 28;
-const PAD_Y = 3;
-
-export interface SparklineProps {
-  /** The ordered values. Non-finite entries break the line rather than plotting NaN. */
-  readonly values: readonly number[];
-  /** Title — the spine of the `aria-label` summary. */
-  readonly title: string;
-  readonly ariaLabel?: string;
-  readonly formatValue?: ChartValueFormatter;
-  /** Line color (CSS color / `currentColor` / `var(--…)`). Defaults to the brand palette slot 0. */
-  readonly color?: string;
-  readonly className?: string;
-  readonly emptyLabel?: string;
-}
-
-export function Sparkline({
-  values,
-  title,
-  ariaLabel,
-  formatValue,
-  color,
-  className,
-  emptyLabel = 'No data',
-}: SparklineProps): ReactNode {
-  const format = formatValue ?? defaultFormatValue;
-  const finite = values.filter((v) => Number.isFinite(v));
-  // Read the endpoints BEFORE the empty guard so the guard itself narrows them:
-  // both are `undefined` exactly when `finite` is empty, which is the case the
-  // guard already returns for.
-  const first = finite[0];
-  const last = finite[finite.length - 1];
-
-  if (first === undefined || last === undefined) {
-    return (
-      <span
-        role="img"
-        aria-label={`${title}: ${emptyLabel}`}
-        className={cn('inline-block text-body-2 text-ink-4', className)}
-      >
-        {emptyLabel}
-      </span>
-    );
-  }
-
-  const scale = niceScale(Math.min(...finite), Math.max(...finite), {
-    pinZero: false,
-  });
-  const span = scale.max - scale.min;
-  const yToPx = (v: number): number =>
-    VIEW_H - PAD_Y - ((v - scale.min) / span) * (VIEW_H - 2 * PAD_Y);
-  const xToPx = (i: number): number =>
-    values.length <= 1 ? VIEW_W / 2 : (i / (values.length - 1)) * VIEW_W;
-
-  // Break into finite segments so a gap never yields a NaN coordinate.
-  const segments: string[] = [];
-  let current: string[] = [];
-  values.forEach((v, i) => {
-    if (Number.isFinite(v)) {
-      current.push(`${xToPx(i)},${yToPx(v)}`);
-    } else if (current.length > 0) {
-      segments.push(current.join(' '));
-      current = [];
-    }
-  });
-  if (current.length > 0) {
-    segments.push(current.join(' '));
-  }
-
-  const stroke = chartColorAt(0, color);
-  const summary =
-    ariaLabel ??
-    `${title}: trend of ${finite.length} points, from ${format(first)} to ${format(last)}.`;
-
-  return (
-    <svg
-      role="img"
-      aria-label={summary}
-      width="100%"
-      viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
-      preserveAspectRatio="none"
-      className={cn('block h-auto w-full overflow-visible', className)}
-    >
-      {segments.map((pts, i) => (
-        <polyline
-          key={`seg-${i}`}
-          points={pts}
-          fill="none"
-          stroke={stroke}
-          strokeWidth={1.5}
-          strokeLinejoin="round"
-          strokeLinecap="round"
-          vectorEffect="non-scaling-stroke"
-        />
-      ))}
-    </svg>
-  );
-}

package/src/ui/chrome/AsyncBoundary.tsx

@@ -1,74 +0,0 @@
-import EmptyState from './EmptyState';
-import ErrorCard, { type ErrorMessageFormatter } from './ErrorCard';
-import LoadingState, { type LoadingStateVariant } from './LoadingState';
-
-import type { LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
-
-interface AsyncBoundaryEmpty {
-  icon: LucideIcon;
-  title: string;
-  description?: ReactNode;
-}
-
-interface AsyncBoundaryProps {
-  /** Async in flight — renders the loading affordance. */
-  isLoading: boolean;
-  /** Resolved error, if any — renders an `ErrorCard`. */
-  error?: Error | string | unknown | null;
-  /**
-   * When true, the resolved data is empty — renders an `EmptyState`. Only
-   * checked when `empty` config is supplied; otherwise children render.
-   */
-  isEmpty?: boolean;
-  /** Empty-state config; omit to never render an empty state. */
-  empty?: AsyncBoundaryEmpty;
-  /** Retry handler threaded to `ErrorCard`. */
-  onRetry?: () => void;
-  /** Loading affordance variant. */
-  loadingVariant?: LoadingStateVariant;
-  /** Host error decoder threaded to `ErrorCard`. */
-  formatError?: ErrorMessageFormatter;
-  children: ReactNode;
-}
-
-/**
- * Declarative loading / error / empty wrapper. Collapses the
- * `if (isLoading) … if (error) … if (empty) … else children` ladder that
- * every biome list/detail surface re-implements into one component built on
- * the shared `LoadingState` / `ErrorCard` / `EmptyState` primitives.
- *
- * Precedence: loading → error → empty → children.
- */
-export default function AsyncBoundary({
-  isLoading,
-  error,
-  isEmpty,
-  empty,
-  onRetry,
-  loadingVariant,
-  formatError,
-  children,
-}: Readonly<AsyncBoundaryProps>) {
-  if (isLoading) {
-    return <LoadingState variant={loadingVariant} />;
-  }
-
-  if (error) {
-    return (
-      <ErrorCard error={error} onRetry={onRetry} formatError={formatError} />
-    );
-  }
-
-  if (isEmpty && empty) {
-    return (
-      <EmptyState
-        icon={empty.icon}
-        title={empty.title}
-        description={empty.description}
-      />
-    );
-  }
-
-  return <>{children}</>;
-}

package/src/ui/chrome/EmptyState.tsx

@@ -1,257 +0,0 @@
-import { cn } from '../cn';
-import { Button } from '../primitives/button';
-import { Card, CardContent } from '../primitives/card';
-
-import type { LucideIcon } from 'lucide-react';
-import type { ComponentType, ReactNode } from 'react';
-
-export type EmptyStateVariant =
-  | 'not-configured'
-  | 'no-results'
-  | 'disabled-context';
-
-/**
- * Visual density.
- *  - `comfortable` (default): hero empty state for full-page surfaces —
- *    big 64px icon, generous padding, hero copy. Use when the page has
- *    nothing else to render.
- *  - `dense`: inline empty state for surfaces nested inside other
- *    content (tabs, sub-panels). Smaller icon, tighter padding, no
- *    dashed card frame — reads as a calm placeholder, not a banner.
- *  - `inline`: single-line text-only message, no icon, no card. Use
- *    inside list sub-sections where even the dense frame is too much.
- */
-export type EmptyStateSize = 'comfortable' | 'dense' | 'inline';
-
-/**
- * Polymorphic link element. The host shell renders Next.js `<Link>`;
- * pass it via `linkComponent` to get client-side routing. Defaults to a
- * plain anchor so the primitive stays host-framework-agnostic.
- */
-export type EmptyStateLinkComponent = ComponentType<{
-  href: string;
-  children: ReactNode;
-}>;
-
-const DefaultLink: EmptyStateLinkComponent = ({ href, children }) => (
-  <a href={href}>{children}</a>
-);
-
-interface EmptyStateAction {
-  label: string;
-  onClick: () => void;
-  icon?: LucideIcon;
-}
-
-interface EmptyStateSecondaryAction {
-  label: string;
-  href: string;
-}
-
-interface EmptyStateCommonProps {
-  title: string;
-  description?: ReactNode;
-  action?: EmptyStateAction;
-  secondaryAction?: EmptyStateSecondaryAction;
-  /** Host link component for `secondaryAction.href` (defaults to `<a>`). */
-  linkComponent?: EmptyStateLinkComponent;
-  className?: string;
-}
-
-/** `comfortable` / `dense` render an icon block, so the icon is required. */
-interface EmptyStateIconicProps extends EmptyStateCommonProps {
-  size?: Exclude<EmptyStateSize, 'inline'>;
-  icon: LucideIcon;
-  /** Optional illustration or extra content above the title */
-  illustration?: ReactNode;
-  /** Visual variant — drives default iconBg/iconColor unless overridden. */
-  variant?: EmptyStateVariant;
-  /** Icon tint — overrides variant defaults */
-  iconBg?: string;
-  iconColor?: string;
-}
-
-/**
- * `inline` is text-only by definition — no icon block, therefore no icon,
- * illustration, variant or icon tint. They are typed `never` rather than
- * silently ignored: an accepted-but-unrendered prop is how callers ended up
- * importing a lucide icon that renders nowhere.
- */
-interface EmptyStateInlineProps extends EmptyStateCommonProps {
-  size: 'inline';
-  icon?: never;
-  illustration?: never;
-  variant?: never;
-  iconBg?: never;
-  iconColor?: never;
-}
-
-type EmptyStateProps = EmptyStateIconicProps | EmptyStateInlineProps;
-
-const VARIANT_DEFAULTS: Record<
-  EmptyStateVariant,
-  { iconBg: string; iconColor: string }
-> = {
-  'not-configured': { iconBg: 'bg-info/10', iconColor: 'text-info' },
-  'no-results': { iconBg: 'bg-warning/10', iconColor: 'text-warning' },
-  'disabled-context': { iconBg: 'bg-muted', iconColor: 'text-ink-3' },
-};
-
-export default function EmptyState(props: Readonly<EmptyStateProps>) {
-  const { title, description, action, secondaryAction, linkComponent, className } =
-    props;
-  const Link = linkComponent ?? DefaultLink;
-
-  if (props.size === 'inline') {
-    return (
-      <div
-        className={cn(
-          'flex items-center justify-center px-3 py-6 text-center text-body-2 text-ink-4',
-          className,
-        )}
-      >
-        <div className="max-w-sm space-y-1">
-          <p className="text-ink-3">{title}</p>
-          {description && <p className="text-ink-4">{description}</p>}
-          {(action || secondaryAction) && (
-            <div className="mt-3 flex items-center justify-center gap-2">
-              {action && (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={action.onClick}
-                  className="h-7 gap-1.5 text-body-2"
-                >
-                  {action.icon && <action.icon className="h-3.5 w-3.5" />}
-                  {action.label}
-                </Button>
-              )}
-              {secondaryAction && (
-                <Button
-                  asChild
-                  size="sm"
-                  variant="ghost"
-                  className="h-7 px-2 text-body-2"
-                >
-                  <Link href={secondaryAction.href}>
-                    {secondaryAction.label}
-                  </Link>
-                </Button>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  const {
-    icon: Icon,
-    illustration,
-    variant = 'not-configured',
-    size = 'comfortable',
-    iconBg,
-    iconColor,
-  } = props;
-  const defaults = VARIANT_DEFAULTS[variant];
-  const resolvedIconBg = iconBg ?? defaults.iconBg;
-  const resolvedIconColor = iconColor ?? defaults.iconColor;
-
-  if (size === 'dense') {
-    return (
-      <div
-        className={cn(
-          'flex flex-col items-center justify-center px-4 py-8 text-center',
-          className,
-        )}
-      >
-        {illustration ?? (
-          <div
-            className={cn(
-              'h-9 w-9 rounded-xl flex items-center justify-center mb-3',
-              resolvedIconBg,
-            )}
-          >
-            <Icon className={cn('h-4 w-4', resolvedIconColor)} />
-          </div>
-        )}
-        <p className="text-body-1 font-semibold text-ink">{title}</p>
-        {description && (
-          <p className="mt-1 max-w-md text-body-2 leading-snug text-ink-3">
-            {description}
-          </p>
-        )}
-        {(action || secondaryAction) && (
-          <div className="mt-3 flex items-center gap-2">
-            {action && (
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={action.onClick}
-                className="h-7 gap-1.5 text-body-2"
-              >
-                {action.icon && <action.icon className="h-3.5 w-3.5" />}
-                {action.label}
-              </Button>
-            )}
-            {secondaryAction && (
-              <Button
-                asChild
-                size="sm"
-                variant="ghost"
-                className="h-7 px-2 text-body-2"
-              >
-                <Link href={secondaryAction.href}>{secondaryAction.label}</Link>
-              </Button>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <Card
-      className={cn(
-        'border-2 border-dashed border-border/50 rounded-xl',
-        className,
-      )}
-    >
-      <CardContent className="flex flex-col items-center justify-center py-16 text-center">
-        {illustration ?? (
-          <div
-            className={`h-16 w-16 rounded-2xl flex items-center justify-center mb-5 ${resolvedIconBg}`}
-          >
-            <Icon className={`h-7 w-7 ${resolvedIconColor}`} />
-          </div>
-        )}
-        <p className="text-subtitle font-semibold text-ink">{title}</p>
-        {description && (
-          <p className="text-body-1 mt-2 max-w-sm text-ink-3 leading-relaxed">
-            {description}
-          </p>
-        )}
-        {(action || secondaryAction) && (
-          <div className="mt-6 flex items-center gap-3">
-            {action && (
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={action.onClick}
-                className="gap-2 h-10 px-5"
-              >
-                {action.icon && <action.icon className="h-4 w-4" />}
-                {action.label}
-              </Button>
-            )}
-            {secondaryAction && (
-              <Button asChild size="sm" variant="ghost" className="h-10 px-3">
-                <Link href={secondaryAction.href}>{secondaryAction.label}</Link>
-              </Button>
-            )}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/src/ui/chrome/ErrorCard.tsx

@@ -1,63 +0,0 @@
-import { AlertCircle, RefreshCw } from 'lucide-react';
-
-import { getUserFacingErrorMessage } from '../../lib/biome-host/errors';
-import { Button } from '../primitives/button';
-import { Card, CardContent } from '../primitives/card';
-
-/**
- * Host-agnostic error formatter. The default is the canonical, envelope-aware
- * {@link getUserFacingErrorMessage} decoder — biomes get rich error copy with
- * zero wiring. Pass `formatError` only to override with a host-specific decoder
- * (extra codes, i18n); the canonical default already handles Orval envelopes,
- * `ApiClientError`, workflow error codes, and "failed to fetch".
- */
-export type ErrorMessageFormatter = (error: unknown, fallback: string) => string;
-
-const defaultFormatError: ErrorMessageFormatter = (error, fallback) =>
-  getUserFacingErrorMessage(error, fallback);
-
-interface ErrorCardProps {
-  error: Error | string | unknown;
-  title?: string;
-  onRetry?: () => void;
-  /**
-   * Optional host error-decoder. Defaults to a plain message extractor.
-   * The host shell should pass `getUserFacingErrorMessage` to keep its
-   * envelope-aware messaging.
-   */
-  formatError?: ErrorMessageFormatter;
-  fallbackMessage?: string;
-}
-
-export default function ErrorCard({
-  error,
-  title = 'Something went wrong',
-  onRetry,
-  formatError = defaultFormatError,
-  fallbackMessage = 'Unable to load this content right now.',
-}: ErrorCardProps) {
-  const message = formatError(error, fallbackMessage);
-
-  return (
-    <Card className="border-destructive/25 bg-destructive/[0.03] rounded-xl">
-      <CardContent className="flex flex-col items-center py-14 text-center">
-        <div className="h-14 w-14 rounded-2xl bg-destructive/10 flex items-center justify-center mb-4">
-          <AlertCircle className="h-6 w-6 text-destructive" />
-        </div>
-        <p className="text-subtitle font-semibold text-ink">{title}</p>
-        <p className="text-body-1 text-ink-3 mt-2 max-w-md leading-relaxed">{message}</p>
-        {onRetry && (
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={onRetry}
-            className="mt-5 gap-2 h-10 border-destructive/20 text-destructive hover:bg-destructive/5"
-          >
-            <RefreshCw className="h-4 w-4" />
-            Retry
-          </Button>
-        )}
-      </CardContent>
-    </Card>
-  );
-}