timvir 0.2.21 → 0.2.24

package/blocks/Arbitrary/index.js

@@ -128,7 +128,7 @@ function Arbitrary(props, ref) {
     value: value
   }, /*#__PURE__*/React.createElement(Root, {
     ref: ref,
-    className: cx_default(classes.root, className),
+    className: cx_default("timvir-b-Arbitrary", classes.root, className),
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.controls
@@ -137,7 +137,7 @@ function Arbitrary(props, ref) {
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.startAdornment
   }, "Seed:"), /*#__PURE__*/React.createElement("input", {
-    className: classes.input,
+    className: cx_default("timvir-b-Arbitrary-seed", classes.input),
     placeholder: "Seed",
     value: encode(new TextEncoder().encode(`${value.seed}`)),
     readOnly: true,
@@ -158,13 +158,6 @@ function Arbitrary(props, ref) {
       });
     }
   }, "Refresh")), /*#__PURE__*/React.createElement(Exhibit, {
-    bleed: 0,
-    BackdropProps: {
-      style: {
-        borderRadius: 2,
-        border: "1px solid var(--timvir-border-color)"
-      }
-    },
     ...ExhibitProps
   }, children)));
 }

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,16 +90,17 @@ 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(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(className, theme, classes.code, fullWidth && classes.fullWidth)
+    className: cx_default("timvir-b-Code-container", className, theme, classes.code, fullWidth && classes.fullWidth)
   }, /*#__PURE__*/React.createElement("div", {
     className: "d1513p2s",
     onMouseEnter: () => {
@@ -137,7 +139,7 @@ function Code(props, ref) {
       __html: state.html
     }
   }))), caption && /*#__PURE__*/React.createElement("div", {
-    className: classes.caption
+    className: cx_default("timvir-b-Code-caption", classes.caption)
   }, caption));
 }
 var Code$1 = /*#__PURE__*/React.forwardRef(Code);

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,24 +45,24 @@ 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(className, classes.root),
+    className: cx_default("timvir-b-Exhibit", className, classes.root),
     style: {
       ...style,
       [cssVariables.bleed]: typeof bleed === "number" ? `${bleed}px` : undefined
     },
     ...rest
   }, /*#__PURE__*/React.createElement("div", {
-    className: classes.container,
+    className: cx_default("timvir-b-Exhibit-container", classes.container),
     ...BackdropProps,
     style: {
       border: bleed === 0 ? "none" : `1px solid var(${cssVariables.borderColor})`,
       ...BackdropProps?.style
     }
   }, children), caption && /*#__PURE__*/React.createElement("div", {
-    className: classes.caption
-  }, caption)));
+    className: cx_default("timvir-b-Exhibit-caption", classes.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(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/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", {

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.21",
+  "version": "0.2.24",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -29,5 +29,10 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18",
     "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;}