timvir 0.1.42

package/blocks/styles.css

@@ -0,0 +1,81 @@
+.r1ev38xg{margin:1em 0;}
+.c8hz158{display:grid;grid-gap:8px;grid-template-columns:1fr 100px;margin-bottom:8px;}
+.t1663phv{display:flex;align-items:center;padding:0 0 0 10px;height:36px;position:relative;}.t1663phv::after{display:block;position:absolute;content:"";inset:0;pointer-events:none;border:1px solid var(--timvir-secondary-text-color);border-radius:2px;}.t1663phv:hover::after{border-color:var(--timvir-accent-color);}.t1663phv:focus-within::after{border-color:var(--timvir-accent-color);}
+.s1k50njo{display:inline-block;color:var(--timvir-secondary-text-color);margin-right:6px;}
+.i1dajnne{border:none;outline:none;font:inherit;background:transparent;align-self:stretch;padding:0;height:34px;width:100%;color:inherit;}
+.b128wsn{border:none;outline:none;height:36px;background:var(--timvir-accent-color);font:inherit;border-radius:2px;cursor:pointer;transition:background 0.2s;}.b128wsn:hover{background:var(--c-p-3);}.b128wsn:active{background:var(--c-p-4);}
+.d1513p2s{display:grid;grid-template-columns:1fr;padding-block:16px;}
+.b157mkz{--size:48px;z-index:1;position:absolute;top:0;right:0;width:var(--size);height:var(--size);display:flex;align-items:flex-start;justify-content:flex-end;outline:none;border:none;padding:6px;background:transparent;transition:all 0.2s;cursor:pointer;pointer-events:none;opacity:0;}.b157mkz:hover{color:white;}.b157mkz:hover svg:first-child{transform:translate(0,0);}.b157mkz:active svg:first-child{transform:translate(2px,-2px);}
+.b10oxtfo{pointer-events:all;opacity:1;}
+.s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
+.d17pltln{padding:16px 24px 16px 0;}
+
+.r9v2r0l{margin:1.5rem 0 3rem;}
+.cs7tint{overflow-x:auto;contain:content;font-size:0.9em;border-radius:5px;--timvir-b-Code-bleed:var(--timvir-page-margin,24px);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),24px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));box-shadow:inset 0 0 0 1px rgb(16 22 26 / 20%),0 1px 4px rgb(16 22 26 / 10%);transition:box-shadow 0.3s;}.cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(16 22 26 / 30%),0 1px 4px rgb(16 22 26 / 10%),0 8px 24px rgb(16 22 26 / 10%);}:root[data-timvir-theme="dark"] .cs7tint{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 4px rgb(216 222 226 / 5%), 0 2px 8px rgb(216 222 226 / 2%);}:root[data-timvir-theme="dark"] .cs7tint:hover{box-shadow:inset 0 0 0 1px rgb(216 222 226 / 10%),0 1px 3px rgb(216 222 226 / 7%), 0 2px 16px rgb(216 222 226 / 5%);}
+.fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
+.lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);margin-inline:1px;}
+.h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}
+.ll2b9hx{display:inline-block;width:var(--timvir-b-Code-bleed);color:var(--timvir-secondary-text-color);text-align:right;padding-inline:4px;}
+.c5vr6r2{font-size:0.75rem;color:var(--timvir-secondary-text-color);margin-top:2px;}
+.tac6gx6{color:#393a34;background-color:#f6f8fa;}.tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}.tac6gx6 :is(.namespace){opacity:0.7;}.tac6gx6 :is(.string,.attr-value){color:#e3116c;}.tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}.tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}.tac6gx6 :is(.tag,.selector,.keyword){color:#00009f;}.tac6gx6 :is(.function-variable){color:#6f42c1;}.tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#00a4db;}.tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#36acaa;}:root[data-timvir-theme="dark"] .tac6gx6{color:#adbac7;background-color:#2d333b;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.comment,.prolog,.doctype,.cdata){color:#999988;font-style:italic;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.namespace){opacity:0.7;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.string,.attr-value){color:#96d0ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.punctuation,.operator){color:#6cb6ff;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function,.delete,.tag){color:#d73a49;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.tag,.selector,.keyword){color:#8ddb8c;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.function-variable){color:#6f42c1;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.atrule,.keyword,.attr-name,.selector){color:#f47067;}:root[data-timvir-theme="dark"] .tac6gx6 :is(.entity,.url,.symbol,.number,.boolean,.variable,.constant,.property,.regex,.inserted){color:#dcbdfb;}
+
+.r1f19pie{position:relative;}
+.b15hqsfj{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(0,1fr));transition:all 0.16s;}.b15hqsfj::before{position:absolute;top:0;right:0;bottom:0;left:0;display:block;z-index:2;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.15);content:"";pointer-events:none;user-select:none;transition:all 0.16s;}.b15hqsfj:hover::before{opacity:0;}
+.v1uw85xw{height:40px;flex-grow:1;display:grid;place-items:stretch;}.v1uw85xw > div{transition:all 0.16s;cursor:pointer;}.v1uw85xw:first-child > div{border-radius:2px 0 0 2px;}.v1uw85xw:last-child > div{border-radius:0 2px 2px 0;}.v1uw85xw:hover{z-index:3;}.v1uw85xw:hover > div{border-radius:2px;margin:-3px 1px;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);}
+.o1823law{position:absolute;top:50%;right:0px;left:0px;transform:translateY(-50%);pointer-events:none;opacity:0;z-index:4;transition:opacity 0.16s;}.s4sqb81 .o1823law{pointer-events:all;opacity:1;}
+.rmv2wrl{display:grid;grid-gap:16px;grid-auto-columns:1fr;align-items:start;width:100%;}
+.d1l94wnr{flex-grow:1;}.d1l94wnr:first-child{border-radius:3px 3px 0 0;}.d1l94wnr:last-child{border-radius:0 0 3px 3px;}
+.d1uopbb{text-align:center;font-size:0.75rem;color:var(--timvir-secondary-text-color);margin-top:0.8em;line-height:1;}
+.d1vwzhoa{color:var(--timvir-text-color);}
+.c1xqhu04{position:relative;cursor:pointer;display:flex;flex-direction:column;height:200px;}.c1xqhu04::before{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:4px;box-shadow:0 0 0 0 rgba(19,124,189,0);content:"";transition:all 0.16s cubic-bezier(0.4,1,0.75,0.9);}.c1xqhu04:hover::before{box-shadow:0 0 0 2px #00000040;opacity:1;}
+.a1y0tcvx:hover::before,.a1y0tcvx::before{box-shadow:0 0 0 2px var(--c-p-5);opacity:1;}
+.r1nql2f9{margin:0 0 1.5rem;--timvir-b-Exhibit-bleed:0px;--timvir-b-Exhibit-borderColor:#EFEFEF;--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-borderColor:#101010;--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
+.c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);}
+.cf43jjx{font-size:0.75rem;color:var(--timvir-secondary-text-color);margin-top:2px;}
+.mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
+.rc7ivp5{padding:16px 0;}
+.fe58upx{margin:0 auto 0 0;}
+.d10949ho{cursor:pointer;}.d10949ho:hover{color:var(--c-p-4);opacity:1;}.d10949ho > svg{position:relative;top:2px;}
+.d1o2du3z{display:flex;flex-direction:column;}
+.d1o9zhgl{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.ddlplux{padding:0 0 16px;display:flex;flex-direction:column;}
+.dw285p4{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
+.dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
+.r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
+.n1xsexuc{margin-top:6px;white-space:nowrap;font-size:0.75rem;opacity:0;transition:all 0.16s;z-index:-1;color:var(--timvir-secondary-text-color);text-align:center;user-select:none;pointer-events:none;position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);}
+.r1k0w618{position:relative;z-index:1;}.r1k0w618 svg{display:block;}.r1k0w618:hover .n1xsexuc{opacity:1;bottom:-26px;color:var(--timvir-text-color);}.r1k0w618:active .n1xsexuc{bottom:-24px;}
+.b1a0xzv7{background:white;place-self:stretch;border-radius:2px;transition:all 0.2s;box-shadow:0 0 0 0 rgba(0,0,0,0.1);}
+.g10obtzp{opacity:0;transition:all 0.2s;pointer-events:none;}
+.r1bcczis{display:grid;place-items:center;cursor:pointer;}.r1bcczis > *{grid-column:1;grid-row:1;}.r1bcczis:hover .b1a0xzv7{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);}.r1bcczis:active .b1a0xzv7{margin:1px;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2),0 1px 1px rgba(16,22,26,0.2);}.r1bcczis:hover .g10obtzp{opacity:1;}
+.r1ssql2z{position:relative;background:var(--c-p-0);color:black;border-radius:3px;padding:16px 24px 16px 24px;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2);display:flex;align-items:flex-start;line-height:1.5;}
+.dhvu07f > *:first-child{margin-top:0;}.dhvu07f > *:last-child{margin-bottom:0;}.dhvu07f > h3:before{display:none;}
+.i1dz18jz{position:relative;top:3px;margin:-2px 12px 0 -4px;}.i1dz18jz > svg{display:block;}
+.i41wipx{background:#f0f2fc;color:black;}.i41wipx .i1dz18jz{color:#2a47d5;}
+.wi7iy6{background:#fcf9f0;color:black;}.wi7iy6 .i1dz18jz{color:#a68521;}
+.a1d5oxsn{background:#fcf0f0;color:black;}.a1d5oxsn .i1dz18jz{color:#da4444;}
+.r19bcggb{position:relative;}.r19bcggb > div{border-radius:2px;}.r19bcggb:hover > div{top:-4px;right:-4px;bottom:-4px;left:-4px;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);padding:0px 16px;z-index:2;}.r19bcggb:active > div{top:-2px;right:-2px;bottom:-2px;left:-2px;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2),0 1px 1px rgba(16,22,26,0.2);padding:0px 14px;z-index:2;}
+.dhgsgky{display:flex;flex-direction:column;justify-content:center;position:absolute;top:0;right:0;bottom:0;left:0;transition:all 0.16s;padding:0px 12px;cursor:pointer;}
+.dobecwk{display:flex;justify-content:space-between;align-items:center;line-height:1;}
+.dho7t08{padding-top:6px;opacity:0.5;font-size:0.8em;line-height:1;}
+.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;}
+.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/bus/index.d.ts

@@ -0,0 +1,12 @@
+import { Subject } from "wonka";
+import { Message } from "./messages";
+export * from "./messages";
+/**
+ * The bus is a wonka Subject that represents a stream of Messages.
+ */
+export declare type Bus = Subject<Message>;
+export declare const makeBus: () => Subject<Message>;
+/**
+ * Send a message to the bus.
+ */
+export declare function send<T>(bus: Bus, id: string, member: string, body: T): void;

package/bus/index.js

@@ -0,0 +1,22 @@
+import { makeSubject } from 'wonka';
+
+/**
+ * The bus is a wonka Subject that represents a stream of Messages.
+ */
+
+const makeBus = () => makeSubject();
+/**
+ * Send a message to the bus.
+ */
+
+function send(bus, id, member, body) {
+  bus.next({
+    type: "INVOKE",
+    path: `/dev/timvir/block/${id}`,
+    interface: "dev.timvir.Props",
+    member,
+    body
+  });
+}
+
+export { makeBus, send };

package/bus/messages.d.ts

@@ -0,0 +1,15 @@
+export declare type Message = Invoke<unknown> | Signal<unknown>;
+export interface Invoke<T> {
+    type: "INVOKE";
+    path: string;
+    interface: string;
+    member: string;
+    body: T;
+}
+export interface Signal<T> {
+    type: "SIGNAL";
+    path: string;
+    interface: string;
+    member: string;
+    body: T;
+}

package/context/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Bus } from "timvir/bus";
+export interface Value {
+    bus: Bus;
+    location: {
+        asPath: string;
+        push: (path: string) => void;
+    };
+    Link: React.ComponentType<{
+        href: string;
+        children?: React.ReactNode;
+    }>;
+    blocks?: {
+        WebLink?: {
+            unfurl: (url: string) => Promise<any>;
+        };
+    };
+}
+export declare const Provider: React.Provider<Value | undefined>;
+export declare function useContext(): Value;

package/context/index.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+const Context = /*#__PURE__*/React.createContext(undefined);
+const Provider = Context.Provider;
+function useContext() {
+  const value = React.useContext(Context);
+
+  if (!value) {
+    throw new Error("timvir/context: missing provider");
+  }
+
+  return value;
+}
+
+export { Provider, useContext };

package/core/components/Footer/Footer.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "footer";
+interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+    links?: Array<{
+        group: React.ReactNode;
+        items: Array<{
+            label: string;
+            href: string;
+        }>;
+    }>;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
+export default _default;

package/core/components/Footer/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":"links","type":{"optional":true,"name":"{ group: ReactNode; items: { label: string; href: 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/core/components/Footer/docs/index.mdx

@@ -0,0 +1,27 @@
+import { Viewport } from "timvir/blocks";
+
+# Footer
+
+The *Page Footer* is an optional element which is placed at the very bottom of every page.
+See the [`<Page>` API](/docs/components/Page/api) documentation.
+
+The `<Footer>` component is provided for use in your own implementation of that element. It
+displays links (internal or external) and the copyright notice.
+
+## Usage
+
+```jsx
+import { Page, Footer } from "timvir/core";
+
+export default function Wrapper({ children }) {
+  return (
+    <Page Footer={() => <Footer links={[…]} />}>
+      {children}
+    </Page>
+  );
+}
+```
+
+## Sample
+
+<Viewport src="/docs/components/Footer/samples/basic" />

package/core/components/Footer/index.d.ts

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

package/core/components/Footer/samples/basic.d.ts

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

package/core/components/NavigationFooter/NavigationFooter.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "div";
+interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+    prev?: {
+        href: string;
+        label: React.ReactNode;
+        context: React.ReactNode;
+    };
+    next?: {
+        href: string;
+        label: React.ReactNode;
+        context: React.ReactNode;
+    };
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/core/components/NavigationFooter/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":"Link","type":{"optional":false,"name":"typeof Link","module":""},"comment":{"shortText":""}},{"name":"prev","type":{"optional":true,"name":"{ href: string; label: ReactNode; context: ReactNode; }","module":""},"comment":{"shortText":""}},{"name":"next","type":{"optional":true,"name":"{ href: string; label: ReactNode; context: ReactNode; }","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/core/components/NavigationFooter/docs/index.mdx

@@ -0,0 +1,10 @@
+import { Viewport } from "timvir/blocks";
+
+# NavigationFooter
+
+The `<NavigationFooter>` component allows users to navigate to the previous and next page.
+It is automatically inserted into every page.
+
+## Sample
+
+<Viewport src="/docs/components/NavigationFooter/samples/basic" />

package/core/components/NavigationFooter/index.d.ts

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

package/core/components/NavigationFooter/samples/basic.d.ts

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

package/core/components/Page/Page.d.ts

@@ -0,0 +1,60 @@
+import { Components } from "@mdx-js/react/lib/index";
+import * as React from "react";
+import { Value } from "timvir/context";
+import { Node } from "./types";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "div";
+interface Props extends React.ComponentProps<typeof Root> {
+    toc: readonly Node[];
+    location: {
+        asPath: string;
+        push: (path: string) => void;
+    };
+    Link: React.ComponentType<{
+        href: string;
+        children?: React.ReactNode;
+    }>;
+    /**
+     * Overrides the built-in MDX component implementations.
+     *
+     * Timvir only provides styling for Markdown components, no interactivity or customization.
+     * This is done to keep the core small. For example, code blocks do not provide syntax
+     * highlighting. If you want to enable syntax highlighting in code blocks, use the
+     * '<Code>' component from 'timvir/blocks'.
+     */
+    mdxComponents?: Components;
+    /**
+     * Search Configuration. When provided, then the Search menu will appear in the sidebar.
+     */
+    search?: {
+        /**
+         * The label that is used in th sidebar for the search menu.
+         *
+         * @default "Quick Search"
+         */
+        label?: React.ReactNode;
+        /**
+         * The Search component. It is always rendered in the DOM tree. When the search menu
+         * is activated, then the 'open' prop is set to true.
+         */
+        Component: React.ComponentType<{
+            open: boolean;
+            onClose: (ev: React.SyntheticEvent<HTMLElement>) => void;
+        }>;
+    };
+    /**
+     * Optional footer which is shown at the bottom of every page.
+     *
+     * You can use any component here, though timvir provides a ready-made component which
+     * should fit most use cases ('<Footer>').
+     */
+    Footer?: React.ComponentType<unknown>;
+    /**
+     * Configuration for blocks.
+     */
+    blocks?: Value["blocks"];
+}
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "search" | "key" | "dir" | "location" | "onError" | "hidden" | "color" | "style" | "translate" | "prefix" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "Link" | "toc" | "mdxComponents" | "Footer" | "blocks"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/core/components/Page/components.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+export declare const h1: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
+export declare const h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
+export declare const h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => JSX.Element;
+export declare const blockquote: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLQuoteElement> & React.BlockquoteHTMLAttributes<HTMLQuoteElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const hr: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHRElement> & React.HTMLAttributes<HTMLHRElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const table: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableElement> & React.TableHTMLAttributes<HTMLTableElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const thead: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const tbody: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableSectionElement> & React.HTMLAttributes<HTMLTableSectionElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const tr: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableRowElement> & React.HTMLAttributes<HTMLTableRowElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const th: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableHeaderCellElement> & React.ThHTMLAttributes<HTMLTableHeaderCellElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const td: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLTableDataCellElement> & React.TdHTMLAttributes<HTMLTableDataCellElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const code: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const a: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const p: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const ul: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;
+export declare const ol: import("@linaria/core").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLOListElement> & React.OlHTMLAttributes<HTMLOListElement> & {
+    as?: React.ElementType<any> | undefined;
+}>;

package/core/components/Page/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":"location","type":{"optional":false,"name":"{ asPath: string; push: (path: string) => void; }","module":""},"comment":{"shortText":""}},{"name":"toc","type":{"optional":false,"name":"readonly Node[]","module":""},"comment":{"shortText":""}},{"name":"Link","type":{"optional":false,"name":"typeof Link","module":""},"comment":{"shortText":""}},{"name":"mdxComponents","type":{"optional":true,"name":"MDXProviderComponents","module":""},"comment":{"shortText":"Overrides the built-in MDX component implementations.\n\nTimvir only provides styling for Markdown components, no interactivity or customization.\nThis is done to keep the core small. For example, code blocks do not provide syntax\nhighlighting. If you want to enable syntax highlighting in code blocks, use the\n'<Code>' component from 'timvir/blocks'."}},{"name":"search","type":{"optional":true,"name":"{ label?: ReactNode; Component: ComponentType<{ open: boolean; }>; }","module":""},"comment":{"shortText":"Search Configuration. When provided, then the Search menu will appear in the sidebar."}},{"name":"Footer","type":{"optional":true,"name":"ElementType<{}>","module":""},"comment":{"shortText":"Optional footer which is shown at the bottom of every page.\n\nYou can use any component here, though timvir provides a ready-made component which\nshould fit most use cases ('<Footer>')."}}]}} />
+
+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>
+)