@arcote.tech/platform 0.5.1 → 0.5.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/platform",
   "type": "module",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Arc Platform — module system, router, layout, theme, i18n, platform app shell",
@@ -18,11 +18,11 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@arcote.tech/arc-ds": "^0.5.1",
-    "@arcote.tech/arc-react": "^0.5.1"
+    "@arcote.tech/arc-ds": "^0.5.2",
+    "@arcote.tech/arc-react": "^0.5.2"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.5.1",
+    "@arcote.tech/arc": "^0.5.2",
     "@lingui/core": "^5.0.0",
     "@lingui/react": "^5.0.0",
     "framer-motion": "^12.0.0",

package/src/layout/page-router.tsx

@@ -9,6 +9,7 @@ import type { PageFragment } from "../types";
 type MatchResult = {
   page: PageFragment;
   child?: PageFragment;
+  grandchild?: PageFragment;
   params: Record<string, string>;
 };
 
@@ -23,6 +24,26 @@ function matchPage(path: string, pages: PageFragment[]): MatchResult | undefined
     if (p.children?.length) {
       if (path === p.path) return { page: p, params: {} };
 
+      // Check grandchildren first (deeper match wins)
+      for (const c of p.children) {
+        if (c.children?.length) {
+          if (path === c.path) return { page: p, child: c, params: {} };
+
+          const exactGrandchild = c.children.find((gc) => gc.path === path);
+          if (exactGrandchild) return { page: p, child: c, grandchild: exactGrandchild, params: {} };
+
+          for (const gc of c.children) {
+            if (hasRouteParams(gc.path)) {
+              const params = matchRoutePath(gc.path, path);
+              if (params) return { page: p, child: c, grandchild: gc, params };
+            }
+          }
+
+          const prefixGrandchild = c.children.find((gc) => path.startsWith(gc.path));
+          if (prefixGrandchild) return { page: p, child: c, grandchild: prefixGrandchild, params: {} };
+        }
+      }
+
       // Try exact child match first
       const exactChild = p.children.find((c) => c.path === path);
       if (exactChild) return { page: p, child: exactChild, params: {} };
@@ -94,7 +115,7 @@ export function PageRouter() {
     return null;
   }
 
-  const { page, child } = match;
+  const { page, child, grandchild } = match;
   const Layout = page.layout ?? DefaultLayout;
 
   // Parent with children — redirect to first child if at parent path
@@ -103,6 +124,29 @@ export function PageRouter() {
     return null;
   }
 
+  // Grandchild — nested shell: OuterShell > InnerShell > GrandchildComponent
+  if (page.children?.length && child?.children?.length && grandchild) {
+    const OuterShell = page.component;
+    const InnerShell = child.component;
+    const GrandchildComponent = grandchild.component;
+    const content = (
+      <OuterShell tabs={page.children}>
+        <InnerShell tabs={child.children}>
+          <Suspense fallback={null}>
+            <GrandchildComponent />
+          </Suspense>
+        </InnerShell>
+      </OuterShell>
+    );
+    return Layout ? <Layout>{content}</Layout> : content;
+  }
+
+  // Child with its own children — redirect to first grandchild
+  if (page.children?.length && child?.children?.length && !grandchild) {
+    navigate(child.children[0].path);
+    return null;
+  }
+
   // Parent with active child — render shell with tabs
   if (page.children?.length && child) {
     const Shell = page.component;