@trunkjs/content-pane 1.0.8 → 1.0.10

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.0.10 (2025-11-11)
+
+This was a version bump only for content-pane to align it with other projects, there were no code changes.
+
+## 1.0.9 (2025-11-10)
+
+This was a version bump only for content-pane to align it with other projects, there were no code changes.
+
 ## 1.0.8 (2025-08-29)
 
 This was a version bump only for content-pane to align it with other projects, there were no code changes.

package/README.md

@@ -33,7 +33,7 @@ tag, id or classes.
 
 ```markdown
 ## Header 2
-{: layout="#id1.class1"}
+{: layout="#id1.class1[slot=slotname]"}
 
 This is content below the section element.
 ```
@@ -47,6 +47,25 @@ Will be transformed to:
 </section>
 ```
 
+## Layers (I)
+
+Layers are defined using `layout="2.;"` syntax.
+
+- Create new layer with: `layout="2.;"`
+- Append to element of layer: `layout="+2.;"`
+- Skip this element: `layout="-;"`
+
+Example:
+
+```markdown
+## Header 2
+{: layout="2;#id1.class1"}
+
+---
+{: layout="2.5;.class2"}
+
+```
+
 ### Subelements
 
 The strcutrure of the content is defined by the h2-h6 elements.

package/components/tj-content-pane/TjContentPane.d.ts

@@ -1,9 +1,9 @@
 import { ReactiveElement } from 'lit';
 declare const ContentAreaElement2_base: (abstract new (...args: any[]) => {
-    "__#2794@#debugCached": boolean | null;
-    "__#2794@#myElementId": number;
+    "__#3119@#debugCached": boolean | null;
+    "__#3119@#myElementId": number;
     invalidateDebugCache(): void;
-    "__#2794@#myLoggerInstance": import('../../../../browser-utils/src/index.ts').Logger | null;
+    "__#3119@#myLoggerInstance": import('../../../../browser-utils/src/index.ts').Logger | null;
     readonly _debug: boolean;
     getLogger(instanceId?: string): import('../../../../browser-utils/src/index.ts').Logger;
     log(...args: any[]): void;

package/index.js

@@ -1,24 +1,24 @@
 import { create_element as F, LoggingMixin as U, Stopwatch as X, waitForDomContentLoaded as Y } from "@trunkjs/browser-utils";
 import { html as Z, unsafeCSS as ee, LitElement as te, ReactiveElement as re } from "lit";
-import { customElement as R, property as ne } from "lit/decorators.js";
-const oe = ":host{--border-color: red;--background-color: lightgray;font-family:Arial,sans-serif}#error-fixed-indicator{position:fixed;top:10px;right:10px;cursor:pointer;z-index:100000;padding:5px 10px;width:auto;max-width:90vw;min-width:100px;height:auto;box-shadow:0 4px 8px #0003;border:5px solid white;color:#fff;background-color:red;animation:blink 1s infinite;border-radius:15px;font-size:20px;font-weight:700;font-family:Arial,sans-serif}@keyframes blink{0%,to{background-color:#000}50%{background-color:red}}#error{background-color:var(--background-color);border:3px solid var(--border-color);padding:10px;margin:10px;border-radius:5px}h1{color:red;font-size:24px;margin:0}.error-details{font-size:14px;max-height:200px;overflow:auto}";
-var ie = Object.create, I = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, W = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), y = (e) => {
+import { customElement as W, property as ne } from "lit/decorators.js";
+const ie = ":host{--border-color: red;--background-color: lightgray;font-family:Arial,sans-serif}#error-fixed-indicator{position:fixed;top:10px;right:10px;cursor:pointer;z-index:100000;padding:5px 10px;width:auto;max-width:90vw;min-width:100px;height:auto;box-shadow:0 4px 8px #0003;border:5px solid white;color:#fff;background-color:red;animation:blink 1s infinite;border-radius:15px;font-size:20px;font-weight:700;font-family:Arial,sans-serif}@keyframes blink{0%,to{background-color:#000}50%{background-color:red}}#error{background-color:var(--background-color);border:3px solid var(--border-color);padding:10px;margin:10px;border-radius:5px}h1{color:red;font-size:24px;margin:0}.error-details{font-size:14px;max-height:200px;overflow:auto}";
+var oe = Object.create, I = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, j = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), x = (e) => {
   throw TypeError(e);
-}, se = (e, t, n) => t in e ? I(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, z = (e, t) => I(e, "name", { value: t, configurable: !0 }), ce = (e) => [, , , ie((e == null ? void 0 : e[W("metadata")]) ?? null)], j = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], w = (e) => e !== void 0 && typeof e != "function" ? y("Function expected") : e, le = (e, t, n, o, r) => ({ kind: j[e], name: t, metadata: o, addInitializer: (i) => n._ ? y("Already initialized") : r.push(w(i || null)) }), de = (e, t) => se(t, W("metadata"), e[3]), E = (e, t, n, o) => {
-  for (var r = 0, i = e[t >> 1], s = i && i.length; r < s; r++) t & 1 ? i[r].call(n) : o = i[r].call(n, o);
-  return o;
-}, D = (e, t, n, o, r, i) => {
-  var s, c, h, l, d, a = t & 7, f = !!(t & 8), u = !!(t & 16), v = a > 3 ? e.length + 1 : a ? f ? 1 : 2 : 0, L = j[a + 5], P = a > 3 && (e[v - 1] = []), Q = e[v] || (e[v] = []), _ = a && (!u && !f && (r = r.prototype), a < 5 && (a > 3 || !u) && ae(a < 4 ? r : { get [n]() {
-    return O(this, i);
+}, se = (e, t, n) => t in e ? I(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, O = (e, t) => I(e, "name", { value: t, configurable: !0 }), ce = (e) => [, , , oe((e == null ? void 0 : e[j("metadata")]) ?? null)], D = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], y = (e) => e !== void 0 && typeof e != "function" ? x("Function expected") : e, le = (e, t, n, i, r) => ({ kind: D[e], name: t, metadata: i, addInitializer: (o) => n._ ? x("Already initialized") : r.push(y(o || null)) }), de = (e, t) => se(t, j("metadata"), e[3]), E = (e, t, n, i) => {
+  for (var r = 0, o = e[t >> 1], s = o && o.length; r < s; r++) t & 1 ? o[r].call(n) : i = o[r].call(n, i);
+  return i;
+}, R = (e, t, n, i, r, o) => {
+  var s, c, h, l, d, a = t & 7, _ = !!(t & 8), u = !!(t & 16), v = a > 3 ? e.length + 1 : a ? _ ? 1 : 2 : 0, P = D[a + 5], L = a > 3 && (e[v - 1] = []), Q = e[v] || (e[v] = []), f = a && (!u && !_ && (r = r.prototype), a < 5 && (a > 3 || !u) && ae(a < 4 ? r : { get [n]() {
+    return z(this, o);
   }, set [n](p) {
-    return M(this, i, p);
+    return M(this, o, p);
   } }, n));
-  a ? u && a < 4 && z(i, (a > 2 ? "set " : a > 1 ? "get " : "") + n) : z(r, n);
-  for (var x = o.length - 1; x >= 0; x--)
-    l = le(a, n, h = {}, e[3], Q), a && (l.static = f, l.private = u, d = l.access = { has: u ? (p) => ue(r, p) : (p) => n in p }, a ^ 3 && (d.get = u ? (p) => (a ^ 1 ? O : pe)(p, r, a ^ 4 ? i : _.get) : (p) => p[n]), a > 2 && (d.set = u ? (p, C) => M(p, r, C, a ^ 4 ? i : _.set) : (p, C) => p[n] = C)), c = (0, o[x])(a ? a < 4 ? u ? i : _[L] : a > 4 ? void 0 : { get: _.get, set: _.set } : r, l), h._ = 1, a ^ 4 || c === void 0 ? w(c) && (a > 4 ? P.unshift(c) : a ? u ? i = c : _[L] = c : r = c) : typeof c != "object" || c === null ? y("Object expected") : (w(s = c.get) && (_.get = s), w(s = c.set) && (_.set = s), w(s = c.init) && P.unshift(s));
-  return a || de(e, r), _ && I(r, n, _), u ? a ^ 4 ? i : _ : r;
-}, S = (e, t, n) => t.has(e) || y("Cannot " + n), ue = (e, t) => Object(t) !== t ? y('Cannot use the "in" operator on this value') : e.has(t), O = (e, t, n) => (S(e, t, "read from private field"), n ? n.call(e) : t.get(e)), he = (e, t, n) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), M = (e, t, n, o) => (S(e, t, "write to private field"), o ? o.call(e, n) : t.set(e, n), n), pe = (e, t, n) => (S(e, t, "access private method"), n), B, b, H, g, $;
-H = [R("tj-error-element")];
+  a ? u && a < 4 && O(o, (a > 2 ? "set " : a > 1 ? "get " : "") + n) : O(r, n);
+  for (var w = i.length - 1; w >= 0; w--)
+    l = le(a, n, h = {}, e[3], Q), a && (l.static = _, l.private = u, d = l.access = { has: u ? (p) => ue(r, p) : (p) => n in p }, a ^ 3 && (d.get = u ? (p) => (a ^ 1 ? z : pe)(p, r, a ^ 4 ? o : f.get) : (p) => p[n]), a > 2 && (d.set = u ? (p, C) => M(p, r, C, a ^ 4 ? o : f.set) : (p, C) => p[n] = C)), c = (0, i[w])(a ? a < 4 ? u ? o : f[P] : a > 4 ? void 0 : { get: f.get, set: f.set } : r, l), h._ = 1, a ^ 4 || c === void 0 ? y(c) && (a > 4 ? L.unshift(c) : a ? u ? o = c : f[P] = c : r = c) : typeof c != "object" || c === null ? x("Object expected") : (y(s = c.get) && (f.get = s), y(s = c.set) && (f.set = s), y(s = c.init) && L.unshift(s));
+  return a || de(e, r), f && I(r, n, f), u ? a ^ 4 ? o : f : r;
+}, S = (e, t, n) => t.has(e) || x("Cannot " + n), ue = (e, t) => Object(t) !== t ? x('Cannot use the "in" operator on this value') : e.has(t), z = (e, t, n) => (S(e, t, "read from private field"), n ? n.call(e) : t.get(e)), he = (e, t, n) => t.has(e) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, n), M = (e, t, n, i) => (S(e, t, "write to private field"), i ? i.call(e, n) : t.set(e, n), n), pe = (e, t, n) => (S(e, t, "access private method"), n), B, b, H, g, $;
+H = [W("tj-error-element")];
 class m extends (b = te, B = [ne({ type: String, reflect: !0 })], b) {
   constructor(t = "An error occurred", n) {
     super(), this.originalCode = void 0, he(this, $, E(g, 8, this)), E(g, 11, this), this.message = t, this.originalCode = n;
@@ -45,12 +45,12 @@ class m extends (b = te, B = [ne({ type: String, reflect: !0 })], b) {
 }
 g = ce(b);
 $ = /* @__PURE__ */ new WeakMap();
-D(g, 4, "message", B, m, $);
-m = D(g, 0, "TjErrorElement", H, m);
-m.styles = [ee(oe)];
+R(g, 4, "message", B, m, $);
+m = R(g, 0, "TjErrorElement", H, m);
+m.styles = [ee(ie)];
 E(g, 1, m);
 function fe(e, { allowAttributes: t = !0, ignoreGaps: n = !0 } = {}) {
-  let o = "div", r = null, i = [], s = [], c = {};
+  let i = "div", r = null, o = [], s = [], c = {};
   const h = /(^[a-z][\w-]*)|#[\w-]+|\.[\w:-]+|\[\s*([\w-]+)(?:\s*=\s*(['"]?)(.*?)\3)?\s*\]/gi;
   let l = 0;
   for (; ; ) {
@@ -62,38 +62,30 @@ function fe(e, { allowAttributes: t = !0, ignoreGaps: n = !0 } = {}) {
     }
     const a = d[0];
     if (a[0] === "#") r = a.slice(1);
-    else if (a[0] === ".") i.push(a.slice(1));
+    else if (a[0] === ".") o.push(a.slice(1));
     else if (a[0] === "[") {
       if (!t) throw new Error(`Attributes not allowed: '${a}'`);
-      const f = d[2], u = d[4] || void 0;
-      s.push({ name: f, value: u }), c[f] = u;
-    } else o = a;
+      const _ = d[2], u = d[4] || void 0;
+      s.push({ name: _, value: u }), c[_] = u;
+    } else i = a;
     l += a.length;
   }
-  return { tag: o, id: r, classes: i, attrs: s, attrsMap: c, length: l, rest: e.slice(l) };
+  return { tag: i, id: r, classes: o, attrs: s, attrsMap: c, length: l, rest: e.slice(l) };
 }
 function _e(e) {
   return typeof e.beforeLayoutCallback == "function";
 }
 function ve(e, t, n) {
   var d, a;
-  console.log("Applying layout to element:", e, "with layout:", n);
-  const o = /^(\+|-|)([0-9]+\.?[0-9]*);?/, r = n.replace(o, ""), i = fe(r), s = { class: "" };
-  i.attrsMap.class && (s.class = i.attrsMap.class + " "), s.class += i.classes.join(" "), s.id = i.id, ((d = s.class) == null ? void 0 : d.trim()) === "" && delete s.class, ((a = s.id) == null ? void 0 : a.trim()) === "" && delete s.id;
-  const c = i.tag || "div";
+  const i = /^(\+|-|)([0-9]+\.?[0-9]*);?/, r = n.replace(i, ""), o = fe(r), s = o.attrsMap;
+  s.class = "", o.attrsMap.class && (s.class = o.attrsMap.class + " "), s.class += o.classes.join(" "), s.id = o.id ?? void 0, ((d = s.class) == null ? void 0 : d.trim()) === "" && delete s.class, ((a = s.id) == null ? void 0 : a.trim()) === "" && delete s.id;
+  const c = o.tag || "div";
   let h = !1, l = F(c, { ...s, layoutOrig: n });
   if (c.includes("-") && !customElements.get(c))
     console.warn(`Custom element <${c}> is not registered.`), l = new m(`Custom element <${c}> is not registered.`, e.outerHTML), e.replaceWith(l), l.append(e), h = !0;
   else {
-    const f = Array.from(e.children);
-    _e(l) && (h = l.beforeLayoutCallback(e, l, f) === !1), console.log(
-      "Replacement element created:",
-      l,
-      "with children:",
-      f,
-      "skipChildren:",
-      h
-    ), l.__ORIG_ELEMENT__ = e, l.append(...Array.from(e.children)), e.replaceWith(l);
+    const _ = Array.from(e.children);
+    _e(l) && (h = l.beforeLayoutCallback(e, l, _) === !1), l.__ORIG_ELEMENT__ = e, l.append(...Array.from(e.children)), e.replaceWith(l);
   }
   return {
     replacementElement: l,
@@ -101,20 +93,15 @@ function ve(e, t, n) {
   };
 }
 function k(e, t = {}) {
-  console.log("applyLayout called with element:", e, "and options:", t);
   const { recursive: n = !0 } = t;
-  let o = [];
+  let i = [];
   if (Array.isArray(e))
-    return e.forEach((c) => o.push(...k(c, t))), o;
+    return e.forEach((c) => i.push(...k(c, t))), i;
   if (!(e instanceof HTMLElement))
     return [];
   const r = e.getAttribute("layout");
-  let i = !1, s = e;
-  if (r && ({ replacementElement: s, skipChildren: i } = ve(e, t, r)), n && !i) {
-    const c = Array.from(s.children);
-    console.log("Applying layout to children:", c, "of element:", s), c.forEach((h) => o.push(...k(h, t)));
-  }
-  return o;
+  let o = !1, s = e;
+  return r && ({ replacementElement: s, skipChildren: o } = ve(e, t, r)), n && !o && Array.from(s.children).forEach((h) => i.push(...k(h, t))), i;
 }
 function Te(e) {
   return e && typeof e == "object" && "__I__" in e && typeof e.__I__ == "object" && "i" in e.__I__;
@@ -124,39 +111,39 @@ class ge {
     this.debug = n, this.currentContainerNode = null, this.containerPath = [], this.containerIndex = [0], this.lastFixedI = 20, this.currentContainerNode = this.rootNode = t, this.containerPath.push(this.rootNode);
   }
   getI(t) {
-    const n = t.tagName, o = t.getAttribute("layout"), r = { i: -99, variant: "new", tag: "hr", hi: null };
-    if (o) {
-      const i = /^(\+|-|)([0-9]\.?[0-9]?|)(;|$)/, s = o.match(i);
+    const n = t.tagName, i = t.getAttribute("layout"), r = { i: -99, variant: "new", tag: "hr", hi: null };
+    if (i) {
+      const o = /^(\+|-|)([0-9]\.?[0-9]?|)(;|$)/, s = i.match(o);
       s && (console.debug("Layout matches", s), r.variant = s[1] === "+" ? "append" : s[1] === "-" ? "skip" : "new", s[2] !== "" && (r.i = parseFloat(s[2]) * 10));
     }
     if (n.startsWith("H") && n.length === 2) {
-      let i = n.substring(1);
-      return r.tag = "h", r.hi = parseInt(i), i === "1" && (i = "2"), r.i === -99 && (r.i = parseInt(i) * 10, this.lastFixedI = r.i), r;
+      let o = n.substring(1);
+      return r.tag = "h", r.hi = parseInt(o), o === "1" && (o = "2"), r.i === -99 && (r.i = parseInt(o) * 10, this.lastFixedI = r.i), r;
     }
     return r.i === -99 && n === "HR" ? (r.i = this.lastFixedI + 5, r) : null;
   }
   getAttributeRecords(t, n = !1) {
-    const o = {};
+    const i = {};
     for (const r of t.attributes)
-      r.name.startsWith("section-") ? o[r.name] = r.value.replace(/^section-/, "") : r.name.startsWith("layout") ? (o[r.name] = r.value, t.removeAttribute(r.name)) : n && (o[r.name] = r.value);
+      r.name.startsWith("section-") ? i[r.name.replace(/^section-/, "")] = r.value : r.name.startsWith("layout") ? (i[r.name] = r.value, t.removeAttribute(r.name)) : n && (i[r.name] = r.value);
     if (!n)
       for (const r of Array.from(t.classList))
-        r.startsWith("section-") && (o.class = (o.class || "") + " " + r.replace(/^section-/, ""), t.classList.remove(r));
-    return o;
+        r.startsWith("section-") && (i.class = (i.class || "") + " " + r.replace(/^section-/, ""), t.classList.remove(r));
+    return i;
   }
   createNewContainerNode(t, n) {
-    const o = this.getAttributeRecords(t, t.tagName === "HR"), r = F("section", o);
+    const i = this.getAttributeRecords(t, t.tagName === "HR"), r = F("section", i);
     return r.__IT = n, r;
   }
   arrangeSingleNode(t, n) {
     n.i;
-    let o = 0;
-    for (o = 0; o < this.containerIndex.length && !(this.containerIndex[o] >= n.i); o++)
+    let i = 0;
+    for (i = 0; i < this.containerIndex.length && !(this.containerIndex[i] >= n.i); i++)
       ;
     let r = null;
-    n.variant === "append" ? (console.log("Appending to container at index", o, "with i", n.i), r = this.containerPath[o]) : r = this.createNewContainerNode(t, n);
-    const i = this.containerPath[o - 1];
-    this.containerPath.length = o, this.containerIndex.length = o, r.appendChild(t), i.appendChild(r), this.containerPath.push(r), this.containerIndex.push(n.i), this.currentContainerNode = r;
+    n.variant === "append" ? (console.log("Appending to container at index", i, "with i", n.i), r = this.containerPath[i]) : r = this.createNewContainerNode(t, n);
+    const o = this.containerPath[i - 1];
+    this.containerPath.length = i, this.containerIndex.length = i, r.appendChild(t), o.appendChild(r), this.containerPath.push(r), this.containerIndex.push(n.i), this.currentContainerNode = r;
   }
   appendToCurrentContainer(t) {
     if (this.currentContainerNode === null)
@@ -169,28 +156,28 @@ class ge {
         this.appendToCurrentContainer(n);
         continue;
       }
-      const o = n, r = this.getI(o);
+      const i = n, r = this.getI(i);
       if (!r || r.variant === "skip") {
         this.appendToCurrentContainer(n);
         continue;
       }
-      this.arrangeSingleNode(o, r);
+      this.arrangeSingleNode(i, r);
     }
   }
 }
-var me = Object.create, N = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, q = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), G = (e) => {
+var me = Object.create, N = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, q = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), G = (e) => {
   throw TypeError(e);
-}, we = (e, t, n) => t in e ? N(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, xe = (e, t) => N(e, "name", { value: t, configurable: !0 }), Ce = (e) => [, , , me((e == null ? void 0 : e[q("metadata")]) ?? null)], Ee = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], V = (e) => e !== void 0 && typeof e != "function" ? G("Function expected") : e, be = (e, t, n, o, r) => ({ kind: Ee[e], name: t, metadata: o, addInitializer: (i) => n._ ? G("Already initialized") : r.push(V(i || null)) }), ke = (e, t) => we(t, q("metadata"), e[3]), Ae = (e, t, n, o) => {
-  for (var r = 0, i = e[t >> 1], s = i && i.length; r < s; r++) i[r].call(n);
-  return o;
-}, Ie = (e, t, n, o, r, i) => {
-  var s, c, h, l = t & 7, d = !1, a = 0, f = e[a] || (e[a] = []), u = l && (r = r.prototype, l < 5 && (l > 3 || !d) && ye(r, n));
-  xe(r, n);
-  for (var v = o.length - 1; v >= 0; v--)
-    h = be(l, n, c = {}, e[3], f), s = (0, o[v])(r, h), c._ = 1, V(s) && (r = s);
-  return ke(e, r), u && N(r, n, u), d ? l ^ 4 ? i : u : r;
+}, ye = (e, t, n) => t in e ? N(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, we = (e, t) => N(e, "name", { value: t, configurable: !0 }), Ce = (e) => [, , , me((e == null ? void 0 : e[q("metadata")]) ?? null)], Ee = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], V = (e) => e !== void 0 && typeof e != "function" ? G("Function expected") : e, be = (e, t, n, i, r) => ({ kind: Ee[e], name: t, metadata: i, addInitializer: (o) => n._ ? G("Already initialized") : r.push(V(o || null)) }), ke = (e, t) => ye(t, q("metadata"), e[3]), Ae = (e, t, n, i) => {
+  for (var r = 0, o = e[t >> 1], s = o && o.length; r < s; r++) o[r].call(n);
+  return i;
+}, Ie = (e, t, n, i, r, o) => {
+  var s, c, h, l = t & 7, d = !1, a = 0, _ = e[a] || (e[a] = []), u = l && (r = r.prototype, l < 5 && (l > 3 || !d) && xe(r, n));
+  we(r, n);
+  for (var v = i.length - 1; v >= 0; v--)
+    h = be(l, n, c = {}, e[3], _), s = (0, i[v])(r, h), c._ = 1, V(s) && (r = s);
+  return ke(e, r), u && N(r, n, u), d ? l ^ 4 ? o : u : r;
 }, J, T, K;
-J = [R("tj-content-pane")];
+J = [W("tj-content-pane")];
 class A extends (K = U(re)) {
   static get is() {
     return "tj-content-pane";
@@ -204,8 +191,8 @@ class A extends (K = U(re)) {
   arrange() {
     const t = new X("SectionTreeBuilder");
     this.log("arrange() called");
-    const n = new ge(this), o = Array.from(this.children);
-    n.arrange(o), k(Array.from(this.children), { recursive: !0 }), t.lap("after arrange");
+    const n = new ge(this), i = Array.from(this.children);
+    n.arrange(i), k(Array.from(this.children), { recursive: !0 }), t.lap("after arrange");
   }
   async connectedCallback() {
     await Y(), super.connectedCallback(), this.arrange();
@@ -214,23 +201,23 @@ class A extends (K = U(re)) {
 T = Ce(K);
 A = Ie(T, 0, "ContentAreaElement2", J, A);
 Ae(T, 1, A);
-function Le(e, t, n) {
-  const o = [], r = t.split("|");
-  for (const i of r) {
-    const s = e.querySelectorAll(i.trim());
+function Pe(e, t, n) {
+  const i = [], r = t.split("|");
+  for (const o of r) {
+    const s = e.querySelectorAll(o.trim());
     if (s.length > 0)
       for (const c of s) {
-        o.push(c);
+        i.push(c);
         for (const [h, l] of Object.entries(n))
           c.setAttribute(h, l);
       }
   }
-  return o;
+  return i;
 }
 export {
   A as ContentAreaElement2,
   ge as SectionTreeBuilder,
   k as applyLayout,
-  Le as attrAssign,
+  Pe as attrAssign,
   Te as isSectionTreeElement
 };

package/lib/SectionTreeBuilder.d.ts

@@ -3,8 +3,8 @@ export type IType = {
      * Number  10 - 60 - 2.5 -> 25
      */
     i: number;
-    variant: "append" | "new" | "skip";
-    tag: "hr" | "h";
+    variant: 'append' | 'new' | 'skip';
+    tag: 'hr' | 'h';
     hi?: number | null;
 };
 export interface SectionTreeElement {

package/package.json

@@ -1,11 +1,14 @@
 {
     "name": "@trunkjs/content-pane",
-    "version": "1.0.8",
+    "version": "1.0.10",
     "main": "./index.js",
     "dependencies": {
         "@trunkjs/browser-utils": "^1.0.14",
         "lit": "^3.3.1"
     },
+    "devDependencies": {
+        "@trunkjs/markdown-loader": "*"
+    },
     "type": "module",
     "types": "./index.d.ts",
     "web-types": "./web-types.json"