@coyalabs/bts-style 1.3.15 → 1.3.18

package/README.md

@@ -340,6 +340,11 @@ Text input field with icon support and theme matching.
 - `value?: string` - Input value (bindable)
 - `placeholder?: string` - Placeholder text
 - `type?: string` - Input type (default: `'text'`)
+- `multiline?: boolean` - Render a textarea instead of an input (default: `false`)
+- `maxRows?: number` - Maximum visible rows for auto-growing multiline inputs (default: `4`)
+- `expandOnNewline?: boolean` - Keep a multiline input visually single-line until the value contains a newline (default: `false`)
+- `newlineOnCtrlEnter?: boolean` - For multiline inputs, plain Enter submits the nearest form or bubbles to parent handlers, while `Ctrl+Enter` and `Shift+Enter` insert a newline (default: `false`)
+- `resize?: 'none' | 'both' | 'horizontal' | 'vertical'` - Textarea resize mode when `multiline` is enabled (default: `'vertical'`)
 - `theme?: 'full' | 'primary' | 'secondary' | 'filled'` - Visual theme
 - `icon?: string` - Left icon SVG
 - All BaseContainer corner radius props
@@ -357,6 +362,33 @@ Text input field with icon support and theme matching.
   icon={icons.pen}
   theme="primary"
 />
+
+<InputBox
+  bind:value={username}
+  placeholder="Write a longer note..."
+  icon={icons.pen}
+  multiline={true}
+  maxRows={6}
+  resize="vertical"
+/>
+
+<InputBox
+  bind:value={username}
+  placeholder="Looks like one line until you press Enter..."
+  icon={icons.pen}
+  multiline={true}
+  expandOnNewline={true}
+  maxRows={4}
+/>
+
+<InputBox
+  bind:value={username}
+  placeholder="Press Enter to submit, Ctrl+Enter for a newline"
+  icon={icons.pen}
+  multiline={true}
+  newlineOnCtrlEnter={true}
+  maxRows={4}
+/>
 ```
 
 ---
@@ -429,6 +461,7 @@ Reusable overflow wrapper with theme-matching custom scrollbar styling.
 - `thumbColor?: string` - Scrollbar thumb color (default: `'rgba(161, 143, 143, 0.3)'`)
 - `thumbHoverColor?: string` - Scrollbar thumb hover color (default: `'rgba(161, 143, 143, 0.5)'`)
 - `borderRadius?: string` - Scrollbar track/thumb radius (default: `'4px'`)
+- `hideScrollbarUntilScroll?: boolean` - Hide scrollbars until the container has been scrolled from its initial position (default: `false`)
 
 **Example:**
 ```svelte
@@ -441,6 +474,12 @@ Reusable overflow wrapper with theme-matching custom scrollbar styling.
     Scrollable content with BTS-themed scrollbar.
   </div>
 </ScrollContainer>
+
+<ScrollContainer overflowY="auto" maxHeight="320px" hideScrollbarUntilScroll={true}>
+  <div style="min-height: 640px;">
+    Scrollbars stay hidden until the first real scroll.
+  </div>
+</ScrollContainer>
 ```
 
 **Features:**
@@ -779,13 +818,18 @@ Writable store for controlling the popup.
 popupStore.open(
   title: string,
   component: SvelteComponent,
-  props?: object,
+  props?: object & {
+    popupWidthRatio?: number
+  },
   subtitle?: string
 )
 ```
 
 Opens popup with custom component.
 
+`popupWidthRatio` multiplies the default popup width while keeping the dialog capped to the viewport.
+Use `1` for the current width, values below `1` for narrower dialogs, and values above `1` for wider dialogs.
+
 **Example:**
 ```svelte
 <script>
@@ -797,7 +841,7 @@ Opens popup with custom component.
   popupStore.open(
     'Settings', 
     MyCustomPopup, 
-    { userId: 123 },
+    { userId: 123, popupWidthRatio: 1.25 },
     'Configure your preferences'
   )
 }>
@@ -814,7 +858,8 @@ popupStore.confirm(
     onConfirm?: () => void,
     onCancel?: () => void,
     confirmText?: string,
-    cancelText?: string
+    cancelText?: string,
+    popupWidthRatio?: number
   }
 )
 ```
@@ -831,7 +876,8 @@ Shows confirmation dialog.
       onConfirm: () => deleteItem(),
       onCancel: () => console.log('Cancelled'),
       confirmText: 'Delete',
-      cancelText: 'Keep'
+      cancelText: 'Keep',
+      popupWidthRatio: 1.15
     }
   )
 }>
@@ -846,7 +892,8 @@ popupStore.alert(
   message: string,
   options?: {
     onOk?: () => void,
-    okText?: string
+    okText?: string,
+    popupWidthRatio?: number
   }
 )
 ```
@@ -860,7 +907,8 @@ popupStore.alert(
   'Your changes have been saved!',
   {
     onOk: () => navigateToHome(),
-    okText: 'Got it'
+    okText: 'Got it',
+    popupWidthRatio: 0.9
   }
 );
 ```
@@ -875,7 +923,8 @@ popupStore.prompt(
     onCancel?: () => void,
     placeholder?: string,
     submitText?: string,
-    cancelText?: string
+    cancelText?: string,
+    popupWidthRatio?: number
   }
 )
 ```
@@ -891,7 +940,8 @@ popupStore.prompt(
     onSubmit: (name) => updateProfile(name),
     placeholder: 'Your name...',
     submitText: 'Save',
-    cancelText: 'Skip'
+    cancelText: 'Skip',
+    popupWidthRatio: 0.95
   }
 );
 ```

package/dist/Base/BaseText.svelte

@@ -35,7 +35,8 @@
 
   $: usesContent = content !== null && content !== undefined;
   $: tagName = as || (markdown && usesContent ? 'div' : 'span');
-  $: renderedContent = markdown && usesContent ? renderMarkdown(content) : '';
+ // @ts-ignore
+   $: renderedContent = markdown && usesContent ? renderMarkdown(content) : '';
 </script>
 
 <svelte:element
@@ -122,7 +123,7 @@
     color: #C7BDC1;
   }
   .text[data-markdown='true'] :global(a) {
-    color: #FFEFF6;
+    color: #67abff;
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 0.14em;

package/dist/Components/ContextMenu.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { onMount, tick } from 'svelte';
   import { expoOut } from 'svelte/easing';
   import BaseContainer from '../Base/BaseContainer.svelte';
   import BaseText from '../Base/BaseText.svelte';
@@ -33,6 +34,68 @@
     'bottom-right': 'bottom right'
   };
 
+  const VIEWPORT_PADDING = 12;
+
+  /** @type {HTMLDivElement | null} */
+  let anchorRef = null;
+
+  let viewportOffsetX = 0;
+  let viewportOffsetY = 0;
+
+  /** @type {number | null} */
+  let updateFrame = null;
+
+  /**
+   * @param {number} position
+   * @param {number} size
+   * @param {number} viewportSize
+   */
+  function getViewportOffset(position, size, viewportSize) {
+    const viewportMin = VIEWPORT_PADDING;
+    const viewportMax = viewportSize - VIEWPORT_PADDING;
+    const availableSize = Math.max(viewportSize - VIEWPORT_PADDING * 2, 0);
+
+    if (size >= availableSize) {
+      return viewportMin - position;
+    }
+
+    if (position < viewportMin) {
+      return viewportMin - position;
+    }
+
+    const end = position + size;
+    if (end > viewportMax) {
+      return viewportMax - end;
+    }
+
+    return 0;
+  }
+
+  function updateViewportOffset() {
+    if (!anchorRef || typeof window === 'undefined') {
+      return;
+    }
+
+    const rect = anchorRef.getBoundingClientRect();
+    viewportOffsetX = getViewportOffset(rect.left, rect.width, window.innerWidth);
+    viewportOffsetY = getViewportOffset(rect.top, rect.height, window.innerHeight);
+  }
+
+  function scheduleViewportOffsetUpdate() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    if (updateFrame !== null) {
+      cancelAnimationFrame(updateFrame);
+    }
+
+    updateFrame = requestAnimationFrame(() => {
+      updateFrame = null;
+      updateViewportOffset();
+    });
+  }
+
   /**
    * Custom scale transition with independent x and y animations
    * @param {HTMLElement} node
@@ -91,45 +154,128 @@
   function handleSelect(value) {
     onSelect(value);
   }
+
+  onMount(() => {
+    scheduleViewportOffsetUpdate();
+    void tick().then(() => {
+      scheduleViewportOffsetUpdate();
+    });
+
+    /** @type {ResizeObserver | null} */
+    let resizeObserver = null;
+
+    if (typeof ResizeObserver !== 'undefined' && anchorRef) {
+      resizeObserver = new ResizeObserver(() => {
+        scheduleViewportOffsetUpdate();
+      });
+
+      resizeObserver.observe(anchorRef);
+    }
+
+    window.addEventListener('resize', scheduleViewportOffsetUpdate);
+    window.addEventListener('scroll', scheduleViewportOffsetUpdate, true);
+
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener('resize', scheduleViewportOffsetUpdate);
+      window.removeEventListener('scroll', scheduleViewportOffsetUpdate, true);
+
+      if (updateFrame !== null) {
+        cancelAnimationFrame(updateFrame);
+      }
+    };
+  });
 </script>
 
-<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 class="context-menu-anchor" bind:this={anchorRef}>
+  <div
+    class="context-menu-clamp"
+    style="
+      --context-menu-offset-x: {viewportOffsetX}px;
+      --context-menu-offset-y: {viewportOffsetY}px;
+      --context-menu-max-width: calc(100vw - {VIEWPORT_PADDING * 2}px);
+      --context-menu-max-height: calc(100vh - {VIEWPORT_PADDING * 2}px);
+    "
+  >
+    <div 
+      class="context-menu-wrapper"
+      style:transform-origin={originMap[origin]}
+      in:scaleIn
+      out:scaleOut
+    >
+      <div class="context-menu-surface">
+        <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>
+          {/each}
+          <div style="height: 0.3rem;"></div>
+        </BaseContainer>
       </div>
-    {/each}
-    <div style="height: 0.3rem;"></div>
-  </BaseContainer>
+    </div>
+  </div>
 </div>
 
 <style>
+  .context-menu-anchor {
+    display: inline-block;
+  }
+
+  .context-menu-clamp {
+    display: inline-block;
+    transform: translate3d(var(--context-menu-offset-x), var(--context-menu-offset-y), 0);
+  }
+
   .context-menu-wrapper {
     display: inline-block;
   }
 
+  .context-menu-surface {
+    display: inline-block;
+    max-width: var(--context-menu-max-width);
+    max-height: var(--context-menu-max-height);
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-radius: 28px;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(161, 143, 143, 0.45) rgba(62, 53, 58, 0.35);
+  }
+
+  .context-menu-surface::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .context-menu-surface::-webkit-scrollbar-track {
+    background: rgba(62, 53, 58, 0.35);
+  }
+
+  .context-menu-surface::-webkit-scrollbar-thumb {
+    background: rgba(161, 143, 143, 0.45);
+    border-radius: 999px;
+  }
+
+  .context-menu-surface::-webkit-scrollbar-thumb:hover {
+    background: rgba(161, 143, 143, 0.65);
+  }
+
   .category-items {
     display: flex;
     flex-direction: column;

package/dist/Components/InputBox.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { onMount, tick } from 'svelte';
   import BaseContainer from '../Base/BaseContainer.svelte';
   import BaseIcon from '../Base/BaseIcon.svelte';
   import { icons } from '../icons.js';
@@ -28,6 +29,35 @@
    */
   export let type = 'text';
 
+  /**
+   * @type {boolean}
+   */
+  export let multiline = false;
+
+  /**
+   * @type {number}
+   */
+  export let rows = 4;
+
+  /**
+   * Keep multiline inputs visually compact (1 row) until the value contains a newline.
+   * @type {boolean}
+   */
+  export let expandOnNewline = false;
+
+  /**
+    * When enabled for multiline inputs, plain Enter submits the nearest form
+    * or falls through to parent handlers, while Ctrl+Enter and Shift+Enter
+    * insert a newline.
+   * @type {boolean}
+   */
+  export let newlineOnCtrlEnter = false;
+
+  /**
+   * @type {'none' | 'both' | 'horizontal' | 'vertical'}
+   */
+  export let resize = 'vertical';
+
   /**
    * @type {string | null}
    */
@@ -62,27 +92,148 @@
    * @type {boolean}
    */
   export let autofocus = false;
+
+  /**
+   * @type {boolean}
+   */
+  export let disabled = false;
+
+  /** @type {HTMLInputElement | HTMLTextAreaElement | null} */
+  let inputRef = null;
+
+  let mounted = false;
+
+  let hasExplicitNewline = false;
+
+  /** @type {number | null} */
+  let focusFrame = null;
+
+  function clearScheduledFocus() {
+    if (focusFrame !== null) {
+      cancelAnimationFrame(focusFrame);
+      focusFrame = null;
+    }
+  }
+
+  function scheduleFocus() {
+    if (!autofocus || disabled || !inputRef) {
+      return;
+    }
+
+    clearScheduledFocus();
+    void tick().then(() => {
+      focusFrame = requestAnimationFrame(() => {
+        focusFrame = null;
+        inputRef?.focus({ preventScroll: true });
+      });
+    });
+  }
+
+  onMount(() => {
+    mounted = true;
+    scheduleFocus();
+
+    return () => {
+      clearScheduledFocus();
+    };
+  });
+
+  $: hasExplicitNewline = typeof value === 'string' && value.includes('\n');
+  $: effectiveRows = expandOnNewline && !hasExplicitNewline ? 1 : rows;
+
+  $: if (mounted && autofocus && inputRef) {
+    scheduleFocus();
+  }
+
+  export function focus() {
+    if (disabled) {
+      return;
+    }
+
+    inputRef?.focus({ preventScroll: true });
+  }
+
+  export function blur() {
+    inputRef?.blur();
+  }
+
+  /**
+   * @param {HTMLTextAreaElement} node
+   * @param {boolean} enabled
+   */
+  function ctrlEnterNewline(node, enabled) {
+    let isEnabled = enabled;
+
+    /**
+     * @param {KeyboardEvent} event
+     */
+    function handleKeydown(event) {
+      if (!isEnabled || event.key !== 'Enter' || event.isComposing || event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) {
+        return;
+      }
+
+      event.preventDefault();
+      node.form?.requestSubmit();
+    }
+
+    node.addEventListener('keydown', handleKeydown);
+
+    return {
+      update(/** @type {boolean} */ nextEnabled) {
+        isEnabled = nextEnabled;
+      },
+      destroy() {
+        node.removeEventListener('keydown', handleKeydown);
+      }
+    };
+  }
 </script>
 
-<div class="input-wrapper">
+<div class="input-wrapper" class:disabled>
   <BaseContainer {theme} {borderRadiusTopLeft} {borderRadiusTopRight} {borderRadiusBottomLeft} {borderRadiusBottomRight}>
-    <div class="input-content">
+    <div class="input-content" class:multiline class:multiline-expanded={multiline && effectiveRows > 1}>
       {#if icon}
-        <BaseIcon variant="toned" svg={icon} size={iconSize} />
+        <div class="icon-wrapper">
+          <BaseIcon variant="toned" svg={icon} size={iconSize} />
+        </div>
       {/if}
-      <!-- svelte-ignore a11y_autofocus -->
-      <input 
-        {type}
-        {placeholder}
-        bind:value
-        autofocus={autofocus}
-        on:input
-        on:change
-        on:focus
-        on:blur
-        on:keydown
-      />
-      <BaseIcon variant="toned" svg={icons.pen} size="15px" />
+      {#if multiline}
+        <!-- svelte-ignore a11y_autofocus -->
+        <textarea
+          bind:this={inputRef}
+          use:ctrlEnterNewline={newlineOnCtrlEnter}
+          data-newline-on-ctrl-enter={newlineOnCtrlEnter ? 'true' : undefined}
+          {placeholder}
+          bind:value
+          rows={effectiveRows}
+          autofocus={autofocus}
+          {disabled}
+          style={`resize: ${resize};`}
+          on:input
+          on:change
+          on:focus
+          on:blur
+          on:keydown
+        ></textarea>
+      {:else}
+        <!-- svelte-ignore a11y_autofocus -->
+        <input 
+          bind:this={inputRef}
+          {type}
+          {placeholder}
+          bind:value
+          autofocus={autofocus}
+          {disabled}
+          on:input
+          on:change
+          on:focus
+          on:blur
+          on:keydown
+        />
+      {/if}
+      <div class="icon-wrapper">
+        <BaseIcon variant="toned" svg={icons.pen} size="15px" />
+      </div>
     </div>
   </BaseContainer>
 </div>
@@ -92,16 +243,36 @@
     width: 100%;
   }
 
+  .input-wrapper.disabled {
+    opacity: 0.7;
+    pointer-events: none;
+    filter: saturate(0%);
+  }
+
   .input-content {
     display: flex;
     align-items: center;
     gap: 8px;
-    height: 25px; /* Match button text height */
+    min-height: 25px;
+  }
+
+  .input-content.multiline-expanded {
+    align-items: flex-start;
+  }
+
+  .icon-wrapper {
+    flex-shrink: 0;
+  }
+
+  .input-content.multiline-expanded .icon-wrapper {
+    margin-top: 0.2rem;
   }
 
   input {
     all: unset;
+    display: block;
     flex: 1;
+    min-width: 0;
     font-family: 'Noto Serif KR', serif;
     font-weight: 900;
     font-size: 17px;
@@ -109,7 +280,59 @@
     width: 100%;
   }
 
-  input::placeholder {
+  textarea {
+    /* Don't use `all: unset` — Firefox drops intrinsic sizing so `rows` stops working. */
+    display: block;
+    flex: 1;
+    min-width: 0;
+    font-family: 'Noto Serif KR', serif;
+    font-weight: 900;
+    font-size: 17px;
+    color: #E3D8D8;
+    width: 100%;
+    line-height: 1.45;
+    min-height: 1.45em;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    outline: none;
+    box-shadow: none;
+    appearance: none;
+    field-sizing: content;
+  }
+
+  textarea::-webkit-resizer {
+    background: transparent;
+    border: none;
+  }
+
+  textarea::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  textarea::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  textarea::-webkit-scrollbar-track {
+    background: rgba(227, 216, 216, 0.05);
+    border-radius: 4px;
+  }
+
+  textarea::-webkit-scrollbar-thumb {
+    background: rgba(227, 216, 216, 0.2);
+    border-radius: 4px;
+  }
+
+  textarea::-webkit-scrollbar-thumb:hover {
+    background: rgba(227, 216, 216, 0.3);
+  }
+
+  input::placeholder,
+  textarea::placeholder {
     color: rgba(227, 216, 216, 0.4);
   }
 </style>