tinacms 3.8.3 → 3.9.0

package/dist/index.js

@@ -36,6 +36,8 @@ 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, isHeadingLevel, TinaSchema, addNamespaceToSchema, parseURL, resolveForm, normalizePath, canonicalPath, validateSchema } from "@tinacms/schema-tools";
+import { NAMER, resolveField } from "@tinacms/schema-tools";
 import { useBlockSelected, BlockSelectionPlugin } from "@udecode/plate-selection/react";
 import "@udecode/plate-dnd";
 import { setCellBackground } from "@udecode/plate-table";
@@ -56,10 +58,10 @@ import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, close
 import { sortableKeyboardCoordinates, useSortable, SortableContext, verticalListSortingStrategy, defaultAnimateLayoutChanges } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { FaSpinner, FaCircle, FaFolder, FaFile, FaLock, FaUnlock } from "react-icons/fa";
+import { AiFillWarning, AiOutlineLoading } from "react-icons/ai";
 import { buildSchema, print, getIntrospectionQuery, buildClientSchema, parse as parse$3 } from "graphql";
 import { diff as diff$1 } from "@graphql-inspector/core";
 import { processDocumentForIndexing, queryToSearchIndexQuery, optionsToSearchIndexOptions, parseSearchIndexResponse } from "@tinacms/search/index-client";
-import { AiFillWarning, AiOutlineLoading } from "react-icons/ai";
 import { HexColorPicker } from "react-colorful";
 import { MdKeyboardArrowDown, MdOutlineClear, MdArrowForward, MdAccessTime, MdOutlineDataSaverOff, MdCheckCircle, MdWifiOff, MdOutlineSettings, MdOutlinePhotoLibrary, MdVpnKey, MdImage, MdOutlineCloud, MdWarning, MdInfo, MdError, MdSyncProblem, MdOutlinePerson, MdOutlineHelpOutline } from "react-icons/md";
 import * as dropzone from "react-dropzone";
@@ -93,8 +95,6 @@ import { VscNewFile } from "react-icons/vsc";
 import { TbLogs } from "react-icons/tb";
 import { ImUsers, ImFilesEmpty } from "react-icons/im";
 import { PiSidebarSimpleLight } from "react-icons/pi";
-import { TinaSchema, addNamespaceToSchema, parseURL, resolveForm, normalizePath, canonicalPath, validateSchema } from "@tinacms/schema-tools";
-import { NAMER, resolveField } from "@tinacms/schema-tools";
 import gql from "graphql-tag";
 import { useLocation, NavLink, useNavigate, useParams, Link as Link$1, HashRouter, Routes, Route } from "react-router-dom";
 import { RiHome2Line } from "react-icons/ri";
@@ -1356,7 +1356,7 @@ function CodeBlockCombobox({
   const element = useElement();
   const value = element.lang || "plaintext";
   const [searchValue, setSearchValue] = React__default.useState("");
-  const items2 = React__default.useMemo(
+  const items = React__default.useMemo(
     () => languages.filter(
       (language) => !searchValue || language.label.toLowerCase().includes(searchValue.toLowerCase())
     ),
@@ -1394,7 +1394,7 @@ function CodeBlockCombobox({
         onValueChange: (value2) => setSearchValue(value2),
         placeholder: "Search language..."
       }
-    ), /* @__PURE__ */ React__default.createElement(CommandEmpty$1, null, "No language found."), /* @__PURE__ */ React__default.createElement(CommandList$1, { className: "h-48 overflow-y-auto" }, /* @__PURE__ */ React__default.createElement(CommandGroup$1, null, items2.map((language) => /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement(CommandEmpty$1, null, "No language found."), /* @__PURE__ */ React__default.createElement(CommandList$1, { className: "h-48 overflow-y-auto" }, /* @__PURE__ */ React__default.createElement(CommandGroup$1, null, items.map((language) => /* @__PURE__ */ React__default.createElement(
       CommandItem$1,
       {
         key: language.label,
@@ -2435,16 +2435,16 @@ const InlineCombobox = ({
   const store = useComboboxStore({
     setValue: (newValue) => startTransition(() => setValue(newValue))
   });
-  const items2 = store.useState("items");
+  const items = store.useState("items");
   useEffect(() => {
     if (!store.getState().activeId) {
       store.setActiveId(store.first());
     }
-  }, [items2, store]);
+  }, [items, store]);
   return /* @__PURE__ */ React__default.createElement("span", { contentEditable: false }, /* @__PURE__ */ React__default.createElement(
     ComboboxProvider,
     {
-      open: (items2.length > 0 || hasEmpty) && (!hideWhenNoValue || value.length > 0),
+      open: (items.length > 0 || hasEmpty) && (!hideWhenNoValue || value.length > 0),
       store
     },
     /* @__PURE__ */ React__default.createElement(InlineComboboxContext.Provider, { value: contextValue }, children)
@@ -2546,14 +2546,14 @@ const InlineComboboxEmpty = ({
 }) => {
   const { setHasEmpty } = useContext(InlineComboboxContext);
   const store = useComboboxContext();
-  const items2 = store.useState("items");
+  const items = store.useState("items");
   useEffect(() => {
     setHasEmpty(true);
     return () => {
       setHasEmpty(false);
     };
   }, [setHasEmpty]);
-  if (items2.length > 0)
+  if (items.length > 0)
     return null;
   return /* @__PURE__ */ React__default.createElement(
     "div",
@@ -2563,28 +2563,80 @@ const InlineComboboxEmpty = ({
     children
   );
 };
-const rules = [
-  {
-    icon: Icons.h1,
-    onSelect: (editor) => {
-      editor.tf.toggleBlock(HEADING_KEYS.h1);
+const ToolbarContext = createContext(
+  void 0
+);
+const ToolbarProvider = ({
+  tinaForm,
+  templates,
+  overrides,
+  children
+}) => {
+  const configured = !Array.isArray(overrides) ? overrides == null ? void 0 : overrides.headingLevels : void 0;
+  const headingLevelsConfigured = Array.isArray(configured);
+  const headingLevels = useMemo(
+    () => configured ? normalizeHeadingLevels(configured) : ALL_HEADING_LEVELS,
+    [configured]
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    ToolbarContext.Provider,
+    {
+      value: {
+        tinaForm,
+        templates,
+        overrides,
+        headingLevels,
+        headingLevelsConfigured
+      }
     },
+    children
+  );
+};
+const useToolbarContext = () => {
+  const context = useContext(ToolbarContext);
+  if (!context) {
+    throw new Error("useToolbarContext must be used within a ToolbarProvider");
+  }
+  return context;
+};
+const headingRulesByLevel = {
+  h1: {
+    icon: Icons.h1,
+    onSelect: (editor) => editor.tf.toggleBlock(HEADING_KEYS.h1),
     value: "Heading 1"
   },
-  {
+  h2: {
     icon: Icons.h2,
-    onSelect: (editor) => {
-      editor.tf.toggleBlock(HEADING_KEYS.h2);
-    },
+    onSelect: (editor) => editor.tf.toggleBlock(HEADING_KEYS.h2),
     value: "Heading 2"
   },
-  {
+  h3: {
     icon: Icons.h3,
-    onSelect: (editor) => {
-      editor.tf.toggleBlock(HEADING_KEYS.h3);
-    },
+    onSelect: (editor) => editor.tf.toggleBlock(HEADING_KEYS.h3),
     value: "Heading 3"
   },
+  h4: {
+    icon: Icons.h4,
+    onSelect: (editor) => editor.tf.toggleBlock(HEADING_KEYS.h4),
+    value: "Heading 4"
+  },
+  h5: {
+    icon: Icons.h5,
+    onSelect: (editor) => editor.tf.toggleBlock(HEADING_KEYS.h5),
+    value: "Heading 5"
+  },
+  h6: {
+    icon: Icons.h6,
+    onSelect: (editor) => editor.tf.toggleBlock(HEADING_KEYS.h6),
+    value: "Heading 6"
+  }
+};
+const DEFAULT_SLASH_HEADING_LEVELS = [
+  "h1",
+  "h2",
+  "h3"
+];
+const listRules = [
   {
     icon: Icons.ul,
     keywords: ["ul", "unordered list"],
@@ -2605,6 +2657,12 @@ const rules = [
 const SlashInputElement = withRef(
   ({ className, ...props }, ref) => {
     const { children, editor, element } = props;
+    const { headingLevels, headingLevelsConfigured } = useToolbarContext();
+    const slashHeadingLevels = headingLevelsConfigured ? headingLevels : DEFAULT_SLASH_HEADING_LEVELS;
+    const rules = [
+      ...slashHeadingLevels.map((level) => headingRulesByLevel[level]),
+      ...listRules
+    ];
     useEffect(() => {
       captureEvent(SlashCommandOpenedEvent);
     }, []);
@@ -4426,7 +4484,7 @@ const DropdownButton = React.forwardRef(
     children,
     className = "",
     onMainAction,
-    items: items2,
+    items,
     showSplitButton = true,
     ...props
   }, ref) => {
@@ -4453,7 +4511,7 @@ const DropdownButton = React.forwardRef(
             )
           }
         )
-      )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items2.map((item, index) => /* @__PURE__ */ React.createElement(
+      )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items.map((item, index) => /* @__PURE__ */ React.createElement(
         DropdownMenuItem,
         {
           key: index,
@@ -4500,7 +4558,7 @@ const DropdownButton = React.forwardRef(
           style: { fill: "none" }
         }
       )
-    )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items2.map((item, index) => {
+    )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items.map((item, index) => {
       var _a;
       return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, /* @__PURE__ */ React.createElement(
         DropdownMenuItem,
@@ -4511,7 +4569,7 @@ const DropdownButton = React.forwardRef(
         },
         item.icon && item.icon,
         item.label
-      ), item.variant === "destructive" && index < items2.length - 1 && ((_a = items2[index + 1]) == null ? void 0 : _a.variant) !== "destructive" && /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null));
+      ), item.variant === "destructive" && index < items.length - 1 && ((_a = items[index + 1]) == null ? void 0 : _a.variant) !== "destructive" && /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null));
     }))));
   }
 );
@@ -4633,10 +4691,10 @@ const Draggable = ({
   ));
 };
 const SortableProvider = ({
-  items: items2,
+  items,
   children
 }) => {
-  return /* @__PURE__ */ React__default.createElement(SortableContext, { items: items2, strategy: verticalListSortingStrategy }, children);
+  return /* @__PURE__ */ React__default.createElement(SortableContext, { items, strategy: verticalListSortingStrategy }, children);
 };
 const Dismissible = ({
   onDismiss,
@@ -5590,6 +5648,26 @@ const absoluteImgURL = (str) => {
     return str;
   return `${window.location.origin}${str}`;
 };
+const MAX_BASENAME_LENGTH = 200;
+const sanitizeFilename = (filename) => {
+  if (!filename)
+    return "file";
+  const normalized = filename.normalize("NFC");
+  const justName = normalized.split(/[\\/]/).pop() || "";
+  const lastDot = justName.lastIndexOf(".");
+  const hasExt = lastDot > 0 && lastDot < justName.length - 1;
+  const rawBase = hasExt ? justName.slice(0, lastDot) : justName;
+  const rawExt = hasExt ? justName.slice(lastDot) : "";
+  const clean2 = (input) => input.replace(/\s+/g, "-").replace(/[\x00-\x1F\x7F]/g, "").replace(/[<>:"|?*#%&]/g, "-").replace(/-+/g, "-");
+  let base = clean2(rawBase).replace(/^[.\-]+|[.\-]+$/g, "");
+  const ext = clean2(rawExt);
+  if (!base)
+    base = "file";
+  if (base.length > MAX_BASENAME_LENGTH) {
+    base = base.slice(0, MAX_BASENAME_LENGTH).replace(/[.\-]+$/, "") || "file";
+  }
+  return `${base}${ext}`;
+};
 const { useDropzone: useDropzone$1 } = dropzone;
 const StyledImage = ({ src }) => {
   const isSvg = /\.svg$/.test(src);
@@ -6198,7 +6276,7 @@ const Group$1 = ({ tinaForm, form, field, input, meta, index }) => {
     }
     if (field.openFormOnCreate) {
       const state = tinaForm.finalForm.getState();
-      const newIndex = field.addItemBehavior === "prepend" ? 0 : items2.length;
+      const newIndex = field.addItemBehavior === "prepend" ? 0 : items.length;
       if (state.invalid === true) {
         cms.alerts.error("Cannot navigate away from an invalid form.");
         return;
@@ -6216,7 +6294,7 @@ const Group$1 = ({ tinaForm, form, field, input, meta, index }) => {
       });
     }
   }, [form, field]);
-  const items2 = input.value || [];
+  const items = input.value || [];
   const itemProps = React__default.useCallback(
     (item) => {
       if (!field.itemProps)
@@ -6225,8 +6303,8 @@ const Group$1 = ({ tinaForm, form, field, input, meta, index }) => {
     },
     [field.itemProps]
   );
-  const isMax = items2.length >= (field.max || Number.POSITIVE_INFINITY);
-  const isMin = items2.length <= (field.min || 0);
+  const isMax = items.length >= (field.max || Number.POSITIVE_INFINITY);
+  const isMin = items.length <= (field.min || 0);
   const fixedLength = field.min === field.max;
   return /* @__PURE__ */ React__default.createElement(
     ListFieldMeta,
@@ -6249,12 +6327,12 @@ const Group$1 = ({ tinaForm, form, field, input, meta, index }) => {
         /* @__PURE__ */ React__default.createElement(AddIcon, { className: "w-5/6 h-auto" })
       )
     },
-    /* @__PURE__ */ React__default.createElement(ListPanel, null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__default.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React__default.createElement(EmptyList, null), /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(ListPanel, null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__default.createElement("div", { ref: provider.innerRef }, items.length === 0 && /* @__PURE__ */ React__default.createElement(EmptyList, null), /* @__PURE__ */ React__default.createElement(
       SortableProvider,
       {
-        items: items2.map((_, index2) => `${field.name}.${index2}`)
+        items: items.map((_, index2) => `${field.name}.${index2}`)
       },
-      items2.map((item, index2) => /* @__PURE__ */ React__default.createElement(
+      items.map((item, index2) => /* @__PURE__ */ React__default.createElement(
         Item$1,
         {
           key: index2,
@@ -6833,9 +6911,9 @@ const Blocks = ({
     },
     [field.name, form.mutators]
   );
-  const items2 = input.value || [];
-  const isMax = items2.length >= (field.max || Infinity);
-  const isMin = items2.length <= (field.min || 0);
+  const items = input.value || [];
+  const isMax = items.length >= (field.max || Infinity);
+  const isMin = items.length <= (field.min || 0);
   const fixedLength = field.min === field.max;
   return /* @__PURE__ */ React.createElement(
     ListFieldMeta,
@@ -6857,12 +6935,12 @@ const Blocks = ({
         }
       ))
     },
-    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef, className: "edit-page--list-parent" }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef, className: "edit-page--list-parent" }, items.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), /* @__PURE__ */ React.createElement(
       SortableProvider,
       {
-        items: items2.map((_, index2) => `${field.name}.${index2}`)
+        items: items.map((_, index2) => `${field.name}.${index2}`)
       },
-      items2.map((block, index2) => {
+      items.map((block, index2) => {
         const template = field.templates[block._template];
         if (!template) {
           return /* @__PURE__ */ React.createElement(
@@ -7014,7 +7092,7 @@ const List = ({ tinaForm, form, field, input, meta, index }) => {
       form.mutators.push(field.name, newItem);
     }
   }, [form, field]);
-  const items2 = input.value || [];
+  const items = input.value || [];
   const itemProps = React.useCallback(
     (item) => {
       if (!field.itemProps)
@@ -7023,8 +7101,8 @@ const List = ({ tinaForm, form, field, input, meta, index }) => {
     },
     [field.itemProps]
   );
-  const isMax = items2.length >= (field == null ? void 0 : field.max);
-  const isMin = items2.length <= (field == null ? void 0 : field.min);
+  const isMax = items.length >= (field == null ? void 0 : field.max);
+  const isMin = items.length <= (field == null ? void 0 : field.min);
   const fixedLength = (field == null ? void 0 : field.min) === (field == null ? void 0 : field.max);
   return /* @__PURE__ */ React.createElement(
     ListFieldMeta,
@@ -7046,12 +7124,12 @@ const List = ({ tinaForm, form, field, input, meta, index }) => {
         /* @__PURE__ */ React.createElement(AddIcon, { className: "w-5/6 h-auto" })
       )
     },
-    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef }, items.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), /* @__PURE__ */ React.createElement(
       SortableProvider,
       {
-        items: items2.map((_, index2) => `${field.name}.${index2}`)
+        items: items.map((_, index2) => `${field.name}.${index2}`)
       },
-      items2.map((item, index2) => /* @__PURE__ */ React.createElement(
+      items.map((item, index2) => /* @__PURE__ */ React.createElement(
         Item,
         {
           key: index2,
@@ -7335,8 +7413,8 @@ const TextFieldPlugin = {
       const path = field.name.split(".");
       const fieldName = path[path.length - 1];
       const parent = path.slice(0, path.length - 2);
-      const items2 = get(allValues, parent);
-      if (((_a = items2 == null ? void 0 : items2.filter((item) => item[fieldName] === value)) == null ? void 0 : _a.length) > 1) {
+      const items = get(allValues, parent);
+      if (((_a = items == null ? void 0 : items.filter((item) => item[fieldName] === value)) == null ? void 0 : _a.length) > 1) {
         return "Item with this unique id already exists";
       }
     }
@@ -7369,7 +7447,7 @@ const TagsField = wrapFieldsWithMeta(({ input, field, form, tinaForm }) => {
     },
     [form, field.name]
   );
-  const items2 = input.value || [];
+  const items = input.value || [];
   const ref = React.useRef(null);
   React.useEffect(() => {
     if (ref.current && field.experimental_focusIntent) {
@@ -7402,7 +7480,7 @@ const TagsField = wrapFieldsWithMeta(({ input, field, form, tinaForm }) => {
       className: "flex-shrink-0"
     },
     /* @__PURE__ */ React.createElement(AddIcon, { className: "w-5/6 h-auto" })
-  )), /* @__PURE__ */ React.createElement("span", { className: "flex gap-2 flex-wrap mt-2 mb-0" }, items2.length === 0 && /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 text-sm italic" }, "No tags"), items2.map((tag, index) => /* @__PURE__ */ React.createElement(Tag, { key: tag, tinaForm, field, index }, tag))));
+  )), /* @__PURE__ */ React.createElement("span", { className: "flex gap-2 flex-wrap mt-2 mb-0" }, items.length === 0 && /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 text-sm italic" }, "No tags"), items.map((tag, index) => /* @__PURE__ */ React.createElement(Tag, { key: tag, tinaForm, field, index }, tag))));
 });
 const Tag = ({ tinaForm, field, index, children, ...styleProps }) => {
   const removeItem = React.useCallback(() => {
@@ -9228,12 +9306,23 @@ const PullRequestCell = ({
   }
   return null;
 };
-const tableHeadingStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider sticky top-0 bg-gray-100 z-20 border-b-2 border-gray-200 ";
 function formatBranchName(str) {
-  const pattern = /[^/\w-]+/g;
-  const formattedStr = str.replace(pattern, "-");
-  return formattedStr.toLowerCase();
+  let result = "";
+  let replacingInvalidChars = false;
+  for (const char of str.toLowerCase()) {
+    const code = char.charCodeAt(0);
+    const isValid = char === "/" || char === "-" || char === "_" || code >= 48 && code <= 57 || code >= 97 && code <= 122;
+    if (isValid) {
+      result += char;
+      replacingInvalidChars = false;
+    } else if (!replacingInvalidChars) {
+      result += "-";
+      replacingInvalidChars = true;
+    }
+  }
+  return result;
 }
+const tableHeadingStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider sticky top-0 bg-gray-100 z-20 border-b-2 border-gray-200 ";
 const BranchSwitcher = (props) => {
   const cms = useCMS$1();
   const usingEditorialWorkflow = cms.api.tina.usingEditorialWorkflow;
@@ -9936,9 +10025,28 @@ class EventBus {
   }
   dispatch(event) {
     if (!this.listeners)
-      return;
+      return false;
     const listenerSnapshot = Array.from(this.listeners.values());
-    listenerSnapshot.forEach((listener) => listener.handleEvent(event));
+    return listenerSnapshot.reduce(
+      (handled, listener) => listener.handleEvent(event) || handled,
+      false
+    );
+  }
+  /**
+   * Whether any listener *explicitly* targets `eventType`. The catch-all `'*'`
+   * pattern does not count — callers use this to detect a purpose-built
+   * subscriber (e.g. a mounted UI overlay) without being misled by ambient
+   * `'*'` listeners such as the alerts bridge, which would otherwise make
+   * {@link dispatch} report every event as "handled".
+   */
+  hasExplicitListenerFor(eventType) {
+    if (!this.listeners)
+      return false;
+    for (const listener of this.listeners) {
+      if (listener.isExplicitListenerFor(eventType))
+        return true;
+    }
+    return false;
   }
 }
 class Listener {
@@ -9953,6 +10061,16 @@ class Listener {
     }
     return false;
   }
+  /**
+   * Whether this listener explicitly targets `eventType`. Unlike
+   * {@link watchesEvent}, the catch-all `'*'` pattern does NOT match, so this
+   * reflects a purpose-built subscription rather than an ambient one.
+   */
+  isExplicitListenerFor(eventType) {
+    if (this.eventPattern === "*")
+      return false;
+    return this.watchesEvent({ type: eventType });
+  }
   watchesEvent(currentEvent) {
     if (this.eventPattern === "*")
       return true;
@@ -9969,23 +10087,83 @@ class Listener {
     return !ignoresEvent;
   }
 }
+const EDITORIAL_WORKFLOW_STATUS = {
+  QUEUED: "queued",
+  PROCESSING: "processing",
+  SETTING_UP: "setting_up",
+  CREATING_BRANCH: "creating_branch",
+  INDEXING: "indexing",
+  CONTENT_GENERATION: "content_generation",
+  CREATING_PR: "creating_pr",
+  COMPLETE: "complete",
+  ERROR: "error",
+  TIMEOUT: "timeout"
+};
+const EDITORIAL_WORKFLOW_ERROR = {
+  BRANCH_EXISTS: "BRANCH_EXISTS",
+  BRANCH_HIERARCHY_CONFLICT: "BRANCH_HIERARCHY_CONFLICT",
+  VALIDATION_FAILED: "VALIDATION_FAILED"
+};
+const getEditorialWorkflowPrTitle = (branchName) => `${branchName.replace("tina/", "").replaceAll("-", " ")} (PR from TinaCMS)`;
+const TARGET_BRANCH_EXISTS_ERROR = "A branch with this name already exists";
+const checkBranchExists = async (tinaApi, branchName, debugLabel, branchType, fallback, signal) => {
+  try {
+    console.debug(
+      `[tina:branch-guard] ${debugLabel}: checking ${branchType} branch:`,
+      branchName
+    );
+    const exists = await tinaApi.branchExists(branchName, { signal });
+    console.debug(
+      `[tina:branch-guard] ${debugLabel}: ${branchType} branch exists?`,
+      exists
+    );
+    return exists;
+  } catch (err) {
+    if (signal == null ? void 0 : signal.aborted)
+      return fallback;
+    console.error(
+      `[tina:branch-guard] ${debugLabel}: branchExists threw, failing open:`,
+      err
+    );
+    return fallback;
+  }
+};
+const checkBaseBranchExists = async (tinaApi, baseBranch, debugLabel, signal) => checkBranchExists(tinaApi, baseBranch, debugLabel, "base", true, signal);
+const checkTargetBranchExists = async (tinaApi, targetBranch, debugLabel, signal) => checkBranchExists(tinaApi, targetBranch, debugLabel, "target", false, signal);
+const MEDIA_WORKFLOW_STEP = {
+  BRANCH: 1,
+  CONTENT: 2,
+  PR: 3,
+  COMPLETE: 4
+};
+const MEDIA_WORKFLOW_STATUS_TO_STEP = {
+  [EDITORIAL_WORKFLOW_STATUS.SETTING_UP]: MEDIA_WORKFLOW_STEP.BRANCH,
+  [EDITORIAL_WORKFLOW_STATUS.CREATING_BRANCH]: MEDIA_WORKFLOW_STEP.BRANCH,
+  [EDITORIAL_WORKFLOW_STATUS.INDEXING]: MEDIA_WORKFLOW_STEP.CONTENT,
+  [EDITORIAL_WORKFLOW_STATUS.CONTENT_GENERATION]: MEDIA_WORKFLOW_STEP.CONTENT,
+  [EDITORIAL_WORKFLOW_STATUS.CREATING_PR]: MEDIA_WORKFLOW_STEP.PR,
+  [EDITORIAL_WORKFLOW_STATUS.COMPLETE]: MEDIA_WORKFLOW_STEP.COMPLETE
+};
 const s3ErrorRegex = /<Error>.*<Code>(.+)<\/Code>.*<Message>(.+)<\/Message>.*/;
 class DummyMediaStore {
   constructor() {
     __publicField(this, "accept", "*");
   }
   async persist(files2) {
-    return files2.map(({ directory, file }) => ({
-      id: file.name,
-      type: "file",
-      directory,
-      filename: file.name
-    }));
+    return files2.map(({ directory, file }) => {
+      const filename = sanitizeFilename(file.name);
+      return {
+        id: filename,
+        type: "file",
+        directory,
+        filename
+      };
+    });
   }
   async list() {
-    const items2 = [];
+    const items = [];
     return {
-      items: items2,
+      items,
       nextOffset: 0
     };
   }
@@ -10003,6 +10181,9 @@ class TinaMediaStore {
     __publicField(this, "url");
     __publicField(this, "staticMedia");
     __publicField(this, "isStatic");
+    // Route assets-api calls through the created branch until indexing makes it safe to switch React branch state.
+    __publicField(this, "workflowBranchOverride");
+    __publicField(this, "mediaWorkflowInProgress", false);
     __publicField(this, "accept", DEFAULT_MEDIA_UPLOAD_TYPES);
     // allow up to 100MB uploads
     __publicField(this, "maxSize", 100 * 1024 * 1024);
@@ -10042,8 +10223,8 @@ class TinaMediaStore {
     return await this.api.authProvider.isAuthenticated();
   }
   /**
-   * Returns the current branch as a single-encoded query-param value, or
-   * an empty string when no branch is set.
+   * Returns the workflow branch override or current branch as a single-encoded
+   * query-param value, or an empty string when no branch is set.
    *
    * `this.api.branch` is already URL-encoded by `Client.setBranch()`, so we
    * decode then re-encode here to defend against double-encoding when this
@@ -10056,6 +10237,9 @@ class TinaMediaStore {
    * assets-api (which would route the call to a non-existent staging path).
    */
   encodedBranchParam() {
+    if (this.workflowBranchOverride) {
+      return encodeURIComponent(this.workflowBranchOverride);
+    }
     if (!this.api.branch)
       return "";
     const decoded = decodeURIComponent(this.api.branch);
@@ -10063,66 +10247,297 @@ class TinaMediaStore {
       return "";
     return encodeURIComponent(decoded);
   }
-  async persist_cloud(media) {
-    if (!await this.isAuthenticated()) {
-      return [];
+  shortStableHash(input) {
+    let hash = 2166136261;
+    for (let index = 0; index < input.length; index++) {
+      hash ^= input.charCodeAt(index);
+      hash = Math.imul(hash, 16777619);
     }
+    return (hash >>> 0).toString(36);
+  }
+  trimEdges(value, char) {
+    let start = 0;
+    let end = value.length;
+    while (start < end && value[start] === char) {
+      start++;
+    }
+    while (end > start && value[end - 1] === char) {
+      end--;
+    }
+    return value.slice(start, end);
+  }
+  branchSlugForMediaPath(directory, filename) {
+    const trimmedDirectory = this.trimEdges(directory ?? "", "/");
+    const rawPath = [trimmedDirectory, filename].filter(Boolean).join("/");
+    const flattened = rawPath.replaceAll("/", "-");
+    const slug = this.trimEdges(formatBranchName(flattened), "-");
+    if (!slug)
+      return `asset-${this.shortStableHash(rawPath || "root")}`;
+    return rawPath !== rawPath.toLowerCase() ? `${slug}-${this.shortStableHash(rawPath)}` : slug;
+  }
+  /** Joins a directory and filename into a normalized `dir/file` repo path. */
+  joinMediaPath(directory, filename) {
+    const dir = this.trimEdges(directory ?? "", "/");
+    return dir && dir !== "/" ? `${dir}/${filename ?? ""}` : filename ?? "";
+  }
+  branchQueryParam() {
     const encodedBranch = this.encodedBranchParam();
-    const branchQuery = encodedBranch ? `?branch=${encodedBranch}` : "";
-    for (const item of media) {
-      let directory = item.directory;
-      if (directory == null ? void 0 : directory.endsWith("/")) {
-        directory = directory.substr(0, directory.length - 1);
-      }
-      const path = `${directory && directory !== "/" ? `${directory}/${item.file.name}` : item.file.name}`;
-      const res = await this.api.authProvider.fetchWithToken(
-        `${this.url}/upload_url/${path}${branchQuery}`,
-        { method: "GET" }
+    return encodedBranch ? `?branch=${encodedBranch}` : "";
+  }
+  requestMediaBranchChoice(branchName, baseBranch, opType, repoPath) {
+    if (!this.cms.events.hasExplicitListenerFor("media:workflow:confirm-branch")) {
+      throw new Error(
+        "Cannot start a media editorial workflow: no branch prompt is mounted. Ensure <MediaWorkflowOverlay /> is rendered (TinaCloudProvider mounts it automatically)."
       );
-      if (res.status === 412) {
-        const { message = "Unexpected error generating upload url" } = await res.json();
-        throw new Error(message);
-      }
-      const { signedUrl, requestId } = await res.json();
-      if (!signedUrl) {
-        throw new Error("Unexpected error generating upload url");
-      }
-      const uploadRes = await this.fetchFunction(signedUrl, {
-        method: "PUT",
-        body: item.file,
-        headers: {
-          "Content-Type": item.file.type || "application/octet-stream",
-          "Content-Length": String(item.file.size)
+    }
+    return new Promise((resolve) => {
+      this.cms.events.dispatch({
+        type: "media:workflow:confirm-branch",
+        branchName,
+        baseBranch,
+        onConfirm: async (selectedBranchName) => {
+          const context = await this.prepareMediaBranch(
+            selectedBranchName,
+            baseBranch,
+            opType,
+            repoPath
+          );
+          resolve({
+            kind: "workflow",
+            context
+          });
+        },
+        onCancel: () => resolve({ kind: "cancelled" }),
+        onSaveToProtectedBranch: () => resolve({ kind: "direct" })
+      });
+    });
+  }
+  async prepareMediaBranch(branchName, baseBranch, opType, repoPath) {
+    if (this.mediaWorkflowInProgress) {
+      throw new Error("A media workflow is already in progress.");
+    }
+    this.mediaWorkflowInProgress = true;
+    try {
+      this.cms.events.dispatch({
+        type: "media:workflow:start",
+        branchName,
+        baseBranch
+      });
+      const workflow = await this.api.startMediaEditorialWorkflow({
+        branchName,
+        baseBranch,
+        prTitle: getEditorialWorkflowPrTitle(branchName),
+        operation: opType,
+        repoPath
+      });
+      const branchContext = {
+        branchName: workflow.branchName || branchName,
+        baseBranch,
+        requestId: workflow.requestId
+      };
+      this.workflowBranchOverride = branchContext.branchName;
+      return branchContext;
+    } catch (err) {
+      this.resetWorkflowState();
+      throw err;
+    }
+  }
+  resetWorkflowState() {
+    this.workflowBranchOverride = void 0;
+    this.mediaWorkflowInProgress = false;
+  }
+  async finalizeMediaWorkflow(branchContext, onCatalogued) {
+    try {
+      const result = await this.api.waitForEditorialWorkflowStatus(
+        branchContext.requestId,
+        (status) => {
+          const step = MEDIA_WORKFLOW_STATUS_TO_STEP[status.status];
+          if (step) {
+            this.cms.events.dispatch({
+              type: "media:workflow:step",
+              step
+            });
+          }
         }
+      );
+      if (onCatalogued)
+        await onCatalogued();
+      this.resetWorkflowState();
+      this.cms.events.dispatch({
+        type: "media:workflow:complete",
+        branchName: result.branchName || branchContext.branchName
       });
-      if (!uploadRes.ok) {
-        const xmlRes = await uploadRes.text();
-        const matches = s3ErrorRegex.exec(xmlRes);
-        console.error(xmlRes);
-        if (!matches) {
-          throw new Error("Unexpected error uploading media asset");
+      if (result.warning) {
+        this.cms.alerts.warn(result.warning, 0);
+      }
+      this.cms.alerts.success(
+        `Branch created successfully - Pull Request at ${(result == null ? void 0 : result.pullRequestUrl) || ""}`,
+        0
+      );
+      this.cms.events.dispatch({ type: "media:workflow:finish" });
+    } catch (err) {
+      this.resetWorkflowState();
+      this.dispatchMediaWorkflowError(err);
+    }
+  }
+  dispatchMediaWorkflowError(err) {
+    this.cms.events.dispatch({
+      type: "media:workflow:error",
+      message: err instanceof Error ? err.message : String(err)
+    });
+  }
+  async runMediaOpWithWorkflow(decision, op) {
+    if (decision.kind !== "workflow")
+      return op();
+    try {
+      const result = await op();
+      await this.finalizeMediaWorkflow(decision.context);
+      return result;
+    } catch (err) {
+      this.resetWorkflowState();
+      this.cms.events.dispatch({ type: "media:workflow:finish" });
+      throw err;
+    }
+  }
+  async prepareProtectedMediaBranch(opType, directory, filename) {
+    if (!this.api.usingProtectedBranch())
+      return { kind: "direct" };
+    const baseBranch = decodeURIComponent(this.api.branch || "");
+    const mediaSlug = this.branchSlugForMediaPath(directory, filename);
+    const branchName = `media-${opType}-${mediaSlug}`;
+    const repoFilename = opType === "upload" && filename ? sanitizeFilename(filename) : filename;
+    const repoPath = this.joinMediaPath(directory, repoFilename);
+    return this.requestMediaBranchChoice(
+      branchName,
+      baseBranch,
+      opType,
+      repoPath
+    );
+  }
+  async waitForRequestStatus(requestId, timeoutMessage) {
+    const startTime = Date.now();
+    while (true) {
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      const { error: error2, message } = await this.api.getRequestStatus(requestId);
+      if (error2 !== void 0) {
+        if (error2) {
+          throw new Error(message);
         } else {
-          throw new Error(`Upload error: '${matches[2]}'`);
+          return;
         }
       }
-      const updateStartTime = Date.now();
-      while (true) {
-        await new Promise((resolve) => setTimeout(resolve, 1e3));
-        const { error: error2, message } = await this.api.getRequestStatus(requestId);
-        if (error2 !== void 0) {
-          if (error2) {
-            throw new Error(message);
-          } else {
-            break;
-          }
-        }
-        if (Date.now() - updateStartTime > 3e4) {
-          throw new Error("Time out waiting for upload to complete");
-        }
+      if (Date.now() - startTime > 3e4) {
+        throw new Error(timeoutMessage);
       }
     }
+  }
+  async persist_cloud(media) {
+    if (media.length === 0) {
+      return [];
+    }
+    if (!await this.isAuthenticated()) {
+      return [];
+    }
+    const firstItem = media[0];
+    const decision = await this.prepareProtectedMediaBranch(
+      "upload",
+      firstItem.directory,
+      firstItem.file.name
+    );
+    if (decision.kind === "cancelled")
+      return [];
+    if (decision.kind === "workflow") {
+      return this.persistCloudViaWorkflow(media, decision.context);
+    }
+    const branchQuery = this.branchQueryParam();
+    for (const item of media) {
+      await this.uploadCloudMediaItem(item, branchQuery, {
+        waitForStatus: true
+      });
+    }
     return this.fetchUploadedEntries(media);
   }
+  /**
+   * Uploads assets through the editorial workflow. The asset is staged, the
+   * server-side workflow catalogues it in the new branch's media index, and
+   * only then do we list it — while the branch override still routes list
+   * calls to the workflow branch, so the freshly uploaded item is returned to
+   * the caller (and added to the media manager) without needing a manual
+   * refresh.
+   */
+  async persistCloudViaWorkflow(media, branchContext) {
+    try {
+      const branchQuery = this.branchQueryParam();
+      for (const item of media) {
+        await this.uploadCloudMediaItem(item, branchQuery, {
+          waitForStatus: false
+        });
+      }
+      let entries = [];
+      await this.finalizeMediaWorkflow(branchContext, async () => {
+        entries = await this.fetchUploadedEntries(media);
+      });
+      return entries;
+    } catch (err) {
+      this.resetWorkflowState();
+      this.cms.events.dispatch({ type: "media:workflow:finish" });
+      throw err;
+    }
+  }
+  async uploadCloudMediaItem(item, branchQuery, { waitForStatus = true } = {}) {
+    const path = this.joinMediaPath(
+      item.directory,
+      sanitizeFilename(item.file.name)
+    );
+    const res = await this.api.authProvider.fetchWithToken(
+      `${this.url}/upload_url/${path}${branchQuery}`,
+      { method: "GET" }
+    );
+    if (res.status === 412) {
+      const { message = "Unexpected error generating upload url" } = await res.json();
+      throw new Error(message);
+    }
+    const { signedUrl, requestId } = await res.json();
+    if (!signedUrl) {
+      throw new Error("Unexpected error generating upload url");
+    }
+    const uploadRes = await this.fetchFunction(signedUrl, {
+      method: "PUT",
+      body: item.file,
+      headers: {
+        "Content-Type": item.file.type || "application/octet-stream",
+        "Content-Length": String(item.file.size)
+      }
+    });
+    if (!uploadRes.ok) {
+      const xmlRes = await uploadRes.text();
+      const matches = s3ErrorRegex.exec(xmlRes);
+      console.error(xmlRes);
+      if (!matches) {
+        throw new Error("Unexpected error uploading media asset");
+      } else {
+        throw new Error(`Upload error: '${matches[2]}'`);
+      }
+    }
+    if (waitForStatus) {
+      await this.waitForRequestStatus(
+        requestId,
+        "Time out waiting for upload to complete"
+      );
+    }
+  }
+  groupMediaByDirectory(media) {
+    const byDirectory = /* @__PURE__ */ new Map();
+    for (const item of media) {
+      let dir = item.directory || "";
+      while (dir.endsWith("/"))
+        dir = dir.slice(0, -1);
+      const bucket = byDirectory.get(dir) ?? [];
+      bucket.push(item);
+      byDirectory.set(dir, bucket);
+    }
+    return byDirectory;
+  }
   /**
    * Resolves the just-uploaded items to canonical `Media` entries by hitting
    * the assets-api `list` endpoint, which is the source of truth for the
@@ -10136,27 +10551,19 @@ class TinaMediaStore {
    * throwing — the upload itself already succeeded.
    */
   async fetchUploadedEntries(media) {
-    const byDirectory = /* @__PURE__ */ new Map();
-    for (const item of media) {
-      let dir = item.directory || "";
-      while (dir.endsWith("/"))
-        dir = dir.slice(0, -1);
-      const bucket = byDirectory.get(dir) ?? [];
-      bucket.push(item);
-      byDirectory.set(dir, bucket);
-    }
+    const byDirectory = this.groupMediaByDirectory(media);
     const thumbnailSizes = [
       { w: 75, h: 75 },
       { w: 400, h: 400 },
       { w: 1e3, h: 1e3 }
     ];
     const results = [];
-    for (const [directory, items2] of byDirectory) {
+    for (const [directory, items] of byDirectory) {
       let listed;
       try {
         listed = await this.list({
           directory,
-          limit: Math.max(100, items2.length * 4),
+          limit: Math.max(100, items.length * 4),
           thumbnailSizes
         });
       } catch (err) {
@@ -10169,8 +10576,8 @@ class TinaMediaStore {
           found.set(entry.filename, entry);
         }
       }
-      for (const item of items2) {
-        const entry = found.get(item.file.name);
+      for (const item of items) {
+        const entry = found.get(sanitizeFilename(item.file.name));
         if (entry)
           results.push(entry);
       }
@@ -10194,6 +10601,7 @@ class TinaMediaStore {
     }
     for (const item of media) {
       const { file, directory } = item;
+      const safeName = sanitizeFilename(file.name);
       let strippedDirectory = directory;
       if (strippedDirectory.startsWith("/")) {
         strippedDirectory = strippedDirectory.substr(1) || "";
@@ -10202,14 +10610,14 @@ class TinaMediaStore {
         strippedDirectory = strippedDirectory.substr(0, strippedDirectory.length - 1) || "";
       }
       const formData = new FormData();
-      formData.append("file", file);
+      formData.append("file", file, safeName);
       formData.append("directory", directory);
-      formData.append("filename", file.name);
-      let uploadPath = `${strippedDirectory ? `${strippedDirectory}/${file.name}` : file.name}`;
+      formData.append("filename", safeName);
+      let uploadPath = `${strippedDirectory ? `${strippedDirectory}/${safeName}` : safeName}`;
       if (uploadPath.startsWith("/")) {
         uploadPath = uploadPath.substr(1);
       }
-      const filePath = `${strippedDirectory ? `${folder}${strippedDirectory}/${file.name}` : folder + file.name}`;
+      const filePath = `${strippedDirectory ? `${folder}${strippedDirectory}/${safeName}` : folder + safeName}`;
       const res = await this.fetchFunction(`${this.url}/upload/${uploadPath}`, {
         method: "POST",
         body: formData
@@ -10222,8 +10630,8 @@ class TinaMediaStore {
       if (fileRes == null ? void 0 : fileRes.success) {
         const parsedRes = {
           type: "file",
-          id: file.name,
-          filename: file.name,
+          id: safeName,
+          filename: safeName,
           directory,
           src: filePath,
           thumbnails: {
@@ -10311,9 +10719,9 @@ class TinaMediaStore {
       }
     }
     const { cursor, files: files2, directories } = await res.json();
-    const items2 = [];
+    const items = [];
     for (const dir of directories) {
-      items2.push({
+      items.push({
         type: "dir",
         id: dir,
         directory: options.directory || "",
@@ -10321,7 +10729,7 @@ class TinaMediaStore {
       });
     }
     for (const file of files2) {
-      items2.push({
+      items.push({
         directory: options.directory || "",
         type: "file",
         id: file.filename,
@@ -10334,42 +10742,38 @@ class TinaMediaStore {
       });
     }
     return {
-      items: items2,
+      items,
       nextOffset: cursor || 0
     };
   }
   async delete(media) {
-    const path = `${media.directory ? `${media.directory}/${media.filename}` : media.filename}`;
+    const path = this.joinMediaPath(media.directory, media.filename);
     if (!this.isLocal) {
       if (await this.isAuthenticated()) {
-        const encodedBranch = this.encodedBranchParam();
-        const branchQuery = encodedBranch ? `?branch=${encodedBranch}` : "";
-        const res = await this.api.authProvider.fetchWithToken(
-          `${this.url}/${path}${branchQuery}`,
-          {
-            method: "DELETE"
-          }
+        const decision = await this.prepareProtectedMediaBranch(
+          "delete",
+          media.directory,
+          media.filename
         );
-        if (res.status == 200) {
+        if (decision.kind === "cancelled")
+          return;
+        await this.runMediaOpWithWorkflow(decision, async () => {
+          const branchQuery = this.branchQueryParam();
+          const res = await this.api.authProvider.fetchWithToken(
+            `${this.url}/${path}${branchQuery}`,
+            { method: "DELETE" }
+          );
+          if (res.status !== 200) {
+            throw new Error("Unexpected error deleting media asset");
+          }
           const { requestId } = await res.json();
-          const deleteStartTime = Date.now();
-          while (true) {
-            await new Promise((resolve) => setTimeout(resolve, 1e3));
-            const { error: error2, message } = await this.api.getRequestStatus(requestId);
-            if (error2 !== void 0) {
-              if (error2) {
-                throw new Error(message);
-              } else {
-                break;
-              }
-            }
-            if (Date.now() - deleteStartTime > 3e4) {
-              throw new Error("Time out waiting for delete to complete");
-            }
+          if (decision.kind !== "workflow") {
+            await this.waitForRequestStatus(
+              requestId,
+              "Time out waiting for delete to complete"
+            );
           }
-        } else {
-          throw new Error("Unexpected error deleting media asset");
-        }
+        });
       } else {
         throw E_UNAUTHORIZED;
       }
@@ -12011,14 +12415,16 @@ const MediaLightbox = ({
   item,
   onClose
 }) => {
+  useEffect(() => {
+    if (!item)
+      return;
+    captureEvent(MediaUsageDashboardPreviewOpenedEvent);
+  }, [item]);
   if (!item)
     return null;
   const usageCount = item.usedIn.length;
   const mediaSrc = item.media.src;
   const directory = item.media.directory || "/";
-  useEffect(() => {
-    captureEvent(MediaUsageDashboardPreviewOpenedEvent);
-  }, []);
   return /* @__PURE__ */ React__default.createElement(Dialog, { open: true, onOpenChange: (isOpen) => !isOpen && onClose() }, /* @__PURE__ */ React__default.createElement(DialogContent, { className: "w-auto max-w-[95vw] border border-gray-200 bg-white px-4 pt-12 pb-4 shadow-xl sm:max-w-fit" }, /* @__PURE__ */ React__default.createElement(DialogTitle, { className: "sr-only" }, "Preview: ", item.media.filename), /* @__PURE__ */ React__default.createElement(DialogDescription, { className: "sr-only" }, usageCount > 0 ? `Used in ${usageCount} ${usageCount === 1 ? "document" : "documents"}` : "Unused media file"), /* @__PURE__ */ React__default.createElement("div", { className: "mx-auto w-fit max-w-full rounded-lg border border-gray-200 bg-gray-50 p-2 sm:p-3" }, item.type === "video" ? /* @__PURE__ */ React__default.createElement(
     VideoLightboxContent,
     {
@@ -12780,7 +13186,7 @@ const NavProvider = ({
 const name = "tinacms";
 const type = "module";
 const typings = "dist/index.d.ts";
-const version$1 = "3.8.3";
+const version$1 = "3.9.0";
 const main = "dist/index.js";
 const module = "./dist/index.js";
 const exports = {
@@ -13511,7 +13917,7 @@ function BreadcrumbEllipsis({
   );
 }
 const getPaddingClass = (depth) => `${1.5 + depth * 1.35}rem`;
-const collectAllDocumentItems = (items2, isGlobalFn) => {
+const collectAllDocumentItems = (items, isGlobalFn) => {
   const allItems = [];
   const processItem = (item, isFromSubItems = false) => {
     if (item.type === "document") {
@@ -13526,13 +13932,13 @@ const collectAllDocumentItems = (items2, isGlobalFn) => {
       }
     }
   };
-  items2.forEach((item) => processItem(item, false));
+  items.forEach((item) => processItem(item, false));
   return allItems;
 };
-const buildTreeFromPaths = (items2) => {
+const buildTreeFromPaths = (items) => {
   const root = [];
   const nodeMap = /* @__PURE__ */ new Map();
-  items2.forEach((item) => {
+  items.forEach((item) => {
     const parts = item.formId.split("/").filter(Boolean);
     let currentLevel = root;
     let currentPath = "";
@@ -15369,23 +15775,6 @@ const BranchPreviewButton = (props) => {
     /* @__PURE__ */ React.createElement(BiLinkExternal, { className: "h-5 w-auto" })
   );
 };
-const EDITORIAL_WORKFLOW_STATUS = {
-  QUEUED: "queued",
-  PROCESSING: "processing",
-  SETTING_UP: "setting_up",
-  CREATING_BRANCH: "creating_branch",
-  INDEXING: "indexing",
-  CONTENT_GENERATION: "content_generation",
-  CREATING_PR: "creating_pr",
-  COMPLETE: "complete",
-  ERROR: "error",
-  TIMEOUT: "timeout"
-};
-const EDITORIAL_WORKFLOW_ERROR = {
-  BRANCH_EXISTS: "BRANCH_EXISTS",
-  BRANCH_HIERARCHY_CONFLICT: "BRANCH_HIERARCHY_CONFLICT",
-  VALIDATION_FAILED: "VALIDATION_FAILED"
-};
 const CREATE_DOCUMENT_GQL = `#graphql
 mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
   createDocument(
@@ -15743,6 +16132,18 @@ const pathRelativeToCollection = (collectionPath, fullPath) => {
     `Path ${fullPath} not within collection path ${collectionPath}`
   );
 };
+const getEditorialWorkflowMutation = (crudType) => {
+  if (crudType === "create") {
+    return CREATE_DOCUMENT_GQL;
+  }
+  if (crudType === "delete") {
+    return DELETE_DOCUMENT_GQL;
+  }
+  if (crudType !== "view") {
+    return UPDATE_DOCUMENT_GQL;
+  }
+  return "";
+};
 const WORKFLOW_STEPS = [
   { id: 1, name: "Creating branch", description: "Setting up workspace" },
   { id: 2, name: "Updating branch", description: "Syncing content to branch" },
@@ -15753,6 +16154,33 @@ const formatTime = (seconds) => {
   const secs = seconds % 60;
   return `${mins}:${secs.toString().padStart(2, "0")}`;
 };
+const getEditorialWorkflowErrorMessage = (e) => {
+  let errMessage = "Branch operation failed. Talking to GitHub was unsuccessful, please try again. If the problem persists please contact support at https://tina.io/support 🦙";
+  const err = e;
+  if (err.errorCode) {
+    switch (err.errorCode) {
+      case EDITORIAL_WORKFLOW_ERROR.BRANCH_EXISTS:
+        errMessage = "A branch with this name already exists";
+        break;
+      case EDITORIAL_WORKFLOW_ERROR.BRANCH_HIERARCHY_CONFLICT:
+        errMessage = err.message || "Branch name conflicts with an existing branch";
+        break;
+      case EDITORIAL_WORKFLOW_ERROR.VALIDATION_FAILED:
+        errMessage = err.message || "Invalid branch name";
+        break;
+      default:
+        errMessage = err.message || errMessage;
+        break;
+    }
+  } else if (err.message) {
+    if (err.message.toLowerCase().includes("already exists")) {
+      errMessage = "A branch with this name already exists";
+    } else if (err.message.toLowerCase().includes("conflict")) {
+      errMessage = err.message;
+    }
+  }
+  return errMessage;
+};
 function useEditorialWorkflow() {
   const cms = useCMS$1();
   const tinaApi = cms.api.tina;
@@ -15786,20 +16214,30 @@ function useEditorialWorkflow() {
     path,
     values,
     crudType,
-    tinaForm
+    tinaForm,
+    signal
   }) => {
     var _a;
     try {
+      if (signal == null ? void 0 : signal.aborted)
+        return false;
+      const targetBranchExists = await checkTargetBranchExists(
+        tinaApi,
+        branchName,
+        "executeEditorialWorkflow",
+        signal
+      );
+      if (signal == null ? void 0 : signal.aborted)
+        return false;
+      if (targetBranchExists) {
+        setErrorMessage(TARGET_BRANCH_EXISTS_ERROR);
+        setIsExecuting(false);
+        setCurrentStep(0);
+        return false;
+      }
       setIsExecuting(true);
       setCurrentStep(1);
-      let graphql2 = "";
-      if (crudType === "create") {
-        graphql2 = CREATE_DOCUMENT_GQL;
-      } else if (crudType === "delete") {
-        graphql2 = DELETE_DOCUMENT_GQL;
-      } else if (crudType !== "view") {
-        graphql2 = UPDATE_DOCUMENT_GQL;
-      }
+      const graphql2 = getEditorialWorkflowMutation(crudType);
       const collection = tinaApi.schema.getCollectionByFullPath(path);
       let submittedValues = values;
       if ((_a = collection == null ? void 0 : collection.ui) == null ? void 0 : _a.beforeSubmit) {
@@ -15820,7 +16258,7 @@ function useEditorialWorkflow() {
       const result = await tinaApi.executeEditorialWorkflow({
         branchName,
         baseBranch,
-        prTitle: `${branchName.replace("tina/", "").replace("-", " ")} (PR from TinaCMS)`,
+        prTitle: getEditorialWorkflowPrTitle(branchName),
         graphQLContentOp: {
           query: graphql2,
           variables: {
@@ -15869,30 +16307,7 @@ function useEditorialWorkflow() {
       return true;
     } catch (e) {
       console.error(e);
-      let errMessage = "Branch operation failed. Talking to GitHub was unsuccessful, please try again. If the problem persists please contact support at https://tina.io/support 🦙";
-      const err = e;
-      if (err.errorCode) {
-        switch (err.errorCode) {
-          case EDITORIAL_WORKFLOW_ERROR.BRANCH_EXISTS:
-            errMessage = "A branch with this name already exists";
-            break;
-          case EDITORIAL_WORKFLOW_ERROR.BRANCH_HIERARCHY_CONFLICT:
-            errMessage = err.message || "Branch name conflicts with an existing branch";
-            break;
-          case EDITORIAL_WORKFLOW_ERROR.VALIDATION_FAILED:
-            errMessage = err.message || "Invalid branch name";
-            break;
-          default:
-            errMessage = err.message || errMessage;
-            break;
-        }
-      } else if (err.message) {
-        if (err.message.toLowerCase().includes("already exists")) {
-          errMessage = "A branch with this name already exists";
-        } else if (err.message.toLowerCase().includes("conflict")) {
-          errMessage = err.message;
-        }
-      }
+      const errMessage = getEditorialWorkflowErrorMessage(e);
       setErrorMessage(errMessage);
       setIsExecuting(false);
       setCurrentStep(0);
@@ -15980,6 +16395,18 @@ const WorkflowProgressIndicator = ({
     "Learn more about Editorial Workflow"
   ));
 };
+const EditorialWorkflowProgressModal = ({
+  title,
+  currentStep,
+  elapsedTime
+}) => /* @__PURE__ */ React.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React.createElement(ModalHeader, null, title), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement(
+  WorkflowProgressIndicator,
+  {
+    currentStep,
+    isExecuting: true,
+    elapsedTime
+  }
+))));
 const formatDefaultBranchName = (filePath, crudType) => {
   let result = filePath;
   const contentPrefix = "content/";
@@ -16011,6 +16438,7 @@ const CreateBranchModal = ({
     formatDefaultBranchName(path, crudType)
   );
   const [isBranchGuardChecking, setIsBranchGuardChecking] = React.useState(false);
+  const branchGuardAbortRef = React.useRef(null);
   const {
     isExecuting,
     errorMessage,
@@ -16019,27 +16447,35 @@ const CreateBranchModal = ({
     executeWorkflow,
     reset
   } = useEditorialWorkflow();
+  const abortBranchGuard = React.useCallback(() => {
+    var _a;
+    (_a = branchGuardAbortRef.current) == null ? void 0 : _a.abort();
+    branchGuardAbortRef.current = null;
+    setIsBranchGuardChecking(false);
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      var _a;
+      (_a = branchGuardAbortRef.current) == null ? void 0 : _a.abort();
+    };
+  }, []);
   const executeEditorialWorkflow = async () => {
+    abortBranchGuard();
+    const abortController = new AbortController();
+    branchGuardAbortRef.current = abortController;
     setIsBranchGuardChecking(true);
     const baseBranch = decodeURIComponent(tinaApi.branch);
-    let baseBranchExists = true;
-    try {
-      console.debug(
-        "[tina:branch-guard] executeEditorialWorkflow: checking base branch:",
-        baseBranch
-      );
-      baseBranchExists = await tinaApi.branchExists(baseBranch);
-    } catch (err) {
-      console.error(
-        "[tina:branch-guard] executeEditorialWorkflow: branchExists threw, failing open:",
-        err
-      );
-    }
-    console.debug(
-      "[tina:branch-guard] executeEditorialWorkflow: base branch exists?",
-      baseBranchExists
+    const targetBranch = `tina/${newBranchName}`;
+    const baseBranchExists = await checkBaseBranchExists(
+      tinaApi,
+      baseBranch,
+      "executeEditorialWorkflow",
+      abortController.signal
     );
+    if (abortController.signal.aborted)
+      return;
     if (!baseBranchExists) {
+      abortBranchGuard();
       console.debug(
         "[tina:branch-guard] executeEditorialWorkflow: base branch deleted — handing off"
       );
@@ -16048,52 +16484,84 @@ const CreateBranchModal = ({
     }
     setIsBranchGuardChecking(false);
     const success = await executeWorkflow({
-      branchName: `tina/${newBranchName}`,
+      branchName: targetBranch,
       baseBranch,
       path,
       values,
       crudType,
-      tinaForm
+      tinaForm,
+      signal: abortController.signal
     });
+    if (branchGuardAbortRef.current === abortController) {
+      branchGuardAbortRef.current = null;
+    }
     if (success) {
       close2();
     }
   };
-  const renderStateContent = () => {
-    if (isExecuting) {
-      return /* @__PURE__ */ React.createElement(
-        WorkflowProgressIndicator,
-        {
-          currentStep,
-          isExecuting,
-          elapsedTime
-        }
-      );
-    } else {
-      return /* @__PURE__ */ React.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-red-700 py-2 px-3 mb-4 bg-red-50 border border-red-200 rounded" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-700 mb-4 max-w-sm" }, "To make changes, you need to create a copy then get it approved and merged for it to go live.", /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("span", { className: "text-gray-500" }, "Learn more about "), /* @__PURE__ */ React.createElement(
-        "a",
-        {
-          className: "underline text-tina-orange-dark font-medium",
-          href: "https://tina.io/docs/r/editorial-workflow",
-          target: "_blank"
-        },
-        "Editorial Workflow"
-      ), "."), /* @__PURE__ */ React.createElement(
-        PrefixedTextField,
-        {
-          name: "new-branch-name",
-          label: "Branch Name",
-          placeholder: "e.g. {{PAGE-NAME}}-updates",
-          value: newBranchName,
-          onChange: (e) => {
-            reset();
-            setNewBranchName(e.target.value);
-          }
-        }
-      ));
+  if (isExecuting) {
+    return /* @__PURE__ */ React.createElement(
+      EditorialWorkflowProgressModal,
+      {
+        title: "Save changes to new branch",
+        currentStep,
+        elapsedTime
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    CreateBranchPromptModal,
+    {
+      branchName: newBranchName,
+      close: () => {
+        abortBranchGuard();
+        close2();
+      },
+      errorMessage,
+      disabled: newBranchName === "" || isBranchGuardChecking,
+      onBranchNameChange: (value) => {
+        abortBranchGuard();
+        reset();
+        setNewBranchName(value);
+      },
+      onCreateBranch: executeEditorialWorkflow,
+      onSaveToProtectedBranch: () => {
+        abortBranchGuard();
+        close2();
+        safeSubmit();
+      }
     }
-  };
-  return /* @__PURE__ */ React.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, "Save changes to new branch"))), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React.createElement(ModalActions, { align: "end" }, /* @__PURE__ */ React.createElement(
+  );
+};
+const CreateBranchPromptModal = ({
+  branchName,
+  close: close2,
+  disabled,
+  errorMessage,
+  onBranchNameChange,
+  onCreateBranch,
+  onSaveToProtectedBranch
+}) => {
+  return /* @__PURE__ */ React.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, "Save changes to new branch"))), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-red-700 py-2 px-3 mb-4 bg-red-50 border border-red-200 rounded" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-700 mb-4 max-w-sm" }, "To make changes, you need to create a copy then get it approved and merged for it to go live.", /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("span", { className: "text-gray-500" }, "Learn more about "), /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      className: "underline text-tina-orange-dark font-medium",
+      href: "https://tina.io/docs/r/editorial-workflow",
+      target: "_blank"
+    },
+    "Editorial Workflow"
+  ), "."), /* @__PURE__ */ React.createElement(
+    PrefixedTextField,
+    {
+      name: "new-branch-name",
+      label: "Branch Name",
+      placeholder: "e.g. {{PAGE-NAME}}-updates",
+      value: branchName,
+      onChange: (e) => {
+        onBranchNameChange(e.target.value);
+      }
+    }
+  ))), /* @__PURE__ */ React.createElement(ModalActions, { align: "end" }, /* @__PURE__ */ React.createElement(
     Button$2,
     {
       variant: "secondary",
@@ -16107,26 +16575,17 @@ const CreateBranchModal = ({
       variant: "primary",
       align: "start",
       className: "w-full sm:w-auto",
-      disabled: newBranchName === "" || isBranchGuardChecking,
-      onMainAction: executeEditorialWorkflow,
+      disabled,
+      onMainAction: onCreateBranch,
       items: [
         {
           label: "Save to Protected Branch",
-          onClick: () => {
-            close2();
-            safeSubmit();
-          },
+          onClick: onSaveToProtectedBranch,
           icon: /* @__PURE__ */ React.createElement(TriangleAlert, { className: "w-4 h-4" })
         }
       ]
     },
-    /* @__PURE__ */ React.createElement(
-      GitBranchIcon,
-      {
-        className: "w-4 h-4 mr-1",
-        style: { fill: "none" }
-      }
-    ),
+    /* @__PURE__ */ React.createElement(GitBranchIcon, { className: "w-4 h-4 mr-1", style: { fill: "none" } }),
     "Save to a new branch"
   ))));
 };
@@ -17004,43 +17463,15 @@ const formatList = (editor, elementType) => {
     })
   );
 };
-const autoformatBlocks = [
-  {
-    mode: "block",
-    type: HEADING_KEYS.h1,
-    match: "# ",
-    preFormat
-  },
-  {
-    mode: "block",
-    type: HEADING_KEYS.h2,
-    match: "## ",
-    preFormat
-  },
-  {
-    mode: "block",
-    type: HEADING_KEYS.h3,
-    match: "### ",
-    preFormat
-  },
-  {
-    mode: "block",
-    type: HEADING_KEYS.h4,
-    match: "#### ",
-    preFormat
-  },
-  {
-    mode: "block",
-    type: HEADING_KEYS.h5,
-    match: "##### ",
-    preFormat
-  },
-  {
-    mode: "block",
-    type: HEADING_KEYS.h6,
-    match: "###### ",
-    preFormat
-  },
+const headingAutoformatByLevel = {
+  h1: { mode: "block", type: HEADING_KEYS.h1, match: "# ", preFormat },
+  h2: { mode: "block", type: HEADING_KEYS.h2, match: "## ", preFormat },
+  h3: { mode: "block", type: HEADING_KEYS.h3, match: "### ", preFormat },
+  h4: { mode: "block", type: HEADING_KEYS.h4, match: "#### ", preFormat },
+  h5: { mode: "block", type: HEADING_KEYS.h5, match: "##### ", preFormat },
+  h6: { mode: "block", type: HEADING_KEYS.h6, match: "###### ", preFormat }
+};
+const nonHeadingAutoformatBlocks = [
   {
     mode: "block",
     type: BlockquotePlugin.key,
@@ -17072,6 +17503,16 @@ const autoformatBlocks = [
     }
   }
 ];
+const getAutoformatBlocks = (headingLevels = ALL_HEADING_LEVELS) => [
+  // Normalize so a pure-JS schema passing e.g. `['h7']` doesn't push an
+  // `undefined` rule into the autoformat config. The toolbar context
+  // applies the same filter, keeping both surfaces consistent.
+  ...normalizeHeadingLevels(headingLevels).map(
+    (level) => headingAutoformatByLevel[level]
+  ),
+  ...nonHeadingAutoformatBlocks
+];
+const autoformatBlocks = getAutoformatBlocks();
 const autoformatLists = [
   {
     mode: "block",
@@ -17449,70 +17890,36 @@ const HEADING_ICON_ONLY = 58;
 const EMBED_ICON_WIDTH = 78;
 const CONTAINER_MD_BREAKPOINT = 448;
 const HEADING_LABEL = "Headings";
-const ToolbarContext = createContext(
-  void 0
-);
-const ToolbarProvider = ({
-  tinaForm,
-  templates,
-  overrides,
-  children
-}) => {
-  return /* @__PURE__ */ React__default.createElement(ToolbarContext.Provider, { value: { tinaForm, templates, overrides } }, children);
-};
-const useToolbarContext = () => {
-  const context = useContext(ToolbarContext);
-  if (!context) {
-    throw new Error("useToolbarContext must be used within a ToolbarProvider");
-  }
-  return context;
+const buildByLevel = (make) => ({
+  h1: make("h1"),
+  h2: make("h2"),
+  h3: make("h3"),
+  h4: make("h4"),
+  h5: make("h5"),
+  h6: make("h6")
+});
+const headingItemsByLevel = buildByLevel((level) => {
+  const depth = level.slice(1);
+  return {
+    description: `Heading ${depth}`,
+    icon: Icons[level],
+    label: `Heading ${depth}`,
+    value: level
+  };
+});
+const paragraphItem = {
+  description: "Paragraph",
+  icon: Icons.paragraph,
+  label: "Paragraph",
+  value: ParagraphPlugin.key
 };
-const items$1 = [
-  {
-    description: "Paragraph",
-    icon: Icons.heading,
-    label: "Paragraph",
-    value: ParagraphPlugin.key
-  },
-  {
-    description: "Heading 1",
-    icon: Icons.h1,
-    label: "Heading 1",
-    value: HEADING_KEYS.h1
-  },
-  {
-    description: "Heading 2",
-    icon: Icons.h2,
-    label: "Heading 2",
-    value: HEADING_KEYS.h2
-  },
-  {
-    description: "Heading 3",
-    icon: Icons.h3,
-    label: "Heading 3",
-    value: HEADING_KEYS.h3
-  },
-  {
-    description: "Heading 4",
-    icon: Icons.h4,
-    label: "Heading 4",
-    value: HEADING_KEYS.h4
-  },
-  {
-    description: "Heading 5",
-    icon: Icons.h5,
-    label: "Heading 5",
-    value: HEADING_KEYS.h5
-  },
-  {
-    description: "Heading 6",
-    icon: Icons.h6,
-    label: "Heading 6",
-    value: HEADING_KEYS.h6
-  }
-];
-const defaultItem$1 = items$1.find((item) => item.value === ParagraphPlugin.key) || items$1[0];
+const getHeadingItem = (value) => isHeadingLevel(value) ? headingItemsByLevel[value] : void 0;
 function HeadingsMenu(props) {
+  const { headingLevels } = useToolbarContext();
+  const items = [
+    paragraphItem,
+    ...headingLevels.map((level) => headingItemsByLevel[level])
+  ];
   const value = useEditorSelector((editor2) => {
     let initialNodeType = ParagraphPlugin.key;
     let allNodesMatchInitialNodeType = false;
@@ -17534,7 +17941,7 @@ function HeadingsMenu(props) {
   const editorState = useEditorState();
   const openState = useOpenState();
   const userInTable = helpers.isNodeActive(editorState, TablePlugin.key);
-  const selectedItem = items$1.find((item) => item.value === value) ?? defaultItem$1;
+  const selectedItem = getHeadingItem(value) ?? paragraphItem;
   const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;
   return /* @__PURE__ */ React__default.createElement("div", { className: "rounded-md" }, /* @__PURE__ */ React__default.createElement(DropdownMenu$1, { modal: false, ...openState, ...props }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement(
     ToolbarButton,
@@ -17563,7 +17970,7 @@ function HeadingsMenu(props) {
         },
         value
       },
-      items$1.filter((item) => {
+      items.filter((item) => {
         if (userInTable) {
           return !unsupportedItemsInTable.has(item.label);
         }
@@ -18239,27 +18646,27 @@ function FixedToolbarButtons() {
   const [itemsShown, setItemsShown] = React__default.useState(11);
   const { overrides, templates } = useToolbarContext();
   const showEmbedButton = templates.length > 0;
-  let items2 = [];
+  let items = [];
   if (Array.isArray(overrides)) {
-    items2 = overrides === void 0 ? Object.values(toolbarItems) : overrides.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
+    items = overrides === void 0 ? Object.values(toolbarItems) : overrides.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
   } else {
-    items2 = (overrides == null ? void 0 : overrides.toolbar) === void 0 ? Object.values(toolbarItems) : overrides.toolbar.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
+    items = (overrides == null ? void 0 : overrides.toolbar) === void 0 ? Object.values(toolbarItems) : overrides.toolbar.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
   }
   if (!showEmbedButton) {
-    items2 = items2.filter((item) => item.label !== toolbarItems.embed.label);
+    items = items.filter((item) => item.label !== toolbarItems.embed.label);
   }
   const editorState = useEditorState();
   const userInTable = helpers.isNodeActive(editorState, TablePlugin);
   const userInCodeBlock = helpers.isNodeActive(editorState, CodeBlockPlugin);
   useResize(toolbarRef, (entry) => {
     const width = entry.target.getBoundingClientRect().width - 8;
-    const headingButton = items2.find((item) => item.label === HEADING_LABEL);
+    const headingButton = items.find((item) => item.label === HEADING_LABEL);
     const headingWidth = headingButton ? (
       //some discrepancy here between the md breakpoint here and in practice, but it works
       headingButton.width(width > CONTAINER_MD_BREAKPOINT - 9)
     ) : 0;
     const availableWidth = width - headingWidth;
-    const { itemFitCount } = items2.reduce(
+    const { itemFitCount } = items.reduce(
       (acc, item) => {
         if (item.label !== HEADING_LABEL && acc.totalItemsWidth + item.width() <= availableWidth) {
           return {
@@ -18291,7 +18698,7 @@ function FixedToolbarButtons() {
         transform: "translateX(calc(-1px))"
       }
     },
-    /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, items2.slice(0, items2.length > itemsShown ? itemsShown - 1 : itemsShown).map((item) => /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, items.slice(0, items.length > itemsShown ? itemsShown - 1 : itemsShown).map((item) => /* @__PURE__ */ React__default.createElement(
       "div",
       {
         className: cn(
@@ -18301,7 +18708,7 @@ function FixedToolbarButtons() {
         key: item.label
       },
       item.Component
-    )), items2.length > itemsShown && /* @__PURE__ */ React__default.createElement("div", { className: "w-fit ml-auto" }, /* @__PURE__ */ React__default.createElement(OverflowMenu, null, items2.slice(itemsShown - 1).flatMap((c2) => /* @__PURE__ */ React__default.createElement(
+    )), items.length > itemsShown && /* @__PURE__ */ React__default.createElement("div", { className: "w-fit ml-auto" }, /* @__PURE__ */ React__default.createElement(OverflowMenu, null, items.slice(itemsShown - 1).flatMap((c2) => /* @__PURE__ */ React__default.createElement(
       "div",
       {
         className: cn(
@@ -18789,52 +19196,12 @@ const FloatingToolbar = withRef(({ children, state, ...props }, propRef) => {
     children
   ));
 });
-const items = [
-  {
-    description: "Paragraph",
-    icon: Icons.paragraph,
-    label: "Paragraph",
-    value: ParagraphPlugin.key
-  },
-  {
-    description: "Heading 1",
-    icon: Icons.h1,
-    label: "Heading 1",
-    value: HEADING_KEYS.h1
-  },
-  {
-    description: "Heading 2",
-    icon: Icons.h2,
-    label: "Heading 2",
-    value: HEADING_KEYS.h2
-  },
-  {
-    description: "Heading 3",
-    icon: Icons.h3,
-    label: "Heading 3",
-    value: HEADING_KEYS.h3
-  },
-  {
-    description: "Heading 4",
-    icon: Icons.h4,
-    label: "Heading 4",
-    value: HEADING_KEYS.h4
-  },
-  {
-    description: "Heading 5",
-    icon: Icons.h5,
-    label: "Heading 5",
-    value: HEADING_KEYS.h5
-  },
-  {
-    description: "Heading 6",
-    icon: Icons.h6,
-    label: "Heading 6",
-    value: HEADING_KEYS.h6
-  }
-];
-const defaultItem = items.find((item) => item.value === ParagraphPlugin.key);
 function TurnIntoDropdownMenu(props) {
+  const { headingLevels } = useToolbarContext();
+  const items = [
+    paragraphItem,
+    ...headingLevels.map((level) => headingItemsByLevel[level])
+  ];
   const value = useEditorSelector((editor2) => {
     let initialNodeType = ParagraphPlugin.key;
     let allNodesMatchInitialNodeType = false;
@@ -18854,7 +19221,7 @@ function TurnIntoDropdownMenu(props) {
   }, []);
   const editor = useEditorRef();
   const openState = useOpenState();
-  const selectedItem = items.find((item) => item.value === value) ?? defaultItem;
+  const selectedItem = getHeadingItem(value) ?? paragraphItem;
   const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;
   const editorState = useEditorState();
   const userInTable = helpers.isNodeActive(editorState, TablePlugin.key);
@@ -61927,9 +62294,9 @@ function php(hljs) {
     "static",
     "stdClass"
   ];
-  const dualCase = (items2) => {
+  const dualCase = (items) => {
     const result = [];
-    items2.forEach((item) => {
+    items.forEach((item) => {
       result.push(item);
       if (item.toLowerCase() === item) {
         result.push(item.toUpperCase());
@@ -61944,8 +62311,8 @@ function php(hljs) {
     literal: dualCase(LITERALS2),
     built_in: BUILT_INS2
   };
-  const normalizeKeywords = (items2) => {
-    return items2.map((item) => {
+  const normalizeKeywords = (items) => {
+    return items.map((item) => {
       return item.replace(/\|\d+$/, "");
     });
   };
@@ -69713,7 +70080,9 @@ const ClearHighlightOnEnterPlugin = createSlatePlugin({
     }
   }
 }));
-const editorPlugins = [
+const createEditorPlugins = ({
+  headingLevels
+} = {}) => [
   createMdxBlockPlugin,
   createMdxInlinePlugin,
   createImgPlugin,
@@ -69737,9 +70106,9 @@ const editorPlugins = [
   NodeIdPlugin,
   TablePlugin,
   SlashPlugin,
-  // This lets users keep typing after end of marks like headings or quotes
+  // Keeps a blank paragraph at the end of the editor so users can keep
+  // typing after a heading, quote, or other terminal block.
   TrailingBlockPlugin,
-  //makes sure there's always a blank paragraph at the end of the editor.
   createBreakPlugin,
   FloatingToolbarPlugin,
   AutoformatPlugin.configure({
@@ -69747,7 +70116,7 @@ const editorPlugins = [
       enableUndoOnDelete: true,
       rules: [
         ...autoformatMarks,
-        ...autoformatBlocks,
+        ...getAutoformatBlocks(headingLevels),
         ...autoformatLists,
         ...autoformatSmartQuotes,
         ...autoformatPunctuation,
@@ -69757,6 +70126,7 @@ const editorPlugins = [
       ].map(
         (rule) => ({
           ...rule,
+          // Suppress autoformat inside code blocks so e.g. `# ` stays literal.
           query: (editor) => !editor.api.some({
             match: { type: editor.getType(CodeBlockPlugin) }
           })
@@ -69764,29 +70134,21 @@ const editorPlugins = [
       )
     }
   }),
-  // ExitBreakPlugin lets users "break out" of a block (like a heading)
+  // Lets users "break out" of a block (e.g. a heading) with Enter.
   ExitBreakPlugin.configure({
     options: {
       rules: [
-        {
-          hotkey: "mod+enter"
-        },
-        {
-          hotkey: "mod+shift+enter",
-          before: true
-        },
+        { hotkey: "mod+enter" },
+        { hotkey: "mod+shift+enter", before: true },
         {
           hotkey: "enter",
-          query: {
-            start: true,
-            end: true,
-            allow: HEADING_LEVELS
-          }
+          query: { start: true, end: true, allow: HEADING_LEVELS }
         }
       ]
     }
   }),
-  // ResetNodePlugin lets users turn a heading back into a paragraph by pressing Enter (when empty) or Backspace (at the start).
+  // Lets users turn a heading back into a paragraph by pressing Enter on
+  // an empty heading or Backspace at the start of one.
   ResetNodePlugin.configure({
     options: {
       rules: [
@@ -69798,9 +70160,7 @@ const editorPlugins = [
         {
           ...resetBlockTypesCommonRule,
           hotkey: "Backspace",
-          predicate: (editor) => {
-            return editor.api.isAt({ start: true });
-          }
+          predicate: (editor) => editor.api.isAt({ start: true })
         },
         {
           ...resetBlockTypesCodeBlockRule,
@@ -69812,10 +70172,11 @@ const editorPlugins = [
           hotkey: "Backspace",
           predicate: isSelectionAtCodeBlockStart
         },
-        // NOTE: Plate's ListPlugin usually handles resetting lists to paragraphs when pressing Backspace at the start of a list item.
-        // However, if the list is the first node in the editor, the default reset behavior may not fully unwrap the list item,
-        // which can leave an invalid structure (like a <li> inside a <p>).
-        // This rule uses `onReset: unwrapList` to ensure lists are always properly reset to paragraphs, even when they are the first node.
+        // Plate's ListPlugin usually resets lists to paragraphs on Backspace
+        // at the start of a list item, but when the list is the editor's
+        // first node the default doesn't fully unwrap and we end up with an
+        // invalid structure (e.g. <li> inside <p>). `onReset: unwrapList`
+        // forces a clean reset in that case.
         {
           types: [BulletedListPlugin.key, NumberedListPlugin.key],
           defaultType: ParagraphPlugin.key,
@@ -69832,21 +70193,19 @@ const editorPlugins = [
         { hotkey: "shift+enter" },
         {
           hotkey: "enter",
-          query: {
-            allow: [CodeBlockPlugin.key, BlockquotePlugin.key]
-          }
+          query: { allow: [CodeBlockPlugin.key, BlockquotePlugin.key] }
         }
       ]
     }
   })
 ];
 const RichEditor = ({ input, tinaForm, field }) => {
-  var _a;
+  var _a, _b;
   const initialValue = React__default.useMemo(() => {
-    var _a2, _b, _c;
+    var _a2, _b2, _c;
     if (((_a2 = field == null ? void 0 : field.parser) == null ? void 0 : _a2.type) === "slatejson") {
       return input.value.children;
-    } else if ((_c = (_b = input.value) == null ? void 0 : _b.children) == null ? void 0 : _c.length) {
+    } else if ((_c = (_b2 = input.value) == null ? void 0 : _b2.children) == null ? void 0 : _c.length) {
       const normalized = input.value.children.map(helpers.normalize);
       return normalized;
     } else {
@@ -69854,7 +70213,16 @@ const RichEditor = ({ input, tinaForm, field }) => {
     }
   }, []);
   const showFloatingToolbar = ((_a = field == null ? void 0 : field.overrides) == null ? void 0 : _a.showFloatingToolbar) !== false;
-  const plugins = showFloatingToolbar ? editorPlugins : editorPlugins.filter((plugin) => plugin.key !== "floating-toolbar");
+  const builtPlugins = React__default.useMemo(
+    () => {
+      var _a2;
+      return createEditorPlugins({
+        headingLevels: (_a2 = field == null ? void 0 : field.overrides) == null ? void 0 : _a2.headingLevels
+      });
+    },
+    [(_b = field == null ? void 0 : field.overrides) == null ? void 0 : _b.headingLevels]
+  );
+  const plugins = showFloatingToolbar ? builtPlugins : builtPlugins.filter((plugin) => plugin.key !== "floating-toolbar");
   const editor = useCreateEditor({
     plugins: [...plugins],
     value: initialValue,
@@ -69896,8 +70264,9 @@ const RichEditor = ({ input, tinaForm, field }) => {
         templates: field.templates,
         overrides: (field == null ? void 0 : field.toolbarOverride) ? field.toolbarOverride : field.overrides
       },
-      /* @__PURE__ */ React__default.createElement(FixedToolbar, null, /* @__PURE__ */ React__default.createElement(FixedToolbarButtons, null))
-    ), /* @__PURE__ */ React__default.createElement(Editor$1, null)))
+      /* @__PURE__ */ React__default.createElement(FixedToolbar, null, /* @__PURE__ */ React__default.createElement(FixedToolbarButtons, null)),
+      /* @__PURE__ */ React__default.createElement(Editor$1, null)
+    )))
   ));
 };
 const MdxFieldPlugin = {
@@ -69999,6 +70368,191 @@ function useLocalStorage(key, initialValue) {
   };
   return [storedValue, setValue];
 }
+const MediaWorkflowOverlay = () => {
+  const cms = useCMS$1();
+  const { setCurrentBranch } = useBranchData();
+  const [state, setState] = React.useState({ phase: "idle" });
+  const preflightAbortRef = React.useRef(null);
+  const abortPreflight = React.useCallback(() => {
+    var _a;
+    (_a = preflightAbortRef.current) == null ? void 0 : _a.abort();
+    preflightAbortRef.current = null;
+  }, []);
+  React.useEffect(() => {
+    const offConfirm = cms.events.subscribe(
+      "media:workflow:confirm-branch",
+      (event) => {
+        abortPreflight();
+        setState({
+          phase: "confirming",
+          branchName: event.branchName,
+          baseBranch: event.baseBranch,
+          onConfirm: event.onConfirm,
+          onCancel: event.onCancel,
+          onSaveToProtectedBranch: event.onSaveToProtectedBranch
+        });
+      }
+    );
+    const offStart = cms.events.subscribe("media:workflow:start", () => {
+      setState({ phase: "executing", step: 1, elapsed: 0 });
+    });
+    const offStep = cms.events.subscribe(
+      "media:workflow:step",
+      (event) => {
+        setState(
+          (prev) => prev.phase === "executing" ? { ...prev, step: event.step } : { phase: "executing", step: event.step, elapsed: 0 }
+        );
+      }
+    );
+    const offComplete = cms.events.subscribe("media:workflow:complete", (event) => {
+      setCurrentBranch(event.branchName);
+    });
+    const offError = cms.events.subscribe(
+      "media:workflow:error",
+      (event) => {
+        setState({ phase: "error", message: event.message });
+      }
+    );
+    const offFinish = cms.events.subscribe("media:workflow:finish", () => {
+      setState({ phase: "idle" });
+    });
+    return () => {
+      offConfirm();
+      offStart();
+      offStep();
+      offComplete();
+      offError();
+      offFinish();
+      abortPreflight();
+    };
+  }, [abortPreflight, cms, setCurrentBranch]);
+  React.useEffect(() => {
+    if (state.phase !== "executing")
+      return;
+    const interval = setInterval(() => {
+      setState(
+        (prev) => prev.phase === "executing" ? { ...prev, elapsed: prev.elapsed + 1 } : prev
+      );
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [state.phase]);
+  const handleCreateBranch = async () => {
+    if (state.phase !== "confirming")
+      return;
+    const confirmState = state;
+    const branchName = confirmState.branchName;
+    const targetBranch = `tina/${branchName}`;
+    abortPreflight();
+    const abortController = new AbortController();
+    preflightAbortRef.current = abortController;
+    setState({
+      ...confirmState,
+      isChecking: true,
+      errorMessage: ""
+    });
+    const baseBranchExists = await checkBaseBranchExists(
+      cms.api.tina,
+      confirmState.baseBranch,
+      "media workflow",
+      abortController.signal
+    );
+    if (abortController.signal.aborted)
+      return;
+    if (!baseBranchExists) {
+      if (preflightAbortRef.current === abortController) {
+        preflightAbortRef.current = null;
+      }
+      setState({
+        ...confirmState,
+        branchName,
+        isChecking: false,
+        errorMessage: `The branch ${confirmState.baseBranch} no longer exists. It may have been merged or deleted. Your changes cannot be pushed to it.`
+      });
+      return;
+    }
+    const targetBranchExists = await checkTargetBranchExists(
+      cms.api.tina,
+      targetBranch,
+      "media workflow",
+      abortController.signal
+    );
+    if (abortController.signal.aborted)
+      return;
+    if (targetBranchExists) {
+      if (preflightAbortRef.current === abortController) {
+        preflightAbortRef.current = null;
+      }
+      setState({
+        ...confirmState,
+        branchName,
+        isChecking: false,
+        errorMessage: TARGET_BRANCH_EXISTS_ERROR
+      });
+      return;
+    }
+    try {
+      if (preflightAbortRef.current === abortController) {
+        preflightAbortRef.current = null;
+      }
+      setState({ phase: "executing", step: 1, elapsed: 0 });
+      await confirmState.onConfirm(targetBranch);
+    } catch (e) {
+      console.error(e);
+      setState({
+        ...confirmState,
+        branchName,
+        isChecking: false,
+        errorMessage: getEditorialWorkflowErrorMessage(e)
+      });
+    }
+  };
+  if (state.phase === "idle")
+    return null;
+  if (state.phase === "confirming") {
+    return /* @__PURE__ */ React.createElement(
+      CreateBranchPromptModal,
+      {
+        branchName: state.branchName,
+        close: () => {
+          abortPreflight();
+          state.onCancel();
+          setState({ phase: "idle" });
+        },
+        disabled: state.branchName === "" || state.isChecking,
+        errorMessage: state.errorMessage,
+        onBranchNameChange: (branchName) => {
+          abortPreflight();
+          setState(
+            (prev) => prev.phase === "confirming" ? {
+              ...prev,
+              branchName,
+              errorMessage: void 0,
+              isChecking: false
+            } : prev
+          );
+        },
+        onCreateBranch: handleCreateBranch,
+        onSaveToProtectedBranch: () => {
+          abortPreflight();
+          state.onSaveToProtectedBranch();
+          setState({ phase: "idle" });
+        }
+      }
+    );
+  }
+  if (state.phase === "executing") {
+    return /* @__PURE__ */ React.createElement(
+      EditorialWorkflowProgressModal,
+      {
+        title: "Save changes to new branch",
+        currentStep: state.step,
+        elapsedTime: state.elapsed
+      }
+    );
+  }
+  const dismissError = () => setState({ phase: "idle" });
+  return /* @__PURE__ */ React.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React.createElement(ModalHeader, { close: dismissError }, "Branch creation failed"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-red-700 py-2 px-3 bg-red-50 border border-red-200 rounded max-w-sm" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React.createElement("b", null, "Error:"), " ", state.message)))));
+};
 function asyncPoll(fn, pollInterval = 5 * 1e3, pollTimeout = 30 * 1e3) {
   const endTime = (/* @__PURE__ */ new Date()).getTime() + pollTimeout;
   let stop = false;
@@ -70558,7 +71112,7 @@ mutation addPendingDocumentMutation(
         }
       });
       if (!res.ok) {
-        let errorMessage = `There was an error creating a new branch. ${res.statusText}`;
+        let errorMessage = `There was an error creating a pull request. ${res.statusText}`;
         if (res.status === 422) {
           errorMessage = `Please make sure you have made changes on ${branch} before creating a pull request.`;
         }
@@ -70567,7 +71121,7 @@ mutation addPendingDocumentMutation(
       const values = await res.json();
       return values;
     } catch (error2) {
-      console.error("There was an error creating a new branch.", error2);
+      console.error("There was an error creating a pull request.", error2);
       throw error2;
     }
   }
@@ -70664,7 +71218,8 @@ mutation addPendingDocumentMutation(
     try {
       const url = `${this.contentApiBase}/github/${this.clientId}/list_branches`;
       const res = await this.authProvider.fetchWithToken(url, {
-        method: "GET"
+        method: "GET",
+        signal: args == null ? void 0 : args.signal
       });
       const branches = await res.json();
       const parsedBranches = await ListBranchResponse.parseAsync(branches);
@@ -70690,10 +71245,13 @@ mutation addPendingDocumentMutation(
     var _a;
     return this.usingEditorialWorkflow && ((_a = this.protectedBranches) == null ? void 0 : _a.includes(decodeURIComponent(this.branch)));
   }
-  async branchExists(branchName) {
+  async branchExists(branchName, args) {
     if (this.isLocalMode)
       return true;
-    const branches = await this.listBranches({ includeIndexStatus: false });
+    const branches = await this.listBranches({
+      includeIndexStatus: false,
+      signal: args == null ? void 0 : args.signal
+    });
     return branches.some((b) => b.name === branchName);
   }
   async createBranch({ baseBranch, branchName }) {
@@ -70737,6 +71295,89 @@ mutation addPendingDocumentMutation(
       throw error2;
     }
   }
+  async pollEditorialWorkflowStatus(requestId, onStatusUpdate) {
+    const pollInterval = 5e3;
+    const maxAttempts = 180;
+    let attempts = 0;
+    while (attempts < maxAttempts) {
+      await new Promise((resolve) => setTimeout(resolve, pollInterval));
+      attempts++;
+      try {
+        const statusUrl = `${this.contentApiBase}/editorial-workflow/${this.clientId}/status/${requestId}`;
+        const statusResponse = await this.authProvider.fetchWithToken(statusUrl);
+        const statusResponseBody = await statusResponse.json();
+        onStatusUpdate == null ? void 0 : onStatusUpdate({
+          status: statusResponseBody.status,
+          message: statusResponseBody.message || `Status: ${statusResponseBody.status}`
+        });
+        if (statusResponseBody.status === EDITORIAL_WORKFLOW_STATUS.ERROR || statusResponse.status === 500) {
+          if (statusResponseBody.pullRequestUrl) {
+            return {
+              branchName: statusResponseBody.branchName,
+              pullRequestUrl: statusResponseBody.pullRequestUrl,
+              warning: statusResponseBody.message
+            };
+          }
+          const error2 = new Error(
+            statusResponseBody.message || "Editorial workflow failed"
+          );
+          error2.errorCode = statusResponseBody.errorCode || "WORKFLOW_FAILED";
+          throw error2;
+        }
+        if (statusResponse.status === 200) {
+          return {
+            branchName: statusResponseBody.branchName,
+            pullRequestUrl: statusResponseBody.pullRequestUrl
+          };
+        }
+        if (statusResponse.status !== 202) {
+          const error2 = new Error(
+            statusResponseBody.message || `Failed to check workflow status: ${statusResponse.statusText}`
+          );
+          error2.errorCode = "WORKFLOW_STATUS_FAILED";
+          throw error2;
+        }
+      } catch (error2) {
+        if (error2.errorCode) {
+          throw error2;
+        }
+        console.warn(
+          `Editorial workflow status poll failed (attempt ${attempts}/${maxAttempts}), retrying...`,
+          error2
+        );
+      }
+    }
+    const timeoutMinutes = Math.round(maxAttempts * pollInterval / 6e4);
+    throw new Error(
+      `Editorial workflow timed out after ${timeoutMinutes} minutes. It may still be completing in the background — please wait before retrying.`
+    );
+  }
+  toEditorialWorkflowError(responseBody, fallbackMessage) {
+    const error2 = new Error(
+      (responseBody == null ? void 0 : responseBody.message) || fallbackMessage
+    );
+    if (responseBody == null ? void 0 : responseBody.errorCode) {
+      error2.errorCode = responseBody.errorCode;
+    }
+    if (responseBody == null ? void 0 : responseBody.conflictingBranch) {
+      error2.conflictingBranch = responseBody.conflictingBranch;
+    }
+    return error2;
+  }
+  async postEditorialWorkflow(url, body, errorFallback) {
+    const res = await this.authProvider.fetchWithToken(url, {
+      method: "POST",
+      body: JSON.stringify(body),
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    const responseBody = await res.json();
+    if (!res.ok) {
+      throw this.toEditorialWorkflowError(responseBody, errorFallback);
+    }
+    return responseBody;
+  }
   /**
    * Initiate and poll for the results of an editorial workflow operation
    *
@@ -70746,32 +71387,16 @@ mutation addPendingDocumentMutation(
   async executeEditorialWorkflow(options) {
     const url = `${this.contentApiBase}/editorial-workflow/${this.clientId}`;
     try {
-      const res = await this.authProvider.fetchWithToken(url, {
-        method: "POST",
-        body: JSON.stringify({
+      const responseBody = await this.postEditorialWorkflow(
+        url,
+        {
           branchName: options.branchName,
           baseBranch: options.baseBranch,
           prTitle: options.prTitle,
           graphQLContentOp: options.graphQLContentOp
-        }),
-        headers: {
-          "Content-Type": "application/json"
-        }
-      });
-      const responseBody = await res.json();
-      if (!res.ok) {
-        console.error("There was an error starting editorial workflow.");
-        const error2 = new Error(
-          (responseBody == null ? void 0 : responseBody.message) || "Failed to start editorial workflow"
-        );
-        if (responseBody == null ? void 0 : responseBody.errorCode) {
-          error2.errorCode = responseBody.errorCode;
-        }
-        if (responseBody == null ? void 0 : responseBody.conflictingBranch) {
-          error2.conflictingBranch = responseBody.conflictingBranch;
-        }
-        throw error2;
-      }
+        },
+        "Failed to start editorial workflow"
+      );
       const requestId = responseBody.requestId;
       if (!requestId) {
         return responseBody;
@@ -70782,60 +71407,10 @@ mutation addPendingDocumentMutation(
           message: "Workflow queued, starting..."
         });
       }
-      const maxAttempts = 60;
-      const pollInterval = 5e3;
-      let attempts = 0;
-      while (attempts < maxAttempts) {
-        await new Promise((resolve) => setTimeout(resolve, pollInterval));
-        attempts++;
-        try {
-          const statusUrl = `${this.contentApiBase}/editorial-workflow/${this.clientId}/status/${requestId}`;
-          const statusResponse = await this.authProvider.fetchWithToken(statusUrl);
-          const statusResponseBody = await statusResponse.json();
-          if (options.onStatusUpdate) {
-            options.onStatusUpdate({
-              status: statusResponseBody.status,
-              message: statusResponseBody.message || `Status: ${statusResponseBody.status}`
-            });
-          }
-          if (statusResponseBody.status === EDITORIAL_WORKFLOW_STATUS.ERROR || statusResponse.status === 500) {
-            if (statusResponseBody.pullRequestUrl) {
-              return {
-                branchName: statusResponseBody.branchName,
-                pullRequestUrl: statusResponseBody.pullRequestUrl,
-                warning: statusResponseBody.message
-              };
-            }
-            const error2 = new Error(
-              statusResponseBody.message || "Editorial workflow failed"
-            );
-            error2.errorCode = statusResponseBody.errorCode || "WORKFLOW_FAILED";
-            throw error2;
-          }
-          if (statusResponse.status === 200) {
-            return {
-              branchName: statusResponseBody.branchName,
-              pullRequestUrl: statusResponseBody.pullRequestUrl
-            };
-          }
-          if (statusResponse.status !== 202) {
-            const error2 = new Error(
-              statusResponseBody.message || `Failed to check workflow status: ${statusResponse.statusText}`
-            );
-            error2.errorCode = "WORKFLOW_STATUS_FAILED";
-            throw error2;
-          }
-        } catch (error2) {
-          if (error2.errorCode) {
-            throw error2;
-          }
-          console.warn(
-            `Editorial workflow status poll failed (attempt ${attempts}/${maxAttempts}), retrying...`,
-            error2
-          );
-        }
-      }
-      throw new Error("Editorial workflow timed out after 5 minutes");
+      return await this.pollEditorialWorkflowStatus(
+        requestId,
+        options.onStatusUpdate
+      );
     } catch (error2) {
       console.error(
         "There was an error with editorial workflow operation.",
@@ -70844,6 +71419,17 @@ mutation addPendingDocumentMutation(
       throw error2;
     }
   }
+  async startMediaEditorialWorkflow(options) {
+    const url = `${this.contentApiBase}/editorial-workflow/${this.clientId}/media`;
+    return await this.postEditorialWorkflow(
+      url,
+      options,
+      "Failed to start media editorial workflow"
+    );
+  }
+  async waitForEditorialWorkflowStatus(requestId, onStatusUpdate) {
+    return await this.pollEditorialWorkflowStatus(requestId, onStatusUpdate);
+  }
 }
 const DEFAULT_LOCAL_TINA_GQL_SERVER_URL = "http://localhost:4001/graphql";
 class LocalClient extends Client {
@@ -71397,7 +71983,7 @@ const TinaCloudProvider = (props) => {
   }, []);
   React__default.useEffect(() => {
     const setupEditorialWorkflow = () => {
-      client.getProject().then((project) => {
+      client.getProject().then(async (project) => {
         var _a2;
         if ((_a2 = project == null ? void 0 : project.features) == null ? void 0 : _a2.includes("editorial-workflow")) {
           cms.flags.set("branch-switcher", true);
@@ -71427,7 +72013,7 @@ const TinaCloudProvider = (props) => {
         setCurrentBranch(b);
       }
     },
-    /* @__PURE__ */ React__default.createElement(TinaProvider, { cms }, /* @__PURE__ */ React__default.createElement(AuthWallInner, { ...props, cms }))
+    /* @__PURE__ */ React__default.createElement(TinaProvider, { cms }, /* @__PURE__ */ React__default.createElement(MediaWorkflowOverlay, null), /* @__PURE__ */ React__default.createElement(AuthWallInner, { ...props, cms }))
   ));
 };
 const TinaCloudAuthWall = TinaCloudProvider;
@@ -73574,7 +74160,7 @@ const RenderForm$1 = ({
       };
     }
   }
-  const defaultItem2 = customDefaults || // @ts-ignore internal types aren't up to date
+  const defaultItem = customDefaults || // @ts-ignore internal types aren't up to date
   ((_d = template.ui) == null ? void 0 : _d.defaultItem) || // @ts-ignore
   (template == null ? void 0 : template.defaultItem) || {};
   const fileReadOnly = (_f = (_e = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _e.filename) == null ? void 0 : _f.readonly;
@@ -73630,7 +74216,7 @@ const RenderForm$1 = ({
     const folderName = folder.fullyQualifiedName ? folder.name : "";
     return new Form({
       crudType: "create",
-      initialValues: typeof defaultItem2 === "function" ? { ...defaultItem2(), _template: templateName } : { ...defaultItem2, _template: templateName },
+      initialValues: typeof defaultItem === "function" ? { ...defaultItem(), _template: templateName } : { ...defaultItem, _template: templateName },
       extraSubscribeValues: { active: true, submitting: true, touched: true },
       onChange: (values) => {
         var _a3, _b3;
@@ -74462,6 +75048,7 @@ export {
   ColorPicker,
   CreateBranchModal,
   CreateBranchModel,
+  CreateBranchPromptModal,
   CursorPaginator,
   DEFAULT_LOCAL_TINA_GQL_SERVER_URL,
   DEFAULT_MEDIA_UPLOAD_TYPES,
@@ -74540,6 +75127,7 @@ export {
   MediaIcon,
   MediaListError,
   MediaManager$1 as MediaManager,
+  MediaWorkflowOverlay,
   Message,
   Modal,
   ModalActions,
@@ -74639,6 +75227,7 @@ export {
   passwordFieldClasses,
   resolveField,
   safeAssertShape,
+  sanitizeFilename,
   selectFieldClasses,
   sortBranchListFn,
   staticRequest,