@walkeros/explorer 4.8.0-next-1791441510508 → 4.8.0

package/dist/styles.css

@@ -15,6 +15,7 @@
 }
 .elb-explorer-grid-wrapper {
   --grid-min-box-width: 350px;
+  --grid-box-width: 350px;
   --grid-row-min-height: 250px;
   --grid-row-max-height: 450px;
   --grid-box-max-height-mobile: 500px;
@@ -60,6 +61,30 @@
     grid-template-columns: repeat(var(--grid-columns), minmax(var(--grid-min-box-width), 1fr));
   }
 }
+.elb-explorer-grid.elb-explorer-grid--fixed {
+  grid-auto-flow: column;
+  grid-template-columns: none;
+  grid-auto-columns: min(var(--grid-box-width), 100% - 32px);
+  grid-auto-rows: minmax(var(--grid-row-min-height), var(--grid-row-max-height, auto));
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+}
+.elb-explorer-grid.elb-explorer-grid--fixed > * {
+  min-width: 0;
+  scroll-snap-align: start;
+}
+.elb-explorer-grid.elb-explorer-grid--fixed > .elb-explorer-box {
+  height: 100%;
+  max-height: none;
+}
+@container grid-container (min-width: 600px) {
+  .elb-explorer-grid.elb-explorer-grid--fixed {
+    width: auto;
+    margin-inline: 48px;
+  }
+}
 @container grid-container (min-width: 800px) {
   .elb-explorer-grid.elb-explorer-grid--row-auto {
     grid-auto-rows: auto;
@@ -79,36 +104,34 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  border: 1px solid var(--border-strong);
+  border: 1px solid var(--primary);
   border-radius: var(--radius-full);
   background: var(--surface);
   color: var(--fg);
-  font-size: 24px;
-  line-height: 0;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease;
+  transition: background-color var(--motion) var(--ease);
   user-select: none;
 }
-@container grid-container (max-width: 799px) {
+@container grid-container (max-width: 599px) {
   .elb-explorer-grid-scroll-button {
     display: none;
   }
 }
 .elb-explorer-grid-scroll-button:hover {
   background: var(--surface-2);
-  transform: translateY(-50%) scale(1.1);
 }
-.elb-explorer-grid-scroll-button:active {
-  transform: translateY(-50%) scale(0.95);
+.elb-explorer-grid-scroll-button:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 3px;
 }
 .elb-explorer-grid-scroll-button--left {
-  left: 8px;
+  left: 4px;
 }
 .elb-explorer-grid-scroll-button--right {
-  right: 8px;
+  right: 4px;
 }
 .elb-explorer {
   width: 100%;
@@ -137,7 +160,7 @@
   align-items: center;
   justify-content: center;
   color: var(--fg-2);
-  transition: all 0.15s;
+  transition: all var(--motion) var(--ease);
 }
 .elb-explorer-btn:hover {
   background: var(--surface-2);
@@ -220,7 +243,6 @@
   transition: none !important;
 }
 .elb-code-static {
-  --monaco-font-size: 13px;
   flex: 1;
   min-height: 0;
   width: 100%;
@@ -230,7 +252,7 @@
   overflow: hidden;
   background: var(--code-bg);
   color: var(--code-fg);
-  font-size: var(--monaco-font-size);
+  font-size: var(--type-code-step-size);
   line-height: 1.5;
   font-family: var(--font-mono);
 }
@@ -269,7 +291,7 @@
   color: var(--fg-2);
   border: 0;
   background: transparent;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color var(--motion) var(--ease), background var(--motion) var(--ease);
   position: relative;
   cursor: pointer;
   text-align: center;
@@ -313,6 +335,32 @@
 .elb-preview-btn.highlight-action {
   color: var(--event-action);
 }
+.elb-explorer-toggle {
+  display: inline-grid;
+  place-items: center;
+  margin: 0;
+  padding: 4px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-xs);
+  background: var(--surface);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  font-size: var(--type-product-small-size);
+  font-weight: 600;
+  line-height: var(--type-product-small-line-height);
+  cursor: pointer;
+  transition: background-color var(--motion) var(--ease), border-color var(--motion) var(--ease);
+}
+.elb-explorer-toggle:hover {
+  background: var(--surface-2);
+}
+.elb-explorer-toggle__label {
+  grid-area: 1/1;
+  white-space: nowrap;
+}
+.elb-explorer-toggle__label[aria-hidden=true] {
+  visibility: hidden;
+}
 .elb-code-box {
   display: flex;
   flex-direction: column;
@@ -350,6 +398,17 @@
   margin: 0;
   cursor: pointer;
 }
+.elb-codebox-placeholder {
+  position: absolute;
+  inset: 0 0 auto;
+  margin: 0;
+  padding: 8px 12px;
+  color: var(--fg-3);
+  font-family: var(--font-sans);
+  font-size: var(--type-product-small-size);
+  line-height: var(--type-product-small-line-height);
+  pointer-events: none;
+}
 .elb-codebox-marker-badge {
   display: flex;
   align-items: center;
@@ -362,7 +421,7 @@
   font-weight: 600;
   font-family: var(--font-mono);
   line-height: 1;
-  transition: all 0.15s;
+  transition: all var(--motion) var(--ease);
 }
 .elb-codebox-marker-badge svg {
   flex-shrink: 0;
@@ -452,7 +511,7 @@
   user-select: none;
 }
 .elb-code-snippet .elb-code-static {
-  font-size: 15px;
+  font-size: var(--type-code-command-size);
 }
 .elb-code-view--fit {
   --height-code-view-max: 600px;
@@ -477,7 +536,7 @@
   background: var(--code-bar);
   border-radius: var(--radius-xs);
   opacity: 0;
-  transition: opacity 0.15s;
+  transition: opacity var(--motion) var(--ease);
 }
 .elb-explorer-content:hover > .elb-code-view-actions,
 .elb-code-view-actions:focus-within {
@@ -781,7 +840,7 @@
   text-align: left;
   display: block;
   width: 100%;
-  transition: opacity 0.2s ease;
+  transition: opacity var(--motion) var(--ease);
 }
 .elb-property-table__type-button:hover {
   opacity: 0.7;
@@ -797,7 +856,7 @@
   color: var(--danger);
   font-weight: bold;
   margin-left: 4px;
-  font-size: 1.1em;
+  font-size: var(--type-product-small-size);
 }
 .elb-property-table__action-cell {
   text-align: center;
@@ -828,7 +887,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.2s ease;
+  transition: background-color var(--motion) var(--ease);
 }
 .elb-property-table__more-button:hover {
   background: var(--surface-2);
@@ -891,7 +950,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: color 0.2s ease, background-color 0.2s ease;
+  transition: color var(--motion) var(--ease), background-color var(--motion) var(--ease);
 }
 .elb-property-table__close-button:hover {
   color: var(--fg);
@@ -944,7 +1003,7 @@
 }
 @media (max-width: 768px) {
   .elb-property-table__container {
-    margin: 1rem 0 0;
+    margin: 16px 0 0;
   }
   .elb-property-table {
     font-size: var(--type-product-caption-size);
@@ -958,7 +1017,7 @@
   }
   .elb-property-table tr {
     display: block;
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
     border: 1px solid var(--border);
     border-radius: var(--radius-xs);
     background: var(--surface);
@@ -1044,7 +1103,7 @@
   align-items: center;
   justify-content: center;
   min-height: 120px;
-  padding: 2rem 1rem;
+  padding: 32px 16px;
   color: var(--fg-2);
   font-style: italic;
   text-align: center;
@@ -1102,6 +1161,112 @@
     font-size: var(--type-product-small-size);
   }
 }
+.elb-view-source {
+  --elb-view-source-width: 100%;
+  --elb-view-source-height: 0px;
+  --elb-view-source-radius: 0px;
+  --elb-view-source-inset: 0px;
+  --elb-view-source-inset-top: 0px;
+  --elb-view-source-inset-right: 0px;
+  position: relative;
+}
+.elb-view-source--stretch,
+.elb-view-source--stretch > .elb-view-source__content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+.elb-view-source__content[hidden] {
+  display: none;
+}
+.elb-view-source__toolbar {
+  position: absolute;
+  top: calc(var(--elb-view-source-inset-top) + 8px);
+  right: calc(var(--elb-view-source-inset-right) + 8px);
+  z-index: var(--z-raised);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: stretch;
+  gap: 4px;
+  max-width: calc(100% - 16px);
+  font-family: var(--font-sans);
+  font-size: var(--type-product-small-size);
+  line-height: var(--type-product-small-line-height);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion) var(--ease);
+}
+.elb-view-source__notice,
+.elb-view-source__reset {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-xs);
+  background: var(--surface);
+}
+.elb-view-source__notice {
+  gap: 4px;
+  padding: 0 8px;
+  color: var(--fg);
+}
+.elb-view-source__notice svg {
+  flex: none;
+  color: var(--warning);
+}
+.elb-view-source__notice:empty {
+  position: absolute;
+  padding: 0;
+  border: 0;
+}
+.elb-view-source__reset {
+  justify-content: center;
+  margin: 0;
+  padding: 7px;
+  color: var(--fg-2);
+  cursor: pointer;
+  transition: background-color var(--motion) var(--ease), color var(--motion) var(--ease);
+}
+.elb-view-source__reset:hover {
+  background: var(--surface-2);
+  color: var(--fg);
+}
+.elb-view-source__code {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: var(--elb-view-source-width);
+  max-width: 100%;
+  height: max(var(--elb-view-source-height), 160px);
+  padding: var(--elb-view-source-inset);
+}
+.elb-view-source__surface {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--elb-view-source-radius);
+  background: var(--code-bg);
+  isolation: isolate;
+}
+.elb-view-source--code > .elb-view-source__toolbar,
+.elb-view-source--edited > .elb-view-source__toolbar,
+.elb-view-source--notice > .elb-view-source__toolbar {
+  opacity: 1;
+  pointer-events: auto;
+}
+.elb-view-source:hover:not(:has(.elb-view-source:hover)) > .elb-view-source__toolbar,
+.elb-view-source:has(:focus-visible):not(:has(.elb-view-source :focus-visible)) > .elb-view-source__toolbar {
+  opacity: 1;
+  pointer-events: auto;
+}
+@supports not selector(:has(*)) {
+  .elb-view-source:hover > .elb-view-source__toolbar,
+  .elb-view-source:focus-within > .elb-view-source__toolbar {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
 .elb-explorer-box {
   display: flex;
   flex-direction: column;
@@ -1165,6 +1330,28 @@
   color: var(--fg-2);
   user-select: none;
 }
+.elb-explorer-box-error {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--danger);
+  background: var(--danger-bg);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  font-size: var(--type-product-small-size);
+  line-height: var(--type-product-small-line-height);
+  flex-shrink: 0;
+  overflow-wrap: anywhere;
+}
+.elb-explorer-box-error svg {
+  flex: none;
+  align-self: center;
+  color: var(--danger);
+}
+.elb-explorer-box-error strong {
+  font-weight: 600;
+}
 .elb-explorer-footer {
   display: flex;
   align-items: center;
@@ -1205,7 +1392,7 @@
   box-sizing: border-box;
 }
 .elb-explorer-tab {
-  padding: 0.5rem 1rem;
+  padding: 8px 16px;
   font-size: var(--type-product-small-size);
   font-weight: 600;
   color: var(--fg-2);
@@ -1213,7 +1400,7 @@
   border: none;
   border-bottom: 2px solid transparent;
   cursor: pointer;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  transition: color var(--motion) var(--ease), border-color var(--motion) var(--ease);
   user-select: none;
 }
 .elb-explorer-tab:hover {
@@ -1225,20 +1412,420 @@
 }
 .elb-explorer-tab-actions {
   margin-left: auto;
-  padding-right: 0.5rem;
+  padding-right: 8px;
 }
 .elb-explorer-traffic-lights {
   display: flex;
-  gap: 0.5rem;
-  padding: 0 1rem;
+  gap: 8px;
+  padding: 0 16px;
   align-items: center;
 }
 .elb-explorer-traffic-light {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: 12px;
+  height: 12px;
   border-radius: var(--radius-full);
   background-color: var(--border-strong);
 }
+@layer components {
+  .elb-pg {
+    --elb-pg-panel: var(--viz-bg);
+    --elb-pg-bar: color-mix(in srgb, var(--viz-bg) 60%, var(--viz-code-bg));
+    --elb-pg-code: var(--viz-code-bg);
+    --elb-pg-line: var(--viz-surface);
+    --elb-pg-line-2: color-mix( in srgb, var(--viz-surface) 70%, var(--viz-code-bg) );
+    --elb-pg-text: var(--viz-fg);
+    --elb-pg-muted: var(--viz-fg-2);
+    --elb-pg-dim: var(--viz-comment);
+    --elb-pg-code-fg: var(--code-fg);
+    --elb-pg-line-height: 1.75;
+    box-sizing: border-box;
+    max-width: 1320px;
+    margin: 0 auto;
+    padding: 56px var(--gutter) var(--section-y);
+    color: var(--fg);
+    font-family: var(--font-sans);
+  }
+  .elb-pg__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px 48px;
+    padding-bottom: 28px;
+  }
+  .elb-pg__head > .elb-pg__intro > .elb-eyebrow {
+    margin-bottom: 14px;
+  }
+  .elb-pg__title {
+    margin: 0 0 12px;
+    color: var(--fg);
+    font-family: var(--type-heading-xl-family);
+    font-size: clamp(30px, 3.6vw, var(--type-heading-xl-size));
+    line-height: 1.12;
+    font-weight: var(--type-heading-xl-weight);
+    letter-spacing: -0.02em;
+    text-wrap: balance;
+  }
+  .elb-pg__lead {
+    max-width: 62ch;
+    margin: 0;
+    color: var(--fg-2);
+    font-size: var(--type-title-item-size);
+    line-height: var(--type-body-line-height);
+    text-wrap: pretty;
+  }
+  .elb-pg__reset .elb-icon {
+    width: 15px;
+    height: 15px;
+  }
+  .elb-pg__grid {
+    display: grid;
+    gap: 16px;
+    align-items: stretch;
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-areas: "comp event mapping" "comp result result";
+  }
+  .elb-pg-panel {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--elb-pg-text);
+    background: var(--elb-pg-panel);
+    border: 1px solid var(--viz-border);
+    border-radius: var(--radius-lg);
+  }
+  .elb-pg-panel--comp {
+    grid-area: comp;
+  }
+  .elb-pg-panel--event {
+    grid-area: event;
+  }
+  .elb-pg-panel--mapping {
+    grid-area: mapping;
+  }
+  .elb-pg-panel--result {
+    grid-area: result;
+  }
+  .elb-pg-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 46px;
+    padding: 0 8px 0 14px;
+    background: var(--elb-pg-bar);
+    border-bottom: 1px solid var(--elb-pg-line);
+  }
+  .elb-pg-step {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    border: 1px solid var(--primary);
+    border-radius: var(--radius-full);
+    color: var(--link);
+    font: 600 var(--type-viz-legend-size) var(--font-mono);
+  }
+  .elb-pg-name {
+    margin: 0;
+    color: var(--elb-pg-text);
+    font-family: var(--font-sans);
+    font-size: var(--type-small-size);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+  .elb-pg-meta {
+    color: var(--elb-pg-dim);
+    font: var(--type-product-caption-size) var(--font-mono);
+  }
+  .elb-pg-meta--edit {
+    color: var(--event-entity);
+  }
+  .elb-pg-meta--end {
+    margin-left: auto;
+    padding-right: 8px;
+  }
+  .elb-pg-copy {
+    display: inline-flex;
+    margin-left: auto;
+    padding: 8px;
+    color: var(--elb-pg-muted);
+    background: none;
+    border: 0;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  .elb-pg-copy:hover:not(:disabled) {
+    color: var(--elb-pg-text);
+    background: var(--elb-pg-line-2);
+  }
+  .elb-pg-copy:disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+  .elb-pg-tabs {
+    display: flex;
+    gap: 2px;
+    margin-left: 8px;
+  }
+  .elb-pg-tab {
+    padding: 6px 10px;
+    color: var(--elb-pg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: 6px;
+    font: 500 var(--type-product-small-size) var(--font-sans);
+    cursor: pointer;
+  }
+  .elb-pg-tab[aria-selected=true] {
+    color: var(--elb-pg-text);
+    background: var(--elb-pg-line-2);
+  }
+  .elb-pg-pane {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+  .elb-pg-chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--elb-pg-line-2);
+  }
+  .elb-pg-chips > span {
+    margin-right: 4px;
+    color: var(--elb-pg-dim);
+    font: var(--type-product-caption-size) var(--font-mono);
+  }
+  .elb-pg-chip {
+    --elb-pg-chip: var(--event-entity);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 10px;
+    color: var(--elb-pg-muted);
+    background: transparent;
+    border: 1px solid var(--viz-border);
+    border-radius: var(--radius-full);
+    font: 500 var(--type-product-caption-size) var(--font-mono);
+    cursor: pointer;
+  }
+  .elb-pg-chip i {
+    width: 7px;
+    height: 7px;
+    background: var(--viz-line-number);
+    border-radius: var(--radius-full);
+  }
+  .elb-pg-chip[aria-pressed=true] {
+    color: var(--elb-pg-text);
+    background: color-mix(in srgb, var(--viz-fg) 4%, transparent);
+    border-color: var(--elb-pg-chip);
+  }
+  .elb-pg-chip[aria-pressed=true] i {
+    background: var(--elb-pg-chip);
+  }
+  .elb-pg-chip--property {
+    --elb-pg-chip: var(--event-property);
+  }
+  .elb-pg-chip--action {
+    --elb-pg-chip: var(--event-action);
+  }
+  .elb-pg-chip--context {
+    --elb-pg-chip: var(--event-context);
+  }
+  .elb-pg-chip--globals {
+    --elb-pg-chip: var(--event-globals);
+  }
+  .elb-pg-preview {
+    flex: 1;
+    min-height: 440px;
+    padding: 24px 18px;
+    color: var(--elb-pg-text);
+    background: var(--elb-pg-code);
+    font-family: var(--font-sans);
+  }
+  .elb-pg-editor {
+    position: relative;
+    flex: 1;
+    background: var(--elb-pg-code);
+  }
+  .elb-pg-editor pre,
+  .elb-pg-editor textarea {
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 14px 16px;
+    font: var(--type-code-step-size)/var(--elb-pg-line-height) var(--font-mono);
+    white-space: pre;
+    tab-size: 2;
+  }
+  .elb-pg-editor pre {
+    overflow: hidden;
+    color: var(--elb-pg-code-fg);
+    background: transparent;
+    border-radius: 0;
+    pointer-events: none;
+  }
+  .elb-pg-editor pre > div {
+    min-height: calc(var(--elb-pg-line-height) * 1em);
+  }
+  .elb-pg-editor textarea {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    color: transparent;
+    background: transparent;
+    border: 0;
+    outline: none;
+    resize: none;
+    caret-color: var(--elb-pg-text);
+  }
+  .elb-pg-editor textarea::selection {
+    color: transparent;
+    background: color-mix(in srgb, var(--primary) 35%, transparent);
+  }
+  .elb-pg-editor textarea:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--focus);
+  }
+  .elb-pg-editor__on {
+    background: color-mix(in srgb, var(--primary) 8%, transparent);
+    box-shadow: inset 2px 0 0 var(--primary);
+  }
+  .elb-pg-editor--tall {
+    min-height: 480px;
+  }
+  .elb-pg-status {
+    padding: 10px 14px;
+    color: var(--elb-pg-dim);
+    border-bottom: 1px solid var(--elb-pg-line-2);
+    font: var(--type-product-caption-size) var(--font-mono);
+  }
+  .elb-pg-note {
+    padding: 9px 14px;
+    color: var(--event-context);
+    background: color-mix(in srgb, var(--event-context) 8%, transparent);
+    border-bottom: 1px solid var(--elb-pg-line-2);
+    font-size: var(--type-product-small-size);
+  }
+  .elb-pg-error {
+    padding: 8px 14px;
+    color: var(--event-property);
+    background: color-mix(in srgb, var(--event-property) 10%, transparent);
+    border-bottom: 1px solid var(--elb-pg-line-2);
+    font: var(--type-product-caption-size) var(--font-mono);
+  }
+  .elb-pg-scroll {
+    flex: none;
+    box-sizing: border-box;
+    height: 400px;
+    min-height: 0;
+    overflow: auto;
+    padding: 12px 0;
+    color: var(--elb-pg-code-fg);
+    background: var(--elb-pg-code);
+    font: var(--type-code-step-size)/var(--elb-pg-line-height) var(--font-mono);
+  }
+  .elb-pg-scroll:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: -2px;
+  }
+  .elb-pg-panel--event .elb-pg-scroll,
+  .elb-pg-scroll--map {
+    flex-grow: 1;
+  }
+  .elb-pg-scroll--map {
+    position: relative;
+    height: 446px;
+    padding: 0;
+    overflow: hidden;
+  }
+  .elb-pg-out {
+    min-height: 120px;
+    padding: 12px 0;
+    color: var(--elb-pg-code-fg);
+    background: var(--elb-pg-code);
+    font: var(--type-code-step-size)/var(--elb-pg-line-height) var(--font-mono);
+  }
+  .elb-pg-ln {
+    padding-right: 14px;
+    text-indent: -14px;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .elb-pg-sent {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--event-entity);
+    font: var(--type-product-caption-size) var(--font-mono);
+  }
+  .elb-pg-sent::before {
+    content: "";
+    width: 7px;
+    height: 7px;
+    background: currentColor;
+    border-radius: var(--radius-full);
+  }
+  .elb-pg-c-key,
+  .elb-pg-c-globals {
+    color: var(--event-globals);
+  }
+  .elb-pg-c-str {
+    color: var(--syntax-string);
+  }
+  .elb-pg-c-num {
+    color: var(--syntax-number);
+  }
+  .elb-pg-c-punct {
+    color: var(--viz-fg-2);
+  }
+  .elb-pg-c-tag,
+  .elb-pg-c-property {
+    color: var(--event-property);
+  }
+  .elb-pg-c-kw,
+  .elb-pg-c-action {
+    color: var(--event-action);
+  }
+  .elb-pg-c-fn {
+    color: var(--syntax-function);
+  }
+  .elb-pg-c-dim {
+    color: var(--elb-pg-dim);
+  }
+  .elb-pg-c-entity {
+    color: var(--event-entity);
+  }
+  .elb-pg-c-context {
+    color: var(--event-context);
+  }
+  @media (max-width: 1127px) {
+    .elb-pg__grid {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      grid-template-areas: "comp event" "comp mapping" "result result";
+    }
+    .elb-pg-scroll,
+    .elb-pg-scroll--map {
+      height: 240px;
+    }
+  }
+  @media (max-width: 747px) {
+    .elb-pg__grid {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas: "comp" "event" "mapping" "result";
+    }
+    .elb-pg-scroll,
+    .elb-pg-scroll--map {
+      height: 360px;
+    }
+  }
+}
 @layer components {
   .elb-btn {
     box-sizing: border-box;
@@ -1284,7 +1871,7 @@
 @layer components {
   .elb-code-inline {
     font-family: var(--font-mono);
-    font-size: 0.88em;
+    font-size: var(--type-code-inline-size);
     background: var(--surface-2);
     border: 1px solid var(--border);
     padding: 0.1em 0.4em;
@@ -1298,7 +1885,7 @@
     flex-wrap: wrap;
     gap: 14px;
     font-family: var(--font-viz-mono);
-    font-size: 11px;
+    font-size: var(--type-viz-legend-size);
     color: var(--viz-fg-2);
     background: var(--viz-bg);
     padding: 12px 16px;
@@ -1363,7 +1950,7 @@
     display: flex;
     color: var(--primary);
     font-family: var(--type-display-family);
-    font-size: 32px;
+    font-size: var(--type-footer-statement-size);
     line-height: 1;
     font-weight: var(--type-display-weight);
     letter-spacing: -0.03em;
@@ -1511,6 +2098,30 @@
     border: 0;
   }
 }
+@layer components {
+  .elb-photo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    color: var(--fg-3);
+    background:
+      repeating-linear-gradient(
+        45deg,
+        var(--surface-2) 0 6px,
+        var(--border) 6px 12px);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-legend-size);
+  }
+  .elb-photo--viz {
+    color: var(--viz-comment);
+    background:
+      repeating-linear-gradient(
+        45deg,
+        var(--viz-surface) 0 6px,
+        var(--viz-border) 6px 12px);
+  }
+}
 @layer components {
   .elb-checklist {
     display: flex;
@@ -1595,7 +2206,7 @@
     margin: 14px 0 0;
     color: var(--fg-2);
     font-family: var(--type-lead-family);
-    font-size: 18px;
+    font-size: var(--type-title-item-size);
     line-height: var(--type-lead-line-height);
     font-weight: var(--type-lead-weight);
   }
@@ -1702,7 +2313,7 @@
     content: "+";
     flex: none;
     color: var(--fg-3);
-    font-size: 22px;
+    font-size: var(--type-lead-size);
     line-height: 1;
   }
   .elb-faq__question:hover {
@@ -1809,6 +2420,231 @@
     color: var(--fg);
   }
 }
+@layer components {
+  .elb-browser {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--fg);
+    background: var(--surface);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-lg);
+  }
+  .elb-browser__bar {
+    container: elb-browser-bar/inline-size;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border);
+  }
+  .elb-browser__dots {
+    display: flex;
+    flex: none;
+    gap: 7px;
+  }
+  .elb-browser__dots > span {
+    width: 10px;
+    height: 10px;
+    background: var(--border-strong);
+    border-radius: var(--radius-full);
+  }
+  .elb-browser__address {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+    padding: 5px 12px;
+    color: var(--fg-2);
+    background: var(--bg-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-full);
+    font-family: var(--type-small-family);
+    font-size: var(--type-small-size);
+    line-height: var(--type-small-line-height);
+  }
+  .elb-browser__url {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .elb-browser__reload,
+  .elb-browser__actions > :is(a, button),
+  .elb-browser__bookmark {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--fg-2);
+    background: transparent;
+    border: 1px solid transparent;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      color var(--motion) var(--ease),
+      background var(--motion) var(--ease),
+      border-color var(--motion) var(--ease);
+  }
+  .elb-browser__reload:hover:not(:disabled),
+  .elb-browser__actions > :is(a, button):hover:not(:disabled),
+  .elb-browser__bookmark:hover:not(:disabled) {
+    color: var(--fg);
+    background: var(--surface-2);
+  }
+  .elb-browser__reload:disabled,
+  .elb-browser__actions > :is(a, button):disabled,
+  .elb-browser__bookmark:disabled {
+    cursor: default;
+  }
+  .elb-browser__reload,
+  .elb-browser__actions > :is(a, button) {
+    justify-content: center;
+    padding: 6px;
+    border-radius: var(--radius-sm);
+  }
+  .elb-browser__actions {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 4px;
+  }
+  .elb-browser__bookmarks {
+    display: flex;
+    gap: 4px;
+    padding: 6px 12px;
+    overflow-x: auto;
+    border-bottom: 1px solid var(--border);
+  }
+  .elb-browser__bookmark {
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: var(--radius-full);
+    font-family: var(--type-small-family);
+    font-size: var(--type-small-size);
+    line-height: var(--type-small-line-height);
+    white-space: nowrap;
+  }
+  .elb-browser__bookmark--active {
+    color: var(--fg);
+    background: var(--surface-2);
+    border-color: var(--border-strong);
+  }
+  .elb-browser__viewport {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    background: var(--bg);
+  }
+  .elb-browser__viewport > iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+  @container elb-browser-bar (max-width: 479px) {
+    .elb-browser__dots {
+      display: none;
+    }
+  }
+}
+@layer components {
+  .elb-quickstart {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 32px;
+  }
+  .elb-quickstart__steps {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr) 84px;
+    gap: 0 16px;
+    align-items: start;
+    align-self: stretch;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .elb-quickstart__step {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3-5);
+    min-width: 0;
+    margin: 0;
+  }
+  .elb-quickstart__head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  .elb-quickstart__num {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--primary);
+    border-radius: var(--radius-full);
+    color: var(--link);
+    font-family: var(--font-mono);
+    font-size: var(--type-small-size);
+    font-weight: 600;
+  }
+  .elb-quickstart__title {
+    margin: 0;
+    color: var(--fg);
+    font-family: var(--type-title-card-family);
+    font-size: var(--type-title-card-size);
+    font-weight: var(--type-title-card-weight);
+    line-height: 1.3;
+  }
+  .elb-quickstart__copy {
+    margin: 0;
+    color: var(--fg-2);
+    font-family: var(--type-body-family);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    text-wrap: pretty;
+  }
+  .elb-quickstart__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    margin: 0;
+    color: var(--primary);
+  }
+  .elb-quickstart__arrow > svg {
+    overflow: visible;
+  }
+  .elb-quickstart__arrow--wave > svg {
+    transform: rotate(-4deg);
+  }
+  .elb-quickstart__arrow--loop > svg {
+    transform: rotate(3deg);
+  }
+  @media (max-width: 807px) {
+    .elb-quickstart__steps {
+      grid-auto-flow: row;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 4px;
+    }
+    .elb-quickstart__arrow {
+      height: 64px;
+    }
+    .elb-quickstart__arrow--wave > svg {
+      transform: rotate(90deg);
+    }
+    .elb-quickstart__arrow--loop > svg {
+      transform: rotate(90deg) scaleY(-1);
+    }
+  }
+}
 @layer components {
   .elb-section {
     box-sizing: border-box;
@@ -1895,6 +2731,9 @@
   .elb-cluster--center {
     justify-content: center;
   }
+  .elb-cluster--separated {
+    margin-top: var(--heading-gap);
+  }
 }
 @layer components {
   .elb-hero {
@@ -2100,7 +2939,7 @@
     border: 1.5px solid var(--elb-viz-pill);
     border-radius: var(--radius-xs);
     font-family: var(--type-viz-code-family);
-    font-size: 10.5px;
+    font-size: var(--type-viz-legend-size);
     line-height: 16px;
     font-weight: 500;
     white-space: nowrap;
@@ -2282,14 +3121,14 @@
     text-align: right;
   }
   .elb-viz-table__row--header > .elb-viz-table__cell--n {
-    font-size: 11px;
+    font-size: var(--type-viz-legend-size);
   }
   .elb-viz-table__row--skeleton > .elb-viz-table__cell--n {
     color: var(--viz-line-number);
   }
   .elb-viz-table__type {
     color: var(--viz-comment);
-    font-size: 10px;
+    font-size: var(--type-viz-legend-size);
   }
   .elb-viz-table__json {
     color: var(--viz-punct);
@@ -2391,7 +3230,7 @@
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     font-family: var(--type-viz-code-family);
-    font-size: 12.5px;
+    font-size: var(--type-viz-code-size);
     line-height: 1.6;
     white-space: pre;
   }
@@ -2404,7 +3243,7 @@
   .elb-viz-mapping__comment {
     color: var(--viz-comment);
     font-family: var(--type-viz-code-family);
-    font-size: 12.5px;
+    font-size: var(--type-viz-code-size);
     font-style: italic;
   }
   .elb-viz-mapping__cards {
@@ -2441,7 +3280,7 @@
     flex: none;
     width: 58px;
     color: var(--viz-comment);
-    font-size: 10.5px;
+    font-size: var(--type-viz-legend-size);
   }
   .elb-viz-mapping__rule,
   .elb-viz-mapping__calls {
@@ -2535,7 +3374,7 @@
     min-height: 268px;
     padding: 12px 0 14px;
     font-family: var(--type-viz-code-family);
-    font-size: 13px;
+    font-size: var(--type-viz-chip-size);
     line-height: 1.95;
     opacity: var(--elb-viz-fade);
   }
@@ -2609,7 +3448,7 @@
     color: var(--viz-fg-2);
     border-radius: var(--radius-xs);
     font-family: var(--type-viz-code-family);
-    font-size: 10.5px;
+    font-size: var(--type-viz-legend-size);
     letter-spacing: 0.04em;
     outline: 1.5px solid transparent;
   }
@@ -2682,7 +3521,7 @@
       flex-basis: 100%;
     }
     .elb-viz-hero__code {
-      font-size: 12px;
+      font-size: var(--type-viz-code-size);
     }
     .elb-viz-hero__stage {
       padding: 24px 12px;
@@ -2731,8 +3570,8 @@
   }
   .elb-viz-teaser__step--active {
     color: var(--viz-fg);
-    background: color-mix(in srgb, var(--event-entity) 10%, transparent);
-    border-color: var(--event-entity);
+    background: color-mix(in srgb, var(--primary) 10%, transparent);
+    border-color: var(--primary);
   }
   .elb-viz-teaser__step-number {
     width: 20px;
@@ -2740,7 +3579,7 @@
     color: var(--viz-bg);
     background: var(--viz-border);
     border-radius: var(--radius-full);
-    font-size: 11px;
+    font-size: var(--type-viz-legend-size);
     line-height: 20px;
     font-weight: 600;
     text-align: center;
@@ -2749,7 +3588,8 @@
     background: var(--viz-comment);
   }
   .elb-viz-teaser__step--active > .elb-viz-teaser__step-number {
-    background: var(--event-entity);
+    color: var(--on-primary);
+    background: var(--primary);
   }
   .elb-viz-teaser__legend > .elb-legend {
     padding: 0;
@@ -2950,21 +3790,9 @@
     opacity: 1;
   }
   .elb-viz-teaser__photo {
-    display: flex;
     flex: none;
-    align-items: center;
-    justify-content: center;
     height: 86px;
-    overflow: hidden;
-    color: var(--viz-comment);
-    background:
-      repeating-linear-gradient(
-        45deg,
-        var(--viz-surface) 0 6px,
-        var(--viz-border) 6px 12px);
     border-radius: var(--radius-sm);
-    font-family: var(--type-viz-code-family);
-    font-size: 10.5px;
   }
   .elb-viz-teaser__kicker {
     align-self: flex-start;
@@ -2973,7 +3801,7 @@
     background: var(--viz-border);
     border-radius: var(--radius-xs);
     font-family: var(--type-viz-code-family);
-    font-size: 10.5px;
+    font-size: var(--type-viz-legend-size);
     letter-spacing: 0.04em;
     outline: 1.5px solid transparent;
   }