docusaurus-live-brython 3.0.0-beta.9 → 3.0.1

package/lib/theme/CodeEditor/Actions/styles.module.css

@@ -9,6 +9,5 @@
 }
 
 html[data-theme='dark'] .runCode {
-        color: white
-} 
-  
+    color: white;
+}

package/lib/theme/CodeEditor/BrythonCommunicator.d.ts

@@ -1,3 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 declare const BrythonCommunicator: () => React.JSX.Element;
 export default BrythonCommunicator;
+//# sourceMappingURL=BrythonCommunicator.d.ts.map

package/lib/theme/CodeEditor/BrythonCommunicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrythonCommunicator.d.ts","sourceRoot":"","sources":["../../../src/theme/CodeEditor/BrythonCommunicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,mBAAmB,yBAsCxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/theme/CodeEditor/BrythonCommunicator.jsx

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { BRYTHON_NOTIFICATION_EVENT, DOM_ELEMENT_IDS } from "docusaurus-live-brython/theme/CodeEditor/constants";
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
+import * as React from 'react';
+import { BRYTHON_NOTIFICATION_EVENT, DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 const BrythonCommunicator = () => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
+    const store = useStore();
+    const codeId = useScript(store, 'codeId');
     const ref = React.useRef(null);
     React.useEffect(() => {
         const { current } = ref;
@@ -14,15 +14,19 @@ const BrythonCommunicator = () => {
             if (event.detail) {
                 const data = event.detail;
                 switch (data.type) {
-                    case "start":
+                    case 'start':
                         store.clearLogMessages();
                         store.setExecuting(true);
                         break;
-                    case "done":
+                    case 'done':
                         store.setExecuting(false);
                         break;
                     default:
-                        store.addLogMessage(data);
+                        store.addLogMessage({
+                            type: data.type,
+                            output: data.output,
+                            timeStamp: data.timeStamp
+                        });
                         break;
                 }
             }
@@ -32,6 +36,6 @@ const BrythonCommunicator = () => {
             current.removeEventListener(BRYTHON_NOTIFICATION_EVENT, onBryNotify);
         };
     }, [ref, store]);
-    return (<div id={DOM_ELEMENT_IDS.communicator(codeId)} ref={ref}></div>);
+    return <div id={DOM_ELEMENT_IDS.communicator(codeId)} ref={ref}></div>;
 };
 export default BrythonCommunicator;

package/lib/theme/CodeEditor/Button/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Icons from 'docusaurus-live-brython/theme/CodeEditor/Icon/icons';
+import * as Icons from '@theme/CodeEditor/Icon/icons';
 export declare enum Color {
     Primary = "button--primary",
     Secondary = "button--secondary",
@@ -13,7 +13,7 @@ export declare enum Size {
     Small = "button--sm",
     Large = "button--lg"
 }
-interface Props {
+export interface Props {
     icon: keyof typeof Icons;
     title?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
@@ -25,3 +25,4 @@ interface Props {
 }
 declare const Button: (props: Props) => React.JSX.Element;
 export default Button;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/CodeEditor/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,8BAA8B,CAAC;AAKtD,oBAAY,KAAK;IACb,OAAO,oBAAoB;IAC3B,SAAS,sBAAsB;IAC/B,OAAO,oBAAoB;IAC3B,IAAI,iBAAiB;IACrB,OAAO,oBAAoB;IAC3B,MAAM,mBAAmB;IACzB,IAAI,iBAAiB;CACxB;AACD,oBAAY,IAAI;IACZ,KAAK,eAAe;IACpB,KAAK,eAAe;CACvB;AAED,MAAM,WAAW,KAAK;IAClB,IAAI,EAAE,MAAM,OAAO,KAAK,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,MAAM,GAAI,OAAO,KAAK,sBAqB3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/theme/CodeEditor/Button/index.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from './styles.module.css';
 import clsx from 'clsx';
-import Icon from 'docusaurus-live-brython/theme/CodeEditor/Icon';
+import Icon from '@theme/CodeEditor/Icon';
 export var Color;
 (function (Color) {
     Color["Primary"] = "button--primary";

package/lib/theme/CodeEditor/Button/styles.module.css

@@ -6,4 +6,4 @@
     cursor: pointer;
     margin: 0px 2px;
     padding: 4px 10px;
-}
+}

package/lib/theme/CodeEditor/CodeHistory/index.d.ts

@@ -2,3 +2,4 @@ import * as React from 'react';
 import 'rc-slider/assets/index.css';
 declare const CodeHistory: () => React.JSX.Element;
 export default CodeHistory;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/CodeEditor/CodeHistory/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/CodeHistory/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,4BAA4B,CAAC;AAoBpC,QAAA,MAAM,WAAW,yBA2GhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/theme/CodeEditor/CodeHistory/index.jsx

@@ -4,24 +4,24 @@ import styles from './styles.module.css';
 import { Prism } from 'prism-react-renderer';
 import Slider from 'rc-slider';
 import 'rc-slider/assets/index.css';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Translate, { translate } from '@docusaurus/Translate';
-import Button from 'docusaurus-live-brython/theme/CodeEditor/Button';
-import DiffViewer from 'react-diff-viewer';
+import Button from '@theme/CodeEditor/Button';
+import DiffViewer from 'react-diff-viewer-continued';
 import Details from '@theme/Details';
 const highlightSyntax = (str) => {
     if (!str) {
         return;
     }
     return (<span dangerouslySetInnerHTML={{
-            __html: Prism.highlight(str, Prism.languages.python, 'python'),
+            __html: Prism.highlight(str, Prism.languages.python, 'python')
         }}/>);
 };
 const CodeHistory = () => {
     const [version, setVersion] = React.useState(1);
-    const { store } = useScript();
-    const versions = useStore(store, (state) => state.versions);
-    const versionsLoaded = useStore(store, (state) => state.versionsLoaded);
+    const store = useStore();
+    const versions = useScript(store, 'versions');
+    const versionsLoaded = useScript(store, 'versionsLoaded');
     if (versions?.length < 2) {
         return null;
     }
@@ -30,11 +30,20 @@ const CodeHistory = () => {
                         <div className={clsx(styles.summary)}>
                             <span className="badge badge--secondary">
                                 {versionsLoaded
-                ? translate({ message: '{n} Versions', id: 'CodeHistory.nVersions.text' }, { n: versions.length })
-                : translate({ message: 'Load Versions', id: 'CodeHistory.LoadVersions.text' })}
+                ? translate({
+                    message: '{n} Versions',
+                    id: 'CodeHistory.nVersions.text'
+                }, { n: versions.length })
+                : translate({
+                    message: 'Load Versions',
+                    id: 'CodeHistory.LoadVersions.text'
+                })}
                             </span>
                             <span className={clsx(styles.spacer)}></span>
-                            <Button icon='Sync' title={translate({ message: 'Sync Versions', id: 'CodeHistory.LoadVersions.text' })} onClick={(e) => {
+                            <Button icon="Sync" title={translate({
+                message: 'Sync Versions',
+                id: 'CodeHistory.LoadVersions.text'
+            })} onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 store.loadVersions();
@@ -52,20 +61,22 @@ const CodeHistory = () => {
             }
             setVersion(c);
         }} min={1} max={versions.length - 1} dots={versions.length < 50}/>
-                        <span className="badge badge--primary">
-                            V{version}
-                        </span>
+                        <span className="badge badge--primary">V{version}</span>
                     </div>
                     <div className={clsx(styles.diffViewer)}>
                         {versions.length > 1 && (<DiffViewer splitView oldValue={versions[version - 1].code} newValue={versions[version].code} leftTitle={<div className={clsx(styles.diffHeader)}>
                                         {`V${version}`}
                                         {versions[version].pasted && (<span className={clsx('badge', 'badge--danger')}>
-                                                <Translate id="CodeHistory.PastedBadge.Text">Pasted</Translate>
+                                                <Translate id="CodeHistory.PastedBadge.Text">
+                                                    Pasted
+                                                </Translate>
                                             </span>)}
                                     </div>} rightTitle={<div className={clsx(styles.diffHeader)}>
                                         {`V${version}`}
                                         {versions[version].pasted && (<span className={clsx('badge', 'badge--danger')}>
-                                                <Translate id="CodeHistory.PastedBadge.Text">Pasted</Translate>
+                                                <Translate id="CodeHistory.PastedBadge.Text">
+                                                    Pasted
+                                                </Translate>
                                             </span>)}
                                     </div>} renderContent={highlightSyntax}/>)}
                     </div>

package/lib/theme/CodeEditor/CodeHistory/styles.module.css

@@ -1,54 +1,54 @@
-.codeHistory>.historyDetails {
-	cursor: pointer;
-	margin-bottom: 0;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
+.codeHistory > .historyDetails {
+    cursor: pointer;
+    margin-bottom: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
 }
 .summary {
-	display: flex;
-	align-items: center;
+    display: flex;
+    align-items: center;
 }
 .spacer {
-	flex-grow: 1;
-	flex-shrink: 1;
-	flex-basis: 0;
-} 
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+}
 
 .versionControl {
-	padding: 1em 2em;
-	box-shadow: var(--ifm-global-shadow-lw);
-	border-radius: var(--ifm-global-radius);
+    padding: 1em 2em;
+    box-shadow: var(--ifm-global-shadow-lw);
+    border-radius: var(--ifm-global-radius);
 }
 
 .faButton {
-	margin-left: 1em;
+    margin-left: 1em;
 }
 
 .faButton:hover {
-	transform: scale(1.2);
+    transform: scale(1.2);
 }
 
 .diffViewer {
-	--ifm-pre-background: rgba(255, 255, 255, 0);
-	--ifm-alert-background-color: rgba(255, 255, 255, 0);
-	--ifm-alert-background-color-highlight: rgba(255, 255, 255, 0);
-	--ifm-table-stripe-background: rgba(255, 255, 255, 0);
-	font-family: monospace;
-	overflow: auto;
+    --ifm-pre-background: rgba(255, 255, 255, 0);
+    --ifm-alert-background-color: rgba(255, 255, 255, 0);
+    --ifm-alert-background-color-highlight: rgba(255, 255, 255, 0);
+    --ifm-table-stripe-background: rgba(255, 255, 255, 0);
+    font-family: monospace;
+    overflow: auto;
 }
 
 .diffViewer table tbody tr td {
-	padding-top: 0;
-	padding-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
 }
 
 .diffViewer table tbody tr td pre {
-	white-space: nowrap;
-	padding-top: 0;
-	padding-bottom: 0;
-	line-height: 18px;
+    white-space: nowrap;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 18px;
 }
 .diffHeader {
-	display: flex;
-	justify-content: space-between;
-}
+    display: flex;
+    justify-content: space-between;
+}

package/lib/theme/CodeEditor/ContextEditor/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type MetaProps } from '@theme/CodeEditor';
+interface Props extends MetaProps {
+    className?: string;
+    title?: string;
+    children: string | React.ReactNode;
+    onChange?: (code: string) => void;
+}
+export declare const splitCode: (rawCode: string) => {
+    pre: string;
+    code: string;
+    post: string;
+};
+/**
+ * Use this component when you want a working CodeEditor.
+ * The CodeEditor must be wrapped in a ScriptContext - this component does that.
+ * wraps it in a ScriptContext and initializes the CodeEditor with the given
+ * params.
+ */
+declare const ContextEditor: (props: Props) => React.JSX.Element;
+export default ContextEditor;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/CodeEditor/ContextEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/ContextEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI/D,UAAU,KAAM,SAAQ,SAAS;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAGD,eAAO,MAAM,SAAS,GAAI,SAAS,MAAM;;;;CAOxC,CAAC;AAEF;;;;;GAKG;AACH,QAAA,MAAM,aAAa,GAAI,OAAO,KAAK,sBA0ClC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/theme/CodeEditor/ContextEditor/index.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import CodeEditor from '@theme/CodeEditor';
+import ScriptContext from '@theme/CodeEditor/WithScript/ScriptContext';
+import CodeBlock from '@theme/CodeBlock';
+const SPLIT_CODE_REGEX = /^(?:(?<pre>.*?)\n###\s*PRE\s*)?(?<code>.*?)(?:\n###\s*POST\s*(?<post>.*))?$/s;
+export const splitCode = (rawCode) => {
+    const { pre, code, post } = rawCode.replace(/\s*\n$/, '').match(SPLIT_CODE_REGEX).groups || {};
+    return {
+        pre: pre || '',
+        code: code || '',
+        post: post || ''
+    };
+};
+/**
+ * Use this component when you want a working CodeEditor.
+ * The CodeEditor must be wrapped in a ScriptContext - this component does that.
+ * wraps it in a ScriptContext and initializes the CodeEditor with the given
+ * params.
+ */
+const ContextEditor = (props) => {
+    const langMatch = (props.className || '').match(/language-(?<lang>\w*)/);
+    let lang = langMatch?.groups?.lang?.toLocaleLowerCase() ?? '';
+    if (lang === 'py') {
+        lang = 'python';
+    }
+    if (ExecutionEnvironment.canUseDOM) {
+        const title = props.title || lang;
+        const { pre, code, post } = splitCode(props.children || '');
+        return (<ScriptContext id={props.id} lang={lang} title={title} code={code} preCode={pre} postCode={post} readonly={!!props.readonly} versioned={!!props.versioned}>
+                <CodeEditor code={code} lang={lang} preCode={pre} postCode={post} maxLines={props.maxLines && Number.parseInt(props.maxLines, 10)} readonly={!!props.readonly} resettable={!props.noReset} download={!props.versioned && !props.noDownload} slim={!!props.slim} showLineNumbers={!(!!props.slim && !/\n/.test(code))} versioned={!!props.versioned} noHistory={!!props.noHistory} noCompare={!!props.noCompare} title={title} className={props.className} onChange={props.onChange}/>
+            </ScriptContext>);
+    }
+    return <CodeBlock {...props}/>;
+};
+export default ContextEditor;

package/lib/theme/CodeEditor/Editor/EditorAce.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="ace-builds/ace-modules" />
 import * as React from 'react';
 import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/mode-python';
@@ -11,6 +10,8 @@ export interface Props {
     versioned?: boolean;
     showLineNumbers: boolean;
     maxLines?: number;
+    onChange?: (code: string) => void;
 }
 declare const EditorAce: (props: Props) => React.JSX.Element;
 export default EditorAce;
+//# sourceMappingURL=EditorAce.d.ts.map

package/lib/theme/CodeEditor/Editor/EditorAce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorAce.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/Editor/EditorAce.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,yCAAyC,CAAC;AACjD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,yCAAyC,CAAC;AACjD,OAAO,8CAA8C,CAAC;AACtD,OAAO,6BAA6B,CAAC;AAKrC,MAAM,WAAW,KAAK;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAMD,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,sBA6F9B,CAAC;AACF,eAAe,SAAS,CAAC"}

package/lib/theme/CodeEditor/Editor/EditorAce.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from 'docusaurus-live-brython/theme/CodeEditor/constants';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/mode-python';
@@ -10,18 +10,18 @@ import 'ace-builds/src-noconflict/mode-svg';
 import 'ace-builds/src-noconflict/theme-dracula';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/webpack-resolver';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 const ALIAS_LANG_MAP_ACE = {
-    mpy: 'python',
+    mpy: 'python'
 };
 const EditorAce = (props) => {
     const eRef = React.useRef(null);
-    const { store } = useScript();
-    const code = useStore(store, (state) => state.code);
-    const pristineCode = useStore(store, (state) => state.pristineCode);
-    const lang = useStore(store, (state) => state.lang);
-    const codeId = useStore(store, (state) => state.codeId);
-    const showRaw = useStore(store, (state) => state.showRaw);
+    const store = useStore();
+    const code = useScript(store, 'code');
+    const pristineCode = useScript(store, 'pristineCode');
+    const lang = useScript(store, 'lang');
+    const codeId = useScript(store, 'codeId');
+    const showRaw = useScript(store, 'showRaw');
     React.useEffect(() => {
         if (eRef && eRef.current) {
             const node = eRef.current;
@@ -30,7 +30,7 @@ const EditorAce = (props) => {
                     // commands is array of key bindings.
                     name: 'execute',
                     bindKey: { win: 'Ctrl-Enter', mac: 'Command-Enter' },
-                    exec: () => store.execScript(),
+                    exec: () => store.execScript()
                 });
             }
             node.editor.commands.addCommand({
@@ -39,7 +39,7 @@ const EditorAce = (props) => {
                 bindKey: { win: 'Ctrl-s', mac: 'Command-s' },
                 exec: () => {
                     store.saveNow();
-                },
+                }
             });
             return () => {
                 if (node && node.editor) {
@@ -54,7 +54,7 @@ const EditorAce = (props) => {
                 }
             };
         }
-    }, [eRef, lang]);
+    }, [eRef, lang, store]);
     return (<div className={clsx(styles.editor)}>
             <AceEditor className={clsx(styles.brythonEditor, !props.showLineNumbers && styles.noGutter)} style={{
             width: '100%',
@@ -66,14 +66,17 @@ const EditorAce = (props) => {
                 /**
                  * Save immediately as pasted content
                  */
-                store.setState((s) => ({ ...s, isPasted: true }));
+                store.setIsPasted(true);
             }
         }} focus={false} navigateToFileEnd={false} maxLines={props.maxLines || 25} ref={eRef} mode={ALIAS_LANG_MAP_ACE[lang] ?? lang} theme="dracula" onChange={(value, e) => {
             store.setCode(value, e.action);
+            if (props.onChange) {
+                props.onChange(value);
+            }
         }} readOnly={showRaw} value={showRaw ? pristineCode : code} defaultValue={code || '\n'} name={DOM_ELEMENT_IDS.aceEditor(codeId)} editorProps={{ $blockScrolling: true }} setOptions={{
             displayIndentGuides: true,
             vScrollBarAlwaysVisible: false,
-            highlightGutterLine: false,
+            highlightGutterLine: false
         }} showPrintMargin={false} highlightActiveLine={false} enableBasicAutocompletion enableLiveAutocompletion={false} enableSnippets={false} showGutter={props.showLineNumbers}/>
         </div>);
 };

package/lib/theme/CodeEditor/Editor/Header/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface Props {
+export interface Props {
     slim: boolean;
     title: string;
     resettable: boolean;
@@ -8,3 +8,4 @@ interface Props {
 }
 declare const Header: (props: Props) => React.JSX.Element;
 export default Header;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/CodeEditor/Editor/Header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/CodeEditor/Editor/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,KAAK;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,MAAM,GAAI,OAAO,KAAK,sBAmB3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/theme/CodeEditor/Editor/Header/index.jsx

@@ -1,23 +1,23 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import ShowSyncStatus from 'docusaurus-live-brython/theme/CodeEditor/Actions/ShowSyncStatus';
-import Reset from 'docusaurus-live-brython/theme/CodeEditor/Actions/Reset';
-import DownloadCode from 'docusaurus-live-brython/theme/CodeEditor/Actions/DownloadCode';
-import ShowRaw from 'docusaurus-live-brython/theme/CodeEditor/Actions/ShowRaw';
-import RunCode from 'docusaurus-live-brython/theme/CodeEditor/Actions/RunCode';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import ShowSyncStatus from '@theme/CodeEditor/Actions/ShowSyncStatus';
+import Reset from '@theme/CodeEditor/Actions/Reset';
+import DownloadCode from '@theme/CodeEditor/Actions/DownloadCode';
+import ShowRaw from '@theme/CodeEditor/Actions/ShowRaw';
+import RunCode from '@theme/CodeEditor/Actions/RunCode';
 const Header = (props) => {
-    const { store } = useScript();
-    const hasEdits = useStore(store, (state) => state.hasEdits);
-    const lang = useStore(store, (state) => state.lang);
+    const store = useStore();
+    const hasEdits = useScript(store, 'hasEdits');
+    const lang = useScript(store, 'lang');
     return (<div className={clsx(styles.controls, props.slim && styles.slim)}>
             {!props.slim && (<React.Fragment>
                     <div className={styles.title}>{props.title}</div>
                     <ShowSyncStatus />
-                    {hasEdits && props.resettable && (<Reset />)}
-                    {props.download && (<DownloadCode title={props.title}/>)}
-                    {hasEdits && !props.noCompare && (<ShowRaw />)}
+                    {hasEdits && props.resettable && <Reset />}
+                    {props.download && <DownloadCode title={props.title}/>}
+                    {hasEdits && !props.noCompare && <ShowRaw />}
                 </React.Fragment>)}
             {lang === 'python' && <RunCode title={props.title} slim={props.slim}/>}
         </div>);

package/lib/theme/CodeEditor/Editor/Header/styles.module.css

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     letter-spacing: 0.08em;
-    
+
     z-index: calc(var(--ifm-z-index-fixed) - 2);
     padding: 0.2em;
     padding-left: 0.5em;
@@ -15,13 +15,13 @@
 }
 
 .controls > .title {
-	flex-shrink: 1;
-	flex-grow: 1;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+    flex-shrink: 1;
+    flex-grow: 1;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .controls.slim {
     padding: 0;
-}
+}

package/lib/theme/CodeEditor/Editor/HiddenCode/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface Props {
+    type: 'pre' | 'post';
+    code: string;
+}
+declare const HiddenCode: (props: Props) => React.JSX.Element;
+export default HiddenCode;
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/CodeEditor/Editor/HiddenCode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/CodeEditor/Editor/HiddenCode/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,KAAK;IACX,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,UAAU,GAAI,OAAO,KAAK,sBAkC/B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/theme/CodeEditor/Editor/HiddenCode/index.jsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styles from './styles.module.css';
+import CodeBlock from '@theme/CodeBlock';
+import clsx from 'clsx';
+import Icon from '@theme/CodeEditor/Icon';
+import { translate } from '@docusaurus/Translate';
+const HiddenCode = (props) => {
+    const [show, setShow] = React.useState(false);
+    const { code } = props;
+    if (code.length === 0) {
+        return null;
+    }
+    return (<div className={clsx(styles.container)}>
+            {show && (<div>
+                    <CodeBlock language="python" showLineNumbers={false} className={clsx(styles.hiddenCode, styles.pre, show && styles.open)}>
+                        {code}
+                    </CodeBlock>
+                </div>)}
+            <button className={clsx(styles.toggleButton, show && styles.open, styles[props.type])} onClick={() => setShow(!show)} title={translate({
+            id: 'theme.CodeEditor.Editor.HiddenCode.toggleButtonTitle',
+            message: 'Toggle hidden code'
+        })}>
+                <Icon icon={show ? 'TrayMinus' : 'TrayPlus'} rotate={(show ? 180 : 0) + (props.type === 'post' ? 180 : 0)}/>
+            </button>
+        </div>);
+};
+export default HiddenCode;

package/lib/theme/CodeEditor/Editor/HiddenCode/styles.module.css

@@ -0,0 +1,52 @@
+.container > .toggleButton {
+    position: absolute;
+    left: 50%;
+    top: 0px;
+    z-index: var(--ifm-z-index-dropdown);
+    opacity: var(--show-hidden-code-toggle-opacity);
+    transition: opacity 0.6s ease; /* Adjust timing as needed */
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: var(--ifm-color-info-darkest);
+    cursor: pointer;
+}
+.container > .toggleButton:hover {
+    color: var(--ifm-color-info);
+}
+
+.container > .toggleButton.post {
+    left: 50%;
+    top: unset;
+    bottom: 0px;
+}
+.toggleButton > svg {
+    transition: all 0.1s ease; /* Adjust timing as needed */
+}
+
+.container > .toggleButton.open {
+    color: var(--ifm-color-danger);
+}
+.container > .toggleButton.open:hover {
+    color: var(--ifm-color-danger-darkest);
+}
+
+.hiddenCode {
+    margin-bottom: 0;
+    --ifm-pre-padding: 0 3em;
+}
+.hiddenCode pre {
+    border-radius: 0;
+}
+.hiddenCode pre > code {
+    background-color: var(--ifm-color-secondary-dark);
+    border-radius: 0;
+}
+.hiddenCode > div[class^='codeBlockContent'] > div[class^='buttonGroup'] {
+    right: 0;
+    top: 0;
+}
+
+html[data-theme='dark'] .hiddenCode pre > code {
+    background-color: var(--ifm-card-background-color);
+}

package/lib/theme/CodeEditor/Editor/Result/Graphics/Canvas.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 declare const Canvas: () => React.JSX.Element;
 export default Canvas;
+//# sourceMappingURL=Canvas.d.ts.map

package/lib/theme/CodeEditor/Editor/Result/Graphics/Canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/CodeEditor/Editor/Result/Graphics/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8B/B,QAAA,MAAM,MAAM,yBA+BX,CAAC;AAEF,eAAe,MAAM,CAAC"}