medesign 0.0.0-stage → 1.2.0

package/references/logo-design.md

@@ -0,0 +1,110 @@
+# Logo Design Reference
+
+AI-powered logo design with 55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana is the default provider; Atlas Cloud and MuAPI are also available as explicit opt-in providers.
+
+## Scripts
+
+| Script | Purpose |
+|--------|---------|
+| `scripts/logo/search.py` | Search styles, colors, industries; generate design briefs |
+| `scripts/logo/generate.py` | Generate logos with Gemini Nano Banana, Atlas Cloud, or MuAPI |
+| `scripts/logo/core.py` | BM25 search engine for logo data |
+
+## Commands
+
+### Design Brief (Start Here)
+
+```bash
+python3 scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
+```
+
+### Search Domains
+
+```bash
+# Styles
+python3 scripts/logo/search.py "minimalist clean" --domain style
+
+# Color palettes
+python3 scripts/logo/search.py "tech professional" --domain color
+
+# Industry guidelines
+python3 scripts/logo/search.py "healthcare medical" --domain industry
+```
+
+### Generate Logo
+
+**ALWAYS** use white background for output logos.
+
+```bash
+python3 scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
+python3 scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
+python3 scripts/logo/generate.py --brand "TechFlow" --provider atlas
+python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi
+python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi --muapi-model nano-banana-pro
+```
+
+Options: `--style`, `--industry`, `--prompt`, `--provider`, `--atlas-model`, `--muapi-model`
+
+## Available Styles
+
+| Category | Styles |
+|----------|--------|
+| General | Minimalist, Wordmark, Lettermark, Pictorial Mark, Abstract Mark, Mascot, Emblem, Combination Mark |
+| Aesthetic | Vintage/Retro, Art Deco, Luxury, Playful, Corporate, Organic, Neon, Grunge, Watercolor |
+| Modern | Gradient, Flat Design, 3D/Isometric, Geometric, Line Art, Duotone, Motion-Ready |
+| Clever | Negative Space, Monoline, Split/Fragmented, Responsive/Adaptive |
+
+## Color Psychology
+
+| Color | Psychology | Best For |
+|-------|------------|----------|
+| Blue | Trust, stability | Finance, tech, healthcare |
+| Green | Growth, natural | Eco, wellness, organic |
+| Red | Energy, passion | Food, sports, entertainment |
+| Gold | Luxury, premium | Fashion, jewelry, hotels |
+| Purple | Creative, innovative | Beauty, creative, tech |
+
+## Industry Defaults
+
+| Industry | Style | Colors | Typography |
+|----------|-------|--------|------------|
+| Tech | Minimalist, Abstract | Blues, purples, gradients | Geometric sans |
+| Healthcare | Professional, Line Art | Blues, greens, teals | Clean sans |
+| Finance | Corporate, Emblem | Navy, gold | Serif or clean sans |
+| Food | Vintage Badge, Mascot | Warm reds, oranges | Friendly, script |
+| Fashion | Wordmark, Luxury | Black, gold, white | Elegant serif |
+
+## Workflow
+
+1. Generate design brief → `scripts/logo/search.py --design-brief`
+2. Generate logo variations → `scripts/logo/generate.py --brand --style --industry`
+3. Ask user about HTML preview → `AskUserQuestion` tool
+4. If yes, use the bundled `ui-ux-pro-max` skill for the HTML gallery
+
+## Detailed References
+
+- `references/logo-style-guide.md` - Detailed style descriptions
+- `references/logo-color-psychology.md` - Color meanings and combinations
+- `references/logo-prompt-engineering.md` - AI generation prompts
+
+## Setup
+
+```bash
+export GEMINI_API_KEY="your-key"
+pip install google-genai
+
+# Optional Atlas Cloud provider (no extra Python package required)
+export ATLASCLOUD_API_KEY="your-key"
+
+# Optional MuAPI provider (no extra Python package required)
+export MUAPI_API_KEY="your-key"
+```
+
+MuAPI uses the asynchronous model endpoint and prediction result API. See the
+[MuAPI API reference](https://muapi.ai/docs/api-reference) for authentication
+and the [nano-banana model contract](https://api.muapi.ai/api/v1/models/nano-banana)
+or [nano-banana-pro model contract](https://api.muapi.ai/api/v1/models/nano-banana-pro)
+for the current model-specific schemas. The logo generator supports both documented
+model slugs and sends their shared required `prompt` plus optional `aspect_ratio`
+fields; the Pro model also accepts an optional `resolution` field that this focused
+logo workflow leaves at the provider default.

package/references/logo-prompt-engineering.md

@@ -0,0 +1,158 @@
+# Logo AI Prompt Engineering
+
+## Core Prompt Structure
+
+```
+Professional logo design for [brand/industry]:
+[Visual description]
+Style: [style keywords]
+Colors: [color palette]
+Requirements: [technical specs]
+```
+
+## Effective Keywords by Style
+
+### Minimalist
+```
+minimalist, clean lines, simple geometric shapes, essential elements only,
+high white space, flat design, single color, modern, uncluttered,
+negative space, subtle, refined
+```
+
+### Vintage/Retro
+```
+vintage, retro, heritage, established, classic, nostalgic, weathered,
+distressed texture, badge style, hand-lettered, craft, artisan,
+sepia tones, muted colors, aged paper effect
+```
+
+### Luxury/Premium
+```
+luxury, elegant, sophisticated, premium, refined, exclusive, high-end,
+gold accents, metallic, minimal, tasteful, upscale, prestige,
+thin lines, serif typography, foil effect
+```
+
+### Modern/Tech
+```
+modern, innovative, digital, tech-forward, sleek, futuristic,
+gradient colors, geometric, abstract, dynamic, cutting-edge,
+clean sans-serif, circuit-like, data visualization
+```
+
+### Playful/Fun
+```
+playful, fun, colorful, friendly, approachable, cheerful, whimsical,
+bouncy, rounded shapes, bright colors, cartoon-like, energetic,
+bubbly, hand-drawn elements
+```
+
+### Organic/Natural
+```
+organic, natural, flowing, botanical, eco-friendly, sustainable,
+earth tones, leaf elements, hand-drawn, imperfect lines, growth,
+green, nature-inspired, biophilic
+```
+
+## Negative Prompts (What to Avoid)
+
+Always include to prevent unwanted results:
+```
+NOT: photorealistic, 3D render with realistic textures, photograph,
+stock image, clip art, multiple logos, busy background, text watermarks,
+low quality, blurry, distorted, complex detailed patterns
+```
+
+## Industry-Specific Prompts
+
+### Tech Startup
+```
+Modern tech company logo, abstract geometric mark, gradient blue to purple,
+clean minimal design, innovative feel, scalable vector style,
+professional quality, silicon valley aesthetic
+```
+
+### Healthcare
+```
+Healthcare medical logo, clean professional design, cross or heart symbol,
+calming blue and teal colors, trustworthy appearance, caring feel,
+simple scalable mark, HIPAA-appropriate conservative style
+```
+
+### Restaurant/Food
+```
+Restaurant logo, warm inviting colors, appetizing feel, vintage badge style,
+chef or utensil iconography, friendly welcoming design, rustic charm,
+established look, readable at small sizes
+```
+
+### Fashion Brand
+```
+Fashion brand logo, elegant sophisticated wordmark, luxury aesthetic,
+black and gold color scheme, thin refined typography, haute couture feel,
+minimal exclusive design, high-end positioning
+```
+
+### Eco/Sustainable
+```
+Eco-friendly sustainable brand logo, organic natural elements, leaf motif,
+earth green and brown colors, growth symbolism, environmental awareness,
+clean modern yet natural feel, recyclable-look design
+```
+
+## Technical Requirements to Include
+
+### Scalability
+```
+vector-style, scalable at any size, clear silhouette,
+works as favicon, recognizable small scale, simple shapes
+```
+
+### Versatility
+```
+works on light and dark backgrounds, single color version possible,
+horizontal and stacked layouts, brand mark can stand alone
+```
+
+### Quality
+```
+professional quality, print-ready, high resolution,
+crisp edges, balanced composition, centered design
+```
+
+## Prompt Templates
+
+### Quick Generation
+```
+Professional [industry] logo, [style] design, [color] colors,
+clean modern aesthetic, scalable vector style
+```
+
+### Detailed Brief
+```
+Professional logo design for [brand name], a [industry] company.
+
+Visual style: [style keywords]
+Primary colors: [hex codes]
+Mood: [emotional keywords]
+Symbols: [iconography hints]
+
+Technical: Vector-style illustration, scalable, works in single color,
+centered on plain background, no text unless specified.
+```
+
+### Variation Request
+```
+Alternative version of [brand] logo:
+Keep: [elements to preserve]
+Change: [elements to modify]
+Style direction: [new style keywords]
+```
+
+## Common Pitfalls
+
+1. **Too detailed** - AI generates complexity; request "simple"
+2. **Unclear background** - Specify "plain white background"
+3. **Text issues** - AI struggles with text; generate mark separately
+4. **Wrong aspect** - Specify "1:1 square" or "horizontal"
+5. **Realistic style** - Add "illustration, vector-style, not photorealistic"

package/references/logo-style-guide.md

@@ -0,0 +1,109 @@
+# Logo Style Guide
+
+## Core Logo Types
+
+### 1. Wordmark (Logotype)
+Text-only logo using custom typography.
+- **Best for:** Established brands, distinctive names
+- **Examples:** Google, Coca-Cola, FedEx
+- **Typography:** Custom letterforms, unique kerning
+- **Tip:** Name must be memorable and pronounceable
+
+### 2. Lettermark (Monogram)
+Initials or abbreviated letters.
+- **Best for:** Long company names, professional firms
+- **Examples:** IBM, HBO, NASA
+- **Typography:** Bold geometric sans-serif
+- **Tip:** Works well for brands with 2-4 letter abbreviations
+
+### 3. Pictorial Mark (Brand Mark)
+Standalone icon or symbol.
+- **Best for:** Global brands with recognition
+- **Examples:** Apple, Twitter, Target
+- **Design:** Simple, scalable, memorable shape
+- **Tip:** Requires brand equity to work alone
+
+### 4. Abstract Mark
+Non-representational geometric shapes.
+- **Best for:** Tech companies, differentiating brands
+- **Examples:** Pepsi, Airbnb, Spotify
+- **Design:** Unique shape conveying brand values
+- **Tip:** Can represent complex ideas simply
+
+### 5. Mascot
+Character representing the brand.
+- **Best for:** Family brands, sports teams, food
+- **Examples:** KFC, Pringles, Michelin
+- **Design:** Friendly, expressive, versatile
+- **Tip:** Can evolve with brand while maintaining recognition
+
+### 6. Emblem
+Symbol enclosed within a shape.
+- **Best for:** Traditional brands, organizations
+- **Examples:** Starbucks, Harley-Davidson, NFL
+- **Design:** Badge, seal, or crest style
+- **Tip:** May have scalability challenges
+
+### 7. Combination Mark
+Icon + text in unified design.
+- **Best for:** New brands, versatile applications
+- **Examples:** Burger King, Lacoste, Doritos
+- **Design:** Lockup with flexible arrangements
+- **Tip:** Most versatile, can separate elements later
+
+## Aesthetic Styles
+
+### Minimalist
+- Clean lines, essential elements only
+- High white space, simple geometry
+- Limited color palette (1-2 colors)
+- **Use:** Tech, professional services, modern brands
+
+### Vintage/Retro
+- Nostalgic, heritage feel
+- Distressed textures, muted colors
+- Script or slab serif typography
+- **Use:** Craft brands, artisan products
+
+### Luxury/Premium
+- Elegant, refined aesthetic
+- Gold, black, white color scheme
+- Thin serifs or sophisticated sans
+- **Use:** Fashion, jewelry, high-end services
+
+### Geometric
+- Mathematical precision
+- Circles, triangles, squares
+- Perfect symmetry
+- **Use:** Architecture, tech, modern brands
+
+### Organic/Natural
+- Flowing, imperfect lines
+- Earth tones, natural colors
+- Hand-drawn feel
+- **Use:** Eco brands, wellness, organic products
+
+### Gradient/Modern
+- Color transitions, vibrant palettes
+- Dimensional depth
+- Contemporary feel
+- **Use:** Apps, tech startups, digital products
+
+## Style Selection Matrix
+
+| Brand Type | Primary Style | Secondary Options |
+|------------|---------------|-------------------|
+| Tech Startup | Minimalist, Abstract | Geometric, Gradient |
+| Law Firm | Wordmark, Emblem | Lettermark |
+| Restaurant | Mascot, Badge | Vintage, Combination |
+| Fashion | Wordmark, Luxury | Monogram, Line Art |
+| Healthcare | Professional, Line Art | Abstract, Combination |
+| Non-Profit | Combination, Emblem | Organic, Hand-Drawn |
+
+## Scalability Checklist
+
+- [ ] Recognizable at 16x16 pixels (favicon)
+- [ ] Clear at business card size
+- [ ] Works in single color
+- [ ] Maintains clarity in black/white
+- [ ] No tiny details that disappear when scaled

package/references/mesurv-dna.md

@@ -0,0 +1,104 @@
+## 6. Locked DNA Profile (MESURV — Confirmed 2026-09-29)
+
+**Selection Journey:**
+- Round 1: 30 styles → 13 favorites (#2,6,7,8,18,19,21,23,26,27,28,29,30)
+- Round 2 (Blind): 12 hybrids → 7 favorites (B,C,D,F,G,K,L)
+- Round 3 (Layout): L1,L3,L5,L6 (all no-sidebar) + Themes T1+T3
+- Final Champions: Beta (L6 Dashboard Tabs) + Gamma (L1 Top Nav) → FUSION selected
+
+**Final Layout DNA (Fusion):**
+- **Pattern:** NO fixed left sidebar — top navigation bar only
+- **Primary:** Tab-based switching (5 tabs: Knowledge | Calculator | WebGIS | Report | Settings)
+- **Tab indicator:** thin 2px underline on active tab (NOT box, NOT pill)
+- **Logo zone:** top-left in nav bar
+- **Content:** full-width, max-w-6xl, centered, no sidebar
+- **Overview section:** hero 2-col split (title+CTA left, 4 metric cards right) + 3-col knowledge card grid below
+
+**Final Theme DNA — DUAL THEME SYSTEM:**
+
+**Theme 1: `fieldbook` (Light — primary daytime)**
+- **Mood:** Warm paper, daylight field survey, editorial clean
+- **Tokens:**
+  - `bg`: `#f3f1eb` | `surface`: `#ffffff` | `surface2`: `#eceae4`
+  - `border`: `rgba(20,36,27,0.14)` | `borderStrong`: `rgba(20,36,27,0.5)`
+  - `text1`: `#14241b` | `text2`: `#43544a` | `text3`: `#78877d`
+  - `accent`: `#15803d` | `accent2`: `#b45309` | `accentText`: `#ffffff`
+  - `cardRadius`: `12px` | `btnRadius`: `8px`
+  - `shadow`: `0 2px 8px rgba(20,36,27,0.07)` | `backdrop`: `none`
+  - `fontHeading`: `'Plus Jakarta Sans', sans-serif` (Weight: `700`)
+  - `fontBody`: `'Plus Jakarta Sans', sans-serif`
+  - `fontMono`: `'Geist Mono', monospace`
+
+**Theme 2: `terminal` (Dark — nighttime/data processing)**
+- **Mood:** Carbon monochrome, dark evergreen, precision instrument
+- **Tokens:**
+  - `bg`: `#050505` | `surface`: `#111111` | `surface2`: `#0a0a0a`
+  - `border`: `#262626` | `borderStrong`: `#3d3d3d`
+  - `text1`: `#ffffff` | `text2`: `#a3a3a3` | `text3`: `#525252`
+  - `accent`: `#34d399` | `accent2`: `#fcd535` | `accentText`: `#000000`
+  - `cardRadius`: `2px` | `btnRadius`: `2px`
+  - `shadow`: `none` | `backdrop`: `none`
+  - `fontHeading`: `'Plus Jakarta Sans', sans-serif` (Weight: `700`)
+  - `fontBody`: `'Plus Jakarta Sans', sans-serif`
+  - `fontMono`: `'Geist Mono', monospace`
+
+**Anti-Patterns (What to AVOID):**
+- No fixed left sidebar in MESURV
+- No frosted glass / backdrop-blur effects (solid surfaces only)
+- No gradient backgrounds (flat color only)
+- No box/pill-style active tab indicators (use underline 2px)
+- No emoji in section headings
+- No heavy drop shadows
+- No cliché AI palettes (white-orange, indigo-purple gradients)
+- No marketing fluff in workspace tools
+- No hover bounce/scale animations
+
+**Positive Principles (What TO DO):**
+- Controls placed near their content
+- Verbs over nouns for button labels
+- Monospace (Geist Mono) for all coordinates, numbers, technical codes
+- Tabular-nums for metric displays
+- Difficulty badges: BEGINNER/CORE/ADVANCED with subtle tinted backgrounds
+- RTSD READY badge with pulsing dot
+- Two-theme system: user can toggle fieldbook ↔ terminal with `data-theme` on `<html>`
+- All tokens via CSS custom properties (`--bg`, `--surface`, `--accent`, etc.)
+- Tab switching via vanilla JS toggling `.hidden` class
+- Persist theme choice in localStorage
+
+> **Workflow Note:** When user invokes `/medesign` for MESURV project, apply these tokens directly. Do NOT re-run selection rounds. Start from Fusion layout.
+> **Reference note:** Lab files at `medesign-tuner/styles/champion-fusion.html` for reference
+
+---
+
+## 8. MeBoard Converged Component DNA & Locked Auto-Blueprints (`FINAL-01` & `FINAL-02` — Confirmed 2026-09-30)
+
+> **🎯 STATUS: AUTO_BLUEPRINT_LOCKED**
+> ผู้ใช้ยืนยันล็อกโครงสร้างอย่างเป็นทางการแล้ว: **`FINAL-01`** และ **`FINAL-02`** คือแม่แบบหลักถาวรสำหรับคำสั่ง `/medesign auto` (ไม่ต้องถามเลือกใหม่อีก):
+> - **ใช้ `FINAL-01` (Editorial 3:6:3 Three-Column Command):** สำหรับหน้าจอวิเคราะห์เชิงลึกที่ต้องการอ่านสภาวะตลาด (Macro Briefing) + ดูกราฟตรงกลาง + ตรวจสเปกคำสั่งเทรดทางขวาไปพร้อมกัน
+> - **ใช้ `FINAL-02` (Asymmetric 8:4 Split + Bento KPI Strip):** สำหรับหน้าจอแดชบอร์ดภาพรวม (Cockpit) ที่ต้องการเน้นการ์ดมาตรวัดสรุปผล (Bento KPI Strip) ด้านบน และแบ่งกราฟใหญ่คู่กล่องสัญญาณด้านล่าง
+
+**ชิ้นส่วนที่ล็อกเข้าชุดสมบูรณ์ (Locked Component Inventory):**
+- **Locked Navbar & Macro Ticker (`MB-03`):** Dual-Deck Editorial Masthead + แถบราคาสด Macro Benchmark Tape (`XAU/USD`, `BTC`, `ETH`, `WTI`, `QQQ`, `SET`, `USD/THB`) + แท็บขีดเส้นใต้ `2px` (`MB-06`) ไร้แถบซ้าย + สวิตช์สลับธีมสด
+- **Locked Card & Box Anatomy (`MB-03 + MB-04 + MB-05`):**
+  - ขอบคม `1px solid` + **แถบสีคาดด้านบนหนา `3px solid` (`MB-03`)** บนการ์ดหลักทุกใบ + เงา Tactile Offset คมบาง `2px` (`MB-04`)
+  - **เส้นปะฉีกตั๋ว (`border-dashed` จาก `MB-04`)** คั่นระหว่างโซนข้อมูลด้านบนกับโซนคำสั่ง/สรุปด้านล่างในการ์ดตั๋ว
+  - **Floating Translucent HUD Pod (`MB-05`)** (`backdrop-filter: blur(16px)`) ลอยทับบนมุมกราฟเพื่อแสดง `Regime`, `CONF/VOL`, และ `Tactical Directive`
+- **Locked Execution Setup Box (`MB-07 + MB-08`):**
+  - ตัวเลขราคาขนาดใหญ่ `32px–42px` (`Geist Mono tabular-nums` จาก `MB-08`) + **หลอดวัดระยะ `SL ──●────── TP` (`MB-08`)**
+  - **ตารางคำสั่งเทรด 4 ช่อง (`MB-07`):** `Optimal Entry`, `Take Profit (TP %)`, `Stop Loss (SL %)`, และ `R:R · 1% Bankroll Risk Size`
+  - **เช็กลิสต์โครงสร้าง `SMC × ICT` (`MB-07`):** `BOS`, `CHoCH`, `FVG CE 50%`, `Dealing Range EQM 50%`
+  - **หลอดวัดแรงซื้อขาย `L2 Order Book Imbalance` (`MB-07`):** แถบแนวนอนแสดงสัดส่วน `68% Bid / 32% Ask` พร้อมปุ่ม `📤 Copy TG Signal`
+- **Locked Chart & Data Table (`MB-06`):**
+  - กราฟแท่งเทียน SVG พร้อมโซนแรเงา `4H FVG`, `Order Block`, เส้นประ `TP / Entry / SL` และปุ่มสลับ Timeframe `15m | 1H | 4H | 1D`
+  - ตารางสแกนสัญญาณ (Big Five + Altcoin Volatility Radar) ที่มีปุ่มกรอง `ALL | BUY | SELL | STRONG | SQUEEZE` + จุด `1H ● 4H ● 1D ●` วางคู่กับตารางบันทึกผล `WIN / LOSS / STALE` (`56.8% Win Rate · +1.34R · Paper Bot +6.4R MTD`)
+- **Locked Dual-Theme System (`MB-03 × MB-06 × MB-08 × MB-09`):**
+  1. **Theme 1 (`editorial-paper`):** พื้นหลังกระดาษครีมอุ่น `#f6f2e9` (`#efeadd` masthead), การ์ดขาวคม `#ffffff`, ผิวทำงานแอ็กทีฟ `--surface-active: #eef7f1`, สีเน้นเขียว Forest `#0f6b32` (`6.66:1` บน `#ffffff`, `5.52:1` บน masthead `#efeadd`) & ทอง Ochre `#92400e` (`7.12:1` AAA บน `#ffffff`, `5.90:1` บน `#efeadd`), ฟอนต์หัวข้อ `Fraunces` Serif + `Plus Jakarta Sans` + `Geist Mono`
+  2. **Theme 2 (`velvet-obsidian`):** พื้นหลังดำกำมะหยี่ `#09090f` (`#050505`) พร้อมแสง Ambient Radial จางๆ (ทอง `#f2b33d`/คอปเปอร์ `#cc785c` + คราม `#6366f1`), การ์ด `#11131c`, ผิวทำงานแอ็กทีฟ `--surface-active: #122422`, สีเน้นเขียว `#34d399` & ทอง `#f2b33d`
+- **4 Finalist Prototypes ในคลังอ้างอิง:**
+  - `FINAL-01` (`/final/1`): **Editorial 3:6:3 Three-Column Command** *(Auto-Default Primary A)*
+  - `FINAL-02` (`/final/2`): **Asymmetric 8:4 Split + Bento KPI Strip** *(Auto-Default Primary B)*
+  - `FINAL-03` (`/final/3`): **Master–Detail 45:55 Synchronized Scanner** *(Reference)*
+  - `FINAL-04` (`/final/4`): **Fusion Underline-Tab & Executive Stream** *(Reference)*
+
+---
+

package/references/micro-interactions-and-auto-animate.md

@@ -0,0 +1,71 @@
+# Micro-Interactions & AutoAnimate Layout Protocol
+
+ระเบียบวิธีการใส่ลูกเล่นการเคลื่อนไหว (Micro-Interactions) และการเปลี่ยนผ่านเลย์เอาต์ที่ลื่นไหลระดับสากล (ดัดแปลงจากโมเดลของ `FormKit AutoAnimate` และ `Framer Motion`) เพื่อยกระดับความรู้สึกพรีเมียม (Tactile Delight) ให้กับหน้าเว็บและแดชบอร์ด โดยไม่เพิ่มความซับซ้อนของโค้ดและรองรับ Accessibility 100%
+
+---
+
+## 1. ปัญหาของ UI ที่กระตุกกระด้าง (Stiff Layout Transitions)
+
+การขาด Micro-Interactions ทำให้เว็บดูราคาถูกและแข็งกระด้าง:
+1. **Sudden DOM Snapping**: เมื่อเพิ่มแถวตาราง ลบการ์ด หรือสลับ Tab หน้าจอจะกระตุกเปลี่ยนทันที ทำให้ผู้ใช้สูญเสียการรับรู้ตำแหน่ง (Spatial Context)
+2. **Animation Bloat**: การเขียน CSS Animation เองทุกจุดก่อให้เกิดโค้ดซ้ำซ้อนและกระตุกบนอุปกรณ์สเปกต่ำ
+3. **Motion Sickness**: ขาดการรองรับผู้ใช้ที่มีภาวะไวต่อการเคลื่อนไหว (`prefers-reduced-motion`)
+
+---
+
+## 2. พลังของ Zero-Config Drop-in Animation (AutoAnimate Pattern)
+
+`@formkit/auto-animate` มอบการเคลื่อนไหวระดับสตูดิโอให้ทุกจุดใน DOM ด้วยโค้ดเพียงบรรทัดเดียว:
+
+```typescript
+import { useAutoAnimate } from '@formkit/auto-animate/react';
+
+export function OrderList({ orders }) {
+  // บังคับการเคลื่อนไหวที่ลื่นไหลทันทีที่มีการ Add/Remove/Sort รายการ
+  const [parentRef] = useAutoAnimate({ duration: 250, easing: 'ease-out' });
+
+  return (
+    <div ref={parentRef} className="space-y-3">
+      {orders.map(order => (
+        <OrderCard key={order.id} order={order} />
+      ))}
+    </div>
+  );
+}
+```
+
+---
+
+## 3. สถาปัตยกรรม Micro-Interactions 4 มิติ
+
+```mermaid
+flowchart LR
+    Hover["1. Tactile Hover (Subtle Scale 1.02 + Soft Shadow)"]
+    Press["2. Active Press (Spring Downscale 0.98)"]
+    Entry["3. Enter / Exit (Smooth Slide-Fade)"]
+    Layout["4. Layout Reordering (AutoAnimate FLIP Technique)"]
+```
+
+### 1. Tactile Feedback on Buttons & Cards
+- **Hover State**: ยกการ์ดลอยขึ้นเบาๆ (`transform: translateY(-2px)`, `box-shadow` นุ่มนวลขึ้น)
+- **Active State**: ยุบตัวลงตามแรงกดเสมือนปุ่มจริง (`scale-98`)
+- **Transitions**: ใช้ Spring Curve `cubic-bezier(0.16, 1, 0.3, 1)` (Apple/Linear standard)
+
+### 2. Layout Morphing (FLIP Technique)
+- เมื่อมีการ Reorder หรือ Filter ข้อมูล การ์ดต้องสไลด์ไปยังตำแหน่งใหม่อย่างต่อเนื่อง ไม่ใช่หายไปแล้วโผล่ใหม่
+
+---
+
+## 4. กฎเหล็กด้านการเข้าถึง (Accessibility Invariant)
+
+ต้องมี Media Query ปิดการเคลื่อนไหวเมื่อผู้ใช้เปิดโหมดลดการเคลื่อนไหวเสมอ:
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, ::before, ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```