@deltarobotics/uhd-viewer 0.2.0 → 0.2.1

package/dist/app/index.html

@@ -7,8 +7,8 @@
     <!-- inline, so no /favicon.ico request reaches a server that has none (PB-873) -->
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='2.5'/%3E%3Cpath d='M3.5 9h-2M3.5 15h-2M20.5 9h2M20.5 15h2'/%3E%3Crect x='8' y='8' width='8' height='8' rx='1'/%3E%3C/svg%3E" />
     <style>html,body,#root{height:100%;margin:0}body{background:#1f1f1f}</style>
-    <script type="module" crossorigin src="./assets/index-CkpIRYgM.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-Boi2erhd.css">
+    <script type="module" crossorigin src="./assets/index-DWZ-48wc.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CEJyT8hF.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/components/components.css

@@ -2,6 +2,9 @@
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -47,9 +50,6 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
     }
   }
 }
@@ -1392,6 +1392,62 @@
     font-size: 13px;
   }
 
+  .canvas-empty-add {
+    pointer-events: auto;
+    border-radius: var(--uhd-radius);
+    max-width: none;
+    color: var(--uhd-text-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    transition: background-color .2s, color .2s;
+    display: flex;
+  }
+
+  .canvas-empty-add:hover {
+    background: var(--uhd-hover);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .canvas-empty-add:hover {
+      background: color-mix(in oklab, var(--uhd-hover) 70%, transparent);
+    }
+  }
+
+  .canvas-empty-add:hover {
+    color: var(--uhd-text);
+  }
+
+  .canvas-empty-add:focus-visible {
+    outline: 1px solid var(--uhd-focus-ring);
+    outline-offset: 2px;
+  }
+
+  .canvas-empty-box {
+    border-radius: var(--uhd-radius);
+    opacity: .85;
+    border: 2px dashed;
+    place-items: center;
+    width: 192px;
+    height: 192px;
+    display: grid;
+  }
+
+  .canvas-empty-label {
+    font: 500 13px/1.2 var(--uhd-font-label);
+    letter-spacing: .02em;
+    white-space: nowrap;
+  }
+
+  [data-uhd-scheme^="high-contrast"] .canvas-empty-add:hover {
+    outline: 1px dashed var(--uhd-focus-ring);
+    outline-offset: -1px;
+  }
+
   .react-flow__node {
     transition: opacity .15s;
   }
@@ -2434,6 +2490,8 @@
   }
 
   .cad-scope {
+    -webkit-user-select: none;
+    user-select: none;
     top: calc(var(--uhd-inset-top, 0px) + 10px);
     left: calc(var(--uhd-inset-left, 0px) + 10px);
     z-index: 2;
@@ -2818,6 +2876,16 @@
     position: absolute;
   }
 
+  .uhd-dock-moving > .workspace {
+    transition: left .2s ease-out;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .uhd-dock-moving > .workspace {
+      transition: none;
+    }
+  }
+
   .workspace > .canvas, .workspace > .cad-view {
     position: absolute;
     inset: 0;
@@ -3056,23 +3124,53 @@
   }
 
   .legend {
-    left: calc(var(--uhd-inset-left, 0px) + 8px);
     background: var(--uhd-surface);
     border: 1px solid var(--uhd-border);
     border-radius: var(--uhd-radius);
     box-shadow: var(--uhd-shadow-md);
     bottom: 8px;
-    right: auto;
+    left: auto;
+    right: 8px;
+  }
+
+  .legend.covered-right {
+    right: calc(min(340px, 100% - 64px) + 12px);
+  }
+
+  .legend-tab {
+    z-index: 10;
+    position: absolute;
+    bottom: 8px;
+    right: 0;
+  }
+
+  .legend-tab.covered-right {
+    border-radius: var(--uhd-radius);
+    border-right-width: 1px;
+    right: calc(min(340px, 100% - 64px) + 8px);
   }
 
   .legend-measure {
-    left: calc(var(--uhd-inset-left, 0px) + 8px);
     visibility: hidden;
     pointer-events: none;
     z-index: -1;
     width: max-content;
     position: absolute;
     bottom: 8px;
+    left: auto;
+    right: 8px;
+  }
+
+  .legend-measure.covered-right {
+    right: calc(min(340px, 100% - 64px) + 12px);
+  }
+
+  .legend-tab.legend-measure {
+    right: 0;
+  }
+
+  .legend-tab.legend-measure.covered-right {
+    right: calc(min(340px, 100% - 64px) + 8px);
   }
 
   .legend-popover {
@@ -3819,6 +3917,7 @@
     min-width: 160px;
     box-shadow: var(--uhd-shadow-lg);
     flex-direction: column;
+    min-width: 200px;
     padding: 4px;
     display: flex;
     position: fixed;
@@ -3826,15 +3925,55 @@
 
   .context-menu button {
     text-align: left;
-    letter-spacing: .06em;
+    height: 28px;
+    font: 12px/1 var(--uhd-font-ui);
+    letter-spacing: normal;
     color: var(--uhd-text);
+    white-space: nowrap;
     border-radius: 5px;
-    padding: 6px 10px;
-    font-size: 10px;
+    align-items: center;
+    gap: 8px;
+    padding: 0 8px;
+    display: flex;
   }
 
-  .context-menu button:hover {
+  .context-menu button:hover, .context-menu button:focus-visible {
     background: var(--uhd-active);
+    outline: none;
+  }
+
+  .context-menu-icon {
+    width: 14px;
+    height: 14px;
+    color: var(--uhd-text-muted);
+    flex: none;
+    place-items: center;
+    display: grid;
+  }
+
+  .context-menu button:hover .context-menu-icon {
+    color: var(--uhd-text);
+  }
+
+  .context-menu-label {
+    flex: 1;
+  }
+
+  .context-menu-key {
+    font: 10.5px/1 var(--uhd-font-mono);
+    color: var(--uhd-text-faint);
+    margin-left: 16px;
+  }
+
+  .context-menu-rule {
+    background: var(--uhd-border);
+    height: 1px;
+    margin: 4px 2px;
+  }
+
+  [data-uhd-scheme^="high-contrast"] .context-menu button:hover, [data-uhd-scheme^="high-contrast"] .context-menu button:focus-visible {
+    outline: 1px dashed var(--uhd-focus-ring);
+    outline-offset: -1px;
   }
 
   .breadcrumb {
@@ -3943,9 +4082,13 @@
       display: none;
     }
 
-    .toolbar.covered-right, .cad-view:has(.cad-inspector) .cad-toolbar {
+    .toolbar.covered-right, .cad-view:has(.cad-inspector) .cad-toolbar, .legend.covered-right, .legend-measure.covered-right {
       right: calc(min(300px, 100% - 96px) + 12px);
     }
+
+    .legend-tab.covered-right, .legend-tab.legend-measure.covered-right {
+      right: calc(min(300px, 100% - 96px) + 8px);
+    }
   }
 
   .react-flow.uhd-tool-select .react-flow__pane {
@@ -4207,6 +4350,10 @@
     inset-block: 0;
   }
 
+  .inset-y-2 {
+    inset-block: calc(var(--spacing) * 2);
+  }
+
   .-top-0\.5 {
     top: calc(var(--spacing) * -.5);
   }
@@ -4215,12 +4362,12 @@
     top: var(--spacing);
   }
 
-  .top-\[calc\(var\(--uhd-inset-top\,0px\)\+12px\)\] {
-    top: calc(var(--uhd-inset-top, 0px) + 12px);
+  .top-\[calc\(var\(--uhd-inset-top\,0px\)\+4px\)\] {
+    top: calc(var(--uhd-inset-top, 0px) + 4px);
   }
 
-  .top-\[var\(--uhd-inset-top\,0px\)\] {
-    top: var(--uhd-inset-top, 0px);
+  .top-\[calc\(var\(--uhd-inset-top\,0px\)\+12px\)\] {
+    top: calc(var(--uhd-inset-top, 0px) + 12px);
   }
 
   .-right-0\.5 {
@@ -4239,10 +4386,6 @@
     right: var(--spacing);
   }
 
-  .bottom-0 {
-    bottom: 0;
-  }
-
   .bottom-1 {
     bottom: var(--spacing);
   }
@@ -4255,6 +4398,10 @@
     left: 0;
   }
 
+  .left-1 {
+    left: var(--spacing);
+  }
+
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -4279,6 +4426,10 @@
     z-index: 1000;
   }
 
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .container {
     width: 100%;
   }
@@ -4321,10 +4472,18 @@
     margin: calc(var(--spacing) * 32);
   }
 
+  .-mx-1 {
+    margin-inline: calc(var(--spacing) * -1);
+  }
+
   .-mx-1\.5 {
     margin-inline: calc(var(--spacing) * -1.5);
   }
 
+  .-mx-3 {
+    margin-inline: calc(var(--spacing) * -3);
+  }
+
   .mx-0\.5 {
     margin-inline: calc(var(--spacing) * .5);
   }
@@ -4349,6 +4508,14 @@
     margin-block: calc(var(--spacing) * .5);
   }
 
+  .-mt-1 {
+    margin-top: calc(var(--spacing) * -1);
+  }
+
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * .5);
+  }
+
   .mt-1 {
     margin-top: var(--spacing);
   }
@@ -4490,6 +4657,10 @@
     height: 100%;
   }
 
+  .h-1 {
+    height: var(--spacing);
+  }
+
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -4558,6 +4729,10 @@
     min-height: calc(var(--spacing) * 6);
   }
 
+  .min-h-7 {
+    min-height: calc(var(--spacing) * 7);
+  }
+
   .min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
@@ -4594,16 +4769,16 @@
     width: calc(var(--spacing) * 6);
   }
 
-  .w-11 {
-    width: calc(var(--spacing) * 11);
+  .w-9 {
+    width: calc(var(--spacing) * 9);
   }
 
   .w-\[3px\] {
     width: 3px;
   }
 
-  .w-\[88px\] {
-    width: 88px;
+  .w-\[18px\] {
+    width: 18px;
   }
 
   .w-\[92px\] {
@@ -4654,6 +4829,10 @@
     min-width: calc(var(--spacing) * 3.5);
   }
 
+  .min-w-11 {
+    min-width: calc(var(--spacing) * 11);
+  }
+
   .min-w-\[150px\] {
     min-width: 150px;
   }
@@ -4678,6 +4857,11 @@
     flex-grow: 1;
   }
 
+  .-translate-x-\[calc\(100\%\+8px\)\] {
+    --tw-translate-x: calc(calc(100% + 8px) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .rotate-90 {
     rotate: 90deg;
   }
@@ -4714,10 +4898,22 @@
     scrollbar-width: none;
   }
 
+  .grid-cols-\[fit-content\(40\%\)_fit-content\(30\%\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: fit-content(40%) fit-content(30%) minmax(0, 1fr);
+  }
+
+  .grid-cols-\[fit-content\(40\%\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: fit-content(40%) minmax(0, 1fr);
+  }
+
   .grid-cols-\[minmax\(0\,1fr\)_56px_minmax\(0\,1fr\)\] {
     grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
   }
 
+  .grid-cols-subgrid {
+    grid-template-columns: subgrid;
+  }
+
   .flex-col {
     flex-direction: column;
   }
@@ -4798,6 +4994,10 @@
     column-gap: var(--spacing);
   }
 
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
+
   .gap-x-3 {
     column-gap: calc(var(--spacing) * 3);
   }
@@ -4810,6 +5010,10 @@
     row-gap: var(--spacing);
   }
 
+  .gap-y-\[3px\] {
+    row-gap: 3px;
+  }
+
   .self-start {
     align-self: flex-start;
   }
@@ -4872,6 +5076,11 @@
     border-radius: var(--radius-sm);
   }
 
+  .rounded-l-panel {
+    border-top-left-radius: var(--uhd-radius);
+    border-bottom-left-radius: var(--uhd-radius);
+  }
+
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -4887,9 +5096,9 @@
     border-top-width: 1px;
   }
 
-  .border-r {
+  .border-r-0 {
     border-right-style: var(--tw-border-style);
-    border-right-width: 1px;
+    border-right-width: 0;
   }
 
   .border-b {
@@ -5110,6 +5319,10 @@
     padding: 1px;
   }
 
+  .px-0 {
+    padding-inline: 0;
+  }
+
   .px-0\.5 {
     padding-inline: calc(var(--spacing) * .5);
   }
@@ -5198,10 +5411,6 @@
     padding-top: calc(var(--spacing) * 2);
   }
 
-  .pt-\[var\(--uhd-inset-top\,0px\)\] {
-    padding-top: var(--uhd-inset-top, 0px);
-  }
-
   .pr-1 {
     padding-right: var(--spacing);
   }
@@ -5254,6 +5463,10 @@
     text-align: right;
   }
 
+  .align-middle {
+    vertical-align: middle;
+  }
+
   .font-code {
     font-family: var(--uhd-font-mono);
   }
@@ -5282,6 +5495,10 @@
     font-size: 10px;
   }
 
+  .text-\[11\.5px\] {
+    font-size: 11.5px;
+  }
+
   .text-\[11px\] {
     font-size: 11px;
   }
@@ -5323,11 +5540,21 @@
     line-height: 1.35;
   }
 
+  .leading-\[13px\] {
+    --tw-leading: 13px;
+    line-height: 13px;
+  }
+
   .leading-\[14px\] {
     --tw-leading: 14px;
     line-height: 14px;
   }
 
+  .leading-\[15px\] {
+    --tw-leading: 15px;
+    line-height: 15px;
+  }
+
   .leading-\[16px\] {
     --tw-leading: 16px;
     line-height: 16px;
@@ -5388,11 +5615,6 @@
     letter-spacing: .8px;
   }
 
-  .tracking-\[0\.12em\] {
-    --tw-tracking: .12em;
-    letter-spacing: .12em;
-  }
-
   .\[overflow-wrap\:anywhere\] {
     overflow-wrap: anywhere;
   }
@@ -5409,6 +5631,10 @@
     white-space: nowrap;
   }
 
+  .whitespace-pre-line {
+    white-space: pre-line;
+  }
+
   .text-accent {
     color: var(--uhd-accent);
   }
@@ -5474,6 +5700,14 @@
     text-decoration-line: none;
   }
 
+  .opacity-0 {
+    opacity: 0;
+  }
+
+  .opacity-35 {
+    opacity: .35;
+  }
+
   .opacity-40 {
     opacity: .4;
   }
@@ -5540,12 +5774,30 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  .transition-\[opacity\,background-color\,color\,box-shadow\] {
+    transition-property: opacity, background-color, color, box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[opacity\,background-color\] {
     transition-property: opacity, background-color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[transform\,opacity\] {
+    transition-property: transform, opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5574,6 +5826,11 @@
     transition-duration: .15s;
   }
 
+  .duration-200 {
+    --tw-duration: .2s;
+    transition-duration: .2s;
+  }
+
   .ease-out {
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
@@ -5594,10 +5851,6 @@
     user-select: none;
   }
 
-  .\[writing-mode\:vertical-rl\] {
-    writing-mode: vertical-rl;
-  }
-
   @media (hover: hover) {
     .group-hover\:bg-focus:is(:where(.group):hover *) {
       background-color: var(--uhd-focus-ring);
@@ -5712,6 +5965,11 @@
       text-decoration-line: underline;
     }
 
+    .hover\:shadow-\[0_0_10px_1px_var\(--uhd-hover\)\]:hover {
+      --tw-shadow: 0 0 10px 1px var(--tw-shadow-color, var(--uhd-hover));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+
     .hover\:outline:hover, .hover\:outline-1:hover {
       outline-style: var(--tw-outline-style);
       outline-width: 1px;
@@ -5834,6 +6092,12 @@
     opacity: 0;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .motion-reduce\:transition-none {
+      transition-property: none;
+    }
+  }
+
   @media not all and (min-width: 640px) {
     .max-\[640px\]\:hidden {
       display: none;
@@ -5850,6 +6114,24 @@
   }
 }
 
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false
@@ -6087,22 +6369,4 @@
   inherits: false;
   initial-value: "";
 }
-
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 /*$vite$:1*/