@tightknitai/block-kitchen 0.10.6 → 0.10.8

package/README.md

@@ -98,6 +98,27 @@ export function MyBuilderPage() {
 }
 ```
 
+### Sizing
+
+The builder is an app shell: a fixed toolbar over a palette rail and a preview pane that scroll independently. It fills its container, so the height you give that container is the height it takes.
+
+```tsx
+// Give it a definite height and it fills exactly that.
+<div style={{ height: "100%" }}>
+  <BlockKitchen {...props} />
+</div>
+```
+
+Given no height to work with — a plain `<div>` in ordinary document flow — it bounds itself to `100svh` rather than growing to fit the palette's full block list, which would run a couple of thousand pixels down the page. Override that bound with `--bk-max-height` on any ancestor:
+
+```css
+/* Room for a 4rem page header above the builder. */
+.builder-host { --bk-max-height: calc(100svh - 4rem); }
+
+/* Or opt out entirely and let it grow with its content. */
+.builder-host { --bk-max-height: none; }
+```
+
 ## Props
 
 | Prop | Type | Required | Description |
@@ -120,7 +141,7 @@ export function MyBuilderPage() {
 | `customEmojis` | `CustomEmoji[]` | no | Workspace custom emoji (`{ name, url, alias }`) the preview resolves. Entries with a `url` render `:name:` as the workspace image; alias entries (`url: null`) fall back to their target emoji. Render-only — never serialized into the emitted Block Kit JSON. A caller-supplied `previewHooks.emoji` takes precedence. |
 | `palette` | `PaletteSection[]` | no | The left-hand palette of draggable variants. Defaults to `defaultPalette`. Spread it to filter, reorder, or add your own pre-configured variants — see [Customizing the palette](#customizing-the-palette). |
 | `disabledBlockTypes` | `SupportedBlockType[]` | no | Block types to hide from the palette without rebuilding it. Filters at the variant level — a section keeps any variants whose block types aren't disabled; sections that end up empty are dropped. Convenient when you want the default palette minus a few types (e.g. `['image', 'table']` for a text-only builder). |
-| `paletteMode` | `'advanced' \| 'simple'` | no | How much of the palette the user meets first. `'advanced'` (default) renders the full sectioned palette with its search input. `'simple'` opens on a flat list of the variants flagged `basic` — in the built-in palette, just **Rich Text Section** — with no search and an "Advanced" link at the top that swaps in the full palette. Nothing is removed; it's a smaller first screen. See [Simple vs advanced palette](#simple-vs-advanced-palette). |
+| `paletteMode` | `'advanced' \| 'simple'` | no | How much of the palette the user meets first. `'advanced'` (default) renders the full sectioned palette with its search input. `'simple'` opens on a flat list of the variants flagged `basic` — in the built-in palette: **Header**, **Divider**, **Rich Text Section** and **Image** — with no search and an "Advanced" link at the top that swaps in the full palette. Nothing is removed; it's a smaller first screen. See [Simple vs advanced palette](#simple-vs-advanced-palette). |
 | `defaultOpenSections` | `boolean \| string[]` | no | Which palette section headers are expanded on first paint. `true` (default) opens all sections; `false` collapses all (Slack-style); an array opens only sections whose `name` is in the list (e.g. `['Section', 'Actions']`). The palette also has a built-in search input that expands matching sections on demand. |
 | `showPaletteSearch` | `boolean` | no | Whether the palette renders the quick-search input above the section list. Defaults to `true`. Set `false` for compact palettes (e.g. when you've passed a small custom `palette`) where scanning by eye is faster than typing. Simple mode has no search either way — it appears with the rest of the palette behind "Advanced". |
 | `paletteSearchPlaceholder` | `string` | no | Placeholder text for the palette search input. Defaults to `'Search blocks…'`. Useful for localization. |
@@ -421,6 +442,8 @@ update against the target from `loadedMessage` / `onLoadedMessageChange`.
 
 ## Customizing the palette
 
+On desktop the palette is a rail down the left-hand side, with a chevron handle on its outer border that hides and restores it — collapsed, the preview gets the full width, and the rail comes back with its open sections and search exactly as they were. Below the `md` breakpoint there's no rail: the toolbar's **Blocks** button opens the palette as a bottom sheet instead, and picking a block closes it.
+
 The default palette ships with curated presets for every supported block type. To narrow what's available, or add your own pre-configured variants (e.g. a "Help footer" section), pass a `palette` array. Define it at module scope (or wrap in `useMemo`) so it stays referentially stable across renders.
 
 ```tsx
@@ -455,13 +478,13 @@ Variant `id`s must be unique across the array — the drag-drop lookup keys by i
 
 ### Simple vs advanced palette
 
-By default the palette opens on everything it has: every section, plus the search input. For consumers whose users are writing ordinary messages rather than building interactive apps, `paletteMode="simple"` opens on a one-block starter list instead — no sections, no search — behind an **Advanced** link that swaps in the full palette (and back).
+By default the palette opens on everything it has: every section, plus the search input. For consumers whose users are writing ordinary messages rather than building interactive apps, `paletteMode="simple"` opens on a short starter list instead — no sections, no search — behind an **Advanced** link that swaps in the full palette (and back).
 
 ```tsx
 <BlockKitchen paletteMode="simple" {...rest} />
 ```
 
-Which variants the simple list holds is a property of the palette, not the flag: a variant opts in with `basic: true`. The built-in palette flags exactly one — **Rich Text Section** — so a custom palette that wants its own starter block says so:
+Which variants the simple list holds is a property of the palette, not the flag: a variant opts in with `basic: true`. The built-in palette flags four — **Header**, **Divider**, **Rich Text Section** and **Image** — listed in palette order. A custom palette that wants its own starter blocks says so:
 
 ```tsx
 const PALETTE: readonly PaletteSection[] = [
@@ -476,8 +499,12 @@ const PALETTE: readonly PaletteSection[] = [
 ];
 ```
 
+The flat list has no section headings to lean on, so a variant whose label only reads in context can give simple mode a self-describing one with `basicLabel` — that's how the built-in image variant (**No title**, under **Image**) shows up as **Image** there.
+
 A palette that flags none of its variants `basic` has no simple list to show, so it renders as `'advanced'` regardless — the link is withheld rather than leading to an empty rail.
 
+The builder remembers which side of that switch the user is on, so the mobile sheet — which is torn down every time it closes — reopens on the full palette rather than sending them back through the **Advanced** link on every block.
+
 ## Templates (`TemplatePicker`)
 
 `TemplatePicker` is a standalone, page-sized picker that renders `Template`s as a grid of cards with live block previews, grouped into category sections — modeled on Slack's own Block Kit Builder templates page. It's pure UI: it owns no dialog and no layout, so you decide whether it's a route, a modal, a slide-over, or a sidebar next to the builder.

package/dist/helpers.d.cts

@@ -1,5 +1,5 @@
-import { S as SupportedBlock } from './palette-QbOx7kAa.cjs';
-export { a1 as SupportedBlockType } from './palette-QbOx7kAa.cjs';
+import { S as SupportedBlock } from './palette-CvSGn2z6.cjs';
+export { a1 as SupportedBlockType } from './palette-CvSGn2z6.cjs';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/helpers.d.ts

@@ -1,5 +1,5 @@
-import { S as SupportedBlock } from './palette-QbOx7kAa.js';
-export { a1 as SupportedBlockType } from './palette-QbOx7kAa.js';
+import { S as SupportedBlock } from './palette-CvSGn2z6.js';
+export { a1 as SupportedBlockType } from './palette-CvSGn2z6.js';
 import 'react';
 import 'slack-web-api-client';
 

package/dist/index.cjs

@@ -4,10 +4,10 @@ var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var lucideReact = require('lucide-react');
 var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var DialogPrimitive = require('@radix-ui/react-dialog');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var DialogPrimitive = require('@radix-ui/react-dialog');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var slackBlockKitValidator = require('@tightknitai/slack-block-kit-validator');
 var nanoid = require('nanoid');
@@ -53,6 +53,9 @@ var Link__default = /*#__PURE__*/_interopDefault(Link);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 
 // src/components/block-kitchen.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 
 // src/lib/container-blocks.ts
 var CONTAINER_CHILD_TYPES = /* @__PURE__ */ new Set([
@@ -734,6 +737,7 @@ var defaultPalette = [
       {
         id: "structure_header",
         label: "Header",
+        basic: true,
         factory: () => ({
           type: "header",
           text: { type: "plain_text", text: "Heading text", emoji: true }
@@ -742,6 +746,7 @@ var defaultPalette = [
       {
         id: "structure_divider",
         label: "Divider",
+        basic: true,
         factory: () => ({ type: "divider" })
       },
       {
@@ -849,8 +854,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",
@@ -887,6 +893,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",
@@ -1709,9 +1720,6 @@ function labelForBlockType(type) {
       return "Container";
   }
 }
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var Sheet = DialogPrimitive__namespace.Root;
 var SheetOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
@@ -3812,14 +3820,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);
       }
     }
   }
@@ -3848,10 +3856,12 @@ function Palette({
   showSearch = true,
   searchPlaceholder = "Search blocks\u2026",
   mode = "advanced",
+  defaultAdvanced = false,
+  onAdvancedChange,
   variant = "aside"
 }) {
   const [query, setQuery] = React.useState("");
-  const [advancedOpen, setAdvancedOpen] = React.useState(false);
+  const [advancedOpen, setAdvancedOpen] = React.useState(defaultAdvanced);
   const [prevMode, setPrevMode] = React.useState(mode);
   if (prevMode !== mode) {
     setPrevMode(mode);
@@ -3873,69 +3883,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                    ModeLink,
-                    {
-                      advanced,
-                      isSheet,
-                      onToggle: () => {
-                        setQuery("");
-                        setAdvancedOpen((v) => !v);
-                      }
-                    }
-                  )
-                ] })
-              ) : null,
-              searchVisible ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 shrink-0 bg-background", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.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
@@ -4035,8 +4046,8 @@ function PaletteItem({
           isDragging && "opacity-50"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: variant.label })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: variant.label }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }) })
         ]
       }
     );
@@ -4046,7 +4057,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: [
@@ -4054,7 +4065,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: [
@@ -10031,7 +10042,7 @@ function Toolbar2({
             variant: "ghost",
             size: "sm",
             onClick: onOpenPalette,
-            className: "md:hidden",
+            className: "gap-1 md:hidden",
             "aria-label": "Add a block",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
@@ -10151,18 +10162,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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: "Clear" })
+              /* @__PURE__ */ jsxRuntime.jsx(ExpandingLabel, { children: "Clear" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: onOpenJson,
+            className: "group gap-0",
+            "aria-label": "View JSON",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ExpandingLabel, { children: "View JSON" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onOpenJson, "aria-label": "View JSON", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsxRuntime.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 —
@@ -10272,6 +10294,19 @@ function Toolbar2({
     ] }) : null
   ] });
 }
+function ExpandingLabel({ children }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block whitespace-nowrap pl-1.5", children }) })
+    }
+  );
+}
 function Menu({
   ariaLabel,
   options,
@@ -10563,12 +10598,20 @@ function BlockKitchen(props) {
   useNotifyOnChange(activeEditTarget, loadedMessageKey, loading?.onLoadedMessageChange);
   const [issuesOpen, setIssuesOpen] = React.useState(false);
   const [paletteOpen, setPaletteOpen] = React.useState(false);
+  const [paletteCollapsed, setPaletteCollapsed] = React.useState(false);
+  const [paletteAdvanced, setPaletteAdvanced] = React.useState(false);
+  const [prevPaletteMode, setPrevPaletteMode] = React.useState(paletteMode);
+  if (prevPaletteMode !== paletteMode) {
+    setPrevPaletteMode(paletteMode);
+    setPaletteAdvanced(false);
+  }
   const [openBlockId, setOpenBlockId] = React.useState(null);
   const [uncontrolledPreviewTheme, setUncontrolledPreviewTheme] = React.useState(defaultPreviewTheme);
   const isPreviewThemeControlled = controlledPreviewTheme !== void 0;
   const previewTheme = controlledPreviewTheme ?? uncontrolledPreviewTheme;
   const [previewSurface, setPreviewSurface] = React.useState(allowedSurfaces[0]);
   const [activePaletteVariantId, setActivePaletteVariantId] = React.useState(null);
+  const paletteSheetRef = React.useRef(null);
   const isMobile = useIsMobile();
   const mergedPreviewHooks = React.useMemo(() => {
     if (!customEmojis || customEmojis.length === 0) {
@@ -10694,7 +10737,7 @@ function BlockKitchen(props) {
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -10752,17 +10795,48 @@ function BlockKitchen(props) {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden min-h-0 md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Palette,
-                  {
-                    onAddBlock: (block) => addBlock(block),
-                    sections: paletteSections,
-                    mode: paletteMode,
-                    showSearch: showPaletteSearch,
-                    searchPlaceholder: paletteSearchPlaceholder,
-                    defaultOpenSections
-                  }
-                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative hidden min-h-0 shrink-0 md:flex", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { hidden: paletteCollapsed, className: cn("min-h-0", !paletteCollapsed && "flex"), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "w-0 shrink-0 md:h-[var(--bk-max-height,100svh)]" })
+                  ) : null,
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4", strokeWidth: 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4", strokeWidth: 1.5 })
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Surface,
                   {
@@ -10795,8 +10869,13 @@ function BlockKitchen(props) {
         /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: paletteOpen && isMobile, onOpenChange: setPaletteOpen, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 px-4 pt-5", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Add a block" }),
@@ -10814,6 +10893,8 @@ function BlockKitchen(props) {
                   showSearch: showPaletteSearch,
                   searchPlaceholder: paletteSearchPlaceholder,
                   defaultOpenSections,
+                  defaultAdvanced: paletteAdvanced,
+                  onAdvancedChange: setPaletteAdvanced,
                   variant: "sheet"
                 }
               ) })