code-playpad 0.18.0 → 0.19.0

package/dist/element-Bzd1Vk4K.js

@@ -0,0 +1,727 @@
+var e=[{id:`default-dark`,label:`One Dark`,mode:`dark`},{id:`monokai`,label:`Monokai`,mode:`dark`,colors:{bg:`#272822`,fg:`#f8f8f2`,muted:`#b4b19c`,surface:`#1e1f1a`,border:`#49483e`,accent:`#a6e22e`,accentFg:`#1e1f1a`,danger:`#ff6188`,ok:`#a6e22e`,selection:`#49483e`,activeLine:`#3e3d3266`,comment:`#a09b80`,keyword:`#ff5c94`,string:`#e6db74`,number:`#ae81ff`,fn:`#a6e22e`,type:`#66d9ef`,variable:`#f8f8f2`}},{id:`dracula`,label:`Dracula`,mode:`dark`,colors:{bg:`#282a36`,fg:`#f8f8f2`,muted:`#b6bcd6`,surface:`#21222c`,border:`#44475a`,accent:`#bd93f9`,accentFg:`#21222c`,danger:`#ff5555`,ok:`#50fa7b`,selection:`#44475a`,activeLine:`#44475a55`,comment:`#9aa5ce`,keyword:`#ff79c6`,string:`#f1fa8c`,number:`#bd93f9`,fn:`#50fa7b`,type:`#8be9fd`,variable:`#f8f8f2`}},{id:`nord`,label:`Nord`,mode:`dark`,colors:{bg:`#2e3440`,fg:`#d8dee9`,muted:`#b0b9c9`,surface:`#272c36`,border:`#434c5e`,accent:`#88c0d0`,accentFg:`#272c36`,danger:`#e08a91`,ok:`#a3be8c`,selection:`#434c5e`,activeLine:`#3b425266`,comment:`#a0abbf`,keyword:`#81a1c1`,string:`#a3be8c`,number:`#bd98b6`,fn:`#88c0d0`,type:`#8fbcbb`,variable:`#d8dee9`}},{id:`solarized-dark`,label:`Solarized Dark`,mode:`dark`,colors:{bg:`#002b36`,fg:`#c5d3d3`,muted:`#9fb0b0`,surface:`#00222b`,border:`#17505e`,accent:`#2aa198`,accentFg:`#00222b`,danger:`#f0746f`,ok:`#a3b300`,selection:`#17505e`,activeLine:`#073642aa`,comment:`#8fa3a8`,keyword:`#a3b300`,string:`#2aa198`,number:`#e87f7c`,fn:`#4ba3e3`,type:`#d6a100`,variable:`#c5d3d3`}},{id:`default-light`,label:`Default Light`,mode:`light`},{id:`github-light`,label:`GitHub Light`,mode:`light`,colors:{bg:`#ffffff`,fg:`#24292f`,muted:`#59636e`,surface:`#f6f8fa`,border:`#d1d9e0`,accent:`#0969da`,accentFg:`#ffffff`,danger:`#cf222e`,ok:`#1a7f37`,selection:`#b6d7ff`,activeLine:`#eaeef266`,comment:`#59636e`,keyword:`#cf222e`,string:`#0a3069`,number:`#0550ae`,fn:`#8250df`,type:`#953800`,variable:`#24292f`}},{id:`solarized-light`,label:`Solarized Light`,mode:`light`,colors:{bg:`#fdf6e3`,fg:`#47565c`,muted:`#566569`,surface:`#eee8d5`,border:`#d6cfb8`,accent:`#1f6fa8`,accentFg:`#ffffff`,danger:`#c0302c`,ok:`#5f6f00`,selection:`#e3dcc4`,activeLine:`#eee8d588`,comment:`#5c6c70`,keyword:`#5f6f00`,string:`#1a7a73`,number:`#c0302c`,fn:`#1f6fa8`,type:`#8f6a00`,variable:`#47565c`}}],t=`code-playpad:theme`,n=`playpad-theme-change`,r={mode:null,light:`default-light`,dark:`default-dark`},i=null,a=!1;function o(t,n){return e.some(e=>e.id===t&&e.mode===n)?t:r[n]}function s(){let e=i;if(!e)try{e=JSON.parse(localStorage.getItem(t)??`null`)}catch{}return{mode:e?.mode===`light`||e?.mode===`dark`?e.mode:null,light:o(e?.light,`light`),dark:o(e?.dark,`dark`)}}function c(e){let r={...s(),...e};r.light=o(r.light,`light`),r.dark=o(r.dark,`dark`);try{localStorage.setItem(t,JSON.stringify(r)),i=null}catch{i=r}return window.dispatchEvent(new CustomEvent(n,{detail:r})),r}function l(e){a||(a=!0,window.addEventListener(`storage`,e=>{(e.key===t||e.key===null)&&window.dispatchEvent(new CustomEvent(n,{detail:s()}))}));let r=t=>e(t.detail);return window.addEventListener(n,r),()=>window.removeEventListener(n,r)}function u(){return e.flatMap(({id:e,mode:t,colors:n})=>n?[`:host([data-editor-theme="${e}"]) {
+  --cp-bg: ${n.bg};
+  --cp-fg: ${n.fg};
+  --cp-muted: ${n.muted};
+  --cp-border: ${n.border};
+  --cp-surface: ${n.surface};
+  --cp-accent: ${n.accent};
+  --cp-accent-fg: ${n.accentFg};
+  --cp-danger: ${n.danger};
+  --cp-ok: ${n.ok};
+  color-scheme: ${t};
+}`]:[]).join(`
+`)}async function d(e){try{return await ee(e)}catch(t){return console.warn(`[code-playpad] CodeMirror unavailable, using plain textarea:`,t),g(e)}}var f=/* @__PURE__ */ new Map,p=/* @__PURE__ */ new Set,m=!1;function h(){m||(m=!0,queueMicrotask(()=>{m=!1;for(let e of p){let t=[...e.adoptedStyleSheets];e.adoptedStyleSheets=[],e.adoptedStyleSheets=t}}))}async function ee(t){let[n,r,i,a,o,s,c]=await Promise.all([import(`@codemirror/view`),import(`@codemirror/state`),import(`@codemirror/commands`),import(`@codemirror/language`),import(`@codemirror/autocomplete`),import(`@codemirror/theme-one-dark`),import(`@lezer/highlight`)]),{EditorView:l,keymap:u,lineNumbers:d,highlightActiveLine:m,highlightActiveLineGutter:ee,highlightSpecialChars:g,drawSelection:_,rectangularSelection:v,crosshairCursor:y}=n,{EditorState:b,Compartment:x}=r,{defaultKeymap:S,history:te,historyKeymap:C,indentWithTab:w}=i,{syntaxHighlighting:T,defaultHighlightStyle:E,HighlightStyle:D,indentOnInput:O,bracketMatching:k,foldGutter:A,foldKeymap:j}=a,{autocompletion:M,closeBrackets:N,closeBracketsKeymap:P,completionKeymap:F}=o,I=new x,L=new x,R=new x,z=f.get(`default-light`)??[l.theme({"&":{color:`#1f2328`,backgroundColor:`#ffffff`},".cm-gutters":{backgroundColor:`#f6f8fa`,color:`#8b949e`,border:`none`},".cm-activeLine":{backgroundColor:`#f6f8fa88`},".cm-activeLineGutter":{backgroundColor:`#eaeef2`},".cm-cursor":{borderLeftColor:`#1f2328`},"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection":{backgroundColor:`#cfe3ff`}}),T(E,{fallback:!0})];f.set(`default-light`,z);let{tags:B}=c,V=(e,t)=>[l.theme({"&":{color:e.fg,backgroundColor:e.bg},".cm-content":{caretColor:e.fg},".cm-gutters":{backgroundColor:e.surface,color:e.muted,border:`none`},".cm-activeLine":{backgroundColor:e.activeLine},".cm-activeLineGutter":{backgroundColor:e.selection},".cm-cursor, .cm-dropCursor":{borderLeftColor:e.fg},"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":{backgroundColor:e.selection},".cm-tooltip":{backgroundColor:e.surface,color:e.fg,border:`1px solid ${e.border}`},".cm-tooltip-autocomplete > ul > li[aria-selected]":{backgroundColor:e.selection,color:e.fg}},{dark:t}),T(D.define([{tag:[B.comment,B.meta],color:e.comment,fontStyle:`italic`},{tag:[B.keyword,B.operatorKeyword,B.modifier],color:e.keyword},{tag:[B.string,B.special(B.string),B.regexp],color:e.string},{tag:[B.number,B.bool,B.null,B.atom],color:e.number},{tag:[B.function(B.variableName),B.function(B.propertyName),B.definition(B.function(B.variableName))],color:e.fn},{tag:[B.typeName,B.className,B.namespace,B.tagName],color:e.type},{tag:[B.variableName,B.propertyName,B.attributeName],color:e.variable},{tag:B.invalid,color:e.keyword,textDecoration:`underline`}]))],H=(t,n)=>{let r=e.find(e=>e.id===n);if(!r?.colors)return t?s.oneDark:z;let i=f.get(r.id);return i||(i=V(r.colors,r.mode===`dark`),f.set(r.id,i)),i},U=u.of([{key:`Mod-Enter`,preventDefault:!0,run:()=>(t.onRun?.(),!0)},{key:`Shift-Enter`,preventDefault:!0,run:()=>(t.onRun?.(),!0)}]),W=t.dark,G=t.themeId,K=t.readOnly,q=t.language??[],J=e=>b.create({doc:e,extensions:[d(),ee(),g(),te(),A(),_(),b.allowMultipleSelections.of(!0),O(),k(),N(),M(),v(),y(),m(),U,u.of([...P,...S,...C,...j,...F,w]),l.lineWrapping,R.of(q),I.of(H(W,G)),L.of(b.readOnly.of(K)),l.updateListener.of(e=>{e.startState.facet(l.styleModule)!==e.state.facet(l.styleModule)&&h(),e.docChanged&&t.onChange?.(e.state.doc.toString())})]}),Y=new l({parent:t.parent,state:J(t.doc)});p.add(Y.root),h();let X=/* @__PURE__ */ new Map,Z=t.name??``;return{fallback:!1,getCode:()=>Y.state.doc.toString(),setCode(e){Y.dispatch({changes:{from:0,to:Y.state.doc.length,insert:e}})},openFile(e,t){if(e===Z)return;X.set(Z,Y.state);let n=X.get(e);Y.setState(n??J(t)),Z=e,n&&Y.dispatch({effects:[I.reconfigure(H(W,G)),L.reconfigure(b.readOnly.of(K)),R.reconfigure(q)]}),h()},fileCode(e,t){if(e===Z)return Y.state.doc.toString();let n=X.get(e);return n?n.doc.toString():t},forgetFiles(e){for(let t of[...X.keys()])e.includes(t)||X.delete(t)},renameFile(e,t){Z===e&&(Z=t);let n=X.get(e);n&&(X.delete(e),X.set(t,n))},setTheme(e,t){W=e,G=t,Y.dispatch({effects:I.reconfigure(H(W,G))})},setReadOnly(e){K=e,Y.dispatch({effects:L.reconfigure(b.readOnly.of(K))})},setLanguage(e){q=e,Y.dispatch({effects:R.reconfigure(q)})},focus:()=>Y.focus(),destroy(){p.delete(Y.root),Y.destroy()}}}function g(e){let t=document.createElement(`textarea`);t.className=`cp-fallback-editor`,t.spellcheck=!1,t.value=e.doc,t.readOnly=e.readOnly,t.addEventListener(`input`,()=>e.onChange?.(t.value)),t.addEventListener(`keydown`,t=>{(t.metaKey||t.ctrlKey)&&t.key===`Enter`&&(t.preventDefault(),e.onRun?.())}),e.parent.appendChild(t);let n=/* @__PURE__ */ new Map,r=e.name??``;return{fallback:!0,getCode:()=>t.value,setCode:e=>{t.value=e},openFile(e,i){e!==r&&(n.set(r,t.value),t.value=n.get(e)??i,r=e)},fileCode(e,i){return e===r?t.value:n.get(e)??i},forgetFiles(e){for(let t of[...n.keys()])e.includes(t)||n.delete(t)},renameFile(e,t){r===e&&(r=t);let i=n.get(e);i!==void 0&&(n.delete(e),n.set(t,i))},setTheme:()=>{},setReadOnly:e=>{t.readOnly=e},setLanguage:()=>{},focus:()=>t.focus(),destroy:()=>t.remove()}}var _=/* @__PURE__ */ new Map,v=/* @__PURE__ */ new Map;function y(e,t){_.set(e,t)}function b(){return[..._.keys()]}function x(e){let t=v.get(e);if(t)return t;let n=_.get(e);if(!n)return Promise.reject(/* @__PURE__ */ Error(`Unknown runtime "${e}". Registered: ${b().join(`, `)||`none`}`));let r=n().catch(t=>{throw v.delete(e),t});return v.set(e,r),r}y(`python`,()=>import(`./pyodide-BVBDl-OE.js`).then(e=>e.pythonRuntime)),y(`javascript`,()=>import(`./javascript-CcekVHtC.js`).then(e=>e.javascriptRuntime)),y(`typescript`,()=>import(`./javascript-CcekVHtC.js`).then(e=>e.typescriptRuntime)),y(`java`,()=>import(`./java-B2RmbH1B.js`).then(e=>e.javaRuntime)),y(`c`,()=>import(`./cpp-C9kekic8.js`).then(e=>e.cRuntime)),y(`cpp`,()=>import(`./cpp-C9kekic8.js`).then(e=>e.cppRuntime)),y(`csharp`,()=>import(`./csharp-BoD8d8x4.js`).then(e=>e.csharpRuntime)),y(`cs`,()=>import(`./csharp-BoD8d8x4.js`).then(e=>e.csharpRuntime)),y(`react`,()=>import(`./react-BPyvHY9v.js`).then(e=>e.reactRuntime)),y(`next`,()=>import(`./next-CdrJeX7n.js`).then(e=>e.nextRuntime));var S=class extends Error{constructor(e=`Execution stopped`){super(e),this.name=`RunStopped`}},te=class extends Error{constructor(e=`Web Workers are unavailable in this page`){super(e),this.name=`WorkerUnavailable`}},C=/* @__PURE__ */ new WeakSet,w=String.raw`
+:host {
+  --cp-bg: #ffffff;
+  --cp-fg: #1f2328;
+  --cp-muted: #656d76;
+  --cp-border: #d0d7de;
+  --cp-surface: #f6f8fa;
+  --cp-accent: #1f6feb;
+  --cp-accent-fg: #ffffff;
+  --cp-danger: #cf222e;
+  --cp-ok: #1a7f37;
+  --cp-radius: 8px;
+  --cp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --cp-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  display: block;
+  margin: 1rem 0;
+  color-scheme: light;
+  contain: content;
+}
+
+:host([hidden]) { display: none; }
+
+:host([data-resolved-theme="dark"]) {
+  --cp-bg: #0d1117;
+  --cp-fg: #e6edf3;
+  --cp-muted: #8b949e;
+  --cp-border: #30363d;
+  --cp-surface: #161b22;
+  --cp-accent: #388bfd;
+  --cp-danger: #ff7b72;
+  --cp-ok: #3fb950;
+  color-scheme: dark;
+}
+
+${u()}
+
+* { box-sizing: border-box; }
+
+.cp-root {
+  border: 1px solid var(--cp-border);
+  border-radius: var(--cp-radius);
+  background: var(--cp-bg);
+  color: var(--cp-fg);
+  font-family: var(--cp-font-ui);
+  font-size: 14px;
+  overflow: hidden;
+}
+
+.cp-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 6px 8px;
+  background: var(--cp-surface);
+  border-bottom: 1px solid var(--cp-border);
+}
+
+.cp-spacer { flex: 1 1 auto; }
+
+.cp-icon-button, .cp-theme-picker {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 28px;
+  height: 27px;
+  padding: 0;
+  border: 1px solid var(--cp-border);
+  border-radius: 6px;
+  background: var(--cp-bg);
+  color: var(--cp-fg);
+  cursor: pointer;
+}
+.cp-icon-button[hidden], .cp-theme-picker[hidden] { display: none; }
+.cp-icon-button svg, .cp-theme-picker svg {
+  width: 15px;
+  height: 15px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.cp-theme-picker { overflow: hidden; }
+.cp-theme-picker:hover { border-color: var(--cp-accent); }
+.cp-theme-picker:focus-within { outline: 2px solid var(--cp-accent); outline-offset: 1px; }
+/* The native list, laid invisibly over the icon: keyboard and phone pickers come free. */
+.cp-theme-picker select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  cursor: pointer;
+  font-size: 16px;
+}
+.cp-theme-sun { display: none; }
+:host([data-resolved-theme="dark"]) .cp-theme-sun { display: block; }
+:host([data-resolved-theme="dark"]) .cp-theme-moon { display: none; }
+
+.cp-status {
+  font-size: 12px;
+  color: var(--cp-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 55%;
+}
+.cp-status[data-state="error"] { color: var(--cp-danger); }
+.cp-status[data-state="ok"] { color: var(--cp-ok); }
+
+button {
+  font: inherit;
+  font-size: 13px;
+  line-height: 1;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--cp-border);
+  background: var(--cp-bg);
+  color: var(--cp-fg);
+  cursor: pointer;
+}
+button:hover:not(:disabled) { border-color: var(--cp-accent); }
+button:disabled { opacity: 0.5; cursor: default; }
+button:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 1px; }
+
+button.cp-primary {
+  background: var(--cp-accent);
+  border-color: var(--cp-accent);
+  color: var(--cp-accent-fg);
+  font-weight: 600;
+}
+button.cp-danger { color: var(--cp-danger); border-color: var(--cp-danger); }
+
+.cp-tabs {
+  display: flex;
+  gap: 2px;
+  overflow-x: auto;
+  padding: 0 6px;
+  background: var(--cp-surface);
+  border-bottom: 1px solid var(--cp-border);
+  scrollbar-width: thin;
+}
+.cp-tabs[hidden] { display: none; }
+.cp-tabs button {
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: var(--cp-muted);
+  font-family: var(--cp-font-mono);
+  font-size: 12px;
+  padding: 7px 10px;
+  white-space: nowrap;
+}
+.cp-tabs button:hover:not(:disabled) { color: var(--cp-fg); }
+.cp-tabs button[aria-pressed='true'] {
+  color: var(--cp-fg);
+  border-bottom-color: var(--cp-accent);
+  background: var(--cp-bg);
+}
+.cp-tabs button.cp-entry::before {
+  content: '▸';
+  margin-right: 4px;
+  color: var(--cp-accent);
+}
+
+.cp-editor {
+  height: var(--cp-height, 220px);
+  overflow: hidden;
+}
+.cp-editor .cm-editor { height: 100%; }
+
+/* Content-fitting mode. Until 0.2.0 height="auto" happened to work, because a
+   percentage height against an indefinite parent computes to auto — true, but
+   accidental, and one future rule away from silently reverting to 220px. These
+   rules make it a supported mode instead. */
+:host([height='auto']) .cp-editor,
+:host([height='auto']) .cp-editor .cm-editor,
+:host([height='auto']) .cp-fallback-editor {
+  height: auto;
+}
+
+/* Bounds for that mode, following CodeMirror's own recipes.
+
+   max-height goes on .cm-editor: its theme already gives .cm-scroller
+   overflow-y: auto, so a capped editor scrolls rather than clips. Putting the
+   cap on .cp-editor instead would clip, since the scroller has already sized
+   itself to the content.
+
+   min-height goes on .cm-content and .cm-gutter, not on .cm-editor. Both give
+   the right outer height, but on .cm-editor the scroller stays at content
+   height — so the empty space below a one-line snippet is not part of the
+   editor and clicking it does nothing. That empty space is exactly what a
+   "write your answer here" box is for. */
+.cp-editor .cm-editor { max-height: var(--cp-max-height, none); }
+
+/* Three classes deep on purpose: CodeMirror's base theme sets
+   .cm-content { min-height: 100% } through a generated wrapper class, which
+   ties on specificity with a two-class selector and wins on order, since its
+   stylesheet is injected into the shadow root after this one. */
+.cp-editor .cm-editor .cm-content,
+.cp-editor .cm-editor .cm-gutter { min-height: var(--cp-min-height, 0); }
+.cp-editor .cp-fallback-editor {
+  min-height: var(--cp-min-height, 0);
+  max-height: var(--cp-max-height, none);
+}
+.cp-editor .cm-scroller {
+  font-family: var(--cp-font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.cp-editor .cm-editor.cm-focused { outline: none; }
+
+.cp-fallback-editor {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 8px;
+  resize: none;
+  background: var(--cp-bg);
+  color: var(--cp-fg);
+  font-family: var(--cp-font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.cp-fallback-editor:focus { outline: none; }
+
+.cp-stdin { border-top: 1px solid var(--cp-border); background: var(--cp-surface); }
+.cp-stdin[hidden] { display: none; }
+.cp-stdin.cp-attention {
+  box-shadow: inset 0 0 0 2px var(--cp-accent);
+}
+.cp-stdin label {
+  display: block;
+  padding: 6px 8px 0;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--cp-muted);
+}
+.cp-stdin textarea {
+  display: block;
+  width: 100%;
+  min-height: 52px;
+  border: 0;
+  padding: 4px 8px 8px;
+  background: transparent;
+  color: var(--cp-fg);
+  font-family: var(--cp-font-mono);
+  font-size: 13px;
+  resize: vertical;
+}
+.cp-stdin textarea:focus { outline: none; }
+
+.cp-output {
+  border-top: 1px solid var(--cp-border);
+  padding: 8px 10px;
+  margin: 0;
+  max-height: 260px;
+  overflow: auto;
+  background: var(--cp-surface);
+  font-family: var(--cp-font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.cp-output[hidden] { display: none; }
+.cp-output .cp-err { color: var(--cp-danger); }
+.cp-output .cp-hint {
+  margin-top: 6px;
+  padding: 6px 8px;
+  border-left: 3px solid var(--cp-accent);
+  background: var(--cp-bg);
+  color: var(--cp-fg);
+  font-family: var(--cp-font-ui);
+  font-size: 12.5px;
+  white-space: normal;
+}
+.cp-output .cp-value { color: var(--cp-muted); }
+.cp-output .cp-in { color: var(--cp-accent); }
+
+.cp-prompt {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.cp-prompt input {
+  font: inherit;
+  color: var(--cp-accent);
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--cp-accent);
+  padding: 0 2px;
+  min-width: 12ch;
+  caret-color: var(--cp-accent);
+}
+.cp-prompt input:focus { outline: none; }
+.cp-prompt button {
+  padding: 1px 6px;
+  font-size: 11px;
+  line-height: 1.4;
+  border-radius: 4px;
+  color: var(--cp-muted);
+  font-family: var(--cp-font-mono);
+}
+.cp-prompt button.cp-send { color: var(--cp-accent); border-color: var(--cp-accent); }
+
+table.cp-table {
+  border-collapse: collapse;
+  margin: 6px 0;
+  font-size: 12px;
+}
+table.cp-table th, table.cp-table td {
+  border: 1px solid var(--cp-border);
+  padding: 3px 8px;
+  text-align: left;
+}
+table.cp-table th { background: var(--cp-bg); }
+
+.cp-progress {
+  /* Over the content, not above it: a bar that took space would move the preview when it
+     goes, and a moved frame misses clicks for a moment in Chrome. */
+  position: relative;
+  z-index: 1;
+  margin-bottom: -2px;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--cp-accent), transparent);
+  background-size: 40% 100%;
+  background-repeat: no-repeat;
+  animation: cp-slide 1.1s ease-in-out infinite;
+}
+.cp-progress[hidden] { display: none; }
+
+/* language="react". The widget is the container: lesson columns are narrow even
+   on a large screen, so the viewport says nothing about the room there is. */
+.cp-root.cp-has-preview { container-type: inline-size; }
+.cp-preview-pane { display: none; }
+.cp-has-preview .cp-preview-pane { display: flex; flex-direction: column; }
+.cp-has-preview .cp-preview-pane .cp-output { flex: 1 1 auto; border-top: 0; min-height: 40px; }
+.cp-preview {
+  position: relative;
+  flex: 0 0 var(--cp-preview-height, 320px);
+  height: var(--cp-preview-height, 320px);
+  border-top: 1px solid var(--cp-border);
+  background: var(--cp-surface);
+  overflow: hidden;
+}
+.cp-preview-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #ffffff;
+}
+.cp-next-bar {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 3px 6px;
+  background: var(--cp-surface);
+  border-bottom: 1px solid var(--cp-border);
+}
+.cp-next-bar button { flex: none; width: 24px; height: 24px; padding: 0; cursor: pointer; }
+.cp-next-bar input { flex: 1 1 auto; min-width: 0; height: 24px; box-sizing: border-box; padding: 0 8px; font: 12px ui-monospace, monospace; }
+.cp-next-bar + .cp-preview-frame { height: calc(100% - 32px); }
+.cp-preview-banner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: 60%;
+  margin: 0;
+  padding: 10px 12px;
+  overflow: auto;
+  border-top: 3px solid var(--cp-danger);
+  background: var(--cp-bg);
+  color: var(--cp-danger);
+  font-family: var(--cp-font-mono);
+  font-size: 12.5px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.cp-preview-notice {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  right: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--cp-border);
+  border-left: 3px solid var(--cp-accent);
+  border-radius: 6px;
+  background: var(--cp-bg);
+  color: var(--cp-fg);
+  font-size: 13px;
+  white-space: pre-wrap;
+}
+.cp-preview-notice[hidden] { display: none; }
+.cp-output .cp-warn { color: #9a6700; }
+:host([data-resolved-theme="dark"]) .cp-output .cp-warn { color: #d29922; }
+.cp-edited-note { font-size: 12px; color: var(--cp-muted); white-space: nowrap; }
+.cp-edited-note[hidden] { display: none; }
+.cp-tabs button.cp-edited::after { content: ' ●'; color: var(--cp-accent); }
+.cp-tab-folder { opacity: 0.65; }
+
+@container (max-width: 480px) {
+  .cp-tab-folder { display: none; }
+}
+/* The dividers between sections. */
+.cp-split {
+  display: none;
+  flex: none;
+  background: var(--cp-surface);
+  border: solid var(--cp-border);
+  border-width: 0 1px;
+  touch-action: none;
+  cursor: col-resize;
+}
+.cp-split:hover, .cp-split:focus-visible { background: var(--cp-accent); outline: none; }
+.cp-split-main, .cp-split-console {
+  width: auto;
+  height: 7px;
+  border-width: 1px 0;
+  cursor: row-resize;
+}
+.cp-has-preview .cp-split-main { display: block; }
+.cp-has-preview .cp-split-console { display: block; }
+.cp-split-console:has(+ .cp-output[hidden]) { display: none; }
+.cp-dragging .cp-preview-frame { pointer-events: none; }
+.cp-dragging { user-select: none; }
+.cp-dragging-x { cursor: col-resize; }
+.cp-dragging-y { cursor: row-resize; }
+.cp-root.cp-editor-sized .cp-editor { height: var(--cp-editor-height) !important; flex: none !important; }
+.cp-root.cp-editor-sized .cp-editor .cm-editor { height: 100% !important; max-height: none !important; }
+
+/* Open in window. */
+.cp-window-button { display: none; }
+.cp-has-preview .cp-window-button { display: inline-flex; }
+:host([data-window]) .cp-window-button { display: none; }
+.cp-window-note { display: none; align-items: center; gap: 8px; padding: 14px 12px; color: var(--cp-muted); }
+.cp-root.cp-popped .cp-window-note { display: flex; }
+.cp-root.cp-popped .cp-toolbar, .cp-root.cp-popped .cp-body { display: none; }
+:host([data-window]) { height: 100%; margin: 0; contain: strict; }
+:host([data-window]) .cp-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+}
+:host([data-window]) .cp-body { flex: 1 1 0; min-height: 0; }
+:host([data-window]) .cp-source, :host([data-window]) .cp-preview-pane { min-height: 0; }
+:host([data-window]) .cp-root:not(.cp-editor-sized) .cp-editor { flex: 1 1 0; height: auto; min-height: 0; }
+:host([data-window]) .cp-editor .cm-editor { height: 100%; max-height: none; }
+:host([data-window]) .cp-preview-pane .cp-output { max-height: none; }
+:host([data-window]) .cp-body { display: flex; flex-direction: column; }
+:host([data-window]) .cp-source { flex: 1 1 0; display: flex; flex-direction: column; }
+:host([data-window]) .cp-has-tree .cp-source { display: grid; }
+:host([data-window]) .cp-preview-pane { flex: 1 1 0; }
+:host([data-window]) .cp-editor-sized .cp-source { flex: none; }
+
+/* file-view="tree": the files in a column beside the editor. */
+.cp-root.cp-has-tree { container-type: inline-size; }
+.cp-has-tree .cp-source {
+  display: grid;
+  grid-template-columns: min(var(--cp-tree-width, 200px), calc(100% - 167px)) 7px minmax(0, 1fr);
+  grid-template-rows: 1fr auto;
+}
+/* With a preview, the code gets its own row, so the tree shares only that. */
+.cp-has-tree.cp-has-preview .cp-source { grid-template-columns: min(var(--cp-tree-width, 20%), calc(100% - 167px)) 7px minmax(0, 1fr); }
+/* A sized row follows the divider, so a long tree scrolls instead of holding it open. */
+.cp-editor-sized.cp-has-tree .cp-tabs.cp-tree { height: 0; min-height: 100%; }
+.cp-has-tree .cp-source > :not(.cp-tabs, .cp-split-tree, .cp-file-overlay) { grid-column: 3; }
+.cp-has-tree .cp-split-tree { display: block; grid-column: 2; grid-row: 1 / span 2; }
+.cp-tabs.cp-tree {
+  display: block;
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  padding: 6px 0;
+  overflow: auto;
+  border-bottom: 0;
+}
+.cp-tabs.cp-tree[hidden] { display: none; }
+.cp-tabs.cp-tree button {
+  display: block;
+  width: 100%;
+  padding: 5px 8px 5px calc(22px + var(--cp-depth, 0) * 12px);
+  border-bottom: 0;
+  border-left: 2px solid transparent;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cp-tabs.cp-tree button[aria-pressed='true'] { border-left-color: var(--cp-accent); }
+.cp-tabs.cp-tree button.cp-entry::before {
+  content: '▸';
+  display: inline-block;
+  width: 12px;
+  margin: 0 0 0 -12px;
+}
+.cp-tabs.cp-tree .cp-tree-folder {
+  padding-left: calc(8px + var(--cp-depth, 0) * 12px);
+  color: var(--cp-fg);
+}
+.cp-tabs.cp-tree .cp-tree-folder::before {
+  content: '⌄';
+  display: inline-block;
+  width: 14px;
+  color: var(--cp-muted);
+}
+.cp-tabs.cp-tree .cp-tree-folder[aria-expanded='false']::before { content: '›'; }
+@container (max-width: 420px) {
+  .cp-has-tree .cp-source { display: block; }
+  .cp-has-tree .cp-split-tree { display: none; }
+  .cp-tabs.cp-tree { max-height: 150px; border-bottom: 1px solid var(--cp-border); }
+  .cp-editor-sized.cp-has-tree .cp-tabs.cp-tree { height: auto; min-height: 0; }
+}
+
+/* file-actions: files come and go, so the list scrolls and never moves the widget. */
+.cp-file-actions .cp-source { position: relative; }
+.cp-file-actions .cp-tabs:not(.cp-tree) { scrollbar-width: none; align-items: stretch; }
+.cp-file-actions .cp-tabs:not(.cp-tree)::-webkit-scrollbar { display: none; }
+.cp-file-actions.cp-has-tree .cp-tabs.cp-tree { height: 0; min-height: 100%; padding-top: 0; }
+@container (max-width: 420px) {
+  .cp-file-actions.cp-has-tree .cp-tabs.cp-tree { height: 150px; min-height: 0; }
+}
+.cp-file-row { display: flex; flex: none; align-items: stretch; min-width: 0; }
+.cp-tabs.cp-tree .cp-file-row > button:first-child { flex: 1 1 auto; width: auto; min-width: 0; }
+.cp-tabs button.cp-file-tool,
+.cp-tabs.cp-tree button.cp-file-tool {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  padding: 0;
+  border: 0;
+  color: var(--cp-muted);
+  font-size: 14px;
+}
+.cp-file-tool svg {
+  width: 15px;
+  height: 15px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.cp-tabs button.cp-file-new {
+  position: sticky;
+  right: -6px;
+  background: var(--cp-surface);
+}
+.cp-tree-head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-height: 30px;
+  background: var(--cp-surface);
+}
+.cp-tabs.cp-tree button.cp-tree-root {
+  display: block;
+  flex: 1 1 auto;
+  align-self: stretch;
+  width: auto;
+  min-width: 0;
+  padding: 0 8px;
+  border-left: 0;
+  font-family: inherit;
+}
+.cp-tabs.cp-tree button[aria-current='true'] {
+  background: var(--cp-bg);
+  color: var(--cp-accent);
+  font-weight: 600;
+}
+.cp-file-field {
+  display: flex;
+  flex: none;
+  align-items: stretch;
+  padding: 3px 2px;
+}
+.cp-tree .cp-file-field { padding-left: calc(8px + var(--cp-depth, 0) * 12px); }
+.cp-file-field input {
+  flex: 1 1 auto;
+  width: 170px;
+  min-width: 0;
+  padding: 2px 5px;
+  border: 1px solid var(--cp-accent);
+  border-radius: 3px;
+  background: var(--cp-bg);
+  color: var(--cp-fg);
+  font-family: var(--cp-font-mono);
+  font-size: 12px;
+}
+.cp-tree .cp-file-field input { width: 100%; }
+.cp-file-overlay {
+  position: absolute;
+  z-index: 5;
+  max-width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--cp-border);
+  border-radius: 4px;
+  background: var(--cp-bg);
+  color: var(--cp-fg);
+  font-size: 12px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
+}
+.cp-file-overlay[hidden] { display: none; }
+.cp-file-message { padding: 5px 8px; }
+.cp-file-message.cp-file-refused { border-color: var(--cp-danger); color: var(--cp-danger); }
+.cp-file-pop { display: flex; flex-direction: column; gap: 4px; padding: 4px; width: max-content; max-width: min(100%, 280px); }
+.cp-file-pop p { margin: 4px; }
+.cp-file-pop > button { text-align: left; }
+.cp-file-pop-buttons { display: flex; justify-content: flex-end; gap: 6px; }
+@media (pointer: coarse) {
+  .cp-tabs button.cp-file-tool, .cp-tabs.cp-tree button.cp-file-tool { width: 34px; }
+}
+
+/* Only a preview sits beside the code, and only with no tree: three columns leave
+   the preview too little room. A tree makes any widget a container. */
+@container (min-width: 760px) {
+  .cp-has-preview:not(.cp-has-tree) .cp-body { display: flex; align-items: stretch; }
+  .cp-has-preview:not(.cp-has-tree) .cp-source { display: flex; flex-direction: column; flex: 0 0 var(--cp-source-width, calc(50% - 4px)); min-width: 0; }
+  .cp-has-preview:not(.cp-has-tree) .cp-source .cp-editor { flex: 1 1 auto; }
+  .cp-has-preview:not(.cp-has-tree) .cp-preview-pane { flex: 1 1 0; min-width: 0; }
+  .cp-has-preview:not(.cp-has-tree) .cp-preview { border-top: 0; }
+  .cp-has-preview:not(.cp-has-tree) .cp-split.cp-split-main { width: 7px; height: auto; cursor: col-resize; border-width: 0 1px; }
+  :host([data-window]) .cp-root:not(.cp-has-tree) .cp-body { flex-direction: row; }
+  :host([data-window]) .cp-root:not(.cp-has-tree) .cp-source { flex: 0 0 var(--cp-source-width, calc(50% - 4px)); }
+}
+
+@keyframes cp-slide {
+  0% { background-position: -40% 0; }
+  100% { background-position: 140% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cp-progress { animation: none; background-position: 0 0; background-size: 100% 100%; opacity: 0.4; }
+}
+`,T=e=>()=>import(`@codemirror/lang-javascript`).then(t=>t.javascript(e)),E={py:()=>import(`@codemirror/lang-python`).then(e=>e.python()),pyi:()=>import(`@codemirror/lang-python`).then(e=>e.python()),js:T({}),mjs:T({}),cjs:T({}),jsx:T({jsx:!0}),ts:T({typescript:!0}),mts:T({typescript:!0}),cts:T({typescript:!0}),tsx:T({typescript:!0,jsx:!0}),json:()=>import(`@codemirror/lang-json`).then(e=>e.json()),css:()=>import(`@codemirror/lang-css`).then(e=>e.css()),html:()=>import(`@codemirror/lang-html`).then(e=>e.html()),c:()=>import(`@codemirror/lang-cpp`).then(e=>e.cpp()),h:()=>import(`@codemirror/lang-cpp`).then(e=>e.cpp()),cpp:()=>import(`@codemirror/lang-cpp`).then(e=>e.cpp()),cc:()=>import(`@codemirror/lang-cpp`).then(e=>e.cpp()),cxx:()=>import(`@codemirror/lang-cpp`).then(e=>e.cpp()),hpp:()=>import(`@codemirror/lang-cpp`).then(e=>e.cpp()),hxx:()=>import(`@codemirror/lang-cpp`).then(e=>e.cpp()),java:()=>import(`@codemirror/lang-java`).then(e=>e.java()),cs:()=>Promise.all([import(`@codemirror/language`),import(`@codemirror/legacy-modes/mode/clike`)]).then(([e,t])=>e.StreamLanguage.define(t.csharp))};async function D(e,t){let n=e.includes(`.`)?e.slice(e.lastIndexOf(`.`)+1).toLowerCase():``,r=(t===`react`||t===`next`)&&n===`js`?E.jsx:E[n];return r?r().catch(()=>null):null}var O=`code-playpad`,k=1,A=`snippets`,j=`progress`,M=null;function N(){return typeof indexedDB>`u`?Promise.reject(/* @__PURE__ */ Error(`IndexedDB unavailable`)):(M||=new Promise((e,t)=>{let n=indexedDB.open(O,k);n.onupgradeneeded=()=>{let e=n.result;e.objectStoreNames.contains(A)||e.createObjectStore(A),e.objectStoreNames.contains(j)||e.createObjectStore(j,{keyPath:`id`})},n.onsuccess=()=>e(n.result),n.onerror=()=>t(n.error)}).catch(e=>{throw M=null,e}),M)}function P(e,t,n){return N().then(r=>new Promise((i,a)=>{let o=n(r.transaction(e,t).objectStore(e));o.onsuccess=()=>i(o.result),o.onerror=()=>a(o.error)}))}function F(e,t){return P(A,`readwrite`,n=>n.put(t,e)).then(()=>void 0)}function I(e){return P(A,`readonly`,t=>t.get(e)).then(e=>e??null)}function L(e){return P(A,`readwrite`,t=>(t.delete(R(e)),t.delete(e))).then(()=>void 0)}var R=e=>`${e}\nstarters`;function z(e,t){return F(R(e),t)}function B(e){return I(R(e))}function V(e,t={}){let n={completed:!0,...t,id:e,updatedAt:Date.now()};return P(j,`readwrite`,e=>e.put(n)).then(()=>n)}function H(e){return P(j,`readonly`,t=>t.get(e)).then(e=>e??null)}function U(){return P(j,`readonly`,e=>e.getAll())}var W=`code-playpad`,G=`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4v14a2 2 0 0 0 2 2h3M5 10h5"/><rect x="11" y="7" width="9" height="5" rx="1"/><rect x="11" y="17" width="9" height="5" rx="1"/><path d="M4 3h3"/></svg>`,K=`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 20V6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zM11 9H3M14 5h6"/></svg>`,q=`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8zM14 3v5h5M12 11v6M9 14h6"/></svg>`,J=`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6a1 1 0 0 1 1-1h5l2 3h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zM12 11v5M9.5 13.5h5"/></svg>`,Y=(e,t)=>e?`${e}/${t}`:t;function X(e){if(typeof e!=`string`||!e.trim())return`A file needs a name.`;if(e.includes(`\\`))return`"${e}" has a backslash. Use / between folders.`;let t=e.split(`/`);return t.some(e=>!e.trim())?`"${e}" has an empty folder name.`:t.some(e=>e===`.`||e===`..`)?`"${e}" can't use . or .. as a folder.`:e===`__proto__`?`"${e}" can't be used as a file name.`:null}function Z(e,t,n){let r={...e};for(let e of Object.keys(n))Object.hasOwn(t,e)?r[e]===t[e]&&(r[e]=n[e]):Object.hasOwn(r,e)||(r[e]=n[e]);for(let e of Object.keys(t))!Object.hasOwn(n,e)&&r[e]===t[e]&&delete r[e];return r}function ne(e){let t=e.replace(/\t/g,`    `).split(`
+`);for(;t.length&&t[0].trim()===``;)t.shift();for(;t.length&&t[t.length-1].trim()===``;)t.pop();let n=t.filter(e=>e.trim()!==``).reduce((e,t)=>Math.min(e,t.match(/^ */)[0].length),1/0);return(n===1/0?t:t.map(e=>e.slice(n))).join(`
+`)}var Q=2e5,$=`playpad-file`,re={python:`main.py`,javascript:`main.js`,typescript:`main.ts`,java:`Main.java`,c:`main.c`,cpp:`main.cpp`,csharp:`Program.cs`,cs:`Program.cs`,react:`src/main.jsx`,next:`app/page.jsx`};function ie(e){return re[e]??`main.txt`}var ae=e=>e.tagName===`SCRIPT`&&e.getAttribute(`type`)===`text/plain`;function oe(e){return[...e.children].filter(e=>e.tagName.toLowerCase()===$&&[...e.children].some(e=>!ae(e))).map(e=>e.getAttribute(`name`)??``)}function se(e,t){let n={};for(let t of e.children){if(t.tagName.toLowerCase()!==$)continue;let e=t.getAttribute(`name`),r=[...t.children].find(ae);e&&(n[e]=ne((r??t).textContent??``))}if(Object.keys(n).length)return n;let r=[...e.childNodes].filter(e=>e.nodeType!==Node.ELEMENT_NODE||e.tagName.toLowerCase()!==$),i=r.some(e=>e.nodeType===Node.ELEMENT_NODE),a=ne(r.filter(e=>!(i&&e.nodeType===Node.TEXT_NODE&&!(e.textContent??``).trim())).map(e=>e.textContent??``).join(``));return{[t]:a}}function ce(e,t){try{let t=JSON.parse(e);if(t&&typeof t==`object`&&!Array.isArray(t)){let e=t;return Object.keys(e).length?e:null}}catch{}return e?{[t]:e}:null}var le=typeof HTMLElement>`u`?class{}:HTMLElement,ue=class extends le{static get observedAttributes(){return[`language`,`height`,`min-height`,`max-height`,`preview-height`,`tree-width`,`file-view`,`file-actions`,`file-view-switch`,`open-file`,`theme`,`theme-controls`,`readonly`,`autorun`,`stdin`,`persist`,`entry`,`practice`]}#e;#t;#n;#r;#i;#a;#o;#s;#c;#l;#u=null;#d=null;#f=null;#p=null;#m={};#h={};#g=!1;#_=`main.py`;#v=null;#y;#b=!1;#x=null;#S=!1;#C=!1;#w=null;#T=null;#E=null;#D=()=>this.#rt();#O=null;#k=null;#A=!0;#j=[];#M=null;#N=null;#P=null;#F=0;#I=!1;#L=null;#R;#z;#B=null;#V=[];#H=/* @__PURE__ */ new Set;#U=null;#W=null;#G;#K;#q=null;#J=null;#Y=null;#X=null;#Z=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`})}get code(){return this.#u?this.#u.getCode():this.#m[this.#_]??``}set code(e){this.#m[this.#_]=e,this.#se()}get practice(){if(this.#L)return this.#L;let e=this.getAttribute(`practice`);if(!e)return null;try{return JSON.parse(e)}catch{return null}}set practice(e){this.#L=e}get files(){return this.#pe()}set files(e){let t=Object.keys(e);if(!t.length)return;let n=Object.keys(this.#h);n.length===1&&!this.#h[n[0]]&&(this.#h={...e}),this.#m={...e},this.#J=null,this.#Le(),this.#V=[],t.includes(this.#_)||(this.#_=this.#de()),this.#ae(),this.#oe(),this.#me(),this.#re()}get entry(){return this.#de()}set entry(e){this.setAttribute(`entry`,e)}openFile(e){if(e in this.#m){this.#u&&(e!==this.#_&&this.#ie(),this.#m[this.#_]=this.#u.getCode(),this.#u.openFile(e,this.#m[e]??``)),this.#_=e,this.#U=null;for(let t=e.indexOf(`/`);t!==-1;t=e.indexOf(`/`,t+1))this.#H.delete(e.slice(0,t));this.#me(),this.#re()}}addFile(e,t=``){if(this.#Y)return this.#Y.widget.addFile(e,t);this.#ve();let n=this.#ye(e);if(n)throw Error(n);this.#Se(()=>{this.#m[e]=t}),this.openFile(e),this.#Te(`add`,e)}renameFile(e,t){if(this.#Y)return this.#Y.widget.renameFile(e,t);if(this.#ve(),!Object.hasOwn(this.#m,e))throw Error(`There is no file named "${e}".`);let n=this.#be(e);if(n)throw Error(`"${e}" can't be renamed: ${n}.`);if(t===e)return;let r=this.#ye(t,e);if(r)throw Error(r);let i=this.#pe()[e];this.#Se(()=>{this.#m=Object.fromEntries(Object.entries(this.#m).map(([n,r])=>n===e?[t,i]:[n,r]))}),this.#u?.renameFile(e,t),this.#V=this.#V.filter(t=>t!==e),this.#_===e&&(this.#_=t,this.#Ce(t)),this.#me(),this.#re(),this.#Te(`rename`,t,e)}removeFile(e){if(this.#Y)return this.#Y.widget.removeFile(e);if(this.#ve(),!Object.hasOwn(this.#m,e))throw Error(`There is no file named "${e}".`);if(Object.keys(this.#m).length===1)throw Error(`"${e}" can't be removed: it's the only file.`);let t=this.#be(e);if(t)throw Error(`"${e}" can't be removed: ${t}.`);this.#_===e&&this.openFile(this.#we(e)),delete this.#m[e],this.#u?.forgetFiles(Object.keys(this.#m)),this.#V=this.#V.filter(t=>t!==e),this.#me(),this.#Te(`remove`,e)}get stdin(){return this.#l?this.#l.value:``}set stdin(e){this.#l&&(this.#l.value=e,this.#c.hidden=!1)}get language(){return this.getAttribute(`language`)||`python`}set language(e){this.setAttribute(`language`,e)}getCode(){return this.code}getFiles(){return this.#pe()}reset(){this.#ie(),this.#Le(),this.#J=null,this.#m={...this.#h},this.#_=this.#de(),this.#oe(),this.#me(),this.#re(),this.#ot(),this.#s.hidden=!0,this.#Ze(),this.#B=null,this.#Qe(),this.#at(this.#f?.ready?`${this.#f.label} ready`:``,`idle`),this.#_e()&&this.#et(0)}async run(){if(this.#Y)return this.#Y.widget.run();if(this.#b)return;await this.#d;let e=this.#pe(),t=this.getAttribute(`entry`);if(t&&!(t in e))return this.#le(t,e);this.#ce=!1;let n=this.#de(),r=e[n]??``;this.#b=!0,this.#S=!1,this.#n.disabled=!0,this.#r.hidden=!1,this.#ot(),this.#s.hidden=!1;let i=this.practice;this.hasAttribute(`practice`)&&!i&&this.#st(`The practice attribute is not valid JSON.
+`,`cp-err`),this.#Xe()&&(this.#B=e,this.#Qe(),this.#V.length&&this.#st(`${this.#V.join(`, `)}: HTML tags in this file's markup were read as elements, so its code is incomplete. Write < as &lt;, or put the code in <script type="text/plain">. A <script> left unescaped runs on the host page.\n`,`cp-err`)),this.#pt(`py-run`,{code:r,entry:n,files:e,language:this.language,...i?{practice:i}:{}});try{let t=await this.#ne();if(this.#S)throw new S;if(i&&!t.supportsPractice)throw Error(`Practice mode is not available for ${t.label}.`);this.#at(`Queued…`,`busy`),this.#o.hidden=!1;let a=t.run(r,{stdin:this.#l.value,files:e,entry:n,onStart:()=>this.#at(`Running…`,`busy`),onProgress:e=>this.#at(e.message,`busy`),onStdout:e=>this.#st(e),onStderr:e=>this.#st(e,`cp-err`),onEcho:e=>this.#st(e,`cp-in`),onStdinRequest:()=>this.#lt(),...i?{practice:i}:{},...this.#Xe()?{preview:{host:this.#R,onStart:()=>this.#at(`Running…`,`busy`),onConsole:(e,t)=>{this.#st(`${t}\n`,e===`error`?`cp-err`:e===`warn`?`cp-warn`:void 0),this.#mt(`playpad-console`,{level:e,text:t,language:this.language})},onRender:e=>this.#mt(`playpad-render`,{rootText:e,language:this.language}),onError:e=>{this.#at(`Error`,`error`),this.#pt(`py-error`,{...e,language:this.language})}}}:{}});this.#x={runtime:t,run:a};let o=await a;if(o.table&&this.#ft(o.table),o.value!==void 0&&this.#st(`${o.value}\n`,`cp-value`),o.hint&&this.#dt(o.hint,C.has(o)),o.failed=t.statusDecidesFailure?o.failed===!0:!!o.stderr,o.failed)this.#at(`Error · ${o.durationMs} ms`,`error`),this.#pt(`py-error`,{message:o.problem?.message??o.stderr??``,hint:o.hint,language:this.language,...o.problem??{}});else if(o.cases){let e=o.cases.filter(e=>e.expected!==void 0).length,t=o.passed===e;this.#at(e?`${o.passed} of ${e} passed · ${o.durationMs} ms`:`Done in ${o.durationMs} ms`,t?`ok`:`error`)}else this.#at(`Done in ${o.durationMs} ms`,`ok`);return this.#pt(`py-output`,{...o,language:this.language}),o}catch(e){if(e instanceof S)this.#st(`
+[stopped]
+`,`cp-err`),this.#at(`Stopped`,`error`);else{let t=e instanceof Error?e.message:String(e);this.#st(t+`
+`,`cp-err`),this.#at(`Failed to start`,`error`),this.#pt(`py-error`,{message:t,language:this.language})}return}finally{this.#x=null,this.#ut(null),this.#ct(),this.#b=!1,this.#n.disabled=!1,this.#r.hidden=!(this.#Xe()&&this.#f?.hasLivePreview?.(this.#R)),this.#o.hidden=!0}}stop(){this.#Y?this.#Y.widget.stop():this.#x?this.#x.runtime.stop?.(this.#x.run):this.#b?this.#S=!0:this.#Xe()&&this.#f?.hasLivePreview?.(this.#R)&&(this.#Ze(),this.#r.hidden=!0,this.#at(`Stopped`,`idle`))}openWindow(){if(this.#Y)return this.#Y.window.focus(),!0;if(this.#X)return!1;let e=window.open(``,`_blank`,`popup,width=1280,height=800`);if(!e)return this.#at(`The browser blocked the new window`,`error`),!1;let t=this.#pe(),n=this.#_,r=document.createElement(this.localName);for(let e of[`language`,`entry`,`file-view`,`file-view-switch`,`file-actions`,`preview-height`,`tree-width`,`theme`,`theme-controls`,`readonly`,`stdin`]){let t=this.getAttribute(e);t!==null&&r.setAttribute(e,t)}r.setAttribute(`data-window`,``),r.#X=this,r.#Z={...this.#h},r.#v=t,r.#J=this.#J,this.#Ze(),this.#r.hidden=!0,e.document.title=`Code playground`,e.document.documentElement.style.height=`100%`,e.document.body.style.cssText=`margin:0;height:100%`,e.document.body.append(r);let i=()=>this.closeWindow();return window.addEventListener(`pagehide`,i),this.#Y={window:e,widget:r,onLeave:i,timer:setInterval(()=>{e.closed&&this.closeWindow()},300)},this.#e.querySelector(`.cp-root`)?.classList.add(`cp-popped`),r.#d?.then(()=>(r.openFile(n),r.run())),!0}closeWindow(){let e=this.#Y;if(!e)return;this.#Y=null,clearInterval(e.timer),window.removeEventListener(`pagehide`,e.onLeave);let{widget:t}=e,n=t.#pe(),r=t.#_;t.#Ze(),t.remove(),e.window.closed||e.window.close(),this.#e.querySelector(`.cp-root`)?.classList.remove(`cp-popped`),this.files=n,this.#J=t.#J;let i=t.getAttribute(`file-view`);i!==this.getAttribute(`file-view`)&&(i===null?this.removeAttribute(`file-view`):this.setAttribute(`file-view`,i)),this.openFile(r),this.#at(``,`idle`),this.#_e()&&this.#et(0)}prewarm(){return this.#ne()}connectedCallback(){this.#I?(this.#rt(),this.#te()):!this.textContent?.trim()&&document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,()=>this.isConnected&&this.#Q(),{once:!0}):this.#Q()}disconnectedCallback(){this.#w?.disconnect(),this.#w=null,this.#T?.removeEventListener(`change`,this.#D),this.#T=null,this.#E?.disconnect(),this.#E=null,this.#O?.(),this.#O=null,this.#k&&clearTimeout(this.#k),this.#ut(null),setTimeout(()=>{this.isConnected||(this.closeWindow(),this.#Ze(),this.#u&&(this.#v=this.#pe(),this.#u.destroy(),this.#u=null,this.#d=null,this.#I=!1))},0)}attributeChangedCallback(e,t,n){if(this.#I)switch(e){case`theme`:case`theme-controls`:this.#rt();break;case`height`:this.#ae(),this.#it();break;case`min-height`:case`max-height`:case`preview-height`:case`tree-width`:this.#it();break;case`readonly`:this.#u?.setReadOnly(n!==null),this.hasAttribute(`file-actions`)&&(this.#Le(),this.#me());break;case`stdin`:this.#c.hidden=n===null&&!this.#l.value;break;case`file-view`:case`file-actions`:this.#Le(),this.#me();break;case`entry`:case`file-view-switch`:this.#me();break;case`language`:this.#Ze(),this.#e.querySelector(`.cp-root`)?.classList.toggle(`cp-has-preview`,this.#Xe()),this.#f=null,this.#p=null,this.#C=!1,this.#ne().catch(()=>{})}}#Q(){this.#I=!0,this.#h=this.#Z??se(this,this.#ue()),this.#V=this.#Xe()?oe(this):[],this.#m=this.#v??{...this.#h},this.#_=this.#fe(),this.#$(),this.#rt(),this.#it();let e=this.getAttribute(`persist`);this.#d=(async()=>{if(e&&this.#v==null){let t=await I(e).catch(()=>null),n=t==null?null:ce(t,this.#ue()),r=n&&this.#_e()?await this.#Ee(e):null;if(n&&r){let e=[this.#de(),...this.#xe()],t=Z(n,r,this.#h);for(let n of e)!Object.hasOwn(t,n)&&Object.hasOwn(this.#h,n)&&(t[n]=this.#h[n]);this.#Se(()=>{this.#m=t}),this.#_=this.#fe()}else if(n){let e={},t=Object.keys(this.#h),r=Object.keys(n);for(let r of t)e[r]=n[r]??this.#h[r];t.length===1&&r.length===1&&!(t[0]in n)&&(e[t[0]]=n[r[0]]),this.#m=e,this.#_=this.#fe()}}this.#me();let t=await x(this.language).catch(()=>null),n=t?await t.editorLanguage().catch(()=>null):null;this.#u=await d({parent:this.#t,doc:this.#m[this.#_]??``,name:this.#_,dark:this.#tt(),themeId:this.#nt(),readOnly:this.hasAttribute(`readonly`),language:n,onRun:()=>void this.run(),onChange:e=>this.#$e(e)}),this.#v=null,this.#rt(),this.#re()})(),this.#te()}#$(){let t=document.createElement(`style`);t.textContent=w;let n=document.createElement(`div`);n.className=this.#Xe()?`cp-root cp-has-preview`:`cp-root`,n.innerHTML=`
+      <div class="cp-toolbar">
+        <button class="cp-primary" part="run-button" data-action="run">Run</button>
+        <button class="cp-danger" part="stop-button" data-action="stop" hidden>Stop</button>
+        <button data-action="reset">Reset</button>
+        <span class="cp-spacer"></span>
+        <button part="file-view-button" class="cp-icon-button" data-action="file-view" hidden></button>
+        <button part="theme-button" class="cp-icon-button" data-action="theme">
+          <svg class="cp-theme-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
+          <svg class="cp-theme-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+        </button>
+        <label part="editor-theme-picker" class="cp-theme-picker" title="Editor theme">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a9 9 0 0 0 0 18c1.4 0 2-.9 2-1.8 0-1.2-1-1.7-1-2.7 0-1 .8-1.5 1.8-1.5H17a4 4 0 0 0 4-4c0-4.4-4-8-9-8z"/><circle cx="7.5" cy="11.5" r="1"/><circle cx="10.5" cy="7.5" r="1"/><circle cx="15.5" cy="7.5" r="1"/></svg>
+          <select aria-label="Editor theme">
+            ${[`dark`,`light`].map(t=>`<optgroup label="${t===`dark`?`Dark`:`Light`}">${e.filter(e=>e.mode===t).map(e=>`<option value="${e.id}">${e.label}</option>`).join(``)}</optgroup>`).join(``)}
+          </select>
+        </label>
+        <button part="window-button" class="cp-icon-button cp-window-button" data-action="window" aria-label="Open in window" title="Open in a separate window you can resize">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></svg>
+        </button>
+        <span class="cp-edited-note" hidden>Edited since the last run</span>
+        <span class="cp-status" data-state="idle"></span>
+      </div>
+      <div class="cp-progress" hidden></div>
+      <div class="cp-window-note">
+        <span>Running in a separate window.</span>
+        <button data-action="show-window">Show window</button>
+        <button data-action="close-window">Bring back here</button>
+      </div>
+      <div class="cp-body">
+        <div class="cp-source">
+          <div class="cp-tabs" part="tabs" hidden></div>
+          <div class="cp-split cp-split-tree" role="separator" tabindex="0" aria-orientation="vertical" aria-label="Resize the file tree"></div>
+          <div class="cp-editor"></div>
+          <div class="cp-file-overlay cp-file-pop" hidden></div>
+          <div class="cp-file-overlay cp-file-message" role="status" hidden></div>
+          <div class="cp-stdin" hidden>
+            <label>Standard input — one value per line</label>
+            <textarea rows="2" spellcheck="false"></textarea>
+          </div>
+        </div>
+        <div class="cp-split cp-split-main" role="separator" tabindex="0" aria-label="Resize the code and the preview"></div>
+        <div class="cp-preview-pane">
+          <div class="cp-preview" part="preview"></div>
+          <div class="cp-split cp-split-console" role="separator" tabindex="0" aria-orientation="horizontal" aria-label="Resize the preview and the console"></div>
+          <pre class="cp-output" part="output" hidden></pre>
+        </div>
+      </div>`,this.#e.replaceChildren(t,n),this.#n=n.querySelector(`[data-action="run"]`),this.#r=n.querySelector(`[data-action="stop"]`),this.#i=n.querySelector(`[data-action="reset"]`),this.#a=n.querySelector(`.cp-status`),this.#o=n.querySelector(`.cp-progress`),this.#y=n.querySelector(`.cp-tabs`),this.#t=n.querySelector(`.cp-editor`),this.#c=n.querySelector(`.cp-stdin`),this.#l=n.querySelector(`.cp-stdin textarea`),this.#s=n.querySelector(`.cp-output`),this.#R=n.querySelector(`.cp-preview`),this.#z=n.querySelector(`.cp-edited-note`),this.#G=n.querySelector(`.cp-file-pop`),this.#K=n.querySelector(`.cp-file-message`),this.#Xe()||n.querySelector(`.cp-source`).after(this.#s),this.#c.hidden=!this.hasAttribute(`stdin`),this.#l.addEventListener(`input`,()=>this.#c.classList.remove(`cp-attention`)),this.#y.addEventListener(`click`,e=>{let t=e.target,n=t.closest(`[data-file-action]`);if(n){this.#Ne(n);return}let r=t.closest(`[data-more]`);if(r){this.#Ke(r,r.dataset.more);return}if(t.closest(`[data-target-root]`)){this.#U=``,this.#me(),this.#y.querySelector(`[data-target-root]`)?.focus();return}let i=t.closest(`button[data-file]`);i&&this.openFile(i.getAttribute(`data-file`));let a=t.closest(`button[data-folder]`)?.dataset.folder;a!==void 0&&(this.#_e()&&(this.#U=a),this.#H.delete(a)||this.#H.add(a),this.#me())}),this.#n.addEventListener(`click`,()=>void this.run()),this.#r.addEventListener(`click`,()=>this.stop()),this.#i.addEventListener(`click`,()=>this.#Ye()),this.#G.addEventListener(`keydown`,e=>{let t={ArrowDown:1,ArrowRight:1,ArrowUp:-1,ArrowLeft:-1}[e.key];if(e.key!==`Escape`&&!t)return;if(e.preventDefault(),!t)return this.#We(!0);let n=[...this.#G.querySelectorAll(`button`)];n[(n.indexOf(this.#e.activeElement)+t+n.length)%n.length]?.focus()}),this.#G.addEventListener(`focusout`,e=>{let t=e.relatedTarget;t&&!this.#G.contains(t)&&this.#We(!1)}),n.addEventListener(`pointerdown`,e=>{!this.#G.hidden&&!e.composedPath().includes(this.#G)&&this.#We(!1)}),n.querySelector(`[data-action="theme"]`).addEventListener(`click`,()=>{c({mode:this.#tt()?`light`:`dark`})}),n.querySelector(`.cp-theme-picker select`).addEventListener(`change`,t=>{let n=t.target.value,r=e.find(e=>e.id===n)?.mode;r&&c({mode:r,[r]:n})}),n.querySelector(`[data-action="file-view"]`).addEventListener(`click`,()=>{this.setAttribute(`file-view`,this.getAttribute(`file-view`)===`tree`?`tabs`:`tree`)}),n.querySelector(`[data-action="window"]`).addEventListener(`click`,()=>this.openWindow()),n.querySelector(`[data-action="show-window"]`).addEventListener(`click`,()=>this.openWindow()),n.querySelector(`[data-action="close-window"]`).addEventListener(`click`,()=>this.closeWindow()),this.#ee(n);let r=()=>void this.#ne().catch(()=>{});this.#t.addEventListener(`pointerdown`,r,{once:!0}),this.#t.addEventListener(`focusin`,r,{once:!0})}#ee(e){let t=e.querySelector(`.cp-body`),n=e.querySelector(`.cp-source`),r=e.querySelector(`.cp-preview`),i=e.querySelector(`.cp-preview-pane`),a=this.#y,o=(e,t,n)=>Math.round(Math.max(t,Math.min(e,Math.max(t,n)))),s=(t,n)=>e.style.setProperty(t,`${n}px`),c=(t,n,r,i,a)=>{let o=()=>t.setAttribute(`aria-orientation`,n()===`x`?`vertical`:`horizontal`);t.addEventListener(`pointerdown`,a=>{a.preventDefault();let o=n()===`x`,s=o?a.clientX:a.clientY,c=r();t.setPointerCapture(a.pointerId),e.classList.add(`cp-dragging`,o?`cp-dragging-x`:`cp-dragging-y`);let l=e=>i(c+(o?e.clientX:e.clientY)-s),u=()=>{e.classList.remove(`cp-dragging`,`cp-dragging-x`,`cp-dragging-y`),t.removeEventListener(`pointermove`,l),t.removeEventListener(`pointerup`,u),t.removeEventListener(`pointercancel`,u)};t.addEventListener(`pointermove`,l),t.addEventListener(`pointerup`,u),t.addEventListener(`pointercancel`,u)}),t.addEventListener(`keydown`,e=>{let t={ArrowLeft:-24,ArrowUp:-24,ArrowRight:24,ArrowDown:24}[e.key];t&&(e.preventDefault(),i(r()+t))}),t.addEventListener(`dblclick`,a),t.addEventListener(`focus`,o),t.addEventListener(`pointerenter`,o)},l=()=>getComputedStyle(t).flexDirection===`row`&&getComputedStyle(t).display===`flex`;c(e.querySelector(`.cp-split-tree`),()=>`x`,()=>a.getBoundingClientRect().width,e=>s(`--cp-tree-width`,o(e,90,n.getBoundingClientRect().width-160)),()=>e.style.removeProperty(`--cp-tree-width`)),c(e.querySelector(`.cp-split-main`),()=>l()?`x`:`y`,()=>l()?n.getBoundingClientRect().width:this.#t.getBoundingClientRect().height,n=>{l()?s(`--cp-source-width`,o(n,200,t.getBoundingClientRect().width-200)):(s(`--cp-editor-height`,o(n,80,this.#X?t.getBoundingClientRect().height-100:2e3)),e.classList.add(`cp-editor-sized`))},()=>{e.style.removeProperty(`--cp-source-width`),e.style.removeProperty(`--cp-editor-height`),e.classList.remove(`cp-editor-sized`)}),c(e.querySelector(`.cp-split-console`),()=>`y`,()=>r.getBoundingClientRect().height,e=>s(`--cp-preview-height`,o(e,60,l()||this.#X?i.getBoundingClientRect().height-40:2e3)),()=>e.style.removeProperty(`--cp-preview-height`))}#te(){this.#X||this.#w||typeof IntersectionObserver>`u`||(this.#w=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(this.#w?.disconnect(),this.#w=null,this.#ne().then(()=>{this.hasAttribute(`autorun`)&&this.run()}).catch(()=>{}))},{rootMargin:`300px`}),this.#w.observe(this))}#ne(){return this.#p||=(async()=>{let e=await x(this.language);this.#f=e,!e.ready&&!this.#ce&&(this.#o.hidden=!1,this.#at(`Loading ${e.label}…`,`busy`));try{await e.load(e=>{!this.#b&&!this.#ce&&this.#at(e.message,e.phase===`ready`?`ok`:`busy`)})}catch(e){this.#p=null,this.#at(`Runtime unavailable`,`error`);let t=e instanceof Error?e.message:String(e);throw this.#st(t+`
+`,`cp-err`),this.#s.hidden=!1,e}finally{this.#o.hidden=!0}return this.#re(),this.#C||(this.#C=!0,this.#ce||this.#at(`${e.label} ready`,`ok`),this.#pt(`py-ready`,{language:e.id,label:e.label})),e})(),this.#p}async#re(){if(!this.#u)return;let e=this.#_,t=await D(e,this.language);if(t){this.#_===e&&this.#u?.setLanguage(t);return}let n=e.includes(`.`)?null:await(this.#f??await x(this.language).catch(()=>null))?.editorLanguage().catch(()=>null);this.#_===e&&this.#u?.setLanguage(n??[])}#ie(){if(this.getAttribute(`height`)!==`auto`||this.#X)return;let e=this.#e.querySelector(`.cp-root`),t=this.#t.getBoundingClientRect().height;e&&t&&!e.classList.contains(`cp-editor-sized`)&&(e.style.setProperty(`--cp-editor-height`,`${t}px`),e.classList.add(`cp-editor-sized`),this.#g=!0)}#ae(){if(!this.#g)return;this.#g=!1;let e=this.#e.querySelector(`.cp-root`);e?.style.removeProperty(`--cp-editor-height`),e?.classList.remove(`cp-editor-sized`)}#oe(){this.#u?.openFile(this.#_,this.#m[this.#_]??``),this.#u?.forgetFiles([]),this.#se()}#se(){this.#u?this.#u.setCode(this.#m[this.#_]??``):this.#d?.then(()=>{this.#u?.setCode(this.#m[this.#_]??``),this.#me()})}#ce=!1;#le(e,t){let n=Object.keys(t),r=`This widget's entry is "${e}", but it has no file of that name${n.length?` (its files: ${n.join(`, `)})`:``}. Set entry to one of its files.\n`;this.#ot(),this.#s.hidden=!1,this.#st(r,`cp-err`),this.#ce=!0,this.#at(`Error · entry not found`,`error`);let i={stdout:``,stderr:r,durationMs:0,failed:!0};return this.#pt(`py-error`,{message:r,language:this.language}),this.#pt(`py-output`,{...i,language:this.language}),i}#ue(){return this.getAttribute(`entry`)||ie(this.language)}#de(){let e=Object.keys(this.#m),t=this.getAttribute(`entry`);if(t&&e.includes(t))return t;if(this.#J&&e.includes(this.#J))return this.#J;let n=this.#Xe()&&e.includes(`index.html`)?`index.html`:ie(this.language);if(e.includes(n))return n;if(this.language===`next`){let t=e.filter(e=>/^(src\/)?app\/(\([^/]+\)\/)*page\.(jsx?|tsx?)$/.test(e)).sort((e,t)=>e.split(`/`).length-t.split(`/`).length)[0];if(t)return t}return e[0]??n}#fe(){let e=this.getAttribute(`open-file`);return e&&e in this.#m?e:this.#de()}#pe(){if(this.#Y)return this.#Y.widget.#pe();let e={...this.#m};if(this.#u)for(let t of Object.keys(e))e[t]=this.#u.fileCode(t,e[t]);return e}#me(){let e=Object.keys(this.#m),t=this.#_e();this.#y.hidden=e.length<2&&!t,this.#e.querySelector(`.cp-root`)?.classList.toggle(`cp-file-actions`,t),this.#he();let n=t?this.#Ae():null,r=!this.#y.hidden&&this.getAttribute(`file-view`)===`tree`;if(this.#y.classList.toggle(`cp-tree`,r),this.#e.querySelector(`.cp-root`)?.classList.toggle(`cp-has-tree`,r),this.#y.hidden){this.#y.replaceChildren();return}if(r){this.#ge(e),this.#Qe(),t&&this.#je(n);return}let i=this.#de();if(this.#y.replaceChildren(...e.map(e=>{if(this.#W?.from===e)return this.#ke();let n=document.createElement(`button`);n.dataset.file=e;let r=e.lastIndexOf(`/`)+1;if(r){let t=document.createElement(`span`);t.className=`cp-tab-folder`,t.textContent=e.slice(0,r),n.setAttribute(`aria-label`,e),n.append(t)}return n.append(e.slice(r)),n.setAttribute(`aria-pressed`,String(e===this.#_)),e===i&&(n.classList.add(`cp-entry`),n.title=`entry point — this is the file Run executes`),t?this.#Oe(n,e):n})),t){if(this.#W&&this.#W.kind!==`rename`)this.#y.append(this.#ke());else{let e=this.#De(`new-file`,`New file`,`+`);e.classList.add(`cp-file-new`),this.#y.append(e)}}this.#Qe(),t&&this.#je(n)}#he(){let e=this.#e.querySelector(`[data-action="file-view"]`);if(!e)return;e.hidden=!this.hasAttribute(`file-view-switch`)||this.#y.hidden;let t=this.getAttribute(`file-view`)===`tree`,n=t?`Show files as tabs`:`Show files as a tree`;e.setAttribute(`aria-label`,n),e.title=n,e.innerHTML=t?K:G}#ge(e){let t=this.#de(),n=this.#_e(),r=[],i=this.#W,a=i?.folder?[...e,`${i.folder}/`]:e;if(n){let e=document.createElement(`div`);e.className=`cp-tree-head`;let t=document.createElement(`button`);t.type=`button`,t.className=`cp-tree-root`,t.dataset.targetRoot=``,t.textContent=`Files`,t.title=`Add new files and folders at the top level`,this.#U===``&&t.setAttribute(`aria-current`,`true`);let n=this.#Pe(),i=n?`in ${n}`:`at the top level`,a=this.#De(`new-file`,`New file`,q);a.title=`New file ${i}`;let o=this.#De(`new-folder`,`New folder`,J);o.title=`New folder ${i}`,e.append(t,a,o),r.push(e)}let o=(e,s)=>{let c=a.filter(t=>t.startsWith(e)).map(t=>t.slice(e.length));i&&i.kind!==`rename`&&`${i.folder}/`===(e||`/`)&&r.push(this.#ke(s));let l=[...new Set(c.filter(e=>e.includes(`/`)).map(e=>e.slice(0,e.indexOf(`/`))))].sort();for(let t of l){let i=e+t,a=!this.#H.has(i),c=document.createElement(`button`);if(c.className=`cp-tree-folder`,c.dataset.folder=i,c.textContent=t,c.setAttribute(`aria-expanded`,String(a)),n&&this.#U===i&&c.setAttribute(`aria-current`,`true`),c.style.setProperty(`--cp-depth`,String(s)),n){let e=this.#De(`new-file`,`New file in ${i}`,`+`);e.dataset.in=i;let t=document.createElement(`div`);t.className=`cp-file-row`,t.append(c,e),r.push(t)}else r.push(c);a&&o(`${i}/`,s+1)}for(let a of c.filter(e=>e&&!e.includes(`/`)).sort()){let o=e+a;if(i?.from===o){r.push(this.#ke(s));continue}let c=document.createElement(`button`);c.dataset.file=o,c.textContent=a,c.setAttribute(`aria-label`,o),c.setAttribute(`aria-pressed`,String(o===this.#_)),c.style.setProperty(`--cp-depth`,String(s)),o===t&&(c.classList.add(`cp-entry`),c.title=`entry point — this is the file Run executes`),r.push(n?this.#Oe(c,o):c)}};o(``,0),this.#y.replaceChildren(...r)}#_e(){return this.hasAttribute(`file-actions`)&&!this.hasAttribute(`readonly`)}#ve(){if(!this.#I)throw Error(`Add the widget to the page before changing its files.`)}#ye(e,t){let n=X(e);if(n)return n;let r=Object.keys(this.#m).filter(e=>e!==t);if(r.includes(e))return`A file named "${e}" already exists.`;if(r.some(t=>t.startsWith(`${e}/`)))return`"${e}" is a folder.`;let i=r.find(t=>e.startsWith(`${t}/`));return i?`"${i}" is a file, so it can't hold other files.`:null}#be(e){return e===this.#de()?`it's the entry file`:this.#xe().has(e)?`this ${this.language} project needs it`:null}#xe(){let e=/* @__PURE__ */ new Set,t=Object.keys(this.#m);if(this.language===`next`)for(let n of t)/^(src\/)?app\/layout\.(jsx?|tsx?)$/.test(n)&&e.add(n);if(this.language!==`react`)return e;for(let n of[`src/main.jsx`,`src/main.js`])t.includes(n)&&e.add(n);let n=this.#pe()[`index.html`];if(n===void 0)return e;e.add(`index.html`);let r=new DOMParser().parseFromString(n,`text/html`);for(let n of r.querySelectorAll(`script[src], link[rel="stylesheet"][href]`)){let r=(n.getAttribute(`src`)??n.getAttribute(`href`)).replace(/^\.?\//,``);t.includes(r)&&e.add(r)}return e}#Se(e){let t=this.#de();e(),this.#de()!==t&&Object.hasOwn(this.#m,t)&&(this.#J=t)}#Ce(e){for(let t=e.indexOf(`/`);t!==-1;t=e.indexOf(`/`,t+1))this.#H.delete(e.slice(0,t))}#we(e){let t=[...this.#y.querySelectorAll(`button[data-file]`)].map(e=>e.dataset.file),n=t.indexOf(e);return(n===-1?void 0:t[n+1]??t[n-1])??Object.keys(this.#m).find(t=>t!==e)}#Te(e,t,n){this.#et(0),this.#mt(`playpad-files-change`,{action:e,name:t,...n?{previousName:n}:{},files:this.#pe()})}async#Ee(e){let t=await B(e).catch(()=>null);if(!t)return null;try{return JSON.parse(t)}catch{return null}}#De(e,t,n){let r=document.createElement(`button`);return r.type=`button`,r.className=`cp-file-tool`,r.dataset.fileAction=e,r.setAttribute(`aria-label`,t),r.title=t,r.innerHTML=n,r}#Oe(e,t){let n=document.createElement(`div`);if(n.className=`cp-file-row`,n.append(e),this.#be(t))return n;let r=document.createElement(`button`);return r.type=`button`,r.className=`cp-file-tool cp-file-more`,r.dataset.more=t,r.textContent=`⋯`,r.setAttribute(`aria-label`,`Actions for ${t}`),r.setAttribute(`aria-expanded`,`false`),r.title=`Rename or remove`,n.append(r),n}#ke(e=0){let t=this.#W,n=document.createElement(`form`);n.className=`cp-file-field`,n.style.setProperty(`--cp-depth`,String(e));let r=document.createElement(`input`);r.type=`text`,r.value=t.value,r.autocapitalize=`off`,r.autocomplete=`off`,r.spellcheck=!1,r.placeholder=t.kind===`folder`?`components`:`TaskLine.jsx`;let i=t.folder?` in ${t.folder}`:``;r.setAttribute(`aria-label`,t.kind===`rename`?`New name for ${t.from}`:t.kind===`folder`?`Name of the new folder${i}`:`Name of the new file${i}`),r.addEventListener(`input`,()=>{t.value=r.value,this.#Be(``)}),r.addEventListener(`keydown`,e=>{e.key===`Escape`&&(e.preventDefault(),this.#Re())});let a=document.createElement(`button`);return a.type=`button`,a.className=`cp-file-tool`,a.dataset.fileAction=`cancel`,a.textContent=`×`,a.setAttribute(`aria-label`,`Cancel`),n.addEventListener(`submit`,e=>{e.preventDefault(),this.#ze()}),n.append(r,a),n}#Ae(){let e=this.#e.activeElement;if(!e||!this.#y.contains(e))return null;if(e.closest(`.cp-file-field`))return{field:!0};let{file:t,folder:n,more:r}=e.dataset;return{file:t,folder:n,more:r}}#je(e){let t=this.#y.querySelector(`.cp-file-field input`);if(t&&this.#W?.fresh){this.#W.fresh=!1,t.focus();let e=this.#W.kind===`rename`?t.value.lastIndexOf(`.`):-1;e>0?t.setSelectionRange(t.value.lastIndexOf(`/`)+1,e):t.setSelectionRange(t.value.length,t.value.length)}else e?.field?t?.focus():e&&this.#Me(e)?.focus();let n=this.#y.querySelector(`button[aria-pressed="true"]`);if(n&&!t){let e=this.#y.getBoundingClientRect(),t=n.getBoundingClientRect();t.left<e.left?this.#y.scrollLeft-=e.left-t.left:t.right>e.right-32&&(this.#y.scrollLeft+=t.right-e.right+32),t.top<e.top?this.#y.scrollTop-=e.top-t.top:t.bottom>e.bottom&&(this.#y.scrollTop+=t.bottom-e.bottom)}}#Me(e){return[...this.#y.querySelectorAll(`button`)].find(({dataset:t})=>e.file!==void 0&&t.file===e.file||e.folder!==void 0&&t.folder===e.folder||e.more!==void 0&&t.more===e.more)}#Ne(e){let t=e.dataset.fileAction;if(t===`cancel`)return this.#Re();let n=this.getAttribute(`file-view`)===`tree`,r=e.dataset.in??this.#Pe();this.#Ce(`${r}/`),this.#Fe(t===`new-folder`?{kind:`folder`,folder:r,value:``,fresh:!0}:n?{kind:`file`,folder:r,value:``,fresh:!0}:{kind:`file`,folder:``,value:r&&`${r}/`,fresh:!0})}#Pe(){let e=this.#U;return e===``||e&&Object.keys(this.#m).some(t=>t.startsWith(`${e}/`))?e:this.#_.includes(`/`)?this.#_.slice(0,this.#_.lastIndexOf(`/`)):``}#Fe(e){this.#We(!1),this.#Be(``),this.#W=e,this.#me()}#Ie(e){let t=this.getAttribute(`file-view`)===`tree`?e.lastIndexOf(`/`):-1;this.#Fe({kind:`rename`,from:e,folder:t===-1?``:e.slice(0,t),value:e.slice(t+1),fresh:!0})}#Le(){this.#W=null,this.#U=null,this.#G&&(this.#G.hidden=!0,this.#Be(``))}#Re(){let e=this.#W?.from;this.#W=null,this.#Be(``),this.#me(),(e&&this.#Me({more:e})||this.#Me({file:this.#_}))?.focus()}#ze(){let e=this.#W;if(!e)return;let t=e.value.trim(),n=this.getAttribute(`file-view`)===`tree`;if(e.kind===`folder`||e.kind===`file`&&t.endsWith(`/`)){if(!n)return this.#Be(`Add a file name after the folder.`,!0);if(!t)return this.#Be(`A folder needs a name.`,!0);let r=Y(e.folder,t.replace(/\/$/,``)),i=Object.keys(this.#m).some(e=>e.startsWith(`${r}/`))?null:this.#ye(r);return i?this.#Be(i,!0):(this.#Ce(`${r}/`),this.#Fe({kind:`file`,folder:r,value:``,fresh:!0}))}if(!t)return this.#Be(`A file needs a name.`,!0);let r=Y(e.folder,t);if(e.kind===`rename`&&r===e.from)return this.#Re();if(Object.hasOwn(this.#m,r))return this.#W=null,this.openFile(r),this.#u?.focus(),this.#Be(`"${r}" already exists, so it's open now.`,!1,4e3);let i=this.#ye(r,e.from);if(i)return this.#Be(i,!0);if(this.#W=null,this.#Be(``),e.kind===`rename`){let t=this.#_===e.from;this.renameFile(e.from,r),t?this.#u?.focus():this.#Me({file:r})?.focus()}else this.addFile(r),this.#u?.focus()}#Be(e,t=!1,n=0){this.#q&&clearTimeout(this.#q),this.#q=n?setTimeout(()=>this.#Be(``),n):null,this.#K.textContent=e,this.#K.hidden=!e,this.#K.classList.toggle(`cp-file-refused`,t),this.#y.querySelector(`.cp-file-field input`)?.setAttribute(`aria-invalid`,String(!!e&&t)),e&&this.#Ve(this.#K,t&&this.#y.querySelector(`.cp-file-field`)||this.#y)}#Ve(e,t){e.hidden=!1;let n=e.parentElement.getBoundingClientRect(),r=t.getBoundingClientRect();e.style.top=`${Math.max(0,Math.min(r.bottom-n.top+2,n.height-e.offsetHeight))}px`,e.style.left=`${Math.max(0,Math.min(r.left-n.left,n.width-e.offsetWidth))}px`}#He=null;#Ue(e,t){this.#We(!1),this.#He=e,this.#G.replaceChildren(...t),this.#Ve(this.#G,e),this.#G.querySelector(`button`)?.focus()}#We(e){this.#G&&!this.#G.hidden&&(this.#G.hidden=!0,this.#G.replaceChildren(),this.#G.removeAttribute(`role`),this.#G.removeAttribute(`aria-label`),this.#He?.setAttribute(`aria-expanded`,`false`),e&&this.#He?.focus(),this.#He=null)}#Ge(e,t,n=``){let r=document.createElement(`button`);return r.type=`button`,r.textContent=e,r.className=n,r.addEventListener(`click`,t),r}#Ke(e,t){let n=()=>{this.#pe()[t]?.trim()?this.#qe(e,`Remove ${t}? Its code will be lost.`,`Remove`,()=>this.#Je(t)):this.#Je(t)},r=this.#Ge(`Rename`,()=>{this.#We(!1),this.#Ie(t)});this.#Ue(e,[r,this.#Ge(`Remove`,n)]),e.setAttribute(`aria-expanded`,`true`)}#qe(e,t,n,r){let i=document.createElement(`p`);i.textContent=t;let a=document.createElement(`div`);a.className=`cp-file-pop-buttons`,a.append(this.#Ge(`Cancel`,()=>this.#We(!0)),this.#Ge(n,()=>{this.#We(!1),r()},`cp-danger`)),this.#Ue(e,[i,a]),this.#G.setAttribute(`role`,`alertdialog`),this.#G.setAttribute(`aria-label`,t)}#Je(e){this.#We(!1);let t=this.#we(e);this.removeFile(e),this.#Me({file:t})?.focus()}#Ye(){let e=Object.keys(this.#m),t=Object.keys(this.#h),n=e.length===t.length&&e.every(e=>Object.hasOwn(this.#h,e));if(!this.#_e()||n)return this.reset();this.#qe(this.#i,`Reset the project? Files you added go away, and files you removed come back.`,`Reset`,()=>{this.reset(),this.#i.focus()})}#Xe(){return this.language===`react`||this.language===`next`}#Ze(){this.#R&&(this.#f?.dispose?.(this.#R),this.#R.replaceChildren())}#Qe(){if(!this.#Xe())return;let e=this.#pe();for(let t of this.#y.querySelectorAll(`button[data-file]`)){let n=t.dataset.file;t.classList.toggle(`cp-edited`,e[n]!==this.#h[n])}let t=this.#B,n=!this.hasAttribute(`file-actions`)||Object.keys(t??{}).every(t=>Object.hasOwn(e,t));this.#z.hidden=!t||n&&Object.keys(e).every(n=>e[n]===t[n])}#$e(e){this.#m[this.#_]=e,this.#Qe(),this.#et()}#et(e=400){let t=this.getAttribute(`persist`);if(!t)return;this.#k&&clearTimeout(this.#k);let n=JSON.stringify(this.#pe()),r=this.#_e()?JSON.stringify(this.#h):null,i=()=>{r&&z(t,r).catch(()=>{}),F(t,n).catch(()=>{})};e?this.#k=setTimeout(i,e):i()}#tt(){let e=this.getAttribute(`theme`)??`auto`;if(e===`dark`)return!0;if(e===`light`)return!1;let t=s().mode;if(t)return t===`dark`;let n=typeof document>`u`?``:getComputedStyle(document.documentElement).colorScheme,r=n.includes(`dark`);return r===n.includes(`light`)?!!this.#T?.matches:r}#nt(){return s()[this.#tt()?`dark`:`light`]}#rt(){this.#O??=l(this.#D),!this.#T&&typeof matchMedia==`function`&&(this.#T=matchMedia(`(prefers-color-scheme: dark)`),this.#T.addEventListener(`change`,this.#D)),!this.#E&&typeof MutationObserver==`function`&&typeof document<`u`&&(this.#E=new MutationObserver(this.#D),this.#E.observe(document.documentElement,{attributes:!0,attributeFilter:[`class`,`style`,`data-theme`,`data-color-scheme`,`color-scheme`]}));let e=this.#tt(),t=this.#nt();this.setAttribute(`data-resolved-theme`,e?`dark`:`light`),this.setAttribute(`data-editor-theme`,t),this.#u?.setTheme(e,t);let n=this.getAttribute(`theme`),r=n===`light`||n===`dark`||this.getAttribute(`theme-controls`)===`off`,i=this.#e.querySelector(`[data-action="theme"]`),a=this.#e.querySelector(`.cp-theme-picker`);if(i&&a){let n=e?`Switch to the light theme`:`Switch to the dark theme`;i.hidden=a.hidden=r,i.title=n,i.setAttribute(`aria-label`,n),a.querySelector(`select`).value=t}}#it(){for(let[e,t]of[[`height`,`--cp-height`],[`min-height`,`--cp-min-height`],[`max-height`,`--cp-max-height`],[`preview-height`,`--cp-preview-height`]]){let n=this.getAttribute(e);n===null||n===``?this.style.removeProperty(t):this.style.setProperty(t,/^\d+$/.test(n)?`${n}px`:n)}let e=this.getAttribute(`tree-width`)?.trim();e?/^(\d+(px)?|\d+(\.\d+)?%)$/.test(e)?this.style.setProperty(`--cp-tree-width`,/\d$/.test(e)?`${e}px`:e):(this.style.removeProperty(`--cp-tree-width`),console.warn(`code-playpad: tree-width="${e}" is not a size. Use a percentage like "20%" or pixels like "240".`)):this.style.removeProperty(`--cp-tree-width`)}#at(e,t){this.#a.textContent=e,this.#a.dataset.state=t}#ot(){this.#P&&clearTimeout(this.#P),this.#P=null,this.#j=[],this.#F=0,this.#s.replaceChildren(),this.#A=!0}#st(e,t){if(!e)return;let n=t===`cp-err`&&!this.#A?`\n${e}`:e;this.#A=n.endsWith(`
+`),this.#j.push({text:n,className:t}),this.#P??=setTimeout(()=>this.#ct(),16)}#ct(){if(this.#P&&clearTimeout(this.#P),this.#P=null,!this.#j.length)return;let e=this.#j;this.#j=[];let t=document.createDocumentFragment(),n=``,r,i=()=>{if(!n)return;let e=document.createElement(`span`);r&&(e.className=r),e.textContent=n,t.appendChild(e),n=``};for(let t of e){if(this.#F>=Q)break;let e=t.text;this.#F+e.length>Q&&(e=e.slice(0,Q-this.#F)+`
+… output truncated for display — the full text is in the playpad-output event
+`),this.#F+=t.text.length,r!==t.className&&(i(),r=t.className),n+=e}i(),this.#s.hidden=!1;let a=this.#s.querySelector(`.cp-prompt`);a?this.#s.insertBefore(t,a):this.#s.appendChild(t),this.#s.scrollTop=this.#s.scrollHeight}#lt(){return this.#ct(),this.#ut(null),new Promise(e=>{let t=document.createElement(`form`);t.className=`cp-prompt`;let n=document.createElement(`input`);n.type=`text`,n.setAttribute(`aria-label`,`Program input — press Enter to send`),n.autocapitalize=`off`,n.autocomplete=`off`,n.spellcheck=!1;let r=document.createElement(`button`);r.type=`submit`,r.className=`cp-send`,r.textContent=`⏎`,r.title=`Send this line (Enter)`;let i=document.createElement(`button`);i.type=`button`,i.className=`cp-eof`,i.textContent=`EOF`,i.title=`End of input (Ctrl-D) — makes input() raise EOFError`;let a=n=>{this.#M===e&&(this.#M=null,this.#N=null,t.remove(),n===null?this.#st(`
+`,`cp-in`):this.#st(n+`
+`,`cp-in`),this.#ct(),e(n))};t.addEventListener(`submit`,e=>{e.preventDefault(),a(n.value)}),i.addEventListener(`click`,()=>a(null)),n.addEventListener(`keydown`,e=>{(e.key===`Escape`||e.key===`d`&&e.ctrlKey)&&(e.preventDefault(),a(null))}),t.append(n,r,i),this.#s.hidden=!1,this.#s.appendChild(t),this.#s.scrollTop=this.#s.scrollHeight,this.#M=e,this.#N=a,n.focus({preventScroll:!0})})}#ut(e){this.#N?.(e),this.#N=null,this.#M=null}#dt(e,t){this.#ct();let n=document.createElement(`div`);n.className=`cp-hint`,n.textContent=e,this.#s.hidden=!1,this.#s.appendChild(n),this.#s.scrollTop=this.#s.scrollHeight,t&&(this.#c.hidden=!1,this.#c.classList.add(`cp-attention`))}#ft(e){this.#ct();let t=document.createElement(`table`);t.className=`cp-table`;let n=t.createTHead().insertRow();for(let t of e.columns){let e=document.createElement(`th`);e.textContent=t,n.appendChild(e)}let r=t.createTBody();for(let t of e.rows){let e=r.insertRow();for(let n of t)e.insertCell().textContent=n==null?``:String(n)}this.#s.hidden=!1,this.#s.appendChild(t)}#pt(e,t){this.#mt(e,t),this.#mt(`playpad-${e.slice(3)}`,t)}#mt(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0})),this.#X?.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}};function de(e=W){typeof window<`u`&&typeof customElements<`u`&&(customElements.get(e)||customElements.define(e,ue))}de();export{s as _,H as a,V as c,te as d,x as f,e as g,d as h,L as i,C as l,y as m,de as n,I as o,b as p,U as r,F as s,ue as t,S as u,l as v,c as y};