@tightknitai/block-kitchen 0.10.5 → 0.10.7

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-Sz27861i.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 PaletteSection, R as PaletteVariant, U as PieChart, V as PieChartSegment, W as PlanBlock, X as PreviewHooks, Y as PrimaryActionConfig, Z as PrimaryActionContext, _ as RecentMessage, $ as SendResult, a0 as SupportedBlockType, a1 as SupportedHeaderBlock, a2 as TableBlock, a3 as TableCell, a4 as TableColumnSetting, a5 as TaskCardBlock, a6 as TaskCardStatus, a7 as UpdatePayload, a8 as UpdateResult, a9 as UrlSourceElement, aa as ValidationSummary, ab as VideoBlock, ac as defaultPalette, ad as extraAlertVariant, ae as legacyInputVariants } from './palette-Sz27861i.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-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';
 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-Sz27861i.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 PaletteSection, R as PaletteVariant, U as PieChart, V as PieChartSegment, W as PlanBlock, X as PreviewHooks, Y as PrimaryActionConfig, Z as PrimaryActionContext, _ as RecentMessage, $ as SendResult, a0 as SupportedBlockType, a1 as SupportedHeaderBlock, a2 as TableBlock, a3 as TableCell, a4 as TableColumnSetting, a5 as TaskCardBlock, a6 as TaskCardStatus, a7 as UpdatePayload, a8 as UpdateResult, a9 as UrlSourceElement, aa as ValidationSummary, ab as VideoBlock, ac as defaultPalette, ad as extraAlertVariant, ae as legacyInputVariants } from './palette-Sz27861i.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-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';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
 import 'slack-web-api-client';
 

package/dist/index.js

@@ -1,6 +1,6 @@
 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, MailSearch, 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, 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 * as React from 'react';
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useId, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -818,7 +818,10 @@ var defaultPalette = [
     variants: [
       {
         id: "rich_text_section",
-        label: "Section",
+        label: "Rich Text Section",
+        // The one variant simple mode offers, where it's listed without its
+        // section heading — hence the self-describing label.
+        basic: true,
         factory: () => ({
           type: "rich_text",
           elements: [
@@ -3470,7 +3473,8 @@ function LoadMessageDialog({
     }, POLL_INTERVAL_MS2);
   };
   const preview = activeTab === "recent" ? selectedRecent ? { kind: "ready", target: { ...selectedRecent, editableVia: selectedRecent.editableVia ?? "bot" } } : { kind: "empty" } : linkStatus.kind === "idle" ? { kind: "empty" } : linkStatus.kind === "ready" ? { kind: "ready", target: linkStatus.result } : linkStatus;
-  const canLoad = activeTab === "recent" ? !!selectedRecent : !!link.trim();
+  const verdictOwnsAction = linkStatus.kind === "not-editable" && (isSafeHref(linkStatus.oauthUrl) || (linkStatus.blocks?.length ?? 0) > 0);
+  const canLoad = activeTab === "recent" ? !!selectedRecent : !!link.trim() && !verdictOwnsAction;
   const panelProps = (id) => hasRecent ? { role: "tabpanel", id: panelDomId(id), "aria-labelledby": tabDomId(id) } : {};
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
     DialogContent,
@@ -3715,6 +3719,24 @@ function PreviewPane({
         editableLabel(target.editableVia)
       ] }) : null
     ] }),
+    state.kind === "not-editable" && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-2 rounded-md border border-amber-200! bg-amber-50 p-3 text-xs text-amber-800", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: state.reason })
+      ] }),
+      signInUrl && /* @__PURE__ */ jsx(SlackSignInButton, { onClick: () => onSignIn(signInUrl), polling: signInPolling }),
+      verdictBlocks && verdictBlocks.length > 0 && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "self-start",
+          onClick: () => onOpenAsNew(verdictBlocks),
+          children: "Open as a new message instead"
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3723,30 +3745,13 @@ function PreviewPane({
         tabIndex: 0,
         className: "flex flex-1 flex-col gap-3 overflow-y-auto rounded-md border bg-muted/40 p-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring max-lg:max-h-72 max-lg:min-h-32 lg:min-h-0",
         children: [
-          state.kind === "not-editable" && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-2 rounded-md border border-amber-200! bg-amber-50 p-3 text-xs text-amber-800", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "flex-1", children: state.reason })
-            ] }),
-            signInUrl && /* @__PURE__ */ jsx(SlackSignInButton, { onClick: () => onSignIn(signInUrl), polling: signInPolling }),
-            verdictBlocks && verdictBlocks.length > 0 && /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                variant: "outline",
-                size: "sm",
-                className: "self-start",
-                onClick: () => onOpenAsNew(verdictBlocks),
-                children: "Open as a new message instead"
-              }
-            )
-          ] }),
           state.kind === "error" && /* @__PURE__ */ jsx("p", { className: "shrink-0 rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: state.error }),
           state.kind === "loading" && /* @__PURE__ */ jsxs("p", { className: "m-auto flex items-center gap-2 text-sm text-muted-foreground", children: [
             /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
             "Looking up that message\u2026"
           ] }),
           state.kind === "empty" && /* @__PURE__ */ jsx("p", { className: "m-auto px-4 text-center text-sm text-muted-foreground", children: emptyHint }),
+          state.kind === "not-editable" && !(verdictBlocks && verdictBlocks.length > 0) && /* @__PURE__ */ jsx("p", { className: "m-auto px-4 text-center text-sm text-muted-foreground", children: "Nothing to preview." }),
           target && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
             SlackMessagePreview,
             {
@@ -3776,6 +3781,20 @@ function isDefaultOpen(sectionName, config) {
   if (typeof config === "boolean") return 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.";
+function basicVariants(sections) {
+  const out = [];
+  for (const section of sections) {
+    for (const variant of section.variants) {
+      if (variant.basic) {
+        out.push(variant);
+      }
+    }
+  }
+  return out;
+}
 function filterSections(sections, query) {
   const q = query.trim().toLowerCase();
   if (q.length === 0) return sections;
@@ -3798,14 +3817,26 @@ function Palette({
   defaultOpenSections = true,
   showSearch = true,
   searchPlaceholder = "Search blocks\u2026",
+  mode = "advanced",
   variant = "aside"
 }) {
   const [query, setQuery] = useState("");
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [prevMode, setPrevMode] = useState(mode);
+  if (prevMode !== mode) {
+    setPrevMode(mode);
+    setAdvancedOpen(false);
+    setQuery("");
+  }
+  const basics = useMemo(() => mode === "simple" ? basicVariants(sections) : [], [mode, sections]);
+  const offersSimple = mode === "simple" && basics.length > 0;
+  const advanced = !offersSimple || advancedOpen;
+  const searchVisible = showSearch && advanced;
   const visibleSections = useMemo(
-    () => showSearch ? filterSections(sections, query) : sections,
-    [sections, query, showSearch]
+    () => searchVisible ? filterSections(sections, query) : sections,
+    [sections, query, searchVisible]
   );
-  const queryActive = showSearch && query.trim().length > 0;
+  const queryActive = searchVisible && query.trim().length > 0;
   const isSheet = variant === "sheet";
   return /* @__PURE__ */ jsxs(
     "aside",
@@ -3815,14 +3846,43 @@ function Palette({
         isSheet ? "w-full flex-1 bg-background" : "w-72 shrink-0 border-r bg-muted/20"
       ),
       children: [
-        showSearch ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "sticky top-0 z-10 border-b px-3 pt-3 pb-2 backdrop-blur",
-              isSheet ? "bg-background" : "bg-muted/20"
-            ),
-            children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        offersSimple || searchVisible ? (
+          // Two elements so the header is opaque *and* the exact color of the
+          // rail. Painted with the rail's own `bg-muted/20`, it composited over
+          // the scrolled list instead and headings read through the search box
+          // (a `backdrop-blur` softened them, it didn't hide them). Restoring
+          // the `bg-background` base under the tint rebuilds the rail's own two
+          // layers, so the match holds under any theme.
+          /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 shrink-0 bg-background", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 border-b px-3 pt-3 pb-2", isSheet ? "bg-background" : "bg-muted/20"), children: [
+            offersSimple ? (
+              // Titled row: with the sections gone, simple mode's header would
+              // otherwise be a lone right-aligned link over empty space, and
+              // nothing would name what the rail below it holds.
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "min-w-0 truncate font-medium uppercase tracking-wide text-muted-foreground",
+                      isSheet ? "text-xs" : "text-[11px]"
+                    ),
+                    children: PALETTE_TITLE
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ModeLink,
+                  {
+                    advanced,
+                    isSheet,
+                    onToggle: () => {
+                      setQuery("");
+                      setAdvancedOpen((v) => !v);
+                    }
+                  }
+                )
+              ] })
+            ) : null,
+            searchVisible ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsx(
                 Search,
                 {
@@ -3843,10 +3903,14 @@ function Palette({
                   className: cn(isSheet ? "h-10 pl-8 text-base" : "h-8 pl-7 text-sm")
                 }
               )
-            ] })
-          }
+            ] }) : null
+          ] }) })
         ) : null,
-        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", isSheet ? "px-2 pb-6" : "p-3"), children: visibleSections.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-xs text-muted-foreground", children: "No blocks match." }) : visibleSections.map((section) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", isSheet ? "px-2 pb-6" : "p-3"), children: !advanced ? (
+          // Simple mode: a flat list, no section headings — with this few
+          // rows the headings would outnumber the blocks under them.
+          basics.map((v) => /* @__PURE__ */ jsx(PaletteItem, { variant: v, onAdd: () => onAddBlock(v.factory()), mode: variant }, v.id))
+        ) : visibleSections.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-xs text-muted-foreground", children: "No blocks match." }) : visibleSections.map((section) => /* @__PURE__ */ jsx(
           PaletteSection,
           {
             section,
@@ -3861,6 +3925,24 @@ function Palette({
     }
   );
 }
+function ModeLink({ advanced, isSheet, onToggle }) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-label": advanced ? "Basic block palette" : "Advanced block palette",
+        className: cn(
+          "shrink-0 cursor-pointer appearance-none rounded border-0 bg-transparent p-0 font-medium text-primary underline underline-offset-2 transition-colors hover:text-primary/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          isSheet ? "min-h-8 text-sm" : "text-xs"
+        ),
+        children: advanced ? "Basic" : "Advanced"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", align: "end", children: advanced ? BASIC_HELP : ADVANCED_HELP })
+  ] }) });
+}
 function PaletteSection({
   section,
   defaultOpen,
@@ -9802,6 +9884,48 @@ function EmptyState({
 function DropIndicator2() {
   return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none relative my-1 h-0.5 w-full rounded-full bg-primary", children: /* @__PURE__ */ jsx("span", { className: "-left-1 -top-[3px] absolute h-2 w-2 rounded-full bg-primary shadow-[0_0_0_2px_var(--color-background)]" }) });
 }
+function SlackMark({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 122.8 122.8",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#e01e5a",
+            d: "M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#36c5f0",
+            d: "M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2zm0 6.5c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#2eb67d",
+            d: "M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2zm-6.5 0c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: "#ecb22e",
+            d: "M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9zm0-6.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z"
+          }
+        )
+      ]
+    }
+  );
+}
 var THEME_OPTIONS = [
   { value: "light", label: "Light", Icon: Sun },
   { value: "dark", label: "Dark", Icon: Moon }
@@ -9866,7 +9990,7 @@ function Toolbar2({
     /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 sm:gap-2", children: [
         loadEnabled ? /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: onOpenLoad, "aria-label": loadButtonLabel, children: [
-          /* @__PURE__ */ jsx(MailSearch, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx(SlackMark, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: loadButtonLabel })
         ] }) : null,
         onOpenPalette ? /* @__PURE__ */ jsxs(
@@ -9996,18 +10120,29 @@ function Toolbar2({
             size: "sm",
             onClick: onClear,
             disabled: !canClear,
-            className: "hover:bg-destructive/10 hover:text-destructive",
+            className: "group gap-0 hover:bg-destructive/10 hover:text-destructive",
             "aria-label": "Clear all blocks",
             children: [
               /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: "Clear" })
+              /* @__PURE__ */ jsx(ExpandingLabel, { children: "Clear" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: onOpenJson,
+            className: "group gap-0",
+            "aria-label": "View JSON",
+            children: [
+              /* @__PURE__ */ jsx(Code2, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsx(ExpandingLabel, { children: "View JSON" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onOpenJson, "aria-label": "View JSON", children: [
-          /* @__PURE__ */ jsx(Code2, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: "View JSON" })
-        ] }),
         !showSend ? primaryAction ? (
           // Compose-only mode with a host-owned primary action: same
           // placement and styling as the built-in send button. No icon —
@@ -10117,6 +10252,19 @@ function Toolbar2({
     ] }) : null
   ] });
 }
+function ExpandingLabel({ children }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "grid grid-cols-[0fr] transition-[grid-template-columns] duration-200 ease-out",
+        "group-hover:grid-cols-[1fr] group-focus-visible:grid-cols-[1fr]",
+        "motion-reduce:transition-none"
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "block whitespace-nowrap pl-1.5", children }) })
+    }
+  );
+}
 function Menu({
   ariaLabel,
   options,
@@ -10299,6 +10447,7 @@ function BlockKitchen(props) {
     confirmUpdateLabel,
     palette,
     disabledBlockTypes,
+    paletteMode,
     showPaletteSearch,
     paletteSearchPlaceholder,
     defaultOpenSections,
@@ -10538,7 +10687,7 @@ function BlockKitchen(props) {
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "bk-root flex h-full w-full flex-col overflow-hidden rounded-md border bg-background text-foreground",
+            className: "bk-root flex h-full max-h-[var(--bk-max-height,100svh)] w-full flex-col overflow-hidden rounded-md border bg-background text-foreground",
             onKeyDown: handleKeyDown,
             children: [
               /* @__PURE__ */ jsx(
@@ -10601,6 +10750,7 @@ function BlockKitchen(props) {
                   {
                     onAddBlock: (block) => addBlock(block),
                     sections: paletteSections,
+                    mode: paletteMode,
                     showSearch: showPaletteSearch,
                     searchPlaceholder: paletteSearchPlaceholder,
                     defaultOpenSections
@@ -10653,6 +10803,7 @@ function BlockKitchen(props) {
                     setPaletteOpen(false);
                   },
                   sections: paletteSections,
+                  mode: paletteMode,
                   showSearch: showPaletteSearch,
                   searchPlaceholder: paletteSearchPlaceholder,
                   defaultOpenSections,