@tomehq/theme 0.2.4 → 0.2.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tome Contributors
+
+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/dist/{chunk-S47BRMNQ.js → chunk-YZ3P3TNS.js}

@@ -562,7 +562,7 @@ var ChevDown = () => /* @__PURE__ */ jsx2(Icon, { d: "M6 9l6 6 6-6", size: 14 })
 var MenuIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M3 12h18M3 6h18M3 18h18", size: 20 });
 var XIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M18 6L6 18M6 6l12 12", size: 18 });
 var MoonIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" });
-var SunIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z" });
+var SunIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0-4a1 1 0 0 1 1-1v-1a1 1 0 0 1-2 0v1a1 1 0 0 1 1 1Zm0 16a1 1 0 0 1 1 1v1a1 1 0 0 1-2 0v-1a1 1 0 0 1 1-1ZM4 12a1 1 0 0 1-1 1H2a1 1 0 0 1 0-2h1a1 1 0 0 1 1 1Zm18-1h-1a1 1 0 0 1 0 2h1a1 1 0 0 1 0-2ZM6.34 6.34a1 1 0 0 1-1.41 0l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41Zm12.73-2.12-.71.71a1 1 0 0 1-1.41-1.41l.71-.71a1 1 0 1 1 1.41 1.41ZM6.34 17.66l-.71.71a1 1 0 0 1-1.41-1.41l.71-.71a1 1 0 0 1 1.41 1.41Zm12.73 2.12-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1-1.41 1.41Z" });
 var ArrowLeft = () => /* @__PURE__ */ jsx2(Icon, { d: "M19 12H5M12 19l-7-7 7-7", size: 14 });
 var ArrowRight = () => /* @__PURE__ */ jsx2(Icon, { d: "M5 12h14M12 5l7 7-7 7", size: 14 });
 var PencilIcon = () => /* @__PURE__ */ jsx2(Icon, { d: "M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z", size: 13 });
@@ -796,14 +796,15 @@ function Shell({
     if (themeMode === "light") return false;
     return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? true;
   });
-  const [sbOpen, setSb] = useState2(true);
+  const [mobile, setMobile] = useState2(() => typeof window !== "undefined" && window.innerWidth < 768);
+  const [sbOpen, setSb] = useState2(() => typeof window !== "undefined" && window.innerWidth >= 768);
   const [searchOpen, setSearch] = useState2(false);
   const [versionDropdownOpen, setVersionDropdown] = useState2(false);
   const [localeDropdownOpen, setLocaleDropdown] = useState2(false);
   const isOldVersion = versioning && currentVersion && currentVersion !== versioning.current;
   const [expanded, setExpanded] = useState2(navigation2.map((n) => n.section));
   const contentRef = useRef2(null);
-  const [wide, setWide] = useState2(true);
+  const [wide, setWide] = useState2(() => typeof window !== "undefined" && window.innerWidth > 1100);
   const preset = config2.theme?.preset || "amber";
   const baseTokens = THEME_PRESETS[preset]?.[isDark ? "dark" : "light"] || THEME_PRESETS.amber.dark;
   const accentOverride = config2.theme?.accent ? buildAccentOverride(config2.theme.accent, isDark) : null;
@@ -825,11 +826,23 @@ function Shell({
     document.documentElement.classList.toggle("dark", isDark);
   }, [isDark]);
   useEffect2(() => {
-    const c = () => setWide(window.innerWidth > 1100);
-    c();
-    window.addEventListener("resize", c);
-    return () => window.removeEventListener("resize", c);
+    const handleResize = () => {
+      const w = window.innerWidth;
+      setWide(w > 1100);
+      setMobile(w < 768);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
+  useEffect2(() => {
+    if (mobile && sbOpen) {
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }
+  }, [mobile, sbOpen]);
   useEffect2(() => {
     contentRef.current?.scrollTo(0, 0);
   }, [currentPageId]);
@@ -944,10 +957,18 @@ function Shell({
           onNavigate(id);
           setSearch(false);
         },
-        onClose: () => setSearch(false)
+        onClose: () => setSearch(false),
+        mobile
       }
     ) : null,
     /* @__PURE__ */ jsxs2("div", { style: { display: "flex", height: "100vh" }, children: [
+      mobile && sbOpen && /* @__PURE__ */ jsx2("div", { onClick: () => setSb(false), style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 200,
+        background: "rgba(0,0,0,0.4)",
+        backdropFilter: "blur(2px)"
+      } }),
       /* @__PURE__ */ jsxs2("aside", { style: {
         width: sbOpen ? 270 : 0,
         minWidth: sbOpen ? 270 : 0,
@@ -956,13 +977,17 @@ function Shell({
         display: "flex",
         flexDirection: "column",
         transition: "width .2s, min-width .2s",
-        overflow: "hidden"
+        overflow: "hidden",
+        ...mobile ? { position: "fixed", top: 0, 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 }),
           /* @__PURE__ */ jsx2("span", { style: { width: 5, height: 5, borderRadius: "50%", background: "var(--ac)", display: "inline-block" } })
         ] }),
-        /* @__PURE__ */ jsx2("div", { style: { padding: "12px 14px" }, children: /* @__PURE__ */ jsxs2("button", { onClick: () => setSearch(true), style: {
+        /* @__PURE__ */ jsx2("div", { style: { padding: "12px 14px" }, children: /* @__PURE__ */ jsxs2("button", { onClick: () => {
+          setSearch(true);
+          if (mobile) setSb(false);
+        }, style: {
           display: "flex",
           alignItems: "center",
           gap: 8,
@@ -1003,7 +1028,10 @@ function Shell({
           ] }),
           expanded.includes(sec.section) && /* @__PURE__ */ jsx2("div", { style: { marginLeft: 8, borderLeft: "1px solid var(--bd)", paddingLeft: 0 }, children: sec.pages.map((p) => {
             const active = currentPageId === p.id;
-            return /* @__PURE__ */ jsx2("button", { onClick: () => onNavigate(p.id), style: {
+            return /* @__PURE__ */ jsx2("button", { onClick: () => {
+              onNavigate(p.id);
+              if (mobile) setSb(false);
+            }, style: {
               display: "flex",
               alignItems: "center",
               gap: 10,
@@ -1024,7 +1052,12 @@ function Shell({
           }) })
         ] }, sec.section)) }),
         /* @__PURE__ */ jsxs2("div", { style: { padding: "12px 16px", borderTop: "1px solid var(--bd)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-          themeMode === "auto" ? /* @__PURE__ */ jsx2("button", { onClick: () => setDark((d) => !d), style: { background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }, children: isDark ? /* @__PURE__ */ jsx2(SunIcon, {}) : /* @__PURE__ */ jsx2(MoonIcon, {}) }) : /* @__PURE__ */ jsx2("div", {}),
+          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" }, children: isDark ? /* @__PURE__ */ jsx2(SunIcon, {}) : /* @__PURE__ */ jsx2(MoonIcon, {}) }) : /* @__PURE__ */ jsx2("div", {}),
+          /* @__PURE__ */ jsxs2("span", { style: { fontSize: 11, color: "var(--txM)", letterSpacing: 0.2 }, children: [
+            "Built with ",
+            "\u2661",
+            " by Tome"
+          ] }),
           /* @__PURE__ */ jsx2("span", { style: { fontFamily: "var(--font-code)", fontSize: 10, color: "var(--txM)" }, children: typeof __TOME_VERSION__ !== "undefined" && __TOME_VERSION__ ? `v${__TOME_VERSION__}` : "v0.1.0" })
         ] })
       ] }),
@@ -1032,14 +1065,14 @@ function Shell({
         /* @__PURE__ */ jsxs2("header", { style: {
           display: "flex",
           alignItems: "center",
-          gap: 12,
-          padding: "10px 24px",
+          gap: mobile ? 8 : 12,
+          padding: mobile ? "8px 12px" : "10px 24px",
           borderBottom: "1px solid var(--bd)",
           background: "var(--hdBg)",
           backdropFilter: "blur(12px)"
         }, children: [
-          /* @__PURE__ */ jsx2("button", { onClick: () => setSb(!sbOpen), style: { background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }, children: sbOpen ? /* @__PURE__ */ jsx2(XIcon, {}) : /* @__PURE__ */ jsx2(MenuIcon, {}) }),
-          /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-code)", fontSize: 11, color: "var(--txM)", letterSpacing: ".03em", flex: 1 }, children: navigation2.map((s) => {
+          /* @__PURE__ */ jsx2("button", { "aria-label": sbOpen ? "Close sidebar" : "Open sidebar", onClick: () => setSb(!sbOpen), style: { background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }, children: sbOpen ? /* @__PURE__ */ jsx2(XIcon, {}) : /* @__PURE__ */ jsx2(MenuIcon, {}) }),
+          mobile ? /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, color: "var(--ac)", fontFamily: "var(--font-code)", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: navigation2.flatMap((s) => s.pages).find((p) => p.id === currentPageId)?.title || "" }) : /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-code)", fontSize: 11, color: "var(--txM)", letterSpacing: ".03em", flex: 1 }, children: navigation2.map((s) => {
             const f = s.pages.find((p) => p.id === currentPageId);
             if (!f) return null;
             return /* @__PURE__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
@@ -1048,7 +1081,7 @@ function Shell({
               /* @__PURE__ */ jsx2("span", { style: { color: "var(--ac)" }, children: f.title })
             ] }, s.section);
           }) }),
-          config2.topNav && config2.topNav.length > 0 && /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          config2.topNav && config2.topNav.length > 0 && !mobile && /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
             config2.topNav.map((link) => {
               const isExternal = link.href.startsWith("http") || !link.href.startsWith("#");
               return /* @__PURE__ */ jsxs2(
@@ -1278,8 +1311,8 @@ function Shell({
           }
         ),
         /* @__PURE__ */ jsxs2("div", { ref: contentRef, style: { flex: 1, overflow: "auto", display: "flex" }, children: [
-          /* @__PURE__ */ jsxs2("main", { style: { flex: 1, maxWidth: 760, padding: "40px 48px 80px", margin: "0 auto" }, children: [
-            /* @__PURE__ */ jsx2("h1", { style: { fontFamily: "var(--font-heading)", fontSize: 38, fontWeight: 400, fontStyle: "italic", lineHeight: 1.15, marginBottom: 8 }, children: pageTitle }),
+          /* @__PURE__ */ jsxs2("main", { style: { flex: 1, maxWidth: mobile ? "100%" : 760, padding: mobile ? "24px 16px 60px" : "40px 48px 80px", margin: "0 auto", minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx2("h1", { style: { fontFamily: "var(--font-heading)", fontSize: mobile ? 26 : 38, fontWeight: 400, fontStyle: "italic", lineHeight: 1.15, marginBottom: 8 }, children: pageTitle }),
             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",
@@ -1288,7 +1321,7 @@ function Shell({
                 dangerouslySetInnerHTML: { __html: (pageHtml || "").replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*/, "") }
               }
             ) }),
-            (editUrl || lastUpdated) && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 40, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, 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",
                 {
@@ -1318,7 +1351,7 @@ function Shell({
                 formatRelativeDate(lastUpdated)
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", marginTop: editUrl || lastUpdated ? 16 : 48, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: 16 }, children: [
+            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: mobile ? "column" : "row", justifyContent: "space-between", marginTop: editUrl || lastUpdated ? 16 : 48, 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",
@@ -1401,7 +1434,7 @@ ${d.content}`).join("\n\n") ?? allPages.map((p) => `- ${p.title}${p.description
     )
   ] });
 }
-function SearchModal({ allPages, onNavigate, onClose }) {
+function SearchModal({ allPages, onNavigate, onClose, mobile }) {
   const [q, setQ] = useState2("");
   const [results, setResults] = useState2([]);
   const [selected, setSelected] = useState2(0);
@@ -1473,17 +1506,20 @@ function SearchModal({ allPages, onNavigate, onClose }) {
     background: "rgba(0,0,0,0.55)",
     backdropFilter: "blur(6px)",
     display: "flex",
-    alignItems: "flex-start",
+    alignItems: mobile ? "stretch" : "flex-start",
     justifyContent: "center",
-    paddingTop: "12vh"
+    paddingTop: mobile ? 0 : "12vh"
   }, children: /* @__PURE__ */ jsxs2("div", { onClick: (e) => e.stopPropagation(), style: {
     background: "var(--sf)",
-    border: "1px solid var(--bd)",
-    borderRadius: 2,
+    border: mobile ? "none" : "1px solid var(--bd)",
+    borderRadius: mobile ? 0 : 2,
     width: "100%",
-    maxWidth: 520,
-    boxShadow: "0 24px 80px rgba(0,0,0,0.4)",
-    overflow: "hidden"
+    maxWidth: mobile ? "100%" : 520,
+    boxShadow: mobile ? "none" : "0 24px 80px rgba(0,0,0,0.4)",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    ...mobile ? { height: "100%" } : {}
   }, children: [
     /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderBottom: "1px solid var(--bd)" }, children: [
       /* @__PURE__ */ jsx2(SearchIcon, {}),
@@ -1500,7 +1536,7 @@ function SearchModal({ allPages, onNavigate, onClose }) {
       ),
       /* @__PURE__ */ jsx2("kbd", { style: { fontFamily: "var(--font-code)", fontSize: 10, color: "var(--txM)", background: "var(--cdBg)", padding: "2px 6px", borderRadius: 2, border: "1px solid var(--bd)" }, children: "ESC" })
     ] }),
-    results.length > 0 && /* @__PURE__ */ jsx2("div", { style: { padding: 6, maxHeight: 360, overflow: "auto" }, children: results.map((r, i) => /* @__PURE__ */ jsxs2(
+    results.length > 0 && /* @__PURE__ */ jsx2("div", { style: { padding: 6, maxHeight: mobile ? "none" : 360, overflow: "auto", flex: mobile ? 1 : void 0 }, children: results.map((r, i) => /* @__PURE__ */ jsxs2(
       "button",
       {
         onClick: () => onNavigate(r.id),
@@ -1582,6 +1618,15 @@ var contentStyles = `
   .tome-content img { max-width: 100%; border-radius: 2px; }
   .tome-content hr { border: none; border-top: 1px solid var(--bd); margin: 2em 0; }
 
+  /* Mobile responsive content */
+  @media (max-width: 767px) {
+    .tome-content h2 { font-size: 1.2em; margin-top: 1.5em; }
+    .tome-content h3 { font-size: 1.05em; }
+    .tome-content pre code { font-size: 12px; padding: 0.8em 1em; }
+    .tome-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+    .tome-content blockquote { margin: 0.8em 0; }
+  }
+
   /* Selection style */
   ::selection { background: var(--acD); color: var(--ac); }
 

package/dist/entry.js

@@ -1,6 +1,6 @@
 import {
   entry_default
-} from "./chunk-S47BRMNQ.js";
+} from "./chunk-YZ3P3TNS.js";
 export {
   entry_default as default
 };

package/dist/index.js

@@ -3,7 +3,7 @@ import {
   Shell,
   THEME_PRESETS,
   entry_default
-} from "./chunk-S47BRMNQ.js";
+} from "./chunk-YZ3P3TNS.js";
 export {
   AiChat,
   entry_default as App,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomehq/theme",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Tome default theme and React app shell",
   "type": "module",
   "main": "./src/index.tsx",
@@ -8,14 +8,9 @@
     ".": "./src/index.tsx",
     "./entry": "./src/entry.tsx"
   },
-  "scripts": {
-    "build": "tsup src/index.tsx src/entry.tsx --format esm --dts --external react --external react-dom --external 'virtual:tome/config' --external 'virtual:tome/routes' --external 'virtual:tome/page-loader' --external 'virtual:tome/doc-context' --external '@tomehq/components'",
-    "dev": "tsup src/index.tsx src/entry.tsx --format esm --dts --external react --external react-dom --external 'virtual:tome/config' --external 'virtual:tome/routes' --external 'virtual:tome/page-loader' --external 'virtual:tome/doc-context' --external '@tomehq/components' --watch",
-    "clean": "rm -rf dist"
-  },
   "dependencies": {
-    "@tomehq/components": "workspace:*",
-    "@tomehq/core": "workspace:*"
+    "@tomehq/components": "0.2.6",
+    "@tomehq/core": "0.2.6"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -48,5 +43,10 @@
     "type": "git",
     "url": "https://github.com/vxcozy/tome.git",
     "directory": "packages/theme"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx src/entry.tsx --format esm --dts --external react --external react-dom --external 'virtual:tome/config' --external 'virtual:tome/routes' --external 'virtual:tome/page-loader' --external 'virtual:tome/doc-context' --external '@tomehq/components'",
+    "dev": "tsup src/index.tsx src/entry.tsx --format esm --dts --external react --external react-dom --external 'virtual:tome/config' --external 'virtual:tome/routes' --external 'virtual:tome/page-loader' --external 'virtual:tome/doc-context' --external '@tomehq/components' --watch",
+    "clean": "rm -rf dist"
   }
-}
+}

package/src/Shell.tsx

@@ -41,7 +41,7 @@ const CheckIcon = () => <Icon d="M20 6L9 17l-5-5" size={14} />;
 const MenuIcon = () => <Icon d="M3 12h18M3 6h18M3 18h18" size={20} />;
 const XIcon = () => <Icon d="M18 6L6 18M6 6l12 12" size={18} />;
 const MoonIcon = () => <Icon d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />;
-const SunIcon = () => <Icon d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z" />;
+const SunIcon = () => <Icon d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0-4a1 1 0 0 1 1-1v-1a1 1 0 0 1-2 0v1a1 1 0 0 1 1 1Zm0 16a1 1 0 0 1 1 1v1a1 1 0 0 1-2 0v-1a1 1 0 0 1 1-1ZM4 12a1 1 0 0 1-1 1H2a1 1 0 0 1 0-2h1a1 1 0 0 1 1 1Zm18-1h-1a1 1 0 0 1 0 2h1a1 1 0 0 1 0-2ZM6.34 6.34a1 1 0 0 1-1.41 0l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41Zm12.73-2.12-.71.71a1 1 0 0 1-1.41-1.41l.71-.71a1 1 0 1 1 1.41 1.41ZM6.34 17.66l-.71.71a1 1 0 0 1-1.41-1.41l.71-.71a1 1 0 0 1 1.41 1.41Zm12.73 2.12-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1-1.41 1.41Z" />;
 const ArrowLeft = () => <Icon d="M19 12H5M12 19l-7-7 7-7" size={14} />;
 const ArrowRight = () => <Icon d="M5 12h14M12 5l7 7-7 7" size={14} />;
 const PencilIcon = () => <Icon d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" size={13} />;
@@ -331,7 +331,8 @@ export function Shell({
     return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? true;
   });
 
-  const [sbOpen, setSb] = useState(true);
+  const [mobile, setMobile] = useState(() => typeof window !== "undefined" && window.innerWidth < 768);
+  const [sbOpen, setSb] = useState(() => typeof window !== "undefined" && window.innerWidth >= 768);
   const [searchOpen, setSearch] = useState(false);
   const [versionDropdownOpen, setVersionDropdown] = useState(false);
   const [localeDropdownOpen, setLocaleDropdown] = useState(false);
@@ -340,7 +341,7 @@ export function Shell({
   const isOldVersion = versioning && currentVersion && currentVersion !== versioning.current;
   const [expanded, setExpanded] = useState<string[]>(navigation.map(n => n.section));
   const contentRef = useRef<HTMLDivElement>(null);
-  const [wide, setWide] = useState(true);
+  const [wide, setWide] = useState(() => typeof window !== "undefined" && window.innerWidth > 1100);
 
   const preset = (config.theme?.preset || "amber") as PresetName;
   const baseTokens = THEME_PRESETS[preset]?.[isDark ? "dark" : "light"] || THEME_PRESETS.amber.dark;
@@ -377,11 +378,24 @@ export function Shell({
   }, [isDark]);
 
   useEffect(() => {
-    const c = () => setWide(window.innerWidth > 1100);
-    c(); window.addEventListener("resize", c);
-    return () => window.removeEventListener("resize", c);
+    const handleResize = () => {
+      const w = window.innerWidth;
+      setWide(w > 1100);
+      setMobile(w < 768);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  // Lock body scroll when mobile sidebar is open
+  useEffect(() => {
+    if (mobile && sbOpen) {
+      document.body.style.overflow = "hidden";
+      return () => { document.body.style.overflow = ""; };
+    }
+  }, [mobile, sbOpen]);
+
   useEffect(() => { contentRef.current?.scrollTo(0, 0); }, [currentPageId]);
 
   // ── TOC: Config-based depth filtering + frontmatter opt-out ──
@@ -500,16 +514,25 @@ export function Shell({
           allPages={allPages}
           onNavigate={(id) => { onNavigate(id); setSearch(false); }}
           onClose={() => setSearch(false)}
+          mobile={mobile}
         />
       ) : null}
 
       <div style={{ display: "flex", height: "100vh" }}>
+        {/* Mobile sidebar backdrop */}
+        {mobile && sbOpen && (
+          <div onClick={() => setSb(false)} style={{
+            position: "fixed", inset: 0, zIndex: 200,
+            background: "rgba(0,0,0,0.4)", backdropFilter: "blur(2px)",
+          }} />
+        )}
         {/* Sidebar */}
         <aside style={{
           width: sbOpen ? 270 : 0, minWidth: sbOpen ? 270 : 0,
           background: "var(--sbBg)", borderRight: "1px solid var(--bd)",
           display: "flex", flexDirection: "column",
           transition: "width .2s, min-width .2s", overflow: "hidden",
+          ...(mobile ? { position: "fixed" as const, top: 0, left: 0, bottom: 0, zIndex: 201 } : {}),
         }}>
           <a href="/" style={{ padding: "18px 20px", display: "flex", alignItems: "baseline", gap: 6, borderBottom: "1px solid var(--bd)", textDecoration: "none", color: "inherit" }}>
             <span style={{ fontFamily: "var(--font-heading)", fontSize: 22, fontWeight: 700, fontStyle: "italic" }}>
@@ -519,7 +542,7 @@ export function Shell({
           </a>
 
           <div style={{ padding: "12px 14px" }}>
-            <button onClick={() => setSearch(true)} style={{
+            <button onClick={() => { setSearch(true); if (mobile) setSb(false); }} style={{
               display: "flex", alignItems: "center", gap: 8, width: "100%",
               background: "var(--cdBg)", border: "1px solid var(--bd)", borderRadius: 2,
               padding: "8px 12px", cursor: "pointer", color: "var(--txM)", fontSize: 12.5,
@@ -545,7 +568,7 @@ export function Shell({
                   {sec.pages.map(p => {
                     const active = currentPageId === p.id;
                     return (
-                      <button key={p.id} onClick={() => onNavigate(p.id)} style={{
+                      <button key={p.id} onClick={() => { onNavigate(p.id); if (mobile) setSb(false); }} style={{
                         display: "flex", alignItems: "center", gap: 10, width: "100%",
                         textAlign: "left", background: "none",
                         border: "none", borderRadius: 0,
@@ -567,10 +590,11 @@ export function Shell({
           <div style={{ padding: "12px 16px", borderTop: "1px solid var(--bd)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
             {/* TOM-12: Only show toggle when mode is "auto" */}
             {themeMode === "auto" ? (
-              <button onClick={() => setDark(d => !d)} style={{ background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }}>
+              <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" }}>
                 {isDark ? <SunIcon /> : <MoonIcon />}
               </button>
             ) : <div />}
+            <span style={{ fontSize: 11, color: "var(--txM)", letterSpacing: 0.2 }}>Built with {"\u2661"} by Tome</span>
             <span style={{ fontFamily: "var(--font-code)", fontSize: 10, color: "var(--txM)" }}>{typeof __TOME_VERSION__ !== "undefined" && __TOME_VERSION__ ? `v${__TOME_VERSION__}` : "v0.1.0"}</span>
           </div>
         </aside>
@@ -579,24 +603,30 @@ export function Shell({
         <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
           {/* Header */}
           <header style={{
-            display: "flex", alignItems: "center", gap: 12, padding: "10px 24px",
+            display: "flex", alignItems: "center", gap: mobile ? 8 : 12, padding: mobile ? "8px 12px" : "10px 24px",
             borderBottom: "1px solid var(--bd)", background: "var(--hdBg)", backdropFilter: "blur(12px)",
           }}>
-            <button onClick={() => setSb(!sbOpen)} style={{ background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }}>
+            <button aria-label={sbOpen ? "Close sidebar" : "Open sidebar"} onClick={() => setSb(!sbOpen)} style={{ background: "none", border: "none", color: "var(--txM)", cursor: "pointer", display: "flex" }}>
               {sbOpen ? <XIcon /> : <MenuIcon />}
             </button>
-            <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-code)", fontSize: 11, color: "var(--txM)", letterSpacing: ".03em", flex: 1 }}>
-              {navigation.map(s => {
-                const f = s.pages.find(p => p.id === currentPageId);
-                if (!f) return null;
-                return <span key={s.section} style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                  <span>{s.section}</span><ChevRight /><span style={{ color: "var(--ac)" }}>{f.title}</span>
-                </span>;
-              })}
-            </div>
+            {mobile ? (
+              <span style={{ fontSize: 13, color: "var(--ac)", fontFamily: "var(--font-code)", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                {navigation.flatMap(s => s.pages).find(p => p.id === currentPageId)?.title || ""}
+              </span>
+            ) : (
+              <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-code)", fontSize: 11, color: "var(--txM)", letterSpacing: ".03em", flex: 1 }}>
+                {navigation.map(s => {
+                  const f = s.pages.find(p => p.id === currentPageId);
+                  if (!f) return null;
+                  return <span key={s.section} style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    <span>{s.section}</span><ChevRight /><span style={{ color: "var(--ac)" }}>{f.title}</span>
+                  </span>;
+                })}
+              </div>
+            )}
 
             {/* Top Nav Links */}
-            {config.topNav && config.topNav.length > 0 && (
+            {config.topNav && config.topNav.length > 0 && !mobile && (
               <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                 {config.topNav.map((link) => {
                   const isExternal = link.href.startsWith("http") || !link.href.startsWith("#");
@@ -770,8 +800,8 @@ export function Shell({
 
           {/* Content + TOC */}
           <div ref={contentRef} style={{ flex: 1, overflow: "auto", display: "flex" }}>
-            <main style={{ flex: 1, maxWidth: 760, padding: "40px 48px 80px", margin: "0 auto" }}>
-              <h1 style={{ fontFamily: "var(--font-heading)", fontSize: 38, fontWeight: 400, fontStyle: "italic", lineHeight: 1.15, marginBottom: 8 }}>
+            <main style={{ flex: 1, maxWidth: mobile ? "100%" : 760, padding: mobile ? "24px 16px 60px" : "40px 48px 80px", margin: "0 auto", minWidth: 0 }}>
+              <h1 style={{ fontFamily: "var(--font-heading)", fontSize: mobile ? 26 : 38, fontWeight: 400, fontStyle: "italic", lineHeight: 1.15, marginBottom: 8 }}>
                 {pageTitle}
               </h1>
               {pageDescription && <p style={{ fontSize: 16, color: "var(--tx2)", lineHeight: 1.6, marginBottom: 32 }}>{pageDescription}</p>}
@@ -793,7 +823,7 @@ export function Shell({
 
               {/* TOM-48: Edit this page link + TOM-54: Last updated */}
               {(editUrl || lastUpdated) && (
-                <div style={{ marginTop: 40, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
+                <div style={{ marginTop: 40, display: "flex", flexDirection: mobile ? "column" : "row", alignItems: mobile ? "flex-start" : "center", justifyContent: "space-between", gap: mobile ? 8 : 16 }}>
                   {editUrl && (
                     <div data-testid="edit-page-link">
                       <a
@@ -821,7 +851,7 @@ export function Shell({
               )}
 
               {/* Prev / Next */}
-              <div style={{ display: "flex", justifyContent: "space-between", marginTop: (editUrl || lastUpdated) ? 16 : 48, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: 16 }}>
+              <div style={{ display: "flex", flexDirection: mobile ? "column" : "row", justifyContent: "space-between", marginTop: (editUrl || lastUpdated) ? 16 : 48, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: mobile ? 12 : 16 }}>
                 {prev ? (
                   <button onClick={() => onNavigate(prev.id)} style={{
                     display: "flex", alignItems: "center", gap: 8, background: "none",
@@ -897,10 +927,11 @@ interface SearchResult {
 }
 
 // ── SEARCH MODAL (TOM-15) ────────────────────────────────
-function SearchModal({ allPages, onNavigate, onClose }: {
+function SearchModal({ allPages, onNavigate, onClose, mobile }: {
   allPages: Array<{ id: string; title: string; description?: string }>;
   onNavigate: (id: string) => void;
   onClose: () => void;
+  mobile?: boolean;
 }) {
   const [q, setQ] = useState("");
   const [results, setResults] = useState<SearchResult[]>([]);
@@ -992,12 +1023,15 @@ function SearchModal({ allPages, onNavigate, onClose }: {
   return (
     <div onClick={onClose} style={{
       position: "fixed", inset: 0, zIndex: 1000, background: "rgba(0,0,0,0.55)",
-      backdropFilter: "blur(6px)", display: "flex", alignItems: "flex-start",
-      justifyContent: "center", paddingTop: "12vh",
+      backdropFilter: "blur(6px)", display: "flex",
+      alignItems: mobile ? "stretch" : "flex-start",
+      justifyContent: "center", paddingTop: mobile ? 0 : "12vh",
     }}>
       <div onClick={e => e.stopPropagation()} style={{
-        background: "var(--sf)", border: "1px solid var(--bd)", borderRadius: 2,
-        width: "100%", maxWidth: 520, boxShadow: "0 24px 80px rgba(0,0,0,0.4)", overflow: "hidden",
+        background: "var(--sf)", border: mobile ? "none" : "1px solid var(--bd)", borderRadius: mobile ? 0 : 2,
+        width: "100%", maxWidth: mobile ? "100%" : 520, boxShadow: mobile ? "none" : "0 24px 80px rgba(0,0,0,0.4)",
+        overflow: "hidden", display: "flex", flexDirection: "column" as const,
+        ...(mobile ? { height: "100%" } : {}),
       }}>
         <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderBottom: "1px solid var(--bd)" }}>
           <SearchIcon />
@@ -1008,7 +1042,7 @@ function SearchModal({ allPages, onNavigate, onClose }: {
           />
           <kbd style={{ fontFamily: "var(--font-code)", fontSize: 10, color: "var(--txM)", background: "var(--cdBg)", padding: "2px 6px", borderRadius: 2, border: "1px solid var(--bd)" }}>ESC</kbd>
         </div>
-        {results.length > 0 && <div style={{ padding: 6, maxHeight: 360, overflow: "auto" }}>
+        {results.length > 0 && <div style={{ padding: 6, maxHeight: mobile ? "none" : 360, overflow: "auto", flex: mobile ? 1 : undefined }}>
           {results.map((r, i) => (
             <button key={r.id + i} onClick={() => onNavigate(r.id)} style={{
               display: "block", width: "100%", textAlign: "left",

package/src/entry.tsx

@@ -59,6 +59,15 @@ const contentStyles = `
   .tome-content img { max-width: 100%; border-radius: 2px; }
   .tome-content hr { border: none; border-top: 1px solid var(--bd); margin: 2em 0; }
 
+  /* Mobile responsive content */
+  @media (max-width: 767px) {
+    .tome-content h2 { font-size: 1.2em; margin-top: 1.5em; }
+    .tome-content h3 { font-size: 1.05em; }
+    .tome-content pre code { font-size: 12px; padding: 0.8em 1em; }
+    .tome-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+    .tome-content blockquote { margin: 0.8em 0; }
+  }
+
   /* Selection style */
   ::selection { background: var(--acD); color: var(--ac); }