@byline/admin 6.10.0 → 6.11.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "6.10.0",
+  "version": "6.11.0",
   "engines": {
     "node": ">=22.22.2"
   },
@@ -169,12 +169,12 @@
     "src/"
   ],
   "dependencies": {
-    "@byline/analytics": "6.10.0",
-    "@byline/analytics-agent": "6.10.0",
-    "@byline/auth": "6.10.0",
-    "@byline/core": "6.10.0",
-    "@byline/i18n": "6.10.0",
-    "@byline/ui": "6.10.0",
+    "@byline/analytics": "6.11.0",
+    "@byline/analytics-agent": "6.11.0",
+    "@byline/auth": "6.11.0",
+    "@byline/core": "6.11.0",
+    "@byline/i18n": "6.11.0",
+    "@byline/ui": "6.11.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.12",
@@ -214,7 +214,8 @@
     "react-dom": "^19.3.1",
     "typescript": "^7.0.2",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vitest": "^5.0.5"
+    "vitest": "^5.0.5",
+    "postcss": "^8.5.31"
   },
   "publishConfig": {
     "access": "public",

package/src/fields/array/array-field.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;
+
 /**
  * ArrayField — homogeneous array of child fields with optional D&D.
  *
@@ -12,67 +26,69 @@
  *   .byline-field-array-group-fields  — vertical stack of fields inside an item
  */
 
-.title,
-:global(.byline-field-array-title) {
-  margin-bottom: 0.25rem;
-  font-size: 1rem;
-  font-weight: var(--font-weight-medium);
-}
+@layer byline-components.cms {
+  .title,
+  :global(.byline-field-array-title) {
+    margin-bottom: 0.25rem;
+    font-size: 1rem;
+    font-weight: var(--font-weight-medium);
+  }
 
-.stack,
-:global(.byline-field-array-stack) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-}
+  .stack,
+  :global(.byline-field-array-stack) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
 
-.card,
-:global(.byline-field-array-card) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding: var(--spacing-16);
-  border: var(--border-width-thin) dashed var(--gray-600);
-  border-radius: var(--border-radius-md);
-}
+  .card,
+  :global(.byline-field-array-card) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    padding: var(--spacing-16);
+    border: var(--border-width-thin) dashed var(--gray-600);
+    border-radius: var(--border-radius-md);
+  }
 
-.group-header,
-:global(.byline-field-array-group-header) {
-  font-size: 0.9rem;
-  font-weight: var(--font-weight-medium);
-}
+  .group-header,
+  :global(.byline-field-array-group-header) {
+    font-size: 0.9rem;
+    font-weight: var(--font-weight-medium);
+  }
 
-.group-fields,
-:global(.byline-field-array-group-fields) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-}
+  .group-fields,
+  :global(.byline-field-array-group-fields) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
 
-.add-row,
-:global(.byline-field-array-add-row) {
-  display: flex;
-  align-items: center;
-  font-size: 0.9rem;
-  color: var(--muted);
-  gap: var(--spacing-8);
-}
+  .add-row,
+  :global(.byline-field-array-add-row) {
+    display: flex;
+    align-items: center;
+    font-size: 0.9rem;
+    color: var(--muted);
+    gap: var(--spacing-8);
+  }
 
-/* Text-styled companion button for the add row's label — clickable like the
+  /* Text-styled companion button for the add row's label — clickable like the
    icon button. Hovering anywhere on the row brightens the label text. */
-.add-label,
-:global(.byline-field-array-add-label) {
-  appearance: none;
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  transition: color 120ms ease;
-}
+  .add-label,
+  :global(.byline-field-array-add-label) {
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    transition: color 120ms ease;
+  }
 
-.add-row:hover .add-label,
-:global(.byline-field-array-add-row):hover :global(.byline-field-array-add-label) {
-  color: var(--text);
+  .add-row:hover .add-label,
+  :global(.byline-field-array-add-row):hover :global(.byline-field-array-add-label) {
+    color: var(--text);
+  }
 }

package/src/fields/blocks/blocks-field.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;
+
 /**
  * BlocksField — heterogeneous array picked from a modal of block variants.
  *
@@ -20,91 +34,93 @@
  *   .byline-field-blocks-card-cursor    — cursor: pointer hint on the modal content
  */
 
-.title,
-:global(.byline-field-blocks-title) {
-  margin-bottom: 0.25rem;
-  font-size: 1rem;
-  font-weight: var(--font-weight-medium);
-}
+@layer byline-components.cms {
+  .title,
+  :global(.byline-field-blocks-title) {
+    margin-bottom: 0.25rem;
+    font-size: 1rem;
+    font-weight: var(--font-weight-medium);
+  }
 
-.stack,
-:global(.byline-field-blocks-stack) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-}
+  .stack,
+  :global(.byline-field-blocks-stack) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
 
-.unavailable,
-:global(.byline-field-blocks-unavailable) {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-8);
-  padding: var(--spacing-16);
-  border: 1px solid var(--stroke-warning);
-  border-radius: var(--border-radius-md);
-  background-color: oklch(from var(--fill-warning-weak) l c h / calc(alpha * 0.5));
-  color: var(--foreground);
-}
+  .unavailable,
+  :global(.byline-field-blocks-unavailable) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+    padding: var(--spacing-16);
+    border: 1px solid var(--stroke-warning);
+    border-radius: var(--border-radius-md);
+    background-color: oklch(from var(--fill-warning-weak) l c h / calc(alpha * 0.5));
+    color: var(--foreground);
+  }
 
-.unavailable > :first-child,
-:global(.byline-field-blocks-unavailable) > :first-child {
-  flex-shrink: 0;
-}
+  .unavailable > :first-child,
+  :global(.byline-field-blocks-unavailable) > :first-child {
+    flex-shrink: 0;
+  }
 
-.unavailable p,
-:global(.byline-field-blocks-unavailable) p {
-  margin: var(--spacing-4) 0 0;
-}
+  .unavailable p,
+  :global(.byline-field-blocks-unavailable) p {
+    margin: var(--spacing-4) 0 0;
+  }
 
-.add-row,
-:global(.byline-field-blocks-add-row) {
-  display: flex;
-  align-items: center;
-  font-size: 0.9rem;
-  color: var(--muted);
-  gap: var(--spacing-8);
-}
+  .add-row,
+  :global(.byline-field-blocks-add-row) {
+    display: flex;
+    align-items: center;
+    font-size: 0.9rem;
+    color: var(--muted);
+    gap: var(--spacing-8);
+  }
 
-/* Text-styled companion button for the add row's label — clickable like the
+  /* Text-styled companion button for the add row's label — clickable like the
    icon button. Hovering anywhere on the row brightens the label text. */
-.add-label,
-:global(.byline-field-blocks-add-label) {
-  appearance: none;
-  background: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  transition: color 120ms ease;
-}
+  .add-label,
+  :global(.byline-field-blocks-add-label) {
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    transition: color 120ms ease;
+  }
 
-.add-label:disabled,
-:global(.byline-field-blocks-add-label):disabled {
-  cursor: default;
-}
+  .add-label:disabled,
+  :global(.byline-field-blocks-add-label):disabled {
+    cursor: default;
+  }
 
-.add-row:hover .add-label:not(:disabled),
-:global(.byline-field-blocks-add-row):hover :global(.byline-field-blocks-add-label):not(:disabled) {
-  color: var(--text);
-}
+  .add-row:hover .add-label:not(:disabled),
+  :global(.byline-field-blocks-add-row):hover
+    :global(.byline-field-blocks-add-label):not(:disabled) {
+    color: var(--text);
+  }
 
-.modal-head,
-:global(.byline-field-blocks-modal-head) {
-  padding-top: 1rem;
-  margin-bottom: var(--spacing-8);
-}
+  .modal-head,
+  :global(.byline-field-blocks-modal-head) {
+    padding-top: 1rem;
+    margin-bottom: var(--spacing-8);
+  }
 
-.modal-title,
-:global(.byline-field-blocks-modal-title) {
-  margin: 0 0 var(--spacing-8) 0;
-  font-size: var(--font-size-2xl);
-}
+  .modal-title,
+  :global(.byline-field-blocks-modal-title) {
+    margin: 0 0 var(--spacing-8) 0;
+    font-size: var(--font-size-2xl);
+  }
 
-.modal-content,
-:global(.byline-field-blocks-card-cursor) {
-  cursor: pointer;
-  /* Cap the picker's height and scroll the card grid when a collection
+  .modal-content,
+  :global(.byline-field-blocks-card-cursor) {
+    cursor: pointer;
+    /* Cap the picker's height and scroll the card grid when a collection
      declares more blocks than fit. Mobile-first: 80% of the (dynamic)
      viewport height, tightening to 70% on tablet and 60% on desktop —
      smaller screens get proportionally more of the picker. `min-height: 0`
@@ -112,113 +128,114 @@
      shrink and scroll; `overscroll-behavior` keeps wheel momentum from
      spilling into the document behind the modal. All caps stay inside the
      Modal.Container's own viewport-height limit. */
-  max-height: 80dvh;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-
-@media (min-width: 40rem) {
-  .modal-content,
-  :global(.byline-field-blocks-card-cursor) {
-    max-height: 70dvh;
+    max-height: 80dvh;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
   }
-}
 
-@media (min-width: 64rem) {
-  .modal-content,
-  :global(.byline-field-blocks-card-cursor) {
-    max-height: 60dvh;
+  @media (min-width: 40rem) {
+    .modal-content,
+    :global(.byline-field-blocks-card-cursor) {
+      max-height: 70dvh;
+    }
   }
-}
-
-.grid,
-:global(.byline-field-blocks-grid) {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-16);
-}
 
-@media (min-width: 40rem) {
-  .grid,
-  :global(.byline-field-blocks-grid) {
-    grid-template-columns: repeat(2, 1fr);
+  @media (min-width: 64rem) {
+    .modal-content,
+    :global(.byline-field-blocks-card-cursor) {
+      max-height: 60dvh;
+    }
   }
-}
 
-@media (min-width: 48rem) {
   .grid,
   :global(.byline-field-blocks-grid) {
-    grid-template-columns: repeat(3, 1fr);
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--spacing-16);
   }
-}
-
-.card,
-:global(.byline-field-blocks-card) {
-  margin-bottom: var(--spacing-8);
-}
 
-.card-head,
-:global(.byline-field-blocks-card-head) {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--spacing-8);
-}
-
-.card-title,
-:global(.byline-field-blocks-card-title) {
-  font-size: 1.3rem;
-  line-height: var(--line-height-tight);
-}
+  @media (min-width: 40rem) {
+    .grid,
+    :global(.byline-field-blocks-grid) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
 
-.card-index,
-:global(.byline-field-blocks-card-index) {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-top: 0.125rem;
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  border-radius: var(--border-radius-full);
-  color: var(--gray-400);
-  font-size: 10px;
-  font-weight: var(--font-weight-semibold);
-  font-variant-numeric: tabular-nums;
-}
+  @media (min-width: 48rem) {
+    .grid,
+    :global(.byline-field-blocks-grid) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
 
-.card-code,
-:global(.byline-field-blocks-card-code) {
-  display: block;
-  margin-top: 0;
-  color: var(--gray-400);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 12px;
-}
+  .card,
+  :global(.byline-field-blocks-card) {
+    margin-bottom: var(--spacing-8);
+  }
 
-.card-body,
-:global(.byline-field-blocks-card-body) {
-  color: var(--gray-500);
-  font-size: var(--font-size-sm);
-}
+  .card-head,
+  :global(.byline-field-blocks-card-head) {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--spacing-8);
+  }
 
-/* ─── Dark theme variants ───────────────────────────────────── */
+  .card-title,
+  :global(.byline-field-blocks-card-title) {
+    font-size: 1.3rem;
+    line-height: var(--line-height-tight);
+  }
 
-:is([data-theme="dark"], :global(.dark)) {
   .card-index,
   :global(.byline-field-blocks-card-index) {
-    border-color: var(--gray-700);
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: 0.125rem;
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    border-radius: var(--border-radius-full);
+    color: var(--gray-400);
+    font-size: 10px;
+    font-weight: var(--font-weight-semibold);
+    font-variant-numeric: tabular-nums;
   }
 
   .card-code,
   :global(.byline-field-blocks-card-code) {
-    color: var(--gray-500);
+    display: block;
+    margin-top: 0;
+    color: var(--gray-400);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 12px;
   }
 
   .card-body,
   :global(.byline-field-blocks-card-body) {
-    color: var(--gray-200);
+    color: var(--gray-500);
+    font-size: var(--font-size-sm);
+  }
+
+  /* ─── Dark theme variants ───────────────────────────────────── */
+
+  :is([data-theme="dark"], :global(.dark)) {
+    .card-index,
+    :global(.byline-field-blocks-card-index) {
+      border-color: var(--gray-700);
+    }
+
+    .card-code,
+    :global(.byline-field-blocks-card-code) {
+      color: var(--gray-500);
+    }
+
+    .card-body,
+    :global(.byline-field-blocks-card-body) {
+      color: var(--gray-200);
+    }
   }
 }

package/src/fields/checkbox/checkbox-field.module.css

@@ -1,4 +1,18 @@
-:global(.byline-field-checkbox),
-.field-checkbox {
-  margin: 0;
+@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 {
+  :global(.byline-field-checkbox),
+  .field-checkbox {
+    margin: 0;
+  }
 }

package/src/fields/code/code-editor.tsx

@@ -98,6 +98,8 @@ const bylineCodeTheme = EditorView.theme({
   },
   '.cm-activeLine': { backgroundColor: 'var(--byline-code-active-line)' },
   '.cm-activeLineGutter': { backgroundColor: 'var(--byline-code-active-line)' },
+  // Runtime exception: CodeMirror injects unlayered selection rules. Keep the
+  // selection token authoritative; see the UI kit CSS contract's runtime limits.
   '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
     backgroundColor: 'var(--byline-code-selection) !important',
   },