Release: Seven DS frontend migration (develop → master)

.npmrc

@@ -1,7 +1,7 @@
 @etus:registry=https://registry.npmjs.org/
 //registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}
-# Resolve internal workspace deps (e.g. create-bhono -> @etus/bhono) to the local
-# package instead of the registry. Without this, a release bump points the dep at
-# a version that isn't published yet, so `pnpm install` can't resolve it and every
-# release stalls on the lockfile (ERR_PNPM_NO_MATCHING_VERSION / OUTDATED_LOCKFILE).
-link-workspace-packages=true
+# Internal monorepo deps (create-bhono -> @etus/bhono) use the `workspace:`
+# protocol (see packages/create-bhono/package.json) so they always resolve to the
+# local package, never the registry — @etus/bhono is unpublished. This replaces the
+# deprecated `link-workspace-packages`, which pnpm 10 ignores: after a release bump
+# any re-resolution 404'd on the registry instead of linking the workspace package.

CLAUDE.md

@@ -222,6 +222,16 @@ Defined in `config/wrangler.json`:
 2. Use `createFileRoute` from TanStack Router
 3. Access auth via `useAuth()` hook
 
+### Frontend UI — Design System (Seven)
+
+Every UI element comes from **Seven** (`@etus/seven-react`, which re-exports `@etus/ui` + `@etus/tokens`). Do not build controls with raw HTML or local UI components.
+
+- **Components:** `import { Button, TextInput, Card, Dialog, Switch, Checkbox, Divider, SkeletonLoader, Toaster, Sidebar } from '@etus/seven-react'`. Names are not shadcn's (e.g. `TextInput` not `Input`; `Divider` not `Separator`) — verify exports at **runtime** (`Object.keys(await import('@etus/ui'))`), not from the `.d.ts`.
+- **Tokens:** `@etus/tokens` is the source for color/radius/spacing/typography (via `@import "@etus/seven-react/styles.css"` in `src/client/index.css`). The local `@theme` only keeps what Seven does not provide.
+- **Brand (`DESIGN.md` in the Seven repo):** Inter + JetBrains Mono; only `mint`/`lime` are brand (fuchsia is charts-only); no decoration; sentence-case pt-BR; Tailwind v4 type hints (`bg-[color:var(--token)]`).
+- **Guard-rail:** ESLint bans raw `<button>/<input>/<select>/<textarea>` in routes (`config/eslint.config.js`). Icons via `lucide-react`.
+- **Validation:** compare each screen against the published showcase at `seven.etus.io` (not only the code). Reference source: `~/Dropbox/aa-projects/Github/seven` (`apps/showcase`, `DESIGN.md`).
+
 ### Database Changes
 
 1. Update `schema.sql`

config/eslint.config.js

@@ -34,6 +34,7 @@ export default tseslint.config(
       "**/.claude/**",
       "**/.agents/**",
       "**/.codex/**",
+      "**/.remember/**",
       "**/e2e/**",
       "**/packages/**",
       "**/.pnpm*",
@@ -311,6 +312,40 @@ export default tseslint.config(
     },
   },
 
+  // ==============================================
+  // DS GUARD-RAIL: app screens use Seven controls, not raw HTML
+  // (every interactive control must come from @etus/seven-react)
+  // ==============================================
+  {
+    files: ["src/client/routes/**/*.{ts,tsx}", "src/client/components/**/*.{ts,tsx}"],
+    ignores: ["src/client/components/icons.tsx"],
+    rules: {
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector: "JSXOpeningElement[name.name='button']",
+          message:
+            "Use Button from '@etus/seven-react' instead of a raw <button>.",
+        },
+        {
+          selector: "JSXOpeningElement[name.name='input']",
+          message:
+            "Use TextInput/Checkbox/Switch from '@etus/seven-react' instead of a raw <input>.",
+        },
+        {
+          selector: "JSXOpeningElement[name.name='select']",
+          message:
+            "Use Select/NativeSelect from '@etus/seven-react' instead of a raw <select>.",
+        },
+        {
+          selector: "JSXOpeningElement[name.name='textarea']",
+          message:
+            "Use Textarea from '@etus/seven-react' instead of a raw <textarea>.",
+        },
+      ],
+    },
+  },
+
   // === TEST FILES - DISABLE TYPE-CHECKED RULES ===
   {
     files: [

docs/ets/state/coverage-matrix.yaml

@@ -0,0 +1,58 @@
+# Coverage matrix — auditoria de fidelidade ao Seven DS (só-código)
+# Gerado: 2026-06-24 | ref: @etus/ui@0.4.0-beta.4 / @etus/tokens@0.4.0-beta.3
+# Reports por tela: docs/ets/state/reports/screens/<tela>.md
+
+meta:
+  screens: 11
+  avg_fidelity: 0.70
+  user_actions: { total: 93, wired: 53, unwired: 40 }   # ~57% das ações estão ligadas
+  off_system_styles_total: 22                            # dominado por cores de status + decoração
+
+# Ordenado por fidelidade (desc)
+screens:
+  shell:        { fidelity: 0.84, off_system: 0, actions: "6/9",  note: "mais fiel; 100% token-limpo; Sidebar+Topbar+Inset corretos" }
+  workspaces:   { fidelity: 0.82, off_system: 0, actions: "0/5",  note: "token-limpo; 0 ações ligadas (parte read-only by-design)" }
+  team:         { fidelity: 0.76, off_system: 0, actions: "9/13", note: "token-limpo; menu ⋯ morto (mudar-papel/remover)" }
+  invite:       { fidelity: 0.72, off_system: 4, actions: "7/8",  note: "família emerald hardcoded" }
+  settings:     { fidelity: 0.72, off_system: 1, actions: "5/10", note: "text-emerald-600 (×2)" }
+  integrations: { fidelity: 0.71, off_system: 7, actions: "10/12", note: "emerald/amber; 2 botões mortos; Configure mislabeled" }
+  dashboard:    { fidelity: 0.68, off_system: 1, actions: "0/8",  note: "border-dashed; UI 100% estática" }
+  account:      { fidelity: 0.64, off_system: 5, actions: "5/12", note: "amber (2FA) + border-dashed; 6 botões mortos" }
+  login:        { fidelity: 0.62, off_system: 1, actions: "2/5",  note: "w-[350px]; Terms/Privacy/Contact href=# mortos" }
+  not_found:    { fidelity: 0.62, off_system: 3, actions: "4/5",  note: "text-[12rem] + blobs decorativos h-[500px]" }
+  landing:      { fidelity: 0.52, off_system: 5, actions: "5/6",  note: "HTML marketing cru; backdrop-blur/blobs; ignora Navbar/Card/FeatureItem" }
+
+# Padrões que se repetem entre telas (alvos de correção sistêmica)
+systemic_patterns:
+  status_colors_hardcoded:
+    screens: [invite, integrations, account, settings]
+    issue: "família emerald/amber crua em vez de --success/--warning / StatusIndicator / Badge color"
+    violates: "DESIGN.md — só mint/lime são brand; status deve vir de token"
+    severity: high
+  dead_unwired_actions:
+    screens: [dashboard, workspaces, account, settings, login, team, integrations]
+    issue: "botões/links que descrevem ações mas não disparam (onClick/onSubmit ausente, ou href='#')"
+    total_unwired: 40
+    severity: high
+  decorative_off_system:
+    screens: [landing, not_found]
+    issue: "backdrop-blur, blobs h-[500px] w-[500px], text-[12rem] — decoração arbitrária"
+    violates: "DESIGN.md — no decoration"
+    severity: medium
+  raw_html_bypass:
+    screens: [landing]
+    issue: "nav/hero/cards/footer em HTML cru ignoram Navbar/Card/FeatureItem/Heading/Text"
+    severity: medium
+  handrolled_empty_state:
+    screens: [dashboard, account]
+    issue: "border-dashed à mão em vez de EmptyState (workspaces já usa a base do Seven Empty)"
+    severity: low
+
+rankings:
+  most_token_clean: [shell, team, workspaces]    # 0 off-system
+  lowest_fidelity:  [landing, login, not_found]
+  most_static:      [dashboard, workspaces]       # menos ações ligadas
+
+# Pendências de DS upstream (Seven) que afetam o boilerplate
+blocked_on_seven:
+  - sidebar-borderless: "override em index.css aguarda affordance borderless no single-mode"

docs/ets/state/reports/_summary.md

@@ -0,0 +1,64 @@
+# Auditoria Seven DS — Sumário executivo (11 telas)
+
+> **Escopo:** todas as telas de `src/client/routes` · **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` · **Método:** só-código · **Data:** 2026-06-24
+> **Reports por tela:** `docs/ets/state/reports/screens/` · **Índice:** `docs/ets/state/coverage-matrix.yaml`
+
+## Números gerais
+- **Fidelidade média: ~70%**
+- **Ações do usuário ligadas: 53 de 93 (~57%)** — 40 ações descritas na UI **não disparam nada**
+- **Estilos off-system: ~22** — concentrados em **cores de status** e **decoração**
+- **3 telas 100% token-limpas** (shell, team, workspaces); **0 cores hardcoded** em 7 das 11
+
+## Ranking de fidelidade
+| # | Tela | Fid. | Off-sys | Ações | Destaque |
+|---|---|---|---|---|---|
+| 1 | shell | 84% | 0 | 6/9 | mais fiel; chrome correto |
+| 2 | workspaces | 82% | 0 | 0/5 | token-limpo, mas estático |
+| 3 | team | 76% | 0 | 9/13 | token-limpo; menu ⋯ morto |
+| 4 | invite | 72% | 4 | 7/8 | emerald hardcoded |
+| 5 | settings | 72% | 1 | 5/10 | emerald ×2 |
+| 6 | integrations | 71% | 7 | 10/12 | emerald/amber; botões mortos |
+| 7 | dashboard | 68% | 1 | 0/8 | UI 100% estática |
+| 8 | account | 64% | 5 | 5/12 | amber + 6 botões mortos |
+| 9 | login | 62% | 1 | 2/5 | Terms/Privacy mortos |
+| 10 | not-found | 62% | 3 | 4/5 | número 404 + blobs |
+| 11 | landing | 52% | 5 | 5/6 | HTML marketing cru |
+
+---
+
+## Os 4 padrões sistêmicos (corrigir 1× resolve várias telas)
+
+### 🔴 P1 — Cores de status hardcoded (`emerald`/`amber`)
+**Telas:** invite, integrations, account, settings (4).
+A família `emerald`/`amber` é cravada (`bg-emerald-100`, `text-amber-600`, `dark:*-900/30`…) em vez de **`--success`/`--warning`** ou **`StatusIndicator`/`Badge color`**. **Viola o DESIGN.md** (só mint/lime são brand). É o maior bloco de off-system.
+→ **Fix:** substituir por tokens de status / `StatusIndicator`. Resolve ~16 dos ~22 off-system.
+
+### 🔴 P2 — Ações "mortas" (UI que descreve, mas não faz)
+**Telas:** dashboard (0/8), workspaces (0/5), account (5/12, 6 mortos), settings (5/10), login (2/5), team (menu ⋯), integrations (2 mortos).
+Botões/links que parecem acionáveis mas **não têm `onClick`/`onSubmit`** ou usam `href="#"`. **40 ações não-ligadas no total.**
+→ **Fix:** ligar handlers reais ou remover o controle. Muitos casos são mock/placeholder (também toca Regra 6 — valores/dados hardcoded).
+
+### 🟡 P3 — Decoração arbitrária (proibida pelo DESIGN.md)
+**Telas:** landing (`backdrop-blur`, `bg-background/95`), not-found (`text-[12rem]`, blobs `h-[500px] w-[500px]`).
+→ **Fix:** remover efeitos decorativos; usar componentes/tokens.
+
+### 🟡 P4 — HTML cru ignorando a camada de componentes
+**Tela:** landing (52%, a mais baixa).
+Nav, hero, feature cards, footer são marcação de marketing crua que ignora **`Navbar`/`Card`/`FeatureItem`/`FeaturedIcon`/`Heading`/`Text`**.
+→ **Fix:** reescrever com componentes Seven (maior esforço, mas é a tela mais distante do DS).
+
+---
+
+## Backlog priorizado
+| Prioridade | Ação | Telas | Impacto |
+|---|---|---|---|
+| 🔴 1 | Trocar cores de status → `--success`/`--warning`/`StatusIndicator` | invite, integrations, account, settings | mata ~16 off-system + conformidade DESIGN.md |
+| 🔴 2 | Ligar ou remover ações mortas | 7 telas (40 ações) | UX real; menos UI enganosa |
+| 🟡 3 | Remover decoração arbitrária | landing, not-found | conformidade DESIGN.md |
+| 🟡 4 | Migrar landing p/ componentes Seven | landing | +30pts de fidelidade na pior tela |
+| 🔵 5 | `EmptyState` nos empties à mão | dashboard, account | tira `border-dashed` |
+| 🔵 6 | Tipografia `<h1>/<p>` → `Heading`/`Text` | quase todas | drift, baixo risco |
+
+## Notas
+- **Espaçamento/radius NÃO são problema:** a escala do Seven espelha a do Tailwind, então `gap-4`/`p-8`/`tracking-tight` são value-aligned (não inflamos como violação).
+- **Pendência upstream:** o override da borda da sidebar (`index.css`) aguarda o `borderless` no Seven.