bsmnt 0.13.1 → 0.14.0

package/dist/modules/features/cms/sanity-pagebuilder/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../../src/modules/features/cms/sanity-pagebuilder/config.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,kCAAkC;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,aAAa,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB,EAAE,kCAgDrC,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../../src/modules/features/cms/sanity-pagebuilder/config.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,kCAAkC;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,aAAa,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB,EAAE,kCAiDrC,CAAC"}

package/dist/modules/features/cms/sanity-pagebuilder/config.js

@@ -37,6 +37,7 @@ export const sanityPagebuilderConfig = {
         "lib/utils/metadata.ts",
         "lib/utils/rss.ts",
         "lib/utils/sitemap.ts",
+        "lib/utils/studio-embed.ts",
         "lib/scripts/sanity-typegen.ts",
         "app/studio",
         "app/api",

package/dist/modules/features/cms/sanity-pagebuilder/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../../src/modules/features/cms/sanity-pagebuilder/config.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,MAAM,CAAC,MAAM,uBAAuB,GAAuC;IAC1E,IAAI,EAAE,oBAAoB;IAE1B,YAAY,EAAE;QACb,uBAAuB,EAAE,SAAS;QAClC,qBAAqB,EAAE,QAAQ;QAC/B,qBAAqB,EAAE,QAAQ;QAC/B,eAAe,EAAE,QAAQ;QACzB,mBAAmB,EAAE,QAAQ;QAC7B,eAAe,EAAE,QAAQ;QACzB,YAAY,EAAE,SAAS;QACvB,gBAAgB,EAAE,SAAS;QAC3B,wBAAwB,EAAE,QAAQ;QAClC,aAAa,EAAE,SAAS;QACxB,MAAM,EAAE,SAAS;QACjB,qBAAqB,EAAE,QAAQ;KAC/B;IAED,eAAe,EAAE;QAChB,6BAA6B,EAAE,QAAQ;QACvC,YAAY,EAAE,QAAQ;KACtB;IAED,OAAO,EAAE;QACR,gBAAgB,EACf,wFAAwF;QACzF,gBAAgB,EAAE,qCAAqC;QACvD,MAAM,EAAE,wBAAwB;QAChC,QAAQ,EAAE,wBAAwB;KAClC;IAED,aAAa,EAAE;QACd,yBAAyB;QACzB,uCAAuC;QACvC,6BAA6B;QAC7B,uBAAuB;QACvB,uBAAuB;QACvB,kBAAkB;QAClB,sBAAsB;QACtB,+BAA+B;QAC/B,YAAY;QACZ,SAAS;QACT,cAAc;QACd,gBAAgB;QAChB,UAAU;QACV,mBAAmB;QACnB,4BAA4B;KAC5B;CACD,CAAC"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../../src/modules/features/cms/sanity-pagebuilder/config.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,MAAM,CAAC,MAAM,uBAAuB,GAAuC;IAC1E,IAAI,EAAE,oBAAoB;IAE1B,YAAY,EAAE;QACb,uBAAuB,EAAE,SAAS;QAClC,qBAAqB,EAAE,QAAQ;QAC/B,qBAAqB,EAAE,QAAQ;QAC/B,eAAe,EAAE,QAAQ;QACzB,mBAAmB,EAAE,QAAQ;QAC7B,eAAe,EAAE,QAAQ;QACzB,YAAY,EAAE,SAAS;QACvB,gBAAgB,EAAE,SAAS;QAC3B,wBAAwB,EAAE,QAAQ;QAClC,aAAa,EAAE,SAAS;QACxB,MAAM,EAAE,SAAS;QACjB,qBAAqB,EAAE,QAAQ;KAC/B;IAED,eAAe,EAAE;QAChB,6BAA6B,EAAE,QAAQ;QACvC,YAAY,EAAE,QAAQ;KACtB;IAED,OAAO,EAAE;QACR,gBAAgB,EACf,wFAAwF;QACzF,gBAAgB,EAAE,qCAAqC;QACvD,MAAM,EAAE,wBAAwB;QAChC,QAAQ,EAAE,wBAAwB;KAClC;IAED,aAAa,EAAE;QACd,yBAAyB;QACzB,uCAAuC;QACvC,6BAA6B;QAC7B,uBAAuB;QACvB,uBAAuB;QACvB,kBAAkB;QAClB,sBAAsB;QACtB,2BAA2B;QAC3B,+BAA+B;QAC/B,YAAY;QACZ,SAAS;QACT,cAAc;QACd,gBAAgB;QAChB,UAAU;QACV,mBAAmB;QACnB,4BAA4B;KAC5B;CACD,CAAC"}

package/dist/modules/features/cms/sanity-pagebuilder-cache/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../../src/modules/features/cms/sanity-pagebuilder-cache/config.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,uCAAuC;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,aAAa,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,4BAA4B,EAAE,uCAiDzC,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../../src/modules/features/cms/sanity-pagebuilder-cache/config.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,uCAAuC;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,aAAa,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,4BAA4B,EAAE,uCAkDzC,CAAC"}

package/dist/modules/features/cms/sanity-pagebuilder-cache/config.js

@@ -37,6 +37,7 @@ export const sanityPagebuilderCacheConfig = {
         "lib/utils/metadata.ts",
         "lib/utils/rss.ts",
         "lib/utils/sitemap.ts",
+        "lib/utils/studio-embed.ts",
         "lib/scripts/sanity-typegen.ts",
         "app/studio",
         "app/api",

package/dist/modules/features/cms/sanity-pagebuilder-cache/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../../src/modules/features/cms/sanity-pagebuilder-cache/config.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,MAAM,CAAC,MAAM,4BAA4B,GACxC;IACC,IAAI,EAAE,0BAA0B;IAEhC,YAAY,EAAE;QACb,uBAAuB,EAAE,SAAS;QAClC,qBAAqB,EAAE,QAAQ;QAC/B,qBAAqB,EAAE,QAAQ;QAC/B,eAAe,EAAE,QAAQ;QACzB,mBAAmB,EAAE,QAAQ;QAC7B,eAAe,EAAE,QAAQ;QACzB,YAAY,EAAE,SAAS;QACvB,gBAAgB,EAAE,SAAS;QAC3B,wBAAwB,EAAE,QAAQ;QAClC,aAAa,EAAE,SAAS;QACxB,MAAM,EAAE,SAAS;QACjB,qBAAqB,EAAE,QAAQ;KAC/B;IAED,eAAe,EAAE;QAChB,6BAA6B,EAAE,QAAQ;QACvC,YAAY,EAAE,QAAQ;KACtB;IAED,OAAO,EAAE;QACR,gBAAgB,EACf,wFAAwF;QACzF,gBAAgB,EAAE,qCAAqC;QACvD,MAAM,EAAE,wBAAwB;QAChC,QAAQ,EAAE,wBAAwB;KAClC;IAED,aAAa,EAAE;QACd,yBAAyB;QACzB,uCAAuC;QACvC,6BAA6B;QAC7B,uBAAuB;QACvB,uBAAuB;QACvB,kBAAkB;QAClB,sBAAsB;QACtB,+BAA+B;QAC/B,YAAY;QACZ,SAAS;QACT,cAAc;QACd,gBAAgB;QAChB,UAAU;QACV,mBAAmB;QACnB,4BAA4B;KAC5B;CACD,CAAC"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../../src/modules/features/cms/sanity-pagebuilder-cache/config.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,MAAM,CAAC,MAAM,4BAA4B,GACxC;IACC,IAAI,EAAE,0BAA0B;IAEhC,YAAY,EAAE;QACb,uBAAuB,EAAE,SAAS;QAClC,qBAAqB,EAAE,QAAQ;QAC/B,qBAAqB,EAAE,QAAQ;QAC/B,eAAe,EAAE,QAAQ;QACzB,mBAAmB,EAAE,QAAQ;QAC7B,eAAe,EAAE,QAAQ;QACzB,YAAY,EAAE,SAAS;QACvB,gBAAgB,EAAE,SAAS;QAC3B,wBAAwB,EAAE,QAAQ;QAClC,aAAa,EAAE,SAAS;QACxB,MAAM,EAAE,SAAS;QACjB,qBAAqB,EAAE,QAAQ;KAC/B;IAED,eAAe,EAAE;QAChB,6BAA6B,EAAE,QAAQ;QACvC,YAAY,EAAE,QAAQ;KACtB;IAED,OAAO,EAAE;QACR,gBAAgB,EACf,wFAAwF;QACzF,gBAAgB,EAAE,qCAAqC;QACvD,MAAM,EAAE,wBAAwB;QAChC,QAAQ,EAAE,wBAAwB;KAClC;IAED,aAAa,EAAE;QACd,yBAAyB;QACzB,uCAAuC;QACvC,6BAA6B;QAC7B,uBAAuB;QACvB,uBAAuB;QACvB,kBAAkB;QAClB,sBAAsB;QACtB,2BAA2B;QAC3B,+BAA+B;QAC/B,YAAY;QACZ,SAAS;QACT,cAAc;QACd,gBAAgB;QAChB,UAAU;QACV,mBAAmB;QACnB,4BAA4B;KAC5B;CACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bsmnt",
-	"version": "0.13.1",
+	"version": "0.14.0",
 	"packageManager": "bun@1.3.14",
 	"description": "CLI to scaffold basement projects and add integrations",
 	"type": "module",

package/src/agent-skills/ashby-pagebuilder-block/SKILL.md

@@ -42,7 +42,7 @@ The shipped adapter uses plain `defineType` so it also works in the standard
 Sanity integration, which has no page builder. In this template every block must
 go through `defineBlock`
 (`lib/integrations/sanity/schemas/shared/block.ts`) — it implies
-`type: "document"` and appends **Anchor ID** and **Presentation Mode**, the two
+`type: "object"` and appends **Anchor ID** and **Presentation Mode**, the two
 fields the renderer reads for the anchor and the spacing. A block without them
 fails `page-builder-config`'s conventions test.
 
@@ -70,7 +70,7 @@ generated anchor from the editor's heading with no extra work.
 
 Export it from `lib/integrations/sanity/schemas/components/index.ts` and add it
 to the `schema.types` array in `lib/integrations/sanity/schemas/index.ts`,
-alongside the other component documents (near `hero` / `description`):
+alongside the other block types (near `hero` / `description`):
 
 ```ts
 import { ashbyJobBoardBlock } from "./components"
@@ -85,7 +85,9 @@ export const schema: { types: SchemaTypeDefinition[] } = {
 
 ## 2. Add it to the page-builder config — `lib/integrations/sanity/page-builder-config.ts`
 
-Extend the `PageBuilderDocumentType` union and add a reusable reference member.
+Extend the `PageBuilderDocumentType` union and add a block member. Blocks are
+inlined, so the member is identified by its schema type alone — there is no
+separate member name and no reference type.
 Match the member shape the file actually uses — in the current basement page
 builder that's `pageTypes` (which page documents may host it) plus `category`
 (which insert-menu group it lands in):
@@ -97,25 +99,41 @@ export type PageBuilderDocumentType =
   | "ashbyJobBoardBlock"
   // ...rest...
 
-// inside reusablePageBuilderReferenceMembers:
+// inside pageBuilderBlockMembers:
 {
   documentType: "ashbyJobBoardBlock",
-  name: "ashbyJobBoardBlockReference",
   title: "Job Board",
   pageTypes: ["generic"],
   category: "list",
 },
 ```
 
-## 3. List it in the Studio — `lib/integrations/sanity/structure.ts`
+## 3. Give it a fixture — `components/page-builder/library.ts`
 
-Under the "Reusable Components" list, add (the schema's own case icon is used
-automatically, so `.icon()` is optional):
+A block's preview is a fixture rendered by the production renderer, not an
+image: the same entry drives the live pane in the insert menu, the block's row
+in Studio → **Components** and the `/components` route. Nothing goes in
+`structure.ts` — that list is generated from `COMPONENT_LIBRARY`.
 
 ```ts
-S.documentTypeListItem("ashbyJobBoardBlock").title("Job Boards"),
+// inside COMPONENT_LIBRARY:
+{
+  documentType: "ashbyJobBoardBlock",
+  title: "Job Board",
+  notes: "Live roles pulled from Ashby, grouped by team.",
+  background: "bg-white",
+  block: {
+    _key: "placeholder",
+    _type: "ashbyJobBoardBlock",
+    internalTitle: "Open roles",
+    heading: "Open roles",
+  },
+},
 ```
 
+The `block` value is typed as the block's *query result*, so a field the
+projection doesn't return is a typecheck error here rather than a blank preview.
+
 ## 4. Icon — `lib/integrations/sanity/icons.ts`
 
 The adapter defaults to `@sanity/icons`' `CaseIcon`. This project uses phosphor
@@ -241,8 +259,8 @@ bun typecheck
 bun lint
 ```
 
-`bun typecheck` must pass. The page query already spreads dereferenced block
-fields (`...@->{ ... }`), so `heading`, `boardName`, `anchorId` and
+`bun typecheck` must pass. The page query spreads inlined block fields (`...`),
+so `heading`, `boardName`, `anchorId` and
 `presentation` flow through with no query change.
 
 Then check it in the Studio: the block's form ends with **Anchor ID** and

package/src/agent-skills/hubspot-pagebuilder-block/SKILL.md

@@ -37,7 +37,7 @@ The shipped adapter uses plain `defineType` so it also works in the standard
 Sanity integration, which has no page builder. In this template every block must
 go through `defineBlock`
 (`lib/integrations/sanity/schemas/shared/block.ts`) — it implies
-`type: "document"` and appends **Anchor ID** and **Presentation Mode**, the two
+`type: "object"` and appends **Anchor ID** and **Presentation Mode**, the two
 fields the renderer reads for the anchor and the spacing. A block without them
 fails `page-builder-config`'s conventions test.
 
@@ -62,7 +62,7 @@ export const hubspotFormBlock = defineBlock({
 
 Export it from `lib/integrations/sanity/schemas/components/index.ts` and add it
 to the `schema.types` array in `lib/integrations/sanity/schemas/index.ts`,
-alongside the other component documents (near `hero` / `description`):
+alongside the other block types (near `hero` / `description`):
 
 ```ts
 import { hubspotFormBlock } from "./components"
@@ -77,7 +77,9 @@ export const schema: { types: SchemaTypeDefinition[] } = {
 
 ## 2. Add it to the page-builder config — `lib/integrations/sanity/page-builder-config.ts`
 
-Extend the `PageBuilderDocumentType` union and add a reusable reference member:
+Extend the `PageBuilderDocumentType` union and add a block member. Blocks are
+inlined, so the member is identified by its schema type alone — there is no
+separate member name and no reference type:
 
 ```ts
 export type PageBuilderDocumentType =
@@ -86,24 +88,41 @@ export type PageBuilderDocumentType =
   | "hubspotFormBlock"
   // ...rest...
 
-// inside reusablePageBuilderReferenceMembers:
+// inside pageBuilderBlockMembers:
 {
   documentType: "hubspotFormBlock",
-  name: "hubspotFormBlockReference",
   title: "HubSpot Form",
-  groups: ["generic"],
+  pageTypes: ["generic"],
+  category: "form",
 },
 ```
 
-## 3. List it in the Studio — `lib/integrations/sanity/structure.ts`
+## 3. Give it a fixture — `components/page-builder/library.ts`
 
-Under the "Reusable Components" list, add (the schema's own envelope icon is used
-automatically, so `.icon()` is optional):
+A block's preview is a fixture rendered by the production renderer, not an
+image: the same entry drives the live pane in the insert menu, the block's row
+in Studio → **Components** and the `/components` route. Nothing goes in
+`structure.ts` — that list is generated from `COMPONENT_LIBRARY`.
 
 ```ts
-S.documentTypeListItem("hubspotFormBlock").title("HubSpot Forms"),
+// inside COMPONENT_LIBRARY:
+{
+  documentType: "hubspotFormBlock",
+  title: "HubSpot Form",
+  notes:
+    "An embedded HubSpot form. The preview renders the frame without a form selected.",
+  background: "bg-white",
+  block: {
+    _key: "placeholder",
+    _type: "hubspotFormBlock",
+    name: "Book a demo",
+  },
+},
 ```
 
+The `block` value is typed as the block's *query result*, so a field the
+projection doesn't return is a typecheck error here rather than a blank preview.
+
 ## 4. Envelope icon — `lib/integrations/sanity/icons.ts`
 
 The adapter defaults to `@sanity/icons`' `EnvelopeIcon`. This project uses
@@ -175,8 +194,8 @@ bun typecheck
 bun lint
 ```
 
-`bun typecheck` must pass. The page query already spreads dereferenced block
-fields (`...@->{ ... }`), so `form` flows through with no query change.
+`bun typecheck` must pass. The page query spreads inlined block fields (`...`),
+so `form` flows through with no query change.
 
 ## Direct rendering (no page builder)
 

package/src/agent-skills/page-builder-block/SKILL.md

@@ -13,21 +13,23 @@ description: >-
 
 # Page-builder block conventions
 
-Blocks are **documents** referenced from the `pageBuilder` array, drawn by
+Blocks are **inline objects** in the `pageBuilder` array — never documents, and
+never referenced. A placement belongs to exactly one page, so the block lives on
+that page and nothing is dereferenced at read time. They are drawn by
 `components/page-builder/renderer.tsx` through the registry in
 `components/page-builder/registry.tsx`. Read one existing block end to end
 before writing a new one — `hero` is the smallest complete example:
 
 - schema: `lib/integrations/sanity/schemas/components/reusable/hero.ts`
 - component: `components/page-builder/components/hero.tsx`
+- fixture: `components/page-builder/library.ts`
 - registration: `lib/integrations/sanity/schemas/components/index.ts`,
   `lib/integrations/sanity/schemas/index.ts`,
   `lib/integrations/sanity/page-builder-config.ts`,
-  `lib/integrations/sanity/structure.ts`,
   `components/page-builder/registry.tsx`
 
 A block exists in two halves — a schema and a component — and each half has one
-place that makes it a block rather than an ordinary document or a loose React
+place that makes it a block rather than an ordinary object type or a loose React
 component. Use them and the conventions below come for free; skip them and a
 typecheck fails.
 
@@ -35,8 +37,10 @@ typecheck fails.
 
 1. **Define the schema with `defineBlock`, never `defineType`.**
    `lib/integrations/sanity/schemas/shared/block.ts` implies
-   `type: "document"` and appends Anchor ID + Presentation Mode as the last two
-   fields:
+   `type: "object"` and appends Anchor ID + Presentation Mode as the last two
+   fields. The array member's type name is the block's `_type`, so the schema
+   name is also what the registry, the insert menu and the fixture library key
+   off:
 
    ```ts
    import { defineField } from "sanity"
@@ -123,7 +127,15 @@ typecheck fails.
    `SANITY_LAYOUT_TAGS` (`fetchers/layout.ts`, or `tags.ts` on the Cache
    Components variant), same as navbar and footer.
 
-5. **Regenerate types after a schema change:** `bun run sanity:typegen`. The
+5. **Ship a fixture in `components/page-builder/library.ts`.** One entry per
+   block: a stand-in value typed as the block's *query result* (so a schema or
+   projection change breaks the fixture at typecheck), a one-line note and a
+   stage background. That entry is the block's only preview — the live pane in
+   the insert menu, its row in Studio → Components and the `/components` route
+   all render it through the production renderer. Nothing needs adding to
+   `structure.ts`.
+
+6. **Regenerate types after a schema change:** `bun run sanity:typegen`. The
    page query spreads `...` for non-gated blocks, so new fields flow through
    automatically — except `gatedContent`, whose GROQ branch lists fields
    explicitly (`lib/integrations/sanity/queries.ts`). Add new fields there by
@@ -131,20 +143,21 @@ typecheck fails.
 
 ## Checklist for a new block
 
-- [ ] Schema in `schemas/components/reusable/<block>.ts` (or `singleton/` for a
-      one-instance block), built with `defineBlock` and carrying a `preview`.
+- [ ] Schema in `schemas/components/reusable/<block>.ts`, built with
+      `defineBlock` and carrying a `preview`.
 - [ ] Icon in `lib/integrations/sanity/icons.ts` (phosphor duotone).
 - [ ] Exported from `schemas/components/index.ts` and registered in
       `schemas/index.ts` (`schema.types`).
 - [ ] Member added to `page-builder-config.ts`: the `PageBuilderDocumentType`
-      union plus an entry in `reusablePageBuilderReferenceMembers` carrying
-      **both** axes — `pageTypes` (which page documents may host it) and
-      `category` (what the block is, one of `componentCategories`; `misc` only
-      when nothing fits).
-- [ ] Listed in `structure.ts` under the right folder.
+      union plus an entry in `pageBuilderBlockMembers` carrying **both** axes —
+      `pageTypes` (which page documents may host it) and `category` (what the
+      block is, one of `componentCategories`; `misc` only when nothing fits).
 - [ ] Component in `components/page-builder/components/<block>.tsx`, typed with
       `Extract<PageBuilderBlock, { _type: "<block>" }>`, no outer section, no
       vertical padding. Variants via `cva`/`cn` when the block has variants.
 - [ ] Entry in `components/page-builder/registry.tsx`, with `isEmpty` when the
       block can be left unfilled.
+- [ ] Fixture in `components/page-builder/library.ts`, typed as the block's
+      query result. It is the block's preview everywhere, so nothing needs
+      adding to `structure.ts`.
 - [ ] `bun run sanity:typegen && bun run typecheck && bun run lint && bun run build && bun run knip`.

package/src/modules/features/cms/sanity-pagebuilder/files/app/api/revalidate/route.ts

@@ -8,7 +8,7 @@ import { parseBody } from "next-sanity/webhook";
 import { directClient } from "@/lib/integrations/sanity/client";
 import { SANITY_LAYOUT_TAGS } from "@/lib/integrations/sanity/fetchers/layout";
 import { SANITY_REDIRECTS_TAG } from "@/lib/integrations/sanity/fetchers/redirects";
-import { pageBuilderReferenceMembers as pbrm } from "@/lib/integrations/sanity/page-builder-config";
+import { pageBuilderBlockMembers } from "@/lib/integrations/sanity/page-builder-config";
 import {
 	FOLDER_PATH_QUERY,
 	P_REF_DOC_PAGES_QUERY,
@@ -63,7 +63,7 @@ type RevalidateWebhookBody = WebhookDocument & {
 };
 
 const referenceableTypes = new Set<string>([
-	...pbrm.map((m) => m.documentType),
+	...pageBuilderBlockMembers.map((member) => member.documentType),
 	...REFERENCEABLE_TYPES,
 ]);
 

package/src/modules/features/cms/sanity-pagebuilder/files/components/sanity/rich-text.tsx

@@ -4,7 +4,7 @@ import { SanityImage } from "@/components/ui/sanity-image";
 import {
 	getLinkAttributes,
 	urlForReference,
-} from "../../lib/integrations/sanity/utils/link";
+} from "@/lib/integrations/sanity/utils/link";
 
 interface RichTextProps {
 	content: PortableTextProps["value"];

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/components/block-actions-item.tsx

@@ -6,7 +6,7 @@ import { apiVersion } from "@/lib/integrations/sanity/env";
 
 const HIDDEN_KEYS_FIELD = "hiddenPageBuilderKeys";
 
-type ReferenceItem = { _key: string; _ref: string; _type: string };
+type BlockItem = { _key: string; _type?: string };
 
 /**
  * Eye-icon toggle for a page builder placement's per-page visibility. Adds the
@@ -14,7 +14,7 @@ type ReferenceItem = { _key: string; _ref: string; _type: string };
  * filters those keys out at query time. Standalone control because Sanity's
  * built-in item menu isn't extensible via public props.
  */
-export function BlockActionsItem(props: ObjectItemProps<ReferenceItem>) {
+export function BlockActionsItem(props: ObjectItemProps<BlockItem>) {
 	const { value, renderDefault } = props;
 	const client = useClient({ apiVersion });
 	const toast = useToast();

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/components/component-preview-frame.tsx

@@ -0,0 +1,124 @@
+import { Box, Button, Card, Code, Flex, Text } from "@sanity/ui";
+import { useEffect, useRef, useState } from "react";
+
+const VIEWPORTS = [
+	{ id: "desktop", label: "Desktop", width: 1440 },
+	{ id: "tablet", label: "Tablet", width: 834 },
+	{ id: "mobile", label: "Mobile", width: 390 },
+] as const;
+
+type ViewportId = (typeof VIEWPORTS)[number]["id"];
+
+interface ComponentPreviewFrameProps {
+	notes?: string | undefined;
+	path: string;
+}
+
+export const ComponentPreviewFrame = ({
+	notes,
+	path,
+}: ComponentPreviewFrameProps) => {
+	const stage = useRef<HTMLDivElement>(null);
+	const [box, setBox] = useState({ height: 0, width: 0 });
+	const [viewport, setViewport] = useState<ViewportId>("desktop");
+
+	useEffect(() => {
+		const element = stage.current;
+		if (!element) return;
+
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const { height, width } = entry.contentRect;
+			setBox({ height, width });
+		});
+
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+
+	const width = VIEWPORTS.find((item) => item.id === viewport)?.width ?? 1440;
+
+	const scale = box.width > 0 ? Math.min(1, box.width / width) : 1;
+	const height = box.height > 0 ? box.height / scale : 0;
+
+	return (
+		<Flex direction="column" height="fill">
+			<Card borderBottom padding={2} tone="transparent">
+				<Flex align="center" gap={2}>
+					<Flex gap={1}>
+						{VIEWPORTS.map((item) => (
+							<Button
+								fontSize={0}
+								key={item.id}
+								mode={item.id === viewport ? "default" : "bleed"}
+								onClick={() => setViewport(item.id)}
+								padding={2}
+								text={item.label}
+								tone={item.id === viewport ? "primary" : "default"}
+							/>
+						))}
+					</Flex>
+					<Box flex={1} />
+					<Code size={0}>
+						{width} × {Math.round(height)} · {Math.round(scale * 100)}%
+					</Code>
+				</Flex>
+			</Card>
+
+			{notes ? (
+				<Card borderBottom padding={3} tone="transparent">
+					<Text muted size={0}>
+						{notes}
+					</Text>
+				</Card>
+			) : null}
+
+			<Box
+				flex={1}
+				style={{
+					background: "var(--card-muted-bg-color)",
+					overflow: "hidden",
+					position: "relative",
+				}}
+			>
+				<div
+					ref={stage}
+					style={{
+						display: "flex",
+						height: "100%",
+						justifyContent: "center",
+						width: "100%",
+					}}
+				>
+					{height > 0 ? (
+						<div
+							style={{
+								background: "var(--card-bg-color)",
+								border: "1px solid var(--card-border-color)",
+								borderRadius: 4,
+								boxShadow: "0 1px 12px rgb(0 0 0 / 0.12)",
+								flex: "none",
+								height: box.height,
+								overflow: "hidden",
+								width: width * scale,
+							}}
+						>
+							<iframe
+								src={path}
+								style={{
+									border: 0,
+									display: "block",
+									height,
+									transform: `scale(${scale})`,
+									transformOrigin: "top left",
+									width,
+								}}
+								title="Component preview"
+							/>
+						</div>
+					) : null}
+				</div>
+			</Box>
+		</Flex>
+	);
+};

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/components/component-preview-pane.tsx

@@ -0,0 +1,25 @@
+import { Card, Text } from "@sanity/ui";
+import { ComponentPreviewFrame } from "./component-preview-frame";
+
+interface ComponentPreviewPaneProps {
+	options?: Record<string, unknown>;
+}
+
+export const ComponentPreviewPane = ({
+	options,
+}: ComponentPreviewPaneProps) => {
+	const path = options?.path as string | undefined;
+	const notes = options?.notes as string | undefined;
+
+	if (!path) {
+		return (
+			<Card padding={4}>
+				<Text muted size={1}>
+					This component has no preview route.
+				</Text>
+			</Card>
+		);
+	}
+
+	return <ComponentPreviewFrame notes={notes} path={path} />;
+};

package/src/modules/features/cms/sanity-pagebuilder/files/lib/integrations/sanity/components/page-builder-input.tsx

@@ -1,38 +1,18 @@
 import { type ArrayOfObjectsInputProps, useFormValue } from "sanity";
 import { PageBuilderInsertMenu } from "@/lib/integrations/sanity/components/page-builder-insert-menu";
-import { useStudioPreviewUrls } from "@/lib/integrations/sanity/components/use-studio-preview-urls";
 import {
-	blockPreviewKey,
 	getVisiblePageBuilderInsertMenuGroups,
 	getVisiblePageBuilderMemberNames,
+	type PageBuilderDocumentType,
 	type PageBuilderGroupName,
-	pageBuilderReferenceMembers,
 } from "@/lib/integrations/sanity/page-builder-config";
 
-const BLOCK_PREVIEW_KEYS = pageBuilderReferenceMembers.map((member) =>
-	blockPreviewKey(member.name),
-);
-
-function useInsertMenuViews() {
-	const previewUrls = useStudioPreviewUrls(BLOCK_PREVIEW_KEYS);
-
-	return [
-		{
-			name: "grid" as const,
-			previewImageUrl: (schemaTypeName: string) =>
-				previewUrls?.[blockPreviewKey(schemaTypeName)],
-		},
-		{ name: "list" as const },
-	];
-}
-
 export function PageBuilderInput(props: ArrayOfObjectsInputProps) {
 	const pageTypeValue = useFormValue(["type"]);
 	const pageType =
 		typeof pageTypeValue === "string"
 			? (pageTypeValue as PageBuilderGroupName)
 			: undefined;
-	const views = useInsertMenuViews();
 	const visibleMemberNames = getVisiblePageBuilderMemberNames(pageType);
 
 	return props.renderDefault({
@@ -40,17 +20,14 @@ export function PageBuilderInput(props: ArrayOfObjectsInputProps) {
 		arrayFunctions: PageBuilderInsertMenu,
 		schemaType: {
 			...props.schemaType,
-			of: props.schemaType.of.filter(
-				(member) =>
-					typeof member.name === "string" &&
-					visibleMemberNames.has(member.name),
+			of: props.schemaType.of.filter((member) =>
+				visibleMemberNames.has(member.name as PageBuilderDocumentType),
 			),
 			options: {
 				...props.schemaType.options,
 				insertMenu: {
 					...props.schemaType.options?.insertMenu,
 					groups: getVisiblePageBuilderInsertMenuGroups(pageType),
-					views,
 				},
 			},
 		},