tinybase 8.4.0 → 8.4.2

package/ui-svelte-inspector/index.js

@@ -337,6 +337,7 @@ const TEXT_OVERFLOW = 'text-overflow';
 const ALIGN_ITEMS = 'align-items';
 const BACKDROP_FILTER = 'backdrop-filter';
 const MARGIN_RIGHT = MARGIN + '-' + RIGHT;
+const Z_INDEX = 'z-index';
 const FIXED = 'fixed';
 const REVERT = 'revert';
 const UNSET = 'unset';
@@ -360,8 +361,8 @@ const APP_STYLESHEET = arrayJoin(
         all: 'initial',
         [FONT_SIZE]: rem(0.75),
         [POSITION]: FIXED,
+        [Z_INDEX]: 999999,
         'font-family': 'inter,sans-serif',
-        'z-index': 999999,
         '--bg': oklch(20),
         '--bg2': oklch(15),
         '--bg3': oklch(25),
@@ -465,6 +466,7 @@ const APP_STYLESHEET = arrayJoin(
         [BACKGROUND]: oklch(30, '% 0.008 var(--hue) / .5'),
         [WIDTH]: 'calc(100% - .5rem)',
         [POSITION]: 'absolute',
+        [Z_INDEX]: 1,
         [BORDER + '-' + BOTTOM]: cssVar(BORDER),
         [ALIGN_ITEMS]: 'center',
         [BACKDROP_FILTER]: 'blur(4px)',
@@ -2873,7 +2875,7 @@ const createStore = () => {
 
 const TINYBASE_CONTEXT_KEY = TINYBASE + '_uisc';
 
-/* functions.svelte.ts generated by Svelte v5.55.5 */
+/* functions.svelte.ts generated by Svelte v5.56.0 */
 
 class ReactiveHandle {
   #get;
@@ -3323,7 +3325,7 @@ const getRelationshipsStoreTableIds = (relationshipsOrId, relationshipId) => {
   };
 };
 
-var root_1$e = $.from_html(`<img tabindex="0" alt=""/>`);
+var root$m = $.from_html(`<img tabindex="0" alt=""/>`);
 
 function Nub($$anchor, $$props) {
   $.push($$props, true);
@@ -3350,7 +3352,7 @@ function Nub($$anchor, $$props) {
 
   {
     var consequent = ($$anchor) => {
-      var img = root_1$e();
+      var img = root$m();
 
       $.template_effect(() => {
         $.set_attribute(img, 'title', TITLE);
@@ -3386,8 +3388,8 @@ const requestInspectorIdleCallback = (callback) =>
 const cancelInspectorIdleCallback = (id) =>
   globalThis.cancelIdleCallback?.(id) ?? clearTimeout(id);
 
-var root_1$d = $.from_html(`<img tabindex="0" alt=""/>`);
-var root$c = $.from_html(
+var root$l = $.from_html(`<img tabindex="0" alt=""/>`);
+var root_1$c = $.from_html(
   `<details><summary><span> </span> <!></summary> <div><!></div></details>`,
 );
 
@@ -3413,7 +3415,7 @@ function Details($$anchor, $$props) {
     }
   };
 
-  var details = root$c();
+  var details = root_1$c();
   var summary = $.child(details);
   var span = $.child(summary);
   var text = $.child(span, true);
@@ -3424,7 +3426,7 @@ function Details($$anchor, $$props) {
 
   {
     var consequent = ($$anchor) => {
-      var img = root_1$d();
+      var img = root$l();
 
       $.template_effect(() => {
         $.set_class(img, 1, $.clsx(editable() ? 'done' : 'edit'));
@@ -3465,13 +3467,11 @@ function Details($$anchor, $$props) {
 
 $.delegate(['click', 'keydown']);
 
-var root_1$c = $.from_html(`<button> </button>`);
-var root_2$9 = $.from_html(`<input/>`);
-var root_3$3 = $.from_html(`<input type="number"/>`);
-var root_4$5 = $.from_html(`<input type="checkbox"/>`);
-var root_5$5 = $.from_html(`<input/>`);
-var root_6$2 = $.from_html(`<input/>`);
-var root$b = $.from_html(`<div><!><!></div>`);
+var root$k = $.from_html(`<button> </button>`);
+var root_1$b = $.from_html(`<input/>`);
+var root_2$4 = $.from_html(`<input type="number"/>`);
+var root_3$3 = $.from_html(`<input type="checkbox"/>`);
+var root_4$2 = $.from_html(`<div><!><!></div>`);
 
 function EditableThing($$anchor, $$props) {
   $.push($$props, true);
@@ -3565,12 +3565,12 @@ function EditableThing($$anchor, $$props) {
   const hasWidget = $.derived(
     () => getTypeCase($.get(thingType), 1, 1, 1, 1, 1) == 1,
   );
-  var div = root$b();
+  var div = root_4$2();
   var node = $.child(div);
 
   {
     var consequent = ($$anchor) => {
-      var button = root_1$c();
+      var button = root$k();
       var text = $.child(button, true);
 
       $.reset(button);
@@ -3594,7 +3594,7 @@ function EditableThing($$anchor, $$props) {
 
   {
     var consequent_1 = ($$anchor) => {
-      var input = root_2$9();
+      var input = root_1$b();
 
       $.remove_input_defaults(input);
       $.template_effect(() => $.set_value(input, $.get(stringThing)));
@@ -3607,7 +3607,7 @@ function EditableThing($$anchor, $$props) {
     };
 
     var consequent_2 = ($$anchor) => {
-      var input_1 = root_3$3();
+      var input_1 = root_2$4();
 
       $.remove_input_defaults(input_1);
       $.template_effect(() => $.set_value(input_1, $.get(numberThing)));
@@ -3620,7 +3620,7 @@ function EditableThing($$anchor, $$props) {
     };
 
     var consequent_3 = ($$anchor) => {
-      var input_2 = root_4$5();
+      var input_2 = root_3$3();
 
       $.remove_input_defaults(input_2);
       $.template_effect(() => $.set_checked(input_2, $.get(booleanThing)));
@@ -3633,7 +3633,7 @@ function EditableThing($$anchor, $$props) {
     };
 
     var consequent_4 = ($$anchor) => {
-      var input_3 = root_5$5();
+      var input_3 = root_1$b();
 
       $.remove_input_defaults(input_3);
 
@@ -3654,7 +3654,7 @@ function EditableThing($$anchor, $$props) {
     };
 
     var consequent_5 = ($$anchor) => {
-      var input_4 = root_6$2();
+      var input_4 = root_1$b();
 
       $.remove_input_defaults(input_4);
 
@@ -3804,11 +3804,9 @@ function CellView($$anchor, $$props) {
   $.pop();
 }
 
-var root_1$b = $.from_html(`<td><!></td>`);
-var root_2$8 = $.from_html(`<th> </th> <th> </th>`, 1);
-var root_4$4 = $.from_html(`<td><!></td>`);
-var root_5$4 = $.from_html(`<td><!></td>`);
-var root$a = $.from_html(`<tr><!><!><!><!></tr>`);
+var root$j = $.from_html(`<td><!></td>`);
+var root_1$a = $.from_html(`<th> </th> <th> </th>`, 1);
+var root_2$3 = $.from_html(`<tr><!><!><!><!></tr>`);
 
 function RelationshipInHtmlRow($$anchor, $$props) {
   $.push($$props, true);
@@ -3829,7 +3827,7 @@ function RelationshipInHtmlRow($$anchor, $$props) {
     store: $$props.store,
   }));
 
-  var tr = root$a();
+  var tr = root_2$3();
   var node = $.child(tr);
 
   $.each(
@@ -3839,7 +3837,7 @@ function RelationshipInHtmlRow($$anchor, $$props) {
     (extraCell, index) => extraKey(index, 0),
     ($$anchor, extraCell) => {
       const ExtraCell = $.derived(() => $.get(extraCell).component);
-      var td = root_1$b();
+      var td = root$j();
       var node_1 = $.child(td);
 
       $.component(
@@ -3863,7 +3861,7 @@ function RelationshipInHtmlRow($$anchor, $$props) {
 
   {
     var consequent = ($$anchor) => {
-      var fragment = root_2$8();
+      var fragment = root_1$a();
       var th = $.first_child(fragment);
       var text = $.child(th, true);
 
@@ -3922,7 +3920,7 @@ function RelationshipInHtmlRow($$anchor, $$props) {
 
       {
         var consequent_1 = ($$anchor) => {
-          var td_1 = root_4$4();
+          var td_1 = root$j();
           var node_5 = $.child(td_1);
 
           {
@@ -3986,7 +3984,7 @@ function RelationshipInHtmlRow($$anchor, $$props) {
     (extraCell, index) => extraKey(index, 1),
     ($$anchor, extraCell) => {
       const ExtraCell = $.derived(() => $.get(extraCell).component);
-      var td_2 = root_5$4();
+      var td_2 = root$j();
       var node_7 = $.child(td_2);
 
       $.component(
@@ -4011,12 +4009,10 @@ function RelationshipInHtmlRow($$anchor, $$props) {
   $.pop();
 }
 
-var root_2$7 = $.from_html(`<th> </th>`);
-var root_3$2 = $.from_html(`<th> </th> <th> </th>`, 1);
-var root_4$3 = $.from_html(`<th> </th>`);
-var root_5$3 = $.from_html(`<th> </th>`);
-var root_1$a = $.from_html(`<thead><tr><!><!><!><!></tr></thead>`);
-var root$9 = $.from_html(`<table><!><tbody></tbody></table>`);
+var root$i = $.from_html(`<th> </th>`);
+var root_1$9 = $.from_html(`<th> </th> <th> </th>`, 1);
+var root_2$2 = $.from_html(`<thead><tr><!><!><!><!></tr></thead>`);
+var root_3$2 = $.from_html(`<table><!><tbody></tbody></table>`);
 
 function RelationshipInHtmlTable($$anchor, $$props) {
   $.push($$props, true);
@@ -4069,12 +4065,12 @@ function RelationshipInHtmlTable($$anchor, $$props) {
   const extraHeadersAfter = $.derived(() =>
     getExtraHeaders(extraCellsAfter(), 1),
   );
-  var table = root$9();
+  var table = root_3$2();
   var node = $.child(table);
 
   {
     var consequent_1 = ($$anchor) => {
-      var thead = root_1$a();
+      var thead = root_2$2();
       var tr = $.child(thead);
       var node_1 = $.child(tr);
 
@@ -4084,7 +4080,7 @@ function RelationshipInHtmlTable($$anchor, $$props) {
         () => $.get(extraHeadersBefore),
         (extraHeader) => extraHeader.key,
         ($$anchor, extraHeader) => {
-          var th = root_2$7();
+          var th = root$i();
           var text = $.child(th, true);
 
           $.reset(th);
@@ -4102,7 +4098,7 @@ function RelationshipInHtmlTable($$anchor, $$props) {
 
       {
         var consequent = ($$anchor) => {
-          var fragment = root_3$2();
+          var fragment = root_1$9();
           var th_1 = $.first_child(fragment);
           var text_1 = $.child(th_1);
 
@@ -4136,7 +4132,7 @@ function RelationshipInHtmlTable($$anchor, $$props) {
         () => $.get(cellEntries),
         (entry) => entry[0],
         ($$anchor, entry) => {
-          var th_3 = root_4$3();
+          var th_3 = root$i();
           var text_3 = $.child(th_3, true);
 
           $.reset(th_3);
@@ -4153,7 +4149,7 @@ function RelationshipInHtmlTable($$anchor, $$props) {
         () => $.get(extraHeadersAfter),
         (extraHeader) => extraHeader.key,
         ($$anchor, extraHeader) => {
-          var th_4 = root_5$3();
+          var th_4 = root$i();
           var text_4 = $.child(th_4, true);
 
           $.reset(th_4);
@@ -4260,18 +4256,14 @@ function ResultCellView($$anchor, $$props) {
   $.pop();
 }
 
-var root_1$9 = $.from_html(`<caption><!></caption>`);
-var root_3$1 = $.from_html(`<th> </th>`);
-var root_4$2 = $.from_html(`<th><!> Id</th>`);
-var root_6$1 = $.from_html(`<th><!> </th>`);
-var root_8$1 = $.from_html(`<th> </th>`);
-var root_2$6 = $.from_html(`<thead><tr><!><!><!><!></tr></thead>`);
-var root_10 = $.from_html(`<td><!></td>`);
-var root_11 = $.from_html(`<th> </th>`);
-var root_12 = $.from_html(`<td><!></td>`);
-var root_13 = $.from_html(`<td><!></td>`);
-var root_9 = $.from_html(`<tr><!><!><!><!></tr>`);
-var root$8 = $.from_html(`<table><!><!><tbody></tbody></table>`);
+var root$h = $.from_html(`<caption><!></caption>`);
+var root_1$8 = $.from_html(`<th> </th>`);
+var root_2$1 = $.from_html(`<th><!> Id</th>`);
+var root_3$1 = $.from_html(`<th><!> </th>`);
+var root_4$1 = $.from_html(`<thead><tr><!><!><!><!></tr></thead>`);
+var root_5$1 = $.from_html(`<td><!></td>`);
+var root_6 = $.from_html(`<tr><!><!><!><!></tr>`);
+var root_7 = $.from_html(`<table><!><!><tbody></tbody></table>`);
 
 function HtmlTable($$anchor, $$props) {
   $.push($$props, true);
@@ -4288,12 +4280,12 @@ function HtmlTable($$anchor, $$props) {
   );
   const PaginatorComponent = $.derived(() => $$props.paginator?.component);
   const paginatorProps = $.derived(() => $$props.paginator?.props);
-  var table = root$8();
+  var table = root_7();
   var node = $.child(table);
 
   {
     var consequent = ($$anchor) => {
-      var caption = root_1$9();
+      var caption = root$h();
       var node_1 = $.child(caption);
 
       $.component(
@@ -4321,7 +4313,7 @@ function HtmlTable($$anchor, $$props) {
 
   {
     var consequent_4 = ($$anchor) => {
-      var thead = root_2$6();
+      var thead = root_4$1();
       var tr = $.child(thead);
       var node_3 = $.child(tr);
 
@@ -4331,7 +4323,7 @@ function HtmlTable($$anchor, $$props) {
         () => $.get(extraHeadersBefore),
         (extraHeader) => extraHeader.key,
         ($$anchor, extraHeader) => {
-          var th = root_3$1();
+          var th = root_1$8();
           var text = $.child(th, true);
 
           $.reset(th);
@@ -4349,7 +4341,7 @@ function HtmlTable($$anchor, $$props) {
 
       {
         var consequent_2 = ($$anchor) => {
-          var th_1 = root_4$2();
+          var th_1 = root_2$1();
           var node_5 = $.child(th_1);
 
           {
@@ -4411,7 +4403,7 @@ function HtmlTable($$anchor, $$props) {
         ($$anchor, entry) => {
           const cellId = $.derived(() => $.get(entry)[0]);
           const cell = $.derived(() => $.get(entry)[1]);
-          var th_2 = root_6$1();
+          var th_2 = root_3$1();
           var node_7 = $.child(th_2);
 
           {
@@ -4471,7 +4463,7 @@ function HtmlTable($$anchor, $$props) {
         () => $.get(extraHeadersAfter),
         (extraHeader) => extraHeader.key,
         ($$anchor, extraHeader) => {
-          var th_3 = root_8$1();
+          var th_3 = root_1$8();
           var text_4 = $.child(th_3, true);
 
           $.reset(th_3);
@@ -4507,7 +4499,7 @@ function HtmlTable($$anchor, $$props) {
         ...$$props.cellComponentProps,
         rowId,
       }));
-      var tr_1 = root_9();
+      var tr_1 = root_6();
       var node_9 = $.child(tr_1);
 
       $.each(
@@ -4517,7 +4509,7 @@ function HtmlTable($$anchor, $$props) {
         (extraCell, index) => extraKey(index, 0),
         ($$anchor, extraCell) => {
           const ExtraCell = $.derived(() => $.get(extraCell).component);
-          var td = root_10();
+          var td = root_5$1();
           var node_10 = $.child(td);
 
           $.component(
@@ -4541,7 +4533,7 @@ function HtmlTable($$anchor, $$props) {
 
       {
         var consequent_5 = ($$anchor) => {
-          var th_4 = root_11();
+          var th_4 = root_1$8();
           var text_5 = $.child(th_4, true);
 
           $.reset(th_4);
@@ -4572,7 +4564,7 @@ function HtmlTable($$anchor, $$props) {
           const cellId = $.derived(() => $.get(entry)[0]);
           const cell = $.derived(() => $.get(entry)[1]);
           const CellComponent = $.derived(() => $.get(cell).component);
-          var td_1 = root_12();
+          var td_1 = root_5$1();
           var node_13 = $.child(td_1);
 
           {
@@ -4614,7 +4606,7 @@ function HtmlTable($$anchor, $$props) {
         (extraCell, index) => extraKey(index, 1),
         ($$anchor, extraCell) => {
           const ExtraCell = $.derived(() => $.get(extraCell).component);
-          var td_2 = root_13();
+          var td_2 = root_5$1();
           var node_15 = $.child(td_2);
 
           $.component(
@@ -4648,15 +4640,16 @@ function HtmlTable($$anchor, $$props) {
 
 $.delegate(['click']);
 
-var root_1$8 = $.from_html(
+var rest_excludes$3 = new Set(['$$slots', '$$events', '$$legacy']);
+var root$g = $.from_html(
   `<button class="previous"></button><button class="next"></button> `,
   1,
 );
-var root$7 = $.from_html(`<!> `, 1);
+var root_1$7 = $.from_html(`<!> `, 1);
 
 function SortedTablePaginator($$anchor, $$props) {
   $.push($$props, true);
-  $.rest_props($$props, ['$$slots', '$$events', '$$legacy']);
+  $.rest_props($$props, rest_excludes$3);
   const offset = $.derived(() =>
     $$props.offset == null ||
     $$props.offset > $$props.total ||
@@ -4682,12 +4675,12 @@ function SortedTablePaginator($$anchor, $$props) {
     }
   });
 
-  var fragment = root$7();
+  var fragment = root_1$7();
   var node = $.first_child(fragment);
 
   {
     var consequent = ($$anchor) => {
-      var fragment_1 = root_1$8();
+      var fragment_1 = root$g();
       var button = $.first_child(fragment_1);
 
       button.textContent = '←';
@@ -4727,7 +4720,7 @@ function SortedTablePaginator($$anchor, $$props) {
 
 $.delegate(['click']);
 
-/* sortingAndPagination.svelte.ts generated by Svelte v5.55.5 */
+/* sortingAndPagination.svelte.ts generated by Svelte v5.56.0 */
 
 const createSortingAndPagination = (
   getCellId,
@@ -4797,27 +4790,29 @@ const createSortingAndPagination = (
   };
 };
 
+var rest_excludes$2 = new Set([
+  '$$slots',
+  '$$events',
+  '$$legacy',
+  'queryId',
+  'cellId',
+  'descending',
+  'offset',
+  'limit',
+  'queries',
+  'sortOnClick',
+  'paginator',
+  'customCells',
+  'extraCellsBefore',
+  'extraCellsAfter',
+  'onChange',
+]);
+
 function ResultSortedTableInHtmlTable($$anchor, $$props) {
   $.push($$props, true);
 
   let paginator = $.prop($$props, 'paginator', 3, false),
-    props = $.rest_props($$props, [
-      '$$slots',
-      '$$events',
-      '$$legacy',
-      'queryId',
-      'cellId',
-      'descending',
-      'offset',
-      'limit',
-      'queries',
-      'sortOnClick',
-      'paginator',
-      'customCells',
-      'extraCellsBefore',
-      'extraCellsAfter',
-      'onChange',
-    ]);
+    props = $.rest_props($$props, rest_excludes$2);
 
   const defaultCellIds = getResultTableCellIds(
     () => $$props.queryId,
@@ -4893,22 +4888,23 @@ function ResultSortedTableInHtmlTable($$anchor, $$props) {
   $.pop();
 }
 
+var rest_excludes$1 = new Set([
+  '$$slots',
+  '$$events',
+  '$$legacy',
+  'indexId',
+  'sliceId',
+  'indexes',
+  'editable',
+  'customCells',
+  'extraCellsBefore',
+  'extraCellsAfter',
+]);
+
 function SliceInHtmlTable($$anchor, $$props) {
   $.push($$props, true);
 
-  let props = $.rest_props($$props, [
-    '$$slots',
-    '$$events',
-    '$$legacy',
-    'indexId',
-    'sliceId',
-    'indexes',
-    'editable',
-    'customCells',
-    'extraCellsBefore',
-    'extraCellsAfter',
-  ]);
-
+  let props = $.rest_props($$props, rest_excludes$1);
   const index = getIndexStoreTableId(
     () => $$props.indexes,
     () => $$props.indexId,
@@ -4965,28 +4961,30 @@ function SliceInHtmlTable($$anchor, $$props) {
   $.pop();
 }
 
+var rest_excludes = new Set([
+  '$$slots',
+  '$$events',
+  '$$legacy',
+  'tableId',
+  'cellId',
+  'descending',
+  'offset',
+  'limit',
+  'store',
+  'editable',
+  'sortOnClick',
+  'paginator',
+  'onChange',
+  'customCells',
+  'extraCellsBefore',
+  'extraCellsAfter',
+]);
+
 function SortedTableInHtmlTable($$anchor, $$props) {
   $.push($$props, true);
 
   let paginator = $.prop($$props, 'paginator', 3, false),
-    props = $.rest_props($$props, [
-      '$$slots',
-      '$$events',
-      '$$legacy',
-      'tableId',
-      'cellId',
-      'descending',
-      'offset',
-      'limit',
-      'store',
-      'editable',
-      'sortOnClick',
-      'paginator',
-      'onChange',
-      'customCells',
-      'extraCellsBefore',
-      'extraCellsAfter',
-    ]);
+    props = $.rest_props($$props, rest_excludes);
 
   const defaultCellIds = getTableCellIds(
     () => $$props.tableId,
@@ -5093,15 +5091,12 @@ function ValueView($$anchor, $$props) {
   $.pop();
 }
 
-var root_2$5 = $.from_html(`<th> </th>`);
-var root_3 = $.from_html(`<th>Id</th>`);
-var root_4$1 = $.from_html(`<th> </th>`);
-var root_1$7 = $.from_html(`<thead><tr><!><!><th> </th><!></tr></thead>`);
-var root_6 = $.from_html(`<td><!></td>`);
-var root_7 = $.from_html(`<th> </th>`);
-var root_8 = $.from_html(`<td><!></td>`);
-var root_5$2 = $.from_html(`<tr><!><!><td><!></td><!></tr>`);
-var root$6 = $.from_html(`<table><!><tbody></tbody></table>`);
+var root$f = $.from_html(`<th> </th>`);
+var root_1$6 = $.from_html(`<th>Id</th>`);
+var root_2 = $.from_html(`<thead><tr><!><!><th> </th><!></tr></thead>`);
+var root_3 = $.from_html(`<td><!></td>`);
+var root_4 = $.from_html(`<tr><!><!><td><!></td><!></tr>`);
+var root_5 = $.from_html(`<table><!><tbody></tbody></table>`);
 
 function ValuesInHtmlTable($$anchor, $$props) {
   $.push($$props, true);
@@ -5121,12 +5116,12 @@ function ValuesInHtmlTable($$anchor, $$props) {
   const extraHeadersAfter = $.derived(() =>
     getExtraHeaders(extraCellsAfter(), 1),
   );
-  var table = root$6();
+  var table = root_5();
   var node = $.child(table);
 
   {
     var consequent_1 = ($$anchor) => {
-      var thead = root_1$7();
+      var thead = root_2();
       var tr = $.child(thead);
       var node_1 = $.child(tr);
 
@@ -5136,7 +5131,7 @@ function ValuesInHtmlTable($$anchor, $$props) {
         () => $.get(extraHeadersBefore),
         (extraHeader) => extraHeader.key,
         ($$anchor, extraHeader) => {
-          var th = root_2$5();
+          var th = root$f();
           var text = $.child(th, true);
 
           $.reset(th);
@@ -5154,7 +5149,7 @@ function ValuesInHtmlTable($$anchor, $$props) {
 
       {
         var consequent = ($$anchor) => {
-          var th_1 = root_3();
+          var th_1 = root_1$6();
 
           $.append($$anchor, th_1);
         };
@@ -5177,7 +5172,7 @@ function ValuesInHtmlTable($$anchor, $$props) {
         () => $.get(extraHeadersAfter),
         (extraHeader) => extraHeader.key,
         ($$anchor, extraHeader) => {
-          var th_3 = root_4$1();
+          var th_3 = root$f();
           var text_2 = $.child(th_3, true);
 
           $.reset(th_3);
@@ -5211,7 +5206,7 @@ function ValuesInHtmlTable($$anchor, $$props) {
     (valueId) => valueId,
     ($$anchor, valueId) => {
       const valueProps = $.derived(() => ({valueId, store: $$props.store}));
-      var tr_1 = root_5$2();
+      var tr_1 = root_4();
       var node_4 = $.child(tr_1);
 
       $.each(
@@ -5221,7 +5216,7 @@ function ValuesInHtmlTable($$anchor, $$props) {
         (extraCell, index) => extraKey(index, 0),
         ($$anchor, extraCell) => {
           const ExtraCell = $.derived(() => $.get(extraCell).component);
-          var td = root_6();
+          var td = root_3();
           var node_5 = $.child(td);
 
           $.component(
@@ -5245,7 +5240,7 @@ function ValuesInHtmlTable($$anchor, $$props) {
 
       {
         var consequent_2 = ($$anchor) => {
-          var th_4 = root_7();
+          var th_4 = root$f();
           var text_3 = $.child(th_4, true);
 
           $.reset(th_4);
@@ -5299,7 +5294,7 @@ function ValuesInHtmlTable($$anchor, $$props) {
         (extraCell, index) => extraKey(index, 1),
         ($$anchor, extraCell) => {
           const ExtraCell = $.derived(() => $.get(extraCell).component);
-          var td_2 = root_8();
+          var td_2 = root_3();
           var node_9 = $.child(td_2);
 
           $.component(
@@ -5598,8 +5593,8 @@ function MetricView($$anchor, $$props) {
   $.pop();
 }
 
-var root_5$1 = $.from_html(`<tr><th> </th><td> </td><td><!></td></tr>`);
-var root_4 = $.from_html(
+var root$e = $.from_html(`<tr><th> </th><td> </td><td><!></td></tr>`);
+var root_1$5 = $.from_html(
   `<table><thead><tr><th>Metric Id</th><th>Table Id</th><th>Metric</th></tr></thead><tbody></tbody></table>`,
 );
 
@@ -5644,7 +5639,7 @@ function MetricsView($$anchor, $$props) {
               var d = $.derived(() => arrayIsEmpty(metricIds.current));
 
               var alternate = ($$anchor) => {
-                var table = root_4();
+                var table = root_1$5();
                 var tbody = $.sibling($.child(table));
 
                 $.each(
@@ -5653,7 +5648,7 @@ function MetricsView($$anchor, $$props) {
                   () => metricIds.current,
                   (metricId) => metricId,
                   ($$anchor, metricId) => {
-                    var tr = root_5$1();
+                    var tr = root$e();
                     var th = $.child(tr);
                     var text_1 = $.child(th, true);
 
@@ -6045,12 +6040,12 @@ function RelationshipsView($$anchor, $$props) {
   $.pop();
 }
 
-var root$5 = $.from_html(
+var root$d = $.from_html(
   `<div class="actions"><div><!></div> <div><!></div></div>`,
 );
 
 function Actions($$anchor, $$props) {
-  var div = root$5();
+  var div = root$d();
   var div_1 = $.child(div);
   var node = $.child(div_1);
 
@@ -6066,7 +6061,7 @@ function Actions($$anchor, $$props) {
   $.append($$anchor, div);
 }
 
-var root$4 = $.from_html(` <img title="Confirm" class="ok" alt=""/>`, 1);
+var root$c = $.from_html(` <img title="Confirm" class="ok" alt=""/>`, 1);
 
 function Delete($$anchor, $$props) {
   $.push($$props, true);
@@ -6095,7 +6090,7 @@ function Delete($$anchor, $$props) {
 
   $.next();
 
-  var fragment = root$4();
+  var fragment = root$c();
   var text = $.first_child(fragment);
   var img = $.sibling(text);
 
@@ -6107,7 +6102,7 @@ function Delete($$anchor, $$props) {
 
 $.delegate(['click']);
 
-var root$3 = $.from_html(` <input type="text"/>  <img alt=""/>`, 1);
+var root$b = $.from_html(` <input type="text"/>  <img alt=""/>`, 1);
 
 function NewId($$anchor, $$props) {
   $.push($$props, true);
@@ -6156,7 +6151,7 @@ function NewId($$anchor, $$props) {
 
   $.next();
 
-  var fragment = root$3();
+  var fragment = root$b();
   var text = $.first_child(fragment);
   var input_1 = $.sibling(text);
 
@@ -6191,11 +6186,8 @@ $.delegate(['input', 'keydown', 'click']);
 
 const isNewIdAction = (action) => 'set' in action;
 
-var root_1$6 = $.from_html(
-  `<!>  <img title="Cancel" class="cancel" alt=""/>`,
-  1,
-);
-var root_5 = $.from_html(`<img alt=""/>`);
+var root$a = $.from_html(`<!>  <img title="Cancel" class="cancel" alt=""/>`, 1);
+var root_1$4 = $.from_html(`<img alt=""/>`);
 
 function ConfirmableActions($$anchor, $$props) {
   $.push($$props, true);
@@ -6227,7 +6219,7 @@ function ConfirmableActions($$anchor, $$props) {
   {
     var consequent_1 = ($$anchor) => {
       const action = $.derived(() => $$props.actions[$.get(confirming)]);
-      var fragment_1 = root_1$6();
+      var fragment_1 = root$a();
       var node_1 = $.first_child(fragment_1);
 
       {
@@ -6291,7 +6283,7 @@ function ConfirmableActions($$anchor, $$props) {
         () => $$props.actions,
         $.index,
         ($$anchor, action, index) => {
-          var img_1 = root_5();
+          var img_1 = root_1$4();
 
           $.template_effect(() => {
             $.set_attribute(img_1, 'title', $.get(action).title);
@@ -6564,7 +6556,7 @@ function CellActions($$anchor, $$props) {
   $.pop();
 }
 
-var root$2 = $.from_html(`<!> <!>`, 1);
+var root$9 = $.from_html(`<!> <!>`, 1);
 
 function EditableCellViewWithActions($$anchor, $$props) {
   $.push($$props, true);
@@ -6575,7 +6567,7 @@ function EditableCellViewWithActions($$anchor, $$props) {
     () => $$props.cellId,
     () => $$props.store,
   );
-  var fragment = root$2();
+  var fragment = root$9();
   var node = $.first_child(fragment);
 
   EditableCellView(node, {
@@ -6628,7 +6620,7 @@ function EditableCellViewWithActions($$anchor, $$props) {
   $.pop();
 }
 
-var root_1$5 = $.from_html(`<!> <!>`, 1);
+var root$8 = $.from_html(`<!> <!>`, 1);
 
 function TableView($$anchor, $$props) {
   $.push($$props, true);
@@ -6691,7 +6683,7 @@ function TableView($$anchor, $$props) {
     },
 
     children: ($$anchor, $$slotProps) => {
-      var fragment_1 = root_1$5();
+      var fragment_1 = root$8();
       var node = $.first_child(fragment_1);
 
       {
@@ -6781,8 +6773,8 @@ function TableView($$anchor, $$props) {
   $.pop();
 }
 
-var root_2$4 = $.from_html(`<p>No tables.</p>`);
-var root_1$4 = $.from_html(`<!> <!>`, 1);
+var root$7 = $.from_html(`<p>No tables.</p>`);
+var root_1$3 = $.from_html(`<!> <!>`, 1);
 
 function TablesView($$anchor, $$props) {
   $.push($$props, true);
@@ -6819,12 +6811,12 @@ function TablesView($$anchor, $$props) {
     },
 
     children: ($$anchor, $$slotProps) => {
-      var fragment_1 = root_1$4();
+      var fragment_1 = root_1$3();
       var node = $.first_child(fragment_1);
 
       {
         var consequent = ($$anchor) => {
-          var p = root_2$4();
+          var p = root$7();
 
           $.append($$anchor, p);
         };
@@ -7003,8 +6995,8 @@ function ValuesActions($$anchor, $$props) {
   $.pop();
 }
 
-var root_2$3 = $.from_html(`<p>No values.</p>`);
-var root_1$3 = $.from_html(`<!> <!>`, 1);
+var root$6 = $.from_html(`<p>No values.</p>`);
+var root_1$2 = $.from_html(`<!> <!>`, 1);
 
 function ValuesView($$anchor, $$props) {
   $.push($$props, true);
@@ -7039,12 +7031,12 @@ function ValuesView($$anchor, $$props) {
     },
 
     children: ($$anchor, $$slotProps) => {
-      var fragment_1 = root_1$3();
+      var fragment_1 = root_1$2();
       var node = $.first_child(fragment_1);
 
       {
         var consequent = ($$anchor) => {
-          var p = root_2$3();
+          var p = root$6();
 
           $.append($$anchor, p);
         };
@@ -7101,7 +7093,7 @@ function ValuesView($$anchor, $$props) {
   $.pop();
 }
 
-var root_2$2 = $.from_html(`<!> <!>`, 1);
+var root$5 = $.from_html(`<!> <!>`, 1);
 
 function StoreView($$anchor, $$props) {
   $.push($$props, true);
@@ -7135,7 +7127,7 @@ function StoreView($$anchor, $$props) {
           },
 
           children: ($$anchor, $$slotProps) => {
-            var fragment_2 = root_2$2();
+            var fragment_2 = root$5();
             var node_1 = $.first_child(fragment_2);
 
             ValuesView(node_1, {
@@ -7186,8 +7178,8 @@ function StoreView($$anchor, $$props) {
   $.pop();
 }
 
-var root_1$2 = $.from_html(`<span class="warn"> </span>`);
-var root_2$1 = $.from_html(
+var root$4 = $.from_html(`<span class="warn"> </span>`);
+var root_1$1 = $.from_html(
   `<article><!> <!> <!> <!> <!> <!> <!> <!> <!> <!></article>`,
 );
 
@@ -7262,7 +7254,7 @@ function Body($$anchor, $$props) {
 
   {
     var consequent = ($$anchor) => {
-      var span = root_1$2();
+      var span = root$4();
       var text = $.child(span, true);
 
       $.reset(span);
@@ -7271,7 +7263,7 @@ function Body($$anchor, $$props) {
     };
 
     var alternate = ($$anchor) => {
-      var article_1 = root_2$1();
+      var article_1 = root_1$1();
       var node_1 = $.child(article_1);
 
       StoreView(node_1, {
@@ -7432,7 +7424,7 @@ function Body($$anchor, $$props) {
   $.pop();
 }
 
-var root_1$1 = $.from_html(`<span class="warn"> </span>`);
+var root$3 = $.from_html(`<span class="warn"> </span>`);
 
 function ErrorBoundary($$anchor, $$props) {
   const handleError = (
@@ -7446,7 +7438,7 @@ function ErrorBoundary($$anchor, $$props) {
 
   {
     const failed = ($$anchor, /* istanbul ignore next */ _error = $.noop, /* istanbul ignore next */ _reset = $.noop) => {
-      var span = root_1$1();
+      var span = root$3();
       var text = $.child(span, true);
 
       $.reset(span);
@@ -7466,8 +7458,8 @@ function ErrorBoundary($$anchor, $$props) {
   $.append($$anchor, fragment);
 }
 
-var root_2 = $.from_html(`<img tabindex="0" alt=""/>`);
-var root$1 = $.from_html(
+var root$2 = $.from_html(`<img tabindex="0" alt=""/>`);
+var root_1 = $.from_html(
   `<header><img class="flat" tabindex="0" alt=""/> <span> </span> <!>  <img class="flat" title="Close" tabindex="0" alt=""/></header>`,
 );
 
@@ -7490,7 +7482,7 @@ function Header($$anchor, $$props) {
     }
   };
 
-  var header = root$1();
+  var header = root_1();
   var img = $.child(header);
   var span = $.sibling(img, 2);
   var text = $.child(span, true);
@@ -7510,7 +7502,7 @@ function Header($$anchor, $$props) {
 
       {
         var consequent = ($$anchor) => {
-          var img_1 = root_2();
+          var img_1 = root$2();
 
           $.set_attribute(img_1, 'data-id', p);
           $.template_effect(() =>
@@ -7551,7 +7543,7 @@ function Header($$anchor, $$props) {
 
 $.delegate(['click', 'keydown']);
 
-var root_1 = $.from_html(`<main><!> <!></main>`);
+var root$1 = $.from_html(`<main><!> <!></main>`);
 
 function Panel($$anchor, $$props) {
   $.push($$props, true);
@@ -7569,7 +7561,7 @@ function Panel($$anchor, $$props) {
 
   {
     var consequent = ($$anchor) => {
-      var main = root_1();
+      var main = root$1();
       var node_1 = $.child(main);
 
       Header(node_1, {