@makeswift/runtime 0.28.3-canary.6 → 0.28.3-canary.8

package/dist/cjs/components/builtin/Box/register.js

@@ -97,12 +97,8 @@ function registerComponent(runtime) {
         border: (0, import_prop_controllers.Border)({ format: import_prop_controllers.Border.Format.ClassName }),
         borderRadius: (0, import_prop_controllers.BorderRadius)({ format: import_prop_controllers.BorderRadius.Format.ClassName }),
         boxShadow: (0, import_prop_controllers.Shadows)({ format: import_prop_controllers.Shadows.Format.ClassName }),
-        rowGap: (0, import_prop_controllers.GapY)((props) => ({
-          hidden: props.children == null
-        })),
-        columnGap: (0, import_prop_controllers.GapX)((props) => ({
-          hidden: props.children == null
-        })),
+        rowGap: (0, import_prop_controllers.GapY)(),
+        columnGap: (0, import_prop_controllers.GapX)(),
         boxAnimateType: (0, import_prop_controllers.ResponsiveSelect)({
           label: "Animate box in",
           labelOrientation: "vertical",

package/dist/cjs/components/builtin/Box/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Box/register.ts"],"sourcesContent":["import {\n  Backgrounds,\n  Border,\n  BorderRadius,\n  Checkbox,\n  ElementID,\n  GapX,\n  GapY,\n  Grid,\n  Margin,\n  Padding,\n  ResponsiveIconRadioGroup,\n  ResponsiveNumber,\n  ResponsiveSelect,\n  Shadows,\n  Width,\n  type PropData,\n} from '@makeswift/prop-controllers'\nimport { findBreakpointOverride, getBaseBreakpoint } from '@makeswift/controls'\n\nimport { type ReactRuntimeCore } from '../../../runtimes/react/react-runtime-core'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n  BoxAnimateIn,\n  DEFAULT_BOX_ANIMATE_DELAY,\n  DEFAULT_BOX_ANIMATE_DURATION,\n  DEFAULT_ITEM_ANIMATE_DELAY,\n  DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntimeCore) {\n  function isHiddenBasedOnAnimationType(\n    props: Record<string, unknown>,\n    deviceId: string,\n    property: 'boxAnimateType' | 'itemAnimateType',\n  ): boolean {\n    const animateIn = ResponsiveSelect.fromPropData<BoxAnimateIn>(\n      props[property] as PropData<typeof ResponsiveSelect> | undefined,\n    )\n    return (\n      (findBreakpointOverride<BoxAnimateIn>(runtime.getBreakpoints(), animateIn, deviceId)?.value ??\n        'none') === 'none'\n    )\n  }\n  const isHiddenBasedOnBoxAnimation = (props: Record<string, unknown>, deviceId: string) =>\n    isHiddenBasedOnAnimationType(props, deviceId, 'boxAnimateType')\n  const isHiddenBasedOnItemAnimation = (props: Record<string, unknown>, deviceId: string) =>\n    isHiddenBasedOnAnimationType(props, deviceId, 'itemAnimateType')\n\n  return runtime.registerComponent(\n    lazy(() => import('./Box')),\n    {\n      type: MakeswiftComponentType.Box,\n      label: 'Box',\n      props: {\n        id: ElementID(),\n        backgrounds: Backgrounds(),\n        width: Width({\n          format: Width.Format.ClassName,\n          defaultValue: { value: 100, unit: '%' },\n        }),\n        height: ResponsiveIconRadioGroup({\n          label: 'Height',\n          options: [\n            { value: 'auto', label: 'Auto', icon: 'HeightAuto16' },\n            { value: 'stretch', label: 'Stretch', icon: 'HeightMatch16' },\n          ],\n          defaultValue: 'auto',\n        }),\n        verticalAlign: ResponsiveIconRadioGroup({\n          label: 'Align items',\n          options: [\n            { value: 'flex-start', label: 'Top', icon: 'VerticalAlignStart16' },\n            { value: 'center', label: 'Middle', icon: 'VerticalAlignMiddle16' },\n            { value: 'flex-end', label: 'Bottom', icon: 'VerticalAlignEnd16' },\n            {\n              value: 'space-between',\n              label: 'Space between',\n              icon: 'VerticalAlignSpaceBetween16',\n            },\n          ],\n          defaultValue: 'flex-start',\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        padding: Padding({\n          format: Padding.Format.ClassName,\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: {\n                paddingTop: { value: 10, unit: 'px' },\n                paddingRight: { value: 10, unit: 'px' },\n                paddingBottom: { value: 10, unit: 'px' },\n                paddingLeft: { value: 10, unit: 'px' },\n              },\n            },\n          ],\n        }),\n        border: Border({ format: Border.Format.ClassName }),\n        borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n        boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n        rowGap: GapY(props => ({\n          hidden: props.children == null,\n        })),\n        columnGap: GapX(props => ({\n          hidden: props.children == null,\n        })),\n        boxAnimateType: ResponsiveSelect({\n          label: 'Animate box in',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'none', label: 'None' },\n            { value: 'fadeIn', label: 'Fade in' },\n            { value: 'fadeRight', label: 'Fade right' },\n            { value: 'fadeDown', label: 'Fade down' },\n            { value: 'fadeLeft', label: 'Fade left' },\n            { value: 'fadeUp', label: 'Fade up' },\n            { value: 'blurIn', label: 'Blur in' },\n            { value: 'scaleUp', label: 'Scale up' },\n            { value: 'scaleDown', label: 'Scale down' },\n          ],\n          defaultValue: 'none',\n        }),\n        boxAnimateDuration: ResponsiveNumber((props, device) => ({\n          label: 'Box duration',\n          defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n          min: 0.1,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnBoxAnimation(props, device),\n        })),\n        boxAnimateDelay: ResponsiveNumber((props, device) => ({\n          label: 'Box delay',\n          defaultValue: DEFAULT_BOX_ANIMATE_DELAY,\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnBoxAnimation(props, device),\n        })),\n        itemAnimateType: ResponsiveSelect({\n          label: 'Animate items in',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'none', label: 'None' },\n            { value: 'fadeIn', label: 'Fade in' },\n            { value: 'fadeRight', label: 'Fade right' },\n            { value: 'fadeDown', label: 'Fade down' },\n            { value: 'fadeLeft', label: 'Fade left' },\n            { value: 'fadeUp', label: 'Fade up' },\n            { value: 'blurIn', label: 'Blur in' },\n            { value: 'scaleUp', label: 'Scale up' },\n            { value: 'scaleDown', label: 'Scale down' },\n          ],\n          defaultValue: 'none',\n        }),\n        itemAnimateDuration: ResponsiveNumber((props, device) => ({\n          label: 'Items duration',\n          defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n          min: 0.1,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        itemAnimateDelay: ResponsiveNumber((props, device) => ({\n          label: 'Items delay',\n          defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        itemStaggerDuration: ResponsiveNumber((props, device) => ({\n          label: 'Stagger',\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          defaultValue: DEFAULT_ITEM_STAGGER_DURATION,\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        hidePlaceholder: Checkbox(props => ({\n          label: 'Hide placeholder',\n          hidden: props.children != null,\n        })),\n        children: Grid(),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":["import_constants"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Box/register.ts"],"sourcesContent":["import {\n  Backgrounds,\n  Border,\n  BorderRadius,\n  Checkbox,\n  ElementID,\n  GapX,\n  GapY,\n  Grid,\n  Margin,\n  Padding,\n  ResponsiveIconRadioGroup,\n  ResponsiveNumber,\n  ResponsiveSelect,\n  Shadows,\n  Width,\n  type PropData,\n} from '@makeswift/prop-controllers'\nimport { findBreakpointOverride, getBaseBreakpoint } from '@makeswift/controls'\n\nimport { type ReactRuntimeCore } from '../../../runtimes/react/react-runtime-core'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n  BoxAnimateIn,\n  DEFAULT_BOX_ANIMATE_DELAY,\n  DEFAULT_BOX_ANIMATE_DURATION,\n  DEFAULT_ITEM_ANIMATE_DELAY,\n  DEFAULT_ITEM_STAGGER_DURATION,\n} from './constants'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntimeCore) {\n  function isHiddenBasedOnAnimationType(\n    props: Record<string, unknown>,\n    deviceId: string,\n    property: 'boxAnimateType' | 'itemAnimateType',\n  ): boolean {\n    const animateIn = ResponsiveSelect.fromPropData<BoxAnimateIn>(\n      props[property] as PropData<typeof ResponsiveSelect> | undefined,\n    )\n    return (\n      (findBreakpointOverride<BoxAnimateIn>(runtime.getBreakpoints(), animateIn, deviceId)?.value ??\n        'none') === 'none'\n    )\n  }\n  const isHiddenBasedOnBoxAnimation = (props: Record<string, unknown>, deviceId: string) =>\n    isHiddenBasedOnAnimationType(props, deviceId, 'boxAnimateType')\n  const isHiddenBasedOnItemAnimation = (props: Record<string, unknown>, deviceId: string) =>\n    isHiddenBasedOnAnimationType(props, deviceId, 'itemAnimateType')\n\n  return runtime.registerComponent(\n    lazy(() => import('./Box')),\n    {\n      type: MakeswiftComponentType.Box,\n      label: 'Box',\n      props: {\n        id: ElementID(),\n        backgrounds: Backgrounds(),\n        width: Width({\n          format: Width.Format.ClassName,\n          defaultValue: { value: 100, unit: '%' },\n        }),\n        height: ResponsiveIconRadioGroup({\n          label: 'Height',\n          options: [\n            { value: 'auto', label: 'Auto', icon: 'HeightAuto16' },\n            { value: 'stretch', label: 'Stretch', icon: 'HeightMatch16' },\n          ],\n          defaultValue: 'auto',\n        }),\n        verticalAlign: ResponsiveIconRadioGroup({\n          label: 'Align items',\n          options: [\n            { value: 'flex-start', label: 'Top', icon: 'VerticalAlignStart16' },\n            { value: 'center', label: 'Middle', icon: 'VerticalAlignMiddle16' },\n            { value: 'flex-end', label: 'Bottom', icon: 'VerticalAlignEnd16' },\n            {\n              value: 'space-between',\n              label: 'Space between',\n              icon: 'VerticalAlignSpaceBetween16',\n            },\n          ],\n          defaultValue: 'flex-start',\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        padding: Padding({\n          format: Padding.Format.ClassName,\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: {\n                paddingTop: { value: 10, unit: 'px' },\n                paddingRight: { value: 10, unit: 'px' },\n                paddingBottom: { value: 10, unit: 'px' },\n                paddingLeft: { value: 10, unit: 'px' },\n              },\n            },\n          ],\n        }),\n        border: Border({ format: Border.Format.ClassName }),\n        borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n        boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n        rowGap: GapY(),\n        columnGap: GapX(),\n        boxAnimateType: ResponsiveSelect({\n          label: 'Animate box in',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'none', label: 'None' },\n            { value: 'fadeIn', label: 'Fade in' },\n            { value: 'fadeRight', label: 'Fade right' },\n            { value: 'fadeDown', label: 'Fade down' },\n            { value: 'fadeLeft', label: 'Fade left' },\n            { value: 'fadeUp', label: 'Fade up' },\n            { value: 'blurIn', label: 'Blur in' },\n            { value: 'scaleUp', label: 'Scale up' },\n            { value: 'scaleDown', label: 'Scale down' },\n          ],\n          defaultValue: 'none',\n        }),\n        boxAnimateDuration: ResponsiveNumber((props, device) => ({\n          label: 'Box duration',\n          defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n          min: 0.1,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnBoxAnimation(props, device),\n        })),\n        boxAnimateDelay: ResponsiveNumber((props, device) => ({\n          label: 'Box delay',\n          defaultValue: DEFAULT_BOX_ANIMATE_DELAY,\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnBoxAnimation(props, device),\n        })),\n        itemAnimateType: ResponsiveSelect({\n          label: 'Animate items in',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'none', label: 'None' },\n            { value: 'fadeIn', label: 'Fade in' },\n            { value: 'fadeRight', label: 'Fade right' },\n            { value: 'fadeDown', label: 'Fade down' },\n            { value: 'fadeLeft', label: 'Fade left' },\n            { value: 'fadeUp', label: 'Fade up' },\n            { value: 'blurIn', label: 'Blur in' },\n            { value: 'scaleUp', label: 'Scale up' },\n            { value: 'scaleDown', label: 'Scale down' },\n          ],\n          defaultValue: 'none',\n        }),\n        itemAnimateDuration: ResponsiveNumber((props, device) => ({\n          label: 'Items duration',\n          defaultValue: DEFAULT_BOX_ANIMATE_DURATION,\n          min: 0.1,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        itemAnimateDelay: ResponsiveNumber((props, device) => ({\n          label: 'Items delay',\n          defaultValue: DEFAULT_ITEM_ANIMATE_DELAY,\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        itemStaggerDuration: ResponsiveNumber((props, device) => ({\n          label: 'Stagger',\n          min: 0,\n          step: 0.05,\n          suffix: 's',\n          defaultValue: DEFAULT_ITEM_STAGGER_DURATION,\n          hidden: isHiddenBasedOnItemAnimation(props, device),\n        })),\n        hidePlaceholder: Checkbox(props => ({\n          label: 'Hide placeholder',\n          hidden: props.children != null,\n        })),\n        children: Grid(),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":["import_constants"]}

package/dist/esm/api-handler/handlers/manifest.js

@@ -8,7 +8,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return ApiResponse.json({
-    version: "0.28.3-canary.6",
+    version: "0.28.3-canary.8",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/esm/client/index.js

@@ -23,6 +23,7 @@ import { Schema } from "@makeswift/controls";
 import { EMBEDDED_DOCUMENT_TYPE } from "../state/modules/read-only-documents";
 import { mergeTranslatedContent } from "../state/translations/merge";
 import { getTranslatableContent } from "../state/translations/get";
+import { isNonNullable } from "../utils/isNonNullable";
 import { SnippetLocation as SnippetLocation2 } from "../api/graphql/generated/types";
 const makeswiftPageResultSchema = z.object({
   id: z.string(),
@@ -197,25 +198,31 @@ Received "${apiKey}" instead.`
     }
     this.apiKey = apiKey;
     this.graphqlClient = new GraphQLClient(new URL("graphql", runtime.apiOrigin).href, {
-      "makeswift-runtime-version": "0.28.3-canary.6"
+      "makeswift-runtime-version": "0.28.3-canary.8"
     });
     this.runtime = runtime;
   }
   get apiOrigin() {
     return this.runtime.apiOrigin;
   }
-  async fetch(path, siteVersion) {
+  async fetch(path, siteVersion, init) {
     const requestUrl = new URL(path, this.apiOrigin);
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.28.3-canary.6"
+      "makeswift-runtime-version": "0.28.3-canary.8"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);
       requestHeaders.set("makeswift-preview-token", siteVersion.token);
     }
+    if (init?.headers) {
+      new Headers(init.headers).forEach((value, key) => {
+        requestHeaders.set(key, value);
+      });
+    }
     const response = await fetch(requestUrl.toString(), {
+      ...init,
       headers: requestHeaders,
       ...siteVersion != null ? { cache: "no-store" } : {},
       ...this.fetchOptions(siteVersion)
@@ -306,6 +313,31 @@ Received "${apiKey}" instead.`
     }
     return await response.json();
   }
+  async getElementTreesBulk(ids, siteVersion, locale) {
+    if (ids.length === 0)
+      return [];
+    const requestBody = { ids };
+    if (locale != null)
+      requestBody.locale = locale;
+    const response = await this.fetch("v0/element-trees/bulk", siteVersion, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(requestBody)
+    });
+    if (!response.ok) {
+      const failedBody = await failedResponseBody(response);
+      console.error(`Failed to get element trees for [${ids.join(", ")}]`, {
+        response: failedBody,
+        siteVersion,
+        locale
+      });
+      throw new Error(`Failed to get element trees: ${responseError(response)}`);
+    }
+    const responseBody = await response.json();
+    return responseBody.map(
+      (item) => item != null ? makeswiftComponentDocumentSchema.parse(item) : null
+    );
+  }
   async getIntrospectedResources({
     swatchIds,
     ...introspectedResourceIds
@@ -314,6 +346,8 @@ Received "${apiKey}" instead.`
     const swatches = await this.getSwatches(swatchIds, siteVersion);
     return { ...result, swatches };
   }
+  // TODO: Consolidate this method with the introspectMany method once the
+  // unstable_getComponentSnapshots method is stable and tested in production.
   async introspect(element, siteVersion, locale) {
     const descriptors = this.getElementDescriptors();
     const swatchIds = /* @__PURE__ */ new Set();
@@ -435,6 +469,194 @@ Received "${apiKey}" instead.`
       localizedResourcesMap: locale != null ? { [locale]: Object.fromEntries(localizedResourcesMap.entries()) } : {}
     };
   }
+  async introspectMany(trees, siteVersion, locale) {
+    if (trees.length === 0)
+      return /* @__PURE__ */ new Map();
+    const descriptors = this.getElementDescriptors();
+    const globalElementCache = /* @__PURE__ */ new Map();
+    const localizedGlobalElementCache = /* @__PURE__ */ new Map();
+    const treeCaches = new Map(
+      trees.map((tree) => [
+        tree.id,
+        {
+          data: tree.data,
+          swatchIds: /* @__PURE__ */ new Set(),
+          fileIds: /* @__PURE__ */ new Set(),
+          typographyIds: /* @__PURE__ */ new Set(),
+          tableIds: /* @__PURE__ */ new Set(),
+          pageIds: /* @__PURE__ */ new Set(),
+          globalElements: /* @__PURE__ */ new Map(),
+          localizedGlobalElements: /* @__PURE__ */ new Map(),
+          localizedResourcesMap: /* @__PURE__ */ new Map()
+        }
+      ])
+    );
+    for (const currentTreeCache of treeCaches.values()) {
+      const remaining = [currentTreeCache.data];
+      const seen = /* @__PURE__ */ new Set();
+      let current;
+      while (current = remaining.pop()) {
+        let getResourcesFromElementDescriptors2 = function(elementDescriptors2, props) {
+          Object.entries(elementDescriptors2).forEach(([propName, descriptor]) => {
+            getSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+              currentTreeCache.swatchIds.add(swatchId);
+            });
+            getFileIds(descriptor, props[propName]).forEach((fileId) => {
+              currentTreeCache.fileIds.add(fileId);
+            });
+            getTypographyIds(descriptor, props[propName]).forEach((typographyId) => {
+              currentTreeCache.typographyIds.add(typographyId);
+            });
+            getTableIds(descriptor, props[propName]).forEach((tableId) => {
+              currentTreeCache.tableIds.add(tableId);
+            });
+            getPageIds(descriptor, props[propName]).forEach((pageId) => {
+              currentTreeCache.pageIds.add(pageId);
+            });
+            getElementChildren(descriptor, props[propName]).forEach((child) => {
+              if (!seen.has(child.key)) {
+                seen.add(child.key);
+                remaining.push(child);
+              }
+            });
+          });
+        };
+        var getResourcesFromElementDescriptors = getResourcesFromElementDescriptors2;
+        let element;
+        if (isElementReference(current)) {
+          const globalElementId = current.value;
+          let globalElement;
+          if (globalElementCache.has(globalElementId)) {
+            globalElement = globalElementCache.get(globalElementId);
+          } else {
+            globalElement = await this.getGlobalElement(globalElementId, siteVersion);
+            globalElementCache.set(globalElementId, globalElement);
+          }
+          let elementData = globalElement?.data;
+          if (locale) {
+            let localizedGlobalElement;
+            if (localizedGlobalElementCache.has(globalElementId)) {
+              localizedGlobalElement = localizedGlobalElementCache.get(globalElementId);
+            } else {
+              localizedGlobalElement = await this.getLocalizedGlobalElement(
+                globalElementId,
+                locale,
+                siteVersion
+              );
+              localizedGlobalElementCache.set(globalElementId, localizedGlobalElement);
+            }
+            if (localizedGlobalElement) {
+              elementData = localizedGlobalElement.data;
+              currentTreeCache.localizedResourcesMap.set(globalElementId, localizedGlobalElement.id);
+              currentTreeCache.localizedGlobalElements.set(
+                localizedGlobalElement.id,
+                localizedGlobalElement
+              );
+            } else {
+              currentTreeCache.localizedResourcesMap.set(globalElementId, null);
+            }
+          }
+          currentTreeCache.globalElements.set(globalElementId, globalElement);
+          if (elementData == null)
+            continue;
+          element = elementData;
+        } else {
+          element = current;
+        }
+        const elementDescriptors = descriptors.get(element.type);
+        if (elementDescriptors == null)
+          continue;
+        getResourcesFromElementDescriptors2(elementDescriptors, element.props);
+      }
+    }
+    const allSwatchIds = /* @__PURE__ */ new Set();
+    const allFileIds = /* @__PURE__ */ new Set();
+    const allTypographyIds = /* @__PURE__ */ new Set();
+    const allTableIds = /* @__PURE__ */ new Set();
+    const allPageIds = /* @__PURE__ */ new Set();
+    for (const currentTreeCache of treeCaches.values()) {
+      currentTreeCache.swatchIds.forEach((id) => allSwatchIds.add(id));
+      currentTreeCache.fileIds.forEach((id) => allFileIds.add(id));
+      currentTreeCache.typographyIds.forEach((id) => allTypographyIds.add(id));
+      currentTreeCache.tableIds.forEach((id) => allTableIds.add(id));
+      currentTreeCache.pageIds.forEach((id) => allPageIds.add(id));
+    }
+    const typographies = await this.getTypographies([...allTypographyIds], siteVersion);
+    typographies.forEach((typography) => {
+      if (typography == null)
+        return;
+      const secondarySwatchIds = [];
+      typography.style.forEach((style) => {
+        const swatchId = style.value.color?.swatchId;
+        if (swatchId != null) {
+          secondarySwatchIds.push(swatchId);
+          allSwatchIds.add(swatchId);
+        }
+      });
+      if (secondarySwatchIds.length > 0) {
+        for (const currentTreeCache of treeCaches.values()) {
+          if (currentTreeCache.typographyIds.has(typography.id)) {
+            secondarySwatchIds.forEach((id) => currentTreeCache.swatchIds.add(id));
+          }
+        }
+      }
+    });
+    const [pagePathnames, { swatches, files, tables }] = await Promise.all([
+      this.getPagePathnameSlices([...allPageIds], siteVersion, { locale }),
+      this.getIntrospectedResources(
+        {
+          swatchIds: [...allSwatchIds],
+          fileIds: [...allFileIds],
+          tableIds: [...allTableIds]
+        },
+        siteVersion
+      )
+    ]);
+    const result = /* @__PURE__ */ new Map();
+    for (const [treeId, currentTreeCache] of treeCaches) {
+      const apiResources = {
+        [APIResourceType.Swatch]: [...currentTreeCache.swatchIds].map((id) => ({
+          id,
+          value: swatches.find((swatch) => swatch?.id === id) ?? null
+        })),
+        [APIResourceType.File]: [...currentTreeCache.fileIds].map((id) => ({
+          id,
+          value: files.find((file) => file?.id === id) ?? null
+        })),
+        [APIResourceType.Typography]: [...currentTreeCache.typographyIds].map((id) => ({
+          id,
+          value: typographies.find((typography) => typography?.id === id) ?? null
+        })),
+        [APIResourceType.Table]: [...currentTreeCache.tableIds].map((id) => ({
+          id,
+          value: tables.find((table) => table?.id === id) ?? null
+        })),
+        [APIResourceType.PagePathnameSlice]: [...currentTreeCache.pageIds].map((id) => ({
+          id,
+          value: pagePathnames.find((pagePathnameSlice) => pagePathnameSlice?.id === id) ?? null,
+          locale
+        })),
+        [APIResourceType.GlobalElement]: [...currentTreeCache.globalElements.entries()].map(
+          ([id, value]) => ({
+            id,
+            value
+          })
+        ),
+        [APIResourceType.LocalizedGlobalElement]: [
+          ...currentTreeCache.localizedGlobalElements.entries()
+        ].map(([id, value]) => ({
+          id,
+          value,
+          locale
+        }))
+      };
+      result.set(treeId, {
+        apiResources,
+        localizedResourcesMap: locale != null ? { [locale]: Object.fromEntries(currentTreeCache.localizedResourcesMap.entries()) } : {}
+      });
+    }
+    return result;
+  }
   async getPageSnapshot(pathname, {
     siteVersion: siteVersionPromise,
     locale,
@@ -539,6 +761,58 @@ Received "${apiKey}" instead.`
       }
     };
   }
+  /**
+   * Fetches multiple component snapshots in a single bulk request with unified introspection.
+   *
+   * @param ids - Element tree IDs to fetch. Maximum 100 IDs per call.
+   */
+  // TODO: Make getComponentSnapshot use this method under the hood once the v0 bulk endpoint is stable.
+  async unstable_getComponentSnapshots(ids, {
+    siteVersion: siteVersionPromise,
+    locale,
+    allowLocaleFallback = true
+  }) {
+    if (ids.length === 0)
+      return [];
+    const siteVersion = await siteVersionPromise;
+    let documents = await this.getElementTreesBulk(ids, siteVersion, locale);
+    const baseLocaleWasRequested = locale == null;
+    const canAttemptLocaleFallback = !baseLocaleWasRequested && allowLocaleFallback;
+    const fallbackIndices = [];
+    if (canAttemptLocaleFallback) {
+      documents.forEach((doc, i) => {
+        if (doc == null)
+          fallbackIndices.push(i);
+      });
+      if (fallbackIndices.length > 0) {
+        const fallbackIds = fallbackIndices.map((i) => ids[i]);
+        const fallbackDocuments = await this.getElementTreesBulk(fallbackIds, siteVersion);
+        fallbackIndices.forEach((originalIndex, fallbackIndex) => {
+          documents[originalIndex] = fallbackDocuments[fallbackIndex];
+        });
+      }
+    }
+    const treesToIntrospect = documents.map((doc) => doc?.data != null ? { id: doc.id, data: doc.data } : null).filter(isNonNullable);
+    const cacheDataMap = await this.introspectMany(treesToIntrospect, siteVersion, locale ?? null);
+    return ids.map((id, i) => {
+      const document = documents[i];
+      const key = deterministicUUID({ id, locale, seed: this.apiKey.split("-").at(0) });
+      if (document == null || document.data == null) {
+        return {
+          document: { id, locale: locale ?? null, data: null },
+          key,
+          cacheData: CacheData.empty(),
+          meta: { allowLocaleFallback, requestedLocale: locale ?? null }
+        };
+      }
+      return {
+        document,
+        key,
+        cacheData: cacheDataMap.get(id) ?? CacheData.empty(),
+        meta: { allowLocaleFallback, requestedLocale: locale ?? null }
+      };
+    });
+  }
   async getSwatch(swatchId, siteVersion) {
     const response = await this.fetch(`v3/swatches/${swatchId}`, siteVersion);
     if (!response.ok) {
@@ -661,7 +935,7 @@ Received "${apiKey}" instead.`
       headers: {
         "x-api-key": this.apiKey,
         "makeswift-site-api-key": this.apiKey,
-        "makeswift-runtime-version": "0.28.3-canary.6",
+        "makeswift-runtime-version": "0.28.3-canary.8",
         "content-type": "application/json"
       },
       body: JSON.stringify({ token }),