yourjs-box 1.4.0 → 1.6.0

package/dist/yourjs-box.full.js

@@ -1,20 +1,20 @@
-/*! yourjs-box v1.4.0 | (c) 2023-present Christopher West | MIT License | https://github.com/westc/yourjs-box */
+/*! yourjs-box v1.6.0 | (c) 2023-present Chris West | MIT License | https://github.com/westc/yourjs-box */
 (() => {
   /**
    * Viewer IFRAME's CSS code
    * @type {string}
    */
-  const VIEWER_IFRAME_CSS = "[v-cloak]{display:none}body,html{height:100%;margin:0}body{background-color:var(--console-bg);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}#vueApp{display:flex;flex-direction:column;inset:0;position:fixed}#main{display:grid;flex-grow:1;gap:0;min-height:0;position:relative}#main.is-moving-divider{-webkit-user-select:none;user-select:none}#main.col-orient.is-moving-divider{cursor:col-resize}#main.row-orient.is-moving-divider{cursor:row-resize}#main.is-moving-divider::after{background-color:var(--accent);content:'';position:absolute;z-index:99}#main.col-orient.is-moving-divider::after{bottom:0;left:calc(100% - var(--temp-editor-pct) - var(--divider-size)/ 2 - 1px);top:0;width:2px}#main.row-orient.is-moving-divider::after{height:2px;left:0;right:0;top:calc(100% - var(--temp-editor-pct) - var(--divider-size)/ 2 - 1px)}#main.col-orient{grid-template-columns:1fr var(--divider-size) calc(var(--editor-pct) - var(--divider-size)/ 2);grid-template-rows:1fr}#main.row-orient{grid-template-columns:1fr;grid-template-rows:1fr var(--divider-size) calc(var(--editor-pct) - var(--divider-size)/ 2)}.divider{background-color:var(--divider-bg);box-sizing:border-box;position:relative;transition:background-color .15s}#main.col-orient .divider{border-left:1px solid var(--toolbar-border);border-right:1px solid var(--toolbar-border);cursor:col-resize}#main.row-orient .divider{border-bottom:1px solid var(--toolbar-border);border-top:1px solid var(--toolbar-border);cursor:row-resize}.divider::after{background-color:var(--divider-grip);border-radius:2px;content:'';left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color .15s}#main.col-orient .divider::after{height:32px;width:2px}#main.row-orient .divider::after{height:2px;width:32px}#main.is-moving-divider .divider,.divider:hover{background-color:var(--divider-hover-bg)}#main.is-moving-divider .divider::after,.divider:hover::after{background-color:var(--accent)}#displays{position:relative}#displays>div{position:absolute;inset:0;overflow:auto}#bottomNav{align-items:center;background-color:var(--toolbar-bg);border-top:1px solid var(--toolbar-border);color:var(--toolbar-text);display:flex;flex:0 0 auto;font-size:12px;gap:8px;height:32px;padding:0 6px 0 8px;-webkit-user-select:none;user-select:none}#bottomNav>.brand{align-items:center;display:flex;flex-grow:1;gap:8px}.runner-badge{border:1px solid var(--toolbar-border);border-radius:999px;color:var(--muted-text);font-size:10px;letter-spacing:.04em;line-height:15px;padding:0 6px;text-transform:uppercase}#bottomNav>.buttons{align-items:center;display:flex;gap:2px}#bottomNav .separator{background-color:var(--toolbar-border);height:16px;margin:0 4px;width:1px}#bottomNav button{align-items:center;background:0 0;border:0;border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:5px;height:24px;justify-content:center;min-width:26px;padding:0 6px}#bottomNav button>span:not(.label){display:inline-flex;font-size:14px}#bottomNav button svg:not(.spin){transform:none!important}#bottomNav button:hover:not(:disabled){background-color:var(--button-hover)}#bottomNav button:disabled{cursor:not-allowed;opacity:.45}#bottomNav button.primary{background-color:var(--accent);color:var(--accent-text);font-weight:600;margin-left:2px;padding:0 10px 0 8px}#bottomNav button.primary>span:not(.label){font-size:11px}#bottomNav button.primary:hover:not(:disabled){background-color:var(--accent-hover)}#bottomNav button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.logo{align-items:center;color:var(--toolbar-text);display:inline-flex;font-weight:700;gap:5px;letter-spacing:-.01em;line-height:1}.logo-mark{align-items:flex-end;background-color:#f7df1e;border-radius:3px;box-sizing:border-box;color:#1a1a1a;display:inline-flex;font-size:9.5px;font-weight:800;height:18px;justify-content:flex-end;letter-spacing:-.02em;padding:0 2px 2px 0;width:18px}.logo-text{font-size:14px}.logo-large{gap:12px}.logo-large>.logo-mark{border-radius:10px;box-shadow:0 8px 24px rgb(0 0 0 / .18);font-size:24px;height:56px;padding:0 6px 5px 0;width:56px}.logo-large>.logo-text{font-size:36px}#splash{align-items:center;background-color:var(--console-bg);display:flex;inset:0;justify-content:center;position:fixed;transition:opacity .35s ease,visibility .35s;z-index:1000}#splash.hidden{opacity:0;visibility:hidden}.splash-content{align-items:center;animation:splash-in .4s ease-out both;display:flex;flex-direction:column;gap:24px}.splash-progress{background-color:var(--toolbar-border);border-radius:3px;height:3px;overflow:hidden;width:140px}.splash-progress>div{animation:splash-progress 1.1s ease-in-out infinite;background-color:var(--accent);border-radius:inherit;height:100%;width:40%}@keyframes splash-in{from{opacity:0;transform:translateY(6px)}}@keyframes splash-progress{from{transform:translateX(-100%)}to{transform:translateX(250%)}}.dialog-backdrop{align-items:center;animation:fade-in .12s ease-out;background-color:var(--backdrop);display:flex;inset:0;justify-content:center;position:fixed;z-index:900}.dialog{animation:dialog-in .15s ease-out;background-color:var(--dialog-bg);border:1px solid var(--toolbar-border);border-radius:8px;box-shadow:0 12px 40px rgb(0 0 0 / .3);color:var(--console-text);font-size:13px;padding:16px;width:min(360px,calc(100% - 32px))}.dialog-title{font-size:14px;font-weight:600;margin-bottom:6px}.dialog-message{color:var(--muted-text);line-height:1.45}.dialog-buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.dialog-button{background:0 0;border:1px solid var(--toolbar-border);border-radius:4px;color:inherit;cursor:pointer;font:inherit;height:28px;padding:0 12px}.dialog-button:hover{background-color:var(--button-hover)}.dialog-button.primary{background-color:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}.dialog-button.primary:hover{background-color:var(--accent-hover)}.dialog-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#bottomNav button.logo-button{margin-left:-4px;padding:0 4px}.about-dialog{display:flex;flex-direction:column;max-height:calc(100% - 24px);padding:0;width:min(620px,calc(100% - 24px))}.about-dialog.is-export{height:min(560px,calc(100% - 24px))}.about-header{align-items:center;border-bottom:1px solid var(--toolbar-border);display:flex;flex:0 0 auto;padding:0 8px 0 12px}.tabs{display:flex;flex-grow:1;gap:4px}.tab{background:0 0;border:0;border-bottom:2px solid transparent;color:var(--muted-text);cursor:pointer;font:inherit;font-weight:600;padding:10px 8px 8px}.tab:hover{color:var(--console-text)}.tab.active{border-bottom-color:var(--accent);color:var(--console-text)}.close-button{align-items:center;background:0 0;border:0;border-radius:4px;color:var(--muted-text);cursor:pointer;display:inline-flex;font-size:16px;height:28px;justify-content:center;width:28px}.close-button:hover{background-color:var(--button-hover);color:var(--console-text)}.close-button:focus-visible,.segmented>button:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.about-body{flex:1 1 auto;min-height:0;overflow:auto;padding:16px}.about-title{align-items:center;display:flex;gap:12px}.logo-medium>.logo-mark{border-radius:7px;font-size:16px;height:40px;padding:0 4px 4px 0;width:40px}.logo-medium>.logo-text{display:none}.about-name{font-size:17px;font-weight:700}.about-aka{color:var(--muted-text);font-size:13px;font-weight:400;margin-left:4px}.about-version{color:var(--muted-text);font-size:12px}.about-description{line-height:1.5;margin:12px 0}.about-links{display:flex;flex-wrap:wrap;gap:6px 16px}.about-links a{color:var(--accent);font-weight:600;text-decoration:none}.about-links a:hover{text-decoration:underline}.about-body h3{color:var(--muted-text);font-size:11px;letter-spacing:.05em;margin:18px 0 6px;text-transform:uppercase}.about-details{display:grid;gap:4px 16px;grid-template-columns:max-content 1fr;margin:0}.about-details dt{color:var(--muted-text)}.about-details dd{margin:0}.about-details kbd{background-color:var(--toolbar-bg);border:1px solid var(--toolbar-border);border-bottom-width:2px;border-radius:4px;font-family:inherit;font-size:11px;padding:0 4px}.about-footer{border-top:1px solid var(--toolbar-border);color:var(--muted-text);font-size:12px;margin-top:18px;padding-top:12px}.export-body{display:flex;flex-direction:column;gap:10px}.export-options{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}.segmented{border:1px solid var(--toolbar-border);border-radius:6px;display:inline-flex;overflow:hidden}.segmented>button{background:0 0;border:0;color:var(--muted-text);cursor:pointer;font:inherit;font-size:12px;font-weight:600;padding:5px 10px}.segmented>button+button{border-left:1px solid var(--toolbar-border)}.segmented>button:hover{background-color:var(--button-hover)}.segmented>button.active{background-color:var(--accent);color:var(--accent-text)}.export-note{color:var(--muted-text);font-size:12px}.export-preview{border:1px solid var(--toolbar-border);border-radius:6px;flex:1 1 auto;min-height:120px;overflow:hidden}.export-actions{display:flex;gap:8px;justify-content:flex-end}.more-menu{background-color:var(--dialog-bg);border:1px solid var(--toolbar-border);border-radius:8px;bottom:38px;box-shadow:0 8px 28px rgb(0 0 0 / .25);color:var(--console-text);font-size:13px;max-height:calc(100% - 48px);min-width:236px;overflow:auto;padding:4px;position:absolute;right:6px;z-index:800}.menu-item{align-items:center;background:0 0;border:0;border-radius:5px;color:inherit;cursor:pointer;display:flex;font:inherit;gap:8px;padding:6px 8px;text-align:left;width:100%}.menu-item:focus-visible,.menu-item:hover:not(:disabled){background-color:var(--button-hover);outline:0}.menu-item:disabled{cursor:not-allowed;opacity:.4}.menu-icon{color:var(--muted-text);display:inline-flex;font-size:14px;justify-content:center;width:16px}.menu-icon svg{transform:none!important}.menu-row{align-items:center;display:flex;gap:2px;padding:2px 2px 2px 8px}.menu-row-label{flex-grow:1}.menu-step{font-weight:600;justify-content:center;width:auto}.menu-percent{color:var(--muted-text);font-variant-numeric:tabular-nums;font-weight:400;min-width:52px}.menu-separator{background-color:var(--toolbar-border);height:1px;margin:4px 0}.popped-out{align-items:center;background-color:var(--console-bg);color:var(--console-text);display:flex;inset:0;justify-content:center;position:fixed;z-index:950}.popped-out-content{align-items:center;display:flex;flex-direction:column;gap:8px;padding:16px;text-align:center}.popped-out-title{font-size:15px;font-weight:600;margin-top:8px}.popped-out-text{color:var(--muted-text);font-size:13px}@keyframes fade-in{from{opacity:0}}@keyframes dialog-in{from{opacity:0;transform:scale(.96)}}.rotated-90deg{transform:rotate(90deg)}.align-top{vertical-align:top!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.no-select{-webkit-user-select:none;user-select:none}:root{color-scheme:light;--console-font:ui-monospace,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;--console-bg:#fff;--console-text:#1f1f1f;--row-border:#f0f0f0;--arrow:#727272;--chevron:#9aa0a6;--entry-key:#881391;--preview-key:#5f6368;--string:#c41a16;--number:#1a1aa6;--null:#80868b;--header-bg:#f1f3f4;--header-text:#3c4043;--warn-bg:#fffbe5;--warn-border:#fff5c2;--warn-text:#5c3c00;--warn-icon:#e8a600;--error-bg:#fff0f0;--error-border:#ffd6d6;--error-text:#dc362e;--error-icon:#dc362e;--table-header-bg:#f3f3f3;--table-border:#d0d0d0;--toolbar-bg:#f3f3f3;--toolbar-border:#d6d6d6;--toolbar-text:#333;--muted-text:#5f6368;--button-hover:rgb(0 0 0 / 0.08);--accent:#1a73e8;--accent-hover:#1765cc;--accent-text:#fff;--divider-bg:#f3f3f3;--divider-hover-bg:#e8eaed;--divider-grip:#b0b0b0;--dialog-bg:#fff;--backdrop:rgb(0 0 0 / 0.25)}:root[data-theme=dark]{color-scheme:dark;--console-bg:#242424;--console-text:#e3e3e3;--row-border:#3a3a3a;--arrow:#9aa0a6;--chevron:#80868b;--entry-key:#5db0d7;--preview-key:#9aa0a6;--string:#f28b54;--number:#9980ff;--null:#8e8e8e;--header-bg:#2d2e30;--header-text:#c4c7c5;--warn-bg:#332b00;--warn-border:#665500;--warn-text:#ffd17a;--warn-icon:#ffd17a;--error-bg:#290000;--error-border:#5c0000;--error-text:#ff8080;--error-icon:#ff6b6b;--table-header-bg:#2e2e2e;--table-border:#4a4a4a;--toolbar-bg:#2b2b2b;--toolbar-border:#474747;--toolbar-text:#e3e3e3;--muted-text:#9aa0a6;--button-hover:rgb(255 255 255 / 0.1);--accent:#8ab4f8;--accent-hover:#aecbfa;--accent-text:#202124;--divider-bg:#2b2b2b;--divider-hover-bg:#333;--divider-grip:#6b6b6b;--dialog-bg:#2d2e30;--backdrop:rgb(0 0 0 / 0.5)}#displays{background-color:var(--console-bg);color:var(--console-text)}#displays>div{font-family:var(--console-font);font-size:calc(12px * var(--text-scale, 1));line-height:calc(16px * var(--text-scale, 1))}.console-row{border-bottom:1px solid var(--row-border);padding:2px 8px 2px 24px;position:relative;white-space:pre-wrap;word-break:break-word}.console-row>.row-icon{left:6px;line-height:0;position:absolute;top:4px}.log-error,.log-warn{margin-top:-1px}.log-warn{background-color:var(--warn-bg);border-bottom-color:var(--warn-border);border-top:1px solid var(--warn-border);color:var(--warn-text)}.log-warn>.row-icon{color:var(--warn-icon)}.log-error{background-color:var(--error-bg);border-bottom-color:var(--error-border);border-top:1px solid var(--error-border);color:var(--error-text)}.log-error>.row-icon{color:var(--error-icon)}.console-row{padding-left:calc(24px + var(--depth,0) * 16px)}.console-row>.row-icon{left:calc(6px + var(--depth,0) * 16px)}.group-header{cursor:pointer;font-weight:700}.group-header>.row-icon.arrow{top:5px}.log-assert{background-color:var(--error-bg);border-bottom-color:var(--error-border);border-top:1px solid var(--error-border);color:var(--error-text);margin-top:-1px}.log-assert>.row-icon{color:var(--error-icon)}.log-result>.row-icon{color:var(--chevron)}.trace-stack{color:var(--null);padding-left:1ch}.splash-message{color:var(--muted-text);font-size:13px;max-width:280px;text-align:center}.splash-slow{animation:show-after-delay 0s 10s both}@keyframes show-after-delay{from{visibility:hidden}to{visibility:visible}}#splash.failed .splash-progress,#splash.failed .splash-slow,.splash-error{display:none}#splash.failed .splash-error{display:block}.code-header{background-color:var(--header-bg);border-bottom:1px solid var(--row-border);color:var(--header-text);font-weight:700;padding:2px 8px;white-space:pre-wrap}.code-header.toggleable{cursor:pointer}.code-row .copy-to-editor-button{align-items:center;background-color:var(--console-bg);border:1px solid var(--toolbar-border);border-radius:4px;color:var(--toolbar-text);cursor:pointer;display:inline-flex;height:22px;justify-content:center;opacity:0;padding:0;position:absolute;right:6px;top:2px;transition:opacity .15s;width:22px}.code-row .copy-to-editor-button:focus-visible,.code-row:hover .copy-to-editor-button{opacity:1}.code-row .copy-to-editor-button:hover{background-color:var(--toolbar-bg)}@media (hover:none){.code-row .copy-to-editor-button{opacity:.8}}.notice{color:var(--null);font-style:italic}.code-row>.row-icon{color:var(--chevron)}.code-row code,.code-row pre{background:0 0!important;font-family:var(--console-font)!important;font-size:calc(12px * var(--text-scale, 1))!important;line-height:calc(16px * var(--text-scale, 1))!important;padding:0!important;text-shadow:none!important}.js-value{max-width:100%;vertical-align:top}.row-content>.js-value+.js-value{margin-left:1ch}.js-value-header.expandable{cursor:default}.js-value .expansion{padding-left:12px}.js-value .loading{color:var(--null);padding-left:12px}.arrow{display:inline-block;height:10px;position:relative;width:12px}.arrow.expandable::before{border-color:transparent transparent transparent var(--arrow);border-style:solid;border-width:4px 0 4px 6px;content:'';left:2px;position:absolute;top:1px;transform-origin:3px 4px;transition:transform .1s}.arrow.expandable.expanded::before{transform:rotate(90deg)}.entry-key{color:var(--entry-key)}.entry-key.dim{opacity:.6}.t-key{color:var(--preview-key)}.t-regexp,.t-string,.t-symbol{color:var(--string)}.t-number{color:var(--number)}.t-null{color:var(--null)}.t-function{font-style:italic}.t-node{color:var(--entry-key)}.console-table{border:1px solid var(--table-border);border-collapse:collapse;margin:2px 0 4px;white-space:nowrap}.console-table td,.console-table th{border-left:1px solid var(--table-border);max-width:300px;overflow:hidden;padding:1px 4px;text-align:left;text-overflow:ellipsis}.console-table th{background-color:var(--table-header-bg);border-bottom:1px solid var(--table-border);font-weight:400}";
+  const VIEWER_IFRAME_CSS = "[v-cloak]{display:none}body,html{height:100%;margin:0}body{background-color:var(--console-bg);font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}#vueApp{display:flex;flex-direction:column;inset:0;position:fixed}#main{display:grid;flex-grow:1;gap:0;min-height:0;position:relative}#main.is-moving-divider{-webkit-user-select:none;user-select:none}#main.col-orient.is-moving-divider{cursor:col-resize}#main.row-orient.is-moving-divider{cursor:row-resize}#main.is-moving-divider::after{background-color:var(--accent);content:'';position:absolute;z-index:99}#main.col-orient.is-moving-divider::after{bottom:0;left:calc(100% - var(--temp-editor-pct) - var(--divider-size)/ 2 - 1px);top:0;width:2px}#main.row-orient.is-moving-divider::after{height:2px;left:0;right:0;top:calc(100% - var(--temp-editor-pct) - var(--divider-size)/ 2 - 1px)}#main.col-orient{grid-template-columns:1fr var(--divider-size) calc(var(--editor-pct) - var(--divider-size)/ 2);grid-template-rows:1fr}#main.row-orient{grid-template-columns:1fr;grid-template-rows:1fr var(--divider-size) calc(var(--editor-pct) - var(--divider-size)/ 2)}.divider{background-color:var(--divider-bg);box-sizing:border-box;position:relative;transition:background-color .15s}#main.col-orient .divider{border-left:1px solid var(--toolbar-border);border-right:1px solid var(--toolbar-border);cursor:col-resize}#main.row-orient .divider{border-bottom:1px solid var(--toolbar-border);border-top:1px solid var(--toolbar-border);cursor:row-resize}.divider::after{background-color:var(--divider-grip);border-radius:2px;content:'';left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color .15s}#main.col-orient .divider::after{height:32px;width:2px}#main.row-orient .divider::after{height:2px;width:32px}#main.is-moving-divider .divider,.divider:hover{background-color:var(--divider-hover-bg)}#main.is-moving-divider .divider::after,.divider:hover::after{background-color:var(--accent)}#displays{position:relative}#displays>div{position:absolute;inset:0;overflow:auto}#bottomNav{align-items:center;background-color:var(--toolbar-bg);border-top:1px solid var(--toolbar-border);color:var(--toolbar-text);display:flex;flex:0 0 auto;font-size:12px;gap:8px;height:32px;padding:0 6px 0 8px;-webkit-user-select:none;user-select:none}#bottomNav>.brand{align-items:center;display:flex;flex-grow:1;gap:8px}.runner-badge{border:1px solid var(--toolbar-border);border-radius:999px;color:var(--muted-text);font-size:10px;letter-spacing:.04em;line-height:15px;padding:0 6px;text-transform:uppercase}#bottomNav>.buttons{align-items:center;display:flex;gap:2px}#bottomNav .separator{background-color:var(--toolbar-border);height:16px;margin:0 4px;width:1px}#bottomNav button{align-items:center;background:0 0;border:0;border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font:inherit;gap:5px;height:24px;justify-content:center;min-width:26px;padding:0 6px}#bottomNav button>span:not(.label){display:inline-flex;font-size:14px}#bottomNav button svg:not(.spin){transform:none!important}#bottomNav button:hover:not(:disabled){background-color:var(--button-hover)}#bottomNav button:disabled{cursor:not-allowed;opacity:.45}#bottomNav button.primary{background-color:var(--accent);color:var(--accent-text);font-weight:600;margin-left:2px;padding:0 10px 0 8px}#bottomNav button.primary>span:not(.label){font-size:11px}#bottomNav button.primary:hover:not(:disabled){background-color:var(--accent-hover)}#bottomNav button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.logo{align-items:center;color:var(--toolbar-text);display:inline-flex;font-weight:700;gap:5px;letter-spacing:-.01em;line-height:1}.logo-mark{align-items:flex-end;background-color:#f7df1e;border-radius:3px;box-sizing:border-box;color:#1a1a1a;display:inline-flex;font-size:9.5px;font-weight:800;height:18px;justify-content:flex-end;letter-spacing:-.02em;padding:0 2px 2px 0;width:18px}.logo-text{font-size:14px}.logo-large{gap:12px}.logo-large>.logo-mark{border-radius:10px;box-shadow:0 8px 24px rgb(0 0 0 / .18);font-size:24px;height:56px;padding:0 6px 5px 0;width:56px}.logo-large>.logo-text{font-size:36px}#splash{align-items:center;background-color:var(--console-bg);display:flex;inset:0;justify-content:center;position:fixed;transition:opacity .35s ease,visibility .35s;z-index:1000}#splash.hidden{opacity:0;visibility:hidden}.splash-content{align-items:center;animation:splash-in .4s ease-out both;display:flex;flex-direction:column;gap:24px}.splash-progress{background-color:var(--toolbar-border);border-radius:3px;height:3px;overflow:hidden;width:140px}.splash-progress>div{animation:splash-progress 1.1s ease-in-out infinite;background-color:var(--accent);border-radius:inherit;height:100%;width:40%}@keyframes splash-in{from{opacity:0;transform:translateY(6px)}}@keyframes splash-progress{from{transform:translateX(-100%)}to{transform:translateX(250%)}}.dialog-backdrop{align-items:center;animation:fade-in .12s ease-out;background-color:var(--backdrop);display:flex;inset:0;justify-content:center;position:fixed;z-index:900}.dialog{animation:dialog-in .15s ease-out;background-color:var(--dialog-bg);border:1px solid var(--toolbar-border);border-radius:8px;box-shadow:0 12px 40px rgb(0 0 0 / .3);color:var(--console-text);font-size:13px;padding:16px;width:min(360px,calc(100% - 32px))}.dialog-title{font-size:14px;font-weight:600;margin-bottom:6px}.dialog-message{color:var(--muted-text);line-height:1.45}.dialog-buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.dialog-button{background:0 0;border:1px solid var(--toolbar-border);border-radius:4px;color:inherit;cursor:pointer;font:inherit;height:28px;padding:0 12px}.dialog-button:hover{background-color:var(--button-hover)}.dialog-button.primary{background-color:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}.dialog-button.primary:hover{background-color:var(--accent-hover)}.dialog-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#bottomNav button.logo-button{margin-left:-4px;padding:0 4px}.about-dialog{display:flex;flex-direction:column;max-height:calc(100% - 24px);padding:0;width:min(620px,calc(100% - 24px))}.about-dialog.is-export{height:min(560px,calc(100% - 24px))}.about-header{align-items:center;border-bottom:1px solid var(--toolbar-border);display:flex;flex:0 0 auto;padding:0 8px 0 12px}.tabs{display:flex;flex-grow:1;gap:4px}.tab{background:0 0;border:0;border-bottom:2px solid transparent;color:var(--muted-text);cursor:pointer;font:inherit;font-weight:600;padding:10px 8px 8px}.tab:hover{color:var(--console-text)}.tab.active{border-bottom-color:var(--accent);color:var(--console-text)}.close-button{align-items:center;background:0 0;border:0;border-radius:4px;color:var(--muted-text);cursor:pointer;display:inline-flex;font-size:16px;height:28px;justify-content:center;width:28px}.close-button:hover{background-color:var(--button-hover);color:var(--console-text)}.close-button:focus-visible,.segmented>button:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.about-body{flex:1 1 auto;min-height:0;overflow:auto;padding:16px}.about-title{align-items:center;display:flex;gap:12px}.logo-medium>.logo-mark{border-radius:7px;font-size:16px;height:40px;padding:0 4px 4px 0;width:40px}.logo-medium>.logo-text{display:none}.about-name{font-size:17px;font-weight:700}.about-aka{color:var(--muted-text);font-size:13px;font-weight:400;margin-left:4px}.about-version{color:var(--muted-text);font-size:12px}.about-description{line-height:1.5;margin:12px 0}.about-links{display:flex;flex-wrap:wrap;gap:6px 16px}.about-links a{color:var(--accent);font-weight:600;text-decoration:none}.about-links a:hover{text-decoration:underline}.about-body h3{color:var(--muted-text);font-size:11px;letter-spacing:.05em;margin:18px 0 6px;text-transform:uppercase}.about-details{display:grid;gap:4px 16px;grid-template-columns:max-content 1fr;margin:0}.about-details dt{color:var(--muted-text)}.about-details dd{margin:0}.about-details kbd{background-color:var(--toolbar-bg);border:1px solid var(--toolbar-border);border-bottom-width:2px;border-radius:4px;font-family:inherit;font-size:11px;padding:0 4px}.about-footer{border-top:1px solid var(--toolbar-border);color:var(--muted-text);font-size:12px;margin-top:18px;padding-top:12px}.export-body{display:flex;flex-direction:column;gap:10px}.export-options{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}.segmented{border:1px solid var(--toolbar-border);border-radius:6px;display:inline-flex;overflow:hidden}.segmented>button{background:0 0;border:0;color:var(--muted-text);cursor:pointer;font:inherit;font-size:12px;font-weight:600;padding:5px 10px}.segmented>button+button{border-left:1px solid var(--toolbar-border)}.segmented>button:hover{background-color:var(--button-hover)}.segmented>button.active{background-color:var(--accent);color:var(--accent-text)}.export-note{color:var(--muted-text);font-size:12px}.export-preview{border:1px solid var(--toolbar-border);border-radius:6px;flex:1 1 auto;min-height:120px;overflow:hidden}.export-actions{display:flex;gap:8px;justify-content:flex-end}.file-input{display:none}.more-menu{background-color:var(--dialog-bg);border:1px solid var(--toolbar-border);border-radius:8px;bottom:38px;box-shadow:0 8px 28px rgb(0 0 0 / .25);color:var(--console-text);font-size:13px;max-height:calc(100% - 48px);min-width:236px;overflow:auto;padding:4px;position:absolute;right:6px;z-index:800}.menu-item{align-items:center;background:0 0;border:0;border-radius:5px;color:inherit;cursor:pointer;display:flex;font:inherit;gap:8px;padding:6px 8px;text-align:left;width:100%}.menu-item:focus-visible,.menu-item:hover:not(:disabled){background-color:var(--button-hover);outline:0}.menu-item:disabled{cursor:not-allowed;opacity:.4}.menu-icon{color:var(--muted-text);display:inline-flex;font-size:14px;justify-content:center;width:16px}.menu-icon svg{transform:none!important}.menu-row{align-items:center;display:flex;gap:2px;padding:2px 2px 2px 8px}.menu-row-label{flex-grow:1}.menu-step{font-weight:600;justify-content:center;width:auto}.menu-percent{color:var(--muted-text);font-variant-numeric:tabular-nums;font-weight:400;min-width:52px}.menu-separator{background-color:var(--toolbar-border);height:1px;margin:4px 0}.history-panel{max-width:min(420px,calc(100% - 12px));width:360px}.history-title{color:var(--muted-text);font-size:11px;font-weight:600;letter-spacing:.05em;padding:4px 8px 6px;text-transform:uppercase}.history-item{justify-content:space-between}.history-label{font-family:var(--console-font);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-detail{color:var(--muted-text);flex-shrink:0;font-size:11px}.history-empty,.history-hint{color:var(--muted-text);font-size:12px;padding:6px 8px}.history-hint{border-top:1px solid var(--toolbar-border);margin-top:4px}.value-menu{bottom:auto;min-width:220px;position:fixed;right:auto;z-index:850}.toast{animation:fade-in .15s ease-out;background-color:var(--console-text);border-radius:6px;bottom:44px;box-shadow:0 6px 20px rgb(0 0 0 / .25);color:var(--console-bg);font-size:12px;left:50%;max-width:calc(100% - 32px);padding:6px 12px;pointer-events:none;position:fixed;transform:translateX(-50%);z-index:860}.popped-out{align-items:center;background-color:var(--console-bg);color:var(--console-text);display:flex;inset:0;justify-content:center;position:fixed;z-index:950}.popped-out-content{align-items:center;display:flex;flex-direction:column;gap:8px;padding:16px;text-align:center}.popped-out-title{font-size:15px;font-weight:600;margin-top:8px}.popped-out-text{color:var(--muted-text);font-size:13px}@keyframes fade-in{from{opacity:0}}@keyframes dialog-in{from{opacity:0;transform:scale(.96)}}.rotated-90deg{transform:rotate(90deg)}.align-top{vertical-align:top!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.no-select{-webkit-user-select:none;user-select:none}:root{color-scheme:light;--console-font:ui-monospace,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;--console-bg:#fff;--console-text:#1f1f1f;--row-border:#f0f0f0;--arrow:#727272;--chevron:#9aa0a6;--entry-key:#881391;--preview-key:#5f6368;--string:#c41a16;--number:#1a1aa6;--null:#80868b;--header-bg:#f1f3f4;--header-text:#3c4043;--warn-bg:#fffbe5;--warn-border:#fff5c2;--warn-text:#5c3c00;--warn-icon:#e8a600;--error-bg:#fff0f0;--error-border:#ffd6d6;--error-text:#dc362e;--error-icon:#dc362e;--table-header-bg:#f3f3f3;--table-border:#d0d0d0;--toolbar-bg:#f3f3f3;--toolbar-border:#d6d6d6;--toolbar-text:#333;--muted-text:#5f6368;--button-hover:rgb(0 0 0 / 0.08);--accent:#1a73e8;--accent-hover:#1765cc;--accent-text:#fff;--divider-bg:#f3f3f3;--divider-hover-bg:#e8eaed;--divider-grip:#b0b0b0;--dialog-bg:#fff;--backdrop:rgb(0 0 0 / 0.25)}:root[data-theme=dark]{color-scheme:dark;--console-bg:#242424;--console-text:#e3e3e3;--row-border:#3a3a3a;--arrow:#9aa0a6;--chevron:#80868b;--entry-key:#5db0d7;--preview-key:#9aa0a6;--string:#f28b54;--number:#9980ff;--null:#8e8e8e;--header-bg:#2d2e30;--header-text:#c4c7c5;--warn-bg:#332b00;--warn-border:#665500;--warn-text:#ffd17a;--warn-icon:#ffd17a;--error-bg:#290000;--error-border:#5c0000;--error-text:#ff8080;--error-icon:#ff6b6b;--table-header-bg:#2e2e2e;--table-border:#4a4a4a;--toolbar-bg:#2b2b2b;--toolbar-border:#474747;--toolbar-text:#e3e3e3;--muted-text:#9aa0a6;--button-hover:rgb(255 255 255 / 0.1);--accent:#8ab4f8;--accent-hover:#aecbfa;--accent-text:#202124;--divider-bg:#2b2b2b;--divider-hover-bg:#333;--divider-grip:#6b6b6b;--dialog-bg:#2d2e30;--backdrop:rgb(0 0 0 / 0.5)}#displays{background-color:var(--console-bg);color:var(--console-text)}#displays>div{font-family:var(--console-font);font-size:calc(12px * var(--text-scale, 1));line-height:calc(16px * var(--text-scale, 1))}.console-row{border-bottom:1px solid var(--row-border);padding:2px 8px 2px 24px;position:relative;white-space:pre-wrap;word-break:break-word}.console-row>.row-icon{left:6px;line-height:0;position:absolute;top:4px}.log-error,.log-warn{margin-top:-1px}.log-warn{background-color:var(--warn-bg);border-bottom-color:var(--warn-border);border-top:1px solid var(--warn-border);color:var(--warn-text)}.log-warn>.row-icon{color:var(--warn-icon)}.log-error{background-color:var(--error-bg);border-bottom-color:var(--error-border);border-top:1px solid var(--error-border);color:var(--error-text)}.log-error>.row-icon{color:var(--error-icon)}.console-row{padding-left:calc(24px + var(--depth,0) * 16px)}.console-row>.row-icon{left:calc(6px + var(--depth,0) * 16px)}.group-header{cursor:pointer;font-weight:700}.group-header>.row-icon.arrow{top:5px}.log-assert{background-color:var(--error-bg);border-bottom-color:var(--error-border);border-top:1px solid var(--error-border);color:var(--error-text);margin-top:-1px}.log-assert>.row-icon{color:var(--error-icon)}.log-result>.row-icon{color:var(--chevron)}.trace-stack{color:var(--null);padding-left:1ch}.splash-message{color:var(--muted-text);font-size:13px;max-width:280px;text-align:center}.splash-slow{animation:show-after-delay 0s 10s both}@keyframes show-after-delay{from{visibility:hidden}to{visibility:visible}}#splash.failed .splash-progress,#splash.failed .splash-slow,.splash-error{display:none}#splash.failed .splash-error{display:block}.code-header{background-color:var(--header-bg);border-bottom:1px solid var(--row-border);color:var(--header-text);font-weight:700;padding:2px 8px;white-space:pre-wrap}.code-header.toggleable{cursor:pointer}.code-row .copy-to-editor-button{align-items:center;background-color:var(--console-bg);border:1px solid var(--toolbar-border);border-radius:4px;color:var(--toolbar-text);cursor:pointer;display:inline-flex;height:22px;justify-content:center;opacity:0;padding:0;position:absolute;right:6px;top:2px;transition:opacity .15s;width:22px}.code-row .copy-to-editor-button:focus-visible,.code-row:hover .copy-to-editor-button{opacity:1}.code-row .copy-to-editor-button:hover{background-color:var(--toolbar-bg)}@media (hover:none){.code-row .copy-to-editor-button{opacity:.8}}.notice{color:var(--null);font-style:italic}.code-row>.row-icon{color:var(--chevron)}.code-row code,.code-row pre{background:0 0!important;font-family:var(--console-font)!important;font-size:calc(12px * var(--text-scale, 1))!important;line-height:calc(16px * var(--text-scale, 1))!important;padding:0!important;text-shadow:none!important}.js-value{max-width:100%;vertical-align:top}.row-content>.js-value+.js-value{margin-left:1ch}.js-value-header.expandable{cursor:default}.js-value .expansion{padding-left:12px}.js-value .loading{color:var(--null);padding-left:12px}.arrow{display:inline-block;height:10px;position:relative;width:12px}.arrow.expandable::before{border-color:transparent transparent transparent var(--arrow);border-style:solid;border-width:4px 0 4px 6px;content:'';left:2px;position:absolute;top:1px;transform-origin:3px 4px;transition:transform .1s}.arrow.expandable.expanded::before{transform:rotate(90deg)}.entry-key{color:var(--entry-key)}.entry-key.dim{opacity:.6}.t-key{color:var(--preview-key)}.t-regexp,.t-string,.t-symbol{color:var(--string)}.t-number{color:var(--number)}.t-null{color:var(--null)}.t-function{font-style:italic}.t-node{color:var(--entry-key)}.console-table{border:1px solid var(--table-border);border-collapse:collapse;margin:2px 0 4px;white-space:nowrap}.console-table td,.console-table th{border-left:1px solid var(--table-border);max-width:300px;overflow:hidden;padding:1px 4px;text-align:left;text-overflow:ellipsis}.console-table th{background-color:var(--table-header-bg);border-bottom:1px solid var(--table-border);font-weight:400}";
   /**
    * Information about this package (eg. its version).
    * @type {{name: string, version: string, homepage: string, repoUrl: string, bugsUrl: string}}
    */
-  const PACKAGE_INFO = {"name":"yourjs-box","version":"1.4.0","homepage":"https://westc.github.io/yourjs-box/","repoUrl":"https://github.com/westc/yourjs-box","bugsUrl":"https://github.com/westc/yourjs-box/issues"};
+  const PACKAGE_INFO = {"name":"yourjs-box","version":"1.6.0","homepage":"https://westc.github.io/yourjs-box/","repoUrl":"https://github.com/westc/yourjs-box","bugsUrl":"https://github.com/westc/yourjs-box/issues"};
   /**
    * Viewer IFRAME's HTML code
    * @type {string}
    */
-  const VIEWER_IFRAME_HTML = "<div id=\"splash\" aria-label=\"Loading\"><div class=\"splash-content\"><span class=\"logo logo-large\"><span class=\"logo-mark\">JS</span><span class=\"logo-text\">Box</span></span><div class=\"splash-progress\"><div></div></div><div class=\"splash-message splash-slow\">Still loading&hellip;</div><div class=\"splash-message splash-error\">JS Box couldn&rsquo;t load. Please check your connection and reload the page.</div></div></div><div id=\"vueApp\" v-cloak><div id=\"main\" ref=\"main\" :class=\"mainElemClassNames\" :style=\"mainElemStyles\" @mousedown=\"onMainElemMouseDown\"><div id=\"displays\"><div ref=\"displaysScroller\" @scroll=\"onDisplaysScroll\"><template v-for=\"display in displays\"><div v-if=\"display.type === 'prism'\"><div v-if=\"display.isHidden\" class=\"code-header toggleable no-select\" @click=\"display.isCodeShown = !display.isCodeShown\" :title=\"display.isCodeShown ? 'Hide Code' : 'Show Code'\"><span :class=\"['arrow', 'expandable', display.isCodeShown ? 'expanded' : '']\"></span>{{ display.header || 'Hidden code' }}</div><div v-else-if=\"display.header\" class=\"code-header\">{{ display.header }}</div><div v-if=\"display.isCodeShown\" class=\"console-row code-row\"><span class=\"row-icon\"><icon name=\"chevron\"></icon></span><prism language=\"javascript\" :code=\"display.value\" :is-dark=\"theme === 'dark'\" match-braces></prism><button class=\"copy-to-editor-button\" title=\"Copy to editor\" @click=\"copyToEditor(display.value)\"><icon name=\"copyToEditor\"></icon></button></div></div><div v-if=\"display.type === 'log' &amp;&amp; !isInCollapsedGroup(display)\" :class=\"['console-row', 'log-' + display.key, display.groupId ? 'group-header' : '']\" :style=\"{'--depth': display.groupIds.length}\" :title=\"display.name\" @click=\"onLogRowClick(display, $event)\"><span v-if=\"display.key === 'error' || display.key === 'assert'\" class=\"row-icon\"><icon name=\"consoleError\"></icon></span><span v-else-if=\"display.key === 'warn'\" class=\"row-icon\"><icon name=\"consoleWarning\"></icon></span><span v-else-if=\"display.key === 'result'\" class=\"row-icon\"><icon name=\"result\"></icon></span><span v-else-if=\"display.groupId\" :class=\"['row-icon', 'arrow', 'expandable', display.isCollapsed ? '' : 'expanded']\"></span><div class=\"row-content\"><table v-if=\"display.table\" class=\"console-table\"><thead><tr><th v-for=\"header in display.table.headers\">{{ header }}</th></tr></thead><tbody><tr v-for=\"row in display.table.rows\"><td>{{ row.index }}</td><td v-for=\"cell in row.cells\"><template v-if=\"cell\"><span v-for=\"part in cell.parts\" :class=\"'t-' + part[0]\">{{ part[1] }}</span></template></td></tr></tbody></table><js-value v-for=\"(description, index) in display.descriptions\" :description=\"description\" :path=\"[display.logId, index]\"></js-value><div v-if=\"display.stack\" class=\"trace-stack\">{{ display.stack }}</div></div></div><div v-if=\"display.type === 'notice'\" class=\"console-row notice\">{{ display.message }}</div><div v-if=\"display.type === 'error'\" class=\"console-row log-error\"><span class=\"row-icon\"><icon name=\"consoleError\"></icon></span><div class=\"row-content\">{{ display.message }}</div></div></template></div></div><div class=\"divider\" ref=\"mainDivider\"></div><div id=\"editor\"><ace-editor v-model=\"jsCode\" language=\"javascript\" :theme=\"theme\" :font-size=\"Math.round(12 * textScale)\" @key-combo=\"onEditorKeyCombo\" height=\"100%\"></ace-editor></div></div><div id=\"bottomNav\"><div class=\"brand\"><button class=\"logo-button\" title=\"About JS Box\" @click=\"openAbout('about')\"><span class=\"logo\"><span class=\"logo-mark\">JS</span><span class=\"logo-text\">Box</span></span></button> <span class=\"runner-badge\" :title=\"runnerMode === 'window' ? 'Code runs directly in this page' : 'Code runs in a Web Worker (no DOM access)'\">{{ runnerMode === 'window' ? 'Window' : 'Worker' }}</span></div><div class=\"buttons\"><template v-for=\"bottomButton in bottomButtons\"><span v-if=\"bottomButton.isSeparator\" class=\"separator\"></span> <button v-else :class=\"bottomButton.className\" @click=\"bottomButton.callback.call(this, $event)\" :title=\"bottomButton.title\" :disabled=\"bottomButton.disableIf &amp;&amp; bottomButton.disableIf.call(this)\"><icon :name=\"bottomButton.iconName\"></icon><span v-if=\"bottomButton.label\" class=\"label\">{{ bottomButton.label }}</span></button></template></div></div><div v-if=\"isMenuOpen\" class=\"more-menu\" role=\"menu\" aria-label=\"More\" ref=\"moreMenu\" @keydown=\"onMenuKeyDown\"><div class=\"menu-row\" role=\"group\" aria-label=\"Text size\"><span class=\"menu-row-label\">Text size</span> <button class=\"menu-item menu-step\" role=\"menuitem\" title=\"Smaller text\" aria-label=\"Smaller text\" :disabled=\"!canShrinkText\" @click=\"changeTextScale(-1)\">A&minus;</button> <button class=\"menu-item menu-step menu-percent\" role=\"menuitem\" title=\"Reset the text size\" aria-label=\"Reset the text size\" @click=\"setTextScale(1)\">{{ Math.round(textScale * 100) }}%</button> <button class=\"menu-item menu-step\" role=\"menuitem\" title=\"Bigger text\" aria-label=\"Bigger text\" :disabled=\"!canGrowText\" @click=\"changeTextScale(1)\">A+</button></div><div class=\"menu-separator\"></div><button v-if=\"isPopOut\" class=\"menu-item\" role=\"menuitem\" @click=\"closeMenu(); bringBack()\"><span class=\"menu-icon\"><icon name=\"popIn\"></icon></span>Bring back into the page</button> <button v-else class=\"menu-item\" role=\"menuitem\" @click=\"popOut()\"><span class=\"menu-icon\"><icon name=\"popOut\"></icon></span>Pop out into a window</button> <button class=\"menu-item\" role=\"menuitem\" @click=\"closeMenu(); openAbout('html')\"><span class=\"menu-icon\"><icon name=\"code\"></icon></span>Copy as HTML&hellip;</button> <button class=\"menu-item\" role=\"menuitem\" @click=\"closeMenu(); resetConsole()\"><span class=\"menu-icon\"><icon name=\"refresh\"></icon></span>Reset&hellip;</button><div class=\"menu-separator\"></div><button class=\"menu-item\" role=\"menuitem\" @click=\"closeMenu(); openAbout('about')\"><span class=\"menu-icon\"><icon name=\"info\"></icon></span>About JS Box</button></div><div v-if=\"isPoppedOut\" class=\"popped-out\"><div class=\"popped-out-content\"><span class=\"logo logo-medium\"><span class=\"logo-mark\">JS</span><span class=\"logo-text\">Box</span></span><div class=\"popped-out-title\">This console is open in a separate window</div><div class=\"popped-out-text\">Its code still runs in this page.</div><div class=\"dialog-buttons\"><button class=\"dialog-button\" @click=\"focusPopOut\">Show the window</button> <button class=\"dialog-button primary\" @click=\"requestPopIn\">Bring it back</button></div></div></div><div v-if=\"isAboutOpen\" class=\"dialog-backdrop\" @mousedown.self=\"closeAbout\" @keydown.esc=\"closeAbout\"><div :class=\"['dialog', 'about-dialog', aboutTab === 'html' ? 'is-export' : '']\" role=\"dialog\" aria-modal=\"true\" aria-label=\"About JS Box\"><div class=\"about-header\"><div class=\"tabs\" role=\"tablist\"><button role=\"tab\" :aria-selected=\"aboutTab === 'about'\" :class=\"['tab', aboutTab === 'about' ? 'active' : '']\" @click=\"aboutTab = 'about'\">About</button> <button role=\"tab\" :aria-selected=\"aboutTab === 'html'\" :class=\"['tab', aboutTab === 'html' ? 'active' : '']\" @click=\"aboutTab = 'html'\">Copy as HTML</button></div><button class=\"close-button\" ref=\"aboutCloseButton\" title=\"Close\" @click=\"closeAbout\"><icon name=\"close\"></icon></button></div><div v-if=\"aboutTab === 'about'\" class=\"about-body\"><div class=\"about-title\"><span class=\"logo logo-medium\"><span class=\"logo-mark\">JS</span><span class=\"logo-text\">Box</span></span><div><div class=\"about-name\">YourJS Box <span class=\"about-aka\">aka JS Box</span></div><div class=\"about-version\">Version {{ packageInfo.version }}</div></div></div><p class=\"about-description\">An interactive JavaScript console that can be embedded in any web page with a single script tag.</p><div class=\"about-links\"><a :href=\"packageInfo.homepage\" target=\"_blank\" rel=\"noopener\">Website</a> <a :href=\"packageInfo.repoUrl\" target=\"_blank\" rel=\"noopener\">GitHub</a> <a :href=\"packageInfo.repoUrl + '#readme'\" target=\"_blank\" rel=\"noopener\">Documentation</a> <a :href=\"packageInfo.bugsUrl\" target=\"_blank\" rel=\"noopener\">Report an issue</a></div><h3>This console</h3><dl class=\"about-details\"><dt>Code runs in</dt><dd>{{ runnerDescription }}</dd><dt>Theme</dt><dd>{{ themeDescription }}</dd><dt>Code blocks run as</dt><dd>{{ blockTypeDescription }}</dd><dt>Results</dt><dd>{{ showResults ? 'The value of the last expression is shown' : 'Not shown' }}</dd><dt>Layout</dt><dd>{{ layoutDescription }}</dd></dl><h3>Keyboard shortcuts</h3><dl class=\"about-details\"><dt><kbd>{{ modKey }}</kbd> + <kbd>Enter</kbd></dt><dd>Run the next block of code</dd><dt><kbd>Esc</kbd></dt><dd>Close this window, the menu or full screen</dd></dl><div class=\"about-footer\">MIT License &copy; 2023-present Christopher West &middot; Built with Vue {{ libraryVersions.vue }}, Ace {{ libraryVersions['ace-builds'] }}, Prism {{ libraryVersions.prismjs }} and Acorn {{ libraryVersions.acorn }}</div></div><div v-else class=\"about-body export-body\"><div class=\"export-options\"><div class=\"segmented\" role=\"radiogroup\" aria-label=\"Code\"><button v-for=\"option in exportCodeOptions\" role=\"radio\" :aria-checked=\"exportCode === option.value\" :class=\"exportCode === option.value ? 'active' : ''\" @click=\"exportCode = option.value\">{{ option.label }}</button></div><div class=\"segmented\" role=\"radiogroup\" aria-label=\"Format\"><button v-for=\"option in exportFormatOptions\" role=\"radio\" :aria-checked=\"exportFormat === option.value\" :class=\"exportFormat === option.value ? 'active' : ''\" @click=\"exportFormat = option.value\">{{ option.label }}</button></div></div><div class=\"export-note\">{{ exportNote }}</div><div class=\"export-preview\"><ace-editor :model-value=\"exportHtml\" language=\"html\" :theme=\"theme\" height=\"100%\" :read-only=\"true\"></ace-editor></div><div class=\"export-actions\"><button class=\"dialog-button\" @click=\"downloadExport\">Download page</button> <button class=\"dialog-button primary\" @click=\"copyExport\">{{ copyLabel }}</button></div></div></div></div><div v-if=\"dialog\" class=\"dialog-backdrop\" @mousedown.self=\"closeDialog(false)\" @keydown.esc=\"closeDialog(false)\"><div class=\"dialog\" role=\"alertdialog\" aria-modal=\"true\" :aria-label=\"dialog.title\"><div class=\"dialog-title\">{{ dialog.title }}</div><div class=\"dialog-message\">{{ dialog.message }}</div><div class=\"dialog-buttons\"><button class=\"dialog-button\" @click=\"closeDialog(false)\">Cancel</button> <button class=\"dialog-button primary\" ref=\"dialogConfirmButton\" @click=\"closeDialog(true)\">{{ dialog.confirmText }}</button></div></div></div></div>";
+  const VIEWER_IFRAME_HTML = "<div id=\"splash\" aria-label=\"Loading\"><div class=\"splash-content\"><span class=\"logo logo-large\"><span class=\"logo-mark\">JS</span><span class=\"logo-text\">Box</span></span><div class=\"splash-progress\"><div></div></div><div class=\"splash-message splash-slow\">Still loading&hellip;</div><div class=\"splash-message splash-error\">JS Box couldn&rsquo;t load. Please check your connection and reload the page.</div></div></div><div id=\"vueApp\" v-cloak><input type=\"file\" ref=\"fileInput\" class=\"file-input\" accept=\".js,.mjs,.cjs,.txt,text/javascript,text/plain\" tabindex=\"-1\" aria-hidden=\"true\" @change=\"onFileChosen\"><div id=\"main\" ref=\"main\" :class=\"mainElemClassNames\" :style=\"mainElemStyles\" @mousedown=\"onMainElemMouseDown\"><div id=\"displays\"><div ref=\"displaysScroller\" @scroll=\"onDisplaysScroll\"><template v-for=\"display in displays\"><div v-if=\"display.type === 'prism'\"><div v-if=\"display.isHidden\" class=\"code-header toggleable no-select\" @click=\"display.isCodeShown = !display.isCodeShown\" :title=\"display.isCodeShown ? 'Hide Code' : 'Show Code'\"><span :class=\"['arrow', 'expandable', display.isCodeShown ? 'expanded' : '']\"></span>{{ display.header || 'Hidden code' }}</div><div v-else-if=\"display.header\" class=\"code-header\">{{ display.header }}</div><div v-if=\"display.isCodeShown\" class=\"console-row code-row\"><span class=\"row-icon\"><icon name=\"chevron\"></icon></span><prism language=\"javascript\" :code=\"display.value\" :is-dark=\"theme === 'dark'\" match-braces></prism><button class=\"copy-to-editor-button\" title=\"Copy to editor\" @click=\"copyToEditor(display.value)\"><icon name=\"copyToEditor\"></icon></button></div></div><div v-if=\"display.type === 'log' &amp;&amp; !isInCollapsedGroup(display)\" :class=\"['console-row', 'log-' + display.key, display.groupId ? 'group-header' : '']\" :style=\"{'--depth': display.groupIds.length}\" :title=\"display.name\" @click=\"onLogRowClick(display, $event)\"><span v-if=\"display.key === 'error' || display.key === 'assert'\" class=\"row-icon\"><icon name=\"consoleError\"></icon></span><span v-else-if=\"display.key === 'warn'\" class=\"row-icon\"><icon name=\"consoleWarning\"></icon></span><span v-else-if=\"display.key === 'result'\" class=\"row-icon\"><icon name=\"result\"></icon></span><span v-else-if=\"display.groupId\" :class=\"['row-icon', 'arrow', 'expandable', display.isCollapsed ? '' : 'expanded']\"></span><div class=\"row-content\"><table v-if=\"display.table\" class=\"console-table\"><thead><tr><th v-for=\"header in display.table.headers\">{{ header }}</th></tr></thead><tbody><tr v-for=\"row in display.table.rows\"><td>{{ row.index }}</td><td v-for=\"cell in row.cells\"><template v-if=\"cell\"><span v-for=\"part in cell.parts\" :class=\"'t-' + part[0]\">{{ part[1] }}</span></template></td></tr></tbody></table><js-value v-for=\"(description, index) in display.descriptions\" :description=\"description\" :key-path=\"[]\" :path=\"[display.logId, index]\"></js-value><div v-if=\"display.stack\" class=\"trace-stack\">{{ display.stack }}</div></div></div><div v-if=\"display.type === 'notice'\" class=\"console-row notice\">{{ display.message }}</div><div v-if=\"display.type === 'error'\" class=\"console-row log-error\"><span class=\"row-icon\"><icon name=\"consoleError\"></icon></span><div class=\"row-content\">{{ display.message }}</div></div></template></div></div><div class=\"divider\" ref=\"mainDivider\"></div><div id=\"editor\"><ace-editor ref=\"editor\" v-model=\"jsCode\" language=\"javascript\" :theme=\"theme\" :font-size=\"Math.round(12 * textScale)\" @key-combo=\"onEditorKeyCombo\" @history-key=\"onEditorHistoryKey\" height=\"100%\"></ace-editor></div></div><div id=\"bottomNav\"><div class=\"brand\"><button class=\"logo-button\" title=\"About JS Box\" @click=\"openAbout('about')\"><span class=\"logo\"><span class=\"logo-mark\">JS</span><span class=\"logo-text\">Box</span></span></button> <span class=\"runner-badge\" :title=\"runnerMode === 'window' ? 'Code runs directly in this page' : 'Code runs in a Web Worker (no DOM access)'\">{{ runnerMode === 'window' ? 'Window' : 'Worker' }}</span></div><div class=\"buttons\"><template v-for=\"bottomButton in bottomButtons\"><span v-if=\"bottomButton.isSeparator\" class=\"separator\"></span> <button v-else :class=\"bottomButton.className\" @click=\"bottomButton.callback.call(this, $event)\" :title=\"bottomButton.title\" :disabled=\"bottomButton.disableIf &amp;&amp; bottomButton.disableIf.call(this)\"><icon :name=\"bottomButton.iconName\"></icon><span v-if=\"bottomButton.label\" class=\"label\">{{ bottomButton.label }}</span></button></template></div></div><div v-if=\"isMenuOpen\" class=\"more-menu\" role=\"menu\" aria-label=\"More\" ref=\"moreMenu\" @keydown=\"onMenuKeyDown\"><div class=\"menu-row\" role=\"group\" aria-label=\"Text size\"><span class=\"menu-row-label\">Text size</span> <button class=\"menu-item menu-step\" role=\"menuitem\" title=\"Smaller text\" aria-label=\"Smaller text\" :disabled=\"!canShrinkText\" @click=\"changeTextScale(-1)\">A&minus;</button> <button class=\"menu-item menu-step menu-percent\" role=\"menuitem\" title=\"Reset the text size\" aria-label=\"Reset the text size\" @click=\"setTextScale(1)\">{{ Math.round(textScale * 100) }}%</button> <button class=\"menu-item menu-step\" role=\"menuitem\" title=\"Bigger text\" aria-label=\"Bigger text\" :disabled=\"!canGrowText\" @click=\"changeTextScale(1)\">A+</button></div><div class=\"menu-separator\"></div><button class=\"menu-item\" role=\"menuitem\" @click=\"openFile()\"><span class=\"menu-icon\"><icon name=\"open\"></icon></span>Open&hellip;</button> <button class=\"menu-item\" role=\"menuitem\" @click=\"saveFile()\"><span class=\"menu-icon\"><icon name=\"save\"></icon></span>Save&hellip;</button><div class=\"menu-separator\"></div><button v-if=\"isPopOut\" class=\"menu-item\" role=\"menuitem\" @click=\"closeMenu(); bringBack()\"><span class=\"menu-icon\"><icon name=\"popIn\"></icon></span>Bring back into the page</button> <button v-else class=\"menu-item\" role=\"menuitem\" @click=\"popOut()\"><span class=\"menu-icon\"><icon name=\"popOut\"></icon></span>Pop out into a window</button> <button class=\"menu-item\" role=\"menuitem\" @click=\"closeMenu(); openAbout('html')\"><span class=\"menu-icon\"><icon name=\"code\"></icon></span>Copy as HTML&hellip;</button> <button class=\"menu-item\" role=\"menuitem\" @click=\"closeMenu(); resetConsole()\"><span class=\"menu-icon\"><icon name=\"refresh\"></icon></span>Reset&hellip;</button><div class=\"menu-separator\"></div><button class=\"menu-item\" role=\"menuitem\" @click=\"closeMenu(); openAbout('about')\"><span class=\"menu-icon\"><icon name=\"info\"></icon></span>About JS Box</button></div><div v-if=\"isHistoryOpen\" class=\"more-menu history-panel\" role=\"menu\" aria-label=\"History\" ref=\"historyPanel\" @keydown=\"onMenuKeyDown\"><div class=\"history-title\">History</div><div v-if=\"!historyEntries.length\" class=\"history-empty\">Code that you run will show up here.</div><button v-for=\"entry in historyEntries\" class=\"menu-item history-item\" role=\"menuitem\" :title=\"commandHistory[entry.index]\" @click=\"recallHistory(entry.index)\"><span class=\"history-label\">{{ entry.label }}</span> <span class=\"history-detail\">{{ entry.detail }}</span></button><div class=\"history-hint\">Tip: press &uarr; at the start of the editor (or &darr; at the end) to go through the history.</div></div><div v-if=\"valueMenu\" class=\"more-menu value-menu\" role=\"menu\" aria-label=\"Value\" ref=\"valueMenu\" :style=\"{left: valueMenu.x + 'px', top: valueMenu.y + 'px'}\" @keydown=\"onMenuKeyDown\"><button class=\"menu-item\" role=\"menuitem\" @click=\"copyValueAsJson()\"><span class=\"menu-icon\"><icon name=\"copy\"></icon></span>Copy as JSON</button> <button class=\"menu-item\" role=\"menuitem\" @click=\"saveValueAsJson()\"><span class=\"menu-icon\"><icon name=\"save\"></icon></span>Save as JSON&hellip;</button> <button class=\"menu-item\" role=\"menuitem\" @click=\"storeValueAsGlobal()\"><span class=\"menu-icon\"><icon name=\"variable\"></icon></span>Store as global variable</button> <button v-if=\"valueMenu.propertyPath\" class=\"menu-item\" role=\"menuitem\" @click=\"copyPropertyPath()\"><span class=\"menu-icon\"><icon name=\"path\"></icon></span>Copy property path</button><template v-if=\"!valueMenu.isPrimitive\"><div class=\"menu-separator\"></div><button class=\"menu-item\" role=\"menuitem\" @click=\"refreshValue()\"><span class=\"menu-icon\"><icon name=\"refresh\"></icon></span>Refresh</button></template></div><div v-if=\"toast\" class=\"toast\" role=\"status\">{{ toast.message }}</div><div v-if=\"isPoppedOut\" class=\"popped-out\"><div class=\"popped-out-content\"><span class=\"logo logo-medium\"><span class=\"logo-mark\">JS</span><span class=\"logo-text\">Box</span></span><div class=\"popped-out-title\">This console is open in a separate window</div><div class=\"popped-out-text\">Its code still runs in this page.</div><div class=\"dialog-buttons\"><button class=\"dialog-button\" @click=\"focusPopOut\">Show the window</button> <button class=\"dialog-button primary\" @click=\"requestPopIn\">Bring it back</button></div></div></div><div v-if=\"isAboutOpen\" class=\"dialog-backdrop\" @mousedown.self=\"closeAbout\" @keydown.esc=\"closeAbout\"><div :class=\"['dialog', 'about-dialog', aboutTab === 'html' ? 'is-export' : '']\" role=\"dialog\" aria-modal=\"true\" aria-label=\"About JS Box\"><div class=\"about-header\"><div class=\"tabs\" role=\"tablist\"><button role=\"tab\" :aria-selected=\"aboutTab === 'about'\" :class=\"['tab', aboutTab === 'about' ? 'active' : '']\" @click=\"aboutTab = 'about'\">About</button> <button role=\"tab\" :aria-selected=\"aboutTab === 'html'\" :class=\"['tab', aboutTab === 'html' ? 'active' : '']\" @click=\"aboutTab = 'html'\">Copy as HTML</button></div><button class=\"close-button\" ref=\"aboutCloseButton\" title=\"Close\" @click=\"closeAbout\"><icon name=\"close\"></icon></button></div><div v-if=\"aboutTab === 'about'\" class=\"about-body\"><div class=\"about-title\"><span class=\"logo logo-medium\"><span class=\"logo-mark\">JS</span><span class=\"logo-text\">Box</span></span><div><div class=\"about-name\">YourJS Box <span class=\"about-aka\">aka JS Box</span></div><div class=\"about-version\">Version {{ packageInfo.version }}</div></div></div><p class=\"about-description\">An interactive JavaScript console that can be embedded in any web page with a single script tag.</p><div class=\"about-links\"><a :href=\"packageInfo.homepage\" target=\"_blank\" rel=\"noopener\">Website</a> <a :href=\"packageInfo.repoUrl\" target=\"_blank\" rel=\"noopener\">GitHub</a> <a :href=\"packageInfo.repoUrl + '#readme'\" target=\"_blank\" rel=\"noopener\">Documentation</a> <a :href=\"packageInfo.bugsUrl\" target=\"_blank\" rel=\"noopener\">Report an issue</a></div><h3>This console</h3><dl class=\"about-details\"><dt>Code runs in</dt><dd>{{ runnerDescription }}</dd><dt>Theme</dt><dd>{{ themeDescription }}</dd><dt>Code blocks run as</dt><dd>{{ blockTypeDescription }}</dd><dt>Imports</dt><dd>{{ importsUrl ? 'Packages imported by name load from ' + importsUrl.replace('{specifier}', '\u2026') : 'Only URLs and paths can be imported' }}</dd><dt>Results</dt><dd>{{ showResults ? 'The value of the last expression is shown' : 'Not shown' }}</dd><dt>Layout</dt><dd>{{ layoutDescription }}</dd></dl><h3>Keyboard shortcuts</h3><dl class=\"about-details\"><dt><kbd>{{ modKey }}</kbd> + <kbd>Enter</kbd></dt><dd>Run the next block of code</dd><dt><kbd>&uarr;</kbd> / <kbd>&darr;</kbd></dt><dd>Go through the code that was run (at the very start or end of the editor)</dd><dt><kbd>{{ modKey === 'Ctrl' ? 'Alt' : '&#8997;' }}</kbd> + <kbd>H</kbd></dt><dd>Show the history</dd><dt><kbd>Esc</kbd></dt><dd>Close this window, the menu or full screen</dd></dl><div class=\"about-footer\">MIT License &copy; 2023-present Chris West &middot; Built with Vue {{ libraryVersions.vue }}, Ace {{ libraryVersions['ace-builds'] }}, Prism {{ libraryVersions.prismjs }} and Acorn {{ libraryVersions.acorn }}</div></div><div v-else class=\"about-body export-body\"><div class=\"export-options\"><div class=\"segmented\" role=\"radiogroup\" aria-label=\"Code\"><button v-for=\"option in exportCodeOptions\" role=\"radio\" :aria-checked=\"exportCode === option.value\" :class=\"exportCode === option.value ? 'active' : ''\" @click=\"exportCode = option.value\">{{ option.label }}</button></div><div class=\"segmented\" role=\"radiogroup\" aria-label=\"Format\"><button v-for=\"option in exportFormatOptions\" role=\"radio\" :aria-checked=\"exportFormat === option.value\" :class=\"exportFormat === option.value ? 'active' : ''\" @click=\"exportFormat = option.value\">{{ option.label }}</button></div></div><div class=\"export-note\">{{ exportNote }}</div><div class=\"export-preview\"><ace-editor :model-value=\"exportHtml\" language=\"html\" :theme=\"theme\" height=\"100%\" :read-only=\"true\"></ace-editor></div><div class=\"export-actions\"><button class=\"dialog-button\" @click=\"downloadExport\">Download page</button> <button class=\"dialog-button primary\" @click=\"copyExport\">{{ copyLabel }}</button></div></div></div></div><div v-if=\"dialog\" class=\"dialog-backdrop\" @mousedown.self=\"closeDialog(false)\" @keydown.esc=\"closeDialog(false)\"><div class=\"dialog\" role=\"alertdialog\" aria-modal=\"true\" :aria-label=\"dialog.title\"><div class=\"dialog-title\">{{ dialog.title }}</div><div class=\"dialog-message\">{{ dialog.message }}</div><div class=\"dialog-buttons\"><button class=\"dialog-button\" @click=\"closeDialog(false)\">Cancel</button> <button class=\"dialog-button primary\" ref=\"dialogConfirmButton\" @click=\"closeDialog(true)\">{{ dialog.confirmText }}</button></div></div></div></div>";
   /**
    * The URL of this script which is used to remove this script's lines from the
    * stack traces of errors in window mode.
@@ -62,14 +62,35 @@
     return new URL(baseUrl + path, document.baseURI).href;
   }
 
+  /**
+   * Where packages imported by name (eg. `import _ from 'lodash'`) are loaded
+   * from unless data-imports-url is given.  `{specifier}` is replaced with what
+   * was imported (eg. "lodash@4/fp").
+   */
+  const DEFAULT_IMPORTS_URL = 'https://esm.sh/{specifier}';
+
+  /**
+   * Makes the part of a URL template before its first placeholder absolute
+   * (relative to the page) because the code runs somewhere (eg. a worker)
+   * that doesn't know the page's URL.
+   * @param {string} template
+   * @returns {string}
+   */
+  function resolveUrlTemplate(template) {
+    const index = template.indexOf('{');
+    const prefix = index < 0 ? template : template.slice(0, index);
+    return new URL(prefix || './', document.baseURI).href.replace(/\/$/, prefix.endsWith('/') || !prefix ? '/' : '')
+      + (index < 0 ? '' : template.slice(index));
+  }
+
   /**
    * The only functions that may be relayed to the viewer and to the runner.
    * The runner executes the user's code so anything it sends must be limited
    * to these calls.
    */
   const RELAYABLE_FUNCS = {
-    viewer: ['appendLog', 'appendError', 'clearDisplays', 'onCodeRan', 'updateDescriptionFor'],
-    runner: ['clearLogs', 'reset', 'runCode', 'sendDescriptionFor'],
+    viewer: ['appendLog', 'appendError', 'clearDisplays', 'onCodeRan', 'onStoredAsGlobal', 'onValueJson', 'updateDescriptionFor'],
+    runner: ['clearLogs', 'getValueAsJson', 'refreshDescription', 'reset', 'runCode', 'sendDescriptionFor', 'storeAsGlobal'],
     // Things that the viewer (but never the runner) can ask this script to do.
     host: ['focusPopOut', 'popIn', 'popOut', 'requestPopIn', 'setMaximized'],
   };
@@ -285,10 +306,12 @@
      * @param {boolean=} isInPromise
      */
     function reportUncaught(error, isInPromise) {
-      // Points out how to use top-level await if it was used in a classic block.
-      const hint = runningBlockType === 'classic' && error?.name === 'SyntaxError' && /\bawait\b/.test(error.message)
-        ? '\n(To use top-level await, add data-block-type="module" to the script tag.)'
-        : '';
+      // Points out how to use top-level await or import statements if they were
+      // used in a classic block.
+      const feature = runningBlockType === 'classic' && error?.name === 'SyntaxError'
+        ? /\bawait\b/.test(error.message) ? 'top-level await' : /\bimport\b/.test(error.message) ? 'import statements' : null
+        : null;
+      const hint = feature ? `\n(To use ${feature}, add data-block-type="module" to the script tag.)` : '';
       send({
         target: 'viewer',
         func: 'appendError',
@@ -608,9 +631,9 @@
       const $entries = [];
       const protoEntries = [];
       const $protoEntries = [];
+      let wasIterated = false;
   
       if (value !== null && ('object' === typeof value || 'function' === typeof value)) {
-        let wasIterated = false;
         try {
           // Map
           if (typeName === 'Map') {
@@ -658,7 +681,9 @@
         }
       }
   
-      return {entries, protoEntries, $entries, $protoEntries};
+      // Map and Set entries (and other iterated values) aren't properties so
+      // they have no property path.
+      return {entries, protoEntries, entriesArePropertyKeys: !wasIterated, $entries, $protoEntries};
     }
   
     // ['123', 0, 'entries', 0]
@@ -769,16 +794,25 @@
      *   entry indices.
      */
     function sendDescriptionFor(path) {
-      // Get the description of the desired value.
-      let level = logArgsById;
-      let pathPartIndex = 0;
-      for (let pathPart of path) {
-        if (pathPartIndex && pathPartIndex % 2 === 0) {
-          pathPart = '$' + pathPart;
-        }
-        level = level?.[pathPart];
-        pathPartIndex++;
-      }
+      sendDescription(path, false);
+    }
+  
+    /**
+     * Describes the value again (eg. after the code changed it) including its
+     * preview.
+     * @param {(string|number)[]} path
+     */
+    function refreshDescription(path) {
+      sendDescription(path, true);
+    }
+  
+    /**
+     * @param {(string|number)[]} path
+     * @param {boolean} isRefresh
+     *   If `true` the value's preview is included too.
+     */
+    function sendDescription(path, isRefresh) {
+      const level = getLevel(path);
       if (!level) return;
       const description = describe(level.value, 'receiver' in level ? level.receiver : level.value);
   
@@ -786,11 +820,95 @@
       Object.assign(level, description);
   
       // Send the description without values back to the viewer.
+      const summary = isRefresh
+        ? summarize(level.value, path.length > 2 ? 1 : 0, path[path.length - 2] === 'protoEntries')
+        : {};
       send({
         target: 'viewer',
         func: 'updateDescriptionFor',
-        args: [path, without(['$entries', '$protoEntries'], description)],
+        args: [path, {...without(['$entries', '$protoEntries'], description), ...summary}],
+      });
+    }
+  
+    /**
+     * Finds what is stored for a logged value (or a value within it).
+     * @param {(string|number)[]} path
+     *   The log ID, the argument index and then pairs of entry group keys and
+     *   entry indices.
+     * @returns {{value: *, receiver?: *}|undefined}
+     */
+    function getLevel(path) {
+      let level = logArgsById;
+      path.forEach((pathPart, index) => {
+        level = level?.[index && index % 2 === 0 ? '$' + pathPart : pathPart];
       });
+      return level;
+    }
+  
+    /**
+     * Sends a value as JSON to the viewer (eg. to copy or save it).
+     * @param {(string|number)[]} path
+     * @param {string} requestId
+     */
+    function getValueAsJson(path, requestId) {
+      const level = getLevel(path);
+      let result;
+      try {
+        result = level ? toJson(level.value) : {error: 'The value is no longer available.'};
+      }
+      catch (e) {
+        result = {error: `The value couldn't be converted to JSON (${e?.message ?? e}).`};
+      }
+      send({target: 'viewer', func: 'onValueJson', args: [{requestId, ...result}]});
+    }
+  
+    /**
+     * Converts a value to JSON like JSON.stringify() does except that Maps and
+     * Sets become arrays, BigInts become strings and circular references (an
+     * object inside of itself) are left out instead of causing an error.  An
+     * object that appears more than once without being circular is kept.
+     * @param {*} value
+     * @returns {{json?: string, circularCount: number, error?: string}}
+     */
+    function toJson(value) {
+      let circularCount = 0;
+      // The objects currently being converted along with what they were
+      // converted from (eg. a Map is converted to an array).
+      const stack = [];
+      const json = JSON.stringify(value, function(key, val) {
+        // `this` is the object containing `key` so anything after it on the
+        // stack has already been converted.
+        while (stack.length && stack[stack.length - 1].converted !== this) stack.pop();
+  
+        if ('bigint' === typeof val) return `${val}`;
+        if (val !== null && 'object' === typeof val) {
+          const original = val;
+          if (stack.some(item => item.original === original)) {
+            circularCount++;
+            return undefined;
+          }
+          if (val instanceof Map || val instanceof Set) val = [...val];
+          stack.push({original, converted: val});
+        }
+        return val;
+      }, 2);
+      return json === undefined
+        ? {error: 'This value can\'t be represented as JSON.', circularCount}
+        : {json, circularCount};
+    }
+  
+    /**
+     * Stores a value as a global variable (temp1, temp2, etc.) like the
+     * browser's console does so that code can use it.
+     * @param {(string|number)[]} path
+     */
+    function storeAsGlobal(path) {
+      const level = getLevel(path);
+      if (!level) return;
+      let index = 1;
+      while (`temp${index}` in globalThis) index++;
+      globalThis[`temp${index}`] = level.value;
+      send({target: 'viewer', func: 'onStoredAsGlobal', args: [`temp${index}`]});
     }
   
     /**
@@ -801,7 +919,7 @@
       groupIds = [];
     }
   
-    return {clearLogs, destroy, runCode, sendDescriptionFor};
+    return {clearLogs, destroy, getValueAsJson, refreshDescription, runCode, sendDescriptionFor, storeAsGlobal};
   }
   
 
@@ -928,6 +1046,10 @@
     const runnerMode = dataset.runner === 'window' ? 'window' : 'worker';
     const blockType = dataset.blockType === 'module' ? 'module' : 'classic';
     const showResults = dataset.showResults !== 'false';
+    // An empty data-imports-url turns off loading packages by name.
+    const importsUrl = dataset.importsUrl == null
+      ? DEFAULT_IMPORTS_URL
+      : dataset.importsUrl && resolveUrlTemplate(dataset.importsUrl);
     const libraryUrl = getLibraryFileUrl.bind(null, dataset.librariesUrl || DEFAULT_LIBRARIES_URL);
 
     // The viewer in the page and, when the console is popped out, the viewer
@@ -1117,8 +1239,8 @@
           
             const hidePrefix = dataset.hidePrefix ?? '';
             const darkSchemeQuery = matchMedia('(prefers-color-scheme: dark)');
-            const originalCode = unindentMin(jsCode);
-            const {visibleCode, hiddenGroups} = extractHiddenGroups(originalCode, hidePrefix);
+            const startingCode = unindentMin(jsCode);
+            const {visibleCode, hiddenGroups} = extractHiddenGroups(startingCode, hidePrefix);
             const isMac = /Mac|iPhone|iPad/.test(navigator.platform);
             const copyHiddenGroups = () => hiddenGroups.map(group => ({...group}));
           
@@ -1130,6 +1252,12 @@
                     hidePrefix,
                     hiddenGroups: copyHiddenGroups(),
                     runnerMode: meta.runnerMode,
+                    importsUrl: meta.importsUrl,
+                    // The code the console starts with (and goes back to when reset)
+                    // which changes when a file is opened.
+                    originalCode: startingCode,
+                    // The name of the file that was last opened or saved.
+                    fileName: null,
                     blockType: meta.blockType,
                     showResults: meta.showResults,
                     packageInfo: meta.packageInfo,
@@ -1166,6 +1294,18 @@
                     dividerSize: '8px',
                     tempDividerPct: null,
                     isMenuOpen: false,
+                    isHistoryOpen: false,
+                    // The code that was run (newest last) which can be brought back into
+                    // the editor like the browser's console (eg. with the up arrow).
+                    commandHistory: [],
+                    // While going through the history:  the index of the code shown and
+                    // the unrun code that was in the editor (shown again at the end).
+                    historyIndex: null,
+                    historyDraft: null,
+                    /** @type {{x: number, y: number, path: any[], propertyPath: string?, isPrimitive: boolean}?} */
+                    valueMenu: null,
+                    /** @type {{message: string}?} */
+                    toast: null,
                     textScale: loadTextScale(),
                     isFullscreen: false,
                     // Set when full screen isn't allowed so the console fills the page.
@@ -1233,12 +1373,23 @@
                   /**
                    * The code that the copied console will start with.
                    */
+                  /**
+                   * The original code split into the code for the editor and the
+                   * hidden groups.
+                   */
+                  originalGroups() {
+                    return extractHiddenGroups(this.originalCode, this.hidePrefix);
+                  },
                   exportJsCode() {
-                    if (this.exportCode === 'original') return originalCode;
+                    if (this.exportCode === 'original') return this.originalCode;
                     if (this.exportCode === 'blank') return '';
-          
-                    // The groups that already ran, then the groups in the editor with
-                    // any hidden groups that haven't run yet in their original places.
+                    return this.currentCode;
+                  },
+                  /**
+                   * The groups that already ran, then the groups in the editor with any
+                   * hidden groups that haven't run yet in their original places.
+                   */
+                  currentCode() {
                     const blocks = this.runHistory.slice();
                     const pendingHiddenGroups = this.hiddenGroups.slice();
                     let visibleCount = this.runCount;
@@ -1277,11 +1428,23 @@
                   bottomButtons() {
                     const isFullscreen = this.isFullscreen || this.isMaximized;
                     return [
+                      {
+                        iconName: 'more',
+                        title: 'More',
+                        className: 'more-button',
+                        callback() { this.toggleMenu(); },
+                      },
                       {
                         iconName: 'clear',
                         title: 'Clear console',
                         callback() { this.clearConsole(); },
                       },
+                      {
+                        iconName: 'history',
+                        title: `History (${isMac ? '\u2325' : 'Alt+'}H)`,
+                        className: 'history-button',
+                        callback() { this.toggleHistory(); },
+                      },
                       {
                         iconName: 'horizontalView',
                         title: 'Show the editor below the console',
@@ -1299,12 +1462,6 @@
                         title: isFullscreen ? 'Exit full screen' : 'Full screen',
                         callback() { this.toggleFullscreen(); },
                       },
-                      {
-                        iconName: 'more',
-                        title: 'More',
-                        className: 'more-button',
-                        callback() { this.toggleMenu(); },
-                      },
                       {
                         iconName: this.runningCount ? 'spinner' : 'play',
                         label: 'Run',
@@ -1315,6 +1472,20 @@
                       },
                     ].filter(btn => !btn.showIf || btn.showIf.call(this));
                   },
+                  /**
+                   * The history's entries (newest first) for the history list.
+                   */
+                  historyEntries() {
+                    return this.commandHistory.map((code, index) => {
+                      const [group] = parseJSCodeGroups(code);
+                      const lines = (group?.lines ?? code).split('\n').filter(line => line.trim());
+                      return {
+                        index,
+                        label: group?.headerLines || lines[0] || '',
+                        detail: `${lines.length} line${lines.length === 1 ? '' : 's'}`,
+                      };
+                    }).reverse();
+                  },
                   canShrinkText() {
                     return this.textScale > TEXT_SCALES[0];
                   },
@@ -1355,9 +1526,110 @@
                     this.runGroup(jsCodeGroup0);
           
                     // Remove the code that was run from the editor.
-                    this.jsCode = otherJsCodeGroups.map(g => g.allLines).join('\n');
+                    const remainingCode = otherJsCodeGroups.map(g => g.allLines).join('\n');
           
-                    this.runCount++;
+                    if (this.historyIndex !== null) {
+                      // Code from the history was run so the unrun code comes back.  It
+                      // doesn't count as moving through the code so hidden blocks still
+                      // run in their places.
+                      this.jsCode = [remainingCode, this.historyDraft].filter(code => code.trim()).join('\n');
+                      this.historyIndex = this.historyDraft = null;
+                    }
+                    else {
+                      this.jsCode = remainingCode;
+                      this.runCount++;
+                    }
+                  },
+                  /**
+                   * Shows older (-1) or newer (1) code from the history in the editor.
+                   * Going newer than the newest shows the unrun code again.
+                   * @param {-1|1} direction
+                   * @returns {boolean}
+                   *   `true` if the history was used (so the key shouldn't do anything
+                   *   else).
+                   */
+                  navigateHistory(direction) {
+                    const history = this.commandHistory;
+                    if (direction < 0) {
+                      if (!history.length) return false;
+                      if (this.historyIndex === null) {
+                        this.historyDraft = this.jsCode;
+                        this.historyIndex = history.length;
+                      }
+                      if (this.historyIndex > 0) this.showHistoryCode(this.historyIndex - 1, 'start');
+                      return true;
+                    }
+                    if (this.historyIndex === null) return false;
+                    if (this.historyIndex < history.length - 1) {
+                      this.showHistoryCode(this.historyIndex + 1, 'end');
+                    }
+                    else {
+                      const draft = this.historyDraft;
+                      this.historyIndex = this.historyDraft = null;
+                      this.setEditorCode(draft, 'end');
+                    }
+                    return true;
+                  },
+                  /**
+                   * Shows code from the history in the editor (saving the unrun code if
+                   * this is the first time).
+                   * @param {number} index
+                   * @param {"start"|"end"} cursorAt
+                   */
+                  showHistoryCode(index, cursorAt) {
+                    if (this.historyIndex === null) this.historyDraft = this.jsCode;
+                    this.historyIndex = index;
+                    this.setEditorCode(this.commandHistory[index], cursorAt);
+                  },
+                  /**
+                   * @param {string} code
+                   * @param {"start"|"end"} cursorAt
+                   *   Where the cursor goes so that pressing the same arrow key again
+                   *   keeps going through the history.
+                   */
+                  setEditorCode(code, cursorAt) {
+                    this.jsCode = code;
+                    this.$nextTick(() => {
+                      const editor = this.$refs.editor?.editor;
+                      if (!editor) return;
+                      if (cursorAt === 'end') editor.navigateFileEnd();
+                      else editor.navigateFileStart();
+                    });
+                  },
+                  /**
+                   * Called by the editor when the up or down arrow is pressed with the
+                   * cursor at the very start or end (and nothing selected).
+                   * @param {{direction: -1|1, handled: boolean}} event
+                   */
+                  onEditorHistoryKey(event) {
+                    event.handled = this.navigateHistory(event.direction);
+                  },
+                  toggleHistory() {
+                    if (this.isHistoryOpen) {
+                      this.isHistoryOpen = false;
+                    }
+                    else {
+                      this.closeMenu();
+                      this.closeValueMenu();
+                      this.isHistoryOpen = true;
+                      this.$nextTick(() => this.$refs.historyPanel?.querySelector('.menu-item')?.focus());
+                    }
+                  },
+                  /**
+                   * Puts code from the history list into the editor.
+                   * @param {number} index
+                   */
+                  recallHistory(index) {
+                    this.isHistoryOpen = false;
+                    this.showHistoryCode(index, 'start');
+                    this.$nextTick(() => this.$refs.editor?.editor.focus());
+                  },
+                  /**
+                   * Forgets that the history was being gone through (eg. when the code in
+                   * the editor is replaced).
+                   */
+                  stopNavigatingHistory() {
+                    this.historyIndex = this.historyDraft = null;
                   },
                   /**
                    * Runs the next hidden group if all of the visible code that came
@@ -1385,17 +1657,23 @@
                     });
                     this.runningCount++;
                     this.runHistory.push(group.allLines);
+                    // Hidden code wasn't typed or seen so it isn't in the history.
+                    const historyCode = group.allLines.trim();
+                    if (!isHidden && historyCode && this.commandHistory[this.commandHistory.length - 1] !== historyCode) {
+                      this.commandHistory.push(historyCode);
+                      if (this.commandHistory.length > 200) this.commandHistory.shift();
+                    }
+                    const {code, resultRange} = prepareCode(group.lines, {
+                      blockType: this.blockType,
+                      importsUrl: this.importsUrl,
+                      // Like the browser's console, show the value of the last
+                      // expression (except for hidden code).
+                      findResult: this.showResults && !isHidden,
+                    });
                     messageParent({
                       target: 'runner',
                       func: 'runCode',
-                      args: [group.lines, {
-                        blockType: this.blockType,
-                        // Like the browser's console, show the value of the last
-                        // expression (except for hidden code).
-                        resultRange: this.showResults && !isHidden
-                          ? findLastExpression(group.lines, this.blockType)
-                          : null,
-                      }],
+                      args: [code, {blockType: this.blockType, resultRange}],
                     });
                   },
                   clearConsole() {
@@ -1412,16 +1690,88 @@
                       confirmText: 'Reset',
                     });
                     if (!isConfirmed) return;
-          
+                    this.restart();
+                  },
+                  /**
+                   * Starts over with the original code (clearing the output and, in
+                   * worker mode, starting a new worker).
+                   */
+                  restart() {
+                    const {visibleCode, hiddenGroups} = this.originalGroups;
                     this.displays = [];
                     this.jsCode = visibleCode;
-                    this.hiddenGroups = copyHiddenGroups();
+                    this.hiddenGroups = hiddenGroups.map(group => ({...group}));
                     this.runCount = 0;
                     this.runningCount = 0;
                     this.runHistory = [];
+                    this.stopNavigatingHistory();
                     messageParent({target: 'runner', func: 'reset', args: []});
                     this.runHiddenGroups();
                   },
+                  /**
+                   * Shows the file picker for opening a JavaScript file.
+                   */
+                  openFile() {
+                    this.closeMenu();
+                    const {fileInput} = this.$refs;
+                    fileInput.value = '';
+                    fileInput.click();
+                  },
+                  /**
+                   * Makes the chosen file's code the code that the console starts with.
+                   * @param {Event} evt
+                   */
+                  async onFileChosen(evt) {
+                    const file = evt.target.files?.[0];
+                    if (!file) return;
+                    const code = unindentMin(await file.text());
+                    if (this.displays.length || this.jsCode.trim()) {
+                      const isConfirmed = await this.confirm({
+                        title: `Open ${file.name}?`,
+                        message: 'The output will be cleared and the code in the editor will be replaced with the code in the file.'
+                          + (this.runnerMode === 'window'
+                            ? '  Anything the code already defined on the page will stay defined.'
+                            : ''),
+                        confirmText: 'Open',
+                      });
+                      if (!isConfirmed) return;
+                    }
+                    this.fileName = file.name;
+                    this.originalCode = code;
+                    this.restart();
+                  },
+                  /**
+                   * Saves the current code (what already ran and what is in the editor)
+                   * as a JavaScript file which can be opened later.
+                   */
+                  async saveFile() {
+                    this.closeMenu();
+                    const code = this.currentCode + '\n';
+                    const suggestedName = this.fileName || 'js-box.js';
+          
+                    // Shows a "Save as" dialog where it is supported.
+                    if ('function' === typeof window.showSaveFilePicker) {
+                      try {
+                        const handle = await showSaveFilePicker({
+                          suggestedName,
+                          types: [{description: 'JavaScript', accept: {'text/javascript': ['.js', '.mjs']}}],
+                        });
+                        const writable = await handle.createWritable();
+                        await writable.write(code);
+                        await writable.close();
+                        this.fileName = handle.name;
+                        return;
+                      }
+                      catch (e) {
+                        // The user cancelled.  For other errors the file is downloaded.
+                        if (e?.name === 'AbortError') return;
+                      }
+                    }
+          
+                    const url = URL.createObjectURL(new Blob([code], {type: 'text/javascript'}));
+                    Object.assign(document.createElement('a'), {href: url, download: suggestedName}).click();
+                    setTimeout(() => URL.revokeObjectURL(url), 1000);
+                  },
                   /**
                    * Copies code that was already run into the editor so that it can be run
                    * again (as is or modified), first asking before replacing any code that
@@ -1437,6 +1787,7 @@
                       });
                       if (!isConfirmed) return;
                     }
+                    this.stopNavigatingHistory();
                     this.jsCode = code;
                   },
                   /**
@@ -1520,6 +1871,11 @@
                     return JSON.parse(JSON.stringify({
                       displays: this.displays,
                       jsCode: this.jsCode,
+                      originalCode: this.originalCode,
+                      fileName: this.fileName,
+                      commandHistory: this.commandHistory,
+                      historyIndex: this.historyIndex,
+                      historyDraft: this.historyDraft,
                       runHistory: this.runHistory,
                       hiddenGroups: this.hiddenGroups,
                       runCount: this.runCount,
@@ -1541,6 +1897,8 @@
                       this.closeMenu();
                     }
                     else {
+                      this.isHistoryOpen = false;
+                      this.closeValueMenu();
                       this.isMenuOpen = true;
                       this.$nextTick(() => this.$refs.moreMenu?.querySelector('.menu-item:not(:disabled)')?.focus());
                     }
@@ -1553,14 +1911,21 @@
                    * Lets the arrow keys move between the menu's items.
                    * @param {KeyboardEvent} evt
                    */
+                  /**
+                   * Lets Escape close a menu (or the history list) and the arrow keys move
+                   * between its items.
+                   * @param {KeyboardEvent} evt
+                   */
                   onMenuKeyDown(evt) {
                     if (evt.key === 'Escape') {
                       evt.stopPropagation();
-                      this.closeMenu(true);
+                      this.closeMenu(this.isMenuOpen);
+                      this.closeValueMenu();
+                      this.isHistoryOpen = false;
                     }
                     else if (evt.key === 'ArrowDown' || evt.key === 'ArrowUp') {
                       evt.preventDefault();
-                      const items = [...this.$refs.moreMenu.querySelectorAll('.menu-item:not(:disabled)')];
+                      const items = [...evt.currentTarget.querySelectorAll('.menu-item:not(:disabled)')];
                       const index = items.indexOf(document.activeElement);
                       const next = items[(index + (evt.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length];
                       next?.focus();
@@ -1640,15 +2005,189 @@
                     if (this.isMenuOpen && !evt.target.closest('.more-menu, .more-button')) {
                       this.closeMenu();
                     }
+                    if (this.valueMenu && !evt.target.closest('.value-menu')) {
+                      this.closeValueMenu();
+                    }
+                    if (this.isHistoryOpen && !evt.target.closest('.history-panel, .history-button')) {
+                      this.isHistoryOpen = false;
+                    }
                   },
                   /**
                    * @param {KeyboardEvent} evt
                    */
                   onWindowKeyDown(evt) {
+                    if (evt.altKey && !evt.ctrlKey && !evt.metaKey && evt.code === 'KeyH') {
+                      evt.preventDefault();
+                      evt.stopPropagation();
+                      this.toggleHistory();
+                      return;
+                    }
+                    if (evt.key === 'Escape' && this.valueMenu) {
+                      this.closeValueMenu();
+                      return;
+                    }
                     if (evt.key === 'Escape' && this.isMaximized && !this.isMenuOpen && !this.dialog && !this.isAboutOpen) {
                       this.setMaximized(false);
                     }
                   },
+                  /**
+                   * Shows the menu for a value that was right-clicked.
+                   * @param {MouseEvent} evt
+                   * @param {{path: any[], keyPath: string[]?, isPrimitive: boolean}} value
+                   */
+                  openValueMenu(evt, {path, keyPath, isPrimitive}) {
+                    this.closeMenu();
+                    this.valueMenu = {
+                      x: evt.clientX,
+                      y: evt.clientY,
+                      path: path.slice(),
+                      // Only properties and items (not logged values themselves) have
+                      // a property path.
+                      propertyPath: keyPath?.length ? formatPropertyPath(keyPath) : null,
+                      fileName: keyPath?.length && /^[\w$-]+$/.test(keyPath[keyPath.length - 1]) ? keyPath[keyPath.length - 1] : 'value',
+                      isPrimitive,
+                    };
+                    // Keeps the menu inside of the window.
+                    this.$nextTick(() => {
+                      const menu = this.$refs.valueMenu;
+                      if (!menu || !this.valueMenu) return;
+                      const {width, height} = menu.getBoundingClientRect();
+                      this.valueMenu.x = Math.max(4, Math.min(this.valueMenu.x, innerWidth - width - 4));
+                      this.valueMenu.y = Math.max(4, Math.min(this.valueMenu.y, innerHeight - height - 4));
+                      menu.querySelector('.menu-item')?.focus();
+                    });
+                  },
+                  closeValueMenu() {
+                    this.valueMenu = null;
+                  },
+                  /**
+                   * Asks the runner to convert the value to JSON.
+                   * @param {any[]} path
+                   * @returns {Promise<{json: string?, circularCount: number, error: string?}>}
+                   */
+                  requestValueJson(path) {
+                    const requestId = `${Date.now()}-${Math.random()}`;
+                    return new Promise(resolve => {
+                      jsonRequests.set(requestId, resolve);
+                      messageParent({target: 'runner', func: 'getValueAsJson', args: [path, requestId]});
+                    });
+                  },
+                  /**
+                   * Shows a short message (eg. "Copied") for a few seconds.
+                   * @param {string} message
+                   */
+                  showToast(message) {
+                    clearTimeout(this.toastTimeout);
+                    this.toast = {message};
+                    this.toastTimeout = setTimeout(() => this.toast = null, 3500);
+                  },
+                  /**
+                   * @param {{json: string?, circularCount: number, error: string?}} result
+                   * @param {string} action
+                   *   What was done (eg. "Copied as JSON").
+                   */
+                  showJsonToast({circularCount, error}, action) {
+                    this.showToast(
+                      error || action + (circularCount
+                        ? ` (${circularCount} circular reference${circularCount === 1 ? ' was' : 's were'} left out)`
+                        : '')
+                    );
+                  },
+                  /**
+                   * Copies the value as JSON.  The copy is started right away (while
+                   * the browser still allows it) with the JSON filled in when it is
+                   * ready.
+                   */
+                  async copyValueAsJson() {
+                    // A plain copy because the menu's (reactive) path can't be sent.
+                    const path = [...this.valueMenu.path];
+                    this.closeValueMenu();
+                    const resultPromise = this.requestValueJson(path);
+                    try {
+                      if (window.ClipboardItem && navigator.clipboard?.write) {
+                        await navigator.clipboard.write([new ClipboardItem({
+                          'text/plain': resultPromise.then(({json, error}) => {
+                            if (error) throw new Error(error);
+                            return new Blob([json], {type: 'text/plain'});
+                          }),
+                        })]);
+                      }
+                      else {
+                        const {json, error} = await resultPromise;
+                        if (error) throw new Error(error);
+                        await navigator.clipboard.writeText(json);
+                      }
+                      this.showJsonToast(await resultPromise, 'Copied as JSON');
+                    }
+                    catch (e) {
+                      const result = await resultPromise;
+                      this.showToast(result.error || 'The value couldn\'t be copied.  Your browser may not allow copying here.');
+                    }
+                  },
+                  /**
+                   * Saves the value as a JSON file.  The "Save as" dialog is shown right
+                   * away (while the browser still allows it).
+                   */
+                  async saveValueAsJson() {
+                    const {fileName} = this.valueMenu;
+                    const path = [...this.valueMenu.path];
+                    this.closeValueMenu();
+                    const resultPromise = this.requestValueJson(path);
+                    const suggestedName = `${fileName}.json`;
+                    let handle;
+                    if ('function' === typeof window.showSaveFilePicker) {
+                      try {
+                        handle = await showSaveFilePicker({
+                          suggestedName,
+                          types: [{description: 'JSON', accept: {'application/json': ['.json']}}],
+                        });
+                      }
+                      catch (e) {
+                        if (e?.name === 'AbortError') return;
+                      }
+                    }
+                    const result = await resultPromise;
+                    if (result.error) {
+                      this.showToast(result.error);
+                      return;
+                    }
+                    const text = result.json + '\n';
+                    if (handle) {
+                      const writable = await handle.createWritable();
+                      await writable.write(text);
+                      await writable.close();
+                    }
+                    else {
+                      const url = URL.createObjectURL(new Blob([text], {type: 'application/json'}));
+                      Object.assign(document.createElement('a'), {href: url, download: suggestedName}).click();
+                      setTimeout(() => URL.revokeObjectURL(url), 1000);
+                    }
+                    this.showJsonToast(result, 'Saved as JSON');
+                  },
+                  storeValueAsGlobal() {
+                    const path = [...this.valueMenu.path];
+                    this.closeValueMenu();
+                    messageParent({target: 'runner', func: 'storeAsGlobal', args: [path]});
+                  },
+                  async copyPropertyPath() {
+                    const {propertyPath} = this.valueMenu;
+                    this.closeValueMenu();
+                    try {
+                      await navigator.clipboard.writeText(propertyPath);
+                      this.showToast(`Copied ${propertyPath}`);
+                    }
+                    catch (e) {
+                      this.showToast('The property path couldn\'t be copied.  Your browser may not allow copying here.');
+                    }
+                  },
+                  /**
+                   * Shows the value as it is now (eg. after the code changed it).
+                   */
+                  refreshValue() {
+                    const path = [...this.valueMenu.path];
+                    this.closeValueMenu();
+                    messageParent({target: 'runner', func: 'refreshDescription', args: [path]});
+                  },
                   closeDialog(isConfirmed) {
                     const {dialog} = this;
                     this.dialog = null;
@@ -1669,6 +2208,7 @@
                     }
                   },
                   onDisplaysScroll() {
+                    this.closeValueMenu();
                     const {scrollTop, scrollHeight, clientHeight} = this.$refs.displaysScroller;
                     this.isDisplaysScrolledToBottom = scrollHeight - scrollTop - clientHeight < 8;
                   },
@@ -1742,7 +2282,8 @@
                 mounted() {
                   addEventListener('mousemove', this.onWindowMouseMove);
                   addEventListener('mousedown', this.onWindowMouseDown);
-                  addEventListener('keydown', this.onWindowKeyDown);
+                  // Capturing lets shortcuts (eg. Alt+H) work before the editor sees them.
+                  addEventListener('keydown', this.onWindowKeyDown, true);
                   addEventListener('resize', this.onWindowResize);
                   addEventListener('mouseup', this.onWindowMouseUp);
                   addEventListener('error', this.onWindowError);
@@ -1888,6 +2429,28 @@
                 });
           
                 // Attempt to capture key combos.
+                // Like the browser's console, the up arrow at the very start (or the
+                // down arrow at the very end) with nothing selected goes through the
+                // history.  This listens while capturing so it runs before Ace moves the
+                // cursor.
+                this.$refs.editor.addEventListener('keydown', evt => {
+                  const isUp = evt.key === 'ArrowUp';
+                  if (!isUp && evt.key !== 'ArrowDown') return;
+                  if (evt.shiftKey || evt.altKey || evt.ctrlKey || evt.metaKey || !editor.selection.isEmpty()) return;
+                  const {row, column} = editor.getCursorPosition();
+                  const lastRow = editor.session.getLength() - 1;
+                  const isAtEdge = isUp
+                    ? row === 0 && column === 0
+                    : row === lastRow && column === editor.session.getLine(lastRow).length;
+                  if (!isAtEdge) return;
+                  const event = {direction: isUp ? -1 : 1, handled: false};
+                  this.$emit('historyKey', event);
+                  if (event.handled) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                  }
+                }, true);
+          
                 editor.textInput.getElement().addEventListener('keydown', (evt) => {
                   const isComboKeyCode = evt.keyCode === 16 // SHIFT
                     || evt.keyCode === 17 // CTRL
@@ -1992,6 +2555,12 @@
                     // https://icon-sets.iconify.design/mdi/error-outline/
                     error: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8"/></svg>',
                     // Icons similar to those in the browser's console.
+                    history: '<svg viewBox="0 0 16 16"><path d="M2.5 8a5.5 5.5 0 1 0 1.6-3.9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M2.25 2.5v2.75H5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 5v3.25l2.25 1.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+                    copy: '<svg viewBox="0 0 16 16"><rect x="5.5" y="5.5" width="8" height="8" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M10.5 3.5v-.75A1.25 1.25 0 0 0 9.25 1.5h-5A1.25 1.25 0 0 0 3 2.75v5A1.25 1.25 0 0 0 4.25 9h.75" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>',
+                    variable: '<svg viewBox="0 0 16 16"><path d="M5 2.5c-1.5 1.5-2 3.5-2 5.5s.5 4 2 5.5M11 2.5c1.5 1.5 2 3.5 2 5.5s-.5 4-2 5.5M6.5 6l3 4M9.5 6l-3 4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>',
+                    path: '<svg viewBox="0 0 16 16"><circle cx="3.5" cy="12.5" r="1.5" fill="currentColor"/><circle cx="12.5" cy="3.5" r="1.5" fill="currentColor"/><path d="M3.5 11V8a2 2 0 0 1 2-2h5a2 2 0 0 0 2-2" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>',
+                    open: '<svg viewBox="0 0 16 16"><path d="M2 4.5a1 1 0 0 1 1-1h3.2l1.3 1.5H13a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>',
+                    save: '<svg viewBox="0 0 16 16"><path d="M8 2.5v7M5 7l3 3 3-3M3 11.5v1.5h10v-1.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
                     fullscreen: '<svg viewBox="0 0 16 16"><path d="M2.5 6V2.5H6M10 2.5h3.5V6M13.5 10v3.5H10M6 13.5H2.5V10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
                     exitFullscreen: '<svg viewBox="0 0 16 16"><path d="M6 2.5V6H2.5M13.5 6H10V2.5M10 13.5V10h3.5M2.5 10H6v3.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
                     more: '<svg viewBox="0 0 16 16"><circle cx="3.5" cy="8" r="1.4" fill="currentColor"/><circle cx="8" cy="8" r="1.4" fill="currentColor"/><circle cx="12.5" cy="8" r="1.4" fill="currentColor"/></svg>',
@@ -2017,7 +2586,10 @@
           
           function getJSValueComponentProps() {
             return {
-              props: ['description', 'path', 'name', 'isDimName'],
+              // keyPath is the property keys leading to this value from the logged
+              // value (eg. ["people", "0", "name"]) or null if it can't be reached by
+              // property keys (eg. inside of a Map).
+              props: ['description', 'path', 'name', 'isDimName', 'keyPath'],
               data() {
                 return {
                   isExpanded: false,
@@ -2029,7 +2601,12 @@
                   if (newValue && !this.hasBeenExpanded) {
                     this.hasBeenExpanded = newValue;
                   }
-                }
+                },
+                // When a refresh replaces this value's description, its new contents are
+                // requested if it is still expanded.
+                isPartialDescription(isPartial) {
+                  if (isPartial && this.isExpanded) this.requestDescription();
+                },
               },
               computed: {
                 isPartialDescription() {
@@ -2050,10 +2627,20 @@
                   ];
                 },
                 entryGroups() {
-                  // protoEntries only ever contains the [[Prototype]] entry.
+                  // protoEntries only ever contains the [[Prototype]] entry whose
+                  // members can be reached directly so it adds nothing to the key path.
+                  const {keyPath, description} = this;
                   return [
-                    { key: 'entries', isDim: entry => entry[2] === false },
-                    { key: 'protoEntries', isDim: () => true },
+                    {
+                      key: 'entries',
+                      isDim: entry => entry[2] === false,
+                      getKeyPath: entry => keyPath && description.entriesArePropertyKeys ? keyPath.concat([entry[0]]) : null,
+                    },
+                    {
+                      key: 'protoEntries',
+                      isDim: () => true,
+                      getKeyPath: () => keyPath,
+                    },
                   ];
                 }
               },
@@ -2061,14 +2648,26 @@
                 toggleExpanded() {
                   if (!this.isExpandable) return;
                   this.isExpanded = !this.isExpanded;
-                  if (this.isExpanded && this.isPartialDescription) {
-                    messageParent({target: 'runner', func: 'sendDescriptionFor', args: [this.path]});
-                  }
-                }
+                  if (this.isExpanded && this.isPartialDescription) this.requestDescription();
+                },
+                requestDescription() {
+                  messageParent({target: 'runner', func: 'sendDescriptionFor', args: [this.path]});
+                },
+                /**
+                 * Shows the menu for this value (eg. Copy as JSON).
+                 * @param {MouseEvent} evt
+                 */
+                openMenu(evt) {
+                  this.$root.openValueMenu(evt, {
+                    path: this.path,
+                    keyPath: this.keyPath,
+                    isPrimitive: this.description.isPrimitive,
+                  });
+                },
               },
               template: `
                 <div :class="classNames">
-                  <div :class="['js-value-header', isExpandable ? 'expandable' : '']" @click="toggleExpanded"><span
+                  <div :class="['js-value-header', isExpandable ? 'expandable' : '']" @click="toggleExpanded" @contextmenu.prevent.stop="openMenu"><span
                     v-if="isExpandable || isEntry" :class="['arrow', isExpandable ? 'expandable' : '', isExpanded ? 'expanded' : '']"></span><template
                     v-if="isEntry"><span :class="['entry-key', isDimName ? 'dim' : '']">{{ name }}</span>: </template><span
                     v-for="part in description.parts" :class="'t-' + part[0]">{{ part[1] }}</span></div>
@@ -2081,6 +2680,7 @@
                           :name="entry[0]"
                           :is-dim-name="group.isDim(entry)"
                           :description="entry[1]"
+                          :key-path="group.getKeyPath(entry)"
                           :path="path.concat([group.key, entryIndex])">
                         </js-value>
                       </template>
@@ -2184,30 +2784,113 @@
           }
           
           /**
-           * Finds the last statement in the code if it is an expression so that its
-           * value can be shown.
+           * Gets a block of code ready to run:  packages imported by name (eg.
+           * `import _ from 'lodash'` or `import('lodash')`) are loaded from importsUrl
+           * and the last statement is found if it is an expression so that its value
+           * can be shown.
            * @param {string} code
-           * @param {"classic"|"module"} blockType
-           * @returns {[number, number]|null}
-           *   The start and end index of the expression or `null` if the last statement
-           *   isn't an expression (or the code can't be parsed, in which case running
-           *   it will show the syntax error).
+           * @param {Object} options
+           * @param {"classic"|"module"} options.blockType
+           * @param {string?} options.importsUrl
+           *   The URL template where `{specifier}` is replaced with what was imported
+           *   or an empty value to leave imports alone.
+           * @param {boolean} options.findResult
+           * @returns {{code: string, resultRange: [number, number]|null}}
+           *   The code to run and the start and end index of its last expression (or
+           *   `null`).  If the code can't be parsed it is returned as is so that running
+           *   it shows the syntax error.
            */
-          function findLastExpression(code, blockType) {
-            if (!window.acorn) return null;
+          function prepareCode(code, {blockType, importsUrl, findResult}) {
+            if (!window.acorn) return {code, resultRange: null};
+            let ast;
             try {
-              const {body} = acorn.parse(code, {
+              ast = acorn.parse(code, {
                 ecmaVersion: 'latest',
                 sourceType: blockType === 'module' ? 'module' : 'script',
                 allowHashBang: true,
               });
-              const last = body[body.length - 1];
+            }
+            catch (e) {
+              return {code, resultRange: null};
+            }
+          
+            let resultRange = null;
+            if (findResult) {
+              const last = ast.body[ast.body.length - 1];
               if (last?.type === 'ExpressionStatement' && !last.directive) {
-                return [last.expression.start, last.expression.end];
+                resultRange = [last.expression.start, last.expression.end];
+              }
+            }
+          
+            // Finds every import (and re-export) of a package by name.
+            const replacements = [];
+            if (importsUrl) {
+              walkAst(ast, node => {
+                const {source} = /^(Import(Declaration|Expression)|Export(All|Named)Declaration)$/.test(node.type) ? node : {};
+                if (source?.type === 'Literal' && 'string' === typeof source.value && isBareSpecifier(source.value)) {
+                  replacements.push({
+                    start: source.start,
+                    end: source.end,
+                    text: JSON.stringify(importsUrl.replace(/\{specifier\}/g, source.value)),
+                  });
+                }
+              });
+            }
+          
+            // Replaces them from last to first, moving the result's range as needed.
+            replacements.sort((a, b) => b.start - a.start);
+            for (const {start, end, text} of replacements) {
+              code = code.slice(0, start) + text + code.slice(end);
+              const shift = text.length - (end - start);
+              if (resultRange) resultRange = resultRange.map(index => index >= end ? index + shift : index);
+            }
+          
+            return {code, resultRange};
+          }
+          
+          /**
+           * Turns property keys into a path like the browser's console's "Copy property
+           * path" (eg. ["people", "0", "first name"] becomes `people[0]["first name"]`).
+           * @param {string[]} keys
+           * @returns {string}
+           */
+          function formatPropertyPath(keys) {
+            return keys.map((key, index) =>
+              /^(0|[1-9]\d*)$/.test(key)
+                ? `[${key}]`
+                : /^[A-Za-z_$][\w$]*$/.test(key)
+                  ? (index ? '.' : '') + key
+                  : `[${JSON.stringify(key)}]`
+            ).join('');
+          }
+          
+          /**
+           * Indicates if an import specifier is a package name (eg. "lodash",
+           * "lodash@4/fp" or "@scope/pkg") rather than a relative path or a URL (eg.
+           * "./utils.js", "https://example.com/x.js" or "node:fs").
+           * @param {string} specifier
+           * @returns {boolean}
+           */
+          function isBareSpecifier(specifier) {
+            return !/^(\.{0,2}\/|#|[a-z][a-z\d+.-]*:)/i.test(specifier);
+          }
+          
+          /**
+           * Calls the callback for every node in an Acorn syntax tree.
+           * @param {*} node
+           * @param {(node: *) => void} callback
+           */
+          function walkAst(node, callback) {
+            if (Array.isArray(node)) {
+              for (const child of node) walkAst(child, callback);
+            }
+            else if (node && 'string' === typeof node.type) {
+              callback(node);
+              for (const key of Object.keys(node)) {
+                const value = node[key];
+                if (value && 'object' === typeof value) walkAst(value, callback);
               }
             }
-            catch (e) {}
-            return null;
           }
           
           /**
@@ -2339,6 +3022,7 @@
                 `${Object(part)[1]}`,
               ]),
               ...sanitizeEntries(description),
+              ...(description.entriesArePropertyKeys != null ? {entriesArePropertyKeys: !!description.entriesArePropertyKeys} : {}),
             };
           }
           
@@ -2429,7 +3113,47 @@
               level = level[groupKey]?.[toIndex(path[i + 1])]?.[1];
             }
           
-            if (level) Object.assign(level, sanitizeEntries(description));
+            if (!level) return;
+            Object.assign(level, sanitizeEntries(description));
+            level.entriesArePropertyKeys = !!Object(description).entriesArePropertyKeys;
+            // A refresh also sends the value's preview.
+            if (Array.isArray(Object(description).parts)) {
+              const {typeName, isPrimitive, parts} = sanitizeDescription(description);
+              Object.assign(level, {typeName, isPrimitive, parts});
+            }
+          }
+          
+          /**
+           * NOTE:  Called via main by the runner with a value converted to JSON (see
+           * requestValueJson()).
+           * @param {{requestId: string, json?: string, circularCount?: number, error?: string}} result
+           */
+          function onValueJson(result) {
+            const {requestId, json, circularCount, error} = Object(result);
+            const resolve = jsonRequests.get(`${requestId}`);
+            if (!resolve) return;
+            jsonRequests.delete(`${requestId}`);
+            resolve({
+              json: json != null ? `${json}` : null,
+              circularCount: +circularCount || 0,
+              error: error != null ? `${error}` : null,
+            });
+          }
+          
+          /**
+           * The functions waiting for values to be converted to JSON by their request
+           * IDs.
+           * @type {Map<string, (result: {json: string?, circularCount: number, error: string?}) => void>}
+           */
+          const jsonRequests = new Map();
+          
+          /**
+           * NOTE:  Called via main by the runner after a value was stored as a global
+           * variable.
+           * @param {string} name
+           */
+          function onStoredAsGlobal(name) {
+            mountedApp.displays.push({type: 'notice', message: `Stored as the global variable ${`${name}`}`});
           }
           
           /**
@@ -2496,9 +3220,9 @@
           libraryUrl('prismjs', 'components/prism-core.min.js'),
           libraryUrl('prismjs', 'plugins/autoloader/prism-autoloader.min.js'),
           libraryUrl('prismjs', 'plugins/match-braces/prism-match-braces.min.js'),
-          // Used to find the last expression in each block of code so that its
-          // value can be shown.
-          ...(showResults ? [libraryUrl('acorn', 'dist/acorn.js')] : []),
+          // Used to find the last expression in each block of code (so that its
+          // value can be shown) and the packages that it imports.
+          libraryUrl('acorn', 'dist/acorn.js'),
         ],
         cssUrls: [
           'data:text/css,' + encodeURIComponent(VIEWER_IFRAME_CSS),
@@ -2518,6 +3242,7 @@
             runnerMode,
             blockType,
             showResults,
+            importsUrl,
             packageInfo: PACKAGE_INFO,
             libraryVersions: LIBRARY_VERSIONS,
             isPopOut: !!targetWindow,
@@ -2592,7 +3317,7 @@
    * The options of YourJSBox.create() which are the same as the data
    * attributes of a script tag.
    */
-  const CONSOLE_OPTION_NAMES = ['blockType', 'dividerOrient', 'hidePrefix', 'librariesUrl', 'runner', 'showResults', 'theme'];
+  const CONSOLE_OPTION_NAMES = ['blockType', 'dividerOrient', 'hidePrefix', 'importsUrl', 'librariesUrl', 'runner', 'showResults', 'theme'];
 
   /**
    * The JavaScript API for creating consoles (available as window.YourJSBox).
@@ -2623,6 +3348,7 @@
      * @param {string=} options.dividerOrient
      * @param {string=} options.theme
      * @param {string=} options.librariesUrl
+     * @param {string=} options.importsUrl
      *   The same as the data attributes of a script tag.
      * @returns {{element: HTMLIFrameElement, destroy: () => void}}
      */