@tomehq/theme 0.3.1 → 0.3.2

package/dist/entry.js

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

package/dist/index.d.ts

@@ -10,6 +10,7 @@ interface I18nInfo {
     defaultLocale: string;
     locales: string[];
     localeNames?: Record<string, string>;
+    localeDirs?: Record<string, "ltr" | "rtl">;
 }
 interface ShellProps {
     config: {
@@ -49,6 +50,12 @@ interface ShellProps {
             link?: string;
             dismissible?: boolean;
         };
+        socialLinks?: Array<{
+            platform: string;
+            url: string;
+            label?: string;
+            icon?: string;
+        }>;
         [key: string]: unknown;
     };
     navigation: Array<{
@@ -58,6 +65,10 @@ interface ShellProps {
             id: string;
             urlPath: string;
             icon?: string;
+            badge?: {
+                text: string;
+                variant: string;
+            };
         }>;
     }>;
     currentPageId: string;
@@ -101,8 +112,17 @@ interface ShellProps {
         content: string;
     }>;
     basePath?: string;
+    isDraft?: boolean;
+    dir?: "ltr" | "rtl";
+    overrides?: {
+        Header?: React.ComponentType<any>;
+        Footer?: React.ComponentType<any>;
+        Sidebar?: React.ComponentType<any>;
+        Toc?: React.ComponentType<any>;
+        PageFooter?: React.ComponentType<any>;
+    };
 }
-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;
+declare function Shell({ config, navigation, currentPageId, pageHtml, pageComponent, mdxComponents, pageTitle, pageDescription, headings, tocEnabled, editUrl, lastUpdated, changelogEntries, onNavigate, allPages, versioning, currentVersion, i18n, currentLocale, docContext, basePath, isDraft, dir: dirProp, overrides, }: 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-YXKONM3A.js";
+} from "./chunk-2AXAEADQ.js";
 export {
   AiChat,
   entry_default as App,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomehq/theme",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "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.3.1",
-    "@tomehq/core": "0.3.1"
+    "@tomehq/components": "0.3.2",
+    "@tomehq/core": "0.3.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -41,11 +41,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/vxcozy/tome.git",
+    "url": "https://github.com/tomehq/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'",
+    "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 'virtual:tome/overrides' --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.test.tsx

@@ -860,6 +860,115 @@ describe("Shell feedback widget", () => {
   });
 });
 
+// ── Breadcrumbs ──────────────────────────────────────────
+
+describe("Shell breadcrumbs", () => {
+  const multiSectionNav = [
+    {
+      section: "Getting Started",
+      pages: [
+        { id: "intro", title: "Introduction", urlPath: "/intro" },
+        { id: "quickstart", title: "Quick Start", urlPath: "/quickstart" },
+      ],
+    },
+    {
+      section: "Guides",
+      pages: [
+        { id: "search", title: "Search", urlPath: "/search" },
+        { id: "deploy", title: "Deploy", urlPath: "/deploy" },
+      ],
+    },
+  ];
+
+  const multiSectionAllPages = [
+    { id: "intro", title: "Introduction" },
+    { id: "quickstart", title: "Quick Start" },
+    { id: "search", title: "Search" },
+    { id: "deploy", title: "Deploy" },
+  ];
+
+  it("renders breadcrumbs for a non-index page", () => {
+    renderShell({
+      navigation: multiSectionNav,
+      allPages: multiSectionAllPages,
+      currentPageId: "quickstart",
+      pageTitle: "Quick Start",
+    });
+    const breadcrumbs = screen.getByTestId("breadcrumbs");
+    expect(breadcrumbs).toBeInTheDocument();
+    expect(within(breadcrumbs).getByText("Getting Started")).toBeInTheDocument();
+    expect(within(breadcrumbs).getByText("Quick Start")).toBeInTheDocument();
+  });
+
+  it("does not render breadcrumbs on the index page", () => {
+    renderShell({
+      currentPageId: "index",
+      pageTitle: "Home",
+    });
+    expect(screen.queryByTestId("breadcrumbs")).not.toBeInTheDocument();
+  });
+
+  it("renders section name as a link", () => {
+    renderShell({
+      navigation: multiSectionNav,
+      allPages: multiSectionAllPages,
+      currentPageId: "deploy",
+      pageTitle: "Deploy",
+    });
+    const breadcrumbs = screen.getByTestId("breadcrumbs");
+    const sectionLink = within(breadcrumbs).getByText("Guides");
+    expect(sectionLink.tagName).toBe("A");
+  });
+
+  it("renders current page as plain text (not a link)", () => {
+    renderShell({
+      navigation: multiSectionNav,
+      allPages: multiSectionAllPages,
+      currentPageId: "deploy",
+      pageTitle: "Deploy",
+    });
+    const breadcrumbs = screen.getByTestId("breadcrumbs");
+    const currentPage = within(breadcrumbs).getByText("Deploy");
+    expect(currentPage.tagName).toBe("SPAN");
+  });
+
+  it("clicking section link calls onNavigate with first page id", () => {
+    const onNavigate = vi.fn();
+    renderShell({
+      navigation: multiSectionNav,
+      allPages: multiSectionAllPages,
+      currentPageId: "deploy",
+      pageTitle: "Deploy",
+      onNavigate,
+    });
+    const breadcrumbs = screen.getByTestId("breadcrumbs");
+    fireEvent.click(within(breadcrumbs).getByText("Guides"));
+    expect(onNavigate).toHaveBeenCalledWith("search");
+  });
+
+  it("renders separator between breadcrumb items", () => {
+    renderShell({
+      navigation: multiSectionNav,
+      allPages: multiSectionAllPages,
+      currentPageId: "quickstart",
+      pageTitle: "Quick Start",
+    });
+    const breadcrumbs = screen.getByTestId("breadcrumbs");
+    expect(breadcrumbs.textContent).toContain("\u203A");
+  });
+
+  it("has proper aria-label for accessibility", () => {
+    renderShell({
+      navigation: multiSectionNav,
+      allPages: multiSectionAllPages,
+      currentPageId: "quickstart",
+      pageTitle: "Quick Start",
+    });
+    const nav = screen.getByRole("navigation", { name: "Breadcrumbs" });
+    expect(nav).toBeInTheDocument();
+  });
+});
+
 // ── Image zoom ───────────────────────────────────────────
 
 describe("Shell image zoom", () => {
@@ -869,3 +978,77 @@ describe("Shell image zoom", () => {
     expect(zoomOverlay).toBeNull();
   });
 });
+
+// ── RTL support ──────────────────────────────────────────
+
+describe("Shell RTL support", () => {
+  it("sets dir='rtl' on root element when dir prop is 'rtl'", () => {
+    const { container } = renderShell({ dir: "rtl" });
+    const root = container.querySelector("[dir='rtl']");
+    expect(root).not.toBeNull();
+  });
+
+  it("sets dir='ltr' on root element by default", () => {
+    const { container } = renderShell();
+    const root = container.querySelector("[dir='ltr']");
+    expect(root).not.toBeNull();
+  });
+
+  it("sets dir='ltr' when dir prop is explicitly 'ltr'", () => {
+    const { container } = renderShell({ dir: "ltr" });
+    const root = container.querySelector("[dir='ltr']");
+    expect(root).not.toBeNull();
+    expect(container.querySelector("[dir='rtl']")).toBeNull();
+  });
+
+  it("resolves dir from i18n.localeDirs when dir prop is not set", () => {
+    const { container } = renderShell({
+      i18n: {
+        defaultLocale: "en",
+        locales: ["en", "ar"],
+        localeDirs: { ar: "rtl" },
+      },
+      currentLocale: "ar",
+    });
+    const root = container.querySelector("[dir='rtl']");
+    expect(root).not.toBeNull();
+  });
+
+  it("defaults to ltr when locale has no entry in localeDirs", () => {
+    const { container } = renderShell({
+      i18n: {
+        defaultLocale: "en",
+        locales: ["en", "ar"],
+        localeDirs: { ar: "rtl" },
+      },
+      currentLocale: "en",
+    });
+    const root = container.querySelector("[dir='ltr']");
+    expect(root).not.toBeNull();
+  });
+
+  it("reverses main layout flex direction for RTL", () => {
+    const { container } = renderShell({ dir: "rtl" });
+    const flexRow = container.querySelector('[style*="flex-direction: row-reverse"]');
+    expect(flexRow).not.toBeNull();
+  });
+
+  it("uses normal row direction for LTR", () => {
+    const { container } = renderShell({ dir: "ltr" });
+    const flexRowReverse = container.querySelector('[style*="flex-direction: row-reverse"]');
+    expect(flexRowReverse).toBeNull();
+  });
+
+  it("mirrors sidebar border to borderLeft for RTL", () => {
+    const { container } = renderShell({ dir: "rtl" });
+    const aside = container.querySelector("aside");
+    expect(aside).not.toBeNull();
+    expect(aside!.style.borderLeft).toContain("1px solid");
+  });
+
+  it("renders without errors in RTL mode", () => {
+    expect(() =>
+      renderShell({ dir: "rtl" })
+    ).not.toThrow();
+  });
+});