@tightknitai/block-kitchen 0.10.7 → 0.10.9

package/README.md

@@ -141,7 +141,7 @@ Given no height to work with — a plain `<div>` in ordinary document flow — i
 | `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. |
@@ -442,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
@@ -476,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[] = [
@@ -497,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,7 +3883,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 ? (
@@ -3906,7 +3916,9 @@ function Palette({
                     isSheet,
                     onToggle: () => {
                       setQuery("");
-                      setAdvancedOpen((v) => !v);
+                      const next = !advancedOpen;
+                      setAdvancedOpen(next);
+                      onAdvancedChange?.(next);
                     }
                   }
                 )
@@ -4034,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" }) })
         ]
       }
     );
@@ -4045,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: [
@@ -4053,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: [
@@ -6100,12 +6112,44 @@ function HeaderEditor({ block, onChange }) {
   ] });
 }
 function ImageEditor({ block, onChange }) {
-  if (!("image_url" in block)) {
-    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "This image references a Slack file. Not editable in the visual builder." });
-  }
+  const source = "slack_file" in block ? "slack_file" : "url";
   const titleText = block.title?.text ?? "";
+  const setSource = (next) => {
+    if (next === source) {
+      return;
+    }
+    if (next === "url") {
+      const { slack_file: _omit, ...rest } = block;
+      onChange({ image_url: "", ...rest });
+    } else {
+      const { image_url: _omit, ...rest } = block;
+      onChange({ slack_file: { id: "" }, ...rest });
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Image URL", help: "A publicly accessible image URL (PNG, JPG, GIF).", htmlFor: "img-url", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EditorField,
+      {
+        label: "Image source",
+        help: "Where the image comes from: a public URL, or a file already uploaded to your Slack workspace.",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          RadioGroup,
+          {
+            value: source,
+            onValueChange: (v) => setSource(v),
+            className: "flex flex-row flex-wrap gap-3",
+            children: [
+              ["url", "Public URL"],
+              ["slack_file", "Slack file"]
+            ].map(([value, label]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value, id: `img-source-${value}` }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `img-source-${value}`, className: "text-xs", children: label })
+            ] }, value))
+          }
+        )
+      }
+    ),
+    "slack_file" in block ? /* @__PURE__ */ jsxRuntime.jsx(SlackFileFields, { block, onChange }) : /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Image URL", help: "A publicly accessible image URL (PNG, JPG, GIF).", htmlFor: "img-url", children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
         id: "img-url",
@@ -6149,6 +6193,51 @@ function ImageEditor({ block, onChange }) {
     ) })
   ] });
 }
+function SlackFileFields({
+  block,
+  onChange
+}) {
+  const fileId = "id" in block.slack_file ? block.slack_file.id : "";
+  const fileUrl = "url" in block.slack_file ? block.slack_file.url : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "References a file already uploaded to your Slack workspace. The preview can't render workspace files \u2014 switch the source to Public URL to see the image here." }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EditorField,
+      {
+        label: "File ID",
+        help: "The Slack file's ID. Slack accepts an ID or a URL, not both, so filling this clears File URL.",
+        htmlFor: "img-file-id",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            id: "img-file-id",
+            value: fileId,
+            placeholder: "e.g. F0123456789",
+            onChange: (e) => onChange({ ...block, slack_file: { id: e.target.value } })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EditorField,
+      {
+        label: "File URL",
+        help: "The file's Slack-hosted URL. Filling this clears File ID.",
+        htmlFor: "img-file-url",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            id: "img-file-url",
+            type: "url",
+            value: fileUrl,
+            placeholder: "e.g. https://files.slack.com/files-pri/T0123-F0123/image.png",
+            onChange: (e) => onChange({ ...block, slack_file: { url: e.target.value } })
+          }
+        )
+      }
+    )
+  ] });
+}
 function InputEditor({ block, onChange }) {
   const updateElement = (next) => {
     onChange({ ...block, element: next });
@@ -10030,7 +10119,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" }),
@@ -10586,12 +10675,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) {
@@ -10775,17 +10872,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,
                   {
@@ -10818,8 +10946,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" }),
@@ -10837,6 +10970,8 @@ function BlockKitchen(props) {
                   showSearch: showPaletteSearch,
                   searchPlaceholder: paletteSearchPlaceholder,
                   defaultOpenSections,
+                  defaultAdvanced: paletteAdvanced,
+                  onAdvancedChange: setPaletteAdvanced,
                   variant: "sheet"
                 }
               ) })