@tempots/beatui 0.80.0 → 0.82.0

package/dist/beatui.css

@@ -4837,6 +4837,399 @@ a:focus-visible {
   color: var(--color-danger-400);
 }
 
+/* JSON Schema Display - Read-only value rendering */
+
+/* Grid containers — parent holds the shared column tracks */
+.bc-json-schema-display__fields,
+.bc-json-schema-display__object {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: calc(var(--spacing-base) * 3);
+}
+
+/* Each field spans both parent columns and inherits their sizing via subgrid */
+.bc-json-schema-display__field {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  row-gap: calc(var(--spacing-base) * 0.25);
+  align-items: baseline;
+  padding-block: calc(var(--spacing-base) * 0.5);
+}
+
+/* Extra properties also participate in the shared grid */
+.bc-json-schema-display__extra-property {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+}
+
+.bc-json-schema-display__label-row {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing-base) * 1);
+  grid-column: 1;
+  max-width: 16rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bc-json-schema-display__description,
+.bc-json-schema-display__mismatches {
+  grid-column: 1 / -1;
+}
+
+.bc-json-schema-display__label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-neutral-500);
+}
+
+.b-dark .bc-json-schema-display__label {
+  color: var(--color-neutral-400);
+}
+
+.bc-json-schema-display__required {
+  font-size: var(--font-size-sm);
+  color: var(--color-danger-600);
+  font-weight: var(--font-weight-bold);
+}
+
+.b-dark .bc-json-schema-display__required {
+  color: var(--color-danger-400);
+}
+
+.bc-json-schema-display__deprecated {
+  font-size: var(--font-size-xs);
+  color: var(--color-warning-600);
+  background-color: var(--color-warning-100);
+  padding: 0.1em calc(var(--spacing-base) * 1);
+  border-radius: var(--radius-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.b-dark .bc-json-schema-display__deprecated {
+  color: var(--color-warning-300);
+  background-color: var(--color-warning-900);
+}
+
+.bc-json-schema-display__description {
+  font-size: var(--font-size-xs);
+  color: var(--text-muted-light);
+}
+
+.b-dark .bc-json-schema-display__description {
+  color: var(--text-muted-dark);
+}
+
+.bc-json-schema-display__value {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-neutral-900);
+}
+
+.b-dark .bc-json-schema-display__value {
+  color: var(--color-neutral-100);
+}
+
+.bc-json-schema-display__value--null {
+  font-size: var(--font-size-sm);
+  color: var(--color-neutral-400);
+  font-style: italic;
+}
+
+.b-dark .bc-json-schema-display__value--null {
+  color: var(--color-neutral-500);
+}
+
+.bc-json-schema-display__value--missing {
+  font-size: var(--font-size-sm);
+  color: var(--color-danger-600);
+  font-style: italic;
+}
+
+.b-dark .bc-json-schema-display__value--missing {
+  color: var(--color-danger-400);
+}
+
+.bc-json-schema-display__value-context {
+  font-size: var(--font-size-xs);
+  color: var(--color-neutral-400);
+  margin-left: calc(var(--spacing-base) * 1);
+}
+
+.b-dark .bc-json-schema-display__value-context {
+  color: var(--color-neutral-500);
+}
+
+/* Links */
+.bc-json-schema-display__link {
+  color: var(--color-primary-600);
+  text-decoration: underline;
+  font-size: var(--font-size-sm);
+}
+
+.bc-json-schema-display__link:hover {
+  color: var(--color-primary-700);
+}
+
+.b-dark .bc-json-schema-display__link {
+  color: var(--color-primary-400);
+}
+
+.b-dark .bc-json-schema-display__link:hover {
+  color: var(--color-primary-300);
+}
+
+/* Color swatch */
+.bc-json-schema-display__color-display {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-base) * 1);
+}
+
+.bc-json-schema-display__color-swatch {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-neutral-300);
+  vertical-align: middle;
+}
+
+.b-dark .bc-json-schema-display__color-swatch {
+  border-color: var(--color-neutral-600);
+}
+
+/* Monospace */
+.bc-json-schema-display__monospace {
+  font-family: var(--font-family-mono, monospace);
+  font-size: var(--font-size-sm);
+}
+
+/* Pre-formatted */
+.bc-json-schema-display__pre {
+  font-family: var(--font-family-mono, monospace);
+  font-size: var(--font-size-sm);
+  white-space: pre-wrap;
+  word-break: break-word;
+  background-color: var(--color-neutral-50);
+  padding: calc(var(--spacing-base) * 2);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-neutral-200);
+  margin: 0;
+  overflow-x: auto;
+}
+
+.b-dark .bc-json-schema-display__pre {
+  background-color: var(--color-neutral-800);
+  border-color: var(--color-neutral-700);
+}
+
+/* Boolean */
+.bc-json-schema-display__boolean {
+  display: inline-block;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  padding: 0 calc(var(--spacing-base) * 1.5);
+  border-radius: var(--radius-full);
+  line-height: 1.6;
+}
+
+.bc-json-schema-display__boolean--true {
+  color: var(--color-success-700);
+  background-color: var(--color-success-100);
+}
+
+.bc-json-schema-display__boolean--false {
+  color: var(--color-danger-700);
+  background-color: var(--color-danger-100);
+}
+
+.b-dark .bc-json-schema-display__boolean--true {
+  color: var(--color-success-300);
+  background-color: var(--color-success-900);
+}
+
+.b-dark .bc-json-schema-display__boolean--false {
+  color: var(--color-danger-300);
+  background-color: var(--color-danger-900);
+}
+
+/* Object */
+.bc-json-schema-display__object {
+  border-left: calc(var(--spacing-base) * 2) solid var(--color-base-200);
+  padding-inline-start: calc(var(--spacing-base) * 2);
+}
+
+.b-dark .bc-json-schema-display__object {
+  border-left-color: var(--color-neutral-700);
+}
+
+/* Extra properties */
+.bc-json-schema-display__extra-property {
+  opacity: 0.7;
+  border-left: 2px dashed var(--color-warning-400);
+  padding-inline-start: calc(var(--spacing-base) * 2);
+}
+
+.b-dark .bc-json-schema-display__extra-property {
+  border-left-color: var(--color-warning-600);
+}
+
+/* Array */
+.bc-json-schema-display__array {
+  display: flex;
+  flex-direction: column;
+}
+
+.bc-json-schema-display__array-item {
+  display: flex;
+  gap: calc(var(--spacing-base) * 1.5);
+  align-items: baseline;
+}
+
+/* Strip field wrapper padding inside array items */
+.bc-json-schema-display__array-item > .bc-json-schema-display__field {
+  padding-block: 0;
+}
+
+.bc-json-schema-display__array-index {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-neutral-400);
+  font-family: var(--font-family-mono, monospace);
+  min-width: 2rem;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.b-dark .bc-json-schema-display__array-index {
+  color: var(--color-neutral-500);
+}
+
+.bc-json-schema-display__empty {
+  font-size: var(--font-size-sm);
+  color: var(--color-neutral-400);
+  font-style: italic;
+}
+
+.b-dark .bc-json-schema-display__empty {
+  color: var(--color-neutral-500);
+}
+
+/* Composition (oneOf/anyOf) branch label */
+.bc-json-schema-display__branch-label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-primary-600);
+  padding: 0 calc(var(--spacing-base) * 1);
+  background-color: var(--color-primary-50);
+  border-radius: var(--radius-sm);
+  display: inline-block;
+  margin-bottom: calc(var(--spacing-base) * 1);
+}
+
+.b-dark .bc-json-schema-display__branch-label {
+  color: var(--color-primary-300);
+  background-color: var(--color-primary-900);
+}
+
+.bc-json-schema-display__branch-label--ambiguous {
+  color: var(--color-warning-700);
+  background-color: var(--color-warning-100);
+}
+
+.b-dark .bc-json-schema-display__branch-label--ambiguous {
+  color: var(--color-warning-300);
+  background-color: var(--color-warning-900);
+}
+
+.bc-json-schema-display__branch-label--no-match {
+  color: var(--color-danger-700);
+  background-color: var(--color-danger-100);
+}
+
+.b-dark .bc-json-schema-display__branch-label--no-match {
+  color: var(--color-danger-300);
+  background-color: var(--color-danger-900);
+}
+
+/* Mismatch indicators */
+.bc-json-schema-display__mismatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--spacing-base) * 1);
+}
+
+.bc-json-schema-display__mismatch {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  padding: 0 calc(var(--spacing-base) * 1.5);
+  border-radius: var(--radius-full);
+  line-height: 1.6;
+}
+
+.bc-json-schema-display__mismatch--type-mismatch {
+  color: var(--color-danger-700);
+  background-color: var(--color-danger-100);
+}
+
+.bc-json-schema-display__mismatch--missing-required {
+  color: var(--color-danger-700);
+  background-color: var(--color-danger-100);
+}
+
+.bc-json-schema-display__mismatch--extra-property {
+  color: var(--color-warning-700);
+  background-color: var(--color-warning-100);
+}
+
+.bc-json-schema-display__mismatch--enum-mismatch {
+  color: var(--color-warning-700);
+  background-color: var(--color-warning-100);
+}
+
+.bc-json-schema-display__mismatch--const-mismatch {
+  color: var(--color-warning-700);
+  background-color: var(--color-warning-100);
+}
+
+.bc-json-schema-display__mismatch--constraint-violation {
+  color: var(--color-danger-700);
+  background-color: var(--color-danger-100);
+}
+
+.bc-json-schema-display__mismatch-indicator {
+  font-size: var(--font-size-xs);
+  color: var(--color-danger-600);
+  font-style: italic;
+  margin-left: calc(var(--spacing-base) * 1);
+}
+
+.b-dark .bc-json-schema-display__mismatch--type-mismatch,
+.b-dark .bc-json-schema-display__mismatch--missing-required {
+  color: var(--color-danger-300);
+  background-color: var(--color-danger-900);
+}
+
+.b-dark .bc-json-schema-display__mismatch--extra-property,
+.b-dark .bc-json-schema-display__mismatch--enum-mismatch,
+.b-dark .bc-json-schema-display__mismatch--const-mismatch {
+  color: var(--color-warning-300);
+  background-color: var(--color-warning-900);
+}
+
+.b-dark .bc-json-schema-display__mismatch--constraint-violation {
+  color: var(--color-danger-300);
+  background-color: var(--color-danger-900);
+}
+
+.b-dark .bc-json-schema-display__mismatch-indicator {
+  color: var(--color-danger-400);
+}
+
 /**
  * JSON Structure Form Component Styles
  *