medesign 0.0.0-stage → 1.2.0

package/presets/apple/preset.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "../schema.json",
+  "id": "apple",
+  "name": "Apple Human Interface & Product Showcase",
+  "version": "1.0.0",
+  "archetype": "Archetype 02: High-End Hardware Showcase",
+  "description": "Cupertino optical precision: generous negative space, concentric squircles, frosted vibrancy glass, and restrained typographic hierarchy.",
+  "typography": {
+    "display": "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif",
+    "sans": "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif",
+    "mono": "'SF Mono', 'Menlo', 'Fira Code', monospace",
+    "headingTracking": "-0.022em",
+    "uiLineHeight": "1.28",
+    "proseLineHeight": "1.65",
+    "thaiHeadroom": "3px"
+  },
+  "color": {
+    "canvas": "#000000",
+    "surfaceRaised": "#1c1c1e",
+    "surfaceInset": "#161618",
+    "borderSubtle": "rgba(255, 255, 255, 0.12)",
+    "borderFocus": "oklch(0.62 0.22 255)",
+    "accent": "oklch(0.58 0.22 255)",
+    "accentForeground": "#ffffff",
+    "status": {
+      "info": "oklch(0.65 0.18 245)",
+      "success": "oklch(0.70 0.19 145)",
+      "warning": "oklch(0.78 0.18 70)",
+      "critical": "oklch(0.62 0.22 25)"
+    }
+  },
+  "geometry": {
+    "radiusBase": "16px",
+    "radiusOuter": "24px",
+    "concentricFormula": "max(0px, 24px - 1px - 8px) = 15px",
+    "scalingFormula": "clamp(0.96, 1 - 2.5/max(W, H), 0.995)",
+    "hitTargetMinTouch": "44px"
+  },
+  "motion": {
+    "profile": "soft-settle",
+    "durationEntry": "240ms",
+    "durationExit": "160ms",
+    "easingEntry": "cubic-bezier(0.16, 1, 0.3, 1)",
+    "easingExit": "cubic-bezier(0.4, 0, 0.7, 0.2)"
+  },
+  "rules": [
+    "MD001_FOCUS_RING",
+    "MD002_REDUCED_MOTION",
+    "MD003_HIT_TARGET_ISOLATION",
+    "MD004_DEAD_BUTTON_CONTRACT",
+    "MD101_BENTO_ROW_FLOW"
+  ]
+}

package/presets/metha/design-tokens.css

@@ -0,0 +1,127 @@
+/**
+ * ME-DESIGN Preset: Metha Engineering & Geoinformatics Cockpit
+ * Author: เมธา ตรีประพันธ์กิจ (Survey Engineering, Kasetsart University)
+ * Version: 1.0.0
+ * Architecture: 3-Layer Design Tokens (Global -> Semantic -> Component)
+ */
+
+:root {
+  /* 01. Typography */
+  --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-sans: "Inter", "Sukhumvit Set", sans-serif;
+  --font-mono: "IBM Plex Mono", "Fira Code", monospace;
+  --tracking-heading: -0.020em;
+  --tracking-coord: 0.04em;
+  --leading-ui: 1.25;
+  --leading-prose: 1.60;
+  --thai-headroom: 4px;
+
+  /* 02. Color Tokens (Deep Slate / Geodetic Field Rig) */
+  --color-canvas: #0c0e14;
+  --color-surface-raised: #141721;
+  --color-surface-inset: #090a0f;
+  --color-surface-dock: rgba(20, 23, 33, 0.88);
+  --color-text-primary: #e6edf3;
+  --color-text-secondary: #8b949e;
+  --color-text-tertiary: #545d68;
+  --color-border-subtle: rgba(255, 255, 255, 0.09);
+  --color-border-strong: rgba(255, 255, 255, 0.18);
+  --color-border-focus: oklch(0.68 0.20 250);
+
+  /* Brand Accents (Survey Electric Indigo & Geodetic Green) */
+  --color-accent: oklch(0.65 0.20 250);
+  --color-accent-hover: oklch(0.70 0.20 250);
+  --color-accent-fg: #ffffff;
+
+  --color-status-info: oklch(0.68 0.20 250);
+  --color-status-success: oklch(0.72 0.18 145);
+  --color-status-warning: oklch(0.78 0.16 75);
+  --color-status-critical: oklch(0.62 0.22 25);
+
+  /* 03. Optical Geometry (Engineering Grid) */
+  --radius-outer: 8px;
+  --radius-inner: 4px;
+  --hit-target-min: 44px;
+
+  /* 04. Motion Tokens (Sub-second Field Precision) */
+  --duration-entry: 140ms;
+  --duration-exit: 90ms;
+  --ease-entry: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* 05. Blur & Glass */
+  --backdrop-blur: blur(12px);
+}
+
+/* Light Mode Overrides */
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-canvas: #f8f9fa;
+    --color-surface-raised: #ffffff;
+    --color-surface-inset: #f1f3f5;
+    --color-surface-dock: rgba(255, 255, 255, 0.90);
+    --color-text-primary: #1a1e24;
+    --color-text-secondary: #57606a;
+    --color-text-tertiary: #8c959f;
+    --color-border-subtle: rgba(0, 0, 0, 0.10);
+    --color-border-strong: rgba(0, 0, 0, 0.22);
+    --color-accent: oklch(0.55 0.20 250);
+  }
+}
+
+/* Core Component Utilities */
+.metha-workbench-card {
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-outer);
+  padding: 16px;
+  transition: border-color var(--duration-entry) var(--ease-entry);
+}
+
+.metha-telemetry-dock {
+  background: var(--color-surface-dock);
+  backdrop-filter: var(--backdrop-blur);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-outer);
+  padding: 12px 16px;
+}
+
+.metha-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--hit-target-min);
+  padding: 0 16px;
+  border-radius: var(--radius-inner);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+  border: 1px solid transparent;
+  cursor: pointer;
+  outline-offset: 2px;
+  transition: background var(--duration-entry) var(--ease-entry);
+}
+
+.metha-btn:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+}
+
+.metha-btn:active .visual-surface {
+  transform: scale(0.98);
+}
+
+.geodetic-coord {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--tracking-coord);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/presets/metha/guidelines.md

@@ -0,0 +1,23 @@
+# Metha Preset Guidelines (`/medesign metha`)
+
+## Designer & Domain Context
+- **Creator:** เมธา ตรีประพันธ์กิจ (Survey Engineering & Geoinformatics, Kasetsart University)
+- **Primary Archetype:** Archetype 32 (GIS Situation Awareness & Telemetry)
+- **Secondary Archetype:** Archetype 38 (Cadastral Survey & QA/QC Workbench)
+
+## Invariants & Design Principles
+1. **Engineering Precision & 8pt Spatial Rhythm:**
+   Outer card radius `8px`, inner component radius `4px`. All geometry, paddings, and data cell heights align to an 8pt baseline grid (16px, 24px, 32px, 48px).
+2. **Geodetic Coordinates & Tabular Typography:**
+   - Coordinate, Distance, Azimuth, and Traverse Closure readouts MUST use monospace (`IBM Plex Mono` / `Fira Code`) with `tabular-nums` and `letter-spacing: 0.04em`.
+   - UI chrome uses `Inter` or `Sukhumvit Set` with `1.25` line-height.
+   - Thai diacritic headroom: minimum `4px` top padding to prevent tone mark clipping (`่ ้ ๊ ๋ ์`) on compact table headers.
+3. **Cockpit Color Palette & ISA-101 Situational Awareness:**
+   - Dark Slate `#0c0e14` background prevents eye fatigue during 8+ hour surveying shifts.
+   - Survey Electric Cyan `oklch(0.65 0.20 250)` for selected cadastral parcel or primary action.
+   - Survey Precision Green `oklch(0.72 0.18 145)` strictly reserved for verified closures / fixed GPS solutions ($1\sigma < 5\text{mm}$).
+   - Warning Amber `oklch(0.78 0.16 75)` for float solutions or high HDOP.
+4. **Motion Profile:**
+   `precision` motion profile (140ms entry, 90ms exit). Map selection and point inspection must respond instantly without distracting physics bounces.
+5. **Layout Architecture:**
+   100dvh viewport canvas layout with floating telemetry docks, collapsible side inspectors, and non-scrambled Bento row grids (`grid-auto-flow: row`).

package/presets/metha/preset.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "../schema.json",
+  "id": "metha",
+  "name": "Metha Engineering & Geoinformatics Cockpit",
+  "version": "1.0.0",
+  "archetype": "Archetype 32: GIS Situation Awareness & Archetype 38: Cadastral Survey & QA/QC Workbench",
+  "description": "Metha's personal engineering design signature: high-density cadastral tables, 8pt optical grid, Inter + IBM Plex Mono tabular coordinates, charcoal/deep slate dark canvas, and survey electric cyan/precision green accents.",
+  "typography": {
+    "display": "'Inter', 'SF Pro Display', sans-serif",
+    "sans": "'Inter', 'Sukhumvit Set', sans-serif",
+    "mono": "'IBM Plex Mono', 'Fira Code', monospace",
+    "headingTracking": "-0.020em",
+    "uiLineHeight": "1.25",
+    "proseLineHeight": "1.60",
+    "thaiHeadroom": "4px"
+  },
+  "color": {
+    "canvas": "#0c0e14",
+    "surfaceRaised": "#141721",
+    "surfaceInset": "#090a0f",
+    "borderSubtle": "rgba(255, 255, 255, 0.09)",
+    "borderFocus": "oklch(0.68 0.20 250)",
+    "accent": "oklch(0.65 0.20 250)",
+    "accentForeground": "#ffffff",
+    "status": {
+      "info": "oklch(0.68 0.20 250)",
+      "success": "oklch(0.72 0.18 145)",
+      "warning": "oklch(0.78 0.16 75)",
+      "critical": "oklch(0.62 0.22 25)"
+    }
+  },
+  "geometry": {
+    "radiusBase": "6px",
+    "radiusOuter": "8px",
+    "concentricFormula": "max(0px, 8px - 1px - 4px) = 3px",
+    "scalingFormula": "clamp(0.97, 1 - 2.2/max(W, H), 0.995)",
+    "hitTargetMinTouch": "44px"
+  },
+  "motion": {
+    "profile": "precision",
+    "durationEntry": "140ms",
+    "durationExit": "90ms",
+    "easingEntry": "cubic-bezier(0.16, 1, 0.3, 1)",
+    "easingExit": "cubic-bezier(0.4, 0, 1, 1)"
+  },
+  "rules": [
+    "MD001_FOCUS_RING",
+    "MD002_REDUCED_MOTION",
+    "MD003_HIT_TARGET_ISOLATION",
+    "MD004_DEAD_BUTTON_CONTRACT",
+    "MD101_BENTO_ROW_FLOW"
+  ]
+}

package/presets/schema.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "MEDesignPreset",
+  "description": "Schema for ME-DESIGN reusable style and engineering presets",
+  "type": "object",
+  "required": [
+    "id",
+    "name",
+    "version",
+    "archetype",
+    "description",
+    "typography",
+    "color",
+    "geometry",
+    "motion",
+    "rules"
+  ],
+  "properties": {
+    "id": {
+      "type": "string",
+      "pattern": "^[a-z0-9_-]+$"
+    },
+    "name": {
+      "type": "string"
+    },
+    "version": {
+      "type": "string"
+    },
+    "archetype": {
+      "type": "string",
+      "description": "Reference to one of the 38 ME-DESIGN Archetypes (e.g. Archetype 02, Archetype 32)"
+    },
+    "description": {
+      "type": "string"
+    },
+    "typography": {
+      "type": "object",
+      "required": ["display", "sans", "mono", "headingTracking", "uiLineHeight", "proseLineHeight"],
+      "properties": {
+        "display": { "type": "string" },
+        "sans": { "type": "string" },
+        "mono": { "type": "string" },
+        "headingTracking": { "type": "string" },
+        "uiLineHeight": { "type": "string" },
+        "proseLineHeight": { "type": "string" },
+        "thaiHeadroom": { "type": "string" }
+      }
+    },
+    "color": {
+      "type": "object",
+      "required": ["canvas", "surfaceRaised", "surfaceInset", "borderSubtle", "borderFocus", "accent", "accentForeground", "status"],
+      "properties": {
+        "canvas": { "type": "string" },
+        "surfaceRaised": { "type": "string" },
+        "surfaceInset": { "type": "string" },
+        "borderSubtle": { "type": "string" },
+        "borderFocus": { "type": "string" },
+        "accent": { "type": "string" },
+        "accentForeground": { "type": "string" },
+        "status": {
+          "type": "object",
+          "required": ["info", "success", "warning", "critical"],
+          "properties": {
+            "info": { "type": "string" },
+            "success": { "type": "string" },
+            "warning": { "type": "string" },
+            "critical": { "type": "string" }
+          }
+        }
+      }
+    },
+    "geometry": {
+      "type": "object",
+      "required": ["radiusBase", "radiusOuter", "concentricFormula", "scalingFormula", "hitTargetMinTouch"],
+      "properties": {
+        "radiusBase": { "type": "string" },
+        "radiusOuter": { "type": "string" },
+        "concentricFormula": { "type": "string" },
+        "scalingFormula": { "type": "string" },
+        "hitTargetMinTouch": { "type": "string" }
+      }
+    },
+    "motion": {
+      "type": "object",
+      "required": ["profile", "durationEntry", "durationExit", "easingEntry", "easingExit"],
+      "properties": {
+        "profile": {
+          "type": "string",
+          "enum": ["precision", "soft-settle", "spring-settle", "instant"]
+        },
+        "durationEntry": { "type": "string" },
+        "durationExit": { "type": "string" },
+        "easingEntry": { "type": "string" },
+        "easingExit": { "type": "string" }
+      }
+    },
+    "rules": {
+      "type": "array",
+      "items": { "type": "string" }
+    }
+  }
+}

package/presets/tesla/design-tokens.css

@@ -0,0 +1,112 @@
+/**
+ * ME-DESIGN Preset: Tesla Cybertruck & In-Vehicle Telemetry
+ * Version: 1.0.0
+ * Architecture: 3-Layer Design Tokens (Global -> Semantic -> Component)
+ */
+
+:root {
+  /* 01. Typography */
+  --font-display: "Space Grotesk", "Inter", sans-serif;
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;
+  --tracking-heading: -0.015em;
+  --tracking-badge: 0.08em;
+  --leading-ui: 1.22;
+  --leading-prose: 1.55;
+  --thai-headroom: 2px;
+
+  /* 02. Color Tokens */
+  --color-canvas: #050505;
+  --color-surface-raised: #111111;
+  --color-surface-inset: #0a0a0a;
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #8e8e93;
+  --color-text-tertiary: #48484a;
+  --color-border-subtle: rgba(255, 255, 255, 0.08);
+  --color-border-strong: rgba(255, 255, 255, 0.20);
+  --color-border-focus: oklch(0.65 0.24 28);
+
+  --color-accent: oklch(0.58 0.24 28);
+  --color-accent-hover: oklch(0.64 0.24 28);
+  --color-accent-fg: #ffffff;
+
+  --color-status-info: oklch(0.78 0.15 200);
+  --color-status-success: oklch(0.72 0.20 142);
+  --color-status-warning: oklch(0.80 0.18 75);
+  --color-status-critical: oklch(0.60 0.25 28);
+
+  /* 03. Optical Geometry (Strict Low-Radius Chamfer) */
+  --radius-outer: 4px;
+  --radius-inner: 2px;
+  --hit-target-min: 44px;
+
+  /* 04. Motion Tokens (High-Velocity Precision) */
+  --duration-entry: 100ms;
+  --duration-exit: 70ms;
+  --ease-entry: cubic-bezier(0.2, 0, 0, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+}
+
+/* Light Mode Overrides */
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-canvas: #f4f4f4;
+    --color-surface-raised: #ffffff;
+    --color-surface-inset: #e5e5e5;
+    --color-text-primary: #111111;
+    --color-text-secondary: #5c5c5c;
+    --color-border-subtle: rgba(0, 0, 0, 0.10);
+    --color-border-strong: rgba(0, 0, 0, 0.25);
+  }
+}
+
+/* Core Component Utilities */
+.tesla-panel {
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-outer);
+  padding: 16px 20px;
+  transition: border-color var(--duration-entry) var(--ease-entry);
+}
+
+.tesla-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--hit-target-min);
+  padding: 0 16px;
+  border-radius: var(--radius-outer);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-badge);
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+  border: 1px solid transparent;
+  cursor: pointer;
+  outline-offset: 2px;
+  transition: background var(--duration-entry) var(--ease-entry);
+}
+
+.tesla-btn:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+}
+
+.tesla-btn:active .visual-surface {
+  transform: scale(0.98);
+}
+
+.telemetry-val {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/presets/tesla/guidelines.md

@@ -0,0 +1,17 @@
+# Tesla Preset Guidelines (`/medesign tesla`)
+
+## Archetype Mapping
+- **Primary Archetype:** Archetype 18 (Industrial / Hardware Product)
+- **Secondary Archetype:** Archetype 32 (GIS Situation Awareness & Telemetry)
+
+## Invariants & Design Principles
+1. **Brutal Geometry & Minimal Radii:**
+   Outer card radius `4px`, inner nested radius `2px`. Avoid large bubbly curves; adhere to razor-sharp automotive engineering surfaces.
+2. **Telemetric Typography:**
+   - Display/Headlines: Space Grotesk / Gotham with crisp technical presence.
+   - Values & Metrics: Monospace (`IBM Plex Mono` / `JetBrains Mono`) with `tabular-nums` for real-time telemetry readouts.
+   - Letter-spacing: `+0.08em` uppercase tracking on status badges and controls.
+3. **High-Velocity Precision Motion:**
+   `precision` motion profile (100ms entry, 70ms exit). State feedback must feel immediate, like physical vehicle switches.
+4. **Contrast & Night Mode Invariant:**
+   Deep obsidian background `#050505`, crisp white metrics `#ffffff`, Tesla Crimson accent `oklch(0.58 0.24 28)` for primary action and critical warnings.

package/presets/tesla/preset.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "../schema.json",
+  "id": "tesla",
+  "name": "Tesla Cybertruck & In-Vehicle Telemetry",
+  "version": "1.0.0",
+  "archetype": "Archetype 18: Industrial / Hardware Product & Archetype 32: GIS / Telemetry",
+  "description": "Brutal hardware minimalism: razor-sharp 2px-4px chamfer radii, deep obsidian/pure black contrast, precision 90-120ms telemetry response, and electric red/cyan telemetry accents.",
+  "typography": {
+    "display": "'Gotham', 'Inter', 'Space Grotesk', sans-serif",
+    "sans": "'Inter', 'Roboto', sans-serif",
+    "mono": "'IBM Plex Mono', 'JetBrains Mono', monospace",
+    "headingTracking": "-0.015em",
+    "uiLineHeight": "1.22",
+    "proseLineHeight": "1.55",
+    "thaiHeadroom": "2px"
+  },
+  "color": {
+    "canvas": "#050505",
+    "surfaceRaised": "#111111",
+    "surfaceInset": "#0a0a0a",
+    "borderSubtle": "rgba(255, 255, 255, 0.08)",
+    "borderFocus": "oklch(0.65 0.24 28)",
+    "accent": "oklch(0.58 0.24 28)",
+    "accentForeground": "#ffffff",
+    "status": {
+      "info": "oklch(0.78 0.15 200)",
+      "success": "oklch(0.72 0.20 142)",
+      "warning": "oklch(0.80 0.18 75)",
+      "critical": "oklch(0.60 0.25 28)"
+    }
+  },
+  "geometry": {
+    "radiusBase": "2px",
+    "radiusOuter": "4px",
+    "concentricFormula": "max(0px, 4px - 1px - 2px) = 1px",
+    "scalingFormula": "clamp(0.97, 1 - 2.0/max(W, H), 0.995)",
+    "hitTargetMinTouch": "44px"
+  },
+  "motion": {
+    "profile": "precision",
+    "durationEntry": "100ms",
+    "durationExit": "70ms",
+    "easingEntry": "cubic-bezier(0.2, 0, 0, 1)",
+    "easingExit": "cubic-bezier(0.4, 0, 1, 1)"
+  },
+  "rules": [
+    "MD001_FOCUS_RING",
+    "MD002_REDUCED_MOTION",
+    "MD003_HIT_TARGET_ISOLATION",
+    "MD004_DEAD_BUTTON_CONTRACT",
+    "MD101_BENTO_ROW_FLOW"
+  ]
+}