@kolkrabbi/kol-component 0.12.3 → 0.12.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -23,16 +23,17 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
-    "@kolkrabbi/kol-icons": "0.8.0"
+    "refractor": "^5.0.0",
+    "@kolkrabbi/kol-icons": "0.8.3"
   },
   "peerDependencies": {
-    "react": "^18.3.0 || ^19.0.0",
-    "react-dom": "^18.3.0 || ^19.0.0",
-    "react-router-dom": "^6.0.0 || ^7.0.0",
     "framer-motion": "^12.0.0",
     "gsap": "^3.13.0",
     "hls.js": "^1.6.0",
-    "opentype.js": "^1.3.4"
+    "opentype.js": "^1.3.4",
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "peerDependenciesMeta": {
     "react-router-dom": {

package/src/molecules/CodeBlock.jsx

@@ -1,7 +1,10 @@
-import CopyButton from '../atoms/CopyButton.jsx'
+import { useState } from 'react'
+import { refractor } from 'refractor'
 
 /**
- * CodeBlock — a chrome'd code block with language chip, filename chip, and copy.
+ * CodeBlock — a chrome'd code block with language chip, filename chip, copy,
+ * and syntax highlighting (refractor — the same Prism engine the Sanity
+ * studio's code-input uses, so schema languages match 1:1).
  *
  * Accepts three input shapes (first match wins per field):
  *   • Portable Text: `value={{ code, language, filename }}` — the Sanity code-block
@@ -9,19 +12,85 @@ import CopyButton from '../atoms/CopyButton.jsx'
  *   • Direct props: `code` / `language` / `filename`.
  *   • Children: `<CodeBlock language="js">{'…'}</CodeBlock>` (the original API).
  *
+ * Token colors are theme concerns: refractor's `token x` classes render as
+ * `kol-tok kol-tok-x` spans, colored by kol-theme (light + dark). An
+ * unregistered/absent language renders plain — never crashes.
+ *
  * DOM order is copy → filename → lang → pre so the `.kol-codeblock-*` + pre
  * adjacency rules in the chrome CSS can pad the pre when chips are present.
  */
+
+/* Sanity/code-input language ids → refractor grammar names */
+const LANG_ALIASES = { js: 'javascript', ts: 'typescript', sh: 'bash', shell: 'bash', html: 'markup', xml: 'markup' }
+
+/* hast → React. refractor emits { type: 'element'|'text', tagName, properties, children }. */
+const renderNode = (node, key) => {
+  if (node.type === 'text') return node.value
+  const cls = (node.properties?.className || [])
+    .map((c) => (c === 'token' ? 'kol-tok' : `kol-tok-${c}`))
+    .join(' ')
+  return (
+    <span key={key} className={cls}>
+      {node.children.map(renderNode)}
+    </span>
+  )
+}
+
+const highlight = (src, language) => {
+  const lang = LANG_ALIASES[language] ?? language
+  if (!lang || !refractor.registered(lang)) return src
+  try {
+    return refractor.highlight(src, lang).children.map(renderNode)
+  } catch {
+    return src
+  }
+}
+
+/* Icon-swap copy control — the studio primitive's minimal form (clipboard →
+ * checkmark), ported 2026-07-28. Positioning comes from .kol-codeblock-copy. */
+function CopyControl({ text }) {
+  const [copied, setCopied] = useState(false)
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1800)
+    } catch {
+      /* clipboard blocked — silent */
+    }
+  }
+  return (
+    <button
+      type="button"
+      className="kol-codeblock-copy"
+      onClick={onCopy}
+      aria-label={copied ? 'Copied' : 'Copy to clipboard'}
+      title={copied ? 'Copied' : 'Copy'}
+    >
+      {copied ? (
+        <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
+          <path d="M5 10 L9 14 L15 6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
+          <rect x="6" y="3" width="10" height="12" rx="1" fill="none" stroke="currentColor" strokeWidth="1.4" />
+          <rect x="4" y="6" width="10" height="12" rx="1" fill="none" stroke="currentColor" strokeWidth="1.4" />
+        </svg>
+      )}
+    </button>
+  )
+}
+
 export default function CodeBlock({ children, code, language, filename, value }) {
-  const src = code ?? value?.code ?? children
+  const src = String(code ?? value?.code ?? children ?? '')
   const lang = language ?? value?.language
   const file = filename ?? value?.filename
   return (
     <div className="kol-codeblock">
-      <CopyButton text={String(src ?? '')} className="kol-codeblock-copy" />
+      <CopyControl text={src} />
       {file && <span className="kol-codeblock-filename">{file}</span>}
       {lang && <span className="kol-codeblock-lang">{lang}</span>}
-      <pre><code>{src}</code></pre>
+      <pre><code>{highlight(src, lang)}</code></pre>
     </div>
   )
 }