@tightknitai/block-kitchen 0.10.23 → 0.10.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
- 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';
4
- 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';
3
+ 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-Bup6i-9c.cjs';
4
+ 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-Bup6i-9c.cjs';
5
5
  export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.cjs';
6
6
  import 'slack-web-api-client';
7
7
 
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
- 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';
4
- 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';
3
+ 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-Bup6i-9c.js';
4
+ 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-Bup6i-9c.js';
5
5
  export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
6
6
  import 'slack-web-api-client';
7
7
 
package/dist/index.js CHANGED
@@ -10471,7 +10471,8 @@ function BlockRow({
10471
10471
  onReorder,
10472
10472
  isPaletteDrag = false,
10473
10473
  position,
10474
- blockActions
10474
+ blockActions,
10475
+ renderBlockAdornment
10475
10476
  }) {
10476
10477
  const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({
10477
10478
  id: builderBlock.id
@@ -10486,6 +10487,63 @@ function BlockRow({
10486
10487
  const [inlineEditing, setInlineEditing] = useState(false);
10487
10488
  const showDropIndicator = isPaletteDrag && isOver;
10488
10489
  const preview = /* @__PURE__ */ jsx(SlackBlockPreview, { block: builderBlock.block, hooks: previewHooks, theme: previewTheme });
10490
+ const body = isRichText && inlineEditing ? /* @__PURE__ */ jsx(
10491
+ RichTextInlineEditor,
10492
+ {
10493
+ block: builderBlock.block,
10494
+ onSave: (next) => {
10495
+ onUpdate(builderBlock.id, next);
10496
+ setInlineEditing(false);
10497
+ },
10498
+ onCancel: () => setInlineEditing(false)
10499
+ }
10500
+ ) : isRichText ? /* @__PURE__ */ jsx(
10501
+ "button",
10502
+ {
10503
+ type: "button",
10504
+ "aria-label": "Edit block",
10505
+ onClick: () => setInlineEditing(true),
10506
+ ...attributes,
10507
+ ...listeners,
10508
+ className: cn(
10509
+ "block w-full cursor-grab rounded-sm border-0 bg-transparent p-0 text-left transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
10510
+ hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
10511
+ ),
10512
+ children: preview
10513
+ }
10514
+ ) : /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange, children: [
10515
+ /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
10516
+ "div",
10517
+ {
10518
+ role: "button",
10519
+ tabIndex: 0,
10520
+ "aria-label": "Edit block",
10521
+ ...sortableA11yAttrs,
10522
+ ...listeners,
10523
+ onKeyDown: (e) => {
10524
+ if (e.key === "Enter" || e.key === " ") {
10525
+ e.preventDefault();
10526
+ onOpenChange?.(!isOpen);
10527
+ }
10528
+ },
10529
+ className: cn(
10530
+ "block w-full cursor-grab rounded-sm transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
10531
+ hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
10532
+ ),
10533
+ children: preview
10534
+ }
10535
+ ) }),
10536
+ /* @__PURE__ */ jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsx(
10537
+ BlockEditor,
10538
+ {
10539
+ block: builderBlock.block,
10540
+ errors,
10541
+ onChange: (next) => onUpdate(builderBlock.id, next),
10542
+ onDone: () => onOpenChange?.(false)
10543
+ }
10544
+ ) })
10545
+ ] });
10546
+ const adornment = position && renderBlockAdornment?.(position);
10489
10547
  return /* @__PURE__ */ jsxs(
10490
10548
  "div",
10491
10549
  {
@@ -10504,62 +10562,10 @@ function BlockRow({
10504
10562
  }
10505
10563
  ) : null,
10506
10564
  /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
10507
- isRichText && inlineEditing ? /* @__PURE__ */ jsx(
10508
- RichTextInlineEditor,
10509
- {
10510
- block: builderBlock.block,
10511
- onSave: (next) => {
10512
- onUpdate(builderBlock.id, next);
10513
- setInlineEditing(false);
10514
- },
10515
- onCancel: () => setInlineEditing(false)
10516
- }
10517
- ) : isRichText ? /* @__PURE__ */ jsx(
10518
- "button",
10519
- {
10520
- type: "button",
10521
- "aria-label": "Edit block",
10522
- onClick: () => setInlineEditing(true),
10523
- ...attributes,
10524
- ...listeners,
10525
- className: cn(
10526
- "block w-full cursor-grab rounded-sm border-0 bg-transparent p-0 text-left transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
10527
- hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
10528
- ),
10529
- children: preview
10530
- }
10531
- ) : /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange, children: [
10532
- /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
10533
- "div",
10534
- {
10535
- role: "button",
10536
- tabIndex: 0,
10537
- "aria-label": "Edit block",
10538
- ...sortableA11yAttrs,
10539
- ...listeners,
10540
- onKeyDown: (e) => {
10541
- if (e.key === "Enter" || e.key === " ") {
10542
- e.preventDefault();
10543
- onOpenChange?.(!isOpen);
10544
- }
10545
- },
10546
- className: cn(
10547
- "block w-full cursor-grab rounded-sm transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
10548
- hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
10549
- ),
10550
- children: preview
10551
- }
10552
- ) }),
10553
- /* @__PURE__ */ jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsx(
10554
- BlockEditor,
10555
- {
10556
- block: builderBlock.block,
10557
- errors,
10558
- onChange: (next) => onUpdate(builderBlock.id, next),
10559
- onDone: () => onOpenChange?.(false)
10560
- }
10561
- ) })
10562
- ] }),
10565
+ renderBlockAdornment ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
10566
+ /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: body }),
10567
+ adornment != null && adornment !== false ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: adornment }) : null
10568
+ ] }) : body,
10563
10569
  /* @__PURE__ */ jsx("span", { className: "-translate-x-1/2 pointer-events-none absolute bottom-full left-1/2 z-10 hidden bg-background px-1.5 text-[11px] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 md:block", children: BLOCK_TYPE_LABELS[builderBlock.block.type] }),
10564
10570
  /* @__PURE__ */ jsxs(
10565
10571
  "div",
@@ -10771,7 +10777,8 @@ function ContainerRow({
10771
10777
  index,
10772
10778
  total,
10773
10779
  isPaletteDrag = false,
10774
- blockActions
10780
+ blockActions,
10781
+ renderBlockAdornment
10775
10782
  }) {
10776
10783
  const { id } = builderBlock;
10777
10784
  const block = builderBlock.block;
@@ -10785,105 +10792,111 @@ function ContainerRow({
10785
10792
  const style = { transform: CSS.Transform.toString(transform), transition };
10786
10793
  const icon = block.icon && "image_url" in block.icon ? block.icon.image_url : void 0;
10787
10794
  const position = typeof index === "number" ? { index, childIndex: null } : void 0;
10788
- return /* @__PURE__ */ jsxs(
10795
+ const adornment = position && renderBlockAdornment?.(position);
10796
+ const card = /* @__PURE__ */ jsxs(
10789
10797
  "div",
10790
10798
  {
10791
- ref: setNodeRef,
10792
- style,
10793
- "data-bk-block-index": index,
10794
- className: cn("group/container relative mb-2 last:mb-0 hover:z-10", isDragging && "opacity-40"),
10799
+ className: cn(
10800
+ "overflow-hidden rounded-md border bg-card transition-shadow",
10801
+ hasErrors ? "border-destructive/60" : "border-border"
10802
+ ),
10795
10803
  children: [
10796
- /* @__PURE__ */ jsxs(
10804
+ /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (open) => onOpenBlockChange?.(open ? id : null), children: [
10805
+ /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
10806
+ "div",
10807
+ {
10808
+ role: "button",
10809
+ tabIndex: 0,
10810
+ "aria-label": "Edit container",
10811
+ ...sortableA11yAttrs,
10812
+ ...listeners,
10813
+ onKeyDown: (e) => {
10814
+ if (e.key === "Enter" || e.key === " ") {
10815
+ e.preventDefault();
10816
+ onOpenBlockChange?.(!isOpen ? id : null);
10817
+ }
10818
+ },
10819
+ className: "flex w-full cursor-grab items-center gap-2 border-b bg-muted/40 px-3 py-2 text-left transition-colors hover:bg-muted active:cursor-grabbing",
10820
+ children: [
10821
+ icon ? /* @__PURE__ */ jsx("img", { src: icon, alt: "", "aria-hidden": "true", className: "h-5 w-5 shrink-0 rounded object-cover" }) : null,
10822
+ /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
10823
+ /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-semibold text-foreground", children: containerTitleText(block) || "Container" }),
10824
+ block.subtitle?.text ? /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: block.subtitle.text }) : null
10825
+ ] }),
10826
+ /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Container" })
10827
+ ]
10828
+ }
10829
+ ) }),
10830
+ /* @__PURE__ */ jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsx(
10831
+ BlockEditor,
10832
+ {
10833
+ block,
10834
+ errors,
10835
+ onChange: (next) => onUpdate(id, next),
10836
+ onDone: () => onOpenBlockChange?.(null)
10837
+ }
10838
+ ) })
10839
+ ] }),
10840
+ /* @__PURE__ */ jsx(
10797
10841
  "div",
10798
10842
  {
10843
+ ref: setBodyRef,
10799
10844
  className: cn(
10800
- "overflow-hidden rounded-md border bg-card transition-shadow",
10801
- hasErrors ? "border-destructive/60" : "border-border"
10845
+ "flex flex-col gap-2 p-3 transition-colors",
10846
+ isPaletteDrag && "outline-2 -outline-offset-2 outline-dashed outline-primary/40",
10847
+ isPaletteDrag && isBodyOver && "bg-primary/5"
10802
10848
  ),
10803
- children: [
10804
- /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: (open) => onOpenBlockChange?.(open ? id : null), children: [
10805
- /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
10806
- "div",
10807
- {
10808
- role: "button",
10809
- tabIndex: 0,
10810
- "aria-label": "Edit container",
10811
- ...sortableA11yAttrs,
10812
- ...listeners,
10813
- onKeyDown: (e) => {
10814
- if (e.key === "Enter" || e.key === " ") {
10815
- e.preventDefault();
10816
- onOpenBlockChange?.(!isOpen ? id : null);
10817
- }
10818
- },
10819
- className: "flex w-full cursor-grab items-center gap-2 border-b bg-muted/40 px-3 py-2 text-left transition-colors hover:bg-muted active:cursor-grabbing",
10820
- children: [
10821
- icon ? /* @__PURE__ */ jsx("img", { src: icon, alt: "", "aria-hidden": "true", className: "h-5 w-5 shrink-0 rounded object-cover" }) : null,
10822
- /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
10823
- /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-semibold text-foreground", children: containerTitleText(block) || "Container" }),
10824
- block.subtitle?.text ? /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-muted-foreground", children: block.subtitle.text }) : null
10825
- ] }),
10826
- /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Container" })
10827
- ]
10828
- }
10829
- ) }),
10830
- /* @__PURE__ */ jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsx(
10831
- BlockEditor,
10832
- {
10833
- block,
10834
- errors,
10835
- onChange: (next) => onUpdate(id, next),
10836
- onDone: () => onOpenBlockChange?.(null)
10837
- }
10838
- ) })
10839
- ] }),
10840
- /* @__PURE__ */ jsx(
10841
- "div",
10849
+ children: children.length === 0 ? /* @__PURE__ */ jsx(
10850
+ "div",
10851
+ {
10852
+ className: cn(
10853
+ "flex items-center justify-center rounded-md border border-dashed px-3 py-6 text-center text-[11px] transition-colors",
10854
+ isBodyOver ? "border-primary/60 text-primary" : "border-border text-muted-foreground"
10855
+ ),
10856
+ children: "Drag blocks here"
10857
+ }
10858
+ ) : /* @__PURE__ */ jsxs(SortableContext, { items: children.map((c) => c.id), strategy: verticalListSortingStrategy, children: [
10859
+ children.map((child, idx) => /* @__PURE__ */ jsx(
10860
+ BlockRow,
10842
10861
  {
10843
- ref: setBodyRef,
10844
- className: cn(
10845
- "flex flex-col gap-2 p-3 transition-colors",
10846
- isPaletteDrag && "outline-2 -outline-offset-2 outline-dashed outline-primary/40",
10847
- isPaletteDrag && isBodyOver && "bg-primary/5"
10848
- ),
10849
- children: children.length === 0 ? /* @__PURE__ */ jsx(
10850
- "div",
10851
- {
10852
- className: cn(
10853
- "flex items-center justify-center rounded-md border border-dashed px-3 py-6 text-center text-[11px] transition-colors",
10854
- isBodyOver ? "border-primary/60 text-primary" : "border-border text-muted-foreground"
10855
- ),
10856
- children: "Drag blocks here"
10857
- }
10858
- ) : /* @__PURE__ */ jsxs(SortableContext, { items: children.map((c) => c.id), strategy: verticalListSortingStrategy, children: [
10859
- children.map((child, idx) => /* @__PURE__ */ jsx(
10860
- BlockRow,
10861
- {
10862
- builderBlock: child,
10863
- previewHooks,
10864
- previewTheme,
10865
- errors: errorsByBlockId?.get(child.id),
10866
- isOpen: openBlockId === child.id,
10867
- onOpenChange: (open) => onOpenBlockChange?.(open ? child.id : null),
10868
- onUpdate,
10869
- onDuplicate,
10870
- onDelete,
10871
- index: idx,
10872
- total: children.length,
10873
- onReorder,
10874
- isPaletteDrag,
10875
- position: typeof index === "number" ? { index, childIndex: idx } : void 0,
10876
- blockActions
10877
- },
10878
- child.id
10879
- )),
10880
- isPaletteDrag && isBodyOver ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
10881
- ] })
10882
- }
10883
- )
10884
- ]
10862
+ builderBlock: child,
10863
+ previewHooks,
10864
+ previewTheme,
10865
+ errors: errorsByBlockId?.get(child.id),
10866
+ isOpen: openBlockId === child.id,
10867
+ onOpenChange: (open) => onOpenBlockChange?.(open ? child.id : null),
10868
+ onUpdate,
10869
+ onDuplicate,
10870
+ onDelete,
10871
+ index: idx,
10872
+ total: children.length,
10873
+ onReorder,
10874
+ isPaletteDrag,
10875
+ position: typeof index === "number" ? { index, childIndex: idx } : void 0,
10876
+ blockActions,
10877
+ renderBlockAdornment
10878
+ },
10879
+ child.id
10880
+ )),
10881
+ isPaletteDrag && isBodyOver ? /* @__PURE__ */ jsx(DropIndicator, {}) : null
10882
+ ] })
10885
10883
  }
10886
- ),
10884
+ )
10885
+ ]
10886
+ }
10887
+ );
10888
+ return /* @__PURE__ */ jsxs(
10889
+ "div",
10890
+ {
10891
+ ref: setNodeRef,
10892
+ style,
10893
+ "data-bk-block-index": index,
10894
+ className: cn("group/container relative mb-2 last:mb-0 hover:z-10", isDragging && "opacity-40"),
10895
+ children: [
10896
+ renderBlockAdornment ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
10897
+ /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: card }),
10898
+ adornment != null && adornment !== false ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: adornment }) : null
10899
+ ] }) : card,
10887
10900
  /* @__PURE__ */ jsxs(
10888
10901
  "div",
10889
10902
  {
@@ -11009,7 +11022,8 @@ function Surface({
11009
11022
  onReorder,
11010
11023
  isPaletteDrag = false,
11011
11024
  onOpenPalette,
11012
- blockActions
11025
+ blockActions,
11026
+ renderBlockAdornment
11013
11027
  }) {
11014
11028
  const { setNodeRef, isOver } = useDroppable({ id: SURFACE_DROPPABLE_ID });
11015
11029
  const isDark = previewTheme === "dark";
@@ -11042,7 +11056,8 @@ function Surface({
11042
11056
  total: blocks.length,
11043
11057
  onReorder,
11044
11058
  isPaletteDrag,
11045
- blockActions
11059
+ blockActions,
11060
+ renderBlockAdornment
11046
11061
  },
11047
11062
  block.id
11048
11063
  ) : /* @__PURE__ */ jsx(
@@ -11062,7 +11077,8 @@ function Surface({
11062
11077
  onReorder,
11063
11078
  isPaletteDrag,
11064
11079
  position: { index: idx, childIndex: null },
11065
- blockActions
11080
+ blockActions,
11081
+ renderBlockAdornment
11066
11082
  },
11067
11083
  block.id
11068
11084
  )
@@ -11821,6 +11837,7 @@ function BlockKitchen(props) {
11821
11837
  onValidationChange,
11822
11838
  previewHooks,
11823
11839
  blockActions,
11840
+ renderBlockAdornment,
11824
11841
  customEmojis,
11825
11842
  mentions,
11826
11843
  loadChannels,
@@ -12202,7 +12219,8 @@ function BlockKitchen(props) {
12202
12219
  onReorder: reorderBlock,
12203
12220
  isPaletteDrag: activePaletteVariant !== null,
12204
12221
  onOpenPalette: () => setPaletteOpen(true),
12205
- blockActions
12222
+ blockActions,
12223
+ renderBlockAdornment
12206
12224
  }
12207
12225
  ) })
12208
12226
  ] })