@utopia-studio-design/design-system-cli 0.6.1 → 0.7.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.
- package/README.md +28 -10
- package/bin/utopia-ds-mcp.mjs +6 -2
- package/bin/utopia-ds.mjs +94 -21
- package/data/docs/arabic-friendly.md +19 -2
- package/data/docs/billing-setup.md +80 -0
- package/data/docs/cer-003-032-033-round-8-repair.md +41 -0
- package/data/docs/cer-007-checkout.md +51 -0
- package/data/docs/cer-008-011-qa-repair.md +64 -0
- package/data/docs/cer-016-023-round-6-repair.md +92 -0
- package/data/docs/cer-024-031-round-7-repair.md +51 -0
- package/data/docs/cer-033-035-036-round-12-repair.md +37 -0
- package/data/docs/cer-035-037-round-10-repair.md +34 -0
- package/data/docs/charts.md +34 -3
- package/data/docs/chat-service-methodology.md +181 -0
- package/data/docs/code-block.md +20 -0
- package/data/docs/creative-production.md +149 -0
- package/data/docs/designer-agent-backend-contract.md +552 -0
- package/data/docs/email-resend.md +29 -0
- package/data/docs/foundations.md +46 -8
- package/data/docs/guide.md +9 -9
- package/data/docs/handover-billing-aiden.md +132 -0
- package/data/docs/logo-maker-methodology.md +109 -0
- package/data/docs/presentation-asset-repository.md +53 -0
- package/data/docs/product-architecture.md +42 -0
- package/data/docs/quick-start-ai.md +4 -4
- package/data/docs/shadcn-conversion.md +1 -1
- package/data/docs/sidebar-placement.md +56 -0
- package/data/docs/theme-authoring.md +6 -3
- package/data/manifests/catalog.json +42 -46
- package/data/manifests/components.json +317 -66
- package/data/manifests/logo-skills.json +174 -0
- package/data/manifests/motion-profiles.json +2 -2
- package/data/manifests/patterns.json +201 -7
- package/data/manifests/presentation-assets.schema.json +44 -0
- package/data/manifests/templates.json +87 -1
- package/data/manifests/theme-dextrum.json +7 -7
- package/data/manifests/theme-prism-mono.json +19 -0
- package/data/manifests/theme-utopia-cloudblur.json +135 -0
- package/data/manifests/theme-utopia-default.json +31 -31
- package/data/manifests/theme-vyapti.json +17 -1
- package/data/manifests/theme-y2k-pop.json +18 -0
- package/data/manifests/themes.json +285 -57
- package/data/templates/analytics-dashboard/main.tsx +14 -1
- package/data/templates/calendar-application/main.tsx +14 -1
- package/data/templates/chat-workspace/README.md +12 -0
- package/data/templates/chat-workspace/index.html +11 -0
- package/data/templates/chat-workspace/main.tsx +97 -0
- package/data/templates/chat-workspace/styles.css +19 -0
- package/data/templates/chat-workspace/template.manifest.json +13 -0
- package/data/templates/composition-registry-lab/main.tsx +12 -1
- package/data/templates/dashboard-composer/main.tsx +14 -1
- package/data/templates/database-workspace/main.tsx +14 -1
- package/data/templates/interaction-lab/main.tsx +12 -1
- package/data/templates/quantum-verification-story/README.md +12 -0
- package/data/templates/quantum-verification-story/components.json +21 -0
- package/data/templates/quantum-verification-story/eslint.config.mjs +13 -0
- package/data/templates/quantum-verification-story/next-env.d.ts +7 -0
- package/data/templates/quantum-verification-story/next.config.mjs +11 -0
- package/data/templates/quantum-verification-story/package-lock.json +7535 -0
- package/data/templates/quantum-verification-story/package.json +46 -0
- package/data/templates/quantum-verification-story/postcss.config.js +6 -0
- package/data/templates/quantum-verification-story/src/app/assessment/page.tsx +138 -0
- package/data/templates/quantum-verification-story/src/app/ceramic-theme.css +48 -0
- package/data/templates/quantum-verification-story/src/app/deployment/page.tsx +178 -0
- package/data/templates/quantum-verification-story/src/app/fonts/IBMPlexSansArabic-Bold.ttf +0 -0
- package/data/templates/quantum-verification-story/src/app/fonts/IBMPlexSansArabic-Medium.ttf +0 -0
- package/data/templates/quantum-verification-story/src/app/fonts/IBMPlexSansArabic-Regular.ttf +0 -0
- package/data/templates/quantum-verification-story/src/app/fonts/ReadexPro-Variable.ttf +0 -0
- package/data/templates/quantum-verification-story/src/app/fonts/TWKLausanne-350.ttf +0 -0
- package/data/templates/quantum-verification-story/src/app/fonts/TWKLausanne-500.ttf +0 -0
- package/data/templates/quantum-verification-story/src/app/fonts/TWKLausanne-700.ttf +0 -0
- package/data/templates/quantum-verification-story/src/app/globals.css +175 -0
- package/data/templates/quantum-verification-story/src/app/layout.tsx +45 -0
- package/data/templates/quantum-verification-story/src/app/not-found.tsx +39 -0
- package/data/templates/quantum-verification-story/src/app/page.tsx +24 -0
- package/data/templates/quantum-verification-story/src/app/products/page.tsx +132 -0
- package/data/templates/quantum-verification-story/src/app/utopia-default.css +312 -0
- package/data/templates/quantum-verification-story/src/components/RotatingText.css +36 -0
- package/data/templates/quantum-verification-story/src/components/RotatingText.tsx +189 -0
- package/data/templates/quantum-verification-story/src/components/brand-mark.tsx +14 -0
- package/data/templates/quantum-verification-story/src/components/console-preview-section.tsx +57 -0
- package/data/templates/quantum-verification-story/src/components/console-preview.tsx +72 -0
- package/data/templates/quantum-verification-story/src/components/fade-up.tsx +54 -0
- package/data/templates/quantum-verification-story/src/components/floating-network.tsx +125 -0
- package/data/templates/quantum-verification-story/src/components/footer.tsx +83 -0
- package/data/templates/quantum-verification-story/src/components/harvest-timeline.tsx +70 -0
- package/data/templates/quantum-verification-story/src/components/lattice-diagram.tsx +73 -0
- package/data/templates/quantum-verification-story/src/components/lattice-field.tsx +129 -0
- package/data/templates/quantum-verification-story/src/components/nav.tsx +104 -0
- package/data/templates/quantum-verification-story/src/components/presentation-layout.tsx +91 -0
- package/data/templates/quantum-verification-story/src/components/readiness-estimator.tsx +135 -0
- package/data/templates/quantum-verification-story/src/components/scramble-text.tsx +60 -0
- package/data/templates/quantum-verification-story/src/components/section-backdrop.tsx +38 -0
- package/data/templates/quantum-verification-story/src/components/sections/clients.tsx +140 -0
- package/data/templates/quantum-verification-story/src/components/sections/contact.tsx +125 -0
- package/data/templates/quantum-verification-story/src/components/sections/hero.tsx +92 -0
- package/data/templates/quantum-verification-story/src/components/sections/moat.tsx +73 -0
- package/data/templates/quantum-verification-story/src/components/sections/offer.tsx +113 -0
- package/data/templates/quantum-verification-story/src/components/sections/pilot.tsx +63 -0
- package/data/templates/quantum-verification-story/src/components/sections/problem.tsx +53 -0
- package/data/templates/quantum-verification-story/src/components/text-particle.tsx +204 -0
- package/data/templates/quantum-verification-story/src/components/ticker.tsx +27 -0
- package/data/templates/quantum-verification-story/src/components/ui/badge.tsx +29 -0
- package/data/templates/quantum-verification-story/src/components/ui/button.tsx +55 -0
- package/data/templates/quantum-verification-story/src/components/ui/card.tsx +46 -0
- package/data/templates/quantum-verification-story/src/components/ui/cursor-driven-particle-typography.tsx +288 -0
- package/data/templates/quantum-verification-story/src/components/ui/input.tsx +20 -0
- package/data/templates/quantum-verification-story/src/components/ui/label.tsx +21 -0
- package/data/templates/quantum-verification-story/src/components/ui/separator.tsx +25 -0
- package/data/templates/quantum-verification-story/src/components/ui/textarea.tsx +19 -0
- package/data/templates/quantum-verification-story/src/lib/utils.ts +6 -0
- package/data/templates/quantum-verification-story/tailwind.config.js +95 -0
- package/data/templates/quantum-verification-story/template.manifest.json +23 -0
- package/data/templates/quantum-verification-story/tsconfig.json +42 -0
- package/data/templates/saas-solution-homepage/main.tsx +91 -14
- package/data/templates/saas-solution-homepage/privacy/index.html +1 -0
- package/data/templates/saas-solution-homepage/styles.css +47 -2
- package/data/templates/saas-solution-homepage/team/index.html +1 -0
- package/data/templates/saas-solution-homepage/template.manifest.json +41 -0
- package/data/templates/saas-solution-homepage/terms/index.html +1 -0
- package/lib/api.mjs +52 -3
- package/lib/template-runtime.mjs +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# CER-016–023 — Round 6 repair and release record
|
|
2
|
+
|
|
3
|
+
## Follow-up: CLI 0.6.1 published
|
|
4
|
+
|
|
5
|
+
Website release: `dpl_7JpBZTg2P8GQ4qyFgdYGfg7RCozZ`,
|
|
6
|
+
https://utopia-design-system-eubr2t13u-the-utopia-studio.vercel.app.
|
|
7
|
+
Vercel confirmed Ready and the `design.utopia-studio.co` alias.
|
|
8
|
+
|
|
9
|
+
The npm authentication blocker is resolved. Arc authentication completed and
|
|
10
|
+
`npm whoami` confirmed `aiden2333`. The additional npm publish authentication
|
|
11
|
+
also completed. **`@utopia-studio-design/design-system-cli@0.6.1` is public and
|
|
12
|
+
is the `latest` dist-tag.** CER-022's generator correction is now published.
|
|
13
|
+
|
|
14
|
+
This is a narrow patch built from the public 0.6.0 archive, preserving its seven
|
|
15
|
+
starters and Ceramic 0.8.x dependency range. Only `package.json`,
|
|
16
|
+
`bin/utopia-ds.mjs`, and `README.md` differ. Unreleased workspace 0.7.0/0.9.0
|
|
17
|
+
features were not included. Chat Workspace, Quantum Verification Story and the
|
|
18
|
+
three extra SaaS pages remain explicitly identified as unpublished previews.
|
|
19
|
+
|
|
20
|
+
Verification completed before publication: all seven generation contracts,
|
|
21
|
+
MCP 0.6.1 initialization and 18 tools, doctor, clean Dashboard/Composition
|
|
22
|
+
installs and production builds. Actual static-build clicks verified
|
|
23
|
+
`/visual-editor/`, reload, the fully initialized editor, Back to runtime, and
|
|
24
|
+
the cross-template hosted Composer link.
|
|
25
|
+
|
|
26
|
+
After publication, npm returned the exact tested SHA-512 integrity:
|
|
27
|
+
`sha512-PXV03qmN793ipFLmtB94AQgECHQ5Miy+kY8MhwJEEvl7x8nSEhyxwTpafbiFDZSdkUsxAai8i0M3SxZGb85Usg==`.
|
|
28
|
+
A fresh `npx --yes --package=@utopia-studio-design/design-system-cli@0.6.1
|
|
29
|
+
utopia-ds template template-dashboard-composer --theme utopia-default --copy
|
|
30
|
+
./dashboard` invocation generated the corrected link and the `^0.6.1` CLI
|
|
31
|
+
dependency. The public-docs contract checker passed against the downloaded
|
|
32
|
+
0.6.1 archive. The website snapshot and commands now reference 0.6.1 and the
|
|
33
|
+
0.6.0 temporary workaround has been removed.
|
|
34
|
+
|
|
35
|
+
The earlier record below describes the state before authentication was restored.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
2026-09-05. Target: https://design.utopia-studio.co.
|
|
40
|
+
|
|
41
|
+
Final production deployment: `dpl_22ahBGYPLtEmtkhy8HiXbSUqvLmo`,
|
|
42
|
+
https://utopia-design-system-qug2oikgu-the-utopia-studio.vercel.app.
|
|
43
|
+
Vercel Ready, aliased to the target domain. Frontend only; the live Clerk issuer
|
|
44
|
+
and Ceramic production Convex were verified in the built entrypoint. No backend
|
|
45
|
+
schema deployment, Git push, or npm publication occurred in this round.
|
|
46
|
+
|
|
47
|
+
The website and public npm packages have separate release histories. The public
|
|
48
|
+
registry was checked again: CLI **0.6.0**, design system **0.8.2**. Workspace
|
|
49
|
+
0.7.0/0.9.0 must not be presented as already published.
|
|
50
|
+
|
|
51
|
+
| Finding | Result |
|
|
52
|
+
| --- | --- |
|
|
53
|
+
| CER-016 | Docs and gallery use a checked-in snapshot of the public seven-template catalog and its page counts. Commands explicitly select CLI 0.6.0. Chat Workspace, Quantum Verification Story and the three extra SaaS pages are identified as unpublished web previews. This satisfies the reported unreleased-item alternative; it does not publish the two new templates. |
|
|
54
|
+
| CER-017 | Official starter verification uses `npm run build` and runtime checks. `template validate` is explicitly scoped to community submissions with a separately authored `ceramic.template.json`. No fake community manifest is generated. |
|
|
55
|
+
| CER-018 | Browser configuration no longer claims MCP connectivity. The prompt explains that public MCP 0.6.0 has no logo-registration tool and requires an independently verified integration for writes. The guide's nonpersistent registration button is disabled and its limitation is visible. |
|
|
56
|
+
| CER-019 | Docs use published component/semantic names, including Button height roles, icon-size roles, focus-ring-width and shadow-popover. Unsupported universal roles were removed. Required-role chips are scoped to the published default CSS contract; theme-only and site-only roles are not represented as universal defaults. |
|
|
57
|
+
| CER-020 | The website collects source paths as text. `.pptx/.potx` files are attached in the external production-agent session after copying the prompt. No browser upload is claimed. |
|
|
58
|
+
| CER-021 | Source-authoring and asset prompts state the access prerequisite and explain how to request a GitHub invitation/approved branch or authorized archive from the Studio administrator. Public source access could not be verified; repository visibility was not changed. |
|
|
59
|
+
| CER-022 | Workspace generator rewrites the selected template's URLs to its standalone root and other-template URLs to hosted previews. Build and actual clicks passed. **Public CLI correction remains pending publication**; the deployed docs provide the 0.6.0 direct `/visual-editor/` workaround and hosted Composer link. |
|
|
60
|
+
| CER-023 | Asset contracts receive the output purpose. Marketing uses channels, dimensions, locales and variant filenames; presentation quotas and slide placement remain exclusive to presentation output. Theme prompt assembly lives in the domain layer. |
|
|
61
|
+
|
|
62
|
+
## Verification
|
|
63
|
+
|
|
64
|
+
- `npm run lint`, `npm run audit:semantic-pages`, and production Vercel build passed.
|
|
65
|
+
- `npm run test:cli` passed, including CLI/MCP contracts and generated internal/external URL assertions.
|
|
66
|
+
- `npm run test:cli:standalone` installed and built the generated Dashboard Composer and all three HTML entrypoints.
|
|
67
|
+
- `npx vitest run src/domain/theme-handoff.test.ts`: 5 tests passed across source types, marketing/presentation and Arabic campaign guidance.
|
|
68
|
+
- `node scripts/check-published-docs.mjs <extracted-public-cli-package> <extracted-public-system-package>` passed: public versions, full catalog equality, seven actual generation commands, HTML page counts, and documented token declarations.
|
|
69
|
+
- In a clean temporary directory, the exact displayed `npx --yes --package=@utopia-studio-design/design-system-cli@0.6.0 utopia-ds template ...` command generated SaaS. `npm install` and `npm run build` passed; ten HTML pages were emitted.
|
|
70
|
+
- A browser fixture loaded only public 0.8.2 `core.css` and `utopia-default.css`. All **51 distinct tokens** used in the 56 documented table rows had nonempty computed values. Examples: default Button 40px, small 32px, large 48px; focus width 2px.
|
|
71
|
+
- Actual generated Dashboard link click reached `/visual-editor/`; reload completed with the Puck editor and “Registry connected” state. Generated Composition Registry's “Open live composer (hosted preview)” reached the production Composer.
|
|
72
|
+
- On the deployed website, clicked all seven Docs template selectors and checked their versioned commands. Opened Create a Logo, selected ChatGPT and expanded the prompt; checked the truthful MCP limitation. Clicked HTML Presentations and confirmed the external attachment sequence. Selected Prism Mono → Create AI brief → Marketing assets → Review full prompt: channel/variant instructions and source prerequisites present; slide quotas absent.
|
|
73
|
+
|
|
74
|
+
The generated browser fixture used workspace dependencies; the separate isolated
|
|
75
|
+
standalone build and public npm SaaS consumer checks above did not substitute
|
|
76
|
+
that fixture for an installation test. The whole 22-document / 113-link suite,
|
|
77
|
+
all seven public consumer builds, real AI output generation and asset
|
|
78
|
+
registration were not repeated in this repair run.
|
|
79
|
+
|
|
80
|
+
## Remaining external release constraint
|
|
81
|
+
|
|
82
|
+
`npm whoami` returned **401 Unauthorized**. No npm package was published. Restore
|
|
83
|
+
npm publish authentication, complete the package release gates, publish the
|
|
84
|
+
validated versions, and only then refresh `src/data/published-release.json` from
|
|
85
|
+
the public tarballs. Do not mark CER-022's public package fix as closed until it
|
|
86
|
+
is retested from npm. Existing unreleased workspace work was not blindly pushed
|
|
87
|
+
or published.
|
|
88
|
+
|
|
89
|
+
Rams `quick_review` was attempted on the changed UI files but the workspace's
|
|
90
|
+
30 review credits are exhausted; no Rams score was obtained. Manual checks,
|
|
91
|
+
type checks, semantic ownership audit and browser checks were used. No credit
|
|
92
|
+
purchase or repository visibility change was made.
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
# Round 7 컴포넌트 수정·라이브 재검증
|
|
2
|
+
|
|
3
|
+
2026-09-05. 대상: https://design.utopia-studio.co. Round 7 신규 CER-024–031 및 CER-013 Workspace Journey, CER-014 Textarea 추가 범위를 수정했다.
|
|
4
|
+
|
|
5
|
+
배포: `dpl_46pRwpS8uLsjKHM6Xx3oULupJwas`, Vercel production Ready. 배포 URL: https://utopia-design-system-ikia7iet4-the-utopia-studio.vercel.app. 정상 도메인의 실제 로드 엔트리 `/assets/main-haDrz_94.js`까지 확인했다. 변경 중인 기존 작업 트리를 사용했으므로 git HEAD를 배포 소스의 정확한 SHA로 제시하지 않는다.
|
|
6
|
+
|
|
7
|
+
## 변경과 실제 조작 결과
|
|
8
|
+
|
|
9
|
+
| 결함 | 수정 | 라이브 1280×720 Chromium 재검증 |
|
|
10
|
+
| --- | --- | --- |
|
|
11
|
+
| CER-024 | 검색 입력의 활성 옵션·방향키·Enter 연결, 인스턴스별 ID, 선택 후 트리거 포커스 | Cal → ArrowDown → Enter로 Calendar 선택, expanded=false, 트리거 포커스 |
|
|
12
|
+
| CER-025 | Drawer 선택 상태, 라디오 방향키·로빙 Tab, 로컬 완료 메시지와 닫기 연결 | ArrowDown으로 5:00 PM 선택·checked 변경. Confirm 후 Selected delivery time: 5:00 PM - 5:15 PM, Logical end로 포커스 복귀 |
|
|
13
|
+
| CER-026 | workbench 방향·언어를 Drawer 포털에 전달 | LTR end x=832, RTL end x=0, 두 경우 폭 448. 최종 정지 후 측정 |
|
|
14
|
+
| CER-027 | Sheet를 flex column으로 구성, Footer 정렬·크기 유지, 긴 내용 스크롤 | Close·Save 높이 각각 42px |
|
|
15
|
+
| CER-028 | Tooltip의 고정 open 제거 | 키보드 포커스 시 tooltip 1개, Escape 애니메이션 종료 후 0개 |
|
|
16
|
+
| CER-029 | 공용 ContextMenuTrigger에서 Shift+F10/ContextMenu 키 연결, 취소·disabled 처리 보존 | Shift+F10으로 Back menuitem 포커스. Escape로 Context menu preview 복귀 |
|
|
17
|
+
| CER-030 | 두 Primitives 진입점의 콘텐츠 숨김·비활성화와 안정적인 aria-controls 연결 | expanded=false, 대응 콘텐츠 hidden=true, 높이 0, 숨긴 본문 비노출 |
|
|
18
|
+
| CER-031 | Mobile Nav 프리뷰와 복사 예제에 Main navigation 이름, 실제 Trigger/Content 및 링크 추가 | dialog 이름 Main navigation, Docs/Components/Templates/Themes 링크. Escape 닫기 |
|
|
19
|
+
| CER-013 추가 | WorkspaceJourney 실물 예제·선택 결과 제공 | Brief 선택 후 aria-current=step, Review/Publish disabled |
|
|
20
|
+
| CER-014 추가 | Textarea의 고정 ID를 useId로 교체 | 각 입력 이름이 Project note / Required summary / Locked note로 한 번씩 읽힘. 두 프리뷰 간 ID 분리 |
|
|
21
|
+
|
|
22
|
+
Drawer·Combobox·Mobile Nav·Workspace Journey 복사 예제도 함께 수정했다. Drawer 완료는 로컬 예제 상태이며 실제 예약·결제 요청은 발생시키지 않는다.
|
|
23
|
+
|
|
24
|
+
## 검사
|
|
25
|
+
|
|
26
|
+
- TypeScript 검사, semantic page ownership audit 통과.
|
|
27
|
+
- component contract, motion contract, interaction contract 테스트 통과.
|
|
28
|
+
- `node scripts/test-round-7-contracts.mjs` 통과. 두 export 진입점의 닫힌/열린 Collapsible, forceMount 상태의 hidden/inert·ID 연결과 Context Menu 취소·disabled 경계를 검사한다.
|
|
29
|
+
- 프로덕션 Clerk 도메인과 Convex prod URL을 확인한 환경으로 Vercel production build 통과. Convex 변경·배포는 이번 라운드에 포함하지 않는다.
|
|
30
|
+
- 독립 소비자에 로컬 npm tarball을 설치하고 Vite build 통과. 실제 브라우저에서 숨겨진 Nested action이 Tab 순서에서 제외되고 다음 Context target으로 이동함을 확인했다. Context Menu의 첫 command 포커스, 짧은 LTR/긴 RTL Sheet의 버튼 높이 40px, 긴 내용 스크롤을 확인했다.
|
|
31
|
+
- Rams quick_review를 시도했으나 기존 30회 크레딧 소진 응답으로 실행되지 않았다. Rams 점수는 없다.
|
|
32
|
+
|
|
33
|
+
## 범위
|
|
34
|
+
|
|
35
|
+
후속 npm 게시 완료: `@utopia-studio-design/design-system@0.9.0`, `@utopia-studio-design/design-system-cli@0.6.2`를 public/latest로 게시했다. CLI 0.6.2는 생성 프로젝트 의존성을 ^0.9.0으로 올려 공용 컴포넌트 수정본을 설치한다. 공개 CLI의 7개 템플릿 카탈로그와 0.6.1 링크 수정은 보존했다.
|
|
36
|
+
|
|
37
|
+
공개 레지스트리에서 두 tarball을 다시 내려받아 게시 파일의 integrity와 일치함을 확인했다. 별도 소비자 프로젝트에 registry URL의 0.9.0을 설치하고 Vite build 및 실제 브라우저에서 Collapsible의 숨김·Tab 제외, Context Menu 첫 항목 포커스, Sheet 푸터 버튼 40px를 재검증했다. 공개 CLI 7개 템플릿 생성·페이지 수·문서 토큰 계약 검사도 통과했다.
|
|
38
|
+
|
|
39
|
+
- Design system integrity: `sha512-OmJu4hyLHuPfo6WivxY39b1ywbPUoaLCKiQL1fQmvdpuzp8YhV9BSR1dKb5qmS5sQXxZYQ+vkLd3R/hLEe5SCw==`
|
|
40
|
+
- CLI integrity: `sha512-FkaimB9ofJvO1ECs8U+Dx1Dy9wYLpGRjsnPg7gCUG9N7yQW+RKrx3fScgK1n0aSs3rlho3Srk4wYZ1PUg1p8+Q==`
|
|
41
|
+
|
|
42
|
+
라이브 실조작은 데스크톱 Chromium 1280×720에서 수행했다. 이번 수정 후 320/390 모바일 뷰포트, Safari/Firefox, 실제 음성 보조기술, 전체 테마·전체 컴포넌트 회귀 검사를 수행했다고 주장하지 않는다. 이전 CER-001–023 전체의 종결 판정이 아니다.
|
|
43
|
+
|
|
44
|
+
검증 중 Tooltip 닫기 직후에는 종료 애니메이션 때문에 DOM이 잠시 남았으나 정지 후 제거됨을 별도 확인했다. Drawer 애니메이션 중 좌표는 최종 좌표 판정에서 제외했다.
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
## npm 후속 게시 최종 확인
|
|
48
|
+
|
|
49
|
+
`npx --yes --package=@utopia-studio-design/design-system-cli@0.6.2 utopia-ds template dashboard-composer --theme utopia-default --copy <새 폴더>`를 레포 밖에서 실행했다. 생성 프로젝트의 npm install 및 Vite build가 통과했고, lockfile의 실제 registry 의존성 design-system 0.9.0 / CLI 0.6.2를 확인했다.
|
|
50
|
+
|
|
51
|
+
공개 버전 안내 갱신 후 웹 배포: `dpl_D87NHuhvhrszWq5pXKubw5duogoi`, https://utopia-design-system-58sk2d4hf-the-utopia-studio.vercel.app. Docs, Templates, Create a Logo의 공개 버전 안내 및 공개 토큰 스냅샷을 갱신했다.
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# Round 12 — 잔여 UI·파일 검증 수정
|
|
2
|
+
|
|
3
|
+
2026-09-06. 개발 챗의 수정 범위: CER-036 충돌 UI/Reload, CER-035 손상 이미지 등록·교체, CER-033 HTML 우선 표기. 별도 QA 챗의 독립 재검증을 대체하지 않는다.
|
|
4
|
+
|
|
5
|
+
## 변경
|
|
6
|
+
|
|
7
|
+
- 충돌 또는 저장 실패 시 성공 feedback을 지운다. 충돌 시 저장된 최신 snapshot을 다시 읽어 거부된 낙관적 값을 대체한다. 충돌한 상세 패널을 닫아 최신 목록과 경고를 노출한다. 기존에는 Reload가 모달 overlay 뒤에 있어 실제 클릭도 막혔다.
|
|
8
|
+
- Reload는 window.location.reload에 의존하지 않고 진행 중 저장 큐를 정리한 뒤 IndexedDB의 최신 값을 읽어 rooms/requests와 변경 비교 기준을 함께 복원한다. 실패하면 저장 오류를 유지한다.
|
|
9
|
+
- 이미지 파일은 실제 브라우저 Image.decode와 유효한 크기 확인을 통과해야 등록/교체한다. MIME 또는 알려진 이미지 확장자로 검사 대상을 판별한다. 손상 파일은 기존 파일·버전·승인 상태를 변경하지 않는다. 일반 source 파일 등록 정책은 유지한다.
|
|
10
|
+
- 이미지 디코딩 중에도 등록 제출 잠금을 유지하고, 등록 창을 닫으면 늦게 끝난 검증 결과로 등록하지 않는다. 파일 교체는 가장 최근 선택만 반영한다.
|
|
11
|
+
- Templates의 PPT 우선 eyebrow와 고정 12–15장 표기를 HTML·브리프 기준으로 바꾼다. Themes의 PPT / Presentation 표기를 HTML / Presentation으로 바꾼다.
|
|
12
|
+
|
|
13
|
+
## 개발 검증 범위
|
|
14
|
+
|
|
15
|
+
`tests/e2e/studio-round-10.spec.ts`에 충돌 직후 성공 메시지 제거·최신 값 표시·제품 Reload 클릭, 37바이트 손상 PNG 신규 등록 및 교체 거부 검증을 추가했다. 기존 다른 필드/자산 병합, 삭제 복원 차단, 10 MiB 반복 제출, 저장 실패 재시도와 DB 업그레이드 검사도 유지한다. 실제 사용자 프로필이 아닌 별도 테스트 컨텍스트의 fixture에서 실행한다.
|
|
16
|
+
|
|
17
|
+
손상 이미지 거부는 이미지 디코딩 검사이며 PDF/PPT/모든 소스 파일 형식의 완전한 검증이나 보안 검사를 뜻하지 않는다. 서버 생성 Room·대표 로고 연결·SVG 변환 기능 공백은 수정 범위 밖이며 BLOCKED를 유지한다.
|
|
18
|
+
|
|
19
|
+
Rams quick_review는 기존 크레딧 소진으로 리뷰를 반환하지 않았다.
|
|
20
|
+
|
|
21
|
+
## 결과·배포
|
|
22
|
+
|
|
23
|
+
- 개발 브라우저 검사: desktop/mobile Chromium 총 16개 통과.
|
|
24
|
+
- 저장 규칙·프롬프트 테스트 25개 통과. TypeScript, semantic page ownership, 프로덕션 빌드 통과.
|
|
25
|
+
- 개발 테스트에서 최초 충돌 Reload 클릭은 실제 overlay 차단으로 실패했고 제품을 수정했다. 별도 테스트 준비의 goto 직후 중복 reload 경합도 제거한 뒤 전체 16개를 다시 통과했다.
|
|
26
|
+
- 이미지 디코딩은 `src/services/asset-file-validation.ts`, 파일 메타데이터의 순수 검사는 `src/domain/asset-file-validation.ts`에 둔다.
|
|
27
|
+
- 배포 `dpl_9pzELTWtcxZgYPrvKrNxMoo2ZqAC`, Vercel Ready, design.utopia-studio.co 별칭 확인.
|
|
28
|
+
- 라이브 엔트리 `/assets/main-X0Vn6xLq.js`. StudioConsolePage-DVs7D_OZ.js / TemplatesPage-DPwqzgId.js / ThemesPage-DSHYm_ew.js의 운영 응답 바이트가 로컬 배포 산출물과 SHA-256 기준 일치했다.
|
|
29
|
+
- npm 패키지 및 Convex 백엔드 변경 없음. 운영 QA 자산을 수정하지 않았다.
|
|
30
|
+
|
|
31
|
+
## QA 챗 재검증 요청
|
|
32
|
+
|
|
33
|
+
1. CER-036: 같은 필드 충돌 직후 거부된 값·성공 안내가 사라지는지, 상세 패널이 닫힌 뒤 최신 목록이 표시되는지, 제품 Reload 클릭만으로 저장된 값을 유지하는지 검사한다. 다른 필드 보존·삭제 후 오래된 저장 거부도 회귀 확인한다.
|
|
34
|
+
2. CER-035: 37바이트 손상 PNG를 신규 등록·정상 승인 자산 교체에 각각 사용한다. 거부 후 원본 파일·Version·Approved·다운로드 해시가 유지되는지 확인한다. 0바이트 및 정상 이미지 재선택 경로도 확인한다.
|
|
35
|
+
3. CER-033: Templates의 HTML 우선 문구·브리프 기준 장수와 Themes의 HTML / Presentation 선택명을 확인한다. 실제 복사 프롬프트의 HTML 기본 산출물·명시 장수 우선순위가 유지되는지 확인한다.
|
|
36
|
+
|
|
37
|
+
이 기록은 개발 검증·배포 완료이며 독립 운영 QA의 최종 종료 판정은 아니다.
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# Round 10 — 파일·동시 수정 수정 기록
|
|
2
|
+
|
|
3
|
+
2026-09-05. 범위: 로컬 Studio Console 자산 관리. Convex와 npm 공용 패키지는 변경하지 않는다.
|
|
4
|
+
|
|
5
|
+
## 수정
|
|
6
|
+
|
|
7
|
+
- CER-036: IndexedDB readwrite 트랜잭션 안에서 최신 snapshot을 읽고, 해당 탭의 마지막 저장 기준과 현재 변경분을 비교해 필드 단위로 병합한다. rooms/assets/requests 등 ID 기반 배열은 레코드 단위로 병합한다. 다른 필드·다른 자산·다른 탭의 추가 항목을 보존하며, 같은 필드의 상충하는 값과 삭제 후 오래된 수정은 전체 트랜잭션을 중단한다. 동시 파일 교체와 보지 못한 새 파일 버전의 승인도 거부한다. 충돌은 새로고침 안내, 저장 실패는 명시적인 재시도를 제공한다. 서버 동시성 수정으로 주장하지 않는다.
|
|
8
|
+
- CER-037: 등록 양식의 동기 ref 잠금과 disabled 버튼으로 재렌더 이전의 Enter/포인터 반복 제출도 차단한다. 저장 오류가 나면 이미 준비된 변경을 재시도하며 새 레코드를 추가 생성하지 않는다.
|
|
9
|
+
- CER-035 확장: 공통 파일 검사에서 0바이트를 거부한다. 등록과 Replace file에 적용하며, 잘못된 교체에서는 blob·버전·승인 상태를 변경하지 않는다. 손상 파일 탐지/전체 파일 형식 검증까지 완료한 것은 아니다.
|
|
10
|
+
|
|
11
|
+
## 검증
|
|
12
|
+
|
|
13
|
+
- `src/domain/studio-snapshot-merge.test.ts`: 9개 통과. 다른 필드/자산/추가 항목 보존, 같은 필드 충돌, 삭제된 자산·룸의 오래된 수정 거부, 변경된 자산의 오래된 삭제 거부, 파일 버전 충돌, 0바이트 및 10 MiB 입력 경계.
|
|
14
|
+
- `tests/e2e/studio-round-10.spec.ts`: 별도 브라우저 컨텍스트의 개발 프리뷰 fixture 사용. 실제 사용자의 QA Orbit 및 정상 로고는 변경하지 않는다. UI를 통해 두 탭 수정/삭제, 10 MiB Enter·더블클릭, 빈 파일 등록/교체, 승인 상태·버전의 reload 유지, 다른 자산 동시 수정, IndexedDB 실패 주입 후 재시도를 검사한다.
|
|
15
|
+
- TypeScript, semantic page ownership audit, 프로덕션 빌드 통과.
|
|
16
|
+
- Rams quick_review 호출은 기존 크레딧 소진 응답을 반환했다. 디자인 리뷰 점수 없음.
|
|
17
|
+
|
|
18
|
+
브라우저 테스트 준비 중 같은 URL의 goto가 실제 reload를 일으키지 않아 모달이 남는 테스트 문제를 수정했다. Vercel 빌드와 병행했던 개발 서버 검사에서는 HMR로 화면이 교체되어 중단하고, 빌드 종료 후 다시 실행했다.
|
|
19
|
+
|
|
20
|
+
운영 서버 장애·결제·다른 계정 접근 격리·전체 37건 회귀검증은 이번 범위에 포함하지 않는다. 모바일 Chromium 검사는 실제 iOS/WebKit이나 스크린리더 검증을 대신하지 않는다.
|
|
21
|
+
|
|
22
|
+
## 최종 결과 및 운영 재검증
|
|
23
|
+
|
|
24
|
+
- 로컬 브라우저: desktop/mobile Chromium 각 8개, 총 16개 통과. 도메인 9개와 합계 25개.
|
|
25
|
+
- DB 버전 2는 기존 저장소와 blob을 유지한다. 버전 1을 지정해 여는 이전 코드의 저장은 VersionError로 거부한다. 마이그레이션 보존/이전 writer 거부를 두 브라우저 프로젝트에서 검사했다.
|
|
26
|
+
- 운영 배포 `dpl_4JT3MbY7iigktLhrMoSQJP3qy5SU`, 엔트리 `/assets/main-CSDCLJnH.js`, Vercel Ready 및 design.utopia-studio.co 별칭 확인.
|
|
27
|
+
- 운영 in-app browser 1280×720, 기존 관리자, 같은 프로필의 두 탭. QA Orbit에 이번 검증용 임시 자산만 등록했다.
|
|
28
|
+
- CER-036: A 이름 `QA R10 renamed A`와 B 정책 `QA R10 policy B`가 새로고침 후 함께 유지됐다. A 삭제 후 B 오래된 정책 저장은 `Changes were not saved` / `Another tab changed the same field or deleted this item`로 거부됐고 다시 나타나지 않았다. 별도 이름 충돌에서 A의 `QA R10 winner`가 유지됐으며 B의 `QA R10 stale`은 거부됐다.
|
|
29
|
+
- CER-037: 운영에서 10 MiB source.bin의 Enter 연타 및 작은 SVG의 포인터 더블클릭 모두 자산 1개만 추가됐다. 로컬에서는 10 MiB로 두 입력 방식을 모두 검사했다.
|
|
30
|
+
- CER-035 확장: 임시 SVG를 승인한 뒤 empty.png로 Replace file을 시도하면 `Empty files cannot be used`를 표시했고, Approved / Version 1 / scratch.svg / 111 B를 유지했다. 원래 정상 QA 로고 파일은 교체하지 않았다.
|
|
31
|
+
- 검증용 세 자산(`QA R10 repair scratch`, `QA R10 validation scratch`, `QA R10 keyboard scratch`; 변경된 이름 포함)을 모두 삭제했다. 충돌 탭은 닫았다.
|
|
32
|
+
- 최종 운영 새로고침 후 `.studio-asset-grid article` count=1, storage=ready. `QA Orbit logo v2 — QA ONLY` 한 개와 Approved 상태만 남았음을 실제 UI로 확인했다.
|
|
33
|
+
|
|
34
|
+
판정: 요청된 CER-036·037 및 CER-035의 0바이트 교체 범위 PASS. 전체 37건이나 파일 보안·형식 검증 전체의 종료 판정은 아니다.
|
package/data/docs/charts.md
CHANGED
|
@@ -16,6 +16,15 @@ different `ChartRenderer` without replacing Ceramic's series identities, states,
|
|
|
16
16
|
keyboard model, summary, legend, exact-value output, RTL behavior, or semantic
|
|
17
17
|
tokens.
|
|
18
18
|
|
|
19
|
+
## Appearance presets
|
|
20
|
+
|
|
21
|
+
Use `appearance="mono-rounded"` for a restrained monochrome palette and rounded
|
|
22
|
+
line, bar, area, scatter, and donut geometry adapted from
|
|
23
|
+
[Amicro Monocharts](https://amicro.vercel.app/mono-charts). The preset changes
|
|
24
|
+
presentation only: semantic series IDs, patterns, exact values, states,
|
|
25
|
+
keyboard exploration, RTL behavior, and reduced-motion handling remain owned by
|
|
26
|
+
`ChartRoot`. The default remains `appearance="default"`.
|
|
27
|
+
|
|
19
28
|
## Data and series identity
|
|
20
29
|
|
|
21
30
|
Every period and series needs a stable ID. Missing values use `null`; never
|
|
@@ -31,6 +40,14 @@ const data: ChartDatum[] = [
|
|
|
31
40
|
{ id: 'jan', label: 'Jan', values: { current: 42, previous: 35 } },
|
|
32
41
|
{ id: 'feb', label: 'Feb', values: { current: 46, previous: null } },
|
|
33
42
|
]
|
|
43
|
+
|
|
44
|
+
<ChartRoot
|
|
45
|
+
accessibleSummary="Monthly performance compared with the benchmark."
|
|
46
|
+
appearance="mono-rounded"
|
|
47
|
+
data={data}
|
|
48
|
+
series={series}
|
|
49
|
+
title="Performance overview"
|
|
50
|
+
/>
|
|
34
51
|
```
|
|
35
52
|
|
|
36
53
|
## Required states
|
|
@@ -53,9 +70,23 @@ in the live explorer and table, and does not imply zero.
|
|
|
53
70
|
|
|
54
71
|
## Chart families
|
|
55
72
|
|
|
56
|
-
The default renderer supports
|
|
57
|
-
|
|
58
|
-
|
|
73
|
+
The default renderer supports 26 families:
|
|
74
|
+
|
|
75
|
+
- Cartesian and comparison: `line`, `bar`, `area`, `stacked`, `scatter`,
|
|
76
|
+
`composed`, `step`, `range`, `waterfall`, and `stream`.
|
|
77
|
+
- Radial and progress: `donut`, `radial`, `gauge`, `meter`, `polar`, `radar`,
|
|
78
|
+
and `bullet`.
|
|
79
|
+
- Distribution and hierarchy: `bubble`, `heatmap`, `treemap`, `funnel`, and
|
|
80
|
+
`pyramid`.
|
|
81
|
+
- Flow, finance, and compact reporting: `sankey`, `candlestick`, `sparkline`,
|
|
82
|
+
and `kpi`.
|
|
83
|
+
|
|
84
|
+
Specialized families retain the common `ChartDatum` model. `candlestick` uses
|
|
85
|
+
series IDs `open`, `high`, `low`, and `close`; `range` uses its first two
|
|
86
|
+
series as lower/upper values; `bubble` uses the second series as size;
|
|
87
|
+
`heatmap` treats data as rows and series as columns; and `sankey` treats the
|
|
88
|
+
first datum's series values as source flows. Products should choose the family
|
|
89
|
+
from the analysis task rather than visual preference.
|
|
59
90
|
|
|
60
91
|
## Copyable blocks
|
|
61
92
|
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
# Ceramic chat service methodology
|
|
2
|
+
|
|
3
|
+
Ceramic chat surfaces are task workspaces, not transcripts placed inside a
|
|
4
|
+
marketing page. The reusable contract separates conversation, governed tools,
|
|
5
|
+
and generated output so a team can build an assistant, support product, or
|
|
6
|
+
collaboration service without inventing scroll, composer, RTL, and streaming
|
|
7
|
+
behavior on every page.
|
|
8
|
+
|
|
9
|
+
## The three-layer model
|
|
10
|
+
|
|
11
|
+
1. **Conversation** owns chronological user and assistant messages, truthful
|
|
12
|
+
execution activity, choices, source intake, and governed tools.
|
|
13
|
+
2. **Composer** stays docked to the conversation and owns text entry,
|
|
14
|
+
attachments, send/stop state, and input recovery.
|
|
15
|
+
3. **Output** presents generated previews, files, and approved artifacts beside
|
|
16
|
+
the conversation. It starts empty and never fabricates a result.
|
|
17
|
+
|
|
18
|
+
Search, connection, configuration, and approval are inputs, so they use
|
|
19
|
+
`ChatToolPanel` inside the conversation. A generated logo, page, document, or
|
|
20
|
+
other durable result belongs in the product's output rail.
|
|
21
|
+
|
|
22
|
+
## Structure substantive assistant responses
|
|
23
|
+
|
|
24
|
+
Keep Markdown as the durable browser/API/MCP payload, then render its semantic
|
|
25
|
+
structure instead of placing a long string inside a large assistant bubble. A
|
|
26
|
+
design recommendation should normally contain:
|
|
27
|
+
|
|
28
|
+
- one decisive opening recommendation and short rationale;
|
|
29
|
+
- `Recommended direction` with concrete visual changes;
|
|
30
|
+
- `Suggested palette` with named `#RRGGBB` values when color is relevant;
|
|
31
|
+
- `Values expressed through the mark` with an explicit value-to-evidence link;
|
|
32
|
+
- `Logo quality check` with visual evidence when the artifact is a logo;
|
|
33
|
+
- no more than two unresolved decisions; and
|
|
34
|
+
- one concrete next step.
|
|
35
|
+
|
|
36
|
+
Logo-specific quality gates and proof-sheet requirements are defined in
|
|
37
|
+
[`logo-maker-methodology.md`](./logo-maker-methodology.md).
|
|
38
|
+
|
|
39
|
+
Use headings, paragraphs, lists, inline emphasis, code values, and generous
|
|
40
|
+
rhythm rather than converting every section into a card. A response may embed a
|
|
41
|
+
compact, synchronized view of actual generated variants so the rationale and
|
|
42
|
+
artifact can be read together; the output rail remains the source of truth for
|
|
43
|
+
selection review and approval. Never fabricate a preview, file link, elapsed
|
|
44
|
+
time, or tool result to make a response appear richer.
|
|
45
|
+
|
|
46
|
+
## Choose the scroll owner first
|
|
47
|
+
|
|
48
|
+
Use `ChatLayout scrollMode="managed"` for a viewport-height product workspace.
|
|
49
|
+
The managed `ChatMessageScroller`:
|
|
50
|
+
|
|
51
|
+
- enters at the latest message;
|
|
52
|
+
- follows streamed content only while the user remains at the live edge;
|
|
53
|
+
- stops following when the user scrolls back to read;
|
|
54
|
+
- shows a localized jump-to-latest action when new content is offscreen;
|
|
55
|
+
- preserves the reading position when older history is prepended;
|
|
56
|
+
- exposes a named `region` and an updating `log` to assistive technology.
|
|
57
|
+
|
|
58
|
+
Use `scrollMode="static"` only when a short transcript intentionally participates
|
|
59
|
+
in document scrolling. Never give both the page and the conversation vertical
|
|
60
|
+
scroll ownership.
|
|
61
|
+
|
|
62
|
+
## Reference template
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import {
|
|
66
|
+
ChatComposer,
|
|
67
|
+
ChatComposerInput,
|
|
68
|
+
ChatLayout,
|
|
69
|
+
ChatMessage,
|
|
70
|
+
ChatMessageBubble,
|
|
71
|
+
ChatMessageList,
|
|
72
|
+
ChatSendButton,
|
|
73
|
+
ChatToolPanel,
|
|
74
|
+
} from '@utopia-studio-design/design-system/Chat'
|
|
75
|
+
import { AttachmentTrigger } from '@utopia-studio-design/design-system/Attachment'
|
|
76
|
+
|
|
77
|
+
export function AssistantWorkspace({ messages, isStreaming, send }) {
|
|
78
|
+
return (
|
|
79
|
+
<ChatLayout
|
|
80
|
+
density="compact"
|
|
81
|
+
isStreaming={isStreaming}
|
|
82
|
+
jumpToLatestLabel="Jump to latest message"
|
|
83
|
+
messagesLabel="Support conversation"
|
|
84
|
+
scrollMode="managed"
|
|
85
|
+
messages={
|
|
86
|
+
<ChatMessageList>
|
|
87
|
+
{messages.map((message) => (
|
|
88
|
+
<ChatMessage
|
|
89
|
+
anchor={message.role === 'user'}
|
|
90
|
+
key={message.id}
|
|
91
|
+
messageId={message.id}
|
|
92
|
+
role={message.role}
|
|
93
|
+
>
|
|
94
|
+
<ChatMessageBubble role={message.role}>
|
|
95
|
+
{message.text}
|
|
96
|
+
</ChatMessageBubble>
|
|
97
|
+
</ChatMessage>
|
|
98
|
+
))}
|
|
99
|
+
<ChatMessage role="assistant">
|
|
100
|
+
<ChatToolPanel
|
|
101
|
+
count="15K"
|
|
102
|
+
description="Search and add evidence to the current request."
|
|
103
|
+
title="Reference library"
|
|
104
|
+
>
|
|
105
|
+
{/* Product-owned search and selection controls */}
|
|
106
|
+
</ChatToolPanel>
|
|
107
|
+
</ChatMessage>
|
|
108
|
+
</ChatMessageList>
|
|
109
|
+
}
|
|
110
|
+
composer={
|
|
111
|
+
<ChatComposer
|
|
112
|
+
actions={<ChatSendButton label="Send message" />}
|
|
113
|
+
onSubmit={send}
|
|
114
|
+
toolbarStart={<AttachmentTrigger aria-label="Add attachment" />}
|
|
115
|
+
>
|
|
116
|
+
<ChatComposerInput aria-label="Message" />
|
|
117
|
+
</ChatComposer>
|
|
118
|
+
}
|
|
119
|
+
/>
|
|
120
|
+
)
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
All visible labels in the example are product localization inputs. Arabic uses
|
|
125
|
+
the same chronological DOM order and inherits `dir="rtl"`; Ceramic mirrors
|
|
126
|
+
logical alignment and control placement without reversing time.
|
|
127
|
+
|
|
128
|
+
## Composer behavior
|
|
129
|
+
|
|
130
|
+
- The textarea grows with content until its semantic maximum height, then owns
|
|
131
|
+
its internal overflow.
|
|
132
|
+
- `Enter` submits and `Shift+Enter` inserts a newline. IME composition never
|
|
133
|
+
submits early.
|
|
134
|
+
- Selected attachment previews appear in `ChatComposerDrawer` above the input.
|
|
135
|
+
Put the upload or add trigger in `toolbarStart`, opposite the send/stop actions,
|
|
136
|
+
so the composer remains one compact surface. Expose format or size limits to
|
|
137
|
+
assistive technology instead of adding a persistent explanatory row.
|
|
138
|
+
- A running request changes the product action from Send to Stop. Do not present
|
|
139
|
+
an enabled Send action while the product cannot accept another request.
|
|
140
|
+
- Persist unsent text and attachments when route recovery is a product
|
|
141
|
+
requirement; persistence belongs to the application, not the component.
|
|
142
|
+
|
|
143
|
+
## Tool behavior
|
|
144
|
+
|
|
145
|
+
`ChatToolPanel` is collapsed by default unless the tool is the user's immediate
|
|
146
|
+
blocking task. Its summary contains one factual title, optional one-line
|
|
147
|
+
description, and a truthful count or state. Expanded content has bounded
|
|
148
|
+
internal overflow so it cannot push the composer out of reach.
|
|
149
|
+
|
|
150
|
+
After a tool completes, prefer a compact summary such as “3 references added”
|
|
151
|
+
with an Edit affordance. Keep generated output out of the tool panel.
|
|
152
|
+
|
|
153
|
+
The same conversation must remain operable through MCP without inventing a
|
|
154
|
+
second UX state machine. Product tool inputs and states use stable ids from a
|
|
155
|
+
shared manifest; MCP returns the same prompt, reference policy, next step, and
|
|
156
|
+
approval requirement that the browser consumes. For Logo Maker this sequence
|
|
157
|
+
is `get_room_context` → `list_logo_skills` → `prepare_logo_maker_run` → draft →
|
|
158
|
+
human review → authenticated checkpoint. A local preparation tool never claims
|
|
159
|
+
that the remote run or checkpoint has happened.
|
|
160
|
+
|
|
161
|
+
## shadcn and AI component relationship
|
|
162
|
+
|
|
163
|
+
Ceramic follows the headless behavior and composition discipline of current
|
|
164
|
+
shadcn chat primitives, but does not copy Tailwind classes, raw theme colors,
|
|
165
|
+
or product copy. Ceramic owns semantic tokens, slots, states, motion profiles,
|
|
166
|
+
Arabic/RTL behavior, package exports, and QA contracts. Use shadcn or AI
|
|
167
|
+
Elements examples as behavior references; use Ceramic components as the public
|
|
168
|
+
runtime contract.
|
|
169
|
+
|
|
170
|
+
## Release checklist
|
|
171
|
+
|
|
172
|
+
- Desktop, mobile, and the changed breakpoint have one clear scroll owner.
|
|
173
|
+
- English/LTR and Arabic/RTL preserve order, alignment, labels, and truncation.
|
|
174
|
+
- Pointer, keyboard, touch, screen-reader semantics, and IME submission work.
|
|
175
|
+
- Streaming, offscreen update, history prepend, reload, empty, error, and long
|
|
176
|
+
content states recover without a viewport jump.
|
|
177
|
+
- Normal and reduced motion preserve the same final state.
|
|
178
|
+
- Tool inputs remain in conversation; generated output remains in the output
|
|
179
|
+
rail.
|
|
180
|
+
- Components, manifests, docs, exports, CLI/MCP data, contract tests, and browser
|
|
181
|
+
tests agree before publishing.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
# Code Block
|
|
2
|
+
|
|
3
|
+
Use `CodeBlock` for independently reusable commands, configuration, source, and agent instructions.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
import { CodeBlock } from '@utopia-studio-design/design-system/CodeBlock';
|
|
7
|
+
|
|
8
|
+
<CodeBlock
|
|
9
|
+
code="npm install @utopia-studio-design/design-system"
|
|
10
|
+
language="bash"
|
|
11
|
+
copyLabel="Copy code"
|
|
12
|
+
copiedLabel="Code copied"
|
|
13
|
+
/>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
The visible snippet and clipboard value come from the same `code` string. The copy action exposes an accessible name, a visible focus ring, a minimum touch target, and polite success feedback. Supply localized `copyLabel` and `copiedLabel` values in localized products.
|
|
17
|
+
|
|
18
|
+
The component uses semantic surface, foreground, muted foreground, border, success, radius, typography, spacing, icon, and focus tokens. Its header follows logical inline direction. Source and command content remain LTR in Arabic and RTL layouts so exact code stays stable.
|
|
19
|
+
|
|
20
|
+
Do not add a second copy control outside `CodeBlock`, hardcode brand colors, or use it for editable content.
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
# Presentation and marketing production
|
|
2
|
+
|
|
3
|
+
Ceramic supplies the semantic theme, registered brand assets, production
|
|
4
|
+
constraints, and a copyable prompt. The website does **not** create a PPTX or
|
|
5
|
+
campaign export merely because a user selects an output. Run the copied prompt
|
|
6
|
+
in an agent or tool that can read the supplied files, create artifacts, and
|
|
7
|
+
open the results for inspection.
|
|
8
|
+
|
|
9
|
+
## Create a presentation
|
|
10
|
+
|
|
11
|
+
1. Open **Templates → Presentations → Presentation Studio**.
|
|
12
|
+
2. Choose the deck purpose, theme source, and deliverables.
|
|
13
|
+
3. When reusing a deck system, attach the approved `.pptx` or `.potx` source.
|
|
14
|
+
4. Keep `public/media` as the default image source, or provide a read-only
|
|
15
|
+
GitHub asset repository with `ceramic.assets.json`.
|
|
16
|
+
5. Review and copy **Full creation prompt**. The short template-card copy is
|
|
17
|
+
not the production prompt.
|
|
18
|
+
6. Paste the prompt into a presentation-capable agent and attach the brief,
|
|
19
|
+
evidence, template, logo, fonts, images, and data sources.
|
|
20
|
+
7. Approve the slide outline before visual production.
|
|
21
|
+
8. Require an editable PPTX, review PDF, source files, asset report, and QA
|
|
22
|
+
report.
|
|
23
|
+
|
|
24
|
+
The creation agent must keep unsupported claims as `[NEEDS INPUT]`. It must not
|
|
25
|
+
invent metrics, citations, testimonials, logos, or Arabic production copy.
|
|
26
|
+
|
|
27
|
+
### Presentation inputs
|
|
28
|
+
|
|
29
|
+
- Story: audience, meeting goal, core message, evidence, and final ask.
|
|
30
|
+
- Theme: a registered Ceramic theme, brand repository, or approved PPT source.
|
|
31
|
+
- Identity: registered logo or wordmark, fonts, and usage policy.
|
|
32
|
+
- Imagery: licensed assets from `public/media` or the external asset manifest.
|
|
33
|
+
- Data: a traceable source for every number and chart.
|
|
34
|
+
|
|
35
|
+
### Presentation delivery gate
|
|
36
|
+
|
|
37
|
+
- Open both PPTX and PDF; a successful file write is not proof of a valid deck.
|
|
38
|
+
- The registered logo appears on cover and closing slides, keeps its aspect
|
|
39
|
+
ratio, and remains vector when the format supports it.
|
|
40
|
+
- Every slide is legible at 16:9 with no overflow, clipping, accidental font
|
|
41
|
+
substitution, or unreadably small text.
|
|
42
|
+
- Editable information uses native shapes and charts where editing matters.
|
|
43
|
+
- Arabic uses approved copy, `dir="rtl"`, logical alignment, Arabic type roles,
|
|
44
|
+
and verified mixed-script and numeral behavior.
|
|
45
|
+
- The asset report lists source, license, output format, and slide numbers.
|
|
46
|
+
|
|
47
|
+
## Create marketing assets
|
|
48
|
+
|
|
49
|
+
1. Open **Themes**, choose the permitted theme, then choose **Use with AI →
|
|
50
|
+
Marketing Assets**. Signed-in users may start from the Brand Workspace.
|
|
51
|
+
2. Supply one approved campaign brief: goal, audience, message, proof, CTA,
|
|
52
|
+
channels, dimensions, deadline, and approval state.
|
|
53
|
+
3. Attach the approved logo, real product screenshots, licensed imagery, and
|
|
54
|
+
localized copy.
|
|
55
|
+
4. Copy the generated production prompt into a file-capable creation tool.
|
|
56
|
+
5. Create one semantic master and derive the requested channel variants.
|
|
57
|
+
6. Inspect every export independently before release.
|
|
58
|
+
|
|
59
|
+
### Marketing outputs
|
|
60
|
+
|
|
61
|
+
- Editable master with content separated from layout.
|
|
62
|
+
- Explicit channel variants such as 1:1, 4:5, 9:16, and 16:9.
|
|
63
|
+
- Clear file names containing campaign, channel, locale, and version.
|
|
64
|
+
- Metadata for source, license, locale, version, and approval state.
|
|
65
|
+
- QA results for safe area, crop, contrast, copy, file size, and RTL.
|
|
66
|
+
|
|
67
|
+
Never fabricate a product screenshot, performance claim, testimonial,
|
|
68
|
+
partnership, or localized production sentence. Keep missing approved content as
|
|
69
|
+
`[NEEDS INPUT]`.
|
|
70
|
+
|
|
71
|
+
## Asset repository contract
|
|
72
|
+
|
|
73
|
+
Read `presentation-asset-repository.md` for the complete schema. The generator
|
|
74
|
+
may read images and manifest metadata but must never execute code from an asset
|
|
75
|
+
repository. Select imagery by subject, mood, orientation, and focal point, not
|
|
76
|
+
as random decoration.
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
# إنتاج العروض ومواد التسويق
|
|
81
|
+
|
|
82
|
+
يوفّر Ceramic الثيم الدلالي وأصول العلامة المسجلة وقيود الإنتاج وموجّها قابلا
|
|
83
|
+
للنسخ. الموقع **لا ينشئ** ملف PPTX أو صور الحملة بمجرد اختيار نوع المخرج. يجب
|
|
84
|
+
تشغيل الموجّه المنسوخ في وكيل أو أداة تستطيع قراءة الملفات وإنشاء المخرجات
|
|
85
|
+
وفتحها للفحص.
|
|
86
|
+
|
|
87
|
+
## إنشاء عرض تقديمي
|
|
88
|
+
|
|
89
|
+
1. افتح **القوالب ← العروض التقديمية ← Presentation Studio**.
|
|
90
|
+
2. اختر هدف العرض ومصدر الثيم والمخرجات المطلوبة.
|
|
91
|
+
3. عند إعادة استخدام نظام عرض، أرفق ملف `.pptx` أو `.potx` المعتمد.
|
|
92
|
+
4. استخدم `public/media` كمصدر افتراضي للصور، أو أدخل مستودع GitHub للقراءة
|
|
93
|
+
فقط يحتوي `ceramic.assets.json`.
|
|
94
|
+
5. راجع وانسخ **موجّه الإنشاء الكامل**. وصف بطاقة القالب ليس موجّه الإنتاج.
|
|
95
|
+
6. ألصق الموجّه في وكيل يدعم إنشاء العروض وأرفق الموجز والأدلة والقالب والشعار
|
|
96
|
+
والخطوط والصور ومصادر البيانات.
|
|
97
|
+
7. وافق على مخطط الشرائح قبل بدء التصميم.
|
|
98
|
+
8. اطلب PPTX قابلا للتحرير وPDF للمراجعة وملفات المصدر وتقرير الأصول وتقرير QA.
|
|
99
|
+
|
|
100
|
+
يجب أن يترك الوكيل الادعاءات غير المدعومة بعلامة `[NEEDS INPUT]`. لا يجوز له
|
|
101
|
+
اختلاق الأرقام أو المراجع أو الشهادات أو الشعارات أو النص العربي النهائي.
|
|
102
|
+
|
|
103
|
+
### مدخلات العرض
|
|
104
|
+
|
|
105
|
+
- القصة: الجمهور وهدف الاجتماع والرسالة الأساسية والأدلة والطلب النهائي.
|
|
106
|
+
- الثيم: ثيم Ceramic مسجل أو مستودع علامة أو مصدر PPT معتمد.
|
|
107
|
+
- الهوية: الشعار أو wordmark والخطوط وسياسة الاستخدام.
|
|
108
|
+
- الصور: أصول مرخصة من `public/media` أو manifest المستودع الخارجي.
|
|
109
|
+
- البيانات: مصدر قابل للتتبع لكل رقم ورسم.
|
|
110
|
+
|
|
111
|
+
### بوابة تسليم العرض
|
|
112
|
+
|
|
113
|
+
- افتح PPTX وPDF فعليا؛ نجاح كتابة الملف لا يثبت صلاحية العرض.
|
|
114
|
+
- يظهر الشعار المسجل في الغلاف والخاتمة ويحافظ على نسبته ويبقى متجها عندما
|
|
115
|
+
تدعم الصيغة ذلك.
|
|
116
|
+
- تبقى كل شريحة مقروءة بنسبة 16:9 من دون overflow أو قص أو استبدال خط غير مقصود
|
|
117
|
+
أو نص صغير جدا.
|
|
118
|
+
- تستخدم المعلومات التي تتطلب التعديل أشكالا ورسومات أصلية.
|
|
119
|
+
- تستخدم العربية نصا معتمدا و`dir="rtl"` ومحاذاة منطقية وأدوار الطباعة العربية،
|
|
120
|
+
مع فحص النص المختلط والأرقام.
|
|
121
|
+
- يسجل تقرير الأصول المصدر والترخيص والصيغة النهائية وأرقام الشرائح.
|
|
122
|
+
|
|
123
|
+
## إنشاء مواد تسويقية
|
|
124
|
+
|
|
125
|
+
1. افتح **Themes** واختر الثيم المسموح، ثم **Use with AI ← Marketing Assets**.
|
|
126
|
+
يمكن للمستخدم المسجل البدء من Brand Workspace.
|
|
127
|
+
2. قدّم موجز حملة واحدا معتمدا: الهدف والجمهور والرسالة والدليل وCTA والقنوات
|
|
128
|
+
والمقاسات والموعد وحالة الموافقة.
|
|
129
|
+
3. أرفق الشعار المعتمد ولقطات المنتج الحقيقية والصور المرخصة والنص الموطّن.
|
|
130
|
+
4. انسخ موجّه الإنتاج إلى أداة إنشاء تستطيع التعامل مع الملفات.
|
|
131
|
+
5. أنشئ master دلاليا واحدا ثم اشتق نسخ القنوات المطلوبة.
|
|
132
|
+
6. افحص كل ملف تصدير بصورة مستقلة قبل النشر.
|
|
133
|
+
|
|
134
|
+
### مخرجات التسويق
|
|
135
|
+
|
|
136
|
+
- master قابل للتحرير يفصل المحتوى عن التخطيط.
|
|
137
|
+
- نسخ صريحة للقنوات مثل 1:1 و4:5 و9:16 و16:9.
|
|
138
|
+
- أسماء ملفات واضحة تتضمن الحملة والقناة واللغة والإصدار.
|
|
139
|
+
- بيانات وصفية للمصدر والترخيص واللغة والإصدار وحالة الموافقة.
|
|
140
|
+
- نتائج QA للمساحة الآمنة والقص والتباين والنص وحجم الملف وRTL.
|
|
141
|
+
|
|
142
|
+
لا تختلق لقطة منتج أو ادعاء أداء أو شهادة أو شراكة أو نصا عربيا نهائيا. اترك
|
|
143
|
+
المحتوى الذي لم يعتمد بعد بعلامة `[NEEDS INPUT]`.
|
|
144
|
+
|
|
145
|
+
## عقد مستودع الأصول
|
|
146
|
+
|
|
147
|
+
اقرأ `presentation-asset-repository.md` لمعرفة المخطط الكامل. يمكن للمولّد قراءة
|
|
148
|
+
الصور وبيانات manifest، لكنه لا ينفذ أي كود من مستودع الأصول. اختر الصور حسب
|
|
149
|
+
الموضوع والمزاج والاتجاه ونقطة التركيز، لا كزخرفة عشوائية.
|