@iyulab/components 0.1.5 → 0.1.7

package/dist/components/split-panel/SplitPanel.js

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { queryAssignedElements, property } from 'lit/decorators.js';
 import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
 import { BaseElement } from '../BaseElement.js';
 import { Divider } from '../divider/Divider.js';
@@ -22,35 +22,32 @@ class SplitPanel extends BaseElement {
     this.panelSizes = [];
     this.panelAdjustSizes = [];
     this.orientation = "horizontal";
-    this.initialRatio = [];
-    this.handleSlotChange = async (e) => {
-      const slot = e.target;
-      const children = slot.assignedElements({ flatten: true });
-      const panels = children.filter((el) => el instanceof HTMLElement);
-      if (this.panels.length === panels.length && this.panels.every((p, i) => p === panels[i])) {
-        return;
-      }
-      this.panels = panels;
+    this.initRatio = [];
+    this.minSizes = [];
+    this.maxSizes = [];
+    // 초기화 메서드
+    this.initialize = async () => {
+      this.panels = this.childElements.filter((el) => el instanceof Divider === false);
       this.dividers.forEach((divider) => divider.remove());
       this.dividers = [];
-      if (this.initialRatio.length === panels.length) {
-        const totalRatio = this.initialRatio.reduce((sum, r) => sum + r, 0);
-        this.panelSizes = this.initialRatio.map((r) => r / totalRatio * 100);
+      if (this.initRatio.length === this.panels.length) {
+        const totalRatio = this.initRatio.reduce((sum, r) => sum + r, 0);
+        this.panelSizes = this.initRatio.map((r) => r / totalRatio * 100);
       } else {
-        const equalRatio = 100 / panels.length;
-        this.panelSizes = panels.map(() => equalRatio);
+        const equalRatio = 100 / this.panels.length;
+        this.panelSizes = this.panels.map(() => equalRatio);
       }
-      this.panelAdjustSizes = panels.map(() => 0);
+      this.panelAdjustSizes = this.panels.map(() => 0);
       const property2 = this.orientation === "horizontal" ? "width" : "height";
       const dividerSize = this.getDividerSize();
-      panels.forEach((panel, index) => {
+      this.panels.forEach((panel, index) => {
         const ratio = this.panelSizes[index];
         panel.style.flex = "none";
-        panel.style[property2] = index === 0 || index === panels.length - 1 ? `calc(${ratio}% - ${dividerSize / 2}px)` : `calc(${ratio}% - ${dividerSize}px)`;
-        if (index === panels.length - 1) return;
+        panel.style[property2] = index === 0 || index === this.panels.length - 1 ? `calc(${ratio}% - ${dividerSize / 2}px)` : `calc(${ratio}% - ${dividerSize}px)`;
+        if (index === this.panels.length - 1) return;
         const divider = new Divider();
         divider.orientation = this.orientation;
-        divider.draggable = true;
+        divider.movable = true;
         divider.addEventListener("u-move", this.handleDividerMove);
         this.dividers.push(divider);
         panel.after(divider);
@@ -58,6 +55,13 @@ class SplitPanel extends BaseElement {
       this.requestUpdate();
       await this.updateComplete;
     };
+    this.handleSlotChange = async () => {
+      const panels = this.childElements.filter((el) => el instanceof Divider === false);
+      if (panels.every((p, i) => p === this.panels[i])) {
+        return;
+      }
+      await this.initialize();
+    };
     /** 디바이더 드래그 이벤트 핸들러 */
     this.handleDividerMove = (event) => {
       const divider = event.target;
@@ -99,6 +103,12 @@ class SplitPanel extends BaseElement {
     this.dividers.forEach((divider) => divider.remove());
     super.disconnectedCallback();
   }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("orientation")) {
+      this.initialize();
+    }
+  }
   render() {
     return html`
       <slot @slotchange=${this.handleSlotChange}></slot>
@@ -110,11 +120,20 @@ class SplitPanel extends BaseElement {
     return parseFloat(sizeStr) || 2;
   }
 }
+__decorateClass([
+  queryAssignedElements({ flatten: true })
+], SplitPanel.prototype, "childElements");
 __decorateClass([
   property({ type: String, reflect: true })
 ], SplitPanel.prototype, "orientation");
 __decorateClass([
-  property({ type: Array, attribute: "initial-ratio", converter: arrayAttributeConverter(parseFloat) })
-], SplitPanel.prototype, "initialRatio");
+  property({ type: Array, attribute: "init-ratio", converter: arrayAttributeConverter(parseFloat) })
+], SplitPanel.prototype, "initRatio");
+__decorateClass([
+  property({ type: Array, attribute: "min-sizes", converter: arrayAttributeConverter(parseFloat) })
+], SplitPanel.prototype, "minSizes");
+__decorateClass([
+  property({ type: Array, attribute: "max-sizes", converter: arrayAttributeConverter(parseFloat) })
+], SplitPanel.prototype, "maxSizes");
 
 export { SplitPanel };

package/dist/components/split-panel/SplitPanel.styles.js

@@ -3,32 +3,17 @@ import { css } from 'lit';
 const styles = css`
   :host {
     position: relative;
-    display: block;
+    display: flex;
     width: 100%;
     height: 100%;
     overflow: hidden;
-
-    --divider-size: 2px;
-    --divider-color: var(--u-neutral-200, #d1d5db);
-    --divider-handle-size: 4px;
-    --divider-handle-color: var(--u-blue-500, #3b82f6);
   }
   :host([orientation="horizontal"]) {
-    display: flex;
     flex-direction: row;
   }
   :host([orientation="vertical"]) {
-    display: flex;
     flex-direction: column;
   }
-
-  ::slotted(u-divider) {
-    background-color: var(--divider-color, var(--u-neutral-200, #d1d5db));
-
-    --divider-size: var(--divider-size, 2px);
-    --handler-size: var(--divider-handle-size, 4px);
-    --handler-color: var(--divider-handle-color, var(--u-blue-500, #3b82f6));
-  }
 `;
 
 export { styles };

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,40 +1,20 @@
 import { PropertyValues } from 'lit';
-import { Placement } from '@floating-ui/dom';
 import { BaseElement } from '../BaseElement.js';
+import { FloatingElement } from '../FloatingElement.js';
 /**
  * Tooltip 컴포넌트는 대상 엘리먼트에 툴팁을 표시하는 기능을 제공합니다.
  */
-export declare class Tooltip extends BaseElement {
+export declare class Tooltip extends FloatingElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 툴팁이 연결될 대상 엘리먼트입니다. 지정하지 않으면 부모 엘리먼트가 대상이 됩니다. */
-    triggers: HTMLElement[];
-    /** 트리거 셀렉터 문자열입니다. 이 속성을 사용하여 트리거 엘리먼트를 지정할 수 있습니다. */
-    triggerSelectors?: string;
-    /** 'fixed' 위치에서 포지션을 계산할지 여부를 설정합니다. 기본값은 false입니다. */
-    hoist: boolean;
-    /** 툴팁이 나타날 위치를 설정합니다. */
-    placement?: Placement;
-    /** 툴팁의 위치에서 대상 엘리먼트까지의 거리를 픽셀단위로 설정합니다. 기본값은 8입니다. */
-    distance: number;
-    /** 툴팁의 표시 딜레이 시간을 밀리초 단위로 설정합니다. 기본값은 0입니다. */
-    delay: number;
-    constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
-    /** 툴팁을 표시합니다. */
-    show: (event: Event) => Promise<void>;
-    /** 툴팁을 숨깁니다. */
-    hide: (event: Event) => Promise<void>;
-    /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
-    private attachTriggers;
-    /** 대상 엘리먼트에 바인딩된 툴팁 이벤트를 제거합니다. */
-    private detachTriggers;
-    /**
-     * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
-     */
-    private getTransformOrigin;
+    /** 바인딩 이벤트 핸들러 */
+    private _show;
+    private _hide;
+    /** 대상 엘리먼트에 트리거 이벤트를 바인딩합니다. */
+    private attachAnchor;
+    /** 바인딩된 트리거 이벤트를 제거합니다. */
+    private detachAnchor;
 }

package/dist/components/tooltip/Tooltip.js

@@ -1,70 +1,13 @@
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { offset, shift, flip, autoPlacement, computePosition } from '@floating-ui/dom';
-import { getParentElement, findElementsBy } from '../../internals/node-helpers.js';
-import { BaseElement } from '../BaseElement.js';
+import { FloatingElement } from '../FloatingElement.js';
 import { styles } from './Tooltip.styles.js';
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Tooltip extends BaseElement {
+class Tooltip extends FloatingElement {
   constructor() {
-    super();
-    this.triggers = [];
-    this.hoist = false;
-    this.distance = 8;
-    this.delay = 0;
-    /** 툴팁을 표시합니다. */
-    this.show = async (event) => {
-      await this.updateComplete;
-      const trigger = event?.currentTarget;
-      if (trigger instanceof HTMLElement === false) {
-        return;
-      }
-      const middleware = [
-        offset({ mainAxis: this.distance }),
-        shift(),
-        flip()
-      ];
-      if (!this.placement) {
-        middleware.push(autoPlacement());
-      }
-      const position = await computePosition(trigger, this, {
-        strategy: this.hoist ? "fixed" : "absolute",
-        placement: this.placement,
-        middleware
-      });
-      Object.assign(this.style, {
-        left: `${position.x}px`,
-        top: `${position.y}px`,
-        transformOrigin: this.getTransformOrigin(position.placement)
-      });
-      if (this.delay > 0) {
-        await new Promise((resolve) => setTimeout(resolve, this.delay));
-      }
-      requestAnimationFrame(() => {
-        this.setAttribute("open", "");
-      });
-    };
-    /** 툴팁을 숨깁니다. */
-    this.hide = async (event) => {
-      await this.updateComplete;
-      if ("relatedTarget" in event) {
-        const relatedTarget = event["relatedTarget"];
-        if (this.contains(relatedTarget)) {
-          return;
-        }
-      }
-      this.removeAttribute("open");
-    };
-    this.setAttribute("tabindex", "0");
+    super(...arguments);
+    /** 바인딩 이벤트 핸들러 */
+    this._show = () => this.show();
+    this._hide = () => this.hide();
   }
   static {
     this.styles = [super.styles, styles];
@@ -72,101 +15,36 @@ class Tooltip extends BaseElement {
   static {
     this.dependencies = {};
   }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.triggers.length === 0) {
-      const parent = getParentElement(this);
-      if (parent) this.triggers = [parent];
-    }
-    this.addEventListener("mouseleave", this.hide);
-    this.addEventListener("focusout", this.hide);
-  }
   disconnectedCallback() {
-    this.detachTriggers(this.triggers);
+    this.detachAnchor(this.anchor);
     super.disconnectedCallback();
   }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("triggerSelectors") && this.triggerSelectors) {
-      this.triggers = findElementsBy(this, this.triggerSelectors);
-    }
-  }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("triggers")) {
-      const oldTriggers = changedProperties.get("triggers");
-      this.detachTriggers(oldTriggers);
-      this.attachTriggers(this.triggers);
+    if (changedProperties.has("anchor")) {
+      this.detachAnchor(changedProperties.get("anchor"));
+      this.attachAnchor(this.anchor);
     }
   }
   render() {
-    return html`
-      <slot></slot>
-    `;
-  }
-  /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
-  attachTriggers(triggers) {
-    if (!triggers) return;
-    for (const trigger of triggers) {
-      trigger.addEventListener("mouseenter", this.show);
-      trigger.addEventListener("mouseleave", this.hide);
-      trigger.addEventListener("focusin", this.show);
-      trigger.addEventListener("focusout", this.hide);
-    }
-  }
-  /** 대상 엘리먼트에 바인딩된 툴팁 이벤트를 제거합니다. */
-  detachTriggers(triggers) {
-    if (!triggers) return;
-    for (const trigger of triggers) {
-      trigger.removeEventListener("mouseenter", this.show);
-      trigger.removeEventListener("mouseleave", this.hide);
-      trigger.removeEventListener("focusin", this.show);
-      trigger.removeEventListener("focusout", this.hide);
-    }
-  }
-  /**
-   * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
-   */
-  getTransformOrigin(placement) {
-    switch (placement) {
-      case "top":
-      case "top-start":
-      case "top-end":
-        return "center bottom";
-      case "bottom":
-      case "bottom-start":
-      case "bottom-end":
-        return "center top";
-      case "left":
-      case "left-start":
-      case "left-end":
-        return "right center";
-      case "right":
-      case "right-start":
-      case "right-end":
-        return "left center";
-      default:
-        return "center";
-    }
+    return html`<slot></slot>`;
+  }
+  /** 대상 엘리먼트에 트리거 이벤트를 바인딩합니다. */
+  attachAnchor(target) {
+    if (!target) return;
+    target.addEventListener("pointerenter", this._show);
+    target.addEventListener("pointerleave", this._hide);
+    target.addEventListener("focusin", this._show);
+    target.addEventListener("focusout", this._hide);
+  }
+  /** 바인딩된 트리거 이벤트를 제거합니다. */
+  detachAnchor(target) {
+    if (!target) return;
+    target.removeEventListener("pointerenter", this._show);
+    target.removeEventListener("pointerleave", this._hide);
+    target.removeEventListener("focusin", this._show);
+    target.removeEventListener("focusout", this._hide);
   }
 }
-__decorateClass([
-  property({ attribute: false })
-], Tooltip.prototype, "triggers");
-__decorateClass([
-  property({ type: String, attribute: "trigger-selectors" })
-], Tooltip.prototype, "triggerSelectors");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Tooltip.prototype, "hoist");
-__decorateClass([
-  property({ type: String })
-], Tooltip.prototype, "placement");
-__decorateClass([
-  property({ type: Number })
-], Tooltip.prototype, "distance");
-__decorateClass([
-  property({ type: Number })
-], Tooltip.prototype, "delay");
 
 export { Tooltip };

package/dist/components/tooltip/Tooltip.styles.js

@@ -2,34 +2,20 @@ import { css } from 'lit';
 
 const styles = css`
   :host {
-    position: absolute;
-    z-index: 1000;
-    top: 0;
-    left: 0;
-
-    display: block;
-    width: max-content;
-    padding: 8px;
+    padding: 6px 8px;
     color: var(--u-tooltip-txt-color);
-    font-family: var(--u-font-modern, inherit);
-    font-size: 14px;
-    line-height: 1.5;
+    font-family: var(--u-font-display, inherit);
+    font-size: 12px;
+    line-height: 1.25;
     border: none;
     border-radius: 4px;
     background-color: var(--u-tooltip-bg-color);
-    
-    opacity: 0;
-    pointer-events: none;
-    transform: scale(0);
-    transition: opacity 0.15s ease, transform 0.15s ease;
-  }
-  :host([hoist]) {
-    position: fixed;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
+    transform: scale(0.8);
+    transition: opacity 0.2s ease, transform 0.2s ease;
   }
-  :host([open]) {
-    opacity: 0.8;
+  :host([visible]) {
     transform: scale(1);
-    pointer-events: auto;
   }
 `;
 

package/dist/index.js

@@ -4,11 +4,13 @@ import './components/context-menu/index.js';
 import './components/copy-button/index.js';
 import './components/dialog/index.js';
 import './components/divider/index.js';
+import './components/dropdown-menu/index.js';
 import './components/form/index.js';
 import './components/icon/index.js';
 import './components/icon-button/index.js';
 import './components/input/index.js';
 import './components/menu/index.js';
+import './components/menu-item/index.js';
 import './components/progress-bar/index.js';
 import './components/progress-ring/index.js';
 import './components/spinner/index.js';
@@ -27,11 +29,13 @@ export { ContextMenu } from './components/context-menu/ContextMenu.js';
 export { CopyButton } from './components/copy-button/CopyButton.js';
 export { Dialog } from './components/dialog/Dialog.js';
 export { Divider } from './components/divider/Divider.js';
+export { DropdownMenu } from './components/dropdown-menu/DropdownMenu.js';
 export { Form } from './components/form/Form.js';
 export { Icon } from './components/icon/Icon.js';
 export { IconButton } from './components/icon-button/IconButton.js';
 export { Input } from './components/input/Input.js';
 export { Menu } from './components/menu/Menu.js';
+export { MenuItem } from './components/menu-item/MenuItem.js';
 export { ProgressBar } from './components/progress-bar/ProgressBar.js';
 export { ProgressRing } from './components/progress-ring/ProgressRing.js';
 export { Spinner } from './components/spinner/Spinner.js';

package/dist/integrations/react/UDropdownMenu.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DropdownMenu } from '../../components/dropdown-menu/index';
+
+export declare const UDropdownMenu: React.ForwardRefExoticComponent<
+  Partial<DropdownMenu> & React.HTMLAttributes<DropdownMenu>
+>;
+
+export type UDropdownMenuProps = React.ComponentProps<typeof UDropdownMenu>;

package/dist/integrations/react/UDropdownMenu.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { DropdownMenu } from '../../components/dropdown-menu/index';
+
+export const UDropdownMenu = createComponent({
+  react: React,
+  tagName: 'u-dropdown-menu',
+  elementClass: DropdownMenu,
+  events: {}
+});

package/dist/integrations/react/index.d.ts

@@ -11,6 +11,7 @@ export { UContextMenu, UContextMenuProps } from './UContextMenu';
 export { UCopyButton, UCopyButtonProps } from './UCopyButton';
 export { UDialog, UDialogProps } from './UDialog';
 export { UDivider, UDividerProps } from './UDivider';
+export { UDropdownMenu, UDropdownMenuProps } from './UDropdownMenu';
 export { UForm, UFormProps } from './UForm';
 export { UIcon, UIconProps } from './UIcon';
 export { UIconButton, UIconButtonProps } from './UIconButton';

package/dist/integrations/react/index.js

@@ -4,6 +4,7 @@ export { UContextMenu } from './UContextMenu.js';
 export { UCopyButton } from './UCopyButton.js';
 export { UDialog } from './UDialog.js';
 export { UDivider } from './UDivider.js';
+export { UDropdownMenu } from './UDropdownMenu.js';
 export { UForm } from './UForm.js';
 export { UIcon } from './UIcon.js';
 export { UIconButton } from './UIconButton.js';

package/dist/internals/node-helpers.d.ts

@@ -5,8 +5,13 @@
  * 찾을 수 없는 경우 undefined을 반환합니다.
  */
 export declare function getParentElement(element: Element): HTMLElement | undefined;
+/**
+ * element 기준으로 selector와 매치되는 첫번째 HTMLElement를 반환합니다.
+ * - 탐색은 element가 존재하는 shadow DOM 또는 document 루트 안에서 이루어집니다.
+ */
+export declare function querySelectorFrom(element: Element, selectors: string): HTMLElement | null;
 /**
  * element 기준으로 selector와 매치되는 모든 HTMLElement를 반환합니다.
  * - 탐색은 element가 존재하는 shadow DOM 또는 document 루트 안에서 이루어집니다.
  */
-export declare function findElementsBy(element: Element, selectors: string): HTMLElement[];
+export declare function querySelectorAllFrom(element: Element, selectors: string): HTMLElement[];

package/dist/internals/node-helpers.js

@@ -6,15 +6,14 @@ function getParentElement(element) {
     return root instanceof Document ? root.documentElement : root instanceof ShadowRoot ? root.host : root instanceof HTMLElement ? root : void 0;
   }
 }
-function findElementsBy(element, selectors) {
-  if (!selectors) return [];
+function querySelectorFrom(element, selectors) {
+  if (!selectors) return null;
   const rootNode = element.getRootNode({ composed: false });
   if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
-    const nodeList = rootNode.querySelectorAll(selectors);
-    return Array.from(nodeList);
+    return rootNode.querySelector(selectors);
   } else {
-    return [];
+    return null;
   }
 }
 
-export { findElementsBy, getParentElement };
+export { getParentElement, querySelectorFrom };

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "@iyulab/components",
-  "description": "web-components library based on lit-element made by iyulab",
-  "version": "0.1.5",
-  "keywords": [
-    "iyulab",
-    "components",
-    "web-components",
-    "lit-element"
-  ],
-  "license": "MIT",
-  "author": "iyulab",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/iyulab/node-components.git"
-  },
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md",
-    "CHANGELOG.md",
-    "package.json"
-  ],
-  "type": "module",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./dist/*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/*"
-    }
-  },
-  "scripts": {
-    "start": "vite --force",
-    "build": "eslint && vite build"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "lit": "^3.3.1",
-    "react": "^19.2.1",
-    "reflect-metadata": "^0.2.2"
-  },
-  "devDependencies": {
-    "@lit/react": "^1.0.8",
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.2",
-    "eslint": "^9.39.1",
-    "eslint-plugin-lit": "^2.1.1",
-    "globals": "^16.5.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
-    "vite": "^7.2.7",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-static-copy": "^3.1.4"
-  }
-}
+{
+  "name": "@iyulab/components",
+  "description": "web-components library based on lit-element made by iyulab",
+  "version": "0.1.7",
+  "keywords": [
+    "iyulab",
+    "components",
+    "web-components",
+    "lit-element"
+  ],
+  "license": "MIT",
+  "author": "iyulab",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iyulab/node-components.git"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "package.json"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*"
+    }
+  },
+  "scripts": {
+    "start": "vite --force",
+    "build": "eslint && vite build"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "lit": "^3.3.1",
+    "react": "^19.2.3",
+    "reflect-metadata": "^0.2.2"
+  },
+  "devDependencies": {
+    "@lit/react": "^1.0.8",
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^25.0.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-lit": "^2.1.1",
+    "globals": "^16.5.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.49.0",
+    "vite": "^7.2.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.1.4"
+  }
+}