@simplysm/core-browser 13.0.0-beta.45 → 13.0.0-beta.47

package/dist/extensions/element-ext.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/extensions/element-ext.ts"],
-  "sourcesContent": ["import { isFocusable } from \"tabbable\";\nimport { TimeoutError } from \"@simplysm/core-common\";\n\n/**\n * \uC694\uC18C bounds \uC815\uBCF4 \uD0C0\uC785\n */\nexport interface ElementBounds {\n  /** \uCE21\uC815 \uB300\uC0C1 \uC694\uC18C */\n  target: Element;\n  /** \uBDF0\uD3EC\uD2B8 \uAE30\uC900 \uC0C1\uB2E8 \uC704\uCE58 */\n  top: number;\n  /** \uBDF0\uD3EC\uD2B8 \uAE30\uC900 \uC67C\uCABD \uC704\uCE58 */\n  left: number;\n  /** \uC694\uC18C \uB108\uBE44 */\n  width: number;\n  /** \uC694\uC18C \uB192\uC774 */\n  height: number;\n}\n\ndeclare global {\n  interface Element {\n    /**\n     * \uC140\uB809\uD130\uB85C \uD558\uC704 \uC694\uC18C \uC804\uCCB4 \uAC80\uC0C9\n     *\n     * @param selector - CSS \uC140\uB809\uD130\n     * @returns \uB9E4\uCE6D\uB41C \uC694\uC18C \uBC30\uC5F4 (\uBE48 \uC140\uB809\uD130\uB294 \uBE48 \uBC30\uC5F4 \uBC18\uD658)\n     */\n    findAll<T extends Element = Element>(selector: string): T[];\n\n    /**\n     * \uC140\uB809\uD130\uB85C \uCCAB \uBC88\uC9F8 \uB9E4\uCE6D \uC694\uC18C \uAC80\uC0C9\n     *\n     * @param selector - CSS \uC140\uB809\uD130\n     * @returns \uCCAB \uBC88\uC9F8 \uB9E4\uCE6D \uC694\uC18C \uB610\uB294 undefined (\uBE48 \uC140\uB809\uD130\uB294 undefined \uBC18\uD658)\n     */\n    findFirst<T extends Element = Element>(selector: string): T | undefined;\n\n    /**\n     * \uC694\uC18C\uB97C \uCCAB \uBC88\uC9F8 \uC790\uC2DD\uC73C\uB85C \uC0BD\uC785\n     *\n     * @param child - \uC0BD\uC785\uD560 \uC790\uC2DD \uC694\uC18C\n     * @returns \uC0BD\uC785\uB41C \uC790\uC2DD \uC694\uC18C\n     */\n    prependChild<T extends Element>(child: T): T;\n\n    /**\n     * \uBAA8\uB4E0 \uBD80\uBAA8 \uC694\uC18C \uBAA9\uB85D \uBC18\uD658 (\uAC00\uAE4C\uC6B4 \uC21C\uC11C)\n     *\n     * @returns \uBD80\uBAA8 \uC694\uC18C \uBC30\uC5F4 (\uAC00\uAE4C\uC6B4 \uBD80\uBAA8\uBD80\uD130 \uC21C\uC11C\uB300\uB85C)\n     */\n    getParents(): Element[];\n\n    /**\n     * \uBD80\uBAA8 \uC911 \uCCAB \uBC88\uC9F8 \uD3EC\uCEE4\uC2A4 \uAC00\uB2A5 \uC694\uC18C \uAC80\uC0C9 (tabbable \uC0AC\uC6A9)\n     *\n     * @returns \uD3EC\uCEE4\uC2A4 \uAC00\uB2A5\uD55C \uCCAB \uBC88\uC9F8 \uBD80\uBAA8 \uC694\uC18C \uB610\uB294 undefined\n     */\n    findFocusableParent(): HTMLElement | undefined;\n\n    /**\n     * \uC790\uC2DD \uC911 \uCCAB \uBC88\uC9F8 \uD3EC\uCEE4\uC2A4 \uAC00\uB2A5 \uC694\uC18C \uAC80\uC0C9 (tabbable \uC0AC\uC6A9)\n     *\n     * @returns \uD3EC\uCEE4\uC2A4 \uAC00\uB2A5\uD55C \uCCAB \uBC88\uC9F8 \uC790\uC2DD \uC694\uC18C \uB610\uB294 undefined\n     */\n    findFirstFocusableChild(): HTMLElement | undefined;\n\n    /**\n     * \uC694\uC18C\uAC00 offset \uAE30\uC900 \uC694\uC18C\uC778\uC9C0 \uD655\uC778 (position: relative/absolute/fixed/sticky)\n     *\n     * @returns position \uC18D\uC131\uC774 relative, absolute, fixed, sticky \uC911 \uD558\uB098\uBA74 true\n     */\n    isOffsetElement(): boolean;\n\n    /**\n     * \uC694\uC18C\uAC00 \uD654\uBA74\uC5D0 \uBCF4\uC774\uB294\uC9C0 \uD655\uC778\n     *\n     * @remarks\n     * clientRects \uC874\uC7AC \uC5EC\uBD80, visibility: hidden, opacity: 0 \uC5EC\uBD80\uB97C \uD655\uC778\uD55C\uB2E4.\n     *\n     * @returns \uC694\uC18C\uAC00 \uD654\uBA74\uC5D0 \uBCF4\uC774\uBA74 true\n     */\n    isVisible(): boolean;\n  }\n}\n\nElement.prototype.findAll = function <T extends Element = Element>(selector: string): T[] {\n  const trimmed = selector.trim();\n  if (trimmed === \"\") return [];\n  return Array.from(this.querySelectorAll<T>(trimmed));\n};\n\nElement.prototype.findFirst = function <T extends Element = Element>(selector: string): T | undefined {\n  const trimmed = selector.trim();\n  if (trimmed === \"\") return undefined;\n  return this.querySelector<T>(trimmed) ?? undefined;\n};\n\nElement.prototype.prependChild = function <T extends Element>(child: T): T {\n  return this.insertBefore(child, this.firstElementChild);\n};\n\nElement.prototype.getParents = function (): Element[] {\n  const result: Element[] = [];\n  let cursor = this.parentNode;\n  while (cursor !== null && cursor instanceof Element) {\n    result.push(cursor);\n    cursor = cursor.parentNode;\n  }\n  return result;\n};\n\nElement.prototype.findFocusableParent = function (): HTMLElement | undefined {\n  let parentEl = this.parentElement;\n  while (parentEl !== null) {\n    if (isFocusable(parentEl)) {\n      return parentEl;\n    }\n    parentEl = parentEl.parentElement;\n  }\n  return undefined;\n};\n\nElement.prototype.findFirstFocusableChild = function (): HTMLElement | undefined {\n  const walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT);\n  let node = walker.nextNode();\n  while (node !== null) {\n    if (node instanceof HTMLElement && isFocusable(node)) {\n      return node;\n    }\n    node = walker.nextNode();\n  }\n  return undefined;\n};\n\nElement.prototype.isOffsetElement = function (): boolean {\n  return [\"relative\", \"absolute\", \"fixed\", \"sticky\"].includes(getComputedStyle(this).position);\n};\n\nElement.prototype.isVisible = function (): boolean {\n  const style = getComputedStyle(this);\n  return this.getClientRects().length > 0 && style.visibility !== \"hidden\" && style.opacity !== \"0\";\n};\n\n// ============================================================================\n// \uC815\uC801 \uD568\uC218 (\uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC\uC6A9 \uB610\uB294 \uC5EC\uB7EC \uC694\uC18C \uB300\uC0C1)\n// ============================================================================\n\n/**\n * \uC694\uC18C \uB0B4\uC6A9\uC744 \uD074\uB9BD\uBCF4\uB4DC\uC5D0 \uBCF5\uC0AC (copy \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC\uC5D0\uC11C \uC0AC\uC6A9)\n *\n * @param event - copy \uC774\uBCA4\uD2B8 \uAC1D\uCCB4\n */\nexport function copyElement(event: ClipboardEvent): void {\n  const clipboardData = event.clipboardData;\n  const target = event.target;\n  if (clipboardData == null || !(target instanceof Element)) return;\n\n  const firstInputEl = target.querySelector<HTMLInputElement | HTMLTextAreaElement>(\"input, textarea\");\n  if (firstInputEl != null) {\n    clipboardData.setData(\"text/plain\", firstInputEl.value);\n    event.preventDefault();\n  }\n}\n\n/**\n * \uD074\uB9BD\uBCF4\uB4DC \uB0B4\uC6A9\uC744 \uC694\uC18C\uC5D0 \uBD99\uC5EC\uB123\uAE30 (paste \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC\uC5D0\uC11C \uC0AC\uC6A9)\n *\n * @remarks\n * \uB300\uC0C1 \uC694\uC18C \uB0B4\uC758 \uCCAB \uBC88\uC9F8 input/textarea\uB97C \uCC3E\uC544 \uC804\uCCB4 \uAC12\uC744 \uD074\uB9BD\uBCF4\uB4DC \uB0B4\uC6A9\uC73C\uB85C \uAD50\uCCB4\uD55C\uB2E4.\n * \uCEE4\uC11C \uC704\uCE58\uB098 \uC120\uD0DD \uC601\uC5ED\uC744 \uACE0\uB824\uD558\uC9C0 \uC54A\uB294\uB2E4.\n *\n * @param event - paste \uC774\uBCA4\uD2B8 \uAC1D\uCCB4\n */\nexport function pasteToElement(event: ClipboardEvent): void {\n  const clipboardData = event.clipboardData;\n  const target = event.target;\n  if (clipboardData == null || !(target instanceof Element)) return;\n\n  const contentText = clipboardData.getData(\"text/plain\");\n\n  const firstInputEl = target.findFirst<HTMLInputElement | HTMLTextAreaElement>(\"input, textarea\");\n  if (firstInputEl !== undefined) {\n    firstInputEl.value = contentText;\n    firstInputEl.dispatchEvent(new Event(\"input\", { bubbles: true }));\n    event.preventDefault();\n  }\n}\n\n/**\n * IntersectionObserver\uB97C \uC0AC\uC6A9\uD558\uC5EC \uC694\uC18C\uB4E4\uC758 bounds \uC815\uBCF4 \uC870\uD68C\n *\n * @param els - \uB300\uC0C1 \uC694\uC18C \uBC30\uC5F4\n * @param timeout - \uD0C0\uC784\uC544\uC6C3 (\uBC00\uB9AC\uCD08, \uAE30\uBCF8: 5000)\n * @throws {TimeoutError} \uD0C0\uC784\uC544\uC6C3 \uC2DC\uAC04 \uB0B4\uC5D0 \uC751\uB2F5\uC774 \uC5C6\uC744 \uACBD\uC6B0\n */\nexport async function getBounds(els: Element[], timeout: number = 5000): Promise<ElementBounds[]> {\n  // \uC911\uBCF5 \uC81C\uAC70 \uBC0F \uC785\uB825 \uC21C\uC11C\uB300\uB85C \uACB0\uACFC\uB97C \uC815\uB82C\uD558\uAE30 \uC704\uD55C \uC778\uB371\uC2A4 \uB9F5\n  const indexMap = new Map(els.map((el, i) => [el, i] as const));\n  if (indexMap.size === 0) {\n    return [];\n  }\n\n  // \uC815\uB82C \uC131\uB2A5 \uCD5C\uC801\uD654\uB97C \uC704\uD55C \uC778\uB371\uC2A4 \uB9F5\n  const sortIndexMap = new Map(els.map((el, i) => [el, i] as const));\n\n  let observer: IntersectionObserver | undefined;\n\n  try {\n    return await Promise.race([\n      new Promise<ElementBounds[]>((resolve) => {\n        const results: ElementBounds[] = [];\n\n        observer = new IntersectionObserver((entries) => {\n          for (const entry of entries) {\n            const target = entry.target;\n            if (indexMap.has(target)) {\n              indexMap.delete(target);\n              results.push({\n                target,\n                top: entry.boundingClientRect.top,\n                left: entry.boundingClientRect.left,\n                width: entry.boundingClientRect.width,\n                height: entry.boundingClientRect.height,\n              });\n            }\n          }\n\n          if (indexMap.size === 0) {\n            observer?.disconnect();\n            // \uC785\uB825 \uC21C\uC11C\uB300\uB85C \uC815\uB82C\n            resolve(results.sort((a, b) => sortIndexMap.get(a.target)! - sortIndexMap.get(b.target)!));\n          }\n        });\n\n        for (const el of indexMap.keys()) {\n          observer.observe(el);\n        }\n      }),\n      new Promise<ElementBounds[]>((_, reject) =>\n        setTimeout(() => reject(new TimeoutError(undefined, `${timeout}ms \uCD08\uACFC`)), timeout),\n      ),\n    ]);\n  } finally {\n    observer?.disconnect();\n  }\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/extensions/html-element-ext.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/extensions/html-element-ext.ts"],
-  "sourcesContent": ["import { ArgumentError } from \"@simplysm/core-common\";\n\ndeclare global {\n  interface HTMLElement {\n    /**\n     * \uAC15\uC81C \uB9AC\uD398\uC778\uD2B8 (reflow \uD2B8\uB9AC\uAC70)\n     */\n    repaint(): void;\n\n    /**\n     * \uBD80\uBAA8 \uC694\uC18C \uAE30\uC900 \uC0C1\uB300 \uC704\uCE58 \uACC4\uC0B0 (CSS \uD3EC\uC9C0\uC154\uB2DD\uC6A9)\n     *\n     * @remarks\n     * \uC774 \uD568\uC218\uB294 \uC694\uC18C\uC758 \uC704\uCE58\uB97C \uBD80\uBAA8 \uC694\uC18C \uAE30\uC900\uC73C\uB85C \uACC4\uC0B0\uD558\uB418, `window.scrollX/Y`\uB97C \uD3EC\uD568\uD558\uC5EC\n     * CSS `top`/`left` \uC18D\uC131\uC5D0 \uC9C1\uC811 \uC0AC\uC6A9\uD560 \uC218 \uC788\uB294 \uBB38\uC11C \uAE30\uC900 \uC88C\uD45C\uB97C \uBC18\uD658\uD55C\uB2E4.\n     *\n     * \uC8FC\uC694 \uC0AC\uC6A9 \uC0AC\uB840:\n     * - \uB4DC\uB86D\uB2E4\uC6B4, \uD31D\uC5C5 \uB4F1\uC744 `document.body`\uC5D0 append \uD6C4 \uC704\uCE58 \uC9C0\uC815\n     * - \uC2A4\uD06C\uB864\uB41C \uD398\uC774\uC9C0\uC5D0\uC11C\uB3C4 \uC62C\uBC14\uB974\uAC8C \uB3D9\uC791\n     *\n     * \uACC4\uC0B0\uC5D0 \uD3EC\uD568\uB418\uB294 \uC694\uC18C:\n     * - \uBDF0\uD3EC\uD2B8 \uAE30\uC900 \uC704\uCE58 (getBoundingClientRect)\n     * - \uBB38\uC11C \uC2A4\uD06C\uB864 \uC704\uCE58 (window.scrollX/Y)\n     * - \uBD80\uBAA8 \uC694\uC18C \uB0B4\uBD80 \uC2A4\uD06C\uB864 (parentEl.scrollTop/Left)\n     * - \uC911\uAC04 \uC694\uC18C\uB4E4\uC758 border \uB450\uAED8\n     * - CSS transform \uBCC0\uD658\n     *\n     * @param parent - \uAE30\uC900\uC774 \uB420 \uBD80\uBAA8 \uC694\uC18C \uB610\uB294 \uC140\uB809\uD130 (\uC608: document.body, \".container\")\n     * @returns CSS top/left \uC18D\uC131\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC788\uB294 \uC88C\uD45C\n     * @throws {ArgumentError} \uBD80\uBAA8 \uC694\uC18C\uB97C \uCC3E\uC744 \uC218 \uC5C6\uB294 \uACBD\uC6B0\n     */\n    getRelativeOffset(parent: HTMLElement | string): { top: number; left: number };\n\n    /**\n     * \uB300\uC0C1\uC774 offset \uC601\uC5ED(\uACE0\uC815 \uD5E4\uB354/\uACE0\uC815 \uC5F4 \uB4F1)\uC5D0 \uAC00\uB824\uC9C4 \uACBD\uC6B0, \uBCF4\uC774\uB3C4\uB85D \uC2A4\uD06C\uB864\n     *\n     * @remarks\n     * \uC774 \uD568\uC218\uB294 \uB300\uC0C1\uC774 \uC2A4\uD06C\uB864 \uC601\uC5ED\uC758 \uC704\uCABD/\uC67C\uCABD \uACBD\uACC4\uB97C \uBC97\uC5B4\uB09C \uACBD\uC6B0\uB9CC \uCC98\uB9AC\uD55C\uB2E4.\n     * \uC544\uB798\uCABD/\uC624\uB978\uCABD\uC73C\uB85C \uC2A4\uD06C\uB864\uC774 \uD544\uC694\uD55C \uACBD\uC6B0\uB294 \uBE0C\uB77C\uC6B0\uC800\uC758 \uAE30\uBCF8 \uD3EC\uCEE4\uC2A4 \uC2A4\uD06C\uB864 \uB3D9\uC791\uC5D0 \uC758\uC874\uD55C\uB2E4.\n     * \uC8FC\uB85C \uACE0\uC815 \uD5E4\uB354\uB098 \uACE0\uC815 \uC5F4\uC774 \uC788\uB294 \uD14C\uC774\uBE14\uC5D0\uC11C \uD3EC\uCEE4\uC2A4 \uC774\uBCA4\uD2B8\uC640 \uD568\uAED8 \uC0AC\uC6A9\uB41C\uB2E4.\n     *\n     * @param target - \uB300\uC0C1\uC758 \uCEE8\uD14C\uC774\uB108 \uB0B4 \uC704\uCE58 (offsetTop, offsetLeft)\n     * @param offset - \uAC00\uB824\uC9C0\uBA74 \uC548 \uB418\uB294 \uC601\uC5ED \uD06C\uAE30 (\uC608: \uACE0\uC815 \uD5E4\uB354 \uB192\uC774, \uACE0\uC815 \uC5F4 \uB108\uBE44)\n     */\n    scrollIntoViewIfNeeded(target: { top: number; left: number }, offset?: { top: number; left: number }): void;\n  }\n}\n\nHTMLElement.prototype.repaint = function (): void {\n  // offsetHeight \uC811\uADFC \uC2DC \uBE0C\uB77C\uC6B0\uC800\uB294 \uB3D9\uAE30\uC801 \uB808\uC774\uC544\uC6C3 \uACC4\uC0B0(forced synchronous layout)\uC744 \uC218\uD589\uD558\uBA70,\n  // \uC774\uB85C \uC778\uD574 \uD604\uC7AC \uBC30\uCE58\uB41C \uC2A4\uD0C0\uC77C \uBCC0\uACBD\uC0AC\uD56D\uC774 \uC989\uC2DC \uC801\uC6A9\uB418\uC5B4 \uB9AC\uD398\uC778\uD2B8\uAC00 \uD2B8\uB9AC\uAC70\uB41C\uB2E4.\n  void this.offsetHeight;\n};\n\nHTMLElement.prototype.getRelativeOffset = function (parent: HTMLElement | string): { top: number; left: number } {\n  const parentEl = typeof parent === \"string\" ? this.closest(parent) : parent;\n\n  if (!(parentEl instanceof HTMLElement)) {\n    throw new ArgumentError({ parent });\n  }\n\n  const elementRect = this.getBoundingClientRect();\n  const parentRect = parentEl.getBoundingClientRect();\n\n  const scrollLeft = window.scrollX;\n  const scrollTop = window.scrollY;\n\n  const relativeOffset = {\n    top: elementRect.top - parentRect.top + scrollTop + (parentEl.scrollTop || 0),\n    left: elementRect.left - parentRect.left + scrollLeft + (parentEl.scrollLeft || 0),\n  };\n\n  let currentEl = this.parentElement;\n  while (currentEl !== null && currentEl !== parentEl) {\n    const style = getComputedStyle(currentEl);\n    relativeOffset.top += parseFloat(style.borderTopWidth) || 0;\n    relativeOffset.left += parseFloat(style.borderLeftWidth) || 0;\n    currentEl = currentEl.parentElement;\n  }\n\n  const elTransform = getComputedStyle(this).transform;\n  const parentTransform = getComputedStyle(parentEl).transform;\n\n  if (elTransform !== \"none\" || parentTransform !== \"none\") {\n    const elementMatrix = new DOMMatrix(elTransform);\n    const parentMatrix = new DOMMatrix(parentTransform);\n\n    if (!elementMatrix.isIdentity || !parentMatrix.isIdentity) {\n      const transformedPoint = parentMatrix\n        .inverse()\n        .multiply(elementMatrix)\n        .transformPoint(new DOMPoint(relativeOffset.left, relativeOffset.top));\n\n      relativeOffset.left = transformedPoint.x;\n      relativeOffset.top = transformedPoint.y;\n    }\n  }\n\n  return relativeOffset;\n};\n\nHTMLElement.prototype.scrollIntoViewIfNeeded = function (\n  target: { top: number; left: number },\n  offset: { top: number; left: number } = { top: 0, left: 0 },\n): void {\n  const scroll = {\n    top: this.scrollTop,\n    left: this.scrollLeft,\n  };\n\n  if (target.top - scroll.top < offset.top) {\n    this.scrollTop = target.top - offset.top;\n  }\n  if (target.left - scroll.left < offset.left) {\n    this.scrollLeft = target.left - offset.left;\n  }\n};\n"],
   "mappings": "AAAA,SAAS,qBAAqB;AAgD9B,YAAY,UAAU,UAAU,WAAkB;AAGhD,OAAK,KAAK;AACZ;AAEA,YAAY,UAAU,oBAAoB,SAAU,QAA6D;AAC/G,QAAM,WAAW,OAAO,WAAW,WAAW,KAAK,QAAQ,MAAM,IAAI;AAErE,MAAI,EAAE,oBAAoB,cAAc;AACtC,UAAM,IAAI,cAAc,EAAE,OAAO,CAAC;AAAA,EACpC;AAEA,QAAM,cAAc,KAAK,sBAAsB;AAC/C,QAAM,aAAa,SAAS,sBAAsB;AAElD,QAAM,aAAa,OAAO;AAC1B,QAAM,YAAY,OAAO;AAEzB,QAAM,iBAAiB;AAAA,IACrB,KAAK,YAAY,MAAM,WAAW,MAAM,aAAa,SAAS,aAAa;AAAA,IAC3E,MAAM,YAAY,OAAO,WAAW,OAAO,cAAc,SAAS,cAAc;AAAA,EAClF;AAEA,MAAI,YAAY,KAAK;AACrB,SAAO,cAAc,QAAQ,cAAc,UAAU;AACnD,UAAM,QAAQ,iBAAiB,SAAS;AACxC,mBAAe,OAAO,WAAW,MAAM,cAAc,KAAK;AAC1D,mBAAe,QAAQ,WAAW,MAAM,eAAe,KAAK;AAC5D,gBAAY,UAAU;AAAA,EACxB;AAEA,QAAM,cAAc,iBAAiB,IAAI,EAAE;AAC3C,QAAM,kBAAkB,iBAAiB,QAAQ,EAAE;AAEnD,MAAI,gBAAgB,UAAU,oBAAoB,QAAQ;AACxD,UAAM,gBAAgB,IAAI,UAAU,WAAW;AAC/C,UAAM,eAAe,IAAI,UAAU,eAAe;AAElD,QAAI,CAAC,cAAc,cAAc,CAAC,aAAa,YAAY;AACzD,YAAM,mBAAmB,aACtB,QAAQ,EACR,SAAS,aAAa,EACtB,eAAe,IAAI,SAAS,eAAe,MAAM,eAAe,GAAG,CAAC;AAEvE,qBAAe,OAAO,iBAAiB;AACvC,qBAAe,MAAM,iBAAiB;AAAA,IACxC;AAAA,EACF;AAEA,SAAO;AACT;AAEA,YAAY,UAAU,yBAAyB,SAC7C,QACA,SAAwC,EAAE,KAAK,GAAG,MAAM,EAAE,GACpD;AACN,QAAM,SAAS;AAAA,IACb,KAAK,KAAK;AAAA,IACV,MAAM,KAAK;AAAA,EACb;AAEA,MAAI,OAAO,MAAM,OAAO,MAAM,OAAO,KAAK;AACxC,SAAK,YAAY,OAAO,MAAM,OAAO;AAAA,EACvC;AACA,MAAI,OAAO,OAAO,OAAO,OAAO,OAAO,MAAM;AAC3C,SAAK,aAAa,OAAO,OAAO,OAAO;AAAA,EACzC;AACF;",
   "names": []
 }

package/dist/index.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["// core-browser: \uBE0C\uB77C\uC6B0\uC800 \uC804\uC6A9 \uC720\uD2F8\uB9AC\uD2F0\n\n// extensions (side-effect)\nimport \"./extensions/element-ext\";\nimport \"./extensions/html-element-ext\";\n\n// re-exports\nexport * from \"./extensions/element-ext\";\nexport * from \"./extensions/html-element-ext\";\nexport * from \"./utils/download\";\nexport * from \"./utils/fetch\";\nexport * from \"./utils/file-dialog\";\n"],
   "mappings": "AAGA,OAAO;AACP,OAAO;AAGP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/utils/download.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/utils/download.ts"],
-  "sourcesContent": ["/**\n * Blob\uC744 \uD30C\uC77C\uB85C \uB2E4\uC6B4\uB85C\uB4DC\n *\n * @param blob - \uB2E4\uC6B4\uB85C\uB4DC\uD560 Blob \uAC1D\uCCB4\n * @param fileName - \uC800\uC7A5\uB420 \uD30C\uC77C \uC774\uB984\n */\nexport function downloadBlob(blob: Blob, fileName: string): void {\n  const url = URL.createObjectURL(blob);\n  try {\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = fileName;\n    link.click();\n  } finally {\n    setTimeout(() => URL.revokeObjectURL(url), 1000);\n  }\n}\n"],
   "mappings": "AAMO,SAAS,aAAa,MAAY,UAAwB;AAC/D,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,MAAI;AACF,UAAM,OAAO,SAAS,cAAc,GAAG;AACvC,SAAK,OAAO;AACZ,SAAK,WAAW;AAChB,SAAK,MAAM;AAAA,EACb,UAAE;AACA,eAAW,MAAM,IAAI,gBAAgB,GAAG,GAAG,GAAI;AAAA,EACjD;AACF;",
   "names": []
 }

package/dist/utils/fetch.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/utils/fetch.ts"],
-  "sourcesContent": ["export interface DownloadProgress {\n  receivedLength: number;\n  contentLength: number;\n}\n\n/**\n * URL\uC5D0\uC11C \uBC14\uC774\uB108\uB9AC \uB370\uC774\uD130 \uB2E4\uC6B4\uB85C\uB4DC (\uC9C4\uD589\uB960 \uCF5C\uBC31 \uC9C0\uC6D0)\n */\nexport async function fetchUrlBytes(\n  url: string,\n  options?: { onProgress?: (progress: DownloadProgress) => void },\n): Promise<Uint8Array> {\n  const response = await fetch(url);\n  if (!response.ok) {\n    throw new Error(`Download failed: ${response.status} ${response.statusText}`);\n  }\n\n  const contentLength = Number(response.headers.get(\"Content-Length\") ?? 0);\n  const reader = response.body?.getReader();\n  if (!reader) {\n    throw new Error(\"Response body is not readable\");\n  }\n\n  try {\n    // Content-Length\uB97C \uC54C \uC218 \uC788\uC73C\uBA74 \uBBF8\uB9AC \uD560\uB2F9\uD558\uC5EC \uBA54\uBAA8\uB9AC \uD6A8\uC728\uC131 \uD5A5\uC0C1\n    if (contentLength > 0) {\n      const result = new Uint8Array(contentLength);\n      let receivedLength = 0;\n\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        result.set(value, receivedLength);\n        receivedLength += value.length;\n        options?.onProgress?.({ receivedLength, contentLength });\n      }\n\n      return result;\n    }\n\n    // Content-Length\uB97C \uBAA8\uB974\uBA74 \uCCAD\uD06C \uC218\uC9D1 \uD6C4 \uBCD1\uD569 (chunked encoding)\n    const chunks: Uint8Array[] = [];\n    let receivedLength = 0;\n\n    while (true) {\n      const { done, value } = await reader.read();\n      if (done) break;\n\n      chunks.push(value);\n      receivedLength += value.length;\n    }\n\n    // \uCCAD\uD06C \uBCD1\uD569\n    const result = new Uint8Array(receivedLength);\n    let position = 0;\n    for (const chunk of chunks) {\n      result.set(chunk, position);\n      position += chunk.length;\n    }\n\n    return result;\n  } finally {\n    reader.releaseLock();\n  }\n}\n"],
   "mappings": "AAQA,eAAsB,cACpB,KACA,SACqB;AAXvB;AAYE,QAAM,WAAW,MAAM,MAAM,GAAG;AAChC,MAAI,CAAC,SAAS,IAAI;AAChB,UAAM,IAAI,MAAM,oBAAoB,SAAS,MAAM,IAAI,SAAS,UAAU,EAAE;AAAA,EAC9E;AAEA,QAAM,gBAAgB,OAAO,SAAS,QAAQ,IAAI,gBAAgB,KAAK,CAAC;AACxE,QAAM,UAAS,cAAS,SAAT,mBAAe;AAC9B,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,+BAA+B;AAAA,EACjD;AAEA,MAAI;AAEF,QAAI,gBAAgB,GAAG;AACrB,YAAMA,UAAS,IAAI,WAAW,aAAa;AAC3C,UAAIC,kBAAiB;AAErB,aAAO,MAAM;AACX,cAAM,EAAE,MAAM,MAAM,IAAI,MAAM,OAAO,KAAK;AAC1C,YAAI,KAAM;AAEV,QAAAD,QAAO,IAAI,OAAOC,eAAc;AAChC,QAAAA,mBAAkB,MAAM;AACxB,iDAAS,eAAT,iCAAsB,EAAE,gBAAAA,iBAAgB,cAAc;AAAA,MACxD;AAEA,aAAOD;AAAA,IACT;AAGA,UAAM,SAAuB,CAAC;AAC9B,QAAI,iBAAiB;AAErB,WAAO,MAAM;AACX,YAAM,EAAE,MAAM,MAAM,IAAI,MAAM,OAAO,KAAK;AAC1C,UAAI,KAAM;AAEV,aAAO,KAAK,KAAK;AACjB,wBAAkB,MAAM;AAAA,IAC1B;AAGA,UAAM,SAAS,IAAI,WAAW,cAAc;AAC5C,QAAI,WAAW;AACf,eAAW,SAAS,QAAQ;AAC1B,aAAO,IAAI,OAAO,QAAQ;AAC1B,kBAAY,MAAM;AAAA,IACpB;AAEA,WAAO;AAAA,EACT,UAAE;AACA,WAAO,YAAY;AAAA,EACrB;AACF;",
   "names": ["result", "receivedLength"]
 }

package/dist/utils/file-dialog.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/utils/file-dialog.ts"],
-  "sourcesContent": ["/**\n * \uD30C\uC77C \uC120\uD0DD \uB2E4\uC774\uC5BC\uB85C\uADF8\uB97C \uD504\uB85C\uADF8\uB798\uBC0D \uBC29\uC2DD\uC73C\uB85C \uC5F4\uAE30\n */\nexport function openFileDialog(options?: { accept?: string; multiple?: boolean }): Promise<File[] | undefined> {\n  return new Promise((resolve) => {\n    const input = document.createElement(\"input\");\n    input.type = \"file\";\n    input.multiple = options?.multiple ?? false;\n    if (options?.accept != null) {\n      input.accept = options.accept;\n    }\n    input.onchange = () => {\n      resolve(input.files != null && input.files.length > 0 ? [...input.files] : undefined);\n    };\n    input.click();\n  });\n}\n"],
   "mappings": "AAGO,SAAS,eAAe,SAAgF;AAC7G,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,OAAO;AACb,UAAM,YAAW,mCAAS,aAAY;AACtC,SAAI,mCAAS,WAAU,MAAM;AAC3B,YAAM,SAAS,QAAQ;AAAA,IACzB;AACA,UAAM,WAAW,MAAM;AACrB,cAAQ,MAAM,SAAS,QAAQ,MAAM,MAAM,SAAS,IAAI,CAAC,GAAG,MAAM,KAAK,IAAI,MAAS;AAAA,IACtF;AACA,UAAM,MAAM;AAAA,EACd,CAAC;AACH;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/core-browser",
-  "version": "13.0.0-beta.45",
+  "version": "13.0.0-beta.47",
   "description": "심플리즘 패키지 - 코어 모듈 (browser)",
   "author": "김석래",
   "repository": {
@@ -13,7 +13,8 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "sideEffects": [
     "./dist/extensions/element-ext.js",
@@ -21,7 +22,7 @@
   ],
   "dependencies": {
     "tabbable": "^6.4.0",
-    "@simplysm/core-common": "13.0.0-beta.45"
+    "@simplysm/core-common": "13.0.0-beta.47"
   },
   "devDependencies": {
     "happy-dom": "^20.6.1"

package/src/extensions/element-ext.ts

@@ -0,0 +1,246 @@
+import { isFocusable } from "tabbable";
+import { TimeoutError } from "@simplysm/core-common";
+
+/**
+ * 요소 bounds 정보 타입
+ */
+export interface ElementBounds {
+  /** 측정 대상 요소 */
+  target: Element;
+  /** 뷰포트 기준 상단 위치 */
+  top: number;
+  /** 뷰포트 기준 왼쪽 위치 */
+  left: number;
+  /** 요소 너비 */
+  width: number;
+  /** 요소 높이 */
+  height: number;
+}
+
+declare global {
+  interface Element {
+    /**
+     * 셀렉터로 하위 요소 전체 검색
+     *
+     * @param selector - CSS 셀렉터
+     * @returns 매칭된 요소 배열 (빈 셀렉터는 빈 배열 반환)
+     */
+    findAll<T extends Element = Element>(selector: string): T[];
+
+    /**
+     * 셀렉터로 첫 번째 매칭 요소 검색
+     *
+     * @param selector - CSS 셀렉터
+     * @returns 첫 번째 매칭 요소 또는 undefined (빈 셀렉터는 undefined 반환)
+     */
+    findFirst<T extends Element = Element>(selector: string): T | undefined;
+
+    /**
+     * 요소를 첫 번째 자식으로 삽입
+     *
+     * @param child - 삽입할 자식 요소
+     * @returns 삽입된 자식 요소
+     */
+    prependChild<T extends Element>(child: T): T;
+
+    /**
+     * 모든 부모 요소 목록 반환 (가까운 순서)
+     *
+     * @returns 부모 요소 배열 (가까운 부모부터 순서대로)
+     */
+    getParents(): Element[];
+
+    /**
+     * 부모 중 첫 번째 포커스 가능 요소 검색 (tabbable 사용)
+     *
+     * @returns 포커스 가능한 첫 번째 부모 요소 또는 undefined
+     */
+    findFocusableParent(): HTMLElement | undefined;
+
+    /**
+     * 자식 중 첫 번째 포커스 가능 요소 검색 (tabbable 사용)
+     *
+     * @returns 포커스 가능한 첫 번째 자식 요소 또는 undefined
+     */
+    findFirstFocusableChild(): HTMLElement | undefined;
+
+    /**
+     * 요소가 offset 기준 요소인지 확인 (position: relative/absolute/fixed/sticky)
+     *
+     * @returns position 속성이 relative, absolute, fixed, sticky 중 하나면 true
+     */
+    isOffsetElement(): boolean;
+
+    /**
+     * 요소가 화면에 보이는지 확인
+     *
+     * @remarks
+     * clientRects 존재 여부, visibility: hidden, opacity: 0 여부를 확인한다.
+     *
+     * @returns 요소가 화면에 보이면 true
+     */
+    isVisible(): boolean;
+  }
+}
+
+Element.prototype.findAll = function <T extends Element = Element>(selector: string): T[] {
+  const trimmed = selector.trim();
+  if (trimmed === "") return [];
+  return Array.from(this.querySelectorAll<T>(trimmed));
+};
+
+Element.prototype.findFirst = function <T extends Element = Element>(selector: string): T | undefined {
+  const trimmed = selector.trim();
+  if (trimmed === "") return undefined;
+  return this.querySelector<T>(trimmed) ?? undefined;
+};
+
+Element.prototype.prependChild = function <T extends Element>(child: T): T {
+  return this.insertBefore(child, this.firstElementChild);
+};
+
+Element.prototype.getParents = function (): Element[] {
+  const result: Element[] = [];
+  let cursor = this.parentNode;
+  while (cursor !== null && cursor instanceof Element) {
+    result.push(cursor);
+    cursor = cursor.parentNode;
+  }
+  return result;
+};
+
+Element.prototype.findFocusableParent = function (): HTMLElement | undefined {
+  let parentEl = this.parentElement;
+  while (parentEl !== null) {
+    if (isFocusable(parentEl)) {
+      return parentEl;
+    }
+    parentEl = parentEl.parentElement;
+  }
+  return undefined;
+};
+
+Element.prototype.findFirstFocusableChild = function (): HTMLElement | undefined {
+  const walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT);
+  let node = walker.nextNode();
+  while (node !== null) {
+    if (node instanceof HTMLElement && isFocusable(node)) {
+      return node;
+    }
+    node = walker.nextNode();
+  }
+  return undefined;
+};
+
+Element.prototype.isOffsetElement = function (): boolean {
+  return ["relative", "absolute", "fixed", "sticky"].includes(getComputedStyle(this).position);
+};
+
+Element.prototype.isVisible = function (): boolean {
+  const style = getComputedStyle(this);
+  return this.getClientRects().length > 0 && style.visibility !== "hidden" && style.opacity !== "0";
+};
+
+// ============================================================================
+// 정적 함수 (이벤트 핸들러용 또는 여러 요소 대상)
+// ============================================================================
+
+/**
+ * 요소 내용을 클립보드에 복사 (copy 이벤트 핸들러에서 사용)
+ *
+ * @param event - copy 이벤트 객체
+ */
+export function copyElement(event: ClipboardEvent): void {
+  const clipboardData = event.clipboardData;
+  const target = event.target;
+  if (clipboardData == null || !(target instanceof Element)) return;
+
+  const firstInputEl = target.querySelector<HTMLInputElement | HTMLTextAreaElement>("input, textarea");
+  if (firstInputEl != null) {
+    clipboardData.setData("text/plain", firstInputEl.value);
+    event.preventDefault();
+  }
+}
+
+/**
+ * 클립보드 내용을 요소에 붙여넣기 (paste 이벤트 핸들러에서 사용)
+ *
+ * @remarks
+ * 대상 요소 내의 첫 번째 input/textarea를 찾아 전체 값을 클립보드 내용으로 교체한다.
+ * 커서 위치나 선택 영역을 고려하지 않는다.
+ *
+ * @param event - paste 이벤트 객체
+ */
+export function pasteToElement(event: ClipboardEvent): void {
+  const clipboardData = event.clipboardData;
+  const target = event.target;
+  if (clipboardData == null || !(target instanceof Element)) return;
+
+  const contentText = clipboardData.getData("text/plain");
+
+  const firstInputEl = target.findFirst<HTMLInputElement | HTMLTextAreaElement>("input, textarea");
+  if (firstInputEl !== undefined) {
+    firstInputEl.value = contentText;
+    firstInputEl.dispatchEvent(new Event("input", { bubbles: true }));
+    event.preventDefault();
+  }
+}
+
+/**
+ * IntersectionObserver를 사용하여 요소들의 bounds 정보 조회
+ *
+ * @param els - 대상 요소 배열
+ * @param timeout - 타임아웃 (밀리초, 기본: 5000)
+ * @throws {TimeoutError} 타임아웃 시간 내에 응답이 없을 경우
+ */
+export async function getBounds(els: Element[], timeout: number = 5000): Promise<ElementBounds[]> {
+  // 중복 제거 및 입력 순서대로 결과를 정렬하기 위한 인덱스 맵
+  const indexMap = new Map(els.map((el, i) => [el, i] as const));
+  if (indexMap.size === 0) {
+    return [];
+  }
+
+  // 정렬 성능 최적화를 위한 인덱스 맵
+  const sortIndexMap = new Map(els.map((el, i) => [el, i] as const));
+
+  let observer: IntersectionObserver | undefined;
+
+  try {
+    return await Promise.race([
+      new Promise<ElementBounds[]>((resolve) => {
+        const results: ElementBounds[] = [];
+
+        observer = new IntersectionObserver((entries) => {
+          for (const entry of entries) {
+            const target = entry.target;
+            if (indexMap.has(target)) {
+              indexMap.delete(target);
+              results.push({
+                target,
+                top: entry.boundingClientRect.top,
+                left: entry.boundingClientRect.left,
+                width: entry.boundingClientRect.width,
+                height: entry.boundingClientRect.height,
+              });
+            }
+          }
+
+          if (indexMap.size === 0) {
+            observer?.disconnect();
+            // 입력 순서대로 정렬
+            resolve(results.sort((a, b) => sortIndexMap.get(a.target)! - sortIndexMap.get(b.target)!));
+          }
+        });
+
+        for (const el of indexMap.keys()) {
+          observer.observe(el);
+        }
+      }),
+      new Promise<ElementBounds[]>((_, reject) =>
+        setTimeout(() => reject(new TimeoutError(undefined, `${timeout}ms 초과`)), timeout),
+      ),
+    ]);
+  } finally {
+    observer?.disconnect();
+  }
+}

package/src/extensions/html-element-ext.ts

@@ -0,0 +1,117 @@
+import { ArgumentError } from "@simplysm/core-common";
+
+declare global {
+  interface HTMLElement {
+    /**
+     * 강제 리페인트 (reflow 트리거)
+     */
+    repaint(): void;
+
+    /**
+     * 부모 요소 기준 상대 위치 계산 (CSS 포지셔닝용)
+     *
+     * @remarks
+     * 이 함수는 요소의 위치를 부모 요소 기준으로 계산하되, `window.scrollX/Y`를 포함하여
+     * CSS `top`/`left` 속성에 직접 사용할 수 있는 문서 기준 좌표를 반환한다.
+     *
+     * 주요 사용 사례:
+     * - 드롭다운, 팝업 등을 `document.body`에 append 후 위치 지정
+     * - 스크롤된 페이지에서도 올바르게 동작
+     *
+     * 계산에 포함되는 요소:
+     * - 뷰포트 기준 위치 (getBoundingClientRect)
+     * - 문서 스크롤 위치 (window.scrollX/Y)
+     * - 부모 요소 내부 스크롤 (parentEl.scrollTop/Left)
+     * - 중간 요소들의 border 두께
+     * - CSS transform 변환
+     *
+     * @param parent - 기준이 될 부모 요소 또는 셀렉터 (예: document.body, ".container")
+     * @returns CSS top/left 속성에 사용할 수 있는 좌표
+     * @throws {ArgumentError} 부모 요소를 찾을 수 없는 경우
+     */
+    getRelativeOffset(parent: HTMLElement | string): { top: number; left: number };
+
+    /**
+     * 대상이 offset 영역(고정 헤더/고정 열 등)에 가려진 경우, 보이도록 스크롤
+     *
+     * @remarks
+     * 이 함수는 대상이 스크롤 영역의 위쪽/왼쪽 경계를 벗어난 경우만 처리한다.
+     * 아래쪽/오른쪽으로 스크롤이 필요한 경우는 브라우저의 기본 포커스 스크롤 동작에 의존한다.
+     * 주로 고정 헤더나 고정 열이 있는 테이블에서 포커스 이벤트와 함께 사용된다.
+     *
+     * @param target - 대상의 컨테이너 내 위치 (offsetTop, offsetLeft)
+     * @param offset - 가려지면 안 되는 영역 크기 (예: 고정 헤더 높이, 고정 열 너비)
+     */
+    scrollIntoViewIfNeeded(target: { top: number; left: number }, offset?: { top: number; left: number }): void;
+  }
+}
+
+HTMLElement.prototype.repaint = function (): void {
+  // offsetHeight 접근 시 브라우저는 동기적 레이아웃 계산(forced synchronous layout)을 수행하며,
+  // 이로 인해 현재 배치된 스타일 변경사항이 즉시 적용되어 리페인트가 트리거된다.
+  void this.offsetHeight;
+};
+
+HTMLElement.prototype.getRelativeOffset = function (parent: HTMLElement | string): { top: number; left: number } {
+  const parentEl = typeof parent === "string" ? this.closest(parent) : parent;
+
+  if (!(parentEl instanceof HTMLElement)) {
+    throw new ArgumentError({ parent });
+  }
+
+  const elementRect = this.getBoundingClientRect();
+  const parentRect = parentEl.getBoundingClientRect();
+
+  const scrollLeft = window.scrollX;
+  const scrollTop = window.scrollY;
+
+  const relativeOffset = {
+    top: elementRect.top - parentRect.top + scrollTop + (parentEl.scrollTop || 0),
+    left: elementRect.left - parentRect.left + scrollLeft + (parentEl.scrollLeft || 0),
+  };
+
+  let currentEl = this.parentElement;
+  while (currentEl !== null && currentEl !== parentEl) {
+    const style = getComputedStyle(currentEl);
+    relativeOffset.top += parseFloat(style.borderTopWidth) || 0;
+    relativeOffset.left += parseFloat(style.borderLeftWidth) || 0;
+    currentEl = currentEl.parentElement;
+  }
+
+  const elTransform = getComputedStyle(this).transform;
+  const parentTransform = getComputedStyle(parentEl).transform;
+
+  if (elTransform !== "none" || parentTransform !== "none") {
+    const elementMatrix = new DOMMatrix(elTransform);
+    const parentMatrix = new DOMMatrix(parentTransform);
+
+    if (!elementMatrix.isIdentity || !parentMatrix.isIdentity) {
+      const transformedPoint = parentMatrix
+        .inverse()
+        .multiply(elementMatrix)
+        .transformPoint(new DOMPoint(relativeOffset.left, relativeOffset.top));
+
+      relativeOffset.left = transformedPoint.x;
+      relativeOffset.top = transformedPoint.y;
+    }
+  }
+
+  return relativeOffset;
+};
+
+HTMLElement.prototype.scrollIntoViewIfNeeded = function (
+  target: { top: number; left: number },
+  offset: { top: number; left: number } = { top: 0, left: 0 },
+): void {
+  const scroll = {
+    top: this.scrollTop,
+    left: this.scrollLeft,
+  };
+
+  if (target.top - scroll.top < offset.top) {
+    this.scrollTop = target.top - offset.top;
+  }
+  if (target.left - scroll.left < offset.left) {
+    this.scrollLeft = target.left - offset.left;
+  }
+};

package/src/index.ts

@@ -0,0 +1,12 @@
+// core-browser: 브라우저 전용 유틸리티
+
+// extensions (side-effect)
+import "./extensions/element-ext";
+import "./extensions/html-element-ext";
+
+// re-exports
+export * from "./extensions/element-ext";
+export * from "./extensions/html-element-ext";
+export * from "./utils/download";
+export * from "./utils/fetch";
+export * from "./utils/file-dialog";

package/src/utils/download.ts

@@ -0,0 +1,17 @@
+/**
+ * Blob을 파일로 다운로드
+ *
+ * @param blob - 다운로드할 Blob 객체
+ * @param fileName - 저장될 파일 이름
+ */
+export function downloadBlob(blob: Blob, fileName: string): void {
+  const url = URL.createObjectURL(blob);
+  try {
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    link.click();
+  } finally {
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+}

package/src/utils/fetch.ts

@@ -0,0 +1,66 @@
+export interface DownloadProgress {
+  receivedLength: number;
+  contentLength: number;
+}
+
+/**
+ * URL에서 바이너리 데이터 다운로드 (진행률 콜백 지원)
+ */
+export async function fetchUrlBytes(
+  url: string,
+  options?: { onProgress?: (progress: DownloadProgress) => void },
+): Promise<Uint8Array> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Download failed: ${response.status} ${response.statusText}`);
+  }
+
+  const contentLength = Number(response.headers.get("Content-Length") ?? 0);
+  const reader = response.body?.getReader();
+  if (!reader) {
+    throw new Error("Response body is not readable");
+  }
+
+  try {
+    // Content-Length를 알 수 있으면 미리 할당하여 메모리 효율성 향상
+    if (contentLength > 0) {
+      const result = new Uint8Array(contentLength);
+      let receivedLength = 0;
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        result.set(value, receivedLength);
+        receivedLength += value.length;
+        options?.onProgress?.({ receivedLength, contentLength });
+      }
+
+      return result;
+    }
+
+    // Content-Length를 모르면 청크 수집 후 병합 (chunked encoding)
+    const chunks: Uint8Array[] = [];
+    let receivedLength = 0;
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      chunks.push(value);
+      receivedLength += value.length;
+    }
+
+    // 청크 병합
+    const result = new Uint8Array(receivedLength);
+    let position = 0;
+    for (const chunk of chunks) {
+      result.set(chunk, position);
+      position += chunk.length;
+    }
+
+    return result;
+  } finally {
+    reader.releaseLock();
+  }
+}

package/src/utils/file-dialog.ts

@@ -0,0 +1,17 @@
+/**
+ * 파일 선택 다이얼로그를 프로그래밍 방식으로 열기
+ */
+export function openFileDialog(options?: { accept?: string; multiple?: boolean }): Promise<File[] | undefined> {
+  return new Promise((resolve) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = options?.multiple ?? false;
+    if (options?.accept != null) {
+      input.accept = options.accept;
+    }
+    input.onchange = () => {
+      resolve(input.files != null && input.files.length > 0 ? [...input.files] : undefined);
+    };
+    input.click();
+  });
+}