@alivecss/aliveui 1.0.0

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 (21) hide show
  1. package/README.md +317 -0
  2. package/dist/cli.js +3811 -0
  3. package/dist/index.d.mts +42 -0
  4. package/dist/index.d.ts +42 -0
  5. package/dist/index.js +3757 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +3717 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/dist/runtime.d.mts +27 -0
  10. package/dist/runtime.d.ts +27 -0
  11. package/dist/runtime.js +236 -0
  12. package/dist/runtime.js.map +1 -0
  13. package/dist/runtime.mjs +205 -0
  14. package/dist/runtime.mjs.map +1 -0
  15. package/dist/vite.d.mts +43 -0
  16. package/dist/vite.d.ts +43 -0
  17. package/dist/vite.js +3872 -0
  18. package/dist/vite.js.map +1 -0
  19. package/dist/vite.mjs +3855 -0
  20. package/dist/vite.mjs.map +1 -0
  21. package/package.json +67 -0
package/dist/cli.js ADDED
@@ -0,0 +1,3811 @@
1
+ #!/usr/bin/env node
2
+ #!/usr/bin/env node
3
+ "use strict";
4
+ var __create = Object.create;
5
+ var __defProp = Object.defineProperty;
6
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
19
+ // If the importer is in node compatibility mode or this is not an ESM
20
+ // file that has been converted to a CommonJS file using a Babel-
21
+ // compatible transform (i.e. "__esModule" has not been set), then set
22
+ // "default" to the CommonJS "module.exports" for node compatibility.
23
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
24
+ mod
25
+ ));
26
+
27
+ // src/cli.ts
28
+ var import_commander = require("commander");
29
+ var import_chokidar = require("chokidar");
30
+ var import_fs2 = require("fs");
31
+ var import_path = require("path");
32
+
33
+ // src/theme/colors.ts
34
+ var defaultColors = {
35
+ inherit: "inherit",
36
+ current: "currentColor",
37
+ transparent: "transparent",
38
+ black: "#000000",
39
+ white: "#ffffff",
40
+ slate: {
41
+ 50: "#f8fafc",
42
+ 100: "#f1f5f9",
43
+ 200: "#e2e8f0",
44
+ 300: "#cbd5e1",
45
+ 400: "#94a3b8",
46
+ 500: "#64748b",
47
+ 600: "#475569",
48
+ 700: "#334155",
49
+ 800: "#1e293b",
50
+ 900: "#0f172a",
51
+ 950: "#020617"
52
+ },
53
+ gray: {
54
+ 50: "#f9fafb",
55
+ 100: "#f3f4f6",
56
+ 200: "#e5e7eb",
57
+ 300: "#d1d5db",
58
+ 400: "#9ca3af",
59
+ 500: "#6b7280",
60
+ 600: "#4b5563",
61
+ 700: "#374151",
62
+ 800: "#1f2937",
63
+ 900: "#111827",
64
+ 950: "#030712"
65
+ },
66
+ zinc: {
67
+ 50: "#fafafa",
68
+ 100: "#f4f4f5",
69
+ 200: "#e4e4e7",
70
+ 300: "#d4d4d8",
71
+ 400: "#a1a1aa",
72
+ 500: "#71717a",
73
+ 600: "#52525b",
74
+ 700: "#3f3f46",
75
+ 800: "#27272a",
76
+ 900: "#18181b",
77
+ 950: "#09090b"
78
+ },
79
+ neutral: {
80
+ 50: "#fafafa",
81
+ 100: "#f5f5f5",
82
+ 200: "#e5e5e5",
83
+ 300: "#d4d4d4",
84
+ 400: "#a3a3a3",
85
+ 500: "#737373",
86
+ 600: "#525252",
87
+ 700: "#404040",
88
+ 800: "#262626",
89
+ 900: "#171717",
90
+ 950: "#0a0a0a"
91
+ },
92
+ stone: {
93
+ 50: "#fafaf9",
94
+ 100: "#f5f5f4",
95
+ 200: "#e7e5e4",
96
+ 300: "#d6d3d1",
97
+ 400: "#a8a29e",
98
+ 500: "#78716c",
99
+ 600: "#57534e",
100
+ 700: "#44403c",
101
+ 800: "#292524",
102
+ 900: "#1c1917",
103
+ 950: "#0c0a09"
104
+ },
105
+ red: {
106
+ 50: "#fef2f2",
107
+ 100: "#fee2e2",
108
+ 200: "#fecaca",
109
+ 300: "#fca5a5",
110
+ 400: "#f87171",
111
+ 500: "#ef4444",
112
+ 600: "#dc2626",
113
+ 700: "#b91c1c",
114
+ 800: "#991b1b",
115
+ 900: "#7f1d1d",
116
+ 950: "#450a0a"
117
+ },
118
+ orange: {
119
+ 50: "#fff7ed",
120
+ 100: "#ffedd5",
121
+ 200: "#fed7aa",
122
+ 300: "#fdba74",
123
+ 400: "#fb923c",
124
+ 500: "#f97316",
125
+ 600: "#ea580c",
126
+ 700: "#c2410c",
127
+ 800: "#9a3412",
128
+ 900: "#7c2d12",
129
+ 950: "#431407"
130
+ },
131
+ amber: {
132
+ 50: "#fffbeb",
133
+ 100: "#fef3c7",
134
+ 200: "#fde68a",
135
+ 300: "#fcd34d",
136
+ 400: "#fbbf24",
137
+ 500: "#f59e0b",
138
+ 600: "#d97706",
139
+ 700: "#b45309",
140
+ 800: "#92400e",
141
+ 900: "#78350f",
142
+ 950: "#451a03"
143
+ },
144
+ yellow: {
145
+ 50: "#fefce8",
146
+ 100: "#fef9c3",
147
+ 200: "#fef08a",
148
+ 300: "#fde047",
149
+ 400: "#facc15",
150
+ 500: "#eab308",
151
+ 600: "#ca8a04",
152
+ 700: "#a16207",
153
+ 800: "#854d0e",
154
+ 900: "#713f12",
155
+ 950: "#422006"
156
+ },
157
+ lime: {
158
+ 50: "#f7fee7",
159
+ 100: "#ecfccb",
160
+ 200: "#d9f99d",
161
+ 300: "#bef264",
162
+ 400: "#a3e635",
163
+ 500: "#84cc16",
164
+ 600: "#65a30d",
165
+ 700: "#4d7c0f",
166
+ 800: "#3f6212",
167
+ 900: "#365314",
168
+ 950: "#1a2e05"
169
+ },
170
+ green: {
171
+ 50: "#f0fdf4",
172
+ 100: "#dcfce7",
173
+ 200: "#bbf7d0",
174
+ 300: "#86efac",
175
+ 400: "#4ade80",
176
+ 500: "#22c55e",
177
+ 600: "#16a34a",
178
+ 700: "#15803d",
179
+ 800: "#166534",
180
+ 900: "#14532d",
181
+ 950: "#052e16"
182
+ },
183
+ emerald: {
184
+ 50: "#ecfdf5",
185
+ 100: "#d1fae5",
186
+ 200: "#a7f3d0",
187
+ 300: "#6ee7b7",
188
+ 400: "#34d399",
189
+ 500: "#10b981",
190
+ 600: "#059669",
191
+ 700: "#047857",
192
+ 800: "#065f46",
193
+ 900: "#064e3b",
194
+ 950: "#022c22"
195
+ },
196
+ teal: {
197
+ 50: "#f0fdfa",
198
+ 100: "#ccfbf1",
199
+ 200: "#99f6e4",
200
+ 300: "#5eead4",
201
+ 400: "#2dd4bf",
202
+ 500: "#14b8a6",
203
+ 600: "#0d9488",
204
+ 700: "#0f766e",
205
+ 800: "#115e59",
206
+ 900: "#134e4a",
207
+ 950: "#042f2e"
208
+ },
209
+ cyan: {
210
+ 50: "#ecfeff",
211
+ 100: "#cffafe",
212
+ 200: "#a5f3fc",
213
+ 300: "#67e8f9",
214
+ 400: "#22d3ee",
215
+ 500: "#06b6d4",
216
+ 600: "#0891b2",
217
+ 700: "#0e7490",
218
+ 800: "#155e75",
219
+ 900: "#164e63",
220
+ 950: "#083344"
221
+ },
222
+ sky: {
223
+ 50: "#f0f9ff",
224
+ 100: "#e0f2fe",
225
+ 200: "#bae6fd",
226
+ 300: "#7dd3fc",
227
+ 400: "#38bdf8",
228
+ 500: "#0ea5e9",
229
+ 600: "#0284c7",
230
+ 700: "#0369a1",
231
+ 800: "#075985",
232
+ 900: "#0c4a6e",
233
+ 950: "#082f49"
234
+ },
235
+ blue: {
236
+ 50: "#eff6ff",
237
+ 100: "#dbeafe",
238
+ 200: "#bfdbfe",
239
+ 300: "#93c5fd",
240
+ 400: "#60a5fa",
241
+ 500: "#3b82f6",
242
+ 600: "#2563eb",
243
+ 700: "#1d4ed8",
244
+ 800: "#1e40af",
245
+ 900: "#1e3a8a",
246
+ 950: "#172554"
247
+ },
248
+ indigo: {
249
+ 50: "#eef2ff",
250
+ 100: "#e0e7ff",
251
+ 200: "#c7d2fe",
252
+ 300: "#a5b4fc",
253
+ 400: "#818cf8",
254
+ 500: "#6366f1",
255
+ 600: "#4f46e5",
256
+ 700: "#4338ca",
257
+ 800: "#3730a3",
258
+ 900: "#312e81",
259
+ 950: "#1e1b4b"
260
+ },
261
+ violet: {
262
+ 50: "#f5f3ff",
263
+ 100: "#ede9fe",
264
+ 200: "#ddd6fe",
265
+ 300: "#c4b5fd",
266
+ 400: "#a78bfa",
267
+ 500: "#8b5cf6",
268
+ 600: "#7c3aed",
269
+ 700: "#6d28d9",
270
+ 800: "#5b21b6",
271
+ 900: "#4c1d95",
272
+ 950: "#2e1065"
273
+ },
274
+ purple: {
275
+ 50: "#faf5ff",
276
+ 100: "#f3e8ff",
277
+ 200: "#e9d5ff",
278
+ 300: "#d8b4fe",
279
+ 400: "#c084fc",
280
+ 500: "#a855f7",
281
+ 600: "#9333ea",
282
+ 700: "#7e22ce",
283
+ 800: "#6b21a8",
284
+ 900: "#581c87",
285
+ 950: "#3b0764"
286
+ },
287
+ fuchsia: {
288
+ 50: "#fdf4ff",
289
+ 100: "#fae8ff",
290
+ 200: "#f5d0fe",
291
+ 300: "#f0abfc",
292
+ 400: "#e879f9",
293
+ 500: "#d946ef",
294
+ 600: "#c026d3",
295
+ 700: "#a21caf",
296
+ 800: "#86198f",
297
+ 900: "#701a75",
298
+ 950: "#4a044e"
299
+ },
300
+ pink: {
301
+ 50: "#fdf2f8",
302
+ 100: "#fce7f3",
303
+ 200: "#fbcfe8",
304
+ 300: "#f9a8d4",
305
+ 400: "#f472b6",
306
+ 500: "#ec4899",
307
+ 600: "#db2777",
308
+ 700: "#be185d",
309
+ 800: "#9d174d",
310
+ 900: "#831843",
311
+ 950: "#500724"
312
+ },
313
+ rose: {
314
+ 50: "#fff1f2",
315
+ 100: "#ffe4e6",
316
+ 200: "#fecdd3",
317
+ 300: "#fda4af",
318
+ 400: "#fb7185",
319
+ 500: "#f43f5e",
320
+ 600: "#e11d48",
321
+ 700: "#be123c",
322
+ 800: "#9f1239",
323
+ 900: "#881337",
324
+ 950: "#4c0519"
325
+ }
326
+ };
327
+
328
+ // src/theme/default.ts
329
+ var defaultTheme = {
330
+ colors: defaultColors,
331
+ spacing: {
332
+ px: "1px",
333
+ "0": "0px",
334
+ "0.5": "0.125rem",
335
+ "1": "0.25rem",
336
+ "1.5": "0.375rem",
337
+ "2": "0.5rem",
338
+ "2.5": "0.625rem",
339
+ "3": "0.75rem",
340
+ "3.5": "0.875rem",
341
+ "4": "1rem",
342
+ "5": "1.25rem",
343
+ "6": "1.5rem",
344
+ "7": "1.75rem",
345
+ "8": "2rem",
346
+ "9": "2.25rem",
347
+ "10": "2.5rem",
348
+ "11": "2.75rem",
349
+ "12": "3rem",
350
+ "14": "3.5rem",
351
+ "16": "4rem",
352
+ "20": "5rem",
353
+ "24": "6rem",
354
+ "28": "7rem",
355
+ "32": "8rem",
356
+ "36": "9rem",
357
+ "40": "10rem",
358
+ "44": "11rem",
359
+ "48": "12rem",
360
+ "52": "13rem",
361
+ "56": "14rem",
362
+ "60": "15rem",
363
+ "64": "16rem",
364
+ "72": "18rem",
365
+ "80": "20rem",
366
+ "96": "24rem"
367
+ },
368
+ borderRadius: {
369
+ none: "0px",
370
+ sm: "0.125rem",
371
+ DEFAULT: "0.25rem",
372
+ md: "0.375rem",
373
+ lg: "0.5rem",
374
+ xl: "0.75rem",
375
+ "2xl": "1rem",
376
+ "3xl": "1.5rem",
377
+ full: "9999px"
378
+ },
379
+ fontSize: {
380
+ xs: ["0.75rem", "1rem"],
381
+ sm: ["0.875rem", "1.25rem"],
382
+ base: ["1rem", "1.5rem"],
383
+ lg: ["1.125rem", "1.75rem"],
384
+ xl: ["1.25rem", "1.75rem"],
385
+ "2xl": ["1.5rem", "2rem"],
386
+ "3xl": ["1.875rem", "2.25rem"],
387
+ "4xl": ["2.25rem", "2.5rem"],
388
+ "5xl": ["3rem", "1"],
389
+ "6xl": ["3.75rem", "1"],
390
+ "7xl": ["4.5rem", "1"],
391
+ "8xl": ["6rem", "1"],
392
+ "9xl": ["8rem", "1"]
393
+ },
394
+ fontWeight: {
395
+ thin: "100",
396
+ extralight: "200",
397
+ light: "300",
398
+ normal: "400",
399
+ medium: "500",
400
+ semibold: "600",
401
+ bold: "700",
402
+ extrabold: "800",
403
+ black: "900"
404
+ },
405
+ lineHeight: {
406
+ none: "1",
407
+ tight: "1.25",
408
+ snug: "1.375",
409
+ normal: "1.5",
410
+ relaxed: "1.625",
411
+ loose: "2",
412
+ "3": "0.75rem",
413
+ "4": "1rem",
414
+ "5": "1.25rem",
415
+ "6": "1.5rem",
416
+ "7": "1.75rem",
417
+ "8": "2rem",
418
+ "9": "2.25rem",
419
+ "10": "2.5rem"
420
+ },
421
+ screens: {
422
+ sm: "640px",
423
+ md: "768px",
424
+ lg: "1024px",
425
+ xl: "1280px",
426
+ "2xl": "1536px"
427
+ },
428
+ opacity: {
429
+ "0": "0",
430
+ "5": "0.05",
431
+ "10": "0.1",
432
+ "15": "0.15",
433
+ "20": "0.2",
434
+ "25": "0.25",
435
+ "30": "0.3",
436
+ "40": "0.4",
437
+ "50": "0.5",
438
+ "60": "0.6",
439
+ "70": "0.7",
440
+ "75": "0.75",
441
+ "80": "0.8",
442
+ "90": "0.9",
443
+ "95": "0.95",
444
+ "100": "1"
445
+ },
446
+ zIndex: {
447
+ auto: "auto",
448
+ "0": "0",
449
+ "10": "10",
450
+ "20": "20",
451
+ "30": "30",
452
+ "40": "40",
453
+ "50": "50"
454
+ },
455
+ boxShadow: {
456
+ sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
457
+ DEFAULT: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
458
+ md: "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06)",
459
+ lg: "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)",
460
+ xl: "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",
461
+ "2xl": "0 25px 50px rgba(0, 0, 0, 0.25)",
462
+ inner: "inset 0 2px 4px rgba(0, 0, 0, 0.06)",
463
+ none: "none"
464
+ },
465
+ darkMode: "media"
466
+ };
467
+
468
+ // src/config.ts
469
+ function resolveConfig(userConfig = {}) {
470
+ const userTheme = userConfig.theme;
471
+ const theme = mergeTheme(defaultTheme, userTheme ?? {});
472
+ return {
473
+ content: userConfig.content ?? [],
474
+ output: userConfig.output ?? "alive.css",
475
+ theme
476
+ };
477
+ }
478
+ function mergeTheme(base, overrides) {
479
+ return {
480
+ colors: { ...base.colors, ...overrides.colors ?? {} },
481
+ spacing: { ...base.spacing, ...overrides.spacing ?? {} },
482
+ borderRadius: { ...base.borderRadius, ...overrides.borderRadius ?? {} },
483
+ fontSize: { ...base.fontSize, ...overrides.fontSize ?? {} },
484
+ fontWeight: { ...base.fontWeight, ...overrides.fontWeight ?? {} },
485
+ lineHeight: { ...base.lineHeight, ...overrides.lineHeight ?? {} },
486
+ screens: { ...base.screens, ...overrides.screens ?? {} },
487
+ opacity: { ...base.opacity, ...overrides.opacity ?? {} },
488
+ zIndex: { ...base.zIndex, ...overrides.zIndex ?? {} },
489
+ boxShadow: { ...base.boxShadow, ...overrides.boxShadow ?? {} },
490
+ darkMode: overrides.darkMode ?? base.darkMode
491
+ };
492
+ }
493
+
494
+ // src/scanner.ts
495
+ var import_fs = require("fs");
496
+ var import_fast_glob = __toESM(require("fast-glob"));
497
+ var CLASS_EXTRACTION_REGEX = /(?:class|className)(?:\s*=\s*|\s*:\s*)(?:"([^"]+)"|'([^']+)'|`([^`]+)`|\{[^}]*['"`]([^'"`]+)['"`][^}]*\})/g;
498
+ var TOKEN_REGEX = /[`'"]([\w\s/[\]#%.-]+)[`'"]/g;
499
+ async function scanContent(config) {
500
+ if (config.content.length === 0) return /* @__PURE__ */ new Set();
501
+ const files = await (0, import_fast_glob.default)(config.content, {
502
+ absolute: true,
503
+ ignore: ["**/node_modules/**", "**/.git/**", "**/dist/**"]
504
+ });
505
+ const classes = /* @__PURE__ */ new Set();
506
+ for (const file of files) {
507
+ try {
508
+ const content = (0, import_fs.readFileSync)(file, "utf-8");
509
+ extractClasses(content, classes);
510
+ } catch {
511
+ }
512
+ }
513
+ return classes;
514
+ }
515
+ function extractClasses(content, classes) {
516
+ let match;
517
+ CLASS_EXTRACTION_REGEX.lastIndex = 0;
518
+ while ((match = CLASS_EXTRACTION_REGEX.exec(content)) !== null) {
519
+ const value = match[1] ?? match[2] ?? match[3] ?? match[4];
520
+ if (value) {
521
+ splitAndAdd(value, classes);
522
+ }
523
+ }
524
+ TOKEN_REGEX.lastIndex = 0;
525
+ while ((match = TOKEN_REGEX.exec(content)) !== null) {
526
+ if (match[1]) {
527
+ splitAndAdd(match[1], classes);
528
+ }
529
+ }
530
+ const rawTokenRegex = /(?:^|[\s"'`{(,])(-?[a-z][a-z0-9]*(?:-[a-z0-9./]+)*(?:-\[[^\]]*\])?(?::[a-z][a-z0-9]*(?:-[a-z0-9./]+)*(?:-\[[^\]]*\])?)*)/g;
531
+ let rawMatch;
532
+ while ((rawMatch = rawTokenRegex.exec(content)) !== null) {
533
+ const token = rawMatch[1];
534
+ if (token && isLikelyClass(token)) {
535
+ classes.add(token);
536
+ }
537
+ }
538
+ }
539
+ function splitAndAdd(value, classes) {
540
+ const tokens = value.split(/[\s\n\r\t]+/);
541
+ for (const token of tokens) {
542
+ const clean = token.trim();
543
+ if (clean && isLikelyClass(clean)) {
544
+ classes.add(clean);
545
+ }
546
+ }
547
+ }
548
+ var JS_PROTOTYPE_PROPS = /* @__PURE__ */ new Set([
549
+ "constructor",
550
+ "prototype",
551
+ "toString",
552
+ "valueOf",
553
+ "hasOwnProperty",
554
+ "isPrototypeOf",
555
+ "propertyIsEnumerable",
556
+ "toLocaleString",
557
+ "__proto__",
558
+ "__defineGetter__",
559
+ "__defineSetter__",
560
+ "__lookupGetter__",
561
+ "__lookupSetter__"
562
+ ]);
563
+ function isLikelyClass(token) {
564
+ if (!token || token.length < 1 || token.length > 120) return false;
565
+ if (!/^-?[a-z]/.test(token)) return false;
566
+ if (/\s/.test(token)) return false;
567
+ if (token.includes("://")) return false;
568
+ if (token.startsWith("http")) return false;
569
+ const openBrackets = (token.match(/\[/g) ?? []).length;
570
+ const closeBrackets = (token.match(/\]/g) ?? []).length;
571
+ if (openBrackets !== closeBrackets) return false;
572
+ if (JS_PROTOTYPE_PROPS.has(token)) return false;
573
+ return true;
574
+ }
575
+
576
+ // src/generator/base.ts
577
+ function generateBase(_config) {
578
+ return `/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
579
+ AliveUI \u2014 Motion-first CSS framework
580
+ Base layer: tokens \xB7 depth \xB7 animations \xB7 components
581
+ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
582
+
583
+ /* \u2500\u2500 Reset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
584
+ *,
585
+ ::before,
586
+ ::after {
587
+ box-sizing: border-box;
588
+ }
589
+
590
+ /* \u2500\u2500 Design tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
591
+ :root {
592
+ /* Motion durations */
593
+ --alive-duration-fast: 120ms;
594
+ --alive-duration-normal: 200ms;
595
+ --alive-duration-slow: 320ms;
596
+
597
+ /* Easing curves */
598
+ --alive-ease-standard: cubic-bezier(0.2, 0, 0, 1);
599
+ --alive-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
600
+ --alive-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
601
+
602
+ /* Depth shadows */
603
+ --alive-shadow-d1: none;
604
+ --alive-shadow-d2: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
605
+ --alive-shadow-d2-hover: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
606
+ --alive-shadow-d3: 0 8px 40px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.08);
607
+
608
+ /* Stagger defaults */
609
+ --alive-stagger-gap: 60ms;
610
+ --alive-index: 0;
611
+
612
+ /* Inherited depth context \u2014 overridden by .d1/.d2/.d3 */
613
+ --alive-duration: 0ms;
614
+ --alive-ease: linear;
615
+ }
616
+
617
+ /* \u2500\u2500 Depth system \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
618
+
619
+ /* d1 \u2014 base surface: flat, color-only transitions */
620
+ .d1 {
621
+ --alive-depth: 1;
622
+ --alive-duration: var(--alive-duration-normal);
623
+ --alive-ease: var(--alive-ease-standard);
624
+ }
625
+
626
+ /* d2 \u2014 elevated interactive: lifts and scales on hover */
627
+ .d2 {
628
+ --alive-depth: 2;
629
+ --alive-duration: var(--alive-duration-normal);
630
+ --alive-ease: var(--alive-ease-standard);
631
+ box-shadow: var(--alive-shadow-d2);
632
+ transition:
633
+ box-shadow var(--alive-duration-normal) var(--alive-ease-standard),
634
+ transform var(--alive-duration-normal) var(--alive-ease-standard);
635
+ }
636
+ .d2:hover {
637
+ box-shadow: var(--alive-shadow-d2-hover);
638
+ transform: translateY(-1px) scale(1.004);
639
+ }
640
+ .d2:active {
641
+ box-shadow: var(--alive-shadow-d2);
642
+ transform: translateY(0) scale(0.998);
643
+ transition-duration: var(--alive-duration-fast);
644
+ }
645
+
646
+ /* d3 \u2014 floating layer: strong shadow, emphasized entrance */
647
+ .d3 {
648
+ --alive-depth: 3;
649
+ --alive-duration: var(--alive-duration-slow);
650
+ --alive-ease: var(--alive-ease-emphasized);
651
+ box-shadow: var(--alive-shadow-d3);
652
+ }
653
+
654
+ /* \u2500\u2500 Keyframe animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
655
+
656
+ /* Entrances */
657
+ @keyframes alive-fade-up {
658
+ from { opacity: 0; transform: translateY(8px); }
659
+ to { opacity: 1; transform: translateY(0); }
660
+ }
661
+ @keyframes alive-fade-down {
662
+ from { opacity: 0; transform: translateY(-8px); }
663
+ to { opacity: 1; transform: translateY(0); }
664
+ }
665
+ @keyframes alive-fade-right {
666
+ from { opacity: 0; transform: translateX(-12px); }
667
+ to { opacity: 1; transform: translateX(0); }
668
+ }
669
+ @keyframes alive-fade-left {
670
+ from { opacity: 0; transform: translateX(12px); }
671
+ to { opacity: 1; transform: translateX(0); }
672
+ }
673
+ @keyframes alive-fade-in {
674
+ from { opacity: 0; }
675
+ to { opacity: 1; }
676
+ }
677
+ @keyframes alive-scale-in {
678
+ from { opacity: 0; transform: scale(0.94); }
679
+ to { opacity: 1; transform: scale(1); }
680
+ }
681
+ @keyframes alive-scale-up {
682
+ from { opacity: 0; transform: scale(0.92) translateY(4px); }
683
+ to { opacity: 1; transform: scale(1) translateY(0); }
684
+ }
685
+
686
+ /* Exits */
687
+ @keyframes alive-exit-down {
688
+ from { opacity: 1; transform: translateY(0); }
689
+ to { opacity: 0; transform: translateY(8px); }
690
+ }
691
+ @keyframes alive-exit-up {
692
+ from { opacity: 1; transform: translateY(0); }
693
+ to { opacity: 0; transform: translateY(-8px); }
694
+ }
695
+ @keyframes alive-exit-left {
696
+ from { opacity: 1; transform: translateX(0); }
697
+ to { opacity: 0; transform: translateX(-12px); }
698
+ }
699
+ @keyframes alive-exit-right {
700
+ from { opacity: 1; transform: translateX(0); }
701
+ to { opacity: 0; transform: translateX(12px); }
702
+ }
703
+ @keyframes alive-exit-scale {
704
+ from { opacity: 1; transform: scale(1); }
705
+ to { opacity: 0; transform: scale(0.94); }
706
+ }
707
+
708
+ /* Loop animations */
709
+ @keyframes alive-pulse {
710
+ 0%, 100% { opacity: 1; }
711
+ 50% { opacity: 0.45; }
712
+ }
713
+ @keyframes alive-spin {
714
+ from { transform: rotate(0deg); }
715
+ to { transform: rotate(360deg); }
716
+ }
717
+ @keyframes alive-ping {
718
+ 75%, 100% { transform: scale(2); opacity: 0; }
719
+ }
720
+ @keyframes alive-bounce {
721
+ 0%, 100% {
722
+ transform: translateY(0);
723
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
724
+ }
725
+ 50% {
726
+ transform: translateY(-25%);
727
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
728
+ }
729
+ }
730
+ @keyframes alive-shimmer {
731
+ 0% { background-position: -200% 0; }
732
+ 100% { background-position: 200% 0; }
733
+ }
734
+
735
+ /* \u2500\u2500 Entrance classes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
736
+
737
+ .alive-enter {
738
+ animation: alive-fade-up var(--alive-duration-slow) var(--alive-ease-emphasized) both;
739
+ animation-delay: calc(var(--alive-stagger-gap, 60ms) * var(--alive-index, 0));
740
+ }
741
+ .alive-enter-down {
742
+ animation: alive-fade-down var(--alive-duration-slow) var(--alive-ease-emphasized) both;
743
+ animation-delay: calc(var(--alive-stagger-gap, 60ms) * var(--alive-index, 0));
744
+ }
745
+ .alive-enter-right {
746
+ animation: alive-fade-right var(--alive-duration-slow) var(--alive-ease-emphasized) both;
747
+ animation-delay: calc(var(--alive-stagger-gap, 60ms) * var(--alive-index, 0));
748
+ }
749
+ .alive-enter-left {
750
+ animation: alive-fade-left var(--alive-duration-slow) var(--alive-ease-emphasized) both;
751
+ animation-delay: calc(var(--alive-stagger-gap, 60ms) * var(--alive-index, 0));
752
+ }
753
+ .alive-enter-fade {
754
+ animation: alive-fade-in var(--alive-duration-normal) var(--alive-ease-standard) both;
755
+ animation-delay: calc(var(--alive-stagger-gap, 60ms) * var(--alive-index, 0));
756
+ }
757
+ .alive-enter-scale {
758
+ animation: alive-scale-in var(--alive-duration-normal) var(--alive-ease-emphasized) both;
759
+ animation-delay: calc(var(--alive-stagger-gap, 60ms) * var(--alive-index, 0));
760
+ }
761
+
762
+ /* \u2500\u2500 Exit classes (apply dynamically when removing elements) \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
763
+
764
+ .alive-exit {
765
+ animation: alive-exit-down var(--alive-duration-normal) var(--alive-ease-exit) both;
766
+ }
767
+ .alive-exit-up {
768
+ animation: alive-exit-up var(--alive-duration-normal) var(--alive-ease-exit) both;
769
+ }
770
+ .alive-exit-left {
771
+ animation: alive-exit-left var(--alive-duration-normal) var(--alive-ease-exit) both;
772
+ }
773
+ .alive-exit-right {
774
+ animation: alive-exit-right var(--alive-duration-normal) var(--alive-ease-exit) both;
775
+ }
776
+ .alive-exit-scale {
777
+ animation: alive-exit-scale var(--alive-duration-fast) var(--alive-ease-exit) both;
778
+ }
779
+
780
+ /* \u2500\u2500 Loop animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
781
+
782
+ .alive-loop-pulse { animation: alive-pulse 2s ease-in-out infinite; }
783
+ .alive-loop-spin { animation: alive-spin 1s linear infinite; }
784
+ .alive-loop-ping { animation: alive-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
785
+ .alive-loop-bounce { animation: alive-bounce 1s infinite; }
786
+
787
+ /* Reduced motion \u2014 respect system preference */
788
+ @media (prefers-reduced-motion: reduce) {
789
+ .alive-enter,
790
+ .alive-enter-down,
791
+ .alive-enter-right,
792
+ .alive-enter-left,
793
+ .alive-enter-fade,
794
+ .alive-enter-scale,
795
+ .alive-exit,
796
+ .alive-exit-up,
797
+ .alive-exit-left,
798
+ .alive-exit-right,
799
+ .alive-exit-scale,
800
+ .alive-loop-pulse,
801
+ .alive-loop-spin,
802
+ .alive-loop-ping,
803
+ .alive-loop-bounce {
804
+ animation: none;
805
+ opacity: 1;
806
+ transform: none;
807
+ }
808
+
809
+ /* depth system \u2014 disable hover lift and active press */
810
+ .d2,
811
+ .d2:hover,
812
+ .d2:active {
813
+ transform: none;
814
+ transition: none;
815
+ box-shadow: var(--alive-shadow-d2);
816
+ }
817
+ }
818
+
819
+ /* \u2500\u2500 Motion override utilities \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
820
+
821
+ .motion-fast { --alive-duration: var(--alive-duration-fast) !important; }
822
+ .motion-normal { --alive-duration: var(--alive-duration-normal) !important; }
823
+ .motion-slow { --alive-duration: var(--alive-duration-slow) !important; }
824
+ .motion-none { --alive-duration: 0ms !important; }
825
+
826
+ .ease-standard { --alive-ease: var(--alive-ease-standard) !important; }
827
+ .ease-emphasized { --alive-ease: var(--alive-ease-emphasized) !important; }
828
+ .ease-exit { --alive-ease: var(--alive-ease-exit) !important; }
829
+
830
+ /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
831
+ COMPONENT PRIMITIVES
832
+ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
833
+
834
+ /* \u2500\u2500 Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
835
+
836
+ .alive-card {
837
+ border-radius: 0.75rem;
838
+ padding: 1.5rem;
839
+ background-color: var(--alive-card-bg, #ffffff);
840
+ border: 1px solid var(--alive-card-border, rgba(0,0,0,0.06));
841
+ }
842
+ .alive-card-flush { padding: 0; }
843
+ .alive-card-sm { padding: 1rem; border-radius: 0.5rem; }
844
+ .alive-card-lg { padding: 2rem; border-radius: 1rem; }
845
+
846
+ /* \u2500\u2500 Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
847
+
848
+ .alive-button {
849
+ display: inline-flex;
850
+ align-items: center;
851
+ justify-content: center;
852
+ gap: 0.5rem;
853
+ padding: 0.625rem 1.25rem;
854
+ font-size: 0.875rem;
855
+ font-weight: 500;
856
+ line-height: 1;
857
+ border-radius: 0.5rem;
858
+ border: 1px solid transparent;
859
+ cursor: pointer;
860
+ user-select: none;
861
+ white-space: nowrap;
862
+ text-decoration: none;
863
+ transition:
864
+ background-color var(--alive-duration-fast) var(--alive-ease-standard),
865
+ color var(--alive-duration-fast) var(--alive-ease-standard),
866
+ border-color var(--alive-duration-fast) var(--alive-ease-standard),
867
+ box-shadow var(--alive-duration-fast) var(--alive-ease-standard),
868
+ transform var(--alive-duration-fast) var(--alive-ease-standard),
869
+ opacity var(--alive-duration-fast) var(--alive-ease-standard);
870
+ }
871
+ .alive-button:active {
872
+ transform: scale(0.97);
873
+ transition-duration: calc(var(--alive-duration-fast) / 2);
874
+ }
875
+ .alive-button:focus-visible {
876
+ outline: 2px solid currentColor;
877
+ outline-offset: 2px;
878
+ }
879
+ .alive-button:disabled {
880
+ opacity: 0.4;
881
+ cursor: not-allowed;
882
+ pointer-events: none;
883
+ }
884
+
885
+ /* Button variants */
886
+ .alive-button-primary {
887
+ background-color: #0a0a0a;
888
+ color: #ffffff;
889
+ border-color: #0a0a0a;
890
+ }
891
+ .alive-button-primary:hover { background-color: #1a1a1a; }
892
+
893
+ .alive-button-secondary {
894
+ background-color: transparent;
895
+ color: #0a0a0a;
896
+ border-color: #e4e4e4;
897
+ }
898
+ .alive-button-secondary:hover {
899
+ background-color: #f4f4f4;
900
+ border-color: #d4d4d4;
901
+ }
902
+
903
+ .alive-button-ghost {
904
+ background-color: transparent;
905
+ color: #4b4b4b;
906
+ border-color: transparent;
907
+ }
908
+ .alive-button-ghost:hover {
909
+ background-color: #f4f4f4;
910
+ color: #0a0a0a;
911
+ }
912
+
913
+ .alive-button-destructive {
914
+ background-color: #dc2626;
915
+ color: #ffffff;
916
+ border-color: #dc2626;
917
+ }
918
+ .alive-button-destructive:hover { background-color: #b91c1c; }
919
+
920
+ /* Button sizes */
921
+ .alive-button-xs { padding: 0.25rem 0.625rem; font-size: 0.75rem; border-radius: 0.375rem; }
922
+ .alive-button-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; border-radius: 0.375rem; }
923
+ .alive-button-lg { padding: 0.75rem 1.75rem; font-size: 0.9375rem; border-radius: 0.625rem; }
924
+ .alive-button-xl { padding: 0.875rem 2rem; font-size: 1rem; border-radius: 0.75rem; }
925
+ .alive-button-icon {
926
+ padding: 0.625rem;
927
+ aspect-ratio: 1;
928
+ }
929
+
930
+ /* \u2500\u2500 Badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
931
+
932
+ .alive-badge {
933
+ display: inline-flex;
934
+ align-items: center;
935
+ gap: 0.3rem;
936
+ padding: 0.25rem 0.625rem;
937
+ font-size: 0.75rem;
938
+ font-weight: 500;
939
+ line-height: 1;
940
+ border-radius: 9999px;
941
+ border: 1px solid transparent;
942
+ white-space: nowrap;
943
+ }
944
+
945
+ /* Badge sizes */
946
+ .alive-badge-sm { padding: 0.125rem 0.5rem; font-size: 0.6875rem; }
947
+ .alive-badge-lg { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
948
+
949
+ /* Badge colors */
950
+ .alive-badge-gray { background: rgba(0,0,0,0.06); color: #525252; border-color: rgba(0,0,0,0.1); }
951
+ .alive-badge-green { background: rgba(74,222,128,0.12); color: #16a34a; border-color: rgba(74,222,128,0.25); }
952
+ .alive-badge-red { background: rgba(239,68,68,0.1); color: #dc2626; border-color: rgba(239,68,68,0.2); }
953
+ .alive-badge-yellow { background: rgba(234,179,8,0.1); color: #ca8a04; border-color: rgba(234,179,8,0.25); }
954
+ .alive-badge-blue { background: rgba(96,165,250,0.1); color: #2563eb; border-color: rgba(96,165,250,0.22); }
955
+ .alive-badge-purple { background: rgba(167,139,250,0.12); color: #7c3aed; border-color: rgba(167,139,250,0.25); }
956
+ .alive-badge-orange { background: rgba(251,146,60,0.1); color: #ea580c; border-color: rgba(251,146,60,0.22); }
957
+
958
+ /* Badge with status dot */
959
+ .alive-badge-dot::before {
960
+ content: '';
961
+ display: block;
962
+ width: 6px;
963
+ height: 6px;
964
+ border-radius: 50%;
965
+ background: currentColor;
966
+ flex-shrink: 0;
967
+ }
968
+
969
+ /* \u2500\u2500 Input \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
970
+
971
+ .alive-input {
972
+ display: block;
973
+ width: 100%;
974
+ padding: 0.625rem 0.875rem;
975
+ font-size: 0.875rem;
976
+ line-height: 1.5;
977
+ color: inherit;
978
+ background: transparent;
979
+ border: 1px solid rgba(0,0,0,0.14);
980
+ border-radius: 0.5rem;
981
+ outline: none;
982
+ transition:
983
+ border-color var(--alive-duration-fast) var(--alive-ease-standard),
984
+ box-shadow var(--alive-duration-fast) var(--alive-ease-standard);
985
+ }
986
+ .alive-input::placeholder { opacity: 0.4; }
987
+ .alive-input:hover { border-color: rgba(0,0,0,0.24); }
988
+ .alive-input:focus {
989
+ border-color: rgba(0,0,0,0.5);
990
+ box-shadow: 0 0 0 3px rgba(0,0,0,0.07);
991
+ }
992
+ .alive-input:disabled {
993
+ opacity: 0.45;
994
+ cursor: not-allowed;
995
+ background: rgba(0,0,0,0.03);
996
+ }
997
+ .alive-input-error { border-color: rgba(239,68,68,0.55); }
998
+ .alive-input-error:hover { border-color: rgba(239,68,68,0.7); }
999
+ .alive-input-error:focus {
1000
+ border-color: #ef4444;
1001
+ box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
1002
+ }
1003
+ .alive-input-sm { padding: 0.4375rem 0.75rem; font-size: 0.8125rem; }
1004
+ .alive-input-lg { padding: 0.75rem 1rem; font-size: 0.9375rem; }
1005
+
1006
+ /* \u2500\u2500 Textarea \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1007
+
1008
+ .alive-textarea {
1009
+ display: block;
1010
+ width: 100%;
1011
+ padding: 0.625rem 0.875rem;
1012
+ font-size: 0.875rem;
1013
+ line-height: 1.6;
1014
+ color: inherit;
1015
+ background: transparent;
1016
+ border: 1px solid rgba(0,0,0,0.14);
1017
+ border-radius: 0.5rem;
1018
+ outline: none;
1019
+ resize: vertical;
1020
+ min-height: 6rem;
1021
+ transition:
1022
+ border-color var(--alive-duration-fast) var(--alive-ease-standard),
1023
+ box-shadow var(--alive-duration-fast) var(--alive-ease-standard);
1024
+ }
1025
+ .alive-textarea::placeholder { opacity: 0.4; }
1026
+ .alive-textarea:hover { border-color: rgba(0,0,0,0.24); }
1027
+ .alive-textarea:focus {
1028
+ border-color: rgba(0,0,0,0.5);
1029
+ box-shadow: 0 0 0 3px rgba(0,0,0,0.07);
1030
+ }
1031
+ .alive-textarea:disabled {
1032
+ opacity: 0.45;
1033
+ cursor: not-allowed;
1034
+ background: rgba(0,0,0,0.03);
1035
+ }
1036
+
1037
+ /* \u2500\u2500 Select \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1038
+
1039
+ .alive-select {
1040
+ display: block;
1041
+ width: 100%;
1042
+ padding: 0.625rem 2.25rem 0.625rem 0.875rem;
1043
+ font-size: 0.875rem;
1044
+ line-height: 1.5;
1045
+ color: inherit;
1046
+ background-color: transparent;
1047
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
1048
+ background-repeat: no-repeat;
1049
+ background-position: right 0.6rem center;
1050
+ background-size: 1.25rem;
1051
+ border: 1px solid rgba(0,0,0,0.14);
1052
+ border-radius: 0.5rem;
1053
+ outline: none;
1054
+ cursor: pointer;
1055
+ appearance: none;
1056
+ transition:
1057
+ border-color var(--alive-duration-fast) var(--alive-ease-standard),
1058
+ box-shadow var(--alive-duration-fast) var(--alive-ease-standard);
1059
+ }
1060
+ .alive-select:hover { border-color: rgba(0,0,0,0.24); }
1061
+ .alive-select:focus {
1062
+ border-color: rgba(0,0,0,0.5);
1063
+ box-shadow: 0 0 0 3px rgba(0,0,0,0.07);
1064
+ }
1065
+ .alive-select:disabled {
1066
+ opacity: 0.45;
1067
+ cursor: not-allowed;
1068
+ }
1069
+
1070
+ /* \u2500\u2500 Checkbox / Radio \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1071
+
1072
+ .alive-checkbox,
1073
+ .alive-radio {
1074
+ width: 1rem;
1075
+ height: 1rem;
1076
+ border: 1.5px solid rgba(0,0,0,0.25);
1077
+ border-radius: 0.25rem;
1078
+ background: transparent;
1079
+ cursor: pointer;
1080
+ appearance: none;
1081
+ transition:
1082
+ background var(--alive-duration-fast) var(--alive-ease-standard),
1083
+ border-color var(--alive-duration-fast) var(--alive-ease-standard),
1084
+ box-shadow var(--alive-duration-fast) var(--alive-ease-standard);
1085
+ flex-shrink: 0;
1086
+ }
1087
+ .alive-radio { border-radius: 50%; }
1088
+
1089
+ .alive-checkbox:checked,
1090
+ .alive-radio:checked {
1091
+ background-color: #0a0a0a;
1092
+ border-color: #0a0a0a;
1093
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
1094
+ background-repeat: no-repeat;
1095
+ background-position: center;
1096
+ background-size: 0.75rem;
1097
+ }
1098
+ .alive-radio:checked {
1099
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
1100
+ }
1101
+ .alive-checkbox:focus-visible,
1102
+ .alive-radio:focus-visible {
1103
+ box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
1104
+ }
1105
+
1106
+ /* \u2500\u2500 Switch / Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1107
+
1108
+ .alive-switch {
1109
+ position: relative;
1110
+ display: inline-flex;
1111
+ align-items: center;
1112
+ width: 2.75rem;
1113
+ height: 1.5rem;
1114
+ border-radius: 9999px;
1115
+ background: rgba(0,0,0,0.15);
1116
+ cursor: pointer;
1117
+ flex-shrink: 0;
1118
+ transition: background var(--alive-duration-fast) var(--alive-ease-standard);
1119
+ }
1120
+ .alive-switch::after {
1121
+ content: '';
1122
+ position: absolute;
1123
+ top: 0.1875rem;
1124
+ left: 0.1875rem;
1125
+ width: 1.125rem;
1126
+ height: 1.125rem;
1127
+ border-radius: 50%;
1128
+ background: #fff;
1129
+ box-shadow: 0 1px 4px rgba(0,0,0,0.2);
1130
+ transition: transform var(--alive-duration-normal) var(--alive-ease-emphasized);
1131
+ }
1132
+ .alive-switch[aria-checked="true"],
1133
+ .alive-switch.is-checked {
1134
+ background: #22c55e;
1135
+ }
1136
+ .alive-switch[aria-checked="true"]::after,
1137
+ .alive-switch.is-checked::after {
1138
+ transform: translateX(1.25rem);
1139
+ }
1140
+ .alive-switch[aria-checked="false"][data-pending],
1141
+ .alive-switch.is-pending {
1142
+ opacity: 0.7;
1143
+ cursor: wait;
1144
+ }
1145
+ /* Sizes */
1146
+ .alive-switch-sm {
1147
+ width: 2.25rem;
1148
+ height: 1.25rem;
1149
+ }
1150
+ .alive-switch-sm::after { width: 0.875rem; height: 0.875rem; }
1151
+ .alive-switch-sm[aria-checked="true"]::after,
1152
+ .alive-switch-sm.is-checked::after { transform: translateX(1rem); }
1153
+
1154
+ .alive-switch-lg {
1155
+ width: 3.5rem;
1156
+ height: 2rem;
1157
+ }
1158
+ .alive-switch-lg::after { width: 1.5rem; height: 1.5rem; }
1159
+ .alive-switch-lg[aria-checked="true"]::after,
1160
+ .alive-switch-lg.is-checked::after { transform: translateX(1.5rem); }
1161
+
1162
+ /* \u2500\u2500 Avatar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1163
+
1164
+ .alive-avatar {
1165
+ display: inline-flex;
1166
+ align-items: center;
1167
+ justify-content: center;
1168
+ flex-shrink: 0;
1169
+ width: 2.5rem;
1170
+ height: 2.5rem;
1171
+ border-radius: 50%;
1172
+ overflow: hidden;
1173
+ font-size: 0.875rem;
1174
+ font-weight: 500;
1175
+ background: rgba(0,0,0,0.08);
1176
+ color: rgba(0,0,0,0.5);
1177
+ user-select: none;
1178
+ }
1179
+ .alive-avatar img {
1180
+ width: 100%;
1181
+ height: 100%;
1182
+ object-fit: cover;
1183
+ }
1184
+ .alive-avatar-xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
1185
+ .alive-avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
1186
+ .alive-avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
1187
+ .alive-avatar-xl { width: 4rem; height: 4rem; font-size: 1.25rem; }
1188
+ .alive-avatar-2xl { width: 5rem; height: 5rem; font-size: 1.5rem; }
1189
+
1190
+ /* Avatar group \u2014 overlapping stack */
1191
+ .alive-avatar-group {
1192
+ display: flex;
1193
+ }
1194
+ .alive-avatar-group .alive-avatar {
1195
+ box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
1196
+ margin-left: -0.5rem;
1197
+ }
1198
+ .alive-avatar-group .alive-avatar:first-child {
1199
+ margin-left: 0;
1200
+ }
1201
+
1202
+ /* \u2500\u2500 Skeleton \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1203
+
1204
+ .alive-skeleton {
1205
+ border-radius: 0.375rem;
1206
+ background: linear-gradient(
1207
+ 90deg,
1208
+ rgba(0,0,0,0.06) 25%,
1209
+ rgba(0,0,0,0.1) 50%,
1210
+ rgba(0,0,0,0.06) 75%
1211
+ );
1212
+ background-size: 200% 100%;
1213
+ animation: alive-shimmer 1.6s ease-in-out infinite;
1214
+ }
1215
+ .alive-skeleton-text { height: 1em; border-radius: 0.25rem; }
1216
+ .alive-skeleton-circle { border-radius: 9999px; }
1217
+ .alive-skeleton-sm { animation-duration: 1.2s; }
1218
+ .alive-skeleton-lg { animation-duration: 2s; }
1219
+
1220
+ /* \u2500\u2500 Progress \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1221
+
1222
+ .alive-progress {
1223
+ display: block;
1224
+ width: 100%;
1225
+ height: 0.5rem;
1226
+ border-radius: 9999px;
1227
+ background: rgba(0,0,0,0.08);
1228
+ overflow: hidden;
1229
+ }
1230
+ .alive-progress-bar {
1231
+ height: 100%;
1232
+ border-radius: 9999px;
1233
+ background: #0a0a0a;
1234
+ transition: width var(--alive-duration-slow) var(--alive-ease-standard);
1235
+ }
1236
+ .alive-progress-xs { height: 0.125rem; }
1237
+ .alive-progress-sm { height: 0.25rem; }
1238
+ .alive-progress-lg { height: 0.75rem; }
1239
+ .alive-progress-xl { height: 1rem; }
1240
+ .alive-progress-indeterminate .alive-progress-bar {
1241
+ width: 40% !important;
1242
+ animation: alive-progress-indeterminate 1.5s ease-in-out infinite;
1243
+ }
1244
+ @keyframes alive-progress-indeterminate {
1245
+ 0% { transform: translateX(-150%); }
1246
+ 100% { transform: translateX(400%); }
1247
+ }
1248
+
1249
+ /* \u2500\u2500 Separator \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1250
+
1251
+ .alive-separator {
1252
+ display: block;
1253
+ width: 100%;
1254
+ height: 1px;
1255
+ background: rgba(0,0,0,0.08);
1256
+ border: none;
1257
+ margin: 0;
1258
+ }
1259
+ .alive-separator-v {
1260
+ display: inline-block;
1261
+ width: 1px;
1262
+ height: 1em;
1263
+ vertical-align: middle;
1264
+ background: rgba(0,0,0,0.08);
1265
+ margin: 0 0.5rem;
1266
+ }
1267
+ .alive-separator-label {
1268
+ display: flex;
1269
+ align-items: center;
1270
+ gap: 0.75rem;
1271
+ font-size: 0.75rem;
1272
+ color: rgba(0,0,0,0.4);
1273
+ font-weight: 500;
1274
+ letter-spacing: 0.04em;
1275
+ text-transform: uppercase;
1276
+ }
1277
+ .alive-separator-label::before,
1278
+ .alive-separator-label::after {
1279
+ content: '';
1280
+ flex: 1;
1281
+ height: 1px;
1282
+ background: rgba(0,0,0,0.08);
1283
+ }
1284
+
1285
+ /* \u2500\u2500 Alert \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1286
+
1287
+ .alive-alert {
1288
+ display: flex;
1289
+ align-items: flex-start;
1290
+ gap: 0.75rem;
1291
+ padding: 1rem 1.25rem;
1292
+ border-radius: 0.75rem;
1293
+ border: 1px solid transparent;
1294
+ font-size: 0.875rem;
1295
+ line-height: 1.55;
1296
+ }
1297
+ .alive-alert-title {
1298
+ font-weight: 600;
1299
+ margin-bottom: 0.25rem;
1300
+ }
1301
+
1302
+ .alive-alert-info { background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.2); color: #1d4ed8; }
1303
+ .alive-alert-success { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.22); color: #15803d; }
1304
+ .alive-alert-warning { background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.25); color: #92400e; }
1305
+ .alive-alert-error { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); color: #dc2626; }
1306
+
1307
+ /* \u2500\u2500 Tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1308
+
1309
+ .alive-tooltip-wrap {
1310
+ position: relative;
1311
+ display: inline-flex;
1312
+ }
1313
+ .alive-tooltip {
1314
+ position: absolute;
1315
+ z-index: 50;
1316
+ bottom: calc(100% + 8px);
1317
+ left: 50%;
1318
+ transform: translateX(-50%) translateY(4px);
1319
+ padding: 0.375rem 0.75rem;
1320
+ font-size: 0.75rem;
1321
+ font-weight: 500;
1322
+ line-height: 1.4;
1323
+ white-space: nowrap;
1324
+ color: #fff;
1325
+ background: rgba(10,10,10,0.92);
1326
+ border-radius: 0.5rem;
1327
+ box-shadow: 0 4px 16px rgba(0,0,0,0.14);
1328
+ pointer-events: none;
1329
+ opacity: 0;
1330
+ transition:
1331
+ opacity var(--alive-duration-fast) var(--alive-ease-standard),
1332
+ transform var(--alive-duration-fast) var(--alive-ease-emphasized);
1333
+ }
1334
+ .alive-tooltip::after {
1335
+ content: '';
1336
+ position: absolute;
1337
+ top: 100%;
1338
+ left: 50%;
1339
+ transform: translateX(-50%);
1340
+ border: 5px solid transparent;
1341
+ border-top-color: rgba(10,10,10,0.92);
1342
+ }
1343
+ .alive-tooltip-wrap:hover .alive-tooltip {
1344
+ opacity: 1;
1345
+ transform: translateX(-50%) translateY(0);
1346
+ }
1347
+
1348
+ /* Tooltip placements */
1349
+ .alive-tooltip-bottom {
1350
+ top: calc(100% + 8px);
1351
+ bottom: auto;
1352
+ transform: translateX(-50%) translateY(-4px);
1353
+ }
1354
+ .alive-tooltip-bottom::after {
1355
+ top: auto;
1356
+ bottom: 100%;
1357
+ border-top-color: transparent;
1358
+ border-bottom-color: rgba(10,10,10,0.92);
1359
+ }
1360
+ .alive-tooltip-wrap:hover .alive-tooltip-bottom {
1361
+ transform: translateX(-50%) translateY(0);
1362
+ }
1363
+
1364
+ /* \u2500\u2500 Modal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1365
+
1366
+ .alive-backdrop {
1367
+ position: fixed;
1368
+ inset: 0;
1369
+ z-index: 40;
1370
+ background: rgba(0,0,0,0.45);
1371
+ backdrop-filter: blur(4px);
1372
+ animation: alive-fade-in var(--alive-duration-normal) var(--alive-ease-standard) both;
1373
+ }
1374
+ .alive-modal {
1375
+ position: fixed;
1376
+ inset: 0;
1377
+ z-index: 50;
1378
+ display: flex;
1379
+ align-items: center;
1380
+ justify-content: center;
1381
+ padding: 1rem;
1382
+ overflow-y: auto;
1383
+ }
1384
+ .alive-modal-content {
1385
+ position: relative;
1386
+ width: 100%;
1387
+ max-width: 32rem;
1388
+ max-height: calc(100dvh - 2rem);
1389
+ overflow-y: auto;
1390
+ border-radius: 1rem;
1391
+ background: #fff;
1392
+ border: 1px solid rgba(0,0,0,0.08);
1393
+ box-shadow:
1394
+ 0 24px 64px rgba(0,0,0,0.18),
1395
+ 0 8px 24px rgba(0,0,0,0.10);
1396
+ animation: alive-scale-up var(--alive-duration-slow) var(--alive-ease-emphasized) both;
1397
+ }
1398
+ .alive-modal-sm .alive-modal-content { max-width: 24rem; }
1399
+ .alive-modal-lg .alive-modal-content { max-width: 48rem; }
1400
+ .alive-modal-xl .alive-modal-content { max-width: 64rem; }
1401
+ .alive-modal-header {
1402
+ display: flex;
1403
+ align-items: center;
1404
+ justify-content: space-between;
1405
+ padding: 1.25rem 1.5rem;
1406
+ border-bottom: 1px solid rgba(0,0,0,0.06);
1407
+ }
1408
+ .alive-modal-body { padding: 1.5rem; }
1409
+ .alive-modal-footer {
1410
+ display: flex;
1411
+ align-items: center;
1412
+ justify-content: flex-end;
1413
+ gap: 0.75rem;
1414
+ padding: 1rem 1.5rem;
1415
+ border-top: 1px solid rgba(0,0,0,0.06);
1416
+ }
1417
+
1418
+ /* \u2500\u2500 Drawer / Sheet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1419
+
1420
+ .alive-drawer {
1421
+ position: fixed;
1422
+ top: 0;
1423
+ right: 0;
1424
+ bottom: 0;
1425
+ z-index: 50;
1426
+ width: 100%;
1427
+ max-width: 24rem;
1428
+ background: #fff;
1429
+ border-left: 1px solid rgba(0,0,0,0.08);
1430
+ box-shadow: -8px 0 40px rgba(0,0,0,0.1);
1431
+ display: flex;
1432
+ flex-direction: column;
1433
+ animation: alive-fade-left var(--alive-duration-slow) var(--alive-ease-emphasized) both;
1434
+ }
1435
+ .alive-drawer-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.06); }
1436
+ .alive-drawer-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
1437
+ .alive-drawer-footer { padding: 1rem 1.5rem; border-top: 1px solid rgba(0,0,0,0.06); }
1438
+
1439
+ /* \u2500\u2500 Navigation bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1440
+
1441
+ .alive-nav {
1442
+ position: sticky;
1443
+ top: 0;
1444
+ z-index: 50;
1445
+ display: flex;
1446
+ align-items: center;
1447
+ height: 3.5rem;
1448
+ padding: 0 1.5rem;
1449
+ border-bottom: 1px solid rgba(0,0,0,0.07);
1450
+ background: rgba(255,255,255,0.85);
1451
+ backdrop-filter: blur(12px);
1452
+ -webkit-backdrop-filter: blur(12px);
1453
+ gap: 1rem;
1454
+ }
1455
+ .alive-nav-brand {
1456
+ display: flex;
1457
+ align-items: center;
1458
+ gap: 0.625rem;
1459
+ font-weight: 600;
1460
+ font-size: 0.9375rem;
1461
+ text-decoration: none;
1462
+ color: inherit;
1463
+ }
1464
+ .alive-nav-items {
1465
+ display: flex;
1466
+ align-items: center;
1467
+ gap: 0.25rem;
1468
+ flex: 1;
1469
+ }
1470
+ .alive-nav-end {
1471
+ display: flex;
1472
+ align-items: center;
1473
+ gap: 0.5rem;
1474
+ margin-left: auto;
1475
+ }
1476
+ .alive-nav-link {
1477
+ padding: 0.4375rem 0.75rem;
1478
+ border-radius: 0.5rem;
1479
+ font-size: 0.8125rem;
1480
+ font-weight: 500;
1481
+ text-decoration: none;
1482
+ color: rgba(0,0,0,0.55);
1483
+ transition: background var(--alive-duration-fast) var(--alive-ease-standard), color var(--alive-duration-fast) var(--alive-ease-standard);
1484
+ cursor: pointer;
1485
+ }
1486
+ .alive-nav-link:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.85); }
1487
+ .alive-nav-link.is-active { background: rgba(0,0,0,0.07); color: rgba(0,0,0,0.9); }
1488
+
1489
+ /* \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1490
+
1491
+ .alive-tabs {
1492
+ display: flex;
1493
+ border-bottom: 1px solid rgba(0,0,0,0.08);
1494
+ gap: 0;
1495
+ position: relative;
1496
+ }
1497
+ .alive-tab {
1498
+ padding: 0.6875rem 1rem;
1499
+ font-size: 0.875rem;
1500
+ font-weight: 500;
1501
+ color: rgba(0,0,0,0.45);
1502
+ border: none;
1503
+ background: transparent;
1504
+ cursor: pointer;
1505
+ position: relative;
1506
+ border-bottom: 2px solid transparent;
1507
+ margin-bottom: -1px;
1508
+ transition: color var(--alive-duration-fast) var(--alive-ease-standard);
1509
+ }
1510
+ .alive-tab:hover { color: rgba(0,0,0,0.72); }
1511
+ .alive-tab.is-active {
1512
+ color: rgba(0,0,0,0.9);
1513
+ border-bottom-color: rgba(0,0,0,0.9);
1514
+ }
1515
+ /* Sliding indicator variant */
1516
+ .alive-tabs-indicator {
1517
+ position: absolute;
1518
+ bottom: -1px;
1519
+ height: 2px;
1520
+ background: #0a0a0a;
1521
+ border-radius: 2px 2px 0 0;
1522
+ transition:
1523
+ left var(--alive-duration-normal) var(--alive-ease-emphasized),
1524
+ width var(--alive-duration-normal) var(--alive-ease-emphasized);
1525
+ }
1526
+
1527
+ /* Pill tabs variant */
1528
+ .alive-tabs-pills {
1529
+ border-bottom: none;
1530
+ gap: 0.25rem;
1531
+ background: rgba(0,0,0,0.05);
1532
+ padding: 0.25rem;
1533
+ border-radius: 0.625rem;
1534
+ }
1535
+ .alive-tabs-pills .alive-tab {
1536
+ border-radius: 0.375rem;
1537
+ border-bottom: none;
1538
+ margin-bottom: 0;
1539
+ }
1540
+ .alive-tabs-pills .alive-tab.is-active {
1541
+ background: #fff;
1542
+ color: rgba(0,0,0,0.9);
1543
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
1544
+ border-bottom-color: transparent;
1545
+ }
1546
+
1547
+ /* \u2500\u2500 Dropdown / Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1548
+
1549
+ .alive-dropdown {
1550
+ position: absolute;
1551
+ z-index: 50;
1552
+ min-width: 12rem;
1553
+ padding: 0.375rem;
1554
+ border-radius: 0.75rem;
1555
+ background: #fff;
1556
+ border: 1px solid rgba(0,0,0,0.08);
1557
+ box-shadow:
1558
+ 0 8px 32px rgba(0,0,0,0.1),
1559
+ 0 2px 8px rgba(0,0,0,0.06);
1560
+ animation: alive-scale-up var(--alive-duration-fast) var(--alive-ease-emphasized) both;
1561
+ transform-origin: top left;
1562
+ }
1563
+ .alive-dropdown-item {
1564
+ display: flex;
1565
+ align-items: center;
1566
+ gap: 0.625rem;
1567
+ width: 100%;
1568
+ padding: 0.5625rem 0.75rem;
1569
+ font-size: 0.875rem;
1570
+ font-weight: 400;
1571
+ color: rgba(0,0,0,0.75);
1572
+ border-radius: 0.5rem;
1573
+ border: none;
1574
+ background: transparent;
1575
+ cursor: pointer;
1576
+ text-align: left;
1577
+ text-decoration: none;
1578
+ transition: background var(--alive-duration-fast) var(--alive-ease-standard), color var(--alive-duration-fast) var(--alive-ease-standard);
1579
+ }
1580
+ .alive-dropdown-item:hover {
1581
+ background: rgba(0,0,0,0.05);
1582
+ color: rgba(0,0,0,0.9);
1583
+ }
1584
+ .alive-dropdown-item.is-active {
1585
+ background: rgba(0,0,0,0.07);
1586
+ color: rgba(0,0,0,0.9);
1587
+ font-weight: 500;
1588
+ }
1589
+ .alive-dropdown-item-destructive { color: #dc2626; }
1590
+ .alive-dropdown-item-destructive:hover { background: rgba(239,68,68,0.08); color: #dc2626; }
1591
+ .alive-dropdown-separator {
1592
+ height: 1px;
1593
+ background: rgba(0,0,0,0.07);
1594
+ margin: 0.25rem 0;
1595
+ border: none;
1596
+ }
1597
+ .alive-dropdown-label {
1598
+ padding: 0.375rem 0.75rem;
1599
+ font-size: 0.6875rem;
1600
+ font-weight: 600;
1601
+ letter-spacing: 0.06em;
1602
+ text-transform: uppercase;
1603
+ color: rgba(0,0,0,0.35);
1604
+ }
1605
+
1606
+ /* \u2500\u2500 Table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1607
+
1608
+ .alive-table {
1609
+ width: 100%;
1610
+ border-collapse: collapse;
1611
+ font-size: 0.875rem;
1612
+ text-align: left;
1613
+ }
1614
+ .alive-table th {
1615
+ padding: 0.75rem 1rem;
1616
+ font-size: 0.75rem;
1617
+ font-weight: 600;
1618
+ letter-spacing: 0.04em;
1619
+ text-transform: uppercase;
1620
+ color: rgba(0,0,0,0.45);
1621
+ border-bottom: 1px solid rgba(0,0,0,0.08);
1622
+ white-space: nowrap;
1623
+ }
1624
+ .alive-table td {
1625
+ padding: 0.875rem 1rem;
1626
+ border-bottom: 1px solid rgba(0,0,0,0.05);
1627
+ color: rgba(0,0,0,0.75);
1628
+ transition: background var(--alive-duration-fast) var(--alive-ease-standard);
1629
+ }
1630
+ .alive-table tr:hover td { background: rgba(0,0,0,0.02); }
1631
+ .alive-table tr:last-child td { border-bottom: none; }
1632
+
1633
+ /* Table variants */
1634
+ .alive-table-striped tr:nth-child(even) td { background: rgba(0,0,0,0.018); }
1635
+ .alive-table-bordered td,
1636
+ .alive-table-bordered th { border: 1px solid rgba(0,0,0,0.07); }
1637
+
1638
+ /* \u2500\u2500 Chip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1639
+
1640
+ .alive-chip {
1641
+ display: inline-flex;
1642
+ align-items: center;
1643
+ gap: 0.375rem;
1644
+ padding: 0.3125rem 0.75rem;
1645
+ font-size: 0.8125rem;
1646
+ font-weight: 500;
1647
+ border-radius: 9999px;
1648
+ background: rgba(0,0,0,0.06);
1649
+ color: rgba(0,0,0,0.65);
1650
+ border: 1px solid rgba(0,0,0,0.1);
1651
+ cursor: default;
1652
+ user-select: none;
1653
+ transition:
1654
+ background var(--alive-duration-fast) var(--alive-ease-standard),
1655
+ border-color var(--alive-duration-fast) var(--alive-ease-standard);
1656
+ }
1657
+ .alive-chip:hover { background: rgba(0,0,0,0.09); border-color: rgba(0,0,0,0.16); }
1658
+ .alive-chip.is-selected {
1659
+ background: rgba(0,0,0,0.1);
1660
+ color: rgba(0,0,0,0.85);
1661
+ border-color: rgba(0,0,0,0.2);
1662
+ }
1663
+ .alive-chip-dismiss {
1664
+ display: inline-flex;
1665
+ align-items: center;
1666
+ justify-content: center;
1667
+ width: 1rem;
1668
+ height: 1rem;
1669
+ border-radius: 50%;
1670
+ cursor: pointer;
1671
+ opacity: 0.5;
1672
+ transition: opacity var(--alive-duration-fast) var(--alive-ease-standard), background var(--alive-duration-fast) var(--alive-ease-standard);
1673
+ }
1674
+ .alive-chip-dismiss:hover { opacity: 1; background: rgba(0,0,0,0.12); }
1675
+
1676
+ /* \u2500\u2500 Stack \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1677
+
1678
+ .alive-stack { display: flex; }
1679
+ .alive-stack-v { flex-direction: column; }
1680
+ .alive-stack-h { flex-direction: row; }
1681
+
1682
+ /* \u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1683
+
1684
+ .alive-container {
1685
+ width: 100%;
1686
+ margin-left: auto;
1687
+ margin-right: auto;
1688
+ padding-left: 1rem;
1689
+ padding-right: 1rem;
1690
+ }
1691
+ @media (min-width: 640px) { .alive-container { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; } }
1692
+ @media (min-width: 768px) { .alive-container { max-width: 768px; } }
1693
+ @media (min-width: 1024px) { .alive-container { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; } }
1694
+ @media (min-width: 1280px) { .alive-container { max-width: 1280px; } }
1695
+ @media (min-width: 1536px) { .alive-container { max-width: 1536px; } }
1696
+
1697
+ /* \u2500\u2500 Cluster (responsive flex wrap) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1698
+
1699
+ .alive-cluster {
1700
+ display: flex;
1701
+ flex-wrap: wrap;
1702
+ gap: 0.75rem;
1703
+ }
1704
+
1705
+ /* \u2500\u2500 Focus ring \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1706
+
1707
+ .alive-focus-ring:focus-visible {
1708
+ outline: 2px solid rgba(0,0,0,0.75);
1709
+ outline-offset: 2px;
1710
+ }
1711
+
1712
+ /* \u2500\u2500 Overlays & surfaces \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1713
+
1714
+ .alive-overlay {
1715
+ position: fixed;
1716
+ inset: 0;
1717
+ background: rgba(0,0,0,0.45);
1718
+ backdrop-filter: blur(4px);
1719
+ -webkit-backdrop-filter: blur(4px);
1720
+ }
1721
+
1722
+ /* \u2500\u2500 Toast / Snackbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1723
+
1724
+ .alive-toast-region {
1725
+ position: fixed;
1726
+ bottom: 1.25rem;
1727
+ right: 1.25rem;
1728
+ z-index: 60;
1729
+ display: flex;
1730
+ flex-direction: column;
1731
+ gap: 0.5rem;
1732
+ pointer-events: none;
1733
+ }
1734
+ .alive-toast {
1735
+ display: flex;
1736
+ align-items: center;
1737
+ gap: 0.75rem;
1738
+ padding: 0.875rem 1.125rem;
1739
+ border-radius: 0.75rem;
1740
+ background: rgba(10,10,10,0.94);
1741
+ color: #fff;
1742
+ font-size: 0.875rem;
1743
+ font-weight: 500;
1744
+ box-shadow: 0 8px 32px rgba(0,0,0,0.2);
1745
+ border: 1px solid rgba(255,255,255,0.1);
1746
+ pointer-events: auto;
1747
+ min-width: 16rem;
1748
+ max-width: 24rem;
1749
+ animation: alive-fade-right var(--alive-duration-slow) var(--alive-ease-emphasized) both;
1750
+ }
1751
+ .alive-toast-icon { flex-shrink: 0; }
1752
+ .alive-toast-body { flex: 1; min-width: 0; }
1753
+ .alive-toast-title { font-weight: 600; }
1754
+ .alive-toast-desc { font-size: 0.8125rem; opacity: 0.7; margin-top: 0.125rem; }
1755
+ .alive-toast-close {
1756
+ flex-shrink: 0;
1757
+ opacity: 0.5;
1758
+ cursor: pointer;
1759
+ transition: opacity var(--alive-duration-fast) var(--alive-ease-standard);
1760
+ }
1761
+ .alive-toast-close:hover { opacity: 1; }
1762
+
1763
+ /* Toast variants */
1764
+ .alive-toast-success { border-color: rgba(74,222,128,0.3); }
1765
+ .alive-toast-error { border-color: rgba(239,68,68,0.3); }
1766
+ .alive-toast-warning { border-color: rgba(251,191,36,0.3); }
1767
+
1768
+ /* \u2500\u2500 Command palette \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1769
+
1770
+ .alive-command {
1771
+ position: fixed;
1772
+ inset: 0;
1773
+ z-index: 60;
1774
+ display: flex;
1775
+ align-items: flex-start;
1776
+ justify-content: center;
1777
+ padding-top: 10vh;
1778
+ }
1779
+ .alive-command-panel {
1780
+ width: 100%;
1781
+ max-width: 38rem;
1782
+ border-radius: 1rem;
1783
+ background: #fff;
1784
+ border: 1px solid rgba(0,0,0,0.1);
1785
+ box-shadow:
1786
+ 0 24px 80px rgba(0,0,0,0.22),
1787
+ 0 8px 24px rgba(0,0,0,0.12);
1788
+ overflow: hidden;
1789
+ animation: alive-scale-up var(--alive-duration-slow) var(--alive-ease-emphasized) both;
1790
+ }
1791
+ .alive-command-input-wrap {
1792
+ display: flex;
1793
+ align-items: center;
1794
+ gap: 0.75rem;
1795
+ padding: 1rem 1.25rem;
1796
+ border-bottom: 1px solid rgba(0,0,0,0.08);
1797
+ }
1798
+ .alive-command-input {
1799
+ flex: 1;
1800
+ font-size: 1rem;
1801
+ border: none;
1802
+ outline: none;
1803
+ background: transparent;
1804
+ color: inherit;
1805
+ }
1806
+ .alive-command-list {
1807
+ max-height: 24rem;
1808
+ overflow-y: auto;
1809
+ padding: 0.375rem;
1810
+ }
1811
+ .alive-command-group-label {
1812
+ padding: 0.5rem 0.75rem 0.25rem;
1813
+ font-size: 0.6875rem;
1814
+ font-weight: 600;
1815
+ letter-spacing: 0.06em;
1816
+ text-transform: uppercase;
1817
+ color: rgba(0,0,0,0.35);
1818
+ }
1819
+ .alive-command-item {
1820
+ display: flex;
1821
+ align-items: center;
1822
+ gap: 0.75rem;
1823
+ padding: 0.625rem 0.75rem;
1824
+ border-radius: 0.5rem;
1825
+ font-size: 0.875rem;
1826
+ cursor: pointer;
1827
+ color: rgba(0,0,0,0.75);
1828
+ transition: background var(--alive-duration-fast) var(--alive-ease-standard), color var(--alive-duration-fast) var(--alive-ease-standard);
1829
+ }
1830
+ .alive-command-item:hover,
1831
+ .alive-command-item.is-active {
1832
+ background: rgba(0,0,0,0.05);
1833
+ color: rgba(0,0,0,0.9);
1834
+ }
1835
+ .alive-command-shortcut {
1836
+ margin-left: auto;
1837
+ font-size: 0.75rem;
1838
+ opacity: 0.4;
1839
+ font-family: ui-monospace, monospace;
1840
+ }
1841
+
1842
+ /* \u2500\u2500 Popover \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1843
+
1844
+ .alive-popover {
1845
+ position: absolute;
1846
+ z-index: 50;
1847
+ padding: 0.75rem;
1848
+ border-radius: 0.75rem;
1849
+ background: #fff;
1850
+ border: 1px solid rgba(0,0,0,0.08);
1851
+ box-shadow:
1852
+ 0 8px 32px rgba(0,0,0,0.1),
1853
+ 0 2px 8px rgba(0,0,0,0.06);
1854
+ animation: alive-scale-up var(--alive-duration-fast) var(--alive-ease-emphasized) both;
1855
+ }
1856
+
1857
+ /* \u2500\u2500 Sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1858
+
1859
+ .alive-sidebar {
1860
+ display: flex;
1861
+ flex-direction: column;
1862
+ width: 15rem;
1863
+ height: 100%;
1864
+ border-right: 1px solid rgba(0,0,0,0.07);
1865
+ background: #fafafa;
1866
+ overflow-y: auto;
1867
+ flex-shrink: 0;
1868
+ }
1869
+ .alive-sidebar-section {
1870
+ padding: 1rem 0.75rem;
1871
+ }
1872
+ .alive-sidebar-section + .alive-sidebar-section {
1873
+ border-top: 1px solid rgba(0,0,0,0.06);
1874
+ }
1875
+ .alive-sidebar-label {
1876
+ padding: 0 0.5rem 0.375rem;
1877
+ font-size: 0.6875rem;
1878
+ font-weight: 600;
1879
+ letter-spacing: 0.06em;
1880
+ text-transform: uppercase;
1881
+ color: rgba(0,0,0,0.35);
1882
+ }
1883
+ .alive-sidebar-item {
1884
+ display: flex;
1885
+ align-items: center;
1886
+ gap: 0.625rem;
1887
+ padding: 0.5rem 0.625rem;
1888
+ font-size: 0.875rem;
1889
+ font-weight: 400;
1890
+ border-radius: 0.5rem;
1891
+ color: rgba(0,0,0,0.6);
1892
+ cursor: pointer;
1893
+ text-decoration: none;
1894
+ transition: background var(--alive-duration-fast) var(--alive-ease-standard), color var(--alive-duration-fast) var(--alive-ease-standard);
1895
+ }
1896
+ .alive-sidebar-item:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.85); }
1897
+ .alive-sidebar-item.is-active {
1898
+ background: rgba(0,0,0,0.08);
1899
+ color: rgba(0,0,0,0.9);
1900
+ font-weight: 500;
1901
+ }
1902
+
1903
+ /* \u2500\u2500 Utility: visually hidden (screen reader) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1904
+ .alive-sr-only {
1905
+ position: absolute;
1906
+ width: 1px;
1907
+ height: 1px;
1908
+ padding: 0;
1909
+ margin: -1px;
1910
+ overflow: hidden;
1911
+ clip: rect(0,0,0,0);
1912
+ white-space: nowrap;
1913
+ border-width: 0;
1914
+ }
1915
+
1916
+ /* \u2500\u2500 Kbd \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1917
+
1918
+ .alive-kbd {
1919
+ display: inline-flex;
1920
+ align-items: center;
1921
+ justify-content: center;
1922
+ padding: 0.1875rem 0.4375rem;
1923
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
1924
+ font-size: 0.75rem;
1925
+ font-weight: 500;
1926
+ line-height: 1;
1927
+ color: rgba(0,0,0,0.65);
1928
+ background: rgba(0,0,0,0.04);
1929
+ border: 1px solid rgba(0,0,0,0.14);
1930
+ border-bottom-width: 2px;
1931
+ border-radius: 0.3125rem;
1932
+ white-space: nowrap;
1933
+ user-select: none;
1934
+ }
1935
+
1936
+ /* \u2500\u2500 Form group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1937
+
1938
+ .alive-form-group {
1939
+ display: flex;
1940
+ flex-direction: column;
1941
+ gap: 0.375rem;
1942
+ }
1943
+ .alive-label {
1944
+ display: block;
1945
+ font-size: 0.875rem;
1946
+ font-weight: 500;
1947
+ color: rgba(0,0,0,0.8);
1948
+ }
1949
+ .alive-label-required::after {
1950
+ content: ' *';
1951
+ color: #dc2626;
1952
+ }
1953
+ .alive-helper {
1954
+ font-size: 0.8125rem;
1955
+ color: rgba(0,0,0,0.45);
1956
+ line-height: 1.4;
1957
+ }
1958
+ .alive-error-msg {
1959
+ font-size: 0.8125rem;
1960
+ color: #dc2626;
1961
+ line-height: 1.4;
1962
+ }
1963
+
1964
+ /* \u2500\u2500 Breadcrumb \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1965
+
1966
+ .alive-breadcrumb {
1967
+ display: flex;
1968
+ align-items: center;
1969
+ flex-wrap: wrap;
1970
+ gap: 0.25rem;
1971
+ font-size: 0.875rem;
1972
+ color: rgba(0,0,0,0.45);
1973
+ list-style: none;
1974
+ margin: 0;
1975
+ padding: 0;
1976
+ }
1977
+ .alive-breadcrumb-item {
1978
+ display: flex;
1979
+ align-items: center;
1980
+ gap: 0.25rem;
1981
+ }
1982
+ .alive-breadcrumb-item a {
1983
+ color: rgba(0,0,0,0.55);
1984
+ text-decoration: none;
1985
+ transition: color var(--alive-duration-fast) var(--alive-ease-standard);
1986
+ }
1987
+ .alive-breadcrumb-item a:hover { color: rgba(0,0,0,0.9); }
1988
+ .alive-breadcrumb-item[aria-current="page"] { color: rgba(0,0,0,0.85); font-weight: 500; }
1989
+ .alive-breadcrumb-sep {
1990
+ color: rgba(0,0,0,0.25);
1991
+ user-select: none;
1992
+ font-size: 0.8125rem;
1993
+ }
1994
+
1995
+ /* \u2500\u2500 Accordion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
1996
+
1997
+ .alive-accordion {
1998
+ display: flex;
1999
+ flex-direction: column;
2000
+ border: 1px solid rgba(0,0,0,0.08);
2001
+ border-radius: 0.75rem;
2002
+ overflow: hidden;
2003
+ }
2004
+ .alive-accordion-item {
2005
+ border-bottom: 1px solid rgba(0,0,0,0.07);
2006
+ }
2007
+ .alive-accordion-item:last-child { border-bottom: none; }
2008
+ .alive-accordion-trigger {
2009
+ display: flex;
2010
+ align-items: center;
2011
+ justify-content: space-between;
2012
+ width: 100%;
2013
+ padding: 1rem 1.25rem;
2014
+ font-size: 0.9375rem;
2015
+ font-weight: 500;
2016
+ color: rgba(0,0,0,0.8);
2017
+ background: transparent;
2018
+ border: none;
2019
+ cursor: pointer;
2020
+ text-align: left;
2021
+ gap: 0.75rem;
2022
+ transition: background var(--alive-duration-fast) var(--alive-ease-standard), color var(--alive-duration-fast) var(--alive-ease-standard);
2023
+ }
2024
+ .alive-accordion-trigger:hover { background: rgba(0,0,0,0.025); color: rgba(0,0,0,0.9); }
2025
+ .alive-accordion-icon {
2026
+ flex-shrink: 0;
2027
+ width: 1rem;
2028
+ height: 1rem;
2029
+ color: rgba(0,0,0,0.35);
2030
+ transition: transform var(--alive-duration-normal) var(--alive-ease-emphasized);
2031
+ }
2032
+ .alive-accordion-item.is-open .alive-accordion-icon { transform: rotate(180deg); }
2033
+ .alive-accordion-content {
2034
+ overflow: hidden;
2035
+ font-size: 0.875rem;
2036
+ line-height: 1.6;
2037
+ color: rgba(0,0,0,0.6);
2038
+ }
2039
+ .alive-accordion-content-inner { padding: 0 1.25rem 1.25rem; }
2040
+
2041
+ /* \u2500\u2500 JS Runtime: is-open / is-active state helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2042
+
2043
+ /* Modal and Drawer: hidden by default, shown when .is-open is added by runtime */
2044
+ [data-alive-modal],
2045
+ [data-alive-drawer] {
2046
+ display: none;
2047
+ }
2048
+ [data-alive-modal].is-open,
2049
+ [data-alive-drawer].is-open {
2050
+ display: flex;
2051
+ }
2052
+
2053
+ /* Dropdown: hidden by default */
2054
+ [data-alive-dropdown-menu] {
2055
+ display: none;
2056
+ }
2057
+ [data-alive-dropdown-menu].is-open {
2058
+ display: block;
2059
+ }
2060
+
2061
+ /* Accordion content: collapsed by default, expanded when parent has .is-open */
2062
+ [data-alive-content] {
2063
+ display: grid;
2064
+ grid-template-rows: 0fr;
2065
+ transition: grid-template-rows var(--alive-duration-normal) var(--alive-ease-standard);
2066
+ }
2067
+ [data-alive-content] > * {
2068
+ overflow: hidden;
2069
+ }
2070
+ [data-alive-accordion-item].is-open [data-alive-content] {
2071
+ grid-template-rows: 1fr;
2072
+ }
2073
+
2074
+ /* Tabs: panels hidden by default, shown when .is-active */
2075
+ [data-alive-panel] {
2076
+ display: none;
2077
+ }
2078
+ [data-alive-panel].is-active {
2079
+ display: block;
2080
+ }
2081
+ [data-alive-tab].is-active {
2082
+ color: rgba(0,0,0,0.9);
2083
+ border-bottom-color: rgba(0,0,0,0.9);
2084
+ }
2085
+
2086
+ /* \u2500\u2500 Pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
2087
+
2088
+ .alive-pagination {
2089
+ display: flex;
2090
+ align-items: center;
2091
+ gap: 0.25rem;
2092
+ list-style: none;
2093
+ margin: 0;
2094
+ padding: 0;
2095
+ }
2096
+ .alive-page-item {
2097
+ display: inline-flex;
2098
+ align-items: center;
2099
+ justify-content: center;
2100
+ min-width: 2.25rem;
2101
+ height: 2.25rem;
2102
+ padding: 0 0.625rem;
2103
+ font-size: 0.875rem;
2104
+ font-weight: 500;
2105
+ border-radius: 0.5rem;
2106
+ border: 1px solid transparent;
2107
+ color: rgba(0,0,0,0.55);
2108
+ cursor: pointer;
2109
+ background: transparent;
2110
+ text-decoration: none;
2111
+ user-select: none;
2112
+ transition:
2113
+ background var(--alive-duration-fast) var(--alive-ease-standard),
2114
+ border-color var(--alive-duration-fast) var(--alive-ease-standard),
2115
+ color var(--alive-duration-fast) var(--alive-ease-standard);
2116
+ }
2117
+ .alive-page-item:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.85); }
2118
+ .alive-page-item.is-active {
2119
+ background: rgba(0,0,0,0.08);
2120
+ border-color: rgba(0,0,0,0.14);
2121
+ color: rgba(0,0,0,0.9);
2122
+ font-weight: 600;
2123
+ cursor: default;
2124
+ }
2125
+ .alive-page-item:disabled,
2126
+ .alive-page-item.is-disabled {
2127
+ opacity: 0.35;
2128
+ cursor: not-allowed;
2129
+ pointer-events: none;
2130
+ }
2131
+ .alive-page-gap {
2132
+ display: inline-flex;
2133
+ align-items: center;
2134
+ justify-content: center;
2135
+ width: 2.25rem;
2136
+ height: 2.25rem;
2137
+ font-size: 0.875rem;
2138
+ color: rgba(0,0,0,0.3);
2139
+ user-select: none;
2140
+ }
2141
+ `;
2142
+ }
2143
+
2144
+ // src/generator/utils.ts
2145
+ function escapeSelector(cls) {
2146
+ let result = cls.replace(/\./g, "\\.").replace(/:/g, "\\:").replace(/\[/g, "\\[").replace(/\]/g, "\\]").replace(/\//g, "\\/").replace(/#/g, "\\#").replace(/%/g, "\\%");
2147
+ if (result.startsWith("-")) {
2148
+ result = "\\" + result;
2149
+ }
2150
+ return result;
2151
+ }
2152
+ function resolveColor(colors, name, shade) {
2153
+ if (!Object.prototype.hasOwnProperty.call(colors, name)) return null;
2154
+ const entry = colors[name];
2155
+ if (typeof entry === "string") return entry;
2156
+ if (!shade) return null;
2157
+ if (!Object.prototype.hasOwnProperty.call(entry, shade)) return null;
2158
+ return entry[shade] ?? null;
2159
+ }
2160
+ function parseVariants(cls) {
2161
+ const variants = [];
2162
+ let depth = 0;
2163
+ let current = "";
2164
+ for (const ch of cls) {
2165
+ if (ch === "[") depth++;
2166
+ else if (ch === "]") depth--;
2167
+ else if (ch === ":" && depth === 0) {
2168
+ variants.push(current);
2169
+ current = "";
2170
+ continue;
2171
+ }
2172
+ current += ch;
2173
+ }
2174
+ return { variants, base: current };
2175
+ }
2176
+
2177
+ // src/generator/colors.ts
2178
+ var TRANSITIONED = `
2179
+ transition-property: {prop};
2180
+ transition-duration: var(--alive-duration, 0ms);
2181
+ transition-timing-function: var(--alive-ease, linear);`;
2182
+ function transitioned(prop) {
2183
+ return TRANSITIONED.replace("{prop}", prop);
2184
+ }
2185
+ function generateColors(classes, config) {
2186
+ const { colors } = config.theme;
2187
+ const rules = [];
2188
+ for (const cls of classes) {
2189
+ const generated = matchColor(cls, colors);
2190
+ if (generated) rules.push(generated);
2191
+ }
2192
+ return rules;
2193
+ }
2194
+ function matchColor(cls, colors) {
2195
+ const bgMatch = cls.match(/^bg-([a-z]+)(?:-(\d+))?$/);
2196
+ if (bgMatch) {
2197
+ const value = resolveColor(colors, bgMatch[1], bgMatch[2]);
2198
+ if (value) {
2199
+ return `.${cls} {
2200
+ background-color: ${value};${transitioned("background-color")}
2201
+ }`;
2202
+ }
2203
+ }
2204
+ const textColorMatch = cls.match(/^text-([a-z]+)(?:-(\d+))?$/);
2205
+ if (textColorMatch) {
2206
+ const value = resolveColor(colors, textColorMatch[1], textColorMatch[2]);
2207
+ if (value) {
2208
+ return `.${cls} {
2209
+ color: ${value};${transitioned("color")}
2210
+ }`;
2211
+ }
2212
+ }
2213
+ const borderColorMatch = cls.match(/^border-([a-z]+)(?:-(\d+))?$/);
2214
+ if (borderColorMatch) {
2215
+ const value = resolveColor(colors, borderColorMatch[1], borderColorMatch[2]);
2216
+ if (value) {
2217
+ return `.${cls} {
2218
+ border-color: ${value};${transitioned("border-color")}
2219
+ }`;
2220
+ }
2221
+ }
2222
+ const ringColorMatch = cls.match(/^ring-([a-z]+)(?:-(\d+))?$/);
2223
+ if (ringColorMatch) {
2224
+ const value = resolveColor(colors, ringColorMatch[1], ringColorMatch[2]);
2225
+ if (value) {
2226
+ return `.${cls} {
2227
+ --alive-ring-color: ${value};
2228
+ }`;
2229
+ }
2230
+ }
2231
+ const outlineColorMatch = cls.match(/^outline-([a-z]+)(?:-(\d+))?$/);
2232
+ if (outlineColorMatch) {
2233
+ const value = resolveColor(colors, outlineColorMatch[1], outlineColorMatch[2]);
2234
+ if (value) {
2235
+ return `.${cls} {
2236
+ outline-color: ${value};
2237
+ }`;
2238
+ }
2239
+ }
2240
+ const fillMatch = cls.match(/^fill-([a-z]+)(?:-(\d+))?$/);
2241
+ if (fillMatch) {
2242
+ const value = resolveColor(colors, fillMatch[1], fillMatch[2]);
2243
+ if (value) {
2244
+ return `.${cls} {
2245
+ fill: ${value};
2246
+ }`;
2247
+ }
2248
+ }
2249
+ const strokeMatch = cls.match(/^stroke-([a-z]+)(?:-(\d+))?$/);
2250
+ if (strokeMatch) {
2251
+ const value = resolveColor(colors, strokeMatch[1], strokeMatch[2]);
2252
+ if (value) {
2253
+ return `.${cls} {
2254
+ stroke: ${value};
2255
+ }`;
2256
+ }
2257
+ }
2258
+ const decorationMatch = cls.match(/^decoration-([a-z]+)(?:-(\d+))?$/);
2259
+ if (decorationMatch) {
2260
+ const value = resolveColor(colors, decorationMatch[1], decorationMatch[2]);
2261
+ if (value) {
2262
+ return `.${cls} {
2263
+ text-decoration-color: ${value};
2264
+ }`;
2265
+ }
2266
+ }
2267
+ const caretMatch = cls.match(/^caret-([a-z]+)(?:-(\d+))?$/);
2268
+ if (caretMatch) {
2269
+ const value = resolveColor(colors, caretMatch[1], caretMatch[2]);
2270
+ if (value) {
2271
+ return `.${cls} {
2272
+ caret-color: ${value};
2273
+ }`;
2274
+ }
2275
+ }
2276
+ const accentMatch = cls.match(/^accent-([a-z]+)(?:-(\d+))?$/);
2277
+ if (accentMatch) {
2278
+ const value = resolveColor(colors, accentMatch[1], accentMatch[2]);
2279
+ if (value) {
2280
+ return `.${cls} {
2281
+ accent-color: ${value};
2282
+ }`;
2283
+ }
2284
+ }
2285
+ const shadowColorMatch = cls.match(/^shadow-([a-z]+)-(\d+)$/);
2286
+ if (shadowColorMatch) {
2287
+ const value = resolveColor(colors, shadowColorMatch[1], shadowColorMatch[2]);
2288
+ if (value) {
2289
+ return `.${cls} {
2290
+ --alive-shadow-color: ${value};
2291
+ }`;
2292
+ }
2293
+ }
2294
+ const arbBgMatch = cls.match(/^bg-\[(.+)\]$/);
2295
+ if (arbBgMatch) {
2296
+ const val = arbBgMatch[1];
2297
+ const escaped = escapeSelector(cls);
2298
+ if (val.startsWith("url(") || val.startsWith("linear-gradient") || val.startsWith("radial-gradient")) {
2299
+ return `.${escaped} {
2300
+ background-image: ${val};${transitioned("background-image")}
2301
+ }`;
2302
+ }
2303
+ return `.${escaped} {
2304
+ background-color: ${val};${transitioned("background-color")}
2305
+ }`;
2306
+ }
2307
+ const arbTextMatch = cls.match(/^text-\[(.+)\]$/);
2308
+ if (arbTextMatch) {
2309
+ return `.${escapeSelector(cls)} {
2310
+ color: ${arbTextMatch[1]};${transitioned("color")}
2311
+ }`;
2312
+ }
2313
+ const arbBorderColorMatch = cls.match(/^border-\[#[0-9a-fA-F]|^border-\[rgb|^border-\[hsl|^border-\[oklch/);
2314
+ if (arbBorderColorMatch) {
2315
+ const m = cls.match(/^border-\[(.+)\]$/);
2316
+ if (m) {
2317
+ return `.${escapeSelector(cls)} {
2318
+ border-color: ${m[1]};${transitioned("border-color")}
2319
+ }`;
2320
+ }
2321
+ }
2322
+ const arbFillMatch = cls.match(/^fill-\[(.+)\]$/);
2323
+ if (arbFillMatch) {
2324
+ return `.${escapeSelector(cls)} {
2325
+ fill: ${arbFillMatch[1]};
2326
+ }`;
2327
+ }
2328
+ const arbStrokeMatch = cls.match(/^stroke-\[(.+)\]$/);
2329
+ if (arbStrokeMatch) {
2330
+ return `.${escapeSelector(cls)} {
2331
+ stroke: ${arbStrokeMatch[1]};
2332
+ }`;
2333
+ }
2334
+ return null;
2335
+ }
2336
+
2337
+ // src/generator/spacing.ts
2338
+ function generateSpacing(classes, config) {
2339
+ const { spacing } = config.theme;
2340
+ const rules = [];
2341
+ for (const cls of classes) {
2342
+ const generated = matchSpacing(cls, spacing);
2343
+ if (generated) rules.push(generated);
2344
+ }
2345
+ return rules;
2346
+ }
2347
+ function has(obj, key) {
2348
+ return typeof obj[key] === "string";
2349
+ }
2350
+ function matchSpacing(cls, spacing) {
2351
+ const pMatch = cls.match(/^p-(.+)$/);
2352
+ if (pMatch && has(spacing, pMatch[1])) {
2353
+ return `.${cls} { padding: ${spacing[pMatch[1]]}; }`;
2354
+ }
2355
+ const pxMatch = cls.match(/^px-(.+)$/);
2356
+ if (pxMatch && has(spacing, pxMatch[1])) {
2357
+ return `.${cls} { padding-left: ${spacing[pxMatch[1]]}; padding-right: ${spacing[pxMatch[1]]}; }`;
2358
+ }
2359
+ const pyMatch = cls.match(/^py-(.+)$/);
2360
+ if (pyMatch && has(spacing, pyMatch[1])) {
2361
+ return `.${cls} { padding-top: ${spacing[pyMatch[1]]}; padding-bottom: ${spacing[pyMatch[1]]}; }`;
2362
+ }
2363
+ const ptMatch = cls.match(/^pt-(.+)$/);
2364
+ if (ptMatch && has(spacing, ptMatch[1])) {
2365
+ return `.${cls} { padding-top: ${spacing[ptMatch[1]]}; }`;
2366
+ }
2367
+ const prMatch = cls.match(/^pr-(.+)$/);
2368
+ if (prMatch && has(spacing, prMatch[1])) {
2369
+ return `.${cls} { padding-right: ${spacing[prMatch[1]]}; }`;
2370
+ }
2371
+ const pbMatch = cls.match(/^pb-(.+)$/);
2372
+ if (pbMatch && has(spacing, pbMatch[1])) {
2373
+ return `.${cls} { padding-bottom: ${spacing[pbMatch[1]]}; }`;
2374
+ }
2375
+ const plMatch = cls.match(/^pl-(.+)$/);
2376
+ if (plMatch && has(spacing, plMatch[1])) {
2377
+ return `.${cls} { padding-left: ${spacing[plMatch[1]]}; }`;
2378
+ }
2379
+ const mMatch = cls.match(/^m-(.+)$/);
2380
+ if (mMatch) {
2381
+ if (mMatch[1] === "auto") return `.${cls} { margin: auto; }`;
2382
+ if (has(spacing, mMatch[1])) return `.${cls} { margin: ${spacing[mMatch[1]]}; }`;
2383
+ }
2384
+ const mxMatch = cls.match(/^mx-(.+)$/);
2385
+ if (mxMatch) {
2386
+ if (mxMatch[1] === "auto") return `.${cls} { margin-left: auto; margin-right: auto; }`;
2387
+ if (has(spacing, mxMatch[1])) return `.${cls} { margin-left: ${spacing[mxMatch[1]]}; margin-right: ${spacing[mxMatch[1]]}; }`;
2388
+ }
2389
+ const myMatch = cls.match(/^my-(.+)$/);
2390
+ if (myMatch) {
2391
+ if (myMatch[1] === "auto") return `.${cls} { margin-top: auto; margin-bottom: auto; }`;
2392
+ if (has(spacing, myMatch[1])) return `.${cls} { margin-top: ${spacing[myMatch[1]]}; margin-bottom: ${spacing[myMatch[1]]}; }`;
2393
+ }
2394
+ const mtMatch = cls.match(/^mt-(.+)$/);
2395
+ if (mtMatch) {
2396
+ if (mtMatch[1] === "auto") return `.${cls} { margin-top: auto; }`;
2397
+ if (has(spacing, mtMatch[1])) return `.${cls} { margin-top: ${spacing[mtMatch[1]]}; }`;
2398
+ }
2399
+ const mrMatch = cls.match(/^mr-(.+)$/);
2400
+ if (mrMatch) {
2401
+ if (mrMatch[1] === "auto") return `.${cls} { margin-right: auto; }`;
2402
+ if (has(spacing, mrMatch[1])) return `.${cls} { margin-right: ${spacing[mrMatch[1]]}; }`;
2403
+ }
2404
+ const mbMatch = cls.match(/^mb-(.+)$/);
2405
+ if (mbMatch) {
2406
+ if (mbMatch[1] === "auto") return `.${cls} { margin-bottom: auto; }`;
2407
+ if (has(spacing, mbMatch[1])) return `.${cls} { margin-bottom: ${spacing[mbMatch[1]]}; }`;
2408
+ }
2409
+ const mlMatch = cls.match(/^ml-(.+)$/);
2410
+ if (mlMatch) {
2411
+ if (mlMatch[1] === "auto") return `.${cls} { margin-left: auto; }`;
2412
+ if (has(spacing, mlMatch[1])) return `.${cls} { margin-left: ${spacing[mlMatch[1]]}; }`;
2413
+ }
2414
+ const gapMatch = cls.match(/^gap-(.+)$/);
2415
+ if (gapMatch && has(spacing, gapMatch[1])) {
2416
+ return `.${cls} { gap: ${spacing[gapMatch[1]]}; }`;
2417
+ }
2418
+ const gapXMatch = cls.match(/^gap-x-(.+)$/);
2419
+ if (gapXMatch && has(spacing, gapXMatch[1])) {
2420
+ return `.${cls} { column-gap: ${spacing[gapXMatch[1]]}; }`;
2421
+ }
2422
+ const gapYMatch = cls.match(/^gap-y-(.+)$/);
2423
+ if (gapYMatch && has(spacing, gapYMatch[1])) {
2424
+ return `.${cls} { row-gap: ${spacing[gapYMatch[1]]}; }`;
2425
+ }
2426
+ const spaceXMatch = cls.match(/^space-x-(.+)$/);
2427
+ if (spaceXMatch && has(spacing, spaceXMatch[1])) {
2428
+ return `.${cls} > * + * { margin-left: ${spacing[spaceXMatch[1]]}; }`;
2429
+ }
2430
+ const spaceYMatch = cls.match(/^space-y-(.+)$/);
2431
+ if (spaceYMatch && has(spacing, spaceYMatch[1])) {
2432
+ return `.${cls} > * + * { margin-top: ${spacing[spaceYMatch[1]]}; }`;
2433
+ }
2434
+ const insetMatch = cls.match(/^inset-(.+)$/);
2435
+ if (insetMatch) {
2436
+ if (insetMatch[1] === "auto") return `.${cls} { inset: auto; }`;
2437
+ if (insetMatch[1] === "0") return `.${cls} { inset: 0px; }`;
2438
+ if (has(spacing, insetMatch[1])) return `.${cls} { inset: ${spacing[insetMatch[1]]}; }`;
2439
+ }
2440
+ const insetXMatch = cls.match(/^inset-x-(.+)$/);
2441
+ if (insetXMatch) {
2442
+ const val = insetXMatch[1] === "auto" ? "auto" : insetXMatch[1] === "0" ? "0px" : has(spacing, insetXMatch[1]) ? spacing[insetXMatch[1]] : void 0;
2443
+ if (val) return `.${cls} { left: ${val}; right: ${val}; }`;
2444
+ }
2445
+ const insetYMatch = cls.match(/^inset-y-(.+)$/);
2446
+ if (insetYMatch) {
2447
+ const val = insetYMatch[1] === "auto" ? "auto" : insetYMatch[1] === "0" ? "0px" : has(spacing, insetYMatch[1]) ? spacing[insetYMatch[1]] : void 0;
2448
+ if (val) return `.${cls} { top: ${val}; bottom: ${val}; }`;
2449
+ }
2450
+ const topMatch = cls.match(/^top-(.+)$/);
2451
+ if (topMatch) {
2452
+ if (topMatch[1] === "auto") return `.${cls} { top: auto; }`;
2453
+ if (topMatch[1] === "0") return `.${cls} { top: 0px; }`;
2454
+ if (has(spacing, topMatch[1])) return `.${cls} { top: ${spacing[topMatch[1]]}; }`;
2455
+ }
2456
+ const rightMatch = cls.match(/^right-(.+)$/);
2457
+ if (rightMatch) {
2458
+ if (rightMatch[1] === "auto") return `.${cls} { right: auto; }`;
2459
+ if (rightMatch[1] === "0") return `.${cls} { right: 0px; }`;
2460
+ if (has(spacing, rightMatch[1])) return `.${cls} { right: ${spacing[rightMatch[1]]}; }`;
2461
+ }
2462
+ const bottomMatch = cls.match(/^bottom-(.+)$/);
2463
+ if (bottomMatch) {
2464
+ if (bottomMatch[1] === "auto") return `.${cls} { bottom: auto; }`;
2465
+ if (bottomMatch[1] === "0") return `.${cls} { bottom: 0px; }`;
2466
+ if (has(spacing, bottomMatch[1])) return `.${cls} { bottom: ${spacing[bottomMatch[1]]}; }`;
2467
+ }
2468
+ const leftMatch = cls.match(/^left-(.+)$/);
2469
+ if (leftMatch) {
2470
+ if (leftMatch[1] === "auto") return `.${cls} { left: auto; }`;
2471
+ if (leftMatch[1] === "0") return `.${cls} { left: 0px; }`;
2472
+ if (has(spacing, leftMatch[1])) return `.${cls} { left: ${spacing[leftMatch[1]]}; }`;
2473
+ }
2474
+ const negMMatch = cls.match(/^-m-(.+)$/);
2475
+ if (negMMatch && has(spacing, negMMatch[1])) {
2476
+ return `.\\-m-${negMMatch[1]} { margin: -${spacing[negMMatch[1]]}; }`;
2477
+ }
2478
+ const negMxMatch = cls.match(/^-mx-(.+)$/);
2479
+ if (negMxMatch && has(spacing, negMxMatch[1])) {
2480
+ return `.\\-mx-${negMxMatch[1]} { margin-left: -${spacing[negMxMatch[1]]}; margin-right: -${spacing[negMxMatch[1]]}; }`;
2481
+ }
2482
+ const negMyMatch = cls.match(/^-my-(.+)$/);
2483
+ if (negMyMatch && has(spacing, negMyMatch[1])) {
2484
+ return `.\\-my-${negMyMatch[1]} { margin-top: -${spacing[negMyMatch[1]]}; margin-bottom: -${spacing[negMyMatch[1]]}; }`;
2485
+ }
2486
+ const negMtMatch = cls.match(/^-mt-(.+)$/);
2487
+ if (negMtMatch && has(spacing, negMtMatch[1])) {
2488
+ return `.\\-mt-${negMtMatch[1]} { margin-top: -${spacing[negMtMatch[1]]}; }`;
2489
+ }
2490
+ const negMrMatch = cls.match(/^-mr-(.+)$/);
2491
+ if (negMrMatch && has(spacing, negMrMatch[1])) {
2492
+ return `.\\-mr-${negMrMatch[1]} { margin-right: -${spacing[negMrMatch[1]]}; }`;
2493
+ }
2494
+ const negMbMatch = cls.match(/^-mb-(.+)$/);
2495
+ if (negMbMatch && has(spacing, negMbMatch[1])) {
2496
+ return `.\\-mb-${negMbMatch[1]} { margin-bottom: -${spacing[negMbMatch[1]]}; }`;
2497
+ }
2498
+ const negMlMatch = cls.match(/^-ml-(.+)$/);
2499
+ if (negMlMatch && has(spacing, negMlMatch[1])) {
2500
+ return `.\\-ml-${negMlMatch[1]} { margin-left: -${spacing[negMlMatch[1]]}; }`;
2501
+ }
2502
+ const negInsetMatch = cls.match(/^-inset-(.+)$/);
2503
+ if (negInsetMatch && has(spacing, negInsetMatch[1])) {
2504
+ return `.\\-inset-${negInsetMatch[1]} { inset: -${spacing[negInsetMatch[1]]}; }`;
2505
+ }
2506
+ const negInsetXMatch = cls.match(/^-inset-x-(.+)$/);
2507
+ if (negInsetXMatch && has(spacing, negInsetXMatch[1])) {
2508
+ return `.\\-inset-x-${negInsetXMatch[1]} { left: -${spacing[negInsetXMatch[1]]}; right: -${spacing[negInsetXMatch[1]]}; }`;
2509
+ }
2510
+ const negInsetYMatch = cls.match(/^-inset-y-(.+)$/);
2511
+ if (negInsetYMatch && has(spacing, negInsetYMatch[1])) {
2512
+ return `.\\-inset-y-${negInsetYMatch[1]} { top: -${spacing[negInsetYMatch[1]]}; bottom: -${spacing[negInsetYMatch[1]]}; }`;
2513
+ }
2514
+ const negTopMatch = cls.match(/^-top-(.+)$/);
2515
+ if (negTopMatch && has(spacing, negTopMatch[1])) {
2516
+ return `.\\-top-${negTopMatch[1]} { top: -${spacing[negTopMatch[1]]}; }`;
2517
+ }
2518
+ const negRightMatch = cls.match(/^-right-(.+)$/);
2519
+ if (negRightMatch && has(spacing, negRightMatch[1])) {
2520
+ return `.\\-right-${negRightMatch[1]} { right: -${spacing[negRightMatch[1]]}; }`;
2521
+ }
2522
+ const negBottomMatch = cls.match(/^-bottom-(.+)$/);
2523
+ if (negBottomMatch && has(spacing, negBottomMatch[1])) {
2524
+ return `.\\-bottom-${negBottomMatch[1]} { bottom: -${spacing[negBottomMatch[1]]}; }`;
2525
+ }
2526
+ const negLeftMatch = cls.match(/^-left-(.+)$/);
2527
+ if (negLeftMatch && has(spacing, negLeftMatch[1])) {
2528
+ return `.\\-left-${negLeftMatch[1]} { left: -${spacing[negLeftMatch[1]]}; }`;
2529
+ }
2530
+ const arbSpacingMatch = cls.match(/^(w|h|p|m|pt|pr|pb|pl|px|py|mt|mr|mb|ml|mx|my|gap|gap-x|gap-y|top|right|bottom|left|inset|inset-x|inset-y)-\[(.+)\]$/);
2531
+ if (arbSpacingMatch) {
2532
+ const [, prop, val] = arbSpacingMatch;
2533
+ const escaped = escapeSelector(cls);
2534
+ switch (prop) {
2535
+ case "w":
2536
+ return `.${escaped} { width: ${val}; }`;
2537
+ case "h":
2538
+ return `.${escaped} { height: ${val}; }`;
2539
+ case "p":
2540
+ return `.${escaped} { padding: ${val}; }`;
2541
+ case "m":
2542
+ return `.${escaped} { margin: ${val}; }`;
2543
+ case "pt":
2544
+ return `.${escaped} { padding-top: ${val}; }`;
2545
+ case "pr":
2546
+ return `.${escaped} { padding-right: ${val}; }`;
2547
+ case "pb":
2548
+ return `.${escaped} { padding-bottom: ${val}; }`;
2549
+ case "pl":
2550
+ return `.${escaped} { padding-left: ${val}; }`;
2551
+ case "px":
2552
+ return `.${escaped} { padding-left: ${val}; padding-right: ${val}; }`;
2553
+ case "py":
2554
+ return `.${escaped} { padding-top: ${val}; padding-bottom: ${val}; }`;
2555
+ case "mt":
2556
+ return `.${escaped} { margin-top: ${val}; }`;
2557
+ case "mr":
2558
+ return `.${escaped} { margin-right: ${val}; }`;
2559
+ case "mb":
2560
+ return `.${escaped} { margin-bottom: ${val}; }`;
2561
+ case "ml":
2562
+ return `.${escaped} { margin-left: ${val}; }`;
2563
+ case "mx":
2564
+ return `.${escaped} { margin-left: ${val}; margin-right: ${val}; }`;
2565
+ case "my":
2566
+ return `.${escaped} { margin-top: ${val}; margin-bottom: ${val}; }`;
2567
+ case "gap":
2568
+ return `.${escaped} { gap: ${val}; }`;
2569
+ case "gap-x":
2570
+ return `.${escaped} { column-gap: ${val}; }`;
2571
+ case "gap-y":
2572
+ return `.${escaped} { row-gap: ${val}; }`;
2573
+ case "top":
2574
+ return `.${escaped} { top: ${val}; }`;
2575
+ case "right":
2576
+ return `.${escaped} { right: ${val}; }`;
2577
+ case "bottom":
2578
+ return `.${escaped} { bottom: ${val}; }`;
2579
+ case "left":
2580
+ return `.${escaped} { left: ${val}; }`;
2581
+ case "inset":
2582
+ return `.${escaped} { inset: ${val}; }`;
2583
+ case "inset-x":
2584
+ return `.${escaped} { left: ${val}; right: ${val}; }`;
2585
+ case "inset-y":
2586
+ return `.${escaped} { top: ${val}; bottom: ${val}; }`;
2587
+ }
2588
+ }
2589
+ return null;
2590
+ }
2591
+
2592
+ // src/generator/typography.ts
2593
+ function hasOwn(obj, key) {
2594
+ return Object.prototype.hasOwnProperty.call(obj, key);
2595
+ }
2596
+ function generateTypography(classes, config) {
2597
+ const { fontSize, fontWeight, lineHeight } = config.theme;
2598
+ const rules = [];
2599
+ for (const cls of classes) {
2600
+ const generated = matchTypography(cls, fontSize, fontWeight, lineHeight);
2601
+ if (generated) rules.push(generated);
2602
+ }
2603
+ return rules;
2604
+ }
2605
+ function matchTypography(cls, fontSize, fontWeight, lineHeight) {
2606
+ const textSizeMatch = cls.match(/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/);
2607
+ if (textSizeMatch && hasOwn(fontSize, textSizeMatch[1])) {
2608
+ const [size, lh] = fontSize[textSizeMatch[1]];
2609
+ return `.${cls} {
2610
+ font-size: ${size};
2611
+ line-height: ${lh};
2612
+ }`;
2613
+ }
2614
+ const fontWeightMatch = cls.match(/^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/);
2615
+ if (fontWeightMatch && hasOwn(fontWeight, fontWeightMatch[1])) {
2616
+ return `.${cls} { font-weight: ${fontWeight[fontWeightMatch[1]]}; }`;
2617
+ }
2618
+ if (cls === "font-sans") return `.${cls} { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }`;
2619
+ if (cls === "font-serif") return `.${cls} { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }`;
2620
+ if (cls === "font-mono") return `.${cls} { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }`;
2621
+ const leadingMatch = cls.match(/^leading-(.+)$/);
2622
+ if (leadingMatch && hasOwn(lineHeight, leadingMatch[1])) {
2623
+ return `.${cls} { line-height: ${lineHeight[leadingMatch[1]]}; }`;
2624
+ }
2625
+ const trackingMap = {
2626
+ tighter: "-0.05em",
2627
+ tight: "-0.025em",
2628
+ normal: "0em",
2629
+ wide: "0.025em",
2630
+ wider: "0.05em",
2631
+ widest: "0.1em"
2632
+ };
2633
+ const trackingMatch = cls.match(/^tracking-(.+)$/);
2634
+ if (trackingMatch && Object.prototype.hasOwnProperty.call(trackingMap, trackingMatch[1])) {
2635
+ return `.${cls} { letter-spacing: ${trackingMap[trackingMatch[1]]}; }`;
2636
+ }
2637
+ if (cls === "text-left") return `.${cls} { text-align: left; }`;
2638
+ if (cls === "text-center") return `.${cls} { text-align: center; }`;
2639
+ if (cls === "text-right") return `.${cls} { text-align: right; }`;
2640
+ if (cls === "text-justify") return `.${cls} { text-align: justify; }`;
2641
+ if (cls === "text-start") return `.${cls} { text-align: start; }`;
2642
+ if (cls === "text-end") return `.${cls} { text-align: end; }`;
2643
+ if (cls === "uppercase") return `.${cls} { text-transform: uppercase; }`;
2644
+ if (cls === "lowercase") return `.${cls} { text-transform: lowercase; }`;
2645
+ if (cls === "capitalize") return `.${cls} { text-transform: capitalize; }`;
2646
+ if (cls === "normal-case") return `.${cls} { text-transform: none; }`;
2647
+ if (cls === "underline") return `.${cls} { text-decoration-line: underline; }`;
2648
+ if (cls === "overline") return `.${cls} { text-decoration-line: overline; }`;
2649
+ if (cls === "line-through") return `.${cls} { text-decoration-line: line-through; }`;
2650
+ if (cls === "no-underline") return `.${cls} { text-decoration-line: none; }`;
2651
+ if (cls === "truncate") return `.${cls} { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }`;
2652
+ if (cls === "text-ellipsis") return `.${cls} { text-overflow: ellipsis; }`;
2653
+ if (cls === "text-clip") return `.${cls} { text-overflow: clip; }`;
2654
+ if (cls === "whitespace-normal") return `.${cls} { white-space: normal; }`;
2655
+ if (cls === "whitespace-nowrap") return `.${cls} { white-space: nowrap; }`;
2656
+ if (cls === "whitespace-pre") return `.${cls} { white-space: pre; }`;
2657
+ if (cls === "whitespace-pre-line") return `.${cls} { white-space: pre-line; }`;
2658
+ if (cls === "whitespace-pre-wrap") return `.${cls} { white-space: pre-wrap; }`;
2659
+ if (cls === "whitespace-break-spaces") return `.${cls} { white-space: break-spaces; }`;
2660
+ if (cls === "italic") return `.${cls} { font-style: italic; }`;
2661
+ if (cls === "not-italic") return `.${cls} { font-style: normal; }`;
2662
+ if (cls === "tabular-nums") return `.${cls} { font-variant-numeric: tabular-nums; }`;
2663
+ if (cls === "oldstyle-nums") return `.${cls} { font-variant-numeric: oldstyle-nums; }`;
2664
+ if (cls === "list-none") return `.${cls} { list-style-type: none; }`;
2665
+ if (cls === "list-disc") return `.${cls} { list-style-type: disc; }`;
2666
+ if (cls === "list-decimal") return `.${cls} { list-style-type: decimal; }`;
2667
+ if (cls === "break-normal") return `.${cls} { overflow-wrap: normal; word-break: normal; }`;
2668
+ if (cls === "break-words") return `.${cls} { overflow-wrap: break-word; }`;
2669
+ if (cls === "break-all") return `.${cls} { word-break: break-all; }`;
2670
+ if (cls === "break-keep") return `.${cls} { word-break: keep-all; }`;
2671
+ return null;
2672
+ }
2673
+
2674
+ // src/generator/layout.ts
2675
+ function generateLayout(classes, _config) {
2676
+ const rules = [];
2677
+ for (const cls of classes) {
2678
+ const generated = matchLayout(cls);
2679
+ if (generated) rules.push(generated);
2680
+ }
2681
+ return rules;
2682
+ }
2683
+ function matchLayout(cls) {
2684
+ const displayMap = {
2685
+ block: "display: block;",
2686
+ inline: "display: inline;",
2687
+ "inline-block": "display: inline-block;",
2688
+ flex: "display: flex;",
2689
+ "inline-flex": "display: inline-flex;",
2690
+ grid: "display: grid;",
2691
+ "inline-grid": "display: inline-grid;",
2692
+ table: "display: table;",
2693
+ hidden: "display: none;",
2694
+ contents: "display: contents;"
2695
+ };
2696
+ if (displayMap[cls]) return `.${cls} { ${displayMap[cls]} }`;
2697
+ const posMap = {
2698
+ static: "position: static;",
2699
+ relative: "position: relative;",
2700
+ absolute: "position: absolute;",
2701
+ fixed: "position: fixed;",
2702
+ sticky: "position: sticky;"
2703
+ };
2704
+ if (posMap[cls]) return `.${cls} { ${posMap[cls]} }`;
2705
+ if (cls === "flex-row") return `.${cls} { flex-direction: row; }`;
2706
+ if (cls === "flex-row-reverse") return `.${cls} { flex-direction: row-reverse; }`;
2707
+ if (cls === "flex-col") return `.${cls} { flex-direction: column; }`;
2708
+ if (cls === "flex-col-reverse") return `.${cls} { flex-direction: column-reverse; }`;
2709
+ if (cls === "flex-wrap") return `.${cls} { flex-wrap: wrap; }`;
2710
+ if (cls === "flex-nowrap") return `.${cls} { flex-wrap: nowrap; }`;
2711
+ if (cls === "flex-wrap-reverse") return `.${cls} { flex-wrap: wrap-reverse; }`;
2712
+ if (cls === "flex-1") return `.${cls} { flex: 1 1 0%; }`;
2713
+ if (cls === "flex-auto") return `.${cls} { flex: 1 1 auto; }`;
2714
+ if (cls === "flex-initial") return `.${cls} { flex: 0 1 auto; }`;
2715
+ if (cls === "flex-none") return `.${cls} { flex: none; }`;
2716
+ if (cls === "flex-grow") return `.${cls} { flex-grow: 1; }`;
2717
+ if (cls === "flex-grow-0") return `.${cls} { flex-grow: 0; }`;
2718
+ if (cls === "flex-shrink") return `.${cls} { flex-shrink: 1; }`;
2719
+ if (cls === "flex-shrink-0") return `.${cls} { flex-shrink: 0; }`;
2720
+ if (cls === "items-start") return `.${cls} { align-items: flex-start; }`;
2721
+ if (cls === "items-end") return `.${cls} { align-items: flex-end; }`;
2722
+ if (cls === "items-center") return `.${cls} { align-items: center; }`;
2723
+ if (cls === "items-baseline") return `.${cls} { align-items: baseline; }`;
2724
+ if (cls === "items-stretch") return `.${cls} { align-items: stretch; }`;
2725
+ if (cls === "self-auto") return `.${cls} { align-self: auto; }`;
2726
+ if (cls === "self-start") return `.${cls} { align-self: flex-start; }`;
2727
+ if (cls === "self-end") return `.${cls} { align-self: flex-end; }`;
2728
+ if (cls === "self-center") return `.${cls} { align-self: center; }`;
2729
+ if (cls === "self-stretch") return `.${cls} { align-self: stretch; }`;
2730
+ if (cls === "self-baseline") return `.${cls} { align-self: baseline; }`;
2731
+ if (cls === "justify-start") return `.${cls} { justify-content: flex-start; }`;
2732
+ if (cls === "justify-end") return `.${cls} { justify-content: flex-end; }`;
2733
+ if (cls === "justify-center") return `.${cls} { justify-content: center; }`;
2734
+ if (cls === "justify-between") return `.${cls} { justify-content: space-between; }`;
2735
+ if (cls === "justify-around") return `.${cls} { justify-content: space-around; }`;
2736
+ if (cls === "justify-evenly") return `.${cls} { justify-content: space-evenly; }`;
2737
+ if (cls === "justify-stretch") return `.${cls} { justify-content: stretch; }`;
2738
+ if (cls === "justify-items-start") return `.${cls} { justify-items: start; }`;
2739
+ if (cls === "justify-items-end") return `.${cls} { justify-items: end; }`;
2740
+ if (cls === "justify-items-center") return `.${cls} { justify-items: center; }`;
2741
+ if (cls === "justify-items-stretch") return `.${cls} { justify-items: stretch; }`;
2742
+ if (cls === "justify-self-auto") return `.${cls} { justify-self: auto; }`;
2743
+ if (cls === "justify-self-start") return `.${cls} { justify-self: start; }`;
2744
+ if (cls === "justify-self-end") return `.${cls} { justify-self: end; }`;
2745
+ if (cls === "justify-self-center") return `.${cls} { justify-self: center; }`;
2746
+ if (cls === "justify-self-stretch") return `.${cls} { justify-self: stretch; }`;
2747
+ if (cls === "content-normal") return `.${cls} { align-content: normal; }`;
2748
+ if (cls === "content-center") return `.${cls} { align-content: center; }`;
2749
+ if (cls === "content-start") return `.${cls} { align-content: flex-start; }`;
2750
+ if (cls === "content-end") return `.${cls} { align-content: flex-end; }`;
2751
+ if (cls === "content-between") return `.${cls} { align-content: space-between; }`;
2752
+ if (cls === "content-around") return `.${cls} { align-content: space-around; }`;
2753
+ if (cls === "content-evenly") return `.${cls} { align-content: space-evenly; }`;
2754
+ if (cls === "content-stretch") return `.${cls} { align-content: stretch; }`;
2755
+ if (cls === "content-baseline") return `.${cls} { align-content: baseline; }`;
2756
+ const gridColsMatch = cls.match(/^grid-cols-(\d+)$/);
2757
+ if (gridColsMatch) {
2758
+ const n = parseInt(gridColsMatch[1]);
2759
+ return `.${cls} { grid-template-columns: repeat(${n}, minmax(0, 1fr)); }`;
2760
+ }
2761
+ if (cls === "grid-cols-none") return `.${cls} { grid-template-columns: none; }`;
2762
+ const gridRowsMatch = cls.match(/^grid-rows-(\d+)$/);
2763
+ if (gridRowsMatch) {
2764
+ const n = parseInt(gridRowsMatch[1]);
2765
+ return `.${cls} { grid-template-rows: repeat(${n}, minmax(0, 1fr)); }`;
2766
+ }
2767
+ if (cls === "grid-rows-none") return `.${cls} { grid-template-rows: none; }`;
2768
+ const colSpanMatch = cls.match(/^col-span-(\d+)$/);
2769
+ if (colSpanMatch) return `.${cls} { grid-column: span ${colSpanMatch[1]} / span ${colSpanMatch[1]}; }`;
2770
+ if (cls === "col-span-full") return `.${cls} { grid-column: 1 / -1; }`;
2771
+ if (cls === "col-auto") return `.${cls} { grid-column: auto; }`;
2772
+ const rowSpanMatch = cls.match(/^row-span-(\d+)$/);
2773
+ if (rowSpanMatch) return `.${cls} { grid-row: span ${rowSpanMatch[1]} / span ${rowSpanMatch[1]}; }`;
2774
+ if (cls === "row-span-full") return `.${cls} { grid-row: 1 / -1; }`;
2775
+ if (cls === "row-auto") return `.${cls} { grid-row: auto; }`;
2776
+ const colStartMatch = cls.match(/^col-start-(\d+)$/);
2777
+ if (colStartMatch) return `.${cls} { grid-column-start: ${colStartMatch[1]}; }`;
2778
+ const colEndMatch = cls.match(/^col-end-(\d+)$/);
2779
+ if (colEndMatch) return `.${cls} { grid-column-end: ${colEndMatch[1]}; }`;
2780
+ const rowStartMatch = cls.match(/^row-start-(\d+)$/);
2781
+ if (rowStartMatch) return `.${cls} { grid-row-start: ${rowStartMatch[1]}; }`;
2782
+ const rowEndMatch = cls.match(/^row-end-(\d+)$/);
2783
+ if (rowEndMatch) return `.${cls} { grid-row-end: ${rowEndMatch[1]}; }`;
2784
+ const orderMatch = cls.match(/^order-(-?\d+)$/);
2785
+ if (orderMatch) return `.${cls} { order: ${orderMatch[1]}; }`;
2786
+ if (cls === "order-first") return `.${cls} { order: -9999; }`;
2787
+ if (cls === "order-last") return `.${cls} { order: 9999; }`;
2788
+ if (cls === "order-none") return `.${cls} { order: 0; }`;
2789
+ if (cls === "float-right") return `.${cls} { float: right; }`;
2790
+ if (cls === "float-left") return `.${cls} { float: left; }`;
2791
+ if (cls === "float-none") return `.${cls} { float: none; }`;
2792
+ if (cls === "clearfix") return `.${cls}::after { content: ""; display: table; clear: both; }`;
2793
+ if (cls === "overflow-auto") return `.${cls} { overflow: auto; }`;
2794
+ if (cls === "overflow-hidden") return `.${cls} { overflow: hidden; }`;
2795
+ if (cls === "overflow-clip") return `.${cls} { overflow: clip; }`;
2796
+ if (cls === "overflow-visible") return `.${cls} { overflow: visible; }`;
2797
+ if (cls === "overflow-scroll") return `.${cls} { overflow: scroll; }`;
2798
+ if (cls === "overflow-x-auto") return `.${cls} { overflow-x: auto; }`;
2799
+ if (cls === "overflow-x-hidden") return `.${cls} { overflow-x: hidden; }`;
2800
+ if (cls === "overflow-x-scroll") return `.${cls} { overflow-x: scroll; }`;
2801
+ if (cls === "overflow-y-auto") return `.${cls} { overflow-y: auto; }`;
2802
+ if (cls === "overflow-y-hidden") return `.${cls} { overflow-y: hidden; }`;
2803
+ if (cls === "overflow-y-scroll") return `.${cls} { overflow-y: scroll; }`;
2804
+ if (cls === "visible") return `.${cls} { visibility: visible; }`;
2805
+ if (cls === "invisible") return `.${cls} { visibility: hidden; }`;
2806
+ if (cls === "collapse") return `.${cls} { visibility: collapse; }`;
2807
+ if (cls === "pointer-events-none") return `.${cls} { pointer-events: none; }`;
2808
+ if (cls === "pointer-events-auto") return `.${cls} { pointer-events: auto; }`;
2809
+ const cursorMap = {
2810
+ "cursor-auto": "auto",
2811
+ "cursor-default": "default",
2812
+ "cursor-pointer": "pointer",
2813
+ "cursor-wait": "wait",
2814
+ "cursor-text": "text",
2815
+ "cursor-move": "move",
2816
+ "cursor-not-allowed": "not-allowed",
2817
+ "cursor-grab": "grab",
2818
+ "cursor-grabbing": "grabbing",
2819
+ "cursor-crosshair": "crosshair",
2820
+ "cursor-help": "help",
2821
+ "cursor-none": "none",
2822
+ "cursor-zoom-in": "zoom-in",
2823
+ "cursor-zoom-out": "zoom-out"
2824
+ };
2825
+ if (cursorMap[cls]) return `.${cls} { cursor: ${cursorMap[cls]}; }`;
2826
+ if (cls === "select-none") return `.${cls} { user-select: none; }`;
2827
+ if (cls === "select-text") return `.${cls} { user-select: text; }`;
2828
+ if (cls === "select-all") return `.${cls} { user-select: all; }`;
2829
+ if (cls === "select-auto") return `.${cls} { user-select: auto; }`;
2830
+ if (cls === "object-contain") return `.${cls} { object-fit: contain; }`;
2831
+ if (cls === "object-cover") return `.${cls} { object-fit: cover; }`;
2832
+ if (cls === "object-fill") return `.${cls} { object-fit: fill; }`;
2833
+ if (cls === "object-none") return `.${cls} { object-fit: none; }`;
2834
+ if (cls === "object-scale-down") return `.${cls} { object-fit: scale-down; }`;
2835
+ if (cls === "aspect-auto") return `.${cls} { aspect-ratio: auto; }`;
2836
+ if (cls === "aspect-square") return `.${cls} { aspect-ratio: 1 / 1; }`;
2837
+ if (cls === "aspect-video") return `.${cls} { aspect-ratio: 16 / 9; }`;
2838
+ if (cls === "container") {
2839
+ return `.${cls} {
2840
+ width: 100%;
2841
+ margin-left: auto;
2842
+ margin-right: auto;
2843
+ }`;
2844
+ }
2845
+ if (cls === "box-border") return `.${cls} { box-sizing: border-box; }`;
2846
+ if (cls === "box-content") return `.${cls} { box-sizing: content-box; }`;
2847
+ if (cls === "isolate") return `.${cls} { isolation: isolate; }`;
2848
+ if (cls === "isolation-auto") return `.${cls} { isolation: auto; }`;
2849
+ const mixBlendMap = {
2850
+ "mix-blend-normal": "normal",
2851
+ "mix-blend-multiply": "multiply",
2852
+ "mix-blend-screen": "screen",
2853
+ "mix-blend-overlay": "overlay",
2854
+ "mix-blend-darken": "darken",
2855
+ "mix-blend-lighten": "lighten",
2856
+ "mix-blend-color-dodge": "color-dodge",
2857
+ "mix-blend-color-burn": "color-burn",
2858
+ "mix-blend-hard-light": "hard-light",
2859
+ "mix-blend-soft-light": "soft-light",
2860
+ "mix-blend-difference": "difference",
2861
+ "mix-blend-exclusion": "exclusion"
2862
+ };
2863
+ if (mixBlendMap[cls]) return `.${cls} { mix-blend-mode: ${mixBlendMap[cls]}; }`;
2864
+ if (cls === "bg-auto") return `.${cls} { background-size: auto; }`;
2865
+ if (cls === "bg-cover") return `.${cls} { background-size: cover; }`;
2866
+ if (cls === "bg-contain") return `.${cls} { background-size: contain; }`;
2867
+ if (cls === "bg-center") return `.${cls} { background-position: center; }`;
2868
+ if (cls === "bg-top") return `.${cls} { background-position: top; }`;
2869
+ if (cls === "bg-bottom") return `.${cls} { background-position: bottom; }`;
2870
+ if (cls === "bg-left") return `.${cls} { background-position: left; }`;
2871
+ if (cls === "bg-right") return `.${cls} { background-position: right; }`;
2872
+ if (cls === "bg-left-top") return `.${cls} { background-position: left top; }`;
2873
+ if (cls === "bg-left-bottom") return `.${cls} { background-position: left bottom; }`;
2874
+ if (cls === "bg-right-top") return `.${cls} { background-position: right top; }`;
2875
+ if (cls === "bg-right-bottom") return `.${cls} { background-position: right bottom; }`;
2876
+ if (cls === "bg-repeat") return `.${cls} { background-repeat: repeat; }`;
2877
+ if (cls === "bg-no-repeat") return `.${cls} { background-repeat: no-repeat; }`;
2878
+ if (cls === "bg-repeat-x") return `.${cls} { background-repeat: repeat-x; }`;
2879
+ if (cls === "bg-repeat-y") return `.${cls} { background-repeat: repeat-y; }`;
2880
+ if (cls === "bg-repeat-round") return `.${cls} { background-repeat: round; }`;
2881
+ if (cls === "bg-repeat-space") return `.${cls} { background-repeat: space; }`;
2882
+ if (cls === "bg-fixed") return `.${cls} { background-attachment: fixed; }`;
2883
+ if (cls === "bg-local") return `.${cls} { background-attachment: local; }`;
2884
+ if (cls === "bg-scroll") return `.${cls} { background-attachment: scroll; }`;
2885
+ if (cls === "bg-origin-border") return `.${cls} { background-origin: border-box; }`;
2886
+ if (cls === "bg-origin-padding") return `.${cls} { background-origin: padding-box; }`;
2887
+ if (cls === "bg-origin-content") return `.${cls} { background-origin: content-box; }`;
2888
+ if (cls === "bg-clip-border") return `.${cls} { background-clip: border-box; }`;
2889
+ if (cls === "bg-clip-padding") return `.${cls} { background-clip: padding-box; }`;
2890
+ if (cls === "bg-clip-content") return `.${cls} { background-clip: content-box; }`;
2891
+ if (cls === "bg-clip-text") return `.${cls} { background-clip: text; -webkit-background-clip: text; }`;
2892
+ return null;
2893
+ }
2894
+
2895
+ // src/generator/sizing.ts
2896
+ function has2(obj, key) {
2897
+ return typeof obj[key] === "string";
2898
+ }
2899
+ function generateSizing(classes, config) {
2900
+ const { spacing } = config.theme;
2901
+ const rules = [];
2902
+ for (const cls of classes) {
2903
+ const generated = matchSizing(cls, spacing);
2904
+ if (generated) rules.push(generated);
2905
+ }
2906
+ return rules;
2907
+ }
2908
+ function matchSizing(cls, spacing) {
2909
+ const fractions = {
2910
+ "1/2": "50%",
2911
+ "1/3": "33.333333%",
2912
+ "2/3": "66.666667%",
2913
+ "1/4": "25%",
2914
+ "2/4": "50%",
2915
+ "3/4": "75%",
2916
+ "1/5": "20%",
2917
+ "2/5": "40%",
2918
+ "3/5": "60%",
2919
+ "4/5": "80%",
2920
+ "1/6": "16.666667%",
2921
+ "2/6": "33.333333%",
2922
+ "3/6": "50%",
2923
+ "4/6": "66.666667%",
2924
+ "5/6": "83.333333%",
2925
+ "1/12": "8.333333%",
2926
+ "2/12": "16.666667%",
2927
+ "3/12": "25%",
2928
+ "4/12": "33.333333%",
2929
+ "5/12": "41.666667%",
2930
+ "6/12": "50%",
2931
+ "7/12": "58.333333%",
2932
+ "8/12": "66.666667%",
2933
+ "9/12": "75%",
2934
+ "10/12": "83.333333%",
2935
+ "11/12": "91.666667%"
2936
+ };
2937
+ const wMatch = cls.match(/^w-(.+)$/);
2938
+ if (wMatch) {
2939
+ const key = wMatch[1];
2940
+ if (key === "auto") return `.${cls} { width: auto; }`;
2941
+ if (key === "full") return `.${cls} { width: 100%; }`;
2942
+ if (key === "screen") return `.${cls} { width: 100vw; }`;
2943
+ if (key === "svw") return `.${cls} { width: 100svw; }`;
2944
+ if (key === "min") return `.${cls} { width: min-content; }`;
2945
+ if (key === "max") return `.${cls} { width: max-content; }`;
2946
+ if (key === "fit") return `.${cls} { width: fit-content; }`;
2947
+ if (has2(fractions, key)) return `.${cls} { width: ${fractions[key]}; }`;
2948
+ if (has2(spacing, key)) return `.${cls} { width: ${spacing[key]}; }`;
2949
+ }
2950
+ const minWMatch = cls.match(/^min-w-(.+)$/);
2951
+ if (minWMatch) {
2952
+ const key = minWMatch[1];
2953
+ if (key === "0") return `.${cls} { min-width: 0px; }`;
2954
+ if (key === "full") return `.${cls} { min-width: 100%; }`;
2955
+ if (key === "min") return `.${cls} { min-width: min-content; }`;
2956
+ if (key === "max") return `.${cls} { min-width: max-content; }`;
2957
+ if (key === "fit") return `.${cls} { min-width: fit-content; }`;
2958
+ if (has2(spacing, key)) return `.${cls} { min-width: ${spacing[key]}; }`;
2959
+ }
2960
+ const maxWMap = {
2961
+ none: "none",
2962
+ xs: "20rem",
2963
+ sm: "24rem",
2964
+ md: "28rem",
2965
+ lg: "32rem",
2966
+ xl: "36rem",
2967
+ "2xl": "42rem",
2968
+ "3xl": "48rem",
2969
+ "4xl": "56rem",
2970
+ "5xl": "64rem",
2971
+ "6xl": "72rem",
2972
+ "7xl": "80rem",
2973
+ full: "100%",
2974
+ min: "min-content",
2975
+ max: "max-content",
2976
+ fit: "fit-content",
2977
+ prose: "65ch",
2978
+ "screen-sm": "640px",
2979
+ "screen-md": "768px",
2980
+ "screen-lg": "1024px",
2981
+ "screen-xl": "1280px",
2982
+ "screen-2xl": "1536px"
2983
+ };
2984
+ const maxWMatch = cls.match(/^max-w-(.+)$/);
2985
+ if (maxWMatch && has2(maxWMap, maxWMatch[1])) {
2986
+ return `.${cls} { max-width: ${maxWMap[maxWMatch[1]]}; }`;
2987
+ }
2988
+ const hMatch = cls.match(/^h-(.+)$/);
2989
+ if (hMatch) {
2990
+ const key = hMatch[1];
2991
+ if (key === "auto") return `.${cls} { height: auto; }`;
2992
+ if (key === "full") return `.${cls} { height: 100%; }`;
2993
+ if (key === "screen") return `.${cls} { height: 100vh; }`;
2994
+ if (key === "svh") return `.${cls} { height: 100svh; }`;
2995
+ if (key === "dvh") return `.${cls} { height: 100dvh; }`;
2996
+ if (key === "min") return `.${cls} { height: min-content; }`;
2997
+ if (key === "max") return `.${cls} { height: max-content; }`;
2998
+ if (key === "fit") return `.${cls} { height: fit-content; }`;
2999
+ if (has2(fractions, key)) return `.${cls} { height: ${fractions[key]}; }`;
3000
+ if (has2(spacing, key)) return `.${cls} { height: ${spacing[key]}; }`;
3001
+ }
3002
+ const minHMatch = cls.match(/^min-h-(.+)$/);
3003
+ if (minHMatch) {
3004
+ const key = minHMatch[1];
3005
+ if (key === "0") return `.${cls} { min-height: 0px; }`;
3006
+ if (key === "full") return `.${cls} { min-height: 100%; }`;
3007
+ if (key === "screen") return `.${cls} { min-height: 100vh; }`;
3008
+ if (key === "svh") return `.${cls} { min-height: 100svh; }`;
3009
+ if (key === "dvh") return `.${cls} { min-height: 100dvh; }`;
3010
+ if (key === "fit") return `.${cls} { min-height: fit-content; }`;
3011
+ if (has2(spacing, key)) return `.${cls} { min-height: ${spacing[key]}; }`;
3012
+ }
3013
+ const maxHMatch = cls.match(/^max-h-(.+)$/);
3014
+ if (maxHMatch) {
3015
+ const key = maxHMatch[1];
3016
+ if (key === "none") return `.${cls} { max-height: none; }`;
3017
+ if (key === "full") return `.${cls} { max-height: 100%; }`;
3018
+ if (key === "screen") return `.${cls} { max-height: 100vh; }`;
3019
+ if (key === "svh") return `.${cls} { max-height: 100svh; }`;
3020
+ if (key === "dvh") return `.${cls} { max-height: 100dvh; }`;
3021
+ if (key === "fit") return `.${cls} { max-height: fit-content; }`;
3022
+ if (has2(spacing, key)) return `.${cls} { max-height: ${spacing[key]}; }`;
3023
+ }
3024
+ return null;
3025
+ }
3026
+
3027
+ // src/generator/effects.ts
3028
+ function has3(obj, key) {
3029
+ return typeof obj[key] === "string";
3030
+ }
3031
+ function generateEffects(classes, config) {
3032
+ const { opacity, zIndex, boxShadow, borderRadius } = config.theme;
3033
+ const rules = [];
3034
+ for (const cls of classes) {
3035
+ const generated = matchEffects(cls, opacity, zIndex, boxShadow, borderRadius);
3036
+ if (generated) rules.push(generated);
3037
+ }
3038
+ return rules;
3039
+ }
3040
+ function matchEffects(cls, opacity, zIndex, boxShadow, borderRadius) {
3041
+ const opacityMatch = cls.match(/^opacity-(.+)$/);
3042
+ if (opacityMatch && has3(opacity, opacityMatch[1])) {
3043
+ return `.${cls} {
3044
+ opacity: ${opacity[opacityMatch[1]]};
3045
+ transition-property: opacity;
3046
+ transition-duration: var(--alive-duration, 0ms);
3047
+ transition-timing-function: var(--alive-ease, linear);
3048
+ }`;
3049
+ }
3050
+ const zMatch = cls.match(/^z-(.+)$/);
3051
+ if (zMatch && has3(zIndex, zMatch[1])) {
3052
+ return `.${cls} { z-index: ${zIndex[zMatch[1]]}; }`;
3053
+ }
3054
+ const shadowMatch = cls.match(/^shadow(?:-(.+))?$/);
3055
+ if (shadowMatch) {
3056
+ const key = shadowMatch[1] ?? "DEFAULT";
3057
+ if (has3(boxShadow, key)) {
3058
+ return `.${cls} { box-shadow: ${boxShadow[key]}; }`;
3059
+ }
3060
+ if (!shadowMatch[1] && has3(boxShadow, "DEFAULT")) {
3061
+ return `.${cls} { box-shadow: ${boxShadow["DEFAULT"]}; }`;
3062
+ }
3063
+ }
3064
+ const roundedMatch = cls.match(/^rounded(?:-(.+))?$/);
3065
+ if (roundedMatch) {
3066
+ const key = roundedMatch[1] ?? "DEFAULT";
3067
+ if (has3(borderRadius, key)) return `.${cls} { border-radius: ${borderRadius[key]}; }`;
3068
+ if (!roundedMatch[1] && has3(borderRadius, "DEFAULT")) return `.${cls} { border-radius: ${borderRadius["DEFAULT"]}; }`;
3069
+ }
3070
+ const roundedTMatch = cls.match(/^rounded-t(?:-(.+))?$/);
3071
+ if (roundedTMatch) {
3072
+ const rkey = roundedTMatch[1] ?? "DEFAULT";
3073
+ const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
3074
+ if (val) return `.${cls} { border-top-left-radius: ${val}; border-top-right-radius: ${val}; }`;
3075
+ }
3076
+ const roundedBMatch = cls.match(/^rounded-b(?:-(.+))?$/);
3077
+ if (roundedBMatch) {
3078
+ const rkey = roundedBMatch[1] ?? "DEFAULT";
3079
+ const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
3080
+ if (val) return `.${cls} { border-bottom-left-radius: ${val}; border-bottom-right-radius: ${val}; }`;
3081
+ }
3082
+ const roundedLMatch = cls.match(/^rounded-l(?:-(.+))?$/);
3083
+ if (roundedLMatch) {
3084
+ const rkey = roundedLMatch[1] ?? "DEFAULT";
3085
+ const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
3086
+ if (val) return `.${cls} { border-top-left-radius: ${val}; border-bottom-left-radius: ${val}; }`;
3087
+ }
3088
+ const roundedRMatch = cls.match(/^rounded-r(?:-(.+))?$/);
3089
+ if (roundedRMatch) {
3090
+ const rkey = roundedRMatch[1] ?? "DEFAULT";
3091
+ const val = has3(borderRadius, rkey) ? borderRadius[rkey] : has3(borderRadius, "DEFAULT") ? borderRadius["DEFAULT"] : null;
3092
+ if (val) return `.${cls} { border-top-right-radius: ${val}; border-bottom-right-radius: ${val}; }`;
3093
+ }
3094
+ if (cls === "border") return `.${cls} { border-width: 1px; border-style: solid; }`;
3095
+ if (cls === "border-0") return `.${cls} { border-width: 0px; }`;
3096
+ if (cls === "border-2") return `.${cls} { border-width: 2px; border-style: solid; }`;
3097
+ if (cls === "border-4") return `.${cls} { border-width: 4px; border-style: solid; }`;
3098
+ if (cls === "border-8") return `.${cls} { border-width: 8px; border-style: solid; }`;
3099
+ if (cls === "border-t") return `.${cls} { border-top-width: 1px; border-top-style: solid; }`;
3100
+ if (cls === "border-r") return `.${cls} { border-right-width: 1px; border-right-style: solid; }`;
3101
+ if (cls === "border-b") return `.${cls} { border-bottom-width: 1px; border-bottom-style: solid; }`;
3102
+ if (cls === "border-l") return `.${cls} { border-left-width: 1px; border-left-style: solid; }`;
3103
+ if (cls === "border-t-0") return `.${cls} { border-top-width: 0px; }`;
3104
+ if (cls === "border-r-0") return `.${cls} { border-right-width: 0px; }`;
3105
+ if (cls === "border-b-0") return `.${cls} { border-bottom-width: 0px; }`;
3106
+ if (cls === "border-l-0") return `.${cls} { border-left-width: 0px; }`;
3107
+ if (cls === "border-solid") return `.${cls} { border-style: solid; }`;
3108
+ if (cls === "border-dashed") return `.${cls} { border-style: dashed; }`;
3109
+ if (cls === "border-dotted") return `.${cls} { border-style: dotted; }`;
3110
+ if (cls === "border-double") return `.${cls} { border-style: double; }`;
3111
+ if (cls === "border-hidden") return `.${cls} { border-style: hidden; }`;
3112
+ if (cls === "border-none") return `.${cls} { border-style: none; }`;
3113
+ if (cls === "outline-none") return `.${cls} { outline: 2px solid transparent; outline-offset: 2px; }`;
3114
+ if (cls === "outline") return `.${cls} { outline-style: solid; }`;
3115
+ if (cls === "outline-dashed") return `.${cls} { outline-style: dashed; }`;
3116
+ if (cls === "outline-dotted") return `.${cls} { outline-style: dotted; }`;
3117
+ if (cls === "outline-double") return `.${cls} { outline-style: double; }`;
3118
+ const outlineWidthMatch = cls.match(/^outline-(\d+)$/);
3119
+ if (outlineWidthMatch) return `.${cls} { outline-width: ${outlineWidthMatch[1]}px; }`;
3120
+ const outlineOffsetMatch = cls.match(/^outline-offset-(\d+)$/);
3121
+ if (outlineOffsetMatch) return `.${cls} { outline-offset: ${outlineOffsetMatch[1]}px; }`;
3122
+ const ringMatch = cls.match(/^ring(?:-(\d+))?$/);
3123
+ if (ringMatch) {
3124
+ const width = ringMatch[1] ?? "3";
3125
+ return `.${cls} { box-shadow: 0 0 0 ${width}px var(--alive-ring-color, rgba(59, 130, 246, 0.5)); }`;
3126
+ }
3127
+ if (cls === "ring-inset") return `.${cls} { --alive-ring-inset: inset; }`;
3128
+ const ringOffsetMatch = cls.match(/^ring-offset-(\d+)$/);
3129
+ if (ringOffsetMatch) return `.${cls} { --alive-ring-offset: ${ringOffsetMatch[1]}px; }`;
3130
+ if (cls === "transform") return `.${cls} { transform: translateX(var(--alive-tx,0)) translateY(var(--alive-ty,0)) rotate(var(--alive-rotate,0)) scaleX(var(--alive-sx,1)) scaleY(var(--alive-sy,1)) skewX(var(--alive-skew-x,0)) skewY(var(--alive-skew-y,0)); }`;
3131
+ if (cls === "transform-none") return `.${cls} { transform: none; }`;
3132
+ const scaleMap = {
3133
+ "0": "0",
3134
+ "50": ".5",
3135
+ "75": ".75",
3136
+ "90": ".9",
3137
+ "95": ".95",
3138
+ "100": "1",
3139
+ "105": "1.05",
3140
+ "110": "1.1",
3141
+ "125": "1.25",
3142
+ "150": "1.5"
3143
+ };
3144
+ const scaleMatch = cls.match(/^scale-(\d+)$/);
3145
+ if (scaleMatch && has3(scaleMap, scaleMatch[1])) {
3146
+ return `.${cls} { transform: scale(${scaleMap[scaleMatch[1]]}); }`;
3147
+ }
3148
+ const scaleXMatch = cls.match(/^scale-x-(\d+)$/);
3149
+ if (scaleXMatch && has3(scaleMap, scaleXMatch[1])) {
3150
+ return `.${cls} { transform: scaleX(${scaleMap[scaleXMatch[1]]}); }`;
3151
+ }
3152
+ const scaleYMatch = cls.match(/^scale-y-(\d+)$/);
3153
+ if (scaleYMatch && has3(scaleMap, scaleYMatch[1])) {
3154
+ return `.${cls} { transform: scaleY(${scaleMap[scaleYMatch[1]]}); }`;
3155
+ }
3156
+ const rotateMatch = cls.match(/^-?rotate-(\d+)$/);
3157
+ if (rotateMatch) {
3158
+ const neg = cls.startsWith("-") ? "-" : "";
3159
+ return `.${cls.replace(/^-/, "\\-")} { transform: rotate(${neg}${rotateMatch[1]}deg); }`;
3160
+ }
3161
+ const translateXMatch = cls.match(/^-?translate-x-(.+)$/);
3162
+ if (translateXMatch) {
3163
+ const neg = cls.startsWith("-") ? "-" : "";
3164
+ const key = translateXMatch[1];
3165
+ const fractions = { "1/2": "50%", "full": "100%" };
3166
+ const val = fractions[key] ?? null;
3167
+ if (val) return `.${cls.replace(/^-/, "\\-")} { transform: translateX(${neg}${val}); }`;
3168
+ }
3169
+ const translateYMatch = cls.match(/^-?translate-y-(.+)$/);
3170
+ if (translateYMatch) {
3171
+ const neg = cls.startsWith("-") ? "-" : "";
3172
+ const key = translateYMatch[1];
3173
+ const fractions = { "1/2": "50%", "full": "100%" };
3174
+ const val = fractions[key] ?? null;
3175
+ if (val) return `.${cls.replace(/^-/, "\\-")} { transform: translateY(${neg}${val}); }`;
3176
+ }
3177
+ if (cls === "transition-none") return `.${cls} { transition: none; }`;
3178
+ if (cls === "transition-all") return `.${cls} { transition: all var(--alive-duration-normal) var(--alive-ease-standard); }`;
3179
+ if (cls === "transition-colors") return `.${cls} { transition: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: var(--alive-duration-normal); transition-timing-function: var(--alive-ease-standard); }`;
3180
+ if (cls === "transition-opacity") return `.${cls} { transition: opacity; transition-duration: var(--alive-duration-normal); transition-timing-function: var(--alive-ease-standard); }`;
3181
+ if (cls === "transition-shadow") return `.${cls} { transition: box-shadow; transition-duration: var(--alive-duration-normal); transition-timing-function: var(--alive-ease-standard); }`;
3182
+ if (cls === "transition-transform") return `.${cls} { transition: transform; transition-duration: var(--alive-duration-normal); transition-timing-function: var(--alive-ease-standard); }`;
3183
+ const blurMatch = cls.match(/^blur(?:-(.+))?$/);
3184
+ if (blurMatch) {
3185
+ const blurMap = {
3186
+ none: "0",
3187
+ sm: "4px",
3188
+ DEFAULT: "8px",
3189
+ md: "12px",
3190
+ lg: "16px",
3191
+ xl: "24px",
3192
+ "2xl": "40px",
3193
+ "3xl": "64px"
3194
+ };
3195
+ const key = blurMatch[1] ?? "DEFAULT";
3196
+ if (has3(blurMap, key)) return `.${cls} { filter: blur(${blurMap[key]}); }`;
3197
+ }
3198
+ const backdropBlurMatch = cls.match(/^backdrop-blur(?:-(.+))?$/);
3199
+ if (backdropBlurMatch) {
3200
+ const blurMap = {
3201
+ none: "0",
3202
+ sm: "4px",
3203
+ DEFAULT: "8px",
3204
+ md: "12px",
3205
+ lg: "16px",
3206
+ xl: "24px",
3207
+ "2xl": "40px",
3208
+ "3xl": "64px"
3209
+ };
3210
+ const key = backdropBlurMatch[1] ?? "DEFAULT";
3211
+ if (has3(blurMap, key)) return `.${cls} { backdrop-filter: blur(${blurMap[key]}); }`;
3212
+ }
3213
+ const arbOpacityMatch = cls.match(/^opacity-\[(.+)\]$/);
3214
+ if (arbOpacityMatch) {
3215
+ const escaped = escapeSelector(cls);
3216
+ return `.${escaped} {
3217
+ opacity: ${arbOpacityMatch[1]};
3218
+ transition-property: opacity;
3219
+ transition-duration: var(--alive-duration, 0ms);
3220
+ transition-timing-function: var(--alive-ease, linear);
3221
+ }`;
3222
+ }
3223
+ const arbZMatch = cls.match(/^z-\[(.+)\]$/);
3224
+ if (arbZMatch) {
3225
+ return `.${escapeSelector(cls)} { z-index: ${arbZMatch[1]}; }`;
3226
+ }
3227
+ const arbRoundedMatch = cls.match(/^rounded-\[(.+)\]$/);
3228
+ if (arbRoundedMatch) {
3229
+ return `.${escapeSelector(cls)} { border-radius: ${arbRoundedMatch[1]}; }`;
3230
+ }
3231
+ const arbBorderMatch = cls.match(/^border-\[(.+)\]$/);
3232
+ if (arbBorderMatch) {
3233
+ return `.${escapeSelector(cls)} { border-width: ${arbBorderMatch[1]}; border-style: solid; }`;
3234
+ }
3235
+ const arbShadowMatch = cls.match(/^shadow-\[(.+)\]$/);
3236
+ if (arbShadowMatch) {
3237
+ return `.${escapeSelector(cls)} { box-shadow: ${arbShadowMatch[1]}; }`;
3238
+ }
3239
+ const arbBlurMatch = cls.match(/^blur-\[(.+)\]$/);
3240
+ if (arbBlurMatch) {
3241
+ return `.${escapeSelector(cls)} { filter: blur(${arbBlurMatch[1]}); }`;
3242
+ }
3243
+ const arbScaleMatch = cls.match(/^scale-\[(.+)\]$/);
3244
+ if (arbScaleMatch) {
3245
+ return `.${escapeSelector(cls)} { transform: scale(${arbScaleMatch[1]}); }`;
3246
+ }
3247
+ const arbRotateMatch = cls.match(/^rotate-\[(.+)\]$/);
3248
+ if (arbRotateMatch) {
3249
+ return `.${escapeSelector(cls)} { transform: rotate(${arbRotateMatch[1]}); }`;
3250
+ }
3251
+ const arbTranslateXMatch = cls.match(/^translate-x-\[(.+)\]$/);
3252
+ if (arbTranslateXMatch) {
3253
+ return `.${escapeSelector(cls)} { transform: translateX(${arbTranslateXMatch[1]}); }`;
3254
+ }
3255
+ const arbTranslateYMatch = cls.match(/^translate-y-\[(.+)\]$/);
3256
+ if (arbTranslateYMatch) {
3257
+ return `.${escapeSelector(cls)} { transform: translateY(${arbTranslateYMatch[1]}); }`;
3258
+ }
3259
+ return null;
3260
+ }
3261
+
3262
+ // src/generator/index.ts
3263
+ function generateUtilities(classes, config) {
3264
+ const variantMap = /* @__PURE__ */ new Map();
3265
+ const baseClasses = /* @__PURE__ */ new Set();
3266
+ for (const cls of classes) {
3267
+ const { variants, base } = parseVariants(cls);
3268
+ baseClasses.add(base);
3269
+ variantMap.set(cls, { base, variants, original: cls });
3270
+ }
3271
+ const generators = [
3272
+ generateColors,
3273
+ generateSpacing,
3274
+ generateTypography,
3275
+ generateLayout,
3276
+ generateSizing,
3277
+ generateEffects,
3278
+ generateAliveSpecific
3279
+ ];
3280
+ const baseRuleMap = /* @__PURE__ */ new Map();
3281
+ for (const gen of generators) {
3282
+ const rules = gen(baseClasses, config);
3283
+ for (const r of rules) {
3284
+ const selectorMatch = r.match(/^\.((?:\\.|[^ {>+~:])*)/);
3285
+ if (selectorMatch && selectorMatch[1]) {
3286
+ const key = selectorMatch[1].replace(/\\(.)/g, "$1");
3287
+ baseRuleMap.set(key, r);
3288
+ }
3289
+ }
3290
+ }
3291
+ const baseOutput = [];
3292
+ const mediaOutput = /* @__PURE__ */ new Map();
3293
+ for (const [original, { base, variants }] of variantMap) {
3294
+ const baseRule = baseRuleMap.get(base);
3295
+ if (!baseRule) continue;
3296
+ if (variants.length === 0) {
3297
+ baseOutput.push(baseRule);
3298
+ continue;
3299
+ }
3300
+ const responsiveVariants = variants.filter((v) => config.theme.screens[v]);
3301
+ const stateVariants = variants.filter((v) => !config.theme.screens[v]);
3302
+ const declMatch = baseRule.match(/\{([\s\S]*)\}/);
3303
+ if (!declMatch) continue;
3304
+ let selector = `.${escapeSelector(original)}`;
3305
+ for (const sv of stateVariants) {
3306
+ switch (sv) {
3307
+ case "hover":
3308
+ selector += ":hover";
3309
+ break;
3310
+ case "focus":
3311
+ selector += ":focus";
3312
+ break;
3313
+ case "focus-visible":
3314
+ selector += ":focus-visible";
3315
+ break;
3316
+ case "active":
3317
+ selector += ":active";
3318
+ break;
3319
+ case "disabled":
3320
+ selector += ":disabled";
3321
+ break;
3322
+ case "visited":
3323
+ selector += ":visited";
3324
+ break;
3325
+ case "first":
3326
+ selector += ":first-child";
3327
+ break;
3328
+ case "last":
3329
+ selector += ":last-child";
3330
+ break;
3331
+ case "odd":
3332
+ selector += ":nth-child(odd)";
3333
+ break;
3334
+ case "even":
3335
+ selector += ":nth-child(even)";
3336
+ break;
3337
+ case "placeholder":
3338
+ selector += "::placeholder";
3339
+ break;
3340
+ case "group-hover":
3341
+ selector = `.group:hover ${selector}`;
3342
+ break;
3343
+ case "dark":
3344
+ if (config.theme.darkMode === "class") {
3345
+ selector = `.dark ${selector}`;
3346
+ }
3347
+ break;
3348
+ }
3349
+ }
3350
+ const wrappedRule = `${selector} {${declMatch[1]}}`;
3351
+ if (responsiveVariants.length === 0) {
3352
+ if (stateVariants.includes("dark") && config.theme.darkMode === "media") {
3353
+ const mq = "@media (prefers-color-scheme: dark)";
3354
+ const existing = mediaOutput.get(mq) ?? [];
3355
+ mediaOutput.set(mq, [...existing, wrappedRule]);
3356
+ } else {
3357
+ baseOutput.push(wrappedRule);
3358
+ }
3359
+ } else {
3360
+ const screen = config.theme.screens[responsiveVariants[0]];
3361
+ const mq = `@media (min-width: ${screen})`;
3362
+ const existing = mediaOutput.get(mq) ?? [];
3363
+ mediaOutput.set(mq, [...existing, wrappedRule]);
3364
+ }
3365
+ }
3366
+ const sortedMedia = [...mediaOutput.entries()].sort((a, b) => {
3367
+ const aSize = parseInt(a[0].match(/\d+/)?.[0] ?? "0");
3368
+ const bSize = parseInt(b[0].match(/\d+/)?.[0] ?? "0");
3369
+ return aSize - bSize;
3370
+ });
3371
+ const mediaCSS = sortedMedia.map(([mq, rules]) => `${mq} {
3372
+ ${rules.map((r) => " " + r.split("\n").join("\n ")).join("\n")}
3373
+ }`).join("\n\n");
3374
+ const parts = [
3375
+ "/* AliveUI Utilities */",
3376
+ ...dedupe(baseOutput),
3377
+ mediaCSS
3378
+ ].filter(Boolean);
3379
+ return parts.join("\n\n");
3380
+ }
3381
+ function dedupe(rules) {
3382
+ const seen = /* @__PURE__ */ new Set();
3383
+ return rules.filter((r) => {
3384
+ if (seen.has(r)) return false;
3385
+ seen.add(r);
3386
+ return true;
3387
+ });
3388
+ }
3389
+ function generateAliveSpecific(classes, _config) {
3390
+ const rules = [];
3391
+ for (const cls of classes) {
3392
+ if (cls === "d1" || cls === "d2" || cls === "d3") continue;
3393
+ const aliveBasePrefixes = [
3394
+ "alive-enter",
3395
+ "alive-exit",
3396
+ "alive-loop",
3397
+ "alive-card",
3398
+ "alive-button",
3399
+ "alive-badge",
3400
+ "alive-input",
3401
+ "alive-textarea",
3402
+ "alive-select",
3403
+ "alive-checkbox",
3404
+ "alive-radio",
3405
+ "alive-switch",
3406
+ "alive-avatar",
3407
+ "alive-skeleton",
3408
+ "alive-progress",
3409
+ "alive-separator",
3410
+ "alive-alert",
3411
+ "alive-tooltip",
3412
+ "alive-modal",
3413
+ "alive-drawer",
3414
+ "alive-nav",
3415
+ "alive-tabs",
3416
+ "alive-tab",
3417
+ "alive-dropdown",
3418
+ "alive-table",
3419
+ "alive-chip",
3420
+ "alive-stack",
3421
+ "alive-container",
3422
+ "alive-cluster",
3423
+ "alive-focus",
3424
+ "alive-overlay",
3425
+ "alive-toast",
3426
+ "alive-command",
3427
+ "alive-popover",
3428
+ "alive-sidebar",
3429
+ "alive-backdrop",
3430
+ "alive-sr-only"
3431
+ ];
3432
+ if (aliveBasePrefixes.some((p) => cls === p || cls.startsWith(p + "-"))) continue;
3433
+ if (cls === "animate-none") {
3434
+ rules.push(`.${cls} { animation: none; }`);
3435
+ continue;
3436
+ }
3437
+ if (cls === "animate-spin") {
3438
+ rules.push(`.${cls} { animation: alive-spin 1s linear infinite; }`);
3439
+ continue;
3440
+ }
3441
+ if (cls === "animate-ping") {
3442
+ rules.push(`.${cls} { animation: alive-ping 1s cubic-bezier(0,0,0.2,1) infinite; }`);
3443
+ continue;
3444
+ }
3445
+ if (cls === "animate-pulse") {
3446
+ rules.push(`.${cls} { animation: alive-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }`);
3447
+ continue;
3448
+ }
3449
+ if (cls === "animate-bounce") {
3450
+ rules.push(`.${cls} { animation: alive-bounce 1s infinite; }`);
3451
+ continue;
3452
+ }
3453
+ if (cls === "animate-shimmer") {
3454
+ rules.push(`.${cls} { animation: alive-shimmer 1.5s linear infinite; }`);
3455
+ continue;
3456
+ }
3457
+ if (cls === "ease-linear") {
3458
+ rules.push(`.${cls} { transition-timing-function: linear; }`);
3459
+ continue;
3460
+ }
3461
+ if (cls === "ease-in") {
3462
+ rules.push(`.${cls} { transition-timing-function: cubic-bezier(0.4,0,1,1); }`);
3463
+ continue;
3464
+ }
3465
+ if (cls === "ease-out") {
3466
+ rules.push(`.${cls} { transition-timing-function: cubic-bezier(0,0,0.2,1); }`);
3467
+ continue;
3468
+ }
3469
+ if (cls === "ease-in-out") {
3470
+ rules.push(`.${cls} { transition-timing-function: cubic-bezier(0.4,0,0.2,1); }`);
3471
+ continue;
3472
+ }
3473
+ if (cls === "group") {
3474
+ rules.push(`.${cls} {}`);
3475
+ continue;
3476
+ }
3477
+ const staggerMatch = cls.match(/^stagger-(\d+)$/);
3478
+ if (staggerMatch) {
3479
+ rules.push(`.${cls} { --alive-stagger-gap: ${staggerMatch[1]}ms; }`);
3480
+ continue;
3481
+ }
3482
+ const indexMatch = cls.match(/^alive-index-(\d+)$/);
3483
+ if (indexMatch) {
3484
+ rules.push(`.${cls} { --alive-index: ${indexMatch[1]}; }`);
3485
+ continue;
3486
+ }
3487
+ const durationMatch = cls.match(/^duration-(\d+)$/);
3488
+ if (durationMatch) {
3489
+ rules.push(`.${cls} { --alive-duration: ${durationMatch[1]}ms; }`);
3490
+ continue;
3491
+ }
3492
+ const delayMatch = cls.match(/^delay-(\d+)$/);
3493
+ if (delayMatch) {
3494
+ rules.push(`.${cls} { animation-delay: ${delayMatch[1]}ms; }`);
3495
+ continue;
3496
+ }
3497
+ const motionMsMatch = cls.match(/^motion-(\d+)$/);
3498
+ if (motionMsMatch) {
3499
+ rules.push(`.${cls} { --alive-duration: ${motionMsMatch[1]}ms !important; }`);
3500
+ continue;
3501
+ }
3502
+ if (cls === "divide-x") {
3503
+ rules.push(`.${cls} > * + * { border-left-width: 1px; border-left-style: solid; }`);
3504
+ continue;
3505
+ }
3506
+ if (cls === "divide-y") {
3507
+ rules.push(`.${cls} > * + * { border-top-width: 1px; border-top-style: solid; }`);
3508
+ continue;
3509
+ }
3510
+ const divideColorMatch = cls.match(/^divide-([a-z]+)(?:-(\d+))?$/);
3511
+ if (divideColorMatch) {
3512
+ rules.push(`.${cls} > * + * { border-color: inherit; }`);
3513
+ continue;
3514
+ }
3515
+ if (cls === "appearance-none") {
3516
+ rules.push(`.${cls} { appearance: none; }`);
3517
+ continue;
3518
+ }
3519
+ if (cls === "appearance-auto") {
3520
+ rules.push(`.${cls} { appearance: auto; }`);
3521
+ continue;
3522
+ }
3523
+ if (cls === "resize-none") {
3524
+ rules.push(`.${cls} { resize: none; }`);
3525
+ continue;
3526
+ }
3527
+ if (cls === "resize") {
3528
+ rules.push(`.${cls} { resize: both; }`);
3529
+ continue;
3530
+ }
3531
+ if (cls === "resize-y") {
3532
+ rules.push(`.${cls} { resize: vertical; }`);
3533
+ continue;
3534
+ }
3535
+ if (cls === "resize-x") {
3536
+ rules.push(`.${cls} { resize: horizontal; }`);
3537
+ continue;
3538
+ }
3539
+ if (cls === "snap-none") {
3540
+ rules.push(`.${cls} { scroll-snap-type: none; }`);
3541
+ continue;
3542
+ }
3543
+ if (cls === "snap-x") {
3544
+ rules.push(`.${cls} { scroll-snap-type: x mandatory; }`);
3545
+ continue;
3546
+ }
3547
+ if (cls === "snap-y") {
3548
+ rules.push(`.${cls} { scroll-snap-type: y mandatory; }`);
3549
+ continue;
3550
+ }
3551
+ if (cls === "snap-start") {
3552
+ rules.push(`.${cls} { scroll-snap-align: start; }`);
3553
+ continue;
3554
+ }
3555
+ if (cls === "snap-center") {
3556
+ rules.push(`.${cls} { scroll-snap-align: center; }`);
3557
+ continue;
3558
+ }
3559
+ if (cls === "snap-end") {
3560
+ rules.push(`.${cls} { scroll-snap-align: end; }`);
3561
+ continue;
3562
+ }
3563
+ if (cls === "pointer-events-none") {
3564
+ rules.push(`.${cls} { pointer-events: none; }`);
3565
+ continue;
3566
+ }
3567
+ if (cls === "pointer-events-auto") {
3568
+ rules.push(`.${cls} { pointer-events: auto; }`);
3569
+ continue;
3570
+ }
3571
+ if (cls === "sr-only") {
3572
+ rules.push(`.${cls} { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }`);
3573
+ continue;
3574
+ }
3575
+ if (cls === "not-sr-only") {
3576
+ rules.push(`.${cls} { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }`);
3577
+ continue;
3578
+ }
3579
+ if (cls === "will-change-auto") {
3580
+ rules.push(`.${cls} { will-change: auto; }`);
3581
+ continue;
3582
+ }
3583
+ if (cls === "will-change-transform") {
3584
+ rules.push(`.${cls} { will-change: transform; }`);
3585
+ continue;
3586
+ }
3587
+ if (cls === "will-change-opacity") {
3588
+ rules.push(`.${cls} { will-change: opacity; }`);
3589
+ continue;
3590
+ }
3591
+ const lineClampMatch = cls.match(/^line-clamp-(\d+)$/);
3592
+ if (lineClampMatch) {
3593
+ const n = lineClampMatch[1];
3594
+ rules.push(`.${cls} { overflow: hidden; display: -webkit-box; -webkit-line-clamp: ${n}; -webkit-box-orient: vertical; }`);
3595
+ continue;
3596
+ }
3597
+ if (cls === "aspect-square") {
3598
+ rules.push(`.${cls} { aspect-ratio: 1 / 1; }`);
3599
+ continue;
3600
+ }
3601
+ if (cls === "aspect-video") {
3602
+ rules.push(`.${cls} { aspect-ratio: 16 / 9; }`);
3603
+ continue;
3604
+ }
3605
+ if (cls === "aspect-auto") {
3606
+ rules.push(`.${cls} { aspect-ratio: auto; }`);
3607
+ continue;
3608
+ }
3609
+ if (cls === "object-contain") {
3610
+ rules.push(`.${cls} { object-fit: contain; }`);
3611
+ continue;
3612
+ }
3613
+ if (cls === "object-cover") {
3614
+ rules.push(`.${cls} { object-fit: cover; }`);
3615
+ continue;
3616
+ }
3617
+ if (cls === "object-fill") {
3618
+ rules.push(`.${cls} { object-fit: fill; }`);
3619
+ continue;
3620
+ }
3621
+ if (cls === "object-none") {
3622
+ rules.push(`.${cls} { object-fit: none; }`);
3623
+ continue;
3624
+ }
3625
+ if (cls === "object-scale") {
3626
+ rules.push(`.${cls} { object-fit: scale-down; }`);
3627
+ continue;
3628
+ }
3629
+ if (cls === "mix-blend-multiply") {
3630
+ rules.push(`.${cls} { mix-blend-mode: multiply; }`);
3631
+ continue;
3632
+ }
3633
+ if (cls === "mix-blend-screen") {
3634
+ rules.push(`.${cls} { mix-blend-mode: screen; }`);
3635
+ continue;
3636
+ }
3637
+ if (cls === "mix-blend-overlay") {
3638
+ rules.push(`.${cls} { mix-blend-mode: overlay; }`);
3639
+ continue;
3640
+ }
3641
+ if (cls === "mix-blend-normal") {
3642
+ rules.push(`.${cls} { mix-blend-mode: normal; }`);
3643
+ continue;
3644
+ }
3645
+ if (cls === "isolate") {
3646
+ rules.push(`.${cls} { isolation: isolate; }`);
3647
+ continue;
3648
+ }
3649
+ if (cls === "isolation-auto") {
3650
+ rules.push(`.${cls} { isolation: auto; }`);
3651
+ continue;
3652
+ }
3653
+ if (cls === "touch-auto") {
3654
+ rules.push(`.${cls} { touch-action: auto; }`);
3655
+ continue;
3656
+ }
3657
+ if (cls === "touch-none") {
3658
+ rules.push(`.${cls} { touch-action: none; }`);
3659
+ continue;
3660
+ }
3661
+ if (cls === "touch-pan-x") {
3662
+ rules.push(`.${cls} { touch-action: pan-x; }`);
3663
+ continue;
3664
+ }
3665
+ if (cls === "touch-pan-y") {
3666
+ rules.push(`.${cls} { touch-action: pan-y; }`);
3667
+ continue;
3668
+ }
3669
+ if (cls === "touch-manipulation") {
3670
+ rules.push(`.${cls} { touch-action: manipulation; }`);
3671
+ continue;
3672
+ }
3673
+ if (cls === "select-none") {
3674
+ rules.push(`.${cls} { user-select: none; }`);
3675
+ continue;
3676
+ }
3677
+ if (cls === "select-text") {
3678
+ rules.push(`.${cls} { user-select: text; }`);
3679
+ continue;
3680
+ }
3681
+ if (cls === "select-all") {
3682
+ rules.push(`.${cls} { user-select: all; }`);
3683
+ continue;
3684
+ }
3685
+ if (cls === "select-auto") {
3686
+ rules.push(`.${cls} { user-select: auto; }`);
3687
+ continue;
3688
+ }
3689
+ if (cls === "break-normal") {
3690
+ rules.push(`.${cls} { overflow-wrap: normal; word-break: normal; }`);
3691
+ continue;
3692
+ }
3693
+ if (cls === "break-words") {
3694
+ rules.push(`.${cls} { overflow-wrap: break-word; }`);
3695
+ continue;
3696
+ }
3697
+ if (cls === "break-all") {
3698
+ rules.push(`.${cls} { word-break: break-all; }`);
3699
+ continue;
3700
+ }
3701
+ if (cls === "break-keep") {
3702
+ rules.push(`.${cls} { word-break: keep-all; }`);
3703
+ continue;
3704
+ }
3705
+ }
3706
+ return rules;
3707
+ }
3708
+
3709
+ // src/cli.ts
3710
+ var program = new import_commander.Command();
3711
+ program.name("aliveui").description("AliveUI \u2014 motion-first CSS framework").version("1.0.0");
3712
+ program.command("init").description("Create an aliveui.config.js in the current directory").action(() => {
3713
+ const configPath = (0, import_path.resolve)(process.cwd(), "aliveui.config.js");
3714
+ if ((0, import_fs2.existsSync)(configPath)) {
3715
+ console.log("aliveui.config.js already exists.");
3716
+ process.exit(1);
3717
+ }
3718
+ const template = `/** @type {import('aliveui').AliveUIConfig} */
3719
+ module.exports = {
3720
+ content: [
3721
+ './src/**/*.{html,js,jsx,ts,tsx,vue,svelte}',
3722
+ './public/**/*.html',
3723
+ ],
3724
+ output: './public/alive.css',
3725
+ theme: {
3726
+ // Override default tokens here
3727
+ // colors: { brand: '#your-color' },
3728
+ },
3729
+ }
3730
+ `;
3731
+ (0, import_fs2.writeFileSync)(configPath, template, "utf-8");
3732
+ console.log("Created aliveui.config.js");
3733
+ console.log("\nNext steps:");
3734
+ console.log(" 1. Add your content paths to aliveui.config.js");
3735
+ console.log(" 2. Run: aliveui build");
3736
+ console.log(" 3. Link the output CSS in your HTML");
3737
+ });
3738
+ program.command("build").description("Scan content and generate alive.css").option("-c, --config <path>", "Path to config file", "aliveui.config.js").option("-o, --output <path>", "Output CSS file path").option("--minify", "Minify output").action(async (opts) => {
3739
+ const start = Date.now();
3740
+ try {
3741
+ const { config, outputPath } = loadConfig(opts);
3742
+ const css = await buildCSS(config);
3743
+ const final = opts.minify ? minify(css) : css;
3744
+ ensureDir(outputPath);
3745
+ (0, import_fs2.writeFileSync)(outputPath, final, "utf-8");
3746
+ const elapsed = Date.now() - start;
3747
+ const sizeKb = (Buffer.byteLength(final, "utf-8") / 1024).toFixed(1);
3748
+ console.log(`Built ${outputPath} (${sizeKb} kB) in ${elapsed}ms`);
3749
+ } catch (err) {
3750
+ console.error("Build failed:", err instanceof Error ? err.message : err);
3751
+ process.exit(1);
3752
+ }
3753
+ });
3754
+ program.command("watch").description("Watch content files and rebuild on changes").option("-c, --config <path>", "Path to config file", "aliveui.config.js").option("-o, --output <path>", "Output CSS file path").action(async (opts) => {
3755
+ const { config, outputPath } = loadConfig(opts);
3756
+ const rebuild = async () => {
3757
+ try {
3758
+ const start = Date.now();
3759
+ const css = await buildCSS(config);
3760
+ ensureDir(outputPath);
3761
+ (0, import_fs2.writeFileSync)(outputPath, css, "utf-8");
3762
+ const elapsed = Date.now() - start;
3763
+ console.log(`Rebuilt ${outputPath} in ${elapsed}ms`);
3764
+ } catch (err) {
3765
+ console.error("Rebuild failed:", err instanceof Error ? err.message : err);
3766
+ }
3767
+ };
3768
+ await rebuild();
3769
+ const patterns = config.content.length > 0 ? config.content : ["./src/**/*"];
3770
+ const watcher = (0, import_chokidar.watch)(patterns, {
3771
+ ignoreInitial: true,
3772
+ ignored: ["**/node_modules/**", "**/.git/**", "**/dist/**"]
3773
+ });
3774
+ watcher.on("all", () => rebuild());
3775
+ console.log(`Watching ${patterns.join(", ")} for changes...`);
3776
+ console.log("Press Ctrl+C to stop.");
3777
+ });
3778
+ function loadConfig(opts) {
3779
+ const configPath = (0, import_path.resolve)(process.cwd(), opts.config);
3780
+ let userConfig = {};
3781
+ if ((0, import_fs2.existsSync)(configPath)) {
3782
+ try {
3783
+ delete require.cache[configPath];
3784
+ userConfig = require(configPath);
3785
+ } catch (err) {
3786
+ console.warn(`Could not load ${opts.config}:`, err instanceof Error ? err.message : err);
3787
+ }
3788
+ } else {
3789
+ console.warn(`No config found at ${opts.config}. Using defaults.`);
3790
+ }
3791
+ const config = resolveConfig(userConfig);
3792
+ const outputPath = (0, import_path.resolve)(process.cwd(), opts.output ?? config.output);
3793
+ return { config, outputPath };
3794
+ }
3795
+ async function buildCSS(config) {
3796
+ const classes = await scanContent(config);
3797
+ const base = generateBase(config);
3798
+ const utilities = generateUtilities(classes, config);
3799
+ return `${base}
3800
+
3801
+ ${utilities}
3802
+ `;
3803
+ }
3804
+ function ensureDir(filePath) {
3805
+ const dir = (0, import_path.dirname)(filePath);
3806
+ (0, import_fs2.mkdirSync)(dir, { recursive: true });
3807
+ }
3808
+ function minify(css) {
3809
+ return css.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*{\s*/g, "{").replace(/\s*}\s*/g, "}").replace(/\s*:\s*/g, ":").replace(/\s*;\s*/g, ";").replace(/;\}/g, "}").trim();
3810
+ }
3811
+ program.parse(process.argv);