@ape-egg/codie 0.1.2 → 0.1.4

package/codie.js

@@ -61,7 +61,7 @@ const highlight = (code, modes, options = {}) => {
   if (!modes.html) {
     if (modes.json) return highlightJSON(escaped);
     if (modes.css) return highlightCSS(escaped);
-    if (modes.js) return highlightJS(escaped);
+    if (modes.js) return highlightJSRaw(code);
     return escaped;
   }
 

package/constants.js

@@ -53,6 +53,7 @@ export const CLASS = {
   CSS_VALUE: 'codie-css-value',
 
   // Syntax tokens - JS
+  COMMAND: 'codie-command',
   JS_KEYWORD: 'codie-js-keyword',
   JS_IMPORT: 'codie-js-import',
   JS_STRING: 'codie-js-string',

package/format.js

@@ -12,12 +12,13 @@ export const dedent = str => {
 
 // Clean up boolean attributes for non-value attributes:
 // attr="" → attr, attr="true" → attr, attr="false" → (removed)
+// Vibe name bindings (@[expr]) count as attribute names too.
 export const cleanupBooleanAttrs = html =>
   html
-    .replace(/ ([\w-]+)="(?:true|)"/g, (match, attr) =>
+    .replace(/ ([\w-]+|@\[[^\]]+\])="(?:true|)"/g, (match, attr) =>
       VALUE_ATTRS.has(attr) ? match : ` ${attr}`
     )
-    .replace(/ ([\w-]+)="false"/g, (match, attr) =>
+    .replace(/ ([\w-]+|@\[[^\]]+\])="false"/g, (match, attr) =>
       VALUE_ATTRS.has(attr) ? match : ''
     )
 

package/highlight-js.css

@@ -1,5 +1,9 @@
 /* Codie JavaScript syntax highlighting */
 
+[codie] .codie-command {
+  color: var(--codie-js-ident);
+}
+
 [codie] .codie-js-keyword {
   color: var(--codie-js-keyword);
 }

package/highlight.js

@@ -44,7 +44,7 @@ const highlightCommentVariables = (content) => {
 export const highlightJS = (code, options = {}) => {
   const tokens = [];
   const tokenRegex =
-    /(@\[([^\]]+)\])|("(?:[^&]|&(?!quot;))*?")|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|(\/\/[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d+\.?\d*\b)|(\b[a-zA-Z_][a-zA-Z0-9_]*\b)|([^\s])/g;
+    /(@\[([^\]]+)\])|(&quot;(?:[^&]|&(?!quot;))*?&quot;)|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|((?<=^|\s)(?:\/\/|#)[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d[\d_]*(?:\.[\d_]+)?\b)|(\b[a-zA-Z_][a-zA-Z0-9_]*\b)|([^\s])/g;
   let match,
     lastIndex = 0;
 
@@ -112,8 +112,10 @@ export const highlightJS = (code, options = {}) => {
 // JavaScript highlighter for raw (unescaped) content
 export const highlightJSRaw = (code) => {
   const tokens = [];
+  // A command line: a bare lowercase word then arguments, on one full row — no JS
+  // keyword lead, no assignment/call/statement characters, no trailing continuation \
   const tokenRegex =
-    /(<\/?[a-zA-Z][a-zA-Z0-9-]*(?:\s+[^>]*)?>)|("(?:[^"\\]|\\.)*")|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|(\/\/[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d+\.?\d*\b)|(\b[a-zA-Z_][a-zA-Z0-9_]*\b)|([^\s])/g;
+    /(^[ \t]*(?!(?:import|export|const|let|var|return|await|async|function|if|else|for|while|new|typeof|throw)\b)[a-z][\w.-]*[ \t]+[^\n=(){};]*[^\n\\=(){};])$|(<\/?[a-zA-Z][a-zA-Z0-9-]*(?:\s+[^>]*)?>)|("(?:[^"\\]|\\.)*")|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|((?<=^|\s)(?:\/\/|#)[^\n]*)|(\/\*[\s\S]*?\*\/)|(\$\.([a-zA-Z_][a-zA-Z0-9_]*))|(\b\d[\d_]*(?:\.[\d_]+)?\b)|(\b[a-zA-Z_][a-zA-Z0-9_]*\b)|([^\s])/gm;
   let match,
     lastIndex = 0;
 
@@ -122,6 +124,7 @@ export const highlightJSRaw = (code) => {
 
     const [
       full,
+      commandLine,
       htmlTag,
       dblStr,
       sglStr,
@@ -136,7 +139,9 @@ export const highlightJSRaw = (code) => {
     ] = match;
     const escaped = escapeHTML(full);
 
-    if (htmlTag) {
+    if (commandLine) {
+      tokens.push(span(CLASS.COMMAND, escaped));
+    } else if (htmlTag) {
       const tagMatch = full.match(/^(<\/?)([a-zA-Z][a-zA-Z0-9-]*)([\s\S]*?)(>)$/);
       if (tagMatch) {
         const [, open, tagName, attrs, close] = tagMatch;
@@ -193,53 +198,102 @@ export const highlightJSRaw = (code) => {
   return tokens.join('');
 };
 
-// CSS highlighter
+// CSS highlighter - walks brace depth so nested rules (@supports, @media, and
+// & selectors) tokenize at every level, not just the innermost block
 export const highlightCSS = (code, options = {}) => {
-  let result = '';
-  const ruleRegex = /(\/\*[\s\S]*?\*\/)|((?:[^{}\/]|\/(?!\*))+)(\{)([^}]*)(\})/g;
-  let match,
-    lastIndex = 0;
+  const declarations = (text) => {
+    const propRegex = /([\w-]+)(\s*:\s*)([^;]+)(;?)/g;
+    let match,
+      last = 0,
+      result = '';
+
+    while ((match = propRegex.exec(text)) !== null) {
+      if (match.index > last) result += text.slice(last, match.index);
+      const [, prop, colon, value, semi] = match;
+      result += span(CLASS.CSS_PROPERTY, prop) + span(CLASS.PUNCTUATION, colon);
+      const highlighted = value.replace(/@\[([^\]]+)\]/g, (_, expr) => {
+        const h = expr.replace(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g, (v) =>
+          span(CLASS.VIBE_VARIABLE, v),
+        );
+        return `${span(CLASS.VIBE_COLOR, '@[')}${h}${span(CLASS.VIBE_COLOR, ']')}`;
+      });
+      result += span(CLASS.CSS_VALUE, highlighted);
+      if (semi) result += span(CLASS.PUNCTUATION, semi);
+      last = propRegex.lastIndex;
+    }
+    if (last < text.length) result += text.slice(last);
+    return result;
+  };
+
+  // Index of the } closing the block opened at `open`, or -1 when unterminated
+  const closingBrace = (text, open) => {
+    let depth = 1,
+      i = open + 1;
+
+    while (i < text.length && depth) {
+      if (text.startsWith('/*', i)) {
+        const end = text.indexOf('*/', i + 2);
+        i = end === -1 ? text.length : end + 2;
+        continue;
+      }
+      if (text[i] === '{') depth++;
+      else if (text[i] === '}') depth--;
+      i++;
+    }
 
-  while ((match = ruleRegex.exec(code)) !== null) {
-    if (match.index > lastIndex) result += code.slice(lastIndex, match.index);
+    return depth ? -1 : i - 1;
+  };
+
+  const block = (text, inRule) => {
+    const flush = (chunk) => (inRule ? declarations(chunk) : chunk);
+    let result = '',
+      i = 0,
+      pending = 0;
+
+    while (i < text.length) {
+      if (text.startsWith('/*', i)) {
+        const end = text.indexOf('*/', i + 2);
+        const stop = end === -1 ? text.length : end + 2;
+        result += flush(text.slice(pending, i)) + span(CLASS.COMMENT, text.slice(i, stop));
+        i = pending = stop;
+        continue;
+      }
 
-    const [, comment, selector, open, props, close] = match;
+      // Statement at-rules (@import, @layer a, b;) close on ; with no block
+      if (text[i] === ';' && text.slice(pending, i).trim().startsWith('@')) {
+        const statement = text.slice(pending, i);
+        result +=
+          statement.match(/^(\s*)/)[1] +
+          span(CLASS.CSS_SELECTOR, statement.trim()) +
+          span(CLASS.PUNCTUATION, ';');
+        i = pending = i + 1;
+        continue;
+      }
 
-    if (comment) {
-      result += span(CLASS.COMMENT, comment);
-    } else {
-      const ws = selector.match(/^(\s*)/)[1];
-      result +=
-        ws + span(CLASS.CSS_SELECTOR, selector.trim()) + ' ' + span(CLASS.PUNCTUATION, open);
-
-      const propRegex = /([\w-]+)(\s*:\s*)([^;]+)(;?)/g;
-      let propMatch,
-        propLast = 0,
-        propsResult = '';
-
-      while ((propMatch = propRegex.exec(props)) !== null) {
-        if (propMatch.index > propLast) propsResult += props.slice(propLast, propMatch.index);
-        const [, prop, colon, value, semi] = propMatch;
-        propsResult += span(CLASS.CSS_PROPERTY, prop) + span(CLASS.PUNCTUATION, colon);
-        const highlighted = value.replace(/@\[([^\]]+)\]/g, (_, expr) => {
-          const h = expr.replace(/\b[a-zA-Z_][a-zA-Z0-9_]*\b/g, (v) =>
-            span(CLASS.VIBE_VARIABLE, v),
-          );
-          return `${span(CLASS.VIBE_COLOR, '@[')}${h}${span(CLASS.VIBE_COLOR, ']')}`;
-        });
-        propsResult += span(CLASS.CSS_VALUE, highlighted);
-        if (semi) propsResult += span(CLASS.PUNCTUATION, semi);
-        propLast = propRegex.lastIndex;
+      if (text[i] === '{') {
+        const close = closingBrace(text, i);
+        const prelude = text.slice(pending, i);
+        const ws = prelude.match(/^(\s*)/)[1];
+        const name = prelude.trim();
+
+        result +=
+          ws +
+          (name ? span(CLASS.CSS_SELECTOR, name) + ' ' : '') +
+          span(CLASS.PUNCTUATION, '{') +
+          block(text.slice(i + 1, close === -1 ? text.length : close), true) +
+          (close === -1 ? '' : span(CLASS.PUNCTUATION, '}'));
+
+        i = pending = close === -1 ? text.length : close + 1;
+        continue;
       }
-      if (propLast < props.length) propsResult += props.slice(propLast);
 
-      result += propsResult + span(CLASS.PUNCTUATION, close);
+      i++;
     }
-    lastIndex = ruleRegex.lastIndex;
-  }
 
-  if (lastIndex < code.length) result += code.slice(lastIndex);
-  return result;
+    return result + flush(text.slice(pending));
+  };
+
+  return block(code, false);
 };
 
 // JSON highlighter (receives HTML-escaped code)
@@ -305,6 +359,54 @@ export const highlightJSOnly = (html, options = {}) => {
   );
 };
 
+// Bare CSS rules sitting outside any markup, handed to highlightCSS one whole
+// brace-balanced block at a time. Markup inside a candidate disqualifies it —
+// that is HTML, already highlighted.
+const bareCSS = (text) => {
+  let result = '',
+    i = 0,
+    done = 0;
+
+  while (i < text.length) {
+    if (text[i] !== '{') {
+      i++;
+      continue;
+    }
+
+    let start = i;
+    while (start > done && !'<>{}'.includes(text[start - 1])) start--;
+
+    let depth = 0,
+      j = i,
+      close = -1;
+
+    while (j < text.length) {
+      const c = text[j];
+      if (c === '<' || c === '>') break;
+      if (c === '{') depth++;
+      else if (c === '}' && !--depth) {
+        close = j;
+        break;
+      }
+      j++;
+    }
+
+    if (start === i || close === -1) {
+      i++;
+      continue;
+    }
+
+    const candidate = text.slice(start, close + 1);
+    if (/[\w-]+\s*:\s*/.test(candidate)) {
+      result += text.slice(done, start) + highlightCSS(candidate);
+      done = close + 1;
+    }
+    i = close + 1;
+  }
+
+  return result + text.slice(done);
+};
+
 // HTML highlighter - main entry point
 export const highlightHTML = (
   html,
@@ -324,21 +426,25 @@ export const highlightHTML = (
     span(CLASS.COMMENT, `&lt;!--${highlightCommentVariables(content)}--&gt;`),
   );
 
-  // HTML tags with attributes
+  // HTML tags with attributes (attribute names can be @[...] name bindings)
   highlighted = highlighted.replace(
-    /(&lt;\/?)([a-zA-Z0-9\-]+)((?:\s+[a-zA-Z0-9\-:]+(?:=(?:&quot;(?:(?!&quot;).)*?&quot;|'[^']*'|[^\s&gt;]+))?)*\s*)(\/?\s*&gt;)/gs,
+    /(&lt;\/?)([a-zA-Z0-9\-]+)((?:\s+(?:[a-zA-Z0-9\-:]+|@\[[^\]]+\])(?:=(?:&quot;(?:(?!&quot;).)*?&quot;|'[^']*'|[^\s&gt;]+))?)*\s*)(\/?\s*&gt;)/gs,
     (fullMatch, open, tag, attrs, close) => {
       let result = span(CLASS.PUNCTUATION, open) + span(CLASS.TAG, tag);
 
       if (attrs) {
         if (attrs.trim()) {
           const attrRegex =
-            /([a-zA-Z0-9\-:]+)(=(?:&quot;((?:(?!&quot;).)*?)&quot;|'([^']*)'|([^\s&gt;]+)))?/gs;
+            /([a-zA-Z0-9\-:]+|@\[[^\]]+\])(=(?:&quot;((?:(?!&quot;).)*?)&quot;|'([^']*)'|([^\s&gt;]+)))?/gs;
           let attrMatch,
             last = 0;
 
           while ((attrMatch = attrRegex.exec(attrs)) !== null) {
-            result += attrs.substring(last, attrMatch.index) + span(CLASS.ATTR_NAME, attrMatch[1]);
+            result +=
+              attrs.substring(last, attrMatch.index) +
+              (attrMatch[1].startsWith('@[')
+                ? highlightBindings(attrMatch[1])
+                : span(CLASS.ATTR_NAME, attrMatch[1]));
 
             if (attrMatch[2]) {
               result += span(CLASS.PUNCTUATION, '=');
@@ -407,10 +513,7 @@ export const highlightHTML = (
     );
 
     // CSS rules outside <style> tags (bare CSS blocks in mixed HTML+CSS snippets)
-    highlighted = highlighted.replace(
-      /([^<>{}]+\{[^<>{}]*\})/g,
-      (match) => /[\w-]+\s*:\s*/.test(match) ? highlightCSS(match) : match,
-    );
+    highlighted = bareCSS(highlighted);
   }
 
   // Remaining @[...] patterns

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/codie",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Modular code display and editing package",
   "type": "module",
   "main": "codie.js",
@@ -21,6 +21,9 @@
     "syntax-highlighting",
     "code-display"
   ],
-  "author": "kortes",
-  "license": "MIT"
+  "author": "kkortes",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/structure.css

@@ -50,6 +50,9 @@
   min-height: 100%;
   border: none;
   outline: none;
+  box-shadow: none;
+  border-radius: 0;
+  background: none;
   resize: none;
   overflow: hidden;
   color: transparent;