@humandialog/forms.svelte 1.4.6 → 1.4.7

package/components/Fab.svelte

@@ -1,10 +1,10 @@
 <script>import { each } from "svelte/internal";
-import { contextToolbarOperations, pageToolbarOperations, contextItemsStore, toolsActionsOperations } from "../stores.js";
+import { contextToolbarOperations, pageToolbarOperations, contextItemsStore, toolsActionsOperations, fabCollapsed } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
-import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle, FaEllipsisV } from "svelte-icons/fa/";
+import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle, FaEllipsisV, FaRegDotCircle, FaDotCircle } from "svelte-icons/fa/";
 import { isDeviceSmallerThan } from "../utils.js";
 $:
-  setupCurrentContextOperations($pageToolbarOperations, $contextToolbarOperations, $toolsActionsOperations);
+  setupCurrentContextOperations($pageToolbarOperations, $contextToolbarOperations, $toolsActionsOperations, $fabCollapsed);
 let operations = [];
 let mainOperation = null;
 let secondaryOperation = null;
@@ -83,6 +83,16 @@ function setupCurrentContextOperations(...args) {
         }
       });
     });
+    if (operations.length > 1) {
+      if (!operations.find((op) => op.fab == "M10")) {
+        const collapseFAB = {
+          icon: $fabCollapsed ? FaRegDotCircle : FaDotCircle,
+          fab: "M10",
+          action: (f) => toggleExpandAdditionalOperations()
+        };
+        operations = [...operations, collapseFAB];
+      }
+    }
   } else {
     if (operations.length > 0)
       mainOperation = operations[0];
@@ -105,6 +115,9 @@ function setupCurrentContextOperations(...args) {
       isExpandable = false;
   }
 }
+function toggleExpandAdditionalOperations() {
+  $fabCollapsed = !$fabCollapsed;
+}
 export function activateMainOperation() {
   const mainOperationButton = document.getElementById("__hd_fab_mainOperation");
   if (!mainOperationButton)
@@ -227,7 +240,14 @@ function calculatePosition(operation) {
 function operationVisible(operation) {
   if (!operation.fab)
     return false;
-  return true;
+  if ($fabCollapsed) {
+    if (operation.fab == "M00")
+      return true;
+    if (operation.fab == "M10")
+      return true;
+    return false;
+  } else
+    return true;
 }
 </script>
 
@@ -238,12 +258,12 @@ function operationVisible(operation) {
                 {@const position = calculatePosition(operation)}
                 {#if position}
                     <button
-                        class="text-stone-500 bg-stone-200/70 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300
-                                font-medium rounded-full text-sm text-center
+                        class=" text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                                focus:outline-none font-medium rounded-full text-sm text-center
+                                dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                                focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
                                 w-[30px] h-[30px]
-                                fixed m-0
-                                dark:text-stone-500
-                                dark:bg-stone-700/80 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+                                fixed m-0                            
                                 flex items-center justify-center
                                 disable-dbl-tap-zoom
                                 cursor-pointer z-40"

package/components/Floating_container.svelte

@@ -22,7 +22,7 @@ export async function show(around, _toolbar, _props = {}) {
   }
   const was_visible = visible;
   if (!was_visible && toolbar == _toolbar && internalElement && internalElement.reload) {
-    internalElement.reload();
+    internalElement.reload(_props);
   }
   visible = true;
   toolbar = _toolbar;

package/components/combo/combo.source.svelte

@@ -16,4 +16,7 @@ definition.element_key = key;
 definition.element_name = name;
 definition.element_avatar = avatar;
 definition.element_icon = icon;
+export function updateObjects(objects2) {
+  definition.collection = objects2;
+}
 </script>

package/components/combo/combo.source.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         name?: string | undefined;
         avatar?: string | undefined;
         icon?: string | undefined;
+        updateObjects?: ((objects: object[]) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,5 +20,6 @@ export type ComboProps = typeof __propDef.props;
 export type ComboEvents = typeof __propDef.events;
 export type ComboSlots = typeof __propDef.slots;
 export default class Combo extends SvelteComponentTyped<ComboProps, ComboEvents, ComboSlots> {
+    get updateObjects(): (objects: object[]) => void;
 }
 export {};

package/components/combo/combo.svelte

@@ -630,13 +630,13 @@ function on_focus_out(e) {
             {#if true || !is_dropdown_open}
                 {#if icon && sel_item}
                     {#if sel_item.Color}
-                        <Icon size={5} circle={true} color={sel_item.Color}/>
+                        <Icon s="xl" circle={true} color={sel_item.Color}/>
                     {:else if sel_item.Icon}
-                        <Icon size={4} component={sel_item.Icon}/>
+                        <Icon s="md" component={sel_item.Icon}/>
                     {:else if sel_item.Icon == null}
                         <div class="w-4 h-4"></div>
                     {:else}
-                        <Icon size={5} circle={true} symbol={sel_item.Avatar} label={sel_item.Name}/>
+                        <Icon s="xl" circle={true} symbol={sel_item.Avatar} label={sel_item.Name}/>
                     {/if}
                 {/if}
             {/if}
@@ -701,17 +701,17 @@ function on_focus_out(e) {
 
                             {#if icon}
                                 {#if item.Color}
-                                    <Icon size={4} circle={true} color={item.Color}/>
+                                    <Icon s="md" circle={true} color={item.Color}/>
                                 {:else if item.Avatar} 
-                                    <Icon size={4} circle={true} symbol={item.Avatar}/>
+                                    <Icon s="md" circle={true} symbol={item.Avatar}/>
                                 {:else if item.Icon}
-                                    <Icon size={4} component={item.Icon}/>
+                                    <Icon s="md" component={item.Icon}/>
                                 {:else if item.Icon == null}
                                     <div class="w-4 h-4"></div>
                                 {:else if item.Name}
-                                    <Icon size={4} circle={true} label={item.Name}/>
+                                    <Icon s="md" circle={true} label={item.Name}/>
                                 {:else}
-                                    <Icon size={4} circle={true}/>
+                                    <Icon s="md" circle={true}/>
                                 {/if}
                             {/if}
                             <h4 class="ml-2">

package/components/contextmenu.svelte

@@ -365,14 +365,14 @@ function calculateBackground(is_highlighted, active) {
                     {#if operation.icon}
                         {@const cc = mobile ? 7 : 6}
                         {@const icon_size = icon_placeholder_size - cc}
-                        <Icon size={icon_size} component={operation.icon}/>
+                        <Icon s="md" component={operation.icon}/>
                     {:else}
                         {@const cc = mobile ? 7 : 6}
                         {@const icon_size = icon_placeholder_size - cc}
-                        <div style="width: {icon_size*0.25}rem; height: {icon_size*0.25}rem;"></div>
+                        <div class="w-4 h-4"></div>
                     {/if}
                 </div>
-                <div class="">
+                <div class="flex items-center ">
                     <p> {operation.caption}</p>
                     {#if operation.description}
                         {@const shortcut_width_px = operation.shortcut ? 80 : 0}

package/components/document/editor.svelte

@@ -958,6 +958,18 @@ export function isActiveNormal() {
 export function isActiveHeading(level) {
   return editor?.isActive("heading", { level });
 }
+export function isActiveH1() {
+  return editor?.isActive("heading", { level: 1 });
+}
+export function isActiveH2() {
+  return editor?.isActive("heading", { level: 2 });
+}
+export function isActiveH3() {
+  return editor?.isActive("heading", { level: 3 });
+}
+export function isActiveH4() {
+  return editor?.isActive("heading", { level: 4 });
+}
 export function isActiveCode() {
   return editor?.isActive("CodeBlock");
 }

package/components/document/editor.svelte.d.ts

@@ -69,6 +69,10 @@ declare const __propDef: {
         isActiveStrikethrough?: (() => any) | undefined;
         isActiveNormal?: (() => any) | undefined;
         isActiveHeading?: ((level: any) => any) | undefined;
+        isActiveH1?: (() => any) | undefined;
+        isActiveH2?: (() => any) | undefined;
+        isActiveH3?: (() => any) | undefined;
+        isActiveH4?: (() => any) | undefined;
         isActiveCode?: (() => any) | undefined;
         isActiveComment?: (() => any) | undefined;
         isActiveQuote?: (() => any) | undefined;
@@ -138,6 +142,10 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get isActiveStrikethrough(): () => any;
     get isActiveNormal(): () => any;
     get isActiveHeading(): (level: any) => any;
+    get isActiveH1(): () => any;
+    get isActiveH2(): () => any;
+    get isActiveH3(): () => any;
+    get isActiveH4(): () => any;
     get isActiveCode(): () => any;
     get isActiveComment(): () => any;
     get isActiveQuote(): () => any;

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

@@ -5,8 +5,6 @@ export let cmd;
 export let width_px = 400;
 export let is_highlighted = false;
 export let active = false;
-let icon_size = cmd.icon_size ? cmd.icon_size : 4;
-let icon_placeholder_size = icon_size + 4;
 let cl = $$props.class ?? "";
 $:
   active_class = calculateBackground(is_highlighted, active);
@@ -40,7 +38,7 @@ export function scrollToView() {
      bind:this={element}>
     <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}/>
+            <Icon s="md" component={cmd.icon}/>
         {/if}
     </div>
     

package/components/document/internal/palette.svelte

@@ -278,7 +278,7 @@ function isRowActive(cmd) {
                                 {@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}/>
+                                <Icon s="md" component={cmd.icon}/>
                             {/if}
                         </div>
                     </button>

package/components/icon.svelte

@@ -6,9 +6,42 @@ export let img = "";
 export let label = "";
 export let symbol = "";
 export let color = "";
-export let size = void 0;
+export let s = "md";
 export let bg = "";
 export let circle = false;
+let size = 4;
+switch (s) {
+  case "5xl":
+    size = 12;
+    break;
+  case "4xl":
+    size = 9;
+    break;
+  case "3xl":
+    size = 7.5;
+    break;
+  case "2xl":
+    size = 6;
+    break;
+  case "xl":
+    size = 5;
+    break;
+  case "lg":
+    size = 4.5;
+    break;
+  case "md":
+    size = 4;
+    break;
+  case "base":
+    size = 4;
+    break;
+  case "sm":
+    size = 3.5;
+    break;
+  case "xs":
+    size = 3;
+    break;
+}
 let additional_class = $$restProps.class ?? "";
 let id = $$restProps.id ?? "";
 let _bg;
@@ -58,16 +91,16 @@ $: {
 }
 let style;
 $: {
-  if (size == void 0) {
-    if (!additional_class) {
-      size = 5;
-      let icon_size = `${size * 0.25}rem`;
-      style = `width: ${icon_size}; height: ${icon_size}`;
-    } else
-      style = "";
-  } else {
+  if (!additional_class) {
     let icon_size = `${size * 0.25}rem`;
     style = `width: ${icon_size}; height: ${icon_size}`;
+  } else {
+    if (additional_class.includes("w-") || additional_class.includes("h-"))
+      style = "";
+    else {
+      let icon_size = `${size * 0.25}rem`;
+      style = `width: ${icon_size}; height: ${icon_size}`;
+    }
   }
 }
 </script>

package/components/icon.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         label?: string | undefined;
         symbol?: string | undefined;
         color?: string | undefined;
-        size?: number | undefined;
+        s?: string | undefined;
         bg?: string | undefined;
         circle?: boolean | undefined;
     };
@@ -49,9 +49,9 @@ export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, Ic
     get color(): string | undefined;
     /**accessor*/
     set color(_: string | undefined);
-    get size(): number | undefined;
+    get s(): string | undefined;
     /**accessor*/
-    set size(_: number | undefined);
+    set s(_: string | undefined);
     get bg(): string | undefined;
     /**accessor*/
     set bg(_: string | undefined);

package/components/menu.d.ts

@@ -2,4 +2,5 @@ import Floating_container from './Floating_container.svelte';
 export declare function showMenu(around: DOMRect | DOMPoint, operations: any): void;
 export declare function hideWholeContextMenu(): void;
 export declare function showFloatingToolbar(around: DOMRect | DOMPoint, toolbar: any, props?: {}): Floating_container | null;
+export declare function hideFloatingToolbar(): void;
 export declare function showGridMenu(around: DOMRect | DOMPoint, operations: any): void;

package/components/menu.js

@@ -54,6 +54,12 @@ export function showFloatingToolbar(around, toolbar, props = {}) {
         console.error('what now?');
     return toolbar_component;
 }
+export function hideFloatingToolbar() {
+    if (toolbar_component) {
+        if (toolbar_component.isVisible())
+            toolbar_component.hide();
+    }
+}
 export function showGridMenu(around, operations) {
     showFloatingToolbar(around, Grid, { operations: operations });
 }

package/components/tag.svelte

@@ -7,14 +7,7 @@ export let color;
 export let onRemove = void 0;
 export let onColor = void 0;
 export let s = "sm";
-onMount(() => {
-  if (onColor && rootElement) {
-    rootElement.addEventListener("click", showColorPicker);
-    rootElement.classList.add("cursor-pointer");
-  }
-  return () => {
-  };
-});
+export let onCustomClick = void 0;
 let pr = onRemove ? "pr-1" : "pr-2";
 let font;
 let x_size;
@@ -47,11 +40,32 @@ function onSelectColor(color2) {
   onColor(name, color2);
   colorPicker?.hide();
 }
+function conditionalClick(node, { condition, callback }) {
+  if (condition) {
+    node.addEventListener("click", callback);
+    return {
+      destroy() {
+        node.removeEventListener("click", callback);
+      }
+    };
+  }
+}
+const hasClick = onColor != void 0 || onCustomClick != void 0;
+function handleClick(e) {
+  if (onColor)
+    showColorPicker(e);
+  else if (onCustomClick)
+    onCustomClick(e);
+}
 </script>
 
 <span
 	class=" pl-2 {pr} rounded text-white flex flex-row {color}  items-center"
-	
+	class:cursor-pointer={hasClick}
+	use:conditionalClick={{
+		condition: hasClick, 
+		callback: handleClick
+	}}
 	bind:this={rootElement}>
 	<span class={font}>{name}</span>
 	{#if onRemove}

package/components/tag.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         onRemove?: any | undefined;
         onColor?: any | undefined;
         s?: string | undefined;
+        onCustomClick?: any | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/tags.palette.svelte

@@ -0,0 +1,237 @@
+<script>
+    import Tag from './tag.svelte'
+    import {FaPlus} from 'svelte-icons/fa'
+    import TagColorsPalette from './tag.colors.svelte'
+	import { tick } from 'svelte';
+	import { isDeviceSmallerThan } from '../utils';
+
+    export let usedTags = []
+    export let allTags  = []
+    
+    export let onSelect;
+    export let onNewTag = undefined;
+
+    export let onHide = undefined
+    export let onSizeChanged = undefined
+
+    let allowNewTags = onNewTag != undefined;
+
+    let userClass = $$props.class ?? '';
+
+    const TAGS_PALETTE = 0
+    const COLORS_PALETTE = 1
+    let view = TAGS_PALETTE;
+
+    $: notUsedTags = getNotUsedTags() 
+    $: filteredTags = filterTags(notUsedTags, '')
+
+    export function reload(props)
+    {
+        if(props && props.usedTags)
+            usedTags = props.usedTags
+
+        if(props && props.allTags)
+            allTags = props.allTags
+
+        if(props && props.onSelect)
+            onSelect = props.onSelect
+
+        if(props && props.onNewTag)
+            onNewTag = props.onNewTag
+
+        allowNewTags = onNewTag != undefined;
+
+        view = TAGS_PALETTE;
+        inputText = ''
+        
+        notUsedTags = getNotUsedTags() 
+        filteredTags = filterTags(notUsedTags, '')
+    }
+
+    let gap = 'gap-2';
+    let s = "md"
+    switch(s)
+    {
+    case 'md':
+        gap = 'gap-3 sm:gap-2'
+        break;
+
+    case 'sm':
+        gap = 'gap-2 sm:gap-2'
+        break;
+
+    case 'xs':
+        gap = 'gap-2 sm:gap-1'
+        break;
+    }
+
+    function getNotUsedTags()
+    {
+        let result = allTags.filter(e => {
+            const label = e.label;
+            let idx = usedTags.findIndex(f => f.label == label)
+            if(idx < 0)
+                return true;
+            else
+                return false;
+        });
+
+        return result;
+    }
+
+    function onTagSelected(tag)
+    {
+        if(onSelect)
+            onSelect(tag, tag.label, tag.label)
+    }
+
+    let inputText = '';
+    function onTextInput(e)
+    {
+        filteredTags = filterTags(notUsedTags, inputText)
+
+        // don't know if needed. we'll see
+        //await tick();
+        //if(onSizeChanged)
+        //    onSizeChanged();
+    }
+
+    function filterTags(tags, inputText)
+    {
+        if(!inputText)
+            return [...tags];
+        else
+        {
+            const filterText = inputText.toLowerCase()
+            return tags.filter(e => e.label && e.label.toLowerCase().includes( filterText ))
+        }
+    }
+
+    function onKeyDown(e)
+    {
+        switch(e.key)
+        {
+        case 'Enter':
+            if(filteredTags.length > 0)
+            {
+                inputText = ''
+                onTagSelected(filteredTags[0])
+                if(onHide)
+                    onHide()
+            }
+            else if(allowNewTags)
+            {
+                onAddTag(undefined)
+            }
+            break;
+
+        case 'Escape':
+            if(inputText)
+            {
+                inputText = ''
+                filteredTags = filterTags(notUsedTags, inputText)
+            }
+            else
+            {
+                if(onHide)
+                    onHide()
+            }
+            break;
+        
+        }
+    }
+
+    
+
+    function onTextBlur(e)
+    {
+        if(isDeviceSmallerThan("sm"))   // blur when virtual keyboard is visible means 'OK' button pressed
+        {
+            if((filteredTags.length == 0) && allowNewTags)
+            {
+                onAddTag(undefined)
+            }
+        }
+        else
+        {
+
+        }
+    }
+
+    async function onAddTag(e)
+    {
+        if(inputText && onNewTag)
+        {
+            view = COLORS_PALETTE
+            await tick();
+            if(onSizeChanged)
+                onSizeChanged();
+        }
+        else if(onHide)
+            onHide();
+    }
+
+    function onNewTagColorSelected(color)
+    {
+        if(inputText && onNewTag)
+            onNewTag(inputText, inputText, color)
+        
+        inputText = ''
+
+        if(onHide)
+            onHide();
+    }
+
+</script>
+
+{#if view==TAGS_PALETTE}
+<menu class="{userClass} flex flex-column {gap} flex-wrap mr-1 sm:mr-0 sm:w-72">
+    <p class="flex flex-row {gap} flex-wrap ">
+        {#key filteredTags}
+            {#if filteredTags.length > 0}
+                {#each filteredTags as tag (tag.label)}
+                    <Tag name={tag.label} color={tag.color} {s}
+                        onCustomClick={(e) => onTagSelected(tag)}/>
+                {/each}
+            {:else if allowNewTags}
+                <p>Create tag:</p>
+            {:else}
+                <p>No tags</p>
+            {/if}
+
+        {/key}
+    </p>
+
+    <section class="flex flex-row {gap} w-full">
+
+    <input  type="text" name="text" id="text"
+            autocomplete="off" 
+            class="block bg-stone-100 dark:bg-stone-800 flex-1"
+            bind:value={inputText}
+            on:input={onTextInput}
+            on:blur={onTextBlur}
+            on:keydown={onKeyDown}
+            placeholder="Type to filter or create tag">
+        {#if allowNewTags}
+            <button class="block w-5 h-5 mt-0.5 ml-auto mr-2
+                    text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200
+                    dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600"
+                    class:hidden={inputText.length == 0}
+                    on:click={onAddTag}>
+                <FaPlus/>
+            </button>
+        {/if}
+    </section>
+</menu>
+
+{:else if view == COLORS_PALETTE}
+    <TagColorsPalette onSelect={onNewTagColorSelected}/>
+{/if}
+
+<style>
+
+input:focus {
+    outline: 0px solid transparent;
+  }
+
+  </style>

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

@@ -0,0 +1,38 @@
+/** @typedef {typeof __propDef.props}  TagsProps */
+/** @typedef {typeof __propDef.events}  TagsEvents */
+/** @typedef {typeof __propDef.slots}  TagsSlots */
+export default class Tags extends SvelteComponentTyped<{
+    [x: string]: any;
+    onSelect: any;
+    onHide?: any;
+    onSizeChanged?: any;
+    reload?: ((props: any) => void) | undefined;
+    usedTags?: any[] | undefined;
+    allTags?: any[] | undefined;
+    onNewTag?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get reload(): (props: any) => void;
+}
+export type TagsProps = typeof __propDef.props;
+export type TagsEvents = typeof __propDef.events;
+export type TagsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        onSelect: any;
+        onHide?: any;
+        onSizeChanged?: any;
+        reload?: ((props: any) => void) | undefined;
+        usedTags?: any[] | undefined;
+        allTags?: any[] | undefined;
+        onNewTag?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/tags.svelte

@@ -3,8 +3,10 @@ import Tag from "./tag.svelte";
 import FaPlus from "svelte-icons/fa/FaPlus.svelte";
 import Combo from "./combo/combo.svelte";
 import ComboItem from "./combo/combo.item.svelte";
+import TagsPalette from "./tags.palette.svelte";
 import { contextItemsStore, data_tick_store, contextTypesStore, tagsReloader } from "../stores.js";
 import { informModification, pushChanges } from "../updates.js";
+import { showFloatingToolbar } from "./menu";
 export let tags = "";
 export let getGlobalTags;
 export let self = null;
@@ -67,6 +69,7 @@ function setup(...args) {
 }
 let addComboVisible = false;
 let addCombo;
+let rootElement;
 export async function show(event, hideCallback) {
   if (event) {
     event.stopPropagation();
@@ -79,7 +82,25 @@ export async function show(event, hideCallback) {
     if (hideCallback)
       hideCallback();
   };
-  addCombo?.show(void 0, onAfterCloseCombo);
+  let owner = rootElement;
+  let rect = owner.getBoundingClientRect();
+  if (tagsTable.length == 0) {
+    const m = 15;
+    rect.x -= m;
+    rect.width += 2 * m;
+    rect.y -= m;
+    rect.height += 2 * m;
+  }
+  showFloatingToolbar(
+    rect,
+    TagsPalette,
+    {
+      usedTags: tagsTable,
+      allTags: globalTagsTable,
+      onSelect: onSelectTag,
+      onNewTag: getCreateTagCallback()
+    }
+  );
 }
 function applyChange() {
   if (onSelect)
@@ -97,6 +118,9 @@ function applyChange() {
     changed(value);
 }
 function onSelectTag(itm, key, name) {
+  const idx = tagsTable.findIndex((e) => e.label == key);
+  if (idx >= 0)
+    return;
   tags += `#${key} `;
   tagsTable = decomposeTags(tags, globalTagsTable);
   applyChange();
@@ -106,10 +130,13 @@ function onRemoveTag(tag) {
   tagsTable = decomposeTags(tags, globalTagsTable);
   applyChange();
 }
-function onNewTagCreated(key, name) {
+function onNewTagCreated(key, name, color = "") {
   tags += `#${key} `;
   let globalTags = getGlobalTags();
-  globalTags += `#${key} `;
+  if (color)
+    globalTags += `#${key}:${color} `;
+  else
+    globalTags += `#${key} `;
   globalTagsTable = decomposeTags(globalTags);
   tagsTable = decomposeTags(tags, globalTagsTable);
   applyChange();
@@ -201,17 +228,21 @@ switch (s) {
 }
 </script>
 
-<section class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0">
+<section class="{userClass} flex flex-row {gap} flex-wrap mr-1 sm:mr-0" bind:this={rootElement}>
     <p class="flex flex-row {gap} flex-wrap ">
-        {#each tagsTable as tag}
-            {#if isEditable}
-                <Tag name={tag.label} color={tag.color} {s}
-                    onRemove={(e) => {onRemoveTag(tag.label)}}
-                    onColor={canChangeColor ? onColorizeTag : null}/>
-            {:else}
-                <Tag name={tag.label} color={tag.color} {s}/>
-            {/if}
-        {/each}
+        {#if tagsTable.length > 0}
+            {#each tagsTable as tag}
+                {#if isEditable}
+                    <Tag name={tag.label} color={tag.color} {s}
+                        onRemove={(e) => {onRemoveTag(tag.label)}}
+                        onColor={canChangeColor ? onColorizeTag : null}/>
+                {:else}
+                    <Tag name={tag.label} color={tag.color} {s}/>
+                {/if}
+            {/each}
+        {:else}
+            <!--p>&ZeroWidthSpace;</p-->
+        {/if}
     </p>
 
     {#if isEditable}
@@ -223,7 +254,7 @@ switch (s) {
                 </button>
             {/if}
         {:else}
-            <Combo  compact={true} 
+            <!--Combo  compact={true} 
                     inContext='data'
                     onSelect={onSelectTag}
                     onNewItemCreated={getCreateTagCallback()}
@@ -234,7 +265,7 @@ switch (s) {
                 {#each not_used_tags as tag}
                     <ComboItem key={tag.label}/>
                 {/each}
-            </Combo>
+            </Combo-->
         {/if}
     {/if}
 </section>

package/console.svelte

@@ -9,6 +9,8 @@
     let inputElement;
     let protocol = 'cons';
     let protoButtonBorderClass = ''
+    let history = []
+    let currentHistoryElementIdx = -1
 
     async function onKeyDown(e)
     {
@@ -32,18 +34,74 @@
                     input = input.replace('self', navItem)
             }
 
+            const req = input;
+            input = "";
+
             const apiVer = $session.configuration.api_version;
-            const result = await reef.fetch(`/${protocol}/${apiVer}/${input}`)
+            const result = await reef.fetch(`/${protocol}/${apiVer}/${req}`)
             const res = await result.text();
             prevLines = [...prevLines, res]
-
             
-            input = "";
+            updateHistory(req)
         }
         else if(e.key == 'Esc' || e.key == 'Escape')
         {
             input = "";
         }
+        else if(e.key == 'ArrowUp')
+        {
+            if(history.length > 0)
+            {
+                if(currentHistoryElementIdx < 0)
+                {
+                    currentHistoryElementIdx = history.length-1
+                    input = history[currentHistoryElementIdx]
+                }
+                else if(currentHistoryElementIdx > 0)
+                {
+                    currentHistoryElementIdx--;
+                    input = history[currentHistoryElementIdx]
+                }
+                else
+                {
+                    
+                }
+                moveCursorAtEnd()
+            }
+        }
+        else if(e.key == 'ArrowDown')
+        {
+            if(history.length > 0)
+            {
+                if(currentHistoryElementIdx >= 0)
+                {
+                    currentHistoryElementIdx++
+                    if(currentHistoryElementIdx >= history.length)
+                    {
+                        currentHistoryElementIdx = -1
+                        input = ''
+                    }
+                    else
+                        input = history[currentHistoryElementIdx]
+                }  
+                moveCursorAtEnd()
+            }
+        }
+    }
+
+    
+    function updateHistory(command)
+    {
+        const idx = history.findIndex(c => c == command)
+        if(idx < 0)
+            history.push(command)
+        else
+        {
+            history.splice(idx, 1)
+            history.push(command)
+        }
+
+        currentHistoryElementIdx = -1
     }
 
     function getNav(contextLevel)
@@ -67,9 +125,30 @@
         return navItem;
     }
 
+    function moveCursorAtEnd()
+    {
+        return;
+        setTimeout( () => 
+        {
+            const sel = window.getSelection();
+            if(!sel)
+                return;
+            if(sel.focusNode == inputElement)
+                console.log(sel.focusOffset)    
+            //sel.setPosition(inputElement, input.length)        
+        }, 100)
+    } 
+
     afterUpdate(() =>
     {
         inputElement?.scrollIntoView();
+        
+            //const selection = window.getSelection()
+            //if(selection?.focusNode == inputElement)
+            //{
+            //    selection?.setPosition(inputElement, input.length-1)        
+            //}
+           
     })
 
 

package/desk.svelte

@@ -23,6 +23,7 @@
     import { handleSelect, isDeviceSmallerThan, isOnNavigationPage, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
     import { afterUpdate, onMount } from 'svelte';
     import {location} from 'svelte-spa-router'
+    import {FaCopy, FaTimes} from 'svelte-icons/fa'
     
     export let layout;
 
@@ -457,17 +458,19 @@
                     <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">
-                                    <button class="sm:hidden font-bold  ml-auto"
-                                            on:click={() => {removeAlert(alert)}}>
-                                        x
-                                    </button>
-                                    <p>
+                                <Alert class="bg-red-900/40  shadow-lg shadow-stone-400 dark:shadow-black flex flex-row-reverse sm:flex-row">
+                                    {@const text_max_width = is_small ? '60vw' : '75vw'}
+                                    
+                                    <p class="flex-none truncate" style="max-width: {text_max_width}">
                                         {alert.msg}
                                     </p>
-                                    <button class="hidden sm:block font-bold  ml-auto"
+                                    <button class="block sm:ml-auto w-3 mx-1"
+                                            on:click={() => {navigator.clipboard.writeText(alert.msg)}}>
+                                        <FaCopy/>
+                                    </button>
+                                    <button class="block w-3 mx-1"
                                             on:click={() => {removeAlert(alert)}}>
-                                        x
+                                        <FaTimes/>
                                     </button>
                                 </Alert>    
                             {/each}

package/horizontal.toolbar.svelte

@@ -305,12 +305,12 @@
         {#if definedTabs && definedTabs.length > 0}
             {#each definedTabs as tab}
                 <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click={tab.onclick}>
-                    <Icon class="w-5 h-5" component={tab.icon}/>
+                    <Icon s="xl" component={tab.icon}/>
                 </button>    
             {/each}
         {:else}
             <button class="w-12 sm:w-10 h-full flex justify-center items-center text-stone-300 hover:text-stone-100" on:click|stopPropagation={toggle_navigator}>
-                <Icon class="w-5 h-5" component={icon}/>
+                <Icon s="xl" component={icon}/>
             </button>
         {/if}
     </div>
@@ -324,7 +324,7 @@
         {#if user_is_in_multiple_groups}
             <button class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
                     on:click|stopPropagation={show_groups}>
-                <Icon class="w-5  h-5 " component={FaUsers} />
+                <Icon s="xl" component={FaUsers} />
             </button>
         {/if}
 
@@ -332,7 +332,7 @@
             class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
             on:click|stopPropagation={show_options}>
 
-            <Icon class="w-5  h-5 " component={FaCog} />
+            <Icon s="xl" component={FaCog} />
         </button>
     </div>
 

package/modal.svelte

@@ -107,7 +107,7 @@ function on_cancel(event) {
             <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}
-                    <Icon component={icon} size={6} class="text-stone-700"/>
+                    <Icon component={icon} s="2xl" class="text-stone-700"/>
                 {/if}
               </div>
               <div class="grow mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "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.10",
+    "@humandialog/auth.svelte": "^1.8.12",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",
@@ -143,6 +143,7 @@
     "./components/table/table": "./components/table/table.js",
     "./components/tag.colors.svelte": "./components/tag.colors.svelte",
     "./components/tag.svelte": "./components/tag.svelte",
+    "./components/tags.palette.svelte": "./components/tags.palette.svelte",
     "./components/tags.svelte": "./components/tags.svelte",
     "./components/textarea.ltop.svelte": "./components/textarea.ltop.svelte",
     "./components/tile.title.svelte": "./components/tile.title.svelte",

package/stores.d.ts

@@ -48,3 +48,4 @@ export const tools_visible_store: import("svelte/store").Writable<any>;
 export const bottom_bar_visible_store: import("svelte/store").Writable<any>;
 export const right_sidebar_visible_store: import("svelte/store").Writable<boolean>;
 export const visible_property_tab_store: import("svelte/store").Writable<string>;
+export const fabCollapsed: import("svelte/store").Writable<any>;

package/stores.js

@@ -157,6 +157,9 @@ bottom_bar_visible_store.subscribe( (value) => { localStorage.bottom_bar_visible
 export const right_sidebar_visible_store = writable(false)
 export const visible_property_tab_store = writable('');
 
+export const fabCollapsed = writable( (localStorage.fabCollapsed && localStorage.fabCollapsed == 'true') || false )
+fabCollapsed.subscribe( (value) => { localStorage.fabCollapsed = (value ? 'true' : '') } );
+
 export function restore_defults()
 {
     
@@ -165,6 +168,7 @@ export function restore_defults()
     bottom_bar_visible_store.set(false);
     right_sidebar_visible_store.set(false);
     visible_property_tab_store.set('');
+    fabCollapsed.set(false)
 }
 
 export function toggle_sidebar(index)

package/tenant.members.svelte

@@ -776,7 +776,7 @@
             <!--Checkbox class="mt-2 text-xs font-normal" self={new_user} a="maintainer">
                 <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"/>
+                    <Icon id="b1" s="md" component={FaInfoCircle} class="text-stone-400 ml-5 pt-0 mt-1"/>
                     <Popover class="w-64 text-sm font-light text-stone-500 bg-white dark:bg-stone-800 dark:border-stone-600 dark:text-stone-400" triggeredBy="#b1" color="dropdown">
                         Means that the invited user will be able to add/remove others and manage permissions in this organization.
                     </Popover>

package/vertical.toolbar.svelte

@@ -361,7 +361,7 @@
                 class:bg-orange-500={isSelected}
                 on:click={tab.onclick}>
                 
-                <Icon class="w-5 h-5" component={tab.icon}/>
+                <Icon s="xl" component={tab.icon}/>
             </button>
         {/each}
     </div>
@@ -373,7 +373,7 @@
             {#if show_groups_switch_menu}
                 <button class="h-12 px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
                         on:click|stopPropagation={show_groups}>
-                    <Icon size={4} component={FaUsers} />
+                    <Icon s="md" component={FaUsers} />
                 </button>
             {/if}
 
@@ -381,7 +381,7 @@
                 class="h-12  px-0 flex justify-center items-center w-full text-stone-300 hover:text-stone-100"
                 on:click|stopPropagation={show_options}>
 
-                <Icon size={4} component={FaCog} />
+                <Icon s="md" component={FaCog} />
             </button>
 
         </div>