tinacms 0.0.0-d900f4e-20251117211602 → 0.0.0-d9487bf-20251119052214

package/dist/index.js

@@ -5,8 +5,8 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate-heading"), require("is-hotkey"), require("clsx"), require("@radix-ui/react-slot"), require("@udecode/plate-code-block"), require("lucide-react"), require("mermaid"), require("class-variance-authority"), require("cmdk"), require("@radix-ui/react-dialog"), require("@radix-ui/react-popover"), require("@udecode/plate"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-reset-node"), require("@udecode/plate-list"), require("@udecode/plate-resizable"), require("@udecode/plate-dnd"), require("@udecode/plate-table"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-separator"), require("@radix-ui/react-tooltip"), require("final-form"), require("final-form-arrays"), require("final-form-set-field-data"), require("react-final-form"), require("prop-types"), require("tailwind-merge"), require("react-beautiful-dnd"), require("react-color"), require("color-string"), require("graphql"), require("@graphql-inspector/core"), require("react-dropzone"), require("@udecode/cmdk"), require("@headlessui/react"), require("@udecode/plate-trailing-block"), require("@udecode/plate-floating"), require("@udecode/plate-block-quote"), require("@udecode/plate-node-id"), require("@udecode/plate-link"), require("@udecode/plate-autoformat"), require("lodash.get"), require("moment"), require("date-fns"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate-heading", "is-hotkey", "clsx", "@radix-ui/react-slot", "@udecode/plate-code-block", "lucide-react", "mermaid", "class-variance-authority", "cmdk", "@radix-ui/react-dialog", "@radix-ui/react-popover", "@udecode/plate", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-reset-node", "@udecode/plate-list", "@udecode/plate-resizable", "@udecode/plate-dnd", "@udecode/plate-table", "@radix-ui/react-dropdown-menu", "@radix-ui/react-toolbar", "@radix-ui/react-separator", "@radix-ui/react-tooltip", "final-form", "final-form-arrays", "final-form-set-field-data", "react-final-form", "prop-types", "tailwind-merge", "react-beautiful-dnd", "react-color", "color-string", "graphql", "@graphql-inspector/core", "react-dropzone", "@udecode/cmdk", "@headlessui/react", "@udecode/plate-trailing-block", "@udecode/plate-floating", "@udecode/plate-block-quote", "@udecode/plate-node-id", "@udecode/plate-link", "@udecode/plate-autoformat", "lodash.get", "moment", "date-fns", "@tinacms/schema-tools", "graphql-tag", "yup", "react-router-dom", "@tinacms/mdx"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.tinacms = {}, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP));
-})(this, function(exports2, zod, React, ReactDOM, cn$2, plateHeading, isHotkey, clsx, reactSlot, plateCodeBlock, lucideReact, mermaid, classVarianceAuthority, cmdk, DialogPrimitive, PopoverPrimitive, plate, react, plateCombobox, plateResetNode, plateList, plateResizable, plateDnd, plateTable, DropdownMenuPrimitive, ToolbarPrimitive, SeparatorPrimitive, TooltipPrimitive, finalForm, arrayMutators, setFieldData, reactFinalForm, PropTypes, tailwindMerge, reactBeautifulDnd, pkg$1, pkg, graphql$1, core$1, dropzone, cmdk$1, react$1, plateTrailingBlock, plateFloating, plateBlockQuote, plateNodeId, plateLink, plateAutoformat, get$5, moment, dateFns, schemaTools, gql, yup, reactRouterDom, mdx) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate-heading"), require("is-hotkey"), require("clsx"), require("@radix-ui/react-slot"), require("@udecode/plate-code-block"), require("lucide-react"), require("mermaid"), require("class-variance-authority"), require("cmdk"), require("@radix-ui/react-dialog"), require("@radix-ui/react-popover"), require("@udecode/plate"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-reset-node"), require("@udecode/plate-list"), require("@udecode/plate-resizable"), require("@udecode/plate-dnd"), require("@udecode/plate-table"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-separator"), require("@radix-ui/react-tooltip"), require("final-form"), require("final-form-arrays"), require("final-form-set-field-data"), require("react-final-form"), require("prop-types"), require("tailwind-merge"), require("@dnd-kit/core"), require("@dnd-kit/sortable"), require("@dnd-kit/utilities"), require("react-color"), require("color-string"), require("graphql"), require("@graphql-inspector/core"), require("react-dropzone"), require("@udecode/cmdk"), require("@headlessui/react"), require("@udecode/plate-trailing-block"), require("@udecode/plate-floating"), require("@udecode/plate-block-quote"), require("@udecode/plate-node-id"), require("@udecode/plate-link"), require("@udecode/plate-autoformat"), require("lodash.get"), require("moment"), require("date-fns"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate-heading", "is-hotkey", "clsx", "@radix-ui/react-slot", "@udecode/plate-code-block", "lucide-react", "mermaid", "class-variance-authority", "cmdk", "@radix-ui/react-dialog", "@radix-ui/react-popover", "@udecode/plate", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-reset-node", "@udecode/plate-list", "@udecode/plate-resizable", "@udecode/plate-dnd", "@udecode/plate-table", "@radix-ui/react-dropdown-menu", "@radix-ui/react-toolbar", "@radix-ui/react-separator", "@radix-ui/react-tooltip", "final-form", "final-form-arrays", "final-form-set-field-data", "react-final-form", "prop-types", "tailwind-merge", "@dnd-kit/core", "@dnd-kit/sortable", "@dnd-kit/utilities", "react-color", "color-string", "graphql", "@graphql-inspector/core", "react-dropzone", "@udecode/cmdk", "@headlessui/react", "@udecode/plate-trailing-block", "@udecode/plate-floating", "@udecode/plate-block-quote", "@udecode/plate-node-id", "@udecode/plate-link", "@udecode/plate-autoformat", "lodash.get", "moment", "date-fns", "@tinacms/schema-tools", "graphql-tag", "yup", "react-router-dom", "@tinacms/mdx"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.tinacms = {}, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP));
+})(this, function(exports2, zod, React, ReactDOM, cn$2, plateHeading, isHotkey, clsx, reactSlot, plateCodeBlock, lucideReact, mermaid, classVarianceAuthority, cmdk, DialogPrimitive, PopoverPrimitive, plate, react, plateCombobox, plateResetNode, plateList, plateResizable, plateDnd, plateTable, DropdownMenuPrimitive, ToolbarPrimitive, SeparatorPrimitive, TooltipPrimitive, finalForm, arrayMutators, setFieldData, reactFinalForm, PropTypes, tailwindMerge, core$1, sortable, utilities, pkg$1, pkg, graphql$1, core$2, dropzone, cmdk$1, react$1, plateTrailingBlock, plateFloating, plateBlockQuote, plateNodeId, plateLink, plateAutoformat, get$5, moment, dateFns, schemaTools, gql, yup, reactRouterDom, mdx) {
   var _a;
   "use strict";
   function _interopNamespaceDefault(e3) {
@@ -38960,6 +38960,128 @@ Please wrap them with useCallback or configure the deps array correctly.`
     }
   );
   DropdownButton.displayName = "DropdownButton";
+  const DragDropContext = ({
+    onDragEnd,
+    children
+  }) => {
+    const sensors = core$1.useSensors(
+      core$1.useSensor(core$1.PointerSensor, {
+        activationConstraint: {
+          delay: 100,
+          tolerance: 5
+        }
+      }),
+      core$1.useSensor(core$1.KeyboardSensor, {
+        coordinateGetter: sortable.sortableKeyboardCoordinates
+      })
+    );
+    const handleDragEnd = (event) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) {
+        return;
+      }
+      const activeIdStr = String(active.id);
+      const overIdStr = String(over.id);
+      const activeFieldName = activeIdStr.substring(
+        0,
+        activeIdStr.lastIndexOf(".")
+      );
+      const overFieldName = overIdStr.substring(0, overIdStr.lastIndexOf("."));
+      const activeIndex = parseInt(
+        activeIdStr.substring(activeIdStr.lastIndexOf(".") + 1)
+      );
+      const overIndex = parseInt(
+        overIdStr.substring(overIdStr.lastIndexOf(".") + 1)
+      );
+      if (activeFieldName === overFieldName) {
+        const result = {
+          destination: {
+            index: overIndex
+          },
+          source: {
+            index: activeIndex
+          },
+          type: activeFieldName
+        };
+        onDragEnd(result);
+      }
+    };
+    return /* @__PURE__ */ React.createElement(
+      core$1.DndContext,
+      {
+        sensors,
+        collisionDetection: core$1.closestCenter,
+        onDragEnd: handleDragEnd
+      },
+      children
+    );
+  };
+  const Droppable = ({
+    droppableId,
+    type,
+    children
+  }) => {
+    const ref = React.useRef(null);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children({
+      innerRef: ref,
+      placeholder: null
+    }));
+  };
+  const Draggable = ({
+    draggableId,
+    children
+  }) => {
+    const animateLayoutChanges = (args) => {
+      const { isSorting, wasDragging } = args;
+      if (wasDragging) {
+        return false;
+      }
+      if (isSorting) {
+        return sortable.defaultAnimateLayoutChanges(args);
+      }
+      return true;
+    };
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging,
+      setActivatorNodeRef
+    } = sortable.useSortable({
+      id: draggableId,
+      animateLayoutChanges
+    });
+    const style = {
+      transform: utilities.CSS.Transform.toString(transform),
+      transition,
+      ...isDragging && { zIndex: 9999 }
+    };
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children(
+      {
+        innerRef: { current: null },
+        draggableProps: {
+          ref: setNodeRef,
+          style,
+          ...attributes
+        },
+        dragHandleProps: {
+          ref: setActivatorNodeRef,
+          ...listeners
+        }
+      },
+      {
+        isDragging
+      }
+    ));
+  };
+  const SortableProvider = ({
+    items: items2,
+    children
+  }) => {
+    return /* @__PURE__ */ React.createElement(sortable.SortableContext, { items: items2, strategy: sortable.verticalListSortingStrategy }, children);
+  };
   function FaCircle(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" }, "child": [] }] })(props);
   }
@@ -39506,6 +39628,9 @@ Please wrap them with useCallback or configure the deps array correctly.`
   function MdVpnKey(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.65 10A5.99 5.99 0 0 0 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 0 0 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" }, "child": [] }] })(props);
   }
+  function MdAccessTime(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": "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" }, "child": [] }] })(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);
   }
@@ -39515,6 +39640,9 @@ Please wrap them with useCallback or configure the deps array correctly.`
   function MdSyncProblem(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": "M3 12c0 2.21.91 4.2 2.36 5.64L3 20h6v-6l-2.24 2.24A6.003 6.003 0 0 1 5 12a5.99 5.99 0 0 1 4-5.65V4.26C5.55 5.15 3 8.27 3 12zm8 5h2v-2h-2v2zM21 4h-6v6l2.24-2.24A6.003 6.003 0 0 1 19 12a5.99 5.99 0 0 1-4 5.65v2.09c3.45-.89 6-4.01 6-7.74 0-2.21-.91-4.2-2.36-5.64L21 4zm-10 9h2V7h-2v6z" }, "child": [] }] })(props);
   }
+  function MdWifiOff(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4a9.793 9.793 0 0 0-4.49-2.56l3.53 3.53.96-.97zM2 3.05 5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24A9.684 9.684 0 0 0 5 13v.01L6.99 15a7.042 7.042 0 0 1 4.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3a4.237 4.237 0 0 0-6 0z" }, "child": [] }] })(props);
+  }
   function MdOutlineHelpOutline(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": "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" }, "child": [] }] })(props);
   }
@@ -39524,6 +39652,9 @@ Please wrap them with useCallback or configure the deps array correctly.`
   function MdOutlineClear(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": "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" }, "child": [] }] })(props);
   }
+  function MdOutlineDataSaverOff(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": "M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.48 2.54l2.6 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53A6.95 6.95 0 0 1 12 19z" }, "child": [] }] })(props);
+  }
   function MdOutlineCloud(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": "M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11A2.98 2.98 0 0 1 22 15c0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95A5.469 5.469 0 0 1 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96A7.49 7.49 0 0 0 12 4z" }, "child": [] }] })(props);
   }
@@ -39533,7 +39664,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
   function MdOutlinePerson(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": "M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }, "child": [] }] })(props);
   }
-  const selectFieldClasses = "shadow appearance-none bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded";
+  const selectFieldClasses = "shadow appearance-none h-full bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded";
   const Select = ({
     input,
     field,
@@ -39547,7 +39678,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
         ref.current.focus();
       }
     }, [field == null ? void 0 : field.experimental_focusIntent, ref]);
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group w-full md:w-auto" }, /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group w-full h-full md:w-auto" }, /* @__PURE__ */ React__namespace.createElement(
       "select",
       {
         id: input.name,
@@ -40439,19 +40570,25 @@ Please wrap them with useCallback or configure the deps array correctly.`
           /* @__PURE__ */ React.createElement(AddIcon, { className: "w-5/6 h-auto" })
         )
       },
-      /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(reactBeautifulDnd.Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), items2.map((item, index2) => /* @__PURE__ */ React.createElement(
-        Item$2,
+      /* @__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(
+        SortableProvider,
         {
-          key: index2,
-          tinaForm,
-          field,
-          item,
-          index: index2,
-          isMin,
-          fixedLength,
-          ...itemProps(item)
-        }
-      )), provider.placeholder))))
+          items: items2.map((_, index2) => `${field.name}.${index2}`)
+        },
+        items2.map((item, index2) => /* @__PURE__ */ React.createElement(
+          Item$2,
+          {
+            key: index2,
+            tinaForm,
+            field,
+            item,
+            index: index2,
+            isMin,
+            fixedLength,
+            ...itemProps(item)
+          }
+        ))
+      ), provider.placeholder))))
     );
   };
   const Item$2 = ({
@@ -40471,14 +40608,20 @@ Please wrap them with useCallback or configure the deps array correctly.`
     const title = label || `${field.label || field.name} Item`;
     const { dispatch: setHoveredField } = useEvent("field:hover");
     const { dispatch: setFocusedField } = useEvent("field:focus");
-    return /* @__PURE__ */ React.createElement(reactBeautifulDnd.Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       ItemHeader,
       {
         provider,
         isDragging: snapshot.isDragging,
         ...p2
       },
-      /* @__PURE__ */ React.createElement(DragHandle, { isDragging: snapshot.isDragging }),
+      /* @__PURE__ */ React.createElement(
+        DragHandle,
+        {
+          isDragging: snapshot.isDragging,
+          dragHandleProps: provider.dragHandleProps
+        }
+      ),
       /* @__PURE__ */ React.createElement(
         ItemClickTarget,
         {
@@ -40542,17 +40685,16 @@ Please wrap them with useCallback or configure the deps array correctly.`
     provider,
     ...props
   }) => {
+    var _a2, _b;
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        ref: provider.innerRef,
+        ref: (_a2 = provider.draggableProps) == null ? void 0 : _a2.ref,
         ...provider.draggableProps,
-        ...provider.dragHandleProps,
         ...props,
         className: `relative group cursor-pointer flex justify-between items-stretch bg-white border border-gray-100 -mb-px overflow-visible p-0 text-sm font-normal ${isDragging ? "rounded shadow text-blue-600" : "text-gray-600 first:rounded-t last:rounded-b"} ${props.className ?? ""}`,
         style: {
-          ...provider.draggableProps.style ?? {},
-          ...provider.dragHandleProps.style ?? {},
+          ...((_b = provider.draggableProps) == null ? void 0 : _b.style) ?? {},
           ...props.style ?? {}
         }
       },
@@ -40570,10 +40712,14 @@ Please wrap them with useCallback or configure the deps array correctly.`
       /* @__PURE__ */ React.createElement(TrashIcon, { className: "h-5 w-auto fill-current text-red-500 transition-colors duration-150 ease-out" })
     );
   };
-  const DragHandle = ({ isDragging }) => {
+  const DragHandle = ({
+    isDragging,
+    dragHandleProps
+  }) => {
     return /* @__PURE__ */ React.createElement(
       "div",
       {
+        ...dragHandleProps,
         className: `relative w-8 px-1 py-2.5 flex items-center justify-center hover:bg-gray-50 group cursor-[grab] ${isDragging ? `text-blue-500` : `text-gray-200 hover:text-gray-600`}`
       },
       isDragging ? /* @__PURE__ */ React.createElement(ReorderIcon, { className: "fill-current w-7 h-auto" }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DragIcon, { className: "fill-current w-7 h-auto group-hover:opacity-0 transition-opacity duration-150 ease-out" }), /* @__PURE__ */ React.createElement(ReorderIcon, { className: "fill-current w-7 h-auto absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 ease-out" }))
@@ -41025,39 +41171,45 @@ Please wrap them with useCallback or configure the deps array correctly.`
           }
         ))
       },
-      /* @__PURE__ */ React__namespace.createElement(ListPanel, null, /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__namespace.createElement("div", { ref: provider.innerRef, className: "edit-page--list-parent" }, items2.length === 0 && /* @__PURE__ */ React__namespace.createElement(EmptyList, null), items2.map((block2, index2) => {
-        const template = field.templates[block2._template];
-        if (!template) {
+      /* @__PURE__ */ React__namespace.createElement(ListPanel, null, /* @__PURE__ */ React__namespace.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__namespace.createElement("div", { ref: provider.innerRef, className: "edit-page--list-parent" }, items2.length === 0 && /* @__PURE__ */ React__namespace.createElement(EmptyList, null), /* @__PURE__ */ React__namespace.createElement(
+        SortableProvider,
+        {
+          items: items2.map((_, index2) => `${field.name}.${index2}`)
+        },
+        items2.map((block2, index2) => {
+          const template = field.templates[block2._template];
+          if (!template) {
+            return /* @__PURE__ */ React__namespace.createElement(
+              InvalidBlockListItem,
+              {
+                key: index2,
+                index: index2,
+                field,
+                tinaForm
+              }
+            );
+          }
+          const itemProps = (item) => {
+            if (!template.itemProps)
+              return {};
+            return template.itemProps(item);
+          };
           return /* @__PURE__ */ React__namespace.createElement(
-            InvalidBlockListItem,
+            BlockListItem,
             {
               key: index2,
+              block: block2,
+              template,
               index: index2,
               field,
-              tinaForm
+              tinaForm,
+              isMin,
+              fixedLength,
+              ...itemProps(block2)
             }
           );
-        }
-        const itemProps = (item) => {
-          if (!template.itemProps)
-            return {};
-          return template.itemProps(item);
-        };
-        return /* @__PURE__ */ React__namespace.createElement(
-          BlockListItem,
-          {
-            key: index2,
-            block: block2,
-            template,
-            index: index2,
-            field,
-            tinaForm,
-            isMin,
-            fixedLength,
-            ...itemProps(block2)
-          }
-        );
-      }), provider.placeholder)))
+        })
+      ), provider.placeholder)))
     );
   };
   const BlockListItem = ({
@@ -41075,7 +41227,13 @@ Please wrap them with useCallback or configure the deps array correctly.`
     }, [tinaForm, field, index]);
     const { dispatch: setHoveredField } = useEvent("field:hover");
     const { dispatch: setFocusedField } = useEvent("field:focus");
-    return /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React__namespace.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React__namespace.createElement(
+      DragHandle,
+      {
+        isDragging: snapshot.isDragging,
+        dragHandleProps: provider.dragHandleProps
+      }
+    ), /* @__PURE__ */ React__namespace.createElement(
       ItemClickTarget,
       {
         onClick: () => {
@@ -41116,7 +41274,13 @@ Please wrap them with useCallback or configure the deps array correctly.`
     const removeItem = React__namespace.useCallback(() => {
       tinaForm.mutators.remove(field.name, index);
     }, [tinaForm, field, index]);
-    return /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React__namespace.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React__namespace.createElement(ItemClickTarget, null, /* @__PURE__ */ React__namespace.createElement(GroupLabel, { error: true }, "Invalid Block")), /* @__PURE__ */ React__namespace.createElement(ItemDeleteButton, { onClick: removeItem })));
+    return /* @__PURE__ */ React__namespace.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React__namespace.createElement(
+      DragHandle,
+      {
+        isDragging: snapshot.isDragging,
+        dragHandleProps: provider.dragHandleProps
+      }
+    ), /* @__PURE__ */ React__namespace.createElement(ItemClickTarget, null, /* @__PURE__ */ React__namespace.createElement(GroupLabel, { error: true }, "Invalid Block")), /* @__PURE__ */ React__namespace.createElement(ItemDeleteButton, { onClick: removeItem })));
   };
   const BlocksField = Blocks;
   const BlocksFieldPlugin = {
@@ -41183,19 +41347,25 @@ Please wrap them with useCallback or configure the deps array correctly.`
         tinaForm,
         actions: (!fixedLength || fixedLength && !isMax) && /* @__PURE__ */ React__namespace.createElement(IconButton, { onClick: addItem, variant: "primary", size: "small" }, /* @__PURE__ */ React__namespace.createElement(AddIcon, { className: "w-5/6 h-auto" }))
       },
-      /* @__PURE__ */ React__namespace.createElement(ListPanel, null, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__namespace.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React__namespace.createElement(EmptyList, null), items2.map((item, index2) => /* @__PURE__ */ React__namespace.createElement(
-        Item$1,
+      /* @__PURE__ */ React__namespace.createElement(ListPanel, null, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__namespace.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React__namespace.createElement(EmptyList, null), /* @__PURE__ */ React__namespace.createElement(
+        SortableProvider,
         {
-          key: index2,
-          tinaForm,
-          field,
-          item,
-          index: index2,
-          isMin,
-          fixedLength,
-          ...itemProps(item)
-        }
-      )), provider.placeholder))))
+          items: items2.map((_, index2) => `${field.name}.${index2}`)
+        },
+        items2.map((item, index2) => /* @__PURE__ */ React__namespace.createElement(
+          Item$1,
+          {
+            key: index2,
+            tinaForm,
+            field,
+            item,
+            index: index2,
+            isMin,
+            fixedLength,
+            ...itemProps(item)
+          }
+        ))
+      ), provider.placeholder))))
     );
   };
   const Item$1 = ({
@@ -41221,7 +41391,13 @@ Please wrap them with useCallback or configure the deps array correctly.`
         name: `${field.name}.${index}`
       }
     ];
-    return /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging, ...p2 }, /* @__PURE__ */ React__namespace.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React__namespace.createElement(ItemClickTarget, null, /* @__PURE__ */ React__namespace.createElement(FieldsBuilder, { padding: false, form: tinaForm, fields })), (!fixedLength || fixedLength && !isMin) && /* @__PURE__ */ React__namespace.createElement(ItemDeleteButton, { disabled: isMin, onClick: removeItem })));
+    return /* @__PURE__ */ React__namespace.createElement(Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging, ...p2 }, /* @__PURE__ */ React__namespace.createElement(
+      DragHandle,
+      {
+        isDragging: snapshot.isDragging,
+        dragHandleProps: provider.dragHandleProps
+      }
+    ), /* @__PURE__ */ React__namespace.createElement(ItemClickTarget, null, /* @__PURE__ */ React__namespace.createElement(FieldsBuilder, { padding: false, form: tinaForm, fields })), (!fixedLength || fixedLength && !isMin) && /* @__PURE__ */ React__namespace.createElement(ItemDeleteButton, { disabled: isMin, onClick: removeItem })));
   };
   const ListField = List;
   const ListFieldPlugin = {
@@ -43104,6 +43280,38 @@ Please wrap them with useCallback or configure the deps array correctly.`
       " Create Branch"
     )));
   };
+  const Badge = ({
+    children,
+    calloutStyle = "warning",
+    className = "",
+    displayIcon = true,
+    ...props
+  }) => {
+    const commonAlertStyles = "text-xs px-2 py-0.5 flex items-center rounded-md border";
+    const styles = {
+      warning: `text-amber-700 bg-amber-100 border-amber-700/20`,
+      info: `text-blue-600 bg-blue-100/50 border-blue-600/20`,
+      success: `text-green-600 bg-green-100/50 border-green-600/20`,
+      error: `text-red-700 bg-red-100/50 border-red-700/20`
+    };
+    const icon = {
+      warning: /* @__PURE__ */ React__namespace.createElement(MdAccessTime, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-amber-600" }),
+      info: /* @__PURE__ */ React__namespace.createElement(MdOutlineDataSaverOff, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-blue-600" }),
+      success: /* @__PURE__ */ React__namespace.createElement(MdCheckCircle, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-green-600" }),
+      error: /* @__PURE__ */ React__namespace.createElement(MdWifiOff, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-red-700" })
+    };
+    return /* @__PURE__ */ React__namespace.createElement(
+      "div",
+      {
+        className: cn$1(commonAlertStyles, styles[calloutStyle], className),
+        ...props
+      },
+      displayIcon && icon[calloutStyle],
+      " ",
+      children
+    );
+  };
+  const tableHeadingStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider";
   function formatBranchName(str) {
     const pattern = /[^/\w-]+/g;
     const formattedStr = str.replace(pattern, "-");
@@ -43347,7 +43555,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
       filter2
     ).sort(sortBranchListFn(sortValue));
     const previewFunction = (_d = (_c = (_b = (_a2 = cms.api.tina.schema) == null ? void 0 : _a2.config) == null ? void 0 : _b.config) == null ? void 0 : _c.ui) == null ? void 0 : _d.previewUrl;
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-end space-x-4" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-stretch space-x-4" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
       "label",
       {
         htmlFor: "search",
@@ -43370,7 +43578,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
         className: "outline-none focus:outline-none bg-transparent border-0 p-0 m-0 absolute right-2.5 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100 transition-all ease-out duration-150"
       },
       /* @__PURE__ */ React__namespace.createElement(MdOutlineClear, { className: "w-5 h-auto text-gray-600" })
-    ))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
+    ))), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React__namespace.createElement(
       "label",
       {
         htmlFor: "branch-type",
@@ -43398,7 +43606,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
           }
         ]
       }
-    ))), filteredBranchList.length === 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "block relative text-gray-300 italic py-1" }, "No branches to display"), filteredBranchList.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-[192px] max-h-[24rem] overflow-y-auto flex flex-col w-full h-full rounded-lg shadow-inner bg-white border border-gray-200" }, filteredBranchList.map((branch) => /* @__PURE__ */ React__namespace.createElement(
+    ))), filteredBranchList.length === 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "block relative text-gray-300 italic py-1" }, "No branches to display"), filteredBranchList.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "min-w-[192px] max-h-[24rem] overflow-y-auto w-full h-full rounded-lg shadow-inner bg-white border border-gray-200" }, /* @__PURE__ */ React__namespace.createElement("table", { className: "w-full" }, /* @__PURE__ */ React__namespace.createElement("thead", { className: "bg-gray-100 border-b-2 border-gray-200" }, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", { className: tableHeadingStyle }, "Branch Name"), /* @__PURE__ */ React__namespace.createElement("th", { className: tableHeadingStyle }, "Last Updated"), /* @__PURE__ */ React__namespace.createElement("th", null), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, filteredBranchList.map((branch) => /* @__PURE__ */ React__namespace.createElement(
       BranchItem,
       {
         key: branch.name,
@@ -43409,7 +43617,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
         previewFunction,
         cms
       }
-    ))));
+    ))))));
   };
   const BranchItem = ({
     branch,
@@ -43445,15 +43653,15 @@ Please wrap them with useCallback or configure the deps array correctly.`
     const isCurrentBranch = branch.name === currentBranch;
     const indexingStatus = (_a2 = branch == null ? void 0 : branch.indexStatus) == null ? void 0 : _a2.status;
     return /* @__PURE__ */ React__namespace.createElement(
-      "div",
+      "tr",
       {
-        className: `relative text-base py-1.5 px-3 flex items-center gap-1.5 border-l-0 border-t-0 border-r-0 border-gray-50 w-full outline-none transition-all ease-out duration-150 ${indexingStatus !== "complete" ? "bg-gray-50 text-gray-400" : isCurrentBranch ? "border-blue-500 border-l-5 bg-blue-50 text-blue-800 border-b-0" : "border-b-2"}`
+        className: `text-base border-l-0 border-t-0 border-r-0 outline-none transition-all ease-out duration-150 ${indexingStatus !== "complete" ? "bg-gray-50 text-gray-400" : isCurrentBranch ? "bg-blue-50 text-blue-800 border-b-0" : "border-b-2 border-gray-50"}`
       },
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "w-1/2" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-0" }, branch.protected && /* @__PURE__ */ React__namespace.createElement(BiLock, { className: "w-5 h-auto opacity-70 text-blue-500" })), /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate flex-1" }, branch.name)), indexingStatus !== "complete" && /* @__PURE__ */ React__namespace.createElement("div", { className: "w-fit" }, /* @__PURE__ */ React__namespace.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status }))),
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, creatingPR ? /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React__namespace.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-bold" }, "Last Updated"), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm leading-tight" }, dateFns.formatDistanceToNow(new Date(branch.indexStatus.timestamp), {
+      /* @__PURE__ */ React__namespace.createElement("td", { className: "pl-3 pr-3 py-1.5 min-w-0" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-1" }, branch.protected && /* @__PURE__ */ React__namespace.createElement(BiLock, { className: "w-5 h-auto opacity-70 text-blue-500 flex-shrink-0" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm leading-tight truncate" }, branch.name)), indexingStatus !== "complete" && /* @__PURE__ */ React__namespace.createElement("div", { className: "w-fit mt-1" }, /* @__PURE__ */ React__namespace.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status })))),
+      /* @__PURE__ */ React__namespace.createElement("td", { className: "px-3 py-1.5 min-w-0" }, creatingPR ? /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React__namespace.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm leading-tight whitespace-nowrap" }, dateFns.formatDistanceToNow(new Date(branch.indexStatus.timestamp), {
         addSuffix: true
-      })))),
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React__namespace.createElement(
+      }))),
+      /* @__PURE__ */ React__namespace.createElement("td", { className: "px-3 py-1.5 text-left" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React__namespace.createElement(
         Button$1,
         {
           variant: "white",
@@ -43461,12 +43669,13 @@ Please wrap them with useCallback or configure the deps array correctly.`
           onClick: () => {
             onChange(branch.name);
           },
-          className: "mr-auto cursor-pointer text-sm h-9 px-4 flex items-center gap-1"
+          className: "cursor-pointer text-sm h-9 px-4 flex items-center gap-1"
         },
         /* @__PURE__ */ React__namespace.createElement(BiPencil, { className: "h-4 w-auto text-blue-500 opacity-70 -mt-px" }),
         " ",
         "Select"
-      ), /* @__PURE__ */ React__namespace.createElement("div", { className: "ml-auto" }, /* @__PURE__ */ React__namespace.createElement(
+      ), indexingStatus === "complete" && isCurrentBranch && /* @__PURE__ */ React__namespace.createElement(Badge, { calloutStyle: "info", className: "w-fit", displayIcon: false }, /* @__PURE__ */ React__namespace.createElement("span", null, "Selected"))),
+      /* @__PURE__ */ React__namespace.createElement("td", { className: "px-3 py-1.5 text-right" }, /* @__PURE__ */ React__namespace.createElement(
         OverflowMenu$1,
         {
           toolbarItems: [
@@ -43497,7 +43706,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
             }
           ].filter(Boolean)
         }
-      )))
+      ))
     );
   };
   const IndexStatus = ({ indexingStatus }) => {
@@ -46325,7 +46534,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     requiredArgs(1, arguments);
     return formatDistance(dirtyDate, Date.now(), options);
   }
-  const version$1 = "2.9.4";
+  const version$1 = "2.9.5";
   const VersionInfo = () => {
     var _a2, _b, _c, _d, _e, _f;
     const cms = useCMS();
@@ -63467,7 +63676,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       const schemaFromCloud = await this.api.getSchema();
       const schema1 = schemaFromCloud;
       const schema2 = graphql$1.buildSchema(graphql$1.print(localSchema));
-      const diffOutput = await core$1.diff(schema1, schema2);
+      const diffOutput = await core$2.diff(schema1, schema2);
       if (diffOutput.length > 0) {
         return false;
       } else {
@@ -64180,7 +64389,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
             values: tinaForm.values,
             close: () => setCreateBranchModalOpen(false)
           }
-        ), /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React__namespace.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React__namespace.createElement(FormPortalProvider, null, /* @__PURE__ */ React__namespace.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React__namespace.createElement(
+        ), /* @__PURE__ */ React__namespace.createElement(DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React__namespace.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React__namespace.createElement(FormPortalProvider, null, /* @__PURE__ */ React__namespace.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React__namespace.createElement(
           FieldsBuilder,
           {
             form: tinaForm,
@@ -120611,7 +120820,7 @@ This will work when developing locally but NOT when deployed to production.
     headerClassName,
     children
   }) => {
-    return /* @__PURE__ */ React.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React.createElement(BranchButton, null), /* @__PURE__ */ React.createElement(BranchPreviewButton, null))), children);
+    return /* @__PURE__ */ React.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement(BranchButton, null), /* @__PURE__ */ React.createElement(BranchPreviewButton, null))), children);
   };
   const PageHeader = ({
     children
@@ -120679,7 +120888,7 @@ This will work when developing locally but NOT when deployed to production.
     folder,
     collectionName
   }) => {
-    return /* @__PURE__ */ React.createElement(react$1.Menu, { as: "div", className: "relative inline-block text-left" }, () => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(react$1.MenuButton, { className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6" }, "Create New ", /* @__PURE__ */ React.createElement(BiPlus, { className: "w-5 h-full ml-1 opacity-70" }))), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react$1.Menu, { as: "div", className: "relative inline-block text-left w-full md:w-auto" }, () => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(react$1.MenuButton, { className: "w-full md:w-auto icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out  shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark text-sm h-10 px-6" }, "Create New ", /* @__PURE__ */ React.createElement(BiPlus, { className: "w-5 h-full ml-1 opacity-70" }))), /* @__PURE__ */ React.createElement(
       react$1.Transition,
       {
         enter: "transition ease-out duration-100",
@@ -120807,6 +121016,9 @@ This will work when developing locally but NOT when deployed to production.
         booleanEquals: null
       }));
     }, [collectionName]);
+    const tableRowStyle = "hover:bg-gray-50/50 border-b-2 border-gray-50 transition-colors duration-300";
+    const tableHeadingCellStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider";
+    const tableHeadingStyle2 = "bg-gray-100 border-b-2 border-gray-200";
     return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
       return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(
         GetCollection,
@@ -121003,7 +121215,7 @@ This will work when developing locally but NOT when deployed to production.
               },
               close: () => setFolderModalOpen(false)
             }
-          ), /* @__PURE__ */ React.createElement(PageHeader, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4 items-baseline" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
+          ), /* @__PURE__ */ React.createElement(PageHeader, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
             "label",
             {
               htmlFor: "sort",
@@ -121075,7 +121287,7 @@ This will work when developing locally but NOT when deployed to production.
               className: "underline hover:text-blue-700 transition-all duration-150"
             },
             "Read the docs"
-          ))))), allowCreate && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-end gap-2 md:gap-0 pt-4 lg:pt-0" }, allowCreateNestedFolder && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(
+          ))))), allowCreate && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-end gap-2 md:gap-0 pt-4 lg:pt-0" }, allowCreateNestedFolder && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
             reactRouterDom.Link,
             {
               onMouseDown: (evt) => {
@@ -121093,7 +121305,7 @@ This will work when developing locally but NOT when deployed to production.
               },
               to: "/collections/new-folder",
               className: cn$1(
-                "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-gray-500 hover:tina-orange-dark bg-white hover:bg-gray-50 border border-gray-100 focus:ring-white focus:ring-tina-orange-dark w-full md:w-auto text-sm h-10 px-6 mr-4",
+                "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-gray-500 bg-white hover:bg-gray-50 border border-gray-100 focus:ring-white focus:ring-blue-500 w-full md:w-auto text-sm h-10 px-6 mr-4",
                 collection.templates && "opacity-50 pointer-events-none cursor-not-allowed"
               ),
               "aria-disabled": !!collection.templates,
@@ -121101,7 +121313,7 @@ This will work when developing locally but NOT when deployed to production.
             },
             /* @__PURE__ */ React.createElement(FaFolder, { className: "mr-2" }),
             "Add Folder"
-          ))), collection.templates && /* @__PURE__ */ React.createElement(
+          )), collection.templates && /* @__PURE__ */ React.createElement(
             TooltipContent,
             {
               side: "top",
@@ -121142,175 +121354,225 @@ This will work when developing locally but NOT when deployed to production.
               templates: collection.templates,
               folder
             }
-          ))))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), /* @__PURE__ */ React.createElement("div", { className: "w-full overflow-x-auto shadow-md rounded-md" }, (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React.createElement("table", { className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg" }, /* @__PURE__ */ React.createElement("tbody", null, folder.name && !search ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React.createElement(
-            Breadcrumb,
-            {
-              folder,
-              navigate,
-              collectionName
-            }
-          ))) : null, documents.length > 0 && documents.map((document2) => {
-            var _a3;
-            if (document2.node.__typename === "Folder") {
-              return /* @__PURE__ */ React.createElement(
-                "tr",
-                {
-                  key: `folder-${document2.node.path}`
-                },
-                /* @__PURE__ */ React.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React.createElement(
-                  "a",
-                  {
-                    className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
-                    onClick: () => {
-                      navigate(
-                        `/${[
-                          "collections",
-                          collectionName,
-                          document2.node.path
-                        ].join("/")}`,
-                        { replace: true }
-                      );
-                    }
-                  },
-                  /* @__PURE__ */ React.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-                  /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Name"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block truncate" }, /* @__PURE__ */ React.createElement("span", null, document2.node.name)))
-                )),
-                /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3", colSpan: 4 }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Path"), /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, document2.node.path.substring(2).split("/").map((node2) => {
-                  return /* @__PURE__ */ React.createElement("span", { key: node2 }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "pr-0.5" }, node2));
-                })))
-              );
-            }
-            const hasTitle = Boolean(
-              document2.node._sys.title
+          ))))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), /* @__PURE__ */ React.createElement("div", { className: "w-full overflow-x-auto shadow-md rounded-md" }, (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React.createElement("table", { className: "table-auto shadow bg-white border border-gray-200 w-full max-w-full rounded-lg" }, (() => {
+            const hasAnyDocuments = documents.some(
+              (doc) => doc.node.__typename !== "Folder"
             );
-            const subfolders = document2.node._sys.breadcrumbs.slice(0, -1).join("/");
-            return /* @__PURE__ */ React.createElement(
-              "tr",
+            const hasAnyFolders = documents.some(
+              (doc) => doc.node.__typename === "Folder"
+            );
+            const hasAnyTitles = documents.some(
+              (doc) => {
+                var _a3;
+                return doc.node.__typename !== "Folder" && Boolean((_a3 = doc.node._sys) == null ? void 0 : _a3.title);
+              }
+            );
+            return /* @__PURE__ */ React.createElement(React.Fragment, null, hasAnyDocuments && /* @__PURE__ */ React.createElement("thead", { className: tableHeadingStyle2 }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(
+              "th",
               {
-                className: "hover:bg-gray-100 transition-colors duration-300",
-                key: `document-${document2.node._sys.relativePath}`
+                className: tableHeadingCellStyle,
+                colSpan: hasAnyTitles ? 1 : 2
               },
-              /* @__PURE__ */ React.createElement(
-                "td",
-                {
-                  className: "pl-5 pr-3 py-3",
-                  colSpan: hasTitle ? 1 : 2
-                },
-                /* @__PURE__ */ React.createElement(
-                  "a",
+              hasAnyTitles ? "Title" : "Filename"
+            ), hasAnyTitles && /* @__PURE__ */ React.createElement(
+              "th",
+              {
+                className: tableHeadingCellStyle
+              },
+              "Filename"
+            ), /* @__PURE__ */ React.createElement("th", { className: tableHeadingCellStyle }, "Extension"), /* @__PURE__ */ React.createElement("th", { className: tableHeadingCellStyle }, "Template"), /* @__PURE__ */ React.createElement("th", null))), !hasAnyDocuments && hasAnyFolders && /* @__PURE__ */ React.createElement("thead", { className: tableHeadingStyle2 }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { className: tableHeadingCellStyle }, "Name"), /* @__PURE__ */ React.createElement(
+              "th",
+              {
+                className: tableHeadingCellStyle,
+                colSpan: 4
+              },
+              "Path"
+            ))), /* @__PURE__ */ React.createElement("tbody", null, folder.name && !search ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React.createElement(
+              Breadcrumb,
+              {
+                folder,
+                navigate,
+                collectionName
+              }
+            ))) : null, documents.length > 0 && documents.map((document2) => {
+              var _a3;
+              if (document2.node.__typename === "Folder") {
+                return /* @__PURE__ */ React.createElement(
+                  "tr",
                   {
-                    className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
-                    onClick: () => {
-                      handleNavigate(
-                        navigate,
-                        cms,
-                        collection,
-                        collectionDefinition,
-                        document2.node
-                      );
-                    }
+                    className: tableRowStyle,
+                    key: `folder-${document2.node.path}`
                   },
-                  /* @__PURE__ */ React.createElement(BiFile, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-                  /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block truncate mb-1" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, hasTitle ? (_a3 = document2.node._sys) == null ? void 0 : _a3.title : document2.node._sys.filename)), /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400" }, document2.node._sys.path))
-                )
-              ),
-              hasTitle && /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Filename"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document2.node._sys.filename))),
-              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Extension"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
-              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Template"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
-              /* @__PURE__ */ React.createElement("td", { className: "w-0" }, /* @__PURE__ */ React.createElement(
-                OverflowMenu$1,
-                {
-                  toolbarItems: [
+                  /* @__PURE__ */ React.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React.createElement(
+                    "a",
                     {
-                      name: "edit",
-                      label: "Edit in Admin",
-                      Icon: /* @__PURE__ */ React.createElement(BiEdit, { size: "1.3rem" }),
-                      onMouseDown: () => {
-                        const pathToDoc = document2.node._sys.breadcrumbs;
-                        if (folder.fullyQualifiedName) {
-                          pathToDoc.unshift("~");
-                        }
+                      className: "text-blue-600 flex items-center gap-3 cursor-pointer truncate",
+                      onClick: () => {
                         navigate(
                           `/${[
                             "collections",
-                            "edit",
                             collectionName,
-                            ...pathToDoc
+                            document2.node.path
                           ].join("/")}`,
                           { replace: true }
                         );
                       }
                     },
-                    allowCreate && {
-                      name: "duplicate",
-                      label: "Duplicate",
-                      Icon: /* @__PURE__ */ React.createElement(BiCopy, { size: "1.3rem" }),
-                      onMouseDown: () => {
-                        const pathToDoc = document2.node._sys.breadcrumbs;
-                        if (folder.fullyQualifiedName) {
-                          pathToDoc.unshift("~");
-                        }
-                        navigate(
-                          `/${[
-                            "collections",
-                            "duplicate",
-                            collectionName,
-                            ...pathToDoc
-                          ].join("/")}`,
-                          { replace: true }
-                        );
-                      }
+                    /* @__PURE__ */ React.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                    /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "leading-5 block truncate" }, /* @__PURE__ */ React.createElement("span", null, document2.node.name)))
+                  )),
+                  /* @__PURE__ */ React.createElement(
+                    "td",
+                    {
+                      className: "px-3 py-3",
+                      colSpan: 4
                     },
-                    allowDelete && {
-                      name: "rename",
-                      label: "Rename",
-                      Icon: /* @__PURE__ */ React.createElement(BiRename, { size: "1.3rem" }),
-                      onMouseDown: () => {
-                        setVars((old) => ({
-                          ...old,
-                          collection: collectionName,
-                          relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
-                            "/"
-                          ),
-                          relativePath: document2.node._sys.breadcrumbs.join(
-                            "/"
-                          ) + document2.node._sys.extension,
-                          newRelativePath: ""
-                        }));
-                        setRenameModalOpen(true);
+                    /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-400 truncate" }, document2.node.path.substring(2).split("/").map((node2) => {
+                      return /* @__PURE__ */ React.createElement("span", { key: node2 }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "pr-0.5" }, node2));
+                    }))
+                  )
+                );
+              }
+              const hasTitle = Boolean(
+                document2.node._sys.title
+              );
+              const subfolders = document2.node._sys.breadcrumbs.slice(0, -1).join("/");
+              return /* @__PURE__ */ React.createElement(
+                "tr",
+                {
+                  className: tableRowStyle,
+                  key: `document-${document2.node._sys.relativePath}`
+                },
+                /* @__PURE__ */ React.createElement(
+                  "td",
+                  {
+                    className: "pl-5 pr-3 py-3",
+                    colSpan: hasTitle ? 1 : 2
+                  },
+                  /* @__PURE__ */ React.createElement(
+                    "a",
+                    {
+                      className: "text-blue-600 flex items-center gap-3 cursor-pointer truncate",
+                      onClick: () => {
+                        handleNavigate(
+                          navigate,
+                          cms,
+                          collection,
+                          collectionDefinition,
+                          document2.node
+                        );
                       }
                     },
-                    allowDelete && {
-                      name: "delete",
-                      label: "Delete",
-                      Icon: /* @__PURE__ */ React.createElement(
-                        BiTrash,
-                        {
-                          size: "1.3rem",
-                          className: "text-red-500"
+                    /* @__PURE__ */ React.createElement(BiFile, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                    /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "leading-5 block truncate mb-1" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, hasTitle ? (_a3 = document2.node._sys) == null ? void 0 : _a3.title : document2.node._sys.filename)), /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400" }, document2.node._sys.path))
+                  )
+                ),
+                hasTitle && /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document2.node._sys.filename))),
+                /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
+                /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
+                /* @__PURE__ */ React.createElement("td", { className: "w-0" }, /* @__PURE__ */ React.createElement(
+                  OverflowMenu$1,
+                  {
+                    toolbarItems: [
+                      {
+                        name: "edit",
+                        label: "Edit in Admin",
+                        Icon: /* @__PURE__ */ React.createElement(BiEdit, { size: "1.3rem" }),
+                        onMouseDown: () => {
+                          const pathToDoc = document2.node._sys.breadcrumbs;
+                          if (folder.fullyQualifiedName) {
+                            pathToDoc.unshift(
+                              "~"
+                            );
+                          }
+                          navigate(
+                            `/${[
+                              "collections",
+                              "edit",
+                              collectionName,
+                              ...pathToDoc
+                            ].join("/")}`,
+                            { replace: true }
+                          );
+                        }
+                      },
+                      allowCreate && {
+                        name: "duplicate",
+                        label: "Duplicate",
+                        Icon: /* @__PURE__ */ React.createElement(BiCopy, { size: "1.3rem" }),
+                        onMouseDown: () => {
+                          const pathToDoc = document2.node._sys.breadcrumbs;
+                          if (folder.fullyQualifiedName) {
+                            pathToDoc.unshift(
+                              "~"
+                            );
+                          }
+                          navigate(
+                            `/${[
+                              "collections",
+                              "duplicate",
+                              collectionName,
+                              ...pathToDoc
+                            ].join("/")}`,
+                            { replace: true }
+                          );
+                        }
+                      },
+                      allowDelete && {
+                        name: "rename",
+                        label: "Rename",
+                        Icon: /* @__PURE__ */ React.createElement(BiRename, { size: "1.3rem" }),
+                        onMouseDown: () => {
+                          setVars((old) => ({
+                            ...old,
+                            collection: collectionName,
+                            relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
+                              "/"
+                            ),
+                            relativePath: document2.node._sys.breadcrumbs.join(
+                              "/"
+                            ) + document2.node._sys.extension,
+                            newRelativePath: ""
+                          }));
+                          setRenameModalOpen(
+                            true
+                          );
+                        }
+                      },
+                      allowDelete && {
+                        name: "delete",
+                        label: "Delete",
+                        Icon: /* @__PURE__ */ React.createElement(
+                          BiTrash,
+                          {
+                            size: "1.3rem",
+                            className: "text-red-500"
+                          }
+                        ),
+                        className: "text-red-500",
+                        onMouseDown: () => {
+                          setVars((old) => ({
+                            ...old,
+                            collection: collectionName,
+                            relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
+                              "/"
+                            ),
+                            relativePath: document2.node._sys.breadcrumbs.join(
+                              "/"
+                            ) + document2.node._sys.extension,
+                            newRelativePath: ""
+                          }));
+                          setDeleteModalOpen(
+                            true
+                          );
                         }
-                      ),
-                      className: "text-red-500",
-                      onMouseDown: () => {
-                        setVars((old) => ({
-                          ...old,
-                          collection: collectionName,
-                          relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
-                            "/"
-                          ),
-                          relativePath: document2.node._sys.breadcrumbs.join(
-                            "/"
-                          ) + document2.node._sys.extension,
-                          newRelativePath: ""
-                        }));
-                        setDeleteModalOpen(true);
                       }
-                    }
-                  ].filter(Boolean)
-                }
-              ))
-            );
-          })))), documents.length === 0 && /* @__PURE__ */ React.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React.createElement(
+                    ].filter(Boolean)
+                  }
+                ))
+              );
+            })));
+          })())), documents.length === 0 && /* @__PURE__ */ React.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React.createElement(
             CursorPaginator,
             {
               variant: "white",