@humandialog/forms.svelte 0.4.45 → 0.5.1

package/components/sidebar/sidebar.list.svelte

@@ -0,0 +1,68 @@
+<script>import Icon from "../icon.svelte";
+import Edit from "../edit.field.svelte";
+import { FaPlus } from "svelte-icons/fa";
+import { getPrev, getNext, swapElements, getLast } from "../../utils";
+import { informModification, pushChanges } from "../../updates";
+export let objects;
+export let orderAttrib = void 0;
+export let inserter = void 0;
+export let inserterPlaceholder = "New";
+export const ORDER_STEP = 64;
+export const MIN_ORDER = 0;
+export function reload(_objects) {
+  objects = _objects;
+}
+export function moveUp(element) {
+  if (!orderAttrib)
+    return;
+  let prev = getPrev(objects, element);
+  if (prev) {
+    objects = swapElements(objects, element, prev);
+    const tmp = element[orderAttrib];
+    element[orderAttrib] = prev[orderAttrib];
+    prev[orderAttrib] = tmp;
+    informModification(element, orderAttrib);
+    informModification(prev, orderAttrib);
+    pushChanges();
+  }
+}
+export function moveDown(element) {
+  if (!orderAttrib)
+    return;
+  let next = getNext(objects, element);
+  if (next) {
+    objects = swapElements(objects, element, next);
+    const tmp = element[orderAttrib];
+    element[orderAttrib] = next[orderAttrib];
+    next[orderAttrib] = tmp;
+    informModification(element, orderAttrib);
+    informModification(next, orderAttrib);
+    pushChanges();
+  }
+}
+function onNewElement(text) {
+  if (orderAttrib) {
+    let newElementOrder;
+    const last = getLast(objects);
+    if (last)
+      newElementOrder = last[orderAttrib] + ORDER_STEP;
+    else
+      newElementOrder = MIN_ORDER;
+    inserter(text, newElementOrder);
+  } else
+    inserter(text);
+}
+</script>
+
+{#each objects as item (item.Id)}
+    <slot {item}/>
+{/each }
+
+{#if inserter}
+    <Edit   class="p-3 sm:p-2 text-lg sm:text-base font-normal text-stone-500 rounded-lg dark:text-stone-400 hover:bg-stone-100 dark:hover:bg-stone-700" 
+            onEnter={onNewElement} 
+            placeholder={inserterPlaceholder} 
+            inserter={true}>
+        <Icon size={5} component={FaPlus} class="mr-3"/>
+    </Edit>
+{/if}

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

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        objects: object[];
+        orderAttrib?: string | undefined;
+        inserter?: Function | undefined;
+        inserterPlaceholder?: string | undefined;
+        ORDER_STEP?: 64 | undefined;
+        MIN_ORDER?: 0 | undefined;
+        reload?: ((_objects: object[]) => void) | undefined;
+        moveUp?: ((element: object) => void) | undefined;
+        moveDown?: ((element: object) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            item: object;
+        };
+    };
+};
+export type SidebarProps = typeof __propDef.props;
+export type SidebarEvents = typeof __propDef.events;
+export type SidebarSlots = typeof __propDef.slots;
+export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
+    get ORDER_STEP(): 64;
+    get MIN_ORDER(): 0;
+    get reload(): (_objects: object[]) => void;
+    get moveUp(): (element: object) => void;
+    get moveDown(): (element: object) => void;
+}
+export {};

package/components/sidebar/sidebar.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <aside class="w-full" aria-label="Sidebar">
-    <div class="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
+    <div class="overflow-y-auto py-4 px-3 bg-stone-50 rounded dark:bg-stone-800">
         <slot/>
     </div>
 </aside>

package/components/simple.table.svelte

@@ -1,5 +1,5 @@
 <script>
-    import {data_tick_store, context_items_store, context_info_store } from '../stores.js'
+    import {data_tick_store, contextItemsStore, context_info_store } from '../stores.js'
     import {getContext} from 'svelte';
 
     export let context = ""
@@ -18,7 +18,7 @@
         
     let item = null 
     if(self == null)
-        item = $context_items_store[ctx];
+        item = $contextItemsStore[ctx];
     else
         item = self    
 
@@ -35,7 +35,7 @@
         {
             last_tick = t            
             if(self == null)
-                item = $context_items_store[ctx];
+                item = $contextItemsStore[ctx];
             else
                 item = self    
 
@@ -50,33 +50,33 @@
     
 
     
-    const select_item = (itm, cinfo) => () => {
+    const selectItem = (itm, cinfo) => () => {
        
-        $context_items_store[select] = itm;
+        $contextItemsStore[select] = itm;
         $context_info_store[select] = cinfo;
         
         if(focus)
-            $context_items_store.focused = select
+            $contextItemsStore.focused = select
         if(nav)
             $data_tick_store = $data_tick_store + 1;
     };
     
-    let selected_item = $context_items_store[select]
-    $: selected_item = $context_items_store[select]
+    let selected_item = $contextItemsStore[select]
+    $: selected_item = $contextItemsStore[select]
 </script>
 
 
-    <table class="min-w-full h-auto divide-gray-200">
-        <thead class="bg-gray-50 sticky">
+    <table class="min-w-full h-auto divide-stone-200">
+        <thead class="bg-stone-50 sticky">
             <tr>
                 {#if headers != null}
                     {#each headers as header}
-                        <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                             {header}
                         </th>
                     {/each}    
                 {:else}
-                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                         No headers... 
                     </th>
                 {/if}
@@ -89,13 +89,13 @@
                     {#if item == selected_item}
                     <tr >
                         {#each fields as field}
-                            <td class="px-4 py-1 bg-slate-100 whitespace-nowrap text-sm font-normal text-gray-900">{item[field]}</td>
+                            <td class="px-4 py-1 bg-stone-100 whitespace-nowrap text-sm font-normal text-stone-900">{item[field]}</td>
                         {/each}
                     </tr>
                     {:else}
-                    <tr on:click={select_item(item, cinfo)}>
+                    <tr on:click={selectItem(item, cinfo)}>
                         {#each fields as field}
-                            <td class="px-4 py-1 whitespace-nowrap text-sm font-normal text-gray-900">{item[field]}</td>
+                            <td class="px-4 py-1 whitespace-nowrap text-sm font-normal text-stone-900">{item[field]}</td>
                         {/each}
                     </tr>
                     {/if}

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  SimpleEvents */
 /** @typedef {typeof __propDef.slots}  SimpleSlots */
 export default class Simple extends SvelteComponentTyped<{
-    select?: string | undefined;
     focus?: boolean | undefined;
+    select?: string | undefined;
     context?: string | undefined;
     self?: null | undefined;
     nav?: boolean | undefined;
@@ -22,8 +22,8 @@ export type SimpleSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        select?: string | undefined;
         focus?: boolean | undefined;
+        select?: string | undefined;
         context?: string | undefined;
         self?: null | undefined;
         nav?: boolean | undefined;

package/components/table/_template.table.svelte

@@ -1,5 +1,5 @@
 <script>
-    import {data_tick_store, context_items_store, context_info_store } from '../../stores.js'
+    import {data_tick_store, contextItemsStore, context_info_store } from '../../stores.js'
     import {getContext} from 'svelte';
 
     export let context = ""
@@ -18,7 +18,7 @@
         
     let item = null 
     if(self == null)
-        item = $context_items_store[ctx];
+        item = $contextItemsStore[ctx];
     else
         item = self    
 
@@ -35,7 +35,7 @@
         {
             last_tick = t            
             if(self == null)
-                item = $context_items_store[ctx];
+                item = $contextItemsStore[ctx];
             else
                 item = self    
 
@@ -50,46 +50,46 @@
     
 
     
-    const select_item = (itm, cinfo) => () => {
+    const selectItem = (itm, cinfo) => () => {
        
-        $context_items_store[select] = itm;
+        $contextItemsStore[select] = itm;
         $context_info_store[select] = cinfo;
         
         if(focus)
-            $context_items_store.focused = select
+            $contextItemsStore.focused = select
         if(nav)
             $data_tick_store = $data_tick_store + 1;
     };
     
-    let selected_item = $context_items_store[select]
-    $: selected_item = $context_items_store[select]
+    let selected_item = $contextItemsStore[select]
+    $: selected_item = $contextItemsStore[select]
 </script>
 
 
-    <table class="min-w-full h-auto divide-gray-200 cursor-default">
-        <thead class="bg-gray-50 sticky">
+    <table class="min-w-full h-auto divide-stone-200 cursor-default">
+        <thead class="bg-stone-50 sticky">
             <tr>
                 {#if headers != null}
                     {#each headers as header}
-                        <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                             {header}
                         </th>
                     {/each}    
                 {:else}
-                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                         No headers... 
                     </th>
                 {/if}
             </tr>
         </thead>
         {#if (items != null && items.length > 0 && fields != null)}
-            <tbody class="bg-white dark:bg-slate-900">
+            <tbody class="bg-white dark:bg-stone-900">
                 {#each items as item}
                     {#if (item != null )}
-                        <tr on:click={select_item(item, cinfo)}
-                            class="whitespace-nowrap text-sm font-normal text-gray-900 dark:text-gray-300"
-                            class:bg-slate-100={item==selected_item}
-                            class:dark:bg-slate-700={item==selected_item}>
+                        <tr on:click={selectItem(item, cinfo)}
+                            class="whitespace-nowrap text-sm font-normal text-stone-900 dark:text-stone-300"
+                            class:bg-stone-100={item==selected_item}
+                            class:dark:bg-stone-700={item==selected_item}>
                             {#if $$slots['row']}
                                 <slot name='row' {item}/>
                             {:else}

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  TemplateEvents */
 /** @typedef {typeof __propDef.slots}  TemplateSlots */
 export default class Template extends SvelteComponentTyped<{
-    select?: string | undefined;
     focus?: boolean | undefined;
+    select?: string | undefined;
     context?: string | undefined;
     self?: null | undefined;
     nav?: boolean | undefined;
@@ -30,8 +30,8 @@ export type TemplateSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        select?: string | undefined;
         focus?: boolean | undefined;
+        select?: string | undefined;
         context?: string | undefined;
         self?: null | undefined;
         nav?: boolean | undefined;

package/components/table/table.svelte

@@ -1,8 +1,8 @@
-<script>import { data_tick_store, context_items_store, context_info_store, context_types_store, context_toolbar_operations } from "../../stores.js";
+<script>import { data_tick_store, contextItemsStore, context_info_store, contextTypesStore, contextToolbarOperations } from "../../stores.js";
 import { getContext, setContext, onDestroy } from "svelte";
 import { rTable_definition } from "./table";
-import { parse_width_directive } from "../../utils.js";
-import { show_menu } from "../menu";
+import { parseWidthDirective } from "../../utils.js";
+import { showMenu } from "../menu";
 export let context = "";
 export let collection = "";
 export let self = null;
@@ -15,8 +15,8 @@ export let focus = true;
 export let nav = true;
 export let c = "";
 export let typename = "";
-export let toolbar_operations = [];
-export let menu_operations = [];
+export let toolbarOperations = [];
+export let menuOperations = [];
 let definition = new rTable_definition();
 setContext("rTable-definition", definition);
 setContext("rIs-table-component", true);
@@ -25,19 +25,19 @@ let items = null;
 let item = null;
 let last_tick = -1;
 let selected_item;
-let cs = c ? parse_width_directive(c) : "w-full min-w-full";
+let cs = c ? parseWidthDirective(c) : "w-full min-w-full";
 $: {
   if ($data_tick_store > last_tick)
     refresh();
 }
 $:
-  selected_item = $context_items_store[select];
+  selected_item = $contextItemsStore[select];
 onDestroy(() => {
-  select_item(null, null);
+  selectItem(null, null);
 });
 export function refresh() {
   last_tick = $data_tick_store;
-  item = self ?? $context_items_store[ctx];
+  item = self ?? $contextItemsStore[ctx];
   if (objects)
     items = objects;
   else if (item && collection)
@@ -45,27 +45,27 @@ export function refresh() {
   else
     items = [];
   if (!typename)
-    typename = $context_types_store[ctx];
+    typename = $contextTypesStore[ctx];
 }
-export function update_objects(_objects) {
+export function updateObjects(_objects) {
   objects = _objects;
   refresh();
 }
-export function update_self(_self) {
+export function updateSelf(_self) {
   self = _self;
   refresh();
 }
-export function select_item(itm, cinfo2) {
-  $context_items_store[select] = itm;
+export function selectItem(itm, cinfo2) {
+  $contextItemsStore[select] = itm;
   $context_info_store[select] = cinfo2;
   if (itm && itm.oclType)
-    $context_types_store[select] = itm.oclType;
+    $contextTypesStore[select] = itm.oclType;
   if (focus)
-    $context_items_store.focused = select;
+    $contextItemsStore.focused = select;
   if (itm)
-    $context_toolbar_operations = [...toolbar_operations];
+    $contextToolbarOperations = [...toolbarOperations];
   else
-    $context_toolbar_operations = [];
+    $contextToolbarOperations = [];
   if (nav)
     $data_tick_store = $data_tick_store + 1;
 }
@@ -80,33 +80,33 @@ function override_items_from_slot(...args) {
   return 0;
 }
 function show_context_menu(e, itm, cinfo2) {
-  if (!menu_operations)
+  if (!menuOperations)
     return;
-  if (menu_operations.length == 0)
+  if (menuOperations.length == 0)
     return;
   e.stopPropagation();
   e.preventDefault();
-  show_menu(new DOMPoint(e.clientX, e.clientY), menu_operations);
+  showMenu(new DOMPoint(e.clientX, e.clientY), menuOperations);
 }
 </script>
 
 {#if true}
     <slot/> <!-- let definition execute -->
     
-    <table class="{cs} h-auto divide-gray-200 cursor-default">
-        <thead class="bg-gray-50 sticky">
+    <table class="{cs} h-auto divide-stone-200 cursor-default">
+        <thead class="bg-stone-50 sticky">
             <tr>
                 {#if definition || headers.length }
                     {@const lheaders = headers.length ? headers : definition.columns.map( v => v.header )}
                     {#if lheaders.length && lheaders.some(s => s.length > 0)}
                         {#each lheaders as header}
-                            <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                            <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                                 {header}
                             </th>
                         {/each}    
                     {/if}
                 {:else}
-                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    <th scope="col" class="py-1 px-4 text-left text-xs font-medium text-stone-500 uppercase tracking-wider">
                         No headers... 
                     </th>
                 {/if}
@@ -114,14 +114,14 @@ function show_context_menu(e, itm, cinfo2) {
         </thead>
         {#if (items != null) && (items.length > 0)}
             {@const lfields = fields.length ? fields : definition.columns.map( v => v.field )}
-            <tbody class="bg-white dark:bg-slate-900">
+            <tbody class="bg-white dark:bg-stone-900">
                 {#each items as item}
                     {#if (item != null )}
-                        <tr on:click={ (e) => { e.stopPropagation(); e.preventDefault(); select_item(item, cinfo);} }
-                            on:contextmenu={ (e) => {select_item(item, cinfo); show_context_menu(e, item, cinfo)} }
-                            class="whitespace-nowrap text-sm font-normal text-gray-900 dark:text-gray-300"
-                            class:bg-slate-100={item==selected_item}
-                            class:dark:bg-slate-700={item==selected_item}>
+                        <tr on:click={ (e) => { e.stopPropagation(); e.preventDefault(); selectItem(item, cinfo);} }
+                            on:contextmenu={ (e) => {selectItem(item, cinfo); show_context_menu(e, item, cinfo)} }
+                            class="whitespace-nowrap text-sm font-normal text-stone-900 dark:text-stone-300"
+                            class:bg-stone-100={item==selected_item}
+                            class:dark:bg-stone-700={item==selected_item}>
                             {#each lfields as field, i}
                                 {@const cc = `c${i}`}
                                 {@const column = definition.columns[i]}

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

@@ -13,12 +13,12 @@ declare const __propDef: {
         nav?: boolean | undefined;
         c?: string | undefined;
         typename?: string | undefined;
-        toolbar_operations?: any[] | undefined;
-        menu_operations?: any[] | undefined;
+        toolbarOperations?: any[] | undefined;
+        menuOperations?: any[] | undefined;
         refresh?: (() => void) | undefined;
-        update_objects?: ((_objects: any) => void) | undefined;
-        update_self?: ((_self: any) => void) | undefined;
-        select_item?: ((itm: any, cinfo: any) => void) | undefined;
+        updateObjects?: ((_objects: any) => void) | undefined;
+        updateSelf?: ((_self: any) => void) | undefined;
+        selectItem?: ((itm: any, cinfo: any) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -68,8 +68,8 @@ export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;
 export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
     get refresh(): () => void;
-    get update_objects(): (_objects: any) => void;
-    get update_self(): (_self: any) => void;
-    get select_item(): (itm: any, cinfo: any) => void;
+    get updateObjects(): (_objects: any) => void;
+    get updateSelf(): (_self: any) => void;
+    get selectItem(): (itm: any, cinfo: any) => void;
 }
 export {};

package/components/textarea.ltop.svelte

@@ -45,11 +45,11 @@
 </script>    
 
 <div class="{col_span}">
-    <label for="name" class="block {label_mb} text-xs font-small text-gray-900 dark:text-white">{label}</label>
+    <label for="name" class="block {label_mb} text-xs font-small text-stone-900 dark:text-white">{label}</label>
     <textarea id="description" rows="5" 
-    class="block {input_p} w-full text-sm text-gray-900 bg-gray-50 
-    rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500
-     dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white 
+    class="block {input_p} w-full text-sm text-stone-900 bg-stone-50 
+    rounded-lg border border-stone-300 focus:ring-primary-500 focus:border-primary-500
+     dark:bg-stone-700 dark:border-stone-600 dark:placeholder-stone-400 dark:text-white 
      dark:focus:ring-primary-500 dark:focus:border-primary-500" 
      placeholder={placeholder}>{val}</textarea>                    
 </div>

package/components/tile.title.svelte

@@ -1,7 +1,7 @@
 <script>
     import {getContext} from 'svelte';
-    import {data_tick_store, context_items_store} from '../stores.js' 
-    import { parse_width_directive} from '../utils.js'
+    import {data_tick_store, contextItemsStore} from '../stores.js' 
+    import { parseWidthDirective} from '../utils.js'
    
     export let label = "Label"
     export let a = '';
@@ -10,7 +10,7 @@
     let _label = label;
 
 
-    let cs = parse_width_directive(c);
+    let cs = parseWidthDirective(c);
     
     let     item = null
     let     ctx = ''
@@ -24,7 +24,7 @@
     }
     else if(a != '')
     {
-        item = $context_items_store[ctx];
+        item = $contextItemsStore[ctx];
         if(item != null)
             _label = item[a]
     }
@@ -40,7 +40,7 @@
                 _label = label;
             else
             {
-                item = $context_items_store[ctx];
+                item = $contextItemsStore[ctx];
                 if(item != null)
                     _label = item[a]
             }
@@ -50,5 +50,5 @@
 }
 </script>
 
-<p class="{cs} text-gray-900 dark:text-white {$$restProps['class']}">{_label}</p>
+<p class="{cs} text-stone-900 dark:text-white {$$restProps['class']}">{_label}</p>
 

package/desk.svelte

@@ -9,7 +9,7 @@
             tools_visible_store, 
             bottom_bar_visible_store, 
             auto_hide_sidebar,
-            has_selected_item,
+            hasSelectedItem,
             dark_mode_store,
             data_tick_store,
             set_default_tools_visible,
@@ -17,7 +17,7 @@
             sidebar_left_pos } from './stores.js'
     
     import { AuthorizedView} from '@humandialog/auth.svelte'
-    import { handle_select, is_device_smaller_than } from './utils'
+    import { handleSelect, isDeviceSmallerThan } from './utils'
 	import { afterUpdate, onMount } from 'svelte';
     
     export let layout;
@@ -53,7 +53,7 @@
     const media_break_2xl = 1536; //px
     let test = "ala\n    ma\n\tkota"
 
-    $: is_small = is_device_smaller_than("sm")
+    $: is_small = isDeviceSmallerThan("sm")
     
     let main_side_panel_visibility = "hidden"
     let lg_content_area_horizontal_dim = ""
@@ -107,7 +107,7 @@
         bottom_bar_visible = $bottom_bar_visible_store
         let dts = $data_tick_store;
 
-        if(!has_selected_item())
+        if(!hasSelectedItem())
             bottom_bar_visible = false;
 
         if(tools_visible)
@@ -158,16 +158,16 @@
 <AuthorizedView>
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div    id="__hd_svelte_layout_root" class="{$dark_mode_store}"
-            on:click={handle_select} 
-            on:contextmenu={handle_select}>
+            on:click={handleSelect} 
+            on:contextmenu={handleSelect}>
 
-        <div class="bg-white dark:bg-gray-900 dark:text-white      min-h-screen h-screen">    
+        <div class="bg-white dark:bg-stone-900 dark:text-white      min-h-screen h-screen">    
             <!--###########################################################-->
             <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->
             <!--###########################################################-->
-            <header class="fixed sm:hidden w-screen top-0 h-[50px] sm:h-[40px] z-20  overflow-auto shadow  shadow-slate-900/5 dark:shadow-none" >
-                    <div class=" flex flex-row justify-between  h-full  bg-slate-900   text-gray-100 ">
-                        <HorizontalToolbar app_config={layout}/>
+            <header class="fixed sm:hidden w-screen top-0 h-[50px] sm:h-[40px] z-20  overflow-auto shadow  shadow-stone-900/5 dark:shadow-none" >
+                    <div class=" flex flex-row justify-between  h-full  bg-stone-950   text-stone-100 ">
+                        <HorizontalToolbar appConfig={layout}/>
                     <div>
             </header>        
 
@@ -177,8 +177,8 @@
             <!--##  VERTICAL TOOLBAR                 ##################-->
             <!--#######################################################-->
             <div  class="hidden sm:block fixed left-0 top-0 w-[50px] sm:w-[40px] h-screen z-20 inset-0   overflow-hidden">
-                <div class="sticky top-0 flex h-full w-10 bg-slate-900 flex-col items-center text-gray-100 shadow">
-                    <VerticalToolbar app_config={layout}/>
+                <div class="sticky top-0 flex h-full w-10 bg-stone-800 dark:bg-stone-950 flex-col items-center text-stone-100 shadow">
+                    <VerticalToolbar appConfig={layout}/>
                 </div>    
             </div>
 
@@ -198,7 +198,7 @@
                             {sidebar_small_width} sm:w-[320px] 
                             z-20 overflow-x-hidden">
 
-                <div class=" bg-slate-50 w-full h-full dark:bg-slate-800 overflow-y-auto py-0 px-0">
+                <div class=" bg-stone-50 w-full h-full dark:bg-stone-800 overflow-y-auto py-0 px-0">
                     <Configurable config={layout.sidebar[visible_sidebar]}>
                         <div slot='alt'></div>
                     </Configurable>

package/form.box.svelte

@@ -1,6 +1,6 @@
 <script>
    import { writable } from 'svelte/store'; 
-   import {data_tick_store, context_items_store} from './stores.js' 
+   import {data_tick_store, contextItemsStore} from './stores.js' 
    import { setContext } from 'svelte';
 
     export let context = ""
@@ -14,7 +14,7 @@
     {    
         setContext('ctx', context) 
         if(self != null)
-            context_items_store[context] = self 
+            contextItemsStore[context] = self 
     }
 
     let in_tile_flex_behaviour = fit ? "flex-1" : "flex-none"