@hyperbook/markdown 0.3.4 → 0.4.1

package/dist/Markdown.d.ts

@@ -1,5 +1,5 @@
 import "./index.css";
-export declare type MarkdownProps = {
+export type MarkdownProps = {
     children: string;
 };
 export declare const Markdown: ({ children }: MarkdownProps) => JSX.Element;

package/dist/index.cjs.js

@@ -117,9 +117,10 @@ var Code = ({ children, className }) => {
   const copyCode = () => {
     if (navigator.clipboard && ref.current) {
       const text = ref.current.innerText;
-      navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
+      navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      });
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, {
@@ -131,7 +132,7 @@ var Code = ({ children, className }) => {
       }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
         className: "copy",
-        onClick: copyCode,
+        onPointerDown: copyCode,
         "aria-label": "Copy Code",
         children: copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MdDone, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MdContentCopy, {})
       })
@@ -142,8 +143,18 @@ var Code = ({ children, className }) => {
 // src/Link.tsx
 var import_provider2 = require("@hyperbook/provider");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function formatUrl(url) {
+  var doubleSlash = url.split("//");
+  var formatted = doubleSlash.map(
+    (str) => str.replace(new RegExp("(?<after>:)", "giu"), "$1<wbr>").replace(new RegExp("(?<before>[/~.,\\-_?#%])", "giu"), "<wbr>$1").replace(new RegExp("(?<beforeAndAfter>[=&])", "giu"), "<wbr>$1<wbr>")
+  ).join("//<wbr>");
+  return formatted;
+}
 var Link = ({ href, title, children }) => {
   const L = (0, import_provider2.useLink)();
+  if (href) {
+    href = formatUrl(href);
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(L, {
     href,
     title,
@@ -249,11 +260,15 @@ var Headings = ({ level, children }) => {
 
 // src/Image.tsx
 var import_provider4 = require("@hyperbook/provider");
+var import_react2 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Image = ({ src, title, alt }) => {
   const makeUrl = (0, import_provider4.useMakeUrl)();
+  const [full, setFull] = (0, import_react2.useState)(false);
   src = makeUrl(src, "public");
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("figure", {
+    onClick: () => setFull((f) => !f),
+    className: full ? "lightbox" : void 0,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", {
         src,

package/dist/index.cjs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts", "../src/Markdown.tsx", "../src/Code.tsx", "../src/Link.tsx", "../src/Table.tsx", "../src/Headings.tsx", "../src/Image.tsx"],
-  "sourcesContent": ["export * from \"./Markdown\";\n", "import ReactMarkdown from \"react-markdown\";\nimport remarkDirective from \"remark-directive\";\nimport remarkDirectiveRehype from \"remark-directive-rehype\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport remarkGemoji from \"remark-gemoji\";\nimport remarkUnwrapImages from \"remark-unwrap-images\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { useDirectives } from \"@hyperbook/provider\";\nimport { visit, SKIP } from \"unist-util-visit\";\nimport { Code } from \"./Code\";\nimport { Link } from \"./Link\";\nimport { Table, Td, Th, Tr } from \"./Table\";\nimport { Headings } from \"./Headings\";\nimport { Image } from \"./Image\";\n\nimport \"./index.css\";\nimport { Transformer } from \"unified\";\nimport { BuildVisitor } from \"unist-util-visit/complex-types\";\n\nconst remarkRemoveComments: () => Transformer = () => (tree) => {\n  const htmlCommentRegex = /<!--([\\s\\S]*?)-->/g;\n\n  const handler: BuildVisitor = (node, index, parent) => {\n    const isComment = node.value.match(htmlCommentRegex);\n\n    if (isComment) {\n      // remove node\n      parent.children.splice(index, 1);\n      // Do not traverse `node`, continue at the node *now* at `index`. http://unifiedjs.com/learn/recipe/remove-node/\n      return [SKIP, index];\n    }\n  };\n\n  visit(tree, \"html\", handler);\n\n  visit(tree, \"jsx\", handler);\n};\n\nexport type MarkdownProps = {\n  children: string;\n};\n\nexport const Markdown = ({ children }: MarkdownProps) => {\n  const directives = useDirectives();\n\n  return (\n    <ReactMarkdown\n      className=\"hyperbook-markdown\"\n      components={{\n        ...directives,\n        a: Link,\n        code: Code,\n        td: Td,\n        th: Th,\n        table: Table,\n        tr: Tr,\n        h1: Headings,\n        h2: Headings,\n        h3: Headings,\n        h4: Headings,\n        h5: Headings,\n        h6: Headings,\n        img: Image,\n      }}\n      remarkPlugins={[\n        remarkRemoveComments,\n        remarkDirective,\n        remarkDirectiveRehype,\n        remarkGfm,\n        remarkMath,\n        remarkGemoji,\n        remarkUnwrapImages,\n      ]}\n      rehypePlugins={[\n        rehypeKatex,\n        [rehypeHighlight, { ignoreMissing: true, plainText: [\"mermaid\"] }],\n      ]}\n      skipHtml={false}\n    >\n      {children}\n    </ReactMarkdown>\n  );\n};\n", "import { useDirectives } from \"@hyperbook/provider\";\nimport { Fragment, useRef, useState } from \"react\";\nimport { Components } from \"react-markdown\";\n\nconst MdContentCopy = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      strokeWidth=\"0\"\n      height=\"1em\"\n      width=\"1em\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\" />\n    </svg>\n  );\n};\n\nconst MdDone = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      strokeWidth=\"0\"\n      height=\"1em\"\n      width=\"1em\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n    </svg>\n  );\n};\n\nexport const Code: Components[\"code\"] = ({ children, className }) => {\n  const directives = useDirectives();\n  if (className === \"language-mermaid\" && directives[\"mermaid\"]) {\n    const Mermaid = directives[\"mermaid\"];\n    return <Mermaid children={children} />;\n  }\n\n  const ref = useRef<HTMLElement>(null);\n  const [copied, setCopied] = useState(false);\n  const copyCode = () => {\n    if (navigator.clipboard && ref.current) {\n      const text = ref.current.innerText;\n      navigator.clipboard.writeText(text);\n\n      setCopied(true);\n\n      setTimeout(() => setCopied(false), 2000);\n    }\n  };\n\n  return (\n    <Fragment>\n      <code ref={ref} className={className}>\n        {children}\n      </code>\n      <button className=\"copy\" onClick={copyCode} aria-label=\"Copy Code\">\n        {copied ? <MdDone /> : <MdContentCopy />}\n      </button>\n    </Fragment>\n  );\n};\n", "import { useLink } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\nexport const Link: Components[\"a\"] = ({ href, title, children }) => {\n  const L = useLink();\n  return (\n    <L href={href} title={title}>\n      {children}\n    </L>\n  );\n};\n", "import { ReactNode } from \"react\";\nimport { Components } from \"react-markdown\";\n\nlet tableHeaders: ReactNode[][] = [];\nlet tdIndex = 0;\n\nexport const Table: Components[\"table\"] = ({ children, style }) => {\n  tableHeaders = [];\n  return <table style={style}>{children}</table>;\n};\n\nexport const Tr: Components[\"tr\"] = ({ children, style }) => {\n  tdIndex = 0;\n  return <tr style={style}>{children}</tr>;\n};\n\nexport const Td: Components[\"td\"] = ({ children, style }) => {\n  return (\n    <td data-label={tableHeaders[tdIndex++]} style={style}>\n      {children}\n    </td>\n  );\n};\n\nexport const Th: Components[\"th\"] = ({ children, style }) => {\n  tableHeaders.push(children);\n  return <th style={style}>{children}</th>;\n};\n", "import { useBookmark, useConfig } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\nexport const makeAnchor = (heading: string) => {\n  // If we have a heading, make it lower case\n  let anchor = heading.toLowerCase();\n\n  // Clean anchor (replace special characters whitespaces).\n  // Alternatively, use encodeURIComponent() if you don't care about\n  // pretty anchor links\n  anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, \"\");\n  anchor = anchor.replace(/ /g, \"-\");\n\n  return anchor;\n};\n\nexport const Headings: Components[\"h1\"] = ({ level, children }) => {\n  const config = useConfig();\n  const bookmarksConfig = config?.elements?.bookmarks;\n  // Access actual (string) value of heading\n  const heading = children?.[0] || \"\";\n\n  // If we have a heading, make it lower case\n  let anchor = typeof heading === \"string\" ? makeAnchor(heading) : \"\";\n\n  const label = typeof heading === \"string\" ? heading : anchor;\n\n  const [bookmark, toggleBookmark] = useBookmark(anchor, label);\n\n  // Utility\n  const container = (children: React.ReactNode): JSX.Element => (\n    <>\n      <a className=\"heading\" id={anchor} href={`#${anchor}`}>\n        <span>{children}</span>\n      </a>\n      {bookmarksConfig !== false && (\n        <button\n          className={bookmark ? \"bookmark active\" : \"bookmark\"}\n          onClick={() => toggleBookmark()}\n          title=\"Bookmark\"\n        >\n          \uD83D\uDD16\n        </button>\n      )}\n    </>\n  );\n\n  switch (level) {\n    case 1:\n      return <h1>{container(children)}</h1>;\n    case 2:\n      return <h2>{container(children)}</h2>;\n    case 3:\n      return <h3>{container(children)}</h3>;\n    case 4:\n      return <h4>{container(children)}</h4>;\n    case 5:\n      return <h5>{container(children)}</h5>;\n\n    default:\n      return <h6>{container(children)}</h6>;\n  }\n};\n", "import { useMakeUrl } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\nexport const Image: Components[\"img\"] = ({ src, title, alt }) => {\n  const makeUrl = useMakeUrl();\n  src = makeUrl(src, \"public\");\n\n  return (\n    <figure>\n      <img src={src} alt={alt} />\n      {title && <figcaption>{title}</figcaption>}\n    </figure>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["import_provider", "import_provider", "import_jsx_runtime", "import_jsx_runtime", "import_provider", "import_jsx_runtime", "children", "import_provider", "import_jsx_runtime", "import_jsx_runtime", "ReactMarkdown", "remarkDirective", "remarkDirectiveRehype", "remarkGfm", "remarkMath", "remarkGemoji", "remarkUnwrapImages", "rehypeKatex", "rehypeHighlight"]
+  "sourcesContent": ["export * from \"./Markdown\";\n", "import ReactMarkdown from \"react-markdown\";\nimport remarkDirective from \"remark-directive\";\nimport remarkDirectiveRehype from \"remark-directive-rehype\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport remarkGemoji from \"remark-gemoji\";\nimport remarkUnwrapImages from \"remark-unwrap-images\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { useDirectives } from \"@hyperbook/provider\";\nimport { visit, SKIP } from \"unist-util-visit\";\nimport { Code } from \"./Code\";\nimport { Link } from \"./Link\";\nimport { Table, Td, Th, Tr } from \"./Table\";\nimport { Headings } from \"./Headings\";\nimport { Image } from \"./Image\";\n\nimport \"./index.css\";\nimport { Transformer } from \"unified\";\nimport { BuildVisitor } from \"unist-util-visit/complex-types\";\n\nconst remarkRemoveComments: () => Transformer = () => (tree) => {\n  const htmlCommentRegex = /<!--([\\s\\S]*?)-->/g;\n\n  const handler: BuildVisitor = (node, index, parent) => {\n    const isComment = node.value.match(htmlCommentRegex);\n\n    if (isComment) {\n      // remove node\n      parent.children.splice(index, 1);\n      // Do not traverse `node`, continue at the node *now* at `index`. http://unifiedjs.com/learn/recipe/remove-node/\n      return [SKIP, index];\n    }\n  };\n\n  visit(tree, \"html\", handler);\n\n  visit(tree, \"jsx\", handler);\n};\n\nexport type MarkdownProps = {\n  children: string;\n};\n\nexport const Markdown = ({ children }: MarkdownProps) => {\n  const directives = useDirectives();\n\n  return (\n    <ReactMarkdown\n      className=\"hyperbook-markdown\"\n      components={{\n        ...directives,\n        a: Link,\n        code: Code,\n        td: Td,\n        th: Th,\n        table: Table,\n        tr: Tr,\n        h1: Headings,\n        h2: Headings,\n        h3: Headings,\n        h4: Headings,\n        h5: Headings,\n        h6: Headings,\n        img: Image,\n      }}\n      remarkPlugins={[\n        remarkRemoveComments,\n        remarkDirective,\n        remarkDirectiveRehype,\n        remarkGfm,\n        remarkMath,\n        remarkGemoji,\n        remarkUnwrapImages,\n      ]}\n      rehypePlugins={[\n        rehypeKatex,\n        [rehypeHighlight, { ignoreMissing: true, plainText: [\"mermaid\"] }],\n      ]}\n      skipHtml={false}\n    >\n      {children}\n    </ReactMarkdown>\n  );\n};\n", "import { useDirectives } from \"@hyperbook/provider\";\nimport { Fragment, useRef, useState } from \"react\";\nimport { Components } from \"react-markdown\";\n\nconst MdContentCopy = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      strokeWidth=\"0\"\n      height=\"1em\"\n      width=\"1em\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\" />\n    </svg>\n  );\n};\n\nconst MdDone = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      strokeWidth=\"0\"\n      height=\"1em\"\n      width=\"1em\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n    </svg>\n  );\n};\n\nexport const Code: Components[\"code\"] = ({ children, className }) => {\n  const directives = useDirectives();\n  if (className === \"language-mermaid\" && directives[\"mermaid\"]) {\n    const Mermaid = directives[\"mermaid\"];\n    return <Mermaid children={children} />;\n  }\n\n  const ref = useRef<HTMLElement>(null);\n  const [copied, setCopied] = useState(false);\n  const copyCode = () => {\n    if (navigator.clipboard && ref.current) {\n      const text = ref.current.innerText;\n      navigator.clipboard.writeText(text).then(() => {\n        setCopied(true);\n\n        setTimeout(() => setCopied(false), 2000);\n      });\n    }\n  };\n\n  return (\n    <Fragment>\n      <code ref={ref} className={className}>\n        {children}\n      </code>\n      <button className=\"copy\" onPointerDown={copyCode} aria-label=\"Copy Code\">\n        {copied ? <MdDone /> : <MdContentCopy />}\n      </button>\n    </Fragment>\n  );\n};\n", "import { useLink } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\n// see: https://css-tricks.com/better-line-breaks-for-long-urls/\nfunction formatUrl(url: string) {\n  // Split the URL into an array to distinguish double slashes from single slashes\n  var doubleSlash = url.split(\"//\");\n\n  // Format the strings on either side of double slashes separately\n  var formatted = doubleSlash\n    .map(\n      (str) =>\n        // Insert a word break opportunity after a colon\n        str\n          .replace(/(?<after>:)/giu, \"$1<wbr>\")\n          // Before a single slash, tilde, period, comma, hyphen, underline, question mark, number sign, or percent symbol\n          .replace(/(?<before>[/~.,\\-_?#%])/giu, \"<wbr>$1\")\n          // Before and after an equals sign or ampersand\n          .replace(/(?<beforeAndAfter>[=&])/giu, \"<wbr>$1<wbr>\")\n      // Reconnect the strings with word break opportunities after double slashes\n    )\n    .join(\"//<wbr>\");\n\n  return formatted;\n}\n\nexport const Link: Components[\"a\"] = ({ href, title, children }) => {\n  const L = useLink();\n\n  if (href) {\n    href = formatUrl(href);\n  }\n\n  return (\n    <L href={href} title={title}>\n      {children}\n    </L>\n  );\n};\n", "import { ReactNode } from \"react\";\nimport { Components } from \"react-markdown\";\n\nlet tableHeaders: ReactNode[][] = [];\nlet tdIndex = 0;\n\nexport const Table: Components[\"table\"] = ({ children, style }) => {\n  tableHeaders = [];\n  return <table style={style}>{children}</table>;\n};\n\nexport const Tr: Components[\"tr\"] = ({ children, style }) => {\n  tdIndex = 0;\n  return <tr style={style}>{children}</tr>;\n};\n\nexport const Td: Components[\"td\"] = ({ children, style }) => {\n  return (\n    <td data-label={tableHeaders[tdIndex++]} style={style}>\n      {children}\n    </td>\n  );\n};\n\nexport const Th: Components[\"th\"] = ({ children, style }) => {\n  tableHeaders.push(children);\n  return <th style={style}>{children}</th>;\n};\n", "import { useBookmark, useConfig } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\nexport const makeAnchor = (heading: string) => {\n  // If we have a heading, make it lower case\n  let anchor = heading.toLowerCase();\n\n  // Clean anchor (replace special characters whitespaces).\n  // Alternatively, use encodeURIComponent() if you don't care about\n  // pretty anchor links\n  anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, \"\");\n  anchor = anchor.replace(/ /g, \"-\");\n\n  return anchor;\n};\n\nexport const Headings: Components[\"h1\"] = ({ level, children }) => {\n  const config = useConfig();\n  const bookmarksConfig = config?.elements?.bookmarks;\n  // Access actual (string) value of heading\n  const heading = children?.[0] || \"\";\n\n  // If we have a heading, make it lower case\n  let anchor = typeof heading === \"string\" ? makeAnchor(heading) : \"\";\n\n  const label = typeof heading === \"string\" ? heading : anchor;\n\n  const [bookmark, toggleBookmark] = useBookmark(anchor, label);\n\n  // Utility\n  const container = (children: React.ReactNode): JSX.Element => (\n    <>\n      <a className=\"heading\" id={anchor} href={`#${anchor}`}>\n        <span>{children}</span>\n      </a>\n      {bookmarksConfig !== false && (\n        <button\n          className={bookmark ? \"bookmark active\" : \"bookmark\"}\n          onClick={() => toggleBookmark()}\n          title=\"Bookmark\"\n        >\n          \uD83D\uDD16\n        </button>\n      )}\n    </>\n  );\n\n  switch (level) {\n    case 1:\n      return <h1>{container(children)}</h1>;\n    case 2:\n      return <h2>{container(children)}</h2>;\n    case 3:\n      return <h3>{container(children)}</h3>;\n    case 4:\n      return <h4>{container(children)}</h4>;\n    case 5:\n      return <h5>{container(children)}</h5>;\n\n    default:\n      return <h6>{container(children)}</h6>;\n  }\n};\n", "import { useMakeUrl } from \"@hyperbook/provider\";\nimport { useState } from \"react\";\nimport { Components } from \"react-markdown\";\n\nexport const Image: Components[\"img\"] = ({ src, title, alt }) => {\n  const makeUrl = useMakeUrl();\n  const [full, setFull] = useState(false);\n  src = makeUrl(src, \"public\");\n\n  return (\n    <figure\n      onClick={() => setFull((f) => !f)}\n      className={full ? \"lightbox\" : undefined}\n    >\n      <img src={src} alt={alt} />\n      {title && <figcaption>{title}</figcaption>}\n    </figure>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,4BAA0B;AAC1B,8BAA4B;AAC5B,qCAAkC;AAClC,wBAAsB;AACtB,yBAAuB;AACvB,2BAAyB;AACzB,kCAA+B;AAC/B,0BAAwB;AACxB,8BAA4B;AAC5B,IAAAA,mBAA8B;AAC9B,8BAA4B;;;ACV5B,sBAA8B;AAC9B,mBAA2C;AAKvC;AAFJ,IAAM,gBAAgB,MAAM;AAC1B,SACE,6CAAC;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,aAAY;AAAA,IACZ,QAAO;AAAA,IACP,OAAM;AAAA,IACN,SAAQ;AAAA,IAER;AAAA,kDAAC;AAAA,QAAK,GAAE;AAAA,QAAgB,MAAK;AAAA,OAAO;AAAA,MACpC,4CAAC;AAAA,QAAK,GAAE;AAAA,OAAkI;AAAA;AAAA,GAC5I;AAEJ;AAEA,IAAM,SAAS,MAAM;AACnB,SACE,6CAAC;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,aAAY;AAAA,IACZ,QAAO;AAAA,IACP,OAAM;AAAA,IACN,SAAQ;AAAA,IAER;AAAA,kDAAC;AAAA,QAAK,GAAE;AAAA,QAAgB,MAAK;AAAA,OAAO;AAAA,MACpC,4CAAC;AAAA,QAAK,GAAE;AAAA,OAAqD;AAAA;AAAA,GAC/D;AAEJ;AAEO,IAAM,OAA2B,CAAC,EAAE,UAAU,UAAU,MAAM;AACnE,QAAM,iBAAa,+BAAc;AACjC,MAAI,cAAc,sBAAsB,WAAW,YAAY;AAC7D,UAAM,UAAU,WAAW;AAC3B,WAAO,4CAAC;AAAA,MAAQ;AAAA,KAAoB;AAAA,EACtC;AAEA,QAAM,UAAM,qBAAoB,IAAI;AACpC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,WAAW,MAAM;AACrB,QAAI,UAAU,aAAa,IAAI,SAAS;AACtC,YAAM,OAAO,IAAI,QAAQ;AACzB,gBAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAC7C,kBAAU,IAAI;AAEd,mBAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,MACzC,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAAK;AAAA,QAAU;AAAA,QACb;AAAA,OACH;AAAA,MACA,4CAAC;AAAA,QAAO,WAAU;AAAA,QAAO,eAAe;AAAA,QAAU,cAAW;AAAA,QAC1D,mBAAS,4CAAC,UAAO,IAAK,4CAAC,iBAAc;AAAA,OACxC;AAAA;AAAA,GACF;AAEJ;;;ACpEA,IAAAC,mBAAwB;AAkCpB,IAAAC,sBAAA;AA9BJ,SAAS,UAAU,KAAa;AAE9B,MAAI,cAAc,IAAI,MAAM,IAAI;AAGhC,MAAI,YAAY,YACb;AAAA,IACC,CAAC,QAEC,IACG,QAAQ,WAAC,eAAY,KAAG,GAAE,SAAS,EAEnC,QAAQ,WAAC,4BAAwB,KAAG,GAAE,SAAS,EAE/C,QAAQ,WAAC,2BAAwB,KAAG,GAAE,cAAc;AAAA,EAE3D,EACC,KAAK,SAAS;AAEjB,SAAO;AACT;AAEO,IAAM,OAAwB,CAAC,EAAE,MAAM,OAAO,SAAS,MAAM;AAClE,QAAM,QAAI,0BAAQ;AAElB,MAAI,MAAM;AACR,WAAO,UAAU,IAAI;AAAA,EACvB;AAEA,SACE,6CAAC;AAAA,IAAE;AAAA,IAAY;AAAA,IACZ;AAAA,GACH;AAEJ;;;AC9BS,IAAAC,sBAAA;AALT,IAAI,eAA8B,CAAC;AACnC,IAAI,UAAU;AAEP,IAAM,QAA6B,CAAC,EAAE,UAAU,MAAM,MAAM;AACjE,iBAAe,CAAC;AAChB,SAAO,6CAAC;AAAA,IAAM;AAAA,IAAe;AAAA,GAAS;AACxC;AAEO,IAAM,KAAuB,CAAC,EAAE,UAAU,MAAM,MAAM;AAC3D,YAAU;AACV,SAAO,6CAAC;AAAA,IAAG;AAAA,IAAe;AAAA,GAAS;AACrC;AAEO,IAAM,KAAuB,CAAC,EAAE,UAAU,MAAM,MAAM;AAC3D,SACE,6CAAC;AAAA,IAAG,cAAY,aAAa;AAAA,IAAY;AAAA,IACtC;AAAA,GACH;AAEJ;AAEO,IAAM,KAAuB,CAAC,EAAE,UAAU,MAAM,MAAM;AAC3D,eAAa,KAAK,QAAQ;AAC1B,SAAO,6CAAC;AAAA,IAAG;AAAA,IAAe;AAAA,GAAS;AACrC;;;AC3BA,IAAAC,mBAAuC;AA+BnC,IAAAC,sBAAA;AA5BG,IAAM,aAAa,CAAC,YAAoB;AAE7C,MAAI,SAAS,QAAQ,YAAY;AAKjC,WAAS,OAAO,QAAQ,kBAAkB,EAAE;AAC5C,WAAS,OAAO,QAAQ,MAAM,GAAG;AAEjC,SAAO;AACT;AAEO,IAAM,WAA6B,CAAC,EAAE,OAAO,SAAS,MAAM;AAhBnE;AAiBE,QAAM,aAAS,4BAAU;AACzB,QAAM,mBAAkB,sCAAQ,aAAR,mBAAkB;AAE1C,QAAM,WAAU,qCAAW,OAAM;AAGjC,MAAI,SAAS,OAAO,YAAY,WAAW,WAAW,OAAO,IAAI;AAEjE,QAAM,QAAQ,OAAO,YAAY,WAAW,UAAU;AAEtD,QAAM,CAAC,UAAU,cAAc,QAAI,8BAAY,QAAQ,KAAK;AAG5D,QAAM,YAAY,CAACC,cACjB;AAAA,IACE;AAAA,mDAAC;AAAA,QAAE,WAAU;AAAA,QAAU,IAAI;AAAA,QAAQ,MAAM,IAAI;AAAA,QAC3C,uDAAC;AAAA,UAAM,UAAAA;AAAA,SAAS;AAAA,OAClB;AAAA,MACC,oBAAoB,SACnB,6CAAC;AAAA,QACC,WAAW,WAAW,oBAAoB;AAAA,QAC1C,SAAS,MAAM,eAAe;AAAA,QAC9B,OAAM;AAAA,QACP;AAAA,OAED;AAAA;AAAA,GAEJ;AAGF,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,6CAAC;AAAA,QAAI,oBAAU,QAAQ;AAAA,OAAE;AAAA,IAClC,KAAK;AACH,aAAO,6CAAC;AAAA,QAAI,oBAAU,QAAQ;AAAA,OAAE;AAAA,IAClC,KAAK;AACH,aAAO,6CAAC;AAAA,QAAI,oBAAU,QAAQ;AAAA,OAAE;AAAA,IAClC,KAAK;AACH,aAAO,6CAAC;AAAA,QAAI,oBAAU,QAAQ;AAAA,OAAE;AAAA,IAClC,KAAK;AACH,aAAO,6CAAC;AAAA,QAAI,oBAAU,QAAQ;AAAA,OAAE;AAAA,IAElC;AACE,aAAO,6CAAC;AAAA,QAAI,oBAAU,QAAQ;AAAA,OAAE;AAAA,EACpC;AACF;;;AC9DA,IAAAC,mBAA2B;AAC3B,IAAAC,gBAAyB;AASrB,IAAAC,sBAAA;AANG,IAAM,QAA2B,CAAC,EAAE,KAAK,OAAO,IAAI,MAAM;AAC/D,QAAM,cAAU,6BAAW;AAC3B,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AACtC,QAAM,QAAQ,KAAK,QAAQ;AAE3B,SACE,8CAAC;AAAA,IACC,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IAChC,WAAW,OAAO,aAAa;AAAA,IAE/B;AAAA,mDAAC;AAAA,QAAI;AAAA,QAAU;AAAA,OAAU;AAAA,MACxB,SAAS,6CAAC;AAAA,QAAY;AAAA,OAAM;AAAA;AAAA,GAC/B;AAEJ;;;AL8BI,IAAAC,sBAAA;AA3BJ,IAAM,uBAA0C,MAAM,CAAC,SAAS;AAC9D,QAAM,mBAAmB;AAEzB,QAAM,UAAwB,CAAC,MAAM,OAAO,WAAW;AACrD,UAAM,YAAY,KAAK,MAAM,MAAM,gBAAgB;AAEnD,QAAI,WAAW;AAEb,aAAO,SAAS,OAAO,OAAO,CAAC;AAE/B,aAAO,CAAC,8BAAM,KAAK;AAAA,IACrB;AAAA,EACF;AAEA,qCAAM,MAAM,QAAQ,OAAO;AAE3B,qCAAM,MAAM,OAAO,OAAO;AAC5B;AAMO,IAAM,WAAW,CAAC,EAAE,SAAS,MAAqB;AACvD,QAAM,iBAAa,gCAAc;AAEjC,SACE,6CAAC,sBAAAC,SAAA;AAAA,IACC,WAAU;AAAA,IACV,YAAY,iCACP,aADO;AAAA,MAEV,GAAG;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,IACP;AAAA,IACA,eAAe;AAAA,MACb;AAAA,MACA,wBAAAC;AAAA,MACA,+BAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,4BAAAC;AAAA,IACF;AAAA,IACA,eAAe;AAAA,MACb,oBAAAC;AAAA,MACA,CAAC,wBAAAC,SAAiB,EAAE,eAAe,MAAM,WAAW,CAAC,SAAS,EAAE,CAAC;AAAA,IACnE;AAAA,IACA,UAAU;AAAA,IAET;AAAA,GACH;AAEJ;",
+  "names": ["import_provider", "import_provider", "import_jsx_runtime", "import_jsx_runtime", "import_provider", "import_jsx_runtime", "children", "import_provider", "import_react", "import_jsx_runtime", "import_jsx_runtime", "ReactMarkdown", "remarkDirective", "remarkDirectiveRehype", "remarkGfm", "remarkMath", "remarkGemoji", "remarkUnwrapImages", "rehypeKatex", "rehypeHighlight"]
 }

package/dist/index.css

@@ -7,6 +7,10 @@
 .hyperbook-markdown a {
   color: var(--color-brand);
 }
+.hyperbook-markdown wbr:before {
+  content: "\200b";
+  white-space: normal;
+}
 .hyperbook-markdown .copy {
   color: var(--color-text);
 }
@@ -18,6 +22,30 @@
   background: var(--color-nav) !important;
   border-color: var(--color-spacer);
 }
+.hyperbook-markdown img {
+  max-width: 100%;
+}
+.hyperbook-markdown figure.lightbox {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 1em;
+  z-index: 10000;
+  margin: 0px;
+  cursor: zoom-out;
+  background: rgba(0, 0, 0, 0.5);
+}
+.hyperbook-markdown figure.lightbox img {
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: contain;
+}
 .hyperbook-markdown table {
   border-color: var(--color-spacer);
 }
@@ -46,6 +74,7 @@
   text-align: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  cursor: zoom-in;
 }
 .hyperbook-markdown figcaption {
   font-style: italic;
@@ -291,6 +320,7 @@
   margin-left: 4px;
   background: var(--color-nav);
   border: none;
+  padding: 0;
   border-radius: 4px;
   opacity: 0.9;
 }

package/dist/index.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.css"],
-  "sourcesContent": [".hyperbook-markdown {\n  background: var(--color-background);\n  color: var(--color-text);\n  font-family: hyperbook-body, sans-serif;\n}\n\n.hyperbook-markdown a {\n  color: var(--color-brand);\n}\n\n.hyperbook-markdown .copy {\n  color: var(--color-text);\n}\n\n.hyperbook-markdown .hljs {\n  background: var(--color-nav) !important;\n  border-color: var(--color-spacer);\n}\n\n.hyperbook-markdown p > code {\n  background: var(--color-nav) !important;\n  border-color: var(--color-spacer);\n}\n\n.hyperbook-markdown table {\n  border-color: var(--color-spacer);\n}\n\n.hyperbook-markdown table tr {\n  background-color: var(--color-nav);\n  border-color: var(--color-spacer);\n}\n\n.hyperbook-markdown h2 {\n  border-bottom-color: var(--color-spacer);\n}\n\n.hyperbook-markdown ul.bookmarks li {\n  border-color: var(--color-spacer);\n}\n\n.hyperbook-markdown ul.bookmarks li:hover {\n  background: var(--color-nav);\n}\n\n.hyperbook-markdown ul.bookmarks li:last-of-type {\n  border-color: var(--color-spacer);\n}\n\n@media screen and (max-width: 600px) {\n  .hyperbook-markdown table td {\n    border-bottom-color: var(--color-spacer);\n  }\n}\n\n.hyperbook-markdown figure {\n  text-align: center;\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n.hyperbook-markdown figcaption {\n  font-style: italic;\n  font-size: 14px;\n  max-width: 400px;\n  margin: 0 auto;\n}\n\n.hyperbook-markdown a.heading {\n  position: relative;\n  text-decoration: none;\n  padding-left: 16px;\n  margin-left: -16px;\n}\n\n.hyperbook-markdown a.heading:hover::before {\n  position: absolute;\n  content: \"\uD83D\uDCCE\";\n  font-size: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0px;\n}\n\n.hyperbook-markdown code {\n  font-family: hyperbook-code, monospace;\n  font-size: 85%;\n  padding: 0.2em 0.4em;\n  border-radius: 6px;\n}\n\n.hyperbook-markdown ul,\n.hyperbook-markdown ol {\n  margin-top: 0;\n  margin-bottom: 0;\n  padding-left: 2em;\n}\n\n.hyperbook-markdown ol ol,\n.hyperbook-markdown ul ol {\n  list-style-type: lower-roman;\n}\n\n.hyperbook-markdown ul ul ol,\n.hyperbook-markdown ul ol ol,\n.hyperbook-markdown ol ul ol,\n.hyperbook-markdown ol ol ol {\n  list-style-type: lower-alpha;\n}\n\n.hyperbook-markdown ul ul,\n.hyperbook-markdown ul ol,\n.hyperbook-markdown ol ol,\n.hyperbook-markdown ol ul {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.hyperbook-markdown li + li {\n  margin-top: 0.25em;\n}\n\n.hyperbook-markdown li > p {\n  margin-top: 16px;\n}\n\n.hyperbook-markdown p,\n.hyperbook-markdown blockquote,\n.hyperbook-markdown ol,\n.hyperbook-markdown ul,\n.hyperbook-markdown table,\n.hyperbook-markdown pre,\n.hyperbook-markdown details {\n  margin-top: 0;\n  margin-bottom: 10px;\n}\n\n.hyperbook-markdown blockquote {\n  width: 90%;\n  margin: 20px auto;\n  font-style: italic;\n  padding: 1.2em 30px 1.2em 75px;\n  border-left: 8px solid var(--color-brand);\n  line-height: 1.5;\n  position: relative;\n  background: var(--color-nav);\n}\n\n.hyperbook-markdown blockquote::before {\n  content: \"\\201C\";\n  color: var(--color-brand);\n  font-size: 4em;\n  position: absolute;\n  left: 10px;\n  top: -10px;\n}\n\n.hyperbook-markdown blockquote::after {\n  content: \"\";\n}\n\n.hyperbook-markdown table {\n  border-width: 1px;\n  border-style: solid;\n  border-collapse: collapse;\n  width: 100%;\n  table-layout: fixed;\n}\n\n.hyperbook-markdown table caption {\n  font-size: 1.5em;\n  margin: 0.5em 0 0.75em;\n}\n\n.hyperbook-markdown table tr {\n  border-width: 1px;\n  border-style: solid;\n  padding: 0.35em;\n}\n\n.hyperbook-markdown table th,\n.hyperbook-markdown table td {\n  padding: 0.625em;\n}\n\n.hyperbook-markdown table th {\n  font-size: 0.85em;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n@media screen and (max-width: 600px) {\n  .hyperbook-markdown table {\n    border: 0;\n  }\n\n  .hyperbook-markdown table caption {\n    font-size: 1.3em;\n  }\n\n  .hyperbook-markdown table thead {\n    border: none;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n\n  .hyperbook-markdown table tr {\n    border-bottom-width: 3px;\n    display: block;\n    margin-bottom: 0.625em;\n  }\n\n  .hyperbook-markdown table td {\n    border-bottom-width: 1px;\n    border-bottom-style: solid;\n    display: block;\n    font-size: 0.8em;\n    text-align: right;\n  }\n\n  .hyperbook-markdown table td::before {\n    /*\n    * aria-label has no advantage, it won't be read inside a table\n    content: attr(aria-label);\n    */\n    content: attr(data-label);\n    float: left;\n    font-weight: bold;\n    text-transform: uppercase;\n    margin-right: 8px;\n  }\n\n  .hyperbook-markdown table td:last-child {\n    border-bottom: 0;\n  }\n}\n\n.hyperbook-markdown h1,\n.hyperbook-markdown h2,\n.hyperbook-markdown h3,\n.hyperbook-markdown h4,\n.hyperbook-markdown h5,\n.hyperbook-markdown h6 {\n  font-family: hyperbook-heading, sans-serif;\n  margin-top: 24px;\n  margin-bottom: 16px;\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.hyperbook-markdown h1 {\n  font-size: 1.75em;\n  font-weight: 700;\n}\n\n.hyperbook-markdown h2 {\n  font-weight: 600;\n  padding-bottom: 0.3em;\n  font-size: 1.5em;\n  border-bottom-width: 1px;\n  border-bottom-style: solid;\n}\n\n.hyperbook-markdown h3 {\n  font-weight: 600;\n  font-size: 1.25em;\n}\n\n.hyperbook-markdown h4 {\n  font-weight: 600;\n  font-size: 1em;\n}\n\n.hyperbook-markdown h5 {\n  font-weight: 600;\n  font-size: 0.875em;\n}\n\n.hyperbook-markdown h6 {\n  font-weight: 600;\n  font-size: 0.85em;\n}\n\n.hyperbook-markdown p {\n  margin-top: 0;\n  margin-bottom: 10px;\n}\n\n.hyperbook-markdown h1,\n.hyperbook-markdown h2,\n.hyperbook-markdown h3,\n.hyperbook-markdown h4,\n.hyperbook-markdown h5,\n.hyperbook-markdown h6 {\n  display: flex;\n  align-items: center;\n}\n\n.hyperbook-markdown .bookmark {\n  margin-left: 10px;\n  background: none;\n  border: none;\n  opacity: 0.5;\n  font-size: 16px;\n}\n\n.hyperbook-markdown .bookmark:hover {\n  opacity: 1;\n}\n\n.hyperbook-markdown .bookmark.active {\n  opacity: 1;\n}\n\n.hyperbook-markdown ul.bookmarks {\n  padding-left: 0;\n}\n\n.hyperbook-markdown ul.bookmarks li {\n  list-style-type: none;\n}\n\n.hyperbook-markdown pre {\n  position: relative;\n}\n\n.hyperbook-markdown pre code.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 1em;\n}\n\n.hyperbook-markdown code {\n  display: inline-flex;\n  align-items: center;\n  color: var(--color-text);\n  border-width: 1px;\n  border-style: solid;\n}\n\n.hyperbook-markdown button.copy {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 4px;\n  background: var(--color-nav);\n  border: none;\n  border-radius: 4px;\n  opacity: 0.9;\n}\n\n.hyperbook-markdown button.copy:hover {\n  opacity: 1;\n}\n\n.hyperbook-markdown pre > button.copy {\n  position: absolute;\n  right: 10px;\n  top: 10px;\n}\n\n/*!\n  Theme: GitHub\n  Description: Light theme as seen on github.com\n  Author: github.com\n  Maintainer: @Hirse\n  Updated: 2021-05-15\n\n  Outdated base version: https://github.com/primer/github-syntax-light\n  Current colors taken from GitHub's CSS\n*/\n\n.hljs {\n  color: #24292e;\n  background: #ffffff;\n}\n\n.hljs-doctag,\n.hljs-keyword,\n.hljs-meta .hljs-keyword,\n.hljs-template-tag,\n.hljs-template-variable,\n.hljs-type,\n.hljs-variable.language_ {\n  /* prettylights-syntax-keyword */\n  color: #d73a49;\n}\n\n.hljs-title,\n.hljs-title.class_,\n.hljs-title.class_.inherited__,\n.hljs-title.function_ {\n  /* prettylights-syntax-entity */\n  color: #6f42c1;\n}\n\n.hljs-attr,\n.hljs-attribute,\n.hljs-literal,\n.hljs-meta,\n.hljs-number,\n.hljs-operator,\n.hljs-variable,\n.hljs-selector-attr,\n.hljs-selector-class,\n.hljs-selector-id {\n  /* prettylights-syntax-constant */\n  color: #005cc5;\n}\n\n.hljs-regexp,\n.hljs-string,\n.hljs-meta .hljs-string {\n  /* prettylights-syntax-string */\n  color: #032f62;\n}\n\n.hljs-built_in,\n.hljs-symbol {\n  /* prettylights-syntax-variable */\n  color: #e36209;\n}\n\n.hljs-comment,\n.hljs-code,\n.hljs-formula {\n  /* prettylights-syntax-comment */\n  color: #6a737d;\n}\n\n.hljs-name,\n.hljs-quote,\n.hljs-selector-tag,\n.hljs-selector-pseudo {\n  /* prettylights-syntax-entity-tag */\n  color: #22863a;\n}\n\n.hljs-subst {\n  /* prettylights-syntax-storage-modifier-import */\n  color: #24292e;\n}\n\n.hljs-section {\n  /* prettylights-syntax-markup-heading */\n  color: #005cc5;\n  font-weight: bold;\n}\n\n.hljs-bullet {\n  /* prettylights-syntax-markup-list */\n  color: #735c0f;\n}\n\n.hljs-emphasis {\n  /* prettylights-syntax-markup-italic */\n  color: #24292e;\n  font-style: italic;\n}\n\n.hljs-strong {\n  /* prettylights-syntax-markup-bold */\n  color: #24292e;\n  font-weight: bold;\n}\n\n.hljs-addition {\n  /* prettylights-syntax-markup-inserted */\n  color: #22863a;\n  background-color: #f0fff4;\n}\n\n.hljs-deletion {\n  /* prettylights-syntax-markup-deleted */\n  color: #b31d28;\n  background-color: #ffeef0;\n}\n\n.hljs-char.escape_,\n.hljs-link,\n.hljs-params,\n.hljs-property,\n.hljs-punctuation,\n.hljs-tag {\n  /* purposely ignored */\n}\n\n/*!\n  Theme: GitHub Dark\n  Description: Dark theme as seen on github.com\n  Author: github.com\n  Maintainer: @Hirse\n  Updated: 2021-05-15\n\n  Outdated base version: https://github.com/primer/github-syntax-dark\n  Current colors taken from GitHub's CSS\n*/\n\n@media (prefers-color-scheme: dark) {\n  .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n\n  .hljs-doctag,\n  .hljs-keyword,\n  .hljs-meta .hljs-keyword,\n  .hljs-template-tag,\n  .hljs-template-variable,\n  .hljs-type,\n  .hljs-variable.language_ {\n    /* prettylights-syntax-keyword */\n    color: #ff7b72;\n  }\n\n  .hljs-title,\n  .hljs-title.class_,\n  .hljs-title.class_.inherited__,\n  .hljs-title.function_ {\n    /* prettylights-syntax-entity */\n    color: #d2a8ff;\n  }\n\n  .hljs-attr,\n  .hljs-attribute,\n  .hljs-literal,\n  .hljs-meta,\n  .hljs-number,\n  .hljs-operator,\n  .hljs-variable,\n  .hljs-selector-attr,\n  .hljs-selector-class,\n  .hljs-selector-id {\n    /* prettylights-syntax-constant */\n    color: #79c0ff;\n  }\n\n  .hljs-regexp,\n  .hljs-string,\n  .hljs-meta .hljs-string {\n    /* prettylights-syntax-string */\n    color: #a5d6ff;\n  }\n\n  .hljs-built_in,\n  .hljs-symbol {\n    /* prettylights-syntax-variable */\n    color: #ffa657;\n  }\n\n  .hljs-comment,\n  .hljs-code,\n  .hljs-formula {\n    /* prettylights-syntax-comment */\n    color: #8b949e;\n  }\n\n  .hljs-name,\n  .hljs-quote,\n  .hljs-selector-tag,\n  .hljs-selector-pseudo {\n    /* prettylights-syntax-entity-tag */\n    color: #7ee787;\n  }\n\n  .hljs-subst {\n    /* prettylights-syntax-storage-modifier-import */\n    color: #c9d1d9;\n  }\n\n  .hljs-section {\n    /* prettylights-syntax-markup-heading */\n    color: #1f6feb;\n    font-weight: bold;\n  }\n\n  .hljs-bullet {\n    /* prettylights-syntax-markup-list */\n    color: #f2cc60;\n  }\n\n  .hljs-emphasis {\n    /* prettylights-syntax-markup-italic */\n    color: #c9d1d9;\n    font-style: italic;\n  }\n\n  .hljs-strong {\n    /* prettylights-syntax-markup-bold */\n    color: #c9d1d9;\n    font-weight: bold;\n  }\n\n  .hljs-addition {\n    /* prettylights-syntax-markup-inserted */\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n\n  .hljs-deletion {\n    /* prettylights-syntax-markup-deleted */\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n\n  .hljs-char.escape_,\n  .hljs-link,\n  .hljs-params,\n  .hljs-property,\n  .hljs-punctuation,\n  .hljs-tag {\n    /* purposely ignored */\n  }\n}\n"],
-  "mappings": ";AAAA;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACE;AAAA;AAAA;AAIJ;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAAA;AAAA;AAIE;AAAA;AAGF;AAAA;AAAA;AAAA;AAIE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAKE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAAA;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAME;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAME;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAcF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE;AAAA;AAGF;AAAA;AAAA;AAAA;AAKE;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWE;AAAA;AAGF;AAAA;AAAA;AAIE;AAAA;AAGF;AAAA;AAGE;AAAA;AAGF;AAAA;AAAA;AAIE;AAAA;AAGF;AAAA;AAAA;AAAA;AAKE;AAAA;AAGF;AAEE;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBA;AACE;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE;AAAA;AAGF;AAAA;AAAA;AAAA;AAKE;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWE;AAAA;AAGF;AAAA;AAAA;AAIE;AAAA;AAGF;AAAA;AAGE;AAAA;AAGF;AAAA;AAAA;AAIE;AAAA;AAGF;AAAA;AAAA;AAAA;AAKE;AAAA;AAGF;AAEE;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": [".hyperbook-markdown {\n  background: var(--color-background);\n  color: var(--color-text);\n  font-family: hyperbook-body, sans-serif;\n}\n\n.hyperbook-markdown a {\n  color: var(--color-brand);\n}\n\n/**\n * IE 8\u201311 and Prince don\u2019t recognize the `wbr` element,\n * but a pseudo-element can achieve the same effect with IE 9+ and Prince.\n */\n.hyperbook-markdown wbr:before {\n  /* Unicode zero width space */\n  content: \"\\200B\";\n  white-space: normal;\n}\n\n.hyperbook-markdown .copy {\n  color: var(--color-text);\n}\n\n.hyperbook-markdown .hljs {\n  background: var(--color-nav) !important;\n  border-color: var(--color-spacer);\n}\n\n.hyperbook-markdown p > code {\n  background: var(--color-nav) !important;\n  border-color: var(--color-spacer);\n}\n\n.hyperbook-markdown img {\n  max-width: 100%;\n}\n\n.hyperbook-markdown figure.lightbox {\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: center;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  padding: 1em;\n  z-index: 10000;\n  margin: 0px;\n  cursor: zoom-out;\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.hyperbook-markdown figure.lightbox img {\n  min-width: 100%;\n  min-height: 100%;\n  object-fit: contain;\n}\n\n.hyperbook-markdown table {\n  border-color: var(--color-spacer);\n}\n\n.hyperbook-markdown table tr {\n  background-color: var(--color-nav);\n  border-color: var(--color-spacer);\n}\n\n.hyperbook-markdown h2 {\n  border-bottom-color: var(--color-spacer);\n}\n\n.hyperbook-markdown ul.bookmarks li {\n  border-color: var(--color-spacer);\n}\n\n.hyperbook-markdown ul.bookmarks li:hover {\n  background: var(--color-nav);\n}\n\n.hyperbook-markdown ul.bookmarks li:last-of-type {\n  border-color: var(--color-spacer);\n}\n\n@media screen and (max-width: 600px) {\n  .hyperbook-markdown table td {\n    border-bottom-color: var(--color-spacer);\n  }\n}\n\n.hyperbook-markdown figure {\n  text-align: center;\n  margin-top: 10px;\n  margin-bottom: 10px;\n  cursor: zoom-in;\n}\n\n.hyperbook-markdown figcaption {\n  font-style: italic;\n  font-size: 14px;\n  max-width: 400px;\n  margin: 0 auto;\n}\n\n.hyperbook-markdown a.heading {\n  position: relative;\n  text-decoration: none;\n  padding-left: 16px;\n  margin-left: -16px;\n}\n\n.hyperbook-markdown a.heading:hover::before {\n  position: absolute;\n  content: \"\uD83D\uDCCE\";\n  font-size: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0px;\n}\n\n.hyperbook-markdown code {\n  font-family: hyperbook-code, monospace;\n  font-size: 85%;\n  padding: 0.2em 0.4em;\n  border-radius: 6px;\n}\n\n.hyperbook-markdown ul,\n.hyperbook-markdown ol {\n  margin-top: 0;\n  margin-bottom: 0;\n  padding-left: 2em;\n}\n\n.hyperbook-markdown ol ol,\n.hyperbook-markdown ul ol {\n  list-style-type: lower-roman;\n}\n\n.hyperbook-markdown ul ul ol,\n.hyperbook-markdown ul ol ol,\n.hyperbook-markdown ol ul ol,\n.hyperbook-markdown ol ol ol {\n  list-style-type: lower-alpha;\n}\n\n.hyperbook-markdown ul ul,\n.hyperbook-markdown ul ol,\n.hyperbook-markdown ol ol,\n.hyperbook-markdown ol ul {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.hyperbook-markdown li + li {\n  margin-top: 0.25em;\n}\n\n.hyperbook-markdown li > p {\n  margin-top: 16px;\n}\n\n.hyperbook-markdown p,\n.hyperbook-markdown blockquote,\n.hyperbook-markdown ol,\n.hyperbook-markdown ul,\n.hyperbook-markdown table,\n.hyperbook-markdown pre,\n.hyperbook-markdown details {\n  margin-top: 0;\n  margin-bottom: 10px;\n}\n\n.hyperbook-markdown blockquote {\n  width: 90%;\n  margin: 20px auto;\n  font-style: italic;\n  padding: 1.2em 30px 1.2em 75px;\n  border-left: 8px solid var(--color-brand);\n  line-height: 1.5;\n  position: relative;\n  background: var(--color-nav);\n}\n\n.hyperbook-markdown blockquote::before {\n  content: \"\\201C\";\n  color: var(--color-brand);\n  font-size: 4em;\n  position: absolute;\n  left: 10px;\n  top: -10px;\n}\n\n.hyperbook-markdown blockquote::after {\n  content: \"\";\n}\n\n.hyperbook-markdown table {\n  border-width: 1px;\n  border-style: solid;\n  border-collapse: collapse;\n  width: 100%;\n  table-layout: fixed;\n}\n\n.hyperbook-markdown table caption {\n  font-size: 1.5em;\n  margin: 0.5em 0 0.75em;\n}\n\n.hyperbook-markdown table tr {\n  border-width: 1px;\n  border-style: solid;\n  padding: 0.35em;\n}\n\n.hyperbook-markdown table th,\n.hyperbook-markdown table td {\n  padding: 0.625em;\n}\n\n.hyperbook-markdown table th {\n  font-size: 0.85em;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n@media screen and (max-width: 600px) {\n  .hyperbook-markdown table {\n    border: 0;\n  }\n\n  .hyperbook-markdown table caption {\n    font-size: 1.3em;\n  }\n\n  .hyperbook-markdown table thead {\n    border: none;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n\n  .hyperbook-markdown table tr {\n    border-bottom-width: 3px;\n    display: block;\n    margin-bottom: 0.625em;\n  }\n\n  .hyperbook-markdown table td {\n    border-bottom-width: 1px;\n    border-bottom-style: solid;\n    display: block;\n    font-size: 0.8em;\n    text-align: right;\n  }\n\n  .hyperbook-markdown table td::before {\n    /*\n    * aria-label has no advantage, it won't be read inside a table\n    content: attr(aria-label);\n    */\n    content: attr(data-label);\n    float: left;\n    font-weight: bold;\n    text-transform: uppercase;\n    margin-right: 8px;\n  }\n\n  .hyperbook-markdown table td:last-child {\n    border-bottom: 0;\n  }\n}\n\n.hyperbook-markdown h1,\n.hyperbook-markdown h2,\n.hyperbook-markdown h3,\n.hyperbook-markdown h4,\n.hyperbook-markdown h5,\n.hyperbook-markdown h6 {\n  font-family: hyperbook-heading, sans-serif;\n  margin-top: 24px;\n  margin-bottom: 16px;\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.hyperbook-markdown h1 {\n  font-size: 1.75em;\n  font-weight: 700;\n}\n\n.hyperbook-markdown h2 {\n  font-weight: 600;\n  padding-bottom: 0.3em;\n  font-size: 1.5em;\n  border-bottom-width: 1px;\n  border-bottom-style: solid;\n}\n\n.hyperbook-markdown h3 {\n  font-weight: 600;\n  font-size: 1.25em;\n}\n\n.hyperbook-markdown h4 {\n  font-weight: 600;\n  font-size: 1em;\n}\n\n.hyperbook-markdown h5 {\n  font-weight: 600;\n  font-size: 0.875em;\n}\n\n.hyperbook-markdown h6 {\n  font-weight: 600;\n  font-size: 0.85em;\n}\n\n.hyperbook-markdown p {\n  margin-top: 0;\n  margin-bottom: 10px;\n}\n\n.hyperbook-markdown h1,\n.hyperbook-markdown h2,\n.hyperbook-markdown h3,\n.hyperbook-markdown h4,\n.hyperbook-markdown h5,\n.hyperbook-markdown h6 {\n  display: flex;\n  align-items: center;\n}\n\n.hyperbook-markdown .bookmark {\n  margin-left: 10px;\n  background: none;\n  border: none;\n  opacity: 0.5;\n  font-size: 16px;\n}\n\n.hyperbook-markdown .bookmark:hover {\n  opacity: 1;\n}\n\n.hyperbook-markdown .bookmark.active {\n  opacity: 1;\n}\n\n.hyperbook-markdown ul.bookmarks {\n  padding-left: 0;\n}\n\n.hyperbook-markdown ul.bookmarks li {\n  list-style-type: none;\n}\n\n.hyperbook-markdown pre {\n  position: relative;\n}\n\n.hyperbook-markdown pre code.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 1em;\n}\n\n.hyperbook-markdown code {\n  display: inline-flex;\n  align-items: center;\n  color: var(--color-text);\n  border-width: 1px;\n  border-style: solid;\n}\n\n.hyperbook-markdown button.copy {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 4px;\n  background: var(--color-nav);\n  border: none;\n  padding: 0;\n  border-radius: 4px;\n  opacity: 0.9;\n}\n\n.hyperbook-markdown button.copy:hover {\n  opacity: 1;\n}\n\n.hyperbook-markdown pre > button.copy {\n  position: absolute;\n  right: 10px;\n  top: 10px;\n}\n\n/*!\n  Theme: GitHub\n  Description: Light theme as seen on github.com\n  Author: github.com\n  Maintainer: @Hirse\n  Updated: 2021-05-15\n\n  Outdated base version: https://github.com/primer/github-syntax-light\n  Current colors taken from GitHub's CSS\n*/\n\n.hljs {\n  color: #24292e;\n  background: #ffffff;\n}\n\n.hljs-doctag,\n.hljs-keyword,\n.hljs-meta .hljs-keyword,\n.hljs-template-tag,\n.hljs-template-variable,\n.hljs-type,\n.hljs-variable.language_ {\n  /* prettylights-syntax-keyword */\n  color: #d73a49;\n}\n\n.hljs-title,\n.hljs-title.class_,\n.hljs-title.class_.inherited__,\n.hljs-title.function_ {\n  /* prettylights-syntax-entity */\n  color: #6f42c1;\n}\n\n.hljs-attr,\n.hljs-attribute,\n.hljs-literal,\n.hljs-meta,\n.hljs-number,\n.hljs-operator,\n.hljs-variable,\n.hljs-selector-attr,\n.hljs-selector-class,\n.hljs-selector-id {\n  /* prettylights-syntax-constant */\n  color: #005cc5;\n}\n\n.hljs-regexp,\n.hljs-string,\n.hljs-meta .hljs-string {\n  /* prettylights-syntax-string */\n  color: #032f62;\n}\n\n.hljs-built_in,\n.hljs-symbol {\n  /* prettylights-syntax-variable */\n  color: #e36209;\n}\n\n.hljs-comment,\n.hljs-code,\n.hljs-formula {\n  /* prettylights-syntax-comment */\n  color: #6a737d;\n}\n\n.hljs-name,\n.hljs-quote,\n.hljs-selector-tag,\n.hljs-selector-pseudo {\n  /* prettylights-syntax-entity-tag */\n  color: #22863a;\n}\n\n.hljs-subst {\n  /* prettylights-syntax-storage-modifier-import */\n  color: #24292e;\n}\n\n.hljs-section {\n  /* prettylights-syntax-markup-heading */\n  color: #005cc5;\n  font-weight: bold;\n}\n\n.hljs-bullet {\n  /* prettylights-syntax-markup-list */\n  color: #735c0f;\n}\n\n.hljs-emphasis {\n  /* prettylights-syntax-markup-italic */\n  color: #24292e;\n  font-style: italic;\n}\n\n.hljs-strong {\n  /* prettylights-syntax-markup-bold */\n  color: #24292e;\n  font-weight: bold;\n}\n\n.hljs-addition {\n  /* prettylights-syntax-markup-inserted */\n  color: #22863a;\n  background-color: #f0fff4;\n}\n\n.hljs-deletion {\n  /* prettylights-syntax-markup-deleted */\n  color: #b31d28;\n  background-color: #ffeef0;\n}\n\n.hljs-char.escape_,\n.hljs-link,\n.hljs-params,\n.hljs-property,\n.hljs-punctuation,\n.hljs-tag {\n  /* purposely ignored */\n}\n\n/*!\n  Theme: GitHub Dark\n  Description: Dark theme as seen on github.com\n  Author: github.com\n  Maintainer: @Hirse\n  Updated: 2021-05-15\n\n  Outdated base version: https://github.com/primer/github-syntax-dark\n  Current colors taken from GitHub's CSS\n*/\n\n@media (prefers-color-scheme: dark) {\n  .hljs {\n    color: #c9d1d9;\n    background: #0d1117;\n  }\n\n  .hljs-doctag,\n  .hljs-keyword,\n  .hljs-meta .hljs-keyword,\n  .hljs-template-tag,\n  .hljs-template-variable,\n  .hljs-type,\n  .hljs-variable.language_ {\n    /* prettylights-syntax-keyword */\n    color: #ff7b72;\n  }\n\n  .hljs-title,\n  .hljs-title.class_,\n  .hljs-title.class_.inherited__,\n  .hljs-title.function_ {\n    /* prettylights-syntax-entity */\n    color: #d2a8ff;\n  }\n\n  .hljs-attr,\n  .hljs-attribute,\n  .hljs-literal,\n  .hljs-meta,\n  .hljs-number,\n  .hljs-operator,\n  .hljs-variable,\n  .hljs-selector-attr,\n  .hljs-selector-class,\n  .hljs-selector-id {\n    /* prettylights-syntax-constant */\n    color: #79c0ff;\n  }\n\n  .hljs-regexp,\n  .hljs-string,\n  .hljs-meta .hljs-string {\n    /* prettylights-syntax-string */\n    color: #a5d6ff;\n  }\n\n  .hljs-built_in,\n  .hljs-symbol {\n    /* prettylights-syntax-variable */\n    color: #ffa657;\n  }\n\n  .hljs-comment,\n  .hljs-code,\n  .hljs-formula {\n    /* prettylights-syntax-comment */\n    color: #8b949e;\n  }\n\n  .hljs-name,\n  .hljs-quote,\n  .hljs-selector-tag,\n  .hljs-selector-pseudo {\n    /* prettylights-syntax-entity-tag */\n    color: #7ee787;\n  }\n\n  .hljs-subst {\n    /* prettylights-syntax-storage-modifier-import */\n    color: #c9d1d9;\n  }\n\n  .hljs-section {\n    /* prettylights-syntax-markup-heading */\n    color: #1f6feb;\n    font-weight: bold;\n  }\n\n  .hljs-bullet {\n    /* prettylights-syntax-markup-list */\n    color: #f2cc60;\n  }\n\n  .hljs-emphasis {\n    /* prettylights-syntax-markup-italic */\n    color: #c9d1d9;\n    font-style: italic;\n  }\n\n  .hljs-strong {\n    /* prettylights-syntax-markup-bold */\n    color: #c9d1d9;\n    font-weight: bold;\n  }\n\n  .hljs-addition {\n    /* prettylights-syntax-markup-inserted */\n    color: #aff5b4;\n    background-color: #033a16;\n  }\n\n  .hljs-deletion {\n    /* prettylights-syntax-markup-deleted */\n    color: #ffdcd7;\n    background-color: #67060c;\n  }\n\n  .hljs-char.escape_,\n  .hljs-link,\n  .hljs-params,\n  .hljs-property,\n  .hljs-punctuation,\n  .hljs-tag {\n    /* purposely ignored */\n  }\n}\n"],
+  "mappings": ";AAAA;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAOF;AAEE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACE;AAAA;AAAA;AAIJ;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAAA;AAAA;AAIE;AAAA;AAGF;AAAA;AAAA;AAAA;AAIE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAKE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAAA;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAME;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAME;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAcF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE;AAAA;AAGF;AAAA;AAAA;AAAA;AAKE;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWE;AAAA;AAGF;AAAA;AAAA;AAIE;AAAA;AAGF;AAAA;AAGE;AAAA;AAGF;AAAA;AAAA;AAIE;AAAA;AAGF;AAAA;AAAA;AAAA;AAKE;AAAA;AAGF;AAEE;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBA;AACE;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE;AAAA;AAGF;AAAA;AAAA;AAAA;AAKE;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWE;AAAA;AAGF;AAAA;AAAA;AAIE;AAAA;AAGF;AAAA;AAGE;AAAA;AAGF;AAAA;AAAA;AAIE;AAAA;AAGF;AAAA;AAAA;AAAA;AAKE;AAAA;AAGF;AAEE;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAEE;AACA;AAAA;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/index.esm.mjs

@@ -88,9 +88,10 @@ var Code = ({ children, className }) => {
   const copyCode = () => {
     if (navigator.clipboard && ref.current) {
       const text = ref.current.innerText;
-      navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
+      navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      });
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, {
@@ -102,7 +103,7 @@ var Code = ({ children, className }) => {
       }),
       /* @__PURE__ */ jsx("button", {
         className: "copy",
-        onClick: copyCode,
+        onPointerDown: copyCode,
         "aria-label": "Copy Code",
         children: copied ? /* @__PURE__ */ jsx(MdDone, {}) : /* @__PURE__ */ jsx(MdContentCopy, {})
       })
@@ -113,8 +114,18 @@ var Code = ({ children, className }) => {
 // src/Link.tsx
 import { useLink } from "@hyperbook/provider";
 import { jsx as jsx2 } from "react/jsx-runtime";
+function formatUrl(url) {
+  var doubleSlash = url.split("//");
+  var formatted = doubleSlash.map(
+    (str) => str.replace(new RegExp("(?<after>:)", "giu"), "$1<wbr>").replace(new RegExp("(?<before>[/~.,\\-_?#%])", "giu"), "<wbr>$1").replace(new RegExp("(?<beforeAndAfter>[=&])", "giu"), "<wbr>$1<wbr>")
+  ).join("//<wbr>");
+  return formatted;
+}
 var Link = ({ href, title, children }) => {
   const L = useLink();
+  if (href) {
+    href = formatUrl(href);
+  }
   return /* @__PURE__ */ jsx2(L, {
     href,
     title,
@@ -220,11 +231,15 @@ var Headings = ({ level, children }) => {
 
 // src/Image.tsx
 import { useMakeUrl } from "@hyperbook/provider";
+import { useState as useState2 } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var Image = ({ src, title, alt }) => {
   const makeUrl = useMakeUrl();
+  const [full, setFull] = useState2(false);
   src = makeUrl(src, "public");
   return /* @__PURE__ */ jsxs3("figure", {
+    onClick: () => setFull((f) => !f),
+    className: full ? "lightbox" : void 0,
     children: [
       /* @__PURE__ */ jsx5("img", {
         src,

package/dist/index.esm.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/Markdown.tsx", "../src/Code.tsx", "../src/Link.tsx", "../src/Table.tsx", "../src/Headings.tsx", "../src/Image.tsx"],
-  "sourcesContent": ["import ReactMarkdown from \"react-markdown\";\nimport remarkDirective from \"remark-directive\";\nimport remarkDirectiveRehype from \"remark-directive-rehype\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport remarkGemoji from \"remark-gemoji\";\nimport remarkUnwrapImages from \"remark-unwrap-images\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { useDirectives } from \"@hyperbook/provider\";\nimport { visit, SKIP } from \"unist-util-visit\";\nimport { Code } from \"./Code\";\nimport { Link } from \"./Link\";\nimport { Table, Td, Th, Tr } from \"./Table\";\nimport { Headings } from \"./Headings\";\nimport { Image } from \"./Image\";\n\nimport \"./index.css\";\nimport { Transformer } from \"unified\";\nimport { BuildVisitor } from \"unist-util-visit/complex-types\";\n\nconst remarkRemoveComments: () => Transformer = () => (tree) => {\n  const htmlCommentRegex = /<!--([\\s\\S]*?)-->/g;\n\n  const handler: BuildVisitor = (node, index, parent) => {\n    const isComment = node.value.match(htmlCommentRegex);\n\n    if (isComment) {\n      // remove node\n      parent.children.splice(index, 1);\n      // Do not traverse `node`, continue at the node *now* at `index`. http://unifiedjs.com/learn/recipe/remove-node/\n      return [SKIP, index];\n    }\n  };\n\n  visit(tree, \"html\", handler);\n\n  visit(tree, \"jsx\", handler);\n};\n\nexport type MarkdownProps = {\n  children: string;\n};\n\nexport const Markdown = ({ children }: MarkdownProps) => {\n  const directives = useDirectives();\n\n  return (\n    <ReactMarkdown\n      className=\"hyperbook-markdown\"\n      components={{\n        ...directives,\n        a: Link,\n        code: Code,\n        td: Td,\n        th: Th,\n        table: Table,\n        tr: Tr,\n        h1: Headings,\n        h2: Headings,\n        h3: Headings,\n        h4: Headings,\n        h5: Headings,\n        h6: Headings,\n        img: Image,\n      }}\n      remarkPlugins={[\n        remarkRemoveComments,\n        remarkDirective,\n        remarkDirectiveRehype,\n        remarkGfm,\n        remarkMath,\n        remarkGemoji,\n        remarkUnwrapImages,\n      ]}\n      rehypePlugins={[\n        rehypeKatex,\n        [rehypeHighlight, { ignoreMissing: true, plainText: [\"mermaid\"] }],\n      ]}\n      skipHtml={false}\n    >\n      {children}\n    </ReactMarkdown>\n  );\n};\n", "import { useDirectives } from \"@hyperbook/provider\";\nimport { Fragment, useRef, useState } from \"react\";\nimport { Components } from \"react-markdown\";\n\nconst MdContentCopy = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      strokeWidth=\"0\"\n      height=\"1em\"\n      width=\"1em\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\" />\n    </svg>\n  );\n};\n\nconst MdDone = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      strokeWidth=\"0\"\n      height=\"1em\"\n      width=\"1em\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n    </svg>\n  );\n};\n\nexport const Code: Components[\"code\"] = ({ children, className }) => {\n  const directives = useDirectives();\n  if (className === \"language-mermaid\" && directives[\"mermaid\"]) {\n    const Mermaid = directives[\"mermaid\"];\n    return <Mermaid children={children} />;\n  }\n\n  const ref = useRef<HTMLElement>(null);\n  const [copied, setCopied] = useState(false);\n  const copyCode = () => {\n    if (navigator.clipboard && ref.current) {\n      const text = ref.current.innerText;\n      navigator.clipboard.writeText(text);\n\n      setCopied(true);\n\n      setTimeout(() => setCopied(false), 2000);\n    }\n  };\n\n  return (\n    <Fragment>\n      <code ref={ref} className={className}>\n        {children}\n      </code>\n      <button className=\"copy\" onClick={copyCode} aria-label=\"Copy Code\">\n        {copied ? <MdDone /> : <MdContentCopy />}\n      </button>\n    </Fragment>\n  );\n};\n", "import { useLink } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\nexport const Link: Components[\"a\"] = ({ href, title, children }) => {\n  const L = useLink();\n  return (\n    <L href={href} title={title}>\n      {children}\n    </L>\n  );\n};\n", "import { ReactNode } from \"react\";\nimport { Components } from \"react-markdown\";\n\nlet tableHeaders: ReactNode[][] = [];\nlet tdIndex = 0;\n\nexport const Table: Components[\"table\"] = ({ children, style }) => {\n  tableHeaders = [];\n  return <table style={style}>{children}</table>;\n};\n\nexport const Tr: Components[\"tr\"] = ({ children, style }) => {\n  tdIndex = 0;\n  return <tr style={style}>{children}</tr>;\n};\n\nexport const Td: Components[\"td\"] = ({ children, style }) => {\n  return (\n    <td data-label={tableHeaders[tdIndex++]} style={style}>\n      {children}\n    </td>\n  );\n};\n\nexport const Th: Components[\"th\"] = ({ children, style }) => {\n  tableHeaders.push(children);\n  return <th style={style}>{children}</th>;\n};\n", "import { useBookmark, useConfig } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\nexport const makeAnchor = (heading: string) => {\n  // If we have a heading, make it lower case\n  let anchor = heading.toLowerCase();\n\n  // Clean anchor (replace special characters whitespaces).\n  // Alternatively, use encodeURIComponent() if you don't care about\n  // pretty anchor links\n  anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, \"\");\n  anchor = anchor.replace(/ /g, \"-\");\n\n  return anchor;\n};\n\nexport const Headings: Components[\"h1\"] = ({ level, children }) => {\n  const config = useConfig();\n  const bookmarksConfig = config?.elements?.bookmarks;\n  // Access actual (string) value of heading\n  const heading = children?.[0] || \"\";\n\n  // If we have a heading, make it lower case\n  let anchor = typeof heading === \"string\" ? makeAnchor(heading) : \"\";\n\n  const label = typeof heading === \"string\" ? heading : anchor;\n\n  const [bookmark, toggleBookmark] = useBookmark(anchor, label);\n\n  // Utility\n  const container = (children: React.ReactNode): JSX.Element => (\n    <>\n      <a className=\"heading\" id={anchor} href={`#${anchor}`}>\n        <span>{children}</span>\n      </a>\n      {bookmarksConfig !== false && (\n        <button\n          className={bookmark ? \"bookmark active\" : \"bookmark\"}\n          onClick={() => toggleBookmark()}\n          title=\"Bookmark\"\n        >\n          \uD83D\uDD16\n        </button>\n      )}\n    </>\n  );\n\n  switch (level) {\n    case 1:\n      return <h1>{container(children)}</h1>;\n    case 2:\n      return <h2>{container(children)}</h2>;\n    case 3:\n      return <h3>{container(children)}</h3>;\n    case 4:\n      return <h4>{container(children)}</h4>;\n    case 5:\n      return <h5>{container(children)}</h5>;\n\n    default:\n      return <h6>{container(children)}</h6>;\n  }\n};\n", "import { useMakeUrl } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\nexport const Image: Components[\"img\"] = ({ src, title, alt }) => {\n  const makeUrl = useMakeUrl();\n  src = makeUrl(src, \"public\");\n\n  return (\n    <figure>\n      <img src={src} alt={alt} />\n      {title && <figcaption>{title}</figcaption>}\n    </figure>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["useDirectives", "jsx", "jsx", "Fragment", "jsx", "jsxs", "children", "jsx", "jsxs", "jsx", "useDirectives"]
+  "sourcesContent": ["import ReactMarkdown from \"react-markdown\";\nimport remarkDirective from \"remark-directive\";\nimport remarkDirectiveRehype from \"remark-directive-rehype\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport remarkGemoji from \"remark-gemoji\";\nimport remarkUnwrapImages from \"remark-unwrap-images\";\nimport rehypeKatex from \"rehype-katex\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { useDirectives } from \"@hyperbook/provider\";\nimport { visit, SKIP } from \"unist-util-visit\";\nimport { Code } from \"./Code\";\nimport { Link } from \"./Link\";\nimport { Table, Td, Th, Tr } from \"./Table\";\nimport { Headings } from \"./Headings\";\nimport { Image } from \"./Image\";\n\nimport \"./index.css\";\nimport { Transformer } from \"unified\";\nimport { BuildVisitor } from \"unist-util-visit/complex-types\";\n\nconst remarkRemoveComments: () => Transformer = () => (tree) => {\n  const htmlCommentRegex = /<!--([\\s\\S]*?)-->/g;\n\n  const handler: BuildVisitor = (node, index, parent) => {\n    const isComment = node.value.match(htmlCommentRegex);\n\n    if (isComment) {\n      // remove node\n      parent.children.splice(index, 1);\n      // Do not traverse `node`, continue at the node *now* at `index`. http://unifiedjs.com/learn/recipe/remove-node/\n      return [SKIP, index];\n    }\n  };\n\n  visit(tree, \"html\", handler);\n\n  visit(tree, \"jsx\", handler);\n};\n\nexport type MarkdownProps = {\n  children: string;\n};\n\nexport const Markdown = ({ children }: MarkdownProps) => {\n  const directives = useDirectives();\n\n  return (\n    <ReactMarkdown\n      className=\"hyperbook-markdown\"\n      components={{\n        ...directives,\n        a: Link,\n        code: Code,\n        td: Td,\n        th: Th,\n        table: Table,\n        tr: Tr,\n        h1: Headings,\n        h2: Headings,\n        h3: Headings,\n        h4: Headings,\n        h5: Headings,\n        h6: Headings,\n        img: Image,\n      }}\n      remarkPlugins={[\n        remarkRemoveComments,\n        remarkDirective,\n        remarkDirectiveRehype,\n        remarkGfm,\n        remarkMath,\n        remarkGemoji,\n        remarkUnwrapImages,\n      ]}\n      rehypePlugins={[\n        rehypeKatex,\n        [rehypeHighlight, { ignoreMissing: true, plainText: [\"mermaid\"] }],\n      ]}\n      skipHtml={false}\n    >\n      {children}\n    </ReactMarkdown>\n  );\n};\n", "import { useDirectives } from \"@hyperbook/provider\";\nimport { Fragment, useRef, useState } from \"react\";\nimport { Components } from \"react-markdown\";\n\nconst MdContentCopy = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      strokeWidth=\"0\"\n      height=\"1em\"\n      width=\"1em\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z\" />\n    </svg>\n  );\n};\n\nconst MdDone = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      fill=\"currentColor\"\n      strokeWidth=\"0\"\n      height=\"1em\"\n      width=\"1em\"\n      viewBox=\"0 0 24 24\"\n    >\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n    </svg>\n  );\n};\n\nexport const Code: Components[\"code\"] = ({ children, className }) => {\n  const directives = useDirectives();\n  if (className === \"language-mermaid\" && directives[\"mermaid\"]) {\n    const Mermaid = directives[\"mermaid\"];\n    return <Mermaid children={children} />;\n  }\n\n  const ref = useRef<HTMLElement>(null);\n  const [copied, setCopied] = useState(false);\n  const copyCode = () => {\n    if (navigator.clipboard && ref.current) {\n      const text = ref.current.innerText;\n      navigator.clipboard.writeText(text).then(() => {\n        setCopied(true);\n\n        setTimeout(() => setCopied(false), 2000);\n      });\n    }\n  };\n\n  return (\n    <Fragment>\n      <code ref={ref} className={className}>\n        {children}\n      </code>\n      <button className=\"copy\" onPointerDown={copyCode} aria-label=\"Copy Code\">\n        {copied ? <MdDone /> : <MdContentCopy />}\n      </button>\n    </Fragment>\n  );\n};\n", "import { useLink } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\n// see: https://css-tricks.com/better-line-breaks-for-long-urls/\nfunction formatUrl(url: string) {\n  // Split the URL into an array to distinguish double slashes from single slashes\n  var doubleSlash = url.split(\"//\");\n\n  // Format the strings on either side of double slashes separately\n  var formatted = doubleSlash\n    .map(\n      (str) =>\n        // Insert a word break opportunity after a colon\n        str\n          .replace(/(?<after>:)/giu, \"$1<wbr>\")\n          // Before a single slash, tilde, period, comma, hyphen, underline, question mark, number sign, or percent symbol\n          .replace(/(?<before>[/~.,\\-_?#%])/giu, \"<wbr>$1\")\n          // Before and after an equals sign or ampersand\n          .replace(/(?<beforeAndAfter>[=&])/giu, \"<wbr>$1<wbr>\")\n      // Reconnect the strings with word break opportunities after double slashes\n    )\n    .join(\"//<wbr>\");\n\n  return formatted;\n}\n\nexport const Link: Components[\"a\"] = ({ href, title, children }) => {\n  const L = useLink();\n\n  if (href) {\n    href = formatUrl(href);\n  }\n\n  return (\n    <L href={href} title={title}>\n      {children}\n    </L>\n  );\n};\n", "import { ReactNode } from \"react\";\nimport { Components } from \"react-markdown\";\n\nlet tableHeaders: ReactNode[][] = [];\nlet tdIndex = 0;\n\nexport const Table: Components[\"table\"] = ({ children, style }) => {\n  tableHeaders = [];\n  return <table style={style}>{children}</table>;\n};\n\nexport const Tr: Components[\"tr\"] = ({ children, style }) => {\n  tdIndex = 0;\n  return <tr style={style}>{children}</tr>;\n};\n\nexport const Td: Components[\"td\"] = ({ children, style }) => {\n  return (\n    <td data-label={tableHeaders[tdIndex++]} style={style}>\n      {children}\n    </td>\n  );\n};\n\nexport const Th: Components[\"th\"] = ({ children, style }) => {\n  tableHeaders.push(children);\n  return <th style={style}>{children}</th>;\n};\n", "import { useBookmark, useConfig } from \"@hyperbook/provider\";\nimport { Components } from \"react-markdown\";\n\nexport const makeAnchor = (heading: string) => {\n  // If we have a heading, make it lower case\n  let anchor = heading.toLowerCase();\n\n  // Clean anchor (replace special characters whitespaces).\n  // Alternatively, use encodeURIComponent() if you don't care about\n  // pretty anchor links\n  anchor = anchor.replace(/[^a-zA-Z0-9 ]/g, \"\");\n  anchor = anchor.replace(/ /g, \"-\");\n\n  return anchor;\n};\n\nexport const Headings: Components[\"h1\"] = ({ level, children }) => {\n  const config = useConfig();\n  const bookmarksConfig = config?.elements?.bookmarks;\n  // Access actual (string) value of heading\n  const heading = children?.[0] || \"\";\n\n  // If we have a heading, make it lower case\n  let anchor = typeof heading === \"string\" ? makeAnchor(heading) : \"\";\n\n  const label = typeof heading === \"string\" ? heading : anchor;\n\n  const [bookmark, toggleBookmark] = useBookmark(anchor, label);\n\n  // Utility\n  const container = (children: React.ReactNode): JSX.Element => (\n    <>\n      <a className=\"heading\" id={anchor} href={`#${anchor}`}>\n        <span>{children}</span>\n      </a>\n      {bookmarksConfig !== false && (\n        <button\n          className={bookmark ? \"bookmark active\" : \"bookmark\"}\n          onClick={() => toggleBookmark()}\n          title=\"Bookmark\"\n        >\n          \uD83D\uDD16\n        </button>\n      )}\n    </>\n  );\n\n  switch (level) {\n    case 1:\n      return <h1>{container(children)}</h1>;\n    case 2:\n      return <h2>{container(children)}</h2>;\n    case 3:\n      return <h3>{container(children)}</h3>;\n    case 4:\n      return <h4>{container(children)}</h4>;\n    case 5:\n      return <h5>{container(children)}</h5>;\n\n    default:\n      return <h6>{container(children)}</h6>;\n  }\n};\n", "import { useMakeUrl } from \"@hyperbook/provider\";\nimport { useState } from \"react\";\nimport { Components } from \"react-markdown\";\n\nexport const Image: Components[\"img\"] = ({ src, title, alt }) => {\n  const makeUrl = useMakeUrl();\n  const [full, setFull] = useState(false);\n  src = makeUrl(src, \"public\");\n\n  return (\n    <figure\n      onClick={() => setFull((f) => !f)}\n      className={full ? \"lightbox\" : undefined}\n    >\n      <img src={src} alt={alt} />\n      {title && <figcaption>{title}</figcaption>}\n    </figure>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["useDirectives", "jsx", "jsx", "Fragment", "jsx", "jsxs", "children", "useState", "jsx", "jsxs", "jsx", "useDirectives"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperbook/markdown",
-  "version": "0.3.4",
+  "version": "0.4.1",
   "author": "Mike Barkmin",
   "homepage": "https://github.com/openpatch/hyperbook#readme",
   "license": "MIT",
@@ -51,8 +51,8 @@
   },
   "devDependencies": {
     "@types/hast": "2.3.4",
-    "@types/react": "18.0.23",
-    "@types/react-dom": "18.0.7",
+    "@types/react": "18.0.25",
+    "@types/react-dom": "18.0.9",
     "@types/unist": "2.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0"