@kolkrabbi/kol-component 0.100.1 → 0.102.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.100.1",
+  "version": "0.102.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

@@ -137,12 +137,13 @@ export { default as LoaderOverlay } from './utilities/LoaderOverlay.jsx'
 export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker, MediaBrowser } from './organisms/MediaLibrary.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
-export { default as SettingsPanel, SettingsRow, SettingsSwitch, SettingsChoice, SettingsChipRow, SettingsFooter } from './organisms/SettingsPanel.jsx'
+export { default as SettingsPanel, SettingsSection, SettingsRow, SettingsSwitch, SettingsChoice, SettingsChipRow, SettingsFooter } from './organisms/SettingsPanel.jsx'
 export { default as SectionNewsletter } from './organisms/SectionNewsletter.jsx'
 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,6 @@
 import Button from '../atoms/Button.jsx'
-import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
+import Dropdown from '../molecules/Dropdown.jsx'
+import SectionLabel from '../atoms/SectionLabel.jsx'
 import ToggleSwitch from '../atoms/ToggleSwitch.jsx'
 import ShellDrawer from '../molecules/ShellDrawer.jsx'
 import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
@@ -21,7 +22,7 @@ import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
  * where the DS already owned one.
  *
  * The CONTROLS are the DS controls, not the source's word-buttons: a switch
- * row is `ToggleSwitch`, a choice row is `SegmentedToggle` — the source's
+ * row is `ToggleSwitch`, a choice row is a `Dropdown` (2026-08-27) — the source's
  * segmented variant was flagged by the user as the thing to fix here, not to
  * copy. Sections are the DS `Section` (pass `divided` on every one and the
  * hairline lands between siblings on its own).
@@ -129,11 +130,26 @@ export function SettingsSwitch({ on = false, onChange, disabled = false, disable
   )
 }
 
-/** SettingsChoice — the row's one-of-N control: the DS SegmentedToggle, sm.
- *  Options are values or `{ value, label }`. */
-export function SettingsChoice({ options = [], value, onChange, ariaLabel }) {
+/** SettingsSection — a section of the panel: the estate's section label (the DS
+ *  `SectionLabel`, sm — SettingsPanelEyebrowAndDropdowns, user 2026-08-27: "it's
+ *  literally SECTION LABEL, SUPER COMMON PATTERN") over its rows.
+ *  @param {string} label · @param {boolean} divided  a hairline above (between sections) */
+export function SettingsSection({ label, divided = false, children, className = '' }) {
+  return (
+    <div className={`flex flex-col gap-3 ${divided ? 'kol-section--divided' : ''} ${className}`.replace(/\s+/g, ' ').trim()}>
+      {label && <SectionLabel text={label} size="sm" />}
+      {children}
+    </div>
+  )
+}
+
+/** SettingsChoice — the row's one-of-N control: the DS Dropdown, sm · primary
+ *  (SettingsPanelEyebrowAndDropdowns — user: "put the toggles inside a dropdown,
+ *  because it's super messy like it is"). Options are values or `{ value, label }`;
+ *  width is the call site's (`className="w-40"`). */
+export function SettingsChoice({ options = [], value, onChange, ariaLabel, className = '' }) {
   const opts = options.map((o) => (o != null && typeof o === 'object' ? o : { value: o, label: String(o) }))
-  return <SegmentedToggle size="sm" value={value} onChange={onChange} options={opts} ariaLabel={ariaLabel} />
+  return <Dropdown size="sm" variant="primary" value={value} onChange={onChange} options={opts} className={className} aria-label={ariaLabel} />
 }
 
 /* THE CONTROL CHIP (SettingsPanelCompliance, user 2026-08-27: "WROOOONG" on the
@@ -146,15 +162,26 @@ export const chipCls = (on) => `${CHIP_CLS} ${on ? 'kol-control--filled' : 'text
 
 /**
  * SettingsChipRow — a wrap of toggle chips with optional counts (an
- * allow-list: every chip sets a default, never a gate).
+ * allow-list: every chip sets a default, never a gate). `allChip` puts an
+ * "all" chip first — the same control chip, filled when every option is on
+ * (SettingsPanelEyebrowAndDropdowns — user: "Show all in ghost mode? makes no
+ * sense"); `onAll(nextAllOn)` fires when it is clicked.
  * @param {Array}  options   [{ value, label, count? }]
  * @param {Array|Set} selected  the values that are on
  * @param {Function} onToggle  (value) => void
+ * @param {boolean|string} allChip  render the "all" chip (a string = its label)
+ * @param {Function} onAll     (nextAllOn: boolean) => void
  */
-export function SettingsChipRow({ options = [], selected = [], onToggle }) {
+export function SettingsChipRow({ options = [], selected = [], onToggle, allChip = false, onAll }) {
   const on = selected instanceof Set ? selected : new Set(selected)
+  const allOn = options.length > 0 && options.every((o) => on.has(o.value))
   return (
     <div className="flex flex-wrap gap-1">
+      {allChip && (
+        <button type="button" aria-pressed={allOn} onClick={() => onAll?.(!allOn)} className={chipCls(allOn)}>
+          {typeof allChip === 'string' ? allChip : 'all'}
+        </button>
+      )}
       {options.map((o) => (
         <button
           key={String(o.value)}

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',
 }