medesign 0.0.0-stage → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Metha Tripraphankit (Survey Engineering & Geoinformatics, Kasetsart University)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,129 @@
-# Temporary Holding Version
+<div align="center">
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# ME-DESIGN vNext
+
+**The Autonomous Design Engineering System & Quality Linter for AI Coding Assistants**
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![CI Matrix](https://github.com/methastrategy/medesign/actions/workflows/ci.yml/badge.svg)](https://github.com/methastrategy/medesign/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/medesign.svg?color=emerald)](https://www.npmjs.com/package/medesign)
+[![Node Version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen.svg)](https://nodejs.org/)
+[![Status](https://img.shields.io/badge/status-production--ready-emerald.svg)]()
+[![Archetypes](https://img.shields.io/badge/archetypes-38%20models-indigo.svg)]()
+
+*Eliminate AI Slop and bring optical mathematics, perceptual color science, and mission-critical engineering rigor to automated UI/UX generation.*
+
+---
+
+</div>
+
+## 🌟 Why ME-DESIGN?
+
+Most AI-generated user interfaces suffer from **Decisionless Uniformity**: generic 3-card grids, oversaturated neon glows, clipping Thai/Latin font metrics, broken keyboard accessibility, and non-proportional press deformations.
+
+**ME-DESIGN** changes the paradigm from subjective aesthetic prompting to an **executable 5-Engine Design Architecture** coupled with a **Dual-Tier Quality Linter**.
+
+---
+
+## 🏛️ The 5-Engine Core Architecture
+
+```
+ME-DESIGN Core Engine
+├── 01. Optical Geometry Engine      -> Safe Concentric Radii, Area-Proportional Scaling, Hit Target Isolation
+├── 02. Perceptual Color Engine      -> OKLCH / OKLab Gamut, Dynamic color-mix(), Dark Mode Functional Tokens
+├── 03. Motion & Interaction Engine  -> 4 Behavioral Profiles (precision, soft-settle, spring-settle, instant)
+├── 04. Typography & Script Engine   -> Dual-Context Line-Height, Thai Diacritic Clearance, @font-face Calibration
+└── 05. Quality & Saliency Auditor   -> 4-Tier Governance, Task-Driven Attention Models, Zero-Compromise Gate
+```
+
+---
+
+## 📐 38 Production Archetypes (5-Axis Decoupled Matrix)
+
+ME-DESIGN decouples UI synthesis across 5 independent axes:
+**Operational Archetype × Visual Language × Spatial Model × Motion Profile × Governance Tier**
+
+- **Group A: Luxury & Editorial (01-05):** Quiet Luxury, Swiss International Editorial, Dark Haute Couture...
+- **Group B: SaaS, DevTools & High-Density (06-12):** Linear Minimal, Vercel Clean Monochrome, Bloomberg Pro Density, Raycast Spatial HUD...
+- **Group C: Fintech, Crypto & Glassmorphism (13-18):** Stripe Clean Gradient, Cyberpunk Matrix, Cosmos Acrylic Glass...
+- **Group D: Modern Consumer, E-Commerce & Brand (19-24):** Apple Pro Spatial, Airbnb Warm Domestic...
+- **Group E: Creative Agency & Experimental (25-30):** Neo-Brutalism, Kinetic Marquee, Biophilic Wellness...
+- **Group F: Mission-Critical Engineering & HMI (31-38):**
+  - **31. Mission Control HMI (ISA-101 Standard):** Tri-state alarms, greyscale base, operator decision priority.
+  - **32. Geospatial Situation Awareness (GIS & Cadastre):** Map-centric 16:10 / 100dvh, linked selection tables, EPSG coordinates.
+  - **33. CAD Precision Workbench:** Maximized canvas, floating command bar, geometric snap indicators.
+  - **34. Telemetry & Signal Forensics:** Time-series scrubbing, stale sensor detection, gap indicators.
+  - **35. Anomaly Triage & Incident Response:** Priority queue, severity vs confidence matrix.
+  - **36. Field Survey & Offline Operations:** 52px touch targets, RTK fix status, offline sync queue.
+  - **37. Spatiotemporal Change Detection:** Synchronized dual viewports, epoch time slider.
+  - **38. Data Provenance & Survey QA/QC:** Observation lineage, error ellipses, legal timestamp seals.
+
+---
+
+## 🚀 Quickstart: Running via `npx` (Zero Installation)
+
+Execute ME-DESIGN immediately without manual installation:
+
+```bash
+# Lint an HTML, JSX, or CSS file with static AST & invariant rules
+npx medesign lint path/to/index.html
+
+# Lint and export OASIS SARIF v2.1.0 for GitHub Code Scanning
+npx medesign lint path/to/index.html --format sarif
+
+# Run headless Chrome DevTools Protocol verification matrix
+# (Computes real contrast ratios, tab focus indicators, and 44px hit-targets)
+npx medesign audit path/to/index.html
+
+# Export design tokens to Tailwind CSS v4 @theme, W3C DTCG, or CSS variables
+npx medesign tokens --preset apple --format tailwind --out ./tokens
+
+# Verify system health, Node.js version, and headless browser availability
+npx medesign doctor
+```
+
+### The Terminal Summary Card
+
+```text
+ME-DESIGN vNext
+Design Quality & Governance Audit
+────────────────────────────────────────
+Target        dashboard.tsx
+Archetype     Geospatial Situation Awareness (32)
+Analysis      Static AST & Semantic Rules
+Ruleset       medesign-standard@1.0.0
+
+QUALITY SCORE (Q = 0.30H + 0.25I + 0.20G + 0.15R + 0.10V)
+  Hierarchy (H)       94.0 / 100
+  Information (I)     90.0 / 100
+  Geometry (G)        92.0 / 100
+  Responsive (R)      88.0 / 100
+  Visual Craft (V)    95.0 / 100
+
+  Q-SCORE             91.8 / 100  [PASS]
+
+HARD INVARIANTS CHECKLIST
+  PASS  Keyboard Focus Ring Visibility (:focus-visible)
+  PASS  Reduced Motion Compliance (@media prefers-reduced-motion)
+  PASS  Anti-AI Tells: Zero Em-Dash Invariant
+  PASS  Predictable DOM Order (No unsemantic dense flow)
+
+────────────────────────────────────────
+RESULT: PASS (Exit Code: 0)
+```
+
+---
+
+## 🤖 AI Coding Assistant Integrations
+
+ME-DESIGN provides shared rule adapters for all major agentic tools:
+
+- **Claude Code:** Copy `integrations/claude-code/SKILL.md` to `.claude/skills/medesign/SKILL.md`
+- **Cursor:** Copy `integrations/cursor/medesign.mdc` to `.cursor/rules/medesign.mdc`
+- **Google Antigravity:** Native Skill supported under `skills/medesign/SKILL.md`
+
+---
+
+## 📄 License
+
+MIT License © 2026 Metha Triparamkit (Survey Engineering & Geoinformatics, Kasetsart University).

package/bin/medesign.js

@@ -0,0 +1,200 @@
+#!/usr/bin/env node
+
+/**
+ * ME-DESIGN CLI — Autonomous Design Engineering Toolkit & Linter
+ * 
+ * Commands:
+ *   medesign lint <file> [--format text|json|sarif] [--preset <name>] [--config <path>]
+ *   medesign audit <file> [--json]
+ *   medesign tokens [--preset <name>] [--format tailwind|dtcg|css|all] [--out <dir>]
+ *   medesign presets [list | get <name>]
+ *   medesign test [--browser]
+ *   medesign doctor
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { spawnSync } = require('child_process');
+
+const rootDir = path.join(__dirname, '..');
+const args = process.argv.slice(2);
+const command = args[0] || 'help';
+
+const ANSI_RESET = '\x1b[0m';
+const ANSI_BOLD = '\x1b[1m';
+const ANSI_CYAN = '\x1b[36m';
+const ANSI_GREEN = '\x1b[32m';
+const ANSI_YELLOW = '\x1b[33m';
+const ANSI_RED = '\x1b[31m';
+const ANSI_GRAY = '\x1b[90m';
+
+function printHelp() {
+  console.log(`
+${ANSI_BOLD}ME-DESIGN CLI v1.2.0${ANSI_RESET}
+Autonomous Design Engineering Toolkit & Automated Linter for AI Coding Assistants
+
+${ANSI_BOLD}USAGE:${ANSI_RESET}
+  medesign <command> [options]
+
+${ANSI_BOLD}COMMANDS:${ANSI_RESET}
+  ${ANSI_CYAN}lint${ANSI_RESET} <file>           Lint HTML/CSS/JSX file with static AST & semantic rules
+                        Options: --format <text|json|sarif>
+                                 --preset <apple|tesla|metha>
+                                 --config <path>
+
+  ${ANSI_CYAN}audit${ANSI_RESET} <file>          Run headless Chrome DevTools Protocol verification matrix
+                        (Checks computed contrast, tab focus outline, 44px hit-targets across viewports)
+                        Options: --json
+
+  ${ANSI_CYAN}tokens${ANSI_RESET} [export]       Export preset design tokens to Tailwind v4 @theme, W3C DTCG, or CSS
+                        Options: --preset <apple|tesla|metha|all>
+                                 --format <tailwind|dtcg|css|all>
+                                 --out <directory>
+
+  ${ANSI_CYAN}presets${ANSI_RESET} [list|get]    Inspect available design system presets
+                        Usage: medesign presets list
+                               medesign presets get <preset-name>
+
+  ${ANSI_CYAN}test${ANSI_RESET} [options]        Run deterministic test suite across fixtures
+                        Options: --browser (runs both static AST and headless browser matrix)
+
+  ${ANSI_CYAN}doctor${ANSI_RESET}                 Verify local environment, Node.js, and Chrome/CDP availability
+
+  ${ANSI_CYAN}help${ANSI_RESET}                   Display this help message
+`);
+}
+
+switch (command) {
+  case 'lint': {
+    const linterScript = path.join(rootDir, 'tests', 'linter.js');
+    const child = spawnSync(process.execPath, [linterScript, ...args.slice(1)], {
+      stdio: 'inherit',
+      cwd: process.cwd()
+    });
+    process.exit(child.status ?? 0);
+  }
+
+  case 'audit': {
+    const auditScript = path.join(rootDir, 'tests', 'browser-audit.js');
+    const child = spawnSync(process.execPath, [auditScript, ...args.slice(1)], {
+      stdio: 'inherit',
+      cwd: process.cwd()
+    });
+    process.exit(child.status ?? 0);
+  }
+
+  case 'tokens': {
+    const exportScript = path.join(rootDir, 'scripts', 'export-tokens.js');
+    // Filter out 'export' sub-command word if passed (e.g. medesign tokens export)
+    const exportArgs = args.slice(1).filter(a => a !== 'export');
+    const child = spawnSync(process.execPath, [exportScript, ...exportArgs], {
+      stdio: 'inherit',
+      cwd: process.cwd()
+    });
+    process.exit(child.status ?? 0);
+  }
+
+  case 'presets': {
+    const sub = args[1] || 'list';
+    const presetsDir = path.join(rootDir, 'presets');
+    if (sub === 'list') {
+      console.log(`\n${ANSI_BOLD}AVAILABLE ME-DESIGN PRESETS:${ANSI_RESET}\n`);
+      const folders = fs.readdirSync(presetsDir, { withFileTypes: true })
+        .filter(d => d.isDirectory())
+        .map(d => d.name);
+      folders.forEach(f => {
+        const pJson = path.join(presetsDir, f, 'preset.json');
+        if (fs.existsSync(pJson)) {
+          const data = JSON.parse(fs.readFileSync(pJson, 'utf8'));
+          console.log(`  ${ANSI_CYAN}${data.id.padEnd(10)}${ANSI_RESET} ${data.name}`);
+          console.log(`             ${ANSI_GRAY}${data.archetype}${ANSI_RESET}`);
+        }
+      });
+      console.log('');
+    } else if (sub === 'get') {
+      const name = args[2];
+      if (!name) {
+        console.error('Error: Please specify preset name (e.g. medesign presets get apple)');
+        process.exit(1);
+      }
+      const pJson = path.join(presetsDir, name.toLowerCase(), 'preset.json');
+      if (!fs.existsSync(pJson)) {
+        console.error(`Error: Preset '${name}' not found.`);
+        process.exit(1);
+      }
+      console.log(fs.readFileSync(pJson, 'utf8'));
+    }
+    break;
+  }
+
+  case 'test': {
+    const runnerScript = path.join(rootDir, 'tests', 'runner.js');
+    const child = spawnSync(process.execPath, [runnerScript, ...args.slice(1)], {
+      stdio: 'inherit',
+      cwd: process.cwd()
+    });
+    process.exit(child.status ?? 0);
+  }
+
+  case 'doctor': {
+    console.log(`\n${ANSI_BOLD}ME-DESIGN System Health & Environment Doctor${ANSI_RESET}`);
+    console.log(`${ANSI_GRAY}────────────────────────────────────────${ANSI_RESET}\n`);
+
+    // 1. Node.js Version Check
+    const nodeVer = process.version;
+    const major = parseInt(nodeVer.slice(1).split('.')[0], 10);
+    const nodeOk = major >= 18;
+    console.log(`Node.js Runtime:    ${nodeOk ? ANSI_GREEN + nodeVer + ' (Supported)' : ANSI_RED + nodeVer + ' (Requires >= 18.0.0)'}${ANSI_RESET}`);
+
+    const chromeCandidates = [
+      process.env.CHROME_PATH,
+      process.env.CHROME_BIN,
+      'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+      'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+      'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
+      path.join(process.env.LOCALAPPDATA || '', 'ms-playwright', 'chromium-1248', 'chrome-win64', 'chrome.exe'),
+      '/usr/bin/google-chrome',
+      '/usr/bin/google-chrome-stable',
+      '/usr/bin/chromium',
+      '/usr/bin/chromium-browser',
+      '/snap/bin/chromium',
+      '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+      '/Applications/Chromium.app/Contents/MacOS/Chromium'
+    ].filter(Boolean);
+
+    let foundChrome = null;
+    for (const c of chromeCandidates) {
+      if (fs.existsSync(c)) {
+        foundChrome = c;
+        break;
+      }
+    }
+    console.log(`Headless Browser:   ${foundChrome ? ANSI_GREEN + 'Found (' + path.basename(foundChrome) + ')' : ANSI_YELLOW + 'Not found in default paths'}${ANSI_RESET}`);
+    if (foundChrome) {
+      console.log(`                    ${ANSI_GRAY}${foundChrome}${ANSI_RESET}`);
+    }
+
+    // 3. Presets Check
+    const presetsDir = path.join(rootDir, 'presets');
+    const presets = fs.readdirSync(presetsDir, { withFileTypes: true })
+      .filter(d => d.isDirectory() && fs.existsSync(path.join(presetsDir, d.name, 'preset.json')));
+    console.log(`Installed Presets:  ${ANSI_GREEN}${presets.length} valid presets (${presets.map(p => p.name).join(', ')})${ANSI_RESET}`);
+
+    // 4. Test Suite Fixtures
+    const fixturesDir = path.join(rootDir, 'tests', 'fixtures');
+    const validCount = fs.existsSync(path.join(fixturesDir, 'valid')) ? fs.readdirSync(path.join(fixturesDir, 'valid')).length : 0;
+    const invalidCount = fs.existsSync(path.join(fixturesDir, 'invalid')) ? fs.readdirSync(path.join(fixturesDir, 'invalid')).length : 0;
+    console.log(`Test Fixtures:      ${ANSI_GREEN}${validCount} valid, ${invalidCount} invalid test fixtures${ANSI_RESET}\n`);
+
+    console.log(`${ANSI_GRAY}────────────────────────────────────────${ANSI_RESET}`);
+    console.log(`${ANSI_GREEN}${ANSI_BOLD}STATUS: ALL SYSTEMS OPERATIONAL${ANSI_RESET}\n`);
+    break;
+  }
+
+  case 'help':
+  case '--help':
+  case '-h':
+  default:
+    printHelp();
+    break;
+}

package/integrations/claude-code/SKILL.md

@@ -0,0 +1,20 @@
+---
+name: medesign
+description: Curated UI/UX & High-Signal Engineering Design Engine with 5-Engine Architecture and 4-Tier Quality Governance.
+---
+
+# ME-DESIGN for Claude Code
+
+When designing, auditing, or writing frontend code:
+
+1. **Routing:** Follow the 38 Archetypes (30 Visual + 8 Engineering ISA-101 / GIS).
+2. **Hard Invariants:**
+   - WCAG AA/AAA contrast on both Light and Dark themes.
+   - Visible `:focus-visible` ring on all interactive elements.
+   - Touch target $\ge 44\text{px}$ (HIG compliant).
+   - Reduced-motion gate: respect `@media (prefers-reduced-motion: reduce)`.
+   - Zero em-dash (`—`) or en-dash (`–`) in visible UI copy.
+3. **5-Axis Decoupling:**
+   - Operational Archetype × Visual Language × Spatial Model × Motion Profile × Governance Tier.
+4. **Verification:**
+   - Verify code against `tests/linter.js` before completing tasks.

package/integrations/cursor/medesign.mdc

@@ -0,0 +1,26 @@
+---
+description: Enforce ME-DESIGN vNext Optical Craft, 5-Engine Architecture, and 4-Tier Quality Governance.
+alwaysApply: true
+---
+
+# ME-DESIGN vNext Quality Guidelines (Cursor Rules)
+
+When generating or refactoring UI components, web pages, or engineering dashboards:
+
+1. **Optical Geometry:**
+   - Use Safe Concentric Radius formula: `border-radius: max(0px, calc(var(--r-outer) - var(--border-w, 0px) - var(--pad)))`.
+   - Area-Proportional scaling on press: preserve 44px hit-target container, transform only inner `.visual-surface`.
+2. **Perceptual Color Science:**
+   - Use `in oklch shorter hue` for vibrant gradient paths, and `in oklab` for neutral/white/black blends.
+   - Use `color-mix(in oklch, ...)` for token derivations instead of raw static hex codes.
+   - Respect Dark Mode functional tokens (`--surface-canvas`, `--surface-raised`, `--surface-inset`, `--border-subtle`, `--border-focus`).
+3. **Motion Profiles:**
+   - Choose from 4 profiles: `precision` (0-100ms no overshoot), `soft-settle` (240-280ms), `spring-settle` (linear/spring), `instant` (0ms).
+   - Mandatory `@media (prefers-reduced-motion: reduce)` bypass.
+4. **Typography & Script:**
+   - Enforce dual-context line-height: UI Chrome `1.25` (EN) / `1.38` (TH), Prose `1.60` (EN) / `1.70-1.75` (TH).
+   - Provide 2-4px optical headroom for Thai tone marks and top vowels.
+5. **Anti-AI Tells:**
+   - Zero em-dash (`—`) or en-dash (`–`) in visible UI text.
+   - Zero decisionless 3-card uniformity.
+   - All interactive controls must satisfy `:focus-visible` outline.

package/medesign.config.js

@@ -0,0 +1,46 @@
+/**
+ * ME-DESIGN Configuration File
+ * Customize rule severities, score weights, and browser verification thresholds.
+ */
+
+module.exports = {
+  // Quality Score Component Weights (sum = 1.0)
+  weights: {
+    H: 0.30, // Visual Hierarchy & Dominance
+    I: 0.25, // Information Density & Accessibility
+    G: 0.20, // Optical Geometry & Spatial Rhythm
+    R: 0.15, // Responsive Fluidity & Device Stability
+    V: 0.10  // Visual Polish & Perceptual Color
+  },
+
+  // Minimum passing Q-Score threshold (0-100)
+  minQScore: 75.0,
+
+  // Rule severity overrides ('error', 'warning', 'info', 'off')
+  // Note: MD001-MD005 are Hard Invariants and are required for production gating.
+  rules: {
+    MD001: 'error',   // Focus Visibility (:focus-visible)
+    MD002: 'error',   // Reduced Motion Compliance (@media prefers-reduced-motion)
+    MD003: 'error',   // Isolated Hit-Target Area (No raw scale-95 crushing)
+    MD004: 'error',   // Interactive State Contract (No dead buttons)
+    MD005: 'error',   // High Contrast Focus Ring (forced-colors: active)
+    MD101: 'warning', // Dense Grid Tab Sequence
+    MD102: 'warning', // Perceptual Color Interpolation (oklch/oklab)
+    MD103: 'info',    // Concentric Radius Math
+    MD104: 'warning', // Mobile Viewport Dynamic Units (100dvh)
+    MD105: 'warning', // Visual/DOM Sequence Scrambling
+    MD201: 'info'     // Editorial Punctuation (hyphen vs em-dash)
+  },
+
+  // Headless Browser Verification Settings
+  browser: {
+    minTouchTargetPx: 44,
+    minContrastRatio: 4.5,
+    viewports: [
+      { name: 'Mobile', width: 390, height: 844, isMobile: true },
+      { name: 'Tablet', width: 820, height: 1180, isMobile: true },
+      { name: 'Desktop', width: 1440, height: 900, isMobile: false }
+    ],
+    colorModes: ['dark', 'light']
+  }
+};

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "medesign",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.2.0",
+  "description": "Autonomous Design Engineering Toolkit & Automated Linter for AI Coding Assistants",
+  "main": "bin/medesign.js",
+  "bin": {
+    "medesign": "bin/medesign.js"
+  },
+  "files": [
+    "bin",
+    "presets",
+    "references",
+    "integrations",
+    "scripts/export-tokens.js",
+    "tests/linter.js",
+    "tests/browser-audit.js",
+    "tests/schemas",
+    "tests/visual-testbed.html",
+    "medesign.config.js"
+  ],
+  "scripts": {
+    "test": "node tests/runner.js && node tests/validate-sarif.js && node tests/test-tokens.js",
+    "test:unit": "node tests/runner.js",
+    "test:sarif": "node tests/validate-sarif.js",
+    "test:tokens": "node tests/test-tokens.js",
+    "test:browser": "node tests/runner.js --browser",
+    "lint": "node bin/medesign.js lint",
+    "audit": "node bin/medesign.js audit",
+    "tokens": "node bin/medesign.js tokens",
+    "doctor": "node bin/medesign.js doctor",
+    "prepublishOnly": "npm test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/methastrategy/medesign.git"
+  },
+  "homepage": "https://github.com/methastrategy/medesign#readme",
+  "bugs": {
+    "url": "https://github.com/methastrategy/medesign/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "design-tokens",
+    "linter",
+    "accessibility",
+    "design-systems",
+    "oklch",
+    "tailwind",
+    "dtcg",
+    "sarif",
+    "ai-coding-assistant",
+    "antigravity",
+    "claude-code"
+  ],
+  "author": "Metha Tripraphankit (Survey Engineering & Geoinformatics, Kasetsart University)",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

package/presets/apple/design-tokens.css

@@ -0,0 +1,115 @@
+/**
+ * ME-DESIGN Preset: Apple Human Interface & Product Showcase
+ * Version: 1.0.0
+ * Architecture: 3-Layer Design Tokens (Global -> Semantic -> Component)
+ */
+
+:root {
+  /* 01. Typography */
+  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
+  --font-mono: "SF Mono", "Menlo", "Fira Code", monospace;
+  --tracking-heading: -0.022em;
+  --leading-ui: 1.28;
+  --leading-prose: 1.65;
+  --thai-headroom: 3px;
+
+  /* 02. Color Tokens (OKLCH / P3 Ready) */
+  --color-canvas: #000000;
+  --color-surface-raised: #1c1c1e;
+  --color-surface-inset: #161618;
+  --color-surface-glass: rgba(28, 28, 30, 0.72);
+  --color-text-primary: #f5f5f7;
+  --color-text-secondary: #86868b;
+  --color-text-tertiary: #6e6e73;
+  --color-border-subtle: rgba(255, 255, 255, 0.12);
+  --color-border-strong: rgba(255, 255, 255, 0.24);
+  --color-border-focus: oklch(0.62 0.22 255);
+
+  --color-accent: oklch(0.58 0.22 255);
+  --color-accent-hover: oklch(0.64 0.22 255);
+  --color-accent-fg: #ffffff;
+
+  --color-status-info: oklch(0.65 0.18 245);
+  --color-status-success: oklch(0.70 0.19 145);
+  --color-status-warning: oklch(0.78 0.18 70);
+  --color-status-critical: oklch(0.62 0.22 25);
+
+  /* 03. Optical Geometry */
+  --radius-outer: 24px;
+  --radius-inner: calc(var(--radius-outer) - 8px);
+  --radius-pill: 9999px;
+  --hit-target-min: 44px;
+
+  /* 04. Motion Tokens */
+  --duration-entry: 240ms;
+  --duration-exit: 160ms;
+  --ease-entry: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 0.7, 0.2);
+
+  /* 05. Blur & Vibrancy */
+  --backdrop-blur: blur(20px) saturate(180%);
+}
+
+/* Light Mode Overrides */
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-canvas: #ffffff;
+    --color-surface-raised: #f5f5f7;
+    --color-surface-inset: #e8e8ed;
+    --color-surface-glass: rgba(255, 255, 255, 0.72);
+    --color-text-primary: #1d1d1f;
+    --color-text-secondary: #6e6e73;
+    --color-text-tertiary: #86868b;
+    --color-border-subtle: rgba(0, 0, 0, 0.08);
+    --color-border-strong: rgba(0, 0, 0, 0.18);
+    --color-accent: oklch(0.55 0.22 255);
+  }
+}
+
+/* Core Component Utilities */
+.apple-card {
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-outer);
+  padding: 24px;
+  backdrop-filter: var(--backdrop-blur);
+  transition: transform var(--duration-entry) var(--ease-entry),
+              border-color var(--duration-entry) var(--ease-entry);
+}
+
+.apple-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--hit-target-min);
+  padding: 0 20px;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+  border: none;
+  cursor: pointer;
+  outline-offset: 3px;
+  transition: transform var(--duration-entry) var(--ease-entry),
+              background var(--duration-entry) var(--ease-entry);
+}
+
+.apple-btn:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+}
+
+.apple-btn:active .visual-surface {
+  transform: scale(0.97);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/presets/apple/guidelines.md

@@ -0,0 +1,19 @@
+# Apple Preset Guidelines (`/medesign apple`)
+
+## Archetype Mapping
+- **Primary Archetype:** Archetype 02 (High-End Hardware Showcase)
+- **Secondary Archetype:** Archetype 01 (Minimalist Editorial)
+
+## Invariants & Design Principles
+1. **Concentric Geometry:**
+   Outer card radius `24px`, inner nested radius calculated via `r_outer - padding - border = 24 - 8 - 1 = 15px`.
+2. **Pill Action Surfaces:**
+   Action buttons use `border-radius: 9999px` with minimum 44px hit-target padding.
+3. **Motion Profile:**
+   `soft-settle` (240ms entry cubic-bezier(0.16, 1, 0.3, 1), 160ms exit). Never use linear or bouncy springs.
+4. **Typography Hierarchy:**
+   - Display/Headlines: SF Pro Display / Inter with `-0.022em` letter-spacing.
+   - Body/UI Chrome: SF Pro Text / Inter with `1.28` line-height for buttons, `1.65` for editorial copy.
+   - Diacritic headroom: minimum 3px padding-top for Thai vowel marks (`่ ้ ๊ ๋ ์`).
+5. **Color & Vibrancy:**
+   OLED Pure Black `#000000` canvas in dark mode, frosted blur `backdrop-filter: blur(20px) saturate(180%)`, Cupertino Blue accent `oklch(0.58 0.22 255)`.