feat(spec): interface-editor polish — composite disclosure popover + buttons=object-actions (#2051)

* feat(spec): progressive-disclosure popover for composite form fields

Adds `disclosure?: 'inline' | 'popover'` to FormFieldSchema. A composite field
marked `disclosure: 'popover'` renders as a compact summary line + a gear that
opens its sub-fields in a popover (Airtable-style progressive disclosure),
instead of an always-expanded inline box — keeping the interface-page panel lean.

Applied to the page form's `appearance`, `userActions`, and `addRecord`
composites (the dense sub-toggle groups).

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

* feat(spec): interface page `buttons` = object actions (action-multi picker)

`InterfacePageConfig.buttons` is now a first-class field: an array of the source
object's action names (ActionSchema) surfaced as page toolbar buttons. The page
form renders it with the new `action-multi` widget (dependsOn: source), so the
author picks from the object's real actions — buttons ARE object actions,
correct-by-construction (no free-text IDs).

- page.zod.ts — add `buttons: z.array(z.string())` to InterfacePageConfigSchema.
- page.form.ts — add the Buttons field (widget: action-multi) under User actions.
- showcase task-workbench demonstrates it: buttons: ['showcase_bulk_reassign',
  'showcase_mark_done'] render as Reassign… / Mark Done in the page header.

Pairs with the objectui action-multi widget + InterfaceListPage runtime render.

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

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

examples/app-showcase/src/pages/task-workbench.page.ts

@@ -61,6 +61,10 @@ export const TaskWorkbenchPage: Page = {
       addRecordForm: false,
     },
 
+    // Toolbar buttons ARE object actions (ADR-0047) — referenced by name from
+    // the showcase_task object's ActionSchema, not free text.
+    buttons: ['showcase_bulk_reassign', 'showcase_mark_done'],
+
     showRecordCount: true,
   },
 };

packages/spec/src/ui/page.form.ts

@@ -95,16 +95,18 @@ export const pageForm = defineForm({
             { field: 'filterBy', type: 'repeater', helpText: 'Always-on base filter for the page' },
             { field: 'levels', helpText: 'Hierarchy levels to display (tree-like sources)' },
             // ── Appearance ──
-            { field: 'appearance', type: 'composite', helpText: 'Allowed visualizations (Grid / Kanban / Calendar / …) and description visibility' },
+            { field: 'appearance', type: 'composite', disclosure: 'popover', helpText: 'Allowed visualizations (Grid / Kanban / Calendar / …) and description visibility' },
             // ── User filters ──
             {
               field: 'userFilters',
               widget: 'filter-mode',
               helpText: 'End-user filter bar: None (no bar) / Tabs (named presets) / Dropdown (per-field). None removes the config.',
             },
             // ── User actions ──
-            { field: 'userActions', type: 'composite', helpText: 'Toolbar toggles (search, sort, filter, row height)' },
-            { field: 'addRecord', type: 'composite', helpText: 'Add-record entry point' },
+            { field: 'userActions', type: 'composite', disclosure: 'popover', helpText: 'Toolbar toggles (search, sort, filter, row height)' },
+            { field: 'addRecord', type: 'composite', disclosure: 'popover', helpText: 'Add-record entry point' },
+            // Buttons ARE object actions — pick from the source object's actions.
+            { field: 'buttons', widget: 'action-multi', dependsOn: 'source', helpText: "Toolbar buttons — pick from this object's actions" },
             { field: 'showRecordCount', helpText: 'Show the record count bar' },
             { field: 'allowPrinting', helpText: 'Allow users to print this page' },
           ],

packages/spec/src/ui/page.zod.ts

@@ -257,6 +257,10 @@ export const InterfacePageConfigSchema = lazySchema(() => z.object({
   /** Add record */
   addRecord: AddRecordConfigSchema.optional().describe('Add record entry point configuration'),
 
+  /** Toolbar buttons — references to the source object's actions (ActionSchema).
+   * Buttons ARE object actions (not free text): correct-by-construction. */
+  buttons: z.array(z.string()).optional().describe("Toolbar buttons — names of the source object's actions to surface in the page toolbar"),
+
   /** Record count */
   showRecordCount: z.boolean().optional().describe('Show record count at page bottom'),
 

packages/spec/src/ui/view.zod.ts

@@ -715,6 +715,7 @@ export const FormFieldSchema: z.ZodType<any> = lazySchema(() => z.object({
 
   dependsOn: z.string().optional().describe('Parent field name for cascading'),
   visibleOn: ExpressionInputSchema.optional().describe('Visibility predicate (CEL).'),
+  disclosure: z.enum(['inline', 'popover']).optional().describe('Composite rendering: inline bordered box (default) or a summary line + gear popover (progressive disclosure).'),
 }));
 
 /**