@byline/host-tanstack-start 6.10.1 → 6.11.0

package/src/admin-shell/admin-roles/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;
+
 /**
  * AdminRolesListView — drag-and-drop role list with optimistic re-order.
  *
@@ -14,145 +28,147 @@
  *   .byline-roles-list-stats       — count badge
  */
 
-.head,
-:global(.byline-roles-list-head) {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
-.title,
-:global(.byline-roles-list-title) {
-  margin: 0;
-  padding-bottom: 2px;
-}
+@layer byline-components.cms {
+  .head,
+  :global(.byline-roles-list-head) {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
 
-.stats,
-:global(.byline-roles-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-roles-list-title) {
+    margin: 0;
+    padding-bottom: 2px;
+  }
 
-:is([data-theme="dark"], :global(.dark)) .stats,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-roles-list-stats) {
-  background-color: var(--canvas-700);
-}
+  .stats,
+  :global(.byline-roles-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;
+  }
 
-.empty,
-:global(.byline-roles-list-empty) {
-  caption-side: bottom;
-  text-align: center;
-  margin-top: 6vh;
-}
+  :is([data-theme="dark"], :global(.dark)) .stats,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-roles-list-stats) {
+    background-color: var(--canvas-700);
+  }
 
-.grip,
-:global(.byline-roles-list-grip) {
-  cursor: grab;
-}
+  .empty,
+  :global(.byline-roles-list-empty) {
+    caption-side: bottom;
+    text-align: center;
+    margin-top: 6vh;
+  }
 
-.notSet,
-:global(.byline-roles-list-not-set) {
-  font-style: italic;
-}
+  .grip,
+  :global(.byline-roles-list-grip) {
+    cursor: grab;
+  }
 
-.padRow,
-:global(.byline-roles-list-pad-row) {
-  height: 32px;
-  border: 0;
-}
+  .notSet,
+  :global(.byline-roles-list-not-set) {
+    font-style: italic;
+  }
 
-.tableWrap,
-:global(.byline-roles-list-table-wrap) {
-  margin-top: 0.5rem;
-  margin-bottom: 0.75rem;
-}
+  .padRow,
+  :global(.byline-roles-list-pad-row) {
+    height: 32px;
+    border: 0;
+  }
 
-.colDrag,
-:global(.byline-roles-list-col-drag) {
-  width: 2%;
-  padding: 0.5rem;
-}
+  .tableWrap,
+  :global(.byline-roles-list-table-wrap) {
+    margin-top: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
 
-.colName,
-:global(.byline-roles-list-col-name) {
-  width: 20%;
-}
+  .colDrag,
+  :global(.byline-roles-list-col-drag) {
+    width: 2%;
+    padding: 0.5rem;
+  }
 
-.colMachine,
-:global(.byline-roles-list-col-machine) {
-  width: 20%;
-}
+  .colName,
+  :global(.byline-roles-list-col-name) {
+    width: 20%;
+  }
 
-.colDescription,
-:global(.byline-roles-list-col-description) {
-  width: 40%;
-}
+  .colMachine,
+  :global(.byline-roles-list-col-machine) {
+    width: 20%;
+  }
 
-.colCreated,
-:global(.byline-roles-list-col-created) {
-  width: 18%;
-  text-align: right;
-}
+  .colDescription,
+  :global(.byline-roles-list-col-description) {
+    width: 40%;
+  }
 
-.gripCell,
-:global(.byline-roles-list-grip-cell) {
-  width: 2%;
-}
+  .colCreated,
+  :global(.byline-roles-list-col-created) {
+    width: 18%;
+    text-align: right;
+  }
 
-.cellRight,
-:global(.byline-roles-list-cell-right) {
-  text-align: right;
-}
+  .gripCell,
+  :global(.byline-roles-list-grip-cell) {
+    width: 2%;
+  }
 
-.save,
-:global(.byline-roles-list-save) {
-  padding-right: 0.25rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
+  .cellRight,
+  :global(.byline-roles-list-cell-right) {
+    text-align: right;
+  }
 
-.saveForm,
-:global(.byline-roles-list-save-form) {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
+  .save,
+  :global(.byline-roles-list-save) {
+    padding-right: 0.25rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
 
-.saveActions,
-:global(.byline-roles-list-save-actions) {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}
+  .saveForm,
+  :global(.byline-roles-list-save-form) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
 
-.drawerScroll,
-:global(.byline-roles-list-drawer-scroll) {
-  max-height: calc(100vh - 160px);
-  overflow-y: auto;
-}
+  .saveActions,
+  :global(.byline-roles-list-save-actions) {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
 
-.drawer,
-:global(.byline-roles-list-drawer) {
-  /* Width handled by uikit Drawer prop; responsive override below. */
-}
+  .drawerScroll,
+  :global(.byline-roles-list-drawer-scroll) {
+    max-height: calc(100vh - 160px);
+    overflow-y: auto;
+  }
 
-@media (min-width: 48rem) {
   .drawer,
   :global(.byline-roles-list-drawer) {
-    width: 600px;
+    /* Width handled by uikit Drawer prop; responsive override below. */
+  }
+
+  @media (min-width: 48rem) {
+    .drawer,
+    :global(.byline-roles-list-drawer) {
+      width: 600px;
+    }
   }
 }

package/src/admin-shell/admin-users/container.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;
+
 /**
  * AccountContainer — admin-user detail view with edit drawers.
  *
@@ -22,184 +36,186 @@
  *   .byline-admin-user-modal-head     — modal header row
  */
 
-.grid,
-:global(.byline-admin-user-grid) {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 3rem;
-}
-
-@media (min-width: 40rem) {
+@layer byline-components.cms {
   .grid,
   :global(.byline-admin-user-grid) {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 3rem;
   }
-}
 
-.column,
-:global(.byline-admin-user-column) {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
+  @media (min-width: 40rem) {
+    .grid,
+    :global(.byline-admin-user-grid) {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
 
-.section,
-:global(.byline-admin-user-section) {
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  background-color: var(--canvas-25);
-  padding: 1rem;
-  border-radius: var(--border-radius-sm);
-}
+  .column,
+  :global(.byline-admin-user-column) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
 
-:is([data-theme="dark"], :global(.dark)) .section,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-section) {
-  border-color: var(--gray-700);
-  background-color: var(--canvas-800);
-}
+  .section,
+  :global(.byline-admin-user-section) {
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    background-color: var(--canvas-25);
+    padding: 1rem;
+    border-radius: var(--border-radius-sm);
+  }
 
-.sectionHead,
-:global(.byline-admin-user-section-head) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-}
+  :is([data-theme="dark"], :global(.dark)) .section,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-section) {
+    border-color: var(--gray-700);
+    background-color: var(--canvas-800);
+  }
 
-.line,
-:global(.byline-admin-user-line) {
-  margin-bottom: 0;
-}
+  .sectionHead,
+  :global(.byline-admin-user-section-head) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+  }
 
-.lineSpaced,
-:global(.byline-admin-user-line-spaced) {
-  margin-bottom: 0.75rem;
-}
+  .line,
+  :global(.byline-admin-user-line) {
+    margin-bottom: 0;
+  }
 
-.meta,
-:global(.byline-admin-user-meta) {
-  margin-top: 1rem;
-  font-size: 0.75rem;
-}
+  .lineSpaced,
+  :global(.byline-admin-user-line-spaced) {
+    margin-bottom: 0.75rem;
+  }
 
-.statusOn,
-:global(.byline-admin-user-status-on) {
-  color: var(--green-600);
-}
+  .meta,
+  :global(.byline-admin-user-meta) {
+    margin-top: 1rem;
+    font-size: 0.75rem;
+  }
 
-.statusOff,
-:global(.byline-admin-user-status-off) {
-  color: var(--red-600);
-}
+  .statusOn,
+  :global(.byline-admin-user-status-on) {
+    color: var(--green-600);
+  }
 
-:is([data-theme="dark"], :global(.dark)) .statusOn,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-status-on) {
-  color: var(--green-400);
-}
+  .statusOff,
+  :global(.byline-admin-user-status-off) {
+    color: var(--red-600);
+  }
 
-:is([data-theme="dark"], :global(.dark)) .statusOff,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-status-off) {
-  color: var(--red-400);
-}
+  :is([data-theme="dark"], :global(.dark)) .statusOn,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-status-on) {
+    color: var(--green-400);
+  }
 
-.notSet,
-:global(.byline-admin-user-not-set) {
-  font-style: italic;
-}
+  :is([data-theme="dark"], :global(.dark)) .statusOff,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-status-off) {
+    color: var(--red-400);
+  }
 
-.roleList,
-:global(.byline-admin-user-role-list) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  margin-bottom: 0.75rem;
-}
+  .notSet,
+  :global(.byline-admin-user-not-set) {
+    font-style: italic;
+  }
 
-.roleEmpty,
-:global(.byline-admin-user-role-empty) {
-  margin: 0;
-  font-style: italic;
-}
+  .roleList,
+  :global(.byline-admin-user-role-list) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin-bottom: 0.75rem;
+  }
 
-.roleBadge,
-:global(.byline-admin-user-role-badge) {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 0.125rem;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  background-color: #eff6ff;
-  color: #1d4ed8;
-}
+  .roleEmpty,
+  :global(.byline-admin-user-role-empty) {
+    margin: 0;
+    font-style: italic;
+  }
 
-:is([data-theme="dark"], :global(.dark)) .roleBadge,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-role-badge) {
-  background-color: rgba(30, 58, 138, 0.4);
-  color: #bfdbfe;
-}
+  .roleBadge,
+  :global(.byline-admin-user-role-badge) {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 0.125rem;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    background-color: #eff6ff;
+    color: #1d4ed8;
+  }
 
-.drawer,
-:global(.byline-admin-user-drawer) {
-  /* width handled via uikit prop */
-}
+  :is([data-theme="dark"], :global(.dark)) .roleBadge,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-role-badge) {
+    background-color: rgba(30, 58, 138, 0.4);
+    color: #bfdbfe;
+  }
 
-@media (min-width: 48rem) {
   .drawer,
   :global(.byline-admin-user-drawer) {
-    width: 500px;
+    /* width handled via uikit prop */
   }
-}
 
-.drawerLarge,
-:global(.byline-admin-user-drawer-large) {
-  /* width handled via uikit prop */
-}
+  @media (min-width: 48rem) {
+    .drawer,
+    :global(.byline-admin-user-drawer) {
+      width: 500px;
+    }
+  }
 
-@media (min-width: 48rem) {
   .drawerLarge,
   :global(.byline-admin-user-drawer-large) {
-    width: 700px;
+    /* width handled via uikit prop */
   }
-}
 
-@media (min-width: 66rem) {
-  .drawerLarge,
-  :global(.byline-admin-user-drawer-large) {
-    width: 800px;
+  @media (min-width: 48rem) {
+    .drawerLarge,
+    :global(.byline-admin-user-drawer-large) {
+      width: 700px;
+    }
   }
-}
 
-.drawerScroll,
-:global(.byline-admin-user-drawer-scroll) {
-  max-height: calc(100vh - 160px);
-  overflow-y: auto;
-}
+  @media (min-width: 66rem) {
+    .drawerLarge,
+    :global(.byline-admin-user-drawer-large) {
+      width: 800px;
+    }
+  }
 
-.modal,
-:global(.byline-admin-user-modal) {
-  /* default sizing */
-}
+  .drawerScroll,
+  :global(.byline-admin-user-drawer-scroll) {
+    max-height: calc(100vh - 160px);
+    overflow-y: auto;
+  }
 
-@media (min-width: 40rem) {
   .modal,
   :global(.byline-admin-user-modal) {
-    margin-bottom: 6rem;
-    max-width: 550px;
+    /* default sizing */
   }
-}
 
-.modalHead,
-:global(.byline-admin-user-modal-head) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
+  @media (min-width: 40rem) {
+    .modal,
+    :global(.byline-admin-user-modal) {
+      margin-bottom: 6rem;
+      max-width: 550px;
+    }
+  }
 
-.accountLink,
-:global(.byline-admin-user-account-link) {
-  text-decoration: underline;
+  .modalHead,
+  :global(.byline-admin-user-modal-head) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+
+  .accountLink,
+  :global(.byline-admin-user-account-link) {
+    text-decoration: underline;
+  }
 }