zudoku 0.0.0-f3f6db5 → 0.0.0-f40ea27

package/lib/useScrollToAnchor-BZsGmBng.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollToAnchor-BZsGmBng.js","sources":["../../../node_modules/.pnpm/@mdx-js+react@3.1.0_@types+react@19.0.7_react@19.0.0/node_modules/@mdx-js/react/lib/index.js","../src/lib/components/AnchorLink.tsx","../src/lib/components/navigation/SidebarBadge.tsx","../src/lib/components/navigation/SidebarCategory.tsx","../src/lib/components/navigation/SidebarItem.tsx","../src/lib/util/useScrollToAnchor.ts"],"sourcesContent":["/**\n * @import {MDXComponents} from 'mdx/types.js'\n * @import {Component, ReactElement, ReactNode} from 'react'\n */\n\n/**\n * @callback MergeComponents\n *   Custom merge function.\n * @param {Readonly<MDXComponents>} currentComponents\n *   Current components from the context.\n * @returns {MDXComponents}\n *   Additional components.\n *\n * @typedef Props\n *   Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n *   Children (optional).\n * @property {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n *   Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n *   Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly<MDXComponents>} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n *   Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n *   Current components.\n */\nexport function useMDXComponents(components) {\n  const contextComponents = React.useContext(MDXContext)\n\n  // Memoize to avoid unnecessary top-level context changes\n  return React.useMemo(\n    function () {\n      // Custom merge via a function prop\n      if (typeof components === 'function') {\n        return components(contextComponents)\n      }\n\n      return {...contextComponents, ...components}\n    },\n    [contextComponents, components]\n  )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly<Props>} properties\n *   Properties.\n * @returns {ReactElement}\n *   Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n  /** @type {Readonly<MDXComponents>} */\n  let allComponents\n\n  if (properties.disableParentContext) {\n    allComponents =\n      typeof properties.components === 'function'\n        ? properties.components(emptyComponents)\n        : properties.components || emptyComponents\n  } else {\n    allComponents = useMDXComponents(properties.components)\n  }\n\n  return React.createElement(\n    MDXContext.Provider,\n    {value: allComponents},\n    properties.children\n  )\n}\n","import React from \"react\";\nimport { Link, type LinkProps, useLocation } from \"react-router\";\nimport { useScrollToHash } from \"../util/useScrollToAnchor.js\";\n\n/**\n * Link that scrolls to anchor even if the hash is already set in the URL.\n */\nexport const AnchorLink = (props: LinkProps) => {\n  const location = useLocation();\n  const scrollToHash = useScrollToHash();\n  const hash = typeof props.to === \"string\" ? props.to : props.to.hash;\n\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    props.onClick?.(event);\n    if (!hash?.startsWith(\"#\") || hash !== location.hash) return;\n\n    event.preventDefault();\n    scrollToHash(hash);\n  };\n\n  return <Link {...props} onClick={handleClick} />;\n};\n","import { cn } from \"../../util/cn.js\";\n\nexport const ColorMap = {\n  green: \"bg-green-400 dark:bg-green-800\",\n  blue: \"bg-sky-400 dark:bg-sky-800\",\n  yellow: \"bg-yellow-400 dark:bg-yellow-800\",\n  red: \"bg-red-400 dark:bg-red-800\",\n  purple: \"bg-purple-400 dark:bg-purple-600\",\n  indigo: \"bg-indigo-400 dark:bg-indigo-600\",\n  gray: \"bg-gray-400 dark:bg-gray-600\",\n};\n\nexport const ColorMapInvert = {\n  green: \"text-green-500 dark:text-green-600\",\n  blue: \"text-sky-400 dark:text-sky-600\",\n  yellow: \"text-yellow-400 dark:text-yellow-600\",\n  red: \"text-red-400 dark:text-red-600\",\n  purple: \"text-purple-400 dark:text-purple-600\",\n  indigo: \"text-indigo-400 dark:text-indigo-600\",\n  gray: \"text-gray-400 dark:text-gray-600\",\n};\n\nexport const SidebarBadge = ({\n  color,\n  label,\n  className,\n  invert,\n}: {\n  color: keyof typeof ColorMap;\n  label: string;\n  className?: string;\n  invert?: boolean;\n}) => {\n  return (\n    <span\n      className={cn(\n        \"mt-0.5 flex items-center duration-200 transition-opacity text-center uppercase font-mono text-[0.65rem] font-bold rounded text-background dark:text-zinc-50 h-4 px-1\",\n        invert ? ColorMapInvert[color] : ColorMap[color],\n        className,\n      )}\n    >\n      {label}\n    </span>\n  );\n};\n","import * as Collapsible from \"@radix-ui/react-collapsible\";\nimport { ChevronRightIcon } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { NavLink, useMatch } from \"react-router\";\nimport type { SidebarItemCategory } from \"../../../config/validators/SidebarSchema.js\";\nimport { cn } from \"../../util/cn.js\";\nimport { joinPath } from \"../../util/joinPath.js\";\nimport { navigationListItem, SidebarItem } from \"./SidebarItem.js\";\nimport { useIsCategoryOpen } from \"./utils.js\";\n\nexport const SidebarCategory = ({\n  category,\n  onRequestClose,\n}: {\n  category: SidebarItemCategory;\n  onRequestClose?: () => void;\n}) => {\n  const isCategoryOpen = useIsCategoryOpen(category);\n  const [hasInteracted, setHasInteracted] = useState(false);\n\n  const isCollapsible = category.collapsible ?? true;\n  const isCollapsed = category.collapsed ?? true;\n  const isDefaultOpen = Boolean(\n    !isCollapsible || !isCollapsed || isCategoryOpen,\n  );\n  const [open, setOpen] = useState(isDefaultOpen);\n  const isActive = useMatch(category.link?.id ?? \"\");\n\n  useEffect(() => {\n    // this is triggered when an item from the sidebar is clicked\n    // and the sidebar, enclosing this item, is not opened\n    if (isCategoryOpen) {\n      setOpen(true);\n    }\n  }, [isCategoryOpen]);\n\n  const ToggleButton = isCollapsible && (\n    <button\n      type=\"button\"\n      onClick={(e) => {\n        e.preventDefault();\n        setOpen((prev) => !prev);\n        setHasInteracted(true);\n      }}\n    >\n      <ChevronRightIcon\n        size={16}\n        className={cn(\n          hasInteracted && \"transition\",\n          \"shrink-0 group-data-[state=open]:rotate-90\",\n        )}\n      />\n    </button>\n  );\n\n  const icon = category.icon && (\n    <category.icon\n      size={16}\n      className={cn(\"align-[-0.125em] \", isActive && \"text-primary\")}\n    />\n  );\n\n  const styles = navigationListItem({\n    className: [\n      \"text-start font-medium\",\n      isCollapsible || typeof category.link !== \"undefined\"\n        ? \"cursor-pointer\"\n        : \"cursor-default hover:bg-transparent\",\n    ],\n  });\n\n  return (\n    <Collapsible.Root\n      className=\"flex flex-col\"\n      defaultOpen={isDefaultOpen}\n      open={open}\n      onOpenChange={() => setOpen(true)}\n    >\n      <Collapsible.Trigger className=\"group\" asChild disabled={!isCollapsible}>\n        {category.link?.type === \"doc\" ? (\n          <NavLink\n            to={joinPath(category.link.id)}\n            className={styles}\n            onClick={() => {\n              setHasInteracted(true);\n              // if it is the current path and closed then open it because there's no path change to trigger the open\n              if (isActive && !open) {\n                setOpen(true);\n              }\n            }}\n          >\n            {icon}\n            <div\n              className={cn(\n                \"flex items-center gap-2 justify-between w-full\",\n                isActive ? \"text-primary\" : \"text-foreground/80\",\n              )}\n            >\n              <div className=\"truncate\">{category.label}</div>\n              {ToggleButton}\n            </div>\n          </NavLink>\n        ) : (\n          <div onClick={() => setHasInteracted(true)} className={styles}>\n            {icon}\n            <div className=\"flex items-center justify-between w-full\">\n              <div className=\"flex gap-2 truncate w-full\">{category.label}</div>\n              {ToggleButton}\n            </div>\n          </div>\n        )}\n      </Collapsible.Trigger>\n      <Collapsible.Content\n        className={cn(\n          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle\n          hasInteracted && \"CollapsibleContent\",\n          category.items.length === 0 && \"hidden\",\n          \"ms-6 my-1\",\n        )}\n      >\n        <ul className=\"relative after:absolute after:-left-[--padding-nav-item] after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border\">\n          {category.items.map((item) => (\n            <SidebarItem\n              key={\n                (\"id\" in item ? item.id : \"\") +\n                (\"href\" in item ? item.href : \"\") +\n                item.label\n              }\n              onRequestClose={onRequestClose}\n              item={item}\n            />\n          ))}\n        </ul>\n      </Collapsible.Content>\n    </Collapsible.Root>\n  );\n};\n","import { cva } from \"class-variance-authority\";\nimport { ExternalLinkIcon } from \"lucide-react\";\nimport { NavLink, useSearchParams } from \"react-router\";\n\nimport type { SidebarItem as SidebarItemType } from \"../../../config/validators/SidebarSchema.js\";\nimport { joinPath } from \"../../util/joinPath.js\";\nimport { AnchorLink } from \"../AnchorLink.js\";\nimport { useViewportAnchor } from \"../context/ViewportAnchorContext.js\";\nimport { SidebarBadge } from \"./SidebarBadge.js\";\nimport { SidebarCategory } from \"./SidebarCategory.js\";\n\nexport const navigationListItem = cva(\n  \"flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent\",\n  {\n    variants: {\n      isActive: {\n        true: \"text-primary font-medium\",\n        false: \"text-foreground/80\",\n      },\n      isMuted: {\n        true: \"text-foreground/30\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      isActive: false,\n    },\n  },\n);\n\nexport const DATA_ANCHOR_ATTR = \"data-anchor\";\n\nexport const SidebarItem = ({\n  item,\n  onRequestClose,\n}: {\n  item: SidebarItemType;\n  onRequestClose?: () => void;\n}) => {\n  const { activeAnchor } = useViewportAnchor();\n  const [searchParams] = useSearchParams();\n\n  switch (item.type) {\n    case \"category\":\n      return (\n        <SidebarCategory category={item} onRequestClose={onRequestClose} />\n      );\n    case \"doc\":\n      return (\n        <NavLink\n          className={({ isActive }) => navigationListItem({ isActive })}\n          to={joinPath(item.id)}\n          onClick={onRequestClose}\n        >\n          {item.icon && <item.icon size={16} className=\"align-[-0.125em]\" />}\n          {item.badge ? (\n            <>\n              <span className=\"truncate flex-1\" title={item.label}>\n                {item.label}\n              </span>\n              <SidebarBadge {...item.badge} />\n            </>\n          ) : (\n            item.label\n          )}\n        </NavLink>\n      );\n    case \"link\":\n      return item.href.startsWith(\"#\") ? (\n        <AnchorLink\n          to={{ hash: item.href, search: searchParams.toString() }}\n          {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}\n          className={navigationListItem({\n            isActive: item.href.slice(1) === activeAnchor,\n            className: item.badge?.placement !== \"start\" && \"justify-between\",\n          })}\n          onClick={onRequestClose}\n        >\n          {item.badge ? (\n            <>\n              <span className=\"truncate\" title={item.label}>\n                {item.label}\n              </span>\n              <SidebarBadge {...item.badge} />\n            </>\n          ) : (\n            <span className=\"break-all\">{item.label}</span>\n          )}\n        </AnchorLink>\n      ) : !item.href.startsWith(\"http\") ? (\n        <NavLink\n          className={navigationListItem({\n            className: item.badge?.placement !== \"start\" && \"justify-between\",\n          })}\n          to={item.href}\n        >\n          {item.badge ? (\n            <>\n              <span className=\"truncate\" title={item.label}>\n                {item.label}\n              </span>\n              <SidebarBadge {...item.badge} />\n            </>\n          ) : (\n            <span className=\"break-all\">{item.label}</span>\n          )}\n        </NavLink>\n      ) : (\n        <a\n          className={navigationListItem()}\n          href={item.href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          onClick={onRequestClose}\n        >\n          <span className=\"whitespace-normal\">{item.label}</span>\n          {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}\n          <span className=\"whitespace-nowrap\">\n            <ExternalLinkIcon className=\"inline -translate-y-0.5\" size={12} />\n          </span>\n        </a>\n      );\n  }\n};\n","import { useCallback, useEffect } from \"react\";\nimport { useLocation } from \"react-router\";\nimport { useViewportAnchor } from \"../components/context/ViewportAnchorContext.js\";\nimport { DATA_ANCHOR_ATTR } from \"../components/navigation/SidebarItem.js\";\n\nconst scrollIntoViewIfNeeded = (\n  element: Element | null,\n  options: ScrollIntoViewOptions = { block: \"center\" },\n) => {\n  if (!element) return;\n\n  const rect = element.getBoundingClientRect();\n  const isInView =\n    rect.top >= 0 &&\n    rect.left >= 0 &&\n    rect.bottom <=\n      (window.innerHeight || document.documentElement.clientHeight) &&\n    rect.right <= (window.innerWidth || document.documentElement.clientWidth);\n\n  if (isInView) return;\n\n  element.scrollIntoView(options);\n};\n\nexport const useScrollToHash = () => {\n  const { setActiveAnchor } = useViewportAnchor();\n\n  const scrollToHash = useCallback(\n    (hash: string) => {\n      const cleanHash = hash\n        .replace(/^#/, \"\")\n        // Operation list items might have subdivisions that the sidebar doesn't show.\n        // The subdivisions are separated by a slash so we need to remove everything before the slash to get the sidebar correct item.\n        .split(\"/\")\n        .at(0)!;\n      const element = document.getElementById(decodeURIComponent(cleanHash));\n      const link = document.querySelector(\n        `[${DATA_ANCHOR_ATTR}=\"${cleanHash}\"]`,\n      );\n\n      if (element) {\n        element.scrollIntoView();\n        scrollIntoViewIfNeeded(link);\n        requestIdleCallback(() => setActiveAnchor(cleanHash));\n        return true;\n      }\n\n      // Scroll didn't happen\n      return false;\n    },\n    [setActiveAnchor],\n  );\n\n  return scrollToHash;\n};\n\nexport const useScrollToAnchor = () => {\n  const location = useLocation();\n  const { setActiveAnchor } = useViewportAnchor();\n  const scrollToHash = useScrollToHash();\n\n  useEffect(() => {\n    if (!location.hash) return;\n\n    if (!scrollToHash(location.hash)) {\n      const observer = new MutationObserver((_, obs) => {\n        if (!scrollToHash(location.hash)) return;\n        obs.disconnect();\n      });\n\n      observer.observe(document.body, { childList: true, subtree: true });\n\n      return () => observer.disconnect();\n    }\n  }, [location.hash, setActiveAnchor]);\n};\n"],"names":["emptyComponents","MDXContext","React","useMDXComponents","components","contextComponents","MDXProvider","properties","allComponents","AnchorLink","props","location","useLocation","scrollToHash","useScrollToHash","hash","handleClick","event","_a","jsx","Link","ColorMap","ColorMapInvert","SidebarBadge","color","label","className","invert","cn","SidebarCategory","category","onRequestClose","isCategoryOpen","useIsCategoryOpen","hasInteracted","setHasInteracted","useState","isCollapsible","isCollapsed","isDefaultOpen","open","setOpen","isActive","useMatch","useEffect","ToggleButton","e","prev","ChevronRightIcon","icon","styles","navigationListItem","jsxs","Collapsible","_b","NavLink","joinPath","item","SidebarItem","cva","DATA_ANCHOR_ATTR","activeAnchor","useViewportAnchor","searchParams","useSearchParams","Fragment","ExternalLinkIcon","scrollIntoViewIfNeeded","element","options","rect","setActiveAnchor","useCallback","cleanHash","link","useScrollToAnchor","observer","_","obs"],"mappings":"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","x_google_ignoreList":[0]}

package/src/app/tailwind.ts

@@ -1,83 +0,0 @@
-import typographyPlugin from "@tailwindcss/typography";
-import type { Config } from "tailwindcss";
-import defaultTheme from "tailwindcss/defaultTheme.js";
-import type { LoadedConfig } from "../config/config.js";
-
-const content = [
-  "./src/**/*.{js,ts,jsx,tsx,md,mdx}",
-  "./node_modules/zudoku/dist/**/*.{js,ts,jsx,tsx,md,mdx}",
-];
-
-const config = (zudokuConfig?: LoadedConfig): Omit<Config, "content"> => {
-  const sans = zudokuConfig?.theme?.fonts?.sans
-    ? ([
-        zudokuConfig.theme.fonts.sans.fontFamily,
-        ...defaultTheme.fontFamily.sans,
-      ] as const)
-    : ([
-        ["Geist", ...defaultTheme.fontFamily.sans],
-        { fontFeatureSettings: '"rlig" 1, "calt" 0' },
-      ] as const);
-
-  const mono = zudokuConfig?.theme?.fonts?.mono
-    ? zudokuConfig.theme.fonts.mono.fontFamily
-    : defaultTheme.fontFamily.mono;
-
-  return {
-    darkMode: "selector",
-    content,
-    theme: {
-      extend: {
-        fontFamily: {
-          sans,
-          mono,
-        },
-        typography: () => ({
-          DEFAULT: {
-            css: {
-              blockquote: { quotes: "none" },
-            },
-          },
-        }),
-        colors: {
-          border: "hsl(var(--border))",
-          input: "hsl(var(--input))",
-          ring: "hsl(var(--ring))",
-          background: "hsl(var(--background))",
-          foreground: "hsl(var(--foreground))",
-          primary: {
-            DEFAULT: "hsl(var(--primary))",
-            foreground: "hsl(var(--primary-foreground))",
-          },
-          secondary: {
-            DEFAULT: "hsl(var(--secondary))",
-            foreground: "hsl(var(--secondary-foreground))",
-          },
-          destructive: {
-            DEFAULT: "hsl(var(--destructive))",
-            foreground: "hsl(var(--destructive-foreground))",
-          },
-          muted: {
-            DEFAULT: "hsl(var(--muted))",
-            foreground: "hsl(var(--muted-foreground))",
-          },
-          accent: {
-            DEFAULT: "hsl(var(--accent))",
-            foreground: "hsl(var(--accent-foreground))",
-          },
-          popover: {
-            DEFAULT: "hsl(var(--popover))",
-            foreground: "hsl(var(--popover-foreground))",
-          },
-          card: {
-            DEFAULT: "hsl(var(--card))",
-            foreground: "hsl(var(--card-foreground))",
-          },
-        },
-      },
-    },
-    plugins: [typographyPlugin],
-  };
-};
-
-export default config;

package/src/lib/components/SlotletProvider.tsx

@@ -1,55 +0,0 @@
-import React, {
-  type ComponentType,
-  type ReactElement,
-  ReactNode,
-  useContext,
-} from "react";
-import { isValidElementType } from "react-is";
-import {
-  type Location,
-  type NavigateFunction,
-  type Params,
-  type SetURLSearchParams,
-} from "react-router";
-import { useExposedProps } from "../util/useExposedProps.js";
-
-export type Slotlets = Record<
-  string,
-  ReactNode | ReactElement | ComponentType<ExposedComponentProps>
->;
-
-const SlotletContext = React.createContext<Slotlets | undefined>({});
-
-export const SlotletProvider = ({
-  slotlets,
-  children,
-}: {
-  children: ReactNode;
-  slotlets?: Slotlets;
-}) => {
-  return (
-    <SlotletContext.Provider value={slotlets}>
-      {children}
-    </SlotletContext.Provider>
-  );
-};
-
-export type ExposedComponentProps = {
-  location: Location;
-  navigate: NavigateFunction;
-  searchParams: URLSearchParams;
-  setSearchParams: SetURLSearchParams;
-  params: Params;
-};
-
-export const Slotlet = ({ name }: { name: string }) => {
-  const context = useContext(SlotletContext);
-  const componentOrElement = context?.[name];
-  const slotletProps = useExposedProps();
-
-  if (isValidElementType(componentOrElement)) {
-    return React.createElement(componentOrElement, slotletProps);
-  }
-
-  return componentOrElement as ReactNode;
-};

package/src/lib/components/SyntaxHighlight.tsx

@@ -1,171 +0,0 @@
-import {
-  Highlight,
-  Prism,
-  themes,
-  type HighlightProps,
-} from "prism-react-renderer";
-
-import { CheckIcon, CopyIcon } from "lucide-react";
-
-globalThis.Prism = Prism;
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-bash.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-ruby.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-markup.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-json.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-java.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-csharp.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-objectivec.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-markdown.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-javascript.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-typescript.min.js");
-
-import { useTheme } from "next-themes";
-import { useState } from "react";
-import { cn } from "../util/cn.js";
-import { ClientOnly } from "./ClientOnly.js";
-
-type SyntaxHighlightProps = {
-  className?: string;
-  noBackground?: boolean;
-  wrapLines?: boolean;
-  copyable?: boolean;
-  showLanguageIndicator?: boolean;
-  language?: string;
-  title?: string;
-} & Omit<HighlightProps, "children" | "language">;
-
-const remapLang = {
-  mdx: "md",
-} as Record<string, string>;
-
-export const SyntaxHighlight = ({
-  copyable = true,
-  language = "plain",
-  title,
-  ...props
-}: SyntaxHighlightProps) => {
-  const { resolvedTheme } = useTheme();
-  const [isCopied, setIsCopied] = useState(false);
-
-  if (!props.code) {
-    return null;
-  }
-
-  const highlightTheme =
-    resolvedTheme === "dark" ? themes.vsDark : themes.github;
-
-  // hardcoded values from the themes to avoid color flash in SSR
-  const themeColorClasses =
-    "bg-[#f6f8fa] text-[#393a34] dark:bg-[#1e1e1e] dark:text-[#9cdcfe]";
-
-  return (
-    <ClientOnly
-      fallback={
-        <div className="relative group">
-          {title && (
-            <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
-              {title}
-            </div>
-          )}
-          <pre
-            className={cn(
-              "relative scrollbar overflow-x-auto",
-              props.className,
-              props.noBackground ? "!bg-transparent" : themeColorClasses,
-              props.wrapLines && "whitespace-pre-wrap break-words",
-              title && "pt-10",
-            )}
-          >
-            {props.code}
-          </pre>
-          {props.showLanguageIndicator && (
-            <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-              {language}
-            </span>
-          )}
-        </div>
-      }
-    >
-      <Highlight
-        theme={highlightTheme}
-        language={remapLang[language] ?? language}
-        {...props}
-      >
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <div className="relative group">
-            {title && (
-              <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
-                {title}
-              </div>
-            )}
-            <pre
-              className={cn(
-                "relative scrollbar overflow-x-auto",
-                className,
-                props.className,
-                props.noBackground && "!bg-transparent",
-                props.wrapLines && "whitespace-pre-wrap break-words",
-                title && "pt-10",
-              )}
-              style={style}
-            >
-              {tokens.map((line, i) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <div key={i} {...getLineProps({ line })}>
-                  {line.map((token, key) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <span key={key} {...getTokenProps({ token })} />
-                  ))}
-                </div>
-              ))}
-            </pre>
-            {props.showLanguageIndicator && (
-              <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-                {language}
-              </span>
-            )}
-            {copyable && (
-              <button
-                type="button"
-                aria-label="Copy code"
-                title="Copy code"
-                className="absolute top-2 right-2 p-2 opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-400 transition"
-                disabled={isCopied}
-                onClick={() => {
-                  setIsCopied(true);
-                  void navigator.clipboard.writeText(
-                    tokens
-                      .map((l) => l.map(({ content }) => content).join(""))
-                      .join("\n"),
-                  );
-                  setTimeout(() => setIsCopied(false), 2000);
-                }}
-              >
-                {isCopied ? (
-                  <CheckIcon
-                    className="text-emerald-600"
-                    size={16}
-                    strokeWidth={2.5}
-                    absoluteStrokeWidth
-                  />
-                ) : (
-                  <CopyIcon size={16} />
-                )}
-              </button>
-            )}
-          </div>
-        )}
-      </Highlight>
-    </ClientOnly>
-  );
-};

package/src/lib/components/navigation/Sidebar.tsx

@@ -1,49 +0,0 @@
-import { useRef } from "react";
-
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { DrawerContent, DrawerTitle } from "../../ui/Drawer.js";
-import { useCurrentNavigation } from "../context/ZudokuContext.js";
-import { Slotlet } from "../SlotletProvider.js";
-import { SidebarItem } from "./SidebarItem.js";
-import { SidebarWrapper } from "./SidebarWrapper.js";
-
-export const Sidebar = ({
-  onRequestClose,
-}: {
-  onRequestClose?: () => void;
-}) => {
-  const navRef = useRef<HTMLDivElement | null>(null);
-  const navigation = useCurrentNavigation();
-
-  return (
-    <>
-      <SidebarWrapper
-        ref={navRef}
-        pushMainContent={navigation.sidebar.length > 0}
-      >
-        <Slotlet name="zudoku-before-navigation" />
-        {navigation.sidebar.map((item) => (
-          <SidebarItem key={item.label} item={item} />
-        ))}
-        <Slotlet name="zudoku-after-navigation" />
-      </SidebarWrapper>
-      <DrawerContent
-        className="lg:hidden h-[100dvh] left-0 w-[320px] rounded-none"
-        aria-describedby={undefined}
-      >
-        <div className="p-4 overflow-y-auto overscroll-none">
-          <VisuallyHidden>
-            <DrawerTitle>Sidebar</DrawerTitle>
-          </VisuallyHidden>
-          {navigation.sidebar.map((item) => (
-            <SidebarItem
-              key={item.label}
-              item={item}
-              onRequestClose={onRequestClose}
-            />
-          ))}
-        </div>
-      </DrawerContent>
-    </>
-  );
-};

package/src/lib/components/navigation/SidebarBadge.tsx

@@ -1,45 +0,0 @@
-import { cn } from "../../util/cn.js";
-
-export const ColorMap = {
-  green: "bg-green-400 dark:bg-green-800",
-  blue: "bg-sky-400 dark:bg-sky-800",
-  yellow: "bg-yellow-400 dark:bg-yellow-800",
-  red: "bg-red-400 dark:bg-red-800",
-  purple: "bg-purple-400 dark:bg-purple-600",
-  indigo: "bg-indigo-400 dark:bg-indigo-600",
-  gray: "bg-gray-400 dark:bg-gray-600",
-};
-
-export const ColorMapInvert = {
-  green: "text-green-500 dark:text-green-600",
-  blue: "text-sky-400 dark:text-sky-600",
-  yellow: "text-yellow-400 dark:text-yellow-600",
-  red: "text-red-400 dark:text-red-600",
-  purple: "text-purple-400 dark:text-purple-600",
-  indigo: "text-indigo-400 dark:text-indigo-600",
-  gray: "text-gray-400 dark:text-gray-600",
-};
-
-export const SidebarBadge = ({
-  color,
-  label,
-  className,
-  invert,
-}: {
-  color: keyof typeof ColorMap;
-  label: string;
-  className?: string;
-  invert?: boolean;
-}) => {
-  return (
-    <span
-      className={cn(
-        "mt-0.5 flex items-center duration-200 transition-opacity text-center uppercase font-mono text-[0.65rem] font-bold rounded text-background dark:text-zinc-50 h-4 px-1",
-        invert ? ColorMapInvert[color] : ColorMap[color],
-        className,
-      )}
-    >
-      {label}
-    </span>
-  );
-};

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -1,137 +0,0 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { ChevronRightIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { NavLink, useMatch } from "react-router";
-import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
-import { cn } from "../../util/cn.js";
-import { joinPath } from "../../util/joinPath.js";
-import { navigationListItem, SidebarItem } from "./SidebarItem.js";
-import { useIsCategoryOpen } from "./utils.js";
-
-export const SidebarCategory = ({
-  category,
-  onRequestClose,
-}: {
-  category: SidebarItemCategory;
-  onRequestClose?: () => void;
-}) => {
-  const isCategoryOpen = useIsCategoryOpen(category);
-  const [hasInteracted, setHasInteracted] = useState(false);
-
-  const isCollapsible = category.collapsible ?? true;
-  const isCollapsed = category.collapsed ?? true;
-  const isDefaultOpen = Boolean(
-    !isCollapsible || !isCollapsed || isCategoryOpen,
-  );
-  const [open, setOpen] = useState(isDefaultOpen);
-  const isActive = useMatch(category.link?.id ?? "");
-
-  useEffect(() => {
-    // this is triggered when an item from the sidebar is clicked
-    // and the sidebar, enclosing this item, is not opened
-    if (isCategoryOpen) {
-      setOpen(true);
-    }
-  }, [isCategoryOpen]);
-
-  const ToggleButton = isCollapsible && (
-    <button
-      type="button"
-      onClick={(e) => {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-        setHasInteracted(true);
-      }}
-    >
-      <ChevronRightIcon
-        size={16}
-        className={cn(
-          hasInteracted && "transition",
-          "shrink-0 group-data-[state=open]:rotate-90",
-        )}
-      />
-    </button>
-  );
-
-  const icon = category.icon && (
-    <category.icon
-      size={16}
-      className={cn("align-[-0.125em] ", isActive && "text-primary")}
-    />
-  );
-
-  const styles = navigationListItem({
-    className: [
-      "text-start font-medium",
-      isCollapsible || typeof category.link !== "undefined"
-        ? "cursor-pointer"
-        : "cursor-default hover:bg-transparent",
-    ],
-  });
-
-  return (
-    <Collapsible.Root
-      className="flex flex-col"
-      defaultOpen={isDefaultOpen}
-      open={open}
-      onOpenChange={() => setOpen(true)}
-    >
-      <Collapsible.Trigger className="group" asChild disabled={!isCollapsible}>
-        {category.link?.type === "doc" ? (
-          <NavLink
-            to={joinPath(category.link.id)}
-            className={styles}
-            onClick={() => {
-              setHasInteracted(true);
-              // if it is the current path and closed then open it because there's no path change to trigger the open
-              if (isActive && !open) {
-                setOpen(true);
-              }
-            }}
-          >
-            {icon}
-            <div
-              className={cn(
-                "flex items-center gap-2 justify-between w-full",
-                isActive ? "text-primary" : "text-foreground/80",
-              )}
-            >
-              <div className="truncate">{category.label}</div>
-              {ToggleButton}
-            </div>
-          </NavLink>
-        ) : (
-          <div onClick={() => setHasInteracted(true)} className={styles}>
-            {icon}
-            <div className="flex items-center justify-between w-full">
-              <div className="flex gap-2 truncate w-full">{category.label}</div>
-              {ToggleButton}
-            </div>
-          </div>
-        )}
-      </Collapsible.Trigger>
-      <Collapsible.Content
-        className={cn(
-          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
-          hasInteracted && "CollapsibleContent",
-          category.items.length === 0 && "hidden",
-          "ms-6 my-1",
-        )}
-      >
-        <ul className="relative after:absolute after:-left-[--padding-nav-item] after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border">
-          {category.items.map((item) => (
-            <SidebarItem
-              key={
-                ("id" in item ? item.id : "") +
-                ("href" in item ? item.href : "") +
-                item.label
-              }
-              onRequestClose={onRequestClose}
-              item={item}
-            />
-          ))}
-        </ul>
-      </Collapsible.Content>
-    </Collapsible.Root>
-  );
-};