@tomehq/theme 0.2.5 → 0.2.6

package/dist/{chunk-7MUTU5D4.js → chunk-YZ3P3TNS.js}

@@ -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,7 @@ 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",
@@ -1037,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: [
@@ -1053,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(
@@ -1283,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",
@@ -1293,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",
                 {
@@ -1323,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",
@@ -1406,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);
@@ -1478,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, {}),
@@ -1505,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),
@@ -1587,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-7MUTU5D4.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-7MUTU5D4.js";
+} from "./chunk-YZ3P3TNS.js";
 export {
   AiChat,
   entry_default as App,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomehq/theme",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Tome default theme and React app shell",
   "type": "module",
   "main": "./src/index.tsx",
@@ -9,8 +9,8 @@
     "./entry": "./src/entry.tsx"
   },
   "dependencies": {
-    "@tomehq/components": "0.2.5",
-    "@tomehq/core": "0.2.5"
+    "@tomehq/components": "0.2.6",
+    "@tomehq/core": "0.2.6"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/Shell.tsx

@@ -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,7 +590,7 @@ 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 />}
@@ -580,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("#");
@@ -771,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>}
@@ -794,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
@@ -822,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",
@@ -898,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[]>([]);
@@ -993,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 />
@@ -1009,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); }