@tinacms/app 0.0.0-059f480-20260324232913 → 0.0.0-05c21ca-20260715013235

package/package.json

@@ -1,12 +1,22 @@
 {
   "name": "@tinacms/app",
-  "version": "0.0.0-059f480-20260324232913",
+  "version": "0.0.0-05c21ca-20260715013235",
   "main": "src/main.tsx",
+  "files": [
+    "src",
+    "index.html",
+    "favicon.svg",
+    "tsconfig.json",
+    "tsconfig.node.json"
+  ],
   "license": "Apache-2.0",
   "devDependencies": {
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
-    "typescript": "^5.7.3"
+    "happy-dom": "15.10.2",
+    "typescript": "^5.7.3",
+    "vite": "^5.4.14",
+    "vitest": "^2.1.9"
   },
   "peerDependencies": {
     "react": ">=18.3.1 <20.0.0",
@@ -23,14 +33,18 @@
     "monaco-editor": "0.31.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "6.3.0",
+    "react-router-dom": "^6.30.3",
     "typescript": "^5.7.3",
     "zod": "^3.24.2",
-    "@tinacms/mdx": "0.0.0-059f480-20260324232913",
-    "tinacms": "0.0.0-059f480-20260324232913"
+    "tinacms": "^0.0.0-05c21ca-20260715013235",
+    "@tinacms/mdx": "^0.0.0-05c21ca-20260715013235"
   },
   "repository": {
     "url": "https://github.com/tinacms/tinacms.git",
     "directory": "packages/@tinacms/app"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test-watch": "vitest"
   }
 }

package/src/index.css

@@ -13,8 +13,8 @@
   fill: currentColor;
 }
 
-.font-libre-baskerville {
-  font-family: "Libre Baskerville", serif;
+.font-inter {
+  font-family: "Inter", sans-serif;
 }
 
 body {

package/src/lib/errors.tsx

@@ -1,24 +1,27 @@
 import React from 'react';
 import { TinaCMS } from 'tinacms';
 
-const ErrorModalContent = (props: { title: string; errors: string[] }) => {
-  const { title, errors } = props;
+const TROUBLESHOOTING_URL = 'https://tina.io/docs/tinacloud/troubleshooting';
+
+const ErrorModalContent = (props: { title: string; message: string }) => {
+  const { title, message } = props;
   return (
     <>
       <div>{title}</div>
-      <ul>
-        {errors.map((error, i) => (
-          <li key={i}>{error}</li>
-        ))}
-      </ul>
+      <p>{message}</p>
+      <a href={TROUBLESHOOTING_URL} target='_blank' rel='noopener noreferrer'>
+        Try these troubleshooting tips
+      </a>
     </>
   );
 };
 
 export const showErrorModal = (
   title: string,
-  errors: string[],
+  message: string,
   cms: TinaCMS
 ) => {
-  cms.alerts.error(() => <ErrorModalContent title={title} errors={errors} />);
+  if (cms.alerts.all.some((a: { level: string }) => a.level === 'error'))
+    return;
+  cms.alerts.error(() => <ErrorModalContent title={title} message={message} />);
 };

package/src/lib/expand-query.ts

@@ -3,14 +3,17 @@ import * as G from 'graphql';
 export const expandQuery = ({
   schema,
   documentNode,
+  includeNodeMetadata,
 }: {
   schema: G.GraphQLSchema;
   documentNode: G.DocumentNode;
+  includeNodeMetadata?: boolean;
 }): G.DocumentNode => {
   const documentNodeWithTypenames = addTypenameToDocument(documentNode);
   return addMetaFieldsToQuery(
     documentNodeWithTypenames,
-    new G.TypeInfo(schema)
+    new G.TypeInfo(schema),
+    includeNodeMetadata
   );
 };
 
@@ -114,7 +117,8 @@ const addMetadataField = (
 
 const addMetaFieldsToQuery = (
   documentNode: G.DocumentNode,
-  typeInfo: G.TypeInfo
+  typeInfo: G.TypeInfo,
+  includeNodeMetadata?: boolean
 ) => {
   const addMetaFields: G.VisitFn<G.ASTNode, G.FieldNode> = (
     node: G.FieldNode
@@ -126,7 +130,11 @@ const addMetaFieldsToQuery = (
           kind: 'SelectionSet',
           selections: [],
         }),
-        selections: [...(node.selectionSet?.selections || []), ...metaFields],
+        selections: [
+          ...(node.selectionSet?.selections || []),
+          ...metaFields,
+          ...(includeNodeMetadata ? nodeMetadataFields : []),
+        ],
       },
     };
   };
@@ -218,6 +226,17 @@ const metaFields: G.SelectionNode[] =
   // @ts-ignore
   node.definitions[0].selectionSet.selections;
 
+const nodeMetadataFragment = G.parse(`
+ query Sample {
+  ...on Document {
+    _tina_metadata
+    _content_source
+  }
+ }`);
+const nodeMetadataFields: G.SelectionNode[] =
+  // @ts-ignore
+  nodeMetadataFragment.definitions[0].selectionSet.selections;
+
 export const isNodeType = (type: G.GraphQLOutputType) => {
   const namedType = G.getNamedType(type);
   if (G.isInterfaceType(namedType)) {

package/src/lib/graphql-reducer.ts

@@ -10,7 +10,6 @@ import {
   ErrorDialog,
   Form,
   FormOptions,
-  GlobalFormPlugin,
   NAMER,
   Template,
   TinaCMS,
@@ -24,6 +23,11 @@ import { z } from 'zod';
 import { FormifyCallback, createForm, createGlobalForm } from './build-form';
 import { showErrorModal } from './errors';
 import { expandQuery, isConnectionType, isNodeType } from './expand-query';
+import {
+  getExpectedPreviewOrigin,
+  isFromTrustedPreviewOrigin,
+  postMessageToPreview,
+} from './preview-origin';
 import type {
   Payload,
   PostMessage,
@@ -190,9 +194,23 @@ export const useGraphQLReducer = (
     ResolvedDocument[]
   >([]);
   const [operationIndex, setOperationIndex] = React.useState(0);
+  // Pending `user-select-form` request whose form hasn't been built yet.
+  // Set when the bridge's `open` is still in flight (the bridge retries
+  // user-select-form but stops once it sees `updateData`, so we can't
+  // rely on a future message landing after `forms:add` resolves).
+  const [pendingPrimaryId, setPendingPrimaryId] = React.useState<string | null>(
+    null
+  );
 
   const activeField = searchParams.get('active-field');
 
+  // Origin of the preview document we load in the iframe. Used to validate
+  // inbound messages and as the explicit `targetOrigin` for outbound ones.
+  const expectedOrigin = React.useMemo(
+    () => getExpectedPreviewOrigin(url),
+    [url]
+  );
+
   React.useEffect(() => {
     const run = async () => {
       return Promise.all(
@@ -476,11 +494,15 @@ export const useGraphQLReducer = (
             });
           }
         }
-        iframe.current?.contentWindow?.postMessage({
-          type: 'updateData',
-          id: payload.id,
-          data: result.data,
-        });
+        postMessageToPreview(
+          iframe.current?.contentWindow,
+          {
+            type: 'updateData',
+            id: payload.id,
+            data: result.data,
+          },
+          expectedOrigin
+        );
       }
       cms.dispatch({
         type: 'form-lists:add',
@@ -495,16 +517,47 @@ export const useGraphQLReducer = (
     [
       resolvedDocuments.map((doc) => doc._internalSys.path).join('.'),
       activeField,
+      expectedOrigin,
     ]
   );
 
+  // The bridge sends `formId` keyed by query id (hashFromQuery output), but
+  // `state.forms` is keyed by document path. Match by either so callers using
+  // `useTina`'s `experimental___selectFormByFormId` (which usually returns a
+  // path) keep working too. Returns false when the form isn't built yet.
+  const activateFormByWireId = React.useCallback(
+    (wireId: string): boolean => {
+      const match = cms.state.forms.find(
+        ({ tinaForm }) =>
+          tinaForm.id === wireId || tinaForm.queries.includes(wireId)
+      );
+      if (!match) return false;
+      cms.dispatch({
+        type: 'forms:set-active-form-id',
+        value: match.tinaForm.id,
+      });
+      return true;
+    },
+    [cms]
+  );
+
   const handleMessage = React.useCallback(
     (event: MessageEvent<PostMessage>) => {
+      // Validate the sender before reading `event.data`: only the preview
+      // iframe we loaded is trusted to drive the reducer.
+      if (
+        !isFromTrustedPreviewOrigin({
+          event,
+          expectedOrigin,
+          peerWindow: iframe.current?.contentWindow,
+        })
+      ) {
+        return;
+      }
       if (event.data.type === 'user-select-form') {
-        cms.dispatch({
-          type: 'forms:set-active-form-id',
-          value: event.data.formId,
-        });
+        const incoming = event.data.formId;
+        // Buffer until `forms:add` resolves it if the form isn't built yet.
+        setPendingPrimaryId(activateFormByWireId(incoming) ? null : incoming);
       }
 
       if (event?.data?.type === 'quick-edit') {
@@ -512,15 +565,23 @@ export const useGraphQLReducer = (
           type: 'set-quick-editing-supported',
           value: event.data.value,
         });
-        iframe.current?.contentWindow?.postMessage({
-          type: 'quickEditEnabled',
-          value: cms.state.sidebarDisplayState === 'open',
-        });
+        postMessageToPreview(
+          iframe.current?.contentWindow,
+          {
+            type: 'quickEditEnabled',
+            value: cms.state.sidebarDisplayState === 'open',
+          },
+          expectedOrigin
+        );
       }
       if (event?.data?.type === 'isEditMode') {
-        iframe?.current?.contentWindow?.postMessage({
-          type: 'tina:editMode',
-        });
+        postMessageToPreview(
+          iframe.current?.contentWindow,
+          {
+            type: 'tina:editMode',
+          },
+          expectedOrigin
+        );
       }
       if (event.data.type === 'field:selected') {
         const [queryId, eventFieldName] = event.data.fieldName.split('---');
@@ -571,7 +632,7 @@ export const useGraphQLReducer = (
       //   });
       // }
     },
-    [cms, JSON.stringify(results)]
+    [cms, JSON.stringify(results), expectedOrigin]
   );
 
   React.useEffect(() => {
@@ -586,17 +647,30 @@ export const useGraphQLReducer = (
     return () => {
       setPayloads([]);
       setResults([]);
+      setPendingPrimaryId(null);
       cms.removeAllForms();
       cms.dispatch({ type: 'form-lists:clear' });
     };
   }, [url]);
 
+  // Drain a buffered `user-select-form` once the matching form lands in
+  // `state.forms`. Watches `forms.length` rather than the array identity
+  // so the effect doesn't re-run on unrelated form mutations.
   React.useEffect(() => {
-    iframe.current?.contentWindow?.postMessage({
-      type: 'quickEditEnabled',
-      value: cms.state.sidebarDisplayState === 'open',
-    });
-  }, [cms.state.sidebarDisplayState]);
+    if (!pendingPrimaryId) return;
+    if (activateFormByWireId(pendingPrimaryId)) setPendingPrimaryId(null);
+  }, [cms.state.forms.length, pendingPrimaryId, activateFormByWireId]);
+
+  React.useEffect(() => {
+    postMessageToPreview(
+      iframe.current?.contentWindow,
+      {
+        type: 'quickEditEnabled',
+        value: cms.state.sidebarDisplayState === 'open',
+      },
+      expectedOrigin
+    );
+  }, [cms.state.sidebarDisplayState, expectedOrigin]);
 
   React.useEffect(() => {
     cms.dispatch({ type: 'set-edit-mode', value: 'visual' });
@@ -613,7 +687,12 @@ export const useGraphQLReducer = (
 
   React.useEffect(() => {
     if (requestErrors.length) {
-      showErrorModal('Unexpected error querying content', requestErrors, cms);
+      console.error('Unexpected error querying content:', requestErrors);
+      showErrorModal(
+        'Unexpected Error',
+        'We ran into an unexpected error while fetching your content. If after refreshing the issue persists, reach out to us on Discord.',
+        cms
+      );
     }
   }, [requestErrors]);
 };
@@ -902,6 +981,7 @@ const expandPayload = async (
   const expandedDocumentNodeForResolver = expandQuery({
     schema: schemaForResolver,
     documentNode,
+    includeNodeMetadata: true,
   });
   const expandedQueryForResolver = G.print(expandedDocumentNodeForResolver);
   return { ...payload, expandedQuery, expandedData, expandedQueryForResolver };
@@ -1000,10 +1080,14 @@ const buildForm = ({
     }
   }
   if (form) {
+    // Track the payload (query) id on the form so wire-side lookups —
+    // notably `user-select-form`, which the bridge sends keyed by query
+    // id — can resolve to the document-path-keyed `form.id` used in
+    // `state.forms`. `addQuery` is otherwise only called on the second
+    // open for the same document (see the `existingForm` branch above),
+    // so without this the very first open leaves `form.queries` empty.
+    form.addQuery(payloadId);
     if (shouldRegisterForm) {
-      if (collection.ui?.global) {
-        cms.plugins.add(new GlobalFormPlugin(form));
-      }
       cms.dispatch({ type: 'forms:add', value: form });
     }
   }

package/src/lib/preview-origin.test.ts

@@ -0,0 +1,147 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+  getExpectedPreviewOrigin,
+  isFromTrustedPreviewOrigin,
+  postMessageToPreview,
+} from './preview-origin';
+
+const ADMIN = 'https://admin.example';
+const PREVIEW = 'https://preview.example';
+
+// A stand-in for the iframe's content window; we only need an identity to
+// compare `event.source` against.
+const makePeerWindow = () =>
+  ({ postMessage: vi.fn() }) as unknown as Window & {
+    postMessage: ReturnType<typeof vi.fn>;
+  };
+
+describe('getExpectedPreviewOrigin', () => {
+  it('resolves a relative admin URL to the admin origin', () => {
+    expect(getExpectedPreviewOrigin('/posts/hello', ADMIN)).toBe(ADMIN);
+  });
+
+  it('keeps the origin of an absolute preview URL', () => {
+    expect(getExpectedPreviewOrigin(`${PREVIEW}/posts/hello`, ADMIN)).toBe(
+      PREVIEW
+    );
+  });
+});
+
+describe('isFromTrustedPreviewOrigin', () => {
+  it('ignores messages from an untrusted origin', () => {
+    const peerWindow = makePeerWindow();
+    const event = {
+      origin: 'https://evil.example',
+      source: peerWindow,
+      data: { type: 'open' },
+    } as unknown as MessageEvent;
+
+    expect(
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow,
+      })
+    ).toBe(false);
+  });
+
+  it('accepts messages from the trusted origin and peer window', () => {
+    const peerWindow = makePeerWindow();
+    const event = {
+      origin: PREVIEW,
+      source: peerWindow,
+      data: { type: 'open' },
+    } as unknown as MessageEvent;
+
+    expect(
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow,
+      })
+    ).toBe(true);
+  });
+
+  it('ignores the trusted origin from the wrong source window', () => {
+    const peerWindow = makePeerWindow();
+    const otherFrame = makePeerWindow();
+    const event = {
+      origin: PREVIEW,
+      source: otherFrame,
+      data: { type: 'open' },
+    } as unknown as MessageEvent;
+
+    expect(
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow,
+      })
+    ).toBe(false);
+  });
+
+  it('does not read event.data before validating the origin', () => {
+    const peerWindow = makePeerWindow();
+    const event = {
+      origin: 'https://evil.example',
+      source: peerWindow,
+      // Reading `data` would throw — proves the guard never touches the
+      // payload when the origin is untrusted.
+      get data(): unknown {
+        throw new Error('event.data must not be read before origin validation');
+      },
+    } as unknown as MessageEvent;
+
+    expect(() =>
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow,
+      })
+    ).not.toThrow();
+    expect(
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow,
+      })
+    ).toBe(false);
+  });
+
+  it('falls back to origin-only when no peer window handle is available', () => {
+    const event = {
+      origin: PREVIEW,
+      source: makePeerWindow(),
+      data: { type: 'open' },
+    } as unknown as MessageEvent;
+
+    expect(
+      isFromTrustedPreviewOrigin({
+        event,
+        expectedOrigin: PREVIEW,
+        peerWindow: null,
+      })
+    ).toBe(true);
+  });
+});
+
+describe('postMessageToPreview', () => {
+  it('posts with the exact expected targetOrigin, not a wildcard', () => {
+    const peerWindow = makePeerWindow();
+    const message = { type: 'updateData', id: 'q1', data: {} };
+
+    postMessageToPreview(peerWindow, message, PREVIEW);
+
+    expect(peerWindow.postMessage).toHaveBeenCalledWith(message, PREVIEW);
+    expect(peerWindow.postMessage).not.toHaveBeenCalledWith(
+      expect.anything(),
+      '*'
+    );
+  });
+
+  it('no-ops when there is no peer window', () => {
+    expect(() =>
+      postMessageToPreview(null, { type: 'updateData' }, PREVIEW)
+    ).not.toThrow();
+  });
+});

package/src/lib/preview-origin.ts

@@ -0,0 +1,61 @@
+/**
+ * Utilities for securing the admin <-> preview iframe postMessage channel.
+ *
+ * The trusted peer is the preview iframe loaded by the admin. Messages are only
+ * trusted when they match the expected preview origin and, when available, the
+ * iframe's exact `contentWindow`.
+ */
+
+/**
+ * Returns the origin expected for the preview iframe.
+ *
+ * Relative URLs resolve against `baseOrigin`; absolute URLs keep their own
+ * origin.
+ */
+export const getExpectedPreviewOrigin = (
+  url: string,
+  baseOrigin: string = typeof window !== 'undefined'
+    ? window.location.origin
+    : ''
+): string => {
+  try {
+    return new URL(url, baseOrigin || undefined).origin;
+  } catch {
+    return baseOrigin;
+  }
+};
+
+/**
+ * Checks whether a MessageEvent came from the trusted preview iframe.
+ *
+ * `event.data` is intentionally not read here, so callers can run this check
+ * before trusting the payload.
+ */
+export const isFromTrustedPreviewOrigin = ({
+  event,
+  expectedOrigin,
+  peerWindow,
+}: {
+  event: MessageEvent;
+  expectedOrigin: string;
+  peerWindow: Window | null | undefined;
+}): boolean => {
+  if (!expectedOrigin) return false;
+  if (event.origin !== expectedOrigin) return false;
+  if (peerWindow && event.source !== peerWindow) return false;
+  return true;
+};
+
+/**
+ * Sends a message to the preview iframe with a strict target origin.
+ *
+ * No-ops when the iframe window or origin is missing, and never uses `"*"`.
+ */
+export const postMessageToPreview = (
+  peerWindow: Window | null | undefined,
+  message: unknown,
+  expectedOrigin: string
+): void => {
+  if (!peerWindow || !expectedOrigin) return;
+  peerWindow.postMessage(message, expectedOrigin);
+};

package/src/lib/util.ts

@@ -93,9 +93,10 @@ export const getDeepestMetadata = (state: Object, complexKey: string): any => {
     }
     const value = current[key];
     if (value?._tina_metadata) {
-      // We're at a reference field, we don't want to select the
-      // reference form, just the reference select field
-      if (complexKey === value._tina_metadata?.prefix && metadata) {
+      if (value._tina_metadata.id === null) {
+        // Placeholder metadata from connection/list types — skip it
+      } else if (complexKey === value._tina_metadata?.prefix && metadata) {
+        // Reference field — keep the parent form's metadata
       } else {
         metadata = value._tina_metadata;
       }