diff --git a/apps/demo/app/custom-ui/[...puckPath]/client.tsx b/apps/demo/app/custom-ui/[...puckPath]/client.tsx
index 9bb5b198e..9c5a89ca2 100644
--- a/apps/demo/app/custom-ui/[...puckPath]/client.tsx
+++ b/apps/demo/app/custom-ui/[...puckPath]/client.tsx
@@ -1,13 +1,13 @@
"use client";
-import { Button, Data, Puck, Render } from "@/core";
+import { ActionBar, Button, Data, Puck, Render } from "@/core";
import { HeadingAnalyzer } from "@/plugin-heading-analyzer/src/HeadingAnalyzer";
import config, { UserConfig } from "../../../config";
import { useDemoData } from "../../../lib/use-demo-data";
import { IconButton, usePuck } from "@/core";
import { ReactNode, useEffect, useRef, useState } from "react";
import { Drawer } from "@/core/components/Drawer";
-import { ChevronUp, ChevronDown, Globe } from "lucide-react";
+import { ChevronUp, ChevronDown, Globe, Bug } from "lucide-react";
const CustomHeader = ({ onPublish }: { onPublish: (data: Data) => void }) => {
const { appState, dispatch } = usePuck();
@@ -276,6 +276,26 @@ const CustomPuck = ({ dataKey }: { dataKey: string }) => {
);
};
+const CustomActionBar = ({ children, label }) => {
+ const { appState, selectedItem } = usePuck();
+
+ const onClick = () => {
+ alert(
+ `Index: ${appState.ui.itemSelector.index} \nZone: ${
+ appState.ui.itemSelector.zone
+ } \nData: ${JSON.stringify(selectedItem)}`
+ );
+ };
+ return (
+
+
+
+
+ {children}
+
+ );
+};
+
export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
const { data, resolvedData, key } = useDemoData({
path,
@@ -293,6 +313,9 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
outline: ({ children }) => (
{children}
),
+ actionBar: ({ children, label }) => (
+ {children}
+ ),
components: () => {
return (
diff --git a/packages/core/components/ActionBar/index.tsx b/packages/core/components/ActionBar/index.tsx
index 9b040fef0..338b67143 100644
--- a/packages/core/components/ActionBar/index.tsx
+++ b/packages/core/components/ActionBar/index.tsx
@@ -18,12 +18,14 @@ export const ActionBar = ({
export const Action = ({
children,
+ label,
onClick,
}: {
children: ReactNode;
+ label?: string;
onClick: (e: SyntheticEvent) => void;
}) => (
-