@byline/host-tanstack-start 6.10.1 → 6.11.0

package/src/admin-shell/chrome/dashboard.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;
+
 /**
  * AdminDashboard — collection-summary cards on /admin.
  *
@@ -21,265 +35,267 @@
  *   .byline-dashboard-empty-link       — fallback card body link when no stats
  */
 
-.grid,
-:global(.byline-dashboard-grid) {
-  display: grid;
-  /* `auto-fill` rather than `auto-fit`: each group owns its own grid, so a
+@layer byline-components.cms {
+  .grid,
+  :global(.byline-dashboard-grid) {
+    display: grid;
+    /* `auto-fill` rather than `auto-fit`: each group owns its own grid, so a
      group holding a single collection would stretch that card across the full
      row under `auto-fit`. `auto-fill` keeps the empty tracks, so cards are the
      same width in every group regardless of how many the group holds. */
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-  gap: 1.5rem;
-}
-
-.cardLink,
-:global(.byline-dashboard-card-link) {
-  display: block;
-  text-decoration: none;
-  color: inherit;
-}
-
-.cardLink:hover,
-:global(.byline-dashboard-card-link:hover) {
-  opacity: 0.9;
-}
-
-.cardHeader,
-:global(.byline-dashboard-card-header) {
-  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-  padding-bottom: 0.75rem;
-}
-
-:is([data-theme="dark"], :global(.dark)) .cardHeader,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-card-header) {
-  border-bottom-color: var(--gray-700);
-}
-
-.cardTitle,
-:global(.byline-dashboard-card-title) {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.25rem;
-}
-
-.titleText,
-:global(.byline-dashboard-title-text) {
-  font-size: 1.5rem;
-}
-
-.titleMeta,
-:global(.byline-dashboard-title-meta) {
-  font-size: 0.9rem;
-  font-weight: normal;
-}
-
-.statGrid,
-:global(.byline-dashboard-stat-grid) {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
-  gap: 0.5rem;
-}
-
-.statTile,
-:global(.byline-dashboard-stat-tile) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.25rem;
-  padding: 1rem 0.5rem 0.625rem;
-  gap: 0.125rem;
-  transition: opacity 200ms ease;
-  text-decoration: none;
-}
-
-.statTile:hover,
-:global(.byline-dashboard-stat-tile:hover) {
-  opacity: 0.8;
-}
-
-.statTileLabel,
-:global(.byline-dashboard-stat-tile-label) {
-  font-size: 0.6rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  line-height: 1;
-}
-
-.statTileNumber,
-:global(.byline-dashboard-stat-tile-number) {
-  font-size: 1.5rem;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-  margin-top: 0.25rem;
-}
-
-/* Colour modifiers — one set per known status, plus a fallback. */
-
-.tileDraft,
-:global(.byline-dashboard-tile-draft) {
-  background-color: #fffbeb;
-}
-
-.tileDraft .statTileLabel,
-:global(.byline-dashboard-tile-draft) :global(.byline-dashboard-stat-tile-label) {
-  color: #d97706;
-}
-
-.tileDraft .statTileNumber,
-:global(.byline-dashboard-tile-draft) :global(.byline-dashboard-stat-tile-number) {
-  color: #b45309;
-}
-
-:is([data-theme="dark"], :global(.dark)) .tileDraft,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-draft) {
-  background-color: rgba(120, 53, 15, 0.2);
-}
-
-:is([data-theme="dark"], :global(.dark)) .tileDraft .statTileLabel,
-:is([data-theme="dark"], :global(.dark))
-  :global(.byline-dashboard-tile-draft)
-  :global(.byline-dashboard-stat-tile-label) {
-  color: #fbbf24;
-}
-
-:is([data-theme="dark"], :global(.dark)) .tileDraft .statTileNumber,
-:is([data-theme="dark"], :global(.dark))
-  :global(.byline-dashboard-tile-draft)
-  :global(.byline-dashboard-stat-tile-number) {
-  color: #fcd34d;
-}
-
-.tilePublished,
-:global(.byline-dashboard-tile-published) {
-  background-color: #ecfdf5;
-}
-
-.tilePublished .statTileLabel,
-:global(.byline-dashboard-tile-published) :global(.byline-dashboard-stat-tile-label),
-.tilePublished .statTileNumber,
-:global(.byline-dashboard-tile-published) :global(.byline-dashboard-stat-tile-number) {
-  color: #047857;
-}
-
-:is([data-theme="dark"], :global(.dark)) .tilePublished,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-published) {
-  background-color: rgba(6, 78, 59, 0.2);
-}
-
-:is([data-theme="dark"], :global(.dark)) .tilePublished .statTileLabel,
-:is([data-theme="dark"], :global(.dark))
-  :global(.byline-dashboard-tile-published)
-  :global(.byline-dashboard-stat-tile-label) {
-  color: #34d399;
-}
-
-:is([data-theme="dark"], :global(.dark)) .tilePublished .statTileNumber,
-:is([data-theme="dark"], :global(.dark))
-  :global(.byline-dashboard-tile-published)
-  :global(.byline-dashboard-stat-tile-number) {
-  color: #6ee7b7;
-}
-
-.tileArchived,
-:global(.byline-dashboard-tile-archived) {
-  background-color: #f0f9ff;
-}
-
-.tileArchived .statTileLabel,
-:global(.byline-dashboard-tile-archived) :global(.byline-dashboard-stat-tile-label),
-.tileArchived .statTileNumber,
-:global(.byline-dashboard-tile-archived) :global(.byline-dashboard-stat-tile-number) {
-  color: #0369a1;
-}
-
-:is([data-theme="dark"], :global(.dark)) .tileArchived,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-archived) {
-  background-color: rgba(12, 74, 110, 0.2);
-}
-
-:is([data-theme="dark"], :global(.dark)) .tileArchived .statTileLabel,
-:is([data-theme="dark"], :global(.dark))
-  :global(.byline-dashboard-tile-archived)
-  :global(.byline-dashboard-stat-tile-label) {
-  color: #38bdf8;
-}
-
-:is([data-theme="dark"], :global(.dark)) .tileArchived .statTileNumber,
-:is([data-theme="dark"], :global(.dark))
-  :global(.byline-dashboard-tile-archived)
-  :global(.byline-dashboard-stat-tile-number) {
-  color: #7dd3fc;
-}
-
-.tileCustom,
-:global(.byline-dashboard-tile-custom) {
-  background-color: #f5f3ff;
-}
-
-.tileCustom .statTileLabel,
-:global(.byline-dashboard-tile-custom) :global(.byline-dashboard-stat-tile-label),
-.tileCustom .statTileNumber,
-:global(.byline-dashboard-tile-custom) :global(.byline-dashboard-stat-tile-number) {
-  color: #6d28d9;
-}
-
-:is([data-theme="dark"], :global(.dark)) .tileCustom,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-custom) {
-  background-color: rgba(76, 29, 149, 0.2);
-}
-
-:is([data-theme="dark"], :global(.dark)) .tileCustom .statTileLabel,
-:is([data-theme="dark"], :global(.dark))
-  :global(.byline-dashboard-tile-custom)
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    gap: 1.5rem;
+  }
+
+  .cardLink,
+  :global(.byline-dashboard-card-link) {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .cardLink:hover,
+  :global(.byline-dashboard-card-link:hover) {
+    opacity: 0.9;
+  }
+
+  .cardHeader,
+  :global(.byline-dashboard-card-header) {
+    border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+    padding-bottom: 0.75rem;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .cardHeader,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-card-header) {
+    border-bottom-color: var(--gray-700);
+  }
+
+  .cardTitle,
+  :global(.byline-dashboard-card-title) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.25rem;
+  }
+
+  .titleText,
+  :global(.byline-dashboard-title-text) {
+    font-size: 1.5rem;
+  }
+
+  .titleMeta,
+  :global(.byline-dashboard-title-meta) {
+    font-size: 0.9rem;
+    font-weight: normal;
+  }
+
+  .statGrid,
+  :global(.byline-dashboard-stat-grid) {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+    gap: 0.5rem;
+  }
+
+  .statTile,
+  :global(.byline-dashboard-stat-tile) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    padding: 1rem 0.5rem 0.625rem;
+    gap: 0.125rem;
+    transition: opacity 200ms ease;
+    text-decoration: none;
+  }
+
+  .statTile:hover,
+  :global(.byline-dashboard-stat-tile:hover) {
+    opacity: 0.8;
+  }
+
+  .statTileLabel,
   :global(.byline-dashboard-stat-tile-label) {
-  color: #a78bfa;
-}
-
-:is([data-theme="dark"], :global(.dark)) .tileCustom .statTileNumber,
-:is([data-theme="dark"], :global(.dark))
-  :global(.byline-dashboard-tile-custom)
+    font-size: 0.6rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    line-height: 1;
+  }
+
+  .statTileNumber,
   :global(.byline-dashboard-stat-tile-number) {
-  color: #c4b5fd;
-}
-
-.emptyLink,
-:global(.byline-dashboard-empty-link) {
-  display: block;
-}
-
-/* Group sections — one per dashboard collection group, plus the leading
+    font-size: 1.5rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    margin-top: 0.25rem;
+  }
+
+  /* Colour modifiers — one set per known status, plus a fallback. */
+
+  .tileDraft,
+  :global(.byline-dashboard-tile-draft) {
+    background-color: #fffbeb;
+  }
+
+  .tileDraft .statTileLabel,
+  :global(.byline-dashboard-tile-draft) :global(.byline-dashboard-stat-tile-label) {
+    color: #d97706;
+  }
+
+  .tileDraft .statTileNumber,
+  :global(.byline-dashboard-tile-draft) :global(.byline-dashboard-stat-tile-number) {
+    color: #b45309;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tileDraft,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-draft) {
+    background-color: rgba(120, 53, 15, 0.2);
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tileDraft .statTileLabel,
+  :is([data-theme="dark"], :global(.dark))
+    :global(.byline-dashboard-tile-draft)
+    :global(.byline-dashboard-stat-tile-label) {
+    color: #fbbf24;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tileDraft .statTileNumber,
+  :is([data-theme="dark"], :global(.dark))
+    :global(.byline-dashboard-tile-draft)
+    :global(.byline-dashboard-stat-tile-number) {
+    color: #fcd34d;
+  }
+
+  .tilePublished,
+  :global(.byline-dashboard-tile-published) {
+    background-color: #ecfdf5;
+  }
+
+  .tilePublished .statTileLabel,
+  :global(.byline-dashboard-tile-published) :global(.byline-dashboard-stat-tile-label),
+  .tilePublished .statTileNumber,
+  :global(.byline-dashboard-tile-published) :global(.byline-dashboard-stat-tile-number) {
+    color: #047857;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tilePublished,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-published) {
+    background-color: rgba(6, 78, 59, 0.2);
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tilePublished .statTileLabel,
+  :is([data-theme="dark"], :global(.dark))
+    :global(.byline-dashboard-tile-published)
+    :global(.byline-dashboard-stat-tile-label) {
+    color: #34d399;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tilePublished .statTileNumber,
+  :is([data-theme="dark"], :global(.dark))
+    :global(.byline-dashboard-tile-published)
+    :global(.byline-dashboard-stat-tile-number) {
+    color: #6ee7b7;
+  }
+
+  .tileArchived,
+  :global(.byline-dashboard-tile-archived) {
+    background-color: #f0f9ff;
+  }
+
+  .tileArchived .statTileLabel,
+  :global(.byline-dashboard-tile-archived) :global(.byline-dashboard-stat-tile-label),
+  .tileArchived .statTileNumber,
+  :global(.byline-dashboard-tile-archived) :global(.byline-dashboard-stat-tile-number) {
+    color: #0369a1;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tileArchived,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-archived) {
+    background-color: rgba(12, 74, 110, 0.2);
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tileArchived .statTileLabel,
+  :is([data-theme="dark"], :global(.dark))
+    :global(.byline-dashboard-tile-archived)
+    :global(.byline-dashboard-stat-tile-label) {
+    color: #38bdf8;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tileArchived .statTileNumber,
+  :is([data-theme="dark"], :global(.dark))
+    :global(.byline-dashboard-tile-archived)
+    :global(.byline-dashboard-stat-tile-number) {
+    color: #7dd3fc;
+  }
+
+  .tileCustom,
+  :global(.byline-dashboard-tile-custom) {
+    background-color: #f5f3ff;
+  }
+
+  .tileCustom .statTileLabel,
+  :global(.byline-dashboard-tile-custom) :global(.byline-dashboard-stat-tile-label),
+  .tileCustom .statTileNumber,
+  :global(.byline-dashboard-tile-custom) :global(.byline-dashboard-stat-tile-number) {
+    color: #6d28d9;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tileCustom,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-tile-custom) {
+    background-color: rgba(76, 29, 149, 0.2);
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tileCustom .statTileLabel,
+  :is([data-theme="dark"], :global(.dark))
+    :global(.byline-dashboard-tile-custom)
+    :global(.byline-dashboard-stat-tile-label) {
+    color: #a78bfa;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .tileCustom .statTileNumber,
+  :is([data-theme="dark"], :global(.dark))
+    :global(.byline-dashboard-tile-custom)
+    :global(.byline-dashboard-stat-tile-number) {
+    color: #c4b5fd;
+  }
+
+  .emptyLink,
+  :global(.byline-dashboard-empty-link) {
+    display: block;
+  }
+
+  /* Group sections — one per dashboard collection group, plus the leading
    ungrouped band, which renders with no heading. */
 
-.group,
-:global(.byline-dashboard-group) {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.group + .group,
-:global(.byline-dashboard-group) + :global(.byline-dashboard-group) {
-  margin-top: 2.5rem;
-}
-
-.groupHeading,
-:global(.byline-dashboard-group-heading) {
-  margin: 0;
-  padding-bottom: 0.5rem;
-  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-  font-size: 1.125rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  color: var(--gray-600);
-}
-
-:is([data-theme="dark"], :global(.dark)) .groupHeading,
-:is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-group-heading) {
-  border-bottom-color: var(--gray-700);
-  color: var(--gray-400);
+  .group,
+  :global(.byline-dashboard-group) {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .group + .group,
+  :global(.byline-dashboard-group) + :global(.byline-dashboard-group) {
+    margin-top: 2.5rem;
+  }
+
+  .groupHeading,
+  :global(.byline-dashboard-group-heading) {
+    margin: 0;
+    padding-bottom: 0.5rem;
+    border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+    font-size: 1.125rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: var(--gray-600);
+  }
+
+  :is([data-theme="dark"], :global(.dark)) .groupHeading,
+  :is([data-theme="dark"], :global(.dark)) :global(.byline-dashboard-group-heading) {
+    border-bottom-color: var(--gray-700);
+    color: var(--gray-400);
+  }
 }

package/src/admin-shell/chrome/hamburger.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;
+
 /**
  * Hamburger — icon button that toggles the admin menu drawer.
  *
@@ -7,10 +21,12 @@
  * the bar visuals; this module just hosts the wrapper override surface.
  */
 
-.button,
-:global(.byline-admin-hamburger) {
-  background: transparent;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
+@layer byline-components.cms {
+  .button,
+  :global(.byline-admin-hamburger) {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+  }
 }