timvir 0.2.35 → 0.2.37

package/core/index.js

@@ -3,13 +3,11 @@ import { pipe, filter, subscribe } from 'wonka';
 import { useContext, Provider } from 'timvir/context';
 export { useContext } from 'timvir/context';
 import * as React from 'react';
-import { useImmer } from 'use-immer';
 import { MDXProvider } from '@mdx-js/react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { makeBus } from 'timvir/bus';
 import * as mdxComponentsBase from 'timvir/builtins';
 import * as Icons from 'react-feather';
-import { castDraft } from 'immer';
 import * as ReactDOM from 'react-dom';
 import { defaultSearch } from 'timvir/search';
 
@@ -145,7 +143,7 @@ function Dialog(props) {
     onDispose,
     ...rest
   } = props;
-  const [state, mutate] = useImmer({
+  const [state, setState] = React.useState({
     style: {
       opacity: 0,
       transform: "scale(0.98)"
@@ -154,33 +152,38 @@ function Dialog(props) {
     commands: []
   });
   React.useEffect(() => {
-    mutate(draft => {
-      if (open) {
-        draft.style = {
+    if (open) {
+      setState(state => ({
+        ...state,
+        style: {
           opacity: 1,
           transform: "none"
-        };
-      } else {
-        draft.style = {
+        }
+      }));
+    } else {
+      setState(state => ({
+        ...state,
+        style: {
           opacity: 0,
           transform: "scale(0.95)"
-        };
-        setTimeout(() => {
-          onDispose?.();
-        }, 200);
-      }
-    });
-  }, [mutate, open]);
+        }
+      }));
+      setTimeout(() => {
+        onDispose?.();
+      }, 200);
+    }
+  }, [open]);
   React.useEffect(() => {
     (async () => {
       const {
         edges
       } = await defaultSearch(toc).q(state.query);
-      mutate(draft => {
-        draft.commands = edges;
-      });
+      setState(state => ({
+        ...state,
+        commands: edges
+      }));
     })();
-  }, [mutate, state.query]);
+  }, [state.query]);
   return /*#__PURE__*/React.createElement("div", {
     className: classes$5.root,
     style: state.style,
@@ -195,9 +198,10 @@ function Dialog(props) {
     value: state.query,
     onChange: ev => {
       const query = ev.currentTarget.value;
-      mutate(draft => {
-        draft.query = query;
-      });
+      setState(state => ({
+        ...state,
+        query
+      }));
     }
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: classes$5.subheader
@@ -223,7 +227,7 @@ const classes$5 = {
 };
 
 function Commands(props) {
-  const [state, mutate] = useImmer({
+  const [state, setState] = React.useState({
     /**
      * Whether the command palette should be open or not. The command palette is
      * opened by cmd+k, and closed by escape or clicking outside of the dialog.
@@ -237,60 +241,75 @@ function Commands(props) {
     dialog: null
   });
   function open() {
-    mutate(draft => {
-      draft.open = true;
-      if (!draft.dialog) {
-        const containerElement = document.createElement("div");
-        document.body.appendChild(containerElement);
-        const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
-          className: classes$4.root,
-          onClick: ev => {
-            if (ev.target === ev.currentTarget) {
-              close();
-            }
-          }
-        }, /*#__PURE__*/React.createElement(Dialog, {
-          open: true,
-          onClose: close
-        })), containerElement);
-        draft.dialog = castDraft({
-          containerElement,
-          reactPortal
-        });
-      } else {
-        const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
-          className: classes$4.root,
-          onClick: ev => {
-            if (ev.target === ev.currentTarget) {
-              close();
+    setState({
+      open: true,
+      dialog: (() => {
+        if (!state.dialog) {
+          const containerElement = document.createElement("div");
+          document.body.appendChild(containerElement);
+          const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+            className: classes$4.root,
+            onClick: ev => {
+              if (ev.target === ev.currentTarget) {
+                close();
+              }
             }
-          }
-        }, /*#__PURE__*/React.createElement(Dialog, {
-          open: true,
-          onClose: close
-        })), draft.dialog.containerElement);
-        draft.dialog.reactPortal = reactPortal;
-      }
+          }, /*#__PURE__*/React.createElement(Dialog, {
+            open: true,
+            onClose: close
+          })), containerElement);
+          return {
+            containerElement,
+            reactPortal
+          };
+        } else {
+          return {
+            containerElement: state.dialog.containerElement,
+            reactPortal: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+              className: classes$4.root,
+              onClick: ev => {
+                if (ev.target === ev.currentTarget) {
+                  close();
+                }
+              }
+            }, /*#__PURE__*/React.createElement(Dialog, {
+              open: true,
+              onClose: close
+            })), state.dialog.containerElement)
+          };
+        }
+      })()
     });
   }
   function close() {
-    mutate(draft => {
-      draft.open = false;
-      if (draft.dialog) {
-        const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
-          className: classes$4.root
-        }, /*#__PURE__*/React.createElement(Dialog, {
-          onDispose: () => {
-            mutate(draft => {
-              if (!draft.open && draft.dialog) {
-                document.body.removeChild(draft.dialog.containerElement);
-                draft.dialog = null;
+    setState({
+      open: false,
+      dialog: (() => {
+        if (state.dialog) {
+          return {
+            containerElement: state.dialog.containerElement,
+            reactPortal: /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+              className: classes$4.root
+            }, /*#__PURE__*/React.createElement(Dialog, {
+              onDispose: () => {
+                setState({
+                  open: state.open,
+                  dialog: (() => {
+                    if (!state.open && state.dialog) {
+                      document.body.removeChild(state.dialog.containerElement);
+                      return null;
+                    } else {
+                      return state.dialog;
+                    }
+                  })()
+                });
               }
-            });
-          }
-        })), draft.dialog.containerElement);
-        draft.dialog.reactPortal = reactPortal;
-      }
+            })), state.dialog.containerElement)
+          };
+        } else {
+          return state.dialog;
+        }
+      })()
     });
   }
   useHotkeys("meta+k", ev => {
@@ -578,7 +597,7 @@ function Page(props, ref) {
     children,
     ...rest
   } = props;
-  const [state, mutate] = useImmer({
+  const [state, setState] = React.useState({
     search: {
       open: false
     }
@@ -593,15 +612,19 @@ function Page(props, ref) {
   }), [bus, location, Link, blocks, toc]);
   useHotkeys("meta+p", ev => {
     ev.preventDefault();
-    mutate(draft => {
-      draft.search.open = !draft.search.open;
+    setState({
+      search: {
+        open: !state.search.open
+      }
     });
   }, {
     enableOnFormTags: true
   });
   useHotkeys("escape", () => {
-    mutate(draft => {
-      draft.search.open = false;
+    setState({
+      search: {
+        open: false
+      }
     });
   }, {
     enableOnFormTags: true
@@ -617,8 +640,10 @@ function Page(props, ref) {
     toc: toc,
     search: search && {
       open: () => {
-        mutate(draft => {
-          draft.search.open = true;
+        setState({
+          search: {
+            open: true
+          }
         });
       },
       ...search
@@ -675,8 +700,10 @@ function Page(props, ref) {
   })(), Footer && /*#__PURE__*/React.createElement(Footer, null))), search && /*#__PURE__*/React.createElement(search.Component, {
     ...state.search,
     onClose: () => {
-      mutate(draft => {
-        draft.search.open = false;
+      setState({
+        search: {
+          open: false
+        }
       });
     }
   })), /*#__PURE__*/React.createElement(Commands, null));
@@ -697,29 +724,29 @@ function useBlock(props) {
     bus
   } = useContext();
   const mailbox = useMailbox(props.id);
-  const [state, mutate] = useImmer({
+  const [state, setState] = React.useState({
     overrides: undefined
   });
   React.useEffect(() => pipe(mailbox, subscribe(msg => {
     if (msg.interface === "dev.timvir.Props") {
       if (msg.member === "set") {
-        mutate(draft => {
-          draft.overrides = msg.body;
+        setState({
+          overrides: msg.body
         });
       } else if (msg.member === "merge") {
-        mutate(draft => {
-          draft.overrides = {
-            ...draft.overrides,
+        setState({
+          overrides: {
+            ...state.overrides,
             ...msg.body
-          };
+          }
         });
       } else if (msg.member === "reset") {
-        mutate(draft => {
-          draft.overrides = undefined;
+        setState({
+          overrides: undefined
         });
       }
     }
-  })).unsubscribe, [mailbox, mutate]);
+  })).unsubscribe, [mailbox]);
   return {
     bus,
     mailbox,
@@ -729,8 +756,8 @@ function useBlock(props) {
     },
     hasOverrides: !!state.overrides,
     reset: () => {
-      mutate(draft => {
-        draft.overrides = undefined;
+      setState({
+        overrides: undefined
       });
     }
   };

package/core/layout.d.ts

@@ -1,4 +1,4 @@
-export declare const noLayout: import("@linaria/core").LinariaClassName;
-export declare const grid: import("@linaria/core").LinariaClassName;
-export declare const extendedWidth: import("@linaria/core").LinariaClassName;
-export declare const fullWidth: import("@linaria/core").LinariaClassName;
+export declare const noLayout: string;
+export declare const grid: string;
+export declare const extendedWidth: string;
+export declare const fullWidth: string;

package/core/styles.css

@@ -1,62 +1,90 @@
 
-.g1et32pl{display:grid;--timvir-page-margin:16px;--timvir-margin:var(--timvir-page-margin);grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.g1et32pl{--timvir-page-margin:24px;grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var( --timvir-page-margin ) [re];}}@media (min-width:72rem){.g1et32pl{grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.g1et32pl > *:not(.nc2e9vn){grid-column:lc / rc;min-width:0;}.g1et32pl > *{margin:0 0 2rem;}.g1et32pl > p + ul{margin-top:-1.25rem;}
-.en6sn9p{grid-column:lex / rex;}
-.f3c539b{grid-column:le / re;}
+.g1et32pl{display:-ms-grid;display:grid;--timvir-page-margin:16px;--timvir-margin:var(--timvir-page-margin);-ms-grid-auto-rows:min-content;grid-auto-rows:min-content;-ms-grid-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width: 48rem){.g1et32pl{--timvir-page-margin:24px;-ms-grid-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0, 48rem) [rc] 1fr [rex] var(
+        --timvir-page-margin
+      ) [re];grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0, 48rem) [rc] 1fr [rex] var(
+        --timvir-page-margin
+      ) [re];}}@media (min-width: 72rem){.g1et32pl{-ms-grid-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem [rc] minmax(0, 12rem) [rex] var(
+        --timvir-page-margin
+      ) 1fr [re];grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem [rc] minmax(0, 12rem) [rex] var(
+        --timvir-page-margin
+      ) 1fr [re];}}.g1et32pl>*:not(.nc2e9vn){grid-column:lc/rc;min-width:0;}.g1et32pl>*{margin:0 0 2rem;}.g1et32pl>p+ul{margin-top:-1.25rem;}
+.en6sn9p{grid-column:lex/rex;}
+.f3c539b{grid-column:le/re;}
 
-.rwhrdvg{padding:50px 0 30px;display:grid;gap:50px;border-top:1px solid var(--timvir-border-color);}
-.l1u1x7q7{display:grid;grid-template-columns:repeat(auto-fill,minmax(234px,1fr));grid-gap:32px;}
+.rwhrdvg{padding:50px 0 30px;display:-ms-grid;display:grid;gap:50px;border-top:1px solid var(--timvir-border-color);}
+.l1u1x7q7{display:-ms-grid;display:grid;-ms-grid-columns:repeat(auto-fill, minmax(234px, 1fr));grid-template-columns:repeat(auto-fill, minmax(234px, 1fr));-ms-grid-gap:32px;grid-gap:32px;}
 .l1x5jo3a{font-weight:600;margin-bottom:12px;}
-.l29wcr8{display:block;color:inherit;text-decoration:none;}.l29wcr8:hover{color:var(--c-p-4);}
-.m1ojti9g{color:var(--timvir-secondary-text-color);}.m1ojti9g a{color:inherit;text-decoration:none;background-image:linear-gradient(transparent,transparent 5px,#383838 5px,#383838);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x;}.m1ojti9g a:hover{background-image:linear-gradient(transparent,transparent 3px,#2bbc8a 3px,#2bbc8a);}
+.l29wcr8{display:block;color:inherit;-webkit-text-decoration:none;text-decoration:none;}.l29wcr8:hover{color:var(--c-p-4);}
+.m1ojti9g{color:var(--timvir-secondary-text-color);}.m1ojti9g a{color:inherit;-webkit-text-decoration:none;text-decoration:none;background-image:linear-gradient(transparent, transparent 5px, #383838 5px, #383838);-webkit-background-position:bottom;background-position:bottom;-webkit-background-size:100% 6px;background-size:100% 6px;background-repeat:repeat-x;}.m1ojti9g a:hover{background-image:linear-gradient(transparent, transparent 3px, #2bbc8a 3px, #2bbc8a);}
 
-.t1amubg3{font-family:system-ui,sans-serif;font-feature-settings:"liga","kern";text-rendering:optimizelegibility;font-size:0.9375rem;line-height:1.7333;background-color:var(--timvir-background-color);color:var(--timvir-text-color);--c-p-0:#f0fcf6;--c-p-1:#d1f6e4;--c-p-2:#a0dbc1;--c-p-3:#61c19f;--c-p-4:#38a585;--c-p-5:#1b896b;}:root{box-sizing:border-box;scroll-padding-top:20px;}*,*:before,*:after{box-sizing:inherit;}:root{--timvir-background-color:#ffffff;--timvir-text-color:#000000c9;--timvir-secondary-text-color:#00000066;--timvir-secondary-background-color:#f9f8f9;--timvir-border-color:#e9e8ea;--timvir-sidebar-highlight-color:rgb(237,237,237);--timvir-accent-color:#38a585;}:root[data-timvir-theme="dark"]{--timvir-background-color:#1f2023;--timvir-text-color:rgba(255 255 255 / 0.86);--timvir-secondary-text-color:rgba(255 255 255 / 0.56);--timvir-secondary-background-color:#161618;--timvir-border-color:#27292f;--timvir-sidebar-highlight-color:rgb(41,43,47);--timvir-accent-color:#38a585;}
+.t1amubg3{font-family:system-ui,sans-serif;font-feature-settings:"liga","kern";text-rendering:optimizelegibility;font-size:0.9375rem;line-height:1.7333;background-color:var(--timvir-background-color);color:var(--timvir-text-color);--c-p-0:#f0fcf6;--c-p-1:#d1f6e4;--c-p-2:#a0dbc1;--c-p-3:#61c19f;--c-p-4:#38a585;--c-p-5:#1b896b;}:root {box-sizing:border-box;scroll-snap-padding-top:20px;scroll-padding-top:20px;}* ,*:before ,*:after {box-sizing:inherit;}:root {--timvir-background-color:#ffffff;--timvir-text-color:#000000c9;--timvir-secondary-text-color:#00000066;--timvir-secondary-background-color:#f9f8f9;--timvir-border-color:#e9e8ea;--timvir-sidebar-highlight-color:rgb(237, 237, 237);--timvir-accent-color:#38a585;}:root[data-timvir-theme="dark"] {--timvir-background-color:#1f2023;--timvir-text-color:rgba(255 255 255 / 0.86);--timvir-secondary-text-color:rgba(255 255 255 / 0.56);--timvir-secondary-background-color:#161618;--timvir-border-color:#27292f;--timvir-sidebar-highlight-color:rgb(41, 43, 47);--timvir-accent-color:#38a585;}
 
-.ru1mblv{background-color:transparent;color:rgb(214,214,214);white-space:nowrap;display:flex;flex:0 0 100%;align-items:center;transition:color 0.1s;height:46px;display:flex;flex-shrink:initial;flex-basis:initial;flex-direction:row;flex-grow:1;overflow:hidden;align-items:center;padding-inline:14px;border-left:none;cursor:default;}.ru1mblv:hover{background-color:rgb(55,55,60);}
-.i1wyx06o{margin-right:12px;width:16px;}.i1wyx06o > svg{display:block;width:16px;height:16px;}
-.legxg01{font-size:0.8125rem;color:rgb(247,248,248);}
+.ru1mblv{background-color:transparent;color:rgb(214, 214, 214);white-space:nowrap;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:color 0.1s;transition:color 0.1s;height:46px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:initial;-ms-flex-negative:initial;flex-shrink:initial;-webkit-flex-basis:initial;-ms-flex-preferred-size:initial;flex-basis:initial;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-inline:14px;border-left:none;cursor:default;}.ru1mblv:hover{background-color:rgb(55, 55, 60);}
+.i1wyx06o{margin-right:12px;width:16px;}.i1wyx06o>svg{display:block;width:16px;height:16px;}
+.legxg01{font-size:0.8125rem;color:rgb(247, 248, 248);}
 
-.r1fo6voy{position:relative;display:flex;flex-direction:column;flex-shrink:1;flex-grow:1;min-width:min-content;will-change:transform;transform-origin:center center;background:linear-gradient(136.61deg,rgb(39,40,43) 13.72%,rgb(45,46,49) 74.3%);border-radius:8px;box-shadow:rgb(0 0 0 / 50%) 0px 16px 70px;max-width:640px;color:rgb(214,214,214);overflow:hidden;transition:opacity 0.2s,transform 0.2s;}
-.c185xiij{margin:16px 16px 0px;height:25px;line-height:25px;padding:0px 8px;font-size:0.8em;flex-shrink:0;align-self:flex-start;color:rgb(138,143,152);background:rgb(49,50,54);border-radius:4px;max-width:calc(100vw - 60px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
-.p1ky3ya3{border-bottom:1px solid rgb(49,50,54);display:grid;grid-template-columns:1fr;align-items:center;position:relative;flex-shrink:0;height:62px;}.p1ky3ya3 > input{padding:20px;grid-area:1 / 1 / auto / auto;margin:0px;border:none;appearance:none;font-size:inherit;height:62px;background:transparent;color:rgb(214,214,214);caret-color:rgb(110,94,210);outline:none;width:100%;}
-.snq1o7g{background:rgba(247,247,248,0.03);height:24px;padding-inline:14px;font-size:0.75rem;color:rgb(129,128,142);}
+.r1fo6voy{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;will-change:transform;transform-origin:center center;background:linear-gradient(136.61deg, rgb(39, 40, 43) 13.72%, rgb(45, 46, 49) 74.3%);border-radius:8px;box-shadow:rgb(0 0 0 / 50%) 0px 16px 70px;max-width:640px;color:rgb(214, 214, 214);overflow:hidden;-webkit-transition:opacity 0.2s,-webkit-transform 0.2s;transition:opacity 0.2s,transform 0.2s;}
+.c185xiij{margin:16px 16px 0px;height:25px;line-height:25px;padding:0px 8px;font-size:0.8em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;color:rgb(138, 143, 152);background:rgb(49, 50, 54);border-radius:4px;max-width:calc(100vw - 60px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.p1ky3ya3{border-bottom:1px solid rgb(49, 50, 54);display:-ms-grid;display:grid;-ms-grid-columns:1fr;grid-template-columns:1fr;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:62px;}.p1ky3ya3>input{padding:20px;grid-area:1/1/auto/auto;margin:0px;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;font-size:inherit;height:62px;background:transparent;color:rgb(214, 214, 214);caret-color:rgb(110, 94, 210);outline:none;width:100%;}
+.snq1o7g{background:rgba(247, 247, 248, 0.03);height:24px;padding-inline:14px;font-size:0.75rem;color:rgb(129, 128, 142);}
 .cchvluj{height:300px;overflow:auto;}
 
-.rfei6z8{position:fixed;inset:0px;display:flex;z-index:900;align-items:flex-start;justify-content:center;padding:13vh 16px 16px;font-family:system-ui,sans-serif;font-feature-settings:"liga","kern";text-rendering:optimizelegibility;font-size:16px;line-height:1.725;}
+.rfei6z8{position:fixed;inset:0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;z-index:900;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:13vh 16px 16px;font-family:system-ui,sans-serif;font-feature-settings:"liga","kern";text-rendering:optimizelegibility;font-size:16px;line-height:1.725;}
 
-.de625n1{display:flex;flex-direction:column-reverse;gap:1rem;font-size:0.875rem;line-height:1.5;}@media (min-width:48rem){.de625n1{flex-direction:row;}}
-.l19gj27w{width:100%;display:flex;gap:4px;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;border-radius:8px;border:1px solid var(--timvir-border-color);padding:16px;color:inherit;text-decoration:none;min-width:0;}.l19gj27w:hover{background-color:var(--timvir-secondary-background-color);}
-.l15ohs1l{width:100%;display:flex;flex-direction:column;gap:4px;align-items:flex-end;justify-content:flex-start;text-align:right;border-radius:8px;border:1px solid var(--timvir-border-color);padding:16px;color:inherit;text-decoration:none;min-width:0;}.l15ohs1l:hover{background-color:var(--timvir-secondary-background-color);}
+.de625n1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;gap:1rem;font-size:0.875rem;line-height:1.5;}@media (min-width: 48rem){.de625n1{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}
+.l19gj27w{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;text-align:left;border-radius:8px;border:1px solid var(--timvir-border-color);padding:16px;color:inherit;-webkit-text-decoration:none;text-decoration:none;min-width:0;}.l19gj27w:hover{background-color:var(--timvir-secondary-background-color);}
+.l15ohs1l{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;text-align:right;border-radius:8px;border:1px solid var(--timvir-border-color);padding:16px;color:inherit;-webkit-text-decoration:none;text-decoration:none;min-width:0;}.l15ohs1l:hover{background-color:var(--timvir-secondary-background-color);}
 .dczrd9z{font-weight:500;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
-.difnzb8{color:var(--timvir-secondary-text-color);display:flex;align-items:center;margin-inline:-0.2em;}.difnzb8 svg{height:1.2em;width:1.2em;}
-.rymvrdu{padding:50px 0 80px;display:grid;grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.rymvrdu{grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var(--timvir-page-margin) [re];}}@media (min-width:72rem){.rymvrdu{grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.rymvrdu > *{grid-column:lc / rc;}
+.difnzb8{color:var(--timvir-secondary-text-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline:-0.2em;}.difnzb8 svg{height:1.2em;width:1.2em;}
+.rymvrdu{padding:50px 0 80px;display:-ms-grid;display:grid;-ms-grid-auto-rows:min-content;grid-auto-rows:min-content;-ms-grid-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width: 48rem){.rymvrdu{-ms-grid-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0, 48rem) [rc] 1fr [rex] var(--timvir-page-margin) [re];grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0, 48rem) [rc] 1fr [rex] var(--timvir-page-margin) [re];}}@media (min-width: 72rem){.rymvrdu{-ms-grid-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem [rc] minmax(0, 12rem) [rex] var(
+          --timvir-page-margin
+        ) 1fr [re];grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem [rc] minmax(0, 12rem) [rex] var(
+          --timvir-page-margin
+        ) 1fr [re];}}.rymvrdu>*{grid-column:lc/rc;}
 
-.r28qe6v{display:flex;align-items:center;margin:1px 0;font-size:0.9375rem;line-height:2.2;}@media (min-width:48rem){.r28qe6v{font-size:0.8125rem;}}@media (any-pointer:coarse){.r28qe6v > a{min-height:44px;}}.r28qe6v > a{min-width:0;transition:background 0.16s;border-radius:4px;display:flex;align-items:center;color:var(--timvir-text-color);font-weight:500;background:none;text-decoration:none;width:100%;padding:0 8px;opacity:0.7;}.r28qe6v:hover a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}.r28qe6v[data-active="true"] a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}
+.r28qe6v{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:1px 0;font-size:0.9375rem;line-height:2.2;}@media (min-width: 48rem){.r28qe6v{font-size:0.8125rem;}}@media (any-pointer: coarse){.r28qe6v>a{min-height:44px;}}.r28qe6v>a{min-width:0;-webkit-transition:background 0.16s;transition:background 0.16s;border-radius:4px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--timvir-text-color);font-weight:500;background:none;-webkit-text-decoration:none;text-decoration:none;width:100%;padding:0 8px;opacity:0.7;}.r28qe6v:hover a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}.r28qe6v[data-active="true"] a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}
 .i1ia823q{display:block;width:1.3em;height:1.3em;margin-right:8px;min-width:1.3em;}
 .l13ixk6c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
-.i7wcd3g{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;width:1rem;height:1rem;flex:0 0 1rem;}
+.i7wcd3g{margin-left:4px;-webkit-transition:-webkit-transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);transition:transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);transform-origin:center center;width:1rem;height:1rem;-webkit-flex:0 0 1rem;-ms-flex:0 0 1rem;flex:0 0 1rem;}
 
 
 
-.h17eoe18{padding:0 var(--timvir-page-margin);height:3rem;display:flex;align-items:center;}@media (min-width:48rem){.h17eoe18{padding-top:24px;display:block;height:auto;}}
-.d1mgn6rc{font-size:0.875rem;line-height:1.3125;display:flex;gap:16px;}
+.h17eoe18{padding:0 var(--timvir-page-margin);height:3rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (min-width: 48rem){.h17eoe18{padding-top:24px;display:block;height:auto;}}
+.d1mgn6rc{font-size:0.875rem;line-height:1.3125;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16px;}
 .d7bx8iu{font-weight:590;}
 .d119ou0k{background-color:var(--timvir-border-color);width:1px;height:1.25rem;}
-.d1f74255{flex-shrink:0;transition:all 0.16s;margin-top:16px;display:none;}@media (min-width:48rem){.d1f74255{display:block;}}
-.l5l3c45{border-bottom:1px solid var(--timvir-border-color);padding:0 var(--timvir-page-margin);height:3rem;display:flex;align-items:center;cursor:pointer;}@media (min-width:48rem){.l5l3c45{display:none;}}
+.d1f74255{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transition:all 0.16s;transition:all 0.16s;margin-top:16px;display:none;}@media (min-width: 48rem){.d1f74255{display:block;}}
+.l5l3c45{border-bottom:1px solid var(--timvir-border-color);padding:0 var(--timvir-page-margin);height:3rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;}@media (min-width: 48rem){.l5l3c45{display:none;}}
 .c15ju3pv{display:block;width:1.3em;height:1.3em;margin-right:8px;min-width:1.3em;}
 .s2bwnbz{margin-left:auto;}
 .iu06l76{display:none;}
 .s56darb{overflow-y:scroll;position:fixed;top:0px;width:100%;}
-.rwbgl5x{display:flex;flex-direction:column;}@media (min-width:48rem){.rwbgl5x{height:100%;}}
-.c15aig6x{display:none;background-color:var(--timvir-background-color);}#menu:checked ~ .c15aig6x{display:flex;position:fixed;top:6rem;left:0;right:0;bottom:0;}@media (min-width:48rem){.c15aig6x{display:flex;flex-direction:column;height:100%;position:static;overflow:hidden;}}
-.svou0q5{padding:24px 0;overflow-y:auto;flex-grow:1;overscroll-behavior:auto;scroll-padding-block:24px;mask-image:linear-gradient( to bottom, transparent 0%, rgba(0,0,0,0.2) 12px, #000 24px, #000 calc(100% - 24px), rgba(0,0,0,0.2) calc(100% - 12px), transparent 100% );}
-.n1ibjf0n{padding-inline:calc(var(--timvir-page-margin) - 8px);}@media (min-width:48rem){.n1ibjf0n{padding-inline:var(--timvir-page-margin);}}
+.rwbgl5x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}@media (min-width: 48rem){.rwbgl5x{height:100%;}}
+.c15aig6x{display:none;background-color:var(--timvir-background-color);}#menu:checked~.c15aig6x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:fixed;top:6rem;left:0;right:0;bottom:0;}@media (min-width: 48rem){.c15aig6x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;position:static;overflow:hidden;}}
+.svou0q5{padding:24px 0;overflow-y:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overscroll-behavior:auto;scroll-snap-padding-block:24px;scroll-padding-block:24px;-webkit-mask-image:linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(0, 0, 0, 0.2) 12px,
+      #000 24px,
+      #000 calc(100% - 24px),
+      rgba(0, 0, 0, 0.2) calc(100% - 12px),
+      transparent 100%
+    );mask-image:linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(0, 0, 0, 0.2) 12px,
+      #000 24px,
+      #000 calc(100% - 24px),
+      rgba(0, 0, 0, 0.2) calc(100% - 12px),
+      transparent 100%
+    );}
+.n1ibjf0n{padding-inline:calc(var(--timvir-page-margin) - 8px);}@media (min-width: 48rem){.n1ibjf0n{padding-inline:var(--timvir-page-margin);}}
 .da95449{font-family:system-ui;}
-.d1au8wkb{color:var(--timvir-text-color);font-size:0.8125rem;line-height:2.2;font-weight:400;cursor:pointer;min-height:36px;border-radius:8px;padding:0 12px;border:1px solid var(--timvir-border-color);background:var(--timvir-secondary-background-color);display:flex;align-items:center;}.d1au8wkb:hover{background:var(--timvir-sidebar-highlight-color);}.d1au8wkb > svg{display:block;margin-right:8px;width:0.75rem;height:0.75rem;}
+.d1au8wkb{color:var(--timvir-text-color);font-size:0.8125rem;line-height:2.2;font-weight:400;cursor:pointer;min-height:36px;border-radius:8px;padding:0 12px;border:1px solid var(--timvir-border-color);background:var(--timvir-secondary-background-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.d1au8wkb:hover{background:var(--timvir-sidebar-highlight-color);}.d1au8wkb>svg{display:block;margin-right:8px;width:0.75rem;height:0.75rem;}
 
-.rfhjyp1{min-height:100vh;--timvir-page-margin:16px;display:grid;grid-template-areas:"navigation" "content";}@media (min-width:48rem){.rfhjyp1{--timvir-page-margin:24px;grid-template-areas:"navigation content";grid-template-columns:[l] 300px [m] 1fr [r];}}
-.s1pp8z35{grid-area:navigation;z-index:80;background-color:var(--timvir-background-color);position:sticky;top:0;}@media (min-width:48rem){.s1pp8z35{position:fixed;top:0;bottom:0;left:0;width:300px;border-right:1px solid var(--timvir-border-color);}}
-.dxk1fgw{display:flex;flex-direction:column;grid-area:content;}
+.rfhjyp1{min-height:100vh;--timvir-page-margin:16px;display:-ms-grid;display:grid;grid-template-areas:"navigation" "content";}@media (min-width: 48rem){.rfhjyp1{--timvir-page-margin:24px;grid-template-areas:"navigation content";-ms-grid-columns:[l] 300px [m] 1fr [r];grid-template-columns:[l] 300px [m] 1fr [r];}}
+.s1pp8z35{grid-area:navigation;z-index:80;background-color:var(--timvir-background-color);position:-webkit-sticky;position:sticky;top:0;}@media (min-width: 48rem){.s1pp8z35{position:fixed;top:0;bottom:0;left:0;width:300px;border-right:1px solid var(--timvir-border-color);}}
+.dxk1fgw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;grid-area:content;}
 .d2srpki{margin-top:auto;}
 .d1hkiw6l{margin-top:auto;padding-top:80px;}
 

package/core/theme/index.d.ts

@@ -1 +1 @@
-export declare const theme: import("@linaria/core").LinariaClassName;
+export declare const theme: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.35",
+  "version": "0.2.37",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -18,18 +18,15 @@
   "dependencies": {
     "bytestring": "^1",
     "downshift": "^7 || ^8 || ^9",
-    "fuzzaldrin-plus": "^0.6.0",
-    "immer": "^9 || ^10",
     "shiki": "^1 || ^2 || ^3",
     "react-feather": "^2",
-    "use-immer": "^0.8.0 || ^0.8.1 || ^0.9.0 || ^0.10.0 || ^0.11.0",
     "wonka": "^6"
   },
   "peerDependencies": {
     "@mdx-js/react": "^2 || ^3",
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19",
-    "react-hotkeys-hook": "^4"
+    "react-hotkeys-hook": "^4 || ^5"
   },
   "repository": {
     "type": "git",

package/search/Search/internal/index.d.ts

@@ -1,2 +1 @@
 export { default as Dialog } from "./Dialog";
-export { default as Highlight } from "./Highlight";

package/search/index.js

@@ -1,4 +1,3 @@
-import fuzzaldrin from 'fuzzaldrin-plus';
 import * as React from 'react';
 import { useContext } from 'timvir/core';
 import { useCombobox } from 'downshift';
@@ -88,18 +87,6 @@ function SearchBoxListItem(props, ref) {
 }
 var SearchBoxListItem$1 = /*#__PURE__*/React.forwardRef(SearchBoxListItem);
 
-const Highlight = ({
-  string,
-  query
-}) => {
-  const match = fuzzaldrin.wrap(string, query);
-  return /*#__PURE__*/React.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: match.length === 0 ? string : match
-    }
-  });
-};
-
 /**
  * The underlying DOM element which is rendered by this component.
  */
@@ -199,10 +186,7 @@ function Dialog(props, ref) {
     }), /*#__PURE__*/React.createElement("path", {
       d: "M9.5 0.5L9.5 5.5 14.5 5.5"
     }))),
-    label: /*#__PURE__*/React.createElement(Highlight, {
-      string: item.node.path,
-      query: value
-    }),
+    label: item.node.path,
     context: item.node.context,
     style: {
       // background: highlightedIndex === index ? "rgba(0, 0, 0, 0.05)" : undefined,
@@ -229,12 +213,12 @@ var Search$1 = /*#__PURE__*/React.forwardRef(Search);
 function defaultSearch(toc) {
   return {
     q: async query => {
-      const preparedQuery = fuzzaldrin.prepareQuery(query);
       const items = toc.flatMap(n => flatten(n)).map(n => ({
         ...n,
-        score: fuzzaldrin.score(n.path, query, {
-          preparedQuery
-        })
+        score: (() => {
+          const matchLength = n.path.toLowerCase().split(query.toLowerCase()).length - 1;
+          return matchLength / n.path.length;
+        })()
       })).filter(n => query ? n.score > 0 : true).sort((a, b) => b.score - a.score);
       return {
         totalCount: items.length,

package/search/styles.css

@@ -1,16 +1,16 @@
-.r710k81{display:flex;align-items:center;border:none;padding:0px 16px;width:100%;background:transparent;font-size:18px;line-height:inherit;height:52px;flex-grow:0;flex-shrink:0;z-index:1;box-shadow:rgba(55,53,47,0.09) 0px 1px 0px;}:root[data-timvir-theme="dark"] .r710k81{box-shadow:rgba(255,255,255,0.09) 0px 1px 0px;}
-.s1sjvm51{width:18px;height:18px;display:block;fill:var(--timvir-secondary-text-color);flex-shrink:0;backface-visibility:hidden;margin-right:10px;flex-grow:0;}
+.r710k81{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;padding:0px 16px;width:100%;background:transparent;font-size:18px;line-height:inherit;height:52px;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;z-index:1;box-shadow:rgba(55, 53, 47, 0.09) 0px 1px 0px;}:root[data-timvir-theme="dark"] {box-shadow:rgba(255, 255, 255, 0.09) 0px 1px 0px;}
+.s1sjvm51{width:18px;height:18px;display:block;fill:var(--timvir-secondary-text-color);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;margin-right:10px;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}
 .i1f3edco{font-family:inherit;font-size:inherit;line-height:inherit;border:none;background:none;width:100%;display:block;resize:none;padding:0px;min-width:0px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--timvir-text-color);}.i1f3edco:focus{outline:0;}
 
-.c8yc6y{display:flex;padding:8px 0;font-size:14px;color:var(--timvir-text-color);cursor:pointer;box-shadow:rgba(55,53,47,0.09) 0px 1px 0px;text-decoration:none;}.c8yc6y:hover{background:rgba(0,0,0,0.05);}:root[data-timvir-theme="dark"] .c8yc6y{box-shadow:rgba(255,255,255,0.09) 0px 1px 0px;}:root[data-timvir-theme="dark"] .c8yc6y:hover{background:rgba(255,255,255,0.05);}
-.dqzmx2q{display:flex;align-items:center;justify-content:center;margin-left:14px;width:18px;height:24px;}
+.c8yc6y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:8px 0;font-size:14px;color:var(--timvir-text-color);cursor:pointer;box-shadow:rgba(55, 53, 47, 0.09) 0px 1px 0px;-webkit-text-decoration:none;text-decoration:none;}.c8yc6y:hover{background:rgba(0, 0, 0, 0.05);}:root[data-timvir-theme="dark"] {box-shadow:rgba(255, 255, 255, 0.09) 0px 1px 0px;}:root[data-timvir-theme="dark"] {background:rgba(255, 255, 255, 0.05);}
+.dqzmx2q{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-left:14px;width:18px;height:24px;}
 .dp5wq1v{margin-left:14px;}
 .du5k8uq{font-size:12px;color:var(--timvir-secondary-text-color);}
 
 .r5ea8qd{position:fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:999;pointer-events:none;overflow:hidden;font-family:system-ui,sans-serif;font-feature-settings:"liga","kern";text-rendering:optimizelegibility;font-size:14px;line-height:1.725;color:var(--timvir-text-color);}
 .dp0smwa{pointer-events:auto;position:relative;z-index:0;}
-.d1a28btb{width:100vw;height:100vh;position:fixed;top:0px;left:0px;display:flex;align-items:flex-start;justify-content:center;pointer-events:auto;}
-.d1c5pom9{position:absolute;top:0px;left:0px;bottom:0px;right:0px;background:rgba(15,15,15,0.6);}
-.djje8s3{position:relative;z-index:1;box-shadow:rgba(15,15,15,0.05) 0px 0px 0px 1px,rgba(15,15,15,0.1) 0px 5px 10px, rgba(15,15,15,0.2) 0px 15px 40px;border-radius:3px;background:white;top:90px;overflow:hidden;width:75%;max-width:600px;min-height:50px;max-height:80vh;}:root[data-timvir-theme="dark"] .djje8s3{background:black;}
+.d1a28btb{width:100vw;height:100vh;position:fixed;top:0px;left:0px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;pointer-events:auto;}
+.d1c5pom9{position:absolute;top:0px;left:0px;bottom:0px;right:0px;background:rgba(15, 15, 15, 0.6);}
+.djje8s3{position:relative;z-index:1;box-shadow:rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,rgba(15, 15, 15, 0.1) 0px 5px 10px,rgba(15, 15, 15, 0.2) 0px 15px 40px;border-radius:3px;background:white;top:90px;overflow:hidden;width:75%;max-width:600px;min-height:50px;max-height:80vh;}:root[data-timvir-theme="dark"] {background:black;}
 .m1mgb53c{width:100%;height:100%;overflow:hidden auto;}