@tightknitai/block-kitchen 0.8.5 → 0.8.6

package/README.md

@@ -116,8 +116,11 @@ export function MyBuilderPage() {
 | `showPaletteSearch` | `boolean` | no | Whether the palette renders the quick-search input above the section list. Defaults to `true`. Set `false` for compact palettes (e.g. when you've passed a small custom `palette`) where scanning by eye is faster than typing. |
 | `paletteSearchPlaceholder` | `string` | no | Placeholder text for the palette search input. Defaults to `'Search blocks…'`. Useful for localization. |
 | `allowedSurfaces` | `PreviewSurface[]` | no | Allowlist of preview surfaces (`'message'`, `'modal'`, `'app_home'`). Defaults to `['message']` — surface dropdown is hidden when only one surface is allowed. The first entry is the initial selection. |
-| `showThemeControl` | `boolean` | no | Defaults to `true`. When `false`, the theme is locked to `'light'`. |
-| `defaultPreviewTheme` | `'light' \| 'dark'` | no | Pass the host app's current theme so the preview opens matched to the consuming app's appearance. |
+| `showThemeControl` | `boolean` | no | Defaults to `true`. When `false`, the toolbar's light/dark toggle is hidden and the theme stays at `defaultPreviewTheme`. Ignored when `previewTheme` is set (a controlled theme always hides the toggle). |
+| `defaultPreviewTheme` | `'light' \| 'dark'` | no | Initial (uncontrolled) preview theme. Pass the host app's current theme so the preview opens matched to the consuming app's appearance. Ignored when `previewTheme` is provided. |
+| `previewTheme` | `'light' \| 'dark'` | no | Controlled preview theme. When set, the preview renders in this theme, follows it reactively, and the toolbar's light/dark toggle is hidden so the host app fully owns the theme. Leave unset to keep the preview uncontrolled (seeded from `defaultPreviewTheme`, toggle shown). |
+| `sendButtonLabel` | `string` | no | Label and accessible name for the toolbar's Send button (which opens the send dialog). Defaults to `'Send'`. Use it to signal that a configuration step follows, e.g. `'Send to channel…'`. |
+| `confirmSendLabel` | `string` | no | Label for the send dialog's final confirm button. Defaults to `'Send'` (shows `'Sending…'` while in flight). |
 | `theme` | `BrandTheme \| BrandPreset` | no | Branding tokens applied to the builder chrome (toolbar, palette, popovers, dialogs). Accepts a `Partial<BrandTokens>` map and optional `light`/`dark` overrides. See [Styling](#styling) below. |
 
 ## Customizing the palette
@@ -222,7 +225,7 @@ const brand: BrandTheme = {
 - `tokens` applies in both light and dark contexts.
 - `light` and `dark` override per mode; the dark variant kicks in under a standard `.dark` ancestor class (next-themes default).
 - Color tokens take HSL component strings (`"262 83% 58%"`), matching the underlying CSS variable contract; `radius` takes a CSS length.
-- Scope is the builder chrome only. The embedded Slack preview keeps its native Slack styling regardless of `theme`; use `defaultPreviewTheme` for the preview's light/dark toggle.
+- Scope is the builder chrome only. The embedded Slack preview keeps its native Slack styling regardless of `theme`; use `previewTheme` (controlled) or `defaultPreviewTheme` (uncontrolled) for the preview's light/dark appearance.
 
 The lower-level CSS-variable contract above keeps working; the `theme` prop simply layers on top of it.
 

package/dist/helpers.d.cts

@@ -1,5 +1,5 @@
-import { u as SupportedBlock } from './palette-Dco-CVMi.cjs';
-export { v as SupportedBlockType } from './palette-Dco-CVMi.cjs';
+import { u as SupportedBlock } from './palette-DToUE_3J.cjs';
+export { v as SupportedBlockType } from './palette-DToUE_3J.cjs';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
-import { u as SupportedBlock } from './palette-Dco-CVMi.js';
-export { v as SupportedBlockType } from './palette-Dco-CVMi.js';
+import { u as SupportedBlock } from './palette-DToUE_3J.js';
+export { v as SupportedBlockType } from './palette-DToUE_3J.js';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/index.cjs

@@ -2274,6 +2274,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 +2324,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 +2710,7 @@ function SendDialog({
   loadChannels,
   loadSendAsUserStatus,
   onSend,
+  confirmSendLabel = "Send",
   errorCount,
   onShowIssues
 }) {
@@ -2870,7 +2884,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
         }
       )
     ] })
@@ -7944,7 +7958,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 +8049,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 +8142,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 +8270,9 @@ function BlockKitchen(props) {
     showThemeControl = true,
     docsLink,
     defaultPreviewTheme = "light",
+    previewTheme: controlledPreviewTheme,
+    sendButtonLabel,
+    confirmSendLabel,
     theme
   } = props;
   const paletteSections = React.useMemo(() => {
@@ -8282,7 +8300,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 +8384,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 +8466,7 @@ function BlockKitchen(props) {
             loadChannels,
             loadSendAsUserStatus,
             onSend,
+            confirmSendLabel,
             errorCount: validation.total,
             onShowIssues: () => {
               setSendOpen(false);