@checkstack/ui 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @checkstack/ui
 
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [8a87cd4]
+  - @checkstack/common@0.5.0
+  - @checkstack/frontend-api@0.3.2
+
 ## 0.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {

package/src/components/CodeEditor/languageSupport/json-utils.ts

@@ -0,0 +1,117 @@
+/**
+ * Pure utility functions for JSON parsing that don't depend on CodeMirror.
+ * These are extracted to allow testing without triggering CodeMirror's module loading.
+ */
+
+/**
+ * Check if cursor is in a valid JSON template position.
+ * Returns true if:
+ * 1. Inside a string value (for string templates like "{{payload.name}}")
+ * 2. In a value position after a colon but outside quotes (for number templates like {{payload.count}})
+ * 3. Inside an array element position
+ *
+ * @internal Exported for testing
+ */
+export function isValidJsonTemplatePosition(text: string): boolean {
+  let insideString = false;
+  let inValuePosition = false;
+  // Stack to track object/array nesting: 'o' for object, 'a' for array
+  const nestingStack: ("o" | "a")[] = [];
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    const prevChar = i > 0 ? text[i - 1] : "";
+
+    if (char === '"' && prevChar !== "\\") {
+      insideString = !insideString;
+    } else if (!insideString) {
+      switch (char) {
+        case ":": {
+          inValuePosition = true;
+          break;
+        }
+        case ",": {
+          // After comma: in arrays we stay in value position, in objects we go to key position
+          const currentContext = nestingStack.at(-1);
+          inValuePosition = currentContext === "a";
+          break;
+        }
+        case "{": {
+          // Start of object - next is a key position, not a value
+          nestingStack.push("o");
+          inValuePosition = false;
+          break;
+        }
+        case "[": {
+          // Start of array - next is a value position
+          nestingStack.push("a");
+          inValuePosition = true;
+          break;
+        }
+        case "}": {
+          nestingStack.pop();
+          inValuePosition = false;
+          break;
+        }
+        case "]": {
+          nestingStack.pop();
+          inValuePosition = false;
+          break;
+        }
+      }
+    }
+  }
+
+  // Valid if inside a string OR in a value position (for bare number templates)
+  return insideString || inValuePosition;
+}
+
+/**
+ * Calculate indentation for JSON, properly handling template expressions.
+ * Counts structural { and [ while ignoring {{ template braces.
+ * @internal Exported for testing
+ */
+export function calculateJsonIndentation(
+  textBefore: string,
+  indentUnit: number,
+): number {
+  let depth = 0;
+  let insideString = false;
+  let i = 0;
+
+  while (i < textBefore.length) {
+    const char = textBefore[i];
+    const nextChar = i < textBefore.length - 1 ? textBefore[i + 1] : "";
+    const prevChar = i > 0 ? textBefore[i - 1] : "";
+
+    // Handle string boundaries
+    if (char === '"' && prevChar !== "\\") {
+      insideString = !insideString;
+      i++;
+      continue;
+    }
+
+    if (!insideString) {
+      // Skip template braces {{ and }}
+      if (char === "{" && nextChar === "{") {
+        i += 2;
+        continue;
+      }
+      if (char === "}" && nextChar === "}") {
+        i += 2;
+        continue;
+      }
+
+      // Count structural braces
+      if (char === "{" || char === "[") {
+        depth++;
+      } else if (char === "}" || char === "]") {
+        depth = Math.max(0, depth - 1);
+      }
+    }
+
+    i++;
+  }
+
+  return depth * indentUnit;
+}

package/src/components/CodeEditor/languageSupport/json.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, it } from "bun:test";
 
-import { isValidJsonTemplatePosition, calculateJsonIndentation } from "./json";
+import {
+  isValidJsonTemplatePosition,
+  calculateJsonIndentation,
+} from "./json-utils";
 
 describe("isValidJsonTemplatePosition", () => {
   describe("string values (inside quotes)", () => {

package/src/components/CodeEditor/languageSupport/json.ts

@@ -2,6 +2,12 @@ import { json } from "@codemirror/lang-json";
 import { Decoration } from "@codemirror/view";
 import type { LanguageSupport, DecorationRange } from "./types";
 
+// Re-export pure utils for backwards compatibility
+export {
+  isValidJsonTemplatePosition,
+  calculateJsonIndentation,
+} from "./json-utils";
+
 // Decoration marks for JSON syntax highlighting using inline styles
 // (higher specificity than Lezer parser's CSS classes)
 const jsonStringMark = Decoration.mark({
@@ -20,69 +26,6 @@ const templateMark = Decoration.mark({
   attributes: { style: "color: hsl(190, 70%, 50%); font-weight: 500" },
 });
 
-/**
- * Check if cursor is in a valid JSON template position.
- * Returns true if:
- * 1. Inside a string value (for string templates like "{{payload.name}}")
- * 2. In a value position after a colon but outside quotes (for number templates like {{payload.count}})
- * 3. Inside an array element position
- *
- * @internal Exported for testing
- */
-export function isValidJsonTemplatePosition(text: string): boolean {
-  let insideString = false;
-  let inValuePosition = false;
-  // Stack to track object/array nesting: 'o' for object, 'a' for array
-  const nestingStack: ("o" | "a")[] = [];
-
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
-    const prevChar = i > 0 ? text[i - 1] : "";
-
-    if (char === '"' && prevChar !== "\\") {
-      insideString = !insideString;
-    } else if (!insideString) {
-      switch (char) {
-        case ":": {
-          inValuePosition = true;
-          break;
-        }
-        case ",": {
-          // After comma: in arrays we stay in value position, in objects we go to key position
-          const currentContext = nestingStack.at(-1);
-          inValuePosition = currentContext === "a";
-          break;
-        }
-        case "{": {
-          // Start of object - next is a key position, not a value
-          nestingStack.push("o");
-          inValuePosition = false;
-          break;
-        }
-        case "[": {
-          // Start of array - next is a value position
-          nestingStack.push("a");
-          inValuePosition = true;
-          break;
-        }
-        case "}": {
-          nestingStack.pop();
-          inValuePosition = false;
-          break;
-        }
-        case "]": {
-          nestingStack.pop();
-          inValuePosition = false;
-          break;
-        }
-      }
-    }
-  }
-
-  // Valid if inside a string OR in a value position (for bare number templates)
-  return insideString || inValuePosition;
-}
-
 /**
  * Build comprehensive JSON + template decorations.
  * This uses regex-based matching to apply consistent syntax highlighting
@@ -179,55 +122,11 @@ function buildJsonDecorations(doc: string): DecorationRange[] {
   return filtered;
 }
 
-/**
- * Calculate indentation for JSON, properly handling template expressions.
- * Counts structural { and [ while ignoring {{ template braces.
- * @internal Exported for testing
- */
-export function calculateJsonIndentation(
-  textBefore: string,
-  indentUnit: number,
-): number {
-  let depth = 0;
-  let insideString = false;
-  let i = 0;
-
-  while (i < textBefore.length) {
-    const char = textBefore[i];
-    const nextChar = i < textBefore.length - 1 ? textBefore[i + 1] : "";
-    const prevChar = i > 0 ? textBefore[i - 1] : "";
-
-    // Handle string boundaries
-    if (char === '"' && prevChar !== "\\") {
-      insideString = !insideString;
-      i++;
-      continue;
-    }
-
-    if (!insideString) {
-      // Skip template braces {{ and }}
-      if (char === "{" && nextChar === "{") {
-        i += 2;
-        continue;
-      }
-      if (char === "}" && nextChar === "}") {
-        i += 2;
-        continue;
-      }
-
-      // Count structural braces
-      if (char === "{" || char === "[") {
-        depth++;
-      } else if (char === "}" || char === "]") {
-        depth = Math.max(0, depth - 1);
-      }
-    }
-
-    i++;
-  }
-
-  return depth * indentUnit;
-}
+// Import the pure utils for use in the language support object
+import {
+  isValidJsonTemplatePosition,
+  calculateJsonIndentation,
+} from "./json-utils";
 
 /**
  * JSON language support for CodeEditor with template expression handling.

package/src/components/CodeEditor/languageSupport/markdown-utils.ts

@@ -0,0 +1,65 @@
+/**
+ * Pure utility functions for Markdown parsing that don't depend on CodeMirror.
+ * These are extracted to allow testing without triggering CodeMirror's module loading.
+ */
+
+/**
+ * Check if cursor is in a valid Markdown template position.
+ * Templates can appear almost anywhere in Markdown (text content).
+ * @internal Exported for testing
+ */
+export function isValidMarkdownTemplatePosition(text: string): boolean {
+  // In Markdown, templates are valid almost everywhere except:
+  // - Inside code blocks (``` ... ```)
+  // - Inside inline code (` ... `)
+
+  // Check for unclosed code blocks
+  const codeBlockMatches = text.match(/```/g) || [];
+  if (codeBlockMatches.length % 2 === 1) {
+    return false; // Inside a code block
+  }
+
+  // Check if we're inside inline code on the current line
+  const lastNewline = text.lastIndexOf("\n");
+  const currentLine = text.slice(lastNewline + 1);
+  const backticks = (currentLine.match(/`/g) || []).length;
+
+  // If odd number of backticks, we're inside inline code
+  if (backticks % 2 === 1) {
+    return false;
+  }
+
+  // Valid in all other positions
+  return true;
+}
+
+/**
+ * Calculate indentation for Markdown.
+ * Markdown uses list indentation.
+ * @internal Exported for testing
+ */
+export function calculateMarkdownIndentation(
+  textBefore: string,
+  _indentUnit: number,
+): number {
+  const lines = textBefore.split("\n");
+  if (lines.length === 0) return 0;
+
+  // Find the last non-empty line
+  for (let i = lines.length - 1; i >= 0; i--) {
+    const line = lines[i];
+    if (line.trim().length === 0) continue;
+
+    // Count leading spaces
+    const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
+
+    // If line is a list item, next line should be indented if continuing
+    if (/^\s*[-*+]\s/.test(line) || /^\s*\d+\.\s/.test(line)) {
+      return leadingSpaces;
+    }
+
+    return leadingSpaces;
+  }
+
+  return 0;
+}

package/src/components/CodeEditor/languageSupport/markdown.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from "bun:test";
 import {
   isValidMarkdownTemplatePosition,
   calculateMarkdownIndentation,
-} from "./markdown";
+} from "./markdown-utils";
 
 describe("isValidMarkdownTemplatePosition", () => {
   describe("valid text positions", () => {

package/src/components/CodeEditor/languageSupport/markdown.ts

@@ -2,6 +2,12 @@ import { markdown } from "@codemirror/lang-markdown";
 import { Decoration } from "@codemirror/view";
 import type { LanguageSupport, DecorationRange } from "./types";
 
+// Re-export pure utils for backwards compatibility
+export {
+  isValidMarkdownTemplatePosition,
+  calculateMarkdownIndentation,
+} from "./markdown-utils";
+
 // Decoration marks for Markdown syntax highlighting using inline styles
 const mdHeadingMark = Decoration.mark({
   attributes: { style: "color: hsl(280, 65%, 60%); font-weight: bold" },
@@ -25,36 +31,6 @@ const templateMark = Decoration.mark({
   attributes: { style: "color: hsl(190, 70%, 50%); font-weight: 500" },
 });
 
-/**
- * Check if cursor is in a valid Markdown template position.
- * Templates can appear almost anywhere in Markdown (text content).
- * @internal Exported for testing
- */
-export function isValidMarkdownTemplatePosition(text: string): boolean {
-  // In Markdown, templates are valid almost everywhere except:
-  // - Inside code blocks (``` ... ```)
-  // - Inside inline code (` ... `)
-
-  // Check for unclosed code blocks
-  const codeBlockMatches = text.match(/```/g) || [];
-  if (codeBlockMatches.length % 2 === 1) {
-    return false; // Inside a code block
-  }
-
-  // Check if we're inside inline code on the current line
-  const lastNewline = text.lastIndexOf("\n");
-  const currentLine = text.slice(lastNewline + 1);
-  const backticks = (currentLine.match(/`/g) || []).length;
-
-  // If odd number of backticks, we're inside inline code
-  if (backticks % 2 === 1) {
-    return false;
-  }
-
-  // Valid in all other positions
-  return true;
-}
-
 /**
  * Build Markdown + template decorations.
  */
@@ -141,36 +117,11 @@ function buildMarkdownDecorations(doc: string): DecorationRange[] {
   return filtered;
 }
 
-/**
- * Calculate indentation for Markdown.
- * Markdown uses list indentation.
- * @internal Exported for testing
- */
-export function calculateMarkdownIndentation(
-  textBefore: string,
-  _indentUnit: number,
-): number {
-  const lines = textBefore.split("\n");
-  if (lines.length === 0) return 0;
-
-  // Find the last non-empty line
-  for (let i = lines.length - 1; i >= 0; i--) {
-    const line = lines[i];
-    if (line.trim().length === 0) continue;
-
-    // Count leading spaces
-    const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
-
-    // If line is a list item, next line should be indented if continuing
-    if (/^\s*[-*+]\s/.test(line) || /^\s*\d+\.\s/.test(line)) {
-      return leadingSpaces;
-    }
-
-    return leadingSpaces;
-  }
-
-  return 0;
-}
+// Import the pure utils for use in the language support object
+import {
+  isValidMarkdownTemplatePosition,
+  calculateMarkdownIndentation,
+} from "./markdown-utils";
 
 /**
  * Markdown language support for CodeEditor with template expression handling.

package/src/components/CodeEditor/languageSupport/xml-utils.ts

@@ -0,0 +1,94 @@
+/**
+ * Pure utility functions for XML parsing that don't depend on CodeMirror.
+ * These are extracted to allow testing without triggering CodeMirror's module loading.
+ */
+
+/**
+ * Check if cursor is in a valid XML template position.
+ * Templates can appear in:
+ * 1. Text content between tags: <tag>|</tag>
+ * 2. Attribute values: <tag attr="|">
+ * @internal Exported for testing
+ */
+export function isValidXmlTemplatePosition(text: string): boolean {
+  // Check if we're inside an attribute value (inside quotes after =)
+  let inTag = false;
+  let inAttrValue = false;
+  let quoteChar = "";
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+
+    if (!inTag && char === "<" && text[i + 1] !== "/") {
+      inTag = true;
+      inAttrValue = false;
+    } else if (inTag && char === ">") {
+      inTag = false;
+      inAttrValue = false;
+    } else if (inTag && !inAttrValue && char === "=") {
+      // Next should be a quote
+      const nextChar = text[i + 1];
+      if (nextChar === '"' || nextChar === "'") {
+        quoteChar = nextChar;
+        inAttrValue = true;
+        i++; // Skip the quote
+      }
+    } else if (inAttrValue && char === quoteChar) {
+      inAttrValue = false;
+      quoteChar = "";
+    }
+  }
+
+  // Valid if inside attribute value
+  if (inAttrValue) {
+    return true;
+  }
+
+  // Valid if between tags (text content position)
+  // Check if we're after a closing > and not inside an opening <
+  const lastOpenTag = text.lastIndexOf("<");
+  const lastCloseTag = text.lastIndexOf(">");
+
+  // If last > is after last <, we're in text content
+  if (lastCloseTag > lastOpenTag) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Calculate indentation for XML, properly handling template expressions.
+ * @internal Exported for testing
+ */
+export function calculateXmlIndentation(
+  textBefore: string,
+  indentUnit: number,
+): number {
+  let depth = 0;
+
+  // Match all opening and closing tags
+  const tagRegex = /<\/?[\w:-]+[^>]*\/?>/g;
+  let match;
+
+  while ((match = tagRegex.exec(textBefore)) !== null) {
+    const tag = match[0];
+
+    // Self-closing tag: <tag />
+    if (tag.endsWith("/>")) {
+      // No depth change
+      continue;
+    }
+
+    // Closing tag: </tag>
+    if (tag.startsWith("</")) {
+      depth = Math.max(0, depth - 1);
+      continue;
+    }
+
+    // Opening tag: <tag> or <tag attr="value">
+    depth++;
+  }
+
+  return depth * indentUnit;
+}

package/src/components/CodeEditor/languageSupport/xml.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, it } from "bun:test";
 
-import { isValidXmlTemplatePosition, calculateXmlIndentation } from "./xml";
+import {
+  isValidXmlTemplatePosition,
+  calculateXmlIndentation,
+} from "./xml-utils";
 
 describe("isValidXmlTemplatePosition", () => {
   describe("text content positions", () => {

package/src/components/CodeEditor/languageSupport/xml.ts

@@ -2,6 +2,12 @@ import { xml } from "@codemirror/lang-xml";
 import { Decoration } from "@codemirror/view";
 import type { LanguageSupport, DecorationRange } from "./types";
 
+// Re-export pure utils for backwards compatibility
+export {
+  isValidXmlTemplatePosition,
+  calculateXmlIndentation,
+} from "./xml-utils";
+
 // Decoration marks for XML syntax highlighting using inline styles
 const xmlTagMark = Decoration.mark({
   attributes: { style: "color: hsl(280, 65%, 60%)" },
@@ -16,60 +22,6 @@ const templateMark = Decoration.mark({
   attributes: { style: "color: hsl(190, 70%, 50%); font-weight: 500" },
 });
 
-/**
- * Check if cursor is in a valid XML template position.
- * Templates can appear in:
- * 1. Text content between tags: <tag>|</tag>
- * 2. Attribute values: <tag attr="|">
- * @internal Exported for testing
- */
-export function isValidXmlTemplatePosition(text: string): boolean {
-  // Check if we're inside an attribute value (inside quotes after =)
-  let inTag = false;
-  let inAttrValue = false;
-  let quoteChar = "";
-
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
-
-    if (!inTag && char === "<" && text[i + 1] !== "/") {
-      inTag = true;
-      inAttrValue = false;
-    } else if (inTag && char === ">") {
-      inTag = false;
-      inAttrValue = false;
-    } else if (inTag && !inAttrValue && char === "=") {
-      // Next should be a quote
-      const nextChar = text[i + 1];
-      if (nextChar === '"' || nextChar === "'") {
-        quoteChar = nextChar;
-        inAttrValue = true;
-        i++; // Skip the quote
-      }
-    } else if (inAttrValue && char === quoteChar) {
-      inAttrValue = false;
-      quoteChar = "";
-    }
-  }
-
-  // Valid if inside attribute value
-  if (inAttrValue) {
-    return true;
-  }
-
-  // Valid if between tags (text content position)
-  // Check if we're after a closing > and not inside an opening <
-  const lastOpenTag = text.lastIndexOf("<");
-  const lastCloseTag = text.lastIndexOf(">");
-
-  // If last > is after last <, we're in text content
-  if (lastCloseTag > lastOpenTag) {
-    return true;
-  }
-
-  return false;
-}
-
 /**
  * Build XML + template decorations.
  */
@@ -147,41 +99,11 @@ function buildXmlDecorations(doc: string): DecorationRange[] {
   return filtered;
 }
 
-/**
- * Calculate indentation for XML, properly handling template expressions.
- * @internal Exported for testing
- */
-export function calculateXmlIndentation(
-  textBefore: string,
-  indentUnit: number,
-): number {
-  let depth = 0;
-
-  // Match all opening and closing tags
-  const tagRegex = /<\/?[\w:-]+[^>]*\/?>/g;
-  let match;
-
-  while ((match = tagRegex.exec(textBefore)) !== null) {
-    const tag = match[0];
-
-    // Self-closing tag: <tag />
-    if (tag.endsWith("/>")) {
-      // No depth change
-      continue;
-    }
-
-    // Closing tag: </tag>
-    if (tag.startsWith("</")) {
-      depth = Math.max(0, depth - 1);
-      continue;
-    }
-
-    // Opening tag: <tag> or <tag attr="value">
-    depth++;
-  }
-
-  return depth * indentUnit;
-}
+// Import the pure utils for use in the language support object
+import {
+  isValidXmlTemplatePosition,
+  calculateXmlIndentation,
+} from "./xml-utils";
 
 /**
  * XML language support for CodeEditor with template expression handling.

package/src/components/CodeEditor/languageSupport/yaml-utils.ts

@@ -0,0 +1,101 @@
+/**
+ * Pure utility functions for YAML parsing that don't depend on CodeMirror.
+ * These are extracted to allow testing without triggering CodeMirror's module loading.
+ */
+
+/**
+ * Check if cursor is in a valid YAML template position.
+ * In YAML, templates can appear as values after "key: ".
+ * @internal Exported for testing
+ */
+export function isValidYamlTemplatePosition(text: string): boolean {
+  // Find the current line
+  const lastNewline = text.lastIndexOf("\n");
+  const currentLine = text.slice(lastNewline + 1);
+
+  // Valid positions in YAML:
+  // 1. After a colon and space (value position): "key: |"
+  // 2. Inside a quoted string: 'key: "hello|'
+  // 3. In a list item position: "- |"
+
+  // Check if we're inside a quoted string
+  const singleQuotes = (currentLine.match(/'/g) || []).length;
+  const doubleQuotes = (currentLine.match(/"/g) || []).length;
+  if (singleQuotes % 2 === 1 || doubleQuotes % 2 === 1) {
+    return true;
+  }
+
+  // Check if we're after "key: " (value position)
+  const colonMatch = currentLine.match(/^\s*[\w-]+:\s+/);
+  if (colonMatch) {
+    return true;
+  }
+
+  // Check if we're in a list item position "- "
+  const listMatch = currentLine.match(/^\s*-\s+/);
+  if (listMatch) {
+    return true;
+  }
+
+  // Check if we're after ": " anywhere in the line
+  if (currentLine.includes(": ")) {
+    const afterColon = currentLine.split(": ").slice(1).join(": ");
+    // If we're in the value part (after colon)
+    if (afterColon.length > 0 || currentLine.endsWith(": ")) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Calculate indentation for YAML, properly handling template expressions.
+ * YAML uses indentation-based structure.
+ * @internal Exported for testing
+ */
+export function calculateYamlIndentation(
+  textBefore: string,
+  indentUnit: number,
+): number {
+  const lines = textBefore.split("\n");
+  if (lines.length === 0) return 0;
+
+  // Get the last line (the one we're currently on after Enter)
+  const currentLine = lines.at(-1);
+
+  // If current line is empty or whitespace, look at previous line
+  if (currentLine?.trim().length === 0 && lines.length > 1) {
+    // Find the last non-empty line
+    for (let i = lines.length - 2; i >= 0; i--) {
+      const line = lines[i];
+      if (line.trim().length === 0) continue;
+
+      // Count leading spaces
+      const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
+
+      // If line ends with ":" it's a key that starts a new block
+      if (line.trimEnd().endsWith(":")) {
+        return leadingSpaces + indentUnit;
+      }
+
+      // If line starts with "- " it's a list item
+      if (line.trim().startsWith("-")) {
+        return leadingSpaces + indentUnit;
+      }
+
+      // Otherwise, maintain current indentation
+      return leadingSpaces;
+    }
+  }
+
+  // For non-empty current line, find previous non-empty for context
+  for (let i = lines.length - 1; i >= 0; i--) {
+    const line = lines[i];
+    if (line.trim().length === 0) continue;
+    const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
+    return leadingSpaces;
+  }
+
+  return 0;
+}

package/src/components/CodeEditor/languageSupport/yaml.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, it } from "bun:test";
 
-import { isValidYamlTemplatePosition, calculateYamlIndentation } from "./yaml";
+import {
+  isValidYamlTemplatePosition,
+  calculateYamlIndentation,
+} from "./yaml-utils";
 
 describe("isValidYamlTemplatePosition", () => {
   describe("value positions", () => {

package/src/components/CodeEditor/languageSupport/yaml.ts

@@ -2,6 +2,12 @@ import { yaml } from "@codemirror/lang-yaml";
 import { Decoration } from "@codemirror/view";
 import type { LanguageSupport, DecorationRange } from "./types";
 
+// Re-export pure utils for backwards compatibility
+export {
+  isValidYamlTemplatePosition,
+  calculateYamlIndentation,
+} from "./yaml-utils";
+
 // Decoration marks for YAML syntax highlighting using inline styles
 const yamlKeyMark = Decoration.mark({
   attributes: { style: "color: hsl(210, 100%, 75%)" }, // Bright blue for better visibility
@@ -19,52 +25,6 @@ const templateMark = Decoration.mark({
   attributes: { style: "color: hsl(190, 70%, 50%); font-weight: 500" },
 });
 
-/**
- * Check if cursor is in a valid YAML template position.
- * In YAML, templates can appear as values after "key: ".
- * @internal Exported for testing
- */
-export function isValidYamlTemplatePosition(text: string): boolean {
-  // Find the current line
-  const lastNewline = text.lastIndexOf("\n");
-  const currentLine = text.slice(lastNewline + 1);
-
-  // Valid positions in YAML:
-  // 1. After a colon and space (value position): "key: |"
-  // 2. Inside a quoted string: 'key: "hello|'
-  // 3. In a list item position: "- |"
-
-  // Check if we're inside a quoted string
-  const singleQuotes = (currentLine.match(/'/g) || []).length;
-  const doubleQuotes = (currentLine.match(/"/g) || []).length;
-  if (singleQuotes % 2 === 1 || doubleQuotes % 2 === 1) {
-    return true;
-  }
-
-  // Check if we're after "key: " (value position)
-  const colonMatch = currentLine.match(/^\s*[\w-]+:\s+/);
-  if (colonMatch) {
-    return true;
-  }
-
-  // Check if we're in a list item position "- "
-  const listMatch = currentLine.match(/^\s*-\s+/);
-  if (listMatch) {
-    return true;
-  }
-
-  // Check if we're after ": " anywhere in the line
-  if (currentLine.includes(": ")) {
-    const afterColon = currentLine.split(": ").slice(1).join(": ");
-    // If we're in the value part (after colon)
-    if (afterColon.length > 0 || currentLine.endsWith(": ")) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
 /**
  * Build YAML + template decorations.
  */
@@ -143,56 +103,11 @@ function buildYamlDecorations(doc: string): DecorationRange[] {
   return filtered;
 }
 
-/**
- * Calculate indentation for YAML, properly handling template expressions.
- * YAML uses indentation-based structure.
- * @internal Exported for testing
- */
-export function calculateYamlIndentation(
-  textBefore: string,
-  indentUnit: number,
-): number {
-  const lines = textBefore.split("\n");
-  if (lines.length === 0) return 0;
-
-  // Get the last line (the one we're currently on after Enter)
-  const currentLine = lines.at(-1);
-
-  // If current line is empty or whitespace, look at previous line
-  if (currentLine?.trim().length === 0 && lines.length > 1) {
-    // Find the last non-empty line
-    for (let i = lines.length - 2; i >= 0; i--) {
-      const line = lines[i];
-      if (line.trim().length === 0) continue;
-
-      // Count leading spaces
-      const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
-
-      // If line ends with ":" it's a key that starts a new block
-      if (line.trimEnd().endsWith(":")) {
-        return leadingSpaces + indentUnit;
-      }
-
-      // If line starts with "- " it's a list item
-      if (line.trim().startsWith("-")) {
-        return leadingSpaces + indentUnit;
-      }
-
-      // Otherwise, maintain current indentation
-      return leadingSpaces;
-    }
-  }
-
-  // For non-empty current line, find previous non-empty for context
-  for (let i = lines.length - 1; i >= 0; i--) {
-    const line = lines[i];
-    if (line.trim().length === 0) continue;
-    const leadingSpaces = line.match(/^(\s*)/)?.[1].length ?? 0;
-    return leadingSpaces;
-  }
-
-  return 0;
-}
+// Import the pure utils for use in the language support object
+import {
+  isValidYamlTemplatePosition,
+  calculateYamlIndentation,
+} from "./yaml-utils";
 
 /**
  * YAML language support for CodeEditor with template expression handling.