@ncds/ui-admin 1.8.4 → 1.8.5

package/dist/temp/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/temp/assets/scripts/notification/MessageNotification.js

@@ -0,0 +1,140 @@
+import { FeaturedIcon } from '../featuredIcon';
+import { sanitizeHtml } from '../utils/sanitize';
+import { CLASS_NAMES, FLOATING_ICON_MAP, MESSAGE_SIZES, SVG_ICONS } from './const';
+import { bindNotificationEvents, createWrapperElement, renderActions, renderSupportingText, setupAutoClose, } from './utils';
+export class MessageNotification {
+    constructor(options) {
+        this.options = {
+            color: 'neutral',
+            className: '',
+            actions: [],
+            autoClose: 0,
+            supportingText: undefined,
+            ...options,
+        };
+        this.element = this.createElement();
+        this.bindEvents();
+        this.setupAutoClose();
+    }
+    createElement() {
+        const { title, supportingText, color, className, actions, onClose, onHidePermanently } = this.options;
+        // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+        let actualColor = color;
+        if (color === 'info') {
+            actualColor = 'neutral';
+        }
+        const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
+        const iconFunction = FLOATING_ICON_MAP[actualColor];
+        // FeaturedIcon 생성
+        let featuredIconElement = null;
+        if (iconFunction) {
+            const iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
+            this.featuredIcon = FeaturedIcon.create({
+                svgString: iconSvg,
+                theme: 'light-circle',
+                color: actualColor,
+                size: MESSAGE_SIZES.FEATURED_ICON,
+            });
+            featuredIconElement = this.featuredIcon.getElement();
+        }
+        wrapper.innerHTML = sanitizeHtml(this.buildTemplate({
+            title,
+            supportingText,
+            actions,
+            onClose,
+            onHidePermanently,
+        }));
+        // FeaturedIcon을 content-wrapper에 추가
+        if (featuredIconElement) {
+            const contentWrapper = wrapper.querySelector(`.${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}`);
+            if (contentWrapper) {
+                contentWrapper.insertBefore(featuredIconElement, contentWrapper.firstChild);
+            }
+        }
+        return wrapper;
+    }
+    buildTemplate(params) {
+        const { title, supportingText, actions, onClose, onHidePermanently } = params;
+        return `
+      <div class="${CLASS_NAMES.MESSAGE.CONTAINER}">
+        <div class="${CLASS_NAMES.MESSAGE.CONTENT}">
+          <div class="${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}">
+            <div class="${CLASS_NAMES.MESSAGE.TEXT_CONTAINER}">
+              <span class="${CLASS_NAMES.MESSAGE.TITLE}">${title}</span>
+              ${renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
+            </div>
+          </div>
+          <div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
+            ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.MESSAGE.ACTIONS) : ''}
+          </div>
+          <div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
+            ${this.renderHidePermanentlyButton(onHidePermanently)}
+            ${this.renderCloseButton(onClose)}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderHidePermanentlyButton(onHidePermanently) {
+        if (!onHidePermanently)
+            return '';
+        return `
+      <button type="button" class="${CLASS_NAMES.COMMON.ACTION_BUTTON} ${CLASS_NAMES.COMMON.ACTION_BUTTON}--text ${CLASS_NAMES.MESSAGE.HIDE_LINK}" data-hide-permanently="true">
+        다시 보지 않기
+      </button>
+    `;
+    }
+    renderCloseButton(onClose) {
+        if (!onClose)
+            return '';
+        return `
+      <button type="button" class="${CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">
+        ${SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', `stroke="#2F2F30"`)}
+      </button>
+    `;
+    }
+    bindEvents() {
+        bindNotificationEvents(this.element, this.options.actions, this.options.onClose, () => this.remove());
+        // 다시보지 않기 버튼 이벤트 바인딩
+        if (this.options.onHidePermanently) {
+            const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+            if (hidePermanentlyButton) {
+                hidePermanentlyButton.addEventListener('click', () => {
+                    this.options.onHidePermanently?.();
+                    this.remove();
+                });
+            }
+        }
+    }
+    setupAutoClose() {
+        this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
+    }
+    // Public methods
+    getElement() {
+        return this.element;
+    }
+    appendTo(parent) {
+        parent.appendChild(this.element);
+    }
+    remove() {
+        if (this.autoCloseTimer) {
+            clearTimeout(this.autoCloseTimer);
+            this.autoCloseTimer = undefined;
+        }
+        if (this.element?.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+    }
+    destroy() {
+        // FeaturedIcon 정리
+        if (this.featuredIcon) {
+            this.featuredIcon.destroy();
+            this.featuredIcon = undefined;
+        }
+        this.remove();
+    }
+    // Static factory methods
+    static create(options) {
+        return new MessageNotification(options);
+    }
+}

package/dist/temp/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/temp/assets/scripts/notification/Notification.js

@@ -0,0 +1,112 @@
+import { FloatingNotification } from './FloatingNotification';
+import { FullWidthNotification } from './FullWidthNotification';
+import { MessageNotification } from './MessageNotification';
+import { mountFloatingNotificationHost } from './positionSync';
+// 통합 Notification 클래스 (글로벌 Web Notifications API와의 식별자 충돌을 피하기 위해 NcuaNotification 으로 명명)
+export class NcuaNotification {
+    constructor(options) {
+        const { type = 'floating', ...baseOptions } = options;
+        this.resolvedType = type;
+        if (type === 'message') {
+            this.instance = new MessageNotification(baseOptions);
+        }
+        else if (type === 'full-width') {
+            this.instance = new FullWidthNotification(baseOptions);
+        }
+        else {
+            this.instance = new FloatingNotification(baseOptions);
+        }
+    }
+    // 모든 메서드를 instance에 위임
+    getElement() {
+        return this.instance.getElement();
+    }
+    appendTo(parent) {
+        return this.instance.appendTo(parent);
+    }
+    remove() {
+        return this.instance.remove();
+    }
+    destroy() {
+        return this.instance.destroy();
+    }
+    show(parent) {
+        // 사용자가 부모를 명시한 경우 기존 동작 유지 (legacy 호환).
+        if (parent) {
+            this.instance.appendTo(parent);
+            return;
+        }
+        // §5.1 — floating 은 자동으로 우측 상단 호스트에 append.
+        // 시각적으로는 최신 토스트가 상단에 노출되고, 이전 토스트들은 그 아래로 12px 씩 겹쳐 쌓인다
+        // (LIFO, §5.4 "최신 상단" 준수. godomall5 등 기존 admin wrapper 와 동일 정책.
+        // 겹침 너비는 --ncua-floating-notification-stack-overlap CSS 변수로 오버라이드 가능).
+        //
+        // SSR 가드는 mountFloatingNotificationHost 내부의 isBrowserEnv() 로 위임 — null 이면
+        // 토스트가 표시될 환경이 아니라는 의미이므로 silently return 한다 (document.body 에 append
+        // 시도하는 fallthrough 는 SSR 에서 ReferenceError 를 일으키므로 금지).
+        if (this.resolvedType === 'floating') {
+            const host = mountFloatingNotificationHost();
+            if (host) {
+                this.instance.appendTo(host);
+            }
+            return;
+        }
+        // full-width / message는 기존대로 body에 append.
+        this.instance.appendTo(document.body);
+    }
+    // Static factory methods
+    static create(options) {
+        return new NcuaNotification(options);
+    }
+    // Convenience method for creating notifications with specific color
+    static createWithColor(color, title, supportingText, options) {
+        const autoCloseMap = {
+            success: 3000,
+            error: 5000,
+            warning: 3000,
+            info: 3000,
+            neutral: 0,
+        };
+        return new NcuaNotification({
+            title,
+            supportingText,
+            color,
+            type: 'floating',
+            autoClose: autoCloseMap[color],
+            ...options,
+        });
+    }
+    // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들
+    static success(title, supportingText, options) {
+        const notification = NcuaNotification.createWithColor('success', title, supportingText, options);
+        notification.show();
+        return notification;
+    }
+    static error(title, supportingText, options) {
+        const notification = NcuaNotification.createWithColor('error', title, supportingText, options);
+        notification.show();
+        return notification;
+    }
+    static warning(title, supportingText, options) {
+        const notification = NcuaNotification.createWithColor('warning', title, supportingText, options);
+        notification.show();
+        return notification;
+    }
+    static info(title, supportingText, options) {
+        const notification = NcuaNotification.createWithColor('info', title, supportingText, options);
+        notification.show();
+        return notification;
+    }
+    static neutral(title, supportingText, options) {
+        const notification = NcuaNotification.createWithColor('neutral', title, supportingText, options);
+        notification.show();
+        return notification;
+    }
+    // showFullWidth method for backward compatibility
+    static showFullWidth(options) {
+        return new NcuaNotification({
+            ...options,
+            type: 'full-width',
+        });
+    }
+}

package/dist/temp/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/temp/assets/scripts/notification/const/classNames.js

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

package/dist/temp/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/temp/assets/scripts/notification/const/icons.js

@@ -0,0 +1,25 @@
+// SVG 아이콘들 (크기는 동적으로 설정)
+export const SVG_ICONS = {
+    'pin-02': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167"></path></svg>`,
+    'alert-triangle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v4m0 4h.01M10.615 3.892 2.39 18.098c-.456.788-.684 1.182-.65 1.506a1 1 0 0 0 .406.705c.263.191.718.191 1.629.191h16.45c.91 0 1.365 0 1.628-.191a1 1 0 0 0 .407-.705c.034-.324-.195-.718-.65-1.506L13.383 3.892c-.454-.785-.681-1.178-.978-1.31a1 1 0 0 0-.812 0c-.297.132-.524.525-.979 1.31"></path></svg>`,
+    'alert-circle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+    'check-circle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+    'info-circle': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none" color="#5720B7" class="ncua-full-width-notification__icon"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+    'message-chat-square': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none" color="#0C111D" class="ncua-full-width-notification__icon"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 15-3.075 3.114c-.43.434-.644.651-.828.666a.5.5 0 0 1-.421-.172c-.12-.14-.12-.446-.12-1.056v-1.56c0-.548-.449-.944-.99-1.024v0a3 3 0 0 1-2.534-2.533C2 12.219 2 11.96 2 11.445V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 2 5.12 2 6.8 2h7.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C19 4.28 19 5.12 19 6.8V11m0 11-2.176-1.513c-.306-.213-.46-.32-.626-.395a2 2 0 0 0-.462-.145c-.18-.033-.367-.033-.74-.033H13.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C10 18.394 10 17.834 10 16.714V14.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C11.52 11 12.08 11 13.2 11h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 12.52 22 13.08 22 14.2v2.714c0 .932 0 1.398-.152 1.766a2 2 0 0 1-1.083 1.082c-.367.152-.833.152-1.765.152z"></path></svg>`,
+    'x-close': (size) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6 6 18M6 6l12 12"></path></svg>`,
+};
+export const FLOATING_ICON_MAP = {
+    neutral: SVG_ICONS['pin-02'],
+    error: SVG_ICONS['alert-triangle'],
+    warning: SVG_ICONS['alert-circle'],
+    success: SVG_ICONS['check-circle'],
+    // info는 floating에서는 지원하지 않음
+};
+export const FULL_WIDTH_ICON_MAP = {
+    neutral: SVG_ICONS['message-chat-square'],
+    error: SVG_ICONS['alert-triangle'],
+    warning: SVG_ICONS['alert-triangle'],
+    success: SVG_ICONS['check-circle'],
+    info: SVG_ICONS['info-circle'],
+};
+export const ICON_MAP = FULL_WIDTH_ICON_MAP;

package/dist/temp/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/temp/assets/scripts/notification/const/index.js

@@ -0,0 +1,4 @@
+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/temp/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/temp/assets/scripts/notification/const/sizes.js

@@ -0,0 +1,40 @@
+// 알림 컴포넌트 사이즈 관련 상수들
+// FeaturedIcon 사이즈
+export const FEATURED_ICON_SIZES = {
+    MOBILE: 'md',
+    DESKTOP: 'sm',
+};
+// SVG 아이콘 픽셀 사이즈
+export const ICON_PIXEL_SIZES = {
+    MOBILE: '20',
+    DESKTOP: '16',
+    FULL_WIDTH: '16', // Full-width는 항상 고정
+};
+// 닫기 버튼 사이즈
+export const CLOSE_BUTTON_SIZES = {
+    MOBILE: 'sm',
+    DESKTOP: 'xs',
+};
+// 닫기 버튼 SVG 픽셀 사이즈
+export const CLOSE_BUTTON_SVG_SIZES = {
+    xs: 16,
+    sm: 20,
+};
+// Full-width 알림 고정 사이즈
+export const FULL_WIDTH_SIZES = {
+    ICON: '16',
+    CLOSE_BUTTON: '20',
+};
+// Message 알림 고정 사이즈
+export const MESSAGE_SIZES = {
+    FEATURED_ICON: 'lg',
+    ICON_PIXEL: '24',
+    CLOSE_BUTTON: '20',
+};
+// 사이즈 유틸리티 함수들
+export const getSizes = {
+    featuredIcon: (isMobile) => (isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP),
+    iconPixel: (isMobile) => (isMobile ? ICON_PIXEL_SIZES.MOBILE : ICON_PIXEL_SIZES.DESKTOP),
+    closeButton: (isMobile) => (isMobile ? CLOSE_BUTTON_SIZES.MOBILE : CLOSE_BUTTON_SIZES.DESKTOP),
+    closeButtonSvg: (size) => CLOSE_BUTTON_SVG_SIZES[size],
+};

package/dist/temp/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/temp/assets/scripts/notification/const/types.js

@@ -0,0 +1,8 @@
+// Message Notification 닫기 버튼 아이콘 색상 맵
+export const MESSAGE_CLOSE_ICON_COLORS = {
+    neutral: '#6B7280',
+    error: '#EF4444',
+    warning: '#F97316',
+    success: '#16A34A',
+    info: '#6B7280', // info는 message 타입에서 지원하지 않지만 fallback용
+};

package/dist/temp/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/temp/assets/scripts/notification/index.js

@@ -0,0 +1,10 @@
+export { CLASS_NAMES, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, SVG_ICONS } from './const';
+export { FloatingNotification } from './FloatingNotification';
+export { FullWidthNotification } from './FullWidthNotification';
+export { MessageNotification } from './MessageNotification';
+export { NcuaNotification as Notification } from './Notification';
+// DES-SPEC-027 §5.1 — Floating notification 호스트 + 위치 동기화 (vanilla/React 공유 진입점).
+// mountFloatingNotificationHost 가 자동으로 startPositionSync 를 호출하므로 일반 사용자는
+// start/stop/syncNow 를 직접 부를 일이 없다 — HMR/SSR/테스트 정리용으로만 노출.
+export { mountFloatingNotificationHost, startPositionSync, stopPositionSync, syncNow, } from './positionSync';
+export * from './utils';

package/dist/temp/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;