@tightknitai/block-kitchen 0.10.5 → 0.10.7

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,8 +141,9 @@ 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). |
 | `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. |
+| `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. |
 | `allowedSurfaces` | `PreviewSurface[]` | no | Allowlist of preview surfaces (`'message'`, `'modal'`, `'app_home'`). Defaults to `['message']` — surface dropdown is hidden when only one surface is allowed. The first entry is the initial selection. |
 | `showThemeControl` | `boolean` | no | Defaults to `true`. When `false`, the toolbar's light/dark toggle is hidden and the theme stays at `defaultPreviewTheme`. Ignored when `previewTheme` is set (a controlled theme always hides the toggle). |
@@ -452,6 +474,107 @@ const PALETTE: readonly PaletteSection[] = [
 
 Variant `id`s must be unique across the array — the drag-drop lookup keys by id.
 
+### 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).
+
+```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:
+
+```tsx
+const PALETTE: readonly PaletteSection[] = [
+  {
+    name: "Company presets",
+    icon: AlignLeft,
+    variants: [
+      { id: "help_footer", label: "Help footer", basic: true, factory: () => ({ ... }) },
+      { id: "company_divider", label: "Company divider", factory: () => ({ ... }) },
+    ],
+  },
+];
+```
+
+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.
+
+## 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.
+
+```tsx
+import {
+  BlockKitchen,
+  TemplatePicker,
+  type SupportedBlock,
+  type Template,
+} from "@tightknitai/block-kitchen";
+import { useState } from "react";
+
+const TEMPLATES: Template[] = [
+  {
+    id: "standup",
+    name: "Daily standup",
+    description: "Yesterday / today / blockers",
+    surface: "message",
+    category: "Team", // optional — groups cards into sections
+    blocks: [
+      /* SupportedBlock[] */
+    ],
+  },
+];
+
+function Builder() {
+  const [blocks, setBlocks] = useState<SupportedBlock[]>([]);
+  // `initialBlocks` is read once at mount, so bump a key to re-seed.
+  const [seedKey, setSeedKey] = useState(0);
+
+  return (
+    <div style={{ display: "flex", minHeight: 0 }}>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <BlockKitchen key={seedKey} initialBlocks={blocks} onChange={setBlocks} {...rest} />
+      </div>
+      {/* `.bk-root` is required — see below */}
+      <aside className="bk-root" style={{ width: 380, overflowY: "auto" }}>
+        <TemplatePicker
+          templates={TEMPLATES}
+          heading="Templates"
+          onSelect={(t) => {
+            setBlocks(t.blocks);
+            setSeedKey((n) => n + 1);
+          }}
+        />
+      </aside>
+    </div>
+  );
+}
+```
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `templates` | `Template[]` | yes | Templates to show. Order is preserved within each category section. |
+| `onSelect` | `(template: Template) => void` | yes | Called with the whole template when a card is clicked. Nothing is applied to the builder for you — see [Applying a selection](#applying-a-selection). |
+| `surface` | `'message' \| 'modal' \| 'app_home'` | no | Filter to templates whose `surface` matches. Omit to show all. |
+| `theme` | `'light' \| 'dark'` | no | Preview theme used inside the card thumbnails. Defaults to `'light'`; pass the builder's `previewTheme` to keep them in step. |
+| `heading` | `string` | no | Heading rendered above the grid. Omitted means no heading. |
+| `emptyLabel` | `string` | no | Shown when the `surface` filter matches nothing. Defaults to `'No templates available.'`. |
+| `className` | `string` | no | Merged onto the root element. |
+
+A `Template` is `{ id, name, surface, blocks }` plus optional `description` and `category`. Templates without a `category` fall into a trailing **Other** section when at least one other template has one; with no categories at all, the grid renders flat without section headers.
+
+### Bring your own templates
+
+The package ships **no** templates on purpose — they're use-case examples ("Expense approval" belongs to an approvals product, "Daily standup" to a team product), so they belong in your app's config rather than the library bundle. The live demo defines its own set in [`demo/src/templates.ts`](demo/src/templates.ts) if you want a starting point to crib from.
+
+### Applying a selection
+
+`onSelect` hands you the template and stops there — the picker never reaches into the builder. Because [`initialBlocks`](#props) is read once at mount, replacing the current draft means re-seeding with a changed `key`, as above. Selecting a template this way discards the draft and its undo history, so gate it behind a confirmation if that's a surprise in your app.
+
+### It needs a `.bk-root` ancestor
+
+Unlike `BlockKitchen`, the picker does not add the `bk-root` class itself. The stylesheet ships its utilities inside `@scope (.bk-root, .bk-portal-content)`, so a picker mounted outside both roots renders unstyled. Wrap it (or any ancestor) in `className="bk-root"`.
+
 ## Boundary
 
 The package is deliberately decoupled from any Slack SDK or backend. It does not import HTTP clients, OAuth libraries, or workspace-state systems. Everything I/O-shaped is brokered through props — and the send flow itself is optional: see [compose-only mode](#compose-only-mode-bring-your-own-send-flow) when your app owns the moment of commitment.
@@ -465,6 +588,7 @@ import {
   decodeBlocksFromString,
   defaultPalette,          // the built-in palette — spread to customize
   SendDialog,              // the built-in send dialog, standalone (bespoke send flows)
+  TemplatePicker,          // the standalone templates grid — see Templates above
   useSlackSignIn,          // the OAuth sign-in state machine behind the identity picker
   SlackSignInButton,       // the "Sign in with Slack" button + polling spinner
 } from "@tightknitai/block-kitchen";
@@ -480,6 +604,7 @@ import type {
   BlockKitchenComposeOnlyProps, // the trio explicitly absent + `primaryAction`
   PaletteSection,
   PaletteVariant,
+  PaletteMode,                  // 'advanced' (default) | 'simple'
   SendPayload,
   SendResult,
   SendDialogProps,
@@ -488,6 +613,7 @@ import type {
   PrimaryActionContext,
   ChannelOption,
   SendAsUserStatus,
+  Template,                     // one entry in a TemplatePicker gallery
   ValidationSummary,
   PreviewHooks,
 } from "@tightknitai/block-kitchen";

package/dist/helpers.d.cts

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

package/dist/helpers.d.ts

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

package/dist/index.cjs

@@ -848,7 +848,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: [
@@ -3500,7 +3503,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__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
     DialogContent,
@@ -3745,6 +3749,24 @@ function PreviewPane({
         editableLabel(target.editableVia)
       ] }) : null
     ] }),
+    state.kind === "not-editable" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: state.reason })
+      ] }),
+      signInUrl && /* @__PURE__ */ jsxRuntime.jsx(SlackSignInButton, { onClick: () => onSignIn(signInUrl), polling: signInPolling }),
+      verdictBlocks && verdictBlocks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "self-start",
+          onClick: () => onOpenAsNew(verdictBlocks),
+          children: "Open as a new message instead"
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -3753,30 +3775,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: state.reason })
-            ] }),
-            signInUrl && /* @__PURE__ */ jsxRuntime.jsx(SlackSignInButton, { onClick: () => onSignIn(signInUrl), polling: signInPolling }),
-            verdictBlocks && verdictBlocks.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("p", { className: "m-auto flex items-center gap-2 text-sm text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
             "Looking up that message\u2026"
           ] }),
           state.kind === "empty" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "m-auto px-4 text-center text-sm text-muted-foreground", children: "Nothing to preview." }),
           target && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
             SlackMessagePreview,
             {
@@ -3806,6 +3811,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;
@@ -3828,14 +3847,26 @@ function Palette({
   defaultOpenSections = true,
   showSearch = true,
   searchPlaceholder = "Search blocks\u2026",
+  mode = "advanced",
   variant = "aside"
 }) {
   const [query, setQuery] = React.useState("");
+  const [advancedOpen, setAdvancedOpen] = React.useState(false);
+  const [prevMode, setPrevMode] = React.useState(mode);
+  if (prevMode !== mode) {
+    setPrevMode(mode);
+    setAdvancedOpen(false);
+    setQuery("");
+  }
+  const basics = React.useMemo(() => mode === "simple" ? basicVariants(sections) : [], [mode, sections]);
+  const offersSimple = mode === "simple" && basics.length > 0;
+  const advanced = !offersSimple || advancedOpen;
+  const searchVisible = showSearch && advanced;
   const visibleSections = React.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__ */ jsxRuntime.jsxs(
     "aside",
@@ -3845,14 +3876,43 @@ function Palette({
         isSheet ? "w-full flex-1 bg-background" : "w-72 shrink-0 border-r bg-muted/20"
       ),
       children: [
-        showSearch ? /* @__PURE__ */ jsxRuntime.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__ */ 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(
+                  "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: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.Search,
                 {
@@ -3873,10 +3933,14 @@ function Palette({
                   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: visibleSections.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-1 py-2 text-xs text-muted-foreground", children: "No blocks match." }) : visibleSections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__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
+          // rows the headings would outnumber the blocks under them.
+          basics.map((v) => /* @__PURE__ */ jsxRuntime.jsx(PaletteItem, { variant: v, onAdd: () => onAddBlock(v.factory()), mode: variant }, v.id))
+        ) : visibleSections.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-1 py-2 text-xs text-muted-foreground", children: "No blocks match." }) : visibleSections.map((section) => /* @__PURE__ */ jsxRuntime.jsx(
           PaletteSection,
           {
             section,
@@ -3891,6 +3955,24 @@ function Palette({
     }
   );
 }
+function ModeLink({ advanced, isSheet, onToggle }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", align: "end", children: advanced ? BASIC_HELP : ADVANCED_HELP })
+  ] }) });
+}
 function PaletteSection({
   section,
   defaultOpen,
@@ -9832,6 +9914,48 @@ function EmptyState({
 function DropIndicator2() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none relative my-1 h-0.5 w-full rounded-full bg-primary", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 122.8 122.8",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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: lucideReact.Sun },
   { value: "dark", label: "Dark", Icon: lucideReact.Moon }
@@ -9896,7 +10020,7 @@ function Toolbar2({
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 sm:gap-2", children: [
         loadEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenLoad, "aria-label": loadButtonLabel, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MailSearch, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SlackMark, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: loadButtonLabel })
         ] }) : null,
         onOpenPalette ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10026,18 +10150,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 —
@@ -10147,6 +10282,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,
@@ -10329,6 +10477,7 @@ function BlockKitchen(props) {
     confirmUpdateLabel,
     palette,
     disabledBlockTypes,
+    paletteMode,
     showPaletteSearch,
     paletteSearchPlaceholder,
     defaultOpenSections,
@@ -10568,7 +10717,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(
@@ -10631,6 +10780,7 @@ function BlockKitchen(props) {
                   {
                     onAddBlock: (block) => addBlock(block),
                     sections: paletteSections,
+                    mode: paletteMode,
                     showSearch: showPaletteSearch,
                     searchPlaceholder: paletteSearchPlaceholder,
                     defaultOpenSections
@@ -10683,6 +10833,7 @@ function BlockKitchen(props) {
                     setPaletteOpen(false);
                   },
                   sections: paletteSections,
+                  mode: paletteMode,
                   showSearch: showPaletteSearch,
                   searchPlaceholder: paletteSearchPlaceholder,
                   defaultOpenSections,