@powerduck/schema-designer 0.1.0

package/dist/react/index.css

@@ -0,0 +1,1791 @@
+/* src/react/shared/SettingsPanel.module.css */
+.SettingsPanel_panel {
+  width: min(420px, calc(100vw - 24px));
+  max-height: min(640px, calc(100dvh - 32px), var(--available-height, 640px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--color-text-primary, #26282b);
+  background: var(--color-surface, #fff);
+  border: 1px solid var(--color-border-default, #e0e4e8);
+  border-radius: var(--radius-md, 6px);
+  box-shadow: var(--shadow-lg, 0 8px 28px #0002);
+  font-family: var(--font-family-ui, system-ui, sans-serif);
+  font-size: 12px;
+}
+.SettingsPanel_header {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border-subtle, #eceff1);
+  flex-shrink: 0;
+}
+.SettingsPanel_title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 600;
+}
+.SettingsPanel_close {
+  position: static;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-text-secondary, #6f747c);
+}
+.SettingsPanel_close:hover {
+  background: var(--color-surface-hover, #f4f5f6);
+}
+.SettingsPanel_close:focus-visible {
+  outline: 2px solid var(--color-focus-ring, #f5c98f);
+}
+.SettingsPanel_body {
+  padding: 12px;
+  overflow: auto;
+  min-height: 0;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+.SettingsPanel_body:hover,
+.SettingsPanel_body:focus-within {
+  scrollbar-color: var(--color-border-strong, #ccd2d8) transparent;
+}
+
+/* src/react/inlineSchemaEditor/InlineSchemaEditor.module.css */
+.InlineSchemaEditor_root {
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  color: var(--color-text-primary, #26282b);
+  font-family: var(--font-family-ui, system-ui, sans-serif);
+  font-size: 12px;
+}
+.InlineSchemaEditor_shell {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  min-width: 0;
+}
+.InlineSchemaEditor_editorPane {
+  flex: 1;
+  min-width: 0;
+}
+.InlineSchemaEditor_previewPane {
+  width: min(36vw, 360px);
+  min-width: 240px;
+  padding: 12px;
+  border: 1px solid var(--color-border-subtle, #eceff1);
+  border-radius: 6px;
+  background: var(--color-surface, #fff);
+  max-height: 70vh;
+  display: flex;
+}
+.InlineSchemaEditor_root input:not([type=checkbox]):not([type=radio]),
+.InlineSchemaEditor_root select,
+.InlineSchemaEditor_root [data-scope=select][data-part=trigger] {
+  height: 28px;
+  min-height: 28px;
+  padding: 0 8px;
+  font-size: 12px;
+  border: 1px solid var(--color-border-default, #e0e4e8);
+  border-radius: 4px;
+  color: var(--color-text-primary, #26282b);
+  background: var(--color-surface, #fff);
+}
+.InlineSchemaEditor_root select {
+  padding-right: 28px;
+}
+.InlineSchemaEditor_root textarea {
+  font-size: 12px;
+  padding: 6px 8px;
+  border: 1px solid var(--color-border-default, #e0e4e8);
+  border-radius: 4px;
+  color: var(--color-text-primary, #26282b);
+  background: var(--color-surface, #fff);
+}
+.InlineSchemaEditor_root [data-scope=field][data-part=root] {
+  gap: 4px;
+  min-width: 0;
+}
+.InlineSchemaEditor_root [data-part=label] {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--color-text-secondary, #6f747c);
+}
+.InlineSchemaEditor_root [data-part=helper-text],
+.InlineSchemaEditor_root p {
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--color-text-secondary, #6f747c);
+}
+.InlineSchemaEditor_root button {
+  font-size: 12px;
+  min-height: 24px;
+  color: var(--color-text-secondary, #6f747c);
+}
+.InlineSchemaEditor_root button:hover {
+  background: var(--color-surface-hover, #f4f5f6);
+}
+.InlineSchemaEditor_root input:focus-visible,
+.InlineSchemaEditor_root select:focus-visible,
+.InlineSchemaEditor_root textarea:focus-visible,
+.InlineSchemaEditor_root button:focus-visible,
+.InlineSchemaEditor_reference > summary:focus-visible {
+  outline: 2px solid var(--color-focus-ring, #f5c98f);
+  outline-offset: 1px;
+  box-shadow: none;
+}
+.InlineSchemaEditor_root [data-scope=switch][data-part=control] {
+  width: 28px;
+  height: 16px;
+  min-width: 28px;
+  background: var(--color-surface-selected, #eef0f2);
+  border: 1px solid var(--color-border-strong, #ccd2d8);
+}
+.InlineSchemaEditor_root [data-scope=switch][data-part=thumb] {
+  width: 12px;
+  height: 12px;
+  background: var(--color-surface, #fff);
+}
+.InlineSchemaEditor_root [data-scope=switch][data-part=control][data-state=checked] {
+  background: var(--color-accent, #f28c28);
+  border-color: var(--color-accent, #f28c28);
+}
+.InlineSchemaEditor_tabsList,
+.InlineSchemaEditor_root [data-scope=tabs][data-part=list] {
+  display: flex;
+  width: 100%;
+  gap: 12px;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--color-border-subtle, #eceff1);
+  background: transparent;
+  border-radius: 0;
+}
+.InlineSchemaEditor_root [data-scope=tabs][data-part=trigger] {
+  flex: 0 0 auto;
+  min-height: 28px;
+  height: 28px;
+  padding: 0 2px;
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  box-shadow: none;
+  font-size: 12px;
+  background: transparent;
+}
+.InlineSchemaEditor_root [data-scope=tabs][data-part=trigger][data-selected] {
+  color: var(--color-text-primary, #26282b);
+  border-bottom-color: var(--color-accent, #f28c28);
+}
+.InlineSchemaEditor_root .pdDesignerSchemaSection {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.InlineSchemaEditor_root .pdDesignerSchemaNestedCard {
+  padding: 8px;
+  border: 1px solid var(--color-border-subtle, #eceff1);
+  border-radius: 4px;
+  background: transparent;
+}
+.InlineSchemaEditor_reference {
+  border-top: 1px solid var(--color-border-subtle, #eceff1);
+  padding-top: 6px;
+}
+.InlineSchemaEditor_reference > summary {
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--color-text-secondary, #6f747c);
+  padding: 2px 0;
+}
+.InlineSchemaEditor_reference[open] > summary {
+  margin-bottom: 6px;
+}
+.pdDesignerSchemaPopoverContent {
+  width: min(420px, calc(100vw - 24px));
+  background: var(--color-surface, #fff);
+  color: var(--color-text-primary, #26282b);
+  border: 1px solid var(--color-border-default, #e0e4e8);
+  border-radius: 6px;
+  max-height: 80vh;
+  overflow: hidden;
+}
+.pdDesignerSchemaPopoverBody {
+  padding: 12px;
+  max-height: 72vh;
+  overflow: auto;
+}
+.pdDesignerSchemaIconButton {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  padding: 0;
+}
+@media (max-width: 900px) {
+  .InlineSchemaEditor_shell {
+    flex-direction: column;
+  }
+  .InlineSchemaEditor_editorPane {
+    width: 100%;
+  }
+  .InlineSchemaEditor_previewPane {
+    width: 100%;
+    min-width: 0;
+    max-height: 280px;
+  }
+}
+.pdDesignerSelectMenu {
+  min-width: var(--reference-width, 132px);
+  background: var(--color-surface, #fff);
+  color: var(--color-text-primary, #26282b);
+  border: 1px solid var(--color-border-default, #e0e4e8);
+  font-size: 12px;
+  padding: 4px;
+}
+.pdDesignerSelectMenu [data-part=item] {
+  min-height: 26px;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.pdDesignerSelectMenu [data-highlighted] {
+  background: var(--color-surface-hover, #f4f5f6);
+}
+.InlineSchemaEditor_root p {
+  margin: 0;
+}
+.InlineSchemaEditor_root [data-scope=tabs][data-part=trigger]::before,
+.InlineSchemaEditor_root [data-scope=tabs][data-part=trigger]::after {
+  display: none;
+}
+.InlineSchemaEditor_root [data-scope=tabs][data-part=indicator] {
+  display: none;
+}
+
+/* src/react/schemaTreeEditor/SchemaTreeEditor.module.css */
+.SchemaTreeEditor_nameInput,
+.SchemaTreeEditor_descriptionInput,
+.SchemaTreeEditor_typeSelect select,
+.SchemaTreeEditor_typeSelect [data-part=field],
+.SchemaTreeEditor_typeSelect [data-part=trigger] {
+  box-sizing: border-box;
+}
+.SchemaTreeEditor_root {
+  --grid-columns: minmax(180px, 1.2fr) 116px 36px minmax(180px, 1.5fr) 84px;
+  --row-inset: 22px;
+  --row-pad-x: var(--space-3, 12px);
+  --ref-frame: var(--color-info, #4f79bf);
+  container-type: inline-size;
+  font-family: var( --font-family-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif );
+  font-size: var(--font-size-sm, 13px);
+  color: var(--color-text-primary, #26282b);
+  background: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-border-subtle, #eceff1);
+  border-radius: var(--radius-lg, 8px);
+  box-shadow: var( --shadow-sm, 0 1px 2px rgba(28, 32, 36, 0.035), 0 1px 3px rgba(28, 32, 36, 0.025) );
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+.SchemaTreeEditor_toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 8px);
+  height: var(--header-height, 36px);
+  padding: 0 var(--space-2, 8px) 0 var(--space-3, 12px);
+  border-bottom: 1px solid var(--color-border-subtle, #eceff1);
+  background: var(--color-surface-subtle, #f8f9fa);
+  flex: 0 0 auto;
+}
+.SchemaTreeEditor_toolbarTitle {
+  font-size: var(--font-size-sm, 13px);
+  font-weight: var(--font-weight-semibold, 600);
+  line-height: var(--line-height-tight, 16px);
+}
+.SchemaTreeEditor_toolbarMeta {
+  font-size: var(--font-size-xs, 12px);
+  color: var(--color-text-tertiary, #989da5);
+}
+.SchemaTreeEditor_toolbarSpacer {
+  flex: 1 1 auto;
+}
+.SchemaTreeEditor_ghostButton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1, 4px);
+  height: var(--control-height-xs, 24px);
+  padding: 0 var(--space-2, 8px);
+  border-radius: var(--radius-sm, 4px);
+  font-size: var(--font-size-xs, 12px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-secondary, #6f747c);
+  background: transparent;
+  transition: background var(--transition-fast, 140ms ease), color var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_ghostButton:hover:not(:disabled) {
+  background: var(--color-surface-hover, #f4f5f6);
+  color: var(--color-text-primary, #26282b);
+}
+.SchemaTreeEditor_ghostButton:disabled {
+  color: var(--color-text-disabled, #c2c6cc);
+  cursor: not-allowed;
+}
+.SchemaTreeEditor_ghostButton:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(242, 140, 40, 0.28));
+}
+.SchemaTreeEditor_header,
+.SchemaTreeEditor_row {
+  display: grid;
+  grid-template-columns: var(--grid-columns);
+  align-items: center;
+  column-gap: var(--space-3, 12px);
+}
+.SchemaTreeEditor_header {
+  padding: var(--space-1, 4px) var(--row-pad-x) var(--space-1, 4px) calc(var(--row-pad-x) + var(--row-inset));
+  border-bottom: 1px solid var(--color-border-subtle, #eceff1);
+  background: var(--color-surface, #ffffff);
+  font-size: var(--font-size-xxs, 10px);
+  font-weight: var(--font-weight-semibold, 600);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary, #989da5);
+  flex: 0 0 auto;
+}
+.SchemaTreeEditor_headerCell {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.SchemaTreeEditor_headerCell:nth-child(3) {
+  text-align: center;
+  letter-spacing: 0;
+}
+.SchemaTreeEditor_list {
+  position: relative;
+  overflow: auto;
+  padding: var(--space-2, 8px) 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong, #ccd2d8) transparent;
+}
+.SchemaTreeEditor_list::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.SchemaTreeEditor_list::-webkit-scrollbar-thumb {
+  background: var(--color-border-default, #e0e4e8);
+  border: 3px solid transparent;
+  background-clip: content-box;
+  border-radius: var(--radius-full, 9999px);
+}
+.SchemaTreeEditor_list::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-border-strong, #ccd2d8);
+}
+.SchemaTreeEditor_row {
+  position: relative;
+  padding: 3px var(--row-pad-x) 3px calc(var(--row-pad-x) + var(--row-inset));
+  min-height: var(--control-height-md, 32px);
+  transition: background var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_row:hover {
+  background: var(--color-surface-hover, #f4f5f6);
+}
+.SchemaTreeEditor_row:focus-within {
+  background: var(--color-surface-subtle, #f8f9fa);
+}
+.SchemaTreeEditor_row[data-dragging=true] {
+  opacity: 0.45;
+}
+.SchemaTreeEditor_row[data-ref-segment]:not([data-ref-segment=none]) {
+  box-shadow: inset 2px 0 var(--color-border-default, #e0e4e8);
+}
+.SchemaTreeEditor_row[data-readonly] .SchemaTreeEditor_nameInput:disabled,
+.SchemaTreeEditor_row[data-readonly] .SchemaTreeEditor_descriptionInput:disabled,
+.SchemaTreeEditor_row[data-readonly] .SchemaTreeEditor_typeSelect select:disabled,
+.SchemaTreeEditor_row[data-readonly] .SchemaTreeEditor_typeSelect [data-part=field]:disabled,
+.SchemaTreeEditor_row[data-readonly] .SchemaTreeEditor_typeSelect [data-part=trigger][data-disabled] {
+  color: var(--color-text-secondary, #6f747c);
+  -webkit-text-fill-color: var(--color-text-secondary, #6f747c);
+  opacity: 1;
+  border-color: transparent;
+  background: transparent;
+}
+.SchemaTreeEditor_row[data-readonly] .SchemaTreeEditor_requiredToggle:disabled {
+  opacity: 0.85;
+}
+.SchemaTreeEditor_dropLine {
+  height: 2px;
+  margin: -1px calc(var(--row-pad-x)) -1px calc(var(--row-pad-x) + var(--row-inset));
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-accent, #f28c28);
+  pointer-events: none;
+  z-index: 1;
+}
+.SchemaTreeEditor_list[data-dragging=true] .SchemaTreeEditor_row:hover {
+  background: transparent;
+}
+.SchemaTreeEditor_list[data-dragging=true] .SchemaTreeEditor_row[data-ref-segment=head]:hover,
+.SchemaTreeEditor_list[data-dragging=true] .SchemaTreeEditor_row[data-ref-segment=body]:hover,
+.SchemaTreeEditor_list[data-dragging=true] .SchemaTreeEditor_row[data-ref-segment=tail]:hover,
+.SchemaTreeEditor_list[data-dragging=true] .SchemaTreeEditor_row[data-ref-segment=single]:hover {
+  background: var(--color-info-soft, #f0f5ff);
+}
+.SchemaTreeEditor_grip {
+  position: absolute;
+  left: calc(var(--row-pad-x) - 2px);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  padding: 3px;
+  border-radius: var(--radius-xs, 3px);
+  color: var(--color-text-tertiary, #989da5);
+  cursor: grab;
+  opacity: 0;
+  transition:
+    opacity var(--transition-fast, 140ms ease),
+    background var(--transition-fast, 140ms ease),
+    color var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_row:hover .SchemaTreeEditor_grip,
+.SchemaTreeEditor_row:focus-within .SchemaTreeEditor_grip {
+  opacity: 1;
+}
+.SchemaTreeEditor_grip:hover {
+  background: var(--color-surface-selected, #eef0f2);
+  color: var(--color-text-secondary, #6f747c);
+}
+.SchemaTreeEditor_grip:active {
+  cursor: grabbing;
+}
+.SchemaTreeEditor_gripPlaceholder {
+  position: absolute;
+  left: calc(var(--row-pad-x) - 2px);
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+}
+.SchemaTreeEditor_nameCell {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1, 4px);
+  min-width: 0;
+}
+.SchemaTreeEditor_chevron {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  padding: 0;
+  border-radius: var(--radius-xs, 3px);
+  color: var(--color-text-secondary, #6f747c);
+  background: transparent;
+  transition:
+    background var(--transition-fast, 140ms ease),
+    color var(--transition-fast, 140ms ease),
+    transform var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_chevron:hover {
+  background: var(--color-surface-selected, #eef0f2);
+  color: var(--color-text-primary, #26282b);
+}
+.SchemaTreeEditor_chevron:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-focus-ring, rgba(242, 140, 40, 0.28));
+}
+.SchemaTreeEditor_chevron[data-expanded] {
+  transform: rotate(90deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .SchemaTreeEditor_chevron {
+    transition: background var(--transition-fast, 140ms ease), color var(--transition-fast, 140ms ease);
+  }
+}
+.SchemaTreeEditor_chevronPlaceholder {
+  flex: 0 0 auto;
+  width: 18px;
+  display: inline-flex;
+  justify-content: center;
+}
+.SchemaTreeEditor_chevronPlaceholder::after {
+  content: "";
+  align-self: center;
+  width: 4px;
+  height: 4px;
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-border-strong, #ccd2d8);
+}
+.SchemaTreeEditor_nameInput {
+  flex: 1;
+  width: 0;
+  min-width: 0;
+  height: var(--control-height-xs, 24px);
+  padding: 0 var(--space-1, 4px);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm, 4px);
+  background: transparent;
+  color: var(--color-text-primary, #26282b);
+  font-family: var( --font-family-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif );
+  font-size: var(--font-size-sm, 13px);
+  font-weight: var(--font-weight-medium, 500);
+  line-height: var(--line-height-tight, 16px);
+  transition:
+    background var(--transition-fast, 140ms ease),
+    border-color var(--transition-fast, 140ms ease),
+    box-shadow var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_descriptionInput {
+  width: 100%;
+  min-width: 0;
+  height: var(--control-height-xs, 24px);
+  padding: 0 var(--space-1, 4px);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm, 4px);
+  background: transparent;
+  color: var(--color-text-secondary, #6f747c);
+  font-size: var(--font-size-xs, 12px);
+  line-height: var(--line-height-tight, 16px);
+  transition:
+    background var(--transition-fast, 140ms ease),
+    border-color var(--transition-fast, 140ms ease),
+    box-shadow var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_nameInput::placeholder,
+.SchemaTreeEditor_descriptionInput::placeholder {
+  color: var(--color-text-tertiary, #989da5);
+  font-family: var( --font-family-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif );
+}
+.SchemaTreeEditor_nameInput:hover:not(:disabled),
+.SchemaTreeEditor_descriptionInput:hover:not(:disabled) {
+  background: var(--color-surface, #ffffff);
+  border-color: var(--color-border-subtle, #eceff1);
+}
+.SchemaTreeEditor_nameInput:focus,
+.SchemaTreeEditor_descriptionInput:focus {
+  outline: none;
+  background: var(--color-surface, #ffffff);
+  border-color: var(--color-accent, #f28c28);
+}
+.SchemaTreeEditor_nameInput:disabled,
+.SchemaTreeEditor_descriptionInput:disabled {
+  color: var(--color-text-secondary, #6f747c);
+  opacity: 1;
+  cursor: default;
+}
+.SchemaTreeEditor_inputRejected,
+.SchemaTreeEditor_nameInput[aria-invalid=true],
+.SchemaTreeEditor_descriptionInput[aria-invalid=true] {
+  border-color: var(--color-danger, #ff0000);
+  background: var(--color-danger-soft, #fff2f1);
+  transition:
+    border-color var(--transition-fast, 140ms ease),
+    background var(--transition-fast, 140ms ease),
+    box-shadow var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_refBadge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  max-width: 132px;
+  height: 18px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-surface, #ffffff);
+  color: var(--color-text-secondary, #6f747c);
+  font-size: var(--font-size-xxs, 10px);
+  font-weight: var(--font-weight-medium, 500);
+}
+.SchemaTreeEditor_refBadgeIcon {
+  flex: 0 0 auto;
+  width: 11px;
+  height: 11px;
+}
+.SchemaTreeEditor_refBadgeText {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.SchemaTreeEditor_recursiveBadge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-warning-soft, #fff8e8);
+  color: var(--color-warning, #d98a22);
+}
+.SchemaTreeEditor_recursiveBadgeText {
+  font-size: var(--font-size-xxs, 10px);
+  font-weight: var(--font-weight-medium, 500);
+  white-space: nowrap;
+}
+.SchemaTreeEditor_typeCell {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.SchemaTreeEditor_typeSelect {
+  width: 100%;
+  min-width: 0;
+}
+.SchemaTreeEditor_typeSelect select,
+.SchemaTreeEditor_typeSelect [data-part=field],
+.SchemaTreeEditor_typeSelect [data-part=trigger] {
+  width: 100%;
+  height: var(--control-height-xs, 24px);
+  padding: 0 var(--space-4, 16px) 0 var(--space-2, 8px);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm, 4px);
+  background: transparent;
+  color: var(--color-text-secondary, #6f747c);
+  font-size: var(--font-size-xs, 12px);
+  font-family: var( --font-family-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif );
+  transition:
+    border-color var(--transition-fast, 140ms ease),
+    background var(--transition-fast, 140ms ease),
+    box-shadow var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_typeSelect select:hover:not(:disabled),
+.SchemaTreeEditor_typeSelect [data-part=field]:hover:not(:disabled),
+.SchemaTreeEditor_typeSelect [data-part=trigger]:hover {
+  background: var(--color-surface, #ffffff);
+  border-color: var(--color-border-subtle, #eceff1);
+  color: var(--color-text-primary, #26282b);
+}
+.SchemaTreeEditor_typeSelect select:focus-visible,
+.SchemaTreeEditor_typeSelect [data-part=field]:focus-visible,
+.SchemaTreeEditor_typeSelect [data-part=trigger]:focus-visible {
+  outline: none;
+  background: var(--color-surface, #ffffff);
+  border-color: var(--color-accent-border, #f5c98f);
+  box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(242, 140, 40, 0.28));
+}
+.SchemaTreeEditor_typeSelect select:disabled,
+.SchemaTreeEditor_typeSelect [data-part=field]:disabled {
+  cursor: default;
+}
+.SchemaTreeEditor_typeSelectContent {
+  background-color: var(--color-surface-subtle, #f8f9fa);
+}
+.SchemaTreeEditor_typeSelectItem {
+  height: 28px;
+  min-height: 28px;
+  color: var(--color-text-primary, #26282b);
+  border-color: var(--color-border-subtle, #eceff1);
+}
+.SchemaTreeEditor_typeSelectOption {
+  font-size: var(--font-size-xs, 12px);
+  text-transform: capitalize;
+  color: var(--color-text-primary, #26282b);
+}
+.SchemaTreeEditor_typeSelectOption svg,
+.SchemaTreeEditor_typeSelectItem svg {
+  color: var(--color-text-primary, #26282b);
+  stroke: var(--color-text-primary, #26282b);
+}
+.SchemaTreeEditor_typeStatic {
+  min-width: 0;
+  padding: 0 var(--space-2, 8px);
+  color: var(--color-text-secondary, #6f747c);
+  font-family: var( --font-family-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif );
+  font-size: var(--font-size-xs, 12px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.SchemaTreeEditor_requiredCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.SchemaTreeEditor_requiredToggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border-radius: var(--radius-full, 9999px);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--color-text-tertiary, #989da5);
+  transition:
+    color var(--transition-fast, 140ms ease),
+    background var(--transition-fast, 140ms ease),
+    border-color var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_requiredToggle svg {
+  font-size: 12px;
+  width: 8px;
+}
+.SchemaTreeEditor_requiredToggle:hover:not(:disabled) {
+  color: var(--color-accent, #f28c28);
+}
+.SchemaTreeEditor_requiredToggle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(242, 140, 40, 0.28));
+}
+.SchemaTreeEditor_requiredToggle:disabled {
+  cursor: default;
+}
+.SchemaTreeEditor_requiredToggle[data-on] {
+  color: var(--color-text-accent, #d97818);
+}
+.SchemaTreeEditor_requiredToggle[data-on]:hover:not(:disabled) {
+  color: var(--color-text-accent, #d97818);
+}
+.SchemaTreeEditor_descriptionCell {
+  min-width: 0;
+}
+.SchemaTreeEditor_actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 2px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_row:hover .SchemaTreeEditor_actions,
+.SchemaTreeEditor_row:focus-within .SchemaTreeEditor_actions,
+.SchemaTreeEditor_row[data-menu-open=true] .SchemaTreeEditor_actions,
+.SchemaTreeEditor_row[data-popover-open=true] .SchemaTreeEditor_actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+.SchemaTreeEditor_iconButton {
+  width: var(--control-height-xs, 24px);
+  height: var(--control-height-xs, 24px);
+  min-width: var(--control-height-xs, 24px);
+  padding: 0;
+  border-radius: var(--radius-sm, 4px);
+  color: var(--color-text-secondary, #6f747c);
+  background: transparent;
+  transition: background var(--transition-fast, 140ms ease), color var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_iconButton:hover {
+  background: var(--color-surface-selected, #eef0f2);
+  color: var(--color-text-primary, #26282b);
+}
+.SchemaTreeEditor_iconButton:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-focus-ring, rgba(242, 140, 40, 0.28));
+}
+.SchemaTreeEditor_iconButton[data-state=open] {
+  visibility: visible;
+  background: var(--color-surface-selected, #eef0f2);
+  color: var(--color-text-primary, #26282b);
+}
+.SchemaTreeEditor_dangerArmed,
+.SchemaTreeEditor_dangerArmed:hover {
+  color: var(--color-danger, #d92d20);
+  background: var(--color-danger-soft, #fff2f1);
+  outline: none;
+}
+.SchemaTreeEditor_menu {
+  min-width: var(--menu-min-width, 224px);
+  padding: var(--space-1, 4px);
+  border: 1px solid var(--color-border-subtle, #eceff1);
+  border-radius: var(--radius-md, 6px);
+  background: var(--color-surface, #ffffff);
+  box-shadow: var( --shadow-md, 0 6px 18px rgba(28, 32, 36, 0.07), 0 2px 6px rgba(28, 32, 36, 0.035) );
+}
+.SchemaTreeEditor_menu [data-part=item] {
+  display: flex;
+  align-items: center;
+  height: var(--control-height-sm, 28px);
+  padding: 0 var(--space-2, 8px);
+  border-radius: var(--radius-sm, 4px);
+  font-size: var(--font-size-xs, 12px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-primary, #26282b);
+  cursor: pointer;
+  transition: background var(--transition-fast, 140ms ease);
+}
+.SchemaTreeEditor_menu [data-part=item]:hover,
+.SchemaTreeEditor_menu [data-part=item][data-highlighted] {
+  background: var(--color-surface-hover, #f4f5f6);
+  outline: none;
+}
+.SchemaTreeEditor_advancedPanel {
+  max-height: min(640px, calc(100dvh - 32px));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  width: min(440px, calc(100vw - var(--space-8, 32px)));
+  border: 1px solid var(--color-border-subtle, #eceff1);
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-surface, #ffffff);
+  box-shadow: var( --shadow-lg, 0 16px 40px rgba(28, 32, 36, 0.1), 0 4px 12px rgba(28, 32, 36, 0.05) );
+}
+.SchemaTreeEditor_advancedBody {
+  padding: var(--space-4, 16px);
+}
+.SchemaTreeEditor_empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2, 8px);
+  margin: var(--space-2, 8px) var(--space-3, 12px);
+  padding: var(--space-6, 24px) var(--space-4, 16px);
+  border: 1px dashed var(--color-border-default, #e0e4e8);
+  border-radius: var(--radius-md, 6px);
+  background: var(--color-canvas, #fafafa);
+  text-align: center;
+}
+.SchemaTreeEditor_emptyTitle {
+  font-size: var(--font-size-sm, 13px);
+  font-weight: var(--font-weight-semibold, 600);
+}
+.SchemaTreeEditor_emptyHint {
+  max-width: 320px;
+  font-size: var(--font-size-xs, 12px);
+  line-height: var(--line-height-normal, 20px);
+  color: var(--color-text-secondary, #6f747c);
+}
+.SchemaTreeEditor_notice {
+  margin: 0 var(--space-3, 12px) var(--space-2, 8px);
+  padding: var(--space-2, 8px) var(--space-3, 12px);
+  border: 1px solid var(--color-border-subtle, #eceff1);
+  border-radius: var(--radius-md, 6px);
+  background: var(--color-warning-soft, #fff8e8);
+}
+.SchemaTreeEditor_noticeText {
+  color: var(--color-warning, #d98a22);
+  font-size: var(--font-size-xs, 12px);
+  line-height: var(--line-height-normal, 20px);
+}
+.SchemaTreeEditor_fallback {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2, 8px);
+  margin: var(--space-3, 12px);
+  padding: var(--space-4, 16px);
+  border: 1px solid var(--color-danger, #ff0000);
+  border-radius: var(--radius-md, 6px);
+  background: var(--color-danger-soft, #fff2f1);
+}
+.SchemaTreeEditor_fallbackTitle {
+  font-size: var(--font-size-sm, 13px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-danger, #ff0000);
+}
+.SchemaTreeEditor_fallbackMessage {
+  font-size: var(--font-size-xs, 12px);
+  line-height: var(--line-height-normal, 20px);
+  color: var(--color-text-secondary, #6f747c);
+  word-break: break-word;
+}
+.SchemaTreeEditor_srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+@container (max-width: 560px) {
+  .SchemaTreeEditor_root {
+    --grid-columns: minmax(140px, 1.3fr) 92px 24px minmax(120px, 1fr) 84px;
+    --row-pad-x: var(--space-2, 8px);
+  }
+}
+.SchemaTreeEditor_advancedPanel {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-strong, #ccd2d8) transparent;
+}
+[data-theme=dark] .SchemaTreeEditor_advancedPanel {
+  color-scheme: dark;
+}
+.SchemaTreeEditor_advancedPanel::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.SchemaTreeEditor_advancedPanel::-webkit-scrollbar-track {
+  background: transparent;
+}
+.SchemaTreeEditor_advancedPanel::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 8px;
+}
+.SchemaTreeEditor_advancedPanel:hover::-webkit-scrollbar-thumb,
+.SchemaTreeEditor_advancedPanel:focus-within::-webkit-scrollbar-thumb {
+  background: var(--color-border-strong, #ccd2d8);
+}
+.SchemaTreeEditor_root[data-show-type=false] .SchemaTreeEditor_typeCell,
+.SchemaTreeEditor_root[data-show-type=false] .SchemaTreeEditor_headerCell:nth-child(2),
+.SchemaTreeEditor_root[data-show-required=false] .SchemaTreeEditor_requiredCell,
+.SchemaTreeEditor_root[data-show-required=false] .SchemaTreeEditor_headerCell:nth-child(3),
+.SchemaTreeEditor_root[data-show-description=false] .SchemaTreeEditor_descriptionCell,
+.SchemaTreeEditor_root[data-show-description=false] .SchemaTreeEditor_headerCell:nth-child(4) {
+  display: none;
+}
+.SchemaTreeEditor_root {
+  box-shadow: none;
+}
+.SchemaTreeEditor_header,
+.SchemaTreeEditor_row {
+  column-gap: 8px;
+}
+.SchemaTreeEditor_row {
+  min-height: 30px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.SchemaTreeEditor_list {
+  padding: 4px 0;
+  scrollbar-color: transparent transparent;
+}
+.SchemaTreeEditor_list:hover,
+.SchemaTreeEditor_list:focus-within {
+  scrollbar-color: var(--color-border-strong, #ccd2d8) transparent;
+}
+.SchemaTreeEditor_actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+.SchemaTreeEditor_actions > :not(:first-child) {
+  opacity: 0;
+}
+.SchemaTreeEditor_row:hover .SchemaTreeEditor_actions > *,
+.SchemaTreeEditor_row:focus-within .SchemaTreeEditor_actions > *,
+.SchemaTreeEditor_actions:has([data-state=open]) > * {
+  opacity: 1;
+}
+@media (hover: none) {
+  .SchemaTreeEditor_actions > :not(:first-child) {
+    opacity: 1;
+  }
+}
+.SchemaTreeEditor_refBadge {
+  background: transparent;
+  line-height: 18px;
+}
+.SchemaTreeEditor_refBadgeText {
+  font-size: 11px;
+  line-height: 18px;
+}
+.SchemaTreeEditor_root p {
+  margin: 0;
+}
+.SchemaTreeEditor_refBadge {
+  height: 20px;
+  border-radius: 4px;
+  background: var(--color-surface-subtle, #f8f9fa);
+  transition: background 120ms ease, color 120ms ease;
+}
+.SchemaTreeEditor_refBadge:hover,
+.SchemaTreeEditor_refBadge:focus-within,
+.SchemaTreeEditor_row:hover .SchemaTreeEditor_refBadge {
+  background: var(--color-info-soft, #edf3fb);
+  color: var(--color-info, #4f79bf);
+}
+.SchemaTreeEditor_refBadgeText {
+  display: inline;
+  margin: 0;
+  font-size: 11px;
+  line-height: 1;
+  color: inherit;
+}
+.SchemaTreeEditor_refBadgeIcon {
+  display: block;
+  width: 12px;
+  height: 12px;
+}
+.SchemaTreeEditor_typeStatic {
+  margin: 0;
+  line-height: 24px;
+}
+.SchemaTreeEditor_iconButton > svg {
+  width: 14px;
+  height: 14px;
+}
+.SchemaTreeEditor_headerCell:first-child {
+  padding-left: 26px;
+}
+.SchemaTreeEditor_headerCell:nth-child(2) {
+  padding-left: 8px;
+}
+.SchemaTreeEditor_headerCell:nth-child(4) {
+  padding-left: 4px;
+}
+.SchemaTreeEditor_referenceGroup:hover .SchemaTreeEditor_row,
+.SchemaTreeEditor_referenceGroup:focus-within .SchemaTreeEditor_row {
+  background: var(--color-info-soft, #f0f5ff);
+}
+.SchemaTreeEditor_referenceGroup:hover .SchemaTreeEditor_refBadge,
+.SchemaTreeEditor_referenceGroup:focus-within .SchemaTreeEditor_refBadge {
+  color: var(--color-info, #4f79bf);
+  background: transparent;
+}
+.SchemaTreeEditor_tableViewport {
+  overflow: auto;
+  min-height: 0;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+.SchemaTreeEditor_tableViewport:hover,
+.SchemaTreeEditor_tableViewport:focus-within {
+  scrollbar-color: var(--color-border-strong, #ccd2d8) transparent;
+}
+.SchemaTreeEditor_header,
+.SchemaTreeEditor_list {
+  min-width: var(--grid-min-width, 430px);
+}
+.SchemaTreeEditor_list {
+  overflow: visible;
+}
+@media (max-width: 480px) {
+  .SchemaTreeEditor_toolbar {
+    height: auto;
+    min-height: 36px;
+    flex-wrap: wrap;
+    padding-block: 4px;
+  }
+}
+
+/* src/react/variableTextEditor/VariableTextEditor.module.css */
+.VariableTextEditor_root {
+  --editor-min-height: 40px;
+  --editor-max-focused-height: 240px;
+  --editor-line-height: 24px;
+  --editor-padding-block: 4px;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--editor-min-height);
+  height: var(--editor-min-height);
+  overflow: hidden;
+  color: var(--color-text-primary, #202124);
+  background: transparent;
+  font-family:
+    var(--font-family-ui, Inter),
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace;
+  font-size: var(--font-size-sm, 13px);
+  line-height: var(--editor-line-height);
+}
+.VariableTextEditor_root[data-focused] {
+  height: var(--editor-focused-height, var(--editor-min-height));
+  max-height: var(--editor-max-focused-height);
+}
+.VariableTextEditor_root[data-wrapped] {
+  border-radius: var(--radius-sm, 4px);
+  background: var(--color-surface, #fff);
+  margin-left: 0;
+  margin-top: 0;
+  z-index: 1;
+  width: 100%;
+}
+.VariableTextEditor_root[data-disabled] {
+  color: var(--color-text-disabled, #9aa0a6);
+}
+.VariableTextEditor_root .cm-editor,
+.VariableTextEditor_root .cm-scroller {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  background: transparent;
+}
+.VariableTextEditor_root .cm-editor {
+  font: inherit;
+}
+.VariableTextEditor_root .cm-scroller {
+  padding-inline: var(--space-2, 8px);
+  overflow-x: hidden;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+.VariableTextEditor_root .cm-content {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: auto;
+  padding: 0;
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+  line-height: var(--editor-line-height);
+}
+.VariableTextEditor_root .cm-line {
+  font-family: var(--font-family-ui, Inter), sans-serif;
+  box-sizing: border-box;
+  width: auto;
+  min-width: 0;
+  min-height: var(--editor-min-height);
+  padding: 0;
+  font-size: var(--font-size-sm, 13px);
+  line-height: var(--editor-min-height);
+}
+.VariableTextEditor_root[data-focused] .cm-scroller {
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+.VariableTextEditor_root[data-focused] .cm-content {
+  width: 100%;
+  min-width: 0;
+  min-height: 0 !important;
+  height: auto !important;
+  padding-block: var(--editor-padding-block, 4px);
+  white-space: pre-wrap !important;
+  overflow-wrap: anywhere !important;
+  word-break: normal !important;
+  line-height: var(--editor-line-height);
+}
+.VariableTextEditor_root[data-focused] .cm-lineWrapping {
+  white-space: pre-wrap !important;
+  overflow-wrap: anywhere !important;
+  word-break: normal !important;
+}
+.VariableTextEditor_root[data-focused] .cm-line {
+  width: auto;
+  min-width: 0;
+  min-height: var(--editor-line-height);
+  line-height: var(--editor-line-height);
+  white-space: pre-wrap !important;
+  overflow-wrap: anywhere !important;
+  word-break: normal !important;
+  hyphens: manual;
+}
+.VariableTextEditor_root .cm-selectionLayer {
+  pointer-events: none;
+}
+.VariableTextEditor_root .cm-selectionBackground {
+  background: var( --pd-editor-selection-background, color-mix(in srgb, var(--color-info, #4f79bf) 24%, transparent) ) !important;
+}
+.VariableTextEditor_root .cm-focused .cm-selectionBackground {
+  background: var( --pd-editor-selection-background-focused, color-mix(in srgb, var(--color-info, #4f79bf) 34%, transparent) ) !important;
+}
+.VariableTextEditor_root .cm-cursorLayer {
+  z-index: 30;
+  pointer-events: none;
+}
+.VariableTextEditor_root .cm-cursor {
+  border-left: 1px solid currentColor;
+  display: none;
+  visibility: visible;
+  box-sizing: border-box;
+  margin-left: 0;
+  filter: drop-shadow(1px 0 0 var(--color-surface, #fff)) drop-shadow(-1px 0 0 var(--color-surface, #fff));
+  pointer-events: none;
+}
+.VariableTextEditor_root .cm-focused .cm-cursor {
+  display: block;
+}
+.VariableTextEditor_root .cm-fat-cursor {
+  background: currentColor;
+  color: var(--color-surface, #fff);
+}
+.VariableTextEditor_root .cm-tooltip-autocomplete {
+  z-index: 1500;
+  min-width: 220px;
+  max-width: min(360px, calc(100vw - 24px));
+  margin-top: 8px;
+  overflow: hidden;
+  color: var(--color-text-primary, #202124);
+  background: var(--color-surface, #fff);
+  border: 1px solid var(--color-border-default, #dadce0);
+  border-radius: var(--radius-md, 8px);
+  box-shadow: var(--shadow-lg, 0 12px 32px rgb(60 64 67 / 18%));
+}
+.VariableTextEditor_root .cm-tooltip-autocomplete > ul {
+  max-height: 280px;
+  padding: 4px;
+  overflow-y: auto;
+  font-family: var(--font-family-ui, Inter), sans-serif;
+  font-size: var(--font-size-sm, 13px);
+}
+.VariableTextEditor_root .cm-tooltip-autocomplete > ul > li {
+  min-height: 30px;
+  padding: 5px 8px;
+  border-radius: var(--radius-sm, 6px);
+}
+.VariableTextEditor_root .cm-tooltip-autocomplete > ul > li[aria-selected=true] {
+  color: var(--color-text-primary, #202124);
+  background: var(--color-surface-hover, #f1f3f4);
+}
+.VariableTextEditor_variableToken {
+  --token-color: unset;
+  --token-bg-color: unset;
+  color: var(--token-color);
+  background-color: var(--token-bg-color);
+  position: relative;
+  z-index: 1;
+  display: inline;
+  padding: 2px 0;
+  border-radius: var(--radius-sm, 4px);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  cursor: text;
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+.VariableTextEditor_variableToken_unknown {
+  color: var(--color-accent, #dc2626);
+}
+.VariableTextEditor_variableToken_environment {
+  color: var(--color-success, #15803d);
+}
+.VariableTextEditor_variableToken_secret {
+  color: var(--color-secret, #7c3aed);
+}
+.VariableTextEditor_variableToken_request {
+  color: var(--color-info, #2563eb);
+}
+.VariableTextEditor_variableToken_dynamic {
+  color: var(--color-dynamic, #1d4ed8);
+}
+.VariableTextEditor_hoverPopover {
+  position: fixed;
+  z-index: 1600;
+  box-sizing: border-box;
+  width: min(360px, calc(100vw - 24px));
+  padding: 14px;
+  color: var(--color-text-primary, #202124);
+  background: var(--color-surface, #fff);
+  border: 1px solid var(--color-border-default, #dadce0);
+  border-radius: var(--radius-lg, 10px);
+  box-shadow: var(--shadow-lg, 0 12px 32px rgb(60 64 67 / 20%));
+  isolation: isolate;
+  pointer-events: auto;
+}
+.VariableTextEditor_hoverPopover[data-placement=bottom]::before,
+.VariableTextEditor_hoverPopover[data-placement=top]::before {
+  position: absolute;
+  right: -8px;
+  left: -8px;
+  height: 12px;
+  content: "";
+  pointer-events: auto;
+}
+.VariableTextEditor_hoverPopover[data-placement=bottom]::before {
+  top: -16px;
+}
+.VariableTextEditor_hoverPopover[data-placement=top]::before {
+  bottom: -16px;
+}
+.VariableTextEditor_hoverPopoverArrow {
+  position: absolute;
+  left: var(--popover-arrow-left, 50%);
+  width: 11px;
+  height: 11px;
+  background: var(--color-surface, #fff);
+  pointer-events: none;
+}
+.VariableTextEditor_hoverPopover[data-placement=bottom] .VariableTextEditor_hoverPopoverArrow {
+  top: -6px;
+  border-top: 1px solid var(--color-border-default, #dadce0);
+  border-left: 1px solid var(--color-border-default, #dadce0);
+  transform: translateX(-50%) rotate(45deg);
+}
+.VariableTextEditor_hoverPopover[data-placement=top] .VariableTextEditor_hoverPopoverArrow {
+  bottom: -6px;
+  border-right: 1px solid var(--color-border-default, #dadce0);
+  border-bottom: 1px solid var(--color-border-default, #dadce0);
+  transform: translateX(-50%) rotate(45deg);
+}
+.VariableTextEditor_popoverHeader {
+  font-weight: var(--font-weight-semibold, 600);
+}
+.VariableTextEditor_popoverType {
+  color: var(--color-text-tertiary, #80868b);
+  font-size: var(--font-size-xs, 12px);
+  text-transform: capitalize;
+}
+.VariableTextEditor_popoverValue {
+  box-sizing: border-box;
+  width: 100%;
+  max-height: 180px;
+  margin-top: 5px;
+  padding: 7px 9px;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  color: var(--color-text-primary, #202124);
+  background: var(--color-surface-subtle, #f8f9fa);
+  border-radius: var(--radius-sm, 6px);
+  font-family: var(--font-family-ui, Inter), sans-serif;
+  white-space: pre-wrap;
+}
+.VariableTextEditor_popoverDesc {
+  color: var(--color-text-secondary, #5f6368);
+  font-size: var(--font-size-sm, 13px);
+  overflow-wrap: anywhere;
+}
+.VariableTextEditor_root[data-focused] {
+  border-radius: 0;
+  background: var(--color-surface, #fff);
+  box-shadow: inset 0 0 0 1px var(--color-border-strong, #ccd2d8);
+}
+.VariableTextEditor_root .cm-focused {
+  outline: none;
+}
+.VariableTextEditor_root[data-focused] .cm-scroller {
+  overflow-y: auto;
+}
+.VariableTextEditor_root[data-focused]:hover .cm-scroller,
+.VariableTextEditor_root[data-focused]:focus-within .cm-scroller {
+  scrollbar-color: var(--color-border-strong, #ccd2d8) transparent;
+}
+.VariableTextEditor_hoverPopover {
+  max-height: calc(100dvh - 24px);
+  overflow: auto;
+}
+.VariableTextEditor_root[data-focused][data-multiline] .cm-line {
+  position: relative;
+}
+.VariableTextEditor_root[data-focused][data-multiline] .cm-line:has(> br:only-child)::before {
+  content: "\21b5";
+  position: absolute;
+  color: var(--color-text-tertiary, #989da5);
+  pointer-events: none;
+  user-select: none;
+}
+
+/* src/react/parametersTable/ParametersTable.module.css */
+.ParametersTable_root {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--radius-md, 6px);
+  background: var(--color-surface, #ffffff);
+  color: var(--color-text-primary, #26282b);
+  font-family: var( --font-family-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif );
+  font-size: var(--font-size-sm, 13px);
+  line-height: var(--line-height-normal, 20px);
+}
+.ParametersTable_tableViewport {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  background: var(--color-surface, #ffffff);
+}
+.ParametersTable_tableContainer {
+  position: relative;
+  width: 100%;
+  min-width: 100%;
+}
+.ParametersTable_table {
+  width: 100%;
+  min-width: 100%;
+  max-width: none;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.ParametersTable_colCheckbox {
+  width: 48px !important;
+  min-width: 48px !important;
+  max-width: 48px !important;
+}
+.ParametersTable_colData {
+  min-width: 0;
+}
+.ParametersTable_headerCell {
+  position: sticky;
+  z-index: 3;
+  top: 0;
+  height: var(--control-height-md, 32px);
+  padding: 0 var(--space-2, 8px);
+  border-bottom: 1px solid var(--color-border-default, #e0e4e8);
+  background: var(--color-surface-subtle, #f8f9fa);
+  color: var(--color-text-secondary, #6f747c);
+  font-size: var(--font-size-xs, 12px);
+  font-weight: var(--font-weight-semibold, 600);
+  line-height: var(--line-height-tight, 16px);
+  text-align: left;
+  white-space: nowrap;
+  user-select: none;
+}
+.ParametersTable_headerCell.ParametersTable_dragCell,
+.ParametersTable_headerCell.ParametersTable_checkboxCell {
+  padding: 0;
+}
+.ParametersTable_headerContent {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2, 8px);
+}
+.ParametersTable_headerLabel {
+  min-width: 0;
+  padding-left: var(--space-2, 8px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-md, 14px);
+}
+.ParametersTable_resizeHandle {
+  position: absolute;
+  top: 0;
+  right: -1px;
+  z-index: 5;
+  width: 12px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+  user-select: none;
+}
+.ParametersTable_resizeHandle::after {
+  position: absolute;
+  top: 50%;
+  right: 3px;
+  width: 3px;
+  height: 14px;
+  border-radius: 999px;
+  background: transparent;
+  content: "";
+  transform: translateY(-50%);
+  transition: background var(--transition-fast, 140ms ease), height var(--transition-fast, 140ms ease);
+}
+.ParametersTable_resizeHandle:hover::after,
+.ParametersTable_resizeHandle[data-resizing=true]::after {
+  height: 20px;
+  background: var(--color-accent, #f28c28);
+}
+.ParametersTable_root:has(.ParametersTable_resizeHandle[data-resizing=true]) {
+  user-select: none;
+}
+.ParametersTable_root:has(.ParametersTable_resizeHandle[data-resizing=true]) .ParametersTable_table {
+  cursor: col-resize;
+}
+.ParametersTable_variableTextEditor {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+  min-height: 32px;
+  padding-block: 2px;
+  box-sizing: border-box;
+}
+.ParametersTable_row {
+  height: 32px;
+  background: var(--color-surface, #ffffff);
+  transition: background var(--transition-fast, 140ms ease), opacity var(--transition-fast, 140ms ease);
+}
+.ParametersTable_row,
+.ParametersTable_cell {
+  min-width: 0;
+}
+.ParametersTable_row:hover {
+  background: var(--color-surface-hover, #f4f5f6);
+}
+.ParametersTable_row[data-dragging=true] {
+  opacity: 0.45;
+}
+.ParametersTable_cell {
+  position: relative;
+  height: 32px;
+  min-width: 0;
+  padding: 0 var(--space-2, 8px);
+  border-bottom: 1px solid var(--color-border-subtle, #eceff1);
+  color: var(--color-text-primary, #26282b);
+  vertical-align: top;
+}
+.ParametersTable_nameCell {
+  min-width: 0;
+}
+.ParametersTable_checkboxCell {
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  padding: 0;
+  text-align: center;
+}
+.ParametersTable_checkboxCellGroup {
+  display: flex;
+  width: 48px;
+  height: 32px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0;
+  margin: 0;
+}
+.ParametersTable_checkboxRoot {
+  display: inline-flex;
+  width: 22px;
+  min-width: 22px;
+  max-width: 22px;
+  height: 22px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--space-2, 8px);
+}
+.ParametersTable_checkboxRoot [data-checked=true] {
+  color: var(--color-on-accent, #ffffff);
+}
+.ParametersTable_checkboxRoot .ParametersTable_chakra-checkbox__control,
+.ParametersTable_checkboxRoot [data-state=unchecked] {
+  border-color: var(--color-border-strong, #ccd2d8);
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.ParametersTable_checkboxRoot [data-checked=true],
+.ParametersTable_checkboxRoot [data-state=checked] {
+  background: var(--color-accent, #f28c28);
+  border-color: var(--color-accent, #f28c28);
+  border-radius: 6px;
+  cursor: pointer;
+}
+.ParametersTable_checkboxRoot [data-checked=mixed],
+.ParametersTable_checkboxRoot [data-state=indeterminate] {
+  background: var(--color-accent, #f28c28);
+  border-color: var(--color-accent, #f28c28);
+  border-radius: 6px;
+  cursor: pointer;
+}
+.ParametersTable_checkboxRoot:focus-visible {
+  outline: 2px solid var(--color-focus-ring, rgba(242, 140, 40, 0.28));
+  outline-offset: 2px;
+  border-radius: var(--radius-xs, 3px);
+}
+.ParametersTable_dragHandleWrap {
+  display: flex;
+  width: 28px;
+  min-width: 28px;
+  max-width: 28px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+}
+.ParametersTable_dragHandle {
+  display: none;
+  width: 28px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-text-tertiary, #989da5);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+.ParametersTable_row:hover .ParametersTable_dragHandle {
+  display: inline-flex;
+}
+.ParametersTable_dragHandle:hover {
+  color: var(--color-text-secondary, #6f747c);
+}
+.ParametersTable_dragHandle:active {
+  cursor: grabbing;
+}
+.ParametersTable_description {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-secondary, #6f747c);
+  font-size: var(--font-size-xs, 12px);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ParametersTable_required {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-accent, #d97818);
+  font-size: var(--font-size-xs, 12px);
+  font-weight: var(--font-weight-semibold, 600);
+}
+.ParametersTable_optional {
+  color: var(--color-text-tertiary, #989da5);
+  font-size: var(--font-size-xs, 12px);
+}
+.ParametersTable_name {
+  overflow: hidden;
+  color: var(--color-text-primary, #26282b);
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace;
+  font-size: var(--font-size-sm, 13px);
+  font-weight: var(--font-weight-medium, 500);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ParametersTable_empty {
+  display: flex;
+  min-height: 160px;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8, 32px);
+  color: var(--color-text-tertiary, #989da5);
+  font-size: var(--font-size-sm, 13px);
+}
+.ParametersTable_actionBarContent {
+  display: flex;
+  min-height: 32px;
+  align-items: center;
+  gap: 10px;
+  padding: var(--space-1, 4px);
+  border: 1px solid var(--color-border-default, #e0e4e8);
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-surface, #ffffff);
+  box-shadow: var( --shadow-sm, 0 1px 2px rgba(28, 32, 36, 0.035), 0 1px 3px rgba(28, 32, 36, 0.025) );
+}
+.ParametersTable_actionBarLeft {
+  display: flex;
+  align-items: center;
+}
+.ParametersTable_actionBarTrigger {
+  border: 0;
+  color: var(--color-text-primary, #26282b);
+  font-size: var(--font-size-xs, 12px);
+  font-weight: var(--font-weight-semibold, 600);
+}
+.ParametersTable_actionBarDivider {
+  width: 1px;
+  height: 18px;
+  border-radius: 9999px;
+  background: var(--color-border-subtle, #eceff1);
+}
+.ParametersTable_actionButton {
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-full, 9999px);
+  color: var(--color-text-primary, #26282b);
+  font-size: var(--font-size-xs, 12px);
+  font-weight: var(--font-weight-medium, 500);
+}
+.ParametersTable_actionButton:hover {
+  border-color: var(--color-border-subtle, #eceff1);
+  background: var(--color-surface-hover, #f4f5f6);
+}
+.ParametersTable_actionButtonAccent {
+  color: var(--color-text-accent, #d97818);
+}
+.ParametersTable_actionButtonAccent:hover {
+  border-color: var(--color-accent-border, #f5c98f);
+  background: var(--color-accent-bg-subtle, #fffaf5);
+  color: var(--color-accent-hover, #e47c16);
+}
+.ParametersTable_actionIcon {
+  flex: 0 0 auto;
+  margin-right: 6px;
+  font-size: 12px;
+}
+@media (max-width: 640px) {
+  .ParametersTable_headerCell {
+    padding: 0 var(--space-1, 4px);
+  }
+  .ParametersTable_cell {
+    padding: 0 var(--space-1, 4px);
+  }
+  .ParametersTable_headerLabel {
+    padding-left: var(--space-1, 4px);
+  }
+}
+.ParametersTable_variableTextEditor > [data-scope=checkbox] {
+  flex: 0 0 22px;
+}
+.ParametersTable_variableTextEditor > button {
+  flex-shrink: 0;
+}
+.ParametersTable_variableTextEditor > div {
+  flex: 1;
+  min-width: 0;
+}
+.ParametersTable_row:focus-within .ParametersTable_dragHandle {
+  display: inline-flex;
+}
+.ParametersTable_cell select {
+  height: 26px;
+  min-height: 26px;
+  font-size: 12px;
+  border-color: transparent;
+  background: transparent;
+}
+.ParametersTable_cell select:hover,
+.ParametersTable_cell select:focus-visible {
+  border-color: var(--color-border-default, #e0e4e8);
+}
+.ParametersTable_variableTextEditor > button {
+  color: var(--color-text-secondary, #6f747c);
+}
+.ParametersTable_root[data-sticky-header=false] .ParametersTable_headerCell {
+  position: static;
+}
+.ParametersTable_tableViewport {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  overscroll-behavior: contain;
+}
+.ParametersTable_tableViewport:hover,
+.ParametersTable_tableViewport:focus-within {
+  scrollbar-color: var(--color-border-strong, #ccd2d8) transparent;
+}
+.ParametersTable_cell [data-scope=select][data-part=trigger] {
+  height: 28px;
+  min-height: 28px;
+  padding: 0 8px;
+  font-size: 12px;
+  background: transparent;
+  border-color: transparent;
+  color: var(--color-text-primary, #26282b);
+}
+.ParametersTable_cell [data-scope=select][data-part=trigger]:hover {
+  border-color: var(--color-border-default, #e0e4e8);
+}
+@media (hover: none) {
+  .ParametersTable_dragHandle {
+    display: inline-flex;
+  }
+}
+.ParametersTable_resizeHandle:focus-visible {
+  outline: 2px solid var(--color-focus-ring, #f5c98f);
+  outline-offset: -2px;
+}