@lukoweb/apitogo 0.1.0 → 0.1.2

package/src/lib/components/Main.tsx

@@ -1,51 +1,51 @@
-import { PanelLeftIcon } from "lucide-react";
-import { type PropsWithChildren, useState } from "react";
-import { useNavigation } from "react-router";
-import { Drawer, DrawerTrigger } from "@lukoweb/apitogo/ui/Drawer.js";
-import { cn } from "../util/cn.js";
-import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { Navigation } from "./navigation/Navigation.js";
-import { Slot } from "./Slot.js";
-
-export const Main = ({ children }: PropsWithChildren) => {
-  const [isDrawerOpen, setDrawerOpen] = useState(false);
-  const { navigation } = useCurrentNavigation();
-  const hasNavigation = navigation.length > 0;
-  const isNavigating = useNavigation().state === "loading";
-  const { options } = useZudoku();
-
-  return (
-    <Drawer
-      direction={options.site?.dir === "rtl" ? "right" : "left"}
-      open={isDrawerOpen}
-      onOpenChange={(open) => setDrawerOpen(open)}
-    >
-      {hasNavigation && (
-        <Navigation
-          onRequestClose={() => setDrawerOpen(false)}
-          navigation={navigation}
-        />
-      )}
-      {hasNavigation && (
-        <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>
-          </DrawerTrigger>
-        </div>
-      )}
-      <main
-        data-pagefind-body
-        className={cn(
-          "px-4 lg:pe-8 lg:px-8",
-          !hasNavigation && "col-span-full",
-          isNavigating && "animate-pulse",
-        )}
-      >
-        <Slot.Target name="content-before" />
-        {children}
-        <Slot.Target name="content-after" />
-      </main>
-    </Drawer>
-  );
-};
+import { Drawer, DrawerTrigger } from "@lukoweb/apitogo/ui/Drawer.js";
+import { PanelLeftIcon } from "lucide-react";
+import { type PropsWithChildren, useState } from "react";
+import { useNavigation } from "react-router";
+import { cn } from "../util/cn.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
+import { Navigation } from "./navigation/Navigation.js";
+import { Slot } from "./Slot.js";
+
+export const Main = ({ children }: PropsWithChildren) => {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const { navigation } = useCurrentNavigation();
+  const hasNavigation = navigation.length > 0;
+  const isNavigating = useNavigation().state === "loading";
+  const { options } = useZudoku();
+
+  return (
+    <Drawer
+      direction={options.site?.dir === "rtl" ? "right" : "left"}
+      open={isDrawerOpen}
+      onOpenChange={(open) => setDrawerOpen(open)}
+    >
+      {hasNavigation && (
+        <Navigation
+          onRequestClose={() => setDrawerOpen(false)}
+          navigation={navigation}
+        />
+      )}
+      {hasNavigation && (
+        <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>
+          </DrawerTrigger>
+        </div>
+      )}
+      <main
+        data-pagefind-body
+        className={cn(
+          "px-4 lg:pe-8 lg:px-8",
+          !hasNavigation && "col-span-full",
+          isNavigating && "animate-pulse",
+        )}
+      >
+        <Slot.Target name="content-before" />
+        {children}
+        <Slot.Target name="content-after" />
+      </main>
+    </Drawer>
+  );
+};

package/src/lib/components/Mermaid.tsx

@@ -1,70 +1,74 @@
-import { useQuery } from "@tanstack/react-query";
-import type { MermaidConfig } from "mermaid";
-import type { ComponentProps } from "react";
-import { useId } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
-import { useTheme } from "../hooks/index.js";
-import { Spinner } from "./Spinner.js";
-
-export type MermaidProps = {
-  chart: string;
-  config?: MermaidConfig;
-} & ComponentProps<"div">;
-
-let mermaidPromise: Promise<typeof import("mermaid").default> | null = null;
-
-const loadMermaid = () => {
-  if (!mermaidPromise) {
-    mermaidPromise = import("mermaid")
-      .then((mod) => mod.default)
-      .catch((error) => {
-        throw new Error(
-          "Mermaid is not installed. Please install it with: npm install mermaid",
-          { cause: error },
-        );
-      });
-  }
-  return mermaidPromise;
-};
-
-export const Mermaid = ({ chart, config, ...props }: MermaidProps) => {
-  const id = useId();
-  const theme = useTheme();
-
-  const {
-    data: svg,
-    error,
-    isPending,
-  } = useQuery({
-    queryKey: ["mermaid", chart, config, theme.resolvedTheme],
-    queryFn: async () => {
-      const mermaid = await loadMermaid();
-      mermaid.initialize({
-        theme: theme.resolvedTheme === "dark" ? "dark" : "base",
-        ...config,
-      });
-
-      const { svg } = await mermaid.render(id, chart);
-      return svg;
-    },
-    enabled: typeof window !== "undefined",
-    retry: false,
-  });
-
-  if (error)
-    return (
-      <Alert className="flex flex-col gap-2" variant="destructive">
-        <AlertTitle>Mermaid Error</AlertTitle>
-        <AlertDescription className="overflow-auto wrap-break-word whitespace-pre-wrap font-mono text-xs">
-          {error.message}
-        </AlertDescription>
-      </Alert>
-    );
-
-  if (isPending) return <Spinner />;
-
-  // biome-ignore lint/security/noDangerouslySetInnerHtml: Mermaid generates valid SVG
-  return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
-};
-
-export default Mermaid;
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@lukoweb/apitogo/ui/Alert.js";
+import { useQuery } from "@tanstack/react-query";
+import type { MermaidConfig } from "mermaid";
+import type { ComponentProps } from "react";
+import { useId } from "react";
+import { useTheme } from "../hooks/index.js";
+import { Spinner } from "./Spinner.js";
+
+export type MermaidProps = {
+  chart: string;
+  config?: MermaidConfig;
+} & ComponentProps<"div">;
+
+let mermaidPromise: Promise<typeof import("mermaid").default> | null = null;
+
+const loadMermaid = () => {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid")
+      .then((mod) => mod.default)
+      .catch((error) => {
+        throw new Error(
+          "Mermaid is not installed. Please install it with: npm install mermaid",
+          { cause: error },
+        );
+      });
+  }
+  return mermaidPromise;
+};
+
+export const Mermaid = ({ chart, config, ...props }: MermaidProps) => {
+  const id = useId();
+  const theme = useTheme();
+
+  const {
+    data: svg,
+    error,
+    isPending,
+  } = useQuery({
+    queryKey: ["mermaid", chart, config, theme.resolvedTheme],
+    queryFn: async () => {
+      const mermaid = await loadMermaid();
+      mermaid.initialize({
+        theme: theme.resolvedTheme === "dark" ? "dark" : "base",
+        ...config,
+      });
+
+      const { svg } = await mermaid.render(id, chart);
+      return svg;
+    },
+    enabled: typeof window !== "undefined",
+    retry: false,
+  });
+
+  if (error)
+    return (
+      <Alert className="flex flex-col gap-2" variant="destructive">
+        <AlertTitle>Mermaid Error</AlertTitle>
+        <AlertDescription className="overflow-auto wrap-break-word whitespace-pre-wrap font-mono text-xs">
+          {error.message}
+        </AlertDescription>
+      </Alert>
+    );
+
+  if (isPending) return <Spinner />;
+
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: Mermaid generates valid SVG
+  return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
+};
+
+export default Mermaid;