@tightknitai/block-kitchen 0.8.7 → 0.8.8

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { B as BlockKitchenProps, U as Template, y as PreviewSurface, z as PreviewTheme } from './palette-WZCUVJTn.cjs';
-export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as CartesianChart, h as ChannelOption, i as Chart, j as ChartAxisConfig, k as ChartDataPoint, l as ChartSeries, m as ChartType, n as ContextActionsBlock, o as ContextActionsElement, p as CustomEmoji, D as DataVisualizationBlock, F as FeedbackButtonSubobject, q as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, r as IconButtonIcon, s as InputBlock, M as MarkdownBlock, P as PaletteSection, t as PaletteVariant, u as PieChart, v as PieChartSegment, w as PlanBlock, x as PreviewHooks, S as SendAsUserStatus, E as SendPayload, G as SendResult, J as SupportedBlock, K as SupportedBlockType, L as SupportedHeaderBlock, T as TableBlock, N as TableCell, O as TableColumnSetting, Q as TaskCardBlock, R as TaskCardStatus, V as UrlSourceElement, W as VideoBlock, Y as defaultPalette, Z as extraAlertVariant, _ as legacyInputVariants } from './palette-WZCUVJTn.cjs';
+import { B as BlockKitchenProps, W as Template, E as PreviewSurface, G as PreviewTheme } from './palette-5_Tx97Gk.cjs';
+export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as CartesianChart, h as ChannelOption, i as Chart, j as ChartAxisConfig, k as ChartDataPoint, l as ChartSeries, m as ChartType, n as ContainerBlock, o as ContainerChildBlock, p as ContextActionsBlock, q as ContextActionsElement, r as CustomEmoji, D as DataVisualizationBlock, F as FeedbackButtonSubobject, s as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, t as IconButtonIcon, u as InputBlock, M as MarkdownBlock, P as PaletteSection, v as PaletteVariant, w as PieChart, x as PieChartSegment, y as PlanBlock, z as PreviewHooks, S as SendAsUserStatus, J as SendPayload, K as SendResult, L as SupportedBlock, N as SupportedBlockType, O as SupportedHeaderBlock, T as TableBlock, Q as TableCell, R as TableColumnSetting, U as TaskCardBlock, V as TaskCardStatus, X as UrlSourceElement, Y as VideoBlock, _ as defaultPalette, $ as extraAlertVariant, a0 as legacyInputVariants } from './palette-5_Tx97Gk.cjs';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.cjs';
 import 'slack-web-api-client';
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { B as BlockKitchenProps, U as Template, y as PreviewSurface, z as PreviewTheme } from './palette-WZCUVJTn.js';
-export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as CartesianChart, h as ChannelOption, i as Chart, j as ChartAxisConfig, k as ChartDataPoint, l as ChartSeries, m as ChartType, n as ContextActionsBlock, o as ContextActionsElement, p as CustomEmoji, D as DataVisualizationBlock, F as FeedbackButtonSubobject, q as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, r as IconButtonIcon, s as InputBlock, M as MarkdownBlock, P as PaletteSection, t as PaletteVariant, u as PieChart, v as PieChartSegment, w as PlanBlock, x as PreviewHooks, S as SendAsUserStatus, E as SendPayload, G as SendResult, J as SupportedBlock, K as SupportedBlockType, L as SupportedHeaderBlock, T as TableBlock, N as TableCell, O as TableColumnSetting, Q as TaskCardBlock, R as TaskCardStatus, V as UrlSourceElement, W as VideoBlock, Y as defaultPalette, Z as extraAlertVariant, _ as legacyInputVariants } from './palette-WZCUVJTn.js';
+import { B as BlockKitchenProps, W as Template, E as PreviewSurface, G as PreviewTheme } from './palette-5_Tx97Gk.js';
+export { A as AlertBlock, a as AlertLevel, b as BrandPreset, c as BrandTheme, d as BrandTokens, e as BuilderBlock, C as CardBlock, f as CarouselBlock, g as CartesianChart, h as ChannelOption, i as Chart, j as ChartAxisConfig, k as ChartDataPoint, l as ChartSeries, m as ChartType, n as ContainerBlock, o as ContainerChildBlock, p as ContextActionsBlock, q as ContextActionsElement, r as CustomEmoji, D as DataVisualizationBlock, F as FeedbackButtonSubobject, s as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, t as IconButtonIcon, u as InputBlock, M as MarkdownBlock, P as PaletteSection, v as PaletteVariant, w as PieChart, x as PieChartSegment, y as PlanBlock, z as PreviewHooks, S as SendAsUserStatus, J as SendPayload, K as SendResult, L as SupportedBlock, N as SupportedBlockType, O as SupportedHeaderBlock, T as TableBlock, Q as TableCell, R as TableColumnSetting, U as TaskCardBlock, V as TaskCardStatus, X as UrlSourceElement, Y as VideoBlock, _ as defaultPalette, $ as extraAlertVariant, a0 as legacyInputVariants } from './palette-5_Tx97Gk.js';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
 import 'slack-web-api-client';
 

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, pointerWithin, closestCenter, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
-import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, ExternalLink, AlertTriangle, Trash2, Code2, MoreHorizontal, Send, Search, CheckCircle2, Check, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Pencil, Copy, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Undo2, Redo2, Link as Link$1, Smile } from 'lucide-react';
+import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, ExternalLink, AlertTriangle, Trash2, Code2, MoreHorizontal, Send, Search, CheckCircle2, Check, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Pencil, Copy, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Undo2, Redo2, Link as Link$1, Smile } from 'lucide-react';
 import * as React from 'react';
 import { createContext, useMemo, useState, useCallback, useRef, useEffect, useId, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1121,6 +1121,49 @@ var defaultPalette = [
         })
       }
     ]
+  },
+  {
+    name: "Container",
+    icon: Container,
+    variants: [
+      {
+        id: "container_collapsible",
+        label: "Collapsible container",
+        factory: () => ({
+          type: "container",
+          title: { type: "plain_text", text: "Bulk update: 2 records selected" },
+          subtitle: { type: "plain_text", text: "Review changes before confirming" },
+          is_collapsible: true,
+          child_blocks: [
+            {
+              type: "section",
+              text: { type: "mrkdwn", text: "*DCW-1024*\nStatus: Open \u2192 Closed" }
+            },
+            { type: "divider" },
+            {
+              type: "section",
+              text: { type: "mrkdwn", text: "*DCW-1025*\nStatus: In Progress \u2192 Closed" }
+            },
+            {
+              type: "actions",
+              elements: [
+                {
+                  type: "button",
+                  text: { type: "plain_text", text: "Confirm All", emoji: true },
+                  style: "primary",
+                  action_id: "bulk_confirm"
+                },
+                {
+                  type: "button",
+                  text: { type: "plain_text", text: "Cancel", emoji: true },
+                  action_id: "bulk_cancel"
+                }
+              ]
+            }
+          ]
+        })
+      }
+    ]
   }
 ];
 var legacyInputVariants = [
@@ -1601,6 +1644,8 @@ function labelForBlockType(type) {
       return "Task Card";
     case "data_visualization":
       return "Data Visualization";
+    case "container":
+      return "Container";
   }
 }
 function cn(...inputs) {
@@ -3515,6 +3560,160 @@ function CarouselEditor({ block, onChange }) {
     ] })
   ] });
 }
+var MAX_CHILDREN = 10;
+var WIDTHS = ["narrow", "standard", "wide", "full"];
+function ContainerEditor({ block, onChange }) {
+  const children = block.child_blocks ?? [];
+  const iconUrl = block.icon && "image_url" in block.icon ? block.icon.image_url ?? "" : "";
+  const iconAlt = block.icon?.alt_text ?? "";
+  const removeChildAt = (idx) => {
+    onChange({ ...block, child_blocks: children.filter((_, i) => i !== idx) });
+  };
+  const addChild = () => {
+    const child = {
+      type: "section",
+      text: { type: "mrkdwn", text: "New block." }
+    };
+    onChange({ ...block, child_blocks: [...children, child] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx(EditorField, { label: "Title", help: "Heading shown at the top of the container.", htmlFor: "container-title", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: "container-title",
+        value: block.title?.text ?? "",
+        maxLength: 150,
+        placeholder: "e.g. Bulk update: 2 records selected",
+        onChange: (e) => onChange({ ...block, title: { type: "plain_text", text: e.target.value } })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(EditorField, { label: "Subtitle", help: "Optional secondary line under the title.", htmlFor: "container-subtitle", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: "container-subtitle",
+        value: block.subtitle?.text ?? "",
+        maxLength: 150,
+        placeholder: "e.g. Review changes before confirming",
+        onChange: (e) => onChange({
+          ...block,
+          subtitle: e.target.value ? { type: "plain_text", text: e.target.value } : void 0
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(EditorField, { label: "Icon URL", help: "Optional image shown left of the title.", htmlFor: "container-icon", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: "container-icon",
+        type: "url",
+        value: iconUrl,
+        placeholder: "https://example.com/icon.png",
+        onChange: (e) => onChange({
+          ...block,
+          icon: e.target.value ? { type: "image", image_url: e.target.value, alt_text: iconAlt || "Container icon" } : void 0
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(EditorField, { label: "Width", help: "How wide the container renders in the message.", children: /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        value: block.width ?? "standard",
+        onValueChange: (v) => onChange({ ...block, width: v }),
+        className: "flex flex-row flex-wrap gap-3",
+        children: WIDTHS.map((w) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(RadioGroupItem, { value: w, id: `container-width-${w}` }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: `container-width-${w}`, className: "text-xs capitalize", children: w })
+        ] }, w))
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id: "container-collapsible",
+        label: "Collapsible",
+        help: "Let readers expand and collapse the container.",
+        checked: !!block.is_collapsible,
+        onChange: (checked) => onChange({
+          ...block,
+          is_collapsible: checked || void 0,
+          default_collapsed: checked ? block.default_collapsed : void 0
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id: "container-default-collapsed",
+        label: "Collapsed by default",
+        help: "Start collapsed on first render. Requires Collapsible.",
+        checked: !!block.default_collapsed,
+        disabled: !block.is_collapsible,
+        onChange: (checked) => onChange({ ...block, default_collapsed: checked || void 0 })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Child blocks" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "A container holds 1-10 blocks. To edit a child's content, use the View JSON drawer." }),
+      children.map((child, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border bg-muted/20 px-3 py-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+          idx + 1,
+          ". ",
+          labelForBlockType(child.type)
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove child block",
+            onClick: () => removeChildAt(idx),
+            disabled: children.length <= 1,
+            className: "rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:cursor-not-allowed disabled:opacity-40",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }, idx)),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          onClick: addChild,
+          disabled: children.length >= MAX_CHILDREN,
+          className: "self-start",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+            " Add block"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function Checkbox({
+  id,
+  label,
+  help,
+  checked,
+  disabled,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "checkbox",
+          checked,
+          disabled,
+          onChange: (e) => onChange(e.target.checked),
+          className: "h-3.5 w-3.5 cursor-pointer rounded border-input disabled:cursor-not-allowed disabled:opacity-40"
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { htmlFor: id, className: "cursor-pointer text-xs", children: label })
+    ] }),
+    help ? /* @__PURE__ */ jsx("p", { className: "ml-5 text-[11px] leading-snug text-muted-foreground", children: help }) : null
+  ] });
+}
 var MAX_ELEMENTS = 5;
 function ContextActionsEditor({ block, onChange }) {
   const elements = block.elements ?? [];
@@ -7684,6 +7883,8 @@ function dispatch(block, onChange) {
       return /* @__PURE__ */ jsx(TaskCardEditor, { block, onChange: (next) => onChange(next) });
     case "data_visualization":
       return /* @__PURE__ */ jsx(DataVisualizationEditor, { block, onChange: (next) => onChange(next) });
+    case "container":
+      return /* @__PURE__ */ jsx(ContainerEditor, { block, onChange: (next) => onChange(next) });
     default:
       return null;
   }
@@ -7760,7 +7961,8 @@ var BLOCK_TYPE_LABELS = {
   video: "Video",
   plan: "Plan",
   task_card: "Task Card",
-  data_visualization: "Data Visualization"
+  data_visualization: "Data Visualization",
+  container: "Container"
 };
 function BlockRow({
   builderBlock,