ccstatusline 2.0.11 → 2.0.12

package/README.md

@@ -44,6 +44,12 @@
 
 ## 🆕 Recent Updates
 
+### v2.0.12 - Custom Text widget now supports emojis
+
+- **👾 Emoji Support** - You can now paste emoji into the custom text widget. You can also turn on the merge option to get emoji labels for your widgets like this:
+  
+![Emoji Support](https://raw.githubusercontent.com/sirmalloc/ccstatusline/main/screenshots/emojiSupport.png)
+
 ### v2.0.11 - Unlimited Status Lines
 
 - **🚀 No Line Limit** - Configure as many status lines as you need - the 3-line limitation has been removed

package/dist/ccstatusline.js

@@ -51374,7 +51374,7 @@ import { execSync as execSync3 } from "child_process";
 import * as fs5 from "fs";
 import * as path4 from "path";
 var __dirname = "/Users/sirmalloc/Projects/Personal/ccstatusline/src/utils";
-var PACKAGE_VERSION = "2.0.11";
+var PACKAGE_VERSION = "2.0.12";
 function getPackageVersion() {
   if (/^\d+\.\d+\.\d+/.test(PACKAGE_VERSION)) {
     return PACKAGE_VERSION;
@@ -52619,15 +52619,35 @@ function renderPowerlineStatusLine(widgets, settings, context, lineIndex = 0, gl
     return "";
   const autoAlign = config2.autoAlign;
   if (autoAlign) {
+    let alignmentPos = 0;
     for (let i = 0;i < widgetElements.length; i++) {
       const element = widgetElements[i];
-      const maxWidth = preCalculatedMaxWidths[i];
-      if (element && maxWidth !== undefined) {
-        const currentLength = stringWidth(element.content.replace(ANSI_REGEX, ""));
-        const paddingNeeded = maxWidth - currentLength;
-        if (paddingNeeded > 0) {
-          element.content += " ".repeat(paddingNeeded);
+      if (!element)
+        continue;
+      const prevWidget = i > 0 ? widgetElements[i - 1] : null;
+      const isPreviousMerged = prevWidget?.widget.merge;
+      if (!isPreviousMerged) {
+        const maxWidth = preCalculatedMaxWidths[alignmentPos];
+        if (maxWidth !== undefined) {
+          let combinedLength = stringWidth(element.content.replace(ANSI_REGEX, ""));
+          let j = i;
+          while (j < widgetElements.length - 1 && widgetElements[j]?.widget.merge) {
+            j++;
+            const nextElement = widgetElements[j];
+            if (nextElement) {
+              combinedLength += stringWidth(nextElement.content.replace(ANSI_REGEX, ""));
+            }
+          }
+          const paddingNeeded = maxWidth - combinedLength;
+          if (paddingNeeded > 0) {
+            const lastElement = widgetElements[j];
+            if (lastElement) {
+              lastElement.content += " ".repeat(paddingNeeded);
+            }
+          }
+          i = j;
         }
+        alignmentPos++;
       }
     }
   }
@@ -52826,17 +52846,32 @@ function calculateMaxWidthsFromPreRendered(preRenderedLines, settings) {
   const paddingLength = defaultPadding.length;
   for (const preRenderedLine of preRenderedLines) {
     const filteredWidgets = preRenderedLine.filter((w) => w.widget.type !== "separator" && w.widget.type !== "flex-separator" && w.content);
-    for (let pos = 0;pos < filteredWidgets.length; pos++) {
-      const widget = filteredWidgets[pos];
+    let alignmentPos = 0;
+    for (let i = 0;i < filteredWidgets.length; i++) {
+      const widget = filteredWidgets[i];
       if (!widget)
         continue;
-      const totalWidth = widget.plainLength + paddingLength * 2;
-      const currentMax = maxWidths[pos];
+      let totalWidth = widget.plainLength + paddingLength * 2;
+      let j = i;
+      while (j < filteredWidgets.length - 1 && filteredWidgets[j]?.widget.merge) {
+        j++;
+        const nextWidget = filteredWidgets[j];
+        if (nextWidget) {
+          if (filteredWidgets[j - 1]?.widget.merge === "no-padding") {
+            totalWidth += nextWidget.plainLength;
+          } else {
+            totalWidth += nextWidget.plainLength + paddingLength * 2;
+          }
+        }
+      }
+      const currentMax = maxWidths[alignmentPos];
       if (currentMax === undefined) {
-        maxWidths[pos] = totalWidth;
+        maxWidths[alignmentPos] = totalWidth;
       } else {
-        maxWidths[pos] = Math.max(currentMax, totalWidth);
+        maxWidths[alignmentPos] = Math.max(currentMax, totalWidth);
       }
+      i = j;
+      alignmentPos++;
     }
   }
   return maxWidths;
@@ -53481,49 +53516,107 @@ class CustomTextWidget {
 var CustomTextEditor = ({ widget, onComplete, onCancel }) => {
   const [text, setText] = import_react29.useState(widget.customText ?? "");
   const [cursorPos, setCursorPos] = import_react29.useState(text.length);
+  const getGraphemes = (str) => {
+    if ("Segmenter" in Intl) {
+      const segmenter2 = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+      return Array.from(segmenter2.segment(str), (seg) => seg.segment);
+    }
+    return Array.from(str);
+  };
+  const graphemeToStringIndex = (str, graphemeIndex) => {
+    const graphemes2 = getGraphemes(str);
+    let stringIndex = 0;
+    for (let i = 0;i < Math.min(graphemeIndex, graphemes2.length); i++) {
+      const grapheme = graphemes2[i];
+      if (grapheme) {
+        stringIndex += grapheme.length;
+      }
+    }
+    return stringIndex;
+  };
+  const stringToGraphemeIndex = (str, stringIndex) => {
+    const graphemes2 = getGraphemes(str);
+    let currentStringIndex = 0;
+    for (let i = 0;i < graphemes2.length; i++) {
+      if (currentStringIndex >= stringIndex)
+        return i;
+      const grapheme = graphemes2[i];
+      if (grapheme) {
+        currentStringIndex += grapheme.length;
+      }
+    }
+    return graphemes2.length;
+  };
   use_input_default((input, key) => {
     if (key.return) {
       onComplete({ ...widget, customText: text });
     } else if (key.escape) {
       onCancel();
     } else if (key.leftArrow) {
-      setCursorPos(Math.max(0, cursorPos - 1));
+      const currentGraphemeIndex2 = stringToGraphemeIndex(text, cursorPos);
+      if (currentGraphemeIndex2 > 0) {
+        const newStringIndex = graphemeToStringIndex(text, currentGraphemeIndex2 - 1);
+        setCursorPos(newStringIndex);
+      }
     } else if (key.rightArrow) {
-      setCursorPos(Math.min(text.length, cursorPos + 1));
+      const currentGraphemeIndex2 = stringToGraphemeIndex(text, cursorPos);
+      const graphemeCount = getGraphemes(text).length;
+      if (currentGraphemeIndex2 < graphemeCount) {
+        const newStringIndex = graphemeToStringIndex(text, currentGraphemeIndex2 + 1);
+        setCursorPos(newStringIndex);
+      }
     } else if (key.ctrl && input === "ArrowLeft") {
       setCursorPos(0);
     } else if (key.ctrl && input === "ArrowRight") {
       setCursorPos(text.length);
     } else if (key.backspace) {
       if (cursorPos > 0) {
-        setText(text.slice(0, cursorPos - 1) + text.slice(cursorPos));
-        setCursorPos(cursorPos - 1);
+        const currentGraphemeIndex2 = stringToGraphemeIndex(text, cursorPos);
+        if (currentGraphemeIndex2 > 0) {
+          const deleteFromIndex = graphemeToStringIndex(text, currentGraphemeIndex2 - 1);
+          const deleteToIndex = graphemeToStringIndex(text, currentGraphemeIndex2);
+          setText(text.slice(0, deleteFromIndex) + text.slice(deleteToIndex));
+          setCursorPos(deleteFromIndex);
+        }
       }
     } else if (key.delete) {
       if (cursorPos < text.length) {
-        setText(text.slice(0, cursorPos) + text.slice(cursorPos + 1));
+        const currentGraphemeIndex2 = stringToGraphemeIndex(text, cursorPos);
+        const graphemeCount = getGraphemes(text).length;
+        if (currentGraphemeIndex2 < graphemeCount) {
+          const deleteFromIndex = graphemeToStringIndex(text, currentGraphemeIndex2);
+          const deleteToIndex = graphemeToStringIndex(text, currentGraphemeIndex2 + 1);
+          setText(text.slice(0, deleteFromIndex) + text.slice(deleteToIndex));
+        }
       }
-    } else if (input && input.length === 1) {
-      setText(text.slice(0, cursorPos) + input + text.slice(cursorPos));
-      setCursorPos(cursorPos + 1);
+    } else if (input && !key.ctrl && !key.meta) {
+      const newText = text.slice(0, cursorPos) + input + text.slice(cursorPos);
+      setText(newText);
+      setCursorPos(cursorPos + input.length);
     }
   });
+  const graphemes = getGraphemes(text);
+  const currentGraphemeIndex = stringToGraphemeIndex(text, cursorPos);
+  let display = "Enter custom text: ";
+  for (let i = 0;i < graphemes.length; i++) {
+    const grapheme = graphemes[i];
+    if (grapheme) {
+      if (i === currentGraphemeIndex) {
+        display += `\x1B[7m${grapheme}\x1B[0m`;
+      } else {
+        display += grapheme;
+      }
+    }
+  }
+  if (currentGraphemeIndex >= graphemes.length) {
+    display += "\x1B[7m \x1B[0m";
+  }
   return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Box_default, {
     flexDirection: "column",
     children: [
       /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
-        children: [
-          "Enter custom text:",
-          " ",
-          text.slice(0, cursorPos),
-          /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
-            backgroundColor: "gray",
-            color: "black",
-            children: text[cursorPos] ?? " "
-          }, undefined, false, undefined, this),
-          text.slice(cursorPos + 1)
-        ]
-      }, undefined, true, undefined, this),
+        children: display
+      }, undefined, false, undefined, this),
       /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Text, {
         dimColor: true,
         children: "←→ move cursor, Ctrl+←→ jump to start/end, Enter save, ESC cancel"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccstatusline",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "A customizable status line formatter for Claude Code CLI",
   "module": "src/ccstatusline.ts",
   "type": "module",