@byline/host-tanstack-start 6.10.1 → 6.11.0

package/src/admin-shell/chrome/th-sortable.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;
+
 /**
  * TableHeadingCellSortable — clickable column header with a sort indicator.
  *
@@ -10,52 +24,54 @@
  *   .byline-th-icon              — sort icon size hint
  */
 
-.button,
-:global(.byline-th-sortable-button) {
-  display: flex;
-  gap: 0.25rem;
-  padding-left: 2px;
-  padding-right: 6px;
-  font-weight: 700;
-}
+@layer byline-components.cms {
+  .button,
+  :global(.byline-th-sortable-button) {
+    display: flex;
+    gap: 0.25rem;
+    padding-left: 2px;
+    padding-right: 6px;
+    font-weight: 700;
+  }
 
-.button:hover,
-:global(.byline-th-sortable-button:hover) {
-  text-decoration: underline;
-}
+  .button:hover,
+  :global(.byline-th-sortable-button:hover) {
+    text-decoration: underline;
+  }
 
-.alignLeft,
-:global(.byline-th-align-left) {
-  text-align: left;
-}
+  .alignLeft,
+  :global(.byline-th-align-left) {
+    text-align: left;
+  }
 
-.alignCenter,
-:global(.byline-th-align-center) {
-  text-align: center;
-}
+  .alignCenter,
+  :global(.byline-th-align-center) {
+    text-align: center;
+  }
 
-.alignRight,
-:global(.byline-th-align-right) {
-  text-align: right;
-}
+  .alignRight,
+  :global(.byline-th-align-right) {
+    text-align: right;
+  }
 
-.alignRightAuto,
-:global(.byline-th-align-right-auto) {
-  margin-left: auto;
-}
+  .alignRightAuto,
+  :global(.byline-th-align-right-auto) {
+    margin-left: auto;
+  }
 
-.icon,
-:global(.byline-th-icon) {
-  width: 1.5rem;
-  height: 1.5rem;
-}
+  .icon,
+  :global(.byline-th-icon) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
 
-/* Sort indicator SVGs are rendered with class `byline-sort-icon` (see
+  /* Sort indicator SVGs are rendered with class `byline-sort-icon` (see
    sort-icons.tsx) inside a flex container; without explicit dimensions
    they collapse to zero. Size them here so every consumer of the icons
    picks the rule up automatically. */
-:global(.byline-sort-icon) {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
+  :global(.byline-sort-icon) {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
 }

package/src/admin-shell/collections/api.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;
+
 /**
  * ApiView — JSON inspector view for a collection document.
  *
@@ -9,54 +23,56 @@
  *   .byline-api-viewer    — scrollable JSON panel
  */
 
-.section,
-:global(.byline-api-section),
-.container,
-:global(.byline-api-container) {
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.head,
-:global(.byline-api-head) {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  margin-bottom: var(--spacing-8);
-}
+@layer byline-components.cms {
+  .section,
+  :global(.byline-api-section),
+  .container,
+  :global(.byline-api-container) {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
 
-@media (min-width: 40rem) {
   .head,
   :global(.byline-api-head) {
-    flex-direction: row;
-    justify-content: space-between;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin-bottom: var(--spacing-8);
   }
-}
 
-.title,
-:global(.byline-api-title) {
-  margin-bottom: var(--spacing-8);
-}
+  @media (min-width: 40rem) {
+    .head,
+    :global(.byline-api-head) {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
 
-.viewer,
-:global(.byline-api-viewer) {
-  flex: 1 1 0;
-  min-height: 0;
-  overflow-y: auto;
-  padding: var(--spacing-4);
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
-  border-radius: var(--border-radius-sm);
-  background-color: var(--canvas-800);
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-normal);
-}
+  .title,
+  :global(.byline-api-title) {
+    margin-bottom: var(--spacing-8);
+  }
 
-:is([data-theme="dark"], :global(.dark)) {
   .viewer,
   :global(.byline-api-viewer) {
-    border-color: var(--gray-700);
+    flex: 1 1 0;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--spacing-4);
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
+    border-radius: var(--border-radius-sm);
+    background-color: var(--canvas-800);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-normal);
+  }
+
+  :is([data-theme="dark"], :global(.dark)) {
+    .viewer,
+    :global(.byline-api-viewer) {
+      border-color: var(--gray-700);
+    }
   }
 }

package/src/admin-shell/collections/document-history.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;
+
 /**
  * DocumentHistoryView — the document-grain audit log tab (docs/AUDIT.md — W3).
  *
@@ -11,36 +25,38 @@
  *   .byline-coll-dochistory-after      — post-change value
  */
 
-.empty,
-:global(.byline-coll-dochistory-empty) {
-  margin: 1.5rem 0;
-  color: var(--gray-500);
-  font-size: 0.875rem;
-}
+@layer byline-components.cms {
+  .empty,
+  :global(.byline-coll-dochistory-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-coll-dochistory-empty) {
-  color: var(--gray-400);
-}
+  :is([data-theme="dark"], :global(.dark)) .empty,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-coll-dochistory-empty) {
+    color: var(--gray-400);
+  }
 
-.tableWrap,
-:global(.byline-coll-dochistory-table-wrap) {
-  margin-top: 0.5rem;
-  margin-bottom: 0.75rem;
-}
+  .tableWrap,
+  :global(.byline-coll-dochistory-table-wrap) {
+    margin-top: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
 
-.when,
-:global(.byline-coll-dochistory-when) {
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
+  .when,
+  :global(.byline-coll-dochistory-when) {
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
 
-.change,
-:global(.byline-coll-dochistory-change) {
-  font-variant-numeric: tabular-nums;
-}
+  .change,
+  :global(.byline-coll-dochistory-change) {
+    font-variant-numeric: tabular-nums;
+  }
 
-.arrow,
-:global(.byline-coll-dochistory-arrow) {
-  color: var(--gray-400);
+  .arrow,
+  :global(.byline-coll-dochistory-arrow) {
+    color: var(--gray-400);
+  }
 }