@kolkrabbi/kol-component 0.12.4 → 0.12.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.12.4",
+  "version": "0.12.6",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -23,8 +23,8 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
-    "refractor": "^5.0.0",
-    "@kolkrabbi/kol-icons": "0.8.3"
+    "react-syntax-highlighter": "^16.1.1",
+    "@kolkrabbi/kol-icons": "0.8.4"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

package/src/atoms/Figure.jsx

@@ -14,14 +14,14 @@
 export default function Figure({ label, caption, aspect = '5/3', className = '', children }) {
   return (
     <figure className={`kol-prose-figure ${className}`.trim()}>
-      {label && <div className="kol-caption-label">{label}</div>}
+      {label && <div className="kol-doc-eyebrow mb-2">{label}</div>}
       <div
         className="border border-fg-08 rounded overflow-hidden"
         style={aspect ? { aspectRatio: aspect } : undefined}
       >
         {children}
       </div>
-      {caption && <figcaption className="kol-caption-text">{caption}</figcaption>}
+      {caption && <figcaption className="kol-doc-caption mt-3">{caption}</figcaption>}
     </figure>
   )
 }

package/src/molecules/CodeBlock.jsx

@@ -1,96 +1,122 @@
 import { useState } from 'react'
-import { refractor } from 'refractor'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
- * 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).
+ * CodeBlock — REPLICATED from the elder reference
+ * (kol-website/packages/ui/src/molecules/CodeBlock.jsx, 2026-07-28 user
+ * mandate): react-syntax-highlighter (Prism) with the oneDark theme flattened
+ * onto KOL chrome — transparent bg, 14px/1.6 mono, no text-shadow — a single
+ * filename-or-language chip, and a 32×32 icon copy button (`copy` glyph →
+ * check on copied). Chrome lives in kol-theme (kol-components-molecules.css).
  *
- * Accepts three input shapes (first match wins per field):
- *   • Portable Text: `value={{ code, language, filename }}` — the Sanity code-block
- *     object can be passed straight through from a portable-text map.
- *   • 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.
+ * Input shapes (first match wins per field):
+ *   • Portable Text: `value={{ code, language, filename }}`
+ *   • Direct props: `code` / `language` / `filename`
+ *   • Children: `<CodeBlock language="js">{'…'}</CodeBlock>`
  */
 
-/* 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 CheckMarkIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.4697 6.41987C19.7626 6.12697 20.2373 6.12697 20.5302 6.41987C20.8231 6.71276 20.8231 7.18752 20.5302 7.48041L10.9443 17.0663C9.87038 18.1401 8.12951 18.1401 7.05561 17.0663L3.46967 13.4804C3.17678 13.1875 3.17678 12.7128 3.46967 12.4199C3.76256 12.127 4.23732 12.127 4.53022 12.4199L8.11615 16.0058C8.60427 16.4938 9.39561 16.4938 9.88373 16.0058L19.4697 6.41987Z" fill="currentColor"/>
+  </svg>
+)
 
-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
+const syntaxTheme = (foregroundToken = 80) => ({
+  ...oneDark,
+  'pre[class*="language-"]': {
+    ...oneDark['pre[class*="language-"]'],
+    background: 'transparent',
+    margin: 0,
+    padding: 0,
+    fontSize: '14px',
+    lineHeight: '1.6',
+    textShadow: 'none',
+    letterSpacing: '0',
+    overflow: 'visible',
+    border: 'none',
+    borderRadius: 0,
+    color: `color-mix(in srgb, var(--kol-surface-on-primary) ${foregroundToken}%, transparent)`
+  },
+  'code[class*="language-"]': {
+    ...oneDark['code[class*="language-"]'],
+    background: 'transparent',
+    fontFamily: 'var(--kol-font-family-mono)',
+    fontSize: '14px',
+    textShadow: 'none',
+    letterSpacing: '0',
+    textDecoration: 'none',
+    display: 'block',
+    borderRadius: 0,
+    border: 'none',
+    color: `color-mix(in srgb, var(--kol-surface-on-primary) ${foregroundToken}%, transparent)`
+  },
+  comment: {
+    ...oneDark['comment'],
+    fontStyle: 'normal'
   }
-}
+})
 
-/* 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 }) {
+export default function CodeBlock({ children, code: codeProp, language: languageProp, filename: filenameProp, value }) {
   const [copied, setCopied] = useState(false)
-  const onCopy = async () => {
+
+  const code = String(value?.code ?? codeProp ?? children ?? '')
+  const language = value?.language ?? languageProp ?? 'text'
+  const filename = value?.filename ?? filenameProp
+
+  const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(text)
+      await navigator.clipboard.writeText(code)
       setCopied(true)
-      setTimeout(() => setCopied(false), 1800)
+      setTimeout(() => setCopied(false), 2000)
     } 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 = String(code ?? value?.code ?? children ?? '')
-  const lang = language ?? value?.language
-  const file = filename ?? value?.filename
   return (
-    <div className="kol-codeblock">
-      <CopyControl text={src} />
-      {file && <span className="kol-codeblock-filename">{file}</span>}
-      {lang && <span className="kol-codeblock-lang">{lang}</span>}
-      <pre><code>{highlight(src, lang)}</code></pre>
+    <div className="kol-codeblock-wrapper">
+      <div className="kol-codeblock">
+        {(filename || (language && language !== 'text')) && (
+          <div className="kol-codeblock-filename">{filename || language}</div>
+        )}
+        <SyntaxHighlighter
+          language={language}
+          style={syntaxTheme(80)}
+          customStyle={{
+            margin: 0,
+            padding: 0,
+            background: 'transparent',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            overflow: 'visible',
+            height: 'auto',
+            maxHeight: 'none',
+          }}
+          wrapLines={true}
+          wrapLongLines={true}
+          PreTag="div"
+          lineProps={{
+            style: {
+              border: 'none',
+              background: 'transparent',
+              display: 'block',
+            }
+          }}
+        >
+          {code}
+        </SyntaxHighlighter>
+        <button
+          type="button"
+          className="kol-codeblock-copy"
+          onClick={handleCopy}
+          aria-label={copied ? 'Code copied!' : 'Copy code'}
+          title={copied ? 'Code copied!' : 'Copy code'}
+        >
+          {copied ? <CheckMarkIcon /> : <Icon name="copy" size={16} />}
+        </button>
+      </div>
     </div>
   )
 }