@tangle-network/sandbox-ui 2.0.16 → 2.0.18

package/dist/globals.css

@@ -6770,6 +6770,9 @@
     --tw-content: '';
     content: var(--tw-content);
   }
+  .\[\&\>\[data-timeline-step\]\]\:mx-0 > [data-timeline-step] {
+    margin-inline: 0px;
+  }
   .\[\&\>button\]\:py-1 > button {
     padding-block: var(--spacing);
   }
@@ -9455,13 +9458,13 @@
 }
 @layer base {
   @scope (.agent-graph, .ag-root, .ag-latest, [data-agent-metrics]) {
-    *, ::after, ::before, ::backdrop, ::file-selector-button {
+    *, :scope:is(*), ::after, :scope:is(::after), ::before, :scope:is(::before), ::backdrop, :scope:is(::backdrop), ::file-selector-button, :scope:is(::file-selector-button) {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
       border: 0 solid;
     }
-    html, :host {
+    html, :scope:is(html), :host, :scope:is(:host) {
       line-height: 1.5;
       -webkit-text-size-adjust: 100%;
       tab-size: 4;
@@ -9470,74 +9473,74 @@
       font-variation-settings: var(--default-font-variation-settings, normal);
       -webkit-tap-highlight-color: transparent;
     }
-    hr {
+    hr, :scope:is(hr) {
       height: 0;
       color: inherit;
       border-top-width: 1px;
     }
-    abbr:where([title]) {
+    abbr:where([title]), :scope:is(abbr:where([title])) {
       -webkit-text-decoration: underline dotted;
       text-decoration: underline dotted;
     }
-    h1, h2, h3, h4, h5, h6 {
+    h1, :scope:is(h1), h2, :scope:is(h2), h3, :scope:is(h3), h4, :scope:is(h4), h5, :scope:is(h5), h6, :scope:is(h6) {
       font-size: inherit;
       font-weight: inherit;
     }
-    a {
+    a, :scope:is(a) {
       color: inherit;
       -webkit-text-decoration: inherit;
       text-decoration: inherit;
     }
-    b, strong {
+    b, :scope:is(b), strong, :scope:is(strong) {
       font-weight: bolder;
     }
-    code, kbd, samp, pre {
+    code, :scope:is(code), kbd, :scope:is(kbd), samp, :scope:is(samp), pre, :scope:is(pre) {
       font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
       font-feature-settings: var(--default-mono-font-feature-settings, normal);
       font-variation-settings: var(--default-mono-font-variation-settings, normal);
       font-size: 1em;
     }
-    small {
+    small, :scope:is(small) {
       font-size: 80%;
     }
-    sub, sup {
+    sub, :scope:is(sub), sup, :scope:is(sup) {
       font-size: 75%;
       line-height: 0;
       position: relative;
       vertical-align: baseline;
     }
-    sub {
+    sub, :scope:is(sub) {
       bottom: -0.25em;
     }
-    sup {
+    sup, :scope:is(sup) {
       top: -0.5em;
     }
-    table {
+    table, :scope:is(table) {
       text-indent: 0;
       border-color: inherit;
       border-collapse: collapse;
     }
-    :-moz-focusring:where(:not(iframe)) {
+    :-moz-focusring:where(:not(iframe)), :scope:is(:-moz-focusring:where(:not(iframe))) {
       outline: auto;
     }
-    progress {
+    progress, :scope:is(progress) {
       vertical-align: baseline;
     }
-    summary {
+    summary, :scope:is(summary) {
       display: list-item;
     }
-    ol, ul, menu {
+    ol, :scope:is(ol), ul, :scope:is(ul), menu, :scope:is(menu) {
       list-style: none;
     }
-    img, svg, video, canvas, audio, iframe, embed, object {
+    img, :scope:is(img), svg, :scope:is(svg), video, :scope:is(video), canvas, :scope:is(canvas), audio, :scope:is(audio), iframe, :scope:is(iframe), embed, :scope:is(embed), object, :scope:is(object) {
       display: block;
       vertical-align: middle;
     }
-    img, video {
+    img, :scope:is(img), video, :scope:is(video) {
       max-width: 100%;
       height: auto;
     }
-    button, input, select, optgroup, textarea, ::file-selector-button {
+    button, :scope:is(button), input, :scope:is(input), select, :scope:is(select), optgroup, :scope:is(optgroup), textarea, :scope:is(textarea), ::file-selector-button, :scope:is(::file-selector-button) {
       font: inherit;
       font-feature-settings: inherit;
       font-variation-settings: inherit;
@@ -9547,71 +9550,71 @@
       background-color: transparent;
       opacity: 1;
     }
-    :where(select:is([multiple], [size])) optgroup {
+    :where(select:is([multiple], [size])) optgroup, :scope:is(:where(select:is([multiple], [size])) optgroup) {
       font-weight: bolder;
     }
-    :where(select:is([multiple], [size])) optgroup option {
+    :where(select:is([multiple], [size])) optgroup option, :scope:is(:where(select:is([multiple], [size])) optgroup option) {
       padding-inline-start: 20px;
     }
-    ::file-selector-button {
+    ::file-selector-button, :scope:is(::file-selector-button) {
       margin-inline-end: 4px;
     }
-    ::placeholder {
+    ::placeholder, :scope:is(::placeholder) {
       opacity: 1;
     }
     @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
-      ::placeholder {
+      ::placeholder, :scope:is(::placeholder) {
         color: currentcolor;
         @supports (color: color-mix(in lab, red, red)) {
           color: color-mix(in oklab, currentcolor 50%, transparent);
         }
       }
     }
-    textarea {
+    textarea, :scope:is(textarea) {
       resize: vertical;
     }
-    ::-webkit-search-decoration {
+    ::-webkit-search-decoration, :scope:is(::-webkit-search-decoration) {
       -webkit-appearance: none;
     }
-    ::-webkit-date-and-time-value {
+    ::-webkit-date-and-time-value, :scope:is(::-webkit-date-and-time-value) {
       min-height: 1lh;
       text-align: inherit;
     }
-    ::-webkit-datetime-edit {
+    ::-webkit-datetime-edit, :scope:is(::-webkit-datetime-edit) {
       display: inline-flex;
     }
-    ::-webkit-datetime-edit-fields-wrapper {
+    ::-webkit-datetime-edit-fields-wrapper, :scope:is(::-webkit-datetime-edit-fields-wrapper) {
       padding: 0;
     }
-    ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    ::-webkit-datetime-edit, :scope:is(::-webkit-datetime-edit), ::-webkit-datetime-edit-year-field, :scope:is(::-webkit-datetime-edit-year-field), ::-webkit-datetime-edit-month-field, :scope:is(::-webkit-datetime-edit-month-field), ::-webkit-datetime-edit-day-field, :scope:is(::-webkit-datetime-edit-day-field), ::-webkit-datetime-edit-hour-field, :scope:is(::-webkit-datetime-edit-hour-field), ::-webkit-datetime-edit-minute-field, :scope:is(::-webkit-datetime-edit-minute-field), ::-webkit-datetime-edit-second-field, :scope:is(::-webkit-datetime-edit-second-field), ::-webkit-datetime-edit-millisecond-field, :scope:is(::-webkit-datetime-edit-millisecond-field), ::-webkit-datetime-edit-meridiem-field, :scope:is(::-webkit-datetime-edit-meridiem-field) {
       padding-block: 0;
     }
-    ::-webkit-calendar-picker-indicator {
+    ::-webkit-calendar-picker-indicator, :scope:is(::-webkit-calendar-picker-indicator) {
       line-height: 1;
     }
-    :-moz-ui-invalid {
+    :-moz-ui-invalid, :scope:is(:-moz-ui-invalid) {
       box-shadow: none;
     }
-    button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    button, :scope:is(button), input:where([type="button"], [type="reset"], [type="submit"]), :scope:is(input:where([type="button"], [type="reset"], [type="submit"])), ::file-selector-button, :scope:is(::file-selector-button) {
       appearance: button;
     }
-    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    ::-webkit-inner-spin-button, :scope:is(::-webkit-inner-spin-button), ::-webkit-outer-spin-button, :scope:is(::-webkit-outer-spin-button) {
       height: auto;
     }
-    [hidden]:where(:not([hidden="until-found"])) {
+    [hidden]:where(:not([hidden="until-found"])), :scope:is([hidden]:where(:not([hidden="until-found"]))) {
       display: none !important;
     }
   }
 }
 @layer utilities {
   @scope (.agent-graph, .ag-root, .ag-latest, [data-agent-metrics]) {
-    .pointer-events-auto {
+    .pointer-events-auto, :scope:is(.pointer-events-auto) {
       pointer-events: auto;
     }
-    .visible {
+    .visible, :scope:is(.visible) {
       visibility: visible;
     }
-    .sr-only {
+    .sr-only, :scope:is(.sr-only) {
       position: absolute;
       width: 1px;
       height: 1px;
@@ -9622,25 +9625,25 @@
       white-space: nowrap;
       border-width: 0;
     }
-    .absolute {
+    .absolute, :scope:is(.absolute) {
       position: absolute;
     }
-    .fixed {
+    .fixed, :scope:is(.fixed) {
       position: fixed;
     }
-    .relative {
+    .relative, :scope:is(.relative) {
       position: relative;
     }
-    .static {
+    .static, :scope:is(.static) {
       position: static;
     }
-    .top-2 {
+    .top-2, :scope:is(.top-2) {
       top: calc(var(--spacing) * 2);
     }
-    .right-3 {
+    .right-3, :scope:is(.right-3) {
       right: calc(var(--spacing) * 3);
     }
-    .container {
+    .container, :scope:is(.container) {
       width: 100%;
       @media (width >= 40rem) {
         max-width: 40rem;
@@ -9658,348 +9661,348 @@
         max-width: 96rem;
       }
     }
-    .m-0 {
+    .m-0, :scope:is(.m-0) {
       margin: 0px;
     }
-    .mt-3 {
+    .mt-3, :scope:is(.mt-3) {
       margin-top: calc(var(--spacing) * 3);
     }
-    .mt-auto {
+    .mt-auto, :scope:is(.mt-auto) {
       margin-top: auto;
     }
-    .mb-1 {
+    .mb-1, :scope:is(.mb-1) {
       margin-bottom: var(--spacing);
     }
-    .mb-2 {
+    .mb-2, :scope:is(.mb-2) {
       margin-bottom: calc(var(--spacing) * 2);
     }
-    .mb-3 {
+    .mb-3, :scope:is(.mb-3) {
       margin-bottom: calc(var(--spacing) * 3);
     }
-    .line-clamp-2 {
+    .line-clamp-2, :scope:is(.line-clamp-2) {
       overflow: hidden;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
     }
-    .\!hidden {
+    .\!hidden, :scope:is(.\!hidden) {
       display: none !important;
     }
-    .block {
+    .block, :scope:is(.block) {
       display: block;
     }
-    .contents {
+    .contents, :scope:is(.contents) {
       display: contents;
     }
-    .flex {
+    .flex, :scope:is(.flex) {
       display: flex;
     }
-    .grid {
+    .grid, :scope:is(.grid) {
       display: grid;
     }
-    .\!h-1 {
+    .\!h-1, :scope:is(.\!h-1) {
       height: var(--spacing) !important;
     }
-    .h-16 {
+    .h-16, :scope:is(.h-16) {
       height: calc(var(--spacing) * 16);
     }
-    .h-full {
+    .h-full, :scope:is(.h-full) {
       height: 100%;
     }
-    .min-h-0 {
+    .min-h-0, :scope:is(.min-h-0) {
       min-height: 0px;
     }
-    .min-h-4 {
+    .min-h-4, :scope:is(.min-h-4) {
       min-height: calc(var(--spacing) * 4);
     }
-    .min-h-10 {
+    .min-h-10, :scope:is(.min-h-10) {
       min-height: calc(var(--spacing) * 10);
     }
-    .\!w-1 {
+    .\!w-1, :scope:is(.\!w-1) {
       width: var(--spacing) !important;
     }
-    .w-8 {
+    .w-8, :scope:is(.w-8) {
       width: calc(var(--spacing) * 8);
     }
-    .w-full {
+    .w-full, :scope:is(.w-full) {
       width: 100%;
     }
-    .max-w-64 {
+    .max-w-64, :scope:is(.max-w-64) {
       max-width: calc(var(--spacing) * 64);
     }
-    .\!min-w-0 {
+    .\!min-w-0, :scope:is(.\!min-w-0) {
       min-width: 0px !important;
     }
-    .min-w-0 {
+    .min-w-0, :scope:is(.min-w-0) {
       min-width: 0px;
     }
-    .flex-1 {
+    .flex-1, :scope:is(.flex-1) {
       flex: 1;
     }
-    .shrink-0 {
+    .shrink-0, :scope:is(.shrink-0) {
       flex-shrink: 0;
     }
-    .-rotate-90 {
+    .-rotate-90, :scope:is(.-rotate-90) {
       rotate: calc(90deg * -1);
     }
-    .transform {
+    .transform, :scope:is(.transform) {
       transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
     }
-    .animate-\[tangle-breathe_var\(--motion-ambient\)_infinite\] {
+    .animate-\[tangle-breathe_var\(--motion-ambient\)_infinite\], :scope:is(.animate-\[tangle-breathe_var\(--motion-ambient\)_infinite\]) {
       animation: tangle-breathe var(--motion-ambient) infinite;
     }
-    .grid-cols-\[minmax\(0\,1fr\)_auto\] {
+    .grid-cols-\[minmax\(0\,1fr\)_auto\],:scope:is(.grid-cols-\[minmax\(0\,1fr\)_auto\]) {
       grid-template-columns: minmax(0,1fr) auto;
     }
-    .flex-col {
+    .flex-col, :scope:is(.flex-col) {
       flex-direction: column;
     }
-    .flex-wrap {
+    .flex-wrap, :scope:is(.flex-wrap) {
       flex-wrap: wrap;
     }
-    .items-center {
+    .items-center, :scope:is(.items-center) {
       align-items: center;
     }
-    .justify-between {
+    .justify-between, :scope:is(.justify-between) {
       justify-content: space-between;
     }
-    .justify-center {
+    .justify-center, :scope:is(.justify-center) {
       justify-content: center;
     }
-    .gap-0\.5 {
+    .gap-0\.5, :scope:is(.gap-0\.5) {
       gap: calc(var(--spacing) * 0.5);
     }
-    .gap-1 {
+    .gap-1, :scope:is(.gap-1) {
       gap: var(--spacing);
     }
-    .gap-2 {
+    .gap-2, :scope:is(.gap-2) {
       gap: calc(var(--spacing) * 2);
     }
-    .gap-3 {
+    .gap-3, :scope:is(.gap-3) {
       gap: calc(var(--spacing) * 3);
     }
-    :where(.space-y-0\.5 > :not(:last-child)) {
+    :where(.space-y-0\.5 > :not(:last-child)), :scope:is(:where(.space-y-0\.5 > :not(:last-child))) {
       --tw-space-y-reverse: 0;
       margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
       margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
     }
-    .gap-x-3 {
+    .gap-x-3, :scope:is(.gap-x-3) {
       column-gap: calc(var(--spacing) * 3);
     }
-    .gap-x-5 {
+    .gap-x-5, :scope:is(.gap-x-5) {
       column-gap: calc(var(--spacing) * 5);
     }
-    .gap-y-1 {
+    .gap-y-1, :scope:is(.gap-y-1) {
       row-gap: var(--spacing);
     }
-    .gap-y-1\.5 {
+    .gap-y-1\.5, :scope:is(.gap-y-1\.5) {
       row-gap: calc(var(--spacing) * 1.5);
     }
-    .truncate {
+    .truncate, :scope:is(.truncate) {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .overflow-auto {
+    .overflow-auto, :scope:is(.overflow-auto) {
       overflow: auto;
     }
-    .rounded {
+    .rounded, :scope:is(.rounded) {
       border-radius: 0.25rem;
     }
-    .rounded-2xl {
+    .rounded-2xl, :scope:is(.rounded-2xl) {
       border-radius: var(--radius-2xl);
     }
-    .rounded-\[var\(--radius-card\)\] {
+    .rounded-\[var\(--radius-card\)\], :scope:is(.rounded-\[var\(--radius-card\)\]) {
       border-radius: var(--radius-card);
     }
-    .rounded-full {
+    .rounded-full, :scope:is(.rounded-full) {
       border-radius: var(--radius-full);
     }
-    .rounded-lg {
+    .rounded-lg, :scope:is(.rounded-lg) {
       border-radius: var(--radius-lg);
     }
-    .rounded-xl {
+    .rounded-xl, :scope:is(.rounded-xl) {
       border-radius: var(--radius-xl);
     }
-    .\!border-0 {
+    .\!border-0, :scope:is(.\!border-0) {
       border-style: var(--tw-border-style) !important;
       border-width: 0px !important;
     }
-    .border {
+    .border, :scope:is(.border) {
       border-style: var(--tw-border-style);
       border-width: 1px;
     }
-    .border-t {
+    .border-t, :scope:is(.border-t) {
       border-top-style: var(--tw-border-style);
       border-top-width: 1px;
     }
-    .border-dashed {
+    .border-dashed, :scope:is(.border-dashed) {
       --tw-border-style: dashed;
       border-style: dashed;
     }
-    .border-border {
+    .border-border, :scope:is(.border-border) {
       border-color: hsl(var(--border));
     }
-    .\!bg-transparent {
+    .\!bg-transparent, :scope:is(.\!bg-transparent) {
       background-color: transparent !important;
     }
-    .bg-background {
+    .bg-background, :scope:is(.bg-background) {
       background-color: hsl(var(--background));
     }
-    .bg-card {
+    .bg-card, :scope:is(.bg-card) {
       background-color: hsl(var(--card));
     }
-    .p-2 {
+    .p-2, :scope:is(.p-2) {
       padding: calc(var(--spacing) * 2);
     }
-    .p-4 {
+    .p-4, :scope:is(.p-4) {
       padding: calc(var(--spacing) * 4);
     }
-    .px-1\.5 {
+    .px-1\.5, :scope:is(.px-1\.5) {
       padding-inline: calc(var(--spacing) * 1.5);
     }
-    .px-2 {
+    .px-2, :scope:is(.px-2) {
       padding-inline: calc(var(--spacing) * 2);
     }
-    .px-3 {
+    .px-3, :scope:is(.px-3) {
       padding-inline: calc(var(--spacing) * 3);
     }
-    .py-0\.5 {
+    .py-0\.5, :scope:is(.py-0\.5) {
       padding-block: calc(var(--spacing) * 0.5);
     }
-    .py-1 {
+    .py-1, :scope:is(.py-1) {
       padding-block: var(--spacing);
     }
-    .py-2 {
+    .py-2, :scope:is(.py-2) {
       padding-block: calc(var(--spacing) * 2);
     }
-    .pt-3 {
+    .pt-3, :scope:is(.pt-3) {
       padding-top: calc(var(--spacing) * 3);
     }
-    .text-center {
+    .text-center, :scope:is(.text-center) {
       text-align: center;
     }
-    .text-left {
+    .text-left, :scope:is(.text-left) {
       text-align: left;
     }
-    .text-right {
+    .text-right, :scope:is(.text-right) {
       text-align: right;
     }
-    .text-sm {
+    .text-sm, :scope:is(.text-sm) {
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
-    .text-xs {
+    .text-xs, :scope:is(.text-xs) {
       font-size: var(--text-xs);
       line-height: var(--tw-leading, var(--text-xs--line-height));
     }
-    .text-\[10px\] {
+    .text-\[10px\], :scope:is(.text-\[10px\]) {
       font-size: 10px;
     }
-    .leading-4 {
+    .leading-4, :scope:is(.leading-4) {
       --tw-leading: calc(var(--spacing) * 4);
       line-height: calc(var(--spacing) * 4);
     }
-    .leading-\[18px\] {
+    .leading-\[18px\], :scope:is(.leading-\[18px\]) {
       --tw-leading: 18px;
       line-height: 18px;
     }
-    .font-medium {
+    .font-medium, :scope:is(.font-medium) {
       --tw-font-weight: var(--font-weight-medium);
       font-weight: var(--font-weight-medium);
     }
-    .font-normal {
+    .font-normal, :scope:is(.font-normal) {
       --tw-font-weight: var(--font-weight-normal);
       font-weight: var(--font-weight-normal);
     }
-    .font-semibold {
+    .font-semibold, :scope:is(.font-semibold) {
       --tw-font-weight: var(--font-weight-semibold);
       font-weight: var(--font-weight-semibold);
     }
-    .break-words {
+    .break-words, :scope:is(.break-words) {
       overflow-wrap: break-word;
     }
-    .whitespace-normal {
+    .whitespace-normal, :scope:is(.whitespace-normal) {
       white-space: normal;
     }
-    .whitespace-nowrap {
+    .whitespace-nowrap, :scope:is(.whitespace-nowrap) {
       white-space: nowrap;
     }
-    .whitespace-pre-wrap {
+    .whitespace-pre-wrap, :scope:is(.whitespace-pre-wrap) {
       white-space: pre-wrap;
     }
-    .text-\[var\(--surface-danger-text\)\] {
+    .text-\[var\(--surface-danger-text\)\], :scope:is(.text-\[var\(--surface-danger-text\)\]) {
       color: var(--surface-danger-text);
     }
-    .text-foreground {
+    .text-foreground, :scope:is(.text-foreground) {
       color: hsl(var(--foreground));
     }
-    .text-muted-foreground {
+    .text-muted-foreground, :scope:is(.text-muted-foreground) {
       color: hsl(var(--muted-foreground));
     }
-    .tabular-nums {
+    .tabular-nums, :scope:is(.tabular-nums) {
       --tw-numeric-spacing: tabular-nums;
       font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
     }
-    .opacity-0 {
+    .opacity-0, :scope:is(.opacity-0) {
       opacity: 0%;
     }
-    .shadow-sm {
+    .shadow-sm, :scope:is(.shadow-sm) {
       --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
-    .shadow-xl {
+    .shadow-xl, :scope:is(.shadow-xl) {
       --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
-    .grayscale {
+    .grayscale, :scope:is(.grayscale) {
       --tw-grayscale: grayscale(100%);
       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, :scope:is(.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));
     }
-    .\!outline-none {
+    .\!outline-none, :scope:is(.\!outline-none) {
       --tw-outline-style: none !important;
       outline-style: none !important;
     }
-    .\[transition\:color_var\(--motion-control\)\,background-color_var\(--motion-control\)\,border-color_var\(--motion-control\)\,box-shadow_var\(--motion-control\)\,transform_var\(--motion-control\)\,scale_var\(--motion-control\)\,opacity_var\(--motion-control\)\] {
+    .\[transition\:color_var\(--motion-control\)\,background-color_var\(--motion-control\)\,border-color_var\(--motion-control\)\,box-shadow_var\(--motion-control\)\,transform_var\(--motion-control\)\,scale_var\(--motion-control\)\,opacity_var\(--motion-control\)\],:scope:is(.\[transition\:color_var\(--motion-control\)\,background-color_var\(--motion-control\)\,border-color_var\(--motion-control\)\,box-shadow_var\(--motion-control\)\,transform_var\(--motion-control\)\,scale_var\(--motion-control\)\,opacity_var\(--motion-control\)\]) {
       transition: color var(--motion-control),background-color var(--motion-control),border-color var(--motion-control),box-shadow var(--motion-control),transform var(--motion-control),scale var(--motion-control),opacity var(--motion-control);
     }
-    .\[transition\:opacity_var\(--motion-surface\)\,transform_var\(--motion-surface\)\] {
+    .\[transition\:opacity_var\(--motion-surface\)\,transform_var\(--motion-surface\)\],:scope:is(.\[transition\:opacity_var\(--motion-surface\)\,transform_var\(--motion-surface\)\]) {
       transition: opacity var(--motion-surface),transform var(--motion-surface);
     }
     @media (hover: hover) {
-      .hover\:bg-muted:hover {
+      .hover\:bg-muted:hover, :scope:is(.hover\:bg-muted:hover) {
         background-color: hsl(var(--muted));
       }
-      .hover\:text-foreground:hover {
+      .hover\:text-foreground:hover, :scope:is(.hover\:text-foreground:hover) {
         color: hsl(var(--foreground));
       }
-      .hover\:grayscale-0:hover {
+      .hover\:grayscale-0:hover, :scope:is(.hover\:grayscale-0:hover) {
         --tw-grayscale: grayscale(0%);
         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,);
       }
     }
-    .focus-visible\:outline:focus-visible {
+    .focus-visible\:outline:focus-visible, :scope:is(.focus-visible\:outline:focus-visible) {
       outline-style: var(--tw-outline-style);
       outline-width: 1px;
     }
-    .disabled\:opacity-40:disabled {
+    .disabled\:opacity-40:disabled, :scope:is(.disabled\:opacity-40:disabled) {
       opacity: 40%;
     }
-    .aria-pressed\:bg-muted[aria-pressed="true"] {
+    .aria-pressed\:bg-muted[aria-pressed="true"], :scope:is(.aria-pressed\:bg-muted[aria-pressed="true"]) {
       background-color: hsl(var(--muted));
     }
     @media (prefers-reduced-motion: reduce) {
-      .motion-reduce\:transition-none {
+      .motion-reduce\:transition-none, :scope:is(.motion-reduce\:transition-none) {
         transition-property: none;
       }
     }
     @media (width >= 40rem) {
-      .sm\:\!block {
+      .sm\:\!block, :scope:is(.sm\:\!block) {
         display: block !important;
       }
     }
@@ -11224,6 +11227,42 @@ svg.react-flow__connectionline {
   gap: 16px;
   padding: 4px 0;
 }
+.ws-live {
+  min-height: 100dvh;
+  padding: 24px;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font: 14px/1.5 var(--font-sans, sans-serif);
+}
+.ws-live > header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+.ws-live > header h1 {
+  margin: 0 auto 0 0;
+  font: 600 26px/1.3 var(--font-sans, sans-serif);
+}
+.ws-live > header label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.ws-live select {
+  max-width: min(50vw, 480px);
+  font: inherit;
+}
+@media (max-width: 600px) {
+  .ws-live {
+    padding: 16px;
+  }
+  .ws-live > header h1 {
+    flex-basis: 100%;
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;