@tomehq/theme 0.2.7 → 0.2.8

package/dist/entry.js

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

package/dist/index.d.ts

@@ -44,6 +44,11 @@ interface ShellProps {
             label: string;
             href: string;
         }>;
+        banner?: {
+            text: string;
+            link?: string;
+            dismissible?: boolean;
+        };
         [key: string]: unknown;
     };
     navigation: Array<{
@@ -95,8 +100,9 @@ interface ShellProps {
         title: string;
         content: string;
     }>;
+    basePath?: string;
 }
-declare function Shell({ config, navigation, currentPageId, pageHtml, pageComponent, mdxComponents, pageTitle, pageDescription, headings, tocEnabled, editUrl, lastUpdated, changelogEntries, onNavigate, allPages, versioning, currentVersion, i18n, currentLocale, docContext, }: ShellProps): react_jsx_runtime.JSX.Element;
+declare function Shell({ config, navigation, currentPageId, pageHtml, pageComponent, mdxComponents, pageTitle, pageDescription, headings, tocEnabled, editUrl, lastUpdated, changelogEntries, onNavigate, allPages, versioning, currentVersion, i18n, currentLocale, docContext, basePath, }: ShellProps): react_jsx_runtime.JSX.Element;
 
 interface AiChatProps {
     provider: "openai" | "anthropic" | "custom";

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomehq/theme",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "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.6",
-    "@tomehq/core": "0.2.6"
+    "@tomehq/components": "0.2.8",
+    "@tomehq/core": "0.2.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/Shell.test.tsx

@@ -797,3 +797,75 @@ describe("Shell AI chat integration", () => {
     expect(screen.getByTestId("ai-chat-button")).toBeInTheDocument();
   });
 });
+
+// ── Banner (Shell banner) ────────────────────────────────
+
+describe("Shell banner", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("renders banner text when banner config is provided", () => {
+    renderShell({ config: { ...baseConfig, banner: { text: "New version available!" } } });
+    expect(screen.getByText("New version available!")).toBeInTheDocument();
+  });
+
+  it("renders banner as a link when link is provided", () => {
+    renderShell({
+      config: { ...baseConfig, banner: { text: "Click here", link: "https://example.com" } },
+    });
+    const link = screen.getByText("Click here");
+    expect(link.tagName).toBe("A");
+    expect(link).toHaveAttribute("href", "https://example.com");
+  });
+
+  it("does not render banner when banner config is not provided", () => {
+    renderShell();
+    expect(screen.queryByText("New version available!")).not.toBeInTheDocument();
+  });
+
+  it("dismisses banner when X button is clicked", () => {
+    renderShell({ config: { ...baseConfig, banner: { text: "Dismiss me" } } });
+    expect(screen.getByText("Dismiss me")).toBeInTheDocument();
+    const dismissBtn = screen.getByLabelText("Dismiss banner");
+    fireEvent.click(dismissBtn);
+    expect(screen.queryByText("Dismiss me")).not.toBeInTheDocument();
+  });
+});
+
+// ── Feedback widget ──────────────────────────────────────
+
+describe("Shell feedback widget", () => {
+  it("renders 'Was this helpful?' text", () => {
+    renderShell();
+    expect(screen.getByText("Was this helpful?")).toBeInTheDocument();
+  });
+
+  it("renders thumbs up and thumbs down buttons", () => {
+    renderShell();
+    expect(screen.getByText("\uD83D\uDC4D")).toBeInTheDocument();
+    expect(screen.getByText("\uD83D\uDC4E")).toBeInTheDocument();
+  });
+
+  it("shows 'Thanks for your feedback!' after clicking thumbs up", () => {
+    renderShell();
+    fireEvent.click(screen.getByText("\uD83D\uDC4D"));
+    expect(screen.getByText("Thanks for your feedback!")).toBeInTheDocument();
+  });
+
+  it("shows 'Thanks for your feedback!' after clicking thumbs down", () => {
+    renderShell();
+    fireEvent.click(screen.getByText("\uD83D\uDC4E"));
+    expect(screen.getByText("Thanks for your feedback!")).toBeInTheDocument();
+  });
+});
+
+// ── Image zoom ───────────────────────────────────────────
+
+describe("Shell image zoom", () => {
+  it("does not show zoom overlay initially", () => {
+    const { container } = renderShell();
+    const zoomOverlay = container.querySelector('[style*="cursor: zoom-out"]');
+    expect(zoomOverlay).toBeNull();
+  });
+});

package/src/Shell.tsx

@@ -96,12 +96,14 @@ function AlgoliaSearchModal({
   indexName,
   onNavigate,
   onClose,
+  basePath = "",
 }: {
   appId: string;
   apiKey: string;
   indexName: string;
   onNavigate: (id: string) => void;
   onClose: () => void;
+  basePath?: string;
 }) {
   const [DocSearchComponent, setDocSearchComponent] = useState<React.ComponentType<any> | null>(null);
   const [loadFailed, setLoadFailed] = useState(false);
@@ -122,7 +124,12 @@ function AlgoliaSearchModal({
   const extractPageId = useCallback((url: string): string => {
     try {
       const parsed = new URL(url, "http://localhost");
-      const pathname = parsed.pathname;
+      let pathname = parsed.pathname;
+      // Strip basePath prefix
+      if (basePath) {
+        const bp = basePath.replace(/\/$/, "");
+        if (pathname.startsWith(bp)) pathname = pathname.slice(bp.length);
+      }
       return pathname
         .replace(/^\//, "")
         .replace(/\/index\.html$/, "")
@@ -131,7 +138,7 @@ function AlgoliaSearchModal({
     } catch {
       return "index";
     }
-  }, []);
+  }, [basePath]);
 
   if (loadFailed) {
     return (
@@ -291,6 +298,7 @@ interface ShellProps {
     ai?: { enabled?: boolean; provider?: "openai" | "anthropic" | "custom"; model?: string; apiKeyEnv?: string };
     toc?: { enabled?: boolean; depth?: number };
     topNav?: Array<{ label: string; href: string }>;
+    banner?: { text: string; link?: string; dismissible?: boolean };
     [key: string]: unknown;
   };
   navigation: Array<{
@@ -315,12 +323,13 @@ interface ShellProps {
   i18n?: I18nInfo;
   currentLocale?: string;
   docContext?: Array<{ id: string; title: string; content: string }>;
+  basePath?: string;
 }
 
 export function Shell({
   config, navigation, currentPageId, pageHtml, pageComponent, mdxComponents,
   pageTitle, pageDescription, headings, tocEnabled = true, editUrl, lastUpdated, changelogEntries, onNavigate, allPages,
-  versioning, currentVersion, i18n, currentLocale, docContext,
+  versioning, currentVersion, i18n, currentLocale, docContext, basePath = "",
 }: ShellProps) {
   const themeMode = config.theme?.mode || "auto";
 
@@ -336,6 +345,15 @@ export function Shell({
   const [searchOpen, setSearch] = useState(false);
   const [versionDropdownOpen, setVersionDropdown] = useState(false);
   const [localeDropdownOpen, setLocaleDropdown] = useState(false);
+  const [zoomSrc, setZoomSrc] = useState<string | null>(null);
+  const [feedbackGiven, setFeedbackGiven] = useState<Record<string, boolean>>({});
+  const [bannerDismissed, setBannerDismissed] = useState(() => {
+    if (!config.banner?.text) return true;
+    try {
+      const hash = Array.from(config.banner.text).reduce((h, c) => ((h << 5) - h + c.charCodeAt(0)) | 0, 0).toString(36);
+      return localStorage.getItem("tome-banner-dismissed") === hash;
+    } catch { return false; }
+  });
 
   // TOM-30: Determine if viewing an old version
   const isOldVersion = versioning && currentVersion && currentVersion !== versioning.current;
@@ -398,6 +416,62 @@ export function Shell({
 
   useEffect(() => { contentRef.current?.scrollTo(0, 0); }, [currentPageId]);
 
+  // ── Image zoom: delegate click on .tome-content img ──
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.tagName === "IMG" && target.closest(".tome-content")) {
+        setZoomSrc((target as HTMLImageElement).src);
+      }
+    };
+    el.addEventListener("click", handler);
+    return () => el.removeEventListener("click", handler);
+  }, []);
+
+  // ── Content link interception: delegate click on .tome-content a ──
+  // Intercepts internal links in rendered markdown so they navigate via pushState
+  // instead of triggering a full page reload.
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const handler = (e: MouseEvent) => {
+      const anchor = (e.target as HTMLElement).closest("a");
+      if (!anchor) return;
+      const href = anchor.getAttribute("href");
+      if (!href) return;
+      // Skip external links, mailto, tel, pure anchors
+      if (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("mailto:") || href.startsWith("tel:") || href.startsWith("//")) return;
+      // Pure heading anchor — let default scrolling work
+      if (href.startsWith("#")) return;
+      // Internal link — resolve page ID by stripping basePath
+      e.preventDefault();
+      let pageId = href.replace(/^\.\//, "").replace(/^\//, "").replace(/\.mdx?$/, "").replace(/\/$/, "");
+      // Strip basePath prefix (e.g. "docs/" from "/docs/quickstart")
+      if (basePath) {
+        const normalized = basePath.replace(/^\//, "").replace(/\/$/, "");
+        if (normalized && pageId.startsWith(normalized + "/")) {
+          pageId = pageId.slice(normalized.length + 1);
+        } else if (normalized && pageId === normalized) {
+          pageId = "index";
+        }
+      }
+      if (!pageId) pageId = "index";
+      onNavigate(pageId);
+    };
+    el.addEventListener("click", handler);
+    return () => el.removeEventListener("click", handler);
+  }, [onNavigate, basePath]);
+
+  // ── Image zoom: Escape to dismiss ──
+  useEffect(() => {
+    if (!zoomSrc) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") setZoomSrc(null); };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [zoomSrc]);
+
   // ── TOC: Config-based depth filtering + frontmatter opt-out ──
   const tocConfig = config.toc;
   const tocDepth = tocConfig?.depth ?? 3;
@@ -498,8 +572,55 @@ export function Shell({
 
   const PageComponent = pageComponent;
 
+  // Compute banner link properties
+  const bannerLink = config.banner?.link;
+  const bannerIsInternal = bannerLink ? (bannerLink.startsWith("#") || (basePath && bannerLink.startsWith(basePath + "/"))) : false;
+
   return (
-    <div className="tome-grain" style={{ ...cssVars as React.CSSProperties, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", minHeight: "100vh" }}>
+    <div className="tome-grain" style={{ ...cssVars as React.CSSProperties, color: "var(--tx)", background: "var(--bg)", fontFamily: "var(--font-body)", minHeight: "100vh", overflow: "hidden" }}>
+      {/* Banner */}
+      {config.banner?.text && !bannerDismissed && (
+        <div style={{
+          display: "flex", alignItems: "center", justifyContent: "center", gap: 12,
+          background: "var(--ac)", color: "#fff", padding: "8px 16px",
+          fontSize: 13, fontFamily: "var(--font-body)", fontWeight: 500, textAlign: "center",
+          width: "100%", boxSizing: "border-box",
+        }}>
+          {config.banner.link ? (
+            <a
+              href={bannerIsInternal && bannerLink!.startsWith("#") ? (basePath + "/" + bannerLink!.slice(1)) : bannerLink!}
+              {...(bannerIsInternal ? {} : { target: "_blank", rel: "noopener noreferrer" })}
+              style={{ color: "#fff", textDecoration: "underline" }}
+              onClick={bannerIsInternal ? (e: React.MouseEvent) => {
+                e.preventDefault();
+                const bp = basePath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+                const pageId = bannerLink!.startsWith("#") ? bannerLink!.slice(1) : bannerLink!.replace(new RegExp("^" + bp + "/?"), "");
+                onNavigate(pageId || "index");
+              } : undefined}
+            >
+              {config.banner.text}
+            </a>
+          ) : (
+            <span>{config.banner.text}</span>
+          )}
+          {config.banner.dismissible !== false && (
+            <button
+              onClick={() => {
+                setBannerDismissed(true);
+                try {
+                  const hash = Array.from(config.banner!.text).reduce((h, c) => ((h << 5) - h + c.charCodeAt(0)) | 0, 0).toString(36);
+                  localStorage.setItem("tome-banner-dismissed", hash);
+                } catch {}
+              }}
+              aria-label="Dismiss banner"
+              style={{ background: "none", border: "none", color: "#fff", cursor: "pointer", fontSize: 16, lineHeight: 1, padding: 0, opacity: 0.8 }}
+            >
+              &times;
+            </button>
+          )}
+        </div>
+      )}
+
       {/* Search Modal (TOM-16: branch on provider) */}
       {searchOpen && config.search?.provider === "algolia" && config.search.appId && config.search.apiKey && config.search.indexName ? (
         <AlgoliaSearchModal
@@ -508,6 +629,7 @@ export function Shell({
           indexName={config.search.indexName}
           onNavigate={(id) => { onNavigate(id); setSearch(false); }}
           onClose={() => setSearch(false)}
+          basePath={basePath}
         />
       ) : searchOpen ? (
         <SearchModal
@@ -518,7 +640,7 @@ export function Shell({
         />
       ) : null}
 
-      <div style={{ display: "flex", height: "100vh" }}>
+      <div style={{ display: "flex", flex: 1, height: config.banner?.text && !bannerDismissed ? "calc(100vh - 32px)" : "100vh" }}>
         {/* Mobile sidebar backdrop */}
         {mobile && sbOpen && (
           <div onClick={() => setSb(false)} style={{
@@ -587,6 +709,31 @@ export function Shell({
             ))}
           </nav>
 
+          {/* Mobile version switcher in sidebar footer */}
+          {versioning && mobile && (
+            <div style={{ padding: "8px 16px", borderTop: "1px solid var(--bd)", display: "flex", gap: 6 }}>
+              {versioning.versions.map(v => (
+                <button
+                  key={v}
+                  onClick={() => {
+                    // Navigate to the version's index page via hash routing
+                    const targetId = v === versioning.current ? "index" : `${v}/index`;
+                    onNavigate(targetId);
+                  }}
+                  style={{
+                    flex: 1, padding: "6px 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, fontFamily: "var(--font-code)",
+                    fontWeight: v === versioning.current ? 600 : 400,
+                  }}
+                >
+                  {v}{v === versioning.current ? " (latest)" : ""}
+                </button>
+              ))}
+            </div>
+          )}
           <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" ? (
@@ -605,6 +752,7 @@ export function Shell({
           <header style={{
             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)",
+            maxWidth: "100vw", overflow: "visible", position: "relative", zIndex: 200,
           }}>
             <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 />}
@@ -629,12 +777,18 @@ export function Shell({
             {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("#");
+                  const isInternal = link.href.startsWith("#") || (basePath && link.href.startsWith(basePath + "/"));
+                  const isExternal = !isInternal;
                   return (
                     <a
                       key={link.label}
-                      href={link.href}
+                      href={isInternal && link.href.startsWith("#") ? (basePath + "/" + link.href.slice(1)) : link.href}
                       {...(isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                      onClick={isInternal ? (e: React.MouseEvent) => {
+                        e.preventDefault();
+                        const pageId = link.href.startsWith("#") ? link.href.slice(1) : link.href.replace(new RegExp("^" + basePath.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "/?"), "");
+                        onNavigate(pageId);
+                      } : undefined}
                       style={{
                         display: "flex", alignItems: "center", gap: 4,
                         color: "var(--txM)", textDecoration: "none", fontSize: 12,
@@ -653,8 +807,15 @@ export function Shell({
               </div>
             )}
 
-            {/* TOM-30: Version Switcher */}
-            {versioning && (
+            {/* Theme toggle in header on mobile */}
+            {mobile && themeMode === "auto" && (
+              <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 }}>
+                {isDark ? <SunIcon /> : <MoonIcon />}
+              </button>
+            )}
+
+            {/* TOM-30: Version Switcher — hidden on mobile */}
+            {versioning && !mobile && (
               <div style={{ position: "relative" }}>
                 <button
                   data-testid="version-switcher"
@@ -685,9 +846,9 @@ export function Shell({
                         key={v}
                         onClick={() => {
                           setVersionDropdown(false);
-                          // Navigate to the version's root page
-                          const targetUrl = v === versioning.current ? "/" : `/${v}`;
-                          window.location.href = targetUrl;
+                          // Navigate to the version's index page via hash routing
+                          const targetId = v === versioning.current ? "index" : `${v}/index`;
+                          onNavigate(targetId);
                         }}
                         style={{
                           display: "block", width: "100%", textAlign: "left",
@@ -706,8 +867,8 @@ export function Shell({
               </div>
             )}
 
-            {/* TOM-34: Language Switcher */}
-            {i18n && i18n.locales.length > 1 && (
+            {/* TOM-34: Language Switcher — hidden on mobile */}
+            {i18n && i18n.locales.length > 1 && !mobile && (
               <div style={{ position: "relative" }}>
                 <button
                   data-testid="language-switcher"
@@ -786,7 +947,7 @@ export function Shell({
             >
               <span>You're viewing docs for {currentVersion}.</span>
               <button
-                onClick={() => { window.location.href = "/"; }}
+                onClick={() => { onNavigate("index"); }}
                 style={{
                   background: "none", border: "none", color: "var(--ac)",
                   cursor: "pointer", fontWeight: 600, fontSize: 13,
@@ -850,8 +1011,25 @@ export function Shell({
                 </div>
               )}
 
+              {/* Feedback widget */}
+              <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 24, padding: "12px 0" }}>
+                {feedbackGiven[currentPageId] ? (
+                  <span style={{ fontSize: 13, color: "var(--txM)", fontFamily: "var(--font-body)" }}>Thanks for your feedback!</span>
+                ) : (
+                  <>
+                    <span style={{ fontSize: 13, color: "var(--txM)", fontFamily: "var(--font-body)" }}>Was this helpful?</span>
+                    <button onClick={() => { setFeedbackGiven(prev => ({ ...prev, [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",
+                    }}>👍</button>
+                    <button onClick={() => { setFeedbackGiven(prev => ({ ...prev, [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",
+                    }}>👎</button>
+                  </>
+                )}
+              </div>
+
               {/* Prev / Next */}
-              <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 }}>
+              <div style={{ display: "flex", flexDirection: mobile ? "column" : "row", justifyContent: "space-between", marginTop: 16, 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",
@@ -915,6 +1093,16 @@ export function Shell({
           context={docContext?.map((d) => `## ${d.title}\n${d.content}`).join("\n\n") ?? allPages.map((p) => `- ${p.title}${p.description ? ": " + p.description : ""}`).join("\n")}
         />
       )}
+
+      {/* Image zoom overlay */}
+      {zoomSrc && (
+        <div onClick={() => setZoomSrc(null)} style={{
+          position: "fixed", inset: 0, zIndex: 9999, display: "flex", alignItems: "center", justifyContent: "center",
+          background: "rgba(0,0,0,0.7)", backdropFilter: "blur(8px)", cursor: "zoom-out",
+        }}>
+          <img src={zoomSrc} alt="" style={{ maxWidth: "90vw", maxHeight: "90vh", objectFit: "contain", borderRadius: 4, boxShadow: "0 16px 64px rgba(0,0,0,0.4)" }} />
+        </div>
+      )}
     </div>
   );
 }