@tightknitai/block-kitchen 0.10.9 → 0.10.11

package/dist/index.cjs

@@ -14,10 +14,10 @@ var nanoid = require('nanoid');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var LabelPrimitive = require('@radix-ui/react-label');
+var PopoverPrimitive = require('@radix-ui/react-popover');
 require('slack-blocks-to-jsx/dist/style.css');
 var slackBlocksToJsx = require('slack-blocks-to-jsx');
 var utilities = require('@dnd-kit/utilities');
-var PopoverPrimitive = require('@radix-ui/react-popover');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var Link = require('@tiptap/extension-link');
 var react = require('@tiptap/react');
@@ -53,6 +53,11 @@ var Link__default = /*#__PURE__*/_interopDefault(Link);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 
 // src/components/block-kitchen.tsx
+
+// src/lib/channel-label.ts
+function channelLabel(name) {
+  return `# ${name}`;
+}
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -3065,6 +3070,220 @@ var Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
+var Popover = PopoverPrimitive__namespace.Root;
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
+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,
+    align,
+    sideOffset,
+    collisionPadding,
+    className: cn(
+      "bk-portal-content z-50 max-h-[var(--radix-popover-content-available-height)] w-80 overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
+function matchesQuery(name, query) {
+  const needle = query.replace(/^\s*#\s*/, "").trim().toLowerCase();
+  return needle === "" || name.toLowerCase().includes(needle);
+}
+function ChannelCombobox({
+  id,
+  channels,
+  value,
+  onChange,
+  placeholder = "Search channels\u2026",
+  className
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const inputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const domId = React.useId();
+  const listboxId = `${domId}-listbox`;
+  const optionDomId = (index) => `${domId}-option-${index}`;
+  const selected = channels.find((c) => c.id === value) ?? null;
+  const filtered = React.useMemo(
+    () => open ? channels.filter((c) => matchesQuery(c.name, query)) : channels,
+    [channels, open, query]
+  );
+  const inputValue = open ? query : selected ? channelLabel(selected.name) : "";
+  React.useEffect(() => {
+    if (!open) {
+      setActiveIndex(-1);
+      return;
+    }
+    setActiveIndex((prev) => {
+      if (prev >= 0 && prev < filtered.length) {
+        return prev;
+      }
+      const selectedIndex = filtered.findIndex((c) => c.id === value);
+      return selectedIndex >= 0 ? selectedIndex : filtered.length > 0 ? 0 : -1;
+    });
+  }, [open, filtered, value]);
+  React.useEffect(() => {
+    if (!open || activeIndex < 0) {
+      return;
+    }
+    const row = listRef.current?.querySelectorAll('[role="option"]')[activeIndex];
+    row?.scrollIntoView?.({ block: "nearest" });
+  }, [open, activeIndex]);
+  const openList = () => {
+    setQuery("");
+    setOpen(true);
+  };
+  const closeList = () => {
+    setOpen(false);
+    setQuery("");
+  };
+  const commit = (channel) => {
+    onChange(channel.id);
+    closeList();
+    inputRef.current?.focus();
+  };
+  const moveActive = (delta) => {
+    if (!open) {
+      openList();
+      return;
+    }
+    if (filtered.length === 0) {
+      return;
+    }
+    setActiveIndex((prev) => {
+      const next = prev + delta;
+      return next < 0 ? filtered.length - 1 : next >= filtered.length ? 0 : next;
+    });
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveActive(-1);
+        break;
+      case "Home":
+        if (open && filtered.length > 0) {
+          e.preventDefault();
+          setActiveIndex(0);
+        }
+        break;
+      case "End":
+        if (open && filtered.length > 0) {
+          e.preventDefault();
+          setActiveIndex(filtered.length - 1);
+        }
+        break;
+      case "Enter": {
+        if (!open) {
+          break;
+        }
+        e.preventDefault();
+        const active = filtered[activeIndex];
+        if (active) {
+          commit(active);
+        }
+        break;
+      }
+      case "Escape":
+        if (open) {
+          e.stopPropagation();
+          closeList();
+        }
+        break;
+      case "Tab":
+        if (open) {
+          closeList();
+        }
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: (next) => next ? openList() : closeList(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          ref: inputRef,
+          id,
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-controls": listboxId,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": open && activeIndex >= 0 ? optionDomId(activeIndex) : void 0,
+          autoComplete: "off",
+          spellCheck: false,
+          value: inputValue,
+          placeholder,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setOpen(true);
+          },
+          onKeyDown: handleKeyDown,
+          onClick: () => open ? closeList() : openList(),
+          className: cn("pr-9", className)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.ChevronsUpDown,
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PopoverContent,
+      {
+        ref: listRef,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (e) => {
+          if (e.target instanceof Node && inputRef.current?.contains(e.target)) {
+            e.preventDefault();
+          }
+        },
+        sideOffset: 4,
+        className: "max-h-[min(15rem,var(--radix-popover-content-available-height))] w-[var(--radix-popover-trigger-width)] min-w-48 p-1",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", id: listboxId, "aria-label": "Channels", children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 py-3 text-center text-xs text-muted-foreground", children: "No channels match that search." }) : filtered.map((channel, index) => {
+          const isSelected = channel.id === value;
+          return (
+            // biome-ignore lint/a11y/useFocusableInteractive: options in an aria-activedescendant combobox must stay unfocusable — focus belongs to the input, which is what makes typing filter the list.
+            // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard path lives on that same input, which drives this list via aria-activedescendant.
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                id: optionDomId(index),
+                role: "option",
+                "aria-selected": isSelected,
+                onPointerDown: (e) => e.preventDefault(),
+                onClick: () => commit(channel),
+                onMouseMove: () => setActiveIndex(index),
+                className: cn(
+                  "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground",
+                  index === activeIndex && "bg-accent"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("h-3.5 w-3.5 shrink-0", isSelected ? "opacity-100" : "opacity-0") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: channelLabel(channel.name) })
+                ]
+              },
+              channel.id
+            )
+          );
+        }) })
+      }
+    )
+  ] });
+}
 function SlackBlockPreview({
   block,
   hooks,
@@ -3544,20 +3763,14 @@ function LoadMessageDialog({
                     channels === null && !channelsError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Loading channels\u2026" }),
                     channelsError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: channelsError }),
                     channels && channels.length === 0 && !channelsError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "No public channels available." }),
-                    channels && channels.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-                      "select",
+                    channels && channels.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                      ChannelCombobox,
                       {
                         id: "recent-channel-picker",
+                        channels,
                         value: channelId,
-                        onChange: (e) => setChannelId(e.target.value),
-                        className: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select a channel\u2026" }),
-                          channels.map((c) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: c.id, children: [
-                            "#",
-                            c.name
-                          ] }, c.id))
-                        ]
+                        onChange: setChannelId,
+                        placeholder: "Select a channel\u2026"
                       }
                     )
                   ] }),
@@ -3751,7 +3964,7 @@ function PreviewPane({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-2 lg:min-h-0 lg:flex-1", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Preview" }),
-      target?.channelName || target?.channelId ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded border px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: target.channelName ? `#${target.channelName}` : target.channelId }) : null,
+      target?.channelName || target?.channelId ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded border px-1.5 py-px text-[10px] font-medium text-muted-foreground", children: target.channelName ? channelLabel(target.channelName) : target.channelId }) : null,
       target?.editableVia ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rounded border px-1.5 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: [
         "Editable as ",
         editableLabel(target.editableVia)
@@ -4207,19 +4420,7 @@ function SendDialog({
         channels === null && !channelsError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Loading channels\u2026" }),
         channelsError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: channelsError }),
         channels && channels.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "No public channels available." }),
-        channels && channels.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          "select",
-          {
-            id: "channel-picker",
-            value: channelId,
-            onChange: (e) => setChannelId(e.target.value),
-            className: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            children: channels.map((c) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: c.id, children: [
-              "#",
-              c.name
-            ] }, c.id))
-          }
-        )
+        channels && channels.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ChannelCombobox, { id: "channel-picker", channels, value: channelId, onChange: setChannelId })
       ] }),
       renderSendExtras ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1.5", children: renderSendExtras({
         channelId: channelId || null,
@@ -4262,24 +4463,6 @@ function SendDialog({
     ] })
   ] }) });
 }
-var Popover = PopoverPrimitive__namespace.Root;
-var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-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,
-    align,
-    sideOffset,
-    collisionPadding,
-    className: cn(
-      "bk-portal-content z-50 max-h-[var(--radix-popover-content-available-height)] w-80 overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
 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 = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -9314,11 +9497,13 @@ function BlockRow({
             {
               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
+                // reveal on hover, on keyboard focus inside the row (so Tab-stops on
+                // the floating buttons themselves keep them visible), and when there
                 // are validation errors worth surfacing immediately.
+                // :focus-visible, not :focus-within — a drag leaves pointer focus on
+                // the block, which would otherwise pin the toolbar open until a click.
                 "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"
+                hasErrors ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-has-[:focus-visible]:opacity-100"
               ),
               children: [
                 hasErrors ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
@@ -9628,7 +9813,7 @@ function ContainerRow({
           {
             className: cn(
               "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/container:opacity-100 group-focus-within/container:opacity-100"
+              hasErrors ? "opacity-100" : "opacity-0 group-hover/container:opacity-100 group-has-[:focus-visible]/container:opacity-100"
             ),
             children: [
               hasErrors ? /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
@@ -10478,7 +10663,7 @@ function UpdateDialog({
       setStatus({ kind: "error", error: e instanceof Error ? e.message : "Update failed." });
     }
   };
-  const channelLabel = target.channelName ? `#${target.channelName}` : target.channelId;
+  const channelText = target.channelName ? channelLabel(target.channelName) : target.channelId;
   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: "Update message" }),
@@ -10487,7 +10672,7 @@ function UpdateDialog({
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Channel" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex h-9 items-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground", children: channelLabel })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex h-9 items-center rounded-md border border-input bg-muted px-3 text-sm text-muted-foreground", children: channelText })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Posting as" }),
@@ -10853,7 +11038,7 @@ function BlockKitchen(props) {
                   loadEnabled,
                   updateEnabled: Boolean(onUpdate),
                   editBadge: activeEditTarget ? {
-                    channelLabel: activeEditTarget.channelName ? `#${activeEditTarget.channelName}` : activeEditTarget.channelId,
+                    channelLabel: activeEditTarget.channelName ? channelLabel(activeEditTarget.channelName) : activeEditTarget.channelId,
                     ts: activeEditTarget.ts
                   } : null,
                   onOpenLoad: () => setLoadOpen(true),