@povio/ui 5.0.0-rc.5 → 5.0.0-rc.7

package/dist/styles/configurator.css

@@ -74,16 +74,23 @@
   font-size: 11px;
   font-weight: 550;
 }
-/* The configurator covers the whole viewport as a full page above the application. */
+/* Keep the application visible around the movable configurator window. */
 .studio-overlay {
   position: fixed;
   inset: 0;
-  background: #fff;
+  background: #14232240;
+  display: grid;
+  place-items: center;
+  padding: 8px;
   z-index: 1000;
 }
 .studio-modal {
-  width: 100%;
-  height: 100dvh;
+  position: relative;
+  container-type: inline-size;
+  width: min(1440px, calc(100vw - 48px));
+  height: min(900px, calc(100dvh - 48px));
+  border-radius: 12px;
+  box-shadow: 0 25px 90px #12251f30;
   background: #fff;
   overflow: hidden;
 }
@@ -149,7 +156,7 @@
 .studio-topbar .studio-search:has(input:disabled) {
   opacity: 0.5;
 }
-@media (max-width: 800px) {
+@container (max-width: 800px) {
   .studio-topbar-controls {
     flex-wrap: wrap;
     margin-left: 0;
@@ -220,6 +227,18 @@
   overflow-x: auto;
   scrollbar-width: none;
 }
+.studio-section-tabs {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.studio-nav .studio-preview-tab {
+  display: none;
+}
 .studio-nav-divider {
   flex-shrink: 0;
   width: 1px;
@@ -530,7 +549,7 @@
 .studio-error {
   color: #b8362c;
   display: block;
-  margin-top: 7px;
+  margin-top: 4px;
   font-size: 11px;
 }
 .studio-preview {
@@ -724,7 +743,7 @@
   color: #4e4e4e;
   margin: 18px 0;
 }
-@media (max-width: 1050px) {
+@container (max-width: 1050px) {
   .studio-dialog {
     grid-template-columns: var(--studio-editor-track, minmax(260px, 0.8fr)) minmax(280px, 1.25fr);
   }
@@ -738,7 +757,7 @@
     padding: 8px;
   }
 }
-@media (max-width: 800px) {
+@container (max-width: 800px) {
   /* One scrolling column: top bar, editor, preview, then the footer pinned to the bottom. */
   .studio-dialog {
     display: flex;
@@ -857,12 +876,12 @@
   right: 1px;
   padding: 5px;
 }
-@media (min-width: 801px) and (max-width: 1100px) {
+@container (min-width: 801px) and (max-width: 1100px) {
   .studio-type-fields {
     grid-template-columns: 1fr;
   }
 }
-@media (max-width: 420px) {
+@container (max-width: 420px) {
   .studio-type-fields {
     gap: 6px;
   }
@@ -899,7 +918,7 @@
   grid-column: 2;
   margin: 0;
 }
-@media (max-width: 420px) {
+@container (max-width: 420px) {
   .studio-token-list-inline .studio-token {
     grid-template-columns: minmax(0, 1fr) minmax(165px, 50%);
     gap: 6px 10px;
@@ -948,7 +967,7 @@
 }
 .studio-token-unit {
   position: absolute;
-  right: 7px;
+  right: 4px;
   top: 50%;
   transform: translateY(-50%);
   color: #939393;
@@ -1452,7 +1471,7 @@
 }
 .studio-token-sample > span {
   display: block;
-  margin-bottom: 7px;
+  margin-bottom: 4px;
   font: 11px sans-serif;
   text-transform: capitalize;
 }
@@ -1650,7 +1669,7 @@
   align-items: center;
   gap: 7px;
   min-width: 0;
-  padding-left: 7px;
+  padding-left: 4px;
 }
 .studio-alpha-swatch {
   position: relative;
@@ -2363,3 +2382,885 @@
   justify-content: flex-end;
   gap: 8px;
 }
+
+.studio-window-grip {
+  position: absolute;
+  top: 20px;
+  right: 18px;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+  border: 0;
+  padding: 4px;
+  background: transparent;
+  color: #858585;
+  touch-action: none;
+  flex-shrink: 0;
+  border-radius: 5px;
+}
+.studio-overlay .studio-window-grip {
+  cursor: grab;
+}
+.studio-overlay .studio-window-grip:active {
+  cursor: grabbing;
+}
+.studio-window-resize {
+  position: absolute;
+  z-index: 4;
+  display: block;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  touch-action: none;
+}
+.studio-window-resize-n,
+.studio-window-resize-s {
+  left: 12px;
+  right: 12px;
+  height: 6px;
+}
+.studio-window-resize-e,
+.studio-window-resize-w {
+  top: 12px;
+  bottom: 12px;
+  width: 6px;
+}
+.studio-window-resize-n {
+  top: 0;
+  cursor: ns-resize !important;
+}
+.studio-window-resize-s {
+  bottom: 0;
+  cursor: ns-resize !important;
+}
+.studio-window-resize-e {
+  right: 0;
+  cursor: ew-resize !important;
+}
+.studio-window-resize-w {
+  left: 0;
+  cursor: ew-resize !important;
+}
+.studio-window-resize-ne,
+.studio-window-resize-se,
+.studio-window-resize-sw,
+.studio-window-resize-nw {
+  width: 12px;
+  height: 12px;
+}
+.studio-window-resize-ne {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize !important;
+}
+.studio-window-resize-se {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize !important;
+}
+.studio-window-resize-sw {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize !important;
+}
+.studio-window-resize-nw {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize !important;
+}
+.studio-window-grip:focus-visible,
+.studio-window-resize:focus-visible {
+  outline: 2px solid #555;
+  outline-offset: -2px;
+}
+@media (max-width: 600px) {
+  .studio-modal {
+    width: calc(100vw - 16px);
+    height: calc(100dvh - 16px);
+  }
+}
+
+/* The grip belongs to the window, so scrolling or hiding the preview cannot hide it. */
+.studio-preview-actions {
+  padding-right: 36px;
+}
+@container (max-width: 1050px) {
+  .studio-window-grip {
+    top: 18px;
+  }
+}
+@container (max-width: 800px) {
+  .studio-window-grip {
+    top: 10px;
+    right: 12px;
+  }
+  .studio-topbar {
+    padding-right: 48px;
+  }
+  .studio-preview-actions {
+    padding-right: 0;
+  }
+}
+
+/* Resized windows must not inherit the gallery specimens' intrinsic minimum width. */
+.studio-layout-card {
+  min-width: 0;
+  max-width: 100%;
+}
+.studio-gallery-grid {
+  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
+}
+.studio-palette-actions {
+  flex-shrink: 0;
+}
+@container (max-width: 800px) {
+  .studio-dialog > .studio-topbar,
+  .studio-body > .studio-editor,
+  .studio-body > .studio-preview,
+  .studio-dialog > .studio-footer {
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+}
+/* Wide specimens (tables and steppers) scroll within their own preview, never the window. */
+.studio-layout-card.is-screen,
+.studio-gallery-demo {
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+}
+@container (max-width: 800px) {
+  .studio-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 4;
+    flex-shrink: 0;
+  }
+  .studio-nav .studio-preview-tab {
+    display: flex;
+    margin-left: auto;
+  }
+  .studio-dialog:not([data-compact-preview]) .studio-preview,
+  .studio-dialog[data-compact-preview] .studio-editor {
+    display: none;
+  }
+}
+
+.studio-window-popout {
+  position: absolute;
+  top: 20px;
+  right: 50px;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 5px;
+  color: #858585;
+  background: transparent;
+}
+.studio-window-popout:focus-visible {
+  outline: 2px solid #555;
+  outline-offset: -2px;
+}
+.studio-preview-actions {
+  padding-right: 68px;
+}
+@container (max-width: 1050px) {
+  .studio-window-popout {
+    top: 18px;
+  }
+}
+@container (max-width: 800px) {
+  .studio-window-popout {
+    top: 10px;
+    right: 44px;
+  }
+  .studio-topbar {
+    padding-right: 80px;
+  }
+  .studio-preview-actions {
+    padding-right: 0;
+  }
+}
+[data-povio-ui-popout] .studio-overlay {
+  padding: 0;
+}
+[data-povio-ui-popout] .studio-modal-popout {
+  width: 100vw;
+  height: 100dvh;
+  border-radius: 0;
+  box-shadow: none;
+}
+.studio-modal-popout .studio-window-popout {
+  right: 18px;
+}
+.studio-modal-popout .studio-preview-actions {
+  padding-right: 36px;
+}
+@container (max-width: 800px) {
+  .studio-modal-popout .studio-topbar {
+    padding-right: 48px;
+  }
+  .studio-modal-popout .studio-preview-actions {
+    padding-right: 0;
+  }
+}
+
+@container (max-width: 800px) {
+  .studio-topbar,
+  .studio-modal-popout .studio-topbar {
+    padding-right: 16px;
+  }
+  .studio-topbar-controls {
+    margin-right: 64px;
+  }
+  .studio-modal-popout .studio-topbar-controls {
+    margin-right: 32px;
+  }
+}
+.studio-palette-native {
+  position: relative;
+}
+.studio-palette-native > select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.studio-palette-native:focus-within {
+  outline: 2px solid #797979;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.studio-window-minimize {
+  position: absolute;
+  top: 20px;
+  right: 82px;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  color: #858585;
+  background: transparent;
+}
+.studio-window-minimize:focus-visible {
+  outline: 2px solid #555;
+  outline-offset: -2px;
+}
+.studio-preview-actions {
+  padding-right: 100px;
+}
+.studio-modal-popout .studio-window-minimize {
+  right: 50px;
+}
+.studio-modal-popout .studio-preview-actions {
+  padding-right: 68px;
+}
+@container (max-width: 1050px) {
+  .studio-window-minimize {
+    top: 18px;
+  }
+}
+@container (max-width: 800px) {
+  .studio-window-minimize {
+    top: 10px;
+    right: 76px;
+  }
+  .studio-topbar-controls {
+    margin-right: 96px;
+  }
+  .studio-modal-popout .studio-topbar-controls {
+    margin-right: 64px;
+  }
+  .studio-preview-actions,
+  .studio-modal-popout .studio-preview-actions {
+    padding-right: 0;
+  }
+}
+.studio-floating-launcher {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border: 1px solid #555;
+  border-radius: 999px;
+  background: #292929;
+  color: #fff;
+  box-shadow: 0 4px 16px #0003;
+  font:
+    600 13px/1.4 "Inter Variable",
+    Inter,
+    sans-serif;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+.studio-floating-launcher:active {
+  cursor: grabbing;
+}
+.studio-floating-launcher:focus-visible {
+  outline: 2px solid #555;
+  outline-offset: 3px;
+}
+
+/* Live-preview inspection keeps the canvas and property sidebar independently scrollable. */
+.studio-preview:has(.studio-hover-inspector) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+.studio-preview-heading,
+.studio-preview-note {
+  flex-shrink: 0;
+}
+.studio-hover-inspector {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  grid-auto-rows: minmax(0, 1fr);
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  gap: 16px;
+  container: studio-inspection / inline-size;
+}
+.studio-hover-inspector.has-inspector {
+  grid-template-columns: minmax(0, 1fr) 270px;
+}
+.studio-inspector-toolbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+  color: #8b8b8b;
+  font-size: 10px;
+}
+.studio-inspector-toolbar .studio-mode button {
+  padding: 4px 8px;
+  font-size: 10px;
+}
+.studio-inspector-canvas-shell {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+.studio-inspector-canvas {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.studio-hover-outline-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 2;
+}
+.studio-hover-outline {
+  position: absolute;
+  border: 1px solid #8b5cf6;
+  box-shadow: 0 0 0 1px #8b5cf633;
+}
+.studio-hover-outline > span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-100%);
+  max-width: 280px;
+  padding: 2px 5px;
+  border-radius: 3px 3px 0 0;
+  background: #7c3aed;
+  color: #fff;
+  font:
+    10px/1.5 "Inter Variable",
+    sans-serif;
+  white-space: nowrap;
+}
+.studio-inspector-panel {
+  grid-column: 2;
+  position: relative;
+  align-self: stretch;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  box-sizing: border-box;
+  border: 1px solid #dedde4;
+  border-radius: 10px;
+  background: #fff;
+  color: #292730;
+  font:
+    11px/1.5 "Inter Variable",
+    Inter,
+    sans-serif;
+  overscroll-behavior: contain;
+}
+.studio-inspector-panel > header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 9px 12px;
+  border-bottom: 1px solid #efedf3;
+  background: #fff;
+}
+.studio-inspector-panel > header > strong {
+  flex: 1;
+  font-size: 11px;
+}
+.studio-inspector-panel button {
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #716c7d;
+  cursor: pointer;
+}
+.studio-inspector-panel > header button {
+  display: grid;
+  place-items: center;
+  padding: 5px;
+}
+.studio-inspector-panel button[aria-pressed="true"] {
+  background: #ede9fe;
+  color: #7c3aed;
+}
+.studio-inspector-panel button:focus-visible {
+  outline: 2px solid #8b5cf6;
+  outline-offset: 1px;
+}
+.studio-inspector-panel section {
+  border-top: 1px solid #efedf3;
+  padding: 10px 12px;
+}
+.studio-inspector-panel h3 {
+  margin: 0 0 7px;
+  font-size: 9px;
+  font-weight: 600;
+  color: #928a9d;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+.studio-inspector-section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.studio-inspector-section-heading h3 {
+  margin: 0;
+}
+.studio-inspector-section-heading > span {
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: #f4f4f4;
+  color: #777;
+  font-size: 10px;
+}
+.studio-inspector-panel dl {
+  margin: 0;
+}
+.studio-inspector-panel dl > div {
+  display: grid;
+  grid-template-columns: 85px minmax(0, 1fr);
+  gap: 6px;
+  padding: 3px 0;
+}
+.studio-inspector-panel dt {
+  color: #817b8b;
+}
+.studio-inspector-panel dd {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.studio-inspector-panel dd > i {
+  width: 12px;
+  height: 12px;
+  border: 1px solid #0002;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.studio-inspector-panel dd > button {
+  max-width: 100%;
+  padding: 2px 5px;
+  background: #f3effb;
+  color: #7752ae;
+  font-size: 9px;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.studio-inspector-empty {
+  margin: 0;
+  padding: 16px 12px;
+  color: #89838e;
+}
+.studio-box-model {
+  margin: 0;
+  padding: 8px;
+  border-radius: 7px;
+  background: #fafafa;
+  color: #393939;
+}
+.studio-box-model figcaption {
+  margin-top: 6px;
+  text-align: center;
+  color: #8b8b8b;
+  font-size: 9px;
+}
+.studio-box-layer {
+  position: relative;
+  padding: 24px;
+  box-sizing: border-box;
+  font:
+    10px/1.3 "Inter Variable",
+    sans-serif;
+}
+.studio-box-layer.is-position {
+  border: 1px dotted #b8b8b8;
+}
+.studio-box-layer.is-margin {
+  border: 1px dashed #b8b8b8;
+}
+.studio-box-layer.is-border {
+  border: 1px solid #b8b8b8;
+}
+.studio-box-layer.is-padding {
+  border: 1px dashed #a7a7a7;
+  background: #e9e9e9;
+}
+.studio-box-name {
+  position: absolute;
+  top: -7px;
+  left: 8px;
+  padding: 0 3px;
+  background: #fafafa;
+  color: #747474;
+  font-size: 9px;
+}
+.studio-box-layer.is-padding > .studio-box-name {
+  background: #e9e9e9;
+}
+.studio-box-value {
+  position: absolute;
+  font-variant-numeric: tabular-nums;
+}
+.studio-box-value.is-top {
+  top: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.studio-box-value.is-bottom {
+  bottom: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.studio-box-value.is-left {
+  left: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.studio-box-value.is-right {
+  right: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.studio-inspector-panel .studio-box-value {
+  padding: 0;
+  border-radius: 2px;
+  color: inherit;
+  line-height: 1.3;
+  font-size: 10px;
+}
+.studio-inspector-panel button.studio-box-value[data-token] {
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+}
+.studio-box-radius {
+  position: absolute;
+  padding: 1px 2px;
+  border-radius: 3px;
+  background: #f5f5f5;
+  color: #777;
+  font-size: 8px;
+  line-height: 1;
+}
+.studio-box-radius.is-topLeft {
+  top: 3px;
+  left: 3px;
+}
+.studio-box-radius.is-topRight {
+  top: 3px;
+  right: 3px;
+}
+.studio-box-radius.is-bottomLeft {
+  bottom: 3px;
+  left: 3px;
+}
+.studio-box-radius.is-bottomRight {
+  bottom: 3px;
+  right: 3px;
+}
+.studio-inspector-panel .studio-box-radius {
+  padding: 1px;
+  color: #777;
+  font-size: 8px;
+  line-height: 1;
+}
+.studio-inspector-panel button.studio-box-radius[data-token] {
+  text-decoration: underline dotted;
+}
+.studio-box-content {
+  min-width: 0;
+  padding: 5px 2px;
+  border: 1px solid #b8b8b8;
+  background: #fafafa;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.studio-box-dimensions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  font-size: 9px;
+}
+.studio-box-gaps {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+  padding: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+}
+.studio-gap-grid {
+  display: grid;
+  width: 130px;
+  max-width: 100%;
+  align-items: center;
+  justify-items: center;
+}
+.studio-gap-grid i {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 1px solid #bdbdbd;
+  border-radius: 2px;
+  background: #e9e9e9;
+}
+.studio-gap-grid i:nth-child(1) {
+  grid-column: 1;
+  grid-row: 1;
+}
+.studio-gap-grid i:nth-child(2) {
+  grid-column: 3;
+  grid-row: 1;
+}
+.studio-gap-grid i:nth-child(3) {
+  grid-column: 1;
+  grid-row: 3;
+}
+.studio-gap-grid i:nth-child(4) {
+  grid-column: 3;
+  grid-row: 3;
+}
+.studio-gap-number {
+  color: #555;
+  font-size: 10px;
+}
+.studio-gap-number.is-column {
+  grid-column: 2;
+  grid-row: 1;
+}
+.studio-gap-number.is-row {
+  grid-column: 1;
+  grid-row: 2;
+}
+.studio-inspector-panel button.studio-gap-number[data-token] {
+  padding: 0;
+  text-decoration: underline dotted;
+  font-size: 10px;
+}
+.studio-box-layer.is-position,
+.studio-box-layer.is-position .studio-box-layer {
+  padding: 16px;
+}
+@container studio-inspection (max-width: 620px) {
+  .studio-inspector-canvas-shell,
+  .studio-inspector-panel {
+    grid-column: 1 / -1;
+  }
+  .studio-inspector-canvas-shell {
+    grid-row: 2;
+  }
+  .studio-inspector-panel {
+    grid-row: 3;
+  }
+}
+@container (max-width: 800px) {
+  .studio-preview:has(.studio-hover-inspector) {
+    height: max(420px, calc(100dvh - 220px));
+  }
+}
+.studio-box-layer.is-border:has(.studio-box-radius) {
+  border-color: transparent;
+}
+.studio-box-layer.is-border:has(.studio-box-radius)::before {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border: 1px solid #b8b8b8;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.studio-box-radius {
+  z-index: 1;
+}
+.studio-box-radius.is-topLeft {
+  top: 4px;
+  left: 4px;
+}
+.studio-box-radius.is-topRight {
+  top: 4px;
+  right: 4px;
+}
+.studio-box-radius.is-bottomLeft {
+  bottom: 4px;
+  left: 4px;
+}
+.studio-box-radius.is-bottomRight {
+  bottom: 4px;
+  right: 4px;
+}
+
+.studio-measure-regions {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.studio-measure-region {
+  position: absolute;
+  box-sizing: border-box;
+  background: #7c3aed88;
+  color: #4c1d95;
+  box-shadow:
+    inset 0 0 0 1px currentColor,
+    0 0 0 1px #fff;
+}
+.studio-measure-region.is-margin {
+  background: #f59e0b99;
+  color: #92400e;
+}
+.studio-measure-region.is-border {
+  background: #2563ebbf;
+  color: #1e40af;
+}
+.studio-measure-region.is-gap {
+  background: repeating-linear-gradient(45deg, #7c3aed88 0 3px, #5b21b6bf 3px 5px);
+}
+.studio-measure-region.is-horizontal {
+  height: 1px !important;
+  border-top: 2px solid currentColor;
+  background: none;
+}
+.studio-measure-region.is-vertical {
+  width: 1px !important;
+  border-left: 2px solid currentColor;
+  background: none;
+}
+.studio-measure-region.is-horizontal::before,
+.studio-measure-region.is-horizontal::after {
+  content: "";
+  position: absolute;
+  top: -4px;
+  height: 7px;
+  border-left: 2px solid currentColor;
+}
+.studio-measure-region.is-horizontal::before {
+  left: 0;
+}
+.studio-measure-region.is-horizontal::after {
+  right: 0;
+}
+.studio-measure-region.is-vertical::before,
+.studio-measure-region.is-vertical::after {
+  content: "";
+  position: absolute;
+  left: -4px;
+  width: 7px;
+  border-top: 2px solid currentColor;
+}
+.studio-measure-region.is-vertical::before {
+  top: 0;
+}
+.studio-measure-region.is-vertical::after {
+  bottom: 0;
+}
+.studio-measure-region.is-corner {
+  background: none;
+  box-shadow: none;
+}
+.studio-measure-region.is-corner svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.studio-measure-label {
+  position: absolute;
+  max-width: 220px;
+  padding: 3px 6px;
+  border-radius: 4px;
+  background: #6d28d9;
+  color: #fff;
+  font:
+    10px/1.4 "Inter Variable",
+    sans-serif;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 2px 6px #0004;
+}
+.studio-inspector-panel .studio-box-dimension-value {
+  padding: 0;
+  font: inherit;
+  font-size: 9px;
+  line-height: 1.3;
+  color: inherit;
+}
+.studio-inspector-panel .studio-gap-number {
+  padding: 0;
+  font-size: 10px;
+}
+.studio-box-model button[data-box-highlight]:hover,
+.studio-box-model button[data-box-highlight]:focus-visible {
+  background: #ede9fe;
+  color: #6d28d9;
+}
+
+.studio-measure-region.is-corner path {
+  stroke-width: 3px;
+  filter: drop-shadow(0 0 1px #fff);
+}