@vuetify/vue-repl 1.4.2 → 1.5.0

package/dist/repl.d.ts

@@ -117,6 +117,7 @@ export declare class ReplStore implements Store {
     setFiles(newFiles: Record<string, string>, mainFile?: string): Promise<void>;
     private forceSandboxReset;
     private initImportMap;
+    private initLinks;
     getImportMap(): any;
     setImportMap(map: {
         imports: Record<string, string>;
@@ -124,6 +125,7 @@ export declare class ReplStore implements Store {
     }): void;
     setVueVersion(version: string): Promise<void>;
     resetVueVersion(): void;
+    getLinks(): any;
 }
 
 export declare interface SFCOptions {
@@ -144,6 +146,7 @@ export declare interface Store {
     getImportMap: () => any;
     initialShowOutput: boolean;
     initialOutputMode: OutputModes;
+    getLinks: () => any;
 }
 
 export declare interface StoreOptions {

package/dist/style.css

@@ -1,25 +1,25 @@
 
-.split-pane[data-v-85bdcf2d] {
+.split-pane[data-v-09a71c4b] {
   display: flex;
   height: 100%;
   position: relative;
 }
-.split-pane.dragging[data-v-85bdcf2d] {
+.split-pane.dragging[data-v-09a71c4b] {
   cursor: ew-resize;
 }
-.dragging .left[data-v-85bdcf2d],
-.dragging .right[data-v-85bdcf2d] {
+.dragging .left[data-v-09a71c4b],
+.dragging .right[data-v-09a71c4b] {
   pointer-events: none;
 }
-.left[data-v-85bdcf2d],
-.right[data-v-85bdcf2d] {
+.left[data-v-09a71c4b],
+.right[data-v-09a71c4b] {
   position: relative;
   height: 100%;
 }
-.left[data-v-85bdcf2d] {
+.left[data-v-09a71c4b] {
   border-right: 1px solid var(--border);
 }
-.dragger[data-v-85bdcf2d] {
+.dragger[data-v-09a71c4b] {
   position: absolute;
   z-index: 3;
   top: 0;
@@ -28,7 +28,7 @@
   width: 10px;
   cursor: ew-resize;
 }
-.toggler[data-v-85bdcf2d] {
+.toggler[data-v-09a71c4b] {
   display: none;
   z-index: 3;
   font-family: var(--font-code);
@@ -45,13 +45,13 @@
 
 /* vertical */
 @media (min-width: 721px) {
-.split-pane.vertical[data-v-85bdcf2d] {
+.split-pane.vertical[data-v-09a71c4b] {
     display: block;
 }
-.split-pane.vertical.dragging[data-v-85bdcf2d] {
+.split-pane.vertical.dragging[data-v-09a71c4b] {
     cursor: ns-resize;
 }
-.vertical .dragger[data-v-85bdcf2d] {
+.vertical .dragger[data-v-09a71c4b] {
     top: auto;
     height: 10px;
     width: 100%;
@@ -60,11 +60,11 @@
     bottom: -5px;
     cursor: ns-resize;
 }
-.vertical .left[data-v-85bdcf2d],
-  .vertical .right[data-v-85bdcf2d] {
+.vertical .left[data-v-09a71c4b],
+  .vertical .right[data-v-09a71c4b] {
     width: 100%;
 }
-.vertical .left[data-v-85bdcf2d] {
+.vertical .left[data-v-09a71c4b] {
     border-right: none;
     border-bottom: 1px solid var(--border);
 }
@@ -72,38 +72,38 @@
 
 /* mobile */
 @media (max-width: 720px) {
-.left[data-v-85bdcf2d],
-  .right[data-v-85bdcf2d] {
+.left[data-v-09a71c4b],
+  .right[data-v-09a71c4b] {
     width: 100% !important;
     height: 100% !important;
 }
-.dragger[data-v-85bdcf2d] {
+.dragger[data-v-09a71c4b] {
     display: none;
 }
-.split-pane .toggler[data-v-85bdcf2d] {
+.split-pane .toggler[data-v-09a71c4b] {
     display: block;
 }
-.split-pane .right[data-v-85bdcf2d] {
+.split-pane .right[data-v-09a71c4b] {
     display: none;
 }
-.split-pane.show-output .right[data-v-85bdcf2d] {
+.split-pane.show-output .right[data-v-09a71c4b] {
     display: block;
 }
-.split-pane.show-output .left[data-v-85bdcf2d] {
+.split-pane.show-output .left[data-v-09a71c4b] {
     display: none;
 }
 }
 
-.file-selector[data-v-49c6c03c] {
-  /*border-bottom: 1px solid var(--border);*/
+.remove[data-v-ca5e80cf] {
+  align-self: flex-end;
 }
-.file.import-map[data-v-49c6c03c] {
+.file.import-map[data-v-ca5e80cf] {
   /*position: sticky;*/
   /*right: 0;*/
   margin-left: auto;
   background: rgb(var(--v-theme-background)) !important;
 }
-.file.pending input[data-v-49c6c03c] {
+.file.pending input[data-v-ca5e80cf] {
   width: 90px;
   height: 30px;
   line-height: 30px;
@@ -726,8 +726,8 @@ pre[data-v-92411507] {
   position: relative;
 }
 
-.iframe-container[data-v-21e1de24],
-.iframe-container[data-v-21e1de24] iframe {
+.iframe-container[data-v-574b6cff],
+.iframe-container[data-v-574b6cff] iframe {
   width: 100%;
   height: 100%;
   border: none;
@@ -746,7 +746,7 @@ pre[data-v-92411507] {
   text-transform: uppercase;
 }
 
-.vue-repl[data-v-279ea8a9] {
+.vue-repl[data-v-ecf79494] {
   --bg: rgb(var(--v-theme-background));
   --bg-soft: rgb(var(--v-theme-surface));
   --border: #383838;
@@ -754,7 +754,7 @@ pre[data-v-92411507] {
   --color-branding: #42d392;
   --color-branding-dark: #89ddff;
   --font-code: Menlo, Monaco, Consolas, 'Courier New', monospace;
-  --header-height: 38px;
+  --header-height: 44px;
 
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,

package/dist/vue-repl.js

@@ -1,5 +1,6 @@
-import { defineComponent, computed, ref, inject, reactive, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, renderSlot, withModifiers, toDisplayString, createBlock, isRef, withCtx, Fragment, renderList, createCommentVNode, withDirectives, withKeys, vModelText, createVNode, createTextVNode, pushScopeId, popScopeId, onMounted, watchEffect, watch, Transition, onUnmounted, vShow, version, provide, toRef } from 'vue';
+import { defineComponent, computed, ref, inject, reactive, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, renderSlot, withModifiers, toDisplayString, createBlock, isRef, withCtx, Fragment, renderList, createCommentVNode, withDirectives, withKeys, vModelText, createVNode, createTextVNode, onMounted, watchEffect, watch, Transition, onUnmounted, vShow, version, provide, toRef } from 'vue';
 import { VBtn } from 'vuetify/lib/components/VBtn/index.mjs';
+import { VIcon } from 'vuetify/lib/components/VIcon/index.mjs';
 import { VTabs, VTab } from 'vuetify/lib/components/VTabs/index.mjs';
 import * as defaultCompiler from 'vue/compiler-sfc';
 import { MagicString, babelParse, extractIdentifiers, walkIdentifiers, isStaticProperty, isInDestructureAssignment, walk, shouldTransformRef, transformRef } from 'vue/compiler-sfc';
@@ -17,9 +18,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const container = ref();
     const store = inject("store");
     const showOutput = ref(store.initialShowOutput);
+    const savedSplit = parseFloat(localStorage.getItem("vue-repl:split") ?? "");
     const state = reactive({
       dragging: false,
-      split: 50
+      split: !isNaN(savedSplit) ? savedSplit : 50
     });
     const boundSplit = computed(() => {
       const { split } = state;
@@ -42,6 +44,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     }
     function dragEnd() {
       state.dragging = false;
+      localStorage.setItem("vue-repl:split", state.split.toString());
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -81,7 +84,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const SplitPane_vue_vue_type_style_index_0_scoped_85bdcf2d_lang = '';
+const SplitPane_vue_vue_type_style_index_0_scoped_09a71c4b_lang = '';
 
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -91,37 +94,11 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const SplitPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-85bdcf2d"]]);
-
-const _withScopeId = (n) => (pushScopeId("data-v-49c6c03c"), n = n(), popScopeId(), n);
-const _hoisted_1$2 = ["onClick"];
-const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
-  class: "icon",
-  width: "12",
-  height: "12",
-  viewBox: "0 0 24 24"
-}, [
-  /* @__PURE__ */ createElementVNode("line", {
-    stroke: "#999",
-    x1: "18",
-    y1: "6",
-    x2: "6",
-    y2: "18"
-  }),
-  /* @__PURE__ */ createElementVNode("line", {
-    stroke: "#999",
-    x1: "6",
-    y1: "6",
-    x2: "18",
-    y2: "18"
-  })
-], -1));
-const _hoisted_3 = [
-  _hoisted_2
-];
-const _hoisted_4 = ["onKeyup"];
-const _hoisted_5 = /* @__PURE__ */ createTextVNode("+");
-const _hoisted_6 = /* @__PURE__ */ createTextVNode(" Import Map ");
+const SplitPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-09a71c4b"]]);
+
+const _hoisted_1$2 = ["onKeyup"];
+const _hoisted_2 = /* @__PURE__ */ createTextVNode(" Import Map ");
+const _hoisted_3 = /* @__PURE__ */ createTextVNode(" Links ");
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "FileSelector",
   setup(__props) {
@@ -129,9 +106,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const pending = ref(false);
     const pendingFilename = ref("Comp.vue");
     const importMapFile = "import-map.json";
+    const linksFile = "links.json";
     const showImportMap = inject("import-map");
     const files = computed(
-      () => Object.entries(store.state.files).filter(([name, file]) => name !== importMapFile && !file.hidden).map(([name]) => name)
+      () => Object.entries(store.state.files).filter(([name, file]) => ![importMapFile, linksFile].includes(name) && !file.hidden).map(([name]) => name)
     );
     function startAddFile() {
       let i = 0;
@@ -185,6 +163,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
+                                                            
                                                           
                                                           
                                                             
@@ -208,11 +187,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             }, {
               default: withCtx(() => [
                 createElementVNode("span", null, toDisplayString(file), 1),
-                i > 0 ? (openBlock(), createElementBlock("span", {
+                i > 0 ? (openBlock(), createBlock(VIcon, {
                   key: 0,
-                  class: "remove",
-                  onClick: withModifiers(($event) => unref(store).deleteFile(file), ["stop"])
-                }, _hoisted_3, 8, _hoisted_1$2)) : createCommentVNode("", true)
+                  onClick: withModifiers(($event) => unref(store).deleteFile(file), ["stop"]),
+                  icon: "mdi-close",
+                  class: "ms-2 remove"
+                }, null, 8, ["onClick"])) : createCommentVNode("", true)
               ]),
               _: 2
             }, 1032, ["value"]);
@@ -232,7 +212,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                   withKeys(cancelAddFile, ["esc"])
                 ],
                 onVnodeMounted: focus
-              }, null, 40, _hoisted_4), [
+              }, null, 40, _hoisted_1$2), [
                 [vModelText, pendingFilename.value]
               ])
             ]),
@@ -244,7 +224,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             onClick: startAddFile
           }, {
             default: withCtx(() => [
-              _hoisted_5
+              createVNode(VIcon, { icon: "mdi-plus" })
             ]),
             _: 1
           }),
@@ -255,10 +235,20 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             value: importMapFile
           }, {
             default: withCtx(() => [
-              _hoisted_6
+              _hoisted_2
             ]),
             _: 1
-          })) : createCommentVNode("", true)
+          })) : createCommentVNode("", true),
+          createVNode(VTab, {
+            class: "file",
+            size: "small",
+            value: linksFile
+          }, {
+            default: withCtx(() => [
+              _hoisted_3
+            ]),
+            _: 1
+          })
         ]),
         _: 1
       }, 8, ["modelValue", "class"]);
@@ -266,9 +256,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const FileSelector_vue_vue_type_style_index_0_scoped_49c6c03c_lang = '';
+const FileSelector_vue_vue_type_style_index_0_scoped_ca5e80cf_lang = '';
 
-const FileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-49c6c03c"]]);
+const FileSelector = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-ca5e80cf"]]);
 
 // DEFLATE is a complex format; to read this code, you should probably check the RFC first:
 
@@ -14865,7 +14855,7 @@ const Editor_vue_vue_type_style_index_0_scoped_0384e940_lang = '';
 
 const Editor = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-0384e940"]]);
 
-const srcdoc = "<!doctype html>\n<html>\n\t<head>\n\t\t<style>\n\t\t\tbody {\n\t\t\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n\t\t\t\tOxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n\t\t\t}\n\t\t</style>\n\t\t<style id=\"__sfc-styles\"></style>\n\t\t<script>\n\t\t\t(() => {\n\t\t\t\tlet scriptEls = []\n\n\t\t\t\twindow.process = { env: {} }\n\t\t\t\twindow.__modules__ = {}\n\n\t\t\t\twindow.__export__ = (mod, key, get) => {\n\t\t\t\t\tObject.defineProperty(mod, key, {\n\t\t\t\t\t\tenumerable: true,\n\t\t\t\t\t\tconfigurable: true,\n\t\t\t\t\t\tget\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\twindow.__dynamic_import__ = key => {\n\t\t\t\t\treturn Promise.resolve(window.__modules__[key])\n\t\t\t\t}\n\n\t\t\t\tasync function handle_message(ev) {\n\t\t\t\t\tlet { action, cmd_id } = ev.data;\n\t\t\t\t\tconst send_message = (payload) => parent.postMessage( { ...payload }, ev.origin);\n\t\t\t\t\tconst send_reply = (payload) => send_message({ ...payload, cmd_id });\n\t\t\t\t\tconst send_ok = () => send_reply({ action: 'cmd_ok' });\n\t\t\t\t\tconst send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });\n\n\t\t\t\t\tif (action === 'eval') {\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tif (scriptEls.length) {\n\t\t\t\t\t\t\t\tscriptEls.forEach(el => {\n\t\t\t\t\t\t\t\t\tdocument.head.removeChild(el)\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\tscriptEls.length = 0\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tlet { script: scripts } = ev.data.args\n\t\t\t\t\t\t\tif (typeof scripts === 'string') scripts = [scripts]\n\n\t\t\t\t\t\t\tfor (const script of scripts) {\n\t\t\t\t\t\t\t\tconst scriptEl = document.createElement('script')\n\t\t\t\t\t\t\t\tscriptEl.setAttribute('type', 'module')\n\t\t\t\t\t\t\t\t// send ok in the module script to ensure sequential evaluation\n\t\t\t\t\t\t\t\t// of multiple proxy.eval() calls\n\t\t\t\t\t\t\t\tconst done = new Promise((resolve) => {\n\t\t\t\t\t\t\t\t\twindow.__next__ = resolve\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\tscriptEl.innerHTML = script + `\\nwindow.__next__()`\n\t\t\t\t\t\t\t\tdocument.head.appendChild(scriptEl)\n\t\t\t\t\t\t\t\tscriptEl.onerror = err => send_error(err.message, err.stack)\n\t\t\t\t\t\t\t\tscriptEls.push(scriptEl)\n\t\t\t\t\t\t\t\tawait done\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsend_ok()\n\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\tsend_error(e.message, e.stack);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif (action === 'catch_clicks') {\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tconst top_origin = ev.origin;\n\t\t\t\t\t\t\tdocument.body.addEventListener('click', event => {\n\t\t\t\t\t\t\t\tif (event.which !== 1) return;\n\t\t\t\t\t\t\t\tif (event.metaKey || event.ctrlKey || event.shiftKey) return;\n\t\t\t\t\t\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t\t\t\t\t\t// ensure target is a link\n\t\t\t\t\t\t\t\tlet el = event.target;\n\t\t\t\t\t\t\t\twhile (el && el.nodeName !== 'A') el = el.parentNode;\n\t\t\t\t\t\t\t\tif (!el || el.nodeName !== 'A') return;\n\n\t\t\t\t\t\t\t\tif (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;\n\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\n\t\t\t\t\t\t\t\tif (el.href.startsWith(top_origin)) {\n\t\t\t\t\t\t\t\t\tconst url = new URL(el.href);\n\t\t\t\t\t\t\t\t\tif (url.hash[0] === '#') {\n\t\t\t\t\t\t\t\t\t\twindow.location.hash = url.hash;\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\twindow.open(el.href, '_blank');\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\tsend_ok();\n\t\t\t\t\t\t} catch(e) {\n\t\t\t\t\t\t\tsend_error(e.message, e.stack);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\twindow.addEventListener('message', handle_message, false);\n\n\t\t\t\twindow.onerror = function (msg, url, lineNo, columnNo, error) {\n\t\t\t\t\tif (msg.includes('module specifier “vue”')) {\n\t\t\t\t\t\t// firefox only error, ignore\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\ttry {\n\t\t\t\t\t\tparent.postMessage({ action: 'error', value: error }, '*');\n\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\tparent.postMessage({ action: 'error', value: msg }, '*');\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\twindow.addEventListener(\"unhandledrejection\", event => {\n\t\t\t\t\tif (event.reason.message.includes('Cross-origin')) {\n\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\ttry {\n\t\t\t\t\t\tparent.postMessage({ action: 'unhandledrejection', value: event.reason }, '*');\n\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\tparent.postMessage({ action: 'unhandledrejection', value: event.reason.message }, '*');\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tlet previous = { level: null, args: null };\n\n\t\t\t\t['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach((level) => {\n\t\t\t\t\tconst original = console[level];\n\t\t\t\t\tconsole[level] = (...args) => {\n\t\t\t\t\t\tconst msg = String(args[0])\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tmsg.includes('You are running a development build of Vue') ||\n\t\t\t\t\t\t\tmsg.includes('You are running the esm-bundler build of Vue')\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst stringifiedArgs = stringify(args);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tprevious.level === level &&\n\t\t\t\t\t\t\tprevious.args &&\n\t\t\t\t\t\t\tprevious.args === stringifiedArgs\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tparent.postMessage({ action: 'console', level, duplicate: true }, '*');\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tprevious = { level, args: stringifiedArgs };\n\n\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\tparent.postMessage({ action: 'console', level, args }, '*');\n\t\t\t\t\t\t\t} catch (err) {\n\t\t\t\t\t\t\t\tparent.postMessage({ action: 'console', level, args: args.map(a => {\n\t\t\t\t\t\t\t\t\treturn a instanceof Error ? a.message : String(a)\n\t\t\t\t\t\t\t\t}) }, '*');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\toriginal(...args);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t[\n\t\t\t\t\t{ method: 'group', action: 'console_group' },\n\t\t\t\t\t{ method: 'groupEnd', action: 'console_group_end' },\n\t\t\t\t\t{ method: 'groupCollapsed', action: 'console_group_collapsed' },\n\t\t\t\t].forEach((group_action) => {\n\t\t\t\t\tconst original = console[group_action.method];\n\t\t\t\t\tconsole[group_action.method] = (label) => {\n\t\t\t\t\t\tparent.postMessage({ action: group_action.action, label }, '*');\n\n\t\t\t\t\t\toriginal(label);\n\t\t\t\t\t};\n\t\t\t\t});\n\n\t\t\t\tconst timers = new Map();\n\t\t\t\tconst original_time = console.time;\n\t\t\t\tconst original_timelog = console.timeLog;\n\t\t\t\tconst original_timeend = console.timeEnd;\n\n\t\t\t\tconsole.time = (label = 'default') => {\n\t\t\t\t\toriginal_time(label);\n\t\t\t\t\ttimers.set(label, performance.now());\n\t\t\t\t}\n\t\t\t\tconsole.timeLog = (label = 'default') => {\n\t\t\t\t\toriginal_timelog(label);\n\t\t\t\t\tconst now = performance.now();\n\t\t\t\t\tif (timers.has(label)) {\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-log', args: [`${label}: ${now - timers.get(label)}ms`] }, '*');\n\t\t\t\t\t} else {\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-warn', args: [`Timer '${label}' does not exist`] }, '*');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconsole.timeEnd = (label = 'default') => {\n\t\t\t\t\toriginal_timeend(label);\n\t\t\t\t\tconst now = performance.now();\n\t\t\t\t\tif (timers.has(label)) {\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-log', args: [`${label}: ${now - timers.get(label)}ms`] }, '*');\n\t\t\t\t\t} else {\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-warn', args: [`Timer '${label}' does not exist`] }, '*');\n\t\t\t\t\t}\n\t\t\t\t\ttimers.delete(label);\n\t\t\t\t};\n\n\t\t\t\tconst original_assert = console.assert;\n\t\t\t\tconsole.assert = (condition, ...args) => {\n\t\t\t\t\tif (condition) {\n\t\t\t\t\t\tconst stack = new Error().stack;\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'assert', args, stack }, '*');\n\t\t\t\t\t}\n\t\t\t\t\toriginal_assert(condition, ...args);\n\t\t\t\t};\n\n\t\t\t\tconst counter = new Map();\n\t\t\t\tconst original_count = console.count;\n\t\t\t\tconst original_countreset = console.countReset;\n\n\t\t\t\tconsole.count = (label = 'default') => {\n\t\t\t\t\tcounter.set(label, (counter.get(label) || 0) + 1);\n\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-log', args: `${label}: ${counter.get(label)}` }, '*');\n\t\t\t\t\toriginal_count(label);\n\t\t\t\t};\n\n\t\t\t\tconsole.countReset = (label = 'default') => {\n\t\t\t\t\tif (counter.has(label)) {\n\t\t\t\t\t\tcounter.set(label, 0);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-warn', args: `Count for '${label}' does not exist` }, '*');\n\t\t\t\t\t}\n\t\t\t\t\toriginal_countreset(label);\n\t\t\t\t};\n\n\t\t\t\tconst original_trace = console.trace;\n\n\t\t\t\tconsole.trace = (...args) => {\n\t\t\t\t\tconst stack = new Error().stack;\n\t\t\t\t\tparent.postMessage({ action: 'console', level: 'trace', args, stack }, '*');\n\t\t\t\t\toriginal_trace(...args);\n\t\t\t\t};\n\n\t\t\t\tfunction stringify(args) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\treturn JSON.stringify(args);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})()\n\t\t</script>\n\n\t\t<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->\n\t\t<script async src=\"https://unpkg.com/es-module-shims@1.5.18/dist/es-module-shims.wasm.js\"></script>\n\t\t<script type=\"importmap\"><!--IMPORT_MAP--></script>\n\t</head>\n\t<body></body>\n</html>\n";
+const srcdoc = "<!doctype html>\n<html>\n\t<head>\n\t\t<style>\n\t\t\tbody {\n\t\t\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n\t\t\t\tOxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n\t\t\t}\n\t\t</style>\n\t\t<style id=\"__sfc-styles\"></style>\n\t\t<script>\n\t\t\t(() => {\n\t\t\t\tlet scriptEls = []\n\n\t\t\t\twindow.process = { env: {} }\n\t\t\t\twindow.__modules__ = {}\n\n\t\t\t\twindow.__export__ = (mod, key, get) => {\n\t\t\t\t\tObject.defineProperty(mod, key, {\n\t\t\t\t\t\tenumerable: true,\n\t\t\t\t\t\tconfigurable: true,\n\t\t\t\t\t\tget\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\twindow.__dynamic_import__ = key => {\n\t\t\t\t\treturn Promise.resolve(window.__modules__[key])\n\t\t\t\t}\n\n\t\t\t\tasync function handle_message(ev) {\n\t\t\t\t\tlet { action, cmd_id } = ev.data;\n\t\t\t\t\tconst send_message = (payload) => parent.postMessage( { ...payload }, ev.origin);\n\t\t\t\t\tconst send_reply = (payload) => send_message({ ...payload, cmd_id });\n\t\t\t\t\tconst send_ok = () => send_reply({ action: 'cmd_ok' });\n\t\t\t\t\tconst send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });\n\n\t\t\t\t\tif (action === 'eval') {\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tif (scriptEls.length) {\n\t\t\t\t\t\t\t\tscriptEls.forEach(el => {\n\t\t\t\t\t\t\t\t\tdocument.head.removeChild(el)\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\tscriptEls.length = 0\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tlet { script: scripts } = ev.data.args\n\t\t\t\t\t\t\tif (typeof scripts === 'string') scripts = [scripts]\n\n\t\t\t\t\t\t\tfor (const script of scripts) {\n\t\t\t\t\t\t\t\tconst scriptEl = document.createElement('script')\n\t\t\t\t\t\t\t\tscriptEl.setAttribute('type', 'module')\n\t\t\t\t\t\t\t\t// send ok in the module script to ensure sequential evaluation\n\t\t\t\t\t\t\t\t// of multiple proxy.eval() calls\n\t\t\t\t\t\t\t\tconst done = new Promise((resolve) => {\n\t\t\t\t\t\t\t\t\twindow.__next__ = resolve\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\tscriptEl.innerHTML = script + `\\nwindow.__next__()`\n\t\t\t\t\t\t\t\tdocument.head.appendChild(scriptEl)\n\t\t\t\t\t\t\t\tscriptEl.onerror = err => send_error(err.message, err.stack)\n\t\t\t\t\t\t\t\tscriptEls.push(scriptEl)\n\t\t\t\t\t\t\t\tawait done\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsend_ok()\n\t\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\t\tsend_error(e.message, e.stack);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif (action === 'catch_clicks') {\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\tconst top_origin = ev.origin;\n\t\t\t\t\t\t\tdocument.body.addEventListener('click', event => {\n\t\t\t\t\t\t\t\tif (event.which !== 1) return;\n\t\t\t\t\t\t\t\tif (event.metaKey || event.ctrlKey || event.shiftKey) return;\n\t\t\t\t\t\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t\t\t\t\t\t// ensure target is a link\n\t\t\t\t\t\t\t\tlet el = event.target;\n\t\t\t\t\t\t\t\twhile (el && el.nodeName !== 'A') el = el.parentNode;\n\t\t\t\t\t\t\t\tif (!el || el.nodeName !== 'A') return;\n\n\t\t\t\t\t\t\t\tif (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;\n\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\n\t\t\t\t\t\t\t\tif (el.href.startsWith(top_origin)) {\n\t\t\t\t\t\t\t\t\tconst url = new URL(el.href);\n\t\t\t\t\t\t\t\t\tif (url.hash[0] === '#') {\n\t\t\t\t\t\t\t\t\t\twindow.location.hash = url.hash;\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\twindow.open(el.href, '_blank');\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\tsend_ok();\n\t\t\t\t\t\t} catch(e) {\n\t\t\t\t\t\t\tsend_error(e.message, e.stack);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\twindow.addEventListener('message', handle_message, false);\n\n\t\t\t\twindow.onerror = function (msg, url, lineNo, columnNo, error) {\n\t\t\t\t\tif (msg.includes('module specifier “vue”')) {\n\t\t\t\t\t\t// firefox only error, ignore\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\ttry {\n\t\t\t\t\t\tparent.postMessage({ action: 'error', value: error }, '*');\n\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\tparent.postMessage({ action: 'error', value: msg }, '*');\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\twindow.addEventListener(\"unhandledrejection\", event => {\n\t\t\t\t\tif (event.reason.message.includes('Cross-origin')) {\n\t\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t\ttry {\n\t\t\t\t\t\tparent.postMessage({ action: 'unhandledrejection', value: event.reason }, '*');\n\t\t\t\t\t} catch (e) {\n\t\t\t\t\t\tparent.postMessage({ action: 'unhandledrejection', value: event.reason.message }, '*');\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\tlet previous = { level: null, args: null };\n\n\t\t\t\t['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach((level) => {\n\t\t\t\t\tconst original = console[level];\n\t\t\t\t\tconsole[level] = (...args) => {\n\t\t\t\t\t\tconst msg = String(args[0])\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tmsg.includes('You are running a development build of Vue') ||\n\t\t\t\t\t\t\tmsg.includes('You are running the esm-bundler build of Vue')\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst stringifiedArgs = stringify(args);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tprevious.level === level &&\n\t\t\t\t\t\t\tprevious.args &&\n\t\t\t\t\t\t\tprevious.args === stringifiedArgs\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tparent.postMessage({ action: 'console', level, duplicate: true }, '*');\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tprevious = { level, args: stringifiedArgs };\n\n\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\tparent.postMessage({ action: 'console', level, args }, '*');\n\t\t\t\t\t\t\t} catch (err) {\n\t\t\t\t\t\t\t\tparent.postMessage({ action: 'console', level, args: args.map(a => {\n\t\t\t\t\t\t\t\t\treturn a instanceof Error ? a.message : String(a)\n\t\t\t\t\t\t\t\t}) }, '*');\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\toriginal(...args);\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\t\t[\n\t\t\t\t\t{ method: 'group', action: 'console_group' },\n\t\t\t\t\t{ method: 'groupEnd', action: 'console_group_end' },\n\t\t\t\t\t{ method: 'groupCollapsed', action: 'console_group_collapsed' },\n\t\t\t\t].forEach((group_action) => {\n\t\t\t\t\tconst original = console[group_action.method];\n\t\t\t\t\tconsole[group_action.method] = (label) => {\n\t\t\t\t\t\tparent.postMessage({ action: group_action.action, label }, '*');\n\n\t\t\t\t\t\toriginal(label);\n\t\t\t\t\t};\n\t\t\t\t});\n\n\t\t\t\tconst timers = new Map();\n\t\t\t\tconst original_time = console.time;\n\t\t\t\tconst original_timelog = console.timeLog;\n\t\t\t\tconst original_timeend = console.timeEnd;\n\n\t\t\t\tconsole.time = (label = 'default') => {\n\t\t\t\t\toriginal_time(label);\n\t\t\t\t\ttimers.set(label, performance.now());\n\t\t\t\t}\n\t\t\t\tconsole.timeLog = (label = 'default') => {\n\t\t\t\t\toriginal_timelog(label);\n\t\t\t\t\tconst now = performance.now();\n\t\t\t\t\tif (timers.has(label)) {\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-log', args: [`${label}: ${now - timers.get(label)}ms`] }, '*');\n\t\t\t\t\t} else {\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-warn', args: [`Timer '${label}' does not exist`] }, '*');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconsole.timeEnd = (label = 'default') => {\n\t\t\t\t\toriginal_timeend(label);\n\t\t\t\t\tconst now = performance.now();\n\t\t\t\t\tif (timers.has(label)) {\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-log', args: [`${label}: ${now - timers.get(label)}ms`] }, '*');\n\t\t\t\t\t} else {\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-warn', args: [`Timer '${label}' does not exist`] }, '*');\n\t\t\t\t\t}\n\t\t\t\t\ttimers.delete(label);\n\t\t\t\t};\n\n\t\t\t\tconst original_assert = console.assert;\n\t\t\t\tconsole.assert = (condition, ...args) => {\n\t\t\t\t\tif (condition) {\n\t\t\t\t\t\tconst stack = new Error().stack;\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'assert', args, stack }, '*');\n\t\t\t\t\t}\n\t\t\t\t\toriginal_assert(condition, ...args);\n\t\t\t\t};\n\n\t\t\t\tconst counter = new Map();\n\t\t\t\tconst original_count = console.count;\n\t\t\t\tconst original_countreset = console.countReset;\n\n\t\t\t\tconsole.count = (label = 'default') => {\n\t\t\t\t\tcounter.set(label, (counter.get(label) || 0) + 1);\n\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-log', args: `${label}: ${counter.get(label)}` }, '*');\n\t\t\t\t\toriginal_count(label);\n\t\t\t\t};\n\n\t\t\t\tconsole.countReset = (label = 'default') => {\n\t\t\t\t\tif (counter.has(label)) {\n\t\t\t\t\t\tcounter.set(label, 0);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tparent.postMessage({ action: 'console', level: 'system-warn', args: `Count for '${label}' does not exist` }, '*');\n\t\t\t\t\t}\n\t\t\t\t\toriginal_countreset(label);\n\t\t\t\t};\n\n\t\t\t\tconst original_trace = console.trace;\n\n\t\t\t\tconsole.trace = (...args) => {\n\t\t\t\t\tconst stack = new Error().stack;\n\t\t\t\t\tparent.postMessage({ action: 'console', level: 'trace', args, stack }, '*');\n\t\t\t\t\toriginal_trace(...args);\n\t\t\t\t};\n\n\t\t\t\tfunction stringify(args) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\treturn JSON.stringify(args);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})()\n\t\t</script>\n\n\t\t<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->\n\t\t<script async src=\"https://unpkg.com/es-module-shims@1.5.18/dist/es-module-shims.wasm.js\"></script>\n\t\t<script type=\"importmap\"><!--IMPORT_MAP--></script>\n\t\t<!--CSS-->\n\t</head>\n\t<body></body>\n</html>\n";
 
 let uid = 1;
 class PreviewProxy {
@@ -15201,6 +15191,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         }
       }
     );
+    watch(
+      () => store.state.files["links.json"].code,
+      () => {
+        try {
+          createSandbox();
+        } catch (e) {
+          store.state.errors = [e];
+        }
+      }
+    );
     watch(() => store.state.resetFlip, createSandbox);
     onUnmounted(() => {
       proxy.destroy();
@@ -15232,9 +15232,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (!importMap.imports.vue) {
         importMap.imports.vue = store.state.vueRuntimeURL;
       }
+      const links = store.getLinks();
+      if (!links.css) {
+        links.css = [];
+      }
       const sandboxSrc = srcdoc.replace(
         /<!--IMPORT_MAP-->/,
         JSON.stringify(importMap)
+      ).replace(
+        /<!--CSS-->/,
+        links.css.map((link) => `<link rel="stylesheet" type="text/css" href="${link}" />`).join("\n")
       );
       sandbox.srcdoc = sandboxSrc;
       container.value.appendChild(sandbox);
@@ -15380,9 +15387,9 @@ if (window.__app__) window.__app__.unmount()
   }
 });
 
-const Preview_vue_vue_type_style_index_0_scoped_21e1de24_lang = '';
+const Preview_vue_vue_type_style_index_0_scoped_574b6cff_lang = '';
 
-const Preview = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-21e1de24"]]);
+const Preview = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-574b6cff"]]);
 
 const _hoisted_1 = { class: "output-container" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -29007,6 +29014,7 @@ class ReplStore {
       resetFlip: true
     });
     this.initImportMap();
+    this.initLinks();
   }
   init() {
     watchEffect(() => compileFile(this, this.state.activeFile));
@@ -29057,6 +29065,7 @@ class ReplStore {
     this.state.mainFile = mainFile;
     this.state.files = files;
     this.initImportMap();
+    this.initLinks();
     this.setActive(mainFile);
     this.forceSandboxReset();
   }
@@ -29093,6 +29102,17 @@ class ReplStore {
       }
     }
   }
+  initLinks() {
+    const links = this.state.files["links.json"];
+    if (!links) {
+      this.state.files["links.json"] = new File(
+        "links.json",
+        JSON.stringify({
+          css: []
+        }, null, 2)
+      );
+    }
+  }
   getImportMap() {
     try {
       return JSON.parse(this.state.files["import-map.json"].code);
@@ -29140,6 +29160,15 @@ class ReplStore {
     this.forceSandboxReset();
     console.info(`[@vue/repl] Now using default Vue version`);
   }
+  getLinks() {
+    try {
+      return JSON.parse(this.state.files["links.json"].code);
+    } catch (e) {
+      this.state.errors = [
+        `Syntax error in links.json: ${e.message}`
+      ];
+    }
+  }
 }
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -29188,9 +29217,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-const Repl_vue_vue_type_style_index_0_scoped_279ea8a9_lang = '';
+const Repl_vue_vue_type_style_index_0_scoped_ecf79494_lang = '';
 
-const Repl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-279ea8a9"]]);
+const Repl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ecf79494"]]);
 
 export { File, Preview, Repl, ReplStore, compileFile };
 //# sourceMappingURL=vue-repl.js.map