"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["7516"],{7635:function(e,s,t){t.r(s),t.d(s,{default:()=>g,frontMatter:()=>c,metadata:()=>n,assets:()=>h,params:()=>u,toc:()=>m,contentTitle:()=>d});var n=JSON.parse('{"id":"languages/cssmodules","title":"CSS Modules","description":"A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.","source":"@site/docs/languages/cssmodules.mdx","sourceDirName":"languages","slug":"/languages/cssmodules","permalink":"/docs/languages/cssmodules","draft":false,"unlisted":false,"editUrl":"https://github.com/live-codes/livecodes/tree/develop/docs/docs/languages/cssmodules.mdx","tags":[],"version":"current","frontMatter":{},"sidebar":"docsSidebar","previous":{"title":"CSS","permalink":"/docs/languages/css"},"next":{"title":"cssnano","permalink":"/docs/languages/cssnano"}}'),o=t("5893"),l=t("65"),i=t("8168"),r=t("7645"),a=t("3365");let c={},d="CSS Modules",h={},u={activeEditor:"style",html:'
\n

Page Title

\n

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur similique facere facilis minima tempora.

\n
\n',css:":global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n",js:"import classes from './style.module.css';\n\ndocument.querySelector('h1').className = classes.title;\nconsole.log(classes);\n",processors:"cssmodules",compiled:"open"},m=[{value:"Usage",id:"usage",level:2},{value:"Language Info",id:"language-info",level:2},{value:"Name",id:"name",level:3},{value:"Type",id:"type",level:3},{value:"Editor",id:"editor",level:3},{value:"Compiler",id:"compiler",level:2},{value:"Version",id:"version",level:3},{value:"Custom Settings",id:"custom-settings",level:2},{value:"Limitations",id:"limitations",level:2},{value:"Example Usage",id:"example-usage",level:2},{value:"Links",id:"links",level:2}];function p(e){let s={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(s.header,{children:(0,o.jsx)(s.h1,{id:"css-modules",children:"CSS Modules"})}),"\n",(0,o.jsxs)(s.p,{children:["A ",(0,o.jsx)(s.a,{href:"https://github.com/css-modules/css-modules",children:"CSS Module"})," is a CSS file in which all class names and animation names are scoped locally by default."]}),"\n",(0,o.jsx)(s.p,{children:"The selector names are unique to avoid naming collision. They can then be imported as a JavaScript object."}),"\n",(0,o.jsx)(s.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(s.p,{children:"CSS Modules can be enabled from the style editor menu."}),"\n",(0,o.jsx)(s.p,{children:"Selectors added to the style editor (using any language e.g. CSS, SCSS, Less, etc.) are transformed to unique selectors. The transformed classes are then accessible in the script editor as a JSON object, and are injected into the HTML elements."}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Example:"})}),"\n","\n",(0,o.jsxs)(i.Z,{children:[(0,o.jsx)(r.Z,{value:"src-css",label:"Source CSS",default:!0,children:(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:":global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n"})})}),(0,o.jsx)(r.Z,{value:"compiled-css",label:"Compiled CSS",children:(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:".page {\n padding: 20px;\n}\n\n._text_1ygro_9 {\n color: black;\n font-family: sans-serif;\n}\n\n._small-text_1ygro_19 {\n font-size: 20px;\n}\n\n._large-text_1ygro_29 {\n font-size: 40px;\n}\n\n._large-text_1ygro_29:hover {\n color: red;\n}\n\n._title_1ygro_47 {\n color: green;\n}\n"})})}),(0,o.jsx)(r.Z,{value:"json",label:"JSON Object",children:(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-json",children:'{\n "text": "_text_1ygro_9",\n "small-text": "_small-text_1ygro_19 _text_1ygro_9",\n "large-text": "_large-text_1ygro_29 _text_1ygro_9",\n "title": "_title_1ygro_47 _large-text_1ygro_29 _text_1ygro_9",\n "smallText": "_small-text_1ygro_19 _text_1ygro_9",\n "largeText": "_large-text_1ygro_29 _text_1ygro_9"\n}\n'})})}),(0,o.jsx)(r.Z,{value:"src-html",label:"Source HTML",children:(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-html",children:'
\n

Page Title

\n

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non\n beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur\n similique facere facilis minima tempora.\n

\n
\n'})})}),(0,o.jsx)(r.Z,{value:"compiled-html",label:"Compiled HTML",children:(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-html",children:'
\n

Page Title

\n

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non\n beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur\n similique facere facilis minima tempora.\n

\n
\n'})})})]}),"\n",(0,o.jsxs)(s.p,{children:["In the script editor, the JSON object representing the transformed classes can be imported from the relative URLs ",(0,o.jsx)(s.code,{children:"'./style.module.css'"})," or ",(0,o.jsx)(s.code,{children:"'./styles.module.css'"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import",children:"Default"}),", ",(0,o.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#named_import",children:"named"})," and ",(0,o.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#namespace_import",children:"namespace"})," imports are supported. Class names are also available in camelCase (e.g ",(0,o.jsx)(s.code,{children:".large-text"})," becomes ",(0,o.jsx)(s.code,{children:"largeText"}),"). This can be changed by setting ",(0,o.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules#localsconvention",children:(0,o.jsx)(s.code,{children:"localsConvention"})})," in ",(0,o.jsx)(s.a,{href:"#custom-settings",children:"custom settings"}),"."]}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Example:"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-js",metastring:'title="In script editor (using JS in this case):"',children:"import classes from './style.module.css';\nimport { smallText } from './styles.module.css';\nimport * as allClasses from './styles.module.css';\n\nconsole.log(classes.title);\n\n// .small-text -> smallText\nconsole.log(smallText);\n\n// .large-text -> largeText\nconsole.log(allClasses.largeText);\n\n// bracket notation for class with dash\nconsole.log(allClasses['large-text']);\n"})}),"\n",(0,o.jsxs)(s.p,{children:["For full example, see ",(0,o.jsx)(s.a,{href:"#example-usage",children:"example usage"})," below."]}),"\n",(0,o.jsxs)(s.admonition,{type:"info",children:[(0,o.jsx)(s.p,{children:"CSS Modules has to be enabled (from style editor menu), to be able to import classes in the script editor."}),(0,o.jsxs)(s.p,{children:["Importing a URL that does not include ",(0,o.jsx)(s.code,{children:".module"})," (e.g. ",(0,o.jsx)(s.code,{children:"./style.css"}),") gets the processed CSS ",(0,o.jsx)(s.strong,{children:"string"})," as the module's default export."]}),(0,o.jsxs)(s.p,{children:["The extension of the style editor language can also be used, in addition to ",(0,o.jsx)(s.code,{children:".css"}),". For example, when using SCSS, importing from any of the following URLs is the same:"]}),(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.code,{children:"./style.module.css"})}),"\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.code,{children:"./styles.module.css"})}),"\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.code,{children:"./style.module.scss"})}),"\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.code,{children:"./styles.module.scss"})}),"\n"]})]}),"\n",(0,o.jsx)(s.h2,{id:"language-info",children:"Language Info"}),"\n",(0,o.jsx)(s.h3,{id:"name",children:"Name"}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.code,{children:"cssmodules"})}),"\n",(0,o.jsx)(s.h3,{id:"type",children:"Type"}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.a,{href:"/docs/features/css#css-processors",children:"Processor"})}),"\n",(0,o.jsx)(s.h3,{id:"editor",children:"Editor"}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.code,{children:"style"})}),"\n",(0,o.jsx)(s.h2,{id:"compiler",children:"Compiler"}),"\n",(0,o.jsxs)(s.p,{children:["The CSS Modules processor is provided using ",(0,o.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules",children:"postcss-modules"})," as a ",(0,o.jsx)(s.a,{href:"/docs/languages/postcss",children:"PostCSS"})," plugin."]}),"\n",(0,o.jsx)(s.h3,{id:"version",children:"Version"}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.code,{children:"postcss-modules"}),": v6.0.1"]}),"\n",(0,o.jsx)(s.h2,{id:"custom-settings",children:"Custom Settings"}),"\n",(0,o.jsxs)(s.p,{children:[(0,o.jsx)(s.a,{href:"/docs/advanced/custom-settings",children:"Custom settings"})," added to the property ",(0,o.jsx)(s.code,{children:"cssmodules"})," are passed as a JSON object to the ",(0,o.jsx)(s.code,{children:"postcss-modules"})," plugin during compile. Please check the ",(0,o.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules#usage",children:"documentation"})," for full reference."]}),"\n",(0,o.jsx)(s.p,{children:"In addition, the following settings are available:"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsxs)(s.li,{children:["\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.code,{children:"addClassesToHTML"})}),"\n",(0,o.jsxs)(s.p,{children:["Type: ",(0,o.jsx)(s.code,{children:"boolean"}),". Default: ",(0,o.jsx)(s.code,{children:"true"}),"."]}),"\n",(0,o.jsx)(s.p,{children:"The generated classes are injected into the HTML elements, so the styles are applied without having to assign them using JavaScript."}),"\n"]}),"\n",(0,o.jsxs)(s.li,{children:["\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.code,{children:"removeOriginalClasses"})}),"\n",(0,o.jsxs)(s.p,{children:["Type: ",(0,o.jsx)(s.code,{children:"boolean"}),". Default: ",(0,o.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,o.jsxs)(s.p,{children:["When enabled, the original classes are removed from HTML, keeping only the generated classes. Only applies if ",(0,o.jsx)(s.code,{children:"addClassesToHTML"})," is enabled."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(s.p,{children:"Please note that custom settings should be valid JSON (i.e. functions are not allowed)."}),"\n",(0,o.jsx)(s.p,{children:(0,o.jsx)(s.strong,{children:"Example:"})}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-json",children:'{\n "cssmodules": {\n "exportGlobals": true,\n "localsConvention": "camelCaseOnly",\n "addClassesToHTML": false\n }\n}\n'})}),"\n",(0,o.jsx)(s.h2,{id:"limitations",children:"Limitations"}),"\n",(0,o.jsxs)(s.p,{children:["Currently, loading external sources in ",(0,o.jsx)(s.a,{href:"https://github.com/css-modules/css-modules#composing-from-other-files",children:(0,o.jsx)(s.code,{children:"composes"})})," is not supported."]}),"\n",(0,o.jsx)(s.pre,{children:(0,o.jsx)(s.code,{className:"language-css",children:"/* you cannot do this */\n.title {\n composes: title from 'https://example.com/styles.css';\n}\n"})}),"\n",(0,o.jsxs)(s.p,{children:["If you get this working, ",(0,o.jsx)(s.a,{href:"https://github.com/live-codes/livecodes/pulls",children:"please create a pull request"}),"."]}),"\n",(0,o.jsx)(s.h2,{id:"example-usage",children:"Example Usage"}),"\n","\n","\n",(0,o.jsx)(a.Z,{params:u,height:"400"}),"\n",(0,o.jsx)(s.h2,{id:"links",children:"Links"}),"\n",(0,o.jsxs)(s.ul,{children:["\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.a,{href:"https://github.com/css-modules/css-modules",children:"CSS Modules"})}),"\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.a,{href:"https://github.com/madyankin/postcss-modules",children:"postcss-modules"})}),"\n",(0,o.jsx)(s.li,{children:(0,o.jsx)(s.a,{href:"https://postcss.org/",children:"PostCSS"})}),"\n"]})]})}function g(e={}){let{wrapper:s}={...(0,l.a)(),...e.components};return s?(0,o.jsx)(s,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}},3365:function(e,s,t){t.d(s,{Z:()=>x});var n=t("5893"),o=t("4200"),l=t("7294"),i=t("8294");function r(e){let s=(0,l.useRef)(null),[t,o]=(0,l.useState)(e.className||""),[r,a]=(0,l.useState)(e.style||{}),[c,d]=(0,l.useState)(e.height),[h,u]=(0,l.useState)(),[m,p]=(0,l.useState)(JSON.stringify(e.config||"")),[g,x]=(0,l.useState)("");return(0,l.useEffect)(()=>{if(!s.current)return;let{className:t,style:n,height:l,sdkReady:r,config:c,...f}=e;if(o(t||""),a(n||{}),d(l),h&&g===JSON.stringify(f)){if(m===JSON.stringify(c))return;p(JSON.stringify(c)),"string"==typeof c?fetch(c).then(e=>e.json()).then(e=>{h?.setConfig(e)}):c&&h.setConfig(c)}else x(JSON.stringify(f)),h?.destroy(),(0,i.T)(s.current,{config:c,...f}).then(e=>{u(e),"function"==typeof r&&r(e)})},[e]),(0,l.useEffect)(()=>()=>{h?.destroy()},[]),(0,n.jsx)("div",{ref:s,className:t,style:r,"data-height":c})}var a=t("1858"),c=t("3262"),d=t("1705"),h=t("7645"),u=t("8168"),m=t("8228"),p=t("5050");function g(e){let[s,t]=(0,l.useState)(e.js),[o,i]=(0,l.useState)(e.ts),[r,a]=(0,l.useState)(e.react),[g,x]=(0,l.useState)(e.vue),[f,j]=(0,l.useState)(e.svelte),y="3.7rem",[v,b]=(0,l.useState)(!0),[S,w]=(0,l.useState)(y),C=(0,l.useRef)(null),_=()=>{setTimeout(()=>{w(`calc(${C.current.offsetHeight}px + ${y})`)},5),setTimeout(()=>{w(`calc(${C.current.offsetHeight}px + ${y})`)},255)};return(0,l.useEffect)(()=>{if(c.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(o,"ts")),a(e(r,"jsx")),x(e(g,"html")),j(e(f,"html"))}},[]),(0,n.jsxs)("details",{className:`alert alert--info ${p.Z.details} ${m.Z.details}`,"data-collapsed":v,style:{height:v?y:S,overflow:"hidden",willChange:"height",transition:`height ${v?"250ms":"265ms"} ease-in-out 0s`,margin:"1em 0"},children:[(0,n.jsx)("summary",{onClick:()=>{b(!v),_()},children:"show code"}),(0,n.jsx)("div",{ref:C,style:{display:"block",overflow:"hidden"},children:(0,n.jsx)("div",{className:p.Z.collapsibleContent,children:(0,n.jsxs)(u.Z,{groupId:"sdk-code",children:[(0,n.jsx)(h.Z,{value:"js",label:"JS",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"js",children:s})}),(0,n.jsx)(h.Z,{value:"ts",label:"TS",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"ts",children:o})}),(0,n.jsx)(h.Z,{value:"react",label:"React",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"jsx",children:r})}),(0,n.jsx)(h.Z,{value:"vue",label:"Vue",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"html",children:g})}),(0,n.jsx)(h.Z,{value:"svelte",label:"Svelte",attributes:{onMouseDown:_},children:(0,n.jsx)(d.Z,{language:"html",children:f})})]})})})]})}function x(e){let{className:s,style:t,showCode:l,height:i,...c}=e,{colorMode:d}=(0,o.I)(),h=e=>JSON.stringify(e,null,2),u=` import { createPlayground } from 'livecodes'; const options = ${h(c)}; createPlayground('#container', options); `.trimStart(),m=` import { createPlayground, type EmbedOptions } from 'livecodes'; const options: EmbedOptions = ${h(c)}; createPlayground('#container', options); `.trimStart(),p=` import LiveCodes from 'livecodes/react'; export default function App() { const options = ${h(c)}; return (); } `.trimStart(),x=` `,f=`
`.trimStart();return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r,{className:`container_Egsj ${e.className}`,style:{height:i||"50vh",...e.style},appUrl:a.G,...e,config:{theme:d,themeColor:"hsl(215, 8%, 60%)",..."object"==typeof e.config?e.config:{}}}),!1!==e.showCode&&(0,n.jsx)(g,{js:u,ts:m,react:p,vue:x,svelte:f})]})}},8294:function(e,s,t){t.d(s,{T:function(){return o},r:function(){return l}});var n=t(7728);async function o(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:n,loading:o="lazy",view:i}=s,r=n||"headless"===i,a=null,c=null;if("string"==typeof e)a=document.querySelector(e);else if(e instanceof HTMLElement)a=e;else if(!(r&&"object"==typeof e))throw Error("A valid container element is required.");if(!a){if(r)C(a=document.createElement("div")),document.body.appendChild(a);else throw Error(`Cannot find element: "${e}"`)}let d=new URL(l(s)),h=d.origin;d.searchParams.set("embed","true"),d.searchParams.set("loading",r?"eager":o),d.searchParams.set("sdkVersion",process.env.SDK_VERSION||"latest"),"object"==typeof t&&Object.keys(t).length>0&&d.searchParams.set("config","sdk");let u=s.params;"object"==typeof u&&Object.keys(u).length>0&&JSON.stringify(u).length<1800&&Object.keys(u).forEach(e=>{d.searchParams.set(e,encodeURIComponent(String(u[e])))});let m=!1,p="Cannot call API methods after calling `destroy()`.",g=await new Promise(e=>{if(!a)return;let s=a.dataset.height||a.style.height;if(s&&!r){let e=isNaN(Number(s))?s:s+"px";a.style.height=e}"false"===a.dataset.defaultStyles||r||(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 n="livecodes",l=a.querySelector(`iframe.${n}`),i=l||document.createElement("iframe");i.classList.add(n),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"===o?"eager":"lazy"),r?C(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),c=Number(s.data.payload.appVersion.replace(/^v/,"")))}),(!c||c<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=d.href,l||a.appendChild(i)}),x=new Promise(e=>{addEventListener("message",function s(t){t.source===g.contentWindow&&t.origin===h&&t.data?.type==="livecodes-ready"&&(removeEventListener("message",s),e(),x.settled=!0)})}),f=()=>m?Promise.reject(p):new Promise(async e=>{x.settled&&e(),g.contentWindow?.postMessage({type:"livecodes-load"},h),await x,e()}),j=(e,s)=>new Promise(async(t,n)=>{if(m)return n(p);await f();let o=_();addEventListener("message",function s(l){if(l.source===g.contentWindow&&l.origin===h&&l.data?.type==="livecodes-api-response"&&l.data?.id===o&&l.data.method===e){removeEventListener("message",s);let e=l.data.payload;e?.error?n(e.error):t(e)}}),g.contentWindow?.postMessage({method:e,id:o,args:s},h)}),y={},v=["load","ready","code","console","tests","destroy"],b=(e,s)=>{if(m)throw Error(p);return v.includes(e)?(j("watch",[e]),y[e]||(y[e]=[]),y[e]?.push(s),{remove:()=>{y[e]=y[e]?.filter(e=>e!==s),y[e]?.length===0&&j("watch",[e,"unsubscribe"])}}):{remove:()=>void 0}},S=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=S(e.data?.type??"");if(e.source!==g.contentWindow||e.origin!==h||!s||!y[s])return;let t=e.data?.payload;y[s]?.forEach(e=>{e(t)})});let w=()=>{Object.values(y).forEach(e=>{e.length=0}),g?.remove?.(),m=!0};function C(e){e.style.position="absolute",e.style.top="0",e.style.visibility="hidden",e.style.opacity="0"}"lazy"===o&&"IntersectionObserver"in window&&new IntersectionObserver((e,s)=>{e.forEach(async e=>{e.isIntersecting&&(await f(),s.unobserve(a))})},{rootMargin:"150px"}).observe(a);let _=()=>(String(Math.random())+Date.now().toFixed()).replace("0.","");return{load:()=>f(),run:()=>j("run"),format:e=>j("format",[e]),getShareUrl:e=>j("getShareUrl",[e]),getConfig:e=>j("getConfig",[e]),setConfig:e=>j("setConfig",[e]),getCode:()=>j("getCode"),show:(e,s)=>j("show",[e,s]),runTests:()=>j("runTests"),onChange:e=>b("code",e),watch:b,exec:function(e){for(var s=arguments.length,t=Array(s>1?s-1:0),n=1;nx.settled?j("destroy").then(w):m?Promise.reject(p):(w(),Promise.resolve())}}function l(){let e,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{appUrl:t="https://livecodes.io",params:o={},config:l={},headless:i,import:r,lite:a,view:c,...d}=s;try{e=new URL(t)}catch{throw Error(`${t} is not a valid URL.`)}let h=new URLSearchParams;Object.entries(d).forEach(s=>{let[t,n]=s;void 0!==n&&e.searchParams.set(t,String(n))});let u="headless"===s.view||i;if(a&&(console.warn('Deprecation notice: "lite" option is deprecated. Use "config: { mode: \'lite\' }" instead.'),"object"==typeof l&&null==l.mode?l.mode="lite":e.searchParams.set("lite","true")),c&&(console.warn('Deprecation notice: The "view" option has been moved to "config.view". For headless mode use "headless: true".'),"object"==typeof l&&null==l.view&&"headless"!==c?l.view=c:e.searchParams.set("view",c)),"string"==typeof l)try{new URL(l),e.searchParams.set("config",encodeURIComponent(l))}catch{throw Error('"config" is not a valid URL or configuration object.')}else l&&"object"==typeof l&&Object.keys(l).length>0&&(l.title&&"Untitled Project"!==l.title&&e.searchParams.set("title",l.title),l.description&&l.description.length>0&&e.searchParams.set("description",l.description),h.set("config","code/"+(0,n.compressToEncodedURIComponent)(JSON.stringify(l))));if(o&&"object"==typeof o&&Object.keys(o).length>0)try{h.set("params",(0,n.compressToEncodedURIComponent)(JSON.stringify(o)))}catch{Object.keys(o).forEach(s=>{e.searchParams.set(s,encodeURIComponent(String(o[s])))})}return r&&e.searchParams.set("x",encodeURIComponent(r)),u&&e.searchParams.set("headless","true"),e.hash=h.toString(),e.href}},65:function(e,s,t){t.d(s,{Z:function(){return r},a:function(){return i}});var n=t(7294);let o={},l=n.createContext(o);function i(e){let s=n.useContext(l);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),n.createElement(l.Provider,{value:s},e.children)}}}]);