@pixel-point/toolcraft 0.0.3 → 0.0.6

package/templates/ui/components/controls/slider/slider-value.ts

@@ -17,19 +17,62 @@ export function formatSliderValue(value: number, step: number): string {
   return String(rounded);
 }
 
+const compactSliderValueUnits = new Set([
+  "%",
+  "°",
+  "px",
+  "em",
+  "rem",
+  "vw",
+  "vh",
+  "vmin",
+  "vmax",
+  "x",
+  "s",
+  "ms",
+]);
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function getSliderValueUnitSeparator(unit: string): "" | " " {
+  const normalizedUnit = unit.trim();
+
+  if (
+    normalizedUnit === "" ||
+    compactSliderValueUnits.has(normalizedUnit) ||
+    /^[^\p{Letter}\p{Number}]+$/u.test(normalizedUnit)
+  ) {
+    return "";
+  }
+
+  return " ";
+}
+
 export function applySliderValueLabelUnit(
   valueLabel: string,
   unit?: string,
 ): string {
-  if (!unit || typeof parseSliderValueLabel(valueLabel) !== "number") {
+  const normalizedUnit = unit?.trim();
+
+  if (
+    !normalizedUnit ||
+    typeof parseSliderValueLabel(valueLabel) !== "number"
+  ) {
     return valueLabel;
   }
 
-  return valueLabel.replaceAll(/-?\d+(?:\.\d+)?/g, (match, offset) => {
-    const textAfterMatch = valueLabel.slice(offset + match.length).trimStart();
+  const separator = getSliderValueUnitSeparator(normalizedUnit);
+  const unitPattern = new RegExp(
+    `(-?\\d+(?:\\.\\d+)?)(?:\\s*${escapeRegExp(normalizedUnit)})?`,
+    "g",
+  );
 
-    return textAfterMatch.startsWith(unit) ? match : `${match}${unit}`;
-  });
+  return valueLabel.replaceAll(
+    unitPattern,
+    (_match, value: string) => `${value}${separator}${normalizedUnit}`,
+  );
 }
 
 export function formatSliderValueWithUnit(

package/templates/ui/components/primitives/editable-slider-value-label.tsx

@@ -40,6 +40,7 @@ export function EditableSliderValueLabel({
   const [editing, setEditing] = useState(false);
   const editorRef = useRef<HTMLSpanElement>(null);
   const valueLabelRef = useRef(valueLabel);
+  const isEditableValueLabel = hasEditableNumericValueLabel(valueLabel);
   const valueTextClassName = getEditableValueTextClassName({ layout, textAlign });
   const widestValueLabel = getWidestValueLabel(valueLabel, maxValueLabel);
 
@@ -61,7 +62,7 @@ export function EditableSliderValueLabel({
     }
   }, [editing]);
 
-  if (disabled || !onCommit) {
+  if (disabled || !onCommit || !isEditableValueLabel) {
     const valueTextToneClassName = disabled
       ? "text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] opacity-60"
       : "text-[color:var(--muted-foreground)]";
@@ -323,6 +324,10 @@ function getWidestValueLabel(valueLabel: string, maxValueLabel?: string): string
   return maxValueLabel;
 }
 
+function hasEditableNumericValueLabel(valueLabel: string): boolean {
+  return /-?\d+(?:\.\d+)?/.test(valueLabel);
+}
+
 function selectEditableText(node: HTMLElement): void {
   const selection = window.getSelection();