tinacms 3.6.3 → 3.7.1

package/dist/index.js

@@ -16,13 +16,14 @@ import { HEADING_KEYS as HEADING_KEYS$1, HEADING_LEVELS as HEADING_LEVELS$1 } fr
 import { isHotkey } from "is-hotkey";
 import { Slot } from "@radix-ui/react-slot";
 import { isLangSupported, formatCodeBlock, insertEmptyCodeBlock, unwrapCodeBlock, isCodeBlockEmpty, isSelectionAtCodeBlockStart } from "@udecode/plate-code-block";
-import { X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, PaintBucket, Quote, ChevronRight, ChevronsUpDown, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Settings, Strikethrough, Subscript, Superscript, Table as Table$1, Text as Text$2, Underline, Link2Off, Eye, SeparatorHorizontal, Moon, SunMedium, Twitter, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronUp, Clock, CalendarCheck, Calendar as Calendar$1, CalendarDays, RotateCw, ChevronLeft, ArrowUpDown, LoaderCircle, TriangleAlert, FileStack, History, GitBranchIcon, List as List$1, ListOrdered, Grid3x3Icon, CircleX, Link, Unlink } from "lucide-react";
+import { X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, PaintBucket, Quote, ChevronRight, ChevronsUpDown, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Settings, Highlighter, Strikethrough, Subscript, Superscript, Table as Table$1, Text as Text$2, Underline, Link2Off, Eye, SeparatorHorizontal, Moon, SunMedium, Twitter, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronUp, Clock, CalendarCheck, Calendar as Calendar$1, CalendarDays, RotateCw, ChevronLeft, ArrowUpDown, AlertCircle, Image, RefreshCw, Database, CheckCircle2, ImageOff, LoaderCircle, TriangleAlert, FileStack, History, GitBranchIcon, List as List$1, ListOrdered, Grid3x3Icon, CircleX, Link, Unlink } from "lucide-react";
 import mermaid from "mermaid";
 import { cva } from "class-variance-authority";
 import { Command as Command$2 } from "cmdk";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { PopoverAnchor } from "@radix-ui/react-popover";
+import posthog from "posthog-js";
 import { createSlatePlugin as createSlatePlugin$1, someHtmlElement, findHtmlParentElement, createTSlatePlugin as createTSlatePlugin$1, RangeApi as RangeApi$1, TextApi as TextApi$1, HtmlPlugin as HtmlPlugin$1, NodeApi as NodeApi$1, ElementApi as ElementApi$1, Hotkeys, isHotkey as isHotkey$1, isUrl as isUrl$1, getEditorPlugin as getEditorPlugin$1, bindFirst as bindFirst$1, sanitizeUrl, PathApi as PathApi$1, isDefined as isDefined$1, PointApi as PointApi$1, BaseParagraphPlugin as BaseParagraphPlugin$1, match as match$2, deleteMerge, getPluginTypes, queryNode as queryNode$1, isType, getInjectMatch as getInjectMatch$1, traverseHtmlElements, isHtmlBlockElement as isHtmlBlockElement$1, postCleanHtml, mergeProps } from "@udecode/plate";
 import { useComboboxContext, Combobox as Combobox$1, useComboboxStore, ComboboxProvider, Portal, ComboboxPopover, ComboboxItem } from "@ariakit/react";
 import { withTriggerCombobox, filterWords } from "@udecode/plate-combobox";
@@ -35,6 +36,7 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import colorString, { get as get$6, to as to$1 } from "color-string";
 import { createForm, FORM_ERROR, getIn } from "final-form";
 import arrayMutators from "final-form-arrays";
 import setFieldData from "final-form-set-field-data";
@@ -45,8 +47,6 @@ import { sortableKeyboardCoordinates, useSortable, SortableContext, verticalList
 import { CSS } from "@dnd-kit/utilities";
 import { buildSchema, print, getIntrospectionQuery, buildClientSchema, parse as parse$4 } from "graphql";
 import { diff as diff$1 } from "@graphql-inspector/core";
-import posthog from "posthog-js";
-import { get as get$6, to as to$1 } from "color-string";
 import { HexColorPicker } from "react-colorful";
 import * as dropzone from "react-dropzone";
 import { Command as Command$3 } from "@udecode/cmdk";
@@ -63,7 +63,7 @@ import "moment-timezone";
 import { DayPicker } from "react-day-picker";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { formatDistanceToNow } from "date-fns";
-import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from "@tanstack/react-table";
+import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender, getFilteredRowModel, getExpandedRowModel } from "@tanstack/react-table";
 import { TinaSchema, addNamespaceToSchema, parseURL, resolveForm, normalizePath, canonicalPath, validateSchema } from "@tinacms/schema-tools";
 import { NAMER, resolveField } from "@tinacms/schema-tools";
 import gql from "graphql-tag";
@@ -27490,6 +27490,35 @@ var CodeBlockPlugin = toPlatePlugin(BaseCodeBlockPlugin, {
     }
   }
 }));
+var BaseHighlightPlugin = createSlatePlugin$1({
+  key: "highlight",
+  node: { isLeaf: true },
+  parsers: {
+    html: {
+      deserializer: {
+        rules: [
+          {
+            validNodeName: ["MARK"]
+          }
+        ]
+      }
+    }
+  }
+});
+var HighlightPlugin = toPlatePlugin(
+  BaseHighlightPlugin,
+  ({ editor, type: type2 }) => ({
+    shortcuts: {
+      toggleHighlight: {
+        keys: [[Key2.Mod, Key2.Shift, "h"]],
+        preventDefault: true,
+        handler: () => {
+          editor.tf.toggleMark(type2);
+        }
+      }
+    }
+  })
+);
 var BaseHorizontalRulePlugin = createSlatePlugin$1({
   key: "hr",
   node: { isElement: true, isVoid: true },
@@ -33620,13 +33649,13 @@ const Button$3 = withRef$1(({ asChild = false, className, isMenu, size: size2, v
     }
   );
 });
-const DialogPortal = DialogPrimitive.Portal;
-const DialogOverlay = withCn(
+const DialogPortal$1 = DialogPrimitive.Portal;
+const DialogOverlay$1 = withCn(
   DialogPrimitive.Overlay,
   "fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
 );
 withRef$1(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ React.createElement(DialogPortal, null, /* @__PURE__ */ React.createElement(DialogOverlay, null), /* @__PURE__ */ React.createElement(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ React.createElement(DialogPortal$1, null, /* @__PURE__ */ React.createElement(DialogOverlay$1, null), /* @__PURE__ */ React.createElement(
     DialogPrimitive.Content,
     {
       ref,
@@ -34458,6 +34487,7 @@ const Icons = {
   row: RectangleHorizontal,
   search: Search,
   settings: Settings,
+  highlight: Highlighter,
   strikethrough: Strikethrough,
   subscript: Subscript,
   superscript: Superscript,
@@ -34724,6 +34754,101 @@ function ItalicIcon(props) {
     ))
   );
 }
+const BranchSwitchedEvent = "branch-switched";
+const BranchSwitcherOpenedEvent = "branch-switcher-opened";
+const BranchSwitcherSearchEvent = "branch-switcher-search";
+const BranchSwitcherDropDownEvent = "branch-switcher-dropdown";
+const BranchSwitcherPRClickedEvent = "branch-switcher-pr-clicked";
+const SavedContentEvent = "saved-content";
+const SaveContentErrorEvent = "save-content-error";
+const FormResetEvent = "form-reset";
+const MediaManagerContentUploadedEvent = "media-manager-content-uploaded";
+const MediaManagerContentDeletedEvent = "media-manager-content-deleted";
+const RichTextEditorSwitchedEvent = "rich-text-editor-switched";
+const EventLogPageViewedEvent = "event-log-page-viewed";
+const TinaCMSStartedEvent = "tina-cms-started";
+const CollectionListPageItemClickedEvent = "collection-list-page-item-clicked";
+const CollectionListPageSortEvent = "collection-list-page-sort";
+const CollectionListPageSearchEvent = "collection-list-page-search";
+const CloudConfigNavComponentClickedEvent = "cloud-config-nav-component-clicked";
+const SlashCommandOpenedEvent = "slash-command-opened";
+const SlashCommandUsedEvent = "slash-command-used";
+let posthogClient = null;
+let isInitialized = false;
+let initializationPromise = null;
+const POSTHOG_CONFIG_ENDPOINT = "https://identity-v2.tinajs.io/v2/posthog-token";
+async function fetchPostHogConfig() {
+  try {
+    const response = await fetch(POSTHOG_CONFIG_ENDPOINT, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (!response.ok) {
+      console.warn(`Failed to fetch PostHog config: ${response.statusText}`);
+      return {};
+    }
+    return await response.json();
+  } catch (error2) {
+    console.warn(
+      "Failed to fetch PostHog config:",
+      error2 instanceof Error ? error2.message : "Unknown error"
+    );
+    return {};
+  }
+}
+async function initializePostHog(mode = "anonymous") {
+  if (isInitialized) {
+    return posthogClient;
+  }
+  if (initializationPromise) {
+    return initializationPromise;
+  }
+  if (mode === "disabled") {
+    isInitialized = true;
+    return null;
+  }
+  if (process.env.TINA_DEV === "true") {
+    isInitialized = true;
+    return null;
+  }
+  initializationPromise = (async () => {
+    const config = await fetchPostHogConfig();
+    if (!config.api_key) {
+      console.warn(
+        "PostHog API key not found. PostHog tracking will be disabled."
+      );
+      isInitialized = true;
+      return null;
+    }
+    posthog.init(config.api_key, {
+      api_host: config.host || "https://us.i.posthog.com",
+      persistence: "localStorage",
+      autocapture: false,
+      capture_pageview: false,
+      disable_session_recording: true,
+      disable_compression: true
+    });
+    posthogClient = posthog;
+    isInitialized = true;
+    return posthogClient;
+  })();
+  return initializationPromise;
+}
+function captureEvent(event, properties2) {
+  if (!posthogClient) {
+    return;
+  }
+  try {
+    posthogClient.capture(event, {
+      ...properties2,
+      system: "tinacms/tinacms"
+    });
+  } catch (error2) {
+    console.error("Error capturing PostHog event:", error2);
+  }
+}
 var useComboboxInput = ({
   autoFocus = true,
   cancelInputOnArrowLeftRight = true,
@@ -34873,7 +34998,7 @@ const InlineCombobox = ({
     },
     [setValueProp, hasValueProp]
   );
-  const [insertPoint, setInsertPoint] = useState(null);
+  const insertPoint = React__default.useRef(null);
   useEffect(() => {
     const path3 = editor.api.findPath(element);
     if (!path3)
@@ -34882,7 +35007,7 @@ const InlineCombobox = ({
     if (!point3)
       return;
     const pointRef3 = editor.api.pointRef(point3);
-    setInsertPoint(pointRef3);
+    insertPoint.current = pointRef3.current;
     return () => {
       pointRef3.unref();
     };
@@ -34896,12 +35021,6 @@ const InlineCombobox = ({
           at: (insertPoint == null ? void 0 : insertPoint.current) ?? void 0
         });
       }
-      if (cause === "arrowLeft" || cause === "arrowRight") {
-        editor.tf.move({
-          distance: 1,
-          reverse: cause === "arrowLeft"
-        });
-      }
     },
     ref: inputRef
   });
@@ -35099,6 +35218,9 @@ const rules = [
 const SlashInputElement = withRef$1(
   ({ className, ...props }, ref) => {
     const { children, editor, element } = props;
+    useEffect(() => {
+      captureEvent(SlashCommandOpenedEvent);
+    }, []);
     return /* @__PURE__ */ React__default.createElement(
       PlateElement,
       {
@@ -35112,7 +35234,12 @@ const SlashInputElement = withRef$1(
         {
           key: value,
           keywords: keywords2,
-          onClick: () => onSelect(editor),
+          onClick: () => {
+            onSelect(editor);
+            captureEvent(SlashCommandUsedEvent, {
+              command: value
+            });
+          },
           value
         },
         /* @__PURE__ */ React__default.createElement(Icon, { "aria-hidden": true, className: "mr-2 size-4" }),
@@ -37561,6 +37688,30 @@ const uuid = () => {
 };
 const blockClasses = "mt-0.5";
 const headerClasses = "font-normal";
+function getContrastColor(color) {
+  const parsed = colorString.get.rgb(color);
+  if (!parsed)
+    return "#000000";
+  const [r2, g, b] = parsed;
+  const luminance = (0.299 * r2 + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+const HighlightLeaf = ({
+  leaf: leaf3,
+  ...props
+}) => {
+  const backgroundColor = leaf3.highlightColor || "#FEF08A";
+  return /* @__PURE__ */ React__default.createElement(
+    PlateLeaf,
+    {
+      as: "mark",
+      className: "rounded-sm",
+      style: { backgroundColor, color: getContrastColor(backgroundColor) },
+      leaf: leaf3,
+      ...props
+    }
+  );
+};
 const Components = () => {
   return {
     [SlashInputPlugin.key]: SlashInputElement,
@@ -37719,6 +37870,7 @@ const Components = () => {
     [ListItemPlugin.key]: withProps(PlateElement, { as: "li" }),
     [LinkPlugin.key]: LinkElement,
     [CodePlugin.key]: CodeLeaf,
+    [HighlightPlugin.key]: HighlightLeaf,
     [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
     [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: "s" }),
     [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
@@ -39939,6 +40091,9 @@ function MdAccessTime(props) {
 function MdKeyboardArrowDown(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" }, "child": [] }] })(props);
 }
+function MdImage(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }, "child": [] }] })(props);
+}
 function MdArrowForward(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" }, "child": [] }] })(props);
 }
@@ -41458,7 +41613,15 @@ const Blocks = ({
   meta,
   index
 }) => {
-  const addItem = React.useCallback(
+  const [newObjects, setNewObjects] = useState(/* @__PURE__ */ new Set());
+  const prevPristine = useRef(meta.pristine);
+  useEffect(() => {
+    if (!prevPristine.current && meta.pristine) {
+      setNewObjects(/* @__PURE__ */ new Set());
+    }
+    prevPristine.current = meta.pristine;
+  }, [meta.pristine]);
+  const addItem = useCallback(
     (name2, template) => {
       let obj = {};
       if (typeof template.defaultItem === "function") {
@@ -41467,6 +41630,7 @@ const Blocks = ({
         obj = template.defaultItem || {};
       }
       obj._template = name2;
+      setNewObjects((prev) => new Set(prev).add(obj));
       form.mutators.push(field.name, obj);
     },
     [field.name, form.mutators]
@@ -41529,6 +41693,7 @@ const Blocks = ({
             tinaForm,
             isMin,
             fixedLength,
+            isNew: newObjects.has(block2),
             ...itemProps(block2)
           }
         );
@@ -41543,7 +41708,8 @@ const BlockListItem = ({
   index,
   template,
   isMin,
-  fixedLength
+  fixedLength,
+  isNew
 }) => {
   const cms = useCMS$1();
   const removeItem = React.useCallback(() => {
@@ -41587,6 +41753,7 @@ const BlockListItem = ({
       onMouseOut: () => setHoveredField({ id: null, fieldName: null })
     },
     /* @__PURE__ */ React.createElement(GroupLabel, null, label || template.label),
+    isNew && /* @__PURE__ */ React.createElement("span", { className: "mr-1.5 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] border-[0.5px] border-tina-orange/50 font-semibold bg-tina-orange/10 text-tina-orange leading-none" }, "NEW"),
     /* @__PURE__ */ React.createElement(BiPencil, { className: "h-5 w-auto fill-current text-gray-200 group-hover:text-inherit transition-colors duration-150 ease-out" })
   ), (!fixedLength || fixedLength && !isMin) && /* @__PURE__ */ React.createElement(ItemDeleteButton, { disabled: isMin, onClick: removeItem }))));
 };
@@ -43958,99 +44125,6 @@ const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TableCaption.displayName = "TableCaption";
-let posthogClient = null;
-let isInitialized = false;
-let initializationPromise = null;
-const POSTHOG_CONFIG_ENDPOINT = "https://identity-v2.tinajs.io/v2/posthog-token";
-async function fetchPostHogConfig() {
-  try {
-    const response = await fetch(POSTHOG_CONFIG_ENDPOINT, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-    if (!response.ok) {
-      console.warn(`Failed to fetch PostHog config: ${response.statusText}`);
-      return {};
-    }
-    return await response.json();
-  } catch (error2) {
-    console.warn(
-      "Failed to fetch PostHog config:",
-      error2 instanceof Error ? error2.message : "Unknown error"
-    );
-    return {};
-  }
-}
-async function initializePostHog(mode = "anonymous") {
-  if (isInitialized) {
-    return posthogClient;
-  }
-  if (initializationPromise) {
-    return initializationPromise;
-  }
-  if (mode === "disabled") {
-    isInitialized = true;
-    return null;
-  }
-  if (process.env.TINA_DEV === "true") {
-    isInitialized = true;
-    return null;
-  }
-  initializationPromise = (async () => {
-    const config = await fetchPostHogConfig();
-    if (!config.api_key) {
-      console.warn(
-        "PostHog API key not found. PostHog tracking will be disabled."
-      );
-      isInitialized = true;
-      return null;
-    }
-    posthog.init(config.api_key, {
-      api_host: config.host || "https://us.i.posthog.com",
-      persistence: "localStorage",
-      autocapture: false,
-      capture_pageview: false,
-      disable_session_recording: true,
-      disable_compression: true
-    });
-    posthogClient = posthog;
-    isInitialized = true;
-    return posthogClient;
-  })();
-  return initializationPromise;
-}
-function captureEvent(event, properties2) {
-  if (!posthogClient) {
-    return;
-  }
-  try {
-    posthogClient.capture(event, {
-      ...properties2,
-      system: "tinacms/tinacms"
-    });
-  } catch (error2) {
-    console.error("Error capturing PostHog event:", error2);
-  }
-}
-const BranchSwitchedEvent = "branch-switched";
-const BranchSwitcherOpenedEvent = "branch-switcher-opened";
-const BranchSwitcherSearchEvent = "branch-switcher-search";
-const BranchSwitcherDropDownEvent = "branch-switcher-dropdown";
-const BranchSwitcherPRClickedEvent = "branch-switcher-pr-clicked";
-const SavedContentEvent = "saved-content";
-const SaveContentErrorEvent = "save-content-error";
-const FormResetEvent = "form-reset";
-const MediaManagerContentUploadedEvent = "media-manager-content-uploaded";
-const MediaManagerContentDeletedEvent = "media-manager-content-deleted";
-const RichTextEditorSwitchedEvent = "rich-text-editor-switched";
-const EventLogPageViewedEvent = "event-log-page-viewed";
-const TinaCMSStartedEvent = "tina-cms-started";
-const CollectionListPageItemClickedEvent = "collection-list-page-item-clicked";
-const CollectionListPageSortEvent = "collection-list-page-sort";
-const CollectionListPageSearchEvent = "collection-list-page-search";
-const CloudConfigNavComponentClickedEvent = "cloud-config-nav-component-clicked";
 const IndexStatus$1 = ({ indexingStatus }) => {
   const styles = {
     complete: {
@@ -46796,6 +46870,882 @@ const PasswordScreenPlugin = createScreen({
   layout: "fullscreen",
   navCategory: "Account"
 });
+const DashboardLoadingState = ({
+  message,
+  progress
+}) => /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-center p-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "text-center text-gray-500" }, /* @__PURE__ */ React__default.createElement("h3", { className: "text-lg font-semibold text-gray-700 animate-pulse" }, "Loading Dashboard"), /* @__PURE__ */ React__default.createElement("p", { className: "mt-2 text-sm" }, message), progress ? /* @__PURE__ */ React__default.createElement("div", { className: "mt-4 w-72 max-w-full mx-auto" }, /* @__PURE__ */ React__default.createElement("div", { className: "h-2 rounded-full bg-gray-200 overflow-hidden" }, /* @__PURE__ */ React__default.createElement(
+  "div",
+  {
+    className: "h-full bg-tina-orange transition-[width] duration-300 ease-out",
+    style: {
+      width: `${Math.max(0, Math.min(100, progress.value))}%`
+    }
+  }
+)), /* @__PURE__ */ React__default.createElement("div", { className: "mt-2 flex items-center justify-between text-xs text-gray-500" }, /* @__PURE__ */ React__default.createElement("span", null, progress.label || "In progress"), /* @__PURE__ */ React__default.createElement("span", null, Math.round(progress.value), "%"))) : /* @__PURE__ */ React__default.createElement("div", { className: "mt-4 flex justify-center" }, /* @__PURE__ */ React__default.createElement(LoadingDots, { color: "var(--tina-color-primary)" }))));
+const DashboardErrorState = ({ message }) => /* @__PURE__ */ React__default.createElement("div", { className: "p-8 text-red-500 bg-red-50 rounded-lg m-8" }, /* @__PURE__ */ React__default.createElement("h3", { className: "text-lg font-bold mb-2 flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement(AlertCircle, { className: "text-xl" }), " Dashboard Error"), /* @__PURE__ */ React__default.createElement("p", null, message));
+const DashboardTitleBar = ({
+  title,
+  icon,
+  controls
+}) => /* @__PURE__ */ React__default.createElement("div", { className: "mb-6 flex items-center justify-between gap-4" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-3xl text-tina-orange" }, icon), /* @__PURE__ */ React__default.createElement("h2", { className: "text-2xl font-bold text-gray-800" }, title)), controls);
+const MEDIA_USAGE_THUMBNAIL_SIZE = { w: 75, h: 75 };
+const MEDIA_USAGE_THUMBNAIL_KEY = `${MEDIA_USAGE_THUMBNAIL_SIZE.w}x${MEDIA_USAGE_THUMBNAIL_SIZE.h}`;
+const getDocumentEditUrl = async (cms, document2) => {
+  var _a2;
+  const collectionName = document2._sys.collection.name;
+  const breadcrumbsDerivedPath = document2._sys.breadcrumbs.join("/");
+  let editUrl = `#/collections/edit/${collectionName}/~/${breadcrumbsDerivedPath}`;
+  try {
+    const collection = cms.api.tina.schema.getCollection(collectionName);
+    if ((_a2 = collection == null ? void 0 : collection.ui) == null ? void 0 : _a2.router) {
+      let customPath = await collection.ui.router({
+        document: document2,
+        collection
+      });
+      if (customPath) {
+        customPath = customPath.startsWith("/") ? customPath.slice(1) : customPath;
+        const tinaBasePath = cms.flags.get("tina-basepath");
+        const tinaPreviewIsSet = cms.flags.get("tina-preview");
+        if (tinaPreviewIsSet) {
+          if (tinaBasePath) {
+            editUrl = `#/~/${tinaBasePath}/${customPath}`;
+          } else {
+            editUrl = `#/~/${customPath}`;
+          }
+        }
+      }
+    }
+  } catch (e3) {
+    console.error(
+      "Unable to determine custom edit URL for document. Falling back to default edit URL.",
+      e3
+    );
+  }
+  return editUrl;
+};
+const scanDocumentForMedia = (documentContent, mediaUsages) => {
+  const matchedSrcs = /* @__PURE__ */ new Set();
+  for (const mediaUsage of mediaUsages) {
+    const src = JSON.stringify(mediaUsage.media.src).slice(1, -1);
+    let index = documentContent.indexOf(src);
+    while (index !== -1) {
+      const prevChar = documentContent[index - 1];
+      const nextChar = documentContent[index + src.length];
+      const isPrevValid = !prevChar || !/[a-zA-Z0-9_.%~+-]/.test(prevChar);
+      const isNextValid = !nextChar || !/[a-zA-Z0-9_.%~+-]/.test(nextChar);
+      if (isPrevValid && isNextValid) {
+        matchedSrcs.add(mediaUsage.media.src);
+        break;
+      }
+      index = documentContent.indexOf(src, index + 1);
+    }
+  }
+  return matchedSrcs;
+};
+const THUMBNAIL_SIZES = [MEDIA_USAGE_THUMBNAIL_SIZE];
+const BATCH_SIZE = 100;
+const UI_YIELD_INTERVAL = 50;
+const collectAllMedia = async (cms, mediaSrcToUsageMap, currentDirectory) => {
+  const subDirectories = [];
+  let currentOffset = void 0;
+  let moreOffsetsAvailable = true;
+  while (moreOffsetsAvailable) {
+    const list = await cms.media.list({
+      directory: currentDirectory,
+      offset: currentOffset,
+      thumbnailSizes: THUMBNAIL_SIZES
+    });
+    for (const item of list.items) {
+      if (item.type === "file") {
+        if (item.src) {
+          const isImg = isImage(item.filename);
+          const isVid = isVideo(item.filename);
+          const type2 = isImg ? "image" : isVid ? "video" : "other";
+          mediaSrcToUsageMap[item.src] = {
+            media: item,
+            type: type2,
+            usedIn: []
+          };
+        }
+      } else if (item.type === "dir") {
+        const directorySegment = item.filename.replace(/^\/+|\/+$/g, "");
+        subDirectories.push(
+          currentDirectory ? `${currentDirectory}/${directorySegment}` : directorySegment
+        );
+      }
+    }
+    currentOffset = list.nextOffset;
+    if (!currentOffset) {
+      moreOffsetsAvailable = false;
+    }
+  }
+  if (subDirectories.length > 0) {
+    await Promise.all(
+      subDirectories.map((dir) => collectAllMedia(cms, mediaSrcToUsageMap, dir))
+    );
+  }
+};
+const scanCollectionForMediaUsage = async (cms, collectionMeta, mediaSrcToUsageMap) => {
+  var _a2, _b;
+  let hasNextPage = true;
+  let after3 = void 0;
+  const mediaUsages = Object.values(mediaSrcToUsageMap);
+  const listQuery = `
+    query($after: String, $first: Float) {
+      collectionConnection: ${collectionMeta.name}Connection(first: $first, after: $after) {
+        pageInfo { hasNextPage, endCursor }
+        edges {
+          node {
+            ... on Document {
+              _sys {
+                relativePath
+                filename
+                basename
+                path
+                breadcrumbs
+                extension
+                template
+                title
+                hasReferences
+                collection {
+                  name
+                  label
+                  path
+                  format
+                }
+              }
+              _values
+            }
+          }
+        }
+      }
+    }
+  `;
+  while (hasNextPage) {
+    try {
+      const res = await cms.api.tina.request(listQuery, {
+        variables: { after: after3, first: BATCH_SIZE }
+      });
+      const connection = res.collectionConnection;
+      const edges2 = (connection == null ? void 0 : connection.edges) || [];
+      hasNextPage = ((_a2 = connection == null ? void 0 : connection.pageInfo) == null ? void 0 : _a2.hasNextPage) || false;
+      after3 = (_b = connection == null ? void 0 : connection.pageInfo) == null ? void 0 : _b.endCursor;
+      for (let i2 = 0; i2 < edges2.length; i2++) {
+        if (i2 > 0 && i2 % UI_YIELD_INTERVAL === 0) {
+          await new Promise((resolve) => setTimeout(resolve, 0));
+        }
+        const edge = edges2[i2];
+        const matchedSrcs = scanDocumentForMedia(
+          JSON.stringify(edge.node._values),
+          mediaUsages
+        );
+        if (matchedSrcs.size === 0)
+          continue;
+        const editUrl = await getDocumentEditUrl(cms, edge.node);
+        matchedSrcs.forEach((mediaSrc) => {
+          const usage = mediaSrcToUsageMap[mediaSrc];
+          if (usage) {
+            usage.usedIn.push({
+              collectionName: collectionMeta.name,
+              breadcrumbs: edge.node._sys.breadcrumbs,
+              collectionLabel: collectionMeta.label || collectionMeta.name,
+              // label is optional in the schema
+              editUrl
+            });
+          }
+        });
+      }
+    } catch (e3) {
+      console.error(`Error processing collection ${collectionMeta.name}:`, e3);
+      throw e3;
+    }
+  }
+};
+const scanAllMedia = async (cms, onProgress) => {
+  const mediaSrcToUsageMap = {};
+  await collectAllMedia(cms, mediaSrcToUsageMap, "");
+  const collectionMetas = cms.api.tina.schema.getCollections();
+  for (let i2 = 0; i2 < collectionMetas.length; i2++) {
+    await scanCollectionForMediaUsage(
+      cms,
+      collectionMetas[i2],
+      mediaSrcToUsageMap
+    );
+    onProgress == null ? void 0 : onProgress((i2 + 1) / collectionMetas.length * 100);
+  }
+  return Object.values(mediaSrcToUsageMap);
+};
+const useMediaUsageScanner = () => {
+  const cms = useCMS$1();
+  const [mediaItems, setMediaItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [errorOccurred, setErrorOccurred] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const activeRef = useRef(true);
+  const scanMedia = useCallback(async () => {
+    setIsLoading(true);
+    setErrorOccurred(false);
+    setProgress(0);
+    try {
+      const updatedMediaItems = await scanAllMedia(cms, setProgress);
+      if (activeRef.current)
+        setMediaItems(updatedMediaItems);
+    } catch (e3) {
+      console.error("Error scanning media usage:", e3);
+      if (activeRef.current)
+        setErrorOccurred(true);
+    } finally {
+      if (activeRef.current)
+        setIsLoading(false);
+    }
+  }, [cms]);
+  useEffect(() => {
+    activeRef.current = true;
+    scanMedia().catch((e3) => {
+      console.error("Unhandled rejection from scanMedia:", e3);
+    });
+    return () => {
+      activeRef.current = false;
+    };
+  }, [scanMedia]);
+  return {
+    mediaItems,
+    isLoading,
+    errorOccurred,
+    progress,
+    refresh: scanMedia
+  };
+};
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "dialog-overlay",
+    className: cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-[100000]",
+      className
+    ),
+    ...props
+  }
+));
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(DialogPortal, null, /* @__PURE__ */ React.createElement(DialogOverlay, null), /* @__PURE__ */ React.createElement(
+    DialogPrimitive.Content,
+    {
+      "data-slot": "dialog-content",
+      className: cn(
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-[100000] w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+        className
+      ),
+      ...props
+    },
+    children,
+    showCloseButton && /* @__PURE__ */ React.createElement(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "absolute top-2 right-2 h-8 w-8"
+      },
+      /* @__PURE__ */ React.createElement(XIcon, null),
+      /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Close")
+    ))
+  ));
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-base leading-none font-medium", className),
+      ...props
+    }
+  );
+}
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn(
+        "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+const MediaLightbox = ({
+  item,
+  onClose
+}) => {
+  if (!item)
+    return null;
+  const usageCount = item.usedIn.length;
+  const mediaSrc = item.media.src;
+  const directory = item.media.directory || "/";
+  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,
+    {
+      src: mediaSrc,
+      filename: item.media.filename
+    }
+  ) : /* @__PURE__ */ React__default.createElement(
+    ImageLightboxContent,
+    {
+      src: mediaSrc,
+      filename: item.media.filename
+    }
+  )), /* @__PURE__ */ React__default.createElement("div", { className: "mt-3 space-y-1 text-center" }, /* @__PURE__ */ React__default.createElement("div", { className: "text-sm font-medium text-gray-700" }, /* @__PURE__ */ React__default.createElement("span", { className: "break-all" }, item.media.filename)), /* @__PURE__ */ React__default.createElement("div", { className: "text-xs text-gray-500" }, "Directory:", " ", /* @__PURE__ */ React__default.createElement("span", { className: "break-all font-medium" }, directory)), /* @__PURE__ */ React__default.createElement("div", { className: "text-sm font-medium text-gray-700" }, usageCount > 0 ? /* @__PURE__ */ React__default.createElement("span", { className: "text-tina-orange font-semibold" }, "Used in ", usageCount, " ", usageCount === 1 ? "doc" : "docs") : /* @__PURE__ */ React__default.createElement("span", { className: "font-semibold text-gray-500" }, "Unused")))));
+};
+const ImageLightboxContent = ({
+  src,
+  filename
+}) => /* @__PURE__ */ React__default.createElement(
+  "img",
+  {
+    src,
+    alt: filename,
+    className: "mx-auto block max-w-full max-h-[75vh] object-contain rounded-md shadow-sm"
+  }
+);
+const VideoLightboxContent = ({
+  src,
+  filename
+}) => {
+  const [playbackFailed, setPlaybackFailed] = React__default.useState(false);
+  React__default.useEffect(() => {
+    setPlaybackFailed(false);
+    return () => {
+      setPlaybackFailed(false);
+    };
+  }, [src]);
+  if (playbackFailed) {
+    return /* @__PURE__ */ React__default.createElement("div", { className: "flex min-h-[12rem] min-w-[16rem] flex-col items-center justify-center gap-3 rounded-md border border-dashed border-gray-300 bg-white px-6 py-8 text-center" }, /* @__PURE__ */ React__default.createElement(BiMovie, { className: "h-10 w-10 text-gray-400" }), /* @__PURE__ */ React__default.createElement("div", { className: "text-sm font-medium text-gray-700" }, filename), /* @__PURE__ */ React__default.createElement("div", { className: "max-w-sm text-sm text-gray-500" }, "This video format is recognized, but this browser could not preview it."));
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    "video",
+    {
+      src,
+      controls: true,
+      playsInline: true,
+      preload: "metadata",
+      className: "mx-auto block h-auto w-[min(80vw,720px)] max-w-full max-h-[75vh] rounded-md bg-black shadow-sm",
+      onError: () => setPlaybackFailed(true)
+    }
+  );
+};
+const INFINITE_SCROLL_PAGE_SIZE = 10;
+const DEFAULT_COLUMN_FILTERS = [
+  { id: "type", value: "all" },
+  { id: "usage", value: "all" }
+];
+const getUsageCount = (item) => item.usedIn.length;
+const SortIcon = ({ sorted }) => {
+  if (sorted === "asc")
+    return /* @__PURE__ */ React__default.createElement(ArrowUp, { className: "ml-2 h-4 w-4" });
+  if (sorted === "desc")
+    return /* @__PURE__ */ React__default.createElement(ArrowDown, { className: "ml-2 h-4 w-4" });
+  return /* @__PURE__ */ React__default.createElement(ArrowUpDown, { className: "ml-2 h-4 w-4" });
+};
+const mediaTypeFilterFn = (row, _columnId, filterValue) => {
+  if (filterValue === "all")
+    return true;
+  return row.original.type === filterValue;
+};
+const usageFilterFn = (row, _columnId, filterValue) => {
+  if (filterValue === "all")
+    return true;
+  const count = getUsageCount(row.original);
+  if (filterValue === "used")
+    return count > 0;
+  if (filterValue === "unused")
+    return count === 0;
+  return true;
+};
+const getMediaColumns = (onPreview) => [
+  {
+    // Hidden behavior-only column so TanStack can filter by media type.
+    id: "type",
+    accessorFn: (row) => row.type,
+    filterFn: mediaTypeFilterFn,
+    enableSorting: false,
+    header: () => null,
+    cell: () => null
+  },
+  {
+    id: "preview",
+    header: () => /* @__PURE__ */ React__default.createElement("span", { className: "font-medium text-muted-foreground" }, "Preview"),
+    cell: ({ row }) => {
+      var _a2;
+      const media = row.original.media;
+      const type2 = row.original.type;
+      const usageCount = getUsageCount(row.original);
+      const isExpanded = row.getIsExpanded();
+      const thumbnailSrc = (_a2 = media.thumbnails) == null ? void 0 : _a2[MEDIA_USAGE_THUMBNAIL_KEY];
+      return /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, usageCount > 0 ? /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: (event) => {
+            event.stopPropagation();
+            row.toggleExpanded();
+          },
+          className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full border transition-colors ${isExpanded ? "border-tina-orange bg-white text-tina-orange" : "border-tina-orange bg-tina-orange text-white"}`,
+          title: "View where this file is used",
+          "aria-label": `Toggle usage references for ${row.original.media.filename}`
+        },
+        /* @__PURE__ */ React__default.createElement(
+          ChevronDown,
+          {
+            className: `h-3.5 w-3.5 transition-transform ${isExpanded ? "rotate-180" : ""}`
+          }
+        )
+      ) : /* @__PURE__ */ React__default.createElement("span", { className: "block h-5 w-5 shrink-0", "aria-hidden": "true" }), /* @__PURE__ */ React__default.createElement("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded border border-gray-200 bg-gray-100 text-gray-400" }, type2 === "image" && thumbnailSrc ? /* @__PURE__ */ React__default.createElement(
+        "img",
+        {
+          src: thumbnailSrc,
+          alt: media.filename,
+          loading: "lazy",
+          decoding: "async",
+          className: "h-full w-full cursor-pointer object-cover transition-opacity hover:opacity-80",
+          onClick: (event) => {
+            event.stopPropagation();
+            onPreview == null ? void 0 : onPreview(row.original);
+          }
+        }
+      ) : type2 === "video" ? /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "button",
+          title: "Preview video",
+          className: "flex h-full w-full cursor-pointer items-center justify-center text-gray-400 transition-opacity hover:opacity-80",
+          onClick: (event) => {
+            event.stopPropagation();
+            onPreview == null ? void 0 : onPreview(row.original);
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(BiMovie, { className: "text-3xl" })
+      ) : /* @__PURE__ */ React__default.createElement(BiFile, { className: "text-3xl" })));
+    },
+    enableSorting: false
+  },
+  {
+    id: "filename",
+    accessorFn: (row) => row.media.filename,
+    header: ({ column }) => {
+      const sorted = column.getIsSorted();
+      return /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "font-medium text-muted-foreground flex items-center gap-1",
+          onClick: column.getToggleSortingHandler()
+        },
+        "Filename",
+        /* @__PURE__ */ React__default.createElement(SortIcon, { sorted })
+      );
+    },
+    cell: ({ row }) => /* @__PURE__ */ React__default.createElement(TooltipProvider$1, null, /* @__PURE__ */ React__default.createElement(Tooltip$1, { delayDuration: 300 }, /* @__PURE__ */ React__default.createElement(TooltipTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement("span", { className: "block w-full truncate font-medium text-gray-800" }, row.original.media.filename)), /* @__PURE__ */ React__default.createElement(TooltipPortal, null, /* @__PURE__ */ React__default.createElement(TooltipContent$1, { side: "top", className: "max-w-sm break-all shadow-md" }, row.original.media.filename))))
+  },
+  {
+    id: "directory",
+    accessorFn: (row) => row.media.directory || "/",
+    header: ({ column }) => {
+      const sorted = column.getIsSorted();
+      return /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "font-medium text-muted-foreground flex items-center gap-1",
+          onClick: column.getToggleSortingHandler()
+        },
+        "Directory",
+        /* @__PURE__ */ React__default.createElement(SortIcon, { sorted })
+      );
+    },
+    cell: ({ getValue: getValue2 }) => {
+      const directory = getValue2();
+      return /* @__PURE__ */ React__default.createElement(TooltipProvider$1, null, /* @__PURE__ */ React__default.createElement(Tooltip$1, { delayDuration: 300 }, /* @__PURE__ */ React__default.createElement(TooltipTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement("span", { className: "block w-full truncate text-sm text-gray-500" }, directory)), /* @__PURE__ */ React__default.createElement(TooltipPortal, null, /* @__PURE__ */ React__default.createElement(
+        TooltipContent$1,
+        {
+          side: "top",
+          className: "max-w-sm break-all shadow-md"
+        },
+        directory
+      ))));
+    }
+  },
+  {
+    id: "usage",
+    accessorFn: getUsageCount,
+    header: ({ column }) => {
+      const sorted = column.getIsSorted();
+      return /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "font-medium text-muted-foreground ml-auto flex items-center gap-1",
+          onClick: column.getToggleSortingHandler()
+        },
+        "Usage",
+        /* @__PURE__ */ React__default.createElement(SortIcon, { sorted })
+      );
+    },
+    cell: ({ row }) => {
+      const count = getUsageCount(row.original);
+      return /* @__PURE__ */ React__default.createElement(
+        "span",
+        {
+          className: `inline-block min-w-[3rem] text-right ${count > 0 ? "font-medium text-gray-800" : "text-gray-500"}`
+        },
+        count
+      );
+    },
+    filterFn: usageFilterFn
+  }
+];
+const MediaUsageTable = ({
+  mediaItems,
+  onClose,
+  onPreview
+}) => {
+  var _a2, _b;
+  const [columnFilters, setColumnFilters] = useState(
+    DEFAULT_COLUMN_FILTERS
+  );
+  const [sorting, setSorting] = useState([]);
+  const [expanded, setExpanded] = useState({});
+  const [visibleCount, setVisibleCount] = useState(INFINITE_SCROLL_PAGE_SIZE);
+  const sentinelRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const columns = useMemo(() => getMediaColumns(onPreview), [onPreview]);
+  const typeFilter = ((_a2 = columnFilters.find((filter2) => filter2.id === "type")) == null ? void 0 : _a2.value) ?? "all";
+  const usageFilter = ((_b = columnFilters.find((filter2) => filter2.id === "usage")) == null ? void 0 : _b.value) ?? "all";
+  const table = useReactTable({
+    data: mediaItems,
+    columns,
+    getRowId: (row) => row.media.src,
+    initialState: { columnVisibility: { type: false } },
+    state: { sorting, columnFilters, expanded },
+    onColumnFiltersChange: setColumnFilters,
+    onSortingChange: setSorting,
+    onExpandedChange: setExpanded,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand: (row) => getUsageCount(row.original) > 0
+  });
+  const handleTypeFilterChange = (value) => {
+    var _a3;
+    setExpanded({});
+    setVisibleCount(INFINITE_SCROLL_PAGE_SIZE);
+    (_a3 = table.getColumn("type")) == null ? void 0 : _a3.setFilterValue(value);
+  };
+  const handleUsageFilterChange = (value) => {
+    var _a3;
+    setExpanded({});
+    setVisibleCount(INFINITE_SCROLL_PAGE_SIZE);
+    (_a3 = table.getColumn("usage")) == null ? void 0 : _a3.setFilterValue(value);
+  };
+  useEffect(() => {
+    setVisibleCount(INFINITE_SCROLL_PAGE_SIZE);
+  }, [sorting]);
+  const allRows = table.getRowModel().rows;
+  const visibleRows = allRows.slice(0, visibleCount);
+  const hasMore = visibleCount < allRows.length;
+  const loadMore = useCallback(() => {
+    setVisibleCount((prev) => prev + INFINITE_SCROLL_PAGE_SIZE);
+  }, []);
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    const scrollContainer = scrollContainerRef.current;
+    if (!sentinel || !scrollContainer)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        var _a3;
+        if ((_a3 = entries[0]) == null ? void 0 : _a3.isIntersecting) {
+          loadMore();
+        }
+      },
+      { root: scrollContainer, rootMargin: "200px" }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [loadMore, hasMore]);
+  const filteredRowCount = table.getFilteredRowModel().rows.length;
+  return /* @__PURE__ */ React__default.createElement("div", { className: "bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-3 border-b border-gray-200 bg-gray-50/50 px-6 py-4" }, /* @__PURE__ */ React__default.createElement("h3", { className: "whitespace-nowrap text-lg font-semibold text-gray-800" }, "Media Inventory"), /* @__PURE__ */ React__default.createElement(
+    MediaFilters,
+    {
+      filteredRowCount,
+      typeFilter,
+      usageFilter,
+      setTypeFilter: handleTypeFilterChange,
+      setUsageFilter: handleUsageFilterChange,
+      className: "ml-auto"
+    }
+  )), /* @__PURE__ */ React__default.createElement("div", { ref: scrollContainerRef, className: "max-h-[45vh] overflow-auto" }, /* @__PURE__ */ React__default.createElement(
+    Table,
+    {
+      className: "border-separate border-spacing-0",
+      wrapperClassName: "overflow-visible"
+    },
+    /* @__PURE__ */ React__default.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React__default.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => /* @__PURE__ */ React__default.createElement(
+      TableHead,
+      {
+        key: header.id,
+        className: `sticky top-0 z-20 border-b border-gray-200 bg-white ${header.column.id === "preview" ? "w-[4rem] pl-9" : header.column.id === "filename" ? "w-[20rem]" : header.column.id === "directory" ? "w-[14rem]" : header.column.id === "usage" ? "w-[5.5rem]" : ""}`
+      },
+      header.isPlaceholder ? null : flexRender(
+        header.column.columnDef.header,
+        header.getContext()
+      )
+    ))))),
+    /* @__PURE__ */ React__default.createElement(TableBody, null, allRows.length === 0 ? /* @__PURE__ */ React__default.createElement(TableRow, null, /* @__PURE__ */ React__default.createElement(
+      TableCell,
+      {
+        colSpan: columns.length,
+        className: "!py-8 text-center text-gray-500"
+      },
+      mediaItems.length === 0 ? "No media files found." : "No media files match the current filters."
+    )) : visibleRows.map((row) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: row.id }, /* @__PURE__ */ React__default.createElement(
+      TableRow,
+      {
+        style: { contentVisibility: "auto" },
+        onClick: getUsageCount(row.original) > 0 ? row.getToggleExpandedHandler() : void 0,
+        className: getUsageCount(row.original) > 0 ? row.getIsExpanded() ? "cursor-pointer bg-[#FFF8F6] hover:bg-[#FFF8F6]" : "cursor-pointer" : ""
+      },
+      row.getVisibleCells().map((cell) => /* @__PURE__ */ React__default.createElement(
+        TableCell,
+        {
+          key: cell.id,
+          className: cell.column.id === "preview" ? "!px-2 !py-1.5 w-[4rem]" : cell.column.id === "filename" ? "!px-3 !py-1.5 w-[20rem] max-w-0 overflow-hidden" : cell.column.id === "directory" ? "!px-3 !py-1.5 w-[14rem] max-w-0 overflow-hidden" : cell.column.id === "usage" ? "!pl-2 !pr-4 !py-1.5 w-[5.5rem] text-sm font-medium text-right whitespace-nowrap" : "!px-3 !py-1.5"
+        },
+        flexRender(
+          cell.column.columnDef.cell,
+          cell.getContext()
+        )
+      ))
+    ), row.getIsExpanded() && /* @__PURE__ */ React__default.createElement(TableRow, null, /* @__PURE__ */ React__default.createElement(
+      TableCell,
+      {
+        colSpan: columns.length,
+        className: "border-b border-gray-150 bg-[#FFEBE5]"
+      },
+      /* @__PURE__ */ React__default.createElement(
+        ExpandedRowContent,
+        {
+          usedIn: row.original.usedIn,
+          onClose
+        }
+      )
+    )))))
+  ), hasMore && /* @__PURE__ */ React__default.createElement("div", { ref: sentinelRef, className: "h-px", "aria-hidden": "true" })));
+};
+const MediaFilters = ({
+  filteredRowCount,
+  typeFilter,
+  usageFilter,
+  setTypeFilter,
+  setUsageFilter,
+  className
+}) => /* @__PURE__ */ React__default.createElement("div", { className: `flex items-center gap-3 ${className ?? ""}` }, /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-500 whitespace-nowrap" }, filteredRowCount, " ", filteredRowCount === 1 ? "result" : "results"), /* @__PURE__ */ React__default.createElement(
+  Select,
+  {
+    value: typeFilter,
+    onValueChange: (value) => setTypeFilter(value)
+  },
+  /* @__PURE__ */ React__default.createElement(
+    SelectTrigger,
+    {
+      "aria-label": "Filter by media type",
+      className: "w-[130px] bg-white border-gray-200 text-gray-700 h-9"
+    },
+    /* @__PURE__ */ React__default.createElement(SelectValue, { placeholder: "All Types" })
+  ),
+  /* @__PURE__ */ React__default.createElement(SelectContent, null, /* @__PURE__ */ React__default.createElement(SelectItem, { value: "all" }, "All Types"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "image" }, "Images"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "video" }, "Videos"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "other" }, "Other"))
+), /* @__PURE__ */ React__default.createElement(
+  Select,
+  {
+    value: usageFilter,
+    onValueChange: (value) => setUsageFilter(value)
+  },
+  /* @__PURE__ */ React__default.createElement(
+    SelectTrigger,
+    {
+      "aria-label": "Filter by usage status",
+      className: "w-[130px] bg-white border-gray-200 text-gray-700 h-9"
+    },
+    /* @__PURE__ */ React__default.createElement(SelectValue, { placeholder: "All Usage" })
+  ),
+  /* @__PURE__ */ React__default.createElement(SelectContent, null, /* @__PURE__ */ React__default.createElement(SelectItem, { value: "all" }, "All Usage"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "used" }, "Used"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "unused" }, "Unused"))
+));
+const ExpandedRowContent = ({
+  usedIn,
+  onClose
+}) => {
+  const documentCount = usedIn.length;
+  const sortedDocs = [...usedIn].sort(
+    (a2, b) => a2.collectionLabel.localeCompare(b.collectionLabel)
+  );
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3" }, "Used in ", documentCount, " document", documentCount !== 1 ? "s" : "", ":"), /* @__PURE__ */ React__default.createElement("table", { className: "w-full text-xs border-collapse" }, /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", { className: "text-left text-[10px] font-bold uppercase tracking-tight text-gray-400" }, /* @__PURE__ */ React__default.createElement("th", { className: "pb-1.5 pr-6 w-40" }, "Collection"), /* @__PURE__ */ React__default.createElement("th", { className: "pb-1.5" }, "Document"))), /* @__PURE__ */ React__default.createElement("tbody", null, sortedDocs.map((doc) => {
+    const breadcrumb = doc.breadcrumbs.join("/");
+    return /* @__PURE__ */ React__default.createElement(
+      "tr",
+      {
+        key: doc.editUrl || breadcrumb,
+        className: "border-t border-gray-150"
+      },
+      /* @__PURE__ */ React__default.createElement("td", { className: "py-1.5 pr-6 text-gray-500" }, /* @__PURE__ */ React__default.createElement(
+        "a",
+        {
+          href: `#/collections/${doc.collectionName}/~`,
+          onClick: () => onClose == null ? void 0 : onClose(),
+          className: "underline hover:text-tina-orange-dark transition-colors"
+        },
+        doc.collectionLabel
+      )),
+      /* @__PURE__ */ React__default.createElement("td", { className: "py-1.5 text-gray-700" }, /* @__PURE__ */ React__default.createElement("span", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React__default.createElement(BiFile, { className: "text-gray-400 flex-shrink-0" }), doc.editUrl ? /* @__PURE__ */ React__default.createElement(
+        "a",
+        {
+          href: doc.editUrl,
+          onClick: () => onClose == null ? void 0 : onClose(),
+          className: "underline hover:text-tina-orange-dark transition-colors break-all"
+        },
+        breadcrumb
+      ) : /* @__PURE__ */ React__default.createElement("span", { className: "break-all" }, breadcrumb)))
+    );
+  }))));
+};
+const MediaUsageDashboard = ({
+  close: onClose
+}) => {
+  const { mediaItems, isLoading, errorOccurred, progress, refresh } = useMediaUsageScanner();
+  const [lightboxImage, setLightboxImage] = useState(null);
+  const stats = useMemo(() => {
+    const unusedCount = mediaItems.filter(
+      (usage) => usage.usedIn.length === 0
+    ).length;
+    const usedCount = mediaItems.length - unusedCount;
+    return {
+      totalFiles: mediaItems.length,
+      unusedCount,
+      usedCount
+    };
+  }, [mediaItems]);
+  if (isLoading) {
+    return /* @__PURE__ */ React__default.createElement(
+      DashboardLoadingState,
+      {
+        message: "Scanning Media Usage...",
+        progress: { value: progress, label: "Scanning collections" }
+      }
+    );
+  }
+  if (errorOccurred) {
+    return /* @__PURE__ */ React__default.createElement(DashboardErrorState, { message: "Something went wrong, unable to collect media usage statistics" });
+  }
+  return /* @__PURE__ */ React__default.createElement("div", { className: "p-8 w-full max-w-6xl mx-auto font-sans" }, /* @__PURE__ */ React__default.createElement(
+    DashboardTitleBar,
+    {
+      title: "Media Usage Dashboard",
+      icon: /* @__PURE__ */ React__default.createElement(Image, null),
+      controls: /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          variant: "outline",
+          onClick: refresh,
+          disabled: isLoading,
+          className: "flex items-center gap-2 shadow-sm font-medium transition-colors"
+        },
+        /* @__PURE__ */ React__default.createElement(RefreshCw, { className: "w-4 h-4" }),
+        "Refresh"
+      )
+    }
+  ), /* @__PURE__ */ React__default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-8" }, /* @__PURE__ */ React__default.createElement(
+    StatCard,
+    {
+      label: "Total Media Files",
+      icon: /* @__PURE__ */ React__default.createElement(Database, { className: "text-2xl text-gray-700" }),
+      iconClassName: "bg-gray-100",
+      value: stats.totalFiles
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    StatCard,
+    {
+      label: "In Use",
+      icon: /* @__PURE__ */ React__default.createElement(CheckCircle2, { className: "text-2xl text-tina-orange-dark" }),
+      iconClassName: "bg-tina-orange/10",
+      value: stats.usedCount
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    StatCard,
+    {
+      label: "Unused",
+      icon: /* @__PURE__ */ React__default.createElement(
+        ImageOff,
+        {
+          className: `text-2xl ${stats.unusedCount > 0 ? "text-orange-600" : "text-gray-400"}`
+        }
+      ),
+      iconClassName: stats.unusedCount > 0 ? "bg-orange-100" : "bg-gray-100",
+      value: stats.unusedCount,
+      valueClassName: stats.unusedCount > 0 ? "text-orange-600" : "text-gray-800"
+    }
+  )), /* @__PURE__ */ React__default.createElement(
+    MediaUsageTable,
+    {
+      mediaItems,
+      onClose,
+      onPreview: setLightboxImage
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    MediaLightbox,
+    {
+      item: lightboxImage,
+      onClose: () => setLightboxImage(null)
+    }
+  ));
+};
+const StatCard = ({
+  label,
+  icon,
+  iconClassName,
+  value,
+  valueClassName = "text-gray-800"
+}) => /* @__PURE__ */ React__default.createElement("div", { className: "bg-white rounded-xl border border-gray-200 shadow-sm flex items-center gap-4 p-6" }, /* @__PURE__ */ React__default.createElement("div", { className: `${iconClassName} p-3 rounded-lg flex-shrink-0` }, icon), /* @__PURE__ */ React__default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React__default.createElement("p", { className: "text-sm text-gray-500 font-medium" }, label), /* @__PURE__ */ React__default.createElement("p", { className: `text-3xl font-bold ${valueClassName}` }, value)));
+const MediaUsageDashboardScreenPlugin = createScreen({
+  name: "Media Usage",
+  Component: MediaUsageDashboard,
+  Icon: MdImage,
+  layout: "popup",
+  navCategory: "Dashboard"
+});
 function createCloudConfig({
   ...options
 }) {
@@ -46999,7 +47949,7 @@ const NavProvider = ({
 const name = "tinacms";
 const type = "module";
 const typings = "dist/index.d.ts";
-const version$1 = "3.6.3";
+const version$1 = "3.7.1";
 const main = "dist/index.js";
 const module = "./dist/index.js";
 const exports = {
@@ -47071,6 +48021,7 @@ const dependencies = {
   "@udecode/plate-dnd": "catalog:",
   "@udecode/plate-floating": "catalog:",
   "@udecode/plate-heading": "catalog:",
+  "@udecode/plate-highlight": "catalog:",
   "@udecode/plate-horizontal-rule": "catalog:",
   "@udecode/plate-indent-list": "catalog:",
   "@udecode/plate-link": "catalog:",
@@ -47108,6 +48059,8 @@ const dependencies = {
   "react-colorful": "catalog:",
   "react-datetime": "catalog:",
   "react-day-picker": "^9.13.0",
+  "react-dnd": "catalog:",
+  "react-dnd-html5-backend": "catalog:",
   "react-dropzone": "catalog:",
   "react-final-form": "catalog:",
   "react-icons": "^5.4.0",
@@ -48045,11 +48998,11 @@ const FormLists = (props) => {
     "input",
     {
       type: "checkbox",
-      checked: !showReferences,
-      onChange: (e3) => setShowReferences(!e3.target.checked),
+      checked: showReferences,
+      onChange: (e3) => setShowReferences(e3.target.checked),
       className: "w-4 h-4 text-orange-500 border-gray-300 rounded focus:ring-orange-500"
     }
-  ), /* @__PURE__ */ React.createElement("span", null, "Direct references only"))), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-x-auto overflow-y-auto min-h-0" }, cms.state.formLists.map((formList, index) => /* @__PURE__ */ React.createElement("div", { key: `${formList.id}-${index}` }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement("span", null, "Show all references"))), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-x-auto overflow-y-auto min-h-0" }, cms.state.formLists.map((formList, index) => /* @__PURE__ */ React.createElement("div", { key: `${formList.id}-${index}` }, /* @__PURE__ */ React.createElement(
     FormList,
     {
       setActiveFormId: (id2) => {
@@ -48821,6 +49774,9 @@ class TinaCMS extends CMS {
     });
     this.plugins.add(MediaManagerScreenPlugin);
     this.plugins.add(PasswordScreenPlugin);
+    if (isLocalClient) {
+      this.plugins.add(MediaUsageDashboardScreenPlugin);
+    }
     if (isLocalClient !== true) {
       if (clientId) {
         this.plugins.add(
@@ -65044,7 +66000,8 @@ const CreateBranchModal = ({
   safeSubmit,
   path: path3,
   values,
-  crudType
+  crudType,
+  tinaForm
 }) => {
   const cms = useCMS$1();
   const tinaApi = cms.api.tina;
@@ -65094,6 +66051,7 @@ const CreateBranchModal = ({
     }
   ];
   const executeEditorialWorkflow = async () => {
+    var _a2;
     try {
       const branchName = `tina/${newBranchName}`;
       setDisabled(true);
@@ -65108,7 +66066,21 @@ const CreateBranchModal = ({
         graphql2 = UPDATE_DOCUMENT_GQL;
       }
       const collection = tinaApi.schema.getCollectionByFullPath(path3);
-      const params = tinaApi.schema.transformPayload(collection.name, values);
+      let submittedValues = values;
+      if ((_a2 = collection == null ? void 0 : collection.ui) == null ? void 0 : _a2.beforeSubmit) {
+        const valOverride = await collection.ui.beforeSubmit({
+          cms,
+          values,
+          form: tinaForm
+        });
+        if (valOverride) {
+          submittedValues = valOverride;
+        }
+      }
+      const params = tinaApi.schema.transformPayload(
+        collection.name,
+        submittedValues
+      );
       const relativePath = pathRelativeToCollection(collection.path, path3);
       const result = await tinaApi.executeEditorialWorkflow({
         branchName,
@@ -65242,7 +66214,7 @@ const CreateBranchModal = ({
         ),
         /* @__PURE__ */ React.createElement("div", { className: "text-center max-w-24" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-semibold leading-tight" }, step.name), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-400 mt-1 leading-tight" }, step.description))
       );
-    })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500" }, "Estimated time: 1-2 min "), isExecuting && currentStep > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React.createElement(
+    })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500" }, "Estimated time: 1-2 min "), isExecuting && currentStep > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500 tabular-nums" }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -65481,6 +66453,7 @@ const FormBuilder = ({
           crudType: tinaForm.crudType,
           path: tinaForm.path,
           values: tinaForm.values,
+          tinaForm,
           close: () => setCreateBranchModalOpen(false)
         }
       ), /* @__PURE__ */ React.createElement(DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React.createElement(FormPortalProvider, null, /* @__PURE__ */ React.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React.createElement(
@@ -67379,10 +68352,105 @@ const MarkToolbarButton = withRef$1(({ clear, nodeType, ...rest }, ref) => {
   const { props } = useMarkToolbarButton(state);
   return /* @__PURE__ */ React__default.createElement(ToolbarButton, { ref, ...props, ...rest });
 });
+const highlightColors = [
+  { label: "Yellow", value: "#FEF08A" },
+  { label: "Green", value: "#BBF7D0" },
+  { label: "Blue", value: "#BFDBFE" },
+  { label: "Red", value: "#CC4141" }
+];
 const BoldToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Bold (⌘+B)", nodeType: BoldPlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.bold, null));
 const StrikethroughToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Strikethrough", nodeType: StrikethroughPlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.strikethrough, null));
 const ItalicToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Italic (⌘+I)", nodeType: ItalicPlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.italic, null));
 const CodeToolbarButton = () => /* @__PURE__ */ React__default.createElement(MarkToolbarButton, { tooltip: "Code (⌘+E)", nodeType: CodePlugin.key }, /* @__PURE__ */ React__default.createElement(Icons.code, null));
+const HighlightToolbarButton = () => /* @__PURE__ */ React__default.createElement(HighlightColorToolbarButton, null);
+const useHighlightToolbar = () => {
+  const editor = useEditorRef();
+  const openState = useOpenState();
+  const savedSelection = React__default.useRef(editor.selection);
+  const inlineCodeActive = useMarkToolbarButtonState({
+    nodeType: CodePlugin.key
+  }).pressed;
+  const rememberSelection = React__default.useCallback(() => {
+    if (editor.selection) {
+      savedSelection.current = structuredClone(editor.selection);
+    }
+  }, [editor]);
+  React__default.useEffect(() => {
+    if (openState.open) {
+      rememberSelection();
+    }
+  }, [openState.open, rememberSelection]);
+  const applyHighlight = React__default.useCallback(
+    (highlightColor) => {
+      if (inlineCodeActive) {
+        openState.onOpenChange(false);
+        return;
+      }
+      if (savedSelection.current) {
+        editor.tf.select(structuredClone(savedSelection.current));
+      }
+      if (highlightColor) {
+        editor.tf.addMark("highlight", true);
+        editor.tf.addMark("highlightColor", highlightColor);
+      } else {
+        editor.tf.removeMark("highlight");
+        editor.tf.removeMark("highlightColor");
+      }
+      editor.tf.setNodes(
+        highlightColor ? {
+          highlight: true,
+          highlightColor
+        } : {
+          highlight: void 0,
+          highlightColor: void 0
+        },
+        {
+          at: editor.selection ?? void 0,
+          match: (node3) => editor.api.isText(node3),
+          split: true
+        }
+      );
+      editor.tf.focus();
+      openState.onOpenChange(false);
+    },
+    [editor, inlineCodeActive, openState]
+  );
+  return {
+    applyHighlight,
+    inlineCodeActive,
+    openState,
+    rememberSelection
+  };
+};
+const HighlightColorToolbarButton = () => {
+  const { applyHighlight, inlineCodeActive, openState, rememberSelection } = useHighlightToolbar();
+  return /* @__PURE__ */ React__default.createElement(DropdownMenu$1, { modal: false, ...openState }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    ToolbarButton,
+    {
+      isDropdown: true,
+      showArrow: true,
+      pressed: openState.open,
+      tooltip: "Highlight color",
+      disabled: inlineCodeActive,
+      onMouseDown: rememberSelection
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React__default.createElement(Icons.highlight, null), /* @__PURE__ */ React__default.createElement("span", { className: "sr-only" }, "Highlight color"))
+  )), /* @__PURE__ */ React__default.createElement(DropdownMenuContent$1, { align: "start", className: "min-w-[180px]" }, /* @__PURE__ */ React__default.createElement(DropdownMenuItem$1, { onSelect: () => applyHighlight() }, "Clear highlight"), highlightColors.map((color) => /* @__PURE__ */ React__default.createElement(
+    DropdownMenuItem$1,
+    {
+      key: color.value,
+      onSelect: () => applyHighlight(color.value)
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        className: "mr-2 inline-block size-4 rounded border border-gray-300",
+        style: { backgroundColor: color.value }
+      }
+    ),
+    color.label
+  ))));
+};
 const ListToolbarButton = withRef$1(({ nodeType = BulletedListPlugin.key, ...rest }, ref) => {
   const state = useListToolbarButtonState({ nodeType });
   const { props } = useListToolbarButton(state);
@@ -67616,6 +68684,11 @@ const toolbarItems = {
     width: () => STANDARD_ICON_WIDTH,
     Component: /* @__PURE__ */ React__default.createElement(StrikethroughToolbarButton, null)
   },
+  highlight: {
+    label: "Highlight",
+    width: () => STANDARD_ICON_WIDTH,
+    Component: /* @__PURE__ */ React__default.createElement(HighlightToolbarButton, null)
+  },
   italic: {
     label: "Italic",
     width: () => STANDARD_ICON_WIDTH,
@@ -68803,7 +69876,7 @@ const FloatingToolbar = withRef$1(({ children, state, ...props }, propRef) => {
     Toolbar,
     {
       className: cn$1(
-        "absolute z-[999999] whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md print:hidden rounded-md"
+        "absolute z-[10799] whitespace-nowrap border bg-popover px-1 opacity-100 shadow-md print:hidden rounded-md"
       ),
       ...props,
       ...rootProps,
@@ -119698,6 +120771,7 @@ const resetBlockTypesCodeBlockRule = {
 const viewPlugins = [
   BasicMarksPlugin,
   UnderlinePlugin,
+  HighlightPlugin,
   HeadingPlugin.configure({ options: { levels: 6 } }),
   ParagraphPlugin,
   CodeBlockPlugin.configure({
@@ -119708,6 +120782,30 @@ const viewPlugins = [
 const CorrectNodeBehaviorPlugin = createSlatePlugin$1({
   key: "WITH_CORRECT_NODE_BEHAVIOR"
 });
+const ClearHighlightOnEnterPlugin = createSlatePlugin$1({
+  key: "CLEAR_HIGHLIGHT_ON_ENTER"
+}).overrideEditor(({ editor, tf: { insertBreak: insertBreak2 } }) => ({
+  transforms: {
+    insertBreak() {
+      const keyboardEvent = editor.currentKeyboardEvent;
+      const isPlainEnter = (keyboardEvent == null ? void 0 : keyboardEvent.key) === "Enter" && !keyboardEvent.shiftKey && !keyboardEvent.metaKey && !keyboardEvent.ctrlKey && !keyboardEvent.altKey;
+      const activeMarks = editor.api.marks();
+      const hasHighlight = Boolean(
+        (activeMarks == null ? void 0 : activeMarks.highlight) || (activeMarks == null ? void 0 : activeMarks.highlightColor)
+      );
+      insertBreak2();
+      if (!isPlainEnter || !hasHighlight) {
+        return;
+      }
+      editor.tf.removeMark("highlight");
+      editor.tf.removeMark("highlightColor");
+      editor.tf.unsetNodes(["highlight", "highlightColor"], {
+        at: editor.selection ?? void 0,
+        match: (node3) => editor.api.isText(node3)
+      });
+    }
+  }
+}));
 const editorPlugins = [
   createMdxBlockPlugin,
   createMdxInlinePlugin,
@@ -119717,6 +120815,7 @@ const editorPlugins = [
   createBlockquoteEnterBreakPlugin,
   createInvalidMarkdownPlugin,
   CorrectNodeBehaviorPlugin,
+  ClearHighlightOnEnterPlugin,
   LinkPlugin.configure({
     options: {
       // Custom validation function to allow relative links, e.g., /about