feat(app-shell): Studio 设计面 MVP (ADR-0080 slice-1) — 三支柱 + 真实元数据 + 开源 AI slot by os-zhuang · Pull Request #2060 · objectstack-ai/objectui

os-zhuang · 2026-06-29T02:12:36Z

什么

Studio 从「通用元数据 CRUD admin」重构为预览优先的 WYSIWYG 设计面的 slice-1（ADR-0080，决策与深度设计文档已合并 cloud#697）。新增 packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx，从 @object-ui/app-shell 导出，挂在 apps/console 的 /studio/:packageId/:tab 路由。

核心理念：设计态 = 运行态——同一个 objectui 渲染器，给每次编辑一条不依赖 AI 的兜底（补 Airtable 拆解暴露的「阶段二迭代面」缺口）。

三支柱（全真实数据，零新渲染器，复用现成 preview/inspector 注册表）

Interfaces — /studio/:packageId/interfaces：左侧导航树镜像真实 App 的多级菜单（Workspace / Data Model / Analytics / Pages），菜单项绑定到对象 / 看板 / 报表 / 页面；点选 leaf 进画布，用同一渲染器预览（"预览即运行 · 同一渲染器"）；画布点选积木 → 右侧 inspector 直接改属性 → 保存草稿 / 发布。
Data — /studio/:packageId/data：用我们的视图模型（object-view 列表视图，非 Airtable 裸 grid），整版主视图；按当前软件包过滤对象。
Automations — /studio/:packageId/automations：flow 列表 + FlowPreview 流程图；按当前软件包过滤。

开源/闭源边界

AI 副驾是注入式 aiSlot prop——开源版留空，cloud 版填左栏聊天。开放机制、闭源智能，沿用 ai-studio open-core 模式。

不进产品 nav

只挂 /studio 路由，暂不进控制台导航——MVP，opt-in，零回归面。

验证

✅ eslint . — 0 errors（5 个 warning，CI 不拦）
✅ tsc --noEmit（app-shell，依赖已构建）— 0 errors
✅ edit→save→publish→落盘实测（本地全栈，真实后端）：inspector 改 grid Columns 3→2 → 画布即时回流（onPatch→同一渲染器重渲）→ 保存草稿（"未发布草稿" badge）→ 发布 → 元数据 overlay 层持久化 columns:2（overlayScope:env），effective 解析为 2，draft 已清。

layer	columns
code（包源）	3
overlay（发布写入）	2
effective（运行态）	2

后续 PR（已记 TODO，不在本 PR）

Data 列表接全功能 object 视图宿主（视图切换 tab + 添加视图）
Interface 导航左栏拖拽编辑（复用 AppNavCanvas）
grid 列头动态加字段（用户点名的下一步优化重点）

🤖 Generated with Claude Code

…ice-1) Additive /dev/studio-design route + DevStudioDesign four-zone shell reusing getMetadataPreview/getMetadataInspector + SchemaRenderer. Touches no existing surface. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…t (ADR-0080) Move the design surface out of the apps/console dev harness into @object-ui/app-shell as StudioDesignSurface. The left AI copilot becomes an injected aiSlot prop — OSS renders three zones (nav/canvas/inspector); the cloud edition injects AI. Repoint /dev/studio-design at the promoted component. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…#3/#4) Replace the fixture with the shared MetadataClient: the single-App nav lists real pages, clicking loads that surface into the canvas (real PagePreview + live data), and the toolbar saves drafts / publishes through the real pipeline. Route moves inside ProtectedRoute for the connected client + data adapter. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…ions,interfaces} Three pillars are now real routes scoped to the package being designed. The shell renders the package + pillar route links; Interfaces drives the real MetadataClient (nav/canvas/inspector + draft/publish), Data/Automations are scaffolded placeholders pending the App-nav + object/flow surface reuse map. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…utomations Interfaces: load the real App by package id and render its navigation tree (groups + typed leaves page/object/dashboard/report); clicking loads the bound surface (PagePreview/DashboardPreview/object-grid). Data: object list + record grid (object-grid) + field table. Automations: flow list + FlowPreview graph. All reuse existing renderers — no new editor code. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…ble parity) Drop the redundant field table — the record grid's columns ARE the fields. Data mode now reads like a spreadsheet (objects on the left, the records directly viewable), matching Airtable's Data tab. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…ot raw grid) Per design direction, the Data pillar (and Interfaces object items) render an object via object-view — its named list views + ViewSwitcher + record actions, falling back to a grid — instead of the raw object-grid. Matches our view model. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

) Pass packageId into DataPillar/AutomationsPillar and use client.list(type, { packageId }) (=> ?package=) so each pillar lists only the current package's objects/flows, not all env metadata. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…hooks/static-components) AutomationsPillar assigned `const Preview = getMetadataPreview(...)` and rendered it as JSX, which react-hooks/static-components flags as a component created during render. Render via React.createElement instead, and derive the type from the selected flow (current.type) to mirror InterfacesPillar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel · 2026-06-29T02:12:42Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
objectui	Ignored		Jun 29, 2026 2:12am

github-actions · 2026-06-29T02:16:09Z

✅ Console Performance Budget

Metric	Value	Budget
Main entry (gzip)	59.1 KB	350 KB
Entry file	`index-CXXaQN0M.js`	—
Status	PASS	—

📦 Bundle Size Report

Package	Size	Gzipped
app-shell (index.js)	7.28KB	2.63KB
app-shell (runtime-config.js)	4.72KB	1.69KB
app-shell (types.js)	0.01KB	0.04KB
auth (AuthContext.js)	0.31KB	0.24KB
auth (AuthGuard.js)	1.17KB	0.53KB
auth (AuthProvider.js)	17.90KB	3.67KB
auth (AuthShell.js)	3.49KB	1.40KB
auth (ForgotPasswordForm.js)	4.79KB	1.88KB
auth (LoginForm.js)	9.55KB	3.36KB
auth (PreviewBanner.js)	0.90KB	0.50KB
auth (RegisterForm.js)	6.63KB	2.15KB
auth (SocialSignInButtons.js)	8.89KB	3.61KB
auth (UserMenu.js)	3.40KB	1.22KB
auth (auth-gate-events.js)	1.29KB	0.66KB
auth (authStyles.js)	5.04KB	1.72KB
auth (createAuthClient.js)	26.07KB	6.30KB
auth (createAuthenticatedFetch.js)	3.93KB	1.55KB
auth (index.js)	1.75KB	0.76KB
auth (types.js)	0.59KB	0.35KB
auth (useAuth.js)	4.29KB	0.82KB
auth (useIsWorkspaceAdmin.js)	1.61KB	0.85KB
collaboration (CommentThread.js)	18.38KB	4.49KB
collaboration (LiveCursors.js)	3.17KB	1.27KB
collaboration (PresenceAvatars.js)	3.65KB	1.42KB
collaboration (PresenceProvider.js)	2.42KB	0.96KB
collaboration (index.js)	1.25KB	0.53KB
collaboration (useCommentSearch.js)	1.98KB	0.88KB
collaboration (useConflictResolution.js)	7.75KB	1.86KB
collaboration (useMentionNotifications.js)	1.81KB	0.68KB
collaboration (usePresence.js)	6.33KB	1.84KB
collaboration (useRealtimeSubscription.js)	7.91KB	2.01KB
components (index.js)	424.32KB	90.40KB
core (index.js)	1.57KB	0.57KB
create-plugin (index.js)	9.28KB	2.98KB
data-objectstack (index.js)	99.69KB	24.89KB
fields (index.js)	164.60KB	39.84KB
i18n (LocalizationContext.js)	1.76KB	0.96KB
i18n (currency.js)	1.22KB	0.64KB
i18n (i18n.js)	4.32KB	1.77KB
i18n (index.js)	2.46KB	0.96KB
i18n (pickLocalized.js)	1.31KB	0.67KB
i18n (provider.js)	5.37KB	1.72KB
i18n (useObjectLabel.js)	21.15KB	4.68KB
i18n (useSafeTranslation.js)	2.68KB	0.98KB
layout (index.js)	36.30KB	10.04KB
mobile (MobileProvider.js)	0.92KB	0.49KB
mobile (ResponsiveContainer.js)	0.94KB	0.38KB
mobile (breakpoints.js)	1.51KB	0.70KB
mobile (createOfflineDataSource.js)	5.61KB	1.74KB
mobile (index.js)	1.50KB	0.62KB
mobile (offlineQueue.js)	3.91KB	1.35KB
mobile (pwa.js)	0.97KB	0.49KB
mobile (serviceWorker.js)	1.48KB	0.62KB
mobile (serviceWorkerSource.js)	3.41KB	1.48KB
mobile (useBreakpoint.js)	1.54KB	0.65KB
mobile (useGesture.js)	4.42KB	1.27KB
mobile (useOfflineSync.js)	1.99KB	0.72KB
mobile (usePullToRefresh.js)	2.53KB	0.85KB
mobile (useResponsive.js)	0.71KB	0.42KB
mobile (useResponsiveConfig.js)	1.36KB	0.63KB
mobile (useSpecGesture.js)	1.77KB	0.77KB
mobile (useTouchTarget.js)	1.01KB	0.54KB
permissions (MePermissionsProvider.js)	5.09KB	1.84KB
permissions (PermissionContext.js)	0.31KB	0.25KB
permissions (PermissionGuard.js)	0.89KB	0.45KB
permissions (PermissionProvider.js)	3.46KB	1.03KB
permissions (evaluator.js)	4.00KB	1.23KB
permissions (index.js)	0.91KB	0.41KB
permissions (store.js)	0.91KB	0.42KB
permissions (useFieldPermissions.js)	1.28KB	0.52KB
permissions (usePermissions.js)	1.50KB	0.70KB
plugin-ai (index.js)	15.71KB	3.79KB
plugin-calendar (index.js)	45.98KB	12.65KB
plugin-charts (index.js)	46.02KB	12.96KB
plugin-chatbot (index.js)	172.74KB	41.13KB
plugin-dashboard (index.js)	108.19KB	26.87KB
plugin-designer (index.js)	213.42KB	42.94KB
plugin-detail (index.js)	198.56KB	47.98KB
plugin-editor (index.js)	2.38KB	1.06KB
plugin-form (index.js)	96.62KB	23.40KB
plugin-gantt (index.js)	136.68KB	33.88KB
plugin-grid (index.js)	121.64KB	32.95KB
plugin-kanban (index.js)	48.82KB	13.13KB
plugin-list (index.js)	94.53KB	22.32KB
plugin-map (index.js)	16.02KB	4.98KB
plugin-markdown (index.js)	13.58KB	4.64KB
plugin-report (index.js)	37.83KB	9.97KB
plugin-timeline (index.js)	25.37KB	7.20KB
plugin-tree (index.js)	8.21KB	2.76KB
plugin-view (index.js)	84.45KB	20.36KB
providers (DataSourceProvider.js)	0.75KB	0.39KB
providers (MetadataProvider.js)	1.37KB	0.59KB
providers (ThemeProvider.js)	1.55KB	0.67KB
providers (UploadProvider.js)	11.71KB	3.53KB
providers (index.js)	0.44KB	0.22KB
providers (types.js)	0.01KB	0.04KB
react (LazyPluginLoader.js)	3.77KB	1.33KB
react (SchemaRenderer.js)	18.23KB	5.97KB
react (index.js)	0.76KB	0.42KB
sdui-parser (codegen.js)	4.09KB	1.74KB
sdui-parser (index.js)	2.16KB	0.94KB
sdui-parser (parse.js)	10.04KB	2.82KB
sdui-parser (types.js)	0.29KB	0.24KB
sdui-parser (validate.js)	4.69KB	1.48KB
tenant (TenantContext.js)	0.31KB	0.25KB
tenant (TenantGuard.js)	1.04KB	0.43KB
tenant (TenantProvider.js)	2.76KB	0.98KB
tenant (TenantScopedQuery.js)	0.77KB	0.44KB
tenant (index.js)	0.75KB	0.38KB
tenant (resolver.js)	2.64KB	0.76KB
tenant (useTenant.js)	0.50KB	0.32KB
tenant (useTenantBranding.js)	0.62KB	0.39KB
types (ai.js)	0.20KB	0.17KB
types (api-types.js)	0.20KB	0.18KB
types (app.js)	2.87KB	0.99KB
types (base.js)	0.20KB	0.18KB
types (blocks.js)	0.20KB	0.18KB
types (complex.js)	0.20KB	0.18KB
types (crud.js)	0.20KB	0.18KB
types (data-display.js)	0.20KB	0.18KB
types (data-protocol.js)	0.20KB	0.19KB
types (data.js)	0.20KB	0.18KB
types (designer.js)	0.77KB	0.41KB
types (disclosure.js)	0.20KB	0.18KB
types (feedback.js)	0.20KB	0.18KB
types (field-types.js)	0.20KB	0.18KB
types (form.js)	0.20KB	0.18KB
types (index.js)	1.54KB	0.68KB
types (layout.js)	0.20KB	0.18KB
types (mobile.js)	0.20KB	0.18KB
types (navigation.js)	0.20KB	0.18KB
types (objectql.js)	0.20KB	0.18KB
types (overlay.js)	0.20KB	0.18KB
types (permissions.js)	0.20KB	0.18KB
types (plugin-scope.js)	0.20KB	0.18KB
types (record-components.js)	0.20KB	0.19KB
types (registry.js)	0.20KB	0.18KB
types (reports.js)	0.20KB	0.18KB
types (spec-report.js)	5.26KB	1.96KB
types (tenant.js)	0.20KB	0.18KB
types (theme.js)	0.20KB	0.18KB
types (ui-action.js)	0.75KB	0.46KB
types (views.js)	0.20KB	0.18KB
types (widget.js)	0.20KB	0.18KB

Size Limits

✅ Core packages should be < 50KB gzipped
✅ Component packages should be < 100KB gzipped
⚠️ Plugin packages should be < 150KB gzipped

os-zhuangand others added 9 commits June 29, 2026 00:14

github-actionsBot added the apps label Jun 29, 2026

os-zhuang merged commit 1bb0cad into mainJun 29, 2026
10 checks passed

os-zhuang deleted the feat/studio-design-surface branch June 29, 2026 02:13

Navigation Menu

Uh oh!

feat(app-shell): Studio 设计面 MVP (ADR-0080 slice-1) — 三支柱 + 真实元数据 + 开源 AI slot - #2060

feat(app-shell): Studio 设计面 MVP (ADR-0080 slice-1) — 三支柱 + 真实元数据 + 开源 AI slot#2060
os-zhuang merged 9 commits into
mainfrom
feat/studio-design-surface

os-zhuang commented Jun 29, 2026

Uh oh!

vercelBot commented Jun 29, 2026

Uh oh!

Uh oh!

github-actionsBot commented Jun 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

os-zhuang commented Jun 29, 2026

什么

三支柱（全真实数据，零新渲染器，复用现成 preview/inspector 注册表）

开源/闭源边界

不进产品 nav

验证

后续 PR（已记 TODO，不在本 PR）

Uh oh!

vercelBot commented Jun 29, 2026

Uh oh!

Uh oh!

github-actionsBot commented Jun 29, 2026

✅ Console Performance Budget

📦 Bundle Size Report

Size Limits

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant