@entropicwarrior/sdoc 0.2.15 → 0.2.17

package/docs/reference/sdoc-authoring.sdoc

@@ -333,6 +333,22 @@ Content of Section B.
 
                     The \`Amount\` column is right-aligned and formatted as currency. The formula result and data cells all display as \`$1,000,000\` style. The \`**Total**\` label renders as bold text.
                 }
+
+                # Copyable Columns
+                {
+                    A \`copy\` token in the directive row gives every body cell in that column a click-to-copy icon (copying the cell's raw text). Ideal for columns of sequences, IDs, or commands.
+
+                    ```
+                    {[table]
+                        Gene | Sequence
+                             | copy
+                        BRCA1 | ACGTACGTGGCA
+                        TP53 | GGCATTACGATT
+                    }
+                    ```
+
+                    \`copy\` can share a directive row with alignment/format directives on other columns.
+                }
             }
 
             # Table Formulas @table-formulas
@@ -384,8 +400,14 @@ Content of Section B.
                 \`\{!text!\}\` | Warning marker (orange)
                 \`\{-text-\}\` | Negative marker (red)
                 \`\{~text~\}\` | Highlight (yellow)
+                \`#1a73e8\` | Hex color swatch (auto-readable text)
+                \`\{copy\}text\{/copy\}\` | Copyable text with click-to-copy icon
             }
 
+            Hex color codes (\`#rgb\`, \`#rgba\`, \`#rrggbb\`, \`#rrggbbaa\`) render as inline swatches — a rounded box filled with the color and labelled with the code, with the text color chosen automatically (black or white) for legibility. They are detected in normal text, list items, table cells, and headings, but not inside \`\\\`inline code\\\`\` (which stays literal). A bare \`#\` at the start of a line is a heading; escape with \`\\#\` to keep a literal hash.
+
+            Copyable text: \`\{copy\}ACGTACGTGGCA\{/copy\}\` renders the inner text verbatim in monospace with a copy icon; clicking it copies the text. Great for DNA/protein sequences, IDs, hashes, and commands. Escape with \`\\\{copy\}\` for a literal. Copy icons show in HTML output (preview, exported HTML, web viewer) and are hidden when printed/exported to PDF.
+
             Links: \`[Link text](https://example.com)\` or \`[Other doc](./other-file.sdoc)\`. Relative paths resolve from the document's directory.
 
             Images: \`![Alt text](path/to/image.png)\`

package/lexica/specification.sdoc

@@ -435,9 +435,25 @@ Content of Section B.
                     All numeric values and formula results in the `Amount` column display as currency (`$3,500,000`). The `**Total**` label renders normally as bold text.
                 }
 
+                # Copyable Columns @column-copy
+                {
+                    A `copy` token (case-insensitive) in the directive row marks a column copyable: every body cell in that column is rendered with a click-to-copy icon whose target is the cell's raw text. Useful for sequences, identifiers, hashes, and commands.
+
+                    ```
+{[table]
+    Gene | Sequence
+         | copy
+    BRCA1 | ACGTACGTGGCA
+    TP53 | GGCATTACGATT
+}
+                    ```
+
+                    The `copy` token occupies a directive cell of its own and may coexist with alignment/format directives on other columns in the same row. The literal (unformatted) cell text is copied. Copy icons are interactive HTML only — they appear in preview, exported HTML, and the web viewer, and are hidden in printed/PDF output.
+                }
+
                 # Directive Row Detection @directive-detection
                 {
-                    A row is identified as a directive row when every non-empty cell contains only an alignment character (`<`, `>`, `=`), a format token, or both. It must be the first row after the header (or the first row in a headerless table), and at least one cell must contain a directive.
+                    A row is identified as a directive row when every non-empty cell contains only an alignment character (`<`, `>`, `=`), a format token, the `copy` keyword, or a combination of alignment and format. It must be the first row after the header (or the first row in a headerless table), and at least one cell must contain a directive.
 
                     For headerless tables, the directive row functions as a virtual header — it is consumed for its directives but no `<thead>` is rendered.
                 }
@@ -719,12 +735,18 @@ Content of Section B.
                 - Warning marker: `{!text!}` (orange highlight)
                 - Negative marker: `{-text-}` (red highlight)
                 - Highlight: `{~text~}` (yellow highlight)
+                - Hex color swatch: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa` (e.g. `#9aa0a8`) renders as a filled inline box labelled with the code
+                - Copyable text: `{copy}...{/copy}` renders the inner text verbatim (monospace) with a click-to-copy icon
                 - Citation reference: `[@key]` (numbered superscript link to citation entry)
                 - Multiple citation references: `[@key1, @key2]` (each individually linked)
             }
 
             Inline math requires non-whitespace immediately after the opening `$` and before the closing `$`. A plain `$` followed by a digit (e.g. `$100`) does not trigger math mode because there is no closing `$`.
 
+            Hex color swatches are detected only when the `#` is at the start of the inline text or preceded by a non-alphanumeric character, the digit run is exactly 3, 4, 6, or 8 hexadecimal digits, and it is not immediately followed by another letter, digit, or underscore. The background is the literal color and the text color (black or white) is chosen by perceptual brightness (YIQ); for `#rgba`/`#rrggbbaa` the alpha channel is ignored when choosing the text color. Hex inside `` `inline code` `` stays literal, and a `#` at the start of a line is parsed as a heading (escape with `\#`).
+
+            Copyable text spans from `{copy}` to the next unescaped `{/copy}`. The inner text is captured verbatim — no nested inline formatting is applied — and is both displayed (monospace) and used as the copy target. An unterminated `{copy}` (no closing `{/copy}`) falls through as literal text. Escape with `\{copy}` to write a literal. As with other `{`-delimited constructs, a `{copy}` at the very start of a line is subject to block-level parsing; use it mid-line or within a cell.
+
             Citation references (`[@key]`) are parsed before link syntax. `[@key]` is always a citation reference even if followed by `(url)`. Use `\[@key]` for a literal `[@key]` in text.
         }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@entropicwarrior/sdoc",
   "displayName": "SDOC - Docs for Human/Agent Teams",
   "description": "A plain-text documentation format with explicit brace scoping — deterministic parsing, AI-agent efficiency, and 10-50x token savings vs Markdown.",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "publisher": "entropicwarrior-msenfin",
   "license": "MIT",
   "repository": {

package/src/sdoc.js

@@ -72,6 +72,7 @@ function isDirectiveRow(cells) {
   for (const cell of cells) {
     const trimmed = cell.trim();
     if (trimmed === "") continue;
+    if (trimmed.toLowerCase() === "copy") { hasDirective = true; continue; }
     if (!pattern.test(trimmed)) return false;
     hasDirective = true;
   }
@@ -102,12 +103,23 @@ function parseFormatSpec(spec) {
 function parseDirectiveRow(cells) {
   const align = [];
   const format = [];
+  const copy = [];
   let hasAlign = false;
   let hasFormat = false;
+  let hasCopy = false;
   const fmtPattern = /(\$(?:\.\d+)?|,(?:\.\d+)?|\.\d+|%(?:\.\d+)?)$/;
 
   for (const cell of cells) {
     const trimmed = cell.trim();
+
+    if (trimmed.toLowerCase() === "copy") {
+      align.push(null);
+      format.push(null);
+      copy.push(true);
+      hasCopy = true;
+      continue;
+    }
+
     const alignMatch = trimmed.match(/^([<>=])/);
     const fmtMatch = trimmed.match(fmtPattern);
 
@@ -124,11 +136,13 @@ function parseDirectiveRow(cells) {
       hasFormat = true;
     }
     format.push(f);
+    copy.push(false);
   }
 
   return {
     align: hasAlign ? align : null,
     format: hasFormat ? format : null,
+    copy: hasCopy ? copy : null,
   };
 }
 
@@ -940,10 +954,12 @@ function parseTableBody(cursor, tableStartLine, options) {
   const directiveIndex = options.headerless ? 0 : 1;
   let columnAlign = null;
   let columnFormat = null;
+  let columnCopy = null;
   if (rows.length > directiveIndex && isDirectiveRow(rows[directiveIndex])) {
     const directives = parseDirectiveRow(rows[directiveIndex]);
     columnAlign = directives.align;
     columnFormat = directives.format;
+    columnCopy = directives.copy;
     rows.splice(directiveIndex, 1);
   }
 
@@ -960,6 +976,7 @@ function parseTableBody(cursor, tableStartLine, options) {
   if (hasOptions) tableNode.options = options;
   if (columnAlign) tableNode.columnAlign = columnAlign;
   if (columnFormat) tableNode.columnFormat = columnFormat;
+  if (columnCopy) tableNode.columnCopy = columnCopy;
   return tableNode;
 }
 
@@ -1414,6 +1431,33 @@ function parseInline(text) {
       }
     }
 
+    // Hex color codes (#rgb, #rgba, #rrggbb, #rrggbbaa) render as swatches.
+    // Require a non-word char before the # so we don't match inside identifiers,
+    // and a non-word char after the digits so partial/over-long runs are ignored.
+    if (ch === "#" && (i === 0 || !/[0-9A-Za-z]/.test(text[i - 1]))) {
+      const m = /^#([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})(?![0-9A-Za-z_])/.exec(
+        text.slice(i)
+      );
+      if (m) {
+        flush();
+        nodes.push({ type: "color_swatch", value: m[0] });
+        i += m[0].length;
+        continue;
+      }
+    }
+
+    // Copyable inline text: {copy}literal text{/copy}. The inner text is copied
+    // verbatim (no nested formatting), rendered monospace with a copy icon.
+    if (text.startsWith("{copy}", i)) {
+      const end = findUnescaped(text, i + 6, "{/copy}");
+      if (end !== -1) {
+        flush();
+        nodes.push({ type: "copyable", value: text.slice(i + 6, end) });
+        i = end + 7; // length of "{/copy}"
+        continue;
+      }
+    }
+
     if (ch === "{") {
       const mc = next;
       let mt = null;
@@ -1728,6 +1772,46 @@ function escapeAttr(value) {
   return escapeHtml(value).replace(/'/g, "&#39;");
 }
 
+// Expand a #rgb/#rgba/#rrggbb/#rrggbbaa hex string to [r, g, b] (alpha ignored).
+function hexToRgb(hex) {
+  let h = hex.replace(/^#/, "");
+  if (h.length === 3 || h.length === 4) {
+    h = h.slice(0, 3).split("").map((c) => c + c).join("");
+  } else {
+    h = h.slice(0, 6);
+  }
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16),
+  ];
+}
+
+// Pick black or white text for legibility over the given background color
+// using the perceptual YIQ brightness threshold.
+function readableTextColor(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq >= 128 ? "#000000" : "#ffffff";
+}
+
+// Render a hex color as a self-contained inline swatch: a rounded box filled
+// with the color, labelled with the hex code in a legible text color. Styling
+// is inline so it survives in slides, exports, and other CSS-free contexts.
+function colorSwatchHtml(value) {
+  const fg = readableTextColor(value);
+  // A soft neutral-grey outline on every swatch (the same for all of them) so
+  // the box edge stays visible even when the fill matches the page background.
+  // Semi-transparent grey reads on both light and dark backgrounds without the
+  // harsh contrast of a black/white border.
+  const style =
+    `background-color:${value};color:${fg};` +
+    "border:1px solid rgba(128,128,128,0.5);border-radius:4px;padding:0.15em 0.9em;" +
+    "font-family:'JetBrains Mono','Fira Code','Source Code Pro',monospace;font-size:0.95em;" +
+    "-webkit-print-color-adjust:exact;print-color-adjust:exact";
+  return `<span class="sdoc-color-swatch" style="${style}">${escapeHtml(value)}</span>`;
+}
+
 function renderInline(text) {
   const nodes = parseInline(text);
   return renderInlineNodes(nodes);
@@ -1766,6 +1850,10 @@ function renderInlineNodes(nodes) {
         }
         case "code":
           return `<code class="sdoc-inline-code">${escapeHtml(node.value)}</code>`;
+        case "copyable":
+          return `<span class="sdoc-copyable"><code class="sdoc-inline-code">${escapeHtml(node.value)}</code><button class="sdoc-copy-btn sdoc-copy-inline" data-copy="${escapeAttr(node.value)}" title="Copy">⧉</button></span>`;
+        case "color_swatch":
+          return colorSwatchHtml(node.value);
         case "em":
           return `<em>${renderInlineNodes(node.children)}</em>`;
         case "strong":
@@ -2247,6 +2335,14 @@ function renderTable(table) {
   const opts = table.options || {};
   const colAlign = table.columnAlign || [];
   const colFormat = table.columnFormat || [];
+  const colCopy = table.columnCopy || [];
+
+  // Copy icon appended to body cells in a `copy` directive column. data-copy
+  // carries the raw cell text so the shared copy handler copies it verbatim.
+  function copyBtn(cell, c) {
+    if (!colCopy[c]) return "";
+    return ` <button class="sdoc-copy-btn sdoc-copy-inline" data-copy="${escapeAttr(cell.trim())}" title="Copy">⧉</button>`;
+  }
   const classes = ["sdoc-table"];
   if (opts.borderless) classes.push("sdoc-table-borderless");
   if (opts.headerless) classes.push("sdoc-table-headerless");
@@ -2286,20 +2382,20 @@ function renderTable(table) {
             }
             const formula = escapeAttr(cell.trim());
             if (result.error) {
-              return `<td class="sdoc-table-td sdoc-formula-error"${style} title="${formula}">${display}</td>`;
+              return `<td class="sdoc-table-td sdoc-formula-error"${style} title="${formula}">${display}${copyBtn(cell, c)}</td>`;
             }
-            return `<td class="sdoc-table-td sdoc-formula-cell"${style} title="${formula}">${display}</td>`;
+            return `<td class="sdoc-table-td sdoc-formula-cell"${style} title="${formula}">${display}${copyBtn(cell, c)}</td>`;
           }
 
           // Apply column format to numeric data cells
           if (fmt) {
             const parsed = parseCellValue(cell);
             if (!isNaN(parsed.value)) {
-              return `<td class="sdoc-table-td"${style}>${escapeHtml(formatNumber(parsed.value, fmt))}</td>`;
+              return `<td class="sdoc-table-td"${style}>${escapeHtml(formatNumber(parsed.value, fmt))}${copyBtn(cell, c)}</td>`;
             }
           }
 
-          return `<td class="sdoc-table-td"${style}>${renderInline(cell)}</td>`;
+          return `<td class="sdoc-table-td"${style}>${renderInline(cell)}${copyBtn(cell, c)}</td>`;
         })
         .join("");
       return `<tr>${cells}</tr>`;
@@ -2995,10 +3091,6 @@ const PRINT_STYLE = `
     position: relative;
   }
   .sdoc-copy-btn {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    z-index: 1;
     background: transparent;
     border: none;
     border-radius: 4px;
@@ -3006,15 +3098,35 @@ const PRINT_STYLE = `
     font-size: 0.85rem;
     line-height: 1;
     padding: 2px 6px;
+    color: inherit;
+  }
+  .sdoc-code-wrap .sdoc-copy-btn {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    z-index: 1;
     opacity: 0;
     transition: opacity 0.15s;
   }
   .sdoc-code-wrap:hover .sdoc-copy-btn {
     opacity: 0.75;
   }
-  .sdoc-copy-btn:hover {
+  .sdoc-code-wrap .sdoc-copy-btn:hover {
     opacity: 1 !important;
   }
+  .sdoc-copyable {
+    white-space: nowrap;
+  }
+  .sdoc-copy-inline {
+    font-size: 0.8em;
+    padding: 0 0.15em;
+    opacity: 0.45;
+    vertical-align: baseline;
+    transition: opacity 0.15s;
+  }
+  .sdoc-copy-inline:hover {
+    opacity: 1;
+  }
   @media print {
     html {
       font-size: 80%;
@@ -3053,7 +3165,7 @@ const PRINT_STYLE = `
 
 const COLLAPSE_SCRIPT = `document.addEventListener("click",function(e){if(!e.target.classList.contains("sdoc-toggle"))return;e.stopPropagation();var s=e.target.closest(".sdoc-scope");if(s)s.classList.toggle("sdoc-collapsed")});`;
 
-const COPY_SCRIPT = `document.addEventListener("click",function(e){if(!e.target.classList.contains("sdoc-copy-btn"))return;e.stopPropagation();e.preventDefault();var w=e.target.closest(".sdoc-code-wrap");if(!w)return;var c=w.querySelector("code");if(!c)return;var t=c.textContent;var b=e.target;if(navigator.clipboard){navigator.clipboard.writeText(t).then(function(){b.textContent="\\u2713";setTimeout(function(){b.textContent="\\u29C9"},1500)})}else{var a=document.createElement("textarea");a.value=t;a.style.position="fixed";a.style.opacity="0";document.body.appendChild(a);a.select();document.execCommand("copy");document.body.removeChild(a);b.textContent="\\u2713";setTimeout(function(){b.textContent="\\u29C9"},1500)}});`;
+const COPY_SCRIPT = `document.addEventListener("click",function(e){var b=e.target.closest(".sdoc-copy-btn");if(!b)return;e.stopPropagation();e.preventDefault();var t=b.getAttribute("data-copy");if(t===null){var w=b.closest(".sdoc-code-wrap");if(!w)return;var c=w.querySelector("code");if(!c)return;t=c.textContent}if(navigator.clipboard){navigator.clipboard.writeText(t).then(function(){b.textContent="\\u2713";setTimeout(function(){b.textContent="\\u29C9"},1500)})}else{var a=document.createElement("textarea");a.value=t;a.style.position="fixed";a.style.opacity="0";document.body.appendChild(a);a.select();document.execCommand("copy");document.body.removeChild(a);b.textContent="\\u2713";setTimeout(function(){b.textContent="\\u29C9"},1500)}});`;
 
 const MERMAID_CDN = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js";
 const KATEX_CDN_CSS = "https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.css";
@@ -3773,5 +3885,7 @@ module.exports = {
   renderKatex,
   escapeHtml,
   escapeAttr,
-  sanitizeSvg
+  sanitizeSvg,
+  colorSwatchHtml,
+  readableTextColor
 };

package/src/slide-renderer.js

@@ -7,7 +7,7 @@
 //   const { nodes, meta } = extractMeta(parsed.nodes);
 //   const html = renderSlides(nodes, { meta, themeCss, themeJs });
 
-const { parseInline, renderKatex, escapeHtml, escapeAttr, sanitizeSvg } = require("./sdoc");
+const { parseInline, renderKatex, escapeHtml, escapeAttr, sanitizeSvg, colorSwatchHtml } = require("./sdoc");
 
 // ---------------------------------------------------------------------------
 // Inline rendering — produces clean HTML without sdoc-* classes
@@ -21,6 +21,11 @@ function renderInlineNodes(nodes) {
           return escapeHtml(node.value);
         case "code":
           return `<code>${escapeHtml(node.value)}</code>`;
+        case "copyable":
+          // Slides have no copy handler; render the literal text as monospace.
+          return `<code>${escapeHtml(node.value)}</code>`;
+        case "color_swatch":
+          return colorSwatchHtml(node.value);
         case "em":
           return `<em>${renderInlineNodes(node.children)}</em>`;
         case "strong":