text-guitar-chart 0.1.2 → 0.2.0

package/lib/editableSVGuitar.js

@@ -4,11 +4,13 @@ import fingeringToString from './fingeringToString.js';
 import { SVGuitarChord } from 'svguitar';
 
 /**
- * Available colors for dots: red and black only
+ * Available colors for dots
  */
 export const DOT_COLORS = {
   RED: '#e74c3c',
-  BLACK: '#000000'
+  BLACK: '#000000',
+  GREY: '#9B9B9B',
+  BLUE: '#4A90E2'
 };
 
 /**
@@ -110,7 +112,7 @@ export class EditableSVGuitarChord {
       padding: 20px;
       box-shadow: 0 4px 20px rgba(0,0,0,0.3);
       z-index: 1000;
-      min-width: 280px;
+      min-width: 220px;
     `;
 
     const title = document.createElement('h3');
@@ -122,35 +124,39 @@ export class EditableSVGuitarChord {
     titleSection.style.cssText = 'margin-bottom: 15px;';
     
     const titleLabel = document.createElement('label');
-    titleLabel.textContent = 'Title (optional): ';
-    titleLabel.style.cssText = 'display: block; margin-bottom: 5px; font-weight: bold;';
+    titleLabel.textContent = 'Title: ';
+    titleLabel.htmlFor = 'editable-svguitar-title-input';
+    titleLabel.style.cssText = 'display: inline-block; margin-bottom: 5px; font-weight: bold; width: 80px;';
     
     this.titleInput = document.createElement('input');
+    this.titleInput.id = 'editable-svguitar-title-input';
     this.titleInput.type = 'text';
     this.titleInput.placeholder = 'e.g. A min';
     this.titleInput.maxLength = 10;
     this.titleInput.style.cssText = 'width: 10em; padding: 6px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box;';
     
-    titleLabel.appendChild(this.titleInput);
     titleSection.appendChild(titleLabel);
+    titleSection.appendChild(this.titleInput);
 
     // Position input
     const positionSection = document.createElement('div');
     positionSection.style.cssText = 'margin-bottom: 15px;';
     
     const positionLabel = document.createElement('label');
-    positionLabel.textContent = 'Position (optional): ';
-    positionLabel.style.cssText = 'display: block; margin-bottom: 5px; font-weight: bold;';
+    positionLabel.textContent = 'Position: ';
+    positionLabel.htmlFor = 'editable-svguitar-position-input';
+    positionLabel.style.cssText = 'display: inline-block; margin-bottom: 5px; font-weight: bold; width: 80px;';
     
     this.positionInput = document.createElement('input');
+    this.positionInput.id = 'editable-svguitar-position-input';
     this.positionInput.type = 'number';
     this.positionInput.min = '1';
     this.positionInput.max = '30';
     this.positionInput.placeholder = '1-30';
     this.positionInput.style.cssText = 'width: 5em; padding: 6px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box;';
     
-    positionLabel.appendChild(this.positionInput);
     positionSection.appendChild(positionLabel);
+    positionSection.appendChild(this.positionInput);
 
     // Buttons
     const buttonDiv = document.createElement('div');
@@ -208,7 +214,7 @@ export class EditableSVGuitarChord {
       padding: 20px;
       box-shadow: 0 4px 20px rgba(0,0,0,0.3);
       z-index: 1000;
-      min-width: 250px;
+      min-width: 200px;
     `;
 
     const title = document.createElement('h3');
@@ -219,72 +225,112 @@ export class EditableSVGuitarChord {
     const colorSection = document.createElement('div');
     colorSection.style.cssText = 'margin-bottom: 15px;';
     
-    const colorLabel = document.createElement('div');
-    colorLabel.textContent = 'Color:';
-    colorLabel.style.cssText = 'font-weight: bold; margin-bottom: 8px;';
-    colorSection.appendChild(colorLabel);
-
     const colorOptions = document.createElement('div');
-    colorOptions.style.cssText = 'display: flex; gap: 15px;';
+    colorOptions.style.cssText = 'display: flex; gap: 8px; align-items: center;';
+
+    const hiddenRadioStyle =
+      'position:absolute;opacity:0;width:0;height:0;';
+    const swatchStyle = (color) =>
+      'width:28px;height:28px;display:block;' +
+      `background:${color};` +
+      'border-radius:3px;cursor:pointer;box-sizing:border-box;';
 
     // Red option
     const redOption = document.createElement('label');
-    redOption.style.cssText = 'display: flex; align-items: center; cursor: pointer;';
-    
+    redOption.style.cssText =
+      'display:inline-block;position:relative;cursor:pointer;';
+
     this.redRadio = document.createElement('input');
     this.redRadio.type = 'radio';
     this.redRadio.name = 'dotColor';
     this.redRadio.value = DOT_COLORS.RED;
+    this.redRadio.style.cssText = hiddenRadioStyle;
     this.redRadio.addEventListener('change', () => this.updateDotColor());
-    
-    const redLabel = document.createElement('span');
-    redLabel.textContent = 'Red';
-    redLabel.style.cssText = 'margin-left: 5px; color: #e74c3c; font-weight: bold;';
-    
-    redOption.appendChild(this.redRadio);
-    redOption.appendChild(redLabel);
 
-    // Black option  
+    const redSwatch = document.createElement('span');
+    redSwatch.className = 'color-swatch';
+    redSwatch.style.cssText = swatchStyle(DOT_COLORS.RED);
+
+    redOption.appendChild(this.redRadio);
+    redOption.appendChild(redSwatch);
+
+    // Grey option
+    const greyOption = document.createElement('label');
+    greyOption.style.cssText =
+      'display:inline-block;position:relative;cursor:pointer;';
+
+    this.greyRadio = document.createElement('input');
+    this.greyRadio.type = 'radio';
+    this.greyRadio.name = 'dotColor';
+    this.greyRadio.value = DOT_COLORS.GREY;
+    this.greyRadio.style.cssText = hiddenRadioStyle;
+    this.greyRadio.addEventListener('change', () => this.updateDotColor());
+
+    const greySwatch = document.createElement('span');
+    greySwatch.className = 'color-swatch';
+    greySwatch.style.cssText = swatchStyle(DOT_COLORS.GREY);
+
+    greyOption.appendChild(this.greyRadio);
+    greyOption.appendChild(greySwatch);
+
+    // Blue option
+    const blueOption = document.createElement('label');
+    blueOption.style.cssText =
+      'display:inline-block;position:relative;cursor:pointer;';
+
+    this.blueRadio = document.createElement('input');
+    this.blueRadio.type = 'radio';
+    this.blueRadio.name = 'dotColor';
+    this.blueRadio.value = DOT_COLORS.BLUE;
+    this.blueRadio.style.cssText = hiddenRadioStyle;
+    this.blueRadio.addEventListener('change', () => this.updateDotColor());
+
+    const blueSwatch = document.createElement('span');
+    blueSwatch.className = 'color-swatch';
+    blueSwatch.style.cssText = swatchStyle(DOT_COLORS.BLUE);
+
+    blueOption.appendChild(this.blueRadio);
+    blueOption.appendChild(blueSwatch);
+
+    // Black option
     const blackOption = document.createElement('label');
-    blackOption.style.cssText = 'display: flex; align-items: center; cursor: pointer;';
-    
+    blackOption.style.cssText =
+      'display:inline-block;position:relative;cursor:pointer;';
+
     this.blackRadio = document.createElement('input');
     this.blackRadio.type = 'radio';
     this.blackRadio.name = 'dotColor';
     this.blackRadio.value = DOT_COLORS.BLACK;
     this.blackRadio.checked = true; // Default to black
+    this.blackRadio.style.cssText = hiddenRadioStyle;
     this.blackRadio.addEventListener('change', () => this.updateDotColor());
-    
-    const blackLabel = document.createElement('span');
-    blackLabel.textContent = 'Black';
-    blackLabel.style.cssText = 'margin-left: 5px; color: #000000; font-weight: bold;';
-    
+
+    const blackSwatch = document.createElement('span');
+    blackSwatch.className = 'color-swatch';
+    blackSwatch.style.cssText = swatchStyle(DOT_COLORS.BLACK);
+
     blackOption.appendChild(this.blackRadio);
-    blackOption.appendChild(blackLabel);
-    
+    blackOption.appendChild(blackSwatch);
+
     colorOptions.appendChild(redOption);
+    colorOptions.appendChild(greyOption);
+    colorOptions.appendChild(blueOption);
     colorOptions.appendChild(blackOption);
-    colorSection.appendChild(colorOptions);
 
-    // Text input (conditional on black color)
-    this.textSection = document.createElement('div');
-    this.textSection.style.cssText = 'margin-bottom: 15px;';
-    
-    const textLabel = document.createElement('label');
-    textLabel.textContent = 'Text (optional): ';
-    textLabel.style.cssText = 'display: block; margin-bottom: 5px; font-weight: bold;';
-    
+    // Text input inline with color swatches (visible only for black)
     this.textInput = document.createElement('input');
     this.textInput.type = 'text';
-    this.textInput.maxLength = 2; // Reduced from 3 to 2
-    this.textInput.placeholder = '1-2 chars';
-    this.textInput.style.cssText = 'width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 3px;';
-    
+    this.textInput.maxLength = 1;
+    this.textInput.placeholder = 'Aa';
+    this.textInput.style.cssText =
+      'width:32px;height:28px;padding:0 4px;margin-left:4px;' +
+      'border:1px solid #ccc;border-radius:3px;box-sizing:border-box;';
+
     // Add real-time text change listener
     this.textInput.addEventListener('input', () => this.updateDotText());
-    
-    textLabel.appendChild(this.textInput);
-    this.textSection.appendChild(textLabel);
+
+    colorOptions.appendChild(this.textInput);
+    colorSection.appendChild(colorOptions);
 
     const buttonDiv = document.createElement('div');
     buttonDiv.style.cssText = 'display: flex; gap: 10px; justify-content: flex-end;';
@@ -304,7 +350,6 @@ export class EditableSVGuitarChord {
 
     this.dialog.appendChild(title);
     this.dialog.appendChild(colorSection);
-    this.dialog.appendChild(this.textSection);
     this.dialog.appendChild(buttonDiv);
 
     document.body.appendChild(this.dialog);
@@ -344,83 +389,85 @@ export class EditableSVGuitarChord {
       padding: 20px;
       box-shadow: 0 4px 20px rgba(0,0,0,0.3);
       z-index: 1000;
-      min-width: 250px;
+      min-width: 165px;
     `;
 
     const title = document.createElement('h3');
     title.textContent = 'Edit Open String';
     title.style.cssText = 'margin: 0 0 15px 0; font-size: 16px;';
 
-    // Type selection with radio buttons (Open vs Muted)
+    // Type selection with swatch squares (Muted × vs Open ○)
     const typeSection = document.createElement('div');
     typeSection.style.cssText = 'margin-bottom: 15px;';
-    
-    const typeLabel = document.createElement('div');
-    typeLabel.textContent = 'Type:';
-    typeLabel.style.cssText = 'font-weight: bold; margin-bottom: 8px;';
-    typeSection.appendChild(typeLabel);
 
     const typeOptions = document.createElement('div');
-    typeOptions.style.cssText = 'display: flex; gap: 15px;';
+    typeOptions.style.cssText = 'display: flex; gap: 8px; align-items: center;';
+
+    const hiddenRadioStyle =
+      'position:absolute;opacity:0;width:0;height:0;';
+    const openStringSwatchStyle =
+      'width:28px;height:28px;display:flex;align-items:center;' +
+      'justify-content:center;background:#fff;border:1px solid #ccc;' +
+      'border-radius:3px;cursor:pointer;box-sizing:border-box;' +
+      'font-size:16px;font-weight:bold;user-select:none;';
+
+    // Muted option (×)
+    const mutedOption = document.createElement('label');
+    mutedOption.style.cssText =
+      'display:inline-block;position:relative;cursor:pointer;';
+
+    this.mutedRadio = document.createElement('input');
+    this.mutedRadio.type = 'radio';
+    this.mutedRadio.name = 'openStringType';
+    this.mutedRadio.value = 'x';
+    this.mutedRadio.style.cssText = hiddenRadioStyle;
+    this.mutedRadio.addEventListener('change', () => this.updateOpenStringType());
+
+    const mutedSwatch = document.createElement('span');
+    mutedSwatch.className = 'open-string-swatch';
+    mutedSwatch.textContent = '\u00d7';
+    mutedSwatch.style.cssText = openStringSwatchStyle;
+
+    mutedOption.appendChild(this.mutedRadio);
+    mutedOption.appendChild(mutedSwatch);
 
-    // Open option
+    // Open option (○)
     const openOption = document.createElement('label');
-    openOption.style.cssText = 'display: flex; align-items: center; cursor: pointer;';
-    
+    openOption.style.cssText =
+      'display:inline-block;position:relative;cursor:pointer;';
+
     this.openRadio = document.createElement('input');
     this.openRadio.type = 'radio';
     this.openRadio.name = 'openStringType';
     this.openRadio.value = '0';
     this.openRadio.checked = true; // Default to open
+    this.openRadio.style.cssText = hiddenRadioStyle;
     this.openRadio.addEventListener('change', () => this.updateOpenStringType());
-    
-    const openLabel = document.createElement('span');
-    openLabel.textContent = 'Open';
-    openLabel.style.cssText = 'margin-left: 5px; font-weight: bold;';
-    
+
+    const openSwatch = document.createElement('span');
+    openSwatch.className = 'open-string-swatch';
+    openSwatch.textContent = '\u25cb';
+    openSwatch.style.cssText = openStringSwatchStyle;
+
     openOption.appendChild(this.openRadio);
-    openOption.appendChild(openLabel);
+    openOption.appendChild(openSwatch);
 
-    // Muted option  
-    const mutedOption = document.createElement('label');
-    mutedOption.style.cssText = 'display: flex; align-items: center; cursor: pointer;';
-    
-    this.mutedRadio = document.createElement('input');
-    this.mutedRadio.type = 'radio';
-    this.mutedRadio.name = 'openStringType';
-    this.mutedRadio.value = 'x';
-    this.mutedRadio.addEventListener('change', () => this.updateOpenStringType());
-    
-    const mutedLabel = document.createElement('span');
-    mutedLabel.textContent = 'Muted';
-    mutedLabel.style.cssText = 'margin-left: 5px; font-weight: bold;';
-    
-    mutedOption.appendChild(this.mutedRadio);
-    mutedOption.appendChild(mutedLabel);
-    
-    typeOptions.appendChild(openOption);
     typeOptions.appendChild(mutedOption);
-    typeSection.appendChild(typeOptions);
+    typeOptions.appendChild(openOption);
 
-    // Text input (only for open strings)
-    this.openStringTextSection = document.createElement('div');
-    this.openStringTextSection.style.cssText = 'margin-bottom: 15px;';
-    
-    const textLabel = document.createElement('label');
-    textLabel.textContent = 'Text (optional): ';
-    textLabel.style.cssText = 'display: block; margin-bottom: 5px; font-weight: bold;';
-    
+    // Text input inline (visible only for open strings)
     this.openStringTextInput = document.createElement('input');
     this.openStringTextInput.type = 'text';
-    this.openStringTextInput.maxLength = 2;
-    this.openStringTextInput.placeholder = '1-2 chars';
-    this.openStringTextInput.style.cssText = 'width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 3px;';
-    
-    // Add real-time text change listener
-    this.openStringTextInput.addEventListener('input', () => this.updateOpenStringText());
-    
-    textLabel.appendChild(this.openStringTextInput);
-    this.openStringTextSection.appendChild(textLabel);
+    this.openStringTextInput.maxLength = 1;
+    this.openStringTextInput.placeholder = 'Aa';
+    this.openStringTextInput.style.cssText =
+      'width:32px;height:28px;padding:0 4px;margin-left:4px;' +
+      'border:1px solid #ccc;border-radius:3px;box-sizing:border-box;';
+    this.openStringTextInput.addEventListener('input',
+      () => this.updateOpenStringText());
+
+    typeOptions.appendChild(this.openStringTextInput);
+    typeSection.appendChild(typeOptions);
 
     const buttonDiv = document.createElement('div');
     buttonDiv.style.cssText = 'display: flex; gap: 10px; justify-content: flex-end;';
@@ -440,7 +487,6 @@ export class EditableSVGuitarChord {
 
     this.openStringDialog.appendChild(title);
     this.openStringDialog.appendChild(typeSection);
-    this.openStringDialog.appendChild(this.openStringTextSection);
     this.openStringDialog.appendChild(buttonDiv);
 
     document.body.appendChild(this.openStringDialog);
@@ -766,12 +812,17 @@ export class EditableSVGuitarChord {
     const currentColor = typeof finger[2] === 'object' && finger[2]?.color || DOT_COLORS.BLACK;
     const currentText = typeof finger[2] === 'object' && finger[2]?.text || '';
     
-    // Normalize color to red or black (handle legacy colors)
-    const normalizedColor = currentColor === DOT_COLORS.RED ? DOT_COLORS.RED : DOT_COLORS.BLACK;
+    // Normalize color to one of the 4 known colors (handle legacy colors)
+    let normalizedColor = DOT_COLORS.BLACK;
+    if (currentColor === DOT_COLORS.RED) normalizedColor = DOT_COLORS.RED;
+    else if (currentColor === DOT_COLORS.GREY) normalizedColor = DOT_COLORS.GREY;
+    else if (currentColor === DOT_COLORS.BLUE) normalizedColor = DOT_COLORS.BLUE;
     
     // Set radio buttons
     this.redRadio.checked = normalizedColor === DOT_COLORS.RED;
     this.blackRadio.checked = normalizedColor === DOT_COLORS.BLACK;
+    this.greyRadio.checked = normalizedColor === DOT_COLORS.GREY;
+    this.blueRadio.checked = normalizedColor === DOT_COLORS.BLUE;
     
     // Set text and update visibility
     this.textInput.value = currentText;
@@ -1055,6 +1106,14 @@ export class EditableSVGuitarChord {
       .editable-svguitar-settings-btn:hover {
         background: #f0f0f0;
       }
+
+      .editable-svguitar-dialog input[name="dotColor"]:checked + .color-swatch {
+        box-shadow: 0 0 0 2px white, 0 0 0 4px grey;
+      }
+
+      .editable-svguitar-open-string-dialog input[name="openStringType"]:checked + .open-string-swatch {
+        box-shadow: 0 0 0 2px white, 0 0 0 4px grey;
+      }
       `;
     document.head.appendChild(style);
   }
@@ -1095,30 +1154,22 @@ export class EditableSVGuitarChord {
    * Update text section visibility based on color selection
    */
   updateTextSectionVisibility() {
-    if (!this.textSection) return;
+    if (!this.textInput) return;
     
     const isBlack = this.blackRadio && this.blackRadio.checked;
-    this.textSection.style.display = isBlack ? 'block' : 'none';
-    
-    // Disable text input for red dots
-    if (this.textInput) {
-      this.textInput.disabled = !isBlack;
-    }
+    this.textInput.style.display = isBlack ? 'inline-block' : 'none';
+    this.textInput.disabled = !isBlack;
   }
 
   /**
    * Update text section visibility for open string dialog based on type selection
    */
   updateOpenStringTextSectionVisibility() {
-    if (!this.openStringTextSection) return;
-    
+    if (!this.openStringTextInput) return;
+
     const isOpen = this.openRadio && this.openRadio.checked;
-    this.openStringTextSection.style.display = isOpen ? 'block' : 'none';
-    
-    // Disable text input for muted strings
-    if (this.openStringTextInput) {
-      this.openStringTextInput.disabled = !isOpen;
-    }
+    this.openStringTextInput.style.display = isOpen ? 'inline-block' : 'none';
+    this.openStringTextInput.disabled = !isOpen;
   }
 
   /**
@@ -1193,13 +1244,16 @@ export class EditableSVGuitarChord {
     }
     
     // Get selected color from radio buttons
-    const selectedColor = this.redRadio.checked ? DOT_COLORS.RED : DOT_COLORS.BLACK;
+    let selectedColor = DOT_COLORS.BLACK;
+    if (this.redRadio.checked) selectedColor = DOT_COLORS.RED;
+    else if (this.greyRadio.checked) selectedColor = DOT_COLORS.GREY;
+    else if (this.blueRadio.checked) selectedColor = DOT_COLORS.BLUE;
 
     const fingerOptions = typeof this.currentEditFinger[2] === 'object' ? this.currentEditFinger[2] : {};
     this.currentEditFinger[2] = { ...fingerOptions, color: selectedColor };
     
-    // Clear text if red is selected
-    if (selectedColor === DOT_COLORS.RED) {
+    // Clear text if non-black color is selected
+    if (selectedColor !== DOT_COLORS.BLACK) {
       this.currentEditFinger[2].text = '';
       this.textInput.value = '';
     }
@@ -1221,7 +1275,10 @@ export class EditableSVGuitarChord {
     }
     
     // Get selected color from radio buttons
-    const selectedColor = this.redRadio.checked ? DOT_COLORS.RED : DOT_COLORS.BLACK;
+    let selectedColor = DOT_COLORS.BLACK;
+    if (this.redRadio.checked) selectedColor = DOT_COLORS.RED;
+    else if (this.greyRadio.checked) selectedColor = DOT_COLORS.GREY;
+    else if (this.blueRadio.checked) selectedColor = DOT_COLORS.BLUE;
     this.currentEditFinger[2] = { text: this.textInput.value, color: selectedColor };
 
     this.closeDialog();

package/lib/fingeringToString.js

@@ -1,5 +1,28 @@
 //@ts-check
 
+// Known color constants
+const COLOR_BLACK = '#000000';
+const COLOR_RED = '#e74c3c';
+const COLOR_GREY = '#9B9B9B';
+const COLOR_BLUE = '#4A90E2';
+
+/**
+ * Get the marker character for a non-black color
+ * @param {string} color - The color hex value
+ * @param {boolean} isUnicode - Whether to use Unicode characters
+ * @returns {string} The marker character
+ */
+function getMarkerChar(color, isUnicode) {
+  if (color === COLOR_GREY) {
+    return isUnicode ? '□' : 'O';
+  }
+  if (color === COLOR_BLUE) {
+    return isUnicode ? '■' : '+';
+  }
+  // Red or any unrecognized color falls back to root marker
+  return isUnicode ? '●' : '*';
+}
+
 /**
  * Parse a string representation of a guitar fingering into internal format
  * @param {import("svguitar").Chord} chord
@@ -140,7 +163,7 @@ function buildAsciiOutput(
       
       if (fingerInfo) {
         if (fingerInfo.color !== "#000000") {
-          line += "*";
+          line += getMarkerChar(fingerInfo.color, false);
         } else if (fingerInfo.text) {
           line += fingerInfo.text[0];
         } else {
@@ -237,7 +260,7 @@ function buildUnicodeOutput(
       
       if (fingerInfo) {
         if (fingerInfo.color !== "#000000") {
-          line += "●";
+          line += getMarkerChar(fingerInfo.color, true);
         } else if (fingerInfo.text) {
           line += fingerInfo.text[0];
         } else {

package/lib/stringToFingering.js

@@ -7,12 +7,16 @@ const ASCII_EQUALS = "=";
 const ASCII_OPEN = "o";
 const ASCII_MUTED = "x";
 const ASCII_ROOT = "*";
+const ASCII_GREY = "O";
+const ASCII_BLUE = "+";
 
 // Unicode format characters
 const UNICODE_VERTICAL = "│";
 const UNICODE_OPEN = "○";
 const UNICODE_MUTED = "×";
 const UNICODE_ROOT = "●";
+const UNICODE_GREY = "□";
+const UNICODE_BLUE = "■";
 
 // Unicode box drawing characters for grid detection
 // Includes both double-line (╒═╤╕) and light (┌─┬┐) box-drawing sets
@@ -29,6 +33,8 @@ function isUnicodeFormat(str) {
     str.includes(UNICODE_OPEN) ||
     str.includes(UNICODE_ROOT) ||
     str.includes(UNICODE_MUTED) ||
+    str.includes(UNICODE_GREY) ||
+    str.includes(UNICODE_BLUE) ||
     [...UNICODE_BOX_CHARS].some(c => str.includes(c))
   );
 }
@@ -183,11 +189,16 @@ function isGridRow(line, isUnicode) {
 /**
  * Parse a string representation of a guitar fingering into internal format
  * @param {string} fingeringStr - The string representation of the fingering
- * @param {{ redColor?: string, blackColor?: string }} [options]
+ * @param {{ redColor?: string, blackColor?: string, greyColor?: string, blueColor?: string }} [options]
  * @returns {import("svguitar").Chord | null} The parsed fingering object
  */
 export default function stringToFingering(fingeringStr, options = {}) {
-  const { redColor = "#e74c3c", blackColor = "#000000" } = options;
+  const {
+    redColor = "#e74c3c",
+    blackColor = "#000000",
+    greyColor = "#9B9B9B",
+    blueColor = "#4A90E2",
+  } = options;
 
   if (!fingeringStr || fingeringStr.trim() === "") {
     return null;
@@ -199,6 +210,8 @@ export default function stringToFingering(fingeringStr, options = {}) {
   const openChar = isUnicode ? UNICODE_OPEN : ASCII_OPEN;
   const mutedChar = isUnicode ? UNICODE_MUTED : ASCII_MUTED;
   const rootChar = isUnicode ? UNICODE_ROOT : ASCII_ROOT;
+  const greyChar = isUnicode ? UNICODE_GREY : ASCII_GREY;
+  const blueChar = isUnicode ? UNICODE_BLUE : ASCII_BLUE;
 
   /** @type {import("svguitar").Finger[]} */
   const fingers = [];
@@ -368,6 +381,14 @@ export default function stringToFingering(fingeringStr, options = {}) {
       if (char === rootChar) {
         fingers.push([stringNum, fretNumber, { text: "", color: redColor }]);
       }
+      // Check for grey marker
+      else if (char === greyChar) {
+        fingers.push([stringNum, fretNumber, { text: "", color: greyColor }]);
+      }
+      // Check for blue marker
+      else if (char === blueChar) {
+        fingers.push([stringNum, fretNumber, { text: "", color: blueColor }]);
+      }
       // Check for regular note (○ in Unicode, o in ASCII within grid)
       else if (char === UNICODE_OPEN || char === ASCII_OPEN) {
         fingers.push([stringNum, fretNumber, { text: "", color: blackColor }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-guitar-chart",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A JavaScript library to write text based guitar chord charts and convert them to SVG.",
   "main": "index.js",
   "types": "types/index.d.ts",

package/test/editableSVGuitar.test.js

@@ -210,6 +210,18 @@ describe('DOT_COLORS', () => {
     assert.equal(DOT_COLORS.RED, '#e74c3c', 'RED should be correct hex value');
     assert.equal(DOT_COLORS.BLACK, '#000000', 'BLACK should be correct hex value');
   });
+
+  test('DOT_COLORS has expected grey and blue values', () => {
+    assert.equal(DOT_COLORS.GREY, '#9B9B9B', 'GREY should be correct hex value');
+    assert.equal(DOT_COLORS.BLUE, '#4A90E2', 'BLUE should be correct hex value');
+  });
+
+  test('DOT_COLORS has all 4 color properties', () => {
+    assert.ok(DOT_COLORS.RED, 'DOT_COLORS should have RED property');
+    assert.ok(DOT_COLORS.BLACK, 'DOT_COLORS should have BLACK property');
+    assert.ok(DOT_COLORS.GREY, 'DOT_COLORS should have GREY property');
+    assert.ok(DOT_COLORS.BLUE, 'DOT_COLORS should have BLUE property');
+  });
 });
 describe('EditableSVGuitarChord (Title and Position)', () => {
   test('sets title and position via chord() method', () => {
@@ -517,8 +529,7 @@ describe('EditableSVGuitarChord (Open String Dialog)', () => {
     // Mock radio buttons
     editableChord.openRadio = { checked: false };
     editableChord.mutedRadio = { checked: true };
-    editableChord.openStringTextInput = { value: '' };
-    editableChord.openStringTextSection = { style: { display: 'block' } };
+    editableChord.openStringTextInput = { value: '', style: { display: '' }, disabled: false };
     
     // Switch to muted
     editableChord.updateOpenStringType();
@@ -572,8 +583,7 @@ describe('EditableSVGuitarChord (Open String Dialog)', () => {
     editableChord.currentEditFinger = editableChord.chordConfig.fingers[0];
     editableChord.openRadio = { checked: false };
     editableChord.mutedRadio = { checked: true };
-    editableChord.openStringTextInput = { value: 'R' };
-    editableChord.openStringTextSection = { style: { display: 'block' } };
+    editableChord.openStringTextInput = { value: 'R', style: { display: '' }, disabled: false };
     
     editableChord.updateOpenStringType();
     
@@ -634,8 +644,7 @@ describe('EditableSVGuitarChord (Open String Dialog)', () => {
     editableChord.currentEditFinger = editableChord.chordConfig.fingers[0];
     editableChord.openRadio = { checked: false };
     editableChord.mutedRadio = { checked: true };
-    editableChord.openStringTextInput = { value: '' };
-    editableChord.openStringTextSection = { style: { display: 'block' } };
+    editableChord.openStringTextInput = { value: '', style: { display: '' }, disabled: false };
     
     editableChord.updateOpenStringType();