@ape-egg/codie 0.1.5 → 0.1.7

package/README.md

@@ -21,7 +21,7 @@ highlight + format    +editable             +live output, inspect,
 - **Syntax Highlighting**: HTML, CSS, and JavaScript with language-aware highlighting
 - **Editable Mode**: Transform static code into a live editor with textarea overlay
 - **Line Numbers**: Optional numbered rows for code reference
-- **Template Support**: Use `<template codie>` to preserve HTML without browser parsing
+- **Its Own Element**: `<codie>` is the block; `<template codie>` holds HTML the browser must not parse
 - **Language Modes**: Granular control via attributes (`highlight-html`, `highlight-css`, `highlight-js`)
 - **Dark/Light Themes**: Toggle with `[dark]` attribute
 - **Runtime State Toggle**: Change features dynamically via `codieRef.editable`, `codieRef.numberedRows`
@@ -49,9 +49,21 @@ npm install @ape-egg/codie
 <script type="module">
   import codie from '@ape-egg/codie';
 
-  codie('[codie]');
+  codie();
 </script>
 
+<codie>
+  const greet = (name) => `Hello, ${name}!`;
+</codie>
+```
+
+`codie()` with no argument takes the first `<codie>` or `[codie]` element in the document.
+
+### HTML Inside the Block
+
+The browser parses markup written inside `<codie>`. Put HTML in a `<template codie>` instead, so it reaches codie as text:
+
+```html
 <template codie>
   <div>
     <p>Hello, world!</p>
@@ -59,12 +71,14 @@ npm install @ape-egg/codie
 </template>
 ```
 
+The `codie` attribute makes any element a codie instance; `<codie>` needs none.
+
 ### Editable Code with Line Numbers
 
 ```js
 import codie from '@ape-egg/codie';
 
-const editor = codie('[codie]');
+const editor = codie('codie');
 editor.editable = true;
 editor.numberedRows = true;
 ```
@@ -74,7 +88,7 @@ editor.numberedRows = true;
 ```js
 const outputRef = document.querySelector('output');
 
-const editor = codie('[codie]');
+const editor = codie('codie');
 editor.editable = true;
 editor.onEdit = ({ formatted, raw }) => {
   outputRef.innerHTML = formatted;
@@ -88,13 +102,13 @@ editor.onEdit = ({ formatted, raw }) => {
 <template codie highlight-html>...</template>
 
 <!-- Only highlight CSS -->
-<template codie highlight-css>...</template>
+<codie highlight-css>...</codie>
 
 <!-- Only highlight JavaScript -->
-<template codie highlight-js>...</template>
+<codie highlight-js>...</codie>
 
 <!-- Highlight all languages (default) -->
-<template codie>...</template>
+<codie>...</codie>
 ```
 
 ## API
@@ -104,16 +118,16 @@ editor.onEdit = ({ formatted, raw }) => {
 Initialize a codie instance.
 
 **Parameters:**
-- `selector` (string): Query selector for codie element
+- `selector` (string): Query selector for the codie element — `codie` for the element, `[codie]` for an attributed one
 - `element` (Element): DOM element reference
-- `config` (object): Configuration object with optional `editable`, `numberedRows`, `foldable` properties
+- `config` (object): Configuration object with optional `editable`, `numberedRows`, `foldable` properties; the element is the first `codie, [codie]` in the document
 
 **Returns:** Codie instance proxy
 
 ### Instance Properties
 
 ```js
-const editor = codie('[codie]');
+const editor = codie('codie');
 
 // Get/set code content
 editor.code; // Get current code
@@ -156,7 +170,9 @@ import {
 
 ### Container Attributes
 
-- `codie` - Marks element as codie instance
+A `<codie>` element is an instance by its tag. The attributes below go on it, or on any other element carrying `codie`:
+
+- `codie` - Marks an element that is not `<codie>` as an instance, `<template codie>` above all
 - `dehydrate` - Skip initialization (for documentation)
 - `highlight-html` - Enable HTML highlighting only
 - `highlight-css` - Enable CSS highlighting only
@@ -189,7 +205,7 @@ import codie from '@ape-egg/codie';
 
 init({ output: '' });
 
-const editor = codie('[codie]');
+const editor = codie('template[codie]');
 editor.editable = true;
 editor.onEdit = ({ formatted }) => {
   $.output = formatted;

package/codie.js

@@ -122,7 +122,7 @@ const codie = (elOrConfig = {}) => {
     config = {};
   } else {
     config = elOrConfig;
-    el = document.querySelector(`[${ATTR.CODIE}]`);
+    el = document.querySelector(`${ATTR.CODIE}, [${ATTR.CODIE}]`);
   }
 
   if (!el) {

package/highlight-css.css

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

package/highlight-html.css

@@ -1,41 +1,41 @@
 /* Codie HTML syntax highlighting */
 
-[codie] .codie-tag {
+:where(codie, [codie]) .codie-tag {
   color: var(--codie-tag);
   font-weight: 600;
 }
 
-[codie] .codie-attr-name {
+:where(codie, [codie]) .codie-attr-name {
   color: var(--codie-attr-name);
 }
 
-[codie] .codie-attr-value {
+:where(codie, [codie]) .codie-attr-value {
   color: var(--codie-attr-value);
 }
 
-[codie] .codie-punct {
+:where(codie, [codie]) .codie-punct {
   color: var(--codie-punct);
 }
 
-[codie] .codie-comment {
+:where(codie, [codie]) .codie-comment {
   color: var(--codie-comment);
 }
 
-[codie] .codie-text {
+:where(codie, [codie]) .codie-text {
   color: var(--codie-text);
 }
 
 /* Vibe-specific tokens */
-[codie] .codie-vibe {
+:where(codie, [codie]) .codie-vibe {
   color: var(--codie-vibe);
 }
 
-[codie] .codie-vibe-var {
+:where(codie, [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 {
+:where(codie, [codie]):hover .codie-vibe-var,
+:where(codie, [codie]).codie-has-selection .codie-vibe-var {
   color: oklch(from currentColor calc(l + 0.25) c h);
 }

package/highlight-js.css

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

package/highlight-json.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/codie",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Modular code display and editing package",
   "type": "module",
   "main": "codie.js",

package/structure.css

@@ -1,11 +1,10 @@
 /* Codie structure and layout */
 
 /* Container */
-[codie] {
+:where(codie, [codie]) {
   display: grid;
   position: relative;
   width: 100%;
-  font-size: var(--unit-size, inherit);
   line-height: 1.5;
   font-family:
     'Geist Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
@@ -16,19 +15,19 @@
   border-radius: calc(var(--unit, 4px) * 1);
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
-[codie]::-webkit-scrollbar-thumb {
+:where(codie, [codie])::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
 }
 
 /* Stack layers on same grid cell */
-[codie] > * {
+:where(codie, [codie]) > * {
   grid-area: 1/1;
   min-width: max-content;
   align-self: start;
 }
 
 /* Code layer (shared between display and textarea) */
-[codie] .codie-layer {
+:where(codie, [codie]) .codie-layer {
   margin: 0;
   padding: calc(var(--unit, 4px) * 4);
   font: inherit;
@@ -38,12 +37,12 @@
 }
 
 /* Display layer */
-[codie] .codie-display {
+:where(codie, [codie]) .codie-display {
   pointer-events: none;
 }
 
 /* Textarea layer - hidden by default */
-[codie] .codie-textarea {
+:where(codie, [codie]) .codie-textarea {
   display: none;
   width: 100%;
   field-sizing: content;
@@ -61,25 +60,25 @@
 }
 
 /* Editable mode - show textarea */
-[codie][editable] .codie-textarea {
+:where(codie, [codie])[editable] .codie-textarea {
   display: block;
 }
 
-[codie][editable] .codie-display {
+:where(codie, [codie])[editable] .codie-display {
   pointer-events: none;
 }
 
-[codie][editable] .codie-textarea::selection {
+:where(codie, [codie])[editable] .codie-textarea::selection {
   background: var(--codie-selection);
   -webkit-text-fill-color: transparent;
 }
 
 /* Line numbers column */
-[codie][numbered] {
+:where(codie, [codie])[numbered] {
   grid-template-columns: auto 1fr;
 }
 
-[codie] .codie-line-numbers {
+:where(codie, [codie]) .codie-line-numbers {
   display: none;
   padding: calc(var(--unit, 4px) * 4);
   padding-right: calc(var(--unit, 4px) * 2);
@@ -89,46 +88,46 @@
   border-right: 1px solid oklch(from var(--codie-text) l c h / 0.1);
 }
 
-[codie][numbered] .codie-line-numbers {
+:where(codie, [codie])[numbered] .codie-line-numbers {
   display: block;
   grid-area: 1/1;
 }
 
-[codie][numbered] .codie-layer {
+:where(codie, [codie])[numbered] .codie-layer {
   grid-area: 1/2;
 }
 
 /* Line wrapping for highlighting */
-[codie] .codie-line {
+:where(codie, [codie]) .codie-line {
   display: block;
 }
 
-[codie] .codie-line-highlight {
+:where(codie, [codie]) .codie-line-highlight {
   background: var(--codie-highlight);
 }
 
 /* Focused state - dim non-highlighted lines */
-[codie].codie-focused .codie-line {
+:where(codie, [codie]).codie-focused .codie-line {
   opacity: 0.4;
   transition: opacity 150ms ease-out;
 }
 
-[codie].codie-focused .codie-line.codie-line-highlight {
+:where(codie, [codie]).codie-focused .codie-line.codie-line-highlight {
   opacity: 1;
 }
 
 /* Folding structure */
-[codie] .codie-fold-wrapper {
+:where(codie, [codie]) .codie-fold-wrapper {
   display: grid;
   grid-template-rows: min-content 0fr;
   transition: grid-template-rows 200ms ease-out;
 }
 
-[codie] .codie-fold-wrapper.codie-fold-open {
+:where(codie, [codie]) .codie-fold-wrapper.codie-fold-open {
   grid-template-rows: min-content 1fr;
 }
 
-[codie] .codie-fold-header {
+:where(codie, [codie]) .codie-fold-header {
   display: flex;
   align-items: flex-start;
   gap: calc(var(--unit, 4px) * 1);
@@ -137,11 +136,11 @@
   transition: background-color 150ms ease-out;
 }
 
-[codie] .codie-fold-header:hover {
+:where(codie, [codie]) .codie-fold-header:hover {
   background: var(--codie-fold-hover);
 }
 
-[codie] .codie-fold-toggle {
+:where(codie, [codie]) .codie-fold-toggle {
   height: 18px;
   width: 18px;
   padding: 0;
@@ -161,37 +160,37 @@
   color: transparent;
 }
 
-[codie] .codie-fold-wrapper.codie-fold-open > .codie-fold-header > .codie-fold-toggle {
+:where(codie, [codie]) .codie-fold-wrapper.codie-fold-open > .codie-fold-header > .codie-fold-toggle {
   color: oklch(from var(--codie-fold-icon) l c h / 0.1);
   transform: rotate(0deg);
 }
 
-[codie] .codie-fold-wrapper > .codie-fold-header:hover > .codie-fold-toggle {
+:where(codie, [codie]) .codie-fold-wrapper > .codie-fold-header:hover > .codie-fold-toggle {
   color: var(--codie-fold-icon);
 }
 
-[codie] .codie-fold-content {
+:where(codie, [codie]) .codie-fold-content {
   overflow: hidden;
 }
 
 /* Collapsed preview */
-[codie] .codie-fold-preview {
+:where(codie, [codie]) .codie-fold-preview {
   display: none;
   color: var(--codie-text);
   opacity: 0.6;
 }
 
-[codie] .codie-fold-wrapper:not(.codie-fold-open) .codie-fold-preview {
+:where(codie, [codie]) .codie-fold-wrapper:not(.codie-fold-open) .codie-fold-preview {
   display: inline;
 }
 
 /* Root fold has no toggle */
-[codie] .codie-fold-wrapper[data-root] > .codie-fold-header {
+:where(codie, [codie]) .codie-fold-wrapper[data-root] > .codie-fold-header {
   cursor: default;
   pointer-events: none;
 }
 
-[codie] .codie-fold-wrapper[data-root] > .codie-fold-header > .codie-fold-toggle {
+:where(codie, [codie]) .codie-fold-wrapper[data-root] > .codie-fold-header > .codie-fold-toggle {
   opacity: 0;
   pointer-events: none;
 }

package/theme.css

@@ -51,9 +51,9 @@
 }
 
 /* Dark theme - VSCode Dark+ */
-.dark [codie],
-[dark] [codie],
-[codie][dark] {
+.dark :where(codie, [codie]),
+[dark] :where(codie, [codie]),
+:where(codie, [codie])[dark] {
   --codie-bg: #1e1e1e;
   --codie-text: #d4d4d4;
   --codie-caret: #fff;