timvir 0.2.39 → 0.2.43

package/builtins/styles.css

@@ -1,33 +1,331 @@
+@layer priority1 {
+  .timvir-s-1f9b50e {
+    --timvir-margin: var(--timvir-page-margin);
+  }
 
-.g1et32pl{display:-ms-grid;display:grid;--timvir-page-margin:16px;--timvir-margin:var(--timvir-page-margin);-ms-grid-auto-rows:min-content;grid-auto-rows:min-content;-ms-grid-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width: 48rem){.g1et32pl{--timvir-page-margin:24px;-ms-grid-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0, 48rem) [rc] 1fr [rex] var(
-        --timvir-page-margin
-      ) [re];grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0, 48rem) [rc] 1fr [rex] var(
-        --timvir-page-margin
-      ) [re];}}@media (min-width: 72rem){.g1et32pl{-ms-grid-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem [rc] minmax(0, 12rem) [rex] var(
-        --timvir-page-margin
-      ) 1fr [re];grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem [rc] minmax(0, 12rem) [rex] var(
-        --timvir-page-margin
-      ) 1fr [re];}}.g1et32pl>*:not(.nc2e9vn){grid-column:lc/rc;min-width:0;}.g1et32pl>*{margin:0 0 2rem;}.g1et32pl>p+ul{margin-top:-1.25rem;}
-.en6sn9p{grid-column:lex/rex;}
-.f3c539b{grid-column:le/re;}
+  .timvir-s-1hz7z82 {
+    --timvir-page-margin: 16px;
+  }
 
-.a1yepc47{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.a1yepc47:hover svg{opacity:1;-webkit-transform:none;-moz-transform:none;-ms-transform:none;transform:none;visibility:visible;--visibility-delay:0s;}
-.calmbc7{display:inline-block;margin-left:6px;color:var(--timvir-secondary-text-color);height:0.9rem;width:0.9rem;vertical-align:middle;-webkit-transition:opacity 0.2s,-webkit-transform 0.2s,visibility 0s var(--visibility-delay, 0.2s);transition:opacity 0.2s,transform 0.2s,visibility 0s var(--visibility-delay, 0.2s);opacity:0;visibility:hidden;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}
-.hryzf2k{margin-top:3rem;margin-bottom:1rem;font-size:2rem;line-height:1.125;font-weight:590;text-indent:-0.05em;}
-.h1r910l8{position:relative;margin:2.5rem 0 1rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
-.hmqldzl{position:relative;margin:1rem 0 1rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
-.hpw7qeo{position:relative;margin:1rem 0 1rem;font-size:0.9375rem;line-height:1.4375;font-weight:590;}
-.b1gfctk0{margin-left:0;font-size:1.1rem;}.b1gfctk0>*:first-child{margin-top:0;}.b1gfctk0>*:last-child{margin-bottom:0;}
-.h1kfhyug{display:block;border:none;height:1px;width:100%;background:currentColor;opacity:0.25;}
-.t11kzh9g{border-spacing:0;border-collapse:collapse;width:100%;overflow:auto;}
+  .timvir-s-1v02d47:hover {
+    --code-box-shadow: inset 0 0 0 1px #10161a80, inset 0 1px 4px #10161a33;
+  }
 
+  .timvir-s-bok0fy:hover {
+    --link-icon-opacity: 1;
+  }
 
-.t1ichb2u{background-color:#fff;border-top:1px solid var(--c-p-2);}.t1ichb2u:nth-child(2n){background-color:var(--c-p-0);}
-.tynrygb{text-align:var(--tynrygb-0);padding:6px 13px;border:1px solid var(--c-p-2);}
-.ta24p8f{text-align:var(--ta24p8f-0);padding:6px 13px;border:1px solid var(--c-p-2);}
-.ctk2u2p{border-radius:5px;padding:4px 6px 3px;font-size:0.8em;background:var(--timvir-secondary-background-color);border:1px solid var(--timvir-border-color);}
-.az92cdb{color:currentColor;-webkit-text-decoration:none;text-decoration:none;background-image:linear-gradient(transparent, transparent 5px, #383838 5px, #383838);-webkit-background-position:bottom;background-position:bottom;-webkit-background-size:100% 6px;background-size:100% 6px;background-repeat:repeat-x;}.az92cdb:hover{background-image:linear-gradient(transparent, transparent 3px, #2bbc8a 3px, #2bbc8a);}.az92cdb:hover var(--az92cdb-0){box-shadow:inset 0 0 0 1px rgba(16, 22, 26, 0.5),inset 0 1px 4px rgba(16, 22, 26, 0.2);}.az92cdb:active var(--az92cdb-0){box-shadow:inset 0 0 0 1px rgba(16, 22, 26, 0.7),inset 0 1px 4px rgba(16, 22, 26, 0.4);background:var(--c-p-2);}
+  .timvir-s-158d8ml:hover {
+    --link-icon-transform: none;
+  }
 
+  .timvir-s-1xi2g7t:hover {
+    --link-icon-visibility-delay: 0s;
+  }
 
+  .timvir-s-1rb6emv:hover {
+    --link-icon-visibility: visible;
+  }
 
+  .timvir-s-1bezv82:active {
+    --code-background: var(--c-p-2);
+  }
 
+  .timvir-s-15m0p1m:active {
+    --code-box-shadow: inset 0 0 0 1px #10161ab3, inset 0 1px 4px #10161a66;
+  }
+
+  @media (width >= 48rem) {
+    .timvir-s-1i3za4p.timvir-s-1i3za4p {
+      --timvir-page-margin: 24px;
+    }
+  }
+}
+
+@layer priority2 {
+  .timvir-s-1t4wa6b {
+    margin: 0 0 2rem;
+  }
+
+  .timvir-s-2ijy0e {
+    margin: 1rem 0;
+  }
+
+  .timvir-s-gv6dkq {
+    margin: 2.5rem 0 1rem;
+  }
+
+  .timvir-s-1jnxms5 {
+    padding: 4px 6px 3px;
+  }
+
+  .timvir-s-12ek6fo {
+    padding: 6px 13px;
+  }
+}
+
+@layer priority3 {
+  html:not([dir="rtl"]) .timvir-s-1j43nte, html[dir="rtl"] .timvir-s-1j43nte {
+    background-position: bottom;
+  }
+
+  .timvir-s-1kgrkcs {
+    border-color: var(--c-p-2);
+  }
+
+  .timvir-s-j7gikm {
+    border-color: var(--timvir-border-color);
+  }
+
+  .timvir-s-1sxf85j {
+    border-radius: 5px;
+  }
+
+  .timvir-s-ng3xce {
+    border-style: none;
+  }
+
+  .timvir-s-1y0btm7 {
+    border-style: solid;
+  }
+
+  .timvir-s-mkeg23 {
+    border-width: 1px;
+  }
+
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+
+  .timvir-s-ysyzu8 {
+    overflow: auto;
+  }
+
+  .timvir-s-1hl2dhg {
+    text-decoration: none;
+  }
+
+  .timvir-s-2r93rw {
+    transition: opacity.2s, transform.2s, visibility 0s var(--link-icon-visibility-delay, .2s);
+  }
+}
+
+@layer priority4 {
+  .timvir-s-83z2og {
+    background-color: #fff;
+  }
+
+  .timvir-s-twfq29 {
+    background-color: currentColor;
+  }
+
+  .timvir-s-bspb1j {
+    background-color: var(--code-background, var(--timvir-secondary-background-color));
+  }
+
+  .timvir-s-1dlxito {
+    background-image: linear-gradient(#0000, #0000 5px, #383838 5px, #383838);
+  }
+
+  .timvir-s-1w3jsh0 {
+    background-repeat: repeat-x;
+  }
+
+  .timvir-s-odwsf6 {
+    background-size: 100% 6px;
+  }
+
+  .timvir-s-1mwwwfo {
+    border-collapse: collapse;
+  }
+
+  .timvir-s-1gukg7c {
+    border-spacing: 0;
+  }
+
+  .timvir-s-1vhptj2 {
+    box-shadow: var(--code-box-shadow, none);
+  }
+
+  .timvir-s-15rks2t {
+    color: currentColor;
+  }
+
+  .timvir-s-1heor9g {
+    color: inherit;
+  }
+
+  .timvir-s-vgvpxu {
+    color: var(--timvir-secondary-text-color);
+  }
+
+  .timvir-s-1lliihq {
+    display: block;
+  }
+
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
+  .timvir-s-1rg5ohu {
+    display: inline-block;
+  }
+
+  .timvir-s-sfzzmd {
+    font-size: .8em;
+  }
+
+  .timvir-s-6u19be {
+    font-size: .9375rem;
+  }
+
+  .timvir-s-1lkfr7t {
+    font-size: 1.0625rem;
+  }
+
+  .timvir-s-1hptrd9 {
+    font-size: 1.1rem;
+  }
+
+  .timvir-s-ngnso2 {
+    font-size: 1.5rem;
+  }
+
+  .timvir-s-579bpy {
+    font-size: 2rem;
+  }
+
+  .timvir-s-kjxd12 {
+    font-weight: 590;
+  }
+
+  .timvir-s-3xbxsf {
+    grid-auto-rows: min-content;
+  }
+
+  .timvir-s-12c0rpe {
+    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  }
+
+  .timvir-s-2sqz4w {
+    line-height: 1.125;
+  }
+
+  .timvir-s-1gst2wd {
+    line-height: 1.1666;
+  }
+
+  .timvir-s-1k2ygyi {
+    line-height: 1.4375;
+  }
+
+  .timvir-s-1c40qdn {
+    line-height: 1.4706;
+  }
+
+  .timvir-s-vpkmg4 {
+    opacity: .25;
+  }
+
+  .timvir-s-1i3gk9 {
+    opacity: var(--link-icon-opacity, 0);
+  }
+
+  .timvir-s-1n2onr6 {
+    position: relative;
+  }
+
+  .timvir-s-zqbfd8 {
+    text-indent: -.05em;
+  }
+
+  .timvir-s-6ah1hw {
+    transform: var(--link-icon-transform, translatex(-50%));
+  }
+
+  .timvir-s-xymvpz {
+    vertical-align: middle;
+  }
+
+  .timvir-s-o5ics5 {
+    visibility: var(--link-icon-visibility, hidden);
+  }
+
+  .timvir-s-7kswos:nth-child(2n) {
+    background-color: var(--c-p-0);
+  }
+
+  .timvir-s-g7t5vw:hover, .timvir-s-ene6ev:active {
+    background-image: linear-gradient(#0000, #0000 3px, #2bbc8a 3px, #2bbc8a);
+  }
+
+  @media (width >= 72rem) {
+    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
+      grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem[rc] minmax(0, 12rem) [rex] var(--timvir-page-margin) 1fr[re];
+    }
+  }
+
+  @media (width >= 48rem) {
+    .timvir-s-9q0i6z.timvir-s-9q0i6z {
+      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    }
+  }
+}
+
+@layer priority5 {
+  .timvir-s-1r4gg6b {
+    border-top-color: var(--c-p-2);
+  }
+
+  .timvir-s-13fuv20 {
+    border-top-style: solid;
+  }
+
+  .timvir-s-178xt8z {
+    border-top-width: 1px;
+  }
+
+  .timvir-s-1pazyae {
+    height: .9rem;
+  }
+
+  .timvir-s-jm9jq1 {
+    height: 1px;
+  }
+
+  .timvir-s-yi6m4r {
+    margin-bottom: 1rem;
+  }
+
+  .timvir-s-j3b58b {
+    margin-left: 0;
+  }
+
+  .timvir-s-16vho4v {
+    margin-left: 6px;
+  }
+
+  .timvir-s-1hpjnmm {
+    margin-top: 3rem;
+  }
+
+  .timvir-s-euugli {
+    min-width: 0;
+  }
+
+  .timvir-s-1y6pbyt {
+    width: .9rem;
+  }
+
+  .timvir-s-h8yej3 {
+    width: 100%;
+  }
+}

package/context/index.d.ts

@@ -3,11 +3,16 @@ import { Bus } from "timvir/bus";
 import { Node } from "../core/components/Page/types";
 export interface Value {
     bus: Bus;
+    articleComponents: {
+        [Key in keyof React.JSX.IntrinsicElements]?: React.FunctionComponent<React.JSX.IntrinsicElements[Key]> | keyof React.JSX.IntrinsicElements;
+    };
     location: {
         asPath: string;
         push: (path: string) => void;
     };
-    Link: React.ComponentType<React.ComponentProps<"a">>;
+    Link: React.ComponentType<React.ComponentProps<"a"> & {
+        href: string;
+    }>;
     blocks?: {
         WebLink?: {
             unfurl: (url: string) => Promise<any>;

package/core/components/Commands/Commands.d.ts

@@ -1,3 +1,7 @@
 import * as React from "react";
-declare function Commands(): React.ReactPortal | null;
+interface Props {
+    open: boolean;
+    onClose: () => void;
+}
+declare function Commands(props: Props): React.ReactPortal | null;
 export default Commands;

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

@@ -1,9 +1,11 @@
 import * as React from "react";
+import { Value } from "timvir/context";
 /**
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "div";
 interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+    Link: Value["Link"];
     prev?: {
         href: string;
         label: React.ReactNode;
@@ -15,5 +17,5 @@ interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
         context: React.ReactNode;
     };
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare function NavigationFooter(props: Props): import("react/jsx-runtime").JSX.Element;
+export default NavigationFooter;

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

@@ -1,4 +1,3 @@
-import { MDXProvider } from "@mdx-js/react";
 import * as React from "react";
 import { Value } from "timvir/context";
 import { Node } from "./types";
@@ -12,7 +11,15 @@ interface Props extends React.ComponentProps<typeof Root> {
         asPath: string;
         push: (path: string) => void;
     };
-    Link: React.ComponentType<React.ComponentProps<"a">>;
+    /**
+     * This component is used to render links between pages.
+     *
+     * Timvir will always pass the 'href' prop to this component. That is unlike
+     * the standard anchor element, which does not require it.
+     */
+    Link: React.ComponentType<React.ComponentProps<"a"> & {
+        href: string;
+    }>;
     /**
      * Overrides the built-in MDX component implementations.
      *
@@ -21,7 +28,9 @@ interface Props extends React.ComponentProps<typeof Root> {
      * highlighting. If you want to enable syntax highlighting in code blocks, use the
      * '<Code>' component from 'timvir/blocks'.
      */
-    mdxComponents?: React.ComponentPropsWithoutRef<typeof MDXProvider>["components"];
+    mdxComponents?: {
+        [Key in keyof React.JSX.IntrinsicElements]?: React.FunctionComponent<React.JSX.IntrinsicElements[Key]> | keyof React.JSX.IntrinsicElements;
+    };
     /**
      * Search Configuration. When provided, then the Search menu will appear in the sidebar.
      */

package/core/components/Page/docs/index.mdx

@@ -1,4 +1,4 @@
-import { Page, extendedWidth, fullWidth } from "timvir/core";
+import { Page } from "timvir/core";
 
 # Page
 
@@ -7,10 +7,10 @@ that the page MDX elements are correctly styled.
 
 The layout is currently based on CSS grid. The content can be placed into the following columns:
 
- * A center column for the main content. It has a maximum width (up to 48rem) that is suited for regular text.
- * An extended colum that is slightly wider than the main content (up to 72rem), giving a reasonable amount of space for text next to another block.
-   TODO: Document how to subdivide this space.
- * A full-width column which spans across the whole page.
+- A center column for the main content. It has a maximum width (up to 48rem) that is suited for regular text.
+- An extended colum that is slightly wider than the main content (up to 72rem), giving a reasonable amount of space for text next to another block.
+  TODO: Document how to subdivide this space.
+- A full-width column which spans across the whole page.
 
 Content placed into the full-width column extends to the very edges of the content area. Content placed into the center or extended column always has an appropriate amount of margin to the edges.
 
@@ -24,14 +24,47 @@ import { extendedWidth, fullWidth } from "timvir/page"
 </div>
 ```
 
-<div style={{ marginTop: 20, display: "flex", alignItems: "center", justifyContent: "center", height: 40, background: "teal", color: "white" }}>
-  default
+<div
+  style={{
+    gridColumn: "lc / rc",
+    marginTop: 20,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 40,
+    background: "teal",
+    color: "white",
+  }}
+>
+  {'default'}
 </div>
 
-<div className={extendedWidth} style={{ marginTop: 20, display: "flex", alignItems: "center", justifyContent: "center", height: 40, background: "teal", color: "white" }}>
-  extendedWidth
+<div
+  style={{
+    gridColumn: "lex / rex",
+    marginTop: 20,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 40,
+    background: "teal",
+    color: "white",
+  }}
+>
+  {'extendedWidth'}
 </div>
 
-<div className={fullWidth} style={{ marginTop: 20, display: "flex", alignItems: "center", justifyContent: "center", height: 40, background: "teal", color: "white" }}>
-  fullWidth
+<div
+  style={{
+    gridColumn: "le / re",
+    marginTop: 20,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 40,
+    background: "teal",
+    color: "white",
+  }}
+>
+  {'fullWidth'}
 </div>