From 1789d66524c3ecafb7bd626b06d6c4346bcd10fd Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Wed, 9 Sep 2026 13:47:48 +0100
Subject: [PATCH 01/19] wip admin table updates

---
 .../modules/editable-table/editable-table.ts  |  34 ++-
 resources/js/modules/editable-table/types.ts  |  17 +-
 resources/js/modules/forms/AdminTableNode.vue | 286 ++++++++++++++++++
 resources/js/modules/forms/register.ts        |   2 +
 resources/js/pages/Form.test.ts               |  14 +
 resources/js/pages/Form.vue                   |  91 +++---
 src/Form/FormNodeTypes.php                    |   2 +
 src/Form/Nodes/Table.php                      | 252 +++++++++++++++
 8 files changed, 659 insertions(+), 39 deletions(-)
 create mode 100644 resources/js/modules/forms/AdminTableNode.vue
 create mode 100644 src/Form/Nodes/Table.php

diff --git a/resources/js/modules/editable-table/editable-table.ts b/resources/js/modules/editable-table/editable-table.ts
index 6ab63b770eb..f5790ef31c0 100644
--- a/resources/js/modules/editable-table/editable-table.ts
+++ b/resources/js/modules/editable-table/editable-table.ts
@@ -1,5 +1,6 @@
 import {Base} from '@craftcms/garnish';
 import type CraftCombobox from '@craftcms/ui/components/combobox/combobox';
+import type {ComboboxItem} from '@craftcms/ui/components/combobox/combobox';
 import type CraftTextExpander from '@craftcms/ui/components/text-expander/text-expander';
 import '@craftcms/ui/components/text-expander/text-expander';
 import {editableTableData, editableTableRowData} from './support';
@@ -7,6 +8,7 @@ import type {
   EditableTableColumn,
   EditableTableColumns,
   EditableTableOption,
+  EditableTableOptionGroup,
   EditableTableOptions,
   EditableTableRow,
   EditableTableValue,
@@ -24,6 +26,12 @@ declare const $: any;
 
 const noop = (): void => {};
 
+function isOptionGroup(
+  option: EditableTableOption | EditableTableOptionGroup
+): option is EditableTableOptionGroup {
+  return Array.isArray((option as EditableTableOptionGroup).options);
+}
+
 function defaultOptionValue(
   options: EditableTableOptions | EditableTableOption[] | undefined
 ): EditableTableValue | null {
@@ -724,10 +732,28 @@ export class EditableTable extends Base<EditableTableSettings> {
             combobox.name = name;
             combobox.label = col.heading ?? colId;
             combobox.options = Array.isArray(col.options)
-              ? col.options.map((option) => ({
-                  label: option.label ?? String(option.value ?? ''),
-                  value: String(option.value ?? ''),
-                }))
+              ? col.options.map(
+                  (option): ComboboxItem =>
+                    // An <optgroup>-style entry (e.g. SelectOptions::getTemplateSuggestions())
+                    // nests its real options one level deeper — craft-combobox has native
+                    // optgroup support (ComboboxOptGroup), so pass the grouping through rather
+                    // than flattening it away.
+                    isOptionGroup(option)
+                      ? {
+                          type: 'optgroup',
+                          label: option.label ?? '',
+                          options: option.options.map((groupedOption) => ({
+                            label:
+                              groupedOption.label ??
+                              String(groupedOption.value ?? ''),
+                            value: String(groupedOption.value ?? ''),
+                          })),
+                        }
+                      : {
+                          label: option.label ?? String(option.value ?? ''),
+                          value: String(option.value ?? ''),
+                        }
+                )
               : [];
             combobox.modelValue = String(value ?? '');
             combobox.showAllOnEmpty = true;
diff --git a/resources/js/modules/editable-table/types.ts b/resources/js/modules/editable-table/types.ts
index 90d0543669c..709e5dcf691 100644
--- a/resources/js/modules/editable-table/types.ts
+++ b/resources/js/modules/editable-table/types.ts
@@ -16,7 +16,10 @@ export interface EditableTableColumn {
   rows?: number;
   code?: boolean;
   value?: string | number;
-  options?: EditableTableOptions | EditableTableOption[];
+  options?:
+    | EditableTableOptions
+    | EditableTableOption[]
+    | EditableTableOptionGroup[];
   textExpanderTriggers?: TextExpanderTriggers;
   /** Checkbox: only one in the column may be checked at a time. */
   radioMode?: boolean;
@@ -51,6 +54,17 @@ export interface EditableTableOptions {
   [key: string]: EditableTableOption;
 }
 
+/**
+ * An `<optgroup>`-style options entry, e.g. what
+ * `CraftCms\Cms\Cp\SelectOptions::getTemplateSuggestions()` returns — a leaf
+ * option's own shape is {@link EditableTableOption}, not this.
+ */
+export interface EditableTableOptionGroup {
+  label?: string;
+  type?: 'optgroup';
+  options: EditableTableOption[];
+}
+
 type EditableTableColumnValue =
   | string
   | number
@@ -59,6 +73,7 @@ type EditableTableColumnValue =
   | string[]
   | EditableTableOptions
   | EditableTableOption[]
+  | EditableTableOptionGroup[]
   | TextExpanderTriggers;
 
 /** Map of column ID → column definition. */
diff --git a/resources/js/modules/forms/AdminTableNode.vue b/resources/js/modules/forms/AdminTableNode.vue
new file mode 100644
index 00000000000..4ff5f20a613
--- /dev/null
+++ b/resources/js/modules/forms/AdminTableNode.vue
@@ -0,0 +1,286 @@
+<script setup lang="ts">
+  import {actionClient, t} from '@craftcms/ui';
+  import {router} from '@inertiajs/vue3';
+  import {
+    type ColumnDef,
+    getCoreRowModel,
+    useVueTable,
+  } from '@tanstack/vue-table';
+  import {computed, h, ref, watch} from 'vue';
+  import ActionMenu from '@/common/components/ActionMenu.vue';
+  import CpLink from '@/common/components/CpLink.vue';
+  import type {ActionItemLink} from '@/common/types';
+  import Empty from '@/common/components/Empty.vue';
+  import LayoutSlot from '@/common/components/LayoutSlot.vue';
+  import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
+  import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
+  import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
+  import type {FormNodePayload} from './types';
+
+  interface TableColumn {
+    key: string;
+    label: string;
+  }
+
+  interface TableLink {
+    label: string;
+    url: string | null;
+  }
+
+  interface TableMenu {
+    label: string;
+    items: TableLink[];
+  }
+
+  interface TableIcon {
+    icon: string;
+    label?: string;
+  }
+
+  interface TableHtml {
+    html: string;
+  }
+
+  /**
+   * A scalar renders as plain text; `{label, url}` renders as a link (or plain
+   * text when `url` is null); a list of those renders several links in one
+   * cell; `{label, items}` renders a dropdown menu of links; `{icon, label?}`
+   * renders a single `<craft-icon>` (`label` becomes its accessible name);
+   * `{html}` renders pre-built markup via `v-html`, for the rare cell no
+   * structured shape above can express — the same convention the PHP `Table`
+   * Node's non-Vue `renderHtml()` fallback uses (menus render as inline links
+   * there, an icon renders as its label text, `html` prints as-is), so both
+   * renderers agree on one row shape without the columns themselves declaring
+   * a type. Only delete (and, when reorderable, the drag handle `DataTable`
+   * renders on its own) live in the trailing actions column — a menu is
+   * ordinary column data, not merged into it.
+   *
+   * `html` is trusted, not sanitized here: the PHP `Table::rows()` that
+   * produced it already ran it through the same HTML sanitizer
+   * `TemplateContent` uses (see its Node docs), the same trust boundary
+   * `TemplateContentNode.vue` relies on for its own `v-html`. Sanitizing
+   * doesn't substitute for encoding, though — whichever server-side column
+   * builds one of these still has to `Html::encode()` any user-entered value
+   * before it goes into the string. Prefer a structured shape above when it
+   * fits; reach for `html` only when it doesn't.
+   */
+  type TableCellValue =
+    | string
+    | number
+    | boolean
+    | null
+    | TableLink
+    | TableLink[]
+    | TableMenu
+    | TableIcon
+    | TableHtml;
+
+  type TableRow = Record<string, TableCellValue> & {
+    /** Required when the table is reorderable and/or deletable. */
+    id?: string | number;
+    /** Opts a single row out of an otherwise-deletable table. */
+    _deletable?: boolean;
+  };
+
+  const props = defineProps<{
+    node: FormNodePayload<{
+      columns: TableColumn[];
+      rows: TableRow[];
+      emptyMessage: string | null;
+      createLabel: string | null;
+      createUrl: string | null;
+      reorderUrl: string | null;
+      deleteUrl: string | null;
+      deleteConfirmMessage: string | null;
+    }>;
+  }>();
+
+  // Reorder/delete mutate this local copy directly (optimistic UI, matching the
+  // legacy Craft.VueAdminTable's behavior) rather than round-tripping through a
+  // form refresh for what's otherwise a read-only listing.
+  const rows = ref<TableRow[]>([...props.node.props.rows]);
+  watch(
+    () => props.node.props.rows,
+    (newRows) => {
+      rows.value = [...newRows];
+    }
+  );
+
+  const columnHelper = createCraftColumnHelper<TableRow>();
+
+  function isMenu(
+    value: TableLink | TableLink[] | TableMenu | TableIcon | TableHtml
+  ): value is TableMenu {
+    return !Array.isArray(value) && 'items' in value;
+  }
+
+  function isIcon(
+    value: TableLink | TableLink[] | TableMenu | TableIcon | TableHtml
+  ): value is TableIcon {
+    return !Array.isArray(value) && 'icon' in value;
+  }
+
+  function isHtml(
+    value: TableLink | TableLink[] | TableMenu | TableIcon | TableHtml
+  ): value is TableHtml {
+    return !Array.isArray(value) && 'html' in value;
+  }
+
+  function renderLink(link: TableLink) {
+    return link.url
+      ? h(CpLink, {href: link.url, inertia: false}, () => link.label)
+      : link.label;
+  }
+
+  function renderIcon(icon: TableIcon) {
+    return h('craft-icon', {name: icon.icon, label: icon.label});
+  }
+
+  function renderHtmlCell(cell: TableHtml) {
+    return h('div', {innerHTML: cell.html});
+  }
+
+  function renderMenu(menu: TableMenu) {
+    return h(
+      ActionMenu,
+      {
+        label: menu.label,
+        actions: menu.items.map(
+          (item): ActionItemLink => ({
+            type: 'link',
+            href: item.url ?? '#',
+            label: item.label,
+          })
+        ),
+      },
+      {
+        invoker: () =>
+          h(
+            'craft-button',
+            {type: 'button', size: 'small', variant: 'outline'},
+            menu.label
+          ),
+      }
+    );
+  }
+
+  const columns = computed(() => {
+    const cols: ColumnDef<TableRow, any>[] = props.node.props.columns.map(
+      (column) =>
+        columnHelper.accessor(column.key, {
+          header: column.label,
+          cell: ({getValue}) => {
+            const value = getValue();
+
+            if (Array.isArray(value)) {
+              return value.flatMap((link, index) => [
+                index > 0 ? ', ' : '',
+                renderLink(link),
+              ]);
+            }
+
+            if (value !== null && typeof value === 'object') {
+              if (isMenu(value)) return renderMenu(value);
+              if (isIcon(value)) return renderIcon(value);
+              if (isHtml(value)) return renderHtmlCell(value);
+              return renderLink(value);
+            }
+
+            return value ?? '';
+          },
+        })
+    );
+
+    if (props.node.props.deleteUrl) {
+      cols.push(
+        columnHelper.actions(({row}) =>
+          row.original._deletable === false
+            ? []
+            : [h(DeleteButton, {onClick: () => deleteRow(row.original)})]
+        )
+      );
+    }
+
+    return cols;
+  });
+
+  const table = useVueTable({
+    get data() {
+      return rows.value;
+    },
+    get columns() {
+      return columns.value;
+    },
+    enableSorting: false,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  function onReorder(startIndex: number, finishIndex: number): void {
+    const reordered = [...rows.value];
+    const [moved] = reordered.splice(startIndex, 1);
+
+    if (!moved) {
+      return;
+    }
+
+    reordered.splice(finishIndex, 0, moved);
+    rows.value = reordered;
+
+    // The backend actions this posts to are shared with the legacy `Craft.VueAdminTable`
+    // widget, which JSON-encodes `ids` as a string rather than posting a raw array.
+    actionClient
+      .post(props.node.props.reorderUrl!, {
+        ids: JSON.stringify(reordered.map((row) => row.id)),
+      })
+      .then(() => refreshForm());
+  }
+
+  async function deleteRow(row: TableRow): Promise<void> {
+    const message = props.node.props.deleteConfirmMessage ?? t('Are you sure?');
+
+    if (!confirm(message)) {
+      return;
+    }
+
+    await actionClient.post(props.node.props.deleteUrl!, {id: row.id});
+    rows.value = rows.value.filter((r) => r.id !== row.id);
+    refreshForm();
+  }
+
+  // This Node's data is set once, from the page's own initial render — not read from a
+  // live-fetching endpoint the way an element index table is — so a mutation only updates
+  // this component's own local `rows`. Other props derived from the same server-side state
+  // (e.g. whether a "New store"-style create button should show at all) don't know to
+  // recompute on their own; a partial Inertia reload re-fetches this page's `form` prop so
+  // they catch up too. The local mutation above still runs first, for instant feedback while
+  // this is in flight.
+  function refreshForm(): void {
+    router.reload({only: ['form']});
+  }
+</script>
+
+<template>
+  <div :data-form-node="node.uid">
+    <LayoutSlot v-if="node.props.createUrl" name="actions">
+      <CpLink
+        variant="accent"
+        appearance="button"
+        :href="node.props.createUrl"
+        :inertia="false"
+        >{{ node.props.createLabel }}</CpLink
+      >
+    </LayoutSlot>
+
+    <craft-pane padding="0" appearance="raised">
+      <AdminTable
+        :table="table"
+        :reorderable="!!node.props.reorderUrl"
+        @reorder="onReorder"
+      >
+        <template #empty-row>
+          <Empty :label="node.props.emptyMessage ?? t('Nothing to show.')" />
+        </template>
+      </AdminTable>
+    </craft-pane>
+  </div>
+</template>
diff --git a/resources/js/modules/forms/register.ts b/resources/js/modules/forms/register.ts
index f54de84bafe..7c033a43911 100644
--- a/resources/js/modules/forms/register.ts
+++ b/resources/js/modules/forms/register.ts
@@ -36,6 +36,7 @@ import HiddenFieldNode from './HiddenFieldNode.vue';
 import LineBreakNode from './LineBreakNode.vue';
 import PermissionTreeControl from './PermissionTreeControl.vue';
 import SeparatorNode from './SeparatorNode.vue';
+import AdminTableNode from './AdminTableNode.vue';
 import './content-block-input';
 
 export function registerFormComponents(
@@ -73,6 +74,7 @@ export function registerFormComponents(
   components.register('craft:permission-tree', PermissionTreeControl);
   components.register('craft:markdown', MarkdownControl);
   components.register('craft:table', TableControl);
+  components.register('craft:admin-table', AdminTableNode);
   components.register('craft:link', LinkControl);
   components.register('craft:address', AddressControl);
   components.register('craft:icon-picker', IconPickerControl);
diff --git a/resources/js/pages/Form.test.ts b/resources/js/pages/Form.test.ts
index 523e4c1ccfe..20fb10812bb 100644
--- a/resources/js/pages/Form.test.ts
+++ b/resources/js/pages/Form.test.ts
@@ -158,6 +158,20 @@ it('submits complete current values after a partial mutation', async () => {
   );
 });
 
+it('renders as a plain element with no save flow when there is nothing to submit to', async () => {
+  app = createApp(FormPage, {form: payload});
+  app.mount(container);
+  await nextTick();
+
+  const layoutCall = state.layout.mock.calls[0];
+  if (!layoutCall) throw new Error('Expected the layout registration.');
+  expect(layoutCall[0].onSave).toBeUndefined();
+
+  // No `submit` means nothing to post to, so there's no `<form>` at all —
+  // just its contents, in a plain wrapper.
+  expect(container.querySelector('form')).toBeNull();
+});
+
 it('passes screen layout options through to the app layout', () => {
   app = createApp(FormPage, {
     form: payload,
diff --git a/resources/js/pages/Form.vue b/resources/js/pages/Form.vue
index f1c0dd8f157..083c7d5d991 100644
--- a/resources/js/pages/Form.vue
+++ b/resources/js/pages/Form.vue
@@ -20,7 +20,15 @@
 
   const props = defineProps<{
     form: FormPayload;
-    submit: UrlMethodPair;
+    /**
+     * Omit for a screen with nothing to save as a whole — a listing, say,
+     * that may still hold ordinary Field controls (row-selection checkboxes
+     * and the like) driven by the same value tracking below. Those just need
+     * their own action button reading `currentValues()`/`setValue()` off
+     * this component's exposed API, rather than a single generic save. When
+     * omitted, no `<form>` element is rendered at all — see the template.
+     */
+    submit?: UrlMethodPair;
     elevatedFields?: string[] | '*';
     refreshUrl?: string;
     defaultFormActions?: UseAppLayoutOptions['defaultFormActions'];
@@ -35,40 +43,49 @@
   const elevatedFields = props.elevatedFields;
   const {advanceBaseline, errors, onMutation, renderer} =
     useInertiaFormRenderer(inertiaForm, () => props.form);
-  const {save} = useSettingsSave(inertiaForm, () => props.submit, {
-    transform: () => renderer.value?.currentValues() ?? props.form.values,
-    onSuccess: () => {
-      elevatedBaseline.value = structuredClone(
-        toRaw(renderer.value?.currentValues() ?? props.form.values)
-      );
-      advanceBaseline();
-    },
-    passwordConfirmation: elevatedFields
-      ? {
-          required: () => {
-            const values = renderer.value?.currentValues() ?? props.form.values;
-            const fields =
-              elevatedFields === '*'
-                ? [
-                    ...new Set([
-                      ...Object.keys(elevatedBaseline.value),
-                      ...Object.keys(values),
-                    ]),
-                  ]
-                : elevatedFields;
 
-            return fields.some(
-              (field) =>
-                normalize(values[field]) !==
-                normalize(elevatedBaseline.value[field])
-            );
-          },
-        }
-      : undefined,
-  });
+  // Only wire up a save flow (and its cmd/ctrl + s shortcut) when there's
+  // somewhere to submit to — otherwise there's nothing for `save()` to post.
+  const save = props.submit
+    ? useSettingsSave(inertiaForm, () => props.submit!, {
+        transform: () => renderer.value?.currentValues() ?? props.form.values,
+        onSuccess: () => {
+          elevatedBaseline.value = structuredClone(
+            toRaw(renderer.value?.currentValues() ?? props.form.values)
+          );
+          advanceBaseline();
+        },
+        passwordConfirmation: elevatedFields
+          ? {
+              required: () => {
+                const values =
+                  renderer.value?.currentValues() ?? props.form.values;
+                const fields =
+                  elevatedFields === '*'
+                    ? [
+                        ...new Set([
+                          ...Object.keys(elevatedBaseline.value),
+                          ...Object.keys(values),
+                        ]),
+                      ]
+                    : elevatedFields;
+
+                return fields.some(
+                  (field) =>
+                    normalize(values[field]) !==
+                    normalize(elevatedBaseline.value[field])
+                );
+              },
+            }
+          : undefined,
+      }).save
+    : undefined;
 
+  // `PageScreen` shows the Save button purely on `form` being truthy (`v-if="form"`) —
+  // it doesn't look at `onSave`/`submit`. Passing `inertiaForm` unconditionally would
+  // show a Save button with nothing to save on a node-only screen (a listing, say).
   useAppLayout({
-    form: inertiaForm,
+    form: props.submit ? inertiaForm : null,
     defaultFormActions: props.defaultFormActions,
     onSave: save,
   });
@@ -108,7 +125,13 @@
 </script>
 
 <template>
-  <form @submit.prevent="save()">
+  <!--
+    A node-only screen (no `submit`) renders as a plain `<div>` — there's
+    nothing to submit, so there's no reason to imply otherwise with a `<form>`
+    element. Value tracking below is all Vue-side state; it doesn't depend on
+    an actual `<form>` tag existing in the DOM either way.
+  -->
+  <component :is="submit ? 'form' : 'div'" @submit.prevent="save?.()">
     <craft-pane appearance="raised">
       <craft-field-group>
         <FormRenderer
@@ -129,5 +152,5 @@
         </FormRenderer>
       </craft-field-group>
     </craft-pane>
-  </form>
+  </component>
 </template>
diff --git a/src/Form/FormNodeTypes.php b/src/Form/FormNodeTypes.php
index 88df9ef588b..ffed47ca608 100644
--- a/src/Form/FormNodeTypes.php
+++ b/src/Form/FormNodeTypes.php
@@ -17,6 +17,7 @@
 use CraftCms\Cms\Form\Nodes\Missing;
 use CraftCms\Cms\Form\Nodes\Separator;
 use CraftCms\Cms\Form\Nodes\Tab;
+use CraftCms\Cms\Form\Nodes\Table;
 use CraftCms\Cms\Form\Nodes\TemplateContent;
 use Illuminate\Container\Attributes\Singleton;
 
@@ -42,6 +43,7 @@ class FormNodeTypes extends TypeRegistry
         Missing::class,
         Separator::class,
         Tab::class,
+        Table::class,
         TemplateContent::class,
     ];
 }
diff --git a/src/Form/Nodes/Table.php b/src/Form/Nodes/Table.php
new file mode 100644
index 00000000000..6f6e9d0ab67
--- /dev/null
+++ b/src/Form/Nodes/Table.php
@@ -0,0 +1,252 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Form\Nodes;
+
+use CraftCms\Cms\Form\Contracts\Control;
+use CraftCms\Cms\Form\Contracts\Node;
+use CraftCms\Cms\Form\FormHtmlRenderer;
+use CraftCms\Cms\Form\FormPayload;
+use CraftCms\Cms\Form\NodePayload;
+use CraftCms\Cms\Support\Html;
+use CraftCms\Cms\Support\HtmlSanitizer\HtmlSanitizerManager;
+use Illuminate\Support\Traits\Conditionable;
+use Symfony\Component\HtmlSanitizer\HtmlSanitizer;
+
+/**
+ * A listing of rows (e.g. product types, gateways) rendered as a Form Node, backed by the
+ * `craft:admin-table` Vue component (`resources/js/modules/forms/AdminTableNode.vue`) on
+ * the client.
+ *
+ * Unlike {@see Heading}/{@see Separator}, a table's rows represent other entities rather
+ * than the form's own value at a path, so it deliberately never touches `FormContext`'s
+ * values/mode — `props()` is the only channel it uses.
+ */
+class Table implements Node
+{
+    use Conditionable;
+
+    /** @var list<array{key: string, label: string}> */
+    private array $columns = [];
+
+    /** @var list<array<string, mixed>> */
+    private array $rows = [];
+
+    private ?string $emptyMessage = null;
+
+    private ?string $createLabel = null;
+
+    private ?string $createUrl = null;
+
+    private ?string $reorderUrl = null;
+
+    private ?string $deleteUrl = null;
+
+    private ?string $deleteConfirmMessage = null;
+
+    public function __construct(private readonly string $uid) {}
+
+    public static function make(string $uid): self
+    {
+        return new self($uid);
+    }
+
+    /** @param list<array{key: string, label: string}> $columns */
+    public function columns(array $columns): static
+    {
+        $this->columns = $columns;
+
+        return $this;
+    }
+
+    /**
+     * @param  list<array<string, mixed>>  $rows  Each row is keyed by column `key`, plus an `id`
+     *   entry identifying the row — required when {@see reorderable()} or {@see deletable()} are
+     *   used. A cell value may be a plain scalar; an array shaped `['label' => string, 'url' =>
+     *   ?string]` to render as a link (or plain text when `url` is null); a list of such arrays
+     *   to render several links in one cell; `['label' => string, 'items' => list<array{label:
+     *   string, url: ?string}>]` to render a dropdown menu of links; `['icon' => string, 'label' =>
+     *   ?string]` to render a single icon (`label` becomes its accessible name, and is what the
+     *   non-JS {@see renderHtml()} fallback shows in place of the icon); or `['html' => string]`
+     *   for markup none of the above can express (a styled `<code>` value, a compound badge). The
+     *   `html` shape is run through the same sanitizer {@see TemplateContent} uses (blocking
+     *   `form`, dropping `button`/`input`/`optgroup`/`option`/`select`/`textarea`) as a
+     *   defense-in-depth backstop — but sanitizing isn't encoding: the caller is still responsible
+     *   for {@see Html::encode()}-ing any user-entered value it interpolates into the string before
+     *   it ever reaches here, exactly as for `TemplateContent`. Prefer one of the structured shapes
+     *   above when it fits; `html` exists for what doesn't. A row may set `_deletable => false` to
+     *   suppress its own delete action even when the table as a whole is {@see deletable()} (e.g. a
+     *   "primary" row that can't be removed).
+     */
+    public function rows(array $rows): static
+    {
+        $this->rows = array_map(
+            fn(array $row) => array_map(self::sanitizeCell(...), $row),
+            $rows,
+        );
+
+        return $this;
+    }
+
+    private static function sanitizeCell(mixed $value): mixed
+    {
+        if (!is_array($value) || !array_key_exists('html', $value)) {
+            return $value;
+        }
+
+        $config = app(HtmlSanitizerManager::class)->defaultConfig()
+            ->blockElement('form');
+
+        foreach (['button', 'input', 'optgroup', 'option', 'select', 'textarea'] as $element) {
+            $config = $config->dropElement($element);
+        }
+
+        return ['html' => new HtmlSanitizer($config)->sanitize($value['html'])];
+    }
+
+    public function emptyMessage(?string $emptyMessage): static
+    {
+        $this->emptyMessage = $emptyMessage;
+
+        return $this;
+    }
+
+    public function createAction(?string $label, ?string $url): static
+    {
+        $this->createLabel = $label;
+        $this->createUrl = $url;
+
+        return $this;
+    }
+
+    /** Enables drag-to-reorder; the new order posts to `$url` as `{ids: list<int|string>}`. */
+    public function reorderable(string $url): static
+    {
+        $this->reorderUrl = $url;
+
+        return $this;
+    }
+
+    /**
+     * Adds a per-row delete action, posting `{id: <row id>}` to `$url`. Individual rows can
+     * opt out via `_deletable => false` in {@see rows()}.
+     */
+    public function deletable(string $url, ?string $confirmMessage = null): static
+    {
+        $this->deleteUrl = $url;
+        $this->deleteConfirmMessage = $confirmMessage;
+
+        return $this;
+    }
+
+    public static function renderHtml(NodePayload $node, FormPayload $payload, FormHtmlRenderer $renderer): string
+    {
+        $columns = $node->props['columns'];
+        $rows = $node->props['rows'];
+
+        $createAction = $node->props['createUrl'] !== null && $node->props['createLabel'] !== null
+            ? Html::a(Html::encode($node->props['createLabel']), $node->props['createUrl'], [
+                'class' => ['btn', 'submit', 'add', 'icon'],
+            ])
+            : '';
+
+        if (empty($rows)) {
+            $table = Html::tag('p', Html::encode($node->props['emptyMessage'] ?? ''), [
+                'class' => ['zilch'],
+            ]);
+        } else {
+            $renderLink = fn(array $link): string => $link['url'] !== null
+                ? Html::a(Html::encode($link['label']), $link['url'])
+                : Html::encode($link['label']);
+
+            // Reordering and deleting are inherently interactive (drag handles, confirmation
+            // dialogs, CSRF-protected requests) with no sensible plain-HTML equivalent, so this
+            // fallback renders a menu's links inline but otherwise omits those two affordances —
+            // consistent with the rest of the CP treating this renderer as JS-less read access,
+            // not a full replacement for the Vue control.
+            $renderCell = function(array $column, array $row) use ($renderLink): string {
+                $value = $row[$column['key']] ?? '';
+
+                if (is_array($value) && array_key_exists('items', $value)) {
+                    return implode(', ', array_map($renderLink, $value['items']));
+                }
+
+                if (is_array($value) && array_key_exists('icon', $value)) {
+                    return Html::encode($value['label'] ?? '');
+                }
+
+                if (is_array($value) && array_key_exists('html', $value)) {
+                    // Already sanitized in rows() — not re-encoded, this is meant to be markup.
+                    return $value['html'];
+                }
+
+                if (is_array($value) && array_is_list($value)) {
+                    return implode(', ', array_map($renderLink, $value));
+                }
+
+                if (is_array($value)) {
+                    return $renderLink($value);
+                }
+
+                return Html::encode((string) $value);
+            };
+
+            $head = Html::tag('tr', implode('', array_map(
+                fn(array $column) => Html::tag('th', Html::encode($column['label'])),
+                $columns,
+            )));
+
+            $body = implode('', array_map(
+                fn(array $row) => Html::tag('tr', implode('', array_map(
+                    fn(array $column) => Html::tag('td', $renderCell($column, $row)),
+                    $columns,
+                ))),
+                $rows,
+            ));
+
+            $table = Html::tag('table', Html::tag('thead', $head).Html::tag('tbody', $body), [
+                'class' => ['data', 'fullwidth'],
+            ]);
+        }
+
+        return Html::tag('div', $createAction.$table, [
+            'class' => ['grid', 'gap-2'],
+            'data-form-node' => $node->uid,
+        ]);
+    }
+
+    public function component(): string
+    {
+        return 'craft:admin-table';
+    }
+
+    public function uid(): ?string
+    {
+        return $this->uid;
+    }
+
+    public function props(): array
+    {
+        return [
+            'columns' => $this->columns,
+            'rows' => $this->rows,
+            'emptyMessage' => $this->emptyMessage,
+            'createLabel' => $this->createLabel,
+            'createUrl' => $this->createUrl,
+            'reorderUrl' => $this->reorderUrl,
+            'deleteUrl' => $this->deleteUrl,
+            'deleteConfirmMessage' => $this->deleteConfirmMessage,
+        ];
+    }
+
+    public function getControl(): ?Control
+    {
+        return null;
+    }
+
+    public function children(): array
+    {
+        return [];
+    }
+}

From e2b129d20fbb7121a5c13fb77941a00ef196d429 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Wed, 9 Sep 2026 15:00:20 +0100
Subject: [PATCH 02/19] fix card designer element type

---
 .../js/modules/field-layout-designer/card-view-designer.ts    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/js/modules/field-layout-designer/card-view-designer.ts b/resources/js/modules/field-layout-designer/card-view-designer.ts
index d4b9ad2e08c..2f165a7dd8a 100644
--- a/resources/js/modules/field-layout-designer/card-view-designer.ts
+++ b/resources/js/modules/field-layout-designer/card-view-designer.ts
@@ -135,6 +135,10 @@ export class CardViewDesigner extends Base {
           data: {
             fieldLayoutConfig: {
               ...this.designer.config,
+              // Not part of `this.designer.config` (that lives at
+              // `designer.settings.elementType` instead), but `CardDesigner::previewHtml()`
+              // needs a `type` on the layout config to instantiate a sample element.
+              type: this.designer.settings!.elementType,
               generatedFields:
                 document
                   .querySelector('craft-generated-fields-table')

From a1a302bdd15cc2c4e358e2cddf4f2cdff4d4a037 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Tue, 15 Sep 2026 17:27:53 +0100
Subject: [PATCH 03/19] table and control compatibility changes

---
 resources/js/modules/forms/AdminTableNode.vue | 43 +++++++--
 .../js/modules/forms/ComboboxControl.vue      |  1 -
 resources/js/pages/Form.vue                   | 11 +++
 src/Form/Nodes/Table.php                      | 87 +++++++++++--------
 4 files changed, 96 insertions(+), 46 deletions(-)

diff --git a/resources/js/modules/forms/AdminTableNode.vue b/resources/js/modules/forms/AdminTableNode.vue
index 4ff5f20a613..4c24ce3df3c 100644
--- a/resources/js/modules/forms/AdminTableNode.vue
+++ b/resources/js/modules/forms/AdminTableNode.vue
@@ -55,14 +55,16 @@
    * renders on its own) live in the trailing actions column — a menu is
    * ordinary column data, not merged into it.
    *
-   * `html` is trusted, not sanitized here: the PHP `Table::rows()` that
-   * produced it already ran it through the same HTML sanitizer
-   * `TemplateContent` uses (see its Node docs), the same trust boundary
-   * `TemplateContentNode.vue` relies on for its own `v-html`. Sanitizing
-   * doesn't substitute for encoding, though — whichever server-side column
-   * builds one of these still has to `Html::encode()` any user-entered value
-   * before it goes into the string. Prefer a structured shape above when it
-   * fits; reach for `html` only when it doesn't.
+   * `html` is trusted completely, not sanitized here or on the PHP side: the
+   * PHP `Table::rows()` that produced it renders it unsanitized on purpose,
+   * so a cell can host a real working custom element (a copy-to-clipboard
+   * control, say) rather than only static display markup — unlike
+   * `TemplateContentNode.vue`'s `v-html`, which still relies on
+   * `TemplateContent`'s own sanitizer. That leaves whichever server-side
+   * column builds one of these entirely responsible for its safety —
+   * `Html::encode()`-ing any user-entered value before it goes into the
+   * string, exactly as if writing directly to the page. Prefer a structured
+   * shape above when it fits; reach for `html` only when it doesn't.
    */
   type TableCellValue =
     | string
@@ -89,6 +91,7 @@
       emptyMessage: string | null;
       createLabel: string | null;
       createUrl: string | null;
+      createMenuItems: Array<{label: string; url: string}> | null;
       reorderUrl: string | null;
       deleteUrl: string | null;
       deleteConfirmMessage: string | null;
@@ -108,6 +111,15 @@
 
   const columnHelper = createCraftColumnHelper<TableRow>();
 
+  const createMenuActions = computed<ActionItemLink[]>(
+    () =>
+      props.node.props.createMenuItems?.map((item) => ({
+        type: 'link',
+        href: item.url,
+        label: item.label,
+      })) ?? []
+  );
+
   function isMenu(
     value: TableLink | TableLink[] | TableMenu | TableIcon | TableHtml
   ): value is TableMenu {
@@ -270,6 +282,21 @@
         >{{ node.props.createLabel }}</CpLink
       >
     </LayoutSlot>
+    <LayoutSlot v-else-if="createMenuActions.length" name="actions">
+      <ActionMenu :actions="createMenuActions">
+        <template #invoker="{attributes}">
+          <craft-button
+            type="button"
+            variant="primary"
+            icon="plus"
+            v-bind="attributes"
+          >
+            {{ node.props.createLabel }}
+            <craft-icon name="chevron-down" slot="suffix"></craft-icon>
+          </craft-button>
+        </template>
+      </ActionMenu>
+    </LayoutSlot>
 
     <craft-pane padding="0" appearance="raised">
       <AdminTable
diff --git a/resources/js/modules/forms/ComboboxControl.vue b/resources/js/modules/forms/ComboboxControl.vue
index be5a681ae69..cd47f2df8fd 100644
--- a/resources/js/modules/forms/ComboboxControl.vue
+++ b/resources/js/modules/forms/ComboboxControl.vue
@@ -50,7 +50,6 @@
 <template>
   <CraftCombobox
     :name="editable ? inputName(control.path) : ''"
-    :label="label"
     :options="control.props.options"
     :placeholder="control.props.placeholder"
     :limit="control.props.limit"
diff --git a/resources/js/pages/Form.vue b/resources/js/pages/Form.vue
index 3161f3da214..c22bb0cdd4e 100644
--- a/resources/js/pages/Form.vue
+++ b/resources/js/pages/Form.vue
@@ -7,6 +7,8 @@
     useAppLayout,
     type UseAppLayoutOptions,
   } from '@/common/composables/useAppLayout';
+  import DynamicHtmlRenderer from '@/common/components/DynamicHtmlRenderer.vue';
+  import LayoutSlot from '@/common/components/LayoutSlot.vue';
   import FormRenderer from '@/modules/forms/FormRenderer.vue';
   import type {
     FormChange,
@@ -32,6 +34,12 @@
     elevatedFields?: string[] | '*';
     refreshUrl?: string;
     defaultFormActions?: UseAppLayoutOptions['defaultFormActions'];
+    /**
+     * Server-rendered read-only metadata (e.g. Created at/Updated at) for the details
+     * column — the same {@see \CraftCms\Cms\Cp\Html\ContentHtml::metadataHtml()} markup
+     * the element editor's sidebar shows via its own `metadataHtml` payload prop.
+     */
+    metadataHtml?: string;
   }>();
   const emit = defineEmits<{
     (event: 'change', change: FormChange, values: FormPayload['values']): void;
@@ -153,4 +161,7 @@
       </craft-field-group>
     </craft-pane>
   </component>
+  <LayoutSlot v-if="metadataHtml" name="details">
+    <DynamicHtmlRenderer :html="metadataHtml" />
+  </LayoutSlot>
 </template>
diff --git a/src/Form/Nodes/Table.php b/src/Form/Nodes/Table.php
index 6f6e9d0ab67..417de25b642 100644
--- a/src/Form/Nodes/Table.php
+++ b/src/Form/Nodes/Table.php
@@ -10,9 +10,7 @@
 use CraftCms\Cms\Form\FormPayload;
 use CraftCms\Cms\Form\NodePayload;
 use CraftCms\Cms\Support\Html;
-use CraftCms\Cms\Support\HtmlSanitizer\HtmlSanitizerManager;
 use Illuminate\Support\Traits\Conditionable;
-use Symfony\Component\HtmlSanitizer\HtmlSanitizer;
 
 /**
  * A listing of rows (e.g. product types, gateways) rendered as a Form Node, backed by the
@@ -39,6 +37,9 @@ class Table implements Node
 
     private ?string $createUrl = null;
 
+    /** @var list<array{label: string, url: string}>|null */
+    private ?array $createMenuItems = null;
+
     private ?string $reorderUrl = null;
 
     private ?string $deleteUrl = null;
@@ -69,42 +70,25 @@ public function columns(array $columns): static
      *   string, url: ?string}>]` to render a dropdown menu of links; `['icon' => string, 'label' =>
      *   ?string]` to render a single icon (`label` becomes its accessible name, and is what the
      *   non-JS {@see renderHtml()} fallback shows in place of the icon); or `['html' => string]`
-     *   for markup none of the above can express (a styled `<code>` value, a compound badge). The
-     *   `html` shape is run through the same sanitizer {@see TemplateContent} uses (blocking
-     *   `form`, dropping `button`/`input`/`optgroup`/`option`/`select`/`textarea`) as a
-     *   defense-in-depth backstop — but sanitizing isn't encoding: the caller is still responsible
-     *   for {@see Html::encode()}-ing any user-entered value it interpolates into the string before
-     *   it ever reaches here, exactly as for `TemplateContent`. Prefer one of the structured shapes
-     *   above when it fits; `html` exists for what doesn't. A row may set `_deletable => false` to
-     *   suppress its own delete action even when the table as a whole is {@see deletable()} (e.g. a
-     *   "primary" row that can't be removed).
+     *   for markup none of the above can express (a styled `<code>` value, a compound badge, a
+     *   working custom element like `<craft-input-copy>` that needs its own real light-DOM
+     *   `<input>`). Unlike {@see TemplateContent}, `html` here is rendered completely unsanitized
+     *   — some index tables need cells that are more than static display (a real copy-to-clipboard
+     *   control, for instance), which a sanitizer that drops `input`/`button`/etc. as defense in
+     *   depth would break. That means the caller owns this trust boundary entirely: run untrusted
+     *   values through {@see Html::encode()} (or a sanitizer, if the value is itself meant to carry
+     *   markup) before interpolating them into the string, exactly as if writing directly to the
+     *   page. Prefer one of the structured shapes above when it fits; `html` exists for what
+     *   doesn't. A row may set `_deletable => false` to suppress its own delete action even when
+     *   the table as a whole is {@see deletable()} (e.g. a "primary" row that can't be removed).
      */
     public function rows(array $rows): static
     {
-        $this->rows = array_map(
-            fn(array $row) => array_map(self::sanitizeCell(...), $row),
-            $rows,
-        );
+        $this->rows = $rows;
 
         return $this;
     }
 
-    private static function sanitizeCell(mixed $value): mixed
-    {
-        if (!is_array($value) || !array_key_exists('html', $value)) {
-            return $value;
-        }
-
-        $config = app(HtmlSanitizerManager::class)->defaultConfig()
-            ->blockElement('form');
-
-        foreach (['button', 'input', 'optgroup', 'option', 'select', 'textarea'] as $element) {
-            $config = $config->dropElement($element);
-        }
-
-        return ['html' => new HtmlSanitizer($config)->sanitize($value['html'])];
-    }
-
     public function emptyMessage(?string $emptyMessage): static
     {
         $this->emptyMessage = $emptyMessage;
@@ -116,6 +100,23 @@ public function createAction(?string $label, ?string $url): static
     {
         $this->createLabel = $label;
         $this->createUrl = $url;
+        $this->createMenuItems = null;
+
+        return $this;
+    }
+
+    /**
+     * Like {@see createAction()}, but for when there's more than one place a new row could come
+     * from (e.g. one per store) — renders as a single button that opens a menu of links instead
+     * of linking straight to `$url`.
+     *
+     * @param  list<array{label: string, url: string}>  $items
+     */
+    public function createActionMenu(string $label, array $items): static
+    {
+        $this->createLabel = $label;
+        $this->createUrl = null;
+        $this->createMenuItems = $items;
 
         return $this;
     }
@@ -145,11 +146,21 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
         $columns = $node->props['columns'];
         $rows = $node->props['rows'];
 
-        $createAction = $node->props['createUrl'] !== null && $node->props['createLabel'] !== null
-            ? Html::a(Html::encode($node->props['createLabel']), $node->props['createUrl'], [
-                'class' => ['btn', 'submit', 'add', 'icon'],
-            ])
-            : '';
+        $createAction = match (true) {
+            $node->props['createUrl'] !== null && $node->props['createLabel'] !== null => Html::a(
+                Html::encode($node->props['createLabel']),
+                $node->props['createUrl'],
+                ['class' => ['btn', 'submit', 'add', 'icon']],
+            ),
+            // No sensible JS-less dropdown-button equivalent — same reasoning renderCell()'s
+            // `items` shape gives for menu cells — so this renders the label followed by its
+            // items as plain inline links instead.
+            !empty($node->props['createMenuItems']) => Html::encode($node->props['createLabel'] ?? '').': '.implode(', ', array_map(
+                fn(array $item) => Html::a(Html::encode($item['label']), $item['url']),
+                $node->props['createMenuItems'],
+            )),
+            default => '',
+        };
 
         if (empty($rows)) {
             $table = Html::tag('p', Html::encode($node->props['emptyMessage'] ?? ''), [
@@ -177,7 +188,8 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
                 }
 
                 if (is_array($value) && array_key_exists('html', $value)) {
-                    // Already sanitized in rows() — not re-encoded, this is meant to be markup.
+                    // Not re-encoded — this is meant to be markup, and rows() no longer
+                    // sanitizes it (see its docblock); the caller owns that trust boundary.
                     return $value['html'];
                 }
 
@@ -234,6 +246,7 @@ public function props(): array
             'emptyMessage' => $this->emptyMessage,
             'createLabel' => $this->createLabel,
             'createUrl' => $this->createUrl,
+            'createMenuItems' => $this->createMenuItems,
             'reorderUrl' => $this->reorderUrl,
             'deleteUrl' => $this->deleteUrl,
             'deleteConfirmMessage' => $this->deleteConfirmMessage,

From 58b15317144a06ce90ca6284125ddef1c91c0b83 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Tue, 15 Sep 2026 18:04:40 +0100
Subject: [PATCH 04/19] php stuff for select colour component

---
 .../components/select-color/select-color.ts   |  49 ++++++-
 .../js/modules/forms/ColorSelectControl.vue   |  67 +++++++++
 resources/js/modules/forms/register.ts        |   2 +
 src/Cp/Components/SelectColor.php             | 129 ++++++++++++++++++
 src/Form/Controls/ColorSelect.php             | 102 ++++++++++++++
 src/Form/FormControlTypes.php                 |   2 +
 6 files changed, 346 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/modules/forms/ColorSelectControl.vue
 create mode 100644 src/Cp/Components/SelectColor.php
 create mode 100644 src/Form/Controls/ColorSelect.php

diff --git a/packages/craftcms-ui/src/components/select-color/select-color.ts b/packages/craftcms-ui/src/components/select-color/select-color.ts
index 6f761915719..9d98bae3e8a 100644
--- a/packages/craftcms-ui/src/components/select-color/select-color.ts
+++ b/packages/craftcms-ui/src/components/select-color/select-color.ts
@@ -1,6 +1,7 @@
 import {html, LitElement} from 'lit';
 import {property} from 'lit/decorators.js';
-import {colors} from '@src/constants/colors';
+import type {Validator} from '@lion/ui/form-core.js';
+import {colors as paletteColors} from '@src/constants/colors';
 import {t} from '@src/utilities/translate';
 import styles from './select-color.styles.js';
 import '../select-rich/select-rich.js';
@@ -15,7 +16,8 @@ function titleCase(value: string): string {
 
 /**
  * @summary A color picker built on top of the rich select. Renders one option
- * per color from `constants/colors`, with an optional "transparent" option.
+ * per color from `constants/colors` (or {@link CraftSelectColor.colors}, when
+ * narrowed), with an optional "transparent" option.
  *
  * @since 1.0
  */
@@ -41,11 +43,44 @@ export default class CraftSelectColor extends LitElement {
   modelValue: string | null = null;
 
   /**
-   * When enabled, a "Transparent" option is prepended to the list of colors.
+   * When enabled, a blank option (labelled {@link blankLabel}) is prepended
+   * to the list of colors.
    */
   @property({type: Boolean, reflect: true, attribute: 'allow-transparent'})
   allowTransparent = false;
 
+  /**
+   * Overrides the blank option's label (default "Transparent"). Use this
+   * when the value being picked isn't a background/opacity concept — e.g.
+   * "No color" for a category swatch.
+   */
+  @property({attribute: 'blank-label'})
+  blankLabel: string | null = null;
+
+  /**
+   * The colors offered, in order. Defaults to every color in the shared
+   * palette ({@link paletteColors}) — pass a subset to restrict the choices
+   * to whatever set a particular caller's values are actually drawn from.
+   */
+  @property({type: Array})
+  colors: string[] = [...paletteColors];
+
+  /** Forwarded to the underlying rich select. */
+  @property({type: Boolean, reflect: true})
+  disabled = false;
+
+  /** Forwarded to the underlying rich select. */
+  @property({type: Boolean, reflect: true, attribute: 'readonly'})
+  readOnly = false;
+
+  /** Forwarded to the underlying rich select. */
+  @property({type: Boolean, reflect: true})
+  required = false;
+
+  /** Forwarded to the underlying rich select. */
+  @property({attribute: false})
+  validators: Validator[] = [];
+
   /**
    * Renders a color swatch for the given color value. The special `__blank__`
    * value (the "Transparent" option) reuses the checkerboard treatment so it
@@ -137,12 +172,16 @@ export default class CraftSelectColor extends LitElement {
         label=${this.label}
         name=${this.name}
         .modelValue=${this.modelValue}
+        .disabled=${this.disabled}
+        .readOnly=${this.readOnly}
+        .required=${this.required}
+        .validators=${this.validators}
         @model-value-changed=${this._handleModelValueChanged}
       >
         ${this.allowTransparent
-          ? this._optionTemplate('__blank__', t('Transparent'))
+          ? this._optionTemplate('__blank__', this.blankLabel ?? t('Transparent'))
           : ''}
-        ${colors.map((color) =>
+        ${this.colors.map((color) =>
           this._optionTemplate(color, t(titleCase(color)))
         )}
       </craft-select-rich>
diff --git a/resources/js/modules/forms/ColorSelectControl.vue b/resources/js/modules/forms/ColorSelectControl.vue
new file mode 100644
index 00000000000..ea96ba869c5
--- /dev/null
+++ b/resources/js/modules/forms/ColorSelectControl.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+  import CraftSelectColor from '@craftcms/ui/components/select-color/select-color';
+  import type {FormControlPayload} from './types';
+  import {
+    ignoreModelValueInitialization,
+    inputName,
+    serverErrorValidators,
+  } from './runtime';
+
+  // The underlying <craft-select-color> uses this sentinel internally for its
+  // blank ("no color") option's choiceValue, since a rich select's options
+  // need a real, distinct value to match against. Our own canonical "no
+  // color" value stays the empty string (the same convention every other
+  // select-like control in this Form system uses), so it's translated at the
+  // boundary in both directions rather than leaking out to the server.
+  const BLANK_VALUE = '__blank__';
+
+  type ColorSelectControlProps = {
+    allowTransparent?: boolean;
+    blankLabel?: string;
+    colors?: string[];
+  };
+
+  defineProps<{
+    control: FormControlPayload<ColorSelectControlProps>;
+    value: unknown;
+    label?: string;
+    editable: boolean;
+    invalid: boolean;
+    required: boolean;
+  }>();
+  const emit = defineEmits<{
+    (event: 'update:value', value: string, kind: 'discrete'): void;
+  }>();
+
+  const onModelValueChanged = ignoreModelValueInitialization((event) => {
+    if (!(event.target instanceof CraftSelectColor)) {
+      throw new TypeError('Expected a color select event target.');
+    }
+
+    const modelValue = event.target.modelValue;
+    emit(
+      'update:value',
+      modelValue === BLANK_VALUE ? '' : String(modelValue ?? ''),
+      'discrete'
+    );
+  });
+</script>
+
+<template>
+  <craft-select-color
+    :name="editable ? inputName(control.path) : ''"
+    .modelValue="
+      !value && control.props.allowTransparent
+        ? BLANK_VALUE
+        : String(value ?? '')
+    "
+    :allow-transparent="control.props.allowTransparent ?? false"
+    :blank-label="control.props.blankLabel"
+    :colors="control.props.colors ?? undefined"
+    :required="editable && required"
+    :readonly="control.mode === 'readOnly'"
+    :disabled="!editable"
+    .validators="serverErrorValidators(invalid)"
+    @model-value-changed="onModelValueChanged"
+  ></craft-select-color>
+</template>
diff --git a/resources/js/modules/forms/register.ts b/resources/js/modules/forms/register.ts
index 665bc4fae98..df016d34965 100644
--- a/resources/js/modules/forms/register.ts
+++ b/resources/js/modules/forms/register.ts
@@ -7,6 +7,7 @@ import FieldNode from './FieldNode.vue';
 import ChoiceControl from './ChoiceControl.vue';
 import ConditionBuilderControl from './ConditionBuilderControl.vue';
 import ColorControl from './ColorControl.vue';
+import ColorSelectControl from './ColorSelectControl.vue';
 import ComboboxControl from './ComboboxControl.vue';
 import FormRenderer from './FormRenderer.vue';
 import GroupNode from './GroupNode.vue';
@@ -76,6 +77,7 @@ export function registerFormComponents(
   components.register('craft:date-time', DateTimeControl);
   components.register('craft:time', TextControl);
   components.register('craft:color', ColorControl);
+  components.register('craft:color-select', ColorSelectControl);
   components.register('craft:money', MoneyControl);
   components.register('craft:permission-tree', PermissionTreeControl);
   components.register('craft:markdown', MarkdownControl);
diff --git a/src/Cp/Components/SelectColor.php b/src/Cp/Components/SelectColor.php
new file mode 100644
index 00000000000..51d79b5013b
--- /dev/null
+++ b/src/Cp/Components/SelectColor.php
@@ -0,0 +1,129 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Cp\Components;
+
+use CraftCms\Cms\Cp\Concerns\HasDisabled;
+use CraftCms\Cms\Cp\Concerns\HasId;
+use CraftCms\Cms\Support\Json;
+
+/** PHP counterpart to the `<craft-select-color>` web component. */
+class SelectColor extends ViewComponent
+{
+    use HasDisabled;
+    use HasId;
+
+    protected ?string $name = null;
+
+    protected ?string $value = null;
+
+    protected ?string $label = null;
+
+    protected bool $allowTransparent = false;
+
+    protected ?string $blankLabel = null;
+
+    /** @var list<string>|null */
+    protected ?array $colors = null;
+
+    protected bool $required = false;
+
+    protected bool $readOnly = false;
+
+    protected ?string $describedBy = null;
+
+    protected function tagName(): string
+    {
+        return 'craft-select-color';
+    }
+
+    public function name(?string $name): static
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    public function value(?string $value): static
+    {
+        $this->value = $value;
+
+        return $this;
+    }
+
+    public function label(?string $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    /** Prepends a blank option, labelled "Transparent" unless {@see blankLabel()} overrides it. */
+    public function allowTransparent(bool $allowTransparent = true): static
+    {
+        $this->allowTransparent = $allowTransparent;
+
+        return $this;
+    }
+
+    /** Overrides the blank option's label (default "Transparent"). */
+    public function blankLabel(?string $blankLabel): static
+    {
+        $this->blankLabel = $blankLabel;
+
+        return $this;
+    }
+
+    /**
+     * Restricts the offered colors. `null` (the default) offers every color
+     * in the shared palette.
+     *
+     * @param  list<string>|null  $colors
+     */
+    public function colors(?array $colors): static
+    {
+        $this->colors = $colors;
+
+        return $this;
+    }
+
+    public function required(bool $required = true): static
+    {
+        $this->required = $required;
+
+        return $this;
+    }
+
+    public function readOnly(bool $readOnly = true): static
+    {
+        $this->readOnly = $readOnly;
+
+        return $this;
+    }
+
+    public function describedBy(?string $describedBy): static
+    {
+        $this->describedBy = $describedBy;
+
+        return $this;
+    }
+
+    #[\Override]
+    protected function hostAttributes(): array
+    {
+        return [
+            'id' => $this->getId(),
+            'name' => $this->name,
+            'model-value' => $this->value,
+            'label' => $this->label,
+            'allow-transparent' => $this->allowTransparent,
+            'blank-label' => $this->blankLabel,
+            'colors' => $this->colors !== null ? Json::encode($this->colors) : null,
+            'required' => $this->required,
+            'readonly' => $this->readOnly,
+            'disabled' => $this->isDisabled(),
+            'aria' => ['describedby' => $this->describedBy],
+        ];
+    }
+}
diff --git a/src/Form/Controls/ColorSelect.php b/src/Form/Controls/ColorSelect.php
new file mode 100644
index 00000000000..0dc3cbf7f77
--- /dev/null
+++ b/src/Form/Controls/ColorSelect.php
@@ -0,0 +1,102 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Form\Controls;
+
+use CraftCms\Cms\Cp\Components\SelectColor as SelectColorComponent;
+use CraftCms\Cms\Form\ControlPayload;
+use CraftCms\Cms\Form\FormHtmlRenderer;
+use Illuminate\Support\Arr;
+
+/**
+ * A named-palette color Control (red/orange/.../black — the same palette as
+ * {@see \CraftCms\Cms\Shared\Enums\Color}), rendered as a swatch-decorated
+ * rich select. Its canonical value is a color slug string, or null.
+ *
+ * This is the modern replacement for the legacy `colorSelectField` Twig
+ * macro — narrow the offered colors to a specific enum's cases with
+ * {@see self::colors()} when a caller's values aren't drawn from the full
+ * shared palette.
+ */
+class ColorSelect extends Control
+{
+    private bool $allowTransparent = false;
+
+    private ?string $blankLabel = null;
+
+    /** @var list<string>|null */
+    private ?array $colors = null;
+
+    public static function renderHtml(ControlPayload $control, mixed $value, array $attributes, FormHtmlRenderer $renderer): string
+    {
+        $allowTransparent = (bool) ($control->props['allowTransparent'] ?? false);
+
+        // The underlying <craft-select-color> uses this sentinel internally for its blank
+        // option's choiceValue; our own canonical "no color" value stays null/empty, matching
+        // every other select-like control in this Form system, so it's translated here rather
+        // than leaking out to the server.
+        $componentValue = match (true) {
+            $value !== null && $value !== '' => (string) $value,
+            $allowTransparent => '__blank__',
+            default => null,
+        };
+
+        return SelectColorComponent::make()
+            ->id($attributes['id'])
+            ->name($attributes['name'])
+            ->value($componentValue)
+            ->allowTransparent($allowTransparent)
+            ->blankLabel($control->props['blankLabel'] ?? null)
+            ->colors($control->props['colors'] ?? null)
+            ->disabled($attributes['disabled'])
+            ->readOnly($attributes['readonly'])
+            ->required($attributes['required'])
+            ->describedBy($attributes['aria']['describedby'] ?? null)
+            ->toHtml();
+    }
+
+    public function component(): string
+    {
+        return 'craft:color-select';
+    }
+
+    /** Prepends a blank option, labelled "Transparent" unless {@see blankLabel()} overrides it. */
+    public function allowTransparent(bool $allowTransparent = true): static
+    {
+        $this->allowTransparent = $allowTransparent;
+
+        return $this;
+    }
+
+    /** Overrides the blank option's label (default "Transparent"). */
+    public function blankLabel(?string $blankLabel): static
+    {
+        $this->blankLabel = $blankLabel;
+
+        return $this;
+    }
+
+    /**
+     * Restricts the offered colors. Omit to offer every color in the shared
+     * palette.
+     *
+     * @param  list<string>|null  $colors
+     */
+    public function colors(?array $colors): static
+    {
+        $this->colors = $colors;
+
+        return $this;
+    }
+
+    #[\Override]
+    public function props(mixed $value = null): array
+    {
+        return Arr::whereNotNull([
+            'allowTransparent' => $this->allowTransparent ?: null,
+            'blankLabel' => $this->blankLabel,
+            'colors' => $this->colors,
+        ]);
+    }
+}
diff --git a/src/Form/FormControlTypes.php b/src/Form/FormControlTypes.php
index 3da41ae0b2f..aa5013812d1 100644
--- a/src/Form/FormControlTypes.php
+++ b/src/Form/FormControlTypes.php
@@ -11,6 +11,7 @@
 use CraftCms\Cms\Form\Controls\Checkbox;
 use CraftCms\Cms\Form\Controls\Choice;
 use CraftCms\Cms\Form\Controls\Color;
+use CraftCms\Cms\Form\Controls\ColorSelect;
 use CraftCms\Cms\Form\Controls\Combobox;
 use CraftCms\Cms\Form\Controls\ConditionBuilder;
 use CraftCms\Cms\Form\Controls\ContentBlock;
@@ -56,6 +57,7 @@ class FormControlTypes extends TypeRegistry
         Choice::class,
         ConditionBuilder::class,
         Color::class,
+        ColorSelect::class,
         Combobox::class,
         ContentBlock::class,
         Date::class,

From bd88505a4062c27a919f2945c6744164685407ff Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Wed, 16 Sep 2026 08:35:39 +0100
Subject: [PATCH 05/19] Missing suffix for text control

---
 resources/js/modules/forms/TextControl.vue |  4 ++++
 src/Form/Controls/Text.php                 | 12 ++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/resources/js/modules/forms/TextControl.vue b/resources/js/modules/forms/TextControl.vue
index a380b3d7760..256fab2b6b6 100644
--- a/resources/js/modules/forms/TextControl.vue
+++ b/resources/js/modules/forms/TextControl.vue
@@ -25,6 +25,7 @@
     size?: number;
     dir?: string;
     monospace?: boolean;
+    suffix?: string;
     textExpanderTriggers?: TextExpanderTriggers;
   };
 
@@ -95,6 +96,9 @@
     @model-value-changed="onModelValueChanged"
   >
     <input :id="inputId" slot="input" />
+    <span v-if="control.props.suffix" slot="suffix">{{
+      control.props.suffix
+    }}</span>
   </craft-input>
   <craft-text-expander
     v-if="editable && control.props.textExpanderTriggers"
diff --git a/src/Form/Controls/Text.php b/src/Form/Controls/Text.php
index b7fb3edaa71..8aba514f41d 100644
--- a/src/Form/Controls/Text.php
+++ b/src/Form/Controls/Text.php
@@ -42,6 +42,8 @@ class Text extends Control
 
     private bool $monospace = false;
 
+    private ?string $suffix = null;
+
     public static function renderHtml(ControlPayload $control, mixed $value, array $attributes, FormHtmlRenderer $renderer): string
     {
         $input = Input::make()
@@ -62,6 +64,7 @@ public static function renderHtml(ControlPayload $control, mixed $value, array $
             ->inputSize($control->props['size'] ?? null)
             ->orientation($control->props['dir'] ?? null)
             ->monospace((bool) ($control->props['monospace'] ?? false))
+            ->suffix($control->props['suffix'] ?? null)
             ->disabled($attributes['disabled'] || ($attributes['readonly'] && ($control->props['inputType'] ?? 'text') === 'range'))
             ->readOnly($attributes['readonly'])
             ->describedBy($attributes['aria']['describedby'] ?? null)
@@ -178,6 +181,14 @@ public function monospace(bool $monospace = true): static
         return $this;
     }
 
+    /** A display-only unit label rendered after the input (e.g. a percent or currency symbol). */
+    public function suffix(?string $suffix): static
+    {
+        $this->suffix = $suffix;
+
+        return $this;
+    }
+
     #[\Override]
     public function props(mixed $value = null): array
     {
@@ -196,6 +207,7 @@ public function props(mixed $value = null): array
             'size' => $this->size,
             'dir' => $this->dir,
             'monospace' => $this->monospace ?: null,
+            'suffix' => $this->suffix,
             ...$this->textExpanderProps(),
         ]);
     }

From 96b63f3d535ac4b97704549abe8f18b531cf9c2f Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Wed, 16 Sep 2026 09:50:59 +0100
Subject: [PATCH 06/19] added new combocreate control

---
 .../modules/forms/ComboboxCreateControl.vue   |  72 +++++++++
 resources/js/modules/forms/combobox-create.ts | 148 ++++++++++++++++++
 resources/js/modules/forms/register.ts        |   2 +
 src/Form/Controls/ComboboxCreate.php          | 101 ++++++++++++
 src/Form/FormControlTypes.php                 |   2 +
 5 files changed, 325 insertions(+)
 create mode 100644 resources/js/modules/forms/ComboboxCreateControl.vue
 create mode 100644 resources/js/modules/forms/combobox-create.ts
 create mode 100644 src/Form/Controls/ComboboxCreate.php

diff --git a/resources/js/modules/forms/ComboboxCreateControl.vue b/resources/js/modules/forms/ComboboxCreateControl.vue
new file mode 100644
index 00000000000..624e805f369
--- /dev/null
+++ b/resources/js/modules/forms/ComboboxCreateControl.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+  import type {ComboboxItem} from '@craftcms/ui/components/combobox/combobox';
+  import type CraftComboboxCreate from './combobox-create';
+  import './combobox-create';
+  import type {FormControlPayload} from './types';
+  import {inputName, serverErrorValidators} from './runtime';
+
+  type ComboboxCreateControlProps = {
+    options: ComboboxItem[];
+    createUrl?: string;
+    createValue?: string;
+    resultKey?: string;
+    labelField?: string;
+    valueField?: string;
+    placeholder?: string;
+    limit?: number;
+    clearable?: boolean;
+    requireOptionMatch?: boolean;
+    showAllOnEmpty?: boolean;
+    showSelectedHint?: boolean;
+    dir?: string;
+  };
+
+  defineProps<{
+    control: FormControlPayload<ComboboxCreateControlProps>;
+    value: unknown;
+    label?: string;
+    editable: boolean;
+    invalid: boolean;
+    required: boolean;
+  }>();
+  const emit = defineEmits<{
+    (event: 'update:value', value: string, kind: 'discrete'): void;
+  }>();
+
+  function onModelValueChanged(event: Event): void {
+    if ((event as CustomEvent).detail?.initialize) {
+      return;
+    }
+
+    const target = event.target as CraftComboboxCreate;
+
+    if (target.modelValue !== target.createValue) {
+      emit('update:value', String(target.modelValue ?? ''), 'discrete');
+    }
+  }
+</script>
+
+<template>
+  <craft-combobox-create
+    :name="editable ? inputName(control.path) : ''"
+    .modelValue="String(value ?? '')"
+    .options="control.props.options"
+    .createUrl="control.props.createUrl ?? ''"
+    .createValue="control.props.createValue ?? '__add__'"
+    .resultKey="control.props.resultKey ?? ''"
+    .labelField="control.props.labelField ?? 'name'"
+    .valueField="control.props.valueField ?? 'id'"
+    :placeholder="control.props.placeholder"
+    .limit="control.props.limit ?? 150"
+    .clearable="control.props.clearable ?? false"
+    .requireOptionMatch="control.props.requireOptionMatch ?? false"
+    .showAllOnEmpty="control.props.showAllOnEmpty ?? false"
+    .showSelectedHint="control.props.showSelectedHint ?? false"
+    :dir="control.props.dir"
+    :required="editable && required"
+    :readonly="control.mode === 'readOnly'"
+    :disabled="control.mode === 'disabled'"
+    .validators="serverErrorValidators(invalid)"
+    @model-value-changed="onModelValueChanged"
+  />
+</template>
diff --git a/resources/js/modules/forms/combobox-create.ts b/resources/js/modules/forms/combobox-create.ts
new file mode 100644
index 00000000000..a734db9833d
--- /dev/null
+++ b/resources/js/modules/forms/combobox-create.ts
@@ -0,0 +1,148 @@
+import type {
+  ComboboxItem,
+  ComboboxOption,
+} from '@craftcms/ui/components/combobox/combobox';
+import CraftCombobox from '@craftcms/ui/components/combobox/combobox';
+import {property} from 'lit/decorators.js';
+import {openSlideout} from '@/common/slideouts';
+
+/**
+ * Inserts `option` directly before the trigger option (`value === createValue`) in a flat
+ * option list. Optgroups aren't supported — every consumer of this control so far (Tax Zone,
+ * Tax Category, …) offers a flat list, so grouping isn't worth the added complexity here; add
+ * it if a future caller actually needs it.
+ */
+function insertBeforeCreateOption(
+  options: ComboboxItem[],
+  createValue: string,
+  option: ComboboxOption
+): ComboboxItem[] {
+  const index = options.findIndex(
+    (item) => item.type !== 'optgroup' && item.value === createValue
+  );
+
+  return index === -1
+    ? [...options, option]
+    : [...options.slice(0, index), option, ...options.slice(index)];
+}
+
+/**
+ * @summary A `craft-combobox` whose "create a new one" option opens the target resource's own
+ * create screen in a slideout instead of selecting a value directly, then appends the result as
+ * the new selection once saved. See {@link CraftCms\Cms\Form\Controls\ComboboxCreate} (PHP) for
+ * the full contract.
+ *
+ * @since 1.0
+ */
+export default class CraftComboboxCreate extends CraftCombobox {
+  @property({attribute: 'create-url'}) createUrl = '';
+
+  /** The option value that opens the create slideout instead of being selected directly. */
+  @property({attribute: 'create-value'}) createValue = '__add__';
+
+  /** The key the created record is nested under in the save response. */
+  @property({attribute: 'result-key'}) resultKey = '';
+
+  /** The created record's field used as the new option's label. */
+  @property({attribute: 'label-field'}) labelField = 'name';
+
+  /** The created record's field used as the new option's value. */
+  @property({attribute: 'value-field'}) valueField = 'id';
+
+  private creating = false;
+  private listener?: AbortController;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.listener?.abort();
+    this.listener = new AbortController();
+    this.addEventListener('model-value-changed', this.onModelValueChanged, {
+      signal: this.listener.signal,
+    });
+  }
+
+  override disconnectedCallback(): void {
+    this.listener?.abort();
+    super.disconnectedCallback();
+  }
+
+  private onModelValueChanged = (event: Event): void => {
+    if (
+      (event as CustomEvent).detail?.initialize ||
+      this.modelValue !== this.createValue ||
+      this.creating
+    ) {
+      return;
+    }
+
+    event.stopImmediatePropagation();
+
+    if (!this.createUrl) {
+      throw new Error('Combobox create URL is required.');
+    }
+
+    this.creating = true;
+
+    // Reset back to nothing selected while the slideout is open, rather than leaving the
+    // trigger option itself "selected".
+    queueMicrotask(() => {
+      this.modelValue = '';
+      this._inputNode.value = '';
+      this._notifyModelValueChanged();
+    });
+
+    void openSlideout(this.createUrl, {
+      opener: this,
+      onSaved: ({data}) => {
+        const record = (data as Record<string, unknown> | undefined)?.[
+          this.resultKey
+        ] as Record<string, unknown> | undefined;
+
+        if (!record) {
+          throw new Error(
+            `Combobox create response is missing "${this.resultKey}".`
+          );
+        }
+
+        const option = {
+          label: String(record[this.labelField] ?? ''),
+          value: String(record[this.valueField] ?? ''),
+        } satisfies ComboboxOption;
+
+        this.options = insertBeforeCreateOption(
+          this.options,
+          this.createValue,
+          option
+        );
+
+        void this.updateComplete.then(() => {
+          const selectedOption = Array.from(
+            this._listboxNode.querySelectorAll('craft-option')
+          ).find((item) => String(item.choiceValue) === String(option.value));
+
+          if (!selectedOption) {
+            throw new Error('Created option was not rendered.');
+          }
+
+          this.modelValue = option.value;
+          this._setTextboxValue(
+            this._getTextboxValueFromOption(selectedOption)
+          );
+          this._notifyModelValueChanged();
+        });
+      },
+    }).finally(() => {
+      this.creating = false;
+    });
+  };
+}
+
+if (!customElements.get('craft-combobox-create')) {
+  customElements.define('craft-combobox-create', CraftComboboxCreate);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'craft-combobox-create': CraftComboboxCreate;
+  }
+}
diff --git a/resources/js/modules/forms/register.ts b/resources/js/modules/forms/register.ts
index df016d34965..02fb99c83c2 100644
--- a/resources/js/modules/forms/register.ts
+++ b/resources/js/modules/forms/register.ts
@@ -9,6 +9,7 @@ import ConditionBuilderControl from './ConditionBuilderControl.vue';
 import ColorControl from './ColorControl.vue';
 import ColorSelectControl from './ColorSelectControl.vue';
 import ComboboxControl from './ComboboxControl.vue';
+import ComboboxCreateControl from './ComboboxCreateControl.vue';
 import FormRenderer from './FormRenderer.vue';
 import GroupNode from './GroupNode.vue';
 import LightswitchControl from './LightswitchControl.vue';
@@ -66,6 +67,7 @@ export function registerFormComponents(
   components.register('craft:hidden', HiddenControl);
   components.register('craft:text', TextControl);
   components.register('craft:combobox', ComboboxControl);
+  components.register('craft:combobox-create', ComboboxCreateControl);
   components.register('craft:textarea', TextareaControl);
   components.register('craft:lightswitch', LightswitchControl);
   components.register('craft:checkbox', CheckboxControl);
diff --git a/src/Form/Controls/ComboboxCreate.php b/src/Form/Controls/ComboboxCreate.php
new file mode 100644
index 00000000000..c60adb6978f
--- /dev/null
+++ b/src/Form/Controls/ComboboxCreate.php
@@ -0,0 +1,101 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Form\Controls;
+
+use Illuminate\Support\Arr;
+
+/**
+ * A {@see Combobox} with an extra "create a new one" option that opens a slideout at
+ * {@see self::createUrl()} instead of selecting a value directly — the modern equivalent of
+ * legacy's `componentSelect` "Choose ▾ + Create" pairing, for a resource with its own real CP
+ * edit screen (reached at that URL) but no Craft Element identity of its own (so
+ * {@see ElementSelect} doesn't apply).
+ *
+ * The caller builds `options()` as usual, including the trigger option itself (value
+ * {@see self::createValue()}, default `__add__`) — this control only carries the wiring the
+ * client needs to act on it once chosen; it doesn't inject the option itself, the same way
+ * every other Combobox/Choice leaves option-building entirely to the caller.
+ *
+ * On save, the created record is read from the response's {@see self::resultKey()} — matching
+ * the `$modelName` the create screen's own save action passes to
+ * `RespondsWithFlash::asModelSuccess()` — and appended to the option list as the new selection,
+ * using {@see self::labelField()}/{@see self::valueField()} (default `name`/`id`) to build its
+ * label/value.
+ */
+class ComboboxCreate extends Combobox
+{
+    private ?string $createUrl = null;
+
+    private string $createValue = '__add__';
+
+    private string $resultKey = '';
+
+    private string $labelField = 'name';
+
+    private string $valueField = 'id';
+
+    public function component(): string
+    {
+        return 'craft:combobox-create';
+    }
+
+    /** The URL of the resource's own create screen, opened in a slideout. */
+    public function createUrl(?string $createUrl): static
+    {
+        $this->createUrl = $createUrl;
+
+        return $this;
+    }
+
+    /** The option value that opens the create slideout instead of being selected directly. */
+    public function createValue(string $createValue): static
+    {
+        $this->createValue = $createValue;
+
+        return $this;
+    }
+
+    /**
+     * The key the created record is nested under in the save response — the same `$modelName`
+     * the create screen's save action passes to `RespondsWithFlash::asModelSuccess()`.
+     */
+    public function resultKey(string $resultKey): static
+    {
+        $this->resultKey = $resultKey;
+
+        return $this;
+    }
+
+    /** The created record's field to use as the new option's label. Defaults to `name`. */
+    public function labelField(string $labelField): static
+    {
+        $this->labelField = $labelField;
+
+        return $this;
+    }
+
+    /** The created record's field to use as the new option's value. Defaults to `id`. */
+    public function valueField(string $valueField): static
+    {
+        $this->valueField = $valueField;
+
+        return $this;
+    }
+
+    #[\Override]
+    public function props(mixed $value = null): array
+    {
+        return [
+            ...parent::props($value),
+            ...Arr::whereNotNull([
+                'createUrl' => $this->createUrl,
+                'createValue' => $this->createValue,
+                'resultKey' => $this->resultKey ?: null,
+                'labelField' => $this->labelField,
+                'valueField' => $this->valueField,
+            ]),
+        ];
+    }
+}
diff --git a/src/Form/FormControlTypes.php b/src/Form/FormControlTypes.php
index aa5013812d1..01e6480956d 100644
--- a/src/Form/FormControlTypes.php
+++ b/src/Form/FormControlTypes.php
@@ -13,6 +13,7 @@
 use CraftCms\Cms\Form\Controls\Color;
 use CraftCms\Cms\Form\Controls\ColorSelect;
 use CraftCms\Cms\Form\Controls\Combobox;
+use CraftCms\Cms\Form\Controls\ComboboxCreate;
 use CraftCms\Cms\Form\Controls\ConditionBuilder;
 use CraftCms\Cms\Form\Controls\ContentBlock;
 use CraftCms\Cms\Form\Controls\Date;
@@ -59,6 +60,7 @@ class FormControlTypes extends TypeRegistry
         Color::class,
         ColorSelect::class,
         Combobox::class,
+        ComboboxCreate::class,
         ContentBlock::class,
         Date::class,
         DateTime::class,

From f204747333873cc77c2a90a1aa1b92227ff4e3f0 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Wed, 16 Sep 2026 13:20:02 +0100
Subject: [PATCH 07/19] fix change event bug

---
 resources/js/modules/forms/ConditionBuilderControl.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/resources/js/modules/forms/ConditionBuilderControl.vue b/resources/js/modules/forms/ConditionBuilderControl.vue
index dec2592b67d..86fbcdd45d9 100644
--- a/resources/js/modules/forms/ConditionBuilderControl.vue
+++ b/resources/js/modules/forms/ConditionBuilderControl.vue
@@ -17,6 +17,14 @@
 
   const emit = defineEmits<{
     (event: 'update:value', value: ConditionConfig, kind: 'discrete'): void;
+    /**
+     * Never emitted — declared only to stop FieldNode's blanket `@change`
+     * listener from falling through onto `ConditionBuilder`'s own `change`
+     * (its current value, already handled below via `update:value`), which
+     * would otherwise hand `recordChange()` a `ConditionConfig` in place of a
+     * `FormChange` and crash on its missing `path`.
+     */
+    (event: 'change'): void;
   }>();
 
   const errors = computed(() =>

From be18ea97e305ed60e1ca705ab731dd411aba7c74 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Thu, 17 Sep 2026 11:27:13 +0100
Subject: [PATCH 08/19] Add bulk actions to table, allow money field in table
 and allow group component to start expanded

---
 resources/js/common/types/index.ts            |   1 +
 .../modules/editable-table/editable-table.ts  |  49 ++++
 resources/js/modules/editable-table/types.ts  |  14 +-
 resources/js/modules/forms/AdminTableNode.vue | 230 +++++++++++++++++-
 resources/js/modules/forms/GroupNode.vue      |   3 +
 .../templates/_includes/forms/money.twig      |  22 +-
 src/Form/Nodes/Group.php                      |  15 ++
 src/Form/Nodes/Table.php                      |  62 ++++-
 8 files changed, 386 insertions(+), 10 deletions(-)

diff --git a/resources/js/common/types/index.ts b/resources/js/common/types/index.ts
index bd1d1621084..68279f0de21 100644
--- a/resources/js/common/types/index.ts
+++ b/resources/js/common/types/index.ts
@@ -191,6 +191,7 @@ export type EditableTableCellType =
   | 'autosuggest'
   | 'template'
   | 'number'
+  | 'money'
   | 'singleline'
   | 'multiline'
   | 'heading'
diff --git a/resources/js/modules/editable-table/editable-table.ts b/resources/js/modules/editable-table/editable-table.ts
index f5790ef31c0..e6e3ed12578 100644
--- a/resources/js/modules/editable-table/editable-table.ts
+++ b/resources/js/modules/editable-table/editable-table.ts
@@ -3,6 +3,7 @@ import type CraftCombobox from '@craftcms/ui/components/combobox/combobox';
 import type {ComboboxItem} from '@craftcms/ui/components/combobox/combobox';
 import type CraftTextExpander from '@craftcms/ui/components/text-expander/text-expander';
 import '@craftcms/ui/components/text-expander/text-expander';
+import CraftInputMoney from '@craftcms/ui/components/input-money/input-money';
 import {editableTableData, editableTableRowData} from './support';
 import type {
   EditableTableColumn,
@@ -689,6 +690,54 @@ export class EditableTable extends Base<EditableTableSettings> {
               .appendTo($cell);
             break;
 
+          case 'money': {
+            // A stored value is `{value, locale}` — the same shape the
+            // standalone `craft:money` Form Control posts and reads (see
+            // `MoneyControl.vue`) — but a brand-new row's `value` is often
+            // just `''` (from `defaultValues`), so only unwrap the shape when
+            // it's actually there.
+            const moneyValue =
+              value instanceof Object && !Array.isArray(value)
+                ? ((value as Record<string, unknown>).value ?? null)
+                : (value ?? null);
+            const moneyLocale =
+              (value instanceof Object && !Array.isArray(value)
+                ? (value as Record<string, unknown>).locale
+                : undefined) ??
+              col.locale ??
+              'en-US';
+            const money = document.createElement(
+              'craft-input-money'
+            ) as CraftInputMoney;
+            money.name = `${name}[value]`;
+            money.modelValue =
+              moneyValue === null ? '' : String(moneyValue);
+            money.currency = col.currency ?? 'USD';
+            money.locale = String(moneyLocale);
+            if (col.decimals !== undefined) money.decimals = col.decimals;
+            if (col.decimalSeparator !== undefined) {
+              money.decimalSeparator = col.decimalSeparator;
+            }
+            if (col.groupSeparator !== undefined) {
+              money.groupSeparator = col.groupSeparator;
+            }
+            if (col.showCurrency !== undefined) {
+              money.showCurrency = col.showCurrency;
+            }
+            if (col.clearable !== undefined) money.clearable = col.clearable;
+            $cell.append(money);
+            // Posted alongside `${name}[value]`, exactly as `InputMoney::renderSlots()`
+            // does for the standalone control — `cellValue()`'s generic
+            // multi-entry fallback reassembles the two back into one
+            // `{value, locale}` cell value, no special-casing needed there.
+            $('<input/>', {
+              type: 'hidden',
+              name: `${name}[locale]`,
+              value: String(moneyLocale),
+            }).appendTo($cell);
+            break;
+          }
+
           case 'time':
             Craft.ui
               .createTimeInput({
diff --git a/resources/js/modules/editable-table/types.ts b/resources/js/modules/editable-table/types.ts
index 709e5dcf691..b6a600e3465 100644
--- a/resources/js/modules/editable-table/types.ts
+++ b/resources/js/modules/editable-table/types.ts
@@ -27,8 +27,20 @@ export interface EditableTableColumn {
   toggle?: string[];
   /** Auto-populate this column's value (a handle) from another column. */
   autopopulate?: string;
-  /** Number column: locale used for formatting/parsing. */
+  /** Number/money column: locale used for formatting/parsing. */
   locale?: string;
+  /** Money column: ISO currency code (e.g. `USD`). Defaults to `USD`. */
+  currency?: string;
+  /** Money column: fraction digits to allow. Defaults to the currency's own. */
+  decimals?: number;
+  /** Money column: overrides the locale's own decimal separator. */
+  decimalSeparator?: string;
+  /** Money column: overrides the locale's own thousands separator. */
+  groupSeparator?: string;
+  /** Money column: shows the currency code/symbol prefix. Defaults to `true`. */
+  showCurrency?: boolean;
+  /** Money column: shows a clear button once there's a value. Defaults to `true`. */
+  clearable?: boolean;
   [key: string]: EditableTableColumnValue;
 }
 
diff --git a/resources/js/modules/forms/AdminTableNode.vue b/resources/js/modules/forms/AdminTableNode.vue
index 4c24ce3df3c..269c42f65fb 100644
--- a/resources/js/modules/forms/AdminTableNode.vue
+++ b/resources/js/modules/forms/AdminTableNode.vue
@@ -4,12 +4,14 @@
   import {
     type ColumnDef,
     getCoreRowModel,
+    type RowSelectionState,
     useVueTable,
   } from '@tanstack/vue-table';
   import {computed, h, ref, watch} from 'vue';
   import ActionMenu from '@/common/components/ActionMenu.vue';
   import CpLink from '@/common/components/CpLink.vue';
-  import type {ActionItemLink} from '@/common/types';
+  import Text from '@/common/components/Text.vue';
+  import type {ActionItemButton, ActionItemLink} from '@/common/types';
   import Empty from '@/common/components/Empty.vue';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
@@ -41,6 +43,34 @@
     html: string;
   }
 
+  /**
+   * A single bulk-footer action — posts `{ids: <selected row ids>, ...params}` to `url`.
+   * `allowMultiple: false` (default `true`) disables it — as a standalone button, or as a
+   * menu item — whenever more than one row is selected, for an action that only makes sense
+   * against one row at a time (its endpoint has no obligation to reflect that itself; nothing
+   * stops a request with several ids reaching it some other way, so this is a UI nicety, not
+   * a substitute for that endpoint enforcing the same rule server-side).
+   */
+  interface BulkActionSingle {
+    label: string;
+    url: string;
+    params?: Record<string, unknown>;
+    allowMultiple?: boolean;
+  }
+
+  /**
+   * A dropdown of {@link BulkActionSingle}s, shown as one button in the bulk footer. `label`
+   * is optional — omit it (alongside an `icon`) for an icon-only invoker, matching legacy's
+   * own unlabeled gear-icon settings menu for a single, infrequently-needed item.
+   */
+  interface BulkActionMenu {
+    label?: string;
+    icon?: string;
+    items: BulkActionSingle[];
+  }
+
+  type BulkAction = BulkActionSingle | BulkActionMenu;
+
   /**
    * A scalar renders as plain text; `{label, url}` renders as a link (or plain
    * text when `url` is null); a list of those renders several links in one
@@ -95,6 +125,8 @@
       reorderUrl: string | null;
       deleteUrl: string | null;
       deleteConfirmMessage: string | null;
+      bulkDeletable: boolean;
+      bulkActions: BulkAction[];
     }>;
   }>();
 
@@ -138,6 +170,10 @@
     return !Array.isArray(value) && 'html' in value;
   }
 
+  function isBulkActionMenu(action: BulkAction): action is BulkActionMenu {
+    return 'items' in action;
+  }
+
   function renderLink(link: TableLink) {
     return link.url
       ? h(CpLink, {href: link.url, inertia: false}, () => link.label)
@@ -216,6 +252,19 @@
     return cols;
   });
 
+  // Keyed by row id (see `getRowId`) rather than row index, so a selection
+  // survives the optimistic row-removal a delete does. Gated on `bulkDeletable`
+  // (see `Table::deletable()`) or a non-empty `bulkActions` — either turns
+  // selection on; a plain `deleteUrl` alone (no `bulk: true`) wouldn't know
+  // what to do with the `ids` array a bulk request posts.
+  const rowSelection = ref<RowSelectionState>({});
+
+  const hasBulkFooter = computed(
+    () =>
+      (!!props.node.props.deleteUrl && props.node.props.bulkDeletable) ||
+      props.node.props.bulkActions.length > 0
+  );
+
   const table = useVueTable({
     get data() {
       return rows.value;
@@ -223,10 +272,29 @@
     get columns() {
       return columns.value;
     },
+    state: {
+      get rowSelection() {
+        return rowSelection.value;
+      },
+    },
+    getRowId: (row) => String(row.id),
+    // A row opted out of the single-row delete action (`_deletable: false`) is
+    // just as ineligible for any bulk one — there's no separate "excluded from
+    // bulk actions but not delete" flag, so this gate serves both.
+    enableRowSelection: (row) =>
+      hasBulkFooter.value && row.original._deletable !== false,
+    onRowSelectionChange: (updater) => {
+      rowSelection.value =
+        updater instanceof Function ? updater(rowSelection.value) : updater;
+    },
     enableSorting: false,
     getCoreRowModel: getCoreRowModel(),
   });
 
+  const selectedIds = computed(() =>
+    table.getSelectedRowModel().rows.map((row) => row.original.id!)
+  );
+
   function onReorder(startIndex: number, finishIndex: number): void {
     const reordered = [...rows.value];
     const [moved] = reordered.splice(startIndex, 1);
@@ -259,6 +327,65 @@
     refreshForm();
   }
 
+  /**
+   * Deletes every currently-selected row in one request. Posts a real `ids`
+   * array (not the JSON-encoded string `onReorder` posts) — this shares the
+   * same backend action as a single-row {@link deleteRow}, and the legacy
+   * `Craft.VueAdminTable` widget's own bulk delete posted `ids` as a plain
+   * array the same way.
+   */
+  async function deleteSelected(): Promise<void> {
+    const ids = selectedIds.value;
+
+    if (!ids.length) return;
+
+    const message = props.node.props.deleteConfirmMessage ?? t('Are you sure?');
+
+    if (!confirm(message)) {
+      return;
+    }
+
+    await actionClient.post(props.node.props.deleteUrl!, {ids});
+    rows.value = rows.value.filter((r) => !ids.includes(r.id!));
+    table.resetRowSelection();
+    refreshForm();
+  }
+
+  /**
+   * Runs one bulk action (a {@link BulkActionSingle}, whether it stands alone
+   * or was picked from a {@link BulkActionMenu}) against every selected row.
+   * Unlike delete, there's no confirmation step here — none of these actions
+   * are inherently destructive the way delete is, so `Table::bulkActions()`
+   * doesn't carry a per-action confirm message.
+   */
+  async function performBulkAction(action: BulkActionSingle): Promise<void> {
+    const ids = selectedIds.value;
+
+    if (!ids.length) return;
+    // Belt-and-braces alongside the disabled button/menu item below — the
+    // control shouldn't be reachable in this state, but this is what actually
+    // stops the request if it somehow is.
+    if (action.allowMultiple === false && ids.length > 1) return;
+
+    await actionClient.post(action.url, {ids, ...action.params});
+    table.resetRowSelection();
+    refreshForm();
+  }
+
+  function bulkActionDisabled(action: BulkActionSingle): boolean {
+    return action.allowMultiple === false && selectedIds.value.length > 1;
+  }
+
+  /** Adapts a menu action's items to `ActionMenu`'s item shape. */
+  function bulkActionMenuItems(menu: BulkActionMenu): ActionItemButton[] {
+    return menu.items.map((item) => ({
+      type: 'button',
+      label: item.label,
+      disabled: bulkActionDisabled(item),
+      onClick: () => performBulkAction(item),
+    }));
+  }
+
   // This Node's data is set once, from the page's own initial render — not read from a
   // live-fetching endpoint the way an element index table is — so a mutation only updates
   // this component's own local `rows`. Other props derived from the same server-side state
@@ -302,12 +429,113 @@
       <AdminTable
         :table="table"
         :reorderable="!!node.props.reorderUrl"
+        :selectable="hasBulkFooter"
         @reorder="onReorder"
       >
         <template #empty-row>
           <Empty :label="node.props.emptyMessage ?? t('Nothing to show.')" />
         </template>
       </AdminTable>
+
+      <!--
+        The element index's own footer (`BaseElementIndex.vue`, reached via
+        `AdminTable`) never renders here: it needs `from`/`to`/`total` props
+        this component doesn't pass (nothing paginates a Table Node's data —
+        every row is always on the one page), and its selection/bulk-action
+        row (`BulkActionsBar`) is wired to real Craft elements end to end
+        (`PerformElementActionController` resolves an `ElementQuery` and a
+        registered `ElementAction` — there's no fitting either into it for
+        these plain PHP-object rows). This replicates just its appearance —
+        same background, border, and copy — driven by this component's own
+        `rows`/`selectedIds` instead.
+      -->
+      <div v-if="rows.length" class="admin-table-footer">
+        <template v-if="selectedIds.length">
+          <Text
+            as="span"
+            class="admin-table-footer__count"
+            template="{count, plural, =1{# selected} other{# selected}}"
+            :params="{count: selectedIds.length}"
+          />
+          <craft-button
+            type="button"
+            variant="plain"
+            size="small"
+            @click="table.resetRowSelection()"
+            >{{ t('Clear selection') }}</craft-button
+          >
+          <div class="admin-table-footer__actions">
+            <template
+              v-for="(action, index) in node.props.bulkActions"
+              :key="index"
+            >
+              <ActionMenu
+                v-if="isBulkActionMenu(action)"
+                :actions="bulkActionMenuItems(action)"
+                :icon="action.icon"
+                :label="action.label || undefined"
+              >
+                <!--
+                  Omitted (rather than `v-if="action.label"` around the button
+                  alone) when there's no label, so ActionMenu's own default
+                  invoker — an icon-only button, already accessible via its own
+                  `label` prop above — renders instead of an empty one here.
+                -->
+                <template v-if="action.label" #invoker="{attributes}">
+                  <craft-button type="button" size="small" v-bind="attributes">
+                    {{ action.label }}
+                    <craft-icon name="chevron-down" slot="suffix"></craft-icon>
+                  </craft-button>
+                </template>
+              </ActionMenu>
+              <craft-button
+                v-else
+                type="button"
+                size="small"
+                :disabled="bulkActionDisabled(action)"
+                @click="performBulkAction(action)"
+                >{{ action.label }}</craft-button
+              >
+            </template>
+            <craft-button
+              v-if="node.props.deleteUrl && node.props.bulkDeletable"
+              type="button"
+              variant="danger"
+              size="small"
+              @click="deleteSelected"
+              >{{ t('Delete') }}</craft-button
+            >
+          </div>
+        </template>
+        <Text
+          v-else
+          as="span"
+          template="{from} – {to} of {total, plural, =1{# item} other{# items}}"
+          :params="{from: 1, to: rows.length, total: rows.length}"
+        />
+      </div>
     </craft-pane>
   </div>
 </template>
+
+<style scoped lang="scss">
+  .admin-table-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--c-spacing-sm);
+    background-color: var(--c-color-neutral-fill-quiet);
+    padding: var(--c-spacing-md);
+    border-block-start: 1px solid var(--c-color-neutral-border-quiet);
+  }
+
+  .admin-table-footer__count {
+    font-weight: 600;
+  }
+
+  .admin-table-footer__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--c-spacing-sm);
+    margin-inline-start: auto;
+  }
+</style>
diff --git a/resources/js/modules/forms/GroupNode.vue b/resources/js/modules/forms/GroupNode.vue
index daa65751e61..cd08f889ad3 100644
--- a/resources/js/modules/forms/GroupNode.vue
+++ b/resources/js/modules/forms/GroupNode.vue
@@ -13,6 +13,8 @@
   type GroupNodeProps = {
     label?: string | null;
     collapsible?: boolean;
+    /** Starts a collapsible group open. Meaningless (and never sent) otherwise. */
+    expanded?: boolean;
     /** Renders the group as one field rather than a section — see `Nodes\Group`. */
     asField?: boolean;
     instructions?: string | null;
@@ -99,6 +101,7 @@
     v-else
     :is="node.props.collapsible ? 'craft-disclosure' : 'fieldset'"
     :label="node.props.collapsible ? node.props.label : undefined"
+    :opened="node.props.collapsible ? node.props.expanded || undefined : undefined"
     :class="{
       [`width-${node.props.width}`]: Boolean(node.props.width),
       hidden: Boolean(node.props.hidden),
diff --git a/resources/templates/_includes/forms/money.twig b/resources/templates/_includes/forms/money.twig
index d450ddef06d..207f592c2ee 100644
--- a/resources/templates/_includes/forms/money.twig
+++ b/resources/templates/_includes/forms/money.twig
@@ -24,15 +24,33 @@
   decimals: decimals,
   }|merge(jsSettings ?? {}) %}
 
-{{ hiddenInput("#{name}[locale]", formattingLocale) }}
-
+{#
+  Everything renders inside one root element on purpose: the surrounding `craft-field`
+  assigns its `input` slot by setting the `slot` attribute directly on this template's first
+  (and, for a correct render, only) top-level tag (see `ViewComponent::slotted()`) rather than
+  wrapping it — a wrapper would break `craft-input-money`'s own styling assumptions elsewhere.
+  The hidden locale input used to be its own sibling ahead of this div; with two top-level
+  elements, the slot attribute landed on the hidden input instead of the visible one, leaving
+  the actual money input (and everything else in here) unslotted and invisible.
+#}
 <div class="money-container">
+    {{ hiddenInput("#{name}[locale]", formattingLocale) }}
     {% if currencyLabel and showCurrency ?? true %}
         <div class="money-currency-label">
             <span>{{ currencyLabel }}</span>
         </div>
     {% endif %}
+    {#
+      `name` must be passed explicitly here, not just folded into `inputAttributes` above:
+      `text.twig`'s underlying `FormFields::textFromConfig()` sets the actual rendered
+      `<input>` name from the config's own top-level `name` key via a dedicated `->name()`
+      call, separate from (and taking priority over) whatever `inputAttributes['name']`
+      holds. Without this, `{% include %}`'s implicit scope inheritance (no `only`) leaks
+      this template's own ambient `name` (e.g. `baseRate`) through untouched, so the
+      rendered input posts as a plain scalar instead of `{name}[value]`.
+    #}
     {% include '_includes/forms/text' with {
+        name: inputAttributes.name,
         inputAttributes: inputAttributes,
     } %}
     {% if showClear %}
diff --git a/src/Form/Nodes/Group.php b/src/Form/Nodes/Group.php
index 0c6d9db55a2..847fb5df461 100644
--- a/src/Form/Nodes/Group.php
+++ b/src/Form/Nodes/Group.php
@@ -49,6 +49,8 @@ class Group extends Container
 
     private bool $collapsible = false;
 
+    private bool $expanded = false;
+
     private bool $asField = false;
 
     private ?string $instructions = null;
@@ -113,6 +115,18 @@ public function collapsible(bool $collapsible = true): static
         return $this;
     }
 
+    /**
+     * Starts a {@see self::collapsible()} group open rather than collapsed — e.g. an
+     * "Advanced" section whose fields already hold a value worth surfacing right away.
+     * Ignored (and never sent to the client) when the group isn't collapsible at all.
+     */
+    public function expanded(bool $expanded = true): static
+    {
+        $this->expanded = $expanded;
+
+        return $this;
+    }
+
     /**
      * Renders the group as one field rather than a section — see the class
      * docblock. Takes precedence over {@see self::collapsible()}.
@@ -184,6 +198,7 @@ public function props(): array
         return [
             'label' => $this->label,
             ...($this->collapsible && ! $this->asField ? ['collapsible' => true] : []),
+            ...($this->collapsible && ! $this->asField && $this->expanded ? ['expanded' => true] : []),
             ...($this->asField ? ['asField' => true] : []),
             ...Arr::whereNotNull([
                 'instructions' => $this->instructions,
diff --git a/src/Form/Nodes/Table.php b/src/Form/Nodes/Table.php
index 417de25b642..059fb71908b 100644
--- a/src/Form/Nodes/Table.php
+++ b/src/Form/Nodes/Table.php
@@ -46,6 +46,11 @@ class Table implements Node
 
     private ?string $deleteConfirmMessage = null;
 
+    private bool $bulkDeletable = false;
+
+    /** @var list<array<string, mixed>> */
+    private array $bulkActions = [];
+
     public function __construct(private readonly string $uid) {}
 
     public static function make(string $uid): self
@@ -132,11 +137,54 @@ public function reorderable(string $url): static
     /**
      * Adds a per-row delete action, posting `{id: <row id>}` to `$url`. Individual rows can
      * opt out via `_deletable => false` in {@see rows()}.
+     *
+     * `$bulk` additionally renders a row-selection checkbox column and a "N selected" bar with
+     * its own bulk delete button, posting `{ids: <row ids>}` to the same `$url` — set it only
+     * when that action genuinely handles an `ids` array alongside a single `id` (mirroring the
+     * legacy dual `id`/`ids` contract some of these actions still carry). Leave it `false`
+     * (the default) for an action that only understands `id`; turning bulk selection on for
+     * one of those doesn't add a client-side capability so much as start sending it requests
+     * it will reject.
      */
-    public function deletable(string $url, ?string $confirmMessage = null): static
+    public function deletable(string $url, ?string $confirmMessage = null, bool $bulk = false): static
     {
         $this->deleteUrl = $url;
         $this->deleteConfirmMessage = $confirmMessage;
+        $this->bulkDeletable = $bulk;
+
+        return $this;
+    }
+
+    /**
+     * Adds bulk action buttons to the selection footer (shown once at least one row is
+     * selected, alongside "Clear selection" and — if the table is {@see deletable()} with
+     * `bulk: true` — a trailing "Delete" button). Every action posts `{ids: <selected row
+     * ids>, ...params}` to its own `url`; there's no client-side notion of what the action
+     * does beyond that; the endpoint owns applying it and returning a normal flash response.
+     *
+     * Each entry in `$actions` is either:
+     * - a single action: `['label' => string, 'url' => string, 'params'? => array<string,
+     *   mixed>, 'allowMultiple'? => bool]` — `params` is merged into the posted body
+     *   alongside `ids`; `allowMultiple` (default `true`) disables the button whenever more
+     *   than one row is selected, for an action that only makes sense against one row at a
+     *   time (a UI nicety only — the endpoint still gets whatever `ids` a request carries,
+     *   and is responsible for enforcing that itself if it matters).
+     * - a dropdown menu of single actions in the same shape: `['label'? => string, 'icon'? =>
+     *   string, 'items' => list<array{label: string, url: string, params?: array<string,
+     *   mixed>, allowMultiple?: bool}>]`. Omit `label` (pairing it with an `icon`) for an
+     *   icon-only invoker — the button shows just that icon, no visible text — matching
+     *   legacy's own unlabeled gear-icon menu for a single, infrequently-needed item (e.g.
+     *   shipping categories' "Set Default Category").
+     *
+     * Reaches for a row-selection checkbox column the same way `deletable(..., bulk: true)`
+     * does — either one turns selection on; a table with both just contributes its own
+     * button(s) to the same footer.
+     *
+     * @param  list<array<string, mixed>>  $actions
+     */
+    public function bulkActions(array $actions): static
+    {
+        $this->bulkActions = $actions;
 
         return $this;
     }
@@ -171,11 +219,11 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
                 ? Html::a(Html::encode($link['label']), $link['url'])
                 : Html::encode($link['label']);
 
-            // Reordering and deleting are inherently interactive (drag handles, confirmation
-            // dialogs, CSRF-protected requests) with no sensible plain-HTML equivalent, so this
-            // fallback renders a menu's links inline but otherwise omits those two affordances —
-            // consistent with the rest of the CP treating this renderer as JS-less read access,
-            // not a full replacement for the Vue control.
+            // Reordering, deleting, and bulk actions are inherently interactive (drag handles,
+            // confirmation dialogs, row selection, CSRF-protected requests) with no sensible
+            // plain-HTML equivalent, so this fallback renders a menu's links inline but
+            // otherwise omits those affordances — consistent with the rest of the CP treating
+            // this renderer as JS-less read access, not a full replacement for the Vue control.
             $renderCell = function(array $column, array $row) use ($renderLink): string {
                 $value = $row[$column['key']] ?? '';
 
@@ -250,6 +298,8 @@ public function props(): array
             'reorderUrl' => $this->reorderUrl,
             'deleteUrl' => $this->deleteUrl,
             'deleteConfirmMessage' => $this->deleteConfirmMessage,
+            'bulkDeletable' => $this->bulkDeletable,
+            'bulkActions' => $this->bulkActions,
         ];
     }
 

From 4d48c6984f8c5400b561c9a159cc8cd8357a3ecb Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Thu, 17 Sep 2026 14:01:56 +0100
Subject: [PATCH 09/19] Allow hidden tables rows and reactivity

---
 .../src/components/callout/callout.styles.ts  | 13 +++++++
 .../src/components/callout/callout.ts         |  7 ++++
 resources/js/common/types/index.ts            | 29 +++++++++++++++
 .../modules/editable-table/editable-table.ts  |  7 ++++
 resources/js/modules/editable-table/types.ts  |  6 ++++
 resources/js/modules/forms/CalloutNode.vue    |  6 +++-
 resources/js/modules/forms/FieldNode.vue      | 10 +++++-
 resources/js/modules/forms/TableControl.vue   |  9 ++++-
 .../settings/composables/useSettingsSave.ts   |  8 +++--
 resources/js/pages/Form.vue                   | 36 ++++++++++++++++++-
 .../_includes/forms/editableTable.twig        |  2 +-
 src/Form/Controls/Table.php                   | 26 ++++++++++++++
 src/Form/Nodes/Callout.php                    | 15 ++++++++
 src/Form/Nodes/Field.php                      |  7 ++++
 14 files changed, 174 insertions(+), 7 deletions(-)

diff --git a/packages/craftcms-ui/src/components/callout/callout.styles.ts b/packages/craftcms-ui/src/components/callout/callout.styles.ts
index 6789b5961e7..717bb6005ab 100644
--- a/packages/craftcms-ui/src/components/callout/callout.styles.ts
+++ b/packages/craftcms-ui/src/components/callout/callout.styles.ts
@@ -28,6 +28,19 @@ export default css`
     align-items: start;
     padding: var(--_callout-padding-block) var(--_callout-padding-inline);
     border: 1px solid transparent;
+    /*
+      Spans the full width of a surrounding <craft-field-group> grid. A
+      block-level Form Node can rely on that grid's own \`craft-field-group >
+      *\` default (or a \`width-*\` class) for this, but \`:host\` here is
+      \`display: contents\` — grid placement given to the *host* has no box to
+      apply to, so the grid falls back to auto-placing this shadow-rendered
+      box on its own, one column wide, unless it claims its own span here.
+      Every current Callout usage is full-width (no narrower \`width-*\`
+      variant exists yet), so this is unconditional rather than keyed off a
+      host class. Harmless outside a grid parent — \`grid-column\` is simply
+      inert there.
+    */
+    grid-column: 1 / -1;
   }
 
   .callout--hide-icon {
diff --git a/packages/craftcms-ui/src/components/callout/callout.ts b/packages/craftcms-ui/src/components/callout/callout.ts
index 3312734e943..6d72467a676 100644
--- a/packages/craftcms-ui/src/components/callout/callout.ts
+++ b/packages/craftcms-ui/src/components/callout/callout.ts
@@ -13,6 +13,13 @@ import {styleMap} from 'lit/directives/style-map.js';
  * @summary A boxed message: an optional icon, an optional title, body content,
  * and an optional trailing action.
  *
+ * The host is `display: contents` (see `callout.styles`) so it never adds an
+ * unstyled wrapper box of its own — but that means a surrounding CSS Grid
+ * (e.g. `<craft-field-group>`'s `width-*` classes) can't size the *host*: with
+ * no box of its own, the host's own grid placement is inert, and the grid
+ * instead auto-places whatever the shadow root renders one column at a time.
+ * `.callout` spans the full grid itself to compensate — see its own rule.
+ *
  * @attr size - `small` steps the box down to `--c-text-sm` and tightens the gap
  *   between the icon and the text. Defaults to `auto`, which leaves the callout
  *   at the surrounding text size. Note this is type only — the padding below is
diff --git a/resources/js/common/types/index.ts b/resources/js/common/types/index.ts
index 68279f0de21..a39ee40816e 100644
--- a/resources/js/common/types/index.ts
+++ b/resources/js/common/types/index.ts
@@ -1,5 +1,6 @@
 import type {ActionFeedback, BaseAction, VariantKey} from '@craftcms/ui';
 import type {ComboboxOptionData} from '@craftcms/ui/components/combobox/combobox';
+import type {UrlMethodPair} from '@inertiajs/core';
 import type {Component} from 'vue';
 import type {FormValues} from '@/modules/forms/types';
 
@@ -123,10 +124,38 @@ export type ActionItem =
 
 export type ActionItems = Array<ActionItem>;
 
+/**
+ * A server-described alternate form action — the `Form` page's counterpart to
+ * `\CraftCms\Cms\Http\Responses\CpScreenResponse::addAltAction()` ("Save as a
+ * new X", "Delete", …). Unlike a plain {@link ActionItemButton}, this carries
+ * no client-side `onClick` (it's plain JSON from the server) — `Form.vue`
+ * translates each one into a real action that resubmits the form's *current*
+ * in-progress values to `action` (default POST to the screen's own submit
+ * method) instead of firing an isolated request.
+ */
+export interface FormAltAction {
+  label: string;
+  /** Renders the action as destructive (e.g. a "Delete"). */
+  destructive?: boolean;
+  /** Defaults to the screen's own submit action when omitted. */
+  action?: string;
+  /** Extra values merged into the posted payload alongside the form's own. */
+  params?: FormValues;
+  /** A confirmation message shown (native `confirm()`) before submitting. */
+  confirm?: string;
+}
+
 export interface FormSaveOptions {
   redirect?: boolean;
   data?: FormValues;
   preserveState?: boolean;
+  /**
+   * Submits to a different destination than the screen's own default
+   * `submit` target — e.g. an alternate form action posting the same
+   * in-progress values elsewhere ("Save as a new X", "Delete"). Omit to use
+   * the screen's own action.
+   */
+  action?: UrlMethodPair;
 }
 
 export interface EntryType {
diff --git a/resources/js/modules/editable-table/editable-table.ts b/resources/js/modules/editable-table/editable-table.ts
index e6e3ed12578..5058f19aa50 100644
--- a/resources/js/modules/editable-table/editable-table.ts
+++ b/resources/js/modules/editable-table/editable-table.ts
@@ -588,8 +588,15 @@ export class EditableTable extends Base<EditableTableSettings> {
   ): any {
     void staticRows;
 
+    // `_hidden` is a reserved row key, not a declared column — same principle
+    // `HasVisibility` documents for whole Field/Group nodes: the row's own cells stay
+    // real inputs (still posting, still holding whatever was typed) rather than being
+    // omitted, so the caller can toggle it back without losing anything. Both the
+    // `hidden` attribute and the class are set, matching that same convention, since
+    // some hosts override the UA `[hidden]` rule.
     const $tr = $('<tr/>', {
       'data-id': rowId,
+      ...(values._hidden ? {hidden: true, class: 'hidden'} : {}),
     });
 
     for (const colId in columns) {
diff --git a/resources/js/modules/editable-table/types.ts b/resources/js/modules/editable-table/types.ts
index b6a600e3465..d2fcc820032 100644
--- a/resources/js/modules/editable-table/types.ts
+++ b/resources/js/modules/editable-table/types.ts
@@ -52,6 +52,12 @@ export type EditableTableValue =
   | EditableTableValue[]
   | EditableTableRow;
 
+/**
+ * `_hidden` is a reserved key (not a declared column, so it never renders as a
+ * cell): hides the row (`hidden` attribute + class) without removing it — its
+ * cells stay real inputs, still posting whatever they hold, so a caller can
+ * toggle it back off without losing anything already typed.
+ */
 export interface EditableTableRow {
   [key: string]: EditableTableValue;
 }
diff --git a/resources/js/modules/forms/CalloutNode.vue b/resources/js/modules/forms/CalloutNode.vue
index 7f8a07679f5..e8140dbb7e7 100644
--- a/resources/js/modules/forms/CalloutNode.vue
+++ b/resources/js/modules/forms/CalloutNode.vue
@@ -9,6 +9,7 @@
       html: string;
       variant: string;
       appearance?: string;
+      padding?: string | number;
       icon?: string;
       dismissible: boolean;
       width: number;
@@ -35,7 +36,10 @@
     :class="`width-${node.props.width}`"
     :data-form-node="node.uid"
     :variant="node.props.variant"
-    v-bind="node.props.appearance ? {appearance: node.props.appearance} : {}"
+    v-bind="{
+      ...(node.props.appearance ? {appearance: node.props.appearance} : {}),
+      ...(node.props.padding !== undefined ? {padding: node.props.padding} : {}),
+    }"
     :icon="node.props.icon"
     :data-dismissible="node.props.dismissible || undefined"
   >
diff --git a/resources/js/modules/forms/FieldNode.vue b/resources/js/modules/forms/FieldNode.vue
index 5f809aefdea..40ff0c4f03a 100644
--- a/resources/js/modules/forms/FieldNode.vue
+++ b/resources/js/modules/forms/FieldNode.vue
@@ -36,6 +36,7 @@
     /** Visually hides the label, keeping it available to screen readers. */
     labelSrOnly?: boolean;
     instructions?: string | null;
+    instructionsHtml?: string;
     required?: boolean;
     instructionsPosition?: 'before' | 'after';
     tip?: string;
@@ -188,7 +189,9 @@
   <craft-field
     :label="node.props.label ?? undefined"
     :label-sr-only="node.props.labelSrOnly || undefined"
-    :help-text="node.props.instructions ?? undefined"
+    :help-text="
+      node.props.instructionsHtml ? undefined : (node.props.instructions ?? undefined)
+    "
     :instructions-position="node.props.instructionsPosition"
     :required="Boolean(node.props.required)"
     :readonly="control.mode === 'readOnly'"
@@ -216,6 +219,11 @@
         @change="onChange"
       />
     </div>
+    <span
+      v-if="node.props.instructionsHtml"
+      slot="help-text"
+      v-html="node.props.instructionsHtml"
+    />
     <span v-if="node.props.tipHtml" slot="tip" v-html="node.props.tipHtml" />
     <span
       v-if="node.props.warningHtml"
diff --git a/resources/js/modules/forms/TableControl.vue b/resources/js/modules/forms/TableControl.vue
index cb31004f829..91e067a090d 100644
--- a/resources/js/modules/forms/TableControl.vue
+++ b/resources/js/modules/forms/TableControl.vue
@@ -19,6 +19,7 @@
     minRows?: number;
     maxRows?: number;
     keyed?: boolean;
+    hiddenRows?: string[];
     errors?: Record<string, Record<string, true>>;
   };
   type TableRow = EditableTableRow;
@@ -88,11 +89,17 @@
     const name = inputName(props.control.path);
     bodyElement.replaceChildren();
     rowEntries(rows).forEach(([rowId, row]) => {
+      // `hiddenRows` is a control *prop*, not part of the row's own value — see
+      // `Table::hiddenRows()` for why: props are freshly reapplied on every reactive
+      // refresh, unlike row values (only ever merged in where missing).
+      const rowWithVisibility = props.control.props.hiddenRows?.includes(rowId)
+        ? {...row, _hidden: true}
+        : row;
       EditableTable.createRow(
         rowId,
         props.control.props.columns,
         name,
-        row,
+        rowWithVisibility,
         props.editable && props.control.props.allowReorder,
         props.editable && props.control.props.allowDelete,
         !props.editable
diff --git a/resources/js/modules/settings/composables/useSettingsSave.ts b/resources/js/modules/settings/composables/useSettingsSave.ts
index 86ad137fd3a..4e6519224bb 100644
--- a/resources/js/modules/settings/composables/useSettingsSave.ts
+++ b/resources/js/modules/settings/composables/useSettingsSave.ts
@@ -87,6 +87,10 @@ export function useSettingsSave<T extends object>(
     // Callers can opt out of state preservation — e.g. "save as new", which
     // navigates to a different record and needs the form to re-initialize.
     preserveState = true,
+    // An alternate form action ("Save as a new X", "Delete") posting the
+    // same in-progress values to a different destination than this screen's
+    // own default `submit` target.
+    action: actionOverride,
   }: FormSaveOptions = {}) {
     options.onBeforeSave?.();
 
@@ -109,7 +113,7 @@ export function useSettingsSave<T extends object>(
      * usual 422 — `asJsonFailure()` picks it.
      */
     async function submitInSlideout(retried = false): Promise<void> {
-      const route = action();
+      const route = actionOverride ?? action();
       const routeIsString = Object(route).constructor === String;
 
       form.clearErrors();
@@ -226,7 +230,7 @@ export function useSettingsSave<T extends object>(
 
           return payload;
         })
-        .submit(action(), {
+        .submit(actionOverride ?? action(), {
           ...submitOptions,
           onHttpException: (response) => {
             if (!passwordConfirmation || response.status !== 423 || retried) {
diff --git a/resources/js/pages/Form.vue b/resources/js/pages/Form.vue
index c22bb0cdd4e..d25813023bd 100644
--- a/resources/js/pages/Form.vue
+++ b/resources/js/pages/Form.vue
@@ -2,7 +2,7 @@
   import {actionClient} from '@craftcms/ui';
   import type {UrlMethodPair} from '@inertiajs/core';
   import {useForm} from '@inertiajs/vue3';
-  import {shallowRef, toRaw} from 'vue';
+  import {computed, shallowRef, toRaw} from 'vue';
   import {
     useAppLayout,
     type UseAppLayoutOptions,
@@ -10,6 +10,7 @@
   import DynamicHtmlRenderer from '@/common/components/DynamicHtmlRenderer.vue';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
   import FormRenderer from '@/modules/forms/FormRenderer.vue';
+  import type {ActionItem, FormAltAction} from '@/common/types';
   import type {
     FormChange,
     FormChangeKind,
@@ -34,6 +35,12 @@
     elevatedFields?: string[] | '*';
     refreshUrl?: string;
     defaultFormActions?: UseAppLayoutOptions['defaultFormActions'];
+    /**
+     * Server-described alternate form actions ("Save as a new X", "Delete") —
+     * see {@link FormAltAction}. Each resubmits the form's current values via
+     * this same component's own `save()`, just aimed at a different action.
+     */
+    formActions?: FormAltAction[];
     /**
      * Server-rendered read-only metadata (e.g. Created at/Updated at) for the details
      * column — the same {@see \CraftCms\Cms\Cp\Html\ContentHtml::metadataHtml()} markup
@@ -89,12 +96,39 @@
       }).save
     : undefined;
 
+  // Each server-described alt action becomes a real `ActionItemButton`, whose
+  // `onClick` reuses this component's own `save()` — the only place that has
+  // both the in-progress values (`renderer.value?.currentValues()`, via
+  // `save`'s own `transform` above) and the confirm/redirect machinery
+  // already built for the primary Save button. This is the piece `formActions`
+  // itself can't carry: it's plain JSON from the server, not a closure.
+  const translatedFormActions = computed<ActionItem[]>(
+    () =>
+      props.formActions?.map((altAction) => ({
+        label: altAction.label,
+        variant: altAction.destructive ? 'danger' : undefined,
+        onClick: () => {
+          if (altAction.confirm && !window.confirm(altAction.confirm)) {
+            return;
+          }
+
+          save?.({
+            action: altAction.action
+              ? {url: altAction.action, method: 'post'}
+              : undefined,
+            data: altAction.params,
+          });
+        },
+      })) ?? []
+  );
+
   // `PageScreen` shows the Save button purely on `form` being truthy (`v-if="form"`) —
   // it doesn't look at `onSave`/`submit`. Passing `inertiaForm` unconditionally would
   // show a Save button with nothing to save on a node-only screen (a listing, say).
   useAppLayout({
     form: props.submit ? inertiaForm : null,
     defaultFormActions: props.defaultFormActions,
+    formActions: translatedFormActions.value,
     onSave: save,
   });
 
diff --git a/resources/templates/_includes/forms/editableTable.twig b/resources/templates/_includes/forms/editableTable.twig
index 5c3a4aa68f7..31cae5e511c 100644
--- a/resources/templates/_includes/forms/editableTable.twig
+++ b/resources/templates/_includes/forms/editableTable.twig
@@ -113,7 +113,7 @@
         {% set rowNumber = loop.index %}
         {% set rowName = 'Row {index}'|t('app', {index: rowNumber}) %}
         {% set actionBtnLabel = "#{rowName} #{'Actions'|t('app')}" %}
-        <tr data-id="{{ rowId }}">
+        <tr data-id="{{ rowId }}"{% if rowId in (hiddenRows ?? []) %} hidden class="hidden"{% endif %}>
           {% for colId, col in cols %}
             {% set cell = row[colId] is defined ? row[colId] : (defaultValues[colId] ?? null) %}
             {% set value = cell.value is defined ? cell.value : cell %}
diff --git a/src/Form/Controls/Table.php b/src/Form/Controls/Table.php
index c6bea10285a..6d3bc9ab266 100644
--- a/src/Form/Controls/Table.php
+++ b/src/Form/Controls/Table.php
@@ -31,6 +31,9 @@ class Table extends Control
 
     private bool $keyed = false;
 
+    /** @var list<string> */
+    private array $hiddenRows = [];
+
     /** @var array<string, array<string, true>> */
     private array $errors = [];
 
@@ -51,6 +54,7 @@ public static function renderHtml(ControlPayload $control, mixed $value, array $
             'minRows' => $control->props['minRows'] ?? null,
             'maxRows' => $control->props['maxRows'] ?? null,
             'static' => $attributes['name'] === null,
+            'hiddenRows' => $control->props['hiddenRows'] ?? [],
             'errors' => $control->props['errors'] ?? [],
         ]);
     }
@@ -110,6 +114,27 @@ public function keyed(bool $keyed = true): static
         return $this;
     }
 
+    /**
+     * Hides the given rows (by their row key — a shipping category id, say) without
+     * removing them: their cells stay real inputs, still posting whatever they hold, so a
+     * caller can stop hiding a row later without losing anything already typed in it —
+     * the same principle {@see \CraftCms\Cms\Form\Nodes\Concerns\HasVisibility} documents
+     * for whole Field/Group nodes.
+     *
+     * Deliberately a Control *prop* rather than part of each row's own value: props are
+     * always freshly reapplied on a reactive refresh, whereas row-level values are only
+     * ever merged in where missing (so an already-known row can't be updated this way
+     * without touching real submitted data).
+     *
+     * @param  list<string>  $rowIds
+     */
+    public function hiddenRows(array $rowIds): static
+    {
+        $this->hiddenRows = $rowIds;
+
+        return $this;
+    }
+
     /** @param array<string, array<string, true>> $errors */
     public function errors(array $errors): static
     {
@@ -136,6 +161,7 @@ public function props(mixed $value = null): array
             'minRows' => $this->minRows,
             'maxRows' => $this->maxRows,
             'keyed' => $this->keyed,
+            'hiddenRows' => $this->hiddenRows ?: null,
             'errors' => $this->errors ?: null,
         ]);
     }
diff --git a/src/Form/Nodes/Callout.php b/src/Form/Nodes/Callout.php
index 5b2f012cd18..9fb6a405474 100644
--- a/src/Form/Nodes/Callout.php
+++ b/src/Form/Nodes/Callout.php
@@ -23,6 +23,8 @@ class Callout implements Node
 
     private ?string $appearance = null;
 
+    private string|int|null $padding = null;
+
     private ?string $icon = null;
 
     private bool $dismissible = false;
@@ -40,6 +42,7 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
             ->variant($node->props['variant'])
             ->appearance($node->props['appearance'] ?? null)
             ->icon($node->props['icon'] ?? null)
+            ->padding($node->props['padding'] ?? null)
             ->content(new HtmlString($node->props['html']))
             ->attributes([
                 'class' => ["width-{$node->props['width']}"],
@@ -68,6 +71,17 @@ public function appearance(?string $appearance): static
         return $this;
     }
 
+    /**
+     * Spacing applied to the callout box — see `craft-callout`'s own `padding` attribute
+     * (`sm`/`md`/`lg`/`xl`, `0`/`none`, a unitless pixel number, or any CSS length).
+     */
+    public function padding(string|int|null $padding): static
+    {
+        $this->padding = $padding;
+
+        return $this;
+    }
+
     public function icon(?string $icon): static
     {
         $this->icon = $icon;
@@ -108,6 +122,7 @@ public function props(): array
                 'appearance' => $this->appearance,
                 'icon' => $this->icon,
             ], fn (?string $value): bool => $value !== null),
+            ...($this->padding !== null ? ['padding' => $this->padding] : []),
             'dismissible' => $this->dismissible,
             'width' => $this->width,
         ];
diff --git a/src/Form/Nodes/Field.php b/src/Form/Nodes/Field.php
index 6a9ac707da5..7b917d77ea0 100644
--- a/src/Form/Nodes/Field.php
+++ b/src/Form/Nodes/Field.php
@@ -125,6 +125,12 @@ public function labelSrOnly(bool $labelSrOnly = true): static
         return $this;
     }
 
+    /**
+     * Supports the same markdown as `tip()`/`warning()` — including a raw
+     * inline tag like `<a href="...">` (preserved by the same
+     * {@see self::noticeHtml()} pass those use), unlike a plain-text field
+     * whose instructions never go through markdown parsing at all.
+     */
     public function instructions(?string $instructions): static
     {
         $this->instructions = $instructions;
@@ -237,6 +243,7 @@ public function props(): array
             ...Arr::whereNotNull([
                 'labelSrOnly' => $this->labelSrOnly ?: null,
                 'instructionsPosition' => $this->instructionsPosition !== 'before' ? $this->instructionsPosition : null,
+                'instructionsHtml' => $this->noticeHtml($this->instructions),
                 'tip' => $this->tip,
                 'tipHtml' => $this->noticeHtml($this->tip),
                 'warning' => $this->warning,

From 97d3c8100aaafb6efc3acb40773586419db25973 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Thu, 17 Sep 2026 22:23:49 +0100
Subject: [PATCH 10/19] Update create combo to allow multi select

---
 .../src/components/combobox/combobox.ts       | 10 ++++++-
 .../modules/forms/ComboboxCreateControl.vue   | 27 +++++++++++++++---
 resources/js/modules/forms/combobox-create.ts | 28 +++++++++++++++++--
 src/Form/Controls/Combobox.php                | 26 +++++++++++++++--
 4 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/packages/craftcms-ui/src/components/combobox/combobox.ts b/packages/craftcms-ui/src/components/combobox/combobox.ts
index e56f33910bb..8ec17fc8ca3 100644
--- a/packages/craftcms-ui/src/components/combobox/combobox.ts
+++ b/packages/craftcms-ui/src/components/combobox/combobox.ts
@@ -641,7 +641,15 @@ export default class CraftCombobox extends LionCombobox {
     }
   }
 
-  private changeValues(values: string[]) {
+  /**
+   * Commits a new set of selected values for a multi-select combobox — resets the free-text
+   * query, closes the listbox, re-renders options, syncs the hidden native inputs used for real
+   * form submission, and announces the change. `protected` (not `private`) so a subclass that
+   * needs to inject a value outside the normal option-click/keyboard paths (e.g.
+   * {@link CraftComboboxCreate} appending a freshly-created record's option) can reuse this
+   * exact path instead of re-deriving its side effects, which would drift out of sync over time.
+   */
+  protected changeValues(values: string[]) {
     if (this.inactive) {
       return;
     }
diff --git a/resources/js/modules/forms/ComboboxCreateControl.vue b/resources/js/modules/forms/ComboboxCreateControl.vue
index 624e805f369..87920a4d704 100644
--- a/resources/js/modules/forms/ComboboxCreateControl.vue
+++ b/resources/js/modules/forms/ComboboxCreateControl.vue
@@ -7,6 +7,7 @@
 
   type ComboboxCreateControlProps = {
     options: ComboboxItem[];
+    multiple?: boolean;
     createUrl?: string;
     createValue?: string;
     resultKey?: string;
@@ -30,7 +31,7 @@
     required: boolean;
   }>();
   const emit = defineEmits<{
-    (event: 'update:value', value: string, kind: 'discrete'): void;
+    (event: 'update:value', value: string | string[], kind: 'discrete'): void;
   }>();
 
   function onModelValueChanged(event: Event): void {
@@ -39,9 +40,20 @@
     }
 
     const target = event.target as CraftComboboxCreate;
+    const value = target.modelValue;
 
-    if (target.modelValue !== target.createValue) {
-      emit('update:value', String(target.modelValue ?? ''), 'discrete');
+    // Skip the transient state where the trigger option itself is (still) selected — the
+    // control resets that back out on its own right after opening the create slideout.
+    const triggered = Array.isArray(value)
+      ? value.includes(target.createValue)
+      : value === target.createValue;
+
+    if (!triggered) {
+      emit(
+        'update:value',
+        Array.isArray(value) ? value.map(String) : String(value ?? ''),
+        'discrete'
+      );
     }
   }
 </script>
@@ -49,7 +61,14 @@
 <template>
   <craft-combobox-create
     :name="editable ? inputName(control.path) : ''"
-    .modelValue="String(value ?? '')"
+    :multiple-choice="control.props.multiple ?? false"
+    .modelValue="
+      control.props.multiple
+        ? Array.isArray(value)
+          ? value.map(String)
+          : []
+        : String(value ?? '')
+    "
     .options="control.props.options"
     .createUrl="control.props.createUrl ?? ''"
     .createValue="control.props.createValue ?? '__add__'"
diff --git a/resources/js/modules/forms/combobox-create.ts b/resources/js/modules/forms/combobox-create.ts
index a734db9833d..721680e5531 100644
--- a/resources/js/modules/forms/combobox-create.ts
+++ b/resources/js/modules/forms/combobox-create.ts
@@ -66,10 +66,17 @@ export default class CraftComboboxCreate extends CraftCombobox {
     super.disconnectedCallback();
   }
 
+  /** Whether the trigger option is (still) among the current selection. */
+  private isTriggered(): boolean {
+    return this.multipleChoice
+      ? Array.isArray(this.modelValue) && this.modelValue.includes(this.createValue)
+      : this.modelValue === this.createValue;
+  }
+
   private onModelValueChanged = (event: Event): void => {
     if (
       (event as CustomEvent).detail?.initialize ||
-      this.modelValue !== this.createValue ||
+      !this.isTriggered() ||
       this.creating
     ) {
       return;
@@ -84,8 +91,15 @@ export default class CraftComboboxCreate extends CraftCombobox {
     this.creating = true;
 
     // Reset back to nothing selected while the slideout is open, rather than leaving the
-    // trigger option itself "selected".
+    // trigger option itself "selected" — for multi-select, that just means dropping the
+    // trigger's own value back out of an otherwise-untouched selection.
     queueMicrotask(() => {
+      if (this.multipleChoice) {
+        const values = Array.isArray(this.modelValue) ? this.modelValue : [];
+        this.changeValues(values.filter((value) => value !== this.createValue));
+        return;
+      }
+
       this.modelValue = '';
       this._inputNode.value = '';
       this._notifyModelValueChanged();
@@ -116,6 +130,16 @@ export default class CraftComboboxCreate extends CraftCombobox {
         );
 
         void this.updateComplete.then(() => {
+          if (this.multipleChoice) {
+            // Multi-select's chips render straight off `modelValue`/`options` (see
+            // `_inputGroupInputTemplate()`/`valueLabel()`), not off a registered
+            // `craft-option` element, so there's no DOM lookup needed here the way
+            // single-select's textbox sync requires below.
+            const values = Array.isArray(this.modelValue) ? this.modelValue : [];
+            this.changeValues([...values, option.value]);
+            return;
+          }
+
           const selectedOption = Array.from(
             this._listboxNode.querySelectorAll('craft-option')
           ).find((item) => String(item.choiceValue) === String(option.value));
diff --git a/src/Form/Controls/Combobox.php b/src/Form/Controls/Combobox.php
index 6f1f8e1b629..1b8f945bc13 100644
--- a/src/Form/Controls/Combobox.php
+++ b/src/Form/Controls/Combobox.php
@@ -66,14 +66,36 @@ public function component(): string
         return 'craft:combobox';
     }
 
-    /** @param list<array<string, mixed>> $options */
+    /**
+     * @param list<array<string, mixed>> $options
+     *
+     * Every option's `value` is cast to a string here, matching the client's own
+     * `ComboboxOption.value: string` contract. A caller passing a raw int id (e.g. an
+     * Eloquent/Active Record primary key) is easy to miss — for a single-select combobox it's
+     * harmless, but for a `multiple()` one it silently breaks the "is this option already
+     * selected" comparisons `#renderOptions()` does against `modelValue` (always strings), which
+     * renders the same option twice (once as a synthetic "selected" entry, once as a normal
+     * unselected one) and doubles up the resulting value.
+     */
     public function options(array $options): static
     {
-        $this->options = $options;
+        $this->options = array_map(self::stringifyOptionValue(...), $options);
 
         return $this;
     }
 
+    /** @param array<string, mixed> $option */
+    private static function stringifyOptionValue(array $option): array
+    {
+        if (($option['type'] ?? null) === 'optgroup') {
+            return [...$option, 'options' => array_map(self::stringifyOptionValue(...), $option['options'] ?? [])];
+        }
+
+        return array_key_exists('value', $option)
+            ? [...$option, 'value' => (string) $option['value']]
+            : $option;
+    }
+
     public function placeholder(?string $placeholder): static
     {
         $this->placeholder = $placeholder;

From 368dc5b34d7250ed2a5be6dc72cdb53642981206 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Mon, 21 Sep 2026 21:46:10 +0100
Subject: [PATCH 11/19] further table node updates

---
 resources/js/modules/forms/AdminTableNode.vue | 124 ++++++++++++++++--
 src/Form/FormNodeTypes.php                    |   2 +
 src/Form/Nodes/Table.php                      |  92 ++++++++++---
 3 files changed, 183 insertions(+), 35 deletions(-)

diff --git a/resources/js/modules/forms/AdminTableNode.vue b/resources/js/modules/forms/AdminTableNode.vue
index 269c42f65fb..59a9c29e9fb 100644
--- a/resources/js/modules/forms/AdminTableNode.vue
+++ b/resources/js/modules/forms/AdminTableNode.vue
@@ -8,6 +8,7 @@
     useVueTable,
   } from '@tanstack/vue-table';
   import {computed, h, ref, watch} from 'vue';
+  import CraftInput from '@craftcms/ui/vue/CraftInput.vue';
   import ActionMenu from '@/common/components/ActionMenu.vue';
   import CpLink from '@/common/components/CpLink.vue';
   import Text from '@/common/components/Text.vue';
@@ -107,11 +108,27 @@
     | TableIcon
     | TableHtml;
 
+  interface TableStatus {
+    fill: string;
+    label: string | null;
+  }
+
   type TableRow = Record<string, TableCellValue> & {
     /** Required when the table is reorderable and/or deletable. */
     id?: string | number;
     /** Opts a single row out of an otherwise-deletable table. */
     _deletable?: boolean;
+    /**
+     * A colored status indicator dot, already resolved server-side (see PHP `Table::rows()`) —
+     * this component just draws it, prefixed onto the *first* column's own cell content.
+     */
+    _status?: TableStatus | null;
+    /**
+     * The plain text this row's own search box (see {@link searchable}) matches against, when
+     * anything worth searching isn't itself a visible column. Falls back to the row's own
+     * column text when absent.
+     */
+    _search?: string;
   };
 
   const props = defineProps<{
@@ -127,6 +144,8 @@
       deleteConfirmMessage: string | null;
       bulkDeletable: boolean;
       bulkActions: BulkAction[];
+      searchable: boolean;
+      searchPlaceholder: string | null;
     }>;
   }>();
 
@@ -141,6 +160,38 @@
     }
   );
 
+  const search = ref('');
+
+  /** Plain text a cell's own rendered content reduces to, for {@link rowSearchText}. */
+  function cellText(value: TableCellValue): string {
+    if (value === null || value === undefined) return '';
+    if (typeof value !== 'object') return String(value);
+    if (Array.isArray(value)) return value.map((link) => link.label).join(' ');
+    // `html` cells could hold anything (a working custom element, not just markup) — there's no
+    // safe, generic way to reduce that to plain text, so a row relying on one for its primary
+    // content needs its own explicit `_search` to stay searchable.
+    if ('html' in value) return '';
+    return value.label ?? '';
+  }
+
+  function rowSearchText(row: TableRow): string {
+    const text =
+      row._search ??
+      props.node.props.columns
+        .map((column) => cellText(row[column.key] ?? null))
+        .join(' ');
+
+    return text.toLowerCase();
+  }
+
+  const filteredRows = computed(() => {
+    const query = search.value.trim().toLowerCase();
+
+    return query
+      ? rows.value.filter((row) => rowSearchText(row).includes(query))
+      : rows.value;
+  });
+
   const columnHelper = createCraftColumnHelper<TableRow>();
 
   const createMenuActions = computed<ActionItemLink[]>(
@@ -214,27 +265,39 @@
 
   const columns = computed(() => {
     const cols: ColumnDef<TableRow, any>[] = props.node.props.columns.map(
-      (column) =>
+      (column, columnIndex) =>
         columnHelper.accessor(column.key, {
           header: column.label,
-          cell: ({getValue}) => {
+          cell: ({getValue, row}) => {
             const value = getValue();
+            let rendered;
 
             if (Array.isArray(value)) {
-              return value.flatMap((link, index) => [
+              rendered = value.flatMap((link, index) => [
                 index > 0 ? ', ' : '',
                 renderLink(link),
               ]);
+            } else if (value !== null && typeof value === 'object') {
+              if (isMenu(value)) rendered = renderMenu(value);
+              else if (isIcon(value)) rendered = renderIcon(value);
+              else if (isHtml(value)) rendered = renderHtmlCell(value);
+              else rendered = renderLink(value);
+            } else {
+              rendered = value ?? '';
             }
 
-            if (value !== null && typeof value === 'object') {
-              if (isMenu(value)) return renderMenu(value);
-              if (isIcon(value)) return renderIcon(value);
-              if (isHtml(value)) return renderHtmlCell(value);
-              return renderLink(value);
+            const status = row.original._status;
+            if (columnIndex === 0 && status) {
+              return h('div', {class: 'flex flex-nowrap gap-1 items-center'}, [
+                h('craft-indicator', {
+                  fill: status.fill,
+                  label: status.label ?? undefined,
+                }),
+                rendered,
+              ]);
             }
 
-            return value ?? '';
+            return rendered;
           },
         })
     );
@@ -267,7 +330,7 @@
 
   const table = useVueTable({
     get data() {
-      return rows.value;
+      return filteredRows.value;
     },
     get columns() {
       return columns.value;
@@ -426,14 +489,43 @@
     </LayoutSlot>
 
     <craft-pane padding="0" appearance="raised">
+      <div v-if="node.props.searchable" slot="header-actions">
+        <CraftInput
+          name="search"
+          :label="t('Search')"
+          :placeholder="node.props.searchPlaceholder ?? t('Search')"
+          label-sr-only
+          v-model="search"
+        >
+          <div slot="suffix" class="flex">
+            <craft-button
+              v-if="search"
+              type="button"
+              icon
+              size="small"
+              variant="plain"
+              @click="search = ''"
+            >
+              <craft-icon name="x" :label="t('Clear search')"></craft-icon>
+            </craft-button>
+          </div>
+        </CraftInput>
+      </div>
+
       <AdminTable
         :table="table"
-        :reorderable="!!node.props.reorderUrl"
+        :reorderable="!!node.props.reorderUrl && !search"
         :selectable="hasBulkFooter"
         @reorder="onReorder"
       >
         <template #empty-row>
-          <Empty :label="node.props.emptyMessage ?? t('Nothing to show.')" />
+          <Empty
+            :label="
+              search
+                ? t('No results for “{search}”.', {search})
+                : (node.props.emptyMessage ?? t('Nothing to show.'))
+            "
+          />
         </template>
       </AdminTable>
 
@@ -449,7 +541,7 @@
         same background, border, and copy — driven by this component's own
         `rows`/`selectedIds` instead.
       -->
-      <div v-if="rows.length" class="admin-table-footer">
+      <div v-if="filteredRows.length" class="admin-table-footer">
         <template v-if="selectedIds.length">
           <Text
             as="span"
@@ -511,7 +603,11 @@
           v-else
           as="span"
           template="{from} – {to} of {total, plural, =1{# item} other{# items}}"
-          :params="{from: 1, to: rows.length, total: rows.length}"
+          :params="{
+            from: 1,
+            to: filteredRows.length,
+            total: filteredRows.length,
+          }"
         />
       </div>
     </craft-pane>
diff --git a/src/Form/FormNodeTypes.php b/src/Form/FormNodeTypes.php
index fc87ef66401..b602eb67c81 100644
--- a/src/Form/FormNodeTypes.php
+++ b/src/Form/FormNodeTypes.php
@@ -21,6 +21,7 @@
 use CraftCms\Cms\Form\Nodes\Tab;
 use CraftCms\Cms\Form\Nodes\Table;
 use CraftCms\Cms\Form\Nodes\TemplateContent;
+use CraftCms\Cms\Form\Nodes\UsageCounter;
 use Illuminate\Container\Attributes\Singleton;
 
 /**
@@ -49,5 +50,6 @@ class FormNodeTypes extends TypeRegistry
         Tab::class,
         Table::class,
         TemplateContent::class,
+        UsageCounter::class,
     ];
 }
diff --git a/src/Form/Nodes/Table.php b/src/Form/Nodes/Table.php
index 059fb71908b..10f696fea91 100644
--- a/src/Form/Nodes/Table.php
+++ b/src/Form/Nodes/Table.php
@@ -9,6 +9,7 @@
 use CraftCms\Cms\Form\FormHtmlRenderer;
 use CraftCms\Cms\Form\FormPayload;
 use CraftCms\Cms\Form\NodePayload;
+use CraftCms\Cms\Shared\Enums\Color;
 use CraftCms\Cms\Support\Html;
 use Illuminate\Support\Traits\Conditionable;
 
@@ -51,6 +52,10 @@ class Table implements Node
     /** @var list<array<string, mixed>> */
     private array $bulkActions = [];
 
+    private bool $searchable = false;
+
+    private ?string $searchPlaceholder = null;
+
     public function __construct(private readonly string $uid) {}
 
     public static function make(string $uid): self
@@ -86,14 +91,44 @@ public function columns(array $columns): static
      *   page. Prefer one of the structured shapes above when it fits; `html` exists for what
      *   doesn't. A row may set `_deletable => false` to suppress its own delete action even when
      *   the table as a whole is {@see deletable()} (e.g. a "primary" row that can't be removed).
+     *   A row may also set `_status` to get a colored status indicator dot before the *first*
+     *   column's own content — the same dot a Craft element index chip shows, for a row whose
+     *   underlying model isn't a real element (so an actual chip, and the `Statusable` status it'd
+     *   need, aren't available). `true`/`false` renders the plain enabled/disabled dot most rows
+     *   want; a string is resolved the same way {@see \CraftCms\Cms\Shared\Enums\Color::
+     *   tryFromStatus()} resolves one elsewhere (`'live'`, `'pending'`, `'expired'`, an arbitrary
+     *   custom status name, ...), for a row whose model has a richer status than a plain boolean.
+     *   When {@see searchable()} is on, a row may also set `_search` to the plain text its own
+     *   search box should match against — needed whenever anything worth searching isn't itself a
+     *   visible column (a discount's description, or its coupon codes, say — legacy's own search
+     *   matched both, neither ever a column here either). A row without `_search` falls back to
+     *   matching its declared columns' own rendered text.
      */
     public function rows(array $rows): static
     {
-        $this->rows = $rows;
+        $this->rows = array_map(self::resolveRowStatus(...), $rows);
 
         return $this;
     }
 
+    /** @param array<string, mixed> $row */
+    private static function resolveRowStatus(array $row): array
+    {
+        if (!array_key_exists('_status', $row) || $row['_status'] === null) {
+            return $row;
+        }
+
+        $status = $row['_status'];
+        $status = is_bool($status) ? ($status ? 'enabled' : 'disabled') : $status;
+
+        $row['_status'] = [
+            'fill' => (Color::tryFromStatus($status) ?? Color::Gray)->value,
+            'label' => ucfirst($status),
+        ];
+
+        return $row;
+    }
+
     public function emptyMessage(?string $emptyMessage): static
     {
         $this->emptyMessage = $emptyMessage;
@@ -189,6 +224,21 @@ public function bulkActions(array $actions): static
         return $this;
     }
 
+    /**
+     * Shows a text search box above the table, filtering rows entirely client-side — every row
+     * is already loaded (there's no pagination to search across, unlike the legacy
+     * `Craft.VueAdminTable` screen this usually replaces, which searched server-side against a
+     * paginated result set). See {@see rows()} for how a row controls what it matches against.
+     * Most tables don't need this — reach for it only where legacy actually had `search: true`.
+     */
+    public function searchable(?string $placeholder = null): static
+    {
+        $this->searchable = true;
+        $this->searchPlaceholder = $placeholder;
+
+        return $this;
+    }
+
     public static function renderHtml(NodePayload $node, FormPayload $payload, FormHtmlRenderer $renderer): string
     {
         $columns = $node->props['columns'];
@@ -219,37 +269,35 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
                 ? Html::a(Html::encode($link['label']), $link['url'])
                 : Html::encode($link['label']);
 
+            $firstColumnKey = $columns[0]['key'] ?? null;
+
             // Reordering, deleting, and bulk actions are inherently interactive (drag handles,
             // confirmation dialogs, row selection, CSRF-protected requests) with no sensible
             // plain-HTML equivalent, so this fallback renders a menu's links inline but
             // otherwise omits those affordances — consistent with the rest of the CP treating
             // this renderer as JS-less read access, not a full replacement for the Vue control.
-            $renderCell = function(array $column, array $row) use ($renderLink): string {
+            $renderCell = function(array $column, array $row) use ($renderLink, $firstColumnKey): string {
                 $value = $row[$column['key']] ?? '';
 
-                if (is_array($value) && array_key_exists('items', $value)) {
-                    return implode(', ', array_map($renderLink, $value['items']));
-                }
-
-                if (is_array($value) && array_key_exists('icon', $value)) {
-                    return Html::encode($value['label'] ?? '');
-                }
-
-                if (is_array($value) && array_key_exists('html', $value)) {
+                $rendered = match (true) {
+                    is_array($value) && array_key_exists('items', $value) => implode(', ', array_map($renderLink, $value['items'])),
+                    is_array($value) && array_key_exists('icon', $value) => Html::encode($value['label'] ?? ''),
                     // Not re-encoded — this is meant to be markup, and rows() no longer
                     // sanitizes it (see its docblock); the caller owns that trust boundary.
-                    return $value['html'];
-                }
-
-                if (is_array($value) && array_is_list($value)) {
-                    return implode(', ', array_map($renderLink, $value));
-                }
-
-                if (is_array($value)) {
-                    return $renderLink($value);
+                    is_array($value) && array_key_exists('html', $value) => $value['html'],
+                    is_array($value) && array_is_list($value) => implode(', ', array_map($renderLink, $value)),
+                    is_array($value) => $renderLink($value),
+                    default => Html::encode((string) $value),
+                };
+
+                // The dot itself is inherently visual, so — same reasoning as the icon-cell
+                // case above — this fallback substitutes its resolved label as plain text
+                // instead, right before whatever the first column already rendered.
+                if ($column['key'] === $firstColumnKey && !empty($row['_status']['label'])) {
+                    $rendered = Html::encode($row['_status']['label']).': '.$rendered;
                 }
 
-                return Html::encode((string) $value);
+                return $rendered;
             };
 
             $head = Html::tag('tr', implode('', array_map(
@@ -300,6 +348,8 @@ public function props(): array
             'deleteConfirmMessage' => $this->deleteConfirmMessage,
             'bulkDeletable' => $this->bulkDeletable,
             'bulkActions' => $this->bulkActions,
+            'searchable' => $this->searchable,
+            'searchPlaceholder' => $this->searchPlaceholder,
         ];
     }
 

From 26e85fb2532a58a3f38da8701a033380982413f0 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Tue, 22 Sep 2026 08:22:05 +0100
Subject: [PATCH 12/19] Table node reorder success/fail notices

---
 resources/js/modules/forms/AdminTableNode.vue | 21 +++++++++++++++++--
 src/Form/Nodes/Table.php                      | 16 ++++++++++++--
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/resources/js/modules/forms/AdminTableNode.vue b/resources/js/modules/forms/AdminTableNode.vue
index 59a9c29e9fb..1896d2c6c5d 100644
--- a/resources/js/modules/forms/AdminTableNode.vue
+++ b/resources/js/modules/forms/AdminTableNode.vue
@@ -140,6 +140,8 @@
       createUrl: string | null;
       createMenuItems: Array<{label: string; url: string}> | null;
       reorderUrl: string | null;
+      reorderSuccessMessage: string | null;
+      reorderFailMessage: string | null;
       deleteUrl: string | null;
       deleteConfirmMessage: string | null;
       bulkDeletable: boolean;
@@ -359,7 +361,8 @@
   );
 
   function onReorder(startIndex: number, finishIndex: number): void {
-    const reordered = [...rows.value];
+    const previous = rows.value;
+    const reordered = [...previous];
     const [moved] = reordered.splice(startIndex, 1);
 
     if (!moved) {
@@ -375,7 +378,21 @@
       .post(props.node.props.reorderUrl!, {
         ids: JSON.stringify(reordered.map((row) => row.id)),
       })
-      .then(() => refreshForm());
+      .then(() => {
+        Craft.cp?.displayNotice?.(
+          props.node.props.reorderSuccessMessage ?? t('Order updated.')
+        );
+        refreshForm();
+      })
+      .catch(() => {
+        // The optimistic reorder above never actually took server-side — put the rows
+        // back the way they were rather than leaving the UI showing an order that
+        // silently failed to save.
+        rows.value = previous;
+        Craft.cp?.displayError?.(
+          props.node.props.reorderFailMessage ?? t('Couldn’t reorder.')
+        );
+      });
   }
 
   async function deleteRow(row: TableRow): Promise<void> {
diff --git a/src/Form/Nodes/Table.php b/src/Form/Nodes/Table.php
index 10f696fea91..c8495f6cb6f 100644
--- a/src/Form/Nodes/Table.php
+++ b/src/Form/Nodes/Table.php
@@ -43,6 +43,10 @@ class Table implements Node
 
     private ?string $reorderUrl = null;
 
+    private ?string $reorderSuccessMessage = null;
+
+    private ?string $reorderFailMessage = null;
+
     private ?string $deleteUrl = null;
 
     private ?string $deleteConfirmMessage = null;
@@ -161,10 +165,16 @@ public function createActionMenu(string $label, array $items): static
         return $this;
     }
 
-    /** Enables drag-to-reorder; the new order posts to `$url` as `{ids: list<int|string>}`. */
-    public function reorderable(string $url): static
+    /**
+     * Enables drag-to-reorder; the new order posts to `$url` as `{ids: list<int|string>}`.
+     * `$successMessage`/`$failMessage` are shown as a toast after the request settles — omit
+     * either (or both) to fall back to a generic message client-side.
+     */
+    public function reorderable(string $url, ?string $successMessage = null, ?string $failMessage = null): static
     {
         $this->reorderUrl = $url;
+        $this->reorderSuccessMessage = $successMessage;
+        $this->reorderFailMessage = $failMessage;
 
         return $this;
     }
@@ -344,6 +354,8 @@ public function props(): array
             'createUrl' => $this->createUrl,
             'createMenuItems' => $this->createMenuItems,
             'reorderUrl' => $this->reorderUrl,
+            'reorderSuccessMessage' => $this->reorderSuccessMessage,
+            'reorderFailMessage' => $this->reorderFailMessage,
             'deleteUrl' => $this->deleteUrl,
             'deleteConfirmMessage' => $this->deleteConfirmMessage,
             'bulkDeletable' => $this->bulkDeletable,

From b542c22a00daebc99a9583ce88ae1b1a8d918225 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Tue, 22 Sep 2026 10:52:16 +0100
Subject: [PATCH 13/19] Remove leftover

---
 src/Form/FormNodeTypes.php | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Form/FormNodeTypes.php b/src/Form/FormNodeTypes.php
index b602eb67c81..fc87ef66401 100644
--- a/src/Form/FormNodeTypes.php
+++ b/src/Form/FormNodeTypes.php
@@ -21,7 +21,6 @@
 use CraftCms\Cms\Form\Nodes\Tab;
 use CraftCms\Cms\Form\Nodes\Table;
 use CraftCms\Cms\Form\Nodes\TemplateContent;
-use CraftCms\Cms\Form\Nodes\UsageCounter;
 use Illuminate\Container\Attributes\Singleton;
 
 /**
@@ -50,6 +49,5 @@ class FormNodeTypes extends TypeRegistry
         Tab::class,
         Table::class,
         TemplateContent::class,
-        UsageCounter::class,
     ];
 }

From 5f3826e1221b4c6a18b5d1a39b899d9d8c0ae8dc Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Tue, 22 Sep 2026 10:53:18 +0100
Subject: [PATCH 14/19] for third party components to interact with inertia

---
 resources/js/bootstrap/cp.ts           | 10 ++++++++++
 resources/js/common/types/globals.d.ts |  2 ++
 2 files changed, 12 insertions(+)

diff --git a/resources/js/bootstrap/cp.ts b/resources/js/bootstrap/cp.ts
index 12db70e9dac..79387a1ef2f 100644
--- a/resources/js/bootstrap/cp.ts
+++ b/resources/js/bootstrap/cp.ts
@@ -70,6 +70,16 @@ const Cp = {
     return cpComponentRegistry;
   },
 
+  // The real, mounted-app `router` singleton from `@inertiajs/vue3` — exposed
+  // for the same reason as `$components`/`$axios`: a plugin's own,
+  // independently-bundled script gets its own disconnected copy of the
+  // `@inertiajs/vue3` module (and hence a `router` object with no page/app
+  // actually wired to it) if it imports the package directly, so it needs a
+  // way to reach the one that's actually driving this page instead.
+  get $router() {
+    return router;
+  },
+
   booted(callback: (instance: typeof window.Cp) => void) {
     bootedCallbacks.push(callback);
   },
diff --git a/resources/js/common/types/globals.d.ts b/resources/js/common/types/globals.d.ts
index a9cee3d4026..88292d19dc3 100644
--- a/resources/js/common/types/globals.d.ts
+++ b/resources/js/common/types/globals.d.ts
@@ -2,6 +2,7 @@ import type {ConfigService} from '@craftcms/ui';
 import type {QueueService} from '@/modules/queue/queue';
 import type {CpComponentRegistry} from '@/bootstrap/components';
 import type {InertiaPageRegistry} from '@/bootstrap/inertia-pages';
+import type {Router} from '@inertiajs/core';
 import type {AxiosRequestConfig, AxiosResponse} from 'axios';
 
 type LegacySettingValue =
@@ -88,6 +89,7 @@ interface CpServices {
 interface CpStatic extends CpServices {
   $components: CpComponentRegistry;
   $inertia: InertiaPageRegistry;
+  $router: Router;
 }
 
 interface CpNotificationSettings {

From 43f2f92774364be545a35c614ef25855a50cc7d1 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Tue, 22 Sep 2026 16:36:49 +0100
Subject: [PATCH 15/19] Support pagination, search, data end points, move to
 page, footer actions

---
 .../components/MoveToPageButton.vue           |  98 ++++
 resources/js/modules/forms/AdminTableNode.vue | 482 ++++++++++++++----
 src/Form/Nodes/Table.php                      | 148 +++++-
 3 files changed, 604 insertions(+), 124 deletions(-)
 create mode 100644 resources/js/modules/admin-table/components/MoveToPageButton.vue

diff --git a/resources/js/modules/admin-table/components/MoveToPageButton.vue b/resources/js/modules/admin-table/components/MoveToPageButton.vue
new file mode 100644
index 00000000000..8426eaa058c
--- /dev/null
+++ b/resources/js/modules/admin-table/components/MoveToPageButton.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/ui/utilities/translate';
+  import {computed, ref} from 'vue';
+  import Select from '@/common/form/Select.vue';
+
+  /**
+   * A "Move to page…" control for a {@see Table} Form Node in `dataUrl()` mode — the
+   * within-page drag-and-drop reorder `AdminTableNode.vue` already offers can't reach a
+   * page that isn't loaded, so this is the only way to move a row to a different one.
+   * Mirrors the legacy `Craft.VueAdminTable` widget's own `AdminTableMoveToPageHud` (a
+   * small "choose a page" popover, not literal drag-across-pages) — same interaction,
+   * rebuilt on `<craft-popover>` instead of a `Garnish.HUD`.
+   *
+   * Lives once in the selection footer (`AdminTableNode.vue`), not per row — matching
+   * this codebase's own established convention (see the real Entries index: uncommon
+   * per-selection actions like "Move to…" live in a footer "Actions" menu once
+   * something's selected, not in a disclosure control on every row) rather than
+   * inventing a new per-row menu. `AdminTableNode.vue` only mounts this component while
+   * exactly one row is selected, so there's no separate `disabled` state to model here.
+   */
+  const props = defineProps<{
+    currentPage: number;
+    lastPage: number;
+    loading?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'move', page: number): void;
+  }>();
+
+  interface PopoverElement extends HTMLElement {
+    hide(): Promise<void>;
+  }
+
+  const popover = ref<PopoverElement>();
+  const targetPageRaw = ref<string | number>(props.currentPage);
+
+  // `Select`'s v-model round-trips through a native <select>, whose value is
+  // always a string — coerce back to a number the same way `BaseElementIndex.
+  // vue`'s own page-size/page-index proxies already do.
+  const targetPage = computed(() => parseInt(String(targetPageRaw.value), 10));
+
+  const pages = Array.from({length: props.lastPage}, (_, i) => i + 1);
+
+  function handleMove(): void {
+    if (targetPage.value === props.currentPage) {
+      return;
+    }
+
+    emit('move', targetPage.value);
+    popover.value?.hide();
+  }
+
+  function onOpenedChanged(event: CustomEvent<boolean>): void {
+    if (event.detail) {
+      targetPageRaw.value = props.currentPage;
+    }
+  }
+</script>
+
+<template>
+  <craft-popover
+    ref="popover"
+    placement="bottom-end"
+    @opened-changed="onOpenedChanged"
+  >
+    <!--
+      `v-once` is load-bearing, not an optimization — see `ActionMenu.vue`'s own
+      identical comment. `craft-popover` extends the same Lion `OverlayMixin` as
+      `craft-action-menu` and relocates/restructures its slotted invoker once
+      mounted. This component stays mounted for as long as exactly one row is
+      selected, and `AdminTableNode.vue` passes it a shared `loading` prop that
+      flips during that same window (the move's own `fetchPage()` refetch);
+      without `v-once`, that re-render patches the invoker against DOM the
+      overlay has already moved. The invoker is static text, so freezing it
+      costs nothing.
+    -->
+    <craft-button type="button" slot="invoker" size="small" v-once>{{
+      t('Move to page…')
+    }}</craft-button>
+
+    <div slot="content-body" class="flex flex-nowrap items-end gap-2">
+      <Select
+        :label="t('Choose a page')"
+        v-model="targetPageRaw"
+        :options="pages.map((p) => ({label: String(p), value: String(p)}))"
+      />
+      <craft-button
+        type="button"
+        variant="primary"
+        size="small"
+        :loading="loading"
+        @click="handleMove"
+        >{{ t('Move') }}</craft-button
+      >
+    </div>
+  </craft-popover>
+</template>
diff --git a/resources/js/modules/forms/AdminTableNode.vue b/resources/js/modules/forms/AdminTableNode.vue
index 1896d2c6c5d..e3dccbb2739 100644
--- a/resources/js/modules/forms/AdminTableNode.vue
+++ b/resources/js/modules/forms/AdminTableNode.vue
@@ -7,16 +7,23 @@
     type RowSelectionState,
     useVueTable,
   } from '@tanstack/vue-table';
-  import {computed, h, ref, watch} from 'vue';
+  import {watchDebounced} from '@vueuse/core';
+  import {computed, defineComponent, h, onMounted, ref, watch} from 'vue';
   import CraftInput from '@craftcms/ui/vue/CraftInput.vue';
   import ActionMenu from '@/common/components/ActionMenu.vue';
   import CpLink from '@/common/components/CpLink.vue';
   import Text from '@/common/components/Text.vue';
-  import type {ActionItemButton, ActionItemLink} from '@/common/types';
+  import type {
+    ActionItemButton,
+    ActionItemLink,
+    ActionItems,
+    PaginationData,
+  } from '@/common/types';
   import Empty from '@/common/components/Empty.vue';
   import LayoutSlot from '@/common/components/LayoutSlot.vue';
   import AdminTable from '@/modules/admin-table/components/AdminTable.vue';
   import DeleteButton from '@/modules/admin-table/components/DeleteButton.vue';
+  import MoveToPageButton from '@/modules/admin-table/components/MoveToPageButton.vue';
   import {createCraftColumnHelper} from '@/modules/admin-table/helpers/createCraftColumnHelper';
   import type {FormNodePayload} from './types';
 
@@ -46,11 +53,12 @@
 
   /**
    * A single bulk-footer action — posts `{ids: <selected row ids>, ...params}` to `url`.
-   * `allowMultiple: false` (default `true`) disables it — as a standalone button, or as a
-   * menu item — whenever more than one row is selected, for an action that only makes sense
-   * against one row at a time (its endpoint has no obligation to reflect that itself; nothing
-   * stops a request with several ids reaching it some other way, so this is a UI nicety, not
-   * a substitute for that endpoint enforcing the same rule server-side).
+   * `allowMultiple: false` (default `true`) disables it — whether it stands alone or sits
+   * inside a {@link BulkActionMenu} group — whenever more than one row is selected, for an
+   * action that only makes sense against one row at a time (its endpoint has no obligation
+   * to reflect that itself; nothing stops a request with several ids reaching it some other
+   * way, so this is a UI nicety, not a substitute for that endpoint enforcing the same rule
+   * server-side).
    */
   interface BulkActionSingle {
     label: string;
@@ -60,9 +68,12 @@
   }
 
   /**
-   * A dropdown of {@link BulkActionSingle}s, shown as one button in the bulk footer. `label`
-   * is optional — omit it (alongside an `icon`) for an icon-only invoker, matching legacy's
-   * own unlabeled gear-icon settings menu for a single, infrequently-needed item.
+   * A labeled group of {@link BulkActionSingle}s within the footer's single "Actions" menu —
+   * a heading followed by its items. `label` is optional — omit it to fold the items in
+   * unheaded instead, blended into the flat list (matches legacy's own unlabeled gear-icon
+   * settings menu for a single, infrequently-needed item; `icon` is accepted for the same PHP
+   * config shape but unused here — there's only one shared "Actions" invoker now, not a
+   * distinct one per menu).
    */
   interface BulkActionMenu {
     label?: string;
@@ -135,6 +146,9 @@
     node: FormNodePayload<{
       columns: TableColumn[];
       rows: TableRow[];
+      dataUrl: string | null;
+      perPage: number;
+      moveToPageUrl: string | null;
       emptyMessage: string | null;
       createLabel: string | null;
       createUrl: string | null;
@@ -146,6 +160,7 @@
       deleteConfirmMessage: string | null;
       bulkDeletable: boolean;
       bulkActions: BulkAction[];
+      statusActions: BulkActionSingle[];
       searchable: boolean;
       searchPlaceholder: string | null;
     }>;
@@ -153,7 +168,9 @@
 
   // Reorder/delete mutate this local copy directly (optimistic UI, matching the
   // legacy Craft.VueAdminTable's behavior) rather than round-tripping through a
-  // form refresh for what's otherwise a read-only listing.
+  // form refresh for what's otherwise a read-only listing. Upfront mode only —
+  // endpoint mode's `pageRows` (below) is a fetch result, not this Node's own
+  // initial props, so there's nothing to keep in sync here.
   const rows = ref<TableRow[]>([...props.node.props.rows]);
   watch(
     () => props.node.props.rows,
@@ -162,8 +179,54 @@
     }
   );
 
+  const isEndpointMode = computed(() => !!props.node.props.dataUrl);
+
+  // Endpoint mode (`Table::dataUrl()`): the current page's rows plus the server's own
+  // pagination metadata, replacing `rows`/`filteredRows` as this component's data source
+  // entirely — search becomes a server param `fetchPage()` sends (see the debounced watcher
+  // below), not a client-side filter over an already-loaded set.
+  const pageRows = ref<TableRow[]>([]);
+  const pagination = ref<PaginationData | null>(null);
+  const loading = ref(false);
+
+  async function fetchPage(page: number): Promise<void> {
+    loading.value = true;
+    try {
+      const {data} = await actionClient.post<{
+        data: TableRow[];
+        pagination: PaginationData;
+      }>(props.node.props.dataUrl!, {
+        page,
+        per_page: props.node.props.perPage,
+        search: search.value || undefined,
+      });
+      pageRows.value = data.data;
+      pagination.value = data.pagination;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onMounted(() => {
+    if (isEndpointMode.value) {
+      fetchPage(1);
+    }
+  });
+
   const search = ref('');
 
+  // Endpoint mode only — upfront mode's `filteredRows` computed (below) already reacts to
+  // `search` instantly, with no request to debounce.
+  watchDebounced(
+    search,
+    () => {
+      if (isEndpointMode.value) {
+        fetchPage(1);
+      }
+    },
+    {debounce: 300}
+  );
+
   /** Plain text a cell's own rendered content reduces to, for {@link rowSearchText}. */
   function cellText(value: TableCellValue): string {
     if (value === null || value === undefined) return '';
@@ -194,6 +257,25 @@
       : rows.value;
   });
 
+  /** Whichever of the two modes' own row sets is actually on screen right now. */
+  const displayedRows = computed(() =>
+    isEndpointMode.value ? pageRows.value : filteredRows.value
+  );
+
+  // Endpoint mode reports the server's own real `from`/`to`/`total` (driving `AdminTable`'s
+  // — really `BaseElementIndex`'s — built-in pagination footer, see the `useVueTable` config
+  // below); upfront mode keeps reporting "every loaded/filtered row is on the one page",
+  // exactly as before.
+  const footerFrom = computed(() =>
+    isEndpointMode.value ? (pagination.value?.from ?? 0) : 1
+  );
+  const footerTo = computed(() =>
+    isEndpointMode.value ? (pagination.value?.to ?? 0) : displayedRows.value.length
+  );
+  const footerTotal = computed(() =>
+    isEndpointMode.value ? (pagination.value?.total ?? 0) : displayedRows.value.length
+  );
+
   const columnHelper = createCraftColumnHelper<TableRow>();
 
   const createMenuActions = computed<ActionItemLink[]>(
@@ -306,11 +388,15 @@
 
     if (props.node.props.deleteUrl) {
       cols.push(
-        columnHelper.actions(({row}) =>
-          row.original._deletable === false
-            ? []
-            : [h(DeleteButton, {onClick: () => deleteRow(row.original)})]
-        )
+        columnHelper.actions(({row}) => {
+          const actions = [];
+
+          if (row.original._deletable !== false) {
+            actions.push(h(DeleteButton, {onClick: () => deleteRow(row.original)}));
+          }
+
+          return actions;
+        })
       );
     }
 
@@ -319,20 +405,59 @@
 
   // Keyed by row id (see `getRowId`) rather than row index, so a selection
   // survives the optimistic row-removal a delete does. Gated on `bulkDeletable`
-  // (see `Table::deletable()`) or a non-empty `bulkActions` — either turns
-  // selection on; a plain `deleteUrl` alone (no `bulk: true`) wouldn't know
-  // what to do with the `ids` array a bulk request posts.
+  // (see `Table::deletable()`) or a non-empty `bulkActions`/`statusActions` — any
+  // of the three turns selection on; a plain `deleteUrl` alone (no `bulk: true`)
+  // wouldn't know what to do with the `ids` array a bulk request posts.
   const rowSelection = ref<RowSelectionState>({});
 
   const hasBulkFooter = computed(
     () =>
       (!!props.node.props.deleteUrl && props.node.props.bulkDeletable) ||
-      props.node.props.bulkActions.length > 0
+      props.node.props.bulkActions.length > 0 ||
+      props.node.props.statusActions.length > 0
+  );
+
+  // A "Move to page…" control only makes sense once there's more than one page to move
+  // *to* — mirrors legacy's own `AdminTableMoveToPageHud`, which the within-page
+  // drag-and-drop `onReorder()` already offers can't reach on its own. Shown in the
+  // selection footer (see the template) only while exactly one row is selected — moving
+  // more than one row to the same absolute position isn't a well-defined operation, and
+  // matches this codebase's own convention of surfacing uncommon per-selection actions
+  // in the footer rather than a disclosure control on every row (see the real Entries
+  // index's "Move to…" in its own selection-footer Actions menu).
+  const showMoveToPage = computed(
+    () =>
+      isEndpointMode.value &&
+      !!props.node.props.moveToPageUrl &&
+      (pagination.value?.last_page ?? 0) > 1
   );
 
+  // Endpoint mode's own pagination state, kept in the shape TanStack's `state.pagination`
+  // expects — derived from the last `fetchPage()` response rather than owned locally, since
+  // the server is the source of truth for which page is "current" here.
+  const paginationState = computed(() => ({
+    pageIndex: (pagination.value?.current_page ?? 1) - 1,
+    pageSize: props.node.props.perPage,
+  }));
+
+  function onPaginationChange(
+    updater:
+      | {pageIndex: number; pageSize: number}
+      | ((old: {pageIndex: number; pageSize: number}) => {
+          pageIndex: number;
+          pageSize: number;
+        })
+  ): void {
+    if (!isEndpointMode.value) return;
+
+    const next =
+      updater instanceof Function ? updater(paginationState.value) : updater;
+    fetchPage(next.pageIndex + 1);
+  }
+
   const table = useVueTable({
     get data() {
-      return filteredRows.value;
+      return displayedRows.value;
     },
     get columns() {
       return columns.value;
@@ -341,6 +466,9 @@
       get rowSelection() {
         return rowSelection.value;
       },
+      get pagination() {
+        return paginationState.value;
+      },
     },
     getRowId: (row) => String(row.id),
     // A row opted out of the single-row delete action (`_deletable: false`) is
@@ -354,6 +482,17 @@
     },
     enableSorting: false,
     getCoreRowModel: getCoreRowModel(),
+    get manualPagination() {
+      return isEndpointMode.value;
+    },
+    // -1 (TanStack's own "unknown" sentinel) outside endpoint mode — harmless, since nothing
+    // reads it there (`AdminTable`/`BaseElementIndex` only show pagination controls once
+    // `getPageCount() > 1`, and upfront mode never sets `total`/`from`/`to` to make that
+    // branch relevant either).
+    get pageCount() {
+      return isEndpointMode.value ? (pagination.value?.last_page ?? -1) : -1;
+    },
+    onPaginationChange,
   });
 
   const selectedIds = computed(() =>
@@ -361,6 +500,11 @@
   );
 
   function onReorder(startIndex: number, finishIndex: number): void {
+    if (isEndpointMode.value) {
+      onReorderWithinPage(startIndex, finishIndex);
+      return;
+    }
+
     const previous = rows.value;
     const reordered = [...previous];
     const [moved] = reordered.splice(startIndex, 1);
@@ -395,6 +539,71 @@
       });
   }
 
+  /**
+   * Endpoint mode's own reorder: `startIndex`/`finishIndex` are only positions *within the
+   * currently loaded page* (there's no full `ids` list to post — every other page's rows
+   * were never fetched), so this posts the moved row's new *absolute* position across the
+   * whole dataset instead — `Table::reorderable()`'s same URL, a different payload shape,
+   * mirroring the established `id`/`ids` dual-payload precedent `deletable()` already uses.
+   */
+  function onReorderWithinPage(startIndex: number, finishIndex: number): void {
+    const previous = pageRows.value;
+    const reordered = [...previous];
+    const [moved] = reordered.splice(startIndex, 1);
+
+    if (!moved || !pagination.value) {
+      return;
+    }
+
+    reordered.splice(finishIndex, 0, moved);
+    pageRows.value = reordered;
+
+    const toPosition =
+      (pagination.value.current_page - 1) * props.node.props.perPage + finishIndex;
+
+    actionClient
+      .post(props.node.props.reorderUrl!, {id: moved.id, toPosition})
+      .then(() => {
+        Craft.cp?.displayNotice?.(
+          props.node.props.reorderSuccessMessage ?? t('Order updated.')
+        );
+        // Re-fetches rather than trusting the optimistic splice above: a cross-page shift
+        // can change which rows belong on *this* page at all (the last row bumped off the
+        // end into the next one, say), which a same-page splice alone can't reflect.
+        fetchPage(pagination.value!.current_page);
+      })
+      .catch(() => {
+        pageRows.value = previous;
+        Craft.cp?.displayError?.(
+          props.node.props.reorderFailMessage ?? t('Couldn’t reorder.')
+        );
+      });
+  }
+
+  /** "Move to page…" (see `MoveToPageButton.vue`) — always moves the selected row to the
+   *  chosen page's first slot, matching legacy's own `AdminTableMoveToPageHud`/
+   *  `AdminTable::moveToPage()`. Posts the plain `page` number, not a computed
+   *  `toPosition` — the endpoint owns that arithmetic (`(page - 1) * perPage`), the same
+   *  `Table::moveToPageUrl()` documents. Only ever called with exactly one id selected
+   *  (see the footer template), so clears the selection on success the same way
+   *  {@link deleteSelected} does. */
+  function moveToPage(id: TableRow['id'], page: number): void {
+    actionClient
+      .post(props.node.props.moveToPageUrl!, {id, page})
+      .then(() => {
+        Craft.cp?.displayNotice?.(
+          props.node.props.reorderSuccessMessage ?? t('Order updated.')
+        );
+        table.resetRowSelection();
+        fetchPage(pagination.value!.current_page);
+      })
+      .catch(() => {
+        Craft.cp?.displayError?.(
+          props.node.props.reorderFailMessage ?? t('Couldn’t reorder.')
+        );
+      });
+  }
+
   async function deleteRow(row: TableRow): Promise<void> {
     const message = props.node.props.deleteConfirmMessage ?? t('Are you sure?');
 
@@ -456,16 +665,99 @@
     return action.allowMultiple === false && selectedIds.value.length > 1;
   }
 
-  /** Adapts a menu action's items to `ActionMenu`'s item shape. */
-  function bulkActionMenuItems(menu: BulkActionMenu): ActionItemButton[] {
-    return menu.items.map((item) => ({
+  /** Adapts a `BulkActionSingle` to `ActionMenu`'s item shape. */
+  function bulkActionToItem(action: BulkActionSingle): ActionItemButton {
+    return {
       type: 'button',
-      label: item.label,
-      disabled: bulkActionDisabled(item),
-      onClick: () => performBulkAction(item),
-    }));
+      label: action.label,
+      disabled: bulkActionDisabled(action),
+      onClick: () => performBulkAction(action),
+    };
   }
 
+  /**
+   * `MoveToPageButton` embedded as a single "Move to page…" item inside the
+   * consolidated Actions menu (below) via `ActionMenu`'s `{type: 'display'}`
+   * escape hatch — matching the real Entries index's own selection-footer
+   * convention (an "Actions" menu holding uncommon per-selection actions,
+   * "Move to…" among them) instead of a standalone footer button or, worse, a
+   * disclosure control on every row. `display` items render through an
+   * isolated `vueRender()` tree of their own (see `ActionMenu.vue`'s
+   * `displayToNode()`) rather than Vue's normal patch path — the same
+   * mechanism that makes `craft-popover` safe to nest inside an already-open
+   * `craft-action-menu` at all (a full unmount/remount on every reveal, never
+   * a patch of DOM the overlay has relocated). `is` must be a plain
+   * `Component` with no prop channel of its own (`displayToNode()` calls
+   * `createVNode(component)` with none), so this closure-based wrapper reads
+   * `pagination`/`loading`/`selectedIds`/`moveToPage` directly from the
+   * surrounding scope instead of `MoveToPageButton`'s normal props — a
+   * completely ordinary Vue closure-component, not a new reusable one.
+   */
+  const MoveToPageDisplay = defineComponent({
+    name: 'MoveToPageDisplay',
+    setup() {
+      return () =>
+        h(MoveToPageButton, {
+          currentPage: pagination.value?.current_page ?? 1,
+          lastPage: pagination.value?.last_page ?? 1,
+          loading: loading.value,
+          onMove: (page: number) => {
+            const id = selectedIds.value[0];
+            if (id !== undefined) {
+              moveToPage(id, page);
+            }
+          },
+        });
+    },
+  });
+
+  /**
+   * Everything the selection footer's single "Actions" menu offers: each
+   * `Table::bulkActions()` entry (a standalone button, or a labeled group for
+   * a `BulkActionMenu` — `ActionItemGroup` is one level deep, which is exactly
+   * what a `BulkActionMenu`'s own flat `items` list needs), then "Move to
+   * page…", then "Delete" last and destructive-styled — the same ordering the
+   * real Entries index uses for its own equivalent items.
+   */
+  const footerActionItems = computed((): ActionItems => {
+    const items: ActionItems = props.node.props.bulkActions.map((action) =>
+      isBulkActionMenu(action)
+        ? {
+            type: 'group',
+            heading: action.label,
+            items: action.items.map(bulkActionToItem),
+          }
+        : bulkActionToItem(action)
+    );
+
+    if (showMoveToPage.value && selectedIds.value.length === 1) {
+      items.push({type: 'display', is: MoveToPageDisplay});
+    }
+
+    if (props.node.props.deleteUrl && props.node.props.bulkDeletable) {
+      items.push({
+        type: 'button',
+        label: t('Delete'),
+        variant: 'danger',
+        onClick: deleteSelected,
+      });
+    }
+
+    return items;
+  });
+
+  /**
+   * `Table::statusActions()`'s own items, adapted the same way a `bulkActions()`
+   * entry is — but rendered as their own dedicated "Set status" button (see the
+   * template), never folded into `footerActionItems`'s "Actions" menu. Mirrors
+   * `BulkActionsBar.vue`'s real `SET_STATUS_KEY` pull-out exactly: Set Status
+   * is the most-reached-for action, so it always gets its own button alongside
+   * "Actions" rather than living inside it.
+   */
+  const statusActionItems = computed((): ActionItemButton[] =>
+    props.node.props.statusActions.map(bulkActionToItem)
+  );
+
   // This Node's data is set once, from the page's own initial render — not read from a
   // live-fetching endpoint the way an element index table is — so a mutation only updates
   // this component's own local `rows`. Other props derived from the same server-side state
@@ -533,10 +825,15 @@
         :table="table"
         :reorderable="!!node.props.reorderUrl && !search"
         :selectable="hasBulkFooter"
+        :loading="loading"
+        :from="footerFrom"
+        :to="footerTo"
+        :total="footerTotal"
         @reorder="onReorder"
       >
         <template #empty-row>
           <Empty
+            v-if="!loading"
             :label="
               search
                 ? t('No results for “{search}”.', {search})
@@ -547,85 +844,64 @@
       </AdminTable>
 
       <!--
-        The element index's own footer (`BaseElementIndex.vue`, reached via
-        `AdminTable`) never renders here: it needs `from`/`to`/`total` props
-        this component doesn't pass (nothing paginates a Table Node's data —
-        every row is always on the one page), and its selection/bulk-action
-        row (`BulkActionsBar`) is wired to real Craft elements end to end
-        (`PerformElementActionController` resolves an `ElementQuery` and a
-        registered `ElementAction` — there's no fitting either into it for
-        these plain PHP-object rows). This replicates just its appearance —
-        same background, border, and copy — driven by this component's own
-        `rows`/`selectedIds` instead.
+        `from`/`to`/`total` (above) are what turn on `BaseElementIndex`'s own built-in footer
+        — real "X – Y of Z items" text always, plus real prev/next pagination controls once
+        `pageCount > 1` (endpoint mode only; `pageCount` is -1 outside it, see the
+        `useVueTable` config above) — no new pagination UI needed here, in either mode. Its
+        *other* footer concern, the selection/bulk-action bar (`BulkActionsBar`), stays inert
+        regardless (it only renders once `actions.length > 0`, and `AdminTable`/
+        `BaseElementIndex` are never given any here): `PerformElementActionController`, what it
+        posts to, resolves a real `ElementQuery` and a registered `ElementAction`, and there's
+        no fitting these plain PHP-object rows into that pipeline without building a parallel
+        Element-like system, wildly out of proportion to the need. So this component still
+        carries its own small, self-contained selection/bulk-actions footer below (same
+        background/border/copy as the real one) — shown only once something's selected,
+        stacking beneath the real footer above it rather than replacing any part of it.
       -->
-      <div v-if="filteredRows.length" class="admin-table-footer">
-        <template v-if="selectedIds.length">
-          <Text
-            as="span"
-            class="admin-table-footer__count"
-            template="{count, plural, =1{# selected} other{# selected}}"
-            :params="{count: selectedIds.length}"
-          />
-          <craft-button
-            type="button"
-            variant="plain"
-            size="small"
-            @click="table.resetRowSelection()"
-            >{{ t('Clear selection') }}</craft-button
-          >
-          <div class="admin-table-footer__actions">
-            <template
-              v-for="(action, index) in node.props.bulkActions"
-              :key="index"
-            >
-              <ActionMenu
-                v-if="isBulkActionMenu(action)"
-                :actions="bulkActionMenuItems(action)"
-                :icon="action.icon"
-                :label="action.label || undefined"
-              >
-                <!--
-                  Omitted (rather than `v-if="action.label"` around the button
-                  alone) when there's no label, so ActionMenu's own default
-                  invoker — an icon-only button, already accessible via its own
-                  `label` prop above — renders instead of an empty one here.
-                -->
-                <template v-if="action.label" #invoker="{attributes}">
-                  <craft-button type="button" size="small" v-bind="attributes">
-                    {{ action.label }}
-                    <craft-icon name="chevron-down" slot="suffix"></craft-icon>
-                  </craft-button>
-                </template>
-              </ActionMenu>
-              <craft-button
-                v-else
-                type="button"
-                size="small"
-                :disabled="bulkActionDisabled(action)"
-                @click="performBulkAction(action)"
-                >{{ action.label }}</craft-button
-              >
-            </template>
-            <craft-button
-              v-if="node.props.deleteUrl && node.props.bulkDeletable"
-              type="button"
-              variant="danger"
-              size="small"
-              @click="deleteSelected"
-              >{{ t('Delete') }}</craft-button
-            >
-          </div>
-        </template>
+      <div v-if="selectedIds.length" class="admin-table-footer">
         <Text
-          v-else
           as="span"
-          template="{from} – {to} of {total, plural, =1{# item} other{# items}}"
-          :params="{
-            from: 1,
-            to: filteredRows.length,
-            total: filteredRows.length,
-          }"
+          class="admin-table-footer__count"
+          template="{count, plural, =1{# selected} other{# selected}}"
+          :params="{count: selectedIds.length}"
         />
+        <craft-button
+          type="button"
+          variant="plain"
+          size="small"
+          @click="table.resetRowSelection()"
+          >{{ t('Clear selection') }}</craft-button
+        >
+        <div
+          v-if="statusActionItems.length || footerActionItems.length"
+          class="admin-table-footer__actions"
+        >
+          <!--
+            Its own dedicated button, matching Entries' own `BulkActionsBar.vue` —
+            Set Status always stays separate from "Actions" below, since it's the
+            most-reached-for action, not because it's architecturally different.
+          -->
+          <ActionMenu
+            v-if="statusActionItems.length"
+            :actions="statusActionItems"
+            :label="t('Set status')"
+          >
+            <template #invoker="{attributes}">
+              <craft-button type="button" size="small" v-bind="attributes">
+                {{ t('Set status') }}
+                <craft-icon name="chevron-down" slot="suffix"></craft-icon>
+              </craft-button>
+            </template>
+          </ActionMenu>
+          <ActionMenu v-if="footerActionItems.length" :actions="footerActionItems" :label="t('Actions')">
+            <template #invoker="{attributes}">
+              <craft-button type="button" size="small" v-bind="attributes">
+                {{ t('Actions') }}
+                <craft-icon name="chevron-down" slot="suffix"></craft-icon>
+              </craft-button>
+            </template>
+          </ActionMenu>
+        </div>
       </div>
     </craft-pane>
   </div>
diff --git a/src/Form/Nodes/Table.php b/src/Form/Nodes/Table.php
index c8495f6cb6f..897f625368b 100644
--- a/src/Form/Nodes/Table.php
+++ b/src/Form/Nodes/Table.php
@@ -12,6 +12,7 @@
 use CraftCms\Cms\Shared\Enums\Color;
 use CraftCms\Cms\Support\Html;
 use Illuminate\Support\Traits\Conditionable;
+use function CraftCms\Cms\t;
 
 /**
  * A listing of rows (e.g. product types, gateways) rendered as a Form Node, backed by the
@@ -32,6 +33,12 @@ class Table implements Node
     /** @var list<array<string, mixed>> */
     private array $rows = [];
 
+    private ?string $dataUrl = null;
+
+    private int $perPage = 100;
+
+    private ?string $moveToPageUrl = null;
+
     private ?string $emptyMessage = null;
 
     private ?string $createLabel = null;
@@ -56,6 +63,9 @@ class Table implements Node
     /** @var list<array<string, mixed>> */
     private array $bulkActions = [];
 
+    /** @var list<array<string, mixed>> */
+    private array $statusActions = [];
+
     private bool $searchable = false;
 
     private ?string $searchPlaceholder = null;
@@ -110,11 +120,27 @@ public function columns(array $columns): static
      */
     public function rows(array $rows): static
     {
-        $this->rows = array_map(self::resolveRowStatus(...), $rows);
+        $this->rows = self::prepareRows($rows);
+        $this->dataUrl = null;
 
         return $this;
     }
 
+    /**
+     * Resolves `_status` the same way for a row whether it's handed to {@see rows()} directly
+     * (upfront mode) or built by a controller's own paginated `tableData()`-style action
+     * ({@see dataUrl()} mode, where that action's response bypasses `rows()` entirely) — call
+     * this on a page's worth of rows before returning them as JSON, so both modes resolve
+     * `_status` identically.
+     *
+     * @param  list<array<string, mixed>>  $rows
+     * @return list<array<string, mixed>>
+     */
+    public static function prepareRows(array $rows): array
+    {
+        return array_map(self::resolveRowStatus(...), $rows);
+    }
+
     /** @param array<string, mixed> $row */
     private static function resolveRowStatus(array $row): array
     {
@@ -133,6 +159,41 @@ private static function resolveRowStatus(array $row): array
         return $row;
     }
 
+    /**
+     * Alternative to {@see rows()} for a list too large to hand over upfront: the client fetches
+     * each page (and, when {@see searchable()} is also on, searches) from `$url` instead, posting
+     * `{page, per_page, search}` and expecting back `{data: <rows, same shape rows() documents>,
+     * pagination: {total, per_page, current_page, last_page, next_page_url, prev_page_url, from,
+     * to}}` — build that response the same way `CraftCms\Cms\Http\ViewModels\
+     * ContentIndexViewModel::pagination()` does (a plain `Illuminate\Pagination\
+     * LengthAwarePaginator` over an already-sliced array; no Eloquent query required), and run
+     * each page's rows through {@see prepareRows()} before responding.
+     *
+     * Mutually exclusive with {@see rows()} — calling one clears whichever the other set.
+     */
+    public function dataUrl(string $url, int $perPage = 100): static
+    {
+        $this->dataUrl = $url;
+        $this->perPage = $perPage;
+        $this->rows = [];
+
+        return $this;
+    }
+
+    /**
+     * Only meaningful alongside {@see dataUrl()}: the endpoint a "Move to page…" control posts
+     * `{id, page}` to, for moving a row to a different page than the one it's currently on (the
+     * within-page drag-and-drop {@see reorderable()} already offers can't reach a page that
+     * isn't loaded). The endpoint owns computing the row's new absolute position from `page` and
+     * applying it — this Node has no opinion on how.
+     */
+    public function moveToPageUrl(string $url): static
+    {
+        $this->moveToPageUrl = $url;
+
+        return $this;
+    }
+
     public function emptyMessage(?string $emptyMessage): static
     {
         $this->emptyMessage = $emptyMessage;
@@ -201,29 +262,35 @@ public function deletable(string $url, ?string $confirmMessage = null, bool $bul
     }
 
     /**
-     * Adds bulk action buttons to the selection footer (shown once at least one row is
-     * selected, alongside "Clear selection" and — if the table is {@see deletable()} with
-     * `bulk: true` — a trailing "Delete" button). Every action posts `{ids: <selected row
-     * ids>, ...params}` to its own `url`; there's no client-side notion of what the action
-     * does beyond that; the endpoint owns applying it and returning a normal flash response.
+     * Adds items to the selection footer's single "Actions" menu (shown once at least one
+     * row is selected, alongside "Clear selection") — matching the real Entries index's own
+     * selection-footer convention: one "Actions" menu holding every uncommon per-selection
+     * action (a "move to page…" control when {@see moveToPageUrl()} is set, a trailing
+     * destructive "Delete" when the table is {@see deletable()} with `bulk: true`, and every
+     * entry here), never a separate button per action or a disclosure control on each row.
+     * Every action posts `{ids: <selected row ids>, ...params}` to its own `url`; there's no
+     * client-side notion of what the action does beyond that; the endpoint owns applying it
+     * and returning a normal flash response.
      *
      * Each entry in `$actions` is either:
      * - a single action: `['label' => string, 'url' => string, 'params'? => array<string,
      *   mixed>, 'allowMultiple'? => bool]` — `params` is merged into the posted body
-     *   alongside `ids`; `allowMultiple` (default `true`) disables the button whenever more
+     *   alongside `ids`; `allowMultiple` (default `true`) disables the item whenever more
      *   than one row is selected, for an action that only makes sense against one row at a
      *   time (a UI nicety only — the endpoint still gets whatever `ids` a request carries,
      *   and is responsible for enforcing that itself if it matters).
-     * - a dropdown menu of single actions in the same shape: `['label'? => string, 'icon'? =>
-     *   string, 'items' => list<array{label: string, url: string, params?: array<string,
-     *   mixed>, allowMultiple?: bool}>]`. Omit `label` (pairing it with an `icon`) for an
-     *   icon-only invoker — the button shows just that icon, no visible text — matching
-     *   legacy's own unlabeled gear-icon menu for a single, infrequently-needed item (e.g.
-     *   shipping categories' "Set Default Category").
+     * - a labeled group of single actions in the same shape: `['label'? => string, 'items' =>
+     *   list<array{label: string, url: string, params?: array<string, mixed>, allowMultiple?:
+     *   bool}>]`, shown as a heading followed by its items within the same "Actions" menu.
+     *   Omitting `label` folds the items in unheaded, blended into the flat list — legacy's
+     *   own unlabeled gear-icon menu for a single, infrequently-needed item (e.g. shipping
+     *   categories' "Set Default Category") reads this way now that there's one shared
+     *   invoker rather than its own separate icon-only button; an `icon` alone no longer
+     *   produces a distinct invoker and is ignored.
      *
      * Reaches for a row-selection checkbox column the same way `deletable(..., bulk: true)`
-     * does — either one turns selection on; a table with both just contributes its own
-     * button(s) to the same footer.
+     * does — either one turns selection on; a table with both just contributes to the same
+     * footer's "Actions" menu.
      *
      * @param  list<array<string, mixed>>  $actions
      */
@@ -235,11 +302,37 @@ public function bulkActions(array $actions): static
     }
 
     /**
-     * Shows a text search box above the table, filtering rows entirely client-side — every row
-     * is already loaded (there's no pagination to search across, unlike the legacy
-     * `Craft.VueAdminTable` screen this usually replaces, which searched server-side against a
-     * paginated result set). See {@see rows()} for how a row controls what it matches against.
-     * Most tables don't need this — reach for it only where legacy actually had `search: true`.
+     * Adds a dedicated "Set status" button to the selection footer, kept separate from
+     * {@see bulkActions()}'s own "Actions" menu — matching the real Craft element index's own
+     * `BulkActionsBar.vue`, which always pulls its Set Status button out of the generic
+     * actions menu (it identifies it there by a well-known PHP action class key) specifically
+     * *because* it's the most-reached-for action, not because it's a different kind of thing.
+     * "Set status" is the button's own fixed label, not configurable here — `$items` is just
+     * its menu content, the same shape as a {@see bulkActions()} single action: `list<array{
+     * label: string, url: string, params?: array<string, mixed>, allowMultiple?: bool}>`
+     * (typically `Enabled`/`Disabled`, each posting a different `status` param to one `url`).
+     *
+     * Reaches for a row-selection checkbox column the same way `deletable(..., bulk: true)`/
+     * `bulkActions()` do — any of the three turns selection on.
+     *
+     * @param  list<array<string, mixed>>  $items
+     */
+    public function statusActions(array $items): static
+    {
+        $this->statusActions = $items;
+
+        return $this;
+    }
+
+    /**
+     * Shows a text search box above the table. With {@see rows()} (the default), it filters
+     * entirely client-side — every row is already loaded. With {@see dataUrl()}, the query is
+     * instead sent as a `search` param to that endpoint (resetting to page 1), matching the
+     * legacy `Craft.VueAdminTable` screens this usually replaces, which searched server-side
+     * against a paginated result set — see {@see dataUrl()} for the exact request/response
+     * contract. See {@see rows()} for how a row controls what it matches against in the
+     * client-side case. Most tables don't need this — reach for it only where legacy actually
+     * had `search: true`.
      */
     public function searchable(?string $placeholder = null): static
     {
@@ -270,7 +363,16 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
             default => '',
         };
 
-        if (empty($rows)) {
+        if ($node->props['dataUrl'] !== null) {
+            // Same "no sensible non-JS equivalent" reasoning already applied to reorder/delete/
+            // bulk-actions/search: fetching and paginating rows client-side has no plain-HTML
+            // fallback, so this renders neither an empty table nor (potentially misleadingly)
+            // the table's own `emptyMessage`, which describes a genuinely empty table, not one
+            // this fallback simply can't populate.
+            $table = Html::tag('p', Html::encode(t('This table requires JavaScript.')), [
+                'class' => ['zilch'],
+            ]);
+        } elseif (empty($rows)) {
             $table = Html::tag('p', Html::encode($node->props['emptyMessage'] ?? ''), [
                 'class' => ['zilch'],
             ]);
@@ -349,6 +451,9 @@ public function props(): array
         return [
             'columns' => $this->columns,
             'rows' => $this->rows,
+            'dataUrl' => $this->dataUrl,
+            'perPage' => $this->perPage,
+            'moveToPageUrl' => $this->moveToPageUrl,
             'emptyMessage' => $this->emptyMessage,
             'createLabel' => $this->createLabel,
             'createUrl' => $this->createUrl,
@@ -360,6 +465,7 @@ public function props(): array
             'deleteConfirmMessage' => $this->deleteConfirmMessage,
             'bulkDeletable' => $this->bulkDeletable,
             'bulkActions' => $this->bulkActions,
+            'statusActions' => $this->statusActions,
             'searchable' => $this->searchable,
             'searchPlaceholder' => $this->searchPlaceholder,
         ];

From d34c3b4e61c75e912f16d623cc63f2b8315486c8 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Tue, 22 Sep 2026 21:37:22 +0100
Subject: [PATCH 16/19] fix action menu bug causing stuck layouts

---
 resources/js/modules/forms/AdminTableNode.vue | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/resources/js/modules/forms/AdminTableNode.vue b/resources/js/modules/forms/AdminTableNode.vue
index e3dccbb2739..e3e3a9cbe64 100644
--- a/resources/js/modules/forms/AdminTableNode.vue
+++ b/resources/js/modules/forms/AdminTableNode.vue
@@ -270,10 +270,14 @@
     isEndpointMode.value ? (pagination.value?.from ?? 0) : 1
   );
   const footerTo = computed(() =>
-    isEndpointMode.value ? (pagination.value?.to ?? 0) : displayedRows.value.length
+    isEndpointMode.value
+      ? (pagination.value?.to ?? 0)
+      : displayedRows.value.length
   );
   const footerTotal = computed(() =>
-    isEndpointMode.value ? (pagination.value?.total ?? 0) : displayedRows.value.length
+    isEndpointMode.value
+      ? (pagination.value?.total ?? 0)
+      : displayedRows.value.length
   );
 
   const columnHelper = createCraftColumnHelper<TableRow>();
@@ -392,7 +396,9 @@
           const actions = [];
 
           if (row.original._deletable !== false) {
-            actions.push(h(DeleteButton, {onClick: () => deleteRow(row.original)}));
+            actions.push(
+              h(DeleteButton, {onClick: () => deleteRow(row.original)})
+            );
           }
 
           return actions;
@@ -559,7 +565,8 @@
     pageRows.value = reordered;
 
     const toPosition =
-      (pagination.value.current_page - 1) * props.node.props.perPage + finishIndex;
+      (pagination.value.current_page - 1) * props.node.props.perPage +
+      finishIndex;
 
     actionClient
       .post(props.node.props.reorderUrl!, {id: moved.id, toPosition})
@@ -772,7 +779,7 @@
 
 <template>
   <div :data-form-node="node.uid">
-    <LayoutSlot v-if="node.props.createUrl" name="actions">
+    <LayoutSlot v-if="node.props.createUrl" name="content-actions">
       <CpLink
         variant="accent"
         appearance="button"
@@ -781,7 +788,7 @@
         >{{ node.props.createLabel }}</CpLink
       >
     </LayoutSlot>
-    <LayoutSlot v-else-if="createMenuActions.length" name="actions">
+    <LayoutSlot v-else-if="createMenuActions.length" name="content-actions">
       <ActionMenu :actions="createMenuActions">
         <template #invoker="{attributes}">
           <craft-button
@@ -893,7 +900,11 @@
               </craft-button>
             </template>
           </ActionMenu>
-          <ActionMenu v-if="footerActionItems.length" :actions="footerActionItems" :label="t('Actions')">
+          <ActionMenu
+            v-if="footerActionItems.length"
+            :actions="footerActionItems"
+            :label="t('Actions')"
+          >
             <template #invoker="{attributes}">
               <craft-button type="button" size="small" v-bind="attributes">
                 {{ t('Actions') }}

From 0d903859b980ea164fd5a29de4ecf8850959c5d4 Mon Sep 17 00:00:00 2001
From: Nathaniel Hammond <nathaniel@pixelandtonic.com>
Date: Tue, 22 Sep 2026 22:26:12 +0100
Subject: [PATCH 17/19] matching table styling

---
 resources/js/modules/forms/AdminTableNode.vue |  9 ++++--
 resources/js/pages/Form.vue                   | 28 +++++++++++++++----
 src/Form/Nodes/Table.php                      | 11 ++++++++
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/resources/js/modules/forms/AdminTableNode.vue b/resources/js/modules/forms/AdminTableNode.vue
index e3e3a9cbe64..0e5014a1fa1 100644
--- a/resources/js/modules/forms/AdminTableNode.vue
+++ b/resources/js/modules/forms/AdminTableNode.vue
@@ -163,6 +163,7 @@
       statusActions: BulkActionSingle[];
       searchable: boolean;
       searchPlaceholder: string | null;
+      bordered: boolean;
     }>;
   }>();
 
@@ -783,6 +784,7 @@
       <CpLink
         variant="accent"
         appearance="button"
+        icon="plus"
         :href="node.props.createUrl"
         :inertia="false"
         >{{ node.props.createLabel }}</CpLink
@@ -804,7 +806,10 @@
       </ActionMenu>
     </LayoutSlot>
 
-    <craft-pane padding="0" appearance="raised">
+    <component
+      :is="node.props.bordered ? 'craft-pane' : 'div'"
+      v-bind="node.props.bordered ? {padding: '0', appearance: 'raised'} : {}"
+    >
       <div v-if="node.props.searchable" slot="header-actions">
         <CraftInput
           name="search"
@@ -914,7 +919,7 @@
           </ActionMenu>
         </div>
       </div>
-    </craft-pane>
+    </component>
   </div>
 </template>
 
diff --git a/resources/js/pages/Form.vue b/resources/js/pages/Form.vue
index ab728e402e7..5923edfaa87 100644
--- a/resources/js/pages/Form.vue
+++ b/resources/js/pages/Form.vue
@@ -48,6 +48,8 @@
      * the element editor's sidebar shows via its own `metadataHtml` payload prop.
      */
     metadataHtml?: string;
+    /** Caps and centers the content column (default on) — see `UseAppLayoutOptions.contentMaxWidth`. Pass `false` for a full-width screen (an index, say). */
+    contentMaxWidth?: boolean;
   }>();
   const emit = defineEmits<{
     (event: 'change', change: FormChange, values: FormPayload['values']): void;
@@ -123,6 +125,16 @@
       })) ?? []
   );
 
+  /** A `Form` whose sole node is an unbordered `Table` also skips this component's own outer pane — redundant chrome around a Table that already manages its own layout. */
+  const isBareTable = computed(() => {
+    const [node, ...rest] = props.form.nodes;
+    return (
+      rest.length === 0 &&
+      node?.component === 'craft:admin-table' &&
+      node.props.bordered === false
+    );
+  });
+
   // `PageScreen` shows the Save button purely on `form` being truthy (`v-if="form"`) —
   // it doesn't look at `onSave`/`submit`. Passing `inertiaForm` unconditionally would
   // show a Save button with nothing to save on a node-only screen (a listing, say).
@@ -130,7 +142,7 @@
     form: props.submit ? inertiaForm : null,
     defaultFormActions: props.defaultFormActions,
     formActions: translatedFormActions.value,
-    contentMaxWidth: true,
+    contentMaxWidth: props.contentMaxWidth ?? true,
     onSave: save,
   });
 
@@ -177,8 +189,14 @@
   -->
   <component :is="submit ? 'form' : 'div'" @submit.prevent="save?.()">
     <CpContainer>
-      <craft-pane appearance="raised">
-        <craft-field-group class="py-4">
+      <component
+        :is="isBareTable ? 'div' : 'craft-pane'"
+        v-bind="isBareTable ? {} : {appearance: 'raised'}"
+      >
+        <component
+          :is="isBareTable ? 'div' : 'craft-field-group'"
+          v-bind="isBareTable ? {} : {class: 'py-4'}"
+        >
           <FormRenderer
             ref="renderer"
             :payload="form"
@@ -195,8 +213,8 @@
               <slot :name="slotName" v-bind="slotProps" />
             </template>
           </FormRenderer>
-        </craft-field-group>
-      </craft-pane>
+        </component>
+      </component>
     </CpContainer>
   </component>
   <LayoutSlot v-if="metadataHtml" name="details">
diff --git a/src/Form/Nodes/Table.php b/src/Form/Nodes/Table.php
index 897f625368b..4a97c7b4f8e 100644
--- a/src/Form/Nodes/Table.php
+++ b/src/Form/Nodes/Table.php
@@ -70,6 +70,8 @@ class Table implements Node
 
     private ?string $searchPlaceholder = null;
 
+    private bool $bordered = false;
+
     public function __construct(private readonly string $uid) {}
 
     public static function make(string $uid): self
@@ -342,6 +344,14 @@ public function searchable(?string $placeholder = null): static
         return $this;
     }
 
+    /** Toggles the table's own bordered/raised card chrome (off by default, matching an index's bare look; opt in when embedding a Table alongside other content). See `Form.vue` for the matching outer-pane behavior. */
+    public function bordered(bool $bordered = true): static
+    {
+        $this->bordered = $bordered;
+
+        return $this;
+    }
+
     public static function renderHtml(NodePayload $node, FormPayload $payload, FormHtmlRenderer $renderer): string
     {
         $columns = $node->props['columns'];
@@ -468,6 +478,7 @@ public function props(): array
             'statusActions' => $this->statusActions,
             'searchable' => $this->searchable,
             'searchPlaceholder' => $this->searchPlaceholder,
+            'bordered' => $this->bordered,
         ];
     }
 

From ef55725bb84710e2f3723e60eda9d9b6980ecba4 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Wed, 23 Sep 2026 11:04:17 +0200
Subject: [PATCH 18/19] Move combobox creation into reusable options

Amp-Thread-ID: https://ampcode.com/threads/T-01a0cd51-4814-728b-92b2-fae631ecdde0
---
 .../scripts/generate-vue-wrappers.js          |  23 +-
 .../src/components/combobox/combobox.ts       |  10 +-
 .../js/modules/forms/ComboboxControl.vue      |  85 ++++++-
 .../modules/forms/ComboboxCreateControl.vue   |  91 -------
 .../forms/ComboboxCreateOption.test.ts        | 230 ++++++++++++++++++
 .../modules/forms/combobox-create-option.ts   | 123 ++++++++++
 resources/js/modules/forms/combobox-create.ts | 172 -------------
 resources/js/modules/forms/register.ts        |   2 -
 .../js/pages/settings/users/Settings.test.ts  |  56 -----
 .../js/pages/settings/users/Settings.vue      | 100 +-------
 src/Form/Controls/Combobox.php                |  11 +-
 src/Form/Controls/Combobox/CreateOption.php   |  37 +++
 src/Form/Controls/ComboboxCreate.php          | 101 --------
 src/Form/FormControlTypes.php                 |   2 -
 src/Http/ViewModels/UserSettingsViewModel.php |  16 +-
 .../Settings/UserSettingsControllerTest.php   |   9 +-
 tests/Unit/Form/ScalarControlsTest.php        |  25 ++
 17 files changed, 543 insertions(+), 550 deletions(-)
 delete mode 100644 resources/js/modules/forms/ComboboxCreateControl.vue
 create mode 100644 resources/js/modules/forms/ComboboxCreateOption.test.ts
 create mode 100644 resources/js/modules/forms/combobox-create-option.ts
 delete mode 100644 resources/js/modules/forms/combobox-create.ts
 create mode 100644 src/Form/Controls/Combobox/CreateOption.php
 delete mode 100644 src/Form/Controls/ComboboxCreate.php

diff --git a/packages/craftcms-ui/scripts/generate-vue-wrappers.js b/packages/craftcms-ui/scripts/generate-vue-wrappers.js
index afb4a4417a8..c970c621725 100644
--- a/packages/craftcms-ui/scripts/generate-vue-wrappers.js
+++ b/packages/craftcms-ui/scripts/generate-vue-wrappers.js
@@ -175,7 +175,8 @@ const VALUE_COMPONENTS = [
     tagName: 'craft-input-file',
     className: 'CraftInputFile',
     fileName: 'CraftInputFile',
-    modelType: "import('../components/input-file/input-file.ts.mjs').default['modelValue']",
+    modelType:
+      "import('../components/input-file/input-file.ts.mjs').default['modelValue']",
     importPath: '../components/input-file/input-file',
     slots: [
       'label',
@@ -654,6 +655,9 @@ function generateComboboxWrapper(component) {
   });
 
   const model = defineModel<${component.modelType}>();
+  const emit = defineEmits<{
+    'model-value-changed': [event: CustomEvent, cancelModelUpdate: () => void];
+  }>();
 
   withDefaults(
     defineProps<{
@@ -675,12 +679,20 @@ function generateComboboxWrapper(component) {
     }
   );
 
-  function onModelValueChanged(event: Event) {
+  function onModelValueChanged(event: CustomEvent) {
+    // Lion's event is not cancelable; let consumers reject a transient selection
+    // before the Vue model is updated.
+    let canceled = false;
+    emit('model-value-changed', event, () => (canceled = true));
+    if (canceled) {
+      return;
+    }
+
     // Lion fires an initial model-value-changed with detail.initialize=true and
     // its default (empty) value while the element boots — before Vue's
     // .modelValue binding has settled. Honoring that flag (as Lion's own
     // form-group repropagation does) prevents it from clobbering a bound value.
-    if ((event as CustomEvent).detail?.initialize) {
+    if (event.detail?.initialize) {
       return;
     }
     model.value = (event.target as ${component.className})?.modelValue ?? undefined;
@@ -723,6 +735,10 @@ function generateValueDeclaration(component) {
     component.tagName === 'craft-input'
       ? `  textExpanderTriggers?: import('../components/text-expander/text-expander').TextExpanderTriggers;\n`
       : '';
+  const comboboxEvent =
+    component.tagName === 'craft-combobox'
+      ? `  'onModel-value-changed'?: (event: CustomEvent, cancelModelUpdate: () => void) => void;\n`
+      : '';
 
   return `/**
  * Auto-generated type declaration for ${component.fileName}.vue
@@ -734,6 +750,7 @@ declare const _default: DefineComponent<{
 ${textExpanderProp}
   modelValue?: ${component.modelType};
   'onUpdate:modelValue'?: (val: ${component.modelType}) => void;
+${comboboxEvent}
 }>;
 export default _default;
 `;
diff --git a/packages/craftcms-ui/src/components/combobox/combobox.ts b/packages/craftcms-ui/src/components/combobox/combobox.ts
index 8ec17fc8ca3..e56f33910bb 100644
--- a/packages/craftcms-ui/src/components/combobox/combobox.ts
+++ b/packages/craftcms-ui/src/components/combobox/combobox.ts
@@ -641,15 +641,7 @@ export default class CraftCombobox extends LionCombobox {
     }
   }
 
-  /**
-   * Commits a new set of selected values for a multi-select combobox — resets the free-text
-   * query, closes the listbox, re-renders options, syncs the hidden native inputs used for real
-   * form submission, and announces the change. `protected` (not `private`) so a subclass that
-   * needs to inject a value outside the normal option-click/keyboard paths (e.g.
-   * {@link CraftComboboxCreate} appending a freshly-created record's option) can reuse this
-   * exact path instead of re-deriving its side effects, which would drift out of sync over time.
-   */
-  protected changeValues(values: string[]) {
+  private changeValues(values: string[]) {
     if (this.inactive) {
       return;
     }
diff --git a/resources/js/modules/forms/ComboboxControl.vue b/resources/js/modules/forms/ComboboxControl.vue
index cd47f2df8fd..7694f617b4a 100644
--- a/resources/js/modules/forms/ComboboxControl.vue
+++ b/resources/js/modules/forms/ComboboxControl.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
+  import {nextTick, shallowRef, watch} from 'vue';
   import type {ComboboxItem} from '@craftcms/ui/components/combobox/combobox';
+  import type CraftComboboxElement from '@craftcms/ui/components/combobox/combobox';
   import CraftCombobox from '@craftcms/ui/vue/CraftCombobox.vue';
+  import {handleCreateOption} from './combobox-create-option';
   import type {FormChangeKind, FormControlPayload} from './types';
   import {inputName, serverErrorValidators} from './runtime';
 
@@ -16,7 +19,7 @@
     dir?: string;
   };
 
-  defineProps<{
+  const props = defineProps<{
     control: FormControlPayload<ComboboxControlProps>;
     value: unknown;
     label?: string;
@@ -31,14 +34,86 @@
       kind: FormChangeKind
     ): void;
   }>();
+  const options = shallowRef(props.control.props.options);
+  watch(
+    () => props.control.props.options,
+    (value) => (options.value = value)
+  );
+  let lastSelection: string | string[] = props.control.props.multiple
+    ? Array.isArray(props.value)
+      ? props.value.map(String)
+      : []
+    : String(props.value ?? '');
+  watch(
+    () => props.value,
+    (value) => {
+      if (Array.isArray(value)) {
+        lastSelection = value.map(String);
+      } else if (
+        value == null ||
+        value === '' ||
+        options.value.some((item) =>
+          (item.type === 'optgroup' ? item.options : [item]).some(
+            (option) => option.value === String(value) && !option.data?.create
+          )
+        )
+      ) {
+        lastSelection = String(value ?? '');
+      }
+    }
+  );
 
-  function onModelValueChanged(event: CustomEvent): void {
+  function onModelValueChanged(
+    event: CustomEvent,
+    cancelModelUpdate: () => void
+  ): void {
     if (event.detail?.initialize) {
       return;
     }
 
-    const value = (event.target as HTMLElement & {modelValue?: unknown})
-      .modelValue;
+    const target = event.target as CraftComboboxElement;
+    if (
+      handleCreateOption(
+        event,
+        target,
+        options.value,
+        lastSelection,
+        (updatedOptions, selected) => {
+          options.value = updatedOptions;
+          lastSelection = selected;
+          void nextTick(() => {
+            target.modelValue = selected;
+            if (!Array.isArray(selected)) {
+              const option = updatedOptions
+                .flatMap((item) =>
+                  item.type === 'optgroup' ? item.options : [item]
+                )
+                .find((item) => item.value === selected);
+              const input = target.querySelector('input');
+              if (input) input.value = option?.label ?? selected;
+            }
+          });
+        }
+      )
+    ) {
+      cancelModelUpdate();
+      if (JSON.stringify(props.value) !== JSON.stringify(lastSelection)) {
+        emit('update:value', lastSelection, 'discrete');
+      }
+      return;
+    }
+
+    const value = target.modelValue;
+    if (JSON.stringify(value) === JSON.stringify(props.value)) {
+      return;
+    }
+
+    if (event.detail?.changeSource !== 'input') {
+      lastSelection = Array.isArray(value)
+        ? value.map(String)
+        : String(value ?? '');
+    }
+
     emit(
       'update:value',
       Array.isArray(value) ? value.map(String) : String(value ?? ''),
@@ -50,7 +125,7 @@
 <template>
   <CraftCombobox
     :name="editable ? inputName(control.path) : ''"
-    :options="control.props.options"
+    :options="options"
     :placeholder="control.props.placeholder"
     :limit="control.props.limit"
     :clearable="control.props.clearable"
diff --git a/resources/js/modules/forms/ComboboxCreateControl.vue b/resources/js/modules/forms/ComboboxCreateControl.vue
deleted file mode 100644
index 87920a4d704..00000000000
--- a/resources/js/modules/forms/ComboboxCreateControl.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<script setup lang="ts">
-  import type {ComboboxItem} from '@craftcms/ui/components/combobox/combobox';
-  import type CraftComboboxCreate from './combobox-create';
-  import './combobox-create';
-  import type {FormControlPayload} from './types';
-  import {inputName, serverErrorValidators} from './runtime';
-
-  type ComboboxCreateControlProps = {
-    options: ComboboxItem[];
-    multiple?: boolean;
-    createUrl?: string;
-    createValue?: string;
-    resultKey?: string;
-    labelField?: string;
-    valueField?: string;
-    placeholder?: string;
-    limit?: number;
-    clearable?: boolean;
-    requireOptionMatch?: boolean;
-    showAllOnEmpty?: boolean;
-    showSelectedHint?: boolean;
-    dir?: string;
-  };
-
-  defineProps<{
-    control: FormControlPayload<ComboboxCreateControlProps>;
-    value: unknown;
-    label?: string;
-    editable: boolean;
-    invalid: boolean;
-    required: boolean;
-  }>();
-  const emit = defineEmits<{
-    (event: 'update:value', value: string | string[], kind: 'discrete'): void;
-  }>();
-
-  function onModelValueChanged(event: Event): void {
-    if ((event as CustomEvent).detail?.initialize) {
-      return;
-    }
-
-    const target = event.target as CraftComboboxCreate;
-    const value = target.modelValue;
-
-    // Skip the transient state where the trigger option itself is (still) selected — the
-    // control resets that back out on its own right after opening the create slideout.
-    const triggered = Array.isArray(value)
-      ? value.includes(target.createValue)
-      : value === target.createValue;
-
-    if (!triggered) {
-      emit(
-        'update:value',
-        Array.isArray(value) ? value.map(String) : String(value ?? ''),
-        'discrete'
-      );
-    }
-  }
-</script>
-
-<template>
-  <craft-combobox-create
-    :name="editable ? inputName(control.path) : ''"
-    :multiple-choice="control.props.multiple ?? false"
-    .modelValue="
-      control.props.multiple
-        ? Array.isArray(value)
-          ? value.map(String)
-          : []
-        : String(value ?? '')
-    "
-    .options="control.props.options"
-    .createUrl="control.props.createUrl ?? ''"
-    .createValue="control.props.createValue ?? '__add__'"
-    .resultKey="control.props.resultKey ?? ''"
-    .labelField="control.props.labelField ?? 'name'"
-    .valueField="control.props.valueField ?? 'id'"
-    :placeholder="control.props.placeholder"
-    .limit="control.props.limit ?? 150"
-    .clearable="control.props.clearable ?? false"
-    .requireOptionMatch="control.props.requireOptionMatch ?? false"
-    .showAllOnEmpty="control.props.showAllOnEmpty ?? false"
-    .showSelectedHint="control.props.showSelectedHint ?? false"
-    :dir="control.props.dir"
-    :required="editable && required"
-    :readonly="control.mode === 'readOnly'"
-    :disabled="control.mode === 'disabled'"
-    .validators="serverErrorValidators(invalid)"
-    @model-value-changed="onModelValueChanged"
-  />
-</template>
diff --git a/resources/js/modules/forms/ComboboxCreateOption.test.ts b/resources/js/modules/forms/ComboboxCreateOption.test.ts
new file mode 100644
index 00000000000..14c3fa8ef7b
--- /dev/null
+++ b/resources/js/modules/forms/ComboboxCreateOption.test.ts
@@ -0,0 +1,230 @@
+import {createApp, h, nextTick, ref} from 'vue';
+import {afterEach, beforeEach, expect, it, vi} from 'vite-plus/test';
+import type CraftCombobox from '@craftcms/ui/components/combobox/combobox';
+import type {ComboboxItem} from '@craftcms/ui/components/combobox/combobox';
+import '@craftcms/ui/components/combobox/combobox';
+import CraftComboboxVue from '@craftcms/ui/vue/CraftCombobox.vue';
+import ComboboxControl from './ComboboxControl.vue';
+
+const slideout = vi.hoisted(() => ({openSlideout: vi.fn()}));
+vi.mock('@/common/slideouts', () => slideout);
+
+const options = [
+  {label: 'Existing', value: '42'},
+  {
+    label: 'Create category',
+    value: '__add__',
+    data: {
+      create: {
+        url: '/categories/new',
+        resultKey: 'category',
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+  },
+];
+
+let app: ReturnType<typeof createApp> | undefined;
+let container: HTMLElement;
+const attachInternals = Object.getOwnPropertyDescriptor(
+  HTMLElement.prototype,
+  'attachInternals'
+);
+
+beforeEach(() => {
+  Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
+    configurable: true,
+    value: () => ({setFormValue: vi.fn(), setValidity: vi.fn()}),
+  });
+});
+
+afterEach(() => {
+  app?.unmount();
+  container?.remove();
+  slideout.openSlideout.mockReset();
+  if (attachInternals) {
+    Object.defineProperty(
+      HTMLElement.prototype,
+      'attachInternals',
+      attachInternals
+    );
+  } else {
+    Reflect.deleteProperty(HTMLElement.prototype, 'attachInternals');
+  }
+});
+
+async function fixture(multiple = false, items: ComboboxItem[] = options) {
+  container = document.createElement('div');
+  document.body.append(container);
+  const selection = ref<string | string[]>(multiple ? ['42'] : '42');
+  const changes = vi.fn(
+    (value: string | string[]) => (selection.value = value)
+  );
+  app = createApp({
+    render: () =>
+      h(ComboboxControl, {
+        control: {
+          component: 'craft:combobox',
+          type: 'Combobox',
+          path: ['category'],
+          deltaGroup: ['category'],
+          mode: 'editable',
+          props: {options: items, multiple},
+        },
+        value: selection.value,
+        editable: true,
+        invalid: false,
+        required: false,
+        'onUpdate:value': changes,
+      }),
+  });
+  app.mount(container);
+  await nextTick();
+  const combobox = container.querySelector('craft-combobox') as CraftCombobox;
+  await combobox.updateComplete;
+  await vi.waitFor(() =>
+    expect(combobox.querySelectorAll('craft-option')).toHaveLength(2)
+  );
+  return {combobox, selection, changes};
+}
+
+it('selects ordinary options without opening a slideout', async () => {
+  const {combobox, selection} = await fixture();
+  selection.value = '';
+  await nextTick();
+  combobox.querySelectorAll<HTMLElement>('craft-option')[0]!.click();
+
+  await vi.waitFor(() => expect(selection.value).toBe('42'));
+  expect(slideout.openSlideout).not.toHaveBeenCalled();
+});
+
+it('exposes a native selection event before syncing the Vue model', async () => {
+  container = document.createElement('div');
+  document.body.append(container);
+  const selection = ref('');
+  const updated = vi.fn(
+    (value: string | string[] | number | boolean | undefined) =>
+      (selection.value = String(value ?? ''))
+  );
+  app = createApp({
+    render: () =>
+      h(CraftComboboxVue, {
+        options,
+        modelValue: selection.value,
+        'onUpdate:modelValue': updated,
+        'onModel-value-changed': (
+          event: CustomEvent,
+          cancelModelUpdate: () => void
+        ) => {
+          if ((event.target as CraftCombobox).modelValue === '__add__') {
+            cancelModelUpdate();
+          }
+        },
+      }),
+  });
+  app.mount(container);
+  const combobox = container.querySelector('craft-combobox') as CraftCombobox;
+  await vi.waitFor(() =>
+    expect(combobox.querySelectorAll('craft-option')).toHaveLength(2)
+  );
+
+  combobox.querySelectorAll<HTMLElement>('craft-option')[0]!.click();
+  await vi.waitFor(() => expect(selection.value).toBe('42'));
+  updated.mockClear();
+
+  combobox.querySelectorAll<HTMLElement>('craft-option')[1]!.click();
+  await nextTick();
+  expect(updated).not.toHaveBeenCalled();
+});
+
+it('opens the create screen when its option is selected by keyboard', async () => {
+  slideout.openSlideout.mockResolvedValue(null);
+  const {combobox, selection} = await fixture();
+  const input = combobox.querySelector('input')!;
+  input.focus();
+  input.value = 'Create';
+  input.dispatchEvent(new Event('input', {bubbles: true}));
+  await vi.waitFor(() => expect(combobox.activeIndex).toBe(0));
+  input.dispatchEvent(
+    new KeyboardEvent('keydown', {key: 'Enter', bubbles: true})
+  );
+
+  await vi.waitFor(() =>
+    expect(slideout.openSlideout).toHaveBeenCalledTimes(1)
+  );
+  await vi.waitFor(() => expect(selection.value).toBe('42'));
+  expect(combobox.modelValue).toBe('42');
+});
+
+it.each([false, true])(
+  'keeps the prior selection on cancel and selects the saved record (multiple: %s)',
+  async (multiple) => {
+    slideout.openSlideout.mockResolvedValue(null);
+    const {combobox, selection, changes} = await fixture(multiple);
+    combobox.querySelectorAll<HTMLElement>('craft-option')[1]!.click();
+
+    await vi.waitFor(() =>
+      expect(slideout.openSlideout).toHaveBeenCalledTimes(1)
+    );
+    await vi.waitFor(() =>
+      expect(combobox.modelValue).toEqual(multiple ? ['42'] : '42')
+    );
+    expect(selection.value).toEqual(multiple ? ['42'] : '42');
+    expect(changes).not.toHaveBeenCalled();
+
+    const [url, config] = slideout.openSlideout.mock.calls[0]!;
+    expect(url).toBe('/categories/new');
+    config.onSaved({data: {category: {name: 'New category', id: 73}}});
+    await vi.waitFor(() =>
+      expect(selection.value).toEqual(multiple ? ['42', '73'] : '73')
+    );
+    expect(
+      combobox.options.flatMap((item) =>
+        item.type === 'optgroup'
+          ? item.options.map((option) => option.value)
+          : [item.value]
+      )
+    ).toEqual(['42', '73', '__add__']);
+    expect(changes).toHaveBeenCalledTimes(1);
+    if (!multiple) {
+      expect(combobox.querySelector('input')?.value).toBe('New category');
+    }
+  }
+);
+
+it('selects a created volume by UID rather than its numeric ID', async () => {
+  slideout.openSlideout.mockResolvedValue(null);
+  const {combobox, selection} = await fixture(false, [
+    {label: 'Existing', value: '42'},
+    {
+      label: 'Create a new volume…',
+      value: '__createVolume__',
+      data: {
+        create: {
+          url: '/settings/assets/new',
+          resultKey: 'volume',
+          labelField: 'name',
+          valueField: 'uid',
+        },
+      },
+    },
+  ]);
+  combobox.querySelectorAll<HTMLElement>('craft-option')[1]!.click();
+
+  await vi.waitFor(() =>
+    expect(slideout.openSlideout).toHaveBeenCalledTimes(1)
+  );
+  slideout.openSlideout.mock.calls[0]![1].onSaved({
+    data: {volume: {id: 73, name: 'User Photos', uid: 'volume-uid'}},
+  });
+
+  await vi.waitFor(() => expect(selection.value).toBe('volume-uid'));
+  expect(
+    combobox.options.flatMap((item) =>
+      item.type === 'optgroup'
+        ? item.options.map((option) => option.value)
+        : [item.value]
+    )
+  ).toEqual(['42', 'volume-uid', '__createVolume__']);
+});
diff --git a/resources/js/modules/forms/combobox-create-option.ts b/resources/js/modules/forms/combobox-create-option.ts
new file mode 100644
index 00000000000..c81736584dc
--- /dev/null
+++ b/resources/js/modules/forms/combobox-create-option.ts
@@ -0,0 +1,123 @@
+import type CraftCombobox from '@craftcms/ui/components/combobox/combobox';
+import type {
+  ComboboxItem,
+  ComboboxOption,
+} from '@craftcms/ui/components/combobox/combobox';
+import {openSlideout} from '@/common/slideouts';
+
+type CreateSettings = {
+  url: string;
+  resultKey: string;
+  labelField: string;
+  valueField: string;
+};
+
+type CreateOption = ComboboxOption & {
+  data: {create: CreateSettings};
+};
+
+function createOption(
+  items: ComboboxItem[],
+  value: string
+): CreateOption | undefined {
+  for (const item of items) {
+    const options = item.type === 'optgroup' ? item.options : [item];
+    const option = options.find(
+      (option) => option.value === value && option.data?.create
+    );
+    if (option) {
+      return option as CreateOption;
+    }
+  }
+}
+
+function insertBefore(
+  items: ComboboxItem[],
+  trigger: CreateOption,
+  created: ComboboxOption
+): ComboboxItem[] {
+  return items.flatMap<ComboboxItem>((item) => {
+    if (item.type === 'optgroup') {
+      return [
+        {
+          ...item,
+          options: insertBefore(
+            item.options,
+            trigger,
+            created
+          ) as ComboboxOption[],
+        },
+      ];
+    }
+
+    return item.value === trigger.value ? [created, item] : [item];
+  });
+}
+
+export function handleCreateOption(
+  event: CustomEvent,
+  combobox: CraftCombobox,
+  options: ComboboxItem[],
+  previousValue: string | string[],
+  saved: (options: ComboboxItem[], value: string | string[]) => void
+): boolean {
+  const value = combobox.modelValue;
+  const triggerValue = Array.isArray(value)
+    ? value.find((item) => createOption(options, item))
+    : value;
+  const trigger = createOption(options, triggerValue ?? '');
+  if (!trigger || event.detail?.changeSource === 'input') {
+    return false;
+  }
+
+  event.stopImmediatePropagation();
+  queueMicrotask(() => {
+    combobox.modelValue = previousValue;
+    combobox.value = '';
+    combobox.opened = false;
+    const input = combobox.querySelector('input');
+    if (input && !Array.isArray(previousValue)) {
+      const selected = options
+        .flatMap((item) => (item.type === 'optgroup' ? item.options : [item]))
+        .find((item) => item.value === previousValue);
+      input.value = selected?.label ?? previousValue;
+    }
+  });
+
+  const {url, resultKey, labelField, valueField} = trigger.data.create;
+  void openSlideout(url, {
+    opener: combobox,
+    onSaved: ({data}) => {
+      const record = (data as Record<string, unknown> | undefined)?.[
+        resultKey
+      ] as Record<string, unknown> | undefined;
+      if (!record) {
+        throw new Error(`Combobox create response is missing "${resultKey}".`);
+      }
+
+      const label = record[labelField];
+      const value = record[valueField];
+      if (
+        (typeof label !== 'string' && typeof label !== 'number') ||
+        (typeof value !== 'string' && typeof value !== 'number')
+      ) {
+        throw new Error(
+          `Combobox create response has invalid fields for "${resultKey}".`
+        );
+      }
+
+      const option = {
+        label: String(label),
+        value: String(value),
+      };
+      saved(
+        insertBefore(options, trigger, option),
+        Array.isArray(previousValue)
+          ? [...previousValue, option.value]
+          : option.value
+      );
+    },
+  });
+
+  return true;
+}
diff --git a/resources/js/modules/forms/combobox-create.ts b/resources/js/modules/forms/combobox-create.ts
deleted file mode 100644
index 721680e5531..00000000000
--- a/resources/js/modules/forms/combobox-create.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-import type {
-  ComboboxItem,
-  ComboboxOption,
-} from '@craftcms/ui/components/combobox/combobox';
-import CraftCombobox from '@craftcms/ui/components/combobox/combobox';
-import {property} from 'lit/decorators.js';
-import {openSlideout} from '@/common/slideouts';
-
-/**
- * Inserts `option` directly before the trigger option (`value === createValue`) in a flat
- * option list. Optgroups aren't supported — every consumer of this control so far (Tax Zone,
- * Tax Category, …) offers a flat list, so grouping isn't worth the added complexity here; add
- * it if a future caller actually needs it.
- */
-function insertBeforeCreateOption(
-  options: ComboboxItem[],
-  createValue: string,
-  option: ComboboxOption
-): ComboboxItem[] {
-  const index = options.findIndex(
-    (item) => item.type !== 'optgroup' && item.value === createValue
-  );
-
-  return index === -1
-    ? [...options, option]
-    : [...options.slice(0, index), option, ...options.slice(index)];
-}
-
-/**
- * @summary A `craft-combobox` whose "create a new one" option opens the target resource's own
- * create screen in a slideout instead of selecting a value directly, then appends the result as
- * the new selection once saved. See {@link CraftCms\Cms\Form\Controls\ComboboxCreate} (PHP) for
- * the full contract.
- *
- * @since 1.0
- */
-export default class CraftComboboxCreate extends CraftCombobox {
-  @property({attribute: 'create-url'}) createUrl = '';
-
-  /** The option value that opens the create slideout instead of being selected directly. */
-  @property({attribute: 'create-value'}) createValue = '__add__';
-
-  /** The key the created record is nested under in the save response. */
-  @property({attribute: 'result-key'}) resultKey = '';
-
-  /** The created record's field used as the new option's label. */
-  @property({attribute: 'label-field'}) labelField = 'name';
-
-  /** The created record's field used as the new option's value. */
-  @property({attribute: 'value-field'}) valueField = 'id';
-
-  private creating = false;
-  private listener?: AbortController;
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.listener?.abort();
-    this.listener = new AbortController();
-    this.addEventListener('model-value-changed', this.onModelValueChanged, {
-      signal: this.listener.signal,
-    });
-  }
-
-  override disconnectedCallback(): void {
-    this.listener?.abort();
-    super.disconnectedCallback();
-  }
-
-  /** Whether the trigger option is (still) among the current selection. */
-  private isTriggered(): boolean {
-    return this.multipleChoice
-      ? Array.isArray(this.modelValue) && this.modelValue.includes(this.createValue)
-      : this.modelValue === this.createValue;
-  }
-
-  private onModelValueChanged = (event: Event): void => {
-    if (
-      (event as CustomEvent).detail?.initialize ||
-      !this.isTriggered() ||
-      this.creating
-    ) {
-      return;
-    }
-
-    event.stopImmediatePropagation();
-
-    if (!this.createUrl) {
-      throw new Error('Combobox create URL is required.');
-    }
-
-    this.creating = true;
-
-    // Reset back to nothing selected while the slideout is open, rather than leaving the
-    // trigger option itself "selected" — for multi-select, that just means dropping the
-    // trigger's own value back out of an otherwise-untouched selection.
-    queueMicrotask(() => {
-      if (this.multipleChoice) {
-        const values = Array.isArray(this.modelValue) ? this.modelValue : [];
-        this.changeValues(values.filter((value) => value !== this.createValue));
-        return;
-      }
-
-      this.modelValue = '';
-      this._inputNode.value = '';
-      this._notifyModelValueChanged();
-    });
-
-    void openSlideout(this.createUrl, {
-      opener: this,
-      onSaved: ({data}) => {
-        const record = (data as Record<string, unknown> | undefined)?.[
-          this.resultKey
-        ] as Record<string, unknown> | undefined;
-
-        if (!record) {
-          throw new Error(
-            `Combobox create response is missing "${this.resultKey}".`
-          );
-        }
-
-        const option = {
-          label: String(record[this.labelField] ?? ''),
-          value: String(record[this.valueField] ?? ''),
-        } satisfies ComboboxOption;
-
-        this.options = insertBeforeCreateOption(
-          this.options,
-          this.createValue,
-          option
-        );
-
-        void this.updateComplete.then(() => {
-          if (this.multipleChoice) {
-            // Multi-select's chips render straight off `modelValue`/`options` (see
-            // `_inputGroupInputTemplate()`/`valueLabel()`), not off a registered
-            // `craft-option` element, so there's no DOM lookup needed here the way
-            // single-select's textbox sync requires below.
-            const values = Array.isArray(this.modelValue) ? this.modelValue : [];
-            this.changeValues([...values, option.value]);
-            return;
-          }
-
-          const selectedOption = Array.from(
-            this._listboxNode.querySelectorAll('craft-option')
-          ).find((item) => String(item.choiceValue) === String(option.value));
-
-          if (!selectedOption) {
-            throw new Error('Created option was not rendered.');
-          }
-
-          this.modelValue = option.value;
-          this._setTextboxValue(
-            this._getTextboxValueFromOption(selectedOption)
-          );
-          this._notifyModelValueChanged();
-        });
-      },
-    }).finally(() => {
-      this.creating = false;
-    });
-  };
-}
-
-if (!customElements.get('craft-combobox-create')) {
-  customElements.define('craft-combobox-create', CraftComboboxCreate);
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'craft-combobox-create': CraftComboboxCreate;
-  }
-}
diff --git a/resources/js/modules/forms/register.ts b/resources/js/modules/forms/register.ts
index a4892d9a478..58313c31bde 100644
--- a/resources/js/modules/forms/register.ts
+++ b/resources/js/modules/forms/register.ts
@@ -9,7 +9,6 @@ import ConditionBuilderControl from './ConditionBuilderControl.vue';
 import ColorControl from './ColorControl.vue';
 import ColorSelectControl from './ColorSelectControl.vue';
 import ComboboxControl from './ComboboxControl.vue';
-import ComboboxCreateControl from './ComboboxCreateControl.vue';
 import FormRenderer from './FormRenderer.vue';
 import GroupNode from './GroupNode.vue';
 import LightswitchControl from './LightswitchControl.vue';
@@ -67,7 +66,6 @@ export function registerFormComponents(
   components.register('craft:hidden', HiddenControl);
   components.register('craft:text', TextControl);
   components.register('craft:combobox', ComboboxControl);
-  components.register('craft:combobox-create', ComboboxCreateControl);
   components.register('craft:textarea', TextareaControl);
   components.register('craft:lightswitch', LightswitchControl);
   components.register('craft:checkbox', CheckboxControl);
diff --git a/resources/js/pages/settings/users/Settings.test.ts b/resources/js/pages/settings/users/Settings.test.ts
index 5a9a78a7efb..461ea74e86f 100644
--- a/resources/js/pages/settings/users/Settings.test.ts
+++ b/resources/js/pages/settings/users/Settings.test.ts
@@ -12,51 +12,15 @@ interface CheckboxGroupElement extends HTMLElement {
 }
 
 const state = vi.hoisted(() => ({
-  openSlideout: vi.fn(),
-  setPhotoVolume: vi.fn(),
   setRequire2fa: vi.fn(),
 }));
 
-vi.mock('@actions/Settings/VolumesController', () => ({
-  create: {url: () => '/settings/assets/new'},
-}));
-
-vi.mock('@/common/slideouts', () => ({
-  openSlideout: state.openSlideout,
-}));
-
-vi.mock('@craftcms/ui/vue/CraftCombobox.vue', () => ({
-  default: defineComponent({
-    emits: ['update:modelValue'],
-    setup:
-      (_, {emit}) =>
-      () =>
-        h('button', {
-          'data-create-volume': '',
-          onClick: () => emit('update:modelValue', '__createVolume__'),
-        }),
-  }),
-}));
-
 vi.mock('@/pages/Form.vue', () => ({
   default: defineComponent({
     setup:
       (_, {slots}) =>
       () =>
         h('div', [
-          slots.photoVolumeUid?.({
-            control: control('photoVolumeUid', {
-              options: [
-                {label: 'Existing', value: 'existing'},
-                {label: 'Create a new volume…', value: '__createVolume__'},
-              ],
-            }),
-            value: '',
-            setValue: state.setPhotoVolume,
-            editable: true,
-            invalid: false,
-            required: false,
-          }),
           slots.require2fa?.({
             control: control('require2fa', {
               options: [
@@ -87,8 +51,6 @@ let app: ReturnType<typeof createApp>;
 let container: HTMLElement;
 
 beforeEach(() => {
-  state.openSlideout.mockReset();
-  state.setPhotoVolume.mockReset();
   state.setRequire2fa.mockReset();
   container = document.createElement('div');
   document.body.append(container);
@@ -99,24 +61,6 @@ afterEach(() => {
   container.remove();
 });
 
-it('selects a volume created from the combobox', async () => {
-  mount();
-  container.querySelector<HTMLElement>('[data-create-volume]')?.click();
-
-  expect(state.openSlideout).toHaveBeenCalledWith(
-    '/settings/assets/new',
-    expect.objectContaining({onSaved: expect.any(Function)})
-  );
-
-  const openCall = state.openSlideout.mock.calls[0];
-  if (!openCall) throw new Error('Expected the volume slideout to open.');
-  openCall[1].onSaved({
-    data: {volume: {name: 'User Photos', uid: 'new-volume'}},
-  });
-
-  expect(state.setPhotoVolume).toHaveBeenCalledWith('new-volume');
-});
-
 it('keeps the exclusive two-step verification value shape', () => {
   mount();
   const group = container.querySelector<CheckboxGroupElement>(
diff --git a/resources/js/pages/settings/users/Settings.vue b/resources/js/pages/settings/users/Settings.vue
index 9383d999346..5c67d98a0a3 100644
--- a/resources/js/pages/settings/users/Settings.vue
+++ b/resources/js/pages/settings/users/Settings.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import CraftCombobox from '@craftcms/ui/vue/CraftCombobox.vue';
   import type {UrlMethodPair} from '@inertiajs/core';
-  import {ref} from 'vue';
-  import {create as createVolume} from '@actions/Settings/VolumesController';
-  import {openSlideout} from '@/common/slideouts';
   import type {SelectOption} from '@/common/types';
   import type {
     FormControlOverrideProps,
@@ -11,26 +7,15 @@
     FormPayload,
     FormValue,
   } from '@/modules/forms/types';
-  import {inputName, serverErrorValidators} from '@/modules/forms/runtime';
+  import {inputName} from '@/modules/forms/runtime';
   import FormPage from '@/pages/Form.vue';
 
-  const createVolumeOptionValue = '__createVolume__';
-
-  interface VolumeSaveData {
-    volume?: {
-      name: string;
-      uid: string;
-    };
-  }
-
   const props = defineProps<{
     form: FormPayload;
     submit: UrlMethodPair;
     refreshUrl: string | null;
   }>();
 
-  const createdPhotoVolumeOptions = ref<SelectOption[]>([]);
-
   function options(control: FormControlPayload): SelectOption[] {
     const options = control.props.options;
     if (!Array.isArray(options)) {
@@ -49,62 +34,6 @@
     });
   }
 
-  function photoVolumeOptions(control: FormControlPayload): SelectOption[] {
-    const configured = options(control);
-    const configuredValues = configured.map((option) => option.value);
-    const created = createdPhotoVolumeOptions.value.filter(
-      (option) => !configuredValues.includes(option.value)
-    );
-    const createOption = configured.filter(
-      (option) => option.value === createVolumeOptionValue
-    );
-
-    return [
-      ...configured.filter(
-        (option) => option.value !== createVolumeOptionValue
-      ),
-      ...created,
-      ...createOption,
-    ];
-  }
-
-  function updatePhotoVolume(
-    value: unknown,
-    setValue: FormControlOverrideProps['setValue']
-  ): void {
-    if (value === createVolumeOptionValue) {
-      createPhotoVolume(setValue);
-      return;
-    }
-
-    setValue(String(value ?? ''), 'typing');
-  }
-
-  function createPhotoVolume(
-    setValue: FormControlOverrideProps['setValue']
-  ): void {
-    void openSlideout(createVolume.url(), {
-      onSaved: ({data}) => {
-        // SAFETY: the volume create endpoint returns its documented saved volume.
-        const volume = (data as VolumeSaveData | undefined)?.volume;
-
-        if (!volume) {
-          throw new Error(
-            'The saved volume response did not include a volume.'
-          );
-        }
-
-        createdPhotoVolumeOptions.value = [
-          ...createdPhotoVolumeOptions.value.filter(
-            (option) => option.value !== volume.uid
-          ),
-          {label: volume.name, value: volume.uid},
-        ];
-        setValue(volume.uid);
-      },
-    });
-  }
-
   function require2faValues(value: FormValue): string[] {
     if (value === 'all') {
       return ['all'];
@@ -138,33 +67,6 @@
     :refresh-url="refreshUrl ?? undefined"
     :default-form-actions="[]"
   >
-    <template
-      #photoVolumeUid="{
-        control,
-        value,
-        label,
-        setValue,
-        editable,
-        invalid,
-        required,
-      }"
-    >
-      <CraftCombobox
-        :name="editable ? inputName(control.path) : ''"
-        :model-value="String(value ?? '')"
-        :options="photoVolumeOptions(control)"
-        :clearable="Boolean(control.props.clearable)"
-        :require-option-match="Boolean(control.props.requireOptionMatch)"
-        :show-all-on-empty="Boolean(control.props.showAllOnEmpty)"
-        :required="editable && required"
-        :readonly="control.mode === 'readOnly'"
-        :disabled="control.mode === 'disabled'"
-        :validators="serverErrorValidators(invalid)"
-        :aria-label="label"
-        @update:model-value="updatePhotoVolume($event, setValue)"
-      />
-    </template>
-
     <template
       #require2fa="{control, value, label, setValue, editable, invalid}"
     >
diff --git a/src/Form/Controls/Combobox.php b/src/Form/Controls/Combobox.php
index 1b8f945bc13..836c5cd1cba 100644
--- a/src/Form/Controls/Combobox.php
+++ b/src/Form/Controls/Combobox.php
@@ -6,6 +6,7 @@
 
 use CraftCms\Cms\Cp\Components\Combobox as ComboboxComponent;
 use CraftCms\Cms\Form\ControlPayload;
+use CraftCms\Cms\Form\Controls\Combobox\CreateOption as ComboboxCreateOption;
 use CraftCms\Cms\Form\FormHtmlRenderer;
 use Illuminate\Support\Arr;
 use InvalidArgumentException;
@@ -67,7 +68,7 @@ public function component(): string
     }
 
     /**
-     * @param list<array<string, mixed>> $options
+     * @param  list<array<string, mixed>|ComboboxCreateOption>  $options
      *
      * Every option's `value` is cast to a string here, matching the client's own
      * `ComboboxOption.value: string` contract. A caller passing a raw int id (e.g. an
@@ -84,9 +85,13 @@ public function options(array $options): static
         return $this;
     }
 
-    /** @param array<string, mixed> $option */
-    private static function stringifyOptionValue(array $option): array
+    /** @param array<string, mixed>|ComboboxCreateOption $option */
+    private static function stringifyOptionValue(array|ComboboxCreateOption $option): array
     {
+        if ($option instanceof ComboboxCreateOption) {
+            $option = $option->jsonSerialize();
+        }
+
         if (($option['type'] ?? null) === 'optgroup') {
             return [...$option, 'options' => array_map(self::stringifyOptionValue(...), $option['options'] ?? [])];
         }
diff --git a/src/Form/Controls/Combobox/CreateOption.php b/src/Form/Controls/Combobox/CreateOption.php
new file mode 100644
index 00000000000..23710403d06
--- /dev/null
+++ b/src/Form/Controls/Combobox/CreateOption.php
@@ -0,0 +1,37 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CraftCms\Cms\Form\Controls\Combobox;
+
+use JsonSerializable;
+
+/** An option that opens a resource's create screen and selects the saved record. */
+readonly class CreateOption implements JsonSerializable
+{
+    public function __construct(
+        public string $label,
+        public string $url,
+        public string $resultKey,
+        public string $value = '__add__',
+        public string $labelField = 'name',
+        public string $valueField = 'id',
+    ) {}
+
+    /** @return array<string, mixed> */
+    public function jsonSerialize(): array
+    {
+        return [
+            'label' => $this->label,
+            'value' => $this->value,
+            'data' => [
+                'create' => [
+                    'url' => $this->url,
+                    'resultKey' => $this->resultKey,
+                    'labelField' => $this->labelField,
+                    'valueField' => $this->valueField,
+                ],
+            ],
+        ];
+    }
+}
diff --git a/src/Form/Controls/ComboboxCreate.php b/src/Form/Controls/ComboboxCreate.php
deleted file mode 100644
index c60adb6978f..00000000000
--- a/src/Form/Controls/ComboboxCreate.php
+++ /dev/null
@@ -1,101 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace CraftCms\Cms\Form\Controls;
-
-use Illuminate\Support\Arr;
-
-/**
- * A {@see Combobox} with an extra "create a new one" option that opens a slideout at
- * {@see self::createUrl()} instead of selecting a value directly — the modern equivalent of
- * legacy's `componentSelect` "Choose ▾ + Create" pairing, for a resource with its own real CP
- * edit screen (reached at that URL) but no Craft Element identity of its own (so
- * {@see ElementSelect} doesn't apply).
- *
- * The caller builds `options()` as usual, including the trigger option itself (value
- * {@see self::createValue()}, default `__add__`) — this control only carries the wiring the
- * client needs to act on it once chosen; it doesn't inject the option itself, the same way
- * every other Combobox/Choice leaves option-building entirely to the caller.
- *
- * On save, the created record is read from the response's {@see self::resultKey()} — matching
- * the `$modelName` the create screen's own save action passes to
- * `RespondsWithFlash::asModelSuccess()` — and appended to the option list as the new selection,
- * using {@see self::labelField()}/{@see self::valueField()} (default `name`/`id`) to build its
- * label/value.
- */
-class ComboboxCreate extends Combobox
-{
-    private ?string $createUrl = null;
-
-    private string $createValue = '__add__';
-
-    private string $resultKey = '';
-
-    private string $labelField = 'name';
-
-    private string $valueField = 'id';
-
-    public function component(): string
-    {
-        return 'craft:combobox-create';
-    }
-
-    /** The URL of the resource's own create screen, opened in a slideout. */
-    public function createUrl(?string $createUrl): static
-    {
-        $this->createUrl = $createUrl;
-
-        return $this;
-    }
-
-    /** The option value that opens the create slideout instead of being selected directly. */
-    public function createValue(string $createValue): static
-    {
-        $this->createValue = $createValue;
-
-        return $this;
-    }
-
-    /**
-     * The key the created record is nested under in the save response — the same `$modelName`
-     * the create screen's save action passes to `RespondsWithFlash::asModelSuccess()`.
-     */
-    public function resultKey(string $resultKey): static
-    {
-        $this->resultKey = $resultKey;
-
-        return $this;
-    }
-
-    /** The created record's field to use as the new option's label. Defaults to `name`. */
-    public function labelField(string $labelField): static
-    {
-        $this->labelField = $labelField;
-
-        return $this;
-    }
-
-    /** The created record's field to use as the new option's value. Defaults to `id`. */
-    public function valueField(string $valueField): static
-    {
-        $this->valueField = $valueField;
-
-        return $this;
-    }
-
-    #[\Override]
-    public function props(mixed $value = null): array
-    {
-        return [
-            ...parent::props($value),
-            ...Arr::whereNotNull([
-                'createUrl' => $this->createUrl,
-                'createValue' => $this->createValue,
-                'resultKey' => $this->resultKey ?: null,
-                'labelField' => $this->labelField,
-                'valueField' => $this->valueField,
-            ]),
-        ];
-    }
-}
diff --git a/src/Form/FormControlTypes.php b/src/Form/FormControlTypes.php
index 72bc2802333..ffbfbe1f5ea 100644
--- a/src/Form/FormControlTypes.php
+++ b/src/Form/FormControlTypes.php
@@ -13,7 +13,6 @@
 use CraftCms\Cms\Form\Controls\Color;
 use CraftCms\Cms\Form\Controls\ColorSelect;
 use CraftCms\Cms\Form\Controls\Combobox;
-use CraftCms\Cms\Form\Controls\ComboboxCreate;
 use CraftCms\Cms\Form\Controls\ConditionBuilder;
 use CraftCms\Cms\Form\Controls\ContentBlock;
 use CraftCms\Cms\Form\Controls\Date;
@@ -60,7 +59,6 @@ class FormControlTypes extends TypeRegistry
         Color::class,
         ColorSelect::class,
         Combobox::class,
-        ComboboxCreate::class,
         ContentBlock::class,
         Date::class,
         DateTime::class,
diff --git a/src/Http/ViewModels/UserSettingsViewModel.php b/src/Http/ViewModels/UserSettingsViewModel.php
index 910881d251a..8a1e92ac03d 100644
--- a/src/Http/ViewModels/UserSettingsViewModel.php
+++ b/src/Http/ViewModels/UserSettingsViewModel.php
@@ -9,6 +9,7 @@
 use CraftCms\Cms\Cp\SelectOptions;
 use CraftCms\Cms\Form\Controls\Choice;
 use CraftCms\Cms\Form\Controls\Combobox;
+use CraftCms\Cms\Form\Controls\Combobox\CreateOption as ComboboxCreateOption;
 use CraftCms\Cms\Form\Controls\Lightswitch;
 use CraftCms\Cms\Form\Controls\Text;
 use CraftCms\Cms\Form\Enums\ControlMode;
@@ -22,6 +23,7 @@
 use CraftCms\Cms\Form\Nodes\HiddenField;
 use CraftCms\Cms\Form\Nodes\Separator;
 use CraftCms\Cms\Http\Controllers\Settings\Users\UserSettingsController;
+use CraftCms\Cms\Http\Controllers\Settings\VolumesController;
 use CraftCms\Cms\User\Data\UserGroup;
 use CraftCms\Cms\User\Data\UserSettings;
 use CraftCms\Cms\User\Elements\User;
@@ -158,7 +160,7 @@ private function initialValues(): array
         ];
     }
 
-    /** @return list<array{label: string, value: string, data?: array{addOption: bool}}> */
+    /** @return list<array{label: string, value: string}|ComboboxCreateOption> */
     private function photoVolumeOptions(): array
     {
         return $this->volumes->getAllVolumes()
@@ -168,11 +170,13 @@ private function photoVolumeOptions(): array
             ])
             ->sortBy('label')
             ->values()
-            ->push([
-                'label' => t('Create a new volume…'),
-                'value' => '__createVolume__',
-                'data' => ['addOption' => true],
-            ])
+            ->push(new ComboboxCreateOption(
+                t('Create a new volume…'),
+                action([VolumesController::class, 'create']),
+                'volume',
+                value: '__createVolume__',
+                valueField: 'uid',
+            ))
             ->all();
     }
 
diff --git a/tests/Feature/Http/Controllers/Settings/UserSettingsControllerTest.php b/tests/Feature/Http/Controllers/Settings/UserSettingsControllerTest.php
index 1bf7e31b778..58d13ceefde 100644
--- a/tests/Feature/Http/Controllers/Settings/UserSettingsControllerTest.php
+++ b/tests/Feature/Http/Controllers/Settings/UserSettingsControllerTest.php
@@ -7,6 +7,7 @@
 use CraftCms\Cms\Cms;
 use CraftCms\Cms\Edition;
 use CraftCms\Cms\Http\Controllers\Settings\Users\UserSettingsController;
+use CraftCms\Cms\Http\Controllers\Settings\VolumesController;
 use CraftCms\Cms\Support\Facades\ProjectConfig;
 use CraftCms\Cms\Support\Str;
 use CraftCms\Cms\User\Elements\User;
@@ -119,10 +120,16 @@
                     ->pluck('control')
                     ->firstWhere('path', ['photoVolumeUid']);
                 $values = collect($control['props']['options'])->pluck('value');
+                $create = collect($control['props']['options'])->firstWhere('value', '__createVolume__');
 
                 return $values->contains((string) $publicVolume->uid)
                     && $values->contains((string) $privateVolume->uid)
-                    && $values->contains('__createVolume__');
+                    && $create['data']['create'] === [
+                        'url' => action([VolumesController::class, 'create']),
+                        'resultKey' => 'volume',
+                        'labelField' => 'name',
+                        'valueField' => 'uid',
+                    ];
             }));
 });
 
diff --git a/tests/Unit/Form/ScalarControlsTest.php b/tests/Unit/Form/ScalarControlsTest.php
index b012b3c7900..9c5c2588b71 100644
--- a/tests/Unit/Form/ScalarControlsTest.php
+++ b/tests/Unit/Form/ScalarControlsTest.php
@@ -6,6 +6,7 @@
 use CraftCms\Cms\Form\Controls\Choice;
 use CraftCms\Cms\Form\Controls\Color;
 use CraftCms\Cms\Form\Controls\Combobox;
+use CraftCms\Cms\Form\Controls\Combobox\CreateOption as ComboboxCreateOption;
 use CraftCms\Cms\Form\Controls\Date;
 use CraftCms\Cms\Form\Controls\DateTime;
 use CraftCms\Cms\Form\Controls\Money;
@@ -222,6 +223,30 @@ function scalarControlsCrawler(ControlMode $mode = ControlMode::Editable): Crawl
         ->and(fn () => Combobox::make('path')->limit(0))->toThrow(InvalidArgumentException::class);
 });
 
+it('renders a create option in an ordinary combobox', function () {
+    $payload = app(FormResolver::class)->resolve(
+        Form::make([Field::make()->control(Combobox::make('category')->options([
+            ['label' => 'Existing', 'value' => 42],
+            new ComboboxCreateOption('Create category', '/categories/new', 'category'),
+        ]))]),
+        new FormContext(values: ['category' => '42']),
+    );
+    $crawler = new Crawler(app(FormHtmlRenderer::class)->render($payload));
+    $options = json_decode((string) $crawler->filter('craft-combobox')->attr('options'), true);
+
+    expect($options)->toBe([
+        ['label' => 'Existing', 'value' => '42'],
+        ['label' => 'Create category', 'value' => '__add__', 'data' => [
+            'create' => [
+                'url' => '/categories/new',
+                'resultKey' => 'category',
+                'labelField' => 'name',
+                'valueField' => 'id',
+            ],
+        ]],
+    ]);
+});
+
 it('renders an icon-only choice button with an accessible name and no label', function () {
     $crawler = renderChoice(
         Choice::make('choice')

From ef1400d1e3905f876530959194f10f6c408e94c7 Mon Sep 17 00:00:00 2001
From: Rias <hey@rias.be>
Date: Wed, 23 Sep 2026 11:17:46 +0200
Subject: [PATCH 19/19] Cleanup Claude's overly verbose comments

Amp-Thread-ID: https://ampcode.com/threads/T-01a0cd51-4814-728b-92b2-fae631ecdde0
---
 .../src/components/callout/callout.styles.ts  |  19 +-
 .../components/select-color/select-color.ts   |   9 -
 resources/js/common/types/index.ts            |  21 +-
 .../components/MoveToPageButton.vue           |  31 +--
 .../modules/editable-table/editable-table.ts  |  25 +--
 resources/js/modules/forms/AdminTableNode.vue | 198 +-----------------
 resources/js/pages/Form.test.ts               |   2 -
 resources/js/pages/Form.vue                   |  35 +---
 src/Form/Nodes/Table.php                      | 192 ++++-------------
 9 files changed, 63 insertions(+), 469 deletions(-)

diff --git a/packages/craftcms-ui/src/components/callout/callout.styles.ts b/packages/craftcms-ui/src/components/callout/callout.styles.ts
index 717bb6005ab..5f5b3e2f352 100644
--- a/packages/craftcms-ui/src/components/callout/callout.styles.ts
+++ b/packages/craftcms-ui/src/components/callout/callout.styles.ts
@@ -7,12 +7,6 @@ export default css`
 
   .callout {
     --_radius: var(--c-callout-radius, var(--c-radius-md));
-    /*
-      The two padding axes are declared separately because the callout's
-      default is asymmetric — a tight block edge, a roomier inline one. The
-      \`padding\` attribute writes both of these on this element when it's set,
-      so these fallbacks are what a callout with no \`padding\` renders with.
-    */
     --_callout-padding-block: var(
       --c-callout-padding-block,
       var(--c-spacing-sm)
@@ -28,18 +22,7 @@ export default css`
     align-items: start;
     padding: var(--_callout-padding-block) var(--_callout-padding-inline);
     border: 1px solid transparent;
-    /*
-      Spans the full width of a surrounding <craft-field-group> grid. A
-      block-level Form Node can rely on that grid's own \`craft-field-group >
-      *\` default (or a \`width-*\` class) for this, but \`:host\` here is
-      \`display: contents\` — grid placement given to the *host* has no box to
-      apply to, so the grid falls back to auto-placing this shadow-rendered
-      box on its own, one column wide, unless it claims its own span here.
-      Every current Callout usage is full-width (no narrower \`width-*\`
-      variant exists yet), so this is unconditional rather than keyed off a
-      host class. Harmless outside a grid parent — \`grid-column\` is simply
-      inert there.
-    */
+    /* The display: contents host cannot take a grid span, so its rendered box does. */
     grid-column: 1 / -1;
   }
 
diff --git a/packages/craftcms-ui/src/components/select-color/select-color.ts b/packages/craftcms-ui/src/components/select-color/select-color.ts
index 9d98bae3e8a..644c068fab1 100644
--- a/packages/craftcms-ui/src/components/select-color/select-color.ts
+++ b/packages/craftcms-ui/src/components/select-color/select-color.ts
@@ -65,19 +65,15 @@ export default class CraftSelectColor extends LitElement {
   @property({type: Array})
   colors: string[] = [...paletteColors];
 
-  /** Forwarded to the underlying rich select. */
   @property({type: Boolean, reflect: true})
   disabled = false;
 
-  /** Forwarded to the underlying rich select. */
   @property({type: Boolean, reflect: true, attribute: 'readonly'})
   readOnly = false;
 
-  /** Forwarded to the underlying rich select. */
   @property({type: Boolean, reflect: true})
   required = false;
 
-  /** Forwarded to the underlying rich select. */
   @property({attribute: false})
   validators: Validator[] = [];
 
@@ -101,8 +97,6 @@ export default class CraftSelectColor extends LitElement {
       'border-radius:var(--c-radius-full);' +
       'box-shadow:inset 0 0 0 1px rgb(0 0 0 / 15%);';
 
-    // Reuses the checkerboard treatment from input-color so the transparent
-    // option reads as "no color".
     const transparent =
       'background:' +
       'linear-gradient(45deg, var(--c-color-neutral-fill-quiet) 25%, transparent 25%),' +
@@ -153,14 +147,11 @@ export default class CraftSelectColor extends LitElement {
    * read the up-to-date `this.modelValue` off `event.target`.
    */
   protected _handleModelValueChanged(event: Event) {
-    // Don't let the inner (non-composed) event escape; we re-dispatch our own.
     event.stopPropagation();
 
     const inner = event.target as {modelValue?: string | null} | null;
     this.modelValue = inner?.modelValue ?? null;
 
-    // Re-dispatch from the host so it crosses the shadow boundary (composed)
-    // and Vue's `@model-value-changed` listener fires with the host as target.
     this.dispatchEvent(
       new CustomEvent('model-value-changed', {bubbles: true, composed: true})
     );
diff --git a/resources/js/common/types/index.ts b/resources/js/common/types/index.ts
index 0ce3e954fdb..2135ba6f2e6 100644
--- a/resources/js/common/types/index.ts
+++ b/resources/js/common/types/index.ts
@@ -211,24 +211,12 @@ export type ActionItem =
 
 export type ActionItems = Array<ActionItem>;
 
-/**
- * A server-described alternate form action — the `Form` page's counterpart to
- * `\CraftCms\Cms\Http\Responses\CpScreenResponse::addAltAction()` ("Save as a
- * new X", "Delete", …). Unlike a plain {@link ActionItemButton}, this carries
- * no client-side `onClick` (it's plain JSON from the server) — `Form.vue`
- * translates each one into a real action that resubmits the form's *current*
- * in-progress values to `action` (default POST to the screen's own submit
- * method) instead of firing an isolated request.
- */
+/** A server-described action that resubmits the current form values. */
 export interface FormAltAction {
   label: string;
-  /** Renders the action as destructive (e.g. a "Delete"). */
   destructive?: boolean;
-  /** Defaults to the screen's own submit action when omitted. */
   action?: string;
-  /** Extra values merged into the posted payload alongside the form's own. */
   params?: FormValues;
-  /** A confirmation message shown (native `confirm()`) before submitting. */
   confirm?: string;
 }
 
@@ -236,12 +224,7 @@ export interface FormSaveOptions {
   redirect?: boolean;
   data?: FormValues;
   preserveState?: boolean;
-  /**
-   * Submits to a different destination than the screen's own default
-   * `submit` target — e.g. an alternate form action posting the same
-   * in-progress values elsewhere ("Save as a new X", "Delete"). Omit to use
-   * the screen's own action.
-   */
+  /** Overrides the screen's default submit destination. */
   action?: UrlMethodPair;
 }
 
diff --git a/resources/js/modules/admin-table/components/MoveToPageButton.vue b/resources/js/modules/admin-table/components/MoveToPageButton.vue
index 8426eaa058c..7c34d732844 100644
--- a/resources/js/modules/admin-table/components/MoveToPageButton.vue
+++ b/resources/js/modules/admin-table/components/MoveToPageButton.vue
@@ -3,21 +3,6 @@
   import {computed, ref} from 'vue';
   import Select from '@/common/form/Select.vue';
 
-  /**
-   * A "Move to page…" control for a {@see Table} Form Node in `dataUrl()` mode — the
-   * within-page drag-and-drop reorder `AdminTableNode.vue` already offers can't reach a
-   * page that isn't loaded, so this is the only way to move a row to a different one.
-   * Mirrors the legacy `Craft.VueAdminTable` widget's own `AdminTableMoveToPageHud` (a
-   * small "choose a page" popover, not literal drag-across-pages) — same interaction,
-   * rebuilt on `<craft-popover>` instead of a `Garnish.HUD`.
-   *
-   * Lives once in the selection footer (`AdminTableNode.vue`), not per row — matching
-   * this codebase's own established convention (see the real Entries index: uncommon
-   * per-selection actions like "Move to…" live in a footer "Actions" menu once
-   * something's selected, not in a disclosure control on every row) rather than
-   * inventing a new per-row menu. `AdminTableNode.vue` only mounts this component while
-   * exactly one row is selected, so there's no separate `disabled` state to model here.
-   */
   const props = defineProps<{
     currentPage: number;
     lastPage: number;
@@ -35,9 +20,7 @@
   const popover = ref<PopoverElement>();
   const targetPageRaw = ref<string | number>(props.currentPage);
 
-  // `Select`'s v-model round-trips through a native <select>, whose value is
-  // always a string — coerce back to a number the same way `BaseElementIndex.
-  // vue`'s own page-size/page-index proxies already do.
+  // Native select values are strings, but the page number is numeric.
   const targetPage = computed(() => parseInt(String(targetPageRaw.value), 10));
 
   const pages = Array.from({length: props.lastPage}, (_, i) => i + 1);
@@ -64,17 +47,7 @@
     placement="bottom-end"
     @opened-changed="onOpenedChanged"
   >
-    <!--
-      `v-once` is load-bearing, not an optimization — see `ActionMenu.vue`'s own
-      identical comment. `craft-popover` extends the same Lion `OverlayMixin` as
-      `craft-action-menu` and relocates/restructures its slotted invoker once
-      mounted. This component stays mounted for as long as exactly one row is
-      selected, and `AdminTableNode.vue` passes it a shared `loading` prop that
-      flips during that same window (the move's own `fetchPage()` refetch);
-      without `v-once`, that re-render patches the invoker against DOM the
-      overlay has already moved. The invoker is static text, so freezing it
-      costs nothing.
-    -->
+    <!-- The popover relocates its invoker; v-once prevents Vue patching the moved DOM. -->
     <craft-button type="button" slot="invoker" size="small" v-once>{{
       t('Move to page…')
     }}</craft-button>
diff --git a/resources/js/modules/editable-table/editable-table.ts b/resources/js/modules/editable-table/editable-table.ts
index 5058f19aa50..6c9f7a337b5 100644
--- a/resources/js/modules/editable-table/editable-table.ts
+++ b/resources/js/modules/editable-table/editable-table.ts
@@ -588,12 +588,8 @@ export class EditableTable extends Base<EditableTableSettings> {
   ): any {
     void staticRows;
 
-    // `_hidden` is a reserved row key, not a declared column — same principle
-    // `HasVisibility` documents for whole Field/Group nodes: the row's own cells stay
-    // real inputs (still posting, still holding whatever was typed) rather than being
-    // omitted, so the caller can toggle it back without losing anything. Both the
-    // `hidden` attribute and the class are set, matching that same convention, since
-    // some hosts override the UA `[hidden]` rule.
+    // Keep hidden rows' inputs mounted so they retain and submit their values.
+    // Some hosts override the UA [hidden] rule, so the class is also needed.
     const $tr = $('<tr/>', {
       'data-id': rowId,
       ...(values._hidden ? {hidden: true, class: 'hidden'} : {}),
@@ -698,11 +694,7 @@ export class EditableTable extends Base<EditableTableSettings> {
             break;
 
           case 'money': {
-            // A stored value is `{value, locale}` — the same shape the
-            // standalone `craft:money` Form Control posts and reads (see
-            // `MoneyControl.vue`) — but a brand-new row's `value` is often
-            // just `''` (from `defaultValues`), so only unwrap the shape when
-            // it's actually there.
+            // New rows may start with an empty string rather than {value, locale}.
             const moneyValue =
               value instanceof Object && !Array.isArray(value)
                 ? ((value as Record<string, unknown>).value ?? null)
@@ -717,8 +709,7 @@ export class EditableTable extends Base<EditableTableSettings> {
               'craft-input-money'
             ) as CraftInputMoney;
             money.name = `${name}[value]`;
-            money.modelValue =
-              moneyValue === null ? '' : String(moneyValue);
+            money.modelValue = moneyValue === null ? '' : String(moneyValue);
             money.currency = col.currency ?? 'USD';
             money.locale = String(moneyLocale);
             if (col.decimals !== undefined) money.decimals = col.decimals;
@@ -733,10 +724,6 @@ export class EditableTable extends Base<EditableTableSettings> {
             }
             if (col.clearable !== undefined) money.clearable = col.clearable;
             $cell.append(money);
-            // Posted alongside `${name}[value]`, exactly as `InputMoney::renderSlots()`
-            // does for the standalone control — `cellValue()`'s generic
-            // multi-entry fallback reassembles the two back into one
-            // `{value, locale}` cell value, no special-casing needed there.
             $('<input/>', {
               type: 'hidden',
               name: `${name}[locale]`,
@@ -790,10 +777,6 @@ export class EditableTable extends Base<EditableTableSettings> {
             combobox.options = Array.isArray(col.options)
               ? col.options.map(
                   (option): ComboboxItem =>
-                    // An <optgroup>-style entry (e.g. SelectOptions::getTemplateSuggestions())
-                    // nests its real options one level deeper — craft-combobox has native
-                    // optgroup support (ComboboxOptGroup), so pass the grouping through rather
-                    // than flattening it away.
                     isOptionGroup(option)
                       ? {
                           type: 'optgroup',
diff --git a/resources/js/modules/forms/AdminTableNode.vue b/resources/js/modules/forms/AdminTableNode.vue
index 0e5014a1fa1..40cf89447fa 100644
--- a/resources/js/modules/forms/AdminTableNode.vue
+++ b/resources/js/modules/forms/AdminTableNode.vue
@@ -51,15 +51,6 @@
     html: string;
   }
 
-  /**
-   * A single bulk-footer action — posts `{ids: <selected row ids>, ...params}` to `url`.
-   * `allowMultiple: false` (default `true`) disables it — whether it stands alone or sits
-   * inside a {@link BulkActionMenu} group — whenever more than one row is selected, for an
-   * action that only makes sense against one row at a time (its endpoint has no obligation
-   * to reflect that itself; nothing stops a request with several ids reaching it some other
-   * way, so this is a UI nicety, not a substitute for that endpoint enforcing the same rule
-   * server-side).
-   */
   interface BulkActionSingle {
     label: string;
     url: string;
@@ -67,14 +58,6 @@
     allowMultiple?: boolean;
   }
 
-  /**
-   * A labeled group of {@link BulkActionSingle}s within the footer's single "Actions" menu —
-   * a heading followed by its items. `label` is optional — omit it to fold the items in
-   * unheaded instead, blended into the flat list (matches legacy's own unlabeled gear-icon
-   * settings menu for a single, infrequently-needed item; `icon` is accepted for the same PHP
-   * config shape but unused here — there's only one shared "Actions" invoker now, not a
-   * distinct one per menu).
-   */
   interface BulkActionMenu {
     label?: string;
     icon?: string;
@@ -83,31 +66,6 @@
 
   type BulkAction = BulkActionSingle | BulkActionMenu;
 
-  /**
-   * A scalar renders as plain text; `{label, url}` renders as a link (or plain
-   * text when `url` is null); a list of those renders several links in one
-   * cell; `{label, items}` renders a dropdown menu of links; `{icon, label?}`
-   * renders a single `<craft-icon>` (`label` becomes its accessible name);
-   * `{html}` renders pre-built markup via `v-html`, for the rare cell no
-   * structured shape above can express — the same convention the PHP `Table`
-   * Node's non-Vue `renderHtml()` fallback uses (menus render as inline links
-   * there, an icon renders as its label text, `html` prints as-is), so both
-   * renderers agree on one row shape without the columns themselves declaring
-   * a type. Only delete (and, when reorderable, the drag handle `DataTable`
-   * renders on its own) live in the trailing actions column — a menu is
-   * ordinary column data, not merged into it.
-   *
-   * `html` is trusted completely, not sanitized here or on the PHP side: the
-   * PHP `Table::rows()` that produced it renders it unsanitized on purpose,
-   * so a cell can host a real working custom element (a copy-to-clipboard
-   * control, say) rather than only static display markup — unlike
-   * `TemplateContentNode.vue`'s `v-html`, which still relies on
-   * `TemplateContent`'s own sanitizer. That leaves whichever server-side
-   * column builds one of these entirely responsible for its safety —
-   * `Html::encode()`-ing any user-entered value before it goes into the
-   * string, exactly as if writing directly to the page. Prefer a structured
-   * shape above when it fits; reach for `html` only when it doesn't.
-   */
   type TableCellValue =
     | string
     | number
@@ -125,20 +83,9 @@
   }
 
   type TableRow = Record<string, TableCellValue> & {
-    /** Required when the table is reorderable and/or deletable. */
     id?: string | number;
-    /** Opts a single row out of an otherwise-deletable table. */
     _deletable?: boolean;
-    /**
-     * A colored status indicator dot, already resolved server-side (see PHP `Table::rows()`) —
-     * this component just draws it, prefixed onto the *first* column's own cell content.
-     */
     _status?: TableStatus | null;
-    /**
-     * The plain text this row's own search box (see {@link searchable}) matches against, when
-     * anything worth searching isn't itself a visible column. Falls back to the row's own
-     * column text when absent.
-     */
     _search?: string;
   };
 
@@ -167,11 +114,6 @@
     }>;
   }>();
 
-  // Reorder/delete mutate this local copy directly (optimistic UI, matching the
-  // legacy Craft.VueAdminTable's behavior) rather than round-tripping through a
-  // form refresh for what's otherwise a read-only listing. Upfront mode only —
-  // endpoint mode's `pageRows` (below) is a fetch result, not this Node's own
-  // initial props, so there's nothing to keep in sync here.
   const rows = ref<TableRow[]>([...props.node.props.rows]);
   watch(
     () => props.node.props.rows,
@@ -182,10 +124,6 @@
 
   const isEndpointMode = computed(() => !!props.node.props.dataUrl);
 
-  // Endpoint mode (`Table::dataUrl()`): the current page's rows plus the server's own
-  // pagination metadata, replacing `rows`/`filteredRows` as this component's data source
-  // entirely — search becomes a server param `fetchPage()` sends (see the debounced watcher
-  // below), not a client-side filter over an already-loaded set.
   const pageRows = ref<TableRow[]>([]);
   const pagination = ref<PaginationData | null>(null);
   const loading = ref(false);
@@ -216,8 +154,6 @@
 
   const search = ref('');
 
-  // Endpoint mode only — upfront mode's `filteredRows` computed (below) already reacts to
-  // `search` instantly, with no request to debounce.
   watchDebounced(
     search,
     () => {
@@ -228,7 +164,6 @@
     {debounce: 300}
   );
 
-  /** Plain text a cell's own rendered content reduces to, for {@link rowSearchText}. */
   function cellText(value: TableCellValue): string {
     if (value === null || value === undefined) return '';
     if (typeof value !== 'object') return String(value);
@@ -258,15 +193,10 @@
       : rows.value;
   });
 
-  /** Whichever of the two modes' own row sets is actually on screen right now. */
   const displayedRows = computed(() =>
     isEndpointMode.value ? pageRows.value : filteredRows.value
   );
 
-  // Endpoint mode reports the server's own real `from`/`to`/`total` (driving `AdminTable`'s
-  // — really `BaseElementIndex`'s — built-in pagination footer, see the `useVueTable` config
-  // below); upfront mode keeps reporting "every loaded/filtered row is on the one page",
-  // exactly as before.
   const footerFrom = computed(() =>
     isEndpointMode.value ? (pagination.value?.from ?? 0) : 1
   );
@@ -410,11 +340,6 @@
     return cols;
   });
 
-  // Keyed by row id (see `getRowId`) rather than row index, so a selection
-  // survives the optimistic row-removal a delete does. Gated on `bulkDeletable`
-  // (see `Table::deletable()`) or a non-empty `bulkActions`/`statusActions` — any
-  // of the three turns selection on; a plain `deleteUrl` alone (no `bulk: true`)
-  // wouldn't know what to do with the `ids` array a bulk request posts.
   const rowSelection = ref<RowSelectionState>({});
 
   const hasBulkFooter = computed(
@@ -424,14 +349,6 @@
       props.node.props.statusActions.length > 0
   );
 
-  // A "Move to page…" control only makes sense once there's more than one page to move
-  // *to* — mirrors legacy's own `AdminTableMoveToPageHud`, which the within-page
-  // drag-and-drop `onReorder()` already offers can't reach on its own. Shown in the
-  // selection footer (see the template) only while exactly one row is selected — moving
-  // more than one row to the same absolute position isn't a well-defined operation, and
-  // matches this codebase's own convention of surfacing uncommon per-selection actions
-  // in the footer rather than a disclosure control on every row (see the real Entries
-  // index's "Move to…" in its own selection-footer Actions menu).
   const showMoveToPage = computed(
     () =>
       isEndpointMode.value &&
@@ -439,9 +356,6 @@
       (pagination.value?.last_page ?? 0) > 1
   );
 
-  // Endpoint mode's own pagination state, kept in the shape TanStack's `state.pagination`
-  // expects — derived from the last `fetchPage()` response rather than owned locally, since
-  // the server is the source of truth for which page is "current" here.
   const paginationState = computed(() => ({
     pageIndex: (pagination.value?.current_page ?? 1) - 1,
     pageSize: props.node.props.perPage,
@@ -478,9 +392,6 @@
       },
     },
     getRowId: (row) => String(row.id),
-    // A row opted out of the single-row delete action (`_deletable: false`) is
-    // just as ineligible for any bulk one — there's no separate "excluded from
-    // bulk actions but not delete" flag, so this gate serves both.
     enableRowSelection: (row) =>
       hasBulkFooter.value && row.original._deletable !== false,
     onRowSelectionChange: (updater) => {
@@ -492,10 +403,7 @@
     get manualPagination() {
       return isEndpointMode.value;
     },
-    // -1 (TanStack's own "unknown" sentinel) outside endpoint mode — harmless, since nothing
-    // reads it there (`AdminTable`/`BaseElementIndex` only show pagination controls once
-    // `getPageCount() > 1`, and upfront mode never sets `total`/`from`/`to` to make that
-    // branch relevant either).
+    // TanStack uses -1 for an unknown page count outside endpoint mode.
     get pageCount() {
       return isEndpointMode.value ? (pagination.value?.last_page ?? -1) : -1;
     },
@@ -536,9 +444,6 @@
         refreshForm();
       })
       .catch(() => {
-        // The optimistic reorder above never actually took server-side — put the rows
-        // back the way they were rather than leaving the UI showing an order that
-        // silently failed to save.
         rows.value = previous;
         Craft.cp?.displayError?.(
           props.node.props.reorderFailMessage ?? t('Couldn’t reorder.')
@@ -546,13 +451,7 @@
       });
   }
 
-  /**
-   * Endpoint mode's own reorder: `startIndex`/`finishIndex` are only positions *within the
-   * currently loaded page* (there's no full `ids` list to post — every other page's rows
-   * were never fetched), so this posts the moved row's new *absolute* position across the
-   * whole dataset instead — `Table::reorderable()`'s same URL, a different payload shape,
-   * mirroring the established `id`/`ids` dual-payload precedent `deletable()` already uses.
-   */
+  // Page-relative indices need an absolute position for the reorder endpoint.
   function onReorderWithinPage(startIndex: number, finishIndex: number): void {
     const previous = pageRows.value;
     const reordered = [...previous];
@@ -575,9 +474,7 @@
         Craft.cp?.displayNotice?.(
           props.node.props.reorderSuccessMessage ?? t('Order updated.')
         );
-        // Re-fetches rather than trusting the optimistic splice above: a cross-page shift
-        // can change which rows belong on *this* page at all (the last row bumped off the
-        // end into the next one, say), which a same-page splice alone can't reflect.
+        // Reordering can shift rows across page boundaries.
         fetchPage(pagination.value!.current_page);
       })
       .catch(() => {
@@ -588,13 +485,6 @@
       });
   }
 
-  /** "Move to page…" (see `MoveToPageButton.vue`) — always moves the selected row to the
-   *  chosen page's first slot, matching legacy's own `AdminTableMoveToPageHud`/
-   *  `AdminTable::moveToPage()`. Posts the plain `page` number, not a computed
-   *  `toPosition` — the endpoint owns that arithmetic (`(page - 1) * perPage`), the same
-   *  `Table::moveToPageUrl()` documents. Only ever called with exactly one id selected
-   *  (see the footer template), so clears the selection on success the same way
-   *  {@link deleteSelected} does. */
   function moveToPage(id: TableRow['id'], page: number): void {
     actionClient
       .post(props.node.props.moveToPageUrl!, {id, page})
@@ -624,13 +514,6 @@
     refreshForm();
   }
 
-  /**
-   * Deletes every currently-selected row in one request. Posts a real `ids`
-   * array (not the JSON-encoded string `onReorder` posts) — this shares the
-   * same backend action as a single-row {@link deleteRow}, and the legacy
-   * `Craft.VueAdminTable` widget's own bulk delete posted `ids` as a plain
-   * array the same way.
-   */
   async function deleteSelected(): Promise<void> {
     const ids = selectedIds.value;
 
@@ -648,20 +531,10 @@
     refreshForm();
   }
 
-  /**
-   * Runs one bulk action (a {@link BulkActionSingle}, whether it stands alone
-   * or was picked from a {@link BulkActionMenu}) against every selected row.
-   * Unlike delete, there's no confirmation step here — none of these actions
-   * are inherently destructive the way delete is, so `Table::bulkActions()`
-   * doesn't carry a per-action confirm message.
-   */
   async function performBulkAction(action: BulkActionSingle): Promise<void> {
     const ids = selectedIds.value;
 
     if (!ids.length) return;
-    // Belt-and-braces alongside the disabled button/menu item below — the
-    // control shouldn't be reachable in this state, but this is what actually
-    // stops the request if it somehow is.
     if (action.allowMultiple === false && ids.length > 1) return;
 
     await actionClient.post(action.url, {ids, ...action.params});
@@ -673,7 +546,6 @@
     return action.allowMultiple === false && selectedIds.value.length > 1;
   }
 
-  /** Adapts a `BulkActionSingle` to `ActionMenu`'s item shape. */
   function bulkActionToItem(action: BulkActionSingle): ActionItemButton {
     return {
       type: 'button',
@@ -683,24 +555,7 @@
     };
   }
 
-  /**
-   * `MoveToPageButton` embedded as a single "Move to page…" item inside the
-   * consolidated Actions menu (below) via `ActionMenu`'s `{type: 'display'}`
-   * escape hatch — matching the real Entries index's own selection-footer
-   * convention (an "Actions" menu holding uncommon per-selection actions,
-   * "Move to…" among them) instead of a standalone footer button or, worse, a
-   * disclosure control on every row. `display` items render through an
-   * isolated `vueRender()` tree of their own (see `ActionMenu.vue`'s
-   * `displayToNode()`) rather than Vue's normal patch path — the same
-   * mechanism that makes `craft-popover` safe to nest inside an already-open
-   * `craft-action-menu` at all (a full unmount/remount on every reveal, never
-   * a patch of DOM the overlay has relocated). `is` must be a plain
-   * `Component` with no prop channel of its own (`displayToNode()` calls
-   * `createVNode(component)` with none), so this closure-based wrapper reads
-   * `pagination`/`loading`/`selectedIds`/`moveToPage` directly from the
-   * surrounding scope instead of `MoveToPageButton`'s normal props — a
-   * completely ordinary Vue closure-component, not a new reusable one.
-   */
+  // ActionMenu's display items receive no props, so this component closes over the current selection.
   const MoveToPageDisplay = defineComponent({
     name: 'MoveToPageDisplay',
     setup() {
@@ -719,14 +574,6 @@
     },
   });
 
-  /**
-   * Everything the selection footer's single "Actions" menu offers: each
-   * `Table::bulkActions()` entry (a standalone button, or a labeled group for
-   * a `BulkActionMenu` — `ActionItemGroup` is one level deep, which is exactly
-   * what a `BulkActionMenu`'s own flat `items` list needs), then "Move to
-   * page…", then "Delete" last and destructive-styled — the same ordering the
-   * real Entries index uses for its own equivalent items.
-   */
   const footerActionItems = computed((): ActionItems => {
     const items: ActionItems = props.node.props.bulkActions.map((action) =>
       isBulkActionMenu(action)
@@ -754,25 +601,11 @@
     return items;
   });
 
-  /**
-   * `Table::statusActions()`'s own items, adapted the same way a `bulkActions()`
-   * entry is — but rendered as their own dedicated "Set status" button (see the
-   * template), never folded into `footerActionItems`'s "Actions" menu. Mirrors
-   * `BulkActionsBar.vue`'s real `SET_STATUS_KEY` pull-out exactly: Set Status
-   * is the most-reached-for action, so it always gets its own button alongside
-   * "Actions" rather than living inside it.
-   */
   const statusActionItems = computed((): ActionItemButton[] =>
     props.node.props.statusActions.map(bulkActionToItem)
   );
 
-  // This Node's data is set once, from the page's own initial render — not read from a
-  // live-fetching endpoint the way an element index table is — so a mutation only updates
-  // this component's own local `rows`. Other props derived from the same server-side state
-  // (e.g. whether a "New store"-style create button should show at all) don't know to
-  // recompute on their own; a partial Inertia reload re-fetches this page's `form` prop so
-  // they catch up too. The local mutation above still runs first, for instant feedback while
-  // this is in flight.
+  // Refresh server-derived form props after a local row mutation.
   function refreshForm(): void {
     router.reload({only: ['form']});
   }
@@ -855,21 +688,7 @@
         </template>
       </AdminTable>
 
-      <!--
-        `from`/`to`/`total` (above) are what turn on `BaseElementIndex`'s own built-in footer
-        — real "X – Y of Z items" text always, plus real prev/next pagination controls once
-        `pageCount > 1` (endpoint mode only; `pageCount` is -1 outside it, see the
-        `useVueTable` config above) — no new pagination UI needed here, in either mode. Its
-        *other* footer concern, the selection/bulk-action bar (`BulkActionsBar`), stays inert
-        regardless (it only renders once `actions.length > 0`, and `AdminTable`/
-        `BaseElementIndex` are never given any here): `PerformElementActionController`, what it
-        posts to, resolves a real `ElementQuery` and a registered `ElementAction`, and there's
-        no fitting these plain PHP-object rows into that pipeline without building a parallel
-        Element-like system, wildly out of proportion to the need. So this component still
-        carries its own small, self-contained selection/bulk-actions footer below (same
-        background/border/copy as the real one) — shown only once something's selected,
-        stacking beneath the real footer above it rather than replacing any part of it.
-      -->
+      <!-- Element actions require ElementQuery rows; this table uses its own selection footer. -->
       <div v-if="selectedIds.length" class="admin-table-footer">
         <Text
           as="span"
@@ -888,11 +707,6 @@
           v-if="statusActionItems.length || footerActionItems.length"
           class="admin-table-footer__actions"
         >
-          <!--
-            Its own dedicated button, matching Entries' own `BulkActionsBar.vue` —
-            Set Status always stays separate from "Actions" below, since it's the
-            most-reached-for action, not because it's architecturally different.
-          -->
           <ActionMenu
             v-if="statusActionItems.length"
             :actions="statusActionItems"
diff --git a/resources/js/pages/Form.test.ts b/resources/js/pages/Form.test.ts
index b4b72052505..c5d679c9324 100644
--- a/resources/js/pages/Form.test.ts
+++ b/resources/js/pages/Form.test.ts
@@ -167,8 +167,6 @@ it('renders as a plain element with no save flow when there is nothing to submit
   if (!layoutCall) throw new Error('Expected the layout registration.');
   expect(layoutCall[0].onSave).toBeUndefined();
 
-  // No `submit` means nothing to post to, so there's no `<form>` at all —
-  // just its contents, in a plain wrapper.
   expect(container.querySelector('form')).toBeNull();
 });
 
diff --git a/resources/js/pages/Form.vue b/resources/js/pages/Form.vue
index 5923edfaa87..80c39f3e838 100644
--- a/resources/js/pages/Form.vue
+++ b/resources/js/pages/Form.vue
@@ -24,29 +24,13 @@
 
   const props = defineProps<{
     form: FormPayload;
-    /**
-     * Omit for a screen with nothing to save as a whole — a listing, say,
-     * that may still hold ordinary Field controls (row-selection checkboxes
-     * and the like) driven by the same value tracking below. Those just need
-     * their own action button reading `currentValues()`/`setValue()` off
-     * this component's exposed API, rather than a single generic save. When
-     * omitted, no `<form>` element is rendered at all — see the template.
-     */
+    /** Omit for node-only screens with no form submission. */
     submit?: UrlMethodPair;
     elevatedFields?: string[] | '*';
     refreshUrl?: string;
     defaultFormActions?: UseAppLayoutOptions['defaultFormActions'];
-    /**
-     * Server-described alternate form actions ("Save as a new X", "Delete") —
-     * see {@link FormAltAction}. Each resubmits the form's current values via
-     * this same component's own `save()`, just aimed at a different action.
-     */
     formActions?: FormAltAction[];
-    /**
-     * Server-rendered read-only metadata (e.g. Created at/Updated at) for the details
-     * column — the same {@see \CraftCms\Cms\Cp\Html\ContentHtml::metadataHtml()} markup
-     * the element editor's sidebar shows via its own `metadataHtml` payload prop.
-     */
+    /** Server-rendered markup for the details column. */
     metadataHtml?: string;
     /** Caps and centers the content column (default on) — see `UseAppLayoutOptions.contentMaxWidth`. Pass `false` for a full-width screen (an index, say). */
     contentMaxWidth?: boolean;
@@ -62,8 +46,6 @@
   const {advanceBaseline, errors, onMutation, renderer} =
     useInertiaFormRenderer(inertiaForm, () => props.form);
 
-  // Only wire up a save flow (and its cmd/ctrl + s shortcut) when there's
-  // somewhere to submit to — otherwise there's nothing for `save()` to post.
   const save = props.submit
     ? useSettingsSave(inertiaForm, () => props.submit!, {
         transform: () => renderer.value?.currentValues() ?? props.form.values,
@@ -99,12 +81,6 @@
       }).save
     : undefined;
 
-  // Each server-described alt action becomes a real `ActionItemButton`, whose
-  // `onClick` reuses this component's own `save()` — the only place that has
-  // both the in-progress values (`renderer.value?.currentValues()`, via
-  // `save`'s own `transform` above) and the confirm/redirect machinery
-  // already built for the primary Save button. This is the piece `formActions`
-  // itself can't carry: it's plain JSON from the server, not a closure.
   const translatedFormActions = computed<ActionItem[]>(
     () =>
       props.formActions?.map((altAction) => ({
@@ -125,7 +101,6 @@
       })) ?? []
   );
 
-  /** A `Form` whose sole node is an unbordered `Table` also skips this component's own outer pane — redundant chrome around a Table that already manages its own layout. */
   const isBareTable = computed(() => {
     const [node, ...rest] = props.form.nodes;
     return (
@@ -181,12 +156,6 @@
 </script>
 
 <template>
-  <!--
-    A node-only screen (no `submit`) renders as a plain `<div>` — there's
-    nothing to submit, so there's no reason to imply otherwise with a `<form>`
-    element. Value tracking below is all Vue-side state; it doesn't depend on
-    an actual `<form>` tag existing in the DOM either way.
-  -->
   <component :is="submit ? 'form' : 'div'" @submit.prevent="save?.()">
     <CpContainer>
       <component
diff --git a/src/Form/Nodes/Table.php b/src/Form/Nodes/Table.php
index 4a97c7b4f8e..5ee01c99d3f 100644
--- a/src/Form/Nodes/Table.php
+++ b/src/Form/Nodes/Table.php
@@ -12,17 +12,10 @@
 use CraftCms\Cms\Shared\Enums\Color;
 use CraftCms\Cms\Support\Html;
 use Illuminate\Support\Traits\Conditionable;
+
 use function CraftCms\Cms\t;
 
-/**
- * A listing of rows (e.g. product types, gateways) rendered as a Form Node, backed by the
- * `craft:admin-table` Vue component (`resources/js/modules/forms/AdminTableNode.vue`) on
- * the client.
- *
- * Unlike {@see Heading}/{@see Separator}, a table's rows represent other entities rather
- * than the form's own value at a path, so it deliberately never touches `FormContext`'s
- * values/mode — `props()` is the only channel it uses.
- */
+/** A listing of rows supplied through node props, not form values. */
 class Table implements Node
 {
     use Conditionable;
@@ -88,37 +81,18 @@ public function columns(array $columns): static
     }
 
     /**
-     * @param  list<array<string, mixed>>  $rows  Each row is keyed by column `key`, plus an `id`
-     *   entry identifying the row — required when {@see reorderable()} or {@see deletable()} are
-     *   used. A cell value may be a plain scalar; an array shaped `['label' => string, 'url' =>
-     *   ?string]` to render as a link (or plain text when `url` is null); a list of such arrays
-     *   to render several links in one cell; `['label' => string, 'items' => list<array{label:
-     *   string, url: ?string}>]` to render a dropdown menu of links; `['icon' => string, 'label' =>
-     *   ?string]` to render a single icon (`label` becomes its accessible name, and is what the
-     *   non-JS {@see renderHtml()} fallback shows in place of the icon); or `['html' => string]`
-     *   for markup none of the above can express (a styled `<code>` value, a compound badge, a
-     *   working custom element like `<craft-input-copy>` that needs its own real light-DOM
-     *   `<input>`). Unlike {@see TemplateContent}, `html` here is rendered completely unsanitized
-     *   — some index tables need cells that are more than static display (a real copy-to-clipboard
-     *   control, for instance), which a sanitizer that drops `input`/`button`/etc. as defense in
-     *   depth would break. That means the caller owns this trust boundary entirely: run untrusted
-     *   values through {@see Html::encode()} (or a sanitizer, if the value is itself meant to carry
-     *   markup) before interpolating them into the string, exactly as if writing directly to the
-     *   page. Prefer one of the structured shapes above when it fits; `html` exists for what
-     *   doesn't. A row may set `_deletable => false` to suppress its own delete action even when
-     *   the table as a whole is {@see deletable()} (e.g. a "primary" row that can't be removed).
-     *   A row may also set `_status` to get a colored status indicator dot before the *first*
-     *   column's own content — the same dot a Craft element index chip shows, for a row whose
-     *   underlying model isn't a real element (so an actual chip, and the `Statusable` status it'd
-     *   need, aren't available). `true`/`false` renders the plain enabled/disabled dot most rows
-     *   want; a string is resolved the same way {@see \CraftCms\Cms\Shared\Enums\Color::
-     *   tryFromStatus()} resolves one elsewhere (`'live'`, `'pending'`, `'expired'`, an arbitrary
-     *   custom status name, ...), for a row whose model has a richer status than a plain boolean.
-     *   When {@see searchable()} is on, a row may also set `_search` to the plain text its own
-     *   search box should match against — needed whenever anything worth searching isn't itself a
-     *   visible column (a discount's description, or its coupon codes, say — legacy's own search
-     *   matched both, neither ever a column here either). A row without `_search` falls back to
-     *   matching its declared columns' own rendered text.
+     * Rows are keyed by column `key`, with an `id` when reordering or deleting.
+     * Cells accept scalars, `['label' => string, 'url' => ?string]` links, lists of
+     * links, `['label' => string, 'items' => list<links>]` menus, `['icon' => string,
+     * 'label' => ?string]` icons, or `['html' => string]` markup. HTML is rendered
+     * without sanitization in both renderers. Encode untrusted content with
+     * {@see Html::encode()} before passing it.
+     *
+     * `_deletable => false` suppresses deletion of one row. `_status` accepts a
+     * boolean or status string and renders an indicator in the first column.
+     * `_search` overrides client-side search text; otherwise columns' text is used.
+     *
+     * @param  list<array<string, mixed>>  $rows
      */
     public function rows(array $rows): static
     {
@@ -129,11 +103,8 @@ public function rows(array $rows): static
     }
 
     /**
-     * Resolves `_status` the same way for a row whether it's handed to {@see rows()} directly
-     * (upfront mode) or built by a controller's own paginated `tableData()`-style action
-     * ({@see dataUrl()} mode, where that action's response bypasses `rows()` entirely) — call
-     * this on a page's worth of rows before returning them as JSON, so both modes resolve
-     * `_status` identically.
+     * Resolve `_status` on rows returned by a {@see dataUrl()} endpoint; {@see rows()}
+     * calls this automatically for upfront rows.
      *
      * @param  list<array<string, mixed>>  $rows
      * @return list<array<string, mixed>>
@@ -146,7 +117,7 @@ public static function prepareRows(array $rows): array
     /** @param array<string, mixed> $row */
     private static function resolveRowStatus(array $row): array
     {
-        if (!array_key_exists('_status', $row) || $row['_status'] === null) {
+        if (! array_key_exists('_status', $row) || $row['_status'] === null) {
             return $row;
         }
 
@@ -162,16 +133,10 @@ private static function resolveRowStatus(array $row): array
     }
 
     /**
-     * Alternative to {@see rows()} for a list too large to hand over upfront: the client fetches
-     * each page (and, when {@see searchable()} is also on, searches) from `$url` instead, posting
-     * `{page, per_page, search}` and expecting back `{data: <rows, same shape rows() documents>,
-     * pagination: {total, per_page, current_page, last_page, next_page_url, prev_page_url, from,
-     * to}}` — build that response the same way `CraftCms\Cms\Http\ViewModels\
-     * ContentIndexViewModel::pagination()` does (a plain `Illuminate\Pagination\
-     * LengthAwarePaginator` over an already-sliced array; no Eloquent query required), and run
-     * each page's rows through {@see prepareRows()} before responding.
-     *
-     * Mutually exclusive with {@see rows()} — calling one clears whichever the other set.
+     * Fetch rows by posting `{page, per_page, search}` to `$url`. The response must contain
+     * `{data: <rows>, pagination: {total, per_page, current_page, last_page, next_page_url,
+     * prev_page_url, from, to}}`. Pass the page's rows through {@see prepareRows()} first.
+     * Calling this clears {@see rows()}, and vice versa.
      */
     public function dataUrl(string $url, int $perPage = 100): static
     {
@@ -183,11 +148,8 @@ public function dataUrl(string $url, int $perPage = 100): static
     }
 
     /**
-     * Only meaningful alongside {@see dataUrl()}: the endpoint a "Move to page…" control posts
-     * `{id, page}` to, for moving a row to a different page than the one it's currently on (the
-     * within-page drag-and-drop {@see reorderable()} already offers can't reach a page that
-     * isn't loaded). The endpoint owns computing the row's new absolute position from `page` and
-     * applying it — this Node has no opinion on how.
+     * In {@see dataUrl()} mode, posts `{id, page}` to `$url` to move a row across pages.
+     * The endpoint computes the new absolute position.
      */
     public function moveToPageUrl(string $url): static
     {
@@ -213,9 +175,7 @@ public function createAction(?string $label, ?string $url): static
     }
 
     /**
-     * Like {@see createAction()}, but for when there's more than one place a new row could come
-     * from (e.g. one per store) — renders as a single button that opens a menu of links instead
-     * of linking straight to `$url`.
+     * Render a create button with a menu of links instead of one {@see createAction()} URL.
      *
      * @param  list<array{label: string, url: string}>  $items
      */
@@ -246,13 +206,8 @@ public function reorderable(string $url, ?string $successMessage = null, ?string
      * Adds a per-row delete action, posting `{id: <row id>}` to `$url`. Individual rows can
      * opt out via `_deletable => false` in {@see rows()}.
      *
-     * `$bulk` additionally renders a row-selection checkbox column and a "N selected" bar with
-     * its own bulk delete button, posting `{ids: <row ids>}` to the same `$url` — set it only
-     * when that action genuinely handles an `ids` array alongside a single `id` (mirroring the
-     * legacy dual `id`/`ids` contract some of these actions still carry). Leave it `false`
-     * (the default) for an action that only understands `id`; turning bulk selection on for
-     * one of those doesn't add a client-side capability so much as start sending it requests
-     * it will reject.
+     * `$bulk` enables row selection and posts `{ids: <row ids>}` to the same endpoint.
+     * Enable it only if the endpoint handles `ids` as well as `id`.
      */
     public function deletable(string $url, ?string $confirmMessage = null, bool $bulk = false): static
     {
@@ -264,35 +219,14 @@ public function deletable(string $url, ?string $confirmMessage = null, bool $bul
     }
 
     /**
-     * Adds items to the selection footer's single "Actions" menu (shown once at least one
-     * row is selected, alongside "Clear selection") — matching the real Entries index's own
-     * selection-footer convention: one "Actions" menu holding every uncommon per-selection
-     * action (a "move to page…" control when {@see moveToPageUrl()} is set, a trailing
-     * destructive "Delete" when the table is {@see deletable()} with `bulk: true`, and every
-     * entry here), never a separate button per action or a disclosure control on each row.
-     * Every action posts `{ids: <selected row ids>, ...params}` to its own `url`; there's no
-     * client-side notion of what the action does beyond that; the endpoint owns applying it
-     * and returning a normal flash response.
-     *
-     * Each entry in `$actions` is either:
-     * - a single action: `['label' => string, 'url' => string, 'params'? => array<string,
-     *   mixed>, 'allowMultiple'? => bool]` — `params` is merged into the posted body
-     *   alongside `ids`; `allowMultiple` (default `true`) disables the item whenever more
-     *   than one row is selected, for an action that only makes sense against one row at a
-     *   time (a UI nicety only — the endpoint still gets whatever `ids` a request carries,
-     *   and is responsible for enforcing that itself if it matters).
-     * - a labeled group of single actions in the same shape: `['label'? => string, 'items' =>
-     *   list<array{label: string, url: string, params?: array<string, mixed>, allowMultiple?:
-     *   bool}>]`, shown as a heading followed by its items within the same "Actions" menu.
-     *   Omitting `label` folds the items in unheaded, blended into the flat list — legacy's
-     *   own unlabeled gear-icon menu for a single, infrequently-needed item (e.g. shipping
-     *   categories' "Set Default Category") reads this way now that there's one shared
-     *   invoker rather than its own separate icon-only button; an `icon` alone no longer
-     *   produces a distinct invoker and is ignored.
+     * Adds items to the selection footer's "Actions" menu. Each action posts
+     * `{ids: <selected row ids>, ...params}` to its `url`.
      *
-     * Reaches for a row-selection checkbox column the same way `deletable(..., bulk: true)`
-     * does — either one turns selection on; a table with both just contributes to the same
-     * footer's "Actions" menu.
+     * Entries may be `['label' => string, 'url' => string, 'params'? => array,
+     * 'allowMultiple'? => bool]` or groups with `['label'? => string, 'items' => list<actions>]`.
+     * An omitted group label leaves its items unheaded; `icon` is ignored. `allowMultiple`
+     * defaults to true and only disables the UI for multiple rows. Endpoints must enforce
+     * their own constraints.
      *
      * @param  list<array<string, mixed>>  $actions
      */
@@ -304,18 +238,8 @@ public function bulkActions(array $actions): static
     }
 
     /**
-     * Adds a dedicated "Set status" button to the selection footer, kept separate from
-     * {@see bulkActions()}'s own "Actions" menu — matching the real Craft element index's own
-     * `BulkActionsBar.vue`, which always pulls its Set Status button out of the generic
-     * actions menu (it identifies it there by a well-known PHP action class key) specifically
-     * *because* it's the most-reached-for action, not because it's a different kind of thing.
-     * "Set status" is the button's own fixed label, not configurable here — `$items` is just
-     * its menu content, the same shape as a {@see bulkActions()} single action: `list<array{
-     * label: string, url: string, params?: array<string, mixed>, allowMultiple?: bool}>`
-     * (typically `Enabled`/`Disabled`, each posting a different `status` param to one `url`).
-     *
-     * Reaches for a row-selection checkbox column the same way `deletable(..., bulk: true)`/
-     * `bulkActions()` do — any of the three turns selection on.
+     * Adds a separate "Set status" menu to the selection footer. Items use the same
+     * shape as single {@see bulkActions()} entries; the button label is fixed.
      *
      * @param  list<array<string, mixed>>  $items
      */
@@ -327,14 +251,8 @@ public function statusActions(array $items): static
     }
 
     /**
-     * Shows a text search box above the table. With {@see rows()} (the default), it filters
-     * entirely client-side — every row is already loaded. With {@see dataUrl()}, the query is
-     * instead sent as a `search` param to that endpoint (resetting to page 1), matching the
-     * legacy `Craft.VueAdminTable` screens this usually replaces, which searched server-side
-     * against a paginated result set — see {@see dataUrl()} for the exact request/response
-     * contract. See {@see rows()} for how a row controls what it matches against in the
-     * client-side case. Most tables don't need this — reach for it only where legacy actually
-     * had `search: true`.
+     * Search {@see rows()} locally, or send `search` to the {@see dataUrl()} endpoint
+     * and reset to page 1. See {@see rows()} for the `_search` override.
      */
     public function searchable(?string $placeholder = null): static
     {
@@ -344,7 +262,6 @@ public function searchable(?string $placeholder = null): static
         return $this;
     }
 
-    /** Toggles the table's own bordered/raised card chrome (off by default, matching an index's bare look; opt in when embedding a Table alongside other content). See `Form.vue` for the matching outer-pane behavior. */
     public function bordered(bool $bordered = true): static
     {
         $this->bordered = $bordered;
@@ -363,22 +280,15 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
                 $node->props['createUrl'],
                 ['class' => ['btn', 'submit', 'add', 'icon']],
             ),
-            // No sensible JS-less dropdown-button equivalent — same reasoning renderCell()'s
-            // `items` shape gives for menu cells — so this renders the label followed by its
-            // items as plain inline links instead.
-            !empty($node->props['createMenuItems']) => Html::encode($node->props['createLabel'] ?? '').': '.implode(', ', array_map(
-                fn(array $item) => Html::a(Html::encode($item['label']), $item['url']),
+            ! empty($node->props['createMenuItems']) => Html::encode($node->props['createLabel'] ?? '').': '.implode(', ', array_map(
+                fn (array $item) => Html::a(Html::encode($item['label']), $item['url']),
                 $node->props['createMenuItems'],
             )),
             default => '',
         };
 
         if ($node->props['dataUrl'] !== null) {
-            // Same "no sensible non-JS equivalent" reasoning already applied to reorder/delete/
-            // bulk-actions/search: fetching and paginating rows client-side has no plain-HTML
-            // fallback, so this renders neither an empty table nor (potentially misleadingly)
-            // the table's own `emptyMessage`, which describes a genuinely empty table, not one
-            // this fallback simply can't populate.
+            // Without JavaScript, endpoint rows cannot be fetched or treated as an empty table.
             $table = Html::tag('p', Html::encode(t('This table requires JavaScript.')), [
                 'class' => ['zilch'],
             ]);
@@ -387,35 +297,25 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
                 'class' => ['zilch'],
             ]);
         } else {
-            $renderLink = fn(array $link): string => $link['url'] !== null
+            $renderLink = fn (array $link): string => $link['url'] !== null
                 ? Html::a(Html::encode($link['label']), $link['url'])
                 : Html::encode($link['label']);
 
             $firstColumnKey = $columns[0]['key'] ?? null;
 
-            // Reordering, deleting, and bulk actions are inherently interactive (drag handles,
-            // confirmation dialogs, row selection, CSRF-protected requests) with no sensible
-            // plain-HTML equivalent, so this fallback renders a menu's links inline but
-            // otherwise omits those affordances — consistent with the rest of the CP treating
-            // this renderer as JS-less read access, not a full replacement for the Vue control.
-            $renderCell = function(array $column, array $row) use ($renderLink, $firstColumnKey): string {
+            $renderCell = function (array $column, array $row) use ($renderLink, $firstColumnKey): string {
                 $value = $row[$column['key']] ?? '';
 
                 $rendered = match (true) {
                     is_array($value) && array_key_exists('items', $value) => implode(', ', array_map($renderLink, $value['items'])),
                     is_array($value) && array_key_exists('icon', $value) => Html::encode($value['label'] ?? ''),
-                    // Not re-encoded — this is meant to be markup, and rows() no longer
-                    // sanitizes it (see its docblock); the caller owns that trust boundary.
                     is_array($value) && array_key_exists('html', $value) => $value['html'],
                     is_array($value) && array_is_list($value) => implode(', ', array_map($renderLink, $value)),
                     is_array($value) => $renderLink($value),
                     default => Html::encode((string) $value),
                 };
 
-                // The dot itself is inherently visual, so — same reasoning as the icon-cell
-                // case above — this fallback substitutes its resolved label as plain text
-                // instead, right before whatever the first column already rendered.
-                if ($column['key'] === $firstColumnKey && !empty($row['_status']['label'])) {
+                if ($column['key'] === $firstColumnKey && ! empty($row['_status']['label'])) {
                     $rendered = Html::encode($row['_status']['label']).': '.$rendered;
                 }
 
@@ -423,13 +323,13 @@ public static function renderHtml(NodePayload $node, FormPayload $payload, FormH
             };
 
             $head = Html::tag('tr', implode('', array_map(
-                fn(array $column) => Html::tag('th', Html::encode($column['label'])),
+                fn (array $column) => Html::tag('th', Html::encode($column['label'])),
                 $columns,
             )));
 
             $body = implode('', array_map(
-                fn(array $row) => Html::tag('tr', implode('', array_map(
-                    fn(array $column) => Html::tag('td', $renderCell($column, $row)),
+                fn (array $row) => Html::tag('tr', implode('', array_map(
+                    fn (array $column) => Html::tag('td', $renderCell($column, $row)),
                     $columns,
                 ))),
                 $rows,