{"_id":"@ape-egg/codie","_rev":"8-ccf71424aa126ab864f0a9741367df5f","name":"@ape-egg/codie","dist-tags":{"latest":"0.1.7"},"versions":{"0.1.0":{"name":"@ape-egg/codie","version":"0.1.0","keywords":["code","editor","syntax-highlighting","code-display"],"author":{"name":"Kim Korte"},"license":"ISC","_id":"@ape-egg/codie@0.1.0","maintainers":[{"name":"kortes","email":"me@korte.kim"}],"dist":{"shasum":"0d1db383914f9eb3c52dc63e9f22f5c316fd940d","tarball":"https://registry.npmjs.org/@ape-egg/codie/-/codie-0.1.0.tgz","fileCount":17,"integrity":"sha512-tkdR98lRYMzyyIvaNJrOSk3lHKTHNSMr4IblkPL6Oi+0/InYdpZZACIUtfQFHEG6yDU/G7WNr8twIzNl1euIBg==","signatures":[{"sig":"MEUCIQCbg4DX4mrcGefeBtjiRbOEUN2cNbmBzqnoS4sWeWLT+gIgXMul0JjpGGyvbKMg57gfMs/OD7mGe47tgmc+7EjDdCk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":65944},"main":"codie.js","type":"module","exports":{".":"./codie.js","./format":"./format.js","./codie.css":"./codie.css","./constants":"./constants.js","./highlight":"./highlight.js"},"gitHead":"2fd1ccd735cba8311a03a3d8a5e6db5c2f88c581","_npmUser":{"name":"kortes","email":"me@korte.kim"},"_npmVersion":"11.6.2","description":"Modular code display and editing package","directories":{},"_nodeVersion":"24.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/codie_0.1.0_1772655835622_0.009735698618407174","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@ape-egg/codie","version":"0.1.1","keywords":["code","editor","syntax-highlighting","code-display"],"author":{"name":"kortes"},"license":"MIT","_id":"@ape-egg/codie@0.1.1","maintainers":[{"name":"kortes","email":"me@korte.kim"}],"dist":{"shasum":"99ca16553e46db3d573972aca85f04a06fa0617c","tarball":"https://registry.npmjs.org/@ape-egg/codie/-/codie-0.1.1.tgz","fileCount":17,"integrity":"sha512-P/oJfzIM1gf3gpBehzudIuGf/uGPAaUlRzkUR8wErA6nSx7h0pj6AowVn7bkiaFwtvGj2HXsOooDaiT0v98AmQ==","signatures":[{"sig":"MEUCIQDI9l4y7zWOcGg4/AwJ5RBPsQR+Bmt7bVZmLdd5qwEsEAIgNtuybhR9l9KxkqngmecYpfj3MCdm2Bdhn6udA9bGrQ4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66303},"main":"codie.js","type":"module","exports":{".":"./codie.js","./format":"./format.js","./codie.css":"./codie.css","./constants":"./constants.js","./highlight":"./highlight.js"},"gitHead":"118405ca2550a6c2eead999368fc6a0b050c8c43","_npmUser":{"name":"kortes","email":"me@korte.kim"},"_npmVersion":"11.6.2","description":"Modular code display and editing package","directories":{},"_nodeVersion":"24.12.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/codie_0.1.1_1774597157317_0.6592087284352319","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@ape-egg/codie","version":"0.1.2","keywords":["code","editor","syntax-highlighting","code-display"],"author":{"name":"kortes"},"license":"MIT","_id":"@ape-egg/codie@0.1.2","maintainers":[{"name":"kortes","email":"me@korte.kim"}],"dist":{"shasum":"414e4e5ddaa3fdb8636ef67a992521dcf42a09ae","tarball":"https://registry.npmjs.org/@ape-egg/codie/-/codie-0.1.2.tgz","fileCount":17,"integrity":"sha512-Q0ysFO5rzrGVLB2R098/6aLTnYKPSUb9if9Se4LwqidWpBS5dCp4TCPavdvHeMXHccqRhPs3EXyFTHgtk6ebNw==","signatures":[{"sig":"MEYCIQC1mT6LN6hp7x/A19H99n0IC67qOVEkkgL4064CsSzcaAIhAJxJXmoCLBSyFKT+gIlE8i7ZmLkUflPbP5QhJk7HnEwy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66336},"main":"codie.js","type":"module","exports":{".":"./codie.js","./format":"./format.js","./codie.css":"./codie.css","./constants":"./constants.js","./highlight":"./highlight.js"},"gitHead":"956843b325b3d3af1b949a40f389d363806f30ef","_npmUser":{"name":"kortes","email":"me@korte.kim"},"_npmVersion":"11.6.2","description":"Modular code display and editing package","directories":{},"_nodeVersion":"24.12.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/codie_0.1.2_1774982471985_0.5207552932169195","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@ape-egg/codie","version":"0.1.3","keywords":["code","editor","syntax-highlighting","code-display"],"author":{"name":"kkortes"},"license":"ISC","_id":"@ape-egg/codie@0.1.3","maintainers":[{"name":"kortes","email":"me@korte.kim"}],"dist":{"shasum":"28b6708d616308b15d5517e29ebbded7908e11e6","tarball":"https://registry.npmjs.org/@ape-egg/codie/-/codie-0.1.3.tgz","fileCount":17,"integrity":"sha512-e1j4O8clDkQ5shmThSpwKvQeTvMDC9ouN+l07mQ50BZvw3bYZoC2CLNYXlMV4XQACGj5za9n96zvzvA8NSqJ8A==","signatures":[{"sig":"MEQCIC5VET3LXxRJWXSEU2j3ckl0fQ8H17ZOtDToAdxOQYLyAiA6YUPndxqw3EUpWFw8dk9sBT7Wv+F4jObOH30vY8iRtA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67301},"main":"codie.js","type":"module","exports":{".":"./codie.js","./format":"./format.js","./codie.css":"./codie.css","./constants":"./constants.js","./highlight":"./highlight.js"},"gitHead":"5d1d323c056b4bf6fcf296f278ddf1a777c9ddd6","_npmUser":{"name":"kortes","email":"me@korte.kim"},"_npmVersion":"11.6.2","description":"Modular code display and editing package","directories":{},"_nodeVersion":"24.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/codie_0.1.3_1786694949293_0.2525512345914578","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@ape-egg/codie","version":"0.1.4","keywords":["code","editor","syntax-highlighting","code-display"],"author":{"name":"kkortes"},"license":"ISC","_id":"@ape-egg/codie@0.1.4","maintainers":[{"name":"kortes","email":"me@korte.kim"}],"dist":{"shasum":"3b54b046c76438c0eb160957b20e9d1341165aef","tarball":"https://registry.npmjs.org/@ape-egg/codie/-/codie-0.1.4.tgz","fileCount":17,"integrity":"sha512-OptoZOFaxboZHXEHJ3Go95UEAcv9+jgBxcpeexuqPqe4GHaYpjJkMUrolXkBLxuEO1s8fFsKQ/ftZKuU1rKYWA==","signatures":[{"sig":"MEQCIH9q4JICxK2pr1Hkc/9gWP9pT5vXaAQG/3Ut56KMqN2mAiBSV1YO0N2i75H6JqPEKExrr/Yiqq/CBc8+wcGqzmYjiA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":69622},"main":"codie.js","type":"module","exports":{".":"./codie.js","./format":"./format.js","./codie.css":"./codie.css","./constants":"./constants.js","./highlight":"./highlight.js"},"gitHead":"a4c07b6b686c1feb54558793a2c2bc6138773825","_npmUser":{"name":"kortes","email":"me@korte.kim"},"_npmVersion":"11.6.2","description":"Modular code display and editing package","directories":{},"_nodeVersion":"24.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/codie_0.1.4_1787143977145_0.7655901184870137","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@ape-egg/codie","version":"0.1.5","keywords":["code","editor","syntax-highlighting","code-display"],"author":{"name":"kkortes"},"license":"ISC","_id":"@ape-egg/codie@0.1.5","maintainers":[{"name":"kortes","email":"me@korte.kim"}],"dist":{"shasum":"a7050f03c31c32278373e5909379866427d0aaf1","tarball":"https://registry.npmjs.org/@ape-egg/codie/-/codie-0.1.5.tgz","fileCount":17,"integrity":"sha512-hTQYnSSptT6awRPyQLazLBKKMsmyzcUpOiZ2ioD+03/VNGKbJ6d4GznYD5vkSNDxg3gQwgnu9T65yEc7pDooFA==","signatures":[{"sig":"MEUCIQDndTM3coXOpEa8h8n68TlTh2BeI8+zM6wW7q1Z0XaPtAIgLOtRfzwixNkURYz0FaL5iKI7ss2saEf4/rHchTj3FYw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70122},"main":"codie.js","type":"module","exports":{".":"./codie.js","./format":"./format.js","./codie.css":"./codie.css","./constants":"./constants.js","./highlight":"./highlight.js"},"gitHead":"7f3e61e8fd4db234ad4c9fe038cb9a97d6c7b7f9","_npmUser":{"name":"kortes","email":"me@korte.kim"},"_npmVersion":"11.6.2","description":"Modular code display and editing package","directories":{},"_nodeVersion":"24.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/codie_0.1.5_1787230109961_0.745153847691238","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@ape-egg/codie","version":"0.1.6","keywords":["code","editor","syntax-highlighting","code-display"],"author":{"name":"kkortes"},"license":"ISC","_id":"@ape-egg/codie@0.1.6","maintainers":[{"name":"kortes","email":"me@korte.kim"}],"dist":{"shasum":"639e9980666ed94142ea152312e376c1465a65fe","tarball":"https://registry.npmjs.org/@ape-egg/codie/-/codie-0.1.6.tgz","fileCount":17,"integrity":"sha512-lFDZ82vJOGUY3hVYmSRIVvrGGTZLNMKTbiJCJx8oZwppiylvL+V2u2LfCMTDAqcpqawYKjFGh6d5qOr0ei3kXg==","signatures":[{"sig":"MEUCIHKeODjhwJKe+nbwehk4VVLQD9vvHaflJ8vCOlV1eu4/AiEAlyjTUh02/iJzm17GCQJZvvEcmqKV2JmI5vP3nIWPdFg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70082},"main":"codie.js","type":"module","exports":{".":"./codie.js","./format":"./format.js","./codie.css":"./codie.css","./constants":"./constants.js","./highlight":"./highlight.js"},"gitHead":"265a48f8901be927eda9f3a89c7c449dc8983626","_npmUser":{"name":"kortes","email":"me@korte.kim"},"_npmVersion":"11.6.2","description":"Modular code display and editing package","directories":{},"_nodeVersion":"24.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/codie_0.1.6_1788557897618_0.3332294774625364","host":"s3://npm-registry-packages-npm-production"}},"0.1.7":{"name":"@ape-egg/codie","version":"0.1.7","description":"Modular code display and editing package","type":"module","main":"codie.js","exports":{".":"./codie.js","./codie.css":"./codie.css","./highlight":"./highlight.js","./format":"./format.js","./constants":"./constants.js"},"keywords":["code","editor","syntax-highlighting","code-display"],"author":{"name":"kkortes"},"license":"ISC","publishConfig":{"access":"public"},"gitHead":"00f33afa40eca7cb00a5931233dfc5b21512b2a7","_id":"@ape-egg/codie@0.1.7","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-RTuex7IVb9NZS4HzNiegDF7epduspxTyuvpL3FvruSvYX3LGKBemuslQbTSWiUTyliA33O63deHVgH9h2zVbjQ==","shasum":"8852df0ed544f705874d4ea748d50b7e4777b563","tarball":"https://registry.npmjs.org/@ape-egg/codie/-/codie-0.1.7.tgz","fileCount":17,"unpackedSize":71621,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDZE/PJFT8NmNnXpq0vDGEThsSra2i8CuoFjTh0Y8eemAIhAPJa9YSw6vvSyAhTiiYq2rPB69cSDuscp6qQ4i5PG9Ej"}]},"_npmUser":{"name":"kortes","email":"me@korte.kim"},"directories":{},"maintainers":[{"name":"kortes","email":"me@korte.kim"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/codie_0.1.7_1788720337707_0.7861567641781322"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-04T20:23:55.495Z","modified":"2026-09-06T18:45:38.059Z","0.1.0":"2026-03-04T20:23:55.948Z","0.1.1":"2026-03-27T07:39:17.508Z","0.1.2":"2026-03-31T18:41:12.153Z","0.1.3":"2026-08-14T08:09:09.460Z","0.1.4":"2026-08-19T12:52:57.300Z","0.1.5":"2026-08-20T12:48:30.113Z","0.1.6":"2026-09-04T21:38:17.773Z","0.1.7":"2026-09-06T18:45:37.854Z"},"author":{"name":"kkortes"},"license":"ISC","keywords":["code","editor","syntax-highlighting","code-display"],"description":"Modular code display and editing package","maintainers":[{"name":"kortes","email":"me@korte.kim"}],"readme":"# Codie\n\nModular code display and editing package for the web.\n\n## Overview\n\n**Codie** is a lightweight, modular code highlighter and editor that bridges the gap between static code display and full in-browser IDEs. Built with vanilla JavaScript, it provides syntax highlighting, live editing, and seamless integration with reactive frameworks like Vibe.\n\n**Vision:** Codie is a spectrum from static highlighter to full in-browser IDE:\n\n```\nMinimal (vanilla)     →     Editor     →     Full REPL (vibe-powered)\nhighlight + format    +editable             +live output, inspect,\n                      +numberedRows          visual editing, zero-build HMR\n```\n\n## Features\n\n### Core Features\n\n- **Syntax Highlighting**: HTML, CSS, and JavaScript with language-aware highlighting\n- **Editable Mode**: Transform static code into a live editor with textarea overlay\n- **Line Numbers**: Optional numbered rows for code reference\n- **Its Own Element**: `<codie>` is the block; `<template codie>` holds HTML the browser must not parse\n- **Language Modes**: Granular control via attributes (`highlight-html`, `highlight-css`, `highlight-js`)\n- **Dark/Light Themes**: Toggle with `[dark]` attribute\n- **Runtime State Toggle**: Change features dynamically via `codieRef.editable`, `codieRef.numberedRows`\n\n### Editing Features\n\n- **Tab Handling**: Tab key inserts 2 spaces\n- **Multi-line Indent**: Select multiple lines + Tab indents all\n- **Outdent**: Shift+Tab removes indentation\n- **Live Preview**: `onEdit` callback fires on every change\n- **Error Handling**: `onError` callback for execution failures\n\n## Installation\n\n```bash\nnpm install @ape-egg/codie\n```\n\n## Usage\n\n### Basic Syntax Highlighting\n\n```html\n<link rel=\"stylesheet\" href=\"@ape-egg/codie/codie.css\" />\n<script type=\"module\">\n  import codie from '@ape-egg/codie';\n\n  codie();\n</script>\n\n<codie>\n  const greet = (name) => `Hello, ${name}!`;\n</codie>\n```\n\n`codie()` with no argument takes the first `<codie>` or `[codie]` element in the document.\n\n### HTML Inside the Block\n\nThe browser parses markup written inside `<codie>`. Put HTML in a `<template codie>` instead, so it reaches codie as text:\n\n```html\n<template codie>\n  <div>\n    <p>Hello, world!</p>\n  </div>\n</template>\n```\n\nThe `codie` attribute makes any element a codie instance; `<codie>` needs none.\n\n### Editable Code with Line Numbers\n\n```js\nimport codie from '@ape-egg/codie';\n\nconst editor = codie('codie');\neditor.editable = true;\neditor.numberedRows = true;\n```\n\n### Live Preview with onEdit\n\n```js\nconst outputRef = document.querySelector('output');\n\nconst editor = codie('codie');\neditor.editable = true;\neditor.onEdit = ({ formatted, raw }) => {\n  outputRef.innerHTML = formatted;\n};\n```\n\n### Language-Specific Highlighting\n\n```html\n<!-- Only highlight HTML -->\n<template codie highlight-html>...</template>\n\n<!-- Only highlight CSS -->\n<codie highlight-css>...</codie>\n\n<!-- Only highlight JavaScript -->\n<codie highlight-js>...</codie>\n\n<!-- Highlight all languages (default) -->\n<codie>...</codie>\n```\n\n## API\n\n### `codie(selector | element | config)`\n\nInitialize a codie instance.\n\n**Parameters:**\n- `selector` (string): Query selector for the codie element — `codie` for the element, `[codie]` for an attributed one\n- `element` (Element): DOM element reference\n- `config` (object): Configuration object with optional `editable`, `numberedRows`, `foldable` properties; the element is the first `codie, [codie]` in the document\n\n**Returns:** Codie instance proxy\n\n### Instance Properties\n\n```js\nconst editor = codie('codie');\n\n// Get/set code content\neditor.code; // Get current code\neditor.code = '<div>New code</div>'; // Set code (updates display + textarea)\n\n// Toggle features\neditor.editable = true; // Enable editing\neditor.numberedRows = true; // Show line numbers\neditor.foldable = false; // Disable code folding (experimental)\n\n// Callbacks\neditor.onEdit = ({ formatted, raw }) => {\n  // formatted: cleaned up for display\n  // raw: exact code content\n};\n\neditor.onError = (error) => {\n  // Handle errors during editing\n};\n```\n\n### Exported Utilities\n\n```js\nimport {\n  highlightHTML,\n  highlightJS,\n  highlightCSS,\n  highlightJSRaw,\n  escapeHTML,\n  unescapeHTML,\n  formatDocument,\n  normalizeInlineWhitespace,\n  ATTR,\n  CLASS,\n} from '@ape-egg/codie';\n```\n\n## Attributes\n\n### Container Attributes\n\nA `<codie>` element is an instance by its tag. The attributes below go on it, or on any other element carrying `codie`:\n\n- `codie` - Marks an element that is not `<codie>` as an instance, `<template codie>` above all\n- `dehydrate` - Skip initialization (for documentation)\n- `highlight-html` - Enable HTML highlighting only\n- `highlight-css` - Enable CSS highlighting only\n- `highlight-js` - Enable JavaScript highlighting only\n- `dark` - Apply dark theme\n\n### Runtime Attributes (applied by codie)\n\n- `codie-editable` - Applied when editable mode is active\n- `codie-numbered` - Applied when line numbers are shown\n- `codie-foldable` - Applied when folding is enabled (experimental)\n\n## Architecture\n\nCodie uses a **layered approach** with CSS Grid:\n\n1. **Display Layer** (`<pre>`) - Syntax-highlighted code\n2. **Textarea Layer** (optional) - Editable overlay when `editable = true`\n3. **Line Numbers** (optional) - Positioned overlay when `numberedRows = true`\n\nAll layers are synchronized via a reactive proxy that updates the DOM when properties change.\n\n## Vibe Integration\n\nCodie pairs naturally with Vibe for live, reactive code editing:\n\n```js\nimport { init } from '@ape-egg/vibe';\nimport codie from '@ape-egg/codie';\n\ninit({ output: '' });\n\nconst editor = codie('template[codie]');\neditor.editable = true;\neditor.onEdit = ({ formatted }) => {\n  $.output = formatted;\n};\n```\n\n```html\n<template codie>\n  <p>Edit me!</p>\n</template>\n\n<output>@[output]</output>\n```\n\n## Roadmap\n\n### Implemented\n\n- ✓ Syntax highlighting (HTML, CSS, JS)\n- ✓ Editable mode with textarea overlay\n- ✓ Line numbers\n- ✓ Tab handling (insert spaces, multi-line indent, outdent)\n- ✓ onEdit/onError callbacks\n- ✓ Template support\n- ✓ Language modes\n- ✓ Dark/light themes\n\n### Planned\n\n- Self-documenting REPL (execute code from editor)\n- Smart script execution (only re-run when changed)\n- Vibe exclusion zones (prevent parent vibe from watching preview)\n- Hot state preservation (preserve state across re-execution)\n- Code folding (deferred due to complexity with editable mode)\n- Inspect mode (click preview element to highlight code)\n- Visual editing (drag-drop reorder in preview)\n\n## License\n\nMIT\n","readmeFilename":"README.md"}