@tightknitai/block-kitchen 0.10.6 → 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,69 +3853,70 @@ 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 ? /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "sticky top-0 z-10 flex flex-col gap-2 border-b px-3 pt-3 pb-2 backdrop-blur",
-              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: [
+        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(
-                  Search,
+                  "span",
                   {
                     className: cn(
-                      "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground",
-                      isSheet ? "h-4 w-4" : "h-3.5 w-3.5"
-                    )
+                      "min-w-0 truncate font-medium uppercase tracking-wide text-muted-foreground",
+                      isSheet ? "text-xs" : "text-[11px]"
+                    ),
+                    children: PALETTE_TITLE
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  Input,
+                  ModeLink,
                   {
-                    type: "search",
-                    value: query,
-                    onChange: (e) => setQuery(e.target.value),
-                    placeholder: searchPlaceholder,
-                    "aria-label": searchPlaceholder,
-                    className: cn(isSheet ? "h-10 pl-8 text-base" : "h-8 pl-7 text-sm")
+                    advanced,
+                    isSheet,
+                    onToggle: () => {
+                      setQuery("");
+                      const next = !advancedOpen;
+                      setAdvancedOpen(next);
+                      onAdvancedChange?.(next);
+                    }
                   }
                 )
-              ] }) : null
-            ]
-          }
+              ] })
+            ) : null,
+            searchVisible ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                Search,
+                {
+                  className: cn(
+                    "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground",
+                    isSheet ? "h-4 w-4" : "h-3.5 w-3.5"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "search",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: searchPlaceholder,
+                  "aria-label": searchPlaceholder,
+                  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: !advanced ? (
           // Simple mode: a flat list, no section headings — with this few
@@ -4005,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" }) })
         ]
       }
     );
@@ -4016,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: [
@@ -4024,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: [
@@ -10001,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" }),
@@ -10121,18 +10132,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 —
@@ -10242,6 +10264,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,
@@ -10533,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) {
@@ -10664,7 +10707,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(
@@ -10722,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,
                   {
@@ -10765,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" }),
@@ -10784,6 +10863,8 @@ function BlockKitchen(props) {
                   showSearch: showPaletteSearch,
                   searchPlaceholder: paletteSearchPlaceholder,
                   defaultOpenSections,
+                  defaultAdvanced: paletteAdvanced,
+                  onAdvancedChange: setPaletteAdvanced,
                   variant: "sheet"
                 }
               ) })