@zen-ui-capri/system 0.0.0-stage → 1.1.1

package/src/lib/components/ZenDataDisplay.tsx

@@ -0,0 +1,349 @@
+import { useId, useState, useEffect, type ReactNode } from 'react';
+import { TrendingUp, TrendingDown } from 'lucide-react';
+import { ZenCard } from './ZenCard';
+import { ZenCopyButton } from './ZenButton';
+
+export interface ZenSparklineProps {
+  readonly data: readonly number[];
+  readonly width?: number;
+  readonly height?: number;
+  readonly className?: string;
+}
+
+export function ZenSparkline({
+  data,
+  width = 140,
+  height = 42,
+  className = '',
+}: ZenSparklineProps) {
+  const gradId = useId();
+  const safeData =
+    data.length === 0 ? [0, 0] : data.length === 1 ? [data[0], data[0]] : data;
+
+  const min = Math.min(...safeData);
+  const max = Math.max(...safeData);
+  const range = max - min || 1;
+
+  const coords = safeData.map((val, idx) => {
+    const x = (idx / (safeData.length - 1)) * width;
+    const y =
+      max === min
+        ? height * 0.5
+        : height - 4 - ((val - min) / range) * (height - 8);
+    return { x, y };
+  });
+
+  const linePath = coords
+    .map((pt, i) => `${i === 0 ? 'M' : 'L'}${pt.x.toFixed(1)},${pt.y.toFixed(1)}`)
+    .join(' ');
+  const areaPath = `${linePath} L${width},${height} L0,${height} Z`;
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      aria-hidden="true"
+      className={`overflow-visible ${className}`.trim()}
+    >
+      <defs>
+        <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+          <stop
+            offset="0%"
+            stopColor="var(--zen-accent-primary)"
+            stopOpacity="0.38"
+          />
+          <stop
+            offset="100%"
+            stopColor="var(--zen-accent-primary)"
+            stopOpacity="0.0"
+          />
+        </linearGradient>
+      </defs>
+      <path d={areaPath} fill={`url(#${gradId})`} />
+      <path
+        d={linePath}
+        fill="none"
+        stroke="var(--zen-accent-primary)"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export interface ZenKpiCardProps {
+  readonly label: string;
+  readonly value: string;
+  readonly delta: string;
+  readonly trend?: 'up' | 'down';
+  readonly sparkline?: readonly number[];
+  readonly subtitle?: string;
+  readonly className?: string;
+}
+
+export function ZenKpiCard({
+  label,
+  value,
+  delta,
+  trend = 'up',
+  sparkline,
+  subtitle,
+  className = '',
+}: ZenKpiCardProps) {
+  return (
+    <ZenCard
+      variant="static"
+      padding="sm"
+      className={`flex flex-col justify-between gap-3 ${className}`.trim()}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <span className="zen-telemetry-label">{label}</span>
+        <span
+          className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full zen-font-mono text-[11px] font-semibold ${
+            trend === 'up'
+              ? 'bg-[var(--zen-status-success)]/15 text-[var(--zen-status-success)]'
+              : 'bg-[var(--zen-status-danger)]/15 text-[var(--zen-status-danger)]'
+          }`}
+        >
+          {trend === 'up' ? (
+            <TrendingUp className="w-3 h-3" />
+          ) : (
+            <TrendingDown className="w-3 h-3" />
+          )}
+          {delta}
+        </span>
+      </div>
+
+      <div className="flex items-end justify-between gap-3">
+        <div>
+          <div className="zen-font-display text-2xl sm:text-3xl font-extrabold text-[var(--zen-ink-primary)]">
+            {value}
+          </div>
+          {subtitle && (
+            <div className="zen-font-mono text-[11px] text-[var(--zen-ink-muted)] mt-0.5">
+              {subtitle}
+            </div>
+          )}
+        </div>
+        {sparkline && <ZenSparkline data={sparkline} width={110} height={36} />}
+      </div>
+    </ZenCard>
+  );
+}
+
+export interface ZenProgressBarProps {
+  readonly label: string;
+  readonly value: number;
+  readonly max?: number;
+  readonly unit?: string;
+  readonly className?: string;
+}
+
+export function ZenProgressBar({
+  label,
+  value,
+  max = 100,
+  unit = '%',
+  className = '',
+}: ZenProgressBarProps) {
+  const pct = Math.max(0, Math.min(100, (value / Math.max(max, 1e-6)) * 100));
+  return (
+    <div
+      data-zen-occlude="true"
+      className={`space-y-1.5 ${className}`.trim()}
+    >
+      <div className="flex items-center justify-between zen-font-mono text-xs">
+        <span className="zen-telemetry-label">{label}</span>
+        <span className="font-semibold text-[var(--zen-ink-primary)]">
+          {value}
+          {unit}
+        </span>
+      </div>
+      <div
+        role="progressbar"
+        aria-label={label}
+        aria-valuenow={value}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        className="w-full h-2.5 rounded-full bg-[var(--zen-surface-subtle)] border border-[var(--zen-border-subtle)] overflow-hidden"
+      >
+        <div
+          style={{ width: `${pct}%` }}
+          className="h-full bg-[var(--zen-accent-primary)] transition-all duration-300"
+        />
+      </div>
+    </div>
+  );
+}
+
+export interface ZenCircularGaugeProps {
+  readonly label: string;
+  readonly value: number;
+  readonly max?: number;
+  readonly unit?: string;
+  readonly size?: number;
+}
+
+export function ZenCircularGauge({
+  label,
+  value,
+  max = 100,
+  unit = '%',
+  size = 96,
+}: ZenCircularGaugeProps) {
+  const pct = Math.max(0, Math.min(100, (value / Math.max(max, 1e-6)) * 100));
+  const strokeWidth = 7;
+  const r = (size - strokeWidth * 2) * 0.5;
+  const c = 2 * Math.PI * r;
+  const offset = c - (pct / 100) * c;
+
+  return (
+    <div
+      role="meter"
+      aria-label={label}
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      className="inline-flex flex-col items-center gap-1.5"
+    >
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg width={size} height={size} className="-rotate-90">
+          <circle
+            cx={size * 0.5}
+            cy={size * 0.5}
+            r={r}
+            fill="none"
+            stroke="var(--zen-border-subtle)"
+            strokeWidth={strokeWidth}
+          />
+          <circle
+            cx={size * 0.5}
+            cy={size * 0.5}
+            r={r}
+            fill="none"
+            stroke="var(--zen-accent-primary)"
+            strokeWidth={strokeWidth}
+            strokeDasharray={c}
+            strokeDashoffset={offset}
+            strokeLinecap="round"
+          />
+        </svg>
+        <div className="absolute inset-0 flex items-center justify-center zen-font-mono text-xs font-bold text-[var(--zen-ink-primary)]">
+          {Math.round(pct)}
+          {unit}
+        </div>
+      </div>
+      <span className="zen-telemetry-label">{label}</span>
+    </div>
+  );
+}
+
+export interface ZenAvatarProps {
+  readonly name: string;
+  readonly src?: string;
+  readonly status?: 'online' | 'busy' | 'offline';
+  readonly size?: 'sm' | 'md' | 'lg';
+}
+
+export function ZenAvatar({
+  name,
+  src,
+  status,
+  size = 'md',
+}: ZenAvatarProps) {
+  const [imgError, setImgError] = useState(false);
+
+  useEffect(() => {
+    setImgError(false);
+  }, [src]);
+
+  const initials = name
+    .split(' ')
+    .map((p) => p[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+
+  const sizeClass =
+    size === 'sm'
+      ? 'w-8 h-8 text-xs'
+      : size === 'lg'
+        ? 'w-12 h-12 text-base'
+        : 'w-10 h-10 text-sm';
+
+  return (
+    <div className="relative inline-flex shrink-0">
+      {src && !imgError ? (
+        <img
+          src={src}
+          alt={name}
+          onError={() => setImgError(true)}
+          className={`${sizeClass} rounded-full object-cover border border-[var(--zen-border-strong)]`}
+        />
+      ) : (
+        <span
+          aria-label={name}
+          className={`${sizeClass} rounded-full bg-[var(--zen-accent-subtle)] border border-[var(--zen-accent-border)] text-[var(--zen-accent-primary)] zen-font-mono font-bold inline-flex items-center justify-center`}
+        >
+          {initials}
+        </span>
+      )}
+      {status && (
+        <span
+          className={`absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full ring-2 ring-[var(--zen-bg-canvas)] ${
+            status === 'online'
+              ? 'bg-[var(--zen-status-success)]'
+              : status === 'busy'
+                ? 'bg-[var(--zen-status-danger)]'
+                : 'bg-[var(--zen-ink-muted)]'
+          }`}
+        />
+      )}
+    </div>
+  );
+}
+
+export interface ZenCodeBlockProps {
+  readonly title: string;
+  readonly language?: string;
+  readonly code: string;
+  readonly footerSlot?: ReactNode;
+  readonly className?: string;
+}
+
+export function ZenCodeBlock({
+  title,
+  language = 'TSX',
+  code,
+  footerSlot,
+  className = '',
+}: ZenCodeBlockProps) {
+  return (
+    <div
+      data-zen-occlude="true"
+      className={`rounded-2xl border border-[var(--zen-border-default)] bg-[var(--zen-bg-canvas)] overflow-hidden ${className}`.trim()}
+    >
+      <div className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-[var(--zen-border-subtle)] bg-[var(--zen-surface-subtle)]">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="zen-telemetry-label text-[var(--zen-accent-primary)]">
+            {language}
+          </span>
+          <span className="zen-font-mono text-xs text-[var(--zen-ink-secondary)] truncate">
+            {title}
+          </span>
+        </div>
+        <ZenCopyButton value={code} label="COPY" size="sm" />
+      </div>
+      <pre className="p-4 zen-font-mono text-xs text-[var(--zen-ink-primary)] overflow-x-auto leading-relaxed">
+        <code>{code}</code>
+      </pre>
+      {footerSlot && (
+        <div className="px-4 py-2 border-t border-[var(--zen-border-subtle)]">
+          {footerSlot}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/lib/components/ZenDataTable.tsx

@@ -0,0 +1,143 @@
+import { useState, useMemo, type ReactNode } from 'react';
+import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
+
+export interface ZenTableColumn<T> {
+  readonly key: string;
+  readonly header: string;
+  readonly align?: 'left' | 'right';
+  readonly mono?: boolean;
+  readonly sortable?: boolean;
+  readonly sortValue?: (row: T) => string | number;
+  readonly render: (row: T) => ReactNode;
+}
+
+export interface ZenDataTableProps<T> {
+  readonly columns: readonly ZenTableColumn<T>[];
+  readonly rows: readonly T[];
+  readonly rowKey: (row: T) => string;
+  readonly caption?: string;
+  readonly emptyMessage?: string;
+  readonly className?: string;
+}
+
+export function ZenDataTable<T>({
+  columns,
+  rows,
+  rowKey,
+  caption,
+  emptyMessage = 'No telemetry records available.',
+  className = '',
+}: ZenDataTableProps<T>) {
+  const [sortCol, setSortCol] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+
+  const handleSort = (colKey: string) => {
+    if (sortCol === colKey) {
+      setSortDir((prev) => (prev === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortCol(colKey);
+      setSortDir('asc');
+    }
+  };
+
+  const sortedRows = useMemo(() => {
+    if (!sortCol) return rows;
+    const col = columns.find((c) => c.key === sortCol);
+    if (!col || !col.sortValue) return rows;
+    const getter = col.sortValue;
+    return [...rows].sort((a, b) => {
+      const va = getter(a);
+      const vb = getter(b);
+      if (va < vb) return sortDir === 'asc' ? -1 : 1;
+      if (va > vb) return sortDir === 'asc' ? 1 : -1;
+      return 0;
+    });
+  }, [rows, columns, sortCol, sortDir]);
+
+  return (
+    <div
+      data-zen-occlude="true"
+      className={`zen-table-wrapper overflow-x-auto rounded-2xl border border-[var(--zen-border-default)] zen-surface-static ${className}`.trim()}
+    >
+      <table className="w-full border-collapse text-left text-xs sm:text-sm">
+        {caption && <caption className="sr-only">{caption}</caption>}
+        <thead>
+          <tr className="border-b border-[var(--zen-border-subtle)] bg-[var(--zen-surface-subtle)]">
+            {columns.map((col) => {
+              const isSorted = sortCol === col.key;
+              return (
+                <th
+                  key={col.key}
+                  scope="col"
+                  aria-sort={
+                    col.sortable
+                      ? isSorted
+                        ? sortDir === 'asc'
+                          ? 'ascending'
+                          : 'descending'
+                        : 'none'
+                      : undefined
+                  }
+                  className={`px-4 py-3 zen-telemetry-label ${
+                    col.align === 'right' ? 'text-right' : 'text-left'
+                  }`}
+                >
+                  {col.sortable ? (
+                    <button
+                      type="button"
+                      onClick={() => handleSort(col.key)}
+                      className="zen-focus-ring inline-flex items-center gap-1.5 hover:text-[var(--zen-ink-primary)] cursor-pointer"
+                    >
+                      <span>{col.header}</span>
+                      {isSorted ? (
+                        sortDir === 'asc' ? (
+                          <ArrowUp className="w-3 h-3 text-[var(--zen-accent-primary)]" />
+                        ) : (
+                          <ArrowDown className="w-3 h-3 text-[var(--zen-accent-primary)]" />
+                        )
+                      ) : (
+                        <ArrowUpDown className="w-3 h-3 opacity-50" />
+                      )}
+                    </button>
+                  ) : (
+                    col.header
+                  )}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-[var(--zen-border-subtle)]">
+          {sortedRows.length === 0 ? (
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="px-4 py-8 text-center zen-font-mono text-xs text-[var(--zen-ink-muted)]"
+              >
+                {emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            sortedRows.map((row) => (
+              <tr
+                key={rowKey(row)}
+                className="hover:bg-[var(--zen-surface-subtle)] transition-colors"
+              >
+                {columns.map((col) => (
+                  <td
+                    key={col.key}
+                    className={`px-4 py-3.5 text-[var(--zen-ink-primary)] ${
+                      col.align === 'right' ? 'text-right' : 'text-left'
+                    } ${col.mono ? 'zen-font-mono' : 'zen-font-sans'}`}
+                  >
+                    {col.render(row)}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/lib/components/ZenDossierPanel.tsx

@@ -0,0 +1,120 @@
+import type { ReactNode } from 'react';
+import { ArrowUpRight } from 'lucide-react';
+import {
+  ZenCard,
+  ZenMetricStrip,
+  ZenArchitectureNote,
+  ZenCheckList,
+  type ZenMetricItem,
+} from './ZenCard';
+import { ZenTagList } from './ZenBadge';
+
+export interface ZenDossierItem {
+  readonly id: string;
+  readonly index: string;
+  readonly categoryLabel: string;
+  readonly year: string;
+  readonly title: string;
+  readonly role?: string;
+  readonly subtitle: string;
+  readonly engineeringNote: string;
+  readonly engineeringLabel?: string;
+  readonly highlights?: readonly string[];
+  readonly metrics?: readonly ZenMetricItem[];
+  readonly tags: readonly string[];
+  readonly primaryAction?: {
+    readonly label: string;
+    readonly href: string;
+    readonly icon?: ReactNode;
+  };
+  readonly secondaryAction?: {
+    readonly label: string;
+    readonly href: string;
+    readonly icon?: ReactNode;
+  };
+}
+
+export interface ZenDossierPanelProps {
+  readonly item: ZenDossierItem;
+  readonly footerSlot?: ReactNode;
+  readonly className?: string;
+}
+
+export function ZenDossierPanel({
+  item,
+  footerSlot,
+  className = '',
+}: ZenDossierPanelProps) {
+  return (
+    <ZenCard variant="selected" padding="md" className={className}>
+      <div className="flex items-center justify-between zen-telemetry-label text-[var(--zen-accent-primary)] mb-3">
+        <span>
+          {item.categoryLabel} // {item.index}
+        </span>
+        <span>{item.year}</span>
+      </div>
+
+      <h3 className="zen-font-serif italic text-4xl sm:text-5xl mb-1 text-[var(--zen-ink-primary)]">
+        {item.title}
+      </h3>
+
+      {item.role && (
+        <div className="zen-font-mono text-xs text-[var(--zen-accent-secondary)] mb-2">
+          {item.role}
+        </div>
+      )}
+
+      <div className="zen-font-mono text-xs text-[var(--zen-ink-muted)] mb-5">
+        {item.subtitle}
+      </div>
+
+      {item.metrics && item.metrics.length > 0 && (
+        <ZenMetricStrip metrics={item.metrics} className="mb-5" />
+      )}
+
+      <ZenArchitectureNote
+        label={item.engineeringLabel ?? 'SYSTEM ARCHITECTURE NOTE'}
+        className="mb-5"
+      >
+        {item.engineeringNote}
+      </ZenArchitectureNote>
+
+      {item.highlights && item.highlights.length > 0 && (
+        <ZenCheckList items={item.highlights} className="mb-6" />
+      )}
+
+      <ZenTagList tags={item.tags} className="mb-6" />
+
+      {(item.primaryAction || item.secondaryAction) && (
+        <div className="flex flex-col sm:flex-row gap-3">
+          {item.primaryAction && (
+            <a
+              href={item.primaryAction.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="zen-btn-base zen-btn-primary zen-focus-ring flex-1 py-3 px-5 text-xs"
+            >
+              {item.primaryAction.icon}
+              <span>{item.primaryAction.label}</span>
+              <ArrowUpRight className="w-4 h-4" />
+            </a>
+          )}
+          {item.secondaryAction && (
+            <a
+              href={item.secondaryAction.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="zen-btn-base zen-btn-secondary zen-focus-ring flex-1 py-3 px-5 text-xs"
+            >
+              {item.secondaryAction.icon}
+              <span>{item.secondaryAction.label}</span>
+              <ArrowUpRight className="w-4 h-4" />
+            </a>
+          )}
+        </div>
+      )}
+
+      {footerSlot && <div className="mt-4">{footerSlot}</div>}
+    </ZenCard>
+  );
+}