@workbench-kit/shell-react 0.0.2-prototype.0.2.10

package/src/field-remap/view.css

@@ -0,0 +1,1367 @@
+.workbench-field-remap-view {
+  height: 100%;
+}
+
+.workbench-field-remap-view__list {
+  padding: 0.5rem;
+}
+
+.workbench-field-remap-editor-surface {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  align-self: stretch;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  color: var(--vscode-editor-foreground, var(--color-text));
+  background: var(--vscode-editor-background, var(--color-bg));
+}
+
+.workbench-field-remap-demo {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  padding: 1.25rem 1.5rem;
+  color: var(--vscode-editor-foreground, var(--color-text));
+}
+
+.workbench-field-remap-demo__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.workbench-field-remap-demo__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--vscode-editor-foreground, var(--color-text));
+}
+
+.workbench-field-remap-demo__intro {
+  margin: 0;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
+.workbench-field-remap-demo__intro code {
+  font-size: 0.8em;
+}
+
+.workbench-field-remap-demo__error {
+  margin: 0;
+  color: var(--vscode-errorForeground, var(--color-danger));
+  font-size: 0.875rem;
+}
+
+.workbench-field-remap-demo__warn {
+  margin: 0;
+  color: var(--vscode-editorWarning-foreground, var(--color-warning, #b89500));
+  font-size: 0.875rem;
+}
+
+.workbench-field-remap-demo__panes {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (max-width: 800px) {
+  .workbench-field-remap-demo__panes {
+    grid-template-columns: 1fr;
+  }
+}
+
+.workbench-field-remap-demo__pane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.workbench-field-remap-demo__pane h3 {
+  margin: 0;
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-demo__pane pre {
+  margin: 0;
+  padding: 0.75rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.375rem;
+  background: var(--vscode-input-background, var(--color-input-bg, var(--color-surface)));
+  color: var(--vscode-editor-foreground, var(--color-text));
+  font-size: 0.8rem;
+  line-height: 1.4;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(
+    --vscode-editor-font-family,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace
+  );
+}
+
+.workbench-field-remap-mapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 22rem;
+  padding: 0.75rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.375rem;
+  background: var(--color-surface);
+}
+
+.workbench-field-remap-mapper__hint {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-mapper__columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  min-height: 14rem;
+}
+
+.workbench-field-remap-graph {
+  display: grid;
+  grid-template-columns: minmax(10rem, 1fr) minmax(18rem, 2.2fr) minmax(10rem, 1fr);
+  gap: 0.75rem;
+  min-height: 16rem;
+  align-items: stretch;
+}
+
+@media (max-width: 960px) {
+  .workbench-field-remap-graph {
+    grid-template-columns: 1fr;
+  }
+}
+
+.workbench-field-remap-graph__center {
+  min-width: 0;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.25rem;
+  background: var(--vscode-editor-background, var(--color-bg));
+  overflow: auto;
+}
+
+.workbench-field-remap-graph__empty {
+  margin: 0;
+  padding: 0.75rem;
+  font-size: 0.8rem;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-graph__keys {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0;
+}
+
+.workbench-field-remap-graph__key {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  width: calc(100% - 0.5rem);
+  margin: 0.1rem 0.25rem;
+  padding: 0.25rem 0.4rem;
+  border: 0;
+  border-radius: 0.2rem;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.workbench-field-remap-graph__key:hover {
+  background: var(--vscode-list-hoverBackground, rgba(127, 127, 127, 0.12));
+}
+
+.workbench-field-remap-graph__key.is-selected {
+  background: var(--vscode-list-activeSelectionBackground, var(--color-accent-muted, #2a4a6a));
+  color: var(--vscode-list-activeSelectionForeground, var(--color-text));
+}
+
+.workbench-field-remap-graph__key.is-mapped {
+  font-weight: 600;
+}
+
+.workbench-field-remap-graph__lanes {
+  list-style: none;
+  margin: 0;
+  padding: 0.4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.workbench-field-remap-graph__lane {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.45rem 0.5rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.25rem;
+  background: var(--color-surface);
+}
+
+.workbench-field-remap-graph__lane.is-selected {
+  border-color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
+}
+
+.workbench-field-remap-graph__endpoint {
+  max-width: 8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0.2rem 0.4rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.2rem;
+  background: var(--vscode-editor-background, var(--color-bg));
+  color: inherit;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+
+.workbench-field-remap-graph__arrow {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: 0.85rem;
+}
+
+.workbench-field-remap-graph__nodes {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.workbench-field-remap-graph__passthrough {
+  padding: 0.15rem 0.4rem;
+  border: 1px dashed var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.2rem;
+  font-size: 0.72rem;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-graph__node {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.35rem;
+  border: 1px solid var(--vscode-focusBorder, var(--color-accent, #3794ff));
+  border-radius: 0.25rem;
+  background: var(--vscode-editor-background, var(--color-bg));
+}
+
+.workbench-field-remap-graph__node select,
+.workbench-field-remap-graph__node input {
+  max-width: 7.5rem;
+  padding: 0.15rem 0.25rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.15rem;
+  background: var(--color-surface);
+  color: inherit;
+  font-size: 0.72rem;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.workbench-field-remap-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.workbench-field-remap-flow__workspace {
+  display: grid;
+  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr) minmax(16rem, 20rem);
+  gap: 0.75rem;
+  min-width: 0;
+  align-items: stretch;
+}
+
+@media (max-width: 1100px) {
+  .workbench-field-remap-flow__workspace {
+    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
+  }
+
+  .workbench-field-remap-convert-palette {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 960px) {
+  .workbench-field-remap-flow__workspace {
+    grid-template-columns: 1fr;
+  }
+}
+
+.workbench-field-remap-convert-palette {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  min-width: 0;
+  padding: 0.75rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.375rem;
+  background: var(--vscode-sideBar-background, var(--color-surface, var(--color-bg)));
+}
+
+.workbench-field-remap-convert-palette__header h3,
+.workbench-field-remap-convert-palette__operators h4 {
+  margin: 0 0 0.35rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.workbench-field-remap-convert-palette__header p,
+.workbench-field-remap-convert-palette__operators p {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-convert-palette__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-height: min(22rem, 45vh);
+  overflow: auto;
+}
+
+.workbench-field-remap-convert-palette__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.15rem;
+  width: 100%;
+  margin: 0;
+  padding: 0.45rem 0.5rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.25rem;
+  background: var(--vscode-editor-background, var(--color-bg));
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+}
+
+.workbench-field-remap-convert-palette__item.is-selected {
+  border-color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
+}
+
+.workbench-field-remap-convert-palette__item code {
+  font-size: 0.7rem;
+  word-break: break-all;
+}
+
+.workbench-field-remap-convert-palette__operators {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.workbench-field-remap-convert-palette__operator-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.workbench-field-remap-detail__draft-ports {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.workbench-field-remap-detail__draft-ports dt {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-detail__draft-ports dd {
+  margin: 0;
+}
+
+.workbench-field-remap-flow__canvas {
+  height: min(40rem, 70vh);
+  min-height: 26rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.375rem;
+  overflow: hidden;
+  background: var(--vscode-editor-background, var(--color-bg));
+}
+
+/* XYFlow default chrome is light; bind Controls / MiniMap / dots to host tokens. */
+.workbench-field-remap-flow__canvas .react-flow {
+  --xy-background-color: var(--vscode-editor-background, var(--color-bg));
+  --xy-background-pattern-color: var(--vscode-editorIndentGuide-background, var(--color-border));
+  --xy-controls-button-background-color: var(
+    --vscode-button-secondaryBackground,
+    var(--color-surface)
+  );
+  --xy-controls-button-background-color-hover: var(
+    --vscode-button-secondaryHoverBackground,
+    var(--color-bg-muted, var(--color-surface))
+  );
+  --xy-controls-button-color: var(--vscode-foreground, var(--color-text));
+  --xy-controls-button-color-hover: var(--vscode-foreground, var(--color-text));
+  --xy-controls-button-border-color: var(--vscode-panel-border, var(--color-border));
+  --xy-controls-box-shadow: none;
+  --xy-minimap-background-color: var(--vscode-editorWidget-background, var(--color-surface));
+  --xy-minimap-mask-background-color: color-mix(
+    in srgb,
+    var(--vscode-editor-background, var(--color-bg)) 62%,
+    transparent
+  );
+  --xy-minimap-node-background-color: var(
+    --vscode-badge-background,
+    var(--color-bg-muted, #3c3c3c)
+  );
+  --xy-minimap-node-stroke-color: var(--vscode-panel-border, var(--color-border));
+  --xy-attribution-background-color: transparent;
+}
+
+.workbench-field-remap-flow__canvas .react-flow__controls {
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.35rem;
+  overflow: hidden;
+  box-shadow: none;
+}
+
+.workbench-field-remap-flow__canvas .react-flow__controls-button {
+  background: var(--xy-controls-button-background-color);
+  border-bottom-color: var(--vscode-panel-border, var(--color-border));
+  fill: var(--xy-controls-button-color);
+}
+
+.workbench-field-remap-flow__canvas .react-flow__controls-button:hover {
+  background: var(--xy-controls-button-background-color-hover);
+}
+
+.workbench-field-remap-flow__canvas .react-flow__controls-button svg {
+  fill: currentColor;
+  max-width: 12px;
+  max-height: 12px;
+}
+
+.workbench-field-remap-flow__canvas .react-flow__minimap {
+  margin: 0.5rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.35rem;
+  overflow: hidden;
+  box-shadow: none;
+}
+
+.workbench-field-remap-flow__canvas .react-flow__node {
+  font-size: 0.8rem;
+}
+
+.workbench-field-remap-flow-node {
+  min-width: 9.5rem;
+  max-width: 14rem;
+  padding: 0.45rem 0.55rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.35rem;
+  background: var(--color-surface);
+  color: var(--vscode-editor-foreground, var(--color-text));
+  box-shadow: none;
+}
+
+.workbench-field-remap-flow-node--object {
+  min-width: 12.5rem;
+  max-width: 18rem;
+  padding: 0.4rem 0.35rem 0.45rem;
+}
+
+.workbench-field-remap-flow-node--source {
+  border-left: 3px solid var(--vscode-charts-blue, #3794ff);
+}
+
+.workbench-field-remap-flow-node--target {
+  border-right: 3px solid var(--vscode-charts-green, #89d185);
+}
+
+.workbench-field-remap-flow-node--transform {
+  border-color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
+  background: var(--vscode-editor-background, var(--color-bg));
+}
+
+.workbench-field-remap-flow-node--transform.is-selected {
+  outline: 2px solid var(--vscode-focusBorder, var(--color-accent, #3794ff));
+  outline-offset: 1px;
+}
+
+.workbench-field-remap-flow-node__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.35rem 0.5rem;
+  padding: 0.15rem 0.45rem 0.35rem;
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+  margin-bottom: 0.2rem;
+}
+
+.workbench-field-remap-flow-node__header strong {
+  font-size: 0.85rem;
+}
+
+.workbench-field-remap-flow-node__header .workbench-field-remap-flow-node__hint {
+  margin-left: auto;
+}
+
+.workbench-field-remap-flow-node__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.35rem;
+  font-weight: 600;
+}
+
+.workbench-field-remap-flow-node__hint {
+  display: block;
+  font-size: 0.65rem;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.workbench-field-remap-flow-node__id {
+  display: block;
+  margin-top: 0.2rem;
+  font-size: 0.68rem;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-flow-node__ports {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.workbench-field-remap-flow-node__port {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 1.55rem;
+  padding: 0.15rem 0.7rem;
+  gap: 0.35rem;
+}
+
+.workbench-field-remap-flow-node--source .workbench-field-remap-flow-node__port {
+  justify-content: flex-end;
+}
+
+.workbench-field-remap-flow-node--target .workbench-field-remap-flow-node__port {
+  justify-content: flex-start;
+}
+
+.workbench-field-remap-flow-node__port-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  min-width: 0;
+  font-size: 0.78rem;
+  line-height: 1.2;
+}
+
+.workbench-field-remap-flow-node__port-label > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workbench-field-remap-flow-node__handle {
+  width: 8px !important;
+  height: 8px !important;
+  border-width: 1px !important;
+  background: var(--vscode-focusBorder, var(--color-accent, #3794ff)) !important;
+}
+
+.workbench-field-remap-flow-node--source .workbench-field-remap-flow-node__handle {
+  right: -5px !important;
+}
+
+.workbench-field-remap-flow-node--target .workbench-field-remap-flow-node__handle {
+  left: -5px !important;
+}
+
+.workbench-field-remap-flow__bindings h4 {
+  margin: 0 0 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-flow__bindings ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.workbench-field-remap-flow__bindings li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: 0.25rem;
+  background: var(--color-surface);
+  font-size: 0.8rem;
+}
+
+.workbench-field-remap-flow__bindings li.is-selected {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-accent, #3794ff));
+}
+
+.workbench-field-remap-flow__binding-select {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+}
+
+.workbench-field-remap-detail,
+.workbench-field-remap-convert-note {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+  min-height: 26rem;
+  max-height: min(40rem, 70vh);
+  overflow: auto;
+  padding: 0.75rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.375rem;
+  background: var(--vscode-sideBar-background, var(--color-surface));
+  font-size: 0.8rem;
+}
+
+.workbench-field-remap-convert-note {
+  border-color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
+  background: var(--vscode-editor-background, var(--color-bg));
+}
+
+.workbench-field-remap-convert-note__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.workbench-field-remap-convert-note__eyebrow {
+  margin: 0 0 0.2rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
+}
+
+.workbench-field-remap-convert-note__header h4,
+.workbench-field-remap-convert-note__section h5 {
+  margin: 0 0 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-convert-note__header h4 {
+  font-size: 1rem;
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--vscode-foreground, var(--color-text));
+}
+
+.workbench-field-remap-convert-note__binding,
+.workbench-field-remap-convert-note__muted {
+  display: block;
+  margin: 0.15rem 0 0;
+  font-size: 0.75rem;
+  word-break: break-all;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-convert-note__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.workbench-field-remap-convert-note__section,
+.workbench-field-remap-convert-note__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.workbench-field-remap-convert-note__field {
+  gap: 0.2rem;
+}
+
+.workbench-field-remap-convert-note select {
+  box-sizing: border-box;
+  width: 100%;
+  margin-top: 0.2rem;
+  padding: 0.3rem 0.4rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.25rem;
+  background: var(--vscode-input-background, var(--color-bg));
+  color: var(--vscode-input-foreground, var(--color-text));
+  font: inherit;
+}
+
+.workbench-field-remap-convert-note__footer {
+  margin-top: auto;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.workbench-field-remap-detail--empty {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-detail__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.workbench-field-remap-detail__header h4,
+.workbench-field-remap-detail__section h5 {
+  margin: 0 0 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-detail__header code,
+.workbench-field-remap-detail__steps code {
+  font-size: 0.75rem;
+  word-break: break-all;
+}
+
+.workbench-field-remap-detail__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.workbench-field-remap-detail__muted {
+  margin: 0;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-detail__steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.workbench-field-remap-detail__steps li {
+  display: flex;
+  align-items: stretch;
+  gap: 0.35rem;
+}
+
+.workbench-field-remap-detail__step {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.15rem;
+  margin: 0;
+  padding: 0.4rem 0.5rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.25rem;
+  background: var(--vscode-editor-background, var(--color-bg));
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+}
+
+.workbench-field-remap-detail__step.is-selected {
+  border-color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
+}
+
+.workbench-field-remap-detail__step-hint {
+  font-size: 0.7rem;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-detail__palette,
+.workbench-field-remap-detail__item-pickers,
+.workbench-field-remap-detail__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.workbench-field-remap-detail__palette {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
+
+.workbench-field-remap-detail__palette label,
+.workbench-field-remap-detail__item-pickers label,
+.workbench-field-remap-detail__field {
+  flex: 1 1 10rem;
+  min-width: 0;
+}
+
+.workbench-field-remap-detail select,
+.workbench-field-remap-options input[type='text'],
+.workbench-field-remap-options input[type='number'],
+.workbench-field-remap-options textarea {
+  box-sizing: border-box;
+  width: 100%;
+  margin-top: 0.2rem;
+  padding: 0.3rem 0.4rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.25rem;
+  background: var(--vscode-input-background, var(--color-bg));
+  color: var(--vscode-input-foreground, var(--color-text));
+  font: inherit;
+}
+
+.workbench-field-remap-detail__list-context-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.workbench-field-remap-detail__item-edges {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.workbench-field-remap-detail__item-edges li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.35rem;
+}
+
+.workbench-field-remap-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.workbench-field-remap-options__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.workbench-field-remap-options__label {
+  font-size: 0.75rem;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-options__empty,
+.workbench-field-remap-options__error {
+  margin: 0;
+  font-size: 0.75rem;
+}
+
+.workbench-field-remap-options__error {
+  color: var(--vscode-errorForeground, var(--color-danger));
+}
+
+.workbench-field-remap-options__string-map-rows {
+  list-style: none;
+  margin: 0 0 0.35rem;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.workbench-field-remap-options__string-map-rows li,
+.workbench-field-remap-options__string-map-add {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.workbench-field-remap-tree {
+  min-width: 0;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.25rem;
+  background: var(--vscode-editor-background, var(--color-bg));
+  overflow: auto;
+}
+
+.workbench-field-remap-tree__title {
+  margin: 0;
+  padding: 0.5rem 0.65rem;
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-tree__list,
+.workbench-field-remap-tree__list ul {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0;
+}
+
+.workbench-field-remap-tree__row {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  min-height: 1.75rem;
+}
+
+.workbench-field-remap-tree__row.is-selected .workbench-field-remap-tree__node {
+  background: var(--vscode-list-activeSelectionBackground, var(--color-accent-muted, #2a4a6a));
+  color: var(--vscode-list-activeSelectionForeground, var(--color-text));
+}
+
+.workbench-field-remap-tree__row.is-mapped .workbench-field-remap-tree__label {
+  font-weight: 600;
+}
+
+.workbench-field-remap-tree__twistie,
+.workbench-field-remap-tree__twistie-spacer {
+  width: 1.1rem;
+  flex: 0 0 1.1rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 0.7rem;
+  line-height: 1;
+  padding: 0;
+  cursor: pointer;
+}
+
+.workbench-field-remap-tree__twistie-spacer {
+  cursor: default;
+}
+
+.workbench-field-remap-tree__node {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex: 1;
+  min-width: 0;
+  margin: 0 0.25rem 0 0;
+  padding: 0.2rem 0.4rem;
+  border: 0;
+  border-radius: 0.2rem;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.workbench-field-remap-tree__node:hover {
+  background: var(
+    --vscode-list-hoverBackground,
+    var(--color-surface-hover, rgba(127, 127, 127, 0.12))
+  );
+}
+
+.workbench-field-remap-tree__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.85rem;
+}
+
+.workbench-field-remap-mapper__list-context {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem 0.65rem;
+  border: 1px solid var(--vscode-focusBorder, var(--color-accent, #3794ff));
+  border-radius: 0.25rem;
+}
+
+.workbench-field-remap-mapper__list-context-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.workbench-field-remap-mapper__edges-panel h4 {
+  margin: 0 0 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-mapper__edges {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.workbench-field-remap-mapper__edges li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: 0.25rem;
+  background: var(--vscode-editor-background, var(--color-bg));
+  font-size: 0.8rem;
+}
+
+.workbench-field-remap-mapper__edges code {
+  font-size: 0.78rem;
+  word-break: break-all;
+}
+
+.workbench-field-remap-mapper__edge-actions {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.workbench-field-remap-flow-node--draft {
+  border-style: dashed;
+  opacity: 0.95;
+}
+
+.workbench-field-remap-flow-node--draft .workbench-field-remap-flow-node__title {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.workbench-field-remap-flow-node--operator {
+  min-width: 11rem;
+  border-color: var(--vscode-charts-orange, #d18616);
+}
+
+.workbench-field-remap-flow-node--operator .workbench-field-remap-flow-node__title {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-bottom: 0.35rem;
+}
+
+.workbench-field-remap-flow-node--operator .workbench-field-remap-flow-node__port--out,
+.workbench-field-remap-flow-node--operator .workbench-field-remap-flow-node__port--in {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 0.35rem;
+}
+
+.workbench-field-remap-flow-node--operator .workbench-field-remap-flow-node__port--out {
+  justify-content: flex-end;
+}
+
+.workbench-field-remap-demo__shapes {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (max-width: 800px) {
+  .workbench-field-remap-demo__shapes {
+    grid-template-columns: 1fr;
+  }
+}
+
+.workbench-field-remap-shape-io {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  min-width: 0;
+  padding: 0.75rem;
+  border: 1px solid var(--vscode-panel-border, var(--color-border));
+  border-radius: 0.375rem;
+  background: var(--color-surface);
+}
+
+.workbench-field-remap-shape-io__header h3 {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.workbench-field-remap-shape-io__hint {
+  margin: 0.25rem 0 0;
+  font-size: 0.8rem;
+  line-height: 1.4;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-shape-io__json-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  font-size: 0.8rem;
+}
+
+.workbench-field-remap-shape-io__json {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 8rem;
+  margin: 0;
+  padding: 0.65rem;
+  border: 1px solid var(--vscode-input-border, var(--color-border));
+  border-radius: 0.25rem;
+  background: var(--vscode-input-background, var(--color-input-bg, var(--color-bg)));
+  color: var(--vscode-input-foreground, var(--color-text));
+  font-family: var(
+    --vscode-editor-font-family,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Consolas,
+    monospace
+  );
+  font-size: 0.78rem;
+  line-height: 1.4;
+  resize: vertical;
+}
+
+.workbench-field-remap-shape-io__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.workbench-field-remap-shape-io__error {
+  margin: 0;
+  color: var(--vscode-errorForeground, var(--color-danger));
+  font-size: 0.8rem;
+}
+
+.workbench-field-remap-shape-io__fields {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-height: 14rem;
+  overflow: auto;
+}
+
+.workbench-field-remap-shape-io__field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: 0.25rem;
+  background: var(--vscode-editor-background, var(--color-bg));
+}
+
+.workbench-field-remap-shape-io__field-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+  font-size: 0.78rem;
+}
+
+.workbench-field-remap-shape-io__field-meta code {
+  word-break: break-all;
+}
+
+.workbench-field-remap-shape-io__type {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.78rem;
+}
+
+.workbench-field-remap-shape-io__type-label {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-shape-io__type select {
+  min-width: 7rem;
+}
+
+.workbench-field-remap-io-browse {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  width: 100%;
+}
+
+@media (max-width: 800px) {
+  .workbench-field-remap-io-browse {
+    grid-template-columns: 1fr;
+  }
+}
+
+.workbench-field-remap-io-browse__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+}
+
+.workbench-field-remap-io-browse__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  min-width: 0;
+}
+
+.workbench-field-remap-io-browse__section-title {
+  margin: 0;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.workbench-field-remap-io-browse__port {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.5rem 0.65rem;
+  border: 1px solid var(--vscode-widget-border, var(--color-border, #3c3c3c));
+  border-radius: 4px;
+}
+
+.workbench-field-remap-io-browse__port-title {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.75rem;
+  margin: 0;
+  align-items: baseline;
+}
+
+.workbench-field-remap-io-browse__port-id {
+  font-weight: 600;
+}
+
+.workbench-field-remap-io-browse__port-meta {
+  font-size: 0.75rem;
+  opacity: 0.75;
+}
+
+.workbench-field-remap-io-browse__fields {
+  margin: 0;
+  padding-left: 1rem;
+  list-style: disc;
+}
+
+.workbench-field-remap-io-browse__fields .workbench-field-remap-io-browse__fields {
+  margin-top: 0.25rem;
+}
+
+.workbench-field-remap-io-browse__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.75rem;
+  align-items: baseline;
+}
+
+.workbench-field-remap-io-browse__path {
+  font-size: 0.8rem;
+  word-break: break-all;
+}
+
+.workbench-field-remap-io-browse__meta {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+.workbench-field-remap-io-browse__badge {
+  padding: 0.05rem 0.35rem;
+  border-radius: 3px;
+  background: var(--vscode-badge-background, rgba(127, 127, 127, 0.25));
+  color: var(--vscode-badge-foreground, inherit);
+}
+
+.workbench-field-remap-io-browse__empty {
+  margin: 0;
+  font-size: 0.8rem;
+  opacity: 0.7;
+}