@byline/host-tanstack-start 6.10.0 → 6.11.0

package/src/admin-shell/admin-users/delete.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;
+
 /**
  * DeleteUser — modal body for permanent admin-user deletion.
  *
@@ -9,44 +23,46 @@
  *   .byline-admin-user-delete-button    — action buttons (min-width)
  */
 
-.content,
-:global(.byline-admin-user-delete-content) {
-  gap: 0.25rem;
-}
+@layer byline-components.cms {
+  .content,
+  :global(.byline-admin-user-delete-content) {
+    gap: 0.25rem;
+  }
 
-.body,
-:global(.byline-admin-user-delete-body) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
+  .body,
+  :global(.byline-admin-user-delete-body) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
 
-.row,
-:global(.byline-admin-user-delete-row) {
-  margin: 0;
-}
+  .row,
+  :global(.byline-admin-user-delete-row) {
+    margin: 0;
+  }
 
-.warning,
-:global(.byline-admin-user-delete-warning) {
-  margin-top: 0.75rem;
-  color: var(--red-600);
-}
+  .warning,
+  :global(.byline-admin-user-delete-warning) {
+    margin-top: 0.75rem;
+    color: var(--red-600);
+  }
 
-:is([data-theme="dark"], :global(.dark)) .warning,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-delete-warning) {
-  color: var(--red-300);
-}
+  :is([data-theme="dark"], :global(.dark)) .warning,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-delete-warning) {
+    color: var(--red-300);
+  }
 
-.actions,
-:global(.byline-admin-user-delete-actions) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 1.5rem;
-}
+  .actions,
+  :global(.byline-admin-user-delete-actions) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+  }
 
-.button,
-:global(.byline-admin-user-delete-button) {
-  min-width: 4rem;
+  .button,
+  :global(.byline-admin-user-delete-button) {
+    min-width: 4rem;
+  }
 }

package/src/admin-shell/admin-users/list.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;
+
 /**
  * AdminUsersListView — paginated list of admin users with search & sort.
  *
@@ -17,148 +31,150 @@
  *   .byline-admin-users-list-drawer-scroll — scrollable drawer body
  */
 
-.head,
-:global(.byline-admin-users-list-head) {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
-.title,
-:global(.byline-admin-users-list-title) {
-  margin: 0;
-  padding-bottom: 2px;
-}
+@layer byline-components.cms {
+  .head,
+  :global(.byline-admin-users-list-head) {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
 
-.stats,
-:global(.byline-admin-users-list-stats) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: auto;
-  margin-bottom: -4px;
-  height: 28px;
-  min-width: 28px;
-  padding: 5px 6px;
-  white-space: nowrap;
-  font-size: 0.875rem;
-  line-height: 0;
-  background-color: var(--gray-25);
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-  border-radius: 0.375rem;
-}
+  .title,
+  :global(.byline-admin-users-list-title) {
+    margin: 0;
+    padding-bottom: 2px;
+  }
 
-:is([data-theme="dark"], :global(.dark)) .stats,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-users-list-stats) {
-  background-color: var(--canvas-700);
-}
+  .stats,
+  :global(.byline-admin-users-list-stats) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: auto;
+    margin-bottom: -4px;
+    height: 28px;
+    min-width: 28px;
+    padding: 5px 6px;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    line-height: 0;
+    background-color: var(--gray-25);
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+    border-radius: 0.375rem;
+  }
 
-.options,
-:global(.byline-admin-users-list-options) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-  align-items: flex-start;
-}
+  :is([data-theme="dark"], :global(.dark)) .stats,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-admin-users-list-stats) {
+    background-color: var(--canvas-700);
+  }
 
-@media (min-width: 40rem) {
   .options,
   :global(.byline-admin-users-list-options) {
-    flex-direction: row;
-    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+    align-items: flex-start;
   }
-}
 
-.optionsBottom,
-:global(.byline-admin-users-list-options-bottom) {
-  margin-top: 0;
-  margin-bottom: 1.25rem;
-}
+  @media (min-width: 40rem) {
+    .options,
+    :global(.byline-admin-users-list-options) {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
 
-.search,
-:global(.byline-admin-users-list-search) {
-  margin-right: auto;
-  width: 100%;
-  max-width: 350px;
-}
+  .optionsBottom,
+  :global(.byline-admin-users-list-options-bottom) {
+    margin-top: 0;
+    margin-bottom: 1.25rem;
+  }
 
-.pageSize,
-:global(.byline-admin-users-list-page-size) {
-  /* fallback default — overridden when sm: is active */
-}
+  .search,
+  :global(.byline-admin-users-list-search) {
+    margin-right: auto;
+    width: 100%;
+    max-width: 350px;
+  }
 
-@media (min-width: 40rem) {
   .pageSize,
   :global(.byline-admin-users-list-page-size) {
-    margin-left: auto;
+    /* fallback default — overridden when sm: is active */
   }
-}
 
-.tableWrap,
-:global(.byline-admin-users-list-table-wrap) {
-  margin-top: 0.5rem;
-  margin-bottom: 0.75rem;
-}
+  @media (min-width: 40rem) {
+    .pageSize,
+    :global(.byline-admin-users-list-page-size) {
+      margin-left: auto;
+    }
+  }
 
-.cellRight,
-:global(.byline-admin-users-list-cell-right) {
-  text-align: right;
-}
+  .tableWrap,
+  :global(.byline-admin-users-list-table-wrap) {
+    margin-top: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
 
-.notSet,
-:global(.byline-admin-users-list-not-set) {
-  font-style: italic;
-}
+  .cellRight,
+  :global(.byline-admin-users-list-cell-right) {
+    text-align: right;
+  }
 
-.padRow,
-:global(.byline-admin-users-list-pad-row) {
-  height: 32px;
-  border: 0;
-}
+  .notSet,
+  :global(.byline-admin-users-list-not-set) {
+    font-style: italic;
+  }
 
-.disabled,
-:global(.byline-admin-users-list-disabled) {
-  color: #ef4444;
-}
+  .padRow,
+  :global(.byline-admin-users-list-pad-row) {
+    height: 32px;
+    border: 0;
+  }
 
-.colGiven,
-:global(.byline-admin-users-list-col-given) {
-  width: 18%;
-}
+  .disabled,
+  :global(.byline-admin-users-list-disabled) {
+    color: #ef4444;
+  }
 
-.colFamily,
-:global(.byline-admin-users-list-col-family) {
-  width: 18%;
-}
+  .colGiven,
+  :global(.byline-admin-users-list-col-given) {
+    width: 18%;
+  }
 
-.colEmail,
-:global(.byline-admin-users-list-col-email) {
-  width: 28%;
-}
+  .colFamily,
+  :global(.byline-admin-users-list-col-family) {
+    width: 18%;
+  }
 
-.colDate,
-:global(.byline-admin-users-list-col-date) {
-  width: 18%;
-}
+  .colEmail,
+  :global(.byline-admin-users-list-col-email) {
+    width: 28%;
+  }
 
-.drawer,
-:global(.byline-admin-users-list-drawer) {
-  /* width handled via uikit prop */
-}
+  .colDate,
+  :global(.byline-admin-users-list-col-date) {
+    width: 18%;
+  }
 
-@media (min-width: 48rem) {
   .drawer,
   :global(.byline-admin-users-list-drawer) {
-    width: 600px;
+    /* width handled via uikit prop */
   }
-}
 
-.drawerScroll,
-:global(.byline-admin-users-list-drawer-scroll) {
-  max-height: calc(100vh - 160px);
-  overflow-y: auto;
+  @media (min-width: 48rem) {
+    .drawer,
+    :global(.byline-admin-users-list-drawer) {
+      width: 600px;
+    }
+  }
+
+  .drawerScroll,
+  :global(.byline-admin-users-list-drawer-scroll) {
+    max-height: calc(100vh - 160px);
+    overflow-y: auto;
+  }
 }

package/src/admin-shell/chrome/admin-app-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;
+
 /**
  * AdminAppBar — top header in the admin shell.
  *
@@ -9,69 +23,71 @@
  *   .byline-admin-app-bar-user-name — bolded display name
  */
 
-.header,
-:global(.byline-admin-app-bar) {
-  position: fixed;
-  z-index: 50;
-  height: 45px;
-  width: 100%;
-  max-width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1rem 1rem 0.75rem;
-  background-color: #ffffff;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 600;
-  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-50);
-}
-
-:is([data-theme="dark"], :global(.dark)) .header,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-app-bar) {
-  background-color: var(--canvas-800);
-  border-bottom-color: var(--canvas-700);
-}
+@layer byline-components.cms {
+  .header,
+  :global(.byline-admin-app-bar) {
+    position: fixed;
+    z-index: 50;
+    height: 45px;
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1rem 1rem 0.75rem;
+    background-color: #ffffff;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    font-weight: 600;
+    border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-50);
+  }
 
-.left,
-:global(.byline-admin-app-bar-left) {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  flex: 1 1 auto;
-  min-width: 0;
-}
+  :is([data-theme="dark"], :global(.dark)) .header,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-admin-app-bar) {
+    background-color: var(--canvas-800);
+    border-bottom-color: var(--canvas-700);
+  }
 
-.right,
-:global(.byline-admin-app-bar-right) {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 0 0 auto;
-  font-size: 0.875rem;
-  font-weight: 400;
-}
+  .left,
+  :global(.byline-admin-app-bar-left) {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
 
-.user,
-:global(.byline-admin-app-bar-user) {
-  display: none;
-  color: var(--gray-600);
-}
+  .right,
+  :global(.byline-admin-app-bar-right) {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 0 0 auto;
+    font-size: 0.875rem;
+    font-weight: 400;
+  }
 
-@media (min-width: 40rem) {
   .user,
   :global(.byline-admin-app-bar-user) {
-    display: inline;
+    display: none;
+    color: var(--gray-600);
   }
-}
 
-:is([data-theme="dark"], :global(.dark)) .user,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-app-bar-user) {
-  color: var(--gray-300);
-}
+  @media (min-width: 40rem) {
+    .user,
+    :global(.byline-admin-app-bar-user) {
+      display: inline;
+    }
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .user,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-admin-app-bar-user) {
+    color: var(--gray-300);
+  }
 
-.userName,
-:global(.byline-admin-app-bar-user-name) {
-  font-weight: 600;
+  .userName,
+  :global(.byline-admin-app-bar-user-name) {
+    font-weight: 600;
+  }
 }

package/src/admin-shell/chrome/admin-drawer-toggle.module.css

@@ -1,30 +1,46 @@
+@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;
+
 /**
  * DrawerToggle — fixed-position chevron toggle docked to the menu drawer's edge.
  *
  * Override handle: .byline-admin-drawer-toggle
  */
 
-.root,
-:global(.byline-admin-drawer-toggle) {
-  position: static;
-  top: 38px;
-  z-index: 50;
-  transition: all 300ms ease-in-out;
-}
+@layer byline-components.cms {
+  .root,
+  :global(.byline-admin-drawer-toggle) {
+    position: static;
+    top: 38px;
+    z-index: 50;
+    transition: all 300ms ease-in-out;
+  }
 
-.rootClosed,
-:global(.byline-admin-drawer-toggle-closed) {
-  left: 8px;
-}
+  .rootClosed,
+  :global(.byline-admin-drawer-toggle-closed) {
+    left: 8px;
+  }
 
-.rootOpen,
-:global(.byline-admin-drawer-toggle-open) {
-  left: 160px;
-}
+  .rootOpen,
+  :global(.byline-admin-drawer-toggle-open) {
+    left: 160px;
+  }
 
-.button,
-:global(.byline-admin-drawer-toggle-button) {
-  outline: none;
-  min-width: 36px;
-  height: 36px;
+  .button,
+  :global(.byline-admin-drawer-toggle-button) {
+    outline: none;
+    min-width: 36px;
+    height: 36px;
+  }
 }

package/src/admin-shell/chrome/admin-layout.module.css

@@ -1,3 +1,15 @@
+@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;
 /**
  * AdminLayout — the <main> wrapper used by the authenticated admin
  * shell. Hosts the menu drawer, drawer toggle, and the route content
@@ -5,17 +17,18 @@
  *
  * Override handle: .byline-admin-layout-main
  */
-
-/* `min-height`, not `height`: the document is the scroll container, so with a
+@layer byline-components.cms {
+  /* `min-height`, not `height`: the document is the scroll container, so with a
    fixed 100vh height the flex row ends at the fold and the sticky menu drawer
    inside it has nothing left to stick to — it scrolls away as soon as the
    route content runs past one viewport. Growing with the content gives the
    drawer a containing block tall enough to stay pinned all the way down. */
-.main,
-:global(.byline-admin-layout-main) {
-  display: flex;
-  min-height: 100vh;
-  width: 100%;
-  max-width: 100%;
-  padding-top: 45px;
+  .main,
+  :global(.byline-admin-layout-main) {
+    display: flex;
+    min-height: 100vh;
+    width: 100%;
+    max-width: 100%;
+    padding-top: 45px;
+  }
 }