tinacms 3.7.6 → 3.8.0

package/dist/index.js

@@ -23,7 +23,7 @@ import { SlashInputPlugin, SlashPlugin } from "@udecode/plate-slash-command/reac
 import { TablePlugin, TableRowPlugin, useTableCellElement, TableProvider, useTableElement, useTableMergeState, useTableBordersDropdownMenuContentState, TableCellHeaderPlugin, TableCellPlugin } from "@udecode/plate-table/react";
 import { PlateElement, useReadOnly, useElement, PlateLeaf, useSelected, useFocused, useEditorRef, withRef as withRef$1, useComposedRef, useEditorPlugin, useElementSelector, withHOC, usePluginOption, useRemoveNodeButton, useEditorSelector, ParagraphPlugin, createPlatePlugin, PlateContent, PlateContainer, useEditorState, useMarkToolbarButtonState, useMarkToolbarButton, usePlateEditor, useFormInputProps, useEditorSelection, useEditorReadOnly, useOnClickOutside, useEventEditorValue, Plate } from "@udecode/plate/react";
 import { 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, Highlighter, Strikethrough, Subscript, Superscript, Table as Table$1, Text, 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 { 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 as Heading1$1, Heading2 as Heading2$1, Heading3 as Heading3$1, Heading4 as Heading4$1, Heading5 as Heading5$1, Heading6 as Heading6$1, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Settings, Highlighter, Strikethrough, Subscript, Superscript, Table as Table$1, Text, 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 { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
@@ -1965,12 +1965,12 @@ const Icons = {
   editing: Edit2,
   emoji: Smile,
   externalLink: ExternalLink,
-  h1: Heading1,
-  h2: Heading2,
-  h3: Heading3,
-  h4: Heading4,
-  h5: Heading5,
-  h6: Heading6,
+  h1: Heading1$1,
+  h2: Heading2$1,
+  h3: Heading3$1,
+  h4: Heading4$1,
+  h5: Heading5$1,
+  h6: Heading6$1,
   // image: Image,
   indent: Indent,
   // italic: Italic,
@@ -3257,126 +3257,123 @@ const HighlightLeaf = ({
     }
   );
 };
-const Components = () => {
-  return {
-    [SlashInputPlugin.key]: SlashInputElement,
-    [HEADING_KEYS.h1]: ({
-      attributes,
-      editor,
-      element,
+const Heading1 = ({
+  attributes,
+  children,
+  className
+}) => /* @__PURE__ */ React__default.createElement(
+  "h1",
+  {
+    ...attributes,
+    className: classNames$1(
+      headerClasses,
+      blockClasses,
       className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h1",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-4xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    [HEADING_KEYS.h2]: ({
-      attributes,
-      editor,
-      element,
+      "text-4xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
+    )
+  },
+  children
+);
+const Heading2 = ({
+  attributes,
+  children,
+  className
+}) => /* @__PURE__ */ React__default.createElement(
+  "h2",
+  {
+    ...attributes,
+    className: classNames$1(
+      headerClasses,
+      blockClasses,
       className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h2",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-3xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    [HEADING_KEYS.h3]: ({
-      attributes,
-      editor,
-      element,
+      "text-3xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
+    )
+  },
+  children
+);
+const Heading3 = ({
+  attributes,
+  children,
+  className
+}) => /* @__PURE__ */ React__default.createElement(
+  "h3",
+  {
+    ...attributes,
+    className: classNames$1(
+      headerClasses,
+      blockClasses,
       className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h3",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-2xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    [HEADING_KEYS.h4]: ({
-      attributes,
-      editor,
-      element,
+      "text-2xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
+    )
+  },
+  children
+);
+const Heading4 = ({
+  attributes,
+  children,
+  className
+}) => /* @__PURE__ */ React__default.createElement(
+  "h4",
+  {
+    ...attributes,
+    className: classNames$1(
+      headerClasses,
+      blockClasses,
       className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h4",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    /** Tailwind prose doesn't style h5 and h6 elements */
-    [HEADING_KEYS.h5]: ({
-      attributes,
-      editor,
-      element,
+      "text-xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
+    )
+  },
+  children
+);
+const headerSerifStyle = {
+  fontFamily: "'Libre Baskerville', serif",
+  fontWeight: "400"
+};
+const Heading5 = ({
+  attributes,
+  children,
+  className
+}) => /* @__PURE__ */ React__default.createElement(
+  "h5",
+  {
+    ...attributes,
+    className: classNames$1(
+      headerClasses,
+      blockClasses,
       className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h5",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-lg mb-4 last:mb-0 mt-6 first:mt-0"
-        ),
-        style: { fontFamily: "'Libre Baskerville', serif", fontWeight: "400" }
-      }
+      "text-lg mb-4 last:mb-0 mt-6 first:mt-0"
     ),
-    [HEADING_KEYS.h6]: ({
-      attributes,
-      editor,
-      element,
+    style: headerSerifStyle
+  },
+  children
+);
+const Heading6 = ({
+  attributes,
+  children,
+  className
+}) => /* @__PURE__ */ React__default.createElement(
+  "h6",
+  {
+    ...attributes,
+    className: classNames$1(
+      headerClasses,
+      blockClasses,
       className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h6",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-base mb-4 last:mb-0 mt-6 first:mt-0"
-        ),
-        style: { fontFamily: "'Libre Baskerville', serif", fontWeight: "400" }
-      }
+      "text-base mb-4 last:mb-0 mt-6 first:mt-0"
     ),
+    style: headerSerifStyle
+  },
+  children
+);
+const Components = () => {
+  return {
+    [SlashInputPlugin.key]: SlashInputElement,
+    [HEADING_KEYS.h1]: Heading1,
+    [HEADING_KEYS.h2]: Heading2,
+    [HEADING_KEYS.h3]: Heading3,
+    [HEADING_KEYS.h4]: Heading4,
+    [HEADING_KEYS.h5]: Heading5,
+    [HEADING_KEYS.h6]: Heading6,
     [ParagraphPlugin.key]: ParagraphElement,
     [BlockquotePlugin.key]: BlockquoteElement,
     [CodeBlockPlugin.key]: CodeBlockElement,
@@ -3811,15 +3808,15 @@ class Form {
             })
           };
         } else {
-          const childrenIndex = namePath.findIndex(
-            (value2) => value2 === "children"
-          );
-          const propsIndex = namePath.slice(childrenIndex).findIndex((value2) => value2 === "props") + childrenIndex;
+          const childrenIndex = namePath.indexOf("children", namePathIndex + 1);
+          const propsIndex = namePath.indexOf("props", childrenIndex + 1);
           const itemName = namePath.slice(childrenIndex, propsIndex).join(".");
           const item = getIn(value, itemName);
+          if (!item)
+            return formOrObjectField;
           const props = item.props;
           const templateString = item.name;
-          const currentPathIndex = namePathIndex + Math.max(propsIndex, 3);
+          const currentPathIndex = propsIndex;
           const isLastItem2 = currentPathIndex + 1 === namePath.length;
           const template = field.templates.find(
             (t) => t.name === templateString
@@ -3858,7 +3855,7 @@ class Form {
               formOrObjectField: template,
               values: props,
               namePath,
-              namePathIndex: namePathIndex + Math.max(4, childrenIndex + propsIndex)
+              namePathIndex: propsIndex + 1
             });
           }
           if (!template) {
@@ -10039,76 +10036,141 @@ class TinaMediaStore {
     this.setup();
     return await this.api.authProvider.isAuthenticated();
   }
+  /**
+   * Returns the current branch as a single-encoded query-param value, or
+   * an empty string when no branch is set.
+   *
+   * `this.api.branch` is already URL-encoded by `Client.setBranch()`, so we
+   * decode then re-encode here to defend against double-encoding when this
+   * value is concatenated into a URL.
+   *
+   * `Client.setBranch()` runs the constructor's `options.branch` through
+   * `encodeURIComponent` without a guard, so an unset `options.branch`
+   * lands here as the literal string `"undefined"`. We treat that and the
+   * empty case as no-branch so we don't send `?branch=undefined` to the
+   * assets-api (which would route the call to a non-existent staging path).
+   */
+  encodedBranchParam() {
+    if (!this.api.branch)
+      return "";
+    const decoded = decodeURIComponent(this.api.branch);
+    if (!decoded || decoded === "undefined")
+      return "";
+    return encodeURIComponent(decoded);
+  }
   async persist_cloud(media) {
-    const newFiles = [];
-    if (await this.isAuthenticated()) {
-      for (const item of media) {
-        let directory = item.directory;
-        if (directory == null ? void 0 : directory.endsWith("/")) {
-          directory = directory.substr(0, directory.length - 1);
-        }
-        const path = `${directory && directory !== "/" ? `${directory}/${item.file.name}` : item.file.name}`;
-        const res = await this.api.authProvider.fetchWithToken(
-          `${this.url}/upload_url/${path}`,
-          { method: "GET" }
-        );
-        if (res.status === 412) {
-          const { message = "Unexpected error generating upload url" } = await res.json();
-          throw new Error(message);
+    if (!await this.isAuthenticated()) {
+      return [];
+    }
+    const encodedBranch = this.encodedBranchParam();
+    const branchQuery = encodedBranch ? `?branch=${encodedBranch}` : "";
+    for (const item of media) {
+      let directory = item.directory;
+      if (directory == null ? void 0 : directory.endsWith("/")) {
+        directory = directory.substr(0, directory.length - 1);
+      }
+      const path = `${directory && directory !== "/" ? `${directory}/${item.file.name}` : item.file.name}`;
+      const res = await this.api.authProvider.fetchWithToken(
+        `${this.url}/upload_url/${path}${branchQuery}`,
+        { method: "GET" }
+      );
+      if (res.status === 412) {
+        const { message = "Unexpected error generating upload url" } = await res.json();
+        throw new Error(message);
+      }
+      const { signedUrl, requestId } = await res.json();
+      if (!signedUrl) {
+        throw new Error("Unexpected error generating upload url");
+      }
+      const uploadRes = await this.fetchFunction(signedUrl, {
+        method: "PUT",
+        body: item.file,
+        headers: {
+          "Content-Type": item.file.type || "application/octet-stream",
+          "Content-Length": String(item.file.size)
         }
-        const { signedUrl, requestId } = await res.json();
-        if (!signedUrl) {
-          throw new Error("Unexpected error generating upload url");
+      });
+      if (!uploadRes.ok) {
+        const xmlRes = await uploadRes.text();
+        const matches = s3ErrorRegex.exec(xmlRes);
+        console.error(xmlRes);
+        if (!matches) {
+          throw new Error("Unexpected error uploading media asset");
+        } else {
+          throw new Error(`Upload error: '${matches[2]}'`);
         }
-        const uploadRes = await this.fetchFunction(signedUrl, {
-          method: "PUT",
-          body: item.file,
-          headers: {
-            "Content-Type": item.file.type || "application/octet-stream",
-            "Content-Length": String(item.file.size)
-          }
-        });
-        if (!uploadRes.ok) {
-          const xmlRes = await uploadRes.text();
-          const matches = s3ErrorRegex.exec(xmlRes);
-          console.error(xmlRes);
-          if (!matches) {
-            throw new Error("Unexpected error uploading media asset");
+      }
+      const updateStartTime = Date.now();
+      while (true) {
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+        const { error: error2, message } = await this.api.getRequestStatus(requestId);
+        if (error2 !== void 0) {
+          if (error2) {
+            throw new Error(message);
           } else {
-            throw new Error(`Upload error: '${matches[2]}'`);
+            break;
           }
         }
-        const updateStartTime = Date.now();
-        while (true) {
-          await new Promise((resolve) => setTimeout(resolve, 1e3));
-          const { error: error2, message } = await this.api.getRequestStatus(requestId);
-          if (error2 !== void 0) {
-            if (error2) {
-              throw new Error(message);
-            } else {
-              break;
-            }
-          }
-          if (Date.now() - updateStartTime > 3e4) {
-            throw new Error("Time out waiting for upload to complete");
-          }
+        if (Date.now() - updateStartTime > 3e4) {
+          throw new Error("Time out waiting for upload to complete");
         }
-        const src = `https://assets.tina.io/${this.api.clientId}/${path}`;
-        newFiles.push({
-          directory: item.directory,
-          filename: item.file.name,
-          id: item.file.name,
-          type: "file",
-          thumbnails: {
-            "75x75": src,
-            "400x400": src,
-            "1000x1000": src
-          },
-          src
+      }
+    }
+    return this.fetchUploadedEntries(media);
+  }
+  /**
+   * Resolves the just-uploaded items to canonical `Media` entries by hitting
+   * the assets-api `list` endpoint, which is the source of truth for the
+   * `src` URL — including the staging-branch path
+   * (`__staging/<branch>/__file/...`) and the per-stage CDN host.
+   * Constructing those URLs on the client would mirror server-side branch
+   * routing and CDN-host logic, which is fragile to keep in sync.
+   *
+   * Best-effort: items not found within the first page of their directory
+   * (e.g. very large directories) are omitted from the result rather than
+   * throwing — the upload itself already succeeded.
+   */
+  async fetchUploadedEntries(media) {
+    const byDirectory = /* @__PURE__ */ new Map();
+    for (const item of media) {
+      let dir = item.directory || "";
+      while (dir.endsWith("/"))
+        dir = dir.slice(0, -1);
+      const bucket = byDirectory.get(dir) ?? [];
+      bucket.push(item);
+      byDirectory.set(dir, bucket);
+    }
+    const thumbnailSizes = [
+      { w: 75, h: 75 },
+      { w: 400, h: 400 },
+      { w: 1e3, h: 1e3 }
+    ];
+    const results = [];
+    for (const [directory, items2] of byDirectory) {
+      let listed;
+      try {
+        listed = await this.list({
+          directory,
+          limit: Math.max(100, items2.length * 4),
+          thumbnailSizes
         });
+      } catch (err) {
+        console.error("Failed to fetch canonical media entries:", err);
+        continue;
+      }
+      const found = /* @__PURE__ */ new Map();
+      for (const entry of listed.items) {
+        if (entry.type === "file") {
+          found.set(entry.filename, entry);
+        }
+      }
+      for (const item of items2) {
+        const entry = found.get(item.file.name);
+        if (entry)
+          results.push(entry);
       }
     }
-    return newFiles;
+    return results;
   }
   async persist_local(media) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -10219,8 +10281,9 @@ class TinaMediaStore {
     }
     let res;
     if (!this.isLocal) {
+      const encodedBranch = this.encodedBranchParam();
       res = await this.api.authProvider.fetchWithToken(
-        `${this.url}/list/${options.directory || ""}?limit=${options.limit || 20}${options.offset ? `&cursor=${options.offset}` : ""}`
+        `${this.url}/list/${options.directory || ""}?limit=${options.limit || 20}${options.offset ? `&cursor=${options.offset}` : ""}${encodedBranch ? `&branch=${encodedBranch}` : ""}`
       );
       if (res.status == 401) {
         throw E_UNAUTHORIZED;
@@ -10274,8 +10337,10 @@ class TinaMediaStore {
     const path = `${media.directory ? `${media.directory}/${media.filename}` : media.filename}`;
     if (!this.isLocal) {
       if (await this.isAuthenticated()) {
+        const encodedBranch = this.encodedBranchParam();
+        const branchQuery = encodedBranch ? `?branch=${encodedBranch}` : "";
         const res = await this.api.authProvider.fetchWithToken(
-          `${this.url}/${path}`,
+          `${this.url}/${path}${branchQuery}`,
           {
             method: "DELETE"
           }
@@ -12710,7 +12775,7 @@ const NavProvider = ({
 const name = "tinacms";
 const type = "module";
 const typings = "dist/index.d.ts";
-const version$1 = "3.7.6";
+const version$1 = "3.8.0";
 const main = "dist/index.js";
 const module = "./dist/index.js";
 const exports = {
@@ -12718,6 +12783,8 @@ const exports = {
   "./dist/client": "./dist/client.js",
   "./react": "./dist/react.js",
   "./dist/react": "./dist/react.js",
+  "./tina-field": "./dist/tina-field.js",
+  "./dist/tina-field": "./dist/tina-field.js",
   "./dist/rich-text": "./dist/rich-text/index.js",
   "./dist/rich-text/static": "./dist/rich-text/static.js",
   "./dist/rich-text/prism": "./dist/rich-text/prism.js"
@@ -12732,6 +12799,7 @@ const buildConfig = {
     "src/rich-text/static.tsx",
     "src/rich-text/prism.tsx",
     "src/react.tsx",
+    "src/tina-field.ts",
     {
       name: "src/client.ts",
       target: "node"
@@ -12767,6 +12835,7 @@ const dependencies = {
   "@radix-ui/react-tooltip": "catalog:",
   "@react-hook/window-size": "catalog:",
   "@tanstack/react-table": "^8.21.3",
+  "@tinacms/bridge": "workspace:*",
   "@tinacms/mdx": "workspace:*",
   "@tinacms/schema-tools": "workspace:*",
   "@tinacms/search": "workspace:*",

package/dist/react.d.ts

@@ -1,3 +1,5 @@
+import { addMetadata, hashFromQuery } from '@tinacms/bridge/metadata';
+export { addMetadata, hashFromQuery };
 export declare function useTina<T extends object>(props: {
     query: string;
     variables: object;
@@ -10,32 +12,4 @@ export declare function useTina<T extends object>(props: {
 export declare function useEditState(): {
     edit: boolean;
 };
-/**
- * Grab the field name for the given attribute
- * to signal to Tina which DOM element the field
- * is working with.
- */
-/**
- * Generate a field identifier for Tina to associate DOM elements with form fields.
- * Format: "queryId---path.to.field" or "queryId---path.to.array.index"
- */
-export declare const tinaField: <T extends {
-    _content_source?: {
-        queryId: string;
-        path: (number | string)[];
-    };
-} | Record<string, unknown> | null | undefined>(object: T, property?: keyof Omit<NonNullable<T>, "__typename" | "_sys">, index?: number) => string;
-/**
- * FIX: This function is updated to be more robust. It explicitly checks for
- * `null` and `String` objects to prevent them from being processed as
- * iterable objects, which is the root cause of the "Objects are not valid
- * as a React child" error.
- */
-export declare const addMetadata: <T extends object>(id: string, obj: T, path?: (string | number)[]) => T;
-/**
- * This is a pretty rudimentary approach to hashing the query and variables to
- * ensure we treat multiple queries on the page uniquely. It's possible
- * that we would have collisions, and I'm not sure of the likeliness but seems
- * like it'd be rare.
- */
-export declare const hashFromQuery: (input: string) => string;
+export { tinaField } from './tina-field';

package/dist/react.js

@@ -1,4 +1,8 @@
+import { hashFromQuery, addMetadata } from "@tinacms/bridge/metadata";
+import { addMetadata as addMetadata2, hashFromQuery as hashFromQuery2 } from "@tinacms/bridge/metadata";
+import { QUICK_EDIT_CSS } from "@tinacms/bridge/quick-edit-css";
 import React from "react";
+import { tinaField } from "@tinacms/bridge/tina-field";
 function useTina(props) {
   const stringifiedQuery = JSON.stringify({
     query: props.query,
@@ -53,48 +57,16 @@ function useTina(props) {
             }
           }
         }
-        if (fieldName) {
-          if (isInTinaIframe) {
-            parent.postMessage(
-              { type: "field:selected", fieldName },
-              window.location.origin
-            );
-          }
+        if (fieldName && isInTinaIframe) {
+          parent.postMessage(
+            { type: "field:selected", fieldName },
+            window.location.origin
+          );
         }
       };
       const style = document.createElement("style");
       style.type = "text/css";
-      style.textContent = `
-        [data-tina-field] {
-          outline: 2px dashed rgba(34,150,254,0.5);
-          transition: box-shadow ease-out 150ms;
-        }
-        [data-tina-field]:hover {
-          box-shadow: inset 100vi 100vh rgba(34,150,254,0.3);
-          outline: 2px solid rgba(34,150,254,1);
-          cursor: pointer;
-        }
-        [data-tina-field-overlay] {
-          outline: 2px dashed rgba(34,150,254,0.5);
-          position: relative;
-        }
-        [data-tina-field-overlay]:hover {
-          cursor: pointer;
-          outline: 2px solid rgba(34,150,254,1);
-        }
-        [data-tina-field-overlay]::after {
-          content: '';
-          position: absolute;
-          inset: 0;
-          z-index: 20;
-          transition: opacity ease-out 150ms;
-          background-color: rgba(34,150,254,0.3);
-          opacity: 0;
-        }
-        [data-tina-field-overlay]:hover::after {
-          opacity: 1;
-        }
-      `;
+      style.textContent = QUICK_EDIT_CSS;
       document.head.appendChild(style);
       document.body.classList.add("__tina-quick-editing-enabled");
       document.addEventListener("click", mouseDownHandler, true);
@@ -166,88 +138,9 @@ function useEditState() {
   }, []);
   return { edit };
 }
-const tinaField = (object, property, index) => {
-  const contentSource = object == null ? void 0 : object._content_source;
-  if (!contentSource) {
-    return "";
-  }
-  const { queryId, path } = contentSource;
-  if (!property) {
-    return `${queryId}---${path.join(".")}`;
-  }
-  const fullPath = typeof index === "number" ? [...path, property, index] : [...path, property];
-  return `${queryId}---${fullPath.join(".")}`;
-};
-const addMetadata = (id, obj, path = []) => {
-  if (obj === null) {
-    return obj;
-  }
-  if (isScalarOrUndefined(obj)) {
-    return obj;
-  }
-  if (obj instanceof String) {
-    return obj.valueOf();
-  }
-  if (Array.isArray(obj)) {
-    return obj.map(
-      (item, index) => addMetadata(id, item, [...path, index])
-    );
-  }
-  const transformedObj = {};
-  for (const [key, value] of Object.entries(obj)) {
-    const currentPath = [...path, key];
-    if ([
-      "__typename",
-      "_sys",
-      "_internalSys",
-      "_values",
-      "_internalValues",
-      "_content_source",
-      "_tina_metadata"
-    ].includes(key)) {
-      transformedObj[key] = value;
-    } else {
-      transformedObj[key] = addMetadata(id, value, currentPath);
-    }
-  }
-  if (transformedObj && typeof transformedObj === "object" && "type" in transformedObj && transformedObj.type === "root") {
-    return transformedObj;
-  }
-  return { ...transformedObj, _content_source: { queryId: id, path } };
-};
-function isScalarOrUndefined(value) {
-  const type = typeof value;
-  if (type === "string")
-    return true;
-  if (type === "number")
-    return true;
-  if (type === "boolean")
-    return true;
-  if (type === "undefined")
-    return true;
-  if (value == null)
-    return true;
-  if (value instanceof String)
-    return true;
-  if (value instanceof Number)
-    return true;
-  if (value instanceof Boolean)
-    return true;
-  return false;
-}
-const hashFromQuery = (input) => {
-  let hash = 0;
-  for (let i = 0; i < input.length; i++) {
-    const char = input.charCodeAt(i);
-    hash = (hash << 5) - hash + char & 4294967295;
-  }
-  const nonNegativeHash = Math.abs(hash);
-  const alphanumericHash = nonNegativeHash.toString(36);
-  return alphanumericHash;
-};
 export {
-  addMetadata,
-  hashFromQuery,
+  addMetadata2 as addMetadata,
+  hashFromQuery2 as hashFromQuery,
   tinaField,
   useEditState,
   useTina

package/dist/tina-field.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Re-export of the canonical `tinaField` helper from `@tinacms/bridge`.
+ * Kept here so `tinacms/tina-field` consumers don't need to switch imports.
+ */
+export { tinaField } from '@tinacms/bridge/tina-field';

package/dist/tina-field.js

@@ -0,0 +1,4 @@
+import { tinaField } from "@tinacms/bridge/tina-field";
+export {
+  tinaField
+};

package/dist/toolkit/core/media-store.default.d.ts

@@ -1,5 +1,5 @@
-import { Media, MediaStore, MediaUploadOptions, MediaList, MediaListOptions } from './media';
 import { CMS } from './cms';
+import { Media, MediaList, MediaListOptions, MediaStore, MediaUploadOptions } from './media';
 export declare class DummyMediaStore implements MediaStore {
     accept: string;
     persist(files: MediaUploadOptions[]): Promise<Media[]>;
@@ -35,7 +35,35 @@ export declare class TinaMediaStore implements MediaStore {
     isAuthenticated(): Promise<boolean>;
     accept: string;
     maxSize: number;
+    /**
+     * Returns the current branch as a single-encoded query-param value, or
+     * an empty string when no branch is set.
+     *
+     * `this.api.branch` is already URL-encoded by `Client.setBranch()`, so we
+     * decode then re-encode here to defend against double-encoding when this
+     * value is concatenated into a URL.
+     *
+     * `Client.setBranch()` runs the constructor's `options.branch` through
+     * `encodeURIComponent` without a guard, so an unset `options.branch`
+     * lands here as the literal string `"undefined"`. We treat that and the
+     * empty case as no-branch so we don't send `?branch=undefined` to the
+     * assets-api (which would route the call to a non-existent staging path).
+     */
+    private encodedBranchParam;
     private persist_cloud;
+    /**
+     * Resolves the just-uploaded items to canonical `Media` entries by hitting
+     * the assets-api `list` endpoint, which is the source of truth for the
+     * `src` URL — including the staging-branch path
+     * (`__staging/<branch>/__file/...`) and the per-stage CDN host.
+     * Constructing those URLs on the client would mirror server-side branch
+     * routing and CDN-host logic, which is fragile to keep in sync.
+     *
+     * Best-effort: items not found within the first page of their directory
+     * (e.g. very large directories) are omitted from the result rather than
+     * throwing — the upload itself already succeeded.
+     */
+    private fetchUploadedEntries;
     private persist_local;
     persist(media: MediaUploadOptions[]): Promise<Media[]>;
     private genThumbnail;

package/dist/toolkit/core/media.d.ts

@@ -65,6 +65,14 @@ export interface MediaStore {
      * Lists all media in a specific directory.
      */
     list(options?: MediaListOptions): Promise<MediaList>;
+    /**
+     * Reserved hook for renaming a media object in the store.
+     *
+     * Not yet implemented in `TinaMediaStore` or surfaced in `MediaManager` —
+     * declared here as an extension point so stores can begin to opt in once
+     * the corresponding assets-api endpoint is built.
+     */
+    rename?(from: string, to: string): Promise<Media>;
     /**
      * Indicates that uploads and deletions are not supported
      *

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

@@ -5,6 +5,11 @@ import { CodeLeaf } from '../../components/plate-ui/code-leaf';
 import { CodeSyntaxLeaf } from '../../components/plate-ui/code-syntax-leaf';
 import { HrElement } from '../../components/plate-ui/hr-element';
 import { LinkElement } from '../../components/plate-ui/link-element';
+type HeadingComponentProps = {
+    attributes: React.HTMLAttributes<HTMLHeadingElement>;
+    children: React.ReactNode;
+    className?: string;
+};
 export declare const Components: () => {
     [CodeLinePlugin.key]: React.ForwardRefExoticComponent<Omit<Omit<import("@udecode/plate/react").PlateElementProps<import("@udecode/plate").TElement, import("@udecode/plate").AnyPluginConfig>, keyof {
         className?: string;
@@ -34,49 +39,12 @@ export declare const Components: () => {
         className?: string;
         style?: React.CSSProperties;
     }, "ref"> & React.RefAttributes<never>>;
-    h1: ({ attributes, editor, element, className, ...props }: {
-        [x: string]: any;
-        attributes: any;
-        editor: any;
-        element: any;
-        className: any;
-    }) => React.JSX.Element;
-    h2: ({ attributes, editor, element, className, ...props }: {
-        [x: string]: any;
-        attributes: any;
-        editor: any;
-        element: any;
-        className: any;
-    }) => React.JSX.Element;
-    h3: ({ attributes, editor, element, className, ...props }: {
-        [x: string]: any;
-        attributes: any;
-        editor: any;
-        element: any;
-        className: any;
-    }) => React.JSX.Element;
-    h4: ({ attributes, editor, element, className, ...props }: {
-        [x: string]: any;
-        attributes: any;
-        editor: any;
-        element: any;
-        className: any;
-    }) => React.JSX.Element;
-    /** Tailwind prose doesn't style h5 and h6 elements */
-    h5: ({ attributes, editor, element, className, ...props }: {
-        [x: string]: any;
-        attributes: any;
-        editor: any;
-        element: any;
-        className: any;
-    }) => React.JSX.Element;
-    h6: ({ attributes, editor, element, className, ...props }: {
-        [x: string]: any;
-        attributes: any;
-        editor: any;
-        element: any;
-        className: any;
-    }) => React.JSX.Element;
+    h1: ({ attributes, children, className, }: HeadingComponentProps) => React.JSX.Element;
+    h2: ({ attributes, children, className, }: HeadingComponentProps) => React.JSX.Element;
+    h3: ({ attributes, children, className, }: HeadingComponentProps) => React.JSX.Element;
+    h4: ({ attributes, children, className, }: HeadingComponentProps) => React.JSX.Element;
+    h5: ({ attributes, children, className, }: HeadingComponentProps) => React.JSX.Element;
+    h6: ({ attributes, children, className, }: HeadingComponentProps) => React.JSX.Element;
     p: React.ForwardRefExoticComponent<Omit<Omit<import("@udecode/plate/react").PlateElementProps<import("@udecode/plate").TElement, import("@udecode/plate").AnyPluginConfig>, keyof {
         className?: string;
         style?: React.CSSProperties;
@@ -327,3 +295,4 @@ export declare const Components: () => {
         style?: React.CSSProperties;
     }, "ref"> & React.RefAttributes<never>>;
 };
+export {};

package/package.json

@@ -2,7 +2,7 @@
   "name": "tinacms",
   "type": "module",
   "typings": "dist/index.d.ts",
-  "version": "3.7.6",
+  "version": "3.8.0",
   "main": "dist/index.js",
   "module": "./dist/index.js",
   "exports": {
@@ -10,6 +10,8 @@
     "./dist/client": "./dist/client.js",
     "./react": "./dist/react.js",
     "./dist/react": "./dist/react.js",
+    "./tina-field": "./dist/tina-field.js",
+    "./dist/tina-field": "./dist/tina-field.js",
     "./dist/rich-text": "./dist/rich-text/index.js",
     "./dist/rich-text/static": "./dist/rich-text/static.js",
     "./dist/rich-text/prism": "./dist/rich-text/prism.js"
@@ -24,6 +26,7 @@
       "src/rich-text/static.tsx",
       "src/rich-text/prism.tsx",
       "src/react.tsx",
+      "src/tina-field.ts",
       {
         "name": "src/client.ts",
         "target": "node"
@@ -114,9 +117,10 @@
     "webfontloader": "1.6.28",
     "yup": "^1.6.1",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "2.1.4",
+    "@tinacms/bridge": "0.2.0",
     "@tinacms/schema-tools": "2.7.4",
-    "@tinacms/search": "1.2.13"
+    "@tinacms/mdx": "2.1.4",
+    "@tinacms/search": "1.2.14"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^10.8.1",