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

package/data/templates/calendar-application/main.tsx

@@ -0,0 +1,409 @@
+import { StrictMode, useEffect, useMemo, useRef, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { CalendarBlank, Moon, Sun, TextAlignLeft, TextAlignRight } from '@phosphor-icons/react'
+import { Button } from '@utopia-studio-design/design-system/Button'
+import { IconButton } from '@utopia-studio-design/design-system/IconButton'
+import { PhosphorIcon } from '@utopia-studio-design/design-system/PhosphorIcon'
+import type {
+  SchedulerEvent,
+  SchedulerEventEditHandler,
+  SchedulerMutationAdapter,
+  SchedulerResource,
+  SchedulerState,
+  SchedulerView,
+} from '@utopia-studio-design/design-system/Calendar'
+import { getSchedulerLocaleWeekInfo } from '@utopia-studio-design/design-system/Calendar'
+import {
+  AgendaPanel,
+  CalendarSidebar,
+  EventEditorDrawer,
+  SchedulerShell,
+  TimezoneSelector,
+} from './CalendarApplicationBlocks'
+import {
+  calendarLocaleOptions,
+  getCalendarEditorLabels,
+  getCalendarSchedulerLabels,
+  getCalendarSidebarLabels,
+  isArabicCalendarLocale,
+  type CalendarLocale,
+} from './calendar-localization'
+import '@utopia-studio-design/design-system/core.css'
+import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import './calendar-application.css'
+import './styles.css'
+
+const anchorDate = new Date(2026, 2, 9, 12)
+const resources: SchedulerResource[] = [
+  { id: 'product', label: 'Product team', timezone: 'America/New_York' },
+  { id: 'customer', label: 'Customer calls', timezone: 'Europe/London' },
+  { id: 'focus', label: 'Focus time', timezone: 'Asia/Seoul' },
+]
+const initialEvents: SchedulerEvent[] = [
+  {
+    id: 'release-window',
+    title: 'Release window',
+    start: '2026-03-09T04:00:00.000Z',
+    end: '2026-03-10T04:00:00.000Z',
+    allDay: true,
+    resourceId: 'product',
+    tone: 'accent',
+  },
+  {
+    id: 'design-review',
+    title: 'Design review',
+    start: '2026-03-09T13:00:00.000Z',
+    end: '2026-03-09T14:00:00.000Z',
+    resourceId: 'product',
+    tone: 'positive',
+  },
+  {
+    id: 'standup',
+    title: 'Delivery stand-up',
+    start: '2026-03-09T13:30:00.000Z',
+    end: '2026-03-09T14:15:00.000Z',
+    resourceId: 'product',
+    tone: 'warning',
+  },
+  {
+    id: 'focus-series',
+    title: 'Daily focus block',
+    start: '2026-03-09T15:00:00.000Z',
+    end: '2026-03-09T15:30:00.000Z',
+    resourceId: 'focus',
+    recurrence: { frequency: 'daily', count: 5 },
+  },
+  {
+    id: 'customer-call',
+    title: 'Customer onboarding',
+    start: '2026-03-09T22:30:00.000Z',
+    end: '2026-03-09T23:15:00.000Z',
+    resourceId: 'customer',
+  },
+  {
+    id: 'unavailable-lunch',
+    title: 'Unavailable · lunch',
+    start: '2026-03-10T16:00:00.000Z',
+    end: '2026-03-10T17:00:00.000Z',
+    resourceId: 'product',
+    unavailable: true,
+    tone: 'negative',
+  },
+]
+
+const arabicEventTitles: Record<string, string> = {
+  'release-window': 'نافذة الإصدار',
+  'design-review': 'مراجعة التصميم',
+  standup: 'اجتماع متابعة التسليم',
+  'focus-series': 'وقت التركيز اليومي',
+  'customer-call': 'تهيئة العميل',
+  'unavailable-lunch': 'غير متاح · الغداء',
+}
+
+const arabicResourceLabels: Record<string, string> = {
+  product: 'فريق المنتج',
+  customer: 'مكالمات العملاء',
+  focus: 'وقت التركيز',
+}
+
+const timezoneOptions = ['America/New_York', 'Europe/London', 'Asia/Seoul', 'UTC']
+function localeFromUrl(): CalendarLocale {
+  const candidate = new URLSearchParams(window.location.search).get('locale')
+  return calendarLocaleOptions.includes(candidate as CalendarLocale) ? candidate as CalendarLocale : 'en-US'
+}
+
+function usesAutomaticSchedulerDirection() {
+  return new URLSearchParams(window.location.search).get('direction') === 'auto'
+}
+
+function viewFromUrl(): SchedulerView {
+  const candidate = new URLSearchParams(window.location.search).get('view')
+  if (candidate && ['month', 'week', 'day', 'agenda'].includes(candidate)) return candidate as SchedulerView
+  return window.matchMedia('(max-width: 44rem)').matches ? 'day' : 'week'
+}
+
+function App() {
+  const initialLocale = localeFromUrl()
+  const [events, setEvents] = useState(() => initialLocale.startsWith('ar')
+    ? initialEvents.map((event) => ({ ...event, title: arabicEventTitles[event.id] ?? event.title }))
+    : initialEvents)
+  const [date, setDate] = useState(anchorDate)
+  const [view, setView] = useState<SchedulerView>(viewFromUrl)
+  const [timezone, setTimezone] = useState('America/New_York')
+  const [locale, setLocale] = useState<CalendarLocale>(initialLocale)
+  const [direction, setDirection] = useState<'ltr' | 'rtl'>(initialLocale.startsWith('ar') ? 'rtl' : 'ltr')
+  const [dark, setDark] = useState(false)
+  const [state, setState] = useState<SchedulerState>('ready')
+  const [canEdit, setCanEdit] = useState(true)
+  const [qaControlsOpen, setQaControlsOpen] = useState(false)
+  const [selectedResources, setSelectedResources] = useState(resources.map((resource) => resource.id))
+  const [editorEvent, setEditorEvent] = useState<SchedulerEvent | null>(null)
+  const editorTriggerRef = useRef<HTMLElement | null>(null)
+  const automaticSchedulerDirection = usesAutomaticSchedulerDirection()
+  const failNext = useRef(false)
+  const isArabic = isArabicCalendarLocale(locale)
+  const weekInfo = useMemo(() => getSchedulerLocaleWeekInfo(locale), [locale])
+  const schedulerLabels = getCalendarSchedulerLabels(locale)
+  const displayResources = useMemo(() => resources.map((resource) => ({
+    ...resource,
+    label: isArabic ? arabicResourceLabels[resource.id] ?? resource.label : resource.label,
+  })), [isArabic])
+  const visibleEvents = useMemo(
+    () => events.filter((event) => !event.resourceId || selectedResources.includes(event.resourceId)),
+    [events, selectedResources],
+  )
+  const adapter = useMemo<SchedulerMutationAdapter>(() => ({
+    async commit() {
+      const shouldFail = failNext.current
+      failNext.current = false
+      await new Promise((resolve) => window.setTimeout(resolve, 80))
+      if (shouldFail) throw new Error('Fixture calendar mutation rejected')
+    },
+  }), [])
+
+  useEffect(() => {
+    const url = new URL(window.location.href)
+    url.searchParams.set('view', view)
+    url.searchParams.set('locale', locale)
+    window.history.replaceState({}, '', url)
+  }, [locale, view])
+  useEffect(() => {
+    document.documentElement.dir = direction
+    document.documentElement.lang = locale
+    document.title = isArabic
+      ? 'تطبيق التقويم — نظام تصميم Ceramic'
+      : 'Calendar Application — Ceramic Design System'
+    const skipLink = document.querySelector<HTMLAnchorElement>('.skip-link')
+    if (skipLink) skipLink.textContent = isArabic ? 'الانتقال إلى تطبيق التقويم' : 'Skip to calendar application'
+    return () => {
+      document.documentElement.dir = 'ltr'
+      document.documentElement.lang = 'en'
+    }
+  }, [direction, isArabic, locale])
+
+  const createDraft = (selectedDate: Date, trigger?: HTMLElement) => {
+    editorTriggerRef.current = trigger ?? null
+    const start = new Date(selectedDate)
+    start.setHours(10, 0, 0, 0)
+    const end = new Date(start.valueOf() + 30 * 60_000)
+    setEditorEvent({
+      id: `event-${events.length + 1}`,
+      title: isArabic ? 'حدث جديد' : 'New event',
+      start: start.toISOString(),
+      end: end.toISOString(),
+      resourceId: selectedResources[0] ?? resources[0].id,
+    })
+  }
+  const editEvent: SchedulerEventEditHandler = (event, trigger) => {
+    editorTriggerRef.current = trigger ?? null
+    setEditorEvent(event)
+  }
+
+  const saveEvent = async (draft: SchedulerEvent, scope: 'occurrence' | 'series') => {
+    const sourceId = draft.recurrenceId ?? draft.id
+    const exists = events.some((event) => event.id === sourceId)
+    await adapter.commit(
+      { type: exists ? 'update' : 'create', event: draft },
+      new AbortController().signal,
+    )
+    if (draft.recurrenceId && scope === 'occurrence' && draft.occurrenceStart) {
+      setEvents((current) => [
+        ...current.map((event) => event.id === draft.recurrenceId
+          ? { ...event, recurrenceExceptions: [...(event.recurrenceExceptions ?? []), draft.occurrenceStart!] }
+          : event),
+        { ...draft, id: `${draft.recurrenceId}-override-${draft.occurrenceStart}`, recurrenceId: undefined, recurrence: undefined },
+      ])
+    } else {
+      setEvents((current) => current.some((event) => event.id === sourceId)
+        ? current.map((event) => event.id === sourceId ? { ...draft, id: sourceId, recurrenceId: undefined } : event)
+        : [...current, draft])
+    }
+    setEditorEvent(null)
+  }
+
+  return (
+    <main
+      className="calendar-template"
+      data-color-mode={dark ? 'dark' : 'light'}
+      data-theme="utopia-default"
+      dir={direction}
+      id="main-content"
+    >
+      <header className="calendar-appbar">
+        <div className="calendar-appbar-brand">
+          <span className="calendar-appbar-mark">
+            <PhosphorIcon decorative icon={CalendarBlank} weight="fill" />
+          </span>
+          <div>
+            <h1>{isArabic ? 'التقويم' : 'Calendar'}</h1>
+            <p>{new Intl.DateTimeFormat(locale, {
+              weekday: 'long',
+              month: 'long',
+              day: 'numeric',
+            }).format(date)}</p>
+          </div>
+        </div>
+        <div className="calendar-appbar-actions">
+          <TimezoneSelector
+            className="calendar-appbar-locale"
+            label={isArabic ? 'اللغة والمنطقة' : 'Language and region'}
+            timezones={[...calendarLocaleOptions]}
+            value={locale}
+            onValueChange={(value) => {
+              const nextLocale = value as CalendarLocale
+              setLocale(nextLocale)
+              setDirection(nextLocale.startsWith('ar') ? 'rtl' : 'ltr')
+            }}
+          />
+          <TimezoneSelector
+            className="calendar-appbar-timezone"
+            label={isArabic ? 'المنطقة الزمنية' : 'Display timezone'}
+            timezones={timezoneOptions}
+            value={timezone}
+            onValueChange={setTimezone}
+          />
+          <IconButton
+            label={direction === 'ltr'
+              ? (isArabic ? 'تبديل التقويم إلى اليمين' : 'Switch scheduler to RTL')
+              : (isArabic ? 'تبديل التقويم إلى اليسار' : 'Switch scheduler to LTR')}
+            size="sm"
+            variant="ghost"
+            onClick={() => setDirection((value) => value === 'ltr' ? 'rtl' : 'ltr')}
+          >
+            <PhosphorIcon
+              decorative
+              icon={direction === 'ltr' ? TextAlignRight : TextAlignLeft}
+              size="sm"
+            />
+          </IconButton>
+          <IconButton
+            label={dark
+              ? (isArabic ? 'التبديل إلى الوضع الفاتح' : 'Switch to light')
+              : (isArabic ? 'التبديل إلى الوضع الداكن' : 'Switch to dark')}
+            size="sm"
+            variant="ghost"
+            onClick={() => setDark((value) => !value)}
+          >
+            <PhosphorIcon decorative icon={dark ? Sun : Moon} size="sm" />
+          </IconButton>
+        </div>
+      </header>
+
+      <section className="calendar-application-shell">
+        <CalendarSidebar
+          date={date}
+          labels={getCalendarSidebarLabels(locale)}
+          locale={locale}
+          resources={displayResources}
+          selectedResourceIds={selectedResources}
+          weekStartsOn={weekInfo.firstDay}
+          onDateChange={setDate}
+          onResourceToggle={(resourceId) => setSelectedResources((current) => (
+            current.includes(resourceId) ? current.filter((id) => id !== resourceId) : [...current, resourceId]
+          ))}
+        />
+        <SchedulerShell
+          adapter={adapter}
+          availability={[
+            { resourceId: 'product', timezone: 'America/New_York', weekday: 2, startMinute: 720, endMinute: 780, available: false },
+          ]}
+          date={date}
+          calendarSystem="gregory"
+          direction={automaticSchedulerDirection ? undefined : direction}
+          errorMessage={isArabic ? 'تعذر تحميل أحداث التقويم.' : undefined}
+          events={visibleEvents}
+          labels={schedulerLabels}
+          locale={locale}
+          permissions={{
+            create: canEdit,
+            edit: canEdit,
+            move: canEdit,
+            resize: canEdit,
+            duplicate: canEdit,
+            delete: canEdit,
+          }}
+          resources={displayResources}
+          secondaryCalendar={isArabic ? 'islamic-umalqura' : undefined}
+          showAgendaAlternative={false}
+          state={state}
+          timezone={timezone}
+          view={view}
+          weekendDays={weekInfo.weekend}
+          weekStartsOn={weekInfo.firstDay}
+          onDateChange={setDate}
+          onEventCreate={createDraft}
+          onEventEdit={editEvent}
+          onEventsChange={(nextVisible) => {
+            const visibleIds = new Set(visibleEvents.map((event) => event.id))
+            setEvents((current) => [...current.filter((event) => !visibleIds.has(event.id)), ...nextVisible])
+          }}
+          onViewChange={setView}
+        />
+        {view !== 'agenda' ? (
+          <AgendaPanel
+            calendarSystem="gregory"
+            date={date}
+            events={visibleEvents}
+            labels={schedulerLabels}
+            locale={locale}
+            timezone={timezone}
+            weekendDays={weekInfo.weekend}
+            weekStartsOn={weekInfo.firstDay}
+            onEventEdit={editEvent}
+          />
+        ) : null}
+      </section>
+
+      <details
+        className="calendar-fixture-controls"
+        open={qaControlsOpen}
+        onToggle={(event) => setQaControlsOpen(event.currentTarget.open)}
+      >
+        <summary>{isArabic ? 'حالات الاختبار' : 'Test states'}</summary>
+        <div className="calendar-fixture-controls-content">
+          <div>
+            <span>{isArabic ? 'عناصر تحكم اختبار الجودة' : 'QA fixture controls'}</span>
+            <div>
+              {(['ready', 'loading', 'empty', 'error'] as SchedulerState[]).map((item) => (
+                <Button
+                  aria-pressed={state === item}
+                  key={item}
+                  size="sm"
+                  variant={state === item ? 'secondary' : 'ghost'}
+                  onClick={() => setState(item)}
+                >
+                  {item}
+                </Button>
+              ))}
+            </div>
+          </div>
+          <Button aria-pressed={!canEdit} size="sm" variant="outline" onClick={() => setCanEdit((value) => !value)}>
+            {canEdit
+              ? (isArabic ? 'اختبار صلاحيات القراءة فقط' : 'Test read-only permissions')
+              : (isArabic ? 'تمكين تحرير الأحداث' : 'Enable event editing')}
+          </Button>
+          <Button size="sm" variant="outline" onClick={() => { failNext.current = true }}>
+            {isArabic ? 'إفشال الحفظ التالي' : 'Fail next save'}
+          </Button>
+        </div>
+      </details>
+
+      <EventEditorDrawer
+        canDelete={Boolean(editorEvent && events.some((event) => event.id === (editorEvent.recurrenceId ?? editorEvent.id)))}
+        dir={direction}
+        event={editorEvent}
+        labels={getCalendarEditorLabels(locale)}
+        open={Boolean(editorEvent)}
+        returnFocusRef={editorTriggerRef}
+        onClose={() => setEditorEvent(null)}
+        onDelete={(event) => {
+          setEvents((current) => current.filter((item) => item.id !== (event.recurrenceId ?? event.id)))
+          setEditorEvent(null)
+        }}
+        onSave={saveEvent}
+      />
+    </main>
+  )
+}
+
+createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>)

package/data/templates/calendar-application/styles.css

@@ -0,0 +1,248 @@
+* { box-sizing: border-box; }
+
+html,
+body,
+#root {
+  min-block-size: 100%;
+  margin: 0;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
+.skip-link {
+  position: fixed;
+  inset-block-start: var(--space-2);
+  inset-inline-start: var(--space-2);
+  z-index: var(--z-modal);
+  translate: 0 -200%;
+}
+
+.skip-link:focus { translate: 0; }
+
+.calendar-template {
+  min-block-size: 100dvh;
+  padding-inline: var(--page-gutter);
+  padding-block-end: var(--space-4);
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.calendar-template > * {
+  max-inline-size: var(--container-wide);
+  margin-inline: auto;
+}
+
+.calendar-appbar {
+  display: flex;
+  min-block-size: 5rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.calendar-appbar-brand,
+.calendar-appbar-actions {
+  display: flex;
+  align-items: center;
+}
+
+.calendar-appbar-brand {
+  gap: var(--space-3);
+  min-inline-size: 0;
+}
+
+.calendar-appbar-mark {
+  display: inline-grid;
+  flex: 0 0 auto;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  place-items: center;
+  border-radius: var(--radius-control);
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.calendar-appbar-brand > div {
+  display: grid;
+  gap: var(--space-1);
+  min-inline-size: 0;
+}
+
+.calendar-appbar :is(h1, p) { margin: 0; }
+
+.calendar-appbar h1 {
+  font-size: var(--font-size-h4);
+  line-height: var(--line-height-heading);
+  letter-spacing: var(--tracking-heading);
+}
+
+.calendar-appbar p {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.calendar-appbar-actions {
+  gap: var(--space-2);
+}
+
+.calendar-appbar-timezone,
+.calendar-appbar-locale {
+  display: grid;
+  grid-template-columns: auto minmax(10rem, 1fr);
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.calendar-appbar-timezone .uds-field-label,
+.calendar-appbar-locale .uds-field-label {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.calendar-appbar-timezone .uds-select-trigger,
+.calendar-appbar-locale .uds-select-trigger {
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-block-size: var(--button-height-sm);
+}
+
+.calendar-appbar-actions .uds-select-trigger > span {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.calendar-application-shell {
+  display: grid;
+  grid-template-columns: 15rem minmax(0, 1fr) 17rem;
+  align-items: stretch;
+  min-inline-size: 0;
+  min-block-size: calc(100dvh - 8rem);
+  margin-block-start: var(--space-4);
+  overflow: hidden;
+  border: var(--border-width-hairline) solid var(--border);
+  border-radius: var(--radius-surface);
+  background: var(--surface);
+}
+
+.calendar-application-shell > * { min-inline-size: 0; }
+
+.calendar-fixture-controls {
+  margin-block-start: var(--space-3);
+  color: var(--muted-foreground);
+}
+
+.calendar-fixture-controls > summary {
+  inline-size: fit-content;
+  cursor: pointer;
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+}
+
+.calendar-fixture-controls-content,
+.calendar-fixture-controls-content > div > div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.calendar-fixture-controls-content {
+  justify-content: space-between;
+  margin-block-start: var(--space-2);
+  padding: var(--space-3);
+  border: var(--border-width-hairline) dashed var(--border);
+  border-radius: var(--radius-control);
+  background: var(--surface);
+}
+
+.calendar-fixture-controls-content > div {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.calendar-fixture-controls-content > div > span {
+  font-size: var(--font-size-eyebrow);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-eyebrow);
+  text-transform: uppercase;
+}
+
+@media (max-width: 72rem) {
+  .calendar-application-shell {
+    grid-template-columns: 14rem minmax(0, 1fr);
+  }
+
+  .ceramic-agenda-panel {
+    display: none;
+  }
+}
+
+@media (max-width: 52rem) {
+  .calendar-appbar {
+    align-items: flex-start;
+    flex-direction: column;
+    padding-block: var(--space-3);
+  }
+
+  .calendar-appbar-actions {
+    inline-size: 100%;
+  }
+
+  .calendar-appbar-timezone,
+  .calendar-appbar-locale {
+    flex: 1 1 auto;
+  }
+}
+
+@media (max-width: 44rem) {
+  .calendar-template {
+    padding-inline: var(--space-3);
+  }
+
+  .calendar-appbar {
+    min-block-size: auto;
+  }
+
+  .calendar-appbar-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) repeat(2, auto);
+    align-items: start;
+  }
+
+  .calendar-appbar-timezone,
+  .calendar-appbar-locale {
+    grid-template-columns: 1fr;
+  }
+
+  .calendar-appbar-timezone .uds-field-label,
+  .calendar-appbar-locale .uds-field-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .calendar-application-shell {
+    grid-template-columns: minmax(0, 1fr);
+    min-block-size: calc(100dvh - 10rem);
+    margin-block-start: var(--space-3);
+  }
+
+  .ceramic-calendar-sidebar {
+    display: none;
+  }
+
+  .calendar-fixture-controls-content {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}

package/data/templates/calendar-application/template.manifest.json

@@ -0,0 +1,27 @@
+{
+  "id": "calendar-application",
+  "title": "Calendar Application",
+  "status": "available",
+  "route": "/templates/calendar-application/",
+  "entry": "templates/calendar-application/main.tsx",
+  "blocks": [
+    "scheduler-shell",
+    "calendar-sidebar",
+    "event-editor-drawer",
+    "agenda-panel",
+    "timezone-selector"
+  ],
+  "views": ["month", "week", "day", "agenda"],
+  "states": ["loading", "empty", "error", "ready", "conflict"],
+  "themes": ["utopia-default"],
+  "directions": ["ltr", "rtl"],
+  "locales": ["en-US", "ar-SA", "ar-EG", "ar-AE"],
+  "calendarSystems": ["gregory", "islamic-umalqura-secondary"],
+  "regionalWeekFixtures": ["ar-SA", "ar-EG", "ar-AE"],
+  "foundation": ["ceramic-calendar", "ceramic-button", "ceramic-button-group", "ceramic-select", "ceramic-forms"],
+  "packageDependencies": {
+    "@phosphor-icons/react": "^2.1.10"
+  },
+  "responsiveMinimum": "320px",
+  "timezoneFixtures": ["America/New_York", "Europe/London", "Asia/Seoul", "UTC"]
+}

package/data/templates/composition-registry-lab/README.md

@@ -0,0 +1,9 @@
+# Ceramic Composition Registry Lab
+
+Use this runnable template to review the boundary between Ceramic block
+definitions, versioned Layout JSON, agents, Studio runtime, and optional visual
+editors such as Puck.
+
+This is a registry inspector, not a drag-and-drop editor. Planned blocks remain
+visible as roadmap definitions but cannot render in production until their
+reviewed block implementation is registered as available.