timvir 0.2.39 → 0.2.43

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # timvir
 
+## 0.2.43
+
+### Patch Changes
+
+- **Avoid cyclic dependencies between Timvir modules** ([#3482](https://github.com/timvir/timvir/pull/3482)) - Cyclic dependencies were causing broken styles at best, and a crash at worst.
+
+## 0.2.42
+
+### Patch Changes
+
+- **Fix broken release** ([#3473](https://github.com/timvir/timvir/pull/3473)) - No code changes.
+
+## 0.2.41
+
+### Patch Changes
+
+- **Fix broken release** ([#3471](https://github.com/timvir/timvir/pull/3471)) - No code changes.
+
+## 0.2.40
+
+### Patch Changes
+
+- **Remove peer dependency on @mdx-js/react** ([#3315](https://github.com/timvir/timvir/pull/3315)) - Timvir no longer wraps the page content with `<MDXProvider>`. Instead, Timvir provides a custom hook – `useArticleComponents` – for use in client components. If you're building server components though, you should prefer importing your custom components directly, and import Timvir builtins from the `timvir/builtins` module.
+- **Improve word wrapping behavior in article pages** ([#3429](https://github.com/timvir/timvir/pull/3429)) - Long words (for example long identifiers used in certain programming languages) no longer extend beyond the layout box. Instead, the browser will break the words when needed. Note that this change only applies inside the article page content. In other parts of the interface (eg. sidebar or navigation footer) Timvir continues to use text truncation with ellipsis for long words.
+- **Improve type of Page Link prop** ([#3330](https://github.com/timvir/timvir/pull/3330)) - The `Link` prop on the `<Page>` component is now type-compatible with the `<Link>` component from Next.js. This is not a breaking change, not at runtime anyways. There is a small chance that TypeScript will raise a type error. But it's more likely that you can remove a `as any` type cast if you currently use one.
+
 ## 0.2.39
 
 ### Patch Changes

package/blocks/Arbitrary/Arbitrary.d.ts

@@ -1,5 +1,5 @@
-import { Exhibit } from "timvir/blocks";
 import * as React from "react";
+import { Exhibit } from "timvir/blocks";
 /**
  * The underlying DOM element which is rendered by this component.
  */

package/blocks/Arbitrary/index.js

@@ -1,37 +1,170 @@
 'use client';
+import * as React from 'react';
 import { Exhibit } from 'timvir/blocks';
 import { useBlock } from 'timvir/core';
-import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/css.ts
+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;
+}
 
-// src/cx.ts
-var cx = function cx2() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
-  const atomicClasses = {};
-  const nonAtomicClasses = [];
-  presentClassNames.forEach((arg) => {
-    const individualClassNames = arg ? arg.split(" ") : [];
-    individualClassNames.forEach((className) => {
-      if (className.startsWith("atm_")) {
-        const [, keyHash] = className.split("_");
-        atomicClasses[keyHash] = className;
-      } else {
-        nonAtomicClasses.push(className);
-      }
+var styleq = {};
+var hasRequiredStyleq;
+function requireStyleq() {
+    if (hasRequiredStyleq) return styleq;
+    hasRequiredStyleq = 1;
+    Object.defineProperty(styleq, "__esModule", {
+        value: true
     });
-  });
-  const result = [];
-  for (const keyHash in atomicClasses) {
-    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
-      result.push(atomicClasses[keyHash]);
+    styleq.styleq = void 0;
+    var cache = new WeakMap();
+    var compiledKey = '$$css';
+    function createStyleq(options) {
+        var disableCache;
+        var disableMix;
+        var transform;
+        if (options != null) {
+            disableCache = options.disableCache === true;
+            disableMix = options.disableMix === true;
+            transform = options.transform;
+        }
+        return function styleq() {
+            var definedProperties = [];
+            var className = '';
+            var inlineStyle = null;
+            var debugString = '';
+            var nextCache = disableCache ? null : cache;
+            var styles = new Array(arguments.length);
+            for(var i = 0; i < arguments.length; i++){
+                styles[i] = arguments[i];
+            }
+            while(styles.length > 0){
+                var possibleStyle = styles.pop();
+                if (possibleStyle == null || possibleStyle === false) {
+                    continue;
+                }
+                if (Array.isArray(possibleStyle)) {
+                    for(var _i = 0; _i < possibleStyle.length; _i++){
+                        styles.push(possibleStyle[_i]);
+                    }
+                    continue;
+                }
+                var style = transform != null ? transform(possibleStyle) : possibleStyle;
+                if (style.$$css != null) {
+                    var classNameChunk = '';
+                    if (nextCache != null && nextCache.has(style)) {
+                        var cacheEntry = nextCache.get(style);
+                        if (cacheEntry != null) {
+                            classNameChunk = cacheEntry[0];
+                            debugString = cacheEntry[2];
+                            definedProperties.push.apply(definedProperties, cacheEntry[1]);
+                            nextCache = cacheEntry[3];
+                        }
+                    } else {
+                        var definedPropertiesChunk = [];
+                        for(var prop in style){
+                            var value = style[prop];
+                            if (prop === compiledKey) {
+                                var compiledKeyValue = style[prop];
+                                if (compiledKeyValue !== true) {
+                                    debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
+                                }
+                                continue;
+                            }
+                            if (typeof value === 'string' || value === null) {
+                                if (!definedProperties.includes(prop)) {
+                                    definedProperties.push(prop);
+                                    if (nextCache != null) {
+                                        definedPropertiesChunk.push(prop);
+                                    }
+                                    if (typeof value === 'string') {
+                                        classNameChunk += classNameChunk ? ' ' + value : value;
+                                    }
+                                }
+                            } else {
+                                console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+                            }
+                        }
+                        if (nextCache != null) {
+                            var weakMap = new WeakMap();
+                            nextCache.set(style, [
+                                classNameChunk,
+                                definedPropertiesChunk,
+                                debugString,
+                                weakMap
+                            ]);
+                            nextCache = weakMap;
+                        }
+                    }
+                    if (classNameChunk) {
+                        className = className ? classNameChunk + ' ' + className : classNameChunk;
+                    }
+                } else {
+                    if (disableMix) {
+                        if (inlineStyle == null) {
+                            inlineStyle = {};
+                        }
+                        inlineStyle = Object.assign({}, style, inlineStyle);
+                    } else {
+                        var subStyle = null;
+                        for(var _prop in style){
+                            var _value = style[_prop];
+                            if (_value !== undefined) {
+                                if (!definedProperties.includes(_prop)) {
+                                    if (_value != null) {
+                                        if (inlineStyle == null) {
+                                            inlineStyle = {};
+                                        }
+                                        if (subStyle == null) {
+                                            subStyle = {};
+                                        }
+                                        subStyle[_prop] = _value;
+                                    }
+                                    definedProperties.push(_prop);
+                                    nextCache = null;
+                                }
+                            }
+                        }
+                        if (subStyle != null) {
+                            inlineStyle = Object.assign(subStyle, inlineStyle);
+                        }
+                    }
+                }
+            }
+            var styleProps = [
+                className,
+                inlineStyle,
+                debugString
+            ];
+            return styleProps;
+        };
     }
-  }
-  result.push(...nonAtomicClasses);
-  return result.join(" ");
-};
-var cx_default = cx;
+    var styleq$1 = styleq.styleq = createStyleq();
+    styleq$1.factory = createStyleq;
+    return styleq;
+}
+var styleqExports = requireStyleq();
+function props(...styles) {
+    const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
+    const result = {};
+    if (className != null && className !== '') {
+        result.className = className;
+    }
+    if (style != null && Object.keys(style).length > 0) {
+        result.style = style;
+    }
+    if (dataStyleSrc != null && dataStyleSrc !== '') {
+        result['data-style-src'] = dataStyleSrc;
+    }
+    return result;
+}
 
 const bytesToHex = (() => {
   const s = Array.from({
@@ -89,17 +222,22 @@ function decode(output) {
   return new Uint8Array(bytes.reverse());
 }
 
+const layoutStyles = {
+  block: {
+    kBCFzs: "timvir-s-htle6",
+    k7Eaqz: "timvir-s-euugli",
+    kogj98: "timvir-s-1t4wa6b",
+    $$css: true
+  }};
+
 const Context = /*#__PURE__*/React.createContext({
   seed: 0
 });
 const useContext = () => React.useContext(Context);
 
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root = "div";
-function Arbitrary(props, ref) {
-  const block = useBlock(props);
+function Arbitrary(props$1, ref) {
+  const block = useBlock(props$1);
   const {
     ExhibitProps,
     className,
@@ -115,31 +253,45 @@ function Arbitrary(props, ref) {
     });
   }, []);
   React.useEffect(() => {
-    if (props.id) {
+    if (props$1.id) {
       block.bus.next({
         type: "SIGNAL",
-        path: `/dev/timvir/block/${props.id}`,
+        path: `/dev/timvir/block/${props$1.id}`,
         interface: "dev.timvir.block.Arbitrary",
         member: "seed",
         body: value.seed
       });
     }
-  }, [props.id, block.bus, value.seed]);
+  }, [props$1.id, block.bus, value.seed]);
+  const rootStyleProps = props(layoutStyles.block, styles.root);
+  const inputStyleProps = {
+    className: "timvir-s-c342km timvir-s-1a2a7pz timvir-s-ln7xf2 timvir-s-jbqb8w timvir-s-kh2ocl timvir-s-1717udv timvir-s-h8yej3 timvir-s-1heor9g"
+  };
   return /*#__PURE__*/jsx(Context.Provider, {
     value: value,
     children: /*#__PURE__*/jsxs(Root, {
       ref: ref,
-      className: cx_default("timvir-b-Arbitrary", classes.root, className),
       ...rest,
+      ...rootStyleProps,
+      className: cx("timvir-b-Arbitrary", rootStyleProps.className, className),
+      style: {
+        margin: "1em 0",
+        ...rootStyleProps.style,
+        ...rest.style
+      },
       children: [/*#__PURE__*/jsxs("div", {
-        className: classes.controls,
+        className: "timvir-s-rvj5dj timvir-s-d3ue5d timvir-s-9flyx0 timvir-s-1e56ztr",
         children: [/*#__PURE__*/jsxs("div", {
-          className: classes.textField,
+          className: "timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-qtkp2c timvir-s-u0aao5 timvir-s-1n2onr6 timvir-s-1d0dlzq timvir-s-1tcdsnd timvir-s-ieozyd timvir-s-1x824oc timvir-s-5l10my timvir-s-1op5qub timvir-s-1kx6eu5 timvir-s-hlrplc timvir-s-1dzvx6z timvir-s-lzy7x8 timvir-s-1edtgf2 timvir-s-18wp92t timvir-s-rlfy00",
           children: [/*#__PURE__*/jsx("span", {
-            className: classes.startAdornment,
+            className: "timvir-s-1rg5ohu timvir-s-vgvpxu timvir-s-15ku74s",
             children: "Seed:"
           }), /*#__PURE__*/jsx("input", {
-            className: cx_default("timvir-b-Arbitrary-seed", classes.input),
+            ...inputStyleProps,
+            className: cx("timvir-b-Arbitrary-seed", inputStyleProps.className),
+            style: {
+              ...inputStyleProps.style
+            },
             placeholder: "Seed",
             value: encode(new TextEncoder().encode(`${value.seed}`)),
             readOnly: true,
@@ -155,7 +307,7 @@ function Arbitrary(props, ref) {
           })]
         }), /*#__PURE__*/jsx("button", {
           type: "button",
-          className: classes.button,
+          className: "timvir-s-1a2a7pz timvir-s-u0aao5 timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1cum3z5 timvir-s-1d0dlzq timvir-s-1cdhzux timvir-s-ln7xf2 timvir-s-49kzi4 timvir-s-1dc5b4e timvir-s-13m658e timvir-s-1bx2y69",
           onClick: () => {
             setValue({
               seed: crypto.getRandomValues(new Uint32Array(1))[0]
@@ -165,19 +317,20 @@ function Arbitrary(props, ref) {
         })]
       }), /*#__PURE__*/jsx(Exhibit, {
         ...ExhibitProps,
+        style: {
+          margin: 0
+        },
         children: children
       })]
     })
   });
 }
 var Arbitrary$1 = /*#__PURE__*/React.forwardRef(Arbitrary);
-const classes = {
-  root: "r1ev38xg",
-  controls: "c8hz158",
-  textField: "t1663phv",
-  startAdornment: "s1k50njo",
-  input: "i1dajnne",
-  button: "b128wsn"
+const styles = {
+  root: {
+    kogj98: "timvir-s-9t3ola",
+    $$css: true
+  }
 };
 
 export { Arbitrary$1 as Arbitrary, useContext };

package/blocks/Arbitrary/styles.css

@@ -1,7 +1,223 @@
-.r1ev38xg{margin:1em 0;}
-.c8hz158{display:-ms-grid;display:grid;-ms-grid-gap:8px;grid-gap:8px;-ms-grid-columns:1fr 100px;grid-template-columns:1fr 100px;margin-bottom:8px;}
-.t1663phv{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;padding:0 0 0 10px;min-height:36px;position:relative;background:var(--timvir-secondary-background-color);}.t1663phv::after{display:block;position:absolute;content:"";inset:0;pointer-events:none;border:1px solid var(--timvir-border-color);border-radius:2px;}.t1663phv:hover::after{border-color:var(--timvir-text-color);}.t1663phv:focus-within::after{border-color:var(--timvir-text-color);}
-.s1k50njo{display:inline-block;color:var(--timvir-secondary-text-color);margin-right:6px;}
-.i1dajnne{border:none;outline:none;font:inherit;background:transparent;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:0;width:100%;color:inherit;}
-.b128wsn{border:none;outline:none;min-height:36px;border:1px solid var(--timvir-border-color);border-radius:2px;background:var(--timvir-secondary-background-color);color:var(--timvir-text-color);font:inherit;}.b128wsn:hover{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}.b128wsn:active{border-color:var(--timvir-text-color);background:var(--timvir-sidebar-highlight-color);}
+@layer priority1 {
+  .timvir-s-1f9b50e {
+    --timvir-margin: var(--timvir-page-margin);
+  }
 
+  .timvir-s-1hz7z82 {
+    --timvir-page-margin: 16px;
+  }
+
+  @media (width >= 48rem) {
+    .timvir-s-1i3za4p.timvir-s-1i3za4p {
+      --timvir-page-margin: 24px;
+    }
+  }
+}
+
+@layer priority2 {
+  .timvir-s-ln7xf2 {
+    font: inherit;
+  }
+
+  .timvir-s-1t4wa6b {
+    margin: 0 0 2rem;
+  }
+
+  .timvir-s-9t3ola {
+    margin: 1em 0;
+  }
+
+  .timvir-s-qtkp2c {
+    padding: 0 0 0 10px;
+  }
+
+  .timvir-s-1717udv {
+    padding: 0;
+  }
+
+  .timvir-s-1op5qub:after {
+    inset: 0;
+  }
+}
+
+@layer priority3 {
+  .timvir-s-j7gikm {
+    border-color: var(--timvir-border-color);
+  }
+
+  .timvir-s-1cum3z5 {
+    border-radius: 2px;
+  }
+
+  .timvir-s-1y0btm7 {
+    border-style: solid;
+  }
+
+  .timvir-s-c342km {
+    border-width: 0;
+  }
+
+  .timvir-s-mkeg23 {
+    border-width: 1px;
+  }
+
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+
+  .timvir-s-d3ue5d {
+    grid-gap: 8px;
+  }
+
+  .timvir-s-1a2a7pz {
+    outline: none;
+  }
+
+  .timvir-s-lzy7x8:after {
+    border-color: var(--timvir-border-color);
+  }
+
+  .timvir-s-18wp92t:hover:after, .timvir-s-rlfy00:focus-within:after {
+    border-color: var(--timvir-text-color);
+  }
+
+  .timvir-s-1edtgf2:after {
+    border-radius: 2px;
+  }
+
+  .timvir-s-1dzvx6z:after {
+    border-style: solid;
+  }
+
+  .timvir-s-hlrplc:after {
+    border-width: 1px;
+  }
+
+  .timvir-s-49kzi4:hover, .timvir-s-13m658e:active {
+    border-color: var(--timvir-text-color);
+  }
+}
+
+@layer priority4 {
+  .timvir-s-6s0dn4 {
+    align-items: center;
+  }
+
+  .timvir-s-kh2ocl {
+    align-self: stretch;
+  }
+
+  .timvir-s-jbqb8w {
+    background-color: #0000;
+  }
+
+  .timvir-s-1d0dlzq {
+    background-color: var(--timvir-secondary-background-color);
+  }
+
+  .timvir-s-1heor9g {
+    color: inherit;
+  }
+
+  .timvir-s-vgvpxu {
+    color: var(--timvir-secondary-text-color);
+  }
+
+  .timvir-s-1cdhzux {
+    color: var(--timvir-text-color);
+  }
+
+  .timvir-s-78zum5 {
+    display: flex;
+  }
+
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
+  .timvir-s-1rg5ohu {
+    display: inline-block;
+  }
+
+  .timvir-s-3xbxsf {
+    grid-auto-rows: min-content;
+  }
+
+  .timvir-s-12c0rpe {
+    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  }
+
+  .timvir-s-9flyx0 {
+    grid-template-columns: 1fr 100px;
+  }
+
+  .timvir-s-1n2onr6 {
+    position: relative;
+  }
+
+  .timvir-s-1tcdsnd {
+    word-break: initial;
+  }
+
+  .timvir-s-5l10my:after {
+    content: "";
+  }
+
+  .timvir-s-ieozyd:after {
+    display: block;
+  }
+
+  .timvir-s-1kx6eu5:after {
+    pointer-events: none;
+  }
+
+  .timvir-s-1x824oc:after {
+    position: absolute;
+  }
+
+  .timvir-s-1dc5b4e:hover, .timvir-s-1bx2y69:active {
+    background-color: var(--timvir-sidebar-highlight-color);
+  }
+
+  @media (width >= 72rem) {
+    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
+      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];
+    }
+  }
+
+  @media (width >= 48rem) {
+    .timvir-s-9q0i6z.timvir-s-9q0i6z {
+      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    }
+  }
+}
+
+@layer priority5 {
+  .timvir-s-1e56ztr {
+    margin-bottom: 8px;
+  }
+
+  .timvir-s-15ku74s {
+    margin-right: 6px;
+  }
+
+  .timvir-s-u0aao5 {
+    min-height: 36px;
+  }
+
+  .timvir-s-euugli {
+    min-width: 0;
+  }
+
+  .timvir-s-h8yej3 {
+    width: 100%;
+  }
+}

package/blocks/Code/Code.d.ts

@@ -14,12 +14,6 @@ interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
      * @default "markup"
      */
     language?: string;
-    /**
-     * When set, the code block spans the full width. Note that the text itself
-     * is still aligned with the main column. Use this when you expect the text
-     * to be wider than the center column.
-     */
-    fullWidth?: boolean;
     /**
      * The numbering starts at 1, ie. `highlightedLines={[1, 2]}` will highlight
      * the first two lines.

package/blocks/Code/docs/index.mdx

@@ -26,14 +26,3 @@ which are supported by [shiki](https://shiki.style/themes).
 <Code language="javascript" caption="The Hitchhiker's Guide to the Galaxy">
   {'const answer = 42;'}
 </Code>
-
-## Full-width
-
-Full-width code blocks provide more space for the code. They are not constrained to the center column.
-
-<Code language="javascript" fullWidth>
-  {`(defun csg-intersection-intersect-all (obj-a obj-b)
-   (lambda (ray)
-     (flet ((inside-p (obj) (lambda (d) (inside-p obj (ray-point ray d)))))
-       (merge 'fvector (remove-if-not (inside-p obj-b) (intersect-all obj-a ray)) (remove-if-not (inside-p obj-a) (intersect-all obj-b ray)) #'<))))`}
-</Code>