tinacms 3.14.3 → 3.15.0

package/dist/admin/components/ErrorDialog.d.ts

@@ -1,6 +1,9 @@
+import type { TinaCMS } from '@tinacms/toolkit';
 import React from 'react';
 export declare const ErrorDialog: (props: {
-    title: string;
+    /** @deprecated Pass the title to `cms.alerts.error` so it shows in the modal header. */
+    title?: string;
     message: string;
     error: Error;
 }) => React.JSX.Element;
+export declare const showErrorModal: (title: string, message: string, cms: TinaCMS) => void;

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { useDocumentCreatorPlugin } from './hooks/use-content-creator';
 export { TinaAdmin } from './admin';
 export { RouteMappingPlugin } from './admin/plugins/route-mapping';
 export { TinaAdminApi } from './admin/api';
-export { ErrorDialog } from './admin/components/ErrorDialog';
+export { ErrorDialog, showErrorModal } from './admin/components/ErrorDialog';
 export * from './toolkit';
 export { Form } from './toolkit/forms/form';
 export { MdxFieldPluginExtendible } from '@tinacms/toolkit';

package/dist/index.js

@@ -7,6 +7,8 @@ import React__default, { useState, useCallback, useRef, useEffect, createContext
 import { createPortal } from "react-dom";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { CircleAlert, X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Heading6 as Heading6$1, Heading5 as Heading5$1, Heading4 as Heading4$1, Heading3 as Heading3$1, Heading2 as Heading2$1, Heading1 as Heading1$1, ChevronRight, Twitter, SunMedium, Moon, SeparatorHorizontal, Eye, Link2Off, Underline, Trash, Text, Table as Table$1, Superscript, Subscript, Strikethrough, Baseline, Highlighter, Settings, RectangleHorizontal, RotateCcw, Pilcrow, Outdent, MoreHorizontal, Minus, WrapText, Keyboard, Indent, ExternalLink, Smile, Edit2, GripVertical, MessageSquarePlus, MessageSquare, Ungroup, Combine, RectangleVertical, FileCode, PaintBucket, ChevronsUpDown, Quote, AlignRight as AlignRight$1, AlignLeft as AlignLeft$1, AlignJustify, AlignCenter as AlignCenter$1, Plus, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, Info, CircleCheck as CircleCheck$1, CircleIcon, ChevronDownIcon as ChevronDownIcon$1, File as File$1, ChevronUp, Edit, Pencil, Clock, CalendarCheck, Calendar as Calendar$1, CalendarDays, RotateCw, ChevronLeft, WifiOff, TriangleAlert, RefreshCw, GitBranch, CircleHelp, Loader2, Lock, ArrowUpDown, GitFork, Globe, Copy, Folder as Folder$1, Clapperboard, LayoutGrid, List as List$1, CloudUpload, ArrowDownToLine, TextCursorInput, Images, AlertCircle, Image, Database, CheckCircle2, ImageOff, KeyRound, Cloud, LoaderCircle, ScrollText, RefreshCwOff, OctagonAlert, Menu, FilePlus, LogOut, FileStack, FolderOpen, History, Users, PanelLeft, Files, User, FileText, GitBranchIcon, Circle as Circle$1, ListOrdered, Grid3x3Icon, CircleX, Link, Unlink, SquarePen, Trash2, House, Unlock } from "lucide-react";
+import { isSafeCssColor } from "@tinacms/mdx/sanitize-css-color";
 import { withRef, cn as cn$1, withCn, createPrimitiveElement, withVariants, withProps, PortalBody, useComposedRef as useComposedRef$1 } from "@udecode/cn";
 import { BoldPlugin, ItalicPlugin, StrikethroughPlugin, UnderlinePlugin, CodePlugin, BasicMarksPlugin } from "@udecode/plate-basic-marks/react";
 import { BlockquotePlugin } from "@udecode/plate-block-quote/react";
@@ -18,9 +20,9 @@ import { useLink, LinkPlugin, useLinkToolbarButtonState, useLinkToolbarButton, u
 import { BulletedListPlugin, NumberedListPlugin, ListItemPlugin, TodoListPlugin, useListToolbarButtonState, useListToolbarButton, ListPlugin } from "@udecode/plate-list/react";
 import { SlashInputPlugin, SlashPlugin } from "@udecode/plate-slash-command/react";
 import { TablePlugin, TableRowPlugin, useTableCellElement, TableProvider, useTableElement, useTableMergeState, useTableBordersDropdownMenuContentState, TableCellPlugin, TableCellHeaderPlugin } from "@udecode/plate-table/react";
-import { PlateElement, useReadOnly, useElement, PlateLeaf, useSelected, useFocused, useEditorRef, withRef as withRef$1, useComposedRef, useEditorPlugin, useElementSelector, withHOC, usePluginOption, useRemoveNodeButton, useEditorSelector, ParagraphPlugin, createPlatePlugin, PlateContent, PlateContainer, useEditorState, useMarkToolbarButtonState, useMarkToolbarButton, usePlateEditor, useFormInputProps, useEditorSelection, useEditorReadOnly, useOnClickOutside, useEventEditorValue, Plate } from "@udecode/plate/react";
+import { PlateElement, useReadOnly, useElement, PlateLeaf, useSelected, useFocused, useEditorRef, withRef as withRef$1, useComposedRef, useEditorPlugin, useElementSelector, withHOC, usePluginOption, useRemoveNodeButton, useEditorSelector, createPlatePlugin, ParagraphPlugin, PlateContent, PlateContainer, useEditorState, useMarkToolbarButtonState, useMarkToolbarButton, usePlateEditor, useFormInputProps, useEditorSelection, useEditorReadOnly, useOnClickOutside, useEventEditorValue, Plate } from "@udecode/plate/react";
+import colorString, { get as get$1, to } from "color-string";
 import { isLangSupported, formatCodeBlock, insertEmptyCodeBlock, isCodeBlockEmpty, unwrapCodeBlock, isSelectionAtCodeBlockStart } from "@udecode/plate-code-block";
-import { X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Heading6 as Heading6$1, Heading5 as Heading5$1, Heading4 as Heading4$1, Heading3 as Heading3$1, Heading2 as Heading2$1, Heading1 as Heading1$1, ChevronRight, Twitter, SunMedium, Moon, SeparatorHorizontal, Eye, Link2Off, Underline, Trash, Text, Table as Table$1, Superscript, Subscript, Strikethrough, Highlighter, Settings, RectangleHorizontal, RotateCcw, Pilcrow, Outdent, MoreHorizontal, Minus, WrapText, Keyboard, Indent, ExternalLink, Smile, Edit2, GripVertical, MessageSquarePlus, MessageSquare, Ungroup, Combine, RectangleVertical, Baseline, FileCode, PaintBucket, ChevronsUpDown, Quote, AlignRight as AlignRight$1, AlignLeft as AlignLeft$1, AlignJustify, AlignCenter as AlignCenter$1, Plus, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, Info, CircleAlert, CircleCheck as CircleCheck$1, CircleIcon, ChevronDownIcon as ChevronDownIcon$1, File as File$1, ChevronUp, Edit, Pencil, Clock, CalendarCheck, Calendar as Calendar$1, CalendarDays, RotateCw, ChevronLeft, WifiOff, TriangleAlert, RefreshCw, GitBranch, CircleHelp, Loader2, Lock, ArrowUpDown, GitFork, Globe, Copy, Folder as Folder$1, Clapperboard, LayoutGrid, List as List$1, CloudUpload, ArrowDownToLine, TextCursorInput, Images, AlertCircle, Image, Database, CheckCircle2, ImageOff, KeyRound, Cloud, LoaderCircle, ScrollText, RefreshCwOff, OctagonAlert, Menu, FilePlus, LogOut, FileStack, FolderOpen, History, Users, PanelLeft, Files, User, FileText, GitBranchIcon, Circle as Circle$1, ListOrdered, Grid3x3Icon, CircleX, Link, Unlink, SquarePen, Trash2, House, Unlock } from "lucide-react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { Command as Command$2 } from "cmdk";
@@ -32,7 +34,7 @@ import { useHTMLInputCursorState, useComboboxInput } from "@udecode/plate-combob
 import { useComboboxContext, Combobox as Combobox$1, useComboboxStore, ComboboxProvider, Portal, ComboboxPopover, ComboboxItem } from "@ariakit/react";
 import { filterWords } from "@udecode/plate-combobox";
 import { toggleList, unwrapList, getListItemEntry } from "@udecode/plate-list";
-import { normalizeHeadingLevels, ALL_HEADING_LEVELS, MEDIA_MIME_TYPES, extensionOf, resolveMediaAccept, ASYNC_POLLER_ERROR, ERR_BRANCH_EXISTS, ERR_BRANCH_CONFLICT, MEDIA_CATEGORIES, canonicalPath, isHeadingLevel, TinaSchema, addNamespaceToSchema, parseURL, ERR_HAS_REFERENCES, ERR_ALREADY_EXISTS, isValidRelativePath, RELATIVE_PATH_ALLOWED_CHARS_MESSAGE, resolveForm, RELATIVE_PATH_REGEX, normalizePath, ERR_NOT_INDEXED, validateSchema } from "@tinacms/schema-tools";
+import { normalizeHeadingLevels, ALL_HEADING_LEVELS, DEFAULT_TEXT_COLORS, MEDIA_MIME_TYPES, extensionOf, resolveMediaAccept, ASYNC_POLLER_ERROR, ERR_BRANCH_EXISTS, ERR_BRANCH_CONFLICT, MEDIA_CATEGORIES, canonicalPath, isHeadingLevel, TinaSchema, addNamespaceToSchema, parseURL, ERR_HAS_REFERENCES, ERR_ALREADY_EXISTS, isValidRelativePath, RELATIVE_PATH_ALLOWED_CHARS_MESSAGE, resolveForm, RELATIVE_PATH_REGEX, normalizePath, ERR_NOT_INDEXED, validateSchema } from "@tinacms/schema-tools";
 import { NAMER, resolveField } from "@tinacms/schema-tools";
 import { useBlockSelected, BlockSelectionPlugin } from "@udecode/plate-selection/react";
 import "@udecode/plate-dnd";
@@ -41,7 +43,6 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import colorString, { get as get$1, to } from "color-string";
 import { ElementApi, isType, NodeApi, mergeProps, createSlatePlugin } from "@udecode/plate";
 import { createForm, FORM_ERROR, getIn } from "final-form";
 import arrayMutators from "final-form-arrays";
@@ -851,6 +852,12 @@ const PopupModal = ({ className = "", style = {}, ...props }) => /* @__PURE__ */
   }
 );
 const ModalPopup = PopupModal;
+const ErrorModal = ({
+  title,
+  actions,
+  close: close2,
+  children
+}) => /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, { close: close2 }, /* @__PURE__ */ React__default.createElement(CircleAlert, { className: "mr-1 w-6 h-auto inline-block text-red-600" }), " ", title), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("div", { className: "tina-prose whitespace-pre-wrap" }, children)), /* @__PURE__ */ React__default.createElement(ModalActions, { align: "end" }, actions)));
 const ERROR_MISSING_CMS = `useCMS could not find an instance of CMS`;
 const CMSContext = React.createContext(null);
 function useCMS$1() {
@@ -2000,6 +2007,7 @@ const Icons = {
   search: Search,
   settings: Settings,
   highlight: Highlighter,
+  textColor: Baseline,
   strikethrough: Strikethrough,
   subscript: Subscript,
   superscript: Superscript,
@@ -2596,18 +2604,33 @@ const InlineComboboxEmpty = ({
 const ToolbarContext = createContext(
   void 0
 );
+const resolvePalette = (configured, fallback) => {
+  if (!configured) return fallback;
+  return configured.filter(({ value }) => {
+    if (isSafeCssColor(value)) return true;
+    console.warn(
+      `[tinacms] Ignoring unsupported colour "${value}" in rich-text overrides.textColors. Use hex, a named colour, a colour function such as rgb()/lab()/color-mix(), or var(--name).`
+    );
+    return false;
+  });
+};
 const ToolbarProvider = ({
   tinaForm,
   templates,
   overrides,
   children
 }) => {
-  const configured = !Array.isArray(overrides) ? overrides == null ? void 0 : overrides.headingLevels : void 0;
+  const objectOverrides = !Array.isArray(overrides) ? overrides : void 0;
+  const configured = objectOverrides == null ? void 0 : objectOverrides.headingLevels;
   const headingLevelsConfigured = Array.isArray(configured);
   const headingLevels = useMemo(
     () => configured ? normalizeHeadingLevels(configured) : ALL_HEADING_LEVELS,
     [configured]
   );
+  const textColors = useMemo(
+    () => resolvePalette(objectOverrides == null ? void 0 : objectOverrides.textColors, DEFAULT_TEXT_COLORS),
+    [objectOverrides == null ? void 0 : objectOverrides.textColors]
+  );
   return /* @__PURE__ */ React__default.createElement(
     ToolbarContext.Provider,
     {
@@ -2616,7 +2639,8 @@ const ToolbarProvider = ({
         templates,
         overrides,
         headingLevels,
-        headingLevelsConfigured
+        headingLevelsConfigured,
+        textColors
       }
     },
     children
@@ -3309,6 +3333,10 @@ const TableRowElement = withRef(
     );
   }
 );
+const TextColorPlugin = createPlatePlugin({
+  key: "textColor",
+  node: { isLeaf: true }
+});
 function classNames$1(...classes) {
   return classes.filter(Boolean).join(" ");
 }
@@ -3327,22 +3355,38 @@ function getContrastColor(color) {
   const luminance = (0.299 * r2 + 0.587 * g + 0.114 * b) / 255;
   return luminance > 0.5 ? "#000000" : "#ffffff";
 }
+const leafColor = (value) => typeof value === "string" && isSafeCssColor(value) ? value : void 0;
+const INHERIT_NESTED_COLOR = "[&_strong]:text-inherit [&_em]:text-inherit [&_s]:text-inherit [&_u]:text-inherit";
 const HighlightLeaf = ({
   leaf: leaf2,
   ...props
 }) => {
-  const backgroundColor = leaf2.highlightColor || "#FEF08A";
+  const backgroundColor = leafColor(leaf2.highlightColor) ?? "#FEF08A";
+  const color = leafColor(leaf2.textColor) ?? getContrastColor(backgroundColor);
   return /* @__PURE__ */ React__default.createElement(
     PlateLeaf,
     {
       as: "mark",
-      className: "rounded-sm",
-      style: { backgroundColor, color: getContrastColor(backgroundColor) },
+      className: `rounded-sm ${INHERIT_NESTED_COLOR}`,
+      style: { backgroundColor, color },
       leaf: leaf2,
       ...props
     }
   );
 };
+const TextColorLeaf = ({
+  leaf: leaf2,
+  ...props
+}) => /* @__PURE__ */ React__default.createElement(
+  PlateLeaf,
+  {
+    as: "span",
+    className: INHERIT_NESTED_COLOR,
+    style: { color: leafColor(leaf2.textColor) },
+    leaf: leaf2,
+    ...props
+  }
+);
 const Heading1 = ({
   attributes,
   children,
@@ -3499,6 +3543,7 @@ const Components = () => {
     [LinkPlugin.key]: LinkElement,
     [CodePlugin.key]: CodeLeaf,
     [HighlightPlugin.key]: HighlightLeaf,
+    [TextColorPlugin.key]: TextColorLeaf,
     [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
     [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: "s" }),
     [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
@@ -3788,7 +3833,20 @@ class Form {
         if (field.templates) {
           if (field.list) {
             if (isLastItem) {
-              return formOrObjectField;
+              const fieldName = namePath.slice(0, namePathIndex).join(".");
+              if (!fieldName) {
+                return formOrObjectField;
+              }
+              return {
+                ...formOrObjectField,
+                name: fieldName,
+                fields: formOrObjectField.fields.map((field2) => {
+                  return {
+                    ...field2,
+                    name: [fieldName, field2.name].join(".")
+                  };
+                })
+              };
             } else {
               const namePathIndexForListItem = namePathIndex + 1;
               const index = namePath[namePathIndexForListItem];
@@ -6287,7 +6345,7 @@ const ListFieldMeta = ({
       style: { zIndex: index != null ? 1e3 - index : void 0 },
       ...props
     },
-    /* @__PURE__ */ React.createElement(ListHeader, null, /* @__PURE__ */ React.createElement(ListMeta, null, label !== false && /* @__PURE__ */ React.createElement(ListLabel, null, label || name2), description && /* @__PURE__ */ React.createElement(FieldDescription, { className: "whitespace-nowrap text-ellipsis overflow-hidden" }, description)), actions && actions),
+    /* @__PURE__ */ React.createElement(ListHeader, null, /* @__PURE__ */ React.createElement(ListMeta, null, label !== false && /* @__PURE__ */ React.createElement(ListLabel, null, label || name2), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description)), actions && actions),
     children,
     error && typeof error === "string" && /* @__PURE__ */ React.createElement(FieldError, null, error)
   );
@@ -6296,7 +6354,7 @@ const ListHeader = ({ children }) => {
   return /* @__PURE__ */ React.createElement("span", { className: "relative flex gap-2 w-full justify-between items-center mb-2" }, children);
 };
 const ListMeta = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex-1 truncate" }, children);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, children);
 };
 const ListLabel = ({ children }) => {
   return /* @__PURE__ */ React.createElement(
@@ -7533,8 +7591,8 @@ const ImageField = wrapFieldsWithMeta(
                   `${fileRejection.file.name}: ${fileRejection.errors.map((error) => printError(error)).join(", ")}`
                 );
               });
-              cms.alerts.error(() => {
-                return /* @__PURE__ */ React.createElement(React.Fragment, null, "Upload Failed. ", /* @__PURE__ */ React.createElement("br", null), messages.join(". "), ".");
+              cms.alerts.error(`${messages.join(". ")}.`, {
+                title: "Upload Failed"
               });
             }
           } catch (error) {
@@ -7789,6 +7847,10 @@ const TagsFieldPlugin = {
 };
 const DEFAULT_DATE_DISPLAY_FORMAT = "MMM DD, YYYY";
 const DEFAULT_TIME_DISPLAY_FORMAT = "h:mm A";
+const getHourCycle = (timeFormat) => {
+  const tokens = (timeFormat ?? "").replace(/\[[^\]]*\]/g, "");
+  return /[Hk]/.test(tokens) ? 24 : 12;
+};
 const format$2 = (val, _name, field) => {
   if (!val) return val;
   return new Date(val).toISOString();
@@ -8704,7 +8766,7 @@ const DateField = wrapFieldsWithMeta(
           value ? value.toISOString() : required !== false ? (/* @__PURE__ */ new Date()).toISOString() : value
         ),
         timeFormat: getTimeFormat(),
-        hourCycle: 12,
+        hourCycle: getHourCycle(getTimeFormat()),
         dateFormat: getDateFormat(),
         value: date,
         locale: rest.locale ? { code: rest.locale } : void 0
@@ -10108,7 +10170,7 @@ let Alerts$1 = class Alerts {
       ...eventsToAlerts
     };
   }
-  add(level, message, timeout = 4e3) {
+  add(level, message, timeout = 4e3, title) {
     if (this.suppressed) {
       return () => {
       };
@@ -10117,6 +10179,7 @@ let Alerts$1 = class Alerts {
       level,
       message,
       timeout,
+      title,
       id: `${message}|${Date.now()}`
     };
     this.alerts.set(alert.id, alert);
@@ -10149,8 +10212,11 @@ let Alerts$1 = class Alerts {
   warn(message, timeout) {
     return this.add("warn", message, timeout);
   }
-  error(message, timeout) {
-    return this.add("error", message, timeout);
+  error(message, options) {
+    if (typeof options === "number") {
+      return this.add("error", message, options);
+    }
+    return this.add("error", message, void 0, options == null ? void 0 : options.title);
   }
 };
 class EventBus {
@@ -12480,8 +12546,8 @@ function MediaPicker({
               `${fileRejection.file.name}: ${fileRejection.errors.map((error) => printError(error)).join(", ")}`
             );
           });
-          cms.alerts.error(() => {
-            return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "Upload Failed. ", /* @__PURE__ */ React__default.createElement("br", null), messages.join(". "), ".");
+          cms.alerts.error(`${messages.join(". ")}.`, {
+            title: "Upload Failed"
           });
         }
         if (mediaItems.length !== 0) {
@@ -14305,7 +14371,7 @@ const FormModal = ({ plugin, close: close2 }) => {
 const name = "tinacms";
 const type = "module";
 const typings = "dist/index.d.ts";
-const version = "3.14.3";
+const version = "3.15.0";
 const main = "dist/index.js";
 const module$1 = "./dist/index.js";
 const exports$1 = { ".": "./dist/index.js", "./dist/client": { "types": "./dist/client.d.ts", "browser": "./dist/client.browser.js", "default": "./dist/client.js" }, "./react": "./dist/react.js", "./dist/react": "./dist/react.js", "./tina-field": "./dist/tina-field.js", "./dist/tina-field": "./dist/tina-field.js", "./dist/rich-text": "./dist/rich-text/index.js", "./dist/rich-text/static": "./dist/rich-text/static.js", "./dist/rich-text/prism": "./dist/rich-text/prism.js" };
@@ -14314,7 +14380,7 @@ const buildConfig = { "entryPoints": ["src/index.ts", "src/rich-text/index.tsx",
 const license = "Apache-2.0";
 const scripts = { "types": "pnpm tsc && pnpm tsc-alias", "build": "tinacms-scripts build", "test": "vitest run", "test-watch": "vitest" };
 const dependencies = { "@ariakit/react": "catalog:", "@dnd-kit/core": "catalog:", "@dnd-kit/sortable": "catalog:", "@dnd-kit/utilities": "catalog:", "@floating-ui/dom": "catalog:", "@floating-ui/react-dom": "catalog:", "@graphql-inspector/core": "^6.2.1", "@radix-ui/react-dialog": "catalog:", "@radix-ui/react-dropdown-menu": "catalog:", "@radix-ui/react-popover": "catalog:", "@radix-ui/react-select": "catalog:", "@radix-ui/react-separator": "catalog:", "@radix-ui/react-slot": "catalog:", "@radix-ui/react-toolbar": "catalog:", "@radix-ui/react-tooltip": "catalog:", "@react-hook/window-size": "catalog:", "@tanstack/react-table": "^8.21.3", "@tinacms/bridge": "workspace:^", "@tinacms/mdx": "workspace:^", "@tinacms/schema-tools": "workspace:^", "@tinacms/search": "workspace:^", "@udecode/cmdk": "catalog:", "@udecode/cn": "catalog:", "@udecode/plate": "catalog:", "@udecode/plate-autoformat": "catalog:", "@udecode/plate-basic-marks": "catalog:", "@udecode/plate-block-quote": "catalog:", "@udecode/plate-break": "catalog:", "@udecode/plate-code-block": "catalog:", "@udecode/plate-combobox": "catalog:", "@udecode/plate-dnd": "catalog:", "@udecode/plate-floating": "catalog:", "@udecode/plate-heading": "catalog:", "@udecode/plate-highlight": "catalog:", "@udecode/plate-horizontal-rule": "catalog:", "@udecode/plate-indent-list": "catalog:", "@udecode/plate-link": "catalog:", "@udecode/plate-list": "catalog:", "@udecode/plate-node-id": "catalog:", "@udecode/plate-reset-node": "catalog:", "@udecode/plate-resizable": "catalog:", "@udecode/plate-selection": "catalog:", "@udecode/plate-slash-command": "catalog:", "@udecode/plate-table": "catalog:", "@udecode/plate-trailing-block": "catalog:", "class-variance-authority": "catalog:", "clsx": "catalog:", "cmdk": "catalog:", "color-string": "catalog:", "date-fns": "4.1.0", "es-toolkit": "^1.42.0", "final-form": "catalog:", "final-form-arrays": "catalog:", "final-form-set-field-data": "catalog:", "graphql": "15.8.0", "graphql-tag": "catalog:", "is-hotkey": "catalog:", "lucide-react": "catalog:", "mermaid": "catalog:", "posthog-js": "^1.347.1", "prism-react-renderer": "catalog:", "prop-types": "catalog:", "react-colorful": "catalog:", "react-day-picker": "^9.13.0", "react-dnd": "catalog:", "react-dnd-html5-backend": "catalog:", "react-dropzone": "catalog:", "react-final-form": "catalog:", "react-router-dom": "catalog:", "react-use": "catalog:", "tailwind-merge": "^2.6.0", "webfontloader": "catalog:", "yup": "^1.6.1", "zod": "catalog:" };
-const devDependencies = { "@graphql-tools/utils": "catalog:", "@testing-library/dom": "catalog:", "@testing-library/jest-dom": "catalog:", "@testing-library/react": "catalog:", "@testing-library/user-event": "catalog:", "@tinacms/scripts": "workspace:*", "@types/atob": "catalog:", "@types/codemirror": "catalog:", "@types/color-string": "catalog:", "@types/node": "^22.13.1", "@types/prop-types": "catalog:", "@types/react": "^18.3.18", "@types/react-dom": "catalog:", "happy-dom": "catalog:", "identity-obj-proxy": "catalog:", "jest-file-snapshot": "^0.7.0", "lowlight": "catalog:", "next": "15.5.21", "react": "^18.3.1", "react-dom": "^18.3.1", "react-is": "^18.3.1", "tsc-alias": "catalog:", "tslib": "catalog:", "typescript": "^5.7.3", "vite": "^5.4.14", "vitest": "^2.1.9" };
+const devDependencies = { "@testing-library/dom": "catalog:", "@testing-library/jest-dom": "catalog:", "@testing-library/react": "catalog:", "@testing-library/user-event": "catalog:", "@tinacms/scripts": "workspace:*", "@types/atob": "catalog:", "@types/codemirror": "catalog:", "@types/color-string": "catalog:", "@types/node": "^22.13.1", "@types/prop-types": "catalog:", "@types/react": "^18.3.18", "@types/react-dom": "catalog:", "happy-dom": "catalog:", "identity-obj-proxy": "catalog:", "jest-file-snapshot": "^0.7.0", "lowlight": "catalog:", "next": "15.5.27", "react": "^18.3.1", "react-dom": "^18.3.1", "react-is": "^18.3.1", "tsc-alias": "catalog:", "tslib": "catalog:", "typescript": "^5.7.3", "vite": "^5.4.14", "vitest": "^2.1.9" };
 const peerDependencies = { "react": ">=16.14.0", "react-dom": ">=16.14.0" };
 const publishConfig = { "registry": "https://registry.npmjs.org" };
 const repository = { "url": "https://github.com/tinacms/tinacms.git", "directory": "packages/tinacms" };
@@ -16615,26 +16681,19 @@ function Alerts2({ alerts }) {
     const AlertMessage = typeof alert.message === "string" ? () => {
       return /* @__PURE__ */ React__default.createElement("p", { className: "text-base mb-3 overflow-y-auto" }, parseUrlsInText(alert.message.toString()));
     } : alert.message;
-    return /* @__PURE__ */ React__default.createElement(Modal, { key: alert.id }, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(
-      ModalHeader,
+    const dismiss = () => {
+      alerts.dismiss(alert);
+    };
+    return /* @__PURE__ */ React__default.createElement(
+      ErrorModal,
       {
-        close: () => {
-          alerts.dismiss(alert);
-        }
+        key: alert.id,
+        title: alert.title ?? "Error",
+        close: dismiss,
+        actions: /* @__PURE__ */ React__default.createElement(Button$2, { className: "w-full sm:w-auto", onClick: dismiss }, "Close")
       },
-      /* @__PURE__ */ React__default.createElement(CircleAlert, { className: "mr-1 w-6 h-auto inline-block text-red-600" }),
-      " ",
-      "Error"
-    ), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("div", { className: "tina-prose whitespace-pre-wrap" }, /* @__PURE__ */ React__default.createElement(AlertMessage, null))), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1" }), /* @__PURE__ */ React__default.createElement(
-      Button$2,
-      {
-        style: { flexGrow: 1 },
-        onClick: () => {
-          alerts.dismiss(alert);
-        }
-      },
-      "Close"
-    ))));
+      /* @__PURE__ */ React__default.createElement(AlertMessage, null)
+    );
   }));
 }
 const Alert = ({
@@ -18359,7 +18418,16 @@ const FormBuilder = ({
 };
 const FormStatus = ({ pristine }) => {
   const pristineClass = pristine ? "text-green-500" : "text-red-500";
-  return /* @__PURE__ */ React.createElement(Circle$1, { className: cn("w-3 h-3 fill-current", pristineClass) });
+  const label = pristine ? "No unsaved changes" : "Unsaved changes";
+  return /* @__PURE__ */ React.createElement(
+    Circle$1,
+    {
+      role: "img",
+      "aria-label": label,
+      className: cn("w-3 h-3 fill-current", pristineClass)
+    },
+    /* @__PURE__ */ React.createElement("title", null, label)
+  );
 };
 const RelatedFilesBanner = () => {
   const cms = useCMS$1();
@@ -19652,18 +19720,11 @@ const MarkToolbarButton = withRef(({ clear, nodeType, ...rest }, ref) => {
   const { props } = useMarkToolbarButton(state);
   return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, ...props, ...rest });
 });
-const highlightColors = [
-  { label: "Yellow", value: "#FEF08A" },
-  { label: "Green", value: "#BBF7D0" },
-  { label: "Blue", value: "#BFDBFE" },
-  { label: "Red", value: "#CC4141" }
-];
 const BoldToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Bold (⌘+B)", nodeType: BoldPlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.bold, null));
 const StrikethroughToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Strikethrough", nodeType: StrikethroughPlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.strikethrough, null));
 const ItalicToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Italic (⌘+I)", nodeType: ItalicPlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.italic, null));
 const CodeToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Code (⌘+E)", nodeType: CodePlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.code, null));
-const HighlightToolbarButton = () => /* @__PURE__ */ React__default.createElement(HighlightColorToolbarButton, null);
-const useHighlightToolbar = () => {
+const useColorMarkToolbar = (toMarks) => {
   const editor = useEditorRef();
   const openState = useOpenState();
   const savedSelection = React__default.useRef(editor.selection);
@@ -19680,8 +19741,8 @@ const useHighlightToolbar = () => {
       rememberSelection();
     }
   }, [openState.open, rememberSelection]);
-  const applyHighlight = React__default.useCallback(
-    (highlightColor) => {
+  const applyColor = React__default.useCallback(
+    (color) => {
       if (inlineCodeActive) {
         openState.onOpenChange(false);
         return;
@@ -19689,67 +19750,109 @@ const useHighlightToolbar = () => {
       if (savedSelection.current) {
         editor.tf.select(structuredClone(savedSelection.current));
       }
-      if (highlightColor) {
-        editor.tf.addMark("highlight", true);
-        editor.tf.addMark("highlightColor", highlightColor);
-      } else {
-        editor.tf.removeMark("highlight");
-        editor.tf.removeMark("highlightColor");
-      }
-      editor.tf.setNodes(
-        highlightColor ? {
-          highlight: true,
-          highlightColor
-        } : {
-          highlight: void 0,
-          highlightColor: void 0
-        },
-        {
-          at: editor.selection ?? void 0,
-          match: (node) => editor.api.isText(node),
-          split: true
+      const marks = toMarks(color);
+      for (const [key, value] of Object.entries(marks)) {
+        if (value === void 0) {
+          editor.tf.removeMark(key);
+        } else {
+          editor.tf.addMark(key, value);
         }
-      );
+      }
+      editor.tf.setNodes(marks, {
+        at: editor.selection ?? void 0,
+        match: (node) => editor.api.isText(node),
+        split: true
+      });
       editor.tf.focus();
       openState.onOpenChange(false);
     },
-    [editor, inlineCodeActive, openState]
+    [editor, inlineCodeActive, openState, toMarks]
   );
   return {
-    applyHighlight,
+    applyColor,
     inlineCodeActive,
     openState,
     rememberSelection
   };
 };
-const HighlightColorToolbarButton = () => {
-  const { applyHighlight, inlineCodeActive, openState, rememberSelection } = useHighlightToolbar();
+const ColorDropdownToolbarButton = ({
+  tooltip,
+  icon,
+  clearLabel,
+  colors,
+  toMarks,
+  renderSwatch
+}) => {
+  const { applyColor, inlineCodeActive, openState, rememberSelection } = useColorMarkToolbar(toMarks);
   return /* @__PURE__ */ React__default.createElement(DropdownMenu$1, { modal: false, ...openState }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement(
     ToolbarButton,
     {
       isDropdown: true,
       showArrow: true,
       pressed: openState.open,
-      tooltip: "Highlight color",
+      tooltip,
       disabled: inlineCodeActive,
       onMouseDown: rememberSelection
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React__default.createElement(Icons.highlight, null), /* @__PURE__ */ React__default.createElement("span", { className: "sr-only" }, "Highlight color"))
-  )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent$1, { align: "start", className: "min-w-[180px]" }, /* @__PURE__ */ React__default.createElement(DropdownMenuItem$1, { onSelect: () => applyHighlight() }, "Clear highlight"), highlightColors.map((color) => /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-1.5" }, icon, /* @__PURE__ */ React__default.createElement("span", { className: "sr-only" }, tooltip))
+  )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent$1, { align: "start", className: "min-w-[180px]" }, /* @__PURE__ */ React__default.createElement(DropdownMenuItem$1, { onSelect: () => applyColor() }, clearLabel), colors.map((color) => /* @__PURE__ */ React__default.createElement(
     DropdownMenuItem$1,
     {
       key: color.value,
-      onSelect: () => applyHighlight(color.value)
+      onSelect: () => applyColor(color.value)
     },
-    /* @__PURE__ */ React__default.createElement(
+    renderSwatch(color.value),
+    color.label
+  ))));
+};
+const toHighlightMarks = (color) => color ? { highlight: true, highlightColor: color } : { highlight: void 0, highlightColor: void 0 };
+const toTextColorMarks = (color) => ({
+  textColor: color
+});
+const highlightColors = [
+  { label: "Yellow", value: "#FEF08A" },
+  { label: "Green", value: "#BBF7D0" },
+  { label: "Blue", value: "#BFDBFE" },
+  { label: "Red", value: "#CC4141" }
+];
+const HighlightToolbarButton = () => /* @__PURE__ */ React__default.createElement(
+  ColorDropdownToolbarButton,
+  {
+    tooltip: "Highlight color",
+    icon: /* @__PURE__ */ React__default.createElement(Icons.highlight, null),
+    clearLabel: "Clear highlight",
+    colors: highlightColors,
+    toMarks: toHighlightMarks,
+    renderSwatch: (color) => /* @__PURE__ */ React__default.createElement(
       "span",
       {
         className: "mr-2 inline-block size-4 rounded border border-gray-300",
-        style: { backgroundColor: color.value }
+        style: { backgroundColor: color }
       }
-    ),
-    color.label
-  ))));
+    )
+  }
+);
+const TextColorToolbarButton = () => {
+  const { textColors } = useToolbarContext();
+  return /* @__PURE__ */ React__default.createElement(
+    ColorDropdownToolbarButton,
+    {
+      tooltip: "Text color",
+      icon: /* @__PURE__ */ React__default.createElement(Icons.textColor, null),
+      clearLabel: "Clear text color",
+      colors: textColors,
+      toMarks: toTextColorMarks,
+      renderSwatch: (color) => /* @__PURE__ */ React__default.createElement(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "mr-2 inline-block w-4 text-center font-bold",
+          style: { color }
+        },
+        "A"
+      )
+    }
+  );
 };
 const ListToolbarButton = withRef(({ nodeType = BulletedListPlugin.key, ...rest }, ref) => {
   const state = useListToolbarButtonState({ nodeType });
@@ -19989,6 +20092,11 @@ const toolbarItems = {
     width: () => STANDARD_ICON_WIDTH,
     Component: /* @__PURE__ */ React__default.createElement(HighlightToolbarButton, null)
   },
+  textColor: {
+    label: "Text Color",
+    width: () => STANDARD_ICON_WIDTH,
+    Component: /* @__PURE__ */ React__default.createElement(TextColorToolbarButton, null)
+  },
   italic: {
     label: "Italic",
     width: () => STANDARD_ICON_WIDTH,
@@ -71389,6 +71497,7 @@ const viewPlugins = [
   BasicMarksPlugin,
   UnderlinePlugin,
   HighlightPlugin,
+  TextColorPlugin,
   HeadingPlugin.configure({ options: { levels: 6 } }),
   ParagraphPlugin,
   CodeBlockPlugin.configure({
@@ -71399,24 +71508,24 @@ const viewPlugins = [
 const CorrectNodeBehaviorPlugin = createSlatePlugin({
   key: "WITH_CORRECT_NODE_BEHAVIOR"
 });
-const ClearHighlightOnEnterPlugin = createSlatePlugin({
-  key: "CLEAR_HIGHLIGHT_ON_ENTER"
+const COLOR_MARK_KEYS = ["highlight", "highlightColor", "textColor"];
+const ClearColorMarksOnEnterPlugin = createSlatePlugin({
+  key: "CLEAR_COLOR_MARKS_ON_ENTER"
 }).overrideEditor(({ editor, tf: { insertBreak } }) => ({
   transforms: {
     insertBreak() {
       const keyboardEvent = editor.currentKeyboardEvent;
       const isPlainEnter = (keyboardEvent == null ? void 0 : keyboardEvent.key) === "Enter" && !keyboardEvent.shiftKey && !keyboardEvent.metaKey && !keyboardEvent.ctrlKey && !keyboardEvent.altKey;
       const activeMarks = editor.api.marks();
-      const hasHighlight = Boolean(
-        (activeMarks == null ? void 0 : activeMarks.highlight) || (activeMarks == null ? void 0 : activeMarks.highlightColor)
+      const hasColorMark = COLOR_MARK_KEYS.some(
+        (key) => Boolean(activeMarks == null ? void 0 : activeMarks[key])
       );
       insertBreak();
-      if (!isPlainEnter || !hasHighlight) {
+      if (!isPlainEnter || !hasColorMark || !editor.api.isEmpty(editor.selection, { block: true })) {
         return;
       }
-      editor.tf.removeMark("highlight");
-      editor.tf.removeMark("highlightColor");
-      editor.tf.unsetNodes(["highlight", "highlightColor"], {
+      editor.tf.removeMarks(COLOR_MARK_KEYS);
+      editor.tf.unsetNodes(COLOR_MARK_KEYS, {
         at: editor.selection ?? void 0,
         match: (node) => editor.api.isText(node)
       });
@@ -71434,7 +71543,6 @@ const createEditorPlugins = ({
   createHardBreakPlugin,
   createInvalidMarkdownPlugin,
   CorrectNodeBehaviorPlugin,
-  ClearHighlightOnEnterPlugin,
   LinkPlugin.configure({
     options: {
       // Custom validation function to allow relative links, e.g., /about
@@ -71542,7 +71650,9 @@ const createEditorPlugins = ({
         }
       ]
     }
-  })
+  }),
+  // Last, so it wraps list and other block handlers that don't pass Enter on
+  ClearColorMarksOnEnterPlugin
 ];
 const RichEditor = ({ input, tinaForm, field }) => {
   var _a, _b;
@@ -72511,9 +72621,9 @@ mutation addPendingDocumentMutation(
       throw new SessionExpiredError();
     }
     if (res.status !== 200) {
-      let errorMessage = `Unable to complete request, ${res.statusText}`;
-      const resBody = await res.json();
-      if (resBody.message) {
+      let errorMessage = `Unable to complete request, ${res.statusText || res.status}`;
+      const resBody = await res.json().catch(() => void 0);
+      if (resBody == null ? void 0 : resBody.message) {
         errorMessage = `${errorMessage}, Response: ${resBody.message}`;
       }
       if (!this.isCustomContentApi) {
@@ -72597,7 +72707,7 @@ mutation addPendingDocumentMutation(
         }
       });
       if (!res.ok) {
-        let errorMessage = `There was an error creating a pull request. ${res.statusText}`;
+        let errorMessage = `There was an error creating a pull request. ${res.statusText || res.status}`;
         if (res.status === 422) {
           errorMessage = `Please make sure you have made changes on ${branch} before creating a pull request.`;
         }
@@ -72780,8 +72890,10 @@ mutation addPendingDocumentMutation(
       });
       if (!res.ok) {
         console.error("There was an error creating a new branch.");
-        const error = await res.json();
-        throw new Error(error == null ? void 0 : error.message);
+        const error = await res.json().catch(() => void 0);
+        throw new Error(
+          (error == null ? void 0 : error.message) ?? `Unable to create branch, ${res.statusText || res.status}`
+        );
       }
       const values = await res.json();
       return parseRefForBranchName(values.data.ref);
@@ -72797,7 +72909,9 @@ mutation addPendingDocumentMutation(
         method: "GET"
       });
       if (!res.ok) {
-        throw new Error(`Failed to fetch latest version: ${res.statusText}`);
+        throw new Error(
+          `Failed to fetch latest version: ${res.statusText || res.status}`
+        );
       }
       const data = await res.json();
       return data;
@@ -72846,7 +72960,7 @@ mutation addPendingDocumentMutation(
         }
         if (statusResponse.status !== 202) {
           const error = new Error(
-            statusResponseBody.message || `Failed to check workflow status: ${statusResponse.statusText}`
+            statusResponseBody.message || `Failed to check workflow status: ${statusResponse.statusText || statusResponse.status}`
           );
           error.errorCode = "WORKFLOW_STATUS_FAILED";
           throw error;
@@ -74222,52 +74336,14 @@ const Layout = ({ children }) => {
     children
   ));
 };
-const ErrorDialog = (props) => {
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      style: {
-        background: "#efefef",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }
-    },
-    /* @__PURE__ */ React__default.createElement("style", null, "        body {          margin: 0;        }      "),
-    /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        style: {
-          background: "#fff",
-          maxWidth: "400px",
-          padding: "20px",
-          fontFamily: "'Inter', sans-serif",
-          borderRadius: "5px",
-          boxShadow: "0 6px 24px rgb(0 37 91 / 5%), 0 2px 4px rgb(0 37 91 / 3%)"
-        }
-      },
-      /* @__PURE__ */ React__default.createElement("h3", { style: { color: "#eb6337" } }, props.title),
-      /* @__PURE__ */ React__default.createElement("p", null, props.message, ":"),
-      /* @__PURE__ */ React__default.createElement(
-        "pre",
-        {
-          style: { marginTop: "1rem", overflowX: "auto" }
-        },
-        `${props.error}`
-      ),
-      /* @__PURE__ */ React__default.createElement("p", null, "See our", " ", /* @__PURE__ */ React__default.createElement(
-        "a",
-        {
-          className: "text-gray-600",
-          style: { textDecoration: "underline" },
-          href: "https://tina.io/docs/r/FAQ/",
-          target: "_blank"
-        },
-        " ",
-        "Error FAQ",
-        " "
-      ), " ", "for more information.")
-    )
+const TROUBLESHOOTING_URL = "https://tina.io/docs/tinacloud/troubleshooting";
+const TroubleshootingLink = () => /* @__PURE__ */ React__default.createElement("a", { href: TROUBLESHOOTING_URL, target: "_blank", rel: "noopener noreferrer" }, "Read the TinaCloud troubleshooting guide");
+const ErrorDialog = (props) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, props.title && /* @__PURE__ */ React__default.createElement("h3", null, props.title), /* @__PURE__ */ React__default.createElement("p", null, props.message, ":"), /* @__PURE__ */ React__default.createElement("pre", { className: "overflow-x-auto" }, `${props.error}`), /* @__PURE__ */ React__default.createElement(TroubleshootingLink, null));
+const showErrorModal = (title, message, cms) => {
+  if (cms.alerts.all.some((a) => a.level === "error")) return;
+  cms.alerts.error(
+    () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", null, message), /* @__PURE__ */ React__default.createElement(TroubleshootingLink, null)),
+    { title }
   );
 };
 const LoadingPage = () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
@@ -75499,18 +75575,24 @@ const shouldAutoOpenCollectionDocument = ({
   ((_b = (_a = collection.documents) == null ? void 0 : _a.edges) == null ? void 0 : _b.length) === 1 && // Check to make sure the file is not a folder
   ((_e = (_d = (_c = collection.documents) == null ? void 0 : _c.edges[0]) == null ? void 0 : _d.node) == null ? void 0 : _e.__typename) !== "Folder";
 };
-const UnableToLoadModal = ({ message }) => /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, null, "Unable to load"), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("div", { className: "tina-prose" }, message)), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1" }), /* @__PURE__ */ React__default.createElement(
-  Button$2,
+const UnableToLoadModal = ({ message }) => /* @__PURE__ */ React__default.createElement(
+  ErrorModal,
   {
-    style: { flexGrow: 1 },
-    className: "w-full",
-    variant: "primary",
-    onClick: () => {
-      window.location.reload();
-    }
+    title: "Unable to Load",
+    actions: /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        className: "w-full sm:w-auto",
+        variant: "primary",
+        onClick: () => {
+          window.location.reload();
+        }
+      },
+      "Reload"
+    )
   },
-  "Reload"
-))));
+  message
+);
 const isValidSortKey = (sortKey, collection) => {
   if (collection.fields) {
     const sortKeys = collection.fields.map((x) => x.name);
@@ -75984,18 +76066,18 @@ const RenderForm$1 = ({
           }, 10);
         } catch (error) {
           if (isSessionExpiredError(error)) throw error;
-          const defaultErrorText = "There was a problem saving your document.";
           if (error.message && error.message.includes(ERR_ALREADY_EXISTS)) {
             cms.alerts.error(
-              `${defaultErrorText} The filename "${form.values.filename}.${collection.format || "md"}" is already used for another document, please modify it.`
+              `The filename "${form.values.filename}.${collection.format || "md"}" is already used for another document, please modify it.`,
+              { title: "Save Failed" }
             );
           } else {
             cms.alerts.error(
               () => ErrorDialog({
-                title: defaultErrorText,
                 message: "Tina caught an error while creating the file",
                 error
-              })
+              }),
+              { title: "Save Failed" }
             );
           }
           throw new Error(
@@ -76245,10 +76327,10 @@ const RenderForm = ({
           if (isSessionExpiredError(error)) throw error;
           cms.alerts.error(
             () => ErrorDialog({
-              title: "There was a problem saving your document",
               message: "Tina caught an error while updating the page",
               error
-            })
+            }),
+            { title: "Save Failed" }
           );
           console.error(error);
           throw new Error(
@@ -76337,15 +76419,6 @@ function resolvePreviewPath(splat, baseOrigin = typeof window !== "undefined" ?
     return { path: "/", offOrigin: true };
   }
 }
-const TROUBLESHOOTING_URL = "https://tina.io/docs/tinacloud/troubleshooting";
-const ErrorModalContent = (props) => {
-  const { title, message } = props;
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", null, title), /* @__PURE__ */ React__default.createElement("p", null, message), /* @__PURE__ */ React__default.createElement("a", { href: TROUBLESHOOTING_URL, target: "_blank", rel: "noopener noreferrer" }, "Learn more"));
-};
-const showErrorModal = (title, message, cms) => {
-  if (cms.alerts.all.some((a) => a.level === "error")) return;
-  cms.alerts.error(() => /* @__PURE__ */ React__default.createElement(ErrorModalContent, { title, message }));
-};
 const getBackendType = (client) => {
   var _a, _b, _c;
   if (!client) return "other";
@@ -76498,19 +76571,27 @@ const CheckSchema = ({
       });
     }
   }, [cms, JSON.stringify(schemaJson || {}), url]);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, schemaMissingError ? /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, null, "Branch Not Found"), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("div", { className: "tina-prose" }, "The current branch (", /* @__PURE__ */ React__default.createElement("span", { className: "font-bold" }, currentBranch), ") has either been merged or deleted.")), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1" }), /* @__PURE__ */ React__default.createElement(
-    Button$2,
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, schemaMissingError ? /* @__PURE__ */ React__default.createElement(
+    ErrorModal,
     {
-      style: { flexGrow: 1 },
-      className: "w-full",
-      variant: "primary",
-      onClick: () => {
-        window.localStorage.removeItem("tinacms-current-branch");
-        window.location.reload();
-      }
+      title: "Branch Not Found",
+      actions: /* @__PURE__ */ React__default.createElement(
+        Button$2,
+        {
+          className: "w-full sm:w-auto",
+          variant: "primary",
+          onClick: () => {
+            window.localStorage.removeItem("tinacms-current-branch");
+            window.location.reload();
+          }
+        },
+        "Switch back to default branch"
+      )
     },
-    "Switch back to default branch"
-  )))) : children);
+    "The current branch (",
+    /* @__PURE__ */ React__default.createElement("span", { className: "font-bold" }, currentBranch),
+    ") has either been merged or deleted."
+  ) : children);
 };
 const TinaAdmin = ({
   preview,
@@ -76843,6 +76924,7 @@ export {
   EllipsisVerticalIcon,
   ErrorDialog,
   ErrorIcon,
+  ErrorModal,
   EventBus,
   ExitIcon,
   FieldDescription,
@@ -77007,6 +77089,7 @@ export {
   safeAssertShape,
   sanitizeFilename,
   selectFieldClasses,
+  showErrorModal,
   sortBranchListFn,
   staticRequest,
   tableHeadingStyle,

package/dist/rich-text/index.d.ts

@@ -47,6 +47,10 @@ type BaseComponents = {
         children: JSX.Element;
         color?: string;
     };
+    textColor?: {
+        children: JSX.Element;
+        color: string;
+    };
     text?: {
         children: string;
     };

package/dist/rich-text/index.js

@@ -1,3 +1,4 @@
+import { isSafeCssColor } from "@tinacms/mdx/sanitize-css-color";
 import { sanitizeUrl } from "@tinacms/mdx/sanitize-url";
 import React from "react";
 const TinaMarkdown = ({
@@ -15,6 +16,7 @@ const TinaMarkdown = ({
     return /* @__PURE__ */ React.createElement(MemoNode, { components, key: index, child });
   }));
 };
+const safeColor = (value) => value && isSafeCssColor(value) ? value : void 0;
 const Leaf = (props) => {
   if (props.bold) {
     const { bold, ...rest } = props;
@@ -58,17 +60,24 @@ const Leaf = (props) => {
   }
   if (props.highlight) {
     const { highlight, highlightColor, ...rest } = props;
+    const color = safeColor(highlightColor);
     if (props.components.highlight) {
       const Component = props.components.highlight;
-      return /* @__PURE__ */ React.createElement(Component, { color: highlightColor }, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
+      return /* @__PURE__ */ React.createElement(Component, { color }, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
     }
-    return /* @__PURE__ */ React.createElement(
-      "mark",
-      {
-        style: highlightColor ? { backgroundColor: highlightColor } : void 0
-      },
-      /* @__PURE__ */ React.createElement(Leaf, { ...rest })
-    );
+    return /* @__PURE__ */ React.createElement("mark", { style: color ? { backgroundColor: color } : void 0 }, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
+  }
+  if (props.textColor) {
+    const { textColor, ...rest } = props;
+    const color = safeColor(textColor);
+    if (!color) {
+      return /* @__PURE__ */ React.createElement(Leaf, { ...rest });
+    }
+    if (props.components.textColor) {
+      const Component = props.components.textColor;
+      return /* @__PURE__ */ React.createElement(Component, { color }, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
+    }
+    return /* @__PURE__ */ React.createElement("span", { style: { color } }, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
   }
   if (props.components.text) {
     const Component = props.components.text;

package/dist/toolkit/alerts/alerts.d.ts

@@ -22,19 +22,23 @@ export declare class Alerts {
      * login modal. Alerts already showing are left alone.
      */
     private suppressed;
-    add(level: AlertLevel, message: string | React.FunctionComponent, timeout?: number): () => void;
+    add(level: AlertLevel, message: string | React.FunctionComponent, timeout?: number, title?: string): () => void;
     dismiss(alert: Alert): void;
     subscribe(cb: Callback): () => void;
     get all(): Alert[];
     info(message: string | React.FunctionComponent, timeout?: number): () => void;
     success(message: string | React.FunctionComponent, timeout?: number): () => void;
     warn(message: string | React.FunctionComponent, timeout?: number): () => void;
-    error(message: string | React.FunctionComponent, timeout?: number): () => void;
+    error(message: string | React.FunctionComponent, options?: number | ErrorAlertOptions): () => void;
 }
 export type AlertLevel = 'info' | 'success' | 'warn' | 'error';
+export interface ErrorAlertOptions {
+    title?: string;
+}
 export interface Alert {
     id: string;
     level: AlertLevel;
     message: string | React.FunctionComponent;
     timeout: number;
+    title?: string;
 }

package/dist/toolkit/fields/components/reference/components/command.d.ts

@@ -45,7 +45,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     asChild?: boolean;
-}, "ref">, "value" | "disabled" | "onSelect"> & {
+}, "ref">, "value" | "onSelect" | "disabled"> & {
     disabled?: boolean;
     forceMount?: boolean;
     keywords?: string[];

package/dist/toolkit/fields/plugins/date-format.d.ts

@@ -9,5 +9,6 @@ export interface DateFieldProps {
 }
 export declare const DEFAULT_DATE_DISPLAY_FORMAT = "MMM DD, YYYY";
 export declare const DEFAULT_TIME_DISPLAY_FORMAT = "h:mm A";
+export declare const getHourCycle: (timeFormat?: string) => 12 | 24;
 export declare const format: (val: string, _name: string, field: DateFieldProps) => string;
 export declare const parse: (val: string) => string;

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

@@ -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" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "onSelect" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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

@@ -65,6 +65,7 @@ export declare const Icons: {
     search: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     settings: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     highlight: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    textColor: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     strikethrough: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     subscript: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     superscript: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

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

@@ -4,3 +4,4 @@ export declare const StrikethroughToolbarButton: () => React.JSX.Element;
 export declare const ItalicToolbarButton: () => React.JSX.Element;
 export declare const CodeToolbarButton: () => React.JSX.Element;
 export declare const HighlightToolbarButton: () => React.JSX.Element;
+export declare const TextColorToolbarButton: () => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+/**
+ * Leaf mark for coloured text. The mark's value is the CSS colour itself
+ * (`{ text, textColor: '#CC4141' }`) — there is no separate boolean flag.
+ */
+export declare const TextColorPlugin: import("@udecode/plate/react").PlatePlugin<import("@udecode/plate").PluginConfig<"textColor", {}, {}, {}, {}>>;

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

@@ -177,6 +177,7 @@ export declare const Components: () => {
     a: typeof LinkElement;
     code: typeof CodeLeaf;
     highlight: ({ leaf, ...props }: React.ComponentProps<typeof PlateLeaf>) => React.JSX.Element;
+    textColor: ({ leaf, ...props }: React.ComponentProps<typeof PlateLeaf>) => React.JSX.Element;
     underline: React.ForwardRefExoticComponent<Omit<Omit<import("@udecode/plate/react").PlateLeafProps<import("@udecode/plate").TText, import("@udecode/plate").AnyPluginConfig>, keyof {
         className?: string;
         style?: React.CSSProperties;

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/toolbar/toolbar-overrides.d.ts

@@ -1,5 +1,5 @@
-import type { HeadingLevel, ToolbarOverrideType } from '@tinacms/schema-tools';
-export type { HeadingLevel, ToolbarOverrideType };
+import type { HeadingLevel, RichTextColorOption, ToolbarOverrideType } from '@tinacms/schema-tools';
+export type { HeadingLevel, RichTextColorOption, ToolbarOverrideType };
 export declare const STANDARD_ICON_WIDTH = 32;
 export declare const HEADING_ICON_WITH_TEXT = 127;
 export declare const HEADING_ICON_ONLY = 58;
@@ -11,4 +11,5 @@ export type ToolbarOverrides = {
     toolbar?: ToolbarOverrideType[];
     showFloatingToolbar?: boolean;
     headingLevels?: HeadingLevel[];
+    textColors?: RichTextColorOption[];
 };

package/dist/toolkit/fields/plugins/mdx-field-plugin/plate/toolbar/toolbar-provider.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { type ReactNode } from 'react';
+import { type HeadingLevel } from '@tinacms/schema-tools';
 import type { Form } from '../../../../../forms';
 import type { MdxTemplate } from '../types';
-import { type HeadingLevel } from '@tinacms/schema-tools';
-import type { ToolbarOverrides, ToolbarOverrideType } from './toolbar-overrides';
+import type { RichTextColorOption, ToolbarOverrideType, ToolbarOverrides } from './toolbar-overrides';
 interface ToolbarContextProps {
     tinaForm: Form;
     templates: MdxTemplate[];
@@ -16,8 +16,10 @@ interface ToolbarContextProps {
      * from "use the legacy default" without re-deriving the check.
      */
     headingLevelsConfigured: boolean;
+    /** Palette for the text colour dropdown (schema value or default). */
+    textColors: readonly RichTextColorOption[];
 }
-interface ToolbarProviderProps extends Omit<ToolbarContextProps, 'headingLevels' | 'headingLevelsConfigured'> {
+interface ToolbarProviderProps extends Omit<ToolbarContextProps, 'headingLevels' | 'headingLevelsConfigured' | 'textColors'> {
     children: ReactNode;
 }
 export declare const ToolbarProvider: React.FC<ToolbarProviderProps>;

package/dist/toolkit/react-modals/error-modal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ErrorModalProps {
+    title: string;
+    actions: React.ReactNode;
+    close?: () => void;
+    children: React.ReactNode;
+}
+export declare const ErrorModal: ({ title, actions, close, children, }: ErrorModalProps) => React.JSX.Element;

package/dist/toolkit/react-modals/index.d.ts

@@ -2,3 +2,4 @@ export * from './modal-provider';
 export * from './modal';
 export * from './fullscreen-modal';
 export * from './popup-modal';
+export * from './error-modal';

package/package.json

@@ -2,7 +2,7 @@
   "name": "tinacms",
   "type": "module",
   "typings": "dist/index.d.ts",
-  "version": "3.14.3",
+  "version": "3.15.0",
   "main": "dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -104,19 +104,18 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dropzone": "14.2.3",
     "react-final-form": "^6.5.9",
-    "react-router-dom": "^6.30.3",
+    "react-router-dom": "^7.18.4",
     "react-use": "^17.6.0",
     "tailwind-merge": "^2.6.0",
     "webfontloader": "1.6.28",
     "yup": "^1.6.1",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "^2.3.0",
     "@tinacms/bridge": "^0.3.1",
-    "@tinacms/schema-tools": "^2.10.1",
-    "@tinacms/search": "^0.0.0-f3cf692-20261006035700"
+    "@tinacms/schema-tools": "^2.11.0",
+    "@tinacms/mdx": "^2.4.0",
+    "@tinacms/search": "^1.2.26"
   },
   "devDependencies": {
-    "@graphql-tools/utils": "^10.8.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.2.0",
@@ -132,7 +131,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest-file-snapshot": "^0.7.0",
     "lowlight": "^3.3.0",
-    "next": "15.5.21",
+    "next": "15.5.27",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",