@tightknitai/block-kitchen 0.10.22 → 0.10.23

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-CXXqlwIH.cjs';
-export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataTableActionCell, z as DataTableBlock, E as DataTableCell, F as DataTableRawNumberCell, G as DataVisualizationBlock, H as EditableVia, I as FeedbackButtonSubobject, J as FeedbackButtonsElement, K as HeaderLevel, L as IconButtonElement, M as IconButtonIcon, N as InputBlock, O as LoadMessageInput, Q as LoadResult, R as LoadedMessage, U as LoadingConfig, V as MarkdownBlock, W as MentionChannel, X as MentionUser, Y as MentionsConfig, Z as PaletteMode, _ as PaletteSection, $ as PaletteVariant, a0 as PieChart, a1 as PieChartSegment, a2 as PlanBlock, a3 as PreviewHooks, a4 as PrimaryActionConfig, a5 as PrimaryActionContext, a6 as RecentMessage, a7 as SendResult, a8 as SupportedBlockType, a9 as SupportedHeaderBlock, aa as TableBlock, ab as TableCell, ac as TableColumnSetting, ad as TableRawTextCell, ae as TaskCardBlock, af as TaskCardStatus, ag as UpdatePayload, ah as UpdateResult, ai as UrlSourceElement, aj as ValidationSummary, ak as VideoBlock, al as defaultPalette, am as extraAlertVariant, an as legacyInputVariants } from './palette-CXXqlwIH.cjs';
+import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-DFTL0Han.cjs';
+export { A as AlertBlock, e as AlertLevel, f as BlockAction, g as BlockKitchenBaseProps, h as BlockKitchenComposeOnlyProps, i as BlockKitchenSendProps, j as BlockPosition, k as BrandPreset, l as BrandTheme, m as BrandTokens, n as BuilderBlock, o as CardBlock, p as CarouselBlock, q as CartesianChart, r as Chart, s as ChartAxisConfig, t as ChartDataPoint, u as ChartSeries, v as ChartType, w as ContainerBlock, x as ContainerChildBlock, y as ContextActionsBlock, z as ContextActionsElement, D as CustomEmoji, E as DataTableActionCell, F as DataTableBlock, G as DataTableCell, H as DataTableRawNumberCell, I as DataVisualizationBlock, J as EditableVia, K as FeedbackButtonSubobject, L as FeedbackButtonsElement, M as HeaderLevel, N as IconButtonElement, O as IconButtonIcon, Q as InputBlock, R as LoadMessageInput, U as LoadResult, V as LoadedMessage, W as LoadingConfig, X as MarkdownBlock, Y as MentionChannel, Z as MentionUser, _ as MentionsConfig, $ as PaletteMode, a0 as PaletteSection, a1 as PaletteVariant, a2 as PieChart, a3 as PieChartSegment, a4 as PlanBlock, a5 as PreviewHooks, a6 as PrimaryActionConfig, a7 as PrimaryActionContext, a8 as RecentMessage, a9 as SendResult, aa as SupportedBlockType, ab as SupportedHeaderBlock, ac as TableBlock, ad as TableCell, ae as TableColumnSetting, af as TableRawTextCell, ag as TaskCardBlock, ah as TaskCardStatus, ai as UpdatePayload, aj as UpdateResult, ak as UrlSourceElement, al as ValidationSummary, am as VideoBlock, an as defaultPalette, ao as extraAlertVariant, ap as legacyInputVariants } from './palette-DFTL0Han.cjs';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.cjs';
 import 'slack-web-api-client';
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-CXXqlwIH.js';
-export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataTableActionCell, z as DataTableBlock, E as DataTableCell, F as DataTableRawNumberCell, G as DataVisualizationBlock, H as EditableVia, I as FeedbackButtonSubobject, J as FeedbackButtonsElement, K as HeaderLevel, L as IconButtonElement, M as IconButtonIcon, N as InputBlock, O as LoadMessageInput, Q as LoadResult, R as LoadedMessage, U as LoadingConfig, V as MarkdownBlock, W as MentionChannel, X as MentionUser, Y as MentionsConfig, Z as PaletteMode, _ as PaletteSection, $ as PaletteVariant, a0 as PieChart, a1 as PieChartSegment, a2 as PlanBlock, a3 as PreviewHooks, a4 as PrimaryActionConfig, a5 as PrimaryActionContext, a6 as RecentMessage, a7 as SendResult, a8 as SupportedBlockType, a9 as SupportedHeaderBlock, aa as TableBlock, ab as TableCell, ac as TableColumnSetting, ad as TableRawTextCell, ae as TaskCardBlock, af as TaskCardStatus, ag as UpdatePayload, ah as UpdateResult, ai as UrlSourceElement, aj as ValidationSummary, ak as VideoBlock, al as defaultPalette, am as extraAlertVariant, an as legacyInputVariants } from './palette-CXXqlwIH.js';
+import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-DFTL0Han.js';
+export { A as AlertBlock, e as AlertLevel, f as BlockAction, g as BlockKitchenBaseProps, h as BlockKitchenComposeOnlyProps, i as BlockKitchenSendProps, j as BlockPosition, k as BrandPreset, l as BrandTheme, m as BrandTokens, n as BuilderBlock, o as CardBlock, p as CarouselBlock, q as CartesianChart, r as Chart, s as ChartAxisConfig, t as ChartDataPoint, u as ChartSeries, v as ChartType, w as ContainerBlock, x as ContainerChildBlock, y as ContextActionsBlock, z as ContextActionsElement, D as CustomEmoji, E as DataTableActionCell, F as DataTableBlock, G as DataTableCell, H as DataTableRawNumberCell, I as DataVisualizationBlock, J as EditableVia, K as FeedbackButtonSubobject, L as FeedbackButtonsElement, M as HeaderLevel, N as IconButtonElement, O as IconButtonIcon, Q as InputBlock, R as LoadMessageInput, U as LoadResult, V as LoadedMessage, W as LoadingConfig, X as MarkdownBlock, Y as MentionChannel, Z as MentionUser, _ as MentionsConfig, $ as PaletteMode, a0 as PaletteSection, a1 as PaletteVariant, a2 as PieChart, a3 as PieChartSegment, a4 as PlanBlock, a5 as PreviewHooks, a6 as PrimaryActionConfig, a7 as PrimaryActionContext, a8 as RecentMessage, a9 as SendResult, aa as SupportedBlockType, ab as SupportedHeaderBlock, ac as TableBlock, ad as TableCell, ae as TableColumnSetting, af as TableRawTextCell, ag as TaskCardBlock, ah as TaskCardStatus, ai as UpdatePayload, aj as UpdateResult, ak as UrlSourceElement, al as ValidationSummary, am as VideoBlock, an as defaultPalette, ao as extraAlertVariant, ap as legacyInputVariants } from './palette-DFTL0Han.js';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
 import 'slack-web-api-client';
 

package/dist/index.js

@@ -4601,6 +4601,40 @@ function SendDialog({
     ] })
   ] }) });
 }
+function BlockActionButtons({
+  actions,
+  position,
+  variant
+}) {
+  if (!actions?.length || !position) {
+    return null;
+  }
+  return actions.map(
+    (action) => variant === "toolbar" ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": action.label,
+          onClick: () => action.onSelect(position),
+          className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring [&_svg]:h-3.5 [&_svg]:w-3.5",
+          children: action.icon
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: action.label })
+    ] }, action.id) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": action.label,
+        onClick: () => action.onSelect(position),
+        className: "flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground [&_svg]:h-4 [&_svg]:w-4",
+        children: action.icon
+      },
+      action.id
+    )
+  );
+}
 var RadioGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref }));
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 var RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -10435,7 +10469,9 @@ function BlockRow({
   index,
   total,
   onReorder,
-  isPaletteDrag = false
+  isPaletteDrag = false,
+  position,
+  blockActions
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({
     id: builderBlock.id
@@ -10455,6 +10491,8 @@ function BlockRow({
     {
       ref: setNodeRef,
       style,
+      "data-bk-block-index": position?.index,
+      "data-bk-child-index": position?.childIndex ?? void 0,
       className: cn("group relative mb-2 last:mb-0 hover:z-10 md:mb-0", isDragging && "opacity-40"),
       children: [
         showDropIndicator ? /* @__PURE__ */ jsx(
@@ -10587,6 +10625,7 @@ function BlockRow({
                     /* @__PURE__ */ jsx(TooltipContent, { side: "top", children: "Move down" })
                   ] })
                 ] }) : null,
+                /* @__PURE__ */ jsx(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
                 /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                     "button",
@@ -10649,6 +10688,7 @@ function BlockRow({
                 children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" })
               }
             ) : null,
+            /* @__PURE__ */ jsx(BlockActionButtons, { actions: blockActions, position, variant: "inline" }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -10730,7 +10770,8 @@ function ContainerRow({
   onReorder,
   index,
   total,
-  isPaletteDrag = false
+  isPaletteDrag = false,
+  blockActions
 }) {
   const { id } = builderBlock;
   const block = builderBlock.block;
@@ -10743,11 +10784,13 @@ function ContainerRow({
   const { setNodeRef: setBodyRef, isOver: isBodyOver } = useDroppable({ id: containerBodyId(id) });
   const style = { transform: CSS.Transform.toString(transform), transition };
   const icon = block.icon && "image_url" in block.icon ? block.icon.image_url : void 0;
+  const position = typeof index === "number" ? { index, childIndex: null } : void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: setNodeRef,
       style,
+      "data-bk-block-index": index,
       className: cn("group/container relative mb-2 last:mb-0 hover:z-10", isDragging && "opacity-40"),
       children: [
         /* @__PURE__ */ jsxs(
@@ -10828,7 +10871,9 @@ function ContainerRow({
                         index: idx,
                         total: children.length,
                         onReorder,
-                        isPaletteDrag
+                        isPaletteDrag,
+                        position: typeof index === "number" ? { index, childIndex: idx } : void 0,
+                        blockActions
                       },
                       child.id
                     )),
@@ -10871,6 +10916,7 @@ function ContainerRow({
                 /* @__PURE__ */ jsx(ToolbarButton2, { label: "Move up", disabled: index === 0, onClick: () => onReorder(id, index - 1), children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" }) }),
                 /* @__PURE__ */ jsx(ToolbarButton2, { label: "Move down", disabled: index >= total - 1, onClick: () => onReorder(id, index + 1), children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" }) })
               ] }) : null,
+              /* @__PURE__ */ jsx(BlockActionButtons, { actions: blockActions, position, variant: "toolbar" }),
               /* @__PURE__ */ jsx(ToolbarButton2, { label: "Edit", onClick: () => onOpenBlockChange?.(id), children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" }) }),
               /* @__PURE__ */ jsx(ToolbarButton2, { label: "Duplicate", onClick: () => onDuplicate(id), children: /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
               /* @__PURE__ */ jsx(ToolbarButton2, { label: "Delete", destructive: true, onClick: () => onDelete(id), children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" }) })
@@ -10880,6 +10926,7 @@ function ContainerRow({
         /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between gap-2 rounded-md border border-dashed bg-muted/40 px-2 py-1 md:hidden", children: [
           /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] font-medium text-muted-foreground", children: "Container" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(BlockActionButtons, { actions: blockActions, position, variant: "inline" }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -10961,7 +11008,8 @@ function Surface({
   onDelete,
   onReorder,
   isPaletteDrag = false,
-  onOpenPalette
+  onOpenPalette,
+  blockActions
 }) {
   const { setNodeRef, isOver } = useDroppable({ id: SURFACE_DROPPABLE_ID });
   const isDark = previewTheme === "dark";
@@ -10993,7 +11041,8 @@ function Surface({
               index: idx,
               total: blocks.length,
               onReorder,
-              isPaletteDrag
+              isPaletteDrag,
+              blockActions
             },
             block.id
           ) : /* @__PURE__ */ jsx(
@@ -11011,7 +11060,9 @@ function Surface({
               index: idx,
               total: blocks.length,
               onReorder,
-              isPaletteDrag
+              isPaletteDrag,
+              position: { index: idx, childIndex: null },
+              blockActions
             },
             block.id
           )
@@ -11769,6 +11820,7 @@ function BlockKitchen(props) {
     onChange,
     onValidationChange,
     previewHooks,
+    blockActions,
     customEmojis,
     mentions,
     loadChannels,
@@ -12149,7 +12201,8 @@ function BlockKitchen(props) {
                     onDelete: removeBlock,
                     onReorder: reorderBlock,
                     isPaletteDrag: activePaletteVariant !== null,
-                    onOpenPalette: () => setPaletteOpen(true)
+                    onOpenPalette: () => setPaletteOpen(true),
+                    blockActions
                   }
                 ) })
               ] })