@illuma-ai/code-sandbox 1.3.1 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +18 -12
- package/README.md +715 -0
- package/package.json +3 -4
- package/src/components/BootOverlay.tsx +0 -145
- package/src/components/CodeEditor.tsx +0 -298
- package/src/components/FileTree.tsx +0 -678
- package/src/components/Preview.tsx +0 -262
- package/src/components/Terminal.tsx +0 -111
- package/src/components/ViewSlider.tsx +0 -87
- package/src/components/Workbench.tsx +0 -382
- package/src/hooks/useRuntime.ts +0 -637
- package/src/index.ts +0 -51
- package/src/services/runtime.ts +0 -775
- package/src/styles.css +0 -178
- package/src/templates/fullstack-starter.ts +0 -3507
- package/src/templates/index.ts +0 -607
- package/src/types.ts +0 -375
package/src/styles.css
DELETED
|
@@ -1,178 +0,0 @@
|
|
|
1
|
-
@tailwind base;
|
|
2
|
-
@tailwind components;
|
|
3
|
-
@tailwind utilities;
|
|
4
|
-
|
|
5
|
-
/* Code Sandbox CSS custom properties — overridable by consumers */
|
|
6
|
-
:root {
|
|
7
|
-
--sb-bg: #1e1e1e;
|
|
8
|
-
--sb-bg-alt: #252526;
|
|
9
|
-
--sb-bg-hover: #2a2d2e;
|
|
10
|
-
--sb-bg-active: #37373d;
|
|
11
|
-
--sb-sidebar: #252526;
|
|
12
|
-
--sb-editor: #1e1e1e;
|
|
13
|
-
--sb-terminal: #0d1117;
|
|
14
|
-
--sb-terminal-header: #161b22;
|
|
15
|
-
--sb-preview: #ffffff;
|
|
16
|
-
--sb-border: #3c3c3c;
|
|
17
|
-
--sb-text: #cccccc;
|
|
18
|
-
--sb-text-muted: #858585;
|
|
19
|
-
--sb-text-active: #ffffff;
|
|
20
|
-
--sb-accent: #007acc;
|
|
21
|
-
--sb-accent-hover: #1a8ad4;
|
|
22
|
-
--sb-success: #3fb950;
|
|
23
|
-
--sb-warning: #d29922;
|
|
24
|
-
--sb-error: #f85149;
|
|
25
|
-
--sb-info: #58a6ff;
|
|
26
|
-
--sb-cyan: #56d4dd;
|
|
27
|
-
--sb-magenta: #bc8cff;
|
|
28
|
-
--sb-yellow: #e3b341;
|
|
29
|
-
--sb-scrollbar-thumb: rgba(255, 255, 255, 0.12);
|
|
30
|
-
--sb-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
|
|
31
|
-
--sb-scrollbar-track: transparent;
|
|
32
|
-
--sb-scrollbar-width: 6px;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/* ---------------------------------------------------------------------------
|
|
36
|
-
* Modern thin scrollbars — applies to ALL scrollable elements in sandbox
|
|
37
|
-
* Auto-hides via opacity transition. Themed with CSS vars.
|
|
38
|
-
* --------------------------------------------------------------------------- */
|
|
39
|
-
|
|
40
|
-
/* Webkit (Chrome, Safari, Edge) */
|
|
41
|
-
.sb-root ::-webkit-scrollbar {
|
|
42
|
-
width: var(--sb-scrollbar-width);
|
|
43
|
-
height: var(--sb-scrollbar-width);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.sb-root ::-webkit-scrollbar-track {
|
|
47
|
-
background: var(--sb-scrollbar-track);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.sb-root ::-webkit-scrollbar-thumb {
|
|
51
|
-
background: var(--sb-scrollbar-thumb);
|
|
52
|
-
border-radius: 999px;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.sb-root ::-webkit-scrollbar-thumb:hover {
|
|
56
|
-
background: var(--sb-scrollbar-thumb-hover);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.sb-root ::-webkit-scrollbar-corner {
|
|
60
|
-
background: transparent;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/* Firefox */
|
|
64
|
-
.sb-root * {
|
|
65
|
-
scrollbar-width: thin;
|
|
66
|
-
scrollbar-color: var(--sb-scrollbar-thumb) var(--sb-scrollbar-track);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* ---------------------------------------------------------------------------
|
|
70
|
-
* Terminal — clean monochrome styling
|
|
71
|
-
* --------------------------------------------------------------------------- */
|
|
72
|
-
|
|
73
|
-
.sb-terminal-output {
|
|
74
|
-
font-family:
|
|
75
|
-
"Cascadia Code", "JetBrains Mono", "Fira Code", "Consolas", "Monaco",
|
|
76
|
-
"Courier New", monospace;
|
|
77
|
-
font-size: 12.5px;
|
|
78
|
-
line-height: 1.6;
|
|
79
|
-
letter-spacing: 0.01em;
|
|
80
|
-
-webkit-font-smoothing: antialiased;
|
|
81
|
-
-moz-osx-font-smoothing: grayscale;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/*
|
|
85
|
-
* Ranger Theme Variables — bridged from ranger/client/src/style.css.
|
|
86
|
-
*
|
|
87
|
-
* These are injected into the sandbox shell so consumers can apply Ranger's
|
|
88
|
-
* design tokens to both the sandbox chrome and the preview iframe's content.
|
|
89
|
-
* HSL values are stored WITHOUT the hsl() wrapper (e.g. "12 76% 61%")
|
|
90
|
-
* and consumed as: color: hsl(var(--chart-1));
|
|
91
|
-
*
|
|
92
|
-
* Light mode (default) and dark mode (.dark) variants are provided.
|
|
93
|
-
*/
|
|
94
|
-
|
|
95
|
-
/* --- Light mode --------------------------------------------------------- */
|
|
96
|
-
:root {
|
|
97
|
-
/* Ranger text */
|
|
98
|
-
--text-primary: #1a1a1a;
|
|
99
|
-
--text-secondary: #565869;
|
|
100
|
-
--text-tertiary: #8e8ea0;
|
|
101
|
-
|
|
102
|
-
/* Ranger surfaces */
|
|
103
|
-
--surface-primary: #ffffff;
|
|
104
|
-
--surface-secondary: #f9fafb;
|
|
105
|
-
--surface-tertiary: #f3f4f6;
|
|
106
|
-
|
|
107
|
-
/* Ranger borders */
|
|
108
|
-
--border-light: #e5e7eb;
|
|
109
|
-
--border-medium: #d1d5db;
|
|
110
|
-
--border-heavy: #9ca3af;
|
|
111
|
-
|
|
112
|
-
/* shadcn / chart HSL tokens (light) */
|
|
113
|
-
--background: 0 0% 100%;
|
|
114
|
-
--foreground: 0 0% 3.9%;
|
|
115
|
-
--card: 0 0% 100%;
|
|
116
|
-
--card-foreground: 0 0% 3.9%;
|
|
117
|
-
--primary: 0 0% 9%;
|
|
118
|
-
--primary-foreground: 0 0% 98%;
|
|
119
|
-
--secondary: 0 0% 96.1%;
|
|
120
|
-
--secondary-foreground: 0 0% 9%;
|
|
121
|
-
--muted: 0 0% 96.1%;
|
|
122
|
-
--muted-foreground: 0 0% 45.1%;
|
|
123
|
-
--accent: 0 0% 96.1%;
|
|
124
|
-
--accent-foreground: 0 0% 9%;
|
|
125
|
-
--destructive: 0 84.2% 60.2%;
|
|
126
|
-
--destructive-foreground: 0 0% 98%;
|
|
127
|
-
--border: 0 0% 89.8%;
|
|
128
|
-
--input: 0 0% 89.8%;
|
|
129
|
-
--ring: 0 0% 3.9%;
|
|
130
|
-
--radius: 0.5rem;
|
|
131
|
-
--chart-1: 12 76% 61%;
|
|
132
|
-
--chart-2: 173 58% 39%;
|
|
133
|
-
--chart-3: 197 37% 24%;
|
|
134
|
-
--chart-4: 43 74% 66%;
|
|
135
|
-
--chart-5: 27 87% 67%;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
/* --- Dark mode ---------------------------------------------------------- */
|
|
139
|
-
.dark {
|
|
140
|
-
/* Ranger text */
|
|
141
|
-
--text-primary: #f3f4f6;
|
|
142
|
-
--text-secondary: #d1d5db;
|
|
143
|
-
--text-tertiary: #6b7280;
|
|
144
|
-
|
|
145
|
-
/* Ranger surfaces */
|
|
146
|
-
--surface-primary: #111827;
|
|
147
|
-
--surface-secondary: #1f2937;
|
|
148
|
-
--surface-tertiary: #374151;
|
|
149
|
-
|
|
150
|
-
/* Ranger borders */
|
|
151
|
-
--border-light: #3a3a3b;
|
|
152
|
-
--border-medium: #4b5563;
|
|
153
|
-
--border-heavy: #6b7280;
|
|
154
|
-
|
|
155
|
-
/* shadcn / chart HSL tokens (dark) */
|
|
156
|
-
--background: 0 0% 7%;
|
|
157
|
-
--foreground: 0 0% 98%;
|
|
158
|
-
--card: 0 0% 3.9%;
|
|
159
|
-
--card-foreground: 0 0% 98%;
|
|
160
|
-
--primary: 0 0% 98%;
|
|
161
|
-
--primary-foreground: 0 0% 9%;
|
|
162
|
-
--secondary: 0 0% 14.9%;
|
|
163
|
-
--secondary-foreground: 0 0% 98%;
|
|
164
|
-
--muted: 0 0% 14.9%;
|
|
165
|
-
--muted-foreground: 0 0% 63.9%;
|
|
166
|
-
--accent: 0 0% 14.9%;
|
|
167
|
-
--accent-foreground: 0 0% 98%;
|
|
168
|
-
--destructive: 0 62.8% 40.6%;
|
|
169
|
-
--destructive-foreground: 0 0% 98%;
|
|
170
|
-
--border: 0 0% 14.9%;
|
|
171
|
-
--input: 0 0% 14.9%;
|
|
172
|
-
--ring: 0 0% 83.1%;
|
|
173
|
-
--chart-1: 220 70% 50%;
|
|
174
|
-
--chart-2: 160 60% 45%;
|
|
175
|
-
--chart-3: 30 80% 55%;
|
|
176
|
-
--chart-4: 280 65% 60%;
|
|
177
|
-
--chart-5: 340 75% 55%;
|
|
178
|
-
}
|