@powerduck/schema-designer 0.1.0

package/dist/compat/parameters.css

@@ -0,0 +1,997 @@
+/* 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/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;
+}