Address PR review: quote-aware parser, multiline regex, stylelint

- Add quote tracking to parseBindingString so commas inside string
  literals don't split bindings
- Use [\s\S]*? instead of .*? to match multiline data-bind values
- Make off-by-one intent explicit with null sentinel
- Add blank lines after CSS custom properties for stylelint

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: brianmhunt

tko.io/plugins/tsx-tabs.js

@@ -8,16 +8,25 @@
 
 /**
  * Parse a KO binding string into individual {name, value} pairs.
- * Respects nested braces, parens, and brackets so that object/array
- * values and function calls are not split on internal commas.
+ * Respects nested braces, parens, brackets, and quoted strings so that
+ * object/array values and string literals are not split on internal commas.
  */
 function parseBindingString(str) {
   const bindings = []
   let depth = 0
   let start = 0
+  let quote = null
 
   for (let i = 0; i <= str.length; i++) {
-    const ch = str[i]
+    const ch = i < str.length ? str[i] : null
+
+    if (quote) {
+      if (ch === '\\') { i++; continue }
+      if (ch === quote) quote = null
+      continue
+    }
+
+    if (ch === "'" || ch === '"' || ch === '`') { quote = ch; continue }
     if (ch === '{' || ch === '(' || ch === '[') depth++
     else if (ch === '}' || ch === ')' || ch === ']') depth--
     else if ((ch === ',' || i === str.length) && depth === 0) {
@@ -42,7 +51,7 @@ function parseBindingString(str) {
  * Convert HTML with data-bind attributes to TSX with ko-* attributes.
  */
 function convertDataBindToTsx(html) {
-  return html.replace(/data-bind=(["'])(.*?)\1/g, (_match, _quote, bindingStr) => {
+  return html.replace(/data-bind=(["'])([\s\S]*?)\1/g, (_match, _quote, bindingStr) => {
     const bindings = parseBindingString(bindingStr)
     if (bindings.length === 0) return _match
     return bindings.map(({ name, value }) => `ko-${name}={${value}}`).join(' ')

tko.io/src/styles/tko.css

@@ -548,6 +548,7 @@ starlight-tabs {
 
 .tab > [role='tab'] {
   --sl-tab-color-border: var(--sl-color-gray-5);
+
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -563,6 +564,7 @@ starlight-tabs {
 
 .tab [role='tab'][aria-selected='true'] {
   --sl-tab-color-border: var(--sl-color-text-accent);
+
   color: var(--sl-color-white);
   font-weight: 600;
 }