medesign 0.0.0-stage → 1.2.0

package/references/vocab-protocol.md

@@ -0,0 +1,52 @@
+## 7. World-Class 50+4 Category Vocabulary Vault & Smart Questioning / Auto-Inspector Protocol
+
+### 📚 คลังคำศัพท์และแม่แบบระดับโลกที่บันทึกในเครื่อง (50+4 หมวดหมู่ · 750+ คำศัพท์ & Patterns — ผู้ใช้ไม่ต้องจำศัพท์เอง)
+- **Markdown Reference:** `references/ui-ux-vocabulary-vault.md`
+- **Structured JSON:** `references/ui-ux-vocabulary-vault.json`
+- **Interactive Localhost Explorer:** `http://localhost:3333/vocab`
+- **ขอบเขตเนื้อหา 4 ชั้น (ครบ 50+4 หมวดหมู่):**
+  1. **หมวดที่ 1–20 (Core UI/UX Architecture):** Website Structure, Navigation, Layout, Spacing, UI Components, Information Components, Dashboard Design, Micro-interactions, Motion, Responsive, Typography, Visual Design, Design System, Modern UI Styles, UX Vocabulary, A11y, UX States, Web Layout Patterns, UX Patterns, Performance
+  2. **หมวดที่ 21–33 (Extended World-Class & WebGIS UI):** Advanced Visual Effects, Color System, Complete Interactive States Matrix, Advanced Layout Techniques, Data Visualization UI, **GIS-Specific UI (Map Canvas, Basemap, Vector/Raster Layers, Extent/Fit Bounds, Scale Bar, Spatial Query, Snapping/Vertex Editing)**, Premium UI Patterns, Modern Design Trends, Performance & Optimization, Detailed A11y, Design Handoff, Professional Jargon, AI Prompt-Friendly Terms
+  3. **หมวดที่ 34–50 (17 หมวดความรู้เสริม & Missing Mastery Patterns):**
+     - `34` Visual Rhythm & Eye-Tracking Flow (`F-Pattern`, `Z-Pattern`, `Layer-Cake`, `Spotted`, `Gutenberg Diagram`)
+     - `35` Grid Sophistication (`Compound 4+3 Grid`, `Asymmetric 8:4 / 7:5`, `Golden Ratio 1:1.618`, `Exposed 1px Swiss Grid`)
+     - `36` Typography Mastery (`1.200 / 1.250 Modular Scale`, `Tabular Lining Figures`, `Slashed Zero`, `text-wrap: balance`)
+     - `37` Color Psychology & `60-30-10` Rule (`60%` Canvas `#f3f1eb`/`#050505` : `30%` Surface `#fff`/`#111` : `10%` Accent `#15803d`/`#34d399`)
+     - `38` Spacing System (`8pt Spatial Grid` + `4pt Micro-Grid` + `Internal <= External Proximity Rule`)
+     - `39` Complete 9-State Component Checklist (`Default`, `Hover`, `Focus-Visible`, `Active scale(0.97)`, `Disabled`, `Loading`, `Empty + 1-Click Sample Loader`, `Error + Recovery`, `Success/Verified`)
+     - `40` Animation Principles (`150ms–200ms Micro-Response`, `GPU-Safe transform/opacity`, `Zero Hover Bounce`)
+     - `41` Professional Layout Terminology (`Above the Fold`, `Eyebrow/Kicker`, `Chrome vs Canvas Ratio 12:88`)
+     - `42` Advanced Interaction Patterns (`Synchronized Table ↔ Map Highlighting`, `Inline Direct Editing`, `Smart Excel/CSV Paste`)
+     - `43` Dashboard-Specific Patterns (`Co-located Action Bar`, `Pinned Summary/Misclosure Row`, `KPI with Tolerance Badge`)
+     - `44` Responsive Priority+ (`Priority+ Top Nav`, `Desktop Split → Mobile Tabs`, `Sticky Station Column`)
+     - `45` Error Prevention & Recovery (`1-Click Sample Data Cure`, `Explicit Unit Headers`, `localStorage Persistence`)
+     - `46` Performance Budget (`CLS = 0`, `Instant CSS Variable Theme Switch`, `60fps Inline SVG`)
+     - `47` A11y Pre-Flight Checklist (`Outdoor AAA Contrast >12:1`, `Icon + Text + Color Redundancy`)
+     - `48` 3-Tier Design Tokens (`Tier 1 Primitive` → `Tier 2 Semantic` → `Tier 3 Component`)
+     - `49` 6-Part AI Design Prompt Formula & Component Spec Blueprint
+     - `50` 10 Anti-Patterns & 12-Point Pre-Delivery QA Gate
+  4. **หมวดลับ `EXP-01` ถึง `EXP-04` (Expert Design Engineer Vocabulary):** Surface Physics, Typographic Micro-Mechanics, Spatial Topology, High-Craft Interaction Density
+
+### 🧠 กฎเหล็กสำหรับผู้ใช้ที่ไม่จำคำศัพท์ (Recognition over Recall & Auto-Context Inspection)
+เมื่อผู้ใช้สั่ง `/medesign` ให้ปฏิบัติตาม 2 โหมดอัจฉริยะนี้เสมอ:
+
+1. **โหมดสร้างอัตโนมัติจากข้อมูลที่มีโดยไม่ต้องถาม (`Zero-Question Auto-Context Inspector — Q-01`):**
+   - เมื่อผู้ใช้ส่งรายละเอียดงาน โค้ดเดิม หรือสั่งให้จัดการจากข้อมูลที่มีอยู่ **ห้ามยิงคำถามจุกจิกซ้ำซาก**
+   - ให้ AI แปลงคำสั่งสั้นๆ เข้าสู่ **6-Part Master Prompt Formula (หมวด 49)** และสรุป **Coverage Audit 3 ส่วน** ทันทีก่อนลงมือสร้าง:
+     1. **หัวข้อหลักที่ตรวจพบ (Detected Primary Sections):** สกัดว่าหน้านี้ต้องมีหัวข้อหลัก ตาราง กราฟ หรือส่วนแสดงผลอะไรบ้างจากข้อมูลที่ให้มา
+     2. **ส่วนสำคัญที่ระบบเติมให้อัตโนมัติ (Auto-Completed Missing Essentials — หมวด 39, 43, 45):** ตรวจสอบว่ายังขาดองค์ประกอบสำคัญอะไรที่ทำให้ใช้งานจริงได้สมบูรณ์ (เช่น ปุ่ม `📥 โหลดข้อมูลตัวอย่าง 1 คลิก` สำหรับแก้ปัญหาหน้าโล่ง, แถวสรุปผลรวมท้ายตาราง `Pinned Totals / Misclosure Row`, ป้ายสถานะเกณฑ์มาตรฐาน `Pass/Fail Badge`, แถบปุ่ม `ส่งออก CSV/GeoJSON` ที่วางติดกับหัวตาราง, ระบบสลับธีม `Fieldbook ↔ Terminal`) แล้วเติมให้ครบอัตโนมัติทันที
+     3. **กฎดีไซน์ระดับโลกจาก DNA & 12-Point QA Gate (หมวด 34–50):** บังคับใช้ `Zero-Sidebar Top-Nav`, `Underline 2px Tabs`, `Z/F-Pattern Flow`, `60-30-10 Color Rule`, `8pt Spacing`, `Geist Mono Tabular Numerals`, `3-Tier CSS Tokens` และบล็อก Anti-Slop ทั้ง 10 ข้อโดยอัตโนมัติ
+
+2. **โหมดยิงคำถามระดับ Expert สำหรับเวลาที่ต้องการให้ผู้ใช้เลือก (`Expert Visual Questioning — Q-02 ถึง Q-06`):**
+   - **ห้ามถามด้วยคำศัพท์เทคนิคดิบๆ** (เช่น ห้ามถามลอยๆ ว่า *"ต้องการ Tonal Layering หรือ Glassmorphism?"*)
+   - ต้องแปลเป็น **"ภาษาคนเข้าใจง่าย + บอกผลลัพธ์ทางสายตาและการใช้งานจริง"** พร้อมใส่ `(Recommended ตาม DNA)` ไว้ที่ตัวเลือกแรกเสมอ
+   - สามารถเปิด **Localhost Interactive Questioner Templates (`http://localhost:3333/wizard/1` ถึง `/wizard/6`)** ให้ผู้ใช้คลิกเลือกจากภาพจริงได้ทั้ง 6 รูปแบบ:
+     - `Q-01` (`/wizard/1`): **Zero-Question Auto-Context Inspector** — สแกนข้อมูล ตรวจเช็กหัวข้อหลัก เติมส่วนที่ขาด (ครบ 9 States & 12 QA Gate) และสร้างหน้าเว็บสดทันที
+     - `Q-02` (`/wizard/2`): **Visual Anatomy Card Deck** — ไพ่ภาพจำลองขนาดจิ๋วเปรียบเทียบสดครบ 4 มิติ ไม่ต้องจำศัพท์
+     - `Q-03` (`/wizard/3`): **Split-Screen Tactile Equalizer** — เลื่อนสไลเดอร์และสวิตช์เปิด/ปิดหัวข้อหลักทางซ้าย ดูหน้าเว็บเปลี่ยนสดทางขวา
+     - `Q-04` (`/wizard/4`): **Smart 3-Step Triage** — ล็อก DNA 80% แล้วถามเฉพาะเป้าหมายหลักของหน้า (พร้อมปุ่มข้ามคำถามทั้งหมด)
+     - `Q-05` (`/wizard/5`): **Component A/B/C Shootout** — วางชิ้นส่วน UI ของจริงเทียบกันครบ 3 ท่อน (แถบเมนูบน, การ์ด KPI, ตารางคู่ผังกราฟิก) ให้กดโหวตเลือกแล้วประกอบร่างสด
+     - `Q-06` (`/wizard/6`): **Swiss Engineering Blueprint Matrix** — แผงพิมพ์เขียวตารางเส้นคม 1px ควบคุมครบทุกหมวดพร้อม 12-Point Pre-Delivery QA Gate ในหน้าเดียว
+
+---
+

package/references/vocabulary.md

@@ -0,0 +1,78 @@
+## 10. REFERENCE VOCABULARY (Pattern Names the Agent Should Know)
+
+This is a vocabulary, not a library. The agent should KNOW these pattern names to communicate about them, design with them in mind, and reach for them when the design read calls for them. **Implementations and code sketches live in the Block Library (Section 12), which is populated iteratively.**
+
+### Hero Paradigms
+* **Asymmetric Split Hero** - Text on one side, asset on the other, generous white space.
+* **Editorial Manifesto Hero** - Large type, no asset, almost-poster.
+* **Video / Media Mask Hero** - Type cut out as mask over video background.
+* **Kinetic-Type Hero** - Animated typography as the primary visual.
+* **Curtain-Reveal Hero** - Hero parts on scroll like a curtain.
+* **Scroll-Pinned Hero** - Hero stays pinned while content scrolls behind.
+
+### Navigation & Menus
+* **Mac OS Dock Magnification** - Edge nav, icons scale fluidly on hover.
+* **Magnetic Button** - Pulls toward cursor.
+* **Gooey Menu** - Sub-items detach like viscous liquid.
+* **Dynamic Island** - Morphing pill for status / alerts.
+* **Contextual Radial Menu** - Circular menu expanding at click point.
+* **Floating Speed Dial** - FAB springing into curved secondary actions.
+* **Mega Menu Reveal** - Full-screen dropdown, stagger-fade content.
+
+### Layout & Grids
+* **Bento Grid** - Asymmetric tile grouping (Apple Control Center).
+* **Masonry Layout** - Staggered grid, no fixed row height.
+* **Chroma Grid** - Borders / tiles with subtle animating gradients.
+* **Split-Screen Scroll** - Two halves sliding in opposite directions.
+* **Sticky-Stack Sections** - Sections that pin and stack on scroll.
+
+### Cards & Containers
+* **Parallax Tilt Card** - 3D tilt tracking mouse coordinates.
+* **Spotlight Border Card** - Borders illuminate under cursor.
+* **Glassmorphism Panel** - Frosted glass with inner refraction.
+* **Holographic Foil Card** - Iridescent rainbow shift on hover.
+* **Tinder Swipe Stack** - Physical card stack, swipe-away.
+* **Morphing Modal** - Button expands into its own dialog.
+
+### Scroll Animations
+* **Sticky Scroll Stack** - Cards stick and physically stack.
+* **Horizontal Scroll Hijack** - Vertical scroll → horizontal pan.
+* **Locomotive / Sequence Scroll** - Video / 3D sequence tied to scrollbar.
+* **Zoom Parallax** - Central background image zooming on scroll.
+* **Scroll Progress Path** - SVG line drawing along scroll.
+* **Liquid Swipe Transition** - Page transition like viscous liquid.
+
+### Galleries & Media
+* **Dome Gallery** - 3D panoramic gallery.
+* **Coverflow Carousel** - 3D carousel with angled edges.
+* **Drag-to-Pan Grid** - Boundless draggable canvas.
+* **Accordion Image Slider** - Narrow strips expanding on hover.
+* **Hover Image Trail** - Mouse leaves popping image trail.
+* **Glitch Effect Image** - RGB-channel shift on hover.
+
+### Typography & Text
+* **Kinetic Marquee** - Endless text bands reversing on scroll.
+* **Text Mask Reveal** - Massive type as transparent window to video.
+* **Text Scramble Effect** - Matrix-style decoding on load / hover.
+* **Circular Text Path** - Text curving along spinning circle.
+* **Gradient Stroke Animation** - Outlined text with running gradient.
+* **Kinetic Typography Grid** - Letters dodging the cursor.
+
+### Micro-Interactions & Effects
+* **Particle Explosion Button** - CTA shatters into particles on success.
+* **Liquid Pull-to-Refresh** - Reload indicator like detaching droplets.
+* **Skeleton Shimmer** - Shifting light reflection across placeholders.
+* **Directional Hover-Aware Button** - Fill enters from cursor's exact side.
+* **Ripple Click Effect** - Wave from click coordinates.
+* **Animated SVG Line Drawing** - Vectors drawing themselves in real time.
+* **Mesh Gradient Background** - Organic lava-lamp blobs.
+* **Lens Blur Depth** - Background UI blurred to focus foreground action.
+
+### Animation Library Choice
+* **Motion (`motion/react`)** - default for UI / Bento / state-change motion.
+* **GSAP + ScrollTrigger** - for full-page scrolltelling and scroll hijacks. Isolate in dedicated leaf components with `useEffect` cleanup.
+* **Three.js / WebGL** - for canvas backgrounds and 3D scenes. Same isolation rule.
+* **NEVER mix GSAP / Three.js with Motion in the same component tree.** They fight over the same frames.
+
+---
+

package/scripts/export-tokens.js

@@ -0,0 +1,403 @@
+#!/usr/bin/env node
+
+/**
+ * ME-DESIGN Token Exporter
+ * Converts preset design tokens into industry standard formats:
+ * 1. Tailwind CSS v4 `@theme` block
+ * 2. W3C Design Tokens Community Group (DTCG) standard specification JSON
+ * 3. Standard CSS Custom Properties (:root { ... })
+ * 
+ * Usage:
+ *   node scripts/export-tokens.js [--preset <name|all>] [--format <tailwind|dtcg|css|all>] [--out <dir>]
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const presetsDir = path.join(__dirname, '..', 'presets');
+
+// Parse CLI Arguments
+const args = process.argv.slice(2);
+let targetPreset = 'all';
+let targetFormat = 'all';
+let outDir = null;
+
+for (let i = 0; i < args.length; i++) {
+  if (args[i] === '--preset' && args[i + 1]) {
+    targetPreset = args[++i].toLowerCase();
+  } else if (args[i] === '--format' && args[i + 1]) {
+    targetFormat = args[++i].toLowerCase();
+  } else if (args[i] === '--out' && args[i + 1]) {
+    outDir = args[++i];
+  }
+}
+
+// Discover available presets
+const presetFolders = fs.readdirSync(presetsDir, { withFileTypes: true })
+  .filter(d => d.isDirectory())
+  .map(d => d.name)
+  .filter(name => fs.existsSync(path.join(presetsDir, name, 'preset.json')));
+
+const selectedPresets = targetPreset === 'all'
+  ? presetFolders
+  : presetFolders.filter(p => p.toLowerCase() === targetPreset);
+
+if (selectedPresets.length === 0) {
+  console.error(`Error: Preset '${targetPreset}' not found. Available presets: ${presetFolders.join(', ')}`);
+  process.exit(1);
+}
+
+// Format 1: Tailwind CSS v4 @theme Generator
+function toTailwindV4Theme(preset) {
+  const lines = ['/* Tailwind CSS v4 @theme configuration */', '/* Generated by ME-DESIGN Token Engine */', '@theme {'];
+
+  // Colors
+  if (preset.color) {
+    if (preset.color.canvas) lines.push(`  --color-canvas: ${preset.color.canvas};`);
+    if (preset.color.surfaceRaised) lines.push(`  --color-surface-raised: ${preset.color.surfaceRaised};`);
+    if (preset.color.surfaceInset) lines.push(`  --color-surface-inset: ${preset.color.surfaceInset};`);
+    if (preset.color.borderSubtle) lines.push(`  --color-border-subtle: ${preset.color.borderSubtle};`);
+    if (preset.color.borderFocus) lines.push(`  --color-border-focus: ${preset.color.borderFocus};`);
+    if (preset.color.accent) lines.push(`  --color-accent: ${preset.color.accent};`);
+    if (preset.color.accentForeground) lines.push(`  --color-accent-foreground: ${preset.color.accentForeground};`);
+
+    if (preset.color.status) {
+      Object.entries(preset.color.status).forEach(([k, v]) => {
+        lines.push(`  --color-status-${k}: ${v};`);
+      });
+    }
+  }
+
+  // Typography
+  if (preset.typography) {
+    if (preset.typography.display) lines.push(`  --font-display: ${preset.typography.display};`);
+    if (preset.typography.sans) lines.push(`  --font-sans: ${preset.typography.sans};`);
+    if (preset.typography.mono) lines.push(`  --font-mono: ${preset.typography.mono};`);
+    if (preset.typography.headingTracking) lines.push(`  --tracking-heading: ${preset.typography.headingTracking};`);
+    if (preset.typography.uiLineHeight) lines.push(`  --leading-ui: ${preset.typography.uiLineHeight};`);
+    if (preset.typography.proseLineHeight) lines.push(`  --leading-prose: ${preset.typography.proseLineHeight};`);
+  }
+
+  // Geometry
+  if (preset.geometry) {
+    if (preset.geometry.radiusBase) lines.push(`  --radius-base: ${preset.geometry.radiusBase};`);
+    if (preset.geometry.radiusOuter) lines.push(`  --radius-outer: ${preset.geometry.radiusOuter};`);
+    if (preset.geometry.hitTargetMinTouch) lines.push(`  --hit-target-min: ${preset.geometry.hitTargetMinTouch};`);
+  }
+
+  // Motion
+  if (preset.motion) {
+    if (preset.motion.easingEntry) lines.push(`  --ease-entry: ${preset.motion.easingEntry};`);
+    if (preset.motion.easingExit) lines.push(`  --ease-exit: ${preset.motion.easingExit};`);
+    if (preset.motion.durationEntry) lines.push(`  --duration-entry: ${preset.motion.durationEntry};`);
+    if (preset.motion.durationExit) lines.push(`  --duration-exit: ${preset.motion.durationExit};`);
+  }
+
+  lines.push('}');
+  return lines.join('\n');
+}
+
+function oklchToLinearRgb(l, c, h) {
+  const rad = h * Math.PI / 180;
+  const a = c * Math.cos(rad);
+  const b = c * Math.sin(rad);
+
+  const l1 = l + 0.3963377774 * a + 0.2158037573 * b;
+  const m1 = l - 0.1055613458 * a - 0.0638541728 * b;
+  const s1 = l - 0.0894841775 * a - 1.2914855480 * b;
+
+  const l_c = l1 * l1 * l1;
+  const m_c = m1 * m1 * m1;
+  const s_c = s1 * s1 * s1;
+
+  const r_lin = +4.0767434721 * l_c - 3.3077115913 * m_c + 0.2309699292 * s_c;
+  const g_lin = -1.2684380046 * l_c + 2.6097574011 * m_c - 0.3413193965 * s_c;
+  const b_lin = -0.0041960863 * l_c - 0.7034186147 * m_c + 1.7076147010 * s_c;
+
+  return [r_lin, g_lin, b_lin];
+}
+
+function inGamut(r, g, b, eps = 0.0001) {
+  return r >= -eps && r <= 1 + eps &&
+         g >= -eps && g <= 1 + eps &&
+         b >= -eps && b <= 1 + eps;
+}
+
+// Convert OKLCH to sRGB Hex using CSS Color 4 Gamut Mapping (binary search chroma reduction)
+function oklchToHex(colorStr) {
+  if (!colorStr || !colorStr.startsWith('oklch(')) return null;
+  const match = colorStr.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)/i);
+  if (!match) return null;
+  const l = parseFloat(match[1]);
+  const c = parseFloat(match[2]);
+  const h = parseFloat(match[3]);
+
+  const [r0, g0, b0] = oklchToLinearRgb(l, c, h);
+  let bestRgb = [r0, g0, b0];
+
+  // If outside sRGB gamut, reduce chroma via binary search while preserving lightness and hue angle
+  if (!inGamut(r0, g0, b0)) {
+    let cLow = 0;
+    let cHigh = c;
+    for (let i = 0; i < 25; i++) {
+      const cMid = (cLow + cHigh) / 2;
+      const rgb = oklchToLinearRgb(l, cMid, h);
+      if (inGamut(rgb[0], rgb[1], rgb[2])) {
+        cLow = cMid;
+        bestRgb = rgb;
+      } else {
+        cHigh = cMid;
+      }
+    }
+  }
+
+  const gamma = (x) => x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(Math.max(0, x), 1 / 2.4) - 0.055;
+  const R = Math.min(255, Math.max(0, Math.round(gamma(bestRgb[0]) * 255)));
+  const G = Math.min(255, Math.max(0, Math.round(gamma(bestRgb[1]) * 255)));
+  const B = Math.min(255, Math.max(0, Math.round(gamma(bestRgb[2]) * 255)));
+
+  return '#' + [R, G, B].map(x => x.toString(16).padStart(2, '0')).join('');
+}
+
+// Format 2: W3C Design Tokens Community Group (DTCG) Generator
+// Supports 'oklch' (modern CSS Color 4) or 'srgb' (hex tokens for Figma / legacy tools)
+function toDtcgTokens(preset, colorSpace = 'oklch') {
+  const dtcg = {
+    $name: preset.name,
+    $description: preset.description,
+    $version: '2024.1.0',
+    color: {},
+    fontFamily: {},
+    dimension: {},
+    duration: {},
+    cubicBezier: {}
+  };
+
+  // Colors
+  if (preset.color) {
+    Object.entries(preset.color).forEach(([k, v]) => {
+      if (typeof v === 'string') {
+        const tokenVal = colorSpace === 'srgb' ? (oklchToHex(v) || v) : v;
+        dtcg.color[k] = {
+          $value: tokenVal,
+          $type: 'color',
+          $description: `${k} color token for ${preset.name}`
+        };
+      } else if (typeof v === 'object') {
+        dtcg.color[k] = {};
+        Object.entries(v).forEach(([subK, subV]) => {
+          const tokenVal = colorSpace === 'srgb' ? (oklchToHex(subV) || subV) : subV;
+          dtcg.color[k][subK] = {
+            $value: tokenVal,
+            $type: 'color',
+            $description: `${k}.${subK} color token for ${preset.name}`
+          };
+        });
+      }
+    });
+  }
+
+  // Typography
+  if (preset.typography) {
+    ['display', 'sans', 'mono'].forEach(fontKey => {
+      if (preset.typography[fontKey]) {
+        dtcg.fontFamily[fontKey] = {
+          $value: preset.typography[fontKey],
+          $type: 'fontFamily',
+          $description: `${fontKey} font stack`
+        };
+      }
+    });
+    if (preset.typography.headingTracking) {
+      dtcg.dimension.headingTracking = {
+        $value: preset.typography.headingTracking,
+        $type: 'dimension',
+        $description: 'Optical negative tracking for headings'
+      };
+    }
+  }
+
+  // Geometry
+  if (preset.geometry) {
+    if (preset.geometry.radiusBase) {
+      dtcg.dimension.radiusBase = {
+        $value: preset.geometry.radiusBase,
+        $type: 'dimension',
+        $description: 'Base corner radius'
+      };
+    }
+    if (preset.geometry.radiusOuter) {
+      dtcg.dimension.radiusOuter = {
+        $value: preset.geometry.radiusOuter,
+        $type: 'dimension',
+        $description: 'Outer card corner radius'
+      };
+    }
+    if (preset.geometry.hitTargetMinTouch) {
+      dtcg.dimension.hitTargetMin = {
+        $value: preset.geometry.hitTargetMinTouch,
+        $type: 'dimension',
+        $description: 'WCAG 2.5.8 / HIG minimum touch target dimension (44px)'
+      };
+    }
+  }
+
+  // Motion
+  if (preset.motion) {
+    if (preset.motion.durationEntry) {
+      dtcg.duration.entry = {
+        $value: preset.motion.durationEntry,
+        $type: 'duration',
+        $description: 'Entry motion timing'
+      };
+    }
+    if (preset.motion.durationExit) {
+      dtcg.duration.exit = {
+        $value: preset.motion.durationExit,
+        $type: 'duration',
+        $description: 'Exit motion timing (asymmetric 0.65x)'
+      };
+    }
+    if (preset.motion.easingEntry) {
+      dtcg.cubicBezier.entry = {
+        $value: preset.motion.easingEntry,
+        $type: 'cubicBezier',
+        $description: 'Entry cubic-bezier timing function'
+      };
+    }
+    if (preset.motion.easingExit) {
+      dtcg.cubicBezier.exit = {
+        $value: preset.motion.easingExit,
+        $type: 'cubicBezier',
+        $description: 'Exit cubic-bezier timing function'
+      };
+    }
+  }
+
+  return JSON.stringify(dtcg, null, 2);
+}
+
+// Format 3: CSS Custom Properties Generator (:root { ... })
+function toCssVariables(preset) {
+  const lines = ['/* Standard CSS Custom Properties */', '/* Generated by ME-DESIGN Token Engine */', ':root {'];
+
+  if (preset.color) {
+    Object.entries(preset.color).forEach(([k, v]) => {
+      if (typeof v === 'string') {
+        const cssKey = k.replace(/([A-Z])/g, '-$1').toLowerCase();
+        lines.push(`  --color-${cssKey}: ${v};`);
+      } else if (typeof v === 'object') {
+        Object.entries(v).forEach(([subK, subV]) => {
+          lines.push(`  --color-${k}-${subK}: ${subV};`);
+        });
+      }
+    });
+  }
+
+  if (preset.typography) {
+    if (preset.typography.sans) lines.push(`  --font-sans: ${preset.typography.sans};`);
+    if (preset.typography.mono) lines.push(`  --font-mono: ${preset.typography.mono};`);
+    if (preset.typography.uiLineHeight) lines.push(`  --line-height-ui: ${preset.typography.uiLineHeight};`);
+    if (preset.typography.proseLineHeight) lines.push(`  --line-height-prose: ${preset.typography.proseLineHeight};`);
+  }
+
+  if (preset.geometry) {
+    if (preset.geometry.radiusBase) lines.push(`  --radius-base: ${preset.geometry.radiusBase};`);
+    if (preset.geometry.radiusOuter) lines.push(`  --radius-outer: ${preset.geometry.radiusOuter};`);
+    if (preset.geometry.hitTargetMinTouch) lines.push(`  --hit-target-min: ${preset.geometry.hitTargetMinTouch};`);
+  }
+
+  lines.push('}');
+  return lines.join('\n');
+}
+
+// Execution CLI Guard
+if (require.main === module) {
+  const results = [];
+
+  selectedPresets.forEach(presetId => {
+    const jsonPath = path.join(presetsDir, presetId, 'preset.json');
+    const preset = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+
+    const exportItem = {
+      preset: presetId,
+      name: preset.name,
+      outputs: {}
+    };
+
+    if (targetFormat === 'tailwind' || targetFormat === 'all') {
+      exportItem.outputs.tailwind = toTailwindV4Theme(preset);
+    }
+    if (targetFormat === 'dtcg' || targetFormat === 'all') {
+      exportItem.outputs.dtcgOklch = toDtcgTokens(preset, 'oklch');
+      exportItem.outputs.dtcgSrgb = toDtcgTokens(preset, 'srgb');
+      exportItem.outputs.dtcg = exportItem.outputs.dtcgOklch;
+    }
+    if (targetFormat === 'css' || targetFormat === 'all') {
+      exportItem.outputs.css = toCssVariables(preset);
+    }
+
+    results.push(exportItem);
+  });
+
+  // Output Handling
+  if (outDir) {
+    if (!fs.existsSync(outDir)) {
+      fs.mkdirSync(outDir, { recursive: true });
+    }
+
+    results.forEach(res => {
+      if (res.outputs.tailwind) {
+        fs.writeFileSync(path.join(outDir, `${res.preset}-theme.css`), res.outputs.tailwind, 'utf8');
+      }
+      if (res.outputs.dtcgOklch) {
+        fs.writeFileSync(path.join(outDir, `${res.preset}-tokens.oklch.json`), res.outputs.dtcgOklch, 'utf8');
+        fs.writeFileSync(path.join(outDir, `${res.preset}-tokens.dtcg.json`), res.outputs.dtcgOklch, 'utf8');
+      }
+      if (res.outputs.dtcgSrgb) {
+        fs.writeFileSync(path.join(outDir, `${res.preset}-tokens.srgb.json`), res.outputs.dtcgSrgb, 'utf8');
+      }
+      if (res.outputs.css) {
+        fs.writeFileSync(path.join(outDir, `${res.preset}-tokens.css`), res.outputs.css, 'utf8');
+      }
+    });
+
+    console.log(`Successfully exported tokens for [${selectedPresets.join(', ')}] into '${outDir}'.`);
+  } else {
+    // Stdout
+    results.forEach(res => {
+      console.log(`\n========================================`);
+      console.log(`PRESET: ${res.name} (${res.preset})`);
+      console.log(`========================================\n`);
+      if (res.outputs.tailwind) {
+        console.log(`--- [Tailwind v4 @theme] ---`);
+        console.log(res.outputs.tailwind);
+        console.log('');
+      }
+      if (res.outputs.dtcgOklch) {
+        console.log(`--- [W3C DTCG Format JSON (OKLCH Native)] ---`);
+        console.log(res.outputs.dtcgOklch);
+        console.log('');
+      }
+      if (res.outputs.dtcgSrgb) {
+        console.log(`--- [W3C DTCG Format JSON (sRGB Gamut-Mapped Hex)] ---`);
+        console.log(res.outputs.dtcgSrgb);
+        console.log('');
+      }
+      if (res.outputs.css) {
+        console.log(`--- [CSS Custom Properties] ---`);
+        console.log(res.outputs.css);
+        console.log('');
+      }
+    });
+  }
+}
+
+module.exports = {
+  oklchToHex,
+  oklchToLinearRgb,
+  inGamut,
+  toTailwindV4Theme,
+  toDtcgTokens,
+  toCssVariables
+};