livecode-static/docs/assets/js/51386caf.4aed8be6.js

"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["5839"],{3943:function(e,s,t){t.r(s),t.d(s,{default:()=>u,frontMatter:()=>l,metadata:()=>r,assets:()=>d,toc:()=>c,contentTitle:()=>a});var r=JSON.parse('{"id":"features/css","title":"CSS","description":"The result page can be styled with CSS using various methods, including:","source":"@site/docs/features/css.mdx","sourceDirName":"features","slug":"/features/css","permalink":"/docs/features/css","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/features/css.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"Templates","permalink":"/docs/features/templates"},"next":{"title":"Result Page","permalink":"/docs/features/result"}}'),n=t("5893"),o=t("65"),i=t("3365");let l={},a="CSS",d={},c=[{value:"Style Editor",id:"style-editor",level:2},{value:"Languages",id:"languages",level:3},{value:"CSS Processors",id:"css-processors",level:3},{value:"Style Imports",id:"style-imports",level:3},{value:"Example",id:"example",level:4},{value:"Compiled CSS",id:"compiled-css",level:3},{value:"Auto-update",id:"auto-update",level:3},{value:"External Resources",id:"external-resources",level:2},{value:"CSS Presets",id:"css-presets",level:2},{value:"Stylesheets Imported in Script Editor",id:"stylesheets-imported-in-script-editor",level:2},{value:"External Stylesheets",id:"external-stylesheets",level:3},{value:"<code>./style.css</code>",id:"stylecss",level:3},{value:"CSS Modules",id:"css-modules",level:2},{value:"CSS Frameworks",id:"css-frameworks",level:2},{value:"Styles in Markup &amp; Script",id:"styles-in-markup--script",level:2},{value:"Related",id:"related",level:2}];function h(e){let s={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.header,{children:(0,n.jsx)(s.h1,{id:"css",children:"CSS"})}),"\n","\n",(0,n.jsxs)(s.p,{children:["The ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"})," can be styled with CSS using various methods, including:"]}),"\n",(0,n.jsx)(s.h2,{id:"style-editor",children:"Style Editor"}),"\n",(0,n.jsxs)(s.p,{children:["Code added to ",(0,n.jsx)(s.a,{href:"/docs/features/projects#style-editor",children:"style editor"})," is ",(0,n.jsx)(s.a,{href:"#languages",children:"compiled"})," and ",(0,n.jsx)(s.a,{href:"#css-processors",children:"processed"}),", then added as CSS to the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"})," ",(0,n.jsx)(s.code,{children:"head"})," element."]}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.img,{alt:"LiveCodes styles",src:t(6290).Z+"",width:"2240",height:"1400"})," "]}),"\n",(0,n.jsx)(s.h3,{id:"languages",children:"Languages"}),"\n",(0,n.jsxs)(s.p,{children:["LiveCodes supports multiple languages that compile to CSS, including ",(0,n.jsx)(s.a,{href:"/docs/languages/scss",children:"SCSS"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/sass",children:"Sass"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/less",children:"Less"})," and ",(0,n.jsx)(s.a,{href:"/docs/languages/stylus",children:"Stylus"}),". Code authored in any of these languages is compiled to CSS before being added to the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["The style language can be selected from the style editor menu. In embedded playgrounds, the language can be configured via the configuration object property ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object#style",children:(0,n.jsx)(s.code,{children:"style.language"})})]}),"\n",(0,n.jsx)(s.h3,{id:"css-processors",children:"CSS Processors"}),"\n",(0,n.jsxs)(s.p,{children:["The (compiled) CSS code can be processed by one or more of the supported CSS processors. Examples of these include: ",(0,n.jsx)(s.a,{href:"/docs/languages/autoprefixer",children:"Autoprefixer"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/postcssPresetEnv",children:"postcss-preset-env"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/lightningcss",children:"Lightning CSS"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/cssmodules",children:"CSS Modules"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/cssnano",children:"cssnano"}),", ...etc."]}),"\n",(0,n.jsx)(s.p,{children:"Multiple CSS processors can be enabled at the same time. The code is processed in the order of processors placed in the style editor menu of the app."}),"\n",(0,n.jsxs)(s.p,{children:["Processors are enabled in the ",(0,n.jsx)(s.a,{href:"/docs/getting-started#standalone-app",children:"standalone app"})," from the style editor menu, by switching on the toggles of the required processors."]}),"\n",(0,n.jsxs)(s.p,{children:["In embedded playgrounds, processors are enabled via the ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object#processors",children:(0,n.jsx)(s.code,{children:"processors"})})," property of the ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object",children:"configuration object"}),"."]}),"\n",(0,n.jsx)(s.h3,{id:"style-imports",children:"Style Imports"}),"\n",(0,n.jsxs)(s.p,{children:[(0,n.jsx)(s.a,{href:"/docs/features/module-resolution#bare-module-imports",children:"Bare modules"})," used with ",(0,n.jsx)(s.code,{children:"@import"})," rules are supposed to be npm modules. These are converted to ",(0,n.jsx)(s.a,{href:"/docs/features/module-resolution#cdn-providers",children:"full URLs from CDN"}),"."]}),"\n",(0,n.jsx)(s.h4,{id:"example",children:"Example"}),"\n",(0,n.jsx)(s.p,{children:"This code:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@import 'github-markdown-css/github-markdown.css';\n"})}),"\n",(0,n.jsx)(s.p,{children:"becomes:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@import 'https://unpkg.com/github-markdown-css/github-markdown.css';\n"})}),"\n",(0,n.jsx)(s.p,{children:"Packages that specify a stylesheet as the main module can be imported like that:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-css",children:"@import 'github-markdown-css';\n"})}),"\n",(0,n.jsx)(s.p,{children:"demo:"}),"\n",(0,n.jsx)(i.Z,{template:"markdown",params:{activeEditor:"style",compiled:"open"}}),"\n",(0,n.jsxs)(s.p,{children:["The content can be inlined in the compiled CSS by enabling the processor ",(0,n.jsx)(s.a,{href:"/docs/languages/postcssImportUrl",children:"postcss-import-url"}),"."]}),"\n",(0,n.jsx)(s.h3,{id:"compiled-css",children:"Compiled CSS"}),"\n",(0,n.jsxs)(s.p,{children:["Compiled CSS (following compilation of style language, and all enabled processors) is added to the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"})," ",(0,n.jsx)(s.code,{children:"head"})," element."]}),"\n",(0,n.jsxs)(s.p,{children:["The compiled code can be inspected in the ",(0,n.jsx)(s.a,{href:"/docs/features/compiled-code",children:"compiled code viewer"})," in the ",(0,n.jsx)(s.a,{href:"/docs/features/tools-pane",children:"tools pane"}),"."]}),"\n",(0,n.jsx)(s.h3,{id:"auto-update",children:"Auto-update"}),"\n",(0,n.jsxs)(s.p,{children:["When ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object#autoupdate",children:(0,n.jsx)(s.code,{children:"autoupdate"})})," is enabled (default), in contrast to ",(0,n.jsx)(s.a,{href:"/docs/features/projects#markup-editor",children:"markup editor"})," and ",(0,n.jsx)(s.a,{href:"/docs/features/projects#script-editor",children:"script editor"}),", changes in style editor code does NOT trigger a full reload of the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"}),". The updated CSS code is sent to the page and applied without a reload."]}),"\n",(0,n.jsxs)(s.p,{children:["The page can be force-reloaded by clicking the run button or using the keyboard shortcut: ",(0,n.jsx)("kbd",{children:"Shift"}),"\xa0+\xa0",(0,n.jsx)("kbd",{children:"Enter"}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"external-resources",children:"External Resources"}),"\n",(0,n.jsxs)(s.p,{children:["External stylesheets can be added in ",(0,n.jsx)(s.a,{href:"/docs/features/external-resources",children:"external resources"})," screen. These are added to the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"})," before the compiled style editor code. This allows code in style editor to override CSS properties in external stylesheets."]}),"\n",(0,n.jsxs)(s.p,{children:["External stylesheets can be added to embedded playgrounds using the ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object",children:"configuration object"})," property ",(0,n.jsx)(s.a,{href:"/docs/configuration/configuration-object#stylesheets",children:(0,n.jsx)(s.code,{children:"stylesheets"})}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"css-presets",children:"CSS Presets"}),"\n",(0,n.jsxs)(s.p,{children:["CSS presets like ",(0,n.jsx)(s.a,{href:"https://necolas.github.io/normalize.css/",children:"Normalize.css"})," and ",(0,n.jsx)(s.a,{href:"https://meyerweb.com/eric/tools/css/reset/",children:"Reset CSS"})," can be selected in ",(0,n.jsx)(s.a,{href:"/docs/features/external-resources#css-presets",children:"external resources"})," screen."]}),"\n",(0,n.jsx)(s.h2,{id:"stylesheets-imported-in-script-editor",children:"Stylesheets Imported in Script Editor"}),"\n",(0,n.jsx)(s.h3,{id:"external-stylesheets",children:"External Stylesheets"}),"\n",(0,n.jsxs)(s.p,{children:["CSS stylesheets imported in the script editor are added to the ",(0,n.jsx)(s.a,{href:"/docs/features/result",children:"result page"})," ",(0,n.jsx)(s.code,{children:"head"})," element. ",(0,n.jsxs)(s.em,{children:["The URL has to end with ",(0,n.jsxs)(s.strong,{children:[(0,n.jsx)(s.code,{children:".css"})," extension"]})]}),"."]}),"\n",(0,n.jsx)(s.p,{children:"For example, adding this in the script editor (JavaScript):"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"import 'https://unpkg.com/github-markdown-css/github-markdown.css';\n"})}),"\n",(0,n.jsxs)(s.p,{children:["adds this to the page ",(0,n.jsx)(s.code,{children:"head"}),":"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-html",children:'<link rel="stylesheet" href="https://unpkg.com/github-markdown-css/github-markdown.css" />\n'})}),"\n",(0,n.jsx)(s.p,{children:"Currently, compiling imported stylesheets (e.g. SCSS) is not supported."}),"\n",(0,n.jsxs)(s.p,{children:["Similar to ",(0,n.jsx)(s.a,{href:"#style-imports",children:"imports in style editor"}),", bare imports are converted to full URLs from CDN."]}),"\n",(0,n.jsx)(s.p,{children:"For example:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"import 'github-markdown-css/github-markdown.css';\n"})}),"\n",(0,n.jsx)(s.p,{children:"becomes:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-html",children:'<link rel="stylesheet" href="https://unpkg.com/github-markdown-css/github-markdown.css" />\n'})}),"\n",(0,n.jsx)(s.h3,{id:"stylecss",children:(0,n.jsx)(s.code,{children:"./style.css"})}),"\n",(0,n.jsxs)(s.p,{children:["Importing the URLs (",(0,n.jsx)(s.code,{children:"./style.css"})," or ",(0,n.jsx)(s.code,{children:"./styles.css"}),") gets the style editor compiled/processed CSS ",(0,n.jsx)(s.strong,{children:"string"})," as the module's default export."]}),"\n",(0,n.jsx)(s.p,{children:"Example:"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:"import styles from './style.css';\n\nconsole.log(styles); // => compiled CSS as string\n"})}),"\n",(0,n.jsx)(s.h2,{id:"css-modules",children:"CSS Modules"}),"\n",(0,n.jsxs)(s.p,{children:["CSS modules are supported and are ",(0,n.jsx)(s.a,{href:"/docs/languages/cssmodules",children:"documented separately"}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"css-frameworks",children:"CSS Frameworks"}),"\n",(0,n.jsxs)(s.p,{children:["Multiple CSS frameworks are supported including ",(0,n.jsx)(s.a,{href:"/docs/languages/tailwindcss",children:"Tailwind CSS"}),", ",(0,n.jsx)(s.a,{href:"/docs/languages/unocss",children:"UnoCSS"})," and ",(0,n.jsx)(s.a,{href:"/docs/languages/windicss",children:"WindiCSS"}),"."]}),"\n",(0,n.jsx)(s.h2,{id:"styles-in-markup--script",children:"Styles in Markup & Script"}),"\n",(0,n.jsx)(s.p,{children:"Of course, styles and stylesheets can still be added as usual in markup and script editors (via HTML elements and/or DOM)."}),"\n",(0,n.jsx)(s.h2,{id:"related",children:"Related"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/projects",children:"Projects"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/external-resources",children:"External resources"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/features/module-resolution",children:"Module resolution"})}),"\n"]})]})}function u(e={}){let{wrapper:s}={...(0,o.a)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},6290:function(e,s,t){t.d(s,{Z:function(){return r}});let r=t.p+"assets/images/css-processors-832dad3e4809409f2d12e9d8109f0962.jpg"},3365:function(e,s,t){t.d(s,{Z:()=>f});var r=t("5893"),n=t("4200"),o=t("7294"),i=t("8294");function l(e){let s=(0,o.useRef)(null),[t,n]=(0,o.useState)(e.className||""),[l,a]=(0,o.useState)(e.style||{}),[d,c]=(0,o.useState)(e.height),[h,u]=(0,o.useState)(),[p,m]=(0,o.useState)(JSON.stringify(e.config||"")),[g,f]=(0,o.useState)("");return(0,o.useEffect)(()=>{if(!s.current)return;let{className:t,style:r,height:o,sdkReady:l,config:d,...x}=e;if(n(t||""),a(r||{}),c(o),h&&g===JSON.stringify(x)){if(p===JSON.stringify(d))return;m(JSON.stringify(d)),"string"==typeof d?fetch(d).then(e=>e.json()).then(e=>{h?.setConfig(e)}):d&&h.setConfig(d)}else f(JSON.stringify(x)),h?.destroy(),(0,i.T)(s.current,{config:d,...x}).then(e=>{u(e),"function"==typeof l&&l(e)})},[e]),(0,o.useEffect)(()=>()=>{h?.destroy()},[]),(0,r.jsx)("div",{ref:s,className:t,style:l,"data-height":d})}var a=t("1858"),d=t("3262"),c=t("1705"),h=t("7645"),u=t("8168"),p=t("8228"),m=t("5050");function g(e){let[s,t]=(0,o.useState)(e.js),[n,i]=(0,o.useState)(e.ts),[l,a]=(0,o.useState)(e.react),[g,f]=(0,o.useState)(e.vue),[x,j]=(0,o.useState)(e.svelte),y="3.7rem",[v,S]=(0,o.useState)(!0),[b,w]=(0,o.useState)(y),C=(0,o.useRef)(null),k=()=>{setTimeout(()=>{w(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{w(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,o.useEffect)(()=>{if(d.Z.canUseDOM){let e=function(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js";try{return window.prettier?.format(e,{parser:"html"===s?"html":"babel",plugins:window.prettierPlugins})}catch{return e}};t(e(s,"js")),i(e(n,"ts")),a(e(l,"jsx")),f(e(g,"html")),j(e(x,"html"))}},[]),(0,r.jsxs)("details",{className:`alert alert--info ${m.Z.details} ${p.Z.details}`,"data-collapsed":v,style:{height:v?y:b,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,r.jsx)("summary",{onClick:()=>{S(!v),k()},children:"show code"}),(0,r.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,r.jsx)("div",{className:m.Z.collapsibleContent,children:(0,r.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,r.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"js",children:s})}),(0,r.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"ts",children:n})}),(0,r.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"jsx",children:l})}),(0,r.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"html",children:g})}),(0,r.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:k},children:(0,r.jsx)(c.Z,{language:"html",children:x})})]})})})]})}function f(e){let{className:s,style:t,showCode:o,height:i,...d}=e,{colorMode:c}=(0,n.I)(),h=e=>JSON.stringify(e,null,2),u=`
import { createPlayground } from 'livecodes';

const options = ${h(d)};
createPlayground('#container', options);

`.trimStart(),p=`
import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = ${h(d)};
createPlayground('#container', options);

`.trimStart(),m=`
import LiveCodes from 'livecodes/react';

export default function App() {
  const options = ${h(d)};
  return (<LiveCodes {...options}></LiveCodes>);
}

`.trimStart(),f=`
<script setup>
import LiveCodes from "livecodes/vue";

const options = ${h(d)};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

`,x=`
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state(${h(d)});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

`.trimStart();return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:c,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,r.jsx)(g,{js:u,ts:p,react:m,vue:f,svelte:x})]})}},8294:function(e,s,t){t.d(s,{T:function(){return n},r:function(){return o}});var r=t(7728);async function n(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};"object"!=typeof e||e instanceof HTMLElement||!e.headless&&"headless"!==e.view||(s=e,e=null);let{config:t={},headless:r,loading:n="lazy",view:i}=s,l=r||"headless"===i,a=null,d=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(l&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(l)k(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let c=new URL(o(s)),h=c.origin;c.searchParams.set("embed","true"),c.searchParams.set("loading",l?"eager":n);let u=globalThis.process;c.searchParams.set("sdkVersion",u?.env?.SDK_VERSION||"latest"),"object"==typeof t&&Object.keys(t).length>0&&c.searchParams.set("config","sdk");let p=s.params;"object"==typeof p&&Object.keys(p).length>0&&JSON.stringify(p).length<1800&&Object.keys(p).forEach(e=>{c.searchParams.set(e,encodeURIComponent(String(p[e])))});let m=!1,g="Cannot call API methods after calling `destroy()`.",f=await new Promise(e=>{if(!a)return;let s=a.dataset.height||a.style.height;if(s&&!l){let e=isNaN(Number(s))?s:s+"px";a.style.height=e}"false"===a.dataset.defaultStyles||l||(a.style.backgroundColor||="#fff",a.style.border||="1px solid black",a.style.borderRadius||="8px",a.style.boxSizing||="border-box",a.style.padding||="0",a.style.width||="100%",a.style.height||=a.style.height||"300px",a.style.minHeight="200px",a.style.flexGrow="1",a.style.overflow||="hidden",a.style.resize||="vertical");let r="livecodes",o=a.querySelector(`iframe.${r}`),i=o||document.createElement("iframe");i.classList.add(r),i.setAttribute("allow","accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"),i.setAttribute("allowtransparency","true"),i.setAttribute("allowpaymentrequest","true"),i.setAttribute("allowfullscreen","true"),i.setAttribute("sandbox","allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"),i.setAttribute("loading","eager"===n?"eager":"lazy"),l?k(i):(i.style.height="100%",i.style.minHeight="200px",i.style.width="100%",i.style.margin="0",i.style.border="0",i.style.borderRadius=a.style.borderRadius),addEventListener("message",function e(s){s.source===i.contentWindow&&s.origin===h&&s.data?.type==="livecodes-init"&&(removeEventListener("message",e),d=Number(s.data.payload.appVersion.replace(/^v/,"")))}),(!d||d<46)&&addEventListener("message",function e(s){s.source===i.contentWindow&&s.origin===h&&s.data?.type==="livecodes-get-config"&&(removeEventListener("message",e),i.contentWindow?.postMessage({type:"livecodes-config",payload:t},h))}),i.onload=()=>{e(i)},i.src=c.href,o||a.appendChild(i)}),x=new Promise(e=>{addEventListener("message",function s(t){t.source===f.contentWindow&&t.origin===h&&t.data?.type==="livecodes-ready"&&(removeEventListener("message",s),e(),x.settled=!0)})}),j=()=>m?Promise.reject(g):new Promise(async e=>{x.settled&&e(),f.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),y=(e,s)=>new Promise(async(t,r)=>{if(m)return r(g);await j();let n=E();addEventListener("message",function s(o){if(o.source===f.contentWindow&&o.origin===h&&o.data?.type==="livecodes-api-response"&&o.data?.id===n&&o.data.method===e){removeEventListener("message",s);let e=o.data.payload;e?.error?r(e.error):t(e)}}),f.contentWindow?.postMessage({method:e,id:n,args:s},h)}),v={},S=["load","ready","code","console","tests","destroy"],b=(e,s)=>{if(m)throw Error(g);return S.includes(e)?(y("watch",[e]),v[e]||(v[e]=[]),v[e]?.push(s),{remove:()=>{v[e]=v[e]?.filter(e=>e!==s),v[e]?.length===0&&y("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},w=e=>({"livecodes-app-loaded":"load","livecodes-ready":"ready","livecodes-change":"code","livecodes-console":"console","livecodes-test-results":"tests","livecodes-destroy":"destroy"})[e];addEventListener("message",async e=>{let s=w(e.data?.type??"");if(e.source!==f.contentWindow||e.origin!==h||!s||!v[s])return;let t=e.data?.payload;v[s]?.forEach(e=>{e(t)})});let C=()=>{Object.values(v).forEach(e=>{e.length=0}),f?.remove?.(),m=!0};function k(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===n&&"IntersectionObserver"in window&&new IntersectionObserver((e,s)=>{e.forEach(async e=>{e.isIntersecting&&(await j(),s.unobserve(a))})},{rootMargin:"150px"}).observe(a);let E=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>j(),run:()=>y("run"),format:e=>y("format",[e]),getShareUrl:e=>y("getShareUrl",[e]),getConfig:e=>y("getConfig",[e]),setConfig:e=>y("setConfig",[e]),getCode:()=>y("getCode"),show:(e,s)=>y("show",[e,s]),runTests:()=>y("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var s=arguments.length,t=Array(s>1?s-1:0),r=1;r<s;r++)t[r-1]=arguments[r];return y("exec",[e,...t])},destroy:()=>x.settled?y("destroy").then(C):m?Promise.reject(g):(C(),Promise.resolve())}}function o(){let e,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:t="https://livecodes.io",params:n={},config:o={},headless:i,import:l,lite:a,view:d,...c}=s;try{e=new URL(t)}catch{throw Error(`${t} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(c).forEach(s=>{let[t,r]=s;void 0!==r&&e.searchParams.set(t,String(r))});let u="headless"===s.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof o&&null==o.mode?o.mode="lite":e.searchParams.set("lite","true")),d&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof o&&null==o.view&&"headless"!==d?o.view=d:e.searchParams.set("view",d)),"string"==typeof o)try{new URL(o),e.searchParams.set("config",encodeURIComponent(o))}catch{throw Error('"config" is not a valid URL or configuration object.')}else o&&"object"==typeof o&&Object.keys(o).length>0&&(o.title&&"Untitled Project"!==o.title&&e.searchParams.set("title",o.title),o.description&&o.description.length>0&&e.searchParams.set("description",o.description),h.set("config","code/"+(0,r.compressToEncodedURIComponent)(JSON.stringify(o))));if(n&&"object"==typeof n&&Object.keys(n).length>0)try{h.set("params",(0,r.compressToEncodedURIComponent)(JSON.stringify(n)))}catch{Object.keys(n).forEach(s=>{e.searchParams.set(s,encodeURIComponent(String(n[s])))})}return l&&e.searchParams.set("x",encodeURIComponent(l)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,s,t){t.d(s,{Z:function(){return l},a:function(){return i}});var r=t(7294);let n={},o=r.createContext(n);function i(e){let s=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),r.createElement(o.Provider,{value:s},e.children)}}}]);