npm - @utopia-studio-design/design-system-cli - Versions diffs - 0.4.1 → 0.5.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/data/templates/dashboard-composer/database-workspace.css ADDED Viewed

@@ -0,0 +1,107 @@
+.ceramic-database-toolbar {
+  display: grid;
+  grid-template-columns: minmax(12rem, 1fr) auto auto;
+  align-items: center;
+  gap: var(--space-3);
+}
+.ceramic-database-toolbar label,
+.ceramic-database-toolbar input {
+  min-inline-size: 0;
+  inline-size: 100%;
+}
+.ceramic-database-toolbar input {
+  min-block-size: var(--button-height-sm);
+  border: var(--border-width-hairline) solid var(--input);
+  padding-inline: var(--space-3);
+  background: var(--background);
+  color: var(--foreground);
+  font: inherit;
+}
+.ceramic-database-toolbar > div,
+.ceramic-saved-views {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1);
+}
+.ceramic-saved-views {
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+.ceramic-record-drawer-backdrop {
+  position: fixed;
+  z-index: var(--z-overlay);
+  inset: 0;
+  background: var(--overlay);
+}
+.ceramic-record-drawer {
+  position: fixed;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: var(--z-modal);
+  inline-size: min(100%, 28rem);
+  overflow: auto;
+  padding: var(--space-5);
+  border-inline-start: var(--border-width-strong) solid var(--border);
+  background: var(--popover-surface);
+  color: var(--foreground);
+}
+.ceramic-record-drawer header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+.ceramic-record-drawer header div,
+.ceramic-record-drawer dl {
+  display: grid;
+  gap: var(--space-2);
+}
+.ceramic-record-drawer :is(h2, dl, dd) {
+  margin: 0;
+}
+.ceramic-record-drawer header span,
+.ceramic-record-drawer dt {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+}
+.ceramic-record-drawer dl > div {
+  display: grid;
+  gap: var(--space-1);
+  padding-block: var(--space-3);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+.ceramic-record-drawer .uds-database-property-cell {
+  padding-inline: 0;
+}
+.ceramic-bulk-action-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  inline-size: fit-content;
+  padding: var(--space-2);
+  border: var(--border-width-strong) solid var(--border);
+  background: var(--surface-elevated);
+}
+@media (max-width: 44rem) {
+  .ceramic-database-toolbar {
+    grid-template-columns: 1fr;
+  }
+  .ceramic-database-toolbar > :last-child {
+    inline-size: 100%;
+  }
+}

package/data/templates/dashboard-composer/index.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="A live Ceramic dashboard composed from validated Layout JSON." />
+    <title>Dashboard Composer — Ceramic Design System</title>
+  </head>
+  <body>
+    <a class="skip-link" href="#main-content">Skip to dashboard composer</a>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/data/templates/dashboard-composer/main.tsx ADDED Viewed

@@ -0,0 +1,550 @@
+import {
+  StrictMode,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { createRoot } from 'react-dom/client'
+import { Badge } from '@utopia-studio-design/design-system/Badge'
+import { Button } from '@utopia-studio-design/design-system/Button'
+import {
+  getCeramicBlockDefinition,
+  validateCeramicAgentMutation,
+  validateCeramicLayout,
+  type CeramicLayoutBlock,
+  type CeramicLayoutDocument,
+} from '@utopia-studio-design/design-system/Composition'
+import type {
+  SchedulerEvent,
+} from '@utopia-studio-design/design-system/Calendar'
+import {
+  AgentStatusBlock,
+  type AgentStatusItem,
+} from './AgentStatusBlock'
+import { resolveAgentStatusConfiguration } from './agent-status-contract'
+import { getAgentStatusFixture } from './agent-status-fixture'
+import {
+  ActivityFeedBlock,
+} from './ActivityFeedBlock'
+import { resolveActivityFeedConfiguration } from './activity-feed-contract'
+import { getActivityFeedFixture } from './activity-feed-fixture'
+import { KPIGrid, type MetricDefinition } from './AnalyticsMetricBlocks'
+import { SchedulerShell } from './CalendarApplicationBlocks'
+import { resolveCalendarPanelConfiguration } from './calendar-panel-contract'
+import {
+  CeramicDashboardRenderer,
+  TodoListBlock,
+  type CeramicBlockRenderer,
+  type TodoFilter,
+  type TodoItem,
+} from './DashboardComposerBlocks'
+import {
+  ChartPanelRegistryBlock,
+  IssueTableRegistryBlock,
+} from './RegistryDataBlocks'
+import '@utopia-studio-design/design-system/core.css'
+import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import './agent-status.css'
+import './activity-feed.css'
+import './analytics-dashboard.css'
+import './calendar-application.css'
+import './dashboard-composer.css'
+import initialLayoutDocument from './sample-layout.json'
+import './styles.css'
+const initialLayout = initialLayoutDocument as CeramicLayoutDocument
+const anchorDate = new Date(2026, 2, 9, 12)
+const initialTasks: TodoItem[] = [
+  { id: 'todo-1', title: 'Review the Calendar block API', completed: true, dueLabel: 'Today', priority: 'high' },
+  { id: 'todo-2', title: 'Approve the dashboard layout', completed: false, dueLabel: 'Today', priority: 'high' },
+  { id: 'todo-3', title: 'Prepare the npm release notes', completed: false, dueLabel: 'Today', priority: 'medium' },
+  { id: 'todo-4', title: 'Plan the Puck adapter spike', completed: false, dueLabel: 'Tomorrow', priority: 'low' },
+]
+const initialEvents: SchedulerEvent[] = [
+  {
+    id: 'design-review',
+    title: 'Composer review',
+    start: '2026-03-09T01:00:00.000Z',
+    end: '2026-03-09T02:00:00.000Z',
+    tone: 'accent',
+  },
+  {
+    id: 'release-check',
+    title: 'Release QA',
+    start: '2026-03-09T03:30:00.000Z',
+    end: '2026-03-09T04:15:00.000Z',
+    tone: 'positive',
+  },
+  {
+    id: 'focus-block',
+    title: 'Focus block',
+    start: '2026-03-09T05:00:00.000Z',
+    end: '2026-03-09T06:00:00.000Z',
+    recurrence: { frequency: 'daily', count: 5 },
+  },
+  {
+    id: 'publish-window',
+    title: 'Publish window',
+    start: '2026-03-11T00:00:00.000Z',
+    end: '2026-03-12T00:00:00.000Z',
+    allDay: true,
+    tone: 'warning',
+  },
+]
+const arabicEventTitles: Record<string, string> = {
+  'design-review': 'مراجعة التخطيط',
+  'focus-block': 'وقت التركيز',
+  'publish-window': 'نافذة النشر',
+  'release-check': 'فحص الإصدار',
+}
+const metrics: MetricDefinition[] = [
+  { id: 'open', label: 'Open tasks', value: 3, change: -25, changeLabel: 'vs yesterday' },
+  { id: 'completed', label: 'Completed', value: 8, change: 14, changeLabel: 'this week' },
+  { id: 'focus', label: 'Focus hours', value: 12.5, change: 6, changeLabel: 'this week' },
+]
+interface ComposerData {
+  agents: AgentStatusItem[]
+  compact: boolean
+  date: Date
+  direction: 'ltr' | 'rtl'
+  events: SchedulerEvent[]
+  layout: CeramicLayoutDocument
+  setDate: (date: Date) => void
+  setAgents: (items: AgentStatusItem[]) => void
+  setEvents: (events: SchedulerEvent[]) => void
+  setLayout: (layout: CeramicLayoutDocument) => void
+  setTasks: (items: TodoItem[]) => void
+  tasks: TodoItem[]
+}
+const ComposerDataContext = createContext<ComposerData | null>(null)
+function useComposerData() {
+  const value = useContext(ComposerDataContext)
+  if (!value) throw new Error('Dashboard block renderer must be used inside ComposerDataContext.')
+  return value
+}
+function updateBlockProps(
+  layout: CeramicLayoutDocument,
+  blockId: string,
+  props: Record<string, unknown>,
+) {
+  return {
+    ...layout,
+    blocks: layout.blocks.map((candidate) => (
+      candidate.id === blockId
+        ? { ...candidate, props: { ...candidate.props, ...props } }
+        : candidate
+    )),
+  }
+}
+function TodoRenderer({ block }: { block: CeramicLayoutBlock }) {
+  const { tasks, setTasks } = useComposerData()
+  return (
+    <TodoListBlock
+      density={(block.props.density as 'compact' | 'default' | 'comfortable') ?? 'default'}
+      filter={(block.props.filter as TodoFilter) ?? 'all'}
+      items={tasks}
+      showCompleted={block.props.showCompleted !== false}
+      title={(block.props.title as string) ?? 'Today’s tasks'}
+      onItemsChange={setTasks}
+    />
+  )
+}
+function CalendarRenderer({ block, direction }: { block: CeramicLayoutBlock; direction: 'ltr' | 'rtl' }) {
+  const { compact, date, events, layout, setDate, setEvents, setLayout } = useComposerData()
+  const configuration = resolveCalendarPanelConfiguration(block.props, { compact, direction })
+  const displayEvents = configuration.locale.startsWith('ar')
+    ? events.map((event) => ({
+      ...event,
+      title: arabicEventTitles[event.id] ?? event.title,
+    }))
+    : events
+  return (
+    <SchedulerShell
+      {...configuration}
+      date={date}
+      events={displayEvents}
+      permissions={{ create: true, edit: true, move: true, resize: true, duplicate: true, delete: true }}
+      onDateChange={setDate}
+      onEventCreate={(selectedDate) => {
+        const start = new Date(selectedDate)
+        start.setHours(14, 0, 0, 0)
+        setEvents([...events, {
+          id: `event-${events.length + 1}`,
+          title: configuration.locale.startsWith('ar') ? 'حدث جديد' : 'New event',
+          start: start.toISOString(),
+          end: new Date(start.valueOf() + 30 * 60_000).toISOString(),
+        }])
+      }}
+      onEventsChange={setEvents}
+      onViewChange={(nextView) => setLayout(updateBlockProps(layout, block.id, { view: nextView }))}
+    />
+  )
+}
+function MetricsRenderer({ block }: { block: CeramicLayoutBlock }) {
+  const metricIds = new Set((block.props.metrics as string[]) ?? metrics.map((metric) => metric.id))
+  return (
+    <KPIGrid
+      density={(block.props.density as 'compact' | 'default' | 'comfortable') ?? 'compact'}
+      metrics={metrics.filter((metric) => metricIds.has(metric.id))}
+    />
+  )
+}
+function ActivityRenderer({ block, direction }: { block: CeramicLayoutBlock; direction: 'ltr' | 'rtl' }) {
+  const configuration = resolveActivityFeedConfiguration(block.props, { direction })
+  return (
+    <ActivityFeedBlock
+      {...configuration}
+      items={getActivityFeedFixture(configuration.locale)}
+    />
+  )
+}
+function AgentStatusRenderer({ block, direction }: { block: CeramicLayoutBlock; direction: 'ltr' | 'rtl' }) {
+  const { agents, setAgents } = useComposerData()
+  const configuration = resolveAgentStatusConfiguration(block.props, { direction })
+  const stateById = new Map(agents.map((item) => [item.id, item]))
+  const localizedItems = getAgentStatusFixture(configuration.locale).map((item) => {
+    const runtimeItem = stateById.get(item.id)
+    return runtimeItem
+      ? {
+        ...item,
+        approval: runtimeItem.approval ? item.approval : undefined,
+        progress: runtimeItem.progress,
+        state: runtimeItem.state,
+      }
+      : item
+  })
+  const updateApproval = (item: AgentStatusItem, approved: boolean) => {
+    setAgents(agents.map((candidate) => (
+      candidate.id === item.id
+        ? {
+          ...candidate,
+          approval: undefined,
+          progress: approved ? Math.max(1, candidate.progress ?? 0) : candidate.progress,
+          state: approved ? 'running' : 'blocked',
+        }
+        : candidate
+    )))
+  }
+  return (
+    <AgentStatusBlock
+      {...configuration}
+      items={localizedItems}
+      onApprove={(item) => updateApproval(item, true)}
+      onReject={(item) => updateApproval(item, false)}
+    />
+  )
+}
+const blockRenderers: Record<string, CeramicBlockRenderer> = {
+  'agent-status': AgentStatusRenderer,
+  'activity-feed': ActivityRenderer,
+  'chart-panel': ChartPanelRegistryBlock,
+  'todo-list': TodoRenderer,
+  'calendar-panel': CalendarRenderer,
+  'issue-table': IssueTableRegistryBlock,
+  'metric-grid': MetricsRenderer,
+}
+function App() {
+  const [layout, setLayout] = useState<CeramicLayoutDocument>(() => structuredClone(initialLayout))
+  const [agents, setAgents] = useState<AgentStatusItem[]>(() => getAgentStatusFixture('en-US'))
+  const [tasks, setTasks] = useState(initialTasks)
+  const [events, setEvents] = useState(initialEvents)
+  const [date, setDate] = useState(anchorDate)
+  const [direction, setDirection] = useState<'ltr' | 'rtl'>('ltr')
+  const [dark, setDark] = useState(false)
+  const [editable, setEditable] = useState(true)
+  const [compact, setCompact] = useState(() => window.matchMedia('(max-width: 48rem)').matches)
+  const [feedback, setFeedback] = useState('Layout JSON validated. Seven blocks are rendered.')
+  const nextBlockId = useRef(1)
+  const validation = validateCeramicLayout(layout)
+  const previewsArabic = layout.blocks.some((block) => (
+    (block.type === 'calendar-panel' || block.type === 'activity-feed' || block.type === 'agent-status')
+    && block.props.locale === 'ar-SA'
+  ))
+  useEffect(() => {
+    const media = window.matchMedia('(max-width: 48rem)')
+    const handleChange = () => setCompact(media.matches)
+    media.addEventListener('change', handleChange)
+    return () => media.removeEventListener('change', handleChange)
+  }, [])
+  useEffect(() => {
+    document.documentElement.dir = direction
+    return () => {
+      document.documentElement.dir = 'ltr'
+    }
+  }, [direction])
+  const commitAgentChange = (next: CeramicLayoutDocument, successMessage: string) => {
+    const result = validateCeramicAgentMutation(layout, next)
+    if (!result.ok) {
+      setFeedback(`Registry rejected the proposal: ${result.issues[0]?.message}`)
+      return
+    }
+    setLayout(next)
+    setFeedback(successMessage)
+  }
+  const addBlock = (
+    type:
+      | 'todo-list'
+      | 'calendar-panel'
+      | 'activity-feed'
+      | 'agent-status'
+      | 'issue-table'
+      | 'chart-panel',
+  ) => {
+    const definition = getCeramicBlockDefinition(type)
+    if (!definition) return
+    const nextOrder = Math.max(0, ...layout.blocks.map((block) => block.placement.order)) + 1
+    const block: CeramicLayoutBlock = {
+      id: `${type}-${nextBlockId.current++}`,
+      type,
+      version: definition.version,
+      placement: { column: 1, span: 12, order: nextOrder, compactSpan: 12 },
+      props: type === 'todo-list'
+        ? { title: 'New task list', filter: 'all', density: 'default', showCompleted: true }
+        : type === 'issue-table'
+          ? {
+            columns: ['title', 'status', 'priority', 'owner', 'due'],
+            density: 'default',
+            view: 'active',
+          }
+        : type === 'chart-panel'
+          ? {
+            chartType: 'line',
+            comparison: 'previous-period',
+            showTable: false,
+          }
+        : type === 'agent-status'
+          ? {
+            density: 'default',
+            direction: 'inherit',
+            filter: 'all',
+            locale: 'en-US',
+            maxItems: 6,
+            showApprovals: true,
+            timeZone: 'Asia/Seoul',
+          }
+        : type === 'activity-feed'
+          ? {
+            density: 'default',
+            direction: 'inherit',
+            groupBy: 'day',
+            locale: 'en-US',
+            pageSize: 4,
+            showSources: true,
+            timeZone: 'Asia/Seoul',
+          }
+          : {
+            direction: 'inherit',
+            initialScrollHour: 8,
+            locale: 'en-US',
+            secondaryCalendar: 'none',
+            showAgendaAlternative: false,
+            timeZone: 'Asia/Seoul',
+            view: 'week',
+          },
+      locked: false,
+    }
+    commitAgentChange({ ...layout, blocks: [...layout.blocks, block] }, `${definition.title} added by the agent.`)
+  }
+  const toggleLocalizedBlocks = () => {
+    const locale = previewsArabic ? 'en-US' : 'ar-SA'
+    const directionMode = previewsArabic ? 'inherit' : 'auto'
+    const next = {
+      ...layout,
+      blocks: layout.blocks.map((block) => (
+        block.type === 'calendar-panel' || block.type === 'activity-feed' || block.type === 'agent-status'
+          ? {
+            ...block,
+            props: {
+              ...block.props,
+              direction: directionMode,
+              locale,
+            },
+          }
+          : block
+      )),
+    }
+    commitAgentChange(
+      next,
+      previewsArabic
+        ? 'Localized blocks restored to English.'
+        : 'Calendar, Activity Feed, and Agent Status now preview Arabic with automatic RTL.',
+    )
+  }
+  const proposeSwap = () => {
+    const todo = layout.blocks.find((block) => block.type === 'todo-list')
+    const calendar = layout.blocks.find((block) => block.type === 'calendar-panel')
+    if (!todo || !calendar) {
+      setFeedback('Add both a To-do List and Calendar before asking the agent to rearrange them.')
+      return
+    }
+    const next = {
+      ...layout,
+      blocks: layout.blocks.map((block) => {
+        if (block.id === todo.id) {
+          return {
+            ...block,
+            placement: {
+              ...block.placement,
+              column: Math.min(todo.placement.column, calendar.placement.column) + calendar.placement.span,
+              order: Math.max(todo.placement.order, calendar.placement.order),
+            },
+          }
+        }
+        if (block.id === calendar.id) {
+          return {
+            ...block,
+            placement: {
+              ...block.placement,
+              column: Math.min(todo.placement.column, calendar.placement.column),
+              order: Math.min(todo.placement.order, calendar.placement.order),
+            },
+          }
+        }
+        return block
+      }),
+    }
+    commitAgentChange(next, 'Agent proposal applied: Calendar and To-do positions were exchanged.')
+  }
+  const data = useMemo<ComposerData>(() => ({
+    agents,
+    compact,
+    date,
+    direction,
+    events,
+    layout,
+    setDate,
+    setAgents,
+    setEvents,
+    setLayout,
+    setTasks,
+    tasks,
+  }), [agents, compact, date, direction, events, layout, tasks])
+  return (
+    <ComposerDataContext.Provider value={data}>
+      <main
+        className="dashboard-composer-template"
+        data-color-mode={dark ? 'dark' : 'light'}
+        data-theme="utopia-default"
+        dir={direction}
+        id="main-content"
+      >
+        <header className="composer-header">
+          <div>
+            <span>Live composition</span>
+            <h1>Arrange real Ceramic blocks, not placeholders</h1>
+            <p>To-do, Calendar, Issue Table, Chart, Activity, Agent Status, and Metrics are rendered from the same validated Layout JSON an agent can edit.</p>
+          </div>
+          <div aria-label="Preview controls">
+            <Button asChild>
+              <a href="/templates/dashboard-composer/visual-editor/">Open visual editor</a>
+            </Button>
+            <Button asChild variant="outline">
+              <a href="/templates/dashboard-composer/agent-status-lab/">Open Agent Status State Lab</a>
+            </Button>
+            <Button variant="outline" onClick={toggleLocalizedBlocks}>
+              {previewsArabic ? 'Preview English blocks' : 'Preview Arabic blocks'}
+            </Button>
+            <Button variant="outline" onClick={() => setDirection((value) => value === 'ltr' ? 'rtl' : 'ltr')}>
+              {direction === 'ltr' ? 'Switch to RTL' : 'Switch to LTR'}
+            </Button>
+            <Button variant="outline" onClick={() => setDark((value) => !value)}>
+              {dark ? 'Switch to light' : 'Switch to dark'}
+            </Button>
+          </div>
+        </header>
+        <section aria-labelledby="composer-controls-title" className="composer-controls">
+          <div>
+            <span>Dashboard controls</span>
+            <h2 id="composer-controls-title">Agent and human use the same contract</h2>
+          </div>
+          <div>
+            <Button aria-pressed={editable} variant={editable ? 'default' : 'outline'} onClick={() => setEditable((value) => !value)}>
+              {editable ? 'Finish arranging' : 'Arrange blocks'}
+            </Button>
+            <Button variant="outline" onClick={proposeSwap}>Ask agent to swap To-do and Calendar</Button>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setLayout(structuredClone(initialLayout))
+                setFeedback('Original dashboard layout restored.')
+              }}
+            >
+              Reset layout
+            </Button>
+          </div>
+          <output aria-live="polite" data-valid={validation.ok}>
+            <Badge variant={validation.ok ? 'secondary' : 'destructive'}>
+              {validation.ok ? 'Schema valid' : 'Schema failed'}
+            </Badge>
+            <span>{feedback}</span>
+          </output>
+        </section>
+        <section aria-labelledby="palette-heading" className="composer-palette">
+          <div>
+            <span>Registry palette</span>
+            <h2 id="palette-heading">Add another real block</h2>
+          </div>
+          <div>
+            <Button size="sm" variant="outline" onClick={() => addBlock('todo-list')}>Add To-do List</Button>
+            <Button size="sm" variant="outline" onClick={() => addBlock('calendar-panel')}>Add Calendar</Button>
+            <Button size="sm" variant="outline" onClick={() => addBlock('activity-feed')}>Add Activity Feed</Button>
+            <Button size="sm" variant="outline" onClick={() => addBlock('agent-status')}>Add Agent Status</Button>
+            <Button size="sm" variant="outline" onClick={() => addBlock('issue-table')}>Add Issue Table</Button>
+            <Button size="sm" variant="outline" onClick={() => addBlock('chart-panel')}>Add Chart Panel</Button>
+          </div>
+        </section>
+        <CeramicDashboardRenderer
+          direction={direction}
+          editable={editable}
+          layout={layout}
+          renderers={blockRenderers}
+          onLayoutChange={(next) => {
+            setLayout(next)
+            setFeedback('Layout updated through registered block controls.')
+          }}
+        />
+        <details className="composer-json">
+          <summary>Inspect the live Layout JSON</summary>
+          <p>This document stores semantic block choices and placement. Product tasks and events remain in application data.</p>
+          <pre>{JSON.stringify(layout, null, 2)}</pre>
+        </details>
+      </main>
+    </ComposerDataContext.Provider>
+  )
+}
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)