@kolkrabbi/kol-component 0.1.0

package/src/primitives/CodeBlock.jsx

@@ -0,0 +1,41 @@
+import { useState } from 'react'
+
+export default function CodeBlock({ children, language }) {
+  const [copied, setCopied] = useState(false)
+
+  const onCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(String(children))
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1800)
+    } catch {
+      /* clipboard blocked — silent */
+    }
+  }
+
+  return (
+    <div className="kol-codeblock">
+      {language && <span className="kol-codeblock-lang">{language}</span>}
+      <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>
+        )}
+        <span className="leading-none">{copied ? 'Copied' : 'Copy'}</span>
+      </button>
+      <pre><code>{children}</code></pre>
+    </div>
+  )
+}

package/src/primitives/ExitPreview.jsx

@@ -0,0 +1,12 @@
+import { Link, useLocation } from 'react-router-dom'
+
+export default function ExitPreview() {
+  const { pathname: _pathname } = useLocation()
+
+  return (
+    <Link to="/" className="kol-exit-preview" aria-label="Exit preview">
+      <span className="kol-exit-preview-icon" aria-hidden="true">×</span>
+      <span className="kol-exit-preview-label">Exit</span>
+    </Link>
+  )
+}

package/src/primitives/FullscreenOverlay.jsx

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react'
+
+export default function FullscreenOverlay({ open, onClose, children }) {
+  const sheetRef = useRef(null)
+
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e) => { if (e.key === 'Escape') onClose?.() }
+    document.addEventListener('keydown', onKey)
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.body.style.overflow = prev
+    }
+  }, [open, onClose])
+
+  if (!open) return null
+
+  const onBackdropClick = (e) => {
+    if (sheetRef.current && !sheetRef.current.contains(e.target)) onClose?.()
+  }
+
+  return (
+    <div className="kol-overlay" role="dialog" aria-modal="true" onMouseDown={onBackdropClick}>
+      <div ref={sheetRef} className="kol-overlay-sheet">
+        <button
+          type="button"
+          className="kol-overlay-close"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          ×
+        </button>
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/primitives/Image.jsx

@@ -0,0 +1,38 @@
+/**
+ * Image — raster wrapper with graceful missing-asset fallback.
+ *
+ * Replaces raw <img> where brand raster assets may be missing. On load error,
+ * renders AssetPlaceholder with category/name labels so the slot stays
+ * visible at its intended size (aspect-ratio preserved).
+ */
+import { useState } from 'react'
+import AssetPlaceholder from './AssetPlaceholder'
+
+export default function Image({
+  src,
+  alt = '',
+  category,
+  name,
+  aspectRatio,
+  className = '',
+  loading = 'lazy',
+  ...rest
+}) {
+  const [failed, setFailed] = useState(false)
+
+  if (failed || !src) {
+    return <AssetPlaceholder category={category} name={name} aspectRatio={aspectRatio} note="missing" className={className} />
+  }
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      loading={loading}
+      className={`kol-image block max-w-full h-auto ${className}`.trim()}
+      style={aspectRatio ? { aspectRatio } : undefined}
+      onError={() => setFailed(true)}
+      {...rest}
+    />
+  )
+}