qsharp-lang 1.14.5-dev → 1.15.1-dev

package/ux/qsharp-circuit.css

@@ -44,12 +44,33 @@
 
 /* Background for gates */
 .qs-circuit .gate-unitary {
-  fill: var(--vscode-button-secondaryBackground, #d9f1fa);
+  fill: var(--vscode-button-secondaryBackground, #333333);
 }
 
 /* Text for gates */
 .qs-circuit .gate text {
-  fill: var(--vscode-button-secondaryForeground, #000000);
+  fill: var(--vscode-button-secondaryForeground, #ffffff);
+}
+
+/* Default style for arg-button */
+.qs-circuit .arg-button {
+  fill: var(--vscode-editor-foreground, #ffffff);
+  text-decoration: none;
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Edit mode style for arg-button (hyperlink appearance) */
+.qs-circuit .arg-button.edit-mode {
+  fill: var(--vscode-textLink-foreground, #0066cc);
+  text-decoration: underline;
+  cursor: pointer;
+  pointer-events: all;
+}
+
+/* Hover style for arg-button in edit mode */
+.qs-circuit .arg-button.edit-mode:hover {
+  fill: var(--vscode-textLink-activeForeground, #004499); /* Hover color */
 }
 
 /* Dot and line for controlled gates */
@@ -68,17 +89,28 @@
 
 /* Measurement gate */
 .qs-circuit .gate-measure {
-  fill: var(--vscode-button-background, #ffde86);
+  fill: var(--vscode-button-background, #007acc);
 }
 
 /* Measurement gate icon */
 .qs-circuit .gate > g > line,
 .qs-circuit .arc-measure {
-  stroke: var(--vscode-button-foreground, #000000);
+  stroke: var(--vscode-button-foreground, #ffffff);
   fill: none;
   stroke-width: 1;
 }
 
+/* Ket gate */
+.qs-circuit .gate-ket {
+  fill: var(--vscode-button-background, #007acc);
+}
+
+/* Ket gate text */
+.qs-circuit text.ket-text {
+  fill: var(--vscode-button-foreground, #ffffff);
+  stroke: none;
+}
+
 /* SWAP gate */
 .qs-circuit rect.gate-swap {
   fill: transparent;
@@ -192,3 +224,227 @@
   opacity: 1;
   transition: opacity 1s;
 }
+
+text {
+  user-select: none;
+  pointer-events: none;
+}
+.dropzone-layer {
+  display: none;
+}
+.dropzone {
+  fill-opacity: 0%;
+  stroke-opacity: 0%;
+}
+.dropzone:hover {
+  fill: var(--vscode-editor-selectionBackground, #ec7063);
+  fill-opacity: 50%;
+}
+.dropzone-full-wire {
+  fill-opacity: 0%;
+  stroke-opacity: 0%;
+}
+.dropzone-full-wire:hover {
+  fill: var(--vscode-editor-selectionBackground, #ec7063);
+  fill-opacity: 50%;
+}
+.grab {
+  cursor: grab;
+}
+.moving {
+  cursor: move;
+}
+.copying {
+  cursor: copy;
+}
+
+.panel {
+  display: flex;
+  flex-direction: row;
+}
+
+.context-menu {
+  position: absolute;
+  background-color: var(--vscode-menu-background, #ffffff);
+  border: 1px solid var(--vscode-menu-border, #cccccc);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  padding: 5px 0;
+  border-radius: 4px;
+}
+
+.context-menu-option {
+  padding: 8px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--vscode-menu-foreground, #000000);
+}
+
+.context-menu-option:hover {
+  background-color: var(--vscode-menu-selectionBackground, #f0f0f0);
+  color: var(--vscode-menu-selectionForeground, #000000);
+}
+
+.prompt-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.prompt-container {
+  background: var(--vscode-editor-background, #ffffff);
+  color: var(--vscode-editor-foreground, #000000);
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 400px;
+  max-width: 90%;
+}
+
+.prompt-message {
+  margin-bottom: 10px;
+  color: var(--vscode-editor-foreground, #000000);
+  font-size: 1rem;
+}
+
+.prompt-input {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 10px;
+  background: var(--vscode-input-background, #ffffff);
+  color: var(--vscode-input-foreground, #000000);
+  border: 1px solid var(--vscode-input-border, #cccccc);
+  font-size: 1rem;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.prompt-buttons {
+  display: flex;
+  justify-content: space-between;
+}
+
+.prompt-button {
+  padding: 8px 16px;
+  margin: 0 5px;
+  background: var(--vscode-button-background, #007acc);
+  color: var(--vscode-button-foreground, #ffffff);
+  border: 1px solid var(--vscode-button-border, #005a9e);
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.prompt-button:hover {
+  background: var(--vscode-button-hoverBackground, #005a9e);
+}
+
+.prompt-button:disabled {
+  background: var(--vscode-button-secondaryBackground, #d4d4d4);
+  color: var(--vscode-disabledForeground, #a1a1a1);
+  border: 1px solid var(--vscode-button-secondaryBackground, #d4d4d4);
+  cursor: not-allowed;
+}
+
+.pi-button {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  text-align: center;
+  line-height: 40px;
+  font-size: 16px;
+}
+
+.container {
+  display: flex;
+}
+
+.edit-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  margin: 0 0 4px;
+  font-size: 1.2rem;
+  user-select: none;
+}
+
+.block {
+  display: block;
+}
+
+.target-input,
+.controls-input,
+.parameters-input {
+  margin-bottom: 8px;
+}
+
+.toolbox-panel {
+  width: 100px;
+  min-height: var(--minToolboxHeight);
+  border-right: medium solid var(--vscode-editorWidget-border, #000000);
+}
+
+.toolbox-panel .title {
+  margin-top: 6px;
+}
+
+.toolbox-panel-svg {
+  width: -webkit-fill-available;
+  min-height: var(--minToolboxHeight);
+  height: 100%;
+}
+
+.ghost {
+  width: var(--minGateWidth);
+  height: var(--gateHeight);
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.qubit-line-control {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.qubit-line-control .title {
+  margin-left: 16px;
+}
+
+.add-qubit-line,
+.remove-qubit-line {
+  border-radius: 4px;
+  padding: 8px 16px;
+  margin: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  user-select: none;
+  background: var(--vscode-button-background, #007acc);
+  color: var(--vscode-button-foreground, #ffffff);
+  border: 1px solid var(--vscode-button-border, #005a9e);
+}
+
+.add-qubit-line:hover,
+.remove-qubit-line:hover {
+  background: var(--vscode-button-hoverBackground, #005a9e);
+}
+
+.add-qubit-line:disabled,
+.remove-qubit-line:disabled {
+  background: var(--vscode-button-secondaryBackground, #d4d4d4);
+  color: var(--vscode-disabledForeground, #a1a1a1);
+  border: 1px solid var(--vscode-button-secondaryBackground, #d4d4d4);
+  cursor: not-allowed;
+}

package/ux/circuit-vis/styles.ts

@@ -1,236 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-
-/**
- * Provides configuration for CSS styles of visualization.
- */
-export interface StyleConfig {
-  /** Line stroke style. */
-  lineStroke?: string;
-  /** Line width. */
-  lineWidth?: number;
-  /** Text colour. */
-  textColour?: string;
-  /** Single qubit unitary fill colour. */
-  unitary?: string;
-  /** Oplus circle fill colour. */
-  oplus?: string;
-  /** Measurement gate fill colour. */
-  measure?: string;
-  /** Measurement unknown primary colour. */
-  classicalUnknown?: string;
-  /** Measurement zero primary colour. */
-  classicalZero?: string;
-  /** Measurement one primary colour. */
-  classicalOne?: string;
-  /** Measurement zero text colour */
-  classicalZeroText?: string;
-  /** Measurement one text colour */
-  classicalOneText?: string;
-}
-
-const defaultStyle: StyleConfig = {
-  lineStroke: "#000000",
-  lineWidth: 1,
-  textColour: "#000000",
-  unitary: "#D9F1FA",
-  oplus: "#FFFFFF",
-  measure: "#FFDE86",
-  classicalUnknown: "#E5E5E5",
-  classicalZero: "#C40000",
-  classicalOne: "#4059BD",
-  classicalZeroText: "#FFFFFF",
-  classicalOneText: "#FFFFFF",
-};
-
-const blackAndWhiteStyle: StyleConfig = {
-  lineStroke: "#000000",
-  lineWidth: 1,
-  textColour: "#000000",
-  unitary: "#FFFFFF",
-  oplus: "#FFFFFF",
-  measure: "#FFFFFF",
-  classicalUnknown: "#FFFFFF",
-  classicalZero: "#000000",
-  classicalOne: "#000000",
-  classicalZeroText: "#FFFFFF",
-  classicalOneText: "#FFFFFF",
-};
-
-const invertedStyle: StyleConfig = {
-  lineStroke: "#FFFFFF",
-  lineWidth: 1,
-  textColour: "#FFFFFF",
-  unitary: "#000000",
-  oplus: "#000000",
-  measure: "#000000",
-  classicalUnknown: "#000000",
-  classicalZero: "#FFFFFF",
-  classicalOne: "#FFFFFF",
-  classicalZeroText: "#000000",
-  classicalOneText: "#000000",
-};
-
-/**
- * Set of default styles.
- */
-export const STYLES: { [name: string]: StyleConfig } = {
-  /** Default style with coloured gates. */
-  Default: defaultStyle,
-  /** Black and white style. */
-  BlackAndWhite: blackAndWhiteStyle,
-  /** Inverted black and white style (for black backgrounds). */
-  Inverted: invertedStyle,
-};
-
-/**
- * CSS style script to be injected into visualization SVG.
- *
- * @param customStyle Custom style configuration.
- *
- * @returns String containing CSS style script.
- */
-export const style = (customStyle: StyleConfig = {}): string => {
-  const styleConfig = { ...defaultStyle, ...customStyle };
-
-  return `${_defaultGates(styleConfig)}
-    ${_classicallyControlledGates(styleConfig)}
-    ${_expandCollapse}`;
-};
-
-const _defaultGates = (styleConfig: StyleConfig): string => `
-    line,
-    circle,
-    rect {
-        stroke: ${styleConfig.lineStroke};
-        stroke-width: ${styleConfig.lineWidth};
-    }
-    text {
-        fill: ${styleConfig.textColour};
-        dominant-baseline: middle;
-        text-anchor: middle;
-        font-family: Arial;
-    }
-    .control-dot {
-        fill: ${styleConfig.lineStroke};
-    }
-    .oplus line, .oplus circle {
-        fill: ${styleConfig.oplus};
-        stroke-width: 2;
-    }
-    .gate-unitary {
-        fill: ${styleConfig.unitary};
-    }
-    .gate-measure {
-        fill: ${styleConfig.measure};
-    }
-    rect.gate-swap {
-        fill: transparent;
-        stroke: transparent;
-    }
-    .arc-measure {
-        stroke: ${styleConfig.lineStroke};
-        fill: none;
-        stroke-width: ${styleConfig.lineWidth};
-    }
-    .register-classical {
-        stroke-width: ${(styleConfig.lineWidth || 0) / 2};
-    }`;
-
-const _classicallyControlledGates = (styleConfig: StyleConfig): string => {
-  const gateOutline = `
-    .classically-controlled-one .classical-container,
-    .classically-controlled-one .classical-line {
-        stroke: ${styleConfig.classicalOne};
-        stroke-width: ${(styleConfig.lineWidth || 0) + 0.3};
-        fill: ${styleConfig.classicalOne};
-        fill-opacity: 0.1;
-    }
-    .classically-controlled-zero .classical-container,
-    .classically-controlled-zero .classical-line {
-        stroke: ${styleConfig.classicalZero};
-        stroke-width: ${(styleConfig.lineWidth || 0) + 0.3};
-        fill: ${styleConfig.classicalZero};
-        fill-opacity: 0.1;
-    }`;
-  const controlBtn = `
-    .classically-controlled-btn {
-        cursor: pointer;
-    }
-    .classically-controlled-unknown .classically-controlled-btn {
-        fill: ${styleConfig.classicalUnknown};
-    }
-    .classically-controlled-one .classically-controlled-btn {
-        fill: ${styleConfig.classicalOne};
-    }
-    .classically-controlled-zero .classically-controlled-btn {
-        fill: ${styleConfig.classicalZero};
-    }`;
-
-  const controlBtnText = `
-    .classically-controlled-btn text {
-        dominant-baseline: middle;
-        text-anchor: middle;
-        stroke: none;
-        font-family: Arial;
-    }
-    .classically-controlled-unknown .classically-controlled-btn text {
-        fill: ${styleConfig.textColour};
-    }
-    .classically-controlled-one .classically-controlled-btn text {
-        fill: ${styleConfig.classicalOneText};
-    }
-    .classically-controlled-zero .classically-controlled-btn text {
-        fill: ${styleConfig.classicalZeroText};
-    }`;
-
-  return `
-    .hidden {
-        display: none;
-    }
-    .classically-controlled-unknown {
-        opacity: 0.25;
-    }
-
-    ${gateOutline}
-    ${controlBtn}
-    ${controlBtnText}`;
-};
-
-const _expandCollapse = `
-    .qviz .gate-collapse,
-    .qviz .gate-expand {
-        opacity: 0;
-        transition: opacity 1s;
-    }
-
-    .qviz:hover .gate-collapse,
-    .qviz:hover .gate-expand {
-        visibility: visible;
-        opacity: 0.2;
-        transition: visibility 1s;
-        transition: opacity 1s;
-    }
-
-    .gate-expand, .gate-collapse {
-        cursor: pointer;
-    }
-
-    .gate-collapse circle,
-    .gate-expand circle {
-        fill: white;
-        stroke-width: 2px;
-        stroke: black;
-    }
-    .gate-collapse path,
-    .gate-expand path {
-        stroke-width: 4px;
-        stroke: black;
-    }
-
-    .gate:hover > .gate-collapse,
-    .gate:hover > .gate-expand {
-        visibility: visible;
-        opacity: 1;
-        transition: opacity 1s;
-    }`;