@lukoweb/apitogo 0.1.24 → 0.1.37

package/src/lib/ui/CodeBlock.tsx

@@ -1,92 +1,92 @@
-import { CheckIcon, CopyIcon } from "lucide-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";
-
-export const CopyCodeButton = ({
-  contentRef,
-}: {
-  contentRef: React.RefObject<HTMLDivElement | null>;
-}) => {
-  const [isCopied, copyToClipboard] = useCopyToClipboard();
-  return (
-    <button
-      type="button"
-      aria-label="Copy code"
-      title="Copy code"
-      className={cn(
-        "transition p-1.5 mx-1 rounded-lg",
-        !isCopied && "hover:bg-accent hover:brightness-95",
-      )}
-      disabled={isCopied}
-      onClick={() => copyToClipboard(contentRef.current?.textContent ?? "")}
-    >
-      {isCopied ? (
-        <CheckIcon className="text-emerald-600" size={14} />
-      ) : (
-        <CopyIcon size={14} />
-      )}
-    </button>
-  );
-};
-
-export const codeBlockClass = cn(
-  "border code-block-wrapper relative group rounded-xl overflow-hidden",
-);
-
-export const codeBlockHeaderClass = cn("flex items-center py-0.5 bg-black/4");
-
-export const codeBlockContentClass = cn(
-  "code-block p-0.5 text-sm not-prose scrollbar bg-black/4",
-  "[&_code]:rounded-b-[calc(var(--radius)+1px)] [&>pre]:rounded-b-[calc(var(--radius)+1px)] [&_code]:px-3 [&_code]:py-2",
-);
-
-export type CodeBlockProps = {
-  className?: string;
-  wrapLines?: boolean;
-  showLanguageIndicator?: boolean;
-  language?: string;
-  icon?: string;
-  title?: string;
-  children?: ReactNode;
-  code?: ReactNode;
-  showCopy?: "hover" | "always" | "never";
-  disabled?: boolean;
-  showLineNumbers?: boolean;
-};
-
-export const CodeBlock = ({
-  children,
-  title = "Code",
-  language,
-  icon,
-  showCopy = "hover",
-  showLanguageIndicator,
-  showLineNumbers,
-  ...props
-}: CodeBlockProps) => {
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  if (!children) return null;
-
-  return (
-    <div className={cn(codeBlockClass, props.className)}>
-      <div className={codeBlockHeaderClass}>
-        <div className="flex items-center gap-1.5 flex-1 text-sm w-full px-3">
-          {showLanguageIndicator && (
-            <LanguageIcon language={icon ?? language} />
-          )}
-          {title}
-        </div>
-        {showCopy !== "never" && <CopyCodeButton contentRef={contentRef} />}
-      </div>
-      <div
-        ref={contentRef}
-        className={cn(codeBlockContentClass, showLineNumbers && "line-numbers")}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
+import { CheckIcon, CopyIcon } from "lucide-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";
+
+export const CopyCodeButton = ({
+  contentRef,
+}: {
+  contentRef: React.RefObject<HTMLDivElement | null>;
+}) => {
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
+  return (
+    <button
+      type="button"
+      aria-label="Copy code"
+      title="Copy code"
+      className={cn(
+        "transition p-1.5 mx-1 rounded-lg",
+        !isCopied && "hover:bg-accent hover:brightness-95",
+      )}
+      disabled={isCopied}
+      onClick={() => copyToClipboard(contentRef.current?.textContent ?? "")}
+    >
+      {isCopied ? (
+        <CheckIcon className="text-emerald-600" size={14} />
+      ) : (
+        <CopyIcon size={14} />
+      )}
+    </button>
+  );
+};
+
+export const codeBlockClass = cn(
+  "border code-block-wrapper relative group rounded-xl overflow-hidden",
+);
+
+export const codeBlockHeaderClass = cn("flex items-center py-0.5 bg-black/4");
+
+export const codeBlockContentClass = cn(
+  "code-block p-0.5 text-sm not-prose scrollbar bg-black/4",
+  "[&_code]:rounded-b-[calc(var(--radius)+1px)] [&>pre]:rounded-b-[calc(var(--radius)+1px)] [&_code]:px-3 [&_code]:py-2",
+);
+
+export type CodeBlockProps = {
+  className?: string;
+  wrapLines?: boolean;
+  showLanguageIndicator?: boolean;
+  language?: string;
+  icon?: string;
+  title?: string;
+  children?: ReactNode;
+  code?: ReactNode;
+  showCopy?: "hover" | "always" | "never";
+  disabled?: boolean;
+  showLineNumbers?: boolean;
+};
+
+export const CodeBlock = ({
+  children,
+  title = "Code",
+  language,
+  icon,
+  showCopy = "hover",
+  showLanguageIndicator,
+  showLineNumbers,
+  ...props
+}: CodeBlockProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  if (!children) return null;
+
+  return (
+    <div className={cn(codeBlockClass, props.className)}>
+      <div className={codeBlockHeaderClass}>
+        <div className="flex items-center gap-1.5 flex-1 text-sm w-full px-3">
+          {showLanguageIndicator && (
+            <LanguageIcon language={icon ?? language} />
+          )}
+          {title}
+        </div>
+        {showCopy !== "never" && <CopyCodeButton contentRef={contentRef} />}
+      </div>
+      <div
+        ref={contentRef}
+        className={cn(codeBlockContentClass, showLineNumbers && "line-numbers")}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/lib/ui/CodeTabPanel.tsx

@@ -1,13 +1,13 @@
-export type CodeTabPanelProps = {
-  language?: string;
-  icon?: string;
-  title?: string;
-  code: string;
-  meta?: string;
-};
-
-// This component never renders. It serves as a typed data container whose props
-// are extracted by CodeTabs to build tab panels. Used in MDX via the
-// remark-code-tabs plugin which converts fenced code blocks into CodeTabPanel elements.
-export const CodeTabPanel = (_props: CodeTabPanelProps) => null;
-CodeTabPanel.displayName = "CodeTabPanel";
+export type CodeTabPanelProps = {
+  language?: string;
+  icon?: string;
+  title?: string;
+  code: string;
+  meta?: string;
+};
+
+// This component never renders. It serves as a typed data container whose props
+// are extracted by CodeTabs to build tab panels. Used in MDX via the
+// remark-code-tabs plugin which converts fenced code blocks into CodeTabPanel elements.
+export const CodeTabPanel = (_props: CodeTabPanelProps) => null;
+CodeTabPanel.displayName = "CodeTabPanel";

package/src/lib/ui/CodeTabs.tsx

@@ -1,161 +1,161 @@
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import {
-  Children,
-  isValidElement,
-  type PropsWithChildren,
-  type ReactNode,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
-import { LanguageIcon } from "../components/LanguageIcon.js";
-import { parseMetaString } from "../shiki.js";
-import { cn } from "../util/cn.js";
-import { syncZustandState } from "../util/syncZustandState.js";
-import {
-  CopyCodeButton,
-  codeBlockClass,
-  codeBlockContentClass,
-  codeBlockHeaderClass,
-} from "./CodeBlock.js";
-import { type CodeTabPanelProps, CodeTabPanel } from "./CodeTabPanel.js";
-import { HighlightedCode } from "./SyntaxHighlight.js";
-
-export { CodeTabPanel, type CodeTabPanelProps };
-
-type CodeTabSyncState = {
-  tabs: Record<string, string>;
-  setTab: (key: string, value: string) => void;
-};
-
-const useCodeTabSyncStore = create<CodeTabSyncState>()(
-  persist(
-    (set) => ({
-      tabs: {},
-      setTab: (key, value) =>
-        set((state) => ({ tabs: { ...state.tabs, [key]: value } })),
-    }),
-    {
-      name: "zudoku-code-tabs",
-      storage: createJSONStorage(() => localStorage),
-    },
-  ),
-);
-
-syncZustandState(useCodeTabSyncStore);
-
-// Uses displayName instead of reference equality to survive HMR module reloads
-const isCodeTabPanel = (
-  child: ReactNode,
-): child is React.ReactElement<CodeTabPanelProps> =>
-  isValidElement(child) &&
-  (child.type as typeof CodeTabPanel).displayName === CodeTabPanel.displayName;
-
-type CodeTabsProps = PropsWithChildren<{
-  syncKey?: string;
-  hideIcon?: boolean;
-}>;
-
-export const CodeTabs = ({
-  children,
-  syncKey,
-  hideIcon = false,
-}: CodeTabsProps) => {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [localTab, setLocalTab] = useState(0);
-  const syncedTabKey = useCodeTabSyncStore((s) =>
-    syncKey ? s.tabs[syncKey] : undefined,
-  );
-  const setSyncedTab = useCodeTabSyncStore((s) => s.setTab);
-
-  const panels = useMemo(() => {
-    return Children.toArray(children)
-      .filter(isCodeTabPanel)
-      .map(({ props }, i) => {
-        const meta = props.meta ? parseMetaString(props.meta) : {};
-        const metaIcon = typeof meta.icon === "string" ? meta.icon : undefined;
-        const metaTitle =
-          typeof meta.title === "string" ? meta.title : undefined;
-        return {
-          ...props,
-          icon: props.icon ?? metaIcon,
-          title: props.title ?? metaTitle,
-          showLineNumbers: meta.showLineNumbers,
-          label: metaTitle ?? props.title ?? props.language ?? `Tab ${i + 1}`,
-        };
-      });
-  }, [children]);
-
-  const syncedIndex = syncedTabKey
-    ? panels.findIndex((p) => p.label === syncedTabKey)
-    : -1;
-
-  const activeIndex = Math.min(
-    Math.max(0, syncKey ? syncedIndex : localTab),
-    panels.length - 1,
-  );
-
-  const setActiveIndex = (i: number) => {
-    const panel = panels[i];
-    if (syncKey && panel) {
-      setSyncedTab(syncKey, panel.label);
-    } else {
-      setLocalTab(i);
-    }
-  };
-
-  const activePanel = panels.at(activeIndex);
-
-  return (
-    <TabsPrimitive.Root
-      value={String(activeIndex)}
-      onValueChange={(value) => setActiveIndex(Number(value))}
-      className={codeBlockClass}
-    >
-      <div className={codeBlockHeaderClass}>
-        <TabsPrimitive.List className="flex items-center gap-1 flex-1 text-sm w-full px-1.5">
-          {panels.map((panel, i) => (
-            <TabsPrimitive.Trigger
-              key={[panel.label, panel.language].join(",")}
-              value={String(i)}
-              className={cn(
-                "relative flex items-center gap-1.5 px-2 py-1 text-sm",
-                "after:transition after:absolute after:opacity-0 data-[state=active]:after:opacity-100",
-                "after:h-0.5 after:-inset-x-0.5 after:-bottom-0.5 after:bg-foreground after:rounded",
-                "text-muted-foreground hover:text-foreground data-[state=active]:text-foreground",
-              )}
-            >
-              {!hideIcon && (
-                <LanguageIcon language={panel.icon ?? panel.language} />
-              )}
-              {panel.label}
-            </TabsPrimitive.Trigger>
-          ))}
-        </TabsPrimitive.List>
-        <CopyCodeButton contentRef={contentRef} />
-      </div>
-      <div
-        ref={contentRef}
-        className={cn(
-          codeBlockContentClass,
-          activePanel?.showLineNumbers && "line-numbers",
-        )}
-      >
-        {panels.map((panel, i) => (
-          <TabsPrimitive.Content
-            key={[panel.label, panel.language].join(",")}
-            value={String(i)}
-          >
-            <HighlightedCode
-              code={panel.code}
-              language={panel.language}
-              meta={panel.meta}
-            />
-          </TabsPrimitive.Content>
-        ))}
-      </div>
-    </TabsPrimitive.Root>
-  );
-};
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import {
+  Children,
+  isValidElement,
+  type PropsWithChildren,
+  type ReactNode,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { LanguageIcon } from "../components/LanguageIcon.js";
+import { parseMetaString } from "../shiki.js";
+import { cn } from "../util/cn.js";
+import { syncZustandState } from "../util/syncZustandState.js";
+import {
+  CopyCodeButton,
+  codeBlockClass,
+  codeBlockContentClass,
+  codeBlockHeaderClass,
+} from "./CodeBlock.js";
+import { type CodeTabPanelProps, CodeTabPanel } from "./CodeTabPanel.js";
+import { HighlightedCode } from "./SyntaxHighlight.js";
+
+export { CodeTabPanel, type CodeTabPanelProps };
+
+type CodeTabSyncState = {
+  tabs: Record<string, string>;
+  setTab: (key: string, value: string) => void;
+};
+
+const useCodeTabSyncStore = create<CodeTabSyncState>()(
+  persist(
+    (set) => ({
+      tabs: {},
+      setTab: (key, value) =>
+        set((state) => ({ tabs: { ...state.tabs, [key]: value } })),
+    }),
+    {
+      name: "zudoku-code-tabs",
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);
+
+syncZustandState(useCodeTabSyncStore);
+
+// Uses displayName instead of reference equality to survive HMR module reloads
+const isCodeTabPanel = (
+  child: ReactNode,
+): child is React.ReactElement<CodeTabPanelProps> =>
+  isValidElement(child) &&
+  (child.type as typeof CodeTabPanel).displayName === CodeTabPanel.displayName;
+
+type CodeTabsProps = PropsWithChildren<{
+  syncKey?: string;
+  hideIcon?: boolean;
+}>;
+
+export const CodeTabs = ({
+  children,
+  syncKey,
+  hideIcon = false,
+}: CodeTabsProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [localTab, setLocalTab] = useState(0);
+  const syncedTabKey = useCodeTabSyncStore((s) =>
+    syncKey ? s.tabs[syncKey] : undefined,
+  );
+  const setSyncedTab = useCodeTabSyncStore((s) => s.setTab);
+
+  const panels = useMemo(() => {
+    return Children.toArray(children)
+      .filter(isCodeTabPanel)
+      .map(({ props }, i) => {
+        const meta = props.meta ? parseMetaString(props.meta) : {};
+        const metaIcon = typeof meta.icon === "string" ? meta.icon : undefined;
+        const metaTitle =
+          typeof meta.title === "string" ? meta.title : undefined;
+        return {
+          ...props,
+          icon: props.icon ?? metaIcon,
+          title: props.title ?? metaTitle,
+          showLineNumbers: meta.showLineNumbers,
+          label: metaTitle ?? props.title ?? props.language ?? `Tab ${i + 1}`,
+        };
+      });
+  }, [children]);
+
+  const syncedIndex = syncedTabKey
+    ? panels.findIndex((p) => p.label === syncedTabKey)
+    : -1;
+
+  const activeIndex = Math.min(
+    Math.max(0, syncKey ? syncedIndex : localTab),
+    panels.length - 1,
+  );
+
+  const setActiveIndex = (i: number) => {
+    const panel = panels[i];
+    if (syncKey && panel) {
+      setSyncedTab(syncKey, panel.label);
+    } else {
+      setLocalTab(i);
+    }
+  };
+
+  const activePanel = panels.at(activeIndex);
+
+  return (
+    <TabsPrimitive.Root
+      value={String(activeIndex)}
+      onValueChange={(value) => setActiveIndex(Number(value))}
+      className={codeBlockClass}
+    >
+      <div className={codeBlockHeaderClass}>
+        <TabsPrimitive.List className="flex items-center gap-1 flex-1 text-sm w-full px-1.5">
+          {panels.map((panel, i) => (
+            <TabsPrimitive.Trigger
+              key={[panel.label, panel.language].join(",")}
+              value={String(i)}
+              className={cn(
+                "relative flex items-center gap-1.5 px-2 py-1 text-sm",
+                "after:transition after:absolute after:opacity-0 data-[state=active]:after:opacity-100",
+                "after:h-0.5 after:-inset-x-0.5 after:-bottom-0.5 after:bg-foreground after:rounded",
+                "text-muted-foreground hover:text-foreground data-[state=active]:text-foreground",
+              )}
+            >
+              {!hideIcon && (
+                <LanguageIcon language={panel.icon ?? panel.language} />
+              )}
+              {panel.label}
+            </TabsPrimitive.Trigger>
+          ))}
+        </TabsPrimitive.List>
+        <CopyCodeButton contentRef={contentRef} />
+      </div>
+      <div
+        ref={contentRef}
+        className={cn(
+          codeBlockContentClass,
+          activePanel?.showLineNumbers && "line-numbers",
+        )}
+      >
+        {panels.map((panel, i) => (
+          <TabsPrimitive.Content
+            key={[panel.label, panel.language].join(",")}
+            value={String(i)}
+          >
+            <HighlightedCode
+              code={panel.code}
+              language={panel.language}
+              meta={panel.meta}
+            />
+          </TabsPrimitive.Content>
+        ))}
+      </div>
+    </TabsPrimitive.Root>
+  );
+};

package/src/lib/ui/Collapsible.tsx

@@ -1,31 +1,31 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  );
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  );
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };