cantip 0.1.0

package/app/components/TabBar.tsx

@@ -0,0 +1,227 @@
+import { useNavigate, useLocation } from "@remix-run/react";
+import { MoreVertical, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { DropdownMenu, DropdownMenuItem } from "~/components/ui/dropdown-menu";
+import { useTabs, normTabPath } from "~/lib/tabs";
+import { useKeyboardShortcuts, type Shortcut } from "~/lib/useKeyboardShortcuts";
+import { cn } from "~/lib/utils";
+
+/**
+ * Drives a custom overlay scrollbar over a horizontally-scrolling element whose
+ * native scrollbar is hidden (`.scrollbar-none`). Returns a ref to attach to the
+ * scroll container, the thumb geometry (as 0–1 fractions of the track), and a
+ * flag for whether the content overflows at all.
+ *
+ * The thumb is positioned/sized from `scrollLeft / scrollWidth / clientWidth`,
+ * recomputed on scroll, resize, and whenever the tab set changes.
+ */
+function useOverlayScrollbar(deps: unknown[]) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [thumb, setThumb] = useState({ width: 0, left: 0 });
+
+  const measure = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const { scrollWidth, clientWidth, scrollLeft } = el;
+    if (scrollWidth <= clientWidth) {
+      setThumb({ width: 0, left: 0 });
+      return;
+    }
+    setThumb({
+      width: clientWidth / scrollWidth,
+      left: scrollLeft / scrollWidth,
+    });
+  }, []);
+
+  useEffect(() => {
+    measure();
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  // Translate vertical wheel ticks into horizontal scroll, the way VS Code does.
+  const onWheel = useCallback((e: React.WheelEvent<HTMLDivElement>) => {
+    const el = ref.current;
+    if (!el || el.scrollWidth <= el.clientWidth) return;
+    // Only hijack a predominantly-vertical wheel; let trackpad horizontal
+    // gestures (deltaX) scroll natively.
+    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+      el.scrollLeft += e.deltaY;
+    }
+  }, []);
+
+  return {
+    ref,
+    thumb,
+    onScroll: measure,
+    onWheel,
+    hasOverflow: thumb.width > 0,
+  };
+}
+
+/**
+ * Editor-style tab strip shown **only above the content area** (right of the
+ * sidebar). Renders nothing when no tabs are open. The active tab is whichever
+ * one matches the current URL. Clicking a tab navigates to it; the × button
+ * closes it — closing the active tab activates a neighbor (right, else left).
+ * A vertical-dots button at the far end (always visible, outside the scroll
+ * region) closes all tabs at once.
+ */
+export default function TabBar() {
+  const { tabs, closeTab, closeAll } = useTabs();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { ref, thumb, onScroll, onWheel, hasOverflow } = useOverlayScrollbar([
+    tabs.length,
+  ]);
+
+  const cur = normTabPath(location.pathname);
+
+  // Close a tab by path: drop it, and if it was the active one, move to a
+  // neighbor (prefer the right, else the left). Shared by the × button and the
+  // `w` shortcut. Defined before the empty-tabs early return so the hook below
+  // it always runs (hooks can't follow a conditional return).
+  const closePath = useCallback(
+    (path: string) => {
+      const norm = normTabPath(path);
+      const idx = tabs.findIndex((t) => normTabPath(t.path) === norm);
+      const wasActive = norm === cur;
+      closeTab(path);
+      if (wasActive && tabs.length > 1) {
+        const neighbor = tabs[idx + 1] ?? tabs[idx - 1];
+        if (neighbor) navigate(neighbor.path);
+      }
+    },
+    [tabs, cur, closeTab, navigate]
+  );
+
+  // `w` (outside text fields) closes the current tab — bare key, so no clash
+  // with the browser's reserved Ctrl/Cmd+W. No-op when no tab matches the URL.
+  const tabShortcuts = useMemo<Shortcut[]>(
+    () => [
+      {
+        keys: "w",
+        label: "Закрыть текущую вкладку",
+        group: "Вкладки",
+        run: () => {
+          if (tabs.some((t) => normTabPath(t.path) === cur)) closePath(cur);
+        },
+      },
+    ],
+    [tabs, cur, closePath]
+  );
+  useKeyboardShortcuts(tabShortcuts);
+
+  if (tabs.length === 0) return null;
+
+  const close = (e: React.MouseEvent, path: string) => {
+    e.stopPropagation();
+    e.preventDefault();
+    closePath(path);
+  };
+
+  // Stickiness is handled by the grid cell wrapper in root.tsx (sticky top-11),
+  // since a sticky grid item can travel the whole grid height while this inner
+  // strip's own parent box is only as tall as the strip.
+  return (
+    <div
+      data-tab-strip
+      className="flex h-9 items-stretch border-b bg-background max-md:hidden"
+    >
+      {/* Scrollable tab list wrapper. `group/strip relative` is the positioning
+			    context for the overlay scrollbar, which sits as a non-scrolling
+			    sibling pinned to the bottom edge. */}
+      <div className="group/strip relative flex min-w-0 flex-1 items-stretch">
+        {/* The scroll region itself. The native scrollbar is hidden
+				    (`scrollbar-none`) so it reserves no vertical space and never
+				    shifts the tab text. Vertical wheel ticks scroll it horizontally
+				    (VS Code style) via onWheel. */}
+        <div
+          ref={ref}
+          onScroll={onScroll}
+          onWheel={onWheel}
+          className="flex min-w-0 flex-1 items-stretch overflow-x-auto scrollbar-none"
+        >
+          {tabs.map((tab) => {
+            const isActive = normTabPath(tab.path) === cur;
+            return (
+              <div
+                key={tab.path}
+                title={tab.title}
+                onClick={() => navigate(tab.path)}
+                className={cn(
+                  "group flex max-w-[12rem] shrink-0 cursor-pointer items-center gap-1.5 border-r pl-3 pr-1.5 text-sm select-none",
+                  "transition-colors",
+                  isActive
+                    ? "bg-sidebar-accent text-foreground"
+                    : "bg-background text-muted-foreground hover:bg-sidebar-accent/60"
+                )}
+              >
+                <span className="min-w-0 truncate">{tab.title}</span>
+                <button
+                  type="button"
+                  aria-label={`Закрыть ${tab.title}`}
+                  // The `w` shortcut closes the *active* tab, so only hint it there.
+                  title={isActive ? "Закрыть (W)" : undefined}
+                  onClick={(e) => close(e, tab.path)}
+                  className={cn(
+                    "flex size-5 shrink-0 items-center justify-center rounded hover:bg-foreground/10",
+                    isActive
+                      ? "opacity-100"
+                      : "opacity-0 group-hover:opacity-100"
+                  )}
+                >
+                  <X className="size-3.5" />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+        {/* Overlay scrollbar. Non-scrolling sibling pinned to the bottom edge
+				    of the strip; only rendered when the tabs overflow. The thumb's
+				    width/offset are fractions of the track, derived from the scroll
+				    geometry. It's invisible until the strip is hovered, then fades in
+				    — so it costs no layout space and stays out of the way. */}
+        {hasOverflow && (
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 h-0.5">
+            <div
+              className={cn(
+                "h-full rounded-full bg-border opacity-0 transition-opacity",
+                "group-hover/strip:opacity-100"
+              )}
+              style={{
+                width: `${thumb.width * 100}%`,
+                marginLeft: `${thumb.left * 100}%`,
+              }}
+            />
+          </div>
+        )}
+      </div>
+      {/* Actions menu: pinned at the end, outside the scroll region, so the
+			    trigger stays visible no matter how far the tab list scrolls. The
+			    vertical-dots button opens a dropdown with "close all tabs". */}
+      <DropdownMenu
+        align="end"
+        label="Действия с вкладками"
+        className={({ open }) =>
+          cn(
+            "flex h-full w-9 shrink-0 items-center justify-center border-l text-muted-foreground",
+            "transition-colors hover:bg-sidebar-accent/60 hover:text-foreground",
+            open && "bg-sidebar-accent text-foreground"
+          )
+        }
+        trigger={() => <MoreVertical className="size-4" />}
+      >
+        <DropdownMenuItem onSelect={closeAll}>
+          <X className="size-4 shrink-0 text-muted-foreground" />
+          <span>Закрыть все вкладки ({tabs.length})</span>
+        </DropdownMenuItem>
+      </DropdownMenu>
+    </div>
+  );
+}

package/app/components/Toc.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from 'react'
+import { useStickyBox } from 'react-sticky-box'
+import type { Heading } from '~/lib/content.server'
+import { t } from '~/lib/site'
+import { cn } from '~/lib/utils'
+
+// Headings shown in every TOC: section (h2) and subsection (h3) only.
+export function tocHeadings(headings: Heading[]) {
+	return headings.filter((h) => h.depth >= 2 && h.depth <= 3)
+}
+
+// Scroll-spy: returns the slug of the heading the reader is currently at.
+//
+// We observe each heading element and keep the set that's intersecting the
+// "active band" — the top 20% of the viewport (rootMargin shrinks the bottom
+// to -80%). The active heading is the LAST visible one in document order, so
+// it stays highlighted while reading its section, then advances as the next
+// heading crosses into the band. The 44px top inset matches the sticky TopBar
+// so a heading scrolled flush under the bar still counts as "at the top".
+export function useActiveHeading(shown: Heading[]) {
+	const [activeSlug, setActiveSlug] = useState<string | null>(null)
+
+	useEffect(() => {
+		if (shown.length === 0) return
+
+		const elements = shown
+			.map((h) => document.getElementById(h.slug))
+			.filter((el): el is HTMLElement => el !== null)
+		if (elements.length === 0) return
+
+		// Track visibility per slug so we can pick the last visible heading even
+		// across multiple observer callbacks.
+		const visible = new Set<string>()
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) visible.add(entry.target.id)
+					else visible.delete(entry.target.id)
+				}
+				// Last visible heading in document order wins.
+				const slugs = shown.map((h) => h.slug)
+				const last = slugs.filter((s) => visible.has(s)).at(-1)
+				if (last) {
+					setActiveSlug(last)
+				} else {
+					// Nothing in the band (e.g. mid-section with a tall block):
+					// keep the last heading scrolled past the top of the band.
+					const passed = elements.filter((el) => el.getBoundingClientRect().top < 44)
+					const lastPassed = passed.at(-1)
+					if (lastPassed) setActiveSlug(lastPassed.id)
+				}
+			},
+			{ rootMargin: '-44px 0px -80% 0px', threshold: 0 },
+		)
+
+		for (const el of elements) observer.observe(el)
+		return () => observer.disconnect()
+	}, [shown])
+
+	return activeSlug
+}
+
+// Shared link list rendered by the desktop sidebar TOC and the mobile TOC modal.
+export function TocLinks({ shown }: { shown: Heading[] }) {
+	const activeSlug = useActiveHeading(shown)
+
+	if (shown.length === 0) {
+		return <p className="m-0 text-muted-foreground">Нет содержания</p>
+	}
+	return (
+		<ul className="m-0 list-none p-0">
+			{shown.map((h) => {
+				const isActive = h.slug === activeSlug
+				return (
+					<li key={h.slug} className={cn('m-0', h.depth === 3 && 'pl-3')}>
+						<a
+							href={`#${h.slug}`}
+							aria-current={isActive ? 'location' : undefined}
+							className={cn(
+								'block rounded px-2 py-1 no-underline hover:text-foreground',
+								isActive
+									? 'bg-accent font-medium text-foreground'
+									: 'text-muted-foreground',
+							)}
+						>
+							{h.text}
+						</a>
+					</li>
+				)
+			})}
+		</ul>
+	)
+}
+
+export default function Toc({ headings }: { headings: Heading[] }) {
+	const shown = tocHeadings(headings)
+
+	// "Smart sticky" via react-sticky-box: a short TOC pins below the TopBar and
+	// stays; a TOC taller than the viewport follows the page as you scroll and
+	// pins at whichever edge you scrolled away from (bottom on the way down, top
+	// on the way back up) so every item is reachable without an inner scrollbar.
+	// Plain CSS `position: sticky` can only pin one edge, which clipped tall TOCs.
+	//
+	// offsetTop is the 44px TopBar height (the bar is `sticky top-0 h-11`). The tab
+	// strip lives in the content column (col 2), NOT over this TOC column (col 3),
+	// so it never overlaps the TOC and the offset stays 44px whether tabs are open.
+	const stickyRef = useStickyBox({ offsetTop: 44, offsetBottom: 0 })
+
+	// The <aside> is the full-height TRACK: it spans both grid rows so its height
+	// equals the scroll area the sticky inner node travels within. The inner <div>
+	// (stickyRef) is what react-sticky-box positions.
+	//
+	// `!row-start-1` is important-flagged on purpose: the parent Outlet wrapper in
+	// root.tsx applies `[&>*]:row-start-2` to every child, and that descendant
+	// selector outranks a plain `xl:row-start-1` here — so without `!` the TOC
+	// would start in row 2 (below the tab strip) instead of spanning from row 1.
+	return (
+		<aside
+			id="toc"
+			className="hidden border-l xl:col-start-3 xl:row-span-2 xl:!row-start-1 xl:block"
+		>
+			<div ref={stickyRef} className="px-5 pb-6 pt-2 text-[0.8125rem]">
+				<h2 className="mb-2 mt-0 text-lg font-semibold text-foreground">{t('onThisPage')}</h2>
+				<TocLinks shown={shown} />
+			</div>
+		</aside>
+	)
+}

package/app/components/TopBar.tsx

@@ -0,0 +1,74 @@
+import { Keyboard } from 'lucide-react'
+
+import { ThemeToggle } from '~/components/theme-toggle'
+import { Search } from '~/components/Search'
+import ProjectSwitcher from '~/components/ProjectSwitcher'
+import { openShortcutsHelp } from '~/components/ShortcutsHelp'
+import { Button } from '~/components/ui/button'
+import { cn } from '~/lib/utils'
+import { site, t } from '~/lib/site'
+
+interface Props {
+	/** Active project id, or null when no project is selected (e.g. `/`). */
+	projectId: string | null
+}
+
+/**
+ * Slim top bar: logo + project switcher on the left, centered search, theme
+ * toggle on the right. Full-width and sticky at the top of the page: stays
+ * pinned while content scrolls beneath it, and the sidebar starts below it
+ * (so the bar overlaps neither the content nor the menu).
+ * Desktop only — mobile has its own bottom bar with the switcher and toggle.
+ */
+export default function TopBar({ projectId }: Props) {
+	return (
+		<div
+			className={cn(
+				'sticky top-0 z-50 flex h-11 items-center justify-between px-3 max-md:hidden',
+				'border-b bg-background',
+			)}
+		>
+			<div className="flex shrink-0 items-center gap-3">
+				<a href="/" className="flex shrink-0 items-center">
+					{/* Theme is class-based (<html class="dark">), driven by the in-app toggle —
+					    NOT prefers-color-scheme — so swap logos on the `dark` class, not the OS
+					    setting. The *-dark.svg has white text (for dark bg); *-light.svg has
+					    black text (for light bg). Inline height: app.css has an unlayered
+					    `img { height: auto }` rule that otherwise beats Tailwind's h-* utility. */}
+					<img
+						src={site.logo.light}
+						alt={site.title}
+						style={{ height: 20, width: 'auto' }}
+						className="block dark:hidden"
+					/>
+					<img
+						src={site.logo.dark}
+						alt={site.title}
+						style={{ height: 20, width: 'auto' }}
+						className="hidden dark:block"
+					/>
+				</a>
+				{/* Project selector sits just right of the logo. */}
+				<ProjectSwitcher activeId={projectId} />
+			</div>
+			{/* Centered search: absolutely positioned so it stays centered in the bar
+			    regardless of the logo / toggle widths on either side. */}
+			<div className="absolute left-1/2 -translate-x-1/2">
+				<Search className="w-full max-w-md justify-start sm:w-80 md:w-96" />
+			</div>
+			<div className="flex shrink-0 items-center">
+				{/* Opens the `?` cheatsheet — same overlay the `?` key toggles. */}
+				<Button
+					variant="ghost"
+					size="icon"
+					onClick={openShortcutsHelp}
+					aria-label={t('shortcuts')}
+					title={`${t('shortcuts')} (?)`}
+				>
+					<Keyboard />
+				</Button>
+				<ThemeToggle />
+			</div>
+		</div>
+	)
+}

package/app/components/theme-toggle.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react'
+import { Moon, Sun } from 'lucide-react'
+
+import { Button } from '~/components/ui/button'
+import { site, t } from '~/lib/site'
+
+const STORAGE_KEY = 'theme'
+
+/** Whether the site defaults to dark when the user hasn't picked a theme. */
+const DEFAULTS_DARK = site.defaultTheme !== 'light'
+
+/**
+ * Inline script injected into <head> (before paint) so the correct theme class
+ * is on <html> before first render — avoids a flash of the wrong theme. Uses the
+ * configured `site.defaultTheme` when nothing is stored.
+ */
+export const themeInitScript = `(function(){try{var t=localStorage.getItem('${STORAGE_KEY}');var d=t?t==='dark':${DEFAULTS_DARK};document.documentElement.classList.toggle('dark',d);}catch(e){document.documentElement.classList.${DEFAULTS_DARK ? 'add' : 'remove'}('dark');}})();`
+
+function getInitialIsDark(): boolean {
+	if (typeof document === 'undefined') return DEFAULTS_DARK
+	return document.documentElement.classList.contains('dark')
+}
+
+export function ThemeToggle({ className }: { className?: string }) {
+	// Render a stable icon during SSR/first paint; sync to the real DOM state
+	// after mount so the button reflects whatever the init script applied.
+	const [isDark, setIsDark] = useState(DEFAULTS_DARK)
+	const [mounted, setMounted] = useState(false)
+
+	useEffect(() => {
+		setMounted(true)
+		setIsDark(getInitialIsDark())
+	}, [])
+
+	function toggle() {
+		const next = !isDark
+		setIsDark(next)
+		// Suppress CSS transitions for the duration of the theme swap. Several
+		// elements (search input, project switcher, home cards, buttons) carry a
+		// `transition-colors`/`transition-all` for their hover states, which would
+		// otherwise also animate the color change on theme toggle — making them lag
+		// visibly behind the sidebar/content that have no transition. We add a
+		// global override that zeroes transitions, flip the class, force a reflow,
+		// then remove the override on the next frame so hovers animate normally again.
+		const root = document.documentElement
+		root.classList.add('theme-switching')
+		root.classList.toggle('dark', next)
+		// Force a synchronous style flush so the no-transition state is committed
+		// with the new colors before transitions are restored.
+		void root.offsetHeight
+		requestAnimationFrame(() => root.classList.remove('theme-switching'))
+		try {
+			localStorage.setItem(STORAGE_KEY, next ? 'dark' : 'light')
+		} catch {
+			/* ignore */
+		}
+	}
+
+	return (
+		<Button
+			variant="ghost"
+			size="icon"
+			className={className}
+			onClick={toggle}
+			aria-label={t('toggleTheme')}
+			title={t('toggleTheme')}
+		>
+			{mounted && !isDark ? <Sun /> : <Moon />}
+		</Button>
+	)
+}

package/app/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '~/lib/utils'
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+				destructive:
+					'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20',
+				outline:
+					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+)
+
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<'button'> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean
+	}) {
+	const Comp = asChild ? Slot : 'button'
+
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	)
+}
+
+export { Button, buttonVariants }

package/app/components/ui/card.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+
+import { cn } from '~/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn('leading-none font-semibold', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn('text-muted-foreground text-sm', className)}
+			{...props}
+		/>
+	)
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div data-slot="card-content" className={cn('px-6', className)} {...props} />
+}
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent }