timvir 0.2.38 → 0.2.42

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

@@ -5,6 +5,6 @@ interface Props {
     edge: "left" | "right";
     iframeRef: React.RefObject<null | HTMLIFrameElement>;
 }
-declare function Handle(props: Props): React.JSX.Element;
+declare function Handle(props: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Handle>;
 export default _default;

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

@@ -1,7 +1,6 @@
-import * as React from "react";
 interface Props {
     containerWidth?: number;
     viewportWidth?: number;
 }
-declare function Ruler(props: Props): React.JSX.Element;
+declare function Ruler(props: Props): import("react/jsx-runtime").JSX.Element;
 export default Ruler;

package/blocks/Viewport/samples/basic.d.ts

@@ -1,2 +1 @@
-import * as React from "react";
-export default function Sample(): React.JSX.Element;
+export default function Sample(): import("react/jsx-runtime").JSX.Element;

package/blocks/Viewport/styles.css

@@ -1,18 +1,263 @@
-.fgdj0yb{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);white-space:nowrap;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.d1rc4zjh{cursor:pointer;}.d1rc4zjh:hover{color:var(--c-p-4);opacity:1;}.d1rc4zjh>svg{display:block;}
-.d1enfo6{overflow:hidden;-webkit-transition:height 0.2s,opacity 0.2s 0.1s;transition:height 0.2s,opacity 0.2s 0.1s;}
-.d1watfn6{margin-top:12px;}
+@layer priority1;
 
-.d1mmz2b6{-ms-grid-row:1;-ms-grid-row-span:3;grid-row:1/span 3;cursor:pointer;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;opacity:0.5;color:var(--timvir-text-color);border-radius:2px;-webkit-transition:all 0.2s cubic-bezier(0.4, 1, 0.75, 0.9);transition:all 0.2s cubic-bezier(0.4, 1, 0.75, 0.9);}.d1mmz2b6:hover{opacity:1;box-shadow:0 0 0 1px rgba(16, 22, 26, 0.1),0 2px 4px rgba(16, 22, 26, 0.2),0 8px 24px rgba(16, 22, 26, 0.2);}.d1mmz2b6:active{box-shadow:0 0 0 1px rgba(16, 22, 26, 0.1),0 0 0 rgba(16, 22, 26, 0),0 1px 1px rgba(16, 22, 26, 0.2);}
+@layer priority2 {
+  .timvir-s-14kudrl {
+    margin: 8px 0;
+  }
+}
 
-.ssl4j8q{width:100%;display:block;height:16px;margin:8px 0;}
+@layer priority3 {
+  .timvir-s-1nj7uno {
+    border-radius: 1px;
+  }
 
-.r1ouu0bc{contain:layout;margin-bottom:0;}
-.d1uj09ka{position:relative;}
-.d2uawyc{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);font-variant-numeric:tabular-nums;}
-.d8ms9m9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
-.d17q9rbm{border-radius:3px;display:-ms-grid;display:grid;-ms-grid-columns:56px auto 56px;grid-template-columns:56px auto 56px;-ms-grid-rows:0 auto 0;grid-template-rows:0 auto 0;-ms-grid-column-gap:8px;grid-column-gap:8px;}
-.daubpa6{-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2/span 1;-ms-grid-row:2;-ms-grid-row-span:1;grid-row:2/span 1;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;height:100px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);-webkit-transition:height 0.16s;transition:height 0.16s;overflow:hidden;}
-.d1d22s19{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:shimmer-d1d22s19;animation-name:shimmer-d1d22s19;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-background-size:150vw 100px;background-size:150vw 100px;background-image:linear-gradient(to right, #fafafa 0%, #f4f4f4 25%, #fafafa 40%);box-shadow:inset 0 0 0 1px rgba(16, 22, 26, 0.2);border-radius:1px;}@-webkit-keyframes shimmer-d1d22s19{0%{-webkit-background-position:-60vw 0;background-position:-60vw 0;}40%{-webkit-background-position:85vw 0;background-position:85vw 0;}100%{-webkit-background-position:85vw 0;background-position:85vw 0;}}@keyframes shimmer-d1d22s19{0%{-webkit-background-position:-60vw 0;background-position:-60vw 0;}40%{-webkit-background-position:85vw 0;background-position:85vw 0;}100%{-webkit-background-position:85vw 0;background-position:85vw 0;}}
-.i11uos8q{display:block;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;}
+  .timvir-s-1cum3z5 {
+    border-radius: 2px;
+  }
 
+  .timvir-s-18zih8k {
+    border-radius: 3px;
+  }
+
+  .timvir-s-98rzlu {
+    flex: 1;
+  }
+
+  .timvir-s-wonfvy {
+    grid-column: 2 / span 1;
+  }
+
+  .timvir-s-diuk5s {
+    grid-row: 1 / span 3;
+  }
+
+  .timvir-s-w75i6v {
+    grid-row: 2 / span 1;
+  }
+
+  .timvir-s-b3r6kr {
+    overflow: hidden;
+  }
+
+  .timvir-s-blhjk6 {
+    transition: all .2s cubic-bezier(.4, 1, .75, .9);
+  }
+
+  .timvir-s-10r4kp7 {
+    transition: height .16s;
+  }
+
+  .timvir-s-104cjix {
+    transition: height .2s, opacity .2s .1s;
+  }
+
+  .timvir-s-1pl5831 {
+    transition: opacity .2s;
+  }
+}
+
+@layer priority4 {
+  .timvir-s-6s0dn4 {
+    align-items: center;
+  }
+
+  .timvir-s-1qjc9v5 {
+    align-items: stretch;
+  }
+
+  .timvir-s-1c74tu6 {
+    animation-duration: 2s;
+  }
+
+  .timvir-s-10e4vud {
+    animation-fill-mode: forwards;
+  }
+
+  .timvir-s-a4qsjk {
+    animation-iteration-count: infinite;
+  }
+
+  .timvir-s-1bx2yh {
+    animation-name: timvir-s-iar28k-B;
+  }
+
+  .timvir-s-1esw782 {
+    animation-timing-function: linear;
+  }
+
+  .timvir-s-9ncquh {
+    background-image: linear-gradient(to right, #fafafa 0%, #f4f4f4 25%, #fafafa 40%);
+  }
+
+  .timvir-s-1h3vnj2 {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=");
+  }
+
+  .timvir-s-dftl3q {
+    background-size: 150vw 100px;
+  }
+
+  .timvir-s-1w911z {
+    box-shadow: inset 0 0 0 1px #10161a33;
+  }
+
+  .timvir-s-vgvpxu {
+    color: var(--timvir-secondary-text-color);
+  }
+
+  .timvir-s-1cdhzux {
+    color: var(--timvir-text-color);
+  }
+
+  .timvir-s-1vjgj0v {
+    contain: layout;
+  }
+
+  .timvir-s-1ypdohk {
+    cursor: pointer;
+  }
+
+  .timvir-s-1lliihq {
+    display: block;
+  }
+
+  .timvir-s-78zum5 {
+    display: flex;
+  }
+
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
+  .timvir-s-1dcheo9 {
+    font-size: .8125rem;
+  }
+
+  .timvir-s-ss6m8b {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .timvir-s-jv0b96 {
+    grid-column-gap: 8px;
+  }
+
+  .timvir-s-7tmw4v {
+    grid-template-columns: 56px auto 56px;
+  }
+
+  .timvir-s-yy29n5 {
+    grid-template-rows: 0 auto 0;
+  }
+
+  .timvir-s-l56j7k {
+    justify-content: center;
+  }
+
+  .timvir-s-1qughib {
+    justify-content: space-between;
+  }
+
+  .timvir-s-jkpybl {
+    line-height: 1.1875;
+  }
+
+  .timvir-s-byyjgo {
+    opacity: .5;
+  }
+
+  .timvir-s-g01cxk {
+    opacity: 0;
+  }
+
+  .timvir-s-10l6tqk {
+    position: absolute;
+  }
+
+  .timvir-s-1n2onr6 {
+    position: relative;
+  }
+
+  .timvir-s-11lhmoz {
+    transform: translate(-50%, -50%);
+  }
+
+  .timvir-s-uxw1ft {
+    white-space: nowrap;
+  }
+
+  .timvir-s-10xrfx7:hover {
+    box-shadow: 0 0 0 1px #10161a1a, 0 2px 4px #10161a33, 0 8px 24px #10161a33;
+  }
+
+  .timvir-s-gmrl4:hover {
+    color: var(--c-p-4);
+  }
+
+  .timvir-s-1o7uuvo:hover {
+    opacity: 1;
+  }
+
+  .timvir-s-1kpm4h4:active {
+    box-shadow: 0 0 0 1px #10161a1a, 0 0 #10161a00, 0 1px 1px #10161a33;
+  }
+}
+
+@layer priority5 {
+  .timvir-s-qtp20y {
+    height: 0;
+  }
+
+  .timvir-s-5yr21d {
+    height: 100%;
+  }
+
+  .timvir-s-pyat2d {
+    height: 100px;
+  }
+
+  .timvir-s-lup9mm {
+    height: 16px;
+  }
+
+  .timvir-s-u96u03 {
+    left: 0;
+  }
+
+  .timvir-s-1nrll8i {
+    left: 50%;
+  }
+
+  .timvir-s-at24cr {
+    margin-bottom: 0;
+  }
+
+  .timvir-s-14vqqas {
+    margin-top: 12px;
+  }
+
+  .timvir-s-13vifvy {
+    top: 0;
+  }
+
+  .timvir-s-wa60dl {
+    top: 50%;
+  }
+
+  .timvir-s-h8yej3 {
+    width: 100%;
+  }
+}
+
+@keyframes timvir-s-iar28k-B {
+  0% {
+    background-position: -60vw 0;
+  }
+
+  40% {
+    background-position: 85vw 0;
+  }
+
+  100% {
+    background-position: 85vw 0;
+  }
+}

package/blocks/WebLink/index.js

@@ -1,46 +1,177 @@
 'use client';
 import * as React from 'react';
-import { useContext } from 'timvir/core';
+import { useContext, layoutStyles } from 'timvir/core';
+import { jsxs, jsx, Fragment } 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;
+}
 
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root = "a";
-function WebLink(props, ref) {
+function WebLink(props$1, ref) {
   const {
     url,
     className,
     ...rest
-  } = props;
+  } = props$1;
   const [state, setState] = React.useState({
     settled: false,
     metadata: undefined
@@ -55,47 +186,71 @@ function WebLink(props, ref) {
         metadata: metadata
       });
     });
-  }, [url]);
+  }, [unfurl, url]);
   const metadata = state.metadata;
   const image = metadata?.open_graph?.images?.[0]?.url;
-  return /*#__PURE__*/React.createElement(Root, {
+  const rootStyleProps = props(layoutStyles.block, styles.root);
+  return /*#__PURE__*/jsxs(Root, {
     ref: ref,
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: cx_default("timvir-b-WebLink", !state.settled && "timvir-unsettled", className, classes.root),
-    ...rest
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.text
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.title
-  }, metadata?.open_graph?.title ?? metadata?.title ?? /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0")), /*#__PURE__*/React.createElement("div", {
-    className: classes.description
-  }, metadata?.open_graph?.description ?? metadata?.description), /*#__PURE__*/React.createElement("div", {
-    className: classes.url
-  }, /*#__PURE__*/React.createElement("img", {
+    ...rest,
+    ...rootStyleProps,
+    className: cx("timvir-b-WebLink", !state.settled && "timvir-unsettled", className, rootStyleProps.className),
     style: {
-      opacity: metadata?.favicon ? 1 : 0
+      ...rootStyleProps.style,
+      ...rest.style
     },
-    className: classes.favicon,
-    src: metadata?.favicon
-  }), /*#__PURE__*/React.createElement("div", null, metadata ? url : null))), image && /*#__PURE__*/React.createElement("div", {
-    className: classes.imageContainer
-  }, /*#__PURE__*/React.createElement("img", {
-    className: classes.image,
-    src: image
-  })));
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "timvir-s-1fvrxw4 timvir-s-hkrif2 timvir-s-euugli",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "timvir-s-1cdhzux timvir-s-uxw1ft timvir-s-b3r6kr timvir-s-lyipyv timvir-s-jwf9q1 timvir-s-zueoph",
+        children: metadata?.open_graph?.title ?? metadata?.title ?? /*#__PURE__*/jsx(Fragment, {
+          children: "\xA0"
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "timvir-s-boafo0 timvir-s-1vbrtjm timvir-s-vgvpxu timvir-s-1ehw58o timvir-s-b3r6kr",
+        children: metadata?.open_graph?.description ?? metadata?.description
+      }), /*#__PURE__*/jsxs("div", {
+        className: "timvir-s-14vqqas timvir-s-78zum5 timvir-s-boafo0 timvir-s-l2ypbo timvir-s-1cdhzux timvir-s-uxw1ft timvir-s-b3r6kr timvir-s-lyipyv",
+        children: [/*#__PURE__*/jsx("img", {
+          className: "timvir-s-cdlrvm timvir-s-1l36t39 timvir-s-gomdpo timvir-s-15ku74s",
+          style: {
+            opacity: metadata?.favicon ? 1 : 0
+          },
+          src: metadata?.favicon
+        }), /*#__PURE__*/jsx("div", {
+          children: metadata ? url : null
+        })]
+      })]
+    }), image && /*#__PURE__*/jsx("div", {
+      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
+      })
+    })]
+  });
 }
 var WebLink$1 = /*#__PURE__*/React.forwardRef(WebLink);
-const classes = {
-  root: "r1szx90n",
-  text: "tywhumj",
-  title: "t1sni99u",
-  description: "d7eo497",
-  url: "u1rlrpoc",
-  favicon: "f1cqi3na",
-  imageContainer: "igksd61",
-  image: "i1gibb8w"
+const styles = {
+  root: {
+    kmkexE: "timvir-s-zhuw26",
+    kMzoRj: "timvir-s-mkeg23",
+    ksu8eU: "timvir-s-1y0btm7",
+    kVAM5u: "timvir-s-j7gikm",
+    kWkggS: "timvir-s-1d0dlzq",
+    kaIpWk: "timvir-s-18zih8k",
+    k1xSpc: "timvir-s-78zum5",
+    kkrTdU: "timvir-s-1ypdohk",
+    kybGjl: "timvir-s-1hl2dhg",
+    kaVNsj: "timvir-s-49kzi4",
+    kGzVvX: "timvir-s-1dc5b4e",
+    kSVDLA: "timvir-s-13m658e",
+    kSReZ0: "timvir-s-1bx2y69",
+    $$css: true
+  }
 };
 async function defaultUnfurl(url) {
   return fetch(`https://timvir.vercel.app/api/unfurl?url=${encodeURIComponent(url)}`).then(res => res.json());

package/blocks/WebLink/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { WebLink } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof WebLink>>;
-export default function Sample(props: Props): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};