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

package/src/field-remap-view.css

@@ -0,0 +1,676 @@
+.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__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__header {
+  display: flex;
+  align-items: baseline;
+  gap: 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__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-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;
+}