[pull] main from vercel:main

.changeset/few-cups-share.md

@@ -0,0 +1,25 @@
+---
+"@workflow/ai": patch
+"@workflow/astro": patch
+"@workflow/builders": patch
+"@workflow/cli": patch
+"@workflow/core": patch
+"@workflow/errors": patch
+"@workflow/next": patch
+"@workflow/nitro": patch
+"@workflow/nuxt": patch
+"@workflow/rollup": patch
+"@workflow/serde": patch
+"@workflow/sveltekit": patch
+"@workflow/typescript-plugin": patch
+"@workflow/utils": patch
+"@workflow/vite": patch
+"@workflow/vitest": patch
+"@workflow/world-local": patch
+"@workflow/world-postgres": patch
+"@workflow/world-testing": patch
+"@workflow/world-vercel": patch
+"workflow": patch
+---
+
+Embed source content in published sourcemaps.

docs/app/[lang]/(home)/components/cta.tsx

@@ -6,7 +6,7 @@ export const CTA = () => (
     <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
       Create your first workflow today.
     </h2>
-    <Button asChild size="lg" className="w-fit text-base h-12">
+    <Button asChild size="lg" className="w-fit h-10">
       <Link href="/docs/getting-started">Get started</Link>
     </Button>
   </section>

docs/app/[lang]/(home)/components/run-anywhere.tsx

@@ -1,5 +1,7 @@
+import Link from 'next/link';
 import type { ComponentProps } from 'react';
 import { CodeBlock } from '@/app/[lang]/(home)/components/code-block';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 const DigitalOcean = (props: ComponentProps<'svg'>) => (
@@ -98,31 +100,45 @@ const Vercel = (props: ComponentProps<'svg'>) => (
 
 const code = `export async function welcome(userId: string) {
   "use workflow";
-  
+
   const user = await getUser(userId);
   const { subject, body } = await generateEmail({
     name: user.name, plan: user.plan
   });
-  
+
   const { status } = await sendEmail({
     to: user.email,
     subject,
     body,
   });
-  
+
   return { status, subject, body };
 }`;
 
 export const RunAnywhere = () => (
   <div className="px-4 py-8 sm:py-12 sm:px-12 grid gap-10 items-center overflow-hidden">
-    <div className="grid gap-4 max-w-lg text-center mx-auto">
-      <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
-        Run anywhere, no lock‑in
-      </h2>
-      <p className="text-balance text-lg text-muted-foreground">
-        The same code runs locally on your laptop, in Docker, on Vercel or any
-        other cloud. Open source and portable by design.
-      </p>
+    <div className="space-y-4">
+      <div className="grid gap-4 max-w-lg text-center mx-auto">
+        <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
+          Run anywhere, no lock‑in
+        </h2>
+        <p className="text-lg text-muted-foreground">
+          Run locally, self-host, or swap every component — Workflow SDK is
+          fully portable. For zero-config, secure, and scalable workflows,
+          deploy on Vercel.
+        </p>
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-2">
+          <Button asChild className="rounded-full h-10">
+            <Link href="https://vercel.com/workflows" target="_blank">
+              Workflows on Vercel
+            </Link>
+          </Button>
+          {/* Outline variant appears smaller due to inset border — h-[42px] compensates to match the filled button visually */}
+          <Button asChild variant="outline" className="rounded-full h-[42px]">
+            <Link href="/worlds">Learn about self-hosting</Link>
+          </Button>
+        </div>
+      </div>
     </div>
     <div className="relative isolate">
       <div className="absolute -left-32 top-1/2 -translate-y-1/2 hidden md:flex items-center gap-2">

docs/app/[lang]/(home)/components/templates/index.tsx

@@ -1,44 +1,55 @@
 import Image from 'next/image';
+import Link from 'next/link';
 import { cn } from '@/lib/utils';
-import Flight from './flight.png';
-import Storytime from './storytime.png';
-import Vectr from './vectr.png';
+import { Button } from '@/components/ui/button';
+import Flight from './flight-v2.png';
+import FlightDark from './flight-v2-dark.png';
+import Storytime from './storytime-v2.png';
+import StorytimeDark from './storytime-v2-dark.png';
+import Vectr from './vectr-v2.png';
+import VectrDark from './vectr-v2-dark.png';
 
 const data = [
   {
     title: 'Story Generator Slack Bot',
     description:
-      "Slackbot that generates children's stories from collaborative input.",
+      "A Slack bot that generates children's stories from collaborative input.",
     image: Storytime,
+    imageDark: StorytimeDark,
     link: 'https://vercel.com/guides/stateful-slack-bots-with-vercel-workflow',
   },
   {
     title: 'Flight Booking App',
     description:
       'Use Workflow to make AI agents more reliable and production-ready.',
     image: Flight,
+    imageDark: FlightDark,
     link: 'https://github.com/vercel/workflow-examples/tree/main/flight-booking-app',
   },
   {
     title: 'Natural Language Image Search',
     description:
       'A free, open-source template for building natural language image search.',
     image: Vectr,
+    imageDark: VectrDark,
     link: 'https://www.vectr.store',
   },
 ];
 
 export const Templates = () => (
-  <div className="p-8 sm:p-12 px-4 py-8 sm:py-12 sm:px-12 grid gap-12">
-    <div className="max-w-3xl text-balance grid gap-2">
+  <div className="grid md:grid-cols-[1fr_2fr] md:divide-x">
+    <div className="grid gap-4 content-start px-4 py-8 sm:py-12 sm:px-12">
       <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
-        Get started quickly
+        Get started
       </h2>
-      <p className="text-balance text-lg text-muted-foreground">
-        See Workflow SDK in action with one of our templates.
+      <p className="text-lg text-muted-foreground">
+        See Workflow SDK in action with one of the example templates.
       </p>
+      <Button asChild size="lg" className="rounded-full h-10 px-6 w-fit mt-2">
+        <Link href="/docs/examples">All examples</Link>
+      </Button>
     </div>
-    <div className="grid md:grid-cols-3 gap-8">
+    <div className="grid sm:grid-cols-2 gap-8 px-4 py-8 sm:py-12 sm:px-12">
       {data.map((item) => (
         <a
           key={item.title}
@@ -56,7 +67,19 @@ export const Templates = () => (
             height={336}
             className={cn(
               'border rounded-md overflow-hidden -rotate-3 ml-7 aspect-video object-cover object-top -mb-12 mt-8',
-              'group-hover:scale-105 transition-transform duration-300 group-hover:-rotate-1'
+              'group-hover:scale-105 transition-transform duration-300 group-hover:-rotate-1',
+              'dark:hidden'
+            )}
+          />
+          <Image
+            src={item.imageDark}
+            alt={item.title}
+            width={640}
+            height={336}
+            className={cn(
+              'border rounded-md overflow-hidden -rotate-3 ml-7 aspect-video object-cover object-top -mb-12 mt-8',
+              'group-hover:scale-105 transition-transform duration-300 group-hover:-rotate-1',
+              'hidden dark:block'
             )}
           />
         </a>

docs/app/[lang]/(home)/components/use-cases-client.tsx

@@ -27,12 +27,12 @@ export const UseCasesClient = ({ useCases }: { useCases: UseCase[] }) => {
   };
 
   return (
-    <div className="grid sm:grid-cols-3 sm:divide-x p-8 sm:p-0 gap-12 sm:gap-0">
+    <div className="grid sm:grid-cols-3 sm:divide-x px-4 py-8 sm:p-0 gap-12 sm:gap-0">
       <div className="text-balance flex flex-col gap-2 sm:p-12">
-        <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl">
+        <h2 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl flex flex-wrap sm:block items-center gap-x-2">
           Build anything with
           <Select value={selectedCase} onValueChange={handleCaseChange}>
-            <SelectTrigger className="font-semibold bg-background text-xl tracking-tight sm:text-2xl md:text-3xl mt-1.5 data-[size=default]:h-auto py-1.5 -ml-3">
+            <SelectTrigger className="font-semibold bg-background text-xl tracking-tight sm:text-2xl md:text-3xl data-[size=default]:h-auto py-1.5 w-auto sm:mt-1.5 sm:-ml-3">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

docs/app/[lang]/(home)/components/vercel-com-visuals/feature-grid.tsx

@@ -1,12 +1,10 @@
+import Link from 'next/link';
 import type { JSX, ReactNode } from 'react';
 
+import { Button } from '@/components/ui/button';
 import { AgentsVisual } from './agents-visual';
 import { AiSdkVisual } from './ai-sdk-visual';
-import { DowntimeVisual } from './downtime-visual';
-import { InfraVisual } from './infra-visual';
 import { O11yVisual } from './o11y-visual';
-import { TimeoutVisual } from './timeout-visual';
-import { UsageVisual } from './usage-visual';
 
 interface Feature {
   title: string;
@@ -30,32 +28,9 @@ const features: Feature[] = [
   {
     title: 'Inspect every run end\u2011to\u2011end.',
     description:
-      'When deploying workflow on Vercel, deep workflow observability is built into the Vercel dashboard with no configuration or storage.',
+      'Observability is built into the SDK and works anywhere you run it. When using workflow on Vercel, observability is built into the Vercel dashboard with no configuration or storage.',
     visual: <O11yVisual />,
   },
-  {
-    title: 'Zero infrastructure management.',
-    description:
-      'Fluid compute, serverless functions, queues and persistence work out of the box.',
-    visual: <InfraVisual />,
-  },
-  {
-    title: 'Deploy confidently.',
-    description:
-      'Running workflows continue on their original version while new executions use the latest code.',
-    visual: <DowntimeVisual />,
-  },
-  {
-    title: 'No timeout limits.',
-    description:
-      'Write long-running workflows without worrying about execution limits.',
-    visual: <TimeoutVisual />,
-  },
-  {
-    title: 'Pay for what you use.',
-    description: 'Only pay for actual execution time, not idle resources.',
-    visual: <UsageVisual />,
-  },
 ];
 
 function FeatureCard({ title, description, visual }: Feature): JSX.Element {
@@ -75,11 +50,11 @@ function FeatureCard({ title, description, visual }: Feature): JSX.Element {
 function FeatureCardWide({ title, description, visual }: Feature): JSX.Element {
   return (
     <div className="flex flex-col items-center gap-8 md:gap-12 px-4 py-8 sm:py-12 sm:px-12">
-      <div className="flex flex-col items-center gap-4 max-w-[640px] text-center">
-        <h3 className="text-[24px] leading-[32px] tracking-[-0.96px] font-semibold text-gray-1000 md:text-[32px] md:leading-[40px] md:tracking-[-1.28px]">
+      <div className="flex flex-col items-center max-w-[800px] text-center mx-auto">
+        <h3 className="font-semibold text-xl tracking-tight sm:text-2xl md:text-3xl lg:text-[40px]">
           {title}
         </h3>
-        <p className="text-[16px] leading-[24px] tracking-normal text-gray-900 md:text-[18px] md:leading-[28px]">
+        <p className="text-balance text-lg text-muted-foreground mt-4">
           {description}
         </p>
       </div>
@@ -111,18 +86,6 @@ export function FeatureGridExtended(): JSX.Element {
       <div>
         <FeatureCardWide {...features[2]} />
       </div>
-      {/* Infra + Deploy — 2 col */}
-      <div className="grid lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x">
-        {features.slice(3, 5).map((feature) => (
-          <FeatureCard key={feature.title} {...feature} />
-        ))}
-      </div>
-      {/* Timeout + Usage — 2 col */}
-      <div className="grid lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x">
-        {features.slice(5, 7).map((feature) => (
-          <FeatureCard key={feature.title} {...feature} />
-        ))}
-      </div>
     </>
   );
 }