juxscript 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +292 -0
  2. package/bin/cli.js +149 -0
  3. package/lib/adapters/base-adapter.js +35 -0
  4. package/lib/adapters/index.js +33 -0
  5. package/lib/adapters/mysql-adapter.js +65 -0
  6. package/lib/adapters/postgres-adapter.js +70 -0
  7. package/lib/adapters/sqlite-adapter.js +56 -0
  8. package/lib/components/app.ts +124 -0
  9. package/lib/components/button.ts +136 -0
  10. package/lib/components/card.ts +205 -0
  11. package/lib/components/chart.ts +125 -0
  12. package/lib/components/code.ts +242 -0
  13. package/lib/components/container.ts +282 -0
  14. package/lib/components/data.ts +105 -0
  15. package/lib/components/docs-data.json +1211 -0
  16. package/lib/components/error-handler.ts +285 -0
  17. package/lib/components/footer.ts +146 -0
  18. package/lib/components/header.ts +167 -0
  19. package/lib/components/hero.ts +170 -0
  20. package/lib/components/import.ts +430 -0
  21. package/lib/components/input.ts +175 -0
  22. package/lib/components/layout.ts +113 -0
  23. package/lib/components/list.ts +392 -0
  24. package/lib/components/main.ts +111 -0
  25. package/lib/components/menu.ts +170 -0
  26. package/lib/components/modal.ts +216 -0
  27. package/lib/components/nav.ts +136 -0
  28. package/lib/components/node.ts +200 -0
  29. package/lib/components/reactivity.js +104 -0
  30. package/lib/components/script.ts +152 -0
  31. package/lib/components/sidebar.ts +168 -0
  32. package/lib/components/style.ts +129 -0
  33. package/lib/components/table.ts +279 -0
  34. package/lib/components/tabs.ts +191 -0
  35. package/lib/components/theme.ts +97 -0
  36. package/lib/components/view.ts +174 -0
  37. package/lib/jux.ts +203 -0
  38. package/lib/layouts/default.css +260 -0
  39. package/lib/layouts/default.jux +8 -0
  40. package/lib/layouts/figma.css +334 -0
  41. package/lib/layouts/figma.jux +0 -0
  42. package/lib/layouts/notion.css +258 -0
  43. package/lib/styles/base-theme.css +186 -0
  44. package/lib/styles/dark-theme.css +144 -0
  45. package/lib/styles/global.css +1131 -0
  46. package/lib/styles/light-theme.css +144 -0
  47. package/lib/styles/tokens/dark.css +86 -0
  48. package/lib/styles/tokens/light.css +86 -0
  49. package/lib/themes/dark.css +86 -0
  50. package/lib/themes/light.css +86 -0
  51. package/lib/utils/path-resolver.js +23 -0
  52. package/machinery/compiler.js +262 -0
  53. package/machinery/doc-generator.js +160 -0
  54. package/machinery/generators/css.js +128 -0
  55. package/machinery/generators/html.js +108 -0
  56. package/machinery/imports.js +155 -0
  57. package/machinery/server.js +185 -0
  58. package/machinery/validators/file-validator.js +123 -0
  59. package/machinery/watcher.js +148 -0
  60. package/package.json +58 -0
  61. package/types/globals.d.ts +16 -0
@@ -0,0 +1,144 @@
1
+ /* Light Theme Styles ./light-theme.css */
2
+ :root {
3
+ --theme-brand: #085156;
4
+ --theme-brand-hover: #06393c;
5
+ --theme-success: #085156;
6
+ --theme-danger: #ef4444;
7
+ --theme-text: #333;
8
+ --theme-text-muted: #666;
9
+ --theme-text-inverse: #ffffff;
10
+ --theme-surface: #f4f4f4;
11
+ --theme-surface-elevated: #ffffff;
12
+ --theme-border: #ddd;
13
+ --theme-hover-deeper: #f9f9f9;
14
+ --theme-wash-slate: #f9f9f9;
15
+ }
16
+
17
+ body {
18
+ color: var(--theme-text);
19
+ background: #f5f5f5;
20
+ }
21
+
22
+ .jux-hero {
23
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24
+ }
25
+
26
+ .jux-grid-item {
27
+ background: #ffffff;
28
+ }
29
+
30
+ .jux-grid-title {
31
+ color: #667eea;
32
+ }
33
+
34
+ .jux-grid-description {
35
+ color: #666;
36
+ }
37
+
38
+ .jux-button-primary {
39
+ background: #667eea;
40
+ }
41
+
42
+ .jux-button-primary:hover {
43
+ background: #5568d3;
44
+ }
45
+
46
+ .jux-table {
47
+ background: #ffffff;
48
+ }
49
+
50
+ .jux-table th {
51
+ background-color: #f4f4f4;
52
+ border-bottom-color: #ddd;
53
+ }
54
+
55
+ .jux-table td {
56
+ border-bottom-color: #eee;
57
+ }
58
+
59
+ .jux-table tr:hover {
60
+ background-color: #f9f9f9;
61
+ }
62
+
63
+ .table-search {
64
+ background: #ffffff;
65
+ color: #333;
66
+ border-color: #ddd;
67
+ }
68
+
69
+ .table-toolbar {
70
+ background: #f9f9f9;
71
+ }
72
+
73
+ .table-toolbar button {
74
+ background: #ffffff;
75
+ color: #333;
76
+ border-color: #ddd;
77
+ }
78
+
79
+ .table-toolbar button:hover {
80
+ background: #f4f4f4;
81
+ }
82
+
83
+ .table-toolbar button.active {
84
+ background: #667eea;
85
+ border-color: #667eea;
86
+ }
87
+
88
+ .table-filter-dropdown-menu {
89
+ background: #ffffff;
90
+ border-color: #ddd;
91
+ }
92
+
93
+ .table-filter-dropdown-menu select,
94
+ .table-filter-dropdown-menu input {
95
+ background: #ffffff;
96
+ color: #333;
97
+ border-color: #ddd;
98
+ }
99
+
100
+ .table-active-filters span {
101
+ background: #667eea;
102
+ }
103
+
104
+ .table-row-menu {
105
+ background: #ffffff;
106
+ border-color: #ddd;
107
+ }
108
+
109
+ .table-row-menu button {
110
+ color: #333;
111
+ }
112
+
113
+ .table-row-menu button:hover {
114
+ background: #f4f4f4;
115
+ }
116
+
117
+ .table-cards .card {
118
+ background: #ffffff;
119
+ border-color: #ddd;
120
+ }
121
+
122
+ .table-card-actions {
123
+ border-top-color: #eee;
124
+ }
125
+
126
+ .table-pagination button {
127
+ background: #ffffff;
128
+ color: #333;
129
+ border-color: #ddd;
130
+ }
131
+
132
+ .table-pagination button:hover:not(:disabled) {
133
+ background: #f4f4f4;
134
+ }
135
+
136
+ .table-pages button.active {
137
+ background: #667eea;
138
+ border-color: #667eea;
139
+ }
140
+
141
+ .table-pages-ellipsis {
142
+ color: #333;
143
+ }
144
+ /* END Light Theme Styles ./light-theme.css */
@@ -0,0 +1,86 @@
1
+ /**
2
+ * Dark Theme Tokens
3
+ * Swappable design decisions
4
+ */
5
+ :root {
6
+ /* Colors */
7
+ --color-brand: #0a9ca5;
8
+ --color-brand-hover: #088892;
9
+ --color-success: #10b981;
10
+ --color-warning: #f59e0b;
11
+ --color-danger: #ef4444;
12
+ --color-info: #3b82f6;
13
+
14
+ --color-text-primary: #e8e8e8;
15
+ --color-text-secondary: #a0a0a0;
16
+ --color-text-tertiary: #707070;
17
+ --color-text-inverse: #ffffff;
18
+
19
+ --color-surface-base: #1a1a1a;
20
+ --color-surface-elevated: #242424;
21
+ --color-surface-hover: #2a2a2a;
22
+ --color-background: #0a0a0a;
23
+
24
+ --color-border: #333333;
25
+ --color-border-hover: #404040;
26
+ --color-border-focus: #7c3aed;
27
+
28
+ /* Typography */
29
+ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
30
+ --font-family-mono: 'Courier New', monospace;
31
+
32
+ --font-size-xs: 0.75rem;
33
+ --font-size-sm: 0.875rem;
34
+ --font-size-base: 1rem;
35
+ --font-size-lg: 1.125rem;
36
+ --font-size-xl: 1.25rem;
37
+ --font-size-2xl: 1.5rem;
38
+ --font-size-3xl: 2rem;
39
+
40
+ --font-weight-normal: 400;
41
+ --font-weight-medium: 500;
42
+ --font-weight-semibold: 600;
43
+ --font-weight-bold: 700;
44
+
45
+ --line-height-tight: 1.25;
46
+ --line-height-normal: 1.5;
47
+ --line-height-relaxed: 1.75;
48
+
49
+ /* Spacing */
50
+ --space-xs: 0.25rem;
51
+ --space-sm: 0.5rem;
52
+ --space-md: 1rem;
53
+ --space-lg: 1.5rem;
54
+ --space-xl: 2rem;
55
+ --space-2xl: 3rem;
56
+ --space-3xl: 4rem;
57
+
58
+ /* Borders */
59
+ --border-radius-sm: 4px;
60
+ --border-radius-md: 6px;
61
+ --border-radius-lg: 8px;
62
+ --border-radius-xl: 12px;
63
+ --border-radius-full: 9999px;
64
+
65
+ --border-width: 1px;
66
+ --border-width-thick: 2px;
67
+
68
+ /* Shadows */
69
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
70
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
71
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
72
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
73
+
74
+ /* Transitions */
75
+ --transition-fast: 150ms ease;
76
+ --transition-base: 200ms ease;
77
+ --transition-slow: 300ms ease;
78
+
79
+ /* Legacy aliases for backward compatibility */
80
+ --theme-brand: var(--color-brand);
81
+ --theme-text: var(--color-text-primary);
82
+ --theme-text-muted: var(--color-text-secondary);
83
+ --theme-surface: var(--color-surface-base);
84
+ --theme-surface-elevated: var(--color-surface-elevated);
85
+ --theme-border: var(--color-border);
86
+ }
@@ -0,0 +1,86 @@
1
+ /**
2
+ * Light Theme Tokens
3
+ * Swappable design decisions
4
+ */
5
+ :root {
6
+ /* Colors */
7
+ --color-brand: #0a9ca5;
8
+ --color-brand-hover: #088892;
9
+ --color-success: #10b981;
10
+ --color-warning: #f59e0b;
11
+ --color-danger: #ef4444;
12
+ --color-info: #3b82f6;
13
+
14
+ --color-text-primary: #111827;
15
+ --color-text-secondary: #4b5563;
16
+ --color-text-tertiary: #6b7280;
17
+ --color-text-inverse: #ffffff;
18
+
19
+ --color-surface-base: #f3f4f6;
20
+ --color-surface-elevated: #ffffff;
21
+ --color-surface-hover: #e5e7eb;
22
+ --color-background: #ffffff;
23
+
24
+ --color-border: #d1d5db;
25
+ --color-border-hover: #9ca3af;
26
+ --color-border-focus: #7c3aed;
27
+
28
+ /* Typography */
29
+ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
30
+ --font-family-mono: 'Courier New', monospace;
31
+
32
+ --font-size-xs: 0.75rem;
33
+ --font-size-sm: 0.875rem;
34
+ --font-size-base: 1rem;
35
+ --font-size-lg: 1.125rem;
36
+ --font-size-xl: 1.25rem;
37
+ --font-size-2xl: 1.5rem;
38
+ --font-size-3xl: 2rem;
39
+
40
+ --font-weight-normal: 400;
41
+ --font-weight-medium: 500;
42
+ --font-weight-semibold: 600;
43
+ --font-weight-bold: 700;
44
+
45
+ --line-height-tight: 1.25;
46
+ --line-height-normal: 1.5;
47
+ --line-height-relaxed: 1.75;
48
+
49
+ /* Spacing */
50
+ --space-xs: 0.25rem;
51
+ --space-sm: 0.5rem;
52
+ --space-md: 1rem;
53
+ --space-lg: 1.5rem;
54
+ --space-xl: 2rem;
55
+ --space-2xl: 3rem;
56
+ --space-3xl: 4rem;
57
+
58
+ /* Borders */
59
+ --border-radius-sm: 4px;
60
+ --border-radius-md: 6px;
61
+ --border-radius-lg: 8px;
62
+ --border-radius-xl: 12px;
63
+ --border-radius-full: 9999px;
64
+
65
+ --border-width: 1px;
66
+ --border-width-thick: 2px;
67
+
68
+ /* Shadows */
69
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
70
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
71
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
72
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
73
+
74
+ /* Transitions */
75
+ --transition-fast: 150ms ease;
76
+ --transition-base: 200ms ease;
77
+ --transition-slow: 300ms ease;
78
+
79
+ /* Legacy aliases for backward compatibility */
80
+ --theme-brand: var(--color-brand);
81
+ --theme-text: var(--color-text-primary);
82
+ --theme-text-muted: var(--color-text-secondary);
83
+ --theme-surface: var(--color-surface-base);
84
+ --theme-surface-elevated: var(--color-surface-elevated);
85
+ --theme-border: var(--color-border);
86
+ }
@@ -0,0 +1,86 @@
1
+ /**
2
+ * Dark Theme Tokens
3
+ * Swappable design decisions
4
+ */
5
+ :root {
6
+ /* Colors */
7
+ --color-brand: #0a9ca5;
8
+ --color-brand-hover: #088892;
9
+ --color-success: #10b981;
10
+ --color-warning: #f59e0b;
11
+ --color-danger: #ef4444;
12
+ --color-info: #3b82f6;
13
+
14
+ --color-text-primary: #e8e8e8;
15
+ --color-text-secondary: #a0a0a0;
16
+ --color-text-tertiary: #707070;
17
+ --color-text-inverse: #ffffff;
18
+
19
+ --color-surface-base: #1a1a1a;
20
+ --color-surface-elevated: #242424;
21
+ --color-surface-hover: #2a2a2a;
22
+ --color-background: #0a0a0a;
23
+
24
+ --color-border: #333333;
25
+ --color-border-hover: #404040;
26
+ --color-border-focus: #7c3aed;
27
+
28
+ /* Typography */
29
+ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
30
+ --font-family-mono: 'Courier New', monospace;
31
+
32
+ --font-size-xs: 0.75rem;
33
+ --font-size-sm: 0.875rem;
34
+ --font-size-base: 1rem;
35
+ --font-size-lg: 1.125rem;
36
+ --font-size-xl: 1.25rem;
37
+ --font-size-2xl: 1.5rem;
38
+ --font-size-3xl: 2rem;
39
+
40
+ --font-weight-normal: 400;
41
+ --font-weight-medium: 500;
42
+ --font-weight-semibold: 600;
43
+ --font-weight-bold: 700;
44
+
45
+ --line-height-tight: 1.25;
46
+ --line-height-normal: 1.5;
47
+ --line-height-relaxed: 1.75;
48
+
49
+ /* Spacing */
50
+ --space-xs: 0.25rem;
51
+ --space-sm: 0.5rem;
52
+ --space-md: 1rem;
53
+ --space-lg: 1.5rem;
54
+ --space-xl: 2rem;
55
+ --space-2xl: 3rem;
56
+ --space-3xl: 4rem;
57
+
58
+ /* Borders */
59
+ --border-radius-sm: 4px;
60
+ --border-radius-md: 6px;
61
+ --border-radius-lg: 8px;
62
+ --border-radius-xl: 12px;
63
+ --border-radius-full: 9999px;
64
+
65
+ --border-width: 1px;
66
+ --border-width-thick: 2px;
67
+
68
+ /* Shadows */
69
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
70
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
71
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
72
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);
73
+
74
+ /* Transitions */
75
+ --transition-fast: 150ms ease;
76
+ --transition-base: 200ms ease;
77
+ --transition-slow: 300ms ease;
78
+
79
+ /* Legacy aliases for backward compatibility */
80
+ --theme-brand: var(--color-brand);
81
+ --theme-text: var(--color-text-primary);
82
+ --theme-text-muted: var(--color-text-secondary);
83
+ --theme-surface: var(--color-surface-base);
84
+ --theme-surface-elevated: var(--color-surface-elevated);
85
+ --theme-border: var(--color-border);
86
+ }
@@ -0,0 +1,86 @@
1
+ /**
2
+ * Light Theme Tokens
3
+ * Swappable design decisions
4
+ */
5
+ :root {
6
+ /* Colors */
7
+ --color-brand: #0a9ca5;
8
+ --color-brand-hover: #088892;
9
+ --color-success: #10b981;
10
+ --color-warning: #f59e0b;
11
+ --color-danger: #ef4444;
12
+ --color-info: #3b82f6;
13
+
14
+ --color-text-primary: #111827;
15
+ --color-text-secondary: #4b5563;
16
+ --color-text-tertiary: #6b7280;
17
+ --color-text-inverse: #ffffff;
18
+
19
+ --color-surface-base: #f3f4f6;
20
+ --color-surface-elevated: #ffffff;
21
+ --color-surface-hover: #e5e7eb;
22
+ --color-background: #ffffff;
23
+
24
+ --color-border: #d1d5db;
25
+ --color-border-hover: #9ca3af;
26
+ --color-border-focus: #7c3aed;
27
+
28
+ /* Typography */
29
+ --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
30
+ --font-family-mono: 'Courier New', monospace;
31
+
32
+ --font-size-xs: 0.75rem;
33
+ --font-size-sm: 0.875rem;
34
+ --font-size-base: 1rem;
35
+ --font-size-lg: 1.125rem;
36
+ --font-size-xl: 1.25rem;
37
+ --font-size-2xl: 1.5rem;
38
+ --font-size-3xl: 2rem;
39
+
40
+ --font-weight-normal: 400;
41
+ --font-weight-medium: 500;
42
+ --font-weight-semibold: 600;
43
+ --font-weight-bold: 700;
44
+
45
+ --line-height-tight: 1.25;
46
+ --line-height-normal: 1.5;
47
+ --line-height-relaxed: 1.75;
48
+
49
+ /* Spacing */
50
+ --space-xs: 0.25rem;
51
+ --space-sm: 0.5rem;
52
+ --space-md: 1rem;
53
+ --space-lg: 1.5rem;
54
+ --space-xl: 2rem;
55
+ --space-2xl: 3rem;
56
+ --space-3xl: 4rem;
57
+
58
+ /* Borders */
59
+ --border-radius-sm: 4px;
60
+ --border-radius-md: 6px;
61
+ --border-radius-lg: 8px;
62
+ --border-radius-xl: 12px;
63
+ --border-radius-full: 9999px;
64
+
65
+ --border-width: 1px;
66
+ --border-width-thick: 2px;
67
+
68
+ /* Shadows */
69
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
70
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
71
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
72
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
73
+
74
+ /* Transitions */
75
+ --transition-fast: 150ms ease;
76
+ --transition-base: 200ms ease;
77
+ --transition-slow: 300ms ease;
78
+
79
+ /* Legacy aliases for backward compatibility */
80
+ --theme-brand: var(--color-brand);
81
+ --theme-text: var(--color-text-primary);
82
+ --theme-text-muted: var(--color-text-secondary);
83
+ --theme-surface: var(--color-surface-base);
84
+ --theme-surface-elevated: var(--color-surface-elevated);
85
+ --theme-border: var(--color-border);
86
+ }
@@ -0,0 +1,23 @@
1
+ // lib/utils/path-resolver.js
2
+ export class PathResolver {
3
+ constructor(projectRoot, currentFile) {
4
+ this.projectRoot = projectRoot;
5
+ this.currentFile = currentFile;
6
+ }
7
+
8
+ resolveLibPath(relativePath) {
9
+ return path.join(this.projectRoot, 'lib', relativePath);
10
+ }
11
+
12
+ resolveDistPath(relativePath) {
13
+ return path.join(this.projectRoot, 'dist', relativePath);
14
+ }
15
+
16
+ resolveRelativeToFile(importPath) {
17
+ return path.resolve(path.dirname(this.currentFile), importPath);
18
+ }
19
+
20
+ calculateRelativeDepth(fromFile, toFile) {
21
+ // ... existing logic centralized
22
+ }
23
+ }