[V0_FILE]typescriptreact:file="app/components/demo.tsx" "use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { RoutingSlipCodeWorkbench } from "@/components/routing-slip-code-workbench"; type SlipStage = "inventory" | "payment" | "packaging" | "shipping" | "notification"; type MockStage = { stage: SlipStage; status: "pending" | "running" | "completed"; message?: string; startedAtMs?: number; completedAtMs?: number; }; type MockRunResponse = { id: string; orderId: string; status: "running" | "completed"; slip: SlipStage[]; stages: MockStage[]; currentIndex: number; createdAtMs: number; }; type DemoStatus = "idle" | "running" | "completed"; type OrderType = "standard" | "digital"; export type RoutingSlipLineMap = { workflowLoopLine: number; workflowProcessLine: number; workflowReturnLine: number; stepDelayLine: number; stepReturnLine: number; stepMessageLines: Record; }; type RoutingSlipDemoProps = { workflowCode: string; workflowLinesHtml: string[]; stepCode: string; stepLinesHtml: string[]; lineMap: RoutingSlipLineMap; }; const ORDER_SLIPS: Record = { standard: ["inventory", "payment", "packaging", "shipping", "notification"], digital: ["inventory", "payment", "notification"], }; const STAGE_LABELS: Record = { inventory: "Inventory", payment: "Payment", packaging: "Packaging", shipping: "Shipping", notification: "Notification", }; const SLIP_DESCRIPTION: Record = { standard: "Inventory → Payment → Packaging → Shipping → Notification", digital: "Inventory → Payment → Notification", }; function formatMs(durationMs: number | null): string { if (durationMs === null || durationMs < 0) { return "0ms"; } if (durationMs < 1000) { return `${durationMs}ms`; } return `${(durationMs / 1000).toFixed(1)}s`; } function stageIcon(stage: SlipStage, colorClass: string) { switch (stage) { case "inventory": return ( ); case "payment": return ( ); case "packaging": return ( ); case "shipping": return ( ); case "notification": return ( ); } } function parseError(payload: unknown): string { if (!payload || typeof payload !== "object") { return "Request failed"; } const possible = payload as { error?: unknown }; if (typeof possible.error === "string") { return possible.error; } return "Request failed"; } export function RoutingSlipDemo({ workflowCode, workflowLinesHtml, stepCode, stepLinesHtml, lineMap, }: RoutingSlipDemoProps) { const [status, setStatus] = useState("idle"); const [orderType, setOrderType] = useState("standard"); const [runId, setRunId] = useState(null); const [stages, setStages] = useState([]); const [error, setError] = useState(null); const [totalMs, setTotalMs] = useState(null); const pollAbortRef = useRef(null); const resetDemo = useCallback(() => { pollAbortRef.current?.abort(); pollAbortRef.current = null; setStatus("idle"); setRunId(null); setStages([]); setError(null); setTotalMs(null); }, []); useEffect(() => { return () => { pollAbortRef.current?.abort(); pollAbortRef.current = null; }; }, []); const startRun = useCallback(async () => { pollAbortRef.current?.abort(); pollAbortRef.current = null; const slip = ORDER_SLIPS[orderType]; const orderId = `ORDER-${crypto.randomUUID().slice(0, 6).toUpperCase()}`; setError(null); setTotalMs(null); setStages(slip.map((stage) => ({ stage, status: "pending" }))); try { const response = await fetch("/api/mock/start", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ orderId, slip }), }); if (!response.ok) { const payload = await response.json().catch(() => null); throw new Error(parseError(payload)); } const payload = (await response.json()) as { runId: string }; setRunId(payload.runId); setStatus("running"); } catch (runError) { setStatus("idle"); setRunId(null); setStages([]); setError(runError instanceof Error ? runError.message : "Failed to start run"); } }, [orderType]); useEffect(() => { if (status !== "running" || !runId) { return; } const controller = new AbortController(); pollAbortRef.current = controller; let cancelled = false; let inFlight = false; const pollStatus = async () => { if (cancelled || inFlight) { return; } inFlight = true; try { const response = await fetch(`/api/mock/status?runId=${encodeURIComponent(runId)}`, { signal: controller.signal, cache: "no-store", }); if (!response.ok) { const payload = await response.json().catch(() => null); throw new Error(parseError(payload)); } const payload = (await response.json()) as MockRunResponse; if (cancelled || controller.signal.aborted) { return; } setStages(payload.stages); if (payload.status === "completed") { const lastCompletedAtMs = payload.stages[payload.stages.length - 1]?.completedAtMs; const elapsedMs = typeof lastCompletedAtMs === "number" ? lastCompletedAtMs - payload.createdAtMs : payload.stages.length * 800; setTotalMs(elapsedMs); setStatus("completed"); } } catch (pollError) { if (controller.signal.aborted || cancelled) { return; } setError(pollError instanceof Error ? pollError.message : "Status polling failed"); setStatus("idle"); setRunId(null); } finally { inFlight = false; } }; void pollStatus(); const interval = window.setInterval(() => { void pollStatus(); }, 500); return () => { cancelled = true; window.clearInterval(interval); controller.abort(); if (pollAbortRef.current === controller) { pollAbortRef.current = null; } }; }, [runId, status]); const activeStage = useMemo(() => { return stages.find((stage) => stage.status === "running")?.stage; }, [stages]); const activeLines = useMemo(() => { if (status === "idle") { return { workflow: [] as number[], step: [] as number[], }; } if (status === "completed") { return { workflow: [lineMap.workflowReturnLine], step: [lineMap.stepReturnLine], }; } const stepLines = [lineMap.stepDelayLine]; if (activeStage) { const messageLine = lineMap.stepMessageLines[activeStage]; if (messageLine > 0) { stepLines.push(messageLine); } } return { workflow: [lineMap.workflowLoopLine, lineMap.workflowProcessLine], step: stepLines, }; }, [activeStage, lineMap, status]); const gutterMarks = useMemo(() => { const workflowMarks: Record = {}; const stepMarks: Record = {}; if (stages.some((stage) => stage.status === "completed")) { workflowMarks[lineMap.workflowProcessLine] = true; } if (status === "completed") { workflowMarks[lineMap.workflowReturnLine] = true; stepMarks[lineMap.stepReturnLine] = true; } for (const stage of stages) { if (stage.status !== "completed") { continue; } const lineNumber = lineMap.stepMessageLines[stage.stage]; if (lineNumber > 0) { stepMarks[lineNumber] = true; } } return { workflow: workflowMarks, step: stepMarks, }; }, [lineMap, stages, status]); return (

Order Type {SLIP_DESCRIPTION[orderType]}

{error ? (

{error}

) : null} {status === "completed" ? (

Order Fulfilled in {formatMs(totalMs)}.

) : null}

Routing Slip Progress

{runId ? `run ${runId}` : "waiting"}

{stages.length === 0 ? (

Start a run to see stage-by-stage execution.

) : ( stages.map((stage) => { const isRunning = stage.status === "running"; const isCompleted = stage.status === "completed"; const rowClass = isCompleted ? "border-green-700/50 bg-green-700/10" : isRunning ? "border-amber-700/50 bg-amber-700/10" : "border-gray-400 bg-background-100 opacity-65"; const iconColor = isCompleted ? "text-green-700" : isRunning ? "text-amber-700" : "text-gray-900"; return (

{stageIcon(stage.stage, iconColor)} {STAGE_LABELS[stage.stage]}

{stage.status} {isCompleted ? ( ) : isRunning ? (

); }) )}

{status === "idle" ? "Idle: waiting to start an order." : status === "running" ? "Running: each stage reads the slip, executes, and hands off to the next." : "Completed: every listed stage finished in order."}

); } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "Routing Slip — Workflow DevKit Example", description: "Demonstrates dynamic routing slips with Workflow DevKit", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( Skip to main content {children} ); } [V0_FILE]typescript:file="app/api/mock/start/route.ts" import { NextResponse } from "next/server"; import { createMockRun, type SlipStage } from "../store"; const VALID_STAGES: SlipStage[] = [ "inventory", "payment", "packaging", "shipping", "notification", ]; function isSlipStage(value: unknown): value is SlipStage { return typeof value === "string" && VALID_STAGES.includes(value as SlipStage); } export async function POST(request: Request) { let body: unknown; try { body = await request.json(); } catch (error) { console.warn("[routing-slip-mock] start_parse_body_failed", { attempted: "request.json()", failed: error instanceof Error ? error.message : String(error), }); return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 }); } if (!body || typeof body !== "object" || Array.isArray(body)) { return NextResponse.json( { error: "Request body must be an object" }, { status: 400 } ); } const { orderId, slip } = body as { orderId?: unknown; slip?: unknown; }; if (typeof orderId !== "string" || orderId.trim().length === 0) { return NextResponse.json({ error: "orderId is required" }, { status: 400 }); } if (!Array.isArray(slip) || slip.length === 0 || !slip.every(isSlipStage)) { return NextResponse.json( { error: "slip must be a non-empty array of valid stages" }, { status: 400 } ); } const run = createMockRun({ id: `mock-${crypto.randomUUID().slice(0, 8)}`, orderId: orderId.trim(), slip, }); return NextResponse.json({ runId: run.id, orderId: run.orderId, slip: run.slip, }); } [V0_FILE]typescript:file="app/api/mock/status/route.ts" import { NextResponse } from "next/server"; import { getMockRun, syncMockRunState } from "../store"; export async function GET(request: Request) { const { searchParams } = new URL(request.url); const runId = searchParams.get("runId")?.trim(); if (!runId) { return NextResponse.json( { error: "runId query parameter is required" }, { status: 400 } ); } const run = getMockRun(runId); if (!run) { return NextResponse.json({ error: "Run not found" }, { status: 404 }); } const syncedRun = syncMockRunState(run); return NextResponse.json(syncedRun, { headers: { "Cache-Control": "no-store", }, }); } [V0_FILE]typescript:file="app/api/mock/store.ts" export type SlipStage = "inventory" | "payment" | "packaging" | "shipping" | "notification"; export type MockStageStatus = "pending" | "running" | "completed"; export type MockStage = { stage: SlipStage; status: MockStageStatus; message?: string; startedAtMs?: number; completedAtMs?: number; }; export type MockRun = { id: string; orderId: string; status: "running" | "completed"; slip: SlipStage[]; stages: MockStage[]; currentIndex: number; createdAtMs: number; }; export const MOCK_STAGE_DURATION_MS = 800; const STAGE_MESSAGES: Record = { inventory: "Inventory check completed", payment: "Payment authorized", packaging: "Package assembled", shipping: "Shipment dispatched", notification: "Customer notification sent", }; declare global { // eslint-disable-next-line no-var var __mockRuns: Map | undefined; } export const mockRuns: Map = globalThis.__mockRuns ?? (globalThis.__mockRuns = new Map()); export function createMockRun(input: { id: string; orderId: string; slip: SlipStage[]; createdAtMs?: number; }): MockRun { const createdAtMs = input.createdAtMs ?? Date.now(); const run: MockRun = { id: input.id, orderId: input.orderId, status: "running", slip: [...input.slip], stages: input.slip.map((stage) => ({ stage, status: "pending" })), currentIndex: 0, createdAtMs, }; mockRuns.set(run.id, run); return run; } export function getMockRun(runId: string): MockRun | undefined { return mockRuns.get(runId); } export function syncMockRunState(run: MockRun, nowMs: number = Date.now()): MockRun { const previousStatus = run.status; const previousIndex = run.currentIndex; const stageCount = run.slip.length; if (stageCount === 0) { run.status = "completed"; run.currentIndex = 0; run.stages = []; return run; } const elapsedMs = Math.max(0, nowMs - run.createdAtMs); const completedCount = Math.max( 0, Math.min(stageCount, Math.floor(elapsedMs / MOCK_STAGE_DURATION_MS)) ); const isCompleted = completedCount >= stageCount; const runningIndex = isCompleted ? -1 : completedCount; run.stages = run.slip.map((stage, index) => { const startedAtMs = run.createdAtMs + index * MOCK_STAGE_DURATION_MS; const completedAtMs = startedAtMs + MOCK_STAGE_DURATION_MS; if (index < completedCount) { return { stage, status: "completed", message: `${STAGE_MESSAGES[stage]} for order ${run.orderId}`, startedAtMs, completedAtMs, } satisfies MockStage; } if (index === runningIndex) { return { stage, status: "running", message: `Processing ${stage} for order ${run.orderId}`, startedAtMs, } satisfies MockStage; } return { stage, status: "pending", } satisfies MockStage; }); run.currentIndex = isCompleted ? stageCount : runningIndex; run.status = isCompleted ? "completed" : "running"; if (run.status !== previousStatus || run.currentIndex !== previousIndex) { console.info("[routing-slip-mock] run_state_transition", { runId: run.id, orderId: run.orderId, fromStatus: previousStatus, toStatus: run.status, fromIndex: previousIndex, toIndex: run.currentIndex, elapsedMs, }); } return run; } [V0_FILE]typescript:file="app/api/routing-slip/route.ts" import { NextResponse } from "next/server"; import { start } from "workflow/api"; import { routingSlip, type SlipStage } from "@/workflows/routing-slip"; const VALID_STAGES: SlipStage[] = [ "inventory", "payment", "packaging", "shipping", "notification", ]; function isSlipStage(value: unknown): value is SlipStage { return typeof value === "string" && VALID_STAGES.includes(value as SlipStage); } export async function POST(request: Request) { let body: unknown; try { body = await request.json(); } catch (error) { console.warn("[routing-slip] parse_body_failed", { attempted: "request.json()", failed: error instanceof Error ? error.message : String(error), }); return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 }); } if (!body || typeof body !== "object" || Array.isArray(body)) { return NextResponse.json( { error: "Request body must be an object" }, { status: 400 } ); } const { orderId, slip } = body as { orderId?: unknown; slip?: unknown; }; if (typeof orderId !== "string" || orderId.trim().length === 0) { return NextResponse.json({ error: "orderId is required" }, { status: 400 }); } if (!Array.isArray(slip) || slip.length === 0 || !slip.every(isSlipStage)) { return NextResponse.json( { error: "slip must be a non-empty array of valid stages" }, { status: 400 } ); } try { const run = await start(routingSlip, [orderId.trim(), slip]); return NextResponse.json({ runId: run.runId }); } catch (error) { console.error("[routing-slip] start_failed", { attempted: "start(routingSlip, [orderId, slip])", failed: error instanceof Error ? error.message : String(error), orderId, slipLength: slip.length, }); return NextResponse.json( { error: "Failed to start routing slip workflow" }, { status: 500 } ); } } [V0_FILE]typescriptreact:file="app/page.tsx" import { highlight } from "sugar-high"; import { highlightCodeToHtmlLines } from "@/components/code-highlight-server"; import { RoutingSlipDemo, type RoutingSlipLineMap } from "./components/demo"; const directiveUseWorkflow = `"use ${"workflow"}"`; const directiveUseStep = `"use ${"step"}"`; const workflowCode = `export async function routingSlip(orderId: string, slip: SlipStage[]) { ${directiveUseWorkflow}; const results: StageResult[] = []; for (const stage of slip) { const result = await processStage(orderId, stage); results.push(result); } return { status: "completed", orderId, stages: results, }; }`; const stepCode = `async function processStage(orderId: string, stage: SlipStage): Promise { ${directiveUseStep}; const delay = 500 + Math.floor(Math.random() * 700); await new Promise((resolve) => setTimeout(resolve, delay)); const messages: Record = { inventory: \`Verified stock for order \${orderId}\`, payment: \`Payment processed for order \${orderId}\`, packaging: \`Package prepared for order \${orderId}\`, shipping: \`Shipment dispatched for order \${orderId}\`, notification: \`Customer notified for order \${orderId}\`, }; return { stage, status: "completed", message: messages[stage], durationMs: delay, }; }`; const workflowLinesHtml = highlightCodeToHtmlLines(workflowCode); const stepLinesHtml = highlightCodeToHtmlLines(stepCode); function getLine(lines: string[], pattern: string): number { const index = lines.findIndex((line) => line.includes(pattern)); return index >= 0 ? index + 1 : 1; } function buildLineMap(workflow: string, step: string): RoutingSlipLineMap { const workflowLines = workflow.split("\n"); const stepLines = step.split("\n"); return { workflowLoopLine: getLine(workflowLines, "for (const stage of slip)"), workflowProcessLine: getLine(workflowLines, "await processStage(orderId, stage)"), workflowReturnLine: getLine(workflowLines, "return {"), stepDelayLine: getLine(stepLines, "await new Promise((resolve) => setTimeout(resolve, delay))"), stepReturnLine: getLine(stepLines, "return {"), stepMessageLines: { inventory: getLine(stepLines, "inventory:"), payment: getLine(stepLines, "payment:"), packaging: getLine(stepLines, "packaging:"), shipping: getLine(stepLines, "shipping:"), notification: getLine(stepLines, "notification:"), }, }; } const lineMap = buildLineMap(workflowCode, stepCode); const howItWorksSteps = [ { circle: "bg-violet-700", border: "border-violet-700", bg: "bg-violet-700/10", title: "Attach the route to the message", description: "Each order carries its own ordered slip. Standard orders use all five stages; digital orders skip packaging and shipping.", code: highlight(`const slip = ["inventory", "payment", "notification"];`), }, { circle: "bg-amber-700", border: "border-amber-700", bg: "bg-amber-700/10", title: "Loop through the slip durably", description: "The workflow reads the slip and executes each stage in sequence. Every await is a durable checkpoint.", code: highlight( `for (const stage of slip) {\n const result = await processStage(orderId, stage);\n results.push(result);\n}` ), }, { circle: "bg-green-700", border: "border-green-700", bg: "bg-green-700/10", title: "Each stage does one job, then handoff", description: "A step receives the current stage, performs that operation, and returns a typed result for the next stage.", code: highlight( `async function processStage(orderId: string, stage: SlipStage) {\n ${directiveUseStep};\n // do stage work\n}` ), }, ]; export default function Page() { return (

Workflow DevKit Example

Routing Slip

A dynamic ordered list of processing steps attached to each message. The workflow reads the slip and executes each stage sequentially — different message types get different routes through the system.

How It Works

{step.title}

{step.description}

))}



        
          
            Try It
          
          
            Pick an order type, run the slip, and watch line-by-line execution in
            the code workbench below.
          
          
        

        
          
            Workflow DevKit Docs


  );
}
[V0_FILE]css:file="app/globals.css"
@import "tailwindcss";

@theme {
  --color-background-100: #0a0a0a;
  --color-background-200: #171717;
  --color-gray-100: #1a1a1a;
  --color-gray-200: #1f1f1f;
  --color-gray-300: #292929;
  --color-gray-400: #737373;
  --color-gray-500: #525252;
  --color-gray-600: #404040;
  --color-gray-700: #262626;
  --color-gray-800: #171717;
  --color-gray-900: #a1a1a1;
  --color-gray-1000: #ededed;
  --color-blue-700: #0070f3;
  --color-red-700: #e5484d;
  --color-amber-700: #ffb224;
  --color-green-700: #46a758;
  --color-violet-700: #8b5cf6;
  --color-cyan-700: #06b6d4;
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: #0a0a0a;
  color: #ededed;
  font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, sans-serif;
}

.token.keyword,
.token.keyword.control-flow {
  color: #f75f8f;
}
.token.plain,
.token.parameter,
.token.punctuation,
.token.plain-text,
.token.property-access,
.token.operator,
.token.tag.punctuation {
  color: #ededed;
}
.token.function,
.token.function.maybe-class-name {
  color: #bf7af0;
}
.token.tag {
  color: #62c073;
}
.token.literal-property.property {
  color: #ff6166;
}
.token.string,
.token.boolean {
  color: #62c073;
}
.token.comment {
  color: #a1a1a1;
}
.token.class-name {
  color: #52a8ff;
}
.token.number {
  color: #62c073;
}
.token.attr-name {
  color: #ff6166;
}
.token.attr-value {
  color: #62c073;
}
.token.builtin {
  color: #52a8ff;
}
.token.template-string {
  color: #62c073;
}
.token.interpolation {
  color: #ededed;
}
[V0_FILE]javascript:file="postcss.config.mjs"
export default { plugins: { "@tailwindcss/postcss": {} } };
[V0_FILE]typescript:file="workflows/routing-slip.ts"
export type SlipStage = "inventory" | "payment" | "packaging" | "shipping" | "notification";

export type StageResult = {
  stage: SlipStage;
  status: "completed" | "skipped";
  message: string;
  durationMs: number;
};

export type RoutingSlipResult = {
  status: "completed";
  orderId: string;
  stages: StageResult[];
  totalMs: number;
};

export async function routingSlip(
  orderId: string,
  slip: SlipStage[]
): Promise {
  "use workflow";

  const results: StageResult[] = [];
  const startMs = Date.now();

  for (const stage of slip) {
    const result = await processStage(orderId, stage);
    results.push(result);
  }

  return {
    status: "completed",
    orderId,
    stages: results,
    totalMs: Date.now() - startMs,
  };
}

async function processStage(
  orderId: string,
  stage: SlipStage
): Promise {
  "use step";

  const startMs = Date.now();

  // Simulate processing time (500-1200ms per stage)
  const delay = 500 + Math.floor(Math.random() * 700);
  await new Promise((r) => setTimeout(r, delay));

  const messages: Record = {
    inventory: `Verified stock for order ${orderId}`,
    payment: `Payment processed for order ${orderId}`,
    packaging: `Package prepared for order ${orderId}`,
    shipping: `Shipment dispatched for order ${orderId}`,
    notification: `Customer notified for order ${orderId}`,
  };

  return {
    stage,
    status: "completed",
    message: messages[stage],
    durationMs: Date.now() - startMs,
  };
}
[V0_FILE]typescriptreact:file="components/routing-slip-code-workbench.tsx"
"use client";

import { useState } from "react";

type ActiveLines = {
  workflow: number[];
  step: number[];
};

type GutterMarks = {
  workflow?: Record;
  step?: Record;
};

type CopyState = "idle" | "copied" | "failed";

type CodePaneProps = {
  code: string;
  linesHtml: string[];
  filename: string;
  label: string;
  activeLines: Set;
  gutterMarks?: Record;
  completed: boolean;
};

function CodePane({
  code,
  linesHtml,
  filename,
  label,
  activeLines,
  gutterMarks,
  completed,
}: CodePaneProps) {
  const [copyState, setCopyState] = useState("idle");

  const highlightBorder = completed ? "border-green-700" : "border-amber-700";
  const highlightBg = completed ? "bg-green-700/15" : "bg-amber-700/15";
  const highlightText = completed ? "text-green-700" : "text-amber-700";

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(code);
      setCopyState("copied");
      window.setTimeout(() => setCopyState("idle"), 1400);
    } catch {
      setCopyState("failed");
      window.setTimeout(() => setCopyState("idle"), 1400);
    }
  };

  return (
    
      
        
          
            
            
            
          
          {filename}
          
            {label}
          
        
        
      
      
                  
            {linesHtml.map((lineHtml, index) => {
              const lineNumber = index + 1;
              const isActive = activeLines.has(lineNumber);
              const hasMark = gutterMarks?.[lineNumber] === true;

              return (
                
                  
                    {hasMark ? (
                      
                    ) : null}
                  
                  
                    {lineNumber}
                  
                   0 ? lineHtml : " ",
                    }}
                  />
                
              );
            })}
          
        
      
    
  );
}

export type RoutingSlipCodeWorkbenchProps = {
  workflowCode: string;
  workflowLinesHtml: string[];
  stepCode: string;
  stepLinesHtml: string[];
  activeLines: ActiveLines;
  gutterMarks?: GutterMarks;
  completed?: boolean;
};

export function RoutingSlipCodeWorkbench({
  workflowCode,
  workflowLinesHtml,
  stepCode,
  stepLinesHtml,
  activeLines,
  gutterMarks,
  completed = false,
}: RoutingSlipCodeWorkbenchProps) {
  return (
    
      
      
    
  );
}
[V0_FILE]typescript:file="components/code-highlight-server.ts"
import { highlight } from "sugar-high";

export function highlightCodeToHtmlLines(code: string): string[] {
  return highlight(code).split("\n");
}
[V0_FILE]json:file="package.json"
{
  "name": "routing-slip",
  "private": true,
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "16.0.10",
    "react": "19.2.3",
    "react-dom": "19.2.3",
    "workflow": "4.0.1-beta.44",
    "sugar-high": "^0.9.5"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}
[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      },
      {
        "name": "workflow"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts",
    "**/*.mts"
  ],
  "exclude": ["node_modules"]
}
[V0_FILE]typescript:file="next.config.ts"
import { withWorkflow } from "workflow/next";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {};

export default withWorkflow(nextConfig);