timvir 0.2.48 → 0.2.50

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # timvir
 
+## 0.2.50
+
+### Patch Changes
+
+- **Add explicit types and import conditions to exports** ([#3708](https://github.com/timvir/timvir/pull/3708)) - This improves TypeScript IntelliSense and module resolution for modern build tools.
+
+## 0.2.49
+
+### Patch Changes
+
+- **Remove dependency on react-hotkeys-hook** ([#3660](https://github.com/timvir/timvir/pull/3660)) - Timvir has only relied on a small part of the full capability of react-hotkeys-hook. It was easy enough to re-implement the necessary functionality and drop the dependency.
+
 ## 0.2.48
 
 ## 0.2.47

package/blocks/Arbitrary/samples/basic.d.ts

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

package/blocks/Code/index.js

@@ -196,18 +196,33 @@ function Code(props$1, ref) {
       const stylexTransformer = {
         name: "stylex",
         pre(node) {
-          this.addClassToHast(node, {
+          const {
+            className
+          } = {
             className: "timvir-s-1lliihq timvir-s-1ghz6dp timvir-s-1g8o3q3 timvir-s-1d0dlzq"
-          }.className);
+          };
+          {
+            this.addClassToHast(node, className);
+          }
         },
         line(node, index) {
-          this.addClassToHast(node, {
+          const {
+            className
+          } = {
             className: "timvir-s-1rg5ohu timvir-s-h8yej3 timvir-s-e193im"
-          }.className);
+          };
+          {
+            this.addClassToHast(node, className);
+          }
           if (highlightedLines?.includes(index)) {
-            this.addClassToHast(node, {
+            const {
+              className
+            } = {
               className: "timvir-s-15fpjw5"
-            }.className);
+            };
+            {
+              this.addClassToHast(node, className);
+            }
           }
         }
       };

package/blocks/Code/samples/basic.d.ts

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

package/blocks/ColorBar/index.js

@@ -198,7 +198,7 @@ function ColorBar(props$1, ref) {
         opacity: selected ? 0 : 1
       },
       children: values.map((value, i, self) => /*#__PURE__*/jsx("div", {
-        className: "timvir-s-1vqgdyp timvir-s-1iyjqo2 timvir-s-rvj5dj timvir-s-13b6k1y timvir-s-1ypdohk timvir-s-zkaem6 timvir-s-15311qs timvir-s-inzabm timvir-s-1bxid8z",
+        className: "timvir-s-1vqgdyp timvir-s-1iyjqo2 timvir-s-rvj5dj timvir-s-13b6k1y timvir-s-1ypdohk timvir-s-zkaem6 timvir-s-12l46wj timvir-s-inzabm timvir-s-1bxid8z",
         children: /*#__PURE__*/jsx("div", {
           ...props(i === 0 ? styles.firstChild : null, i === self.length - 1 ? styles.lastChild : null, styles.valueInner),
           style: {

package/blocks/ColorBar/styles.css

@@ -7,8 +7,8 @@
     --timvir-b-ColorBar-value-borderRadiusDefault: 2px 0 0 2px;
   }
 
-  .timvir-s-15311qs {
-    --timvir-b-ColorBar-value-margin: 0;
+  .timvir-s-12l46wj {
+    --timvir-b-ColorBar-value-margin: 0px;
   }
 
   .timvir-s-1f9b50e {

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

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

package/blocks/Font/index.js

@@ -250,6 +250,9 @@ function Font(props$1, ref) {
         onClick: () => {
           if (infoRef && contentRef) {
             const infoParent = infoRef.parentElement;
+            if (!infoParent) {
+              return;
+            }
             if (infoParent.style.height === "0px") {
               infoParent.style.height = `${infoRef.getBoundingClientRect().height}px`;
               infoParent.style.opacity = "1";

package/blocks/Font/samples/basic.d.ts

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

package/blocks/Font/samples/timvir/body1.d.ts

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

package/blocks/Font/samples/timvir/caption.d.ts

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

package/blocks/Font/samples/timvir/h1.d.ts

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

package/blocks/Font/samples/timvir/h2.d.ts

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

package/blocks/Font/samples/timvir/h3.d.ts

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

package/blocks/Font/samples/timvir/h4.d.ts

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

package/blocks/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Descriptor } from "./types";
+import type { Descriptor } from "./types";
 /**
  * The underlying DOM element which is rendered by this component.
  */

package/blocks/Icon/internal/Canvas.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 interface Props {
     width: number;
     height: number;

package/blocks/Message/samples/basic.d.ts

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

package/blocks/Viewport/index.js

@@ -217,6 +217,9 @@ function Caption(props$1) {
         onClick: () => {
           if (codeRef) {
             const infoParent = codeRef.parentElement;
+            if (!infoParent) {
+              return;
+            }
             if (infoParent.style.height === "0px") {
               infoParent.style.height = `${codeRef.getBoundingClientRect().height}px`;
               infoParent.style.opacity = "1";
@@ -365,8 +368,11 @@ function Viewport(props$1, ref) {
     };
     const onMouseUp = () => {
       lock.current = "";
-      iframeRef.current.style.userSelect = "";
-      iframeRef.current.style.pointerEvents = "";
+      const iframeElement = iframeRef.current;
+      if (iframeElement) {
+        iframeElement.style.userSelect = "";
+        iframeElement.style.pointerEvents = "";
+      }
       setHeight(height => {
         setMaxHeight(height);
         return height;

package/blocks/WebLink/index.js

@@ -262,7 +262,7 @@ const styles = {
   }
 };
 async function defaultUnfurl(url) {
-  return fetch(`https://timvir.vercel.app/api/unfurl?url=${encodeURIComponent(url)}`).then(res => res.json());
+  return fetch(`https://timvir.dev/api/unfurl?url=${encodeURIComponent(url)}`).then(res => res.json());
 }
 
 export { WebLink_default as WebLink };

package/blocks/WebLink/samples/basic.d.ts

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

package/blocks/styles.css

@@ -391,8 +391,8 @@
     --timvir-b-ColorBar-value-borderRadiusDefault: 2px 0 0 2px;
   }
 
-  .timvir-s-15311qs {
-    --timvir-b-ColorBar-value-margin: 0;
+  .timvir-s-12l46wj {
+    --timvir-b-ColorBar-value-margin: 0px;
   }
 
   .timvir-s-1f9b50e {

package/bus/index.d.ts

@@ -1,5 +1,5 @@
-import { Subject } from "wonka";
-import { Message } from "./messages";
+import { type Subject } from "wonka";
+import type { Message } from "./messages";
 export * from "./messages";
 /**
  * The bus is a wonka Subject that represents a stream of Messages.

package/context/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { Bus } from "timvir/bus";
-import { Node } from "../core/components/Page/types";
+import type { Bus } from "timvir/bus";
+import type { Node } from "../core/components/Page/types";
 export interface Value {
     bus: Bus;
     articleComponents: {

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 declare const Root = "div";
 interface Props extends Omit<React.ComponentPropsWithoutRef<typeof Root>, "className" | "style"> {
     label?: React.ReactNode;

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

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

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { Value } from "timvir/context";
+import type * as React from "react";
+import type { Value } from "timvir/context";
 /**
  * The underlying DOM element which is rendered by this component.
  */

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

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

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { Value } from "timvir/context";
-import { Node } from "./types";
+import { type Value } from "timvir/context";
+import type { Node } from "./types";
 /**
  * The underlying DOM element which is rendered by this component.
  */

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

@@ -1,4 +1,4 @@
-import { Node } from "../types";
+import type { Node } from "../types";
 interface Props extends Node {
     depth: number;
 }

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

@@ -1,6 +1,6 @@
 import * as stylex from "@stylexjs/stylex";
 import * as React from "react";
-import { Node } from "../types";
+import type { Node } from "../types";
 interface Props extends Omit<React.ComponentPropsWithoutRef<"nav">, "className" | "style"> {
     sx: stylex.StyleXStyles;
     toc: readonly Node[];

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

@@ -1,4 +1,4 @@
-import { Node } from "../types";
+import type { Node } from "../types";
 interface Props extends Node {
     depth: number;
     active: boolean;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 export interface Node {
     readonly icon?: React.ReactElement<{
         className?: string;

package/core/index.d.ts

@@ -1,5 +1,5 @@
-import { Source } from "wonka";
-import { Message } from "timvir/bus";
+import { type Source } from "wonka";
+import type { Message } from "timvir/bus";
 import * as React from "react";
 export * from "./components/Footer";
 export * from "./components/Page";

package/core/index.js

@@ -1,11 +1,10 @@
 'use client';
-import { pipe, filter, subscribe } from 'wonka';
+import { pipe, subscribe, filter } from 'wonka';
 import { useContext, Provider } from 'timvir/context';
 export { useContext } from 'timvir/context';
 import * as React from 'react';
 import * as builtins from 'timvir/builtins';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { makeBus } from 'timvir/bus';
 import * as ReactDOM from 'react-dom';
 import { defaultSearch } from 'timvir/search';
@@ -48,7 +47,7 @@ function Footer(props, ref) {
       children: /*#__PURE__*/jsxs("div", {
         className: "timvir-s-htle6 timvir-s-euugli",
         children: ["Built with", " ", /*#__PURE__*/jsx("a", {
-          href: "https://timvir.vercel.app",
+          href: "https://timvir.dev",
           className: "timvir-s-1heor9g timvir-s-1hl2dhg timvir-s-1dlxito timvir-s-1j43nte timvir-s-odwsf6 timvir-s-1w3jsh0 timvir-s-g7t5vw",
           children: "Timvir"
         })]
@@ -668,9 +667,10 @@ function Sidebar(props$1) {
   } = useContext();
   const [isMenuOpen, setMenuOpen] = React.useState(false);
   React.useEffect(() => {
-    const scrollLockClassList = {
+    const className = {
       className: "timvir-s-1rife3k timvir-s-ixxii4 timvir-s-13vifvy timvir-s-h8yej3"
-    }.className.split(" ");
+    }.className;
+    const scrollLockClassList = className.split(" ");
     for (const className of scrollLockClassList) {
       document.body.classList.toggle(className, isMenuOpen);
     }
@@ -824,27 +824,31 @@ function Page(props$1, ref) {
     blocks,
     toc
   }), [bus, mdxComponents, location, Link, blocks, toc]);
-  useHotkeys("meta+p", ev => {
+  useHotkeys({
+    modifiers: ["meta"],
+    key: "p"
+  }, ev => {
     ev.preventDefault();
     setState({
       search: {
         open: !state.search.open
       }
     });
-  }, {
-    enableOnFormTags: true
   });
-  useHotkeys("meta+k", ev => {
+  useHotkeys({
+    modifiers: ["meta"],
+    key: "k"
+  }, ev => {
     ev.preventDefault();
     setState({
       search: {
         open: !state.search.open
       }
     });
-  }, {
-    enableOnFormTags: ["INPUT"]
   });
-  useHotkeys("escape", ev => {
+  useHotkeys({
+    key: "escape"
+  }, ev => {
     if (state.search.open) {
       ev.preventDefault();
       setState({
@@ -853,8 +857,6 @@ function Page(props$1, ref) {
         }
       });
     }
-  }, {
-    enableOnFormTags: true
   });
   return /*#__PURE__*/jsxs(Provider, {
     value: context,
@@ -958,6 +960,39 @@ const styles = {
     $$css: true
   }
 };
+function useHotkeys(trigger, callback) {
+  const ref = React.useRef({
+    trigger,
+    callback
+  });
+  React.useLayoutEffect(() => {
+    ref.current = {
+      trigger,
+      callback
+    };
+  });
+  React.useEffect(() => {
+    const handleKeyDown = event => {
+      if (ref.current.trigger.key.toLowerCase() !== event.key.toLowerCase()) {
+        return;
+      }
+      {
+        const allModifiers = ["alt", "ctrl", "meta", "shift"];
+        const expectedModifiers = ref.current.trigger.modifiers ?? [];
+        for (const modifier of allModifiers) {
+          if (event[`${modifier}Key`] !== expectedModifiers.includes(modifier)) {
+            return;
+          }
+        }
+      }
+      ref.current.callback(event);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+}
 
 /**
  * A mailbox is a wonka source which receives messages for one specific block (identified by its id).

package/package.json

@@ -1,19 +1,43 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.48",
+  "version": "0.2.50",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
     "./styles.css": "./styles.css",
-    "./blocks": "./blocks/index.js",
-    "./blocks/*": "./blocks/*/index.js",
-    "./builtins": "./builtins/index.js",
-    "./bus": "./bus/index.js",
-    "./context": "./context/index.js",
-    "./core": "./core/index.js",
-    "./hooks": "./hooks/index.js",
-    "./search": "./search/index.js"
+    "./blocks": {
+      "types": "./blocks/index.d.ts",
+      "import": "./blocks/index.js"
+    },
+    "./blocks/*": {
+      "types": "./blocks/*/index.d.ts",
+      "import": "./blocks/*/index.js"
+    },
+    "./builtins": {
+      "types": "./builtins/index.d.ts",
+      "import": "./builtins/index.js"
+    },
+    "./bus": {
+      "types": "./bus/index.d.ts",
+      "import": "./bus/index.js"
+    },
+    "./context": {
+      "types": "./context/index.d.ts",
+      "import": "./context/index.js"
+    },
+    "./core": {
+      "types": "./core/index.d.ts",
+      "import": "./core/index.js"
+    },
+    "./hooks": {
+      "types": "./hooks/index.d.ts",
+      "import": "./hooks/index.js"
+    },
+    "./search": {
+      "types": "./search/index.d.ts",
+      "import": "./search/index.js"
+    }
   },
   "dependencies": {
     "bytestring": "^1",
@@ -22,8 +46,7 @@
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19",
-    "react-hotkeys-hook": "^4 || ^5"
+    "react-dom": "^17 || ^18 || ^19"
   },
   "repository": {
     "type": "git",

package/search/Search/Search.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Node } from "timvir/core";
+import type { Node } from "timvir/core";
 interface Props extends React.ComponentPropsWithoutRef<"div"> {
     open?: boolean;
     onClose?: (ev: React.SyntheticEvent<HTMLElement>) => void;

package/styles.css

@@ -1692,8 +1692,8 @@ body {
     --timvir-b-ColorBar-value-borderRadiusDefault: 2px 0 0 2px;
   }
 
-  .timvir-s-15311qs {
-    --timvir-b-ColorBar-value-margin: 0;
+  .timvir-s-12l46wj {
+    --timvir-b-ColorBar-value-margin: 0px;
   }
 
   .timvir-s-1f9b50e {