aeon-ui-engine 1.0.2 → 1.0.3

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 (219) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/CONSUMER.md +86 -0
  3. package/INTEGRATION.md +2 -0
  4. package/README.md +15 -4
  5. package/package.json +17 -1
  6. package/packages/core/dist/index.d.ts +257 -0
  7. package/packages/core/dist/index.js +378 -0
  8. package/packages/core/node_modules/.bin/esbuild +21 -0
  9. package/packages/core/node_modules/.bin/jiti +21 -0
  10. package/packages/core/node_modules/.bin/tsc +21 -0
  11. package/packages/core/node_modules/.bin/tsserver +21 -0
  12. package/packages/core/node_modules/.bin/tsup +21 -0
  13. package/packages/core/node_modules/.bin/tsup-node +21 -0
  14. package/packages/core/node_modules/.bin/tsx +21 -0
  15. package/packages/core/node_modules/.bin/vite +21 -0
  16. package/packages/core/node_modules/.bin/vitest +21 -0
  17. package/packages/core/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json +1 -0
  18. package/packages/geometry/dist/index.d.ts +50 -0
  19. package/packages/geometry/dist/index.js +88 -0
  20. package/packages/geometry/node_modules/.bin/esbuild +21 -0
  21. package/packages/geometry/node_modules/.bin/jiti +21 -0
  22. package/packages/geometry/node_modules/.bin/tsc +21 -0
  23. package/packages/geometry/node_modules/.bin/tsserver +21 -0
  24. package/packages/geometry/node_modules/.bin/tsup +21 -0
  25. package/packages/geometry/node_modules/.bin/tsup-node +21 -0
  26. package/packages/geometry/node_modules/.bin/tsx +21 -0
  27. package/packages/primitives/dist/chunk-5S4DIRL4.js +42 -0
  28. package/packages/primitives/dist/chunk-H4KOEPYC.js +52 -0
  29. package/packages/primitives/dist/chunk-HONROWUG.js +41 -0
  30. package/packages/primitives/dist/chunk-J6JHKMVM.js +90 -0
  31. package/packages/primitives/dist/chunk-JBAG5E6W.js +46 -0
  32. package/packages/primitives/dist/chunk-LVNCD5F2.js +43 -0
  33. package/packages/primitives/dist/chunk-PB3LFHXU.js +72 -0
  34. package/packages/primitives/dist/chunk-SZV6KGXN.js +49 -0
  35. package/packages/primitives/dist/chunk-WVICCOQH.js +56 -0
  36. package/packages/primitives/dist/chunk-ZMGRX64G.js +74 -0
  37. package/packages/primitives/dist/index.d.ts +11 -0
  38. package/packages/primitives/dist/index.js +60 -0
  39. package/packages/primitives/dist/machines/accordion.d.ts +34 -0
  40. package/packages/primitives/dist/machines/accordion.js +6 -0
  41. package/packages/primitives/dist/machines/async.d.ts +111 -0
  42. package/packages/primitives/dist/machines/async.js +12 -0
  43. package/packages/primitives/dist/machines/button.d.ts +45 -0
  44. package/packages/primitives/dist/machines/button.js +8 -0
  45. package/packages/primitives/dist/machines/dialog.d.ts +57 -0
  46. package/packages/primitives/dist/machines/dialog.js +6 -0
  47. package/packages/primitives/dist/machines/field.d.ts +72 -0
  48. package/packages/primitives/dist/machines/field.js +12 -0
  49. package/packages/primitives/dist/machines/popover.d.ts +54 -0
  50. package/packages/primitives/dist/machines/popover.js +6 -0
  51. package/packages/primitives/dist/machines/slider.d.ts +71 -0
  52. package/packages/primitives/dist/machines/slider.js +10 -0
  53. package/packages/primitives/dist/machines/tabs.d.ts +39 -0
  54. package/packages/primitives/dist/machines/tabs.js +6 -0
  55. package/packages/primitives/dist/machines/toast.d.ts +31 -0
  56. package/packages/primitives/dist/machines/toast.js +6 -0
  57. package/packages/primitives/dist/machines/toggle.d.ts +54 -0
  58. package/packages/primitives/dist/machines/toggle.js +6 -0
  59. package/packages/primitives/node_modules/.bin/jiti +21 -0
  60. package/packages/primitives/node_modules/.bin/tsc +21 -0
  61. package/packages/primitives/node_modules/.bin/tsserver +21 -0
  62. package/packages/primitives/node_modules/.bin/tsup +21 -0
  63. package/packages/primitives/node_modules/.bin/tsup-node +21 -0
  64. package/packages/primitives/node_modules/.bin/tsx +21 -0
  65. package/packages/primitives/node_modules/.bin/vitest +21 -0
  66. package/packages/primitives/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json +1 -0
  67. package/packages/react/dist/index.d.ts +564 -0
  68. package/packages/react/dist/index.js +3461 -0
  69. package/packages/react/node_modules/.bin/jiti +21 -0
  70. package/packages/react/node_modules/.bin/tsc +21 -0
  71. package/packages/react/node_modules/.bin/tsserver +21 -0
  72. package/packages/react/node_modules/.bin/tsup +21 -0
  73. package/packages/react/node_modules/.bin/tsup-node +21 -0
  74. package/packages/react/node_modules/.bin/tsx +21 -0
  75. package/packages/react/node_modules/.bin/vitest +21 -0
  76. package/packages/react/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json +1 -0
  77. package/packages/react-scene/dist/index.d.ts +121 -0
  78. package/packages/react-scene/dist/index.js +430 -0
  79. package/packages/react-scene/node_modules/.bin/jiti +21 -0
  80. package/packages/react-scene/node_modules/.bin/tsc +21 -0
  81. package/packages/react-scene/node_modules/.bin/tsserver +21 -0
  82. package/packages/react-scene/node_modules/.bin/tsup +21 -0
  83. package/packages/react-scene/node_modules/.bin/tsup-node +21 -0
  84. package/packages/react-scene/node_modules/.bin/tsx +21 -0
  85. package/packages/scene/dist/index.d.ts +46 -0
  86. package/packages/scene/dist/index.js +54 -0
  87. package/packages/scene/node_modules/.bin/jiti +21 -0
  88. package/packages/scene/node_modules/.bin/tsc +21 -0
  89. package/packages/scene/node_modules/.bin/tsserver +21 -0
  90. package/packages/scene/node_modules/.bin/tsup +21 -0
  91. package/packages/scene/node_modules/.bin/tsup-node +21 -0
  92. package/packages/scene/node_modules/.bin/tsx +21 -0
  93. package/packages/signal/dist/index.d.ts +54 -0
  94. package/packages/signal/dist/index.js +169 -0
  95. package/packages/signal/node_modules/.bin/jiti +21 -0
  96. package/packages/signal/node_modules/.bin/tsc +21 -0
  97. package/packages/signal/node_modules/.bin/tsserver +21 -0
  98. package/packages/signal/node_modules/.bin/tsup +21 -0
  99. package/packages/signal/node_modules/.bin/tsup-node +21 -0
  100. package/packages/signal/node_modules/.bin/tsx +21 -0
  101. package/packages/site/dist/index.d.ts +31 -0
  102. package/packages/site/dist/index.js +62 -0
  103. package/packages/site/node_modules/.bin/jiti +21 -0
  104. package/packages/site/node_modules/.bin/tsc +21 -0
  105. package/packages/site/node_modules/.bin/tsserver +21 -0
  106. package/packages/site/node_modules/.bin/tsup +21 -0
  107. package/packages/site/node_modules/.bin/tsup-node +21 -0
  108. package/packages/site/node_modules/.bin/tsx +21 -0
  109. package/packages/solid/dist/index.d.ts +30 -0
  110. package/packages/solid/dist/index.js +174 -0
  111. package/packages/solid/node_modules/.bin/jiti +21 -0
  112. package/packages/solid/node_modules/.bin/tsc +21 -0
  113. package/packages/solid/node_modules/.bin/tsserver +21 -0
  114. package/packages/solid/node_modules/.bin/tsup +21 -0
  115. package/packages/solid/node_modules/.bin/tsup-node +21 -0
  116. package/packages/solid/node_modules/.bin/tsx +21 -0
  117. package/packages/surface/dist/index.d.ts +8 -0
  118. package/packages/surface/dist/index.js +14 -0
  119. package/packages/surface/node_modules/.bin/jiti +21 -0
  120. package/packages/surface/node_modules/.bin/tsc +21 -0
  121. package/packages/surface/node_modules/.bin/tsserver +21 -0
  122. package/packages/surface/node_modules/.bin/tsup +21 -0
  123. package/packages/surface/node_modules/.bin/tsup-node +21 -0
  124. package/packages/surface/node_modules/.bin/tsx +21 -0
  125. package/packages/svelte/dist/index.d.ts +12 -0
  126. package/packages/svelte/dist/index.js +15 -0
  127. package/packages/svelte/node_modules/.bin/acorn +21 -0
  128. package/packages/svelte/node_modules/.bin/jiti +21 -0
  129. package/packages/svelte/node_modules/.bin/svelte-check +21 -0
  130. package/packages/svelte/node_modules/.bin/tsc +21 -0
  131. package/packages/svelte/node_modules/.bin/tsserver +21 -0
  132. package/packages/svelte/node_modules/.bin/tsup +21 -0
  133. package/packages/svelte/node_modules/.bin/tsup-node +21 -0
  134. package/packages/svelte/node_modules/.bin/tsx +21 -0
  135. package/packages/svelte/node_modules/.bin/vite +21 -0
  136. package/packages/ui/dist/index.d.ts +200 -0
  137. package/packages/ui/dist/index.js +429 -0
  138. package/packages/ui/node_modules/.bin/jiti +21 -0
  139. package/packages/ui/node_modules/.bin/tsc +21 -0
  140. package/packages/ui/node_modules/.bin/tsserver +21 -0
  141. package/packages/ui/node_modules/.bin/tsup +21 -0
  142. package/packages/ui/node_modules/.bin/tsup-node +21 -0
  143. package/packages/ui/node_modules/.bin/tsx +21 -0
  144. package/packages/vue/dist/index.d.ts +71 -0
  145. package/packages/vue/dist/index.js +193 -0
  146. package/packages/vue/node_modules/.bin/jiti +21 -0
  147. package/packages/vue/node_modules/.bin/tsc +21 -0
  148. package/packages/vue/node_modules/.bin/tsserver +21 -0
  149. package/packages/vue/node_modules/.bin/tsup +21 -0
  150. package/packages/vue/node_modules/.bin/tsup-node +21 -0
  151. package/packages/vue/node_modules/.bin/tsx +21 -0
  152. package/scripts/vite-aliases.mjs +125 -0
  153. package/.changeset/README.md +0 -23
  154. package/.changeset/combobox-and-changesets.md +0 -9
  155. package/.changeset/config.json +0 -31
  156. package/.changeset/framework-adapters.md +0 -12
  157. package/.changeset/scene-3d.md +0 -6
  158. package/.changeset/scene-plane.md +0 -8
  159. package/.changeset/site-og.md +0 -5
  160. package/.cursor/rules/aeon-ui.mdc +0 -22
  161. package/ACCESSIBILITY.md +0 -32
  162. package/AGENTS.md +0 -226
  163. package/COMPONENTS.md +0 -41
  164. package/FRAMEWORKS.md +0 -57
  165. package/PHILOSOPHY.md +0 -71
  166. package/PUBLISHING.md +0 -105
  167. package/SCENE.md +0 -113
  168. package/STATES.md +0 -243
  169. package/apps/demo/index.html +0 -31
  170. package/apps/demo/og.config.mjs +0 -20
  171. package/apps/demo/package.json +0 -41
  172. package/apps/demo/public/favicon.svg +0 -16
  173. package/apps/demo/public/og-aeon-ui-engine.png +0 -0
  174. package/apps/demo/public/og.svg +0 -35
  175. package/apps/demo/scripts/generate-og-png.mjs +0 -62
  176. package/apps/demo/src/App.tsx +0 -31
  177. package/apps/demo/src/aeonDiagrams.ts +0 -42
  178. package/apps/demo/src/app.css +0 -16
  179. package/apps/demo/src/components/ActionCluster.tsx +0 -20
  180. package/apps/demo/src/components/AsyncMachineDemo.tsx +0 -97
  181. package/apps/demo/src/components/ButtonLifecycleDemo.tsx +0 -63
  182. package/apps/demo/src/components/CodeExample.tsx +0 -7
  183. package/apps/demo/src/components/ComboboxDemo.tsx +0 -30
  184. package/apps/demo/src/components/DiagramsSection.tsx +0 -37
  185. package/apps/demo/src/components/FieldStateDemo.tsx +0 -51
  186. package/apps/demo/src/components/GridMesh.tsx +0 -8
  187. package/apps/demo/src/components/HeroInstall.tsx +0 -13
  188. package/apps/demo/src/components/LandingFaq.tsx +0 -29
  189. package/apps/demo/src/components/LandingFooter.tsx +0 -30
  190. package/apps/demo/src/components/LandingHeader.tsx +0 -62
  191. package/apps/demo/src/components/LandingHero.tsx +0 -55
  192. package/apps/demo/src/components/LayersSection.tsx +0 -47
  193. package/apps/demo/src/components/MermaidDiagram.tsx +0 -86
  194. package/apps/demo/src/components/PhilosophySection.tsx +0 -31
  195. package/apps/demo/src/components/PlaygroundBlock.tsx +0 -18
  196. package/apps/demo/src/components/PlaygroundControlsDemo.tsx +0 -63
  197. package/apps/demo/src/components/PlaygroundSection.tsx +0 -120
  198. package/apps/demo/src/components/ScrollRegionDemo.tsx +0 -74
  199. package/apps/demo/src/components/ThemeSwitcher.tsx +0 -79
  200. package/apps/demo/src/demo-layout.css +0 -293
  201. package/apps/demo/src/landing.css +0 -1143
  202. package/apps/demo/src/main.tsx +0 -14
  203. package/apps/demo/src/nav.ts +0 -9
  204. package/apps/demo/src/site.ts +0 -218
  205. package/apps/demo/tsconfig.json +0 -17
  206. package/apps/demo/vite-plugins/og-meta.ts +0 -30
  207. package/apps/demo/vite.config.ts +0 -69
  208. package/docs/API_PATTERNS.md +0 -234
  209. package/docs/ARCHITECTURE.md +0 -125
  210. package/docs/COMPONENT_CHECKLIST.md +0 -103
  211. package/docs/FILE_MAP.md +0 -122
  212. package/docs/GLOSSARY.md +0 -125
  213. package/docs/INDEX.md +0 -53
  214. package/docs/LAYOUT_COORDINATES.md +0 -178
  215. package/docs/MACHINES.md +0 -171
  216. package/docs/MIGRATION_FROM_ARK.md +0 -295
  217. package/docs/VITE_CONSUMER.md +0 -114
  218. package/pnpm-workspace.yaml +0 -3
  219. package/vercel.json +0 -12
@@ -1,1143 +0,0 @@
1
- /* Landing layout — voice & rhythm aligned with spidercorp.xyz */
2
- :root {
3
- --font-display: 'Syne', system-ui, sans-serif;
4
- --font-body: 'Instrument Sans', system-ui, sans-serif;
5
- --max: 1080px;
6
- --header-h: 3.15rem;
7
- --gutter: clamp(1.25rem, 4vw, 2rem);
8
- --section-y: clamp(4rem, 8vw, 6rem);
9
- --radius-lg: 10px;
10
- --grid-line: var(--aeon-grid-line, rgba(255, 255, 255, 0.05));
11
- --bg-card: var(--aeon-surface);
12
- --bg-elevated: var(--aeon-surface-raised);
13
- --border: var(--aeon-border);
14
- --border-strong: color-mix(in srgb, var(--aeon-border) 70%, var(--aeon-text));
15
- --text-muted: var(--aeon-muted);
16
- --site-header-offset: var(--header-h);
17
- }
18
-
19
- .landing {
20
- position: relative;
21
- z-index: 1;
22
- }
23
-
24
- .container {
25
- width: min(var(--max), 100% - 2 * var(--gutter));
26
- margin-inline: auto;
27
- }
28
-
29
- .section {
30
- padding-block: var(--section-y);
31
- scroll-margin-top: calc(var(--site-header-offset) + 1rem);
32
- }
33
-
34
- .section-header {
35
- margin-bottom: clamp(2rem, 4vw, 2.75rem);
36
- max-width: 40rem;
37
- }
38
-
39
- .section-label {
40
- display: block;
41
- font-size: 0.7rem;
42
- font-weight: 600;
43
- letter-spacing: 0.16em;
44
- text-transform: uppercase;
45
- color: var(--aeon-accent);
46
- margin: 0 0 0.75rem;
47
- }
48
-
49
- .section-title {
50
- font-family: var(--font-display);
51
- font-size: clamp(1.85rem, 4.5vw, 2.75rem);
52
- font-weight: 700;
53
- line-height: 1.1;
54
- letter-spacing: -0.03em;
55
- margin: 0 0 0.85rem;
56
- }
57
-
58
- .section-lead {
59
- font-size: 1rem;
60
- color: var(--text-muted);
61
- max-width: 42ch;
62
- margin: 0;
63
- line-height: 1.6;
64
- }
65
-
66
- .text-accent {
67
- color: var(--aeon-accent);
68
- }
69
-
70
- /* Shared shell — full-width top accent follows border-radius */
71
- .panel {
72
- position: relative;
73
- overflow: hidden;
74
- background: var(--bg-card);
75
- border: 1px solid var(--border);
76
- border-radius: var(--radius-lg);
77
- }
78
-
79
- .panel::before {
80
- content: '';
81
- position: absolute;
82
- top: 0;
83
- left: 0;
84
- right: 0;
85
- height: 2px;
86
- border-radius: var(--radius-lg) var(--radius-lg) 0 0;
87
- background: linear-gradient(
88
- 90deg,
89
- var(--aeon-accent) 0%,
90
- color-mix(in srgb, var(--aeon-accent) 55%, transparent) 45%,
91
- color-mix(in srgb, var(--aeon-accent) 18%, transparent) 100%
92
- );
93
- pointer-events: none;
94
- z-index: 1;
95
- }
96
-
97
- .grid-mesh {
98
- position: fixed;
99
- inset: -100vmax;
100
- z-index: 0;
101
- pointer-events: none;
102
- overflow: hidden;
103
- background: var(--aeon-bg);
104
- }
105
-
106
- .grid-mesh__lines {
107
- position: absolute;
108
- inset: 0;
109
- background-image:
110
- linear-gradient(var(--grid-line) 1px, transparent 1px),
111
- linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
112
- background-size: 48px 48px;
113
- mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, black 15%, transparent 72%);
114
- }
115
-
116
- .grid-mesh__vignette {
117
- position: absolute;
118
- inset: 0;
119
- background: radial-gradient(ellipse at 50% 0%, transparent 0%, var(--aeon-bg) 70%);
120
- }
121
-
122
- /* Header */
123
- .landing-header {
124
- position: sticky;
125
- top: 0;
126
- z-index: 40;
127
- border-bottom: 1px solid transparent;
128
- background: color-mix(in srgb, var(--aeon-bg) 94%, transparent);
129
- backdrop-filter: blur(12px);
130
- }
131
-
132
- .landing-header--scrolled {
133
- border-bottom-color: var(--border);
134
- }
135
-
136
- .landing-header__shell {
137
- display: flex;
138
- flex-wrap: nowrap;
139
- align-items: center;
140
- justify-content: space-between;
141
- gap: clamp(0.4rem, 2vw, 1rem);
142
- min-height: var(--header-h);
143
- padding-inline: var(--gutter);
144
- max-width: var(--max);
145
- margin-inline: auto;
146
- }
147
-
148
- .landing-header__brand {
149
- flex: 0 1 auto;
150
- min-width: 0;
151
- overflow: hidden;
152
- text-overflow: ellipsis;
153
- white-space: nowrap;
154
- font-family: var(--font-display);
155
- font-weight: 700;
156
- font-size: clamp(0.95rem, 3.5vw, 1.25rem);
157
- letter-spacing: -0.03em;
158
- line-height: 1.1;
159
- color: var(--aeon-text);
160
- text-decoration: none;
161
- }
162
-
163
- .landing-header__brand span {
164
- color: var(--aeon-accent);
165
- }
166
-
167
- .landing-header__nav {
168
- display: none;
169
- gap: 1.25rem;
170
- }
171
-
172
- @media (min-width: 720px) {
173
- .landing-header__nav {
174
- display: flex;
175
- }
176
- }
177
-
178
- .landing-header__nav a {
179
- font-size: 0.8rem;
180
- font-weight: 500;
181
- letter-spacing: 0.04em;
182
- color: var(--text-muted);
183
- text-decoration: none;
184
- padding: 0.35rem 0.7rem;
185
- border-radius: var(--aeon-radius);
186
- transition:
187
- color 0.2s ease,
188
- background 0.2s ease;
189
- }
190
-
191
- .landing-header__nav a:hover {
192
- color: var(--aeon-text);
193
- background: color-mix(in srgb, var(--aeon-surface-raised) 80%, transparent);
194
- }
195
-
196
- .landing-header__nav a.is-active {
197
- color: var(--aeon-accent);
198
- background: var(--aeon-accent-dim);
199
- }
200
-
201
- .landing-header__utilities {
202
- display: flex;
203
- flex-wrap: nowrap;
204
- align-items: center;
205
- gap: clamp(0.35rem, 1.5vw, 0.5rem);
206
- flex: 0 1 auto;
207
- min-width: 0;
208
- }
209
-
210
- .landing-header__cta {
211
- display: inline-flex;
212
- flex-shrink: 0;
213
- text-decoration: none;
214
- }
215
-
216
- .landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
217
- letter-spacing: 0.04em;
218
- white-space: nowrap;
219
- }
220
-
221
- .landing-header__cta-label--short {
222
- display: none;
223
- }
224
-
225
- /* Theme switcher — segmented light/dark + preset select */
226
- .theme-switcher {
227
- display: flex;
228
- flex-wrap: nowrap;
229
- align-items: center;
230
- gap: clamp(0.35rem, 1.5vw, 0.5rem);
231
- min-width: 0;
232
- }
233
-
234
- .theme-switcher__modes {
235
- display: inline-flex;
236
- align-items: stretch;
237
- gap: 0.125rem;
238
- flex-shrink: 0;
239
- box-sizing: border-box;
240
- height: var(--spacing-control-min-h-sm);
241
- padding: 2px;
242
- border: 1px solid var(--aeon-border);
243
- border-radius: var(--aeon-radius);
244
- background: color-mix(in srgb, var(--aeon-surface) 92%, var(--aeon-bg));
245
- }
246
-
247
- .theme-switcher__mode-btn {
248
- min-width: 2.75rem;
249
- height: auto;
250
- align-self: stretch;
251
- margin: 0 !important;
252
- }
253
-
254
- .theme-switcher__mode-btn[aria-pressed='true'] {
255
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
256
- }
257
-
258
- .theme-switcher__theme-select {
259
- width: 6.5rem;
260
- max-width: 24vw;
261
- min-width: 0;
262
- flex-shrink: 1;
263
- }
264
-
265
- .theme-switcher__trigger-prefix {
266
- display: none;
267
- flex-shrink: 0;
268
- font-weight: 600;
269
- }
270
-
271
- .theme-switcher__trigger-value {
272
- min-width: 0;
273
- overflow: hidden;
274
- text-overflow: ellipsis;
275
- white-space: nowrap;
276
- }
277
-
278
- .theme-switcher__theme-select [data-aeon-part='trigger'] {
279
- max-width: 100%;
280
- overflow: hidden;
281
- padding-inline: 0.5rem 1.75rem;
282
- font-size: 0.7rem;
283
- }
284
-
285
- @media (max-width: 719px) {
286
- .theme-switcher__trigger-prefix {
287
- display: inline;
288
- }
289
- }
290
-
291
- @media (max-width: 640px) {
292
- .landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
293
- padding-inline: 0.55rem !important;
294
- font-size: 0.6875rem;
295
- }
296
-
297
- .landing-header__cta-label--long {
298
- display: none;
299
- }
300
-
301
- .landing-header__cta-label--short {
302
- display: inline;
303
- }
304
- }
305
-
306
- @media (max-width: 420px) {
307
- .theme-switcher__trigger-value {
308
- display: none;
309
- }
310
- }
311
-
312
- @media (max-width: 420px) {
313
- .landing-header__shell {
314
- gap: 0.35rem;
315
- }
316
-
317
- .landing-header__brand {
318
- font-size: 0.9rem;
319
- }
320
-
321
- .theme-switcher {
322
- gap: 0.3rem;
323
- }
324
-
325
- .theme-switcher__modes {
326
- padding: 0.1rem;
327
- }
328
-
329
- .theme-switcher__mode-btn {
330
- min-width: 0;
331
- padding-inline: 0.4rem !important;
332
- font-size: 0.625rem !important;
333
- letter-spacing: 0.02em;
334
- }
335
-
336
- .theme-switcher__theme-select {
337
- width: auto;
338
- min-width: 4.35rem;
339
- max-width: none;
340
- }
341
-
342
- .theme-switcher__theme-select [data-aeon-part='trigger'] {
343
- padding-inline: 0.45rem 1.5rem;
344
- font-size: 0.625rem;
345
- }
346
- }
347
-
348
- .sr-only {
349
- position: absolute;
350
- width: 1px;
351
- height: 1px;
352
- padding: 0;
353
- margin: -1px;
354
- overflow: hidden;
355
- clip: rect(0, 0, 0, 0);
356
- white-space: nowrap;
357
- border: 0;
358
- }
359
-
360
- /* Hero */
361
- .hero {
362
- padding-top: clamp(2.5rem, 6vw, 4rem);
363
- padding-bottom: clamp(1.25rem, 3vw, 2rem);
364
- }
365
-
366
- /* Install line — above hero CTAs */
367
- .hero__copy .hero-install {
368
- margin: 0 0 1rem;
369
- }
370
-
371
- .hero-install__line {
372
- display: flex;
373
- flex-wrap: nowrap;
374
- align-items: center;
375
- gap: 0.65rem;
376
- margin: 0;
377
- padding: 0.6rem 0.85rem;
378
- border: 1px solid var(--border);
379
- border-radius: var(--radius-lg);
380
- background: color-mix(in srgb, var(--aeon-surface) 90%, var(--aeon-bg));
381
- overflow-x: auto;
382
- -webkit-overflow-scrolling: touch;
383
- scrollbar-width: thin;
384
- }
385
-
386
- .hero-install__hint {
387
- margin: 0.4rem 0 0;
388
- font-size: 0.75rem;
389
- line-height: 1.45;
390
- color: var(--text-muted);
391
- max-width: 36ch;
392
- }
393
-
394
- .hero-install__label {
395
- flex-shrink: 0;
396
- font-size: 0.65rem;
397
- font-weight: 600;
398
- letter-spacing: 0.14em;
399
- text-transform: uppercase;
400
- color: var(--aeon-accent);
401
- }
402
-
403
- .hero-install__command {
404
- flex: 1 1 auto;
405
- min-width: 0;
406
- margin: 0;
407
- padding: 0;
408
- font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
409
- font-size: clamp(0.78rem, 2.8vw, 0.92rem);
410
- font-weight: 500;
411
- letter-spacing: 0.02em;
412
- line-height: 1.3;
413
- white-space: nowrap;
414
- color: var(--aeon-text);
415
- background: transparent;
416
- }
417
-
418
- .hero__eyebrow {
419
- margin: 0 0 1rem;
420
- font-size: 0.68rem;
421
- font-weight: 600;
422
- letter-spacing: 0.14em;
423
- text-transform: uppercase;
424
- color: var(--text-muted);
425
- }
426
-
427
- .hero__title {
428
- font-family: var(--font-display);
429
- font-size: clamp(2rem, 5.5vw, 3.35rem);
430
- font-weight: 700;
431
- line-height: 1.06;
432
- letter-spacing: -0.04em;
433
- margin: 0 0 1rem;
434
- max-width: 18ch;
435
- }
436
-
437
- .hero__lead {
438
- margin: 0 0 0.75rem;
439
- font-size: 1.0625rem;
440
- font-weight: 500;
441
- color: var(--text-muted);
442
- max-width: 44ch;
443
- line-height: 1.6;
444
- }
445
-
446
- .hero__sub {
447
- margin: 0 0 1.25rem;
448
- font-size: 0.9375rem;
449
- line-height: 1.55;
450
- color: var(--text-muted);
451
- max-width: 46ch;
452
- opacity: 0.92;
453
- }
454
-
455
- .hero__actions {
456
- margin-bottom: 1.5rem;
457
- }
458
-
459
- .hero__actions a {
460
- text-decoration: none;
461
- }
462
-
463
- .hero__stats {
464
- display: flex;
465
- margin: 0;
466
- padding: 0;
467
- }
468
-
469
- .hero__stat {
470
- flex: 1 1 0;
471
- min-width: 0;
472
- display: flex;
473
- flex-direction: column;
474
- gap: 0.35rem;
475
- padding: 1.05rem 1.1rem 1rem;
476
- border-right: 1px solid var(--border);
477
- background: transparent;
478
- transition: background 0.2s ease;
479
- }
480
-
481
- .hero__stat:last-child {
482
- border-right: none;
483
- }
484
-
485
- .hero__stat[data-aeon-state='active'] {
486
- background: color-mix(in srgb, var(--aeon-accent-dim) 28%, transparent);
487
- box-shadow: inset 0 1px 0 color-mix(in srgb, var(--aeon-accent) 35%, transparent);
488
- }
489
-
490
- .hero__stat-label {
491
- font-size: 0.65rem;
492
- font-weight: 600;
493
- letter-spacing: 0.12em;
494
- text-transform: uppercase;
495
- color: var(--text-muted);
496
- }
497
-
498
- .hero__stat-detail {
499
- font-family: var(--font-display);
500
- font-size: 0.8125rem;
501
- font-weight: 500;
502
- line-height: 1.35;
503
- color: var(--aeon-text);
504
- }
505
-
506
- @media (max-width: 640px) {
507
- .hero__stats {
508
- flex-direction: column;
509
- }
510
-
511
- .hero__stat {
512
- border-right: none;
513
- border-bottom: 1px solid var(--border);
514
- }
515
-
516
- .hero__stat:last-child {
517
- border-bottom: none;
518
- }
519
- }
520
-
521
- .hero__pillars {
522
- list-style: none;
523
- margin: 0;
524
- padding: 0;
525
- display: flex;
526
- flex-direction: column;
527
- }
528
-
529
- .hero__pillar {
530
- display: flex;
531
- flex-direction: column;
532
- gap: 0.2rem;
533
- padding: 0.85rem 1rem;
534
- border-bottom: 1px solid var(--border);
535
- }
536
-
537
- .hero__pillar:last-child {
538
- border-bottom: none;
539
- }
540
-
541
- .hero__pillar strong {
542
- font-family: var(--font-display);
543
- font-size: 0.8125rem;
544
- font-weight: 600;
545
- color: var(--aeon-text);
546
- }
547
-
548
- .hero__pillar span {
549
- font-size: 0.8125rem;
550
- line-height: 1.45;
551
- color: var(--text-muted);
552
- }
553
-
554
- .hero__visual {
555
- margin-top: 2.5rem;
556
- }
557
-
558
- @media (min-width: 900px) {
559
- .hero__grid {
560
- display: grid;
561
- grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
562
- gap: clamp(2rem, 4vw, 3rem);
563
- align-items: center;
564
- }
565
-
566
- .hero__visual {
567
- margin-top: 0;
568
- }
569
- }
570
-
571
- .state-card {
572
- padding: 1.15rem var(--aeon-pad-lg) var(--aeon-pad-lg);
573
- min-width: 0;
574
- }
575
-
576
- .state-card .machine-console {
577
- width: 100%;
578
- min-width: 0;
579
- }
580
-
581
- .state-card__label {
582
- margin: 0 0 0.75rem;
583
- font-family: var(--font-display);
584
- font-size: 1.15rem;
585
- font-weight: 700;
586
- letter-spacing: -0.03em;
587
- }
588
-
589
- .state-card__hint {
590
- margin: 0 0 1rem;
591
- font-size: 0.8rem;
592
- color: var(--text-muted);
593
- }
594
-
595
- /* Layers */
596
- .layers__commitments {
597
- display: grid;
598
- gap: 0;
599
- margin-bottom: 2rem;
600
- padding: 0;
601
- }
602
-
603
- @media (min-width: 720px) {
604
- .layers__commitments {
605
- grid-template-columns: repeat(3, 1fr);
606
- }
607
-
608
- .layers__commitment:not(:last-child) {
609
- border-right: 1px solid var(--border);
610
- }
611
- }
612
-
613
- @media (max-width: 719px) {
614
- .layers__commitment:not(:last-child) {
615
- border-bottom: 1px solid var(--border);
616
- }
617
- }
618
-
619
- .layers__commitment {
620
- padding: 1.05rem var(--aeon-pad-md) var(--aeon-pad-md);
621
- background: transparent;
622
- }
623
-
624
- .layers__commitment h3 {
625
- margin: 0 0 0.35rem;
626
- font-family: var(--font-display);
627
- font-size: 0.95rem;
628
- font-weight: 600;
629
- }
630
-
631
- .layers__commitment p {
632
- margin: 0;
633
- font-size: 0.88rem;
634
- color: var(--text-muted);
635
- line-height: 1.5;
636
- }
637
-
638
- .layers__grid {
639
- display: grid;
640
- gap: 1rem;
641
- }
642
-
643
- @media (min-width: 720px) {
644
- .layers__grid {
645
- grid-template-columns: repeat(3, 1fr);
646
- }
647
- }
648
-
649
- .layer-card {
650
- padding: 1.05rem var(--aeon-pad-md) var(--aeon-pad-md);
651
- display: flex;
652
- flex-direction: column;
653
- gap: 0.75rem;
654
- }
655
-
656
- .layer-card__index {
657
- font-family: var(--aeon-mono);
658
- font-size: 0.65rem;
659
- font-weight: 600;
660
- letter-spacing: 0.14em;
661
- color: color-mix(in srgb, var(--aeon-accent) 70%, var(--aeon-muted));
662
- }
663
-
664
- .layer-card h3 {
665
- margin: 0;
666
- font-family: var(--font-mono);
667
- font-size: 0.9rem;
668
- color: var(--aeon-accent);
669
- }
670
-
671
- .layer-card > p {
672
- margin: 0;
673
- font-size: 0.92rem;
674
- color: var(--text-muted);
675
- line-height: 1.5;
676
- }
677
-
678
- .layer-card ul {
679
- margin: 0;
680
- padding: 0;
681
- list-style: none;
682
- display: flex;
683
- flex-direction: column;
684
- gap: 0.4rem;
685
- }
686
-
687
- .layer-card li {
688
- font-size: 0.82rem;
689
- color: var(--aeon-text);
690
- }
691
-
692
- .layer-card li::before {
693
- content: '— ';
694
- color: var(--aeon-accent);
695
- }
696
-
697
- /* Playground — one shell, flat dividers between demos */
698
- .playground {
699
- padding: 0;
700
- overflow: hidden;
701
- }
702
-
703
- .playground__block {
704
- padding: 1.15rem var(--aeon-pad-lg) var(--aeon-pad-lg);
705
- margin: 0;
706
- border-bottom: 1px solid var(--border);
707
- }
708
-
709
- .playground__block:first-child {
710
- padding-top: 1.2rem;
711
- }
712
-
713
- .playground__block--last,
714
- .playground__block:last-child {
715
- border-bottom: none;
716
- }
717
-
718
- .playground__block-title {
719
- margin: 0 0 0.25rem;
720
- font-family: var(--font-display);
721
- font-size: 1rem;
722
- font-weight: 600;
723
- }
724
-
725
- .playground__block-sub {
726
- margin: 0 0 0.85rem;
727
- font-size: 0.875rem;
728
- line-height: 1.55;
729
- color: var(--text-muted);
730
- max-width: 48ch;
731
- }
732
-
733
- .playground__block-demo {
734
- margin: 0;
735
- }
736
-
737
- .code-example {
738
- margin: 0 0 1.25rem;
739
- padding: 0.85rem 1rem;
740
- font-family: var(--aeon-mono);
741
- font-size: 0.75rem;
742
- line-height: 1.55;
743
- color: color-mix(in srgb, var(--aeon-text) 88%, var(--aeon-muted));
744
- background: color-mix(in srgb, var(--aeon-bg) 55%, var(--aeon-surface));
745
- border: 1px solid var(--aeon-border);
746
- border-radius: var(--aeon-radius);
747
- overflow-x: auto;
748
- white-space: pre;
749
- }
750
-
751
- .code-example code {
752
- font-family: inherit;
753
- }
754
-
755
- .scroll-demo {
756
- min-width: 0;
757
- }
758
-
759
- .scroll-demo-hint {
760
- margin: 0 0 1rem;
761
- font-size: 0.8125rem;
762
- line-height: 1.45;
763
- color: var(--aeon-muted);
764
- }
765
-
766
- .scroll-demo-grid {
767
- display: grid;
768
- gap: 1.25rem;
769
- grid-template-columns: 1fr;
770
- min-width: 0;
771
- }
772
-
773
- @media (min-width: 900px) {
774
- .scroll-demo-grid {
775
- grid-template-columns: repeat(3, minmax(0, 1fr));
776
- gap: 1rem;
777
- }
778
- }
779
-
780
- .scroll-demo-cell {
781
- display: flex;
782
- flex-direction: column;
783
- gap: 0.4rem;
784
- min-width: 0;
785
- max-width: 100%;
786
- }
787
-
788
- .scroll-demo-scroll {
789
- width: 100%;
790
- min-width: 0;
791
- }
792
-
793
- .scroll-demo-scroll .aeonScroll__viewport {
794
- max-width: 100%;
795
- }
796
-
797
- .scroll-demo-label {
798
- margin: 0;
799
- font-size: 0.75rem;
800
- font-weight: 600;
801
- letter-spacing: 0.06em;
802
- text-transform: uppercase;
803
- color: var(--aeon-muted);
804
- }
805
-
806
- .scroll-demo-meta {
807
- display: flex;
808
- flex-direction: column;
809
- gap: 0.2rem;
810
- min-width: 0;
811
- }
812
-
813
- .scroll-demo-meta-label {
814
- font-size: 0.625rem;
815
- font-weight: 600;
816
- letter-spacing: 0.1em;
817
- text-transform: uppercase;
818
- color: var(--aeon-muted);
819
- }
820
-
821
- .scroll-demo-state {
822
- display: block;
823
- margin: 0;
824
- padding: 0.4rem 0.55rem;
825
- font-family: var(--aeon-mono);
826
- font-size: 0.6875rem;
827
- line-height: 1.35;
828
- color: var(--aeon-text);
829
- background: color-mix(in srgb, var(--aeon-bg) 55%, var(--aeon-surface));
830
- border: 1px solid var(--aeon-border);
831
- border-radius: var(--aeon-radius-sm);
832
- overflow-x: auto;
833
- -webkit-overflow-scrolling: touch;
834
- white-space: nowrap;
835
- }
836
-
837
- .scroll-demo-list {
838
- margin: 0;
839
- padding: 0.5rem 0.65rem 0.5rem 1.1rem;
840
- font-size: 0.8125rem;
841
- line-height: 1.55;
842
- }
843
-
844
- .scroll-demo-list li + li {
845
- margin-top: 0.15rem;
846
- }
847
-
848
- .scroll-demo-row {
849
- display: flex;
850
- flex-wrap: nowrap;
851
- gap: 0.4rem;
852
- padding: 0.5rem;
853
- width: max-content;
854
- min-width: 100%;
855
- }
856
-
857
- .scroll-demo-matrix {
858
- display: grid;
859
- grid-template-columns: repeat(5, 3.75rem);
860
- gap: 0.4rem;
861
- padding: 0.5rem;
862
- width: max-content;
863
- }
864
-
865
- @media (max-width: 479px) {
866
- .scroll-demo-matrix {
867
- grid-template-columns: repeat(4, 3.5rem);
868
- }
869
- }
870
-
871
- .scroll-demo-chip {
872
- display: inline-flex;
873
- align-items: center;
874
- justify-content: center;
875
- min-width: 3.25rem;
876
- padding: 0.35rem 0.45rem;
877
- font-family: var(--aeon-mono);
878
- font-size: 0.6875rem;
879
- white-space: nowrap;
880
- background: color-mix(in srgb, var(--aeon-accent) 10%, var(--aeon-surface));
881
- border: 1px solid var(--aeon-border);
882
- border-radius: var(--aeon-radius-sm);
883
- }
884
-
885
- .layer-card__example {
886
- margin-top: 1rem;
887
- }
888
-
889
- .thesis__card .code-example {
890
- margin: 0.75rem 0 0;
891
- font-size: 0.7rem;
892
- }
893
-
894
- .hero__stat-example {
895
- display: block;
896
- margin-top: 0.35rem;
897
- font-family: var(--aeon-mono);
898
- font-size: 0.62rem;
899
- line-height: 1.4;
900
- color: color-mix(in srgb, var(--aeon-muted) 90%, transparent);
901
- white-space: pre;
902
- overflow: hidden;
903
- text-overflow: ellipsis;
904
- }
905
-
906
- @media (max-width: 900px) {
907
- .hero__stat-example {
908
- display: none;
909
- }
910
- }
911
-
912
- /* Thesis — 2×2 connected grid inside one shell */
913
- .thesis__grid {
914
- display: grid;
915
- gap: 0;
916
- padding: 0;
917
- overflow: hidden;
918
- }
919
-
920
- @media (min-width: 720px) {
921
- .thesis__grid {
922
- grid-template-columns: 1fr 1fr;
923
- }
924
-
925
- .thesis__card:nth-child(odd) {
926
- border-right: 1px solid var(--border);
927
- }
928
-
929
- .thesis__card:nth-child(-n + 2) {
930
- border-bottom: 1px solid var(--border);
931
- }
932
- }
933
-
934
- @media (max-width: 719px) {
935
- .thesis__card:not(:last-child) {
936
- border-bottom: 1px solid var(--border);
937
- }
938
- }
939
-
940
- .thesis__card {
941
- padding: 1.15rem var(--aeon-pad-lg) var(--aeon-pad-lg);
942
- background: transparent;
943
- }
944
-
945
- .thesis__card h3 {
946
- margin: 0 0 0.5rem;
947
- font-size: 1rem;
948
- font-weight: 600;
949
- color: var(--aeon-accent);
950
- }
951
-
952
- .thesis__card p {
953
- margin: 0;
954
- font-size: 0.92rem;
955
- color: var(--text-muted);
956
- line-height: 1.6;
957
- }
958
-
959
- .thesis__cta {
960
- margin-top: 1.5rem;
961
- }
962
-
963
- .thesis__cta a {
964
- text-decoration: none;
965
- }
966
-
967
- /* Footer */
968
- .landing-footer {
969
- padding-block: 2.5rem;
970
- border-top: 1px solid var(--border);
971
- margin-top: 2rem;
972
- }
973
-
974
- .landing-footer__inner {
975
- display: flex;
976
- flex-direction: column;
977
- gap: 0.5rem;
978
- font-size: 0.85rem;
979
- color: var(--text-muted);
980
- }
981
-
982
- .landing-footer__inner a {
983
- color: var(--aeon-accent);
984
- text-decoration: none;
985
- }
986
-
987
- .landing-footer__tag {
988
- font-family: var(--font-display);
989
- font-weight: 500;
990
- }
991
-
992
- /* Scene plane demo */
993
- .scene-demo__stage {
994
- position: relative;
995
- min-height: 220px;
996
- overflow: hidden;
997
- border-radius: calc(var(--radius-lg) - 2px);
998
- padding: 1.25rem;
999
- display: grid;
1000
- gap: 1rem;
1001
- }
1002
-
1003
- .scene-demo__swatches {
1004
- position: relative;
1005
- z-index: 1;
1006
- display: grid;
1007
- grid-template-columns: repeat(3, 1fr);
1008
- gap: 0.5rem;
1009
- }
1010
-
1011
- .scene-demo__swatch {
1012
- min-height: 3.5rem;
1013
- border-radius: 6px;
1014
- border: 1px solid var(--border);
1015
- }
1016
-
1017
- .scene-demo__viz {
1018
- position: relative;
1019
- z-index: 1;
1020
- display: flex;
1021
- flex-wrap: wrap;
1022
- align-items: center;
1023
- gap: 1rem 1.5rem;
1024
- }
1025
-
1026
- .scene-demo__bars {
1027
- width: min(100%, 10rem);
1028
- height: auto;
1029
- }
1030
-
1031
- .scene-demo__code {
1032
- margin-top: 1rem;
1033
- padding: 0.75rem 1rem;
1034
- background: var(--bg-elevated);
1035
- border-top: 1px solid var(--border);
1036
- font-family: 'IBM Plex Mono', ui-monospace, monospace;
1037
- font-size: 0.72rem;
1038
- color: var(--text-muted);
1039
- overflow-x: auto;
1040
- }
1041
-
1042
- .scene-demo__code pre {
1043
- margin: 0;
1044
- }
1045
-
1046
- .scene-demo--3d {
1047
- margin-top: 1.5rem;
1048
- }
1049
-
1050
- .scene-demo__3d-header {
1051
- padding: 1rem 1.25rem 0;
1052
- }
1053
-
1054
- .scene-demo__3d-title {
1055
- margin: 0 0 0.35rem;
1056
- font-family: var(--font-display);
1057
- font-size: 1.05rem;
1058
- font-weight: 600;
1059
- }
1060
-
1061
- .scene-demo__3d-lead {
1062
- margin: 0;
1063
- font-size: 0.88rem;
1064
- color: var(--text-muted);
1065
- max-width: 42rem;
1066
- }
1067
-
1068
- .scene-3d-demo {
1069
- margin: 1rem 1.25rem 0;
1070
- border-radius: calc(var(--radius-lg) - 2px);
1071
- background: #0a0e14;
1072
- }
1073
-
1074
- /* Statechart diagrams (Mermaid) */
1075
- .diagrams__grid {
1076
- display: grid;
1077
- gap: clamp(1.25rem, 3vw, 1.75rem);
1078
- max-width: 40rem;
1079
- }
1080
-
1081
- .diagram-card__head {
1082
- padding: 1.15rem 1.15rem 0;
1083
- }
1084
-
1085
- .diagram-card__head h3 {
1086
- margin: 0 0 0.35rem;
1087
- font-family: var(--font-display);
1088
- font-size: 1.05rem;
1089
- font-weight: 600;
1090
- }
1091
-
1092
- .diagram-card__head p {
1093
- margin: 0;
1094
- font-size: 0.875rem;
1095
- color: var(--text-muted);
1096
- line-height: 1.5;
1097
- max-width: 40ch;
1098
- }
1099
-
1100
- .diagram-card__figure {
1101
- margin: 0;
1102
- padding: 1rem 1.15rem 1.15rem;
1103
- overflow-x: auto;
1104
- }
1105
-
1106
- .diagram-card__mermaid {
1107
- min-height: 5rem;
1108
- }
1109
-
1110
- .diagram-card__mermaid svg {
1111
- display: block;
1112
- width: 100%;
1113
- max-width: 36rem;
1114
- height: auto;
1115
- margin-inline: auto;
1116
- }
1117
-
1118
- .diagram-card__loading,
1119
- .diagram-card__error {
1120
- margin: 0;
1121
- padding: 1.5rem;
1122
- font-size: 0.85rem;
1123
- color: var(--text-muted);
1124
- text-align: center;
1125
- }
1126
-
1127
- .diagram-card__error {
1128
- color: #f87171;
1129
- white-space: pre-wrap;
1130
- text-align: left;
1131
- }
1132
-
1133
- .diagrams__footnote {
1134
- margin: clamp(1.5rem, 3vw, 2rem) 0 0;
1135
- font-size: 0.88rem;
1136
- color: var(--text-muted);
1137
- }
1138
-
1139
- .diagrams__footnote a {
1140
- color: var(--aeon-accent);
1141
- text-decoration: underline;
1142
- text-underline-offset: 3px;
1143
- }