wiki-viewer 1.0.0

package/.next/standalone/src/components/editor/wiki-link-picker.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import type { Editor } from "@tiptap/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { useWikiSlugsStore } from "@/stores/wiki-slugs-store";
+import type { WikiCreateResult } from "./wiki-link-create-dialog";
+
+interface WikiLinkPickerProps {
+	editor: Editor | null;
+	onCreateRequest: (slug: string) => Promise<WikiCreateResult>;
+}
+
+const SLUG_RE = /^[a-z0-9-]+$/;
+const MAX_RESULTS = 20;
+
+function fuzzyMatch(slug: string, query: string): boolean {
+	if (!query) return true;
+	return slug.includes(query.toLowerCase());
+}
+
+export function WikiLinkPicker({
+	editor,
+	onCreateRequest,
+}: WikiLinkPickerProps) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [position, setPosition] = useState({ top: 0, left: 0 });
+	const menuRef = useRef<HTMLDivElement>(null);
+
+	// triggerFrom: doc position immediately after `[[` is fully inserted.
+	// Calculated as `from + 1` at the moment the second `[` keydown fires.
+	const triggerFromRef = useRef<number>(0);
+
+	const slugs = useWikiSlugsStore((s) => s.slugs);
+	const slugDir = useWikiSlugsStore((s) => s.slugDir);
+	const has = useWikiSlugsStore((s) => s.has);
+
+	const allSlugs = Array.from(slugs).sort();
+	const filtered = allSlugs
+		.filter((s) => fuzzyMatch(s, query))
+		.slice(0, MAX_RESULTS);
+
+	const canCreate = query.length > 0 && SLUG_RE.test(query) && !has(query);
+	const totalItems = filtered.length + (canCreate ? 1 : 0);
+
+	const handleClose = useCallback(() => {
+		setOpen(false);
+		setQuery("");
+		setSelectedIndex(0);
+	}, []);
+
+	const insertWikiLink = useCallback(
+		(slug: string) => {
+			if (!editor) return;
+			const { from } = editor.state.selection;
+			// Delete the `[[query` range and replace with the wiki-link mark.
+			const start = triggerFromRef.current - 2; // back over [[
+			const markType = editor.state.schema.marks.wikiLink;
+			if (!markType) return;
+			const mark = markType.create({ slug, alias: null, anchor: null });
+			const node = editor.state.schema.text(slug, [mark]);
+			const tr = editor.state.tr.replaceWith(start, from, node);
+			editor.view.dispatch(tr);
+			editor.commands.focus();
+			handleClose();
+		},
+		[editor, handleClose],
+	);
+
+	const handleSelect = useCallback(
+		async (index: number) => {
+			if (!editor) return;
+			if (index < filtered.length) {
+				insertWikiLink(filtered[index] ?? "");
+			} else if (canCreate) {
+				// Delegate to create dialog; insert mark on success.
+				const result = await onCreateRequest(query);
+				if (result.ok) {
+					insertWikiLink(result.slug);
+				} else {
+					handleClose();
+				}
+			}
+		},
+		[
+			editor,
+			filtered,
+			canCreate,
+			query,
+			insertWikiLink,
+			onCreateRequest,
+			handleClose,
+		],
+	);
+
+	useEffect(() => {
+		if (!editor) return;
+
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (!open) {
+				// Detect second `[` — trigger is `[[`
+				if (event.key === "[") {
+					const { from } = editor.state.selection;
+					const textBefore = editor.state.doc.textBetween(
+						Math.max(0, from - 1),
+						from,
+					);
+					if (textBefore !== "[") return;
+
+					// Skip if cursor is inside an existing wikiLink mark
+					const $pos = editor.state.doc.resolve(from);
+					const insideWikiLink = $pos
+						.marks()
+						.some((m) => m.type.name === "wikiLink");
+					if (insideWikiLink) return;
+
+					const coords = editor.view.coordsAtPos(from);
+					const editorRect = editor.view.dom.getBoundingClientRect();
+					setPosition({
+						top: coords.bottom - editorRect.top + 4,
+						left: coords.left - editorRect.left,
+					});
+					// After keydown resolves, the second `[` will be inserted
+					// moving the cursor to `from + 1`.
+					triggerFromRef.current = from + 1;
+					setOpen(true);
+					setQuery("");
+					setSelectedIndex(0);
+				}
+				return;
+			}
+
+			// Picker is open — handle navigation keys
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setSelectedIndex((i) => (totalItems > 0 ? (i + 1) % totalItems : 0));
+			} else if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setSelectedIndex((i) =>
+					totalItems > 0 ? (i - 1 + totalItems) % totalItems : 0,
+				);
+			} else if (event.key === "Enter") {
+				event.preventDefault();
+				event.stopPropagation();
+				if (totalItems > 0) {
+					void handleSelect(selectedIndex);
+				}
+			} else if (event.key === "Escape") {
+				handleClose();
+			} else if (event.key === "]") {
+				// Closing bracket dismisses without inserting
+				handleClose();
+			} else if (event.key === "Backspace") {
+				if (query.length === 0) {
+					handleClose();
+				} else {
+					setQuery((q) => q.slice(0, -1));
+					setSelectedIndex(0);
+				}
+			} else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
+				setQuery((q) => q + event.key);
+				setSelectedIndex(0);
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown, true);
+		return () => window.removeEventListener("keydown", handleKeyDown, true);
+	}, [
+		editor,
+		open,
+		query,
+		selectedIndex,
+		totalItems,
+		handleClose,
+		handleSelect,
+	]);
+
+	// Close on outside click
+	useEffect(() => {
+		if (!open) return;
+		const handleMouseDown = (e: MouseEvent) => {
+			if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+				handleClose();
+			}
+		};
+		window.addEventListener("mousedown", handleMouseDown);
+		return () => window.removeEventListener("mousedown", handleMouseDown);
+	}, [open, handleClose]);
+
+	if (!open || totalItems === 0) return null;
+
+	return (
+		<div
+			ref={menuRef}
+			className="absolute z-50 w-[280px] bg-popover border border-border rounded-lg shadow-lg py-1 overflow-hidden max-h-[300px] overflow-y-auto"
+			style={{ top: position.top, left: position.left }}
+		>
+			{filtered.map((slug, i) => {
+				const dir = slugDir.get(slug);
+				return (
+					<button
+						key={slug}
+						type="button"
+						onMouseDown={(e) => {
+							e.preventDefault();
+							void handleSelect(i);
+						}}
+						onMouseEnter={() => setSelectedIndex(i)}
+						className={cn(
+							"flex items-center justify-between w-full px-3 py-1.5 text-left text-sm transition-colors",
+							i === selectedIndex
+								? "bg-accent text-accent-foreground"
+								: "hover:bg-accent/50",
+						)}
+					>
+						<span className="truncate">{slug}</span>
+						{dir && (
+							<span className="ml-2 shrink-0 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+								{dir}
+							</span>
+						)}
+					</button>
+				);
+			})}
+
+			{canCreate && (
+				<button
+					type="button"
+					onMouseDown={(e) => {
+						e.preventDefault();
+						void handleSelect(filtered.length);
+					}}
+					onMouseEnter={() => setSelectedIndex(filtered.length)}
+					className={cn(
+						"flex items-center w-full px-3 py-1.5 text-left text-sm transition-colors",
+						filtered.length === selectedIndex
+							? "bg-accent text-accent-foreground"
+							: "hover:bg-accent/50",
+					)}
+				>
+					<span className="text-muted-foreground">
+						+ Create new &ldquo;{query}&rdquo;
+					</span>
+				</button>
+			)}
+		</div>
+	);
+}

package/.next/standalone/src/components/layout/viewer-toolbar.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+// Simplified toolbar stub used by the ported viewer components.
+// Replace with a fuller implementation if navigation breadcrumbs are needed.
+
+export function ViewerToolbar({
+	path,
+	badge,
+	sublabel,
+	showBreadcrumb: _showBreadcrumb = true,
+	leading,
+	children,
+	className,
+}: {
+	path?: string;
+	badge?: string;
+	sublabel?: string;
+	showBreadcrumb?: boolean;
+	leading?: ReactNode;
+	children?: ReactNode;
+	className?: string;
+}) {
+	return (
+		<div
+			className={cn(
+				"flex shrink-0 items-center justify-between gap-3 border-b border-border bg-background px-4 py-2",
+				className,
+			)}
+		>
+			<div className="flex min-w-0 flex-1 items-center gap-2">
+				{leading}
+				{path && (
+					<span className="text-xs text-muted-foreground truncate" title={path}>
+						{path.split("/").pop() ?? path}
+					</span>
+				)}
+				{badge && (
+					<span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground/50">
+						{badge}
+					</span>
+				)}
+				{sublabel && (
+					<span className="shrink-0 text-xs text-muted-foreground/40">
+						{sublabel}
+					</span>
+				)}
+			</div>
+			<div className="flex shrink-0 items-center gap-1">{children}</div>
+		</div>
+	);
+}

package/.next/standalone/src/components/theme-provider.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+	return (
+		<NextThemesProvider
+			attribute="class"
+			defaultTheme="system"
+			enableSystem
+			disableTransitionOnChange
+		>
+			{children}
+		</NextThemesProvider>
+	);
+}

package/.next/standalone/src/components/theme-toggle.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle({ className }: { className?: string }) {
+	const { resolvedTheme, setTheme } = useTheme();
+	return (
+		<Button
+			size="sm"
+			variant="ghost"
+			className={`h-7 w-7 p-0 ${className ?? ""}`}
+			title={resolvedTheme === "dark" ? "Switch to light" : "Switch to dark"}
+			onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+		>
+			{resolvedTheme === "dark" ? (
+				<Sun className="h-3.5 w-3.5" />
+			) : (
+				<Moon className="h-3.5 w-3.5" />
+			)}
+		</Button>
+	);
+}

package/.next/standalone/src/components/ui/badge.tsx

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+	"inline-flex items-center rounded-sm border px-2.5 py-0.5 text-xs font-normal transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground shadow-e-1",
+				secondary: "border-transparent bg-secondary text-secondary-foreground",
+				destructive:
+					"border-transparent bg-destructive text-destructive-foreground shadow-e-1",
+				outline: "text-foreground",
+				accent: "border-transparent bg-accent text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+export interface BadgeProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
+}
+
+export { Badge, badgeVariants };

package/.next/standalone/src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium normal-case transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground shadow-e-1 hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-destructive-foreground shadow-e-1 hover:bg-destructive/90",
+				outline:
+					"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground shadow-e-1 hover:bg-secondary/80",
+				ghost: "bg-transparent hover:bg-accent/10 text-foreground",
+				link: "text-foreground underline underline-offset-4 hover:text-accent",
+			},
+			size: {
+				default: "h-10 p-3 rounded-full",
+				sm: "h-8 rounded-full px-3 text-xs",
+				lg: "h-10 rounded-full px-8",
+				icon: "h-9 w-9 rounded-full",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, size, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/.next/standalone/src/components/ui/card.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn(
+			"rounded-md border border-border bg-card text-card-foreground shadow-e-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("flex flex-col space-y-1.5 p-6", className)}
+		{...props}
+	/>
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("text-lg font-normal leading-none tracking-tight", className)}
+		{...props}
+	/>
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+export { Card, CardContent, CardDescription, CardHeader, CardTitle };

package/.next/standalone/src/components/ui/collapsible.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/.next/standalone/src/components/ui/command.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import * as React from "react";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+const Command = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			"flex h-full w-full flex-col overflow-hidden rounded-sm bg-popover text-popover-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+Command.displayName = CommandPrimitive.displayName;
+
+function CommandDialog({
+	children,
+	...props
+}: React.ComponentProps<typeof Dialog>) {
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0 shadow-golden max-w-lg">
+				<DialogTitle className="sr-only">Search</DialogTitle>
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+const CommandInput = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+	<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
+			ref={ref}
+			className={cn(
+				"flex h-11 w-full rounded-sm bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+		{...props}
+	/>
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm text-muted-foreground"
+		{...props}
+	/>
+));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 h-px bg-border", className)}
+		{...props}
+	/>
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+function CommandShortcut({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+	Command,
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+	CommandShortcut,
+};