npm - cantip - Versions diffs - 0.1.0 - Mend

cantip 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/LICENSE +21 -0
package/README.md +61 -0
package/app/components/CanvasMount.tsx +62 -0
package/app/components/CodeWrapToggle.tsx +78 -0
package/app/components/FindOnPage.tsx +224 -0
package/app/components/MobileBottomBar.tsx +93 -0
package/app/components/MobileProjectsPanel.tsx +113 -0
package/app/components/PageFloatingMenu.tsx +224 -0
package/app/components/ProjectSwitcher.tsx +124 -0
package/app/components/Search.tsx +930 -0
package/app/components/ShortcutsHelp.tsx +113 -0
package/app/components/Sidebar.tsx +1049 -0
package/app/components/TabBar.tsx +227 -0
package/app/components/Toc.tsx +129 -0
package/app/components/TopBar.tsx +74 -0
package/app/components/theme-toggle.tsx +71 -0
package/app/components/ui/button.tsx +56 -0
package/app/components/ui/card.tsx +55 -0
package/app/components/ui/dropdown-menu.tsx +156 -0
package/app/components/ui/input.tsx +21 -0
package/app/entry.client.tsx +12 -0
package/app/entry.server.tsx +155 -0
package/app/generated/site.ts +19 -0
package/app/generated/slots.ts +10 -0
package/app/generated/theme.generated.css +60 -0
package/app/lib/config/config.server.ts +50 -0
package/app/lib/config/defaults.ts +120 -0
package/app/lib/config/load.ts +82 -0
package/app/lib/config/schema.ts +131 -0
package/app/lib/config/site.ts +43 -0
package/app/lib/content.server.ts +105 -0
package/app/lib/projects.ts +86 -0
package/app/lib/sidebar.server.ts +113 -0
package/app/lib/site.ts +27 -0
package/app/lib/slots.tsx +33 -0
package/app/lib/tabs.tsx +128 -0
package/app/lib/useKeyboardShortcuts.ts +149 -0
package/app/lib/utils.ts +17 -0
package/app/root.tsx +171 -0
package/app/routes/$.tsx +158 -0
package/app/routes/_index.tsx +60 -0
package/app/styles/app.css +461 -0
package/app/styles/obsidian.css +83 -0
package/app/styles/tailwind.css +227 -0
package/cli.js +119 -0
package/components.json +21 -0
package/dist/config.mjs +87 -0
package/dist/generate-content.mjs +1665 -0
package/package.json +112 -0
package/scripts/build-search-index.ts +129 -0
package/scripts/canonical.ts +34 -0
package/scripts/canvas-to-md.ts +73 -0
package/scripts/compile.ts +242 -0
package/scripts/emit-config.ts +163 -0
package/scripts/generate-content.ts +197 -0
package/scripts/obsidian/files.ts +222 -0
package/scripts/obsidian/fs.ts +34 -0
package/scripts/obsidian/generate.ts +36 -0
package/scripts/obsidian/html.ts +17 -0
package/scripts/obsidian/logger.ts +10 -0
package/scripts/obsidian/markdown.ts +56 -0
package/scripts/obsidian/obsidian.ts +229 -0
package/scripts/obsidian/path.ts +60 -0
package/scripts/obsidian/rehype.ts +60 -0
package/scripts/obsidian/remark.ts +712 -0
package/scripts/obsidian/types.ts +31 -0
package/vite.config.ts +62 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Sedokina
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,61 @@
+# cantip
+A config-driven **Remix SSR documentation engine**. Ingest Obsidian vaults or
+plain markdown folders and get a fast docs site with a persistent sidebar, tabs,
+full-text search, dark/light theme, canvas rendering, and wikilinks — all driven
+by a single `docs.config.ts`. ("Cantip" — кантип — is Kyrgyz for "how (to)".)
+## Quick start
+```sh
+npm create cantip my-docs
+cd my-docs
+npm install
+npm run dev
+```
+Or add to an existing project:
+```sh
+npm install cantip
+```
+…then create a `docs.config.ts` and run `npx cantip dev`.
+## CLI
+| Command | What |
+| --- | --- |
+| `cantip generate` | Ingest sources + compile content from `docs.config.ts`. |
+| `cantip dev` | Generate, then start the dev server. |
+| `cantip build` | Generate, then build for production. |
+| `cantip start` | Serve the production build. |
+| `cantip typecheck` | Type-check the engine. |
+## Configure
+Everything lives in `docs.config.ts` (typed via `cantip/config`):
+```ts
+import { defineConfig } from 'cantip/config'
+export default defineConfig({
+  site: { title: 'My Docs', lang: 'en', defaultTheme: 'dark' },
+  // Loose markdown in ./docs, served at the root:
+  general: { enabled: true, source: './docs' },
+  // …or named projects, each a folder / submodule / any path:
+  // projects: [{ id: 'guide', name: 'Guide', source: './content/guide' }],
+  // theme: { colors: { dark: { '--brand': 'oklch(0.7 0.2 250)' } } },
+  // components: { Home: './app/MyHome.tsx' },
+})
+```
+- **Content sources** — submodule, loose folder, any path, or a `general` bucket
+  served at the root with no project concept.
+- **Branding** — title, description, logos, favicon, language, default theme.
+- **Theme** — `theme.colors` OKLCH tokens, no CSS edits.
+- **Components** — swap `Home` / `DocPage` / `TopBar` / `Toc` for your own `.tsx`.
+## License
+MIT

package/app/components/CanvasMount.tsx ADDED Viewed

@@ -0,0 +1,62 @@
+import { useEffect } from 'react'
+/** True when the app is currently in dark mode (the `.dark` class on <html>). */
+function isDark(): boolean {
+	return document.documentElement.classList.contains('dark')
+}
+/**
+ * Mounts any `[data-canvas-mount]` containers in the current page using the
+ * json-canvas-viewer library (loaded lazily, client-only). Re-runs whenever the
+ * given key changes (i.e. on each navigation) so freshly-rendered canvas pages
+ * get initialised. Ported 1:1 from the inline script in the old DocsLayout.astro.
+ *
+ * The viewer ships its own built-in `light`/`dark` palettes (background, cards,
+ * borders, dot grid, text) and defaults to `light`. We pass the current app
+ * theme on init and keep each mounted viewer in sync with the `.dark` class via
+ * a MutationObserver, so the canvas matches the rest of the site when the user
+ * toggles the theme.
+ */
+export default function CanvasMount({ deps }: { deps: string }) {
+	useEffect(() => {
+		let cancelled = false
+		const viewers: Array<{ changeTheme: (theme?: 'dark' | 'light') => void }> = []
+		const containers = document.querySelectorAll<HTMLElement>('[data-canvas-mount]')
+		if (containers.length === 0) return
+		;(async () => {
+			const { JSONCanvasViewer, parser, Minimap, Controls } = await import('json-canvas-viewer')
+			if (cancelled) return
+			const theme = isDark() ? 'dark' : 'light'
+			containers.forEach((container) => {
+				const dataEl = container.querySelector<HTMLScriptElement>('script[type="application/json"]')
+				if (!dataEl) return
+				const canvas = JSON.parse(dataEl.textContent || '{"nodes":[],"edges":[]}')
+				container.removeAttribute('data-canvas-mount')
+				container.innerHTML = ''
+				const viewer = new JSONCanvasViewer({ container, canvas, parser, theme }, [
+					Minimap,
+					Controls,
+				])
+				viewers.push(viewer)
+			})
+		})()
+		// Re-theme mounted viewers whenever the app toggles its `.dark` class.
+		const observer = new MutationObserver(() => {
+			const theme = isDark() ? 'dark' : 'light'
+			viewers.forEach((viewer) => viewer.changeTheme(theme))
+		})
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['class'],
+		})
+		return () => {
+			cancelled = true
+			observer.disconnect()
+		}
+	}, [deps])
+	return null
+}

package/app/components/CodeWrapToggle.tsx ADDED Viewed

@@ -0,0 +1,78 @@
+import { useEffect } from 'react'
+/**
+ * The document body HTML is rendered server-side and injected via
+ * `dangerouslySetInnerHTML`, so code blocks aren't React elements we can give a
+ * button declaratively. This component runs after each page render, wraps every
+ * `<pre>` in `.body` in a positioning shell, and injects a per-block toggle.
+ *
+ * Code blocks default to no-wrap with horizontal scroll; the toggle adds
+ * `.pre-wrap` to wrap long lines instead. The button lives on the shell (not
+ * inside the `<pre>`) so it stays pinned to the block's top-right corner and
+ * does not drift when the `<pre>` is scrolled horizontally.
+ *
+ * The preference is per-block and deliberately NOT persisted — it resets to
+ * no-wrap on reload/navigation. Re-runs whenever `deps` changes (pass the doc
+ * id) so freshly swapped-in content gets toggles too.
+ */
+const WRAP_ICON =
+	'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><path d="M3 12h15a3 3 0 0 1 0 6h-4"/><polyline points="16 16 14 18 16 20"/><line x1="3" y1="18" x2="10" y2="18"/></svg>'
+const NOWRAP_ICON =
+	'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>'
+const WRAP_LABEL = 'Переносить строки'
+const NOWRAP_LABEL = 'Не переносить строки'
+export function CodeWrapToggle({ deps }: { deps?: string }) {
+	useEffect(() => {
+		const blocks = document.querySelectorAll<HTMLPreElement>('.content .body pre')
+		const cleanups: Array<() => void> = []
+		blocks.forEach((pre) => {
+			// Guard against double-wrapping if the effect re-runs over DOM that
+			// React hasn't replaced (e.g. same content remounting).
+			if (pre.parentElement?.classList.contains('pre-wrap-shell')) return
+			const shell = document.createElement('div')
+			shell.className = 'pre-wrap-shell'
+			pre.replaceWith(shell)
+			shell.appendChild(pre)
+			const button = document.createElement('button')
+			button.type = 'button'
+			button.className = 'pre-wrap-toggle'
+			const sync = () => {
+				const wrapped = pre.classList.contains('pre-wrap')
+				// Icon shows the action the click performs (the OTHER state).
+				button.innerHTML = wrapped ? NOWRAP_ICON : WRAP_ICON
+				const label = wrapped ? NOWRAP_LABEL : WRAP_LABEL
+				button.setAttribute('aria-label', label)
+				button.title = label
+			}
+			const onClick = () => {
+				pre.classList.toggle('pre-wrap')
+				sync()
+			}
+			button.addEventListener('click', onClick)
+			sync()
+			shell.appendChild(button)
+			cleanups.push(() => {
+				button.removeEventListener('click', onClick)
+				// Unwrap: move the <pre> back out and drop the shell.
+				if (shell.parentElement) {
+					shell.replaceWith(pre)
+				}
+				button.remove()
+			})
+		})
+		return () => cleanups.forEach((fn) => fn())
+	}, [deps])
+	return null
+}

package/app/components/FindOnPage.tsx ADDED Viewed

@@ -0,0 +1,224 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ChevronDown, ChevronUp, Search as SearchIcon, X } from 'lucide-react'
+import { cn } from '~/lib/utils'
+/**
+ * In-page "find on this page" — a built-in replacement for the browser's Ctrl+F,
+ * aimed at mobile where the native find bar is awful (tiny, covers content, hard
+ * to dismiss). Searches only the article body (`article.content`), highlights
+ * every match, and lets the reader step through them with a running "3 / 12"
+ * count.
+ *
+ * Highlighting uses the CSS Custom Highlight API (`CSS.highlights` + the
+ * `::highlight()` pseudo, styled in app.css). That paints over Range objects
+ * WITHOUT mutating the DOM — essential here because the article HTML is injected
+ * via dangerouslySetInnerHTML and React owns nothing inside it; wrapping matches
+ * in <mark> would fight React and risk corrupting the content. Ranges are also
+ * cheap to discard, so clearing on close is a one-liner.
+ *
+ * Rendered (mobile-only) by the doc route; opened from the page floating menu.
+ */
+/** Highlight registry names — two layers so the current match reads differently. */
+const HL_ALL = 'find-all'
+const HL_CURRENT = 'find-current'
+/** Whether the browser supports the CSS Custom Highlight API we rely on. */
+function highlightSupported(): boolean {
+	return typeof CSS !== 'undefined' && 'highlights' in CSS && typeof Highlight !== 'undefined'
+}
+/** Drop both highlight layers from the global registry. */
+function clearHighlights() {
+	if (!highlightSupported()) return
+	CSS.highlights.delete(HL_ALL)
+	CSS.highlights.delete(HL_CURRENT)
+}
+/**
+ * Collect every text node under `root`, skipping ones inside <script>/<style>
+ * (never visible prose). Each node's full text is searched as one string.
+ */
+function textNodesIn(root: Node): Text[] {
+	const nodes: Text[] = []
+	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+		acceptNode(node) {
+			const parent = node.parentElement
+			if (!parent) return NodeFilter.FILTER_REJECT
+			const tag = parent.tagName
+			if (tag === 'SCRIPT' || tag === 'STYLE') return NodeFilter.FILTER_REJECT
+			// Skip pure-whitespace nodes — nothing matchable, keeps the walk lean.
+			if (!node.nodeValue || !node.nodeValue.trim()) return NodeFilter.FILTER_REJECT
+			return NodeFilter.FILTER_ACCEPT
+		},
+	})
+	let n = walker.nextNode()
+	while (n) {
+		nodes.push(n as Text)
+		n = walker.nextNode()
+	}
+	return nodes
+}
+/**
+ * Find every (case-insensitive) occurrence of `query` within the article and
+ * return a Range per match. Matches are confined to single text nodes — a query
+ * spanning element boundaries (e.g. across a <strong>) won't match, which is the
+ * normal, acceptable limitation for this kind of find.
+ */
+function findRanges(root: Element, query: string): Range[] {
+	const ranges: Range[] = []
+	if (!query) return ranges
+	const needle = query.toLowerCase()
+	for (const node of textNodesIn(root)) {
+		const haystack = (node.nodeValue ?? '').toLowerCase()
+		let from = 0
+		let idx = haystack.indexOf(needle, from)
+		while (idx !== -1) {
+			const range = document.createRange()
+			range.setStart(node, idx)
+			range.setEnd(node, idx + needle.length)
+			ranges.push(range)
+			from = idx + needle.length
+			idx = haystack.indexOf(needle, from)
+		}
+	}
+	return ranges
+}
+export default function FindOnPage({ onClose }: { onClose: () => void }) {
+	const [query, setQuery] = useState('')
+	const [ranges, setRanges] = useState<Range[]>([])
+	const [current, setCurrent] = useState(0)
+	const inputRef = useRef<HTMLInputElement>(null)
+	const supported = useMemo(highlightSupported, [])
+	// Focus the field on open so the reader can type straight away.
+	useEffect(() => {
+		inputRef.current?.focus()
+	}, [])
+	// Recompute matches whenever the query changes. Reset to the first match each
+	// time so the count + current highlight stay in sync with what's typed.
+	useEffect(() => {
+		if (!supported) return
+		const root = document.querySelector('article.content')
+		const q = query.trim()
+		const found = root && q ? findRanges(root, q) : []
+		setRanges(found)
+		setCurrent(0)
+	}, [query, supported])
+	// Paint the "all matches" layer whenever the match set changes, and the
+	// "current match" layer whenever the set OR the cursor changes. Two separate
+	// Highlight objects so the active match can be styled distinctly.
+	useEffect(() => {
+		if (!supported) return
+		if (ranges.length === 0) {
+			clearHighlights()
+			return
+		}
+		CSS.highlights.set(HL_ALL, new Highlight(...ranges))
+		const active = ranges[current]
+		if (active) CSS.highlights.set(HL_CURRENT, new Highlight(active))
+		else CSS.highlights.delete(HL_CURRENT)
+	}, [ranges, current, supported])
+	// Scroll the active match into view as the reader steps through.
+	useEffect(() => {
+		const active = ranges[current]
+		if (!active) return
+		// Range has no scrollIntoView; use its bounding rect's nearest element.
+		const target =
+			active.startContainer.parentElement ?? (active.commonAncestorContainer as Element | null)
+		target?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+	}, [ranges, current])
+	// Always clear highlights when the bar unmounts (close), so matches don't
+	// linger painted over the page after the reader is done.
+	useEffect(() => clearHighlights, [])
+	const step = useCallback(
+		(delta: number) => {
+			setCurrent((c) => {
+				if (ranges.length === 0) return 0
+				// Wrap around both ends so prev from the first lands on the last.
+				return (c + delta + ranges.length) % ranges.length
+			})
+		},
+		[ranges.length],
+	)
+	const onKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === 'Enter') {
+			e.preventDefault()
+			step(e.shiftKey ? -1 : 1)
+		} else if (e.key === 'Escape') {
+			e.preventDefault()
+			onClose()
+		}
+	}
+	const has = ranges.length > 0
+	const q = query.trim()
+	return (
+		<div
+			className={cn(
+				'fixed inset-x-3 bottom-[calc(env(safe-area-inset-bottom)+0.75rem)] z-[110] md:hidden',
+				'flex items-center gap-1 rounded-2xl border bg-sidebar/95 px-2 py-1.5 shadow-lg backdrop-blur',
+			)}
+			role="search"
+			aria-label="Найти на странице"
+		>
+			<SearchIcon className="size-4 shrink-0 text-muted-foreground" />
+			<input
+				ref={inputRef}
+				value={query}
+				onChange={(e) => setQuery(e.target.value)}
+				onKeyDown={onKeyDown}
+				placeholder="Найти на странице…"
+				className="h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+				autoComplete="off"
+				spellCheck={false}
+				enterKeyHint="search"
+			/>
+			{/* Match counter: "3 / 12", or "0" when nothing matches a non-empty query. */}
+			{q && (
+				<span className="shrink-0 px-1 text-xs tabular-nums text-muted-foreground">
+					{has ? `${current + 1} / ${ranges.length}` : '0'}
+				</span>
+			)}
+			<button
+				type="button"
+				onClick={() => step(-1)}
+				disabled={!has}
+				className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
+				aria-label="Предыдущее совпадение"
+			>
+				<ChevronUp className="size-4" />
+			</button>
+			<button
+				type="button"
+				onClick={() => step(1)}
+				disabled={!has}
+				className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40"
+				aria-label="Следующее совпадение"
+			>
+				<ChevronDown className="size-4" />
+			</button>
+			<button
+				type="button"
+				onClick={onClose}
+				className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+				aria-label="Закрыть поиск по странице"
+			>
+				<X className="size-4" />
+			</button>
+		</div>
+	)
+}

package/app/components/MobileBottomBar.tsx ADDED Viewed

@@ -0,0 +1,93 @@
+import { Home, FolderTree, LayoutGrid, Search as SearchIcon } from 'lucide-react'
+import { Link } from '@remix-run/react'
+import { Search } from '~/components/Search'
+import { t } from '~/lib/site'
+import { cn } from '~/lib/utils'
+interface Props {
+	/** Whether the directory (sidebar) overlay is open — drives the tab's active state. */
+	dirsOpen: boolean
+	/** Whether the fullscreen projects panel is open. */
+	projectsOpen: boolean
+	/** Whether there's a file tree to open. False with no active project (e.g. `/`),
+	 *  where the Files tab is disabled since there's nothing to show. */
+	filesEnabled: boolean
+	onToggleDirs: () => void
+	onToggleProjects: () => void
+}
+/** Shared classes for a tab: stacked icon + label, active = foreground colour. */
+const tab =
+	'flex flex-1 flex-col items-center justify-center gap-0.5 rounded-lg py-1.5 text-[0.625rem] font-medium text-muted-foreground transition-colors'
+const tabActive = 'text-foreground'
+/**
+ * Classic mobile floating bottom navigation: a detached, rounded pill anchored
+ * above the bottom safe area. Four tabs, in order — Home (link to `/`), Projects
+ * (the fullscreen project switcher, which also houses the theme toggle), Files
+ * (the desktop sidebar tree, opened as a mobile overlay), and Search (reuses the
+ * Pagefind Search modal). No standalone theme button — theme lives inside Projects.
+ *
+ * Only the floating-bar chrome lives here; the panels it toggles (sidebar overlay,
+ * projects panel) are rendered by the root so they can sit behind this bar.
+ */
+export default function MobileBottomBar({
+	dirsOpen,
+	projectsOpen,
+	filesEnabled,
+	onToggleDirs,
+	onToggleProjects,
+}: Props) {
+	return (
+		<nav
+			className={cn(
+				'fixed inset-x-3 bottom-[calc(env(safe-area-inset-bottom)+0.75rem)] z-100 md:hidden',
+				'flex items-stretch gap-1 rounded-2xl border bg-sidebar/95 px-1.5 py-1 shadow-lg backdrop-blur',
+			)}
+			aria-label="Навигация"
+		>
+			<Link to="/" className={tab} aria-label={t('home')}>
+				<Home className="size-5" />
+				<span>{t('home')}</span>
+			</Link>
+			<button
+				type="button"
+				onClick={onToggleProjects}
+				className={cn(tab, projectsOpen && tabActive)}
+				aria-label={t('projects')}
+				aria-expanded={projectsOpen}
+			>
+				<LayoutGrid className="size-5" />
+				<span>{t('projects')}</span>
+			</button>
+			<button
+				type="button"
+				onClick={onToggleDirs}
+				disabled={!filesEnabled}
+				className={cn(tab, dirsOpen && tabActive, 'disabled:pointer-events-none disabled:opacity-40')}
+				aria-label={t('files')}
+				aria-expanded={dirsOpen}
+			>
+				<FolderTree className="size-5" />
+				<span>{t('files')}</span>
+			</button>
+			{/* Reuse the Pagefind Search modal, but render our own stacked tab as its
+			    trigger so it matches the other tabs (icon over label). The desktop
+			    TopBar's instance owns ⌘K, so disable the shortcut here to avoid
+			    double-opening. */}
+			<Search
+				enableShortcut={false}
+				trigger={(open) => (
+					<button type="button" onClick={open} className={tab} aria-label={t('search')}>
+						<SearchIcon className="size-5" />
+						<span>{t('search')}</span>
+					</button>
+				)}
+			/>
+		</nav>
+	)
+}

package/app/components/MobileProjectsPanel.tsx ADDED Viewed

@@ -0,0 +1,113 @@
+import { useEffect } from 'react'
+import { useNavigate } from '@remix-run/react'
+import { Check, X } from 'lucide-react'
+import { getProjects, getProject, type Project } from '~/lib/projects'
+import { ThemeToggle } from '~/components/theme-toggle'
+import { t } from '~/lib/site'
+import { cn } from '~/lib/utils'
+/** Logo sized via inline style to win the unlayered `img{height:auto}` cascade. */
+function ProjectLogo({ project }: { project: Project }) {
+	return (
+		<img
+			src={project.logo}
+			alt=""
+			aria-hidden
+			width={24}
+			height={24}
+			style={{ height: 24, width: 24 }}
+			className="shrink-0 rounded"
+		/>
+	)
+}
+interface Props {
+	/** Id of the active project, or null when none is selected (e.g. `/`). */
+	activeId: string | null
+	open: boolean
+	onClose: () => void
+}
+/**
+ * Fullscreen mobile "side menu": the project list rendered as tappable items
+ * (not a dropdown), the active one ticked, plus a theme-toggle row at the bottom.
+ * Picking a project navigates to its landing doc — the root loader then re-derives
+ * the active project and swaps the sidebar. Lives above the floating bottom bar
+ * (which stays visible) so the Projects tab can re-tap to close. Self-contained
+ * Escape + body-scroll-lock, mirroring the Search/ProjectSwitcher pattern.
+ */
+export default function MobileProjectsPanel({ activeId, open, onClose }: Props) {
+	const navigate = useNavigate()
+	const projects = getProjects()
+	const active = activeId ? (getProject(activeId) ?? null) : null
+	// Escape closes; lock background scroll while open.
+	useEffect(() => {
+		if (!open) return
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') onClose()
+		}
+		document.addEventListener('keydown', onKey)
+		const prev = document.body.style.overflow
+		document.body.style.overflow = 'hidden'
+		return () => {
+			document.removeEventListener('keydown', onKey)
+			document.body.style.overflow = prev
+		}
+	}, [open, onClose])
+	if (!open) return null
+	const select = (p: Project) => {
+		onClose()
+		if (p.id !== active?.id) navigate(p.landing)
+	}
+	return (
+		// Sits below the floating bar (bottom inset clears it) so the bar's Projects
+		// tab stays tappable to toggle the panel shut.
+		<div className="fixed inset-x-0 bottom-0 top-0 z-90 flex flex-col bg-popover pb-[calc(var(--mobile-bar-height)+env(safe-area-inset-bottom)+3rem)] md:hidden">
+			<div className="flex shrink-0 items-center justify-between border-b px-4 py-3">
+				<span className="text-sm font-semibold text-foreground">{t('projects')}</span>
+				<button
+					type="button"
+					onClick={onClose}
+					className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+					aria-label={t('close')}
+				>
+					<X className="size-5" />
+				</button>
+			</div>
+			<ul className="min-h-0 flex-1 overflow-y-auto p-2">
+				{projects.map((p) => {
+					const isActive = p.id === active?.id
+					return (
+						<li key={p.id}>
+							<button
+								type="button"
+								onClick={() => select(p)}
+								className={cn(
+									'flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left',
+									'transition-colors hover:bg-sidebar-accent',
+									isActive && 'bg-sidebar-accent',
+								)}
+							>
+								<ProjectLogo project={p} />
+								<span className="min-w-0 flex-1 truncate text-base text-foreground">{p.name}</span>
+								{isActive && <Check className="size-5 shrink-0 text-foreground" />}
+							</button>
+						</li>
+					)
+				})}
+			</ul>
+			{/* Theme toggle row — a normal "settings" row at the bottom of the menu. */}
+			<div className="flex shrink-0 items-center justify-between border-t px-4 py-3">
+				<span className="text-sm text-foreground">Тема оформления</span>
+				<ThemeToggle className="text-muted-foreground" />
+			</div>
+		</div>
+	)
+}