@etus/seven-skill 0.1.0-beta.2 → 0.1.0-beta.3

package/.claude/skills/seven/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: seven
 description: Use when generating or auditing UI for the Seven Design System — ETUS Digital's React 19 + Tailwind v4 + @etus/tokens system. Covers component generation, variant selection, token consumption, typography (Inter only), color (OKLCH mint and lime brand, fuchsia chart-only), spatial design (two radius scales), motion (200ms tactile press), accessibility (WCAG 2.1 AA), pt-BR voice (sentence case, no trailing periods, imperative leads), and anti-pattern audits. Routes sub-commands shape, audit, polish, clarify. Not for backend or non-UI tasks.
-version: 0.1.0-beta.2
+version: 0.1.0-beta.3
 argument-hint: "[command] [target]"
 user-invocable: true
 allowed-tools:
@@ -95,6 +95,14 @@ See [reference/typography.md](reference/typography.md) for the full rule set.
 
 See [reference/spatial-design.md](reference/spatial-design.md).
 
+### App shell (sidebar + topbar)
+
+- Sidebar and topbar sit on `var(--surface)` with **no border and no shadow**. The only divider in the shell is the secondary panel's `border-left` — never a `border-r` on the rail, never a `border-b` on the topbar.
+- Controls inside the chrome are white cards: `var(--background)` + 1 px border + radius 8 (search/bell are 36×36 outline toggles). Flat grey chrome, bordered white controls.
+- Rail: 64 px collapsed / 200 px expanded (overlay over the panel). Panel: 216 px. Rail active item is mint-filled; panel active item is `var(--primary-subtle)`.
+
+See [reference/app-shell.md](reference/app-shell.md) for the full Figma-faithful spec and the `@etus/ui` mapping.
+
 ### Motion
 
 - Default duration 200 ms (`var(--duration-normal)`), easing `var(--ease-default)`.

package/.claude/skills/seven/reference/app-shell.md

@@ -0,0 +1,70 @@
+# App shell — Sidebar + Topbar (Figma-faithful)
+
+The Seven application shell. Source of truth: Figma "Core Components — Seven", Sidebar set `2472:372` and Topbar set `1403:15038`. When the project has `@etus/ui`, compose `<Sidebar>` / `<Topbar>` from the package — never reimplement. When prototyping without the package, reproduce the nominal values below exactly.
+
+## The two laws that kill most drift
+
+1. **Chrome has no outline.** Sidebar and topbar have **no border and no shadow** — they sit on the same `var(--surface)` (#fafafa) plane. The ONLY divider in the shell is the **`border-left` of the secondary panel** (1 px `var(--border)`), owned by the panel, not the rail. Never add `border-r` to the sidebar or `border-b` to the topbar.
+2. **Chrome is surface, controls are white cards.** The shell background is `var(--surface)`, never white. Interactive controls INSIDE the chrome (selects, search, account switch, toggles) are white cards: `bg-[color:var(--background)]` + 1 px `var(--input)`/`var(--border)` + `rounded-[var(--radius-md)]` (8 px). That contrast — flat grey chrome, bordered white controls — is the Seven shell signature.
+
+## Sidebar (4 states)
+
+All states: `bg-[color:var(--surface)]`, padding `12px` horizontal / `24px` vertical, column layout with `justify-between` (top group / bottom group). No border, no shadow.
+
+| State                | Width                                 | Notes                                                                                      |
+| -------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------ |
+| Collapsed (rail)     | **64 px**                             | icons only                                                                                 |
+| Expanded             | **200 px**                            | labels visible                                                                             |
+| Secondary            | **280 px** total                      | rail 64 + panel 216, panel carries `border-l`                                              |
+| Expanded + Secondary | rail expands 64→200 **as an overlay** | panel does not move (footprint stays 280); the expanded rail covers the panel's `border-l` |
+
+Rail contents (top→bottom): Logo 32×32 (icon 24) · AccountSwitch · nav items (gap 20) · … · color-mode toggle (pill 36×24, track `var(--muted)`, white 20 px knob, 12 px icon) · settings item · Avatar 32.
+
+- **Rail item**: 36×36 (20 px Lucide icon + 8 px padding), radius **4 px** (component `sm`). Active: `bg-[color:var(--primary)]` (mint) with dark foreground icon. Expanded item fills the rail width (176 px inside the 200 px rail).
+- **AccountSwitch**: white card, 1 px `var(--input)`, radius 8; brand logo 24×24 radius 4. Collapsed: logo only (px 8). Expanded: logo + account name (16 px, `var(--muted-foreground)`) + ChevronsUpDown 16.
+
+### Secondary panel (216 px)
+
+`bg-[color:var(--surface)]` + **`border-l` 1 px `var(--border)`** + padding top 28 / bottom 80 / x 8.
+
+- Page title: 16 px Inter Bold, `var(--foreground)`.
+- Group label: 12 px `var(--muted-foreground)` + 12 px chevron (collapsible). Groups separated by 1 px dividers.
+- **Panel item**: height **30 px**, radius 4, text 14 px. Active: `bg-[color:var(--primary-subtle)]` (#d1faeb) with `#052e1f` foreground — NOT full mint (mint fill is rail-only).
+- Indent by level: primary `px-8` · secondary `pl-28` · tertiary `pl-48`. Dropdown items lead with a 12 px chevron.
+
+## Topbar (3 states)
+
+Root: `bg-[color:var(--surface)]`, padding `32px` horizontal / `8px` vertical, full width, items centered with space-between. **No border, no radius, no shadow on the root.**
+
+- **Leading**: Breadcrumb — Home icon 15 px, ChevronRight separators, items 14 px `var(--muted-foreground)`, current page 14 px `var(--foreground)`.
+- **Trailing** (gap 16): DatePicker + Selects as white inputs (1 px `var(--input)`, radius 8, `px-12 py-8`, 14 px text) · Search and Bell as **36×36 outline toggles**: white bg, 1 px `var(--border)`, radius 8, 16 px icon. These bordered rounded controls are what makes the topbar read correctly — a borderless ghost icon row is off-system.
+- **Scrolled** state: adds a 1×17 divider + ghost refresh chip ("Atualizado há 1 min", disabled foreground, RefreshCw 16).
+- **Search focused**: search expands to a 208 px input with mint focus ring (`var(--ring)` border + 4 px `rgba(25,230,153,0.3)` shadow); filters compact to fixed 208 px.
+
+## Content area
+
+The page content sits next to/below the chrome as **cards on the canvas** — white `var(--background)` surfaces with the workhorse 1 px `var(--border)` (see [product.md](product.md)). The shell never separates itself from content with its own border; the content cards' borders do that work.
+
+## @etus/ui mapping
+
+```tsx
+import {
+  Sidebar, SidebarProvider, SidebarRailContent, SidebarRailButton,
+  SidebarPanelContent, SidebarPanelItem, SidebarPanelGroup,
+  Topbar, TopbarLeading, TopbarTrailing,
+} from "@etus/ui"
+
+<SidebarProvider mode="dual">           {/* rail + secondary panel */}
+  <Sidebar>
+    <SidebarRailContent>…</SidebarRailContent>      {/* borderless; expands on hover as overlay */}
+    <SidebarPanelContent>…</SidebarPanelContent>    {/* carries the border-l divider */}
+  </Sidebar>
+</SidebarProvider>
+
+<Topbar variant="default">              {/* or "filters" */}
+  <TopbarLeading>{/* Breadcrumb */}</TopbarLeading>
+  <TopbarTrailing>{/* filters + search/bell toggles */}</TopbarTrailing>
+</Topbar>
+```
+
+`mode="single"` renders the classic one-panel sidebar (also borderless). Copy in pt-BR: `Visão Geral`, `Configurações`, `Buscar...`, `Tema Claro`.

package/.claude-plugin/marketplace.json

@@ -12,7 +12,7 @@
     {
       "name": "seven",
       "description": "Seven Design System skill, plugin, and CLI detector for AI coding agents — ETUS Digital",
-      "version": "0.1.0-beta.2",
+      "version": "0.1.0-beta.3",
       "author": {
         "name": "ETUS Digital",
         "url": "https://github.com/etusdigital"

package/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "seven",
   "description": "Seven Design System skill, plugin, and CLI detector for AI coding agents — ETUS Digital",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "author": {
     "name": "ETUS Digital",
     "url": "https://github.com/etusdigital"

package/cli/engine/detect-antipatterns-browser.js

@@ -834,7 +834,7 @@ const TOKEN_DATA = {
     "oklch(97.05% 0.0142 254.60)": "--featured-icon-color-info-bg",
     "oklch(62.31% 0.1880 259.81)": "--color-firefox",
     "oklch(54.61% 0.2152 262.88)": "--tag-color-dot-info",
-    "oklch(48.82% 0.2172 264.38)": "--feature-item-badge-fg",
+    "oklch(48.82% 0.2172 264.38)": "--icon-color-info",
     "oklch(42.44% 0.1809 265.64)": "--status-info-border",
     "oklch(37.91% 0.1378 265.52)": "--blue-900",
     "oklch(28.23% 0.0874 267.94)": "--status-info-subtle",
@@ -870,7 +870,7 @@ const TOKEN_DATA = {
     "oklch(98.93% 0.0139 138.71)": "--secondary-subtle",
     "oklch(87.82% 0.2037 137.75)": "--tags-input-tag-background",
     "oklch(72.57% 0.1684 137.62)": "--button-secondary-color-border-hover",
-    "oklch(58.24% 0.1354 137.66)": "--button-ring-secondary",
+    "oklch(58.24% 0.1354 137.66)": "--icon-color-secondary",
     "oklch(42.97% 0.0993 137.99)": "--secondary-hover",
     "oklch(28.73% 0.0661 137.75)": "--secondary",
     "oklch(21.23% 0.0502 138.22)": "--tags-input-tag-foreground",
@@ -911,7 +911,7 @@ const TOKEN_DATA = {
     "oklch(97.02% 0.0000 0)": "--toolbar-button-background-hover",
     "oklch(92.19% 0.0000 0)": "--topbar-root-border-color",
     "oklch(86.99% 0.0000 0)": "--text-disabled",
-    "oklch(71.55% 0.0000 0)": "--border-semantic-strong",
+    "oklch(71.55% 0.0000 0)": "--icon-color-disabled",
     "oklch(98.51% 0.0000 0)": "--topbar-root-background",
     "oklch(55.55% 0.0000 0)": "--toolbar-button-foreground-muted",
     "oklch(43.86% 0.0000 0)": "--status-disabled-foreground",
@@ -923,7 +923,7 @@ const TOKEN_DATA = {
     "oklch(88.45% 0.0593 18.33)": "--alert-variant-destructive-border",
     "oklch(80.77% 0.1035 19.57)": "--status-destructive-subtle-foreground",
     "oklch(71.06% 0.1661 22.22)": "--status-destructive-hover",
-    "oklch(97.05% 0.0129 17.38)": "--modal-icon-pill-color-destructive-bg",
+    "oklch(97.05% 0.0129 17.38)": "--notification-bg-destructive",
     "oklch(63.68% 0.2078 25.33)": "--timeline-marker-color-error",
     "oklch(57.71% 0.2152 27.33)": "--asset-palette-type-doc-pdf-color",
     "oklch(50.54% 0.1905 27.52)": "--modal-icon-pill-color-destructive-fg",

package/cli/engine/token-data.generated.mjs

@@ -232,7 +232,7 @@ export const TOKEN_DATA = {
     "oklch(97.05% 0.0142 254.60)": "--featured-icon-color-info-bg",
     "oklch(62.31% 0.1880 259.81)": "--color-firefox",
     "oklch(54.61% 0.2152 262.88)": "--tag-color-dot-info",
-    "oklch(48.82% 0.2172 264.38)": "--feature-item-badge-fg",
+    "oklch(48.82% 0.2172 264.38)": "--icon-color-info",
     "oklch(42.44% 0.1809 265.64)": "--status-info-border",
     "oklch(37.91% 0.1378 265.52)": "--blue-900",
     "oklch(28.23% 0.0874 267.94)": "--status-info-subtle",
@@ -268,7 +268,7 @@ export const TOKEN_DATA = {
     "oklch(98.93% 0.0139 138.71)": "--secondary-subtle",
     "oklch(87.82% 0.2037 137.75)": "--tags-input-tag-background",
     "oklch(72.57% 0.1684 137.62)": "--button-secondary-color-border-hover",
-    "oklch(58.24% 0.1354 137.66)": "--button-ring-secondary",
+    "oklch(58.24% 0.1354 137.66)": "--icon-color-secondary",
     "oklch(42.97% 0.0993 137.99)": "--secondary-hover",
     "oklch(28.73% 0.0661 137.75)": "--secondary",
     "oklch(21.23% 0.0502 138.22)": "--tags-input-tag-foreground",
@@ -309,7 +309,7 @@ export const TOKEN_DATA = {
     "oklch(97.02% 0.0000 0)": "--toolbar-button-background-hover",
     "oklch(92.19% 0.0000 0)": "--topbar-root-border-color",
     "oklch(86.99% 0.0000 0)": "--text-disabled",
-    "oklch(71.55% 0.0000 0)": "--border-semantic-strong",
+    "oklch(71.55% 0.0000 0)": "--icon-color-disabled",
     "oklch(98.51% 0.0000 0)": "--topbar-root-background",
     "oklch(55.55% 0.0000 0)": "--toolbar-button-foreground-muted",
     "oklch(43.86% 0.0000 0)": "--status-disabled-foreground",
@@ -321,7 +321,7 @@ export const TOKEN_DATA = {
     "oklch(88.45% 0.0593 18.33)": "--alert-variant-destructive-border",
     "oklch(80.77% 0.1035 19.57)": "--status-destructive-subtle-foreground",
     "oklch(71.06% 0.1661 22.22)": "--status-destructive-hover",
-    "oklch(97.05% 0.0129 17.38)": "--modal-icon-pill-color-destructive-bg",
+    "oklch(97.05% 0.0129 17.38)": "--notification-bg-destructive",
     "oklch(63.68% 0.2078 25.33)": "--timeline-marker-color-error",
     "oklch(57.71% 0.2152 27.33)": "--asset-palette-type-doc-pdf-color",
     "oklch(50.54% 0.1905 27.52)": "--modal-icon-pill-color-destructive-fg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etus/seven-skill",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "description": "Seven Design System skill, plugin, and CLI detector for AI coding agents — ETUS Digital",
   "license": "Apache-2.0",
   "repository": {
@@ -54,8 +54,8 @@
     "tsx": "^4.23.0",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10",
-    "@etus/tokens": "^0.4.0-beta.13",
-    "@etus/tsconfig": "0.0.0"
+    "@etus/tsconfig": "0.0.0",
+    "@etus/tokens": "^0.4.0-beta.16"
   },
   "engines": {
     "node": ">=24.0.0"