@kolkrabbi/kol-shell 0.31.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "private": false,
   "description": "KOL application shell — fixed 48px NavRail + AppShell layout root, PageShell/PageHeader scaffolds, ContentFilters catalog organism, GridCard, SettingsScaffold, WalkthroughPanel, ShortcutsOverlay. App chrome (kol-framework owns site chrome). Nav items, content, shortcuts and settings are consumer-injected. Sits above @kolkrabbi/kol-{theme,component,framework}.",
   "license": "MIT",
@@ -20,10 +20,10 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.145.0",
+    "@kolkrabbi/kol-component": "^0.150.1",
     "@kolkrabbi/kol-icons": "^0.25.0",
-    "@kolkrabbi/kol-theme": "^0.112.0",
-    "@kolkrabbi/kol-framework": "^0.36.0"
+    "@kolkrabbi/kol-framework": "^0.36.0",
+    "@kolkrabbi/kol-theme": "^0.119.0"
   },
   "files": [
     "src",

package/src/Logomark.jsx

@@ -5,10 +5,39 @@ import { useState, useEffect } from 'react'
  * <img> renders a currentColor mark black in dark mode (invisible). Ported
  * verbatim from the kol-mirror cut (module-level cache; async resolve even on
  * cache hit — sync setState in an effect cascades renders).
+ *
+ * The fetched markup is SANITIZED before injection — `<style>`/`<script>`
+ * stripped, `on*` attributes dropped (LogomarkInlineStyleLeak, kol-chess
+ * 2026-09-01). An SVG *document* may legitimately carry its own `<style>` — a
+ * theme-aware favicon does — but once inlined, that `<style>` is
+ * DOCUMENT-GLOBAL: kol-chess pointed `svgUrl` at its favicon and every <svg>
+ * in the app took OS-keyed ink and ignored `data-theme`, presenting two
+ * packages away as "the theme toggle is broken". A mark that needs its own
+ * styling inlines it as attributes, not a stylesheet.
  */
 
 const svgCache = new Map()
 
+/* strip what must never escape into the host document: stylesheets (global
+ * once inlined), scripts and event handlers (this is a fetch → innerHTML
+ * boundary). DOMParser is the correct tool; the regex fallback only runs if
+ * the markup does not even parse as SVG. */
+function sanitizeSvg(svg) {
+  try {
+    const doc = new DOMParser().parseFromString(svg, 'image/svg+xml')
+    if (doc.querySelector('parsererror')) throw new Error('unparseable')
+    doc.querySelectorAll('style, script').forEach((el) => el.remove())
+    doc.querySelectorAll('*').forEach((el) => {
+      for (const a of [...el.attributes]) if (/^on/i.test(a.name)) el.removeAttribute(a.name)
+    })
+    return new XMLSerializer().serializeToString(doc)
+  } catch {
+    return svg
+      .replace(/<(style|script)[\s\S]*?<\/\1\s*>/gi, '')
+      .replace(/\son[a-z]+\s*=\s*("[^"]*"|'[^']*')/gi, '')
+  }
+}
+
 export default function Logomark({ svgUrl, size = 20, className = '', ...props }) {
   const [svgContent, setSvgContent] = useState(() => svgCache.get(svgUrl) || null)
 
@@ -16,7 +45,7 @@ export default function Logomark({ svgUrl, size = 20, className = '', ...props }
     if (!svgUrl) return
     let active = true
     Promise.resolve(
-      svgCache.get(svgUrl) ?? fetch(svgUrl).then(res => res.text()).then(svg => { svgCache.set(svgUrl, svg); return svg })
+      svgCache.get(svgUrl) ?? fetch(svgUrl).then(res => res.text()).then(raw => { const svg = sanitizeSvg(raw); svgCache.set(svgUrl, svg); return svg })
     )
       .then(svg => { if (active) setSvgContent(svg) })
       .catch(() => {})