timvir 0.2.22 → 0.2.25

package/blocks/Code/index.js

@@ -57,6 +57,7 @@ function Code(props, ref) {
     ...rest
   } = block.props;
   const [state, mutate] = useImmer({
+    settled: false,
     mouseOver: false,
     copiedToClipboard: false,
     /*
@@ -89,13 +90,14 @@ function Code(props, ref) {
         }))
       });
       mutate(draft => {
+        draft.settled = true;
         draft.html = html;
       });
     })();
   }, [mutate, children, language]);
   return /*#__PURE__*/React.createElement(Root, {
     ref: ref,
-    className: cx_default("timvir-b-Code", classes.root, fullWidth && Page.fullWidth),
+    className: cx_default("timvir-b-Code", !state.settled && "timvir-unsettled", classes.root, fullWidth && Page.fullWidth),
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
     className: cx_default("timvir-b-Code-container", className, theme, classes.code, fullWidth && classes.fullWidth)

package/blocks/Exhibit/docs/index.mdx

@@ -1,42 +1,41 @@
-import { Exhibit } from "..";
 import { Code } from "timvir/blocks";
 
 # Exhibit
 
-The `<Exhibit>` is a block which is used to present something–usually a React component–in a nice way. It's a way to say:
+The `<Exhibit>` is a block which presents something–usually a React component–in a nice way.
 
-<Sample variant="basic" />
+The presented element is placed on top of a checkered background.
+This helps illustrating which parts of the element are transparent, or if the element comes with a specific background color.
 
-<Code language="jsx">
-  <Sample variant="basic" as="source/markup" />
-</Code>
+A bit of padding is included all around the presented element.
+Together with the checkered background, it makes the `<Exhibit>` block stand out next plain text or other blocks.
+You can tweak the bleed size, or disable the bleed altogether if you want to draw attention to the exact box size of the presented element itself.
 
-Think of it as a `<figure>` + `<figcaption>` for React components.
+The caption, if provided, is placed below the block.
+Use it to explain what is being presented, or provide contex around it.
+Think of the `<Exhibit>` block as a `<figure>` + `<figcaption>` for React components.
+
+<Sample variant="basic" />
 
-Add a title to the exhibit if it helps the reader to understand the exhibit better. The title is placed snuggly to the exhibit.
+## Usage
 
-<Exhibit title="This Is Not A Button" caption="It's an input element, of type text">
-  <input type="text" placeholder="Type something…" style={{ boxSizing: "border-box", width: "100%", padding: 8 }} />
-</Exhibit>
+Import `Exhibit` from the `timvir/blocks` module, then use in a Timvir mdx page like so:
+
+<Code language="jsx">
+  <Sample variant="usage" as="source/markup" />
+</Code>
 
 ## Bleed
 
 Use the `bleed` prop to control how much the checkered background extends beyond the box of the element itself.
+If you set the bleed explicitly, it is not recommended to use more than 16px.
+That is the page margin on small viewports and a bleed larger than that can mess with the page layout.
+
+Setting bleed to zero (0) does not remove the checkered background.
+It will still be visible behind your element (if your element is transparent).
+To entirely remove any bleed and checkered background, render your element directly, without wrapping it in an `<Exhibit>`.
 
-<Exhibit bleed={0} caption="Bleed 0">
-  <div
-    style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
-  />
-</Exhibit>
-
-<Exhibit bleed={4} caption="Bleed 4">
-  <div
-    style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
-  />
-</Exhibit>
-
-<Exhibit bleed={12} caption="Bleed 12">
-  <div
-    style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
-  />
-</Exhibit>
+<Sample variant="bleed" props={{ bleed: 0 }} />
+<Sample variant="bleed" props={{ bleed: 8 }} />
+<Sample variant="bleed" props={{ bleed: 16 }} />
+<Sample variant="bleed" />

package/blocks/Exhibit/index.js

@@ -1,4 +1,3 @@
-import { useMDXComponents } from '@mdx-js/react';
 import { useBlock } from 'timvir/core';
 import * as React from 'react';
 
@@ -37,12 +36,7 @@ var cx_default = cx;
 const Root = "div";
 function Exhibit(props, ref) {
   const block = useBlock(props);
-  const components = {
-    h3: "h3",
-    ...useMDXComponents()
-  };
   const {
-    title,
     caption,
     bleed,
     BackdropProps,
@@ -51,7 +45,7 @@ function Exhibit(props, ref) {
     style,
     ...rest
   } = block.props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(components.h3, null, title), /*#__PURE__*/React.createElement(Root, {
+  return /*#__PURE__*/React.createElement(Root, {
     ref: ref,
     className: cx_default("timvir-b-Exhibit", className, classes.root),
     style: {
@@ -68,7 +62,7 @@ function Exhibit(props, ref) {
     }
   }, children), caption && /*#__PURE__*/React.createElement("div", {
     className: cx_default("timvir-b-Exhibit-caption", classes.caption)
-  }, caption)));
+  }, caption));
 }
 var Exhibit$1 = /*#__PURE__*/React.forwardRef(Exhibit);
 const cssVariables = {

package/blocks/Exhibit/samples/bleed.d.ts

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

package/blocks/Exhibit/samples/usage.d.ts

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

package/blocks/Grid/docs/index.mdx

@@ -1,16 +1,7 @@
 import { Grid } from "..";
 import { Exhibit } from "../../Exhibit";
-import { Image } from "../../../../../src/components/Image";
 import { fullWidth } from "timvir/core";
 
-import image1 from "../../../../../assets/khachik-simonian-nXOB-wh4Oyc-unsplash.jpg"
-import image2 from "../../../../../assets/frank-mckenna-4V8JxijgZ_c-unsplash.jpg"
-import image3 from "../../../../../assets/jay-mantri-TFyi0QOx08c-unsplash.jpg"
-import image4 from "../../../../../assets/jeremy-bishop-EwKXn5CapA4-unsplash.jpg"
-import image5 from "../../../../../assets/lukasz-szmigiel-jFCViYFYcus-unsplash.jpg"
-import image6 from "../../../../../assets/qingbao-meng-01_igFr7hd4-unsplash.jpg"
-import image7 from "../../../../../assets/v2osk-1Z2niiBPg5A-unsplash.jpg"
-
 # Grid
 
 > CSS grid with a predefined template (columns, gaps etc)
@@ -52,18 +43,6 @@ import image7 from "../../../../../assets/v2osk-1Z2niiBPg5A-unsplash.jpg"
   <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
 </Grid>
 
-Combine `<Grid>` with the `<Image>` component.
-
-<Grid>
-  <Image metadata={image1} img={{ src: image1.src }} sources={[]}  />
-  <Image metadata={image2} img={{ src: image2.src }} sources={[]} />
-  <Image metadata={image3} img={{ src: image3.src }} sources={[]} />
-  <Image metadata={image4} img={{ src: image4.src }} sources={[]} />
-  <Image metadata={image5} img={{ src: image5.src }} sources={[]} />
-  <Image metadata={image6} img={{ src: image6.src }} sources={[]} />
-  <Image metadata={image7} img={{ src: image7.src }} sources={[]} />
-</Grid>
-
 Combine `<Grid>` with the `<Exhibit>` component.
 
 <Grid>

package/blocks/Viewport/index.js

@@ -1,6 +1,7 @@
 import { useBlock, fullWidth } from 'timvir/core';
 import { useResizeObserverEntry, useResizeObserver } from 'timvir/hooks';
 import * as React from 'react';
+import { useImmer } from 'use-immer';
 import { useMDXComponents } from '@mdx-js/react';
 import { Code } from 'timvir/blocks';
 import * as Icons from 'react-feather';
@@ -154,6 +155,9 @@ function Viewport(props, ref) {
     className,
     ...rest
   } = block.props;
+  const [state, mutate] = useImmer({
+    settled: false
+  });
 
   /*
    * The container measures the width of the main column. It is used to initialize
@@ -216,7 +220,7 @@ function Viewport(props, ref) {
   /*
    * Note this useEffect runs on each render. This is fine beause it doesn't do any
    * expensive computation, and the Viewport component only re-renders when the iframe
-   * itself is changes height or the user resizes the width of the Viewport.
+   * itself changes height or the user resizes the width of the Viewport.
    */
   React.useEffect(() => {
     const document = iframeRef.current?.contentDocument;
@@ -244,12 +248,28 @@ function Viewport(props, ref) {
     style.innerHTML = "body { margin: 0 }";
     document.head.appendChild(style);
   }
+
+  /*
+   * 20ms after the height has been set, we consider this 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.
+   */
+  React.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      mutate(draft => {
+        draft.settled = true;
+      });
+    }, 20);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [mutate, height]);
   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", className, fullWidth, "r1ouu0bc")
+    className: cx_default("timvir-b-Viewport", !state.settled && "timvir-unsettled", className, fullWidth, "r1ouu0bc")
   }, /*#__PURE__*/React.createElement("div", {
     ref: svgRef,
     className: "d1uj09ka"

package/blocks/WebLink/docs/index.mdx

@@ -9,5 +9,5 @@ import { WebLink } from "..";
 <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://formatjs.github.io" style={{ marginBottom: 16 }} />
 <WebLink url="https://www.typescriptlang.org" style={{ marginBottom: 16 }} />

package/blocks/WebLink/index.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useContext } from 'timvir/core';
+import { useImmer } from 'use-immer';
 
 // src/css.ts
 
@@ -40,20 +41,29 @@ function WebLink(props, ref) {
     className,
     ...rest
   } = props;
-  const [metadata, setMetadata] = React.useState(undefined);
+  const [state, mutate] = useImmer({
+    settled: false,
+    metadata: undefined
+  });
   const {
     unfurl = defaultUnfurl
   } = useContext().blocks?.WebLink ?? {};
   React.useEffect(() => {
-    unfurl(url).then(setMetadata);
-  }, [url, setMetadata]);
+    unfurl(url).then(metadata => {
+      mutate(draft => {
+        draft.settled = true;
+        draft.metadata = metadata;
+      });
+    });
+  }, [url, mutate]);
+  const metadata = state.metadata;
   const image = metadata?.open_graph?.images?.[0]?.url;
   return /*#__PURE__*/React.createElement(Root, {
     ref: ref,
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: cx_default(className, classes.root),
+    className: cx_default("timvir-b-WebLink", !state.settled && "timvir-unsettled", className, classes.root),
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.text

package/core/index.js

@@ -49,14 +49,14 @@ const fullWidth = cx_default(noLayout, "f3c539b");
 /**
  * The underlying DOM element which is rendered by this component.
  */
-const Root$2 = "footer";
+const Root$3 = "footer";
 function Footer(props, ref) {
   const {
     className,
     links,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement(Root$2, {
+  return /*#__PURE__*/React.createElement(Root$3, {
     ref: ref,
     className: cx_default(className, classes$7.root),
     ...rest
@@ -99,12 +99,13 @@ const classes$7 = {
 
 const theme = "t1amubg3";
 
+const Root$2 = "div";
 function Action(props) {
   const {
     label,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Root$2, {
     className: classes$6.root,
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
@@ -241,7 +242,7 @@ function Commands(props) {
       if (!draft.dialog) {
         const containerElement = document.createElement("div");
         document.body.appendChild(containerElement);
-        const reactPortal = /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+        const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
           className: classes$4.root,
           onClick: ev => {
             if (ev.target === ev.currentTarget) {
@@ -257,7 +258,7 @@ function Commands(props) {
           reactPortal
         });
       } else {
-        const reactPortal = /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+        const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
           className: classes$4.root,
           onClick: ev => {
             if (ev.target === ev.currentTarget) {
@@ -276,7 +277,7 @@ function Commands(props) {
     mutate(draft => {
       draft.open = false;
       if (draft.dialog) {
-        const reactPortal = /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+        const reactPortal = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
           className: classes$4.root
         }, /*#__PURE__*/React.createElement(Dialog, {
           onDispose: () => {
@@ -521,17 +522,17 @@ const h1 = /*#__PURE__*/styled_default('h1')({
   class: "h6ceq1b",
   propsAsIs: false
 });
-const h2 = Heading( /*#__PURE__*/styled_default('h2')({
+const h2 = Heading(/*#__PURE__*/styled_default('h2')({
   name: "h2",
   class: "hj6166y",
   propsAsIs: false
 }));
-const h3 = Heading( /*#__PURE__*/styled_default('h3')({
+const h3 = Heading(/*#__PURE__*/styled_default('h3')({
   name: "h3",
   class: "h1f8mqks",
   propsAsIs: false
 }));
-const h4 = Heading( /*#__PURE__*/styled_default('h4')({
+const h4 = Heading(/*#__PURE__*/styled_default('h4')({
   name: "h4",
   class: "h1hmga4",
   propsAsIs: false

package/core/styles.css

@@ -53,7 +53,7 @@
 .r28qe6v{display:flex;align-items:center;margin:1px 0;font-size:0.9375rem;line-height:2.2;}@media (min-width:48rem){.r28qe6v{font-size:0.8125rem;}}@media (any-pointer:coarse){.r28qe6v > a{min-height:44px;}}.r28qe6v > a{min-width:0;transition:background 0.16s;border-radius:4px;display:flex;align-items:center;color:var(--timvir-text-color);font-weight:500;background:none;text-decoration:none;width:100%;padding:0 8px;opacity:0.7;}.r28qe6v:hover a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}.r28qe6v[data-active="true"] a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}
 .i1ia823q{display:block;width:1.3em;height:1.3em;margin-right:8px;min-width:1.3em;}
 .l13ixk6c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
-.i7wcd3g{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;width:1rem;height:1rem;}
+.i7wcd3g{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;width:1rem;height:1rem;flex:0 0 1rem;}
 
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.22",
+  "version": "0.2.25",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -26,8 +26,13 @@
   },
   "peerDependencies": {
     "@mdx-js/react": "^2 || ^3",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19",
     "react-hotkeys-hook": "^4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/timvir/timvir.git",
+    "directory": "pkg/timvir"
   }
 }

package/search/Search/Search.d.ts

@@ -1,10 +1,6 @@
 import * as React from "react";
 import { Node } from "timvir/core";
-/**
- * The underlying DOM element which is rendered by this component.
- */
-declare const Root = "div";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends React.ComponentPropsWithoutRef<"div"> {
     open?: boolean;
     onClose?: (ev: React.SyntheticEvent<HTMLElement>) => void;
     q: (query: string) => Promise<{

package/styles.css

@@ -153,7 +153,7 @@
 .r28qe6v{display:flex;align-items:center;margin:1px 0;font-size:0.9375rem;line-height:2.2;}@media (min-width:48rem){.r28qe6v{font-size:0.8125rem;}}@media (any-pointer:coarse){.r28qe6v > a{min-height:44px;}}.r28qe6v > a{min-width:0;transition:background 0.16s;border-radius:4px;display:flex;align-items:center;color:var(--timvir-text-color);font-weight:500;background:none;text-decoration:none;width:100%;padding:0 8px;opacity:0.7;}.r28qe6v:hover a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}.r28qe6v[data-active="true"] a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}
 .i1ia823q{display:block;width:1.3em;height:1.3em;margin-right:8px;min-width:1.3em;}
 .l13ixk6c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
-.i7wcd3g{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;width:1rem;height:1rem;}
+.i7wcd3g{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;width:1rem;height:1rem;flex:0 0 1rem;}