@tightknitai/block-kitchen 0.8.5 → 0.8.7

package/dist/index.cjs

@@ -1014,6 +1014,143 @@ var defaultPalette = [
         })
       }
     ]
+  },
+  {
+    name: "Data Visualization",
+    icon: lucideReact.ChartColumnBig,
+    variants: [
+      {
+        id: "dataviz_line",
+        label: "Line chart",
+        factory: () => ({
+          type: "data_visualization",
+          title: "Weekly active users by platform",
+          chart: {
+            type: "line",
+            series: [
+              {
+                name: "Desktop",
+                data: [
+                  { label: "Mon", value: 800 },
+                  { label: "Tue", value: 920 },
+                  { label: "Wed", value: 880 },
+                  { label: "Thu", value: 1010 },
+                  { label: "Fri", value: 1120 }
+                ]
+              },
+              {
+                name: "Mobile",
+                data: [
+                  { label: "Mon", value: 400 },
+                  { label: "Tue", value: 530 },
+                  { label: "Wed", value: 500 },
+                  { label: "Thu", value: 590 },
+                  { label: "Fri", value: 600 }
+                ]
+              }
+            ],
+            axis_config: {
+              categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+              x_label: "Day",
+              y_label: "Users"
+            }
+          }
+        })
+      },
+      {
+        id: "dataviz_bar",
+        label: "Bar chart",
+        factory: () => ({
+          type: "data_visualization",
+          title: "Messages sent by platform",
+          chart: {
+            type: "bar",
+            series: [
+              {
+                name: "Desktop",
+                data: [
+                  { label: "Mon", value: 1500 },
+                  { label: "Tue", value: 1400 },
+                  { label: "Wed", value: 1700 },
+                  { label: "Thu", value: 1600 },
+                  { label: "Fri", value: 1280 }
+                ]
+              },
+              {
+                name: "Mobile",
+                data: [
+                  { label: "Mon", value: 800 },
+                  { label: "Tue", value: 750 },
+                  { label: "Wed", value: 920 },
+                  { label: "Thu", value: 880 },
+                  { label: "Fri", value: 700 }
+                ]
+              }
+            ],
+            axis_config: {
+              categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+              x_label: "Day",
+              y_label: "Messages"
+            }
+          }
+        })
+      },
+      {
+        id: "dataviz_area",
+        label: "Area chart",
+        factory: () => ({
+          type: "data_visualization",
+          title: "Concurrent users by platform",
+          chart: {
+            type: "area",
+            series: [
+              {
+                name: "Desktop",
+                data: [
+                  { label: "Mon", value: 2800 },
+                  { label: "Tue", value: 3e3 },
+                  { label: "Wed", value: 3400 },
+                  { label: "Thu", value: 3200 },
+                  { label: "Fri", value: 3500 }
+                ]
+              },
+              {
+                name: "Mobile",
+                data: [
+                  { label: "Mon", value: 1400 },
+                  { label: "Tue", value: 1500 },
+                  { label: "Wed", value: 1700 },
+                  { label: "Thu", value: 1600 },
+                  { label: "Fri", value: 1800 }
+                ]
+              }
+            ],
+            axis_config: {
+              categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+              x_label: "Day",
+              y_label: "Users"
+            }
+          }
+        })
+      },
+      {
+        id: "dataviz_pie",
+        label: "Pie chart",
+        factory: () => ({
+          type: "data_visualization",
+          title: "Plan distribution by tier",
+          chart: {
+            type: "pie",
+            segments: [
+              { label: "Free", value: 4200 },
+              { label: "Pro", value: 2300 },
+              { label: "Business+", value: 1100 },
+              { label: "Enterprise", value: 480 }
+            ]
+          }
+        })
+      }
+    ]
   }
 ];
 var legacyInputVariants = [
@@ -1492,6 +1629,8 @@ function labelForBlockType(type) {
       return "Plan";
     case "task_card":
       return "Task Card";
+    case "data_visualization":
+      return "Data Visualization";
   }
 }
 function cn(...inputs) {
@@ -2274,6 +2413,18 @@ function IssuesSheet({
     ] })
   ] }) });
 }
+
+// src/lib/parse-blocks-input.ts
+var BLOCKS_INPUT_SHAPE_ERROR = "Expected an array of blocks, or an object with a `blocks` array.";
+function unwrapBlocksInput(parsed) {
+  if (Array.isArray(parsed)) {
+    return parsed;
+  }
+  if (parsed && typeof parsed === "object" && Array.isArray(parsed.blocks)) {
+    return parsed.blocks;
+  }
+  return null;
+}
 var MAX_JSON_BYTES = 1024 * 1024;
 function JsonDrawer({
   open,
@@ -2312,14 +2463,15 @@ function JsonDrawer({
       setValidationErrors([]);
       return;
     }
-    if (!Array.isArray(parsed)) {
-      setParseError("Top-level value must be an array of blocks.");
+    const blocks2 = unwrapBlocksInput(parsed);
+    if (!blocks2) {
+      setParseError(BLOCKS_INPUT_SHAPE_ERROR);
       setValidationErrors([]);
       return;
     }
     setParseError(null);
-    onApply(parsed);
-    const result = slackBlockKitValidator.validateBlockKit(parsed, {
+    onApply(blocks2);
+    const result = slackBlockKitValidator.validateBlockKit(blocks2, {
       target: "blocks",
       surface: "message"
     });
@@ -2697,6 +2849,7 @@ function SendDialog({
   loadChannels,
   loadSendAsUserStatus,
   onSend,
+  confirmSendLabel = "Send",
   errorCount,
   onShowIssues
 }) {
@@ -2870,7 +3023,7 @@ function SendDialog({
           type: "button",
           onClick: handleSubmit,
           disabled: status.kind === "sending" || !channelId || blocks.length === 0 || errorCount > 0,
-          children: status.kind === "sending" ? "Sending\u2026" : "Send"
+          children: status.kind === "sending" ? "Sending\u2026" : confirmSendLabel
         }
       )
     ] })
@@ -3830,6 +3983,294 @@ function ImageItemCard({
     ) })
   ] });
 }
+var CHART_TYPES = ["line", "bar", "area", "pie"];
+function isCartesian(chart) {
+  return chart.type !== "pie";
+}
+function cartesianToSegments(chart) {
+  return (chart.series[0]?.data ?? []).map((d) => ({ label: d.label, value: d.value }));
+}
+function segmentsToCartesian(type, segments) {
+  return {
+    type,
+    series: [{ name: "Series 1", data: segments.map((s) => ({ label: s.label, value: s.value })) }],
+    axis_config: { categories: segments.map((s) => s.label) }
+  };
+}
+function convertChart(chart, nextType) {
+  if (nextType === chart.type) {
+    return chart;
+  }
+  if (nextType === "pie") {
+    return { type: "pie", segments: isCartesian(chart) ? cartesianToSegments(chart) : chart.segments };
+  }
+  if (isCartesian(chart)) {
+    return { ...chart, type: nextType };
+  }
+  return segmentsToCartesian(nextType, chart.segments);
+}
+function DataVisualizationEditor({ block, onChange }) {
+  const { chart } = block;
+  const setChart = (next) => onChange({ ...block, chart: next });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Heading shown above the chart.", htmlFor: "dataviz-title", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "dataviz-title",
+        value: block.title,
+        placeholder: "e.g. Weekly active users",
+        onChange: (e) => onChange({ ...block, title: e.target.value })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Chart type", children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadioGroup,
+      {
+        value: chart.type,
+        onValueChange: (v) => setChart(convertChart(chart, v)),
+        className: "flex flex-row flex-wrap gap-3",
+        children: CHART_TYPES.map((t) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: t, id: `dataviz-type-${t}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `dataviz-type-${t}`, className: "text-xs capitalize", children: t })
+        ] }, t))
+      }
+    ) }),
+    isCartesian(chart) ? /* @__PURE__ */ jsxRuntime.jsx(CartesianFields, { chart, onChange: setChart }) : /* @__PURE__ */ jsxRuntime.jsx(PieFields, { chart, onChange: setChart })
+  ] });
+}
+function NumberInput({
+  id,
+  value,
+  onCommit,
+  ariaLabel,
+  className
+}) {
+  const [draft, setDraft] = React.useState(String(value));
+  React.useEffect(() => {
+    setDraft(String(value));
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      id,
+      type: "number",
+      inputMode: "numeric",
+      "aria-label": ariaLabel,
+      value: draft,
+      className,
+      onChange: (e) => {
+        const raw = e.target.value;
+        setDraft(raw);
+        if (raw === "" || raw === "-" || raw === "." || raw === "-.") {
+          return;
+        }
+        const next = Number(raw);
+        if (!Number.isNaN(next)) {
+          onCommit(next);
+        }
+      },
+      onBlur: () => {
+        const next = Number(draft);
+        const safe = draft.trim() === "" || Number.isNaN(next) ? 0 : next;
+        onCommit(safe);
+        setDraft(String(safe));
+      }
+    }
+  );
+}
+function CartesianFields({ chart, onChange }) {
+  const series = chart.series;
+  const categories = chart.axis_config?.categories && chart.axis_config.categories.length > 0 ? chart.axis_config.categories : series[0]?.data.map((d) => d.label) ?? [];
+  const xLabel = chart.axis_config?.x_label ?? "";
+  const yLabel = chart.axis_config?.y_label ?? "";
+  const commit = (nextCategories, nextSeries, axis) => {
+    const aligned = nextSeries.map((s) => ({
+      name: s.name,
+      data: nextCategories.map((label, i) => ({ label, value: s.data[i]?.value ?? 0 }))
+    }));
+    const x = axis?.x_label ?? xLabel;
+    const y = axis?.y_label ?? yLabel;
+    onChange({
+      type: chart.type,
+      series: aligned,
+      axis_config: {
+        categories: nextCategories,
+        ...x ? { x_label: x } : {},
+        ...y ? { y_label: y } : {}
+      }
+    });
+  };
+  const setCategory = (col, label) => commit(
+    categories.map((c, i) => i === col ? label : c),
+    series
+  );
+  const addCategory = () => commit([...categories, `Cat ${categories.length + 1}`], series);
+  const removeCategory = (col) => commit(
+    categories.filter((_, i) => i !== col),
+    series.map((s) => ({ name: s.name, data: s.data.filter((_, i) => i !== col) }))
+  );
+  const setCell = (seriesIdx, col, value) => commit(
+    categories,
+    series.map(
+      (s, i) => i === seriesIdx ? { name: s.name, data: s.data.map((d, j) => j === col ? { ...d, value } : d) } : s
+    )
+  );
+  const setSeriesName = (seriesIdx, name) => commit(
+    categories,
+    series.map((s, i) => i === seriesIdx ? { ...s, name } : s)
+  );
+  const addSeries = () => commit(categories, [
+    ...series,
+    { name: `Series ${series.length + 1}`, data: categories.map((label) => ({ label, value: 0 })) }
+  ]);
+  const removeSeries = (seriesIdx) => commit(
+    categories,
+    series.filter((_, i) => i !== seriesIdx)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "X-axis label", htmlFor: "dataviz-x-label", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: "dataviz-x-label",
+          value: xLabel,
+          placeholder: "e.g. Day",
+          onChange: (e) => commit(categories, series, { x_label: e.target.value })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Y-axis label", htmlFor: "dataviz-y-label", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: "dataviz-y-label",
+          value: yLabel,
+          placeholder: "e.g. Users",
+          onChange: (e) => commit(categories, series, { y_label: e.target.value })
+        }
+      ) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Data", help: "Categories are the x-axis; each series is plotted across them.", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 overflow-x-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-36 shrink-0", "aria-hidden": "true" }),
+        categories.map((cat, c) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[88px] flex-1 items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              "aria-label": `Category ${c + 1}`,
+              value: cat,
+              placeholder: `Cat ${c + 1}`,
+              onChange: (e) => setCategory(c, e.target.value),
+              className: "h-8 text-xs"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove category ${c + 1}`,
+              onClick: () => removeCategory(c),
+              className: "flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] }, c))
+      ] }),
+      series.map((s, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-36 shrink-0 items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              "aria-label": `Series ${si + 1} name`,
+              value: s.name,
+              placeholder: `Series ${si + 1}`,
+              onChange: (e) => setSeriesName(si, e.target.value),
+              className: "h-8 text-xs"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove series ${si + 1}`,
+              onClick: () => removeSeries(si),
+              className: "flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] }),
+        categories.map((cat, c) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[88px] flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          NumberInput,
+          {
+            value: s.data[c]?.value ?? 0,
+            onCommit: (n) => setCell(si, c, n),
+            ariaLabel: `${s.name || `Series ${si + 1}`} value for ${cat || `category ${c + 1}`}`,
+            className: "h-8 text-xs"
+          }
+        ) }, c))
+      ] }, si))
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addSeries, className: "self-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+        " Add series"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addCategory, className: "self-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+        " Add category"
+      ] })
+    ] })
+  ] });
+}
+function PieFields({ chart, onChange }) {
+  const segments = chart.segments;
+  const setSegment = (idx, change) => onChange({ ...chart, segments: segments.map((s, i) => i === idx ? { ...s, ...change } : s) });
+  const removeSegment = (idx) => onChange({ ...chart, segments: segments.filter((_, i) => i !== idx) });
+  const addSegment = () => onChange({ ...chart, segments: [...segments, { label: `Segment ${segments.length + 1}`, value: 0 }] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded-md border bg-muted/20 p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: "Segments" }),
+    segments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "No segments. Add one to render a slice." }) : null,
+    segments.map((seg, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded border bg-background p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+          "Segment ",
+          idx + 1
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove segment",
+            onClick: () => removeSegment(idx),
+            className: "rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Label", htmlFor: `pie-label-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            id: `pie-label-${idx}`,
+            value: seg.label,
+            placeholder: "e.g. Free",
+            onChange: (e) => setSegment(idx, { label: e.target.value })
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-28", children: /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Value", htmlFor: `pie-value-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          NumberInput,
+          {
+            id: `pie-value-${idx}`,
+            value: seg.value,
+            onCommit: (n) => setSegment(idx, { value: n }),
+            ariaLabel: `Segment ${idx + 1} value`
+          }
+        ) }) })
+      ] })
+    ] }, idx)),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addSegment, className: "self-start", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+      " Add segment"
+    ] })
+  ] });
+}
 function DividerEditor() {
   return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "A horizontal line that separates content. This block has no options to configure." });
 }
@@ -5278,7 +5719,7 @@ var SUPPORTED_BLOCK_KINDS = /* @__PURE__ */ new Set([
   "rich_text_preformatted"
 ]);
 var SUPPORTED_INLINE_KINDS = /* @__PURE__ */ new Set(["text", "link", "emoji"]);
-var SUPPORTED_TEXT_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "code"]);
+var SUPPORTED_TEXT_STYLE_KEYS = /* @__PURE__ */ new Set(["bold", "italic", "strike", "underline", "code"]);
 var MAX_LIST_INDENT = 8;
 function detectLossy(block) {
   const out = [];
@@ -5462,6 +5903,9 @@ function styleToMarks(style) {
   if (style.strike) {
     marks.push({ type: "strike" });
   }
+  if (style.underline) {
+    marks.push({ type: "underline" });
+  }
   if (style.code) {
     marks.push({ type: "code" });
   }
@@ -5608,6 +6052,9 @@ function marksToStyle(marks) {
     if (m.type === "strike") {
       style.strike = true;
     }
+    if (m.type === "underline") {
+      style.underline = true;
+    }
     if (m.type === "code") {
       style.code = true;
     }
@@ -5695,7 +6142,7 @@ var INLINE_LABEL = {
   broadcast: "Broadcast",
   usergroup: "User group"
 };
-var STYLE_KEYS = ["bold", "italic", "strike", "code"];
+var STYLE_KEYS = ["bold", "italic", "strike", "underline", "code"];
 function RichTextStructuredEditor({ block, onChange }) {
   const elements = block.elements ?? [];
   const replaceElements = (next) => {
@@ -6374,6 +6821,15 @@ function Toolbar({ editor }) {
         Icon: lucideReact.Strikethrough
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ToolbarButton,
+      {
+        label: "Underline",
+        active: editor.isActive("underline"),
+        onClick: () => editor.chain().focus().toggleUnderline().run(),
+        Icon: lucideReact.Underline
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       ToolbarButton,
       {
@@ -7256,6 +7712,8 @@ function dispatch(block, onChange) {
       return /* @__PURE__ */ jsxRuntime.jsx(PlanEditor, { block, onChange: (next) => onChange(next) });
     case "task_card":
       return /* @__PURE__ */ jsxRuntime.jsx(TaskCardEditor, { block, onChange: (next) => onChange(next) });
+    case "data_visualization":
+      return /* @__PURE__ */ jsxRuntime.jsx(DataVisualizationEditor, { block, onChange: (next) => onChange(next) });
     default:
       return null;
   }
@@ -7331,7 +7789,8 @@ var BLOCK_TYPE_LABELS = {
   input: "Input",
   video: "Video",
   plan: "Plan",
-  task_card: "Task Card"
+  task_card: "Task Card",
+  data_visualization: "Data Visualization"
 };
 function BlockRow({
   builderBlock,
@@ -7944,7 +8403,8 @@ function Toolbar2({
   allowedSurfaces,
   showThemeControl = true,
   docsLink,
-  errorCount
+  errorCount,
+  sendButtonLabel = "Send"
 }) {
   const activeTheme = THEME_OPTIONS.find((t) => t.value === previewTheme) ?? THEME_OPTIONS[0];
   const activeSurface = SURFACE_OPTIONS.find((s) => s.value === previewSurface) ?? SURFACE_OPTIONS[0];
@@ -8034,7 +8494,7 @@ function Toolbar2({
           variant: "ghost",
           size: "sm",
           onClick: onOpenIssues,
-          className: "text-destructive hover:text-destructive",
+          className: "border border-red-200! bg-red-50 text-red-700 hover:bg-red-100 hover:text-red-700",
           "aria-label": `${errorCount} ${errorCount === 1 ? "issue" : "issues"}`,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3.5 w-3.5" }),
@@ -8127,9 +8587,9 @@ function Toolbar2({
           ) : null
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenSend, disabled: !canSend, "aria-label": "Send", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenSend, disabled: !canSend, "aria-label": sendButtonLabel, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-3.5 w-3.5" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Send" })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: sendButtonLabel })
       ] })
     ] })
   ] });
@@ -8255,6 +8715,9 @@ function BlockKitchen(props) {
     showThemeControl = true,
     docsLink,
     defaultPreviewTheme = "light",
+    previewTheme: controlledPreviewTheme,
+    sendButtonLabel,
+    confirmSendLabel,
     theme
   } = props;
   const paletteSections = React.useMemo(() => {
@@ -8282,7 +8745,9 @@ function BlockKitchen(props) {
   const [issuesOpen, setIssuesOpen] = React.useState(false);
   const [paletteOpen, setPaletteOpen] = React.useState(false);
   const [openBlockId, setOpenBlockId] = React.useState(null);
-  const [previewTheme, setPreviewTheme] = React.useState(defaultPreviewTheme);
+  const [uncontrolledPreviewTheme, setUncontrolledPreviewTheme] = React.useState(defaultPreviewTheme);
+  const isPreviewThemeControlled = controlledPreviewTheme !== void 0;
+  const previewTheme = controlledPreviewTheme ?? uncontrolledPreviewTheme;
   const [previewSurface, setPreviewSurface] = React.useState(allowedSurfaces[0]);
   const [activePaletteVariantId, setActivePaletteVariantId] = React.useState(null);
   const isMobile = useIsMobile();
@@ -8364,12 +8829,13 @@ function BlockKitchen(props) {
               canClear: blocks.length > 0,
               errorCount: validation.total,
               previewTheme,
-              onPreviewThemeChange: setPreviewTheme,
+              onPreviewThemeChange: setUncontrolledPreviewTheme,
               previewSurface,
               onPreviewSurfaceChange: setPreviewSurface,
               allowedSurfaces,
-              showThemeControl,
-              docsLink
+              showThemeControl: isPreviewThemeControlled ? false : showThemeControl,
+              docsLink,
+              sendButtonLabel
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
@@ -8445,6 +8911,7 @@ function BlockKitchen(props) {
             loadChannels,
             loadSendAsUserStatus,
             onSend,
+            confirmSendLabel,
             errorCount: validation.total,
             onShowIssues: () => {
               setSendOpen(false);