@coyalabs/bts-style 1.3.7 → 1.3.8

package/dist/Base/BaseContainer.svelte

@@ -73,7 +73,7 @@
   }
 
   .glow-base-container[data-theme='vague'] {
-    background: #96848C25;
+    background: #695d6325;
     box-shadow: 
       0px 0px 13px 0px rgba(255, 255, 255, 0.07),
       inset 0px 0px 9px 2px #66588048;

package/dist/Components/Button.svelte

@@ -19,6 +19,11 @@
    */
   export let icon = null;
 
+  /**
+   * @type {boolean}
+   */
+  export let correctTextOffset = false;
+
   /**
    * @type {string | null}
    */
@@ -81,9 +86,11 @@
             </div>
           {/if}
           {#if $$slots.default}
-            <BaseText variant="button">
-              <slot />
-            </BaseText>
+            <div style="transform: translateY({correctTextOffset ? '-2px' : '0px'})">
+              <BaseText variant="button">
+                <slot />
+              </BaseText>
+            </div>
           {/if}
         </div>
       {/if}
@@ -103,13 +110,14 @@
     display: block;
     width: 100%;
     user-select: none;
+    overflow: visible;
   }
 
   .button-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
+    gap: 25px;
   }
 
   .icon-text {

package/dist/Components/Button.svelte.d.ts

@@ -6,6 +6,7 @@ type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     borderRadiusBottomLeft?: string | undefined;
     borderRadiusBottomRight?: string | undefined;
     icon?: string | null | undefined;
+    correctTextOffset?: boolean | undefined;
     actionIcon?: string | null | undefined;
     iconRotation?: number | undefined;
     actionIconRotation?: number | undefined;
@@ -30,6 +31,7 @@ declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     borderRadiusBottomLeft?: string | undefined;
     borderRadiusBottomRight?: string | undefined;
     icon?: string | null | undefined;
+    correctTextOffset?: boolean | undefined;
     actionIcon?: string | null | undefined;
     iconRotation?: number | undefined;
     actionIconRotation?: number | undefined;

package/dist/Components/ContextMenu.svelte

@@ -46,7 +46,7 @@
   {#each categories as category, catIndex}
     {#if category.label}
       <div class="separator" class:not-first={catIndex > 0}>
-        <BaseText variant="content">{category.label}</BaseText>
+        <BaseText textModifier="-3px" variant="button">{category.label}</BaseText>
       </div>
     {/if}
     <div class="category-items">
@@ -73,8 +73,10 @@
 
   .separator {
     opacity: 0.6;
-    padding-bottom: 0.5rem;
+    padding: 0 1rem 0.5rem 1rem;
     font-size: 0.85rem;
+    margin-top: 0.5rem;
+
   }
 
   .separator.not-first {

package/dist/Components/Dropdown.svelte

@@ -1,8 +1,8 @@
 <script>
+  import { tick } from 'svelte';
   import Button from './Button.svelte';
   import ContextMenu from './ContextMenu.svelte';
   import { icons } from '../icons';
-  import { slide } from 'svelte/transition';
   import { VARIANT_FULL } from '../Base/variantTypes.js';
 
   /**
@@ -66,24 +66,24 @@
 
   let isOpen = false;
   /**
-     * @type {HTMLDivElement}
-     */
+   * @type {HTMLDivElement}
+   */
   let dropdownRef;
   
   /**
-   * @type {HTMLDivElement}
+   * @type {HTMLButtonElement}
    */
   let buttonRef;
-
+  
   /**
    * @type {{top: number, left: number, width: number}}
    */
   let menuPosition = { top: 0, left: 0, width: 0 };
 
-  function toggleDropdown() {
-    isOpen = !isOpen;
-    if (isOpen && buttonRef) {
+  function updateMenuPosition() {
+    if (buttonRef) {
       const rect = buttonRef.getBoundingClientRect();
+      // getBoundingClientRect returns viewport coordinates which work directly with position:fixed
       menuPosition = {
         top: rect.bottom + 4,
         left: rect.left,
@@ -92,6 +92,16 @@
     }
   }
 
+  async function toggleDropdown() {
+    if (!isOpen) {
+      isOpen = true;
+      await tick();
+      updateMenuPosition();
+    } else {
+      isOpen = false;
+    }
+  }
+
   /**
    * @param {any} optionValue
    */
@@ -101,12 +111,43 @@
     onChange(optionValue);
   }
 
+  /**
+   * Svelte action to portal an element to body
+   * @param {HTMLElement} node
+   */
+  function portal(node) {
+    document.body.appendChild(node);
+    
+    return {
+      destroy() {
+        if (node.parentNode) {
+          node.parentNode.removeChild(node);
+        }
+      }
+    };
+  }
+
   /**
    * @param {MouseEvent} event
    */
   function handleClickOutside(event) {
-    if (dropdownRef && event.target instanceof Node && !dropdownRef.contains(event.target)) {
-      isOpen = false;
+    if (!isOpen) return;
+    
+    // Check if click is inside dropdown button
+    if (dropdownRef && event.target instanceof Node && dropdownRef.contains(event.target)) {
+      return;
+    }
+    // Check if click is inside the menu (which is portaled to body)
+    const menu = document.querySelector('.dropdown-menu-portal');
+    if (menu && event.target instanceof Node && menu.contains(event.target)) {
+      return;
+    }
+    isOpen = false;
+  }
+  
+  function handleScroll() {
+    if (isOpen) {
+      updateMenuPosition();
     }
   }
 
@@ -114,10 +155,10 @@
   $: displayLabel = selectedOption ? selectedOption.label : label;
 </script>
 
-<svelte:window on:click={handleClickOutside} />
+<svelte:window on:click={handleClickOutside} on:scroll={handleScroll} />
 
 <div class="dropdown-container" bind:this={dropdownRef} style="width: {width};">
-  <div bind:this={buttonRef}>
+  <button class="dropdown-button" bind:this={buttonRef} on:click={toggleDropdown}>
     <Button
       {theme}
       {icon}
@@ -128,31 +169,44 @@
       {borderRadiusTopRight}
       {borderRadiusBottomLeft}
       {borderRadiusBottomRight}
-      on:click={toggleDropdown}
     >
       <span class="button-label">{displayLabel}</span>
     </Button>
-  </div>
-
-  {#if isOpen}
-    <div 
-      class="dropdown-menu" 
-      transition:slide={{ duration: 150 }}
-      style="top: {menuPosition.top}px; left: {menuPosition.left}px; width: {menuPosition.width}px;"
-    >
-      <ContextMenu items={options} selectedValue={value} onSelect={selectOption} />
-    </div>
-  {/if}
+  </button>
 </div>
 
+{#if isOpen}
+  <div 
+    class="dropdown-menu-portal"
+    use:portal
+    style="
+      position: fixed;
+      top: {menuPosition.top}px;
+      left: {menuPosition.left}px;
+      width: {menuPosition.width}px;
+      z-index: 10001;
+    "
+  >
+    <ContextMenu items={options} selectedValue={value} onSelect={selectOption} />
+  </div>
+{/if}
+
 <style>
   .dropdown-container {
     position: relative;
     display: inline-block;
   }
 
-  .dropdown-container :global(button) {
+  .dropdown-button {
+    all: unset;
+    display: block;
     width: 100%;
+    cursor: pointer;
+  }
+
+  .dropdown-button :global(button) {
+    width: 100%;
+    pointer-events: none;
   }
 
   .button-label {
@@ -161,9 +215,4 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
-  .dropdown-menu {
-    position: fixed;
-    z-index: 10000;
-  }
 </style>

package/dist/Components/LinearList.svelte

@@ -0,0 +1,104 @@
+<script>
+  import Button from './Button.svelte';
+  import IconButton from './IconButton.svelte';
+  import { icons } from '../icons.js';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * @typedef {Object} CustomAction
+   * @property {string} label - Action label text
+   * @property {string} [actionIcon] - Optional action icon SVG
+   */
+
+  /**
+   * @typedef {Object} ListItem
+   * @property {any} [data] - Custom data attached to item
+   * @property {CustomAction[]} [customActions] - Array of custom action buttons
+   * @property {boolean} [removeButton] - Show remove button
+   */
+
+  /** @type {ListItem[]} */
+  export let items = [];
+
+  /**
+   * @param {number} index
+   * @param {string} actionLabel
+   */
+  function handleAction(index, actionLabel) {
+    dispatch('action', { index, actionLabel, item: items[index] });
+  }
+
+  /**
+   * @param {number} index
+   */
+  function handleRemove(index) {
+    dispatch('remove', { index, item: items[index] });
+  }
+</script>
+
+<div class="linear-list">
+  {#each items as item, index (index)}
+    <div class="list-item">
+      <div class="content">
+        <slot {item} {index} />
+      </div>
+      
+      <div class="actions">
+        {#if item.customActions}
+          {#each item.customActions as action}
+            <Button
+              theme="secondary"
+              actionIcon={action.actionIcon}
+              on:click={() => handleAction(index, action.label)}
+            >
+              {action.label}
+            </Button>
+          {/each}
+        {/if}
+        
+        {#if item.removeButton}
+          <IconButton
+            svg={icons.cross}
+            variant="toned"
+            on:click={() => handleRemove(index)}
+          />
+        {/if}
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .linear-list {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0.3rem;
+    padding-right: 0.3rem;
+  }
+
+  .list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 2px solid rgba(161, 143, 143, 0.24);
+  }
+
+  .list-item:last-child {
+    border-bottom: none;
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+</style>

package/dist/Components/LinearList.svelte.d.ts

@@ -0,0 +1,146 @@
+export default LinearList;
+type LinearList = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    items?: ListItem[] | undefined;
+}, {
+    default: {
+        item: ListItem;
+        index: any;
+    };
+}>, {
+    action: CustomEvent<any>;
+    remove: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: ListItem;
+        index: any;
+    };
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const LinearList: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    items?: {
+        /**
+         * - Custom data attached to item
+         */
+        data?: any;
+        /**
+         * - Array of custom action buttons
+         */
+        customActions?: {
+            /**
+             * - Action label text
+             */
+            label: string;
+            /**
+             * - Optional action icon SVG
+             */
+            actionIcon?: string | undefined;
+        }[] | undefined;
+        /**
+         * - Show remove button
+         */
+        removeButton?: boolean | undefined;
+    }[] | undefined;
+}, {
+    default: {
+        item: {
+            /**
+             * - Custom data attached to item
+             */
+            data?: any;
+            /**
+             * - Array of custom action buttons
+             */
+            customActions?: {
+                /**
+                 * - Action label text
+                 */
+                label: string;
+                /**
+                 * - Optional action icon SVG
+                 */
+                actionIcon?: string | undefined;
+            }[] | undefined;
+            /**
+             * - Show remove button
+             */
+            removeButton?: boolean | undefined;
+        };
+        index: any;
+    };
+}>, {
+    action: CustomEvent<any>;
+    remove: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        item: {
+            /**
+             * - Custom data attached to item
+             */
+            data?: any;
+            /**
+             * - Array of custom action buttons
+             */
+            customActions?: {
+                /**
+                 * - Action label text
+                 */
+                label: string;
+                /**
+                 * - Optional action icon SVG
+                 */
+                actionIcon?: string | undefined;
+            }[] | undefined;
+            /**
+             * - Show remove button
+             */
+            removeButton?: boolean | undefined;
+        };
+        index: any;
+    };
+}, {}, string>;
+type ListItem = {
+    /**
+     * - Custom data attached to item
+     */
+    data?: any;
+    /**
+     * - Array of custom action buttons
+     */
+    customActions?: {
+        /**
+         * - Action label text
+         */
+        label: string;
+        /**
+         * - Optional action icon SVG
+         */
+        actionIcon?: string | undefined;
+    }[] | undefined;
+    /**
+     * - Show remove button
+     */
+    removeButton?: boolean | undefined;
+};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Popup/AlertPopup.svelte

@@ -1,7 +1,7 @@
 <script>
   import Button from '../Button.svelte';
   import { icons } from '../../icons.js';
-  import { popupStore } from '../popupStore.js';
+  import { popupStore } from './popupStore.js';
   import { VARIANT_PRIMARY } from '../../Base/variantTypes.js';
 
   /** @type {() => void} */
@@ -24,5 +24,6 @@
   .buttons {
     display: flex;
     justify-content: flex-end;
+    overflow: visible;
   }
 </style>

package/dist/Components/Popup/ConfirmPopup.svelte

@@ -1,7 +1,7 @@
 <script>
     import { icons } from '../../icons.js';
   import Button from '../Button.svelte';
-  import { popupStore } from '../popupStore.js';
+  import { popupStore } from './popupStore.js';
   import { VARIANT_PRIMARY, VARIANT_SECONDARY } from '../../Base/variantTypes.js';
 
   /** @type {() => void} */
@@ -36,5 +36,6 @@
   .buttons {
     display: flex;
     gap: 1rem;
+    overflow: visible;
   }
 </style>

package/dist/Components/Popup/Popup.svelte

@@ -1,36 +1,55 @@
 <script>
   import { fade, fly } from 'svelte/transition';
   import { backOut } from 'svelte/easing';
-  import { popupStore } from '../popupStore.js';
+  import { popupStore } from './popupStore.js';
   import BaseContainer from '../../Base/BaseContainer.svelte';
   import IconButton from '../IconButton.svelte';
   import TextHeader from '../../Structure/TextHeader.svelte';
   import { icons } from '../../icons.js';
   import { VARIANT_FILLED } from '../../Base/variantTypes.js';
+  
+  // Subscribe to the actual stack
+  /** @type {Array<{id: string, title: string, subtitle?: string, component: any, props: any}>} */
+  let popupStack = [];
+  popupStore.stack.subscribe((s) => {
+    popupStack = s;
+  });
 </script>
 
-{#if $popupStore.isOpen}
-  <div class="overlay" transition:fade={{ duration: 250 }} on:click={popupStore.close} role="presentation">
-    <div 
-      class="dialog" 
-      transition:fly={{ y: 30, duration: 300, easing: backOut }}
-      on:click|stopPropagation
-      on:keydown|stopPropagation
-      role="dialog"
-      tabindex="-1"
-    >
-      <BaseContainer padding="1.5rem" borderRadiusTopLeft="35px" borderRadiusTopRight="35px" borderRadiusBottomLeft="35px" borderRadiusBottomRight="35px" theme={VARIANT_FILLED}>
-        <header>
-          <TextHeader title={$popupStore.title} subtitle={$popupStore.subtitle || ''} />
-          <div class="close-btn">
-            <IconButton svg={icons.cross} size="20px" variant="toned" on:click={popupStore.close} />
-          </div>
-        </header>
-        <main>
-          <svelte:component this={$popupStore.component} {...$popupStore.props} />
-        </main>
-      </BaseContainer>
-    </div>
+{#if popupStack.length > 0}
+  <div class="overlay" transition:fade={{ duration: 200 }} on:click={popupStore.close} role="presentation">
+    {#each popupStack as popup, index (popup.id)}
+      {@const isTop = index === popupStack.length - 1}
+      {@const depth = popupStack.length - 1 - index}
+      <div 
+        class="dialog"
+        class:background={!isTop}
+        style="
+          --scale: {isTop ? 1 : Math.max(0.85, 1 - depth * 0.08)};
+          --brightness: {isTop ? 1 : Math.max(0.4, 1 - depth * 0.3)};
+          --y-offset: {isTop ? 0 : -depth * 20}px;
+          z-index: {index};
+        "
+        in:fly|global={{ y: 40, duration: 350, easing: backOut }}
+        out:fly|global={{ y: 20, duration: 200 }}
+        on:click|stopPropagation
+        on:keydown|stopPropagation
+        role="dialog"
+        tabindex="-1"
+      >
+        <BaseContainer padding="1.5rem" borderRadiusTopLeft="35px" borderRadiusTopRight="35px" borderRadiusBottomLeft="35px" borderRadiusBottomRight="35px" theme={VARIANT_FILLED}>
+          <header>
+            <TextHeader title={popup.title} subtitle={popup.subtitle || ''} />
+            <div class="close-btn">
+              <IconButton svg={icons.cross} size="20px" variant="toned" on:click={popupStore.close} />
+            </div>
+          </header>
+          <main>
+            <svelte:component this={popup.component} {...popup.props} />
+          </main>
+        </BaseContainer>
+      </div>
+    {/each}
   </div>
 {/if}
 
@@ -46,11 +65,19 @@
   }
 
   .dialog {
+    position: absolute;
     width: min(90%, 600px);
     max-height: 80vh;
     zoom: 0.92;
     display: flex;
     flex-direction: column;
+    transform: scale(var(--scale)) translateY(var(--y-offset));
+    filter: brightness(var(--brightness));
+    transition: transform 0.3s ease, filter 0.3s ease;
+  }
+
+  .dialog.background {
+    pointer-events: none;
   }
 
   .dialog :global(.glow-base-container) {

package/dist/Components/Popup/PromptPopup.svelte

@@ -3,7 +3,7 @@
   import InputBox from '../InputBox.svelte';
   import BaseText from '../../Base/BaseText.svelte';
   import { icons } from '../../icons.js';
-  import { popupStore } from '../popupStore.js';
+  import { popupStore } from './popupStore.js';
   import { VARIANT_PRIMARY, VARIANT_SECONDARY } from '../../Base/variantTypes.js';
 
   /** @type {(value: string) => void} */
@@ -58,5 +58,6 @@
   .buttons {
     display: flex;
     gap: 1rem;
+    overflow: visible;
   }
 </style>

package/dist/Components/Popup/popupStore.d.ts

@@ -0,0 +1,41 @@
+export namespace popupStore {
+    let subscribe: (this: void, run: import("svelte/store").Subscriber<{
+        isOpen: boolean;
+        title: string;
+        subtitle: string;
+        component: any;
+        props: any;
+    }>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    namespace stack {
+        let subscribe_1: (this: void, run: import("svelte/store").Subscriber<PopupState[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+        export { subscribe_1 as subscribe };
+    }
+    function open(title: string, component: any, props?: {}, subtitle?: string): void;
+    function close(): void;
+    function closeAll(): void;
+    function confirm(title: string, message: string, options?: {
+        onConfirm?: (() => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        confirmText?: string | undefined;
+        cancelText?: string | undefined;
+    }): void;
+    function alert(title: string, message: string, options?: {
+        onOk?: (() => void) | undefined;
+        okText?: string | undefined;
+    }): void;
+    function prompt(title: string, message: string, options?: {
+        onSubmit?: ((value: string) => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        placeholder?: string | undefined;
+        submitText?: string | undefined;
+        cancelText?: string | undefined;
+        label?: string | undefined;
+    }): void;
+}
+export type PopupState = {
+    title: string;
+    subtitle?: string | undefined;
+    component: any;
+    props: any;
+    id: string;
+};

package/dist/Components/{popupStore.js → Popup/popupStore.js}

@@ -1,37 +1,64 @@
-import { writable } from 'svelte/store';
-import ConfirmPopup from './Popup/ConfirmPopup.svelte';
-import AlertPopup from './Popup/AlertPopup.svelte';
-import PromptPopup from './Popup/PromptPopup.svelte';
+import { writable, derived } from 'svelte/store';
+import ConfirmPopup from './ConfirmPopup.svelte';
+import AlertPopup from './AlertPopup.svelte';
+import PromptPopup from './PromptPopup.svelte';
+
+/**
+ * @typedef {Object} PopupState
+ * @property {string} title
+ * @property {string} [subtitle]
+ * @property {any} component
+ * @property {any} props
+ * @property {string} id
+ */
 
 function createPopupStore() {
-  /** @type {import('svelte/store').Writable<{isOpen: boolean, title: string, subtitle?: string, component: any, props: any}>} */
-  const { subscribe, set, update } = writable({
-    isOpen: false,
-    title: '',
-    subtitle: '',
-    component: /** @type {any} */ (null),
-    props: {}
+  /** @type {import('svelte/store').Writable<PopupState[]>} */
+  const stack = writable([]);
+
+  // Derived store for backwards compatibility - exposes top popup as the "current" state
+  const currentPopup = derived(stack, ($stack) => {
+    if ($stack.length === 0) {
+      return {
+        isOpen: false,
+        title: '',
+        subtitle: '',
+        component: /** @type {any} */ (null),
+        props: {}
+      };
+    }
+    const top = $stack[$stack.length - 1];
+    return {
+      isOpen: true,
+      title: top.title,
+      subtitle: top.subtitle || '',
+      component: top.component,
+      props: top.props
+    };
   });
 
   return {
-    subscribe,
-    open: (/** @type {any} */ title, /** @type {any} */ component, props = {}, subtitle = '') => {
-      set({
-        isOpen: true,
+    subscribe: currentPopup.subscribe,
+    
+    // Expose the full stack for the Popup component
+    stack: { subscribe: stack.subscribe },
+
+    open: (/** @type {string} */ title, /** @type {any} */ component, props = {}, subtitle = '') => {
+      stack.update(s => [...s, {
+        id: crypto.randomUUID(),
         title,
         subtitle,
         component,
         props
-      });
+      }]);
     },
+
     close: () => {
-      set({
-        isOpen: false,
-        title: '',
-        subtitle: '',
-        component: null,
-        props: {}
-      });
+      stack.update(s => s.slice(0, -1));
+    },
+
+    closeAll: () => {
+      stack.set([]);
     },
 
     /**
@@ -45,13 +72,13 @@ function createPopupStore() {
      * @param {string} [options.cancelText]
      */
     confirm: (title, message, options = {}) => {
-      set({
-        isOpen: true,
+      stack.update(s => [...s, {
+        id: crypto.randomUUID(),
         title,
         subtitle: message,
         component: ConfirmPopup,
         props: options
-      });
+      }]);
     },
 
     /**
@@ -63,13 +90,13 @@ function createPopupStore() {
      * @param {string} [options.okText]
      */
     alert: (title, message, options = {}) => {
-      set({
-        isOpen: true,
+      stack.update(s => [...s, {
+        id: crypto.randomUUID(),
         title,
         subtitle: message,
         component: AlertPopup,
         props: options
-      });
+      }]);
     },
 
     /**
@@ -85,13 +112,13 @@ function createPopupStore() {
      * @param {string} [options.label]
      */
     prompt: (title, message, options = {}) => {
-      set({
-        isOpen: true,
+      stack.update(s => [...s, {
+        id: crypto.randomUUID(),
         title,
         subtitle: message,
         component: PromptPopup,
         props: options
-      });
+      }]);
     }
   };
 }

package/dist/Components/Toast/Toast.svelte

@@ -0,0 +1,57 @@
+<script>
+  import { fly } from 'svelte/transition';
+  import { toastStore } from './toastStore.js';
+  import Button from '../Button.svelte';
+  import { icons } from '../../icons.js';
+  import { VARIANT_SECONDARY } from '../../Base/variantTypes.js';
+
+  /** @type {Array<{id: string, message: string, duration?: number}>} */
+  let toasts = [];
+  
+  toastStore.subscribe((t) => {
+    toasts = t;
+  });
+
+  /**
+   * @param {string} id
+   */
+  function handleDismiss(id) {
+    toastStore.dismiss(id);
+  }
+</script>
+
+<div class="toast-container">
+  {#each toasts as toast (toast.id)}
+    <div 
+      class="toast"
+      in:fly={{ x: 300, duration: 300 }}
+      out:fly={{ x: 300, duration: 200 }}
+    >
+      <Button 
+        theme={VARIANT_SECONDARY}
+        icon={icons.help}
+        actionIcon={icons.crossb}
+        on:click={() => handleDismiss(toast.id)}
+      >
+        {toast.message}
+      </Button>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .toast-container {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    z-index: 10000;
+    pointer-events: none;
+  }
+
+  .toast {
+    pointer-events: auto;
+  }
+</style>

package/dist/Components/Toast/Toast.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Toast;
+type Toast = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Toast: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Toast/toastStore.d.ts

@@ -0,0 +1,35 @@
+export namespace toastStore {
+    export { subscribe };
+    /**
+     * Show a toast notification
+     * @param {string} message - Toast message
+     * @param {number} [duration=4000] - Auto-dismiss duration in ms (0 = no auto-dismiss)
+     * @returns {string} Toast ID
+     */
+    export function show(message: string, duration?: number): string;
+    /**
+     * Dismiss a specific toast
+     * @param {string} id - Toast ID to dismiss
+     */
+    export function dismiss(id: string): void;
+    /**
+     * Dismiss all toasts
+     */
+    export function dismissAll(): void;
+}
+export type Toast = {
+    /**
+     * - Unique toast identifier
+     */
+    id: string;
+    /**
+     * - Toast message content
+     */
+    message: string;
+    /**
+     * - Auto-dismiss duration in ms (0 = no auto-dismiss)
+     */
+    duration?: number | undefined;
+};
+declare const subscribe: (this: void, run: import("svelte/store").Subscriber<Toast[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+export {};

package/dist/Components/Toast/toastStore.js

@@ -0,0 +1,53 @@
+import { writable } from 'svelte/store';
+
+/**
+ * @typedef {Object} Toast
+ * @property {string} id - Unique toast identifier
+ * @property {string} message - Toast message content
+ * @property {number} [duration] - Auto-dismiss duration in ms (0 = no auto-dismiss)
+ */
+
+function createToastStore() {
+  const { subscribe, update } = writable(/** @type {Toast[]} */ ([]));
+
+  let idCounter = 0;
+
+  return {
+    subscribe,
+    /**
+     * Show a toast notification
+     * @param {string} message - Toast message
+     * @param {number} [duration=4000] - Auto-dismiss duration in ms (0 = no auto-dismiss)
+     * @returns {string} Toast ID
+     */
+    show(message, duration = 4000) {
+      const id = `toast-${idCounter++}`;
+      const toast = { id, message, duration };
+      
+      update(toasts => [...toasts, toast]);
+
+      if (duration > 0) {
+        setTimeout(() => {
+          this.dismiss(id);
+        }, duration);
+      }
+
+      return id;
+    },
+    /**
+     * Dismiss a specific toast
+     * @param {string} id - Toast ID to dismiss
+     */
+    dismiss(id) {
+      update(toasts => toasts.filter(t => t.id !== id));
+    },
+    /**
+     * Dismiss all toasts
+     */
+    dismissAll() {
+      update(() => []);
+    }
+  };
+}
+
+export const toastStore = createToastStore();

package/dist/Components/Tooltip.svelte

@@ -92,7 +92,7 @@
     bottom: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%);
-    min-width: 150px;
+    min-width: 200px;
     max-width: 500px;
     white-space: normal;
     z-index: 10000;

package/dist/Components/TreeDirectory.svelte

@@ -69,6 +69,18 @@
     dispatch('itemClick', { item, type: 'file' });
   }
   
+  /**
+   * Handle right-click on an item
+   * @param {MouseEvent} e
+   * @param {any} item
+   * @param {'file' | 'folder'} type
+   */
+  function handleItemRightClick(e, item, type) {
+    e.preventDefault();
+    e.stopPropagation();
+    dispatch('itemRightClick', { item, type, originalEvent: e });
+  }
+  
   /**
    * Handle drag start on a file item
    * @param {DragEvent} e
@@ -246,6 +258,7 @@
         class="folder" 
         class:drag-over={isDragOver}
         on:click={() => toggle(id, item)} 
+        on:contextmenu={(e) => handleItemRightClick(e, item, 'folder')}
         on:keydown={() => {}} 
         on:dragover={draggable ? (e) => handleDragOver(e, item) : undefined}
         on:dragleave={draggable ? handleDragLeave : undefined}
@@ -258,6 +271,7 @@
           icon={icons.folder} 
           actionIcon={icons.icon_expand} 
           actionIconSize="15px" 
+          correctTextOffset={true}
           actionIconRotation={open ? 0 : -90}
           borderRadiusTopLeft={isNested ? '15px' : '25px'}
           borderRadiusTopRight={isNested ? '15px' : '25px'}
@@ -284,6 +298,7 @@
             {draggable}
             currentPath={buildChildPath(item.name)}
             on:itemClick 
+            on:itemRightClick
             on:itemDrop
             on:dragStart
           />
@@ -297,6 +312,7 @@
         draggable={draggable}
         on:dragstart={draggable ? (e) => handleDragStart(e, item) : undefined}
         on:click={() => handleItemClick(item)} 
+        on:contextmenu={(e) => handleItemRightClick(e, item, 'file')}
         on:keydown={() => {}} 
         role="button" 
         tabindex="0"
@@ -304,6 +320,7 @@
         <Button 
           theme={item.variant || VARIANT_SECONDARY}
           icon={itemIcon}
+          correctTextOffset={true}
           actionIconSize="15px"
           borderRadiusTopLeft={isNested ? '15px' : '25px'}
           borderRadiusTopRight={isNested ? '15px' : '25px'}
@@ -341,9 +358,11 @@
     opacity: 0.5;
   }
   :global(.suffix-icon) {
-    margin-left: 8px;
+    margin-left: 10px;
     display: inline-flex;
     align-items: center;
+    transform: translateY(2px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
   }
   .file-item {
     transition: opacity 0.15s ease;

package/dist/Components/TreeDirectory.svelte.d.ts

@@ -20,6 +20,7 @@ type TreeDirectory = SvelteComponent<{
     collapseAll?: (() => void) | undefined;
 }, {
     itemClick: CustomEvent<any>;
+    itemRightClick: CustomEvent<any>;
     dragStart: CustomEvent<any>;
     itemDrop: CustomEvent<any>;
 } & {
@@ -53,6 +54,7 @@ declare const TreeDirectory: $$__sveltets_2_IsomorphicComponent<{
     collapseAll?: (() => void) | undefined;
 }, {
     itemClick: CustomEvent<any>;
+    itemRightClick: CustomEvent<any>;
     dragStart: CustomEvent<any>;
     itemDrop: CustomEvent<any>;
 } & {

package/dist/icons.d.ts

@@ -8,4 +8,7 @@ export namespace icons {
     let check: string;
     let help: string;
     let any_ai: string;
+    let active: string;
+    let pause: string;
+    let total: string;
 }

package/dist/icons.js

@@ -8,4 +8,7 @@ export const icons = {
   check: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0909 7.54545C14.0909 3.9305 11.1604 1 7.54545 1C3.9305 1 1 3.9305 1 7.54545C1 11.1604 3.9305 14.0909 7.54545 14.0909C11.1604 14.0909 14.0909 11.1604 14.0909 7.54545Z"  stroke-width="1.5"/><path d="M5.60596 8.05002L7.28552 9.00003L8.9999 6.09094" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
   help: '<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.12598 1C8.80364 1 10.2761 1.41608 11.3467 2.30859C12.441 3.22103 13 4.53608 13 6.07031C13 8.64914 11.1429 9.84464 10.0557 10.5439L10.0498 10.5479C9.59811 10.834 9.28616 11.0529 9.08203 11.2695C8.90303 11.4596 8.86426 11.5868 8.86426 11.7109V12.0938C8.86426 12.2909 8.80556 12.474 8.70703 12.6289C9.12558 13.0883 9.38867 13.687 9.38867 14.3574C9.38856 15.8568 8.05087 17 6.60156 17C5.13309 16.9998 3.81554 15.875 3.81543 14.3574C3.81543 13.7321 4.03654 13.1746 4.39648 12.7324C4.25235 12.5591 4.16504 12.3368 4.16504 12.0938V11.7109C4.16504 9.40212 5.70071 8.25591 6.67773 7.51758C7.09258 7.20371 7.37411 6.98167 7.56445 6.75684C7.72926 6.56215 7.7763 6.42236 7.77637 6.27148C7.77637 5.9518 7.68601 5.82933 7.63672 5.78223C7.58081 5.72894 7.42619 5.62896 7.04883 5.62891C6.69244 5.62891 6.4936 5.74276 6.37793 5.86816C6.25387 6.00289 6.12603 6.25977 6.12598 6.70898C6.12598 7.26127 5.67826 7.70898 5.12598 7.70898H2C1.44772 7.70898 1 7.26127 1 6.70898C1.00007 5.04942 1.6296 3.59897 2.75098 2.57031C3.86552 1.54796 5.40077 1.00005 7.12598 1Z" stroke-width="1.5" stroke-linejoin="round"/></svg>',
   any_ai: '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.88735 4.12364C8.03771 0.625957 12.9862 0.625724 14.1366 4.12364C14.5667 5.43135 15.5924 6.45705 16.9001 6.88716L16.9167 6.89268L16.9319 6.89821L17.0299 6.93273L17.0423 6.93688L17.0555 6.94171C20.3467 8.17272 20.3465 12.8508 17.0555 14.0818L17.0251 14.0929L16.9277 14.1267L16.9132 14.1315L16.9001 14.1364C15.5925 14.5665 14.5667 15.5921 14.1366 16.8999C12.9862 20.3975 8.03863 20.3981 6.88804 16.9006L6.88735 16.8999C6.45723 15.5922 5.43157 14.5665 4.12383 14.1364L4.12314 14.1357C0.625653 12.9851 0.626209 8.03752 4.12383 6.88716C5.43159 6.45704 6.45725 5.43121 6.88735 4.12364ZM12.3115 10.161L12.2687 10.1472L12.2279 10.1313L12.143 10.0975L12.1023 10.0816L12.0622 10.0622C11.4966 9.79891 11.06 9.31206 10.8628 8.71224L10.512 7.64467L10.1612 8.71224C9.93579 9.39762 9.39782 9.9356 8.71243 10.161L7.64556 10.5111L8.71243 10.8626L8.83949 10.9081C9.42249 11.139 9.88476 11.6012 10.1156 12.1842L10.1612 12.3113L10.512 13.3775L10.8628 12.3113C11.06 11.7116 11.4966 11.2247 12.0622 10.9613L12.1016 10.9427L12.143 10.9261L12.2279 10.8923L12.2687 10.8764L12.3115 10.8626L13.3784 10.5111L12.3115 10.161Z" stroke-width="3"/></svg>',
+  active: '<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 4.00724C1 1.59184 3.70874 0.166494 5.69922 1.53459L10.6387 4.93107C12.3726 6.12312 12.3726 8.68239 10.6387 9.87443L5.69922 13.2709C3.70874 14.639 1 13.2137 1 10.7983V4.00724Z" stroke-width="1.7"/></svg>',
+  pause: '<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.8125 3.26984C5.8125 2.01624 4.73519 1 3.40625 1C2.07731 1 1 2.01624 1 3.26984V10.0794C1 11.333 2.07731 12.3492 3.40625 12.3492C4.73519 12.3492 5.8125 11.333 5.8125 10.0794V3.26984Z" stroke-width="1.7"/><path d="M13.25 3.26984C13.25 2.01624 12.1727 1 10.8438 1C9.51481 1 8.4375 2.01624 8.4375 3.26984V10.0794C8.4375 11.333 9.51481 12.3492 10.8438 12.3492C12.1727 12.3492 13.25 11.333 13.25 10.0794V3.26984Z" stroke-width="1.7"/></svg>',
+  total: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0909 7.54545C14.0909 3.9305 11.1604 1 7.54545 1C3.9305 1 1 3.9305 1 7.54545C1 11.1604 3.9305 14.0909 7.54545 14.0909C11.1604 14.0909 14.0909 11.1604 14.0909 7.54545Z" stroke-width="1.7"/></svg>',
 };

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { default as BGChain } from "./Structure/BG/BGChain.svelte";
 export { default as BGGears } from "./Structure/BG/BGGears.svelte";
 export { default as Button } from "./Components/Button.svelte";
 export { default as IconButton } from "./Components/IconButton.svelte";
+export { default as LinearList } from "./Components/LinearList.svelte";
 export { default as Separator } from "./Components/Separator.svelte";
 export { default as TreeDirectory } from "./Components/TreeDirectory.svelte";
 export { default as InputBox } from "./Components/InputBox.svelte";
@@ -17,7 +18,9 @@ export { default as TabBar } from "./Components/TabBar.svelte";
 export { default as Dropdown } from "./Components/Dropdown.svelte";
 export { default as ContextMenu } from "./Components/ContextMenu.svelte";
 export { default as Popup } from "./Components/Popup/Popup.svelte";
-export { popupStore } from "./Components/popupStore.js";
+export { popupStore } from "./Components/Popup/popupStore.js";
+export { default as Toast } from "./Components/Toast/Toast.svelte";
+export { toastStore } from "./Components/Toast/toastStore.js";
 export { default as SpecialAction } from "./Components/Special/SpecialAction.svelte";
 export { default as SpecialParagraph } from "./Components/Special/SpecialParagraph.svelte";
 export { default as ConfirmPopup } from "./Components/Popup/ConfirmPopup.svelte";

package/dist/index.js

@@ -11,6 +11,7 @@ export { default as BGGears } from "./Structure/BG/BGGears.svelte";
 /* Components */
 export { default as Button } from "./Components/Button.svelte";
 export { default as IconButton } from "./Components/IconButton.svelte";
+export { default as LinearList } from "./Components/LinearList.svelte";
 export { default as Separator } from "./Components/Separator.svelte";
 export { default as TreeDirectory } from "./Components/TreeDirectory.svelte";
 export { default as InputBox } from "./Components/InputBox.svelte";
@@ -20,7 +21,9 @@ export { default as TabBar } from "./Components/TabBar.svelte";
 export { default as Dropdown } from "./Components/Dropdown.svelte";
 export { default as ContextMenu } from "./Components/ContextMenu.svelte";
 export { default as Popup } from "./Components/Popup/Popup.svelte";
-export { popupStore } from "./Components/popupStore.js";
+export { popupStore } from "./Components/Popup/popupStore.js";
+export { default as Toast } from "./Components/Toast/Toast.svelte";
+export { toastStore } from "./Components/Toast/toastStore.js";
 export { default as SpecialAction } from "./Components/Special/SpecialAction.svelte";
 export { default as SpecialParagraph } from "./Components/Special/SpecialParagraph.svelte";
 /* Popup Presets */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coyalabs/bts-style",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "BTS Theme Svelte component templates",
   "type": "module",
   "exports": {
@@ -19,7 +19,7 @@
     "!dist/**/*.spec.*"
   ],
   "scripts": {
-    "package": "svelte-kit sync && svelte-package -o dist",
+    "package": "svelte-kit sync && svelte-package -o dist && echo Copying package to node_modules... && xcopy /E /I /Y dist C:\\Users\\Alan\\Documents\\GitHub\\coya-api-backend\\subservice\\subservice_api\\cpaas_frontend\\node_modules\\@coyalabs\\bts-style\\dist && xcopy /E /I /Y public C:\\Users\\Alan\\Documents\\GitHub\\coya-api-backend\\subservice\\subservice_api\\cpaas_frontend\\node_modules\\@coyalabs\\bts-style\\public && copy /Y package.json C:\\Users\\Alan\\Documents\\GitHub\\coya-api-backend\\subservice\\subservice_api\\cpaas_frontend\\node_modules\\@coyalabs\\bts-style\\ && echo Copy complete!",
     "prepublishOnly": "npm run package",
     "release": "npm version patch && npm publish --access public"
   },

package/dist/Components/popupStore.d.ts

@@ -1,31 +0,0 @@
-export namespace popupStore {
-    export { subscribe };
-    export function open(title: any, component: any, props?: {}, subtitle?: string): void;
-    export function close(): void;
-    export function confirm(title: string, message: string, options?: {
-        onConfirm?: (() => void) | undefined;
-        onCancel?: (() => void) | undefined;
-        confirmText?: string | undefined;
-        cancelText?: string | undefined;
-    }): void;
-    export function alert(title: string, message: string, options?: {
-        onOk?: (() => void) | undefined;
-        okText?: string | undefined;
-    }): void;
-    export function prompt(title: string, message: string, options?: {
-        onSubmit?: ((value: string) => void) | undefined;
-        onCancel?: (() => void) | undefined;
-        placeholder?: string | undefined;
-        submitText?: string | undefined;
-        cancelText?: string | undefined;
-        label?: string | undefined;
-    }): void;
-}
-declare const subscribe: (this: void, run: import("svelte/store").Subscriber<{
-    isOpen: boolean;
-    title: string;
-    subtitle?: string;
-    component: any;
-    props: any;
-}>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
-export {};