tinacms 3.0.1 → 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 Swatch = ({
-  colorRGBA,
-  colorFormat,
-  unselectable,
-  ...props
-}) => /* @__PURE__ */ React.createElement(
+const isLightBackground = function(backgroundColor) {
+  return !backgroundColor || backgroundColor.r * 0.299 + backgroundColor.g * 0.587 + backgroundColor.b * 0.114 > 186;
+};
+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
       }
     );
@@ -46414,7 +46604,7 @@ const NavProvider = ({
   };
   return /* @__PURE__ */ React__default.createElement(NavContext.Provider, { value }, children);
 };
-const version$1 = "3.0.1";
+const version$1 = "3.0.2";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -67191,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: [
@@ -67234,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",
     {
@@ -67270,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();

package/dist/toolkit/fields/components/color-picker/block-widget.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { WidgetProps } from './color-input';
+export declare const BlockWidget: React.FC<WidgetProps>;

package/dist/toolkit/fields/components/color-picker/color-input.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+export interface WidgetProps {
+    presetColors: string[];
+    color: string;
+    onChange: (color: string | null) => void;
+    width: string;
+}
+export declare const useHexInput: (color: string, onChange: (color: string | null) => void) => {
+    inputValue: string;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleSwatchClick: (c: string) => void;
+};
+export declare const SwatchButton: React.FC<{
+    color: string;
+    isSelected: boolean;
+    onClick: () => void;
+}>;
+export declare const ColorPreview: React.FC<{
+    color: string;
+    size?: 'sm' | 'lg';
+}>;
+export declare const HexInput: React.FC<{
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    fullWidth?: boolean;
+}>;
+export declare const SwatchGrid: React.FC<{
+    colors: string[];
+    selectedColor: string;
+    onSelect: (color: string) => void;
+}>;

package/dist/toolkit/fields/components/color-picker/color-picker.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { ColorFormat } from './color-formatter';
-type WrappedFieldProps = any;
+interface FieldInput {
+    value: string | null;
+    onChange: (value: string | null) => void;
+}
 interface Props {
     colorFormat: ColorFormat;
     userColors: string[];
     widget?: 'sketch' | 'block';
-    input: WrappedFieldProps['input'];
+    width?: string;
+    input: FieldInput;
 }
 export declare const ColorPicker: React.FC<Props>;
 export {};

package/dist/toolkit/fields/components/color-picker/color-utils.d.ts

@@ -0,0 +1,37 @@
+export declare const TRANSPARENT = "transparent";
+export declare const isValidHex: (value: string) => boolean;
+export declare const expandHex: (hex: string) => string;
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Converts RGB color values to a hex color string (e.g., "#FF0000" for red).
+ *
+ * How it works:
+ * We need to convert three numbers (r, g, b) each ranging 0-255 into a 6-digit hex string.
+ * For example: rgb(255, 128, 0) should become "#FF8000"
+ *
+ * The bit-shifting approach combines all three values into one number:
+ * - (1 << 24) = 16777216 (0x1000000) - This adds a leading '1' to guarantee we always
+ *   get 7 hex digits, which we later remove. Without this, rgb(0, 0, 255) would give
+ *   us "FF" instead of "0000FF".
+ * - (r << 16) shifts red left by 16 bits, placing it in positions for the first two hex digits
+ * - (g << 8) shifts green left by 8 bits, placing it in positions for the middle two hex digits
+ * - b stays as-is, occupying the last two hex digits
+ *
+ * Example with rgb(255, 128, 0):
+ *   16777216 + (255 << 16) + (128 << 8) + 0
+ *   = 16777216 + 16711680 + 32768 + 0
+ *   = 33521664
+ *   = 0x1FF8000 (as hex string: "1FF8000")
+ *   After slice(1): "FF8000"
+ *   Final result: "#FF8000"
+ */
+export declare const rgbToHex: (r: number, g: number, b: number) => string;
+export declare const checkerboardStyle: (size?: number) => {
+    backgroundImage: string;
+    backgroundSize: string;
+    backgroundPosition: string;
+};

package/dist/toolkit/fields/components/color-picker/sketch-widget.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { WidgetProps } from './color-input';
+export declare const SketchWidget: React.FC<WidgetProps>;

package/dist/toolkit/fields/plugins/color-field-plugin.d.ts

@@ -4,6 +4,7 @@ export interface ColorFieldProps {
     colorFormat: string;
     colors: string[];
     widget?: 'sketch' | 'block';
+    width?: string;
 }
 export declare const ColorField: (props: import("./wrap-field-with-meta").InputFieldType<InputProps, ColorFieldProps>) => React.JSX.Element;
 export declare const ColorFieldPlugin: {

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/editor.d.ts

@@ -11,7 +11,7 @@ export declare const EditorContainer: {
 declare const editorVariants: (props?: {
     disabled?: boolean;
     focused?: boolean;
-    variant?: "default" | "select" | "none" | "comment" | "demo" | "ai" | "aiChat" | "fullWidth";
+    variant?: "default" | "select" | "none" | "fullWidth" | "comment" | "demo" | "ai" | "aiChat";
 } & import("class-variance-authority/types").ClassProp) => string;
 export type EditorProps = PlateContentProps & VariantProps<typeof editorVariants>;
 export declare const Editor: React.ForwardRefExoticComponent<Omit<import("@udecode/plate").EditableProps, "decorate"> & {
@@ -22,6 +22,6 @@ export declare const Editor: React.ForwardRefExoticComponent<Omit<import("@udeco
 } & VariantProps<(props?: {
     disabled?: boolean;
     focused?: boolean;
-    variant?: "default" | "select" | "none" | "comment" | "demo" | "ai" | "aiChat" | "fullWidth";
+    variant?: "default" | "select" | "none" | "fullWidth" | "comment" | "demo" | "ai" | "aiChat";
 } & import("class-variance-authority/types").ClassProp) => string> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/plate-ui/button.d.ts

@@ -3,12 +3,12 @@ import { type VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: {
     isMenu?: boolean;
     size?: "default" | "none" | "icon" | "sm" | "lg" | "sms" | "xs";
-    variant?: "default" | "link" | "secondary" | "ghost" | "destructive" | "outline" | "inlineLink";
+    variant?: "default" | "link" | "secondary" | "ghost" | "destructive" | "outline" | "inlineLink" | "tinaPrimary";
 } & import("class-variance-authority/types").ClassProp) => string;
 export declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean;
 } & VariantProps<(props?: {
     isMenu?: boolean;
     size?: "default" | "none" | "icon" | "sm" | "lg" | "sms" | "xs";
-    variant?: "default" | "link" | "secondary" | "ghost" | "destructive" | "outline" | "inlineLink";
+    variant?: "default" | "link" | "secondary" | "ghost" | "destructive" | "outline" | "inlineLink" | "tinaPrimary";
 } & import("class-variance-authority/types").ClassProp) => string> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/components/plate-ui/command.d.ts

@@ -6,7 +6,7 @@ export declare const Command: React.ForwardRefExoticComponent<Omit<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -22,7 +22,7 @@ export declare const Command: React.ForwardRefExoticComponent<Omit<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -68,7 +68,7 @@ export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -77,14 +77,14 @@ export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -93,7 +93,7 @@ export declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
@@ -102,7 +102,7 @@ export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "onSelect"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "disabled" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/package.json

@@ -2,7 +2,7 @@
   "name": "tinacms",
   "type": "module",
   "typings": "dist/index.d.ts",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "main": "dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -105,7 +105,7 @@
     "monaco-editor": "0.31.0",
     "prism-react-renderer": "^2.4.1",
     "prop-types": "15.7.2",
-    "react-color": "^2.19.3",
+    "react-colorful": "^5.6.1",
     "react-datetime": "^3.3.1",
     "react-day-picker": "^9.11.1",
     "react-dropzone": "14.2.3",
@@ -119,7 +119,7 @@
     "zod": "^3.24.2",
     "@tinacms/mdx": "2.0.0",
     "@tinacms/schema-tools": "2.0.0",
-    "@tinacms/search": "1.1.4"
+    "@tinacms/search": "1.1.5"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^10.8.1",
@@ -133,11 +133,9 @@
     "@types/node": "^22.13.1",
     "@types/prop-types": "^15.7.14",
     "@types/react": "^18.3.18",
-    "@types/react-color": "^3.0.13",
     "@types/react-dom": "^18.3.5",
     "happy-dom": "15.10.2",
     "identity-obj-proxy": "^3.0.0",
-    "isomorphic-fetch": "^3.0.0",
     "jest-file-snapshot": "^0.7.0",
     "lowlight": "^3.3.0",
     "next": "14.2.10",
@@ -149,7 +147,7 @@
     "typescript": "^5.7.3",
     "vite": "^5.4.14",
     "vitest": "^2.1.9",
-    "@tinacms/scripts": "1.4.1"
+    "@tinacms/scripts": "1.4.2"
   },
   "peerDependencies": {
     "react": ">=16.14.0",