npm - aiox-core - Versions diffs - 5.0.4 → 5.0.5 - Mend

aiox-core 5.0.4 → 5.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/pro/squads/design/templates/component-prompt-injection-tmpl.md DELETED Viewed

@@ -1,236 +0,0 @@
-# Component Prompt Injection Template
-> Template ID: component-prompt-injection-tmpl
-> Squad: Design
-> Version: 1.0.0
-> Source: Meeting Insights 2026-02-16 (#3)
-> Governance Protocol: `squads/design/protocols/ai-first-governance.md`
-## Purpose
-Template para injetar regras obrigatórias em componentes que AI agents leem automaticamente.
-**Princípio:** Se a regra está no código, AI não pode ignorar.
----
-## AI-First Governance Gate
-- [ ] Validar fontes canônicas (`workspace/system/*`, `workspace/ui/registry.json`, `workspace/domains/design-system/*`)
-- [ ] Registrar status por claim: `Implemented`, `Partially implemented`, `Concept only`
-- [ ] Explicitar contradições e itens não resolvidos
-- [ ] Evitar bloqueio semântico em CI; usar checkpoints de task/workflow
----
-## Template Base
-```css
-/*
-@AIOS-RULES
-===============================================================================
-COMPONENT: [ComponentName]
-SURFACE: [S1|S2|S3]
-===============================================================================
-COPY RULES:
-- max_words_per_sentence: 25
-- cta_rule: action_verb_specific (ex: "Criar conta" não "Clique aqui")
-- error_rule: must_have_next_step (ex: "Email inválido. Use formato: nome@email.com")
-- label_rule: noun_not_verb (ex: "Configurações" não "Configurar")
-VISUAL RULES:
-- tokens_source: squads/design/data/design-tokens-spec.yaml
-- spacing_base: 4px (use multiples: 4, 8, 12, 16, 24, 32, 48, 64)
-- border_radius: use token (sm|md|lg|xl), never hardcode px
-BEHAVIORAL RULES:
-- focus_visible: required for all interactive elements
-- keyboard_nav: required (Tab, Enter, Escape)
-- aria_labels: required for icons without text
-NON-NEGOTIABLE:
-- DO NOT recreate this component - extend via variants
-- DO NOT hardcode colors - use CSS variables from tokens
-- DO NOT skip accessibility attributes
-===============================================================================
-*/
-```
----
-## Surface Types
-| Surface | Contexto | Regras Específicas |
-|---------|----------|-------------------|
-| **S1** | Transactional (checkout, forms) | Max 15 words/sentence, CTA = action verb |
-| **S2** | Informational (dashboards, lists) | Max 25 words/sentence, scannable |
-| **S3** | Educational (docs, help) | Max 30 words/sentence, examples required |
----
-## Exemplos por Tipo de Componente
-### Button
-```css
-/*
-@AIOS-RULES
-===============================================================================
-COMPONENT: Button
-SURFACE: S1
-===============================================================================
-COPY RULES:
-- max_words: 3 (ideal: 1-2)
-- cta_rule: action_verb_specific
-- forbidden: "Clique aqui", "Enviar", "Submit" (muito genérico)
-- recommended: "Criar conta", "Salvar alterações", "Excluir item"
-VISUAL RULES:
-- min_touch_target: 44x44px (WCAG 2.5.5)
-- padding: use spacing tokens (py-2 px-4 minimum)
-- contrast: 4.5:1 minimum (text on background)
-VARIANTS:
-- primary: high emphasis actions (1 per screen recommended)
-- secondary: medium emphasis
-- outline: low emphasis
-- ghost: minimal emphasis
-- destructive: dangerous actions (requires confirmation)
-NON-NEGOTIABLE:
-- DO NOT recreate - use variants or extend
-- MUST have focus-visible ring
-- MUST support keyboard activation (Enter, Space)
-===============================================================================
-*/
-```
-### Input
-```css
-/*
-@AIOS-RULES
-===============================================================================
-COMPONENT: Input
-SURFACE: S1
-===============================================================================
-COPY RULES:
-- label: required, noun form, max 3 words
-- placeholder: example format, not instructions
-- error: specific problem + how to fix
-- helper_text: optional, max 10 words
-VISUAL RULES:
-- min_height: 40px (touch target)
-- label_position: above input (not inside)
-- error_color: use semantic.error token
-ACCESSIBILITY:
-- aria-describedby: link to error/helper text
-- aria-invalid: true when error
-- autocomplete: use appropriate value
-NON-NEGOTIABLE:
-- MUST have visible label (no placeholder-only)
-- MUST show error state with message
-- MUST support paste
-===============================================================================
-*/
-```
-### Card
-```css
-/*
-@AIOS-RULES
-===============================================================================
-COMPONENT: Card
-SURFACE: S2
-===============================================================================
-COPY RULES:
-- title: max 6 words, noun phrase
-- description: max 25 words, scannable
-- cta: 1-2 words, action verb
-VISUAL RULES:
-- padding: use card.padding tokens (p-4 minimum)
-- border_radius: use borders.radius.lg token
-- shadow: optional, use shadows.md for elevation
-HIERARCHY:
-- 1 primary action per card
-- max 2 secondary actions
-- actions at bottom or inline
-NON-NEGOTIABLE:
-- DO NOT nest cards
-- MUST have clear visual boundary
-- Interactive cards MUST be focusable
-===============================================================================
-*/
-```
----
-## Como Usar
-### 1. Ao Criar Componente Novo
-```tsx
-// components/ui/button.tsx
-/*
-@AIOS-RULES
-... (cole o template apropriado)
-*/
-import { cva } from "class-variance-authority"
-export const buttonVariants = cva(
-  // base styles from tokens
-)
-```
-### 2. Ao Revisar Componente Existente
-1. Verificar se tem @AIOS-RULES
-2. Se não tem, adicionar baseado no tipo
-3. Validar que código segue as regras
-### 3. Ao Gerar com AI
-O AI agent DEVE:
-1. Ler o @AIOS-RULES do componente
-2. Seguir TODAS as regras listadas
-3. Não criar componente novo se variante resolve
-4. Referenciar tokens, não hardcode valores
----
-## Validação
-```bash
-# Verificar se componentes têm @AIOS-RULES
-grep -r "@AIOS-RULES" app/components/
-# Verificar se há hardcoded colors (violação)
-grep -r "#[0-9A-Fa-f]{6}" app/components/ --include="*.tsx"
-```
----
-## Referências
-- Meeting Insights: `docs/research/2026-02-16-ux-writing-governance-ds-ai/meeting-insights-2026-02-16.md`
-- Design Tokens: `squads/design/data/design-tokens-spec.yaml`
-- WCAG Checklist: `squads/design/checklists/ds-accessibility-wcag-checklist.md`
----
-*Template criado: 2026-02-16*
-*Squad: Design*
-*Insight Source: #3 Prompt Injection nos Componentes*

package/pro/squads/design/templates/component-visual-spec-tmpl.md DELETED Viewed

@@ -1,378 +0,0 @@
-# Component Visual Spec: {ComponentName}
-> Version: 1.0.0
-> Last Updated: {DATE}
-> Status: {Draft|Review|Approved}
----
-## Overview
-**Component:** {ComponentName}
-**Category:** {atom|molecule|organism}
-**Location:** `app/components/{domain}/{feature}/{ComponentName}.tsx`
-**Purpose:**
-{Brief description of what this component does}
----
-## Anatomy
-```
-┌─────────────────────────────────────────┐
-│  ┌─────┐                         ┌───┐  │
-│  │Icon │  {Label Text}           │ X │  │
-│  └─────┘                         └───┘  │
-└─────────────────────────────────────────┘
-   ^         ^                       ^
-   |         |                       |
- Leading   Content               Trailing
-  Slot                             Slot
-```
-**Slots:**
-- Leading: Icon, Avatar, Checkbox
-- Content: Label, Description
-- Trailing: Action, Badge, Close button
----
-## Variants
-### Size Variants
-| Size | Height | Padding | Font Size | Icon Size |
-|------|--------|---------|-----------|-----------|
-| sm | 32px | py-2 px-3 | text-xs | 16px |
-| md | 40px | py-2.5 px-4 | text-sm | 20px |
-| lg | 48px | py-3 px-5 | text-base | 24px |
-### Style Variants
-| Variant | Background | Text | Border | Use Case |
-|---------|------------|------|--------|----------|
-| primary | studio-primary | studio-bg | none | Primary actions |
-| secondary | surface | foreground | border-white/10 | Secondary actions |
-| outline | transparent | studio-primary | studio-primary/50 | Tertiary actions |
-| ghost | transparent | muted-foreground | none | Subtle actions |
-| destructive | red-500 | white | none | Destructive actions |
----
-## States
-### Interactive States
-| State | Visual Change | Transition |
-|-------|---------------|------------|
-| Default | Base styles | - |
-| Hover | brightness +10%, cursor pointer | 200ms ease-out |
-| Focus | ring-2 ring-studio-primary/50 | instant |
-| Active | scale(0.98), brightness -5% | 100ms |
-| Disabled | opacity-50, cursor-not-allowed | - |
-| Loading | spinner, text hidden | - |
-### State Tokens
-```css
-/* Default */
---state-bg: var(--surface);
---state-text: var(--foreground);
---state-border: var(--border);
-/* Hover */
---state-bg-hover: var(--surface-hover);
-/* Focus */
---state-ring: var(--primary-color);
---state-ring-opacity: 0.5;
-/* Disabled */
---state-opacity-disabled: 0.5;
-```
----
-## Spacing
-### Internal Spacing
-```
-┌──────────────────────────────────────────┐
-│ padding-y                                │
-│  ┌────────────────────────────────────┐  │
-│  │ padding-x                          │  │
-│  │  ┌──────┐  gap  ┌──────────────┐  │  │
-│  │  │ Icon │ ───── │    Label     │  │  │
-│  │  └──────┘       └──────────────┘  │  │
-│  │                                    │  │
-│  └────────────────────────────────────┘  │
-│                                          │
-└──────────────────────────────────────────┘
-```
-| Property | sm | md | lg |
-|----------|----|----|-----|
-| padding-x | 12px (px-3) | 16px (px-4) | 20px (px-5) |
-| padding-y | 8px (py-2) | 10px (py-2.5) | 12px (py-3) |
-| gap | 8px (gap-2) | 8px (gap-2) | 12px (gap-3) |
-| icon-size | 16px | 20px | 24px |
-### External Spacing
-| Context | Recommended Spacing |
-|---------|---------------------|
-| In button group | gap-2 |
-| In form | mt-4 or space-y-4 |
-| In card footer | mt-6 |
----
-## Typography
-| Element | Font | Size | Weight | Line Height |
-|---------|------|------|--------|-------------|
-| Label | Inter | text-sm | font-medium (500) | leading-5 |
-| Description | Inter | text-xs | font-normal (400) | leading-4 |
-| Badge | Inter | text-xs | font-medium (500) | leading-4 |
----
-## Colors
-### Light Theme (if applicable)
-| Element | Token | Value |
-|---------|-------|-------|
-| Background | bg-white | #FFFFFF |
-| Text | text-gray-900 | #111827 |
-| Border | border-gray-200 | #E5E7EB |
-### Dark Theme (default)
-| Element | Token | Value |
-|---------|-------|-------|
-| Background | studio-card-bg | #111116 |
-| Text | foreground | #FFFFFF |
-| Border | border-white/10 | rgba(255,255,255,0.1) |
-| Primary | studio-primary | #D4AF37 |
-### Semantic Colors
-| State | Token | Value |
-|-------|-------|-------|
-| Success | status-success | #22C55E |
-| Warning | status-warning | #F59E0B |
-| Error | status-error | #EF4444 |
-| Info | status-info | #3B82F6 |
----
-## Borders & Radius
-| Property | Value | Tailwind |
-|----------|-------|----------|
-| Border width | 1px | border |
-| Border radius | 6px | rounded-md |
-| Focus ring | 2px | ring-2 |
-| Focus offset | 2px | ring-offset-2 |
----
-## Shadows
-| Variant | Shadow | Use Case |
-|---------|--------|----------|
-| Flat | none | Default buttons |
-| Elevated | shadow-sm | Dropdown triggers |
-| Floating | shadow-md | Dropdowns, popovers |
----
-## Motion
-### Transitions
-| Property | Duration | Easing | Tailwind |
-|----------|----------|--------|----------|
-| Colors | 200ms | ease-out | transition-colors duration-200 |
-| Transform | 100ms | ease-out | transition-transform duration-100 |
-| All | 200ms | ease-in-out | transition-all duration-200 |
-### Animations
-| Animation | Duration | Use Case |
-|-----------|----------|----------|
-| Fade in | 150ms | Appear |
-| Scale in | 100ms | Pop in |
-| Slide in | 200ms | Panel open |
----
-## Accessibility
-### WCAG Requirements
-| Requirement | Status | Notes |
-|-------------|--------|-------|
-| Color contrast (AA) | Required | 4.5:1 for text |
-| Focus visible | Required | ring-2 ring-primary/50 |
-| Keyboard nav | Required | Tab, Enter, Space |
-| Screen reader | Required | aria-label if icon-only |
-### Keyboard Interactions
-| Key | Action |
-|-----|--------|
-| Tab | Move focus to/from component |
-| Enter | Activate component |
-| Space | Activate component |
-| Escape | Close/cancel (if applicable) |
-### ARIA Attributes
-```tsx
-<button
-  role="button"
-  aria-label="{label}" // if icon-only
-  aria-pressed="{true|false}" // if toggle
-  aria-disabled="{true|false}"
-  aria-busy="{true|false}" // if loading
->
-```
----
-## Implementation Reference
-### Tailwind Classes
-```tsx
-// Base classes
-const baseClasses = cn(
-  // Layout
-  "inline-flex items-center justify-center gap-2",
-  // Typography
-  "text-sm font-medium",
-  // Borders
-  "rounded-md border",
-  // Transitions
-  "transition-colors duration-200",
-  // Focus
-  "focus:outline-none focus:ring-2 focus:ring-studio-primary/50 focus:ring-offset-2",
-  // Disabled
-  "disabled:opacity-50 disabled:cursor-not-allowed"
-);
-// Size variants
-const sizeClasses = {
-  sm: "h-8 px-3 text-xs",
-  md: "h-10 px-4 text-sm",
-  lg: "h-12 px-5 text-base",
-};
-// Style variants
-const variantClasses = {
-  primary: "bg-studio-primary text-studio-bg hover:bg-studio-primary-dark border-transparent",
-  secondary: "bg-surface text-foreground hover:bg-surface/80 border-white/10",
-  outline: "bg-transparent text-studio-primary hover:bg-studio-primary/10 border-studio-primary/50",
-  ghost: "bg-transparent text-muted-foreground hover:bg-white/5 border-transparent",
-  destructive: "bg-red-500 text-white hover:bg-red-600 border-transparent",
-};
-```
-### Props Interface
-```typescript
-interface {ComponentName}Props {
-  // Content
-  children?: React.ReactNode;
-  label?: string;
-  // Variants
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
-  // States
-  disabled?: boolean;
-  loading?: boolean;
-  // Slots
-  leadingIcon?: IconName;
-  trailingIcon?: IconName;
-  // Events
-  onClick?: () => void;
-  // Styling
-  className?: string;
-}
-```
----
-## Visual Examples
-### Default State
-```
-┌─────────────────────┐
-│   🔵  Button Label  │
-└─────────────────────┘
-```
-### Hover State
-```
-┌─────────────────────┐
-│   🔵  Button Label  │  ← brightness +10%
-└─────────────────────┘
-```
-### Focus State
-```
-┏━━━━━━━━━━━━━━━━━━━━━┓
-┃   🔵  Button Label  ┃  ← ring-2 ring-primary/50
-┗━━━━━━━━━━━━━━━━━━━━━┛
-```
-### Loading State
-```
-┌─────────────────────┐
-│      ⟳ Loading...   │  ← spinner + text
-└─────────────────────┘
-```
-### Disabled State
-```
-┌─────────────────────┐
-│   🔵  Button Label  │  ← opacity-50
-└─────────────────────┘
-```
----
-## Validation Checklist
-- [ ] All colors use tokens (no hardcoded hex)
-- [ ] All spacing uses scale (no hardcoded px)
-- [ ] Contrast ratios meet WCAG AA
-- [ ] Focus states visible
-- [ ] Keyboard navigation works
-- [ ] Screen reader announces correctly
-- [ ] Transitions are smooth (200ms)
-- [ ] Loading state implemented
-- [ ] Disabled state implemented
-- [ ] All size variants implemented
-- [ ] All style variants implemented
----
-## Change Log
-| Version | Date | Changes |
-|---------|------|---------|
-| 1.0.0 | {DATE} | Initial spec |
----
-*Spec generated by Brad - Design System Architect*