@coyalabs/bts-style 1.3.14 → 1.3.17

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>

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

@@ -6,10 +6,18 @@ type InputBox = SvelteComponent<{
     borderRadiusBottomLeft?: string | undefined;
     borderRadiusBottomRight?: string | undefined;
     icon?: string | null | undefined;
+    blur?: (() => void) | undefined;
+    focus?: (() => void) | undefined;
+    resize?: "none" | "both" | "horizontal" | "vertical" | undefined;
     iconSize?: string | undefined;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     placeholder?: string | undefined;
     type?: string | undefined;
+    multiline?: boolean | undefined;
+    rows?: number | undefined;
+    expandOnNewline?: boolean | undefined;
+    newlineOnCtrlEnter?: boolean | undefined;
     autofocus?: boolean | undefined;
 }, {
     input: Event;
@@ -21,6 +29,9 @@ type InputBox = SvelteComponent<{
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
+} & {
+    focus: () => void;
+    blur: () => void;
 };
 declare const InputBox: $$__sveltets_2_IsomorphicComponent<{
     theme?: import("../Base/variantTypes.js").BaseContainerVariant | undefined;
@@ -29,10 +40,18 @@ declare const InputBox: $$__sveltets_2_IsomorphicComponent<{
     borderRadiusBottomLeft?: string | undefined;
     borderRadiusBottomRight?: string | undefined;
     icon?: string | null | undefined;
+    blur?: (() => void) | undefined;
+    focus?: (() => void) | undefined;
+    resize?: "none" | "both" | "horizontal" | "vertical" | undefined;
     iconSize?: string | undefined;
+    disabled?: boolean | undefined;
     value?: string | undefined;
     placeholder?: string | undefined;
     type?: string | undefined;
+    multiline?: boolean | undefined;
+    rows?: number | undefined;
+    expandOnNewline?: boolean | undefined;
+    newlineOnCtrlEnter?: boolean | undefined;
     autofocus?: boolean | undefined;
 }, {
     input: Event;
@@ -42,7 +61,10 @@ declare const InputBox: $$__sveltets_2_IsomorphicComponent<{
     keydown: KeyboardEvent;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    focus: () => void;
+    blur: () => void;
+}, 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;

package/dist/Components/Popup/AlertPopup.svelte

@@ -14,6 +14,14 @@
     onOk();
     popupStore.close();
   }
+
+  export function confirm() {
+    handleOk();
+  }
+
+  export function cancel() {
+    popupStore.close();
+  }
 </script>
 
 <div class="buttons">

package/dist/Components/Popup/AlertPopup.svelte.d.ts

@@ -1,18 +1,28 @@
 export default AlertPopup;
 type AlertPopup = SvelteComponent<{
+    cancel?: (() => void) | undefined;
+    confirm?: (() => void) | undefined;
     onOk?: (() => void) | undefined;
     okText?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
+} & {
+    confirm: () => void;
+    cancel: () => void;
 };
 declare const AlertPopup: $$__sveltets_2_IsomorphicComponent<{
+    cancel?: (() => void) | undefined;
+    confirm?: (() => void) | undefined;
     onOk?: (() => void) | undefined;
     okText?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    confirm: () => void;
+    cancel: () => void;
+}, 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;

package/dist/Components/Popup/ConfirmPopup.svelte

@@ -25,6 +25,14 @@
     onCancel();
     popupStore.close();
   }
+
+  export function confirm() {
+    handleConfirm();
+  }
+
+  export function cancel() {
+    handleCancel();
+  }
 </script>
 
 <div class="buttons">

package/dist/Components/Popup/ConfirmPopup.svelte.d.ts

@@ -1,22 +1,32 @@
 export default ConfirmPopup;
 type ConfirmPopup = SvelteComponent<{
+    cancel?: (() => void) | undefined;
     onConfirm?: (() => void) | undefined;
     onCancel?: (() => void) | undefined;
     confirmText?: string | undefined;
     cancelText?: string | undefined;
+    confirm?: (() => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
+} & {
+    confirm: () => void;
+    cancel: () => void;
 };
 declare const ConfirmPopup: $$__sveltets_2_IsomorphicComponent<{
+    cancel?: (() => void) | undefined;
     onConfirm?: (() => void) | undefined;
     onCancel?: (() => void) | undefined;
     confirmText?: string | undefined;
     cancelText?: string | undefined;
+    confirm?: (() => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    confirm: () => void;
+    cancel: () => void;
+}, 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;

package/dist/Components/Popup/Popup.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { tick } from 'svelte';
   import { fade, fly } from 'svelte/transition';
   import { backOut } from 'svelte/easing';
   import { popupStore } from './popupStore.js';
@@ -9,11 +10,85 @@
   import { VARIANT_FILLED } from '../../Base/variantTypes.js';
   
   // Subscribe to the actual stack
-  /** @type {Array<{id: string, title: string, subtitle?: string, component: any, props: any}>} */
+  /** @type {Array<{id: string, title: string, subtitle?: string, component: any, props: any, widthRatio: number}>} */
   let popupStack = [];
   popupStore.stack.subscribe((s) => {
     popupStack = s;
   });
+
+  /** @type {{submit?: () => void, confirm?: () => void, cancel?: () => void, focusInput?: () => void} | null} */
+  let activePopupInstance = null;
+
+  /** @type {HTMLDivElement | null} */
+  let activeDialogRef = null;
+
+  function focusActivePopup() {
+    void tick().then(() => {
+      if (popupStack.length === 0) {
+        return;
+      }
+
+      if (activePopupInstance?.focusInput) {
+        activePopupInstance.focusInput();
+        return;
+      }
+
+      activeDialogRef?.focus({ preventScroll: true });
+    });
+  }
+
+  /**
+   * @param {KeyboardEvent} event
+   */
+  function handlePopupKeydown(event) {
+    const textareaAllowsEnterEvents = event.target instanceof HTMLTextAreaElement
+      && event.target.dataset.newlineOnCtrlEnter === 'true';
+
+    if (event.defaultPrevented || event.isComposing || event.altKey || event.ctrlKey || event.metaKey) {
+      if (!(textareaAllowsEnterEvents && event.defaultPrevented && !event.ctrlKey && !event.metaKey && !event.altKey && !event.isComposing)) {
+        return;
+      }
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (activePopupInstance?.cancel) {
+        activePopupInstance.cancel();
+      } else {
+        popupStore.close();
+      }
+      return;
+    }
+
+    if (event.key !== 'Enter') {
+      return;
+    }
+
+    if (event.shiftKey) {
+      return;
+    }
+
+    if (event.target instanceof HTMLTextAreaElement && !textareaAllowsEnterEvents) {
+      return;
+    }
+
+    if (event.target instanceof Element && event.target.closest('button, a, [role="button"]')) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (activePopupInstance?.submit) {
+      activePopupInstance.submit();
+      return;
+    }
+
+    activePopupInstance?.confirm?.();
+  }
+
+  $: if (popupStack.length > 0) {
+    focusActivePopup();
+  }
 </script>
 
 {#if popupStack.length > 0}
@@ -24,15 +99,18 @@
       <div 
         class="dialog"
         class:background={!isTop}
+        bind:this={activeDialogRef}
         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;
+          --popup-width-ratio: {popup.widthRatio || 1};
           z-index: {index};
         "
         in:fly|global={{ y: 40, duration: 350, easing: backOut }}
         out:fly|global={{ y: 20, duration: 200 }}
         on:click|stopPropagation
+        on:keydown={handlePopupKeydown}
         on:keydown|stopPropagation
         role="dialog"
         tabindex="-1"
@@ -45,7 +123,7 @@
             </div>
           </header>
           <main>
-            <svelte:component this={popup.component} {...popup.props} />
+            <svelte:component bind:this={activePopupInstance} this={popup.component} {...popup.props} />
           </main>
         </BaseContainer>
       </div>
@@ -66,7 +144,11 @@
 
   .dialog {
     position: absolute;
-    width: min(90%, 600px);
+    width: min(
+      calc(100vw - 2rem),
+      calc(90vw * var(--popup-width-ratio)),
+      calc(600px * var(--popup-width-ratio))
+    );
     max-height: 80vh;
     zoom: 0.92;
     display: flex;
@@ -76,6 +158,11 @@
     transition: transform 0.3s ease, filter 0.3s ease;
   }
 
+  .dialog:focus,
+  .dialog:focus-visible {
+    outline: none;
+  }
+
   .dialog.background {
     pointer-events: none;
   }

package/dist/Components/Popup/PromptPopup.svelte

@@ -26,6 +26,9 @@
 
   let value = '';
 
+  /** @type {import('../InputBox.svelte').default | null} */
+  let inputRef = null;
+
   function handleSubmit() {
     onSubmit(value);
     popupStore.close();
@@ -35,13 +38,25 @@
     onCancel();
     popupStore.close();
   }
+
+  export function submit() {
+    handleSubmit();
+  }
+
+  export function cancel() {
+    handleCancel();
+  }
+
+  export function focusInput() {
+    inputRef?.focus();
+  }
 </script>
 
 <div class="prompt">
   {#if label}
     <BaseText variant="content">{label}</BaseText>
   {/if}
-  <InputBox bind:value {placeholder} autofocus={true} />
+  <InputBox bind:this={inputRef} bind:value {placeholder} autofocus={true} />
   <div class="buttons">
     <Button theme={VARIANT_PRIMARY} actionIcon={icons.check} on:click={handleSubmit}>{submitText}</Button>
     <Button theme={VARIANT_SECONDARY} actionIcon={icons.crossb} on:click={handleCancel}>{cancelText}</Button>

package/dist/Components/Popup/PromptPopup.svelte.d.ts

@@ -1,26 +1,40 @@
 export default PromptPopup;
 type PromptPopup = SvelteComponent<{
     label?: string | undefined;
+    cancel?: (() => void) | undefined;
+    submit?: (() => void) | undefined;
     placeholder?: string | undefined;
     onCancel?: (() => void) | undefined;
     cancelText?: string | undefined;
     onSubmit?: ((value: string) => void) | undefined;
     submitText?: string | undefined;
+    focusInput?: (() => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
+} & {
+    submit: () => void;
+    cancel: () => void;
+    focusInput: () => void;
 };
 declare const PromptPopup: $$__sveltets_2_IsomorphicComponent<{
     label?: string | undefined;
+    cancel?: (() => void) | undefined;
+    submit?: (() => void) | undefined;
     placeholder?: string | undefined;
     onCancel?: (() => void) | undefined;
     cancelText?: string | undefined;
     onSubmit?: ((value: string) => void) | undefined;
     submitText?: string | undefined;
+    focusInput?: (() => void) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    submit: () => void;
+    cancel: () => void;
+    focusInput: () => void;
+}, 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;