timvir 0.1.42

package/blocks/Viewport/index.js

@@ -0,0 +1,322 @@
+import { useBlock, fullWidth } from 'timvir/core';
+import { useResizeObserverEntry, useResizeObserver } from 'timvir/hooks';
+import * as React from 'react';
+import { useMDXComponents } from '@mdx-js/react';
+import { Code } from 'timvir/blocks';
+import * as Icons from 'react-feather';
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If arguments provided are objects, these objects are merged together, and the values are taken as class names:
+ *
+ * ```js
+ *  cx({ color: 'class1', textDecoration: 'class2'}, { color: 'class3' }) // returns `class3 class2`
+ * ```
+ *
+ * @returns the combined, space separated class names that can be applied directly to the class attribute
+ */
+const cx = function cx() {
+  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean); // In the basic case, `cx` is passed all strings, and we simply need to join them together with space separators
+
+  const classNamesResult = presentClassNames.filter(arg => typeof arg !== 'object'); // There might also be objects (eg. from the atomic API) such as cx('foo', {
+  // key1: 'bar', key2: 'fizz'}, { key1: 'buzz' }) the desired behavior is to
+  // deduplicate the values based on their properties. The object's values are
+  // the class names
+
+  const styleCollectionResult = Object.values(Object.assign({}, ...presentClassNames.filter(arg => typeof arg === 'object')));
+  return [...styleCollectionResult, ...classNamesResult].join(' ');
+};
+
+function Caption(props) {
+  const components = {
+    a: "a",
+    ...useMDXComponents()
+  };
+  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("d1enfo6"),
+    style: {
+      height: 0,
+      opacity: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: setCodeRef,
+    className: cx("d1watfn6")
+  }, /*#__PURE__*/React.createElement(Code, {
+    language: "jsx"
+  }, code))));
+}
+
+var Caption$1 = /*#__PURE__*/React.memo(Caption);
+
+function Handle(props) {
+  const {
+    gridColumn,
+    lock,
+    edge,
+    iframeRef
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "d1mmz2b6",
+    onMouseDown: () => {
+      lock.current = edge;
+
+      if (iframeRef.current) {
+        iframeRef.current.style.userSelect = "none";
+        iframeRef.current.style.pointerEvents = "none";
+      }
+    },
+    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"
+  })));
+}
+
+var Handle$1 = /*#__PURE__*/React.memo(Handle);
+
+const height = 16;
+
+function Ruler(props) {
+  const {
+    containerWidth = 0,
+    viewportWidth = 0
+  } = props;
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: `-${containerWidth / 2} ${-height / 2} ${containerWidth} ${height}`,
+    className: "ssl4j8q"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: -containerWidth / 2,
+    y: -height / 2,
+    width: containerWidth,
+    height: height,
+    fill: "rgba(0, 0, 0, .1)"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: -viewportWidth / 2,
+    x2: -viewportWidth / 2,
+    y1: -height / 2,
+    y2: height / 2,
+    strokeWidth: 2,
+    stroke: "var(--c-p-4)"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: viewportWidth / 2,
+    x2: viewportWidth / 2,
+    y1: -height / 2,
+    y2: height / 2,
+    strokeWidth: 2,
+    stroke: "var(--c-p-4)"
+  }));
+}
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root = "div";
+
+function Viewport(props, ref) {
+  var _iframeRef$current, _iframeRef$current$co;
+
+  const block = useBlock(props);
+  const {
+    src,
+    code,
+    className,
+    ...rest
+  } = block.props;
+  /*
+   * 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);
+  const [width, setWidth] = React.useState(undefined);
+  React.useEffect(() => {
+    if (width === undefined && svgROE) {
+      setWidth(svgROE.contentRect.width);
+    } else if (svgROE) {
+      const max = svgROE.contentRect.width - 2 * (56 + 8 + 8);
+
+      if (width !== undefined && width > max) {
+        setWidth(max);
+      }
+    }
+  }, [containerROE, svgROE, setWidth, width]);
+  const lock = React.useRef("");
+  const iframeRef = React.useRef(null);
+  React.useEffect(() => {
+    const onMouseMove = ev => {
+      if (lock.current && svgROE) {
+        ev.preventDefault();
+        const max = svgROE.contentRect.width - 2 * (56 + 8 + 8);
+        setWidth(width => {
+          var _left$right$lock$curr;
+
+          return Math.min(max, Math.max(320, (width !== null && width !== void 0 ? width : 0) + 2 * ev.movementX * ((_left$right$lock$curr = {
+            left: -1,
+            right: 1
+          }[lock.current]) !== null && _left$right$lock$curr !== void 0 ? _left$right$lock$curr : 1)));
+        });
+      }
+    };
+
+    const onMouseUp = () => {
+      lock.current = "";
+      iframeRef.current.style.userSelect = "";
+      iframeRef.current.style.pointerEvents = "";
+      setHeight(height => {
+        setMaxHeight(height);
+        return height;
+      });
+    };
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [svgROE]);
+  const iframeRO = useResizeObserver(entries => {
+    if (height !== undefined) {
+      const height = entries[entries.length - 1].contentRect.height;
+      setHeight(height);
+      setMaxHeight(Math.max(height, maxHeight !== null && maxHeight !== void 0 ? maxHeight : 0));
+    }
+  });
+  /*
+   * The <html> element of the iframe document is the one which we observe and
+   * measure. We do not use <body> because that may have margins around which would
+   * throw off our height observations.
+   *
+   * We hope that nobody intentionally adds margins around the <html> element. By default
+   * it doesn't have.
+   */
+
+  const html = (_iframeRef$current = iframeRef.current) === null || _iframeRef$current === void 0 ? void 0 : (_iframeRef$current$co = _iframeRef$current.contentDocument) === null || _iframeRef$current$co === void 0 ? void 0 : _iframeRef$current$co.querySelector("html");
+  React.useEffect(() => {
+    if (html) {
+      iframeRO.observe(html);
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }), /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    ...rest,
+    className: cx(className, fullWidth, "r1ouu0bc")
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: svgRef,
+    className: "d1uj09ka"
+  }, /*#__PURE__*/React.createElement(Ruler, {
+    containerWidth: svgROE === null || svgROE === void 0 ? void 0 : 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("daubpa6", height === undefined && "d1d22s19"),
+    style: {
+      width,
+      height
+    }
+  }, /*#__PURE__*/React.createElement("iframe", {
+    ref: iframeRef,
+    frameBorder: "0",
+    src: src,
+    onLoad: () => {
+      var _iframeRef$current2, _iframeRef$current2$c;
+
+      /*
+       * Once the iframe has loaded, initialize the height/maxHeight.
+       * The <html> element may not exist though (eg. the page failed
+       * to load, or it's not a HTML page).
+       */
+      const html = (_iframeRef$current2 = iframeRef.current) === null || _iframeRef$current2 === void 0 ? void 0 : (_iframeRef$current2$c = _iframeRef$current2.contentDocument) === null || _iframeRef$current2$c === void 0 ? void 0 : _iframeRef$current2$c.querySelector("html");
+
+      if (html) {
+        const {
+          height
+        } = html.getBoundingClientRect();
+        setHeight(height);
+        setMaxHeight(height);
+      }
+    },
+    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 === null || svgROE === void 0 ? void 0 : svgROE.contentRect.width,
+    viewportWidth: width
+  })), /*#__PURE__*/React.createElement(Caption$1, {
+    src: src,
+    code: code
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: (maxHeight !== null && maxHeight !== void 0 ? maxHeight : 0) - (height !== null && height !== void 0 ? height : 0),
+      transition: "height 0.16s"
+    }
+  }));
+}
+
+var Viewport$1 = /*#__PURE__*/React.forwardRef(Viewport);
+
+export { Viewport$1 as Viewport };

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface Props {
+    src: string;
+    code?: string;
+}
+declare function Caption(props: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Caption>;
+export default _default;

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+interface Props {
+    gridColumn: string;
+    lock: React.MutableRefObject<string>;
+    edge: "left" | "right";
+    iframeRef: React.RefObject<HTMLIFrameElement>;
+}
+declare function Handle(props: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Handle>;
+export default _default;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props {
+    containerWidth?: number;
+    viewportWidth?: number;
+}
+declare function Ruler(props: Props): JSX.Element;
+export default Ruler;

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

@@ -0,0 +1,3 @@
+export { default as Caption } from "./Caption";
+export { default as Handle } from "./Handle";
+export { default as Ruler } from "./Ruler";

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Sample(): JSX.Element;

package/blocks/Viewport/styles.css

@@ -0,0 +1,14 @@
+.r1ouu0bc{contain:layout;}
+.d1uj09ka{position:relative;}
+.d2uawyc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
+.d8ms9m9{display:flex;align-items:stretch;justify-content:center;}
+.d17q9rbm{border-radius:3px;display:grid;grid-template-columns:56px auto 56px;grid-template-rows:0 auto 0;grid-column-gap:8px;}
+.daubpa6{grid-column:2 / span 1;grid-row:2 / span 1;position:relative;flex:1;height:100px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);transition:height 0.16s;overflow:hidden;}
+.d1d22s19{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer-d1d22s19;animation-timing-function:linear;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;}@keyframes shimmer-d1d22s19{0%{background-position:-60vw 0;}40%{background-position:85vw 0;}100%{background-position:85vw 0;}}
+.i11uos8q{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity 0.2s;}
+.fgdj0yb{font-size:0.75rem;color:var(--timvir-secondary-text-color);white-space:nowrap;display:flex;justify-content:space-between;align-items:center;}
+.d1rc4zjh{cursor:pointer;}.d1rc4zjh:hover{color:var(--c-p-4);opacity:1;}.d1rc4zjh > svg{display:block;}
+.d1enfo6{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.d1watfn6{margin-top:12px;}
+.d1mmz2b6{grid-row:1 / span 3;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0.5;color:var(--timvir-text-color);border-radius:2px;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);}
+.ssl4j8q{width:100%;display:block;height:16px;margin:8px 0;}

package/blocks/WebLink/WebLink.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "a";
+interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+    url: string;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
+export default _default;

package/blocks/WebLink/docs/api.mdx

@@ -0,0 +1,76 @@
+# API
+
+<div style={ { display: "grid", gridTemplateColumns: "min-content 1fr" } }>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Root:</div>
+  <div>{`<div>`}</div>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Ref:</div>
+  <div>Forward <span style={ { color: "rgb(153, 153, 153)" } }>(HTMLDivElement)</span></div>
+</div>
+
+## Props
+
+<Props {...{"fields":[{"name":"url","type":{"optional":false,"name":"string","module":""},"comment":{"shortText":""}}]}} />
+
+export const required = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle cx="8" cy="8" r="8" fill="#444444"></circle>
+    </g>
+  </svg>
+);
+
+export const optional = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle
+        cx="8"
+        cy="8"
+        r="7.5"
+        fill="none"
+        stroke="#444444"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        data-cap="butt"
+      ></circle>
+    </g>
+  </svg>
+);
+
+export const Props = ({ fields }) => (
+  <div style={ { marginTop: 16, display: "grid", gridGap: 24 } }>
+    {fields.map(({ name, type, def, example, comment }) => (
+      <div key={name}>
+        <div style={ { marginLeft: -18 } }>
+          {type.optional ? optional : required}
+          <span style={ { fontWeight: "bold" } }>{name}</span>{`: `}
+          <span>{type.name}</span>
+          {def && (
+            <>
+             {` = `}<span style={ { fontWeight: "bold" } }>{def}</span>
+            </>
+          )}
+        </div>
+        <div>{comment.shortText}</div>
+        {example && (
+          <div style={ { marginLeft: 0, marginTop: 8, color: "rgb(153, 153, 153)", fontSize: "0.8rem" } }>
+            Example: <span style={ { fontWeight: "bold" } }>{example}</span>
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+)

package/blocks/WebLink/docs/index.mdx

@@ -0,0 +1,13 @@
+import { WebLink } from "..";
+
+# WebLink
+
+`<WebLink>` is a link to an website, displayed as rich media (title, description, and opengraph image).
+
+## Examples
+
+<WebLink url="https://twitter.com" style={{ marginBottom: 16 }} />
+<WebLink url="https://figma.com" style={{ marginBottom: 16 }} />
+<WebLink url="https://www.framer.com/motion/" style={{ marginBottom: 16 }} />
+<WebLink url="https://formatjs.io" style={{ marginBottom: 16 }} />
+<WebLink url="https://www.typescriptlang.org" style={{ marginBottom: 16 }} />

package/blocks/WebLink/index.d.ts

@@ -0,0 +1 @@
+export { default as WebLink } from "./WebLink";

package/blocks/WebLink/index.js

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { useContext } from 'timvir/core';
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If arguments provided are objects, these objects are merged together, and the values are taken as class names:
+ *
+ * ```js
+ *  cx({ color: 'class1', textDecoration: 'class2'}, { color: 'class3' }) // returns `class3 class2`
+ * ```
+ *
+ * @returns the combined, space separated class names that can be applied directly to the class attribute
+ */
+const cx = function cx() {
+  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean); // In the basic case, `cx` is passed all strings, and we simply need to join them together with space separators
+
+  const classNamesResult = presentClassNames.filter(arg => typeof arg !== 'object'); // There might also be objects (eg. from the atomic API) such as cx('foo', {
+  // key1: 'bar', key2: 'fizz'}, { key1: 'buzz' }) the desired behavior is to
+  // deduplicate the values based on their properties. The object's values are
+  // the class names
+
+  const styleCollectionResult = Object.values(Object.assign({}, ...presentClassNames.filter(arg => typeof arg === 'object')));
+  return [...styleCollectionResult, ...classNamesResult].join(' ');
+};
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root = "a";
+
+function WebLink(props, ref) {
+  var _useContext$blocks$We, _useContext$blocks, _metadata$open_graph, _metadata$open_graph$, _metadata$open_graph$2, _ref, _metadata$open_graph$3, _metadata$open_graph2, _metadata$open_graph$4, _metadata$open_graph3;
+
+  const {
+    url,
+    className,
+    ...rest
+  } = props;
+  const [metadata, setMetadata] = React.useState(undefined);
+  const {
+    unfurl = defaultUnfurl
+  } = (_useContext$blocks$We = (_useContext$blocks = useContext().blocks) === null || _useContext$blocks === void 0 ? void 0 : _useContext$blocks.WebLink) !== null && _useContext$blocks$We !== void 0 ? _useContext$blocks$We : {};
+  React.useEffect(() => {
+    unfurl(url).then(setMetadata);
+  }, [url, setMetadata]);
+  const image = metadata === null || metadata === void 0 ? void 0 : (_metadata$open_graph = metadata.open_graph) === null || _metadata$open_graph === void 0 ? void 0 : (_metadata$open_graph$ = _metadata$open_graph.images) === null || _metadata$open_graph$ === void 0 ? void 0 : (_metadata$open_graph$2 = _metadata$open_graph$[0]) === null || _metadata$open_graph$2 === void 0 ? void 0 : _metadata$open_graph$2.url;
+  return /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    href: url,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: cx(className, classes.root),
+    ...rest
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.text
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.title
+  }, (_ref = (_metadata$open_graph$3 = metadata === null || metadata === void 0 ? void 0 : (_metadata$open_graph2 = metadata.open_graph) === null || _metadata$open_graph2 === void 0 ? void 0 : _metadata$open_graph2.title) !== null && _metadata$open_graph$3 !== void 0 ? _metadata$open_graph$3 : metadata === null || metadata === void 0 ? void 0 : metadata.title) !== null && _ref !== void 0 ? _ref : /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0")), /*#__PURE__*/React.createElement("div", {
+    className: classes.description
+  }, (_metadata$open_graph$4 = metadata === null || metadata === void 0 ? void 0 : (_metadata$open_graph3 = metadata.open_graph) === null || _metadata$open_graph3 === void 0 ? void 0 : _metadata$open_graph3.description) !== null && _metadata$open_graph$4 !== void 0 ? _metadata$open_graph$4 : metadata === null || metadata === void 0 ? void 0 : metadata.description), /*#__PURE__*/React.createElement("div", {
+    className: classes.url
+  }, /*#__PURE__*/React.createElement("img", {
+    style: {
+      opacity: metadata !== null && metadata !== void 0 && metadata.favicon ? 1 : 0
+    },
+    className: classes.favicon,
+    src: metadata === null || metadata === void 0 ? void 0 : 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
+  })));
+}
+
+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"
+};
+
+async function defaultUnfurl(url) {
+  return fetch(`https://timvir.vercel.app/api/unfurl?url=${encodeURIComponent(url)}`).then(res => res.json());
+}
+
+export { WebLink$1 as WebLink };

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

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

package/blocks/WebLink/styles.css

@@ -0,0 +1,8 @@
+.r1szx90n{transition:all 0.16s;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2);border-radius:3px;display:flex;cursor:pointer;text-decoration:none;}.r1szx90n:hover{background:rgba(55,53,47,0.08);box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2),0 2px 4px rgba(16,22,26,0.1), 0 8px 24px rgba(16,22,26,0.2);}.r1szx90n:active{background:rgba(55,53,47,0.08);box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2),0 1px 1px rgba(16,22,26,0.2);}:root[data-timvir-theme="dark"] .r1szx90n{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2);}:root[data-timvir-theme="dark"] .r1szx90n:hover{background:rgba(255,255,255,0.08);}:root[data-timvir-theme="dark"] .r1szx90n:active{background:rgba(255,255,255,0.08);}
+.tywhumj{flex:4 1 180px;padding:12px 14px 14px;min-width:0;}
+.t1sni99u{color:var(--timvir-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:24px;margin-bottom:6px;}
+.d7eo497{font-size:0.75rem;line-height:1.1rem;color:var(--timvir-secondary-text-color);height:2.2rem;overflow:hidden;}
+.u1rlrpoc{margin-top:12px;display:flex;font-size:0.75rem;line-height:1rem;color:var(--timvir-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.f1cqi3na{width:1rem;height:1rem;min-width:1rem;margin-right:6px;}
+.igksd61{flex:1 1 180px;position:relative;min-width:180px;}
+.i1gibb8w{display:block;object-fit:cover;border-radius:0 3px 3px 0;width:calc(100% - 2px);height:calc(100% - 2px);position:absolute;top:1px;left:1px;}

package/blocks/index.d.ts

@@ -0,0 +1,13 @@
+export { Arbitrary } from "timvir/blocks/Arbitrary";
+export { Code } from "timvir/blocks/Code";
+export { ColorBar } from "timvir/blocks/ColorBar";
+export { ColorBook } from "timvir/blocks/ColorBook";
+export { Cover } from "timvir/blocks/Cover";
+export { Exhibit } from "timvir/blocks/Exhibit";
+export { Font } from "timvir/blocks/Font";
+export { Grid } from "timvir/blocks/Grid";
+export { Icon } from "timvir/blocks/Icon";
+export { Message } from "timvir/blocks/Message";
+export { Swatch } from "timvir/blocks/Swatch";
+export { Viewport } from "timvir/blocks/Viewport";
+export { WebLink } from "timvir/blocks/WebLink";

package/blocks/index.js

@@ -0,0 +1,13 @@
+export { Arbitrary } from 'timvir/blocks/Arbitrary';
+export { Code } from 'timvir/blocks/Code';
+export { ColorBar } from 'timvir/blocks/ColorBar';
+export { ColorBook } from 'timvir/blocks/ColorBook';
+export { Cover } from 'timvir/blocks/Cover';
+export { Exhibit } from 'timvir/blocks/Exhibit';
+export { Font } from 'timvir/blocks/Font';
+export { Grid } from 'timvir/blocks/Grid';
+export { Icon } from 'timvir/blocks/Icon';
+export { Message } from 'timvir/blocks/Message';
+export { Swatch } from 'timvir/blocks/Swatch';
+export { Viewport } from 'timvir/blocks/Viewport';
+export { WebLink } from 'timvir/blocks/WebLink';