handoff-app 2.0.0-11 → 2.0.0-13

package/src/app/lib/mcp/server.ts

@@ -1,7 +1,10 @@
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { registerComponentTools } from './components';
-import { registerPageTools } from './pages';
-import { registerTokenTools } from './tokens';
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { CallToolRequestSchema, ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types.js';
+import { AjvJsonSchemaValidator } from '@modelcontextprotocol/sdk/validation/ajv';
+import { componentTools } from './components';
+import { pageTools } from './pages';
+import { fail } from './result';
+import { tokenTools } from './tokens';
 
 /**
  * The Handoff MCP server: read-only access to the design system's components, tokens and pages.
@@ -21,10 +24,19 @@ import { registerTokenTools } from './tokens';
 /** Version of the MCP surface itself, reported in `initialize`. Bump when a tool contract changes. */
 const MCP_SERVER_VERSION = '2.0.0';
 
-export const createMcpServer = (): McpServer => {
-  const server = new McpServer(
+const tools = [...componentTools, ...tokenTools, ...pageTools];
+
+/** Compiled once per process, not per request. */
+const validator = new AjvJsonSchemaValidator();
+const toolsByName = new Map(
+  tools.map((tool) => [tool.definition.name, { ...tool, validate: validator.getValidator(tool.definition.inputSchema) }])
+);
+
+export const createMcpServer = (): Server => {
+  const server = new Server(
     { name: 'handoff', version: MCP_SERVER_VERSION },
     {
+      capabilities: { tools: {} },
       instructions:
         'Design-system knowledge for this project. Before writing UI code, find an existing component ' +
         'with handoff_search_components and read it with handoff_get_component. Take colors, typography ' +
@@ -33,8 +45,20 @@ export const createMcpServer = (): McpServer => {
     }
   );
 
-  registerComponentTools(server);
-  registerTokenTools(server);
-  registerPageTools(server);
+  server.setRequestHandler(ListToolsRequestSchema, () => ({ tools: tools.map((tool) => tool.definition) }));
+
+  // Unknown tools and invalid arguments are tool errors, so the agent can read them and retry.
+  server.setRequestHandler(CallToolRequestSchema, async ({ params }) => {
+    const tool = toolsByName.get(params.name);
+    if (!tool) {
+      return fail(`Tool "${params.name}" was not found.`);
+    }
+    const args = tool.validate(params.arguments ?? {});
+    if (!args.valid) {
+      return fail(`Invalid arguments for tool "${params.name}": ${args.errorMessage}.`);
+    }
+    return tool.run(args.data);
+  });
+
   return server;
 };

package/src/app/lib/mcp/tokens.ts

@@ -1,15 +1,16 @@
-import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { z } from 'zod';
 import type { TokenArtifactResource } from '@handoff/store';
 import type { DocsBackend, TokenSetDetail } from '../docs-api/backend';
 import { fail, ok, read } from './result';
+import { defineTool, type McpTool } from './tool';
 
 /** The token tool, and the reshaping that turns stored token sets into variables an agent can emit. */
 
-export const registerTokenTools = (server: McpServer): void => {
-  server.registerTool(
-    'handoff_get_tokens',
+type TokenFormat = 'css' | 'scss' | 'styleDictionary' | 'types';
+
+export const tokenTools: McpTool[] = [
+  defineTool<{ set?: string; kind?: 'foundation' | 'component'; format?: TokenFormat }>(
     {
+      name: 'handoff_get_tokens',
       title: 'Get design tokens',
       description:
         'Design tokens. With no arguments: the list of token sets, plus all foundation tokens (colors, ' +
@@ -20,15 +21,20 @@ export const registerTokenTools = (server: McpServer): void => {
         'stylesheet is available.',
       annotations: { readOnlyHint: true, openWorldHint: false },
       inputSchema: {
-        set: z.string().optional().describe('Token set id from the list, for example "foundation/colors".'),
-        kind: z
-          .enum(['foundation', 'component'])
-          .optional()
-          .describe('Without `set`: list only sets of this kind. `component` leaves out the foundation tokens.'),
-        format: z
-          .enum(['css', 'scss', 'styleDictionary', 'types'])
-          .optional()
-          .describe('With `set`: return the generated file in this format.'),
+        type: 'object',
+        properties: {
+          set: { type: 'string', description: 'Token set id from the list, for example "foundation/colors".' },
+          kind: {
+            type: 'string',
+            enum: ['foundation', 'component'],
+            description: 'Without `set`: list only sets of this kind. `component` leaves out the foundation tokens.',
+          },
+          format: {
+            type: 'string',
+            enum: ['css', 'scss', 'styleDictionary', 'types'] satisfies TokenFormat[],
+            description: 'With `set`: return the generated file in this format.',
+          },
+        },
       },
     },
     async ({ set, kind, format }) =>
@@ -57,8 +63,8 @@ export const registerTokenTools = (server: McpServer): void => {
         }
         return ok({ id: detail.id, kind: detail.kind, format, path: artifact.path, content: artifact.content });
       })
-  );
-};
+  ),
+];
 
 /**
  * A token set's payload, under a key naming which of the four forms it is, so the agent never has to

package/src/app/lib/mcp/tool.ts

@@ -0,0 +1,19 @@
+import type { CallToolResult, Tool } from '@modelcontextprotocol/sdk/types.js';
+
+/**
+ * One MCP tool: its listing, with a plain JSON Schema for its input, and its handler.
+ *
+ * Plain JSON Schema keeps Zod out of the app. The Next build type-checks this code against the
+ * consumer's `node_modules`, where a second Zod copy makes the SDK's Zod types incompatible with ours.
+ */
+export interface McpTool {
+  definition: Tool;
+  /** Runs with arguments already validated against `definition.inputSchema`. */
+  run: (args: unknown) => Promise<CallToolResult>;
+}
+
+/** `Args` must match `definition.inputSchema`; the server validates against the schema before `run`. */
+export const defineTool = <Args>(definition: Tool, run: (args: Args) => Promise<CallToolResult>): McpTool => ({
+  definition,
+  run: run as McpTool['run'],
+});

package/src/app/lib/registry-api/asset-transfer.ts

@@ -6,9 +6,9 @@ import type { RegistryDatabase } from '@handoff/registry/db/client';
 import { assetBlobs, assetCollections, assets } from '@handoff/registry/db/schema';
 import { isAssetCollection, type AssetCollection } from '@handoff/registry/assets/sets';
 import type { AssetCollectionTransferPackage, AssetManifestEntry } from '@handoff/registry/assets/transfer';
-import type { AssetStorage } from '@handoff/registry/asset-storage/types';
+import type { StorageProvider } from '@handoff/registry/asset-storage/types';
 import { singleQueryValue } from '../api/query';
-import { getActiveAssetStorage, getActiveAssetStorageAdapter, getAssetStorageAdapter } from '../asset-storage';
+import { getActiveAssetStorage, getActiveStorageProvider, getStorageProvider } from '../asset-storage';
 import { sendRegistryError } from './errors';
 import { buildMeta } from './meta';
 import { handleRegistryRoute, sendRegistryData } from './handler';
@@ -318,10 +318,10 @@ export const handleAssetBlobRoute = (req: NextApiRequest, res: NextApiResponse):
         'application/octet-stream';
       const active = getActiveAssetStorage();
 
-      const storageProvider = active.adapterKind;
+      const storageProvider = active.provider;
       let content: Buffer | null = null;
       let storageRef: string | null = null;
-      if (active.adapterKind === 'database') {
+      if (active.provider === 'database') {
         if (bytes.length > active.maxInlineBytes) {
           sendRegistryError(
             res,
@@ -332,12 +332,12 @@ export const handleAssetBlobRoute = (req: NextApiRequest, res: NextApiResponse):
         }
         content = bytes;
       } else {
-        const adapter = await getActiveAssetStorageAdapter();
-        if (!adapter) {
-          sendRegistryError(res, 'unexpected_error', `No storage adapter is available for provider "${active.adapterKind}".`);
+        const storage = await getActiveStorageProvider();
+        if (!storage) {
+          sendRegistryError(res, 'unexpected_error', `No asset storage is available for provider "${active.provider}".`);
           return;
         }
-        ({ storageRef } = await adapter.put({ hash, bytes, contentType, size: bytes.length }));
+        ({ storageRef } = await storage.put({ hash, bytes, contentType, size: bytes.length }));
       }
 
       await db
@@ -376,12 +376,12 @@ export const handleAssetBlobRoute = (req: NextApiRequest, res: NextApiResponse):
       sendRegistryError(res, 'not_found', `Blob "${hash}" has no resolvable content.`);
       return;
     }
-    const adapter = await getAssetStorageAdapter(blob.storageProvider);
-    if (!adapter) {
-      sendRegistryError(res, 'unexpected_error', `No storage adapter is available for provider "${blob.storageProvider}".`);
+    const storage = await getStorageProvider(blob.storageProvider);
+    if (!storage) {
+      sendRegistryError(res, 'unexpected_error', `No asset storage is available for provider "${blob.storageProvider}".`);
       return;
     }
-    const result = await adapter.get(blob.storageRef);
+    const result = await storage.get(blob.storageRef);
     if (result.kind === 'redirect') {
       res.redirect(302, result.url);
       return;
@@ -394,13 +394,13 @@ export const handleAssetBlobRoute = (req: NextApiRequest, res: NextApiResponse):
     result.stream.pipe(res);
   });
 
-/** The active adapter when it supports direct uploads, otherwise `null` (the client then uses `PUT`). */
-const getDirectUploadAdapter = async (): Promise<AssetStorage | null> => {
-  if (getActiveAssetStorage().adapterKind === 'database') {
+/** The active provider when it supports direct uploads, otherwise `null` (the client then uses `PUT`). */
+const getDirectUploadProvider = async (): Promise<StorageProvider | null> => {
+  if (getActiveAssetStorage().provider === 'database') {
     return null;
   }
-  const adapter = await getActiveAssetStorageAdapter();
-  return adapter?.createUpload ? adapter : null;
+  const storage = await getActiveStorageProvider();
+  return storage?.createUpload ? storage : null;
 };
 
 const readDirectUploadRequest = (req: NextApiRequest, res: NextApiResponse): { hash: string; size: number; contentType: string } | null => {
@@ -422,8 +422,8 @@ const readDirectUploadRequest = (req: NextApiRequest, res: NextApiResponse): { h
  * Throw unless `storageRef` resolves to a stored object. A redirect is checked with a one-byte
  * ranged `GET`, because a signed read URL usually rejects `HEAD`.
  */
-const assertStored = async (adapter: AssetStorage, storageRef: string, size: number): Promise<void> => {
-  const result = await adapter.get(storageRef);
+const assertStored = async (storage: StorageProvider, storageRef: string, size: number): Promise<void> => {
+  const result = await storage.get(storageRef);
   if (result.kind === 'bytes') {
     if (result.bytes.length !== size) {
       throw new Error(`stored size ${result.bytes.length} does not match ${size}`);
@@ -452,8 +452,8 @@ export const handleAssetBlobUploadRoute = (req: NextApiRequest, res: NextApiResp
       sendRegistryData(res, 200, { upload: null, stored: true }, buildMeta());
       return;
     }
-    const adapter = await getDirectUploadAdapter();
-    const upload = adapter?.createUpload ? await adapter.createUpload(input) : null;
+    const storage = await getDirectUploadProvider();
+    const upload = storage?.createUpload ? await storage.createUpload(input) : null;
     sendRegistryData(res, 200, { upload }, buildMeta());
   });
 
@@ -468,13 +468,13 @@ export const handleAssetBlobCompleteRoute = (req: NextApiRequest, res: NextApiRe
       return;
     }
 
-    const adapter = await getDirectUploadAdapter();
-    if (!adapter) {
+    const storage = await getDirectUploadProvider();
+    if (!storage) {
       sendRegistryError(res, 'bad_request', 'The active asset storage provider does not accept direct uploads.');
       return;
     }
     try {
-      await assertStored(adapter, storageRef, input.size);
+      await assertStored(storage, storageRef, input.size);
     } catch (error) {
       const reason = error instanceof Error ? error.message : String(error);
       sendRegistryError(res, 'bad_request', `Blob "${input.hash}" was not found in storage (${reason}).`, {
@@ -487,7 +487,7 @@ export const handleAssetBlobCompleteRoute = (req: NextApiRequest, res: NextApiRe
       .insert(assetBlobs)
       .values({
         hash: input.hash,
-        storageProvider: getActiveAssetStorage().adapterKind,
+        storageProvider: getActiveAssetStorage().provider,
         content: null,
         storageRef,
         contentType: input.contentType,

package/src/app/lib/server-module.ts

@@ -4,7 +4,7 @@ import { pathToFileURL } from 'url';
 import { resolveEnvReferences } from '@handoff/config/from-env';
 
 /**
- * Import a consumer's server-only module (a custom asset storage adapter, AI provider or email
+ * Import a consumer's server-only module (a custom asset storage, AI or email
  * provider) by the path the config gives, relative to the project.
  *
  * A registry bundle mirrors the tracing root and runs with its root as the working directory, so the

package/src/app/lib/utils.ts

@@ -51,3 +51,10 @@ export const filterOutNull = <T>(value: T): value is NonNullable<T> => value !==
  */
 export const hasRenderableNav = (section?: SectionLink | null): boolean =>
   !!section?.subSections?.some((sub) => (sub.menu && sub.menu.length > 0) || !!sub.dynamic);
+
+/**
+ * The browser title: a page's own `metaTitle` as written, otherwise its title followed by the
+ * site title from `app.title`.
+ */
+export const pageTitle = (metadata: { title?: string; metaTitle?: string }, siteTitle?: string): string =>
+  metadata.metaTitle || [metadata.title, siteTitle].filter(Boolean).join(' | ');

package/src/app/next.config.mjs

@@ -113,9 +113,9 @@ const nextConfig = {
     HANDOFF_AI_DEFAULT_MODEL: '%HANDOFF_AI_DEFAULT_MODEL%',
     HANDOFF_REGISTRY_DRIVER: '%HANDOFF_REGISTRY_DRIVER%',
     HANDOFF_REGISTRY_DATABASE_URL_ENV: '%HANDOFF_REGISTRY_DATABASE_URL_ENV%',
-    // Asset storage adapter, module, and options JSON. Option references keep only their variable
+    // Asset storage provider, module, and options JSON. Option references keep only their variable
     // name and are resolved at request time, so secret values are never baked.
-    HANDOFF_ASSET_STORAGE_ADAPTER: '%HANDOFF_ASSET_STORAGE_ADAPTER%',
+    HANDOFF_ASSET_STORAGE_PROVIDER: '%HANDOFF_ASSET_STORAGE_PROVIDER%',
     HANDOFF_ASSET_STORAGE_MODULE: '%HANDOFF_ASSET_STORAGE_MODULE%',
     HANDOFF_ASSET_STORAGE_MAX_INLINE_BYTES: '%HANDOFF_ASSET_STORAGE_MAX_INLINE_BYTES%',
     HANDOFF_ASSET_STORAGE_OPTIONS: '%HANDOFF_ASSET_STORAGE_OPTIONS%',

package/src/app/pages/[...slug]/index.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../components/util';
 import { resolveDocsBackend } from '../../lib/docs-api/backend';
 import { documentationMetadata, REGISTRY_PAGE_REVALIDATE_SECONDS } from '../../lib/docs-api/page-rendering';
+import { pageTitle } from '../../lib/utils';
 import { Home, getStaticProps as getHomeStaticProps } from '../index';
 
 type CatchAllDocumentationProps = DocumentationProps & { homeAlias?: boolean };
@@ -114,7 +115,7 @@ export default function DocCatchAllPage({
     return (
       <div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-gray-900">
         <Head>
-          <title>404 - Page Not Found</title>
+          <title>{pageTitle({ title: 'Page Not Found' }, config?.app?.title)}</title>
           <meta name="description" content="Page Not Found" />
         </Head>
         <NotFound />

package/src/app/pages/account/ai.tsx

@@ -34,7 +34,7 @@ export const getStaticProps: GetStaticProps = async () => ({ props: { config: ge
 
 export default function AiKeysPage({ config }: { config: ClientConfig }) {
   if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
-    return <AccountLayout title="AI providers">{null}</AccountLayout>;
+    return <AccountLayout config={config} title="AI providers">{null}</AccountLayout>;
   }
 
   return <RegistryAiKeysPage config={config} />;

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

@@ -25,7 +25,7 @@ export const getStaticProps: GetStaticProps = async () => ({ props: { config: ge
 
 export default function AccountPage({ config }: { config: ClientConfig }) {
   if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
-    return <AccountLayout title="Profile">{null}</AccountLayout>;
+    return <AccountLayout config={config} title="Profile">{null}</AccountLayout>;
   }
 
   return <RegistryAccountPage config={config} />;

package/src/app/pages/account/tokens.tsx

@@ -37,7 +37,7 @@ export const getStaticProps: GetStaticProps = async () => ({ props: { config: ge
 
 export default function TokensPage({ config }: { config: ClientConfig }) {
   if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
-    return <AccountLayout title="Access tokens">{null}</AccountLayout>;
+    return <AccountLayout config={config} title="Access tokens">{null}</AccountLayout>;
   }
 
   return <RegistryTokensPage config={config} />;

package/src/app/pages/account/users.tsx

@@ -37,7 +37,7 @@ export const getStaticProps: GetStaticProps = async () => ({ props: { config: ge
 
 export default function UsersPage({ config }: { config: ClientConfig }) {
   if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
-    return <AccountLayout title="Users">{null}</AccountLayout>;
+    return <AccountLayout config={config} title="Users">{null}</AccountLayout>;
   }
 
   return <RegistryUsersPage config={config} />;

package/src/app/pages/api/docs/nav.json.ts

@@ -5,7 +5,7 @@ import { ensureGet, resolveDocsBackend, sendDocsData, sendDocsError } from '@/li
 // Kept static so the baked structure is traced into every registry serverless bundle.
 import navShell from '@/generated/nav-shell.json';
 
-/** Thin registry refresh adapter. The adapter/resolver owns all navigation structure and filling. */
+/** Thin route: `getRegistryNavData` builds and fills the whole navigation. */
 export default async function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
   if (!ensureGet(req, res)) return;
 

package/src/app/pages/api/mcp.ts

@@ -22,6 +22,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     return;
   }
 
+  // The status probe of the docs app. A 204 shows only that the route is served, so the probe needs no credential.
+  if (req.method === 'HEAD') {
+    res.status(204).end();
+    return;
+  }
+
   if (!(await authorizeMcpRequest(req, res))) {
     return;
   }

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

@@ -5,7 +5,7 @@ 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 a `registry:write` token.
+ *   or a custom storage provider). Idempotent by hash; requires a `registry:write` token.
  * - `GET` returns the blob's bytes, or redirects to a provider URL for object-backed content.
  *   Requires a `registry:read` token.
  *

package/src/app/pages/cli/device.tsx

@@ -20,7 +20,7 @@ export const getStaticProps: GetStaticProps = async () => ({ props: { config: ge
 
 export default function DeviceApprovalPage({ config }: { config: ClientConfig }) {
   if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
-    return <AuthShell title="Authorize CLI">{null}</AuthShell>;
+    return <AuthShell config={config} title="Authorize CLI">{null}</AuthShell>;
   }
 
   return <RegistryDeviceApprovalPage config={config} />;

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

@@ -33,6 +33,10 @@ export const getStaticProps: GetStaticProps = async () => {
   };
 };
 
+// Tokens without a Figma group land under an empty key.
+const groupTitle = (group: string) => upperFirst(group) || 'Other';
+const groupId = (group: string) => group || 'other';
+
 const ColorsPage = ({
   content,
   menu,
@@ -82,20 +86,17 @@ const ColorsPage = ({
       <div className="lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_280px]">
         <div className="flex flex-col gap-0">
           {Object.keys(colorGroups).map((group) => (
-            <ColorGrid
-              title={upperFirst(group)}
-              group={group}
-              description="Colors that are used most frequently across all pages and components."
-              colors={colorGroups[group]}
-              key={group}
-            />
+            <ColorGrid title={groupTitle(group)} group={groupId(group)} colors={colorGroups[group]} key={group} />
           ))}
           <PrevNextNav previous={null} next={{ title: 'Typography', href: '/foundations/typography' }} />
         </div>
 
         <AnchorNav
           groups={[
-            Object.assign({}, ...[...Object.keys(colorGroups).map((group) => ({ [`${group}-colors`]: `${upperFirst(group)} Colors` }))]),
+            Object.assign(
+              {},
+              ...[...Object.keys(colorGroups).map((group) => ({ [`${groupId(group)}-colors`]: `${groupTitle(group)} Colors` }))]
+            ),
           ]}
         />
 

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

@@ -50,7 +50,7 @@ const DesignPage = ({ content, menu, metadata, current, config }: DocumentationP
             },
             {
               title: 'Colors',
-              description: 'Official logo used for all digital and offline materials.',
+              description: 'Official color palette used for all digital products.',
               icon: Palette,
               link: '/foundations/colors',
               cta: 'Explore Colors',
@@ -74,14 +74,14 @@ const DesignPage = ({ content, menu, metadata, current, config }: DocumentationP
               description: 'Downloadable icon set for use in digital and offline materials.',
               icon: Shapes,
               link: '/foundations/icons',
-              cta: 'View Library',
+              cta: 'Explore Icons',
             },
             {
               title: 'Effects',
               description: 'Shadows, blurs, and other effects used in the design system.',
               icon: Sun,
               link: '/foundations/effects',
-              cta: 'View Effects',
+              cta: 'Explore Effects',
             },
           ]}
         />

package/src/app/pages/index.tsx

@@ -57,11 +57,11 @@ export const getStaticProps: GetStaticProps = async (context) => {
 
 export const Home = ({ content, menu, metadata, config, current }: DocumentationProps) => {
   return (
-    <Layout config={config} menu={menu} current={current} metadata={metadata} fullWidthHero={true}>
+    <Layout config={config} menu={menu} current={current} metadata={{ ...metadata, metaTitle: metadata.metaTitle || config?.app?.title }} fullWidthHero={true}>
       <div className="w-full bg-linear-to-r py-12 dark:from-gray-900 dark:to-gray-800 sm:py-20">
         <div className="container mx-auto px-8">
           <HeadersType.H1 className="max-w-4xl text-3xl font-semibold leading-[-0.05px]  sm:text-4xl">
-            {config?.app?.client} Design System
+            {config?.app?.title}
           </HeadersType.H1>
           {content && (
             <div className="text-lg max-w-4xl empty:hidden [&>*]:mt-6 [&>p]:font-light [&>h2:first-child]:mt-0 [&>h2:first-child]:font-normal sm:text-xl">

package/src/app/pages/login.tsx

@@ -2,29 +2,34 @@ import { Button } from '../components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../components/ui/card';
 import { Input } from '../components/ui/input';
 import { Label } from '../components/ui/label';
+import type { ClientConfig } from '@handoff/types/config';
+import type { GetStaticProps } from 'next';
 import Link from 'next/link';
 import { signIn, useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { FormEvent, useEffect, useState } from 'react';
 import { AuthShell } from '../components/Auth/AuthShell';
 import { loadInstallStatus } from '../components/Auth/installStatus';
+import { getClientRuntimeConfig } from '../components/util';
 
 const safeCallbackUrl = (value: unknown): string =>
   typeof value === 'string' && value.startsWith('/') && !value.startsWith('//') && !value.startsWith('/\\') ? value : '/';
 
-export default function LoginPage() {
+export const getStaticProps: GetStaticProps = async () => ({ props: { config: getClientRuntimeConfig() } });
+
+export default function LoginPage({ config }: { config: ClientConfig }) {
   if (process.env.HANDOFF_RUNTIME_MODE !== 'registry') {
     return (
-      <AuthShell title="Sign in" centered>
+      <AuthShell config={config} title="Sign in" centered>
         {null}
       </AuthShell>
     );
   }
 
-  return <RegistryLoginPage />;
+  return <RegistryLoginPage config={config} />;
 }
 
-function RegistryLoginPage() {
+function RegistryLoginPage({ config }: { config: ClientConfig }) {
   const router = useRouter();
   const { data: session, status } = useSession();
   const [pending, setPending] = useState(false);
@@ -77,7 +82,7 @@ function RegistryLoginPage() {
   };
 
   return (
-    <AuthShell title="Sign in" centered>
+    <AuthShell config={config} title="Sign in" centered>
       <Card>
         <CardHeader>
           <CardTitle>Sign in</CardTitle>

package/src/app/pages/reset-password.tsx

@@ -2,14 +2,19 @@ import { Button } from '../components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../components/ui/card';
 import { Input } from '../components/ui/input';
 import { Label } from '../components/ui/label';
+import type { ClientConfig } from '@handoff/types/config';
+import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { FormEvent, useEffect, useState } from 'react';
 import { AuthShell } from '../components/Auth/AuthShell';
 import { authApiUrl, readApiError } from '../components/Auth/api';
+import { getClientRuntimeConfig } from '../components/util';
 
-export default function ResetPasswordPage() {
+export const getStaticProps: GetStaticProps = async () => ({ props: { config: getClientRuntimeConfig() } });
+
+export default function ResetPasswordPage({ config }: { config: ClientConfig }) {
   const router = useRouter();
   const [token, setToken] = useState('');
   const [purpose, setPurpose] = useState<'invite' | 'reset'>('reset');
@@ -87,7 +92,7 @@ export default function ResetPasswordPage() {
   };
 
   return (
-    <AuthShell title={token ? 'Set a new password' : 'Reset password'} centered>
+    <AuthShell config={config} title={token ? 'Set a new password' : 'Reset password'} centered>
       <Head>
         <meta name="referrer" content="no-referrer" />
       </Head>

package/src/app/pages/system/component/[component]/index.tsx

@@ -96,9 +96,6 @@ export const getStaticProps = async (context) => {
   const previousComponent = sameGroupComponents[groupIndex - 1] ?? null;
   const nextComponent = sameGroupComponents[groupIndex + 1] ?? null;
 
-  const fallbackTitle = componentData.title || startCase(component as string);
-  const fallbackMetaTitle = `${fallbackTitle}${config?.app?.client ? ` | ${config.app.client} Design System` : ''}`;
-
   return {
     props: {
       id: component,
@@ -110,7 +107,7 @@ export const getStaticProps = async (context) => {
         ...componentData,
         title: componentData.title || docs.metadata.title || startCase(component as string),
         description: componentData.description,
-        metaTitle: docs.metadata.metaTitle || fallbackMetaTitle,
+        metaTitle: docs.metadata.metaTitle ?? '',
         metaDescription: docs.metadata.metaDescription || componentData.description,
         image: docs.metadata.image || 'hero-brand-assets',
       },
@@ -256,7 +253,7 @@ const GenericComponentPage = ({ menu, metadata, current, id, config, componentHo
               </Button>
             )}
             <Drawer direction="right">
-              <DrawerTrigger>
+              <DrawerTrigger asChild>
                 <Button variant="outline" size={'sm'} className="font-normal [&_svg]:size-3!">
                   API Reference
                 </Button>

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

@@ -107,20 +107,20 @@ const ComponentsPage = ({ content, menu, metadata, current, config }: ComponentP
         <div className="mt-3 flex flex-row justify-between gap-3">
           <p className="text-lg leading-relaxed text-gray-600 dark:text-gray-300">{metadata.description}</p>
           <Drawer direction="right">
-            <DrawerTrigger>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DrawerTrigger asChild>
                     <Button variant="outline">
                       API <Webhook strokeWidth={1.5} />
                     </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="left">
-                    <Badge>{apiUrl}</Badge>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </DrawerTrigger>
+                  </DrawerTrigger>
+                </TooltipTrigger>
+                <TooltipContent side="left">
+                  <Badge>{apiUrl}</Badge>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
             <DrawerContent>
               <div className="mx-5 w-full max-w-lg">
                 <DrawerHeader>