@byline/host-tanstack-start 6.10.1 → 6.11.0

package/src/admin-shell/admin-activity/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;
+
 /**
  * ActivitySystemView — the system-wide activity report (docs/AUDIT.md — W4).
  *
@@ -14,56 +28,58 @@
  *   .byline-activity-after       — post-change value
  */
 
-.head,
-:global(.byline-activity-head) {
-  margin-bottom: 0.5rem;
-}
+@layer byline-components.cms {
+  .head,
+  :global(.byline-activity-head) {
+    margin-bottom: 0.5rem;
+  }
 
-.title,
-:global(.byline-activity-title) {
-  font-size: 1.25rem;
-  font-weight: 600;
-}
+  .title,
+  :global(.byline-activity-title) {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
 
-.options,
-:global(.byline-activity-options) {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-  margin: 0.75rem 0;
-}
+  .options,
+  :global(.byline-activity-options) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin: 0.75rem 0;
+  }
 
-.empty,
-:global(.byline-activity-empty) {
-  margin: 1.5rem 0;
-  color: var(--gray-500);
-  font-size: 0.875rem;
-}
+  .empty,
+  :global(.byline-activity-empty) {
+    margin: 1.5rem 0;
+    color: var(--gray-500);
+    font-size: 0.875rem;
+  }
 
-:is([data-theme="dark"], :global(.dark)) .empty,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-activity-empty) {
-  color: var(--gray-400);
-}
+  :is([data-theme="dark"], :global(.dark)) .empty,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-activity-empty) {
+    color: var(--gray-400);
+  }
 
-.tableWrap,
-:global(.byline-activity-table-wrap) {
-  margin-top: 0.5rem;
-  margin-bottom: 0.75rem;
-}
+  .tableWrap,
+  :global(.byline-activity-table-wrap) {
+    margin-top: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
 
-.when,
-:global(.byline-activity-when) {
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
+  .when,
+  :global(.byline-activity-when) {
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
 
-.change,
-:global(.byline-activity-change) {
-  font-variant-numeric: tabular-nums;
-}
+  .change,
+  :global(.byline-activity-change) {
+    font-variant-numeric: tabular-nums;
+  }
 
-.arrow,
-:global(.byline-activity-arrow) {
-  color: var(--gray-400);
+  .arrow,
+  :global(.byline-activity-arrow) {
+    color: var(--gray-400);
+  }
 }

package/src/admin-shell/admin-roles/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;
+
 /**
  * RoleContainer — detail view shell for a single admin role.
  *
@@ -13,120 +27,122 @@
  *   .byline-role-detail-modal-head  — modal title + close
  */
 
-.card,
-:global(.byline-role-detail-card) {
-  margin-bottom: 1.5rem;
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  border-radius: var(--border-radius-sm);
-  background-color: var(--canvas-25);
-  padding: 1rem;
-}
-
-:is([data-theme="dark"], :global(.dark)) .card,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-role-detail-card) {
-  border-color: var(--gray-700);
-  background-color: var(--canvas-800);
-}
+@layer byline-components.cms {
+  .card,
+  :global(.byline-role-detail-card) {
+    margin-bottom: 1.5rem;
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--canvas-25);
+    padding: 1rem;
+  }
 
-.head,
-:global(.byline-role-detail-head) {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
-}
+  :is([data-theme="dark"], :global(.dark)) .card,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-role-detail-card) {
+    border-color: var(--gray-700);
+    background-color: var(--canvas-800);
+  }
 
-.actions,
-:global(.byline-role-detail-actions) {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
+  .head,
+  :global(.byline-role-detail-head) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
 
-.title,
-:global(.byline-role-detail-title) {
-  margin: 0;
-}
+  .actions,
+  :global(.byline-role-detail-actions) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
 
-.grid,
-:global(.byline-role-detail-grid) {
-  display: grid;
-  gap: 0.25rem;
-}
+  .title,
+  :global(.byline-role-detail-title) {
+    margin: 0;
+  }
 
-@media (min-width: 40rem) {
   .grid,
   :global(.byline-role-detail-grid) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    display: grid;
+    gap: 0.25rem;
   }
-  .gridFull,
-  :global(.byline-role-detail-grid-full) {
-    grid-column: span 2 / span 2;
-  }
-}
 
-.row,
-:global(.byline-role-detail-row) {
-  margin: 0;
-}
+  @media (min-width: 40rem) {
+    .grid,
+    :global(.byline-role-detail-grid) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .gridFull,
+    :global(.byline-role-detail-grid-full) {
+      grid-column: span 2 / span 2;
+    }
+  }
 
-.meta,
-:global(.byline-role-detail-meta) {
-  display: grid;
-  gap: 0.25rem;
-  margin-top: 0.75rem;
-  font-size: 0.75rem;
-}
+  .row,
+  :global(.byline-role-detail-row) {
+    margin: 0;
+  }
 
-@media (min-width: 40rem) {
   .meta,
   :global(.byline-role-detail-meta) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    display: grid;
+    gap: 0.25rem;
+    margin-top: 0.75rem;
+    font-size: 0.75rem;
   }
-}
 
-.notSet,
-:global(.byline-role-detail-not-set) {
-  font-style: italic;
-}
+  @media (min-width: 40rem) {
+    .meta,
+    :global(.byline-role-detail-meta) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
 
-.drawerContent,
-:global(.byline-role-detail-drawer-content) {
-  max-height: calc(100vh - 160px);
-  overflow-y: auto;
-}
+  .notSet,
+  :global(.byline-role-detail-not-set) {
+    font-style: italic;
+  }
 
-.drawer,
-:global(.byline-role-detail-drawer) {
-  /* width handled via uikit prop */
-}
+  .drawerContent,
+  :global(.byline-role-detail-drawer-content) {
+    max-height: calc(100vh - 160px);
+    overflow-y: auto;
+  }
 
-@media (min-width: 48rem) {
   .drawer,
   :global(.byline-role-detail-drawer) {
-    width: 500px;
+    /* width handled via uikit prop */
   }
-}
 
-.modal,
-:global(.byline-role-detail-modal) {
-  /* default sizing applied via uikit's Modal.Container */
-}
+  @media (min-width: 48rem) {
+    .drawer,
+    :global(.byline-role-detail-drawer) {
+      width: 500px;
+    }
+  }
 
-@media (min-width: 40rem) {
   .modal,
   :global(.byline-role-detail-modal) {
-    margin-bottom: 6rem;
-    max-width: 550px;
+    /* default sizing applied via uikit's Modal.Container */
+  }
+
+  @media (min-width: 40rem) {
+    .modal,
+    :global(.byline-role-detail-modal) {
+      margin-bottom: 6rem;
+      max-width: 550px;
+    }
   }
-}
 
-.modalHead,
-:global(.byline-role-detail-modal-head) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
+  .modalHead,
+  :global(.byline-role-detail-modal-head) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
 }

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