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

@utopia-studio-design/design-system-cli 0.4.0 → 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 (127) hide show

package/data/templates/dashboard-composer/agent-status-fixture.ts ADDED Viewed

@@ -0,0 +1,79 @@
+import type { AgentStatusItem } from './AgentStatusBlock'
+const englishItems: AgentStatusItem[] = [
+  {
+    id: 'mina-qa',
+    name: 'Mina UX-QA',
+    progress: 68,
+    risk: 'low',
+    state: 'running',
+    summary: 'Checking responsive, Arabic, and interaction contracts.',
+    taskLabel: 'Dashboard composition QA',
+    updatedAt: '2026-07-30T08:42:00.000Z',
+  },
+  {
+    approval: {
+      id: 'publish-approval',
+      description: 'Publishes the validated patch release to the configured npm registry.',
+      label: 'Publish Ceramic patch release',
+    },
+    id: 'release-agent',
+    name: 'Release Agent',
+    risk: 'medium',
+    state: 'waiting-approval',
+    summary: 'All local release gates passed. External publishing requires a human decision.',
+    taskLabel: 'Prepare npm release',
+    updatedAt: '2026-07-30T08:39:00.000Z',
+  },
+  {
+    id: 'registry-agent',
+    name: 'Registry Agent',
+    risk: 'high',
+    state: 'blocked',
+    summary: 'A required product data adapter has not been connected.',
+    taskLabel: 'Sync production activity source',
+    updatedAt: '2026-07-30T08:31:00.000Z',
+  },
+  {
+    id: 'build-agent',
+    name: 'Build Agent',
+    progress: 100,
+    risk: 'none',
+    state: 'completed',
+    summary: 'Standalone Calendar and Dashboard templates built successfully.',
+    taskLabel: 'Verify generated templates',
+    updatedAt: '2026-07-30T08:20:00.000Z',
+  },
+]
+const arabicItems: AgentStatusItem[] = [
+  {
+    ...englishItems[0],
+    summary: 'جارٍ فحص عقود الاستجابة والعربية والتفاعل.',
+    taskLabel: 'فحص جودة تكوين لوحة المعلومات',
+  },
+  {
+    ...englishItems[1],
+    approval: {
+      id: 'publish-approval',
+      description: 'سيتم نشر إصدار التصحيح المعتمد في سجل npm المحدد.',
+      label: 'نشر إصدار تصحيح Ceramic',
+    },
+    summary: 'نجحت جميع فحوصات الإصدار المحلية. يتطلب النشر الخارجي قراراً بشرياً.',
+    taskLabel: 'إعداد إصدار npm',
+  },
+  {
+    ...englishItems[2],
+    summary: 'لم يتم ربط محول بيانات المنتج المطلوب.',
+    taskLabel: 'مزامنة مصدر النشاط في الإنتاج',
+  },
+  {
+    ...englishItems[3],
+    summary: 'تم بناء قوالب التقويم ولوحة المعلومات المستقلة بنجاح.',
+    taskLabel: 'التحقق من القوالب المولدة',
+  },
+]
+export function getAgentStatusFixture(locale: string): AgentStatusItem[] {
+  return locale.startsWith('ar') ? arabicItems : englishItems
+}

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

@@ -0,0 +1,19 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="A runnable Ceramic Agent Status state, resilience, Arabic, RTL, and approval QA fixture."
+    />
+    <title>Agent Status State Lab — Dashboard Composer</title>
+  </head>
+  <body>
+    <a class="skip-link uds-button uds-button--default uds-button--sm" href="#state-grid">
+      Skip to state fixtures
+    </a>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,151 @@
+import { StrictMode, useMemo, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { Button } from '@utopia-studio-design/design-system/Button'
+import {
+  AgentStatusBlock,
+  type AgentStatusItem,
+} from '../AgentStatusBlock'
+import {
+  resolveAgentStatusConfiguration,
+  type AgentStatusLocale,
+} from '../agent-status-contract'
+import { getAgentStatusFixture } from '../agent-status-fixture'
+import '@utopia-studio-design/design-system/core.css'
+import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import '../agent-status.css'
+import './styles.css'
+type FixtureId = 'loading' | 'empty' | 'error' | 'filtered-empty' | 'ready'
+const fixtureNames: Record<FixtureId, string> = {
+  empty: 'Empty',
+  error: 'Recoverable error',
+  'filtered-empty': 'Filtered empty',
+  loading: 'Loading',
+  ready: 'Ready with approval',
+}
+function App() {
+  const [locale, setLocale] = useState<AgentStatusLocale>('en-US')
+  const [dark, setDark] = useState(false)
+  const [feedback, setFeedback] = useState('All five product-data states are available for inspection.')
+  const [readyItems, setReadyItems] = useState<AgentStatusItem[]>(() => getAgentStatusFixture('en-US'))
+  const configuration = useMemo(() => resolveAgentStatusConfiguration({
+    density: 'default',
+    direction: 'auto',
+    filter: 'all',
+    locale,
+    maxItems: 6,
+    showApprovals: true,
+    timeZone: 'Asia/Seoul',
+  }, { direction: 'ltr' }), [locale])
+  const localizedItems = useMemo(() => {
+    const stateById = new Map(readyItems.map((item) => [item.id, item]))
+    return getAgentStatusFixture(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
+    })
+  }, [locale, readyItems])
+  const completedOnly = localizedItems.filter((item) => item.state === 'completed')
+  const resolveApproval = (item: AgentStatusItem, approved: boolean) => {
+    setReadyItems((current) => current.map((candidate) => (
+      candidate.id === item.id
+        ? {
+          ...candidate,
+          approval: undefined,
+          progress: approved ? Math.max(1, candidate.progress ?? 0) : candidate.progress,
+          state: approved ? 'running' : 'blocked',
+        }
+        : candidate
+    )))
+    setFeedback(approved ? `${item.name} resumed after approval.` : `${item.name} was blocked after rejection.`)
+  }
+  return (
+    <main
+      className="agent-status-lab"
+      data-color-mode={dark ? 'dark' : 'light'}
+      data-theme="utopia-default"
+      dir="ltr"
+    >
+      <header>
+        <div>
+          <span>Resilience fixture</span>
+          <h1>Verify every Agent Status outcome</h1>
+          <p>
+            Product data changes the execution state. Ceramic keeps the same semantic,
+            localized, responsive presentation contract.
+          </p>
+        </div>
+        <div aria-label="State Lab controls">
+          <Button asChild variant="outline">
+            <a href="/templates/dashboard-composer/">Back to runtime</a>
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => setLocale((value) => value === 'en-US' ? 'ar-SA' : 'en-US')}
+          >
+            {locale === 'en-US' ? 'Preview Arabic states' : 'Preview English states'}
+          </Button>
+          <Button variant="outline" onClick={() => setDark((value) => !value)}>
+            {dark ? 'Switch to light' : 'Switch to dark'}
+          </Button>
+        </div>
+        <output aria-live="polite">{feedback}</output>
+      </header>
+      <section aria-label="Agent Status state fixtures" id="state-grid">
+        <article data-fixture="loading">
+          <span>{fixtureNames.loading}</span>
+          <AgentStatusBlock {...configuration} items={[]} state="loading" />
+        </article>
+        <article data-fixture="empty">
+          <span>{fixtureNames.empty}</span>
+          <AgentStatusBlock {...configuration} items={[]} state="empty" />
+        </article>
+        <article data-fixture="error">
+          <span>{fixtureNames.error}</span>
+          <AgentStatusBlock
+            {...configuration}
+            items={[]}
+            onRetry={() => setFeedback('Agent execution source retry requested.')}
+            state="error"
+          />
+        </article>
+        <article data-fixture="filtered-empty">
+          <span>{fixtureNames['filtered-empty']}</span>
+          <AgentStatusBlock
+            {...configuration}
+            filter="attention"
+            items={completedOnly}
+            state="ready"
+          />
+        </article>
+        <article data-fixture="ready">
+          <span>{fixtureNames.ready}</span>
+          <AgentStatusBlock
+            {...configuration}
+            items={localizedItems}
+            onApprove={(item) => resolveApproval(item, true)}
+            onReject={(item) => resolveApproval(item, false)}
+            state="ready"
+          />
+        </article>
+      </section>
+    </main>
+  )
+}
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/data/templates/dashboard-composer/agent-status-lab/styles.css ADDED Viewed

@@ -0,0 +1,139 @@
+* {
+  box-sizing: border-box;
+}
+html,
+body,
+#root {
+  min-block-size: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  margin: 0;
+}
+html,
+body {
+  overflow-x: clip;
+}
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+.skip-link {
+  position: fixed;
+  z-index: var(--z-modal);
+  inset-block-start: var(--space-2);
+  inset-inline-start: var(--space-2);
+  translate: 0 -200%;
+}
+.skip-link:focus {
+  translate: 0;
+}
+.agent-status-lab {
+  min-block-size: 100vh;
+  padding: var(--page-gutter);
+  background: var(--background);
+  color: var(--foreground);
+}
+.agent-status-lab > * {
+  max-inline-size: var(--container-wide);
+  margin-inline: auto;
+}
+.agent-status-lab :is(h1, p) {
+  margin: 0;
+}
+.agent-status-lab > header {
+  display: grid;
+  grid-template-columns: minmax(20rem, 1fr) auto;
+  gap: var(--space-4) var(--space-6);
+  padding-block: var(--space-5);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+.agent-status-lab > header > div:first-child {
+  display: grid;
+  gap: var(--space-2);
+  max-inline-size: 54rem;
+}
+.agent-status-lab > header > div:first-child > span,
+.agent-status-lab article > 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;
+}
+.agent-status-lab > header p {
+  color: var(--muted-foreground);
+  line-height: var(--line-height-body);
+}
+.agent-status-lab > header > div:nth-child(2) {
+  display: flex;
+  align-items: start;
+  justify-content: end;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+.agent-status-lab > header output {
+  grid-column: 1 / -1;
+  min-inline-size: 0;
+  padding: var(--space-3);
+  border: var(--border-width-hairline) solid var(--interaction-selection-border);
+  background: var(--interaction-selection-surface);
+  overflow-wrap: anywhere;
+}
+.agent-status-lab > section {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-4);
+  padding-block: var(--space-5);
+}
+.agent-status-lab article {
+  display: grid;
+  align-content: start;
+  gap: var(--space-2);
+  min-inline-size: 0;
+}
+.agent-status-lab article > .ceramic-agent-status {
+  min-block-size: 20rem;
+  border: var(--border-width-hairline) solid var(--border);
+}
+.agent-status-lab article[data-fixture='ready'] {
+  grid-column: 1 / -1;
+}
+@media (max-width: 48rem) {
+  .agent-status-lab > header,
+  .agent-status-lab > section {
+    grid-template-columns: 1fr;
+  }
+  .agent-status-lab > header > div:nth-child(2) {
+    display: grid;
+    justify-content: stretch;
+  }
+  .agent-status-lab article[data-fixture='ready'] {
+    grid-column: 1;
+  }
+  .agent-status-lab article > .ceramic-agent-status {
+    min-block-size: auto;
+  }
+}

package/data/templates/dashboard-composer/agent-status.css ADDED Viewed

@@ -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/templates/dashboard-composer/analytics-dashboard.css ADDED Viewed

@@ -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;
+  }
+}