@ncds/ui-admin 1.8.4 → 1.8.6

package/dist/temp/src/hooks/useFloatingPosition.js

@@ -0,0 +1,55 @@
+import { useLayoutEffect, useState } from 'react';
+const FLOATING_Z_INDEX = 1500;
+export const useFloatingPosition = ({ enabled, isOpen, triggerRef, floatingRef, direction, offset = 4, align = 'left', matchTriggerWidth = false, }) => {
+    const [style, setStyle] = useState(null);
+    useLayoutEffect(() => {
+        if (!enabled || !isOpen) {
+            setStyle(null);
+            return;
+        }
+        const trigger = triggerRef.current;
+        if (!trigger)
+            return;
+        const calculatePosition = (trigger, floatingHeight, floatingWidth) => {
+            const top = direction === 'up' ? trigger.top - floatingHeight - offset : trigger.bottom + offset;
+            const left = align === 'right' ? trigger.right - floatingWidth : trigger.left;
+            return { top, left };
+        };
+        const update = () => {
+            const t = triggerRef.current;
+            const f = floatingRef.current;
+            if (!t)
+                return;
+            const r = t.getBoundingClientRect();
+            const floatingHeight = f?.offsetHeight ?? 0;
+            const floatingWidth = matchTriggerWidth ? r.width : (f?.offsetWidth ?? r.width);
+            const { top, left } = calculatePosition(r, floatingHeight, floatingWidth);
+            // matchTriggerWidth=true: width는 max-content(콘텐츠 자연 너비), min-width만 trigger 너비로 보장.
+            // 옵션이 짧으면 trigger 너비, 길면 자연 확장 — 기존 absolute 모드와 동일한 UX.
+            setStyle({
+                position: 'fixed',
+                top,
+                left,
+                zIndex: FLOATING_Z_INDEX,
+                ...(matchTriggerWidth ? { minWidth: r.width } : {}),
+            });
+        };
+        update();
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        const triggerObserver = new ResizeObserver(update);
+        triggerObserver.observe(trigger);
+        let floatingObserver;
+        if (floatingRef.current) {
+            floatingObserver = new ResizeObserver(update);
+            floatingObserver.observe(floatingRef.current);
+        }
+        return () => {
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+            triggerObserver.disconnect();
+            floatingObserver?.disconnect();
+        };
+    }, [enabled, isOpen, direction, offset, align, matchTriggerWidth, triggerRef, floatingRef]);
+    return style;
+};

package/dist/temp/src/hooks/usePortalState.d.ts

@@ -0,0 +1,6 @@
+type UsePortalStateResult = {
+    shouldPortal: boolean;
+    portalContainer: HTMLElement | null;
+};
+export declare const usePortalState: (usePortalProp?: boolean) => UsePortalStateResult;
+export {};

package/dist/temp/src/hooks/usePortalState.js

@@ -0,0 +1,7 @@
+import { useFloatingContext } from '../contexts/FloatingContext';
+export const usePortalState = (usePortalProp) => {
+    const floatingContext = useFloatingContext();
+    const shouldPortal = usePortalProp ?? floatingContext?.preferPortal ?? false;
+    const portalContainer = floatingContext?.portalContainer ?? (typeof document !== 'undefined' ? document.body : null);
+    return { shouldPortal, portalContainer };
+};

package/dist/temp/src/types/component-meta.d.ts

@@ -1,6 +1,10 @@
 /** AI 에이전트용 컴포넌트 메타데이터 타입 */
-/** 컴포넌트 카테고리 — `src/components/` 하위 디렉토리명과 동일 */
-export type ComponentCategory = 'action' | 'data-display' | 'feedback-and-status' | 'forms-and-input' | 'image-and-icons' | 'layout' | 'navigation' | 'overlays';
+/**
+ * 컴포넌트 카테고리 — `src/components/` 하위 디렉토리명과 동일.
+ * 타입과 런타임 값을 한 곳에서 정의해 추가/변경 시 동기화 누락을 막는다.
+ */
+export declare const COMPONENT_CATEGORIES: readonly ["action", "data-display", "feedback-and-status", "forms-and-input", "image-and-icons", "layout", "navigation", "overlays"];
+export type ComponentCategory = (typeof COMPONENT_CATEGORIES)[number];
 export interface ComponentMeta {
     category: ComponentCategory;
     aliases: string[];

package/dist/temp/src/types/component-meta.js

@@ -1,2 +1,15 @@
 /** AI 에이전트용 컴포넌트 메타데이터 타입 */
-export {};
+/**
+ * 컴포넌트 카테고리 — `src/components/` 하위 디렉토리명과 동일.
+ * 타입과 런타임 값을 한 곳에서 정의해 추가/변경 시 동기화 누락을 막는다.
+ */
+export const COMPONENT_CATEGORIES = [
+    'action',
+    'data-display',
+    'feedback-and-status',
+    'forms-and-input',
+    'image-and-icons',
+    'layout',
+    'navigation',
+    'overlays',
+];

package/dist/temp/src/utils/dropdown/maxSelection.d.ts

@@ -0,0 +1,24 @@
+/**
+ * SelectBox / ComboBox 공통 — 최대 선택 개수 제한 활성 여부 판정.
+ *
+ * React 훅(`useMultiSelect`)과 vanilla 드롭다운(`DropdownModel`)가 동일 로직을 공유하므로
+ * 두 곳에 정의가 갈라지지 않도록 단일 source-of-truth로 둔다.
+ *
+ * **계약**
+ * - `0` 이상의 정수 → 활성 (단, `0`은 모든 새 선택을 차단하는 의미)
+ * - 음수 / 비정수 / `undefined` / `null` → 비활성 (제한 없는 것과 동일)
+ *
+ * `0`을 활성으로 보는 이유: 호출자가 `maxSelection={0}`을 명시적으로 전달했을 때
+ * "선택 자체를 막겠다"는 의도로 해석하기 위함. 음수는 일반적으로 "값 없음"의 sentinel이므로 비활성.
+ */
+export declare const isMaxSelectionLimitActive: (maxSelection?: number | null) => maxSelection is number;
+/**
+ * 현재 선택 길이가 최대치에 도달했는지 단일 함수로 판정.
+ *
+ * 호출 측에서 `>=`을 직접 작성하지 않도록 의미를 노출하고, type predicate가 내부에서 적용되어
+ * `maxSelection`의 narrowing이 보장된다 (외부 predicate 호출로 인한 narrowing 누락 방지).
+ *
+ * - 제한 비활성(음수 / null / undefined / 비정수): 항상 `false`.
+ * - 활성: `currentLength >= maxSelection`.
+ */
+export declare const isMaxSelectionReached: (currentLength: number, maxSelection?: number | null) => boolean;

package/dist/temp/src/utils/dropdown/maxSelection.js

@@ -0,0 +1,28 @@
+/**
+ * SelectBox / ComboBox 공통 — 최대 선택 개수 제한 활성 여부 판정.
+ *
+ * React 훅(`useMultiSelect`)과 vanilla 드롭다운(`DropdownModel`)가 동일 로직을 공유하므로
+ * 두 곳에 정의가 갈라지지 않도록 단일 source-of-truth로 둔다.
+ *
+ * **계약**
+ * - `0` 이상의 정수 → 활성 (단, `0`은 모든 새 선택을 차단하는 의미)
+ * - 음수 / 비정수 / `undefined` / `null` → 비활성 (제한 없는 것과 동일)
+ *
+ * `0`을 활성으로 보는 이유: 호출자가 `maxSelection={0}`을 명시적으로 전달했을 때
+ * "선택 자체를 막겠다"는 의도로 해석하기 위함. 음수는 일반적으로 "값 없음"의 sentinel이므로 비활성.
+ */
+export const isMaxSelectionLimitActive = (maxSelection) => typeof maxSelection === 'number' && Number.isInteger(maxSelection) && maxSelection >= 0;
+/**
+ * 현재 선택 길이가 최대치에 도달했는지 단일 함수로 판정.
+ *
+ * 호출 측에서 `>=`을 직접 작성하지 않도록 의미를 노출하고, type predicate가 내부에서 적용되어
+ * `maxSelection`의 narrowing이 보장된다 (외부 predicate 호출로 인한 narrowing 누락 방지).
+ *
+ * - 제한 비활성(음수 / null / undefined / 비정수): 항상 `false`.
+ * - 활성: `currentLength >= maxSelection`.
+ */
+export const isMaxSelectionReached = (currentLength, maxSelection) => {
+    if (!isMaxSelectionLimitActive(maxSelection))
+        return false;
+    return currentLength >= maxSelection;
+};

package/dist/temp/src/utils/dropdown/multiSelect.d.ts

@@ -19,13 +19,53 @@ export declare const getSelectedTags: (selectedValues: (string | number)[], opti
  * 태그 제거 시 선택값에서 해당 ID를 제거하는 유틸 함수
  */
 export declare const removeTagFromSelected: (selectedValues: (string | number)[], tagIdToRemove: string | number) => (string | number)[];
+export interface UseMultiSelectOptions {
+    /** 전체 선택 버튼의 라벨 (default: '전체 선택') */
+    selectText?: string;
+    /** 전체 해제 버튼의 라벨 (default: '전체 해제') */
+    deselectText?: string;
+    /**
+     * 최대 선택 가능 개수 (선택).
+     *  - `0` 이상의 정수: 제한 활성 (`isMaxSelectionActive: true`).
+     *    - `0`은 모든 새 선택을 차단한다 (이미 선택된 항목 해제는 정상 동작).
+     *    - 양수는 해당 개수 도달 후 추가 선택을 무시한다.
+     *  - 음수 / 비정수 / `null` / `undefined`: 제한 없음.
+     */
+    maxSelection?: number | null;
+}
 /**
- * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅
+ * 최대 선택 개수 관련 응집을 별도 훅으로 분리.
+ *
+ * - `isMaxSelectionActive`: 제한 활성 여부.
+ * - `isMaxReached`: 현재 선택 길이가 최대치에 도달했는지.
+ * - `canAdd(currentLength)`: 새 항목 추가가 허용되는지 (도달 시 `false`).
+ *
+ * 도메인 규칙(`>=` 비교 등)을 외부로 노출하지 않고 헬퍼를 통해 의미만 반환한다.
+ * `useMultiSelect`가 내부에서 사용하지만, 단독으로도 필요한 호출자가 쓸 수 있게 export한다.
  */
-export declare const useMultiSelect: (selectedValues: (string | number)[], options: MultiSelectOption[], selectText?: string, deselectText?: string) => {
+export declare const useMaxSelection: (selectedValues: (string | number)[], maxSelection?: number | null) => {
+    isMaxSelectionActive: boolean;
+    isMaxReached: boolean;
+    canAdd: (currentLength: number) => boolean;
+};
+/**
+ * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅.
+ *
+ * 시그니처는 호출자가 maxSelection만 지정하더라도 텍스트 라벨을 건너뛰지 않도록 옵션 객체로 받는다.
+ *
+ * **반환의 `tryToggle`**: multiple 토글 결과를 직접 돌려준다.
+ *  - 새 배열 반환: 정상 토글 (추가 또는 해제).
+ *  - `null` 반환: 최대 개수 도달로 추가가 차단됨 (호출자는 변경 없이 종료해야 함).
+ *
+ * 호출자가 `>= maxSelection` 같은 도메인 규칙을 직접 검사하지 않도록 결과만 노출한다.
+ */
+export declare const useMultiSelect: (selectedValues: (string | number)[], options: MultiSelectOption[], config?: UseMultiSelectOptions) => {
     isAllSelected: boolean;
     buttonText: string;
     toggleSelectAll: () => (string | number)[];
     getSelectedTagsData: () => SelectedTag[];
     removeTag: (tagId: string | number) => (string | number)[];
+    isMaxSelectionActive: boolean;
+    isMaxReached: boolean;
+    tryToggle: (optionId: string | number, currentArray: (string | number)[] | undefined) => (string | number)[] | null;
 };

package/dist/temp/src/utils/dropdown/multiSelect.js

@@ -1,3 +1,5 @@
+import { useCallback, useMemo } from 'react';
+import { isMaxSelectionLimitActive, isMaxSelectionReached } from './maxSelection';
 /**
  * 전체 선택 상태를 확인하는 유틸 함수
  */
@@ -42,25 +44,76 @@ export const removeTagFromSelected = (selectedValues, tagIdToRemove) => {
     return selectedValues.filter((id) => id !== tagIdToRemove);
 };
 /**
- * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅
+ * 최대 선택 개수 관련 응집을 별도 훅으로 분리.
+ *
+ * - `isMaxSelectionActive`: 제한 활성 여부.
+ * - `isMaxReached`: 현재 선택 길이가 최대치에 도달했는지.
+ * - `canAdd(currentLength)`: 새 항목 추가가 허용되는지 (도달 시 `false`).
+ *
+ * 도메인 규칙(`>=` 비교 등)을 외부로 노출하지 않고 헬퍼를 통해 의미만 반환한다.
+ * `useMultiSelect`가 내부에서 사용하지만, 단독으로도 필요한 호출자가 쓸 수 있게 export한다.
  */
-export const useMultiSelect = (selectedValues, options, selectText, deselectText) => {
+export const useMaxSelection = (selectedValues, maxSelection) => {
+    const isMaxSelectionActive = isMaxSelectionLimitActive(maxSelection);
+    const isMaxReached = isMaxSelectionReached(selectedValues.length, maxSelection);
+    const canAdd = useCallback((currentLength) => !isMaxSelectionReached(currentLength, maxSelection), [maxSelection]);
+    return { isMaxSelectionActive, isMaxReached, canAdd };
+};
+/**
+ * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅.
+ *
+ * 시그니처는 호출자가 maxSelection만 지정하더라도 텍스트 라벨을 건너뛰지 않도록 옵션 객체로 받는다.
+ *
+ * **반환의 `tryToggle`**: multiple 토글 결과를 직접 돌려준다.
+ *  - 새 배열 반환: 정상 토글 (추가 또는 해제).
+ *  - `null` 반환: 최대 개수 도달로 추가가 차단됨 (호출자는 변경 없이 종료해야 함).
+ *
+ * 호출자가 `>= maxSelection` 같은 도메인 규칙을 직접 검사하지 않도록 결과만 노출한다.
+ */
+export const useMultiSelect = (selectedValues, options, config = {}) => {
+    const { selectText, deselectText, maxSelection } = config;
     const isAllSelected = isAllItemsSelected(selectedValues, options);
     const buttonText = getSelectAllButtonText(selectedValues, options, selectText, deselectText);
-    const toggleSelectAll = () => {
-        return handleSelectAllItems(selectedValues, options);
-    };
-    const getSelectedTagsData = () => {
-        return getSelectedTags(selectedValues, options);
-    };
-    const removeTag = (tagId) => {
-        return removeTagFromSelected(selectedValues, tagId);
-    };
-    return {
+    const { isMaxSelectionActive, isMaxReached, canAdd } = useMaxSelection(selectedValues, maxSelection);
+    const toggleSelectAll = useCallback(() => handleSelectAllItems(selectedValues, options), [selectedValues, options]);
+    const getSelectedTagsData = useCallback(() => getSelectedTags(selectedValues, options), [selectedValues, options]);
+    const removeTag = useCallback((tagId) => removeTagFromSelected(selectedValues, tagId), [selectedValues]);
+    /**
+     * multiple 선택 토글을 한 번에 처리한다.
+     * - 이미 포함된 항목: 해제 (배열에서 제거하여 반환).
+     * - 미포함 항목: 추가 시도. 최대치 도달이면 `null` 반환(차단).
+     *
+     * 호출 측은 `null` 여부만 확인하면 되며 maxSelection 도메인 규칙을 알 필요가 없다.
+     */
+    const tryToggle = useCallback((optionId, currentArray) => {
+        const base = Array.isArray(currentArray) ? currentArray : [];
+        const idx = base.indexOf(optionId);
+        if (idx > -1) {
+            const next = [...base];
+            next.splice(idx, 1);
+            return next;
+        }
+        if (!canAdd(base.length))
+            return null;
+        return [...base, optionId];
+    }, [canAdd]);
+    return useMemo(() => ({
+        isAllSelected,
+        buttonText,
+        toggleSelectAll,
+        getSelectedTagsData,
+        removeTag,
+        isMaxSelectionActive,
+        isMaxReached,
+        tryToggle,
+    }), [
         isAllSelected,
         buttonText,
         toggleSelectAll,
         getSelectedTagsData,
         removeTag,
-    };
+        isMaxSelectionActive,
+        isMaxReached,
+        tryToggle,
+    ]);
 };

package/dist/types/assets/scripts/featuredIcon.d.ts

@@ -0,0 +1,22 @@
+export type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
+export type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
+export type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface FeaturedIconOptions {
+    svgString: string;
+    theme?: FeaturedIconTheme;
+    color?: FeaturedIconColor;
+    size?: FeaturedIconSize;
+    className?: string;
+}
+export declare class FeaturedIcon {
+    private element;
+    private options;
+    constructor(options: FeaturedIconOptions);
+    private createElement;
+    private addSizeToSvg;
+    getElement(): HTMLElement;
+    updateColor(color: FeaturedIconColor): void;
+    updateSize(size: FeaturedIconSize): void;
+    destroy(): void;
+    static create(options: FeaturedIconOptions): FeaturedIcon;
+}

package/dist/types/assets/scripts/notification/FloatingNotification.d.ts

@@ -0,0 +1,24 @@
+import type { BaseNotificationOptions } from './const';
+export interface FloatingNotificationOptions extends BaseNotificationOptions {
+    type?: 'floating';
+}
+export declare class FloatingNotification {
+    private element;
+    private options;
+    private autoCloseTimer?;
+    private featuredIcon?;
+    private mobileCleanup?;
+    constructor(options: FloatingNotificationOptions);
+    private createElement;
+    private buildTemplate;
+    private renderCloseButton;
+    private setupMobileListener;
+    private updateMobileStyles;
+    private bindEvents;
+    private setupAutoClose;
+    getElement(): HTMLElement;
+    appendTo(parent: HTMLElement): void;
+    remove(): void;
+    destroy(): void;
+    static create(options: FloatingNotificationOptions): FloatingNotification;
+}

package/dist/types/assets/scripts/notification/FullWidthNotification.d.ts

@@ -0,0 +1,21 @@
+import type { BaseNotificationOptions } from './const';
+export interface FullWidthNotificationOptions extends BaseNotificationOptions {
+    type?: 'full-width';
+}
+export declare class FullWidthNotification {
+    private element;
+    private options;
+    private autoCloseTimer?;
+    constructor(options: FullWidthNotificationOptions);
+    private createElement;
+    private buildTemplate;
+    private renderHidePermanentlyButton;
+    private renderCloseButton;
+    private bindEvents;
+    private setupAutoClose;
+    getElement(): HTMLElement;
+    appendTo(parent: HTMLElement): void;
+    remove(): void;
+    destroy(): void;
+    static create(options: FullWidthNotificationOptions): FullWidthNotification;
+}

package/dist/types/assets/scripts/notification/MessageNotification.d.ts

@@ -0,0 +1,22 @@
+import type { BaseNotificationOptions } from './const';
+export interface MessageNotificationOptions extends BaseNotificationOptions {
+    type?: 'message';
+}
+export declare class MessageNotification {
+    private element;
+    private options;
+    private autoCloseTimer?;
+    private featuredIcon?;
+    constructor(options: MessageNotificationOptions);
+    private createElement;
+    private buildTemplate;
+    private renderHidePermanentlyButton;
+    private renderCloseButton;
+    private bindEvents;
+    private setupAutoClose;
+    getElement(): HTMLElement;
+    appendTo(parent: HTMLElement): void;
+    remove(): void;
+    destroy(): void;
+    static create(options: MessageNotificationOptions): MessageNotification;
+}

package/dist/types/assets/scripts/notification/Notification.d.ts

@@ -0,0 +1,22 @@
+import type { BaseNotificationOptions, NotificationColor } from './const';
+export interface NotificationOptions extends BaseNotificationOptions {
+    type?: 'full-width' | 'floating' | 'message';
+}
+export declare class NcuaNotification {
+    private instance;
+    private resolvedType;
+    constructor(options: NotificationOptions);
+    getElement(): HTMLElement;
+    appendTo(parent: HTMLElement): void;
+    remove(): void;
+    destroy(): void;
+    show(parent?: HTMLElement): void;
+    static create(options: NotificationOptions): NcuaNotification;
+    static createWithColor(color: NotificationColor, title: string, supportingText?: string, options?: Partial<NotificationOptions>): NcuaNotification;
+    static success(title: string, supportingText?: string, options?: Partial<NotificationOptions>): NcuaNotification;
+    static error(title: string, supportingText?: string, options?: Partial<NotificationOptions>): NcuaNotification;
+    static warning(title: string, supportingText?: string, options?: Partial<NotificationOptions>): NcuaNotification;
+    static info(title: string, supportingText?: string, options?: Partial<NotificationOptions>): NcuaNotification;
+    static neutral(title: string, supportingText?: string, options?: Partial<NotificationOptions>): NcuaNotification;
+    static showFullWidth(options: Omit<NotificationOptions, 'type'>): NcuaNotification;
+}

package/dist/types/assets/scripts/notification/const/classNames.d.ts

@@ -0,0 +1,43 @@
+export declare const CLASS_NAMES: {
+    readonly FULL_WIDTH: {
+        readonly BASE: "ncua-full-width-notification";
+        readonly CONTAINER: "ncua-full-width-notification__container";
+        readonly CONTENT: "ncua-full-width-notification__content";
+        readonly CONTENT_WRAPPER: "ncua-full-width-notification__content-wrapper";
+        readonly ICON: "ncua-full-width-notification__icon";
+        readonly TEXT_CONTAINER: "ncua-full-width-notification__text-container";
+        readonly TITLE: "ncua-full-width-notification__title";
+        readonly SUPPORTING_TEXT: "ncua-full-width-notification__supporting-text";
+        readonly ACTIONS_CONTAINER: "ncua-full-width-notification__actions-container";
+        readonly ACTIONS: "ncua-full-width-notification__actions";
+        readonly CLOSE_BUTTON: "ncua-full-width-notification__close-button";
+    };
+    readonly FLOATING: {
+        readonly BASE: "ncua-floating-notification";
+        readonly CONTAINER: "ncua-floating-notification__container";
+        readonly CONTENT: "ncua-floating-notification__content";
+        readonly TEXT_CONTAINER: "ncua-floating-notification__text-container";
+        readonly TITLE_WRAPPER: "ncua-floating-notification__title-wrapper";
+        readonly TITLE: "ncua-floating-notification__title";
+        readonly SUPPORTING_TEXT: "ncua-floating-notification__supporting-text";
+        readonly ACTIONS: "ncua-floating-notification__actions";
+        readonly CLOSE_BUTTON: "ncua-floating-notification__close-button";
+    };
+    readonly MESSAGE: {
+        readonly BASE: "ncua-message-notification";
+        readonly CONTAINER: "ncua-message-notification__container";
+        readonly CONTENT: "ncua-message-notification__content";
+        readonly CONTENT_WRAPPER: "ncua-message-notification__content-wrapper";
+        readonly ICON: "ncua-message-notification__icon";
+        readonly TEXT_CONTAINER: "ncua-message-notification__text-container";
+        readonly TITLE: "ncua-message-notification__title";
+        readonly SUPPORTING_TEXT: "ncua-message-notification__supporting-text";
+        readonly ACTIONS_CONTAINER: "ncua-message-notification__actions-container";
+        readonly ACTIONS: "ncua-message-notification__actions";
+        readonly HIDE_LINK: "ncua-message-notification__hide-link";
+        readonly CLOSE_BUTTON: "ncua-message-notification__close-button";
+    };
+    readonly COMMON: {
+        readonly ACTION_BUTTON: "ncua-notification__action-button";
+    };
+};

package/dist/types/assets/scripts/notification/const/icons.d.ts

@@ -0,0 +1,25 @@
+import type { NotificationColor } from './types';
+export declare const SVG_ICONS: {
+    readonly 'pin-02': (size: string) => string;
+    readonly 'alert-triangle': (size: string) => string;
+    readonly 'alert-circle': (size: string) => string;
+    readonly 'check-circle': (size: string) => string;
+    readonly 'info-circle': (size: string) => string;
+    readonly 'message-chat-square': (size: string) => string;
+    readonly 'x-close': (size: string) => string;
+};
+export declare const FLOATING_ICON_MAP: Partial<Record<NotificationColor, (size: string) => string>>;
+export declare const FULL_WIDTH_ICON_MAP: {
+    readonly neutral: (size: string) => string;
+    readonly error: (size: string) => string;
+    readonly warning: (size: string) => string;
+    readonly success: (size: string) => string;
+    readonly info: (size: string) => string;
+};
+export declare const ICON_MAP: {
+    readonly neutral: (size: string) => string;
+    readonly error: (size: string) => string;
+    readonly warning: (size: string) => string;
+    readonly success: (size: string) => string;
+    readonly info: (size: string) => string;
+};

package/dist/types/assets/scripts/notification/const/index.d.ts

@@ -0,0 +1,5 @@
+export type { NotificationColor, NotificationHierarchy, NotificationAction, BaseNotificationOptions } from './types';
+export { SVG_ICONS, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP } from './icons';
+export { CLASS_NAMES } from './classNames';
+export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, MESSAGE_SIZES, getSizes, } from './sizes';
+export { MESSAGE_CLOSE_ICON_COLORS } from './types';

package/dist/types/assets/scripts/notification/const/sizes.d.ts

@@ -0,0 +1,32 @@
+export declare const FEATURED_ICON_SIZES: {
+    readonly MOBILE: "md";
+    readonly DESKTOP: "sm";
+};
+export declare const ICON_PIXEL_SIZES: {
+    readonly MOBILE: "20";
+    readonly DESKTOP: "16";
+    readonly FULL_WIDTH: "16";
+};
+export declare const CLOSE_BUTTON_SIZES: {
+    readonly MOBILE: "sm";
+    readonly DESKTOP: "xs";
+};
+export declare const CLOSE_BUTTON_SVG_SIZES: {
+    readonly xs: 16;
+    readonly sm: 20;
+};
+export declare const FULL_WIDTH_SIZES: {
+    readonly ICON: "16";
+    readonly CLOSE_BUTTON: "20";
+};
+export declare const MESSAGE_SIZES: {
+    readonly FEATURED_ICON: "lg";
+    readonly ICON_PIXEL: "24";
+    readonly CLOSE_BUTTON: "20";
+};
+export declare const getSizes: {
+    readonly featuredIcon: (isMobile: boolean) => "sm" | "md";
+    readonly iconPixel: (isMobile: boolean) => "20" | "16";
+    readonly closeButton: (isMobile: boolean) => "xs" | "sm";
+    readonly closeButtonSvg: (size: keyof typeof CLOSE_BUTTON_SVG_SIZES) => 16 | 20;
+};

package/dist/types/assets/scripts/notification/const/types.d.ts

@@ -0,0 +1,19 @@
+export type NotificationColor = 'neutral' | 'error' | 'warning' | 'success' | 'info';
+export type NotificationHierarchy = 'link' | 'link-gray';
+export interface NotificationAction {
+    label: string;
+    onClick: () => void;
+    hierarchy?: NotificationHierarchy;
+}
+export interface BaseNotificationOptions {
+    title: string;
+    supportingText?: string;
+    color?: NotificationColor;
+    onClose?: () => void;
+    className?: string;
+    actions?: NotificationAction[];
+    autoClose?: number;
+    supportTextLink?: string;
+    onHidePermanently?: () => void;
+}
+export declare const MESSAGE_CLOSE_ICON_COLORS: Record<NotificationColor, string>;

package/dist/types/assets/scripts/notification/index.d.ts

@@ -0,0 +1,8 @@
+export type { BaseNotificationOptions, NotificationAction, NotificationColor, NotificationHierarchy } from './const';
+export { CLASS_NAMES, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, SVG_ICONS } from './const';
+export { FloatingNotification, type FloatingNotificationOptions } from './FloatingNotification';
+export { FullWidthNotification, type FullWidthNotificationOptions } from './FullWidthNotification';
+export { MessageNotification, type MessageNotificationOptions } from './MessageNotification';
+export { NcuaNotification as Notification, type NotificationOptions } from './Notification';
+export { mountFloatingNotificationHost, startPositionSync, stopPositionSync, syncNow, } from './positionSync';
+export * from './utils';

package/dist/types/assets/scripts/notification/positionSync.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Floating Notification 호스트 싱글톤 + 위치 동기화
+ *
+ * 본 모듈은 다음 두 가지 책임을 가진다:
+ *   1. `.ncua-floating-notification-host` 싱글톤을 document.body 에 생성·재사용 (mountFloatingNotificationHost).
+ *   2. `.ncua-page-title` 의 rect.bottom 을 추적해 `--ncua-page-title-bottom` CSS 변수로 갱신.
+ *
+ * 두 책임을 한 파일에 두는 이유: 호스트가 처음 생성될 때 positionSync 가 함께 시작되며,
+ * React 측 훅과 vanilla 측 `NcuaNotification.show()` 가 동일 함수를 공유해 호스트 생성 로직이
+ * 한 곳에서만 유지되도록 한다.
+ *
+ * NCDS DES-SPEC-027 §5.1
+ *   · Toast top 좌표 = PageTitle.bottom + 16px (viewport 기준).
+ *   · PageTitle 이 sticky 로 Default/Fixed 변형 사이 높이가 변동(120/56px)하므로 단순 height
+ *     가 아닌 getBoundingClientRect().bottom 을 기준으로 동적 계산해야 한다.
+ *
+ * 동작 특성:
+ *   - 다중 호출 idempotent. ensure/start 가 여러 번 호출되어도 호스트와 리스너는 한 벌만.
+ *   - scroll/resize 는 rAF 로 throttle.
+ *   - PageTitle 추가/제거를 MutationObserver 로 감지해 재바인딩 — body subtree 변경마다
+ *     호출되므로 콜백 자체도 rAF 로 한 프레임당 한 번만 querySelector 가 돌도록 보호.
+ *   - SSR 가드: window/document 미정의 환경에서 ensure/start 는 no-op.
+ *
+ * 내부 상태는 모듈 최상단에 흩어진 `let` 대신 한 객체로 묶어 테스트/HMR 에서 일괄 초기화·검사하기
+ * 쉽도록 한다. 외부에는 함수만 노출되므로 캡슐화는 유지된다.
+ */
+/**
+ * `.ncua-floating-notification-host` 싱글톤을 보장한다.
+ * **side-effect 함수** — 단순 조회가 아니라 다음을 모두 수행:
+ *   · document.body 에 `<div class="ncua-floating-notification-host">` 를 (필요 시) append
+ *   · 첫 호출 시 startPositionSync() 로 window scroll/resize/MutationObserver/ResizeObserver 부착
+ *   · 한 번 만든 호스트는 페이지 lifetime 동안 유지 — 컴포넌트 언마운트 시에도 제거하지 않는다
+ *     (다음 토스트의 mount 비용을 줄이기 위해 의도된 설계)
+ *
+ * React 측 hook 과 vanilla 측 `NcuaNotification.show()` 가 모두 이 함수를 사용해 호스트 생성
+ * 진입점이 한 곳만 존재한다.
+ *
+ * @returns 생성되었거나 이미 존재하는 호스트 엘리먼트. SSR 환경에서는 null.
+ */
+export declare function mountFloatingNotificationHost(): HTMLElement | null;
+/**
+ * PageTitle ↔ Floating Host 위치 동기화 시작 (idempotent).
+ * `mountFloatingNotificationHost()` 가 자동 호출하므로 일반 사용자는 직접 부를 필요 없음.
+ * SSR/테스트에서 수동 제어가 필요할 때만 export 됨.
+ */
+export declare function startPositionSync(): void;
+/** 동기화 중단 + 리소스 해제. 테스트 종료/HMR 정리 등에 사용. */
+export declare function stopPositionSync(): void;
+/** 외부에서 PageTitle.bottom 값을 강제로 다시 측정해 반영하고 싶을 때. */
+export declare function syncNow(): void;

package/dist/types/assets/scripts/notification/utils.d.ts

@@ -0,0 +1,8 @@
+import type { NotificationAction, NotificationColor } from './const';
+export declare function createWrapperElement(baseClass: string, color: NotificationColor, className?: string): HTMLElement;
+export declare function buildClassName(baseClass: string, color: NotificationColor, className?: string): string;
+export declare function renderSupportingText(supportingText?: string, className?: string, supportTextLink?: string): string;
+export declare function renderActions(actions: NotificationAction[], wrapperClass: string): string;
+export declare function bindNotificationEvents(element: HTMLElement, actions: NotificationAction[], onClose?: () => void, onRemove?: () => void): void;
+export declare function setupAutoClose(autoClose: number, onClose?: () => void, onRemove?: () => void): number | undefined;
+export declare const isMobile: () => boolean;

package/dist/types/assets/scripts/shared/ButtonCloseX.d.ts

@@ -0,0 +1,5 @@
+export type ButtonCloseXSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonCloseXTheme = 'dark' | 'light';
+export declare const SVG_SIZE: Record<ButtonCloseXSize, number>;
+export declare const X_CLOSE_SVG: (size: string) => string;
+export declare function ButtonCloseX(size: ButtonCloseXSize, theme?: ButtonCloseXTheme, additionalClasses?: string, ariaLabel?: string, onClick?: () => void): string;