timvir 0.2.52 → 0.2.54

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # timvir
 
+## 0.2.54
+
+### Patch Changes
+
+- **Set color and background-color in Page component** ([#3892](https://github.com/timvir/timvir/pull/3892)) - This fixes an issue where the main content area inherits these colors from the :root element. Even though we set color on body, third-party components may override these values and so break the page styling.
+
+## 0.2.53
+
 ## 0.2.52
 
 ### Patch Changes

package/blocks/Arbitrary/index.js

@@ -5,17 +5,6 @@ import { Exhibit } from 'timvir/blocks';
 import { useBlock } from 'timvir/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
-
 var styleq = {};
 var hasRequiredStyleq;
 function requireStyleq() {
@@ -175,6 +164,17 @@ const layoutStyles = {
     $$css: true
   }};
 
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
 const Context = /*#__PURE__*/React.createContext({
   seed: 0
 });

package/blocks/Code/index.js

@@ -1,20 +1,9 @@
 'use client';
-import { useBlock } from 'timvir/core';
-import { codeToHtml } from 'shiki';
 import * as React from 'react';
+import { codeToHtml } from 'shiki';
+import { useBlock } from 'timvir/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
-
 var styleq = {};
 var hasRequiredStyleq;
 function requireStyleq() {
@@ -174,6 +163,17 @@ const layoutStyles = {
     $$css: true
   }};
 
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
 const Root = "div";
 function Code(props$1) {
   const block = useBlock(props$1);

package/blocks/ColorBar/index.js

@@ -1,20 +1,9 @@
 'use client';
+import * as React from 'react';
 import { Swatch } from 'timvir/blocks';
 import { useBlock } from 'timvir/core';
-import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
-
 var styleq = {};
 var hasRequiredStyleq;
 function requireStyleq() {
@@ -174,6 +163,17 @@ const layoutStyles = {
     $$css: true
   }};
 
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
 const Root = "div";
 function ColorBar(props$1) {
   const block = useBlock(props$1);
@@ -199,7 +199,20 @@ function ColorBar(props$1) {
       children: values.map((value, i, self) => /*#__PURE__*/jsx("div", {
         className: "timvir-s-1vqgdyp timvir-s-1iyjqo2 timvir-s-rvj5dj timvir-s-13b6k1y timvir-s-1ypdohk timvir-s-zkaem6 timvir-s-12l46wj timvir-s-inzabm timvir-s-1bxid8z",
         children: /*#__PURE__*/jsx("div", {
-          ...props(i === 0 ? styles.firstChild : null, i === self.length - 1 ? styles.lastChild : null, styles.valueInner),
+          ...{
+            0: {
+              className: "timvir-s-zhuw26 timvir-s-nfsnhl timvir-s-1ehn4u0 timvir-s-32zglm"
+            },
+            2: {
+              className: "timvir-s-16gz6n8 timvir-s-zhuw26 timvir-s-nfsnhl timvir-s-1ehn4u0 timvir-s-32zglm"
+            },
+            1: {
+              className: "timvir-s-btcsfn timvir-s-zhuw26 timvir-s-nfsnhl timvir-s-1ehn4u0 timvir-s-32zglm"
+            },
+            3: {
+              className: "timvir-s-btcsfn timvir-s-zhuw26 timvir-s-nfsnhl timvir-s-1ehn4u0 timvir-s-32zglm"
+            }
+          }[!!(i === 0) << 1 | !!(i === self.length - 1) << 0],
           style: {
             background: typeof value === "string" ? value : value.value
           },
@@ -230,21 +243,6 @@ const styles = {
   root: {
     kVAEAm: "timvir-s-1n2onr6",
     $$css: true
-  },
-  valueInner: {
-    kmkexE: "timvir-s-zhuw26",
-    kaIpWk: "timvir-s-nfsnhl",
-    kogj98: "timvir-s-1ehn4u0",
-    kwh8RV: "timvir-s-32zglm",
-    $$css: true
-  },
-  firstChild: {
-    "--timvir-b-ColorBar-value-borderRadiusDefault": "timvir-s-16gz6n8",
-    $$css: true
-  },
-  lastChild: {
-    "--timvir-b-ColorBar-value-borderRadiusDefault": "timvir-s-btcsfn",
-    $$css: true
   }
 };
 

package/blocks/ColorBook/index.js

@@ -196,7 +196,20 @@ function ColorBook(props$1) {
           style: {
             background: value
           },
-          ...props(styles.colorValue, i === 0 ? styles.colorValueFirst : null, i === values.length - 1 ? styles.colorValueLast : null)
+          ...{
+            0: {
+              className: "timvir-s-1iyjqo2"
+            },
+            2: {
+              className: "timvir-s-1iyjqo2 timvir-s-1nrfd8m timvir-s-16gx4na timvir-s-frllxf timvir-s-jppbhk"
+            },
+            1: {
+              className: "timvir-s-1iyjqo2 timvir-s-1ia1hqs timvir-s-1a2w583 timvir-s-1v8xtx2 timvir-s-uvn51i"
+            },
+            3: {
+              className: "timvir-s-1iyjqo2 timvir-s-1ia1hqs timvir-s-1a2w583 timvir-s-1v8xtx2 timvir-s-uvn51i"
+            }
+          }[!!(i === 0) << 1 | !!(i === values.length - 1) << 0]
         }, value))
       }), name && /*#__PURE__*/jsx("div", {
         ...{
@@ -220,24 +233,6 @@ const styles = {
     kGNEyG: "timvir-s-7a106z",
     kzqmXN: "timvir-s-h8yej3",
     $$css: true
-  },
-  colorValue: {
-    kzQI83: "timvir-s-1iyjqo2",
-    $$css: true
-  },
-  colorValueFirst: {
-    kIxVMA: "timvir-s-1nrfd8m",
-    ksF3WI: "timvir-s-16gx4na",
-    kqGeR4: "timvir-s-frllxf",
-    kYm2EN: "timvir-s-jppbhk",
-    $$css: true
-  },
-  colorValueLast: {
-    kIxVMA: "timvir-s-1ia1hqs",
-    ksF3WI: "timvir-s-1a2w583",
-    kqGeR4: "timvir-s-1v8xtx2",
-    kYm2EN: "timvir-s-uvn51i",
-    $$css: true
   }
 };
 

package/blocks/Cover/index.js

@@ -1,16 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
-
 var styleq = {};
 var hasRequiredStyleq;
 function requireStyleq() {
@@ -175,6 +164,17 @@ const layoutStyles = {
   }
 };
 
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
 const Root = "div";
 function Cover(props$1) {
   const {
@@ -194,6 +194,7 @@ function Cover(props$1) {
       }, i)), /*#__PURE__*/jsx("img", {
         ...metadata,
         ...img1,
+        alt: "",
         className: "timvir-s-1lliihq timvir-s-193iq5w timvir-s-5i6pxz timvir-s-l1xv1r"
       })]
     })

package/blocks/Exhibit/index.js

@@ -2,17 +2,6 @@
 import { useContext, useBlock } from 'timvir/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
-
 var styleq = {};
 var hasRequiredStyleq;
 function requireStyleq() {
@@ -172,6 +161,17 @@ const layoutStyles = {
     $$css: true
   }};
 
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
 const Root = "div";
 function Exhibit(props$1) {
   const {

package/blocks/Font/index.js

@@ -1,27 +1,8 @@
 'use client';
-import { useArticleComponents } from 'timvir/core';
 import * as React from 'react';
+import { useArticleComponents } from 'timvir/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
-
-const layoutStyles = {
-  block: {
-    kBCFzs: "timvir-s-htle6",
-    k7Eaqz: "timvir-s-euugli",
-    kogj98: "timvir-s-1t4wa6b",
-    $$css: true
-  }};
-
 var styleq = {};
 var hasRequiredStyleq;
 function requireStyleq() {
@@ -173,6 +154,14 @@ function props(...styles) {
     return result;
 }
 
+const layoutStyles = {
+  block: {
+    kBCFzs: "timvir-s-htle6",
+    k7Eaqz: "timvir-s-euugli",
+    kogj98: "timvir-s-1t4wa6b",
+    $$css: true
+  }};
+
 const SvgInfo = props => /*#__PURE__*/jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
@@ -193,6 +182,17 @@ const SvgInfo = props => /*#__PURE__*/jsxs("svg", {
   })]
 });
 
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
 const Root = "div";
 function Font(props$1) {
   const components = useArticleComponents();

package/blocks/Grid/index.js

@@ -1,17 +1,6 @@
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
-
 var styleq = {};
 var hasRequiredStyleq;
 function requireStyleq() {
@@ -171,6 +160,17 @@ const layoutStyles = {
     $$css: true
   }};
 
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
 const Root = "div";
 function Grid(props$1) {
   const {

package/blocks/Message/index.js

@@ -152,6 +152,14 @@ function props(...styles) {
     return result;
 }
 
+const layoutStyles = {
+  block: {
+    kBCFzs: "timvir-s-htle6",
+    k7Eaqz: "timvir-s-euugli",
+    kogj98: "timvir-s-1t4wa6b",
+    $$css: true
+  }};
+
 const SvgAlertCircle = props => /*#__PURE__*/jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
@@ -204,14 +212,6 @@ const SvgXOctagon = props => /*#__PURE__*/jsx("svg", {
   })
 });
 
-const layoutStyles = {
-  block: {
-    kBCFzs: "timvir-s-htle6",
-    k7Eaqz: "timvir-s-euugli",
-    kogj98: "timvir-s-1t4wa6b",
-    $$css: true
-  }};
-
 const Root = "div";
 function Message(props$1) {
   const {

package/blocks/Swatch/index.js

@@ -1,19 +1,8 @@
 'use client';
-import { useBlock } from 'timvir/core';
 import * as React from 'react';
+import { useBlock } from 'timvir/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
-
 var styleq = {};
 var hasRequiredStyleq;
 function requireStyleq() {
@@ -173,6 +162,17 @@ const layoutStyles = {
     $$css: true
   }};
 
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
 const Root = "div";
 function Swatch(props$1) {
   const block = useBlock(props$1);

package/blocks/Viewport/index.js

@@ -5,17 +5,6 @@ import { useResizeObserverEntry, useResizeObserver } from 'timvir/hooks';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Code } from 'timvir/blocks';
 
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
-
 var styleq = {};
 var hasRequiredStyleq;
 function requireStyleq() {
@@ -180,6 +169,17 @@ const layoutStyles = {
   }
 };
 
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
 const SvgCode = props => /*#__PURE__*/jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
@@ -210,6 +210,7 @@ function Caption(props$1) {
         children: ["Source:", " ", /*#__PURE__*/jsx(components.a, {
           href: src,
           target: "_blank",
+          rel: "noopener",
           children: src
         })]
       }), code && /*#__PURE__*/jsx("div", {

package/blocks/WebLink/index.js

@@ -3,17 +3,6 @@ import * as React from 'react';
 import { useContext } from 'timvir/core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-function cx(...args) {
-  let str = "";
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-    if (typeof arg === "string") {
-      str += (str && " ") + arg;
-    }
-  }
-  return str;
-}
-
 var styleq = {};
 var hasRequiredStyleq;
 function requireStyleq() {
@@ -173,6 +162,17 @@ const layoutStyles = {
     $$css: true
   }};
 
+function cx(...args) {
+  let str = "";
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (typeof arg === "string") {
+      str += (str && " ") + arg;
+    }
+  }
+  return str;
+}
+
 const Root = "a";
 function WebLink(props$1) {
   const {
@@ -227,7 +227,8 @@ function WebLink(props$1) {
           style: {
             opacity: metadata?.favicon ? 1 : 0
           },
-          src: metadata?.favicon
+          src: metadata?.favicon,
+          alt: ""
         }), /*#__PURE__*/jsx("div", {
           children: metadata ? url : null
         })]
@@ -236,7 +237,8 @@ function WebLink(props$1) {
       className: "timvir-s-15lv9n0 timvir-s-1n2onr6 timvir-s-fb3i0g",
       children: /*#__PURE__*/jsx("img", {
         className: "timvir-s-1lliihq timvir-s-l1xv1r timvir-s-1p4ba9y timvir-s-h8yej3 timvir-s-5yr21d timvir-s-10l6tqk timvir-s-13vifvy timvir-s-u96u03",
-        src: image
+        src: image,
+        alt: ""
       })
     })]
   });

package/builtins/components.d.ts

@@ -16,3 +16,4 @@ export declare const a: React.FunctionComponent<React.AnchorHTMLAttributes<HTMLA
 export declare const p: React.FunctionComponent<React.HTMLAttributes<HTMLParagraphElement>>;
 export declare const ul: React.FunctionComponent<React.HTMLAttributes<HTMLUListElement>>;
 export declare const ol: React.FunctionComponent<React.HTMLAttributes<HTMLOListElement>>;
+export declare const button: React.FunctionComponent<React.ButtonHTMLAttributes<HTMLButtonElement>>;

package/builtins/index.js

@@ -152,6 +152,14 @@ function props(...styles) {
     return result;
 }
 
+const layoutStyles = {
+  block: {
+    kBCFzs: "timvir-s-htle6",
+    k7Eaqz: "timvir-s-euugli",
+    kogj98: "timvir-s-1t4wa6b",
+    $$css: true
+  }};
+
 const SvgLink = props => /*#__PURE__*/jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
@@ -170,14 +178,6 @@ const SvgLink = props => /*#__PURE__*/jsxs("svg", {
   })]
 });
 
-const layoutStyles = {
-  block: {
-    kBCFzs: "timvir-s-htle6",
-    k7Eaqz: "timvir-s-euugli",
-    kogj98: "timvir-s-1t4wa6b",
-    $$css: true
-  }};
-
 const anchorize = children => {
   if (typeof children === "string") {
     return children.toLowerCase().replace(/[ _]+/g, "-").replace(/[!:^*./\\]/g, "");
@@ -309,6 +309,10 @@ const ol1 = props$1 => /*#__PURE__*/jsx("ol", {
   ...props(layoutStyles.block),
   ...props$1
 });
+const button1 = props => /*#__PURE__*/jsx("button", {
+  className: "timvir-s-1a2a7pz timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1cum3z5 timvir-s-1d0dlzq timvir-s-1cdhzux timvir-s-ln7xf2 timvir-s-o5v014 timvir-s-1whlmpv timvir-s-1k49i25 timvir-s-49kzi4 timvir-s-1dc5b4e timvir-s-13m658e timvir-s-1bx2y69",
+  ...props
+});
 const styles = {
   h1: {
     keoZOQ: "timvir-s-1hpjnmm",
@@ -366,4 +370,4 @@ const styles = {
   }
 };
 
-export { a1 as a, blockquote1 as blockquote, code1 as code, h11 as h1, h21 as h2, h31 as h3, h41 as h4, hr1 as hr, ol1 as ol, p1 as p, table1 as table, tbody1 as tbody, td1 as td, th1 as th, thead1 as thead, tr1 as tr, ul1 as ul };
+export { a1 as a, blockquote1 as blockquote, button1 as button, code1 as code, h11 as h1, h21 as h2, h31 as h3, h41 as h4, hr1 as hr, ol1 as ol, p1 as p, table1 as table, tbody1 as tbody, td1 as td, th1 as th, thead1 as thead, tr1 as tr, ul1 as ul };

package/builtins/styles.css

@@ -43,6 +43,10 @@
 }
 
 @layer priority2 {
+  .timvir-s-ln7xf2 {
+    font: inherit;
+  }
+
   .timvir-s-1t4wa6b {
     margin: 0 0 2rem;
   }
@@ -59,6 +63,10 @@
     padding: 4px 6px 3px;
   }
 
+  .timvir-s-1whlmpv {
+    padding: 4px 6px;
+  }
+
   .timvir-s-12ek6fo {
     padding: 6px 13px;
   }
@@ -77,6 +85,10 @@
     border-color: var(--timvir-border-color);
   }
 
+  .timvir-s-1cum3z5 {
+    border-radius: 2px;
+  }
+
   .timvir-s-1sxf85j {
     border-radius: 5px;
   }
@@ -105,6 +117,14 @@
     grid-column: lex / rex;
   }
 
+  .timvir-s-1k49i25 {
+    margin-block: -4px;
+  }
+
+  .timvir-s-1a2a7pz {
+    outline: none;
+  }
+
   .timvir-s-ysyzu8 {
     overflow: auto;
   }
@@ -116,6 +136,10 @@
   .timvir-s-2r93rw {
     transition: opacity.2s,transform.2s,visibility 0s var(--link-icon-visibility-delay, .2s);
   }
+
+  .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
+    border-color: var(--timvir-text-color);
+  }
 }
 
 @layer priority4 {
@@ -131,6 +155,10 @@
     background-color: var(--code-background, var(--timvir-secondary-background-color));
   }
 
+  .timvir-s-1d0dlzq {
+    background-color: var(--timvir-secondary-background-color);
+  }
+
   .timvir-s-11p4203 {
     background-image: linear-gradient(#0000, #0000 5px, #383838 5px, #383838);
   }
@@ -167,6 +195,10 @@
     color: var(--timvir-secondary-text-color);
   }
 
+  .timvir-s-1cdhzux {
+    color: var(--timvir-text-color);
+  }
+
   .timvir-s-1lliihq {
     display: block;
   }
@@ -231,6 +263,10 @@
     line-height: 1.4706;
   }
 
+  .timvir-s-o5v014 {
+    line-height: 1;
+  }
+
   .timvir-s-vpkmg4 {
     opacity: .25;
   }
@@ -263,7 +299,19 @@
     background-color: var(--c-p-0);
   }
 
-  .timvir-s-lan1bs:hover, .timvir-s-1k07x2j:active {
+  .timvir-s-1dc5b4e:hover {
+    background-color: var(--timvir-sidebar-highlight-color);
+  }
+
+  .timvir-s-lan1bs:hover {
+    background-image: linear-gradient(#0000, #0000 3px, #2bbc8a 3px, #2bbc8a);
+  }
+
+  .timvir-s-1bx2y69:active {
+    background-color: var(--timvir-sidebar-highlight-color);
+  }
+
+  .timvir-s-1k07x2j:active {
     background-image: linear-gradient(#0000, #0000 3px, #2bbc8a 3px, #2bbc8a);
   }
 

package/core/index.d.ts

@@ -1,10 +1,10 @@
-import { type Source } from "wonka";
-import type { Message } from "timvir/bus";
 import * as React from "react";
+import type { Message } from "timvir/bus";
+import { type Source } from "wonka";
+export { useContext } from "timvir/context";
 export * from "./components/Footer";
 export * from "./components/Page";
-export { useContext } from "timvir/context";
-export { layoutStyles, noLayout, extendedWidth, fullWidth, grid } from "./layout";
+export { extendedWidth, fullWidth, grid, layoutStyles, noLayout } from "./layout";
 /**
  * A mailbox is a wonka source which receives messages for one specific block (identified by its id).
  */
@@ -45,7 +45,7 @@ export declare function useArticleComponents(): {
     blockquote: keyof React.JSX.IntrinsicElements | React.FunctionComponent<React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>>;
     body?: keyof React.JSX.IntrinsicElements | React.FunctionComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>> | undefined;
     br?: keyof React.JSX.IntrinsicElements | React.FunctionComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>> | undefined;
-    button?: keyof React.JSX.IntrinsicElements | React.FunctionComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>> | undefined;
+    button: keyof React.JSX.IntrinsicElements | React.FunctionComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>;
     canvas?: keyof React.JSX.IntrinsicElements | React.FunctionComponent<React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>> | undefined;
     caption?: keyof React.JSX.IntrinsicElements | React.FunctionComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> | undefined;
     center?: keyof React.JSX.IntrinsicElements | React.FunctionComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> | undefined;

package/core/index.js

@@ -1,9 +1,9 @@
 'use client';
-import { pipe, subscribe, filter } from 'wonka';
-import { useContext, Provider } from 'timvir/context';
-export { useContext } from 'timvir/context';
 import * as React from 'react';
 import * as builtins from 'timvir/builtins';
+import { useContext, Provider } from 'timvir/context';
+export { useContext } from 'timvir/context';
+import { pipe, subscribe, filter } from 'wonka';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeBus } from 'timvir/bus';
 import * as ReactDOM from 'react-dom';
@@ -324,8 +324,8 @@ function Dialog(props) {
       }));
     })();
   }, [toc, state.query]);
-  return /*#__PURE__*/jsxs("div", {
-    className: "timvir-s-1n2onr6 timvir-s-78zum5 timvir-s-dt5ytf timvir-s-s83m0k timvir-s-1iyjqo2 timvir-s-13qp9f6 timvir-s-1so62im timvir-s-1jpgh95 timvir-s-1c4omy1 timvir-s-ur7f20 timvir-s-17isqgs timvir-s-11gisft timvir-s-vc674v timvir-s-b3r6kr timvir-s-hkombj",
+  return /*#__PURE__*/jsxs("dialog", {
+    className: "timvir-s-1n2onr6 timvir-s-78zum5 timvir-s-dt5ytf timvir-s-s83m0k timvir-s-1iyjqo2 timvir-s-13qp9f6 timvir-s-1so62im timvir-s-1jpgh95 timvir-s-1c4omy1 timvir-s-ur7f20 timvir-s-17isqgs timvir-s-11gisft timvir-s-vc674v timvir-s-b3r6kr timvir-s-hkombj timvir-s-1717udv timvir-s-c342km timvir-s-19bbpc0",
     style: state.style,
     ...rest,
     children: [/*#__PURE__*/jsx("div", {
@@ -579,10 +579,10 @@ function SidebarItem(props) {
   const isActive = location.asPath.replace(/#.*$/, "") === path;
   const linkStylexProps = {
     0: {
-      className: "timvir-s-euugli timvir-s-pau0pd timvir-s-12oqio5 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1cdhzux timvir-s-k50ysn timvir-s-1k74hu9 timvir-s-1hl2dhg timvir-s-h8yej3 timvir-s-1xq1gxn timvir-s-1ks1olk timvir-s-8kob5h timvir-s-1dc5b4e timvir-s-1o7uuvo"
+      className: "timvir-s-euugli timvir-s-pau0pd timvir-s-12oqio5 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1cdhzux timvir-s-k50ysn timvir-s-jbqb8w timvir-s-1hl2dhg timvir-s-h8yej3 timvir-s-1xq1gxn timvir-s-1ks1olk timvir-s-c342km timvir-s-dpxx8g timvir-s-1ypdohk timvir-s-jb2p0i timvir-s-6u19be timvir-s-1ylh3l6 timvir-s-asi8qw timvir-s-8kob5h timvir-s-1dc5b4e timvir-s-1o7uuvo"
     },
     1: {
-      className: "timvir-s-euugli timvir-s-pau0pd timvir-s-12oqio5 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1cdhzux timvir-s-k50ysn timvir-s-1hl2dhg timvir-s-h8yej3 timvir-s-1xq1gxn timvir-s-8kob5h timvir-s-1dc5b4e timvir-s-1o7uuvo timvir-s-6r7942 timvir-s-1hc1fzr"
+      className: "timvir-s-euugli timvir-s-pau0pd timvir-s-12oqio5 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1cdhzux timvir-s-k50ysn timvir-s-1hl2dhg timvir-s-h8yej3 timvir-s-1xq1gxn timvir-s-c342km timvir-s-dpxx8g timvir-s-1ypdohk timvir-s-jb2p0i timvir-s-6u19be timvir-s-1ylh3l6 timvir-s-asi8qw timvir-s-8kob5h timvir-s-1dc5b4e timvir-s-1o7uuvo timvir-s-6r7942 timvir-s-1hc1fzr"
     }
   }[!!isActive << 0];
   const linkStyle = {
@@ -590,7 +590,7 @@ function SidebarItem(props) {
     marginLeft: depth * 16
   };
   return /*#__PURE__*/jsx("div", {
-    className: "timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-3my8ay timvir-s-6u19be timvir-s-1ylh3l6 timvir-s-asi8qw",
+    className: "timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-3my8ay",
     children: path ? /*#__PURE__*/jsxs(Link, {
       href: path,
       className: linkStylexProps.className,
@@ -603,8 +603,8 @@ function SidebarItem(props) {
         className: "timvir-s-uxw1ft timvir-s-b3r6kr timvir-s-lyipyv timvir-s-ack27t",
         children: label
       }), icon]
-    }) : /*#__PURE__*/jsxs("a", {
-      href: "#",
+    }) : /*#__PURE__*/jsxs("button", {
+      type: "button",
       className: linkStylexProps.className,
       style: linkStyle,
       onClick: () => setActive(x => !x),
@@ -717,10 +717,10 @@ function Sidebar(props$1) {
           ...search
         })
       })]
-    }), /*#__PURE__*/jsxs("div", {
-      role: "button",
+    }), /*#__PURE__*/jsxs("button", {
+      type: "button",
       onClick: () => setMenuOpen(!isMenuOpen),
-      className: "timvir-s-1qg66n7 timvir-s-7uxsod timvir-s-1pizb70 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1ypdohk timvir-s-1yn2rt8",
+      className: "timvir-s-jbqb8w timvir-s-ln7xf2 timvir-s-1heor9g timvir-s-h8yej3 timvir-s-76ihet timvir-s-cym7qx timvir-s-7956lj timvir-s-1qg66n7 timvir-s-7uxsod timvir-s-1pizb70 timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1ypdohk timvir-s-1yn2rt8",
       children: [node?.icon ? /*#__PURE__*/React.cloneElement(node.icon, {
         ...{
           className: "timvir-s-1lliihq timvir-s-1fr90bg timvir-s-pz6ql4 timvir-s-1db2dqx timvir-s-15dgqpb"
@@ -772,9 +772,9 @@ function Search(props) {
   } = props;
   return /*#__PURE__*/jsx("div", {
     className: "timvir-s-gcpwm9",
-    children: /*#__PURE__*/jsxs("div", {
-      role: "button",
-      className: "timvir-s-1cdhzux timvir-s-1dcheo9 timvir-s-1ylh3l6 timvir-s-o1l8bm timvir-s-1ypdohk timvir-s-u0aao5 timvir-s-ur7f20 timvir-s-84vhe8 timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1d0dlzq timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1dc5b4e",
+    children: /*#__PURE__*/jsxs("button", {
+      type: "button",
+      className: "timvir-s-ln7xf2 timvir-s-h8yej3 timvir-s-1cdhzux timvir-s-1dcheo9 timvir-s-1ylh3l6 timvir-s-o1l8bm timvir-s-1ypdohk timvir-s-u0aao5 timvir-s-ur7f20 timvir-s-84vhe8 timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1d0dlzq timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-1dc5b4e",
       onClick: open,
       children: [/*#__PURE__*/jsx("svg", {
         x: "0px",
@@ -860,7 +860,7 @@ function Page(props$1) {
     value: context,
     children: [/*#__PURE__*/jsxs(Root, {
       ...rest,
-      className: "timvir-s-g6iff7 timvir-s-1hz7z82 timvir-s-rvj5dj timvir-s-c0s83b timvir-s-1i3za4p timvir-s-oxwh6b timvir-s-1w3eerp",
+      className: "timvir-s-g6iff7 timvir-s-1hz7z82 timvir-s-rvj5dj timvir-s-c0s83b timvir-s-1i3za4p timvir-s-oxwh6b timvir-s-1w3eerp timvir-s-1p7i66b timvir-s-dvd4st timvir-s-1746jcd timvir-s-6u19be timvir-s-13xho20 timvir-s-1b7vwdu timvir-s-1cdhzux",
       children: [/*#__PURE__*/jsx(Sidebar, {
         sx: styles.sidebar,
         toc: toc,
@@ -940,7 +940,6 @@ const styles = {
   sidebar: {
     kJuA4N: "timvir-s-1nkj2r4",
     kY2c9j: "timvir-s-13tdkmf",
-    kWkggS: "timvir-s-1b7vwdu",
     kVAEAm: "timvir-s-7wzq59",
     k87sOh: "timvir-s-13vifvy",
     kZ9C5d: "timvir-s-1b3g1kt",

package/core/styles.css

@@ -15,6 +15,10 @@
 }
 
 @layer priority2 {
+  .timvir-s-ln7xf2 {
+    font: inherit;
+  }
+
   .timvir-s-18p8pu3 {
     grid-area: 1 / 1;
   }
@@ -35,6 +39,10 @@
     margin: 0 0 2rem;
   }
 
+  .timvir-s-19bbpc0 {
+    margin: 0 auto;
+  }
+
   .timvir-s-1ghz6dp {
     margin: 0;
   }
@@ -59,6 +67,10 @@
     padding: 0 var(--timvir-page-margin);
   }
 
+  .timvir-s-1717udv {
+    padding: 0;
+  }
+
   .timvir-s-1tv4xqk {
     padding: 13vh 16px 16px;
   }
@@ -113,6 +125,10 @@
     border-radius: 8px;
   }
 
+  .timvir-s-7956lj {
+    border-right: none;
+  }
+
   .timvir-s-1y0btm7 {
     border-style: solid;
   }
@@ -121,6 +137,10 @@
     border-top: 1px solid var(--timvir-border-color);
   }
 
+  .timvir-s-76ihet {
+    border-top: none;
+  }
+
   .timvir-s-c342km {
     border-width: 0;
   }
@@ -266,10 +286,6 @@
     appearance: none;
   }
 
-  .timvir-s-1k74hu9 {
-    background-color: none;
-  }
-
   .timvir-s-1c4omy1 {
     background-color: #27282b;
   }
@@ -402,6 +418,10 @@
     flex-shrink: 1;
   }
 
+  .timvir-s-jb2p0i {
+    font-family: inherit;
+  }
+
   .timvir-s-1p7i66b {
     font-family: system-ui, sans-serif;
   }
@@ -498,6 +518,10 @@
     line-height: 1.725;
   }
 
+  .timvir-s-13xho20 {
+    line-height: 1.7333;
+  }
+
   .timvir-s-1ylh3l6 {
     line-height: 2.2;
   }
@@ -507,6 +531,7 @@
   }
 
   .timvir-s-sgruip {
+    -webkit-mask-image: linear-gradient(#0000 0%, #0003 12px, #000 24px calc(100% - 24px), #0003 calc(100% - 12px), #0000 100%);
     mask-image: linear-gradient(#0000 0%, #0003 12px, #000 24px calc(100% - 24px), #0003 calc(100% - 12px), #0000 100%);
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.52",
+  "version": "0.2.54",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -45,8 +45,8 @@
     "wonka": "^6"
   },
   "peerDependencies": {
-    "react": "^19",
-    "react-dom": "^19"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "repository": {
     "type": "git",

package/styles.css

@@ -126,6 +126,10 @@ body {
 }
 
 @layer priority2 {
+  .timvir-s-ln7xf2 {
+    font: inherit;
+  }
+
   .timvir-s-18p8pu3 {
     grid-area: 1 / 1;
   }
@@ -146,6 +150,10 @@ body {
     margin: 0 0 2rem;
   }
 
+  .timvir-s-19bbpc0 {
+    margin: 0 auto;
+  }
+
   .timvir-s-1ghz6dp {
     margin: 0;
   }
@@ -170,6 +178,10 @@ body {
     padding: 0 var(--timvir-page-margin);
   }
 
+  .timvir-s-1717udv {
+    padding: 0;
+  }
+
   .timvir-s-1tv4xqk {
     padding: 13vh 16px 16px;
   }
@@ -224,6 +236,10 @@ body {
     border-radius: 8px;
   }
 
+  .timvir-s-7956lj {
+    border-right: none;
+  }
+
   .timvir-s-1y0btm7 {
     border-style: solid;
   }
@@ -232,6 +248,10 @@ body {
     border-top: 1px solid var(--timvir-border-color);
   }
 
+  .timvir-s-76ihet {
+    border-top: none;
+  }
+
   .timvir-s-c342km {
     border-width: 0;
   }
@@ -377,10 +397,6 @@ body {
     appearance: none;
   }
 
-  .timvir-s-1k74hu9 {
-    background-color: none;
-  }
-
   .timvir-s-1c4omy1 {
     background-color: #27282b;
   }
@@ -513,6 +529,10 @@ body {
     flex-shrink: 1;
   }
 
+  .timvir-s-jb2p0i {
+    font-family: inherit;
+  }
+
   .timvir-s-1p7i66b {
     font-family: system-ui, sans-serif;
   }
@@ -609,6 +629,10 @@ body {
     line-height: 1.725;
   }
 
+  .timvir-s-13xho20 {
+    line-height: 1.7333;
+  }
+
   .timvir-s-1ylh3l6 {
     line-height: 2.2;
   }
@@ -618,6 +642,7 @@ body {
   }
 
   .timvir-s-sgruip {
+    -webkit-mask-image: linear-gradient(#0000 0%, #0003 12px, #000 24px calc(100% - 24px), #0003 calc(100% - 12px), #0000 100%);
     mask-image: linear-gradient(#0000 0%, #0003 12px, #000 24px calc(100% - 24px), #0003 calc(100% - 12px), #0000 100%);
   }
 
@@ -1012,6 +1037,10 @@ body {
 }
 
 @layer priority2 {
+  .timvir-s-ln7xf2 {
+    font: inherit;
+  }
+
   .timvir-s-1t4wa6b {
     margin: 0 0 2rem;
   }
@@ -1028,6 +1057,10 @@ body {
     padding: 4px 6px 3px;
   }
 
+  .timvir-s-1whlmpv {
+    padding: 4px 6px;
+  }
+
   .timvir-s-12ek6fo {
     padding: 6px 13px;
   }
@@ -1046,6 +1079,10 @@ body {
     border-color: var(--timvir-border-color);
   }
 
+  .timvir-s-1cum3z5 {
+    border-radius: 2px;
+  }
+
   .timvir-s-1sxf85j {
     border-radius: 5px;
   }
@@ -1074,6 +1111,14 @@ body {
     grid-column: lex / rex;
   }
 
+  .timvir-s-1k49i25 {
+    margin-block: -4px;
+  }
+
+  .timvir-s-1a2a7pz {
+    outline: none;
+  }
+
   .timvir-s-ysyzu8 {
     overflow: auto;
   }
@@ -1085,6 +1130,10 @@ body {
   .timvir-s-2r93rw {
     transition: opacity.2s,transform.2s,visibility 0s var(--link-icon-visibility-delay, .2s);
   }
+
+  .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
+    border-color: var(--timvir-text-color);
+  }
 }
 
 @layer priority4 {
@@ -1100,6 +1149,10 @@ body {
     background-color: var(--code-background, var(--timvir-secondary-background-color));
   }
 
+  .timvir-s-1d0dlzq {
+    background-color: var(--timvir-secondary-background-color);
+  }
+
   .timvir-s-11p4203 {
     background-image: linear-gradient(#0000, #0000 5px, #383838 5px, #383838);
   }
@@ -1136,6 +1189,10 @@ body {
     color: var(--timvir-secondary-text-color);
   }
 
+  .timvir-s-1cdhzux {
+    color: var(--timvir-text-color);
+  }
+
   .timvir-s-1lliihq {
     display: block;
   }
@@ -1200,6 +1257,10 @@ body {
     line-height: 1.4706;
   }
 
+  .timvir-s-o5v014 {
+    line-height: 1;
+  }
+
   .timvir-s-vpkmg4 {
     opacity: .25;
   }
@@ -1232,7 +1293,19 @@ body {
     background-color: var(--c-p-0);
   }
 
-  .timvir-s-lan1bs:hover, .timvir-s-1k07x2j:active {
+  .timvir-s-1dc5b4e:hover {
+    background-color: var(--timvir-sidebar-highlight-color);
+  }
+
+  .timvir-s-lan1bs:hover {
+    background-image: linear-gradient(#0000, #0000 3px, #2bbc8a 3px, #2bbc8a);
+  }
+
+  .timvir-s-1bx2y69:active {
+    background-color: var(--timvir-sidebar-highlight-color);
+  }
+
+  .timvir-s-1k07x2j:active {
     background-image: linear-gradient(#0000, #0000 3px, #2bbc8a 3px, #2bbc8a);
   }