@intlayer/design-system 9.4.2 → 9.4.3

package/dist/esm/components/MarkDownRender/MarkDownIframe.mjs

@@ -100,13 +100,18 @@ const EmbeddedFrame = ({ src, title, className, frameProps }) => {
 		"aria-label": title ?? "Play video",
 		onClick: () => setIsPlayRequested(true),
 		className: cn("group relative block cursor-pointer border-0 bg-card p-0", className),
-		children: [/* @__PURE__ */ jsx("img", {
+		children: [/* @__PURE__ */ jsxs("picture", { children: [/* @__PURE__ */ jsx("source", {
+			srcSet: `https://i.ytimg.com/vi_webp/${youtubeVideoId}/hqdefault.webp`,
+			type: "image/webp"
+		}), /* @__PURE__ */ jsx("img", {
 			src: `https://i.ytimg.com/vi/${youtubeVideoId}/hqdefault.jpg`,
 			alt: "",
+			width: 480,
+			height: 360,
 			fetchPriority: "high",
 			decoding: "async",
 			className: "size-full object-cover"
-		}), /* @__PURE__ */ jsx("span", {
+		})] }), /* @__PURE__ */ jsx("span", {
 			className: "absolute inset-0 flex items-center justify-center",
 			children: /* @__PURE__ */ jsx("span", {
 				className: "flex size-14 items-center justify-center rounded-full bg-text/70 text-text-opposite transition-transform group-hover:scale-110",

package/dist/esm/components/MarkDownRender/MarkDownIframe.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownIframe.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownIframe.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { Container } from '@components/Container';\nimport { Link } from '@components/Link';\nimport { Modal } from '@components/Modal';\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal, Play } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type FC,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nfunction embedLinkMeta(src: string | undefined): {\n  href: string;\n  label: string;\n} {\n  if (!src) return { href: '', label: '' };\n  if (/^https?:\\/\\//i.test(src)) {\n    try {\n      const url = new URL(src);\n      return { href: url.href, label: url.host };\n    } catch {\n      return { href: src, label: src };\n    }\n  }\n  return { href: src, label: src };\n}\n\n/**\n * Reads the video id out of a YouTube embed address.\n *\n * @returns The video id, or `null` when the address is not a YouTube embed.\n */\nconst getYoutubeVideoId = (src: string | undefined): string | null => {\n  if (!src || !/^https?:\\/\\//i.test(src)) return null;\n\n  try {\n    const url = new URL(src);\n    if (!/(^|\\.)youtube(-nocookie)?\\.com$/.test(url.hostname)) return null;\n\n    const videoId = url.pathname.replace(/^\\/embed\\//, '').split('/')[0];\n\n    return videoId || null;\n  } catch {\n    return null;\n  }\n};\n\n/**\n * Tracks whether an element has come close enough to the viewport to be worth\n * loading.\n *\n * `loading=\"lazy\"` is not enough for embeds inside tabs or carousels: the\n * browser only defers frames that are far down the page, so a frame parked\n * off-screen by a transform — an inactive tab panel — still loads immediately.\n * A live-app embed costs upwards of a megabyte and seconds of main thread,\n * which is the whole page's performance budget spent on something nobody is\n * looking at.\n *\n * @returns A ref to attach to the placeholder, and whether it became visible.\n */\nconst useHasBecomeVisible = <ElementType extends HTMLElement>() => {\n  const elementRef = useRef<ElementType>(null);\n  const [hasBecomeVisible, setHasBecomeVisible] = useState(false);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || hasBecomeVisible) return;\n\n    if (typeof IntersectionObserver === 'undefined') {\n      setHasBecomeVisible(true);\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          setHasBecomeVisible(true);\n          observer.disconnect();\n        }\n      },\n      { rootMargin: '200px' }\n    );\n\n    observer.observe(element);\n\n    return () => observer.disconnect();\n  }, [hasBecomeVisible]);\n\n  return { elementRef, hasBecomeVisible };\n};\n\ntype EmbeddedFrameProps = {\n  src: string | undefined;\n  title: string | undefined;\n  className: string;\n  frameProps: Omit<ComponentProps<'iframe'>, 'src' | 'title' | 'className'>;\n};\n\n/**\n * The embed itself: a poster for YouTube, deferred loading for anything else.\n *\n * A YouTube player pulls well over a megabyte of script before it can show a\n * single frame. Standing in for it with its own thumbnail until the reader\n * presses play keeps that cost on the readers who actually watch the video.\n */\nconst EmbeddedFrame: FC<EmbeddedFrameProps> = ({\n  src,\n  title,\n  className,\n  frameProps,\n}) => {\n  const [isPlayRequested, setIsPlayRequested] = useState(false);\n  const { elementRef, hasBecomeVisible } =\n    useHasBecomeVisible<HTMLDivElement>();\n  const youtubeVideoId = getYoutubeVideoId(src);\n\n  if (youtubeVideoId && !isPlayRequested) {\n    return (\n      <button\n        type=\"button\"\n        aria-label={title ?? 'Play video'}\n        onClick={() => setIsPlayRequested(true)}\n        className={cn(\n          'group relative block cursor-pointer border-0 bg-card p-0',\n          className\n        )}\n      >\n        {/*\n         * The poster stands in for the player, so on a page that opens with a\n         * video it is the largest element painted — deferring it would defer\n         * the page's LCP. It is the one image here worth fetching eagerly.\n         */}\n        <img\n          src={`https://i.ytimg.com/vi/${youtubeVideoId}/hqdefault.jpg`}\n          alt=\"\"\n          fetchPriority=\"high\"\n          decoding=\"async\"\n          className=\"size-full object-cover\"\n        />\n        <span className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"flex size-14 items-center justify-center rounded-full bg-text/70 text-text-opposite transition-transform group-hover:scale-110\">\n            <Play className=\"size-6 translate-x-0.5 fill-current\" />\n          </span>\n        </span>\n      </button>\n    );\n  }\n\n  if (!hasBecomeVisible && !isPlayRequested) {\n    // Same box as the frame it stands in for, so nothing shifts once it loads.\n    return <div ref={elementRef} aria-hidden className={className} />;\n  }\n\n  const frameSrc = (() => {\n    if (!isPlayRequested || !youtubeVideoId || !src) return src;\n\n    const playbackSrc = new URL(src);\n    playbackSrc.searchParams.set('autoplay', '1');\n\n    return playbackSrc.href;\n  })();\n\n  return (\n    <iframe\n      {...frameProps}\n      src={frameSrc}\n      title={title}\n      loading=\"lazy\"\n      className={className}\n    />\n  );\n};\n\nexport const MarkDownIframe: FC<ComponentProps<'iframe'>> = (props) => {\n  const { src, className, title, ...rest } = props;\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const { href, label } = embedLinkMeta(src);\n\n  return (\n    <Container\n      roundedSize=\"2xl\"\n      border\n      borderColor=\"neutral\"\n      className=\"overflow-hidden p-0\"\n      gap=\"none\"\n    >\n      <EmbeddedFrame\n        src={src}\n        title={title}\n        frameProps={rest}\n        className={cn(\n          'block max-h-[80vh] min-h-[12rem] w-full border-0',\n          className\n        )}\n      />\n      <div className=\"flex items-center justify-between gap-3 px-3 py-1\">\n        {href ? (\n          <Link\n            href={href}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            label=\"\"\n            color=\"neutral\"\n            className=\"inline-flex min-w-0 max-w-[calc(100%-3rem)] items-center gap-2 text-muted-foreground text-xs underline-offset-2 hover:text-foreground hover:underline\"\n          >\n            {label}\n          </Link>\n        ) : (\n          <span className=\"text-neutral text-sm\">Embedded frame</span>\n        )}\n        <Button\n          variant=\"hoverable\"\n          size=\"icon-md\"\n          onClick={() => setIsModalOpen(true)}\n          label=\"Open embedded page in fullscreen\"\n          Icon={MoveDiagonal}\n        />\n      </div>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size=\"unset\"\n        hasCloseButton\n        isScrollable\n        padding=\"sm\"\n      >\n        {isModalOpen && src ? (\n          <Container\n            roundedSize=\"2xl\"\n            border\n            borderColor=\"neutral\"\n            className=\"overflow-hidden p-0\"\n            gap=\"none\"\n          >\n            <iframe\n              {...rest}\n              src={src}\n              title={title ?? 'Embedded content'}\n              allowFullScreen\n              className=\"block min-h-[82vh] w-full border-0\"\n            />\n          </Container>\n        ) : null}\n      </Modal>\n    </Container>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MarkDownIframe.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownIframe.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { Container } from '@components/Container';\nimport { Link } from '@components/Link';\nimport { Modal } from '@components/Modal';\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal, Play } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type FC,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nfunction embedLinkMeta(src: string | undefined): {\n  href: string;\n  label: string;\n} {\n  if (!src) return { href: '', label: '' };\n  if (/^https?:\\/\\//i.test(src)) {\n    try {\n      const url = new URL(src);\n      return { href: url.href, label: url.host };\n    } catch {\n      return { href: src, label: src };\n    }\n  }\n  return { href: src, label: src };\n}\n\n/**\n * Reads the video id out of a YouTube embed address.\n *\n * @returns The video id, or `null` when the address is not a YouTube embed.\n */\nconst getYoutubeVideoId = (src: string | undefined): string | null => {\n  if (!src || !/^https?:\\/\\//i.test(src)) return null;\n\n  try {\n    const url = new URL(src);\n    if (!/(^|\\.)youtube(-nocookie)?\\.com$/.test(url.hostname)) return null;\n\n    const videoId = url.pathname.replace(/^\\/embed\\//, '').split('/')[0];\n\n    return videoId || null;\n  } catch {\n    return null;\n  }\n};\n\n/**\n * Tracks whether an element has come close enough to the viewport to be worth\n * loading.\n *\n * `loading=\"lazy\"` is not enough for embeds inside tabs or carousels: the\n * browser only defers frames that are far down the page, so a frame parked\n * off-screen by a transform — an inactive tab panel — still loads immediately.\n * A live-app embed costs upwards of a megabyte and seconds of main thread,\n * which is the whole page's performance budget spent on something nobody is\n * looking at.\n *\n * @returns A ref to attach to the placeholder, and whether it became visible.\n */\nconst useHasBecomeVisible = <ElementType extends HTMLElement>() => {\n  const elementRef = useRef<ElementType>(null);\n  const [hasBecomeVisible, setHasBecomeVisible] = useState(false);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || hasBecomeVisible) return;\n\n    if (typeof IntersectionObserver === 'undefined') {\n      setHasBecomeVisible(true);\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          setHasBecomeVisible(true);\n          observer.disconnect();\n        }\n      },\n      { rootMargin: '200px' }\n    );\n\n    observer.observe(element);\n\n    return () => observer.disconnect();\n  }, [hasBecomeVisible]);\n\n  return { elementRef, hasBecomeVisible };\n};\n\ntype EmbeddedFrameProps = {\n  src: string | undefined;\n  title: string | undefined;\n  className: string;\n  frameProps: Omit<ComponentProps<'iframe'>, 'src' | 'title' | 'className'>;\n};\n\n/**\n * The embed itself: a poster for YouTube, deferred loading for anything else.\n *\n * A YouTube player pulls well over a megabyte of script before it can show a\n * single frame. Standing in for it with its own thumbnail until the reader\n * presses play keeps that cost on the readers who actually watch the video.\n */\nconst EmbeddedFrame: FC<EmbeddedFrameProps> = ({\n  src,\n  title,\n  className,\n  frameProps,\n}) => {\n  const [isPlayRequested, setIsPlayRequested] = useState(false);\n  const { elementRef, hasBecomeVisible } =\n    useHasBecomeVisible<HTMLDivElement>();\n  const youtubeVideoId = getYoutubeVideoId(src);\n\n  if (youtubeVideoId && !isPlayRequested) {\n    return (\n      <button\n        type=\"button\"\n        aria-label={title ?? 'Play video'}\n        onClick={() => setIsPlayRequested(true)}\n        className={cn(\n          'group relative block cursor-pointer border-0 bg-card p-0',\n          className\n        )}\n      >\n        {/*\n         * The poster stands in for the player, so on a page that opens with a\n         * video it is the largest element painted — deferring it would defer\n         * the page's LCP. It is the one image here worth fetching eagerly.\n         */}\n        <picture>\n          {/*\n           * YouTube serves the same poster as WebP under `vi_webp`, at roughly\n           * a third of the JPEG's weight. The `img` below stays as the\n           * fallback for the browsers that cannot decode it.\n           */}\n          <source\n            srcSet={`https://i.ytimg.com/vi_webp/${youtubeVideoId}/hqdefault.webp`}\n            type=\"image/webp\"\n          />\n          <img\n            src={`https://i.ytimg.com/vi/${youtubeVideoId}/hqdefault.jpg`}\n            alt=\"\"\n            width={480}\n            height={360}\n            fetchPriority=\"high\"\n            decoding=\"async\"\n            className=\"size-full object-cover\"\n          />\n        </picture>\n        <span className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"flex size-14 items-center justify-center rounded-full bg-text/70 text-text-opposite transition-transform group-hover:scale-110\">\n            <Play className=\"size-6 translate-x-0.5 fill-current\" />\n          </span>\n        </span>\n      </button>\n    );\n  }\n\n  if (!hasBecomeVisible && !isPlayRequested) {\n    // Same box as the frame it stands in for, so nothing shifts once it loads.\n    return <div ref={elementRef} aria-hidden className={className} />;\n  }\n\n  const frameSrc = (() => {\n    if (!isPlayRequested || !youtubeVideoId || !src) return src;\n\n    const playbackSrc = new URL(src);\n    playbackSrc.searchParams.set('autoplay', '1');\n\n    return playbackSrc.href;\n  })();\n\n  return (\n    <iframe\n      {...frameProps}\n      src={frameSrc}\n      title={title}\n      loading=\"lazy\"\n      className={className}\n    />\n  );\n};\n\nexport const MarkDownIframe: FC<ComponentProps<'iframe'>> = (props) => {\n  const { src, className, title, ...rest } = props;\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const { href, label } = embedLinkMeta(src);\n\n  return (\n    <Container\n      roundedSize=\"2xl\"\n      border\n      borderColor=\"neutral\"\n      className=\"overflow-hidden p-0\"\n      gap=\"none\"\n    >\n      <EmbeddedFrame\n        src={src}\n        title={title}\n        frameProps={rest}\n        className={cn(\n          'block max-h-[80vh] min-h-[12rem] w-full border-0',\n          className\n        )}\n      />\n      <div className=\"flex items-center justify-between gap-3 px-3 py-1\">\n        {href ? (\n          <Link\n            href={href}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            label=\"\"\n            color=\"neutral\"\n            className=\"inline-flex min-w-0 max-w-[calc(100%-3rem)] items-center gap-2 text-muted-foreground text-xs underline-offset-2 hover:text-foreground hover:underline\"\n          >\n            {label}\n          </Link>\n        ) : (\n          <span className=\"text-neutral text-sm\">Embedded frame</span>\n        )}\n        <Button\n          variant=\"hoverable\"\n          size=\"icon-md\"\n          onClick={() => setIsModalOpen(true)}\n          label=\"Open embedded page in fullscreen\"\n          Icon={MoveDiagonal}\n        />\n      </div>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size=\"unset\"\n        hasCloseButton\n        isScrollable\n        padding=\"sm\"\n      >\n        {isModalOpen && src ? (\n          <Container\n            roundedSize=\"2xl\"\n            border\n            borderColor=\"neutral\"\n            className=\"overflow-hidden p-0\"\n            gap=\"none\"\n          >\n            <iframe\n              {...rest}\n              src={src}\n              title={title ?? 'Embedded content'}\n              allowFullScreen\n              className=\"block min-h-[82vh] w-full border-0\"\n            />\n          </Container>\n        ) : null}\n      </Modal>\n    </Container>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkdownEditor/extensions.mjs

@@ -1,10 +1,10 @@
 import CustomKeymap from "./novel/extensions/custom-keymap.mjs";
 import UpdatedImage from "./novel/extensions/updated-image.mjs";
 import { AIHighlight } from "./novel/extensions/ai-highlight.mjs";
+import { CodeBlockShiki } from "./novel/extensions/code-block-shiki.mjs";
 import { CharacterCount, Color, GlobalDragHandle, HighlightExtension, HorizontalRule as Horizontal, MarkdownExtension, Placeholder as PlaceholderExtension, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, Youtube } from "./novel/extensions/index.mjs";
 import { UploadImagesPlugin } from "./novel/plugins/upload-images.mjs";
 import { cx } from "class-variance-authority";
-import { CodeBlockShiki } from "tiptap-extension-code-block-shiki";
 
 //#region src/components/MarkdownEditor/extensions.ts
 const aiHighlight = AIHighlight;

package/dist/esm/components/MarkdownEditor/extensions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"extensions.mjs","names":["HorizontalRule","Placeholder"],"sources":["../../../../src/components/MarkdownEditor/extensions.ts"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport { CodeBlockShiki } from 'tiptap-extension-code-block-shiki';\nimport {\n  AIHighlight,\n  CharacterCount,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  HorizontalRule,\n  MarkdownExtension,\n  Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  UploadImagesPlugin,\n  Youtube,\n} from './novel';\n\nconst aiHighlight = AIHighlight;\n\nconst tiptapLink = TiptapLink.configure({\n  HTMLAttributes: {\n    class: cx(\n      'text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer'\n    ),\n  },\n});\n\nconst tiptapImage = TiptapImage.extend({\n  addProseMirrorPlugins() {\n    return [\n      UploadImagesPlugin({\n        imageClass: cx('opacity-40 rounded-lg border border-stone-200'),\n      }),\n    ];\n  },\n}).configure({\n  allowBase64: true,\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n});\n\nconst updatedImage = UpdatedImage.configure({\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n});\n\nconst taskList = TaskList.configure({\n  HTMLAttributes: {\n    class: cx('not-prose pl-2'),\n  },\n});\n\nconst taskItem = TaskItem.configure({\n  HTMLAttributes: {\n    class: cx('flex gap-2 items-start my-4'),\n  },\n  nested: true,\n});\n\nconst horizontalRule = HorizontalRule.configure({\n  HTMLAttributes: {\n    class: cx('mt-4 mb-6 border-t border-muted-foreground'),\n  },\n});\n\nconst starterKit = StarterKit.configure({\n  bulletList: {\n    HTMLAttributes: {\n      class: cx('list-disc list-outside leading-3 -mt-2'),\n    },\n  },\n  orderedList: {\n    HTMLAttributes: {\n      class: cx('list-decimal list-outside leading-3 -mt-2'),\n    },\n  },\n  listItem: {\n    HTMLAttributes: {\n      class: cx('leading-normal -mb-2'),\n    },\n  },\n  blockquote: {\n    HTMLAttributes: {\n      class: cx('border-l-4 border-primary'),\n    },\n  },\n  // Disabled in favor of the shiki-powered `codeBlock` extension below.\n  codeBlock: false,\n  code: {\n    HTMLAttributes: {\n      class: cx('rounded-md bg-muted px-1.5 py-1 font-mono font-medium'),\n      spellcheck: 'false',\n    },\n  },\n  horizontalRule: false,\n  dropcursor: {\n    color: '#DBEAFE',\n    width: 4,\n  },\n  gapcursor: false,\n});\n\n/**\n * Code block with syntax highlighting powered by shiki (the same highlighter\n * the rest of the design-system uses in `IDE/CodeBlockShiki` and\n * `MarkDownRender`). Languages are lazy-loaded on demand and the dual\n * `github-light` / `github-dark` themes emit `--shiki-dark` CSS variables that\n * `markdown-editor.css` toggles under `[data-theme=\"dark\"]`.\n */\nconst codeBlock = CodeBlockShiki.configure({\n  defaultLanguage: null,\n  defaultTheme: 'github-light',\n  themes: {\n    light: 'github-light',\n    dark: 'github-dark',\n  },\n  HTMLAttributes: {\n    class: cx(\n      'rounded-md bg-muted text-muted-foreground border p-5 font-mono font-medium'\n    ),\n  },\n});\n\nconst youtube = Youtube.configure({\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n  inline: false,\n});\n\nconst characterCount = CharacterCount.configure();\n\nconst markdownExtension = MarkdownExtension.configure({\n  html: true,\n  tightLists: true,\n  tightListClass: 'tight',\n  bulletListMarker: '-',\n  linkify: false,\n  breaks: false,\n  transformPastedText: false,\n  transformCopiedText: false,\n});\n\n/**\n * Default Tiptap/Novel extensions powering the MarkdownEditor.\n *\n * The slash-command extension is intentionally not included here because it\n * needs a runtime image-upload handler; it is appended by the editor itself.\n */\nexport const defaultExtensions = [\n  starterKit,\n  Placeholder,\n  tiptapLink,\n  tiptapImage,\n  updatedImage,\n  taskList,\n  taskItem,\n  horizontalRule,\n  aiHighlight,\n  codeBlock,\n  youtube,\n  characterCount,\n  TiptapUnderline,\n  markdownExtension,\n  HighlightExtension,\n  TextStyle,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n];\n"],"mappings":";;;;;;;;;AAwBA,MAAM,cAAc;AAEpB,MAAM,aAAa,WAAW,UAAU,EACtC,gBAAgB,EACd,OAAO,GACL,4GACF,EACF,EACF,CAAC;AAED,MAAM,cAAc,YAAY,OAAO,EACrC,wBAAwB;CACtB,OAAO,CACL,mBAAmB,EACjB,YAAY,GAAG,+CAA+C,EAChE,CAAC,CACH;AACF,EACF,CAAC,CAAC,CAAC,UAAU;CACX,aAAa;CACb,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C;AACF,CAAC;AAED,MAAM,eAAe,aAAa,UAAU,EAC1C,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C,EACF,CAAC;AAED,MAAM,WAAW,SAAS,UAAU,EAClC,gBAAgB,EACd,OAAO,GAAG,gBAAgB,EAC5B,EACF,CAAC;AAED,MAAM,WAAW,SAAS,UAAU;CAClC,gBAAgB,EACd,OAAO,GAAG,6BAA6B,EACzC;CACA,QAAQ;AACV,CAAC;AAED,MAAM,iBAAiBA,WAAe,UAAU,EAC9C,gBAAgB,EACd,OAAO,GAAG,4CAA4C,EACxD,EACF,CAAC;AAED,MAAM,aAAa,WAAW,UAAU;CACtC,YAAY,EACV,gBAAgB,EACd,OAAO,GAAG,wCAAwC,EACpD,EACF;CACA,aAAa,EACX,gBAAgB,EACd,OAAO,GAAG,2CAA2C,EACvD,EACF;CACA,UAAU,EACR,gBAAgB,EACd,OAAO,GAAG,sBAAsB,EAClC,EACF;CACA,YAAY,EACV,gBAAgB,EACd,OAAO,GAAG,2BAA2B,EACvC,EACF;CAEA,WAAW;CACX,MAAM,EACJ,gBAAgB;EACd,OAAO,GAAG,uDAAuD;EACjE,YAAY;CACd,EACF;CACA,gBAAgB;CAChB,YAAY;EACV,OAAO;EACP,OAAO;CACT;CACA,WAAW;AACb,CAAC;;;;;;;;AASD,MAAM,YAAY,eAAe,UAAU;CACzC,iBAAiB;CACjB,cAAc;CACd,QAAQ;EACN,OAAO;EACP,MAAM;CACR;CACA,gBAAgB,EACd,OAAO,GACL,4EACF,EACF;AACF,CAAC;AAED,MAAM,UAAU,QAAQ,UAAU;CAChC,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C;CACA,QAAQ;AACV,CAAC;AAED,MAAM,iBAAiB,eAAe,UAAU;AAEhD,MAAM,oBAAoB,kBAAkB,UAAU;CACpD,MAAM;CACN,YAAY;CACZ,gBAAgB;CAChB,kBAAkB;CAClB,SAAS;CACT,QAAQ;CACR,qBAAqB;CACrB,qBAAqB;AACvB,CAAC;;;;;;;AAQD,MAAa,oBAAoB;CAC/B;CACAC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"extensions.mjs","names":["HorizontalRule","Placeholder"],"sources":["../../../../src/components/MarkdownEditor/extensions.ts"],"sourcesContent":["import { cx } from 'class-variance-authority';\nimport {\n  AIHighlight,\n  CharacterCount,\n  CodeBlockShiki,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  HorizontalRule,\n  MarkdownExtension,\n  Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  UploadImagesPlugin,\n  Youtube,\n} from './novel';\n\nconst aiHighlight = AIHighlight;\n\nconst tiptapLink = TiptapLink.configure({\n  HTMLAttributes: {\n    class: cx(\n      'text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer'\n    ),\n  },\n});\n\nconst tiptapImage = TiptapImage.extend({\n  addProseMirrorPlugins() {\n    return [\n      UploadImagesPlugin({\n        imageClass: cx('opacity-40 rounded-lg border border-stone-200'),\n      }),\n    ];\n  },\n}).configure({\n  allowBase64: true,\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n});\n\nconst updatedImage = UpdatedImage.configure({\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n});\n\nconst taskList = TaskList.configure({\n  HTMLAttributes: {\n    class: cx('not-prose pl-2'),\n  },\n});\n\nconst taskItem = TaskItem.configure({\n  HTMLAttributes: {\n    class: cx('flex gap-2 items-start my-4'),\n  },\n  nested: true,\n});\n\nconst horizontalRule = HorizontalRule.configure({\n  HTMLAttributes: {\n    class: cx('mt-4 mb-6 border-t border-muted-foreground'),\n  },\n});\n\nconst starterKit = StarterKit.configure({\n  bulletList: {\n    HTMLAttributes: {\n      class: cx('list-disc list-outside leading-3 -mt-2'),\n    },\n  },\n  orderedList: {\n    HTMLAttributes: {\n      class: cx('list-decimal list-outside leading-3 -mt-2'),\n    },\n  },\n  listItem: {\n    HTMLAttributes: {\n      class: cx('leading-normal -mb-2'),\n    },\n  },\n  blockquote: {\n    HTMLAttributes: {\n      class: cx('border-l-4 border-primary'),\n    },\n  },\n  // Disabled in favor of the shiki-powered `codeBlock` extension below.\n  codeBlock: false,\n  code: {\n    HTMLAttributes: {\n      class: cx('rounded-md bg-muted px-1.5 py-1 font-mono font-medium'),\n      spellcheck: 'false',\n    },\n  },\n  horizontalRule: false,\n  dropcursor: {\n    color: '#DBEAFE',\n    width: 4,\n  },\n  gapcursor: false,\n});\n\n/**\n * Code block with syntax highlighting powered by shiki (the same highlighter\n * the rest of the design-system uses in `IDE/CodeBlockShiki` and\n * `MarkDownRender`). Languages are lazy-loaded on demand and the dual\n * `github-light` / `github-dark` themes emit `--shiki-dark` CSS variables that\n * `markdown-editor.css` toggles under `[data-theme=\"dark\"]`.\n */\nconst codeBlock = CodeBlockShiki.configure({\n  defaultLanguage: null,\n  defaultTheme: 'github-light',\n  themes: {\n    light: 'github-light',\n    dark: 'github-dark',\n  },\n  HTMLAttributes: {\n    class: cx(\n      'rounded-md bg-muted text-muted-foreground border p-5 font-mono font-medium'\n    ),\n  },\n});\n\nconst youtube = Youtube.configure({\n  HTMLAttributes: {\n    class: cx('rounded-lg border border-muted'),\n  },\n  inline: false,\n});\n\nconst characterCount = CharacterCount.configure();\n\nconst markdownExtension = MarkdownExtension.configure({\n  html: true,\n  tightLists: true,\n  tightListClass: 'tight',\n  bulletListMarker: '-',\n  linkify: false,\n  breaks: false,\n  transformPastedText: false,\n  transformCopiedText: false,\n});\n\n/**\n * Default Tiptap/Novel extensions powering the MarkdownEditor.\n *\n * The slash-command extension is intentionally not included here because it\n * needs a runtime image-upload handler; it is appended by the editor itself.\n */\nexport const defaultExtensions = [\n  starterKit,\n  Placeholder,\n  tiptapLink,\n  tiptapImage,\n  updatedImage,\n  taskList,\n  taskItem,\n  horizontalRule,\n  aiHighlight,\n  codeBlock,\n  youtube,\n  characterCount,\n  TiptapUnderline,\n  markdownExtension,\n  HighlightExtension,\n  TextStyle,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n];\n"],"mappings":";;;;;;;;;AAwBA,MAAM,cAAc;AAEpB,MAAM,aAAa,WAAW,UAAU,EACtC,gBAAgB,EACd,OAAO,GACL,4GACF,EACF,EACF,CAAC;AAED,MAAM,cAAc,YAAY,OAAO,EACrC,wBAAwB;CACtB,OAAO,CACL,mBAAmB,EACjB,YAAY,GAAG,+CAA+C,EAChE,CAAC,CACH;AACF,EACF,CAAC,CAAC,CAAC,UAAU;CACX,aAAa;CACb,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C;AACF,CAAC;AAED,MAAM,eAAe,aAAa,UAAU,EAC1C,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C,EACF,CAAC;AAED,MAAM,WAAW,SAAS,UAAU,EAClC,gBAAgB,EACd,OAAO,GAAG,gBAAgB,EAC5B,EACF,CAAC;AAED,MAAM,WAAW,SAAS,UAAU;CAClC,gBAAgB,EACd,OAAO,GAAG,6BAA6B,EACzC;CACA,QAAQ;AACV,CAAC;AAED,MAAM,iBAAiBA,WAAe,UAAU,EAC9C,gBAAgB,EACd,OAAO,GAAG,4CAA4C,EACxD,EACF,CAAC;AAED,MAAM,aAAa,WAAW,UAAU;CACtC,YAAY,EACV,gBAAgB,EACd,OAAO,GAAG,wCAAwC,EACpD,EACF;CACA,aAAa,EACX,gBAAgB,EACd,OAAO,GAAG,2CAA2C,EACvD,EACF;CACA,UAAU,EACR,gBAAgB,EACd,OAAO,GAAG,sBAAsB,EAClC,EACF;CACA,YAAY,EACV,gBAAgB,EACd,OAAO,GAAG,2BAA2B,EACvC,EACF;CAEA,WAAW;CACX,MAAM,EACJ,gBAAgB;EACd,OAAO,GAAG,uDAAuD;EACjE,YAAY;CACd,EACF;CACA,gBAAgB;CAChB,YAAY;EACV,OAAO;EACP,OAAO;CACT;CACA,WAAW;AACb,CAAC;;;;;;;;AASD,MAAM,YAAY,eAAe,UAAU;CACzC,iBAAiB;CACjB,cAAc;CACd,QAAQ;EACN,OAAO;EACP,MAAM;CACR;CACA,gBAAgB,EACd,OAAO,GACL,4EACF,EACF;AACF,CAAC;AAED,MAAM,UAAU,QAAQ,UAAU;CAChC,gBAAgB,EACd,OAAO,GAAG,gCAAgC,EAC5C;CACA,QAAQ;AACV,CAAC;AAED,MAAM,iBAAiB,eAAe,UAAU;AAEhD,MAAM,oBAAoB,kBAAkB,UAAU;CACpD,MAAM;CACN,YAAY;CACZ,gBAAgB;CAChB,kBAAkB;CAClB,SAAS;CACT,QAAQ;CACR,qBAAqB;CACrB,qBAAqB;AACvB,CAAC;;;;;;;AAQD,MAAa,oBAAoB;CAC/B;CACAC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/esm/components/MarkdownEditor/novel/extensions/code-block-shiki.mjs

@@ -0,0 +1,197 @@
+import { bundledLanguages, bundledThemes, getSingletonHighlighter } from "../../../IDE/shikiBundle.mjs";
+import { findChildren } from "@tiptap/core";
+import { CodeBlock } from "@tiptap/extension-code-block";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+//#region src/components/MarkdownEditor/novel/extensions/code-block-shiki.ts
+const formatStyles = (styles) => Object.entries(styles).filter(([_, value]) => Boolean(value)).map(([key, value]) => `${key}:${value}`).join(";");
+let sharedHighlighter = null;
+const loadingLangs = /* @__PURE__ */ new Set();
+const loadingThemes = /* @__PURE__ */ new Set();
+const renderDecorations = ({ doc, name, defaultLanguage, defaultTheme, themes, highlighter }) => {
+	if (!highlighter) return DecorationSet.empty;
+	const decorations = [];
+	const loadedLangs = highlighter.getLoadedLanguages();
+	const loadedThemes = highlighter.getLoadedThemes();
+	const resolveTheme = (themeName) => loadedThemes.includes(themeName) ? themeName : loadedThemes[0] ?? "github-light";
+	findChildren(doc, (node) => node.type.name === name).forEach((block) => {
+		let from = block.pos + 1;
+		let language = block.node.attrs.language || defaultLanguage;
+		const blockTheme = block.node.attrs.theme || defaultTheme;
+		const lightTheme = block.node.attrs.themes?.light || themes?.light || blockTheme;
+		const darkTheme = block.node.attrs.themes?.dark || themes?.dark || blockTheme;
+		if (!loadedLangs.includes(language)) language = "plaintext";
+		if (themes) {
+			const tokensResult = highlighter.codeToTokens(block.node.textContent, {
+				lang: language,
+				themes: {
+					light: resolveTheme(lightTheme),
+					dark: resolveTheme(darkTheme)
+				}
+			});
+			const preStyles = {};
+			if (tokensResult.bg) preStyles["background-color"] = tokensResult.bg;
+			if (tokensResult.fg) preStyles.color = tokensResult.fg;
+			decorations.push(Decoration.node(block.pos, block.pos + block.node.nodeSize, {
+				style: formatStyles(preStyles),
+				class: "shiki"
+			}));
+			for (const line of tokensResult.tokens) {
+				for (const token of line) {
+					const to = from + token.content.length;
+					const style = formatStyles(token.htmlStyle || {});
+					decorations.push(Decoration.inline(from, to, { style }));
+					from = to;
+				}
+				from += 1;
+			}
+		} else {
+			const activeTheme = resolveTheme(blockTheme);
+			const tokensResult = highlighter.codeToTokens(block.node.textContent, {
+				lang: language,
+				theme: activeTheme
+			});
+			const themeObj = highlighter.getTheme(activeTheme);
+			decorations.push(Decoration.node(block.pos, block.pos + block.node.nodeSize, {
+				style: formatStyles({ "background-color": themeObj.bg }),
+				class: "shiki"
+			}));
+			for (const line of tokensResult.tokens) {
+				for (const token of line) {
+					const to = from + token.content.length;
+					const style = formatStyles({ color: token.color || "inherit" });
+					decorations.push(Decoration.inline(from, to, { style }));
+					from = to;
+				}
+				from += 1;
+			}
+		}
+	});
+	return DecorationSet.create(doc, decorations);
+};
+const createShikiPlugin = ({ name, defaultLanguage, defaultTheme, themes }) => {
+	const loadMissing = async (doc) => {
+		if (!sharedHighlighter) return false;
+		const blocks = findChildren(doc, (node) => node.type.name === name);
+		const loadedLangs = sharedHighlighter.getLoadedLanguages();
+		const loadedThemes = sharedHighlighter.getLoadedThemes();
+		const langsToLoad = /* @__PURE__ */ new Set();
+		const themesToLoad = /* @__PURE__ */ new Set();
+		for (const block of blocks) {
+			const lang = block.node.attrs.language || defaultLanguage;
+			if (lang && !loadedLangs.includes(lang) && lang in bundledLanguages && !loadingLangs.has(lang)) langsToLoad.add(lang);
+			if (themes) {
+				const light = block.node.attrs.themes?.light || themes.light;
+				const dark = block.node.attrs.themes?.dark || themes.dark;
+				if (light && !loadedThemes.includes(light) && light in bundledThemes && !loadingThemes.has(light)) themesToLoad.add(light);
+				if (dark && !loadedThemes.includes(dark) && dark in bundledThemes && !loadingThemes.has(dark)) themesToLoad.add(dark);
+			} else {
+				const theme = block.node.attrs.theme || defaultTheme;
+				if (theme && !loadedThemes.includes(theme) && theme in bundledThemes && !loadingThemes.has(theme)) themesToLoad.add(theme);
+			}
+		}
+		if (langsToLoad.size === 0 && themesToLoad.size === 0) return false;
+		for (const l of langsToLoad) loadingLangs.add(l);
+		for (const t of themesToLoad) loadingThemes.add(t);
+		try {
+			await Promise.all([...Array.from(langsToLoad).map((l) => sharedHighlighter.loadLanguage(l)), ...Array.from(themesToLoad).map((t) => sharedHighlighter.loadTheme(t))]);
+			return true;
+		} finally {
+			for (const l of langsToLoad) loadingLangs.delete(l);
+			for (const t of themesToLoad) loadingThemes.delete(t);
+		}
+	};
+	const plugin = new Plugin({
+		key: new PluginKey("shiki"),
+		view(editorView) {
+			let isDestroyed = false;
+			const init = async () => {
+				if (!sharedHighlighter) sharedHighlighter = await getSingletonHighlighter();
+				if (isDestroyed) return;
+				await loadMissing(editorView.state.doc);
+				if (isDestroyed) return;
+				editorView.dispatch(editorView.state.tr.setMeta("shikiPluginForceDecoration", true));
+			};
+			init();
+			return {
+				update(view) {
+					loadMissing(view.state.doc).then((hasLoadedNew) => {
+						if (hasLoadedNew && !isDestroyed) view.dispatch(view.state.tr.setMeta("shikiPluginForceDecoration", true));
+					});
+				},
+				destroy() {
+					isDestroyed = true;
+				}
+			};
+		},
+		state: {
+			init: (_, { doc }) => renderDecorations({
+				doc,
+				name,
+				defaultLanguage,
+				defaultTheme,
+				themes,
+				highlighter: sharedHighlighter
+			}),
+			apply: (tr, decorationSet, oldState, newState) => {
+				const oldHead = oldState.selection.$head.parent.type.name;
+				const newHead = newState.selection.$head.parent.type.name;
+				const oldBlocks = findChildren(oldState.doc, (node) => node.type.name === name);
+				const newBlocks = findChildren(newState.doc, (node) => node.type.name === name);
+				const docChanged = tr.docChanged && ([oldHead, newHead].includes(name) || oldBlocks.length !== newBlocks.length || tr.steps.some((step) => {
+					const { from, to } = step;
+					return from !== void 0 && to !== void 0 && oldBlocks.some((block) => block.pos >= from && block.pos + block.node.nodeSize <= to);
+				}));
+				if (tr.getMeta("shikiPluginForceDecoration") || docChanged) return renderDecorations({
+					doc: tr.doc,
+					name,
+					defaultLanguage,
+					defaultTheme,
+					themes,
+					highlighter: sharedHighlighter
+				});
+				return decorationSet.map(tr.mapping, tr.doc);
+			}
+		},
+		props: { decorations(state) {
+			return plugin.getState(state);
+		} }
+	});
+	return plugin;
+};
+const CodeBlockShiki = CodeBlock.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			defaultLanguage: null,
+			defaultTheme: "github-light",
+			themes: null
+		};
+	},
+	markdownTokenName: "code",
+	parseMarkdown(rawNode, builder) {
+		if (rawNode.raw?.startsWith("```") === false && rawNode.raw?.startsWith("~~~") === false && rawNode.codeBlockStyle !== "indented") return [];
+		return builder.createNode("codeBlock", { language: rawNode.lang || null }, rawNode.text ? [builder.createTextNode(rawNode.text)] : []);
+	},
+	renderMarkdown(node, builder) {
+		const lang = node.attrs?.language || "";
+		return node.content ? [
+			`\`\`\`${lang}`,
+			builder.renderChildren(node.content),
+			"```"
+		].join("\n") : `\`\`\`${lang}\n\n\`\`\``;
+	},
+	addProseMirrorPlugins() {
+		return [...this.parent?.() || [], createShikiPlugin({
+			name: this.name,
+			defaultLanguage: this.options.defaultLanguage,
+			defaultTheme: this.options.defaultTheme,
+			themes: this.options.themes
+		})];
+	}
+});
+
+//#endregion
+export { CodeBlockShiki };
+//# sourceMappingURL=code-block-shiki.mjs.map

package/dist/esm/components/MarkdownEditor/novel/extensions/code-block-shiki.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-shiki.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/code-block-shiki.ts"],"sourcesContent":["import { findChildren } from '@tiptap/core';\nimport { CodeBlock, type CodeBlockOptions } from '@tiptap/extension-code-block';\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model';\nimport { Plugin, PluginKey } from '@tiptap/pm/state';\nimport { Decoration, DecorationSet } from '@tiptap/pm/view';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  bundledLanguages,\n  bundledThemes,\n  getSingletonHighlighter,\n  type Highlighter,\n} from '../../../IDE/shikiBundle';\n\nexport interface CodeBlockShikiOptions extends CodeBlockOptions {\n  defaultLanguage: BundledLanguage | null;\n  defaultTheme: BundledTheme | string;\n  themes?: {\n    light: BundledTheme;\n    dark: BundledTheme;\n  } | null;\n}\n\nconst formatStyles = (styles: Record<string, string>): string =>\n  Object.entries(styles)\n    .filter(([_, value]) => Boolean(value))\n    .map(([key, value]) => `${key}:${value}`)\n    .join(';');\n\nlet sharedHighlighter: Highlighter | null = null;\nconst loadingLangs = new Set<string>();\nconst loadingThemes = new Set<string>();\n\nconst renderDecorations = ({\n  doc,\n  name,\n  defaultLanguage,\n  defaultTheme,\n  themes,\n  highlighter,\n}: {\n  doc: ProseMirrorNode;\n  name: string;\n  defaultLanguage?: BundledLanguage | null;\n  defaultTheme: BundledTheme | string;\n  themes?: { light: BundledTheme; dark: BundledTheme } | null;\n  highlighter: Highlighter | null;\n}): DecorationSet => {\n  if (!highlighter) {\n    return DecorationSet.empty;\n  }\n\n  const decorations: Decoration[] = [];\n  const loadedLangs = highlighter.getLoadedLanguages();\n  const loadedThemes = highlighter.getLoadedThemes();\n\n  const resolveTheme = (themeName: string) =>\n    loadedThemes.includes(themeName)\n      ? themeName\n      : (loadedThemes[0] ?? 'github-light');\n\n  findChildren(doc, (node) => node.type.name === name).forEach((block) => {\n    let from = block.pos + 1;\n    let language = (block.node.attrs.language || defaultLanguage) as string;\n    const blockTheme = (block.node.attrs.theme || defaultTheme) as string;\n    const lightTheme = (block.node.attrs.themes?.light ||\n      themes?.light ||\n      blockTheme) as string;\n    const darkTheme = (block.node.attrs.themes?.dark ||\n      themes?.dark ||\n      blockTheme) as string;\n\n    if (!loadedLangs.includes(language)) {\n      language = 'plaintext';\n    }\n\n    if (themes) {\n      const tokensResult = highlighter.codeToTokens(block.node.textContent, {\n        lang: language as BundledLanguage,\n        themes: {\n          light: resolveTheme(lightTheme),\n          dark: resolveTheme(darkTheme),\n        },\n      });\n\n      const preStyles: Record<string, string> = {};\n      if (tokensResult.bg) preStyles['background-color'] = tokensResult.bg;\n      if (tokensResult.fg) preStyles.color = tokensResult.fg;\n\n      decorations.push(\n        Decoration.node(block.pos, block.pos + block.node.nodeSize, {\n          style: formatStyles(preStyles),\n          class: 'shiki',\n        })\n      );\n\n      for (const line of tokensResult.tokens) {\n        for (const token of line) {\n          const to = from + token.content.length;\n          const style = formatStyles(\n            (token.htmlStyle as Record<string, string>) || {}\n          );\n          decorations.push(Decoration.inline(from, to, { style }));\n          from = to;\n        }\n        from += 1;\n      }\n    } else {\n      const activeTheme = resolveTheme(blockTheme);\n      const tokensResult = highlighter.codeToTokens(block.node.textContent, {\n        lang: language as BundledLanguage,\n        theme: activeTheme,\n      });\n\n      const themeObj = highlighter.getTheme(activeTheme);\n      decorations.push(\n        Decoration.node(block.pos, block.pos + block.node.nodeSize, {\n          style: formatStyles({ 'background-color': themeObj.bg }),\n          class: 'shiki',\n        })\n      );\n\n      for (const line of tokensResult.tokens) {\n        for (const token of line) {\n          const to = from + token.content.length;\n          const style = formatStyles({ color: token.color || 'inherit' });\n          decorations.push(Decoration.inline(from, to, { style }));\n          from = to;\n        }\n        from += 1;\n      }\n    }\n  });\n\n  return DecorationSet.create(doc, decorations);\n};\n\nconst createShikiPlugin = ({\n  name,\n  defaultLanguage,\n  defaultTheme,\n  themes,\n}: {\n  name: string;\n  defaultLanguage?: BundledLanguage | null;\n  defaultTheme: BundledTheme | string;\n  themes?: { light: BundledTheme; dark: BundledTheme } | null;\n}) => {\n  const loadMissing = async (doc: ProseMirrorNode): Promise<boolean> => {\n    if (!sharedHighlighter) return false;\n    const blocks = findChildren(doc, (node) => node.type.name === name);\n    const loadedLangs = sharedHighlighter.getLoadedLanguages();\n    const loadedThemes = sharedHighlighter.getLoadedThemes();\n\n    const langsToLoad = new Set<string>();\n    const themesToLoad = new Set<string>();\n\n    for (const block of blocks) {\n      const lang = block.node.attrs.language || defaultLanguage;\n      if (\n        lang &&\n        !loadedLangs.includes(lang) &&\n        lang in bundledLanguages &&\n        !loadingLangs.has(lang)\n      ) {\n        langsToLoad.add(lang);\n      }\n\n      if (themes) {\n        const light = block.node.attrs.themes?.light || themes.light;\n        const dark = block.node.attrs.themes?.dark || themes.dark;\n        if (\n          light &&\n          !loadedThemes.includes(light) &&\n          light in bundledThemes &&\n          !loadingThemes.has(light)\n        ) {\n          themesToLoad.add(light);\n        }\n        if (\n          dark &&\n          !loadedThemes.includes(dark) &&\n          dark in bundledThemes &&\n          !loadingThemes.has(dark)\n        ) {\n          themesToLoad.add(dark);\n        }\n      } else {\n        const theme = block.node.attrs.theme || defaultTheme;\n        if (\n          theme &&\n          !loadedThemes.includes(theme) &&\n          theme in bundledThemes &&\n          !loadingThemes.has(theme)\n        ) {\n          themesToLoad.add(theme);\n        }\n      }\n    }\n\n    if (langsToLoad.size === 0 && themesToLoad.size === 0) return false;\n\n    for (const l of langsToLoad) {\n      loadingLangs.add(l);\n    }\n    for (const t of themesToLoad) {\n      loadingThemes.add(t);\n    }\n\n    try {\n      await Promise.all([\n        ...Array.from(langsToLoad).map((l) =>\n          sharedHighlighter!.loadLanguage(l as BundledLanguage)\n        ),\n        ...Array.from(themesToLoad).map((t) =>\n          sharedHighlighter!.loadTheme(t as BundledTheme)\n        ),\n      ]);\n      return true;\n    } finally {\n      for (const l of langsToLoad) {\n        loadingLangs.delete(l);\n      }\n      for (const t of themesToLoad) {\n        loadingThemes.delete(t);\n      }\n    }\n  };\n\n  const plugin: Plugin = new Plugin({\n    key: new PluginKey('shiki'),\n    view(editorView) {\n      let isDestroyed = false;\n\n      const init = async () => {\n        if (!sharedHighlighter) {\n          sharedHighlighter = await getSingletonHighlighter();\n        }\n        if (isDestroyed) return;\n        await loadMissing(editorView.state.doc);\n        if (isDestroyed) return;\n        editorView.dispatch(\n          editorView.state.tr.setMeta('shikiPluginForceDecoration', true)\n        );\n      };\n\n      init();\n\n      return {\n        update(view) {\n          loadMissing(view.state.doc).then((hasLoadedNew) => {\n            if (hasLoadedNew && !isDestroyed) {\n              view.dispatch(\n                view.state.tr.setMeta('shikiPluginForceDecoration', true)\n              );\n            }\n          });\n        },\n        destroy() {\n          isDestroyed = true;\n        },\n      };\n    },\n    state: {\n      init: (_, { doc }) =>\n        renderDecorations({\n          doc,\n          name,\n          defaultLanguage,\n          defaultTheme,\n          themes,\n          highlighter: sharedHighlighter,\n        }),\n      apply: (tr, decorationSet, oldState, newState) => {\n        const oldHead = oldState.selection.$head.parent.type.name;\n        const newHead = newState.selection.$head.parent.type.name;\n        const oldBlocks = findChildren(\n          oldState.doc,\n          (node) => node.type.name === name\n        );\n        const newBlocks = findChildren(\n          newState.doc,\n          (node) => node.type.name === name\n        );\n\n        const docChanged =\n          tr.docChanged &&\n          ([oldHead, newHead].includes(name) ||\n            oldBlocks.length !== newBlocks.length ||\n            tr.steps.some((step) => {\n              // @ts-expect-error step boundaries\n              const { from, to } = step;\n              return (\n                from !== undefined &&\n                to !== undefined &&\n                oldBlocks.some(\n                  (block) =>\n                    block.pos >= from && block.pos + block.node.nodeSize <= to\n                )\n              );\n            }));\n\n        if (tr.getMeta('shikiPluginForceDecoration') || docChanged) {\n          return renderDecorations({\n            doc: tr.doc,\n            name,\n            defaultLanguage,\n            defaultTheme,\n            themes,\n            highlighter: sharedHighlighter,\n          });\n        }\n\n        return decorationSet.map(tr.mapping, tr.doc);\n      },\n    },\n    props: {\n      decorations(state) {\n        return plugin.getState(state);\n      },\n    },\n  });\n\n  return plugin;\n};\n\nexport const CodeBlockShiki = CodeBlock.extend<CodeBlockShikiOptions>({\n  addOptions() {\n    return {\n      ...this.parent?.(),\n      defaultLanguage: null,\n      defaultTheme: 'github-light',\n      themes: null,\n    };\n  },\n\n  // @ts-expect-error tiptap-markdown integration property\n  markdownTokenName: 'code',\n\n  parseMarkdown(rawNode: any, builder: any) {\n    if (\n      rawNode.raw?.startsWith('```') === false &&\n      rawNode.raw?.startsWith('~~~') === false &&\n      rawNode.codeBlockStyle !== 'indented'\n    ) {\n      return [];\n    }\n    return builder.createNode(\n      'codeBlock',\n      { language: rawNode.lang || null },\n      rawNode.text ? [builder.createTextNode(rawNode.text)] : []\n    );\n  },\n\n  renderMarkdown(node: any, builder: any) {\n    const lang = node.attrs?.language || '';\n    return node.content\n      ? [`\\`\\`\\`${lang}`, builder.renderChildren(node.content), '```'].join(\n          '\\n'\n        )\n      : `\\`\\`\\`${lang}\\n\\n\\`\\`\\``;\n  },\n\n  addProseMirrorPlugins() {\n    return [\n      ...(this.parent?.() || []),\n      createShikiPlugin({\n        name: this.name,\n        defaultLanguage: this.options.defaultLanguage,\n        defaultTheme: this.options.defaultTheme,\n        themes: this.options.themes,\n      }),\n    ];\n  },\n});\n"],"mappings":"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"}

package/dist/esm/components/MarkdownEditor/novel/extensions/index.mjs

@@ -2,6 +2,7 @@ import CustomKeymap from "./custom-keymap.mjs";
 import { ImageResizer } from "./image-resizer.mjs";
 import UpdatedImage from "./updated-image.mjs";
 import { AIHighlight, addAIHighlight, inputRegex, pasteRegex, removeAIHighlight } from "./ai-highlight.mjs";
+import { CodeBlockShiki } from "./code-block-shiki.mjs";
 import { Command, createSuggestionItems, handleCommandNavigation, renderItems } from "./slash-command.mjs";
 import { InputRule } from "@tiptap/core";
 import CharacterCount from "@tiptap/extension-character-count";
@@ -47,5 +48,5 @@ const Horizontal = HorizontalRule.extend({ addInputRules() {
 } });
 
 //#endregion
-export { AIHighlight, CharacterCount, Color, Command, CustomKeymap, GlobalDragHandle, HighlightExtension, Horizontal as HorizontalRule, ImageResizer, InputRule, MarkdownExtension, PlaceholderExtension as Placeholder, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, UpdatedImage, Youtube, addAIHighlight, createSuggestionItems, handleCommandNavigation, inputRegex, pasteRegex, removeAIHighlight, renderItems };
+export { AIHighlight, CharacterCount, CodeBlockShiki, Color, Command, CustomKeymap, GlobalDragHandle, HighlightExtension, Horizontal as HorizontalRule, ImageResizer, InputRule, MarkdownExtension, PlaceholderExtension as Placeholder, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, UpdatedImage, Youtube, addAIHighlight, createSuggestionItems, handleCommandNavigation, inputRegex, pasteRegex, removeAIHighlight, renderItems };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/MarkdownEditor/novel/extensions/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/index.ts"],"sourcesContent":["import { InputRule } from '@tiptap/core';\nimport CharacterCount from '@tiptap/extension-character-count';\nimport { Color } from '@tiptap/extension-color';\nimport Highlight from '@tiptap/extension-highlight';\nimport HorizontalRule from '@tiptap/extension-horizontal-rule';\nimport TiptapImage from '@tiptap/extension-image';\nimport TiptapLink from '@tiptap/extension-link';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TaskItem } from '@tiptap/extension-task-item';\nimport { TaskList } from '@tiptap/extension-task-list';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport TiptapUnderline from '@tiptap/extension-underline';\nimport Youtube from '@tiptap/extension-youtube';\nimport StarterKit from '@tiptap/starter-kit';\nimport GlobalDragHandle from 'tiptap-extension-global-drag-handle';\nimport { Markdown } from 'tiptap-markdown';\nimport CustomKeymap from './custom-keymap';\nimport { ImageResizer } from './image-resizer';\nimport UpdatedImage from './updated-image';\n\nconst PlaceholderExtension = Placeholder.configure({\n  placeholder: ({ node }) => {\n    if (node.type.name === 'heading') {\n      return `Heading ${node.attrs.level}`;\n    }\n    return \"Press '/' for commands\";\n  },\n  includeChildren: true,\n});\n\nconst HighlightExtension = Highlight.configure({\n  multicolor: true,\n});\n\nconst MarkdownExtension = Markdown.configure({\n  html: false,\n  transformCopiedText: true,\n});\n\nconst Horizontal = HorizontalRule.extend({\n  addInputRules() {\n    return [\n      new InputRule({\n        find: /^(?:---|—-|___\\s|\\*\\*\\*\\s)$/u,\n        handler: ({ state, range }) => {\n          const attributes = {};\n\n          const { tr } = state;\n          const start = range.from;\n          const end = range.to;\n\n          tr.insert(start - 1, this.type.create(attributes)).delete(\n            tr.mapping.map(start),\n            tr.mapping.map(end)\n          );\n        },\n      }),\n    ];\n  },\n});\n\nexport * from './ai-highlight';\nexport * from './slash-command';\nexport {\n  CharacterCount,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  Horizontal as HorizontalRule,\n  ImageResizer,\n  InputRule,\n  MarkdownExtension,\n  PlaceholderExtension as Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  Youtube,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,uBAAuB,YAAY,UAAU;CACjD,cAAc,EAAE,WAAW;EACzB,IAAI,KAAK,KAAK,SAAS,WACrB,OAAO,WAAW,KAAK,MAAM;EAE/B,OAAO;CACT;CACA,iBAAiB;AACnB,CAAC;AAED,MAAM,qBAAqB,UAAU,UAAU,EAC7C,YAAY,KACd,CAAC;AAED,MAAM,oBAAoB,SAAS,UAAU;CAC3C,MAAM;CACN,qBAAqB;AACvB,CAAC;AAED,MAAM,aAAa,eAAe,OAAO,EACvC,gBAAgB;CACd,OAAO,CACL,IAAI,UAAU;EACZ,MAAM;EACN,UAAU,EAAE,OAAO,YAAY;GAC7B,MAAM,aAAa,CAAC;GAEpB,MAAM,EAAE,OAAO;GACf,MAAM,QAAQ,MAAM;GACpB,MAAM,MAAM,MAAM;GAElB,GAAG,OAAO,QAAQ,GAAG,KAAK,KAAK,OAAO,UAAU,CAAC,CAAC,CAAC,OACjD,GAAG,QAAQ,IAAI,KAAK,GACpB,GAAG,QAAQ,IAAI,GAAG,CACpB;EACF;CACF,CAAC,CACH;AACF,EACF,CAAC"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../src/components/MarkdownEditor/novel/extensions/index.ts"],"sourcesContent":["import { InputRule } from '@tiptap/core';\nimport CharacterCount from '@tiptap/extension-character-count';\nimport { Color } from '@tiptap/extension-color';\nimport Highlight from '@tiptap/extension-highlight';\nimport HorizontalRule from '@tiptap/extension-horizontal-rule';\nimport TiptapImage from '@tiptap/extension-image';\nimport TiptapLink from '@tiptap/extension-link';\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TaskItem } from '@tiptap/extension-task-item';\nimport { TaskList } from '@tiptap/extension-task-list';\nimport { TextStyle } from '@tiptap/extension-text-style';\nimport TiptapUnderline from '@tiptap/extension-underline';\nimport Youtube from '@tiptap/extension-youtube';\nimport StarterKit from '@tiptap/starter-kit';\nimport GlobalDragHandle from 'tiptap-extension-global-drag-handle';\nimport { Markdown } from 'tiptap-markdown';\nimport CustomKeymap from './custom-keymap';\nimport { ImageResizer } from './image-resizer';\nimport UpdatedImage from './updated-image';\n\nconst PlaceholderExtension = Placeholder.configure({\n  placeholder: ({ node }) => {\n    if (node.type.name === 'heading') {\n      return `Heading ${node.attrs.level}`;\n    }\n    return \"Press '/' for commands\";\n  },\n  includeChildren: true,\n});\n\nconst HighlightExtension = Highlight.configure({\n  multicolor: true,\n});\n\nconst MarkdownExtension = Markdown.configure({\n  html: false,\n  transformCopiedText: true,\n});\n\nconst Horizontal = HorizontalRule.extend({\n  addInputRules() {\n    return [\n      new InputRule({\n        find: /^(?:---|—-|___\\s|\\*\\*\\*\\s)$/u,\n        handler: ({ state, range }) => {\n          const attributes = {};\n\n          const { tr } = state;\n          const start = range.from;\n          const end = range.to;\n\n          tr.insert(start - 1, this.type.create(attributes)).delete(\n            tr.mapping.map(start),\n            tr.mapping.map(end)\n          );\n        },\n      }),\n    ];\n  },\n});\n\nexport * from './ai-highlight';\nexport * from './code-block-shiki';\nexport * from './slash-command';\nexport {\n  CharacterCount,\n  Color,\n  CustomKeymap,\n  GlobalDragHandle,\n  HighlightExtension,\n  Horizontal as HorizontalRule,\n  ImageResizer,\n  InputRule,\n  MarkdownExtension,\n  PlaceholderExtension as Placeholder,\n  StarterKit,\n  TaskItem,\n  TaskList,\n  TextStyle,\n  TiptapImage,\n  TiptapLink,\n  TiptapUnderline,\n  UpdatedImage,\n  Youtube,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,uBAAuB,YAAY,UAAU;CACjD,cAAc,EAAE,WAAW;EACzB,IAAI,KAAK,KAAK,SAAS,WACrB,OAAO,WAAW,KAAK,MAAM;EAE/B,OAAO;CACT;CACA,iBAAiB;AACnB,CAAC;AAED,MAAM,qBAAqB,UAAU,UAAU,EAC7C,YAAY,KACd,CAAC;AAED,MAAM,oBAAoB,SAAS,UAAU;CAC3C,MAAM;CACN,qBAAqB;AACvB,CAAC;AAED,MAAM,aAAa,eAAe,OAAO,EACvC,gBAAgB;CACd,OAAO,CACL,IAAI,UAAU;EACZ,MAAM;EACN,UAAU,EAAE,OAAO,YAAY;GAC7B,MAAM,aAAa,CAAC;GAEpB,MAAM,EAAE,OAAO;GACf,MAAM,QAAQ,MAAM;GACpB,MAAM,MAAM,MAAM;GAElB,GAAG,OAAO,QAAQ,GAAG,KAAK,KAAK,OAAO,UAAU,CAAC,CAAC,CAAC,OACjD,GAAG,QAAQ,IAAI,KAAK,GACpB,GAAG,QAAQ,IAAI,GAAG,CACpB;EACF;CACF,CAAC,CACH;AACF,EACF,CAAC"}

package/dist/esm/components/MarkdownEditor/novel/index.mjs

@@ -9,9 +9,10 @@ import CustomKeymap from "./extensions/custom-keymap.mjs";
 import { ImageResizer } from "./extensions/image-resizer.mjs";
 import UpdatedImage from "./extensions/updated-image.mjs";
 import { AIHighlight, addAIHighlight, removeAIHighlight } from "./extensions/ai-highlight.mjs";
+import { CodeBlockShiki } from "./extensions/code-block-shiki.mjs";
 import { Command, createSuggestionItems, handleCommandNavigation, renderItems } from "./extensions/slash-command.mjs";
 import { CharacterCount, Color, GlobalDragHandle, HighlightExtension, HorizontalRule as Horizontal, InputRule, MarkdownExtension, Placeholder as PlaceholderExtension, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, Youtube } from "./extensions/index.mjs";
 import { UploadImagesPlugin, createImageUpload, handleImageDrop, handleImagePaste } from "./plugins/upload-images.mjs";
 import { getAllContent, getPrevText, getUrlFromString, isValidUrl } from "./utils/index.mjs";
 
-export { AIHighlight, CharacterCount, Color, Command, CustomKeymap, EditorBubble, EditorBubbleItem, EditorCommand, EditorCommandEmpty, EditorCommandItem, EditorCommandList, EditorContent, EditorRoot, GlobalDragHandle, HighlightExtension, Horizontal as HorizontalRule, ImageResizer, InputRule, MarkdownExtension, PlaceholderExtension as Placeholder, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, UpdatedImage, UploadImagesPlugin, Youtube, addAIHighlight, createImageUpload, createSuggestionItems, getAllContent, getPrevText, getUrlFromString, handleCommandNavigation, handleImageDrop, handleImagePaste, isValidUrl, queryStore, rangeStore, removeAIHighlight, renderItems, useEditor, useQuery, useRange };
+export { AIHighlight, CharacterCount, CodeBlockShiki, Color, Command, CustomKeymap, EditorBubble, EditorBubbleItem, EditorCommand, EditorCommandEmpty, EditorCommandItem, EditorCommandList, EditorContent, EditorRoot, GlobalDragHandle, HighlightExtension, Horizontal as HorizontalRule, ImageResizer, InputRule, MarkdownExtension, PlaceholderExtension as Placeholder, StarterKit, TaskItem, TaskList, TextStyle, TiptapImage, TiptapLink, TiptapUnderline, UpdatedImage, UploadImagesPlugin, Youtube, addAIHighlight, createImageUpload, createSuggestionItems, getAllContent, getPrevText, getUrlFromString, handleCommandNavigation, handleImageDrop, handleImagePaste, isValidUrl, queryStore, rangeStore, removeAIHighlight, renderItems, useEditor, useQuery, useRange };

package/dist/esm/components/Modal/Modal.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { H3 } from "../Headers/index.mjs";
 import { useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Navbar/MobileNavbar.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Pagination/Pagination.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/esm/components/RightDrawer/RightDrawer.mjs

@@ -1,12 +1,12 @@
 'use client';
 
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useIsRightDrawerOpen, useRightDrawerActions } from "./useRightDrawer.mjs";

package/dist/esm/components/Tab/Tab.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { TabSelector } from "../TabSelector/TabSelector.mjs";
+import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/TechLogo/logos/HTMX.mjs

@@ -12,11 +12,11 @@ const HTMXLogo = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsxs("g", { children: [
 		/* @__PURE__ */ jsx("polygon", {
-			fill: "#111111",
+			fill: "currentColor",
 			points: "181.394935 42.749283 256 74.2039835 256 96.0617321 181.394935 127.078518 175.477838 105.581524 230.646979 84.8771384 175.477838 64.0931689"
 		}),
 		/* @__PURE__ */ jsx("polygon", {
-			fill: "#111111",
+			fill: "currentColor",
 			points: "74.6050654 42.7484751 6.6060424e-14 74.2039835 1.83634114e-13 96.0617321 74.6050654 127.078518 80.5221623 105.581524 25.3530206 84.8771384 80.5221623 64.0931689"
 		}),
 		/* @__PURE__ */ jsx("polygon", {

package/dist/esm/components/TechLogo/logos/HTMX.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HTMX.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/HTMX.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const HTMXLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    width=\"256px\"\n    height=\"168px\"\n    viewBox=\"0 0 256 168\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"HTMX logo\"\n    preserveAspectRatio=\"xMidYMid\"\n    {...props}\n  >\n    <g>\n      <polygon\n        fill=\"#111111\"\n        points=\"181.394935 42.749283 256 74.2039835 256 96.0617321 181.394935 127.078518 175.477838 105.581524 230.646979 84.8771384 175.477838 64.0931689\"\n      ></polygon>\n      <polygon\n        fill=\"#111111\"\n        points=\"74.6050654 42.7484751 6.6060424e-14 74.2039835 1.83634114e-13 96.0617321 74.6050654 127.078518 80.5221623 105.581524 25.3530206 84.8771384 80.5221623 64.0931689\"\n      ></polygon>\n      <polygon\n        fill=\"#4065C5\"\n        points=\"144.339858 -1.59458264e-15 170.003907 -1.59458264e-15 112.990192 167.110525 85.996093 167.110525\"\n      ></polygon>\n    </g>\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAa,YAAyC,UACpD,oBAAC,OAAD;CACE,OAAM;CACN,QAAO;CACP,SAAQ;CACR,SAAQ;CACR,OAAM;CACN,cAAW;CACX,qBAAoB;CACpB,GAAI;WAEJ,qBAAC,KAAD;EACE,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;EACV,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;EACV,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;CACT;AACA"}
+{"version":3,"file":"HTMX.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/HTMX.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const HTMXLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n  <svg\n    width=\"256px\"\n    height=\"168px\"\n    viewBox=\"0 0 256 168\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-label=\"HTMX logo\"\n    preserveAspectRatio=\"xMidYMid\"\n    {...props}\n  >\n    <g>\n      <polygon\n        fill=\"currentColor\"\n        points=\"181.394935 42.749283 256 74.2039835 256 96.0617321 181.394935 127.078518 175.477838 105.581524 230.646979 84.8771384 175.477838 64.0931689\"\n      ></polygon>\n      <polygon\n        fill=\"currentColor\"\n        points=\"74.6050654 42.7484751 6.6060424e-14 74.2039835 1.83634114e-13 96.0617321 74.6050654 127.078518 80.5221623 105.581524 25.3530206 84.8771384 80.5221623 64.0931689\"\n      ></polygon>\n      <polygon\n        fill=\"#4065C5\"\n        points=\"144.339858 -1.59458264e-15 170.003907 -1.59458264e-15 112.990192 167.110525 85.996093 167.110525\"\n      ></polygon>\n    </g>\n  </svg>\n);\n"],"mappings":";;;AAEA,MAAa,YAAyC,UACpD,oBAAC,OAAD;CACE,OAAM;CACN,QAAO;CACP,SAAQ;CACR,SAAQ;CACR,OAAM;CACN,cAAW;CACX,qBAAoB;CACpB,GAAI;WAEJ,qBAAC,KAAD;EACE,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;EACV,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;EACV,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;CACT;AACA"}

package/dist/esm/hooks/index.mjs

@@ -1,16 +1,16 @@
-import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
-import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
-import { useScrollY } from "./useScrollY.mjs";
+import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
+import { useItemSelector } from "./useItemSelector.mjs";
 import { usePersistedStore } from "./usePersistedStore.mjs";
+import { useGetElementById } from "./useGetElementById.mjs";
+import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
 import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
-import { useItemSelector } from "./useItemSelector.mjs";
-import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
-import { useSearch } from "./useSearch.mjs";
 import { useIsMounted } from "./useIsMounted.mjs";
-import { useGetElementById } from "./useGetElementById.mjs";
+import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
 import { useScreenWidth } from "./useScreenWidth.mjs";
 import { useScrollBlockage } from "./useScrollBlockage/index.mjs";
 import { useScrollDetection } from "./useScrollDetection.mjs";
+import { useScrollY } from "./useScrollY.mjs";
+import { useSearch } from "./useSearch.mjs";
 import { useStickToBottom } from "./useStickToBottom.mjs";
 
 export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsMounted, useItemSelector, useKeyboardDetector, usePersistedStore, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useStickToBottom };