handoff-app 1.2.2-7 → 2.0.0-1

package/src/app/pages/api/docs/tokens/foundations/[type].ts

@@ -0,0 +1,32 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleDocsRoute, idFromJsonParam, sendDocsData, sendDocsError } from '@/lib/docs-api';
+import { localStylesKeyForFoundationType } from '@handoff/registry/tokens/sets';
+import { tokenFormatStrings } from '@/lib/docs-api/token-detail';
+
+/**
+ * `GET /api/docs/tokens/foundations/{type}.json` — the `foundation/{type}` set: the `localStyles`
+ * slice (`design`) plus the generated download strings (css/scss/styleDictionary/types) and the full
+ * artifact list. Mode-independent: the same shape whether the filesystem or the registry database
+ * backs it. `Cache-Control: no-store` so a publish surfaces without a rebuild/redeploy.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleDocsRoute(req, res, async (backend) => {
+    const type = idFromJsonParam(req.query.type);
+    if (!type) {
+      sendDocsError(res, 'not_found', 'Missing foundation token type.');
+      return;
+    }
+    const detail = await backend.getTokenSetDetail(`foundation/${type}`);
+    if (!detail) {
+      sendDocsError(res, 'not_found', `Foundation token set "${type}" was not found.`);
+      return;
+    }
+    const localStylesKey = localStylesKeyForFoundationType(type);
+    res.setHeader('Cache-Control', 'no-store, max-age=0');
+    sendDocsData(res, 200, {
+      design: localStylesKey ? { [localStylesKey]: detail.record } : {},
+      ...tokenFormatStrings(detail.artifacts),
+      artifacts: detail.artifacts,
+    });
+  });
+}

package/src/app/pages/api/registry/components/[id]/files/[...filePath].ts

@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleEntityFileItem } from '@/lib/registry-api/entity-routes';
+
+/**
+ * `GET`, `PUT`, and `DELETE` for a single component text-file record addressed by its relative
+ * path. Declaration kind and unsafe paths are rejected; mutations require the bearer token.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleEntityFileItem(req, res, 'component');
+}
+
+/** Accept request bodies up to Vercel's 4.5 MB function limit (vs. Next's 1 MB default) for the PUT file upsert. */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/components/[id]/files/index.ts

@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleEntityFilesCollection } from '@/lib/registry-api/entity-routes';
+
+/**
+ * `GET /api/registry/components/{id}/files` (list) and `POST` (create/replace a text-file record).
+ * Declaration files and unsafe paths are rejected with `400 bad_request`; POST requires the token.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleEntityFilesCollection(req, res, 'component');
+}
+
+/** Accept request bodies up to Vercel's 4.5 MB function limit (vs. Next's 1 MB default) for the POST file upsert. */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/components/[id].ts

@@ -0,0 +1,20 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleEntityItem } from '@/lib/registry-api/entity-routes';
+
+/**
+ * `GET` (detail incl. build state), `PUT` (allowlisted metadata update — never touches
+ * artifacts/build), and `DELETE` for a single component. Registry-runtime only; mutations require
+ * the bearer token.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleEntityItem(req, res, 'component');
+}
+
+/** Accept request bodies up to Vercel's 4.5 MB function limit (vs. Next's 1 MB default) for the PUT write. */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/components/index.ts

@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleEntityCollection } from '@/lib/registry-api/entity-routes';
+
+/**
+ * `GET /api/registry/components` (list) and `POST /api/registry/components` (create a metadata-only
+ * record from allowlisted fields). Registry-runtime only; POST requires the bearer token.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleEntityCollection(req, res, 'component');
+}
+
+/** Accept request bodies up to Vercel's 4.5 MB function limit (vs. Next's 1 MB default) for the POST write. */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/health.ts

@@ -0,0 +1,20 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { ensureRegistryMode, sendRegistryError } from '@/lib/registry-api';
+
+/**
+ * `GET /api/registry/health` — registry liveness. Registry-runtime only
+ * (`409 runtime_mode_conflict` in workspace mode); unauthenticated, like all registry GET reads. It
+ * reports the runtime/source without touching the database so it can be used as a cheap probe, and
+ * returns the documented bare `{ ok, runtime, source }` body rather than the data envelope.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): void {
+  if (!ensureRegistryMode(res)) {
+    return;
+  }
+  if ((req.method ?? 'GET').toUpperCase() !== 'GET') {
+    res.setHeader('Allow', 'GET');
+    sendRegistryError(res, 'method_not_allowed', `Method ${req.method ?? 'unknown'} not allowed; health is GET-only.`);
+    return;
+  }
+  res.status(200).json({ ok: true, runtime: 'registry', source: 'database' });
+}

package/src/app/pages/api/registry/patterns/[id]/files/[...filePath].ts

@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleEntityFileItem } from '@/lib/registry-api/entity-routes';
+
+/**
+ * `GET`, `PUT`, and `DELETE` for a single pattern text-file record addressed by its relative path.
+ * Declaration kind and unsafe paths are rejected; mutations require the bearer token.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleEntityFileItem(req, res, 'pattern');
+}
+
+/** Accept request bodies up to Vercel's 4.5 MB function limit (vs. Next's 1 MB default) for the PUT file upsert. */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/patterns/[id]/files/index.ts

@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleEntityFilesCollection } from '@/lib/registry-api/entity-routes';
+
+/**
+ * `GET /api/registry/patterns/{id}/files` (list) and `POST` (create/replace a text-file record).
+ * Declaration files and unsafe paths are rejected with `400 bad_request`; POST requires the token.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleEntityFilesCollection(req, res, 'pattern');
+}
+
+/** Accept request bodies up to Vercel's 4.5 MB function limit (vs. Next's 1 MB default) for the POST file upsert. */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/patterns/[id].ts

@@ -0,0 +1,20 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleEntityItem } from '@/lib/registry-api/entity-routes';
+
+/**
+ * `GET` (detail incl. build state), `PUT` (allowlisted metadata update — never touches
+ * artifacts/build), and `DELETE` for a single pattern. Registry-runtime only; mutations require the
+ * bearer token.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleEntityItem(req, res, 'pattern');
+}
+
+/** Accept request bodies up to Vercel's 4.5 MB function limit (vs. Next's 1 MB default) for the PUT write. */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/patterns/index.ts

@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleEntityCollection } from '@/lib/registry-api/entity-routes';
+
+/**
+ * `GET /api/registry/patterns` (list) and `POST /api/registry/patterns` (create a metadata-only
+ * record from allowlisted fields). Registry-runtime only; POST requires the bearer token.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleEntityCollection(req, res, 'pattern');
+}
+
+/** Accept request bodies up to Vercel's 4.5 MB function limit (vs. Next's 1 MB default) for the POST write. */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/transfer/[kind]/[id].ts

@@ -0,0 +1,39 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { singleQueryValue } from '@/lib/api/query';
+import { handleRegistryRoute, sendRegistryError } from '@/lib/registry-api';
+import { handleCheckoutRoute, handleTransferRoute } from '@/lib/registry-api/transfer';
+
+/**
+ * `/api/registry/transfer/{component|pattern|page}/:id` — the transfer endpoint.
+ *
+ * - `GET` is checkout: returns the normalized record + registry-safe source files so a
+ *   connected workspace can reconstruct the entity locally. Unauthenticated read.
+ * - `PUT` is publish ingestion: the only path allowed to set an entity's
+ *   render/build-defining fields, source files, rendered artifacts, and build metadata. Requires the
+ *   bearer token.
+ *
+ * Both are registry-runtime only (enforced by the guard stack).
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  const kind = singleQueryValue(req.query.kind);
+  if (kind !== 'component' && kind !== 'pattern' && kind !== 'page') {
+    return handleRegistryRoute(req, res, ['GET', 'PUT'], async () => {
+      sendRegistryError(res, 'not_found', `Unknown transfer entity kind "${kind ?? ''}".`);
+    });
+  }
+  const method = (req.method ?? 'GET').toUpperCase();
+  return method === 'GET' ? handleCheckoutRoute(req, res, kind) : handleTransferRoute(req, res, kind);
+}
+
+/**
+ * Publish packages (source files + rendered artifacts) are the largest registry payloads, so accept
+ * up to Vercel's 4.5 MB function body limit instead of Next's 1 MB default (anything larger would be
+ * rejected by the platform with `413 FUNCTION_PAYLOAD_TOO_LARGE` regardless of this setting).
+ */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/transfer/assets/[collection].ts

@@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleAssetCollectionRoute } from '@/lib/registry-api/asset-transfer';
+
+/**
+ * `/api/registry/transfer/assets/:collection`: the asset collection manifest endpoint.
+ *
+ * - `GET` is checkout: the collection's manifest metadata (bodies travel separately as blobs).
+ * - `PUT` is publish ingestion: validates the manifest, asserts referenced blobs exist, and
+ *   atomically replaces the collection's manifest. Requires the bearer token.
+ *
+ * Both are registry-runtime only (enforced by the guard stack).
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleAssetCollectionRoute(req, res);
+}
+
+/** Manifests are metadata-only but can be large for big collections, so allow up to the 4.5 MB limit. */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/transfer/assets/blobs/[hash].ts

@@ -0,0 +1,23 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleAssetBlobRoute } from '@/lib/registry-api/asset-transfer';
+
+/**
+ * `/api/registry/transfer/assets/blobs/:hash`: one content-addressed blob.
+ *
+ * - `PUT` stores the raw binary body through the active storage provider (inline `bytea` by default,
+ *   or an object-storage adapter). Idempotent by hash; requires the bearer token.
+ * - `GET` returns the blob's bytes, or redirects to a provider URL for object-backed content.
+ *
+ * Registry-runtime only (guard stack).
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleAssetBlobRoute(req, res);
+}
+
+/** Blobs are binary, so the JSON body parser is disabled and the raw bytes reach the handler intact. */
+export const config = {
+  api: {
+    bodyParser: false,
+    responseLimit: false,
+  },
+};

package/src/app/pages/api/registry/transfer/assets/blobs/have.ts

@@ -0,0 +1,11 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleAssetBlobHaveRoute } from '@/lib/registry-api/asset-transfer';
+
+/**
+ * `POST /api/registry/transfer/assets/blobs/have`: given `{ hashes }`, return `{ missing }`, the
+ * content hashes the registry does not yet have, so publish uploads only new blobs. Requires the
+ * bearer token; registry-runtime only.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleAssetBlobHaveRoute(req, res);
+}

package/src/app/pages/api/registry/transfer/assets/index.ts

@@ -0,0 +1,10 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleAssetSummaryRoute } from '@/lib/registry-api/asset-transfer';
+
+/**
+ * `GET /api/registry/transfer/assets`: list asset collection summaries (collection + source hash)
+ * for the CLI's skip-unchanged / bulk-checkout logic. Registry-runtime only (guard stack).
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleAssetSummaryRoute(req, res);
+}

package/src/app/pages/api/registry/transfer/tokens/[...setId].ts

@@ -0,0 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleTokenCheckoutRoute, handleTokenTransferRoute } from '@/lib/registry-api/token-transfer';
+
+/**
+ * `/api/registry/transfer/tokens/:setId` — the token-set transfer endpoint. The catch-all param
+ * carries the multi-segment logical set id (`foundation/colors`, `component/button`).
+ *
+ * - `GET` is checkout: the set record + its generated artifacts. Unauthenticated read.
+ * - `PUT` is publish ingestion: validates the package and atomically upserts the set + its artifacts.
+ *   Requires the bearer token.
+ *
+ * Both are registry-runtime only (enforced by the guard stack).
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  const method = (req.method ?? 'GET').toUpperCase();
+  return method === 'GET' ? handleTokenCheckoutRoute(req, res) : handleTokenTransferRoute(req, res);
+}
+
+/** Token packages carry generated artifact content, so accept up to Vercel's 4.5 MB function body limit. */
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '4.5mb',
+    },
+  },
+};

package/src/app/pages/api/registry/transfer/tokens/index.ts

@@ -0,0 +1,11 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleTokenSummaryRoute } from '@/lib/registry-api/token-transfer';
+
+/**
+ * `GET /api/registry/transfer/tokens` — list the registry's token-set summaries (id + kind + source
+ * hash + status) so a connected workspace can skip unchanged sets and enumerate sets for bulk
+ * checkout. Registry-runtime only (enforced by the guard stack).
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleTokenSummaryRoute(req, res);
+}

package/src/app/pages/assets/fonts.tsx

@@ -11,7 +11,11 @@ import remarkGfm from 'remark-gfm';
 import Footer from '../../components/Footer';
 import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
 import Header from '../../components/old/Header';
-import { fetchDocPageMarkdown, FontDocumentationProps, getClientRuntimeConfig, getTokens } from '../../components/util';
+import { buildTimeFoundationDesign, fetchDocPageMarkdown, FontDocumentationProps, getClientRuntimeConfig } from '../../components/util';
+import { useFoundationTokens } from '../../components/util/useFoundationTokens';
+
+const basePath = process.env.HANDOFF_APP_BASE_PATH ?? '';
+const isRegistry = process.env.HANDOFF_RUNTIME_MODE === 'registry';
 
 /**
  * This statically renders content from the markdown, creating menu and providing
@@ -22,23 +26,21 @@ import { fetchDocPageMarkdown, FontDocumentationProps, getClientRuntimeConfig, g
  * @returns
  */
 export const getStaticProps: GetStaticProps = async () => {
-  const fonts = fs.readdirSync(
-    path.resolve(process.env.HANDOFF_MODULE_PATH ?? '', '.handoff', `${process.env.HANDOFF_PROJECT_ID}`, 'public', 'fonts')
-  );
+  // Workspace/static reads the mirrored font archives; a registry build has none (hydrated at runtime).
   const customFonts: string[] = [];
-
-  fonts.map((font) => {
-    if (font.endsWith('.zip')) {
-      // We have a custom font
-      const name = font.replace('.zip', '');
-      customFonts.push(name);
+  try {
+    const fontDir = path.resolve(process.env.HANDOFF_MODULE_PATH ?? '', '.handoff', `${process.env.HANDOFF_PROJECT_ID}`, 'public', 'fonts');
+    for (const font of fs.readdirSync(fontDir)) {
+      if (font.endsWith('.zip')) customFonts.push(font.replace('.zip', ''));
     }
-  });
+  } catch {
+    // No local font archives (e.g. a registry build), so customFonts stays empty.
+  }
 
   return {
     props: {
-      ...fetchDocPageMarkdown('docs/assets/', 'fonts', `/assets`).props,
-      design: getTokens().localStyles,
+      ...(await fetchDocPageMarkdown('docs/assets/', 'fonts', `/assets`)).props,
+      design: buildTimeFoundationDesign(),
       config: getClientRuntimeConfig(),
       customFonts,
     },
@@ -46,12 +48,34 @@ export const getStaticProps: GetStaticProps = async () => {
 };
 
 const FontsPage = ({ content, menu, metadata, customFonts, design, config }: FontDocumentationProps) => {
-  const fontFamilies: string[] = uniq(design.typography.map((type) => type.values.fontFamily));
+  // Registry hydrates typography tokens (for the family list) + the published font archives at runtime.
+  const tokens = useFoundationTokens('typography', { design });
+  const [hydratedFonts, setHydratedFonts] = React.useState<string[]>(customFonts);
+  React.useEffect(() => {
+    if (!isRegistry) return;
+    let active = true;
+    fetch(`${basePath}/api/docs/assets/fonts`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (!active || !data?.assets) return;
+        const names = (data.assets as { path: string }[])
+          .filter((a) => typeof a.path === 'string' && /^fonts\/.+\.zip$/i.test(a.path))
+          .map((a) => a.path.slice('fonts/'.length).replace(/\.zip$/i, ''));
+        setHydratedFonts(names);
+      })
+      .catch(() => {});
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const typography = tokens.design?.typography ?? [];
+  const fontFamilies: string[] = uniq(typography.map((type) => type.values.fontFamily));
   const fontLinks: string[] = fontFamilies.map((fontFamily) => {
     const machineName = fontFamily.replace(/\s/g, '');
-    const custom = customFonts.find((font) => font === machineName);
+    const custom = hydratedFonts.find((font) => font === machineName);
     if (custom) {
-      return `/fonts/${machineName}.zip`;
+      return isRegistry ? `${basePath}/api/docs/assets/fonts/fonts/${machineName}.zip` : `/fonts/${machineName}.zip`;
     }
     return `https://fonts.google.com/specimen/${fontFamily}`;
   });
@@ -61,7 +85,7 @@ const FontsPage = ({ content, menu, metadata, customFonts, design, config }: Fon
         <title>{metadata.metaTitle}</title>
         <meta name="description" content={metadata.metaDescription} />
       </Head>
-      <Header menu={menu} config={config} />
+      <Header config={config} />
       <section className="c-content">
         <div className="o-container-fluid">
           <div className="c-hero">

package/src/app/pages/assets/index.tsx

@@ -21,7 +21,7 @@ import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
-      ...fetchDocPageMarkdown('docs/', 'assets', `/assets`).props,
+      ...(await fetchDocPageMarkdown('docs/', 'assets', `/assets`)).props,
       config: getClientRuntimeConfig(),
     },
   };
@@ -34,7 +34,7 @@ const AssetsPage = ({ content, menu, metadata, config }: DocumentationProps) =>
         <title>{metadata.metaTitle}</title>
         <meta name="description" content={metadata.metaDescription} />
       </Head>
-      <Header menu={menu} config={config} />
+      <Header config={config} />
       <section className="c-content">
         <div className="o-container-fluid">
           <div className="c-hero c-hero--boxed c-hero--bg-red">

package/src/app/pages/assets/logos.tsx

@@ -6,6 +6,7 @@ import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import Footer from '../../components/Footer';
 import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/MarkdownComponents';
+import { buildAssetDownloadUrl } from '@handoff/artifacts/url';
 import Header from '../../components/old/Header';
 import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from '../../components/util';
 
@@ -20,7 +21,7 @@ import { DocumentationProps, fetchDocPageMarkdown, getClientRuntimeConfig } from
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
-      ...fetchDocPageMarkdown('docs/assets/', 'logos', `/assets`).props,
+      ...(await fetchDocPageMarkdown('docs/assets/', 'logos', `/assets`)).props,
       config: getClientRuntimeConfig(),
     },
   };
@@ -33,7 +34,7 @@ const AssetsLogosPage = ({ content, menu, metadata, config }: DocumentationProps
         <title>{metadata.metaTitle}</title>
         <meta name="description" content={metadata.metaDescription} />
       </Head>
-      <Header menu={menu} config={config} />
+      <Header config={config} />
       <section className="c-content">
         <div className="o-container-fluid">
           <div className="c-hero">
@@ -52,7 +53,9 @@ const AssetsLogosPage = ({ content, menu, metadata, config }: DocumentationProps
                 <h4>{config?.app?.client} Logo</h4>
                 <p>Vector files of approved {config?.app?.client} logos.</p>
                 <p>
-                  <a href={config?.assets_zip_links?.logos ?? '/logos.zip'}>Download Logos</a>
+                  <a href={config?.assets_zip_links?.logos ?? buildAssetDownloadUrl('logos', process.env.HANDOFF_APP_BASE_PATH)} download>
+                    Download Logos
+                  </a>
                 </p>
               </div>
             </div>

package/src/app/pages/foundations/colors.tsx

@@ -12,7 +12,8 @@ import AnchorNav from '../../components/Navigation/AnchorNav';
 import PrevNextNav from '../../components/Navigation/PrevNextNav';
 import HeadersType from '../../components/Typography/Headers';
 import * as util from '../../components/util';
-import { getTokens } from '../../components/util';
+import { buildTimeFoundationDesign, getTokens } from '../../components/util';
+import { useFoundationTokens } from '../../components/util/useFoundationTokens';
 
 /**
  * This statically renders content from the markdown, creating menu and providing
@@ -25,9 +26,9 @@ import { getTokens } from '../../components/util';
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
-      ...util.fetchFoundationDocPageMarkdown('docs/foundations/', 'colors', `/foundations`).props,
+      ...(await util.fetchFoundationDocPageMarkdown('docs/foundations/', 'colors', `/foundations`)).props,
       config: util.getClientRuntimeConfig(),
-      design: getTokens().localStyles,
+      design: buildTimeFoundationDesign(),
     },
   };
 };
@@ -37,13 +38,22 @@ const ColorsPage = ({
   menu,
   metadata,
   current,
-  scss,
-  css,
-  styleDictionary,
-  types,
-  design,
+  scss: scssProp,
+  css: cssProp,
+  styleDictionary: styleDictionaryProp,
+  types: typesProp,
+  design: designProp,
   config,
 }: util.FoundationDocumentationProps) => {
+  // In registry mode the build-time token data/downloads are empty; hydrate from the docs read API.
+  const { design, css, scss, styleDictionary, types } = useFoundationTokens('colors', {
+    design: designProp,
+    css: cssProp,
+    scss: scssProp,
+    styleDictionary: styleDictionaryProp,
+    types: typesProp,
+  });
+
   const colorGroups = Object.fromEntries(
     Object.entries(groupBy(design.color, 'group'))
       .map(([groupKey, colors]) => {

package/src/app/pages/foundations/effects.tsx

@@ -13,7 +13,8 @@ import { MarkdownComponents, remarkCodeMeta } from '../../components/Markdown/Ma
 import AnchorNav from '../../components/Navigation/AnchorNav';
 import HeadersType from '../../components/Typography/Headers';
 import * as util from '../../components/util';
-import { getTokens } from '../../components/util';
+import { buildTimeFoundationDesign, getTokens } from '../../components/util';
+import { useFoundationTokens } from '../../components/util/useFoundationTokens';
 
 type EffectParametersObject = CoreTypes.IEffectObject['effects'][number];
 
@@ -41,8 +42,8 @@ export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       config: util.getClientRuntimeConfig(),
-      ...util.fetchFoundationDocPageMarkdown('docs/foundations/', 'effects', `/foundations`).props,
-      design: getTokens().localStyles,
+      ...(await util.fetchFoundationDocPageMarkdown('docs/foundations/', 'effects', `/foundations`)).props,
+      design: buildTimeFoundationDesign(),
     },
   };
 };
@@ -52,13 +53,22 @@ const EffectsPage = ({
   menu,
   metadata,
   current,
-  css,
-  scss,
-  styleDictionary,
-  types,
-  design,
+  css: cssProp,
+  scss: scssProp,
+  styleDictionary: styleDictionaryProp,
+  types: typesProp,
+  design: designProp,
   config,
 }: util.FoundationDocumentationProps) => {
+  // In registry mode the build-time token data/downloads are empty; hydrate from the docs read API.
+  const { design, css, scss, styleDictionary, types } = useFoundationTokens('effects', {
+    design: designProp,
+    css: cssProp,
+    scss: scssProp,
+    styleDictionary: styleDictionaryProp,
+    types: typesProp,
+  });
+
   const effectGroups = Object.fromEntries(
     Object.entries(groupBy(design.effect, 'group')).map(([groupKey, effects]) => {
       return [