@lapikit/repl 0.0.0-insiders.5430042 → 0.0.0-insiders.5b53346

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.
@@ -23,8 +23,8 @@
23
23
  display: flex;
24
24
  align-self: center;
25
25
  justify-content: center;
26
- font-size: 0.875rem;
27
- border-radius: 0.375rem;
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 file.lang && dictionaryIcons[file.lang]}
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
- gap: calc(var(--kit-repl-spacing) * 2);
42
- padding: calc(var(--kit-repl-spacing) * 2) calc(var(--kit-repl-spacing) * 3);
43
- font-size: 0.875rem;
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: #cfcfcf;
57
+ border-color: var(--kit-color-accent, var(--kit-repl-secondary));
59
58
  }
60
59
 
61
60
  button.active {
62
- border-color: #000000;
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
@@ -20,7 +20,7 @@
20
20
  let viewState: 'code' | 'preview' = $state('code');
21
21
  let themeState: 'light' | 'dark' = $state('light');
22
22
 
23
- let codeHTML = $state('');
23
+ let codeHTML = $state<string | null>(null);
24
24
  let activeFileIndex = $state(0);
25
25
 
26
26
  let files = $derived.by<FileItem[]>(() => {
@@ -91,18 +91,18 @@
91
91
 
92
92
  $effect(() => {
93
93
  const file = activeFile;
94
- const theme = themeState;
95
94
 
96
95
  if (file?.content) {
96
+ codeHTML = null;
97
+ language = file.lang || 'sh';
98
+
97
99
  (async () => {
98
100
  const highlighter = await getHighlighterSingleton();
99
-
100
- language = file.lang || 'sh';
101
101
  const html = highlighter.codeToHtml(file.content, {
102
- theme: theme === 'light' ? 'github-light' : 'github-dark',
102
+ themes: { light: 'github-light', dark: 'github-dark' },
103
+ defaultColor: false,
103
104
  lang: file.lang || language
104
105
  });
105
-
106
106
  codeHTML = html;
107
107
  })();
108
108
  }
@@ -127,25 +127,36 @@
127
127
  {title}
128
128
  {language}
129
129
  {presentation}
130
+ {files}
130
131
  bind:copyState
131
132
  bind:viewState
132
133
  bind:themeState
133
134
  bind:modeState
134
- />
135
+ >
136
+ <Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
137
+ </Toolbar>
135
138
 
136
139
  {#if modeState !== 'code'}
137
140
  <hr />
138
141
  {/if}
139
142
 
140
- <Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
143
+ {#if title}
144
+ <Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
145
+ {/if}
141
146
 
142
147
  <div
143
148
  class="kit-repl-content"
144
149
  class:kit-repl-content--code={viewState === 'code' && !presentation}
145
150
  >
146
151
  {#if viewState === 'code'}
147
- <!-- eslint-disable-next-line svelte/no-at-html-tags -->
148
- <div class="kit-repl-wrapper-highlight" bind:this={ref}>{@html codeHTML}</div>
152
+ <div class="kit-repl-wrapper-highlight" bind:this={ref}>
153
+ {#if codeHTML !== null}
154
+ <!-- eslint-disable-next-line svelte/no-at-html-tags -->
155
+ {@html codeHTML}
156
+ {:else}
157
+ <pre class="kit-repl-raw"><code>{activeFile?.content ?? ''}</code></pre>
158
+ {/if}
159
+ </div>
149
160
  {:else}
150
161
  <div
151
162
  class="kit-repl-wrapper-playground"
@@ -162,36 +173,45 @@
162
173
  <style>
163
174
  .kit-repl {
164
175
  /* ui */
165
- --kit-repl-spacing: 0.25rem;
166
- --kit-repl-radius: 1rem;
176
+ --kit-repl-spacing: var(--kit-space-default, 4px);
177
+ --kit-repl-radius: var(--kit-shape-md, 10px);
167
178
 
168
179
  /* shiki override */
169
- --kit-repl-shiki-size: 0.875rem;
180
+ --kit-repl-shiki-size: var(--kit-font-xs, 13px);
170
181
  --kit-repl-shiki-tab-size: 2;
171
182
 
172
183
  /* colors */
173
- --kit-repl-background: #f9f9f9;
174
- --kit-repl-border-color: #ebebeb;
175
- --kit-repl-primary: #0d0d34;
176
- --kit-repl-secondary: #8f8f8f;
184
+ --kit-repl-background: var(--kit-color-surface-1, #f9f9f9);
185
+ --kit-repl-border-color: var(--kit-color-fill, #ebebeb);
186
+ --kit-repl-primary: var(--kit-color-text, #0d0d34);
187
+ --kit-repl-secondary: var(--kit-color-text-muted, #8f8f8f);
177
188
  }
178
189
  .kit-repl-container {
179
190
  background-color: var(--kit-repl-background);
180
191
  border-radius: var(--kit-repl-radius);
181
- border: 2px solid var(--kit-repl-border-color);
192
+ border: 1px solid var(--kit-repl-border-color);
182
193
  }
183
194
 
184
195
  .kit-repl-container :global(pre) {
185
196
  background-color: var(--kit-repl-background) !important;
197
+ border: 0 !important;
198
+ border-radius: 0 !important;
199
+ border-bottom-left-radius: var(--kit-repl-radius) !important;
200
+ border-bottom-right-radius: var(--kit-repl-radius) !important;
201
+ padding: 10px 0 !important;
202
+ margin-bottom: 0 !important;
203
+ margin-top: 0 !important;
204
+ font-size: var(--kit-repl-shiki-size) !important;
186
205
  }
187
206
 
188
207
  .kit-repl-content {
189
208
  display: flow-root;
190
- margin-top: calc(var(--kit-repl-spacing) * 0);
191
- padding-right: calc(10 * var(--kit-repl-spacing));
209
+ padding-left: calc(var(--kit-repl-spacing) * 2);
210
+ /* margin-top: calc(var(--kit-repl-spacing) * 0); */
211
+ /* padding-right: calc(10 * var(--kit-repl-spacing));
192
212
  padding-left: calc(5 * var(--kit-repl-spacing));
193
213
  padding-bottom: calc(4 * var(--kit-repl-spacing));
194
- padding-top: calc(3 * var(--kit-repl-spacing));
214
+ padding-top: calc(3 * var(--kit-repl-spacing)); */
195
215
  position: relative;
196
216
  }
197
217
 
@@ -213,6 +233,16 @@
213
233
  margin-bottom: 0;
214
234
  }
215
235
 
236
+ .kit-repl-raw {
237
+ font-size: var(--kit-repl-shiki-size);
238
+ -moz-tab-size: var(--kit-repl-shiki-tab-size);
239
+ tab-size: var(--kit-repl-shiki-tab-size);
240
+ white-space: pre-wrap;
241
+ word-break: break-word;
242
+ margin: 0;
243
+ padding: 0;
244
+ }
245
+
216
246
  div.kit-repl-container .kit-repl-wrapper-highlight :global(pre code) {
217
247
  font-size: var(--kit-repl-shiki-size);
218
248
  -moz-tab-size: var(--kit-repl-shiki-tab-size);
@@ -221,6 +251,24 @@
221
251
  word-break: break-word;
222
252
  }
223
253
 
254
+ /* shiki dual-theme: follows the ambient lapikit theme (light/dark/system) */
255
+ .kit-repl-wrapper-highlight :global(.shiki),
256
+ .kit-repl-wrapper-highlight :global(.shiki span) {
257
+ color: var(--shiki-light);
258
+ }
259
+
260
+ :global([data-kit-theme='dark']) .kit-repl-wrapper-highlight :global(.shiki),
261
+ :global([data-kit-theme='dark']) .kit-repl-wrapper-highlight :global(.shiki span) {
262
+ color: var(--shiki-dark);
263
+ }
264
+
265
+ @media (prefers-color-scheme: dark) {
266
+ :global([data-kit-theme='system']) .kit-repl-wrapper-highlight :global(.shiki),
267
+ :global([data-kit-theme='system']) .kit-repl-wrapper-highlight :global(.shiki span) {
268
+ color: var(--shiki-dark);
269
+ }
270
+ }
271
+
224
272
  div.kit-repl-container .kit-repl-wrapper-playground {
225
273
  background-color: var(--kit-repl-background);
226
274
  border-radius: var(--kit-repl-radius);
@@ -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
- <div
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
- {:else if language}
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
- {/if}
33
- </div>
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: flex;
85
+ display: grid;
82
86
  align-items: center;
83
- justify-content: space-between;
84
- gap: calc(var(--kit-repl-spacing) * 3);
85
- padding-left: calc(5 * var(--kit-repl-spacing));
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: 0.875rem;
103
- line-height: 16px;
104
- font-weight: 400;
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-weight: 500;
110
- font-size: 1rem;
111
- line-height: 20px;
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>
@@ -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>
@@ -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/shiki.js CHANGED
@@ -1,11 +1,14 @@
1
1
  import { createHighlighter } from 'shiki';
2
- let highlighter;
2
+ let highlighter = null;
3
+ const highlighterPromise = createHighlighter({
4
+ themes: ['github-light', 'github-dark'],
5
+ langs: ['svelte', 'typescript', 'javascript', 'html', 'css', 'json', 'bash']
6
+ }).then((h) => {
7
+ highlighter = h;
8
+ return h;
9
+ });
3
10
  export async function getHighlighterSingleton() {
4
- if (!highlighter) {
5
- highlighter = await createHighlighter({
6
- themes: ['github-light', 'github-dark'],
7
- langs: ['svelte', 'typescript', 'javascript', 'html', 'css', 'json', 'bash']
8
- });
9
- }
10
- return highlighter;
11
+ if (highlighter)
12
+ return highlighter;
13
+ return highlighterPromise;
11
14
  }
package/dist/types.d.ts CHANGED
@@ -13,6 +13,8 @@ export interface ToolbarProps {
13
13
  viewState?: 'code' | 'preview';
14
14
  themeState?: 'light' | 'dark';
15
15
  modeState?: 'code' | 'playground' | 'mixed';
16
+ children?: Snippet;
17
+ files?: FileItem[];
16
18
  }
17
19
  export interface FilesProps {
18
20
  files?: FileItem[];
package/dist/utils.d.ts CHANGED
@@ -5,3 +5,6 @@ export declare const dictionary: {
5
5
  export declare const dictionaryIcons: {
6
6
  [key: string]: string;
7
7
  };
8
+ export declare const dictionaryPkgIcons: {
9
+ [key: string]: string;
10
+ };
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.5430042",
3
+ "version": "0.0.0-insiders.5b53346",
4
4
  "license": "MIT",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -9,10 +9,12 @@
9
9
  "name": "Nycolaide",
10
10
  "email": "contact@lapikit.dev"
11
11
  },
12
+ "homepage": "https://lapikit.dev",
12
13
  "repository": {
13
14
  "type": "git",
14
15
  "url": "git+https://github.com/lapikit/lapikit-repl.git"
15
16
  },
17
+ "funding": "https://buymeacoffee.com/nycolaide",
16
18
  "scripts": {
17
19
  "dev": "vite dev",
18
20
  "build": "vite build && npm run prepack",
@@ -45,7 +47,8 @@
45
47
  },
46
48
  "peerDependencies": {
47
49
  "@sveltejs/kit": "^2.0.0",
48
- "svelte": "^5.0.0"
50
+ "svelte": "^5.0.0",
51
+ "lapikit": "^0.6.7"
49
52
  },
50
53
  "devDependencies": {
51
54
  "@eslint/compat": "^1.4.0",