create-mercato-app 0.5.1-develop.2949.009dcdd2d5 → 0.5.1-develop.2954.610bab2d08

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mercato-app",
-  "version": "0.5.1-develop.2949.009dcdd2d5",
+  "version": "0.5.1-develop.2954.610bab2d08",
   "type": "module",
   "description": "Create a new Open Mercato application",
   "main": "./dist/index.js",

package/template/package.json.template

@@ -77,7 +77,7 @@
     "@uiw/react-markdown-preview": "^5.1.5",
     "@uiw/react-md-editor": "^4.0.11",
     "@xyflow/react": "^12.6.0",
-    "ai": "^6.0.0",
+    "ai": "^6.0.168",
     "awilix": "^12.0.5",
     "bcryptjs": "^3.0.3",
     "class-variance-authority": "^0.7.1",
@@ -86,7 +86,7 @@
     "lucide-react": "^0.556.0",
     "mammoth": "^1.9.0",
     "newrelic": "^13.7.0",
-    "next": "16.2.3",
+    "next": "16.2.4",
     "pg": "8.20.0",
     "pdfjs-dist": "^5.4.149",
     "react": "19.2.1",
@@ -100,8 +100,8 @@
     "semver": "^7.7.3",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.1.13",
-    "@stripe/react-stripe-js": "^3.9.0",
-    "@stripe/stripe-js": "^7.8.0",
+    "@stripe/react-stripe-js": "^6.2.0",
+    "@stripe/stripe-js": "^9.2.0",
     "@open-mercato/gateway-stripe": "{{PACKAGE_VERSION}}",
     "@open-mercato/sync-akeneo": "{{PACKAGE_VERSION}}"
   },

package/template/scripts/dev-runtime.mjs

@@ -55,9 +55,9 @@ const {
   stripAnsi,
   wrapListLines,
 } = await import(resolveSplashHelpersImport())
-const { resolveProjectBinary, resolveSpawnCommand } = await import(resolveSpawnUtilsImport())
+const { resolveSpawnCommand } = await import(resolveSpawnUtilsImport())
 
-const command = resolveProjectBinary(process.platform === 'win32' ? 'mercato.cmd' : 'mercato')
+const command = process.platform === 'win32' ? 'mercato.cmd' : 'mercato'
 const classic = process.argv.includes('--classic') || isEnabledEnvFlag(process.env.OM_DEV_CLASSIC)
 const verbose = !classic && (process.argv.includes('--verbose') || process.env.MERCATO_DEV_OUTPUT === 'verbose')
 const rawPassthrough = classic || verbose
@@ -412,10 +412,10 @@ function spawnMercato(args) {
   return child
 }
 
-function waitForExit(child, label = 'Child process') {
+function waitForExit(child) {
   return new Promise((resolve) => {
     child.on('exit', (code, signal) => {
-      resolve({ label, code, signal })
+      resolve({ code, signal })
     })
   })
 }
@@ -441,32 +441,6 @@ function resolveChildExitCode(result, fallback = 1) {
   return fallback
 }
 
-function formatChildExitStatus(result) {
-  if (typeof result?.code === 'number') {
-    return `exit code ${result.code}`
-  }
-  if (result?.signal) {
-    return `signal ${result.signal}`
-  }
-  return 'an unknown status'
-}
-
-function resolveUnexpectedExitCode(result) {
-  const exitCode = resolveChildExitCode(result, 1)
-  return exitCode === 0 ? 1 : exitCode
-}
-
-function reportUnexpectedChildExit(result) {
-  const message = `❌ ${result?.label ?? 'Child process'} exited unexpectedly with ${formatChildExitStatus(result)}`
-  console.error(message)
-  rememberRawLog(message)
-  publishRuntimeFailure(message, {
-    progressCurrent: splashState.progressCurrent >= runtimeProgressCurrent ? splashState.progressCurrent : runtimeProgressCurrent,
-    progressLabel: splashState.progressLabel || startupProgress.label,
-    failureLines: [...collectRuntimeFailureLines(), message].slice(-10),
-  })
-}
-
 function joinBaseUrl(baseUrl, pathname) {
   return `${String(baseUrl ?? '').replace(/\/$/, '')}${pathname}`
 }
@@ -1547,16 +1521,15 @@ async function runClassicRuntime() {
 
   const watch = spawnMercato(['generate', 'watch', '--skip-initial'])
   const server = spawnMercato(['server', 'dev'])
-  const result = await Promise.race([
-    waitForExit(watch, 'Generator watch'),
-    waitForExit(server, 'App runtime'),
-  ])
+  const result = await Promise.race([waitForExit(watch), waitForExit(server)])
   if (isGracefulShutdownResult(result)) {
     return
   }
 
-  reportUnexpectedChildExit(result)
-  shutdown(resolveUnexpectedExitCode(result))
+  // Unexpected child exit MUST surface as non-zero even if the child reported
+  // code 0 — hiding a broken runtime as success masks failures from scripts/CI.
+  const childCode = resolveChildExitCode(result, 1)
+  shutdown(childCode === 0 ? 1 : childCode)
 }
 
 if (classic) {
@@ -1571,11 +1544,10 @@ printRuntimePackagesSummary()
 const watch = startFilteredChild(['generate', 'watch', '--skip-initial'], 'Generator watch', classifyWatchLine)
 const server = startFilteredChild(['server', 'dev'], 'App runtime', classifyServerLine)
 
-const result = await Promise.race([
-  waitForExit(watch, 'Generator watch'),
-  waitForExit(server, 'App runtime'),
-])
+const result = await Promise.race([waitForExit(watch), waitForExit(server)])
 if (!isGracefulShutdownResult(result)) {
-  reportUnexpectedChildExit(result)
-  shutdown(resolveUnexpectedExitCode(result))
+  // Unexpected child exit MUST surface as non-zero even if the child reported
+  // code 0 — hiding a broken runtime as success masks failures from scripts/CI.
+  const childCode = resolveChildExitCode(result, 1)
+  shutdown(childCode === 0 ? 1 : childCode)
 }

package/template/scripts/dev-splash-coding-flow.mjs

@@ -303,11 +303,10 @@ function writeJson(res, statusCode, payload) {
   res.end(JSON.stringify(payload))
 }
 
-// Reject any string that would smuggle control characters or NUL bytes through
-// the shell-launching codepath. This is the canonical sanitizer for paths and
-// shell argument values used by the splash coding flow; CodeQL recognizes the
-// explicit reject as a safe boundary.
-const SHELL_UNSAFE_CHAR_PATTERN = /[\u0000-\u001f\u007f`$"';&|<>()[\]!^]/
+// Reject control characters and shell metacharacters that could alter command
+// semantics. Quotes are allowed here because these values are passed through
+// `spawn` argument arrays instead of shell interpolation.
+const SHELL_UNSAFE_CHAR_PATTERN = /[\u0000-\u001f\u007f`$&|;<>()[\]{}*!?~]/
 
 export function isShellSafePathString(value) {
   return typeof value === 'string'
@@ -324,11 +323,29 @@ export function assertShellSafePath(value, label) {
 
 export { sanitizeLaunchDirectory }
 
-function sanitizeLaunchDirectory(value) {
-  const homeFallback = path.resolve(os.homedir())
-  const tmpFallback = path.resolve(os.tmpdir())
-  const fallback = isShellSafePathString(homeFallback) ? homeFallback : assertShellSafePath(tmpFallback, 'Fallback launch directory')
+function resolveSafeLaunchFallbackDirectory() {
+  const candidates = [process.cwd(), os.homedir(), path.parse(process.cwd()).root]
+  for (const candidate of candidates) {
+    const resolvedCandidate = path.resolve(candidate)
+    if (!isShellSafePathString(resolvedCandidate)) {
+      continue
+    }
 
+    try {
+      const stat = fs.statSync(resolvedCandidate)
+      if (stat.isDirectory()) {
+        return resolvedCandidate
+      }
+    } catch {
+      // Try next fallback candidate
+    }
+  }
+
+  return path.parse(process.cwd()).root
+}
+
+function sanitizeLaunchDirectory(value) {
+  const fallback = resolveSafeLaunchFallbackDirectory()
   if (!isShellSafePathString(value) || value.trim().length === 0) {
     return fallback
   }

package/template/scripts/dev.mjs

@@ -174,6 +174,14 @@ function isEnabledEnvFlag(value) {
   return ['1', 'true', 'yes', 'on'].includes(value.trim().toLowerCase())
 }
 
+// OM_DEV_AUTO_MIGRATE defaults to ON: yarn dev applies pending migrations once
+// at startup unless the user explicitly opts out. Documented in template AGENTS.md.
+function shouldAutoMigrateOnDev() {
+  const raw = process.env.OM_DEV_AUTO_MIGRATE
+  if (typeof raw !== 'string') return true
+  return !['0', 'false', 'no', 'off'].includes(raw.trim().toLowerCase())
+}
+
 const splashPortConfig = (() => {
   try {
     return resolveSplashPortConfig()
@@ -1440,70 +1448,6 @@ async function runPassthroughStage(label, commandArgs, options = {}) {
   console.log(`✅ ${formatProgressLine(label, stageCurrent, stageTotal, resolveProgressPercent(stageCurrent, stageTotal))} in ${formatDuration(Date.now() - startedAt)}`)
 }
 
-function isAutoMigrateEnabled() {
-  const raw = process.env.OM_DEV_AUTO_MIGRATE
-  if (typeof raw !== 'string') return true
-  const normalized = raw.trim().toLowerCase()
-  if (normalized === '') return true
-  return !['0', 'false', 'no', 'off'].includes(normalized)
-}
-
-async function runAutoMigrateIfEnabled() {
-  if (!isAutoMigrateEnabled()) {
-    console.log('ℹ️  Skipping auto-migrate: OM_DEV_AUTO_MIGRATE is disabled.')
-    return
-  }
-
-  const label = '🗄️ Auto-applying database migrations'
-  const startedAt = Date.now()
-  console.log(`${label}...`)
-  updateSplashState({
-    phase: label,
-    detail: 'Running yarn db:migrate before dev launch',
-    activity: 'Auto-migrate running',
-  })
-
-  const child = spawnCommand(yarnCommand, ['db:migrate'], {
-    label: 'db:migrate (auto)',
-    logFile: getDevRunnerLog(),
-  })
-  const capturedLines = []
-  const capture = (line) => {
-    capturedLines.push(line)
-    if (capturedLines.length > 200) capturedLines.shift()
-  }
-  connectLineStream(child.stdout, capture)
-  connectLineStream(child.stderr, capture)
-
-  const result = await waitForClose(child)
-  if (isGracefulShutdownResult(result)) return
-
-  const exitCode = resolveChildExitCode(result)
-  if (exitCode === 0) {
-    console.log(`✅ ${label} in ${formatDuration(Date.now() - startedAt)}`)
-    return
-  }
-
-  console.warn('')
-  console.warn('⚠️  Auto-migrate reported a non-zero exit.')
-  console.warn('   This usually means a migration conflict — for example, a parallel')
-  console.warn('   `yarn db:migrate` from another shell already applied the pending change.')
-  console.warn('   Last captured output (tail):')
-  for (const line of capturedLines.slice(-20)) {
-    console.warn(`   | ${line}`)
-  }
-  console.warn('')
-  console.warn('   Suggested next steps:')
-  console.warn('     • Re-run `yarn db:migrate` manually to inspect the exact error.')
-  console.warn('     • If a migration was only partially applied, roll back with')
-  console.warn('       `yarn db:migrate --down` and re-apply.')
-  console.warn('     • To disable auto-migrate entirely for this project, set')
-  console.warn('       `OM_DEV_AUTO_MIGRATE=0` in `.env.local`.')
-  console.warn('   Continuing to launch dev — the app may still work if the schema is')
-  console.warn('   actually up to date. If it does not, fix the migration before reloading.')
-  console.warn('')
-}
-
 function startPackageWatch() {
   if (classic) {
     const child = spawnCommand(yarnCommand, ['watch:packages'], {
@@ -1629,7 +1573,10 @@ function launchMonorepoAppDev() {
 
   app.on('close', (code, signal) => {
     if (!shuttingDown) {
-      shutdown(resolveChildExitCode({ code, signal }, 0))
+      // Unexpected child exit MUST surface as non-zero even if the child reported
+      // code 0 — hiding a broken runtime as success masks failures from scripts/CI.
+      const childCode = resolveChildExitCode({ code, signal }, 1)
+      shutdown(childCode === 0 ? 1 : childCode)
     }
   })
 }
@@ -1720,7 +1667,10 @@ async function runClassicStandaloneDev() {
     await runRawYarnCommand(['install'])
   }
 
-  await runAutoMigrateIfEnabled()
+  if (shouldAutoMigrateOnDev()) {
+    await runRawYarnCommand(['db:migrate'])
+  }
+
   launchStandaloneDev()
 }
 
@@ -1751,7 +1701,12 @@ async function main() {
         stageTotal: standaloneStageTotal,
       })
     }
-    await runAutoMigrateIfEnabled()
+    if (shouldAutoMigrateOnDev()) {
+      await runPassthroughStage('🗄️ Applying database migrations', ['db:migrate'], {
+        stageCurrent: 2,
+        stageTotal: standaloneStageTotal,
+      })
+    }
     launchStandaloneDev()
     return
   }

package/template/src/app/globals.css

@@ -51,27 +51,9 @@ TODO: Fix that latter to have reference by the package names
   --color-primary: var(--primary);
   --color-brand-violet: var(--brand-violet);
   --color-brand-violet-foreground: var(--brand-violet-foreground);
-
-  /* Accent indigo — used by selection controls (checkbox/radio/switch) */
-  --color-accent-indigo: var(--accent-indigo);
-  --color-accent-indigo-foreground: var(--accent-indigo-foreground);
-
-  /* Disabled control tokens */
   --color-bg-disabled: var(--bg-disabled);
   --color-text-disabled: var(--text-disabled);
   --color-border-disabled: var(--border-disabled);
-
-  /* Figma focus ring shadow */
-  --shadow-focus: 0 0 0 2px var(--focus-ring-inner), 0 0 0 4px var(--focus-ring-outer);
-
-  /* Social brand colors (theme-invariant) */
-  --color-brand-apple: var(--brand-apple);
-  --color-brand-github: var(--brand-github);
-  --color-brand-x: var(--brand-x);
-  --color-brand-google-stroke: var(--brand-google-stroke);
-  --color-brand-facebook: var(--brand-facebook);
-  --color-brand-dropbox: var(--brand-dropbox);
-  --color-brand-linkedin: var(--brand-linkedin);
   --color-popover-foreground: var(--popover-foreground);
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
@@ -79,7 +61,7 @@ TODO: Fix that latter to have reference by the package names
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) + 6px);
 
   /* ═══ Design System: Semantic Status Colors ═══ */
   --color-status-error-bg: var(--status-error-bg);
@@ -107,11 +89,28 @@ TODO: Fix that latter to have reference by the package names
   --color-status-neutral-border: var(--status-neutral-border);
   --color-status-neutral-icon: var(--status-neutral-icon);
 
+  /* ═══ Design System: Accent Colors ═══ */
+  --color-accent-indigo: var(--accent-indigo);
+  --color-accent-indigo-foreground: var(--accent-indigo-foreground);
+
+  /* ═══ Design System: Brand Colors ═══ */
+  --color-brand-violet: var(--brand-violet);
+  --color-brand-lime: var(--brand-lime);
+
+  /* ═══ Design System: Social Brand Colors (theme-invariant) ═══ */
+  --color-brand-apple: var(--brand-apple);
+  --color-brand-github: var(--brand-github);
+  --color-brand-x: var(--brand-x);
+  --color-brand-google-stroke: var(--brand-google-stroke);
+  --color-brand-facebook: var(--brand-facebook);
+  --color-brand-dropbox: var(--brand-dropbox);
+  --color-brand-linkedin: var(--brand-linkedin);
+
   /* ═══ Design System: Typography ═══ */
   --font-size-overline: 0.6875rem;
   --font-size-overline--line-height: 1rem;
 
-  /* ═══ Design System: Z-Index Scale (Tailwind v4 namespace: z-{name} → var(--z-index-{name})) ═══ */
+  /* ═══ Design System: Z-Index Scale ═══ */
   --z-index-base: 0;
   --z-index-sticky: 10;
   --z-index-dropdown: 20;
@@ -121,6 +120,25 @@ TODO: Fix that latter to have reference by the package names
   --z-index-tooltip: 60;
   --z-index-banner: 70;
   --z-index-top: 100;
+
+  /* ═══ Design System: Shadow Scale ═══
+     Tuned to ink #101828. Dark mode overrides in .dark below.
+     xs  → flat controls (button, input, icon-button)
+     sm  → cards, panels, sections
+     md  → hover elevation, slightly raised cards
+     lg  → dialogs, overlays, popovers
+     xl  → floating panels (drawers, side sheets)
+     2xl → top-level modals, command palette
+  */
+  --shadow-xs:  0 1px 2px rgb(16 24 40 / 0.05);
+  --shadow-sm:  0 1px 3px rgb(16 24 40 / 0.08), 0 1px 2px rgb(16 24 40 / 0.06);
+  --shadow-md:  0 4px 12px rgb(16 24 40 / 0.08);
+  --shadow-lg:  0 12px 32px rgb(16 24 40 / 0.10);
+  --shadow-xl:  0 20px 40px rgb(16 24 40 / 0.12);
+  --shadow-2xl: 0 25px 50px rgb(16 24 40 / 0.20);
+
+  /* Figma button focus: 2px white inner + 4px slate-alpha-16 outer */
+  --shadow-focus: 0 0 0 2px var(--focus-ring-inner), 0 0 0 4px var(--focus-ring-outer);
 }
 
 :root {
@@ -128,7 +146,9 @@ TODO: Fix that latter to have reference by the package names
   --font-geist-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-geist-mono: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
   --radius: 0.625rem;
-  /* Focus ring tokens (opt-in via .focus-ring-fancy) */
+  /* Brand lime — theme-invariant (no .dark override). Brand violet is themed (see below + .dark). */
+  --brand-lime: #D4F372;
+  /* Focus ring tokens (Figma dual-shadow spec — opt-in via .focus-ring-fancy) */
   --focus-ring-inner: rgba(255, 255, 255, 1);
   --focus-ring-outer: rgba(153, 160, 174, 0.16);
   /* Social brand colors — theme-invariant */
@@ -150,8 +170,10 @@ TODO: Fix that latter to have reference by the package names
   --brand-violet: oklch(0.55 0.2 293);
   --brand-violet-foreground: oklch(0.985 0 0);
   --primary-hover: oklch(0.145 0 0);
+  /* Accent indigo — used for selection controls (checkbox, radio, switch) */
   --accent-indigo: #6366f1;
   --accent-indigo-foreground: #ffffff;
+  /* Disabled control tokens (Figma: bg/weak-25, text/disabled-300, stroke-soft-200) */
   --bg-disabled: #f7f7f7;
   --text-disabled: #d1d1d1;
   --border-disabled: #ebebeb;
@@ -209,11 +231,11 @@ TODO: Fix that latter to have reference by the package names
   --status-warning-border: oklch(0.830 0.070 80);
   --status-warning-icon: oklch(0.700 0.160 70);
 
-  /* Info (hue ~260° — aligned with --chart-blue) */
-  --status-info-bg: oklch(0.965 0.015 260);
-  --status-info-text: oklch(0.370 0.100 260);
-  --status-info-border: oklch(0.830 0.060 260);
-  --status-info-icon: oklch(0.546 0.245 262.881);  /* = --chart-blue */
+  /* Info (hue ~277° — indigo, bridges to brand violet) */
+  --status-info-bg: oklch(0.962 0.018 272.314);    /* indigo-50 #EEF2FF */
+  --status-info-text: oklch(0.359 0.144 278.697);  /* indigo-800 #3730A3 */
+  --status-info-border: oklch(0.870 0.065 274.039);/* indigo-200 #C7D2FE */
+  --status-info-icon: oklch(0.511 0.262 276.966);  /* indigo-600 #4F46E5 = --chart-indigo */
 
   /* Neutral (achromatic — aligned with --muted) */
   --status-neutral-bg: oklch(0.965 0 0);
@@ -232,8 +254,16 @@ TODO: Fix that latter to have reference by the package names
 
 .dark {
   color-scheme: dark;
+  /* Focus ring tokens — dark variant */
   --focus-ring-inner: var(--background);
   --focus-ring-outer: rgba(255, 255, 255, 0.18);
+  /* Shadow scale — dark mode: use pure black, higher opacity for visibility */
+  --shadow-xs:  0 1px 2px rgb(0 0 0 / 0.30);
+  --shadow-sm:  0 1px 3px rgb(0 0 0 / 0.40), 0 1px 2px rgb(0 0 0 / 0.30);
+  --shadow-md:  0 4px 12px rgb(0 0 0 / 0.50);
+  --shadow-lg:  0 12px 32px rgb(0 0 0 / 0.60);
+  --shadow-xl:  0 20px 40px rgb(0 0 0 / 0.70);
+  --shadow-2xl: 0 25px 50px rgb(0 0 0 / 0.80);
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
@@ -245,8 +275,10 @@ TODO: Fix that latter to have reference by the package names
   --brand-violet: oklch(0.65 0.2 293);
   --brand-violet-foreground: oklch(0.985 0 0);
   --primary-hover: oklch(0.85 0 0);
+  /* Accent indigo — slightly lighter in dark mode for contrast */
   --accent-indigo: #818cf8;
   --accent-indigo-foreground: #ffffff;
+  /* Disabled control tokens (dark) */
   --bg-disabled: oklch(0.25 0 0);
   --text-disabled: oklch(0.45 0 0);
   --border-disabled: oklch(0.30 0 0);
@@ -304,11 +336,11 @@ TODO: Fix that latter to have reference by the package names
   --status-warning-border: oklch(0.420 0.060 80);
   --status-warning-icon: oklch(0.820 0.160 84.429);  /* = dark --chart-amber */
 
-  /* Info */
-  --status-info-bg: oklch(0.220 0.025 260);
-  --status-info-text: oklch(0.840 0.080 260);
-  --status-info-border: oklch(0.400 0.060 260);
-  --status-info-icon: oklch(0.623 0.214 259.815);  /* = dark --chart-blue */
+  /* Info (indigo — bridges to brand violet in dark mode) */
+  --status-info-bg: oklch(0.220 0.040 276);
+  --status-info-text: oklch(0.785 0.115 274.713);  /* indigo-300 #A5B4FC */
+  --status-info-border: oklch(0.359 0.144 278.697);/* indigo-800 #3730A3 */
+  --status-info-icon: oklch(0.585 0.233 277.117); /* indigo-500 #6366F1 */
 
   /* Neutral */
   --status-neutral-bg: oklch(0.230 0 0);
@@ -324,7 +356,7 @@ TODO: Fix that latter to have reference by the package names
   body {
     @apply bg-background text-foreground;
   }
-  /* Native form controls — use the DS indigo accent */
+  /* Native form controls — use the DS indigo accent instead of browser default */
   input[type="checkbox"],
   input[type="radio"] {
     accent-color: var(--accent-indigo);

package/template/src/components/DemoFeedbackWidget.tsx

@@ -7,6 +7,7 @@ import { MessageCircle, Send } from 'lucide-react'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@open-mercato/ui/primitives/dialog'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
 import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
@@ -200,19 +201,24 @@ export function DemoFeedbackWidget({ demoModeEnabled }: { demoModeEnabled: boole
   }, [submitState, resetForm])
 
   if (!mounted) return null
-  if (otherModalOpen && !open) return null
 
   const caption = CAPTIONS[captionIndex]
   const currentCaption = t(caption.key, caption.fallback)
 
+  if (otherModalOpen && !open) return null
+
+  // Brand-gradient floating CTA. Uses brand CSS vars (no hardcoded hex) +
+  // z-banner token (no z-[60]) so it stays DS-compliant while keeping the
+  // bespoke 135deg / 0-50-100 gradient that the marketing visual depends on
+  // (FancyButton's primary variant uses 161.7deg / 0-35.36-70.72 which
+  // truncates the violet-to-end transition and looks banded).
   const floatingButton = (
     <button
       type="button"
       onClick={() => { setOpen(true); if (submitState === 'sent') resetForm() }}
-      className="fixed bottom-6 right-6 z-banner flex items-center gap-2 rounded-full px-5 py-3 text-sm font-semibold text-white shadow-xl transition-all hover:scale-105 hover:shadow-2xl active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 animate-[subtle-bounce_2s_ease-in-out_infinite]"
+      className="fixed bottom-6 right-6 z-banner flex items-center gap-2 rounded-full px-5 py-3 text-sm font-semibold text-foreground shadow-xl transition-all hover:scale-105 hover:shadow-2xl active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 animate-[subtle-bounce_2s_ease-in-out_infinite]"
       style={{
-        background: 'linear-gradient(135deg, #B4F372 0%, #EEFB63 50%, #BC9AFF 100%)',
-        color: '#1B1B1B',
+        backgroundImage: 'linear-gradient(135deg, var(--brand-lime, #B4F372) 0%, #EEFB63 50%, var(--brand-violet, #BC9AFF) 100%)',
       }}
       aria-label={t('demoFeedback.button.ariaLabel', 'Open feedback form')}
     >
@@ -272,14 +278,14 @@ export function DemoFeedbackWidget({ demoModeEnabled }: { demoModeEnabled: boole
                 {fieldErrors.email && <p className="text-xs text-status-error-text">{fieldErrors.email}</p>}
               </div>
 
-              <textarea
+              <Textarea
                 id="feedback-message"
                 rows={3}
                 placeholder={t('demoFeedback.form.message', 'Your message (optional)')}
                 value={message}
                 onChange={(e) => setMessage(e.target.value)}
                 disabled={submitState === 'sending'}
-                className="flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+                className="resize-none"
               />
 
               <label className="flex items-start gap-2.5 text-xs text-muted-foreground leading-relaxed">
@@ -359,12 +365,13 @@ export function DemoFeedbackWidget({ demoModeEnabled }: { demoModeEnabled: boole
 
               <Button
                 type="button"
-                className="mt-1 w-full gap-2"
+                className="mt-1 w-full gap-2 text-foreground"
                 disabled={submitState === 'sending'}
                 onClick={handleSubmit}
                 style={{
-                  background: 'linear-gradient(135deg, #B4F372 0%, #EEFB63 50%, #BC9AFF 100%)',
-                  color: '#1B1B1B',
+                  // Same brand-gradient as the floating CTA (135deg / 0-50-100,
+                  // brand vars instead of hex literals to satisfy DS rules).
+                  backgroundImage: 'linear-gradient(135deg, var(--brand-lime, #B4F372) 0%, #EEFB63 50%, var(--brand-violet, #BC9AFF) 100%)',
                 }}
               >
                 {submitState === 'sending' ? (

package/template/src/components/GlobalNoticeBars.tsx

@@ -54,11 +54,11 @@ export function GlobalNoticeBars({ demoModeEnabled }: { demoModeEnabled: boolean
   }
 
   return (
-    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-banner flex flex-col items-center gap-3 px-4">
+    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-[70] flex flex-col items-center gap-3 px-4">
       {showDemoNotice ? (
-        <div className="pointer-events-auto w-full max-w-4xl rounded-lg border border-status-warning-border bg-status-warning-bg p-4 shadow-lg backdrop-blur">
+        <div className="pointer-events-auto w-full max-w-4xl rounded-lg border border-amber-200 bg-amber-50/90 p-4 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-amber-50/70 dark:border-amber-900/70 dark:bg-amber-950/40">
           <div className="flex items-start gap-3">
-            <div className="flex-1 text-sm text-status-warning-text space-y-1">
+            <div className="flex-1 text-sm text-amber-900 dark:text-amber-50 space-y-1">
               <p className="font-medium">{t('notices.demo.title', 'Demo Environment')}</p>
               <p>
                 {t('notices.demo.description', 'This instance is provided for demo purposes only. Data may be reset at any time and is not retained for any guaranteed period.')}
@@ -69,22 +69,22 @@ export function GlobalNoticeBars({ demoModeEnabled }: { demoModeEnabled: boolean
                   href="https://github.com/open-mercato"
                   target="_blank"
                   rel="noreferrer"
-                  className="underline font-medium hover:text-status-warning-text"
+                  className="underline font-medium hover:text-amber-800 dark:hover:text-amber-200"
                 >
                   {t('notices.demo.installLink', 'Install Open Mercato locally')}
                 </a>
                 . {t('notices.demo.reviewLinks', 'Review our')}{' '}
-                <Link className="underline font-medium hover:text-status-warning-text" href="/terms">
+                <Link className="underline font-medium hover:text-amber-800 dark:hover:text-amber-200" href="/terms">
                   {t('common.terms')}
                 </Link>{' '}
                 {t('notices.demo.and', 'and')}{' '}
-                <Link className="underline font-medium hover:text-status-warning-text" href="/privacy">
+                <Link className="underline font-medium hover:text-amber-800 dark:hover:text-amber-200" href="/privacy">
                   {t('common.privacy')}
                 </Link>
                 .
               </p>
             </div>
-            <Button variant="ghost" size="icon" onClick={handleDismissDemo} className="shrink-0 text-status-warning-text">
+            <Button variant="ghost" size="icon" onClick={handleDismissDemo} className="shrink-0 text-amber-900 dark:text-amber-100">
               <X className="size-4" />
             </Button>
           </div>

package/template/src/components/StartPageContent.tsx

@@ -135,16 +135,16 @@ export function StartPageContent({ showStartPage: initialShowStartPage, showOnbo
         </section>
       ) : null}
 
-      <section className="rounded-lg border bg-status-info-bg border-status-info-border p-4">
+      <section className="rounded-lg border bg-blue-50 dark:bg-blue-950/20 border-blue-200 dark:border-blue-900 p-4">
         <div className="flex items-start gap-3">
-          <Info className="size-5 text-status-info-icon shrink-0 mt-0.5" />
+          <Info className="size-5 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
           <div className="flex-1">
-            <h3 className="text-sm font-semibold text-status-info-text mb-1">{t('startPage.defaultPassword.title', 'Default Password')}</h3>
-            <p className="text-sm text-status-info-text">
+            <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-1">{t('startPage.defaultPassword.title', 'Default Password')}</h3>
+            <p className="text-sm text-blue-800 dark:text-blue-200">
               {t('startPage.defaultPassword.description1', 'The default password for all demo accounts is')}{' '}
-              <code className="px-1.5 py-0.5 rounded bg-status-info-bg font-mono text-xs">secret</code>.
+              <code className="px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900 font-mono text-xs">secret</code>.
               {' '}{t('startPage.defaultPassword.description2', 'To change passwords, use the CLI command:')}{' '}
-              <code className="px-1.5 py-0.5 rounded bg-status-info-bg font-mono text-xs">yarn mercato auth set-password --email &lt;email&gt; --password &lt;newPassword&gt;</code>
+              <code className="px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900 font-mono text-xs">yarn mercato auth set-password --email &lt;email&gt; --password &lt;newPassword&gt;</code>
               <span className="mt-2 block">{t('startPage.defaultPassword.description3', 'Demo account emails are printed in the terminal output during yarn initialize.')}</span>
             </p>
           </div>

package/template/src/components/ui/button.tsx

@@ -1,59 +1 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@open-mercato/shared/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive dark:bg-destructive/10",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
+export { Button, buttonVariants } from '@open-mercato/ui/primitives/button'

package/template/src/modules/example/__integration__/TC-UMES-005.spec.ts

@@ -46,26 +46,34 @@ test.describe('TC-UMES-005: Phase L — Integration Extensions', () => {
   })
 
   test('TC-UMES-L03: wizard completes all 3 steps and outputs result', async ({ page }) => {
-    // Step 1 — fill credentials (Tab between fills to commit controlled input state)
+    test.setTimeout(60_000)
+    // Step 1 — fill credentials (controlled inputs)
     const apiKeyInput = page.locator('[data-crud-field-id="apiKey"] input')
     const apiSecretInput = page.locator('[data-crud-field-id="apiSecret"] input')
     await apiKeyInput.click()
-    await apiKeyInput.fill('test-key-123')
-    await page.keyboard.press('Tab')
-    await apiSecretInput.fill('test-secret-456')
-    await page.keyboard.press('Tab')
+    await apiKeyInput.pressSequentially('test-key-123', { delay: 10 })
+    await apiSecretInput.click()
+    await apiSecretInput.pressSequentially('test-secret-456', { delay: 10 })
+    // Confirm React state caught up before validation-gated Next click
+    await expect(apiKeyInput).toHaveValue('test-key-123', { timeout: 5_000 })
+    await expect(apiSecretInput).toHaveValue('test-secret-456', { timeout: 5_000 })
     await page.getByRole('button', { name: 'Next', exact: true }).click()
 
-    // Step 2 — select sync direction
-    const syncSelect = page.locator('[data-crud-field-id="syncDirection"] select')
-    await expect(syncSelect).toBeVisible()
-    await syncSelect.selectOption('bidirectional')
+    // Step 2 — wait for transition (apiKey input gone, syncDirection rendered)
+    await expect(apiKeyInput).toHaveCount(0, { timeout: 10_000 })
+    // Wizard uses Radix Select in apps/mercato — interact via combobox + portal option
+    const syncTrigger = page.locator('[data-crud-field-id="syncDirection"] [role="combobox"]')
+    await expect(syncTrigger).toBeVisible({ timeout: 10_000 })
+    await syncTrigger.click()
+    await page.getByRole('option', { name: 'Bidirectional', exact: true }).click()
     await page.getByRole('button', { name: 'Next', exact: true }).click()
 
-    // Step 3 — select frequency and complete
-    const freqSelect = page.locator('[data-crud-field-id="frequency"] select')
-    await expect(freqSelect).toBeVisible()
-    await freqSelect.selectOption('daily')
+    // Step 3 — wait for syncDirection gone, frequency rendered (Radix Select)
+    await expect(page.locator('[data-crud-field-id="syncDirection"]')).toHaveCount(0, { timeout: 10_000 })
+    const freqTrigger = page.locator('[data-crud-field-id="frequency"] [role="combobox"]')
+    await expect(freqTrigger).toBeVisible({ timeout: 10_000 })
+    await freqTrigger.click()
+    await page.getByRole('option', { name: 'Daily', exact: true }).click()
     await page.getByRole('button', { name: 'Complete', exact: true }).click()
 
     // Verify wizard result output
@@ -80,19 +88,22 @@ test.describe('TC-UMES-005: Phase L — Integration Extensions', () => {
   })
 
   test('TC-UMES-L04: wizard back button navigates to previous step', async ({ page }) => {
-    // Fill step 1 and go to step 2 (Tab between fills to commit controlled input state)
+    test.setTimeout(60_000)
+    // Fill step 1 (controlled inputs — flush state then advance)
     const apiKeyInput = page.locator('[data-crud-field-id="apiKey"] input')
     const apiSecretInput = page.locator('[data-crud-field-id="apiSecret"] input')
     await apiKeyInput.click()
-    await apiKeyInput.fill('key')
-    await page.keyboard.press('Tab')
-    await apiSecretInput.fill('secret')
-    await page.keyboard.press('Tab')
+    await apiKeyInput.pressSequentially('key', { delay: 10 })
+    await apiSecretInput.click()
+    await apiSecretInput.pressSequentially('secret', { delay: 10 })
+    await expect(apiKeyInput).toHaveValue('key', { timeout: 5_000 })
+    await expect(apiSecretInput).toHaveValue('secret', { timeout: 5_000 })
     await page.getByRole('button', { name: 'Next', exact: true }).click()
 
-    // Should be on step 2
-    const syncSelect = page.locator('[data-crud-field-id="syncDirection"] select')
-    await expect(syncSelect).toBeVisible()
+    // Step 2 — wait for transition (apiKey input gone, syncDirection rendered as Radix combobox)
+    await expect(apiKeyInput).toHaveCount(0, { timeout: 10_000 })
+    const syncTrigger = page.locator('[data-crud-field-id="syncDirection"] [role="combobox"]')
+    await expect(syncTrigger).toBeVisible({ timeout: 10_000 })
 
     // Click back
     await page.getByRole('button', { name: 'Back', exact: true }).click()

package/template/src/modules/example/api/blog/[id]/route.ts

@@ -4,7 +4,7 @@ import { exampleTag, exampleErrorSchema } from '../../openapi'
 
 export const metadata = {
   GET: { requireAuth: true, requireFeatures: ['example.todos.view'] },
-  POST: { requireAuth: true, requireFeatures: ['example.todos.manage'] },
+  POST: { requireAuth: true, requireFeatures: ['example.todos.view'] },
 }
 
 export async function GET(_req: Request, ctx: { params: { id: string } }) {

package/template/src/modules/example/backend/umes-integrations/page.tsx

@@ -3,6 +3,13 @@
 import * as React from 'react'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { registerIntegration, getAllIntegrations, getIntegrationTitle } from '@open-mercato/shared/modules/integrations/types'
 
@@ -244,32 +251,38 @@ export default function UmesIntegrationsPage() {
             {currentStepId === 'scope' && (
               <div data-crud-field-id="syncDirection" className="space-y-1">
                 <label className="text-sm font-medium">Sync Direction</label>
-                <select
-                  value={wizardData.syncDirection ?? ''}
-                  onChange={(event) => handleWizardChange('syncDirection', event.target.value)}
-                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                <Select
+                  value={wizardData.syncDirection || undefined}
+                  onValueChange={(value) => handleWizardChange('syncDirection', value ?? '')}
                 >
-                  <option value="">Select direction</option>
-                  <option value="push">Push</option>
-                  <option value="pull">Pull</option>
-                  <option value="bidirectional">Bidirectional</option>
-                </select>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select direction" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="push">Push</SelectItem>
+                    <SelectItem value="pull">Pull</SelectItem>
+                    <SelectItem value="bidirectional">Bidirectional</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
             )}
 
             {currentStepId === 'schedule' && (
               <div data-crud-field-id="frequency" className="space-y-1">
                 <label className="text-sm font-medium">Frequency</label>
-                <select
-                  value={wizardData.frequency ?? ''}
-                  onChange={(event) => handleWizardChange('frequency', event.target.value)}
-                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                <Select
+                  value={wizardData.frequency || undefined}
+                  onValueChange={(value) => handleWizardChange('frequency', value ?? '')}
                 >
-                  <option value="">Select frequency</option>
-                  <option value="hourly">Hourly</option>
-                  <option value="daily">Daily</option>
-                  <option value="weekly">Weekly</option>
-                </select>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select frequency" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="hourly">Hourly</SelectItem>
+                    <SelectItem value="daily">Daily</SelectItem>
+                    <SelectItem value="weekly">Weekly</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
             )}
 

package/template/src/modules/example/data/entities.ts

@@ -1,4 +1,4 @@
-import { Entity, PrimaryKey, Property } from '@mikro-orm/decorators/legacy'
+import { Entity, PrimaryKey, Property } from '@mikro-orm/decorators/legacy';
 
 @Entity({ tableName: 'example_items' })
 export class ExampleItem {

package/template/src/modules/example/widgets/components.ts

@@ -39,7 +39,7 @@ const checkoutTestComponentOverrides: ComponentOverride[] = [
         React.createElement(
           'div',
           {
-            className: 'rounded-xl border border-dashed border-blue-300 bg-blue-50/40 p-3',
+            className: 'rounded-2xl border border-dashed border-blue-300 bg-blue-50/40 p-3',
             'data-testid': 'example-checkout-summary-wrapper',
           },
           React.createElement(Original, props as object)
@@ -57,7 +57,7 @@ const checkoutTestComponentOverrides: ComponentOverride[] = [
         React.createElement(
           'div',
           {
-            className: 'rounded-xl border border-dashed border-amber-300 bg-amber-50/40 p-3',
+            className: 'rounded-2xl border border-dashed border-amber-300 bg-amber-50/40 p-3',
             'data-testid': 'example-checkout-help-wrapper',
           },
           React.createElement(Original, props as object)

package/template/src/modules/example/widgets/dashboard/todos/widget.client.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { hydrateTodoSettings, type TodoSettings } from './config'
@@ -138,12 +139,12 @@ const TodoWidgetClient: React.FC<DashboardWidgetComponentProps<TodoSettings>> =
           <label htmlFor="todo-page-size" className="text-xs font-medium uppercase text-muted-foreground">
             {t('example.widgets.todo.settings.itemsLabel')}
           </label>
-          <input
+          <Input
             id="todo-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={value.pageSize}
             onChange={(event) => onSettingsChange({ ...value, pageSize: Number(event.target.value) })}
           />
@@ -166,9 +167,9 @@ const TodoWidgetClient: React.FC<DashboardWidgetComponentProps<TodoSettings>> =
   return (
     <div className="space-y-4">
       <div className="flex gap-2">
-        <input
+        <Input
           type="text"
-          className="flex-1 rounded-md border px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className="flex-1"
           placeholder={t('example.widgets.todo.input.placeholder')}
           value={draft}
           onChange={(event) => setDraft(event.target.value)}

package/template/src/modules/example/widgets/injection/catalog-seo-report/widget.client.tsx

@@ -96,15 +96,15 @@ export default function CatalogSeoReportWidget(_props: InjectionWidgetComponentP
       ) : loading ? (
         <p className="mt-2 text-xs text-muted-foreground">{t('common.loading', 'Loading…')}</p>
       ) : issues.length === 0 ? (
-        <p className="mt-2 text-xs text-status-success-text">{t('example.widgets.catalogSeoReport.healthy', 'All reviewed items look good!')}</p>
+        <p className="mt-2 text-xs text-emerald-700">{t('example.widgets.catalogSeoReport.healthy', 'All reviewed items look good!')}</p>
       ) : (
         <ul className="mt-3 space-y-2">
           {issues.map((issue) => (
-            <li key={issue.id} className="rounded border border-status-warning-border bg-status-warning-bg px-3 py-2">
+            <li key={issue.id} className="rounded border border-amber-200 dark:border-amber-900/70 bg-amber-50 dark:bg-amber-950/40 px-3 py-2">
               <div className="flex items-center justify-between gap-3">
                 <div>
-                  <div className="text-sm font-medium text-foreground">{issue.title}</div>
-                  <div className="text-overline text-status-warning-text">{issue.issue}</div>
+                  <div className="text-sm font-medium text-foreground dark:text-amber-50">{issue.title}</div>
+                  <div className="text-overline text-amber-800 dark:text-amber-300">{issue.issue}</div>
                 </div>
                 <Button asChild size="sm" variant="outline">
                   <a href={`/backend/catalog/products/${issue.id}`} className="text-xs">

package/template/src/modules/example/widgets/injection/customer-priority-detail/widget.client.tsx

@@ -5,6 +5,13 @@ import type { InjectionWidgetComponentProps } from '@open-mercato/shared/modules
 import { readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 
 type PriorityValue = 'low' | 'normal' | 'high' | 'critical'
 type PriorityItem = { id?: string; priority?: string }
@@ -117,17 +124,21 @@ export default function CustomerPriorityDetailWidget({ context, data, disabled }
     <div className="rounded-md border border-border p-3">
       <div className="mb-1 text-sm font-medium text-foreground">{t('example.priority.detail.label')}</div>
       <div className="text-xs text-muted-foreground mb-2">{t('example.priority.detail.description')}</div>
-      <select
-        className="h-9 w-full rounded border border-input bg-background px-3 text-sm"
+      <Select
         value={value}
-        onChange={(event) => { void handleChange(event) }}
+        onValueChange={(next) => { void handleChange({ target: { value: next } } as React.ChangeEvent<HTMLSelectElement>) }}
         disabled={disabled || loading || saving}
       >
-        <option value="low">{t('example.priority.low')}</option>
-        <option value="normal">{t('example.priority.normal')}</option>
-        <option value="high">{t('example.priority.high')}</option>
-        <option value="critical">{t('example.priority.critical')}</option>
-      </select>
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="low">{t('example.priority.low')}</SelectItem>
+          <SelectItem value="normal">{t('example.priority.normal')}</SelectItem>
+          <SelectItem value="high">{t('example.priority.high')}</SelectItem>
+          <SelectItem value="critical">{t('example.priority.critical')}</SelectItem>
+        </SelectContent>
+      </Select>
       {loading ? <div className="mt-2 text-xs text-muted-foreground">{t('example.priority.detail.loading')}</div> : null}
       {saving ? <div className="mt-2 text-xs text-muted-foreground">{t('example.priority.detail.saving')}</div> : null}
       {error ? <div className="mt-2 text-xs text-destructive">{error}</div> : null}

package/template/src/modules/example/widgets/injection/portal-recent-activity/widget.client.tsx

@@ -10,11 +10,11 @@ const MOCK_ACTIVITY = [
 
 function ActivityIcon({ type }: { type: string }) {
   const colors: Record<string, string> = {
-    login: 'bg-status-success-bg text-status-success-icon',
-    profile: 'bg-status-info-bg text-status-info-icon',
-    order: 'bg-status-warning-bg text-status-warning-icon',
+    login: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400',
+    profile: 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400',
+    order: 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400',
     download: 'bg-violet-100 text-violet-600 dark:bg-violet-900/30 dark:text-violet-400',
-    security: 'bg-status-error-bg text-status-error-icon',
+    security: 'bg-rose-100 text-rose-600 dark:bg-rose-900/30 dark:text-rose-400',
   }
   return (
     <div className={`flex size-8 shrink-0 items-center justify-center rounded-lg text-xs font-bold ${colors[type] ?? 'bg-muted text-muted-foreground'}`}>

package/template/src/modules/example/widgets/injection/sales-todos/widget.client.tsx

@@ -148,10 +148,10 @@ export default function SalesTodosWidget({ context }: InjectionWidgetComponentPr
         </Button>
       </form>
       {lastEvent ? (
-        <div className="flex items-center gap-2 rounded bg-status-info-bg px-3 py-1.5 text-xs text-status-info-text">
-          <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-status-info-icon" />
+        <div className="flex items-center gap-2 rounded bg-blue-50 px-3 py-1.5 text-xs text-blue-700 dark:bg-blue-950 dark:text-blue-300">
+          <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500" />
           SSE Event received: <code className="font-mono">{lastEvent.id}</code>
-          <span className="text-status-info-text">
+          <span className="text-blue-500/70">
             {new Date(lastEvent.timestamp).toLocaleTimeString()}
           </span>
         </div>

package/template/src/modules/example_customers_sync/api/example-customers-sync/mappings/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server'
 import { z } from 'zod'
 import type { EntityManager } from '@mikro-orm/postgresql'
-import { type Kysely } from 'kysely'
+import { type Kysely, sql } from 'kysely'
 import { getAuthFromRequest } from '@open-mercato/shared/lib/auth/server'
 import { createRequestContainer } from '@open-mercato/shared/lib/di/container'
 import { findWithDecryption } from '@open-mercato/shared/lib/encryption/find'

package/template/src/modules/ratelimit_probe/api/ping/route.ts

@@ -0,0 +1,35 @@
+import { z } from 'zod'
+import type { OpenApiRouteDoc } from '@open-mercato/shared/lib/openapi'
+
+export const metadata = {
+  POST: {
+    requireAuth: false,
+    rateLimit: { points: 3, duration: 60, keyPrefix: 'ratelimit_probe' },
+  },
+}
+
+export async function POST() {
+  return Response.json({ ok: true })
+}
+
+export const openApi: OpenApiRouteDoc = {
+  tag: 'RateLimitProbe',
+  methods: {
+    POST: {
+      summary: 'Test-only endpoint with per-route metadata.rateLimit — used to prove rate-limit leakage under OM_INTEGRATION_TEST',
+      tags: ['RateLimitProbe'],
+      responses: [
+        {
+          status: 200,
+          description: 'Always OK when under the points budget',
+          schema: z.object({ ok: z.literal(true) }),
+        },
+        {
+          status: 429,
+          description: 'Rate limit exceeded (3 points / 60 s per client IP)',
+          schema: z.object({ error: z.string() }),
+        },
+      ],
+    },
+  },
+}

package/template/src/modules.ts

@@ -50,6 +50,7 @@ export const enabledModules: ModuleEntry[] = [
   { id: 'customer_accounts', from: '@open-mercato/core' },
   { id: 'portal', from: '@open-mercato/core' },
   { id: 'example', from: '@app' },
+  { id: 'ratelimit_probe', from: '@app' },
 ]
 
 if (enabledModules.some((entry) => entry.id === 'example')) {