@decocms/nextjs 8.13.0 → 8.15.0

package/README.md

@@ -130,7 +130,7 @@ import { StudioBridge } from "@decocms/nextjs";
 </body>
 ```
 
-Studio's origins are the package's own (`STUDIO_ORIGINS`), so the bridge takes only the site's name. v7's "." edit shortcut is on by default (`editShortcut={false}` turns it off), and `nonce` is optional.
+Studio's origins are the package's own, so the bridge takes only the site's name. v7's "." edit shortcut is on by default (`editShortcut={false}` turns it off), and `nonce` is optional. The bridge is v8 only: v7's framed handler (`scrollToComponent`, `editor::rerender`) is gone, so no script on the page compares the window with `top` or `parent`, and a test runner that rewrites "frame-busting" code in the HTML it proxies (Cypress's `modifyObstructiveCode`) serves the page byte for byte.
 
 The bridge also mounts the Studio channel on every page, production included: a small inline script (about 0.7 kB gzipped) through which Studio loads its own editor code (the section wireframe, the page swap after a save) into the page when it frames it. It is the only way Studio runs code in the page: the bridge evaluates no script Studio sends. The page trusts a list of exact Studio origins: `studioOrigins` when given, else the `DECO_STUDIO_ORIGIN` environment variable, comma-separated (a local Studio, such as `http://localhost:3000`), else Studio's production and staging origins (`DEFAULT_STUDIO_ORIGINS`). Framed, the page posts `{ type: "deco:ready" }` with each of them as the target origin (only a parent at one of them receives it) and imports a module only when Studio's answer, `{ type: "deco:load", url }`, comes from exactly one of them and names a URL on the origin of that message; not framed, or framed by any other origin, it does nothing. A site with a Content Security Policy passes it through `withStudioCsp(directives)`, which adds the same list to `script-src` (and a `frame-ancestors` with Studio's, when the policy has none): `headers: [{ source: "/:path*", headers: [{ key: "Content-Security-Policy", value: withStudioCsp("script-src 'self' 'unsafe-inline'; object-src 'none'").join("; ") }] }]`, or the same in the site's proxy. The inline scripts take the site's `nonce`. The message and module types are in `@decocms/blocks/protocol`.
 

package/dist/StudioBridge.d.ts

@@ -1,18 +1,40 @@
 /**
- * `StudioBridge` of `@decocms/blocks/preview` with Studio's origins filled in
- * (`STUDIO_ORIGINS`, `./studio.ts`): the package owns where Studio runs, so a
- * site passes only its name. With it, the Studio channel (`StudioChannel`):
- * on every page, production included, framed by one of Studio's origins
- * (`studioOrigins` / `DECO_STUDIO_ORIGIN` / Studio's production and staging
- * origins, each exact) it loads the editor's own modules from that origin;
- * otherwise it does nothing. Two inline scripts and no hooks, so a Server
- * Component renders it as is. The site's CSP allows the same origins with
- * `withStudioCsp`.
+ * What a Next.js site renders for Deco Studio's site editor: the Studio
+ * channel (`StudioChannel` of `@decocms/blocks/preview`) and v7's "." edit
+ * shortcut (`./studioShortcut.ts`). On every page, production included,
+ * framed by one of Studio's origins (`studioOrigins` / `DECO_STUDIO_ORIGIN` /
+ * Studio's production and staging origins, each exact), the channel loads
+ * the editor's own modules from that origin; otherwise it does nothing. Not
+ * framed, "." opens the page in Studio's editor.
+ *
+ * v8 only: v7's framed handler (`scrollToComponent`, `editor::rerender`) is
+ * gone, so no script on the page compares the window with `top` or `parent`
+ * in a form a test runner's "frame-busting" rewrite matches (Cypress's
+ * `modifyObstructiveCode`, which would change the length of the React Server
+ * Components payload that carries the script). Two inline scripts and no
+ * hooks, so a Server Component renders it as is. The site's CSP allows the
+ * same origins with `withStudioCsp`.
  */
-import { type StudioBridgeProps as BridgeScriptProps } from "@decocms/blocks/preview";
+import { type StudioPageInfo } from "@decocms/blocks/preview";
 import { type ReactNode } from "react";
-/** `site`, and optionally `editShortcut`, `page` and `nonce`; Studio's origins are the package's. */
-export interface StudioBridgeProps extends Omit<BridgeScriptProps, "trustedOrigins"> {
+/** `site`, and optionally `editShortcut`, `page`, `nonce` and `studioOrigins`. */
+export interface StudioBridgeProps {
+    /** The site's name in Deco (the "." shortcut sends it to Studio). */
+    site: string;
+    /**
+     * v7's editor shortcut: on a page that isn't framed, "." (or Ctrl+Shift+E)
+     * opens it in Studio, and Ctrl or Cmd+"." opens it in a new tab. On by
+     * default, as in v7; `false` turns it off.
+     */
+    editShortcut?: boolean;
+    /**
+     * The page being shown, when the layout knows it: the "." shortcut sends
+     * its path template (and id). A `StudioPage` rendered by the page wins (a
+     * Next.js root layout doesn't re-render per page).
+     */
+    page?: StudioPageInfo;
+    /** The CSP nonce for the inline scripts, when the site sends one. */
+    nonce?: string;
     /**
      * The Studio origins the Studio channel trusts, each an exact origin.
      * Default: `DECO_STUDIO_ORIGIN` (comma-separated), else Studio's production
@@ -23,7 +45,8 @@ export interface StudioBridgeProps extends Omit<BridgeScriptProps, "trustedOrigi
 }
 /**
  * Lets Studio's site editor select and edit sections on the page when Studio
- * frames it. Render it once, in the root layout's `<body>`.
+ * frames it, and "." open the page in Studio when it doesn't. Render it once,
+ * in the root layout's `<body>`.
  */
-export declare function StudioBridge({ studioOrigins: origins, ...props }: StudioBridgeProps): ReactNode;
+export declare function StudioBridge({ site, editShortcut, page, nonce, studioOrigins: origins, }: StudioBridgeProps): ReactNode;
 //# sourceMappingURL=StudioBridge.d.ts.map

package/dist/StudioBridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StudioBridge.d.ts","sourceRoot":"","sources":["../src/StudioBridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAEL,KAAK,iBAAiB,IAAI,iBAAiB,EAE5C,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhE,qGAAqG;AACrG,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC;IAClF;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACnC;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,GAAG,SAAS,CAO/F"}
+{"version":3,"file":"StudioBridge.d.ts","sourceRoot":"","sources":["../src/StudioBridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE,kFAAkF;AAClF,MAAM,WAAW,iBAAiB;IAChC,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACnC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,aAAa,EAAE,OAAO,GACvB,EAAE,iBAAiB,GAAG,SAAS,CAO/B"}

package/dist/StudioBridge.js

@@ -1,22 +1,30 @@
 /**
- * `StudioBridge` of `@decocms/blocks/preview` with Studio's origins filled in
- * (`STUDIO_ORIGINS`, `./studio.ts`): the package owns where Studio runs, so a
- * site passes only its name. With it, the Studio channel (`StudioChannel`):
- * on every page, production included, framed by one of Studio's origins
- * (`studioOrigins` / `DECO_STUDIO_ORIGIN` / Studio's production and staging
- * origins, each exact) it loads the editor's own modules from that origin;
- * otherwise it does nothing. Two inline scripts and no hooks, so a Server
- * Component renders it as is. The site's CSP allows the same origins with
- * `withStudioCsp`.
+ * What a Next.js site renders for Deco Studio's site editor: the Studio
+ * channel (`StudioChannel` of `@decocms/blocks/preview`) and v7's "." edit
+ * shortcut (`./studioShortcut.ts`). On every page, production included,
+ * framed by one of Studio's origins (`studioOrigins` / `DECO_STUDIO_ORIGIN` /
+ * Studio's production and staging origins, each exact), the channel loads
+ * the editor's own modules from that origin; otherwise it does nothing. Not
+ * framed, "." opens the page in Studio's editor.
+ *
+ * v8 only: v7's framed handler (`scrollToComponent`, `editor::rerender`) is
+ * gone, so no script on the page compares the window with `top` or `parent`
+ * in a form a test runner's "frame-busting" rewrite matches (Cypress's
+ * `modifyObstructiveCode`, which would change the length of the React Server
+ * Components payload that carries the script). Two inline scripts and no
+ * hooks, so a Server Component renders it as is. The site's CSP allows the
+ * same origins with `withStudioCsp`.
  */
-import { StudioBridge as BridgeScript, StudioChannel, } from "@decocms/blocks/preview";
+import { StudioChannel } from "@decocms/blocks/preview";
 import { createElement, Fragment } from "react";
-import { STUDIO_ORIGINS, studioOrigins } from "./studio.js";
+import { studioOrigins } from "./studio.js";
+import { StudioShortcut } from "./studioShortcut.js";
 /**
  * Lets Studio's site editor select and edit sections on the page when Studio
- * frames it. Render it once, in the root layout's `<body>`.
+ * frames it, and "." open the page in Studio when it doesn't. Render it once,
+ * in the root layout's `<body>`.
  */
-export function StudioBridge({ studioOrigins: origins, ...props }) {
-    return createElement(Fragment, null, createElement(BridgeScript, { ...props, trustedOrigins: STUDIO_ORIGINS }), createElement(StudioChannel, { studioOrigins: studioOrigins(origins), nonce: props.nonce }));
+export function StudioBridge({ site, editShortcut, page, nonce, studioOrigins: origins, }) {
+    return createElement(Fragment, null, createElement(StudioShortcut, { site, editShortcut, page, nonce }), createElement(StudioChannel, { studioOrigins: studioOrigins(origins), nonce }));
 }
 //# sourceMappingURL=StudioBridge.js.map

package/dist/StudioBridge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StudioBridge.js","sourceRoot":"","sources":["../src/StudioBridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EACL,YAAY,IAAI,YAAY,EAE5B,aAAa,GACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAa5D;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,KAAK,EAAqB;IAClF,OAAO,aAAa,CAClB,QAAQ,EACR,IAAI,EACJ,aAAa,CAAC,YAAY,EAAE,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC,EACzE,aAAa,CAAC,aAAa,EAAE,EAAE,aAAa,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAC5F,CAAC;AACJ,CAAC"}
+{"version":3,"file":"StudioBridge.js","sourceRoot":"","sources":["../src/StudioBridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,aAAa,EAAuB,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA6BrD;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,aAAa,EAAE,OAAO,GACJ;IAClB,OAAO,aAAa,CAClB,QAAQ,EACR,IAAI,EACJ,aAAa,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAClE,aAAa,CAAC,aAAa,EAAE,EAAE,aAAa,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,CAC/E,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -5,12 +5,11 @@
  * - `DraftPreviewIndicator`: the "Preview mode" badge on a page rendered from
  *   a draft (`bindDraft` from `@decocms/nextjs/server`), outside Studio's frame.
  * - `StudioBridge`: one line in the root layout, `<StudioBridge site="my-store" />`,
- *   lets Studio's site editor drive the page when Studio frames it
- *   (`@decocms/blocks/preview`'s, answering `STUDIO_ORIGINS`). It renders an
- *   inline script with no React hooks, so a Server Component renders it as is.
- *   Outside Studio's frame, "." opens the page in Studio's editor. It also
- *   mounts the Studio channel (`StudioChannel`), through which Studio loads its
- *   own modules into the page when it frames it (`studioOrigins`).
+ *   lets Studio's site editor drive the page when Studio frames it: it mounts
+ *   the Studio channel (`StudioChannel` of `@decocms/blocks/preview`), through
+ *   which Studio loads its own modules into the page (`studioOrigins`).
+ *   Outside Studio's frame, "." opens the page in Studio's editor. Two inline
+ *   scripts with no React hooks, so a Server Component renders it as is.
  * - `StudioPage`: rendered inside each CMS page, `<StudioPage pathTemplate={page.path} />`,
  *   tells the bridge which page "." opens (the root layout doesn't re-render per page).
  * - `DRAFT_PARAM`, `DRAFT_COOKIE`, `VERSION_HEADER`, `draftResponseHeaders`,

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,KAAK,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EACL,sBAAsB,EACtB,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,KAAK,gBAAgB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EACL,sBAAsB,EACtB,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -5,12 +5,11 @@
  * - `DraftPreviewIndicator`: the "Preview mode" badge on a page rendered from
  *   a draft (`bindDraft` from `@decocms/nextjs/server`), outside Studio's frame.
  * - `StudioBridge`: one line in the root layout, `<StudioBridge site="my-store" />`,
- *   lets Studio's site editor drive the page when Studio frames it
- *   (`@decocms/blocks/preview`'s, answering `STUDIO_ORIGINS`). It renders an
- *   inline script with no React hooks, so a Server Component renders it as is.
- *   Outside Studio's frame, "." opens the page in Studio's editor. It also
- *   mounts the Studio channel (`StudioChannel`), through which Studio loads its
- *   own modules into the page when it frames it (`studioOrigins`).
+ *   lets Studio's site editor drive the page when Studio frames it: it mounts
+ *   the Studio channel (`StudioChannel` of `@decocms/blocks/preview`), through
+ *   which Studio loads its own modules into the page (`studioOrigins`).
+ *   Outside Studio's frame, "." opens the page in Studio's editor. Two inline
+ *   scripts with no React hooks, so a Server Component renders it as is.
  * - `StudioPage`: rendered inside each CMS page, `<StudioPage pathTemplate={page.path} />`,
  *   tells the bridge which page "." opens (the root layout doesn't re-render per page).
  * - `DRAFT_PARAM`, `DRAFT_COOKIE`, `VERSION_HEADER`, `draftResponseHeaders`,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAuB,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAyB,aAAa,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,EACL,qBAAqB,GAEtB,MAAM,4BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC7F,OAAO,EAAE,YAAY,EAA0B,MAAM,mBAAmB,CAAC;AACzE,OAAO,EACL,sBAAsB,EACtB,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAuB,MAAM,yBAAyB,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAyB,aAAa,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,EACL,qBAAqB,GAEtB,MAAM,4BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC7F,OAAO,EAAE,YAAY,EAA0B,MAAM,mBAAmB,CAAC;AACzE,OAAO,EACL,sBAAsB,EACtB,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,aAAa,GACd,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/studio.d.ts

@@ -1,8 +1,7 @@
 /**
  * Where Deco Studio runs: the origins its site editor frames a site from and
- * talks to it from (`postMessage`). One list, so the Studio bridge
- * (`StudioBridge`), `withDeco()`'s dev origins and a site's own
- * `frame-ancestors` never drift apart. This package's own copy: it never
+ * talks to it from (`postMessage`). One list, so `withDeco()`'s dev origins
+ * and a site's own `frame-ancestors` never drift apart. This package's own copy: it never
  * imports `@decocms/tanstack`.
  *
  * No module state and no framework code: safe in a browser bundle.

package/dist/studio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"studio.d.ts","sourceRoot":"","sources":["../src/studio.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,MAAM,EAK1C,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,EAAE,SAAS,MAAM,EAIlD,CAAC;AAEH,kCAAkC;AAClC,eAAO,MAAM,aAAa,+BAA+B,CAAC;AAE1D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,SAAS,MAAM,EAGlD,CAAC;AAkBH;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,MAAM,EAAE,CAK3E;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAazE"}
+{"version":3,"file":"studio.d.ts","sourceRoot":"","sources":["../src/studio.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,MAAM,EAK1C,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,EAAE,SAAS,MAAM,EAIlD,CAAC;AAEH,kCAAkC;AAClC,eAAO,MAAM,aAAa,+BAA+B,CAAC;AAE1D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,SAAS,MAAM,EAGlD,CAAC;AAkBH;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,MAAM,EAAE,CAK3E;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAazE"}

package/dist/studio.js

@@ -1,8 +1,7 @@
 /**
  * Where Deco Studio runs: the origins its site editor frames a site from and
- * talks to it from (`postMessage`). One list, so the Studio bridge
- * (`StudioBridge`), `withDeco()`'s dev origins and a site's own
- * `frame-ancestors` never drift apart. This package's own copy: it never
+ * talks to it from (`postMessage`). One list, so `withDeco()`'s dev origins
+ * and a site's own `frame-ancestors` never drift apart. This package's own copy: it never
  * imports `@decocms/tanstack`.
  *
  * No module state and no framework code: safe in a browser bundle.

package/dist/studio.js.map

@@ -1 +1 @@
-{"version":3,"file":"studio.js","sourceRoot":"","sources":["../src/studio.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAsB,MAAM,CAAC,MAAM,CAAC;IAC7D,4BAA4B;IAC5B,gCAAgC;IAChC,qBAAqB;IACrB,uBAAuB;CACxB,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAsB,MAAM,CAAC,MAAM,CAAC;IACrE,QAAQ;IACR,GAAG,cAAc;IACjB,uBAAuB;CACxB,CAAC,CAAC;AAEH,kCAAkC;AAClC,MAAM,CAAC,MAAM,aAAa,GAAG,4BAA4B,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAsB,MAAM,CAAC,MAAM,CAAC;IACrE,aAAa;IACb,gCAAgC;CACjC,CAAC,CAAC;AAEH,gHAAgH;AAChH,SAAS,QAAQ,CAAC,KAAc;IAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,EAAE,CAAC;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC7B,IAAI,CAAC;QACH,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,IAAI,GAAG,CAAC,QAAQ,KAAK,OAAO;YAAE,OAAO,EAAE,CAAC;QACrE,4EAA4E;QAC5E,uCAAuC;QACvC,IAAI,CAAC,kCAAkC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC;YAAE,OAAO,EAAE,CAAC;QACtE,OAAO,OAAO,KAAK,GAAG,CAAC,MAAM,IAAI,OAAO,KAAK,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAClF,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,EAAE,CAAC;IACZ,CAAC;AACH,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,aAAa,CAAC,MAA0B;IACtD,MAAM,GAAG,GAAI,UAAyE,CAAC,OAAO;QAC5F,EAAE,GAAG,EAAE,kBAAkB,CAAC;IAC5B,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC;IAC/E,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC1D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,MAAiC;IAC9D,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,KAAK,EAAE;QAAE,OAAO,KAAK,CAAC;IAC9D,IAAI,GAAQ,CAAC;IACb,IAAI,CAAC;QACH,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;IACD,8EAA8E;IAC9E,yBAAyB;IACzB,IAAI,GAAG,CAAC,MAAM,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,IAAI,GAAG,CAAC,IAAI,KAAK,EAAE;QAAE,OAAO,KAAK,CAAC;IACxF,MAAM,IAAI,GAAG,GAAG,CAAC,QAAQ,CAAC;IAC1B,OAAO,IAAI,KAAK,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;AACjE,CAAC"}
+{"version":3,"file":"studio.js","sourceRoot":"","sources":["../src/studio.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAsB,MAAM,CAAC,MAAM,CAAC;IAC7D,4BAA4B;IAC5B,gCAAgC;IAChC,qBAAqB;IACrB,uBAAuB;CACxB,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAsB,MAAM,CAAC,MAAM,CAAC;IACrE,QAAQ;IACR,GAAG,cAAc;IACjB,uBAAuB;CACxB,CAAC,CAAC;AAEH,kCAAkC;AAClC,MAAM,CAAC,MAAM,aAAa,GAAG,4BAA4B,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAsB,MAAM,CAAC,MAAM,CAAC;IACrE,aAAa;IACb,gCAAgC;CACjC,CAAC,CAAC;AAEH,gHAAgH;AAChH,SAAS,QAAQ,CAAC,KAAc;IAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,EAAE,CAAC;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC7B,IAAI,CAAC;QACH,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,IAAI,GAAG,CAAC,QAAQ,KAAK,OAAO;YAAE,OAAO,EAAE,CAAC;QACrE,4EAA4E;QAC5E,uCAAuC;QACvC,IAAI,CAAC,kCAAkC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC;YAAE,OAAO,EAAE,CAAC;QACtE,OAAO,OAAO,KAAK,GAAG,CAAC,MAAM,IAAI,OAAO,KAAK,GAAG,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAClF,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,EAAE,CAAC;IACZ,CAAC;AACH,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,aAAa,CAAC,MAA0B;IACtD,MAAM,GAAG,GAAI,UAAyE,CAAC,OAAO;QAC5F,EAAE,GAAG,EAAE,kBAAkB,CAAC;IAC5B,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC;IAC/E,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAC1D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,MAAiC;IAC9D,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,MAAM,KAAK,EAAE;QAAE,OAAO,KAAK,CAAC;IAC9D,IAAI,GAAQ,CAAC;IACb,IAAI,CAAC;QACH,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;IACD,8EAA8E;IAC9E,yBAAyB;IACzB,IAAI,GAAG,CAAC,MAAM,KAAK,MAAM,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,IAAI,GAAG,CAAC,IAAI,KAAK,EAAE;QAAE,OAAO,KAAK,CAAC;IACxF,MAAM,IAAI,GAAG,GAAG,CAAC,QAAQ,CAAC;IAC1B,OAAO,IAAI,KAAK,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;AACjE,CAAC"}

package/dist/studioShortcut.d.ts

@@ -0,0 +1,52 @@
+/**
+ * v7's "." edit shortcut, alone: on a page that isn't framed, "." (or
+ * Ctrl+Shift+E) opens the page in Studio's editor (`/choose-editor`, which
+ * signs a visitor who isn't signed in in first), and Ctrl or Cmd+"." opens it
+ * in a new tab. In a frame it does nothing: Studio's editor reaches a framed
+ * page through the Studio channel (`StudioChannel`) only.
+ *
+ * Safe under a test runner that rewrites "frame-busting" code in the HTML it
+ * proxies (Cypress's `modifyObstructiveCode`): the script compares no window
+ * with `top` or `parent` in a form those rewrites match, so the HTML reaches
+ * the browser byte for byte (a rewrite changes the length of a React Server
+ * Components payload that carries the script and breaks the page).
+ *
+ * A key typed in a field is left alone, also in a field inside an open shadow
+ * root (a third-party widget's form): its events reach the document with the
+ * host as their target, so the script reads the field from the event's
+ * composed path.
+ *
+ * The page it sends: the last `StudioPage` marker the page rendered, else the
+ * `page` the binding passed, read at the keypress. An inline script with no
+ * hooks, so a Server Component renders it; its settings travel in `data-*`
+ * attributes (the same as v7's bridge's: `data-deco-studio-bridge`,
+ * `data-site`, `data-shortcut`, `data-path-template`, `data-page-id`) and the
+ * script itself is static.
+ *
+ * `@decocms/nextjs` and `@decocms/tanstack` each carry this file (neither
+ * imports the other); tests/studio-shortcut.test.ts keeps the two the same.
+ */
+import { type ReactNode } from "react";
+/** The page the "." shortcut opens in Studio. */
+interface ShortcutPage {
+    /** The page block's `path`, as `matchRoute` matched it (`/products/:slug/p`, `/*`). */
+    pathTemplate?: string;
+    /** The page block's id, when the site knows it. */
+    id?: string;
+}
+export interface StudioShortcutProps {
+    /** The site's name in Deco (the shortcut sends it to Studio). */
+    site: string;
+    /** On by default; `false` turns it off. */
+    editShortcut?: boolean;
+    /** The page on screen, when the component that renders the shortcut knows it. */
+    page?: ShortcutPage;
+    /** The CSP nonce for the inline script, when the site sends one. */
+    nonce?: string;
+}
+/** The browser side. Static: everything it needs comes from the script element's attributes. */
+export declare const STUDIO_SHORTCUT_SCRIPT = "(function(){\nvar s=document.currentScript,w=window,p=w.parent;\nif(!s||p!==w||w.__decoStudioShortcut||!s.hasAttribute(\"data-shortcut\"))return;\nw.__decoStudioShortcut=true;\nvar site=s.getAttribute(\"data-site\")||\"\";\nfunction page(){\n  var all=document.querySelectorAll(\"[data-deco-page]\"),el=all.length?all[all.length-1]:null;\n  if(!el||!el.getAttribute(\"data-path-template\")){el=document.querySelector(\"script[data-deco-studio-bridge]\")||s}\n  return{t:el.getAttribute(\"data-path-template\")||\"\",id:el.getAttribute(\"data-page-id\")||\"\"};\n}\ndocument.addEventListener(\"keydown\",function(e){\n  var t=e.composedPath?e.composedPath()[0]:e.target;\n  if(e.defaultPrevented||(t&&(t.tagName===\"INPUT\"||t.tagName===\"TEXTAREA\"||t.tagName===\"SELECT\"||t.isContentEditable)))return;\n  if(e.key!==\".\"&&!(e.ctrlKey&&e.shiftKey&&e.key===\"E\"))return;\n  e.preventDefault();\n  e.stopPropagation();\n  var g=page(),h=new URL(\"https://studio.decocms.com/choose-editor\");\n  h.searchParams.set(\"site\",site);\n  h.searchParams.set(\"domain\",location.origin);\n  if(g.id)h.searchParams.set(\"pageId\",g.id);\n  h.searchParams.set(\"path\",location.pathname+location.search);\n  h.searchParams.set(\"pathTemplate\",g.t||\"/*\");\n  if((e.ctrlKey||e.metaKey)&&e.key===\".\"){w.open(h.toString(),\"_blank\");return}\n  location.href=h.toString();\n});\n})();";
+/** The "." shortcut's script. Render it once, in the `<body>`. */
+export declare function StudioShortcut({ site, editShortcut, page, nonce, }: StudioShortcutProps): ReactNode;
+export {};
+//# sourceMappingURL=studioShortcut.d.ts.map

package/dist/studioShortcut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"studioShortcut.d.ts","sourceRoot":"","sources":["../src/studioShortcut.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,iDAAiD;AACjD,UAAU,YAAY;IACpB,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,mBAAmB;IAClC,iEAAiE;IACjE,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iFAAiF;IACjF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,gGAAgG;AAChG,eAAO,MAAM,sBAAsB,s2CAyB7B,CAAC;AAEP,kEAAkE;AAClE,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,YAAmB,EACnB,IAAI,EACJ,KAAK,GACN,EAAE,mBAAmB,GAAG,SAAS,CAejC"}

package/dist/studioShortcut.js

@@ -0,0 +1,74 @@
+/**
+ * v7's "." edit shortcut, alone: on a page that isn't framed, "." (or
+ * Ctrl+Shift+E) opens the page in Studio's editor (`/choose-editor`, which
+ * signs a visitor who isn't signed in in first), and Ctrl or Cmd+"." opens it
+ * in a new tab. In a frame it does nothing: Studio's editor reaches a framed
+ * page through the Studio channel (`StudioChannel`) only.
+ *
+ * Safe under a test runner that rewrites "frame-busting" code in the HTML it
+ * proxies (Cypress's `modifyObstructiveCode`): the script compares no window
+ * with `top` or `parent` in a form those rewrites match, so the HTML reaches
+ * the browser byte for byte (a rewrite changes the length of a React Server
+ * Components payload that carries the script and breaks the page).
+ *
+ * A key typed in a field is left alone, also in a field inside an open shadow
+ * root (a third-party widget's form): its events reach the document with the
+ * host as their target, so the script reads the field from the event's
+ * composed path.
+ *
+ * The page it sends: the last `StudioPage` marker the page rendered, else the
+ * `page` the binding passed, read at the keypress. An inline script with no
+ * hooks, so a Server Component renders it; its settings travel in `data-*`
+ * attributes (the same as v7's bridge's: `data-deco-studio-bridge`,
+ * `data-site`, `data-shortcut`, `data-path-template`, `data-page-id`) and the
+ * script itself is static.
+ *
+ * `@decocms/nextjs` and `@decocms/tanstack` each carry this file (neither
+ * imports the other); tests/studio-shortcut.test.ts keeps the two the same.
+ */
+import { createElement } from "react";
+/** The browser side. Static: everything it needs comes from the script element's attributes. */
+export const STUDIO_SHORTCUT_SCRIPT = `(function(){
+var s=document.currentScript,w=window,p=w.parent;
+if(!s||p!==w||w.__decoStudioShortcut||!s.hasAttribute("data-shortcut"))return;
+w.__decoStudioShortcut=true;
+var site=s.getAttribute("data-site")||"";
+function page(){
+  var all=document.querySelectorAll("[data-deco-page]"),el=all.length?all[all.length-1]:null;
+  if(!el||!el.getAttribute("data-path-template")){el=document.querySelector("script[data-deco-studio-bridge]")||s}
+  return{t:el.getAttribute("data-path-template")||"",id:el.getAttribute("data-page-id")||""};
+}
+document.addEventListener("keydown",function(e){
+  var t=e.composedPath?e.composedPath()[0]:e.target;
+  if(e.defaultPrevented||(t&&(t.tagName==="INPUT"||t.tagName==="TEXTAREA"||t.tagName==="SELECT"||t.isContentEditable)))return;
+  if(e.key!=="."&&!(e.ctrlKey&&e.shiftKey&&e.key==="E"))return;
+  e.preventDefault();
+  e.stopPropagation();
+  var g=page(),h=new URL("https://studio.decocms.com/choose-editor");
+  h.searchParams.set("site",site);
+  h.searchParams.set("domain",location.origin);
+  if(g.id)h.searchParams.set("pageId",g.id);
+  h.searchParams.set("path",location.pathname+location.search);
+  h.searchParams.set("pathTemplate",g.t||"/*");
+  if((e.ctrlKey||e.metaKey)&&e.key==="."){w.open(h.toString(),"_blank");return}
+  location.href=h.toString();
+});
+})();`;
+/** The "." shortcut's script. Render it once, in the `<body>`. */
+export function StudioShortcut({ site, editShortcut = true, page, nonce, }) {
+    return createElement("script", {
+        "data-deco-studio-bridge": "",
+        "data-site": site,
+        "data-shortcut": editShortcut ? "" : undefined,
+        // Read on each keypress, so a client-side navigation that re-renders the
+        // script with the next page updates them.
+        "data-path-template": page?.pathTemplate || undefined,
+        "data-page-id": page?.id || undefined,
+        nonce,
+        // Browsers hide a nonce from the DOM after parsing, which React would
+        // report as a hydration mismatch.
+        suppressHydrationWarning: true,
+        dangerouslySetInnerHTML: { __html: STUDIO_SHORTCUT_SCRIPT },
+    });
+}
+//# sourceMappingURL=studioShortcut.js.map

package/dist/studioShortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"studioShortcut.js","sourceRoot":"","sources":["../src/studioShortcut.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAqBtD,gGAAgG;AAChG,MAAM,CAAC,MAAM,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;MAyBhC,CAAC;AAEP,kEAAkE;AAClE,MAAM,UAAU,cAAc,CAAC,EAC7B,IAAI,EACJ,YAAY,GAAG,IAAI,EACnB,IAAI,EACJ,KAAK,GACe;IACpB,OAAO,aAAa,CAAC,QAAQ,EAAE;QAC7B,yBAAyB,EAAE,EAAE;QAC7B,WAAW,EAAE,IAAI;QACjB,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;QAC9C,yEAAyE;QACzE,0CAA0C;QAC1C,oBAAoB,EAAE,IAAI,EAAE,YAAY,IAAI,SAAS;QACrD,cAAc,EAAE,IAAI,EAAE,EAAE,IAAI,SAAS;QACrC,KAAK;QACL,sEAAsE;QACtE,kCAAkC;QAClC,wBAAwB,EAAE,IAAI;QAC9B,uBAAuB,EAAE,EAAE,MAAM,EAAE,sBAAsB,EAAE;KAC5D,CAAC,CAAC;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decocms/nextjs",
-  "version": "8.13.0",
+  "version": "8.15.0",
   "type": "module",
   "engines": {
     "node": ">=24"
@@ -67,7 +67,7 @@
     }
   },
   "devDependencies": {
-    "@decocms/blocks": "8.13.0",
+    "@decocms/blocks": "8.15.0",
     "@opentelemetry/api": "^1.9.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package/src/StudioBridge.ts

@@ -1,24 +1,43 @@
 /**
- * `StudioBridge` of `@decocms/blocks/preview` with Studio's origins filled in
- * (`STUDIO_ORIGINS`, `./studio.ts`): the package owns where Studio runs, so a
- * site passes only its name. With it, the Studio channel (`StudioChannel`):
- * on every page, production included, framed by one of Studio's origins
- * (`studioOrigins` / `DECO_STUDIO_ORIGIN` / Studio's production and staging
- * origins, each exact) it loads the editor's own modules from that origin;
- * otherwise it does nothing. Two inline scripts and no hooks, so a Server
- * Component renders it as is. The site's CSP allows the same origins with
- * `withStudioCsp`.
+ * What a Next.js site renders for Deco Studio's site editor: the Studio
+ * channel (`StudioChannel` of `@decocms/blocks/preview`) and v7's "." edit
+ * shortcut (`./studioShortcut.ts`). On every page, production included,
+ * framed by one of Studio's origins (`studioOrigins` / `DECO_STUDIO_ORIGIN` /
+ * Studio's production and staging origins, each exact), the channel loads
+ * the editor's own modules from that origin; otherwise it does nothing. Not
+ * framed, "." opens the page in Studio's editor.
+ *
+ * v8 only: v7's framed handler (`scrollToComponent`, `editor::rerender`) is
+ * gone, so no script on the page compares the window with `top` or `parent`
+ * in a form a test runner's "frame-busting" rewrite matches (Cypress's
+ * `modifyObstructiveCode`, which would change the length of the React Server
+ * Components payload that carries the script). Two inline scripts and no
+ * hooks, so a Server Component renders it as is. The site's CSP allows the
+ * same origins with `withStudioCsp`.
  */
-import {
-  StudioBridge as BridgeScript,
-  type StudioBridgeProps as BridgeScriptProps,
-  StudioChannel,
-} from "@decocms/blocks/preview";
+import { StudioChannel, type StudioPageInfo } from "@decocms/blocks/preview";
 import { createElement, Fragment, type ReactNode } from "react";
-import { STUDIO_ORIGINS, studioOrigins } from "./studio.ts";
+import { studioOrigins } from "./studio.ts";
+import { StudioShortcut } from "./studioShortcut.ts";
 
-/** `site`, and optionally `editShortcut`, `page` and `nonce`; Studio's origins are the package's. */
-export interface StudioBridgeProps extends Omit<BridgeScriptProps, "trustedOrigins"> {
+/** `site`, and optionally `editShortcut`, `page`, `nonce` and `studioOrigins`. */
+export interface StudioBridgeProps {
+  /** The site's name in Deco (the "." shortcut sends it to Studio). */
+  site: string;
+  /**
+   * v7's editor shortcut: on a page that isn't framed, "." (or Ctrl+Shift+E)
+   * opens it in Studio, and Ctrl or Cmd+"." opens it in a new tab. On by
+   * default, as in v7; `false` turns it off.
+   */
+  editShortcut?: boolean;
+  /**
+   * The page being shown, when the layout knows it: the "." shortcut sends
+   * its path template (and id). A `StudioPage` rendered by the page wins (a
+   * Next.js root layout doesn't re-render per page).
+   */
+  page?: StudioPageInfo;
+  /** The CSP nonce for the inline scripts, when the site sends one. */
+  nonce?: string;
   /**
    * The Studio origins the Studio channel trusts, each an exact origin.
    * Default: `DECO_STUDIO_ORIGIN` (comma-separated), else Studio's production
@@ -30,13 +49,20 @@ export interface StudioBridgeProps extends Omit<BridgeScriptProps, "trustedOrigi
 
 /**
  * Lets Studio's site editor select and edit sections on the page when Studio
- * frames it. Render it once, in the root layout's `<body>`.
+ * frames it, and "." open the page in Studio when it doesn't. Render it once,
+ * in the root layout's `<body>`.
  */
-export function StudioBridge({ studioOrigins: origins, ...props }: StudioBridgeProps): ReactNode {
+export function StudioBridge({
+  site,
+  editShortcut,
+  page,
+  nonce,
+  studioOrigins: origins,
+}: StudioBridgeProps): ReactNode {
   return createElement(
     Fragment,
     null,
-    createElement(BridgeScript, { ...props, trustedOrigins: STUDIO_ORIGINS }),
-    createElement(StudioChannel, { studioOrigins: studioOrigins(origins), nonce: props.nonce }),
+    createElement(StudioShortcut, { site, editShortcut, page, nonce }),
+    createElement(StudioChannel, { studioOrigins: studioOrigins(origins), nonce }),
   );
 }

package/src/index.ts

@@ -5,12 +5,11 @@
  * - `DraftPreviewIndicator`: the "Preview mode" badge on a page rendered from
  *   a draft (`bindDraft` from `@decocms/nextjs/server`), outside Studio's frame.
  * - `StudioBridge`: one line in the root layout, `<StudioBridge site="my-store" />`,
- *   lets Studio's site editor drive the page when Studio frames it
- *   (`@decocms/blocks/preview`'s, answering `STUDIO_ORIGINS`). It renders an
- *   inline script with no React hooks, so a Server Component renders it as is.
- *   Outside Studio's frame, "." opens the page in Studio's editor. It also
- *   mounts the Studio channel (`StudioChannel`), through which Studio loads its
- *   own modules into the page when it frames it (`studioOrigins`).
+ *   lets Studio's site editor drive the page when Studio frames it: it mounts
+ *   the Studio channel (`StudioChannel` of `@decocms/blocks/preview`), through
+ *   which Studio loads its own modules into the page (`studioOrigins`).
+ *   Outside Studio's frame, "." opens the page in Studio's editor. Two inline
+ *   scripts with no React hooks, so a Server Component renders it as is.
  * - `StudioPage`: rendered inside each CMS page, `<StudioPage pathTemplate={page.path} />`,
  *   tells the bridge which page "." opens (the root layout doesn't re-render per page).
  * - `DRAFT_PARAM`, `DRAFT_COOKIE`, `VERSION_HEADER`, `draftResponseHeaders`,

package/src/studio.ts

@@ -1,8 +1,7 @@
 /**
  * Where Deco Studio runs: the origins its site editor frames a site from and
- * talks to it from (`postMessage`). One list, so the Studio bridge
- * (`StudioBridge`), `withDeco()`'s dev origins and a site's own
- * `frame-ancestors` never drift apart. This package's own copy: it never
+ * talks to it from (`postMessage`). One list, so `withDeco()`'s dev origins
+ * and a site's own `frame-ancestors` never drift apart. This package's own copy: it never
  * imports `@decocms/tanstack`.
  *
  * No module state and no framework code: safe in a browser bundle.

package/src/studioShortcut.ts

@@ -0,0 +1,99 @@
+/**
+ * v7's "." edit shortcut, alone: on a page that isn't framed, "." (or
+ * Ctrl+Shift+E) opens the page in Studio's editor (`/choose-editor`, which
+ * signs a visitor who isn't signed in in first), and Ctrl or Cmd+"." opens it
+ * in a new tab. In a frame it does nothing: Studio's editor reaches a framed
+ * page through the Studio channel (`StudioChannel`) only.
+ *
+ * Safe under a test runner that rewrites "frame-busting" code in the HTML it
+ * proxies (Cypress's `modifyObstructiveCode`): the script compares no window
+ * with `top` or `parent` in a form those rewrites match, so the HTML reaches
+ * the browser byte for byte (a rewrite changes the length of a React Server
+ * Components payload that carries the script and breaks the page).
+ *
+ * A key typed in a field is left alone, also in a field inside an open shadow
+ * root (a third-party widget's form): its events reach the document with the
+ * host as their target, so the script reads the field from the event's
+ * composed path.
+ *
+ * The page it sends: the last `StudioPage` marker the page rendered, else the
+ * `page` the binding passed, read at the keypress. An inline script with no
+ * hooks, so a Server Component renders it; its settings travel in `data-*`
+ * attributes (the same as v7's bridge's: `data-deco-studio-bridge`,
+ * `data-site`, `data-shortcut`, `data-path-template`, `data-page-id`) and the
+ * script itself is static.
+ *
+ * `@decocms/nextjs` and `@decocms/tanstack` each carry this file (neither
+ * imports the other); tests/studio-shortcut.test.ts keeps the two the same.
+ */
+import { createElement, type ReactNode } from "react";
+
+/** The page the "." shortcut opens in Studio. */
+interface ShortcutPage {
+  /** The page block's `path`, as `matchRoute` matched it (`/products/:slug/p`, `/*`). */
+  pathTemplate?: string;
+  /** The page block's id, when the site knows it. */
+  id?: string;
+}
+
+export interface StudioShortcutProps {
+  /** The site's name in Deco (the shortcut sends it to Studio). */
+  site: string;
+  /** On by default; `false` turns it off. */
+  editShortcut?: boolean;
+  /** The page on screen, when the component that renders the shortcut knows it. */
+  page?: ShortcutPage;
+  /** The CSP nonce for the inline script, when the site sends one. */
+  nonce?: string;
+}
+
+/** The browser side. Static: everything it needs comes from the script element's attributes. */
+export const STUDIO_SHORTCUT_SCRIPT = `(function(){
+var s=document.currentScript,w=window,p=w.parent;
+if(!s||p!==w||w.__decoStudioShortcut||!s.hasAttribute("data-shortcut"))return;
+w.__decoStudioShortcut=true;
+var site=s.getAttribute("data-site")||"";
+function page(){
+  var all=document.querySelectorAll("[data-deco-page]"),el=all.length?all[all.length-1]:null;
+  if(!el||!el.getAttribute("data-path-template")){el=document.querySelector("script[data-deco-studio-bridge]")||s}
+  return{t:el.getAttribute("data-path-template")||"",id:el.getAttribute("data-page-id")||""};
+}
+document.addEventListener("keydown",function(e){
+  var t=e.composedPath?e.composedPath()[0]:e.target;
+  if(e.defaultPrevented||(t&&(t.tagName==="INPUT"||t.tagName==="TEXTAREA"||t.tagName==="SELECT"||t.isContentEditable)))return;
+  if(e.key!=="."&&!(e.ctrlKey&&e.shiftKey&&e.key==="E"))return;
+  e.preventDefault();
+  e.stopPropagation();
+  var g=page(),h=new URL("https://studio.decocms.com/choose-editor");
+  h.searchParams.set("site",site);
+  h.searchParams.set("domain",location.origin);
+  if(g.id)h.searchParams.set("pageId",g.id);
+  h.searchParams.set("path",location.pathname+location.search);
+  h.searchParams.set("pathTemplate",g.t||"/*");
+  if((e.ctrlKey||e.metaKey)&&e.key==="."){w.open(h.toString(),"_blank");return}
+  location.href=h.toString();
+});
+})();`;
+
+/** The "." shortcut's script. Render it once, in the `<body>`. */
+export function StudioShortcut({
+  site,
+  editShortcut = true,
+  page,
+  nonce,
+}: StudioShortcutProps): ReactNode {
+  return createElement("script", {
+    "data-deco-studio-bridge": "",
+    "data-site": site,
+    "data-shortcut": editShortcut ? "" : undefined,
+    // Read on each keypress, so a client-side navigation that re-renders the
+    // script with the next page updates them.
+    "data-path-template": page?.pathTemplate || undefined,
+    "data-page-id": page?.id || undefined,
+    nonce,
+    // Browsers hide a nonce from the DOM after parsing, which React would
+    // report as a hydration mismatch.
+    suppressHydrationWarning: true,
+    dangerouslySetInnerHTML: { __html: STUDIO_SHORTCUT_SCRIPT },
+  });
+}