From 82051632b942f8200948f8465023fe73464e6142 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 8 Oct 2026 22:09:16 +0000
Subject: [PATCH 1/3] refactor(plugin-designer): the designer forms pick with
 the shared Select (objectui#11865)

FieldDesigner's type filter, DataModelDesigner's field-type picker,
BrandingEditor's font family and AppCreationWizard's template were
browser-native selects. Each is now the shared Radix Select through a
module-private picker whose items carry option indexes, so an option
whose value is '' needs no empty SelectItem. A stored value none of the
options carries is shown as itself.

DataModelDesigner's shortcut guard also skips a combobox trigger, so
Delete or Escape on the field-type picker stays the picker's own key,
as it was on the native control.

Claude-Session: https://claude.ai/code/session_01MgfduSkFrfM3eorB3UGfAU
Co-authored-by: Claude <noreply@anthropic.com>
---
 .../plugin-designer/src/AppCreationWizard.tsx | 82 ++++++++++++---
 .../plugin-designer/src/BrandingEditor.tsx    | 84 +++++++++++++---
 .../plugin-designer/src/DataModelDesigner.tsx | 86 +++++++++++++---
 .../plugin-designer/src/FieldDesigner.tsx     | 99 ++++++++++++++++---
 ...dDesigner.choiceTypesHidden-11253.test.tsx | 16 +--
 ...eldDesigner.formulaControlRetired.test.tsx | 20 ++--
 6 files changed, 321 insertions(+), 66 deletions(-)

diff --git a/packages/plugin-designer/src/AppCreationWizard.tsx b/packages/plugin-designer/src/AppCreationWizard.tsx
index c3e4ffb529..dc8916e906 100644
--- a/packages/plugin-designer/src/AppCreationWizard.tsx
+++ b/packages/plugin-designer/src/AppCreationWizard.tsx
@@ -42,6 +42,7 @@ import {
   Globe,
   X,
 } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@object-ui/components';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { resolveNavItemLabel, type NavTargetLabelResolver } from '@object-ui/layout';
@@ -280,6 +281,69 @@ function StepIndicator({ steps, currentIndex, onStepClick }: StepIndicatorProps)
 // Step 1: Basic Info
 // ============================================================================
 
+/** The item a template none of the options carries is shown by. */
+const OUTSIDE_OPTIONS = 'outside';
+
+/**
+ * objectui#11865 — the basic step's template picker, drawn with the shared
+ * `Select`, the control the rest of the designer picks with. It used to be a
+ * browser-native `<select>`. What a pick writes is unchanged: `onPick`
+ * receives the picked option's own value, the string the native control's
+ * `change` carried (`''` for "None", else the template's id). Re-picking the
+ * current option writes nothing, as it did there.
+ *
+ * - Items carry their option's INDEX, not its value: "None" is the option
+ *   whose value is `''`, which `SelectItem` refuses.
+ * - A template none of the options carries gets an item of its own, labelled
+ *   with its id, so the trigger shows what the draft holds. The native control
+ *   showed "None" there. Picking that item writes nothing.
+ * - `disabled` reaches the trigger through the primitive, as it reached the
+ *   native control.
+ * - `id` goes on the trigger, so the `<label htmlFor>` names it as it named the
+ *   native control.
+ */
+function TemplatePicker({
+  id,
+  value,
+  options,
+  onPick,
+  disabled,
+}: {
+  id: string;
+  value: string;
+  options: ReadonlyArray<{ value: string; label: string }>;
+  onPick: (value: string) => void;
+  disabled: boolean;
+}) {
+  const at = options.findIndex((o) => o.value === value);
+  return (
+    <Select
+      value={at !== -1 ? String(at) : OUTSIDE_OPTIONS}
+      onValueChange={(token) => {
+        // `undefined` for the outside item: it is the draft's own template, so there is nothing to write.
+        const picked = options[Number(token)];
+        if (picked) onPick(picked.value);
+      }}
+      disabled={disabled}
+    >
+      <SelectTrigger
+        id={id}
+        className="h-auto rounded-md border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:ring-offset-0 disabled:bg-gray-50"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {at === -1 && <SelectItem value={OUTSIDE_OPTIONS}>{value}</SelectItem>}
+        {options.map((o, i) => (
+          <SelectItem key={`${i}:${o.value}`} value={String(i)}>
+            {o.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
 interface BasicInfoStepProps {
   draft: AppWizardDraft;
   templates: Array<{ id: string; label: string; description?: string }>;
@@ -385,20 +449,16 @@ function BasicInfoStep({ draft, templates, readOnly, onChange, t }: BasicInfoSte
           <label htmlFor="app-template" className="block text-sm font-medium text-gray-700">
             {t('appDesigner.template')}
           </label>
-          <select
+          <TemplatePicker
             id="app-template"
             value={draft.template ?? ''}
-            onChange={(e) => onChange({ template: e.target.value })}
+            options={[
+              { value: '', label: 'None' },
+              ...templates.map((template) => ({ value: template.id, label: template.label })),
+            ]}
+            onPick={(template) => onChange({ template })}
             disabled={readOnly}
-            className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-50"
-          >
-            <option value="">None</option>
-            {templates.map((template) => (
-              <option key={template.id} value={template.id}>
-                {template.label}
-              </option>
-            ))}
-          </select>
+          />
         </div>
       )}
     </div>
diff --git a/packages/plugin-designer/src/BrandingEditor.tsx b/packages/plugin-designer/src/BrandingEditor.tsx
index b7203986e8..06738fff6f 100644
--- a/packages/plugin-designer/src/BrandingEditor.tsx
+++ b/packages/plugin-designer/src/BrandingEditor.tsx
@@ -31,6 +31,7 @@ import {
   Upload,
   Globe,
 } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@object-ui/components';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { useDesignerTranslation } from './hooks/useDesignerTranslation';
@@ -98,6 +99,70 @@ const FONT_FAMILIES = [
   'system-ui',
 ];
 
+/** The item a font none of the options carries is shown by. */
+const OUTSIDE_OPTIONS = 'outside';
+
+/**
+ * objectui#11865 — the font family picker, drawn with the shared `Select`, the
+ * control the rest of the designer picks with. It used to be a browser-native
+ * `<select>`. What a pick writes is unchanged: `onPick` receives the picked
+ * option's own value, the string the native control's `change` carried, and
+ * the caller turns it into the same `fontFamily` as before. Re-picking the
+ * current option writes nothing, as it did there.
+ *
+ * - Items carry their option's INDEX, not its value: "Default (System)" is the
+ *   option whose value is `''`, which `SelectItem` refuses.
+ * - A font none of the options carries gets an item of its own, labelled with
+ *   the font, so the trigger shows what the branding holds. The native control
+ *   showed "Default (System)" there. Picking that item writes nothing.
+ * - `disabled` reaches the trigger through the primitive, as it reached the
+ *   native control.
+ * - `id` goes on the trigger, so the `<label htmlFor>` names it as it named the
+ *   native control.
+ */
+function FontPicker({
+  id,
+  value,
+  options,
+  onPick,
+  disabled,
+}: {
+  id: string;
+  value: string;
+  options: ReadonlyArray<{ value: string; label: string }>;
+  onPick: (value: string) => void;
+  disabled: boolean;
+}) {
+  const at = options.findIndex((o) => o.value === value);
+  return (
+    <Select
+      value={at !== -1 ? String(at) : OUTSIDE_OPTIONS}
+      onValueChange={(token) => {
+        // `undefined` for the outside item: it is the branding's own font, so there is nothing to write.
+        const picked = options[Number(token)];
+        if (picked) onPick(picked.value);
+      }}
+      disabled={disabled}
+    >
+      <SelectTrigger
+        id={id}
+        data-testid="branding-font-select"
+        className="h-auto rounded-md border-gray-300 py-2 pl-9 pr-3 text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:ring-offset-0 disabled:bg-gray-50"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {at === -1 && <SelectItem value={OUTSIDE_OPTIONS}>{value}</SelectItem>}
+        {options.map((o, i) => (
+          <SelectItem key={`${i}:${o.value}`} value={String(i)}>
+            {o.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
 // ============================================================================
 // BrandingEditor Component
 // ============================================================================
@@ -398,21 +463,16 @@ export function BrandingEditor({
             </label>
             <div className="relative">
               <Type className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
-              <select
+              <FontPicker
                 id="be-font"
-                data-testid="branding-font-select"
                 value={branding.fontFamily ?? ''}
-                onChange={(e) => updateBranding({ fontFamily: e.target.value || undefined })}
+                options={[
+                  { value: '', label: t('appDesigner.fontDefault') },
+                  ...FONT_FAMILIES.map((font) => ({ value: font, label: font })),
+                ]}
+                onPick={(font) => updateBranding({ fontFamily: font || undefined })}
                 disabled={readOnly}
-                className="block w-full rounded-md border border-gray-300 py-2 pl-9 pr-3 text-sm shadow-sm outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-50 appearance-none"
-              >
-                <option value="">{t('appDesigner.fontDefault')}</option>
-                {FONT_FAMILIES.map((font) => (
-                  <option key={font} value={font}>
-                    {font}
-                  </option>
-                ))}
-              </select>
+              />
             </div>
           </div>
         </div>
diff --git a/packages/plugin-designer/src/DataModelDesigner.tsx b/packages/plugin-designer/src/DataModelDesigner.tsx
index 932dd89a75..3ecdbba4d3 100644
--- a/packages/plugin-designer/src/DataModelDesigner.tsx
+++ b/packages/plugin-designer/src/DataModelDesigner.tsx
@@ -9,6 +9,7 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import type { DataModelEntity, DataModelField, DataModelRelationship, DesignerCanvasConfig } from '@object-ui/types';
 import { Database, Plus, Trash2, Link2, Undo2, Redo2, Grid3X3, ZoomIn, ZoomOut, RotateCcw, ChevronDown, ChevronRight, Copy, Clipboard, Users } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@object-ui/components';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { useDesignerHistory } from './hooks/useDesignerHistory';
@@ -34,6 +35,68 @@ const DATA_MODEL_FIELD_TYPES = [
   'multiselect', 'lookup', 'attachment', 'formula', 'autonumber',
 ] as const;
 
+/** The item a type none of the options carries is shown by. */
+const OUTSIDE_OPTIONS = 'outside';
+
+/** Stops a click inside the type picker from reaching the entity card, which selects on click. */
+const keepClickInPicker = (e: React.MouseEvent) => e.stopPropagation();
+
+/**
+ * objectui#11865 — a field row's type picker on an entity card, drawn with the
+ * shared `Select`, the control the rest of the designer picks with. It used to
+ * be a browser-native `<select>`. What a pick writes is unchanged: `onPick`
+ * receives the picked type, the string the native control's `change` carried,
+ * and re-picking the current type writes nothing, as it did there.
+ *
+ * - Items carry their option's INDEX, not the type, as the shared pickers do.
+ * - A type none of the options carries gets an item of its own, labelled with
+ *   the type, so the trigger shows what the field holds. The native control
+ *   showed its first option (`text`) there. Picking that item writes nothing.
+ * - A click on the trigger or in the open list does not reach the card: the
+ *   native control stopped its own click, and its list sent the page none. The
+ *   list renders in a portal, but React still bubbles its events through the
+ *   card.
+ * - Read-only has no picker: the row shows the type as text instead.
+ */
+function FieldTypePicker({
+  value,
+  onPick,
+  testId,
+}: {
+  value: string;
+  onPick: (type: string) => void;
+  testId: string;
+}) {
+  const at = DATA_MODEL_FIELD_TYPES.findIndex((type) => type === value);
+  const outside = at === -1 && value !== '';
+  return (
+    <Select
+      value={at !== -1 ? String(at) : outside ? OUTSIDE_OPTIONS : ''}
+      onValueChange={(token) => {
+        // `undefined` for the outside item: it is the field's own type, so there is nothing to write.
+        const picked = DATA_MODEL_FIELD_TYPES[Number(token)];
+        if (picked) onPick(picked);
+      }}
+    >
+      <SelectTrigger
+        data-testid={testId}
+        onClick={keepClickInPicker}
+        className="ml-auto h-auto w-auto cursor-pointer gap-0.5 rounded border-none bg-transparent p-0 text-xs text-muted-foreground focus:ring-1 focus:ring-primary focus:ring-offset-0"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent onClick={keepClickInPicker}>
+        {outside && <SelectItem value={OUTSIDE_OPTIONS}>{value}</SelectItem>}
+        {DATA_MODEL_FIELD_TYPES.map((type, i) => (
+          <SelectItem key={type} value={String(i)}>
+            {type}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
 /** Arrange entities in a grid layout */
 function calculateGridAutoLayout(
   entities: DataModelEntity[],
@@ -578,8 +641,12 @@ export function DataModelDesigner({
     const el = containerRef.current;
     if (!el) return;
     const handleKeyDown = (e: KeyboardEvent) => {
-      const tag = (e.target as HTMLElement).tagName;
+      const target = e.target as HTMLElement;
+      const tag = target.tagName;
       if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+      // A field row's type picker (objectui#11865) is a `<button role="combobox">`,
+      // not a `SELECT`: its keys are its own, as they were the native control's.
+      if (target.getAttribute('role') === 'combobox') return;
 
       const isCtrl = e.ctrlKey || e.metaKey;
 
@@ -960,20 +1027,11 @@ export function DataModelDesigner({
                         </span>
                       )}
                       {!readOnly ? (
-                        <select
+                        <FieldTypePicker
                           value={field.type}
-                          onChange={(e) => {
-                            e.stopPropagation();
-                            handleFieldTypeChange(entity.id, fieldIndex, e.target.value);
-                          }}
-                          onClick={(e) => e.stopPropagation()}
-                          className="text-xs text-muted-foreground ml-auto bg-transparent border-none focus:ring-1 focus:ring-primary rounded cursor-pointer p-0"
-                          data-testid={`field-type-${entity.id}-${fieldIndex}`}
-                        >
-                          {DATA_MODEL_FIELD_TYPES.map((t) => (
-                            <option key={t} value={t}>{t}</option>
-                          ))}
-                        </select>
+                          onPick={(type) => handleFieldTypeChange(entity.id, fieldIndex, type)}
+                          testId={`field-type-${entity.id}-${fieldIndex}`}
+                        />
                       ) : (
                         <span className="text-muted-foreground ml-auto">{field.type}</span>
                       )}
diff --git a/packages/plugin-designer/src/FieldDesigner.tsx b/packages/plugin-designer/src/FieldDesigner.tsx
index 919006fd2c..7d29c80230 100644
--- a/packages/plugin-designer/src/FieldDesigner.tsx
+++ b/packages/plugin-designer/src/FieldDesigner.tsx
@@ -22,6 +22,15 @@ import { DrawerForm } from '@object-ui/plugin-form';
 import type { DrawerFormSchema } from '@object-ui/plugin-form';
 import { ValueDataSource } from '@object-ui/core';
 import { CHOICE_TYPES_REQUIRING_OPTIONS } from '@object-ui/data-objectstack';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@object-ui/components';
 import {
   Columns3,
   Hash,
@@ -141,6 +150,75 @@ function drawerOffersType(type: DesignerFieldType, editingType?: DesignerFieldTy
   return !CHOICE_TYPES_REQUIRING_OPTIONS.includes(type) || type === editingType;
 }
 
+/** One category of the type filter: its heading and the types under it. */
+interface TypeFilterGroup {
+  category: FieldTypeCategory;
+  label: string;
+  options: ReadonlyArray<{ value: DesignerFieldType; label: string }>;
+}
+
+/**
+ * objectui#11865 — the list's type filter, drawn with the shared `Select`, the
+ * control the rest of the designer picks with. It used to be a browser-native
+ * `<select>`, one `<optgroup>` per category. What a pick does is unchanged:
+ * `onPick` receives the picked option's own value (`''` for "All types", else
+ * the type), the string the native control's `change` carried.
+ *
+ * - Items carry their option's INDEX, not its value: "All types" is index 0,
+ *   and its value is `''`, which `SelectItem` refuses.
+ * - Each category is a `SelectGroup` headed by a `SelectLabel`, where the
+ *   native control had an `<optgroup>`.
+ * - The filter is component state that only a pick sets, so it always holds
+ *   one of the options; there is no outside value to show.
+ * - It stays enabled in read-only mode, as the native control did: it filters
+ *   the list and writes nothing.
+ */
+function TypeFilterPicker({
+  value,
+  allLabel,
+  groups,
+  onPick,
+}: {
+  value: DesignerFieldType | '';
+  allLabel: string;
+  groups: ReadonlyArray<TypeFilterGroup>;
+  onPick: (value: DesignerFieldType | '') => void;
+}) {
+  const options: ReadonlyArray<{ value: DesignerFieldType | ''; label: string }> = [
+    { value: '', label: allLabel },
+    ...groups.flatMap((g) => g.options),
+  ];
+  return (
+    <Select
+      value={String(options.findIndex((o) => o.value === value))}
+      onValueChange={(token) => {
+        const picked = options[Number(token)];
+        if (picked) onPick(picked.value);
+      }}
+    >
+      <SelectTrigger
+        data-testid="field-designer-type-filter"
+        className="h-auto w-auto gap-1 px-2 py-1 text-xs"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="0">{allLabel}</SelectItem>
+        {groups.map((g) => (
+          <SelectGroup key={g.category}>
+            <SelectLabel>{g.label}</SelectLabel>
+            {g.options.map((o) => (
+              <SelectItem key={o.value} value={String(options.indexOf(o))}>
+                {o.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
 
 // ============================================================================
 // Main Component
@@ -303,7 +381,7 @@ export function FieldDesigner({
   }, []);
 
   // Grouped type options for the <select> used inside the Drawer.
-  // The top-of-page type filter also uses these groupings (see <optgroup> below).
+  // The top-of-page type filter also uses these groupings (see `TypeFilterPicker`).
   const typeOptionsByCategory = useMemo(
     () => CATEGORY_ORDER.map((cat) => ({
       category: cat,
@@ -445,21 +523,12 @@ export function FieldDesigner({
           </span>
         </div>
         {/* Type filter — grouped by 6 categories (Airtable-style) */}
-        <select
+        <TypeFilterPicker
           value={typeFilter}
-          onChange={(e) => setTypeFilter(e.target.value as DesignerFieldType | '')}
-          data-testid="field-designer-type-filter"
-          className="rounded-md border border-input bg-background px-2 py-1 text-xs outline-none transition-colors focus:border-primary focus:ring-1 focus:ring-primary"
-        >
-          <option value="">{t('appDesigner.fieldDesigner.allTypes')}</option>
-          {typeOptionsByCategory.map((group) => (
-            <optgroup key={group.category} label={group.label}>
-              {group.options.map((opt) => (
-                <option key={opt.value} value={opt.value}>{opt.label}</option>
-              ))}
-            </optgroup>
-          ))}
-        </select>
+          allLabel={t('appDesigner.fieldDesigner.allTypes')}
+          groups={typeOptionsByCategory}
+          onPick={setTypeFilter}
+        />
       </div>
 
       {/* ObjectGrid for the field list */}
diff --git a/packages/plugin-designer/src/__tests__/FieldDesigner.choiceTypesHidden-11253.test.tsx b/packages/plugin-designer/src/__tests__/FieldDesigner.choiceTypesHidden-11253.test.tsx
index 8ad6bf4988..155b87b96a 100644
--- a/packages/plugin-designer/src/__tests__/FieldDesigner.choiceTypesHidden-11253.test.tsx
+++ b/packages/plugin-designer/src/__tests__/FieldDesigner.choiceTypesHidden-11253.test.tsx
@@ -28,7 +28,7 @@
 
 import React from 'react';
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor, cleanup, within } from '@testing-library/react';
 import type { DesignerFieldDefinition } from '@object-ui/types';
 import { CHOICE_TYPES_REQUIRING_OPTIONS } from '@object-ui/data-objectstack';
 import { FieldDesigner } from '../FieldDesigner';
@@ -123,11 +123,15 @@ describe('FieldDesigner — the drawer offers no choice type without an options
     expect(stage?.options).toEqual([{ label: 'Open', value: 'open' }]);
   });
 
-  it('the list FILTER still lists every type, so existing picklists stay findable', () => {
+  it('the list FILTER still lists every type, so existing picklists stay findable', async () => {
     render(<FieldDesigner objectName="deal" fields={FIELDS} onFieldsChange={() => {}} />);
-    const filter = screen.getByTestId('field-designer-type-filter') as HTMLSelectElement;
-    const values = Array.from(filter.querySelectorAll('option')).map((o) => o.value);
-    expect(values).toContain('select');
-    expect(values).toContain('text');
+    // The filter is the shared Select (objectui#11865): its options are read
+    // from the open list, by label — `select` is listed as "Picklist".
+    fireEvent.keyDown(screen.getByTestId('field-designer-type-filter'), { key: 'ArrowDown' });
+    const labels = within(await screen.findByRole('listbox'))
+      .getAllByRole('option')
+      .map((o) => o.textContent);
+    expect(labels).toContain('Picklist');
+    expect(labels).toContain('Text');
   });
 });
diff --git a/packages/plugin-designer/src/__tests__/FieldDesigner.formulaControlRetired.test.tsx b/packages/plugin-designer/src/__tests__/FieldDesigner.formulaControlRetired.test.tsx
index c2fb509b99..dccddba74a 100644
--- a/packages/plugin-designer/src/__tests__/FieldDesigner.formulaControlRetired.test.tsx
+++ b/packages/plugin-designer/src/__tests__/FieldDesigner.formulaControlRetired.test.tsx
@@ -51,7 +51,7 @@
 
 import React from 'react';
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor, cleanup, within } from '@testing-library/react';
 import type { DesignerFieldDefinition } from '@object-ui/types';
 import { FieldDesigner } from '../FieldDesigner';
 
@@ -178,15 +178,19 @@ describe('objectui#6043 · the form model carries no formula expression', () =>
     // Measured on `@objectstack/spec` 17.2.0: `FieldSchema.safeParse({ type:
     // 'formula', label: 'Tax' })` succeeds. Only the expression key was refused,
     // so removing the type would have broken formula fields outright — the
-    // opposite of this card. The grouped type `<select>` is the palette's own
+    // opposite of this card. The grouped type filter is the palette's own
     // surface, so the option living there is the checkable form of that claim.
     renderDesigner();
-    const filter = screen.getByTestId('field-designer-type-filter') as HTMLSelectElement;
-    const values = Array.from(filter.querySelectorAll('option')).map((o) => o.value);
-
-    expect(values).toContain('formula');
+    // The filter is the shared Select (objectui#11865): its options are read
+    // from the open list, by label.
+    fireEvent.keyDown(screen.getByTestId('field-designer-type-filter'), { key: 'ArrowDown' });
+    const labels = within(await screen.findByRole('listbox'))
+      .getAllByRole('option')
+      .map((o) => o.textContent);
+
+    expect(labels).toContain('Formula');
     // Control: the list is populated, so the presence above is a real reading.
-    expect(values).toContain('lookup');
-    expect(values.length).toBeGreaterThan(5);
+    expect(labels).toContain('Lookup');
+    expect(labels.length).toBeGreaterThan(5);
   });
 });

From c46f2c21c8e8abf1643f5fe6d18ea9cc3258d4ed Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 8 Oct 2026 22:15:54 +0000
Subject: [PATCH 2/3] test(plugin-designer): pin the designer forms' shared
 Select pickers (objectui#11865)

One suite over the four converted controls: each is the primitive,
lists the native control's options in order (the type filter under its
category headings), writes per option the JSON the native control wrote,
shows a value no option carries as itself, keeps its label's name and
its read-only state, and picks from the keyboard. The field-type picker
also keeps the card unselected and the canvas shortcuts off its keys.

Adds the patch changeset for @object-ui/plugin-designer.

Claude-Session: https://claude.ai/code/session_01MgfduSkFrfM3eorB3UGfAU
Co-authored-by: Claude <noreply@anthropic.com>
---
 .../11865-j-designer-forms-shared-select.md   |  13 +
 .../designerForms.sharedSelect-11865.test.tsx | 475 ++++++++++++++++++
 2 files changed, 488 insertions(+)
 create mode 100644 .changeset/11865-j-designer-forms-shared-select.md
 create mode 100644 packages/plugin-designer/src/__tests__/designerForms.sharedSelect-11865.test.tsx

diff --git a/.changeset/11865-j-designer-forms-shared-select.md b/.changeset/11865-j-designer-forms-shared-select.md
new file mode 100644
index 0000000000..fff82dc706
--- /dev/null
+++ b/.changeset/11865-j-designer-forms-shared-select.md
@@ -0,0 +1,13 @@
+---
+'@object-ui/plugin-designer': patch
+---
+
+The designer forms pick with the shared `Select`, the control the rest of the console picks with (objectui#11865, the designer forms' part of that card): `FieldDesigner`'s type filter, `DataModelDesigner`'s field-type picker on each field row, `BrandingEditor`'s font family and `AppCreationWizard`'s template.
+
+The four pickers were browser-native selects, so they looked and behaved differently from the console's other dropdowns. They now use the shared Radix `Select`: the same trigger, dropdown and keyboard behaviour. The type filter keeps its category headings (Text, Number, Date & Time, Choice, Relation, Advanced) as groups of the dropdown.
+
+What they write is unchanged. Each option gives the form the same value as before: "All Types" still clears the type filter, "Default (System)" still clears the branding's `fontFamily`, and "None" still sets the draft's `template` to an empty string. Re-picking the current option writes nothing. The font family and template pickers keep the accessible name their label gave the native select ("Font Family", "Template") and show read-only mode as disabled. The type filter stays enabled in read-only mode, as before, and a read-only data model still shows each field's type as text. On a data model entity card, a click on the type picker still does not select the card, and Delete or Escape on it still does not act on the canvas.
+
+One display change: a value none of a picker's options carries now shows as itself. The native select showed its first option instead (`text` for a field type, "Default (System)" for a font, "None" for a template), which is not what the form holds.
+
+**Clause-②: no.** No published face moves: the package entry exports the same names, the four components take the same props, and no i18n key is added. What moves is the four controls' own markup, described above.
diff --git a/packages/plugin-designer/src/__tests__/designerForms.sharedSelect-11865.test.tsx b/packages/plugin-designer/src/__tests__/designerForms.sharedSelect-11865.test.tsx
new file mode 100644
index 0000000000..dfc0ca40df
--- /dev/null
+++ b/packages/plugin-designer/src/__tests__/designerForms.sharedSelect-11865.test.tsx
@@ -0,0 +1,475 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * The designer forms pick with the shared `Select` (objectui#11865).
+ *
+ * Four plugin-designer controls were browser-native selects beside the shared
+ * Radix `Select` the rest of the console picks with: `FieldDesigner`'s type
+ * filter, `DataModelDesigner`'s field-type picker on each field row,
+ * `BrandingEditor`'s font family and `AppCreationWizard`'s template. The card
+ * asks for one control for one kind of choice, surface by surface.
+ *
+ * What is pinned, per control:
+ *   - it IS the primitive (a Radix combobox trigger) and shows the value;
+ *   - it lists the options, in the native control's order (and, for the type
+ *     filter, under the native control's category headings);
+ *   - every option writes what the native control wrote, compared as JSON
+ *     text, the `''` options ("All Types", "Default (System)", "None")
+ *     included; re-picking the current option writes nothing;
+ *   - a value no option carries is what the trigger shows;
+ *   - the font and template pickers keep the name their `<label htmlFor>`
+ *     gave the native control, and show read-only as disabled;
+ *   - the keyboard alone opens a picker and selects.
+ *
+ * The type filter and the field-type picker have no name: the native controls
+ * had none either (no label, no `aria-label`), so there is no name to keep.
+ * The field-type picker also keeps two things the native control did: a click
+ * on it does not select the entity card, and Delete or Escape on it does not
+ * act on the canvas.
+ *
+ * DIRECTION, observed against the native controls: every pin here but the two
+ * name pins is red there, because each one reads the controls as the
+ * primitive's triggers. What makes the write pins guards of "the conversion
+ * changed nothing the forms write" is the literal each compares against: a
+ * `change` event on the pre-conversion native control wrote that same JSON,
+ * read once on those components with these fixtures. The names were read
+ * there the same way. That probe's `change` event fired for the current option
+ * too, which a browser's native select does not do, so the re-pick rows pin
+ * the primitive.
+ */
+
+import '@testing-library/jest-dom/vitest';
+import React from 'react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup, within, act } from '@testing-library/react';
+import type { BrandingConfig, DataModelEntity, DesignerFieldDefinition, DesignerFieldType } from '@object-ui/types';
+
+vi.mock('@object-ui/plugin-grid', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  ...(await import('./__mocks__/plugin-grid')),
+}));
+vi.mock('@object-ui/plugin-form', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  ...(await import('./__mocks__/plugin-form')),
+}));
+
+import { FieldDesigner } from '../FieldDesigner';
+import { DataModelDesigner } from '../DataModelDesigner';
+import { BrandingEditor } from '../BrandingEditor';
+import { AppCreationWizard } from '../AppCreationWizard';
+
+afterEach(() => cleanup());
+
+/** Open a picker from the keyboard and return the options it lists, in order. */
+async function openPicker(trigger: HTMLElement): Promise<HTMLElement[]> {
+  fireEvent.keyDown(trigger, { key: 'ArrowDown' });
+  const listbox = await screen.findByRole('listbox');
+  return within(listbox).getAllByRole('option');
+}
+
+async function pick(trigger: HTMLElement, label: string): Promise<void> {
+  const options = await openPicker(trigger);
+  const option = options.find((o) => o.textContent === label);
+  if (!option) throw new Error(`the picker lists no "${label}": ${options.map((o) => o.textContent).join(' | ')}`);
+  fireEvent.click(option);
+}
+
+function expectPrimitive(trigger: HTMLElement, shown: string): void {
+  expect(trigger.tagName).toBe('BUTTON');
+  expect(trigger).toHaveAttribute('role', 'combobox');
+  expect(trigger.textContent).toBe(shown);
+}
+
+// ---------------------------------------------------------------------------
+// FieldDesigner — the type filter
+// ---------------------------------------------------------------------------
+
+/** [category heading, option label, type] in the native control's order. */
+const FILTER_OPTIONS: ReadonlyArray<readonly [string, string, DesignerFieldType]> = [
+  ['Text', 'Text', 'text'],
+  ['Text', 'Text Area', 'textarea'],
+  ['Text', 'Email', 'email'],
+  ['Text', 'Phone', 'phone'],
+  ['Text', 'URL', 'url'],
+  ['Text', 'Password', 'password'],
+  ['Text', 'Markdown', 'markdown'],
+  ['Text', 'Rich Text', 'html'],
+  ['Number', 'Number', 'number'],
+  ['Number', 'Currency', 'currency'],
+  ['Number', 'Percent', 'percent'],
+  ['Number', 'Auto Number', 'autonumber'],
+  ['Number', 'Rating', 'rating'],
+  ['Number', 'Slider', 'slider'],
+  ['Date & Time', 'Date', 'date'],
+  ['Date & Time', 'Date/Time', 'datetime'],
+  ['Date & Time', 'Time', 'time'],
+  ['Choice', 'Checkbox', 'boolean'],
+  ['Choice', 'Picklist', 'select'],
+  ['Relation', 'Lookup', 'lookup'],
+  ['Advanced', 'Formula', 'formula'],
+  ['Advanced', 'File', 'file'],
+  ['Advanced', 'Image', 'image'],
+  ['Advanced', 'Color', 'color'],
+  ['Advanced', 'Code', 'code'],
+  ['Advanced', 'Location', 'location'],
+  ['Advanced', 'Address', 'address'],
+];
+
+/** One field of every type, so each type option shows exactly one row. */
+const ONE_FIELD_PER_TYPE: DesignerFieldDefinition[] = FILTER_OPTIONS.map(([, label, type]) => ({
+  id: `f_${type}`,
+  name: `f_${type}`,
+  label,
+  type,
+}));
+
+const ALL_ROWS = FILTER_OPTIONS.map(([, , type]) => `grid-row-f_${type}`);
+
+async function shownRows(): Promise<string[]> {
+  await act(async () => {});
+  return screen.queryAllByTestId(/^grid-row-f_/).map((r) => r.getAttribute('data-testid') ?? '');
+}
+
+function renderFieldDesigner(readOnly = false) {
+  render(<FieldDesigner objectName="deal" fields={ONE_FIELD_PER_TYPE} onFieldsChange={() => {}} readOnly={readOnly} />);
+  return screen.getByTestId('field-designer-type-filter');
+}
+
+describe('FieldDesigner — the type filter is the shared Select (objectui#11865)', () => {
+  it('is the Radix combobox trigger, showing "All Types", with no native select left', async () => {
+    const trigger = renderFieldDesigner();
+    expect(screen.getByTestId('field-designer').querySelector('select')).toBeNull();
+    expectPrimitive(trigger, 'All Types');
+    expect(await shownRows()).toEqual(ALL_ROWS);
+  });
+
+  it('lists "All Types", then every type under its category heading, in the native order', async () => {
+    const trigger = renderFieldDesigner();
+    const options = await openPicker(trigger);
+    expect(options.map((o) => o.textContent)).toEqual(['All Types', ...FILTER_OPTIONS.map(([, label]) => label)]);
+    // Each category is a group named by its heading, where the native control had an `<optgroup label>`.
+    const listbox = screen.getByRole('listbox');
+    const byHeading = new Map<string, string[]>();
+    for (const [heading, label] of FILTER_OPTIONS) byHeading.set(heading, [...(byHeading.get(heading) ?? []), label]);
+    expect(within(listbox).getAllByRole('group')).toHaveLength(byHeading.size);
+    for (const [heading, labels] of byHeading) {
+      const group = within(listbox).getByRole('group', { name: heading });
+      expect(within(group).getAllByRole('option').map((o) => o.textContent), heading).toEqual(labels);
+    }
+  });
+
+  it.each(FILTER_OPTIONS.map(([, label, type]) => [label, type] as const))(
+    'picking "%s" shows the %s field alone',
+    async (label, type) => {
+      const trigger = renderFieldDesigner();
+      await pick(trigger, label);
+      expect(await shownRows()).toEqual([`grid-row-f_${type}`]);
+      expect(trigger.textContent).toBe(label);
+    },
+  );
+
+  it('picking "All Types" after a type shows every field again', async () => {
+    const trigger = renderFieldDesigner();
+    await pick(trigger, 'Lookup');
+    expect(await shownRows()).toEqual(['grid-row-f_lookup']);
+    await pick(trigger, 'All Types');
+    expect(await shownRows()).toEqual(ALL_ROWS);
+    expect(trigger.textContent).toBe('All Types');
+  });
+
+  it('stays enabled in read-only mode, as the native control did: it filters and writes nothing', () => {
+    expect(renderFieldDesigner(true)).toBeEnabled();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// DataModelDesigner — a field row's type picker
+// ---------------------------------------------------------------------------
+
+/** The types the picker offers, in the native control's order. */
+const DATA_MODEL_TYPES = [
+  'text', 'number', 'boolean', 'date', 'datetime', 'uuid',
+  'email', 'url', 'phone', 'json', 'integer', 'float',
+  'decimal', 'currency', 'percent', 'textarea', 'select',
+  'multiselect', 'lookup', 'attachment', 'formula', 'autonumber',
+];
+
+const ACCOUNT: DataModelEntity = {
+  id: 'account',
+  name: 'account',
+  label: 'Account',
+  position: { x: 40, y: 40 },
+  fields: [
+    { name: 'id', type: 'uuid', primaryKey: true },
+    { name: 'name', type: 'text' },
+    { name: 'legacy', type: 'geo_point' },
+  ],
+};
+
+/** The JSON text of the entities the designer writes once `name` is `type`, as the native control wrote it. */
+const entitiesWith = (type: string) =>
+  `[{"id":"account","name":"account","label":"Account","position":{"x":40,"y":40},"fields":[{"name":"id","type":"uuid","primaryKey":true},{"name":"name","type":"${type}"},{"name":"legacy","type":"geo_point"}]}]`;
+
+function renderDataModel(readOnly = false) {
+  const onEntitiesChange = vi.fn();
+  render(<DataModelDesigner entities={[ACCOUNT]} onEntitiesChange={onEntitiesChange} readOnly={readOnly} />);
+  return { onEntitiesChange };
+}
+
+function expectWrote(fn: ReturnType<typeof vi.fn>, json: string | null): void {
+  if (json === null) {
+    expect(fn).not.toHaveBeenCalled();
+    return;
+  }
+  expect(fn).toHaveBeenCalledTimes(1);
+  expect(JSON.stringify(fn.mock.calls[0][0])).toBe(json);
+}
+
+describe('DataModelDesigner — the field-type picker is the shared Select (objectui#11865)', () => {
+  it('is the Radix combobox trigger on every field row, showing the field’s type, with no native select left', () => {
+    renderDataModel();
+    expect(screen.getByTestId('data-model-canvas').querySelector('select')).toBeNull();
+    expectPrimitive(screen.getByTestId('field-type-account-0'), 'uuid');
+    expectPrimitive(screen.getByTestId('field-type-account-1'), 'text');
+  });
+
+  it('lists the types in the native control’s order', async () => {
+    renderDataModel();
+    const options = await openPicker(screen.getByTestId('field-type-account-1'));
+    expect(options.map((o) => o.textContent)).toEqual(DATA_MODEL_TYPES);
+  });
+
+  it.each(DATA_MODEL_TYPES.map((type) => [type, type === 'text' ? null : entitiesWith(type)] as const))(
+    'a text field picked as "%s" writes what the native control wrote',
+    async (type, json) => {
+      const { onEntitiesChange } = renderDataModel();
+      await pick(screen.getByTestId('field-type-account-1'), type);
+      expectWrote(onEntitiesChange, json);
+    },
+  );
+
+  it('a type no option carries is shown, listed first, and re-picking it writes nothing', async () => {
+    const { onEntitiesChange } = renderDataModel();
+    const trigger = screen.getByTestId('field-type-account-2');
+    // The native control showed its first option, "text", here.
+    expect(trigger.textContent).toBe('geo_point');
+    expect((await openPicker(trigger)).map((o) => o.textContent)).toEqual(['geo_point', ...DATA_MODEL_TYPES]);
+    fireEvent.click(screen.getAllByRole('option')[0]);
+    expect(onEntitiesChange).not.toHaveBeenCalled();
+  });
+
+  it('a click on the picker, and a pick in its list, do not select the entity card', async () => {
+    const { onEntitiesChange } = renderDataModel();
+    const trigger = screen.getByTestId('field-type-account-1');
+    fireEvent.click(trigger);
+    await pick(trigger, 'number');
+    expectWrote(onEntitiesChange, entitiesWith('number'));
+    // The properties panel is titled by the selected entity; it still reads "Properties".
+    expect(screen.getByRole('region', { name: 'Properties' })).toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: 'Account' })).toBeNull();
+    // Control: a click on the card itself selects it.
+    fireEvent.click(screen.getByRole('group', { name: 'Account' }));
+    expect(screen.getByRole('region', { name: 'Account' })).toBeInTheDocument();
+  });
+
+  it('Delete and Escape on the picker are its own keys, not the canvas shortcuts', async () => {
+    renderDataModel();
+    const card = screen.getByRole('group', { name: 'Account' });
+    fireEvent.click(card);
+    expect(screen.getByRole('region', { name: 'Account' })).toBeInTheDocument();
+    const trigger = screen.getByTestId('field-type-account-1');
+    trigger.focus();
+    fireEvent.keyDown(trigger, { key: 'Delete' });
+    fireEvent.keyDown(trigger, { key: 'Escape' });
+    await act(async () => {});
+    expect(screen.queryByText('Delete Entities')).toBeNull();
+    expect(screen.getByRole('region', { name: 'Account' })).toBeInTheDocument();
+    // Control: Delete on the card asks to delete the selected entity.
+    fireEvent.keyDown(card, { key: 'Delete' });
+    expect(await screen.findByText('Delete Entities')).toBeInTheDocument();
+  });
+
+  it('Enter opens the picker and Enter on a type selects it', async () => {
+    const { onEntitiesChange } = renderDataModel();
+    fireEvent.keyDown(screen.getByTestId('field-type-account-1'), { key: 'Enter' });
+    const listbox = await screen.findByRole('listbox');
+    fireEvent.keyDown(within(listbox).getByRole('option', { name: 'json' }), { key: 'Enter' });
+    expectWrote(onEntitiesChange, entitiesWith('json'));
+  });
+
+  it('read-only draws the type as text, with no picker, as it did', () => {
+    renderDataModel(true);
+    expect(screen.queryAllByRole('combobox')).toHaveLength(0);
+    expect(within(screen.getByTestId('field-row-account-1')).getByText('text')).toBeInTheDocument();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// BrandingEditor — the font family
+// ---------------------------------------------------------------------------
+
+const FONTS = ['Inter', 'Roboto', 'Open Sans', 'Lato', 'Montserrat', 'Poppins', 'Source Sans Pro', 'Noto Sans', 'system-ui'];
+const FONT_DEFAULT = 'Default (System)';
+
+/** [start branding, option label, the JSON text of the branding `onChange` received]; `null`: nothing written. */
+const FONT_WRITES: ReadonlyArray<readonly [BrandingConfig, string, string | null]> = [
+  [{ primaryColor: '#3b82f6' }, FONT_DEFAULT, null],
+  ...FONTS.map((font) => [{ primaryColor: '#3b82f6' }, font, `{"primaryColor":"#3b82f6","fontFamily":"${font}"}`] as const),
+  [{ primaryColor: '#3b82f6', fontFamily: 'Roboto' }, FONT_DEFAULT, '{"primaryColor":"#3b82f6"}'],
+  ...FONTS.map(
+    (font) =>
+      [
+        { primaryColor: '#3b82f6', fontFamily: 'Roboto' },
+        font,
+        font === 'Roboto' ? null : `{"primaryColor":"#3b82f6","fontFamily":"${font}"}`,
+      ] as const,
+  ),
+];
+
+function renderBranding(branding: BrandingConfig, readOnly = false) {
+  const onChange = vi.fn();
+  render(<BrandingEditor branding={branding} onChange={onChange} readOnly={readOnly} />);
+  return { onChange, trigger: screen.getByTestId('branding-font-select') };
+}
+
+describe('BrandingEditor — the font family is the shared Select (objectui#11865)', () => {
+  it('is the Radix combobox trigger, showing the branding’s font, with no native select left', () => {
+    const { trigger } = renderBranding({ primaryColor: '#3b82f6' });
+    expect(screen.getByTestId('branding-editor').querySelector('select')).toBeNull();
+    expectPrimitive(trigger, FONT_DEFAULT);
+    cleanup();
+    expectPrimitive(renderBranding({ fontFamily: 'Lato' }).trigger, 'Lato');
+  });
+
+  // Green against the native control too, by design: it pins what the conversion kept.
+  it('keeps the name its label gave the native control', () => {
+    const { trigger } = renderBranding({});
+    expect(screen.getByRole('combobox', { name: 'Font Family' })).toBe(trigger);
+  });
+
+  it('lists the default, then the fonts, in the native control’s order', async () => {
+    const { trigger } = renderBranding({});
+    expect((await openPicker(trigger)).map((o) => o.textContent)).toEqual([FONT_DEFAULT, ...FONTS]);
+  });
+
+  it.each(FONT_WRITES.map((row) => [`${row[0].fontFamily ?? 'no font'} → ${row[1]}`, ...row] as const))(
+    '%s',
+    async (_name, branding, label, json) => {
+      const { onChange, trigger } = renderBranding(branding);
+      await pick(trigger, label);
+      expectWrote(onChange, json);
+    },
+  );
+
+  it('the default clears the font as the native control did: the key is written as undefined', async () => {
+    const { onChange, trigger } = renderBranding({ primaryColor: '#3b82f6', fontFamily: 'Roboto' });
+    await pick(trigger, FONT_DEFAULT);
+    expect(onChange.mock.calls[0][0]).toStrictEqual({ primaryColor: '#3b82f6', fontFamily: undefined });
+  });
+
+  it('a font no option carries is shown, not "Default (System)", and re-picking it writes nothing', async () => {
+    const { onChange, trigger } = renderBranding({ fontFamily: 'Georgia' });
+    expect(trigger.textContent).toBe('Georgia');
+    expect((await openPicker(trigger)).map((o) => o.textContent)).toEqual(['Georgia', FONT_DEFAULT, ...FONTS]);
+    fireEvent.click(screen.getAllByRole('option')[0]);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('read-only shows the trigger disabled, through the primitive', () => {
+    expect(renderBranding({}, true).trigger).toBeDisabled();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// AppCreationWizard — the template
+// ---------------------------------------------------------------------------
+
+const TEMPLATES = [
+  { id: 'crm', label: 'CRM' },
+  { id: 'blank', label: 'Blank', description: 'Start empty' },
+];
+
+/** [the draft's template, option label, the JSON text of the template the saved draft carries]. */
+const TEMPLATE_WRITES: ReadonlyArray<readonly [string | undefined, string, string]> = [
+  [undefined, 'None', '{"template":""}'],
+  [undefined, 'CRM', '{"template":"crm"}'],
+  [undefined, 'Blank', '{"template":"blank"}'],
+  ['crm', 'None', '{"template":""}'],
+  ['crm', 'CRM', '{"template":"crm"}'],
+  ['crm', 'Blank', '{"template":"blank"}'],
+];
+
+function renderWizard(template?: string, readOnly = false) {
+  const onSaveDraft = vi.fn();
+  render(
+    <AppCreationWizard
+      templates={TEMPLATES}
+      onSaveDraft={onSaveDraft}
+      initialDraft={template === undefined ? undefined : { template }}
+      readOnly={readOnly}
+    />,
+  );
+  return { onSaveDraft, trigger: document.getElementById('app-template') as HTMLElement };
+}
+
+function savedTemplate(onSaveDraft: ReturnType<typeof vi.fn>): string {
+  fireEvent.click(screen.getByTestId('wizard-save-draft'));
+  expect(onSaveDraft).toHaveBeenCalledTimes(1);
+  return JSON.stringify({ template: onSaveDraft.mock.calls[0][0].template });
+}
+
+describe('AppCreationWizard — the template is the shared Select (objectui#11865)', () => {
+  it('is the Radix combobox trigger, showing the draft’s template, with no native select left', () => {
+    const { trigger } = renderWizard();
+    expect(screen.getByTestId('wizard-step-basic-content').querySelector('select')).toBeNull();
+    expectPrimitive(trigger, 'None');
+    cleanup();
+    expectPrimitive(renderWizard('blank').trigger, 'Blank');
+  });
+
+  // Green against the native control too, by design: it pins what the conversion kept.
+  it('keeps the name its label gave the native control', () => {
+    const { trigger } = renderWizard();
+    expect(screen.getByRole('combobox', { name: 'Template' })).toBe(trigger);
+  });
+
+  it('lists "None", then the templates, in the native control’s order', async () => {
+    const { trigger } = renderWizard();
+    expect((await openPicker(trigger)).map((o) => o.textContent)).toEqual(['None', 'CRM', 'Blank']);
+  });
+
+  it.each(TEMPLATE_WRITES.map((row) => [`${row[0] ?? 'no template'} → ${row[1]}`, ...row] as const))(
+    '%s',
+    async (_name, template, label, json) => {
+      const { onSaveDraft, trigger } = renderWizard(template);
+      await pick(trigger, label);
+      expect(savedTemplate(onSaveDraft)).toBe(json);
+    },
+  );
+
+  it('a template no option carries is shown, not "None", and re-picking it keeps it', async () => {
+    const { onSaveDraft, trigger } = renderWizard('ghost');
+    expect(trigger.textContent).toBe('ghost');
+    expect((await openPicker(trigger)).map((o) => o.textContent)).toEqual(['ghost', 'None', 'CRM', 'Blank']);
+    fireEvent.click(screen.getAllByRole('option')[0]);
+    expect(savedTemplate(onSaveDraft)).toBe('{"template":"ghost"}');
+  });
+
+  it('Enter opens the picker and Enter on a template selects it', async () => {
+    const { onSaveDraft, trigger } = renderWizard();
+    fireEvent.keyDown(trigger, { key: 'Enter' });
+    const listbox = await screen.findByRole('listbox');
+    fireEvent.keyDown(within(listbox).getByRole('option', { name: 'CRM' }), { key: 'Enter' });
+    expect(savedTemplate(onSaveDraft)).toBe('{"template":"crm"}');
+  });
+
+  it('read-only shows the trigger disabled, through the primitive', () => {
+    expect(renderWizard(undefined, true).trigger).toBeDisabled();
+  });
+});

From cb7dd83aa6746244ed852d86bcd59daec86a84c8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 8 Oct 2026 22:21:49 +0000
Subject: [PATCH 3/3] test(plugin-designer): state which shared-Select pins are
 green against the native controls (objectui#11865)

The reverse leg read seven pins green on base by design (names, read-only
states, the field-type picker's own keys); the header now says so and
names the ablations that turn the keys and card pins red.

Claude-Session: https://claude.ai/code/session_01MgfduSkFrfM3eorB3UGfAU
Co-authored-by: Claude <noreply@anthropic.com>
---
 .../designerForms.sharedSelect-11865.test.tsx         | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-designer/src/__tests__/designerForms.sharedSelect-11865.test.tsx b/packages/plugin-designer/src/__tests__/designerForms.sharedSelect-11865.test.tsx
index dfc0ca40df..dcad8ec21b 100644
--- a/packages/plugin-designer/src/__tests__/designerForms.sharedSelect-11865.test.tsx
+++ b/packages/plugin-designer/src/__tests__/designerForms.sharedSelect-11865.test.tsx
@@ -33,9 +33,14 @@
  * on it does not select the entity card, and Delete or Escape on it does not
  * act on the canvas.
  *
- * DIRECTION, observed against the native controls: every pin here but the two
- * name pins is red there, because each one reads the controls as the
- * primitive's triggers. What makes the write pins guards of "the conversion
+ * DIRECTION, observed against the native controls: the pins that read a
+ * control as the primitive's trigger are red there. Green there too, by
+ * design, are the pins of what the conversion kept: the two names, the three
+ * read-only states, the read-only data model's type text, and the
+ * field-type picker's own keys (the native control was a `SELECT`, which the
+ * canvas shortcuts already skipped). That last pin goes red when the canvas
+ * guard's combobox line is removed, and the card pin goes red when either
+ * click stop is removed. What makes the write pins guards of "the conversion
  * changed nothing the forms write" is the literal each compares against: a
  * `change` event on the pre-conversion native control wrote that same JSON,
  * read once on those components with these fixtures. The names were read