@humandialog/forms.svelte 1.3.12 → 1.3.14

package/components/Fab.svelte

@@ -1,9 +1,9 @@
 <script>import { each } from "svelte/internal";
-import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "../stores.js";
+import { contextToolbarOperations, pageToolbarOperations, contextItemsStore, toolsActionsOperations } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
 import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle } from "svelte-icons/fa/";
 $:
-  update($pageToolbarOperations, $contextToolbarOperations);
+  setupCurrentContextOperations($pageToolbarOperations, $contextToolbarOperations, $toolsActionsOperations);
 let operations = [];
 let mainOperation = null;
 let secondaryOperation = null;
@@ -12,11 +12,17 @@ let isExpandable = false;
 let vToolboxExpanded = false;
 let hToolboxExpanded = false;
 let isDirectPositioningMode = false;
-function update(...args) {
+function setupCurrentContextOperations(...args) {
   isDirectPositioningMode = false;
-  if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0)
+  if ($toolsActionsOperations && Array.isArray($toolsActionsOperations) && toolsActionsOperations.length > 0) {
+    operations = $toolsActionsOperations;
+  } else if ($toolsActionsOperations && $toolsActionsOperations.operations && $toolsActionsOperations.operations.length > 0) {
+    operations = $toolsActionsOperations.operations;
+    if ($toolsActionsOperations.opver && $toolsActionsOperations.opver == 1)
+      isDirectPositioningMode = true;
+  } else if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0) {
     operations = $contextToolbarOperations;
-  else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
+  } else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
     operations = $contextToolbarOperations.operations;
     if ($contextToolbarOperations.opver && $contextToolbarOperations.opver == 1)
       isDirectPositioningMode = true;
@@ -189,7 +195,7 @@ function operationVisible(operation) {
                                         dark:bg-blue-600/50 dark:hover:bg-blue-700 dark:focus:ring-blue-800
                                         flex items-center justify-center
                                         disable-dbl-tap-zoom
-                                        cursor-pointer z-10"
+                                        cursor-pointer z-40"
                                         style={position}
                                         on:click|stopPropagation={(e) => {on_click(e, operation)}} 
                                         on:mousedown={mousedown} >

package/components/Floating_container.svelte

@@ -1,13 +1,15 @@
 <script>import { tick, afterUpdate } from "svelte";
+import { isDeviceSmallerThan } from "../utils";
+import { toolsActionsOperations } from "../stores";
+import { FaTimes } from "svelte-icons/fa";
 let x;
 let y;
 let visible = false;
 let toolbar;
 let props = {};
 let around_rect;
-let root_element;
-$:
-  display = visible ? "fixed" : "hidden";
+let rootElement;
+let internalElement;
 export async function show(around, _toolbar, _props = {}) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -19,25 +21,61 @@ export async function show(around, _toolbar, _props = {}) {
     around_rect = new DOMRect(x, y, 0, 0);
   }
   const was_visible = visible;
+  if (!was_visible && toolbar == _toolbar && internalElement && internalElement.reload) {
+    internalElement.reload();
+  }
   visible = true;
   toolbar = _toolbar;
   props = _props;
+  cssPosition = calculatePosition(x, y, around_rect, true, true);
   props.onHide = () => {
     hide();
   };
+  props.onSizeChanged = () => onSizeChanged();
   hide_window_indicator = 0;
   window.addEventListener("click", on_before_window_click, true);
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Menu",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                hide();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
   await tick();
   if (!was_visible)
-    root_element.addEventListener("click", on_before_container_click, true);
+    rootElement.addEventListener("click", on_before_container_click, true);
+  cssPosition = calculatePosition(x, y, around_rect, true, false);
 }
 export function isVisible() {
   return visible;
 }
 export function hide() {
   visible = false;
+  cssPosition = calculatePosition(x, y, around_rect, false, false);
+  $toolsActionsOperations = [];
   window.removeEventListener("click", on_before_window_click, true);
-  root_element.removeEventListener("click", on_before_container_click, true);
+  rootElement?.removeEventListener("click", on_before_container_click, true);
+}
+export function isSameToolbar(_toolbar) {
+  return _toolbar == toolbar;
+}
+async function onSizeChanged() {
+  cssPosition = calculatePosition(x, y, around_rect, true, true);
+  await tick();
+  cssPosition = calculatePosition(x, y, around_rect, true, false);
 }
 let hide_window_indicator = 0;
 function on_before_window_click() {
@@ -52,29 +90,68 @@ function on_before_window_click() {
 function on_before_container_click() {
   hide_window_indicator--;
 }
-afterUpdate(() => {
-  if (!root_element)
-    return;
-  let rect = root_element.getBoundingClientRect();
-  if (rect.height == 0)
-    return;
-  const m = 15;
-  let container_rect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
-  if (rect.right > container_rect.right)
-    x = container_rect.right - rect.width;
-  if (rect.bottom > container_rect.bottom)
-    y = container_rect.bottom - rect.height - around_rect.height;
-  if (rect.left < container_rect.left)
-    x = container_rect.left;
-  if (rect.top < container_rect.top)
-    y = container_rect.top;
-});
+let cssPosition = "";
+function calculatePosition(x2, y2, around, visible2, fresh) {
+  let result = "";
+  if (!visible2) {
+    result = "display: none";
+  } else if (isDeviceSmallerThan("sm")) {
+    let screenRect = new DOMRect();
+    screenRect.x = 0;
+    screenRect.y = 0;
+    screenRect.width = window.innerWidth;
+    screenRect.height = window.innerHeight;
+    const margin = 5;
+    let myRect = null;
+    if (!fresh) {
+      myRect = rootElement.getBoundingClientRect();
+      if (myRect && myRect.height == 0)
+        myRect = null;
+    }
+    if (myRect) {
+      let maxHeight = screenRect.height / 2 - margin;
+      if (myRect.height < maxHeight)
+        maxHeight = myRect.height;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    } else {
+      const maxHeight = screenRect.height / 2 - margin;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    }
+  } else {
+    let myRect = null;
+    if (!fresh) {
+      myRect = rootElement.getBoundingClientRect();
+      if (myRect && myRect.height == 0)
+        myRect = null;
+    }
+    const m = 15;
+    let screenRect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
+    if (myRect) {
+      if (myRect.right > screenRect.right)
+        x2 = screenRect.right - myRect.width;
+      if (myRect.bottom > screenRect.bottom)
+        y2 = screenRect.bottom - myRect.height - around_rect.height;
+      if (myRect.left < screenRect.left)
+        x2 = screenRect.left;
+      if (myRect.top < screenRect.top)
+        y2 = screenRect.top;
+    }
+    result = `left:${x2}px; top:${y2}px; width: max-content; height:max-content; display: block`;
+  }
+  return result;
+}
 </script>
 
 <div    id="__hd_svelte_floating_container"
-        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow {display} z-30"
-        style="left:{x}px; top:{y}px; width: max-content; height:max-content"
-        bind:this={root_element}>
-    <svelte:component this={toolbar} {...props} />
+        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow  z-30 fixed"
+        style={cssPosition}
+        bind:this={rootElement}>
+    <svelte:component this={toolbar} {...props} bind:this={internalElement} />
 </div>
 

package/components/Floating_container.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         show?: ((around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>) | undefined;
         isVisible?: (() => boolean) | undefined;
         hide?: (() => void) | undefined;
+        isSameToolbar?: ((_toolbar: any) => boolean) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,5 +18,6 @@ export default class FloatingContainer extends SvelteComponentTyped<FloatingCont
     get show(): (around: DOMRect | DOMPoint, _toolbar: any, _props?: {}) => Promise<void>;
     get isVisible(): () => boolean;
     get hide(): () => void;
+    get isSameToolbar(): (_toolbar: any) => boolean;
 }
 export {};

package/components/combo/combo.svelte

@@ -1,9 +1,9 @@
-<script>import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores.js";
+<script>import { data_tick_store, contextItemsStore, contextTypesStore, toolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
-import { parseWidthDirective, shouldBeComapact } from "../../utils.js";
+import { isDeviceSmallerThan, parseWidthDirective, shouldBeComapact } from "../../utils.js";
 import { afterUpdate, getContext, onMount, setContext } from "svelte";
 import { rCombo_definition, rCombo_item, cached_sources } from "./combo";
-import FaChevronDown from "svelte-icons/fa/FaChevronDown.svelte";
+import { FaChevronDown, FaTimes } from "svelte-icons/fa";
 import Icon from "../icon.svelte";
 import { reef } from "@humandialog/auth.svelte/dist/index.js";
 export let label = "";
@@ -198,17 +198,25 @@ export function show(event, hide_callback) {
     show_above = true;
   } else
     y = rect.y + rect.height;
-  if (show_fullscreen) {
+  if (isDeviceSmallerThan("sm")) {
+    let screenRect = new DOMRect();
+    screenRect.x = 0;
+    screenRect.y = 0;
+    screenRect.width = window.innerWidth;
+    screenRect.height = window.innerHeight;
+    const margin = 5;
+    const maxHeight = screenRect.height / 2 - margin;
+    const width = screenRect.width - 2 * margin;
+    x = margin;
+    y = screenRect.bottom - margin;
+    dropdown_position = `position: fixed; left: ${x}px; top: ${y}px; transform: translate(0, -100%); width: ${width}px; max-height: ${maxHeight}px; display: block`;
+  } else if (show_fullscreen) {
     dropdown_position = `position: fixed; left: 0px; top: 0px; width: ${client_rect.width}px; height: ${client_rect.height}px;`;
   } else {
     dropdown_position = `min-width: ${palette_width_px}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
     if (show_above)
       dropdown_position += " transform: translate(0, -100%);";
   }
-  console.log("dropdown_position", dropdown_position, rect, client_rect);
-  console.log("preferred_palette_height", preferred_palette_height);
-  console.log("bottom_space", bottom_space);
-  console.log("top_space", top_space);
   is_dropdown_open = true;
   if (filtered) {
     if (!textbox)
@@ -226,11 +234,33 @@ export function show(event, hide_callback) {
       subtree: true
     });
   }
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Menu",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                hide();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
 }
 export function hide() {
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
+  $toolsActionsOperations = [];
+  dropdown_position = "display: none;";
   combo_text = get_combo_text();
   if (!!textbox)
     textbox.innerHtml = combo_text;

package/components/contextmenu.svelte

@@ -1,8 +1,9 @@
 <script>import { afterUpdate, tick } from "svelte";
 import Icon from "./icon.svelte";
-import { contextItemsStore } from "../stores";
+import { contextItemsStore, toolsActionsOperations } from "../stores";
 import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
 import { hideWholeContextMenu } from "./menu";
+import { FaTimes } from "svelte-icons/fa";
 export let widthPx = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
 export let owner_menu_item = void 0;
@@ -16,36 +17,78 @@ let focused_index = 0;
 let menu_items = [];
 let submenus = [];
 let around_rect;
+let css_position = "";
 $:
   display = visible ? "block" : "none";
-afterUpdate(() => {
-  let rect = menu_root.getBoundingClientRect();
-  if (rect.height == 0)
-    return;
-  const m = 15;
-  let container_rect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
-  if (isOnScreenKeyboardVisible()) {
-    container_rect.height -= 300;
-  }
-  let xShifted = false;
-  if (rect.right > container_rect.right) {
-    x = container_rect.right - rect.width + m;
-    xShifted = true;
-  }
-  let yShifted = false;
-  if (rect.bottom > container_rect.bottom) {
-    y = container_rect.bottom - rect.height - m;
-    if (xShifted)
-      x -= around_rect.width;
-    else
-      y -= around_rect.height - m;
-    yShifted = true;
+function calculatePosition(x2, y2, around, visible2, fresh) {
+  let result = "";
+  if (!visible2) {
+    result = "display: none";
+  } else if (isDeviceSmallerThan("sm")) {
+    let screenRect = new DOMRect();
+    screenRect.x = 0;
+    screenRect.y = 0;
+    screenRect.width = window.innerWidth;
+    screenRect.height = window.innerHeight;
+    const margin = 5;
+    let myRect = null;
+    if (!fresh) {
+      myRect = menu_root.getBoundingClientRect();
+      if (myRect.height == 0) {
+        myRect = null;
+      }
+    }
+    if (myRect) {
+      let maxHeight = screenRect.height / 2 - margin;
+      if (myRect.height < maxHeight)
+        maxHeight = myRect.height;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    } else {
+      const maxHeight = screenRect.height / 2 - margin;
+      const width = screenRect.width - 2 * margin;
+      x2 = margin;
+      y2 = screenRect.bottom - maxHeight - margin;
+      result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
+    }
+  } else {
+    let myRect = null;
+    if (!fresh) {
+      myRect = menu_root.getBoundingClientRect();
+      if (myRect.height == 0) {
+        myRect = null;
+      }
+    }
+    if (myRect) {
+      const m = 15;
+      let screenRect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
+      let xShifted = false;
+      if (myRect.right > screenRect.right) {
+        x2 = screenRect.right - myRect.width + m;
+        xShifted = true;
+      }
+      let yShifted = false;
+      if (myRect.bottom > screenRect.bottom) {
+        y2 = screenRect.bottom - myRect.height - m;
+        if (around) {
+          if (xShifted)
+            x2 -= around.width;
+          else
+            y2 -= around.height - m;
+        }
+        yShifted = true;
+      }
+      if (myRect.left < screenRect.left)
+        x2 = screenRect.left;
+      if (myRect.top < screenRect.top)
+        y2 = screenRect.top;
+    }
+    result = `left:${x2}px; top:${y2}px; display: block`;
   }
-  if (rect.left < container_rect.left)
-    x = container_rect.left;
-  if (rect.top < container_rect.top)
-    y = container_rect.top;
-});
+  return result;
+}
 export async function show(around, _operations) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -57,6 +100,7 @@ export async function show(around, _operations) {
     around_rect = new DOMRect(x, y, 0, 0);
   }
   visible = true;
+  css_position = calculatePosition(x, y, around_rect, true, true);
   operations = [..._operations];
   focused_index = operations.findIndex((o) => !o.disabled);
   const is_root_menu = owner_menu_item == void 0;
@@ -64,7 +108,28 @@ export async function show(around, _operations) {
     hide_window_indicator = 0;
     window.addEventListener("click", on_before_window_click, true);
   }
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Menu",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                hide();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
   await tick();
+  css_position = calculatePosition(x, y, around_rect, true, false);
   if (is_root_menu)
     menu_root.addEventListener("click", on_before_container_click, true);
   if (menu_items.length && !isDeviceSmallerThan("sm"))
@@ -74,7 +139,9 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
+  $toolsActionsOperations = [];
   visible = false;
+  css_position = calculatePosition(x, y, around_rect, false, false);
   window.removeEventListener("click", on_before_window_click, true);
   menu_root.removeEventListener("click", on_before_container_click, true);
 }
@@ -210,8 +277,8 @@ function mousedown(e) {
 
 <div id="__hd_svelte_contextmenu" 
     class=" bg-white dark:bg-stone-700 text-stone-600 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-900 shadow-md 
-            z-30 fixed min-w-[{min_width_px}px] w-max" 
-    style={`left:${x}px; top:${y}px; display:${display}`}
+            z-30 fixed min-w-[{min_width_px}px] w-max overflow-y-auto" 
+    style={css_position}
     bind:this={menu_root}>
 
     {#each operations as operation, index}

package/components/document/editor.svelte

@@ -26,7 +26,7 @@ import Underline from "@tiptap/extension-underline";
 import Dropcursor from "@tiptap/extension-dropcursor";
 import Gapcursor from "@tiptap/extension-gapcursor";
 import History from "@tiptap/extension-history";
-import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert } from "../../stores.js";
+import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, toolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, refreshToolbarOperations, UI } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
@@ -46,7 +46,8 @@ import {
   FaArrowLeft,
   FaGripLines,
   FaListUl,
-  FaTable
+  FaTable,
+  FaTimes
 } from "svelte-icons/fa";
 import IcH1 from "./internal/h1.icon.svelte";
 import IcH2 from "./internal/h2.icon.svelte";
@@ -75,20 +76,6 @@ export function run(onStop = void 0) {
 let suggestionRange = void 0;
 export function getFormattingOperations(withCaptions = false) {
   let result = [];
-  if (isDeviceSmallerThan("sm")) {
-    result = [
-      {
-        caption: "Back to edit",
-        icon: FaArrowLeft,
-        action: (fi) => {
-          editor?.commands.focus();
-        }
-      },
-      {
-        separator: true
-      }
-    ];
-  }
   commands.forEach((c2) => {
     if (c2.separator) {
       result.push({ separator: true });
@@ -97,7 +84,8 @@ export function getFormattingOperations(withCaptions = false) {
         caption: withCaptions ? c2.caption : "",
         icon: c2.icon,
         action: (f) => c2.on_choice(suggestionRange),
-        activeFunc: c2.is_active
+        activeFunc: c2.is_active,
+        tbr: "B"
       });
     }
   });
@@ -574,9 +562,31 @@ function on_palette_mouse_click() {
 }
 function on_palette_shown() {
   is_command_palette_visible = true;
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Palette",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                palette.hide();
+                editor?.commands.focus();
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
 }
 function on_palette_hidden() {
   is_command_palette_visible = false;
+  $toolsActionsOperations = [];
 }
 function show_command_palette(cursor_rect) {
   let client_rect = get_window_box();
@@ -664,9 +674,7 @@ function handleImagesChanges(transaction) {
 }
 let commands = [
   //{    caption: 'Styles',       separator: true },
-  { caption: "Back to edit", description: "Escape", icon: FaArrowLeft, on_choice: () => {
-    editor?.commands.focus();
-  }, is_visible: () => isDeviceSmallerThan("sm") },
+  //  {    caption: 'Back to edit', description: 'Escape',                                         icon: FaArrowLeft,                  on_choice: () => { editor?.commands.focus()}, is_visible: () => isDeviceSmallerThan("sm") },
   { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setParagraph().run();

package/components/document/internal/palette.row.svelte

@@ -38,7 +38,7 @@ export function scrollToView() {
      on:mousemove
      on:mousedown
      bind:this={element}>
-    <div class="flex items-center justify-center space-x-10 px-4 py-2" >
+    <div class="flex items-center justify-center space-x-10 px-4 py-2 ml-12 sm:ml-0" >
         {#if cmd.icon}
             <Icon size={icon_size} component={cmd.icon}/>
         {/if}

package/components/document/internal/palette.svelte

@@ -3,7 +3,7 @@
 import Pallete_row from "./palette.row.svelte";
 import { createEventDispatcher } from "svelte";
 import Icon from "../../icon.svelte";
-import { isDeviceSmallerThan } from "../../../utils.js";
+import { isDeviceSmallerThan, UI } from "../../../utils.js";
 export let commands;
 export let width_px = 400;
 export let max_height_px = 500;
@@ -265,11 +265,12 @@ function isRowActive(cmd) {
         {/if}
     </menu>
 {:else}
-    <div    id="__hd_FormattingPalette"
-            class="bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30 overflow-y-auto" 
+    <div    class="bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md overflow-y-auto z-20"
+            id="__hd_FormattingPalette"
+            bind:this={paletteElement}
             hidden={!visible}
-            style={css_style}
-            bind:this={paletteElement}>
+            style={css_style} >
+        
         {#if filtered_commands && filtered_commands.length}
             {#each filtered_commands as cmd, idx (cmd.caption)}
                 {#if cmd.separator}
@@ -295,5 +296,6 @@ function isRowActive(cmd) {
         {/if}
 
     </div>
+    
 {/if}
 

package/components/list/List.d.ts

@@ -28,6 +28,7 @@ export declare class rList_property_tags extends rList_property {
     onUpdateAllTags: Function | undefined;
 }
 export declare class rList_definition {
+    name: string;
     title: string;
     title_editable: boolean;
     on_title_changed: Function | undefined;

package/components/list/List.js

@@ -36,6 +36,7 @@ export class rList_property_tags extends rList_property {
     onUpdateAllTags = undefined;
 }
 export class rList_definition {
+    name = '';
     title = '';
     title_editable = false;
     on_title_changed = undefined;

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

@@ -21,8 +21,8 @@ export let item;
 export let title = "";
 export let summary = "";
 export let typename = void 0;
-export let toolbarOperations;
-export let contextMenu;
+export let toolbarOperations = void 0;
+export let contextMenu = void 0;
 let definition = getContext("rList-definition");
 let placeholder = "";
 let props_sm;
@@ -47,10 +47,10 @@ if (!typename) {
 }
 let item_key = "";
 let keys = Object.keys(item);
-if (keys.includes("Id"))
-  item_key = "Id";
-else if (keys.includes("$ref"))
+if (keys.includes("$ref"))
   item_key = "$ref";
+else if (keys.includes("Id"))
+  item_key = "Id";
 else if (keys.length > 0)
   item_key = keys[0];
 if (!title)
@@ -152,9 +152,11 @@ function getHRef() {
     return "";
 }
 function activate_row(e, item2) {
-  activateItem("props", item2, toolbarOperations(item2));
-  if (e)
-    e.stopPropagation();
+  if (toolbarOperations) {
+    activateItem("props", item2, toolbarOperations(item2));
+    if (e)
+      e.stopPropagation();
+  }
 }
 function on_contextmenu(e) {
   if (!contextMenu)
@@ -318,7 +320,7 @@ export function scrollToView() {
             {#key item[summary] }           
                 {#if is_row_active}
                     <p  id={element_id} 
-                        class=" text-sm    mb-2                          
+                        class=" text-sm                              
                                 text-stone-400"
                             use:editable={{
                                 action: (text) => {change_summary(text)},
@@ -330,7 +332,7 @@ export function scrollToView() {
                     </p>
                 {:else}
                     <p  id={element_id} 
-                        class=" text-sm mb-2
+                        class=" text-sm 
                                     text-stone-400"
                         on:click={(e) => on_active_row_clicked(e, 'bottom')}>
                         {item[summary]}

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

@@ -5,8 +5,8 @@ declare const __propDef: {
         title?: string | undefined;
         summary?: string | undefined;
         typename?: string | undefined;
-        toolbarOperations: any;
-        contextMenu: any;
+        toolbarOperations?: undefined;
+        contextMenu?: undefined;
         activate?: (() => void) | undefined;
         editProperty?: ((field: string) => void) | undefined;
         scrollToView?: (() => void) | undefined;

package/components/list/internal/list.inserter.svelte

@@ -26,7 +26,7 @@ async function onSummaryChanged(text) {
 }
 </script>
 
-<section    class="mt-3 my-0  w-full text-lg sm:text-sm text-stone-700 dark:text-stone-400 cursor-default rounded-md border border-transparent bg-stone-200 dark:bg-stone-700">
+<section    class=" my-1 w-full text-base text-stone-700 dark:text-stone-400 cursor-default rounded-md border border-transparent bg-stone-200 dark:bg-stone-700">
     <div class="flex flex-row">
         {#if icon}
             <!--Icon   size={3} 
@@ -36,8 +36,8 @@ async function onSummaryChanged(text) {
         {/if}
 
         <p  class=" ml-3 py-1
-                    text-lg font-semibold min-h-[1.75rem]
-                    sm:text-sm sm:font-semibold sm:min-h-[1.25rem]
+                    text-base font-semibold min-h-[1.75rem]
+                    sm:min-h-[1.25rem]
                     whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3" tabindex="0"
             bind:this={titleElement}
             use:editable={{
@@ -51,8 +51,8 @@ async function onSummaryChanged(text) {
     {#if editSummary}
         <p  bind:this={summaryElement}
             class="     ml-10 sm:ml-9 
-                        sm:text-xs sm:min-h-[1rem]
-                        text-base min-h-[1.5rem]
+                        sm:min-h-[1rem]
+                        text-sm min-h-[1.5rem]
                         text-stone-400"
                 use:editable={{
                     action: onSummaryChanged,

package/components/list/list.svelte

@@ -1,5 +1,5 @@
 <script>import { setContext, getContext, afterUpdate, tick, onMount } from "svelte";
-import { data_tick_store, contextItemsStore, contextTypesStore, page_title } from "../../stores";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores";
 import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev, getNext, swapElements, getLast, insertAfter } from "../../utils";
 import { rList_definition } from "./List";
 import List_element from "./internal/list.element.svelte";
@@ -13,8 +13,8 @@ export let orderAttrib = void 0;
 export let context = "";
 export let typename = "";
 export let c = "";
-export let toolbarOperations;
-export let contextMenu;
+export let toolbarOperations = void 0;
+export let contextMenu = void 0;
 export let key = "";
 export const CLEAR_SELECTION = 0;
 export const KEEP_SELECTION = -1;
@@ -26,6 +26,7 @@ export const MIN_ORDER = 0;
 let definition = new rList_definition();
 setContext("rList-definition", definition);
 setContext("rIs-table-component", true);
+definition.name = `List ${a}`;
 let item = null;
 let items = void 0;
 let ctx = context ? context : getContext("ctx");
@@ -35,7 +36,8 @@ const END_OF_LIST = {};
 let rows = [];
 let activate_after_dom_update = null;
 let inserter;
-clearActiveItem("props");
+if (toolbarOperations)
+  clearActiveItem("props");
 let last_tick = -1;
 $:
   setup($data_tick_store, $contextItemsStore);
@@ -55,10 +57,10 @@ function setup(...args) {
 function getItemKey(item2) {
   if (key)
     return item2[key];
-  else if (item2.Id)
-    return item2.Id;
   else if (item2.$ref)
     return item2.$ref;
+  else if (item2.Id)
+    return item2.Id;
   else
     return 0;
 }

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

@@ -9,8 +9,8 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         c?: string | undefined;
-        toolbarOperations: any;
-        contextMenu: any;
+        toolbarOperations?: undefined;
+        contextMenu?: undefined;
         key?: string | undefined;
         CLEAR_SELECTION?: 0 | undefined;
         KEEP_SELECTION?: -1 | undefined;

package/components/menu.js

@@ -39,14 +39,12 @@ export function showFloatingToolbar(around, toolbar, props = {}) {
         toolbar_component.show(around, toolbar, props);
     }
     else if (toolbar_component) {
-        //if(toolbar_component.isVisible())
-        //{
-        //    toolbar_component.hide();
-        //}
-        //else
-        //{
-        toolbar_component.show(around, toolbar, props);
-        //}
+        if (toolbar_component.isVisible() && toolbar_component.isSameToolbar(toolbar)) {
+            toolbar_component.hide();
+        }
+        else {
+            toolbar_component.show(around, toolbar, props);
+        }
     }
     else
         console.error('what now?');

package/components/sidebar/sidebar.item.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from "svelte";
+<script>import { getContext, tick } from "svelte";
 import Icon from "../icon.svelte";
 import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
 import { FaBars, FaEllipsisH } from "svelte-icons/fa";

package/desk.svelte

@@ -95,7 +95,7 @@
             lg_content_area_horizontal_dim = ""
         }
           
-        console.log('main_side_panel_visibility', main_side_panel_visibility)
+        //console.log('main_side_panel_visibility', main_side_panel_visibility)
     }
     
     let tools_visibility = "hidden"
@@ -268,6 +268,7 @@
 
     function onSelectionChanged(e)
     {
+        console.log('onSelectionChanged')
         determineFABVisibilityAsync();
     }
 

package/index.d.ts

@@ -55,7 +55,7 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
 export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/index.js

@@ -61,7 +61,7 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
 export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/modal.svelte

@@ -1,5 +1,8 @@
 <script>import { afterUpdate, onMount, tick } from "svelte";
 import Icon from "./components/icon.svelte";
+import { toolsActionsOperations } from "./stores.js";
+import { isDeviceSmallerThan } from "./utils";
+import { FaTimes } from "svelte-icons/fa";
 export let title = "";
 export let open = false;
 export let content = "";
@@ -16,9 +19,30 @@ export let onCancelCallback = void 0;
 export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
+  if (isDeviceSmallerThan("sm")) {
+    $toolsActionsOperations = {
+      opver: 1,
+      operations: [
+        {
+          caption: "Modal",
+          operations: [
+            {
+              icon: FaTimes,
+              action: (f) => {
+                on_cancel(void 0);
+              },
+              fab: "M00",
+              tbr: "A"
+            }
+          ]
+        }
+      ]
+    };
+  }
 }
 export function hide() {
   open = false;
+  $toolsActionsOperations = [];
 }
 let root;
 afterUpdate(
@@ -40,7 +64,7 @@ function on_ok(event) {
     close_callback("OK");
 }
 function on_cancel(event) {
-  open = false;
+  hide();
   if (onCancelCallback)
     onCancelCallback();
   if (close_callback)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -26,7 +26,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.8.4",
+    "@humandialog/auth.svelte": "^1.8.5",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",

package/stores.d.ts

@@ -27,6 +27,7 @@ export const contextTypesStore: import("svelte/store").Writable<{
 }>;
 export const contextToolbarOperations: import("svelte/store").Writable<never[]>;
 export const pageToolbarOperations: import("svelte/store").Writable<never[]>;
+export const toolsActionsOperations: import("svelte/store").Writable<never[]>;
 export const page_title: import("svelte/store").Writable<string>;
 export const nav_titles: import("svelte/store").Writable<{}>;
 export const mainContentPageReloader: import("svelte/store").Writable<number>;

package/stores.js

@@ -8,6 +8,7 @@ export const context_info_store = writable({data: '', sel: ''})
 export const contextTypesStore = writable({focused:'', data: null, sel: null})
 export const contextToolbarOperations = writable([]);
 export const pageToolbarOperations = writable([]);
+export const toolsActionsOperations = writable([]);
 export const page_title = writable('');
 export const nav_titles = writable({});
 export const mainContentPageReloader = writable(1);
@@ -120,9 +121,11 @@ export function restore_defults()
 
 export function toggle_sidebar(index)
 {
-    previously_visible_sidebar = get(main_sidebar_visible_store);
+    const prevVisile = get(main_sidebar_visible_store);
+    if(prevVisile != '*')
+        previously_visible_sidebar = prevVisile;
 
-    console.log('toggle_sidebar', previously_visible_sidebar, '=>', index)
+    //console.log('toggle_sidebar', previously_visible_sidebar, '=>', index)
 
     if(get(main_sidebar_visible_store) == index)
         main_sidebar_visible_store.set('*')
@@ -132,7 +135,8 @@ export function toggle_sidebar(index)
 
 export function auto_hide_sidebar()
 {
-    console.log('auto_hide_sidebar')
+    
+    //console.log('auto_hide_sidebar')
     //console.log("sw: " + window.innerWidth, SCREEN_SIZES.lg)
     if(window.innerWidth < SCREEN_SIZES.lg)
         hide_sidebar()
@@ -140,14 +144,21 @@ export function auto_hide_sidebar()
 
 export function hide_sidebar()
 {
-    previously_visible_sidebar = get(main_sidebar_visible_store);
+    
+    const prevVisile = get(main_sidebar_visible_store);
+    if(prevVisile != '*')
+        previously_visible_sidebar = prevVisile;
+
     main_sidebar_visible_store.set('*')
     //console.log("auto_hide_sidebar:" + get(main_sidebar_visible_store))
 }
 
 export function show_sidebar(index)
 {
-    previously_visible_sidebar = get(main_sidebar_visible_store);
+    const prevVisile = get(main_sidebar_visible_store);
+    if(prevVisile != '*')
+        previously_visible_sidebar = prevVisile;
+
     main_sidebar_visible_store.set(index)
 }
 

package/updates.js

@@ -122,6 +122,7 @@ update_request_ticket.subscribe(async (v) => {
             changes.push(value.item);
         });
 
+        
         /*
         const res = await reef.post('/Push', { Items: changes }, onErrorShowAlert);
 

package/utils.d.ts

@@ -46,5 +46,6 @@ export let currentEditable: null;
 export namespace UI {
     const operations: null;
     const fab: null;
+    const navigator: null;
 }
 export const NAVIGATION_PAGE_PATH: "/";

package/utils.js

@@ -350,6 +350,7 @@ export function editable(node, params)
         
         return {
             destroy() {
+
                 node.removeEventListener("edit", edit_listener)
                 node.classList.remove("editable")
                 node.contentEditable = "false"
@@ -650,7 +651,8 @@ export function isOnScreenKeyboardVisible()
 
 export const UI = {
     operations: null,
-    fab: null
+    fab: null,
+    navigator: null
 }
 
 export const NAVIGATION_PAGE_PATH = '/'