cantip 0.1.0

package/app/lib/config/schema.ts

@@ -0,0 +1,131 @@
+/**
+ * `DocsConfig` — the single source of truth a user authors in `docs.config.ts`.
+ *
+ * Both the build pipeline (`scripts/*`) and the running app (`app/lib/*.server`,
+ * route loaders, components via `getConfig()`) read the SAME resolved config, so
+ * a value defined once flows everywhere. Authored values are partial; every field
+ * has a default (see `defaults.ts`) so omitting a key reproduces the original
+ * hardcoded behavior of this project.
+ *
+ * Validated with zod (already a dependency). The exported `defineConfig` is just
+ * an identity helper that gives users autocomplete + type-checking on the literal
+ * they write; actual validation/defaulting happens in `loadConfig` (`load.ts`).
+ */
+import { z } from 'zod'
+
+/** A theme color map: token name → CSS color value (typically OKLCH). */
+const colorMap = z.record(z.string(), z.string())
+
+/**
+ * A content source = one project = one Obsidian-style vault directory. Maps onto
+ * the first path segment of every doc id it produces (`output`/`id`), exactly as
+ * before. `source` may be a git submodule path, a loose content folder, or any
+ * relative/absolute path — the generator just globs it.
+ */
+export const projectSchema = z.object({
+	/** First id segment + output dir name, e.g. `krista`. */
+	id: z.string().min(1),
+	/** Display name in the switcher / home cards. */
+	name: z.string().min(1),
+	/** Directory of markdown/canvas files. Submodule, loose folder, or any path. */
+	source: z.string().min(1),
+	/** Logo under the user's `/public`. Defaults to `/projects/<id>.svg`. */
+	logo: z.string().optional(),
+	/** Landing URL when switching to this project. Defaults to its first doc. */
+	landing: z.string().optional(),
+	/** Short blurb, reused on home cards. */
+	description: z.string().default(''),
+	/** Ingest `.canvas` files from this source too. */
+	canvas: z.boolean().default(false),
+	/** Globs (relative to `source`) to skip, e.g. `['CLAUDE.md']`. */
+	ignore: z.array(z.string()).default([]),
+})
+
+/** The "no project" bucket: docs not under any named project, served at root. */
+export const generalSchema = z.object({
+	enabled: z.boolean().default(false),
+	name: z.string().default('Без проекта'),
+	/** Directory of loose docs. When unset, the bucket has no docs. */
+	source: z.string().optional(),
+	logo: z.string().default('/projects/general.svg'),
+	description: z.string().default(''),
+	ignore: z.array(z.string()).default([]),
+})
+
+export const siteSchema = z.object({
+	title: z.string().default('Docs'),
+	/** Home-page blurb under the title. */
+	description: z.string().default(''),
+	/** BCP-47-ish tag; drives `localeCompare` sorting + Pagefind `forceLanguage`. */
+	lang: z.string().default('ru'),
+	favicon: z.string().default('/favicon.svg'),
+	logo: z
+		.object({
+			light: z.string().default('/iti-logo-light.svg'),
+			dark: z.string().default('/iti-logo-dark.svg'),
+		})
+		.prefault({}),
+	defaultTheme: z.enum(['dark', 'light']).default('dark'),
+})
+
+export const themeSchema = z.object({
+	/** OKLCH (or any CSS color) token overrides, merged OVER the shipped defaults. */
+	colors: z
+		.object({
+			light: colorMap.default({}),
+			dark: colorMap.default({}),
+		})
+		.prefault({}),
+})
+
+/**
+ * Component override slots: slot name → path (relative to the user's project) of a
+ * `.tsx` exporting a default component that replaces the engine's. Unset slots use
+ * the engine default. Resolved by `app/lib/slots.ts`.
+ */
+export const componentsSchema = z
+	.object({
+		Home: z.string().optional(),
+		DocPage: z.string().optional(),
+		Sidebar: z.string().optional(),
+		TopBar: z.string().optional(),
+		Toc: z.string().optional(),
+		Search: z.string().optional(),
+		Layout: z.string().optional(),
+	})
+	.default({})
+
+/**
+ * UI string overrides. Keys mirror the catalogued in-app literals; defaults ship
+ * per `site.lang` (see `defaults.ts`). Partial — unset keys fall back to defaults.
+ */
+export const uiSchema = z.record(z.string(), z.string()).default({})
+
+export const docsConfigSchema = z.object({
+	site: siteSchema.prefault({}),
+	projects: z.array(projectSchema).default([]),
+	general: generalSchema.prefault({}),
+	theme: themeSchema.prefault({}),
+	components: componentsSchema,
+	ui: uiSchema,
+	/**
+	 * Reserved for custom remark/rehype plugins + callout types. NOT wired in this
+	 * phase (the markdown pipeline stays fixed); accepted so configs are
+	 * forward-compatible.
+	 */
+	markdown: z.unknown().optional(),
+})
+
+/** Authored (input) shape — what a user writes; most fields optional. */
+export type DocsUserConfig = z.input<typeof docsConfigSchema>
+/** Resolved (output) shape — every field present, used everywhere internally. */
+export type DocsConfig = z.output<typeof docsConfigSchema>
+export type ProjectConfig = z.output<typeof projectSchema>
+
+/**
+ * Identity helper for `docs.config.ts` authors: gives editor autocomplete and
+ * type errors on the literal. Validation + defaulting happen in `loadConfig`.
+ */
+export function defineConfig(config: DocsUserConfig): DocsUserConfig {
+	return config
+}

package/app/lib/config/site.ts

@@ -0,0 +1,43 @@
+/**
+ * The client-safe site shape.
+ *
+ * The build pipeline emits `app/generated/site.ts` (a plain-literal module)
+ * conforming to `GeneratedSite`. Unlike `config.json` (read via `fs` in
+ * `.server` code), this module is IMPORTED, so Vite bundles it into BOTH the
+ * client and server bundles — letting client components (`ProjectSwitcher`,
+ * `_index`, `Search`, `MobileProjectsPanel`) read projects/branding/ui strings
+ * synchronously with no runtime file access.
+ *
+ * It intentionally carries only the serializable, non-sensitive subset of the
+ * config (no theme CSS, no markdown plugins). The seed file shipped in the repo
+ * is overwritten on every `generate`.
+ */
+
+export interface SiteProject {
+	id: string
+	name: string
+	logo: string
+	/** Landing URL; resolved to the project's first doc at generate time when unset. */
+	landing: string
+	description: string
+}
+
+export interface GeneratedSite {
+	site: {
+		title: string
+		description: string
+		lang: string
+		favicon: string
+		logo: { light: string; dark: string }
+		defaultTheme: 'dark' | 'light'
+	}
+	projects: SiteProject[]
+	general: {
+		enabled: boolean
+		id: string
+		name: string
+		logo: string
+		description: string
+	}
+	ui: Record<string, string>
+}

package/app/lib/content.server.ts

@@ -0,0 +1,105 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+
+export interface DocIndexEntry {
+	id: string
+	title: string | null
+	draft: boolean
+	tableOfContents: boolean
+	tags: string[]
+	isCanvas: boolean
+}
+
+export interface Heading {
+	depth: number
+	slug: string
+	text: string
+}
+
+export interface Doc {
+	id: string
+	frontmatter: Record<string, unknown>
+	headings: Heading[]
+	html: string
+}
+
+// The generated manifest lives at <project>/app/generated and is read at runtime
+// from the working directory (it is not bundled into the server build, so we
+// resolve it from cwd rather than relative to this compiled module).
+const GENERATED_DIR = path.join(process.cwd(), 'app', 'generated')
+
+let indexCache: DocIndexEntry[] | null = null
+let permalinkCache: { toId: Record<string, string>; toPermalink: Record<string, string> } | null = null
+
+/**
+ * Load the permalink map (built at generate time from each doc's `permalink`
+ * frontmatter). Keys and values are normalized id-style paths with no leading
+ * or trailing slashes, matching how the route loader strips request paths.
+ * Returns both directions: permalink→id (to serve) and id→permalink (so a
+ * file-path request can redirect to its canonical permalink).
+ */
+async function getPermalinks() {
+	if (!permalinkCache) {
+		let toId: Record<string, string> = {}
+		try {
+			const raw = await fs.readFile(path.join(GENERATED_DIR, 'permalinks.json'), 'utf8')
+			toId = JSON.parse(raw) as Record<string, string>
+		} catch {
+			toId = {} // no permalinks defined → empty map
+		}
+		const toPermalink: Record<string, string> = {}
+		for (const [permalink, id] of Object.entries(toId)) {
+			// If a doc has several permalinks, the first wins as its canonical URL.
+			if (!toPermalink[id]) toPermalink[id] = permalink
+		}
+		permalinkCache = { toId, toPermalink }
+	}
+	return permalinkCache
+}
+
+/** The doc id a permalink points at, or null if the path is not a permalink. */
+export async function resolvePermalink(pathSlug: string): Promise<string | null> {
+	const { toId } = await getPermalinks()
+	return toId[pathSlug] ?? null
+}
+
+/** The canonical permalink for a doc id, or null if the doc has none. */
+export async function getPermalinkForId(id: string): Promise<string | null> {
+	const { toPermalink } = await getPermalinks()
+	return toPermalink[id] ?? null
+}
+
+/**
+ * The canonical URL for a doc id: its permalink URL when it has one, else its
+ * file-path URL `/{id}/`. Used by link emitters (e.g. the sidebar) so internal
+ * links point straight at the permalink instead of taking a 301 redirect.
+ */
+export async function getCanonicalUrl(id: string): Promise<string> {
+	const permalink = await getPermalinkForId(id)
+	return permalink ? `/${permalink}/` : `/${id}/`
+}
+
+/** All non-draft docs from the generated index (cached for the process). */
+export async function getAllDocs(): Promise<DocIndexEntry[]> {
+	if (!indexCache) {
+		const raw = await fs.readFile(path.join(GENERATED_DIR, 'index.json'), 'utf8')
+		indexCache = JSON.parse(raw) as DocIndexEntry[]
+	}
+	return indexCache.filter((d) => !d.draft)
+}
+
+/** Load a single compiled doc by its route id (e.g. "krista/глоссарий/коллекция"). */
+export async function getDoc(id: string): Promise<Doc | null> {
+	// Guard against path traversal: ids are slugified, so no "." segments.
+	const safe = id
+		.split('/')
+		.filter((s) => s && s !== '.' && s !== '..')
+		.join('/')
+	if (!safe) return null
+	try {
+		const raw = await fs.readFile(path.join(GENERATED_DIR, 'docs', `${safe}.json`), 'utf8')
+		return JSON.parse(raw) as Doc
+	} catch {
+		return null
+	}
+}

package/app/lib/projects.ts

@@ -0,0 +1,86 @@
+/**
+ * Project registry — the runtime/UI layer over the generated site data.
+ *
+ * A "project" maps onto the **first path segment** of every doc `id`
+ * (e.g. `krista-partners/о-проекте/...` → project `krista-partners`), which in
+ * turn is one content source (one git submodule / loose folder, see
+ * `docs.config.ts` → `scripts/generate-content.ts`). Nothing here touches the
+ * build pipeline; it reads the already-generated `app/generated/site.ts`.
+ *
+ * That module is plain literals bundled by Vite, so this file is ISOMORPHIC —
+ * safe to import from client components (`ProjectSwitcher`, `_index`, `Search`,
+ * `MobileProjectsPanel`) and from server code (`root.tsx`, `sidebar.server`)
+ * alike, with no runtime file access. The project list, branding, and labels all
+ * come from the user's `docs.config.ts` via the generator.
+ *
+ * The active project is derived from the URL (see `getActiveProjectId`), so it's
+ * SSR-friendly, shareable, and survives reload with no extra client state.
+ */
+import { SITE } from '~/generated/site'
+
+export interface Project {
+	/** Matches the first segment of a doc id, e.g. `krista-partners`. */
+	id: string
+	/** Display name shown in the switcher. */
+	name: string
+	/** Logo path under /public. */
+	logo: string
+	/** Where "switch to this project" navigates (its landing doc). */
+	landing: string
+	/** Short blurb, reused on the home page cards. */
+	description: string
+}
+
+/** Id of the built-in pseudo-project for docs that aren't under a known vault. */
+export const GENERAL_PROJECT_ID = 'general'
+
+/** The named projects, from the generated site data (authored in docs.config.ts). */
+export const PROJECTS: Project[] = SITE.projects.map((p) => ({
+	id: p.id,
+	name: p.name,
+	logo: p.logo,
+	landing: p.landing,
+	description: p.description,
+}))
+
+/** The pseudo-project that owns any doc not under a known project. */
+export const GENERAL_PROJECT: Project = {
+	id: GENERAL_PROJECT_ID,
+	name: SITE.general.name,
+	logo: SITE.general.logo,
+	landing: '/',
+	description: SITE.general.description,
+}
+
+/**
+ * All projects shown in the switcher. The `general` bucket is appended only when
+ * it is enabled AND actually has docs (the generator sets `general.enabled`
+ * accordingly), matching the prior behavior.
+ */
+export function getProjects(): Project[] {
+	return SITE.general.enabled ? [...PROJECTS, GENERAL_PROJECT] : PROJECTS
+}
+
+const byId = new Map<string, Project>([...PROJECTS, GENERAL_PROJECT].map((p) => [p.id, p]))
+
+/** The project a doc belongs to, from its first id segment. Unknown → `general`. */
+export function getProjectIdForDoc(docId: string): string {
+	const first = docId.split('/')[0] ?? ''
+	return byId.has(first) && first !== GENERAL_PROJECT_ID ? first : GENERAL_PROJECT_ID
+}
+
+/** Look up a project by id (incl. `general`). */
+export function getProject(id: string): Project | undefined {
+	return byId.get(id)
+}
+
+/**
+ * Active project derived from a request pathname. The first non-empty segment is
+ * the project id, or `null` when the path names no known project (e.g. on `/`),
+ * so the home page can render with no project selected and no sidebar.
+ */
+export function getActiveProjectId(pathname: string): string | null {
+	const first = decodeURIComponent(pathname).split('/').filter(Boolean)[0] ?? ''
+	if (byId.has(first) && first !== GENERAL_PROJECT_ID) return first
+	return null
+}

package/app/lib/sidebar.server.ts

@@ -0,0 +1,113 @@
+import { getAllDocs, getCanonicalUrl, type DocIndexEntry } from './content.server'
+import { getProjectIdForDoc } from './projects'
+
+export type SidebarNodeType = 'directory' | 'file' | 'canvas' | 'image'
+
+export interface SidebarNode {
+	label: string
+	href?: string
+	nodeType: SidebarNodeType
+	children: SidebarNode[]
+}
+
+function prettify(slug: string): string {
+	const cleaned = decodeURIComponent(slug).replace(/-/g, ' ')
+	return cleaned.charAt(0).toUpperCase() + cleaned.slice(1)
+}
+
+function detectNodeType(entry: DocIndexEntry): SidebarNodeType {
+	if (entry.isCanvas) return 'canvas'
+	return 'file'
+}
+
+interface BuildNode {
+	label: string
+	href?: string
+	nodeType?: SidebarNodeType
+	childMap: Map<string, BuildNode>
+}
+
+/**
+ * Build the sidebar tree for a **single project**. Only docs belonging to
+ * `projectId` (by their first id segment, see `getProjectIdForDoc`) are included,
+ * and that leading project segment is dropped from the tree — the project's own
+ * folders sit at the top level, since the project switcher already names the
+ * project. Hrefs keep the full id so navigation still resolves.
+ */
+export async function buildSidebar(projectId: string): Promise<SidebarNode[]> {
+	const docs = await getAllDocs()
+	const rootMap = new Map<string, BuildNode>()
+
+	for (const entry of docs) {
+		if (getProjectIdForDoc(entry.id) !== projectId) continue
+
+		// Strip the leading project segment; the remaining segments form the tree.
+		const segments = entry.id.split('/').slice(1)
+		if (segments.length === 0) continue
+		let current = rootMap
+
+		for (let i = 0; i < segments.length; i++) {
+			const seg = segments[i]!
+			const isLast = i === segments.length - 1
+
+			if (!current.has(seg)) {
+				current.set(seg, {
+					label: isLast ? (entry.title ?? prettify(seg)) : prettify(seg),
+					childMap: new Map(),
+				})
+			}
+
+			const node = current.get(seg)!
+
+			if (isLast) {
+				// Canonical URL → permalink when the doc has one, else /{id}/.
+				node.href = await getCanonicalUrl(entry.id)
+				node.label = entry.title ?? prettify(seg)
+				node.nodeType = detectNodeType(entry)
+			}
+
+			current = node.childMap
+		}
+	}
+
+	return mapToNodes(rootMap)
+}
+
+function mapToNodes(map: Map<string, BuildNode>): SidebarNode[] {
+	return Array.from(map.entries()).map(([, val]) => {
+		const children = mapToNodes(val.childMap).sort((a, b) => a.label.localeCompare(b.label, 'ru'))
+		return {
+			label: val.label,
+			href: val.href,
+			nodeType: val.nodeType ?? (children.length > 0 ? 'directory' : 'file'),
+			children,
+		}
+	})
+}
+
+export interface FlatSidebarItem {
+	name: string
+	href?: string
+	type: SidebarNodeType
+	children: string[]
+}
+
+export type FlatSidebarMap = Record<string, FlatSidebarItem>
+
+/** Flatten the tree into the id-keyed map shape the headless-tree sidebar consumes. */
+export function flattenSidebar(nodes: SidebarNode[]): FlatSidebarMap {
+	const map: FlatSidebarMap = {}
+	let counter = 0
+
+	function walk(node: SidebarNode): string {
+		const id = `n${counter++}`
+		const childIds = node.children.map((child) => walk(child))
+		map[id] = { name: node.label, href: node.href, type: node.nodeType, children: childIds }
+		return id
+	}
+
+	const rootChildIds = nodes.map((node) => walk(node))
+	map['root'] = { name: 'Root', type: 'directory', children: rootChildIds }
+
+	return map
+}

package/app/lib/site.ts

@@ -0,0 +1,27 @@
+/**
+ * Isomorphic accessors for site branding + UI strings.
+ *
+ * Thin ergonomic layer over the generated `~/generated/site` module (plain
+ * literals bundled by Vite, safe on client + server). Components import `site`
+ * for branding (title, logos, favicon) and `t(key)` for localized UI strings
+ * instead of reaching into the generated shape directly — so the generated
+ * contract can evolve without touching call sites.
+ */
+import { SITE } from '~/generated/site'
+
+/** Site branding/meta (title, description, lang, favicon, logos, default theme). */
+export const site = SITE.site
+
+/**
+ * A localized UI string by key (see `app/lib/config/defaults.ts` for the
+ * catalogue). Falls back to the key itself if missing, so a typo is visible
+ * rather than rendering blank.
+ */
+export function t(key: string): string {
+	return SITE.ui[key] ?? key
+}
+
+/** The page `<title>` for a doc: `"<docTitle> — <siteTitle>"`, or just the site title. */
+export function pageTitle(docTitle?: string | null): string {
+	return docTitle ? `${docTitle} — ${site.title}` : site.title
+}

package/app/lib/slots.tsx

@@ -0,0 +1,33 @@
+/**
+ * Component override slots.
+ *
+ * The generated `~/generated/slots` module exports each slot as either the user's
+ * override component (from `docs.config.ts` `components`) or `null`. This module
+ * pairs those with the engine defaults and exposes the resolved component each
+ * call site should render — so route/layout code imports from here and never
+ * needs to know whether an override exists.
+ *
+ * - `TopBar` / `Toc` are sub-components: resolved to override-or-default here, so
+ *   `root.tsx` / `$.tsx` import the resolved component directly.
+ * - `Home` / `DocPage` are route bodies: exposed as the override-or-null
+ *   `HomeOverride` / `DocPageOverride`, since the route file owns its own default
+ *   body (importing the engine route component here would be circular).
+ *
+ * To add a slot, expose the component on the generated module + map it here.
+ */
+import * as overrides from '~/generated/slots'
+
+import DefaultTopBar from '~/components/TopBar'
+import DefaultToc from '~/components/Toc'
+
+/** Top bar (logo + switcher + search + toggle). Override or engine default. */
+export const TopBar = overrides.TopBar ?? DefaultTopBar
+
+/** Right-column table of contents. Override or engine default. */
+export const Toc = overrides.Toc ?? DefaultToc
+
+/** Home page body override, or null to use the engine's default home route body. */
+export const HomeOverride = overrides.Home
+
+/** Doc page body override, or null to use the engine's default doc route body. */
+export const DocPageOverride = overrides.DocPage

package/app/lib/tabs.tsx

@@ -0,0 +1,128 @@
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react'
+
+/**
+ * Editor-style tabs (VS Code feel) layered over Remix navigation. The URL stays
+ * the source of truth for which doc is shown (route `$.tsx` renders it); this
+ * context only tracks the *list* of open tabs and which actions add/remove them.
+ *
+ * Tabs are client-only state, persisted to localStorage **scoped per project**
+ * (key `tabs:<projectId>`). The provider is mounted in `root.tsx` above the
+ * `<Outlet/>` so both the sidebar (which opens tabs) and the `TabBar` (which
+ * renders them) can read/update the same list.
+ */
+
+export interface Tab {
+	/** Doc href, e.g. "/krista/глоссарий/коллекция/" — also the navigation target. */
+	path: string
+	/** Display label (the sidebar item name). */
+	title: string
+}
+
+interface TabsContextValue {
+	tabs: Tab[]
+	/** Add a tab (de-duped by normalised path). No-op if already open. */
+	openTab: (path: string, title: string) => void
+	/** Remove a tab by path. Returns the neighbor to activate, or null if none/irrelevant. */
+	closeTab: (path: string) => void
+	/** Close every open tab. */
+	closeAll: () => void
+	/** Whether any tabs are open — drives the sidebar single-click rule + bar visibility. */
+	hasTabs: boolean
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null)
+
+/** Normalise a path for comparison/de-dupe: decoded, no trailing slash. Mirrors Sidebar.normPath. */
+export function normTabPath(p?: string): string {
+	if (!p) return ''
+	try {
+		return decodeURIComponent(p).replace(/\/+$/, '')
+	} catch {
+		return p.replace(/\/+$/, '')
+	}
+}
+
+const storageKey = (projectId: string) => `tabs:${projectId}`
+
+export function TabsProvider({
+	projectId,
+	children,
+}: {
+	/** Active project, or null on pages with no project (e.g. `/`). */
+	projectId: string | null
+	children: React.ReactNode
+}) {
+	// Start empty so SSR and the first client render match; load from
+	// localStorage after mount (same hydration-safe pattern as the sidebar tree).
+	const [tabs, setTabs] = useState<Tab[]>([])
+	const [loaded, setLoaded] = useState(false)
+
+	// Load this project's tabs whenever the active project changes. With no active
+	// project (e.g. `/`) there are no tabs — keep the list empty and skip storage.
+	useEffect(() => {
+		if (!projectId) {
+			setTabs([])
+			setLoaded(false)
+			return
+		}
+		setLoaded(false)
+		try {
+			const raw = localStorage.getItem(storageKey(projectId))
+			const parsed = raw ? (JSON.parse(raw) as Tab[]) : []
+			setTabs(
+				Array.isArray(parsed)
+					? parsed.filter((t) => t && typeof t.path === 'string' && typeof t.title === 'string')
+					: [],
+			)
+		} catch {
+			setTabs([])
+		}
+		setLoaded(true)
+	}, [projectId])
+
+	// Persist on change (only after the initial load, so we don't clobber stored
+	// tabs with the empty initial state before the load effect has run).
+	useEffect(() => {
+		if (!loaded || !projectId) return
+		try {
+			localStorage.setItem(storageKey(projectId), JSON.stringify(tabs))
+		} catch {
+			/* ignore quota/availability errors */
+		}
+	}, [tabs, projectId, loaded])
+
+	const openTab = useCallback((path: string, title: string) => {
+		setTabs((prev) => {
+			const norm = normTabPath(path)
+			if (prev.some((t) => normTabPath(t.path) === norm)) return prev
+			return [...prev, { path, title }]
+		})
+	}, [])
+
+	const closeTab = useCallback((path: string) => {
+		const norm = normTabPath(path)
+		setTabs((prev) => prev.filter((t) => normTabPath(t.path) !== norm))
+	}, [])
+
+	const closeAll = useCallback(() => setTabs([]), [])
+
+	const value = useMemo<TabsContextValue>(
+		() => ({ tabs, openTab, closeTab, closeAll, hasTabs: tabs.length > 0 }),
+		[tabs, openTab, closeTab, closeAll],
+	)
+
+	return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>
+}
+
+export function useTabs(): TabsContextValue {
+	const ctx = useContext(TabsContext)
+	if (!ctx) throw new Error('useTabs must be used within a TabsProvider')
+	return ctx
+}