@tightknitai/block-kitchen 0.10.6 → 0.10.7

package/dist/index.js

@@ -3846,66 +3846,65 @@ function Palette({
         isSheet ? "w-full flex-1 bg-background" : "w-72 shrink-0 border-r bg-muted/20"
       ),
       children: [
-        offersSimple || searchVisible ? /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "sticky top-0 z-10 flex flex-col gap-2 border-b px-3 pt-3 pb-2 backdrop-blur",
-              isSheet ? "bg-background" : "bg-muted/20"
-            ),
-            children: [
-              offersSimple ? (
-                // Titled row: with the sections gone, simple mode's header would
-                // otherwise be a lone right-aligned link over empty space, and
-                // nothing would name what the rail below it holds.
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "min-w-0 truncate font-medium uppercase tracking-wide text-muted-foreground",
-                        isSheet ? "text-xs" : "text-[11px]"
-                      ),
-                      children: PALETTE_TITLE
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    ModeLink,
-                    {
-                      advanced,
-                      isSheet,
-                      onToggle: () => {
-                        setQuery("");
-                        setAdvancedOpen((v) => !v);
-                      }
-                    }
-                  )
-                ] })
-              ) : null,
-              searchVisible ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        offersSimple || searchVisible ? (
+          // Two elements so the header is opaque *and* the exact color of the
+          // rail. Painted with the rail's own `bg-muted/20`, it composited over
+          // the scrolled list instead and headings read through the search box
+          // (a `backdrop-blur` softened them, it didn't hide them). Restoring
+          // the `bg-background` base under the tint rebuilds the rail's own two
+          // layers, so the match holds under any theme.
+          /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 shrink-0 bg-background", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 border-b px-3 pt-3 pb-2", isSheet ? "bg-background" : "bg-muted/20"), children: [
+            offersSimple ? (
+              // Titled row: with the sections gone, simple mode's header would
+              // otherwise be a lone right-aligned link over empty space, and
+              // nothing would name what the rail below it holds.
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
                 /* @__PURE__ */ jsx(
-                  Search,
+                  "span",
                   {
                     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"
-                    )
+                      "min-w-0 truncate font-medium uppercase tracking-wide text-muted-foreground",
+                      isSheet ? "text-xs" : "text-[11px]"
+                    ),
+                    children: PALETTE_TITLE
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  Input,
+                  ModeLink,
                   {
-                    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")
+                    advanced,
+                    isSheet,
+                    onToggle: () => {
+                      setQuery("");
+                      setAdvancedOpen((v) => !v);
+                    }
                   }
                 )
-              ] }) : null
-            ]
-          }
+              ] })
+            ) : null,
+            searchVisible ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                Search,
+                {
+                  className: cn(
+                    "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground",
+                    isSheet ? "h-4 w-4" : "h-3.5 w-3.5"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "search",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: searchPlaceholder,
+                  "aria-label": searchPlaceholder,
+                  className: cn(isSheet ? "h-10 pl-8 text-base" : "h-8 pl-7 text-sm")
+                }
+              )
+            ] }) : null
+          ] }) })
         ) : null,
         /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", isSheet ? "px-2 pb-6" : "p-3"), children: !advanced ? (
           // Simple mode: a flat list, no section headings — with this few
@@ -10121,18 +10120,29 @@ function Toolbar2({
             size: "sm",
             onClick: onClear,
             disabled: !canClear,
-            className: "hover:bg-destructive/10 hover:text-destructive",
+            className: "group gap-0 hover:bg-destructive/10 hover:text-destructive",
             "aria-label": "Clear all blocks",
             children: [
               /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: "Clear" })
+              /* @__PURE__ */ jsx(ExpandingLabel, { children: "Clear" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: onOpenJson,
+            className: "group gap-0",
+            "aria-label": "View JSON",
+            children: [
+              /* @__PURE__ */ jsx(Code2, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsx(ExpandingLabel, { children: "View JSON" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onOpenJson, "aria-label": "View JSON", children: [
-          /* @__PURE__ */ jsx(Code2, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: "View JSON" })
-        ] }),
         !showSend ? primaryAction ? (
           // Compose-only mode with a host-owned primary action: same
           // placement and styling as the built-in send button. No icon —
@@ -10242,6 +10252,19 @@ function Toolbar2({
     ] }) : null
   ] });
 }
+function ExpandingLabel({ children }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "grid grid-cols-[0fr] transition-[grid-template-columns] duration-200 ease-out",
+        "group-hover:grid-cols-[1fr] group-focus-visible:grid-cols-[1fr]",
+        "motion-reduce:transition-none"
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "block whitespace-nowrap pl-1.5", children }) })
+    }
+  );
+}
 function Menu({
   ariaLabel,
   options,
@@ -10664,7 +10687,7 @@ function BlockKitchen(props) {
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "bk-root flex h-full w-full flex-col overflow-hidden rounded-md border bg-background text-foreground",
+            className: "bk-root flex h-full max-h-[var(--bk-max-height,100svh)] w-full flex-col overflow-hidden rounded-md border bg-background text-foreground",
             onKeyDown: handleKeyDown,
             children: [
               /* @__PURE__ */ jsx(