@humandialog/forms.svelte 1.2.7 → 1.3.2

package/components/document/internal/palette.svelte

@@ -27,7 +27,7 @@ export function showAsToolbox(rect) {
   toolboxX = margin;
   toolboxY = rect.bottom + margin;
   toolboxY += window.scrollY;
-  css_style = `position: absolute; left:${toolboxX}px; top:${toolboxY}px;`;
+  css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
   dispatch("palette_shown");
 }
 let paletteElement;
@@ -84,14 +84,16 @@ export function filter(key) {
   let was_any_items_before = filtered_commands.length > 0;
   filtered_commands = [];
   commands.forEach((cmd) => {
-    if (cmd.caption.toLowerCase().includes(key.toLowerCase()))
+    if (cmd.separator)
+      filtered_commands.push(cmd);
+    else if (cmd.caption.toLowerCase().includes(key.toLowerCase()))
       filtered_commands.push(cmd);
     else if (cmd.tags && cmd.tags.toLowerCase().includes(key.toLowerCase()))
       filtered_commands.push(cmd);
   });
   if (!current_command || filtered_commands.every((v) => v != current_command)) {
     if (filtered_commands.length)
-      current_command = filtered_commands[0];
+      current_command = get_operation_or_next_valid(0);
     else
       current_command = null;
   }
@@ -102,25 +104,59 @@ export function filter(key) {
 export function get_filtered_commands() {
   return filtered_commands;
 }
+function get_operation_or_next_valid(idx) {
+  let op = filtered_commands[idx];
+  while (op.separator && idx < filtered_commands.length - 1) {
+    idx++;
+    op = filtered_commands[idx];
+  }
+  if (op.separator)
+    return null;
+  else
+    return op;
+}
+function get_operation_or_prev_valid(idx) {
+  let op = filtered_commands[idx];
+  while (op.separator && idx > 0) {
+    idx--;
+    op = filtered_commands[idx];
+  }
+  if (op.separator)
+    return null;
+  else
+    return op;
+}
 export function navigate_up() {
   if (!current_command) {
-    if (filtered_commands.length > 0)
-      update_current_command(filtered_commands[filtered_commands.length - 1]);
+    if (filtered_commands.length > 0) {
+      let op = get_operation_or_prev_valid(filtered_commands.length - 1);
+      if (op)
+        update_current_command(op);
+    }
     return;
   }
   let idx = filtered_commands.findIndex((c) => c == current_command);
-  if (idx > 0)
-    update_current_command(filtered_commands[idx - 1]);
+  if (idx > 0) {
+    let op = get_operation_or_prev_valid(idx - 1);
+    if (op)
+      update_current_command(op);
+  }
 }
 export function navigate_down() {
   if (!current_command) {
-    if (filtered_commands.length > 0)
-      update_current_command(filtered_commands[0]);
+    if (filtered_commands.length > 0) {
+      let op = get_operation_or_next_valid(0);
+      if (op)
+        update_current_command(op);
+    }
     return;
   }
   let idx = filtered_commands.findIndex((c) => c == current_command);
-  if (idx < filtered_commands.length - 1)
-    update_current_command(filtered_commands[idx + 1]);
+  if (idx < filtered_commands.length - 1) {
+    let op = get_operation_or_next_valid(idx + 1);
+    if (op)
+      update_current_command(op);
+  }
 }
 async function execute_mouse_click(on_choice) {
   if (!visible)
@@ -136,9 +172,12 @@ let rows = [];
 function update_current_command(cmd) {
   let prev_current = current_command;
   if (prev_current)
-    rows.find((r) => r.cmd == prev_current).is_highlighted = false;
-  if (cmd)
-    rows.find((r) => r.cmd == cmd).is_highlighted = true;
+    rows.find((r) => !!r && r.cmd == prev_current).is_highlighted = false;
+  if (cmd) {
+    const row = rows.find((r) => !!r && r.cmd == cmd);
+    row.is_highlighted = true;
+    row?.scrollToView();
+  }
   current_command = cmd;
 }
 function buttonMousedown(e) {
@@ -163,7 +202,7 @@ function mousemove(e) {
     const touch = e.touches.item(0);
     const trackDelta = new DOMPoint(touch.clientX - beforeTrackingClient.x, touch.clientY - beforeTrackingClient.y);
     toolboxX = beforeTrackingPos.x + trackDelta.x;
-    css_style = `position: absolute; left:${toolboxX}px; top:${toolboxY}px;`;
+    css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
     e.stopPropagation();
   }
 }
@@ -172,6 +211,12 @@ function mouseup(e) {
   beforeTrackingClient = null;
   beforeTrackingPos = null;
 }
+function isRowActive(cmd) {
+  if (cmd.is_active)
+    return cmd.is_active();
+  else
+    return false;
+}
 </script>
 
 {#if isToolbox}
@@ -186,47 +231,62 @@ function mouseup(e) {
             bind:this={paletteElement}>
         {#if filtered_commands && filtered_commands.length}
             {#each filtered_commands as cmd, idx (cmd.caption)}
-                {@const id = "cpi_" + idx}
-                {@const mobile = isDeviceSmallerThan("sm")}
-                {@const icon_placeholder_size = mobile ? 12 : 10}
-                <button class="font-medium m-0 py-2 pr-4 text-lg sm:text-sm w-full text-left flex flex-row cursor-context-menu focus:outline-none"
-                        {id}
-                        bind:this={rows[idx]}
-                        on:click={ () => { execute_mouse_click(cmd.on_choice); }}
-                        on:mousedown={buttonMousedown}>
-                
-                    <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
-                        {#if cmd.icon}
-                            {@const cc = mobile ? 7 : 6}
-                            {@const default_icon_size = icon_placeholder_size - cc}
-                            {@const icon_size = cmd.icon_size ? cmd.icon_size : default_icon_size}
-                            <Icon size={icon_size} component={cmd.icon}/>
-                        {/if}
-                    </div>
-                </button>
+                {#if !cmd.separator}
+                    {@const id = "cpi_" + idx}
+                    {@const mobile = isDeviceSmallerThan("sm")}
+                    {@const icon_placeholder_size = mobile ? 12 : 10}
+                    {@const active=isRowActive(cmd)}
+                    <button class="font-medium m-0 py-2 mr-4 text-lg sm:text-sm w-full text-left flex flex-row cursor-context-menu focus:outline-none"
+                            class:dark:bg-stone-700={active}
+                            class:bg-stone-300={active}
+                            {id}
+                            bind:this={rows[idx]}
+                            on:click={ () => { execute_mouse_click(cmd.on_choice); }}
+                            on:mousedown={buttonMousedown}>
+                    
+                        <div class="flex items-center justify-center mt-1 sm:mt-0.5" style:width={`${icon_placeholder_size*0.25}rem`}>
+                            {#if cmd.icon}
+                                {@const cc = mobile ? 7 : 6}
+                                {@const default_icon_size = icon_placeholder_size - cc}
+                                {@const icon_size = cmd.icon_size ? cmd.icon_size : default_icon_size}
+                                <Icon size={icon_size} component={cmd.icon}/>
+                            {/if}
+                        </div>
+                    </button>
+                {/if}
             {/each}
         {/if}
     </menu>
 {:else}
-    <div    class="not-prose 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" 
+    <div    id="__hd_FormattingPalette"
+            class="not-prose 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" 
             hidden={!visible}
             style={css_style}
             bind:this={paletteElement}>
         {#if filtered_commands && filtered_commands.length}
             {#each filtered_commands as cmd, idx (cmd.caption)}
-                {@const id = "cpi_" + idx}
-                <Pallete_row    {id}
-                                cmd={cmd}
-                                is_highlighted={cmd == current_command}
-                                on:click={ () => { execute_mouse_click(cmd.on_choice); }}
-                                on:mousemove={ () => { on_mouse_over(cmd); }}
-                                on:mousedown={buttonMousedown}
-                                bind:this={rows[idx]}
-                                />
+                {#if cmd.separator}
+                    {#if idx>0 && idx<filtered_commands.length-1}   <!-- not first or last place -->
+                        <hr class="mx-4 my-1 border-stone-300 dark:border-stone-700"/>
+                    {/if}
+                {:else}
+                    {@const id = "cpi_" + idx}
+                    {@const active=isRowActive(cmd)}
+                    <Pallete_row    {id}
+                                    cmd={cmd}
+                                    is_highlighted={cmd == current_command}
+                                    on:click={ () => { execute_mouse_click(cmd.on_choice); }}
+                                    on:mousemove={ () => { on_mouse_over(cmd); }}
+                                    on:mousedown={buttonMousedown}
+                                    bind:this={rows[idx]}
+                                    {active}
+                                    />
+                {/if}
             {/each}
         {:else}
             <p class="text-sm text-stone-500">No results</p>
         {/if}
 
     </div>
-{/if}
+{/if}
+

package/components/inputbox.ltop.svelte.d.ts

@@ -3,11 +3,11 @@
 /** @typedef {typeof __propDef.slots}  InputboxSlots */
 export default class Inputbox extends SvelteComponentTyped<{
     [x: string]: any;
-    self?: null | undefined;
-    invalid?: boolean | undefined;
-    label?: string | undefined;
     a?: string | undefined;
+    label?: string | undefined;
     s?: string | undefined;
+    self?: null | undefined;
+    invalid?: boolean | undefined;
     placeholder?: string | undefined;
     context?: string | undefined;
     typename?: string | undefined;
@@ -30,11 +30,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        self?: null | undefined;
-        invalid?: boolean | undefined;
-        label?: string | undefined;
         a?: string | undefined;
+        label?: string | undefined;
         s?: string | undefined;
+        self?: null | undefined;
+        invalid?: boolean | undefined;
         placeholder?: string | undefined;
         context?: string | undefined;
         typename?: string | undefined;

package/components/simple.table.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Simple extends SvelteComponentTyped<{
     focus?: boolean | undefined;
     select?: string | undefined;
-    self?: null | undefined;
     nav?: boolean | undefined;
+    self?: null | undefined;
     context?: string | undefined;
     collection?: string | undefined;
     objects?: null | undefined;
@@ -24,8 +24,8 @@ declare const __propDef: {
     props: {
         focus?: boolean | undefined;
         select?: string | undefined;
-        self?: null | undefined;
         nav?: boolean | undefined;
+        self?: null | undefined;
         context?: string | undefined;
         collection?: string | undefined;
         objects?: null | undefined;

package/components/table/_template.table.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Template extends SvelteComponentTyped<{
     focus?: boolean | undefined;
     select?: string | undefined;
-    self?: null | undefined;
     nav?: boolean | undefined;
+    self?: null | undefined;
     context?: string | undefined;
     collection?: string | undefined;
     objects?: null | undefined;
@@ -32,8 +32,8 @@ declare const __propDef: {
     props: {
         focus?: boolean | undefined;
         select?: string | undefined;
-        self?: null | undefined;
         nav?: boolean | undefined;
+        self?: null | undefined;
         context?: string | undefined;
         collection?: string | undefined;
         objects?: null | undefined;

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

@@ -3,8 +3,8 @@
 /** @typedef {typeof __propDef.slots}  TileSlots */
 export default class Tile extends SvelteComponentTyped<{
     [x: string]: any;
-    label?: string | undefined;
     a?: string | undefined;
+    label?: string | undefined;
     c?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        label?: string | undefined;
         a?: string | undefined;
+        label?: string | undefined;
         c?: string | undefined;
     };
     events: {

package/desk.svelte

@@ -20,7 +20,7 @@
             alerts } from './stores.js'
     
     //import { AuthorizedView} from '@humandialog/auth.svelte'
-    import { handleSelect, isDeviceSmallerThan, removeAt } from './utils'
+    import { handleSelect, isDeviceSmallerThan, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
     import { afterUpdate, onMount } from 'svelte';
     
     export let layout;
@@ -92,7 +92,8 @@
     let bottom_bar_visibility = "hidden"
     let bottom_bar_visible = false
     let lg_main_sidebar_height = ""
-    let fab_visibility = "hidden"
+    let fab_base_visibility = "hidden"
+    let fab_visibility = fab_base_visibility;
     let fab_bottom = "bottom-0"
                                 
     let content_top = ""
@@ -108,14 +109,14 @@
         if(tools_visible)
         {
             tools_visibility = "hidden sm:block sm:fixed"
-            fab_visibility = "fixed sm:hidden"
+            fab_base_visibility = "fixed sm:hidden"
 
             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:h-[calc(100vh-280px)]`
             else    
-                content_height = `h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]` 
+                content_height = `min-h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]` 
                
         }
         else
@@ -123,9 +124,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:h-[calc(100vh-240px)]`           
             else
-                content_height = `h-[calc(100vh-50px)] sm:h-screen`
+                content_height = `min-h-[calc(100vh-50px)] sm:h-screen`
         }
         
         
@@ -143,6 +144,7 @@
             fab_bottom = "bottom-0"
         }
         
+        fab_visibility = fab_base_visibility;
     }
 
     //$: screen.width = innerWidth;  
@@ -155,7 +157,16 @@
 
     onMount( () => {
         window.addEventListener('resize', on_resize)
+        
+        const vp = window.visualViewport;
+        vp?.addEventListener('resize', onViewportResize)
+        setViewportHeight(vp)
+
+        document.addEventListener('selectionchange', onSelectionChanged)
+
         return () => {
+            document.removeEventListener('selectionchange', onSelectionChanged)
+            vp?.removeEventListener('resize', onViewportResize)
             window.removeEventListener('resize', on_resize)
             
             // remove dark class form body element when we leave Layout view
@@ -169,6 +180,58 @@
         auto_hide_sidebar();
     }
 
+    let minViewportHeight = 0;
+    let maxViewportHeight = 0;
+    function setViewportHeight(vp)
+    {
+        if(!vp)
+            return;
+
+        const h = vp.height
+        if(!minViewportHeight) {
+            minViewportHeight = h }
+        else if(minViewportHeight > h) {
+            minViewportHeight = h }
+
+        if(!maxViewportHeight) {
+            maxViewportHeight = h; }
+        else if(maxViewportHeight < h) {
+            maxViewportHeight = h }
+    }
+
+    function onViewportResize(e)
+    {
+        const vp = window.visualViewport;
+        setViewportHeight(vp)
+
+        determineFABVisibility();
+    }
+
+    function onSelectionChanged(e)
+    {
+        determineFABVisibility();
+    }
+
+    function determineFABVisibility()
+    {
+        if(isOnScreenKeyboardVisible())
+        {
+            fab_visibility = 'hidden'
+        }
+        else
+        {
+            fab_visibility = fab_base_visibility;
+        }
+    }
+
+    let operationsComponent
+    let fabComponent;
+    afterUpdate( () =>
+    {
+        UI.operations = operationsComponent
+        UI.fab = fabComponent;          
+    })
+
 </script>
 
 <svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight />
@@ -183,7 +246,8 @@
                 on:click={handleSelect} 
                 on:contextmenu={handleSelect}>
 
-            <div class="bg-white dark:bg-stone-900 dark:text-white  overflow-x-clip overflow-y-clip  h-screen">    
+            <div class="bg-white dark:bg-stone-900 dark:text-white  overflow-x-clip 
+                        sm:overflow-y-clip  min-h-screen sm:h-screen">    
                 <!--###########################################################-->
                 <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->
                 <!--###########################################################-->
@@ -246,11 +310,11 @@
                                     {lg_content_area_horizontal_dim}
                                     z-10 overflow-hidden " >
 
-                        <Operations/>
+                        <Operations bind:this={operationsComponent} />
                     </div>
 
                     <div class="{fab_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-10">
-                        <Fab/>
+                        <Fab bind:this={fabComponent}/>
                     </div>
 
                     <!--#######################################################-->
@@ -261,9 +325,9 @@
                             class="relative left-0  w-screen  
                                     sm:left-[40px]  sm:w-[calc(100vw-40px)]    
                                     {content_top}
-                                    {content_height}
                                     {lg_content_area_horizontal_dim}
-                                    z-0 overflow-x-hidden overflow-y-auto" 
+                                    z-0 overflow-x-hidden 
+                                    {content_height} sm:overflow-y-auto" 
                                     >
                             <Configurable config={layout.mainContent} min_h_class="min-h-full">
                                 <div slot='alt'></div>
@@ -287,7 +351,7 @@
                     <!--##########################################################-->
                     <!--##  ALERTS ###############################################-->
                     <!--##########################################################-->
-                    <section class="absolute left-2 sm:left-auto sm:right-2 bottom-2 flex flex-col gap-2">
+                    <section class="fixed left-2 sm:left-auto sm:right-2 bottom-2 flex flex-col gap-2">
                         {#if $alerts && $alerts.length > 0}
                             {#each $alerts as alert, idx}
                                 <Alert class="bg-red-900/40  shadow-lg shadow-stone-400 dark:shadow-black flex flex-row">

package/index.d.ts

@@ -53,7 +53,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 } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible } from './utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/index.js

@@ -59,7 +59,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 } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible } from './utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";

package/modal.svelte

@@ -112,7 +112,9 @@ function on_cancel(event) {
                           on:click={on_cancel}>
                           {cancelCaption}</button>
             {:else if mode == Custom}
+              {#if $$slots.footer}
                 <slot name="footer"/>
+              {/if}
             {/if}
           </div>
         </div>

package/operations.svelte

@@ -40,26 +40,35 @@ function on_click(e, operation) {
 function mousedown(e) {
   e.preventDefault();
 }
+function isOperationActivated(operation) {
+  if (operation.activeFunc)
+    return operation.activeFunc();
+  else
+    return operation.active ?? false;
+}
 </script>
 
-<section class="flex flex-row no-print h-10 bg-stone-600 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs ">
+<section class="flex flex-row no-print h-10 bg-stone-600 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs whitespace-nowrap">
     <div    class="flex flex-row"
             class:flex-row-reverse={mobile}>
         
         {#each leftOperations as operation}
             {#if !operation.separator}
+                {@const isActive=isOperationActivated(operation)}
                 {#if operation.toolbox}
                     {#each operation.toolbox as operation}
                         <button type="button" 
-                                class="py-2.5 px-5 
-                                text-xs font-medium text-stone-100 dark:text-stone-300 dark:hover:text-white 
+                                class="py-2.5 px-4 
+                                text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
                                 hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
                                 border-stone-200 focus:outline-none dark:border-stone-600
                                 inline-flex items-center"
+                                class:bg-stone-700={isActive}
+                                class:dark:bg-stone-800={isActive}
                                 on:click={(e) => {on_click(e, operation)}}
                                 on:mousedown={mousedown}>
                             {#if operation.icon}
-                                <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
+                                <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
                             {/if}
                             {#if operation.caption}
                                 <span>{operation.caption}</span>
@@ -69,21 +78,25 @@ function mousedown(e) {
                 {:else}
                 
                     <button type="button" 
-                            class="py-2.5 px-5 
-                            text-xs font-medium text-stone-100 dark:text-stone-300 dark:hover:text-white 
+                            class="py-2.5 px-4
+                            text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
                             hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
                             border-stone-200 focus:outline-none dark:border-stone-600
                             inline-flex items-center"
+                            class:bg-stone-700={isActive}
+                            class:dark:bg-stone-800={isActive}
                             on:click={(e) => {on_click(e, operation)}}
                             on:mousedown={mousedown}>
                         {#if operation.icon}
-                            <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
+                            <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
                         {/if}
                         {#if operation.caption}
                             <span>{operation.caption}</span>
                         {/if}
                     </button>
-                {/if}    
+                {/if} 
+            {:else}
+                <!--div class="border-l my-2"></div-->
             {/if}
         {/each}
     </div>
@@ -91,17 +104,19 @@ function mousedown(e) {
     <div class="ml-auto flex flex-row">
         {#each rightOperations as operation}
             {#if !operation.separator}
-
+            {@const isActive=isOperationActivated(operation)}
                 <button type="button" 
-                        class="py-2.5 px-5 
-                        text-xs font-medium text-stone-100 dark:text-stone-300 dark:hover:text-white 
+                        class="py-2.5 px-4 
+                        text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
                         hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
                         border-stone-200 focus:outline-none dark:border-stone-600
                         inline-flex items-center"
+                        class:bg-stone-700={isActive}
+                        class:dark:bg-stone-800={isActive}
                         on:click={(e) => {on_click(e, operation)}}
                         on:mousedown={mousedown}>
                     {#if operation.icon}
-                        <div class="w-3 h-3 mr-1"><svelte:component this={operation.icon}/></div>
+                        <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
                     {/if}
                     {#if operation.caption}
                         <span>{operation.caption}</span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.2.7",
+  "version": "1.3.2",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -29,6 +29,8 @@
     "@humandialog/auth.svelte": "^1.8.3",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-image": "^2.11.0",
+    "@tiptap/extension-link": "^2.11.3",
+    "@tiptap/extension-underline": "^2.11.3",
     "@tiptap/pm": "^2.11.0",
     "@tiptap/starter-kit": "^2.11.0",
     "@tiptap/suggestion": "^2.11.0",

package/page.svelte.d.ts

@@ -3,8 +3,8 @@
 /** @typedef {typeof __propDef.slots}  PageSlots */
 export default class Page extends SvelteComponentTyped<{
     [x: string]: any;
-    self?: null | undefined;
     title?: string | undefined;
+    self?: null | undefined;
     context?: string | undefined;
     typename?: string | undefined;
     c?: string | undefined;
@@ -26,8 +26,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        self?: null | undefined;
         title?: string | undefined;
+        self?: null | undefined;
         context?: string | undefined;
         typename?: string | undefined;
         c?: string | undefined;