@btst/stack 1.10.0 → 1.12.0

package/dist/packages/ui/src/components/minimal-tiptap/utils.cjs

@@ -93,23 +93,27 @@ const validateFileOrBase64 = (input, options, originalFile, validFiles, errors)
 };
 const checkTypeAndSize = (input, { allowedMimeTypes, maxFileSize }) => {
   const mimeType = input instanceof File ? input.type : base64MimeType(input);
-  const size = input instanceof File ? input.size : getBase64Size(input);
+  let size;
+  if (input instanceof File) {
+    size = input.size;
+  } else {
+    const base64Data = input.split(",")[1];
+    if (!base64Data || base64Data.trim() === "") {
+      return { isValidType: true, isValidSize: false };
+    }
+    try {
+      size = atob(base64Data).length;
+    } catch {
+      return { isValidType: true, isValidSize: false };
+    }
+  }
   const isValidType = allowedMimeTypes.length === 0 || allowedMimeTypes.includes(mimeType) || allowedMimeTypes.includes(`${mimeType.split("/")[0]}/*`);
   const isValidSize = !maxFileSize || size <= maxFileSize;
   return { isValidType, isValidSize };
 };
-const getBase64Size = (input) => {
-  if (input.includes(",")) {
-    const base64Part = input.split(",")[1];
-    if (base64Part) {
-      return atob(base64Part).length;
-    }
-  }
-  return atob(input).length;
-};
 const base64MimeType = (encoded) => {
   const result = encoded.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
-  return result && result.length > 1 ? result[1] : "unknown";
+  return result && result.length > 1 ? result[1] ?? "unknown" : "unknown";
 };
 const isBase64 = (str) => {
   if (str.startsWith("data:")) {

package/dist/packages/ui/src/components/minimal-tiptap/utils.mjs

@@ -91,23 +91,27 @@ const validateFileOrBase64 = (input, options, originalFile, validFiles, errors)
 };
 const checkTypeAndSize = (input, { allowedMimeTypes, maxFileSize }) => {
   const mimeType = input instanceof File ? input.type : base64MimeType(input);
-  const size = input instanceof File ? input.size : getBase64Size(input);
+  let size;
+  if (input instanceof File) {
+    size = input.size;
+  } else {
+    const base64Data = input.split(",")[1];
+    if (!base64Data || base64Data.trim() === "") {
+      return { isValidType: true, isValidSize: false };
+    }
+    try {
+      size = atob(base64Data).length;
+    } catch {
+      return { isValidType: true, isValidSize: false };
+    }
+  }
   const isValidType = allowedMimeTypes.length === 0 || allowedMimeTypes.includes(mimeType) || allowedMimeTypes.includes(`${mimeType.split("/")[0]}/*`);
   const isValidSize = !maxFileSize || size <= maxFileSize;
   return { isValidType, isValidSize };
 };
-const getBase64Size = (input) => {
-  if (input.includes(",")) {
-    const base64Part = input.split(",")[1];
-    if (base64Part) {
-      return atob(base64Part).length;
-    }
-  }
-  return atob(input).length;
-};
 const base64MimeType = (encoded) => {
   const result = encoded.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
-  return result && result.length > 1 ? result[1] : "unknown";
+  return result && result.length > 1 ? result[1] ?? "unknown" : "unknown";
 };
 const isBase64 = (str) => {
   if (str.startsWith("data:")) {

package/dist/packages/ui/src/components/popover.cjs

@@ -19,21 +19,26 @@ function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
+  usePortal = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  const content = /* @__PURE__ */ jsxRuntime.jsx(
     index.Content,
     {
       "data-slot": "popover-content",
       align,
       sideOffset,
       className: utils.cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        "bg-popover text-popover-foreground pointer-events-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
         className
       ),
       ...props
     }
-  ) });
+  );
+  if (!usePortal) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Portal, { children: content });
 }
 
 exports.Popover = Popover;

package/dist/packages/ui/src/components/popover.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Root as Root2, Trigger, Portal, Content as Content2 } from '../../../../node_modules/.pnpm/@radix-ui_react-popover@1.1.15_@types_react-dom@19.2.3_@types_react@19.2.6__@types_reac_5c5a3ca63b34dfe7d9d23f1e8cee675c/node_modules/@radix-ui/react-popover/dist/index.mjs';
+import { Root as Root2, Trigger, Content as Content2, Portal } from '../../../../node_modules/.pnpm/@radix-ui_react-popover@1.1.15_@types_react-dom@19.2.3_@types_react@19.2.6__@types_reac_5c5a3ca63b34dfe7d9d23f1e8cee675c/node_modules/@radix-ui/react-popover/dist/index.mjs';
 import { cn } from '../lib/utils.mjs';
 
 function Popover({
@@ -17,21 +17,26 @@ function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
+  usePortal = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+  const content = /* @__PURE__ */ jsx(
     Content2,
     {
       "data-slot": "popover-content",
       align,
       sideOffset,
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        "bg-popover text-popover-foreground pointer-events-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
         className
       ),
       ...props
     }
-  ) });
+  );
+  if (!usePortal) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx(Portal, { children: content });
 }
 
 export { Popover, PopoverContent, PopoverTrigger };

package/dist/packages/ui/src/components/search-select.cjs

@@ -0,0 +1,75 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const LucideIcons = require('lucide-react');
+const utils = require('../lib/utils.cjs');
+const button = require('./button.cjs');
+const command = require('./command.cjs');
+const popover = require('./popover.cjs');
+
+function SearchSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Select option",
+  emptyMessage = "No option found."
+}) {
+  const id = React.useId();
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      button.Button,
+      {
+        id,
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        className: "bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("truncate", !value && "text-muted-foreground"), children: value ? options.find((option) => option.value === value)?.label : placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LucideIcons.ChevronDownIcon,
+            {
+              size: 16,
+              className: "text-muted-foreground/80 shrink-0",
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      popover.PopoverContent,
+      {
+        className: "border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0 z-[9999]",
+        align: "start",
+        usePortal: false,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(command.Command, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(command.CommandInput, { placeholder: "Search options..." }),
+          /* @__PURE__ */ jsxRuntime.jsxs(command.CommandList, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(command.CommandEmpty, { children: emptyMessage }),
+            /* @__PURE__ */ jsxRuntime.jsx(command.CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+              command.CommandItem,
+              {
+                value: option.value,
+                onSelect: (currentValue) => {
+                  onChange(currentValue === value ? "" : currentValue);
+                  setOpen(false);
+                },
+                children: [
+                  option.label,
+                  value === option.value && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CheckIcon, { size: 16, className: "ml-auto" })
+                ]
+              },
+              option.value
+            )) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+module.exports = SearchSelect;

package/dist/packages/ui/src/components/search-select.mjs

@@ -0,0 +1,73 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useState } from 'react';
+import { ChevronDownIcon, CheckIcon } from 'lucide-react';
+import { cn } from '../lib/utils.mjs';
+import { Button } from './button.mjs';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from './command.mjs';
+import { Popover, PopoverTrigger, PopoverContent } from './popover.mjs';
+
+function SearchSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Select option",
+  emptyMessage = "No option found."
+}) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        id,
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        className: "bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value ? options.find((option) => option.value === value)?.label : placeholder }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              size: 16,
+              className: "text-muted-foreground/80 shrink-0",
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0 z-[9999]",
+        align: "start",
+        usePortal: false,
+        children: /* @__PURE__ */ jsxs(Command, { children: [
+          /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search options..." }),
+          /* @__PURE__ */ jsxs(CommandList, { children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+            /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
+              CommandItem,
+              {
+                value: option.value,
+                onSelect: (currentValue) => {
+                  onChange(currentValue === value ? "" : currentValue);
+                  setOpen(false);
+                },
+                children: [
+                  option.label,
+                  value === option.value && /* @__PURE__ */ jsx(CheckIcon, { size: 16, className: "ml-auto" })
+                ]
+              },
+              option.value
+            )) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+export { SearchSelect as default };

package/dist/packages/ui/src/components/ui-builder/index.cjs

@@ -38,7 +38,8 @@ const UIBuilder = ({
   allowPagesDeletion = true,
   navLeftChildren,
   navRightChildren,
-  showExport = true
+  showExport = true,
+  blocks
 }) => {
   const layerStore$1 = useStore.useStore(layerStore.useLayerStore, (state) => state);
   const editorStore$1 = useStore.useStore(editorStore.useEditorStore, (state) => state);
@@ -57,7 +58,7 @@ const UIBuilder = ({
   }, [userPanelConfig, memoizedDefaultTabsContent, navLeftChildren, navRightChildren, showExport]);
   React.useEffect(() => {
     if (editorStore$1 && componentRegistry && !editorStoreInitialized) {
-      editorStore$1.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing);
+      editorStore$1.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks);
       setEditorStoreInitialized(true);
     }
   }, [
@@ -67,7 +68,8 @@ const UIBuilder = ({
     persistLayerStore,
     allowPagesCreation,
     allowPagesDeletion,
-    allowVariableEditing
+    allowVariableEditing,
+    blocks
   ]);
   React.useEffect(() => {
     if (layerStore$1 && editorStore$1) {
@@ -144,11 +146,11 @@ function MainLayout({ panelConfig }) {
   });
   React.useEffect(() => {
     const editorPanel = mainPanels.find((panel) => panel.title === "UI Editor");
-    const currentPanel = mainPanels.find((panel) => panel.title === selectedPanel.title);
+    const currentPanel = mainPanels.find((panel) => panel.title === selectedPanel?.title);
     if (!currentPanel) {
       setSelectedPanel(editorPanel || mainPanels[0]);
     }
-  }, [mainPanels, selectedPanel.title]);
+  }, [mainPanels, selectedPanel?.title]);
   const handlePanelClickById = React.useCallback((e) => {
     const panelIndex = parseInt(e.currentTarget.dataset.panelIndex || "0");
     setSelectedPanel(mainPanels[panelIndex]);
@@ -180,11 +182,11 @@ function MainLayout({ panelConfig }) {
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex size-full flex-col md:hidden overflow-hidden ", children: [
-          selectedPanel.content,
+          selectedPanel?.content,
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center rounded-full bg-primary p-2 shadow-lg", children: mainPanels.map((panel, index) => /* @__PURE__ */ jsxRuntime.jsx(
             button.Button,
             {
-              variant: selectedPanel.title !== panel.title ? "default" : "secondary",
+              variant: selectedPanel?.title !== panel.title ? "default" : "secondary",
               size: "sm",
               className: "flex-1",
               "data-panel-index": index,

package/dist/packages/ui/src/components/ui-builder/index.mjs

@@ -30,7 +30,8 @@ const UIBuilder = ({
   allowPagesDeletion = true,
   navLeftChildren,
   navRightChildren,
-  showExport = true
+  showExport = true,
+  blocks
 }) => {
   const layerStore = useStore(useLayerStore, (state) => state);
   const editorStore = useStore(useEditorStore, (state) => state);
@@ -49,7 +50,7 @@ const UIBuilder = ({
   }, [userPanelConfig, memoizedDefaultTabsContent, navLeftChildren, navRightChildren, showExport]);
   useEffect(() => {
     if (editorStore && componentRegistry && !editorStoreInitialized) {
-      editorStore.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing);
+      editorStore.initialize(componentRegistry, persistLayerStore, allowPagesCreation, allowPagesDeletion, allowVariableEditing, blocks);
       setEditorStoreInitialized(true);
     }
   }, [
@@ -59,7 +60,8 @@ const UIBuilder = ({
     persistLayerStore,
     allowPagesCreation,
     allowPagesDeletion,
-    allowVariableEditing
+    allowVariableEditing,
+    blocks
   ]);
   useEffect(() => {
     if (layerStore && editorStore) {
@@ -136,11 +138,11 @@ function MainLayout({ panelConfig }) {
   });
   useEffect(() => {
     const editorPanel = mainPanels.find((panel) => panel.title === "UI Editor");
-    const currentPanel = mainPanels.find((panel) => panel.title === selectedPanel.title);
+    const currentPanel = mainPanels.find((panel) => panel.title === selectedPanel?.title);
     if (!currentPanel) {
       setSelectedPanel(editorPanel || mainPanels[0]);
     }
-  }, [mainPanels, selectedPanel.title]);
+  }, [mainPanels, selectedPanel?.title]);
   const handlePanelClickById = useCallback((e) => {
     const panelIndex = parseInt(e.currentTarget.dataset.panelIndex || "0");
     setSelectedPanel(mainPanels[panelIndex]);
@@ -172,11 +174,11 @@ function MainLayout({ panelConfig }) {
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex size-full flex-col md:hidden overflow-hidden ", children: [
-          selectedPanel.content,
+          selectedPanel?.content,
           /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-4 right-4 z-50", children: /* @__PURE__ */ jsx("div", { className: "flex justify-center rounded-full bg-primary p-2 shadow-lg", children: mainPanels.map((panel, index) => /* @__PURE__ */ jsx(
             Button,
             {
-              variant: selectedPanel.title !== panel.title ? "default" : "secondary",
+              variant: selectedPanel?.title !== panel.title ? "default" : "secondary",
               size: "sm",
               className: "flex-1",
               "data-panel-index": index,

package/dist/packages/ui/src/components/ui-builder/internal/canvas/auto-frame.cjs

@@ -97,7 +97,10 @@ const CopyHostStyles = ({
           console.log(
             `Tried to add an element that was already mirrored. Updating instead...`
           );
-        elements[index$1].mirror.innerText = el.innerText;
+        const element = elements[index$1];
+        if (element?.mirror) {
+          element.mirror.innerText = el.innerText;
+        }
         return;
       }
       const mirror = await mirrorEl(el);
@@ -165,13 +168,13 @@ const CopyHostStyles = ({
     const parentComputedStyle = win.parent.getComputedStyle(parentHtml);
     for (let i = 0; i < parentComputedStyle.length; i++) {
       const property = parentComputedStyle[i];
-      if (property.startsWith("--")) {
+      if (property?.startsWith("--")) {
         const value = parentComputedStyle.getPropertyValue(property);
         doc.documentElement.style.setProperty(property, value);
         doc.body.style.setProperty(property, value);
       }
     }
-    parentBody.classList.forEach((className) => {
+    parentBody?.classList.forEach((className) => {
       if (className.includes("font-") || className === "antialiased" || className.includes("__variable")) {
         doc.body.classList.add(className);
       }

package/dist/packages/ui/src/components/ui-builder/internal/canvas/auto-frame.mjs

@@ -93,7 +93,10 @@ const CopyHostStyles = ({
           console.log(
             `Tried to add an element that was already mirrored. Updating instead...`
           );
-        elements[index].mirror.innerText = el.innerText;
+        const element = elements[index];
+        if (element?.mirror) {
+          element.mirror.innerText = el.innerText;
+        }
         return;
       }
       const mirror = await mirrorEl(el);
@@ -161,13 +164,13 @@ const CopyHostStyles = ({
     const parentComputedStyle = win.parent.getComputedStyle(parentHtml);
     for (let i = 0; i < parentComputedStyle.length; i++) {
       const property = parentComputedStyle[i];
-      if (property.startsWith("--")) {
+      if (property?.startsWith("--")) {
         const value = parentComputedStyle.getPropertyValue(property);
         doc.documentElement.style.setProperty(property, value);
         doc.body.style.setProperty(property, value);
       }
     }
-    parentBody.classList.forEach((className) => {
+    parentBody?.classList.forEach((className) => {
       if (className.includes("font-") || className === "antialiased" || className.includes("__variable")) {
         doc.body.classList.add(className);
       }