@tightknitai/block-kitchen 0.10.4 → 0.10.6

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-Sz27861i.cjs';
-export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as PaletteSection, R as PaletteVariant, U as PieChart, V as PieChartSegment, W as PlanBlock, X as PreviewHooks, Y as PrimaryActionConfig, Z as PrimaryActionContext, _ as RecentMessage, $ as SendResult, a0 as SupportedBlockType, a1 as SupportedHeaderBlock, a2 as TableBlock, a3 as TableCell, a4 as TableColumnSetting, a5 as TaskCardBlock, a6 as TaskCardStatus, a7 as UpdatePayload, a8 as UpdateResult, a9 as UrlSourceElement, aa as ValidationSummary, ab as VideoBlock, ac as defaultPalette, ad as extraAlertVariant, ae as legacyInputVariants } from './palette-Sz27861i.cjs';
+import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-QbOx7kAa.cjs';
+export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as PaletteMode, R as PaletteSection, U as PaletteVariant, V as PieChart, W as PieChartSegment, X as PlanBlock, Y as PreviewHooks, Z as PrimaryActionConfig, _ as PrimaryActionContext, $ as RecentMessage, a0 as SendResult, a1 as SupportedBlockType, a2 as SupportedHeaderBlock, a3 as TableBlock, a4 as TableCell, a5 as TableColumnSetting, a6 as TaskCardBlock, a7 as TaskCardStatus, a8 as UpdatePayload, a9 as UpdateResult, aa as UrlSourceElement, ab as ValidationSummary, ac as VideoBlock, ad as defaultPalette, ae as extraAlertVariant, af as legacyInputVariants } from './palette-QbOx7kAa.cjs';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.cjs';
 import 'slack-web-api-client';
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-Sz27861i.js';
-export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as PaletteSection, R as PaletteVariant, U as PieChart, V as PieChartSegment, W as PlanBlock, X as PreviewHooks, Y as PrimaryActionConfig, Z as PrimaryActionContext, _ as RecentMessage, $ as SendResult, a0 as SupportedBlockType, a1 as SupportedHeaderBlock, a2 as TableBlock, a3 as TableCell, a4 as TableColumnSetting, a5 as TaskCardBlock, a6 as TaskCardStatus, a7 as UpdatePayload, a8 as UpdateResult, a9 as UrlSourceElement, aa as ValidationSummary, ab as VideoBlock, ac as defaultPalette, ad as extraAlertVariant, ae as legacyInputVariants } from './palette-Sz27861i.js';
+import { B as BlockKitchenProps, S as SupportedBlock, C as ChannelOption, a as SendAsUserStatus, b as SendPayload, c as SendExtrasContext, T as Template, P as PreviewSurface, d as PreviewTheme } from './palette-QbOx7kAa.js';
+export { A as AlertBlock, e as AlertLevel, f as BlockKitchenBaseProps, g as BlockKitchenComposeOnlyProps, h as BlockKitchenSendProps, i as BrandPreset, j as BrandTheme, k as BrandTokens, l as BuilderBlock, m as CardBlock, n as CarouselBlock, o as CartesianChart, p as Chart, q as ChartAxisConfig, r as ChartDataPoint, s as ChartSeries, t as ChartType, u as ContainerBlock, v as ContainerChildBlock, w as ContextActionsBlock, x as ContextActionsElement, y as CustomEmoji, D as DataVisualizationBlock, E as EditableVia, F as FeedbackButtonSubobject, z as FeedbackButtonsElement, H as HeaderLevel, I as IconButtonElement, G as IconButtonIcon, J as InputBlock, L as LoadMessageInput, K as LoadResult, M as LoadedMessage, N as LoadingConfig, O as MarkdownBlock, Q as PaletteMode, R as PaletteSection, U as PaletteVariant, V as PieChart, W as PieChartSegment, X as PlanBlock, Y as PreviewHooks, Z as PrimaryActionConfig, _ as PrimaryActionContext, $ as RecentMessage, a0 as SendResult, a1 as SupportedBlockType, a2 as SupportedHeaderBlock, a3 as TableBlock, a4 as TableCell, a5 as TableColumnSetting, a6 as TaskCardBlock, a7 as TaskCardStatus, a8 as UpdatePayload, a9 as UpdateResult, aa as UrlSourceElement, ab as ValidationSummary, ac as VideoBlock, ad as defaultPalette, ae as extraAlertVariant, af as legacyInputVariants } from './palette-QbOx7kAa.js';
 export { decodeBlocksFromString, encodeBlocksToString, toSlackBlocks } from './helpers.js';
 import 'slack-web-api-client';
 

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, pointerWithin, closestCenter, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
-import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, Loader2, ExternalLink, AlertTriangle, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, MailSearch, Plus, ChevronDown, BookOpen, Undo2, Redo2, Trash2, Code2, Pencil, Send, Search, Check, Copy, CheckCircle2, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Smile, Link as Link$1 } from 'lucide-react';
+import { X, Circle, Sparkles, FileText, AlignLeft, MousePointerClick, TextCursorInput, LayoutTemplate, Bell, Pilcrow, Image, Video, GalleryHorizontal, Table, ChartColumnBig, Container, Loader2, ExternalLink, AlertTriangle, GripVertical, Sun, Moon, MessageSquare, AppWindow, Home, Plus, ChevronDown, BookOpen, Undo2, Redo2, Trash2, Code2, Pencil, Send, Search, Check, Copy, Info, CheckCircle2, ChevronRight, LayoutGrid, ArrowUp, ArrowDown, Type, Bold, Italic, Strikethrough, Underline, Code, List, ListOrdered, Quote, Smile, Link as Link$1 } from 'lucide-react';
 import * as React from 'react';
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useId, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -818,7 +818,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: [
@@ -3221,6 +3224,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" }
@@ -3469,12 +3473,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__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ 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;
@@ -3487,7 +3492,7 @@ function LoadMessageDialog({
           /* @__PURE__ */ jsx(DialogTitle, { children: "Find an existing message" }),
           /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-3 lg:min-h-0 lg:w-[19rem]", children: [
             hasRecent && /* @__PURE__ */ jsx(TabStrip, { activeTab, onSelect: setTab, tabDomId, panelDomId }),
             activeTab === "recent" ? /* @__PURE__ */ jsxs(
@@ -3522,7 +3527,7 @@ function LoadMessageDialog({
                   channelId && recent === null && !recentError && /* @__PURE__ */ jsx("p", { className: "shrink-0 text-xs text-muted-foreground", children: "Loading recent messages\u2026" }),
                   channelId && recentError && /* @__PURE__ */ jsx("p", { className: "shrink-0 text-xs text-destructive", children: recentError }),
                   channelId && recent && recent.length === 0 && !recentError && /* @__PURE__ */ 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__ */ 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__ */ 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;
@@ -3580,7 +3585,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__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-                    /* @__PURE__ */ jsx(Label, { htmlFor: "message-link", children: "Message link" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx(Label, { htmlFor: "message-link", children: "Message link" }),
+                      /* @__PURE__ */ jsxs(Tooltip, { children: [
+                        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(Info, { className: "h-3.5 w-3.5" })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: LINK_HELP_TEXT })
+                      ] })
+                    ] }),
                     /* @__PURE__ */ jsx(
                       Input,
                       {
@@ -3602,8 +3621,7 @@ function LoadMessageDialog({
                         autoComplete: "off",
                         spellCheck: false
                       }
-                    ),
-                    /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: LINK_HELP_TEXT })
+                    )
                   ] }),
                   emptyLinkError && /* @__PURE__ */ jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: emptyLinkError })
                 ]
@@ -3701,38 +3719,39 @@ function PreviewPane({
         editableLabel(target.editableVia)
       ] }) : null
     ] }),
+    state.kind === "not-editable" && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: state.reason })
+      ] }),
+      signInUrl && /* @__PURE__ */ jsx(SlackSignInButton, { onClick: () => onSignIn(signInUrl), polling: signInPolling }),
+      verdictBlocks && verdictBlocks.length > 0 && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "self-start",
+          onClick: () => onOpenAsNew(verdictBlocks),
+          children: "Open as a new message instead"
+        }
+      )
+    ] }),
     /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "flex-1", children: state.reason })
-            ] }),
-            signInUrl && /* @__PURE__ */ jsx(SlackSignInButton, { onClick: () => onSignIn(signInUrl), polling: signInPolling }),
-            verdictBlocks && verdictBlocks.length > 0 && /* @__PURE__ */ 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__ */ 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__ */ jsxs("p", { className: "m-auto flex items-center gap-2 text-sm text-muted-foreground", children: [
             /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
             "Looking up that message\u2026"
           ] }),
           state.kind === "empty" && /* @__PURE__ */ 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__ */ jsx("p", { className: "m-auto px-4 text-center text-sm text-muted-foreground", children: "Nothing to preview." }),
           target && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
             SlackMessagePreview,
             {
@@ -3762,6 +3781,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;
@@ -3784,14 +3817,26 @@ function Palette({
   defaultOpenSections = true,
   showSearch = true,
   searchPlaceholder = "Search blocks\u2026",
+  mode = "advanced",
   variant = "aside"
 }) {
   const [query, setQuery] = useState("");
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [prevMode, setPrevMode] = useState(mode);
+  if (prevMode !== mode) {
+    setPrevMode(mode);
+    setAdvancedOpen(false);
+    setQuery("");
+  }
+  const basics = useMemo(() => mode === "simple" ? basicVariants(sections) : [], [mode, sections]);
+  const offersSimple = mode === "simple" && basics.length > 0;
+  const advanced = !offersSimple || advancedOpen;
+  const searchVisible = showSearch && advanced;
   const visibleSections = 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__ */ jsxs(
     "aside",
@@ -3801,38 +3846,72 @@ function Palette({
         isSheet ? "w-full flex-1 bg-background" : "w-72 shrink-0 border-r bg-muted/20"
       ),
       children: [
-        showSearch ? /* @__PURE__ */ jsx(
+        offersSimple || searchVisible ? /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx(
-                Search,
-                {
-                  className: cn(
-                    "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground",
-                    isSheet ? "h-4 w-4" : "h-3.5 w-3.5"
+            children: [
+              offersSimple ? (
+                // Titled row: with the sections gone, simple mode's header would
+                // otherwise be a lone right-aligned link over empty space, and
+                // nothing would name what the rail below it holds.
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "min-w-0 truncate font-medium uppercase tracking-wide text-muted-foreground",
+                        isSheet ? "text-xs" : "text-[11px]"
+                      ),
+                      children: PALETTE_TITLE
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ModeLink,
+                    {
+                      advanced,
+                      isSheet,
+                      onToggle: () => {
+                        setQuery("");
+                        setAdvancedOpen((v) => !v);
+                      }
+                    }
                   )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  type: "search",
-                  value: query,
-                  onChange: (e) => setQuery(e.target.value),
-                  placeholder: searchPlaceholder,
-                  "aria-label": searchPlaceholder,
-                  className: cn(isSheet ? "h-10 pl-8 text-base" : "h-8 pl-7 text-sm")
-                }
-              )
-            ] })
+                ] })
+              ) : null,
+              searchVisible ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx(
+                  Search,
+                  {
+                    className: cn(
+                      "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground",
+                      isSheet ? "h-4 w-4" : "h-3.5 w-3.5"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "search",
+                    value: query,
+                    onChange: (e) => setQuery(e.target.value),
+                    placeholder: searchPlaceholder,
+                    "aria-label": searchPlaceholder,
+                    className: cn(isSheet ? "h-10 pl-8 text-base" : "h-8 pl-7 text-sm")
+                  }
+                )
+              ] }) : null
+            ]
           }
         ) : null,
-        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", isSheet ? "px-2 pb-6" : "p-3"), children: visibleSections.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-xs text-muted-foreground", children: "No blocks match." }) : visibleSections.map((section) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", isSheet ? "px-2 pb-6" : "p-3"), children: !advanced ? (
+          // Simple mode: a flat list, no section headings — with this few
+          // rows the headings would outnumber the blocks under them.
+          basics.map((v) => /* @__PURE__ */ jsx(PaletteItem, { variant: v, onAdd: () => onAddBlock(v.factory()), mode: variant }, v.id))
+        ) : visibleSections.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-xs text-muted-foreground", children: "No blocks match." }) : visibleSections.map((section) => /* @__PURE__ */ jsx(
           PaletteSection,
           {
             section,
@@ -3847,6 +3926,24 @@ function Palette({
     }
   );
 }
+function ModeLink({ advanced, isSheet, onToggle }) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(TooltipContent, { side: "bottom", align: "end", children: advanced ? BASIC_HELP : ADVANCED_HELP })
+  ] }) });
+}
 function PaletteSection({
   section,
   defaultOpen,
@@ -9788,6 +9885,48 @@ function EmptyState({
 function DropIndicator2() {
   return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none relative my-1 h-0.5 w-full rounded-full bg-primary", children: /* @__PURE__ */ 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__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 122.8 122.8",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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: Sun },
   { value: "dark", label: "Dark", Icon: Moon }
@@ -9852,7 +9991,7 @@ function Toolbar2({
     /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 sm:gap-2", children: [
         loadEnabled ? /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: onOpenLoad, "aria-label": loadButtonLabel, children: [
-          /* @__PURE__ */ jsx(MailSearch, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx(SlackMark, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: loadButtonLabel })
         ] }) : null,
         onOpenPalette ? /* @__PURE__ */ jsxs(
@@ -10285,6 +10424,7 @@ function BlockKitchen(props) {
     confirmUpdateLabel,
     palette,
     disabledBlockTypes,
+    paletteMode,
     showPaletteSearch,
     paletteSearchPlaceholder,
     defaultOpenSections,
@@ -10587,6 +10727,7 @@ function BlockKitchen(props) {
                   {
                     onAddBlock: (block) => addBlock(block),
                     sections: paletteSections,
+                    mode: paletteMode,
                     showSearch: showPaletteSearch,
                     searchPlaceholder: paletteSearchPlaceholder,
                     defaultOpenSections
@@ -10639,6 +10780,7 @@ function BlockKitchen(props) {
                     setPaletteOpen(false);
                   },
                   sections: paletteSections,
+                  mode: paletteMode,
                   showSearch: showPaletteSearch,
                   searchPlaceholder: paletteSearchPlaceholder,
                   defaultOpenSections,