npm - @tomehq/theme - Versions diffs - 0.5.0 → 0.6.1 - Mend

@tomehq/theme 0.5.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/{chunk-FIUZY65C.js → chunk-NIWVZJLG.js} +76 -40
package/dist/entry.js +1 -1
package/dist/index.js +1 -1
package/package.json +3 -3
package/src/Shell.tsx +33 -15

package/dist/{chunk-FIUZY65C.js → chunk-NIWVZJLG.js} RENAMED Viewed

@@ -1096,8 +1096,8 @@ function Shell({
   }, []);
   const allNavPages = navigation2.flatMap((g) => g.pages);
   const idx = allNavPages.findIndex((p) => p.id === currentPageId);
-  const prev = idx > 0 ? allNavPages[idx - 1] : null;
-  const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : null;
+  const prev = idx > 0 ? allNavPages[idx - 1] : allNavPages[allNavPages.length - 1] ?? null;
+  const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : allNavPages[0] ?? null;
   const breadcrumbs = getBreadcrumbs(navigation2, currentPageId, pageTitle);
   const togSec = (s) => setExpanded((p) => p.includes(s) ? p.filter((x) => x !== s) : [...p, s]);
   const cssVars = {
@@ -1697,7 +1697,7 @@ function Shell({
                 currentPageId
               )
             ) }),
-            overrides2?.PageFooter ? /* @__PURE__ */ jsx2(
+            !pageHtml && !pageComponent ? null : overrides2?.PageFooter ? /* @__PURE__ */ jsx2(
               overrides2.PageFooter,
               {
                 editUrl,
@@ -1774,43 +1774,79 @@ function Shell({
                   transition: "border-color .15s"
                 }, children: "\u{1F44E}" })
               ] }) }),
-              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: mobile ? "column" : "row", justifyContent: "space-between", marginTop: 16, paddingTop: 24, borderTop: "1px solid var(--bd)", gap: mobile ? 12 : 16 }, children: [
-                prev ? /* @__PURE__ */ jsxs2("button", { onClick: () => onNavigate(prev.id), style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  background: "none",
-                  border: "1px solid var(--bd)",
-                  borderRadius: 2,
-                  padding: "10px 16px",
-                  cursor: "pointer",
-                  color: "var(--tx2)",
-                  fontSize: 13,
-                  fontFamily: "var(--font-body)",
-                  transition: "border-color .15s, color .15s"
-                }, children: [
-                  isRtl ? /* @__PURE__ */ jsx2(ArrowRight, {}) : /* @__PURE__ */ jsx2(ArrowLeft, {}),
-                  " ",
-                  prev.title
-                ] }) : /* @__PURE__ */ jsx2("div", {}),
-                next ? /* @__PURE__ */ jsxs2("button", { onClick: () => onNavigate(next.id), style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  background: "none",
-                  border: "1px solid var(--bd)",
-                  borderRadius: 2,
-                  padding: "10px 16px",
-                  cursor: "pointer",
-                  color: "var(--tx2)",
-                  fontSize: 13,
-                  fontFamily: "var(--font-body)",
-                  transition: "border-color .15s, color .15s"
-                }, children: [
-                  next.title,
-                  " ",
-                  isRtl ? /* @__PURE__ */ jsx2(ArrowLeft, {}) : /* @__PURE__ */ jsx2(ArrowRight, {})
-                ] }) : /* @__PURE__ */ jsx2("div", {})
+              /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", marginTop: 24, paddingTop: 32, paddingBottom: 40, borderTop: "1px solid var(--bd)", gap: 16 }, children: [
+                prev ? /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    onClick: () => onNavigate(prev.id),
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "flex-start",
+                      gap: 6,
+                      background: "var(--sf)",
+                      border: "1px solid var(--bd)",
+                      borderRadius: 8,
+                      padding: "16px 20px",
+                      cursor: "pointer",
+                      textAlign: "left",
+                      fontFamily: "var(--font-body)",
+                      transition: "all .3s ease",
+                      boxShadow: "0 2px 8px rgba(0,0,0,0.06)"
+                    },
+                    onMouseOver: (e) => {
+                      e.currentTarget.style.borderColor = "var(--ac)";
+                      e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)";
+                    },
+                    onMouseOut: (e) => {
+                      e.currentTarget.style.borderColor = "var(--bd)";
+                      e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)";
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs2("span", { style: { fontSize: 11, color: "var(--txM)", textTransform: "uppercase", letterSpacing: "0.5px", display: "flex", alignItems: "center", gap: 4 }, children: [
+                        isRtl ? /* @__PURE__ */ jsx2(ArrowRight, {}) : /* @__PURE__ */ jsx2(ArrowLeft, {}),
+                        " Previous"
+                      ] }),
+                      /* @__PURE__ */ jsx2("span", { style: { fontSize: 14, fontWeight: 500, color: "var(--tx)" }, children: prev.title })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx2("div", {}),
+                next ? /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    onClick: () => onNavigate(next.id),
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "flex-end",
+                      gap: 6,
+                      background: "var(--sf)",
+                      border: "1px solid var(--bd)",
+                      borderRadius: 8,
+                      padding: "16px 20px",
+                      cursor: "pointer",
+                      textAlign: "right",
+                      fontFamily: "var(--font-body)",
+                      transition: "all .3s ease",
+                      boxShadow: "0 2px 8px rgba(0,0,0,0.06)"
+                    },
+                    onMouseOver: (e) => {
+                      e.currentTarget.style.borderColor = "var(--ac)";
+                      e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)";
+                    },
+                    onMouseOut: (e) => {
+                      e.currentTarget.style.borderColor = "var(--bd)";
+                      e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)";
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs2("span", { style: { fontSize: 11, color: "var(--txM)", textTransform: "uppercase", letterSpacing: "0.5px", display: "flex", alignItems: "center", gap: 4 }, children: [
+                        "Next ",
+                        isRtl ? /* @__PURE__ */ jsx2(ArrowLeft, {}) : /* @__PURE__ */ jsx2(ArrowRight, {})
+                      ] }),
+                      /* @__PURE__ */ jsx2("span", { style: { fontSize: 14, fontWeight: 500, color: "var(--tx)" }, children: next.title })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx2("div", {})
               ] })
             ] })
           ] }),

package/dist/entry.js CHANGED Viewed

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

package/dist/index.js CHANGED Viewed

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

package/package.json CHANGED Viewed

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

package/src/Shell.tsx CHANGED Viewed

@@ -643,8 +643,8 @@ export function Shell({
   // Prev / Next
   const allNavPages = navigation.flatMap(g => g.pages);
   const idx = allNavPages.findIndex(p => p.id === currentPageId);
-  const prev = idx > 0 ? allNavPages[idx - 1] : null;
-  const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : null;
+  const prev = idx > 0 ? allNavPages[idx - 1] : allNavPages[allNavPages.length - 1] ?? null;
+  const next = idx < allNavPages.length - 1 ? allNavPages[idx + 1] : allNavPages[0] ?? null;
   // Breadcrumbs
   const breadcrumbs = getBreadcrumbs(navigation, currentPageId, pageTitle);
@@ -1186,7 +1186,7 @@ export function Shell({
               </div>
               {/* TOM-48: Edit this page link + TOM-54: Last updated + Feedback + Prev/Next */}
-              {overrides?.PageFooter ? (
+              {!pageHtml && !pageComponent ? null : overrides?.PageFooter ? (
                 <overrides.PageFooter
                   editUrl={editUrl}
                   lastUpdated={lastUpdated}
@@ -1243,23 +1243,41 @@ export function Shell({
                 )}
               </div>
-              {/* Prev / Next */}
-              <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 / Next link cards */}
+              <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", marginTop: 24, paddingTop: 32, paddingBottom: 40, borderTop: "1px solid var(--bd)", gap: 16 }}>
                 {prev ? (
                   <button onClick={() => onNavigate(prev.id)} style={{
-                    display: "flex", alignItems: "center", gap: 8, background: "none",
-                    border: "1px solid var(--bd)", borderRadius: 2, padding: "10px 16px",
-                    cursor: "pointer", color: "var(--tx2)", fontSize: 13, fontFamily: "var(--font-body)",
-                    transition: "border-color .15s, color .15s",
-                  }}>{isRtl ? <ArrowRight /> : <ArrowLeft />} {prev.title}</button>
+                    display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 6,
+                    background: "var(--sf)", border: "1px solid var(--bd)", borderRadius: 8,
+                    padding: "16px 20px", cursor: "pointer", textAlign: "left",
+                    fontFamily: "var(--font-body)", transition: "all .3s ease",
+                    boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
+                  }}
+                  onMouseOver={(e) => { e.currentTarget.style.borderColor = "var(--ac)"; e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)"; }}
+                  onMouseOut={(e) => { e.currentTarget.style.borderColor = "var(--bd)"; e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)"; }}
+                  >
+                    <span style={{ fontSize: 11, color: "var(--txM)", textTransform: "uppercase", letterSpacing: "0.5px", display: "flex", alignItems: "center", gap: 4 }}>
+                      {isRtl ? <ArrowRight /> : <ArrowLeft />} Previous
+                    </span>
+                    <span style={{ fontSize: 14, fontWeight: 500, color: "var(--tx)" }}>{prev.title}</span>
+                  </button>
                 ) : <div />}
                 {next ? (
                   <button onClick={() => onNavigate(next.id)} style={{
-                    display: "flex", alignItems: "center", gap: 8, background: "none",
-                    border: "1px solid var(--bd)", borderRadius: 2, padding: "10px 16px",
-                    cursor: "pointer", color: "var(--tx2)", fontSize: 13, fontFamily: "var(--font-body)",
-                    transition: "border-color .15s, color .15s",
-                  }}>{next.title} {isRtl ? <ArrowLeft /> : <ArrowRight />}</button>
+                    display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6,
+                    background: "var(--sf)", border: "1px solid var(--bd)", borderRadius: 8,
+                    padding: "16px 20px", cursor: "pointer", textAlign: "right",
+                    fontFamily: "var(--font-body)", transition: "all .3s ease",
+                    boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
+                  }}
+                  onMouseOver={(e) => { e.currentTarget.style.borderColor = "var(--ac)"; e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)"; }}
+                  onMouseOut={(e) => { e.currentTarget.style.borderColor = "var(--bd)"; e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)"; }}
+                  >
+                    <span style={{ fontSize: 11, color: "var(--txM)", textTransform: "uppercase", letterSpacing: "0.5px", display: "flex", alignItems: "center", gap: 4 }}>
+                      Next {isRtl ? <ArrowLeft /> : <ArrowRight />}
+                    </span>
+                    <span style={{ fontSize: 14, fontWeight: 500, color: "var(--tx)" }}>{next.title}</span>
+                  </button>
                 ) : <div />}
               </div>
               </>