create-rudder-app 0.4.0 → 0.6.0

package/dist/templates/demos/fibonacci.js

@@ -0,0 +1,172 @@
+// Fibonacci demo — sequential vs worker-pool parallel via @rudderjs/concurrency.
+export function demosFibonacciView() {
+    return `import { useState } from 'react'
+import '@/index.css'
+
+interface FibResponse {
+  n:            number
+  count:        number
+  result:       number
+  sequentialMs: number
+  parallelMs:   number
+  workers:      number
+}
+
+export default function FibonacciDemo() {
+  const [n,       setN      ] = useState(36)
+  const [count,   setCount  ] = useState(4)
+  const [data,    setData   ] = useState<FibResponse | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error,   setError  ] = useState<string | null>(null)
+
+  async function run() {
+    setLoading(true); setError(null); setData(null)
+    try {
+      const res  = await fetch(\`/api/fib?n=\${n}&count=\${count}\`)
+      const body = await res.json() as FibResponse | { message: string }
+      if (!res.ok) throw new Error((body as { message: string }).message ?? 'Failed')
+      setData(body as FibResponse)
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="page">
+      <nav className="page-nav">
+        <div className="brand">
+          <span className="brand-dot" />
+          RudderJS
+        </div>
+        <div className="nav-right">
+          <a href="/demos" className="nav-link">Demos</a>
+          <a href="/" className="nav-link">Home</a>
+        </div>
+      </nav>
+
+      <section className="hero">
+        <h1 className="hero-title">Worker Threads</h1>
+        <p className="hero-lead">
+          Compute <code className="inline-code">fib(n)</code> N times — sequentially on the main thread, then
+          in parallel via <code className="inline-code">@rudderjs/concurrency</code>'s worker pool. Watch the
+          parallel cost stay flat as N grows (until you saturate workers).
+        </p>
+      </section>
+
+      <section className="feature-section">
+        <div className="form-card">
+          <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
+            <div style={{ flex: 1 }}>
+              <p className="form-label">n (Fibonacci index)</p>
+              <input
+                className="form-input"
+                type="number"
+                min={20}
+                max={42}
+                value={n}
+                onChange={e => setN(Number(e.target.value))}
+              />
+            </div>
+            <div style={{ flex: 1 }}>
+              <p className="form-label">count (parallel calls)</p>
+              <input
+                className="form-input"
+                type="number"
+                min={1}
+                max={16}
+                value={count}
+                onChange={e => setCount(Number(e.target.value))}
+              />
+            </div>
+          </div>
+
+          <button
+            className="form-submit"
+            onClick={run}
+            disabled={loading}
+            style={{ marginBottom: '1rem' }}
+          >
+            {loading ? 'Computing…' : \`Run \${count} × fib(\${n})\`}
+          </button>
+
+          {error && (
+            <p className="form-error">{error}</p>
+          )}
+
+          {data && (
+            <>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginBottom: '0.75rem' }}>
+                <div style={{ padding: '0.75rem', borderRadius: '0.375rem', border: '1px solid var(--border, #e5e7eb)' }}>
+                  <p className="form-label" style={{ marginBottom: '0.25rem' }}>Sequential (main thread)</p>
+                  <p style={{ fontSize: '1.25rem', fontWeight: 600, margin: 0 }}>{data.sequentialMs}ms</p>
+                  <p className="feature-desc" style={{ fontSize: '0.7rem', marginTop: '0.25rem' }}>
+                    {data.count} × fib({data.n}) one after another, blocking the event loop
+                  </p>
+                </div>
+                <div style={{ padding: '0.75rem', borderRadius: '0.375rem', border: '1px solid var(--border, #e5e7eb)' }}>
+                  <p className="form-label" style={{ marginBottom: '0.25rem' }}>Parallel ({data.workers} workers)</p>
+                  <p style={{ fontSize: '1.25rem', fontWeight: 600, margin: 0 }}>{data.parallelMs}ms</p>
+                  <p className="feature-desc" style={{ fontSize: '0.7rem', marginTop: '0.25rem' }}>
+                    same {data.count} tasks via <code>Concurrency.run([...])</code>
+                  </p>
+                </div>
+              </div>
+
+              <p className="feature-desc" style={{ fontSize: '0.85rem' }}>
+                Result: <code>fib({data.n}) = {data.result.toLocaleString()}</code>
+                {' · '}
+                <strong>{Math.round((data.sequentialMs / Math.max(data.parallelMs, 1)) * 10) / 10}× faster</strong>
+                {' '}via worker pool
+              </p>
+            </>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+/**
+ * Returns the inline lines that live in routes/api.ts to handle GET /api/fib.
+ * Inlined (not a separate Service) to keep the demo single-file readable.
+ */
+export function demosFibonacciApiBlock() {
+    return `// GET /api/fib?n=36&count=4 — sequential vs worker-pool parallel via @rudderjs/concurrency.
+router.get('/api/fib', async (req, res) => {
+  const n     = Math.max(1, Math.min(42, Number((req.query as Record<string, string>)['n'] ?? 36)))
+  const count = Math.max(1, Math.min(16, Number((req.query as Record<string, string>)['count'] ?? 4)))
+
+  const { Concurrency } = await import('@rudderjs/concurrency')
+  const { cpus }        = await import('node:os')
+
+  // The task body must be self-contained — closures don't capture variables across the
+  // worker boundary. Inline 'fib' and bind 'n' via a Function-style template.
+  const buildTask = (val: number): (() => number) => {
+    const src = \`
+      function fib(k) { return k < 2 ? k : fib(k - 1) + fib(k - 2) }
+      return fib(\${val})
+    \`
+    return new Function(src) as () => number
+  }
+
+  const seqStart = Date.now()
+  let result = 0
+  for (let i = 0; i < count; i++) result = buildTask(n)()
+  const sequentialMs = Date.now() - seqStart
+
+  const parStart = Date.now()
+  const tasks = Array.from({ length: count }, () => buildTask(n))
+  const results = await Concurrency.run(tasks)
+  const parallelMs = Date.now() - parStart
+  result = results[0] ?? result
+
+  res.json({
+    n, count, result, sequentialMs, parallelMs,
+    workers: Math.min(count, cpus().length),
+  })
+})`;
+}
+//# sourceMappingURL=fibonacci.js.map

package/dist/templates/demos/fibonacci.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fibonacci.js","sourceRoot":"","sources":["../../../src/templates/demos/fibonacci.ts"],"names":[],"mappings":"AAAA,iFAAiF;AAEjF,MAAM,UAAU,kBAAkB;IAChC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HR,CAAA;AACD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,sBAAsB;IACpC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCN,CAAA;AACH,CAAC"}

package/dist/templates/demos/http.d.ts

@@ -0,0 +1,3 @@
+export declare function demosHttpView(): string;
+export declare function demosHttpApiBlock(): string;
+//# sourceMappingURL=http.d.ts.map

package/dist/templates/demos/http.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"http.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/http.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,IAAI,MAAM,CAyFtC;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAwB1C"}

package/dist/templates/demos/http.js

@@ -0,0 +1,117 @@
+// HTTP client demo — fluent fetch with retry + timeout against a public API.
+export function demosHttpView() {
+    return `import { useState } from 'react'
+import '@/index.css'
+
+interface HttpResponseShape {
+  status:    number
+  ok:        boolean
+  durationMs: number
+  url:       string
+  body:      unknown
+}
+
+const ENDPOINTS = [
+  { url: 'https://jsonplaceholder.typicode.com/todos/1',  label: 'Todo (works)' },
+  { url: 'https://jsonplaceholder.typicode.com/users/1',  label: 'User (works)' },
+  { url: 'https://httpstat.us/500?sleep=300',              label: 'Force 500 (retries 3×)' },
+]
+
+export default function HttpDemo() {
+  const [url,  setUrl]     = useState(ENDPOINTS[0]!.url)
+  const [data, setData]    = useState<HttpResponseShape | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error,   setError]   = useState<string | null>(null)
+
+  async function fetchUrl() {
+    setLoading(true); setError(null)
+    try {
+      const res = await fetch('/api/http/fetch?url=' + encodeURIComponent(url))
+      const body = await res.json() as HttpResponseShape | { message: string }
+      if (!res.ok) throw new Error((body as { message: string }).message ?? 'Failed')
+      setData(body as HttpResponseShape)
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="page">
+      <nav className="page-nav">
+        <div className="brand">
+          <span className="brand-dot" />
+          RudderJS
+        </div>
+        <div className="nav-right">
+          <a href="/demos" className="nav-link">Demos</a>
+          <a href="/" className="nav-link">Home</a>
+        </div>
+      </nav>
+
+      <section className="hero">
+        <h1 className="hero-title">HTTP client</h1>
+        <p className="hero-lead">
+          Server-side <code className="inline-code">Http.retry(3, 200).timeout(5000).get(url)</code>{' '}
+          against a public API. Pick a URL — the 500 endpoint exercises the retry path.
+        </p>
+      </section>
+
+      <section className="feature-section" style={{ maxWidth: '40rem', margin: '0 auto' }}>
+        <div className="form-card">
+          <label className="form-label" htmlFor="http-url">URL</label>
+          <select id="http-url" className="form-input" value={url} onChange={e => setUrl(e.target.value)} style={{ marginBottom: '0.75rem' }}>
+            {ENDPOINTS.map(e => (
+              <option key={e.url} value={e.url}>{e.label}</option>
+            ))}
+          </select>
+          <button className="form-submit" onClick={fetchUrl} disabled={loading}>
+            {loading ? 'Fetching…' : 'Fetch'}
+          </button>
+          {error && (
+            <p className="form-error" style={{ marginTop: '1rem' }}>{error}</p>
+          )}
+          {data && (
+            <div style={{ marginTop: '1rem' }}>
+              <p className="feature-desc">
+                <strong>{data.status}</strong> · {data.durationMs}ms · ok={String(data.ok)}
+              </p>
+              <pre style={{ marginTop: '0.5rem', padding: '0.75rem', borderRadius: '0.375rem', background: 'var(--muted, #f4f4f5)', fontSize: '0.7rem', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+                {JSON.stringify(data.body, null, 2).slice(0, 600)}
+              </pre>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+export function demosHttpApiBlock() {
+    return `// GET /api/http/fetch?url=… — server-side HTTP with retry + timeout.
+router.get('/api/http/fetch', async (req, res) => {
+  const url = (req.query as Record<string, string>)['url']
+  if (!url) return res.status(422).json({ message: 'url is required' })
+  if (!/^https?:\\/\\//.test(url)) return res.status(422).json({ message: 'url must be http(s)' })
+
+  const { Http } = await import('@rudderjs/http')
+  const t0 = Date.now()
+  try {
+    const response = await Http.retry(3, 200).timeout(5000).get(url)
+    let body: unknown = null
+    try { body = response.json() } catch { body = response.body.slice(0, 600) }
+    res.json({
+      status:     response.status,
+      ok:         response.ok(),
+      durationMs: Date.now() - t0,
+      url,
+      body,
+    })
+  } catch (e) {
+    res.status(502).json({ message: (e as Error).message ?? 'Request failed', durationMs: Date.now() - t0, url })
+  }
+})`;
+}
+//# sourceMappingURL=http.js.map

package/dist/templates/demos/http.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"http.js","sourceRoot":"","sources":["../../../src/templates/demos/http.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAE7E,MAAM,UAAU,aAAa;IAC3B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFR,CAAA;AACD,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;GAsBN,CAAA;AACH,CAAC"}

package/dist/templates/demos/index-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index-view.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/index-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAE7E,wBAAgB,cAAc,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CAkE3D"}
+{"version":3,"file":"index-view.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/index-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAG7E,wBAAgB,cAAc,CAAC,GAAG,EAAE,eAAe,GAAG,MAAM,CA6C3D"}

package/dist/templates/demos/index-view.js

@@ -1,33 +1,14 @@
 import { shouldScaffoldDemo } from '../../templates.js';
+import { DEMOS, demoHref, demoTitle } from './registry.js';
 export function demosIndexView(ctx) {
-    const cards = [
-        {
-            title: 'Contact form',
-            desc: 'CSRF-protected form with Zod validation. Demonstrates getCsrfToken() and FormRequest-style error handling.',
-            href: '/demos/contact',
-            pkgs: '@rudderjs/middleware · @rudderjs/core',
-            show: shouldScaffoldDemo(ctx, 'contact'),
-        },
-        {
-            title: 'WebSocket chat',
-            desc: 'Real-time chat + presence using @rudderjs/broadcast — multi-channel pub/sub over a single WebSocket connection.',
-            href: '/demos/ws',
-            pkgs: '@rudderjs/broadcast',
-            show: shouldScaffoldDemo(ctx, 'ws'),
-        },
-        {
-            title: 'Collaborative editor',
-            desc: 'Yjs CRDT live document with awareness cursors. Open in two tabs to see real-time sync over @rudderjs/sync.',
-            href: '/demos/live',
-            pkgs: '@rudderjs/sync',
-            show: shouldScaffoldDemo(ctx, 'live'),
-        },
-    ].filter(c => c.show);
-    const cardsJsx = cards.map(c => `        <a key="${c.href}" href="${c.href}" className="feature-card">
-          <h3 className="feature-title">${c.title}</h3>
-          <p className="feature-desc">${c.desc}</p>
-          <p className="feature-desc" style={{ fontSize: '0.7rem', opacity: 0.7 }}>${c.pkgs}</p>
-        </a>`).join('\n');
+    const cards = DEMOS
+        .filter(d => shouldScaffoldDemo(ctx, d.value))
+        .map(d => `        <a key="${demoHref(d)}" href="${demoHref(d)}" className="feature-card">
+          <h3 className="feature-title">${demoTitle(d)}</h3>
+          <p className="feature-desc">${escapeJsxText(d.description)}</p>
+          <p className="feature-desc" style={{ fontSize: '0.7rem', opacity: 0.7 }}>${d.packages.join(' · ')}</p>
+        </a>`)
+        .join('\n');
     return `import '@/index.css'
 
 // Override the id-derived URL ('/demos/index') so SPA nav matches the controller ('/demos').
@@ -56,7 +37,7 @@ export default function DemosIndex() {
 
       <section className="feature-section">
         <div className="feature-grid">
-${cardsJsx}
+${cards}
         </div>
       </section>
     </div>
@@ -64,4 +45,10 @@ ${cardsJsx}
 }
 `;
 }
+// Description strings live as plain text in the registry, but they're emitted
+// inside JSX text nodes. Escape '<' and '>' so a raw '<name>' (e.g. in the
+// localization description) doesn't get parsed as a JSX element.
+function escapeJsxText(s) {
+    return s.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
 //# sourceMappingURL=index-view.js.map

package/dist/templates/demos/index-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-view.js","sourceRoot":"","sources":["../../../src/templates/demos/index-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAwB,MAAM,oBAAoB,CAAA;AAE7E,MAAM,UAAU,cAAc,CAAC,GAAoB;IACjD,MAAM,KAAK,GAAiF;QAC1F;YACE,KAAK,EAAE,cAAc;YACrB,IAAI,EAAG,4GAA4G;YACnH,IAAI,EAAG,gBAAgB;YACvB,IAAI,EAAG,uCAAuC;YAC9C,IAAI,EAAG,kBAAkB,CAAC,GAAG,EAAE,SAAS,CAAC;SAC1C;QACD;YACE,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAG,iHAAiH;YACxH,IAAI,EAAG,WAAW;YAClB,IAAI,EAAG,qBAAqB;YAC5B,IAAI,EAAG,kBAAkB,CAAC,GAAG,EAAE,IAAI,CAAC;SACrC;QACD;YACE,KAAK,EAAE,sBAAsB;YAC7B,IAAI,EAAG,4GAA4G;YACnH,IAAI,EAAG,aAAa;YACpB,IAAI,EAAG,gBAAgB;YACvB,IAAI,EAAG,kBAAkB,CAAC,GAAG,EAAE,MAAM,CAAC;SACvC;KACF,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IAErB,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI;0CAClC,CAAC,CAAC,KAAK;wCACT,CAAC,CAAC,IAAI;qFACuC,CAAC,CAAC,IAAI;aAC9E,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAEvB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BP,QAAQ;;;;;;CAMT,CAAA;AACD,CAAC"}
+{"version":3,"file":"index-view.js","sourceRoot":"","sources":["../../../src/templates/demos/index-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAwB,MAAM,oBAAoB,CAAA;AAC7E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAE1D,MAAM,UAAU,cAAc,CAAC,GAAoB;IACjD,MAAM,KAAK,GAAG,KAAK;SAChB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;SAC7C,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,mBAAmB,QAAQ,CAAC,CAAC,CAAC,WAAW,QAAQ,CAAC,CAAC,CAAC;0CACxB,SAAS,CAAC,CAAC,CAAC;wCACd,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC;qFACiB,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;aAC9F,CAAC;SACT,IAAI,CAAC,IAAI,CAAC,CAAA;IAEb,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BP,KAAK;;;;;;CAMN,CAAA;AACD,CAAC;AAED,8EAA8E;AAC9E,2EAA2E;AAC3E,iEAAiE;AACjE,SAAS,aAAa,CAAC,CAAS;IAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;AACtD,CAAC"}

package/dist/templates/demos/localization.d.ts

@@ -0,0 +1,4 @@
+export declare function demosLocalizationView(): string;
+export declare function demosLocalizationApiBlock(): string;
+export declare function langMessages(locale: 'en' | 'es' | 'ar'): string;
+//# sourceMappingURL=localization.d.ts.map

package/dist/templates/demos/localization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localization.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/localization.ts"],"names":[],"mappings":"AAIA,wBAAgB,qBAAqB,IAAI,MAAM,CAkF9C;AAED,wBAAgB,yBAAyB,IAAI,MAAM,CAkBlD;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAuB/D"}

package/dist/templates/demos/localization.js

@@ -0,0 +1,130 @@
+// Localization demo — language switcher hits /api/i18n?locale=…
+// The route uses runWithLocale + setLocale + trans() to render strings.
+// Lang files at lang/<locale>/messages.json.
+export function demosLocalizationView() {
+    return `import { useEffect, useState } from 'react'
+import '@/index.css'
+
+interface I18nResponse {
+  locale:   string
+  greeting: string
+  items:    string
+  welcome:  string
+}
+
+const LOCALES = [
+  { code: 'en', label: 'English' },
+  { code: 'es', label: 'Español' },
+  { code: 'ar', label: 'العربية' },
+]
+
+export default function LocalizationDemo() {
+  const [locale, setLocale] = useState('en')
+  const [data,   setData]   = useState<I18nResponse | null>(null)
+
+  async function load(loc: string) {
+    const res = await fetch(\`/api/i18n?locale=\${loc}\`)
+    setData(await res.json() as I18nResponse)
+  }
+
+  useEffect(() => { load(locale) }, [locale])
+
+  return (
+    <div className="page">
+      <nav className="page-nav">
+        <div className="brand">
+          <span className="brand-dot" />
+          RudderJS
+        </div>
+        <div className="nav-right">
+          <a href="/demos" className="nav-link">Demos</a>
+          <a href="/" className="nav-link">Home</a>
+        </div>
+      </nav>
+
+      <section className="hero">
+        <h1 className="hero-title">Localization</h1>
+        <p className="hero-lead">
+          Pick a locale to fetch the same keys via{' '}
+          <code className="inline-code">trans()</code> on the server. Strings live in{' '}
+          <code className="inline-code">lang/&lt;locale&gt;/messages.json</code>.
+        </p>
+      </section>
+
+      <section className="feature-section" style={{ maxWidth: '32rem', margin: '0 auto' }}>
+        <div className="form-card">
+          <div style={{ marginBottom: '1rem' }}>
+            <label className="form-label" htmlFor="locale">Locale</label>
+            <select
+              id="locale"
+              className="form-input"
+              value={locale}
+              onChange={e => setLocale(e.target.value)}
+            >
+              {LOCALES.map(l => (
+                <option key={l.code} value={l.code}>{l.label} ({l.code})</option>
+              ))}
+            </select>
+          </div>
+
+          {data && (
+            <div style={{ display: 'grid', gap: '0.5rem' }}>
+              <p className="feature-desc"><strong>welcome:</strong> {data.welcome}</p>
+              <p className="feature-desc"><strong>greeting:</strong> {data.greeting}</p>
+              <p className="feature-desc"><strong>items (3):</strong> {data.items}</p>
+              <p className="feature-desc" style={{ fontSize: '0.7rem', opacity: 0.7 }}>
+                resolved server-side with locale = <code>{data.locale}</code>
+              </p>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+export function demosLocalizationApiBlock() {
+    return `// GET /api/i18n?locale=… — resolves the same keys in the requested locale.
+router.get('/api/i18n', async (req, res) => {
+  const { runWithLocale, setLocale, getLocale, trans } = await import('@rudderjs/localization')
+  const requested = (req.query as Record<string, string>)['locale'] ?? 'en'
+
+  const payload = await runWithLocale(requested, async () => {
+    setLocale(requested)
+    return {
+      locale:   getLocale(),
+      welcome:  await trans('messages.welcome'),
+      greeting: await trans('messages.greeting', { name: 'World' }),
+      items:    await trans('messages.items', 3),
+    }
+  })
+
+  res.json(payload)
+})`;
+}
+export function langMessages(locale) {
+    if (locale === 'es') {
+        return `{
+  "welcome":  "¡Bienvenido a RudderJS!",
+  "greeting": "Hola, :name!",
+  "items":    "{0} sin elementos|{1} un elemento|{n} :count elementos"
+}
+`;
+    }
+    if (locale === 'ar') {
+        return `{
+  "welcome":  "مرحباً بك في RudderJS!",
+  "greeting": "مرحباً، :name!",
+  "items":    "{0} لا توجد عناصر|{1} عنصر واحد|{n} :count عناصر"
+}
+`;
+    }
+    return `{
+  "welcome":  "Welcome to RudderJS!",
+  "greeting": "Hello, :name!",
+  "items":    "{0} no items|{1} one item|{n} :count items"
+}
+`;
+}
+//# sourceMappingURL=localization.js.map

package/dist/templates/demos/localization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"localization.js","sourceRoot":"","sources":["../../../src/templates/demos/localization.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,wEAAwE;AACxE,6CAA6C;AAE7C,MAAM,UAAU,qBAAqB;IACnC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFR,CAAA;AACD,CAAC;AAED,MAAM,UAAU,yBAAyB;IACvC,OAAO;;;;;;;;;;;;;;;;GAgBN,CAAA;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,MAA0B;IACrD,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,OAAO;;;;;CAKV,CAAA;IACC,CAAC;IACD,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QACpB,OAAO;;;;;CAKV,CAAA;IACC,CAAC;IACD,OAAO;;;;;CAKR,CAAA;AACD,CAAC"}

package/dist/templates/demos/mail.d.ts

@@ -0,0 +1,4 @@
+export declare function demosMailView(): string;
+export declare function demoMailable(): string;
+export declare function demosMailApiBlock(): string;
+//# sourceMappingURL=mail.d.ts.map

package/dist/templates/demos/mail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mail.d.ts","sourceRoot":"","sources":["../../../src/templates/demos/mail.ts"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,IAAI,MAAM,CAqFtC;AAED,wBAAgB,YAAY,IAAI,MAAM,CAkBrC;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAkB1C"}

package/dist/templates/demos/mail.js

@@ -0,0 +1,127 @@
+// Mail send demo — defines a Mailable and posts to /api/mail/send.
+// Default driver is `log`, so the email lands in the dev terminal.
+export function demosMailView() {
+    return `import { useState } from 'react'
+import '@/index.css'
+
+interface MailResponse {
+  ok:        boolean
+  to:        string
+  subject:   string
+  driver:    string
+}
+
+export default function MailDemo() {
+  const [to,      setTo]      = useState('user@example.com')
+  const [subject, setSubject] = useState('Hello from RudderJS')
+  const [data,    setData]    = useState<MailResponse | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error,   setError]   = useState<string | null>(null)
+
+  async function send() {
+    setLoading(true); setError(null)
+    try {
+      const res = await fetch('/api/mail/send', {
+        method:  'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body:    JSON.stringify({ to, subject }),
+      })
+      const body = await res.json() as MailResponse | { message: string }
+      if (!res.ok) throw new Error((body as { message: string }).message ?? 'Send failed')
+      setData(body as MailResponse)
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="page">
+      <nav className="page-nav">
+        <div className="brand">
+          <span className="brand-dot" />
+          RudderJS
+        </div>
+        <div className="nav-right">
+          <a href="/demos" className="nav-link">Demos</a>
+          <a href="/" className="nav-link">Home</a>
+        </div>
+      </nav>
+
+      <section className="hero">
+        <h1 className="hero-title">Mail send</h1>
+        <p className="hero-lead">
+          Sends a <code className="inline-code">DemoMail</code> via{' '}
+          <code className="inline-code">@rudderjs/mail</code>. Default driver is{' '}
+          <code className="inline-code">log</code> — check the dev server terminal for output.
+        </p>
+      </section>
+
+      <section className="feature-section" style={{ maxWidth: '32rem', margin: '0 auto' }}>
+        <div className="form-card">
+          <div style={{ marginBottom: '1rem' }}>
+            <label className="form-label" htmlFor="mail-to">To</label>
+            <input id="mail-to" className="form-input" value={to} onChange={e => setTo(e.target.value)} />
+          </div>
+          <div style={{ marginBottom: '1rem' }}>
+            <label className="form-label" htmlFor="mail-subject">Subject</label>
+            <input id="mail-subject" className="form-input" value={subject} onChange={e => setSubject(e.target.value)} />
+          </div>
+          <button className="form-submit" onClick={send} disabled={loading}>
+            {loading ? 'Sending…' : 'Send mail'}
+          </button>
+          {error && (
+            <p className="form-error" style={{ marginTop: '1rem' }}>{error}</p>
+          )}
+          {data && (
+            <p className="form-success" style={{ marginTop: '1rem' }}>
+              Sent to <code>{data.to}</code> via <code>{data.driver}</code> driver — check the terminal.
+            </p>
+          )}
+        </div>
+      </section>
+    </div>
+  )
+}
+`;
+}
+export function demoMailable() {
+    return `import { Mailable } from '@rudderjs/mail'
+
+/**
+ * Demo mailable — built dynamically from the to/subject the user enters.
+ * Replace with whatever copy your real templates need (HTML + text).
+ */
+export class DemoMail extends Mailable {
+  constructor(private readonly heading: string) { super() }
+
+  build(): this {
+    return this
+      .subject(this.heading)
+      .html(\`<h1>\${this.heading}</h1><p>Sent from the RudderJS mail demo.</p>\`)
+      .text(\`\${this.heading}\\n\\nSent from the RudderJS mail demo.\`)
+  }
+}
+`;
+}
+export function demosMailApiBlock() {
+    return `// POST /api/mail/send — sends a DemoMail to the user-supplied address.
+router.post('/api/mail/send', async (req, res) => {
+  const body = (req.body ?? {}) as { to?: string; subject?: string }
+  if (!body.to || !body.subject) {
+    return res.status(422).json({ message: 'Body must be { to, subject }' })
+  }
+  const { Mail }     = await import('@rudderjs/mail')
+  const { DemoMail } = await import('../app/Mail/DemoMail.ts')
+  const { config }   = await import('@rudderjs/core')
+  await Mail.to(body.to).send(new DemoMail(body.subject))
+  res.json({
+    ok:      true,
+    to:      body.to,
+    subject: body.subject,
+    driver:  config<string>('mail.default', 'log'),
+  })
+})`;
+}
+//# sourceMappingURL=mail.js.map