create-react-starter-kit 1.0.0

package/templates/src/styles/global.css.ejs

@@ -0,0 +1,457 @@
+<% if (styling === 'tailwind' || uiLibrary === 'shadcn') { -%>
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+  --bg: #f5f7fb;
+  --surface: #ffffff;
+  --ink: #0f172a;
+  --muted: #64748b;
+  --line: #e2e8f0;
+  --brand: #1d4ed8;
+  --ok: #15803d;
+  --bad: #b91c1c;
+  --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+body {
+  @apply m-0 min-h-screen bg-[var(--bg)] font-body text-[var(--ink)] antialiased;
+  background-image:
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 40%),
+    radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 35%),
+    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+}
+
+#root {
+  min-height: 100vh;
+}
+
+.app-shell {
+  @apply mx-auto flex min-h-screen max-w-6xl flex-col px-4 py-6 sm:px-6;
+}
+
+.app-header {
+  @apply mb-8 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-[var(--line)] bg-white/80 px-5 py-4 shadow-[var(--shadow)] backdrop-blur;
+}
+
+.brand {
+  @apply flex items-center gap-3;
+}
+
+.brand-mark {
+  @apply h-10 w-10 rounded-xl bg-gradient-to-br from-brand-500 to-brand-900;
+}
+
+.brand-name {
+  @apply m-0 font-display text-lg font-bold tracking-tight;
+}
+
+.brand-tagline,
+.muted,
+.lede,
+.app-footer,
+.panel-note,
+.eyebrow {
+  @apply text-[var(--muted)];
+}
+
+.brand-tagline,
+.eyebrow {
+  @apply m-0 text-xs uppercase tracking-[0.14em];
+}
+
+.app-nav {
+  @apply flex gap-2;
+}
+
+.nav-link {
+  @apply rounded-lg px-3 py-2 text-sm font-medium text-slate-600 no-underline transition hover:bg-slate-100;
+}
+
+.nav-link.active {
+  @apply bg-brand-50 text-brand-700;
+}
+
+.app-main {
+  @apply flex-1;
+}
+
+.app-footer {
+  @apply mt-10 border-t border-[var(--line)] pt-4 text-sm;
+}
+
+.hero {
+  @apply mb-8 rounded-3xl border border-[var(--line)] bg-white/90 p-8 shadow-[var(--shadow)];
+}
+
+.hero h1,
+.about-page h1,
+.panel-header h2 {
+  @apply m-0 font-display tracking-tight text-slate-900;
+}
+
+.hero h1 {
+  @apply mt-2 text-4xl sm:text-5xl;
+}
+
+.lede {
+  @apply mt-3 max-w-2xl text-base leading-relaxed;
+}
+
+.hero-actions {
+  @apply mt-6 flex flex-wrap items-center gap-4;
+}
+
+.text-link {
+  @apply text-sm font-medium text-brand-600 no-underline hover:underline;
+}
+
+.stack-row {
+  @apply mt-8 flex flex-wrap gap-3;
+}
+
+.stack-badge {
+  @apply rounded-xl border border-[var(--line)] bg-slate-50 px-3 py-2;
+}
+
+.stack-badge-label {
+  @apply mr-2 text-[11px] uppercase tracking-wide text-slate-500;
+}
+
+.stack-badge-value {
+  @apply text-sm font-semibold text-slate-800;
+}
+
+.panels {
+  @apply grid gap-5 lg:grid-cols-2;
+}
+
+.panel {
+  @apply rounded-2xl border border-[var(--line)] bg-white p-5 shadow-[var(--shadow)];
+}
+
+.panel-header p {
+  @apply mt-1 mb-0 text-sm;
+}
+
+.panel-toolbar {
+  @apply mb-3;
+}
+
+.counter {
+  @apply my-4 flex items-center gap-4;
+}
+
+.counter-value {
+  @apply min-w-12 text-center font-display text-3xl;
+}
+
+.post-list {
+  @apply m-0 list-none space-y-2 p-0;
+}
+
+.post-list li {
+  @apply rounded-lg border border-slate-100 bg-slate-50 px-3 py-2 text-sm;
+}
+
+.feedback-form {
+  @apply mt-3 flex flex-col gap-3;
+}
+
+.feedback-form label {
+  @apply flex flex-col gap-1 text-sm font-medium;
+}
+
+.feedback-form input,
+.feedback-form textarea {
+  @apply rounded-lg border border-slate-300 px-3 py-2 text-sm font-normal outline-none ring-brand-500 focus:ring-2;
+}
+
+.field-error,
+.error-text {
+  @apply text-sm text-[var(--bad)];
+}
+
+.panel-note {
+  @apply mt-4 border-t border-dashed border-slate-200 pt-3 text-xs leading-relaxed;
+}
+
+.ui-button {
+  @apply inline-flex items-center justify-center rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-brand-700 disabled:opacity-50;
+}
+
+.toast-viewport {
+  @apply pointer-events-none fixed bottom-4 right-4 z-50 flex w-80 flex-col gap-2;
+}
+
+.toast {
+  @apply rounded-xl border px-4 py-3 text-sm shadow-lg;
+}
+
+.toast-info {
+  @apply border-slate-200 bg-white text-slate-800;
+}
+
+.toast-success {
+  @apply border-green-200 bg-green-50 text-[var(--ok)];
+}
+
+.toast-error {
+  @apply border-red-200 bg-red-50 text-[var(--bad)];
+}
+
+.about-list {
+  @apply my-4 space-y-2 pl-5;
+}
+<% } else if (styling === 'css-modules') { -%>
+/* Global base — component modules live beside components as *.module.css */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
+
+:root {
+  --bg: #f5f7fb;
+  --surface: #fff;
+  --ink: #0f172a;
+  --muted: #64748b;
+  --line: #e2e8f0;
+  --brand: #1d4ed8;
+  --ok: #15803d;
+  --bad: #b91c1c;
+  --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+  font-family: 'IBM Plex Sans', system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #f8fafc, #eef2ff); color: var(--ink); }
+#root { min-height: 100vh; }
+.app-shell { max-width: 72rem; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding: 1.5rem 1rem; }
+.app-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; background: rgba(255,255,255,0.85); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 2rem; }
+.brand { display: flex; gap: 0.75rem; align-items: center; }
+.brand-mark { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: linear-gradient(135deg, #2563eb, #0f172a); }
+.brand-name { margin: 0; font-family: 'DM Sans', sans-serif; font-weight: 700; }
+.brand-tagline, .muted, .lede, .app-footer, .panel-note, .eyebrow { color: var(--muted); }
+.brand-tagline, .eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
+.app-nav { display: flex; gap: 0.5rem; }
+.nav-link { text-decoration: none; color: #475569; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; }
+.nav-link.active { background: #eff6ff; color: #1d4ed8; }
+.app-main { flex: 1; }
+.app-footer { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem; font-size: 0.875rem; }
+.hero { background: rgba(255,255,255,0.92); border: 1px solid var(--line); border-radius: 1.5rem; padding: 2rem; box-shadow: var(--shadow); margin-bottom: 2rem; }
+.hero h1, .about-page h1, .panel-header h2 { margin: 0; font-family: 'DM Sans', sans-serif; }
+.hero h1 { margin-top: 0.5rem; font-size: clamp(2rem, 4vw, 3rem); }
+.lede { max-width: 40rem; line-height: 1.6; }
+.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }
+.text-link { color: var(--brand); text-decoration: none; font-size: 0.875rem; font-weight: 500; }
+.stack-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
+.stack-badge { border: 1px solid var(--line); background: #f8fafc; border-radius: 0.75rem; padding: 0.5rem 0.75rem; }
+.stack-badge-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-right: 0.5rem; }
+.stack-badge-value { font-size: 0.875rem; font-weight: 600; }
+.panels { display: grid; gap: 1.25rem; }
+@media (min-width: 1024px) { .panels { grid-template-columns: 1fr 1fr; } }
+.panel { background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; box-shadow: var(--shadow); }
+.panel-header p { margin: 0.35rem 0 0; font-size: 0.875rem; }
+.panel-toolbar { margin-bottom: 0.75rem; }
+.counter { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
+.counter-value { min-width: 3rem; text-align: center; font-size: 1.875rem; font-family: 'DM Sans', sans-serif; }
+.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
+.post-list li { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
+.feedback-form { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
+.feedback-form label { display: grid; gap: 0.35rem; font-size: 0.875rem; font-weight: 500; }
+.feedback-form input, .feedback-form textarea { border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font: inherit; }
+.field-error, .error-text { color: var(--bad); font-size: 0.8rem; }
+.panel-note { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed #e2e8f0; font-size: 0.75rem; line-height: 1.5; }
+.ui-button { appearance: none; border: 0; background: var(--brand); color: #fff; border-radius: 0.5rem; padding: 0.55rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
+.ui-button:disabled { opacity: 0.5; }
+.toast-viewport { position: fixed; right: 1rem; bottom: 1rem; width: 20rem; display: grid; gap: 0.5rem; z-index: 50; }
+.toast { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; box-shadow: var(--shadow); background: #fff; border: 1px solid var(--line); }
+.toast-success { background: #f0fdf4; border-color: #bbf7d0; color: var(--ok); }
+.toast-error { background: #fef2f2; border-color: #fecaca; color: var(--bad); }
+.about-list { margin: 1rem 0; padding-left: 1.25rem; }
+<% } else if (styling === 'styled-components') { -%>
+/* Global reset — most styling lives in styled components; keep layout tokens here */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
+
+:root {
+  --bg: #f5f7fb;
+  --ink: #0f172a;
+  --muted: #64748b;
+  --line: #e2e8f0;
+  --brand: #1d4ed8;
+  --ok: #15803d;
+  --bad: #b91c1c;
+  --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: 'IBM Plex Sans', system-ui, sans-serif;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 40%),
+    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+}
+#root { min-height: 100vh; }
+
+.app-shell { max-width: 72rem; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding: 1.5rem 1rem; }
+.app-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; background: rgba(255,255,255,0.85); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 2rem; }
+.brand { display: flex; gap: 0.75rem; align-items: center; }
+.brand-mark { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: linear-gradient(135deg, #2563eb, #0f172a); }
+.brand-name { margin: 0; font-family: 'DM Sans', sans-serif; font-weight: 700; }
+.brand-tagline, .muted, .lede, .app-footer, .panel-note, .eyebrow { color: var(--muted); }
+.brand-tagline, .eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
+.app-nav { display: flex; gap: 0.5rem; }
+.nav-link { text-decoration: none; color: #475569; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; }
+.nav-link.active { background: #eff6ff; color: #1d4ed8; }
+.app-main { flex: 1; }
+.app-footer { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem; font-size: 0.875rem; }
+.hero { background: rgba(255,255,255,0.92); border: 1px solid var(--line); border-radius: 1.5rem; padding: 2rem; box-shadow: var(--shadow); margin-bottom: 2rem; }
+.hero h1, .about-page h1, .panel-header h2 { margin: 0; font-family: 'DM Sans', sans-serif; }
+.hero h1 { margin-top: 0.5rem; font-size: clamp(2rem, 4vw, 3rem); }
+.lede { max-width: 40rem; line-height: 1.6; }
+.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }
+.text-link { color: var(--brand); text-decoration: none; font-size: 0.875rem; font-weight: 500; }
+.stack-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
+.stack-badge { border: 1px solid var(--line); background: #f8fafc; border-radius: 0.75rem; padding: 0.5rem 0.75rem; }
+.stack-badge-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-right: 0.5rem; }
+.stack-badge-value { font-size: 0.875rem; font-weight: 600; }
+.panels { display: grid; gap: 1.25rem; }
+@media (min-width: 1024px) { .panels { grid-template-columns: 1fr 1fr; } }
+.panel { background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; box-shadow: var(--shadow); }
+.panel-header p { margin: 0.35rem 0 0; font-size: 0.875rem; }
+.panel-toolbar { margin-bottom: 0.75rem; }
+.counter { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
+.counter-value { min-width: 3rem; text-align: center; font-size: 1.875rem; font-family: 'DM Sans', sans-serif; }
+.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
+.post-list li { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
+.feedback-form { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
+.feedback-form label { display: grid; gap: 0.35rem; font-size: 0.875rem; font-weight: 500; }
+.feedback-form input, .feedback-form textarea { border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font: inherit; }
+.field-error, .error-text { color: var(--bad); font-size: 0.8rem; }
+.panel-note { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed #e2e8f0; font-size: 0.75rem; line-height: 1.5; }
+.ui-button { appearance: none; border: 0; background: var(--brand); color: #fff; border-radius: 0.5rem; padding: 0.55rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
+.ui-button:disabled { opacity: 0.5; }
+.toast-viewport { position: fixed; right: 1rem; bottom: 1rem; width: 20rem; display: grid; gap: 0.5rem; z-index: 50; }
+.toast { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; box-shadow: var(--shadow); background: #fff; border: 1px solid var(--line); }
+.toast-success { background: #f0fdf4; border-color: #bbf7d0; color: var(--ok); }
+.toast-error { background: #fef2f2; border-color: #fecaca; color: var(--bad); }
+.about-list { margin: 1rem 0; padding-left: 1.25rem; }
+<% } else { -%>
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
+
+$bg: #f5f7fb;
+$ink: #0f172a;
+$muted: #64748b;
+$line: #e2e8f0;
+$brand: #1d4ed8;
+$ok: #15803d;
+$bad: #b91c1c;
+$shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: 'IBM Plex Sans', system-ui, sans-serif;
+  color: $ink;
+  background:
+    radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 40%),
+    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
+}
+
+#root { min-height: 100vh; }
+
+.app-shell {
+  max-width: 72rem;
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1rem;
+}
+
+.app-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid $line;
+  border-radius: 1rem;
+  padding: 1rem 1.25rem;
+  box-shadow: $shadow;
+  margin-bottom: 2rem;
+}
+
+.brand { display: flex; gap: 0.75rem; align-items: center; }
+.brand-mark {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.75rem;
+  background: linear-gradient(135deg, #2563eb, #0f172a);
+}
+.brand-name { margin: 0; font-family: 'DM Sans', sans-serif; font-weight: 700; }
+.brand-tagline, .muted, .lede, .app-footer, .panel-note, .eyebrow { color: $muted; }
+.brand-tagline, .eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
+.app-nav { display: flex; gap: 0.5rem; }
+.nav-link {
+  text-decoration: none;
+  color: #475569;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  &.active { background: #eff6ff; color: $brand; }
+}
+.app-main { flex: 1; }
+.app-footer { margin-top: 2.5rem; border-top: 1px solid $line; padding-top: 1rem; font-size: 0.875rem; }
+.hero {
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid $line;
+  border-radius: 1.5rem;
+  padding: 2rem;
+  box-shadow: $shadow;
+  margin-bottom: 2rem;
+}
+.hero h1, .about-page h1, .panel-header h2 { margin: 0; font-family: 'DM Sans', sans-serif; }
+.hero h1 { margin-top: 0.5rem; font-size: clamp(2rem, 4vw, 3rem); }
+.lede { max-width: 40rem; line-height: 1.6; }
+.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }
+.text-link { color: $brand; text-decoration: none; font-size: 0.875rem; font-weight: 500; }
+.stack-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
+.stack-badge { border: 1px solid $line; background: #f8fafc; border-radius: 0.75rem; padding: 0.5rem 0.75rem; }
+.stack-badge-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-right: 0.5rem; }
+.stack-badge-value { font-size: 0.875rem; font-weight: 600; }
+.panels { display: grid; gap: 1.25rem; }
+@media (min-width: 1024px) { .panels { grid-template-columns: 1fr 1fr; } }
+.panel { background: #fff; border: 1px solid $line; border-radius: 1rem; padding: 1.25rem; box-shadow: $shadow; }
+.panel-header p { margin: 0.35rem 0 0; font-size: 0.875rem; }
+.panel-toolbar { margin-bottom: 0.75rem; }
+.counter { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
+.counter-value { min-width: 3rem; text-align: center; font-size: 1.875rem; font-family: 'DM Sans', sans-serif; }
+.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem;
+  li { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
+}
+.feedback-form { display: grid; gap: 0.75rem; margin-top: 0.75rem;
+  label { display: grid; gap: 0.35rem; font-size: 0.875rem; font-weight: 500; }
+  input, textarea { border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font: inherit; }
+}
+.field-error, .error-text { color: $bad; font-size: 0.8rem; }
+.panel-note { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed #e2e8f0; font-size: 0.75rem; line-height: 1.5; }
+.ui-button {
+  appearance: none; border: 0; background: $brand; color: #fff; border-radius: 0.5rem;
+  padding: 0.55rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer;
+  &:disabled { opacity: 0.5; }
+}
+.toast-viewport { position: fixed; right: 1rem; bottom: 1rem; width: 20rem; display: grid; gap: 0.5rem; z-index: 50; }
+.toast { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; box-shadow: $shadow; background: #fff; border: 1px solid $line; }
+.toast-success { background: #f0fdf4; border-color: #bbf7d0; color: $ok; }
+.toast-error { background: #fef2f2; border-color: #fecaca; color: $bad; }
+.about-list { margin: 1rem 0; padding-left: 1.25rem; }
+<% } -%>

package/templates/src/types/index.ts.ejs

@@ -0,0 +1,7 @@
+<% if (isTypeScript) { -%>
+/** Shared domain types used across features. */
+export type { Post } from '@/services/api';
+<% } else { -%>
+// Shared types live here when you migrate hot paths to TypeScript.
+export {};
+<% } -%>

package/templates/src/utils/format.ts.ejs

@@ -0,0 +1,3 @@
+export function formatCount(value<% if (isTypeScript) { %>: number<% } %>)<% if (isTypeScript) { %>: string<% } %> {
+  return new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 }).format(value);
+}