@coyalabs/bts-style 1.3.10 → 1.3.12

package/dist/Components/CodeBlock.svelte

@@ -0,0 +1,167 @@
+<script>
+  import BaseContainer from '../Base/BaseContainer.svelte';
+  import BaseIcon from '../Base/BaseIcon.svelte';
+  import BaseText from '../Base/BaseText.svelte';
+  import ScrollContainer from './ScrollContainer.svelte';
+  import IconButton from './IconButton.svelte';
+  import { icons } from '../icons.js';
+  import { VARIANT_SECONDARY } from '../Base/variantTypes.js';
+
+  
+
+  /**
+   * @typedef {import('../Base/variantTypes.js').BaseContainerVariant} BaseContainerVariant
+   */
+
+  /**
+   * @type {BaseContainerVariant}
+   */
+  export let theme = VARIANT_SECONDARY;
+
+  /**
+   * @type {string}
+   */
+  export let code = '';
+
+  /**
+   * @type {string}
+   */
+  export let language = '';
+
+  /**
+   * @type {boolean}
+   */
+  export let showCopy = true;
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopRight = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomRight = '25px';
+
+  /**
+   * @type {boolean}
+   */
+  let copied = false;
+
+  /**
+   * @type {number | null}
+   */
+  let copyTimeout = null;
+
+  function copyToClipboard() {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(code).then(() => {
+        copied = true;
+        if (copyTimeout) clearTimeout(copyTimeout);
+        copyTimeout = setTimeout(() => {
+          copied = false;
+        }, 2000);
+      }).catch((err) => {
+        console.error('Failed to copy:', err);
+      });
+    } else {
+      // Fallback for older browsers
+      const textarea = document.createElement('textarea');
+      textarea.value = code;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      document.body.appendChild(textarea);
+      textarea.select();
+      try {
+        document.execCommand('copy');
+        copied = true;
+        if (copyTimeout) clearTimeout(copyTimeout);
+        copyTimeout = setTimeout(() => {
+          copied = false;
+        }, 2000);
+      } catch (err) {
+        console.error('Failed to copy:', err);
+      }
+      document.body.removeChild(textarea);
+    }
+  }
+</script>
+
+
+<div class="codeblock-wrapper">
+  <BaseContainer {theme} {borderRadiusTopLeft} {borderRadiusTopRight} {borderRadiusBottomLeft} {borderRadiusBottomRight}>
+    <div class="codeblock-content">
+      {#if language || showCopy}
+        <div class="codeblock-header">
+          {#if language}
+            <div class="language-label">
+              <BaseText textModifier="-3px" variant="button">{language}</BaseText>
+            </div>
+          {/if}
+          {#if showCopy}
+            <div class="copy-button">
+              <IconButton 
+                svg={copied ? icons.check : icons.copy} 
+                variant="toned"
+                size="18px"
+                on:click={copyToClipboard}
+              />
+            </div>
+          {/if}
+        </div>
+      {/if}
+      <ScrollContainer overflowX="auto" overflowY="hidden">
+        <pre><code>{code}</code></pre>
+      </ScrollContainer>
+    </div>
+  </BaseContainer>
+</div>
+
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+  .codeblock-wrapper {
+    width: 100%;
+  }
+  .codeblock-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .codeblock-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .language-label {
+    user-select: none;
+    opacity: 0.6;
+  }
+  .copy-button {
+    margin-left: auto;
+  }
+  pre {
+    margin: 0;
+    padding: 0;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #E3D8D8;
+    white-space: pre;
+  }
+  code {
+    display: block;
+    font-family: inherit;
+  }
+
+</style>

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

@@ -0,0 +1,40 @@
+export default CodeBlock;
+type CodeBlock = SvelteComponent<{
+    theme?: BaseContainerVariant | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    code?: string | undefined;
+    language?: string | undefined;
+    showCopy?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CodeBlock: $$__sveltets_2_IsomorphicComponent<{
+    theme?: import("../Base/variantTypes.js").BaseContainerVariant | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    code?: string | undefined;
+    language?: string | undefined;
+    showCopy?: boolean | undefined;
+}, {
+    [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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/ContextMenu.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { expoOut } from 'svelte/easing';
   import BaseContainer from '../Base/BaseContainer.svelte';
   import BaseText from '../Base/BaseText.svelte';
 
@@ -17,6 +18,56 @@
    */
   export let onSelect = () => {};
 
+  /**
+   * @type {'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'}
+   */
+  export let origin = 'top-left';
+
+  /**
+   * Map origin to transform-origin CSS value
+   */
+  const originMap = {
+    'top-left': 'top left',
+    'top-right': 'top right',
+    'bottom-left': 'bottom left',
+    'bottom-right': 'bottom right'
+  };
+
+  /**
+   * Custom scale transition with independent x and y animations
+   * @param {HTMLElement} node
+   * @param {{duration?: number, easing?: (t: number) => number}} params
+   */
+  function scaleIn(node, { duration = 250, easing = expoOut } = {}) {
+    return {
+      duration,
+      easing,
+      css: (/** @type {number} */ t) => {
+        // X animates faster (completes at ~65% of animation)
+        const scaleX = Math.min(t * 1.6, 1);
+        // Y animates at normal speed
+        const scaleY = t;
+        return `
+          transform: scaleX(${scaleX}) scaleY(${scaleY});
+          opacity: ${t};
+        `;
+      }
+    };
+  }
+
+  /**
+   * @param {HTMLElement} node
+   * @param {{duration?: number}} params
+   */
+  function scaleOut(node, { duration = 100 } = {}) {
+    return {
+      duration,
+      css: (/** @type {number} */ t) => `
+        opacity: ${t};
+      `
+    };
+  }
+
   /**
    * Group items into categories based on separators
    * @typedef {{label: string | null, items: Array<{item: {label: string, value: any, disabled?: boolean, type?: 'item' | 'separator'}, originalIndex: number}>}} Category
@@ -42,52 +93,73 @@
   }
 </script>
 
-<BaseContainer theme="filled" padding="0.5rem" borderRadiusTopLeft="15px" borderRadiusTopRight="15px" borderRadiusBottomLeft="15px" borderRadiusBottomRight="15px">
-  {#each categories as category, catIndex}
-    {#if category.label}
-      <div class="separator" class:not-first={catIndex > 0}>
-        <BaseText textModifier="-3px" variant="button">{category.label}</BaseText>
+<div 
+  class="context-menu-wrapper"
+  style:transform-origin={originMap[origin]}
+  in:scaleIn
+  out:scaleOut
+>
+  <BaseContainer theme="filled" padding="0.5rem" borderRadiusTopLeft="28px" borderRadiusTopRight="28px" borderRadiusBottomLeft="28px" borderRadiusBottomRight="28px">
+    <div style="height: 0.3rem;"></div>
+    {#each categories as category, catIndex}
+      {#if category.label}
+        <div class="separator" class:not-first={catIndex > 0}>
+          <BaseText textModifier="-4px" variant="button">{category.label}</BaseText>
+        </div>
+      {/if}
+      <div class="category-items">
+        {#each category.items as {item}}
+          <button
+            class="context-item"
+            class:selected={item.value === selectedValue}
+            class:disabled={item.disabled}
+            disabled={item.disabled}
+            on:click={() => handleSelect(item.value)}
+          >
+            {item.label}
+          </button>
+        {/each}
       </div>
-    {/if}
-    <div class="category-items">
-      {#each category.items as {item}}
-        <button
-          class="context-item"
-          class:selected={item.value === selectedValue}
-          class:disabled={item.disabled}
-          disabled={item.disabled}
-          on:click={() => handleSelect(item.value)}
-        >
-          {item.label}
-        </button>
-      {/each}
-    </div>
-  {/each}
-</BaseContainer>
+    {/each}
+    <div style="height: 0.3rem;"></div>
+  </BaseContainer>
+</div>
 
 <style>
+  .context-menu-wrapper {
+    display: inline-block;
+  }
+
   .category-items {
     display: flex;
     flex-direction: column;
+    min-width: 160px;
   }
 
   .separator {
-    opacity: 0.6;
-    padding: 0 1rem 0.5rem 1rem;
+    opacity: 0.7;
+    padding-top: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 0.5rem;
     font-size: 0.85rem;
-    margin-top: 0.5rem;
-
   }
 
   .separator.not-first {
-    padding-top: 0.5rem;
-    border-top: 1px solid rgba(227, 216, 216, 0.1);
+    padding-top: 1rem;
     margin-top: 0.5rem;
+    border-top: 1px solid rgba(227, 216, 216, 0.3);
+    margin-top: 1rem;
+    margin-bottom: 0.1rem;
+    padding-left: 0;
+    padding-right: 0;
+    margin-left: 1rem;
+    margin-right: 1rem;
   }
 
   .context-item {
     width: 100%;
-    padding: 0.75rem 1rem;
+    padding: 0.3rem 1rem;
     background: none;
     border: none;
     color: #E3D8D8;
@@ -96,20 +168,37 @@
     font-weight: 500;
     text-align: left;
     cursor: pointer;
-    transition: background-color 0.15s ease;
     border-radius: 10px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
+  }
+
+  .context-item:first-child {
+    border-radius: 15px 15px 10px 10px;
+  }
+
+  .context-item:last-child {
+    border-radius: 10px 10px 15px 15px;
+  }
+
+  .context-item:first-child:last-child {
+    border-radius: 15px;
   }
 
   .context-item:hover:not(.disabled) {
-    background-color: rgba(227, 216, 216, 0.1);
+    background-color: #9c7aaa;
+    color: black;
+    box-shadow: inset 0 2px 4px 1px rgba(255, 255, 255, 0.35);
   }
 
   .context-item.selected {
-    background-color: rgba(255, 239, 246, 0.15);
+    background-color: #402e43;
     font-weight: 700;
+    box-shadow: 
+      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
+      inset 0px 0px 9px 2px rgba(102, 88, 128, 0.5);
   }
 
   .context-item.disabled {

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

@@ -8,6 +8,7 @@ type ContextMenu = SvelteComponent<{
     }[] | undefined;
     selectedValue?: any;
     onSelect?: ((value: any) => void) | undefined;
+    origin?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
@@ -22,6 +23,7 @@ declare const ContextMenu: $$__sveltets_2_IsomorphicComponent<{
     }[] | undefined;
     selectedValue?: any;
     onSelect?: ((value: any) => void) | undefined;
+    origin?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/Components/Dropdown.svelte

@@ -163,7 +163,7 @@
       {theme}
       {icon}
       actionIcon={icons.icon_expand}
-      actionIconSize="12px" 
+      actionIconSize="15px" 
       actionIconRotation={isOpen ? 180 : 0}
       {borderRadiusTopLeft}
       {borderRadiusTopRight}
@@ -184,7 +184,7 @@
       top: {menuPosition.top}px;
       left: {menuPosition.left}px;
       width: {menuPosition.width}px;
-      z-index: 10001;
+      z-index: 100001;
     "
   >
     <ContextMenu items={options} selectedValue={value} onSelect={selectOption} />

package/dist/Components/InputBox.svelte

@@ -102,9 +102,9 @@
   input {
     all: unset;
     flex: 1;
-    font-family: 'Satoshi', sans-serif;
-    font-weight: 700;
-    font-size: 18px;
+    font-family: 'Noto Serif KR', serif;
+    font-weight: 900;
+    font-size: 17px;
     color: #E3D8D8;
     width: 100%;
   }

package/dist/Components/LinearList.svelte

@@ -82,8 +82,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 0;
-    border-bottom: 2px solid rgba(161, 143, 143, 0.24);
+    padding: 15px 0;
+    background-image: linear-gradient(to right, #4a3b5561 50%, transparent 50%);
+    background-size: 8px 2px;
+    background-position: 0 100%;
+    background-repeat: repeat-x;
+    padding-bottom: 15px;
   }
 
   .list-item:last-child {
@@ -98,6 +102,7 @@
 
   .actions {
     display: flex;
+    margin-left: 1rem;
     gap: 0.5rem;
     align-items: center;
   }

package/dist/Components/LoadingSpinner.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { gearSVGLight } from '../Structure/BG/assetGear.js';
+
+  /**
+   * Size of the spinner (e.g., '20px', '2rem', '50px')
+   * @type {string}
+   */
+  export let size = '20px';
+
+  /**
+   * Animation speed in seconds (default 2s for one full rotation)
+   * @type {number}
+   */
+  export let speed = 2;
+
+  /**
+   * Custom color for the spinner (optional, uses default if not provided)
+   * @type {string | null}
+   */
+  export let color = '#E3D8D8';
+</script>
+
+<div 
+  class="loading-spinner"
+  style:width={size}
+  style:height={size}
+  style:--spin-speed="{speed}s"
+  style:--spinner-color={color}
+>
+  {@html gearSVGLight}
+</div>
+
+<style>
+  .loading-spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    animation: spin var(--spin-speed) linear infinite;
+  }
+
+  .loading-spinner :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .loading-spinner :global(path) {
+    fill: var(--spinner-color, currentColor);
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

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

@@ -0,0 +1,30 @@
+export default LoadingSpinner;
+type LoadingSpinner = SvelteComponent<{
+    speed?: number | undefined;
+    size?: string | undefined;
+    color?: string | null | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const LoadingSpinner: $$__sveltets_2_IsomorphicComponent<{
+    speed?: number | undefined;
+    size?: string | undefined;
+    color?: string | null | undefined;
+}, {
+    [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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Popup/Popup.svelte

@@ -61,7 +61,7 @@
     backdrop-filter: blur(3px);
     display: grid;
     place-items: center;
-    z-index: 9999;
+    z-index: 99999;
   }
 
   .dialog {

package/dist/Components/ScrollContainer.svelte

@@ -0,0 +1,95 @@
+<script>
+  /**
+   * @type {'auto' | 'scroll' | 'hidden' | 'visible'}
+   */
+  export let overflowX = 'auto';
+
+  /**
+   * @type {'auto' | 'scroll' | 'hidden' | 'visible'}
+   */
+  export let overflowY = 'auto';
+
+  /**
+   * @type {string}
+   */
+  export let width = '100%';
+
+  /**
+   * @type {string}
+   */
+  export let height = 'auto';
+
+  /**
+   * @type {string}
+   */
+  export let maxWidth = '100%';
+
+  /**
+   * @type {string}
+   */
+  export let maxHeight = 'none';
+
+  /**
+   * @type {string}
+   */
+  export let scrollbarSize = '8px';
+
+  /**
+   * @type {string}
+   */
+  export let trackColor = 'rgba(161, 143, 143, 0.1)';
+
+  /**
+   * @type {string}
+   */
+  export let thumbColor = 'rgba(161, 143, 143, 0.3)';
+
+  /**
+   * @type {string}
+   */
+  export let thumbHoverColor = 'rgba(161, 143, 143, 0.5)';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadius = '4px';
+</script>
+
+<div
+  class="scroll-container"
+  style="--overflow-x: {overflowX}; --overflow-y: {overflowY}; --width: {width}; --height: {height}; --max-width: {maxWidth}; --max-height: {maxHeight}; --scrollbar-size: {scrollbarSize}; --scroll-track-color: {trackColor}; --scroll-thumb-color: {thumbColor}; --scroll-thumb-hover-color: {thumbHoverColor}; --scroll-radius: {borderRadius};"
+>
+  <slot />
+</div>
+
+<style>
+  .scroll-container {
+    width: var(--width);
+    height: var(--height);
+    max-width: var(--max-width);
+    max-height: var(--max-height);
+    overflow-x: var(--overflow-x);
+    overflow-y: var(--overflow-y);
+    scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);
+    scrollbar-width: thin;
+  }
+
+  .scroll-container::-webkit-scrollbar {
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+  }
+
+  .scroll-container::-webkit-scrollbar-track {
+    background: var(--scroll-track-color);
+    border-radius: var(--scroll-radius);
+  }
+
+  .scroll-container::-webkit-scrollbar-thumb {
+    background: var(--scroll-thumb-color);
+    border-radius: var(--scroll-radius);
+  }
+
+  .scroll-container::-webkit-scrollbar-thumb:hover {
+    background: var(--scroll-thumb-hover-color);
+  }
+</style>