@tightknitai/block-kitchen 0.10.6 → 0.10.7

package/README.md

@@ -98,6 +98,27 @@ export function MyBuilderPage() {
 }
 ```
 
+### Sizing
+
+The builder is an app shell: a fixed toolbar over a palette rail and a preview pane that scroll independently. It fills its container, so the height you give that container is the height it takes.
+
+```tsx
+// Give it a definite height and it fills exactly that.
+<div style={{ height: "100%" }}>
+  <BlockKitchen {...props} />
+</div>
+```
+
+Given no height to work with — a plain `<div>` in ordinary document flow — it bounds itself to `100svh` rather than growing to fit the palette's full block list, which would run a couple of thousand pixels down the page. Override that bound with `--bk-max-height` on any ancestor:
+
+```css
+/* Room for a 4rem page header above the builder. */
+.builder-host { --bk-max-height: calc(100svh - 4rem); }
+
+/* Or opt out entirely and let it grow with its content. */
+.builder-host { --bk-max-height: none; }
+```
+
 ## Props
 
 | Prop | Type | Required | Description |

package/dist/index.cjs

@@ -3876,66 +3876,65 @@ function Palette({
         isSheet ? "w-full flex-1 bg-background" : "w-72 shrink-0 border-r bg-muted/20"
       ),
       children: [
-        offersSimple || searchVisible ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "min-w-0 truncate font-medium uppercase tracking-wide text-muted-foreground",
-                        isSheet ? "text-xs" : "text-[11px]"
-                      ),
-                      children: PALETTE_TITLE
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ModeLink,
-                    {
-                      advanced,
-                      isSheet,
-                      onToggle: () => {
-                        setQuery("");
-                        setAdvancedOpen((v) => !v);
-                      }
-                    }
-                  )
-                ] })
-              ) : null,
-              searchVisible ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 shrink-0 bg-background", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.Search,
+                {
+                  className: cn(
+                    "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground",
+                    isSheet ? "h-4 w-4" : "h-3.5 w-3.5"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  type: "search",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: searchPlaceholder,
+                  "aria-label": searchPlaceholder,
+                  className: cn(isSheet ? "h-10 pl-8 text-base" : "h-8 pl-7 text-sm")
+                }
+              )
+            ] }) : null
+          ] }) })
         ) : null,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", isSheet ? "px-2 pb-6" : "p-3"), children: !advanced ? (
           // Simple mode: a flat list, no section headings — with this few
@@ -10151,18 +10150,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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: "Clear" })
+              /* @__PURE__ */ jsxRuntime.jsx(ExpandingLabel, { children: "Clear" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: onOpenJson,
+            className: "group gap-0",
+            "aria-label": "View JSON",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ExpandingLabel, { children: "View JSON" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onOpenJson, "aria-label": "View JSON", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsxRuntime.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 —
@@ -10272,6 +10282,19 @@ function Toolbar2({
     ] }) : null
   ] });
 }
+function ExpandingLabel({ children }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block whitespace-nowrap pl-1.5", children }) })
+    }
+  );
+}
 function Menu({
   ariaLabel,
   options,
@@ -10694,7 +10717,7 @@ function BlockKitchen(props) {
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(