tinacms 0.0.0-e48ff80-20251203000400 → 0.0.0-e52f289-20251216060413

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, History, 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"
       }
     }
   }
@@ -38720,9 +38721,6 @@ function BiListUl(props) {
 function BiLockAlt(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M12 2C9.243 2 7 4.243 7 7v3H6c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-8c0-1.103-.897-2-2-2h-1V7c0-2.757-2.243-5-5-5zm6 10 .002 8H6v-8h12zm-9-2V7c0-1.654 1.346-3 3-3s3 1.346 3 3v3H9z" }, "child": [] }] })(props);
 }
-function BiLock(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M12 2C9.243 2 7 4.243 7 7v2H6c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2h-1V7c0-2.757-2.243-5-5-5zM9 7c0-1.654 1.346-3 3-3s3 1.346 3 3v2H9V7zm9.002 13H13v-2.278c.595-.347 1-.985 1-1.722 0-1.103-.897-2-2-2s-2 .897-2 2c0 .736.405 1.375 1 1.722V20H6v-9h12l.002 9z" }, "child": [] }] })(props);
-}
 function BiMenu(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" }, "child": [] }] })(props);
 }
@@ -39367,20 +39365,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 +39557,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 +39566,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 +39663,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 +39675,6 @@ const Popover$2 = ({
     ...props
   }
 );
-const nullColor = "transparent";
 const presetColors = [
   "#D0021B",
   "#F5A623",
@@ -39481,93 +39692,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 +39774,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 +41524,7 @@ const ColorField = wrapFieldsWithMeta(
         colorFormat: field.colorFormat,
         userColors: field.colors,
         widget: field.widget,
+        width: field.width,
         input
       }
     );
@@ -43781,7 +43968,7 @@ const Badge = ({
     children
   );
 };
-const tableHeadingStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider sticky top-0 bg-gray-100 z-20 border-b-2 border-gray-200";
+const tableHeadingStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider sticky top-0 bg-gray-100 z-20 border-b-2 border-gray-200 ";
 function formatBranchName(str) {
   const pattern = /[^/\w-]+/g;
   const formattedStr = str.replace(pattern, "-");
@@ -44017,6 +44204,9 @@ const BranchSelector = ({
   const [search, setSearch] = React.useState("");
   const [filter2, setFilter] = React.useState("content");
   const [sortValue, setSortValue] = React.useState("default");
+  const [selectedBranch, setSelectedBranch] = React.useState(
+    null
+  );
   const cms = useCMS$1();
   const filteredBranchList = getFilteredBranchList(
     branchList,
@@ -44076,7 +44266,19 @@ const BranchSelector = ({
         }
       ]
     }
-  ))), filteredBranchList.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "block relative text-gray-300 italic py-1" }, "No branches to display"), filteredBranchList.length > 0 && /* @__PURE__ */ React.createElement(TooltipProvider$1, null, /* @__PURE__ */ React.createElement("div", { className: "min-w-[192px] max-h-[24rem] overflow-y-auto w-full h-full rounded-lg shadow-inner bg-white border border-gray-200" }, /* @__PURE__ */ React.createElement("table", { className: "w-full table-fixed" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-20 bg-gray-100 border-b-2 border-gray-200" }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { className: `${tableHeadingStyle} max-w-[30%]` }, "Branch Name"), /* @__PURE__ */ React.createElement("th", { className: tableHeadingStyle }, "Last Updated"), /* @__PURE__ */ React.createElement("th", { className: tableHeadingStyle }), /* @__PURE__ */ React.createElement("th", { className: tableHeadingStyle }))), /* @__PURE__ */ React.createElement("tbody", null, filteredBranchList.map((branch) => /* @__PURE__ */ React.createElement(
+  ))), filteredBranchList.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "block relative text-gray-300 italic py-1" }, "No branches to display"), filteredBranchList.length > 0 && /* @__PURE__ */ React.createElement(TooltipProvider$1, null, /* @__PURE__ */ React.createElement("div", { className: "rounded-lg border border-gray-200 overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-[192px] max-h-[24rem] overflow-y-auto w-full h-full shadow-inner bg-white" }, /* @__PURE__ */ React.createElement("table", { className: "w-full table-auto max-h-[24rem]" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-20 bg-gray-100 border-b-2 border-gray-200" }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { className: `${tableHeadingStyle} w-auto` }, "Branch Name"), /* @__PURE__ */ React.createElement(
+    "th",
+    {
+      className: `${tableHeadingStyle} w-0 whitespace-nowrap text-left`
+    },
+    "Last Updated"
+  ), /* @__PURE__ */ React.createElement(
+    "th",
+    {
+      className: `${tableHeadingStyle} w-0 whitespace-nowrap text-left`
+    },
+    "Pull Request"
+  ))), /* @__PURE__ */ React.createElement("tbody", null, filteredBranchList.map((branch) => /* @__PURE__ */ React.createElement(
     BranchItem,
     {
       key: branch.name,
@@ -44085,9 +44287,24 @@ const BranchSelector = ({
       onChange,
       refreshBranchList,
       previewFunction,
-      cms
+      cms,
+      selectedBranch,
+      onSelectBranch: setSelectedBranch
     }
-  )))))));
+  ))))))), /* @__PURE__ */ React.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React.createElement(
+    Button$2,
+    {
+      variant: "primary",
+      onClick: () => {
+        onChange(selectedBranch);
+      },
+      disabled: !selectedBranch || selectedBranch === currentBranch
+    },
+    "Open branch in editor"
+  )));
+};
+const extractPullRequestId = (url) => {
+  return url.split("/").pop() || "";
 };
 const BranchItem = ({
   branch,
@@ -44095,9 +44312,11 @@ const BranchItem = ({
   onChange,
   refreshBranchList,
   previewFunction,
-  cms
+  cms,
+  selectedBranch,
+  onSelectBranch
 }) => {
-  var _a2, _b;
+  var _a2;
   const [creatingPR, setCreatingPR] = React.useState(false);
   const handleCreatePullRequest = async () => {
     if (creatingPR)
@@ -44121,62 +44340,63 @@ const BranchItem = ({
     }
   };
   const isCurrentBranch = branch.name === currentBranch;
+  const isSelected2 = selectedBranch === branch.name;
   const indexingStatus = (_a2 = branch == null ? void 0 : branch.indexStatus) == null ? void 0 : _a2.status;
+  const handleRowClick = () => {
+    if (indexingStatus === "complete" && !isCurrentBranch) {
+      onSelectBranch(isSelected2 ? null : branch.name);
+    }
+  };
   return /* @__PURE__ */ React.createElement(
     "tr",
     {
-      className: `text-base border-l-0 border-t-0 border-r-0 outline-none transition-all ease-out duration-150 ${indexingStatus !== "complete" ? "bg-gray-50 text-gray-400" : isCurrentBranch ? "bg-blue-50 text-blue-800 border-b-0" : "border-b-2 border-gray-50"}`
+      onClick: handleRowClick,
+      className: `text-base border-l-0 transition-colors border-t-0 border-r-0 outline-none transition-all ease-out duration-150 ${indexingStatus !== "complete" ? "bg-gray-50 text-gray-400" : isCurrentBranch ? "border-b-2 border-gray-50" : isSelected2 ? "bg-blue-100 text-blue-900 border-b-2 border-blue-50 cursor-pointer" : "border-b-2 border-gray-50 hover:bg-gray-50/50 cursor-pointer"}`
     },
-    /* @__PURE__ */ React.createElement("td", { className: "pl-3 pr-3 py-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 min-w-0" }, branch.protected && /* @__PURE__ */ React.createElement(BiLock, { className: "w-5 h-auto opacity-70 text-blue-500 flex-shrink-0" }), /* @__PURE__ */ React.createElement(Tooltip$1, { delayDuration: 300 }, /* @__PURE__ */ React.createElement(TooltipTrigger$1, { asChild: true }, /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight truncate block min-w-0 cursor-default" }, branch.name)), /* @__PURE__ */ React.createElement(TooltipPortal, null, /* @__PURE__ */ React.createElement(TooltipContent$1, { side: "top" }, branch.name)))), indexingStatus !== "complete" && /* @__PURE__ */ React.createElement("div", { className: "w-fit mt-1" }, /* @__PURE__ */ React.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status })))),
+    /* @__PURE__ */ React.createElement(
+      "td",
+      {
+        className: `pl-3 pr-3 max-w-xs ${isCurrentBranch ? "py-2.5" : "py-1.5"}`
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 min-w-0" }, branch.protected ? /* @__PURE__ */ React.createElement(BiLockAlt, { className: "w-4 h-auto opacity-70 text-blue-500 flex-shrink-0" }) : /* @__PURE__ */ React.createElement(BiGitBranch, { className: "w-4 h-auto opacity-70 text-gray-600 flex-shrink-0" }), /* @__PURE__ */ React.createElement(Tooltip$1, { delayDuration: 300 }, /* @__PURE__ */ React.createElement(TooltipTrigger$1, { asChild: true }, /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight truncate block min-w-0 cursor-default" }, branch.name)), /* @__PURE__ */ React.createElement(TooltipPortal, null, /* @__PURE__ */ React.createElement(TooltipContent$1, { side: "top" }, branch.name)))), isCurrentBranch && /* @__PURE__ */ React.createElement("div", { className: "w-fit mt-1" }, /* @__PURE__ */ React.createElement(
+        Badge,
+        {
+          calloutStyle: "info",
+          className: "w-fit flex-shrink-0",
+          displayIcon: false
+        },
+        /* @__PURE__ */ React.createElement(BiPencil, { className: "w-3 h-auto inline-block mr-1" }),
+        "Currently editing"
+      )), indexingStatus !== "complete" && /* @__PURE__ */ React.createElement("div", { className: "w-fit mt-1" }, /* @__PURE__ */ React.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status })))
+    ),
     /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 min-w-0" }, creatingPR ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight whitespace-nowrap" }, formatDistanceToNow$1(new Date(branch.indexStatus.timestamp), {
       addSuffix: true
     }))),
-    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 text-left" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 flex", onClick: (e3) => e3.stopPropagation() }, branch.githubPullRequestUrl ? /* @__PURE__ */ React.createElement(
       Button$2,
       {
         variant: "white",
         size: "custom",
         onClick: () => {
-          onChange(branch.name);
+          window.open(branch.githubPullRequestUrl, "_blank");
         },
-        className: "cursor-pointer text-sm h-9 px-4 flex items-center gap-1"
+        className: "cursor-pointer h-9 px-2 flex items-center gap-1",
+        title: "Open Git Pull Request"
       },
-      /* @__PURE__ */ React.createElement(BiPencil, { className: "h-4 w-auto text-blue-500 opacity-70 -mt-px" }),
-      " ",
-      "Select"
-    ), indexingStatus === "complete" && isCurrentBranch && /* @__PURE__ */ React.createElement(Badge, { calloutStyle: "info", className: "w-fit", displayIcon: false }, /* @__PURE__ */ React.createElement("span", null, "Selected"))),
-    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 text-right" }, /* @__PURE__ */ React.createElement(
-      OverflowMenu$1,
-      {
-        toolbarItems: [
-          branch.githubPullRequestUrl && {
-            name: "github-pr",
-            label: "View in GitHub",
-            Icon: /* @__PURE__ */ React.createElement(BiLinkExternal, { className: "w-5 h-auto text-blue-500 opacity-70" }),
-            onMouseDown: () => {
-              window.open(branch.githubPullRequestUrl, "_blank");
-            }
-          },
-          !branch.githubPullRequestUrl && !branch.protected && !creatingPR && cms.api.tina.usingProtectedBranch() && {
-            name: "create-pr",
-            label: "Create Pull Request",
-            Icon: /* @__PURE__ */ React.createElement(BiGitBranch, { className: "w-5 h-auto text-blue-500 opacity-70" }),
-            onMouseDown: () => handleCreatePullRequest()
-          },
-          typeof previewFunction === "function" && ((_b = previewFunction({ branch: branch.name })) == null ? void 0 : _b.url) && {
-            name: "preview",
-            label: "Preview",
-            onMouseDown: () => {
-              var _a3;
-              const previewUrl = (_a3 = previewFunction({
-                branch: branch.name
-              })) == null ? void 0 : _a3.url;
-              window.open(previewUrl, "_blank");
-            }
-          }
-        ].filter(Boolean)
-      }
-    ))
+      /* @__PURE__ */ React.createElement(BiLinkExternal, { className: "h-3.5 w-auto text-gray-700 flex-shrink-0" }),
+      /* @__PURE__ */ React.createElement("span", { className: "text-sm truncate max-w-[120px]" }, "PR: ", extractPullRequestId(branch.githubPullRequestUrl))
+    ) : !branch.protected && !creatingPR && cms.api.tina.usingProtectedBranch() ? /* @__PURE__ */ React.createElement(
+      Button$2,
+      {
+        variant: "white",
+        size: "custom",
+        onClick: handleCreatePullRequest,
+        className: "cursor-pointer h-9 px-2 flex items-center gap-1",
+        title: "Create Pull Request"
+      },
+      /* @__PURE__ */ React.createElement(BiGitBranch, { className: "h-3.5 w-auto text-gray-700 flex-shrink-0" }),
+      /* @__PURE__ */ React.createElement("span", { className: "text-sm whitespace-nowrap" }, "Create PR")
+    ) : null)
   );
 };
 const IndexStatus = ({ indexingStatus }) => {
@@ -45485,7 +45705,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 +46516,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" }),
@@ -46414,7 +46634,7 @@ const NavProvider = ({
   };
   return /* @__PURE__ */ React__default.createElement(NavContext.Provider, { value }, children);
 };
-const version$1 = "3.0.0";
+const version$1 = "3.1.0";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -47100,8 +47320,25 @@ const Emoji$1 = ({ className = "", ...props }) => /* @__PURE__ */ React.createEl
     ...props
   }
 );
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn$1(
+      "z-[10000] overflow-hidden rounded bg-[#FFF] px-3 py-1.5 text-xs text-[#504E5E] shadow-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+)));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 const minimumTimeToShowLoadingIndicator = 1e3;
 const FormsView = ({ loadingPlaceholder } = {}) => {
+  var _a2, _b;
   const cms = useCMS$1();
   const { setFormIsPristine } = React.useContext(SidebarContext);
   const [isShowingLoading, setIsShowingLoading] = React.useState(true);
@@ -47140,7 +47377,15 @@ const FormsView = ({ loadingPlaceholder } = {}) => {
     return /* @__PURE__ */ React.createElement(FormLists, { isEditing });
   }
   const formMetas = cms.plugins.all("form:meta");
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, activeForm && /* @__PURE__ */ React.createElement(FormWrapper$1, { isEditing, isMultiform }, /* @__PURE__ */ React.createElement(FormHeader, { activeForm }), formMetas == null ? void 0 : formMetas.map((meta) => /* @__PURE__ */ React.createElement(React.Fragment, { key: meta.name }, /* @__PURE__ */ React.createElement(meta.Component, null))), /* @__PURE__ */ React.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine })));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, activeForm && /* @__PURE__ */ React.createElement(FormWrapper$1, { isEditing, isMultiform }, /* @__PURE__ */ React.createElement(
+    FormHeader,
+    {
+      activeForm,
+      branch: cms.api.admin.api.branch,
+      repoProvider: cms.api.admin.api.schema.config.config.repoProvider,
+      isLocalMode: (_b = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b.isLocalMode
+    }
+  ), formMetas == null ? void 0 : formMetas.map((meta) => /* @__PURE__ */ React.createElement(React.Fragment, { key: meta.name }, /* @__PURE__ */ React.createElement(meta.Component, null))), /* @__PURE__ */ React.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine })));
 };
 const FormWrapper$1 = ({ isEditing, children }) => {
   return /* @__PURE__ */ React.createElement(
@@ -47161,9 +47406,54 @@ const FormWrapper$1 = ({ isEditing, children }) => {
     children
   );
 };
-const FormHeader = ({ activeForm }) => {
+const FormHeader = ({
+  activeForm,
+  repoProvider,
+  branch,
+  isLocalMode
+}) => {
   const { formIsPristine } = React.useContext(SidebarContext);
-  return /* @__PURE__ */ React.createElement("div", { className: "px-4 pt-2 pb-4 flex flex-row flex-nowrap justify-between items-center gap-2 bg-gradient-to-t from-white to-gray-50" }, /* @__PURE__ */ React.createElement(MultiformSelector, { activeForm }), /* @__PURE__ */ React.createElement(FormBreadcrumbs, { className: "w-[calc(100%-3rem)]" }), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }));
+  return /* @__PURE__ */ React.createElement("div", { className: "px-4 pt-2 pb-4 flex flex-row flex-nowrap justify-between items-center gap-2 bg-gradient-to-t from-white to-gray-50" }, /* @__PURE__ */ React.createElement(MultiformSelector, { activeForm }), /* @__PURE__ */ React.createElement(FormBreadcrumbs, { className: "w-[calc(100%-3rem)]" }), /* @__PURE__ */ React.createElement(
+    FileHistoryProvider,
+    {
+      defaultBranchName: repoProvider == null ? void 0 : repoProvider.defaultBranchName,
+      historyUrl: repoProvider == null ? void 0 : repoProvider.historyUrl,
+      contentRelativePath: activeForm.tinaForm.path,
+      tinaBranch: branch,
+      isLocalMode
+    }
+  ), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }));
+};
+const FileHistoryProvider = ({
+  contentRelativePath,
+  tinaBranch,
+  defaultBranchName,
+  historyUrl,
+  isLocalMode
+}) => {
+  if (!historyUrl) {
+    return null;
+  }
+  const branch = isLocalMode ? defaultBranchName || tinaBranch : tinaBranch;
+  if (!branch) {
+    return null;
+  }
+  const { url } = historyUrl({
+    relativePath: contentRelativePath,
+    branch
+  });
+  if (!url) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement("button", { type: "button" }, /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      className: "flex items-center gap-1 border-[0.5px] hover:bg-gray-300/10 transition-all duration-300 border-gray-300 rounded-md p-2"
+    },
+    /* @__PURE__ */ React.createElement(History, { className: "size-4 text-gray-700" })
+  ))), /* @__PURE__ */ React.createElement(TooltipContent, { side: "top", className: "shadow-md" }, "View file history")));
 };
 const FormBreadcrumbs = ({
   rootBreadcrumbName,
@@ -48082,10 +48372,10 @@ function Alerts2({ alerts }) {
   if (!alerts.all.length) {
     return null;
   }
-  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 /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "fixed top-6 left-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: () => {
@@ -48126,21 +48416,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",
@@ -48152,7 +48442,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
       }
     )
@@ -48416,7 +48706,7 @@ const BranchButton = ({ className = "" }) => {
       variant: "secondary",
       size: "custom",
       className: cn(
-        "pointer-events-auto px-3 py-3 flex shrink gap-1 items-center justify-between",
+        "pointer-events-auto px-3 py-3 flex shrink gap-1 items-center justify-between max-w-sm",
         className
       ),
       onClick: () => setOpen(true),
@@ -67191,6 +67481,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: [
@@ -67234,22 +67541,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",
     {
@@ -67270,7 +67625,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();
@@ -120794,22 +121167,6 @@ const PageHeader = ({
   return /* @__PURE__ */ React__default.createElement("div", { className: "pt-4 pb-2 px-6" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex justify-between items-end" }, children));
 };
 const PageBody = ({ children }) => /* @__PURE__ */ React__default.createElement("div", { className: "py-4 px-6" }, children);
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn$1(
-      "z-[10000] overflow-hidden rounded bg-[#FFF] px-3 py-1.5 text-xs text-[#504E5E] shadow-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 origin-[--radix-tooltip-content-transform-origin]",
-      className
-    ),
-    ...props
-  }
-)));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 const folderRegex = /^.*\/~\/*(.*)$/;
 const parentFolder = (folder) => {
   return {
@@ -122435,6 +122792,7 @@ const RenderForm = ({
   collection,
   mutationInfo
 }) => {
+  var _a2, _b, _c, _d;
   const [formIsPristine, setFormIsPristine] = useState(true);
   const schema = cms.api.tina.schema;
   const schemaCollection = schema.getCollection(collection.name);
@@ -122506,6 +122864,15 @@ const RenderForm = ({
         className: "w-[calc(100%-3rem)]",
         rootBreadcrumbName: `${filename}.${collection.format}`
       }
+    ), /* @__PURE__ */ React__default.createElement(
+      FileHistoryProvider,
+      {
+        defaultBranchName: (_a2 = cms.api.admin.api.schema.config.config.repoProvider) == null ? void 0 : _a2.defaultBranchName,
+        historyUrl: (_b = cms.api.admin.api.schema.config.config.repoProvider) == null ? void 0 : _b.historyUrl,
+        contentRelativePath: relativePath2,
+        tinaBranch: cms.api.admin.api.branch,
+        isLocalMode: (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isLocalMode
+      }
     ), /* @__PURE__ */ React__default.createElement(FormStatus, { pristine: formIsPristine }))
   ), activeForm && /* @__PURE__ */ React__default.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine }));
 };