@trebco/treb 27.9.0 → 27.11.1

package/treb-grid/src/editors/editor.ts

@@ -34,7 +34,7 @@
  * 
  */
 
-import { Area, type IArea, type ICellAddress, IsCellAddress, Localization, type Theme, Rectangle, type Cell } from 'treb-base-types';
+import { Area, type IArea, type ICellAddress, IsCellAddress, Localization, type Theme, Rectangle, type Cell, DOMUtilities } from 'treb-base-types';
 import type { ExpressionUnit, ParseResult, UnitAddress, UnitRange } from 'treb-parser';
 import { Parser, QuotedSheetNameRegex } from 'treb-parser';
 import type { DataModel, ViewModel } from '../types/data_model';
@@ -291,7 +291,6 @@ export class Editor<E = FormulaEditorEvent> extends EventSource<E|FormulaEditorE
     super();
 
     this.parser = model.parser;
-    // this.measurement_node = document.createElement('div');
 
   }
 
@@ -866,13 +865,13 @@ export class Editor<E = FormulaEditorEvent> extends EventSource<E|FormulaEditorE
 
           if (type !== 'text') {
 
-            const span = document.createElement('span');
+            const span = DOMUtilities.Create('span', type);
 
             if (reference) {
               span.dataset.reference = reference;
             }
 
-            span.className = type;
+            // span.className = type;
             span.appendChild(text_node);
             fragment.appendChild(span);
 

package/treb-grid/src/editors/formula_bar.ts

@@ -25,7 +25,7 @@ import { Parser } from 'treb-parser';
 import type { DataModel, ViewModel } from '../types/data_model';
 import type { GridOptions } from '../types/grid_options';
 import { Autocomplete } from './autocomplete';
-import { DOMUtilities } from '../util/dom_utilities';
+import { DOMUtilities } from 'treb-base-types';
 
 // --- from formula_bar ---
 

package/treb-grid/src/layout/base_layout.ts

@@ -19,7 +19,7 @@
  * 
  */
 
-import { DOMUtilities } from '../util/dom_utilities';
+import { DOMUtilities } from 'treb-base-types';
 import type { DataModel, ViewModel } from '../types/data_model';
 
 import type { Tile } from '../types/tile';
@@ -46,8 +46,6 @@ import type { Annotation } from '../types/annotation';
 
 export { Area as TileRange } from 'treb-base-types';
 
-const SVGNS = 'http://www.w3.org/2000/svg';
-
 export interface TooltipOptions {
   up?: true;
   left?: true;
@@ -203,19 +201,16 @@ export abstract class BaseLayout {
     // contexts; the mask will be under the next sheet. so either
     // global in body, or instance local.
 
-    this.mask = // document.querySelector('.treb-mouse-mask'); // ||
-      DOMUtilities.CreateDiv('treb-mouse-mask');
-    this.tooltip = // document.querySelector('.treb-tooltip'); // ||
-      DOMUtilities.CreateDiv('treb-tooltip');
+    this.mask = DOMUtilities.Div('treb-mouse-mask');
+    this.tooltip = DOMUtilities.Div('treb-tooltip');
 
     // this.error_highlight = DOMUtilities.CreateDiv('treb-error-highlight');
 
-    this.dropdown_caret = document.createElementNS(SVGNS, 'svg') as SVGSVGElement;
-    this.dropdown_caret.setAttribute('class', 'treb-dropdown-caret');
+    this.dropdown_caret = DOMUtilities.SVG('svg', 'treb-dropdown-caret');
     this.dropdown_caret.setAttribute('viewBox', '0 0 24 24');
     this.dropdown_caret.tabIndex = -1;
 
-    const caret = document.createElementNS(SVGNS, 'path');
+    const caret =DOMUtilities.SVG('path');
     caret.setAttribute('d', 'M5,7 L12,17 L19,7');
     this.dropdown_caret.appendChild(caret);
 
@@ -252,7 +247,7 @@ export abstract class BaseLayout {
     });
     */
 
-    this.dropdown_list = DOMUtilities.CreateDiv('treb-dropdown-list');
+    this.dropdown_list = DOMUtilities.Div('treb-dropdown-list');
     this.dropdown_list.setAttribute('tabindex', '-1'); // focusable
 
     // this.dropdown_caret.addEventListener('keydown', (event) => {
@@ -351,11 +346,11 @@ export abstract class BaseLayout {
       this.dropdown_selected = target as HTMLElement;
     });
 
-    this.mock_selection = DOMUtilities.CreateDiv('mock-selection-node');
+    this.mock_selection = DOMUtilities.Div('mock-selection-node');
     this.mock_selection.innerHTML = ' ';
 
-    this.note_node = DOMUtilities.CreateDiv('treb-note');
-    this.title_node = DOMUtilities.CreateDiv('treb-hover-title');
+    this.note_node = DOMUtilities.Div('treb-note');
+    this.title_node = DOMUtilities.Div('treb-hover-title');
 
     this.sort_button = DOMUtilities.Create(
       'button', 
@@ -1199,7 +1194,7 @@ export abstract class BaseLayout {
     parent: HTMLElement,
     mark_dirty = true): Tile {
 
-    const tile = document.createElement('canvas') as Tile;
+    const tile = DOMUtilities.Create('canvas') as Tile;
     tile.setAttribute('class', classes);
     tile.logical_size = size;
     tile.width = size.width * this.dpr;
@@ -1408,7 +1403,7 @@ export abstract class BaseLayout {
 
     this.dropdown_list.textContent = '';
     for (const value of list) {
-      const entry = DOMUtilities.CreateDiv(undefined, this.dropdown_list);
+      const entry = DOMUtilities.Div(undefined, this.dropdown_list);
       if (current === value) {
         this.dropdown_selected = entry;
         entry.classList.add('selected');

package/treb-grid/src/layout/grid_layout.ts

@@ -21,10 +21,9 @@
 
 import { BaseLayout } from './base_layout';
 import type { Tile } from '../types/tile';
-import { DOMUtilities } from '../util/dom_utilities';
+import { DOMUtilities } from 'treb-base-types';
 import type { DataModel, ViewModel } from '../types/data_model';
 
-const SVGNS = 'http://www.w3.org/2000/svg';
 
 /**
  * we used to have two layouts, this one and a legacy layout for IE11.
@@ -42,47 +41,37 @@ export class GridLayout extends BaseLayout {
     // mask needs to get attached to a container, when it's
     // available
 
-    this.column_header = DOMUtilities.CreateDiv('treb-top-header');
-    this.row_header = DOMUtilities.CreateDiv('treb-left-header');
+    this.column_header = DOMUtilities.Div('treb-top-header');
+    this.row_header = DOMUtilities.Div('treb-left-header');
     
-    this.corner = DOMUtilities.CreateDiv('treb-corner');
-    this.corner_canvas = document.createElement('canvas');
+    this.corner = DOMUtilities.Div('treb-corner');
+    this.corner_canvas = DOMUtilities.Create('canvas');
     this.corner.appendChild(this.corner_canvas);
 
-    this.contents = DOMUtilities.CreateDiv('treb-contents');
+    this.contents = DOMUtilities.Div('treb-contents');
     this.buffer_canvas = DOMUtilities.Create('canvas', 'treb-buffer-canvas', this.contents);
 
     // selection node attached to contents
-    this.grid_selection = document.createElementNS(SVGNS, 'svg');
-    this.grid_selection.classList.add('treb-grid-selection');
-    this.contents.appendChild(this.grid_selection);
+    this.grid_selection = DOMUtilities.SVG('svg', 'treb-grid-selection', this.contents);
 
     // selection node for frozen rows
-    this.row_header_selection = document.createElementNS(SVGNS, 'svg');
-    this.row_header_selection.classList.add('frozen-selection');
-    this.row_header_selection.classList.add('frozen-selection-rows');
-    this.column_header.appendChild(this.row_header_selection);
-    this.row_header_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-rows', this.column_header);
+    this.row_header_selection = DOMUtilities.SVG('svg', ['frozen-selection', 'frozen-selection-rows'], this.column_header);
+    this.row_header_annotations = DOMUtilities.Div('frozen-annotation-container frozen-annotation-container-rows', this.column_header);
 
     // ...columns
-    this.column_header_selection = document.createElementNS(SVGNS, 'svg');
-    this.column_header_selection.classList.add('frozen-selection');
-    this.column_header_selection.classList.add('frozen-selection-columns');
-    this.row_header.appendChild(this.column_header_selection);
-    this.column_header_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-columns', this.row_header);
+    this.column_header_selection = DOMUtilities.SVG('svg', ['frozen-selection', 'frozen-selection-columns'], this.row_header);
+    this.column_header_annotations = DOMUtilities.Div('frozen-annotation-container frozen-annotation-container-columns', this.row_header);
 
     // ...corner
-    this.corner_selection = document.createElementNS(SVGNS, 'svg');
-    this.corner_selection.classList.add('frozen-selection');
-    this.corner.appendChild(this.corner_selection);
-    this.corner_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-corner', this.corner);
+    this.corner_selection = DOMUtilities.SVG('svg', 'frozen-selection', this.corner);
+    this.corner_annotations = DOMUtilities.Div('frozen-annotation-container frozen-annotation-container-corner', this.corner);
 
 
-    this.annotation_container = DOMUtilities.CreateDiv('treb-annotation-container');
+    this.annotation_container = DOMUtilities.Div('treb-annotation-container');
 
-    this.grid_cover = DOMUtilities.CreateDiv('tile-cover grid-cover');
-    this.column_header_cover = DOMUtilities.CreateDiv('tile-cover column-header-cover');
-    this.row_header_cover = DOMUtilities.CreateDiv('tile-cover row-header-cover');
+    this.grid_cover = DOMUtilities.Div('tile-cover grid-cover');
+    this.column_header_cover = DOMUtilities.Div('tile-cover column-header-cover');
+    this.row_header_cover = DOMUtilities.Div('tile-cover row-header-cover');
 
   }
 

package/treb-grid/src/render/selection-renderer.ts

@@ -20,7 +20,7 @@
  */
 
 import type { Theme, ICellAddress } from 'treb-base-types';
-import { Rectangle } from 'treb-base-types';
+import { DOMUtilities, Rectangle } from 'treb-base-types';
 import type { BaseLayout } from '../layout/base_layout';
 import type { SelectionOffset } from './svg_selection_block';
 import { SVGSelectionBlock } from './svg_selection_block';
@@ -302,8 +302,7 @@ export class SelectionRenderer {
 
         let group: SVGElement = node.querySelector('.alternate-selections') as SVGElement;
         if (!group) {
-          group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-          group.setAttribute('class', 'alternate-selections');
+          group = DOMUtilities.SVG('g', 'alternate-selections');
           node.appendChild(group);
         }
         group?.appendChild(selection_block.g);

package/treb-grid/src/render/svg_header_overlay.ts

@@ -19,9 +19,7 @@
  * 
  */
 
-import type { Theme } from 'treb-base-types';
-
-const SVGNS = 'http://www.w3.org/2000/svg';
+import { DOMUtilities, type Theme } from 'treb-base-types';
 
 export enum Orientation {
   Horizontal,
@@ -39,14 +37,9 @@ export class HeaderOverlay {
       private container: SVGElement,
       private orientation: Orientation) {
 
-    this.g = document.createElementNS(SVGNS, 'g');
-    this.g.setAttribute('class', 'treb-header-overlay');
-
-    this.overlay = document.createElementNS(SVGNS, 'rect');
-    this.overlay.setAttribute('class', 'treb-overlay');
-
-    this.highlight = document.createElementNS(SVGNS, 'rect');
-    this.highlight.setAttribute('class', 'treb-highlight');
+    this.g = DOMUtilities.SVG('g', 'treb-header-overlay');
+    this.overlay = DOMUtilities.SVG('rect', 'treb-overlay');
+    this.highlight = DOMUtilities.SVG('rect', 'treb-highlight');
 
     this.g.style.display = 'none';
     this.g.appendChild(this.highlight);

package/treb-grid/src/render/svg_selection_block.ts

@@ -1,25 +1,25 @@
-/*
- * This file is part of TREB.
- *
- * TREB is free software: you can redistribute it and/or modify it under the 
- * terms of the GNU General Public License as published by the Free Software 
- * Foundation, either version 3 of the License, or (at your option) any 
- * later version.
- *
- * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
- * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
- * details.
- *
- * You should have received a copy of the GNU General Public License along 
- * with TREB. If not, see <https://www.gnu.org/licenses/>. 
- *
- * Copyright 2022-2023 trebco, llc. 
- * info@treb.app
- * 
- */
-
-import type { Theme, Rectangle } from 'treb-base-types';
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+import { type Theme, type Rectangle, DOMUtilities } from 'treb-base-types';
 
 /**
  * the original selections -- a canvas overlaid over the tile canvases --
@@ -30,8 +30,6 @@ import type { Theme, Rectangle } from 'treb-base-types';
  * attributes.
  */
 
-const SVGNS = 'http://www.w3.org/2000/svg';
-
 export interface SelectionOffset {
   x: number;
   y: number;
@@ -48,11 +46,10 @@ export class SVGSelectionBlock {
                private theme: Theme,
                private offset: SelectionOffset = {x: 0, y: 0}) {
 
-    this.g = document.createElementNS(SVGNS, 'g');
+    this.g = DOMUtilities.SVG('g');
     this.g.setAttribute('transform', `translate(${offset.x}, ${offset.y})`);
     
-    this.outline = document.createElementNS(SVGNS, 'rect');
-    this.outline.setAttribute('class', 'outline');
+    this.outline = DOMUtilities.SVG('rect', 'outline');
 
     if (primary) {
 
@@ -61,11 +58,8 @@ export class SVGSelectionBlock {
       // primary selections have a separate fill, plus the nub. separate
       // fill because the "target" is unfilled.
 
-      this.fill = document.createElementNS(SVGNS, 'path');
-      this.fill.setAttribute('class', 'fill');
-
-      this.nub = document.createElementNS(SVGNS, 'rect');
-      this.nub.setAttribute('class', 'nub');
+      this.fill = DOMUtilities.SVG('path', 'fill');
+      this.nub = DOMUtilities.SVG('rect', 'nub');
 
       this.g.appendChild(this.fill);
       this.g.appendChild(this.outline);
@@ -81,8 +75,7 @@ export class SVGSelectionBlock {
       // and use currentColor, but we can't set opacity separately so we
       // need another node. which is a waste, but ergonomics ftw!
 
-      this.fill = document.createElementNS(SVGNS, 'rect');
-      this.fill.setAttribute('class', 'fill');
+      this.fill = DOMUtilities.SVG('rect', 'fill');
 
       // this.SetThemeColor(0);
       // if (theme.additional_selection_line_dash_array) {

package/treb-grid/src/render/tile_renderer.ts

@@ -99,10 +99,7 @@ export class TileRenderer {
     protected view: ViewModel,
     protected options: GridOptions, ) {
 
-    // this.buffer_canvas = document.createElement('canvas');
-
     this.buffer_canvas = layout.buffer_canvas;
-
     this.buffer_canvas.width = this.buffer_canvas_size.width;
     this.buffer_canvas.height = this.buffer_canvas_size.height;
     
@@ -912,6 +909,8 @@ export class TileRenderer {
               line_width = test;
               words.shift();
 
+              max_width = Math.max(max_width, line_width);
+
             }
 
             // trim the last word, then insert a row (we're relying on the 
@@ -920,6 +919,8 @@ export class TileRenderer {
             last.text = last.text.trim();
             last.width = last.trimmed;
 
+            max_width = Math.max(max_width, last.width);
+
             strings.push(line2.map((metric) => {
               return {
                 ...metric.part,
@@ -928,11 +929,11 @@ export class TileRenderer {
                 text: metric.text, 
               };
             }));
-            
+
           }
 
         }
-
+        
       }
       else {
 

package/treb-grid/src/types/grid.ts

@@ -111,7 +111,7 @@ import { CommandKey
 
 import type { DataModel, SerializedModel } from './data_model';
 
-import { DOMUtilities } from '../util/dom_utilities';
+import { DOMUtilities } from 'treb-base-types';
 import { GridBase } from './grid_base';
 import type { SetRangeOptions } from './set_range_options';
 import type { ClipboardCellData } from './clipboard_data';
@@ -262,6 +262,9 @@ export class Grid extends GridBase {
   /** new key capture overlay/ICE */
   private overlay_editor?: OverlayEditor;
 
+  /** moving autocomplete to a class field */
+  private autocomplete?: Autocomplete;
+
   /** formula bar editor (optional) */
   private formula_bar?: FormulaBar;
 
@@ -568,13 +571,13 @@ export class Grid extends GridBase {
 
       // FIXME: why is this not in layout? it is layout.
 
-      view.node = document.createElement('div');
+      view.node = DOMUtilities.Div();
       view.node.dataset.scale = this.layout.scale.toString();
       view.node.style.fontSize = `${10 * this.layout.scale}pt`;
 
-      view.content_node = DOMUtilities.CreateDiv('annotation-content', view.node);
-      const move_target = DOMUtilities.CreateDiv('annotation-move-target', view.node);
-      const resize_target = DOMUtilities.CreateDiv('annotation-resize-target', view.node);
+      view.content_node = DOMUtilities.Div('annotation-content', view.node);
+      const move_target = DOMUtilities.Div('annotation-move-target', view.node);
+      const resize_target = DOMUtilities.Div('annotation-resize-target', view.node);
 
       if (view.node) {
         const node = view.node;
@@ -1275,13 +1278,13 @@ export class Grid extends GridBase {
     const higher_level_container = view_node.querySelector('.treb-spreadsheet-body') as HTMLElement;
     const container = higher_level_container.querySelector('div') as HTMLElement;
 
-    let autocomplete: Autocomplete | undefined;
+    // let autocomplete: Autocomplete | undefined;
 
     if (this.options.formula_bar) {
-      if (!autocomplete) {
-        autocomplete = new Autocomplete({ theme: this.theme, container });
+      if (!this.autocomplete) {
+        this.autocomplete = new Autocomplete({ theme: this.theme, container });
       }
-      this.InitFormulaBar(view_node, autocomplete);
+      this.InitFormulaBar(view_node, this.autocomplete);
     }
 
     if (this.options.tab_bar) {
@@ -1408,10 +1411,10 @@ export class Grid extends GridBase {
 
     // Sheet.sheet_events.Subscribe(this.HandleSheetEvent.bind(this));
 
-    if (!autocomplete) {
-      autocomplete = new Autocomplete({ theme: this.theme, container });
+    if (!this.autocomplete) {
+      this.autocomplete = new Autocomplete({ theme: this.theme, container });
     }
-    this.InitOverlayEditor(autocomplete);
+    this.InitOverlayEditor(this.autocomplete);
 
     this.AttachListeners();
 
@@ -2695,35 +2698,6 @@ export class Grid extends GridBase {
 
             this.OverlayKeyDown(event.event);
 
-            /*
-            let cloned_event: KeyboardEvent;
-            if (UA.trident) {
-              cloned_event = document.createEvent('KeyboardEvent');
-              const modifiers = [];
-              if (event.event.ctrlKey) modifiers.push('Control');
-              if (event.event.altKey) modifiers.push('Alt');
-              if (event.event.shiftKey) modifiers.push('Shift');
-
-              // have to mask type for trident
-              (cloned_event as any).initKeyboardEvent(
-                event.event.type,
-                false,
-                false,
-                event.event.view,
-                event.event.key,
-                event.event.location,
-                modifiers.join(' '),
-                event.event.repeat,
-                Localization.locale);
-            }
-            else {
-              cloned_event = new KeyboardEvent(event.event.type, event.event);
-            }
-
-            if (cloned_event && this.container) {
-              this.container.dispatchEvent(cloned_event);
-            }
-            */
           }
           break;
 
@@ -3763,6 +3737,17 @@ export class Grid extends GridBase {
 
     const selecting_argument = this.SelectingArgument();
     
+    /*
+    let blocking_tooltip = false;
+    if (selecting_argument) {
+      if (this.autocomplete?.tooltip_visible) {
+        this.autocomplete.SetBlock();
+        this.autocomplete.Hide();
+        blocking_tooltip = true;
+      }
+    }
+    */
+
     if (!selecting_argument && this.additional_selections.length) {
       this.ClearAdditionalSelections();
     }
@@ -4052,6 +4037,12 @@ export class Grid extends GridBase {
       // console.info('end');
       this.UpdateAddressLabel();
 
+      /*
+      if (blocking_tooltip) {
+        this.autocomplete?.ResetBlock();
+      }
+      */
+
       if (selecting_argument) {
         if (this.overlay_editor?.editing) {
           // ...

package/treb-grid/src/types/grid_base.ts

@@ -2452,6 +2452,7 @@ export class GridBase {
         });
         if (transformed) {
 
+          /*
           if (!this.flags.warned_r1c1) {
 
             // 1-time warning
@@ -2459,6 +2460,7 @@ export class GridBase {
             this.flags.warned_r1c1 = true;
             console.warn('NOTE: R1C1 support is experimental. the semantics may change in the future.');
           }
+          */
 
           value = '=' + this.parser.Render(result.expression, { missing: '' });
         }

package/treb-grid/src/types/scale-control.ts

@@ -19,7 +19,7 @@
  * 
  */
 
-import { DOMUtilities as DOM } from '../util/dom_utilities';
+import { DOMUtilities as DOM } from 'treb-base-types';
 import { NumberFormat, NumberFormatCache, ValueParser } from 'treb-format';
 import { ValueType } from 'treb-base-types';
 import { EventSource } from 'treb-utils';
@@ -54,7 +54,7 @@ export class ScaleControl extends EventSource<ScaleEvent> {
     // const div = DOM.CreateDiv('treb-scale-control-2', container);
 
     this.input = DOM.Create('input', 'treb-scale-input', /* div */ container);
-    const popup = DOM.CreateDiv('treb-slider-container', /* div */ container);
+    const popup = DOM.Div('treb-slider-container', /* div */ container);
 
     /*
     this.input.addEventListener('keyup', (event) => {

package/treb-grid/src/types/sheet.ts

@@ -26,7 +26,7 @@ import { ValueType, Cells, Style,
   type PropertyKeys,
   type Color,
   Area, IsFlatDataArray, 
-  IsNestedRowArray, IsCellAddress
+  IsNestedRowArray, IsCellAddress, DOMUtilities
 } from 'treb-base-types';
 import { NumberFormatCache } from 'treb-format';
 import { Measurement, ValidateURI } from 'treb-utils';
@@ -748,7 +748,7 @@ export class Sheet {
     if (this.background_image) {
       const resource = ValidateURI(this.background_image);
       if (resource) {
-        this._image = document.createElement('img');
+        this._image = DOMUtilities.Create('img');
         this._image.src = resource;
       }
 

package/treb-grid/src/types/tab_bar.ts

@@ -26,6 +26,7 @@ import type { BaseLayout } from '../layout/base_layout';
 import { MouseDrag } from './drag_mask';
 import type { GridOptions } from './grid_options';
 import { type ScaleEvent, ScaleControl } from './scale-control';
+import { DOMUtilities } from 'treb-base-types';
 
 export interface ActivateSheetEvent {
   type: 'activate-sheet';
@@ -112,15 +113,11 @@ export class TabBar extends EventSource<TabEvent> {
       this.stats_panel.innerText = ''; // clear
       for (const entry of value) {
 
-        const label = document.createElement('span');
-        label.classList.add('treb-stats-label');
+        const label = DOMUtilities.Create('span', 'treb-stats-label', this.stats_panel);
         label.textContent = entry.label;
-        this.stats_panel.appendChild(label);
 
-        const figure = document.createElement('span');
-        figure.classList.add('treb-stats-value');
+        const figure = DOMUtilities.Create('span', 'treb-stats-value', this.stats_panel);
         figure.textContent = entry.value;
-        this.stats_panel.appendChild(figure);
       }
     }
   }
@@ -451,8 +448,7 @@ export class TabBar extends EventSource<TabEvent> {
       if (!sheet.visible) { continue; }
 
       const index = tabs.length;
-      // const tab = document.createElement('div');
-      const tab = document.createElement('li');
+      const tab = DOMUtilities.Create('li');
       tab.setAttribute('tabindex', '0');
 
       // tab.classList.add('tab');

package/treb-utils/src/index.ts

@@ -28,4 +28,3 @@ export * from './measurement';
 export * from './serialize_html';
 export * from './validate_uri';
 export * from './scale';
-export * from './template';