Upload 33 files

ui_kits/chan-compass/app.jsx

@@ -6,15 +6,23 @@ const { useState: useS, useEffect: useE } = React;
 function _pascalG(name) {
   return String(name).split(/[-_]/).map(s=>s.charAt(0).toUpperCase()+s.slice(1)).join("");
 }
+function _glyphChildren(node) {
+  if (!node) return [];
+  if (Array.isArray(node)) {
+    if (node.length === 3 && Array.isArray(node[2])) return node[2];
+    return node;
+  }
+  return node.tags || node.children || [];
+}
 function _glyphSvg(name, size, color) {
   const L = window.lucide;
   if (!L || !L.icons) return "";
   const node = L.icons[_pascalG(name)] || L.icons[name];
-  if (!node) return "";
-  const children = Array.isArray(node) ? node : (node.tags || node[2] || []);
-  const inner = (children || []).map(([tag, attrs]) => {
-    const a = Object.entries(attrs||{}).map(([k,v])=>`${k}="${v}"`).join(" ");
-    return `<${tag} ${a}/>`;
+  const children = _glyphChildren(node);
+  const inner = (children || []).map((ch) => {
+    const tag = ch[0], attrs = ch[1] || {};
+    const a = Object.entries(attrs).map(([k,v])=>`${k}="${v}"`).join(" ");
+    return `<${tag} ${a}></${tag}>`;
   }).join("");
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" `
     + `viewBox="0 0 24 24" fill="none" stroke="${color||'currentColor'}" `

ui_kits/chan-compass/index.html

@@ -20,9 +20,5 @@
 <script src="/md.js"></script>
 <script type="text/babel" src="/views.jsx"></script>
 <script type="text/babel" src="/app.jsx"></script>
-<script>
-  // Re-render lucide icons after Babel mounts everything.
-  window.addEventListener('load', () => setTimeout(() => window.lucide && window.lucide.createIcons(), 400));
-</script>
 </body>
 </html>

ui_kits/chan-compass/views.jsx

@@ -9,16 +9,24 @@ const API = window.CCApi;
 function _pascal(name) {
   return String(name).split(/[-_]/).map(s=>s.charAt(0).toUpperCase()+s.slice(1)).join("");
 }
+function _lucideChildren(node) {
+  if (!node) return [];
+  if (Array.isArray(node)) {
+    // could be [ [tag,attrs], ... ]  OR  ["svg", attrs, [ [tag,attrs],... ]]
+    if (node.length === 3 && Array.isArray(node[2])) return node[2];
+    return node;
+  }
+  return node.tags || node.children || [];
+}
 function _lucideSvg(name, size, color) {
   const L = window.lucide;
   if (!L || !L.icons) return "";
   const node = L.icons[_pascal(name)] || L.icons[name];
-  if (!node) return "";
-  // lucide icon data is an array of [tag, attrs] children
-  const children = Array.isArray(node) ? node : (node.tags || node[2] || []);
-  const inner = (children || []).map(([tag, attrs]) => {
-    const a = Object.entries(attrs||{}).map(([k,v])=>`${k}="${v}"`).join(" ");
-    return `<${tag} ${a}/>`;
+  const children = _lucideChildren(node);
+  const inner = (children || []).map((ch) => {
+    const tag = ch[0], attrs = ch[1] || {};
+    const a = Object.entries(attrs).map(([k,v])=>`${k}="${v}"`).join(" ");
+    return `<${tag} ${a}></${tag}>`;
   }).join("");
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" `
     + `viewBox="0 0 24 24" fill="none" stroke="${color||'currentColor'}" `