@utopia-studio-design/design-system-cli 0.4.0 → 0.5.0

package/data/blocks/agent-status/agent-status.css

@@ -0,0 +1,216 @@
+.ceramic-agent-status {
+  container-type: inline-size;
+  display: grid;
+  align-content: start;
+  gap: var(--space-3);
+  min-inline-size: 0;
+  block-size: 100%;
+  padding: var(--space-4);
+  background: var(--surface);
+  color: var(--foreground);
+  text-align: start;
+}
+
+.ceramic-agent-status > header,
+.ceramic-agent-status > header > div,
+.ceramic-agent-status-heading,
+.ceramic-agent-status-meta,
+.ceramic-agent-approval,
+.ceramic-agent-approval > div:last-child {
+  display: flex;
+  align-items: center;
+}
+
+.ceramic-agent-status > header {
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding-block-end: var(--space-3);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-agent-status > header > div {
+  align-items: start;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-inline-size: 0;
+}
+
+.ceramic-agent-status :is(h2, p) {
+  margin: 0;
+}
+
+.ceramic-agent-status > header span {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-eyebrow);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-eyebrow);
+  text-transform: uppercase;
+}
+
+.ceramic-agent-status-list {
+  display: grid;
+  gap: var(--space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ceramic-agent-status-list > li {
+  display: grid;
+  gap: var(--space-3);
+  min-inline-size: 0;
+  padding: var(--space-3);
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--background);
+}
+
+.ceramic-agent-status[data-density='compact'] .ceramic-agent-status-list {
+  gap: var(--space-2);
+}
+
+.ceramic-agent-status[data-density='compact'] .ceramic-agent-status-list > li {
+  gap: var(--space-2);
+  padding: var(--space-2);
+}
+
+.ceramic-agent-status[data-density='comfortable'] .ceramic-agent-status-list > li {
+  gap: var(--space-4);
+  padding: var(--space-4);
+}
+
+.ceramic-agent-status-heading {
+  align-items: start;
+  gap: var(--space-3);
+  min-inline-size: 0;
+}
+
+.ceramic-agent-status-heading > .uds-status-dot {
+  flex: 0 0 auto;
+  margin-block-start: var(--space-2);
+  background: var(--muted-foreground);
+}
+
+.ceramic-agent-status-heading > .uds-status-dot[data-execution-state='running'] {
+  background: var(--primary);
+}
+
+.ceramic-agent-status-heading > .uds-status-dot[data-execution-state='waiting-approval'],
+.ceramic-agent-status-heading > .uds-status-dot[data-execution-state='blocked'] {
+  background: var(--warning);
+}
+
+.ceramic-agent-status-heading > .uds-status-dot[data-execution-state='failed'] {
+  background: var(--destructive);
+}
+
+.ceramic-agent-status-heading > .uds-status-dot[data-execution-state='completed'] {
+  background: var(--success);
+}
+
+.ceramic-agent-status-heading > div {
+  display: grid;
+  flex: 1 1 auto;
+  gap: var(--space-1);
+  min-inline-size: 0;
+}
+
+.ceramic-agent-status-heading > div > span,
+.ceramic-agent-status-list > li > p,
+.ceramic-agent-status-meta {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.ceramic-agent-status-heading > div > :is(strong, span),
+.ceramic-agent-status-list > li > p,
+.ceramic-agent-approval :is(span, p) {
+  overflow-wrap: anywhere;
+}
+
+.ceramic-agent-status-heading > .uds-badge {
+  flex: 0 0 auto;
+}
+
+.ceramic-agent-status-list > li > p {
+  line-height: var(--line-height-body);
+}
+
+.ceramic-agent-status-meta {
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.ceramic-agent-status-meta [data-risk='high'] {
+  border-color: var(--destructive-border);
+  color: var(--destructive-text);
+}
+
+.ceramic-agent-status-meta [data-risk='medium'] {
+  border-color: var(--warning-border);
+  color: var(--warning-text);
+}
+
+.ceramic-agent-approval {
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border-inline-start: var(--border-width-strong) solid var(--warning-border);
+  background: var(--warning-surface);
+}
+
+.ceramic-agent-approval > div:first-child {
+  display: grid;
+  gap: var(--space-1);
+  min-inline-size: 0;
+}
+
+.ceramic-agent-approval > div:first-child > span,
+.ceramic-agent-approval > div:first-child > p {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.ceramic-agent-approval > div:last-child {
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.ceramic-agent-status-state {
+  display: grid;
+  align-content: center;
+  justify-items: start;
+  gap: var(--space-2);
+  min-block-size: 10rem;
+  color: var(--muted-foreground);
+}
+
+.ceramic-agent-status-state strong {
+  color: var(--foreground);
+}
+
+@container (min-width: 48rem) {
+  .ceramic-agent-status-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 32rem) {
+  .ceramic-agent-status {
+    padding: var(--space-3);
+  }
+
+  .ceramic-agent-approval {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .ceramic-agent-approval > div:last-child {
+    inline-size: 100%;
+  }
+
+  .ceramic-agent-approval > div:last-child > .uds-button {
+    flex: 1 1 auto;
+  }
+}

package/data/blocks/analytics-dashboard/AnalyticsDashboardBlocks.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react'
+import { Button } from '@utopia-studio-design/design-system/Button'
+import {
+  ChartRoot,
+  type ChartAnnotationDefinition,
+  type ChartDatum,
+  type ChartSeriesDefinition,
+  type ChartState,
+  type ChartType,
+} from '@utopia-studio-design/design-system/Charts'
+import './analytics-dashboard.css'
+
+export {
+  KPIGrid,
+  type KPIGridProps,
+  type MetricDefinition,
+} from './AnalyticsMetricBlocks'
+
+export interface AnalyticsChartCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  annotations?: ChartAnnotationDefinition[]
+  data: ChartDatum[]
+  description?: React.ReactNode
+  direction?: 'ltr' | 'rtl'
+  series: ChartSeriesDefinition[]
+  showDataTable?: boolean
+  state?: ChartState
+  title: React.ReactNode
+  type?: ChartType
+}
+
+export function AnalyticsChartCard({
+  annotations = [],
+  data,
+  description,
+  direction,
+  series,
+  showDataTable,
+  state,
+  title,
+  type,
+  ...props
+}: AnalyticsChartCardProps) {
+  return (
+    <ChartRoot
+      accessibleSummary={`${String(title)} across ${data.length} periods. Use the chart explorer or data table for exact values.`}
+      annotations={annotations}
+      axis={{ showGrid: true }}
+      data={data}
+      description={description}
+      direction={direction}
+      series={series}
+      showDataTable={showDataTable}
+      state={state}
+      title={title}
+      type={type}
+      {...props}
+    />
+  )
+}
+
+export interface ComparisonChartPanelProps extends AnalyticsChartCardProps {
+  benchmarkLabel?: string
+  benchmarkValue?: number
+}
+
+export function ComparisonChartPanel({
+  benchmarkLabel = 'Target',
+  benchmarkValue,
+  annotations = [],
+  ...props
+}: ComparisonChartPanelProps) {
+  const nextAnnotations = benchmarkValue === undefined
+    ? annotations
+    : [
+        ...annotations,
+        { id: 'benchmark', label: benchmarkLabel, value: benchmarkValue, tone: 'neutral' as const },
+      ]
+  return <AnalyticsChartCard annotations={nextAnnotations} {...props} />
+}
+
+export function ChartWithDataTable(props: AnalyticsChartCardProps) {
+  return <AnalyticsChartCard {...props} showDataTable />
+}
+
+export interface AnalyticsDashboardHeaderProps extends React.HTMLAttributes<HTMLElement> {
+  onRefresh?: () => void
+  periodLabel: string
+  title: string
+}
+
+export function AnalyticsDashboardHeader({
+  onRefresh,
+  periodLabel,
+  title,
+  ...props
+}: AnalyticsDashboardHeaderProps) {
+  return (
+    <header className="ceramic-analytics-header" {...props}>
+      <div>
+        <span>Analytics dashboard</span>
+        <h1>{title}</h1>
+        <p>{periodLabel}</p>
+      </div>
+      <Button variant="outline" onClick={onRefresh}>Refresh data</Button>
+    </header>
+  )
+}

package/data/blocks/analytics-dashboard/AnalyticsMetricBlocks.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import { Badge } from '@utopia-studio-design/design-system/Badge'
+import type { ChartState } from '@utopia-studio-design/design-system/Charts'
+import './analytics-dashboard.css'
+
+export interface MetricDefinition {
+  change?: number
+  changeLabel?: string
+  format?: 'number' | 'percent' | 'currency'
+  id: string
+  label: string
+  value: number
+}
+
+export interface KPIGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  currency?: string
+  density?: 'compact' | 'default' | 'comfortable'
+  locale?: string
+  metrics: MetricDefinition[]
+  state?: ChartState
+}
+
+export function KPIGrid({
+  className,
+  currency = 'USD',
+  density = 'default',
+  locale,
+  metrics,
+  state = metrics.length === 0 ? 'empty' : 'ready',
+  ...props
+}: KPIGridProps) {
+  const formatMetric = (metric: MetricDefinition) => {
+    if (metric.format === 'percent') {
+      return new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1 }).format(metric.value)
+    }
+    if (metric.format === 'currency') {
+      return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+        notation: 'compact',
+        maximumFractionDigits: 1,
+      }).format(metric.value)
+    }
+    return new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 }).format(metric.value)
+  }
+
+  return (
+    <section
+      aria-busy={state === 'loading'}
+      aria-label="Key performance indicators"
+      className={['ceramic-kpi-grid', className].filter(Boolean).join(' ')}
+      data-density={density}
+      data-state={state}
+      {...props}
+    >
+      {state === 'loading' ? (
+        <>
+          {[0, 1, 2].map((item) => <span aria-hidden="true" className="ceramic-kpi-skeleton" key={item} />)}
+          <span className="uds-visually-hidden" role="status">Loading metrics…</span>
+        </>
+      ) : null}
+      {state === 'empty' ? (
+        <div className="ceramic-kpi-state" role="status">
+          <strong>No metrics available</strong>
+          <span>Choose another period or data source.</span>
+        </div>
+      ) : null}
+      {state === 'error' ? (
+        <div className="ceramic-kpi-state" role="alert">
+          <strong>Metrics unavailable</strong>
+          <span>Reconnect the data source and try again.</span>
+        </div>
+      ) : null}
+      {state === 'ready' || state === 'partial' ? metrics.map((metric) => (
+        <article className="ceramic-kpi" key={metric.id}>
+          <span>{metric.label}</span>
+          <strong>{formatMetric(metric)}</strong>
+          {metric.change !== undefined ? (
+            <Badge variant="outline">
+              {metric.change > 0 ? '+' : ''}{metric.change.toFixed(1)}% {metric.changeLabel ?? 'vs previous'}
+            </Badge>
+          ) : <span className="ceramic-kpi-unavailable">No comparison</span>}
+        </article>
+      )) : null}
+    </section>
+  )
+}

package/data/blocks/analytics-dashboard/README.md

@@ -0,0 +1,17 @@
+# Analytics dashboard blocks
+
+Copyable Ceramic blocks for governed analytics dashboards:
+
+- `AnalyticsChartCard`
+- `KPIGrid`
+- `ComparisonChartPanel`
+- `ChartWithDataTable`
+
+The blocks consume `@utopia-studio-design/design-system/Charts`, keep product
+queries and persistence outside the design system, and use semantic
+visualization tokens. Exact values remain available through the keyboard chart
+explorer and optional data table.
+
+`KPIGrid` lives in `AnalyticsMetricBlocks.tsx` so metric-only dashboards do not
+load the chart runtime. `AnalyticsDashboardBlocks.tsx` re-exports it for
+compatibility with existing analytics-template imports.

package/data/blocks/analytics-dashboard/analytics-dashboard.css

@@ -0,0 +1,92 @@
+.ceramic-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+  gap: var(--interaction-density-default);
+  min-inline-size: 0;
+}
+
+.ceramic-kpi-grid[data-density='compact'] {
+  gap: var(--interaction-density-compact);
+}
+
+.ceramic-kpi-grid[data-density='comfortable'] {
+  gap: var(--interaction-density-comfortable);
+}
+
+.ceramic-kpi {
+  display: grid;
+  align-content: start;
+  gap: var(--space-2);
+  min-inline-size: 0;
+  padding: var(--space-4);
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.ceramic-kpi > span:first-child,
+.ceramic-kpi-unavailable {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.ceramic-kpi > strong {
+  font-size: var(--font-size-marketing-h3);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+}
+
+.ceramic-kpi .uds-badge {
+  inline-size: fit-content;
+}
+
+.ceramic-kpi-state {
+  display: grid;
+  grid-column: 1 / -1;
+  justify-items: center;
+  gap: var(--space-2);
+  min-block-size: 10rem;
+  padding: var(--space-6);
+  border: var(--border-width-hairline) dashed var(--border);
+  color: var(--muted-foreground);
+  text-align: center;
+}
+
+.ceramic-kpi-state strong {
+  color: var(--foreground);
+}
+
+.ceramic-kpi-skeleton {
+  min-block-size: 9rem;
+  background: var(--surface-strong);
+}
+
+.ceramic-analytics-header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: var(--space-6);
+  padding-block: var(--space-6);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-analytics-header > div {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.ceramic-analytics-header :is(h1, p) {
+  margin: 0;
+}
+
+.ceramic-analytics-header > div > span,
+.ceramic-analytics-header p {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+@media (max-width: 44rem) {
+  .ceramic-analytics-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}