@kolkrabbi/kol-component 0.100.0 → 0.101.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.100.0",
+  "version": "0.101.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/index.js

@@ -143,6 +143,7 @@ export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
 export { default as ColumnBrowser } from './organisms/ColumnBrowser.jsx'
 export { default as KindPreview } from './molecules/KindPreview.jsx'
 export { kindOf, extOf, isSystemFile, KINDS, KIND_LABEL } from './utilities/mediaKinds.js'
+export { default as markdownToHtml, inlineToHtml } from './utilities/markdownToHtml.js'
 export { default as RecordManager } from './organisms/RecordManager.jsx'
 export { default as SpectrumGrid } from './organisms/SpectrumGrid.jsx'
 export { default as Table } from './organisms/Table.jsx'

package/src/molecules/KindPreview.jsx

@@ -4,6 +4,7 @@ import HlsVideo from '../atoms/HlsVideo.jsx'
 import CodeBlock from './CodeBlock.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 import { kindOf as defaultKindOf, extOf as defaultExtOf, KIND_LABEL } from '../utilities/mediaKinds.js'
+import markdownToHtml from '../utilities/markdownToHtml.js'
 
 /* taxonomy-ok: molecule — nests the DS media atoms + CodeBlock (relative). */
 
@@ -12,8 +13,9 @@ import { kindOf as defaultKindOf, extOf as defaultExtOf, KIND_LABEL } from '../u
  * promoted 2026-08-27 (SettingsPanelChromeAndColumnPreview). Before it, anything
  * that was not an image or a video showed a grey box with the word "text".
  * HLS → `HlsVideo` (inert — the DS's background-video atom, preview only),
- * audio → `AudioPlayer`, text / code → `CodeBlock` (language by extension;
- * markdown as code — the DS has no markdown renderer in this tier), the rest
+ * audio → `AudioPlayer`, markdown → rendered prose in `.kol-prose`
+ * (markdownToHtml, KindPreviewMarkdown 2026-08-27), json / yaml / text / code →
+ * `CodeBlock` (language by kind or extension), the rest
  * → `AssetPlaceholder`. Images are the caller's (ColumnBrowser keeps its own
  * `<img>` so it can read the dimensions). Text fetches cap at `textLimit`.
  *
@@ -58,7 +60,7 @@ export default function KindPreview({ o, urlOf = (x) => x.url, poster, kindOf =
   const url = urlOf(o)
   const ext = extOf(o.key)
   const name = o.displayKey ?? o.key
-  const isText = kind === 'text' || kind === 'code'
+  const isText = kind === 'text' || kind === 'code' || kind === 'markdown' || kind === 'json' || kind === 'yaml'
   const { loading, text, error, truncated } = useTextContent(url, isText, textLimit)
 
   if (kind === 'playlist') {
@@ -79,9 +81,18 @@ export default function KindPreview({ o, urlOf = (x) => x.url, poster, kindOf =
   if (isText) {
     if (loading) return <span className="kol-mono-12 text-meta">Loading…</span>
     if (error) return <span className="kol-mono-12 text-ui-error">Couldn’t load: {error}</span>
+    if (kind === 'markdown') {
+      return (
+        <div className="max-w-[70ch] max-h-[78vh] overflow-y-auto">
+          <div className="kol-prose" dangerouslySetInnerHTML={{ __html: markdownToHtml(text) }} />
+          {truncated && <p className="kol-mono-12 text-meta">truncated at {textLimit / 1024} KB</p>}
+        </div>
+      )
+    }
+    const language = kind === 'json' ? 'json' : kind === 'yaml' ? 'yaml' : LANG[ext] || 'text'
     return (
       <div className="max-w-[80ch] max-h-[78vh] overflow-y-auto">
-        <CodeBlock code={text} language={LANG[ext] || 'text'} filename={name} />
+        <CodeBlock code={text} language={language} filename={name} />
         {truncated && <p className="kol-mono-12 text-meta">truncated at {textLimit / 1024} KB</p>}
       </div>
     )

package/src/organisms/SettingsPanel.jsx

@@ -1,5 +1,4 @@
 import Button from '../atoms/Button.jsx'
-import Tag from '../atoms/Tag.jsx'
 import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
 import ToggleSwitch from '../atoms/ToggleSwitch.jsx'
 import ShellDrawer from '../molecules/ShellDrawer.jsx'
@@ -137,10 +136,11 @@ export function SettingsChoice({ options = [], value, onChange, ariaLabel }) {
   return <SegmentedToggle size="sm" value={value} onChange={onChange} options={opts} ariaLabel={ariaLabel} />
 }
 
-/* The chips are the DS `Tag` ("the tag ticket" — SettingsPanelChromeAndColumnPreview,
- * user 2026-08-27: same chrome as Tag everywhere else, not a third look): `md`
- * (helper-12), `inverse` when on, `secondary` when off, as a button. The old
- * `.kol-control` string stays exported for consumers that typed it. */
+/* THE CONTROL CHIP (SettingsPanelCompliance, user 2026-08-27: "WROOOONG" on the
+ * 0.98.0 Tag pills): `.kol-control` sm on kol-mono-12, filled when on, meta ink
+ * when off, the count in meta after the label — the SAME string ContentFilters'
+ * kind chips, ViewToggle's text variant and the SELECT / FLAT strip wear. No
+ * Tag, no uppercase, no inverse. */
 export const CHIP_CLS = 'kol-control kol-control-sm kol-mono-12'
 export const chipCls = (on) => `${CHIP_CLS} ${on ? 'kol-control--filled' : 'text-meta hover:text-emphasis'}`
 
@@ -156,18 +156,16 @@ export function SettingsChipRow({ options = [], selected = [], onToggle }) {
   return (
     <div className="flex flex-wrap gap-1">
       {options.map((o) => (
-        <Tag
+        <button
           key={String(o.value)}
-          size="md"
-          hash={false}
-          variant={on.has(o.value) ? 'inverse' : 'secondary'}
-          active={on.has(o.value)}
+          type="button"
           aria-pressed={on.has(o.value)}
           onClick={() => onToggle?.(o.value)}
+          className={chipCls(on.has(o.value))}
         >
           {o.label ?? String(o.value)}
           {o.count > 0 && <span className="text-meta"> {o.count}</span>}
-        </Tag>
+        </button>
       ))}
     </div>
   )

package/src/utilities/markdownToHtml.js

@@ -0,0 +1,66 @@
+/**
+ * markdownToHtml — a small, escape-first markdown → HTML renderer for
+ * `.kol-prose` (KindPreviewMarkdown, kol-r2b2 2026-08-27 — user: "why is it not
+ * rendering in preview using kol-prose?"). No dependency: the theme's prose CSS
+ * styles bare tags, so bare tags are what this emits. Covers headings,
+ * paragraphs, bold / italic / inline code, links and images, bullet and
+ * numbered lists, blockquotes, fenced code, rules and pipe tables. Every
+ * character is HTML-escaped before any markup is added; link and image URLs
+ * allow http(s), mailto, and relative paths only.
+ *
+ * ponytail: enough for READMEs and notes; a CommonMark engine is the upgrade if
+ * nested lists or reference links turn up.
+ */
+const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+const safeUrl = (u) => (/^(https?:|mailto:|\/|\.\/|\.\.\/|#|[a-z0-9_-]+(\/|\.|$))/i.test(u.trim()) && !/^javascript:/i.test(u.trim()) ? u.trim() : '#')
+
+export const inlineToHtml = (raw) => {
+  let s = esc(raw)
+  s = s.replace(/`([^`]+)`/g, (_, c) => `<code>${c}</code>`)
+  s = s.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, src) => `<img alt="${alt}" src="${safeUrl(src)}">`)
+  s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, t, href) => `<a href="${safeUrl(href)}">${t}</a>`)
+  s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>').replace(/__([^_]+)__/g, '<strong>$1</strong>')
+  s = s.replace(/(^|[^*])\*([^*\n]+)\*/g, '$1<em>$2</em>').replace(/(^|[^_])_([^_\n]+)_/g, '$1<em>$2</em>')
+  return s
+}
+
+export default function markdownToHtml(markdown = '') {
+  const lines = markdown.replace(/\r\n?/g, '\n').split('\n')
+  const out = []
+  let i = 0
+  const para = []
+  const flush = () => { if (para.length) { out.push(`<p>${inlineToHtml(para.join(' ').trim())}</p>`); para.length = 0 } }
+  /* frontmatter at the very top is skipped */
+  if (lines[0]?.trim() === '---') { const end = lines.indexOf('---', 1); if (end > 0) i = end + 1 }
+  while (i < lines.length) {
+    const line = lines[i]; const t = line.trim()
+    if (t.startsWith('```')) {
+      flush(); const lang = t.slice(3).trim(); const buf = []; i++
+      while (i < lines.length && !lines[i].trim().startsWith('```')) buf.push(lines[i++])
+      i++; out.push(`<pre><code${lang ? ` class="language-${esc(lang)}"` : ''}>${esc(buf.join('\n'))}</code></pre>`); continue
+    }
+    if (!t) { flush(); i++; continue }
+    const h = t.match(/^(#{1,6})\s+(.*)$/)
+    if (h) { flush(); out.push(`<h${h[1].length}>${inlineToHtml(h[2])}</h${h[1].length}>`); i++; continue }
+    if (/^(-{3,}|\*{3,}|_{3,})$/.test(t)) { flush(); out.push('<hr>'); i++; continue }
+    if (t.startsWith('>')) {
+      flush(); const buf = []
+      while (i < lines.length && lines[i].trim().startsWith('>')) buf.push(lines[i++].trim().replace(/^>\s?/, ''))
+      out.push(`<blockquote>${markdownToHtml(buf.join('\n'))}</blockquote>`); continue
+    }
+    if (/^[-*+]\s+/.test(t) || /^\d+[.)]\s+/.test(t)) {
+      flush(); const ordered = /^\d+[.)]\s+/.test(t); const items = []
+      while (i < lines.length && (/^[-*+]\s+/.test(lines[i].trim()) || /^\d+[.)]\s+/.test(lines[i].trim()))) items.push(lines[i++].trim().replace(/^([-*+]|\d+[.)])\s+/, ''))
+      out.push(`<${ordered ? 'ol' : 'ul'}>${items.map((it) => `<li>${inlineToHtml(it)}</li>`).join('')}</${ordered ? 'ol' : 'ul'}>`); continue
+    }
+    if (t.startsWith('|') && lines[i + 1]?.trim().match(/^\|?\s*:?-{2,}/)) {
+      flush(); const cells = (l) => l.trim().replace(/^\||\|$/g, '').split('|').map((c) => inlineToHtml(c.trim()))
+      const head = cells(t); i += 2; const rows = []
+      while (i < lines.length && lines[i].trim().startsWith('|')) rows.push(cells(lines[i++]))
+      out.push(`<table><thead><tr>${head.map((c) => `<th>${c}</th>`).join('')}</tr></thead><tbody>${rows.map((r) => `<tr>${r.map((c) => `<td>${c}</td>`).join('')}</tr>`).join('')}</tbody></table>`); continue
+    }
+    para.push(t); i++
+  }
+  flush()
+  return out.join('\n')
+}

package/src/utilities/mediaKinds.js

@@ -4,8 +4,10 @@
  * code (B2 hands back application/octet-stream), so the extension decides. */
 
 const EXT_KINDS = {
-  json: 'text', yaml: 'text', yml: 'text', txt: 'text', md: 'text', csv: 'text',
-  tsv: 'text', pgn: 'text', xml: 'text', svg: 'image',
+  /* markdown · json · yaml are their own kinds (user ruling 2026-08-27 — "I want
+   * md always to show, make it unique"); text is the rest */
+  md: 'markdown', json: 'json', yaml: 'yaml', yml: 'yaml',
+  txt: 'text', csv: 'text', tsv: 'text', pgn: 'text', xml: 'text', svg: 'image',
   js: 'code', mjs: 'code', cjs: 'code', ts: 'code', jsx: 'code', tsx: 'code',
   css: 'code', html: 'code', sh: 'code', py: 'code',
   m3u8: 'playlist',
@@ -33,16 +35,17 @@ export function kindOf(o) {
   if (ct.startsWith('audio/')) return 'audio'
   const ext = extOf(o.key)
   if (EXT_KINDS[ext]) return EXT_KINDS[ext]
+  if (ct === 'text/markdown') return 'markdown'
+  if (ct === 'application/json') return 'json'
   if (ct.startsWith('text/')) return 'text'
   if (ct.startsWith('font/')) return 'font'
-  if (ct === 'application/json') return 'text'
   return 'other'
 }
 
-export const KINDS = ['image', 'video', 'audio', 'text', 'code', 'playlist', 'font', 'archive', 'other']
+export const KINDS = ['audio', 'video', 'image', 'markdown', 'json', 'yaml', 'text', 'code', 'playlist', 'font', 'archive', 'other']
 
 export const KIND_LABEL = {
-  image: 'image', video: 'video', audio: 'audio', text: 'text', code: 'code',
+  image: 'image', video: 'video', audio: 'audio', markdown: 'markdown', json: 'JSON', yaml: 'YAML', text: 'text', code: 'code',
   playlist: 'HLS', font: 'font', archive: 'archive', segments: 'HLS segments',
   system: 'system', other: 'file',
 }