timvir 0.2.38 → 0.2.42

package/blocks/Viewport/index.js

@@ -1,84 +1,220 @@
 'use client';
-import { useBlock, fullWidth } from 'timvir/core';
-import { useResizeObserverEntry, useResizeObserver } from 'timvir/hooks';
 import * as React from 'react';
-import { useMDXComponents } from '@mdx-js/react';
-import * as builtins from 'timvir/builtins';
-import { Code } from 'timvir/blocks';
+import { useArticleComponents, useBlock, layoutStyles } from 'timvir/core';
+import { useResizeObserverEntry, useResizeObserver } from 'timvir/hooks';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as Icons from 'react-feather';
+import { Code } from 'timvir/blocks';
 
-// 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;
+}
 
 function Caption(props) {
-  const components = {
-    ...builtins,
-    ...useMDXComponents()
-  };
+  const components = useArticleComponents();
   const {
     src,
     code
   } = props;
   const [codeRef, setCodeRef] = React.useState(null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("figcaption", {
-    className: "fgdj0yb"
-  }, /*#__PURE__*/React.createElement("div", null, "Source:", " ", /*#__PURE__*/React.createElement(components.a, {
-    href: src,
-    target: "_blank"
-  }, src)), code && /*#__PURE__*/React.createElement("div", {
-    className: "d1rc4zjh",
-    onClick: () => {
-      if (codeRef) {
-        const infoParent = codeRef.parentElement;
-        if (infoParent.style.height === "0px") {
-          infoParent.style.height = `${codeRef.getBoundingClientRect().height}px`;
-          infoParent.style.opacity = "1";
-        } else {
-          infoParent.style.height = "0px";
-          infoParent.style.opacity = "0";
-        }
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Icons.Code, {
-    size: "1.6em"
-  }))), code && /*#__PURE__*/React.createElement("div", {
-    className: cx_default("d1enfo6"),
-    style: {
-      height: 0,
-      opacity: 0
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: setCodeRef,
-    className: cx_default("d1watfn6")
-  }, /*#__PURE__*/React.createElement(Code, {
-    language: "jsx"
-  }, code))));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("figcaption", {
+      className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-uxw1ft timvir-s-78zum5 timvir-s-1qughib timvir-s-6s0dn4",
+      children: [/*#__PURE__*/jsxs("div", {
+        children: ["Source:", " ", /*#__PURE__*/jsx(components.a, {
+          href: src,
+          target: "_blank",
+          children: src
+        })]
+      }), code && /*#__PURE__*/jsx("div", {
+        className: "timvir-s-1ypdohk timvir-s-gmrl4 timvir-s-1o7uuvo",
+        onClick: () => {
+          if (codeRef) {
+            const infoParent = codeRef.parentElement;
+            if (infoParent.style.height === "0px") {
+              infoParent.style.height = `${codeRef.getBoundingClientRect().height}px`;
+              infoParent.style.opacity = "1";
+            } else {
+              infoParent.style.height = "0px";
+              infoParent.style.opacity = "0";
+            }
+          }
+        },
+        children: /*#__PURE__*/jsx(Icons.Code, {
+          size: "1.6em",
+          className: "timvir-s-1lliihq"
+        })
+      })]
+    }), code && /*#__PURE__*/jsx("div", {
+      className: "timvir-s-b3r6kr timvir-s-104cjix timvir-s-qtp20y timvir-s-g01cxk",
+      children: /*#__PURE__*/jsx("div", {
+        ref: setCodeRef,
+        className: "timvir-s-14vqqas",
+        children: /*#__PURE__*/jsx(Code, {
+          language: "jsx",
+          children: code
+        })
+      })
+    })]
+  });
 }
 var Caption$1 = /*#__PURE__*/React.memo(Caption);
 
@@ -89,8 +225,8 @@ function Handle(props) {
     edge,
     iframeRef
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "d1mmz2b6",
+  return /*#__PURE__*/jsx("div", {
+    className: "timvir-s-diuk5s timvir-s-1ypdohk timvir-s-78zum5 timvir-s-6s0dn4 timvir-s-l56j7k timvir-s-byyjgo timvir-s-1cdhzux timvir-s-1cum3z5 timvir-s-blhjk6 timvir-s-1o7uuvo timvir-s-10xrfx7 timvir-s-1kpm4h4",
     onMouseDown: () => {
       lock.current = edge;
       if (iframeRef.current) {
@@ -100,15 +236,17 @@ function Handle(props) {
     },
     style: {
       gridColumn
-    }
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "56",
-    height: "56",
-    viewBox: "0 0 56 56"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M27 18h2v20h-2V18zm-6 0h2v20h-2V18zm12 0h2v20h-2V18z"
-  })));
+    },
+    children: /*#__PURE__*/jsx("svg", {
+      width: "56",
+      height: "56",
+      viewBox: "0 0 56 56",
+      children: /*#__PURE__*/jsx("path", {
+        fill: "currentColor",
+        d: "M27 18h2v20h-2V18zm-6 0h2v20h-2V18zm12 0h2v20h-2V18z"
+      })
+    })
+  });
 }
 var Handle$1 = /*#__PURE__*/React.memo(Handle);
 
@@ -118,38 +256,36 @@ function Ruler(props) {
     containerWidth = 0,
     viewportWidth = 0
   } = props;
-  return /*#__PURE__*/React.createElement("svg", {
-    viewBox: `-${containerWidth / 2} ${ -16 / 2} ${containerWidth} ${height}`,
-    className: "ssl4j8q"
-  }, /*#__PURE__*/React.createElement("rect", {
-    x: -containerWidth / 2,
-    y: -16 / 2,
-    width: containerWidth,
-    height: height,
-    fill: "var(--timvir-secondary-background-color)"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: -viewportWidth / 2,
-    x2: -viewportWidth / 2,
-    y1: -16 / 2,
-    y2: height / 2,
-    strokeWidth: 2,
-    stroke: "var(--timvir-text-color)"
-  }), /*#__PURE__*/React.createElement("line", {
-    x1: viewportWidth / 2,
-    x2: viewportWidth / 2,
-    y1: -16 / 2,
-    y2: height / 2,
-    strokeWidth: 2,
-    stroke: "var(--timvir-text-color)"
-  }));
+  return /*#__PURE__*/jsxs("svg", {
+    viewBox: `-${containerWidth / 2} ${-height / 2} ${containerWidth} ${height}`,
+    className: "timvir-s-h8yej3 timvir-s-1lliihq timvir-s-lup9mm timvir-s-14kudrl",
+    children: [/*#__PURE__*/jsx("rect", {
+      x: -containerWidth / 2,
+      y: -height / 2,
+      width: containerWidth,
+      height: height,
+      fill: "var(--timvir-secondary-background-color)"
+    }), /*#__PURE__*/jsx("line", {
+      x1: -viewportWidth / 2,
+      x2: -viewportWidth / 2,
+      y1: -height / 2,
+      y2: height / 2,
+      strokeWidth: 2,
+      stroke: "var(--timvir-text-color)"
+    }), /*#__PURE__*/jsx("line", {
+      x1: viewportWidth / 2,
+      x2: viewportWidth / 2,
+      y1: -height / 2,
+      y2: height / 2,
+      strokeWidth: 2,
+      stroke: "var(--timvir-text-color)"
+    })]
+  });
 }
 
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root = "div";
-function Viewport(props, ref) {
-  const block = useBlock(props);
+function Viewport(props$1, ref) {
+  const block = useBlock(props$1);
   const {
     src,
     code,
@@ -159,16 +295,6 @@ function Viewport(props, ref) {
   const [state, setState] = React.useState({
     settled: false
   });
-
-  /*
-   * The container measures the width of the main column. It is used to initialize
-   * the default width.
-   */
-  const [containerRef, containerROE] = useResizeObserverEntry();
-
-  /*
-   * The SVG spans across the full width. It is used to restrict the max width.
-   */
   const [svgRef, svgROE] = useResizeObserverEntry();
   const [height, setHeight] = React.useState(undefined);
   const [maxHeight, setMaxHeight] = React.useState(undefined);
@@ -182,7 +308,7 @@ function Viewport(props, ref) {
         setWidth(max);
       }
     }
-  }, [containerROE, svgROE, setWidth, width]);
+  }, [svgROE, width]);
   const lock = React.useRef("");
   const iframeRef = React.useRef(null);
   React.useEffect(() => {
@@ -217,127 +343,124 @@ function Viewport(props, ref) {
     setHeight(height);
     setMaxHeight(Math.max(height, maxHeight ?? 0));
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
-  }), /*#__PURE__*/React.createElement(Root, {
-    ref: ref,
-    ...rest,
-    className: cx_default("timvir-b-Viewport", !state.settled && "timvir-unsettled", className, fullWidth, "r1ouu0bc")
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: svgRef,
-    className: "d1uj09ka"
-  }, /*#__PURE__*/React.createElement(Ruler, {
-    containerWidth: svgROE?.contentRect.width,
-    viewportWidth: width
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "d2uawyc"
-  }, width, "px")), /*#__PURE__*/React.createElement("div", {
-    className: "d8ms9m9"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "d17q9rbm"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cx_default("daubpa6", height === undefined && "d1d22s19"),
-    style: {
-      width,
-      height
-    }
-  }, /*#__PURE__*/React.createElement("iframe", {
-    ref: iframeRef,
-    frameBorder: "0",
-    src: src,
-    onLoad: ev => {
-      const document = ev.currentTarget.contentDocument;
-      if (!document) {
-        console.warn(`Viewport: iframe has no contentDocument`);
-        return;
+  const rootStyleProps = props(layoutStyles.block, layoutStyles.fullWidth, styles.root);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Root, {
+      ref: ref,
+      ...rest,
+      className: cx("timvir-b-Viewport", !state.settled && "timvir-unsettled", className, rootStyleProps.className),
+      style: {
+        ...rootStyleProps.style,
+        ...rest.style
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        ref: svgRef,
+        className: "timvir-s-1n2onr6",
+        children: [/*#__PURE__*/jsx(Ruler, {
+          containerWidth: svgROE?.contentRect.width,
+          viewportWidth: width
+        }), /*#__PURE__*/jsxs("div", {
+          className: "timvir-s-10l6tqk timvir-s-wa60dl timvir-s-1nrll8i timvir-s-11lhmoz timvir-s-ss6m8b",
+          children: [width, "px"]
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: "timvir-s-78zum5 timvir-s-1qjc9v5 timvir-s-l56j7k",
+        children: /*#__PURE__*/jsx("div", {
+          children: /*#__PURE__*/jsxs("div", {
+            className: "timvir-s-18zih8k timvir-s-rvj5dj timvir-s-7tmw4v timvir-s-yy29n5 timvir-s-jv0b96",
+            children: [/*#__PURE__*/jsx("div", {
+              ...{
+                0: {
+                  className: "timvir-s-wonfvy timvir-s-w75i6v timvir-s-1n2onr6 timvir-s-98rzlu timvir-s-pyat2d timvir-s-1h3vnj2 timvir-s-10r4kp7 timvir-s-b3r6kr"
+                },
+                1: {
+                  className: "timvir-s-wonfvy timvir-s-w75i6v timvir-s-1n2onr6 timvir-s-98rzlu timvir-s-pyat2d timvir-s-10r4kp7 timvir-s-b3r6kr timvir-s-1c74tu6 timvir-s-10e4vud timvir-s-a4qsjk timvir-s-1bx2yh timvir-s-1esw782 timvir-s-dftl3q timvir-s-9ncquh timvir-s-1w911z timvir-s-1nj7uno"
+                }
+              }[!!(height === undefined) << 0],
+              style: {
+                width,
+                height
+              },
+              children: /*#__PURE__*/jsx("iframe", {
+                ref: iframeRef,
+                frameBorder: "0",
+                src: src,
+                onLoad: ev => {
+                  const document = ev.currentTarget.contentDocument;
+                  if (!document) {
+                    console.warn("Viewport: iframe has no contentDocument");
+                    return;
+                  }
+                  const initializeDocument = () => {
+                    if (document.readyState === "complete") {
+                      {
+                        const style = document.createElement("style");
+                        style.id = "timvir-viewport-style";
+                        style.innerHTML = "body { margin: 0 }";
+                        document.head.appendChild(style);
+                      }
+                      {
+                        const {
+                          height
+                        } = document.body.getBoundingClientRect();
+                        setHeight(height);
+                        setMaxHeight(height);
+                      }
+                      iframeRO.observe(document.body);
+                      setTimeout(() => {
+                        setState({
+                          settled: true
+                        });
+                      }, 50);
+                    } else {
+                      document?.addEventListener("readystatechange", initializeDocument, {
+                        once: true
+                      });
+                    }
+                  };
+                  initializeDocument();
+                },
+                className: "timvir-s-1lliihq timvir-s-10l6tqk timvir-s-13vifvy timvir-s-u96u03 timvir-s-h8yej3 timvir-s-5yr21d timvir-s-1pl5831",
+                style: {
+                  opacity: height === undefined ? 0 : 1,
+                  pointerEvents: height === undefined ? "none" : undefined
+                }
+              })
+            }), /*#__PURE__*/jsx(Handle$1, {
+              gridColumn: "1",
+              lock: lock,
+              edge: "left",
+              iframeRef: iframeRef
+            }), /*#__PURE__*/jsx(Handle$1, {
+              gridColumn: "3",
+              lock: lock,
+              edge: "right",
+              iframeRef: iframeRef
+            })]
+          })
+        })
+      }), /*#__PURE__*/jsx(Ruler, {
+        containerWidth: svgROE?.contentRect.width,
+        viewportWidth: width
+      })]
+    }), /*#__PURE__*/jsx(Caption$1, {
+      src: src,
+      code: code
+    }), /*#__PURE__*/jsx("div", {
+      style: {
+        height: (maxHeight ?? 0) - (height ?? 0),
+        transition: "height 0.16s"
       }
-
-      /*
-       * Some browsers (notably Firefox) don't always fully initialize the <iframe>
-       * element (see https://bugzilla.mozilla.org/show_bug.cgi?id=1191683). The
-       * 'head' and 'body' properties in Document (which we access below) may be null
-       * when this onLoad callback runs.
-       *
-       * We use the Document readyState to decide if we can interact and observe the
-       * DOM.
-       */
-
-      const initializeDocument = () => {
-        if (document.readyState === "complete") {
-          /*
-           * Inject a simple style reset into the document.
-           */
-          {
-            const style = document.createElement("style");
-            style.id = "timvir-viewport-style";
-            style.innerHTML = "body { margin: 0 }";
-            document.head.appendChild(style);
-          }
-          {
-            const {
-              height
-            } = document.body.getBoundingClientRect();
-            setHeight(height);
-            setMaxHeight(height);
-          }
-
-          /*
-           * The <body> element of the iframe document is the one which we observe and
-           * measure. It should not have any margins (we remove them by injecting a simple
-           * style reset into the iframe document).
-           */
-          iframeRO.observe(document.body);
-
-          /*
-           * 50ms after the iframe document is complete, we consider the Viewport block
-           * settled. This time includes the 16ms CSS transition time, and a tiny bit more
-           * to allow for the content in the iframe itself to finish rendering.
-           *
-           * This time is not quite enough if the iframe loads additional code or needs to
-           * load data from a remote source. But should be enough for statically rendered
-           * content.
-           */
-          setTimeout(() => {
-            setState({
-              settled: true
-            });
-          }, 50);
-        } else {
-          document?.addEventListener("readystatechange", initializeDocument, {
-            once: true
-          });
-        }
-      };
-      initializeDocument();
-    },
-    className: "i11uos8q",
-    style: {
-      opacity: height === undefined ? 0 : 1,
-      pointerEvents: height === undefined ? "none" : undefined
-    }
-  })), /*#__PURE__*/React.createElement(Handle$1, {
-    gridColumn: "1",
-    lock: lock,
-    edge: "left",
-    iframeRef: iframeRef
-  }), /*#__PURE__*/React.createElement(Handle$1, {
-    gridColumn: "3",
-    lock: lock,
-    edge: "right",
-    iframeRef: iframeRef
-  })))), /*#__PURE__*/React.createElement(Ruler, {
-    containerWidth: svgROE?.contentRect.width,
-    viewportWidth: width
-  })), /*#__PURE__*/React.createElement(Caption$1, {
-    src: src,
-    code: code
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: (maxHeight ?? 0) - (height ?? 0),
-      transition: "height 0.16s"
-    }
-  }));
+    })]
+  });
 }
 var Viewport$1 = /*#__PURE__*/React.forwardRef(Viewport);
+const styles = {
+  root: {
+    ktR8K2: "timvir-s-1vjgj0v",
+    k1K539: "timvir-s-at24cr",
+    $$css: true
+  }
+};
 
 export { Viewport$1 as Viewport };

package/blocks/Viewport/internal/Caption.d.ts

@@ -3,6 +3,6 @@ interface Props {
     src: string;
     code?: string;
 }
-declare function Caption(props: Props): React.JSX.Element;
+declare function Caption(props: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Caption>;
 export default _default;