timvir 0.1.42

package/core/index.js

@@ -0,0 +1,708 @@
+import { pipe, filter, subscribe } from 'wonka';
+import { useContext, Provider } from 'timvir/context';
+export { useContext } from 'timvir/context';
+import * as React from 'react';
+import React__default from 'react';
+import { useImmer } from 'use-immer';
+import { MDXProvider } from '@mdx-js/react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { makeBus } from 'timvir/bus';
+import { theme } from 'timvir/core/theme';
+export { theme } from 'timvir/core/theme';
+
+/**
+ * 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(' ');
+};
+
+const noLayout = "nc2e9vn";
+const grid = "g1et32pl";
+const extendedWidth = cx(noLayout, "en6sn9p");
+const fullWidth = cx(noLayout, "f3c539b");
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root$2 = "footer";
+
+function Footer(props, ref) {
+  const {
+    className,
+    links,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Root$2, {
+    ref: ref,
+    className: cx(className, classes$2.root),
+    ...rest
+  }, links && /*#__PURE__*/React.createElement("div", {
+    className: grid
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes$2.linkGroups
+  }, links.map(({
+    group,
+    items
+  }, i) => /*#__PURE__*/React.createElement("div", {
+    key: i
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes$2.linkGroupTitle
+  }, group), /*#__PURE__*/React.createElement("div", null, items.map(({
+    label,
+    href
+  }, j) => /*#__PURE__*/React.createElement("a", {
+    key: j,
+    href: href,
+    className: classes$2.link
+  }, label))))))), /*#__PURE__*/React.createElement("div", {
+    className: cx(grid, classes$2.meta)
+  }, /*#__PURE__*/React.createElement("div", null, "Built with ", /*#__PURE__*/React.createElement("a", {
+    href: "https://timvir.vercel.app"
+  }, "Timvir"))));
+}
+
+var Footer$1 = /*#__PURE__*/React.forwardRef(Footer);
+const classes$2 = {
+  root: "rwhrdvg",
+  linkGroups: "l1u1x7q7",
+  linkGroupTitle: "l1x5jo3a",
+  link: "l29wcr8",
+  meta: "m1ojti9g"
+};
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root$1 = "div";
+
+function NavigationFooter(props, ref) {
+  const {
+    prev,
+    next,
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Root$1, {
+    ref: ref,
+    ...rest,
+    className: cx(className, "re625n1")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d19gj27w"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d15ohs1l"
+  }, prev && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SecondaryLabel, null, prev.context || "/"), /*#__PURE__*/React.createElement(PrimaryLink, {
+    href: prev.href
+  }, prev.label))), /*#__PURE__*/React.createElement("div", {
+    className: "dczrd9z"
+  }, next && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SecondaryLabel, null, next.context || "/"), /*#__PURE__*/React.createElement(PrimaryLink, {
+    href: next.href
+  }, next.label)))));
+}
+
+var NavigationFooter$1 = /*#__PURE__*/React.forwardRef(NavigationFooter);
+
+const PrimaryLink = ({
+  href,
+  children
+}) => {
+  const {
+    Link
+  } = useContext();
+  return /*#__PURE__*/React.createElement(Link, {
+    href: href
+  }, /*#__PURE__*/React.createElement("a", {
+    className: "aifnzb8"
+  }, children));
+};
+
+const SecondaryLabel = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "dymvrdu"
+}, children);
+
+function memoize(fn) {
+  var cache = {};
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+
+var index = memoize(function (prop) {
+  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
+  /* o */
+  && prop.charCodeAt(1) === 110
+  /* n */
+  && prop.charCodeAt(2) < 91;
+}
+/* Z+1 */
+);
+
+/**
+ * This file contains an runtime version of `styled` component. Responsibilities of the component are:
+ * - returns ReactElement based on HTML tag used with `styled` or custom React Component
+ * - injects classNames for the returned component
+ * - injects CSS variables used to define dynamic styles based on props
+ */
+
+const restOp = (obj, keysToExclude) => Object.keys(obj).filter(prop => keysToExclude.indexOf(prop) === -1).reduce((acc, curr) => {
+  acc[curr] = obj[curr];
+  return acc;
+}, {}); // rest operator workaround
+
+
+const warnIfInvalid = (value, componentName) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof value === 'string' || // eslint-disable-next-line no-self-compare
+    typeof value === 'number' && isFinite(value)) {
+      return;
+    }
+
+    const stringified = typeof value === 'object' ? JSON.stringify(value) : String(value); // eslint-disable-next-line no-console
+
+    console.warn(`An interpolation evaluated to '${stringified}' in the component '${componentName}', which is probably a mistake. You should explicitly cast or transform the value to a string.`);
+  }
+};
+
+function styled(tag) {
+  return options => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (Array.isArray(options)) {
+        // We received a strings array since it's used as a tag
+        throw new Error('Using the "styled" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. See https://github.com/callstack/linaria#setup');
+      }
+    }
+
+    const render = (props, ref) => {
+      const {
+        as: component = tag,
+        class: className
+      } = props;
+      const rest = restOp(props, ['as', 'class']);
+      let filteredProps; // Check if it's an HTML tag and not a custom element
+
+      if (typeof component === 'string' && component.indexOf('-') === -1) {
+        filteredProps = {}; // eslint-disable-next-line guard-for-in
+
+        for (const key in rest) {
+          if (key === 'as' || index(key)) {
+            // Don't pass through invalid attributes to HTML elements
+            filteredProps[key] = rest[key];
+          }
+        }
+      } else {
+        filteredProps = rest;
+      }
+
+      filteredProps.ref = ref;
+      filteredProps.className = cx(filteredProps.className || className, options.class);
+      const {
+        vars
+      } = options;
+
+      if (vars) {
+        const style = {}; // eslint-disable-next-line guard-for-in
+
+        for (const name in vars) {
+          const variable = vars[name];
+          const result = variable[0];
+          const unit = variable[1] || '';
+          const value = typeof result === 'function' ? result(props) : result;
+          warnIfInvalid(value, options.name);
+          style[`--${name}`] = `${value}${unit}`;
+        }
+
+        const ownStyle = filteredProps.style || {};
+        const keys = Object.keys(ownStyle);
+
+        if (keys.length > 0) {
+          keys.forEach(key => {
+            style[key] = ownStyle[key];
+          });
+        }
+
+        filteredProps.style = style;
+      }
+
+      if (tag.__linaria && tag !== component) {
+        // If the underlying tag is a styled component, forward the `as` prop
+        // Otherwise the styles from the underlying component will be ignored
+        filteredProps.as = component;
+        return /*#__PURE__*/React__default.createElement(tag, filteredProps);
+      }
+
+      return /*#__PURE__*/React__default.createElement(component, filteredProps);
+    };
+
+    const Result = React__default.forwardRef ? /*#__PURE__*/React__default.forwardRef(render) : // React.forwardRef won't available on older React versions and in Preact
+    // Fallback to a innerRef prop in that case
+    props => {
+      const rest = restOp(props, ['innerRef']);
+      return render(rest, props.innerRef);
+    };
+    Result.displayName = options.name; // These properties will be read by the babel plugin for interpolation
+
+    Result.__linaria = {
+      className: options.class,
+      extends: tag
+    };
+    return Result;
+  };
+}
+
+var styled$1 = process.env.NODE_ENV !== 'production' ? new Proxy(styled, {
+  get(o, prop) {
+    return o(prop);
+  }
+
+}) : styled;
+
+const anchorize = children => {
+  if (typeof children === "string") {
+    return children.toLowerCase().replace(/[ _]+/g, "-").replace(/[!:^*./\\]/g, "");
+  } else {
+    return undefined;
+  }
+};
+
+function Heading(Component) {
+  return function Heading(props) {
+    const id = anchorize(props.children);
+    return /*#__PURE__*/React.createElement(Component, {
+      id: id,
+      ...props
+    }, /*#__PURE__*/React.createElement("a", {
+      className: "a12hs2f7",
+      href: id && `#${id}`
+    }, "#"), props.children);
+  };
+}
+
+const h1 = /*#__PURE__*/styled$1("h1")({
+  name: "h1",
+  class: "h31avqb"
+});
+const h2 = Heading( /*#__PURE__*/styled$1("h2")({
+  name: "h2",
+  class: "h6ceq1b"
+}));
+const h3 = Heading( /*#__PURE__*/styled$1("h3")({
+  name: "h3",
+  class: "hj6166y"
+}));
+const h4 = Heading( /*#__PURE__*/styled$1("h4")({
+  name: "h4",
+  class: "h1f8mqks"
+}));
+const blockquote = /*#__PURE__*/styled$1("blockquote")({
+  name: "blockquote",
+  class: "b1hmga4"
+});
+const hr = /*#__PURE__*/styled$1("hr")({
+  name: "hr",
+  class: "hlrd6ep"
+});
+const table = /*#__PURE__*/styled$1("table")({
+  name: "table",
+  class: "t172su6f"
+});
+const thead = /*#__PURE__*/styled$1("thead")({
+  name: "thead",
+  class: "t1a7p0gg"
+});
+const tbody = /*#__PURE__*/styled$1("tbody")({
+  name: "tbody",
+  class: "t1fah8q4"
+});
+const tr = /*#__PURE__*/styled$1("tr")({
+  name: "tr",
+  class: "twrwqj6"
+});
+const th = /*#__PURE__*/styled$1("th")({
+  name: "th",
+  class: "t1fhygp",
+  vars: {
+    "t1fhygp-0": [props => props.align || "center"]
+  }
+});
+const td = /*#__PURE__*/styled$1("td")({
+  name: "td",
+  class: "t176v8uh",
+  vars: {
+    "t176v8uh-0": [props => props.align || "left"]
+  }
+});
+const code = /*#__PURE__*/styled$1("code")({
+  name: "code",
+  class: "cvhsmuz"
+});
+const a = /*#__PURE__*/styled$1("a")({
+  name: "a",
+  class: "a197eb99"
+});
+const p = /*#__PURE__*/styled$1("p")({
+  name: "p",
+  class: "p1d7vdmn"
+});
+const ul = /*#__PURE__*/styled$1("ul")({
+  name: "ul",
+  class: "ugfnift"
+});
+const ol = /*#__PURE__*/styled$1("ol")({
+  name: "ol",
+  class: "o3pt2dg"
+});
+
+var mdxComponentsBase = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  h1: h1,
+  h2: h2,
+  h3: h3,
+  h4: h4,
+  blockquote: blockquote,
+  hr: hr,
+  table: table,
+  thead: thead,
+  tbody: tbody,
+  tr: tr,
+  th: th,
+  td: td,
+  code: code,
+  a: a,
+  p: p,
+  ul: ul,
+  ol: ol
+});
+
+function Section(props) {
+  const {
+    depth,
+    label,
+    path,
+    children = []
+  } = props;
+  const {
+    location,
+    Link
+  } = useContext();
+  const [active, setActive] = React.useState(() => {
+    if (path) {
+      return location.asPath.startsWith(path);
+    } else if (children.length > 0) {
+      return children.some(({
+        path
+      }) => path && location.asPath.startsWith(path));
+    } else {
+      return false;
+    }
+  });
+  React.useEffect(() => {
+    if (path && location.asPath.startsWith(path)) {
+      setActive(true);
+    }
+  }, [path, location.asPath]);
+  return /*#__PURE__*/React.createElement("section", {
+    className: classes$1.root
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes$1.node,
+    "data-active": location.asPath === path
+  }, path ? /*#__PURE__*/React.createElement(Link, {
+    href: path
+  }, /*#__PURE__*/React.createElement("a", {
+    style: {
+      marginLeft: depth * 20
+    }
+  }, label)) : /*#__PURE__*/React.createElement("a", {
+    style: {
+      marginLeft: depth * 20
+    },
+    href: "#",
+    onClick: () => setActive(x => !x)
+  }, label)), active && children.map((c, i) => /*#__PURE__*/React.createElement(Section, {
+    key: i,
+    depth: depth + 1,
+    ...c
+  })));
+}
+const classes$1 = {
+  root: "ruyt2hq",
+  node: "njdy1am"
+};
+
+function Sidebar(props) {
+  const {
+    toc,
+    search
+  } = props;
+  const [state, mutate] = useImmer({
+    shadowVisible: false
+  });
+
+  const onScroll = ev => {
+    const shadowVisible = ev.currentTarget.scrollTop > 2;
+
+    if (state.shadowVisible !== shadowVisible) {
+      mutate(draft => {
+        draft.shadowVisible = shadowVisible;
+      });
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("aside", {
+    className: cx(classes.root)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d17eoe18"
+  }, search && /*#__PURE__*/React.createElement("div", {
+    className: cx("d1mgn6rc", state.shadowVisible && "d7bx8iu")
+  }, /*#__PURE__*/React.createElement(Search, { ...search
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classes.sections,
+    onScroll: onScroll
+  }, /*#__PURE__*/React.createElement("nav", null, toc.map((c, i) => /*#__PURE__*/React.createElement(Section, {
+    key: i,
+    depth: 0,
+    ...c
+  }))))));
+}
+const classes = {
+  root: "r119ou0k",
+  sections: "s1f74255"
+};
+
+const Search = ({
+  open,
+  label
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "d5l3c45"
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: "d15ju3pv",
+    onClick: open
+  }, /*#__PURE__*/React.createElement("svg", {
+    x: "0px",
+    y: "0px",
+    width: "12px",
+    height: "12px",
+    viewBox: "0 0 12 12"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.707 10.293l-2.54-2.54a5.015 5.015 0 10-1.414 1.414l2.54 2.54a1 1 0 001.414-1.414zM2 5a3 3 0 113 3 3 3 0 01-3-3z",
+    fill: "currentColor"
+  })), label || "Quick Find"));
+};
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+const Root = "div";
+
+function Page(props, ref) {
+  const {
+    location,
+    toc,
+    Link,
+    className,
+    search,
+    mdxComponents,
+    Footer,
+    blocks,
+    children,
+    ...rest
+  } = props;
+  const [state, mutate] = useImmer({
+    search: {
+      open: false
+    }
+  });
+  const [bus] = React.useState(makeBus);
+  const context = React.useMemo(() => ({
+    bus,
+    location,
+    Link,
+    blocks
+  }), [bus, location, Link, blocks]);
+  useHotkeys("command+p,escape", (ev, handler) => {
+    switch (handler.key) {
+      case "command+p":
+        {
+          ev.preventDefault();
+          mutate(draft => {
+            draft.search.open = !draft.search.open;
+          });
+          return;
+        }
+
+      case "escape":
+        {
+          mutate(draft => {
+            draft.search.open = false;
+          });
+          return;
+        }
+    }
+  }, {
+    enableOnTags: ["BODY", "INPUT"]
+  });
+  return /*#__PURE__*/React.createElement(Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    ...rest,
+    className: cx(className, theme, "rfhjyp1")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d1pp8z35"
+  }, /*#__PURE__*/React.createElement(Sidebar, {
+    toc: toc,
+    search: search && {
+      open: () => {
+        mutate(draft => {
+          draft.search.open = true;
+        });
+      },
+      ...search
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "dxk1fgw"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: grid
+  }, /*#__PURE__*/React.createElement(MDXProvider, {
+    components: { ...mdxComponentsBase,
+      ...mdxComponents
+    }
+  }, children)), /*#__PURE__*/React.createElement("div", {
+    className: "d2srpki"
+  }, (() => {
+    function flatten(n, parents) {
+      let ret = [];
+
+      if (n.path) {
+        ret.push({
+          parents,
+          label: n.label,
+          path: n.path
+        });
+      }
+
+      if (n.children) {
+        ret = [...ret, ...n.children.flatMap(c => flatten(c, [...parents, n]))];
+      }
+
+      return ret;
+    }
+
+    const items = toc.flatMap(n => flatten(n, []));
+    const index = items.findIndex(v => v.path === location.asPath.replace(/#.*/, ""));
+
+    if (index === -1) {
+      return null;
+    }
+
+    function toLink(index) {
+      const item = items[index];
+
+      if (item === undefined) {
+        return undefined;
+      } else {
+        return {
+          href: item.path,
+          label: item.label,
+          context: item.parents.map(x => x.label).join(" / ")
+        };
+      }
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: "d1hkiw6l"
+    }, /*#__PURE__*/React.createElement(NavigationFooter$1, {
+      prev: toLink(index - 1),
+      next: toLink(index + 1)
+    }));
+  })(), Footer && /*#__PURE__*/React.createElement(Footer, null))), search && /*#__PURE__*/React.createElement(search.Component, { ...state.search,
+    onClose: () => {
+      mutate(draft => {
+        draft.search.open = false;
+      });
+    }
+  })));
+}
+
+var Page$1 = /*#__PURE__*/React.forwardRef(Page);
+
+/**
+ * A mailbox is a wonka source which receives messages for one specific block (identified by its id).
+ */
+
+function useMailbox(id) {
+  const {
+    bus
+  } = useContext();
+  return React.useMemo(() => pipe(bus.source, filter(x => id ? x.path === `/dev/timvir/block/${id}` : false)), [bus, id]);
+}
+function useBlock(props) {
+  const {
+    bus
+  } = useContext();
+  const mailbox = useMailbox(props.id);
+  const [state, mutate] = useImmer({
+    overrides: undefined
+  });
+  React.useEffect(() => pipe(mailbox, subscribe(msg => {
+    if (msg.interface === "dev.timvir.Props") {
+      if (msg.member === "set") {
+        mutate(draft => {
+          draft.overrides = msg.body;
+        });
+      } else if (msg.member === "merge") {
+        mutate(draft => {
+          draft.overrides = { ...draft.overrides,
+            ...msg.body
+          };
+        });
+      } else if (msg.member === "reset") {
+        mutate(draft => {
+          draft.overrides = undefined;
+        });
+      }
+    }
+  })).unsubscribe, [mailbox, mutate]);
+  return {
+    bus,
+    mailbox,
+    props: { ...props,
+      ...state.overrides
+    },
+    hasOverrides: !!state.overrides,
+    reset: () => {
+      mutate(draft => {
+        draft.overrides = undefined;
+      });
+    }
+  };
+}
+
+export { Footer$1 as Footer, Page$1 as Page, extendedWidth, fullWidth, grid, useBlock, useMailbox };