@jaimevalasek/aioson 1.3.0 → 1.4.0

package/template/.aioson/skills/design/cognitive-core-ui/references/motion.md

@@ -0,0 +1,237 @@
+# Motion — Cognitive Core UI
+
+Read after `design-tokens.md`. Add to context only when motion materially improves the result.
+
+Motion is **purposeful and restrained**. Dashboards use minimal motion. Landing pages use more dramatic entrances and scroll effects.
+
+---
+
+## Principles
+
+1. **Functional first** — every animation communicates state change or hierarchy
+2. **Fast transitions** — UI state: 140ms. Theme: 240ms. Entrances: 400–600ms
+3. **Ease curves** — default `ease`. Entrances: `cubic-bezier(0.16, 1, 0.3, 1)` (smooth decelerate)
+4. **No bounce, no elastic** — this is a command center, not a toy
+5. **Always include** `@media (prefers-reduced-motion: reduce)` fallback
+
+---
+
+## CSS Keyframes
+
+```css
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeInDown {
+  from { opacity: 0; transform: translateY(-12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes pulseGlow {
+  0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
+  50%       { box-shadow: var(--shadow-glow-strong); }
+}
+@keyframes shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+@keyframes progressFill {
+  from { width: 0%; }
+}
+@keyframes countUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Reduced motion fallback */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+## Entrance Patterns
+
+### Dashboard Page Load (staggered)
+
+```
+Top bar:    fadeInDown   0ms    300ms
+Stats row:  fadeInUp   100ms   400ms  (each card +80ms delay)
+Tab bar:    fadeIn     250ms   300ms
+Sidebar:    slideInLeft 200ms  400ms
+Content:    fadeInUp   350ms   500ms  (each card in grid +60ms stagger)
+```
+
+**React helper:**
+```jsx
+const stagger = (index, base = 0, step = 60) => ({
+  animation: `fadeInUp 500ms cubic-bezier(0.16, 1, 0.3, 1) ${base + index * step}ms both`,
+});
+// Usage on each card: style={{ ...stagger(cardIndex, 350) }}
+```
+
+### Landing Page Hero
+
+```
+Mono label:  fadeInUp    0ms   500ms
+Heading:     fadeInUp  150ms   600ms
+Subtitle:    fadeInUp  300ms   500ms
+CTA buttons: fadeInUp  450ms   500ms
+```
+
+### Modal
+
+```css
+.modal-backdrop { animation: fadeIn 200ms ease both; }
+.modal-content  { animation: scaleIn 300ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+```
+
+---
+
+## Hover Effects
+
+### Card Hover
+
+```jsx
+onMouseEnter={e => {
+  e.currentTarget.style.borderColor = 'var(--border-medium)';
+  e.currentTarget.style.boxShadow = 'var(--shadow-glow)';
+  e.currentTarget.style.transform = 'translateY(-2px)';
+}}
+onMouseLeave={e => {
+  e.currentTarget.style.borderColor = '';
+  e.currentTarget.style.boxShadow = 'none';
+  e.currentTarget.style.transform = '';
+}}
+```
+
+Card must have: `transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease`
+
+### Button Hover
+```
+Primary: background → var(--accent-hover)
+Secondary: borderColor → var(--border-accent), color → var(--text-accent)
+transition: 150ms ease
+```
+
+### Tab Hover (non-active)
+`background: var(--bg-elevated)`, `border-radius: var(--radius-md) var(--radius-md) 0 0`
+
+### Sidebar Item Hover
+`background: var(--bg-elevated)`, `color: var(--text-primary)`
+
+---
+
+## Loading States
+
+### Skeleton Shimmer
+
+```jsx
+const skeletonStyle = {
+  background: `linear-gradient(90deg,
+    var(--bg-elevated) 25%,
+    var(--bg-overlay) 50%,
+    var(--bg-elevated) 75%)`,
+  backgroundSize: '200% 100%',
+  animation: 'shimmer 1.5s ease-in-out infinite',
+  borderRadius: 'var(--radius-md)',
+};
+// Usage: <div style={{ ...skeletonStyle, height: 20, width: '60%', marginBottom: 8 }} />
+```
+
+### Pulse Glow (Mode Panel when active)
+```css
+animation: pulseGlow 3s ease-in-out infinite;
+```
+
+### Progress Bar Fill (on mount)
+```css
+animation: progressFill 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
+```
+
+### Stat Number Count-up
+```css
+animation: countUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
+```
+
+---
+
+## Scroll-Triggered Animations (Landing Pages)
+
+```jsx
+function useScrollReveal(ref, delay = 0) {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const obs = new IntersectionObserver(
+      ([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } },
+      { threshold: 0.15 }
+    );
+    if (ref.current) obs.observe(ref.current);
+    return () => obs.disconnect();
+  }, []);
+  return {
+    opacity: visible ? 1 : 0,
+    transform: visible ? 'translateY(0)' : 'translateY(24px)',
+    transition: `opacity 600ms cubic-bezier(0.16,1,0.3,1) ${delay}ms,
+                 transform 600ms cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
+  };
+}
+
+// Usage:
+const ref = useRef(null);
+const reveal = useScrollReveal(ref, 100);
+<div ref={ref} style={reveal}>...</div>
+```
+
+**CSS-only alternative (no JS):**
+```css
+.reveal {
+  opacity: 0; transform: translateY(24px);
+  transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1);
+}
+.reveal.visible { opacity: 1; transform: translateY(0); }
+```
+
+---
+
+## Theme Transition
+
+Apply to ALL themed containers so dark/light switch feels smooth:
+
+```jsx
+const TT = { transition: 'background 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease' };
+// Or in CSS: transition: var(--transition-theme);
+```
+
+---
+
+## When to Use What
+
+| Context | Level | Techniques |
+|---|---|---|
+| Dashboard | Minimal | Card hover, tab switch, theme transition, progress fill |
+| Landing page | Moderate | Staggered entrances, scroll reveals, hero sequence, card hovers |
+| Frontpage | Moderate | Hero entrance, scroll reveals, CTA glow pulse |
+| Modal/Detail | Light | scaleIn entrance, fadeIn backdrop |
+| Loading state | Ambient | Skeleton shimmer, pulse glow |
+| Admin CRUD | None/minimal | Only theme transition + hover states |

package/template/.aioson/skills/design/cognitive-core-ui/references/patterns.md

@@ -0,0 +1,289 @@
+# Patterns — Page Layouts (Cognitive Core UI)
+
+Requires `design-tokens.md` + `components.md` loaded first.
+
+These patterns define how to compose full pages. All use CSS variables from design-tokens.md.
+
+---
+
+## 1. Dashboard Shell
+
+The base layout for any admin/overview interface.
+
+```
+┌────────────────────────────────────────────────────────┐
+│  TOP BAR (sticky, bg-void, border-bottom)              │
+├────────────────────────────────────────────────────────┤
+│  STATS ROW: [StatCard] [StatCard] [StatCard] [StatCard]│
+├────────────────────────────────────────────────────────┤
+│  TAB BAR (full width, border-bottom)                   │
+├───────────┬────────────────────────────────────────────┤
+│ SIDEBAR   │  CONTENT                                   │
+│ 200px     │  ┌─ Section Header ──────────────────┐    │
+│ tree nav  │  │ Card Grid (auto-fill, 260px min)  │    │
+│           │  └───────────────────────────────────┘    │
+│           │  ┌─ Section Header ──────────────────┐    │
+│           │  │ Card Grid                         │    │
+│           │  └───────────────────────────────────┘    │
+└───────────┴────────────────────────────────────────────┘
+```
+
+**CSS skeleton:**
+```css
+.shell { min-height: 100vh; background: var(--bg-base); font-family: var(--font-body); }
+.stats-row { display: flex; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; flex-wrap: wrap; }
+.main-layout { display: flex; min-height: calc(100vh - 230px); }
+.sidebar { width: 200px; flex-shrink: 0; border-right: 1px solid var(--border-subtle); padding: var(--space-4); transition: var(--transition-theme); }
+.content { flex: 1; padding: var(--space-4) var(--space-5); overflow-y: auto; }
+.card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+.section { margin-bottom: var(--space-8); }
+```
+
+**Variant — with feature panels (2-col below stats):**
+```css
+.feature-row { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
+```
+
+---
+
+## 2. Detail / Profile Page
+
+For viewing a single entity (person, product, contact, project).
+
+```
+┌────────────────────────────────────────────────────────┐
+│  TOP BAR                                               │
+├────────────────────────────────────────────────────────┤
+│  Breadcrumbs: Gallery → Entity Name                    │
+│  PROFILE HEADER                                        │
+│  ┌───────────────────────────────────────────────────┐ │
+│  │ [Avatar 96px] NAME (text-3xl, black)              │ │
+│  │               Role (accent, italic)               │ │
+│  │               ✦ Tagline                           │ │
+│  │                                                   │ │
+│  │  [StatCard] [StatCard] [StatCard]    [Badge][Badge]│ │
+│  └───────────────────────────────────────────────────┘ │
+├────────────────────────────────────────────────────────┤
+│  TAB BAR (Geral | DNA | Comunicação | Histórico | ...) │
+├───────────┬────────────────────────────────────────────┤
+│ SIDEBAR   │  TAB CONTENT                               │
+│ 180px     │  Varies per tab:                           │
+│           │  — Card grid (2-col)                       │
+│           │  — DNA analysis panels                     │
+│           │  — History table                           │
+└───────────┴────────────────────────────────────────────┘
+```
+
+**Profile Header styles:**
+```css
+.profile-header {
+  padding: var(--space-5) var(--space-6);
+  background: var(--bg-base);
+  border-bottom: 1px solid var(--border-subtle);
+  transition: var(--transition-theme);
+}
+.profile-avatar {
+  width: 96px; height: 96px;
+  border-radius: var(--radius-lg);
+  border: 2px solid var(--border-subtle);
+  object-fit: cover;
+}
+.profile-name {
+  font-family: var(--font-display); font-weight: var(--weight-black);
+  font-size: var(--text-3xl); color: var(--text-heading);
+  letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
+}
+.profile-role {
+  color: var(--accent); font-style: italic; font-size: var(--text-base);
+}
+.profile-tagline {
+  font-family: var(--font-mono); font-size: var(--text-xs);
+  color: var(--text-muted); letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+}
+.profile-stats { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
+.profile-badges { display: flex; gap: var(--space-2); align-items: center; }
+```
+
+**Featured quote block (inside tab content):**
+```css
+.quote-block {
+  padding: var(--space-8) var(--space-6);
+  text-align: center;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.quote-text {
+  font-family: var(--font-display); font-size: var(--text-xl);
+  font-weight: var(--weight-medium); font-style: italic;
+  color: var(--text-primary); line-height: var(--leading-snug);
+  max-width: 680px; margin: 0 auto;
+}
+.quote-attribution {
+  font-family: var(--font-mono); font-size: var(--text-xs);
+  color: var(--text-muted); letter-spacing: var(--tracking-wider);
+  text-transform: uppercase; margin-top: var(--space-3);
+}
+```
+
+---
+
+## 3. Settings / Config Page
+
+Apply the **Compact Density** scale from `design-tokens.md` throughout. Settings pages are operational UI, not marketing — no generous whitespace.
+
+```
+┌────────────────────────────────────────────────────────┐
+│  TOP BAR                                               │
+├───────────┬────────────────────────────────────────────┤
+│ SIDEBAR   │  SETTINGS TITLE (text-2xl, no description) │
+│           │                                            │
+│ General   │  ┌─ Entity grid ──────────────────────┐   │
+│ Security  │  │ [Card 280px] [Card 280px] [Card]    │   │ ← 3-col auto-fill
+│ Billing   │  │  name + ID + status badges          │   │
+│ Team      │  │  [Ativar btn] [Editar btn]          │   │
+│ API       │  └─────────────────────────────────────┘   │
+│           │                                            │
+│           │  ┌─ Section card (p-4 rounded-[22px]) ─┐   │
+│           │  │ eyebrow (mono xs) + title (text-base)│   │
+│           │  │ [row] dot · name  model  badges Editar│  │ ← divide-y py-2
+│           │  │ [row] dot · name  model  badges Editar│  │
+│           │  │  ▸ Sync / secondary tool (details)  │   │ ← collapsed
+│           │  └─────────────────────────────────────┘   │
+│           │                                            │
+│           │  ┌─ Danger Zone Card ──────────────────┐   │
+│           │  │ border: var(--semantic-red-dim)      │   │
+│           │  └─────────────────────────────────────┘   │
+└───────────┴────────────────────────────────────────────┘
+```
+
+**Page heading:** `text-2xl` max — no verbose description subtitle on the page header.
+
+**Entity cards (projects, providers, squads):**
+- Grid: `grid-cols-[repeat(auto-fill,minmax(280px,1fr))]`, `gap: var(--space-3)`
+- Card: `rounded-[18px] p-3`
+- Name: `text-sm font-semibold truncate`
+- ID: `font-mono text-[0.58rem] truncate`
+- Status badges: `px-2 py-0.5 text-[0.58rem]`
+- Actions: compact row at bottom — `py-1.5 text-[0.62rem]`
+
+**Add/Edit forms → Modal pattern (not inline expansion):**
+```
++ Adicionar button → opens modal (max-w-md, centered, backdrop)
+Editar button      → opens same modal pre-filled
+Never use accordion/RevealPanel inside entity cards
+```
+
+**Section cards (provider lists, license, LLM config):**
+- Card: `rounded-[22px] p-4`
+- Header row: eyebrow + title + right-side control (select, badge) in one flex row
+- File path or meta: `font-mono text-[0.62rem] truncate` — one line below title, no card for it
+- Row items: `divide-y divide-[border]` with `py-2`, `text-xs` names, `text-[0.65rem]` models
+- Edit button: `px-2.5 py-1 text-[0.65rem] rounded-xl`
+
+**Disclosure pattern for secondary tools:**
+```html
+<details class="rounded-[16px] border bg-elevated mt-3">
+  <summary> <!-- flex: label + status badge + action button in one row --> </summary>
+  <div class="border-t px-3 pb-3 pt-2">
+    <!-- compact diff rows or secondary form -->
+  </div>
+</details>
+```
+
+**Form inputs inside modals and cards:**
+- Input/Select: `px-3 py-2 text-xs rounded-xl`
+- Label: `text-[0.65rem] mb-0.5`
+- Submit button: `w-full px-3 py-2 text-xs rounded-xl`
+
+---
+
+## 4. Auth Page (Login / Register)
+
+```
+┌────────────────────────────────────────────────────────┐
+│           bg-void (full viewport, dark)                 │
+│                                                         │
+│         ┌─ Card max-w: 420px ─────────────────┐        │
+│         │  [Logo] AppName (mono, weight-bold)  │        │
+│         │  SUBTITLE (mono, xs, muted, upper)   │        │
+│         │                                      │        │
+│         │  MONO LABEL: EMAIL                   │        │
+│         │  [Input]                             │        │
+│         │  MONO LABEL: PASSWORD                │        │
+│         │  [Input]                             │        │
+│         │  [Primary Button: full width]        │        │
+│         │  divider ─── ou ───                  │        │
+│         │  [Secondary Button: OAuth]           │        │
+│         │  Link: esqueceu / criar conta        │        │
+│         └──────────────────────────────────────┘        │
+│         radial glow behind card (accent-glow)           │
+└────────────────────────────────────────────────────────┘
+```
+
+```css
+.auth-shell {
+  min-height: 100vh; background: var(--bg-void);
+  display: flex; align-items: center; justify-content: center;
+  position: relative;
+}
+.auth-glow {
+  position: absolute;
+  width: 600px; height: 600px; border-radius: 50%;
+  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
+  pointer-events: none;
+}
+.auth-card {
+  background: var(--bg-surface); border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xl); padding: var(--space-8);
+  width: 100%; max-width: 420px; position: relative; z-index: 1;
+}
+```
+
+---
+
+## 5. List-Detail (Split View)
+
+```
+┌────────────────────────────────────────────────────────┐
+│  TOP BAR                                               │
+├────────────────────────────────────────────────────────┤
+│  TAB BAR + Filter badges                               │
+├──────────────────────┬─────────────────────────────────┤
+│  LIST 340px          │  DETAIL PANEL (flex: 1)         │
+│  ┌──────────────┐    │  Profile Header (compact)       │
+│  │ Item (active)│◄───│  border-left: 3px accent        │
+│  ├──────────────┤    │  Stat Cards row                 │
+│  │ Item         │    │  Tab sub-navigation              │
+│  ├──────────────┤    │  Content (cards, table, DNA)    │
+│  │ Item         │    │                                 │
+│  └──────────────┘    │                                 │
+└──────────────────────┴─────────────────────────────────┘
+```
+
+```css
+.list-panel { width: 340px; flex-shrink: 0; border-right: 1px solid var(--border-subtle); overflow-y: auto; }
+.list-item { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: var(--transition-theme); }
+.list-item:hover { background: var(--bg-elevated); }
+.list-item.active { background: var(--bg-elevated); border-left: 3px solid var(--accent); }
+.detail-panel { flex: 1; overflow-y: auto; }
+```
+
+---
+
+## Responsive Rules (all patterns)
+
+```css
+@media (max-width: 768px) {
+  .main-layout { flex-direction: column; }
+  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-subtle); }
+  .card-grid { grid-template-columns: 1fr; }
+  .stats-row { flex-direction: column; }
+  .list-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border-subtle); }
+}
+@media (min-width: 768px) and (max-width: 1024px) {
+  .card-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (min-width: 1024px) {
+  .card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+}
+```