Define semantic page action layouts

webui/tests/layout-primitives.test.tsx

@@ -16,6 +16,7 @@ import FloatingStatus from "../src/components/FloatingStatus";
 import FormSection from "../src/components/FormSection";
 import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
 import MetricGrid from "../src/components/MetricGrid";
+import PageActionBar from "../src/components/PageActionBar";
 import SelectionList, { SelectionListItem, SelectionListItemContent } from "../src/components/SelectionList";
 import StatePanel from "../src/components/StatePanel";
 import WorkspaceLayout from "../src/components/WorkspaceLayout";
@@ -39,6 +40,37 @@ assert(toolbarMarkup.includes("action-toolbar-group-grow"), "toolbar groups can
 assert(toolbarMarkup.includes("action-toolbar-justify-between"), "toolbar distribution is centrally controlled");
 assert(toolbarMarkup.includes("action-toolbar-spacer"), "the standard action spacer is available");
 
+const editorActionBarMarkup = renderToStaticMarkup(
+  <PlatformLanguageProvider>
+    <PageActionBar
+      variant="editor"
+      label="Editor actions"
+      reloadAction={<button type="button">Reload</button>}
+      contextActions={<button type="button">Preview</button>}
+      helpAction={<button type="button">Help</button>}
+      discardAction={<button type="button">Discard</button>}
+      saveAction={<button type="button">Save</button>}
+    />
+  </PlatformLanguageProvider>
+);
+
+assert(editorActionBarMarkup.includes('data-page-action-archetype="editor"'), "page action bars expose their semantic archetype");
+assert(editorActionBarMarkup.includes('aria-label="Editor actions"'), "page action bars are named toolbars");
+assert(editorActionBarMarkup.indexOf('data-page-action-slot="reload"') < editorActionBarMarkup.indexOf('data-page-action-slot="context"'), "reload precedes contextual actions");
+assert(editorActionBarMarkup.indexOf('data-page-action-slot="help"') < editorActionBarMarkup.indexOf('data-page-action-slot="discard"'), "help precedes editor persistence actions");
+assert(editorActionBarMarkup.indexOf('data-page-action-slot="discard"') < editorActionBarMarkup.indexOf('data-page-action-slot="save"'), "save remains the far-right editor action");
+
+const collectionActionBarMarkup = renderToStaticMarkup(
+  <PlatformLanguageProvider>
+    <PageActionBar
+      variant="collection"
+      reloadAction={<button type="button">Reload</button>}
+      createAction={<button type="button">Create</button>}
+    />
+  </PlatformLanguageProvider>
+);
+assert(collectionActionBarMarkup.indexOf('data-page-action-slot="reload"') < collectionActionBarMarkup.indexOf('data-page-action-slot="create"'), "collection creation remains the far-right action");
+
 const gridMarkup = renderToStaticMarkup(
   <ContentGrid columns={3} gap="compact" collapseAt="wide">
     <GridItem>A</GridItem>