@onexapis/cli 1.1.1 → 1.1.2

package/dist/preview/preview-app.tsx

@@ -147,9 +147,25 @@ function discoverPageConfigs(
 
 // ===== 6. PREVIEW APP COMPONENT =====
 
+/**
+ * Match URL pathname to a page index.
+ * "/" or "/home" → home page, "/showcase" → showcase page, etc.
+ */
+function getInitialPageFromURL(pages: Array<{ key: string; label: string; config: any }>): number {
+  const pathname = window.location.pathname.replace(/^\/+|\/+$/g, "").toLowerCase();
+  if (!pathname || pathname === "home") return 0; // home is always first after sorting
+
+  const idx = pages.findIndex((p) => {
+    const pageSlug = p.label.toLowerCase().replace(/\s+/g, "-");
+    const pageKey = p.key.replace("PageConfig", "").toLowerCase();
+    return pageSlug === pathname || pageKey === pathname;
+  });
+  return idx >= 0 ? idx : -2; // -2 = page not found
+}
+
 function PreviewApp() {
   const [themeExports, setThemeExports] = useState<ThemeExports | null>(null);
-  const [selectedPage, setSelectedPage] = useState(0);
+  const [selectedPage, setSelectedPage] = useState(-1); // -1 = not yet resolved from URL
   const [wsStatus, setWsStatus] = useState<
     "connected" | "disconnected" | "rebuilding"
   >("disconnected");
@@ -173,6 +189,16 @@ function PreviewApp() {
     loadTheme();
   }, [loadTheme]);
 
+  // Handle browser back/forward navigation
+  useEffect(() => {
+    const handlePopState = () => {
+      // Reset to -1 to re-resolve from URL
+      setSelectedPage(-1);
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
+
   // WebSocket connection for hot reload
   useEffect(() => {
     function connect() {
@@ -242,7 +268,43 @@ function PreviewApp() {
   const pages = discoverPageConfigs(themeExports);
   const themeId = themeExports.themeConfig?.id || "";
   const themePrefix = themeId ? `${themeId}-` : "";
-  const currentPage = pages[selectedPage] || pages[0];
+
+  // Resolve initial page from URL path (once pages are discovered)
+  const resolvedPage = selectedPage === -1 ? getInitialPageFromURL(pages) : selectedPage;
+
+  // Page not found (-2)
+  if (resolvedPage === -2) {
+    const pathname = window.location.pathname;
+    return (
+      <div style={{ padding: "80px 40px", textAlign: "center", fontFamily: "system-ui" }}>
+        <h1 style={{ fontSize: "4rem", margin: 0, color: "#E11D48" }}>404</h1>
+        <p style={{ fontSize: "1.25rem", color: "#333", marginTop: 12 }}>
+          Page not found: <code style={{ background: "#f1f5f9", padding: "2px 8px", borderRadius: 4 }}>{pathname}</code>
+        </p>
+        <p style={{ color: "#888", marginTop: 8 }}>Available pages:</p>
+        <div style={{ display: "flex", gap: 8, justifyContent: "center", marginTop: 12 }}>
+          {pages.map((page) => {
+            const pageSlug = page.key.replace("PageConfig", "").toLowerCase();
+            const pagePath = pageSlug === "home" ? "/" : `/${pageSlug}`;
+            return (
+              <a
+                key={page.key}
+                href={pagePath}
+                style={{
+                  padding: "6px 16px", borderRadius: 6, background: "#E11D48",
+                  color: "white", textDecoration: "none", fontSize: 14, fontWeight: 500,
+                }}
+              >
+                {page.label}
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  const currentPage = pages[resolvedPage] || pages[0];
 
   if (!currentPage) {
     return (
@@ -290,28 +352,33 @@ function PreviewApp() {
             gap: 4,
           }}
         >
-          {pages.map((page, i) => (
-            <button
-              key={page.key}
-              onClick={() => {
-                setSelectedPage(i);
-                const el = document.getElementById("page-indicator");
-                if (el) el.textContent = page.label;
-              }}
-              style={{
-                padding: "4px 12px",
-                border: "none",
-                borderRadius: 4,
-                cursor: "pointer",
-                background: i === selectedPage ? "#E11D48" : "transparent",
-                color: i === selectedPage ? "white" : "#333",
-                fontSize: 12,
-                fontWeight: 500,
-              }}
-            >
-              {page.label}
-            </button>
-          ))}
+          {pages.map((page, i) => {
+            const pageSlug = page.key.replace("PageConfig", "").toLowerCase();
+            const pagePath = pageSlug === "home" ? "/" : `/${pageSlug}`;
+            return (
+              <button
+                key={page.key}
+                onClick={() => {
+                  setSelectedPage(i);
+                  window.history.pushState(null, "", pagePath);
+                  const el = document.getElementById("page-indicator");
+                  if (el) el.textContent = page.label;
+                }}
+                style={{
+                  padding: "4px 12px",
+                  border: "none",
+                  borderRadius: 4,
+                  cursor: "pointer",
+                  background: i === resolvedPage ? "#E11D48" : "transparent",
+                  color: i === resolvedPage ? "white" : "#333",
+                  fontSize: 12,
+                  fontWeight: 500,
+                }}
+              >
+                {page.label}
+              </button>
+            );
+          })}
         </div>
       )}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -52,16 +52,17 @@
     "adm-zip": "^0.5.16",
     "archiver": "^7.0.1",
     "chalk": "^5.3.0",
+    "chokidar": "^4.0.0",
     "commander": "^12.1.0",
     "dotenv": "^17.3.1",
     "ejs": "^3.1.10",
+    "esbuild": "^0.25.0",
     "form-data": "^4.0.5",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "inquirer": "^9.2.12",
+    "jiti": "^2.6.1",
     "node-fetch": "^3.3.2",
-    "chokidar": "^4.0.0",
-    "esbuild": "^0.25.0",
     "open": "^10.1.0",
     "ora": "^8.0.1",
     "ws": "^8.18.0"