@lapikit/repl 0.0.0-insiders.ab10c58 → 0.0.0-insiders.b0e08d5
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/Button.svelte +2 -2
- package/dist/Files.svelte +6 -9
- package/dist/Repl.svelte +22 -15
- package/dist/Toolbar.svelte +29 -23
- package/dist/types.d.ts +2 -0
- package/package.json +1 -1
package/dist/Button.svelte
CHANGED
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
display: flex;
|
|
24
24
|
align-self: center;
|
|
25
25
|
justify-content: center;
|
|
26
|
-
font-size:
|
|
27
|
-
border-radius:
|
|
26
|
+
font-size: var(--kit-repl-shiki-size);
|
|
27
|
+
border-radius: var(--kit-repl-radius);
|
|
28
28
|
transition: background-color 0.2s ease;
|
|
29
29
|
padding: 8px;
|
|
30
30
|
color: var(--kit-repl-secondary);
|
package/dist/Files.svelte
CHANGED
|
@@ -28,19 +28,15 @@
|
|
|
28
28
|
<style>
|
|
29
29
|
div {
|
|
30
30
|
display: flex;
|
|
31
|
-
gap: calc(var(--kit-repl-spacing) * 2);
|
|
32
|
-
padding-left: calc(5 * var(--kit-repl-spacing));
|
|
33
|
-
padding-right: calc(5 * var(--kit-repl-spacing));
|
|
34
|
-
padding-block: calc(var(--kit-repl-spacing) * 2);
|
|
35
31
|
overflow-x: auto;
|
|
36
32
|
}
|
|
37
33
|
|
|
38
34
|
button {
|
|
39
35
|
display: flex;
|
|
40
36
|
align-items: center;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
font-size:
|
|
37
|
+
padding: 9px 4px;
|
|
38
|
+
gap: var(--kit-repl-spacing);
|
|
39
|
+
font-size: var(--kit-repl-shiki-size);
|
|
44
40
|
transition: all 0.2s ease;
|
|
45
41
|
border: 0;
|
|
46
42
|
white-space: nowrap;
|
|
@@ -55,10 +51,11 @@
|
|
|
55
51
|
}
|
|
56
52
|
|
|
57
53
|
button:hover {
|
|
58
|
-
border-color:
|
|
54
|
+
border-color: var(--kit-color-accent, var(--kit-repl-secondary));
|
|
59
55
|
}
|
|
60
56
|
|
|
61
57
|
button.active {
|
|
62
|
-
border-color:
|
|
58
|
+
border-color: var(--kit-color-accent, var(--kit-repl-primary));
|
|
59
|
+
color: var(--kit-color-accent, var(--kit-repl-primary));
|
|
63
60
|
}
|
|
64
61
|
</style>
|
package/dist/Repl.svelte
CHANGED
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
|
|
92
92
|
$effect(() => {
|
|
93
93
|
const file = activeFile;
|
|
94
|
-
const theme = themeState;
|
|
94
|
+
// const theme = themeState;
|
|
95
95
|
|
|
96
96
|
if (file?.content) {
|
|
97
97
|
codeHTML = null;
|
|
@@ -100,7 +100,8 @@
|
|
|
100
100
|
(async () => {
|
|
101
101
|
const highlighter = await getHighlighterSingleton();
|
|
102
102
|
const html = highlighter.codeToHtml(file.content, {
|
|
103
|
-
theme: theme === 'light' ? 'github-light' : 'github-dark',
|
|
103
|
+
// theme: theme === 'light' ? 'github-light' : 'github-dark',
|
|
104
|
+
theme: 'github-light',
|
|
104
105
|
lang: file.lang || language
|
|
105
106
|
});
|
|
106
107
|
codeHTML = html;
|
|
@@ -127,17 +128,22 @@
|
|
|
127
128
|
{title}
|
|
128
129
|
{language}
|
|
129
130
|
{presentation}
|
|
131
|
+
{files}
|
|
130
132
|
bind:copyState
|
|
131
133
|
bind:viewState
|
|
132
134
|
bind:themeState
|
|
133
135
|
bind:modeState
|
|
134
|
-
|
|
136
|
+
>
|
|
137
|
+
<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
|
|
138
|
+
</Toolbar>
|
|
135
139
|
|
|
136
140
|
{#if modeState !== 'code'}
|
|
137
141
|
<hr />
|
|
138
142
|
{/if}
|
|
139
143
|
|
|
140
|
-
|
|
144
|
+
{#if title}
|
|
145
|
+
<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
|
|
146
|
+
{/if}
|
|
141
147
|
|
|
142
148
|
<div
|
|
143
149
|
class="kit-repl-content"
|
|
@@ -168,23 +174,23 @@
|
|
|
168
174
|
<style>
|
|
169
175
|
.kit-repl {
|
|
170
176
|
/* ui */
|
|
171
|
-
--kit-repl-spacing:
|
|
172
|
-
--kit-repl-radius:
|
|
177
|
+
--kit-repl-spacing: var(--kit-space-default, 4px);
|
|
178
|
+
--kit-repl-radius: var(--kit-shape-md, 10px);
|
|
173
179
|
|
|
174
180
|
/* shiki override */
|
|
175
|
-
--kit-repl-shiki-size:
|
|
181
|
+
--kit-repl-shiki-size: var(--kit-font-xs, 13px);
|
|
176
182
|
--kit-repl-shiki-tab-size: 2;
|
|
177
183
|
|
|
178
184
|
/* colors */
|
|
179
|
-
--kit-repl-background: #f9f9f9;
|
|
180
|
-
--kit-repl-border-color: #ebebeb;
|
|
181
|
-
--kit-repl-primary: #0d0d34;
|
|
182
|
-
--kit-repl-secondary: #8f8f8f;
|
|
185
|
+
--kit-repl-background: var(--kit-color-surface-1, #f9f9f9);
|
|
186
|
+
--kit-repl-border-color: var(--kit-color-fill, #ebebeb);
|
|
187
|
+
--kit-repl-primary: var(--kit-color-text, #0d0d34);
|
|
188
|
+
--kit-repl-secondary: var(--kit-color-text-muted, #8f8f8f);
|
|
183
189
|
}
|
|
184
190
|
.kit-repl-container {
|
|
185
191
|
background-color: var(--kit-repl-background);
|
|
186
192
|
border-radius: var(--kit-repl-radius);
|
|
187
|
-
border:
|
|
193
|
+
border: 1px solid var(--kit-repl-border-color);
|
|
188
194
|
}
|
|
189
195
|
|
|
190
196
|
.kit-repl-container :global(pre) {
|
|
@@ -193,11 +199,12 @@
|
|
|
193
199
|
|
|
194
200
|
.kit-repl-content {
|
|
195
201
|
display: flow-root;
|
|
196
|
-
|
|
197
|
-
|
|
202
|
+
padding-left: calc(var(--kit-repl-spacing) * 2);
|
|
203
|
+
/* margin-top: calc(var(--kit-repl-spacing) * 0); */
|
|
204
|
+
/* padding-right: calc(10 * var(--kit-repl-spacing));
|
|
198
205
|
padding-left: calc(5 * var(--kit-repl-spacing));
|
|
199
206
|
padding-bottom: calc(4 * var(--kit-repl-spacing));
|
|
200
|
-
padding-top: calc(3 * var(--kit-repl-spacing));
|
|
207
|
+
padding-top: calc(3 * var(--kit-repl-spacing)); */
|
|
201
208
|
position: relative;
|
|
202
209
|
}
|
|
203
210
|
|
package/dist/Toolbar.svelte
CHANGED
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
import { Copy, Check, Code, Codesandbox, Moon, Sun } from '@lucide/svelte';
|
|
6
6
|
|
|
7
7
|
let {
|
|
8
|
+
children,
|
|
8
9
|
title,
|
|
9
10
|
language,
|
|
10
11
|
presentation,
|
|
12
|
+
files,
|
|
11
13
|
copyState = $bindable(),
|
|
12
14
|
viewState = $bindable(),
|
|
13
15
|
themeState = $bindable(),
|
|
@@ -20,17 +22,19 @@
|
|
|
20
22
|
</script>
|
|
21
23
|
|
|
22
24
|
<div class="kit-repl--toolbar">
|
|
23
|
-
|
|
24
|
-
class="kit-repl--toolbar-title"
|
|
25
|
-
class:kit-repl--toolbar-title--language={!title && language}
|
|
26
|
-
class:kit-repl--toolbar-title--title={title}
|
|
27
|
-
>
|
|
28
|
-
{#if title}
|
|
25
|
+
{#if title}
|
|
26
|
+
<div class="kit-repl--toolbar-title" class:kit-repl--toolbar-title--title={title}>
|
|
29
27
|
<span>{title}</span>
|
|
30
|
-
|
|
28
|
+
</div>
|
|
29
|
+
{:else if files && files.length > 1}
|
|
30
|
+
<div class="kit-repl--toolbar-files">
|
|
31
|
+
{@render children?.()}
|
|
32
|
+
</div>
|
|
33
|
+
{:else if language}
|
|
34
|
+
<div class="kit-repl--toolbar-title" class:kit-repl--toolbar-title--language={language}>
|
|
31
35
|
<span>{languageKey}</span>
|
|
32
|
-
|
|
33
|
-
|
|
36
|
+
</div>
|
|
37
|
+
{/if}
|
|
34
38
|
|
|
35
39
|
<div class="kit-repl--toolbar-actions">
|
|
36
40
|
{#if (modeState !== 'code' && viewState === 'preview') || presentation}
|
|
@@ -78,15 +82,14 @@
|
|
|
78
82
|
|
|
79
83
|
<style>
|
|
80
84
|
.kit-repl--toolbar {
|
|
81
|
-
display:
|
|
85
|
+
display: grid;
|
|
82
86
|
align-items: center;
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
padding-right: calc(var(--kit-repl-spacing) * 2);
|
|
87
|
-
padding-block: calc(var(--kit-repl-spacing) * 1.5);
|
|
87
|
+
grid-template-columns: 1fr auto;
|
|
88
|
+
padding-left: calc(var(--kit-repl-spacing) * 2);
|
|
89
|
+
background-color: color-mix(in oklab, var(--kit-repl-background) 95%, black);
|
|
88
90
|
border-top-left-radius: var(--kit-repl-radius);
|
|
89
91
|
border-top-right-radius: var(--kit-repl-radius);
|
|
92
|
+
gap: var(--kit-repl-spacing);
|
|
90
93
|
min-height: 36px;
|
|
91
94
|
}
|
|
92
95
|
|
|
@@ -99,17 +102,15 @@
|
|
|
99
102
|
}
|
|
100
103
|
|
|
101
104
|
.kit-repl--toolbar-title--language {
|
|
102
|
-
font-size:
|
|
103
|
-
line-height:
|
|
104
|
-
|
|
105
|
-
color: #5d5d5d;
|
|
105
|
+
font-size: var(--kit-repl-shiki-size);
|
|
106
|
+
line-height: 1;
|
|
107
|
+
color: var(--kit-color-text-muted);
|
|
106
108
|
}
|
|
107
109
|
|
|
108
110
|
.kit-repl--toolbar-title--title {
|
|
109
|
-
font-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
color: #8f8f8f;
|
|
111
|
+
font-size: var(--kit-repl-shiki-size);
|
|
112
|
+
line-height: 1;
|
|
113
|
+
color: var(--kit-color-text-muted);
|
|
113
114
|
}
|
|
114
115
|
|
|
115
116
|
.kit-repl--toolbar .kit-repl--toolbar-actions {
|
|
@@ -117,4 +118,9 @@
|
|
|
117
118
|
align-items: center;
|
|
118
119
|
gap: calc(var(--kit-repl-spacing) * 2);
|
|
119
120
|
}
|
|
121
|
+
|
|
122
|
+
.kit-repl--toolbar .kit-repl--toolbar-files {
|
|
123
|
+
width: 100%;
|
|
124
|
+
overflow-x: auto;
|
|
125
|
+
}
|
|
120
126
|
</style>
|
package/dist/types.d.ts
CHANGED