@tightknitai/block-kitchen 0.8.7 → 0.8.8

package/dist/helpers.d.cts

@@ -1,5 +1,5 @@
-import { J as SupportedBlock } from './palette-WZCUVJTn.cjs';
-export { K as SupportedBlockType } from './palette-WZCUVJTn.cjs';
+import { L as SupportedBlock } from './palette-5_Tx97Gk.cjs';
+export { N as SupportedBlockType } from './palette-5_Tx97Gk.cjs';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
-import { J as SupportedBlock } from './palette-WZCUVJTn.js';
-export { K as SupportedBlockType } from './palette-WZCUVJTn.js';
+import { L as SupportedBlock } from './palette-5_Tx97Gk.js';
+export { N as SupportedBlockType } from './palette-5_Tx97Gk.js';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/index.cjs

@@ -1151,6 +1151,49 @@ var defaultPalette = [
         })
       }
     ]
+  },
+  {
+    name: "Container",
+    icon: lucideReact.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 = [
@@ -1631,6 +1674,8 @@ function labelForBlockType(type) {
       return "Task Card";
     case "data_visualization":
       return "Data Visualization";
+    case "container":
+      return "Container";
   }
 }
 function cn(...inputs) {
@@ -3545,6 +3590,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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Heading shown at the top of the container.", htmlFor: "container-title", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(EditorField, { label: "Subtitle", help: "Optional secondary line under the title.", htmlFor: "container-subtitle", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(EditorField, { label: "Icon URL", help: "Optional image shown left of the title.", htmlFor: "container-icon", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(EditorField, { label: "Width", help: "How wide the container renders in the message.", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: w, id: `container-width-${w}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `container-width-${w}`, className: "text-xs capitalize", children: w })
+        ] }, w))
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Child blocks" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 rounded-md border bg-muted/20 px-3 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+          idx + 1,
+          ". ",
+          labelForBlockType(child.type)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }, idx)),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          onClick: addChild,
+          disabled: children.length >= MAX_CHILDREN,
+          className: "self-start",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+            " Add block"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function Checkbox({
+  id,
+  label,
+  help,
+  checked,
+  disabled,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Label, { htmlFor: id, className: "cursor-pointer text-xs", children: label })
+    ] }),
+    help ? /* @__PURE__ */ jsxRuntime.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 ?? [];
@@ -7714,6 +7913,8 @@ function dispatch(block, onChange) {
       return /* @__PURE__ */ jsxRuntime.jsx(TaskCardEditor, { block, onChange: (next) => onChange(next) });
     case "data_visualization":
       return /* @__PURE__ */ jsxRuntime.jsx(DataVisualizationEditor, { block, onChange: (next) => onChange(next) });
+    case "container":
+      return /* @__PURE__ */ jsxRuntime.jsx(ContainerEditor, { block, onChange: (next) => onChange(next) });
     default:
       return null;
   }
@@ -7790,7 +7991,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,