@tightknitai/block-kitchen 0.10.7 → 0.10.8

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-QbOx7kAa.cjs';
-export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as PaletteMode, R as PaletteSection, U as PaletteVariant, V as PieChart, W as PieChartSegment, X as PlanBlock, Y as PreviewHooks, Z as PrimaryActionConfig, _ as PrimaryActionContext, $ as RecentMessage, a0 as SendResult, a1 as SupportedBlockType, a2 as SupportedHeaderBlock, a3 as TableBlock, a4 as TableCell, a5 as TableColumnSetting, a6 as TaskCardBlock, a7 as TaskCardStatus, a8 as UpdatePayload, a9 as UpdateResult, aa as UrlSourceElement, ab as ValidationSummary, ac as VideoBlock, ad as defaultPalette, ae as extraAlertVariant, af as legacyInputVariants } from './palette-QbOx7kAa.cjs';
+import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-CvSGn2z6.cjs';
+export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as PaletteMode, R as PaletteSection, U as PaletteVariant, V as PieChart, W as PieChartSegment, X as PlanBlock, Y as PreviewHooks, Z as PrimaryActionConfig, _ as PrimaryActionContext, $ as RecentMessage, a0 as SendResult, a1 as SupportedBlockType, a2 as SupportedHeaderBlock, a3 as TableBlock, a4 as TableCell, a5 as TableColumnSetting, a6 as TaskCardBlock, a7 as TaskCardStatus, a8 as UpdatePayload, a9 as UpdateResult, aa as UrlSourceElement, ab as ValidationSummary, ac as VideoBlock, ad as defaultPalette, ae as extraAlertVariant, af as legacyInputVariants } from './palette-CvSGn2z6.cjs';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.cjs';
 import 'slack-web-api-client';
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-QbOx7kAa.js';
-export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as PaletteMode, R as PaletteSection, U as PaletteVariant, V as PieChart, W as PieChartSegment, X as PlanBlock, Y as PreviewHooks, Z as PrimaryActionConfig, _ as PrimaryActionContext, $ as RecentMessage, a0 as SendResult, a1 as SupportedBlockType, a2 as SupportedHeaderBlock, a3 as TableBlock, a4 as TableCell, a5 as TableColumnSetting, a6 as TaskCardBlock, a7 as TaskCardStatus, a8 as UpdatePayload, a9 as UpdateResult, aa as UrlSourceElement, ab as ValidationSummary, ac as VideoBlock, ad as defaultPalette, ae as extraAlertVariant, af as legacyInputVariants } from './palette-QbOx7kAa.js';
+import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-CvSGn2z6.js';
+export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as PaletteMode, R as PaletteSection, U as PaletteVariant, V as PieChart, W as PieChartSegment, X as PlanBlock, Y as PreviewHooks, Z as PrimaryActionConfig, _ as PrimaryActionContext, $ as RecentMessage, a0 as SendResult, a1 as SupportedBlockType, a2 as SupportedHeaderBlock, a3 as TableBlock, a4 as TableCell, a5 as TableColumnSetting, a6 as TaskCardBlock, a7 as TaskCardStatus, a8 as UpdatePayload, a9 as UpdateResult, aa as UrlSourceElement, ab as ValidationSummary, ac as VideoBlock, ad as defaultPalette, ae as extraAlertVariant, af as legacyInputVariants } from './palette-CvSGn2z6.js';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
 import 'slack-web-api-client';
 

package/dist/index.js

@@ -1,12 +1,12 @@
 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, Loader2, ExternalLink, AlertTriangle, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, Undo2, Redo2, Trash2, Code2, Pencil, Send, Search, Check, Copy, Info, CheckCircle2, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, 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, ChevronRight, ChevronLeft, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, Undo2, Redo2, Trash2, Code2, Pencil, Send, Search, Check, Copy, Info, CheckCircle2, LayoutGrid, ArrowUp, ArrowDown, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Smile, Link as Link$1 } from 'lucide-react';
 import * as React 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';
 import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { validateBlockKit, CARD_ACTIONS_MAX } from '@tightknitai/slack-block-kit-validator';
 import { nanoid } from 'nanoid';
@@ -23,6 +23,9 @@ import { Node, ReactNodeViewRenderer, mergeAttributes, NodeViewWrapper, useEdito
 import StarterKit from '@tiptap/starter-kit';
 
 // src/components/block-kitchen.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
 
 // src/lib/container-blocks.ts
 var CONTAINER_CHILD_TYPES = /* @__PURE__ */ new Set([
@@ -704,6 +707,7 @@ var defaultPalette = [
       {
         id: "structure_header",
         label: "Header",
+        basic: true,
         factory: () => ({
           type: "header",
           text: { type: "plain_text", text: "Heading text", emoji: true }
@@ -712,6 +716,7 @@ var defaultPalette = [
       {
         id: "structure_divider",
         label: "Divider",
+        basic: true,
         factory: () => ({ type: "divider" })
       },
       {
@@ -819,8 +824,9 @@ var defaultPalette = [
       {
         id: "rich_text_section",
         label: "Rich Text Section",
-        // The one variant simple mode offers, where it's listed without its
-        // section heading — hence the self-describing label.
+        // The block a message is mostly made of, and so one of the handful
+        // simple mode offers — listed there without its section heading,
+        // hence the self-describing label.
         basic: true,
         factory: () => ({
           type: "rich_text",
@@ -857,6 +863,11 @@ var defaultPalette = [
       {
         id: "image_no_title",
         label: "No title",
+        // The plain image is the one an ordinary message reaches for, so it
+        // carries simple mode's image slot — under its own name there, with
+        // no "Image" heading overhead to lend "No title" its meaning.
+        basic: true,
+        basicLabel: "Image",
         factory: () => ({
           type: "image",
           image_url: "https://placehold.co/600x300?text=Image",
@@ -1679,9 +1690,6 @@ function labelForBlockType(type) {
       return "Container";
   }
 }
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var Sheet = DialogPrimitive.Root;
 var SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
@@ -3782,14 +3790,14 @@ function isDefaultOpen(sectionName, config) {
   return config.includes(sectionName);
 }
 var PALETTE_TITLE = "Message Elements";
-var ADVANCED_HELP = "Browse every Slack block type \u2014 sections, images, buttons, inputs, tables and more \u2014 plus a search box.";
-var BASIC_HELP = "Go back to the short list: just the rich text block for writing a message.";
+var ADVANCED_HELP = "Browse every Slack block type \u2014 sections, images, buttons, inputs, tables and more.";
+var BASIC_HELP = "Go back to the short list: the few blocks an ordinary message is made of.";
 function basicVariants(sections) {
   const out = [];
   for (const section of sections) {
     for (const variant of section.variants) {
       if (variant.basic) {
-        out.push(variant);
+        out.push(variant.basicLabel ? { ...variant, label: variant.basicLabel } : variant);
       }
     }
   }
@@ -3818,10 +3826,12 @@ function Palette({
   showSearch = true,
   searchPlaceholder = "Search blocks\u2026",
   mode = "advanced",
+  defaultAdvanced = false,
+  onAdvancedChange,
   variant = "aside"
 }) {
   const [query, setQuery] = useState("");
-  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(defaultAdvanced);
   const [prevMode, setPrevMode] = useState(mode);
   if (prevMode !== mode) {
     setPrevMode(mode);
@@ -3843,7 +3853,7 @@ function Palette({
     {
       className: cn(
         "flex min-h-0 flex-col overflow-x-hidden overflow-y-auto",
-        isSheet ? "w-full flex-1 bg-background" : "w-72 shrink-0 border-r bg-muted/20"
+        isSheet ? "w-full flex-1 bg-background" : "w-56 shrink-0 border-r bg-muted/20"
       ),
       children: [
         offersSimple || searchVisible ? (
@@ -3876,7 +3886,9 @@ function Palette({
                     isSheet,
                     onToggle: () => {
                       setQuery("");
-                      setAdvancedOpen((v) => !v);
+                      const next = !advancedOpen;
+                      setAdvancedOpen(next);
+                      onAdvancedChange?.(next);
                     }
                   }
                 )
@@ -4004,8 +4016,8 @@ function PaletteItem({
           isDragging && "opacity-50"
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: variant.label })
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: variant.label }),
+          /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
         ]
       }
     );
@@ -4015,7 +4027,7 @@ function PaletteItem({
     {
       ref: setNodeRef,
       className: cn(
-        "group flex items-center gap-2 rounded px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground has-[:focus-visible]:bg-accent has-[:focus-visible]:text-foreground",
+        "group flex items-center gap-2 rounded px-2 py-1 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground has-[:focus-visible]:bg-accent has-[:focus-visible]:text-foreground",
         isDragging && "opacity-50"
       ),
       children: [
@@ -4023,7 +4035,7 @@ function PaletteItem({
           "div",
           {
             ref: setActivatorNodeRef,
-            className: "-my-1.5 flex min-w-0 flex-1 cursor-grab items-center gap-2 rounded py-1.5 active:cursor-grabbing focus-visible:outline-none",
+            className: "-my-1 flex min-w-0 flex-1 cursor-grab items-center gap-2 rounded py-1 active:cursor-grabbing focus-visible:outline-none",
             ...attributes,
             ...listeners,
             children: [
@@ -10000,7 +10012,7 @@ function Toolbar2({
             variant: "ghost",
             size: "sm",
             onClick: onOpenPalette,
-            className: "md:hidden",
+            className: "gap-1 md:hidden",
             "aria-label": "Add a block",
             children: [
               /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
@@ -10556,12 +10568,20 @@ function BlockKitchen(props) {
   useNotifyOnChange(activeEditTarget, loadedMessageKey, loading?.onLoadedMessageChange);
   const [issuesOpen, setIssuesOpen] = useState(false);
   const [paletteOpen, setPaletteOpen] = useState(false);
+  const [paletteCollapsed, setPaletteCollapsed] = useState(false);
+  const [paletteAdvanced, setPaletteAdvanced] = useState(false);
+  const [prevPaletteMode, setPrevPaletteMode] = useState(paletteMode);
+  if (prevPaletteMode !== paletteMode) {
+    setPrevPaletteMode(paletteMode);
+    setPaletteAdvanced(false);
+  }
   const [openBlockId, setOpenBlockId] = useState(null);
   const [uncontrolledPreviewTheme, setUncontrolledPreviewTheme] = useState(defaultPreviewTheme);
   const isPreviewThemeControlled = controlledPreviewTheme !== void 0;
   const previewTheme = controlledPreviewTheme ?? uncontrolledPreviewTheme;
   const [previewSurface, setPreviewSurface] = useState(allowedSurfaces[0]);
   const [activePaletteVariantId, setActivePaletteVariantId] = useState(null);
+  const paletteSheetRef = useRef(null);
   const isMobile = useIsMobile();
   const mergedPreviewHooks = useMemo(() => {
     if (!customEmojis || customEmojis.length === 0) {
@@ -10745,17 +10765,48 @@ function BlockKitchen(props) {
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
-                /* @__PURE__ */ jsx("div", { className: "hidden min-h-0 md:flex", children: /* @__PURE__ */ jsx(
-                  Palette,
-                  {
-                    onAddBlock: (block) => addBlock(block),
-                    sections: paletteSections,
-                    mode: paletteMode,
-                    showSearch: showPaletteSearch,
-                    searchPlaceholder: paletteSearchPlaceholder,
-                    defaultOpenSections
-                  }
-                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "relative hidden min-h-0 shrink-0 md:flex", children: [
+                  /* @__PURE__ */ jsx("div", { hidden: paletteCollapsed, className: cn("min-h-0", !paletteCollapsed && "flex"), children: /* @__PURE__ */ jsx(
+                    Palette,
+                    {
+                      onAddBlock: (block) => addBlock(block),
+                      sections: paletteSections,
+                      mode: paletteMode,
+                      showSearch: showPaletteSearch,
+                      searchPlaceholder: paletteSearchPlaceholder,
+                      defaultOpenSections,
+                      defaultAdvanced: paletteAdvanced,
+                      onAdvancedChange: setPaletteAdvanced
+                    }
+                  ) }),
+                  paletteCollapsed ? (
+                    // In a host that hands the builder no height of its own,
+                    // the rail is what the shell takes its height from (see
+                    // the shell's `max-h` note above) — so hiding it would
+                    // shrink the whole frame to the height of the message and
+                    // grow it back on the way out. This stands in for the rail
+                    // at no width. Inert to everything but layout.
+                    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "w-0 shrink-0 md:h-[var(--bk-max-height,100svh)]" })
+                  ) : null,
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setPaletteCollapsed((v) => !v),
+                      "aria-expanded": !paletteCollapsed,
+                      "aria-label": paletteCollapsed ? "Show block palette" : "Hide block palette",
+                      title: paletteCollapsed ? "Show block palette" : "Hide block palette",
+                      className: cn(
+                        // A hairline outline in the rail's own border color, so
+                        // the handle reads as part of the edge it rides rather
+                        // than a chevron floating loose over the border line.
+                        "absolute top-1/2 z-10 flex h-10 w-4 -translate-y-1/2 cursor-pointer appearance-none items-center justify-center rounded-sm border bg-background p-0 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                        paletteCollapsed ? "left-0" : "right-0 translate-x-1/2"
+                      ),
+                      children: paletteCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4", strokeWidth: 1.5 }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4", strokeWidth: 1.5 })
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsx(
                   Surface,
                   {
@@ -10788,8 +10839,13 @@ function BlockKitchen(props) {
         /* @__PURE__ */ jsx(Sheet, { open: paletteOpen && isMobile, onOpenChange: setPaletteOpen, children: /* @__PURE__ */ jsxs(
           SheetContent,
           {
+            ref: paletteSheetRef,
             side: "bottom",
             className: "bk-portal-content flex h-[85svh] max-h-[85svh] flex-col gap-3 p-0 sm:max-w-none",
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+              paletteSheetRef.current?.focus();
+            },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-4 pt-5", children: [
                 /* @__PURE__ */ jsx(SheetTitle, { children: "Add a block" }),
@@ -10807,6 +10863,8 @@ function BlockKitchen(props) {
                   showSearch: showPaletteSearch,
                   searchPlaceholder: paletteSearchPlaceholder,
                   defaultOpenSections,
+                  defaultAdvanced: paletteAdvanced,
+                  onAdvancedChange: setPaletteAdvanced,
                   variant: "sheet"
                 }
               ) })