@calcit/procs 0.8.34 → 0.8.36

package/lib/calcit.procs.mjs

@@ -130,7 +130,12 @@ export let peekDefatom = (path) => {
     return refsRegistry.get(path);
 };
 export let _$n_atom_$o_deref = (x) => {
-    return x.value;
+    if (x instanceof CalcitRef) {
+        return x.value;
+    }
+    else {
+        throw new Error("Expected CalcitRef");
+    }
 };
 export let _$n__ADD_ = (x, y) => {
     return x + y;

package/lib/custom-formatter.mjs

@@ -1,3 +1,4 @@
+import { isLiteral } from "./js-primes.mjs";
 import { CalcitRef, CalcitSymbol, CalcitTag } from "./calcit-data.mjs";
 import { CalcitRecord } from "./js-record.mjs";
 import { CalcitMap, CalcitSliceMap } from "./js-map.mjs";
@@ -16,11 +17,63 @@ let embedObject = (x) => {
         },
     ];
 };
-let shortPreview = (x) => {
-    if (x.length > 102) {
-        return x.substring(0, 100) + "...";
+/** camel case to kabab case */
+let kabab = (s) => {
+    return s.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+};
+/** returns {style: "..."} */
+let styles = (o) => {
+    let styleCode = "";
+    let keys = Object.keys(o);
+    for (let idx = 0; idx < keys.length; idx++) {
+        let key = keys[idx];
+        let value = o[key];
+        if (value) {
+            styleCode += `${kabab(key)}:${value};`;
+        }
+    }
+    return {
+        style: styleCode,
+    };
+};
+let hsl = (/** 0~360 */ h, /** 0~100 */ s, /** 0~100 */ l, /** 0~1 */ a) => {
+    if (a != null) {
+        return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+    }
+    return `hsl(${h}, ${s}%, ${l}%)`;
+};
+/** create element */
+let div = (style, ...children) => {
+    return ["div", styles(style), ...children];
+};
+let span = (style, ...children) => {
+    return ["span", styles(style), ...children];
+};
+let table = (style, ...children) => {
+    return ["table", styles(style), ...children];
+};
+let tr = (style, ...children) => {
+    return ["tr", styles(style), ...children];
+};
+let td = (style, ...children) => {
+    return ["td", styles(style), ...children];
+};
+/** handle null value in nested data */
+let saveString = (v) => {
+    if (typeof v === "string") {
+        if (v.match(/[\s\"\n\t\,]/)) {
+            return `"|${v}"`;
+        }
+        else {
+            return `|${v}`;
+        }
+    }
+    else if (v != null && v.toString) {
+        return v.toString();
+    }
+    else {
+        return "nil";
     }
-    return x;
 };
 export let load_console_formatter_$x_ = () => {
     if (typeof window === "object") {
@@ -28,107 +81,127 @@ export let load_console_formatter_$x_ = () => {
             {
                 header: (obj, config) => {
                     if (obj instanceof CalcitTag) {
-                        return ["div", { style: "color: hsl(240, 80%, 60%)" }, obj.toString()];
+                        return div({ color: hsl(240, 80, 60) }, obj.toString());
                     }
                     if (obj instanceof CalcitSymbol) {
-                        return ["div", { style: "color: hsl(340, 80%, 60%)" }, obj.toString()];
+                        return div({ color: hsl(240, 80, 60) }, obj.toString());
                     }
                     if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
-                        return [
-                            "div",
-                            { style: "color: hsl(280, 80%, 60%, 0.4)" },
-                            shortPreview(obj.toString(true, true)),
-                            ["span", { style: "font-size: 80%; vertical-align: 0.7em; color: hsl(280, 80%, 60%, 0.8)" }, `${obj.len()}`],
-                        ];
+                        let preview = "";
+                        let hasCollection = false;
+                        for (let idx = 0; idx < obj.len(); idx++) {
+                            preview += " ";
+                            if (isLiteral(obj.get(idx))) {
+                                preview += saveString(obj.get(idx));
+                            }
+                            else {
+                                preview += "..";
+                                hasCollection = true;
+                                break;
+                            }
+                        }
+                        return div({
+                            color: hasCollection ? hsl(280, 80, 60, 0.4) : null,
+                        }, `[]`, span({
+                            fontSize: "8px",
+                            verticalAlign: "middle",
+                            color: hsl(280, 80, 80, 0.8),
+                        }, `${obj.len()}`), " ", preview);
                     }
                     if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
-                        return ["div", { style: "color: hsl(280, 80%, 60%, 0.4)" }, shortPreview(obj.toString(true, true))];
+                        let preview = "";
+                        let hasCollection = false;
+                        for (let [k, v] of obj.pairs()) {
+                            preview += " ";
+                            if (isLiteral(k) && isLiteral(v)) {
+                                preview += `(${saveString(k)} ${saveString(v)})`;
+                            }
+                            else {
+                                preview += "..";
+                                hasCollection = true;
+                                break;
+                            }
+                        }
+                        return div({ color: hasCollection ? hsl(280, 80, 60, 0.4) : undefined }, "{}", preview);
                     }
                     if (obj instanceof CalcitSet) {
-                        return ["div", { style: "color: hsl(280, 80%, 60%, 0.4)" }, obj.toString(true)];
+                        return div({ color: hsl(280, 80, 60, 0.4) }, obj.toString(true));
                     }
                     if (obj instanceof CalcitRecord) {
-                        let ret = ["div", { style: "color: hsl(280, 80%, 60%)" }, `%{} ${obj.name}`];
-                        for (let idx = 0; idx < obj.fields.length; idx++) {
-                            ret.push([
-                                "div",
-                                { style: "margin-left: 8px;" },
-                                ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(obj.fields[idx])],
-                                ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(obj.values[idx])],
-                            ]);
-                        }
+                        let ret = div({ color: hsl(280, 80, 60, 0.4) }, `%{} ${obj.name} ...`);
                         return ret;
                     }
                     if (obj instanceof CalcitTuple) {
-                        let ret = ["div", {}];
-                        ret.push(["div", { style: "display: inline-block; color: hsl(300, 100%, 40%); " }, "::"]);
-                        ret.push(["div", { style: "margin-left: 6px; display: inline-block;" }, embedObject(obj.tag)]);
-                        for (let idx = 0; idx < obj.extra.length; idx++) {
-                            ret.push(["div", { style: "margin-left: 6px; display: inline-block;" }, embedObject(obj.extra[idx])]);
+                        if (obj.klass) {
+                            let ret = div({}, div({ display: "inline-block", color: hsl(300, 100, 40) }, "%::"), div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.klass)), div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.tag)));
+                            for (let idx = 0; idx < obj.extra.length; idx++) {
+                                ret.push(div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.extra[idx])));
+                            }
+                            return ret;
+                        }
+                        else {
+                            let ret = div({}, div({ display: "inline-block", color: hsl(300, 100, 40) }, "::"), div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.tag)));
+                            for (let idx = 0; idx < obj.extra.length; idx++) {
+                                ret.push(div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.extra[idx])));
+                            }
+                            return ret;
                         }
-                        return ret;
                     }
                     if (obj instanceof CalcitRef) {
-                        return [
-                            "div",
-                            { style: "color: hsl(280, 80%, 60%)" },
-                            `Ref ${obj.path}`,
-                            ["div", { style: "color: hsl(280, 80%, 60%)" }, ["div", { style: "margin-left: 8px;" }, embedObject(obj.value)]],
-                        ];
+                        return div({
+                            color: hsl(280, 80, 60),
+                        }, `Ref ${obj.path}`, div({ color: hsl(280, 80, 60) }, div({ marginLeft: "8px" }, embedObject(obj.value))));
                     }
                     if (obj instanceof CalcitCirruQuote) {
-                        return [
-                            "div",
-                            { style: "color: hsl(240, 80%, 60%); display: flex;" },
-                            `CirruQuote`,
-                            [
-                                "div",
-                                { style: "color: hsl(280, 80%, 60%); padding: 4px 4px; margin: 0 4px 2px; border: 1px solid hsl(0,70%,90%); border-radius: 4px;" },
-                                obj.textForm().trim(),
-                            ],
-                        ];
+                        return div({ color: hsl(280, 80, 60), display: "flex" }, `CirruQuote`, div({ color: hsl(280, 80, 60), padding: "4px 4px", margin: "0 4px 2px", border: "1px solid hsl(0,70%,90%)", borderRadius: "4px" }, obj.textForm().trim()));
                     }
                     return null;
                 },
                 hasBody: (obj) => {
                     if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
-                        return obj.len() > 0;
+                        let hasCollection = obj.nestedDataInChildren();
+                        return obj.len() > 0 && hasCollection;
                     }
                     if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
-                        return obj.len() > 0;
+                        let hasCollection = obj.nestedDataInChildren();
+                        return obj.len() > 0 && hasCollection;
                     }
                     if (obj instanceof CalcitSet) {
                         return obj.len() > 0;
                     }
+                    if (obj instanceof CalcitRecord) {
+                        return obj.fields.length > 0;
+                    }
                     return false;
                 },
                 body: (obj, config) => {
                     if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
                         let flexMode = obj.len() > 40 ? "inline-flex" : "flex";
-                        return ["div", { style: "color: hsl(280, 80%, 60%)" }].concat(obj.toArray().map((x, idx) => {
-                            return [
-                                "div",
-                                { style: `margin-left: 8px; display: ${flexMode}; padding-right: 16px;` },
-                                ["span", { style: "font-family: monospace; margin-right: 8px; color: hsl(280,80%,85%); flex-shrink: 0; font-size: 10px;" }, idx],
-                                embedObject(x),
-                            ];
+                        return div({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" }, ...obj.toArray().map((x, idx) => {
+                            return div({ marginLeft: "8px", display: flexMode, paddingRight: "16px" }, span({
+                                fontFamily: "monospace",
+                                marginRight: "8px",
+                                color: hsl(280, 80, 90),
+                                flexShrink: 0,
+                                fontSize: "10px",
+                            }, idx), embedObject(x));
                         }));
                     }
                     if (obj instanceof CalcitSet) {
-                        let ret = ["div", { style: "color: hsl(280, 80%, 60%)" }];
+                        let ret = div({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
                         let values = obj.values();
                         for (let idx = 0; idx < values.length; idx++) {
                             let x = values[idx];
-                            ret.push(["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(x)]);
+                            ret.push(div({ marginLeft: "8px", display: "inline-block" }, embedObject(x)));
                         }
                         return ret;
                     }
                     if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
-                        let ret = ["div", { style: "color: hsl(280, 80%, 60%)" }];
+                        let ret = table({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
                         let pairs = obj.pairs();
                         pairs.sort((pa, pb) => {
-                            let ka = pa[0].toString();
-                            let kb = pb[0].toString();
+                            let ka = saveString(pa[0]);
+                            let kb = saveString(pb[0]);
                             if (ka < kb) {
                                 return -1;
                             }
@@ -141,12 +214,18 @@ export let load_console_formatter_$x_ = () => {
                         });
                         for (let idx = 0; idx < pairs.length; idx++) {
                             let [k, v] = pairs[idx];
-                            ret.push([
-                                "div",
-                                { style: "margin-left: 8px; display: flex;" },
-                                ["div", { style: "margin-left: 8px; flex-shrink: 0; display: inline-block;" }, embedObject(k)],
-                                ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(v)],
-                            ]);
+                            ret.push(tr({
+                                marginLeft: "8px",
+                            }, td({ marginLeft: "8px", verticalAlign: "top" }, embedObject(k)), td({ marginLeft: "8px" }, embedObject(v))));
+                        }
+                        return ret;
+                    }
+                    if (obj instanceof CalcitRecord) {
+                        let ret = table({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
+                        for (let idx = 0; idx < obj.fields.length; idx++) {
+                            ret.push(tr({
+                                marginLeft: "8px",
+                            }, td({ marginLeft: "8px", verticalAlign: "top" }, embedObject(obj.fields[idx])), td({ marginLeft: "8px" }, embedObject(obj.values[idx]))));
                         }
                         return ret;
                     }

package/lib/js-cirru.mjs

@@ -1,5 +1,5 @@
 import { writeCirruCode } from "@cirru/writer.ts";
-import { is_literal, _$n_compare } from "./js-primes.mjs";
+import { isLiteral, _$n_compare } from "./js-primes.mjs";
 import { CalcitList, CalcitSliceList } from "./js-list.mjs";
 import { CalcitRecord } from "./js-record.mjs";
 import { CalcitMap, CalcitSliceMap } from "./js-map.mjs";
@@ -94,10 +94,10 @@ export let to_cirru_edn = (x) => {
             pairs_buffer.push(pairs[idx]);
         }
         pairs_buffer.sort((a, b) => {
-            let a0_literal = is_literal(a[0]);
-            let a1_literal = is_literal(a[1]);
-            let b0_literal = is_literal(b[0]);
-            let b1_literal = is_literal(b[1]);
+            let a0_literal = isLiteral(a[0]);
+            let a1_literal = isLiteral(a[1]);
+            let b0_literal = isLiteral(b[0]);
+            let b1_literal = isLiteral(b[1]);
             if (a0_literal && b0_literal) {
                 if (a1_literal && !b1_literal) {
                     return -1;
@@ -132,8 +132,8 @@ export let to_cirru_edn = (x) => {
         }
         // placed literals first
         buffer.sort((a, b) => {
-            let a1_literal = is_literal(a[1]);
-            let b1_literal = is_literal(b[1]);
+            let a1_literal = isLiteral(a[1]);
+            let b1_literal = isLiteral(b[1]);
             if (a1_literal && !b1_literal) {
                 return -1;
             }

package/lib/js-list.mjs

@@ -1,4 +1,5 @@
 import * as ternaryTree from "@calcit/ternary-tree";
+import { isLiteral } from "./js-primes.mjs";
 import { initTernaryTreeList, initTernaryTreeListFromRange, listLen, listGet, assocList, listToItems, dissocList, assocBefore, assocAfter, } from "@calcit/ternary-tree";
 import { CalcitMap, CalcitSliceMap } from "./js-map.mjs";
 import { CalcitSet } from "./js-set.mjs";
@@ -90,6 +91,13 @@ export class CalcitList {
     reverse() {
         return new CalcitList(ternaryTree.reverse(this.value));
     }
+    nestedDataInChildren() {
+        for (let idx = 0; idx < this.len(); idx++) {
+            if (!isLiteral(this.get(idx))) {
+                return true;
+            }
+        }
+    }
 }
 // represent append-only immutable list in Array slices
 export class CalcitSliceList {
@@ -238,6 +246,13 @@ export class CalcitSliceList {
     reverse() {
         return this.turnListMode().reverse();
     }
+    nestedDataInChildren() {
+        for (let idx = 0; idx < this.len(); idx++) {
+            if (!isLiteral(this.get(idx))) {
+                return true;
+            }
+        }
+    }
 }
 function* sliceGenerator(xs, start, end) {
     if (xs == null) {

package/lib/js-map.mjs

@@ -1,4 +1,5 @@
 import * as ternaryTree from "@calcit/ternary-tree";
+import { isLiteral } from "./js-primes.mjs";
 import { CalcitSet } from "./js-set.mjs";
 import { mapLen, assocMap, dissocMap, isMapEmpty, toPairsArray, mapGetDefault, initEmptyTernaryTreeMap, initTernaryTreeMapFromArray, } from "@calcit/ternary-tree";
 import { isNestedCalcitData, tipNestedCalcitData, toString } from "./calcit-data.mjs";
@@ -152,8 +153,16 @@ export class CalcitMap {
         }
         return new CalcitSet(ret);
     }
+    /** detecthing in custom formatter */
+    nestedDataInChildren() {
+        for (let [k, v] of this.pairs()) {
+            if (!isLiteral(k) || !isLiteral(v)) {
+                return true;
+            }
+        }
+    }
 }
-// store small map in linear array to reduce cost of building tree
+/* store small map in linear array to reduce cost of building tree  */
 export class CalcitSliceMap {
     constructor(value) {
         if (value == null) {
@@ -345,4 +354,12 @@ export class CalcitSliceMap {
         }
         return new CalcitSet(ret);
     }
+    /** detecthing in custom formatter */
+    nestedDataInChildren() {
+        for (let [k, v] of this.pairs()) {
+            if (!isLiteral(k) || !isLiteral(v)) {
+                return true;
+            }
+        }
+    }
 }

package/lib/js-primes.mjs

@@ -5,7 +5,7 @@ import { CalcitMap, CalcitSliceMap } from "./js-map.mjs";
 import { CalcitSet as CalcitSet } from "./js-set.mjs";
 import { CalcitTuple } from "./js-tuple.mjs";
 import { CalcitCirruQuote } from "./js-cirru.mjs";
-export let is_literal = (x) => {
+export let isLiteral = (x) => {
     if (x == null)
         return true;
     if (typeof x == "string")

package/lib/js-tuple.mjs

@@ -58,7 +58,6 @@ export class CalcitTuple {
             content += toString(args[i], false, disableJsDataWarning);
         }
         if (this.klass instanceof CalcitRecord) {
-            console.log("CLASS", this.klass);
             return `(%:: ${content} (:class ${this.klass.name.value}))`;
         }
         else {

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@calcit/procs",
-    "version": "0.8.34",
+    "version": "0.8.36",
     "main": "./lib/calcit.procs.mjs",
     "devDependencies": {
         "@types/node": "^20.11.8",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcit/procs",
-  "version": "0.8.34",
+  "version": "0.8.36",
   "main": "./lib/calcit.procs.mjs",
   "devDependencies": {
     "@types/node": "^20.11.8",

package/ts-src/calcit.procs.mts

@@ -161,7 +161,11 @@ export let peekDefatom = (path: string): CalcitRef => {
 };
 
 export let _$n_atom_$o_deref = (x: CalcitRef): CalcitValue => {
-  return x.value;
+  if (x instanceof CalcitRef) {
+    return x.value;
+  } else {
+    throw new Error("Expected CalcitRef");
+  }
 };
 
 export let _$n__ADD_ = (x: number, y: number): number => {

package/ts-src/custom-formatter.mts

@@ -1,4 +1,4 @@
-import { CalcitValue } from "./js-primes.mjs";
+import { CalcitValue, isLiteral } from "./js-primes.mjs";
 import { CalcitRef, CalcitSymbol, CalcitTag } from "./calcit-data.mjs";
 
 import { CalcitRecord } from "./js-record.mjs";
@@ -30,11 +30,64 @@ let embedObject = (x: CalcitValue) => {
   ];
 };
 
-let shortPreview = (x: string) => {
-  if (x.length > 102) {
-    return x.substring(0, 100) + "...";
+/** camel case to kabab case */
+let kabab = (s: string) => {
+  return s.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+};
+
+/** returns {style: "..."} */
+let styles = (o: any) => {
+  let styleCode = "";
+  let keys = Object.keys(o);
+  for (let idx = 0; idx < keys.length; idx++) {
+    let key = keys[idx];
+    let value = (o as any)[key];
+    if (value) {
+      styleCode += `${kabab(key)}:${value};`;
+    }
+  }
+  return {
+    style: styleCode,
+  };
+};
+
+let hsl = (/** 0~360 */ h: number, /** 0~100 */ s: number, /** 0~100 */ l: number, /** 0~1 */ a?: number) => {
+  if (a != null) {
+    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+  }
+  return `hsl(${h}, ${s}%, ${l}%)`;
+};
+
+/** create element */
+let div = (style: any, ...children: any[]) => {
+  return ["div", styles(style), ...children];
+};
+let span = (style: any, ...children: any[]) => {
+  return ["span", styles(style), ...children];
+};
+let table = (style: any, ...children: any[]) => {
+  return ["table", styles(style), ...children];
+};
+let tr = (style: any, ...children: any[]) => {
+  return ["tr", styles(style), ...children];
+};
+let td = (style: any, ...children: any[]) => {
+  return ["td", styles(style), ...children];
+};
+
+/** handle null value in nested data */
+let saveString = (v: CalcitValue) => {
+  if (typeof v === "string") {
+    if (v.match(/[\s\"\n\t\,]/)) {
+      return `"|${v}"`;
+    } else {
+      return `|${v}`;
+    }
+  } else if (v != null && v.toString) {
+    return v.toString();
+  } else {
+    return "nil";
   }
-  return x;
 };
 
 export let load_console_formatter_$x_ = () => {
@@ -43,109 +96,163 @@ export let load_console_formatter_$x_ = () => {
       {
         header: (obj, config) => {
           if (obj instanceof CalcitTag) {
-            return ["div", { style: "color: hsl(240, 80%, 60%)" }, obj.toString()];
+            return div({ color: hsl(240, 80, 60) }, obj.toString());
           }
           if (obj instanceof CalcitSymbol) {
-            return ["div", { style: "color: hsl(340, 80%, 60%)" }, obj.toString()];
+            return div({ color: hsl(240, 80, 60) }, obj.toString());
           }
           if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
-            return [
-              "div",
-              { style: "color: hsl(280, 80%, 60%, 0.4)" },
-              shortPreview(obj.toString(true, true)),
-              ["span", { style: "font-size: 80%; vertical-align: 0.7em; color: hsl(280, 80%, 60%, 0.8)" }, `${obj.len()}`],
-            ];
+            let preview = "";
+            let hasCollection = false;
+            for (let idx = 0; idx < obj.len(); idx++) {
+              preview += " ";
+              if (isLiteral(obj.get(idx))) {
+                preview += saveString(obj.get(idx));
+              } else {
+                preview += "..";
+                hasCollection = true;
+                break;
+              }
+            }
+            return div(
+              {
+                color: hasCollection ? hsl(280, 80, 60, 0.4) : null,
+              },
+              `[]`,
+              span(
+                {
+                  fontSize: "8px",
+                  verticalAlign: "middle",
+                  color: hsl(280, 80, 80, 0.8),
+                },
+                `${obj.len()}`
+              ),
+              " ",
+              preview
+            );
           }
           if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
-            return ["div", { style: "color: hsl(280, 80%, 60%, 0.4)" }, shortPreview(obj.toString(true, true))];
+            let preview = "";
+            let hasCollection = false;
+            for (let [k, v] of obj.pairs()) {
+              preview += " ";
+              if (isLiteral(k) && isLiteral(v)) {
+                preview += `(${saveString(k)} ${saveString(v)})`;
+              } else {
+                preview += "..";
+                hasCollection = true;
+                break;
+              }
+            }
+            return div({ color: hasCollection ? hsl(280, 80, 60, 0.4) : undefined }, "{}", preview);
           }
           if (obj instanceof CalcitSet) {
-            return ["div", { style: "color: hsl(280, 80%, 60%, 0.4)" }, obj.toString(true)];
+            return div({ color: hsl(280, 80, 60, 0.4) }, obj.toString(true));
           }
           if (obj instanceof CalcitRecord) {
-            let ret: any[] = ["div", { style: "color: hsl(280, 80%, 60%)" }, `%{} ${obj.name}`];
-            for (let idx = 0; idx < obj.fields.length; idx++) {
-              ret.push([
-                "div",
-                { style: "margin-left: 8px;" },
-                ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(obj.fields[idx])],
-                ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(obj.values[idx])],
-              ]);
-            }
+            let ret: any[] = div({ color: hsl(280, 80, 60, 0.4) }, `%{} ${obj.name} ...`);
             return ret;
           }
           if (obj instanceof CalcitTuple) {
-            let ret: any[] = ["div", {}];
-            ret.push(["div", { style: "display: inline-block; color: hsl(300, 100%, 40%); " }, "::"]);
-            ret.push(["div", { style: "margin-left: 6px; display: inline-block;" }, embedObject(obj.tag)]);
-            for (let idx = 0; idx < obj.extra.length; idx++) {
-              ret.push(["div", { style: "margin-left: 6px; display: inline-block;" }, embedObject(obj.extra[idx])]);
+            if (obj.klass) {
+              let ret: any[] = div(
+                {},
+                div({ display: "inline-block", color: hsl(300, 100, 40) }, "%::"),
+                div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.klass)),
+                div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.tag))
+              );
+              for (let idx = 0; idx < obj.extra.length; idx++) {
+                ret.push(div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.extra[idx])));
+              }
+              return ret;
+            } else {
+              let ret: any[] = div(
+                {},
+                div({ display: "inline-block", color: hsl(300, 100, 40) }, "::"),
+                div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.tag))
+              );
+              for (let idx = 0; idx < obj.extra.length; idx++) {
+                ret.push(div({ marginLeft: "6px", display: "inline-block" }, embedObject(obj.extra[idx])));
+              }
+              return ret;
             }
-            return ret;
           }
           if (obj instanceof CalcitRef) {
-            return [
-              "div",
-              { style: "color: hsl(280, 80%, 60%)" },
+            return div(
+              {
+                color: hsl(280, 80, 60),
+              },
               `Ref ${obj.path}`,
-              ["div", { style: "color: hsl(280, 80%, 60%)" }, ["div", { style: "margin-left: 8px;" }, embedObject(obj.value)]],
-            ];
+              div({ color: hsl(280, 80, 60) }, div({ marginLeft: "8px" }, embedObject(obj.value)))
+            );
           }
           if (obj instanceof CalcitCirruQuote) {
-            return [
-              "div",
-              { style: "color: hsl(240, 80%, 60%); display: flex;" },
+            return div(
+              { color: hsl(280, 80, 60), display: "flex" },
               `CirruQuote`,
-              [
-                "div",
-                { style: "color: hsl(280, 80%, 60%); padding: 4px 4px; margin: 0 4px 2px; border: 1px solid hsl(0,70%,90%); border-radius: 4px;" },
-                obj.textForm().trim(),
-              ],
-            ];
+              div(
+                { color: hsl(280, 80, 60), padding: "4px 4px", margin: "0 4px 2px", border: "1px solid hsl(0,70%,90%)", borderRadius: "4px" },
+                obj.textForm().trim()
+              )
+            );
           }
           return null;
         },
         hasBody: (obj) => {
           if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
-            return obj.len() > 0;
+            let hasCollection = obj.nestedDataInChildren();
+            return obj.len() > 0 && hasCollection;
           }
           if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
-            return obj.len() > 0;
+            let hasCollection = obj.nestedDataInChildren();
+            return obj.len() > 0 && hasCollection;
           }
           if (obj instanceof CalcitSet) {
             return obj.len() > 0;
           }
+          if (obj instanceof CalcitRecord) {
+            return obj.fields.length > 0;
+          }
           return false;
         },
         body: (obj, config) => {
           if (obj instanceof CalcitList || obj instanceof CalcitSliceList) {
             let flexMode = obj.len() > 40 ? "inline-flex" : "flex";
-            return ["div", { style: "color: hsl(280, 80%, 60%)" }].concat(
-              obj.toArray().map((x, idx) => {
-                return [
-                  "div",
-                  { style: `margin-left: 8px; display: ${flexMode}; padding-right: 16px;` },
-                  ["span", { style: "font-family: monospace; margin-right: 8px; color: hsl(280,80%,85%); flex-shrink: 0; font-size: 10px;" }, idx],
-                  embedObject(x),
-                ];
-              }) as any[]
+            return div(
+              { color: hsl(280, 80, 60), borderLeft: "1px solid #eee" },
+              ...(obj.toArray().map((x, idx) => {
+                return div(
+                  { marginLeft: "8px", display: flexMode, paddingRight: "16px" },
+                  span(
+                    {
+                      fontFamily: "monospace",
+                      marginRight: "8px",
+                      color: hsl(280, 80, 90),
+                      flexShrink: 0,
+                      fontSize: "10px",
+                    },
+                    idx
+                  ),
+                  embedObject(x)
+                );
+              }) as any[])
             );
           }
           if (obj instanceof CalcitSet) {
-            let ret: any[] = ["div", { style: "color: hsl(280, 80%, 60%)" }];
+            let ret: any[] = div({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
             let values = obj.values();
             for (let idx = 0; idx < values.length; idx++) {
               let x = values[idx];
-              ret.push(["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(x)]);
+              ret.push(div({ marginLeft: "8px", display: "inline-block" }, embedObject(x)));
             }
             return ret;
           }
           if (obj instanceof CalcitMap || obj instanceof CalcitSliceMap) {
-            let ret: any[] = ["div", { style: "color: hsl(280, 80%, 60%)" }];
+            let ret: any[] = table({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
             let pairs = obj.pairs();
             pairs.sort((pa, pb) => {
-              let ka = pa[0].toString();
-              let kb = pb[0].toString();
+              let ka = saveString(pa[0]);
+              let kb = saveString(pb[0]);
               if (ka < kb) {
                 return -1;
               } else if (ka > kb) {
@@ -156,12 +263,30 @@ export let load_console_formatter_$x_ = () => {
             });
             for (let idx = 0; idx < pairs.length; idx++) {
               let [k, v] = pairs[idx];
-              ret.push([
-                "div",
-                { style: "margin-left: 8px; display: flex;" },
-                ["div", { style: "margin-left: 8px; flex-shrink: 0; display: inline-block;" }, embedObject(k)],
-                ["div", { style: "margin-left: 8px; display: inline-block;" }, embedObject(v)],
-              ]);
+              ret.push(
+                tr(
+                  {
+                    marginLeft: "8px",
+                  },
+                  td({ marginLeft: "8px", verticalAlign: "top" }, embedObject(k)),
+                  td({ marginLeft: "8px" }, embedObject(v))
+                )
+              );
+            }
+            return ret;
+          }
+          if (obj instanceof CalcitRecord) {
+            let ret: any[] = table({ color: hsl(280, 80, 60), borderLeft: "1px solid #eee" });
+            for (let idx = 0; idx < obj.fields.length; idx++) {
+              ret.push(
+                tr(
+                  {
+                    marginLeft: "8px",
+                  },
+                  td({ marginLeft: "8px", verticalAlign: "top" }, embedObject(obj.fields[idx])),
+                  td({ marginLeft: "8px" }, embedObject(obj.values[idx]))
+                )
+              );
             }
             return ret;
           }

package/ts-src/js-cirru.mts

@@ -1,7 +1,7 @@
 import { overwriteComparator, initTernaryTreeMap } from "@calcit/ternary-tree";
 import { CirruWriterNode, writeCirruCode } from "@cirru/writer.ts";
 
-import { CalcitValue, is_literal, _$n_compare } from "./js-primes.mjs";
+import { CalcitValue, isLiteral, _$n_compare } from "./js-primes.mjs";
 import { CalcitList, CalcitSliceList } from "./js-list.mjs";
 import { CalcitRecord } from "./js-record.mjs";
 import { CalcitMap, CalcitSliceMap } from "./js-map.mjs";
@@ -99,10 +99,10 @@ export let to_cirru_edn = (x: CalcitValue): CirruEdnFormat => {
       pairs_buffer.push(pairs[idx]);
     }
     pairs_buffer.sort((a, b) => {
-      let a0_literal = is_literal(a[0]);
-      let a1_literal = is_literal(a[1]);
-      let b0_literal = is_literal(b[0]);
-      let b1_literal = is_literal(b[1]);
+      let a0_literal = isLiteral(a[0]);
+      let a1_literal = isLiteral(a[1]);
+      let b0_literal = isLiteral(b[0]);
+      let b1_literal = isLiteral(b[1]);
       if (a0_literal && b0_literal) {
         if (a1_literal && !b1_literal) {
           return -1;
@@ -132,8 +132,8 @@ export let to_cirru_edn = (x: CalcitValue): CirruEdnFormat => {
     }
     // placed literals first
     buffer.sort((a, b) => {
-      let a1_literal = is_literal(a[1] as CalcitValue);
-      let b1_literal = is_literal(b[1] as CalcitValue);
+      let a1_literal = isLiteral(a[1] as CalcitValue);
+      let b1_literal = isLiteral(b[1] as CalcitValue);
       if (a1_literal && !b1_literal) {
         return -1;
       } else if (!a1_literal && b1_literal) {

package/ts-src/js-list.mts

@@ -1,6 +1,6 @@
 import * as ternaryTree from "@calcit/ternary-tree";
 
-import { CalcitValue } from "./js-primes.mjs";
+import { CalcitValue, isLiteral } from "./js-primes.mjs";
 
 import {
   TernaryTreeList,
@@ -106,6 +106,13 @@ export class CalcitList {
   reverse() {
     return new CalcitList(ternaryTree.reverse(this.value));
   }
+  nestedDataInChildren(): boolean {
+    for (let idx = 0; idx < this.len(); idx++) {
+      if (!isLiteral(this.get(idx))) {
+        return true;
+      }
+    }
+  }
 }
 
 // represent append-only immutable list in Array slices
@@ -254,6 +261,13 @@ export class CalcitSliceList {
   reverse() {
     return this.turnListMode().reverse();
   }
+  nestedDataInChildren(): boolean {
+    for (let idx = 0; idx < this.len(); idx++) {
+      if (!isLiteral(this.get(idx))) {
+        return true;
+      }
+    }
+  }
 }
 
 function* sliceGenerator(xs: Array<CalcitValue>, start: number, end: number): Generator<CalcitValue> {

package/ts-src/js-map.mts

@@ -1,6 +1,6 @@
 import * as ternaryTree from "@calcit/ternary-tree";
 
-import { CalcitValue } from "./js-primes.mjs";
+import { CalcitValue, isLiteral } from "./js-primes.mjs";
 import { CalcitSet } from "./js-set.mjs";
 
 import {
@@ -174,9 +174,18 @@ export class CalcitMap {
     }
     return new CalcitSet(ret);
   }
+
+  /** detecthing in custom formatter */
+  nestedDataInChildren() {
+    for (let [k, v] of this.pairs()) {
+      if (!isLiteral(k) || !isLiteral(v)) {
+        return true;
+      }
+    }
+  }
 }
 
-// store small map in linear array to reduce cost of building tree
+/* store small map in linear array to reduce cost of building tree  */
 export class CalcitSliceMap {
   cachedHash: Hash;
   /** in arrayMode, only flatten values, instead of tree structure */
@@ -369,4 +378,13 @@ export class CalcitSliceMap {
     }
     return new CalcitSet(ret);
   }
+
+  /** detecthing in custom formatter */
+  nestedDataInChildren() {
+    for (let [k, v] of this.pairs()) {
+      if (!isLiteral(k) || !isLiteral(v)) {
+        return true;
+      }
+    }
+  }
 }

package/ts-src/js-primes.mts

@@ -25,7 +25,7 @@ export type CalcitValue =
   | CalcitCirruQuote
   | null;
 
-export let is_literal = (x: CalcitValue): boolean => {
+export let isLiteral = (x: CalcitValue): boolean => {
   if (x == null) return true;
   if (typeof x == "string") return true;
   if (typeof x == "boolean") return true;

package/ts-src/js-tuple.mts

@@ -62,7 +62,6 @@ export class CalcitTuple {
       content += toString(args[i], false, disableJsDataWarning);
     }
     if (this.klass instanceof CalcitRecord) {
-      console.log("CLASS", this.klass);
       return `(%:: ${content} (:class ${this.klass.name.value}))`;
     } else {
       return `(:: ${content})`;