tinacms 3.0.0 → 3.0.2

package/dist/index.js

@@ -15,7 +15,7 @@ import { isHotkey } from "is-hotkey";
 import clsx$1, { clsx } from "clsx";
 import { Slot } from "@radix-ui/react-slot";
 import { isLangSupported, formatCodeBlock, insertEmptyCodeBlock, unwrapCodeBlock, isCodeBlockEmpty, isSelectionAtCodeBlockStart } from "@udecode/plate-code-block";
-import { X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, PaintBucket, Quote, ChevronRight, ChevronsUpDown, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Settings, Strikethrough, Subscript, Superscript, Table, Text as Text$2, Underline, Link2Off, Eye, SeparatorHorizontal, Moon, SunMedium, Twitter, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronUp, Clock, CalendarCheck, Calendar as Calendar$1, CalendarDays, RotateCw, ChevronLeft, LoaderCircle, TriangleAlert, EllipsisVertical, GitBranchIcon, List as List$1, ListOrdered, Grid3x3Icon, Link, Unlink } from "lucide-react";
+import { X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, PaintBucket, Quote, ChevronRight, ChevronsUpDown, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Settings, Strikethrough, Subscript, Superscript, Table, Text as Text$2, Underline, Link2Off, Eye, SeparatorHorizontal, Moon, SunMedium, Twitter, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronUp, Clock, CalendarCheck, Calendar as Calendar$1, CalendarDays, RotateCw, ChevronLeft, LoaderCircle, TriangleAlert, EllipsisVertical, GitBranchIcon, List as List$1, ListOrdered, Grid3x3Icon, CircleX, Link, Unlink } from "lucide-react";
 import mermaid from "mermaid";
 import { cva } from "class-variance-authority";
 import { Command as Command$2 } from "cmdk";
@@ -43,10 +43,10 @@ import { twMerge } from "tailwind-merge";
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
 import { sortableKeyboardCoordinates, useSortable, SortableContext, verticalListSortingStrategy, defaultAnimateLayoutChanges } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import * as pkg$1 from "react-color";
-import * as pkg from "color-string";
 import { buildSchema, print, getIntrospectionQuery, buildClientSchema, parse as parse$4 } from "graphql";
 import { diff as diff$1 } from "@graphql-inspector/core";
+import { get as get$6, to as to$1 } from "color-string";
+import { HexColorPicker } from "react-colorful";
 import * as dropzone from "react-dropzone";
 import { Command as Command$3 } from "@udecode/cmdk";
 import { Popover as Popover$4, PopoverButton, Transition, PopoverPanel, TransitionChild, Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
@@ -33524,7 +33524,8 @@ const buttonVariants$2 = cva(
         inlineLink: "text-base text-primary underline underline-offset-4",
         link: "text-primary underline-offset-4 hover:underline",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        tinaPrimary: "bg-tina-orange-dark text-white hover:bg-tina-orange-dark/90 disabled:bg-tina-orange-dark/50"
       }
     }
   }
@@ -39367,20 +39368,183 @@ const TextArea = React.forwardRef(({ ...props }, ref) => {
     }
   );
 });
-const { get: getColor, to: toColor } = pkg;
+const TRANSPARENT = "transparent";
+const isValidHex = (value) => /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value);
+const expandHex = (hex) => {
+  const h = hex.replace("#", "");
+  if (h.length === 3) {
+    return `#${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}`.toUpperCase();
+  }
+  return `#${h.toUpperCase()}`;
+};
+const hexToRgb = (hex) => {
+  if (!hex || !isValidHex(hex))
+    return null;
+  const expanded = expandHex(hex).replace("#", "");
+  return {
+    r: parseInt(expanded.substring(0, 2), 16),
+    g: parseInt(expanded.substring(2, 4), 16),
+    b: parseInt(expanded.substring(4, 6), 16)
+  };
+};
+const rgbToHex = (r2, g, b) => `#${((1 << 24) + (r2 << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
+const checkerboardStyle$1 = (size2 = 8) => ({
+  backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+  backgroundSize: `${size2}px ${size2}px`,
+  backgroundPosition: `0 0, 0 ${size2 / 2}px, ${size2 / 2}px -${size2 / 2}px, -${size2 / 2}px 0px`
+});
+const normalizeColorValue = (value) => {
+  if (isValidHex(value)) {
+    return expandHex(value);
+  }
+  const parsed = get$6(value.toLowerCase());
+  if (parsed)
+    return rgbToHex(parsed.value[0], parsed.value[1], parsed.value[2]);
+  return null;
+};
+const useHexInput = (color, onChange) => {
+  const [inputValue, setInputValue] = React.useState(color);
+  const [isFocused2, setIsFocused] = React.useState(false);
+  React.useEffect(() => {
+    if (!isFocused2) {
+      setInputValue(color);
+    }
+  }, [color, isFocused2]);
+  const handleChange = (e3) => {
+    const value = e3.target.value;
+    setInputValue(value);
+    const normalized = normalizeColorValue(value);
+    if (normalized)
+      onChange(normalized);
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    const normalized = normalizeColorValue(inputValue);
+    if (normalized) {
+      setInputValue(normalized);
+      onChange(normalized);
+    } else {
+      setInputValue(color);
+    }
+  };
+  const handleSwatchClick = React.useCallback(
+    (c2) => {
+      if (c2 === TRANSPARENT) {
+        onChange(null);
+      } else {
+        const normalized = normalizeColorValue(c2);
+        onChange(normalized || c2);
+      }
+    },
+    [onChange]
+  );
+  return {
+    inputValue,
+    handleChange,
+    handleFocus,
+    handleBlur,
+    handleSwatchClick
+  };
+};
+const SwatchButton = ({ color, isSelected: isSelected2, onClick }) => /* @__PURE__ */ React.createElement("div", { className: "relative w-full pb-[100%]" }, /* @__PURE__ */ React.createElement(
+  "button",
+  {
+    type: "button",
+    onClick,
+    className: `absolute inset-0 rounded-sm border cursor-pointer transition-all ${isSelected2 ? "border-blue-500 border-2 scale-110" : "border-gray-200 hover:scale-105"}`,
+    style: {
+      backgroundColor: color === TRANSPARENT ? "#FFF" : color,
+      ...color === TRANSPARENT ? checkerboardStyle$1() : {}
+    },
+    "aria-label": color === TRANSPARENT ? "Clear color" : `Select color ${color}`
+  }
+));
+const ColorPreview = ({
+  color,
+  size: size2 = "sm"
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: size2 === "lg" ? "h-16 w-full rounded border border-gray-200 mb-2" : "w-8 h-8 rounded border border-gray-200 flex-shrink-0",
+    style: {
+      backgroundColor: color || TRANSPARENT,
+      ...!color ? checkerboardStyle$1(size2 === "lg" ? 16 : 8) : {}
+    },
+    "aria-label": "Current color preview"
+  }
+);
+const HexInput = ({ value, onChange, onFocus, onBlur, fullWidth }) => /* @__PURE__ */ React.createElement(
+  "input",
+  {
+    type: "text",
+    value: value || "",
+    onChange,
+    onFocus,
+    onBlur,
+    placeholder: "#000000 or color name",
+    className: `shadow-inner px-2 py-1 text-sm border border-gray-200 rounded focus:shadow-outline focus:border-blue-500 focus:outline-none ${fullWidth ? "w-full" : "flex-1 min-w-0"}`
+  }
+);
+const SwatchGrid = ({ colors, selectedColor, onSelect }) => /* @__PURE__ */ React.createElement("div", { className: "mt-2 grid grid-cols-8 gap-1.5" }, colors.map((c2) => /* @__PURE__ */ React.createElement(
+  SwatchButton,
+  {
+    key: c2,
+    color: c2,
+    isSelected: (selectedColor == null ? void 0 : selectedColor.toLowerCase()) === c2.toLowerCase(),
+    onClick: () => onSelect(c2)
+  }
+)));
+const BlockWidget = ({
+  presetColors: presetColors2,
+  color,
+  onChange,
+  width
+}) => {
+  const {
+    inputValue,
+    handleChange,
+    handleFocus,
+    handleBlur,
+    handleSwatchClick
+  } = useHexInput(color, onChange);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "bg-white rounded-lg shadow-lg overflow-hidden",
+      style: { width }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "p-3" }, /* @__PURE__ */ React.createElement(ColorPreview, { color, size: "lg" }), /* @__PURE__ */ React.createElement(
+      HexInput,
+      {
+        value: inputValue,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        fullWidth: true
+      }
+    ), /* @__PURE__ */ React.createElement(
+      SwatchGrid,
+      {
+        colors: presetColors2,
+        selectedColor: color,
+        onSelect: handleSwatchClick
+      }
+    ))
+  );
+};
 var ColorFormat = /* @__PURE__ */ ((ColorFormat2) => {
   ColorFormat2["Hex"] = "hex";
   ColorFormat2["RGB"] = "rgb";
   return ColorFormat2;
 })(ColorFormat || {});
-const rgbToHex = function(color) {
-  return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
-};
 function ParseColorStr(color) {
   if (!color) {
     return null;
   }
-  const colorDescriptor = getColor(color);
+  const colorDescriptor = get$6(color);
   if (!colorDescriptor)
     return null;
   const colorVals = colorDescriptor.value;
@@ -39396,7 +39560,7 @@ const ColorFormatter = {
     },
     getValue(color) {
       const colorVals = [color.r, color.g, color.b, color.a];
-      return toColor.rgb(colorVals);
+      return to$1.rgb(colorVals);
     },
     parse: ParseColorStr
   },
@@ -39405,37 +39569,88 @@ const ColorFormatter = {
     /* Hex */
   ]: {
     getLabel(color) {
-      return rgbToHex(color);
+      return rgbToHex(color.r, color.g, color.b);
     },
     getValue(color) {
       const colorVals = [color.r, color.g, color.b, color.a];
-      return toColor.hex(colorVals);
+      return to$1.hex(colorVals).toUpperCase();
     },
     parse: ParseColorStr
   }
 };
-const { SketchPicker, BlockPicker } = pkg$1;
-const GetTextColorForBackground = function(backgroundColor) {
-  return !backgroundColor || backgroundColor.r * 0.299 + backgroundColor.g * 0.587 + backgroundColor.b * 0.114 > 186 ? "#000000" : "#ffffff";
+const SketchWidget = ({
+  presetColors: presetColors2,
+  color,
+  onChange,
+  width
+}) => {
+  const {
+    inputValue,
+    handleChange,
+    handleFocus,
+    handleBlur,
+    handleSwatchClick
+  } = useHexInput(color, onChange);
+  const currentRgb = hexToRgb(color) || { r: 0, g: 0, b: 0 };
+  const handleRgbChange = (channel, value) => {
+    const num = Math.max(0, Math.min(255, parseInt(value, 10) || 0));
+    const updated = { ...currentRgb, [channel]: num };
+    onChange(rgbToHex(updated.r, updated.g, updated.b));
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-3", style: { width } }, /* @__PURE__ */ React.createElement(
+    HexColorPicker,
+    {
+      color: color || "#000000",
+      onChange,
+      className: "!w-full !h-[150px]"
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "mt-2 flex gap-2 items-center" }, /* @__PURE__ */ React.createElement(ColorPreview, { color }), /* @__PURE__ */ React.createElement(
+    HexInput,
+    {
+      value: inputValue,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "mt-2 flex gap-2" }, ["r", "g", "b"].map((channel) => /* @__PURE__ */ React.createElement("div", { key: channel, className: "flex-1" }, /* @__PURE__ */ React.createElement("label", { className: "block text-xs text-gray-500 mb-0.5" }, channel.toUpperCase()), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "number",
+      min: 0,
+      max: 255,
+      value: currentRgb[channel],
+      onChange: (e3) => handleRgbChange(channel, e3.target.value),
+      className: "shadow-inner w-full px-2 py-1 text-sm border border-gray-200 rounded focus:shadow-outline focus:border-blue-500 focus:outline-none"
+    }
+  )))), /* @__PURE__ */ React.createElement(
+    SwatchGrid,
+    {
+      colors: presetColors2,
+      selectedColor: color,
+      onSelect: handleSwatchClick
+    }
+  ));
+};
+const isLightBackground = function(backgroundColor) {
+  return !backgroundColor || backgroundColor.r * 0.299 + backgroundColor.g * 0.587 + backgroundColor.b * 0.114 > 186;
 };
-const Swatch = ({
-  colorRGBA,
-  colorFormat,
-  unselectable,
-  ...props
-}) => /* @__PURE__ */ React.createElement(
+const getTextColorForBackground = function(backgroundColor) {
+  return isLightBackground(backgroundColor) ? "#000000" : "#FFFFFF";
+};
+const Swatch = ({ colorRGBA, colorFormat, width, ...props }) => /* @__PURE__ */ React.createElement(
   "div",
   {
-    className: "bg-gray-100 rounded-3xl shadow-[0_2px_3px_rgba(0,0,0,0.12)] cursor-pointer w-full m-0",
+    className: "bg-gray-100 rounded shadow-[0_2px_3px_rgba(0,0,0,0.12)] cursor-pointer m-0",
+    style: { width },
     ...props
   },
   /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: "swatch-inner flex items-center justify-center text-[13px] font-bold w-full h-10 rounded-3xl hover:opacity-[.6]",
+      className: "swatch-inner flex items-center justify-center text-[13px] font-bold w-full h-10 rounded hover:opacity-[.6]",
       style: {
         background: colorRGBA ? `rgba(${colorRGBA.r}, ${colorRGBA.g}, ${colorRGBA.b}, ${colorRGBA.a})` : `#fff`,
-        color: GetTextColorForBackground(colorRGBA),
+        color: getTextColorForBackground(colorRGBA),
         transition: "all var(--tina-timing-short) ease-out"
       }
     },
@@ -39451,7 +39666,7 @@ const Popover$2 = ({
 }) => /* @__PURE__ */ React.createElement(
   "div",
   {
-    className: `fixed z-50 before:content-[""] before:absolute before:left-1/2 before:-translate-x-1/2 before:w-[18px] before:h-[14px] before:bg-gray-200 before:z-10 after:content-[""] after:absolute after:left-1/2 after:-translate-x-1/2 after:w-4 after:h-[13px] after:bg-white after:z-20 ${openTop ? "before:bottom-0 before:mt-[1px] before:translate-y-full color-picker-on-top-clip-path after:bottom-0 after:mb-0.5 after:translate-y-full" : "before:top-0 before:mb-[1px] before:-translate-y-full color-picker-clip-path after:top-0 after:mt-0.5 after:-translate-y-full"} ${className}`,
+    className: `fixed z-50 before:content-[""] before:absolute before:left-1/2 before:-translate-x-1/2 before:w-[18px] before:h-[14px] before:bg-white before:z-10 after:content-[""] after:absolute after:left-1/2 after:-translate-x-1/2 after:w-4 after:h-[13px] after:bg-white after:z-20 ${openTop ? "before:bottom-0 before:mt-[1px] before:translate-y-full color-picker-on-top-clip-path after:bottom-0 after:mb-0.5 after:translate-y-full" : "before:top-0 before:mb-[1px] before:-translate-y-full color-picker-clip-path after:top-0 after:mt-0.5 after:-translate-y-full"} ${className}`,
     style: {
       top: triggerBoundingBox ? openTop ? triggerBoundingBox.top : triggerBoundingBox.bottom : 0,
       left: triggerBoundingBox ? triggerBoundingBox.left + triggerBoundingBox.width / 2 : 0,
@@ -39463,7 +39678,6 @@ const Popover$2 = ({
     ...props
   }
 );
-const nullColor = "transparent";
 const presetColors = [
   "#D0021B",
   "#F5A623",
@@ -39481,93 +39695,69 @@ const presetColors = [
   "#9B9B9B",
   "#FFFFFF"
 ];
-const SketchWidget = (props) => /* @__PURE__ */ React.createElement(
-  SketchPicker,
-  {
-    presetColors: props.presetColors,
-    color: props.color,
-    onChange: props.onChange,
-    disableAlpha: props.disableAlpha,
-    width: props.width
-  }
-);
-const BlockWidget = (props) => /* @__PURE__ */ React.createElement(
-  BlockPicker,
-  {
-    colors: props.presetColors,
-    color: props.color,
-    onChange: props.onChange,
-    width: props.width
-  }
-);
 const WIDGETS = { sketch: SketchWidget, block: BlockWidget };
 const ColorPicker = ({
   colorFormat,
   userColors = presetColors,
   widget = "sketch",
+  width,
   input
 }) => {
   const FormPortal = useFormPortal();
   const triggerRef = React.useRef(null);
   const [triggerBoundingBox, setTriggerBoundingBox] = useState(null);
-  const [openTop, setOpenTop] = useState(false);
+  const [displayColorPicker, setDisplayColorPicker] = useState(false);
   const updateTriggerBoundingBox = () => {
-    if (triggerRef.current) {
+    if (triggerRef.current)
       setTriggerBoundingBox(triggerRef.current.getBoundingClientRect());
-    }
   };
-  React.useEffect(() => {
-    if (triggerBoundingBox) {
-      const triggerOffsetTop = triggerBoundingBox.top + triggerBoundingBox.height / 2;
-      const windowHeight = window.innerHeight;
-      if (triggerOffsetTop > windowHeight / 2) {
-        setOpenTop(true);
-      } else {
-        setOpenTop(false);
-      }
-    }
-  }, [triggerBoundingBox]);
+  const openTop = triggerBoundingBox ? triggerBoundingBox.top + triggerBoundingBox.height / 2 > window.innerHeight / 2 : false;
   React.useEffect(() => {
     const delay = 100;
-    let timeout = false;
-    setTimeout(() => {
-      updateTriggerBoundingBox();
-    }, delay);
+    let timeout = null;
+    timeout = setTimeout(updateTriggerBoundingBox, delay);
     const handleResize = () => {
-      clearTimeout(timeout);
+      if (timeout)
+        clearTimeout(timeout);
       timeout = setTimeout(updateTriggerBoundingBox, delay);
     };
     window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [triggerRef.current]);
-  const Widget = WIDGETS[widget];
-  if (!Widget)
-    throw new Error("You must specify a widget type.");
-  const [displayColorPicker, setDisplayColorPicker] = useState(false);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
   const getColorFormat = (colorFormat || ColorFormat.Hex).toLowerCase();
   const getColorRGBA = input.value ? ColorFormatter[getColorFormat].parse(input.value) : null;
-  const handleChange = (pickerColor) => {
-    const color = pickerColor.hex === nullColor ? null : { ...pickerColor.rgb, a: 1 };
-    input.onChange(
-      color ? ColorFormatter[getColorFormat].getValue(color) : null
-    );
-  };
+  const currentHexColor = getColorRGBA ? rgbToHex(getColorRGBA.r, getColorRGBA.g, getColorRGBA.b) : "";
+  const handleChange = useCallback(
+    (hexColor) => {
+      if (!hexColor) {
+        input.onChange(null);
+        return;
+      }
+      const rgb = hexToRgb(hexColor);
+      if (rgb)
+        input.onChange(
+          ColorFormatter[getColorFormat].getValue({ ...rgb, a: 1 })
+        );
+    },
+    [getColorFormat, input]
+  );
   const toggleColorPicker = (event) => {
     event.stopPropagation();
     const display = !displayColorPicker;
     setDisplayColorPicker(display);
-    if (display) {
+    if (display)
       updateTriggerBoundingBox();
-    }
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "relative", ref: triggerRef }, /* @__PURE__ */ React.createElement(
+  const Widget = WIDGETS[widget];
+  if (!Widget)
+    throw new Error("You must specify a widget type.");
+  return /* @__PURE__ */ React.createElement("div", { className: "relative", ref: triggerRef, style: { width } }, /* @__PURE__ */ React.createElement(
     Swatch,
     {
       onClick: toggleColorPicker,
       colorRGBA: getColorRGBA,
-      colorFormat: getColorFormat
+      colorFormat: getColorFormat,
+      width
     }
   ), displayColorPicker && /* @__PURE__ */ React.createElement(FormPortal, null, ({ zIndexShift }) => /* @__PURE__ */ React.createElement(
     Popover$2,
@@ -39587,11 +39777,10 @@ const ColorPicker = ({
       /* @__PURE__ */ React.createElement(
         Widget,
         {
-          presetColors: [...userColors, nullColor],
-          color: getColorRGBA || { r: 0, g: 0, b: 0, a: 0 },
+          presetColors: [...userColors, TRANSPARENT],
+          color: currentHexColor,
           onChange: handleChange,
-          disableAlpha: true,
-          width: "240px"
+          width: width || "240px"
         }
       )
     )
@@ -41338,6 +41527,7 @@ const ColorField = wrapFieldsWithMeta(
         colorFormat: field.colorFormat,
         userColors: field.colors,
         widget: field.widget,
+        width: field.width,
         input
       }
     );
@@ -45485,7 +45675,7 @@ function GridMediaItem({ item, active, onClick }) {
         src: thumbnail,
         alt: item.filename
       }
-    )) : /* @__PURE__ */ React__default.createElement("div", { className: "p-4 w-full flex flex-col gap-4 items-center justify-center" }, /* @__PURE__ */ React__default.createElement(FileIcon, { className: "w-[30%] h-auto fill-gray-300" }), /* @__PURE__ */ React__default.createElement("span", { className: "block text-base text-gray-600 w-full break-words truncate" }, item.filename)))
+    )) : /* @__PURE__ */ React__default.createElement("div", { className: "p-4 w-full flex flex-col gap-4 items-center justify-center" }, /* @__PURE__ */ React__default.createElement(FileIcon, { className: "w-[40%] h-auto fill-gray-300", size: 40 })))
   ));
 }
 const DeleteModal$1 = ({
@@ -46296,12 +46486,12 @@ const Callout = ({
   className = "",
   ...props
 }) => {
-  const commonAlertStyles = "text-sm px-4 py-3 rounded-md border";
+  const commonAlertStyles = "text-sm px-4 py-3 rounded-md border-2 font bg-white text-gray-700 font-medium";
   const styles = {
-    warning: `text-amber-700 bg-amber-100 border-amber-700/20`,
-    info: `text-blue-600 bg-blue-100/50 border-blue-600/20`,
-    success: `text-green-600 bg-green-100/50 border-green-600/20`,
-    error: `text-red-600 bg-red-100/50 border-red-600/20`
+    warning: `border-amber-700/20`,
+    info: `border-blue-600/20`,
+    success: `border-green-600/20`,
+    error: `border-red-600/20`
   };
   const icon = {
     warning: /* @__PURE__ */ React.createElement(MdWarning, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-amber-600" }),
@@ -46390,7 +46580,31 @@ function FiInfo(props) {
 function VscNewFile(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M9.5 1.1l3.4 3.5.1.4v2h-1V6H8V2H3v11h4v1H2.5l-.5-.5v-12l.5-.5h6.7l.3.1zM9 2v3h2.9L9 2zm4 14h-1v-3H9v-1h3V9h1v3h3v1h-3v3z" }, "child": [] }] })(props);
 }
-const version$1 = "3.0.0";
+const NavContext = createContext(void 0);
+const useNav = () => {
+  const context = useContext(NavContext);
+  if (!context) {
+    throw new Error("useNav must be used within a NavProvider");
+  }
+  return context;
+};
+const NavProvider = ({
+  children,
+  defaultOpen = false
+}) => {
+  const [menuIsOpen, setMenuIsOpen] = useState(defaultOpen);
+  const toggleMenu = () => setMenuIsOpen((prev) => !prev);
+  const openMenu = () => setMenuIsOpen(true);
+  const closeMenu = () => setMenuIsOpen(false);
+  const value = {
+    menuIsOpen,
+    toggleMenu,
+    openMenu,
+    closeMenu
+  };
+  return /* @__PURE__ */ React__default.createElement(NavContext.Provider, { value }, children);
+};
+const version$1 = "3.0.2";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -46575,8 +46789,8 @@ const SyncStatusButton = ({
 const Nav = ({
   isLocalMode,
   showHamburger = true,
-  menuIsOpen,
-  toggleMenu,
+  menuIsOpen: menuIsOpenProp,
+  toggleMenu: toggleMenuProp,
   className = "",
   children,
   showCollections,
@@ -46593,6 +46807,10 @@ const Nav = ({
 }) => {
   const cms = useCMS$1();
   const [eventsOpen, setEventsOpen] = React.useState(false);
+  const navContext = React.useContext(NavContext);
+  const menuIsOpen = menuIsOpenProp ?? (navContext == null ? void 0 : navContext.menuIsOpen) ?? false;
+  const toggleMenu = toggleMenuProp ?? (navContext == null ? void 0 : navContext.toggleMenu) ?? (() => {
+  });
   const { contentCollections, authCollection } = collectionsInfo.collections.reduce(
     (acc, collection) => {
       if (collection.isAuthCollection) {
@@ -46615,7 +46833,7 @@ const Nav = ({
     },
     { Site: [] }
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, showHamburger && /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: cn(
@@ -46637,7 +46855,7 @@ const Nav = ({
       style: { maxWidth: `${sidebarWidth}px` },
       ...props
     },
-    /* @__PURE__ */ React.createElement("div", { className: "flex w-full px-4 py-3 justify-between items-center gap-2 border-b border-gray-200" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "flex w-full px-4 py-3 justify-between items-center gap-2 border-b border-gray-200" }, /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800/80 flex-1 gap-1" }, /* @__PURE__ */ React.createElement(TinaExtendedIcon, { className: "h-8 w-auto fill-orange-500" })), /* @__PURE__ */ React.createElement(
       "button",
       {
         className: cn(
@@ -46647,8 +46865,8 @@ const Nav = ({
           toggleMenu();
         }
       },
-      /* @__PURE__ */ React.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
-    ), /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800/80 flex-1 gap-1" }, /* @__PURE__ */ React.createElement(TinaExtendedIcon, { className: "h-8 w-auto fill-orange-500" }))),
+      /* @__PURE__ */ React.createElement(BiX, { className: "h-8 w-auto text-gray-600" })
+    )),
     children,
     /* @__PURE__ */ React.createElement("div", { className: "flex flex-col px-6 flex-1 overflow-auto" }, showCollections && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "flex space-x-1 justify-items-start uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, /* @__PURE__ */ React.createElement("span", null, "Collections"), isLocalMode && /* @__PURE__ */ React.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(
       "a",
@@ -46758,6 +46976,20 @@ const Logout = ({
   };
   return /* @__PURE__ */ React.createElement("button", { onClick: handleLogout, ...buttonProps }, /* @__PURE__ */ React.createElement(BiExit, { className: "w-6 h-auto mr-2" }), " Log Out");
 };
+const NavCloudLink = ({ config }) => {
+  if (config.text) {
+    return /* @__PURE__ */ React__default.createElement("span", { className: "text-base tracking-wide text-gray-500 flex items-center opacity-90" }, config.text, " ", /* @__PURE__ */ React__default.createElement(
+      "a",
+      {
+        target: "_blank",
+        className: "ml-1 text-blue-600 hover:opacity-60",
+        href: config.link.href
+      },
+      config.link.text
+    ));
+  }
+  return /* @__PURE__ */ React__default.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React__default.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React__default.createElement("a", { target: "_blank", href: config.link.href }, config.link.text));
+};
 const ResizeHandle = () => {
   const {
     resizingSidebar,
@@ -47422,7 +47654,7 @@ const Sidebar$1 = ({
               }
             }
           ),
-          RenderNavCloud: ({ config }) => /* @__PURE__ */ React.createElement(SidebarCloudLink$1, { config }),
+          RenderNavCloud: ({ config }) => /* @__PURE__ */ React.createElement(NavCloudLink, { config }),
           RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(
             SidebarCollectionLink,
             {
@@ -47530,20 +47762,6 @@ const SidebarSiteLink = ({
     view.name
   );
 };
-const SidebarCloudLink$1 = ({ config }) => {
-  if (config.text) {
-    return /* @__PURE__ */ React.createElement("span", { className: "text-base tracking-wide text-gray-500 flex items-center opacity-90" }, config.text, " ", /* @__PURE__ */ React.createElement(
-      "a",
-      {
-        target: "_blank",
-        className: "ml-1 text-blue-600 hover:opacity-60",
-        href: config.link.href
-      },
-      config.link.text
-    ));
-  }
-  return /* @__PURE__ */ React.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React.createElement("a", { target: "_blank", href: config.link.href }, config.link.text));
-};
 const SidebarCollectionLink = ({
   Icon = ImFilesEmpty,
   collection,
@@ -47609,6 +47827,25 @@ const SidebarBody = ({ children }) => {
     children
   );
 };
+const NavMenuTrigger = ({
+  className = "",
+  label = "Toggle navigation menu"
+}) => {
+  const { toggleMenu, menuIsOpen } = useNav();
+  if (menuIsOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: `pointer-events-auto p-2 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded ${className}`,
+      onClick: toggleMenu,
+      "aria-label": label,
+      title: label
+    },
+    /* @__PURE__ */ React__default.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
+  );
+};
 const DEFAULT_FIELDS = [
   TextFieldPlugin,
   TextareaFieldPlugin,
@@ -48038,7 +48275,7 @@ function Alerts2({ alerts }) {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "fixed top-0 left-0 p-6 flex flex-col items-center z-[999999]" }, alerts.all.filter((alert) => {
     return alert.level !== "error";
   }).map((alert) => {
-    return /* @__PURE__ */ React__default.createElement(Alert, { key: alert.id, level: alert.level }, alert.level === "info" && /* @__PURE__ */ React__default.createElement(MdInfo, { className: "w-5 h-auto opacity-70" }), alert.level === "success" && /* @__PURE__ */ React__default.createElement(MdCheckCircle, { className: "w-5 h-auto opacity-70" }), alert.level === "warn" && /* @__PURE__ */ React__default.createElement(MdWarning, { className: "w-5 h-auto opacity-70" }), /* @__PURE__ */ React__default.createElement("p", { className: "m-0 flex-1 max-w-[680px] text-left" }, parseUrlsInText(alert.message.toString())), /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React__default.createElement(Alert, { key: alert.id, level: alert.level }, alert.level === "info" && /* @__PURE__ */ React__default.createElement(MdInfo, { className: "w-5 h-auto text-blue-500" }), alert.level === "success" && /* @__PURE__ */ React__default.createElement(MdCheckCircle, { className: "w-5 h-auto text-green-500" }), alert.level === "warn" && /* @__PURE__ */ React__default.createElement(MdWarning, { className: "w-5 h-auto text-yellow-500" }), /* @__PURE__ */ React__default.createElement("p", { className: "m-0 flex-1 max-w-[680px] text-left" }, parseUrlsInText(alert.message.toString())), /* @__PURE__ */ React__default.createElement(
       CloseAlert,
       {
         onClick: () => {
@@ -48079,21 +48316,21 @@ const Alert = ({
   ...props
 }) => {
   const colorClasses = {
-    info: "bg-white border-blue-500 text-blue-600 fill-blue-500",
-    success: "bg-white border-green-500 text-green-600 fill-green-500",
-    warn: "bg-white border-yellow-500 text-yellow-600 fill-yellow-500",
-    error: "bg-white border-red-500 text-red-600 fill-red-500"
+    info: "bg-white",
+    success: "bg-white",
+    warn: "bg-white",
+    error: "bg-white"
   };
   const borderClasses = {
-    info: "border-blue-200",
-    success: "border-green-200",
-    warn: "border-yellow-200",
-    error: "border-red-200"
+    info: "border-blue-500",
+    success: "border-green-500",
+    warn: "border-amber-500",
+    error: "border-red-500"
   };
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: `rounded shadow-lg font-normal cursor-pointer pointer-events-all text-sm transition-all duration-100 ease-out mb-4 max-w-full ${colorClasses[level]}}`,
+      className: `rounded-md shadow-lg font-medium cursor-pointer pointer-events-all text-sm transition-all duration-100 ease-out mb-4 max-w-full text-gray-700 ${colorClasses[level]}`,
       style: {
         animationName: "fly-in-up, fade-in",
         animationTimingFunction: "ease-out",
@@ -48105,7 +48342,7 @@ const Alert = ({
     /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: `flex items-center gap-1.5 w-[350px] rounded-md border p-2 ${borderClasses[level]}`,
+        className: `flex items-center gap-2 w-[350px] rounded-md border px-4 py-3 ${borderClasses[level]}`,
         ...props
       }
     )
@@ -63987,6 +64224,10 @@ const CreateBranchModal = ({
       cms.alerts.success(
         `Branch created successfully - Pull Request at ${result.pullRequestUrl}`
       );
+      if (crudType === "create") {
+        const folderPath = relativePath2.includes("/") ? relativePath2.substring(0, relativePath2.lastIndexOf("/")) : "";
+        window.location.hash = `#/collections/${collection.name}${folderPath ? `/${folderPath}` : ""}`;
+      }
       close2();
     } catch (e3) {
       console.error(e3);
@@ -67140,6 +67381,23 @@ function LinkFloatingToolbar({
 }) {
   const activeCommentId = usePluginOption({ key: "comment" }, "activeId");
   const activeSuggestionId = usePluginOption({ key: "suggestion" }, "activeId");
+  const { api, editor } = useEditorPlugin(LinkPlugin);
+  const isUrlValidator = usePluginOption(LinkPlugin, "isUrl");
+  const [currentUrl, setCurrentUrl] = React.useState("");
+  const [isValidUrl, setIsValidUrl] = React.useState(true);
+  const handleUrlInput = React.useCallback(
+    (e3) => {
+      const value = e3.currentTarget.value;
+      setCurrentUrl(value);
+      if (value && isUrlValidator) {
+        const valid = isUrlValidator(value);
+        setIsValidUrl(valid);
+      } else {
+        setIsValidUrl(true);
+      }
+    },
+    [isUrlValidator]
+  );
   const floatingOptions = React.useMemo(() => {
     return {
       middleware: [
@@ -67183,22 +67441,70 @@ function LinkFloatingToolbar({
   });
   if (hidden)
     return null;
-  const input = /* @__PURE__ */ React.createElement("div", { className: "z-[999999] flex w-[330px] flex-col", ...inputProps }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center pr-1 pl-2 text-muted-foreground" }, /* @__PURE__ */ React.createElement(Link, { className: "size-4" })), /* @__PURE__ */ React.createElement(
-    FloatingLinkUrlInput,
-    {
-      className: inputVariants(),
-      placeholder: "Paste link",
-      "data-plate-focus": true
-    }
-  )), /* @__PURE__ */ React.createElement(Separator, { className: "my-1" }), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center pr-1 pl-2 text-muted-foreground" }, /* @__PURE__ */ React.createElement(Text$2, { className: "size-4" })), /* @__PURE__ */ React.createElement(
-    "input",
+  const input = /* @__PURE__ */ React.createElement(
+    "div",
     {
-      className: inputVariants(),
-      placeholder: "Text to display",
-      "data-plate-focus": true,
-      ...textInputProps
-    }
-  )));
+      className: "z-[999999] flex w-[330px] flex-col relative",
+      ...inputProps
+    },
+    !isValidUrl && currentUrl && /* @__PURE__ */ React.createElement("div", { className: "absolute -top-16 left-0 right-0 z-[1000000] mb-2" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "bg-red-50 border border-red-200 rounded-md p-2 shadow-lg",
+        role: "alert",
+        "aria-live": "polite"
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(CircleX, { className: "size-4 text-red-500 mr-2 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-red-700 text-wrap" }, "Invalid URL. Please prefix link with https:// or use a relative path like /about")),
+      /* @__PURE__ */ React.createElement("div", { className: "absolute -bottom-1 left-4 w-2 h-2 bg-red-50 border-r border-b border-red-200 transform rotate-45" })
+    )),
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center pr-1 pl-2 text-muted-foreground" }, /* @__PURE__ */ React.createElement(Link, { className: "size-4" })), /* @__PURE__ */ React.createElement(
+      FloatingLinkUrlInput,
+      {
+        className: inputVariants(),
+        placeholder: "Paste link",
+        "data-plate-focus": true,
+        onInput: handleUrlInput
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Separator, { className: "my-1" }),
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center pr-1 pl-2 text-muted-foreground" }, /* @__PURE__ */ React.createElement(Text$2, { className: "size-4" })), /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        className: inputVariants(),
+        placeholder: "Text to display",
+        "data-plate-focus": true,
+        ...textInputProps
+      }
+    )),
+    /* @__PURE__ */ React.createElement(Separator, { className: "my-1" }),
+    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-end gap-2 px-2 py-1" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: buttonVariants$2({ size: "sm", variant: "ghost" }),
+        onClick: () => {
+          api.floatingLink.hide();
+        }
+      },
+      "Cancel"
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: buttonVariants$2({
+          size: "sm",
+          variant: "tinaPrimary"
+        }),
+        onClick: () => {
+          if (isValidUrl && currentUrl) {
+            submitFloatingLink(editor);
+          }
+        },
+        disabled: !isValidUrl && !!currentUrl
+      },
+      "OK"
+    ))
+  );
   const editContent = editState.isEditing ? input : /* @__PURE__ */ React.createElement("div", { className: "box-content flex items-center" }, /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -67219,7 +67525,25 @@ function LinkFloatingToolbar({
     },
     /* @__PURE__ */ React.createElement(Unlink, { width: 18 })
   ));
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ref: insertRef, className: popoverVariants(), ...insertProps }, input), /* @__PURE__ */ React.createElement("div", { ref: editRef, className: popoverVariants(), ...editProps }, editContent));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: insertRef,
+      className: popoverVariants(),
+      ...insertProps,
+      style: insertProps.style
+    },
+    input
+  ), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: editRef,
+      className: popoverVariants(),
+      ...editProps,
+      style: editProps.style
+    },
+    editContent
+  ));
 }
 function LinkOpenButton() {
   const editor = useEditorRef();
@@ -120507,8 +120831,7 @@ const Sidebar = ({ cms }) => {
   const collectionsInfo = useGetCollections(cms);
   const screens = cms.plugins.getType("screen").all();
   const cloudConfigs = cms.plugins.getType("cloud-config").all();
-  const isOnDashboard = location.pathname === "/";
-  const [menuIsOpen, setMenuIsOpen] = React__default.useState(isOnDashboard);
+  location.pathname === "/";
   const isLocalMode = (_b = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b.isLocalMode;
   const activeScreens = screens.filter(
     (screen) => {
@@ -120521,8 +120844,6 @@ const Sidebar = ({ cms }) => {
     {
       isLocalMode,
       showHamburger: false,
-      menuIsOpen,
-      toggleMenu: () => setMenuIsOpen((menu) => !menu),
       sidebarWidth: 360,
       showCollections: true,
       collectionsInfo,
@@ -120537,7 +120858,7 @@ const Sidebar = ({ cms }) => {
           Icon: view.Icon ? view.Icon : ImFilesEmpty
         }
       ),
-      RenderNavCloud: ({ config }) => /* @__PURE__ */ React__default.createElement(SidebarCloudLink, { config }),
+      RenderNavCloud: ({ config }) => /* @__PURE__ */ React__default.createElement(NavCloudLink, { config }),
       RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default.createElement(
         SidebarLink,
         {
@@ -120574,20 +120895,6 @@ const SidebarLink = (props) => {
     label
   );
 };
-const SidebarCloudLink = ({ config }) => {
-  if (config.text) {
-    return /* @__PURE__ */ React__default.createElement("span", { className: "text-base tracking-wide text-gray-500 flex items-center opacity-90" }, config.text, " ", /* @__PURE__ */ React__default.createElement(
-      "a",
-      {
-        target: "_blank",
-        className: "ml-1 text-blue-600 hover:opacity-60",
-        href: config.link.href
-      },
-      config.link.text
-    ));
-  }
-  return /* @__PURE__ */ React__default.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React__default.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React__default.createElement("a", { target: "_blank", href: config.link.href }, config.link.text));
-};
 const ErrorDialog = (props) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
@@ -120752,7 +121059,7 @@ const PageWrapper = ({
   headerClassName,
   children
 }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React__default.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React__default.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement(BranchButton, null), /* @__PURE__ */ React__default.createElement(BranchPreviewButton, null))), children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React__default.createElement("div", { className: `py-2 w-full ${headerClassName}` }, /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React__default.createElement(NavMenuTrigger, { className: "ml-2" }), /* @__PURE__ */ React__default.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement(BranchButton, null), /* @__PURE__ */ React__default.createElement(BranchPreviewButton, null))), children);
 };
 const PageHeader = ({
   children
@@ -122485,7 +122792,7 @@ const ScreenPage = () => {
     const selectedScreen = screens.find(
       ({ name }) => slugify(name) === screenName
     );
-    return /* @__PURE__ */ React__default.createElement("div", { className: "relative w-full h-full flex flex-col items-stretch justify-between" }, /* @__PURE__ */ React__default.createElement("div", { className: "py-2 px-6 w-fit " }, /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement(BillingWarning, null)), /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React__default.createElement("div", { className: "relative w-full h-full flex flex-col items-stretch justify-between" }, /* @__PURE__ */ React__default.createElement("div", { className: "py-2 w-full" }, /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React__default.createElement(NavMenuTrigger, { className: "ml-2" }), /* @__PURE__ */ React__default.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React__default.createElement(LocalWarning, null))), /* @__PURE__ */ React__default.createElement(
       "div",
       {
         className: `xl:hidden pl-6 py-5 border-b border-gray-200 bg-white`
@@ -122712,7 +123019,7 @@ const DefaultWrapper = ({
   cms,
   children
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Layout, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-stretch h-dvh overflow-hidden" }, /* @__PURE__ */ React__default.createElement(Sidebar, { cms }), /* @__PURE__ */ React__default.createElement("div", { className: "w-full relative" }, children)));
+  return /* @__PURE__ */ React__default.createElement(Layout, null, /* @__PURE__ */ React__default.createElement(NavProvider, { defaultOpen: false }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-stretch h-dvh overflow-hidden" }, /* @__PURE__ */ React__default.createElement(Sidebar, { cms }), /* @__PURE__ */ React__default.createElement("div", { className: "w-full relative" }, children))));
 };
 const PlainLayout = ({ children }) => {
   return /* @__PURE__ */ React__default.createElement(
@@ -123001,6 +123308,9 @@ export {
   ModalProvider,
   NAMER,
   Nav,
+  NavCloudLink,
+  NavMenuTrigger,
+  NavProvider,
   NumberField,
   NumberFieldPlugin,
   NumberInput,
@@ -123094,6 +123404,7 @@ export {
   useFormPortal,
   useLocalStorage,
   useModalContainer,
+  useNav,
   useScreenPlugin,
   useTinaAuthRedirect,
   wrapFieldWithError,