zudoku 0.0.0-fdf886de → 0.0.0-fe92c9e1

package/src/lib/components/LanguageIcon.tsx

@@ -0,0 +1,181 @@
+import {
+  type ComponentType,
+  type LazyExoticComponent,
+  lazy,
+  Suspense,
+  type SVGProps,
+} from "react";
+
+type Language = {
+  pattern: RegExp;
+  icon: LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>;
+  width?: number;
+};
+
+const Languages: Record<string, Language> = {
+  typescript: {
+    pattern: /^(ts|typescript)$/,
+    icon: lazy(() => import("../assets/language-icons/typescript.js")),
+    width: 15,
+  },
+  javascript: {
+    pattern: /^(js|javascript)$/,
+    icon: lazy(() => import("../assets/language-icons/javascript.js")),
+  },
+  react: {
+    pattern: /^(react|tsx|jsx)$/,
+    icon: lazy(() => import("../assets/language-icons/react.js")),
+    width: 22,
+  },
+  markdown: {
+    pattern: /^(md|markdown)$/,
+    icon: lazy(() => import("../assets/language-icons/markdown.js")),
+    width: 22,
+  },
+  mdx: {
+    pattern: /^mdx$/,
+    icon: lazy(() => import("../assets/language-icons/mdx.js")),
+    width: 28,
+  },
+  java: {
+    pattern: /^(java)$/,
+    icon: lazy(() => import("../assets/language-icons/java.js")),
+    width: 22,
+  },
+  json: {
+    pattern: /^jsonc?$/,
+    icon: lazy(() => import("../assets/language-icons/json.js")),
+  },
+  yaml: {
+    pattern: /^yaml$/,
+    icon: lazy(() => import("../assets/language-icons/yaml.js")),
+  },
+  toml: {
+    pattern: /^toml$/,
+    icon: lazy(() => import("../assets/language-icons/toml.js")),
+  },
+  shell: {
+    pattern: /^(shell|bash|sh|zsh|term|terminal|ansi)$/,
+    icon: lazy(() => import("../assets/language-icons/shell.js")),
+  },
+  python: {
+    pattern: /^(py|python)$/,
+    icon: lazy(() => import("../assets/language-icons/python.js")),
+  },
+  csharp: {
+    pattern: /^(cs|csharp|vb)$/,
+    icon: lazy(() => import("../assets/language-icons/csharp.js")),
+    width: 20,
+  },
+  rust: {
+    pattern: /^(rs|rust)$/,
+    icon: lazy(() => import("../assets/language-icons/rust.js")),
+    width: 20,
+  },
+  ruby: {
+    pattern: /^(rb|ruby)$/,
+    icon: lazy(() => import("../assets/language-icons/ruby.js")),
+  },
+  php: {
+    pattern: /^php$/,
+    icon: lazy(() => import("../assets/language-icons/php.js")),
+    width: 24,
+  },
+  html: {
+    pattern: /^html?$/,
+    icon: lazy(() => import("../assets/language-icons/html.js")),
+    width: 15,
+  },
+  css: {
+    pattern: /^css$/,
+    icon: lazy(() => import("../assets/language-icons/css.js")),
+  },
+  objectivec: {
+    pattern: /^(objc|objectivec)$/,
+    icon: lazy(() => import("../assets/language-icons/objectivec.js")),
+    width: 16,
+  },
+  swift: {
+    pattern: /^swift$/,
+    icon: lazy(() => import("../assets/language-icons/swift.js")),
+  },
+  go: {
+    pattern: /^go$/,
+    icon: lazy(() => import("../assets/language-icons/go.js")),
+    width: 28,
+  },
+  xml: {
+    pattern: /^xml$/,
+    icon: lazy(() => import("../assets/language-icons/xml.js")),
+  },
+  kotlin: {
+    pattern: /^(kt|kotlin)$/,
+    icon: lazy(() => import("../assets/language-icons/kotlin.js")),
+    width: 14,
+  },
+  graphql: {
+    pattern: /^(gql|graphql)$/,
+    icon: lazy(() => import("../assets/language-icons/graphql.js")),
+  },
+  zig: {
+    pattern: /^zig$/,
+    icon: lazy(() => import("../assets/language-icons/zig.js")),
+    width: 28,
+  },
+  scala: {
+    pattern: /^scala$/,
+    icon: lazy(() => import("../assets/language-icons/scala.js")),
+    width: 18,
+  },
+  dart: {
+    pattern: /^dart$/,
+    icon: lazy(() => import("../assets/language-icons/dart.js")),
+    width: 20,
+  },
+  ocaml: {
+    pattern: /^ocaml$/,
+    icon: lazy(() => import("../assets/language-icons/ocaml.js")),
+    width: 20,
+  },
+  c: {
+    pattern: /^c$/,
+    icon: lazy(() => import("../assets/language-icons/c.js")),
+    width: 20,
+  },
+  cpp: {
+    pattern: /^(cpp|c\+\+)$/,
+    icon: lazy(() => import("../assets/language-icons/cpp.js")),
+    width: 20,
+  },
+  commonlisp: {
+    pattern: /^(clisp|common-lisp|lisp|cl|commonlisp)$/,
+    icon: lazy(() => import("../assets/language-icons/commonlisp.js")),
+    width: 18,
+  },
+  elixir: {
+    pattern: /^elixir$/,
+    icon: lazy(() => import("../assets/language-icons/elixir.js")),
+    width: 18,
+  },
+  powershell: {
+    pattern: /^(pshell|powershell|ps1)$/,
+    icon: lazy(() => import("../assets/language-icons/powershell.js")),
+    width: 18,
+  },
+};
+
+export const LanguageIcon = ({ language }: { language?: string }) => {
+  if (!language) return null;
+
+  const Lang = Object.values(Languages).find((l) => l.pattern.test(language));
+
+  if (!Lang) return null;
+
+  const size = Lang.width ?? 18;
+
+  return (
+    <Suspense fallback={<div style={{ width: size, height: "1em" }} />}>
+      <Lang.icon className="h-auto" style={{ width: size }} />
+    </Suspense>
+  );
+};

package/src/lib/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useEffect, type ReactNode } from "react";
+import { type ReactNode, Suspense, useEffect } from "react";
 import { Outlet } from "react-router";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";

package/src/lib/components/Main.tsx

@@ -27,7 +27,7 @@ export const Main = ({ children }: PropsWithChildren) => {
         />
       )}
       {hasNavigation && (
-        <div className="lg:hidden -mx-4 px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
+        <div className="lg:hidden m-0 p-0 md:-mx-4 md:px-4 py-2 sticky bg-background/80 backdrop-blur-xs z-10 top-0 start-0 end-0 border-b">
           <DrawerTrigger className="flex items-center gap-2 px-4">
             <PanelLeftIcon size={16} strokeWidth={1.5} />
             <span className="text-sm">Menu</span>

package/src/lib/components/Markdown.tsx

@@ -23,9 +23,12 @@ export const Markdown = memo(
     const rehypePlugins = useMemo(
       () => [
         rehypeRaw,
-        ...createConfiguredShikiRehypePlugins(syntaxHighlighting?.themes),
+        ...createConfiguredShikiRehypePlugins(
+          syntaxHighlighting?.themes,
+          syntaxHighlighting?.highlighter,
+        ),
       ],
-      [syntaxHighlighting?.themes],
+      [syntaxHighlighting?.themes, syntaxHighlighting?.highlighter],
     );
 
     const mdComponents = useMemo(

package/src/lib/components/Meta.tsx

@@ -25,6 +25,19 @@ export const Meta = ({ children }: PropsWithChildren) => {
           <meta name="description" content={meta.description} />
         )}
         {meta?.favicon && <link rel="icon" href={meta.favicon} />}
+        {meta?.generator && <meta name="generator" content={meta.generator} />}
+        {meta?.applicationName && (
+          <meta name="application-name" content={meta.applicationName} />
+        )}
+        {meta?.referrer && <meta name="referrer" content={meta.referrer} />}
+        {meta?.keywords && meta.keywords.length > 0 && (
+          <meta name="keywords" content={meta.keywords.join(", ")} />
+        )}
+        {meta?.authors?.map((author) => (
+          <meta key={author} name="author" content={author} />
+        ))}
+        {meta?.creator && <meta name="creator" content={meta.creator} />}
+        {meta?.publisher && <meta name="publisher" content={meta.publisher} />}
       </Helmet>
       {children}
     </>

package/src/lib/components/MobileTopNavigation.tsx

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { MenuIcon } from "lucide-react";
-import { Fragment, useState } from "react";
+import { useState } from "react";
 import { Skeleton } from "zudoku/ui/Skeleton.js";
 import { useAuth } from "../authentication/hook.js";
 import {
@@ -12,7 +12,7 @@ import {
 import { ClientOnly } from "./ClientOnly.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 import { PoweredByZudoku } from "./navigation/PoweredByZudoku.js";
-import { isHiddenItem } from "./navigation/utils.js";
+import { shouldShowItem } from "./navigation/utils.js";
 import { PageProgress } from "./PageProgress.js";
 import { Search } from "./Search.js";
 import { Slot } from "./Slot.js";
@@ -28,7 +28,7 @@ export const MobileTopNavigation = () => {
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const accountItems = getProfileMenuItems();
-  const filteredItems = navigation.filter(isHiddenItem(authState, context));
+  const filteredItems = navigation.filter(shouldShowItem(authState, context));
 
   return (
     <Drawer
@@ -72,16 +72,14 @@ export const MobileTopNavigation = () => {
                     </li>
                   ) : (
                     Object.values(getProfileMenuItems()).length > 0 && (
-                      <Fragment>
-                        <li>
-                          {profile?.name ? `${profile.name}` : "My Account"}
-                          {profile?.email && (
-                            <div className="font-normal text-muted-foreground">
-                              {profile.email}
-                            </div>
-                          )}
-                        </li>
-                      </Fragment>
+                      <li>
+                        {profile?.name ? `${profile.name}` : "My Account"}
+                        {profile?.email && (
+                          <div className="font-normal text-muted-foreground">
+                            {profile.email}
+                          </div>
+                        )}
+                      </li>
                     )
                   )}
                 </ClientOnly>

package/src/lib/components/PathRenderer.tsx

@@ -22,7 +22,7 @@ export const PathRenderer = ({
     matches.forEach((match) => {
       const [originalValue, name] = match;
       if (!name) return;
-      const startIndex = match.index!;
+      const startIndex = match.index;
 
       if (startIndex > lastIndex) {
         elements.push(
@@ -50,7 +50,7 @@ export const PathRenderer = ({
     }
 
     return (
-      // eslint-disable-next-line react/no-array-index-key
+      // biome-ignore lint/suspicious/noArrayIndexKey: index should be stable
       <Fragment key={`${part}-${i}`}>
         {elements}
         {i < arr.length - 1 && "/"}

package/src/lib/components/Search.tsx

@@ -28,7 +28,7 @@ export const Search = ({ className }: { className?: string }) => {
     return () => {
       window.removeEventListener("keydown", onKeyDown);
     };
-  }, [isOpen, setIsOpen]);
+  }, [isOpen]);
 
   const searchPlugin = ctx.plugins.find(isSearchPlugin);
 

package/src/lib/components/Slot.test.tsx

@@ -1,18 +1,18 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   act,
+  type RenderResult,
   screen,
   render as testRender,
-  type RenderResult,
 } from "@testing-library/react";
 import type { PropsWithChildren, ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { MemoryRouter } from "react-router";
 import { describe, expect, it } from "vitest";
 import { ZudokuContext } from "../core/ZudokuContext.js";
-import { Slot } from "./Slot.js";
 import { SlotProvider } from "./context/SlotProvider.js";
 import { ZudokuProvider } from "./context/ZudokuProvider.js";
+import { Slot } from "./Slot.js";
 
 /**
  * @vitest-environment happy-dom
@@ -196,12 +196,10 @@ describe("Slot", () => {
       expect(screen.getByText("Source content")).toBeInTheDocument();
 
       rerender(
-        <>
-          <Slot.Target
-            name="footer-after"
-            fallback={<div>Fallback content</div>}
-          />
-        </>,
+        <Slot.Target
+          name="footer-after"
+          fallback={<div>Fallback content</div>}
+        />,
       );
 
       expect(screen.getByText("Fallback content")).toBeInTheDocument();
@@ -374,11 +372,13 @@ describe("Slot", () => {
       await render(
         <>
           {manySlots.map((name) => (
+            // biome-ignore lint/suspicious/noExplicitAny: Allow any type
             <Slot.Source key={name} name={name as any}>
               <div>Content {name}</div>
             </Slot.Source>
           ))}
           {manySlots.map((name) => (
+            // biome-ignore lint/suspicious/noExplicitAny: Allow any type
             <Slot.Target key={name} name={name as any} />
           ))}
         </>,

package/src/lib/components/Slot.tsx

@@ -1,8 +1,8 @@
-import { useId, useLayoutEffect, type ReactNode } from "react";
+import { type ReactNode, useId, useLayoutEffect } from "react";
 import {
+  type SlotType,
   useRenderSlot,
   useSlotContext,
-  type SlotType,
 } from "./context/SlotProvider.js";
 
 // This is to augment the type of the Slot component with custom slot names

package/src/lib/components/TopNavigation.tsx

@@ -2,18 +2,18 @@ import { cx } from "class-variance-authority";
 import { deepEqual } from "fast-equals";
 import { Suspense } from "react";
 import { NavLink, type NavLinkProps } from "react-router";
-import { type NavigationItem } from "../../config/validators/NavigationSchema.js";
+import type { NavigationItem } from "../../config/validators/NavigationSchema.js";
 import { useAuth } from "../authentication/hook.js";
 import { joinUrl } from "../util/joinUrl.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { isHiddenItem, traverseNavigationItem } from "./navigation/utils.js";
+import { shouldShowItem, traverseNavigationItem } from "./navigation/utils.js";
 import { Slot } from "./Slot.js";
 
 export const TopNavigation = () => {
   const context = useZudoku();
   const { navigation } = context;
   const auth = useAuth();
-  const filteredItems = navigation.filter(isHiddenItem(auth, context));
+  const filteredItems = navigation.filter(shouldShowItem(auth, context));
 
   if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
     return <style>{`:root { --top-nav-height: 0px; }`}</style>;

package/src/lib/components/Zudoku.tsx

@@ -32,7 +32,7 @@ import { ZudokuProvider } from "./context/ZudokuProvider.js";
 
 let zudokuContext: ZudokuContext | undefined;
 
-const ZudokoInner = memo(
+const ZudokuInner = memo(
   ({ children, ...props }: PropsWithChildren<ZudokuContextOptions>) => {
     const components = useMemo(
       () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
@@ -66,7 +66,7 @@ const ZudokoInner = memo(
     const queryClient = useQueryClient();
 
     useEffect(() => {
-      if (didNavigate) {
+      if (didNavigate || !navigation.location) {
         return;
       }
       setDidNavigate(true);
@@ -78,7 +78,7 @@ const ZudokoInner = memo(
       ?.flatMap((plugin) =>
         hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
       )
-      // eslint-disable-next-line react/no-array-index-key
+      // biome-ignore lint/suspicious/noArrayIndexKey: No other key is available
       .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
 
     return (
@@ -105,12 +105,12 @@ const ZudokoInner = memo(
   },
 );
 
-ZudokoInner.displayName = "ZudokoInner";
+ZudokuInner.displayName = "ZudokuInner";
 
 const Zudoku = (props: ZudokuContextOptions) => {
   return (
     <ErrorBoundary FallbackComponent={TopLevelError}>
-      <ZudokoInner {...props} />
+      <ZudokuInner {...props} />
     </ErrorBoundary>
   );
 };

package/src/lib/components/cache.ts

@@ -1,17 +1,21 @@
 import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
 
 export const CACHE_KEYS = Object.freeze({
   API_IDENTITIES: ["api-identities"],
 });
 
+type CacheKey = keyof typeof CACHE_KEYS;
+
 export const useCache = () => {
   const queryClient = useQueryClient();
+  const invalidateCache = useCallback(
+    (key: CacheKey) =>
+      queryClient.invalidateQueries({ queryKey: CACHE_KEYS[key] }),
+    [queryClient],
+  );
 
-  return {
-    invalidateCache: async (key: keyof typeof CACHE_KEYS) => {
-      await queryClient.invalidateQueries({ queryKey: CACHE_KEYS[key] });
-    },
-  };
+  return { invalidateCache };
 };
 
 /**

package/src/lib/components/context/ComponentsContext.tsx

@@ -1,8 +1,8 @@
 import {
-  createContext,
-  useContext,
   type ComponentProps,
   type ComponentType,
+  createContext,
+  useContext,
 } from "react";
 import { Header } from "../Header.js";
 

package/src/lib/components/context/RouterEventsEmitter.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useLocation, type Location } from "react-router";
+import { type Location, useLocation } from "react-router";
 import { useZudoku } from "./ZudokuContext.js";
 
 export const RouterEventsEmitter = () => {

package/src/lib/components/context/SlotProvider.tsx

@@ -1,17 +1,17 @@
 import {
+  type ComponentType,
   createContext,
   Fragment,
+  type PropsWithChildren,
+  type ReactNode,
   use,
   useMemo,
   useRef,
-  type ComponentType,
-  type PropsWithChildren,
-  type ReactNode,
 } from "react";
 import { createStore, useStore } from "zustand";
 import {
-  useExposedProps,
   type ExposedComponentProps,
+  useExposedProps,
 } from "../../util/useExposedProps.js";
 
 export type SlotType = ReactNode | ComponentType<ExposedComponentProps>;

package/src/lib/components/context/ViewportAnchorContext.tsx

@@ -1,12 +1,12 @@
 import {
   createContext,
+  type PropsWithChildren,
   use,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-  type PropsWithChildren,
 } from "react";
 
 type AnchorContextType = {
@@ -128,7 +128,7 @@ export const ViewportAnchorProvider = ({ children }: PropsWithChildren) => {
 
   const value = useMemo(
     () => ({ activeAnchor, setActiveAnchor, ...observeFns }),
-    [activeAnchor, setActiveAnchor, observeFns],
+    [activeAnchor, observeFns],
   );
 
   return (

package/src/lib/components/context/ZudokuContext.ts

@@ -1,10 +1,11 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect } from "react";
 import { matchPath, useLocation } from "react-router";
-import { type NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import { useAuthState } from "../../authentication/state.js";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import { CACHE_KEYS } from "../cache.js";
+import { CACHE_KEYS, useCache } from "../cache.js";
 import { traverseNavigation } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
@@ -23,6 +24,14 @@ export const useZudoku = () => {
 
 export const useApiIdentities = () => {
   const { getApiIdentities } = useZudoku();
+  const { isAuthenticated } = useAuthState();
+  const { invalidateCache } = useCache();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      invalidateCache("API_IDENTITIES");
+    }
+  }, [isAuthenticated, invalidateCache]);
 
   return useQuery({
     queryFn: getApiIdentities,

package/src/lib/components/context/ZudokuProvider.tsx

@@ -1,6 +1,6 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
-import { type ZudokuContext } from "../../core/ZudokuContext.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { NO_DEHYDRATE } from "../cache.js";
 import { ZudokuReactContext } from "./ZudokuContext.js";
 

package/src/lib/components/index.ts

@@ -5,13 +5,14 @@ import { Link as LinkImport } from "react-router";
 import { useAuth as useAuthImport } from "../authentication/hook.js";
 import { Button as ButtonImport } from "../ui/Button.js";
 import { Callout as CalloutImport } from "../ui/Callout.js";
+import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import {
   CACHE_KEYS as CACHE_KEYS_IMPORT,
   useCache as useCacheImport,
 } from "./cache.js";
-import { ClientOnly as ClientOnlyImport } from "./ClientOnly.js";
 import { useZudoku as useZudokuImport } from "./context/ZudokuContext.js";
 import { Markdown as MarkdownImport } from "./Markdown.js";
+import { Slot as SlotImport } from "./Slot.js";
 import { Spinner as SpinnerImport } from "./Spinner.js";
 import { Typography as TypographyImport } from "./Typography.js";
 import { Zudoku as ZudokuImport } from "./Zudoku.js";
@@ -25,6 +26,7 @@ export const Button = /*@__PURE__*/ ButtonImport;
 export const Link = /*@__PURE__*/ LinkImport;
 export const Zudoku = /*@__PURE__*/ ZudokuImport;
 export const Typography = /*@__PURE__*/ TypographyImport;
+export const Slot = /*@__PURE__*/ SlotImport;
 
 /** @deprecated Import from `zudoku/hooks` instead */
 export const useMDXComponents = /*@__PURE__*/ useMDXComponentsImport;

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

@@ -104,7 +104,14 @@ const NavigationCategoryInner = ({
             </div>
           </NavLink>
         ) : (
-          <div onClick={() => setHasInteracted(true)} className={styles}>
+          // biome-ignore lint/a11y/noStaticElementInteractions: This is only to track if the user has interacted
+          <div
+            onClick={() => setHasInteracted(true)}
+            onKeyUp={(e) => {
+              if (e.key === "Enter" || e.key === " ") 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>

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

@@ -17,7 +17,7 @@ import { useViewportAnchor } from "../context/ViewportAnchorContext.js";
 import { useZudoku } from "../context/ZudokuContext.js";
 import { NavigationBadge } from "./NavigationBadge.js";
 import { NavigationCategory } from "./NavigationCategory.js";
-import { isHiddenItem, navigationListItem } from "./utils.js";
+import { navigationListItem, shouldShowItem } from "./utils.js";
 
 const TruncatedLabel = ({
   label,
@@ -79,7 +79,7 @@ export const NavigationItem = ({
   const auth = useAuth();
   const context = useZudoku();
 
-  if (!isHiddenItem(auth, context)(item)) {
+  if (!shouldShowItem(auth, context)(item)) {
     return null;
   }
 
@@ -144,7 +144,7 @@ export const NavigationItem = ({
         <a
           className={navigationListItem()}
           href={href}
-          target="_blank"
+          target={"target" in item ? item.target : "_blank"}
           rel="noopener noreferrer"
           onClick={onRequestClose}
         >

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type PropsWithChildren } from "react";
+import { type PropsWithChildren, useEffect, useRef } from "react";
 import { cn } from "../../util/cn.js";
 import { scrollIntoViewIfNeeded } from "../../util/scrollIntoViewIfNeeded.js";
 import { useZudoku } from "../context/ZudokuContext.js";