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