@lapikit/repl 0.0.0-insiders.39691bf → 0.0.0-insiders.417ad1f
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 +11 -11
- package/dist/Repl.svelte +75 -33
- package/dist/Toolbar.svelte +34 -27
- package/dist/Toolbar.svelte.d.ts +1 -1
- package/dist/pkg/bun.svg +1 -0
- package/dist/pkg/npm.svg +10 -0
- package/dist/pkg/yarn.svg +2 -0
- package/dist/types.d.ts +3 -0
- package/dist/utils.d.ts +3 -0
- package/dist/utils.js +8 -0
- package/package.json +2 -2
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { FilesProps } from './types.js';
|
|
3
|
-
import { dictionaryIcons } from './utils.js';
|
|
3
|
+
import { dictionaryIcons, dictionaryPkgIcons } from './utils.js';
|
|
4
4
|
|
|
5
5
|
let { files, activeIndex = $bindable(), modeState, viewState }: FilesProps = $props();
|
|
6
6
|
</script>
|
|
@@ -16,7 +16,9 @@
|
|
|
16
16
|
class:active={activeIndex === index}
|
|
17
17
|
onclick={() => (activeIndex = index)}
|
|
18
18
|
>
|
|
19
|
-
{#if
|
|
19
|
+
{#if dictionaryPkgIcons[file.name.toLowerCase()]}
|
|
20
|
+
<img src={dictionaryPkgIcons[file.name.toLowerCase()]} alt="{file.name} icon" />
|
|
21
|
+
{:else if file.lang && dictionaryIcons[file.lang]}
|
|
20
22
|
<img src={dictionaryIcons[file.lang]} alt="{file.lang} icon" />
|
|
21
23
|
{/if}
|
|
22
24
|
<span>{file.name}</span>
|
|
@@ -28,19 +30,15 @@
|
|
|
28
30
|
<style>
|
|
29
31
|
div {
|
|
30
32
|
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
33
|
overflow-x: auto;
|
|
36
34
|
}
|
|
37
35
|
|
|
38
36
|
button {
|
|
39
37
|
display: flex;
|
|
40
38
|
align-items: center;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
font-size:
|
|
39
|
+
padding: 9px 4px;
|
|
40
|
+
gap: var(--kit-repl-spacing);
|
|
41
|
+
font-size: var(--kit-repl-shiki-size);
|
|
44
42
|
transition: all 0.2s ease;
|
|
45
43
|
border: 0;
|
|
46
44
|
white-space: nowrap;
|
|
@@ -52,13 +50,15 @@
|
|
|
52
50
|
button img {
|
|
53
51
|
width: 16px;
|
|
54
52
|
height: 16px;
|
|
53
|
+
border: 0;
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
button:hover {
|
|
58
|
-
border-color:
|
|
57
|
+
border-color: var(--kit-color-accent, var(--kit-repl-secondary));
|
|
59
58
|
}
|
|
60
59
|
|
|
61
60
|
button.active {
|
|
62
|
-
border-color:
|
|
61
|
+
border-color: var(--kit-color-accent, var(--kit-repl-primary));
|
|
62
|
+
color: var(--kit-color-accent, var(--kit-repl-primary));
|
|
63
63
|
}
|
|
64
64
|
</style>
|
package/dist/Repl.svelte
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { copyToClipboard } from './utils.js';
|
|
3
3
|
import { getHighlighterSingleton } from './shiki.js';
|
|
4
|
+
import { createTheme } from 'lapikit/actions';
|
|
4
5
|
import type { FileItem, ReplProps } from './types.js';
|
|
5
6
|
|
|
6
7
|
// components
|
|
@@ -18,7 +19,19 @@
|
|
|
18
19
|
let modeState: 'code' | 'playground' | 'mixed' = $state('code');
|
|
19
20
|
let copyState = $state(false);
|
|
20
21
|
let viewState: 'code' | 'preview' = $state('code');
|
|
21
|
-
|
|
22
|
+
|
|
23
|
+
// theme: mirrors the ambient lapikit theme (light/dark/system) until the
|
|
24
|
+
// toolbar toggle is used. The override only applies to the rendered
|
|
25
|
+
// children/preview area — the toolbar and shiki code always follow
|
|
26
|
+
// the ambient theme.
|
|
27
|
+
const theme = createTheme();
|
|
28
|
+
let themeOverridden = $state(false);
|
|
29
|
+
let themeState = $derived<'light' | 'dark'>(theme.active === 'dark' ? 'dark' : 'light');
|
|
30
|
+
|
|
31
|
+
function toggleTheme() {
|
|
32
|
+
themeOverridden = true;
|
|
33
|
+
theme.set(themeState === 'dark' ? 'light' : 'dark');
|
|
34
|
+
}
|
|
22
35
|
|
|
23
36
|
let codeHTML = $state<string | null>(null);
|
|
24
37
|
let activeFileIndex = $state(0);
|
|
@@ -91,7 +104,6 @@
|
|
|
91
104
|
|
|
92
105
|
$effect(() => {
|
|
93
106
|
const file = activeFile;
|
|
94
|
-
const theme = themeState;
|
|
95
107
|
|
|
96
108
|
if (file?.content) {
|
|
97
109
|
codeHTML = null;
|
|
@@ -100,7 +112,8 @@
|
|
|
100
112
|
(async () => {
|
|
101
113
|
const highlighter = await getHighlighterSingleton();
|
|
102
114
|
const html = highlighter.codeToHtml(file.content, {
|
|
103
|
-
|
|
115
|
+
themes: { light: 'github-light', dark: 'github-dark' },
|
|
116
|
+
defaultColor: false,
|
|
104
117
|
lang: file.lang || language
|
|
105
118
|
});
|
|
106
119
|
codeHTML = html;
|
|
@@ -112,11 +125,7 @@
|
|
|
112
125
|
<div class="kit-repl">
|
|
113
126
|
{#if presentation}
|
|
114
127
|
<div class="kit-repl-content" class:kit-repl-content--playground={presentation}>
|
|
115
|
-
<div
|
|
116
|
-
class="wrapper-playground"
|
|
117
|
-
class:dark={themeState === 'dark'}
|
|
118
|
-
class:light={themeState === 'light'}
|
|
119
|
-
>
|
|
128
|
+
<div class="wrapper-playground" use:theme.action={{ overridden: themeOverridden }}>
|
|
120
129
|
{@render children?.()}
|
|
121
130
|
</div>
|
|
122
131
|
</div>
|
|
@@ -127,17 +136,23 @@
|
|
|
127
136
|
{title}
|
|
128
137
|
{language}
|
|
129
138
|
{presentation}
|
|
139
|
+
{files}
|
|
140
|
+
{themeState}
|
|
141
|
+
onToggleTheme={toggleTheme}
|
|
130
142
|
bind:copyState
|
|
131
143
|
bind:viewState
|
|
132
|
-
bind:themeState
|
|
133
144
|
bind:modeState
|
|
134
|
-
|
|
145
|
+
>
|
|
146
|
+
<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
|
|
147
|
+
</Toolbar>
|
|
135
148
|
|
|
136
|
-
{#if modeState !== 'code'}
|
|
149
|
+
<!-- {#if modeState !== 'code'}
|
|
137
150
|
<hr />
|
|
138
|
-
{/if}
|
|
151
|
+
{/if} -->
|
|
139
152
|
|
|
140
|
-
|
|
153
|
+
{#if title}
|
|
154
|
+
<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
|
|
155
|
+
{/if}
|
|
141
156
|
|
|
142
157
|
<div
|
|
143
158
|
class="kit-repl-content"
|
|
@@ -153,11 +168,7 @@
|
|
|
153
168
|
{/if}
|
|
154
169
|
</div>
|
|
155
170
|
{:else}
|
|
156
|
-
<div
|
|
157
|
-
class="kit-repl-wrapper-playground"
|
|
158
|
-
class:dark={themeState === 'dark'}
|
|
159
|
-
class:light={themeState === 'light'}
|
|
160
|
-
>
|
|
171
|
+
<div class="kit-repl-wrapper-playground" use:theme.action={{ overridden: themeOverridden }}>
|
|
161
172
|
{@render children?.()}
|
|
162
173
|
</div>
|
|
163
174
|
{/if}
|
|
@@ -168,41 +179,52 @@
|
|
|
168
179
|
<style>
|
|
169
180
|
.kit-repl {
|
|
170
181
|
/* ui */
|
|
171
|
-
--kit-repl-spacing:
|
|
172
|
-
--kit-repl-radius:
|
|
182
|
+
--kit-repl-spacing: var(--kit-space-default, 4px);
|
|
183
|
+
--kit-repl-radius: var(--kit-shape-md, 10px);
|
|
173
184
|
|
|
174
185
|
/* shiki override */
|
|
175
|
-
--kit-repl-shiki-size:
|
|
186
|
+
--kit-repl-shiki-size: var(--kit-font-xs, 13px);
|
|
176
187
|
--kit-repl-shiki-tab-size: 2;
|
|
177
188
|
|
|
178
189
|
/* colors */
|
|
179
|
-
--kit-repl-
|
|
180
|
-
--kit-repl-
|
|
181
|
-
--kit-repl-
|
|
182
|
-
--kit-repl-
|
|
190
|
+
--kit-repl-playground: var(--kit-color-surface, #fbfbfb);
|
|
191
|
+
--kit-repl-background: var(--kit-color-surface-1, #f9f9f9);
|
|
192
|
+
--kit-repl-border-color: var(--kit-color-fill, #ebebeb);
|
|
193
|
+
--kit-repl-primary: var(--kit-color-text, #0d0d34);
|
|
194
|
+
--kit-repl-secondary: var(--kit-color-text-muted, #8f8f8f);
|
|
183
195
|
}
|
|
184
196
|
.kit-repl-container {
|
|
185
197
|
background-color: var(--kit-repl-background);
|
|
186
198
|
border-radius: var(--kit-repl-radius);
|
|
187
|
-
border:
|
|
199
|
+
border: 1px solid var(--kit-repl-border-color);
|
|
188
200
|
}
|
|
189
201
|
|
|
190
202
|
.kit-repl-container :global(pre) {
|
|
191
203
|
background-color: var(--kit-repl-background) !important;
|
|
204
|
+
border: 0 !important;
|
|
205
|
+
border-radius: 0 !important;
|
|
206
|
+
border-bottom-left-radius: var(--kit-repl-radius) !important;
|
|
207
|
+
border-bottom-right-radius: var(--kit-repl-radius) !important;
|
|
208
|
+
padding: 10px 0 !important;
|
|
209
|
+
margin-bottom: 0 !important;
|
|
210
|
+
margin-top: 0 !important;
|
|
211
|
+
font-size: var(--kit-repl-shiki-size) !important;
|
|
192
212
|
}
|
|
193
213
|
|
|
194
214
|
.kit-repl-content {
|
|
195
215
|
display: flow-root;
|
|
196
|
-
|
|
197
|
-
|
|
216
|
+
/* padding-left: calc(var(--kit-repl-spacing) * 2); */
|
|
217
|
+
/* margin-top: calc(var(--kit-repl-spacing) * 0); */
|
|
218
|
+
/* padding-right: calc(10 * var(--kit-repl-spacing));
|
|
198
219
|
padding-left: calc(5 * var(--kit-repl-spacing));
|
|
199
220
|
padding-bottom: calc(4 * var(--kit-repl-spacing));
|
|
200
|
-
padding-top: calc(3 * var(--kit-repl-spacing));
|
|
221
|
+
padding-top: calc(3 * var(--kit-repl-spacing)); */
|
|
201
222
|
position: relative;
|
|
202
223
|
}
|
|
203
224
|
|
|
204
225
|
.kit-repl-content--code {
|
|
205
226
|
padding-top: 0;
|
|
227
|
+
padding-left: calc(var(--kit-repl-spacing) * 2);
|
|
206
228
|
}
|
|
207
229
|
|
|
208
230
|
.kit-repl-content--playground {
|
|
@@ -210,14 +232,14 @@
|
|
|
210
232
|
padding-bottom: calc(10 * var(--kit-repl-spacing));
|
|
211
233
|
}
|
|
212
234
|
|
|
213
|
-
hr {
|
|
235
|
+
/* hr {
|
|
214
236
|
max-width: calc(100% - 2.5rem);
|
|
215
237
|
margin-inline-start: calc(2.5rem / 2);
|
|
216
238
|
display: block;
|
|
217
239
|
border: thin solid var(--kit-repl-border-color);
|
|
218
240
|
margin-top: 0;
|
|
219
241
|
margin-bottom: 0;
|
|
220
|
-
}
|
|
242
|
+
} */
|
|
221
243
|
|
|
222
244
|
.kit-repl-raw {
|
|
223
245
|
font-size: var(--kit-repl-shiki-size);
|
|
@@ -237,9 +259,29 @@
|
|
|
237
259
|
word-break: break-word;
|
|
238
260
|
}
|
|
239
261
|
|
|
262
|
+
/* shiki dual-theme: follows the ambient lapikit theme (light/dark/system) */
|
|
263
|
+
.kit-repl-wrapper-highlight :global(.shiki),
|
|
264
|
+
.kit-repl-wrapper-highlight :global(.shiki span) {
|
|
265
|
+
color: var(--shiki-light);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
:global([data-kit-theme='dark']) .kit-repl-wrapper-highlight :global(.shiki),
|
|
269
|
+
:global([data-kit-theme='dark']) .kit-repl-wrapper-highlight :global(.shiki span) {
|
|
270
|
+
color: var(--shiki-dark);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
@media (prefers-color-scheme: dark) {
|
|
274
|
+
:global([data-kit-theme='system']) .kit-repl-wrapper-highlight :global(.shiki),
|
|
275
|
+
:global([data-kit-theme='system']) .kit-repl-wrapper-highlight :global(.shiki span) {
|
|
276
|
+
color: var(--shiki-dark);
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
240
280
|
div.kit-repl-container .kit-repl-wrapper-playground {
|
|
241
|
-
background-color: var(--kit-repl-
|
|
242
|
-
border-radius: var(--kit-repl-radius);
|
|
281
|
+
background-color: var(--kit-repl-playground);
|
|
282
|
+
/* border-radius: var(--kit-repl-radius); */
|
|
283
|
+
border-bottom-left-radius: var(--kit-repl-radius);
|
|
284
|
+
border-bottom-right-radius: var(--kit-repl-radius);
|
|
243
285
|
padding: calc(4 * var(--kit-repl-spacing));
|
|
244
286
|
}
|
|
245
287
|
</style>
|
package/dist/Toolbar.svelte
CHANGED
|
@@ -5,12 +5,15 @@
|
|
|
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
|
-
themeState
|
|
15
|
+
themeState,
|
|
16
|
+
onToggleTheme,
|
|
14
17
|
modeState = $bindable()
|
|
15
18
|
}: ToolbarProps = $props();
|
|
16
19
|
|
|
@@ -20,24 +23,26 @@
|
|
|
20
23
|
</script>
|
|
21
24
|
|
|
22
25
|
<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}
|
|
26
|
+
{#if title}
|
|
27
|
+
<div class="kit-repl--toolbar-title" class:kit-repl--toolbar-title--title={title}>
|
|
29
28
|
<span>{title}</span>
|
|
30
|
-
|
|
29
|
+
</div>
|
|
30
|
+
{:else if files && files.length > 1}
|
|
31
|
+
<div class="kit-repl--toolbar-files">
|
|
32
|
+
{@render children?.()}
|
|
33
|
+
</div>
|
|
34
|
+
{:else if language}
|
|
35
|
+
<div class="kit-repl--toolbar-title" class:kit-repl--toolbar-title--language={language}>
|
|
31
36
|
<span>{languageKey}</span>
|
|
32
|
-
|
|
33
|
-
|
|
37
|
+
</div>
|
|
38
|
+
{/if}
|
|
34
39
|
|
|
35
40
|
<div class="kit-repl--toolbar-actions">
|
|
36
41
|
{#if (modeState !== 'code' && viewState === 'preview') || presentation}
|
|
37
42
|
<Button
|
|
38
43
|
aria-label={themeState === 'light' ? 'Switch to dark theme' : 'Switch to light theme'}
|
|
39
44
|
aria-pressed={themeState === 'dark'}
|
|
40
|
-
onclick={() => (
|
|
45
|
+
onclick={() => onToggleTheme?.()}
|
|
41
46
|
>
|
|
42
47
|
{#if themeState === 'light'}
|
|
43
48
|
<Moon />
|
|
@@ -54,9 +59,9 @@
|
|
|
54
59
|
onclick={() => (viewState = viewState === 'code' ? 'preview' : 'code')}
|
|
55
60
|
>
|
|
56
61
|
{#if viewState === 'code'}
|
|
57
|
-
<Code />
|
|
58
|
-
{:else}
|
|
59
62
|
<Codesandbox />
|
|
63
|
+
{:else}
|
|
64
|
+
<Code />
|
|
60
65
|
{/if}
|
|
61
66
|
</Button>
|
|
62
67
|
{/if}
|
|
@@ -78,15 +83,14 @@
|
|
|
78
83
|
|
|
79
84
|
<style>
|
|
80
85
|
.kit-repl--toolbar {
|
|
81
|
-
display:
|
|
86
|
+
display: grid;
|
|
82
87
|
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);
|
|
88
|
+
grid-template-columns: 1fr auto;
|
|
89
|
+
padding-left: calc(var(--kit-repl-spacing) * 2);
|
|
90
|
+
background-color: color-mix(in oklab, var(--kit-repl-background) 95%, black);
|
|
88
91
|
border-top-left-radius: var(--kit-repl-radius);
|
|
89
92
|
border-top-right-radius: var(--kit-repl-radius);
|
|
93
|
+
gap: var(--kit-repl-spacing);
|
|
90
94
|
min-height: 36px;
|
|
91
95
|
}
|
|
92
96
|
|
|
@@ -99,17 +103,15 @@
|
|
|
99
103
|
}
|
|
100
104
|
|
|
101
105
|
.kit-repl--toolbar-title--language {
|
|
102
|
-
font-size:
|
|
103
|
-
line-height:
|
|
104
|
-
|
|
105
|
-
color: #5d5d5d;
|
|
106
|
+
font-size: var(--kit-repl-shiki-size);
|
|
107
|
+
line-height: 1;
|
|
108
|
+
color: var(--kit-color-text-muted);
|
|
106
109
|
}
|
|
107
110
|
|
|
108
111
|
.kit-repl--toolbar-title--title {
|
|
109
|
-
font-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
color: #8f8f8f;
|
|
112
|
+
font-size: var(--kit-repl-shiki-size);
|
|
113
|
+
line-height: 1;
|
|
114
|
+
color: var(--kit-color-text-muted);
|
|
113
115
|
}
|
|
114
116
|
|
|
115
117
|
.kit-repl--toolbar .kit-repl--toolbar-actions {
|
|
@@ -117,4 +119,9 @@
|
|
|
117
119
|
align-items: center;
|
|
118
120
|
gap: calc(var(--kit-repl-spacing) * 2);
|
|
119
121
|
}
|
|
122
|
+
|
|
123
|
+
.kit-repl--toolbar .kit-repl--toolbar-files {
|
|
124
|
+
width: 100%;
|
|
125
|
+
overflow-x: auto;
|
|
126
|
+
}
|
|
120
127
|
</style>
|
package/dist/Toolbar.svelte.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ToolbarProps } from './types.js';
|
|
2
|
-
declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "modeState" | "viewState" | "copyState"
|
|
2
|
+
declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "modeState" | "viewState" | "copyState">;
|
|
3
3
|
type Toolbar = ReturnType<typeof Toolbar>;
|
|
4
4
|
export default Toolbar;
|
package/dist/pkg/bun.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M113.744 41.999a18.558 18.558 0 0 0-.8-.772c-.272-.246-.528-.524-.8-.771s-.528-.525-.8-.771c-.272-.247-.528-.525-.8-.772s-.528-.524-.8-.771-.528-.525-.8-.772-.528-.524-.8-.771c7.936 7.52 12.483 17.752 12.656 28.481 0 25.565-26.912 46.363-60 46.363-18.528 0-35.104-6.526-46.128-16.756l.8.772.8.771.8.772.8.771.8.772.8.771.8.771c11.008 10.662 27.952 17.527 46.928 17.527 33.088 0 60-20.797 60-46.285 0-10.893-4.864-21.215-13.456-29.33z"/><path fill="#fbf0df" d="M116.8 65.08c0 23.467-25.072 42.49-56 42.49s-56-19.023-56-42.49c0-14.55 9.6-27.401 24.352-35.023C43.904 22.435 53.088 14.628 60.8 14.628S75.104 21 92.448 30.058C107.2 37.677 116.8 50.53 116.8 65.08Z"/><path fill="#f6dece" d="M116.8 65.08a32.314 32.314 0 0 0-1.28-8.918c-4.368 51.377-69.36 53.846-94.912 38.48 11.486 8.584 25.66 13.144 40.192 12.928 30.88 0 56-19.054 56-42.49z"/><path fill="#fffefc" d="M39.248 27.234c7.152-4.135 16.656-11.896 26-11.911a15.372 15.372 0 0 0-4.448-.695c-3.872 0-8 1.93-13.2 4.83-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08v1.836c9.696-33.033 27.312-35.547 34.448-39.682z"/><path fill="#ccbea7" d="M56.192 18.532A24.553 24.553 0 0 1 53.867 29.1a25.407 25.407 0 0 1-6.683 8.671c-.448.386-.096 1.127.48.91 5.392-2.02 12.672-8.068 9.6-20.272-.128-.695-1.072-.51-1.072.123zm3.632 0a24.474 24.474 0 0 1 3.646 10.12c.445 3.587.08 7.224-1.07 10.662-.192.54.496 1.003.88.556 3.504-4.32 6.56-12.899-2.592-22.156-.464-.4-1.184.216-.864.756zm4.416-.262a25.702 25.702 0 0 1 7.521 7.925A24.71 24.71 0 0 1 75.2 36.414c-.016.13.02.26.101.365a.543.543 0 0 0 .718.117.509.509 0 0 0 .221-.313c1.472-5.384.64-14.564-11.472-19.332-.64-.246-1.056.587-.528.957zM34.704 34.315a27.418 27.418 0 0 0 9.91-5.222 26.262 26.262 0 0 0 6.842-8.663c.288-.556 1.2-.34 1.056.277-2.768 12.343-12.032 14.92-17.792 14.58-.608.016-.592-.802-.016-.972z"/><path d="M60.8 111.443c-33.088 0-60-20.798-60-46.363 0-15.429 9.888-29.823 26.448-38.448 4.8-2.469 8.912-4.953 12.576-7.128 2.016-1.203 3.92-2.33 5.76-3.379C51.2 12.916 56 10.771 60.8 10.771c4.8 0 8.992 1.852 14.24 4.845 1.6.88 3.2 1.836 4.912 2.885 3.984 2.376 8.48 5.06 14.4 8.131 16.56 8.625 26.448 23.004 26.448 38.448 0 25.565-26.912 46.363-60 46.363zm0-96.814c-3.872 0-8 1.928-13.2 4.829-1.808 1.018-3.68 2.144-5.664 3.317-3.728 2.222-8 4.736-12.8 7.251C13.904 37.972 4.8 51.071 4.8 65.08c0 23.436 25.12 42.506 56 42.506s56-19.07 56-42.506c0-14.01-9.104-27.108-24.352-35.023-6.048-3.086-10.768-5.986-14.592-8.27-1.744-1.033-3.344-1.99-4.8-2.838-4.848-2.778-8.384-4.32-12.256-4.32z"/><path fill="#b71422" d="M72.08 76.343c-.719 2.839-2.355 5.383-4.672 7.267a11.07 11.07 0 0 1-6.4 2.9 11.13 11.13 0 0 1-6.608-2.9c-2.293-1.892-3.906-4.436-4.608-7.267a1.073 1.073 0 0 1 .05-.5 1.11 1.11 0 0 1 .272-.428 1.19 1.19 0 0 1 .958-.322h19.744a1.185 1.185 0 0 1 .947.33 1.073 1.073 0 0 1 .317.92z"/><path fill="#ff6164" d="M54.4 83.733a11.24 11.24 0 0 0 6.592 2.932 11.239 11.239 0 0 0 6.576-2.932 16.652 16.652 0 0 0 1.6-1.65 10.904 10.904 0 0 0-3.538-2.564 11.26 11.26 0 0 0-4.302-1 10.121 10.121 0 0 0-4.549 1.192 9.71 9.71 0 0 0-3.451 3.097c.368.323.688.632 1.072.925z"/><path d="M54.656 82.514a8.518 8.518 0 0 1 2.97-2.347 8.836 8.836 0 0 1 3.734-.862 9.78 9.78 0 0 1 6.4 2.608c.368-.386.72-.787 1.056-1.188-2.035-1.87-4.726-2.933-7.536-2.978a10.487 10.487 0 0 0-4.335.975 10.125 10.125 0 0 0-3.489 2.666c.378.396.779.772 1.2 1.126z"/><path d="M60.944 87.436a12.078 12.078 0 0 1-7.12-3.086c-2.477-2.02-4.22-4.75-4.976-7.791-.054-.27-.045-.55.027-.817a1.83 1.83 0 0 1 .389-.726 2.25 2.25 0 0 1 .81-.595 2.32 2.32 0 0 1 .998-.192h19.744c.343-.007.683.06.996.196a2.3 2.3 0 0 1 .812.591c.182.212.313.46.382.728.07.267.076.545.018.815-.756 3.042-2.5 5.771-4.976 7.791a12.078 12.078 0 0 1-7.104 3.086zm-9.872-11.417c-.256 0-.32.108-.336.139.676 2.638 2.206 4.999 4.368 6.742a10.122 10.122 0 0 0 5.84 2.7 10.207 10.207 0 0 0 5.84-2.67c2.155-1.745 3.679-4.106 4.352-6.741a.333.333 0 0 0-.14-.113.348.348 0 0 0-.18-.026z"/><path fill="#febbd0" d="M85.152 77.3c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307zm-48.432 0c5.17 0 9.36-2.377 9.36-5.308s-4.19-5.307-9.36-5.307c-5.17 0-9.36 2.376-9.36 5.307 0 2.931 4.19 5.307 9.36 5.307z"/><path d="M41.12 69.863a9.052 9.052 0 0 0 4.902-1.425 8.578 8.578 0 0 0 3.254-3.812 8.22 8.22 0 0 0 .508-4.913 8.41 8.41 0 0 0-2.408-4.357 8.92 8.92 0 0 0-4.514-2.33 9.12 9.12 0 0 0-5.096.48 8.755 8.755 0 0 0-3.96 3.131 8.287 8.287 0 0 0-1.486 4.725c0 2.252.927 4.412 2.577 6.005 1.65 1.594 3.888 2.492 6.223 2.496zm39.632 0a9.054 9.054 0 0 0 4.915-1.403 8.582 8.582 0 0 0 3.275-3.802 8.22 8.22 0 0 0 .528-4.917 8.408 8.408 0 0 0-2.398-4.368 8.92 8.92 0 0 0-4.512-2.344 9.12 9.12 0 0 0-5.103.473 8.756 8.756 0 0 0-3.967 3.13 8.287 8.287 0 0 0-1.49 4.73c-.004 2.245.914 4.4 2.555 5.994 1.64 1.593 3.869 2.495 6.197 2.507z"/><path fill="#fff" d="M38.4 61.902a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .844.347 1.654.964 2.253a3.374 3.374 0 0 0 2.332.94zm39.632 0a3.4 3.4 0 0 0 1.844-.531c.547-.35.974-.847 1.227-1.43a3.088 3.088 0 0 0 .195-1.847 3.16 3.16 0 0 0-.902-1.639 3.351 3.351 0 0 0-1.696-.878 3.426 3.426 0 0 0-1.916.179 3.29 3.29 0 0 0-1.489 1.176 3.113 3.113 0 0 0-.559 1.776c0 .84.342 1.644.953 2.242.61.598 1.44.94 2.311.952z"/></svg>
|
package/dist/pkg/npm.svg
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
3
|
+
<svg width="800px" height="800px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
|
4
|
+
<g>
|
|
5
|
+
<polygon fill="#C12127" points="0 256 0 0 256 0 256 256">
|
|
6
|
+
|
|
7
|
+
<polygon fill="#FFFFFF" points="48 48 208 48 208 208 176 208 176 80 128 80 128 208 48 208">
|
|
8
|
+
|
|
9
|
+
</g>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
2
|
+
<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>file_type_yarn</title><path d="M28.208,24.409a10.493,10.493,0,0,0-3.959,1.822,23.743,23.743,0,0,1-5.835,2.642,1.632,1.632,0,0,1-.983.55A62.228,62.228,0,0,1,10.984,30c-1.163.009-1.876-.3-2.074-.776a1.573,1.573,0,0,1,.866-2.074,3.759,3.759,0,0,1-.514-.379c-.171-.171-.352-.514-.406-.388-.225.55-.343,1.894-.947,2.5-.83.839-2.4.559-3.328.072-1.019-.541.072-1.813.072-1.813a.73.73,0,0,1-.992-.343,4.847,4.847,0,0,1-.667-2.949,5.374,5.374,0,0,1,1.749-2.895,9.334,9.334,0,0,1,.658-4.4,10.445,10.445,0,0,1,3.165-3.661S6.628,10.747,7.35,8.817c.469-1.262.658-1.253.812-1.308a3.633,3.633,0,0,0,1.452-.857,5.265,5.265,0,0,1,4.41-1.7S15.2,1.4,16.277,2.09a18.349,18.349,0,0,1,1.533,2.886s1.281-.748,1.425-.469a11.334,11.334,0,0,1,.523,6.132,14.01,14.01,0,0,1-2.6,5.411c-.135.225,1.551.938,2.615,3.887.983,2.7.108,4.96.262,5.212.027.045.036.063.036.063s1.127.09,3.391-1.308A8.5,8.5,0,0,1,27.739,22.3a1.081,1.081,0,0,1,.469,2.11Z" style="fill:#2188b6"/></svg>
|
package/dist/types.d.ts
CHANGED
|
@@ -12,7 +12,10 @@ export interface ToolbarProps {
|
|
|
12
12
|
presentation?: boolean;
|
|
13
13
|
viewState?: 'code' | 'preview';
|
|
14
14
|
themeState?: 'light' | 'dark';
|
|
15
|
+
onToggleTheme?: () => void;
|
|
15
16
|
modeState?: 'code' | 'playground' | 'mixed';
|
|
17
|
+
children?: Snippet;
|
|
18
|
+
files?: FileItem[];
|
|
16
19
|
}
|
|
17
20
|
export interface FilesProps {
|
|
18
21
|
files?: FileItem[];
|
package/dist/utils.d.ts
CHANGED
package/dist/utils.js
CHANGED
|
@@ -4,6 +4,9 @@ import svelte from './languages/svelte.svg';
|
|
|
4
4
|
import css from './languages/css.svg';
|
|
5
5
|
import html from './languages/html.svg';
|
|
6
6
|
import shell from './languages/shell.svg';
|
|
7
|
+
import npm from './pkg/npm.svg';
|
|
8
|
+
import yarn from './pkg/yarn.svg';
|
|
9
|
+
import bun from './pkg/bun.svg';
|
|
7
10
|
export const copyToClipboard = (value) => {
|
|
8
11
|
if (navigator.clipboard && window.isSecureContext) {
|
|
9
12
|
navigator.clipboard
|
|
@@ -59,3 +62,8 @@ export const dictionaryIcons = {
|
|
|
59
62
|
htm: html,
|
|
60
63
|
json: shell
|
|
61
64
|
};
|
|
65
|
+
export const dictionaryPkgIcons = {
|
|
66
|
+
npm,
|
|
67
|
+
yarn,
|
|
68
|
+
bun
|
|
69
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lapikit/repl",
|
|
3
|
-
"version": "0.0.0-insiders.
|
|
3
|
+
"version": "0.0.0-insiders.417ad1f",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@sveltejs/kit": "^2.0.0",
|
|
50
50
|
"svelte": "^5.0.0",
|
|
51
|
-
"lapikit": "^0.
|
|
51
|
+
"lapikit": "^0.6.7"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@eslint/compat": "^1.4.0",
|