npm - @svadmin/ui - Versions diffs - 0.42.1 → 0.42.3 - Mend

@svadmin/ui 0.42.1 → 0.42.3

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 (6) hide show

package/dist/app.css +94 -89
package/dist/app.theme.css +94 -89
package/dist/components/AdminApp.svelte +154 -54
package/dist/components/Layout.svelte +1 -1
package/dist/components/Sidebar.svelte +1 -0
package/package.json +2 -2

package/dist/app.css CHANGED Viewed

@@ -679,15 +679,15 @@ main {
 }
 /* Base card flat background overrides */
-.layout-clean-flat .bg-card,
+.layout-clean-flat [data-svadmin-content-page] .bg-card,
 .layout-clean-flat [data-slot="card"] {
   background: #ffffff !important;
   border: 1px solid #f1f3f7 !important;
   box-shadow: none !important;
   border-radius: 0.5rem !important;
 }
-.dark.layout-clean-flat .bg-card,
-.dark .layout-clean-flat .bg-card,
+.dark.layout-clean-flat [data-svadmin-content-page] .bg-card,
+.dark .layout-clean-flat [data-svadmin-content-page] .bg-card,
 .dark.layout-clean-flat [data-slot="card"],
 .dark .layout-clean-flat [data-slot="card"] {
   background: #1e1e2d !important;
@@ -696,7 +696,7 @@ main {
 }
 /* Crisp table header styles */
-.layout-clean-flat th {
+.layout-clean-flat [data-slot="table-head"] {
   background-color: #f9f9f9 !important;
   border-bottom: 1px solid #f1f3f7 !important;
   color: #181c32 !important;
@@ -705,43 +705,43 @@ main {
   text-transform: uppercase !important;
   letter-spacing: 0.05em !important;
 }
-.dark.layout-clean-flat th,
-.dark .layout-clean-flat th {
+.dark.layout-clean-flat [data-slot="table-head"],
+.dark .layout-clean-flat [data-slot="table-head"] {
   background-color: #1a1a27 !important;
   border-bottom: 1px solid #2b2b40 !important;
   color: #a1a5b7 !important;
 }
 /* Crisp table cell styles */
-.layout-clean-flat td {
+.layout-clean-flat [data-slot="table-cell"] {
   border-bottom: 1px solid #f1f3f7 !important;
   color: #5e6278 !important;
   font-size: 0.8125rem !important;
 }
-.dark.layout-clean-flat td,
-.dark .layout-clean-flat td {
+.dark.layout-clean-flat [data-slot="table-cell"],
+.dark .layout-clean-flat [data-slot="table-cell"] {
   border-bottom: 1px solid rgba(43, 43, 64, 0.6) !important;
   color: #a1a5b7 !important;
 }
 /* Table row hover state */
-.layout-clean-flat tr:hover td {
+.layout-clean-flat [data-slot="table-row"]:hover [data-slot="table-cell"] {
   background-color: #f9f9f9 !important;
 }
-.dark.layout-clean-flat tr:hover td,
-.dark .layout-clean-flat tr:hover td {
+.dark.layout-clean-flat [data-slot="table-row"]:hover [data-slot="table-cell"],
+.dark .layout-clean-flat [data-slot="table-row"]:hover [data-slot="table-cell"] {
   background-color: rgba(43, 43, 64, 0.3) !important;
 }
 /* Sidebar layout adjustments for clean-flat theme */
-.layout-clean-flat aside {
+.layout-clean-flat [data-svadmin-sidebar] {
   background: #fafbfc !important;
   color: #181c32 !important;
   border-right-color: #f1f3f7 !important;
   box-shadow: none !important;
 }
-.dark.layout-clean-flat aside,
-.dark .layout-clean-flat aside {
+.dark.layout-clean-flat [data-svadmin-sidebar],
+.dark .layout-clean-flat [data-svadmin-sidebar] {
   background: #1e1e2d !important;
   color: #a1a5b7 !important;
   border-right-color: #2b2b40 !important;
@@ -843,12 +843,12 @@ main {
 }
 /* svadmin flat list and edit surfaces */
-[data-svadmin-list-header],
-[data-svadmin-table-toolbar],
-[data-svadmin-table-card],
-[data-svadmin-form-header],
-[data-svadmin-form-card],
-[data-svadmin-form-actions] {
+.layout-clean-flat [data-svadmin-list-header],
+.layout-clean-flat [data-svadmin-table-toolbar],
+.layout-clean-flat [data-svadmin-table-card],
+.layout-clean-flat [data-svadmin-form-header],
+.layout-clean-flat [data-svadmin-form-card],
+.layout-clean-flat [data-svadmin-form-actions] {
   box-shadow: none !important;
 }
@@ -880,12 +880,12 @@ main {
   background: #f9f9f9 !important;
 }
-[data-svadmin-datatable] {
+.layout-clean-flat [data-svadmin-datatable] {
   border-collapse: separate !important;
   border-spacing: 0 !important;
 }
-[data-svadmin-table-head] [data-slot="table-head"] {
+.layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"] {
   height: 3.25rem !important;
   border-bottom: 1px solid rgba(225, 227, 234, 0.78) !important;
   background: #f9f9f9 !important;
@@ -896,59 +896,59 @@ main {
   text-transform: uppercase !important;
 }
-[data-svadmin-table-row] {
+.layout-clean-flat [data-svadmin-table-row] {
   border-bottom-color: rgba(241, 243, 247, 0.95) !important;
 }
-[data-svadmin-table-row] [data-slot="table-cell"] {
+.layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"] {
   height: 3.625rem !important;
   color: #5e6278 !important;
   font-size: 0.8125rem !important;
 }
-[data-svadmin-table-row]:hover [data-slot="table-cell"] {
+.layout-clean-flat [data-svadmin-table-row]:hover [data-slot="table-cell"] {
   background: #fbfcfd !important;
 }
-[data-svadmin-pagination] {
+.layout-clean-flat [data-svadmin-pagination] {
   border-radius: 0.5rem;
   padding: 0.35rem 0.15rem;
 }
-[data-svadmin-form-content] {
+.layout-clean-flat [data-svadmin-form-content] {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
-[data-svadmin-form-row] {
+.layout-clean-flat [data-svadmin-form-row] {
   border-bottom: 1px solid rgba(241, 243, 247, 0.95);
   padding: 1.35rem 0;
 }
-[data-svadmin-form-row]:last-child {
+.layout-clean-flat [data-svadmin-form-row]:last-child {
   border-bottom: 0;
 }
-[data-svadmin-field-label] {
+.layout-clean-flat [data-svadmin-field-label] {
   color: #3f4254 !important;
   font-weight: 600 !important;
 }
-[data-svadmin-form-settings] [data-slot="input"],
-[data-svadmin-form-settings] textarea,
-[data-svadmin-form-settings] [data-slot="select-trigger"] {
+.layout-clean-flat [data-svadmin-form-settings] [data-slot="input"],
+.layout-clean-flat [data-svadmin-form-settings] textarea,
+.layout-clean-flat [data-svadmin-form-settings] [data-slot="select-trigger"] {
   min-height: 2.75rem !important;
   border-radius: 0.5rem !important;
   background: #f9f9f9 !important;
 }
-[data-svadmin-form-actions] {
+.layout-clean-flat [data-svadmin-form-actions] {
   width: fit-content;
   max-width: 100%;
 }
 @media (min-width: 768px) {
-  [data-svadmin-form-settings] [data-svadmin-field] {
+  .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] {
     display: grid !important;
     grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) !important;
     align-items: start !important;
@@ -956,45 +956,50 @@ main {
     row-gap: 0.35rem !important;
   }
-  [data-svadmin-form-settings] [data-svadmin-field] > [data-svadmin-field-label] {
+  .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] > [data-svadmin-field-label] {
     padding-top: 0.8rem !important;
   }
-  [data-svadmin-form-settings] [data-svadmin-field] > :not([data-svadmin-field-label]) {
+  .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] > :not([data-svadmin-field-label]) {
     grid-column: 2 !important;
   }
 }
-.dark [data-svadmin-table-head] [data-slot="table-head"] {
+.dark.layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"],
+.dark .layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"] {
   background: #1a1a27 !important;
   border-bottom-color: #2b2b40 !important;
   color: #a1a5b7 !important;
 }
-.dark [data-svadmin-table-row] {
+.dark.layout-clean-flat [data-svadmin-table-row],
+.dark .layout-clean-flat [data-svadmin-table-row] {
   border-bottom-color: rgba(43, 43, 64, 0.82) !important;
 }
-.dark [data-svadmin-table-row] [data-slot="table-cell"] {
+.dark.layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"],
+.dark .layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"] {
   color: #a1a5b7 !important;
 }
-.dark [data-svadmin-table-row]:hover [data-slot="table-cell"] {
+.dark.layout-clean-flat [data-svadmin-table-row]:hover [data-slot="table-cell"],
+.dark .layout-clean-flat [data-svadmin-table-row]:hover [data-slot="table-cell"] {
   background: rgba(43, 43, 64, 0.32) !important;
 }
-.dark [data-svadmin-form-row] {
+.dark.layout-clean-flat [data-svadmin-form-row],
+.dark .layout-clean-flat [data-svadmin-form-row] {
   border-bottom-color: rgba(43, 43, 64, 0.82);
 }
 /* ─── Flat workspace redesign pass: non-sidebar pages ─── */
-.layout-clean-flat main {
+.layout-clean-flat [data-svadmin-main] {
   background:
     linear-gradient(180deg, color-mix(in oklch, var(--background) 86%, white) 0%, var(--background) 34rem),
     var(--background) !important;
 }
-.layout-clean-flat main > div {
+.layout-clean-flat [data-svadmin-main] > div {
   min-width: 0 !important;
 }
@@ -1025,86 +1030,86 @@ main {
   min-width: 0 !important;
 }
-.layout-clean-flat main section,
-.layout-clean-flat main [class*="grid"],
-.layout-clean-flat main [class*="flex"],
-.layout-clean-flat main [data-slot="card-content"] {
+.layout-clean-flat [data-svadmin-main] section,
+.layout-clean-flat [data-svadmin-main] [class*="grid"],
+.layout-clean-flat [data-svadmin-main] [class*="flex"],
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] {
   min-width: 0;
 }
-.layout-clean-flat main h1,
-.layout-clean-flat main h2,
-.layout-clean-flat main h3,
-.layout-clean-flat main p,
-.layout-clean-flat main [data-slot="badge"] {
+.layout-clean-flat [data-svadmin-main] h1,
+.layout-clean-flat [data-svadmin-main] h2,
+.layout-clean-flat [data-svadmin-main] h3,
+.layout-clean-flat [data-svadmin-main] p,
+.layout-clean-flat [data-svadmin-main] [data-slot="badge"] {
   max-width: 100%;
 }
-.layout-clean-flat main h1,
-.layout-clean-flat main h2,
-.layout-clean-flat main h3,
-.layout-clean-flat main [data-slot="card-title"] {
+.layout-clean-flat [data-svadmin-main] h1,
+.layout-clean-flat [data-svadmin-main] h2,
+.layout-clean-flat [data-svadmin-main] h3,
+.layout-clean-flat [data-svadmin-main] [data-slot="card-title"] {
   overflow-wrap: anywhere;
 }
-.layout-clean-flat main p,
-.layout-clean-flat main [data-slot="card-description"] {
+.layout-clean-flat [data-svadmin-main] p,
+.layout-clean-flat [data-svadmin-main] [data-slot="card-description"] {
   overflow-wrap: break-word;
 }
-.layout-clean-flat main > div[class*="space-y"] > section:first-child {
+.layout-clean-flat [data-svadmin-main] > div[class*="space-y"] > section:first-child {
   border-radius: 0 !important;
   background: transparent !important;
 }
-.layout-clean-flat main > div[class*="space-y"] > section:first-child [data-slot="card"],
-.layout-clean-flat main > div[class*="space-y"] > section:first-child + [class*="grid"] [data-slot="card"],
-.layout-clean-flat main [data-svadmin-ops-hero] [data-slot="card"] {
+.layout-clean-flat [data-svadmin-main] > div[class*="space-y"] > section:first-child [data-slot="card"],
+.layout-clean-flat [data-svadmin-main] > div[class*="space-y"] > section:first-child + [class*="grid"] [data-slot="card"],
+.layout-clean-flat [data-svadmin-main] [data-svadmin-ops-hero] [data-slot="card"] {
   background: transparent !important;
   border-color: color-mix(in oklch, var(--border) 72%, transparent) !important;
   box-shadow: none !important;
 }
-.layout-clean-flat main > div[class*="space-y"] > section:first-child [data-slot="card"]:has([data-slot="card"]),
-.layout-clean-flat main [data-slot="card"]:has(> [data-slot="card-content"] [data-svadmin-table-card]) {
+.layout-clean-flat [data-svadmin-main] > div[class*="space-y"] > section:first-child [data-slot="card"]:has([data-slot="card"]),
+.layout-clean-flat [data-svadmin-main] [data-slot="card"]:has(> [data-slot="card-content"] [data-svadmin-table-card]) {
   border: 0 !important;
   background: transparent !important;
   padding: 0 !important;
 }
-.layout-clean-flat main [data-slot="card"] [data-slot="card"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="card"] [data-slot="card"] {
   background: color-mix(in oklch, var(--card) 88%, var(--background)) !important;
   border-color: color-mix(in oklch, var(--border) 70%, transparent) !important;
 }
-.layout-clean-flat main [data-slot="card-content"] > .flex,
-.layout-clean-flat main [data-slot="card-content"] > .grid {
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] > .flex,
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] > .grid {
   min-width: 0;
 }
-.layout-clean-flat main [data-slot="card-content"] span[class*="h-10"][class*="w-10"],
-.layout-clean-flat main [data-slot="card-content"] span[class*="h-11"][class*="w-11"],
-.layout-clean-flat main [data-slot="card-content"] span[class*="h-12"][class*="w-12"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] span[class*="h-10"][class*="w-10"],
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] span[class*="h-11"][class*="w-11"],
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] span[class*="h-12"][class*="w-12"] {
   flex-shrink: 0;
 }
-.layout-clean-flat main [data-slot="card-content"] [class*="text-2xl"],
-.layout-clean-flat main [data-slot="card-content"] [class*="text-3xl"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] [class*="text-2xl"],
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] [class*="text-3xl"] {
   line-height: 1.12;
 }
-.layout-clean-flat main [data-slot="badge"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="badge"] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.layout-clean-flat main [data-slot="tabs-list"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="tabs-list"] {
   min-width: 0;
   border-radius: 0.5rem !important;
 }
-.layout-clean-flat main [data-slot="tabs-trigger"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="tabs-trigger"] {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1194,29 +1199,29 @@ main {
 }
 @media (max-width: 767px) {
-  .layout-clean-flat main {
+  .layout-clean-flat [data-svadmin-main] {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
   }
-  .layout-clean-flat main h1 {
+  .layout-clean-flat [data-svadmin-main] h1 {
     font-size: clamp(1.75rem, 1.55rem + 1vw, 2.125rem) !important;
   }
-  .layout-clean-flat main [data-slot="card"] {
+  .layout-clean-flat [data-svadmin-main] [data-slot="card"] {
     border-left: 1px solid color-mix(in oklch, var(--border) 72%, transparent) !important;
     border-right: 1px solid color-mix(in oklch, var(--border) 72%, transparent) !important;
     border-radius: 0.5rem !important;
   }
-  .layout-clean-flat main [data-slot="card-header"],
-  .layout-clean-flat main [data-slot="card-content"],
-  .layout-clean-flat main [data-slot="card-footer"] {
+  .layout-clean-flat [data-svadmin-main] [data-slot="card-header"],
+  .layout-clean-flat [data-svadmin-main] [data-slot="card-content"],
+  .layout-clean-flat [data-svadmin-main] [data-slot="card-footer"] {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
   }
-  .layout-clean-flat main > div[class*="space-y"] > section:first-child {
+  .layout-clean-flat [data-svadmin-main] > div[class*="space-y"] > section:first-child {
     padding-bottom: 1rem !important;
   }
@@ -1255,14 +1260,14 @@ main {
 }
 @media (min-width: 768px) and (max-width: 1023px) {
-  .layout-clean-flat main [class*="md:grid-cols"],
-  .layout-clean-flat main [class*="lg:grid-cols"],
-  .layout-clean-flat main [class*="xl:grid-cols"] {
+  .layout-clean-flat [data-svadmin-main] [class*="md:grid-cols"],
+  .layout-clean-flat [data-svadmin-main] [class*="lg:grid-cols"],
+  .layout-clean-flat [data-svadmin-main] [class*="xl:grid-cols"] {
     grid-template-columns: minmax(0, 1fr) !important;
   }
-  .layout-clean-flat main [class*="lg:flex-row"],
-  .layout-clean-flat main [class*="xl:flex-row"] {
+  .layout-clean-flat [data-svadmin-main] [class*="lg:flex-row"],
+  .layout-clean-flat [data-svadmin-main] [class*="xl:flex-row"] {
     flex-direction: column !important;
     align-items: stretch !important;
   }

package/dist/app.theme.css CHANGED Viewed

@@ -678,15 +678,15 @@ main {
 }
 /* Base card flat background overrides */
-.layout-clean-flat .bg-card,
+.layout-clean-flat [data-svadmin-content-page] .bg-card,
 .layout-clean-flat [data-slot="card"] {
   background: #ffffff !important;
   border: 1px solid #f1f3f7 !important;
   box-shadow: none !important;
   border-radius: 0.5rem !important;
 }
-.dark.layout-clean-flat .bg-card,
-.dark .layout-clean-flat .bg-card,
+.dark.layout-clean-flat [data-svadmin-content-page] .bg-card,
+.dark .layout-clean-flat [data-svadmin-content-page] .bg-card,
 .dark.layout-clean-flat [data-slot="card"],
 .dark .layout-clean-flat [data-slot="card"] {
   background: #1e1e2d !important;
@@ -695,7 +695,7 @@ main {
 }
 /* Crisp table header styles */
-.layout-clean-flat th {
+.layout-clean-flat [data-slot="table-head"] {
   background-color: #f9f9f9 !important;
   border-bottom: 1px solid #f1f3f7 !important;
   color: #181c32 !important;
@@ -704,43 +704,43 @@ main {
   text-transform: uppercase !important;
   letter-spacing: 0.05em !important;
 }
-.dark.layout-clean-flat th,
-.dark .layout-clean-flat th {
+.dark.layout-clean-flat [data-slot="table-head"],
+.dark .layout-clean-flat [data-slot="table-head"] {
   background-color: #1a1a27 !important;
   border-bottom: 1px solid #2b2b40 !important;
   color: #a1a5b7 !important;
 }
 /* Crisp table cell styles */
-.layout-clean-flat td {
+.layout-clean-flat [data-slot="table-cell"] {
   border-bottom: 1px solid #f1f3f7 !important;
   color: #5e6278 !important;
   font-size: 0.8125rem !important;
 }
-.dark.layout-clean-flat td,
-.dark .layout-clean-flat td {
+.dark.layout-clean-flat [data-slot="table-cell"],
+.dark .layout-clean-flat [data-slot="table-cell"] {
   border-bottom: 1px solid rgba(43, 43, 64, 0.6) !important;
   color: #a1a5b7 !important;
 }
 /* Table row hover state */
-.layout-clean-flat tr:hover td {
+.layout-clean-flat [data-slot="table-row"]:hover [data-slot="table-cell"] {
   background-color: #f9f9f9 !important;
 }
-.dark.layout-clean-flat tr:hover td,
-.dark .layout-clean-flat tr:hover td {
+.dark.layout-clean-flat [data-slot="table-row"]:hover [data-slot="table-cell"],
+.dark .layout-clean-flat [data-slot="table-row"]:hover [data-slot="table-cell"] {
   background-color: rgba(43, 43, 64, 0.3) !important;
 }
 /* Sidebar layout adjustments for clean-flat theme */
-.layout-clean-flat aside {
+.layout-clean-flat [data-svadmin-sidebar] {
   background: #fafbfc !important;
   color: #181c32 !important;
   border-right-color: #f1f3f7 !important;
   box-shadow: none !important;
 }
-.dark.layout-clean-flat aside,
-.dark .layout-clean-flat aside {
+.dark.layout-clean-flat [data-svadmin-sidebar],
+.dark .layout-clean-flat [data-svadmin-sidebar] {
   background: #1e1e2d !important;
   color: #a1a5b7 !important;
   border-right-color: #2b2b40 !important;
@@ -842,12 +842,12 @@ main {
 }
 /* svadmin flat list and edit surfaces */
-[data-svadmin-list-header],
-[data-svadmin-table-toolbar],
-[data-svadmin-table-card],
-[data-svadmin-form-header],
-[data-svadmin-form-card],
-[data-svadmin-form-actions] {
+.layout-clean-flat [data-svadmin-list-header],
+.layout-clean-flat [data-svadmin-table-toolbar],
+.layout-clean-flat [data-svadmin-table-card],
+.layout-clean-flat [data-svadmin-form-header],
+.layout-clean-flat [data-svadmin-form-card],
+.layout-clean-flat [data-svadmin-form-actions] {
   box-shadow: none !important;
 }
@@ -879,12 +879,12 @@ main {
   background: #f9f9f9 !important;
 }
-[data-svadmin-datatable] {
+.layout-clean-flat [data-svadmin-datatable] {
   border-collapse: separate !important;
   border-spacing: 0 !important;
 }
-[data-svadmin-table-head] [data-slot="table-head"] {
+.layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"] {
   height: 3.25rem !important;
   border-bottom: 1px solid rgba(225, 227, 234, 0.78) !important;
   background: #f9f9f9 !important;
@@ -895,59 +895,59 @@ main {
   text-transform: uppercase !important;
 }
-[data-svadmin-table-row] {
+.layout-clean-flat [data-svadmin-table-row] {
   border-bottom-color: rgba(241, 243, 247, 0.95) !important;
 }
-[data-svadmin-table-row] [data-slot="table-cell"] {
+.layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"] {
   height: 3.625rem !important;
   color: #5e6278 !important;
   font-size: 0.8125rem !important;
 }
-[data-svadmin-table-row]:hover [data-slot="table-cell"] {
+.layout-clean-flat [data-svadmin-table-row]:hover [data-slot="table-cell"] {
   background: #fbfcfd !important;
 }
-[data-svadmin-pagination] {
+.layout-clean-flat [data-svadmin-pagination] {
   border-radius: 0.5rem;
   padding: 0.35rem 0.15rem;
 }
-[data-svadmin-form-content] {
+.layout-clean-flat [data-svadmin-form-content] {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
-[data-svadmin-form-row] {
+.layout-clean-flat [data-svadmin-form-row] {
   border-bottom: 1px solid rgba(241, 243, 247, 0.95);
   padding: 1.35rem 0;
 }
-[data-svadmin-form-row]:last-child {
+.layout-clean-flat [data-svadmin-form-row]:last-child {
   border-bottom: 0;
 }
-[data-svadmin-field-label] {
+.layout-clean-flat [data-svadmin-field-label] {
   color: #3f4254 !important;
   font-weight: 600 !important;
 }
-[data-svadmin-form-settings] [data-slot="input"],
-[data-svadmin-form-settings] textarea,
-[data-svadmin-form-settings] [data-slot="select-trigger"] {
+.layout-clean-flat [data-svadmin-form-settings] [data-slot="input"],
+.layout-clean-flat [data-svadmin-form-settings] textarea,
+.layout-clean-flat [data-svadmin-form-settings] [data-slot="select-trigger"] {
   min-height: 2.75rem !important;
   border-radius: 0.5rem !important;
   background: #f9f9f9 !important;
 }
-[data-svadmin-form-actions] {
+.layout-clean-flat [data-svadmin-form-actions] {
   width: fit-content;
   max-width: 100%;
 }
 @media (min-width: 768px) {
-  [data-svadmin-form-settings] [data-svadmin-field] {
+  .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] {
     display: grid !important;
     grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) !important;
     align-items: start !important;
@@ -955,45 +955,50 @@ main {
     row-gap: 0.35rem !important;
   }
-  [data-svadmin-form-settings] [data-svadmin-field] > [data-svadmin-field-label] {
+  .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] > [data-svadmin-field-label] {
     padding-top: 0.8rem !important;
   }
-  [data-svadmin-form-settings] [data-svadmin-field] > :not([data-svadmin-field-label]) {
+  .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] > :not([data-svadmin-field-label]) {
     grid-column: 2 !important;
   }
 }
-.dark [data-svadmin-table-head] [data-slot="table-head"] {
+.dark.layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"],
+.dark .layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"] {
   background: #1a1a27 !important;
   border-bottom-color: #2b2b40 !important;
   color: #a1a5b7 !important;
 }
-.dark [data-svadmin-table-row] {
+.dark.layout-clean-flat [data-svadmin-table-row],
+.dark .layout-clean-flat [data-svadmin-table-row] {
   border-bottom-color: rgba(43, 43, 64, 0.82) !important;
 }
-.dark [data-svadmin-table-row] [data-slot="table-cell"] {
+.dark.layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"],
+.dark .layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"] {
   color: #a1a5b7 !important;
 }
-.dark [data-svadmin-table-row]:hover [data-slot="table-cell"] {
+.dark.layout-clean-flat [data-svadmin-table-row]:hover [data-slot="table-cell"],
+.dark .layout-clean-flat [data-svadmin-table-row]:hover [data-slot="table-cell"] {
   background: rgba(43, 43, 64, 0.32) !important;
 }
-.dark [data-svadmin-form-row] {
+.dark.layout-clean-flat [data-svadmin-form-row],
+.dark .layout-clean-flat [data-svadmin-form-row] {
   border-bottom-color: rgba(43, 43, 64, 0.82);
 }
 /* ─── Flat workspace redesign pass: non-sidebar pages ─── */
-.layout-clean-flat main {
+.layout-clean-flat [data-svadmin-main] {
   background:
     linear-gradient(180deg, color-mix(in oklch, var(--background) 86%, white) 0%, var(--background) 34rem),
     var(--background) !important;
 }
-.layout-clean-flat main > div {
+.layout-clean-flat [data-svadmin-main] > div {
   min-width: 0 !important;
 }
@@ -1024,86 +1029,86 @@ main {
   min-width: 0 !important;
 }
-.layout-clean-flat main section,
-.layout-clean-flat main [class*="grid"],
-.layout-clean-flat main [class*="flex"],
-.layout-clean-flat main [data-slot="card-content"] {
+.layout-clean-flat [data-svadmin-main] section,
+.layout-clean-flat [data-svadmin-main] [class*="grid"],
+.layout-clean-flat [data-svadmin-main] [class*="flex"],
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] {
   min-width: 0;
 }
-.layout-clean-flat main h1,
-.layout-clean-flat main h2,
-.layout-clean-flat main h3,
-.layout-clean-flat main p,
-.layout-clean-flat main [data-slot="badge"] {
+.layout-clean-flat [data-svadmin-main] h1,
+.layout-clean-flat [data-svadmin-main] h2,
+.layout-clean-flat [data-svadmin-main] h3,
+.layout-clean-flat [data-svadmin-main] p,
+.layout-clean-flat [data-svadmin-main] [data-slot="badge"] {
   max-width: 100%;
 }
-.layout-clean-flat main h1,
-.layout-clean-flat main h2,
-.layout-clean-flat main h3,
-.layout-clean-flat main [data-slot="card-title"] {
+.layout-clean-flat [data-svadmin-main] h1,
+.layout-clean-flat [data-svadmin-main] h2,
+.layout-clean-flat [data-svadmin-main] h3,
+.layout-clean-flat [data-svadmin-main] [data-slot="card-title"] {
   overflow-wrap: anywhere;
 }
-.layout-clean-flat main p,
-.layout-clean-flat main [data-slot="card-description"] {
+.layout-clean-flat [data-svadmin-main] p,
+.layout-clean-flat [data-svadmin-main] [data-slot="card-description"] {
   overflow-wrap: break-word;
 }
-.layout-clean-flat main > div[class*="space-y"] > section:first-child {
+.layout-clean-flat [data-svadmin-main] > div[class*="space-y"] > section:first-child {
   border-radius: 0 !important;
   background: transparent !important;
 }
-.layout-clean-flat main > div[class*="space-y"] > section:first-child [data-slot="card"],
-.layout-clean-flat main > div[class*="space-y"] > section:first-child + [class*="grid"] [data-slot="card"],
-.layout-clean-flat main [data-svadmin-ops-hero] [data-slot="card"] {
+.layout-clean-flat [data-svadmin-main] > div[class*="space-y"] > section:first-child [data-slot="card"],
+.layout-clean-flat [data-svadmin-main] > div[class*="space-y"] > section:first-child + [class*="grid"] [data-slot="card"],
+.layout-clean-flat [data-svadmin-main] [data-svadmin-ops-hero] [data-slot="card"] {
   background: transparent !important;
   border-color: color-mix(in oklch, var(--border) 72%, transparent) !important;
   box-shadow: none !important;
 }
-.layout-clean-flat main > div[class*="space-y"] > section:first-child [data-slot="card"]:has([data-slot="card"]),
-.layout-clean-flat main [data-slot="card"]:has(> [data-slot="card-content"] [data-svadmin-table-card]) {
+.layout-clean-flat [data-svadmin-main] > div[class*="space-y"] > section:first-child [data-slot="card"]:has([data-slot="card"]),
+.layout-clean-flat [data-svadmin-main] [data-slot="card"]:has(> [data-slot="card-content"] [data-svadmin-table-card]) {
   border: 0 !important;
   background: transparent !important;
   padding: 0 !important;
 }
-.layout-clean-flat main [data-slot="card"] [data-slot="card"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="card"] [data-slot="card"] {
   background: color-mix(in oklch, var(--card) 88%, var(--background)) !important;
   border-color: color-mix(in oklch, var(--border) 70%, transparent) !important;
 }
-.layout-clean-flat main [data-slot="card-content"] > .flex,
-.layout-clean-flat main [data-slot="card-content"] > .grid {
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] > .flex,
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] > .grid {
   min-width: 0;
 }
-.layout-clean-flat main [data-slot="card-content"] span[class*="h-10"][class*="w-10"],
-.layout-clean-flat main [data-slot="card-content"] span[class*="h-11"][class*="w-11"],
-.layout-clean-flat main [data-slot="card-content"] span[class*="h-12"][class*="w-12"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] span[class*="h-10"][class*="w-10"],
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] span[class*="h-11"][class*="w-11"],
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] span[class*="h-12"][class*="w-12"] {
   flex-shrink: 0;
 }
-.layout-clean-flat main [data-slot="card-content"] [class*="text-2xl"],
-.layout-clean-flat main [data-slot="card-content"] [class*="text-3xl"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] [class*="text-2xl"],
+.layout-clean-flat [data-svadmin-main] [data-slot="card-content"] [class*="text-3xl"] {
   line-height: 1.12;
 }
-.layout-clean-flat main [data-slot="badge"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="badge"] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.layout-clean-flat main [data-slot="tabs-list"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="tabs-list"] {
   min-width: 0;
   border-radius: 0.5rem !important;
 }
-.layout-clean-flat main [data-slot="tabs-trigger"] {
+.layout-clean-flat [data-svadmin-main] [data-slot="tabs-trigger"] {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1193,29 +1198,29 @@ main {
 }
 @media (max-width: 767px) {
-  .layout-clean-flat main {
+  .layout-clean-flat [data-svadmin-main] {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
   }
-  .layout-clean-flat main h1 {
+  .layout-clean-flat [data-svadmin-main] h1 {
     font-size: clamp(1.75rem, 1.55rem + 1vw, 2.125rem) !important;
   }
-  .layout-clean-flat main [data-slot="card"] {
+  .layout-clean-flat [data-svadmin-main] [data-slot="card"] {
     border-left: 1px solid color-mix(in oklch, var(--border) 72%, transparent) !important;
     border-right: 1px solid color-mix(in oklch, var(--border) 72%, transparent) !important;
     border-radius: 0.5rem !important;
   }
-  .layout-clean-flat main [data-slot="card-header"],
-  .layout-clean-flat main [data-slot="card-content"],
-  .layout-clean-flat main [data-slot="card-footer"] {
+  .layout-clean-flat [data-svadmin-main] [data-slot="card-header"],
+  .layout-clean-flat [data-svadmin-main] [data-slot="card-content"],
+  .layout-clean-flat [data-svadmin-main] [data-slot="card-footer"] {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
   }
-  .layout-clean-flat main > div[class*="space-y"] > section:first-child {
+  .layout-clean-flat [data-svadmin-main] > div[class*="space-y"] > section:first-child {
     padding-bottom: 1rem !important;
   }
@@ -1254,14 +1259,14 @@ main {
 }
 @media (min-width: 768px) and (max-width: 1023px) {
-  .layout-clean-flat main [class*="md:grid-cols"],
-  .layout-clean-flat main [class*="lg:grid-cols"],
-  .layout-clean-flat main [class*="xl:grid-cols"] {
+  .layout-clean-flat [data-svadmin-main] [class*="md:grid-cols"],
+  .layout-clean-flat [data-svadmin-main] [class*="lg:grid-cols"],
+  .layout-clean-flat [data-svadmin-main] [class*="xl:grid-cols"] {
     grid-template-columns: minmax(0, 1fr) !important;
   }
-  .layout-clean-flat main [class*="lg:flex-row"],
-  .layout-clean-flat main [class*="xl:flex-row"] {
+  .layout-clean-flat [data-svadmin-main] [class*="lg:flex-row"],
+  .layout-clean-flat [data-svadmin-main] [class*="xl:flex-row"] {
     flex-direction: column !important;
     align-items: stretch !important;
   }

package/dist/components/AdminApp.svelte CHANGED Viewed

@@ -200,8 +200,7 @@
   const routerState = provideRouterState(untrack(() => resolvedRouter));
   const scopedRouterProvider: RouterProvider = {
     go(options) {
-      resolvedRouter.go(options);
-      routerState.sync();
+      return navigateAfterAuthCheck(options);
     },
     back() {
       resolvedRouter.back();
@@ -303,9 +302,8 @@
   // Reactive getters for route state
   const route = $derived(routerState.route);
   const params = $derived(routerState.params);
+  const path = $derived(routerState.path);
   const resourceNames = $derived(new Set(resources.map((resource) => resource.name)));
-  const hasRouteResource = $derived(!params.resource || resourceNames.has(params.resource));
-  const currentResourcePages = $derived(params.resource ? resourcePages?.[params.resource] : undefined);
   const isStandaloneTwoFactor = $derived(route === '/2fa' || route === '/authentication/branded/2fa');
   const standaloneErrorStatus = $derived.by((): '404' | '500' | undefined => {
     if (route === '/authentication/error-404' || route === '/404' || (route === '/:resource' && params.resource === '404')) return '404';
@@ -316,9 +314,82 @@
   // Auth check
   let isAuthenticated = $state(untrack(() => !resolvedAuthProvider));
   let authChecked = $state(untrack(() => !resolvedAuthProvider));
+  let checkedAuthProvider = $state.raw<AuthProvider | null>(null);
+  let checkedAuthPath = $state<string | null>(null);
+  let navigationAuthPending = $state(false);
+  let navigationCheckId = 0;
+  const authProviderPending = $derived(!!resolvedAuthProvider && checkedAuthProvider !== resolvedAuthProvider);
+  const authRechecking = $derived(
+    navigationAuthPending
+      || (!!resolvedAuthProvider
+        && !authProviderPending
+        && authChecked
+        && isAuthenticated
+        && checkedAuthPath !== path),
+  );
+  const renderedRoute = $derived(route);
+  const renderedParams = $derived(params);
+  const renderedHasRouteResource = $derived(!renderedParams.resource || resourceNames.has(renderedParams.resource));
+  const renderedResourcePages = $derived(renderedParams.resource ? resourcePages?.[renderedParams.resource] : undefined);
+  async function navigateWithinApp(path: string, options?: { replaceState?: boolean }) {
+    await adminContext.navigate(path, options);
+  }
+  async function commitNavigation(options: Parameters<RouterProvider['go']>[0]): Promise<Awaited<ReturnType<RouterProvider['go']>>> {
+    const navigated = await resolvedRouter.go(options);
+    if (navigated === false) return false;
+    routerState.sync();
+    return navigated;
+  }
+  function recordCheckedRoute(provider: AuthProvider) {
+    checkedAuthProvider = provider;
+    checkedAuthPath = routerState.path;
+  }
+  async function navigateAfterAuthCheck(options: Parameters<RouterProvider['go']>[0]): Promise<Awaited<ReturnType<RouterProvider['go']>>> {
+    const provider = resolvedAuthProvider;
+    if (!provider || checkedAuthProvider !== provider || !authChecked || !isAuthenticated) {
+      return commitNavigation(options);
+    }
+    const checkId = ++navigationCheckId;
+    navigationAuthPending = true;
+    let result: Awaited<ReturnType<AuthProvider['check']>>;
+    try {
+      result = await provider.check();
+    } catch (err) {
+      if (checkId !== navigationCheckId || provider !== resolvedAuthProvider) return false;
+      console.warn('Auth check failed:', err);
+      isAuthenticated = false;
+      authChecked = true;
+      try {
+        await navigateWithinApp('/login', { replaceState: true });
+        recordCheckedRoute(provider);
+        return false;
+      } finally {
+        if (checkId === navigationCheckId) navigationAuthPending = false;
+      }
+    }
-  async function navigateWithinApp(path: string) {
-    await adminContext.navigate(path);
+    if (checkId !== navigationCheckId || provider !== resolvedAuthProvider) return false;
+    try {
+      if (!result.authenticated) {
+        isAuthenticated = false;
+        authChecked = true;
+        await navigateWithinApp(result.redirectTo ?? '/login', { replaceState: true });
+        recordCheckedRoute(provider);
+        return false;
+      }
+      const navigated = await commitNavigation(options);
+      if (navigated === false) return false;
+      if (checkId !== navigationCheckId || provider !== resolvedAuthProvider) return false;
+      recordCheckedRoute(provider);
+      return navigated;
+    } finally {
+      if (checkId === navigationCheckId) navigationAuthPending = false;
+    }
   }
   function isPublicSystemRoute(currentRoute: string): boolean {
@@ -332,19 +403,35 @@
     let cancelled = false;
     // Explicitly track route so auth is re-checked on navigation
     const _route = route;
+    const _path = path;
+    const provider = resolvedAuthProvider;
+    navigationCheckId += 1;
+    navigationAuthPending = false;
-    if (!resolvedAuthProvider) {
+    if (!provider) {
       if (!cancelled) {
         isAuthenticated = true;
         authChecked = true;
+        checkedAuthProvider = null;
+        checkedAuthPath = _path;
       }
       return;
     }
-    authChecked = false;
-    resolvedAuthProvider.check().then(result => {
+    if (
+      untrack(() => checkedAuthProvider) === provider
+      && untrack(() => checkedAuthPath) === _path
+    ) return;
+    const providerChanged = untrack(() => checkedAuthProvider) !== provider;
+    if (providerChanged) {
+      isAuthenticated = false;
+      authChecked = false;
+    }
+    provider.check().then(result => {
       if (cancelled) return;
       isAuthenticated = result.authenticated;
       authChecked = true;
+      checkedAuthProvider = provider;
+      checkedAuthPath = _path;
       if (!result.authenticated && _route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password' && !isPublicSystemRoute(_route)) {
         void navigateWithinApp(result.redirectTo ?? '/login');
       }
@@ -353,6 +440,8 @@
       console.warn('Auth check failed:', err);
       isAuthenticated = false;
       authChecked = true;
+      checkedAuthProvider = provider;
+      checkedAuthPath = _path;
       if (_route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password' && !isPublicSystemRoute(_route)) {
         void navigateWithinApp('/login');
       }
@@ -365,7 +454,7 @@
 <QueryClientProvider client={queryClient}>
   {#if !resolvedDataProvider}
     <ConfigErrorScreen title="{title} — DataProvider is required" />
-  {:else if !authChecked}
+  {:else if !authChecked || authProviderPending}
     <div class="flex h-screen items-center justify-center">
       <div class="space-y-4 text-center">
         <div class="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary mx-auto"></div>
@@ -390,7 +479,7 @@
     <UpdatePasswordPage {title} />
   {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
     <ConfigErrorScreen title="{title} — {translation.t('common.configRequired')}" />
-  {:else if (isAuthenticated || !resolvedAuthProvider) && isStandaloneTwoFactor}
+  {:else if (isAuthenticated || !resolvedAuthProvider) && isStandaloneTwoFactor && !authRechecking}
     <SystemPageShell {title}>
       <LazyPage loader={loadTwoFactorAuthPage} props={{}} />
     </SystemPageShell>
@@ -401,47 +490,56 @@
     </SystemPageShell>
   {:else if isAuthenticated || !resolvedAuthProvider}
     <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode}>
-      {#key route + (params.resource ?? '') + (params.id ?? '') + (params.variant ?? '') + (params.columns ?? '')}
+      <div class="relative min-h-40" aria-busy={authRechecking}>
+        {#if authRechecking}
+          <div class="absolute inset-0 z-10 flex min-h-40 items-center justify-center bg-background/80" role="status" aria-live="polite">
+            <div class="space-y-3 text-center">
+              <div class="h-6 w-6 animate-spin rounded-full border-4 border-muted border-t-primary mx-auto"></div>
+              <p class="text-sm text-muted-foreground">Loading...</p>
+            </div>
+          </div>
+        {:else}
+      {#key renderedRoute + (renderedParams.resource ?? '') + (renderedParams.id ?? '') + (renderedParams.variant ?? '') + (renderedParams.columns ?? '')}
       <div class="svadmin-page-enter">
-      {#if route === '/public-profile'}
+      {#if renderedRoute === '/public-profile'}
         <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects' }} />
-      {:else if route === '/public-profile/projects/:columns'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects', columns: params.columns?.includes('3') ? 3 : 2 }} />
-      {:else if route === '/public-profile/activity'}
+      {:else if renderedRoute === '/public-profile/projects/:columns'}
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'projects', columns: renderedParams.columns?.includes('3') ? 3 : 2 }} />
+      {:else if renderedRoute === '/public-profile/activity'}
         <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'activity' }} />
-      {:else if route === '/public-profile/teams'}
+      {:else if renderedRoute === '/public-profile/teams'}
         <LazyPage loader={loadPublicProfilePage} props={{ variant: 'default', initialTab: 'teams' }} />
-      {:else if route === '/public-profile/profiles/:variant'}
-        <LazyPage loader={loadPublicProfilePage} props={{ variant: (params.variant === 'company' || params.variant === 'gamer' || params.variant === 'default' ? params.variant : 'default') as 'company' | 'gamer' | 'default', showSections: true }} />
-      {:else if route === '/account/get-started' || route === '/account/home/get-started'}
+      {:else if renderedRoute === '/public-profile/profiles/:variant'}
+        <LazyPage loader={loadPublicProfilePage} props={{ variant: (renderedParams.variant === 'company' || renderedParams.variant === 'gamer' || renderedParams.variant === 'default' ? renderedParams.variant : 'default') as 'company' | 'gamer' | 'default', showSections: true }} />
+      {:else if renderedRoute === '/account/get-started' || renderedRoute === '/account/home/get-started'}
         <LazyPage loader={loadGetStartedPage} props={{}} />
-      {:else if route === '/account/home/user-profile'}
+      {:else if renderedRoute === '/account/home/user-profile'}
         <LazyPage loader={loadUserProfilePage} props={{}} />
-      {:else if route === '/account/company-profile' || route === '/account/home/company-profile'}
+      {:else if renderedRoute === '/account/company-profile' || renderedRoute === '/account/home/company-profile'}
         <LazyPage loader={loadCompanyProfilePage} props={{}} />
-      {:else if route === '/account/settings-plain' || route === '/account/home/settings-plain'}
+      {:else if renderedRoute === '/account/settings-plain' || renderedRoute === '/account/home/settings-plain'}
         <LazyPage loader={loadSettingsPlainPage} props={{}} />
-      {:else if route === '/account/settings-sidebar' || route === '/account/home/settings-sidebar'}
+      {:else if renderedRoute === '/account/settings-sidebar' || renderedRoute === '/account/home/settings-sidebar'}
         <LazyPage loader={loadSettingsSidebarPage} props={{}} />
-      {:else if route === '/account/settings-enterprise' || route === '/account/home/settings-enterprise'}
+      {:else if renderedRoute === '/account/settings-enterprise' || renderedRoute === '/account/home/settings-enterprise'}
         <LazyPage loader={loadSettingsEnterprisePage} props={{}} />
-      {:else if route === '/account/:tab'}
+      {:else if renderedRoute === '/account/:tab'}
         <SettingsPage />
-      {:else if route === '/account/import-members' || route === '/account/members/import-members'}
+      {:else if renderedRoute === '/account/import-members' || renderedRoute === '/account/members/import-members'}
         <LazyPage loader={loadImportMembersPage} props={{}} />
-      {:else if route === '/account/members-starter' || route === '/account/members/members-starter'}
+      {:else if renderedRoute === '/account/members-starter' || renderedRoute === '/account/members/members-starter'}
         <LazyPage loader={loadMembersStarterPage} props={{}} />
-      {:else if route === '/account/team-members' || route === '/account/members/team-members'}
+      {:else if renderedRoute === '/account/team-members' || renderedRoute === '/account/members/team-members'}
         <LazyPage loader={loadTeamMembersPage} props={{}} />
-      {:else if route === '/account/security-log' || route === '/account/security/security-log'}
+      {:else if renderedRoute === '/account/security-log' || renderedRoute === '/account/security/security-log'}
         <LazyPage loader={loadSecurityLogPage} props={{}} />
-      {:else if route === '/network/user-cards' || route === '/network/user-cards/nft'}
+      {:else if renderedRoute === '/network/user-cards' || renderedRoute === '/network/user-cards/nft'}
         <LazyPage loader={loadUserCardsNFTPage} props={{}} />
-      {:else if route === '/network/team-crew' || route === '/network/user-table/team-crew'}
+      {:else if renderedRoute === '/network/team-crew' || renderedRoute === '/network/user-table/team-crew'}
         <LazyPage loader={loadTeamCrewTablePage} props={{}} />
-      {:else if route.startsWith('/settings')}
+      {:else if renderedRoute.startsWith('/settings')}
         <SettingsPage />
-      {:else if route === '/' || route === '' || route === '/inventory-dashboard'}
+      {:else if renderedRoute === '/' || renderedRoute === '' || renderedRoute === '/inventory-dashboard'}
         {#if dashboard}
           {@render dashboard()}
         {:else}
@@ -450,30 +548,30 @@
             <p class="text-muted-foreground">{translation.t('common.dashboardHint')}</p>
           </div>
         {/if}
-      {:else if (route === '/:resource' || route === '/:parent/:parentId/:resource') && hasRouteResource}
-        {#key params.resource}
-          {@const Comp = currentResourcePages?.list ?? mergedComponents.AutoTable}
-          <Comp resourceName={params.resource} />
+      {:else if (renderedRoute === '/:resource' || renderedRoute === '/:parent/:parentId/:resource') && renderedHasRouteResource}
+        {#key renderedParams.resource}
+          {@const Comp = renderedResourcePages?.list ?? mergedComponents.AutoTable}
+          <Comp resourceName={renderedParams.resource} />
         {/key}
-      {:else if (route === '/:resource/create' || route === '/:parent/:parentId/:resource/create') && hasRouteResource}
-        {#key params.resource}
-          {@const Comp = currentResourcePages?.create ?? mergedComponents.AutoForm}
-          <Comp resourceName={params.resource} mode="create" />
+      {:else if (renderedRoute === '/:resource/create' || renderedRoute === '/:parent/:parentId/:resource/create') && renderedHasRouteResource}
+        {#key renderedParams.resource}
+          {@const Comp = renderedResourcePages?.create ?? mergedComponents.AutoForm}
+          <Comp resourceName={renderedParams.resource} mode="create" />
         {/key}
-      {:else if (route === '/:resource/edit/:id' || route === '/:parent/:parentId/:resource/edit/:id') && hasRouteResource}
-        {#key `${params.resource}-${params.id}`}
-          {@const Comp = currentResourcePages?.edit ?? mergedComponents.AutoForm}
-          <Comp resourceName={params.resource} mode="edit" id={params.id} />
+      {:else if (renderedRoute === '/:resource/edit/:id' || renderedRoute === '/:parent/:parentId/:resource/edit/:id') && renderedHasRouteResource}
+        {#key `${renderedParams.resource}-${renderedParams.id}`}
+          {@const Comp = renderedResourcePages?.edit ?? mergedComponents.AutoForm}
+          <Comp resourceName={renderedParams.resource} mode="edit" id={renderedParams.id} />
         {/key}
-      {:else if (route === '/:resource/show/:id' || route === '/:parent/:parentId/:resource/show/:id') && hasRouteResource}
-        {#key `${params.resource}-${params.id}`}
-          {@const Comp = currentResourcePages?.show ?? mergedComponents.ShowPage}
-          <Comp resourceName={params.resource} id={params.id} />
+      {:else if (renderedRoute === '/:resource/show/:id' || renderedRoute === '/:parent/:parentId/:resource/show/:id') && renderedHasRouteResource}
+        {#key `${renderedParams.resource}-${renderedParams.id}`}
+          {@const Comp = renderedResourcePages?.show ?? mergedComponents.ShowPage}
+          <Comp resourceName={renderedParams.resource} id={renderedParams.id} />
         {/key}
-      {:else if (route === '/:resource/clone/:id' || route === '/:parent/:parentId/:resource/clone/:id') && hasRouteResource}
-        {#key `${params.resource}-clone-${params.id}`}
-          {@const Comp = currentResourcePages?.clone ?? mergedComponents.AutoForm}
-          <Comp resourceName={params.resource} mode="clone" id={params.id} />
+      {:else if (renderedRoute === '/:resource/clone/:id' || renderedRoute === '/:parent/:parentId/:resource/clone/:id') && renderedHasRouteResource}
+        {#key `${renderedParams.resource}-clone-${renderedParams.id}`}
+          {@const Comp = renderedResourcePages?.clone ?? mergedComponents.AutoForm}
+          <Comp resourceName={renderedParams.resource} mode="clone" id={renderedParams.id} />
         {/key}
       {:else}
         {@const ErrorComp = mergedComponents.ErrorPage || ErrorPage}
@@ -481,6 +579,8 @@
       {/if}
       </div>
       {/key}
+        {/if}
+      </div>
     </Layout>
   {:else}
     <div class="flex h-screen items-center justify-center">

package/dist/components/Layout.svelte CHANGED Viewed

@@ -201,7 +201,7 @@
       <!-- Content area: responsive padding + centered max-width container
            so wide screens don't stretch content indefinitely (avoids sparse layouts) -->
-      <main class="flex-1 overflow-y-auto bg-muted/30 px-4 py-5 sm:px-5 md:px-7.5 md:py-7">
+      <main data-svadmin-main class="flex-1 overflow-y-auto bg-muted/30 px-4 py-5 sm:px-5 md:px-7.5 md:py-7">
         <div class="mx-auto w-full max-w-[1600px]">
           {#key getPath()}
             <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>

package/dist/components/Sidebar.svelte CHANGED Viewed

@@ -277,6 +277,7 @@
 <aside
+  data-svadmin-sidebar
   aria-label="Sidebar navigation"
   class="fixed inset-y-0 left-0 z-30 flex flex-col border-r border-border/40 transition-all duration-300"
   style="background-color: var(--sidebar);"

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.42.1",
+  "version": "0.42.3",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.36.1",
+    "@svadmin/core": "^0.36.3",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",