zudoku 0.0.0-f42e3678 → 0.0.0-f46233e4

package/src/lib/shiki.ts

@@ -43,6 +43,8 @@ export const defaultHighlightOptions = {
     dark: "github-dark",
   },
   defaultColor: false,
+  defaultLanguage: "text",
+  fallbackLanguage: "text",
   inline: "tailing-curly-colon",
   addLanguageClass: true,
   transformers: [transformerMetaHighlight(), transformerMetaWordHighlight()],
@@ -67,6 +69,8 @@ export const defaultLanguages: BundledLanguage[] = [
   "jsx",
   "typescript",
   "tsx",
+  "graphql",
+  "jsonc",
   "json",
   "python",
   "java",
@@ -81,8 +85,19 @@ export const defaultLanguages: BundledLanguage[] = [
   "html",
   "xml",
   "yaml",
+  "toml",
+  "rust",
   "markdown",
   "mdx",
+  "zig",
+  "scala",
+  "dart",
+  "ocaml",
+  "c",
+  "cpp",
+  "common-lisp",
+  "elixir",
+  "powershell",
 ];
 
 const rehypeCodeBlockPlugin = () => (tree: Root) => {
@@ -104,14 +119,14 @@ const rehypeCodeBlockPlugin = () => (tree: Root) => {
   });
 };
 
-export const createConfiguredShikiRehypePlugins = (themes?: ThemesRecord) => [
+export const createConfiguredShikiRehypePlugins = (
+  themes: ThemesRecord = defaultHighlightOptions.themes,
+  highlighterInstance: HighlighterCore = highlighter,
+) => [
   [
     rehypeShikiFromHighlighter,
-    highlighter,
-    {
-      ...defaultHighlightOptions,
-      themes: themes ?? defaultHighlightOptions.themes,
-    },
+    highlighterInstance,
+    { ...defaultHighlightOptions, themes },
   ] satisfies Pluggable,
   rehypeCodeBlockPlugin,
 ];

package/src/lib/ui/Breadcrumb.tsx

@@ -67,6 +67,7 @@ const BreadcrumbPage = React.forwardRef<
     aria-disabled="true"
     aria-current="page"
     className={cn("font-normal text-foreground", className)}
+    tabIndex={props.tabIndex}
     {...props}
   />
 ));

package/src/lib/ui/CodeBlock.tsx

@@ -1,6 +1,6 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
-import type { ReactNode } from "react";
-import { useRef } from "react";
+import { type ReactNode, useRef } from "react";
+import { LanguageIcon } from "../components/LanguageIcon.js";
 import { cn } from "../util/cn.js";
 import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
 
@@ -23,7 +23,7 @@ export const CodeBlock = ({
   title = "Code",
   language,
   showCopy = "hover",
-  showLanguageIndicator = false,
+  showLanguageIndicator,
   showLineNumbers,
   ...props
 }: CodeBlockProps) => {
@@ -35,16 +35,15 @@ export const CodeBlock = ({
   return (
     <div
       className={cn(
-        "border code-block-wrapper relative group bg-muted/50 rounded-md overflow-hidden",
+        "border code-block-wrapper relative group rounded-md overflow-hidden",
         showLineNumbers && "line-numbers",
+        props.className,
       )}
     >
       <div className="border-b flex items-center h-10 font-sans bg-black/2">
-        <div className="flex-1 text-sm w-full px-4">
+        <div className="flex items-center gap-1.5 flex-1 text-sm w-full px-3">
+          <LanguageIcon language={language} />
           {title}
-          {showLanguageIndicator && language && (
-            <span className="text-muted-foreground ml-2">({language})</span>
-          )}
         </div>{" "}
         {showCopy !== "never" && (
           <button
@@ -52,7 +51,8 @@ export const CodeBlock = ({
             aria-label="Copy code"
             title="Copy code"
             className={cn(
-              "cursor:pointer h-full hover:border-l-border active:shadow-none active:inset-shadow-xs hover:inset-shadow-xs flex items-center gap-2 px-4 outline-border text-sm hover:bg-black/5 transition-all",
+              "transition px-2 py-2 mx-1 rounded-sm",
+              !isCopied && "hover:bg-accent hover:brightness-95",
             )}
             disabled={isCopied}
             onClick={() => {
@@ -62,12 +62,7 @@ export const CodeBlock = ({
             }}
           >
             {isCopied ? (
-              <CheckIcon
-                className="text-emerald-600"
-                size={14}
-                strokeWidth={2.5}
-                absoluteStrokeWidth
-              />
+              <CheckIcon className="text-emerald-600" size={14} />
             ) : (
               <CopyIcon size={14} />
             )}
@@ -75,10 +70,7 @@ export const CodeBlock = ({
         )}
       </div>
       <div
-        className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>code]:p-4",
-          props.className,
-        )}
+        className="code-block text-sm not-prose scrollbar [&_code]:px-3 [&_code]:py-2"
         ref={ref}
       >
         {children}

package/src/lib/ui/Command.tsx

@@ -1,8 +1,8 @@
-import { type DialogProps } from "@radix-ui/react-dialog";
+import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
+import type { ComponentPropsWithoutRef } from "react";
 import * as React from "react";
-import { type ComponentPropsWithoutRef } from "react";
 import { Dialog, DialogContent } from "zudoku/ui/Dialog.js";
 import { cn } from "../util/cn.js";
 
@@ -58,7 +58,6 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  // eslint-disable-next-line react/no-unknown-property
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
@@ -78,7 +77,6 @@ const CommandInlineInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  // eslint-disable-next-line react/no-unknown-property
   <div className="flex items-center" cmdk-input-wrapper="">
     <CommandPrimitive.Input
       ref={ref}

package/src/lib/ui/Dialog.tsx

@@ -1,7 +1,6 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { CircleIcon, XIcon } from "lucide-react";
 import * as React from "react";
-
-import { XIcon } from "lucide-react";
 import { cn } from "../util/cn.js";
 
 const Dialog = DialogPrimitive.Root;
@@ -45,8 +44,17 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="absolute left-1 top-1 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <XIcon className="h-3 w-3" strokeWidth={2} />
+        <DialogPrimitive.Close className="absolute p-3 group -left-1.5 -top-1.5 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <CircleIcon
+            className="h-2 w-2 transition-all border border-transparent  group-hover:border-white/20 rounded-full group-hover:scale-180 group-hover:text-red-400"
+            strokeWidth={2}
+            fill="currentColor"
+          />
+          <XIcon
+            className="h-2 w-2 absolute top-3 left-3 text-transparent group-hover:text-red-800 transition-colors"
+            strokeWidth={2}
+            fill="currentColor"
+          />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       )}

package/src/lib/ui/EmbeddedCodeBlock.tsx

@@ -40,7 +40,7 @@ export const EmbeddedCodeBlock = ({
     >
       <div
         className={cn(
-          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar [&>pre]:p-4",
+          "code-block text-sm not-prose scrollbar overflow-x-auto [&>pre]:p-2",
           props.className,
         )}
         ref={ref}

package/src/lib/ui/Form.tsx

@@ -1,11 +1,11 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import {
   Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
   FormProvider,
   useFormContext,
 } from "react-hook-form";

package/src/lib/ui/Pagination.tsx

@@ -2,11 +2,10 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../util/cn.js";
-import { ButtonProps, buttonVariants } from "./Button.js";
+import { type ButtonProps, buttonVariants } from "./Button.js";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
-    role="navigation"
     aria-label="pagination"
     className={cn("mx-auto flex w-full justify-center", className)}
     {...props}

package/src/lib/ui/ReactComponentDoc.tsx

@@ -0,0 +1,68 @@
+import { Badge } from "./Badge.js";
+import { Card } from "./Card.js";
+
+type PropType =
+  | string
+  | {
+      name: string;
+      description: string;
+      required: boolean;
+    };
+
+type ReactComponentDocProps = {
+  component: {
+    __docgenInfo: {
+      displayName: string;
+      description: string;
+      props: Record<
+        string,
+        {
+          type: PropType;
+          description: string;
+          required: boolean;
+        }
+      >;
+    };
+  };
+};
+
+export const ReactComponentDoc = ({ component }: ReactComponentDocProps) => {
+  const docgen = component.__docgenInfo;
+
+  if (!docgen) return null;
+
+  return (
+    <Card className="not-prose">
+      <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2  border-b p-6">
+          <h2 className="text-lg font-medium">Component Properties</h2>
+          <p className="text-sm text-muted-foreground">
+            The properties of the component.
+          </p>
+        </div>
+        <div className="grid grid-cols-[1fr_auto_auto] gap-2 divide-y">
+          {Object.entries(docgen.props).map(([key, value]) => (
+            <div
+              key={key}
+              className="px-6 pb-2 col-span-full grid grid-cols-subgrid"
+            >
+              <span className="font-medium text-primary">{key}</span>
+              <div>
+                {value.required && (
+                  <Badge className="ml-2 font-mono">required</Badge>
+                )}
+              </div>
+              <div>
+                {typeof value.type === "object" && value.type.name && (
+                  <Badge className="ml-2 font-mono" variant="muted">
+                    {value.type.name}
+                  </Badge>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Card>
+  );
+};

package/src/lib/ui/Secret.tsx

@@ -0,0 +1,123 @@
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../util/cn.js";
+import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
+import { Button } from "./Button.js";
+
+type Status = "active" | "expired" | "expiring" | "revoked" | "none";
+
+export const SecretText = ({
+  secret,
+  revealed = false,
+  previewChars = 5,
+  className,
+}: {
+  secret: string;
+  revealed?: boolean;
+  previewChars?: number;
+  className?: string;
+}) => {
+  return (
+    <span className={cn("w-full truncate", className)}>
+      <div
+        className={cn(
+          "w-40 inline-block md:w-fit",
+          revealed ? "" : "opacity-50",
+        )}
+      >
+        {revealed
+          ? secret.slice(0, previewChars === 0 ? secret.length : -previewChars)
+          : "•••• ".repeat(
+              secret.slice(
+                0,
+                previewChars === 0 ? secret.length : -previewChars,
+              ).length / 5,
+            ) +
+            "•".repeat(
+              secret.slice(
+                0,
+                previewChars === 0 ? secret.length : -previewChars,
+              ).length % 5,
+            )}
+      </div>
+      {previewChars > 0 && <span>{secret.slice(-previewChars)}</span>}
+    </span>
+  );
+};
+
+export const Secret = ({
+  secret,
+  preview = 5,
+  className,
+  status,
+  onCopy,
+  revealed: controlledRevealed,
+  onReveal,
+  noReveal: disabledReveal,
+}: {
+  revealed?: boolean;
+  noReveal?: boolean;
+  secret: string;
+  status?: Status;
+  className?: string;
+  preview?: number;
+  onCopy?: (secret: string) => void;
+  onReveal?: (revealed: boolean) => void;
+}) => {
+  const previewChars = Math.abs(preview);
+  const [isRevealed, setRevealed] = useState(false);
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
+
+  const revealed = controlledRevealed ?? isRevealed;
+
+  return (
+    <div
+      className={cn(
+        "flex gap-2 items-center text-sm border rounded-md px-1",
+        className,
+      )}
+    >
+      <div className="font-mono w-full h-9 items-center flex px-2 text-xs gap-2">
+        {status && (
+          <div
+            className={cn(
+              "rounded-full shrink-0 w-2 h-2 mr-2",
+              status === "active" && "bg-emerald-400",
+              status === "expired" && "bg-neutral-200",
+              status === "expiring" && "bg-yellow-400",
+              status === "revoked" && "bg-red-400",
+              status === "none" && "opacity-0",
+            )}
+          />
+        )}
+        <SecretText
+          secret={secret}
+          revealed={revealed}
+          previewChars={previewChars}
+        />
+      </div>
+      {disabledReveal !== true && (
+        <Button
+          variant="ghost"
+          onClick={() => {
+            setRevealed((prev) => !prev);
+            onReveal?.(!revealed);
+          }}
+          size="icon"
+        >
+          {revealed ? <EyeOffIcon size={16} /> : <EyeIcon size={16} />}
+        </Button>
+      )}
+      <Button
+        variant="ghost"
+        onClick={() => {
+          copyToClipboard(secret);
+          onCopy?.(secret);
+        }}
+        size="icon"
+      >
+        {isCopied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+      </Button>
+    </div>
+  );
+};

package/src/lib/ui/ToggleGroup.tsx

@@ -1,5 +1,5 @@
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "../util/cn.js";

package/src/lib/ui/Value.tsx

@@ -0,0 +1,42 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { cn } from "../util/cn.js";
+import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
+import { Button } from "./Button.js";
+
+export const Value = ({
+  value,
+  className,
+  onCopy,
+}: {
+  value: string;
+  className?: string;
+  onCopy?: (value: string) => void;
+}) => {
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
+
+  return (
+    <div
+      className={cn(
+        "flex gap-2 items-center text-sm border rounded-md px-1",
+        className,
+      )}
+    >
+      <div className="font-mono w-full h-9 items-center flex px-2 text-xs gap-2">
+        <span className="w-full truncate">
+          <div className={"w-40 inline-block md:w-fit"}>{value}</div>
+        </span>
+      </div>
+
+      <Button
+        variant="ghost"
+        onClick={() => {
+          copyToClipboard(value);
+          onCopy?.(value);
+        }}
+        size="icon"
+      >
+        {isCopied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
+      </Button>
+    </div>
+  );
+};

package/src/lib/util/MdxComponents.tsx

@@ -1,4 +1,4 @@
-import { type MDXComponents } from "mdx/types.js";
+import type { MDXComponents } from "mdx/types.js";
 import { CodeBlock } from "zudoku/ui/CodeBlock.js";
 import { AnchorLink } from "../components/AnchorLink.js";
 import { Framed } from "../components/Framed.js";
@@ -16,6 +16,7 @@ export const MdxComponents = {
   img: ({ node, ...props }) => {
     if (/\.(mp4|webm|mov|avi)$/.test(props.src ?? "")) {
       return (
+        // biome-ignore lint/a11y/useMediaCaption: No in control of the caption here
         <video
           src={props.src}
           controls
@@ -26,7 +27,13 @@ export const MdxComponents = {
         />
       );
     }
-    return <img {...props} className={cn("rounded-lg", props.className)} />;
+    return (
+      <img
+        alt={props.alt}
+        {...props}
+        className={cn("rounded-lg", props.className)}
+      />
+    );
   },
   Framed,
   h1: ({ children, id }) => (
@@ -102,7 +109,10 @@ export const MdxComponents = {
         showLineNumbers={showLineNumbers}
         title={title}
       >
-        <code className={cn(className, "not-inline")} {...props}>
+        <code
+          className={cn(className, "overflow-x-auto scrollbar not-inline")}
+          {...props}
+        >
           {children}
         </code>
       </CodeBlock>

package/src/lib/util/cn.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

package/src/lib/util/createVariantComponent.tsx

@@ -1,8 +1,8 @@
 import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
+import type { cva } from "class-variance-authority";
 import type { ClassValue } from "clsx";
+import type { HTMLElementType, JSX } from "react";
 import * as React from "react";
-import { type HTMLElementType, type JSX } from "react";
 import { cn } from "./cn.js";
 
 const createVariantComponent = <

package/src/lib/util/groupBy.ts

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: Allow any type
 export const groupBy = <
   T extends Record<PropertyKey, any>,
   KeySelector extends (item: T) => PropertyKey,

package/src/lib/util/humanFileSize.ts

@@ -9,8 +9,7 @@ export const humanFileSize = (bytes = 0) => {
   }
 
   const exponent = Math.floor(Math.log(bytes) / Math.log(1000.0));
-  const decimal = (bytes / Math.pow(1000.0, exponent)).toFixed(
-    exponent ? 2 : 0,
-  );
+  const decimal = (bytes / 1000.0 ** exponent).toFixed(exponent ? 2 : 0);
+
   return `${decimal} ${exponent ? `${"kMGTPEZY"[exponent - 1]}B` : "B"}`;
 };

package/src/lib/util/invariant.ts

@@ -1,4 +1,5 @@
 export default function invariant(
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
   condition: any,
   // Not providing an inline default argument for message as the result is smaller
   /**

package/src/lib/util/pastellize.ts

@@ -1,14 +1,14 @@
 const c2n = (c: string) =>
   Math.abs(
-    isNaN(parseInt(c))
+    Number.isNaN(Number(c))
       ? c.toLowerCase().charCodeAt(0) - 96
-      : isNaN(parseInt(c))
+      : Number.isNaN(Number(c))
         ? 0
-        : parseInt(c),
+        : Number(c),
   );
 const s2n = (s: string) =>
   s.length > 1
-    ? parseInt(s.split("").reduce((a, c) => `${c2n(a) + c2n(c)}`))
+    ? Number(s.split("").reduce((a, c) => `${c2n(a) + c2n(c)}`))
     : c2n(s);
 
 export const pastellize = (

package/src/lib/util/traverse.ts

@@ -32,3 +32,39 @@ export const traverse = <T extends JsonValue = RecordAny>(
 
   return result;
 };
+
+export const traverseAsync = async <T extends JsonValue = RecordAny>(
+  specification: RecordAny,
+  transform: (specification: RecordAny, path?: string[]) => T | Promise<T>,
+  path: string[] = [],
+) => {
+  const transformed = await transform(specification, path);
+  if (typeof transformed !== "object" || transformed === null) {
+    return transformed;
+  }
+
+  const result: RecordAny = Array.isArray(transformed) ? [] : {};
+
+  for (const [key, value] of Object.entries(transformed)) {
+    const currentPath = [...path, key];
+
+    if (Array.isArray(value)) {
+      result[key] = await Promise.all(
+        value.map(async (item, index) =>
+          typeof item === "object" && item != null
+            ? await traverseAsync(item, transform, [
+                ...currentPath,
+                index.toString(),
+              ])
+            : item,
+        ),
+      );
+    } else if (typeof value === "object" && value != null) {
+      result[key] = await traverseAsync(value, transform, currentPath);
+    } else {
+      result[key] = value;
+    }
+  }
+
+  return result;
+};

package/src/lib/util/types.ts

@@ -1,4 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// biome-ignore lint/suspicious/noExplicitAny: Allow any type
 export type RecordAny = Record<string, any>;
 
 export type JsonPrimitive = string | number | boolean | null;

package/src/lib/util/useIsomorphicLayoutEffect.ts

@@ -1,4 +1,5 @@
 import { useEffect, useLayoutEffect } from "react";
+
 const useIsomorphicLayoutEffect =
   typeof window !== "undefined" ? useLayoutEffect : useEffect;
 

package/src/lib/util/useScrollToAnchor.ts

@@ -13,7 +13,9 @@ export const useScrollToHash = () => {
 
       // Operation list items might have subdivisions that the navigation doesn't show.
       // The subdivisions are separated by a slash so we need to remove everything before the slash to get the navigation correct item.
-      const linkHash = cleanHash.split("/").at(0)!;
+      const linkHash = cleanHash.split("/").at(0);
+      if (!linkHash) return false;
+
       const element = document.getElementById(decodeURIComponent(cleanHash));
 
       const link = document.querySelector(

package/src/shiki/langs/vue-vine.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/vue-vine";