@utopia-studio-design/design-system-cli 0.6.2 → 0.7.0

package/data/templates/chat-workspace/main.tsx

@@ -0,0 +1,97 @@
+import { StrictMode, useState, type FormEvent } from 'react'
+import { createRoot } from 'react-dom/client'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@utopia-studio-design/design-system/Card'
+import { Button } from '@utopia-studio-design/design-system/Button'
+import {
+  ChatComposer,
+  ChatComposerInput,
+  ChatLayout,
+  ChatMessage,
+  ChatMessageBubble,
+  ChatMessageList,
+  ChatMessageMetadata,
+  ChatSendButton,
+  ChatToolPanel,
+} from '@utopia-studio-design/design-system/Chat'
+import '@utopia-studio-design/design-system/core.css'
+import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import './styles.css'
+
+type Message = { id: string; role: 'assistant' | 'user'; text: string }
+
+const initialMessages: Message[] = [
+  { id: 'opening', role: 'assistant', text: 'What are you trying to accomplish, and what evidence should I use?' },
+]
+
+function App() {
+  const [messages, setMessages] = useState(initialMessages)
+  const [draft, setDraft] = useState('')
+  const [direction, setDirection] = useState<'ltr' | 'rtl'>('ltr')
+
+  const send = (event: FormEvent) => {
+    event.preventDefault()
+    const text = draft.trim()
+    if (!text) return
+    const id = `message-${Date.now()}`
+    setMessages((current) => [
+      ...current,
+      { id, role: 'user', text },
+      { id: `${id}-reply`, role: 'assistant', text: 'I added that context. The generated result would update in the output rail.' },
+    ])
+    setDraft('')
+  }
+
+  return (
+    <main className="chat-workspace-template" dir={direction} id="main-content">
+      <header className="chat-workspace-template__header">
+        <div><strong>Ceramic chat workspace</strong><span>Managed conversation template</span></div>
+        <Button onClick={() => setDirection((current) => current === 'ltr' ? 'rtl' : 'ltr')} size="sm" type="button" variant="outline">
+          {direction === 'ltr' ? 'Test RTL' : 'Test LTR'}
+        </Button>
+      </header>
+      <section className="chat-workspace-template__layout">
+        <Card className="chat-workspace-template__conversation">
+          <CardHeader><div><CardTitle>Working session</CardTitle><CardDescription>Input and governed tools stay in conversation.</CardDescription></div></CardHeader>
+          <CardContent>
+            <ChatLayout
+              density="compact"
+              jumpToLatestLabel="Jump to latest message"
+              messagesLabel="Example conversation"
+              scrollMode="managed"
+              messages={
+                <ChatMessageList>
+                  {messages.map((message) => (
+                    <ChatMessage anchor={message.role === 'user'} key={message.id} messageId={message.id} role={message.role}>
+                      <ChatMessageBubble role={message.role}>{message.text}</ChatMessageBubble>
+                      <ChatMessageMetadata>{message.role === 'assistant' ? 'Assistant' : 'You'}</ChatMessageMetadata>
+                    </ChatMessage>
+                  ))}
+                  <ChatMessage role="assistant">
+                    <ChatToolPanel count="15K" description="Search and add evidence without leaving the conversation." title="Reference library">
+                      <p>This area accepts product-owned search, selection, connection, or approval controls.</p>
+                    </ChatToolPanel>
+                  </ChatMessage>
+                </ChatMessageList>
+              }
+              composer={
+                <ChatComposer
+                  actions={<ChatSendButton disabled={!draft.trim()} label="Send message" />}
+                  onSubmit={send}
+                  toolbarStart={<Button aria-label="Add attachment" isIconOnly size="sm" type="button" variant="ghost"><span aria-hidden="true">+</span></Button>}
+                >
+                  <ChatComposerInput aria-label="Message" onChange={(event) => setDraft(event.target.value)} placeholder="Message Ceramic…" value={draft} />
+                </ChatComposer>
+              }
+            />
+          </CardContent>
+        </Card>
+        <aside className="chat-workspace-template__output" aria-labelledby="output-title">
+          <h2 id="output-title">Output</h2>
+          <p>Generated previews and durable artifacts appear here after a real run.</p>
+        </aside>
+      </section>
+    </main>
+  )
+}
+
+createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>)

package/data/templates/chat-workspace/styles.css

@@ -0,0 +1,19 @@
+* { 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); }
+.chat-workspace-template { display: grid; grid-template-rows: auto minmax(0, 1fr); min-block-size: 100dvh; padding: var(--space-4); }
+.chat-workspace-template__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-block-end: var(--border-width-hairline) solid var(--border); padding: var(--space-3); }
+.chat-workspace-template__header > div { display: grid; gap: var(--space-1); }
+.chat-workspace-template__header span, .chat-workspace-template__output p { color: var(--foreground-subtle); font-size: var(--font-size-workspace-label); }
+.chat-workspace-template__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(var(--sidebar-width), .34fr); min-block-size: 0; overflow: hidden; }
+.chat-workspace-template__conversation.uds-card { display: grid; grid-template-rows: auto minmax(0, 1fr); min-block-size: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: hidden; }
+.chat-workspace-template__conversation > .uds-card-header { border-block-end: var(--border-width-hairline) solid var(--border); padding: var(--workspace-panel-padding); }
+.chat-workspace-template__conversation > .uds-card-content { min-block-size: 0; padding: 0; overflow: hidden; }
+.chat-workspace-template__output { border-inline-start: var(--border-width-hairline) solid var(--border); background: var(--surface-elevated); padding: var(--workspace-panel-padding); }
+.chat-workspace-template__output :is(h2, p), .uds-chat-tool-panel-content p { margin: 0; }
+.chat-workspace-template__output { display: grid; align-content: start; gap: var(--space-2); }
+@media (max-width: 48rem) {
+  .chat-workspace-template { padding: 0; }
+  .chat-workspace-template__layout { grid-template-columns: 1fr; grid-template-rows: minmax(calc(var(--space-24) * 5), 1fr) auto; overflow: visible; }
+  .chat-workspace-template__output { border-block-start: var(--border-width-hairline) solid var(--border); border-inline-start: 0; }
+}

package/data/templates/chat-workspace/template.manifest.json

@@ -0,0 +1,13 @@
+{
+  "id": "chat-workspace",
+  "title": "Chat Workspace",
+  "status": "available",
+  "route": "/templates/chat-workspace/",
+  "entry": "templates/chat-workspace/main.tsx",
+  "components": ["ChatLayout", "ChatMessageScroller", "ChatMessage", "ChatMessageBubble", "ChatToolPanel", "ChatComposer"],
+  "states": ["empty", "ready", "streaming", "offscreen-update", "error"],
+  "themes": ["utopia-default"],
+  "directions": ["ltr", "rtl"],
+  "responsiveMinimum": "320px"
+}
+

package/data/templates/composition-registry-lab/main.tsx

@@ -9,10 +9,21 @@ import {
 } from '@utopia-studio-design/design-system/Composition'
 import '@utopia-studio-design/design-system/core.css'
 import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import '@utopia-studio-design/design-system/themes/dextrum.css'
+import '@utopia-studio-design/design-system/themes/barrier-intelligence.css'
+import '@utopia-studio-design/design-system/themes/renacore.css'
+import '@utopia-studio-design/design-system/themes/vyapti.css'
+import '@utopia-studio-design/design-system/themes/utopia-cloudblur.css'
 import sampleLayout from './sample-layout.json'
 import './styles.css'
 
-const activeTheme = 'utopia-default'
+const supportedThemes = ['utopia-default', 'dextrum', 'barrier-intelligence', 'renacore', 'vyapti', 'utopia-cloudblur'] as const
+type TemplateTheme = (typeof supportedThemes)[number]
+const defaultTheme: TemplateTheme = 'utopia-default'
+const requestedTheme = new URLSearchParams(window.location.search).get('theme') as TemplateTheme | null
+const activeTheme: TemplateTheme = requestedTheme && supportedThemes.includes(requestedTheme) ? requestedTheme : defaultTheme
+document.documentElement.dataset.theme = activeTheme
+document.documentElement.dataset.brand = activeTheme
 const layout = sampleLayout as CeramicLayoutDocument
 type LayoutBlockStyle = CSSProperties & {
   '--layout-column': number

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

@@ -47,6 +47,11 @@ import {
 } from './RegistryDataBlocks'
 import '@utopia-studio-design/design-system/core.css'
 import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import '@utopia-studio-design/design-system/themes/dextrum.css'
+import '@utopia-studio-design/design-system/themes/barrier-intelligence.css'
+import '@utopia-studio-design/design-system/themes/renacore.css'
+import '@utopia-studio-design/design-system/themes/vyapti.css'
+import '@utopia-studio-design/design-system/themes/utopia-cloudblur.css'
 import './agent-status.css'
 import './activity-feed.css'
 import './analytics-dashboard.css'
@@ -55,6 +60,14 @@ import './dashboard-composer.css'
 import initialLayoutDocument from './sample-layout.json'
 import './styles.css'
 
+const supportedThemes = ['utopia-default', 'dextrum', 'barrier-intelligence', 'renacore', 'vyapti', 'utopia-cloudblur'] as const
+type TemplateTheme = (typeof supportedThemes)[number]
+const defaultTheme: TemplateTheme = 'utopia-default'
+const requestedTheme = new URLSearchParams(window.location.search).get('theme') as TemplateTheme | null
+const activeTheme: TemplateTheme = requestedTheme && supportedThemes.includes(requestedTheme) ? requestedTheme : defaultTheme
+document.documentElement.dataset.theme = activeTheme
+document.documentElement.dataset.brand = activeTheme
+
 const initialLayout = initialLayoutDocument as CeramicLayoutDocument
 const anchorDate = new Date(2026, 2, 9, 12)
 
@@ -450,7 +463,7 @@ function App() {
       <main
         className="dashboard-composer-template"
         data-color-mode={dark ? 'dark' : 'light'}
-        data-theme="utopia-default"
+        data-theme={activeTheme}
         dir={direction}
         id="main-content"
       >

package/data/templates/database-workspace/main.tsx

@@ -17,9 +17,22 @@ import {
 } from './DatabaseWorkspaceBlocks'
 import '@utopia-studio-design/design-system/core.css'
 import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import '@utopia-studio-design/design-system/themes/dextrum.css'
+import '@utopia-studio-design/design-system/themes/barrier-intelligence.css'
+import '@utopia-studio-design/design-system/themes/renacore.css'
+import '@utopia-studio-design/design-system/themes/vyapti.css'
+import '@utopia-studio-design/design-system/themes/utopia-cloudblur.css'
 import './database-workspace.css'
 import './styles.css'
 
+const supportedThemes = ['utopia-default', 'dextrum', 'barrier-intelligence', 'renacore', 'vyapti', 'utopia-cloudblur'] as const
+type TemplateTheme = (typeof supportedThemes)[number]
+const defaultTheme: TemplateTheme = 'utopia-default'
+const requestedTheme = new URLSearchParams(window.location.search).get('theme') as TemplateTheme | null
+const activeTheme: TemplateTheme = requestedTheme && supportedThemes.includes(requestedTheme) ? requestedTheme : defaultTheme
+document.documentElement.dataset.theme = activeTheme
+document.documentElement.dataset.brand = activeTheme
+
 const schema: DatabaseSchema = {
   id: 'product-work',
   title: 'Product work',
@@ -143,7 +156,7 @@ function App() {
     <main
       className="database-template"
       data-color-mode={dark ? 'dark' : 'light'}
-      data-theme="utopia-default"
+      data-theme={activeTheme}
       dir="ltr"
       id="main-content"
     >

package/data/templates/interaction-lab/main.tsx

@@ -5,9 +5,20 @@ import { useControllableState } from '@utopia-studio-design/design-system/Intera
 import { InteractionWorkbench } from './InteractionWorkbench'
 import '@utopia-studio-design/design-system/core.css'
 import '@utopia-studio-design/design-system/themes/utopia-default.css'
+import '@utopia-studio-design/design-system/themes/dextrum.css'
+import '@utopia-studio-design/design-system/themes/barrier-intelligence.css'
+import '@utopia-studio-design/design-system/themes/renacore.css'
+import '@utopia-studio-design/design-system/themes/vyapti.css'
+import '@utopia-studio-design/design-system/themes/utopia-cloudblur.css'
 import './styles.css'
 
-const activeTheme = 'utopia-default'
+const supportedThemes = ['utopia-default', 'dextrum', 'barrier-intelligence', 'renacore', 'vyapti', 'utopia-cloudblur'] as const
+type TemplateTheme = (typeof supportedThemes)[number]
+const defaultTheme: TemplateTheme = 'utopia-default'
+const requestedTheme = new URLSearchParams(window.location.search).get('theme') as TemplateTheme | null
+const activeTheme: TemplateTheme = requestedTheme && supportedThemes.includes(requestedTheme) ? requestedTheme : defaultTheme
+document.documentElement.dataset.theme = activeTheme
+document.documentElement.dataset.brand = activeTheme
 
 function StateContractProbe() {
   const [ownedValue, setOwnedValue] = useState('idle')

package/data/templates/quantum-verification-story/README.md

@@ -0,0 +1,12 @@
+# Quantum Verification Story
+
+Code-level Next.js + shadcn template adapted from the local `vy3` Vercel project.
+
+It preserves the full-height presentation rhythm of the deployed site while replacing the original identity with `Your Company` and a theme-driven neutral mark. `src/app/ceramic-theme.css` maps the selected Ceramic theme into the shadcn and presentation variables.
+
+```sh
+npm install
+npm run dev
+```
+
+Set `NEXT_PUBLIC_CONSOLE_URL` only when a reviewed product console is available. Replace brand placeholders and review seeded claims before production use.

package/data/templates/quantum-verification-story/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "radix",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  },
+  "registries": {
+    "@componentry": "https://componentry.fun/r/{name}.json"
+  }
+}

package/data/templates/quantum-verification-story/eslint.config.mjs

@@ -0,0 +1,13 @@
+import { defineConfig, globalIgnores } from 'eslint/config'
+import nextVitals from 'eslint-config-next/core-web-vitals'
+import nextTypeScript from 'eslint-config-next/typescript'
+
+export default defineConfig([
+  ...nextVitals,
+  ...nextTypeScript,
+  {
+    files: ['tailwind.config.js'],
+    rules: { '@typescript-eslint/no-require-imports': 'off' },
+  },
+  globalIgnores(['.next/**', 'out/**', 'next-env.d.ts']),
+])

package/data/templates/quantum-verification-story/next-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+import "./.next/types/root-params.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/data/templates/quantum-verification-story/next.config.mjs

@@ -0,0 +1,11 @@
+const previewBasePath = process.env.CERAMIC_PREVIEW_BASE_PATH ?? ''
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  trailingSlash: true,
+  basePath: previewBasePath,
+  assetPrefix: previewBasePath || undefined,
+}
+
+export default nextConfig