Centralize shared WebUI structural primitives

webui/src/components/ActionToolbar.tsx

@@ -3,13 +3,15 @@ import { usePlatformLanguage } from "../i18n/LanguageContext";
 import type { PlatformInterfaceIdentityProps } from "../types";
 
 export type ActionToolbarDensity = "compact" | "default";
-export type ActionToolbarSurface = "plain" | "subtle";
+export type ActionToolbarSurface = "plain" | "subtle" | "panel-header" | "section-header";
 export type ActionToolbarWrap = "responsive" | "always" | "never";
+export type ActionToolbarJustify = "start" | "between" | "end";
 
 export type ActionToolbarProps = PlatformInterfaceIdentityProps & Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
   children: ReactNode;
   label?: string;
   density?: ActionToolbarDensity;
+  justify?: ActionToolbarJustify;
   surface?: ActionToolbarSurface;
   wrap?: ActionToolbarWrap;
 };
@@ -18,6 +20,7 @@ export default function ActionToolbar({
   children,
   label,
   density = "default",
+  justify = "start",
   surface = "plain",
   wrap = "responsive",
   className = "",
@@ -38,6 +41,7 @@ export default function ActionToolbar({
       className={[
         "action-toolbar",
         `action-toolbar-density-${density}`,
+        `action-toolbar-justify-${justify}`,
         `action-toolbar-surface-${surface}`,
         `action-toolbar-wrap-${wrap}`,
         className