aiox-core 5.0.2 → 5.0.3

package/pro/squads/design/data/capability-tools.yaml

@@ -0,0 +1,124 @@
+version: "1.1"
+generated_at: "2026-02-19"
+generated_by: "squad-chief/discover-tools"
+policy: "internal-first"
+
+squad:
+  name: design
+  domain: design_system
+  budget_tier: low_cost
+
+use_cases:
+  - ds-setup-design-system
+  - ds-build-component
+  - ds-generate-documentation
+  - ds-validate-ai-readiness
+  - ds-visual-regression
+  - ds-figma-pipeline
+  - ds-governance
+
+capability_tools:
+  ds_component_metadata_generation:
+    priority: high
+    primary:
+      - script:generate_components_metadata.cjs
+    fallback: []
+
+  ds_component_metadata_validation:
+    priority: high
+    primary:
+      - script:validate_components_metadata.cjs
+    fallback: []
+
+  ds_manifest_sync:
+    priority: high
+    primary:
+      - script:sync_design_manifest.cjs
+    fallback: []
+
+  ds_manifest_drift_validation:
+    priority: high
+    primary:
+      - script:validate_design_manifest_drift.cjs
+    fallback: []
+
+  ds_task_checklist_validation:
+    priority: high
+    primary:
+      - script:validate_task_checklist_bindings.cjs
+    fallback: []
+
+  ds_mcp_skeleton_validation:
+    priority: high
+    primary:
+      - script:validate_mcp_skeleton.cjs
+    fallback: []
+
+  ds_mcp_runtime_queries:
+    priority: high
+    primary:
+      - workspace:design-system-mcp-server
+    fallback:
+      - script:test_mcp_tools.cjs
+
+  ds_ast_structural_contract_mining:
+    priority: high
+    primary:
+      - script:scan-structural-model (profile:design-system)
+    fallback:
+      - cli:ast-grep
+      - native:grep
+
+  visual_regression:
+    priority: medium
+    primary:
+      - local:playwright
+    fallback:
+      - chromatic
+      - percy
+
+  figma_sync:
+    priority: medium
+    primary:
+      - ds-figma-pipeline
+    fallback:
+      - figma-api
+
+recommendations:
+  quick_wins:
+    - script:generate_components_metadata.cjs
+    - script:validate_components_metadata.cjs
+    - script:sync_design_manifest.cjs
+    - script:validate_design_manifest_drift.cjs
+    - script:validate_task_checklist_bindings.cjs
+    - script:validate_mcp_skeleton.cjs
+    - script:scan-structural-model (profile:design-system)
+  strategic:
+    - local:playwright
+    - script:test_mcp_tools.cjs
+    - library:ts-morph
+  optional:
+    - chromatic
+    - percy
+    - figma-api
+    - cli:semgrep
+
+integration_order:
+  - wave: 1
+    tools:
+      - script:generate_components_metadata.cjs
+      - script:validate_components_metadata.cjs
+      - script:sync_design_manifest.cjs
+      - script:validate_design_manifest_drift.cjs
+      - script:validate_task_checklist_bindings.cjs
+      - script:validate_mcp_skeleton.cjs
+      - script:scan-structural-model (profile:design-system)
+  - wave: 2
+    tools:
+      - local:playwright
+      - script:test_mcp_tools.cjs
+  - wave: 3
+    tools:
+      - chromatic
+      - percy
+      - figma-api

package/pro/squads/design/data/component-adaptation-changelog.md

@@ -0,0 +1,318 @@
+# Component Adaptation Changelog
+
+> Registro de mudancas visuais aplicadas aos componentes shadcn/UI para corresponder ao Figma.
+> Gerado pela task `f2-adapt-shadcn-components`.
+
+---
+
+## Principios Aplicados
+
+- **Apenas Tailwind classes modificadas** — JSX, props, Radix primitives, ARIA, exports inalterados
+- **Tokens semanticos** — Nenhum valor hex/rgb hardcoded
+- **Focus ring unificado** — `ring-2 ring-foreground ring-offset-2 ring-offset-background` em todos
+- **Dark-first** — Estilos dark-mode como referencia primaria
+- **Pill shapes** — Buttons, badges, icon buttons usam `rounded-full`
+- **Overlay containers** — Popover, dropdown, select, dialog usam `rounded-xl border-border`
+
+---
+
+## Button (`components/ui/button.tsx`)
+
+### Visual Changes
+- `rounded-md` → `rounded-full` (pill shape — Figma 100px)
+- Focus ring: `ring-[3px] ring-ring/50` → `ring-2 ring-foreground ring-offset-2 ring-offset-background`
+- Disabled: `opacity-50` → `opacity-20` (Figma 0.2)
+- Removed `shadow-xs` from variants
+
+### Variant Changes
+| Variant | Before | After |
+|---|---|---|
+| **default** (= Figma Primary) | `bg-primary text-primary-foreground hover:bg-primary/90` | + `font-heading uppercase tracking-wide`, hover full white in dark |
+| **destructive** | `dark:bg-destructive/60` | Removed dark dim, added `font-heading uppercase tracking-wide` |
+| **outline** (= Figma Secondary) | `border bg-background shadow-xs` | `border-2 border-border bg-transparent`, + `font-heading uppercase tracking-wide` |
+| **secondary** (= Figma Tertiary) | `bg-secondary hover:bg-secondary/80` | + `font-body` (Inter, normal case) |
+| **ghost** (= Figma Quarter) | `hover:bg-accent` | + `text-foreground/80 font-body` |
+| **link** | `text-primary` | `text-foreground/80 font-body` |
+
+### Size Changes
+| Size | Before | After |
+|---|---|---|
+| **default** | `h-9 px-4 text-sm` | `h-10 px-3 text-base` (Figma Medium 40px) |
+| **xs** | `h-6 px-2 text-xs` | `h-6 px-3 text-xs` (Figma Mini 24px) |
+| **sm** | `h-8 px-3` | `h-8 px-3 text-sm` (Figma Small 32px) |
+| **lg** | `h-10 px-6` | `h-12 px-3 text-base` (Figma Large 48px) |
+| **icon** | `size-9` | `size-10` |
+| **icon-xs** | `size-6 rounded-md` | `size-6` (inherits rounded-full) |
+| **icon-sm** | `size-8` | `size-8` |
+| **icon-lg** | `size-10` | `size-12` |
+
+### Preserved
+- All 6 variants + 8 sizes
+- `asChild` prop with Radix `Slot.Root`
+- `data-slot="button"`, `data-variant`, `data-size`
+- CVA pattern, TypeScript types, exports
+
+---
+
+## Input (`components/ui/input.tsx`)
+
+### Visual Changes
+- Border: `border border-input` → `border-none`
+- Background: `bg-transparent dark:bg-input/30` → `bg-accent/50 dark:bg-input/30`
+- Radius: `rounded-md` → `rounded-lg` (Figma 12px)
+- Shadow: `shadow-xs` → `shadow-none`
+- Height: `h-9` → `h-12` (Figma small = 48px)
+- Padding: `px-3` → `px-4` (Figma 16px)
+- Font: Added `font-medium font-body`
+- Focus ring: `ring-[3px] ring-ring/50` → `ring-2 ring-foreground ring-offset-2`
+- Hover: Added `hover:bg-accent dark:hover:bg-input/50`
+- Invalid: `aria-invalid:border-destructive` → `aria-invalid:ring-2 aria-invalid:ring-destructive`
+
+### Preserved
+- `data-slot="input"`, all HTML input props
+- File input styles, selection styles
+- Disabled behavior (`opacity-50`, pointer-events-none)
+
+---
+
+## Badge (`components/ui/badge.tsx`)
+
+### Visual Changes
+- Removed `border border-transparent` from base
+- Padding: `px-2` → `px-2.5`
+- Font: Added `font-body`
+- Focus ring: unified to `ring-2 ring-foreground ring-offset-2`
+- Transition: `transition-[color,box-shadow]` → `transition-all`
+
+### Variant Changes
+| Variant | Change |
+|---|---|
+| **default** | Changed from `bg-primary` to `bg-secondary` (Figma tag = subtle bg) |
+| **primary** | NEW — replaces old default (strong bg) |
+| **success** | NEW — `bg-success text-success-foreground` |
+| **warning** | NEW — `bg-warning text-warning-foreground` |
+| **info** | NEW — `bg-info text-info-foreground` |
+| **secondary** | Changed to `bg-accent text-foreground/80` |
+| **destructive** | Removed `dark:bg-destructive/60` |
+
+### Preserved
+- `rounded-full`, `asChild`, `data-slot="badge"`, all props
+
+---
+
+## Card (`components/ui/card.tsx`)
+
+### Visual Changes
+- Border: `border` → `border border-border` (explicit token)
+- Shadow: `shadow-sm` → `shadow-none dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)]`
+
+### Preserved
+- `rounded-xl`, all sub-components (Header, Title, Description, Action, Content, Footer)
+- `bg-card text-card-foreground` tokens, `data-slot` attributes
+
+---
+
+## Alert (`components/ui/alert.tsx`)
+
+### Visual Changes
+- Border: `border` → `border border-border` (explicit token)
+- Destructive: Added `border-destructive/50`, explicit `[&>svg]:text-destructive`
+
+### New Variants
+| Variant | Classes |
+|---|---|
+| **warning** | `border-warning/50 text-warning [&>svg]:text-warning` |
+| **info** | `border-info/50 text-info [&>svg]:text-info` |
+| **success** | `border-success/50 text-success [&>svg]:text-success` |
+
+### Preserved
+- Grid layout, `role="alert"`, all sub-components, `data-slot` attributes
+
+---
+
+## Dialog (`components/ui/dialog.tsx`)
+
+### Visual Changes
+- Content bg: `bg-background` → `bg-card` (Figma surface/900 in dark)
+- Radius: `rounded-lg` → `rounded-xl`
+- Border: `border` → `border border-border`
+- Shadow: Added `dark:shadow-[0_8px_32px_rgba(0,0,0,0.5)]`
+- Close button: `rounded-xs` → `rounded-full`, focus ring unified
+
+### Preserved
+- Overlay `bg-black/50`, animations, all sub-components
+- `showCloseButton` prop, Radix primitives, `data-slot` attributes
+
+---
+
+## Checkbox (`components/ui/checkbox.tsx`)
+
+### Visual Changes
+- Border: `border-input` → `border-2 border-border` (Figma 2px)
+- Removed `dark:bg-input/30` background
+- Shadow: `shadow-xs` → `shadow-none`
+- Focus ring: unified to `ring-2 ring-foreground ring-offset-2`
+- Disabled: `opacity-50` → `opacity-20`
+- Transition: `transition-shadow` → `transition-all`
+
+### Preserved
+- `rounded-[4px]` (= `rounded-sm`, Figma 4px), `size-4`, Radix primitives, CheckIcon
+
+---
+
+## RadioGroup (`components/ui/radio-group.tsx`)
+
+### Visual Changes
+- Border: `border-input` → `border-2 border-border`
+- Removed `dark:bg-input/30` background
+- Shadow: `shadow-xs` → `shadow-none`
+- Focus ring: unified
+- Added `data-[state=checked]:border-primary`
+- Disabled: `opacity-50` → `opacity-20`
+- Transition: → `transition-all`
+
+### Preserved
+- `rounded-full`, `size-4`, CircleIcon indicator, Radix primitives
+
+---
+
+## Switch (`components/ui/switch.tsx`)
+
+### Visual Changes
+- Shadow: `shadow-xs` → `shadow-none`
+- Focus ring: unified to `ring-2 ring-foreground ring-offset-2`
+- Disabled: `opacity-50` → `opacity-20`
+
+### Preserved
+- Checked/unchecked bg tokens, thumb styles, size data attributes, Radix primitives
+
+---
+
+## Textarea (`components/ui/textarea.tsx`)
+
+### Visual Changes
+- Border: `border-input border` → `border-none`
+- Background: `bg-transparent dark:bg-input/30` → `bg-accent/50 dark:bg-input/30`
+- Radius: `rounded-md` → `rounded-lg`
+- Shadow: `shadow-xs` → `shadow-none`
+- Padding: `px-3 py-2` → `px-4 py-3`
+- Font: Added `font-medium font-body`
+- Focus ring: unified
+- Hover: Added `hover:bg-accent dark:hover:bg-input/50`
+
+### Preserved
+- `field-sizing-content`, `min-h-16`, disabled behavior, `data-slot="textarea"`
+
+---
+
+## Tooltip (`components/ui/tooltip.tsx`)
+
+### Visual Changes
+- Radius: `rounded-md` → `rounded-lg`
+- Font: Added `font-medium font-body`
+
+### Preserved
+- `bg-foreground text-background` (inverted — correct for dark-first)
+- All animations, arrow, Radix primitives
+
+---
+
+## Select (`components/ui/select.tsx`)
+
+### SelectTrigger Changes
+- Border: `border-input border` → `border-none`
+- Background: `bg-transparent dark:bg-input/30` → `bg-accent/50 dark:bg-input/30`
+- Radius: `rounded-md` → `rounded-lg`
+- Shadow: `shadow-xs` → `shadow-none`
+- Height: `data-[size=default]:h-9` → `h-12`
+- Font: Added `font-medium font-body`
+- Focus ring: unified
+- Hover: Added `hover:bg-accent`
+
+### SelectContent Changes
+- Radius: `rounded-md` → `rounded-xl`
+- Border: `border` → `border border-border`
+- Shadow: Added `dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)]`
+
+### SelectItem Changes
+- `rounded-sm` → `rounded-lg`
+
+### Preserved
+- All Radix primitives, scroll buttons, separator, label, icons
+
+---
+
+## DropdownMenu (`components/ui/dropdown-menu.tsx`)
+
+### Content Changes
+- Radius: `rounded-md` → `rounded-xl`
+- Border: `border` → `border border-border`
+- Shadow: Added `dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)]`
+
+### Item Changes
+- `rounded-sm` → `rounded-lg`
+
+### SubContent Changes
+- Same as content (rounded-xl, border-border, dark shadow)
+
+### Preserved
+- All sub-components, Radix primitives, variants, inset, shortcuts
+
+---
+
+## Popover (`components/ui/popover.tsx`)
+
+### Visual Changes
+- Radius: `rounded-md` → `rounded-xl`
+- Border: `border` → `border border-border`
+- Shadow: Added `dark:shadow-[0_4px_24px_rgba(0,0,0,0.3)]`
+
+### Preserved
+- All sub-components, anchor, Radix primitives
+
+---
+
+## Sonner/Toaster (`components/ui/sonner.tsx`)
+
+### Visual Changes
+- Border radius: `var(--radius)` → `var(--radius-lg)` (12px)
+- Added semantic toast colors: success/error/warning/info border + bg tokens
+
+### Preserved
+- Theme integration, all icons, component structure
+
+---
+
+## Summary
+
+| Component | Files Changed | Variants | Props Changed | Breaking Changes |
+|---|---|---|---|---|
+| Button | 1 | 6 variants, 8 sizes | 0 | 0 |
+| Input | 1 | — | 0 | 0 |
+| Badge | 1 | 9 variants (+3 new) | 0 | 0 (default now = secondary look) |
+| Card | 1 | — | 0 | 0 |
+| Alert | 1 | 5 variants (+3 new) | 0 | 0 |
+| Dialog | 1 | — | 0 | 0 |
+| Checkbox | 1 | — | 0 | 0 |
+| RadioGroup | 1 | — | 0 | 0 |
+| Switch | 1 | — | 0 | 0 |
+| Textarea | 1 | — | 0 | 0 |
+| Tooltip | 1 | — | 0 | 0 |
+| Select | 1 | — | 0 | 0 |
+| DropdownMenu | 1 | — | 0 | 0 |
+| Popover | 1 | — | 0 | 0 |
+| Sonner | 1 | — | 0 | 0 |
+| **Total** | **15 files** | **+6 new variants** | **0** | **0** |
+
+---
+
+## Build Validation
+
+- `next build` — PASS (compiled in 1829ms, 0 errors)
+- TypeScript — PASS (no type errors)
+- No props API changes — PASS
+
+---
+
+*Gerado por: Foundations Pipeline — Phase 2 (f2-adapt-shadcn-components)*
+*Data: 2026-02-21*

package/pro/squads/design/data/consolidation-algorithms.md

@@ -0,0 +1,168 @@
+# Pattern Consolidation Algorithms
+
+**Agent:** Brad (Design System Architect)
+**Purpose:** How Brad reduces 176 patterns to 32
+
+---
+
+## Color Clustering (HSL-based)
+
+**Algorithm:** Perceptual similarity in HSL color space
+
+```python
+def cluster_colors(colors, threshold=0.05):
+    """
+    Group colors within 5% HSL difference
+    threshold: 0.05 = 5% difference in H, S, or L
+    """
+    clusters = []
+    for color in colors:
+        hsl = hex_to_hsl(color)
+        found_cluster = False
+
+        for cluster in clusters:
+            cluster_hsl = hex_to_hsl(cluster['primary'])
+            if hsl_distance(hsl, cluster_hsl) < threshold:
+                cluster['members'].append(color)
+                found_cluster = True
+                break
+
+        if not found_cluster:
+            clusters.append({
+                'primary': color,  # Most-used in this cluster
+                'members': [color]
+            })
+
+    return clusters
+```
+
+**Example:**
+```
+Input: #0066CC, #0065CB, #0067CD, #0064CA
+HSL distance: All within 2% of each other
+Output: Cluster → Keep #0066CC (most-used)
+```
+
+**Why HSL not RGB:** Perceptually similar colors cluster better in HSL space.
+
+---
+
+## Button Semantic Analysis
+
+**Algorithm:** Keyword matching + usage frequency
+
+```python
+def analyze_button_semantics(button_classes):
+    """
+    Group buttons by semantic purpose
+    Keywords: primary, main, secondary, default, danger, delete, destructive
+    """
+    semantic_groups = {
+        'primary': [],
+        'secondary': [],
+        'destructive': []
+    }
+
+    for btn_class, usage_count in button_classes:
+        if any(kw in btn_class.lower() for kw in ['primary', 'main', 'cta']):
+            semantic_groups['primary'].append((btn_class, usage_count))
+        elif any(kw in btn_class.lower() for kw in ['secondary', 'default', 'ghost']):
+            semantic_groups['secondary'].append((btn_class, usage_count))
+        elif any(kw in btn_class.lower() for kw in ['danger', 'delete', 'destructive', 'error']):
+            semantic_groups['destructive'].append((btn_class, usage_count))
+
+    # Keep most-used in each group
+    return {
+        group: max(classes, key=lambda x: x[1])[0]
+        for group, classes in semantic_groups.items()
+        if classes
+    }
+```
+
+**Result:** 47 buttons → 3 variants (primary, secondary, destructive)
+
+---
+
+## Spacing Scale Generation
+
+**Algorithm:** Base unit detection + scale building
+
+```python
+def generate_spacing_scale(spacing_values):
+    """
+    Detect base unit (4px or 8px)
+    Build scale from base unit
+    """
+    # Find GCD of all spacing values
+    base_unit = gcd_multiple(spacing_values)
+
+    # Common: 4px or 8px
+    if base_unit not in [4, 8]:
+        base_unit = 4  # Default to 4px
+
+    # Generate scale
+    scale = {
+        'xs': base_unit,
+        'sm': base_unit * 2,
+        'md': base_unit * 4,
+        'lg': base_unit * 6,
+        'xl': base_unit * 8,
+        '2xl': base_unit * 12,
+        '3xl': base_unit * 16
+    }
+
+    return scale
+```
+
+**Example:**
+```
+Input: 2, 4, 6, 8, 12, 16, 20, 24, 32
+Base unit: 4px
+Output: xs=4, sm=8, md=16, lg=24, xl=32, 2xl=48, 3xl=64
+```
+
+---
+
+## Consolidation Targets
+
+**Brad's Targets:**
+- Colors: >85% reduction
+- Buttons: >90% reduction
+- Spacing: >60% reduction
+- Typography: >50% reduction
+- **Overall:** >80% reduction
+
+**Achieved:** Typically 81-86% overall reduction
+
+---
+
+---
+
+## Critical Eye Integration
+
+**Post-consolidation curation via Critical Eye:**
+
+After consolidation reduces pattern variants (e.g., 47 buttons → 3 variants), the Critical Eye workflow evaluates which consolidated variant becomes the **canonical** choice across multiple brands/sources.
+
+**Flow:**
+```
+Consolidation (reduce redundancy) → Critical Eye (select canonical)
+```
+
+**Key difference:**
+- **Consolidation** = within a single source, reduce duplicates
+- **Critical Eye** = across all sources, select the best variant per category
+
+**Scoring reference:** `squads/design/data/critical-eye-scoring-rules.yaml`
+**Pattern catalog:** `workspace/ui/pattern-catalog.json`
+**Lifecycle:** CANDIDATE → EXPERIMENTAL → STABLE → CANONICAL
+
+---
+
+## References
+
+- HSL color space: https://en.wikipedia.org/wiki/HSL_and_HSV
+- Brad Frost patterns: https://bradfrost.com/blog/
+- Nathan Curtis / EightShapes Usage Breadth Scale
+- GOV.UK Design System Contribution Criteria
+- USWDS Component Lifecycle