fix(ui): tidy interface-page studio affordance (#1685)

Two UX papercuts on ADR-0047 interface pages, reported from the console:

1. The 'Edit in studio' page button was a long text+icon pill (and the
   label fell back to English in localized UIs). Now an icon-only pencil
   button (28x28) with the label kept as tooltip/aria-label.

2. Clicking it dropped the author on the page designer's empty canvas
   ('No regions yet / Add region') — misleading, since interface pages
   are config-driven and have no regions to compose. The canvas now
   detects interface pages (interfaceConfig, or a list page with no
   regions) and explains they're configured in the Properties → Interface
   panel, with no Add-region call to action.

Locked by PageBlockCanvas.test.tsx (3 cases: interfaceConfig, bare list,
and a region-composed page keeping the original empty state).

Browser-verified on the showcase Task Workbench: icon button + the new
canvas hint both render.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: 3 people

packages/app-shell/src/views/PageView.tsx

@@ -84,12 +84,12 @@ export function PageView() {
             <button
               type="button"
               onClick={openInStudio}
-              className="absolute right-3 top-3 z-30 inline-flex items-center gap-1.5 rounded-md border border-input bg-background/90 px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-accent-foreground"
+              className="absolute right-3 top-3 z-30 inline-flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background/90 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-accent-foreground"
               data-testid="page-edit-in-studio-button"
               title={t('common.editInStudio', { defaultValue: 'Edit in studio' })}
+              aria-label={t('common.editInStudio', { defaultValue: 'Edit in studio' })}
             >
               <Pencil className="h-3.5 w-3.5" />
-              {t('common.editInStudio', { defaultValue: 'Edit in studio' })}
             </button>
           )}
           {(page as any).interfaceConfig?.source ? (

packages/app-shell/src/views/metadata-admin/previews/PageBlockCanvas.test.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { PageBlockCanvas } from './PageBlockCanvas';
+
+afterEach(cleanup);
+
+/**
+ * Empty-canvas messaging (ADR-0047). An interface page (config-driven, no
+ * regions) must NOT be invited to "Add region" — it points the author at the
+ * Properties → Interface panel instead. A region-composed page keeps the
+ * normal "No regions yet / Add region" empty state.
+ */
+describe('PageBlockCanvas — empty state', () => {
+  it('interface page (interfaceConfig present) shows the Properties hint, not Add region', () => {
+    render(
+      <PageBlockCanvas
+        draft={{ name: 'wb', type: 'list', regions: [], interfaceConfig: { source: 'task' } }}
+        onPatch={() => {}}
+      />,
+    );
+    expect(screen.getByText(/configured in Properties/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Add region/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/No regions yet/i)).not.toBeInTheDocument();
+  });
+
+  it('a list page without regions is treated as interface mode', () => {
+    render(<PageBlockCanvas draft={{ name: 'wb', type: 'list', regions: [] }} onPatch={() => {}} />);
+    expect(screen.getByText(/configured in Properties/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Add region/i)).not.toBeInTheDocument();
+  });
+
+  it('a region-composed page keeps the "No regions yet / Add region" empty state', () => {
+    render(<PageBlockCanvas draft={{ name: 'home', type: 'home', regions: [] }} onPatch={() => {}} />);
+    expect(screen.getByText(/No regions yet/i)).toBeInTheDocument();
+    expect(screen.getByText(/Add region/i)).toBeInTheDocument();
+    expect(screen.queryByText(/configured in Properties/i)).not.toBeInTheDocument();
+  });
+});

packages/app-shell/src/views/metadata-admin/previews/PageBlockCanvas.tsx

@@ -307,6 +307,30 @@ export function PageBlockCanvas({
 
   // Empty draft → empty canvas with hint.
   if (regions.length === 0) {
+    // ADR-0047 interface pages are config-driven, not composed from regions:
+    // the list surface is generated from `interfaceConfig` (source view +
+    // user filters + visualizations). Inviting the author to "add a region"
+    // here is misleading — point them at the Properties panel instead.
+    const isInterfacePage =
+      !!(draft as any)?.interfaceConfig ||
+      ((draft as any)?.type === 'list' && !(draft as any)?.regions?.length);
+    if (isInterfacePage) {
+      return (
+        <div className="h-full overflow-auto bg-muted/20" onClick={handleBgClick}>
+          <div className="mx-auto max-w-3xl px-6 py-8">
+            <div className="rounded-lg border-2 border-dashed bg-background py-16 px-6 text-center space-y-3">
+              <div className="text-sm font-medium">Interface page — configured in Properties</div>
+              <div className="text-xs text-muted-foreground">
+                This page renders a list from a source view; there are no regions
+                to design. Use the <span className="font-medium">Properties</span> panel
+                → <span className="font-medium">Interface</span> section to set the data
+                source, user filters, visualizations and toolbar actions.
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
     return (
       <div className="h-full overflow-auto bg-muted/20" onClick={handleBgClick}>
         <div className="mx-auto max-w-3xl px-6 py-8">