feat: enable override of publish button (breaking change)

`headerActions` overrides must now render `children` to render the publish button

apps/demo/app/[...puckPath]/client.tsx

@@ -23,13 +23,15 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
           plugins={[headingAnalyzer]}
           headerPath={path}
           overrides={{
-            headerActions: () => (
+            headerActions: ({ children }) => (
               <>
                 <div>
                   <Button href={path} newTab variant="secondary">
                     View page
                   </Button>
                 </div>
+
+                {children}
               </>
             ),
           }}

apps/docs/pages/docs/api-reference/overrides/header-actions.mdx

@@ -25,4 +25,4 @@ const overrides = {
 
 ### `children`
 
-The default node for the header actions.
+The default node for the header actions, which includes the default publish button.

apps/docs/pages/docs/extending-puck/custom-interfaces.mdx

@@ -126,11 +126,49 @@ export function Editor() {
 
 There are many different overrides available. See the [`overrides` API reference](/docs/api-reference/overrides) for the full list.
 
-### Field type override example
+### Custom publish button example
 
-Field type overrides deserve a special mention as they showcase the power of this API.
+A common use case is to override the Puck header. You can either use the [`header` override](/docs/api-reference/overrides/header) to change the entire header, or use the [`headerActions` override](/docs/api-reference/overrides/header-actions) to inject new controls into the header and change the publish button.
 
-Using [`overrides`](/docs/api-reference/components/puck#overrides), it's possible to provide a custom implementation of all fields of a certain type by specifying the [`fieldTypes`](/docs/api-reference/overrides/field-types).
+Here's an example that replaces the default publish button with a custom one:
+
+```tsx showLineNumbers copy {10-26}
+import { Puck, usePuck } from "@measured/puck";
+
+const save = () => {};
+
+export function Editor() {
+  return (
+    <Puck
+      // ...
+      overrides={{
+        headerActions: ({ children }) => {
+          const { appState } = usePuck();
+
+          return (
+            <>
+              <button
+                onClick={() => {
+                  save(appState.data);
+                }}
+              >
+                Save
+              </button>
+
+              {/* Render default header actions, such as the default Button */}
+              {/*{children}*/}
+            </>
+          );
+        },
+      }}
+    />
+  );
+}
+```
+
+### Custom field type example
+
+An advanced use case is overriding all fields of a certain type by specifying the [`fieldTypes` override](/docs/api-reference/overrides/field-types).
 
 ```tsx showLineNumbers copy {8-18}
 import { Puck } from "@measured/puck";

packages/core/components/MenuBar/index.tsx

@@ -85,16 +85,6 @@ export const MenuBar = ({
               dispatch,
             })}
         </>
-        <div>
-          <Button
-            onClick={() => {
-              onPublish && onPublish(data);
-            }}
-            icon={<Globe size="14px" />}
-          >
-            Publish
-          </Button>
-        </div>
       </div>
     </div>
   );

packages/core/components/Puck/index.tsx

@@ -476,15 +476,16 @@ export function Puck<UserConfig extends Config = Config>({
                     <CustomHeader
                       actions={
                         <>
-                          <CustomHeaderActions />
-                          <Button
-                            onClick={() => {
-                              onPublish && onPublish(data);
-                            }}
-                            icon={<Globe size="14px" />}
-                          >
-                            Publish
-                          </Button>
+                          <CustomHeaderActions>
+                            <Button
+                              onClick={() => {
+                                onPublish && onPublish(data);
+                              }}
+                              icon={<Globe size="14px" />}
+                            >
+                              Publish
+                            </Button>
+                          </CustomHeaderActions>
                         </>
                       }
                     >
@@ -547,7 +548,16 @@ export function Puck<UserConfig extends Config = Config>({
                               onPublish={onPublish}
                               menuOpen={menuOpen}
                               renderHeaderActions={() => (
-                                <CustomHeaderActions />
+                                <CustomHeaderActions>
+                                  <Button
+                                    onClick={() => {
+                                      onPublish && onPublish(data);
+                                    }}
+                                    icon={<Globe size="14px" />}
+                                  >
+                                    Publish
+                                  </Button>
+                                </CustomHeaderActions>
                               )}
                               setMenuOpen={setMenuOpen}
                             />

packages/core/types/Overrides.ts

@@ -28,7 +28,7 @@ type OverridesGeneric<Shape extends { [key in OverrideKey]: any }> = Shape;
 export type Overrides = OverridesGeneric<{
   fieldTypes: Partial<FieldRenderFunctions>;
   header: RenderFunc<{ actions: ReactNode; children: ReactNode }>;
-  headerActions: RenderFunc<{ children?: ReactNode }>;
+  headerActions: RenderFunc<{ children: ReactNode }>;
   preview: RenderFunc;
   fields: RenderFunc<{
     children: ReactNode;