xertica-ui 2.7.0 → 2.9.6

package/CHANGELOG.md

@@ -11,6 +11,120 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.9.6] — 2026-07-14
+
+### Added
+
+- **CLI `init` pergunta o tipo de projeto antes de tudo** — novo primeiro prompt `O que você deseja criar?` com duas opções: `Full system` (o fluxo completo existente, inalterado: auth, sidebar, páginas, i18n) e `Web page` (um scaffold mínimo com apenas a landing page de marketing). Escolhendo `Web page`, o fluxo se reduz a 3 prompts — idiomas (multiselect), tema (select) e instalação de dependências (confirm) — e o projeto já sai pronto, sem nenhuma outra configuração.
+- **Novo scaffold mínimo para "Web page"** (`initPageProject` em `bin/cli.ts`) — gera um `App.tsx` que renderiza `LandingPage` (via novo `generateLandingAppTsx` em `bin/language-config.ts`) diretamente dentro de `XerticaProvider`, sem `Router`, `QueryClientProvider` ou `AuthProvider`. Não cria `AuthContext.tsx`, `AuthGuard.tsx`, `AppLayout.tsx`, `src/shared/` nem `src/features/` — apenas `src/app/App.tsx`, `src/pages/LandingPage.tsx`, i18n/locales e tokens de tema. Também omite `CLAUDE.md`/`guidelines/` (documentam a arquitetura FSD de auth, inexistente neste scaffold) e `.env.example` (chaves usadas só pelo assistente/mapa).
+- **`.xertica.json` ganha o campo `projectType: 'page' | 'system'`** — projetos escaffoldados antes desta versão não têm o campo e são tratados como `'system'` em todos os pontos que o leem, preservando compatibilidade.
+
+### Changed
+
+- **CLI `update` adaptado para os dois tipos de projeto** — em projetos `page`, o menu principal omite a opção `Assistant` (sem conceito de assistente nesse scaffold); as opções `Languages` e `Dark Mode` regeneram `App.tsx` via `generateLandingAppTsx` em vez de `generateAppTsx`; e `Project files` mostra uma lista reduzida de 2 itens (`App shell + landing page`, `Root config files`) em vez dos 5 itens do fluxo completo, evitando tentar atualizar `AppLayout.tsx`/`AuthGuard.tsx`/`src/shared/`/`src/features/`, que não existem nesse tipo de projeto.
+- **`generateAppTsx` refatorado** — a lógica de montagem da prop `availableLanguages` foi extraída para um helper interno compartilhado (`buildAvailableLanguagesProp`), reaproveitado agora também pelo novo `generateLandingAppTsx`.
+
+---
+
+## [2.9.5] — 2026-07-14
+
+### Added
+
+- **Novo isotipo `IsotypeTwist`** (`components/brand/isotype`) — quinta marca da série "isotipos": duas formas angulares sobrepostas, seguindo o mesmo mecanismo do `IsotypeFrames` (ambas 100% opacas, interseção resolvida via `mix-blend-mode: multiply` na forma da frente, com `isolate` na raiz), com duas variantes de cor registradas em `ISOTYPE_TWIST_VARIANTS`: `'magenta-blue'` (rosa + azul) e `'blue-red'` (azul + vermelho). Substitui o `IsotypeDiagonal` no painel esquerdo do `AuthPageShell` (`leftPanel="isotype"`, usado na página de login), agora renderizado com a variante `'magenta-blue'`.
+- **`SectionHeading` ganha uma barra de destaque opcional** — nova prop `accentColor` (mesma convenção `BlockColor`/`colorTokens` local dos demais blocos) renderiza uma pequena barra colorida sob o título, aproximando o padrão da referência de mockup. É opcional: sem `accentColor`, o título continua exatamente como antes.
+
+### Changed
+
+- **`SectionHeading` simplificado** — removidos o numeral fantasma (`index`) e o rótulo eyebrow, mantendo apenas o título (com barra de destaque e descrição opcionais), conforme a referência de mockup. As props `index`/`eyebrow` saem da API do componente; as chaves de tradução `ecosystem.eyebrow`, `useCases.eyebrow` e `methodology.eyebrow` (agora não usadas) foram removidas dos 6 arquivos `landing.json`. Aplicado às 3 seções que já usam `SectionHeading` na `LandingPage` (Ecossistema, Casos de uso, Metodologia).
+- **`ServiceCardGrid`/`ServiceCard` com `icon` opcional** — o chip de ícone só renderiza quando `icon` é informado, permitindo cards sem ícone (título, descrição e checklist/bullets/CTA), conforme a referência de mockup. Aplicado à seção "Casos de uso" da `LandingPage`, que passa a renderizar os 3 cards sem ícone.
+
+- **`AuthPageShell` (`leftPanel="isotype"`) com fundos invertidos** — o painel do isotipo na página de login passa a usar `bg-muted` (mais escuro) e o painel do formulário à direita passa a usar `bg-card` (Marfim, `#FFFEF8` no tema xertica, mais claro), invertendo a relação de claridade anterior entre os dois lados.
+- **`ForgotPasswordPage`, `ResetPasswordPage` e `VerifyEmailPage` trocam a foto de fundo pelo painel de isotipo** — as 3 telas usavam `AuthPageShell` com `imageSrc`/foto de herói e um overlay de gradiente que, no tema xertica (token de gradiente plano em `#1E1E1E`), ficava com o painel esquerdo escuro. Passam a usar `leftPanel="isotype"`, a mesma solução (agora clara) já aplicada à `LoginPage`, unificando a aparência das 4 telas de autenticação. Espelhado em `templates/src/features/auth/ui/{ForgotPassword,ResetPassword,VerifyEmail}Content.tsx`.
+- **`SectionHeading` perde a linha divisória superior** — removida a borda `border-t`/`pt-6` que antecedia o título (Ecossistema, Casos de uso, Metodologia na `LandingPage`); o cabeçalho agora fica sem regra visual antes do título.
+- **`CTASection` volta a ter fundo escuro** — troca o `bg-card` plano por `bg-sidebar`/`border-sidebar-border` (mesma superfície escura já usada na seção de metodologia desta página) e o texto passa a `text-sidebar-foreground`/`text-sidebar-foreground/70`, sem gradiente e sem cor hardcoded. Os botões continuam com as variantes naturais (`default`/`outline`), que já contrastam corretamente sobre `bg-sidebar`.
+- **Seção de compliance/stats da `LandingPage` reorganizada** — `ComplianceBadgeRow` (badges) e `StatBand` (números) agora ficam contidos em um único card (`border`, `bg-card`, `rounded-2xl`) com um divisor entre os dois grupos, em vez de flutuarem soltos direto sobre o fundo da página. `ComplianceBadgeRow` passa de um `flex flex-wrap` com gaps largos para um `grid grid-cols-2 sm:grid-cols-4`, alinhando os badges em colunas; o chip de ícone usa `bg-background` para manter contraste dentro do novo card.
+- **`IsotypeFrames` restrito a duas variantes de cor** — `IsotypeFrameVariantId` passa de 6 para apenas `'blue-magenta'` e `'blue-yellow'` (azul+rosa e azul+amarelo); `'green-red'`, `'green-blue'`, `'magenta-yellow'` e `'magenta-purple'` saem do registro. Único uso afetado fora do próprio componente: a seção "Onboarding" da `LandingPage`, que usava `magenta-yellow` e passa a usar `blue-yellow`. No par `blue-yellow`, o azul é o quadro de trás (posicionado mais para cima) e o amarelo o quadro da frente (posicionado mais para baixo).
+
+### Removed
+
+- **Removidas as seções de depoimento e de "pilares" da `LandingPage`** — o card de citação com `StatBand` (componentes/temas/downloads) e o grid de 4 colunas com ícones (tokens de tema, componentes acessíveis, blocos prontos, CLI de scaffolding) saem da página. As chaves de tradução `testimonial`, `pillars` e `stats.components`/`stats.themes`/`stats.downloads` (agora não usadas) foram removidas dos 6 arquivos `landing.json`.
+
+---
+
+## [2.9.4] — 2026-07-13
+
+### Added
+
+- **Novo bloco `HowItWorksSteps`** (`xertica-ui/blocks` → `marketing`) — variante horizontal do `EvidenceTimeline`: mesma badge numerada/colorida (`colorTokens` local, sem linha conectora), em grid responsivo (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`) em vez de lista vertical com fio. Substitui o `EvidenceTimeline` na seção "Metodologia" da `LandingPage` (mesmos 4 itens/cópias); o `EvidenceTimeline` continua exportado e funcional para quem preferir o layout vertical.
+- **Novo bloco `TopAccentCards`** (`xertica-ui/blocks` → `marketing`) — par de cards com destaque de cor na borda superior (`border-t-4`), título, corpo e lista opcional de bullets simples, sem ícone/CTA. Segue a mesma convenção local de `BlockColor`/`colorTokens` dos demais blocos de marketing. Nova seção "framing" (propósito + problema) inserida na `LandingPage` logo após o `Hero`.
+
+### Changed
+
+- **`CTASection` perde o fundo em gradiente** — passa a usar um fundo plano `bg-card` com borda (`border border-border`), título em `text-foreground` e descrição em `text-muted-foreground`. Os botões `cta`/`secondaryCta` deixam de ter cor forçada (branco sobre gradiente) e usam as variantes naturais `default`/`outline`, que já contrastam corretamente sobre `bg-card`. Nenhum outro consumidor deste bloco existe fora da `LandingPage`.
+- **`PillBadge` vira um pill de verdade** — `rounded-[var(--radius)]` (6px) dá lugar a `rounded-full`, alinhando o componente ao próprio nome. Único consumidor é o eyebrow do `Hero`.
+- **Recolorida a seção "Metodologia" da `LandingPage`** — os 4 passos passam de azul/celeste/amarelo/coral para coral/celeste/azul/laranja (`chart-4`/`chart-2`/`chart-1`/`warning`), aproximando a sequência de cores da referência de mockup (vermelho/verde-azulado/roxo/laranja); como o tema `xertica` não tem roxo, `chart-1` (azul) substitui esse passo — é um desvio conhecido da referência.
+
+---
+
+## [2.9.3] — 2026-07-13
+
+### Changed
+
+- **Padronização das variantes de botão na landing page** — o botão de "iniciar sessão" (`MarketingNavbar`, desktop e mobile) e o `secondaryCta` do `Hero` passam a usar a variante `secondary` (preto). O `primaryCta` do `Hero` ("Começar agora") e o `cta` do `CTASection` continuam `default`/primary, reservado para as ações principais de conversão. A variante `outline` continua reservada para os cards (`ServiceCardGrid`). Mudança feita direto nos blocos, sem novas props — nenhum outro consumidor desses componentes existe fora da `LandingPage`.
+
+---
+
+## [2.9.2] — 2026-07-13
+
+### Changed
+
+- **Tema `xertica` deixa de ter gradientes** — `gradientStart`/`gradientEnd` (claro e escuro) passam a apontar todos para o mesmo Negro Xertica (`#1E1E1E`), então `--gradient-diagonal` resolve para um preenchimento sólido nesse tema. Afeta todo consumidor do token (banner do `CTASection` na `LandingPage`, `AuthPageShell`, etc.) sem exigir mudança em nenhum componente — os demais temas mantêm seus gradientes normalmente.
+
+---
+
+## [2.9.1] — 2026-07-13
+
+### Changed
+
+- **`StatBand` ganha alinhamento numérico e rótulo em estilo legenda** — o valor numérico agora usa `tabular-nums` (mesma técnica já usada no numeral fantasma do `SectionHeading`), e o rótulo passa de texto simples (`text-sm`) para o padrão de legenda já usado em `ServiceCardGrid` (`text-xs font-semibold uppercase tracking-wide`). Ritmo de grade mais generoso (`gap-y-8`→`gap-y-10`, `pl-8`→`pl-10` nos divisores).
+- **Espaçamento título→texto corrido padronizado em `SectionHeading`, `FeatureRow`, `CTASection` e `EvidenceTimeline`** — na referência de Swiss Design, títulos e o texto corrido que os segue precisam de um espaço deliberado entre si. O gap `mt-3`/`mt-4` (12–16px) usado nos blocos de marketing da `LandingPage` passa para `mt-6` (24px) nos três primeiros; `EvidenceTimeline`, por ser um relacionamento secundário mais denso dentro de uma lista, recebe um ajuste proporcional menor (`mt-1`→`mt-2`).
+
+---
+
+## [2.9.0] — 2026-07-13
+
+### Added
+
+- **`xertica-ui/blocks` ganha um novo namespace `marketing`** — `Hero`, `FeatureRow`, `CTASection`, `ComplianceBadgeRow`, `EvidenceTimeline`, `LogoCloud`, `MarketingFooter`, `MarketingNavbar`, `PillBadge`, `ServiceCardGrid` e `StatBand`, compondo a nova `LandingPage` (`xertica-ui/pages`, também registrada em `/landing` no template do CLI). Todos os visuais são placeholders orientados a tokens (isotipos da marca, SVGs inline), sem dependência de imagens externas.
+- **Nova marca `IsotypeDiagonal`** — quarta variação da família `isotype` (`xertica-ui/brand`), com corte diagonal fixo formando pontas triangulares nos encontros azul/verde e magenta/vermelho e na hipotenusa do amarelo, as três sobre a mesma diagonal do quadrado. `AuthPageShell` ganha a prop `leftPanel="isotype"` (painel de marca sobre `bg-sidebar`, alternativa ao par imagem+gradiente) e `gradientClassName` (override do gradiente por página); `LoginPage` e o `LoginContent` do template do CLI passam a usar `leftPanel="isotype"`, substituindo a foto de estoque (Unsplash) que usavam antes.
+- **`Button` variant `outline` ganha um token de contorno dedicado** — `--outline-border` / utilitário `border-outline-stroke` — com o mesmo mecanismo opcional (`BrandColors.outlineBorderColor`) já usado por `inputBorderColor`. Os 9 temas pré-existentes ficam pixel-idênticos (fallback para `--border`); o tema `xertica` passa a usar o mesmo Negro Xertica do contorno dos inputs.
+
+### Changed
+
+- **`Isotype` (grid plano) e `IsotypeMini` saem de rotação** nas páginas do próprio design system (Hero da `LandingPage`, cabeçalho da `HomeContent`) — continuam exportados e totalmente funcionais, apenas comentados no ponto de uso para fácil reativação futura. Só `IsotypeDiagonal` e `IsotypeFrames` seguem em uso ativo.
+
+### Fixed
+
+- **`Card` `variant="white"` podia renderizar texto ilegível no dark mode** — `text-card-foreground` (tema-reativo) era aplicado incondicionalmente, então um card forçado a branco herdava a cor de texto quase-branca do tema no dark mode. Agora `variant="white"` sempre pareia com `text-neutral-900` fixo, independente do tema/modo.
+
+---
+
+## [2.8.0] — 2026-07-09
+
+### Added
+
+- **Novo tema `xertica`** — a nova identidade visual da Xertica (papel quente `#FFFEF8`, tintas vivas e o preto da marca como acento geral), somando-se aos temas já existentes em `contexts/theme-data.ts` → `colorThemes`. Botões neste tema ganham radius pill (`buttonRadius: '9999px'`), stroke em todas as variantes preenchidas (`buttonStrokeWidth`/`buttonStrokeColor(Dark)`), botão primário amarelo (`#FAF338`) com contorno e texto pretos, e botão secundário na cor preta da marca (`buttonSecondaryBg(Dark)`/`buttonSecondaryForeground(Dark)`). O amarelo é **intencionalmente restrito** ao botão `default` e ao estado ligado do `Switch` — o acento geral do tema (`--primary`, usado por links, radio buttons, foco, logo, etc.) é Negro Xertica `#1E1E1E` (Crema `#F2EDD8` no dark mode), evitado de virar amarelo sem contraste em elementos que não são botão/switch. O tema `xertica-original` (agora exibido como **"Xertica Classic"**) permanece o padrão — o `id` não foi alterado, então projetos scaffolded e chamadas `setTheme('xertica-original')` continuam funcionando sem mudanças.
+- **`BrandColors` ganha campos opcionais de forma/estrutura de botão** — `backgroundLight`, `buttonRadius`, `buttonStrokeWidth`, `buttonStrokeColor`/`buttonStrokeColorDark`, `buttonSecondaryBg`/`buttonSecondaryBgDark`, `buttonSecondaryForeground`/`buttonSecondaryForegroundDark`, e `buttonPrimaryBg`/`buttonPrimaryBgDark`, `buttonPrimaryForeground`/`buttonPrimaryForegroundDark` (acento do botão `default` e do `Switch`, com fallback para `var(--primary)`/`var(--primary-foreground)`). Todos são opcionais e têm fallback idêntico ao comportamento anterior, então os 9 temas pré-existentes ficam pixel-idênticos. Removido o campo morto `radius?: string` (nunca lido por `applyColors()`).
+- **`components/ui/button/button.tsx`** — as variantes preenchidas (`default`, `destructive`, `secondary`, `success`, `info`, `warning`) agora aceitam um stroke via `--button-stroke-width`/`--button-stroke-color`; a variante `default` passou a usar `--button-primary-bg`/`--button-primary-foreground` (em vez de `bg-primary`/`text-primary-foreground` direto) para permitir um acento de botão distinto do `--primary` semântico geral; a variante `secondary` passou a usar os tokens `--button-secondary-bg`/`--button-secondary-foreground` (com fallback para `--secondary`/`--secondary-foreground`) em vez do modificador de opacidade `/80`, que não funcionava sobre cores vindas de `var()`.
+- **`components/ui/switch/switch.tsx`** — o estado marcado (`checked`) passou a usar `--button-primary-bg` em vez de `bg-primary`, para acompanhar o mesmo acento do botão `default`.
+
+### Changed
+
+- `bin/generate-tokens.ts` e os `tokens.css` estáticos (`styles/xertica/`, `templates/src/styles/xertica/`) passam a emitir `--button-stroke-width`, `--button-stroke-color`, `--button-secondary-bg`, `--button-secondary-foreground`, `--button-primary-bg`, `--button-primary-foreground`, e `--radius-button`/`--background` (light) respeitam os novos campos do tema quando definidos.
+- `.storybook/preview.tsx` — toolbar "Brand Color" renomeia `xertica-original` para "Xertica Classic" e adiciona a entrada "Xertica" (`xertica`).
+
+---
+
 ## [2.7.0] — 2026-07-07
 
 ### Added

package/README.md

@@ -2,7 +2,7 @@
 
 > **Enterprise-grade React design system** built on Tailwind CSS v4, Radix UI, and Lucide Icons — with a robust AI-first documentation layer for precise LLM-driven composition and autonomous agent interaction.
 
-[![npm version](https://img.shields.io/badge/npm-2.7.0-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.9.6-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---
@@ -353,11 +353,12 @@ Xertica UI uses semantic CSS tokens. **Never use raw colors or generic Tailwind
 
 ### Color Themes
 
-Nine built-in themes — each sets the primary color, sidebar, chart palette, and dark-mode surface hue. Select at `init` time or change later with `npx xertica-ui update → Theme only`.
+Ten built-in themes — each sets the primary color, sidebar, chart palette, and dark-mode surface hue. Select at `init` time or change later with `npx xertica-ui update → Theme only`.
 
 | Theme | ID | Primary | Sidebar | Dark bg |
 |---|---|---|---|---|
-| ![#2C275B](https://img.shields.io/badge/-%232C275B-2C275B?style=flat-square) Xertica | `xertica-original` | `#2C275B` | `#2C275B` | `#05050d` |
+| ![#2C275B](https://img.shields.io/badge/-%232C275B-2C275B?style=flat-square) Xertica Classic | `xertica-original` | `#2C275B` | `#2C275B` | `#05050d` |
+| ![#1E1E1E](https://img.shields.io/badge/-%231E1E1E-1E1E1E?style=flat-square) Xertica | `xertica` | `#1E1E1E` | `#1E1E1E` | `#141311` |
 | ![#18181B](https://img.shields.io/badge/-%2318181B-18181B?style=flat-square) Zinc | `zinc` | `#18181B` | `#18181B` | `#05050d` |
 | ![#0F172A](https://img.shields.io/badge/-%230F172A-0F172A?style=flat-square) Slate | `slate` | `#0F172A` | `#0F172A` | `#05050d` |
 | ![#2563EB](https://img.shields.io/badge/-%232563EB-2563EB?style=flat-square) Blue | `blue` | `#2563EB` | `#1E3A8A` | `#03050f` |
@@ -369,6 +370,8 @@ Nine built-in themes — each sets the primary color, sidebar, chart palette, an
 
 > Each badge renders the **exact primary color** of that theme as a filled swatch. Generated by the CLI and stored in `src/styles/xertica/tokens.css`.
 
+**"Xertica" theme — serigrafia identity:** pill-shaped buttons (`--radius-button: 9999px`) and a visible stroke on every filled button variant. The general brand accent (`--primary`, used by links, focus rings, radio buttons, the logo, etc.) is Negro Xertica (`#1E1E1E`, `#F2EDD8` in dark mode) for reliable contrast everywhere. Yellow (`#FAF338`) is intentionally scoped to just two controls — the `Button` `default` variant and `Switch`'s checked state — via the `--button-primary-bg`/`--button-primary-foreground` tokens, both with black text/outline. The `secondary` button is black (`#1E1E1E`). The page background uses a warm off-white paper tone (`#FFFEF8`) while cards stay pure white. The full accent palette (and the "serigrafia" color-intersection combinations meant for print/marketing pieces — e.g. Celeste `#1899AF` + Magenta `#C45BAA` → Violeta `#5A4A96`) is documented in `contexts/theme-data.ts`.
+
 **CLI — Select at project creation:**
 
 ```bash
@@ -381,7 +384,7 @@ npx xertica-ui@latest init my-app
 ```bash
 npx xertica-ui update
 # → choose "Theme only"
-# → select any of the 9 themes
+# → select any of the 10 themes
 # → src/styles/xertica/tokens.css is fully regenerated
 # → .xertica.json is updated with the new themeId for future updates
 ```
@@ -396,6 +399,7 @@ npx xertica-ui update
 <XerticaProvider defaultColorTheme="violet">
 <XerticaProvider defaultColorTheme="amber">
 <XerticaProvider defaultColorTheme="orange">
+<XerticaProvider defaultColorTheme="xertica"> {/* new serigrafia identity */}
 <XerticaProvider defaultColorTheme="xertica-original"> {/* default */}
 
 // Custom hex — sets primary only; dark surfaces use the neutral default
@@ -414,7 +418,8 @@ npx xertica-ui update
 | `--card`, `--popover`| ✅ Dark mode only (hue-tinted) |
 | `--muted`, `--accent`| ✅ Dark mode only (hue-tinted) |
 | `--border`, `--input`| ✅ Dark mode only (hue-tinted) |
-| Light mode surfaces  | ❌ Always white/zinc (unchanged) |
+| Light mode surfaces  | ❌ Always white/zinc, unless the theme sets `backgroundLight` (only `xertica` does) |
+| `--radius-button`, button stroke, `secondary` button colors | ✅ Only when the theme defines `buttonRadius`/`buttonStroke*`/`buttonSecondary*` (only `xertica` does) |
 
 ### Mobile Content Padding
 
@@ -467,13 +472,16 @@ See [`docs/i18n.md`](./docs/i18n.md) for setup, runtime configuration, and addin
 
 ## 📜 Scripts
 
-| Command              | Description                            |
-| -------------------- | -------------------------------------- |
-| `npm run dev`        | Start development server               |
-| `npm run build`      | Production bundle                      |
-| `npm run storybook`  | Launch component library documentation |
-| `npm run test`       | Run unit tests via Vitest              |
-| `npm run type-check` | TypeScript validation                  |
+| Command               | Description                                                                                                                                                     |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `npm run dev`         | Runs the `templates/` scaffold with live Design System source (via monorepo alias) — the same app a `npx xertica-ui init` consumer gets. Use this to test Design System changes against real pages. |
+| `npm run dev:pages`   | Runs the root harness (`App.tsx`) for the standalone `xertica-ui/pages` showcase subpath.                                                                       |
+| `npm run build`       | Production bundle                                                                                                                                                |
+| `npm run storybook`   | Launch component library documentation                                                                                                                          |
+| `npm run test`        | Run unit tests via Vitest                                                                                                                                       |
+| `npm run type-check`  | TypeScript validation                                                                                                                                            |
+
+> **Note**: `templates/` has its own dependencies — run `npm install` inside `templates/` once before the first `npm run dev`.
 
 ---