feat(app-showcase): master-detail showcase page (New Project + Tasks)

Adds showcase_project_workspace page rendering object-master-detail-form for
showcase_project + showcase_task (master_detail), plus a nav entry. Verifies
ObjectUI ADR-0001 master-detail subform end-to-end in the showcase.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

examples/app-showcase/objectstack.config.ts

@@ -10,7 +10,7 @@ import { ShowcaseApp } from './src/apps/index.js';
 import { ChartGalleryDashboard } from './src/dashboards/index.js';
 import { allReports } from './src/reports/index.js';
 import { allActions } from './src/actions/index.js';
-import { ComponentGalleryPage } from './src/pages/index.js';
+import { ComponentGalleryPage, ProjectWorkspacePage } from './src/pages/index.js';
 import { allFlows } from './src/flows/index.js';
 import { allWebhooks } from './src/webhooks/index.js';
 import { allJobs } from './src/jobs/index.js';
@@ -113,7 +113,7 @@ export default defineStack({
   apps: [ShowcaseApp],
   portals: allPortals,
   views: [TaskViews, ProjectViews],
-  pages: [ComponentGalleryPage],
+  pages: [ComponentGalleryPage, ProjectWorkspacePage],
   dashboards: [ChartGalleryDashboard],
   reports: allReports,
   actions: allActions,

examples/app-showcase/src/apps/index.ts

@@ -48,6 +48,7 @@ export const ShowcaseApp = App.create({
       icon: 'layout',
       children: [
         { id: 'nav_gallery', type: 'page', pageName: 'showcase_component_gallery', label: 'Component Gallery', icon: 'layout-template' },
+        { id: 'nav_project_workspace', type: 'page', pageName: 'showcase_project_workspace', label: 'New Project + Tasks', icon: 'folder-plus' },
       ],
     },
   ],

examples/app-showcase/src/pages/index.ts

@@ -2,6 +2,8 @@
 
 import type { Page } from '@objectstack/spec/ui';
 
+export { ProjectWorkspacePage } from './project-workspace.page.js';
+
 /**
  * Component Gallery — a custom page that places a spread of standard page
  * components (header, card, tabs, text/number/image/divider/button elements,

examples/app-showcase/src/pages/project-workspace.page.ts

@@ -0,0 +1,89 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import type { Page } from '@objectstack/spec/ui';
+
+/**
+ * Project Workspace — a master-detail (header + line items) entry scenario.
+ *
+ * Demonstrates the `object-master-detail-form` renderer (ObjectUI ADR-0001):
+ * create a Project (parent) together with its Tasks (children) in one screen.
+ * `showcase_task.project` is a `master_detail` field, so the children are
+ * created with the parent FK set in a single client-orchestrated transaction.
+ */
+export const ProjectWorkspacePage: Page = {
+  name: 'showcase_project_workspace',
+  label: 'New Project + Tasks',
+  type: 'app',
+  template: 'default',
+  kind: 'full',
+  regions: [
+    {
+      name: 'header',
+      width: 'full',
+      components: [
+        {
+          type: 'page:header',
+          properties: {
+            title: 'New Project + Tasks',
+            subtitle:
+              'Master-detail entry — fill the project, add its tasks inline, and save them together.',
+            icon: 'folder-plus',
+          },
+        },
+      ],
+    },
+    {
+      name: 'main',
+      width: 'large',
+      components: [
+        {
+          type: 'object-master-detail-form',
+          properties: {
+            objectName: 'showcase_project',
+            mode: 'create',
+            formType: 'simple',
+            submitText: 'Create Project + Tasks',
+            fields: ['name', 'account', 'status', 'health', 'budget', 'end_date'],
+            details: [
+              {
+                title: 'Tasks',
+                childObject: 'showcase_task',
+                relationshipField: 'project',
+                amountField: 'estimate_hours',
+                addLabel: 'Add task',
+                columns: [
+                  { field: 'title', label: 'Title', type: 'text', required: true },
+                  {
+                    field: 'status',
+                    label: 'Status',
+                    type: 'select',
+                    options: [
+                      { label: 'Backlog', value: 'backlog' },
+                      { label: 'To Do', value: 'todo' },
+                      { label: 'In Progress', value: 'in_progress' },
+                      { label: 'In Review', value: 'in_review' },
+                      { label: 'Done', value: 'done' },
+                    ],
+                  },
+                  {
+                    field: 'priority',
+                    label: 'Priority',
+                    type: 'select',
+                    options: [
+                      { label: 'Low', value: 'low' },
+                      { label: 'Medium', value: 'medium' },
+                      { label: 'High', value: 'high' },
+                      { label: 'Urgent', value: 'urgent' },
+                    ],
+                  },
+                  { field: 'estimate_hours', label: 'Estimate (h)', type: 'number' },
+                  { field: 'due_date', label: 'Due Date', type: 'date' },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+  ],
+};