@tightknitai/block-kitchen 0.6.1-alpha.0 → 0.8.1

package/dist/index.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
 var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
 var lucideReact = require('lucide-react');
-var React2 = require('react');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var React = require('react');
+var DialogPrimitive = require('@radix-ui/react-dialog');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var slackBlockKitValidator = require('@tightknitai/slack-block-kit-validator');
 var nanoid = require('nanoid');
-var DialogPrimitive = require('@radix-ui/react-dialog');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var LabelPrimitive = require('@radix-ui/react-label');
-var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
@@ -43,9 +43,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
-var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -105,6 +105,66 @@ var defaultPalette = [
             }
           ]
         })
+      },
+      {
+        id: "agents_plan",
+        label: "Plan",
+        factory: () => ({
+          type: "plan",
+          title: "Investigating the issue",
+          tasks: [
+            {
+              type: "task_card",
+              task_id: "task_1",
+              title: "Read the bug report",
+              status: "complete"
+            },
+            {
+              type: "task_card",
+              task_id: "task_2",
+              title: "Reproduce the error locally",
+              status: "in_progress"
+            },
+            {
+              type: "task_card",
+              task_id: "task_3",
+              title: "Identify the root cause",
+              status: "pending"
+            }
+          ]
+        })
+      },
+      {
+        id: "agents_task_card",
+        label: "Task card",
+        factory: () => ({
+          type: "task_card",
+          task_id: "task_1",
+          title: "Summarize the latest release notes",
+          status: "in_progress"
+        })
+      },
+      {
+        id: "agents_task_card_with_sources",
+        label: "Task card with sources",
+        factory: () => ({
+          type: "task_card",
+          task_id: "task_2",
+          title: "Cite supporting docs",
+          status: "complete",
+          sources: [
+            {
+              type: "url",
+              url: "https://example.com/runbook",
+              text: "Runbook"
+            },
+            {
+              type: "url",
+              url: "https://example.com/changelog",
+              text: "Changelog"
+            }
+          ]
+        })
       }
     ]
   },
@@ -660,6 +720,71 @@ var defaultPalette = [
       }
     ]
   },
+  {
+    name: "Alert",
+    icon: lucideReact.Bell,
+    variants: [
+      {
+        id: "alert_default",
+        label: "Default",
+        factory: () => ({
+          type: "alert",
+          text: {
+            type: "mrkdwn",
+            text: "A neutral alert message."
+          }
+        })
+      },
+      {
+        id: "alert_info",
+        label: "Info",
+        factory: () => ({
+          type: "alert",
+          level: "info",
+          text: {
+            type: "mrkdwn",
+            text: "FYI: the build finished in 42 seconds."
+          }
+        })
+      },
+      {
+        id: "alert_warning",
+        label: "Warning",
+        factory: () => ({
+          type: "alert",
+          level: "warning",
+          text: {
+            type: "mrkdwn",
+            text: "Heads up: this action cannot be undone."
+          }
+        })
+      },
+      {
+        id: "alert_error",
+        label: "Error",
+        factory: () => ({
+          type: "alert",
+          level: "error",
+          text: {
+            type: "mrkdwn",
+            text: "Something went wrong. Please try again."
+          }
+        })
+      },
+      {
+        id: "alert_success",
+        label: "Success",
+        factory: () => ({
+          type: "alert",
+          level: "success",
+          text: {
+            type: "mrkdwn",
+            text: "Your changes have been saved."
+          }
+        })
+      }
+    ]
+  },
   {
     name: "Rich Text",
     icon: lucideReact.Pilcrow,
@@ -710,6 +835,43 @@ var defaultPalette = [
       }
     ]
   },
+  {
+    name: "Video",
+    icon: lucideReact.Video,
+    variants: [
+      {
+        id: "video_basic",
+        label: "Basic",
+        factory: () => ({
+          type: "video",
+          alt_text: "A short demo video",
+          title: { type: "plain_text", text: "Product demo", emoji: true },
+          thumbnail_url: "https://placehold.co/600x340?text=Video",
+          video_url: "https://www.youtube.com/embed/dQw4w9WgXcQ"
+        })
+      },
+      {
+        id: "video_with_metadata",
+        label: "With metadata",
+        factory: () => ({
+          type: "video",
+          alt_text: "A short demo video",
+          title: { type: "plain_text", text: "Product demo", emoji: true },
+          title_url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+          thumbnail_url: "https://placehold.co/600x340?text=Video",
+          video_url: "https://www.youtube.com/embed/dQw4w9WgXcQ",
+          author_name: "Acme",
+          description: {
+            type: "plain_text",
+            text: "A short walkthrough of the new release.",
+            emoji: true
+          },
+          provider_name: "YouTube",
+          provider_icon_url: "https://placehold.co/16x16?text=YT"
+        })
+      }
+    ]
+  },
   {
     name: "Card and Carousel",
     icon: lucideReact.GalleryHorizontal,
@@ -1295,15 +1457,69 @@ function labelForBlockType(type) {
       return "Context Actions";
     case "input":
       return "Input";
+    case "video":
+      return "Video";
+    case "plan":
+      return "Plan";
+    case "task_card":
+      return "Task Card";
   }
 }
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var Sheet = DialogPrimitive__namespace.Root;
+var SheetOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: cn(
+      "bk-portal-content fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+SheetOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+var SHEET_SIDE_CLASSES = {
+  right: "inset-y-0 right-0 h-full w-full max-w-md border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+  left: "inset-y-0 left-0 h-full w-full max-w-md border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+  top: "inset-x-0 top-0 w-full border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+  bottom: "inset-x-0 bottom-0 w-full rounded-t-xl border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+};
+var SheetContent = React__namespace.forwardRef(
+  ({ className, children, side = "right", hideClose = false, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.Content,
+      {
+        ref,
+        className: cn(
+          "bk-portal-content fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out",
+          SHEET_SIDE_CLASSES[side],
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          hideClose ? null : /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] })
+);
+SheetContent.displayName = DialogPrimitive__namespace.Content.displayName;
+var SheetTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold text-foreground", className), ...props }));
+SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+var SheetDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+SheetDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var Tooltip = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-var TooltipContent = React2__namespace.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var TooltipContent = React__namespace.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   TooltipPrimitive__namespace.Content,
   {
     ref,
@@ -1317,6 +1533,22 @@ var TooltipContent = React2__namespace.forwardRef(({ className, sideOffset = 6,
   }
 ) }));
 TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
+var MOBILE_BREAKPOINT_PX = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+    return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT_PX - 1}px)`).matches;
+  });
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT_PX - 1}px)`);
+    const onChange = (e) => setIsMobile(e.matches);
+    setIsMobile(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return isMobile;
+}
 
 // src/lib/error-grouping.ts
 function toValidatorSurface(surface) {
@@ -1497,9 +1729,9 @@ function computeValidation(blocks, surface) {
   };
 }
 function useBlockKitValidation(blocks, surface) {
-  const [state, setState] = React2.useState(() => computeValidation(blocks, surface));
-  const isFirstRunRef = React2.useRef(true);
-  React2.useEffect(() => {
+  const [state, setState] = React.useState(() => computeValidation(blocks, surface));
+  const isFirstRunRef = React.useRef(true);
+  React.useEffect(() => {
     if (isFirstRunRef.current) {
       isFirstRunRef.current = false;
       return;
@@ -1518,20 +1750,20 @@ function useBlockKitchenState({
   initialBlocks,
   onChange
 } = {}) {
-  const [blocks, setBlocks] = React2.useState(() => (initialBlocks ?? []).map(wrap));
-  const onChangeRef = React2.useRef(onChange);
-  React2.useEffect(() => {
+  const [blocks, setBlocks] = React.useState(() => (initialBlocks ?? []).map(wrap));
+  const onChangeRef = React.useRef(onChange);
+  React.useEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  const isFirstRunRef = React2.useRef(true);
-  React2.useEffect(() => {
+  const isFirstRunRef = React.useRef(true);
+  React.useEffect(() => {
     if (isFirstRunRef.current) {
       isFirstRunRef.current = false;
       return;
     }
     onChangeRef.current?.(blocks.map((b) => b.block));
   }, [blocks]);
-  const addBlock = React2.useCallback((block, atIndex) => {
+  const addBlock = React.useCallback((block, atIndex) => {
     setBlocks((prev) => {
       const next = [...prev];
       const inserted = wrap(block);
@@ -1540,13 +1772,13 @@ function useBlockKitchenState({
       return next;
     });
   }, []);
-  const updateBlock = React2.useCallback((id, block) => {
+  const updateBlock = React.useCallback((id, block) => {
     setBlocks((prev) => prev.map((b) => b.id === id ? { ...b, block } : b));
   }, []);
-  const removeBlock = React2.useCallback((id) => {
+  const removeBlock = React.useCallback((id) => {
     setBlocks((prev) => prev.filter((b) => b.id !== id));
   }, []);
-  const duplicateBlock = React2.useCallback((id) => {
+  const duplicateBlock = React.useCallback((id) => {
     setBlocks((prev) => {
       const idx = prev.findIndex((b) => b.id === id);
       if (idx === -1) {
@@ -1558,7 +1790,7 @@ function useBlockKitchenState({
       return next;
     });
   }, []);
-  const reorderBlock = React2.useCallback((fromId, toIndex) => {
+  const reorderBlock = React.useCallback((fromId, toIndex) => {
     setBlocks((prev) => {
       const fromIndex = prev.findIndex((b) => b.id === fromId);
       if (fromIndex === -1) {
@@ -1571,7 +1803,7 @@ function useBlockKitchenState({
       return next;
     });
   }, []);
-  const replaceAll = React2.useCallback((newBlocks) => {
+  const replaceAll = React.useCallback((newBlocks) => {
     setBlocks(newBlocks.map(wrap));
   }, []);
   return {
@@ -1877,9 +2109,9 @@ function toCssDeclarations(vars) {
   return entries.map(([name, value]) => `${name}: ${value};`).join(" ");
 }
 function BrandThemeScope({ theme, children }) {
-  const rawId = React2.useId();
-  const scopeId = React2.useMemo(() => `bk-${rawId.replace(/[:]/g, "")}`, [rawId]);
-  const resolved = React2.useMemo(() => resolveBrandTheme(theme), [theme]);
+  const rawId = React.useId();
+  const scopeId = React.useMemo(() => `bk-${rawId.replace(/[:]/g, "")}`, [rawId]);
+  const resolved = React.useMemo(() => resolveBrandTheme(theme), [theme]);
   const hasLight = Object.keys(resolved.light).length > 0;
   const hasDark = Object.keys(resolved.dark).length > 0;
   if (!hasLight && !hasDark) {
@@ -1900,45 +2132,6 @@ function BrandThemeScope({ theme, children }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { "data-bk-scope": scopeId, style: { display: "contents" }, children })
   ] });
 }
-var Sheet = DialogPrimitive__namespace.Root;
-var SheetOverlay = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
-  {
-    ref,
-    className: cn(
-      "bk-portal-content fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-SheetOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var SheetContent = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
-  /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogPrimitive__namespace.Content,
-    {
-      ref,
-      className: cn(
-        "bk-portal-content fixed inset-y-0 right-0 z-50 flex h-full w-full max-w-md flex-col gap-4 border-l bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-SheetContent.displayName = DialogPrimitive__namespace.Content.displayName;
-var SheetTitle = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold text-foreground", className), ...props }));
-SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var SheetDescription = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
-SheetDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 function IssuesSheet({
   open,
   onOpenChange,
@@ -1953,7 +2146,7 @@ function IssuesSheet({
     }
     return { block, idx, errors };
   }).filter(Boolean);
-  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "flex flex-col gap-3 sm:max-w-md", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "flex w-full max-w-full flex-col gap-3 sm:max-w-md", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
         validation.total === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-4 w-4 text-emerald-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4 text-destructive" }),
@@ -2003,16 +2196,16 @@ function JsonDrawer({
   blocks,
   onApply
 }) {
-  const [value, setValue] = React2.useState("");
-  const [parseError, setParseError] = React2.useState(null);
-  const [validationErrors, setValidationErrors] = React2.useState([]);
-  const textareaRef = React2.useRef(null);
-  const gutterRef = React2.useRef(null);
-  const blocksRef = React2.useRef(blocks);
-  React2.useEffect(() => {
+  const [value, setValue] = React.useState("");
+  const [parseError, setParseError] = React.useState(null);
+  const [validationErrors, setValidationErrors] = React.useState([]);
+  const textareaRef = React.useRef(null);
+  const gutterRef = React.useRef(null);
+  const blocksRef = React.useRef(blocks);
+  React.useEffect(() => {
     blocksRef.current = blocks;
   });
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (open) {
       setValue(JSON.stringify(blocksRef.current, null, 2));
       setParseError(null);
@@ -2047,7 +2240,7 @@ function JsonDrawer({
     });
     setValidationErrors(result.valid ? [] : result.errors);
   };
-  const lineCount = React2.useMemo(() => {
+  const lineCount = React.useMemo(() => {
     if (!value) {
       return 1;
     }
@@ -2059,8 +2252,8 @@ function JsonDrawer({
     }
     return n;
   }, [value]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "flex flex-col gap-3 sm:max-w-xl", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "flex w-full max-w-full flex-col gap-3 sm:max-w-xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 pr-8", children: [
       /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Block Kit JSON" }),
       /* @__PURE__ */ jsxRuntime.jsx(SheetDescription, { children: "Edits update the preview as you type. Parse errors show below." })
     ] }),
@@ -2078,6 +2271,7 @@ function JsonDrawer({
         "textarea",
         {
           ref: textareaRef,
+          "aria-label": "Block Kit JSON",
           value,
           onChange: (e) => handleChange(e.target.value),
           onScroll: (e) => {
@@ -2103,7 +2297,7 @@ function JsonDrawer({
     ] })
   ] }) });
 }
-var Input = React2__namespace.forwardRef(
+var Input = React__namespace.forwardRef(
   ({ className, type, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -2150,51 +2344,82 @@ function Palette({
   sections,
   defaultOpenSections = true,
   showSearch = true,
-  searchPlaceholder = "Search blocks\u2026"
+  searchPlaceholder = "Search blocks\u2026",
+  variant = "aside"
 }) {
-  const [query, setQuery] = React2.useState("");
-  const visibleSections = React2.useMemo(
+  const [query, setQuery] = React.useState("");
+  const visibleSections = React.useMemo(
     () => showSearch ? filterSections(sections, query) : sections,
     [sections, query, showSearch]
   );
   const queryActive = showSearch && query.trim().length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "flex min-h-0 w-72 shrink-0 flex-col overflow-x-hidden overflow-y-auto border-r bg-muted/20", children: [
-    showSearch ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 border-b bg-muted/20 px-3 pt-3 pb-2 backdrop-blur", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          type: "search",
-          value: query,
-          onChange: (e) => setQuery(e.target.value),
-          placeholder: searchPlaceholder,
-          "aria-label": searchPlaceholder,
-          className: "h-8 pl-7 text-sm"
-        }
-      )
-    ] }) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col 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(
-      PaletteSection,
-      {
-        section,
-        defaultOpen: isDefaultOpen(section.name, defaultOpenSections),
-        forceOpen: queryActive,
-        onAddBlock
-      },
-      section.name
-    )) })
-  ] });
+  const isSheet = variant === "sheet";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex min-h-0 flex-col overflow-x-hidden overflow-y-auto",
+        isSheet ? "w-full flex-1 bg-background" : "w-72 shrink-0 border-r bg-muted/20"
+      ),
+      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: [
+              /* @__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,
+        /* @__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(
+          PaletteSection,
+          {
+            section,
+            defaultOpen: isDefaultOpen(section.name, defaultOpenSections),
+            forceOpen: queryActive,
+            onAddBlock,
+            variant
+          },
+          section.name
+        )) })
+      ]
+    }
+  );
 }
 function PaletteSection({
   section,
   defaultOpen,
   forceOpen,
-  onAddBlock
+  onAddBlock,
+  variant = "aside"
 }) {
-  const [open, setOpen] = React2.useState(defaultOpen);
+  const [open, setOpen] = React.useState(defaultOpen);
   const Icon = section.icon;
   const isOpen = open || forceOpen;
   const Caret = isOpen ? lucideReact.ChevronDown : lucideReact.ChevronRight;
+  const isSheet = variant === "sheet";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-col first:mt-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -2202,21 +2427,54 @@ function PaletteSection({
         type: "button",
         "aria-expanded": isOpen,
         onClick: () => setOpen((v) => !v),
-        className: "flex cursor-pointer appearance-none items-center gap-1.5 rounded border-0 bg-transparent px-1 py-1 text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        className: cn(
+          "flex cursor-pointer appearance-none items-center gap-1.5 rounded border-0 bg-transparent text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          isSheet ? "px-2 py-2 min-h-10" : "px-1 py-1"
+        ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] font-semibold text-foreground", children: section.name }),
-          /* @__PURE__ */ jsxRuntime.jsx(Caret, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn("shrink-0 text-muted-foreground", isSheet ? "h-5 w-5" : "h-4 w-4") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn("min-w-0 flex-1 truncate font-semibold text-foreground", isSheet ? "text-sm" : "text-[13px]"),
+              children: section.name
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Caret, { className: cn("shrink-0 text-muted-foreground", isSheet ? "h-4 w-4" : "h-3.5 w-3.5") })
         ]
       }
     ),
-    isOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex flex-col", children: section.variants.map((variant) => /* @__PURE__ */ jsxRuntime.jsx(PaletteItem, { variant, onAdd: () => onAddBlock(variant.factory()) }, variant.id)) }) : null
+    isOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex flex-col", children: section.variants.map((v) => /* @__PURE__ */ jsxRuntime.jsx(PaletteItem, { variant: v, onAdd: () => onAddBlock(v.factory()), mode: variant }, v.id)) }) : null
   ] });
 }
-function PaletteItem({ variant, onAdd }) {
+function PaletteItem({
+  variant,
+  onAdd,
+  mode = "aside"
+}) {
   const { attributes, listeners, setNodeRef, setActivatorNodeRef, isDragging } = core.useDraggable({
     id: `${PALETTE_DRAG_PREFIX}${variant.id}`
   });
+  const isSheet = mode === "sheet";
+  if (isSheet) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: setNodeRef,
+        type: "button",
+        "aria-label": `Add ${variant.label}`,
+        onClick: onAdd,
+        className: cn(
+          "group flex w-full min-h-11 cursor-pointer items-center gap-3 rounded-md border border-transparent bg-background px-3 py-2 text-left text-sm font-medium text-foreground transition-colors hover:border-border hover:bg-accent active:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          isDragging && "opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: variant.label })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2278,7 +2536,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React2__namespace.forwardRef(
+var Button = React__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
@@ -2287,7 +2545,7 @@ var Button = React2__namespace.forwardRef(
 Button.displayName = "Button";
 var Dialog = DialogPrimitive__namespace.Root;
 var DialogPortal = DialogPrimitive__namespace.Portal;
-var DialogOverlay = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     ref,
@@ -2299,7 +2557,7 @@ var DialogOverlay = React2__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+var DialogContent = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     DialogPrimitive__namespace.Content,
@@ -2327,7 +2585,7 @@ function DialogHeader({ className, ...props }) {
 function DialogFooter({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
 }
-var DialogTitle = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Title,
   {
     ref,
@@ -2336,9 +2594,9 @@ var DialogTitle = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var DialogDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
-var Label = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   LabelPrimitive__namespace.Root,
   {
     ref,
@@ -2357,22 +2615,22 @@ function SendDialog({
   errorCount,
   onShowIssues
 }) {
-  const [channels, setChannels] = React2.useState(null);
-  const [channelsError, setChannelsError] = React2.useState(null);
-  const [channelId, setChannelId] = React2.useState("");
-  const [userStatus, setUserStatus] = React2.useState(null);
-  const [sendAs, setSendAs] = React2.useState("bot");
-  const [status, setStatus] = React2.useState({ kind: "idle" });
-  const loadChannelsRef = React2.useRef(loadChannels);
-  const loadSendAsUserStatusRef = React2.useRef(loadSendAsUserStatus);
-  React2.useEffect(() => {
+  const [channels, setChannels] = React.useState(null);
+  const [channelsError, setChannelsError] = React.useState(null);
+  const [channelId, setChannelId] = React.useState("");
+  const [userStatus, setUserStatus] = React.useState(null);
+  const [sendAs, setSendAs] = React.useState("bot");
+  const [status, setStatus] = React.useState({ kind: "idle" });
+  const loadChannelsRef = React.useRef(loadChannels);
+  const loadSendAsUserStatusRef = React.useRef(loadSendAsUserStatus);
+  React.useEffect(() => {
     loadChannelsRef.current = loadChannels;
     loadSendAsUserStatusRef.current = loadSendAsUserStatus;
   });
-  const refreshSendAsUser = React2.useCallback(() => {
+  const refreshSendAsUser = React.useCallback(() => {
     loadSendAsUserStatusRef.current().then(setUserStatus).catch(() => setUserStatus({ canSendAsUser: false }));
   }, []);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!open) {
       return;
     }
@@ -2400,7 +2658,7 @@ function SendDialog({
       cancelled = true;
     };
   }, [open, refreshSendAsUser]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!open) {
       return;
     }
@@ -2437,7 +2695,7 @@ function SendDialog({
       });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-[calc(100vw-1.5rem)] max-w-lg rounded-lg", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Send to Slack" }),
       /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Pick a channel and choose who to post as." })
@@ -2535,7 +2793,7 @@ function SendDialog({
 }
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React2__namespace.forwardRef(({ className, align = "start", sideOffset = 8, collisionPadding = 16, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var PopoverContent = React__namespace.forwardRef(({ className, align = "start", sideOffset = 8, collisionPadding = 16, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive__namespace.Content,
   {
     ref,
@@ -2551,9 +2809,9 @@ var PopoverContent = React2__namespace.forwardRef(({ className, align = "start",
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
-var RadioGroup = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("grid gap-2", className), ...props, ref }));
+var RadioGroup = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("grid gap-2", className), ...props, ref }));
 RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
-var RadioGroupItem = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var RadioGroupItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   RadioGroupPrimitive__namespace.Item,
   {
     ref,
@@ -2685,7 +2943,7 @@ function ActionsEditor({ block, onChange }) {
     ] })
   ] });
 }
-var Textarea = React2__namespace.forwardRef(
+var Textarea = React__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
@@ -3715,7 +3973,14 @@ function PlainTextInputEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PlaceholderField,
+      {
+        element,
+        onChange,
+        example: element.multiline ? "e.g. Enter a longer description" : "e.g. Enter some text"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       EditorField,
       {
@@ -3777,7 +4042,7 @@ function PlainTextInputEditor({
 function EmailInputEditor({ element, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. name@example.com" }),
     /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Initial value", help: "Pre-filled email address.", htmlFor: "email-initial", children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -3792,7 +4057,7 @@ function EmailInputEditor({ element, onChange }) {
 function URLInputEditor({ element, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. https://example.com" }),
     /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Initial value", help: "Pre-filled URL.", htmlFor: "url-initial", children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -3807,7 +4072,7 @@ function URLInputEditor({ element, onChange }) {
 function NumberInputEditor({ element, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. 0" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       CheckboxField,
       {
@@ -3860,7 +4125,7 @@ function NumberInputEditor({ element, onChange }) {
 function DatepickerEditor({ element, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Select a date" }),
     /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Initial date", help: "YYYY-MM-DD. Pre-selected on load.", htmlFor: "date-initial", children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -3875,7 +4140,7 @@ function DatepickerEditor({ element, onChange }) {
 function TimepickerEditor({ element, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Select a time" }),
     /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Initial time", help: "HH:mm in 24-hour clock.", htmlFor: "time-initial", children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -3928,7 +4193,7 @@ function DateTimepickerEditor({
 function StaticSelectEditor({ element, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Choose one" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       PlainTextOptionsField,
       {
@@ -3944,7 +4209,7 @@ function MultiStaticSelectEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Choose one or more" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       PlainTextOptionsField,
       {
@@ -3958,7 +4223,7 @@ function MultiStaticSelectEditor({
 function UsersSelectEditor({ element, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Select a user" }),
     /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Initial user ID", help: "Optional. Pre-selects this Slack user.", htmlFor: "users-initial", children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -3976,7 +4241,7 @@ function MultiUsersSelectEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Select users" }),
     /* @__PURE__ */ jsxRuntime.jsx(MaxSelectedField, { element, onChange })
   ] });
 }
@@ -3986,7 +4251,7 @@ function ChannelsSelectEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Select a channel" }),
     /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Initial channel ID", help: "Optional. Pre-selects this channel.", htmlFor: "channels-initial", children: /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
@@ -4007,7 +4272,7 @@ function MultiChannelsSelectEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Select channels" }),
     /* @__PURE__ */ jsxRuntime.jsx(MaxSelectedField, { element, onChange })
   ] });
 }
@@ -4017,7 +4282,7 @@ function ConversationsSelectEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Select a conversation" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       EditorField,
       {
@@ -4059,7 +4324,7 @@ function MultiConversationsSelectEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Select conversations" }),
     /* @__PURE__ */ jsxRuntime.jsx(MaxSelectedField, { element, onChange }),
     /* @__PURE__ */ jsxRuntime.jsx(
       CheckboxField,
@@ -4082,7 +4347,7 @@ function ExternalSelectEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Choose one" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       EditorField,
       {
@@ -4112,7 +4377,7 @@ function MultiExternalSelectEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Choose one or more" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       EditorField,
       {
@@ -4167,7 +4432,7 @@ function RichTextInputEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ActionIdField, { element, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(PlaceholderField, { element, onChange, example: "e.g. Type something" }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "Edit the initial rich-text value via the View JSON drawer." })
   ] });
 }
@@ -4236,13 +4501,14 @@ function ActionIdField({
     }
   );
 }
-function PlaceholderField({ element, onChange }) {
+function PlaceholderField({ element, onChange, example = "e.g. Type a hint" }) {
   return /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Placeholder", help: "Greyed-out hint shown when the input is empty.", htmlFor: "placeholder", children: /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
       id: "placeholder",
       value: element.placeholder?.text ?? "",
       maxLength: 150,
+      placeholder: example,
       onChange: (e) => onChange({
         ...element,
         placeholder: e.target.value ? { type: "plain_text", text: e.target.value, emoji: true } : void 0
@@ -4390,6 +4656,96 @@ function MarkdownEditor({ block, onChange }) {
     }
   );
 }
+var STATUSES = ["pending", "in_progress", "complete", "error"];
+function PlanEditor({ block, onChange }) {
+  const titleText = typeof block.title === "string" ? block.title : block.title?.text ?? "";
+  const tasks = block.tasks ?? [];
+  const updateTask = (idx, change) => {
+    onChange({
+      ...block,
+      tasks: tasks.map((t, i) => i === idx ? { ...t, ...change } : t)
+    });
+  };
+  const removeTask = (idx) => {
+    const next = tasks.filter((_, i) => i !== idx);
+    onChange({ ...block, tasks: next.length > 0 ? next : void 0 });
+  };
+  const addTask = () => {
+    onChange({
+      ...block,
+      tasks: [
+        ...tasks,
+        {
+          type: "task_card",
+          task_id: `task_${nanoid.nanoid(6)}`,
+          title: "New step",
+          status: "pending"
+        }
+      ]
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Heading shown above the task list.", htmlFor: "plan-title", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "plan-title",
+        value: titleText,
+        placeholder: "e.g. Investigating the issue",
+        onChange: (e) => onChange({ ...block, title: e.target.value })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded-md border bg-muted/20 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: "Tasks" }),
+      tasks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "No tasks. Add one to render a checklist beneath the title." }) : null,
+      tasks.map((task, idx) => {
+        const status = task.status ?? "pending";
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded border bg-background p-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+              "Task ",
+              idx + 1
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Remove task",
+                onClick: () => removeTask(idx),
+                className: "rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", htmlFor: `plan-task-title-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              id: `plan-task-title-${idx}`,
+              value: task.title,
+              placeholder: "e.g. Reproduce the error locally",
+              onChange: (e) => updateTask(idx, { title: e.target.value })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Status", children: /* @__PURE__ */ jsxRuntime.jsx(
+            RadioGroup,
+            {
+              value: status,
+              onValueChange: (v) => updateTask(idx, { status: v }),
+              className: "flex flex-row flex-wrap gap-3",
+              children: STATUSES.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: s, id: `plan-task-status-${idx}-${s}` }),
+                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `plan-task-status-${idx}-${s}`, className: "text-xs capitalize", children: s.replace("_", " ") })
+              ] }, s))
+            }
+          ) })
+        ] }, idx);
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addTask, className: "self-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+        " Add task"
+      ] })
+    ] })
+  ] });
+}
 
 // src/lib/rich-text-tiptap.ts
 var SUPPORTED_BLOCK_KINDS = /* @__PURE__ */ new Set([
@@ -5275,8 +5631,8 @@ function LossyBanner({ reasons }) {
   ] });
 }
 function RichTextWysiwygEditor({ block, onChange }) {
-  const lastEmittedRef = React2.useRef(null);
-  const handleUpdate = React2.useCallback(
+  const lastEmittedRef = React.useRef(null);
+  const handleUpdate = React.useCallback(
     (editor2) => {
       const next = proseMirrorToRichText(editor2.getJSON());
       lastEmittedRef.current = next;
@@ -5314,7 +5670,7 @@ function RichTextWysiwygEditor({ block, onChange }) {
     },
     onUpdate: ({ editor: ed }) => handleUpdate(ed)
   });
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!editor) {
       return;
     }
@@ -5463,10 +5819,10 @@ function Divider() {
 function LinkPopover({ editor }) {
   const active = editor.isActive("link");
   const currentHref = editor.getAttributes("link").href ?? "";
-  const [open, setOpen] = React2.useState(false);
-  const [url, setUrl] = React2.useState(currentHref);
-  const [error, setError] = React2.useState(null);
-  React2.useEffect(() => {
+  const [open, setOpen] = React.useState(false);
+  const [url, setUrl] = React.useState(currentHref);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
     if (open) {
       setUrl(currentHref);
       setError(null);
@@ -5880,21 +6236,260 @@ function TableEditor({ block, onChange }) {
     ] })
   ] });
 }
-function BlockEditor({
-  block,
-  errors,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-sm font-semibold text-foreground", children: [
-      "Edit ",
-      labelForBlockType(block.type)
-    ] }) }),
-    errors && errors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5 rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: errors.map((err, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: err }, i)) }) : null,
-    dispatch(block, onChange)
-  ] });
-}
-function dispatch(block, onChange) {
+var STATUSES2 = ["pending", "in_progress", "complete", "error"];
+function TaskCardEditor({ block, onChange }) {
+  const status = block.status ?? "pending";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Short label shown at the top of the card.", htmlFor: "task-card-title", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "task-card-title",
+        value: block.title,
+        placeholder: "e.g. Reproduce the bug locally",
+        onChange: (e) => onChange({ ...block, title: e.target.value })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EditorField,
+      {
+        label: "Task ID",
+        help: "Stable identifier you can reference from interaction payloads.",
+        htmlFor: "task-card-id",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            id: "task-card-id",
+            value: block.task_id,
+            placeholder: "e.g. task_1",
+            onChange: (e) => onChange({ ...block, task_id: e.target.value })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Status", help: "Slack renders a matching status chip on the card.", children: /* @__PURE__ */ jsxRuntime.jsx(
+      RadioGroup,
+      {
+        value: status,
+        onValueChange: (v) => onChange({ ...block, status: v }),
+        className: "flex flex-row flex-wrap gap-3",
+        children: STATUSES2.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: s, id: `task-card-status-${s}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `task-card-status-${s}`, className: "text-xs capitalize", children: s.replace("_", " ") })
+        ] }, s))
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SourcesField,
+      {
+        sources: block.sources ?? [],
+        onChange: (next) => onChange({ ...block, sources: next.length > 0 ? next : void 0 })
+      }
+    )
+  ] });
+}
+function SourcesField({
+  sources,
+  onChange
+}) {
+  const update = (idx, change) => {
+    onChange(sources.map((s, i) => i === idx ? { ...s, ...change } : s));
+  };
+  const removeAt = (idx) => onChange(sources.filter((_, i) => i !== idx));
+  const addSource = () => {
+    onChange([...sources, { type: "url", url: "", text: "" }]);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded-md border bg-muted/20 p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: "Sources" }),
+    sources.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "No sources. Add one to cite a document or link beneath the card." }) : null,
+    sources.map((src, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded border bg-background p-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+          "Source ",
+          idx + 1
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Remove source",
+            onClick: () => removeAt(idx),
+            className: "rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Label", htmlFor: `task-card-source-text-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: `task-card-source-text-${idx}`,
+          value: src.text,
+          placeholder: "e.g. Runbook",
+          onChange: (e) => update(idx, { text: e.target.value })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "URL", htmlFor: `task-card-source-url-${idx}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: `task-card-source-url-${idx}`,
+          type: "url",
+          value: src.url,
+          placeholder: "e.g. https://example.com/runbook",
+          onChange: (e) => update(idx, { url: e.target.value })
+        }
+      ) })
+    ] }, idx)),
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: addSource, className: "self-start", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+      " Add source"
+    ] })
+  ] });
+}
+function VideoEditor({ block, onChange }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Title", help: "Up to 199 characters. Shown above the embedded player.", htmlFor: "video-title", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "video-title",
+        value: block.title?.text ?? "",
+        maxLength: 199,
+        placeholder: "e.g. Product demo",
+        onChange: (e) => onChange({
+          ...block,
+          title: { type: "plain_text", text: e.target.value, emoji: true }
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Alt text", help: "Tooltip for the video. Required for accessibility.", htmlFor: "video-alt", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "video-alt",
+        value: block.alt_text ?? "",
+        placeholder: "e.g. A short walkthrough of the new release",
+        onChange: (e) => onChange({ ...block, alt_text: e.target.value })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EditorField,
+      {
+        label: "Video URL",
+        help: "HTTPS embed URL. Must match an unfurl domain on your Slack app.",
+        htmlFor: "video-url",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            id: "video-url",
+            type: "url",
+            value: block.video_url ?? "",
+            placeholder: "e.g. https://www.youtube.com/embed/dQw4w9WgXcQ",
+            onChange: (e) => onChange({ ...block, video_url: e.target.value })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Thumbnail URL", help: "Preview image shown before the video loads.", htmlFor: "video-thumbnail", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "video-thumbnail",
+        type: "url",
+        value: block.thumbnail_url ?? "",
+        placeholder: "e.g. https://example.com/thumb.png",
+        onChange: (e) => onChange({ ...block, thumbnail_url: e.target.value })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EditorField,
+      {
+        label: "Title link URL",
+        help: "Optional. HTTPS link the title text opens (the non-embed page).",
+        htmlFor: "video-title-url",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            id: "video-title-url",
+            type: "url",
+            value: block.title_url ?? "",
+            placeholder: "e.g. https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+            onChange: (e) => onChange({ ...block, title_url: e.target.value || void 0 })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Description", help: "Optional. Up to 199 characters.", htmlFor: "video-description", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Textarea,
+      {
+        id: "video-description",
+        value: block.description?.text ?? "",
+        maxLength: 199,
+        rows: 2,
+        placeholder: "e.g. A short walkthrough of the new release.",
+        onChange: (e) => onChange({
+          ...block,
+          description: e.target.value ? { type: "plain_text", text: e.target.value, emoji: true } : void 0
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(EditorField, { label: "Author name", help: "Optional. Up to 49 characters.", htmlFor: "video-author", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        id: "video-author",
+        value: block.author_name ?? "",
+        maxLength: 49,
+        placeholder: "e.g. Acme",
+        onChange: (e) => onChange({ ...block, author_name: e.target.value || void 0 })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EditorField,
+      {
+        label: "Provider name",
+        help: "Optional. Originating service (e.g. YouTube, Vimeo).",
+        htmlFor: "video-provider-name",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            id: "video-provider-name",
+            value: block.provider_name ?? "",
+            placeholder: "e.g. YouTube",
+            onChange: (e) => onChange({ ...block, provider_name: e.target.value || void 0 })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      EditorField,
+      {
+        label: "Provider icon URL",
+        help: "Optional. Small icon shown next to the provider name.",
+        htmlFor: "video-provider-icon",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            id: "video-provider-icon",
+            type: "url",
+            value: block.provider_icon_url ?? "",
+            placeholder: "e.g. https://example.com/youtube-favicon.png",
+            onChange: (e) => onChange({ ...block, provider_icon_url: e.target.value || void 0 })
+          }
+        )
+      }
+    )
+  ] });
+}
+function BlockEditor({
+  block,
+  errors,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-sm font-semibold text-foreground", children: [
+      "Edit ",
+      labelForBlockType(block.type)
+    ] }) }),
+    errors && errors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5 rounded-md border border-destructive/30 bg-destructive/5 p-2 text-xs text-destructive", children: errors.map((err, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: err }, i)) }) : null,
+    dispatch(block, onChange)
+  ] });
+}
+function dispatch(block, onChange) {
   switch (block.type) {
     case "section":
       return /* @__PURE__ */ jsxRuntime.jsx(SectionEditor, { block, onChange: (next) => onChange(next) });
@@ -5924,6 +6519,12 @@ function dispatch(block, onChange) {
       return /* @__PURE__ */ jsxRuntime.jsx(ContextActionsEditor, { block, onChange: (next) => onChange(next) });
     case "input":
       return /* @__PURE__ */ jsxRuntime.jsx(InputEditor, { block, onChange: (next) => onChange(next) });
+    case "video":
+      return /* @__PURE__ */ jsxRuntime.jsx(VideoEditor, { block, onChange: (next) => onChange(next) });
+    case "plan":
+      return /* @__PURE__ */ jsxRuntime.jsx(PlanEditor, { block, onChange: (next) => onChange(next) });
+    case "task_card":
+      return /* @__PURE__ */ jsxRuntime.jsx(TaskCardEditor, { block, onChange: (next) => onChange(next) });
     default:
       return null;
   }
@@ -5933,9 +6534,9 @@ function SlackBlockPreview({
   hooks,
   theme = "light"
 }) {
-  const rootRef = React2.useRef(null);
-  const safeBlock = React2.useMemo(() => sanitizeBlock(block), [block]);
-  React2.useEffect(() => {
+  const rootRef = React.useRef(null);
+  const safeBlock = React.useMemo(() => sanitizeBlock(block), [block]);
+  React.useEffect(() => {
     const root = rootRef.current;
     if (!root) return;
     for (const wrapper of root.querySelectorAll(
@@ -5996,7 +6597,10 @@ var BLOCK_TYPE_LABELS = {
   card: "Card",
   carousel: "Carousel",
   context_actions: "Context Actions",
-  input: "Input"
+  input: "Input",
+  video: "Video",
+  plan: "Plan",
+  task_card: "Task Card"
 };
 function BlockRow({
   builderBlock,
@@ -6008,6 +6612,9 @@ function BlockRow({
   onUpdate,
   onDuplicate,
   onDelete,
+  index,
+  total,
+  onReorder,
   isPaletteDrag = false
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = sortable.useSortable({
@@ -6020,154 +6627,253 @@ function BlockRow({
   };
   const hasErrors = !!errors && errors.length > 0;
   const isRichText = builderBlock.block.type === "rich_text";
-  const [inlineEditing, setInlineEditing] = React2.useState(false);
+  const [inlineEditing, setInlineEditing] = React.useState(false);
   const showDropIndicator = isPaletteDrag && isOver;
   const preview = /* @__PURE__ */ jsxRuntime.jsx(SlackBlockPreview, { block: builderBlock.block, hooks: previewHooks, theme: previewTheme });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setNodeRef, style, className: cn("group relative hover:z-10", isDragging && "opacity-40"), children: [
-    showDropIndicator ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "aria-hidden": "true",
-        className: "-top-1 pointer-events-none absolute right-0 left-0 z-20 h-0.5 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)]" })
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
-      isRichText && inlineEditing ? /* @__PURE__ */ jsxRuntime.jsx(
-        RichTextInlineEditor,
-        {
-          block: builderBlock.block,
-          onSave: (next) => {
-            onUpdate(builderBlock.id, next);
-            setInlineEditing(false);
-          },
-          onCancel: () => setInlineEditing(false)
-        }
-      ) : isRichText ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Edit block",
-          onClick: () => setInlineEditing(true),
-          ...attributes,
-          ...listeners,
-          className: cn(
-            "block w-full cursor-grab rounded-sm border-0 bg-transparent p-0 text-left transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
-            hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
-          ),
-          children: preview
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn("group relative mb-2 last:mb-0 hover:z-10 md:mb-0", isDragging && "opacity-40"),
+      children: [
+        showDropIndicator ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            role: "button",
-            tabIndex: 0,
-            "aria-label": "Edit block",
-            ...sortableA11yAttrs,
-            ...listeners,
-            className: cn(
-              "block w-full cursor-grab rounded-sm transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
-              hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
-            ),
-            children: preview
+            "aria-hidden": "true",
+            className: "-top-1 pointer-events-none absolute right-0 left-0 z-20 h-0.5 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)]" })
           }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[32rem]", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
-          BlockEditor,
-          {
-            block: builderBlock.block,
-            errors,
-            onChange: (next) => onUpdate(builderBlock.id, next)
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "-translate-x-1/2 pointer-events-none absolute bottom-full left-1/2 z-10 bg-background px-1.5 text-[11px] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100", children: BLOCK_TYPE_LABELS[builderBlock.block.type] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "absolute -top-3 right-2 z-10 flex items-center gap-0.5 rounded-md border bg-background p-0.5 shadow-sm transition-opacity",
-            hasErrors ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-          ),
-          children: [
-            hasErrors ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `Show ${errors.length} validation ${errors.length === 1 ? "issue" : "issues"}`,
-                  onClick: () => onOpenChange?.(true),
-                  className: "flex h-6 w-6 items-center justify-center rounded text-destructive hover:bg-destructive/10",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3.5 w-3.5" })
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", align: "end", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex flex-col gap-0.5", children: [
-                errors.slice(0, 4).map((err, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: err }, i)),
-                errors.length > 4 ? /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "text-muted-foreground", children: [
-                  "and ",
-                  errors.length - 4,
-                  " more"
-                ] }) : null
-              ] }) })
-            ] }) : null,
-            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": "Edit block",
-                  onClick: () => {
-                    if (isRichText) {
-                      setInlineEditing(true);
-                    } else {
-                      onOpenChange?.(true);
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+          isRichText && inlineEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+            RichTextInlineEditor,
+            {
+              block: builderBlock.block,
+              onSave: (next) => {
+                onUpdate(builderBlock.id, next);
+                setInlineEditing(false);
+              },
+              onCancel: () => setInlineEditing(false)
+            }
+          ) : isRichText ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Edit block",
+              onClick: () => setInlineEditing(true),
+              ...attributes,
+              ...listeners,
+              className: cn(
+                "block w-full cursor-grab rounded-sm border-0 bg-transparent p-0 text-left transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
+                hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
+              ),
+              children: preview
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": "Edit block",
+                ...sortableA11yAttrs,
+                ...listeners,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onOpenChange?.(!isOpen);
+                  }
+                },
+                className: cn(
+                  "block w-full cursor-grab rounded-sm transition-shadow hover:shadow-md focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing",
+                  hasErrors ? "ring-1 ring-destructive/60 hover:ring-destructive" : "hover:ring-1 hover:ring-border"
+                ),
+                children: preview
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[min(32rem,calc(100vw-1.5rem))] sm:w-[32rem]", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+              BlockEditor,
+              {
+                block: builderBlock.block,
+                errors,
+                onChange: (next) => onUpdate(builderBlock.id, next)
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "-translate-x-1/2 pointer-events-none absolute bottom-full left-1/2 z-10 hidden bg-background px-1.5 text-[11px] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 md:block", children: BLOCK_TYPE_LABELS[builderBlock.block.type] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                // Hidden on mobile in favor of the inline row below; on desktop
+                // reveal on hover, on focus inside the row (so Tab-stops on the
+                // floating buttons themselves keep them visible), and when there
+                // are validation errors worth surfacing immediately.
+                "absolute -top-3 right-2 z-10 hidden items-center gap-0.5 rounded-md border bg-background p-0.5 shadow-sm transition-opacity md:flex",
+                hasErrors ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"
+              ),
+              children: [
+                hasErrors ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Show ${errors.length} validation ${errors.length === 1 ? "issue" : "issues"}`,
+                      onClick: () => onOpenChange?.(true),
+                      className: "flex h-6 w-6 items-center justify-center rounded text-destructive hover:bg-destructive/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3.5 w-3.5" })
                     }
-                  },
-                  className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" })
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Edit" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": "Duplicate block",
-                  onClick: () => onDuplicate(builderBlock.id),
-                  className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" })
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Duplicate" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": "Delete block",
-                  onClick: () => onDelete(builderBlock.id),
-                  className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Delete" })
-            ] })
-          ]
-        }
-      )
-    ] })
-  ] });
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", align: "end", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex flex-col gap-0.5", children: [
+                    errors.slice(0, 4).map((err, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: err }, i)),
+                    errors.length > 4 ? /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "text-muted-foreground", children: [
+                      "and ",
+                      errors.length - 4,
+                      " more"
+                    ] }) : null
+                  ] }) })
+                ] }) : null,
+                onReorder && typeof index === "number" && typeof total === "number" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Move block up",
+                        disabled: index === 0,
+                        onClick: () => onReorder(builderBlock.id, index - 1),
+                        className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3.5 w-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Move up" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Move block down",
+                        disabled: index >= total - 1,
+                        onClick: () => onReorder(builderBlock.id, index + 1),
+                        className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3.5 w-3.5" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Move down" })
+                  ] })
+                ] }) : null,
+                /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Edit block",
+                      onClick: () => {
+                        if (isRichText) {
+                          setInlineEditing(true);
+                        } else {
+                          onOpenChange?.(true);
+                        }
+                      },
+                      className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Edit" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Duplicate block",
+                      onClick: () => onDuplicate(builderBlock.id),
+                      className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Duplicate" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Delete block",
+                      onClick: () => onDelete(builderBlock.id),
+                      className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", children: "Delete" })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center justify-between gap-2 rounded-md border border-dashed bg-muted/40 px-2 py-1 md:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] font-medium text-muted-foreground", children: BLOCK_TYPE_LABELS[builderBlock.block.type] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            hasErrors ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Show ${errors.length} validation ${errors.length === 1 ? "issue" : "issues"}`,
+                onClick: () => onOpenChange?.(true),
+                className: "flex h-9 w-9 items-center justify-center rounded text-destructive hover:bg-destructive/10",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-4 w-4" })
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Edit block",
+                onClick: () => {
+                  if (isRichText) {
+                    setInlineEditing(true);
+                  } else {
+                    onOpenChange?.(true);
+                  }
+                },
+                className: "flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Duplicate block",
+                onClick: () => onDuplicate(builderBlock.id),
+                className: "flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Delete block",
+                onClick: () => onDelete(builderBlock.id),
+                className: "flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function RichTextInlineEditor({
   block,
   onSave,
   onCancel
 }) {
-  const [draft, setDraft] = React2.useState(block);
+  const [draft, setDraft] = React.useState(block);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -6201,7 +6907,9 @@ function Surface({
   onUpdate,
   onDuplicate,
   onDelete,
-  isPaletteDrag = false
+  onReorder,
+  isPaletteDrag = false,
+  onOpenPalette
 }) {
   const { setNodeRef, isOver } = core.useDroppable({ id: SURFACE_DROPPABLE_ID });
   const isDark = previewTheme === "dark";
@@ -6211,13 +6919,13 @@ function Surface({
     {
       ref: setNodeRef,
       className: cn(
-        "flex min-h-[240px] flex-col px-5 py-2 transition-colors",
+        "flex min-h-[180px] flex-col px-3 py-2 transition-colors sm:min-h-[240px] sm:px-5",
         isDark ? "bg-[#1a1d21]" : "bg-white",
         isPaletteDrag && (isDark ? "bg-[#22262c] outline-2 outline-primary/40 -outline-offset-2 outline-dashed" : "bg-[#f5f8ff] outline-2 outline-primary/40 -outline-offset-2 outline-dashed"),
         isPaletteDrag && isOver && (isDark ? "bg-[#2c3036]" : "bg-[#eaf0ff]")
       ),
-      children: blocks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { isDark, isPaletteDrag, isOver }) : /* @__PURE__ */ jsxRuntime.jsxs(sortable.SortableContext, { items: blocks.map((b) => b.id), strategy: sortable.verticalListSortingStrategy, children: [
-        blocks.map((block) => /* @__PURE__ */ jsxRuntime.jsx(
+      children: blocks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { isDark, isPaletteDrag, isOver, onOpenPalette }) : /* @__PURE__ */ jsxRuntime.jsxs(sortable.SortableContext, { items: blocks.map((b) => b.id), strategy: sortable.verticalListSortingStrategy, children: [
+        blocks.map((block, idx) => /* @__PURE__ */ jsxRuntime.jsx(
           BlockRow,
           {
             builderBlock: block,
@@ -6229,6 +6937,9 @@ function Surface({
             onUpdate,
             onDuplicate,
             onDelete,
+            index: idx,
+            total: blocks.length,
+            onReorder,
             isPaletteDrag
           },
           block.id
@@ -6237,7 +6948,14 @@ function Surface({
       ] })
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-1 flex-col p-6", isDark ? "bg-[#0e0f12]" : "bg-[#f4f4f4]"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-2xl", children: previewSurface === "modal" ? /* @__PURE__ */ jsxRuntime.jsx(ModalFrame, { isDark, children: blocksList }) : previewSurface === "app_home" ? /* @__PURE__ */ jsxRuntime.jsx(AppHomeFrame, { workspaceName, isDark, children: blocksList }) : /* @__PURE__ */ jsxRuntime.jsx(MessageFrame, { workspaceName, isDark, children: blocksList }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "main",
+    {
+      "aria-label": "Block preview",
+      className: cn("flex min-w-0 flex-1 flex-col overflow-y-auto bg-muted p-3 sm:p-6"),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-2xl", children: previewSurface === "modal" ? /* @__PURE__ */ jsxRuntime.jsx(ModalFrame, { isDark, children: blocksList }) : previewSurface === "app_home" ? /* @__PURE__ */ jsxRuntime.jsx(AppHomeFrame, { workspaceName, isDark, children: blocksList }) : /* @__PURE__ */ jsxRuntime.jsx(MessageFrame, { workspaceName, isDark, children: blocksList }) })
+    }
+  );
 }
 function MessageFrame({
   workspaceName,
@@ -6307,13 +7025,12 @@ function ModalFrame({ isDark, children }) {
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-base font-bold", isDark ? "text-white" : "text-[#1d1c1d]"), children: "Modal title" }),
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                "span",
                 {
-                  type: "button",
-                  "aria-label": "Close",
+                  "aria-hidden": "true",
                   className: cn(
                     "flex h-6 w-6 items-center justify-center rounded",
-                    isDark ? "text-white/60 hover:bg-white/10 hover:text-white" : "text-[#616061] hover:bg-[#f3f3f3] hover:text-[#1d1c1d]"
+                    isDark ? "text-white/60" : "text-[#616061]"
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
                 }
@@ -6325,30 +7042,23 @@ function ModalFrame({ isDark, children }) {
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            "aria-hidden": "true",
             className: cn(
               "flex items-center justify-end gap-2 border-t px-5 py-3",
               isDark ? "border-[#2c2d30]" : "border-[#e8e8e8]"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                "span",
                 {
-                  type: "button",
                   className: cn(
-                    "cursor-pointer rounded-sm border px-3 py-1.5 text-sm font-medium",
-                    isDark ? "border-white/20 bg-transparent text-white hover:bg-white/5" : "border-[#e8e8e8] bg-white text-[#1d1c1d] hover:bg-[#f3f3f3]"
+                    "rounded-sm border px-3 py-1.5 text-sm font-medium",
+                    isDark ? "border-white/20 bg-transparent text-white" : "border-[#e8e8e8] bg-white text-[#1d1c1d]"
                   ),
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "cursor-pointer rounded-sm bg-[#007a5a] px-3 py-1.5 text-sm font-bold text-white hover:bg-[#148567]",
-                  children: "Submit"
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-sm bg-[#007a5a] px-3 py-1.5 text-sm font-bold text-white", children: "Submit" })
             ]
           }
         )
@@ -6417,7 +7127,12 @@ function AppHomeFrame({
     }
   );
 }
-function EmptyState({ isDark, isPaletteDrag, isOver }) {
+function EmptyState({
+  isDark,
+  isPaletteDrag,
+  isOver,
+  onOpenPalette
+}) {
   const active = isPaletteDrag && isOver;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -6437,7 +7152,7 @@ function EmptyState({ isDark, isPaletteDrag, isOver }) {
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { className: "h-6 w-6" })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
@@ -6448,8 +7163,23 @@ function EmptyState({ isDark, isPaletteDrag, isOver }) {
               children: active ? "Drop to add block" : "Start adding blocks!"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: active ? "Release to insert it here." : "Drag a block from the left, or click one to add it here." })
-        ] })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: active ? "Release to insert it here." : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: "Drag a block from the left, or click one to add it here." }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "md:hidden", children: "Tap \u201CAdd a block\u201D below to get started." })
+          ] }) })
+        ] }),
+        !active && onOpenPalette ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onOpenPalette,
+            className: "inline-flex min-h-11 items-center gap-2 rounded-full bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
+              "Add a block"
+            ]
+          }
+        ) : null
       ]
     }
   );
@@ -6473,6 +7203,7 @@ function Toolbar2({
   onOpenJson,
   onOpenIssues,
   onOpenSend,
+  onOpenPalette,
   canSend,
   canClear,
   previewTheme,
@@ -6490,61 +7221,63 @@ function Toolbar2({
   const showSurfaceControl = surfaceOptions.length > 1;
   const docsHref = docsLink === false ? null : docsLink?.href ?? DEFAULT_DOCS_HREF;
   const docsLabel = docsLink === false ? null : docsLink?.label ?? DEFAULT_DOCS_LABEL;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 border-b bg-background px-3 py-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      showSurfaceControl ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", children: [
+  const [surfaceMenuOpen, setSurfaceMenuOpen] = React.useState(false);
+  const [themeMenuOpen, setThemeMenuOpen] = React.useState(false);
+  const [moreMenuOpen, setMoreMenuOpen] = React.useState(false);
+  return /* @__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: [
+      onOpenPalette ? /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: onOpenPalette,
+          className: "md:hidden",
+          "aria-label": "Add a block",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Blocks" })
+          ]
+        }
+      ) : null,
+      showSurfaceControl ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: surfaceMenuOpen, onOpenChange: setSurfaceMenuOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `Preview surface: ${activeSurface.label}`, children: [
           /* @__PURE__ */ jsxRuntime.jsx(activeSurface.Icon, { className: "h-3.5 w-3.5" }),
-          activeSurface.label,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: activeSurface.label }),
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 opacity-60" })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", className: "w-36 p-1", children: surfaceOptions.map(({ value, label, Icon }) => {
-          const isActive = value === previewSurface;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => onPreviewSurfaceChange(value),
-              className: cn(
-                "flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-foreground",
-                isActive ? "text-foreground" : "text-muted-foreground"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: label }),
-                isActive ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5" }) : null
-              ]
-            },
-            value
-          );
-        }) })
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", className: "w-36 p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Menu,
+          {
+            ariaLabel: "Preview surface",
+            options: surfaceOptions,
+            value: previewSurface,
+            onChange: (next) => {
+              onPreviewSurfaceChange(next);
+              setSurfaceMenuOpen(false);
+            }
+          }
+        ) })
       ] }) : null,
-      showThemeControl ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", children: [
+      showThemeControl ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: themeMenuOpen, onOpenChange: setThemeMenuOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `Preview theme: ${activeTheme.label}`, children: [
           /* @__PURE__ */ jsxRuntime.jsx(activeTheme.Icon, { className: "h-3.5 w-3.5" }),
-          activeTheme.label,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: activeTheme.label }),
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 opacity-60" })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", className: "w-32 p-1", children: THEME_OPTIONS.map(({ value, label, Icon }) => {
-          const isActive = value === previewTheme;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => onPreviewThemeChange(value),
-              className: cn(
-                "flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-foreground",
-                isActive ? "text-foreground" : "text-muted-foreground"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: label }),
-                isActive ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5" }) : null
-              ]
-            },
-            value
-          );
-        }) })
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "start", className: "w-32 p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Menu,
+          {
+            ariaLabel: "Preview theme",
+            options: THEME_OPTIONS,
+            value: previewTheme,
+            onChange: (next) => {
+              onPreviewThemeChange(next);
+              setThemeMenuOpen(false);
+            }
+          }
+        ) })
       ] }) : null,
       docsHref ? /* @__PURE__ */ jsxRuntime.jsxs(
         "a",
@@ -6552,7 +7285,8 @@ function Toolbar2({
           href: docsHref,
           target: "_blank",
           rel: "noreferrer noopener",
-          className: "inline-flex h-8 items-center gap-1.5 rounded-md px-2 py-1 text-sm text-muted-foreground no-underline transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          className: "hidden h-8 items-center gap-1.5 rounded-md px-2 py-1 text-sm text-muted-foreground no-underline transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:inline-flex",
+          "aria-label": `${docsLabel} (opens in a new tab)`,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, { className: "h-3.5 w-3.5" }),
             docsLabel,
@@ -6561,7 +7295,7 @@ function Toolbar2({
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
       errorCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
         Button,
         {
@@ -6570,11 +7304,14 @@ function Toolbar2({
           size: "sm",
           onClick: onOpenIssues,
           className: "text-destructive hover:text-destructive",
+          "aria-label": `${errorCount} ${errorCount === 1 ? "issue" : "issues"}`,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3.5 w-3.5" }),
-            errorCount,
-            " ",
-            errorCount === 1 ? "issue" : "issues"
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              errorCount,
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: errorCount === 1 ? "issue" : "issues" })
+            ] })
           ]
         }
       ) : null,
@@ -6586,24 +7323,188 @@ function Toolbar2({
           size: "sm",
           onClick: onClear,
           disabled: !canClear,
-          className: "hover:bg-destructive/10 hover:text-destructive",
+          className: "hidden hover:bg-destructive/10 hover:text-destructive sm:inline-flex",
+          "aria-label": "Clear all blocks",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }),
             "Clear"
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onOpenJson, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
-        "View JSON"
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: onOpenJson,
+          "aria-label": "View JSON",
+          className: "hidden sm:inline-flex",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
+            "View JSON"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: moreMenuOpen, onOpenChange: setMoreMenuOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            "aria-label": "More actions",
+            "aria-haspopup": "menu",
+            className: "px-2 sm:hidden",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-3.5 w-3.5" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { align: "end", className: "w-44 p-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "menu", "aria-label": "More actions", className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ActionMenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }),
+              onSelect: () => {
+                setMoreMenuOpen(false);
+                onClear();
+              },
+              disabled: !canClear,
+              tone: "destructive",
+              children: "Clear"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ActionMenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
+              onSelect: () => {
+                setMoreMenuOpen(false);
+                onOpenJson();
+              },
+              children: "View JSON"
+            }
+          ),
+          docsHref ? /* @__PURE__ */ jsxRuntime.jsx(
+            ActionMenuLink,
+            {
+              href: docsHref,
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, { className: "h-3.5 w-3.5" }),
+              trailingIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3 w-3 opacity-50" }),
+              onSelect: () => setMoreMenuOpen(false),
+              children: docsLabel
+            }
+          ) : null
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenSend, disabled: !canSend, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", size: "sm", onClick: onOpenSend, disabled: !canSend, "aria-label": "Send", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-3.5 w-3.5" }),
-        "Send"
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Send" })
       ] })
     ] })
   ] });
 }
+function Menu({
+  ariaLabel,
+  options,
+  value,
+  onChange
+}) {
+  const itemsRef = React.useRef([]);
+  const moveFocus = (from, delta) => {
+    const len = options.length;
+    if (len === 0) return;
+    const next = (from + delta + len) % len;
+    itemsRef.current[next]?.focus();
+  };
+  const handleKeyDown = (e, idx) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      moveFocus(idx, 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      moveFocus(idx, -1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      itemsRef.current[0]?.focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      itemsRef.current[options.length - 1]?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "menu", "aria-label": ariaLabel, className: "flex flex-col", children: options.map(({ value: optValue, label, Icon }, idx) => {
+    const isActive = optValue === value;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: (el) => {
+          itemsRef.current[idx] = el;
+        },
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": isActive,
+        onClick: () => onChange(optValue),
+        onKeyDown: (e) => handleKeyDown(e, idx),
+        className: cn(
+          "flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:outline-none",
+          isActive ? "text-foreground" : "text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: label }),
+          isActive ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5" }) : null
+        ]
+      },
+      optValue
+    );
+  }) });
+}
+var ACTION_ITEM_BASE = "flex w-full cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-muted-foreground no-underline transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50";
+function ActionMenuItem({
+  icon,
+  children,
+  onSelect,
+  disabled,
+  tone
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      onClick: onSelect,
+      disabled,
+      className: cn(ACTION_ITEM_BASE, tone === "destructive" && "hover:bg-destructive/10 hover:text-destructive"),
+      children: [
+        icon,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children })
+      ]
+    }
+  );
+}
+function ActionMenuLink({
+  href,
+  icon,
+  trailingIcon,
+  children,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      role: "menuitem",
+      href,
+      target: "_blank",
+      rel: "noreferrer noopener",
+      onClick: onSelect,
+      className: ACTION_ITEM_BASE,
+      children: [
+        icon,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
+        trailingIcon
+      ]
+    }
+  );
+}
 function BlockKitchen(props) {
   const {
     workspaceName,
@@ -6614,6 +7515,7 @@ function BlockKitchen(props) {
     loadSendAsUserStatus,
     onSend,
     palette,
+    disabledBlockTypes,
     showPaletteSearch,
     paletteSearchPlaceholder,
     defaultOpenSections,
@@ -6623,22 +7525,42 @@ function BlockKitchen(props) {
     defaultPreviewTheme = "light",
     theme
   } = props;
-  const paletteSections = palette ?? defaultPalette;
-  const variantById = React2.useMemo(() => buildVariantById(paletteSections), [paletteSections]);
+  const paletteSections = React.useMemo(() => {
+    const sections = palette ?? defaultPalette;
+    if (!disabledBlockTypes || disabledBlockTypes.length === 0) {
+      return sections;
+    }
+    const blocked = new Set(disabledBlockTypes);
+    const filtered = [];
+    for (const section of sections) {
+      const variants = section.variants.filter((variant) => !blocked.has(variant.factory().type));
+      if (variants.length > 0) {
+        filtered.push({ ...section, variants });
+      }
+    }
+    return filtered;
+  }, [palette, disabledBlockTypes]);
+  const variantById = React.useMemo(() => buildVariantById(paletteSections), [paletteSections]);
   const allowedSurfaces = allowedSurfacesProp && allowedSurfacesProp.length > 0 ? allowedSurfacesProp : ["message"];
   const { blocks, addBlock, updateBlock, removeBlock, duplicateBlock, reorderBlock, replaceAll } = useBlockKitchenState(
     { initialBlocks, onChange }
   );
-  const [jsonOpen, setJsonOpen] = React2.useState(false);
-  const [sendOpen, setSendOpen] = React2.useState(false);
-  const [issuesOpen, setIssuesOpen] = React2.useState(false);
-  const [openBlockId, setOpenBlockId] = React2.useState(null);
-  const [previewTheme, setPreviewTheme] = React2.useState(defaultPreviewTheme);
-  const [previewSurface, setPreviewSurface] = React2.useState(allowedSurfaces[0]);
-  const [activePaletteVariantId, setActivePaletteVariantId] = React2.useState(null);
+  const [jsonOpen, setJsonOpen] = React.useState(false);
+  const [sendOpen, setSendOpen] = React.useState(false);
+  const [issuesOpen, setIssuesOpen] = React.useState(false);
+  const [paletteOpen, setPaletteOpen] = React.useState(false);
+  const [openBlockId, setOpenBlockId] = React.useState(null);
+  const [previewTheme, setPreviewTheme] = React.useState(defaultPreviewTheme);
+  const [previewSurface, setPreviewSurface] = React.useState(allowedSurfaces[0]);
+  const [activePaletteVariantId, setActivePaletteVariantId] = React.useState(null);
+  const isMobile = useIsMobile();
   const validation = useBlockKitValidation(blocks, "message");
-  const sensors = core.useSensors(core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }));
-  const collisionDetection = React2.useCallback((args) => {
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
+    core.useSensor(core.TouchSensor, { activationConstraint: { delay: 150, tolerance: 8 } }),
+    core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
+  );
+  const collisionDetection = React.useCallback((args) => {
     const pointerHits = core.pointerWithin(args);
     if (pointerHits.length > 0) {
       const blockHit = pointerHits.find((c) => c.id !== SURFACE_DROPPABLE_ID);
@@ -6646,11 +7568,11 @@ function BlockKitchen(props) {
     }
     return core.closestCenter(args);
   }, []);
-  const handleDragStart = React2.useCallback((event) => {
+  const handleDragStart = React.useCallback((event) => {
     const variantId = parsePaletteDragId(event.active.id);
     setActivePaletteVariantId(variantId);
   }, []);
-  const handleDragEnd = React2.useCallback(
+  const handleDragEnd = React.useCallback(
     (event) => {
       setActivePaletteVariantId(null);
       const { active, over } = event;
@@ -6676,7 +7598,7 @@ function BlockKitchen(props) {
     },
     [addBlock, blocks, reorderBlock, variantById]
   );
-  const handleDragCancel = React2.useCallback(() => {
+  const handleDragCancel = React.useCallback(() => {
     setActivePaletteVariantId(null);
   }, []);
   const activePaletteVariant = activePaletteVariantId ? variantById.get(activePaletteVariantId) : null;
@@ -6690,7 +7612,7 @@ function BlockKitchen(props) {
       onDragEnd: handleDragEnd,
       onDragCancel: handleDragCancel,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bk-root flex h-full w-full flex-col rounded-md border bg-background text-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bk-root flex h-full w-full flex-col overflow-hidden rounded-md border bg-background text-foreground", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Toolbar2,
             {
@@ -6698,6 +7620,7 @@ function BlockKitchen(props) {
               onOpenJson: () => setJsonOpen(true),
               onOpenIssues: () => setIssuesOpen(true),
               onOpenSend: () => setSendOpen(true),
+              onOpenPalette: () => setPaletteOpen(true),
               canSend: blocks.length > 0,
               canClear: blocks.length > 0,
               errorCount: validation.total,
@@ -6711,7 +7634,7 @@ function BlockKitchen(props) {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden min-h-0 md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(
               Palette,
               {
                 onAddBlock: (block) => addBlock(block),
@@ -6720,7 +7643,7 @@ function BlockKitchen(props) {
                 searchPlaceholder: paletteSearchPlaceholder,
                 defaultOpenSections
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Surface,
               {
@@ -6735,7 +7658,9 @@ function BlockKitchen(props) {
                 onUpdate: updateBlock,
                 onDuplicate: duplicateBlock,
                 onDelete: removeBlock,
-                isPaletteDrag: activePaletteVariant !== null
+                onReorder: reorderBlock,
+                isPaletteDrag: activePaletteVariant !== null,
+                onOpenPalette: () => setPaletteOpen(true)
               }
             )
           ] })
@@ -6744,6 +7669,33 @@ function BlockKitchen(props) {
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-3 w-3 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: activePaletteVariant.label })
         ] }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: paletteOpen && isMobile, onOpenChange: setPaletteOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          SheetContent,
+          {
+            side: "bottom",
+            className: "bk-portal-content flex h-[85svh] max-h-[85svh] flex-col gap-3 p-0 sm:max-w-none",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 px-4 pt-5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Add a block" }),
+                /* @__PURE__ */ jsxRuntime.jsx(SheetDescription, { children: "Tap a block to add it to the bottom of your draft." })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Palette,
+                {
+                  onAddBlock: (block) => {
+                    addBlock(block);
+                    setPaletteOpen(false);
+                  },
+                  sections: paletteSections,
+                  showSearch: showPaletteSearch,
+                  searchPlaceholder: paletteSearchPlaceholder,
+                  defaultOpenSections,
+                  variant: "sheet"
+                }
+              ) })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(JsonDrawer, { open: jsonOpen, onOpenChange: setJsonOpen, blocks: blockPayloads, onApply: replaceAll }),
         /* @__PURE__ */ jsxRuntime.jsx(
           SendDialog,
@@ -6876,11 +7828,11 @@ function TemplatePicker({
 }) {
   const visible = surface ? templates.filter((t) => t.surface === surface) : templates;
   const { grouped, sections } = groupByCategory(visible);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full w-full flex-col gap-8 overflow-y-auto bg-muted/30 p-8", className), children: [
-    heading ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold tracking-tight text-foreground", children: heading }) : null,
-    visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground/75", children: emptyLabel }) : sections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full w-full flex-col gap-6 overflow-y-auto bg-muted/30 p-4 sm:gap-8 sm:p-8", className), children: [
+    heading ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold tracking-tight text-foreground sm:text-xl", children: heading }) : null,
+    visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground/75", children: emptyLabel }) : sections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-3 sm:gap-4", children: [
       grouped ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xs font-semibold tracking-wider text-foreground/60 uppercase", children: section.category }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-5", children: section.templates.map((template) => /* @__PURE__ */ jsxRuntime.jsx(TemplateCard, { template, theme, onSelect }, template.id)) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-4 sm:grid-cols-[repeat(auto-fill,minmax(280px,1fr))] sm:gap-5", children: section.templates.map((template) => /* @__PURE__ */ jsxRuntime.jsx(TemplateCard, { template, theme, onSelect }, template.id)) })
     ] }, section.category))
   ] });
 }