feat(app-showcase): inline-editable record:line_items on project detail

Slotted showcase_project detail page surfacing the project's tasks as an
inline-editable record:line_items grid (view + edit children together).
Verified end-to-end: tasks load by the master_detail FK, inline edit + Save
persists the diff.

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

Author: os-zhuang

.changeset/showcase-project-detail.md

@@ -0,0 +1,4 @@
+---
+---
+
+docs(app-showcase): slotted project detail page with an inline-editable `record:line_items` Tasks grid (example only).

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, ProjectWorkspacePage } from './src/pages/index.js';
+import { ComponentGalleryPage, ProjectWorkspacePage, ProjectDetailPage } 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, ProjectWorkspacePage],
+  pages: [ComponentGalleryPage, ProjectWorkspacePage, ProjectDetailPage],
   dashboards: [ChartGalleryDashboard],
   reports: allReports,
   actions: allActions,

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

@@ -3,6 +3,7 @@
 import type { Page } from '@objectstack/spec/ui';
 
 export { ProjectWorkspacePage } from './project-workspace.page.js';
+export { ProjectDetailPage } from './project-detail.page.js';
 
 /**
  * Component Gallery — a custom page that places a spread of standard page

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

@@ -0,0 +1,78 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import type { Page } from '@objectstack/spec/ui';
+
+/**
+ * Project detail — a slotted record page that surfaces the project's Tasks as
+ * an INLINE-EDITABLE `record:line_items` grid (ObjectUI ADR-0001), instead of
+ * a read-only related list. This is the "view + edit the children together"
+ * half of the master-detail story: open a project, edit its tasks in place,
+ * and Save persists the diff (create/update/delete) with the `master_detail`
+ * FK maintained.
+ *
+ * `kind: 'slotted'` with only the `tabs` slot overridden — the synthesizer
+ * fills in the header / highlights / details / discussion; the Tasks tab below
+ * replaces the synthesized related-list strip.
+ */
+export const ProjectDetailPage: Page = {
+  name: 'showcase_project_detail',
+  label: 'Project',
+  type: 'record',
+  object: 'showcase_project',
+  kind: 'slotted',
+  isDefault: true,
+  regions: [],
+  slots: {
+    tabs: {
+      type: 'page:tabs',
+      properties: {
+        type: 'line',
+        items: [
+          {
+            key: 'tasks',
+            label: 'Tasks',
+            children: [
+              {
+                type: 'record:line_items',
+                properties: {
+                  childObject: 'showcase_task',
+                  relationshipField: 'project',
+                  amountField: 'estimate_hours',
+                  title: 'Tasks',
+                  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' },
+                  ],
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+};