@tightknitai/block-kitchen 0.9.9 → 0.10.0

package/dist/index.cjs

@@ -2045,6 +2045,7 @@ function computeValidation(blocks, surface) {
   const grouped = groupValidatorErrors(result.errors, blocks);
   return {
     valid: result.valid,
+    errors: result.errors,
     byBlockId: grouped.byBlockId,
     general: grouped.general,
     total: grouped.total
@@ -2255,6 +2256,29 @@ function useBlockKitchenState({
     replaceAll
   };
 }
+function useDevWarning(condition, message) {
+  const warnedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (condition && !warnedRef.current) {
+      warnedRef.current = true;
+      console.warn(message);
+    }
+  }, [condition, message]);
+}
+function useNotifyOnChange(value, toKey, callback) {
+  const lastNotifiedRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!callback) {
+      return;
+    }
+    const key = toKey(value);
+    if (lastNotifiedRef.current === key) {
+      return;
+    }
+    lastNotifiedRef.current = key;
+    callback(value);
+  }, [value, toKey, callback]);
+}
 
 // src/lib/brand-theme.ts
 var TOKEN_TO_CSS_VAR = {
@@ -3052,7 +3076,7 @@ function LoadMessageDialog({
     loadRecentMessagesRef.current = loadRecentMessages;
     loadChannelsRef.current = loadChannels;
   });
-  const hasRecent = !!loadRecentMessages;
+  const hasRecent = !!loadRecentMessages && !!loadChannels;
   React.useEffect(() => {
     if (!open) {
       return;
@@ -3063,7 +3087,10 @@ function LoadMessageDialog({
     setRecent(null);
     setRecentError(null);
     setSelectedRecent(null);
-    if (!loadRecentMessagesRef.current) {
+  }, [open]);
+  React.useEffect(() => {
+    const load = loadChannelsRef.current;
+    if (!open || !hasRecent || !load) {
       setChannels([]);
       setChannelsError(null);
       return;
@@ -3071,7 +3098,7 @@ function LoadMessageDialog({
     setChannels(null);
     setChannelsError(null);
     let cancelled = false;
-    loadChannelsRef.current().then((list) => {
+    load().then((list) => {
       if (!cancelled) {
         setChannels(list);
       }
@@ -3083,7 +3110,7 @@ function LoadMessageDialog({
     return () => {
       cancelled = true;
     };
-  }, [open]);
+  }, [open, hasRecent]);
   React.useEffect(() => {
     if (!open || !loadRecentMessagesRef.current || !channelId) {
       return;
@@ -3562,6 +3589,7 @@ function SendDialog({
   loadChannels,
   loadSendAsUserStatus,
   onSend,
+  renderSendExtras,
   confirmSendLabel = "Send",
   errorCount,
   onShowIssues
@@ -3571,6 +3599,10 @@ function SendDialog({
   const [channelId, setChannelId] = React.useState("");
   const [sendAs, setSendAs] = React.useState("bot");
   const [status, setStatus] = React.useState({ kind: "idle" });
+  const [extras, setExtrasState] = React.useState({});
+  const setExtras = React.useCallback((patch) => {
+    setExtrasState((prev) => ({ ...prev, ...patch }));
+  }, []);
   const { userStatus, polling, startSignIn } = useSlackSignIn(loadSendAsUserStatus, { open, enabled: true });
   const loadChannelsRef = React.useRef(loadChannels);
   React.useEffect(() => {
@@ -3585,6 +3617,7 @@ function SendDialog({
     setChannelsError(null);
     setChannelId("");
     setSendAs("bot");
+    setExtrasState({});
     let cancelled = false;
     loadChannelsRef.current().then((list) => {
       if (cancelled) {
@@ -3612,7 +3645,10 @@ function SendDialog({
       const result = await onSend({
         channelId,
         blocks: toSlackBlocks(blocks),
-        sendAsUser: sendAs === "user"
+        sendAsUser: sendAs === "user",
+        // Only introduce the key when the extras slot is wired, so existing
+        // consumers never see a new payload field.
+        ...renderSendExtras ? { extras } : {}
       });
       if (result.ok) {
         setStatus({ kind: "idle" });
@@ -3679,6 +3715,12 @@ function SendDialog({
           }
         )
       ] }),
+      renderSendExtras ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1.5", children: renderSendExtras({
+        channelId: channelId || null,
+        sendAsUser: sendAs === "user",
+        extras,
+        setExtras
+      }) }) : null,
       errorCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
@@ -9425,8 +9467,11 @@ function Toolbar2({
   showThemeControl = true,
   docsLink,
   errorCount,
+  showSend = true,
+  primaryAction,
   sendButtonLabel = "Review & send",
-  editingEnabled = false,
+  loadEnabled = false,
+  updateEnabled = false,
   editBadge,
   onOpenLoad,
   onOpenUpdate,
@@ -9446,7 +9491,7 @@ function Toolbar2({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-2 gap-y-1 border-b bg-background px-2 py-1.5 sm:px-3 sm:py-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 sm:gap-2", children: [
-        editingEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenLoad, "aria-label": loadButtonLabel, children: [
+        loadEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenLoad, "aria-label": loadButtonLabel, children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MailSearch, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: loadButtonLabel })
         ] }) : null,
@@ -9559,9 +9604,29 @@ function Toolbar2({
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: "View JSON" })
         ] }),
-        editBadge ? (
-          // A message is loaded: split button. Main action updates it in
-          // place; the menu also offers posting the blocks as a new message.
+        !showSend ? primaryAction ? (
+          // Compose-only mode with a host-owned primary action: same
+          // placement and styling as the built-in send button. No icon —
+          // the action's meaning is the host's, so the label always shows
+          // (the send button can collapse to its icon on small screens;
+          // an icon-less button can't).
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              onClick: primaryAction.onClick,
+              disabled: primaryAction.disabled,
+              "aria-label": primaryAction.label,
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: primaryAction.label })
+            }
+          )
+        ) : null : editBadge && updateEnabled ? (
+          // A message is loaded and update-in-place is wired: split button.
+          // Main action updates it in place; the menu also offers posting
+          // the blocks as a new message. Without `updateEnabled` (loading
+          // configured but no `editing.onUpdate`), the plain send button
+          // below stays — the loaded message can only be posted as new.
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-stretch", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               Button,
@@ -9634,7 +9699,7 @@ function Toolbar2({
         ] })
       ] })
     ] }),
-    editingEnabled && editBadge ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 border-b bg-muted px-2 py-2 text-foreground sm:px-3", children: [
+    loadEnabled && editBadge ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 border-b bg-muted px-2 py-2 text-foreground sm:px-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4 shrink-0 text-primary" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1 text-sm", children: [
         "References an existing message in ",
@@ -9797,17 +9862,34 @@ function UpdateDialog({
     ] })
   ] }) });
 }
+function toLoadedMessage({
+  ok: _ok,
+  blocks: _blocks,
+  ...loadedMessage
+}) {
+  return loadedMessage;
+}
+function loadedMessageKey(message) {
+  return message ? JSON.stringify(message) : null;
+}
+function validationSummaryKey(summary) {
+  return JSON.stringify([summary.valid, summary.errorCount, ...summary.errors]);
+}
 function BlockKitchen(props) {
   const {
     workspaceName,
     initialBlocks,
     onChange,
+    onValidationChange,
     previewHooks,
     customEmojis,
     loadChannels,
     loadSendAsUserStatus,
     onSend,
-    editing,
+    renderSendExtras,
+    loading,
+    onUpdate: onUpdateProp,
+    primaryAction,
     loadButtonLabel,
     updateButtonLabel,
     confirmUpdateLabel,
@@ -9824,6 +9906,13 @@ function BlockKitchen(props) {
     sendButtonLabel,
     confirmSendLabel,
     theme
+    // Widen the all-or-nothing union so the branch-specific props
+    // destructure as independent optionals: untyped JS consumers can still
+    // pass partial wiring (handled by the runtime guards below), and the
+    // correlated-union narrowing would otherwise flag those guards as
+    // "always true". `primaryAction` is pulled from the compose-only branch
+    // (where it carries a real type) rather than the send branch's
+    // `undefined` pin, which would collapse the intersection to `undefined`.
   } = props;
   const paletteSections = React.useMemo(() => {
     const sections = palette ?? defaultPalette;
@@ -9842,14 +9931,40 @@ function BlockKitchen(props) {
   }, [palette, disabledBlockTypes]);
   const variantById = React.useMemo(() => buildVariantById(paletteSections), [paletteSections]);
   const allowedSurfaces = allowedSurfacesProp && allowedSurfacesProp.length > 0 ? allowedSurfacesProp : ["message"];
-  const seededBlocks = editing?.initialTarget?.blocks ?? initialBlocks;
-  React.useEffect(() => {
-    if (editing?.initialTarget && initialBlocks) {
-      console.warn(
-        "[BlockKitchen] Both `initialBlocks` and `editing.initialTarget` were provided; using the target\u2019s blocks and ignoring `initialBlocks`."
-      );
-    }
-  }, []);
+  const sendEnabled = Boolean(loadChannels && loadSendAsUserStatus && onSend);
+  const loadEnabled = Boolean(loading);
+  const recentChannelSource = loading?.loadChannels ?? (sendEnabled ? loadChannels : void 0);
+  const onUpdate = sendEnabled ? onUpdateProp : void 0;
+  const seededBlocks = loading?.initialTarget?.blocks ?? initialBlocks;
+  const sendPropsProvided = [loadChannels, loadSendAsUserStatus, onSend].filter(Boolean).length;
+  useDevWarning(
+    Boolean(loading?.initialTarget && initialBlocks),
+    "[BlockKitchen] Both `initialBlocks` and an `initialTarget` were provided; using the target\u2019s blocks and ignoring `initialBlocks`."
+  );
+  useDevWarning(
+    sendPropsProvided > 0 && sendPropsProvided < 3,
+    "[BlockKitchen] Partial send wiring: `loadChannels`, `loadSendAsUserStatus`, and `onSend` are all-or-nothing. The send button is hidden until all three are provided."
+  );
+  useDevWarning(
+    Boolean(onUpdateProp && !sendEnabled),
+    "[BlockKitchen] `onUpdate` requires the send integration (`loadChannels`, `loadSendAsUserStatus`, `onSend`); ignoring `onUpdate`. To load an existing message without the send integration, use the `loading` prop instead."
+  );
+  useDevWarning(
+    Boolean(sendEnabled && onUpdateProp && !loading),
+    "[BlockKitchen] `onUpdate` needs a loaded message, but no load source is configured \u2014 provide the `loading` prop. The update flow is unreachable."
+  );
+  useDevWarning(
+    Boolean(loading?.loadRecentMessages && !recentChannelSource),
+    "[BlockKitchen] `loading.loadRecentMessages` needs a channel list to scope its lookup \u2014 provide `loading.loadChannels` (compose-only mode has no send integration to reuse). Hiding the recent-messages picker."
+  );
+  useDevWarning(
+    Boolean(renderSendExtras && !sendEnabled),
+    "[BlockKitchen] `renderSendExtras` extends the built-in send dialog, which requires the send integration (`loadChannels`, `loadSendAsUserStatus`, `onSend`); ignoring `renderSendExtras`."
+  );
+  useDevWarning(
+    Boolean(primaryAction && sendEnabled),
+    "[BlockKitchen] `primaryAction` is only available in compose-only mode \u2014 with the send integration wired, the built-in Send/Update flow owns the toolbar\u2019s primary action; ignoring `primaryAction`."
+  );
   const { blocks, addBlock, addChild, updateBlock, removeBlock, duplicateBlock, reorderBlock, moveBlock, replaceAll } = useBlockKitchenState({ initialBlocks: seededBlocks, onChange });
   const childParentById = React.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -9866,8 +9981,11 @@ function BlockKitchen(props) {
   const [sendOpen, setSendOpen] = React.useState(false);
   const [updateOpen, setUpdateOpen] = React.useState(false);
   const [loadOpen, setLoadOpen] = React.useState(false);
-  const [editTarget, setEditTarget] = React.useState(() => editing?.initialTarget ?? null);
-  const activeEditTarget = editing ? editTarget : null;
+  const [editTarget, setEditTarget] = React.useState(
+    () => loading?.initialTarget ? toLoadedMessage(loading.initialTarget) : null
+  );
+  const activeEditTarget = loadEnabled ? editTarget : null;
+  useNotifyOnChange(activeEditTarget, loadedMessageKey, loading?.onLoadedMessageChange);
   const [issuesOpen, setIssuesOpen] = React.useState(false);
   const [paletteOpen, setPaletteOpen] = React.useState(false);
   const [openBlockId, setOpenBlockId] = React.useState(null);
@@ -9885,6 +10003,11 @@ function BlockKitchen(props) {
     return { emoji: makeEmojiHook(byName), ...previewHooks };
   }, [customEmojis, previewHooks]);
   const validation = useBlockKitValidation(blocks, "message");
+  const validationSummary = React.useMemo(
+    () => ({ valid: validation.valid, errorCount: validation.total, errors: validation.errors }),
+    [validation]
+  );
+  useNotifyOnChange(validationSummary, validationSummaryKey, onValidationChange);
   const sensors = core.useSensors(
     core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
     core.useSensor(core.TouchSensor, { activationConstraint: { delay: 150, tolerance: 8 } }),
@@ -9988,8 +10111,19 @@ function BlockKitchen(props) {
               allowedSurfaces,
               showThemeControl: isPreviewThemeControlled ? false : showThemeControl,
               docsLink,
+              showSend: sendEnabled,
+              primaryAction: !sendEnabled && primaryAction ? {
+                label: primaryAction.label,
+                onClick: () => primaryAction.onClick({
+                  blocks: blockPayloads,
+                  validation: validationSummary,
+                  loadedMessage: activeEditTarget
+                }),
+                disabled: primaryAction.disableWhenInvalid ? !validationSummary.valid : false
+              } : null,
               sendButtonLabel,
-              editingEnabled: !!editing,
+              loadEnabled,
+              updateEnabled: Boolean(onUpdate),
               editBadge: activeEditTarget ? {
                 channelLabel: activeEditTarget.channelName ? `#${activeEditTarget.channelName}` : activeEditTarget.channelId,
                 ts: activeEditTarget.ts
@@ -9997,9 +10131,13 @@ function BlockKitchen(props) {
               onOpenLoad: () => setLoadOpen(true),
               onOpenUpdate: () => setUpdateOpen(true),
               onExitEdit: () => {
+                if (sendEnabled) {
+                  setEditTarget(null);
+                  replaceAll([]);
+                  setLoadOpen(true);
+                  return;
+                }
                 setEditTarget(null);
-                replaceAll([]);
-                setLoadOpen(true);
               },
               loadButtonLabel,
               updateButtonLabel
@@ -10071,7 +10209,7 @@ function BlockKitchen(props) {
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(JsonDrawer, { open: jsonOpen, onOpenChange: setJsonOpen, blocks: blockPayloads, onApply: replaceAll }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        loadChannels && loadSendAsUserStatus && onSend ? /* @__PURE__ */ jsxRuntime.jsx(
           SendDialog,
           {
             open: sendOpen,
@@ -10080,6 +10218,7 @@ function BlockKitchen(props) {
             loadChannels,
             loadSendAsUserStatus,
             onSend,
+            renderSendExtras,
             confirmSendLabel,
             errorCount: validation.total,
             onShowIssues: () => {
@@ -10087,8 +10226,8 @@ function BlockKitchen(props) {
               setIssuesOpen(true);
             }
           }
-        ),
-        activeEditTarget && editing ? /* @__PURE__ */ jsxRuntime.jsx(
+        ) : null,
+        activeEditTarget && onUpdate && loadSendAsUserStatus ? /* @__PURE__ */ jsxRuntime.jsx(
           UpdateDialog,
           {
             open: updateOpen,
@@ -10096,7 +10235,7 @@ function BlockKitchen(props) {
             target: activeEditTarget,
             blocks: blockPayloads,
             loadSendAsUserStatus,
-            onUpdate: editing.onUpdate,
+            onUpdate,
             confirmUpdateLabel,
             errorCount: validation.total,
             onShowIssues: () => {
@@ -10105,25 +10244,17 @@ function BlockKitchen(props) {
             }
           }
         ) : null,
-        editing ? /* @__PURE__ */ jsxRuntime.jsx(
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(
           LoadMessageDialog,
           {
             open: loadOpen,
             onOpenChange: setLoadOpen,
-            onLoadMessage: editing.onLoadMessage,
-            loadRecentMessages: editing.loadRecentMessages,
-            loadChannels,
+            onLoadMessage: loading.onLoadMessage,
+            loadRecentMessages: loading.loadRecentMessages,
+            loadChannels: recentChannelSource,
             onLoaded: (result) => {
               replaceAll(result.blocks);
-              setEditTarget({
-                channelId: result.channelId,
-                channelName: result.channelName,
-                ts: result.ts,
-                editableVia: result.editableVia,
-                workspaceName: result.workspaceName,
-                username: result.username,
-                iconUrl: result.iconUrl
-              });
+              setEditTarget(toLoadedMessage(result));
               setLoadOpen(false);
             },
             onOpenAsNew: (loadedBlocks) => {
@@ -10306,6 +10437,8 @@ function fromBase64Url(b64url) {
 }
 
 exports.BlockKitchen = BlockKitchen;
+exports.SendDialog = SendDialog;
+exports.SlackSignInButton = SlackSignInButton;
 exports.TemplatePicker = TemplatePicker;
 exports.decodeBlocksFromString = decodeBlocksFromString;
 exports.defaultPalette = defaultPalette;
@@ -10313,5 +10446,6 @@ exports.encodeBlocksToString = encodeBlocksToString;
 exports.extraAlertVariant = extraAlertVariant;
 exports.legacyInputVariants = legacyInputVariants;
 exports.toSlackBlocks = toSlackBlocks;
+exports.useSlackSignIn = useSlackSignIn;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map