@byline/host-tanstack-start 6.10.1 → 6.11.0

package/src/admin-shell/chrome/route-error.module.css

@@ -1,3 +1,17 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
 /**
  * Route-level error / not-found components.
  *
@@ -14,101 +28,103 @@
  *   .byline-root-error-button          — root fallback retry button
  */
 
-.section,
-:global(.byline-route-error) {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
-
-.container,
-:global(.byline-route-error-container) {
-  margin-top: 8vh;
-  max-width: 42rem;
-}
+@layer byline-components.cms {
+  .section,
+  :global(.byline-route-error) {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
 
-@media (min-width: 40rem) {
   .container,
   :global(.byline-route-error-container) {
-    margin-top: 12vh;
+    margin-top: 8vh;
+    max-width: 42rem;
   }
-}
 
-.message,
-:global(.byline-route-error-message) {
-  margin-top: 0.25rem;
-}
+  @media (min-width: 40rem) {
+    .container,
+    :global(.byline-route-error-container) {
+      margin-top: 12vh;
+    }
+  }
 
-.actions,
-:global(.byline-route-error-actions) {
-  display: flex;
-  gap: 0.75rem;
-  margin-top: 1rem;
-}
+  .message,
+  :global(.byline-route-error-message) {
+    margin-top: 0.25rem;
+  }
 
-.link,
-:global(.byline-route-error-link) {
-  display: inline-flex;
-  align-items: center;
-  font-size: 0.875rem;
-  text-decoration: underline;
-}
-.link:hover,
-:global(.byline-route-error-link:hover) {
-  text-decoration: none;
-}
+  .actions,
+  :global(.byline-route-error-actions) {
+    display: flex;
+    gap: 0.75rem;
+    margin-top: 1rem;
+  }
 
-.rootRoot,
-:global(.byline-root-error) {
-  display: flex;
-  min-height: 100vh;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-}
+  .link,
+  :global(.byline-route-error-link) {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.875rem;
+    text-decoration: underline;
+  }
+  .link:hover,
+  :global(.byline-route-error-link:hover) {
+    text-decoration: none;
+  }
 
-.rootInner,
-:global(.byline-root-error-inner) {
-  max-width: 28rem;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
+  .rootRoot,
+  :global(.byline-root-error) {
+    display: flex;
+    min-height: 100vh;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+  }
 
-.rootTitle,
-:global(.byline-root-error-title) {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #dc2626;
-}
+  .rootInner,
+  :global(.byline-root-error-inner) {
+    max-width: 28rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
 
-:is([data-theme="dark"], :global(.dark)) .rootTitle,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-root-error-title) {
-  color: #f87171;
-}
+  .rootTitle,
+  :global(.byline-root-error-title) {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #dc2626;
+  }
 
-.rootDetail,
-:global(.byline-root-error-detail) {
-  font-size: 0.875rem;
-  color: var(--gray-600);
-}
+  :is([data-theme="dark"], :global(.dark)) .rootTitle,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-root-error-title) {
+    color: #f87171;
+  }
 
-:is([data-theme="dark"], :global(.dark)) .rootDetail,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-root-error-detail) {
-  color: var(--gray-400);
-}
+  .rootDetail,
+  :global(.byline-root-error-detail) {
+    font-size: 0.875rem;
+    color: var(--gray-600);
+  }
 
-.rootButton,
-:global(.byline-root-error-button) {
-  border-radius: 0.25rem;
-  background-color: #dc2626;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  color: #ffffff;
-  border: 0;
-  cursor: pointer;
-}
-.rootButton:hover,
-:global(.byline-root-error-button:hover) {
-  background-color: #b91c1c;
+  :is([data-theme="dark"], :global(.dark)) .rootDetail,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-root-error-detail) {
+    color: var(--gray-400);
+  }
+
+  .rootButton,
+  :global(.byline-root-error-button) {
+    border-radius: 0.25rem;
+    background-color: #dc2626;
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    color: #ffffff;
+    border: 0;
+    cursor: pointer;
+  }
+  .rootButton:hover,
+  :global(.byline-root-error-button:hover) {
+    background-color: #b91c1c;
+  }
 }

package/src/admin-shell/chrome/route-progress-bar.module.css

@@ -1,3 +1,17 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
 /**
  * RouteProgressBar — top-of-viewport indeterminate progress indicator for
  * admin route transitions.
@@ -8,34 +22,36 @@
  *   .byline-route-progress-bar-finishing  — bar is completing + fading out
  */
 
-.bar,
-:global(.byline-route-progress-bar) {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  height: 2px;
-  width: 0%;
-  background-color: var(--primary-500);
-  opacity: 0;
-  pointer-events: none;
-  will-change: width, opacity;
-}
+@layer byline-components.cms {
+  .bar,
+  :global(.byline-route-progress-bar) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    height: 2px;
+    width: 0%;
+    background-color: var(--primary-500);
+    opacity: 0;
+    pointer-events: none;
+    will-change: width, opacity;
+  }
 
-.barVisible,
-:global(.byline-route-progress-bar-visible) {
-  width: 90%;
-  opacity: 1;
-  transition:
-    width 8s cubic-bezier(0, 0.6, 0.1, 1),
-    opacity 100ms linear;
-}
+  .barVisible,
+  :global(.byline-route-progress-bar-visible) {
+    width: 90%;
+    opacity: 1;
+    transition:
+      width 8s cubic-bezier(0, 0.6, 0.1, 1),
+      opacity 100ms linear;
+  }
 
-.barFinishing,
-:global(.byline-route-progress-bar-finishing) {
-  width: 100%;
-  opacity: 0;
-  transition:
-    width 180ms ease-out,
-    opacity 250ms ease-out 80ms;
+  .barFinishing,
+  :global(.byline-route-progress-bar-finishing) {
+    width: 100%;
+    opacity: 0;
+    transition:
+      width 180ms ease-out,
+      opacity 250ms ease-out 80ms;
+  }
 }

package/src/admin-shell/chrome/session-change-boundary.module.css

@@ -1,3 +1,17 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
 /**
  * SessionChangeBoundary — viewport-centred interstitial shown when the
  * active login identity no longer matches the one this page was rendered
@@ -13,100 +27,102 @@
  *   .byline-session-change-actions    — button row
  */
 
-.main,
-:global(.byline-session-change) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100dvh;
-  padding: 1.5rem;
-  /* Bias the card just above the geometric centre — a dialog sitting dead
+@layer byline-components.cms {
+  .main,
+  :global(.byline-session-change) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100dvh;
+    padding: 1.5rem;
+    /* Bias the card just above the geometric centre — a dialog sitting dead
      centre optically reads as slightly low. The extra bottom padding lifts it
      by half its own value, and being proportional it degrades gracefully on
      short viewports instead of clipping the card off the top. */
-  padding-bottom: calc(1.5rem + 12vh);
-}
+    padding-bottom: calc(1.5rem + 12vh);
+  }
 
-.card,
-:global(.byline-session-change-card) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  width: 100%;
-  max-width: 30rem;
-  padding: 1.5rem;
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  border-radius: var(--border-radius-md);
-  background-color: var(--canvas-25);
-}
+  .card,
+  :global(.byline-session-change-card) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+    max-width: 30rem;
+    padding: 1.5rem;
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    border-radius: var(--border-radius-md);
+    background-color: var(--canvas-25);
+  }
 
-:is([data-theme="dark"], :global(.dark)) .card,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-session-change-card) {
-  border-color: var(--gray-700);
-  background-color: var(--canvas-800);
-}
+  :is([data-theme="dark"], :global(.dark)) .card,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-session-change-card) {
+    border-color: var(--gray-700);
+    background-color: var(--canvas-800);
+  }
 
-.title,
-:global(.byline-session-change-title) {
-  margin: 0;
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--line-height-snug);
-  letter-spacing: var(--letter-spacing-tight);
-  color: var(--gray-900);
-}
+  .title,
+  :global(.byline-session-change-title) {
+    margin: 0;
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-snug);
+    letter-spacing: var(--letter-spacing-tight);
+    color: var(--gray-900);
+  }
 
-:is([data-theme="dark"], :global(.dark)) .title,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-session-change-title) {
-  color: var(--gray-100);
-}
+  :is([data-theme="dark"], :global(.dark)) .title,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-session-change-title) {
+    color: var(--gray-100);
+  }
 
-.body,
-:global(.byline-session-change-body) {
-  margin: 0;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-relaxed);
-  color: var(--gray-700);
-}
+  .body,
+  :global(.byline-session-change-body) {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-relaxed);
+    color: var(--gray-700);
+  }
 
-:is([data-theme="dark"], :global(.dark)) .body,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-session-change-body) {
-  color: var(--gray-400);
-}
+  :is([data-theme="dark"], :global(.dark)) .body,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-session-change-body) {
+    color: var(--gray-400);
+  }
 
-.account,
-:global(.byline-session-change-account) {
-  margin: 0;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-normal);
-  color: var(--gray-900);
-  overflow-wrap: anywhere;
-}
+  .account,
+  :global(.byline-session-change-account) {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-normal);
+    color: var(--gray-900);
+    overflow-wrap: anywhere;
+  }
 
-:is([data-theme="dark"], :global(.dark)) .account,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-session-change-account) {
-  color: var(--gray-100);
-}
+  :is([data-theme="dark"], :global(.dark)) .account,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-session-change-account) {
+    color: var(--gray-100);
+  }
 
-.error,
-:global(.byline-session-change-error) {
-  margin: 0;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-relaxed);
-  color: var(--red-600);
-}
+  .error,
+  :global(.byline-session-change-error) {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-relaxed);
+    color: var(--red-600);
+  }
 
-:is([data-theme="dark"], :global(.dark)) .error,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-session-change-error) {
-  color: var(--red-400);
-}
+  :is([data-theme="dark"], :global(.dark)) .error,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-session-change-error) {
+    color: var(--red-400);
+  }
 
-.actions,
-:global(.byline-session-change-actions) {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.75rem;
-  margin-top: 0.25rem;
+  .actions,
+  :global(.byline-session-change-actions) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 0.25rem;
+  }
 }

package/src/admin-shell/chrome/sign-in-page.module.css

@@ -1,3 +1,17 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
 /**
  * SignInPage — outer wrapper for the sign-in form.
  *
@@ -14,90 +28,92 @@
  * `@byline/ui` `sign-in-form.module.css` for `.byline-sign-in-home-link`.
  */
 
-.main,
-:global(.byline-sign-in-page) {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0%;
-  align-items: stretch;
-  padding: 1.5rem;
-}
-
-.bar,
-:global(.byline-sign-in-page-bar) {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  min-height: 1.75rem;
-}
+@layer byline-components.cms {
+  .main,
+  :global(.byline-sign-in-page) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0%;
+    align-items: stretch;
+    padding: 1.5rem;
+  }
 
-.inner,
-:global(.byline-sign-in-page-inner) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  margin-top: 8vh;
-}
+  .bar,
+  :global(.byline-sign-in-page-bar) {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    min-height: 1.75rem;
+  }
 
-@media (min-width: 40rem) {
   .inner,
   :global(.byline-sign-in-page-inner) {
-    margin-top: 14vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    margin-top: 8vh;
   }
-}
 
-.checking,
-:global(.byline-sign-in-page-checking) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem 0;
-  color: inherit;
-  opacity: 0.6;
-}
+  @media (min-width: 40rem) {
+    .inner,
+    :global(.byline-sign-in-page-inner) {
+      margin-top: 14vh;
+    }
+  }
 
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+  .checking,
+  :global(.byline-sign-in-page-checking) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 0;
+    color: inherit;
+    opacity: 0.6;
+  }
 
-.card,
-:global(.byline-sign-in-page-card) {
-  width: 100%;
-}
+  .srOnly {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 
-@media (min-width: 40rem) {
   .card,
   :global(.byline-sign-in-page-card) {
-    max-width: 380px;
+    width: 100%;
   }
-}
 
-.alert,
-:global(.byline-sign-in-page-alert) {
-  width: 100%;
-  margin-top: var(--spacing-12);
-}
+  @media (min-width: 40rem) {
+    .card,
+    :global(.byline-sign-in-page-card) {
+      max-width: 380px;
+    }
+  }
 
-@media (min-width: 40rem) {
-  :global(noscript) > .alert,
-  :global(noscript) > :global(.byline-sign-in-page-alert) {
-    max-width: 380px;
+  .alert,
+  :global(.byline-sign-in-page-alert) {
+    width: 100%;
+    margin-top: var(--spacing-12);
   }
-}
 
-.actions,
-:global(.byline-sign-in-page-actions) {
-  display: flex;
-  justify-content: flex-end;
-  padding-top: var(--spacing-8);
-  margin-bottom: var(--spacing-8);
+  @media (min-width: 40rem) {
+    :global(noscript) > .alert,
+    :global(noscript) > :global(.byline-sign-in-page-alert) {
+      max-width: 380px;
+    }
+  }
+
+  .actions,
+  :global(.byline-sign-in-page-actions) {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
+  }
 }