@karimsa/mdxserve 0.0.0-stage → 0.1.0

package/client/ui/TocList.tsx

@@ -0,0 +1,71 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { motion } from "framer-motion";
+import { TRANSITIONS } from "../motion";
+
+export interface TocItem {
+	id: string;
+	label: ReactNode;
+	/** Heading level, 2-4. */
+	level?: number;
+}
+
+// `title` shadows the native HTML tooltip attribute (typed `string` on `HTMLAttributes`).
+export interface TocListProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onSelect"> {
+	items?: TocItem[];
+	/** id of the heading currently in view. */
+	activeId?: string;
+	onSelect?: (id: string) => void;
+	/** Set to null to hide the label. */
+	title?: ReactNode;
+}
+
+/** "On this page" rail, kept in sync with scroll position by the caller via `activeId`. */
+export function TocList({
+	items = [],
+	activeId,
+	onSelect,
+	title = "On this page",
+	className,
+	...rest
+}: TocListProps) {
+	return (
+		<nav className={"flex flex-col gap-2" + (className ? " " + className : "")} {...rest}>
+			{title ? (
+				<div className="font-mono text-[length:var(--size-2xs)] font-semibold uppercase tracking-[var(--tracking-caps)] text-text-subtle">
+					{title}
+				</div>
+			) : null}
+			<div className="relative flex flex-col">
+				{items.map((item) => {
+					const active = item.id === activeId;
+					return (
+						<a
+							key={item.id}
+							href={"#" + item.id}
+							onClick={(event) => {
+								if (onSelect) {
+									event.preventDefault();
+									onSelect(item.id);
+								}
+							}}
+							className={
+								"relative block break-words border-l-2 border-border-default py-[5px] text-[13px] leading-normal no-underline transition-colors " +
+								(active ? "font-semibold text-text-accent" : "font-normal text-text-muted")
+							}
+							style={{ paddingLeft: 10 + ((item.level ?? 2) - 2) * 12 }}
+						>
+							{active ? (
+								<motion.span
+									layoutId="toc-active"
+									transition={TRANSITIONS.glide}
+									className="absolute -left-0.5 top-0 bottom-0 w-0.5 bg-teal-500"
+								/>
+							) : null}
+							{item.label}
+						</a>
+					);
+				})}
+			</div>
+		</nav>
+	);
+}

package/client/ui/icon-set.ts

@@ -0,0 +1,102 @@
+import type { LucideIcon } from "lucide-react";
+// Deep per-file imports are deliberate, not an oversight: importing named
+// icons from lucide-react's entry point pulls in its whole `icons` map (2,022
+// icons, 1.15 MB pre-bundled in dev) regardless of tree-shaking, because Vite
+// pre-bundles a package's entry module as a unit. Reaching straight into
+// `dist/esm/icons/<name>.mjs` keeps each of these to exactly one icon.
+//
+// This is the static "chrome" tier of client/ui/Icon.tsx: every name an
+// mdxserve UI component passes to an icon prop, resolved synchronously with
+// no dynamic import so the header, toolbars, callouts and toasts never flicker.
+// Any other name (an author's `icon="rocket"` in a doc) falls through to
+// `lucide-react/dynamicIconImports` and loads lazily.
+//
+// Regenerate the candidate list with (then review it — a literal on an
+// icon-passing line is not always an icon name):
+//   grep -rhE '(icon|Icon|name)[A-Za-z]*\s*[=:]' client --include='*.tsx' --include='*.ts' --exclude-dir=design-ref \
+//     | grep -oE '"[a-z][a-z0-9-]*"' | tr -d '"' | sort -u \
+//     | node -e '
+//         const lines = require("fs").readFileSync(0, "utf8").split("\n").filter(Boolean);
+//         import("./node_modules/lucide-react/dynamicIconImports.mjs").then((mod) => {
+//           const names = new Set(Object.keys(mod.default));
+//           console.log(lines.filter((line) => names.has(line)).join("\n"));
+//         });
+//       '
+// Two names live in a value map rather than on an icon-passing line and must
+// be kept by hand: "arrow-down" / "arrow-up" (CodeBlock.tsx's flowchart
+// direction glyphs). "check" and "chevron-down" are Dropdown.tsx's.
+import ArrowDown from "lucide-react/dist/esm/icons/arrow-down.mjs";
+import ArrowLeft from "lucide-react/dist/esm/icons/arrow-left.mjs";
+import ArrowRight from "lucide-react/dist/esm/icons/arrow-right.mjs";
+import ArrowUp from "lucide-react/dist/esm/icons/arrow-up.mjs";
+import ArrowUpDown from "lucide-react/dist/esm/icons/arrow-up-down.mjs";
+import ChartBar from "lucide-react/dist/esm/icons/chart-bar.mjs";
+import ChartColumn from "lucide-react/dist/esm/icons/chart-column.mjs";
+import Check from "lucide-react/dist/esm/icons/check.mjs";
+import ChevronDown from "lucide-react/dist/esm/icons/chevron-down.mjs";
+import ChevronRight from "lucide-react/dist/esm/icons/chevron-right.mjs";
+import CircleCheck from "lucide-react/dist/esm/icons/circle-check.mjs";
+import Code from "lucide-react/dist/esm/icons/code.mjs";
+import Copy from "lucide-react/dist/esm/icons/copy.mjs";
+import Download from "lucide-react/dist/esm/icons/download.mjs";
+import Expand from "lucide-react/dist/esm/icons/expand.mjs";
+import File from "lucide-react/dist/esm/icons/file.mjs";
+import FileText from "lucide-react/dist/esm/icons/file-text.mjs";
+import Folder from "lucide-react/dist/esm/icons/folder.mjs";
+import FolderOpen from "lucide-react/dist/esm/icons/folder-open.mjs";
+import FolderPlus from "lucide-react/dist/esm/icons/folder-plus.mjs";
+import ImageIcon from "lucide-react/dist/esm/icons/image.mjs";
+import Info from "lucide-react/dist/esm/icons/info.mjs";
+import Lightbulb from "lucide-react/dist/esm/icons/lightbulb.mjs";
+import ListChecks from "lucide-react/dist/esm/icons/list-checks.mjs";
+import Maximize from "lucide-react/dist/esm/icons/maximize.mjs";
+import Minus from "lucide-react/dist/esm/icons/minus.mjs";
+import Moon from "lucide-react/dist/esm/icons/moon.mjs";
+import OctagonAlert from "lucide-react/dist/esm/icons/octagon-alert.mjs";
+import PanelLeft from "lucide-react/dist/esm/icons/panel-left.mjs";
+import Pencil from "lucide-react/dist/esm/icons/pencil.mjs";
+import Plus from "lucide-react/dist/esm/icons/plus.mjs";
+import Search from "lucide-react/dist/esm/icons/search.mjs";
+import Sun from "lucide-react/dist/esm/icons/sun.mjs";
+import Trash2 from "lucide-react/dist/esm/icons/trash-2.mjs";
+import TriangleAlert from "lucide-react/dist/esm/icons/triangle-alert.mjs";
+import XIcon from "lucide-react/dist/esm/icons/x.mjs";
+
+export const staticIcons: Record<string, LucideIcon> = {
+	"arrow-down": ArrowDown,
+	"arrow-left": ArrowLeft,
+	"arrow-right": ArrowRight,
+	"arrow-up": ArrowUp,
+	"arrow-up-down": ArrowUpDown,
+	"chart-bar": ChartBar,
+	"chart-column": ChartColumn,
+	check: Check,
+	"chevron-down": ChevronDown,
+	"chevron-right": ChevronRight,
+	"circle-check": CircleCheck,
+	code: Code,
+	copy: Copy,
+	download: Download,
+	expand: Expand,
+	file: File,
+	"file-text": FileText,
+	folder: Folder,
+	"folder-open": FolderOpen,
+	"folder-plus": FolderPlus,
+	image: ImageIcon,
+	info: Info,
+	lightbulb: Lightbulb,
+	"list-checks": ListChecks,
+	maximize: Maximize,
+	minus: Minus,
+	moon: Moon,
+	"octagon-alert": OctagonAlert,
+	"panel-left": PanelLeft,
+	pencil: Pencil,
+	plus: Plus,
+	search: Search,
+	sun: Sun,
+	"trash-2": Trash2,
+	"triangle-alert": TriangleAlert,
+	x: XIcon,
+};

package/client/ui/toast-count.ts

@@ -0,0 +1,28 @@
+/**
+ * Advances the repeat-push counter for one dedupe key.
+ *
+ * `counts` is keyed by dedupe id and tracks how many pushes a still-live
+ * toast has absorbed. Before touching `id`, every key no longer present in
+ * `live` is dropped — once react-hot-toast has actually removed a toast
+ * (auto-dismissed, closed by the reader, or evicted), a later push reusing
+ * that id starts a fresh card at count 1 rather than resuming an old count.
+ * Then: if `id` is both live and already counted, increment; otherwise this
+ * is the first push for that id (or its first push since it went away), so
+ * the count resets to 1.
+ */
+export function nextCount(
+	live: ReadonlySet<string>,
+	counts: Map<string, number>,
+	id: string,
+): number {
+	for (const key of counts.keys()) {
+		if (!live.has(key)) counts.delete(key);
+	}
+	if (live.has(id) && counts.has(id)) {
+		const incremented = counts.get(id)! + 1;
+		counts.set(id, incremented);
+		return incremented;
+	}
+	counts.set(id, 1);
+	return 1;
+}