@tightknitai/block-kitchen 0.10.4 → 0.10.6

package/README.md

@@ -120,8 +120,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 +453,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 +567,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 +583,7 @@ import type {
   BlockKitchenComposeOnlyProps, // the trio explicitly absent + `primaryAction`
   PaletteSection,
   PaletteVariant,
+  PaletteMode,                  // 'advanced' (default) | 'simple'
   SendPayload,
   SendResult,
   SendDialogProps,
@@ -488,6 +592,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: [
@@ -3251,6 +3254,7 @@ function SlackSignInButton({ onClick, polling }) {
 }
 var LINK_DEBOUNCE_MS = 400;
 var LINK_HELP_TEXT = 'Click the \u2807menu while hovering over the message in Slack (or right-click), and select "Copy Link".';
+var LINK_HELP_LABEL = "Where to find a message link";
 var TABS = [
   { id: "recent", label: "Pick from Recent" },
   { id: "link", label: "Direct Link" }
@@ -3499,12 +3503,13 @@ 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,
     {
-      className: "flex max-h-[85svh] w-[calc(100vw-1.5rem)] flex-col rounded-lg lg:max-w-4xl",
+      className: "flex max-h-[85svh] w-[calc(100vw-1.5rem)] max-w-4xl flex-col rounded-lg max-lg:max-w-lg",
       onOpenAutoFocus: (e) => {
         if (hasRecent) {
           return;
@@ -3517,7 +3522,7 @@ function LoadMessageDialog({
           /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Find an existing message" }),
           /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: hasRecent ? "Pick a recent message your app posted, or paste a Slack message link. Preview it before loading." : `Paste a Slack message link (Slack's "Copy link") to preview it and load its blocks for editing.` })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "-mx-1 flex min-h-0 min-w-0 flex-1 flex-col gap-4 overflow-y-auto px-1 lg:flex-row lg:gap-5 lg:overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "-mx-1 flex min-h-0 min-w-0 flex-1 px-1 max-lg:flex-col max-lg:gap-4 max-lg:overflow-y-auto lg:flex-row lg:gap-5 lg:overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-3 lg:min-h-0 lg:w-[19rem]", children: [
             hasRecent && /* @__PURE__ */ jsxRuntime.jsx(TabStrip, { activeTab, onSelect: setTab, tabDomId, panelDomId }),
             activeTab === "recent" ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3552,7 +3557,7 @@ function LoadMessageDialog({
                   channelId && recent === null && !recentError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 text-xs text-muted-foreground", children: "Loading recent messages\u2026" }),
                   channelId && recentError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 text-xs text-destructive", children: recentError }),
                   channelId && recent && recent.length === 0 && !recentError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 text-xs text-muted-foreground", children: "No recent messages from this app in this channel." }),
-                  channelId && recent && recent.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-h-60 min-h-0 min-w-0 flex-col gap-1 overflow-y-auto lg:max-h-none lg:flex-1", children: recent.map((m) => {
+                  channelId && recent && recent.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 min-w-0 flex-col gap-1 overflow-y-auto max-lg:max-h-60 lg:flex-1", children: recent.map((m) => {
                     const asUser = (m.editableVia ?? "bot") === "user";
                     const authorName = m.username || (asUser ? "You" : "App bot");
                     const safeIcon = isSafeImageSrc(m.iconUrl) ? m.iconUrl : void 0;
@@ -3610,7 +3615,21 @@ function LoadMessageDialog({
                 className: "-mx-1 flex min-w-0 flex-col gap-2 px-1 lg:min-h-0 lg:flex-1 lg:overflow-y-auto",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message-link", children: "Message link" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message-link", children: "Message link" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": LINK_HELP_LABEL,
+                            className: "flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-3.5 w-3.5" })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", children: LINK_HELP_TEXT })
+                      ] })
+                    ] }),
                     /* @__PURE__ */ jsxRuntime.jsx(
                       Input,
                       {
@@ -3632,8 +3651,7 @@ function LoadMessageDialog({
                         autoComplete: "off",
                         spellCheck: false
                       }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: LINK_HELP_TEXT })
+                    )
                   ] }),
                   emptyLinkError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: emptyLinkError })
                 ]
@@ -3731,38 +3749,39 @@ 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",
       {
         role: "region",
         "aria-label": "Message preview",
         tabIndex: 0,
-        className: "flex max-h-72 min-h-32 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 lg:max-h-none lg:min-h-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,
             {
@@ -3792,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;
@@ -3814,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",
@@ -3831,38 +3876,72 @@ function Palette({
         isSheet ? "w-full flex-1 bg-background" : "w-72 shrink-0 border-r bg-muted/20"
       ),
       children: [
-        showSearch ? /* @__PURE__ */ jsxRuntime.jsx(
+        offersSimple || searchVisible ? /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "sticky top-0 z-10 border-b px-3 pt-3 pb-2 backdrop-blur",
+              "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: /* @__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"
+            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);
+                      }
+                    }
                   )
-                }
-              ),
-              /* @__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,
+              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: 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,
@@ -3877,6 +3956,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,
@@ -9818,6 +9915,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 }
@@ -9882,7 +10021,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(
@@ -10315,6 +10454,7 @@ function BlockKitchen(props) {
     confirmUpdateLabel,
     palette,
     disabledBlockTypes,
+    paletteMode,
     showPaletteSearch,
     paletteSearchPlaceholder,
     defaultOpenSections,
@@ -10617,6 +10757,7 @@ function BlockKitchen(props) {
                   {
                     onAddBlock: (block) => addBlock(block),
                     sections: paletteSections,
+                    mode: paletteMode,
                     showSearch: showPaletteSearch,
                     searchPlaceholder: paletteSearchPlaceholder,
                     defaultOpenSections
@@ -10669,6 +10810,7 @@ function BlockKitchen(props) {
                     setPaletteOpen(false);
                   },
                   sections: paletteSections,
+                  mode: paletteMode,
                   showSearch: showPaletteSearch,
                   searchPlaceholder: paletteSearchPlaceholder,
                   defaultOpenSections,