workbench.glass.main.js · part 420

60 text occurrences from desktop/Cursor.app/Contents/Resources/app/out/vs/workbench/workbench.glass.main.js, part 420. Every entry preserves the shipped literal and its saved verdict or selection reason.

File contents and all parts · All files

use strict

/* Core visualization contract; loaded first. */
html {
  color-scheme: light;
  background: transparent;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  color-scheme: inherit;

  /* Public author color tokens. */
  --background: var(--ui-editor);
  --foreground: var(--ui-base);
  --card: var(--ui-editor);
  --card-foreground: var(--foreground);
  --primary: var(--blue);
  --primary-foreground: light-dark(
    oklch(0.991 0 0),
    oklch(0.226 0.013 264.284)
  );
  --muted: color-mix(in srgb, var(--ui-base) 8%, transparent);
  --muted-foreground: color-mix(in srgb, var(--ui-base) 74%, transparent);
  --tertiary-foreground: color-mix(in srgb, var(--ui-base) 48%, transparent);
  --accent: color-mix(in srgb, var(--primary) 12%, transparent);
  --accent-foreground: var(--primary);
  --brown: var(--brown-primary);
  --red: var(--red-primary);
  --orange: var(--orange-primary);
  --yellow: var(--yellow-primary);
  --green: var(--green-primary);
  --cyan: var(--cyan-primary);
  --blue: var(--blue-primary);
  --purple: var(--purple-primary);
  --magenta: var(--magenta-primary);
  --success: var(--green);
  --warning: var(--yellow);
  --danger: var(--red);
  --border: color-mix(in srgb, var(--ui-base) 12%, transparent);

  /* Internal implementation tokens. These are not part of the author contract. */

  /* Chart palette ramps. Each hue has an opaque editorial ramp. */
  --brown-primary: #916031;
  --brown-secondary: #c8b098;
  --brown-tertiary: #e9dfd6;
  --red-primary: #dc322f;
  --red-secondary: #ed9897;
  --red-tertiary: #f8d6d5;
  --orange-primary: #ed4c00;
  --orange-secondary: #f6a57f;
  --orange-tertiary: #fbdbcc;
  --yellow-primary: #a88d02;
  --yellow-secondary: #d3c680;
  --yellow-tertiary: #eee8cc;
  --green-primary: #2c9f28;
  --green-secondary: #95cf93;
  --green-tertiary: #d5ecd4;
  --cyan-primary: #31a8bf;
  --cyan-secondary: #98d3df;
  --cyan-tertiary: #d6eef2;
  --blue-primary: #2268ff;
  --blue-secondary: #90b3ff;
  --blue-tertiary: #d3e1ff;
  --purple-primary: #8c89e7;
  --purple-secondary: #c5c4f3;
  --purple-tertiary: #e8e7fa;
  --magenta-primary: #ec77bf;
  --magenta-secondary: #f5bbdf;
  --magenta-tertiary: #fbe4f2;
  --ui-base: light-dark(oklch(0.191 0 0), oklch(0.955 0 0));
  --ui-editor: light-dark(oklch(0.991 0 0), oklch(0.209 0 0));
  --popover: var(--ui-editor);
  --popover-foreground: var(--foreground);
  --secondary-foreground: var(--foreground);
  --hover: var(--muted);
  --primary-hover: color-mix(in srgb, var(--foreground) 80%, transparent);
  --destructive: var(--danger);
  --success-soft: color-mix(in srgb, var(--success) 12%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 12%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  --border-success: color-mix(in srgb, var(--success) 32%, transparent);
  --border-warning: color-mix(in srgb, var(--warning) 32%, transparent);
  --border-danger: color-mix(in srgb, var(--danger) 32%, transparent);
  --ring: var(--blue);
  --font-sans: -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-base: 14px;
  --font-size-normal: var(--font-size-base);
  --font-size-small: 12px;
  --font-size-h1: 22px;
  --font-size-h2: 18px;
  --font-size-h3: 16px;
  --font-size-h4: 14px;
  --font-size-h5: 14px;
  --font-size-h6: 12px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 590;
  --font-weight-heading: 500;
  --line-height-normal: 22px;
  --line-height-small: 16px;
  --prose-block-gap-top: 4px;
  --prose-block-gap-bottom: 8px;
  --prose-heading-gap: 24px;
  --prose-list-gap: 4px;
  --prose-list-indent: 24px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --control-h: 32px;
  --input-h: 36px;
  --control-px: 12px;
  --shadow-sm: 0 1px 2px -1px rgb(0 0 0 / 8%);
  --checkmark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M12.8961 3.64101C13.1297 3.41418 13.4984 3.37523 13.7779 3.56581C14.0571 3.75635 14.1554 4.11331 14.0299 4.41347L13.9615 4.53847L7.71151 13.7045C7.59411 13.8767 7.4063 13.9877 7.19881 14.0072C6.99136 14.0267 6.78564 13.9533 6.63826 13.806L2.88826 10.056L2.79842 9.9457C2.6192 9.67407 2.64927 9.30496 2.88826 9.06581C3.12738 8.82669 3.49647 8.79676 3.76815 8.97597L3.8785 9.06581L7.03084 12.2182L12.8053 3.74941L12.8961 3.64101Z'/%3E%3C/svg%3E");
}

html[data-theme="dark"] body {
  --brown-secondary: #493019;
  --brown-tertiary: #1d130a;
  --red-secondary: #6e1918;
  --red-tertiary: #2c0a09;
  --orange-secondary: #772600;
  --orange-tertiary: #2f0f00;
  --yellow-secondary: #544701;
  --yellow-tertiary: #221c00;
  --green-secondary: #165014;
  --green-tertiary: #092008;
  --cyan-secondary: #195460;
  --cyan-tertiary: #0a2226;
  --blue-secondary: #113480;
  --blue-tertiary: #071533;
  --purple-secondary: #464574;
  --purple-tertiary: #1c1b2e;
  --magenta-secondary: #763c60;
  --magenta-tertiary: #2f1826;
}


* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

svg {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(svg text:not([fill])) {
  fill: currentColor;
}

[data-lucide] {
  stroke-width: 1.6;
}

a {
  color: color-mix(in srgb, var(--primary) 80%, var(--foreground) 20%);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  text-underline-offset: 2px;
}

a:is(:hover, :focus-visible) {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 0.5px;
}

:is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 8px;
  text-wrap: balance;
}

:is(h1, h2, h3):not(:first-child) {
  margin-top: var(--prose-heading-gap);
}

:is(h4, h5, h6):not(:first-child) {
  margin-top: 16px;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-heading);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heading);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-heading);
  line-height: 1.35;
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

h6 {
  color: var(--muted-foreground);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

:is(p, ul, ol) {
  margin-top: var(--prose-block-gap-top);
  margin-bottom: var(--prose-block-gap-bottom);
}

:is(p, ul, ol):first-child {
  margin-top: 0;
}

:is(p, ul, ol):last-child {
  margin-bottom: 0;
}

:is(ul, ol) {
  padding-inline-start: var(--prose-list-indent);
}

ul {
  list-style-type: disc;
}

ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

ol {
  list-style-type: decimal;
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

li {
  margin: 0;
  padding: 0;
  word-break: break-word;
}

li + li {
  margin-top: var(--prose-list-gap);
}

li > :is(ul, ol) {
  margin-top: var(--prose-list-gap);
  margin-bottom: var(--prose-list-gap);
}

li > p {
  margin: 0;
}

:is(b, strong) {
  font-weight: var(--font-weight-medium);
}

th {
  font-weight: var(--font-weight-semibold);
}

code:not(pre code) {
  display: inline;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  corner-shape: superellipse(1.5);
  color: var(--foreground);
  background: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--font-weight-normal);
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  word-break: break-word;
}

.vis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(180px, 24%), 1fr));
  gap: 8px;
}

.vis-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.vis-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vis-section-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vis-center {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
}

:is(small, .vis-text-small) {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.vis-text-muted {
  color: var(--muted-foreground);
}

.vis-text-tertiary {
  color: var(--tertiary-foreground);
}

.vis-text-warning {
  color: var(--warning);
}

.vis-text-destructive {
  color: var(--destructive);
}

.vis-text-end {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.vis-text-center {
  text-align: center;
}

.vis-text-nowrap {
  white-space: nowrap;
}

.vis-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

use strict

/* Agent-facing form controls; loaded after visualize.css. */
.vis-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.vis-controls > .vis-form-label,
.vis-form-label:has(> .vis-form-value) {
  display: grid;
  min-width: min(100%, 260px);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 0;
}

.vis-controls > .vis-form-label {
  flex: 1 1 280px;
}

.vis-form-label:has(> .vis-form-value) {
  width: 100%;
}

:is(.vis-controls > .vis-form-label, .vis-form-label:has(> .vis-form-value))
  > :is(.vis-form-control, .vis-form-range, .vis-form-select, .vis-toggle-group) {
  grid-column: 1 / -1;
}

.vis-controls.vis-column {
  align-items: stretch;
  flex-wrap: nowrap;
}

.vis-controls.vis-column > .vis-form-label {
  width: 100%;
  flex: 0 0 auto;
}

.vis-btn,
.vis-form-item > input[type="checkbox"],
.vis-form-item > input[type="radio"],
.vis-form-control,
.vis-form-range,
.vis-form-select {
  font: inherit;
}

.vis-btn {
  appearance: button;
  display: inline-flex;
  inline-size: fit-content;
  max-inline-size: 100%;
  min-height: var(--control-h);
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 var(--control-px);
  -webkit-app-region: no-drag;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  corner-shape: superellipse(1.5);
  color: var(--secondary-foreground);
  background: transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  transition: transform 80ms ease;
}

.vis-btn:not(:disabled):active {
  transform: scale(0.98);
}

.vis-btn:is(.vis-btn-block, .vis-btn-tile) {
  inline-size: 100%;
}

.vis-btn.vis-btn-tile {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.vis-btn:not(.vis-btn-primary, .vis-btn-tile):is(
  [aria-pressed="true"],
  [aria-selected="true"]
) {
  border-color: transparent;
  color: var(--primary-foreground);
  background: var(--foreground);
}

.vis-btn.vis-btn-tile:is([aria-pressed="true"], [aria-selected="true"]) {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

a.vis-btn {
  cursor: pointer;
  text-decoration: none;
}

.vis-btn:not(:disabled):hover {
  background: var(--hover);
}

.vis-btn-primary {
  border-color: transparent;
  color: var(--primary-foreground);
  background: var(--foreground);
  background-clip: padding-box;
}

.vis-btn-primary .vis-text-muted {
  color: color-mix(in srgb, var(--primary-foreground) 50%, transparent);
}

.vis-btn-primary:not(:disabled):hover {
  background: var(--primary-hover);
  background-clip: padding-box;
}

.vis-btn-ghost {
  border-color: transparent;
  color: var(--muted-foreground);
  background: transparent;
}

.vis-btn-ghost:not(:disabled):hover {
  color: var(--foreground);
  background: var(--hover);
}

:is(.vis-btn, .vis-form-control, .vis-form-select, .vis-form-range):disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.vis-btn-icon {
  aspect-ratio: 1 / 1;
  width: var(--control-h);
  min-width: var(--control-h);
  inline-size: var(--control-h);
  padding: 0;
}

.vis-form-label {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--foreground);
}

.vis-form-value {
  color: var(--foreground);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

:is(.vis-form-control, .vis-form-select) {
  display: block;
  width: 100%;
  min-height: var(--input-h);
  outline: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  corner-shape: superellipse(1.5);
  color: var(--foreground);
}

.vis-form-control {
  padding: 0 var(--control-px);
  background: var(--card);
}

.vis-form-control::placeholder {
  color: var(--tertiary-foreground);
}

.vis-form-control[type="file"] {
  padding: 0;
  overflow: hidden;
  color: var(--tertiary-foreground);
  cursor: pointer;
}

.vis-form-control[type="file"]::file-selector-button {
  height: calc(var(--input-h) - 2px);
  margin-right: 8px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--secondary-foreground);
  background: var(--muted);
  cursor: inherit;
  font: inherit;
}

.vis-form-control[type="file"]:not(:disabled):hover::file-selector-button {
  background: var(--hover);
}

textarea.vis-form-control {
  height: auto;
  min-height: 72px;
  padding: 8px var(--control-px);
  resize: vertical;
}

.vis-form-select {
  appearance: none;
  margin: 0;
  padding: 0 32px 0 var(--control-px);
  background-color: var(--card);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 10px) 50%;
  background-repeat: no-repeat;
  background-size: 4px 4px;
  cursor: default;
}

.vis-form-select:has(> option[value=""]:checked) {
  color: var(--tertiary-foreground);
}

.vis-form-select option {
  color: var(--foreground);
}

.vis-form-select:not(:disabled):hover {
  background-color: var(--hover);
}

:is(.vis-form-control, .vis-form-select):focus-visible {
  border-color: var(--ring);
}

.vis-form-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vis-form-item > input[type="checkbox"],
.vis-form-item > input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  flex: none;
  margin: 0;
  border: 1px solid var(--border);
  color: var(--primary-foreground);
  background-color: transparent;
  cursor: default;
  transition:
    background-color 150ms,
    border-color 150ms,
    box-shadow 150ms;
}

.vis-form-item > input[type="checkbox"] {
  border-radius: var(--radius-sm);
  corner-shape: superellipse(1.5);
  background-color: var(--muted);
  box-shadow: var(--shadow-sm);
}

.vis-form-item > input[type="checkbox"]:checked {
  border-color: var(--foreground);
  background-color: var(--foreground);
}

.vis-form-item > input[type="checkbox"]:not(.vis-switch):checked::before {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--primary-foreground);
  content: "";
  mask: var(--checkmark-image) center / 12px 12px no-repeat;
}

.vis-form-item > input[type="radio"] {
  border-radius: var(--radius-full);
  background-color: var(--muted);
  box-shadow: var(--shadow-sm);
}

.vis-form-item
  > input:is([type="checkbox"], [type="radio"]):not(:disabled):not(:checked):hover {
  background-color: var(--card);
}

.vis-form-item > input[type="radio"]:checked {
  border: 2px solid var(--foreground);
  background:
    radial-gradient(circle, var(--primary-foreground) 0 3.5px, transparent 4px),
    var(--foreground);
}

.vis-form-item > input[type="checkbox"]:disabled,
.vis-form-item > input[type="radio"]:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.vis-form-item > input[type="checkbox"]:disabled + label,
.vis-form-item > input[type="radio"]:disabled + label {
  cursor: not-allowed;
}

.vis-form-item > label {
  color: var(--foreground);
  cursor: default;
}

.vis-form-item > input[type="checkbox"].vis-switch {
  position: relative;
  width: 32px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-full);
  corner-shape: round;
  background-color: var(--muted);
  box-shadow: none;
  transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1);
}

.vis-form-item > input[type="checkbox"].vis-switch::before {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid light-dark(var(--primary-foreground), var(--foreground));
  border-radius: var(--radius-full);
  corner-shape: round;
  background-color: light-dark(var(--primary-foreground), var(--foreground));
  box-shadow: var(--shadow-sm);
  content: "";
  mask: none;
  -webkit-mask: none;
  transform: translate(2px, -50%);
  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
}

.vis-form-item > input[type="checkbox"].vis-switch:not(:disabled):not(:checked):hover {
  background-color: var(--muted);
}

.vis-form-item > input[type="checkbox"].vis-switch:checked {
  border-color: var(--foreground);
  background-color: var(--foreground);
}

.vis-form-item > input[type="checkbox"].vis-switch:checked::before {
  width: 16px;
  height: 16px;
  background-color: var(--primary-foreground);
  mask: none;
  -webkit-mask: none;
  transform: translate(14px, -50%);
}

.vis-form-item > input[type="checkbox"].vis-switch:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--ring);
}

.vis-form-item > input[type="checkbox"].vis-switch:disabled,
.vis-form-item > input[type="checkbox"].vis-switch:disabled + label {
  cursor: not-allowed;
  opacity: 0.6;
}

.vis-form-range {
  appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  flex: 1;
  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  overflow: visible;
  accent-color: var(--foreground);
  background: transparent;
}

.vis-form-range::-webkit-slider-runnable-track {
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--foreground) 0 var(--value, 0%),
    var(--muted) var(--value, 0%) 100%
  );
}

.vis-form-range::-webkit-slider-thumb {
  appearance: none;
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 0;
  border-radius: 8px;
  background: var(--foreground);
  box-shadow: 0 0 0 2px var(--background);
}

.vis-form-range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 2px var(--background),
    0 0 0 4px var(--ring);
}

.vis-btn:focus-visible,
.vis-form-item > input[type="checkbox"]:focus-visible,
.vis-form-item > input[type="radio"]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

use strict

/* Agent-facing components; loaded after form controls. */
:is(.vis-card, .vis-alert, .vis-snippet, .vis-code-block) {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}

:is(.vis-card, .vis-snippet) {
  corner-shape: superellipse(1.5);
  color: var(--card-foreground);
}

.vis-card {
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  overflow-wrap: break-word;
}

.vis-card:has(> :is(.vis-table-responsive, .vis-table)) {
  padding: 0;
}

.vis-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.vis-stat-card {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
}

.vis-card.vis-stat-card {
  justify-content: flex-start;
}

.vis-stat-label {
  display: block;
  color: var(--muted-foreground);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.vis-stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.vis-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.vis-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--foreground);
  font: inherit;
  text-align: start;
}

.vis-table :is(th, td) {
  padding: 8px 12px;
  overflow-wrap: anywhere;
  border: 0;
  text-align: start;
  vertical-align: middle;
  white-space: normal;
}

.vis-table.vis-table-sm :is(th, td) {
  padding: 6px 10px;
}

.vis-table .vis-text-nowrap {
  white-space: nowrap;
}

.vis-table thead th {
  min-height: 40px;
  box-shadow: inset 0 -1px 0 var(--border);
  color: var(--muted-foreground);
  font-weight: var(--font-weight-normal);
}

.vis-table tbody.vis-striped tr:nth-child(even) {
  background: var(--card);
}

.vis-table tbody tr:not(:last-child) :is(th, td),
.vis-table tbody.vis-bordered tr:not(:last-child) :is(th, td) {
  box-shadow: inset 0 -1px 0 var(--border);
}

.vis-table tbody.vis-interactive tr {
  cursor: pointer;
}

.vis-table tbody.vis-interactive tr:hover {
  background: var(--card);
}

.vis-table tfoot :is(th, td) {
  border-top: 1px solid var(--border);
  background: transparent;
  font-weight: var(--font-weight-medium);
}

.vis-table :is(.vis-text-end, [align="right"]) {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.vis-table :is(.vis-text-center, [align="center"]) {
  text-align: center;
}

.vis-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--tone-text, var(--tone, var(--foreground)));
  background: var(--tone-bg, transparent);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-normal);
  line-height: 1;
  opacity: var(--tone-opacity, 1);
  vertical-align: baseline;
  white-space: nowrap;
}

.vis-badge:is(.vis-accent, .vis-success, .vis-warn, .vis-danger, .vis-inverted) {
  border-color: transparent;
}

.vis-progress {
  display: flex;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--muted);
}

.vis-progress-bar {
  height: 100%;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--foreground);
}

.vis-progress-segmented > .vis-progress-bar {
  border-radius: 0;
}

.vis-progress-segmented > .vis-progress-bar:first-child {
  border-start-start-radius: var(--radius-full);
  border-end-start-radius: var(--radius-full);
}

.vis-progress-segmented > .vis-progress-bar:last-child {
  border-start-end-radius: var(--radius-full);
  border-end-end-radius: var(--radius-full);
}

hr {
  height: 1px;
  margin: 8px 0;
  border: 0;
  background: var(--border);
}

.vis-separator-vertical {
  align-self: stretch;
  width: 1px;
  flex: none;
  background: var(--border);
}

.vis-collapsible {
  border-bottom: 1px solid var(--border);
}

.vis-collapsible > summary {
  display: flex;
  min-height: var(--control-h);
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  cursor: pointer;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  list-style: none;
  user-select: none;
}

.vis-collapsible > summary::-webkit-details-marker {
  display: none;
}

.vis-collapsible > summary::after {
  color: var(--muted-foreground);
  content: "+";
  font-weight: var(--font-weight-normal);
}

.vis-collapsible[open] > summary::after {
  content: "−";
}

.vis-collapsible > :not(summary) {
  padding-bottom: 12px;
}

.vis-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 12px;
}

.vis-tabs.vis-secondary {
  column-gap: 8px;
}

.vis-tabs.vis-secondary > input:checked + label {
  border-color: transparent;
  color: var(--primary-foreground);
  background: var(--foreground);
  background-clip: padding-box;
}

.vis-tabs.vis-secondary > input:checked + label:hover {
  background: var(--primary-hover);
  background-clip: padding-box;
}

.vis-tabs > input,
.vis-toggle-group > input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vis-tabs > input:focus-visible + label,
.vis-toggle-group > input:focus-visible + label {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.vis-tabs > label {
  order: 1;
}

.vis-tabs:not(.vis-secondary) > label {
  appearance: none;
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 var(--control-px);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--muted-foreground);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  box-shadow: inset 0 -2px 0 transparent;
}

.vis-tabs:not(.vis-secondary) > input:not(:checked) + label:hover {
  color: var(--foreground);
}

.vis-tabs:not(.vis-secondary) > input:checked + label {
  color: var(--foreground);
  box-shadow: inset 0 -2px 0 var(--foreground);
}

.vis-tabs:not(.vis-secondary)::after {
  display: block;
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 1px solid var(--border);
  content: "";
  pointer-events: none;
}

.vis-tabs > .vis-card {
  display: none;
  order: 2;
  width: 100%;
}

.vis-tabs > input:checked + label + .vis-card {
  display: block;
}

.vis-alert {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-color: var(--tone-border, var(--border));
  color: var(--tone-text, var(--tone, var(--foreground)));
  background: var(--tone-bg, var(--card));
  opacity: var(--tone-opacity, 1);
}

.vis-alert > p {
  margin: 0;
  min-width: 0;
}

.vis-alert [data-lucide] {
  flex: none;
  color: inherit;
}

/* Tone utilities only set internal properties. Visual components consume them. */
.vis-fg {
  --tone: var(--foreground);
}

.vis-fg-60 {
  --tone: var(--foreground);
  --tone-opacity: 0.6;
}

.vis-fg-30 {
  --tone: var(--foreground);
  --tone-opacity: 0.3;
}

.vis-accent {
  --tone: var(--accent-foreground);
  --tone-bg: var(--accent);
  --tone-border: color-mix(in srgb, var(--primary) 32%, transparent);
}

.vis-success {
  --tone: var(--success);
  --tone-bg: var(--success-soft);
  --tone-border: var(--border-success);
}

.vis-warn {
  --tone: var(--warning);
  --tone-bg: var(--warning-soft);
  --tone-border: var(--border-warning);
}

.vis-danger {
  --tone: var(--danger);
  --tone-bg: var(--danger-soft);
  --tone-border: var(--border-danger);
}

.vis-inverted {
  --tone: var(--foreground);
  --tone-bg: var(--foreground);
  --tone-text: var(--background);
}

.vis-brown {
  --tone: var(--brown-primary);
  --tone-secondary: var(--brown-secondary);
  --tone-tertiary: var(--brown-tertiary);
}

.vis-blue {
  --tone: var(--blue-primary);
  --tone-secondary: var(--blue-secondary);
  --tone-tertiary: var(--blue-tertiary);
}

.vis-orange {
  --tone: var(--orange-primary);
  --tone-secondary: var(--orange-secondary);
  --tone-tertiary: var(--orange-tertiary);
}

.vis-yellow {
  --tone: var(--yellow-primary);
  --tone-secondary: var(--yellow-secondary);
  --tone-tertiary: var(--yellow-tertiary);
}

.vis-green {
  --tone: var(--green-primary);
  --tone-secondary: var(--green-secondary);
  --tone-tertiary: var(--green-tertiary);
}

.vis-red {
  --tone: var(--red-primary);
  --tone-secondary: var(--red-secondary);
  --tone-tertiary: var(--red-tertiary);
}

.vis-purple {
  --tone: var(--purple-primary);
  --tone-secondary: var(--purple-secondary);
  --tone-tertiary: var(--purple-tertiary);
}

.vis-cyan {
  --tone: var(--cyan-primary);
  --tone-secondary: var(--cyan-secondary);
  --tone-tertiary: var(--cyan-tertiary);
}

.vis-magenta {
  --tone: var(--magenta-primary);
  --tone-secondary: var(--magenta-secondary);
  --tone-tertiary: var(--magenta-tertiary);
}

/* Category surfaces and chart marks share opaque editorial ramp roles. */
:is(.vis-brown, .vis-blue, .vis-orange, .vis-yellow, .vis-green, .vis-red, .vis-purple, .vis-cyan, .vis-magenta) {
  --tone-fill: var(--tone-tertiary);
  --tone-border: var(--tone-secondary);
  --tone-title: color-mix(in srgb, var(--tone) 55%, var(--foreground));
  --tone-detail: color-mix(in srgb, var(--tone) 60%, var(--foreground));
}

.vis-category-surface {
  border-color: var(--tone-border, var(--border));
  color: var(--tone-title, var(--foreground));
  background: var(--tone-fill, var(--card));
}

.vis-category-surface .vis-text-muted {
  color: var(--tone-detail, var(--muted-foreground));
}

svg g.vis-category-surface > :is(rect, circle, ellipse, polygon) {
  fill: var(--tone-fill, var(--card));
  stroke: var(--tone-border, var(--border));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

svg g.vis-category-surface > text {
  fill: var(--tone-title, var(--foreground));
}

svg g.vis-category-surface > text.vis-text-muted {
  fill: var(--tone-detail, var(--muted-foreground));
}

.vis-toggle-group {
  position: relative;
  display: inline-flex;
  width: fit-content;
  min-height: var(--input-h);
  max-width: 100%;
  flex: none;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.vis-toggle-group > label {
  display: inline-flex;
  min-height: calc(var(--input-h) - 10px);
  align-items: center;
  padding: 0 var(--control-px);
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--muted-foreground);
  cursor: pointer;
}

.vis-toggle-group > input:checked + label {
  color: var(--foreground);
  background: var(--muted);
}

.vis-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--foreground);
  border-radius: var(--radius-full);
  animation: visualize-spin 0.7s linear infinite;
}

.vis-status {
  display: block;
  width: 6px;
  height: 6px;
  flex: none;
  border: 0;
  border-radius: var(--radius-full);
  color: inherit;
  background: var(--tone, var(--muted-foreground));
  opacity: var(--tone-opacity, 1);
}

.vis-gauge {
  --value: 0;
  --gauge-size: 72px;
  --gauge-stroke: 4px;
  position: relative;
  display: grid;
  width: var(--gauge-size);
  height: var(--gauge-size);
  min-width: var(--gauge-size);
  min-height: var(--gauge-size);
  place-items: center;
  flex: none;
  color: var(--muted-foreground);
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  opacity: var(--tone-opacity, 1);
}

.vis-gauge::before {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: conic-gradient(
    var(--tone, var(--foreground)) calc(var(--value) * 1%),
    var(--muted) 0
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--gauge-stroke) - 1px),
    #000 calc(100% - var(--gauge-stroke))
  );
  pointer-events: none;
  content: "";
}

.vis-gauge.vis-small {
  --gauge-size: 48px;
  font-size: var(--font-size-small);
}

.vis-gauge.vis-large {
  --gauge-size: 96px;
  font-size: var(--font-size-h4);
}

.vis-snippet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  flex: none;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  line-height: 18px;
}

.vis-snippet-prompt {
  flex: none;
  color: var(--muted-foreground);
  user-select: none;
}

.vis-snippet code,
.vis-code-block pre code {
  display: block;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  color: var(--foreground);
  background: transparent;
  font: inherit;
  font-weight: var(--font-weight-normal);
  overflow-wrap: anywhere;
}

.vis-code-block {
  margin: 0;
  overflow: hidden;
}

.vis-code-block > figcaption {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.vis-code-block pre {
  margin: 0;
  padding: 12px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
  line-height: 20px;
}

@keyframes visualize-spin {
  to {
    transform: rotate(1turn);
  }
}

use strict

/* Host tooltip and Lucide runtime chrome. */
.vis-tooltip {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: max-content;
  max-width: min(260px, var(--tooltip-available-width, calc(100vw - 16px)), calc(100vw - 16px));
  max-height: min(var(--tooltip-available-height, calc(100vh - 10px)), calc(100vh - 10px));
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--popover-foreground);
  background: var(--popover);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
  overflow: auto;
  overflow-wrap: break-word;
  white-space: normal;
  pointer-events: none;
  user-select: none;
}

.vis-chart-tooltip {
  position: fixed;
}

.vis-tooltip-context {
  margin-bottom: 4px;
  color: var(--tertiary-foreground);
}

.vis-tooltip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.vis-tooltip-label {
  color: var(--muted-foreground);
}

.vis-tooltip-value {
  color: var(--foreground);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

svg.lucide {
  display: block;
  width: 16px !important;
  height: 16px !important;
  flex: none;
  margin: 0 !important;
  stroke-width: 1.6;
}

/**
 * Trusted guest runtime for inline visualizations.
 * Handles tooltips and Lucide icons.
 * Fragment scripts must not depend on document.currentScript.
 */
(() => {
  function ensureTooltipEl() {
    let el = document.querySelector(".vis-tooltip[data-host-tooltip]");
    if (el) return el;
    el = document.createElement("div");
    el.className = "vis-tooltip";
    el.setAttribute("data-host-tooltip", "");
    el.setAttribute("role", "tooltip");
    el.hidden = true;
    document.body.appendChild(el);
    return el;
  }

  function positionTooltip(anchor, tooltip) {
    const rect = anchor.getBoundingClientRect();
    const pad = 8;
    const gap = 8;
    const vw = window.innerWidth;
    const vh = window.innerHeight;
    const spaceBelow = Math.max(0, vh - rect.bottom - pad - gap);
    const spaceAbove = Math.max(0, rect.top - pad - gap);
    const placeBelow = rect.top < 80 || spaceAbove < tooltip.offsetHeight + gap;
    const availableHeight = placeBelow ? spaceBelow : spaceAbove;
    const availableWidth = Math.max(0, vw - pad * 2);
    tooltip.style.setProperty("--tooltip-available-width", `${Math.floor(availableWidth)}px`);
    tooltip.style.setProperty("--tooltip-available-height", `${Math.floor(availableHeight)}px`);

    const tipRect = tooltip.getBoundingClientRect();
    let top = placeBelow ? rect.bottom + gap : rect.top - tipRect.height - gap;
    top = Math.max(pad, Math.min(top, vh - tipRect.height - pad));
    let left = rect.left + rect.width / 2 - tipRect.width / 2;
    left = Math.max(pad, Math.min(left, vw - tipRect.width - pad));
    tooltip.style.top = `${Math.round(top)}px`;
    tooltip.style.left = `${Math.round(left)}px`;
  }

  function bindTooltips() {
    const tooltip = ensureTooltipEl();
    let timer = null;

    const hide = () => {
      if (timer) clearTimeout(timer);
      timer = null;
      tooltip.hidden = true;
      tooltip.textContent = "";
      tooltip.style.top = "";
      tooltip.style.left = "";
      tooltip.style.removeProperty("--tooltip-available-width");
      tooltip.style.removeProperty("--tooltip-available-height");
    };

    const show = (anchor) => {
      const text = anchor.getAttribute("data-tooltip");
      if (!text) return;
      const label = anchor.getAttribute("data-tooltip-label");
      const value = anchor.getAttribute("data-tooltip-value");
      if (label || value) {
        const row = document.createElement("div");
        row.className = "vis-tooltip-row";
        if (label) {
          const labelNode = document.createElement("span");
          labelNode.className = "vis-tooltip-label";
          labelNode.textContent = label;
          row.appendChild(labelNode);
        }
        if (value) {
          const valueNode = document.createElement("span");
          valueNode.className = "vis-tooltip-value";
          valueNode.textContent = value;
          row.appendChild(valueNode);
        }
        tooltip.replaceChildren(row);
      } else {
        tooltip.textContent = text;
      }
      tooltip.hidden = false;
      positionTooltip(anchor, tooltip);
      const id = `host-tooltip-${Math.random().toString(36).slice(2, 9)}`;
      tooltip.id = id;
      anchor.setAttribute("aria-describedby", id);
    };

    // Pointer moves between children of one anchor fire over/out pairs;
    // ignore them so the tooltip neither hides nor restarts its delay.
    const staysWithinAnchor = (event, anchor) => {
      const related = event.relatedTarget;
      return (
        related instanceof Element && related.closest("[data-tooltip]") === anchor
      );
    };

    document.addEventListener("pointerover", (event) => {
      const target = event.target;
      if (!(target instanceof Element)) return;
      const anchor = target.closest("[data-tooltip]");
      if (!anchor) return;
      if (staysWithinAnchor(event, anchor)) return;
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => show(anchor), 250);
    });

    document.addEventListener("pointerout", (event) => {
      const target = event.target;
      if (!(target instanceof Element)) return;
      const anchor = target.closest("[data-tooltip]");
      if (!anchor) return;
      if (staysWithinAnchor(event, anchor)) return;
      hide();
    });

    document.addEventListener("focusin", (event) => {
      const target = event.target;
      if (!(target instanceof Element)) return;
      const anchor = target.closest("[data-tooltip]");
      if (anchor) show(anchor);
    });

    document.addEventListener("focusout", () => hide());

    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape") hide();
    });
  }

  function createIconSvg(name) {
    const paths = {
      search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
      "arrow-up-right": '<path d="M7 7h10v10"/><path d="M7 17 17 7"/>',
      check: '<path d="M20 6 9 17l-5-5"/>',
      x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
      info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
      alert:
        '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
      chart: '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m19 9-5 5-4-4-3 3"/>',
      refresh:
        '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
      settings:
        '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
      plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
      minus: '<path d="M5 12h14"/>',
      "chevron-down": '<path d="m6 9 6 6 6-6"/>',
      "chevron-up": '<path d="m18 15-6-6-6 6"/>',
      "chevron-left": '<path d="m15 18-6-6 6-6"/>',
      "chevron-right": '<path d="m9 18 6-6-6-6"/>',
      copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
      download:
        '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',
      upload:
        '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>',
      link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
      mail: '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
      user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
      users:
        '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
      calendar:
        '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
      clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
      star: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
      heart:
        '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>',
      home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
      file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
      folder:
        '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
      image:
        '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
      play: '<polygon points="6 3 20 12 6 21 6 3"/>',
      pause:
        '<rect x="14" y="4" width="4" height="16" rx="1"/><rect x="6" y="4" width="4" height="16" rx="1"/>',
      trash:
        '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>',
      pencil:
        '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
      lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
    };
    const inner = paths[name] || paths.info;
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    svg.setAttribute("width", "16");
    svg.setAttribute("height", "16");
    svg.setAttribute("viewBox", "0 0 24 24");
    svg.setAttribute("fill", "none");
    svg.setAttribute("stroke", "currentColor");
    svg.setAttribute("stroke-width", "1.6");
    svg.setAttribute("stroke-linecap", "round");
    svg.setAttribute("stroke-linejoin", "round");
    svg.classList.add("lucide");
    svg.innerHTML = inner;
    return svg;
  }

  function hydrateIcons() {
    document.querySelectorAll("[data-lucide]").forEach((node) => {
      if (!(node instanceof Element)) return;
      if (node.querySelector("svg.lucide")) return;
      const name = node.getAttribute("data-lucide") || "info";
      node.replaceChildren(createIconSvg(name));
    });
  }

  document.addEventListener("click", (event) => {
    const target = event.target;
    if (!(target instanceof Element)) return;
    const link = target.closest("a[href]");
    if (!link) return;
    const href = link.getAttribute("href") || "";
    if (href === "" || href.startsWith("#")) event.preventDefault();
  });

  bindTooltips();
  hydrateIcons();
})();

use strict

/* Agent-facing chart styles; loaded last. */
.vis-chart-figure {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  background: transparent;
}

.vis-chart {
  display: block;
  overflow: hidden;
  width: 100%;
  height: clamp(280px, 48vw, 400px);
}

.vis-chart-text,
.vis-chart text {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.vis-chart .vis-axis text {
  fill: var(--foreground);
  font-size: 11px;
}

.vis-chart .vis-axis-label {
  fill: var(--muted-foreground);
  font-size: 12px;
}

.vis-chart .vis-axis line {
  fill: none;
  stroke: var(--border);
  stroke-width: 1px;
}

.vis-chart .vis-grid-x,
.vis-chart .vis-grid-y {
  fill: none;
  stroke: var(--border);
  stroke-width: 1px;
}

.vis-chart .vis-grid-y {
  stroke-dasharray: none;
}

.vis-chart :is(.vis-reference-guide, .vis-hover-guide) {
  fill: none;
  stroke: var(--muted-foreground);
  stroke-width: 1px;
}

.vis-chart .vis-reference-guide {
  stroke-dasharray: 4 3;
  opacity: 0.7;
}

.vis-chart .vis-hover-guide {
  stroke-dasharray: 2 3;
  opacity: 0.5;
}

.vis-chart .vis-axis .vis-domain {
  display: none;
}

.vis-chart .vis-mark:not([fill]):not(.vis-line) {
  fill: var(--tone, var(--foreground));
}

.vis-chart .vis-mark {
  stroke: none;
}

.vis-chart .vis-mark.vis-segment-gap {
  stroke: var(--background);
  stroke-width: 2px;
}

.vis-chart :is(line, path, polyline, circle, rect) {
  stroke-width: 1px;
}

.vis-chart line.vis-mark {
  fill: none;
}

/* A line has no enclosed area, so its stroke is the mark itself, not a
 * border; line.vis-mark keeps its tone stroke (dumbbell connectors, stored
 * fragments) while .vis-mark's stroke: none keeps filled shapes border-free. */
.vis-chart line.vis-mark:not([stroke]),
.vis-chart :is(line, path).vis-line:not([stroke]) {
  stroke: var(--tone, var(--foreground));
}

.vis-chart path.vis-mark.vis-line,
.vis-chart path.vis-line {
  fill: none;
}

.vis-chart :is(line, path).vis-data-series {
  stroke-width: 1.5px;
}

.vis-chart .vis-mark.vis-tone-secondary:not([fill]):not(.vis-line) {
  fill: var(--tone-secondary, var(--tone, var(--foreground)));
}

.vis-chart .vis-mark.vis-tone-tertiary:not([fill]):not(.vis-line) {
  fill: var(--tone-tertiary, var(--tone, var(--foreground)));
}

.vis-chart :is(line, path).vis-line.vis-tone-secondary:not([stroke]) {
  stroke: var(--tone-secondary, var(--tone, var(--foreground)));
}

.vis-chart :is(line, path).vis-line.vis-tone-tertiary:not([stroke]) {
  stroke: var(--tone-tertiary, var(--tone, var(--foreground)));
}

.vis-chart .vis-track {
  fill: var(--muted);
  stroke: none;
}

.vis-chart :is(line, path).vis-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 1px;
}

.vis-chart .vis-selection-guide {
  fill: none;
  stroke: var(--muted-foreground);
  stroke-width: 1px;
  stroke-dasharray: 2 3;
  opacity: 0.5;
}

.vis-chart :is([data-chart-hover-guide], [data-chart-hover-marker]) {
  pointer-events: none;
}

.vis-chart .vis-label:not([fill]) {
  fill: var(--tone, var(--muted-foreground));
  font-size: 12px;
}

.vis-chart text.vis-stat-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  fill: var(--foreground);
}

.vis-chart :is(.vis-mark, .vis-label).vis-fg-60 {
  opacity: 0.6;
}

.vis-chart :is(.vis-mark, .vis-label).vis-fg-30 {
  opacity: 0.3;
}

.vis-chart .vis-fill-20:not(.vis-line) {
  fill: var(--tone, var(--foreground));
  fill-opacity: 0.2;
}

.vis-chart-meta {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.vis-chart-meta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-width: 0;
}

.vis-chart-meta-copy h3 {
  margin: 0;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 24px;
  letter-spacing: 0;
}

.vis-chart-meta-copy > :is(span, small, p) {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0;
}

.vis-chart-meta > h3 {
  flex: 1 0 100%;
  margin: 0;
}

.vis-chart-meta > h3 + :is(.vis-text-small, small, p) {
  flex: 1 1 200px;
  margin: 0;
}

.vis-chart-meta .vis-legend {
  width: 100%;
  margin-left: 0;
}

.vis-chart-meta + .vis-chart {
  margin-top: 12px;
}

.vis-column > .vis-chart-meta + .vis-chart {
  margin-top: 0;
}

.vis-chart-figure > .vis-chart-meta + .vis-chart {
  margin-top: 0;
}

.vis-section-stack > .vis-chart-meta + .vis-chart {
  margin-top: -8px;
}

.vis-chart + .vis-legend {
  margin-top: 16px;
}

.vis-column > .vis-chart + .vis-legend {
  margin-top: 4px;
}

.vis-section-stack > .vis-chart + .vis-legend {
  margin-top: -8px;
}

.vis-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 14px;
  max-width: 100%;
  min-width: 0;
}

.vis-legend-item,
.vis-legend > span {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

button.vis-legend-item {
  appearance: none;
  padding: 0;
  border: 0;
  color: var(--muted-foreground);
  background: transparent;
  cursor: pointer;
}

button.vis-legend-item[aria-pressed="false"] {
  color: var(--tertiary-foreground);
}

button.vis-legend-item[aria-pressed="false"] .vis-swatch {
  opacity: 0.3;
}

button.vis-legend-item:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.vis-swatch {
  display: block;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 3px;
  color: inherit;
  background: var(--tone, var(--foreground));
  opacity: var(--tone-opacity, 1);
}

.vis-swatch.vis-fill-20 {
  background: var(--tone, var(--foreground));
  opacity: 0.2;
}

.vis-swatch.vis-tone-secondary {
  background: var(--tone-secondary, var(--tone, var(--foreground)));
}

.vis-swatch.vis-tone-tertiary {
  background: var(--tone-tertiary, var(--tone, var(--foreground)));
}

/**
 * Host chart helpers for agent D3 fragments.
 * Injected before the fragment so window.chart exists when agent scripts run.
 * Requires global d3 when calling frame() or band().
 */
(() => {
  const DEFAULT_MARGIN = { top: 16, right: 16, bottom: 48, left: 56 };
  const GRID_PAD = 12;
  const MIN_SIZE = 32;
  const BAND_PADDING = 0.2;
  const AXIS_LABEL_MARGIN = 80;
  const AXIS_TICK_MARGIN = 40;
  const BAR_MAX = 32;
  const BAR_GAP = 4;

  function resolveNode(target) {
    return target && typeof target.node === "function" ? target.node() : target;
  }

  function readSize(node) {
    node = resolveNode(node);
    if (!node || typeof node.getBoundingClientRect !== "function") {
      return { width: 0, height: 0 };
    }
    const width = Math.round(node.getBoundingClientRect().width);
    const height = Math.round(node.getBoundingClientRect().height);
    if (width < MIN_SIZE || height < MIN_SIZE) return { width: 0, height: 0 };
    return { width, height };
  }

  // Size for draw, gated on width only. A diagram container is empty until its
  // first paint, so it has a width but no height; gating on height would mean
  // draw never paints into it. Charts get their height from host CSS.
  function readDrawSize(node) {
    node = resolveNode(node);
    if (!node || typeof node.getBoundingClientRect !== "function") {
      return { width: 0, height: 0 };
    }
    const rect = node.getBoundingClientRect();
    const width = Math.round(rect.width);
    if (width < MIN_SIZE) return { width: 0, height: 0 };
    return { width, height: Math.round(rect.height) };
  }

  function requireD3(method) {
    if (typeof d3 === "undefined") {
      throw new Error(`chart.${method} requires d3`);
    }
  }

  function band(domain, range) {
    requireD3("band");
    const scale = d3.scaleBand().domain(domain).padding(BAND_PADDING);
    if (range) scale.range(range);
    return scale;
  }

  function labelMargin(labels, options) {
    const opts = options || {};
    const min = opts.min ?? DEFAULT_MARGIN.left;
    const max = opts.max ?? 200;
    const charWidth = opts.charWidth ?? 7;
    const padding = opts.padding ?? 24;
    const longest = Array.from(labels || []).reduce(
      (length, label) => Math.max(length, String(label).length),
      0,
    );
    return Math.min(max, Math.max(min, longest * charWidth + padding));
  }

  function isBand(scale) {
    return typeof scale.bandwidth === "function";
  }

  function gridCenters(scale) {
    if (isBand(scale)) {
      return scale.domain().map((value) => (scale(value) ?? 0) + scale.bandwidth() / 2);
    }
    if (typeof scale.ticks === "function") {
      return scale.ticks();
    }
    return scale.domain();
  }

  // Grid ticks must match the axis: explicit values win, arrays passed as
  // the count option are values, and only then does the scale generate them.
  function gridDomainValues(scale, options, prefix) {
    const tickValues = options[`${prefix}TickValues`];
    if (Array.isArray(tickValues)) return tickValues;
    const ticks = options[`${prefix}Ticks`];
    if (Array.isArray(ticks)) return ticks;
    if (typeof scale.ticks === "function" && !isBand(scale)) return scale.ticks(ticks);
    return null;
  }

  function applyAxisOptions(axis, options, prefix) {
    const ticks = options[`${prefix}Ticks`];
    const tickValues = options[`${prefix}TickValues`];
    const format = options[`${prefix}Format`] ?? options[`${prefix}TickFormat`];
    // A tick array passed as the count option means explicit tick values.
    if (Array.isArray(ticks)) axis.tickValues(ticks);
    else if (ticks != null) axis.ticks(ticks);
    if (tickValues != null) axis.tickValues(tickValues);
    if (format != null) axis.tickFormat(format);
    const customize = options[`${prefix}Axis`];
    if (typeof customize === "function") customize(axis);
    return axis;
  }

  // D3's axis generator writes class="domain"; alias it for the kit CSS.
  function markAxisDomain(axis) {
    axis.select("path.domain").classed("vis-domain", true);
  }

  function frame(node, options) {
    requireD3("frame");
    node = resolveNode(node);
    const opts = options || {};
    const { width, height } = readSize(node);
    if (!width) return null;

    // One-dimensional plots (beeswarm, strip) disable an axis and skip its
    // scale; substitute a stub so positioning helpers still work.
    let x = opts.x ?? opts.xScale;
    let y = opts.y ?? opts.yScale;
    const xStubbed = !x && opts.xAxis === false;
    const yStubbed = !y && opts.yAxis === false;
    if (xStubbed) x = d3.scaleLinear();
    if (yStubbed) y = d3.scaleLinear();
    if (!x || !y) throw new Error("chart.frame requires x and y scales");

    const authoredMargin = opts.margin || {};
    const margin = Object.assign({}, DEFAULT_MARGIN, authoredMargin);
    if (opts.xAxis === false && !opts.xLabel && authoredMargin.bottom == null) {
      margin.bottom = DEFAULT_MARGIN.top;
    }
    if (opts.yAxis === false && !opts.yLabel && authoredMargin.left == null) {
      margin.left = DEFAULT_MARGIN.right;
    }
    if (opts.xLabel) margin.bottom = Math.max(margin.bottom, AXIS_LABEL_MARGIN);
    if (opts.yLabel) margin.left = Math.max(margin.left, AXIS_LABEL_MARGIN);
    // Host tick text extends ~35px past the plot edge; smaller margins clip.
    if (opts.xAxis !== false) margin.bottom = Math.max(margin.bottom, AXIS_TICK_MARGIN);
    if (opts.yAxis !== false) margin.left = Math.max(margin.left, AXIS_TICK_MARGIN);
    x.range([margin.left, width - margin.right]);
    y.range(
      isBand(y) ? [margin.top, height - margin.bottom] : [height - margin.bottom, margin.top],
    );

    const svg = d3.select(node);
    const x0 = margin.left;
    const x1 = width - margin.right;
    const y0 = margin.top;
    const y1 = height - margin.bottom;
    const drawGrid = opts.grid !== false;
    // Band axes carry their own visual rhythm; default their gridlines off.
    // Horizontal plots (linear x, band y) get vertical value grids by default,
    // matching yGrid on vertical plots. Two-dimensional plots stay yGrid-only.
    const drawXGrid =
      drawGrid &&
      !xStubbed &&
      (opts.xGrid === undefined ? !isBand(x) && isBand(y) : opts.xGrid !== false);
    const drawYGrid =
      drawGrid && !yStubbed && (opts.yGrid === undefined ? !isBand(y) : opts.yGrid !== false);

    if (drawYGrid) {
      const yValues = gridDomainValues(y, opts, "y");
      for (const value of yValues ?? gridCenters(y)) {
        const py = isBand(y) ? (yValues ? (y(value) ?? 0) + y.bandwidth() / 2 : value) : y(value);
        svg
          .append("line")
          .attr("class", "vis-grid-y")
          .attr("x1", x0 - GRID_PAD)
          .attr("x2", x1 + GRID_PAD)
          .attr("y1", py)
          .attr("y2", py);
      }

      if (isBand(y)) {
        svg
          .append("line")
          .attr("class", "vis-grid-y")
          .attr("x1", x0 - GRID_PAD)
          .attr("x2", x1 + GRID_PAD)
          .attr("y1", y1)
          .attr("y2", y1);
      }
    }

    if (drawXGrid) {
      const xValues = gridDomainValues(x, opts, "x");
      for (const value of xValues ?? gridCenters(x)) {
        const px = isBand(x) ? (xValues ? (x(value) ?? 0) + x.bandwidth() / 2 : value) : x(value);
        svg
          .append("line")
          .attr("class", "vis-grid-x")
          .attr("x1", px)
          .attr("x2", px)
          .attr("y1", y0 - GRID_PAD)
          .attr("y2", y1 + GRID_PAD);
      }
    }

    let xAxis = null;
    let yAxis = null;
    if (opts.xAxis !== false) {
      const xAxisGenerator = applyAxisOptions(
        d3.axisBottom(x).tickSize(0).tickPadding(24),
        opts,
        "x",
      );
      xAxis = svg
        .append("g")
        .attr("class", "vis-axis vis-x")
        .attr("transform", `translate(0,${y1})`)
        .call(xAxisGenerator);
      markAxisDomain(xAxis);
    }
    if (opts.yAxis !== false) {
      const yAxisGenerator = applyAxisOptions(
        d3.axisLeft(y).tickSize(0).tickPadding(24),
        opts,
        "y",
      );
      yAxis = svg
        .append("g")
        .attr("class", "vis-axis vis-y")
        .attr("transform", `translate(${x0},0)`)
        .call(yAxisGenerator);
      markAxisDomain(yAxis);
    }
    if (opts.xLabel) {
      svg
        .append("text")
        .attr("class", "vis-axis-label vis-x")
        .attr("x", (x0 + x1) / 2)
        .attr("y", height - 8)
        .attr("text-anchor", "middle")
        .text(opts.xLabel);
    }
    if (opts.yLabel) {
      svg
        .append("text")
        .attr("class", "vis-axis-label vis-y")
        .attr("x", -(y0 + y1) / 2)
        .attr("y", 12)
        .attr("text-anchor", "middle")
        .attr("transform", "rotate(-90)")
        .text(opts.yLabel);
    }

    const bounds = { x0, x1, y0, y1 };
    return { width, height, margin, x, y, x0, x1, y0, y1, bounds, xAxis, yAxis };
  }

  function draw(node, paint) {
    node = resolveNode(node);
    let lastW = 0;
    let frame = 0;
    const run = () => {
      const box = readDrawSize(node);
      // Repaint on width change only. The first paint into an empty container
      // gives it a height, which would otherwise trigger a second, identical paint.
      if (!box.width || box.width === lastW) return;
      lastW = box.width;
      paint(box);
    };
    const schedule = () => {
      if (frame) return;
      if (typeof requestAnimationFrame !== "function") {
        run();
        return;
      }
      frame = requestAnimationFrame(() => {
        frame = 0;
        run();
      });
    };
    run();
    if (typeof ResizeObserver === "function") {
      new ResizeObserver(schedule).observe(node);
    }
    return () => {
      lastW = 0;
      schedule();
    };
  }

  // Only these members form the supported API; other helpers and constants stay internal.
  window.chart = {
    draw,
    frame,
    band,
    labelMargin,
    DEFAULT_MARGIN,
    GRID_PAD,
    BAND_PADDING,
    BAR_MAX,
    BAR_GAP,
  };
})();

use strict

${tpf}
${ipf}
${spf}
${apf}
${upf}

(() => {
  const isRange = (el) =>
    el instanceof HTMLInputElement &&
    el.type === "range" &&
    el.classList.contains("vis-form-range");
  const sync = (el) => {
    if (!isRange(el)) {
      return;
    }
    const min = Number(el.min === "" ? 0 : el.min);
    const max = Number(el.max === "" ? 100 : el.max);
    const value = Number(el.value);
    const pct = max === min ? 0 : ((value - min) / (max - min)) * 100;
    el.style.setProperty("--value", pct + "%");
  };
  const syncAll = (root) => {
    root.querySelectorAll("input.vis-form-range[type='range']").forEach(sync);
  };
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", () => syncAll(document), {
      once: true,
    });
  } else {
    syncAll(document);
  }
  document.addEventListener(
    "input",
    (event) => {
      sync(event.target);
    },
    true
  );
  document.addEventListener(
    "change",
    (event) => {
      sync(event.target);
    },
    true
  );
})();

use strict

use strict

use strict

(function () {
	const sendToHost = window.parent.postMessage.bind(window.parent);
	const postToHost = (message) => sendToHost(message, '*');
	const params = new URL(location.href).searchParams;
	const parentOrigin = params.get('parentOrigin');
	const frameInstanceId = params.get('frameInstanceId');

	const measureHeight = () => {
		const body = document.body;
		const main = document.querySelector('main');
		if (!body && !main) {
			const docEl = document.documentElement;
			return Math.ceil(Math.max(docEl.scrollHeight, docEl.offsetHeight));
		}
		return Math.ceil(Math.max(
			(body && body.scrollHeight) || 0,
			(body && body.offsetHeight) || 0,
			(main && main.scrollHeight) || 0,
			(main && main.offsetHeight) || 0
		));
	};

	const measureVisualOverflow = (contentWidth, contentHeight) => {
		let left = 0;
		let top = 0;
		let right = contentWidth;
		let bottom = contentHeight;
		for (const node of document.querySelectorAll('svg *,canvas,img')) {
			const rect = node.getBoundingClientRect();
			if (rect.width === 0 && rect.height === 0) continue;
			const antialiasRadius =
				node instanceof SVGGraphicsElement ? 0.5 : 0;
			left = Math.min(
				left,
				Math.floor(rect.left - antialiasRadius)
			);
			top = Math.min(top, Math.floor(rect.top - antialiasRadius));
			right = Math.max(
				right,
				Math.ceil(rect.right + antialiasRadius)
			);
			bottom = Math.max(
				bottom,
				Math.ceil(rect.bottom + antialiasRadius)
			);
		}
		return {
			left: Math.max(0, -left),
			top: Math.max(0, -top),
			right: Math.max(0, right - contentWidth),
			bottom: Math.max(0, bottom - contentHeight)
		};
	};

	const reflectFormState = (source, clone) => {
		const forEachPair = (selector, reflect) => {
			const sourceNodes = source.querySelectorAll(selector);
			const cloneNodes = clone.querySelectorAll(selector);
			for (let index = 0; index < sourceNodes.length; index++) {
				reflect(sourceNodes[index], cloneNodes[index]);
			}
		};
		forEachPair('input', (sourceInput, cloneInput) => {
			cloneInput.setAttribute('value', sourceInput.value);
			cloneInput.toggleAttribute('checked', sourceInput.checked);
		});
		forEachPair('option', (sourceOption, cloneOption) => {
			cloneOption.toggleAttribute('selected', sourceOption.selected);
		});
		forEachPair('textarea', (sourceTextarea, cloneTextarea) => {
			cloneTextarea.textContent = sourceTextarea.value;
		});
		forEachPair('details', (sourceDetails, cloneDetails) => {
			cloneDetails.toggleAttribute('open', sourceDetails.open);
		});
	};

	const replaceCanvases = (source, clone) => {
		const sourceCanvases = source.querySelectorAll('canvas');
		const cloneCanvases = clone.querySelectorAll('canvas');
		let totalPixels = 0;
		let totalDataUrlBytes = 0;
		for (let index = 0; index < sourceCanvases.length; index++) {
			const sourceCanvas = sourceCanvases[index];
			const cloneCanvas = cloneCanvases[index];
			totalPixels += sourceCanvas.width * sourceCanvas.height;
			if (
				sourceCanvas.width > ${Lle.maxPhysicalSide} ||
				sourceCanvas.height > ${Lle.maxPhysicalSide} ||
				totalPixels > ${Lle.maxPhysicalPixels}
			) {
				throw new Error('too-large');
			}
			const dataUrl = sourceCanvas.toDataURL('image/png');
			if (!dataUrl.startsWith('data:image/png;base64,')) {
				throw new Error('unsupported-content');
			}
			totalDataUrlBytes += dataUrl.length;
			if (totalDataUrlBytes > ${Lle.maxHtmlBytes}) {
				throw new Error('too-large');
			}
			const image = document.createElement('img');
			for (const attribute of cloneCanvas.attributes) {
				image.setAttribute(attribute.name, attribute.value);
			}
			image.setAttribute('src', dataUrl);
			image.setAttribute('width', String(sourceCanvas.width));
			image.setAttribute('height', String(sourceCanvas.height));
			cloneCanvas.replaceWith(image);
		}
	};

	const resolveOpaqueBackground = () => {
		const probe = document.createElement('span');
		probe.style.backgroundColor = 'var(--background)';
		probe.hidden = true;
		document.body.appendChild(probe);
		const resolved = getComputedStyle(probe).backgroundColor;
		probe.remove();
		const pixel = document.createElement('canvas');
		pixel.width = 1;
		pixel.height = 1;
		const context = pixel.getContext('2d', { willReadFrequently: true });
		if (!context) {
			throw new Error('prepare-failed');
		}
		context.fillStyle = resolved;
		context.fillRect(0, 0, 1, 1);
		const color = context.getImageData(0, 0, 1, 1).data;
		return color[3] === 255
			? [color[0], color[1], color[2]]
			: document.documentElement.dataset.theme === 'dark'
				? [32, 32, 32]
				: [250, 250, 250];
	};

	const createExportSnapshot = async () => {
		await document.fonts.ready;
		const clone = document.documentElement.cloneNode(true);
		reflectFormState(document, clone);
		replaceCanvases(document, clone);
		for (const node of clone.querySelectorAll(
			'script, animate, animateMotion, animateTransform, set'
		)) {
			node.remove();
		}
		const head = clone.querySelector('head');
		if (!head) {
			throw new Error('prepare-failed');
		}
		const backgroundRgb = resolveOpaqueBackground();
		const background = 'rgb(' + backgroundRgb.join(' ') + ')';
		const body = document.body;
		const main = document.querySelector('main');
		const liveLayoutWidth = body
			? body.getBoundingClientRect().width
			: document.documentElement.getBoundingClientRect().width;
		const contentWidth = Math.ceil(Math.max(
			document.documentElement.clientWidth,
			(body && body.scrollWidth) || 0,
			(main && main.scrollWidth) || 0
		));
		const layoutWidth =
			Number.isFinite(liveLayoutWidth) && liveLayoutWidth > 0
				? liveLayoutWidth
				: contentWidth;
		const contentHeight = measureHeight();
		const visualOverflow = measureVisualOverflow(contentWidth, contentHeight);
		const width =
			contentWidth +
			visualOverflow.left +
			visualOverflow.right +
			${2*avs};
		const height =
			contentHeight +
			visualOverflow.top +
			visualOverflow.bottom +
			${2*avs};
		const exportStyle = document.createElement('style');
		exportStyle.textContent =
			'*,*::before,*::after{animation:none!important;transition:none!important;caret-color:transparent!important}' +
			'html{box-sizing:border-box!important;width:' + width + 'px!important;height:' + height + 'px!important;padding:${avs}px!important;overflow:hidden!important;background:' + background + '!important}' +
			'body{box-sizing:border-box!important;position:relative!important;left:' + visualOverflow.left + 'px!important;top:' + visualOverflow.top + 'px!important;width:' + layoutWidth + 'px!important;overflow:visible!important;background:' + background + '!important}';
		head.appendChild(exportStyle);
		const html = '<!DOCTYPE html>\n' + clone.outerHTML;
		if (
			!Number.isSafeInteger(width) ||
			!Number.isSafeInteger(height) ||
			width < 1 ||
			height < 1 ||
			width > ${Lle.maxCssWidth} ||
			height > ${Lle.maxCssHeight} ||
			html.length > ${Lle.maxHtmlBytes} ||
			new TextEncoder().encode(html).byteLength > ${Lle.maxHtmlBytes}
		) {
			throw new Error('too-large');
		}
		return { html, width, height, backgroundRgb };
	};

	const originMatchesParent = (origin) =>
		origin === parentOrigin ||
		(parentOrigin === 'file://' && origin === 'null');
	window.addEventListener('message', (event) => {
		if (
			event.source !== window.parent ||
			!originMatchesParent(event.origin) ||
			!event.data ||
			event.data.type !== 'visualization-export-request' ||
			event.data.frameInstanceId !== frameInstanceId ||
			typeof event.data.exportRequestId !== 'string'
		) {
			return;
		}
		const exportRequestId = event.data.exportRequestId;
		void createExportSnapshot().then(
			snapshot => postToHost({
				type: 'visualization-export-snapshot',
				frameInstanceId: frameInstanceId,
				exportRequestId: exportRequestId,
				html: snapshot.html,
				width: snapshot.width,
				height: snapshot.height,
				backgroundRgb: snapshot.backgroundRgb
			}),
			error => postToHost({
				type: 'visualization-export-error',
				frameInstanceId: frameInstanceId,
				exportRequestId: exportRequestId,
				reason: error instanceof Error &&
					(error.message === 'unsupported-content' ||
						error.message === 'too-large')
					? error.message
					: 'prepare-failed'
			})
		);
	});

	window.addEventListener('load', () => {
		requestAnimationFrame(() => {
			requestAnimationFrame(() => {
				postToHost({
					type: 'visualization-ready',
					frameInstanceId: frameInstanceId
				});
			});
		});
	});
})();

Loading visualization…

Loading visualization…

use strict

Visualization could not be displayed

use strict

use strict

use strict

${i.tool} (${i.server})

web searches

Unhandled approval tool kind: ${n}

Invalid persisted approval state: ${t.message}

Unhandled approval projection: ${e}

use strict

Unhandled approval tool kind: ${s}

Unhandled approval decision: ${n}

Unhandled approval tool kind: ${i}

Unhandled approval decision: ${n}

use strict

use strict

use strict

use strict

${t.logSource}: failed to fork agent after turn

${t.logSource}: failed to fork cloud agent after turn

Failed to fork agent. Please try again.

use strict

Message copied to clipboard

Copy Request ID

No request ID found for this message

Request ID copied to clipboard

Download request content

Open in Prompt Quality

use strict

use strict

use strict

use strict

use strict

use strict

use strict

use strict

This ${e} a file outside your workspace.

This ${e} a protected config file.