devglide 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (252) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +338 -0
  3. package/bin/claude-md-template.js +94 -0
  4. package/bin/devglide.js +387 -0
  5. package/package.json +85 -0
  6. package/pnpm-workspace.yaml +3 -0
  7. package/src/apps/coder/.turbo/turbo-lint.log +5 -0
  8. package/src/apps/coder/package.json +16 -0
  9. package/src/apps/coder/public/favicon.svg +7 -0
  10. package/src/apps/coder/public/page.css +275 -0
  11. package/src/apps/coder/public/page.js +528 -0
  12. package/src/apps/coder/server.js +3 -0
  13. package/src/apps/documentation/public/page.css +597 -0
  14. package/src/apps/documentation/public/page.js +609 -0
  15. package/src/apps/kanban/.turbo/turbo-lint.log +97 -0
  16. package/src/apps/kanban/.turbo/turbo-typecheck.log +5 -0
  17. package/src/apps/kanban/package.json +32 -0
  18. package/src/apps/kanban/public/favicon.svg +7 -0
  19. package/src/apps/kanban/public/page.css +1010 -0
  20. package/src/apps/kanban/public/page.js +1730 -0
  21. package/src/apps/kanban/public/vendor/marked.min.js +6 -0
  22. package/src/apps/kanban/public/vendor/sortable.min.js +2 -0
  23. package/src/apps/kanban/src/db.ts +319 -0
  24. package/src/apps/kanban/src/index.ts +14 -0
  25. package/src/apps/kanban/src/mcp-helpers.test.ts +88 -0
  26. package/src/apps/kanban/src/mcp-helpers.ts +60 -0
  27. package/src/apps/kanban/src/mcp.ts +59 -0
  28. package/src/apps/kanban/src/routes/attachments.ts +161 -0
  29. package/src/apps/kanban/src/routes/features.ts +233 -0
  30. package/src/apps/kanban/src/routes/issues.ts +373 -0
  31. package/src/apps/kanban/src/tools/feature-tools.ts +164 -0
  32. package/src/apps/kanban/src/tools/item-tools.ts +307 -0
  33. package/src/apps/kanban/src/tools/versioned-entry-tools.ts +72 -0
  34. package/src/apps/kanban/tsconfig.check.json +9 -0
  35. package/src/apps/kanban/tsconfig.json +9 -0
  36. package/src/apps/keymap/.turbo/turbo-lint.log +5 -0
  37. package/src/apps/keymap/package.json +16 -0
  38. package/src/apps/keymap/public/page.css +275 -0
  39. package/src/apps/keymap/public/page.js +294 -0
  40. package/src/apps/keymap/server.js +25 -0
  41. package/src/apps/log/.turbo/turbo-build.log +5 -0
  42. package/src/apps/log/.turbo/turbo-lint.log +45 -0
  43. package/src/apps/log/.turbo/turbo-typecheck.log +5 -0
  44. package/src/apps/log/node_modules/.bin/tsc +21 -0
  45. package/src/apps/log/node_modules/.bin/tsserver +21 -0
  46. package/src/apps/log/node_modules/.bin/tsx +21 -0
  47. package/src/apps/log/package.json +36 -0
  48. package/src/apps/log/public/console-sniffer.js +221 -0
  49. package/src/apps/log/public/favicon.svg +7 -0
  50. package/src/apps/log/public/page.css +322 -0
  51. package/src/apps/log/public/page.js +463 -0
  52. package/src/apps/log/src/index.ts +9 -0
  53. package/src/apps/log/src/mcp.ts +122 -0
  54. package/src/apps/log/src/routes/log.ts +333 -0
  55. package/src/apps/log/src/routes/status.ts +25 -0
  56. package/src/apps/log/src/server-sniffer.ts +118 -0
  57. package/src/apps/log/src/services/file-patterns.ts +39 -0
  58. package/src/apps/log/src/services/file-tailer.ts +228 -0
  59. package/src/apps/log/src/services/line-parser.ts +94 -0
  60. package/src/apps/log/src/services/log-writer.ts +39 -0
  61. package/src/apps/log/tsconfig.json +8 -0
  62. package/src/apps/prompts/.turbo/turbo-build.log +5 -0
  63. package/src/apps/prompts/.turbo/turbo-lint.log +24 -0
  64. package/src/apps/prompts/.turbo/turbo-typecheck.log +5 -0
  65. package/src/apps/prompts/mcp.ts +175 -0
  66. package/src/apps/prompts/node_modules/.bin/tsc +21 -0
  67. package/src/apps/prompts/node_modules/.bin/tsserver +21 -0
  68. package/src/apps/prompts/node_modules/.bin/tsx +21 -0
  69. package/src/apps/prompts/package.json +25 -0
  70. package/src/apps/prompts/public/page.css +315 -0
  71. package/src/apps/prompts/public/page.js +541 -0
  72. package/src/apps/prompts/services/prompt-store.ts +212 -0
  73. package/src/apps/prompts/src/index.ts +9 -0
  74. package/src/apps/prompts/tsconfig.json +8 -0
  75. package/src/apps/prompts/types.ts +27 -0
  76. package/src/apps/shell/.turbo/turbo-build.log +5 -0
  77. package/src/apps/shell/.turbo/turbo-lint.log +34 -0
  78. package/src/apps/shell/.turbo/turbo-typecheck.log +5 -0
  79. package/src/apps/shell/package.json +35 -0
  80. package/src/apps/shell/public/favicon.svg +7 -0
  81. package/src/apps/shell/public/page.css +407 -0
  82. package/src/apps/shell/public/page.js +1577 -0
  83. package/src/apps/shell/src/index.ts +150 -0
  84. package/src/apps/shell/src/mcp.ts +398 -0
  85. package/src/apps/shell/src/shell-types.ts +41 -0
  86. package/src/apps/shell/tsconfig.json +8 -0
  87. package/src/apps/test/.turbo/turbo-build.log +5 -0
  88. package/src/apps/test/.turbo/turbo-lint.log +27 -0
  89. package/src/apps/test/.turbo/turbo-typecheck.log +5 -0
  90. package/src/apps/test/node_modules/.bin/tsc +21 -0
  91. package/src/apps/test/node_modules/.bin/tsserver +21 -0
  92. package/src/apps/test/node_modules/.bin/tsx +21 -0
  93. package/src/apps/test/node_modules/.bin/uuid +21 -0
  94. package/src/apps/test/package.json +35 -0
  95. package/src/apps/test/public/favicon.svg +7 -0
  96. package/src/apps/test/public/page.css +499 -0
  97. package/src/apps/test/public/page.js +417 -0
  98. package/src/apps/test/public/scenario-runner.js +450 -0
  99. package/src/apps/test/src/index.ts +9 -0
  100. package/src/apps/test/src/mcp.ts +192 -0
  101. package/src/apps/test/src/routes/trigger.ts +285 -0
  102. package/src/apps/test/src/services/scenario-broadcaster.ts +60 -0
  103. package/src/apps/test/src/services/scenario-manager.ts +361 -0
  104. package/src/apps/test/src/services/scenario-store.ts +145 -0
  105. package/src/apps/test/tsconfig.json +8 -0
  106. package/src/apps/vocabulary/.turbo/turbo-build.log +5 -0
  107. package/src/apps/vocabulary/.turbo/turbo-lint.log +25 -0
  108. package/src/apps/vocabulary/.turbo/turbo-typecheck.log +5 -0
  109. package/src/apps/vocabulary/mcp.ts +173 -0
  110. package/src/apps/vocabulary/node_modules/.bin/tsc +21 -0
  111. package/src/apps/vocabulary/node_modules/.bin/tsserver +21 -0
  112. package/src/apps/vocabulary/node_modules/.bin/tsx +21 -0
  113. package/src/apps/vocabulary/package.json +25 -0
  114. package/src/apps/vocabulary/public/page.css +247 -0
  115. package/src/apps/vocabulary/public/page.js +444 -0
  116. package/src/apps/vocabulary/services/vocabulary-store.ts +179 -0
  117. package/src/apps/vocabulary/src/index.ts +10 -0
  118. package/src/apps/vocabulary/tsconfig.json +8 -0
  119. package/src/apps/vocabulary/types.ts +22 -0
  120. package/src/apps/voice/.turbo/turbo-build.log +5 -0
  121. package/src/apps/voice/.turbo/turbo-lint.log +43 -0
  122. package/src/apps/voice/.turbo/turbo-typecheck.log +5 -0
  123. package/src/apps/voice/node_modules/.bin/openai +21 -0
  124. package/src/apps/voice/node_modules/.bin/tsc +21 -0
  125. package/src/apps/voice/node_modules/.bin/tsserver +21 -0
  126. package/src/apps/voice/node_modules/.bin/tsx +21 -0
  127. package/src/apps/voice/package.json +35 -0
  128. package/src/apps/voice/public/favicon.svg +7 -0
  129. package/src/apps/voice/public/page.css +388 -0
  130. package/src/apps/voice/public/page.js +718 -0
  131. package/src/apps/voice/src/index.ts +10 -0
  132. package/src/apps/voice/src/mcp.ts +70 -0
  133. package/src/apps/voice/src/providers/index.ts +85 -0
  134. package/src/apps/voice/src/providers/openai-compatible.ts +94 -0
  135. package/src/apps/voice/src/providers/types.ts +27 -0
  136. package/src/apps/voice/src/routes/config.ts +118 -0
  137. package/src/apps/voice/src/routes/transcribe.ts +90 -0
  138. package/src/apps/voice/src/services/config-store.ts +129 -0
  139. package/src/apps/voice/src/services/stats.ts +108 -0
  140. package/src/apps/voice/src/transcribe.ts +11 -0
  141. package/src/apps/voice/src/utils/mime.ts +16 -0
  142. package/src/apps/voice/tsconfig.json +8 -0
  143. package/src/apps/workflow/.turbo/turbo-build.log +5 -0
  144. package/src/apps/workflow/.turbo/turbo-lint.log +96 -0
  145. package/src/apps/workflow/.turbo/turbo-typecheck.log +5 -0
  146. package/src/apps/workflow/engine/executors/decision-executor.ts +87 -0
  147. package/src/apps/workflow/engine/executors/file-executor.ts +90 -0
  148. package/src/apps/workflow/engine/executors/git-executor.ts +137 -0
  149. package/src/apps/workflow/engine/executors/http-executor.ts +65 -0
  150. package/src/apps/workflow/engine/executors/index.ts +28 -0
  151. package/src/apps/workflow/engine/executors/kanban-executor.ts +154 -0
  152. package/src/apps/workflow/engine/executors/llm-executor.ts +46 -0
  153. package/src/apps/workflow/engine/executors/log-executor.ts +62 -0
  154. package/src/apps/workflow/engine/executors/loop-executor.ts +14 -0
  155. package/src/apps/workflow/engine/executors/shell-executor.ts +107 -0
  156. package/src/apps/workflow/engine/executors/sub-workflow-executor.ts +61 -0
  157. package/src/apps/workflow/engine/executors/test-executor.ts +73 -0
  158. package/src/apps/workflow/engine/executors/trigger-executor.ts +39 -0
  159. package/src/apps/workflow/engine/expression-evaluator.ts +117 -0
  160. package/src/apps/workflow/engine/graph-runner.ts +438 -0
  161. package/src/apps/workflow/engine/node-executor.ts +104 -0
  162. package/src/apps/workflow/engine/node-registry.ts +15 -0
  163. package/src/apps/workflow/engine/variable-resolver.ts +109 -0
  164. package/src/apps/workflow/mcp.ts +223 -0
  165. package/src/apps/workflow/node_modules/.bin/tsc +21 -0
  166. package/src/apps/workflow/node_modules/.bin/tsserver +21 -0
  167. package/src/apps/workflow/node_modules/.bin/tsx +21 -0
  168. package/src/apps/workflow/package.json +25 -0
  169. package/src/apps/workflow/public/editor/canvas.js +366 -0
  170. package/src/apps/workflow/public/editor/drag-manager.js +326 -0
  171. package/src/apps/workflow/public/editor/edge-renderer.js +235 -0
  172. package/src/apps/workflow/public/editor/history-manager.js +147 -0
  173. package/src/apps/workflow/public/editor/layout-engine.js +159 -0
  174. package/src/apps/workflow/public/editor/node-renderer.js +199 -0
  175. package/src/apps/workflow/public/editor/selection-manager.js +193 -0
  176. package/src/apps/workflow/public/favicon.svg +7 -0
  177. package/src/apps/workflow/public/models/node-types.js +300 -0
  178. package/src/apps/workflow/public/models/workflow-model.js +257 -0
  179. package/src/apps/workflow/public/page.css +406 -0
  180. package/src/apps/workflow/public/page.js +658 -0
  181. package/src/apps/workflow/public/panels/inspector.js +360 -0
  182. package/src/apps/workflow/public/panels/palette.js +106 -0
  183. package/src/apps/workflow/public/panels/run-view.js +275 -0
  184. package/src/apps/workflow/public/panels/toolbar.js +232 -0
  185. package/src/apps/workflow/public/panels/workflow-list.js +237 -0
  186. package/src/apps/workflow/public/state/store.js +47 -0
  187. package/src/apps/workflow/services/custom-node-loader.ts +48 -0
  188. package/src/apps/workflow/services/legacy-converter.ts +72 -0
  189. package/src/apps/workflow/services/run-manager.ts +190 -0
  190. package/src/apps/workflow/services/workflow-store.ts +424 -0
  191. package/src/apps/workflow/services/workflow-validator.test.ts +103 -0
  192. package/src/apps/workflow/services/workflow-validator.ts +98 -0
  193. package/src/apps/workflow/src/index.ts +10 -0
  194. package/src/apps/workflow/templates/ci-pipeline.json +18 -0
  195. package/src/apps/workflow/templates/code-review.json +22 -0
  196. package/src/apps/workflow/templates/kanban-testing.json +24 -0
  197. package/src/apps/workflow/tsconfig.json +8 -0
  198. package/src/apps/workflow/types.ts +268 -0
  199. package/src/packages/auth-middleware.ts +14 -0
  200. package/src/packages/design-tokens/.turbo/turbo-build.log +10 -0
  201. package/src/packages/design-tokens/STYLEGUIDE.md +414 -0
  202. package/src/packages/design-tokens/build.js +413 -0
  203. package/src/packages/design-tokens/demo/index.html +1367 -0
  204. package/src/packages/design-tokens/demo/proposition-a.html +717 -0
  205. package/src/packages/design-tokens/demo/proposition-b.html +1239 -0
  206. package/src/packages/design-tokens/demo/proposition-c.html +1049 -0
  207. package/src/packages/design-tokens/dist/tailwind-preset.js +115 -0
  208. package/src/packages/design-tokens/dist/tokens.css +345 -0
  209. package/src/packages/design-tokens/dist/tokens.d.ts +229 -0
  210. package/src/packages/design-tokens/dist/tokens.js +386 -0
  211. package/src/packages/design-tokens/package.json +25 -0
  212. package/src/packages/design-tokens/tokens.json +228 -0
  213. package/src/packages/devtools-middleware.ts +22 -0
  214. package/src/packages/eslint-config/index.js +63 -0
  215. package/src/packages/eslint-config/node_modules/.bin/eslint +21 -0
  216. package/src/packages/eslint-config/package.json +18 -0
  217. package/src/packages/json-file-store.ts +232 -0
  218. package/src/packages/mcp-utils/.turbo/turbo-build.log +5 -0
  219. package/src/packages/mcp-utils/dist/index.d.ts +33 -0
  220. package/src/packages/mcp-utils/dist/index.d.ts.map +1 -0
  221. package/src/packages/mcp-utils/dist/index.js +126 -0
  222. package/src/packages/mcp-utils/dist/index.js.map +1 -0
  223. package/src/packages/mcp-utils/node_modules/.bin/tsc +21 -0
  224. package/src/packages/mcp-utils/node_modules/.bin/tsserver +21 -0
  225. package/src/packages/mcp-utils/package.json +32 -0
  226. package/src/packages/mcp-utils/src/index.ts +171 -0
  227. package/src/packages/mcp-utils/tsconfig.json +9 -0
  228. package/src/packages/paths.ts +18 -0
  229. package/src/packages/project-context/index.js +55 -0
  230. package/src/packages/project-context/package.json +13 -0
  231. package/src/packages/project-store.ts +127 -0
  232. package/src/packages/server-sniffer.ts +132 -0
  233. package/src/packages/shared-assets/favicon.svg +7 -0
  234. package/src/packages/shared-assets/keymap-registry.js +512 -0
  235. package/src/packages/shared-assets/logo.svg +6 -0
  236. package/src/packages/shared-assets/package.json +11 -0
  237. package/src/packages/shared-assets/ui-utils.js +48 -0
  238. package/src/packages/shared-assets/voice-widget.d.ts +37 -0
  239. package/src/packages/shared-assets/voice-widget.js +695 -0
  240. package/src/packages/shared-types/.turbo/turbo-build.log +5 -0
  241. package/src/packages/shared-types/dist/index.d.ts +39 -0
  242. package/src/packages/shared-types/dist/index.d.ts.map +1 -0
  243. package/src/packages/shared-types/node_modules/.bin/tsc +21 -0
  244. package/src/packages/shared-types/node_modules/.bin/tsserver +21 -0
  245. package/src/packages/shared-types/package.json +25 -0
  246. package/src/packages/shared-types/src/index.ts +41 -0
  247. package/src/packages/shared-types/tsconfig.json +11 -0
  248. package/src/packages/tsconfig/base.json +15 -0
  249. package/src/packages/tsconfig/next.json +14 -0
  250. package/src/packages/tsconfig/node.json +11 -0
  251. package/src/packages/tsconfig/package.json +10 -0
  252. package/turbo.json +25 -0
package/src/packages/design-tokens/demo/proposition-a.html ADDED
@@ -0,0 +1,717 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>DEVGLIDE // PROPOSITION A: TERMINAL GREEN</title>
7
+ <style>
8
+ /* ══════════════════════════════════════════════════════════════════════════
9
+ PROPOSITION A — TERMINAL GREEN
10
+ Design language: GitHub Dark Dimmed + shell interface aesthetic
11
+ Base lightness: 13% | Accent: monochromatic green | Font: monospace
12
+ ══════════════════════════════════════════════════════════════════════════ */
13
+
14
+ /* ── Design Tokens ─────────────────────────────────────────────────────── */
15
+ :root {
16
+ /* Backgrounds */
17
+ --bg-base: #1c2128;
18
+ --bg-surface: #22272e;
19
+ --bg-raised: #2d333b;
20
+ --bg-overlay: #353b44;
21
+
22
+ /* Accent scale */
23
+ --accent: #7ee787;
24
+ --accent-bright: #a0f0a8;
25
+ --accent-dim: #1a3d1e;
26
+ --accent-muted: #2ea043;
27
+
28
+ /* Text */
29
+ --text-primary: #adbac7;
30
+ --text-secondary: #768390;
31
+ --text-muted: #545d68;
32
+
33
+ /* Borders */
34
+ --border-subtle: #2d333b;
35
+ --border-default: #373e47;
36
+ --border-strong: #444c56;
37
+
38
+ /* Operational states */
39
+ --state-idle: #7ee787;
40
+ --state-active: #56d364;
41
+ --state-recording: #ff1500;
42
+ --state-processing: #e3b341;
43
+ --state-success: #4ade80;
44
+ --state-error: #ff3333;
45
+ --state-warning: #d29922;
46
+
47
+ /* Typography */
48
+ --font-mono: 'Courier New', Courier, monospace;
49
+ --ls-tight: 0;
50
+ --ls-normal: 0.05em;
51
+ --ls-wide: 0.12em;
52
+ --ls-wider: 0.2em;
53
+
54
+ /* Spacing scale */
55
+ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
56
+ --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
57
+ --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
58
+
59
+ /* Beveled clip-paths — angular, no rounded corners */
60
+ --bevel-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
61
+ --bevel-md: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
62
+ --bevel-lg: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
63
+ }
64
+
65
+ /* ── Keyframe Animations ───────────────────────────────────────────────── */
66
+ @keyframes crt-sweep {
67
+ 0% { transform: translateY(-100%); }
68
+ 100% { transform: translateY(100vh); }
69
+ }
70
+ @keyframes glow-pulse {
71
+ 0%, 100% { filter: drop-shadow(0 0 6px rgba(126,231,135,.4)); opacity: 1; }
72
+ 50% { filter: drop-shadow(0 0 16px rgba(126,231,135,.8)); opacity: .92; }
73
+ }
74
+ @keyframes alert-pulse {
75
+ 0%, 100% { box-shadow: 0 0 6px rgba(255,21,0,.3); }
76
+ 50% { box-shadow: 0 0 20px rgba(255,21,0,.7); }
77
+ }
78
+ @keyframes blink {
79
+ 0%, 100% { opacity: 1; }
80
+ 50% { opacity: 0; }
81
+ }
82
+ @keyframes scanline-flicker {
83
+ 0% { opacity: .03; }
84
+ 50% { opacity: .06; }
85
+ 100% { opacity: .03; }
86
+ }
87
+ @keyframes badge-rec-pulse {
88
+ 0%, 100% { background: color-mix(in srgb, #ff1500 15%, transparent); }
89
+ 50% { background: color-mix(in srgb, #ff1500 30%, transparent); }
90
+ }
91
+
92
+ /* ── Reset & Base ──────────────────────────────────────────────────────── */
93
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
94
+ html { font-size: 13px; scroll-behavior: smooth; }
95
+ body {
96
+ background: var(--bg-base);
97
+ color: var(--text-primary);
98
+ font-family: var(--font-mono);
99
+ min-height: 100vh;
100
+ line-height: 1.6;
101
+ position: relative;
102
+ overflow-x: hidden;
103
+ }
104
+
105
+ /* Diagonal grid texture overlay */
106
+ body::before {
107
+ content: '';
108
+ position: fixed;
109
+ inset: 0;
110
+ pointer-events: none;
111
+ z-index: 0;
112
+ background-image:
113
+ repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(126,231,135,.015) 30px, rgba(126,231,135,.015) 31px),
114
+ repeating-linear-gradient(-45deg, transparent, transparent 30px, rgba(126,231,135,.015) 30px, rgba(126,231,135,.015) 31px);
115
+ }
116
+
117
+ /* CRT scanline sweep — persistent atmosphere effect */
118
+ body::after {
119
+ content: '';
120
+ position: fixed;
121
+ top: 0; left: 0;
122
+ width: 100%; height: 4px;
123
+ pointer-events: none;
124
+ z-index: 9999;
125
+ background: linear-gradient(180deg, transparent, rgba(126,231,135,.08), rgba(126,231,135,.15), rgba(126,231,135,.08), transparent);
126
+ animation: crt-sweep 6s linear infinite;
127
+ }
128
+
129
+ /* ── Layout ────────────────────────────────────────────────────────────── */
130
+ .page { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: var(--sp-12) var(--sp-6); }
131
+ .section { margin-bottom: var(--sp-16); }
132
+ .section-label { font-size: 10px; letter-spacing: var(--ls-wider); color: var(--text-muted); text-transform: uppercase; margin-bottom: var(--sp-1); }
133
+ .section-title { font-size: 20px; font-weight: 700; letter-spacing: var(--ls-wide); color: var(--accent); text-transform: uppercase; margin-bottom: var(--sp-2); line-height: 1.3; }
134
+ .section-desc { font-size: 12px; color: var(--text-secondary); letter-spacing: var(--ls-normal); margin-bottom: var(--sp-8); max-width: 640px; }
135
+ .section-divider { height: 1px; background: var(--border-default); margin-bottom: var(--sp-8); }
136
+
137
+ /* ── 1. Site Header ────────────────────────────────────────────────────── */
138
+ .site-header {
139
+ position: relative;
140
+ padding: var(--sp-10) var(--sp-8);
141
+ margin-bottom: var(--sp-16);
142
+ background: var(--bg-surface);
143
+ clip-path: var(--bevel-lg);
144
+ border: 1px solid var(--border-default);
145
+ overflow: hidden;
146
+ }
147
+ .site-header::before {
148
+ content: ''; position: absolute; top: 8px; left: 8px;
149
+ width: 24px; height: 24px;
150
+ border-top: 2px solid var(--accent); border-left: 2px solid var(--accent);
151
+ }
152
+ .site-header::after {
153
+ content: ''; position: absolute; bottom: 8px; right: 8px;
154
+ width: 24px; height: 24px;
155
+ border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent);
156
+ }
157
+ .site-header .crt-lines {
158
+ position: absolute; inset: 0; pointer-events: none;
159
+ background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(126,231,135,.02) 2px, rgba(126,231,135,.02) 4px);
160
+ animation: scanline-flicker 4s ease-in-out infinite;
161
+ }
162
+ .header-sys { font-size: 10px; letter-spacing: var(--ls-wider); color: var(--text-muted); text-transform: uppercase; margin-bottom: var(--sp-3); }
163
+ .header-title { font-size: 28px; font-weight: 700; color: var(--text-primary); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: 1.2; margin-bottom: var(--sp-1); }
164
+ .header-title .accent { color: var(--accent); }
165
+ .header-sub { font-size: 13px; color: var(--accent); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: var(--sp-6); }
166
+ .header-meta { font-size: 10px; color: var(--text-muted); letter-spacing: var(--ls-normal); text-transform: uppercase; }
167
+ .header-meta span { color: var(--text-secondary); }
168
+
169
+ /* ── 2. Color Swatches ─────────────────────────────────────────────────── */
170
+ .swatch-group-label { font-size: 10px; letter-spacing: var(--ls-wider); color: var(--text-muted); text-transform: uppercase; margin: var(--sp-6) 0 var(--sp-2); }
171
+ .swatch-group-label:first-of-type { margin-top: 0; }
172
+ .swatch-grid { display: grid; gap: var(--sp-3); }
173
+ .swatch-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
174
+ .swatch-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
175
+ .swatch { clip-path: var(--bevel-sm); overflow: hidden; }
176
+ .swatch-color { height: 56px; border: 1px solid var(--border-subtle); }
177
+ .swatch-info { background: var(--bg-raised); padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border-subtle); }
178
+ .swatch-hex { font-size: 11px; color: var(--text-primary); letter-spacing: var(--ls-normal); text-transform: uppercase; }
179
+ .swatch-token { font-size: 9px; color: var(--text-muted); letter-spacing: var(--ls-normal); margin-top: 2px; }
180
+
181
+ /* ── 3. Typography ─────────────────────────────────────────────────────── */
182
+ .type-sample { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: baseline; gap: var(--sp-6); }
183
+ .type-sample:last-child { border-bottom: none; }
184
+ .type-label { font-size: 10px; color: var(--text-muted); letter-spacing: var(--ls-wider); text-transform: uppercase; flex-shrink: 0; width: 72px; }
185
+ .type-text { text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-primary); }
186
+ .type-meta { font-size: 10px; color: var(--text-muted); letter-spacing: var(--ls-normal); margin-left: auto; flex-shrink: 0; }
187
+ .ls-demo { background: var(--bg-surface); clip-path: var(--bevel-sm); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-2); }
188
+ .ls-label { font-size: 10px; color: var(--text-muted); letter-spacing: var(--ls-wider); text-transform: uppercase; margin-bottom: var(--sp-1); }
189
+ .ls-text { font-size: 16px; color: var(--text-primary); text-transform: uppercase; }
190
+
191
+ /* ── 4. Spacing ────────────────────────────────────────────────────────── */
192
+ .spacing-row { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-2); }
193
+ .spacing-label { font-size: 10px; color: var(--text-muted); letter-spacing: var(--ls-wider); text-transform: uppercase; width: 64px; flex-shrink: 0; text-align: right; }
194
+ .spacing-bar {
195
+ height: 12px;
196
+ background: linear-gradient(90deg, var(--accent-dim), var(--accent-muted));
197
+ clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
198
+ transition: background .2s;
199
+ }
200
+ .spacing-bar:hover { background: linear-gradient(90deg, var(--accent-muted), var(--accent)); }
201
+ .spacing-value { font-size: 10px; color: var(--text-secondary); letter-spacing: var(--ls-normal); flex-shrink: 0; width: 40px; }
202
+
203
+ /* ── 5. Buttons ────────────────────────────────────────────────────────── */
204
+ .btn {
205
+ display: inline-flex; align-items: center; justify-content: center;
206
+ padding: var(--sp-2) var(--sp-5);
207
+ font-family: var(--font-mono); font-size: 11px; font-weight: 700;
208
+ letter-spacing: var(--ls-wider); text-transform: uppercase;
209
+ cursor: pointer; border: none; text-decoration: none;
210
+ clip-path: var(--bevel-sm);
211
+ transition: all .15s; min-height: 36px; line-height: 1.4;
212
+ }
213
+ .btn-primary { background: var(--accent); color: var(--bg-base); }
214
+ .btn-primary:hover { background: var(--accent-bright); filter: drop-shadow(0 0 8px rgba(126,231,135,.4)); }
215
+ .btn-outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-muted); }
216
+ .btn-outline:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
217
+ .btn-ghost { background: transparent; color: var(--text-secondary); }
218
+ .btn-ghost:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
219
+ .btn-danger { background: var(--state-error); color: #fff; }
220
+ .btn-danger:hover { filter: brightness(1.15) drop-shadow(0 0 8px rgba(255,51,51,.4)); }
221
+ .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
222
+ .btn-state-label { font-size: 10px; color: var(--text-muted); letter-spacing: var(--ls-wider); text-transform: uppercase; margin-bottom: var(--sp-2); }
223
+ .btn-compact { padding: var(--sp-1) var(--sp-3); min-height: 28px; font-size: 9px; }
224
+
225
+ /* ── 6. Form Inputs ────────────────────────────────────────────────────── */
226
+ .form-group { margin-bottom: var(--sp-5); }
227
+ .form-label { display: block; font-size: 10px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-2); }
228
+ .form-input, .form-textarea, .form-select {
229
+ width: 100%; background: var(--bg-base); color: var(--text-primary);
230
+ font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--ls-normal);
231
+ padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border-default);
232
+ clip-path: var(--bevel-sm); outline: none;
233
+ transition: border-color .15s, box-shadow .15s;
234
+ }
235
+ .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-muted); }
236
+ .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }
237
+ .form-textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
238
+ .form-select {
239
+ appearance: none; cursor: pointer; padding-right: 36px;
240
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23768390' stroke-width='1.5'/%3E%3C/svg%3E");
241
+ background-repeat: no-repeat; background-position: right 12px center;
242
+ }
243
+ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
244
+
245
+ /* ── 7. Cards ──────────────────────────────────────────────────────────── */
246
+ .card {
247
+ position: relative; background: var(--bg-surface);
248
+ clip-path: var(--bevel-md); transition: transform .15s, filter .15s;
249
+ }
250
+ .card:hover { transform: translateY(-2px); filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
251
+ .card::before {
252
+ content: ''; position: absolute; top: 6px; left: 6px;
253
+ width: 16px; height: 16px;
254
+ border-top: 2px solid var(--border-strong); border-left: 2px solid var(--border-strong); z-index: 2;
255
+ }
256
+ .card::after {
257
+ content: ''; position: absolute; bottom: 6px; right: 6px;
258
+ width: 16px; height: 16px;
259
+ border-bottom: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); z-index: 2;
260
+ }
261
+ .card-accent::before, .card-accent::after { border-color: var(--accent-muted); }
262
+ .card-glow::before, .card-glow::after { border-color: var(--state-processing); }
263
+ .card-glow { box-shadow: 0 0 20px -4px rgba(227,179,65,.15); }
264
+ .card-header { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; }
265
+ .card-header-title { font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-secondary); }
266
+ .card-accent .card-header-title { color: var(--accent); }
267
+ .card-glow .card-header-title { color: var(--state-processing); }
268
+ .card-body { padding: var(--sp-5); }
269
+ .card-body p { font-size: 12px; color: var(--text-secondary); letter-spacing: var(--ls-normal); line-height: 1.6; }
270
+ .card-footer { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-subtle); display: flex; justify-content: flex-end; }
271
+ .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
272
+
273
+ /* ── 8. Badges ─────────────────────────────────────────────────────────── */
274
+ .badge {
275
+ display: inline-flex; align-items: center; gap: 6px;
276
+ font-family: var(--font-mono); font-size: 10px; font-weight: 700;
277
+ letter-spacing: var(--ls-wider); text-transform: uppercase; padding: 4px 12px;
278
+ clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
279
+ }
280
+ .badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
281
+ .badge-idle { background: color-mix(in srgb, #7ee787 10%, transparent); color: var(--state-idle); }
282
+ .badge-active { background: color-mix(in srgb, #56d364 12%, transparent); color: var(--state-active); }
283
+ .badge-recording { background: color-mix(in srgb, #ff1500 15%, transparent); color: var(--state-recording); animation: badge-rec-pulse 1.5s ease-in-out infinite; }
284
+ .badge-recording .badge-dot { animation: alert-pulse 1.5s ease-in-out infinite; }
285
+ .badge-processing { background: color-mix(in srgb, #e3b341 10%, transparent); color: var(--state-processing); }
286
+ .badge-success { background: color-mix(in srgb, #4ade80 10%, transparent); color: var(--state-success); }
287
+ .badge-error { background: color-mix(in srgb, #ff3333 12%, transparent); color: var(--state-error); }
288
+ .badge-warning { background: color-mix(in srgb, #d29922 10%, transparent); color: var(--state-warning); }
289
+ .badges-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
290
+
291
+ /* ── 9. Status Indicators ──────────────────────────────────────────────── */
292
+ .status-row { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
293
+ .status-item { display: flex; align-items: center; gap: var(--sp-2); }
294
+ .status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
295
+ .status-dot-idle { background: var(--state-idle); color: var(--state-idle); }
296
+ .status-dot-active { background: var(--state-active); color: var(--state-active); }
297
+ .status-dot-recording { background: var(--state-recording); color: var(--state-recording); animation: alert-pulse 1.5s ease-in-out infinite; }
298
+ .status-dot-processing { background: var(--state-processing); color: var(--state-processing); }
299
+ .status-dot-success { background: var(--state-success); color: var(--state-success); }
300
+ .status-dot-error { background: var(--state-error); color: var(--state-error); }
301
+ .status-dot-warning { background: var(--state-warning); color: var(--state-warning); }
302
+ .status-label { font-size: 10px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-secondary); }
303
+
304
+ /* ── 10. Animation Demos ───────────────────────────────────────────────── */
305
+ .anim-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
306
+ .anim-box {
307
+ background: var(--bg-surface); clip-path: var(--bevel-sm);
308
+ padding: var(--sp-5); display: flex; flex-direction: column;
309
+ align-items: center; gap: var(--sp-4); min-height: 120px;
310
+ justify-content: center; position: relative; overflow: hidden;
311
+ }
312
+ .anim-label { font-size: 10px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted); }
313
+ .anim-crt-demo { position: relative; width: 80px; height: 48px; background: var(--bg-raised); overflow: hidden; }
314
+ .anim-crt-demo::after {
315
+ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
316
+ background: linear-gradient(180deg, transparent, rgba(126,231,135,.15), transparent);
317
+ animation: crt-sweep 2s linear infinite;
318
+ }
319
+ .anim-crt-demo .crt-scanlines {
320
+ position: absolute; inset: 0;
321
+ background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(126,231,135,.04) 2px, rgba(126,231,135,.04) 4px);
322
+ }
323
+ .anim-glow-target { width: 48px; height: 48px; background: var(--accent); clip-path: var(--bevel-sm); animation: glow-pulse 2s ease-in-out infinite; }
324
+ .anim-alert-target { width: 48px; height: 48px; background: var(--state-recording); clip-path: var(--bevel-sm); animation: alert-pulse 1.5s ease-in-out infinite; }
325
+ .anim-cursor { display: flex; align-items: center; gap: 2px; }
326
+ .anim-cursor-text { font-size: 16px; color: var(--accent); letter-spacing: var(--ls-normal); }
327
+ .anim-cursor-block { display: inline-block; width: 10px; height: 18px; background: var(--accent); animation: blink 1s step-end infinite; }
328
+
329
+ /* ── 11. App Header Bar ────────────────────────────────────────────────── */
330
+ .app-header-sample {
331
+ height: 38px; background: var(--bg-surface);
332
+ border: 1px solid var(--border-default);
333
+ display: flex; align-items: center; justify-content: space-between;
334
+ padding: 0 var(--sp-4); clip-path: var(--bevel-sm); position: relative;
335
+ }
336
+ .app-header-sample::before {
337
+ content: ''; position: absolute; top: 4px; left: 4px;
338
+ width: 10px; height: 10px;
339
+ border-top: 1.5px solid var(--accent-muted); border-left: 1.5px solid var(--accent-muted);
340
+ }
341
+ .app-header-sample::after {
342
+ content: ''; position: absolute; bottom: 4px; right: 4px;
343
+ width: 10px; height: 10px;
344
+ border-bottom: 1.5px solid var(--accent-muted); border-right: 1.5px solid var(--accent-muted);
345
+ }
346
+ .app-header-name { font-size: 12px; font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--accent); padding-left: var(--sp-4); }
347
+ .app-header-right { display: flex; align-items: center; gap: var(--sp-3); padding-right: var(--sp-3); }
348
+ .app-header-status { font-size: 9px; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted); }
349
+ .app-headers-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
350
+
351
+ /* ── Footer & Utilities ────────────────────────────────────────────────── */
352
+ .site-footer { margin-top: var(--sp-16); padding-top: var(--sp-6); border-top: 1px solid var(--border-subtle); text-align: center; }
353
+ .site-footer p { font-size: 10px; color: var(--text-muted); letter-spacing: var(--ls-wider); text-transform: uppercase; }
354
+ .compact-btn { font-size: 9px !important; padding: var(--sp-1) var(--sp-3) !important; min-height: 24px !important; }
355
+ .mini-badge { font-size: 8px; padding: 2px 8px; }
356
+ .mini-badge .badge-dot { width: 5px; height: 5px; }
357
+
358
+ /* ── Responsive ────────────────────────────────────────────────────────── */
359
+ @media (max-width: 768px) {
360
+ .cards-grid { grid-template-columns: 1fr; }
361
+ }
362
+ @media (max-width: 640px) {
363
+ .swatch-grid { grid-template-columns: 1fr 1fr !important; }
364
+ .form-grid { grid-template-columns: 1fr; }
365
+ .anim-grid { grid-template-columns: 1fr 1fr; }
366
+ }
367
+ </style>
368
+ </head>
369
+ <body>
370
+ <div class="page">
371
+
372
+ <!-- ══ 1. HEADER ═══════════════════════════════════════════════════════ -->
373
+ <header class="site-header">
374
+ <div class="crt-lines"></div>
375
+ <div class="header-sys">// DEVGLIDE DESIGN SYSTEM &mdash; STYLEGUIDE PROPOSITION</div>
376
+ <h1 class="header-title">PROPOSITION A: <span class="accent">TERMINAL GREEN</span></h1>
377
+ <div class="header-sub">GITHUB DARK DIMMED &mdash; SHELL INTERFACE LANGUAGE</div>
378
+ <div class="header-meta">
379
+ REV <span>2026.03.10</span> &bull;
380
+ STATUS <span>ACTIVE</span> &bull;
381
+ VARIANT <span>01/03</span> &bull;
382
+ BASE LIGHTNESS <span>13%</span>
383
+ </div>
384
+ </header>
385
+
386
+ <!-- ══ 2. COLOR MATRIX ═════════════════════════════════════════════════ -->
387
+ <section class="section">
388
+ <div class="section-label">// 02</div>
389
+ <h2 class="section-title">COLOR MATRIX</h2>
390
+ <p class="section-desc">FULL SPECTRUM ALLOCATION. COOL BLUE-GRAY BASE WITH MONOCHROMATIC GREEN ACCENT SCALE. STATE COLORS PROVIDE OPERATIONAL FEEDBACK ACROSS ALL SUBSYSTEMS.</p>
391
+ <div class="section-divider"></div>
392
+
393
+ <div class="swatch-group-label">BACKGROUNDS</div>
394
+ <div class="swatch-grid cols-4">
395
+ <div class="swatch"><div class="swatch-color" style="background:#1c2128"></div><div class="swatch-info"><div class="swatch-hex">#1C2128</div><div class="swatch-token">bg-base</div></div></div>
396
+ <div class="swatch"><div class="swatch-color" style="background:#22272e"></div><div class="swatch-info"><div class="swatch-hex">#22272E</div><div class="swatch-token">bg-surface</div></div></div>
397
+ <div class="swatch"><div class="swatch-color" style="background:#2d333b"></div><div class="swatch-info"><div class="swatch-hex">#2D333B</div><div class="swatch-token">bg-raised</div></div></div>
398
+ <div class="swatch"><div class="swatch-color" style="background:#353b44"></div><div class="swatch-info"><div class="swatch-hex">#353B44</div><div class="swatch-token">bg-overlay</div></div></div>
399
+ </div>
400
+
401
+ <div class="swatch-group-label">ACCENT SCALE</div>
402
+ <div class="swatch-grid cols-4">
403
+ <div class="swatch"><div class="swatch-color" style="background:#7ee787"></div><div class="swatch-info"><div class="swatch-hex">#7EE787</div><div class="swatch-token">accent</div></div></div>
404
+ <div class="swatch"><div class="swatch-color" style="background:#a0f0a8"></div><div class="swatch-info"><div class="swatch-hex">#A0F0A8</div><div class="swatch-token">accent-bright</div></div></div>
405
+ <div class="swatch"><div class="swatch-color" style="background:#1a3d1e"></div><div class="swatch-info"><div class="swatch-hex">#1A3D1E</div><div class="swatch-token">accent-dim</div></div></div>
406
+ <div class="swatch"><div class="swatch-color" style="background:#2ea043"></div><div class="swatch-info"><div class="swatch-hex">#2EA043</div><div class="swatch-token">accent-muted</div></div></div>
407
+ </div>
408
+
409
+ <div class="swatch-group-label">TEXT</div>
410
+ <div class="swatch-grid cols-3">
411
+ <div class="swatch"><div class="swatch-color" style="background:#adbac7"></div><div class="swatch-info"><div class="swatch-hex">#ADBAC7</div><div class="swatch-token">text-primary</div></div></div>
412
+ <div class="swatch"><div class="swatch-color" style="background:#768390"></div><div class="swatch-info"><div class="swatch-hex">#768390</div><div class="swatch-token">text-secondary</div></div></div>
413
+ <div class="swatch"><div class="swatch-color" style="background:#545d68"></div><div class="swatch-info"><div class="swatch-hex">#545D68</div><div class="swatch-token">text-muted</div></div></div>
414
+ </div>
415
+
416
+ <div class="swatch-group-label">BORDERS</div>
417
+ <div class="swatch-grid cols-3">
418
+ <div class="swatch"><div class="swatch-color" style="background:#2d333b"></div><div class="swatch-info"><div class="swatch-hex">#2D333B</div><div class="swatch-token">border-subtle</div></div></div>
419
+ <div class="swatch"><div class="swatch-color" style="background:#373e47"></div><div class="swatch-info"><div class="swatch-hex">#373E47</div><div class="swatch-token">border-default</div></div></div>
420
+ <div class="swatch"><div class="swatch-color" style="background:#444c56"></div><div class="swatch-info"><div class="swatch-hex">#444C56</div><div class="swatch-token">border-strong</div></div></div>
421
+ </div>
422
+
423
+ <div class="swatch-group-label">OPERATIONAL STATES</div>
424
+ <div class="swatch-grid cols-4">
425
+ <div class="swatch"><div class="swatch-color" style="background:#7ee787"></div><div class="swatch-info"><div class="swatch-hex">#7EE787</div><div class="swatch-token">state-idle</div></div></div>
426
+ <div class="swatch"><div class="swatch-color" style="background:#56d364"></div><div class="swatch-info"><div class="swatch-hex">#56D364</div><div class="swatch-token">state-active</div></div></div>
427
+ <div class="swatch"><div class="swatch-color" style="background:#ff1500"></div><div class="swatch-info"><div class="swatch-hex">#FF1500</div><div class="swatch-token">state-recording</div></div></div>
428
+ <div class="swatch"><div class="swatch-color" style="background:#e3b341"></div><div class="swatch-info"><div class="swatch-hex">#E3B341</div><div class="swatch-token">state-processing</div></div></div>
429
+ <div class="swatch"><div class="swatch-color" style="background:#4ade80"></div><div class="swatch-info"><div class="swatch-hex">#4ADE80</div><div class="swatch-token">state-success</div></div></div>
430
+ <div class="swatch"><div class="swatch-color" style="background:#ff3333"></div><div class="swatch-info"><div class="swatch-hex">#FF3333</div><div class="swatch-token">state-error</div></div></div>
431
+ <div class="swatch"><div class="swatch-color" style="background:#d29922"></div><div class="swatch-info"><div class="swatch-hex">#D29922</div><div class="swatch-token">state-warning</div></div></div>
432
+ </div>
433
+ </section>
434
+
435
+ <!-- ══ 3. TYPOGRAPHY ═══════════════════════════════════════════════════ -->
436
+ <section class="section">
437
+ <div class="section-label">// 03</div>
438
+ <h2 class="section-title">TYPOGRAPHY</h2>
439
+ <p class="section-desc">SINGLE TYPEFACE SYSTEM. COURIER NEW MONOSPACE ACROSS ALL SURFACES. UPPERCASE TRANSFORMS WITH CALIBRATED LETTER-SPACING.</p>
440
+ <div class="section-divider"></div>
441
+
442
+ <div class="swatch-group-label">SIZE SCALE</div>
443
+ <div style="background:var(--bg-surface);clip-path:var(--bevel-sm);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-6)">
444
+ <div class="type-sample"><div class="type-label">XS / 10PX</div><div class="type-text" style="font-size:10px">SYSTEM INTERFACE TYPOGRAPHY</div><div class="type-meta">LABELS, CAPTIONS</div></div>
445
+ <div class="type-sample"><div class="type-label">SM / 12PX</div><div class="type-text" style="font-size:12px">SYSTEM INTERFACE TYPOGRAPHY</div><div class="type-meta">BODY SMALL, META</div></div>
446
+ <div class="type-sample"><div class="type-label">MD / 13PX</div><div class="type-text" style="font-size:13px">SYSTEM INTERFACE TYPOGRAPHY</div><div class="type-meta">BODY DEFAULT</div></div>
447
+ <div class="type-sample"><div class="type-label">LG / 16PX</div><div class="type-text" style="font-size:16px">SYSTEM INTERFACE TYPOGRAPHY</div><div class="type-meta">SUBHEADINGS</div></div>
448
+ <div class="type-sample"><div class="type-label">XL / 20PX</div><div class="type-text" style="font-size:20px">SYSTEM INTERFACE TYPOGRAPHY</div><div class="type-meta">SECTION HEADERS</div></div>
449
+ <div class="type-sample"><div class="type-label">2XL / 28PX</div><div class="type-text" style="font-size:28px">SYSTEM INTERFACE</div><div class="type-meta">PAGE TITLES</div></div>
450
+ <div class="type-sample"><div class="type-label">3XL / 36PX</div><div class="type-text" style="font-size:36px">TERMINAL</div><div class="type-meta">DISPLAY</div></div>
451
+ </div>
452
+
453
+ <div class="swatch-group-label">LETTER-SPACING SCALE</div>
454
+ <div class="ls-demo"><div class="ls-label">TIGHT &mdash; 0</div><div class="ls-text" style="letter-spacing:0">COMMAND INTERFACE READY</div></div>
455
+ <div class="ls-demo"><div class="ls-label">NORMAL &mdash; 0.05EM</div><div class="ls-text" style="letter-spacing:0.05em">COMMAND INTERFACE READY</div></div>
456
+ <div class="ls-demo"><div class="ls-label">WIDE &mdash; 0.12EM</div><div class="ls-text" style="letter-spacing:0.12em">COMMAND INTERFACE READY</div></div>
457
+ <div class="ls-demo"><div class="ls-label">WIDER &mdash; 0.2EM</div><div class="ls-text" style="letter-spacing:0.2em">COMMAND INTERFACE READY</div></div>
458
+ </section>
459
+
460
+ <!-- ══ 4. SPACING SCALE ════════════════════════════════════════════════ -->
461
+ <section class="section">
462
+ <div class="section-label">// 04</div>
463
+ <h2 class="section-title">SPACING SCALE</h2>
464
+ <p class="section-desc">BASE-4 PROGRESSION. 12 DEFINED INTERVALS FROM 4PX TO 96PX. ALL LAYOUT DIMENSIONS MUST CONFORM TO THIS GRID.</p>
465
+ <div class="section-divider"></div>
466
+
467
+ <div style="background:var(--bg-surface);clip-path:var(--bevel-sm);padding:var(--sp-5)">
468
+ <div class="spacing-row"><div class="spacing-label">SP-1</div><div class="spacing-bar" style="width:4px"></div><div class="spacing-value">4PX</div></div>
469
+ <div class="spacing-row"><div class="spacing-label">SP-2</div><div class="spacing-bar" style="width:8px"></div><div class="spacing-value">8PX</div></div>
470
+ <div class="spacing-row"><div class="spacing-label">SP-3</div><div class="spacing-bar" style="width:12px"></div><div class="spacing-value">12PX</div></div>
471
+ <div class="spacing-row"><div class="spacing-label">SP-4</div><div class="spacing-bar" style="width:16px"></div><div class="spacing-value">16PX</div></div>
472
+ <div class="spacing-row"><div class="spacing-label">SP-5</div><div class="spacing-bar" style="width:20px"></div><div class="spacing-value">20PX</div></div>
473
+ <div class="spacing-row"><div class="spacing-label">SP-6</div><div class="spacing-bar" style="width:48px"></div><div class="spacing-value">24PX</div></div>
474
+ <div class="spacing-row"><div class="spacing-label">SP-8</div><div class="spacing-bar" style="width:80px"></div><div class="spacing-value">32PX</div></div>
475
+ <div class="spacing-row"><div class="spacing-label">SP-10</div><div class="spacing-bar" style="width:120px"></div><div class="spacing-value">40PX</div></div>
476
+ <div class="spacing-row"><div class="spacing-label">SP-12</div><div class="spacing-bar" style="width:160px"></div><div class="spacing-value">48PX</div></div>
477
+ <div class="spacing-row"><div class="spacing-label">SP-16</div><div class="spacing-bar" style="width:220px"></div><div class="spacing-value">64PX</div></div>
478
+ <div class="spacing-row"><div class="spacing-label">SP-20</div><div class="spacing-bar" style="width:300px"></div><div class="spacing-value">80PX</div></div>
479
+ <div class="spacing-row"><div class="spacing-label">SP-24</div><div class="spacing-bar" style="width:400px"></div><div class="spacing-value">96PX</div></div>
480
+ </div>
481
+ </section>
482
+
483
+ <!-- ══ 5. INTERFACE CONTROLS ═══════════════════════════════════════════ -->
484
+ <section class="section">
485
+ <div class="section-label">// 05</div>
486
+ <h2 class="section-title">INTERFACE CONTROLS</h2>
487
+ <p class="section-desc">FOUR BUTTON VARIANTS. ALL USE BEVELED CLIP-PATH GEOMETRY. HOVER STATES ADD GLOW EMISSIONS AND BACKGROUND SHIFTS.</p>
488
+ <div class="section-divider"></div>
489
+
490
+ <div class="btn-state-label">DEFAULT STATE</div>
491
+ <div class="btn-row">
492
+ <button class="btn btn-primary">EXECUTE</button>
493
+ <button class="btn btn-outline">CONFIGURE</button>
494
+ <button class="btn btn-ghost">DISMISS</button>
495
+ <button class="btn btn-danger">TERMINATE</button>
496
+ </div>
497
+
498
+ <div class="btn-state-label" style="margin-top:var(--sp-6)">WITH ICONS</div>
499
+ <div class="btn-row">
500
+ <button class="btn btn-primary">&gt;_ DEPLOY</button>
501
+ <button class="btn btn-outline">[ ] SELECT</button>
502
+ <button class="btn btn-ghost">&times; CLOSE</button>
503
+ <button class="btn btn-danger">! ABORT</button>
504
+ </div>
505
+
506
+ <div class="btn-state-label" style="margin-top:var(--sp-6)">COMPACT</div>
507
+ <div class="btn-row">
508
+ <button class="btn btn-primary btn-compact">RUN</button>
509
+ <button class="btn btn-outline btn-compact">EDIT</button>
510
+ <button class="btn btn-ghost btn-compact">SKIP</button>
511
+ <button class="btn btn-danger btn-compact">DELETE</button>
512
+ </div>
513
+ </section>
514
+
515
+ <!-- ══ 6. DATA INPUT FIELDS ════════════════════════════════════════════ -->
516
+ <section class="section">
517
+ <div class="section-label">// 06</div>
518
+ <h2 class="section-title">DATA INPUT FIELDS</h2>
519
+ <p class="section-desc">ANGULAR CLIP-PATH GEOMETRY. MONOSPACE FONT. ACCENT BORDER ON FOCUS ACQUISITION. ALL FIELDS CONFORM TO THE BEVELED PANEL LANGUAGE.</p>
520
+ <div class="section-divider"></div>
521
+
522
+ <div class="form-grid">
523
+ <div>
524
+ <div class="form-group">
525
+ <label class="form-label">COMMAND INPUT</label>
526
+ <input type="text" class="form-input" placeholder="ENTER COMMAND SEQUENCE..."/>
527
+ </div>
528
+ <div class="form-group">
529
+ <label class="form-label">IDENTIFIER</label>
530
+ <input type="text" class="form-input" value="DEVGLIDE-2026-0310"/>
531
+ </div>
532
+ <div class="form-group">
533
+ <label class="form-label">SUBSYSTEM SELECT</label>
534
+ <select class="form-select">
535
+ <option>VOICE INTERFACE</option>
536
+ <option>SHELL TERMINAL</option>
537
+ <option>WORKFLOW ENGINE</option>
538
+ <option>LOG ANALYZER</option>
539
+ <option>TEST RUNNER</option>
540
+ </select>
541
+ </div>
542
+ </div>
543
+ <div>
544
+ <div class="form-group">
545
+ <label class="form-label">SYSTEM LOG OUTPUT</label>
546
+ <textarea class="form-textarea" rows="8" placeholder="// OUTPUT STREAM...">2026-03-10T08:00:00Z [INFO] SYSTEM BOOT SEQUENCE INITIATED
547
+ 2026-03-10T08:00:01Z [INFO] LOADING DESIGN TOKENS...
548
+ 2026-03-10T08:00:01Z [OK] TOKEN REGISTRY: 47 ENTRIES
549
+ 2026-03-10T08:00:02Z [INFO] THEME ENGINE ONLINE
550
+ 2026-03-10T08:00:02Z [OK] ALL SUBSYSTEMS NOMINAL</textarea>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </section>
555
+
556
+ <!-- ══ 7. PANEL COMPONENTS ═════════════════════════════════════════════ -->
557
+ <section class="section">
558
+ <div class="section-label">// 07</div>
559
+ <h2 class="section-title">PANEL COMPONENTS</h2>
560
+ <p class="section-desc">BEVELED CARD PANELS WITH CORNER BRACKET DECORATIONS. THREE VARIANTS: STANDARD, ACCENT-HIGHLIGHTED, AND STATE-GLOWING.</p>
561
+ <div class="section-divider"></div>
562
+
563
+ <div class="cards-grid">
564
+ <div class="card">
565
+ <div class="card-header">
566
+ <span class="card-header-title">SYSTEM MODULE</span>
567
+ <span class="badge badge-idle mini-badge"><span class="badge-dot" style="background:var(--state-idle)"></span>IDLE</span>
568
+ </div>
569
+ <div class="card-body"><p>STANDARD PANEL COMPONENT. SURFACE BACKGROUND WITH SUBTLE BORDER BRACKETS. USED FOR GENERAL CONTENT DISPLAY AND INFORMATION GROUPING.</p></div>
570
+ <div class="card-footer"><button class="btn btn-ghost compact-btn">INSPECT &gt;</button></div>
571
+ </div>
572
+ <div class="card card-accent">
573
+ <div class="card-header">
574
+ <span class="card-header-title">ACTIVE PROCESS</span>
575
+ <span class="badge badge-active mini-badge"><span class="badge-dot" style="background:var(--state-active)"></span>ACTIVE</span>
576
+ </div>
577
+ <div class="card-body"><p>ACCENT-HIGHLIGHTED VARIANT. GREEN CORNER BRACKETS INDICATE ELEVATED PRIORITY OR CURRENTLY SELECTED STATE. DRAWS OPERATOR ATTENTION.</p></div>
578
+ <div class="card-footer"><button class="btn btn-outline compact-btn">ENGAGE &gt;</button></div>
579
+ </div>
580
+ <div class="card card-glow">
581
+ <div class="card-header">
582
+ <span class="card-header-title">PROCESSING QUEUE</span>
583
+ <span class="badge badge-processing mini-badge"><span class="badge-dot" style="background:var(--state-processing)"></span>PROCESSING</span>
584
+ </div>
585
+ <div class="card-body"><p>STATE-GLOW VARIANT. AMBER PERIMETER GLOW INDICATES ACTIVE PROCESSING. CORNER BRACKETS MATCH STATE COLOR FOR UNIFIED FEEDBACK.</p></div>
586
+ <div class="card-footer"><button class="btn btn-ghost compact-btn" style="color:var(--state-processing)">MONITOR &gt;</button></div>
587
+ </div>
588
+ </div>
589
+ </section>
590
+
591
+ <!-- ══ 8. STATE BADGES ═════════════════════════════════════════════════ -->
592
+ <section class="section">
593
+ <div class="section-label">// 08</div>
594
+ <h2 class="section-title">STATE BADGES</h2>
595
+ <p class="section-desc">SEVEN OPERATIONAL STATES. SEMI-TRANSPARENT BACKGROUNDS VIA COLOR-MIX(). RECORDING STATE FEATURES CONTINUOUS PULSE ANIMATION.</p>
596
+ <div class="section-divider"></div>
597
+
598
+ <div class="badges-wrap">
599
+ <span class="badge badge-idle"><span class="badge-dot" style="background:var(--state-idle)"></span>IDLE</span>
600
+ <span class="badge badge-active"><span class="badge-dot" style="background:var(--state-active)"></span>ACTIVE</span>
601
+ <span class="badge badge-recording"><span class="badge-dot" style="background:var(--state-recording)"></span>RECORDING</span>
602
+ <span class="badge badge-processing"><span class="badge-dot" style="background:var(--state-processing)"></span>PROCESSING</span>
603
+ <span class="badge badge-success"><span class="badge-dot" style="background:var(--state-success)"></span>SUCCESS</span>
604
+ <span class="badge badge-error"><span class="badge-dot" style="background:var(--state-error)"></span>ERROR</span>
605
+ <span class="badge badge-warning"><span class="badge-dot" style="background:var(--state-warning)"></span>WARNING</span>
606
+ </div>
607
+ </section>
608
+
609
+ <!-- ══ 9. STATUS INDICATORS ════════════════════════════════════════════ -->
610
+ <section class="section">
611
+ <div class="section-label">// 09</div>
612
+ <h2 class="section-title">STATUS INDICATORS</h2>
613
+ <p class="section-desc">MINIMAL DOT + LABEL FORMAT. EACH DOT EMITS A GLOW MATCHING ITS STATE COLOR. RECORDING DOT PULSES CONTINUOUSLY TO SIGNAL LIVE CAPTURE.</p>
614
+ <div class="section-divider"></div>
615
+
616
+ <div style="background:var(--bg-surface);clip-path:var(--bevel-sm);padding:var(--sp-5)">
617
+ <div class="status-row">
618
+ <div class="status-item"><div class="status-dot status-dot-idle"></div><span class="status-label">IDLE</span></div>
619
+ <div class="status-item"><div class="status-dot status-dot-active"></div><span class="status-label">ACTIVE</span></div>
620
+ <div class="status-item"><div class="status-dot status-dot-recording"></div><span class="status-label">RECORDING</span></div>
621
+ <div class="status-item"><div class="status-dot status-dot-processing"></div><span class="status-label">PROCESSING</span></div>
622
+ <div class="status-item"><div class="status-dot status-dot-success"></div><span class="status-label">SUCCESS</span></div>
623
+ <div class="status-item"><div class="status-dot status-dot-error"></div><span class="status-label">ERROR</span></div>
624
+ <div class="status-item"><div class="status-dot status-dot-warning"></div><span class="status-label">WARNING</span></div>
625
+ </div>
626
+ </div>
627
+ </section>
628
+
629
+ <!-- ══ 10. ANIMATION REGISTRY ══════════════════════════════════════════ -->
630
+ <section class="section">
631
+ <div class="section-label">// 10</div>
632
+ <h2 class="section-title">ANIMATION REGISTRY</h2>
633
+ <p class="section-desc">FOUR CORE ANIMATIONS. CRT SWEEP FOR ATMOSPHERE, GLOW PULSE FOR EMPHASIS, ALERT PULSE FOR CRITICAL STATES, BLINK FOR CURSOR PRESENCE.</p>
634
+ <div class="section-divider"></div>
635
+
636
+ <div class="anim-grid">
637
+ <div class="anim-box">
638
+ <div class="anim-crt-demo"><div class="crt-scanlines"></div></div>
639
+ <div class="anim-label">CRT SWEEP</div>
640
+ </div>
641
+ <div class="anim-box">
642
+ <div class="anim-glow-target"></div>
643
+ <div class="anim-label">GLOW PULSE</div>
644
+ </div>
645
+ <div class="anim-box">
646
+ <div class="anim-alert-target"></div>
647
+ <div class="anim-label">ALERT PULSE</div>
648
+ </div>
649
+ <div class="anim-box">
650
+ <div class="anim-cursor"><span class="anim-cursor-text">&gt;_</span><span class="anim-cursor-block"></span></div>
651
+ <div class="anim-label">BLINK CURSOR</div>
652
+ </div>
653
+ </div>
654
+ </section>
655
+
656
+ <!-- ══ 11. APP HEADER BAR ══════════════════════════════════════════════ -->
657
+ <section class="section">
658
+ <div class="section-label">// 11</div>
659
+ <h2 class="section-title">APP HEADER BAR</h2>
660
+ <p class="section-desc">UNIFIED 38PX HEADER BAR FOR ALL DEVGLIDE APPLICATIONS. APP NAME LEFT-ALIGNED IN ACCENT COLOR. STATUS BADGE RIGHT-ALIGNED. BEVELED CLIP-PATH FRAME.</p>
661
+ <div class="section-divider"></div>
662
+
663
+ <div class="app-headers-stack">
664
+ <div class="app-header-sample">
665
+ <span class="app-header-name">DEVGLIDE SHELL</span>
666
+ <div class="app-header-right">
667
+ <span class="app-header-status">SESSION 001</span>
668
+ <span class="badge badge-active mini-badge"><span class="badge-dot" style="background:var(--state-active)"></span>CONNECTED</span>
669
+ </div>
670
+ </div>
671
+ <div class="app-header-sample">
672
+ <span class="app-header-name">DEVGLIDE VOICE</span>
673
+ <div class="app-header-right">
674
+ <span class="app-header-status">MIC ACTIVE</span>
675
+ <span class="badge badge-recording mini-badge"><span class="badge-dot" style="background:var(--state-recording)"></span>REC</span>
676
+ </div>
677
+ </div>
678
+ <div class="app-header-sample">
679
+ <span class="app-header-name">DEVGLIDE WORKFLOW</span>
680
+ <div class="app-header-right">
681
+ <span class="app-header-status">3 TASKS QUEUED</span>
682
+ <span class="badge badge-processing mini-badge"><span class="badge-dot" style="background:var(--state-processing)"></span>RUNNING</span>
683
+ </div>
684
+ </div>
685
+ <div class="app-header-sample">
686
+ <span class="app-header-name">DEVGLIDE LOG</span>
687
+ <div class="app-header-right">
688
+ <span class="app-header-status">1,247 ENTRIES</span>
689
+ <span class="badge badge-idle mini-badge"><span class="badge-dot" style="background:var(--state-idle)"></span>MONITORING</span>
690
+ </div>
691
+ </div>
692
+ <div class="app-header-sample">
693
+ <span class="app-header-name">DEVGLIDE TEST</span>
694
+ <div class="app-header-right">
695
+ <span class="app-header-status">42/42 PASSED</span>
696
+ <span class="badge badge-success mini-badge"><span class="badge-dot" style="background:var(--state-success)"></span>PASS</span>
697
+ </div>
698
+ </div>
699
+ <div class="app-header-sample">
700
+ <span class="app-header-name">DEVGLIDE CODER</span>
701
+ <div class="app-header-right">
702
+ <span class="app-header-status">ERR: TIMEOUT</span>
703
+ <span class="badge badge-error mini-badge"><span class="badge-dot" style="background:var(--state-error)"></span>FAULT</span>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ </section>
708
+
709
+ <!-- ══ FOOTER ══════════════════════════════════════════════════════════ -->
710
+ <footer class="site-footer">
711
+ <p>DEVGLIDE DESIGN SYSTEM // PROPOSITION A: TERMINAL GREEN // REV 2026.03.10</p>
712
+ <p style="margin-top:var(--sp-2);color:var(--accent)">END TRANSMISSION</p>
713
+ </footer>
714
+
715
+ </div>
716
+ </body>
717
+ </html>