@tomehq/theme 0.3.1 → 0.3.2

package/dist/{chunk-YXKONM3A.js → chunk-2AXAEADQ.js}

@@ -3,7 +3,7 @@ import { useState as useState3, useEffect as useEffect3, useCallback as useCallb
 import { createRoot } from "react-dom/client";
 
 // src/Shell.tsx
-import { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
+import React2, { useState as useState2, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
 
 // src/presets.ts
 var THEME_PRESETS = {
@@ -711,6 +711,20 @@ function AlgoliaSearchModal({
 var VersionIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z", size: 14 });
 var GlobeIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM3.6 9h16.8M3.6 15h16.8M12 3a15 15 0 0 1 4 9 15 15 0 0 1-4 9 15 15 0 0 1-4-9 15 15 0 0 1 4-9Z", size: 14 });
 var ExtLinkIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3", size: 11 });
+var SOCIAL_ICON_PATHS = {
+  github: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z",
+  twitter: "M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z",
+  discord: "M13.545 2.907a13.227 13.227 0 00-3.257-1.011.05.05 0 00-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 00-3.658 0 8.258 8.258 0 00-.412-.833.051.051 0 00-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 00-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 003.995 2.02.05.05 0 00.056-.019c.308-.42.582-.863.818-1.329a.05.05 0 00-.028-.07 8.735 8.735 0 01-1.248-.595.05.05 0 01-.005-.083c.084-.063.168-.129.248-.195a.05.05 0 01.051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 01.053.007c.08.066.164.132.248.195a.051.051 0 01-.004.085c-.399.232-.813.431-1.249.594a.05.05 0 00-.03.07c.24.465.515.909.817 1.329a.05.05 0 00.056.019 13.235 13.235 0 004.001-2.02.049.049 0 00.021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 00-.02-.019z",
+  linkedin: "M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 01.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z",
+  youtube: "M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 011.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 01-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 01-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 010 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 011.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 017.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z",
+  mastodon: "M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765 2.79.765.504 1.783.504 5.253c-.005.995-.01 2.19.013 3.44.075 4.21.56 8.354 3.383 9.386 1.302.476 2.418.576 3.317.507 1.628-.125 2.541-.8 2.541-.8l-.054-1.182s-1.163.366-2.47.322c-1.293-.044-2.658-.138-2.867-1.716a3.23 3.23 0 01-.028-.465s1.27.31 2.879.384c.984.045 1.905-.058 2.842-.17zM13 8.59V5.319c0-.67-.17-1.2-.507-1.592-.348-.4-.806-.605-1.373-.605-.656 0-1.154.252-1.486.756L9.2 4.595l-.434-.717c-.332-.504-.83-.756-1.486-.756-.567 0-1.025.204-1.373.605-.338.392-.507.923-.507 1.592V8.59h1.69V5.468c0-.67.285-1.012.855-1.012.63 0 .946.404.946 1.204V7.11h1.682V5.66c0-.8.316-1.204.946-1.204.57 0 .855.342.855 1.012V8.59H13z",
+  bluesky: "M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.724-1.498 2.697-4.29 4.532-5.668C13.855 1.013 16 .638 16 3.14c0 .5-.286 4.2-.454 4.8-.585 2.093-2.716 2.628-4.544 2.305 3.195.564 4.007 2.433 2.25 4.302-3.337 3.548-4.8-1.244-5.252-2.547 0 0-.116-.334-.166-.334h.332C8.166 11.666 8.05 12 8.05 12c-.452 1.303-1.916 6.095-5.252 2.547-1.756-1.869-.946-3.738 2.25-4.302-1.829.323-3.96-.212-4.544-2.305C.336 7.34.05 3.64.05 3.14.05.638 2.195 1.013 3.468 1.948z"
+};
+var SocialIcon = ({ platform, customIcon }) => {
+  const d = platform === "custom" && customIcon ? customIcon : SOCIAL_ICON_PATHS[platform];
+  if (!d) return null;
+  return /* @__PURE__ */ jsx2("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d }) });
+};
 var CHANGELOG_SECTION_COLORS = {
   Added: "#22c55e",
   Changed: "#3b82f6",
@@ -773,6 +787,23 @@ function ChangelogView({ entries }) {
     ) })
   ] });
 }
+function getBreadcrumbs(navigation2, currentPageId, pageTitle) {
+  if (currentPageId === "index") return [];
+  for (const section of navigation2) {
+    const found = section.pages.find((p) => p.id === currentPageId);
+    if (found) {
+      const crumbs = [];
+      const firstPage = section.pages[0];
+      crumbs.push({
+        label: section.section,
+        href: firstPage ? firstPage.urlPath : null
+      });
+      crumbs.push({ label: pageTitle, href: null });
+      return crumbs;
+    }
+  }
+  return [];
+}
 function Shell({
   config: config2,
   navigation: navigation2,
@@ -791,11 +822,17 @@ function Shell({
   allPages,
   versioning,
   currentVersion,
-  i18n,
+  i18n: i18n2,
   currentLocale,
   docContext: docContext2,
-  basePath: basePath2 = ""
+  basePath: basePath2 = "",
+  isDraft,
+  dir: dirProp,
+  overrides: overrides2
 }) {
+  const resolvedLocale = currentLocale || i18n2?.defaultLocale || "en";
+  const dir = dirProp || i18n2?.localeDirs?.[resolvedLocale] || "ltr";
+  const isRtl = dir === "rtl";
   const themeMode = config2.theme?.mode || "auto";
   const [isDark, setDark] = useState2(() => {
     if (themeMode === "dark") return true;
@@ -988,6 +1025,7 @@ function Shell({
   const idx = allNavPages.findIndex((p) => p.id === currentPageId);
   const prev = idx > 0 ? allNavPages[idx - 1] : null;
   const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : null;
+  const breadcrumbs = getBreadcrumbs(navigation2, currentPageId, pageTitle);
   const togSec = (s) => setExpanded((p) => p.includes(s) ? p.filter((x) => x !== s) : [...p, s]);
   const cssVars = {
     "--bg": t.bg,
@@ -1011,7 +1049,7 @@ function Shell({
   const PageComponent = pageComponent;
   const bannerLink = config2.banner?.link;
   const bannerIsInternal = bannerLink ? bannerLink.startsWith("#") || basePath2 && bannerLink.startsWith(basePath2 + "/") : false;
-  return /* @__PURE__ */ jsxs2("div", { className: "tome-grain", style: { ...cssVars, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", minHeight: "100vh", overflow: "hidden" }, children: [
+  return /* @__PURE__ */ jsxs2("div", { dir, className: "tome-grain", style: { ...cssVars, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", minHeight: "100vh", overflow: "hidden" }, children: [
     config2.banner?.text && !bannerDismissed && /* @__PURE__ */ jsxs2("div", { style: {
       display: "flex",
       alignItems: "center",
@@ -1084,7 +1122,7 @@ function Shell({
         mobile
       }
     ) : null,
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flex: 1, height: config2.banner?.text && !bannerDismissed ? "calc(100vh - 32px)" : "100vh" }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: isRtl ? "row-reverse" : "row", flex: 1, height: config2.banner?.text && !bannerDismissed ? "calc(100vh - 32px)" : "100vh" }, children: [
       mobile && sbOpen && /* @__PURE__ */ jsx2("div", { onClick: () => setSb(false), style: {
         position: "fixed",
         inset: 0,
@@ -1092,16 +1130,29 @@ function Shell({
         background: "rgba(0,0,0,0.4)",
         backdropFilter: "blur(2px)"
       } }),
-      /* @__PURE__ */ jsxs2("aside", { style: {
+      overrides2?.Sidebar ? /* @__PURE__ */ jsx2(
+        overrides2.Sidebar,
+        {
+          config: config2,
+          navigation: navigation2,
+          currentPageId,
+          onNavigate,
+          mobile,
+          sbOpen,
+          setSbOpen: setSb,
+          versioning,
+          currentVersion
+        }
+      ) : /* @__PURE__ */ jsxs2("aside", { style: {
         width: sbOpen ? 270 : 0,
         minWidth: sbOpen ? 270 : 0,
         background: "var(--sbBg)",
-        borderRight: "1px solid var(--bd)",
+        [isRtl ? "borderLeft" : "borderRight"]: "1px solid var(--bd)",
         display: "flex",
         flexDirection: "column",
         transition: "width .2s, min-width .2s",
         overflow: "hidden",
-        ...mobile ? { position: "fixed", top: 0, left: 0, bottom: 0, zIndex: 201 } : {}
+        ...mobile ? { position: "fixed", top: 0, [isRtl ? "right" : "left"]: 0, bottom: 0, zIndex: 201 } : {}
       }, children: [
         /* @__PURE__ */ jsxs2("a", { href: "/", style: { padding: "18px 20px", display: "flex", alignItems: "baseline", gap: 6, borderBottom: "1px solid var(--bd)", textDecoration: "none", color: "inherit" }, children: [
           /* @__PURE__ */ jsx2("span", { style: { fontFamily: "var(--font-heading)", fontSize: 22, fontWeight: 700, fontStyle: "italic" }, children: config2.name }),
@@ -1125,7 +1176,7 @@ function Shell({
           fontFamily: "var(--font-body)"
         }, children: [
           /* @__PURE__ */ jsx2(SearchIcon, {}),
-          /* @__PURE__ */ jsx2("span", { style: { flex: 1, textAlign: "left" }, children: "Search..." }),
+          /* @__PURE__ */ jsx2("span", { style: { flex: 1, textAlign: isRtl ? "right" : "left" }, children: "Search..." }),
           /* @__PURE__ */ jsx2("kbd", { style: { fontFamily: "var(--font-code)", fontSize: 9, background: "var(--sf)", border: "1px solid var(--bd)", borderRadius: 2, padding: "2px 6px" }, children: "\u2318K" })
         ] }) }),
         /* @__PURE__ */ jsx2("nav", { style: { flex: 1, overflow: "auto", padding: "4px 10px 20px" }, children: navigation2.map((sec) => /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 8 }, children: [
@@ -1149,9 +1200,9 @@ function Shell({
             expanded.includes(sec.section) ? /* @__PURE__ */ jsx2(ChevDown, {}) : /* @__PURE__ */ jsx2(ChevRight, {}),
             sec.section
           ] }),
-          expanded.includes(sec.section) && /* @__PURE__ */ jsx2("div", { style: { marginLeft: 8, borderLeft: "1px solid var(--bd)", paddingLeft: 0 }, children: sec.pages.map((p) => {
+          expanded.includes(sec.section) && /* @__PURE__ */ jsx2("div", { style: { [isRtl ? "marginRight" : "marginLeft"]: 8, [isRtl ? "borderRight" : "borderLeft"]: "1px solid var(--bd)", [isRtl ? "paddingRight" : "paddingLeft"]: 0 }, children: sec.pages.map((p) => {
             const active = currentPageId === p.id;
-            return /* @__PURE__ */ jsx2("button", { onClick: () => {
+            return /* @__PURE__ */ jsxs2("button", { onClick: () => {
               onNavigate(p.id);
               if (mobile) setSb(false);
             }, style: {
@@ -1159,11 +1210,11 @@ function Shell({
               alignItems: "center",
               gap: 10,
               width: "100%",
-              textAlign: "left",
+              textAlign: isRtl ? "right" : "left",
               background: "none",
               border: "none",
               borderRadius: 0,
-              borderLeft: active ? "2px solid var(--ac)" : "2px solid transparent",
+              [isRtl ? "borderRight" : "borderLeft"]: active ? "2px solid var(--ac)" : "2px solid transparent",
               padding: "7px 14px",
               cursor: "pointer",
               color: active ? "var(--ac)" : "var(--tx2)",
@@ -1171,7 +1222,29 @@ function Shell({
               fontWeight: active ? 500 : 400,
               fontFamily: "var(--font-body)",
               transition: "all .12s"
-            }, children: p.title }, p.id);
+            }, children: [
+              p.title,
+              p.badge && (() => {
+                const badgeColors = {
+                  default: { bg: "var(--sf)", text: "var(--tx2)" },
+                  info: { bg: "rgba(59,130,246,0.15)", text: "rgb(59,130,246)" },
+                  success: { bg: "rgba(34,197,94,0.15)", text: "rgb(34,197,94)" },
+                  warning: { bg: "rgba(234,179,8,0.15)", text: "rgb(202,138,4)" },
+                  danger: { bg: "rgba(239,68,68,0.15)", text: "rgb(239,68,68)" }
+                };
+                const bc = badgeColors[p.badge.variant || "default"] || badgeColors.default;
+                return /* @__PURE__ */ jsx2("span", { style: {
+                  fontSize: 10,
+                  fontWeight: 600,
+                  padding: "2px 6px",
+                  borderRadius: 4,
+                  marginLeft: 6,
+                  whiteSpace: "nowrap",
+                  background: bc.bg,
+                  color: bc.text
+                }, children: p.badge.text });
+              })()
+            ] }, p.id);
           }) })
         ] }, sec.section)) }),
         versioning && mobile && /* @__PURE__ */ jsx2("div", { style: { padding: "8px 16px", borderTop: "1px solid var(--bd)", display: "flex", gap: 6 }, children: versioning.versions.map((v) => /* @__PURE__ */ jsxs2(
@@ -1183,14 +1256,14 @@ function Shell({
             },
             style: {
               flex: 1,
-              padding: "6px 0",
+              padding: "3px 0",
               textAlign: "center",
               background: v === (currentVersion || versioning.current) ? "var(--acD)" : "var(--sf)",
               border: "1px solid var(--bd)",
               borderRadius: 2,
               cursor: "pointer",
               color: v === (currentVersion || versioning.current) ? "var(--ac)" : "var(--tx2)",
-              fontSize: 12,
+              fontSize: 11,
               fontFamily: "var(--font-code)",
               fontWeight: v === versioning.current ? 600 : 400
             },
@@ -1212,7 +1285,26 @@ function Shell({
         ] })
       ] }),
       /* @__PURE__ */ jsxs2("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
-        /* @__PURE__ */ jsxs2("header", { style: {
+        overrides2?.Header ? /* @__PURE__ */ jsx2(
+          overrides2.Header,
+          {
+            config: config2,
+            navigation: navigation2,
+            currentPageId,
+            onNavigate,
+            mobile,
+            sbOpen,
+            setSbOpen: setSb,
+            isDark,
+            setDark,
+            versioning,
+            currentVersion,
+            i18n: i18n2,
+            currentLocale,
+            onSearchOpen: () => setSearch(true),
+            basePath: basePath2
+          }
+        ) : /* @__PURE__ */ jsxs2("header", { style: {
           display: "flex",
           alignItems: "center",
           gap: mobile ? 8 : 12,
@@ -1272,6 +1364,28 @@ function Shell({
             }),
             /* @__PURE__ */ jsx2("span", { style: { width: 1, height: 16, background: "var(--bd)" } })
           ] }),
+          config2.socialLinks && config2.socialLinks.length > 0 && !mobile && /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: config2.socialLinks.map((link) => /* @__PURE__ */ jsx2(
+            "a",
+            {
+              href: link.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              "aria-label": link.label || link.platform,
+              "data-testid": `social-link-${link.platform}`,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "var(--tx2)",
+                cursor: "pointer",
+                transition: "color .15s"
+              },
+              onMouseOver: (e) => e.currentTarget.style.color = "var(--tx)",
+              onMouseOut: (e) => e.currentTarget.style.color = "var(--tx2)",
+              children: /* @__PURE__ */ jsx2(SocialIcon, { platform: link.platform, customIcon: link.icon })
+            },
+            link.url
+          )) }),
           mobile && themeMode === "auto" && /* @__PURE__ */ jsx2("button", { "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", onClick: () => setDark((d) => !d), style: { background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex", flexShrink: 0 }, children: isDark ? /* @__PURE__ */ jsx2(SunIcon, {}) : /* @__PURE__ */ jsx2(MoonIcon, {}) }),
           versioning && !mobile && /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
             /* @__PURE__ */ jsxs2(
@@ -1347,7 +1461,7 @@ function Shell({
               }
             )
           ] }),
-          i18n && i18n.locales.length > 1 && !mobile && /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+          i18n2 && i18n2.locales.length > 1 && !mobile && /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
             /* @__PURE__ */ jsxs2(
               "button",
               {
@@ -1368,7 +1482,7 @@ function Shell({
                 },
                 children: [
                   /* @__PURE__ */ jsx2(GlobeIcon, {}),
-                  i18n.localeNames?.[currentLocale || i18n.defaultLocale] || currentLocale || i18n.defaultLocale,
+                  i18n2.localeNames?.[currentLocale || i18n2.defaultLocale] || currentLocale || i18n2.defaultLocale,
                   /* @__PURE__ */ jsx2(ChevDown, {})
                 ]
               }
@@ -1390,15 +1504,15 @@ function Shell({
                   zIndex: 100,
                   minWidth: 120
                 },
-                children: i18n.locales.map((locale) => {
-                  const isActive = locale === (currentLocale || i18n.defaultLocale);
-                  const displayName = i18n.localeNames?.[locale] || locale;
-                  const activeLocale = currentLocale || i18n.defaultLocale;
+                children: i18n2.locales.map((locale) => {
+                  const isActive = locale === (currentLocale || i18n2.defaultLocale);
+                  const displayName = i18n2.localeNames?.[locale] || locale;
+                  const activeLocale = currentLocale || i18n2.defaultLocale;
                   let basePageId = currentPageId;
-                  if (activeLocale !== i18n.defaultLocale && currentPageId.startsWith(`${activeLocale}/`)) {
+                  if (activeLocale !== i18n2.defaultLocale && currentPageId.startsWith(`${activeLocale}/`)) {
                     basePageId = currentPageId.slice(activeLocale.length + 1);
                   }
-                  const targetId = locale === i18n.defaultLocale ? basePageId : `${locale}/${basePageId}`;
+                  const targetId = locale === i18n2.defaultLocale ? basePageId : `${locale}/${basePageId}`;
                   return /* @__PURE__ */ jsx2(
                     "button",
                     {
@@ -1473,7 +1587,31 @@ function Shell({
         ),
         /* @__PURE__ */ jsxs2("div", { ref: contentRef, style: { flex: 1, overflow: "auto", display: "flex" }, children: [
           /* @__PURE__ */ jsxs2("main", { style: { flex: 1, maxWidth: mobile ? "100%" : 760, padding: mobile ? "24px 16px 60px" : "40px 48px 80px", margin: "0 auto", minWidth: 0 }, children: [
+            breadcrumbs.length > 0 && /* @__PURE__ */ jsx2("nav", { "aria-label": "Breadcrumbs", "data-testid": "breadcrumbs", style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              fontSize: 13,
+              color: "var(--tx2)",
+              marginBottom: 8
+            }, children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx2("span", { style: { color: "var(--tx2)", opacity: 0.5 }, children: "\u203A" }),
+              i < breadcrumbs.length - 1 && crumb.href !== null ? /* @__PURE__ */ jsx2(
+                "a",
+                {
+                  href: crumb.href,
+                  onClick: (e) => {
+                    e.preventDefault();
+                    const page = navigation2.flatMap((s) => s.pages).find((p) => p.urlPath === crumb.href);
+                    if (page) onNavigate(page.id);
+                  },
+                  style: { color: "var(--tx2)", textDecoration: "none", cursor: "pointer" },
+                  children: crumb.label
+                }
+              ) : /* @__PURE__ */ jsx2("span", { style: i === breadcrumbs.length - 1 ? { color: "var(--tx)" } : void 0, children: crumb.label })
+            ] }, i)) }),
             /* @__PURE__ */ jsx2("h1", { style: { fontFamily: "var(--font-heading)", fontSize: mobile ? 26 : 38, fontWeight: 400, fontStyle: "italic", lineHeight: 1.15, marginBottom: 8 }, children: pageTitle }),
+            isDraft && /* @__PURE__ */ jsx2("div", { "data-testid": "draft-banner", style: { background: "#fef3c7", color: "#92400e", padding: "8px 16px", borderRadius: 6, fontSize: 13, marginBottom: 16 }, children: "Draft \u2014 This page is only visible in development" }),
             pageDescription && /* @__PURE__ */ jsx2("p", { style: { fontSize: 16, color: "var(--tx2)", lineHeight: 1.6, marginBottom: 32 }, children: pageDescription }),
             /* @__PURE__ */ jsx2("div", { style: { borderTop: "1px solid var(--bd)", paddingTop: 28 }, children: changelogEntries && changelogEntries.length > 0 ? /* @__PURE__ */ jsx2(ChangelogView, { entries: changelogEntries }) : PageComponent ? /* @__PURE__ */ jsx2("div", { className: "tome-content", children: /* @__PURE__ */ jsx2(PageComponent, { components: mdxComponents || {} }) }) : /* @__PURE__ */ jsx2(
               "div",
@@ -1482,113 +1620,133 @@ function Shell({
                 ref: htmlContentRef
               }
             ) }),
-            (editUrl || lastUpdated) && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 40, display: "flex", flexDirection: mobile ? "column" : "row", alignItems: mobile ? "flex-start" : "center", justifyContent: "space-between", gap: mobile ? 8 : 16 }, children: [
-              editUrl && /* @__PURE__ */ jsx2("div", { "data-testid": "edit-page-link", children: /* @__PURE__ */ jsxs2(
-                "a",
-                {
-                  href: editUrl,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: 6,
-                    color: "var(--txM)",
-                    textDecoration: "none",
-                    fontSize: 13,
-                    fontFamily: "var(--font-body)",
-                    transition: "color .15s"
-                  },
-                  onMouseOver: (e) => e.currentTarget.style.color = "var(--ac)",
-                  onMouseOut: (e) => e.currentTarget.style.color = "var(--txM)",
-                  children: [
-                    /* @__PURE__ */ jsx2(PencilIcon, {}),
-                    " Edit this page on GitHub"
-                  ]
-                }
-              ) }),
-              lastUpdated && /* @__PURE__ */ jsxs2("div", { "data-testid": "last-updated", style: { fontSize: 12, color: "var(--txM)", fontFamily: "var(--font-body)" }, children: [
-                "Last updated ",
-                formatRelativeDate(lastUpdated)
+            overrides2?.PageFooter ? /* @__PURE__ */ jsx2(
+              overrides2.PageFooter,
+              {
+                editUrl,
+                lastUpdated,
+                currentPageId,
+                prev,
+                next,
+                onNavigate,
+                mobile
+              }
+            ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+              (editUrl || lastUpdated) && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 40, display: "flex", flexDirection: mobile ? "column" : "row", alignItems: mobile ? "flex-start" : "center", justifyContent: "space-between", gap: mobile ? 8 : 16 }, children: [
+                editUrl && /* @__PURE__ */ jsx2("div", { "data-testid": "edit-page-link", children: /* @__PURE__ */ jsxs2(
+                  "a",
+                  {
+                    href: editUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 6,
+                      color: "var(--txM)",
+                      textDecoration: "none",
+                      fontSize: 13,
+                      fontFamily: "var(--font-body)",
+                      transition: "color .15s"
+                    },
+                    onMouseOver: (e) => e.currentTarget.style.color = "var(--ac)",
+                    onMouseOut: (e) => e.currentTarget.style.color = "var(--txM)",
+                    children: [
+                      /* @__PURE__ */ jsx2(PencilIcon, {}),
+                      " Edit this page on GitHub"
+                    ]
+                  }
+                ) }),
+                lastUpdated && /* @__PURE__ */ jsxs2("div", { "data-testid": "last-updated", style: { fontSize: 12, color: "var(--txM)", fontFamily: "var(--font-body)" }, children: [
+                  "Last updated ",
+                  formatRelativeDate(lastUpdated)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", gap: 12, marginTop: 24, padding: "12px 0" }, children: feedbackGiven[currentPageId] ? /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, color: "var(--txM)", fontFamily: "var(--font-body)" }, children: "Thanks for your feedback!" }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, color: "var(--txM)", fontFamily: "var(--font-body)" }, children: "Was this helpful?" }),
+                /* @__PURE__ */ jsx2("button", { onClick: () => {
+                  setFeedbackGiven((prev2) => ({ ...prev2, [currentPageId]: true }));
+                  try {
+                    localStorage.setItem(`tome-feedback-${currentPageId}`, "up");
+                  } catch {
+                  }
+                }, style: {
+                  background: "none",
+                  border: "1px solid var(--bd)",
+                  borderRadius: 2,
+                  padding: "4px 10px",
+                  cursor: "pointer",
+                  fontSize: 13,
+                  color: "var(--txM)",
+                  transition: "border-color .15s"
+                }, children: "\u{1F44D}" }),
+                /* @__PURE__ */ jsx2("button", { onClick: () => {
+                  setFeedbackGiven((prev2) => ({ ...prev2, [currentPageId]: true }));
+                  try {
+                    localStorage.setItem(`tome-feedback-${currentPageId}`, "down");
+                  } catch {
+                  }
+                }, style: {
+                  background: "none",
+                  border: "1px solid var(--bd)",
+                  borderRadius: 2,
+                  padding: "4px 10px",
+                  cursor: "pointer",
+                  fontSize: 13,
+                  color: "var(--txM)",
+                  transition: "border-color .15s"
+                }, children: "\u{1F44E}" })
+              ] }) }),
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: mobile ? "column" : "row", justifyContent: "space-between", marginTop: 16, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: mobile ? 12 : 16 }, children: [
+                prev ? /* @__PURE__ */ jsxs2("button", { onClick: () => onNavigate(prev.id), style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  background: "none",
+                  border: "1px solid var(--bd)",
+                  borderRadius: 2,
+                  padding: "10px 16px",
+                  cursor: "pointer",
+                  color: "var(--tx2)",
+                  fontSize: 13,
+                  fontFamily: "var(--font-body)",
+                  transition: "border-color .15s, color .15s"
+                }, children: [
+                  isRtl ? /* @__PURE__ */ jsx2(ArrowRight, {}) : /* @__PURE__ */ jsx2(ArrowLeft, {}),
+                  " ",
+                  prev.title
+                ] }) : /* @__PURE__ */ jsx2("div", {}),
+                next ? /* @__PURE__ */ jsxs2("button", { onClick: () => onNavigate(next.id), style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  background: "none",
+                  border: "1px solid var(--bd)",
+                  borderRadius: 2,
+                  padding: "10px 16px",
+                  cursor: "pointer",
+                  color: "var(--tx2)",
+                  fontSize: 13,
+                  fontFamily: "var(--font-body)",
+                  transition: "border-color .15s, color .15s"
+                }, children: [
+                  next.title,
+                  " ",
+                  isRtl ? /* @__PURE__ */ jsx2(ArrowLeft, {}) : /* @__PURE__ */ jsx2(ArrowRight, {})
+                ] }) : /* @__PURE__ */ jsx2("div", {})
               ] })
-            ] }),
-            /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", gap: 12, marginTop: 24, padding: "12px 0" }, children: feedbackGiven[currentPageId] ? /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, color: "var(--txM)", fontFamily: "var(--font-body)" }, children: "Thanks for your feedback!" }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-              /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, color: "var(--txM)", fontFamily: "var(--font-body)" }, children: "Was this helpful?" }),
-              /* @__PURE__ */ jsx2("button", { onClick: () => {
-                setFeedbackGiven((prev2) => ({ ...prev2, [currentPageId]: true }));
-                try {
-                  localStorage.setItem(`tome-feedback-${currentPageId}`, "up");
-                } catch {
-                }
-              }, style: {
-                background: "none",
-                border: "1px solid var(--bd)",
-                borderRadius: 2,
-                padding: "4px 10px",
-                cursor: "pointer",
-                fontSize: 13,
-                color: "var(--txM)",
-                transition: "border-color .15s"
-              }, children: "\u{1F44D}" }),
-              /* @__PURE__ */ jsx2("button", { onClick: () => {
-                setFeedbackGiven((prev2) => ({ ...prev2, [currentPageId]: true }));
-                try {
-                  localStorage.setItem(`tome-feedback-${currentPageId}`, "down");
-                } catch {
-                }
-              }, style: {
-                background: "none",
-                border: "1px solid var(--bd)",
-                borderRadius: 2,
-                padding: "4px 10px",
-                cursor: "pointer",
-                fontSize: 13,
-                color: "var(--txM)",
-                transition: "border-color .15s"
-              }, children: "\u{1F44E}" })
-            ] }) }),
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: mobile ? "column" : "row", justifyContent: "space-between", marginTop: 16, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: mobile ? 12 : 16 }, children: [
-              prev ? /* @__PURE__ */ jsxs2("button", { onClick: () => onNavigate(prev.id), style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                background: "none",
-                border: "1px solid var(--bd)",
-                borderRadius: 2,
-                padding: "10px 16px",
-                cursor: "pointer",
-                color: "var(--tx2)",
-                fontSize: 13,
-                fontFamily: "var(--font-body)",
-                transition: "border-color .15s, color .15s"
-              }, children: [
-                /* @__PURE__ */ jsx2(ArrowLeft, {}),
-                " ",
-                prev.title
-              ] }) : /* @__PURE__ */ jsx2("div", {}),
-              next ? /* @__PURE__ */ jsxs2("button", { onClick: () => onNavigate(next.id), style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                background: "none",
-                border: "1px solid var(--bd)",
-                borderRadius: 2,
-                padding: "10px 16px",
-                cursor: "pointer",
-                color: "var(--tx2)",
-                fontSize: 13,
-                fontFamily: "var(--font-body)",
-                transition: "border-color .15s, color .15s"
-              }, children: [
-                next.title,
-                " ",
-                /* @__PURE__ */ jsx2(ArrowRight, {})
-              ] }) : /* @__PURE__ */ jsx2("div", {})
             ] })
           ] }),
-          showToc && filteredHeadings.length >= 2 && wide && /* @__PURE__ */ jsxs2("aside", { "data-testid": "toc-sidebar", style: { width: 200, padding: "40px 16px 40px 0", position: "sticky", top: 0, alignSelf: "flex-start", flexShrink: 0 }, children: [
+          overrides2?.Toc ? showToc && filteredHeadings.length >= 2 && wide && /* @__PURE__ */ jsx2(
+            overrides2.Toc,
+            {
+              headings: filteredHeadings,
+              activeHeadingId,
+              onScrollToHeading: scrollToHeading
+            }
+          ) : showToc && filteredHeadings.length >= 2 && wide && /* @__PURE__ */ jsxs2("aside", { "data-testid": "toc-sidebar", style: { width: 200, padding: isRtl ? "40px 0 40px 16px" : "40px 16px 40px 0", position: "sticky", top: 0, alignSelf: "flex-start", flexShrink: 0 }, children: [
             /* @__PURE__ */ jsx2("div", { style: { fontSize: 10, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".1em", color: "var(--txM)", marginBottom: 12, fontFamily: "var(--font-code)" }, children: "On this page" }),
-            /* @__PURE__ */ jsx2("nav", { "aria-label": "Table of contents", style: { borderLeft: "1px solid var(--bd)", paddingLeft: 0 }, children: filteredHeadings.map((h, i) => {
+            /* @__PURE__ */ jsx2("nav", { "aria-label": "Table of contents", style: { [isRtl ? "borderRight" : "borderLeft"]: "1px solid var(--bd)", [isRtl ? "paddingRight" : "paddingLeft"]: 0 }, children: filteredHeadings.map((h, i) => {
               const isActive = activeHeadingId === h.id;
               return /* @__PURE__ */ jsx2(
                 "a",
@@ -1603,11 +1761,11 @@ function Shell({
                     fontWeight: isActive ? 500 : 400,
                     textDecoration: "none",
                     padding: "4px 12px",
-                    paddingLeft: 12 + (h.depth - 2) * 12,
+                    [isRtl ? "paddingRight" : "paddingLeft"]: 12 + (h.depth - 2) * 12,
                     lineHeight: 1.4,
                     transition: "color .15s, font-weight .15s",
-                    borderLeft: isActive ? "2px solid var(--ac)" : "2px solid transparent",
-                    marginLeft: -1
+                    [isRtl ? "borderRight" : "borderLeft"]: isActive ? "2px solid var(--ac)" : "2px solid transparent",
+                    [isRtl ? "marginRight" : "marginLeft"]: -1
                   },
                   children: h.text
                 },
@@ -1618,6 +1776,15 @@ function Shell({
         ] })
       ] })
     ] }),
+    overrides2?.Footer && /* @__PURE__ */ jsx2(
+      overrides2.Footer,
+      {
+        config: config2,
+        navigation: navigation2,
+        currentPageId,
+        onNavigate
+      }
+    ),
     config2.ai?.enabled && /* @__PURE__ */ jsx2(
       AiChat,
       {
@@ -1834,9 +2001,10 @@ function detectCurrentVersion(currentRoute, versions2) {
 
 // src/entry.tsx
 import config from "virtual:tome/config";
-import { routes, navigation, versions } from "virtual:tome/routes";
+import { routes, navigation, versions, i18n } from "virtual:tome/routes";
 import loadPageModule from "virtual:tome/page-loader";
 import docContext from "virtual:tome/doc-context";
+import overrides from "virtual:tome/overrides";
 import {
   Callout,
   Tabs,
@@ -1847,7 +2015,10 @@ import {
   ChangelogTimeline,
   PackageManager,
   TypeTable,
-  FileTree
+  FileTree,
+  CodeSamples,
+  LinkCard,
+  CardGrid
 } from "@tomehq/components";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var MDX_COMPONENTS = {
@@ -1860,8 +2031,11 @@ var MDX_COMPONENTS = {
   ChangelogTimeline,
   PackageManager,
   TypeTable,
-  FileTree
+  FileTree,
   // Sub-components accessible as <FileTree.File /> and <FileTree.Folder /> in MDX
+  CodeSamples,
+  LinkCard,
+  CardGrid
 };
 var contentStyles = `
   @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&family=Fira+Code:wght@400;500;600&display=swap');
@@ -1875,15 +2049,15 @@ var contentStyles = `
   .tome-content a { color: var(--ac); text-decoration: none; }
   .tome-content a:hover { text-decoration: underline; }
   .tome-content .heading-anchor { display: none; }
-  .tome-content ul, .tome-content ol { color: var(--tx2); padding-left: 1.5em; margin-bottom: 1em; }
+  .tome-content ul, .tome-content ol { color: var(--tx2); padding-inline-start: 1.5em; margin-bottom: 1em; }
   .tome-content li { margin-bottom: 0.3em; line-height: 1.7; }
   .tome-content code { font-family: var(--font-code); font-size: 0.88em; background: var(--cdBg); padding: 0.15em 0.4em; border-radius: 2px; color: var(--ac); }
   .tome-content pre { margin-bottom: 1.2em; border-radius: 2px; overflow-x: auto; border: 1px solid var(--bd); }
   .tome-content pre code { background: none; padding: 1em 1.2em; display: block; font-size: 12.5px; line-height: 1.7; color: var(--cdTx); }
-  .tome-content blockquote { border-left: 3px solid var(--ac); padding: 0.5em 1em; margin: 1em 0; background: var(--acD); border-radius: 0 2px 2px 0; }
+  .tome-content blockquote { border-inline-start: 3px solid var(--ac); padding: 0.5em 1em; margin: 1em 0; background: var(--acD); border-radius: 0 2px 2px 0; }
   .tome-content blockquote p { color: var(--tx2); margin: 0; }
   .tome-content table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
-  .tome-content th, .tome-content td { padding: 0.5em 0.8em; border: 1px solid var(--bd); text-align: left; font-size: 0.9em; }
+  .tome-content th, .tome-content td { padding: 0.5em 0.8em; border: 1px solid var(--bd); text-align: start; font-size: 0.9em; }
   .tome-content th { background: var(--sf); font-weight: 600; }
   .tome-content img { max-width: 100%; border-radius: 2px; cursor: zoom-in; }
   .tome-content hr { border: none; border-top: 1px solid var(--bd); margin: 2em 0; }
@@ -1937,6 +2111,74 @@ var contentStyles = `
     background-repeat: repeat; background-size: 256px;
   }
 
+  /* \u2500\u2500 Expressive code blocks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+  /* Code block wrapper (for titled blocks) */
+  .tome-code-block-wrapper { position: relative; margin-bottom: 1.2em; border: 1px solid var(--bd); border-radius: 2px; overflow: hidden; }
+  .tome-code-block-wrapper pre { margin-bottom: 0; border: none; border-radius: 0; }
+  .tome-code-title {
+    font-family: var(--font-code); font-size: 12px; color: var(--tx2);
+    background: var(--sf); padding: 6px 12px; border-bottom: 1px solid var(--bd);
+    letter-spacing: 0.01em; font-weight: 500;
+  }
+
+  /* Line highlighting */
+  .tome-content pre .line.tome-line-highlight {
+    background: rgba(139, 148, 158, 0.1);
+    display: inline-block; width: 100%; margin: 0 -1.2em; padding: 0 1.2em;
+  }
+  html.dark .tome-content pre .line.tome-line-highlight {
+    background: rgba(200, 210, 220, 0.08);
+  }
+
+  /* Diff lines */
+  .tome-content pre .line.tome-line-added {
+    background: rgba(34, 197, 94, 0.12);
+    display: inline-block; width: 100%; margin: 0 -1.2em; padding: 0 1.2em;
+  }
+  .tome-content pre .line.tome-line-removed {
+    background: rgba(239, 68, 68, 0.12);
+    display: inline-block; width: 100%; margin: 0 -1.2em; padding: 0 1.2em;
+  }
+  html.dark .tome-content pre .line.tome-line-added { background: rgba(34, 197, 94, 0.15); }
+  html.dark .tome-content pre .line.tome-line-removed { background: rgba(239, 68, 68, 0.15); }
+
+  /* Line numbers (CSS counter) */
+  .tome-content pre[data-line-numbers] code {
+    counter-reset: line;
+  }
+  .tome-content pre[data-line-numbers] .line::before {
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block; width: 2.5em; margin-inline-end: 1em;
+    text-align: end; color: var(--txM); opacity: 0.4;
+    font-size: 0.85em; user-select: none;
+    border-inline-end: 1px solid var(--bd); padding-inline-end: 0.8em; margin-inline-end: 0.8em;
+  }
+
+  /* Word highlighting */
+  .tome-word-highlight {
+    background: rgba(139, 148, 158, 0.2); border-radius: 2px;
+    padding: 1px 3px; margin: 0 -1px;
+  }
+  html.dark .tome-word-highlight {
+    background: rgba(200, 210, 220, 0.15);
+  }
+
+  /* Copy button */
+  .tome-content pre { position: relative; }
+  .tome-copy-btn {
+    position: absolute; top: 8px; inset-inline-end: 8px;
+    font-family: var(--font-code); font-size: 11px;
+    color: var(--tx2); background: var(--sf); border: 1px solid var(--bd);
+    padding: 3px 8px; border-radius: 2px; cursor: pointer;
+    opacity: 0; transition: opacity 0.15s;
+    z-index: 2; line-height: 1.4;
+  }
+  .tome-content pre:hover .tome-copy-btn,
+  .tome-copy-btn:focus { opacity: 1; }
+  .tome-copy-btn:hover { background: var(--sfH); }
+
   /* Shiki dual-theme support */
   .shiki { background: var(--cdBg) !important; }
 
@@ -1958,6 +2200,57 @@ var contentStyles = `
   html:not(.dark) .shiki span[style*="color:#22863A"] { color: #1a6e2e !important; }
   html:not(.dark) .shiki span[style*="color:#D73A49"] { color: #b62324 !important; }
   html:not(.dark) .shiki span[style*="color:#005CC5"] { color: #0349b4 !important; }
+
+  /* \u2500\u2500 Twoslash type hover tooltips \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+  .twoslash-hover {
+    position: relative;
+    border-bottom: 1px dotted var(--tx2);
+    cursor: help;
+  }
+  .twoslash-popup-container {
+    position: absolute;
+    opacity: 0;
+    display: none;
+    z-index: 10;
+    left: 0;
+    top: 100%;
+    margin-top: 4px;
+    padding: 6px 10px;
+    background: var(--sf);
+    border: 1px solid var(--bd);
+    border-radius: 6px;
+    font-size: 12px;
+    font-family: var(--font-code);
+    color: var(--tx);
+    white-space: pre-wrap;
+    max-width: 500px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    pointer-events: none;
+  }
+  .twoslash-hover:hover .twoslash-popup-container {
+    opacity: 1;
+    display: block;
+  }
+  /* Twoslash error/warning underlines */
+  .twoslash-error {
+    position: relative;
+    background: rgba(239, 68, 68, 0.1);
+    border-bottom: 2px wavy rgba(239, 68, 68, 0.6);
+  }
+  /* Twoslash highlighted identifiers */
+  .twoslash-highlighted {
+    background: rgba(139, 148, 158, 0.15);
+    border-radius: 2px;
+    padding: 1px 2px;
+  }
+  /* Twoslash type annotation line (^?) */
+  .twoslash-popup-code .shiki { background: transparent !important; padding: 0; margin: 0; }
+  .twoslash-popup-code .shiki code { padding: 0; font-size: 12px; }
+  html.dark .twoslash-popup-container {
+    background: var(--sf);
+    border-color: var(--bd);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  }
 `;
 var basePath = (config.basePath || "/").replace(/\/$/, "");
 function pathnameToPageId2(pathname) {
@@ -2095,6 +2388,39 @@ function App() {
       cancelled = true;
     };
   }, [pageData, loading, mermaidTheme]);
+  useEffect3(() => {
+    if (loading) return;
+    const preBlocks = document.querySelectorAll(".tome-content pre");
+    const buttons = [];
+    preBlocks.forEach((pre) => {
+      if (pre.querySelector(".tome-copy-btn")) return;
+      const btn = document.createElement("button");
+      btn.className = "tome-copy-btn";
+      btn.textContent = "Copy";
+      btn.addEventListener("click", async () => {
+        const code = pre.querySelector("code");
+        if (code) {
+          try {
+            await navigator.clipboard.writeText(code.textContent || "");
+            btn.textContent = "Copied!";
+            setTimeout(() => {
+              btn.textContent = "Copy";
+            }, 2e3);
+          } catch {
+            btn.textContent = "Failed";
+            setTimeout(() => {
+              btn.textContent = "Copy";
+            }, 2e3);
+          }
+        }
+      });
+      pre.appendChild(btn);
+      buttons.push(btn);
+    });
+    return () => {
+      buttons.forEach((btn) => btn.remove());
+    };
+  }, [pageData, loading]);
   const allPages = routes.map((r) => ({
     id: r.id,
     title: r.frontmatter.title,
@@ -2103,6 +2429,8 @@ function App() {
   const currentRoute = routes.find((r) => r.id === currentPageId);
   const currentVersion = detectCurrentVersion(currentRoute, versions);
   const editUrl = computeEditUrl(config.editLink, currentRoute?.filePath);
+  const currentLocale = currentRoute?.locale || i18n?.defaultLocale || "en";
+  const dir = i18n?.localeDirs?.[currentLocale] || "ltr";
   useEffect3(() => {
     const hasMathPlaceholders = document.querySelectorAll(".tome-math[data-math]").length > 0;
     if (!config.math && !hasMathPlaceholders) return;
@@ -2172,7 +2500,12 @@ function App() {
         docContext,
         versioning: versions || void 0,
         currentVersion,
-        basePath
+        basePath,
+        isDraft: currentRoute?.frontmatter?.draft === true,
+        dir,
+        i18n: i18n || void 0,
+        currentLocale,
+        overrides
       }
     )
   ] });