@humandialog/forms.svelte 0.5.5 → 0.5.7

package/components/document/rich.edit.svelte

@@ -143,6 +143,19 @@ const on_keyup = () => {
   selection_changed();
 };
 const on_keydown = (event) => {
+  const sel = window.getSelection();
+  if (sel.focusNode == editable_div) {
+    let next_text_editable_node = find_next_editable_node(null, editable_div);
+    if (!next_text_editable_node) {
+      event.preventDefault();
+      return;
+    }
+    let range = new Range();
+    range.collapse(true);
+    range.setStart(next_text_editable_node, 0);
+    range.setEnd(next_text_editable_node, 0);
+    set_selection(range);
+  }
   switch (event.key) {
     case "Enter":
       if (is_command_palette_visible) {
@@ -650,7 +663,11 @@ function is_non_editable_element(node) {
   if (node.nodeType != node.ELEMENT_NODE)
     return false;
   let element = node;
-  return element.isContentEditable;
+  if (element.isContentEditable)
+    return false;
+  if (element.contentEditable == "false")
+    return true;
+  return false;
 }
 function find_next_editable_node(after, parent, check_upper_nodes = false) {
   let node;
@@ -983,6 +1000,7 @@ let commands = [
     outline: 0px solid transparent;
 }
 
+
 /*
 :global(.doc-code) {
   margin-left: 3rem;

package/components/inputbox.ltop.svelte

@@ -109,7 +109,7 @@
 </script>    
 
 {#if itype == 'text'}
-    {@const border_style = invalid ? "border-red-300 dark:border-red-600" : "border-stone-300 dark:border-stone-600" }
+    {@const border_style = invalid ? "border-red-300 dark:border-red-600" : "border-stone-300 dark:border-stone-500" }
     <div class={cs}>
         <label for="name" class="block {label_mb} text-xs font-small text-stone-900 dark:text-white">{label}</label>
         

package/components/kanban/internal/kanban.card.svelte

@@ -203,7 +203,7 @@ export async function editProperty(field) {
     {#if item[definition.summaryAttrib] || summaryPlaceholder}
         {#key item[definition.summaryAttrib]}
             {#if isCardActive}
-                <summary class="  sm:text-xs sm:min-h-[1rem]
+                <p class="  sm:text-xs sm:min-h-[1rem]
                             text-base min-h-[1.5rem]
                             text-stone-400
                             max-h-[75px] sm:max-h-[64px]
@@ -215,15 +215,15 @@ export async function editProperty(field) {
                                 onFinish: (d) => {summaryPlaceholder = false}}}
                             bind:this={summaryElement}>
                     {item[definition.summaryAttrib]}
-                </summary>
+                </p>
             {:else}
-                <summary class="  sm:text-xs sm:min-h-[1rem]
+                <p class="  sm:text-xs sm:min-h-[1rem]
                                 text-base min-h-[1.5rem]
                                 text-stone-400
                                 max-h-[75px] sm:max-h-[64px]
                                 overflow-hidden">
                     {item[definition.summaryAttrib]}
-                </summary>
+                </p>
             {/if}
         {/key}
     {/if}

package/components/kanban/internal/kanban.props.svelte

@@ -86,55 +86,55 @@ async function editTags(field, propIdx) {
       });
   }
 }
-</script>
-
-<section class="flex flex-row justify-between">
-    {#each properties as prop, idx}
-        {#if item[prop.a] || placeholder==prop.name}
-            {#if prop.type == rList_property_type.Date}
-                <DatePicker
-                    self={item}
-                    a={prop.a}
-                    compact={true}
-                    s="xs"
-                    inContext="props"
-                    bind:this={propElements[idx]}/>
-            {:else if prop.type == rList_property_type.Combo}
-                <Combo
-                        compact={true}
-                        inContext="props"
-                        self={item}
-                        a={prop.a}
-                        onSelect={prop.onSelect}
-                        isAssociation={prop.association}
-                        icon={false}
-                        definition={prop.combo_definition}
-                        s="xs"
-                        bind:this={propElements[idx]}/>
-            {:else if prop.type == rList_property_type.Static}
-                <p
-                    class="     h-6
-                                sm:text-xs sm:min-h-[1rem]
-                                text-base min-h-[1.5rem]
-                                text-stone-400
-                                text-right"
-                                bind:this={propElements[idx]}>
-                    {item[prop.a]}
-                </p>
-            {:else if prop.type == rList_property_type.Tags}
-                <Tags
-                    class="mt-2"
-                    compact
-                    inContext="props"
-                    self={item}
-                    a={prop.a}
-                    globalTags={prop.allTags}
-                    s="xs"
-                    onSelect={prop.onSelect}
-                    onCreate={prop.onCreate}
-                    bind:this={propElements[idx]}
-                />
-            {/if}
-        {/if}
-    {/each}
+</script>
+
+<section class="flex flex-row justify-between">
+    {#each properties as prop, idx}
+        {#if item[prop.a] || placeholder==prop.name}
+            {#if prop.type == rList_property_type.Date}
+                <DatePicker
+                    self={item}
+                    a={prop.a}
+                    compact={true}
+                    s="xs"
+                    inContext="props"
+                    bind:this={propElements[idx]}/>
+            {:else if prop.type == rList_property_type.Combo}
+                <Combo
+                        compact={true}
+                        inContext="props"
+                        self={item}
+                        a={prop.a}
+                        onSelect={prop.onSelect}
+                        isAssociation={prop.association}
+                        icon={false}
+                        definition={prop.combo_definition}
+                        s="xs"
+                        bind:this={propElements[idx]}/>
+            {:else if prop.type == rList_property_type.Static}
+                <p
+                    class="     h-6
+                                sm:text-xs sm:min-h-[1rem]
+                                text-base min-h-[1.5rem]
+                                text-stone-400
+                                text-right"
+                                bind:this={propElements[idx]}>
+                    {item[prop.a]}
+                </p>
+            {:else if prop.type == rList_property_type.Tags}
+                <Tags
+                    class="mt-2"
+                    compact
+                    inContext="props"
+                    self={item}
+                    a={prop.a}
+                    getGlobalTags={prop.getAllTags}
+                    s="xs"
+                    onSelect={prop.onSelect}
+                    onCreate={prop.onCreate}
+                    bind:this={propElements[idx]}
+                />
+            {/if}
+        {/if}
+    {/each}
 </section>

package/components/kanban/kanban.tags.svelte

@@ -3,7 +3,7 @@ import { KanbanCardTop, KanbanCardMiddle, KanbanCardBottom } from "./Kanban";
 import { rList_property_tags } from "../list/List";
 export let name = "";
 export let a = "";
-export let allTags = "";
+export let getAllTags = void 0;
 export let onCreate = void 0;
 export let onSelect = void 0;
 export let top = false;
@@ -23,7 +23,7 @@ if (!a && name) {
 }
 tagsProperty.onSelect = onSelect;
 tagsProperty.onCreate = onCreate;
-tagsProperty.allTags = allTags;
+tagsProperty.getAllTags = getAllTags;
 if (top)
   tagsProperty.position = KanbanCardTop;
 else if (bottom)
@@ -31,4 +31,4 @@ else if (bottom)
 else
   tagsProperty.position = KanbanCardMiddle;
 definition.properties.push(tagsProperty);
-</script>
+</script>

package/components/kanban/kanban.tags.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         name?: string | undefined;
         a?: string | undefined;
-        allTags?: string | undefined;
+        getAllTags?: Function | undefined;
         onCreate?: Function | undefined;
         onSelect?: Function | undefined;
         top?: boolean | undefined;

package/components/list/List.d.ts

@@ -23,7 +23,7 @@ export declare class rList_property_combo extends rList_property {
 export declare class rList_property_tags extends rList_property {
     constructor();
     onCreate: Function | undefined;
-    allTags: string;
+    getAllTags: Function | undefined;
 }
 export declare class rList_definition {
     title: string;
@@ -39,5 +39,6 @@ export declare class rList_definition {
     can_insert: boolean;
     onInsert: Function | undefined;
     inserter_icon: boolean;
+    onOpen: Function | undefined;
     properties: rList_property[];
 }

package/components/list/List.js

@@ -31,7 +31,7 @@ export class rList_property_tags extends rList_property {
         super(rList_property_type.Tags);
     }
     onCreate = undefined;
-    allTags = '';
+    getAllTags = undefined;
 }
 export class rList_definition {
     title = '';
@@ -47,5 +47,6 @@ export class rList_definition {
     can_insert = false;
     onInsert = undefined;
     inserter_icon = false;
+    onOpen = undefined;
     properties = [];
 }

package/components/list/internal/list.element.summary.svelte

@@ -7,7 +7,6 @@ export let text = "";
 export let placeholder = false;
 export let active = false;
 export let editable;
-export let clickEdit;
 let user_class = $$props.class ?? "";
 </script>
 
@@ -47,7 +46,10 @@ let user_class = $$props.class ?? "";
                      text-base min-h-[1.5rem]
                      text-stone-400 
                      {user_class}"
-            use:_editable={editable}
+                use:_editable={{
+                action: editable,
+                active: true
+            }}
             on:click>
     </p>
 {/if}

package/components/list/internal/list.element.summary.svelte.d.ts

@@ -8,7 +8,6 @@ declare const __propDef: {
         placeholder?: boolean | undefined;
         active?: boolean | undefined;
         editable: any;
-        clickEdit: any;
     };
     events: {
         click: MouseEvent;

package/components/list/internal/list.element.svelte

@@ -15,6 +15,8 @@ import Properties from "./list.element.props.svelte";
 import { isDeviceSmallerThan } from "../../../utils";
 import { rList_definition, rList_property_type } from "../List";
 import { push } from "svelte-spa-router";
+import { FaExternalLinkAlt } from "svelte-icons/fa/";
+import { readonly } from "svelte/store";
 export let item;
 export let title = "";
 export let summary = "";
@@ -123,10 +125,6 @@ function on_active_row_clicked(e, part) {
       if (link)
         push(link);
     } else {
-      if (part == "top" && !definition.title_readonly)
-        force_editing("Title");
-      else if (part == "bottom" && !definition.summary_readonly)
-        force_editing("Summary");
     }
   } else {
   }
@@ -176,9 +174,20 @@ async function force_editing(field) {
   if (!element_node.classList.contains("editable")) {
     return;
   }
-  startEditing(element_node, () => {
-    placeholder = "";
-  });
+  element_node.focus();
+  setSelectionAtEnd(element_node);
+}
+function setSelectionAtEnd(element) {
+  const textNode = element.childNodes[0];
+  const text = textNode.textContent;
+  let range = document.createRange();
+  let end_offset = text.length;
+  let end_container = textNode;
+  range.setStart(end_container, end_offset);
+  range.setEnd(end_container, end_offset);
+  let sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
 }
 </script>
 
@@ -213,6 +222,13 @@ async function force_editing(field) {
                             readonly: definition.title_readonly,
                         }}> 
                             {element_title}
+
+                        {#if definition.onOpen}
+                            <button class="ml-3 w-5 h-5 sm:w-3 sm:h-3"
+                                    on:click={(e) => definition.onOpen(item)}>
+                                <FaExternalLinkAlt/>
+                            </button>
+                        {/if}
                     </p>
                 {/key}
            {:else}
@@ -233,16 +249,43 @@ async function force_editing(field) {
 
         {#if summary && (item[summary] || placeholder=='Summary')}
             {@const element_id = `__hd_list_ctrl_${item[item_key]}_Summary`}
-            <Summary
+            {#key item[summary]}
+                
+            <!--Summary
                     id={element_id}
                     on:click={(e) => on_active_row_clicked(e, 'bottom')}
                     text={item[summary]}
                     readonly={definition.summary_readonly}
                     placeholder={placeholder == 'Summary'}
                     editable={(text) => {change_summary(text)}}
-                    clickEdit={edit}
                     active={is_row_active}
-                />
+                /-->
+
+                
+                {#if is_row_active}
+                    <p  id={element_id} 
+                        class=" sm:text-xs sm:min-h-[1rem]
+                                    text-base min-h-[1.5rem]
+                                    text-stone-400"
+                            use:editable={{
+                                action: (text) => {change_summary(text)},
+                                readonly: definition.summary_readonly,
+                                onFinish: (d) => {placeholder='';},
+                                active: true
+                            }}>
+                        {item[summary]}
+                    </p>
+                {:else}
+                    <p  id={element_id} 
+                        class=" sm:text-xs sm:min-h-[1rem]
+                                    text-base min-h-[1.5rem]
+                                    text-stone-400"
+                        on:click={(e) => on_active_row_clicked(e, 'bottom')}>
+                        {item[summary]}
+                    </p>
+                {/if}
+            {/key}
+                
         {/if}
 
         <section class="block sm:hidden w-full sm:flex-none sm:w-2/3">

package/components/list/list.svelte

@@ -84,7 +84,7 @@ export function reload(data, selectElement = KEEP_SELECTION) {
       selectElementId = 0;
       break;
     case KEEP_SELECTION:
-      selectElementId = currentSelectedItem.Id ?? 0;
+      selectElementId = currentSelectedItem?.Id ?? 0;
       break;
     case SELECT_PREVIOUS:
       if (currentSelectedItem) {

package/components/list/list.title.svelte

@@ -2,6 +2,7 @@
 export let a;
 export let editable = false;
 export let onChange = void 0;
+export let onOpen = void 0;
 export let readonly = false;
 export let href = void 0;
 export let hrefFunc = void 0;
@@ -12,4 +13,5 @@ definition.on_title_changed = onChange;
 definition.title_readonly = readonly;
 definition.title_href = href;
 definition.title_href_func = hrefFunc;
+definition.onOpen = onOpen;
 </script>

package/components/list/list.title.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         a: string;
         editable?: boolean | undefined;
         onChange?: Function | undefined;
+        onOpen?: Function | undefined;
         readonly?: boolean | undefined;
         href?: string | undefined;
         hrefFunc?: Function | undefined;

package/components/tags.svelte

@@ -6,7 +6,7 @@ import ComboItem from "./combo/combo.item.svelte";
 import { contextItemsStore, data_tick_store, contextTypesStore } from "../stores.js";
 import { informModification, pushChanges } from "../updates.js";
 export let tags = "";
-export let globalTags = "";
+export let getGlobalTags;
 export let self = null;
 export let a = "";
 export let context = "";
@@ -27,6 +27,7 @@ let isEditable = true;
 $:
   setup($data_tick_store, $contextItemsStore);
 function setup(...args) {
+  const globalTags = getGlobalTags();
   globalTagsTable = decomposeTags(globalTags);
   if (!tags) {
     item = self ?? $contextItemsStore[ctx];
@@ -104,6 +105,7 @@ function onRemoveTag(tag) {
 }
 function onNewTagCreated(key, name) {
   tags += `#${key} `;
+  let globalTags = getGlobalTags();
   globalTags += `#${key} `;
   globalTagsTable = decomposeTags(globalTags);
   tagsTable = decomposeTags(tags, globalTagsTable);
@@ -143,6 +145,8 @@ function decomposeTags(tags2, referenceTable = void 0) {
   return table;
 }
 function getNotUsedTags() {
+  const globalTags = getGlobalTags();
+  globalTagsTable = decomposeTags(globalTags);
   let result = globalTagsTable.filter((e) => {
     const label = e.label;
     let idx = tagsTable.findIndex((f) => f.label == label);
@@ -165,39 +169,39 @@ switch (s) {
     gap = "gap-2 sm:gap-1";
     break;
 }
-</script>
-
-<div class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0">
-    {#each tagsTable as tag}
-        {#if isEditable}
-            <Tag name={tag.label} color={tag.color} {s}
-                 onRemove={(e) => {onRemoveTag(tag.label)}}/>
-        {:else}
-            <Tag name={tag.label} color={tag.color} {s}/>
-        {/if}
-    {/each}
-
-    {#if isEditable}
-        {#if !addComboVisible}
-            {#if !compact}
-                <button    class="mt-1 pl-0 pr-1 rounded text-stone-500 flex flex-row border-stone-500 border hover:cursor-pointer"
-                        on:click={(e) => { show(e, undefined)} }>
-                    <div class="ml-1 mt-1 w-3 h-3"><FaPlus/></div>
-                </button>
-            {/if}
-        {:else}
-            <Combo  compact={true} 
-                    inContext='data'
-                    onSelect={onSelectTag}
-                    onNewItemCreated={onNewTagCreated}
-                    s={s}
-                    filtered
-                    bind:this={addCombo}>
-                {@const not_used_tags = getNotUsedTags()}
-                {#each not_used_tags as tag}
-                    <ComboItem key={tag.label}/>
-                {/each}
-            </Combo>
-        {/if}
-    {/if}
+</script>
+
+<div class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0">
+    {#each tagsTable as tag}
+        {#if isEditable}
+            <Tag name={tag.label} color={tag.color} {s}
+                 onRemove={(e) => {onRemoveTag(tag.label)}}/>
+        {:else}
+            <Tag name={tag.label} color={tag.color} {s}/>
+        {/if}
+    {/each}
+
+    {#if isEditable}
+        {#if !addComboVisible}
+            {#if !compact}
+                <button    class="mt-1 pl-0 pr-1 rounded text-stone-500 flex flex-row border-stone-500 border hover:cursor-pointer"
+                        on:click={(e) => { show(e, undefined)} }>
+                    <div class="ml-1 mt-1 w-3 h-3"><FaPlus/></div>
+                </button>
+            {/if}
+        {:else}
+            <Combo  compact={true} 
+                    inContext='data'
+                    onSelect={onSelectTag}
+                    onNewItemCreated={onNewTagCreated}
+                    s={s}
+                    filtered
+                    bind:this={addCombo}>
+                {@const not_used_tags = getNotUsedTags()}
+                {#each not_used_tags as tag}
+                    <ComboItem key={tag.label}/>
+                {/each}
+            </Combo>
+        {/if}
+    {/if}
 </div>

package/components/tags.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         tags?: string | undefined;
-        globalTags?: string | undefined;
+        getGlobalTags: Function;
         self?: null | undefined;
         a?: string | undefined;
         context?: string | undefined;

package/desk.svelte

@@ -118,9 +118,9 @@
             content_top = 'top-[50px] sm:top-[40px]'
             
             if(bottom_bar_visible)
-                content_height = `h-[calc(100vh-290px)] sm:h-[calc(100vh-280px)]`    
+                content_height = `min-h-[calc(100vh-290px)] sm:min-h-[calc(100vh-280px)]`    
             else    
-                content_height = `h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]` 
+                content_height = `min-h-[calc(100vh-50px)] sm:min-h-[calc(100vh-40px)]` 
                
         }
         else
@@ -128,9 +128,9 @@
             tools_visibility = "hidden"
             content_top = `top-[50px] sm:top-0`
             if(bottom_bar_visible)
-                content_height = `h-[calc(100vh-290px)] sm:h-[calc(100vh-240px)]`           
+                content_height = `min-h-[calc(100vh-290px)] sm:min-h-[calc(100vh-240px)]`           
             else
-                content_height = `h-[calc(100vh-50px)] sm:h-screen`
+                content_height = `min-h-[calc(100vh-50px)] sm:min-h-screen`
         }
         
         
@@ -161,11 +161,11 @@
             on:click={handleSelect} 
             on:contextmenu={handleSelect}>
 
-        <div class="bg-white dark:bg-stone-900 dark:text-white      min-h-screen h-screen">    
+        <div class="bg-white dark:bg-stone-900 dark:text-white      min-h-screen">    
             <!--###########################################################-->
             <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->
             <!--###########################################################-->
-            <header class="fixed sm:hidden w-screen top-0 h-[50px] sm:h-[40px] z-20  overflow-auto shadow  shadow-stone-900/5 dark:shadow-none" >
+            <header class="fixed sm:hidden w-screen top-0 h-[50px] sm:h-[40px] z-20 shadow  shadow-stone-900/5 dark:shadow-none     overflow-auto" >
                     <div class=" flex flex-row justify-between  h-full  bg-stone-950   text-stone-100 ">
                         <HorizontalToolbar appConfig={layout}/>
                     <div>
@@ -230,7 +230,8 @@
                 <!--#######################################################-->
                 <!--##  CONTENT                          ##################-->
                 <!--#######################################################-->
-                <div  class="fixed left-0  w-screen  
+                <!-- fixed => relative, content-height => min content height -- -->
+                <div  class="relative left-0  w-screen  
                                 sm:left-[40px]  sm:w-[calc(100vw-40px)]    
                                 {content_top}
                                 {content_height}

package/modal.svelte

@@ -70,9 +70,9 @@ function on_cancel(event) {
             From: "opacity-100 translate-y-0 sm:scale-100"
             To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         -->
-        <div class=" transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all 
+        <div class=" transform overflow-hidden rounded-lg bg-white dark:bg-stone-700 text-left shadow-xl transition-all 
                     sm:my-8 w-full sm:max-w-lg">
-          <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+          <div class="bg-white dark:bg-stone-700 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
             <div class="sm:flex sm:items-start">
               <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
                 {#if icon}
@@ -80,7 +80,7 @@ function on_cancel(event) {
                 {/if}
               </div>
               <div class="grow mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                <h3 class="text-base font-semibold leading-6 text-stone-900" id="modal-title">{title}</h3>
+                <h3 class="text-base font-semibold leading-6 text-stone-900 dark:text-stone-100" id="modal-title">{title}</h3>
                 <div class="mt-2">
                     {#if content}
                         <p class="text-sm text-stone-500">{content}</p>
@@ -91,16 +91,16 @@ function on_cancel(event) {
               </div>
             </div>
           </div>
-          <div class="bg-stone-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+          <div class="bg-stone-50 dark:bg-stone-700 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
             {#if mode == OK}
-                <button type="button" class="inline-flex w-full justify-center rounded-md bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-800 sm:ml-3 sm:w-auto"
+                <button type="button" class="inline-flex w-full justify-center rounded-md bg-blue-700 dark:bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-800 sm:ml-3 sm:w-auto"
                         on:click={on_ok}>
                         {okCaption}</button>
             {:else if mode == OKCancel}
-                <button type="button" class="inline-flex w-full justify-center rounded-md bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-800 sm:ml-3 sm:w-auto"
+                <button type="button" class="inline-flex w-full justify-center rounded-md bg-blue-700 dark:bg-blue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-800 sm:ml-3 sm:w-auto"
                         on:click={on_ok}>
                         {okCaption}</button>
-                <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 hover:bg-stone-50 sm:mt-0 sm:w-auto"
+                <button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white dark:bg-stone-400 px-3 py-2 text-sm font-semibold text-stone-900 shadow-sm  hover:bg-stone-50 sm:mt-0 sm:w-auto"
                         on:click={on_cancel}>
                         {cancelCaption}</button>
             {:else if mode == Custom}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",

package/tenant.members.svelte

@@ -53,6 +53,7 @@
             {
                 reef_users.push(
                     {
+                        Id: new_reef_user_id++,
                         [nameAttrib]: u[nameAttrib],
                         [emailAttrib]: u[emailAttrib],
                         [refAttrib]: u[refAttrib],
@@ -63,8 +64,7 @@
                         avatar_url : "",
                         invitation_not_accepted: false,
                         removed: false,
-                        membership_tag: "",
-                        __hd_internal_item_id: new_reef_user_id++
+                        membership_tag: ""
                     }
                 )
             })
@@ -90,9 +90,9 @@
             handled_no++;
             if(handled_no == reef_users.length)
             {
+                //console.log('reload', reef_users)
                 
-                
-                list?.updateObjects(reef_users);
+                list?.reload(reef_users);
             }
         } )
     }
@@ -114,7 +114,7 @@
         else
             user.membership_tag = "";
 
-        user.__hd_internal_item_id = new_reef_user_id++;
+        user.Id = new_reef_user_id++;
     }
 
     /*onMount(
@@ -362,10 +362,10 @@
         {
             reef_users.push(
                 {
+                    Id: 1000+i,
                     [nameAttrib]: names[i],
                     [emailAttrib]: 'u@fake.com',
-                    [refAttrib]: `./User/${1000+i}`,
-                    __hd_internal_item_id: 1000+i
+                    [refAttrib]: `./User/${1000+i}`
                 }
             )
         }
@@ -402,7 +402,7 @@
             set_user_info(new_reef_user, details);
 
             reef_users = [...reef_users, new_reef_user]
-            list?.updateObjects(reef_users);
+            list?.reload(reef_users);
         }
 
 
@@ -424,7 +424,7 @@
 </script>
 
 <Page   self={data_item} 
-        cl="!bg-white dark:!bg-stone-900 w-full h-full flex flex-col overflow-y-auto overflow-x-hidden py-1 px-1 border-0" 
+        cl="!bg-white dark:!bg-stone-900 w-full flex flex-col overflow-x-hidden py-1 px-1 border-0" 
         toolbarOperations={page_operations}
         clearsContext='props sel'>
     <!--a href="/" class="underline text-sm font-semibold ml-3"> &lt; Back to root</a-->
@@ -434,7 +434,6 @@
                 title='Members' 
                 toolbarOperations={user_operations} 
                 contextMenu={user_context_menu}
-                key='__hd_internal_item_id'
                 bind:this={list}>
             <ListTitle a={nameAttrib} onChange={on_name_changed}/>
             <ListSummary a={emailAttrib} readonly/>
@@ -487,7 +486,7 @@
                 <div class="flex flex-row items-center">
                     <span class="">Maintainer</span>
                     <Icon id="b1" size={4} component={FaInfoCircle} class="text-stone-400 ml-5 pt-0 mt-1"/>
-                    <Popover class="w-64 text-sm font-light " title="Maintainer" triggeredBy="#b1">
+                    <Popover class="w-64 text-sm font-light" title="Maintainer" triggeredBy="#b1" color="dropdown">
                         Means that the invited user will be able to add and remove others and manage permissions in this organization.
                     </Popover>
                 </div>