@byline/host-tanstack-start 6.10.1 → 6.11.0

package/src/admin-shell/collections/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;
+
 /**
  * Collection ListView — paginated rows with search, status filter, sort.
  *
@@ -16,181 +30,183 @@
  *   .byline-coll-list-page-size      — page-size select alignment
  */
 
-.head,
-:global(.byline-coll-list-head) {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.title,
-:global(.byline-coll-list-title) {
-  margin: 0;
-  padding-bottom: 2px;
-}
+@layer byline-components.cms {
+  .head,
+  :global(.byline-coll-list-head) {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
 
-.stats,
-:global(.byline-coll-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-coll-list-title) {
+    margin: 0;
+    padding-bottom: 2px;
+  }
 
-:is([data-theme="dark"], :global(.dark)) .stats,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-coll-list-stats) {
-  background-color: var(--canvas-700);
-}
+  .stats,
+  :global(.byline-coll-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;
+  }
 
-.statsLoader,
-:global(.byline-coll-list-stats-loader) {
-  margin-right: auto;
-  margin-bottom: -4px;
-}
+  :is([data-theme="dark"], :global(.dark)) .stats,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-coll-list-stats) {
+    background-color: var(--canvas-700);
+  }
 
-.options,
-:global(.byline-coll-list-options) {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-  align-items: flex-start;
-}
+  .statsLoader,
+  :global(.byline-coll-list-stats-loader) {
+    margin-right: auto;
+    margin-bottom: -4px;
+  }
 
-@media (min-width: 40rem) {
   .options,
   :global(.byline-coll-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-coll-list-options-bottom) {
-  margin-top: 0;
-  margin-bottom: 1.25rem;
-}
+  @media (min-width: 40rem) {
+    .options,
+    :global(.byline-coll-list-options) {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
 
-.search,
-:global(.byline-coll-list-search) {
-  margin-right: auto;
-  width: 100%;
-  max-width: 350px;
-}
+  .optionsBottom,
+  :global(.byline-coll-list-options-bottom) {
+    margin-top: 0;
+    margin-bottom: 1.25rem;
+  }
 
-.tableWrap,
-:global(.byline-coll-list-table-wrap) {
-  margin-top: 0.5rem;
-  margin-bottom: 0.75rem;
-}
+  .search,
+  :global(.byline-coll-list-search) {
+    margin-right: auto;
+    width: 100%;
+    max-width: 350px;
+  }
 
-.cellRight,
-:global(.byline-coll-list-cell-right) {
-  text-align: right;
-}
+  .tableWrap,
+  :global(.byline-coll-list-table-wrap) {
+    margin-top: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
 
-.cellCenter,
-:global(.byline-coll-list-cell-center) {
-  text-align: center;
-}
+  .cellRight,
+  :global(.byline-coll-list-cell-right) {
+    text-align: right;
+  }
 
-.padRow,
-:global(.byline-coll-list-pad-row) {
-  height: 32px;
-  border: 0;
-}
+  .cellCenter,
+  :global(.byline-coll-list-cell-center) {
+    text-align: center;
+  }
+
+  .padRow,
+  :global(.byline-coll-list-pad-row) {
+    height: 32px;
+    border: 0;
+  }
 
-.dragCell,
-:global(.byline-coll-list-drag-cell) {
-  /* "Shrink to content" — table layout distributes the row width across cells
+  .dragCell,
+  :global(.byline-coll-list-drag-cell) {
+    /* "Shrink to content" — table layout distributes the row width across cells
      without an explicit width; setting 1% with nowrap forces this column to
      take only the space its inner button needs. */
-  width: 1%;
-  padding: 0 0.5rem 0 0.25rem;
-  vertical-align: middle;
-  white-space: nowrap;
-}
+    width: 1%;
+    padding: 0 0.5rem 0 0.25rem;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
 
-.dragHandle,
-:global(.byline-coll-list-drag-handle) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: grab;
-  opacity: 0.45;
-  touch-action: none;
-}
+  .dragHandle,
+  :global(.byline-coll-list-drag-handle) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: grab;
+    opacity: 0.45;
+    touch-action: none;
+  }
 
-.dragHandle:hover,
-:global(.byline-coll-list-drag-handle:hover) {
-  opacity: 1;
-}
+  .dragHandle:hover,
+  :global(.byline-coll-list-drag-handle:hover) {
+    opacity: 1;
+  }
 
-.dragHandle:disabled,
-:global(.byline-coll-list-drag-handle:disabled) {
-  cursor: not-allowed;
-  opacity: 0.2;
-}
+  .dragHandle:disabled,
+  :global(.byline-coll-list-drag-handle:disabled) {
+    cursor: not-allowed;
+    opacity: 0.2;
+  }
 
-.dragHandle:active,
-:global(.byline-coll-list-drag-handle:active) {
-  cursor: grabbing;
-}
+  .dragHandle:active,
+  :global(.byline-coll-list-drag-handle:active) {
+    cursor: grabbing;
+  }
 
-/* Column-header button in the drag column. Clicking returns to canonical
+  /* Column-header button in the drag column. Clicking returns to canonical
    `order_key` sort. Active when the current view is canonical so the user
    sees the affordance is "selected" — matches the visual semantics of
    the sortable column headers next to it. */
-.orderHeader,
-:global(.byline-coll-list-order-header) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  opacity: 0.45;
-}
-
-.orderHeader:hover,
-:global(.byline-coll-list-order-header:hover) {
-  opacity: 0.85;
-}
+  .orderHeader,
+  :global(.byline-coll-list-order-header) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.45;
+  }
 
-.orderHeaderActive,
-:global(.byline-coll-list-order-header-active) {
-  opacity: 1;
-}
+  .orderHeader:hover,
+  :global(.byline-coll-list-order-header:hover) {
+    opacity: 0.85;
+  }
 
-.pageSize,
-:global(.byline-coll-list-page-size) {
-  /* fallback */
-}
+  .orderHeaderActive,
+  :global(.byline-coll-list-order-header-active) {
+    opacity: 1;
+  }
 
-@media (min-width: 40rem) {
   .pageSize,
   :global(.byline-coll-list-page-size) {
-    margin-left: auto;
+    /* fallback */
+  }
+
+  @media (min-width: 40rem) {
+    .pageSize,
+    :global(.byline-coll-list-page-size) {
+      margin-left: auto;
+    }
   }
 }

package/src/admin-shell/collections/restore-version-modal.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;
+
 /**
  * RestoreVersionModal — modal body for the "make current" action on the
  * collection history view.
@@ -10,39 +24,41 @@
  *   .byline-coll-restore-button    — action buttons (min-width)
  */
 
-.content,
-:global(.byline-coll-restore-content) {
-  gap: 0.25rem;
-}
+@layer byline-components.cms {
+  .content,
+  :global(.byline-coll-restore-content) {
+    gap: 0.25rem;
+  }
 
-.body,
-:global(.byline-coll-restore-body) {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
+  .body,
+  :global(.byline-coll-restore-body) {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
 
-.row,
-:global(.byline-coll-restore-row) {
-  margin: 0;
-}
+  .row,
+  :global(.byline-coll-restore-row) {
+    margin: 0;
+  }
 
-.warning,
-:global(.byline-coll-restore-warning) {
-  margin-top: 0.75rem;
-}
+  .warning,
+  :global(.byline-coll-restore-warning) {
+    margin-top: 0.75rem;
+  }
 
-.actions,
-:global(.byline-coll-restore-actions) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1rem;
-}
+  .actions,
+  :global(.byline-coll-restore-actions) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+  }
 
-.button,
-:global(.byline-coll-restore-button) {
-  min-width: 4rem;
+  .button,
+  :global(.byline-coll-restore-button) {
+    min-width: 4rem;
+  }
 }