@byline/host-tanstack-start 6.10.1 → 6.11.0

package/src/admin-shell/collections/tree-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;
+
 /**
  * TreeListView — built-in list view for `tree: true` collections. Reuses the
  * collection-list head/stats look; adds depth indentation, a branch glyph, and
@@ -10,131 +24,133 @@
  *   .byline-tree-list-group                    — "Unplaced" separator row
  */
 
-.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;
-}
-
-.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;
-}
-
-:is([data-theme="dark"], :global(.dark)) .stats,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-coll-list-stats) {
-  background-color: var(--canvas-700);
-}
-
-.tableWrap,
-:global(.byline-tree-list-table-wrap) {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-.titleCell,
-:global(.byline-tree-list-title) {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-}
-
-.branch,
-:global(.byline-tree-list-branch) {
-  color: var(--gray-400);
-  font-family: var(--font-mono, monospace);
-  user-select: none;
-}
-
-.groupRow,
-:global(.byline-tree-list-group) {
-  background-color: var(--gray-25);
-}
-
-:is([data-theme="dark"], :global(.dark)) .groupRow,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-tree-list-group) {
-  background-color: var(--canvas-700);
-}
-
-.groupCell {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--gray-500);
-}
-
-.cellRight {
-  text-align: right;
-}
-
-.cellCenter {
-  text-align: center;
-}
-
-/* ── Drag-to-reorder / re-parent ────────────────────────────────────── */
-
-.dragCell {
-  width: 34px;
-  padding-inline: 0.25rem;
-  text-align: center;
-  vertical-align: middle;
-}
-
-.dragHandle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  color: var(--gray-400);
-  background: none;
-  border: none;
-  border-radius: 4px;
-  cursor: grab;
-  touch-action: none;
-}
-
-.dragHandle:hover {
-  color: var(--gray-600);
-  background-color: var(--gray-50);
-}
-
-.dragHandle:active {
-  cursor: grabbing;
-}
-
-:is([data-theme="dark"], :global(.dark)) .dragHandle:hover {
-  color: var(--gray-200);
-  background-color: var(--canvas-700);
-}
-
-/* The row being dragged — highlight + a left rule that reads as "this is the
+@layer byline-components.cms {
+  .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;
+  }
+
+  .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;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .stats,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-coll-list-stats) {
+    background-color: var(--canvas-700);
+  }
+
+  .tableWrap,
+  :global(.byline-tree-list-table-wrap) {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .titleCell,
+  :global(.byline-tree-list-title) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+
+  .branch,
+  :global(.byline-tree-list-branch) {
+    color: var(--gray-400);
+    font-family: var(--font-mono, monospace);
+    user-select: none;
+  }
+
+  .groupRow,
+  :global(.byline-tree-list-group) {
+    background-color: var(--gray-25);
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .groupRow,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-tree-list-group) {
+    background-color: var(--canvas-700);
+  }
+
+  .groupCell {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--gray-500);
+  }
+
+  .cellRight {
+    text-align: right;
+  }
+
+  .cellCenter {
+    text-align: center;
+  }
+
+  /* ── Drag-to-reorder / re-parent ────────────────────────────────────── */
+
+  .dragCell {
+    width: 34px;
+    padding-inline: 0.25rem;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .dragHandle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    color: var(--gray-400);
+    background: none;
+    border: none;
+    border-radius: 4px;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .dragHandle:hover {
+    color: var(--gray-600);
+    background-color: var(--gray-50);
+  }
+
+  .dragHandle:active {
+    cursor: grabbing;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .dragHandle:hover {
+    color: var(--gray-200);
+    background-color: var(--canvas-700);
+  }
+
+  /* The row being dragged — highlight + a left rule that reads as "this is the
  * grabbed node at its projected depth". */
-.draggingRow {
-  background-color: var(--gray-25);
-  box-shadow: inset 2px 0 0 var(--theme-400, var(--gray-400));
-}
-
-:is([data-theme="dark"], :global(.dark)) .draggingRow {
-  background-color: var(--canvas-700);
+  .draggingRow {
+    background-color: var(--gray-25);
+    box-shadow: inset 2px 0 0 var(--theme-400, var(--gray-400));
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .draggingRow {
+    background-color: var(--canvas-700);
+  }
 }

package/src/admin-shell/collections/view-menu.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;
 /**
  * ViewMenu — mini-nav bar for document-level views (Edit, History, API).
  *
@@ -10,77 +22,78 @@
  *   .byline-view-menu-button — primary view buttons (Edit/API)
  *   .byline-view-menu-icon-button — preview, history, and data-action icon buttons
  */
-
-/* Groups wrap as units, so a narrow viewport breaks the row between "what
+@layer byline-components.cms {
+  /* Groups wrap as units, so a narrow viewport breaks the row between "what
  * you are looking at" and "where you can go" rather than mid-group. The
  * wider column gap marks the boundary when both groups share a line. */
-.root,
-:global(.byline-view-menu) {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem 1.25rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-/* Beside the heading (every host switches to a row at 40rem), keep a wrapped
- * second line flush with the right edge rather than stranded under the
- * heading's side of the menu. */
-@media (min-width: 40rem) {
   .root,
   :global(.byline-view-menu) {
-    justify-content: flex-end;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 1.25rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
   }
-}
 
-.group,
-:global(.byline-view-menu-data),
-:global(.byline-view-menu-nav) {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-}
+  /* Beside the heading (every host switches to a row at 40rem), keep a wrapped
+ * second line flush with the right edge rather than stranded under the
+ * heading's side of the menu. */
+  @media (min-width: 40rem) {
+    .root,
+    :global(.byline-view-menu) {
+      justify-content: flex-end;
+    }
+  }
 
-.label,
-:global(.byline-view-menu-label) {
-  display: none;
-  color: var(--gray-400);
-  font-size: 0.75rem;
-  padding-top: 2px;
-}
+  .group,
+  :global(.byline-view-menu-data),
+  :global(.byline-view-menu-nav) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+  }
 
-@media (min-width: 66rem) {
   .label,
   :global(.byline-view-menu-label) {
-    display: block;
+    display: none;
+    color: var(--gray-400);
+    font-size: 0.75rem;
+    padding-top: 2px;
   }
-}
 
-.localeSelect,
-:global(.byline-view-menu-locale-select) {
-  min-width: 100px;
-  padding: 0.1rem 0;
-}
+  @media (min-width: 66rem) {
+    .label,
+    :global(.byline-view-menu-label) {
+      display: block;
+    }
+  }
 
-.depthSelect,
-:global(.byline-view-menu-depth-select) {
-  min-width: 60px;
-}
+  .localeSelect,
+  :global(.byline-view-menu-locale-select) {
+    min-width: 100px;
+    padding: 0.1rem 0;
+  }
 
-.iconButton,
-:global(.byline-view-menu-icon-button) {
-  min-width: 24px;
-}
+  .depthSelect,
+  :global(.byline-view-menu-depth-select) {
+    min-width: 60px;
+  }
 
-.iconButtonIcon,
-:global(.byline-view-menu-icon-button-icon) {
-  width: 1.25rem;
-  height: 1.25rem;
-}
+  .iconButton,
+  :global(.byline-view-menu-icon-button) {
+    min-width: 24px;
+  }
 
-.button,
-:global(.byline-view-menu-button) {
-  min-width: 50px;
+  .iconButtonIcon,
+  :global(.byline-view-menu-icon-button-icon) {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .button,
+  :global(.byline-view-menu-button) {
+    min-width: 50px;
+  }
 }

package/src/admin-shell/scheduled-publications/list.module.css

@@ -1,105 +1,121 @@
-.head {
-  margin-bottom: var(--spacing-16);
-}
-
-.title {
-  margin-bottom: var(--spacing-4);
-}
-
-.intro {
-  margin: 0;
-  color: var(--gray-500);
-}
-
-.health {
-  margin-bottom: var(--spacing-16);
-}
-
-/* Filters and pagination are separate jobs and used at different moments, so
+@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;
+
+@layer byline-components.cms {
+  .head {
+    margin-bottom: var(--spacing-16);
+  }
+
+  .title {
+    margin-bottom: var(--spacing-4);
+  }
+
+  .intro {
+    margin: 0;
+    color: var(--gray-500);
+  }
+
+  .health {
+    margin-bottom: var(--spacing-16);
+  }
+
+  /* Filters and pagination are separate jobs and used at different moments, so
    they sit at opposite ends of one row rather than running together — the
    pager previously read as a third filter control. */
-.controls {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: var(--spacing-16);
-  margin-bottom: var(--spacing-4);
-}
-
-.filters-help {
-  margin: 0 0 var(--spacing-16);
-  color: var(--gray-500);
-  font-size: var(--font-size-sm);
-}
-
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: var(--spacing-12);
-}
-
-.filter {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  min-width: 12rem;
-}
-
-.filter-authorizer :global(.byline-input-wrapper) {
-  min-width: 22rem;
-}
-
-/* Sits on the control baseline, not the label baseline, so the buttons line up
+  .controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--spacing-16);
+    margin-bottom: var(--spacing-4);
+  }
+
+  .filters-help {
+    margin: 0 0 var(--spacing-16);
+    color: var(--gray-500);
+    font-size: var(--font-size-sm);
+  }
+
+  .filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--spacing-12);
+  }
+
+  .filter {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+    min-width: 12rem;
+  }
+
+  .filter-authorizer :global(.byline-input-wrapper) {
+    min-width: 22rem;
+  }
+
+  /* Sits on the control baseline, not the label baseline, so the buttons line up
    with the inputs rather than floating against their labels. */
-.filter-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  padding-bottom: 0.1rem;
-}
-
-.tableWrap {
-  margin-top: 0.75rem;
-  overflow-x: auto;
-}
-
-.collection,
-.zone,
-.error {
-  display: block;
-  margin-top: var(--spacing-4);
-  color: var(--gray-500);
-  font-size: var(--font-size-xs);
-}
-
-.instant {
-  white-space: nowrap;
-}
-
-/* The whole point of this column is offboarding — an operator pastes an
+  .filter-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    padding-bottom: 0.1rem;
+  }
+
+  .tableWrap {
+    margin-top: 0.75rem;
+    overflow-x: auto;
+  }
+
+  .collection,
+  .zone,
+  .error {
+    display: block;
+    margin-top: var(--spacing-4);
+    color: var(--gray-500);
+    font-size: var(--font-size-xs);
+  }
+
+  .instant {
+    white-space: nowrap;
+  }
+
+  /* The whole point of this column is offboarding — an operator pastes an
    account id in and compares. Tabular figures make mismatches visible. */
-.authorizer {
-  font-family: var(--font-family-mono, monospace);
-  font-size: var(--font-size-xs);
-  overflow-wrap: anywhere;
-}
-
-.error {
-  max-width: 24rem;
-  color: var(--red-600);
-  white-space: normal;
-}
-
-.empty {
-  padding: var(--spacing-32) 0;
-  color: var(--gray-500);
-  text-align: center;
-}
-
-.pagerBottom {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: var(--spacing-16);
+  .authorizer {
+    font-family: var(--font-family-mono, monospace);
+    font-size: var(--font-size-xs);
+    overflow-wrap: anywhere;
+  }
+
+  .error {
+    max-width: 24rem;
+    color: var(--red-600);
+    white-space: normal;
+  }
+
+  .empty {
+    padding: var(--spacing-32) 0;
+    color: var(--gray-500);
+    text-align: center;
+  }
+
+  .pagerBottom {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--spacing-16);
+  }
 }