handoff-app 2.0.0-8 → 2.0.0

package/src/app/pages/api/auth/request-reset.ts

@@ -13,6 +13,11 @@ export default async function requestResetHandler(req: NextApiRequest, res: Next
   if (!method) return;
   const context = await prepareRegistryApi(req, res, { mutation: true });
   if (!context) return;
+  // The same answer for every address, so this reveals nothing about which accounts exist.
+  if (!registryEmailIsConfigured()) {
+    res.status(503).json({ error: 'Password reset by email is not available on this registry. Ask an administrator for a reset link.' });
+    return;
+  }
   const body = req.body && typeof req.body === 'object' ? req.body : {};
   const email = normalizeEmail(typeof body.email === 'string' ? body.email : '');
   const throttle = await consumeAuthRateLimit(context.db, {
@@ -27,26 +32,19 @@ export default async function requestResetHandler(req: NextApiRequest, res: Next
     return;
   }
 
-  if (!registryEmailIsConfigured()) {
-    res.status(200).json({ ok: true });
-    return;
-  }
   const result = await createPasswordReset(context.db, email);
   if (result.token && result.user) {
     const resetUrl = registryPageUrl('/reset-password', undefined, { token: result.token });
+    // The result is ignored so the response never reveals whether the account exists.
     if (resetUrl) {
-      try {
-        await sendRegistryAuthEmail({
-          to: result.user.email,
-          subject: 'Reset your Handoff Registry password',
-          heading: 'Reset your password',
-          message: 'Use this single-use link to choose a new password.',
-          actionLabel: 'Reset password',
-          actionUrl: resetUrl,
-        });
-      } catch {
-        // Keep the response enumeration-safe. Operational email failures never reveal account state.
-      }
+      await sendRegistryAuthEmail({
+        to: result.user.email,
+        subject: 'Reset your Handoff Registry password',
+        heading: 'Reset your password',
+        message: 'Use this single-use link to choose a new password. It expires in one hour.',
+        actionLabel: 'Reset password',
+        actionUrl: resetUrl,
+      });
     }
   }
   res.status(200).json({ ok: true });

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/install.ts

@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { getRegistryInstallationState, installRegistry } from '@handoff/registry/auth';
 import { allowApiMethods, prepareRegistryApi } from '../../lib/auth/api';
 import { canonicalRegistryUrl, registryAuthSecret } from '../../lib/auth/config';
-import { registryEmailIsConfigured } from '../../lib/auth/email';
+import { missingRegistryEmailSettings, registryEmailIsConfigured, registryEmailProviderName } from '../../lib/auth/email';
 
 const check = (id: string, label: string, ok: boolean, message: string, optional = false) => ({
   id,
@@ -60,8 +60,8 @@ export default async function installHandler(req: NextApiRequest, res: NextApiRe
         'Email delivery',
         registryEmailIsConfigured(),
         registryEmailIsConfigured()
-          ? 'Resend delivery is configured.'
-          : 'Optional. Set RESEND_API_KEY and AUTH_FROM_EMAIL, or deliver invitation links manually.',
+          ? `Delivery through ${registryEmailProviderName()} is configured.`
+          : `Optional. Set ${missingRegistryEmailSettings().join(', ')}, or deliver invitation links manually.`,
         true
       ),
     ];

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]/complete.ts

@@ -0,0 +1,11 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleAssetBlobCompleteRoute } from '@/lib/registry-api/asset-transfer';
+
+/**
+ * `POST /api/registry/transfer/assets/blobs/:hash/complete`: given `{ storageRef, size, contentType }`
+ * from a direct upload, confirm the object exists in storage and record the blob. Requires a
+ * write-scoped credential; registry-runtime only.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleAssetBlobCompleteRoute(req, res);
+}

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

@@ -0,0 +1,12 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { handleAssetBlobUploadRoute } from '@/lib/registry-api/asset-transfer';
+
+/**
+ * `POST /api/registry/transfer/assets/blobs/:hash/upload`: given `{ size, contentType }`, return
+ * `{ upload }`, a signed URL to upload the blob directly to storage, or `null` when the client must
+ * upload through `PUT /api/registry/transfer/assets/blobs/:hash`. Requires a write-scoped
+ * credential; registry-runtime only.
+ */
+export default function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  return handleAssetBlobUploadRoute(req, res);
+}

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

@@ -1,3 +1,6 @@
+import type { ClientConfig } from '@handoff/types/config';
+import type { GetStaticProps } from 'next';
+import { getClientRuntimeConfig } from '../../components/util';
 import { AuthShell } from '../../components/Auth/AuthShell';
 import { authApiUrl, readApiError } from '../../components/Auth/api';
 import { Alert, AlertDescription, AlertTitle } from '../../components/ui/alert';
@@ -13,15 +16,17 @@ import { FormEvent, useEffect, useState } from 'react';
 
 const normalizeCode = (value: string) => value.replace(/\s/g, '').toUpperCase();
 
-export default function DeviceApprovalPage() {
+export const getStaticProps: GetStaticProps = async () => ({ props: { config: getClientRuntimeConfig() } });
+
+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 />;
+  return <RegistryDeviceApprovalPage config={config} />;
 }
 
-function RegistryDeviceApprovalPage() {
+function RegistryDeviceApprovalPage({ config }: { config: ClientConfig }) {
   const router = useRouter();
   const { data: session, status } = useSession();
   const [userCode, setUserCode] = useState('');
@@ -60,7 +65,7 @@ function RegistryDeviceApprovalPage() {
   const callbackUrl = `/cli/device${router.asPath.includes('?') ? router.asPath.slice(router.asPath.indexOf('?')) : ''}`;
 
   return (
-    <AuthShell title="Authorize CLI">
+    <AuthShell config={config} title="Authorize CLI">
       <Card>
         <CardHeader>
           <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted">

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/install.tsx

@@ -1,3 +1,6 @@
+import type { ClientConfig } from '@handoff/types/config';
+import type { GetStaticProps } from 'next';
+import { getClientRuntimeConfig } from '../components/util';
 import { CheckCircle2, CircleAlert, Mail, RefreshCw, UserRound } from 'lucide-react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -66,7 +69,9 @@ const normalizeChecks = (status: InstallStatus): PreflightCheck[] => {
   ];
 };
 
-export default function InstallPage() {
+export const getStaticProps: GetStaticProps = async () => ({ props: { config: getClientRuntimeConfig() } });
+
+export default function InstallPage({ config }: { config: ClientConfig }) {
   const router = useRouter();
   const [step, setStep] = useState<InstallStep>('preflight');
   const [checks, setChecks] = useState<PreflightCheck[]>([]);
@@ -161,7 +166,7 @@ export default function InstallPage() {
   };
 
   return (
-    <AuthShell title="Install registry" description="Configure the first Handoff Registry administrator." hideNav>
+    <AuthShell config={config} title="Install registry" description="Configure the first Handoff Registry administrator." hideNav>
       <div className="mb-8">
         <p className="text-sm font-medium text-muted-foreground">Registry installation</p>
         <div className="mt-3 grid grid-cols-3 gap-2" aria-label="Installation progress">

package/src/app/pages/login.tsx

@@ -1,32 +1,40 @@
-import { Alert, AlertDescription } from '../components/ui/alert';
 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 { CircleAlert } from 'lucide-react';
+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 { authApiUrl } from '../components/Auth/api';
+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">{null}</AuthShell>;
+    return (
+      <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);
   const [checkingInstall, setCheckingInstall] = useState(true);
+  const [emailConfigured, setEmailConfigured] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -34,11 +42,11 @@ function RegistryLoginPage() {
       setCheckingInstall(false);
       return;
     }
-    void fetch(authApiUrl('/api/install'), { credentials: 'include', cache: 'no-store' })
-      .then(async (response) => {
-        if (!response.ok) return;
-        const body = (await response.json()) as { installed?: boolean };
-        if (body.installed === false) await router.replace('/install');
+    void loadInstallStatus()
+      .then(async (status) => {
+        if (!status) return;
+        if (status.installed === false) await router.replace('/install');
+        setEmailConfigured(status.emailConfigured !== false);
       })
       .finally(() => setCheckingInstall(false));
   }, [router]);
@@ -74,25 +82,18 @@ function RegistryLoginPage() {
   };
 
   return (
-    <AuthShell title="Sign in">
+    <AuthShell config={config} title="Sign in" centered>
       <Card>
         <CardHeader>
           <CardTitle>Sign in</CardTitle>
-          <CardDescription>Use your Handoff Registry email and password.</CardDescription>
+          <CardDescription>Use your Handoff account email and password.</CardDescription>
         </CardHeader>
         <form onSubmit={submit}>
           <CardContent className="space-y-4">
             {router.query.updated === '1' ? (
-              <Alert variant="green">
-                <AlertDescription>Your password was updated. Sign in below.</AlertDescription>
-              </Alert>
-            ) : null}
-            {error ? (
-              <Alert variant="destructive">
-                <CircleAlert />
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
+              <p className="text-sm text-green-600 dark:text-green-400">Your password was updated. Sign in below.</p>
             ) : null}
+            {error ? <p className="text-sm text-destructive">{error}</p> : null}
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>
               <Input id="email" name="email" type="email" autoComplete="email" required placeholder="you@company.com" />
@@ -102,13 +103,17 @@ function RegistryLoginPage() {
               <Input id="password" name="password" type="password" autoComplete="current-password" required />
             </div>
           </CardContent>
-          <CardFooter className="flex-col gap-3">
+          <CardFooter className="flex flex-col gap-3">
             <Button type="submit" className="w-full" disabled={pending || checkingInstall}>
               {pending ? 'Signing in…' : 'Sign in'}
             </Button>
-            <Link href="/reset-password" className="text-sm text-muted-foreground underline-offset-4 hover:underline">
-              Forgot password?
-            </Link>
+            {emailConfigured ? (
+              <Link href="/reset-password" className="text-center text-sm text-muted-foreground underline-offset-4 hover:underline">
+                Forgot password?
+              </Link>
+            ) : (
+              <p className="text-center text-sm text-muted-foreground">Forgot your password? Ask an administrator for a reset link.</p>
+            )}
           </CardFooter>
         </form>
       </Card>

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

@@ -1,16 +1,20 @@
-import { Alert, AlertDescription } from '../components/ui/alert';
 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');
@@ -88,7 +92,7 @@ export default function ResetPasswordPage() {
   };
 
   return (
-    <AuthShell title={token ? 'Set a new password' : 'Reset password'}>
+    <AuthShell config={config} title={token ? 'Set a new password' : 'Reset password'} centered>
       <Head>
         <meta name="referrer" content="no-referrer" />
       </Head>
@@ -97,32 +101,27 @@ export default function ResetPasswordPage() {
           <CardTitle>{token ? 'Set a new password' : 'Reset password'}</CardTitle>
           <CardDescription>
             {sent
-              ? 'If an account exists for that email, a password reset link has been sent.'
+              ? 'If an account exists for that email, we sent a link to reset your password.'
               : token
-                ? 'Choose a new password for your registry account.'
-                : 'Enter your email and we will send a reset link if an account exists.'}
+                ? 'Choose a password at least 12 characters long.'
+                : 'Enter your email and we will send you a reset link if an account exists.'}
           </CardDescription>
         </CardHeader>
         {sent ? (
-          <CardFooter>
-            <Button asChild variant="outline" className="w-full">
-              <Link href="/login">Return to sign in</Link>
-            </Button>
+          <CardFooter className="flex flex-col gap-3">
+            <Link href="/login" className="text-center text-sm text-primary underline-offset-4 hover:underline">
+              Return to sign in
+            </Link>
           </CardFooter>
         ) : (
           <form onSubmit={token ? resetPassword : requestReset}>
             <CardContent className="space-y-4">
-              {error ? (
-                <Alert variant="destructive">
-                  <AlertDescription>{error}</AlertDescription>
-                </Alert>
-              ) : null}
+              {error ? <p className="text-sm text-destructive">{error}</p> : null}
               {token ? (
                 <>
                   <div className="space-y-2">
                     <Label htmlFor="password">New password</Label>
                     <Input id="password" name="password" type="password" autoComplete="new-password" required minLength={12} />
-                    <p className="text-xs text-muted-foreground">Use at least 12 characters.</p>
                   </div>
                   <div className="space-y-2">
                     <Label htmlFor="passwordConfirmation">Confirm password</Label>
@@ -143,13 +142,15 @@ export default function ResetPasswordPage() {
                 </div>
               )}
             </CardContent>
-            <CardFooter className="flex-col gap-3">
+            <CardFooter className="flex flex-col gap-3">
               <Button type="submit" className="w-full" disabled={pending}>
                 {pending ? 'Please wait…' : token ? 'Update password' : 'Send reset link'}
               </Button>
-              <Link href="/login" className="text-sm text-muted-foreground underline-offset-4 hover:underline">
-                Back to sign in
-              </Link>
+              {token ? (
+                <Link href="/login" className="text-center text-sm text-muted-foreground underline-offset-4 hover:underline">
+                  Back to sign in
+                </Link>
+              ) : null}
             </CardFooter>
           </form>
         )}

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>

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

@@ -130,7 +130,7 @@ export const getStaticProps = async (context: { params: IParams }) => {
       metadata: {
         title: fallbackTitle,
         description: patternData?.description || '',
-        metaTitle: `${fallbackTitle}${config?.app?.client ? ` | ${config.app.client} Design System` : ''}`,
+        metaTitle: '',
         metaDescription: patternData?.description || '',
       },
       previousPattern,
@@ -189,7 +189,7 @@ const PatternPage = ({ menu, metadata, current, id, config, previousPattern, nex
 
   if (patternNotFound) {
     return (
-      <Layout config={config} menu={menu} current={current} metadata={{ ...metadata, title: '404 - Page Not Found', metaTitle: '404 - Page Not Found' }}>
+      <Layout config={config} menu={menu} current={current} metadata={{ ...metadata, title: 'Page Not Found', metaTitle: '' }}>
         <div className="flex min-h-[60vh] flex-col items-center justify-center">
           <NotFound />
         </div>

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

@@ -70,14 +70,10 @@ export const getStaticProps = async (context) => {
     description = componentData?.description;
   }
 
-  const fallbackTitle = displayName || startCase(componentSlug);
-  const fallbackMetaTitle = `${fallbackTitle}${config?.app?.client ? ` | ${config.app.client} Design System` : ''}`;
-
   markdownProps.metadata = {
     ...markdownProps.metadata,
     title: displayName || markdownProps.metadata.title || startCase(componentSlug),
     description: markdownProps.metadata.description || description || '',
-    metaTitle: markdownProps.metadata.metaTitle || fallbackMetaTitle,
     metaDescription: markdownProps.metadata.metaDescription || description || '',
   };
 

package/src/app-builder/README.md

@@ -9,7 +9,8 @@ Builds and runs the Next.js documentation app from runtime config + generated pr
 
 2. **Build component artifacts**
    - Production: `buildComponents` + `buildPatterns`.
-   - Watch mode: `processComponents(..., { useCache: true })` to skip unchanged components.
+   - Watch mode: `processComponents(handoff)`.
+   - Every full component build uses the build cache to skip unchanged components (see `src/cache`).
 
 3. **Build global bundles**
    - Build main JS/CSS entry bundles when configured.