@tightknitai/block-kitchen 0.9.8 → 0.9.10

package/dist/index.js

@@ -1,8 +1,8 @@
 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, Container, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, MailSearch, Plus, ChevronDown, BookOpen, ExternalLink, AlertTriangle, Trash2, Code2, Pencil, Send, Search, Check, Copy, Info, CheckCircle2, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Loader2, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Undo2, Redo2, Smile, Link as Link$1 } from 'lucide-react';
+import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, Loader2, ExternalLink, AlertTriangle, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, MailSearch, Plus, ChevronDown, BookOpen, Trash2, Code2, Pencil, Send, Search, Check, Copy, Info, CheckCircle2, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Undo2, Redo2, Smile, Link as Link$1 } from 'lucide-react';
 import * as React from 'react';
-import { createContext, useMemo, useEffect, useState, useCallback, useRef, useId, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useMemo, useId, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { clsx } from 'clsx';
@@ -2015,6 +2015,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
@@ -2610,6 +2611,38 @@ function unwrapBlocksInput(parsed) {
   }
   return null;
 }
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+  }
+);
+Button.displayName = "Button";
 var MAX_JSON_BYTES = 1024 * 1024;
 function JsonDrawer({
   open,
@@ -2621,19 +2654,23 @@ function JsonDrawer({
   const [parseError, setParseError] = useState(null);
   const [validationErrors, setValidationErrors] = useState([]);
   const [copied, setCopied] = useState(false);
+  const [accepted, setAccepted] = useState(false);
   const textareaRef = useRef(null);
   const gutterRef = useRef(null);
   const copyResetRef = useRef(null);
+  const acceptResetRef = useRef(null);
   const blocksRef = useRef(blocks);
   useEffect(() => {
     blocksRef.current = blocks;
   });
   useEffect(() => {
     if (open) {
-      setValue(JSON.stringify(blocksRef.current, null, 2));
+      const current = blocksRef.current;
+      setValue(current.length === 0 ? "" : JSON.stringify(current, null, 2));
       setParseError(null);
       setValidationErrors([]);
       setCopied(false);
+      setAccepted(false);
     }
   }, [open]);
   useEffect(
@@ -2641,6 +2678,9 @@ function JsonDrawer({
       if (copyResetRef.current) {
         clearTimeout(copyResetRef.current);
       }
+      if (acceptResetRef.current) {
+        clearTimeout(acceptResetRef.current);
+      }
     },
     []
   );
@@ -2661,6 +2701,17 @@ function JsonDrawer({
       setValidationErrors([]);
       return;
     }
+    if (next.trim() === "") {
+      setParseError(null);
+      setValidationErrors([]);
+      onApply([]);
+      setAccepted(true);
+      if (acceptResetRef.current) {
+        clearTimeout(acceptResetRef.current);
+      }
+      acceptResetRef.current = setTimeout(() => setAccepted(false), 1800);
+      return;
+    }
     let parsed;
     try {
       parsed = JSON.parse(next);
@@ -2677,6 +2728,11 @@ function JsonDrawer({
     }
     setParseError(null);
     onApply(blocks2);
+    setAccepted(true);
+    if (acceptResetRef.current) {
+      clearTimeout(acceptResetRef.current);
+    }
+    acceptResetRef.current = setTimeout(() => setAccepted(false), 1800);
     const result = validateBlockKit(blocks2, {
       target: "blocks",
       surface: "message"
@@ -2701,16 +2757,30 @@ function JsonDrawer({
       /* @__PURE__ */ jsx(SheetDescription, { children: "Edits update the preview as you type. Parse errors show below." })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 overflow-hidden rounded-md border border-input bg-muted/30 shadow-sm focus-within:ring-1 focus-within:ring-ring", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleCopy,
-          "aria-label": copied ? "Copied to clipboard" : "Copy JSON",
-          className: "absolute right-2 top-2 z-10 inline-flex items-center justify-center rounded-md border border-input bg-background/80 p-1.5 text-muted-foreground shadow-sm backdrop-blur transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-emerald-600" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
-        }
-      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 z-10 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "status",
+            "aria-hidden": !accepted,
+            className: `pointer-events-none flex items-center justify-center rounded-md bg-background/80 p-1.5 shadow-sm backdrop-blur transition-opacity duration-300 ${accepted ? "opacity-100" : "opacity-0"}`,
+            children: [
+              /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-emerald-600" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Input accepted" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleCopy,
+            "aria-label": copied ? "Copied to clipboard" : "Copy JSON",
+            className: "inline-flex items-center justify-center rounded-md border border-input bg-background/80 p-1.5 text-muted-foreground shadow-sm backdrop-blur transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-emerald-600" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -2747,41 +2817,10 @@ function JsonDrawer({
           " more"
         ] })
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 justify-end", children: /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => onOpenChange(false), children: "Done" }) })
   ] }) });
 }
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
-  }
-);
-Button.displayName = "Button";
 var Dialog = DialogPrimitive.Root;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -3494,6 +3533,7 @@ function SendDialog({
   loadChannels,
   loadSendAsUserStatus,
   onSend,
+  renderSendExtras,
   confirmSendLabel = "Send",
   errorCount,
   onShowIssues
@@ -3503,6 +3543,10 @@ function SendDialog({
   const [channelId, setChannelId] = useState("");
   const [sendAs, setSendAs] = useState("bot");
   const [status, setStatus] = useState({ kind: "idle" });
+  const [extras, setExtrasState] = useState({});
+  const setExtras = useCallback((patch) => {
+    setExtrasState((prev) => ({ ...prev, ...patch }));
+  }, []);
   const { userStatus, polling, startSignIn } = useSlackSignIn(loadSendAsUserStatus, { open, enabled: true });
   const loadChannelsRef = useRef(loadChannels);
   useEffect(() => {
@@ -3517,6 +3561,7 @@ function SendDialog({
     setChannelsError(null);
     setChannelId("");
     setSendAs("bot");
+    setExtrasState({});
     let cancelled = false;
     loadChannelsRef.current().then((list) => {
       if (cancelled) {
@@ -3544,7 +3589,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" });
@@ -3611,6 +3659,12 @@ function SendDialog({
           }
         )
       ] }),
+      renderSendExtras ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: renderSendExtras({
+        channelId: channelId || null,
+        sendAsUser: sendAs === "user",
+        extras,
+        setExtras
+      }) }) : null,
       errorCount > 0 ? /* @__PURE__ */ jsxs(
         "button",
         {
@@ -9357,6 +9411,8 @@ function Toolbar2({
   showThemeControl = true,
   docsLink,
   errorCount,
+  showSend = true,
+  primaryAction,
   sendButtonLabel = "Review & send",
   editingEnabled = false,
   editBadge,
@@ -9491,7 +9547,24 @@ function Toolbar2({
           /* @__PURE__ */ jsx(Code2, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: "View JSON" })
         ] }),
-        editBadge ? (
+        !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__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              onClick: primaryAction.onClick,
+              disabled: primaryAction.disabled,
+              "aria-label": primaryAction.label,
+              children: /* @__PURE__ */ jsx("span", { children: primaryAction.label })
+            }
+          )
+        ) : null : editBadge ? (
           // A message is loaded: split button. Main action updates it in
           // place; the menu also offers posting the blocks as a new message.
           /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
@@ -9734,12 +9807,15 @@ function BlockKitchen(props) {
     workspaceName,
     initialBlocks,
     onChange,
+    onValidationChange,
     previewHooks,
     customEmojis,
     loadChannels,
     loadSendAsUserStatus,
     onSend,
+    renderSendExtras,
     editing,
+    primaryAction,
     loadButtonLabel,
     updateButtonLabel,
     confirmUpdateLabel,
@@ -9756,6 +9832,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 = useMemo(() => {
     const sections = palette ?? defaultPalette;
@@ -9774,13 +9857,36 @@ function BlockKitchen(props) {
   }, [palette, disabledBlockTypes]);
   const variantById = useMemo(() => buildVariantById(paletteSections), [paletteSections]);
   const allowedSurfaces = allowedSurfacesProp && allowedSurfacesProp.length > 0 ? allowedSurfacesProp : ["message"];
-  const seededBlocks = editing?.initialTarget?.blocks ?? initialBlocks;
+  const sendEnabled = Boolean(loadChannels && loadSendAsUserStatus && onSend);
+  const editingConfig = sendEnabled ? editing : void 0;
+  const seededBlocks = editingConfig?.initialTarget?.blocks ?? initialBlocks;
   useEffect(() => {
-    if (editing?.initialTarget && initialBlocks) {
+    if (editingConfig?.initialTarget && initialBlocks) {
       console.warn(
         "[BlockKitchen] Both `initialBlocks` and `editing.initialTarget` were provided; using the target\u2019s blocks and ignoring `initialBlocks`."
       );
     }
+    const sendPropsProvided = [loadChannels, loadSendAsUserStatus, onSend].filter(Boolean).length;
+    if (sendPropsProvided > 0 && sendPropsProvided < 3) {
+      console.warn(
+        "[BlockKitchen] Partial send wiring: `loadChannels`, `loadSendAsUserStatus`, and `onSend` are all-or-nothing. The send button is hidden until all three are provided."
+      );
+    }
+    if (editing && !sendEnabled) {
+      console.warn(
+        "[BlockKitchen] `editing` requires the send integration (`loadChannels`, `loadSendAsUserStatus`, `onSend`); ignoring `editing`."
+      );
+    }
+    if (renderSendExtras && !sendEnabled) {
+      console.warn(
+        "[BlockKitchen] `renderSendExtras` extends the built-in send dialog, which requires the send integration (`loadChannels`, `loadSendAsUserStatus`, `onSend`); ignoring `renderSendExtras`."
+      );
+    }
+    if (primaryAction && sendEnabled) {
+      console.warn(
+        "[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 = useMemo(() => {
@@ -9798,8 +9904,8 @@ function BlockKitchen(props) {
   const [sendOpen, setSendOpen] = useState(false);
   const [updateOpen, setUpdateOpen] = useState(false);
   const [loadOpen, setLoadOpen] = useState(false);
-  const [editTarget, setEditTarget] = useState(() => editing?.initialTarget ?? null);
-  const activeEditTarget = editing ? editTarget : null;
+  const [editTarget, setEditTarget] = useState(() => editingConfig?.initialTarget ?? null);
+  const activeEditTarget = editingConfig ? editTarget : null;
   const [issuesOpen, setIssuesOpen] = useState(false);
   const [paletteOpen, setPaletteOpen] = useState(false);
   const [openBlockId, setOpenBlockId] = useState(null);
@@ -9817,6 +9923,22 @@ function BlockKitchen(props) {
     return { emoji: makeEmojiHook(byName), ...previewHooks };
   }, [customEmojis, previewHooks]);
   const validation = useBlockKitValidation(blocks, "message");
+  const validationSummary = useMemo(
+    () => ({ valid: validation.valid, errorCount: validation.total, errors: validation.errors }),
+    [validation]
+  );
+  const lastNotifiedValidationRef = useRef(null);
+  useEffect(() => {
+    if (!onValidationChange) {
+      return;
+    }
+    const key = JSON.stringify([validationSummary.valid, validationSummary.errorCount, ...validationSummary.errors]);
+    if (lastNotifiedValidationRef.current === key) {
+      return;
+    }
+    lastNotifiedValidationRef.current = key;
+    onValidationChange(validationSummary);
+  }, [validationSummary, onValidationChange]);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(TouchSensor, { activationConstraint: { delay: 150, tolerance: 8 } }),
@@ -9920,8 +10042,14 @@ function BlockKitchen(props) {
               allowedSurfaces,
               showThemeControl: isPreviewThemeControlled ? false : showThemeControl,
               docsLink,
+              showSend: sendEnabled,
+              primaryAction: !sendEnabled && primaryAction ? {
+                label: primaryAction.label,
+                onClick: () => primaryAction.onClick({ blocks: blockPayloads, validation: validationSummary }),
+                disabled: primaryAction.disableWhenInvalid ? !validationSummary.valid : false
+              } : null,
               sendButtonLabel,
-              editingEnabled: !!editing,
+              editingEnabled: !!editingConfig,
               editBadge: activeEditTarget ? {
                 channelLabel: activeEditTarget.channelName ? `#${activeEditTarget.channelName}` : activeEditTarget.channelId,
                 ts: activeEditTarget.ts
@@ -10003,7 +10131,7 @@ function BlockKitchen(props) {
           }
         ) }),
         /* @__PURE__ */ jsx(JsonDrawer, { open: jsonOpen, onOpenChange: setJsonOpen, blocks: blockPayloads, onApply: replaceAll }),
-        /* @__PURE__ */ jsx(
+        loadChannels && loadSendAsUserStatus && onSend ? /* @__PURE__ */ jsx(
           SendDialog,
           {
             open: sendOpen,
@@ -10012,6 +10140,7 @@ function BlockKitchen(props) {
             loadChannels,
             loadSendAsUserStatus,
             onSend,
+            renderSendExtras,
             confirmSendLabel,
             errorCount: validation.total,
             onShowIssues: () => {
@@ -10019,8 +10148,8 @@ function BlockKitchen(props) {
               setIssuesOpen(true);
             }
           }
-        ),
-        activeEditTarget && editing ? /* @__PURE__ */ jsx(
+        ) : null,
+        activeEditTarget && editingConfig && loadSendAsUserStatus ? /* @__PURE__ */ jsx(
           UpdateDialog,
           {
             open: updateOpen,
@@ -10028,7 +10157,7 @@ function BlockKitchen(props) {
             target: activeEditTarget,
             blocks: blockPayloads,
             loadSendAsUserStatus,
-            onUpdate: editing.onUpdate,
+            onUpdate: editingConfig.onUpdate,
             confirmUpdateLabel,
             errorCount: validation.total,
             onShowIssues: () => {
@@ -10037,13 +10166,13 @@ function BlockKitchen(props) {
             }
           }
         ) : null,
-        editing ? /* @__PURE__ */ jsx(
+        editingConfig && loadChannels ? /* @__PURE__ */ jsx(
           LoadMessageDialog,
           {
             open: loadOpen,
             onOpenChange: setLoadOpen,
-            onLoadMessage: editing.onLoadMessage,
-            loadRecentMessages: editing.loadRecentMessages,
+            onLoadMessage: editingConfig.onLoadMessage,
+            loadRecentMessages: editingConfig.loadRecentMessages,
             loadChannels,
             onLoaded: (result) => {
               replaceAll(result.blocks);
@@ -10237,6 +10366,6 @@ function fromBase64Url(b64url) {
   return b64 + "=".repeat(padLen);
 }
 
-export { BlockKitchen, TemplatePicker, decodeBlocksFromString, defaultPalette, encodeBlocksToString, extraAlertVariant, legacyInputVariants, toSlackBlocks };
+export { BlockKitchen, SendDialog, SlackSignInButton, TemplatePicker, decodeBlocksFromString, defaultPalette, encodeBlocksToString, extraAlertVariant, legacyInputVariants, toSlackBlocks, useSlackSignIn };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map