@ape-egg/codie 0.1.0

package/editable.js

@@ -0,0 +1,196 @@
+// Codie editable textarea layer
+import { CLASS } from './constants.js'
+import { highlightHTML, highlightJS, highlightCSS, highlightCSSOnly, highlightJSOnly } from './highlight.js'
+import { escapeHTML, formatDocument, normalizeInlineWhitespace, cleanupBooleanAttrs } from './format.js'
+import { updateNumberRows } from './numberRows.js'
+import keyboard from './keyboard.js'
+
+// Highlight code based on modes
+const highlight = (code, modes) => {
+  const escaped = escapeHTML(code)
+
+  if (modes.html) {
+    return highlightHTML(escaped, {
+      preserveWhitespace: true,
+      highlightJS: modes.js,
+      highlightCSS: modes.css,
+    })
+  }
+
+  let result = escaped
+  if (modes.js) result = highlightJSOnly(result)
+  if (modes.css) result = highlightCSSOnly(result)
+  return result
+}
+
+// Initialize editable textarea
+export const initEditable = (el, instance, config) => {
+  const textarea = document.createElement('textarea')
+  textarea.className = `${CLASS.CODE_LAYER} ${CLASS.TEXTAREA}`
+  textarea.value = instance._code
+  textarea.spellcheck = false
+  textarea.autocomplete = 'off'
+  textarea.autocapitalize = 'off'
+
+  // Insert textarea before display (so display renders on top)
+  el.insertBefore(textarea, instance.display)
+
+  // Handle input changes
+  const handleInput = () => {
+    const newCode = textarea.value
+    instance._code = newCode
+
+    // Preserve scroll position
+    const scrollTop = el.scrollTop
+    const scrollLeft = el.scrollLeft
+
+    // Update display
+    instance.display.innerHTML = highlight(newCode, instance.modes)
+
+    // Restore scroll
+    el.scrollTop = scrollTop
+    el.scrollLeft = scrollLeft
+
+    // Update line numbers if present
+    if (instance.lineNumbers) {
+      updateNumberRows(instance.lineNumbers, newCode)
+    }
+
+    // Call onEdit callback (access through proxy to get user-set callbacks)
+    const proxy = instance._proxy || instance
+    if (proxy.onEdit) {
+      try {
+        proxy.onEdit({ formatted: normalizeInlineWhitespace(cleanupBooleanAttrs(newCode)), raw: newCode })
+      } catch (e) {
+        if (proxy.onError) proxy.onError({ message: e.message })
+      }
+    }
+  }
+
+  // Handle Tab key for indentation
+  const handleKeydown = e => {
+    if (e.key === 'Tab') {
+      e.preventDefault()
+      const start = textarea.selectionStart
+      const end = textarea.selectionEnd
+      const value = textarea.value
+
+      if (e.shiftKey) {
+        // Outdent: remove 2 spaces from start of selected lines
+        const beforeStart = value.lastIndexOf('\n', start - 1) + 1
+        const lines = value.substring(beforeStart, end).split('\n')
+        const outdented = lines.map(line => line.startsWith('  ') ? line.slice(2) : line)
+        const newValue = value.substring(0, beforeStart) + outdented.join('\n') + value.substring(end)
+        const removed = lines.join('\n').length - outdented.join('\n').length
+
+        textarea.value = newValue
+        textarea.selectionStart = Math.max(beforeStart, start - (lines[0].startsWith('  ') ? 2 : 0))
+        textarea.selectionEnd = end - removed
+      } else if (start !== end) {
+        // Multi-line selection: indent all selected lines
+        const beforeStart = value.lastIndexOf('\n', start - 1) + 1
+        const lines = value.substring(beforeStart, end).split('\n')
+        const indented = lines.map(line => '  ' + line)
+        const newValue = value.substring(0, beforeStart) + indented.join('\n') + value.substring(end)
+
+        textarea.value = newValue
+        textarea.selectionStart = start + 2
+        textarea.selectionEnd = end + (lines.length * 2)
+      } else {
+        // Single cursor: insert 2 spaces
+        textarea.value = value.substring(0, start) + '  ' + value.substring(end)
+        textarea.selectionStart = textarea.selectionEnd = start + 2
+      }
+
+      handleInput()
+    }
+  }
+
+  // Resize textarea for Safari fallback (no field-sizing support)
+  const resizeTextarea = () => {
+    const scrollTop = el.scrollTop
+    const scrollLeft = el.scrollLeft
+    textarea.style.height = 'auto'
+    textarea.style.height = textarea.scrollHeight + 'px'
+    el.scrollTop = scrollTop
+    el.scrollLeft = scrollLeft
+  }
+
+  textarea.addEventListener('input', handleInput)
+  textarea.addEventListener('input', resizeTextarea)
+  textarea.addEventListener('keydown', handleKeydown)
+
+  // Register keyboard shortcuts
+  const cleanupKeyboard = keyboard(textarea, {
+    'Cmd+s': (e) => {
+      e.preventDefault()
+
+      const originalCode = textarea.value
+      const cursorPos = textarea.selectionStart
+
+      // Find which line and column the cursor is on
+      const beforeCursor = originalCode.substring(0, cursorPos)
+      const linesBefore = beforeCursor.split('\n')
+      const lineIndex = linesBefore.length - 1
+      const columnIndex = linesBefore[linesBefore.length - 1].length
+
+      // Format the code
+      const formatted = formatDocument(originalCode)
+
+      // Find the same line in formatted code
+      const formattedLines = formatted.split('\n')
+      const targetLine = Math.min(lineIndex, formattedLines.length - 1)
+
+      // Calculate new cursor position
+      let newCursorPos = 0
+      for (let i = 0; i < targetLine; i++) {
+        newCursorPos += formattedLines[i].length + 1 // +1 for \n
+      }
+
+      // Add column position (respecting new indentation)
+      const targetLineContent = formattedLines[targetLine] || ''
+      const trimmedOriginalLine = (originalCode.split('\n')[lineIndex] || '').trim()
+      const trimmedTargetLine = targetLineContent.trim()
+
+      // If the line content is the same (just indentation changed), preserve relative position
+      if (trimmedOriginalLine === trimmedTargetLine) {
+        const indent = targetLineContent.length - targetLineContent.trimStart().length
+        const relativeColumn = columnIndex - (linesBefore[linesBefore.length - 1].length - linesBefore[linesBefore.length - 1].trimStart().length)
+        newCursorPos += indent + Math.max(0, relativeColumn)
+      } else {
+        // Line content changed, place cursor at end of line
+        newCursorPos += targetLineContent.length
+      }
+
+      // Update textarea and restore cursor
+      textarea.value = formatted
+      textarea.selectionStart = textarea.selectionEnd = Math.min(newCursorPos, formatted.length)
+      handleInput()
+      resizeTextarea()
+    }
+  })
+
+  // Store handlers for cleanup
+  textarea._handlers = { handleInput, handleKeydown, resizeTextarea, cleanupKeyboard }
+
+  // Initial resize - wait for layout to complete
+  requestAnimationFrame(() => resizeTextarea())
+
+  return textarea
+}
+
+// Destroy editable textarea
+export const destroyEditable = instance => {
+  if (!instance.textarea) return
+
+  const { handleInput, handleKeydown, resizeTextarea, cleanupKeyboard } = instance.textarea._handlers
+  instance.textarea.removeEventListener('input', handleInput)
+  instance.textarea.removeEventListener('input', resizeTextarea)
+  instance.textarea.removeEventListener('keydown', handleKeydown)
+
+  // Clean up keyboard shortcuts
+  if (cleanupKeyboard) cleanupKeyboard()
+
+  instance.textarea.remove()
+  instance.textarea = null
+}

package/foldable.js

@@ -0,0 +1,185 @@
+// Codie foldable HTML tags
+import { CLASS, VOID_ELEMENTS } from './constants.js'
+
+// Global fold toggle (attached to window for onclick handlers)
+const toggleFold = (foldId, event) => {
+  const wrapper = document.querySelector(`[data-fold-id="${foldId}"]`)
+  if (!wrapper) return
+
+  wrapper.classList.toggle(CLASS.FOLD_OPEN)
+  const isOpen = wrapper.classList.contains(CLASS.FOLD_OPEN)
+
+  // Alt+click toggles all descendants
+  if (event?.altKey) {
+    wrapper.querySelectorAll(`.${CLASS.FOLD_WRAPPER}`).forEach(el => {
+      el.classList[isOpen ? 'add' : 'remove'](CLASS.FOLD_OPEN)
+    })
+  }
+}
+
+// Attach to window
+if (typeof window !== 'undefined') {
+  window.__codieFoldToggle = toggleFold
+}
+
+// Wrap HTML content with fold controls
+const wrapWithFoldControls = (html, defaultOpenTags = ['html', 'body', 'head']) => {
+  const lines = html.split('\n')
+  const result = []
+  const noNewlineBefore = new Set()
+  const elementStack = []
+  let foldCounter = 0
+
+  // Regex to match highlighted tag patterns
+  const openTagPattern = new RegExp(
+    `<span class="${CLASS.PUNCTUATION}">&lt;<\\/span><span class="${CLASS.TAG}">([^<]+)<\\/span>`
+  )
+  const closeTagPattern = new RegExp(
+    `<span class="${CLASS.PUNCTUATION}">&lt;\\/<\\/span><span class="${CLASS.TAG}">([^<]+)<\\/span>`
+  )
+
+  lines.forEach((line, index) => {
+    const openMatch = line.match(openTagPattern)
+    const closeMatch = line.match(closeTagPattern)
+
+    // Opening tag (without closing tag on same line)
+    if (openMatch && !closeMatch) {
+      const tagName = openMatch[1].toLowerCase()
+
+      // Skip void elements
+      if (VOID_ELEMENTS.has(tagName)) {
+        result.push(line)
+        return
+      }
+
+      const isRoot = elementStack.length === 0
+      const shouldOpen = isRoot || defaultOpenTags.includes(tagName)
+
+      // Propagate open state to parents
+      if (shouldOpen) {
+        elementStack.forEach(parent => {
+          parent.shouldOpen = true
+          if (parent.lineIndex !== undefined) {
+            result[parent.lineIndex] = result[parent.lineIndex].replace(
+              `class="${CLASS.FOLD_WRAPPER}"`,
+              `class="${CLASS.FOLD_WRAPPER} ${CLASS.FOLD_OPEN}"`
+            )
+          }
+        })
+      }
+
+      elementStack.push({
+        tagName,
+        lineIndex: result.length,
+        shouldOpen,
+      })
+
+      const foldId = `codie-fold-${foldCounter++}`
+      const openClass = shouldOpen ? ` ${CLASS.FOLD_OPEN}` : ''
+      const rootAttr = isRoot ? ' data-root="true"' : ''
+
+      result.push(
+        `<div class="${CLASS.FOLD_WRAPPER}${openClass}" data-tag="${tagName}" data-fold-id="${foldId}"${rootAttr}>` +
+        `<div class="${CLASS.FOLD_HEADER}" onclick="__codieFoldToggle('${foldId}', event)" role="button" tabindex="0">` +
+        `<button class="${CLASS.FOLD_TOGGLE}" aria-hidden="true">` +
+        `<icon style="--icon: var(--icon-cross);"></icon>` +
+        `</button>` +
+        `<span class="${CLASS.FOLD_LINE}">${line}</span>` +
+        `<span class="${CLASS.FOLD_PREVIEW}"> ` +
+        `<span class="ellipsis">...</span> ` +
+        `<span class="${CLASS.PUNCTUATION}">&lt;/</span>` +
+        `<span class="${CLASS.TAG}">${tagName}</span>` +
+        `<span class="${CLASS.PUNCTUATION}">&gt;</span>` +
+        `</span>` +
+        `</div>` +
+        `<div class="${CLASS.FOLD_CONTENT}"><div class="${CLASS.FOLD_CONTENT}-inner">`
+      )
+
+      noNewlineBefore.add(result.length)
+    }
+    // Closing tag
+    else if (closeMatch) {
+      const tagName = closeMatch[1].toLowerCase()
+
+      // Find matching opening tag
+      if (elementStack.length > 0 && elementStack[elementStack.length - 1].tagName === tagName) {
+        result.push(`<span>${line}</span>`)
+        noNewlineBefore.add(result.length)
+        result.push(`</div></div></div>`)
+        noNewlineBefore.add(result.length)
+        elementStack.pop()
+      } else {
+        result.push(line)
+      }
+    }
+    // Regular line
+    else {
+      result.push(line)
+    }
+  })
+
+  return result
+    .map((line, idx) => idx === 0 || noNewlineBefore.has(idx) ? line : '\n' + line)
+    .join('')
+}
+
+// Initialize foldable on an element
+export const initFoldable = (el, display, modes) => {
+  // Only fold HTML content
+  if (!modes.html) return
+
+  const html = display.innerHTML
+  display.innerHTML = wrapWithFoldControls(html)
+
+  // Add fold-line class to align content
+  display.querySelectorAll(`.${CLASS.FOLD_LINE}`).forEach(line => {
+    line.style.marginLeft = '-22px' // Pull back to align
+  })
+}
+
+// Destroy foldable - restore plain highlighted content
+export const destroyFoldable = (el, display) => {
+  // Extract text from fold wrappers and reconstruct
+  const extractContent = node => {
+    let result = ''
+    node.childNodes.forEach(child => {
+      if (child.nodeType === Node.TEXT_NODE) {
+        result += child.textContent
+      } else if (child.classList?.contains(CLASS.FOLD_WRAPPER)) {
+        // Get fold-line content
+        const foldLine = child.querySelector(`.${CLASS.FOLD_LINE}`)
+        if (foldLine) result += foldLine.innerHTML
+        // Get fold-content
+        const foldContent = child.querySelector(`.${CLASS.FOLD_CONTENT}`)
+        if (foldContent) result += '\n' + extractContent(foldContent)
+      } else if (child.classList?.contains(CLASS.FOLD_PREVIEW)) {
+        // Skip preview
+      } else if (child.classList?.contains(CLASS.FOLD_HEADER)) {
+        // Skip header
+      } else if (child.classList?.contains(CLASS.FOLD_TOGGLE)) {
+        // Skip toggle
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        result += child.outerHTML || extractContent(child)
+      }
+    })
+    return result
+  }
+
+  // For now, just remove foldable attribute - full restoration would require re-highlighting
+  // This is a simplified version; a full implementation would cache the original HTML
+}
+
+// Expand/collapse specific fold
+export const setFoldState = (el, foldId, open) => {
+  const wrapper = el.querySelector(`[data-fold-id="${foldId}"]`)
+  if (wrapper) {
+    wrapper.classList[open ? 'add' : 'remove'](CLASS.FOLD_OPEN)
+  }
+}
+
+// Expand/collapse all folds
+export const setAllFoldStates = (el, open) => {
+  el.querySelectorAll(`.${CLASS.FOLD_WRAPPER}`).forEach(wrapper => {
+    wrapper.classList[open ? 'add' : 'remove'](CLASS.FOLD_OPEN)
+  })
+}

package/format.js

@@ -0,0 +1,195 @@
+// Codie code formatting
+import { VOID_ELEMENTS, VALUE_ATTRS } from './constants.js'
+
+// Remove common leading whitespace from all lines
+export const dedent = str => {
+  const lines = str.replace(/^\s*\n/, '').replace(/\n\s*$/, '').split('\n')
+  const nonEmpty = lines.filter(l => l.trim())
+  if (!nonEmpty.length) return str.trim()
+  const indent = Math.min(...nonEmpty.map(l => l.match(/^\s*/)[0].length))
+  return lines.map(l => l.slice(indent)).join('\n')
+}
+
+// Clean up boolean attributes for non-value attributes:
+// attr="" → attr, attr="true" → attr, attr="false" → (removed)
+export const cleanupBooleanAttrs = html =>
+  html
+    .replace(/ ([\w-]+)="(?:true|)"/g, (match, attr) =>
+      VALUE_ATTRS.has(attr) ? match : ` ${attr}`
+    )
+    .replace(/ ([\w-]+)="false"/g, (match, attr) =>
+      VALUE_ATTRS.has(attr) ? match : ''
+    )
+
+// Auto-indent JS based on braces and HTML tags
+export const formatJS = code => {
+  const lines = code.split('\n').map(l => l.trim())
+  if (lines.every(l => !l)) return code.trim()
+
+  let result = '', indent = 0
+
+  for (const line of lines) {
+    if (!line) { result += '\n'; continue }
+
+    // Decrease indent before closing HTML tag or brace
+    if (line.match(/^<\//) || line.match(/^[}\]]/)) {
+      indent = Math.max(0, indent - 2)
+    }
+
+    result += ' '.repeat(indent) + line + '\n'
+
+    // Opening HTML tag (not self-closing, no closing on same line)
+    if (line.match(/<[a-z][^>\/]*>/i) && !line.match(/\/>/) && !line.match(/<\/[a-z]+>/i)) {
+      indent += 2
+    }
+
+    // Opening brace/bracket at end
+    if (line.match(/[{(\[]$/)) {
+      indent += 2
+    }
+  }
+
+  return result.trim()
+}
+
+// Format full HTML document with proper indentation
+export const formatDocument = html => {
+  // Strip empty values from boolean attributes, but keep value attributes as-is
+  html = html.replace(/\s([\w-]+)=""/g, (match, attr) => {
+    const isValueAttr = VALUE_ATTRS.has(attr) || attr.startsWith('data-') || attr.startsWith('aria-') || attr.startsWith('on');
+    return isValueAttr ? match : ` ${attr}`;
+  })
+
+  // Preserve <pre> content
+  const preserved = []
+  html = html.replace(/(<pre[^>]*>)([\s\S]*?)(<\/pre>)/gi, (_, open, content, close) => {
+    preserved.push(content)
+    return open + `\x00PRE${preserved.length - 1}\x00` + close
+  })
+
+  // Preserve HTML comments (including vibe comments with operators like >=)
+  const comments = []
+  html = html.replace(/(<!--[\s\S]*?-->)/g, (comment) => {
+    comments.push(comment)
+    return `\x00COMMENT${comments.length - 1}\x00`
+  })
+
+  // Collapse whitespace between tags, but preserve intentional empty lines (2+ newlines)
+  html = html.replace(/>\s+</g, (match) => {
+    const newlineCount = (match.match(/\n/g) || []).length
+    return newlineCount >= 2 ? '>\n\n<' : '><'
+  })
+
+  html = html.replace(/\x00PRE(\d+)\x00/g, (_, idx) => preserved[parseInt(idx)])
+
+  let result = '', indent = 0
+  const tagStack = []
+  const tokens = html.split(/(<[^>]+>|\x00COMMENT\d+\x00)/g).filter(t => t)
+
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i]
+
+    if (token.startsWith('\x00COMMENT')) {
+      // Restore comment and add to result
+      const commentIndex = parseInt(token.match(/\x00COMMENT(\d+)\x00/)[1])
+      const comment = comments[commentIndex]
+      result += ' '.repeat(indent) + comment + '\n'
+    } else if (token.startsWith('</')) {
+      const tagName = token.match(/<\/([a-zA-Z0-9\-]+)/)?.[1]?.toLowerCase()
+      // Find matching opening tag and restore its indent
+      for (let j = tagStack.length - 1; j >= 0; j--) {
+        if (tagStack[j].tagName === tagName) {
+          indent = tagStack[j].indent
+          tagStack.splice(j, 1)
+          break
+        }
+      }
+      result += ' '.repeat(indent) + token + '\n'
+    } else if (token.match(/<[^>]+\/>/)) {
+      // Self-closing tag
+      result += ' '.repeat(indent) + token + '\n'
+    } else if (token.startsWith('<')) {
+      const tagName = token.match(/<([a-zA-Z0-9\-]+)/)?.[1]
+      const tagNameLower = tagName?.toLowerCase()
+
+      // Check for empty element (<tag></tag>)
+      const next = tokens[i + 1]
+      if (next && next === `</${tagName}>`) {
+        result += ' '.repeat(indent) + token + next + '\n'
+        i++
+      } else {
+        result += ' '.repeat(indent) + token + '\n'
+
+        // Non-void elements increase indent
+        if (!VOID_ELEMENTS.has(tagNameLower)) {
+          tagStack.push({ tagName: tagNameLower, indent })
+          indent += 2
+        }
+      }
+    } else {
+      // Text content or preserved empty lines
+      const hasMultipleNewlines = token.includes('\n\n')
+      const text = token.trim()
+
+      if (hasMultipleNewlines && !text) {
+        // Preserve intentional empty lines between elements
+        result += '\n'
+      } else if (text) {
+        const lines = text.split('\n').map(l => l.trim())
+        let cssIndent = 0
+        lines.forEach(line => {
+          if (!line) {
+            result += '\n'
+          } else {
+            if (line.startsWith('}')) cssIndent = Math.max(0, cssIndent - 2)
+            result += ' '.repeat(indent + cssIndent) + line + '\n'
+            if (line.endsWith('{')) cssIndent += 2
+          }
+        })
+      }
+    }
+  }
+
+  return result.trim()
+}
+
+// Escape HTML entities
+export const escapeHTML = str => str
+  .replace(/&/g, '&amp;')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;')
+
+// Unescape HTML entities
+export const unescapeHTML = str => str
+  .replace(/&lt;/g, '<')
+  .replace(/&gt;/g, '>')
+  .replace(/&quot;/g, '"')
+  .replace(/&amp;/g, '&')
+
+// Normalize inline element whitespace to prevent extra spaces in rendered text
+export const normalizeInlineWhitespace = html => {
+  // Preserve <template> content (especially codie templates)
+  const preserved = [];
+  html = html.replace(/(<template[^>]*>)([\s\S]*?)(<\/template>)/gi, (_, open, content, close) => {
+    preserved.push(content);
+    return open + `\x00TEMPLATE${preserved.length - 1}\x00` + close;
+  });
+
+  const inlineTags = 'code|span|a|b|i|em|strong|kbd|mark|small|sub|sup|s|u|var|abbr|cite|q|time|dfn|samp|data';
+  let normalized = html;
+  // Remove whitespace after opening inline tags
+  normalized = normalized.replace(new RegExp(`(<(?:${inlineTags})[^>]*?>)\\s+`, 'gi'), '$1');
+  // Remove whitespace before closing inline tags
+  normalized = normalized.replace(new RegExp(`\\s+(</(?:${inlineTags})>)`, 'gi'), '$1');
+  // Remove whitespace between closing inline tags and punctuation
+  normalized = normalized.replace(
+    new RegExp(`(</(?:${inlineTags})>)\\s+([.,;:!?'")\\]])`, 'gi'),
+    '$1$2',
+  );
+
+  // Restore <template> content
+  normalized = normalized.replace(/\x00TEMPLATE(\d+)\x00/g, (_, idx) => preserved[parseInt(idx)]);
+
+  return normalized;
+}

package/highlight-css.css

@@ -0,0 +1,14 @@
+/* Codie CSS syntax highlighting */
+
+[codie] .codie-css-selector {
+  color: var(--codie-css-selector);
+  font-weight: 600;
+}
+
+[codie] .codie-css-property {
+  color: var(--codie-css-property);
+}
+
+[codie] .codie-css-value {
+  color: var(--codie-css-value);
+}

package/highlight-html.css

@@ -0,0 +1,41 @@
+/* Codie HTML syntax highlighting */
+
+[codie] .codie-tag {
+  color: var(--codie-tag);
+  font-weight: 600;
+}
+
+[codie] .codie-attr-name {
+  color: var(--codie-attr-name);
+}
+
+[codie] .codie-attr-value {
+  color: var(--codie-attr-value);
+}
+
+[codie] .codie-punct {
+  color: var(--codie-punct);
+}
+
+[codie] .codie-comment {
+  color: var(--codie-comment);
+}
+
+[codie] .codie-text {
+  color: var(--codie-text);
+}
+
+/* Vibe-specific tokens */
+[codie] .codie-vibe {
+  color: var(--codie-vibe);
+}
+
+[codie] .codie-vibe-var {
+  color: var(--codie-vibe-var);
+  transition: color 150ms ease-out;
+}
+
+[codie]:hover .codie-vibe-var,
+[codie].codie-has-selection .codie-vibe-var {
+  color: oklch(from currentColor calc(l + 0.25) c h);
+}

package/highlight-js.css

@@ -0,0 +1,25 @@
+/* Codie JavaScript syntax highlighting */
+
+[codie] .codie-js-keyword {
+  color: var(--codie-js-keyword);
+}
+
+[codie] .codie-js-import {
+  color: var(--codie-js-import);
+}
+
+[codie] .codie-js-string {
+  color: var(--codie-js-string);
+}
+
+[codie] .codie-js-function {
+  color: var(--codie-js-function);
+}
+
+[codie] .codie-js-number {
+  color: var(--codie-js-number);
+}
+
+[codie] .codie-js-ident {
+  color: var(--codie-js-ident);
+}

package/highlight-json.css

@@ -0,0 +1,21 @@
+/* Codie JSON syntax highlighting */
+
+[codie] .codie-json-key {
+  color: var(--codie-json-key);
+}
+
+[codie] .codie-json-string {
+  color: var(--codie-json-string);
+}
+
+[codie] .codie-json-number {
+  color: var(--codie-json-number);
+}
+
+[codie] .codie-json-boolean {
+  color: var(--codie-json-boolean);
+}
+
+[codie] .codie-json-null {
+  color: var(--codie-json-null);
+}