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

package/data/templates/dashboard-composer/RegistryDataBlocks.tsx

@@ -0,0 +1,238 @@
+import * as React from 'react'
+import { Button } from '@utopia-studio-design/design-system/Button'
+import type {
+  ChartAnnotationDefinition,
+  ChartDatum,
+  ChartSeriesDefinition,
+  ChartType,
+} from '@utopia-studio-design/design-system/Charts'
+import type {
+  DatabaseQuery,
+  DatabaseRecord,
+  DatabaseSchema,
+} from '@utopia-studio-design/design-system/Database'
+import type { CeramicLayoutBlock } from '@utopia-studio-design/design-system/Composition'
+import { DatabaseTableBlock } from './DatabaseWorkspaceBlocks'
+
+const LazyAnalyticsChartCard = React.lazy(async () => {
+  const module = await import('./AnalyticsDashboardBlocks')
+  return { default: module.AnalyticsChartCard }
+})
+
+const issueSchema: DatabaseSchema = {
+  id: 'composer-issues',
+  title: 'Delivery issues',
+  primaryPropertyId: 'title',
+  properties: [
+    { id: 'title', label: 'Issue', type: 'text', required: true, width: 260 },
+    {
+      id: 'status',
+      label: 'Status',
+      type: 'select',
+      width: 150,
+      options: [
+        { id: 'active', label: 'Active', tone: 'warning' },
+        { id: 'backlog', label: 'Backlog' },
+        { id: 'blocked', label: 'Blocked', tone: 'negative' },
+        { id: 'completed', label: 'Completed', tone: 'positive' },
+      ],
+    },
+    {
+      id: 'priority',
+      label: 'Priority',
+      type: 'select',
+      width: 130,
+      options: [
+        { id: 'high', label: 'High', tone: 'negative' },
+        { id: 'medium', label: 'Medium', tone: 'warning' },
+        { id: 'low', label: 'Low' },
+      ],
+    },
+    { id: 'owner', label: 'Owner', type: 'person', width: 140 },
+    { id: 'due', label: 'Due', type: 'date', width: 150 },
+  ],
+}
+
+const issueRecords: DatabaseRecord[] = [
+  { id: 'issue-1', values: { title: 'Audit Arabic calendar navigation', status: 'active', priority: 'high', owner: 'Mina', due: '2026-08-01' } },
+  { id: 'issue-2', values: { title: 'Review visual-editor payload', status: 'active', priority: 'medium', owner: 'Aiden', due: '2026-08-03' } },
+  { id: 'issue-3', values: { title: 'Document registry permissions', status: 'backlog', priority: 'medium', owner: 'Haajar', due: '2026-08-05' } },
+  { id: 'issue-4', values: { title: 'Resolve mobile table overflow', status: 'blocked', priority: 'high', owner: 'Sora', due: '2026-07-31' } },
+  { id: 'issue-5', values: { title: 'Verify Button asChild regression', status: 'completed', priority: 'high', owner: 'Mina', due: '2026-07-29' } },
+  { id: 'issue-6', values: { title: 'Publish Calendar QA fixture', status: 'completed', priority: 'low', owner: 'Aiden', due: '2026-07-30' } },
+]
+
+const chartData: ChartDatum[] = [
+  { id: 'mon', label: 'Mon', values: { completed: 18, previous: 14 } },
+  { id: 'tue', label: 'Tue', values: { completed: 23, previous: 17 } },
+  { id: 'wed', label: 'Wed', values: { completed: 20, previous: 19 } },
+  { id: 'thu', label: 'Thu', values: { completed: 28, previous: 21 } },
+  { id: 'fri', label: 'Fri', values: { completed: 31, previous: 25 } },
+]
+
+const currentSeries: ChartSeriesDefinition = {
+  id: 'completed',
+  label: 'Completed work',
+  tone: 'primary',
+}
+const previousSeries: ChartSeriesDefinition = {
+  id: 'previous',
+  label: 'Previous period',
+  pattern: 'dash',
+  tone: 'benchmark',
+}
+
+function issueQuery(view: unknown): DatabaseQuery {
+  if (view === 'active') {
+    return {
+      filters: [{
+        id: 'active-issues',
+        propertyId: 'status',
+        operator: 'not-equals',
+        value: 'completed',
+      }],
+    }
+  }
+  if (view === 'backlog' || view === 'blocked' || view === 'completed') {
+    return {
+      filters: [{
+        id: `${view}-issues`,
+        propertyId: 'status',
+        operator: 'equals',
+        value: view,
+      }],
+    }
+  }
+  return {}
+}
+
+export function IssueTableRegistryBlock({
+  block,
+  direction,
+}: {
+  block: CeramicLayoutBlock
+  direction: 'ltr' | 'rtl'
+}) {
+  const requestedColumns = Array.isArray(block.props.columns)
+    ? block.props.columns.filter((column): column is string => typeof column === 'string')
+    : []
+  const visibleColumnIds = new Set(
+    requestedColumns.length
+      ? ['title', ...requestedColumns]
+      : issueSchema.properties.map((property) => property.id),
+  )
+  const density = (
+    block.props.density === 'compact'
+    || block.props.density === 'comfortable'
+    || block.props.density === 'default'
+  )
+    ? block.props.density
+    : 'default'
+
+  return (
+    <div className="ceramic-issue-table-block">
+      <DatabaseTableBlock
+        density={density}
+        direction={direction}
+        permissions={{
+          bulkActions: false,
+          edit: false,
+          reorderColumns: false,
+          reorderRows: false,
+          resizeColumns: false,
+        }}
+        query={issueQuery(block.props.view)}
+        records={issueRecords}
+        schema={{
+          ...issueSchema,
+          properties: issueSchema.properties.map((property) => ({
+            ...property,
+            hidden: !visibleColumnIds.has(property.id),
+          })),
+        }}
+        state="ready"
+      />
+    </div>
+  )
+}
+
+class ChartLoadBoundary extends React.Component<
+  { children: React.ReactNode },
+  { failed: boolean }
+> {
+  state = { failed: false }
+
+  static getDerivedStateFromError() {
+    return { failed: true }
+  }
+
+  componentDidCatch(error: Error) {
+    console.error('The registered chart renderer failed to load.', error)
+  }
+
+  render() {
+    if (this.state.failed) {
+      return (
+        <div className="ceramic-chart-panel-state" role="alert">
+          <strong>Chart preview could not load.</strong>
+          <span>The layout remains valid. Retry the optional visualization module.</span>
+          <Button size="sm" variant="outline" onClick={() => window.location.reload()}>
+            Retry chart
+          </Button>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
+export function ChartPanelRegistryBlock({
+  block,
+  direction,
+}: {
+  block: CeramicLayoutBlock
+  direction: 'ltr' | 'rtl'
+}) {
+  const chartType = (
+    ['line', 'bar', 'area', 'stacked', 'scatter', 'donut'] as ChartType[]
+  ).includes(block.props.chartType as ChartType)
+    ? block.props.chartType as ChartType
+    : 'line'
+  const comparison = typeof block.props.comparison === 'string'
+    ? block.props.comparison
+    : 'previous-period'
+  const annotations: ChartAnnotationDefinition[] = comparison === 'benchmark'
+    ? [{ id: 'benchmark', label: 'Team benchmark', value: 24, tone: 'neutral' }]
+    : comparison === 'target'
+      ? [{ id: 'target', label: 'Weekly target', value: 30, tone: 'neutral' }]
+      : []
+  const series = comparison === 'previous-period'
+    ? [currentSeries, previousSeries]
+    : [currentSeries]
+
+  return (
+    <div className="ceramic-chart-panel-block" dir={direction}>
+      <ChartLoadBoundary>
+        <React.Suspense
+          fallback={(
+            <div className="ceramic-chart-panel-state" role="status">
+              Loading chart preview…
+            </div>
+          )}
+        >
+          <LazyAnalyticsChartCard
+            annotations={annotations}
+            data={chartData}
+            description="Completed delivery work by weekday"
+            direction={direction}
+            series={series}
+            showDataTable={block.props.showTable === true}
+            state="ready"
+            title="Delivery throughput"
+            type={chartType}
+          />
+        </React.Suspense>
+      </ChartLoadBoundary>
+    </div>
+  )
+}

package/data/templates/dashboard-composer/activity-feed-contract.ts

@@ -0,0 +1,96 @@
+import { getLocaleTextDirection } from '@utopia-studio-design/design-system/Utilities'
+import type {
+  ActivityFeedBlockProps,
+  ActivityFeedLabels,
+} from './ActivityFeedBlock'
+
+export const activityFeedLocaleOptions = ['en-US', 'ar-SA', 'ar-EG', 'ar-AE'] as const
+
+export type ActivityFeedLocale = typeof activityFeedLocaleOptions[number]
+export type ActivityFeedDirection = 'inherit' | 'auto' | 'ltr' | 'rtl'
+
+export interface ActivityFeedConfiguration {
+  density: NonNullable<ActivityFeedBlockProps['density']>
+  direction?: 'ltr' | 'rtl'
+  groupBy: NonNullable<ActivityFeedBlockProps['groupBy']>
+  labels: ActivityFeedLabels
+  locale: ActivityFeedLocale
+  pageSize: number
+  showSources: boolean
+  timeZone: string
+}
+
+export interface ActivityFeedContext {
+  direction: 'ltr' | 'rtl'
+}
+
+const directionModes: ActivityFeedDirection[] = ['inherit', 'auto', 'ltr', 'rtl']
+const densities: ActivityFeedConfiguration['density'][] = ['compact', 'default', 'comfortable']
+const groupings: ActivityFeedConfiguration['groupBy'][] = ['none', 'day', 'source']
+
+const englishLabels: ActivityFeedLabels = {
+  end: 'You have reached the end of the activity.',
+  emptyDescription: 'New updates will appear here when work changes.',
+  emptyTitle: 'No activity yet',
+  errorDescription: 'Reconnect the activity source and try again.',
+  errorTitle: 'Activity unavailable',
+  eyebrow: 'Activity',
+  invalidTime: 'Time unavailable',
+  loadMore: 'Load more',
+  loading: 'Loading activity…',
+  otherSource: 'Other',
+  retry: 'Try again',
+  title: 'Recent activity',
+}
+
+const arabicLabels: ActivityFeedLabels = {
+  end: 'وصلت إلى نهاية سجل النشاط.',
+  emptyDescription: 'ستظهر التحديثات الجديدة هنا عند تغيّر العمل.',
+  emptyTitle: 'لا يوجد نشاط بعد',
+  errorDescription: 'أعد الاتصال بمصدر النشاط ثم حاول مرة أخرى.',
+  errorTitle: 'النشاط غير متاح',
+  eyebrow: 'النشاط',
+  invalidTime: 'الوقت غير متاح',
+  loadMore: 'تحميل المزيد',
+  loading: 'جارٍ تحميل النشاط…',
+  otherSource: 'أخرى',
+  retry: 'حاول مرة أخرى',
+  title: 'النشاط الأخير',
+}
+
+export function getActivityFeedLabels(locale: string): ActivityFeedLabels {
+  return getLocaleTextDirection(locale) === 'rtl' ? arabicLabels : englishLabels
+}
+
+export function resolveActivityFeedConfiguration(
+  props: Record<string, unknown>,
+  context: ActivityFeedContext,
+): ActivityFeedConfiguration {
+  const locale = activityFeedLocaleOptions.includes(props.locale as ActivityFeedLocale)
+    ? props.locale as ActivityFeedLocale
+    : 'en-US'
+  const directionMode = directionModes.includes(props.direction as ActivityFeedDirection)
+    ? props.direction as ActivityFeedDirection
+    : 'inherit'
+  const direction = directionMode === 'inherit'
+    ? context.direction
+    : directionMode === 'auto' ? getLocaleTextDirection(locale) : directionMode
+  const pageSize = Number.isInteger(props.pageSize)
+    ? Math.min(20, Math.max(2, Number(props.pageSize)))
+    : 4
+
+  return {
+    density: densities.includes(props.density as ActivityFeedConfiguration['density'])
+      ? props.density as ActivityFeedConfiguration['density']
+      : 'default',
+    direction,
+    groupBy: groupings.includes(props.groupBy as ActivityFeedConfiguration['groupBy'])
+      ? props.groupBy as ActivityFeedConfiguration['groupBy']
+      : 'day',
+    labels: getActivityFeedLabels(locale),
+    locale,
+    pageSize,
+    showSources: props.showSources !== false,
+    timeZone: typeof props.timeZone === 'string' && props.timeZone ? props.timeZone : 'UTC',
+  }
+}

package/data/templates/dashboard-composer/activity-feed-fixture.ts

@@ -0,0 +1,22 @@
+import type { ActivityFeedItem } from './ActivityFeedBlock'
+
+const activityItems: Record<'en' | 'ar', ActivityFeedItem[]> = {
+  en: [
+    { id: 'activity-1', label: 'Calendar block moved after the task list', source: 'Studio', timestamp: '2026-03-09T00:20:00.000Z', tone: 'info' },
+    { id: 'activity-2', label: 'Release QA completed without blockers', source: 'Mina', timestamp: '2026-03-09T01:10:00.000Z', tone: 'positive' },
+    { id: 'activity-3', label: 'Layout JSON published to this workspace', source: 'Agent', timestamp: '2026-03-09T02:30:00.000Z', tone: 'positive' },
+    { id: 'activity-4', label: 'Design-system package data synchronized', source: 'CLI', timestamp: '2026-03-08T06:40:00.000Z', tone: 'neutral' },
+    { id: 'activity-5', label: 'Arabic calendar review requested', source: 'Studio', timestamp: '2026-03-08T08:15:00.000Z', tone: 'warning' },
+  ],
+  ar: [
+    { id: 'activity-1', label: 'نُقلت كتلة التقويم بعد قائمة المهام', source: 'الاستوديو', timestamp: '2026-03-09T00:20:00.000Z', tone: 'info' },
+    { id: 'activity-2', label: 'اكتمل فحص الإصدار من دون عوائق', source: 'مينا', timestamp: '2026-03-09T01:10:00.000Z', tone: 'positive' },
+    { id: 'activity-3', label: 'نُشر ملف تخطيط JSON في مساحة العمل', source: 'الوكيل', timestamp: '2026-03-09T02:30:00.000Z', tone: 'positive' },
+    { id: 'activity-4', label: 'تمت مزامنة بيانات حزمة نظام التصميم', source: 'CLI', timestamp: '2026-03-08T06:40:00.000Z', tone: 'neutral' },
+    { id: 'activity-5', label: 'طُلبت مراجعة التقويم العربي', source: 'الاستوديو', timestamp: '2026-03-08T08:15:00.000Z', tone: 'warning' },
+  ],
+}
+
+export function getActivityFeedFixture(locale: string) {
+  return activityItems[locale.startsWith('ar') ? 'ar' : 'en']
+}

package/data/templates/dashboard-composer/activity-feed.css

@@ -0,0 +1,154 @@
+.ceramic-activity-feed {
+  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-activity-feed > header,
+.ceramic-activity-feed > header > div,
+.ceramic-activity-items > li,
+.ceramic-activity-copy > div,
+.ceramic-activity-feed > footer {
+  display: flex;
+  align-items: center;
+}
+
+.ceramic-activity-feed > 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-activity-feed > header > div {
+  align-items: start;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-inline-size: 0;
+}
+
+.ceramic-activity-feed :is(h2, h3, p) {
+  margin: 0;
+}
+
+.ceramic-activity-feed > 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-activity-groups {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.ceramic-activity-groups > section {
+  display: grid;
+  gap: var(--space-2);
+  min-inline-size: 0;
+}
+
+.ceramic-activity-groups h3 {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ceramic-activity-items {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ceramic-activity-items > li {
+  position: relative;
+  align-items: start;
+  gap: var(--space-3);
+  min-inline-size: 0;
+  padding-block: var(--space-2);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-activity-feed[data-density='compact'] .ceramic-activity-items > li {
+  padding-block: var(--space-1);
+}
+
+.ceramic-activity-feed[data-density='comfortable'] .ceramic-activity-items > li {
+  padding-block: var(--space-3);
+}
+
+.ceramic-activity-marker {
+  flex: 0 0 auto;
+  margin-block-start: var(--space-1);
+  background: var(--muted-foreground);
+}
+
+.ceramic-activity-marker[data-tone='info'] {
+  background: var(--primary);
+}
+
+.ceramic-activity-marker[data-tone='positive'] {
+  background: var(--success);
+}
+
+.ceramic-activity-marker[data-tone='warning'] {
+  background: var(--warning);
+}
+
+.ceramic-activity-marker[data-tone='critical'] {
+  background: var(--destructive);
+}
+
+.ceramic-activity-copy {
+  display: grid;
+  gap: var(--space-1);
+  min-inline-size: 0;
+}
+
+.ceramic-activity-copy p {
+  overflow-wrap: anywhere;
+  line-height: var(--line-height-body);
+}
+
+.ceramic-activity-copy > div {
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.ceramic-activity-state {
+  display: grid;
+  align-content: center;
+  justify-items: start;
+  gap: var(--space-2);
+  min-block-size: 10rem;
+  color: var(--muted-foreground);
+}
+
+.ceramic-activity-state strong {
+  color: var(--foreground);
+}
+
+.ceramic-activity-feed > footer {
+  justify-content: center;
+  min-block-size: var(--control-size-sm);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+@media (max-width: 28rem) {
+  .ceramic-activity-feed {
+    padding: var(--space-3);
+  }
+}

package/data/templates/dashboard-composer/agent-status-contract.ts

@@ -0,0 +1,133 @@
+import { getLocaleTextDirection } from '@utopia-studio-design/design-system/Utilities'
+import type {
+  AgentStatusBlockProps,
+  AgentStatusFilter,
+  AgentStatusLabels,
+} from './AgentStatusBlock'
+
+export const agentStatusLocaleOptions = ['en-US', 'ar-SA', 'ar-EG', 'ar-AE'] as const
+
+export type AgentStatusLocale = typeof agentStatusLocaleOptions[number]
+export type AgentStatusDirection = 'inherit' | 'auto' | 'ltr' | 'rtl'
+
+export interface AgentStatusConfiguration {
+  density: NonNullable<AgentStatusBlockProps['density']>
+  direction?: 'ltr' | 'rtl'
+  filter: AgentStatusFilter
+  labels: AgentStatusLabels
+  locale: AgentStatusLocale
+  maxItems: number
+  showApprovals: boolean
+  timeZone: string
+}
+
+export interface AgentStatusContext {
+  direction: 'ltr' | 'rtl'
+}
+
+const directions: AgentStatusDirection[] = ['inherit', 'auto', 'ltr', 'rtl']
+const densities: AgentStatusConfiguration['density'][] = ['compact', 'default', 'comfortable']
+const filters: AgentStatusFilter[] = ['all', 'active', 'attention', 'completed']
+
+const englishLabels: AgentStatusLabels = {
+  approve: 'Approve',
+  approvalRequested: 'Approval requested',
+  count: (visible, total) => `${visible} of ${total}`,
+  emptyDescription: 'Agent executions will appear here when work begins.',
+  emptyTitle: 'No agent executions',
+  errorDescription: 'Reconnect the execution source and try again.',
+  errorTitle: 'Agent status unavailable',
+  eyebrow: 'Agent operations',
+  loading: 'Loading agent status…',
+  noMatchingDescription: 'Change the semantic filter to review other executions.',
+  noMatchingTitle: 'No executions match this view',
+  progress: 'Progress',
+  reject: 'Reject',
+  retry: 'Try again',
+  risk: {
+    high: 'High risk',
+    low: 'Low risk',
+    medium: 'Medium risk',
+  },
+  state: {
+    blocked: 'Blocked',
+    completed: 'Completed',
+    failed: 'Failed',
+    queued: 'Queued',
+    running: 'Running',
+    'waiting-approval': 'Waiting for approval',
+  },
+  timeUnavailable: 'Update time unavailable',
+  title: 'Agent status',
+  updated: 'Updated',
+}
+
+const arabicLabels: AgentStatusLabels = {
+  approve: 'موافقة',
+  approvalRequested: 'طلب موافقة',
+  count: (visible, total) => `${visible} من ${total}`,
+  emptyDescription: 'ستظهر عمليات الوكلاء هنا عند بدء العمل.',
+  emptyTitle: 'لا توجد عمليات للوكلاء',
+  errorDescription: 'أعد الاتصال بمصدر التنفيذ ثم حاول مرة أخرى.',
+  errorTitle: 'حالة الوكلاء غير متاحة',
+  eyebrow: 'عمليات الوكلاء',
+  loading: 'جارٍ تحميل حالة الوكلاء…',
+  noMatchingDescription: 'غيّر عامل التصفية الدلالي لمراجعة العمليات الأخرى.',
+  noMatchingTitle: 'لا توجد عمليات مطابقة لهذا العرض',
+  progress: 'التقدم',
+  reject: 'رفض',
+  retry: 'حاول مرة أخرى',
+  risk: {
+    high: 'مخاطر عالية',
+    low: 'مخاطر منخفضة',
+    medium: 'مخاطر متوسطة',
+  },
+  state: {
+    blocked: 'متوقف',
+    completed: 'مكتمل',
+    failed: 'فشل',
+    queued: 'في قائمة الانتظار',
+    running: 'قيد التشغيل',
+    'waiting-approval': 'بانتظار الموافقة',
+  },
+  timeUnavailable: 'وقت التحديث غير متاح',
+  title: 'حالة الوكلاء',
+  updated: 'آخر تحديث',
+}
+
+export function getAgentStatusLabels(locale: string): AgentStatusLabels {
+  return getLocaleTextDirection(locale) === 'rtl' ? arabicLabels : englishLabels
+}
+
+export function resolveAgentStatusConfiguration(
+  props: Record<string, unknown>,
+  context: AgentStatusContext,
+): AgentStatusConfiguration {
+  const locale = agentStatusLocaleOptions.includes(props.locale as AgentStatusLocale)
+    ? props.locale as AgentStatusLocale
+    : 'en-US'
+  const directionMode = directions.includes(props.direction as AgentStatusDirection)
+    ? props.direction as AgentStatusDirection
+    : 'inherit'
+  const direction = directionMode === 'inherit'
+    ? context.direction
+    : directionMode === 'auto' ? getLocaleTextDirection(locale) : directionMode
+  const maxItems = Number.isInteger(props.maxItems)
+    ? Math.min(12, Math.max(1, Number(props.maxItems)))
+    : 6
+
+  return {
+    density: densities.includes(props.density as AgentStatusConfiguration['density'])
+      ? props.density as AgentStatusConfiguration['density']
+      : 'default',
+    direction,
+    filter: filters.includes(props.filter as AgentStatusFilter)
+      ? props.filter as AgentStatusFilter
+      : 'all',
+    labels: getAgentStatusLabels(locale),
+    locale,
+    maxItems,
+    showApprovals: props.showApprovals !== false,
+    timeZone: typeof props.timeZone === 'string' && props.timeZone ? props.timeZone : 'UTC',
+  }
+}