@fuzionx/framework 0.1.46 → 0.1.47

package/cli/templates/make/app-spa/ws/ChatHandler.js

@@ -0,0 +1,138 @@
+import { WsHandler } from '@fuzionx/framework';
+
+/** 채팅 WebSocket 핸들러 */
+export default class ChatHandler extends WsHandler {
+    static namespace = '/chat';
+    static middleware = ['auth'];
+
+    /**
+     * disconnect 시 metadata가 이미 삭제되므로,
+     * setUser 시점에 이름을 캐시하여 disconnect에서 사용.
+     * 연결/해제는 항상 같은 워커에서 발생하므로 per-worker 캐시로 충분.
+     */
+    static _nameCache = new Map();
+
+    static events(e) {
+        e.on('message', ChatHandler.prototype.handleMessage);
+        e.on('broadcast', ChatHandler.prototype.handleBroadcast);
+        e.on('typing', ChatHandler.prototype.handleTyping);
+        e.on('userlist', ChatHandler.prototype.handleUserList);
+        e.on('setUser', ChatHandler.prototype.handleSetUser);
+    }
+
+    /* ── helpers ── */
+
+    /** 사용자 이름 조회 (캐시 → metadata → UUID 폴백) */
+    _getName(socket, sid) {
+        return ChatHandler._nameCache.get(sid)
+            || socket.getMetadataFor(sid, 'name')
+            || sid;
+    }
+
+    /** 단일 사용자 정보 빌드 */
+    _buildUserInfo(socket, sid) {
+        return {
+            sid,
+            name: this._getName(socket, sid),
+            email: socket.getMetadataFor(sid, 'email') || '',
+        };
+    }
+
+    /** 전체 접속자 목록 빌드 */
+    _buildUserList(socket) {
+        const sessions = socket.sessionIds;
+        return {
+            count: socket.onlineCount,
+            users: sessions.map(sid => this._buildUserInfo(socket, sid)),
+        };
+    }
+
+    /* ── lifecycle ── */
+
+    async onConnect(socket) {
+        const sid = socket.sessionId;
+        console.log(`[Chat] 연결: ${sid}`);
+
+        socket.send(JSON.stringify({
+            type: 'chat_ready',
+            data: { sessionId: sid, timestamp: Date.now() },
+        }));
+    }
+
+    async onDisconnect(socket, code, reason) {
+        const sid = socket.sessionId;
+        const name = ChatHandler._nameCache.get(sid);
+        ChatHandler._nameCache.delete(sid);
+
+        // setUser 미완료 세션은 user_joined도 안 보냈으므로 user_left 불필요
+        if (!name) return;
+
+        console.log(`[Chat] 해제: ${name} code=${code ?? 'N/A'}`);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'user_left',
+            data: { sid, name, timestamp: Date.now() },
+        }));
+    }
+
+    /* ── event handlers ── */
+
+    /** setUser — 사용자 정보 등록 + userlist 응답 */
+    async handleSetUser(socket, data) {
+        const sid = socket.sessionId;
+        const name = (data.name || '').trim() || sid;
+
+        // Bridge metadata + 로컬 캐시 동시 저장
+        socket.setMetadata('name', name);
+        if (data.email) socket.setMetadata('email', data.email);
+        if (data.id) socket.setMetadata('userId', String(data.id));
+        ChatHandler._nameCache.set(sid, name);
+        console.log(`[Chat] 사용자 등록: ${sid} → ${name}`);
+
+        // 다른 사용자에게 참여 알림
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'user_joined',
+            data: this._buildUserInfo(socket, sid),
+        }));
+
+        // 본인에게 전체 목록 응답
+        return {
+            type: 'userlist',
+            data: this._buildUserList(socket),
+        };
+    }
+
+    /** chat_msg — 본인 제외 전체 전송 */
+    async handleMessage(socket, data) {
+        const name = this._getName(socket, socket.sessionId);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'chat_msg',
+            data: { user: name, text: data.text || data, timestamp: Date.now() },
+        }));
+    }
+
+    /** broadcast — 공지 */
+    async handleBroadcast(socket, data) {
+        const name = this._getName(socket, socket.sessionId);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'broadcast',
+            data: { user: name, text: data.text || data, timestamp: Date.now() },
+        }));
+    }
+
+    /** typing — 타이핑 표시 */
+    async handleTyping(socket) {
+        const name = this._getName(socket, socket.sessionId);
+        socket.broadcastExcluding(JSON.stringify({
+            type: 'typing',
+            data: { user: name },
+        }));
+    }
+
+    /** userlist — 목록 요청 */
+    async handleUserList(socket) {
+        return {
+            type: 'userlist',
+            data: this._buildUserList(socket),
+        };
+    }
+}

package/cli/templates/make/app-ssr/controllers/AuthController.js

@@ -0,0 +1,119 @@
+import { Controller } from '@fuzionx/framework';
+
+/**
+ * SSR AuthController — 인증 (로그인/회원가입/로그아웃)
+ *
+ * 세션 기반 인증. 폼 POST → 세션 저장 → 리다이렉트.
+ * Flash 메시지로 에러/성공 알림.
+ */
+export default class AuthController extends Controller {
+  /** @type {import('@fuzionx/framework').RouteHandler} 로그인 페이지 */
+  static loginPage;
+  /** @type {import('@fuzionx/framework').RouteHandler} 로그인 처리 */
+  static login;
+  /** @type {import('@fuzionx/framework').RouteHandler} 회원가입 페이지 */
+  static registerPage;
+  /** @type {import('@fuzionx/framework').RouteHandler} 회원가입 처리 */
+  static register;
+  /** @type {import('@fuzionx/framework').RouteHandler} 로그아웃 */
+  static logout;
+  /** @type {import('@fuzionx/framework').RouteHandler} 하트비트 (세션 연장) */
+  static heartbeat;
+
+  /**
+   * GET /login — 로그인 페이지 렌더링
+   *
+   * @param {import('@fuzionx/framework').Context} ctx - 요청 컨텍스트
+   * @returns {void}
+   */
+  async loginPage(ctx) {
+    ctx.render('login');
+  }
+
+  /**
+   * POST /login — 로그인 폼 처리
+   *
+   * email/password 검증 후 세션에 userId 저장.
+   * 실패 시 flash error + /login 리다이렉트.
+   *
+   * @param {import('@fuzionx/framework').Context} ctx - 요청 컨텍스트
+   * @returns {void}
+   */
+  async login(ctx) {
+    const { email, password } = ctx.body;
+    const user = await this.service('AuthService').login({ email, password });
+
+    if (!user) {
+      ctx.session.flash('error', ctx.t('auth.login_failed'));
+      return ctx.redirect('/login');
+    }
+
+    ctx.session.set('userId', user.id);
+    return ctx.redirect('/');
+  }
+
+  /**
+   * GET /register — 회원가입 페이지 렌더링
+   *
+   * @param {import('@fuzionx/framework').Context} ctx - 요청 컨텍스트
+   * @returns {void}
+   */
+  async registerPage(ctx) {
+    ctx.render('register');
+  }
+
+  /**
+   * POST /register — 회원가입 폼 처리
+   *
+   * 비밀번호 확인 후 AuthService.register() 호출.
+   * 성공 → /login 리다이렉트, 실패 → flash error.
+   *
+   * @param {import('@fuzionx/framework').Context} ctx - 요청 컨텍스트
+   * @returns {void}
+   */
+  async register(ctx) {
+    const { name, email, password, password_confirm } = ctx.body;
+
+    if (password !== password_confirm) {
+      ctx.session.flash('error', ctx.t('auth.password_mismatch'));
+      return ctx.redirect('/register');
+    }
+
+    try {
+      await this.service('AuthService').register({ name, email, password });
+      ctx.session.flash('success', ctx.t('auth.register_success'));
+      return ctx.redirect('/login');
+    } catch (e) {
+      ctx.session.flash('error', ctx.t(e.message) || e.message);
+      return ctx.redirect('/register');
+    }
+  }
+
+  /**
+   * POST /logout — 로그아웃 처리
+   *
+   * 세션 파기 후 /login 리다이렉트.
+   *
+   * @param {import('@fuzionx/framework').Context} ctx - 요청 컨텍스트
+   * @returns {void}
+   */
+  async logout(ctx) {
+    ctx.session.destroy();
+    return ctx.redirect('/login');
+  }
+
+  /**
+   * GET /api/heartbeat — 세션 존재 확인 (하트비트)
+   *
+   * 세션에 userId가 없으면 401 반환.
+   * 프론트엔드에서 주기적으로 호출하여 세션 갱신.
+   *
+   * @param {import('@fuzionx/framework').Context} ctx - 요청 컨텍스트
+   * @returns {void}
+   */
+  async heartbeat(ctx) {
+    const userId = ctx.session.get('userId');    
+    if (!userId) return ctx.status(401).json({ alive: false });
+    return ctx.json({ alive: true, user: { id: userId } });
+  }
+}

package/cli/templates/make/app-ssr/controllers/ChatController.js

@@ -0,0 +1,15 @@
+import { Controller } from '@fuzionx/framework';
+
+/**
+ * SSR ChatController — WebSocket 채팅 데모 페이지
+ */
+export default class ChatController extends Controller {
+  static index;
+
+  /**
+   * GET /chat — 채팅 데모 페이지 렌더링
+   */
+  async index(ctx) {
+    ctx.render('chat');
+  }
+}

package/cli/templates/make/app-ssr/controllers/FeaturesController.js

@@ -0,0 +1,15 @@
+import { Controller } from '@fuzionx/framework';
+
+/**
+ * SSR FeaturesController — 프레임워크 기능 상세 소개 페이지
+ */
+export default class FeaturesController extends Controller {
+  static index;
+
+  /**
+   * GET /features — 기능 소개 페이지 렌더링
+   */
+  async index(ctx) {
+    ctx.render('features');
+  }
+}

package/cli/templates/make/app-ssr/controllers/HomeController.js

@@ -0,0 +1,21 @@
+import { Controller } from '@fuzionx/framework';
+
+/**
+ * SSR HomeController — 프레임워크 소개 랜딩 페이지
+ *
+ * 인증 불필요 — 공개 페이지.
+ */
+export default class HomeController extends Controller {
+  /** @type {import('@fuzionx/framework').RouteHandler} 랜딩 페이지 */
+  static index;
+
+  /**
+   * GET / — 프레임워크 소개 랜딩 페이지
+   *
+   * @param {import('@fuzionx/framework').Context} ctx - 요청 컨텍스트
+   * @returns {void}
+   */
+  async index(ctx) {
+    ctx.render('home');
+  }
+}

package/cli/templates/make/app-ssr/controllers/PostController.js

@@ -0,0 +1,214 @@
+import { Controller, DateUtil } from '@fuzionx/framework';
+
+/**
+ * SSR PostController — 게시판 CRUD + 첨부파일 + 썸네일
+ *
+ * ## 주요 기능
+ * - 게시글 목록 (대표 썸네일 표시)
+ * - 게시글 상세 (첨부파일 + 썸네일, 원본 lightbox)
+ * - 글 작성/수정 (멀티파트 파일 업로드 + 자동 썸네일 생성)
+ * - 글 삭제 (첨부파일 + 썸네일 + Storage 정리)
+ * - 개별 첨부파일 삭제 (수정 모드)
+ *
+ * @example
+ * // routes/web.js
+ * r.get('/board', PostController.index);
+ * r.get('/board/new', PostController.create);
+ * r.post('/board', PostController.store);
+ * r.get('/board/:id', PostController.show);
+ * r.get('/board/:id/edit', PostController.edit);
+ * r.post('/board/:id', PostController.update);
+ * r.post('/board/:id/delete', PostController.destroy);
+ * r.post('/board/attachment/:id/delete', PostController.deleteAttachment);
+ */
+export default class PostController extends Controller {
+
+  /**
+   * GET /board — 게시글 목록 (페이지네이션 + 대표 썸네일)
+   *
+   * 각 게시글의 첫 번째 첨부파일 썸네일을 대표 이미지로 표시.
+   * 썸네일이 없는 게시글은 텍스트만 표시.
+   *
+   * @param {import('@fuzionx/framework').Context} ctx
+   */
+  async index(ctx) {
+    const page = parseInt(ctx.query.page || '1');
+    const result = await this.service('PostService').list(page, 10);
+
+    // 게시글 목록의 대표 썸네일 한 번에 조회 (N+1 방지)
+    const postIds = result.data.map(p => p.id);
+    const thumbMap = await this.service('PostService').getPostThumbnails(postIds);
+
+    // 작성자 이름 batch 조회 (N+1 방지)
+    const userIds = [...new Set(result.data.map(p => p.user_id).filter(Boolean))];
+    const userMap = new Map();
+    if (userIds.length) {
+      const users = await this.db.User.query().whereIn('id', userIds).get();
+      for (const u of users) userMap.set(u.id, u.name);
+    }
+
+    // 각 게시글에 thumbUrl, user_name, 포맷된 날짜 추가
+    const posts = result.data.map(p => ({
+      ...p,
+      thumbUrl: thumbMap.get(p.id) || null,
+      user_name: userMap.get(p.user_id) || '-',
+      created_at: DateUtil.format(p.created_at, 'YYYY-MM-DD HH:mm'),
+    }));
+
+    ctx.render('board/index', {
+      posts,
+      page: result.page,
+      lastPage: result.lastPage,
+      hasMore: result.hasMore,
+      total: result.total,
+    });
+  }
+
+  /**
+   * GET /board/:id — 게시글 상세 + 첨부파일 + 썸네일
+   *
+   * 첨부파일 목록에서:
+   * - 이미지: 썸네일 표시, 클릭 시 원본 이미지 lightbox
+   * - 비디오: 비디오 프레임 썸네일 표시, 클릭 시 원본 비디오 재생
+   * - 기타: 파일 아이콘 + 다운로드 링크
+   *
+   * @param {import('@fuzionx/framework').Context} ctx
+   */
+  async show(ctx) {
+    const postService = this.service('PostService');
+    const post = await postService.find(ctx.params.id);
+    if (!post) return ctx.status(404).render('errors/404');
+
+    const author = await this.db.User.find(post.user_id);
+    const files = await postService.getAttachmentsWithThumbs(post.id);
+
+    ctx.render('board/show', { post, author, files });
+  }
+
+  /**
+   * GET /board/new — 새 글 작성 폼
+   *
+   * @param {import('@fuzionx/framework').Context} ctx
+   */
+  async create(ctx) {
+    ctx.render('board/form', { post: null, files: [] });
+  }
+
+  /**
+   * POST /board — 새 글 저장 + 첨부파일 업로드
+   *
+   * 파일 업로드 처리:
+   * 1. `ctx.files` — Bridge multipart parser가 추출한 파일 배열
+   * 2. PostService.create() → Storage 저장 + 썸네일 자동 생성
+   * 3. PRG 패턴: /board로 리다이렉트
+   *
+   * @param {import('@fuzionx/framework').Context} ctx
+   */
+  async store(ctx) {
+    // 업로드 오류 처리 (파일 타입/크기 제한 등)
+    if (ctx.uploadError) {
+      ctx.session.flash('error', ctx.uploadError);
+      return ctx.redirect('/board/new');
+    }
+    const { title, content } = ctx.body;
+    const uploadedFiles = ctx.files || [];
+    await this.service('PostService').create(
+      { title, content, user_id: ctx.user.id },
+      uploadedFiles,
+    );
+
+    ctx.session.flash('success', ctx.t('board.store_success', { default: '게시글이 성공적으로 저장되었습니다.' }));
+    return ctx.redirect('/board');
+  }
+
+  /**
+   * GET /board/:id/edit — 글 수정 폼 + 기존 첨부파일 관리
+   *
+   * 기존 첨부파일의 썸네일과 삭제 버튼을 함께 표시.
+   * 작성자 본인만 접근 가능.
+   *
+   * @param {import('@fuzionx/framework').Context} ctx
+   */
+  async edit(ctx) {
+    const postService = this.service('PostService');
+    const post = await postService.find(ctx.params.id);
+    if (!post || post.user_id !== ctx.user.id) return ctx.status(403).render('errors/404');
+
+    const files = await postService.getAttachmentsWithThumbs(post.id);
+    ctx.render('board/form', { post, files });
+  }
+
+  /**
+   * POST /board/:id — 글 수정 + 새 첨부파일 추가
+   *
+   * 기존 파일은 유지, 새 파일만 추가.
+   * 개별 파일 삭제는 deleteAttachment 엔드포인트 사용.
+   *
+   * @param {import('@fuzionx/framework').Context} ctx
+   */
+  async update(ctx) {
+    // 업로드 오류 처리
+    if (ctx.uploadError) {
+      ctx.session.flash('error', ctx.uploadError);
+      return ctx.redirect(`/board/${ctx.params.id}/edit`);
+    }
+    const { title, content } = ctx.body;    
+    const uploadedFiles = ctx.files || [];
+    const post = await this.service('PostService').find(ctx.params.id);
+    if (!post || post.user_id !== ctx.user.id) return ctx.status(403).render('errors/404');
+    await this.service('PostService').update(ctx.params.id, { title, content }, uploadedFiles);
+    ctx.session.flash('success', ctx.t('board.update_success', { default: '게시글이 성공적으로 수정되었습니다.' }));
+    return ctx.redirect(`/board/${ctx.params.id}`);
+  }
+
+  /**
+   * POST /board/:id/delete — 글 삭제 (첨부파일 + 썸네일 + Storage 전부 정리)
+   *
+   * @param {import('@fuzionx/framework').Context} ctx
+   */
+  async destroy(ctx) {
+    const post = await this.service('PostService').find(ctx.params.id);
+    if (!post || post.user_id !== ctx.user.id) return ctx.status(403).render('errors/404');
+    await this.service('PostService').remove(ctx.params.id);
+    ctx.session.flash('success', ctx.t('board.delete_success', { default: '게시글이 성공적으로 삭제되었습니다.' }));
+    return ctx.redirect('/board');
+  }
+
+  /**
+   * POST /board/attachment/:id/delete — 개별 첨부파일 삭제
+   *
+   * 수정 페이지에서 기존 첨부파일 개별 삭제.
+   * 원본 파일 + 썸네일 + DB 레코드 모두 정리.
+   * 작성자 본인만 삭제 가능.
+   *
+   * @param {import('@fuzionx/framework').Context} ctx
+   */
+  async deleteAttachment(ctx) {
+    const att = await this.db.Attachment.find(ctx.params.id);
+    if (!att) return ctx.status(404).json({ error: 'Not found' });
+
+    const post = await this.db.Post.find(att.post_id);
+    if (!post || post.user_id !== ctx.user.id) return ctx.status(403).json({ error: 'Forbidden' });
+
+    await this.service('PostService').removeAttachment(att.id);
+    return ctx.redirect(`/board/${att.post_id}/edit`);
+  }
+
+  /**
+   * GET /api/board/status?ids=1,2,3 — 게시글 상태 JSON 반환
+   *
+   * @param {import('@fuzionx/framework').Context} ctx
+   */
+  async status(ctx) {
+    const raw = ctx.query.ids || '';
+    const ids = raw.split(',').map(Number).filter(Boolean);
+    if (!ids.length) return ctx.json({ statuses: {} });
+
+    const posts = await this.db.Post.query().whereIn('id', ids).get();
+    const statuses = {};
+    for (const p of posts) {
+      statuses[p.id] = p.status || 'published';
+    }
+    ctx.json({ statuses });
+  }
+}

package/cli/templates/make/app-ssr/controllers/UserController.js

@@ -0,0 +1,48 @@
+import { Controller } from '@fuzionx/framework';
+
+/**
+ * SSR UserController — 사용자 프로필 관리
+ *
+ * 프로필 조회/수정. 비밀번호 변경 시 확인 검증.
+ */
+export default class UserController extends Controller {
+  /** @type {import('@fuzionx/framework').RouteHandler} 프로필 페이지 */
+  static profile;
+  /** @type {import('@fuzionx/framework').RouteHandler} 프로필 수정 처리 */
+  static updateProfile;
+
+  /**
+   * GET /profile — 프로필 수정 페이지 렌더링
+   *
+   * 로그인된 사용자 정보를 Tera 템플릿으로 렌더링.
+   *
+   * @param {import('@fuzionx/framework').Context} ctx - 요청 컨텍스트
+   * @returns {void}
+   */
+  async profile(ctx) {
+    ctx.render('profile');
+  }
+
+  /**
+   * POST /profile — 프로필 수정 처리
+   *
+   * form body에서 name/email/password 추출.
+   * 비밀번호 변경 시 password_confirm 일치 확인.
+   * 수정 후 flash success + /profile 리다이렉트.
+   *
+   * @param {import('@fuzionx/framework').Context} ctx - 요청 컨텍스트
+   * @returns {void}
+   */
+  async updateProfile(ctx) {
+    const { name, email, password, password_confirm } = ctx.body;
+
+    if (password && password !== password_confirm) {
+      ctx.session.flash('error', ctx.t('auth.password_mismatch'));
+      return ctx.redirect('/profile');
+    }
+
+    await this.service('UserService').update(ctx.user.id, { name, email, password });
+    ctx.session.flash('success', ctx.t('profile.update_success'));
+    return ctx.redirect('/profile');
+  }
+}

package/cli/templates/make/app-ssr/public/css/fx-ui.css

@@ -0,0 +1,43 @@
+/* ═══════════════════════════════════════════════
+ * FuzionX — Toast & Alert UI Styles
+ * ═══════════════════════════════════════════════ */
+
+/* ── Toast Container ── */
+.fx-toast-container { position:fixed; top:1rem; right:1rem; z-index:10000; display:flex; flex-direction:column; gap:.5rem; max-width:380px; pointer-events:none; }
+.fx-toast { display:flex; align-items:center; gap:.6rem; padding:.75rem 1rem; border-radius:10px; backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1); color:#fff; font-size:.88rem; line-height:1.4; cursor:pointer; pointer-events:auto; box-shadow:0 8px 32px rgba(0,0,0,.3); }
+.fx-toast-success { background:rgba(46,204,113,.9); border-color:rgba(46,204,113,.4); }
+.fx-toast-error { background:rgba(231,76,60,.9); border-color:rgba(231,76,60,.4); }
+.fx-toast-warning { background:rgba(241,196,15,.9); border-color:rgba(241,196,15,.4); color:#1a1a2e; }
+.fx-toast-info { background:rgba(102,126,234,.9); border-color:rgba(102,126,234,.4); }
+.fx-toast-icon { font-size:1rem; font-weight:700; flex-shrink:0; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.2); }
+.fx-toast-msg { flex:1; }
+.fx-toast-close { background:none; border:none; color:inherit; font-size:1.2rem; cursor:pointer; opacity:.7; padding:0 2px; line-height:1; }
+.fx-toast-close:hover { opacity:1; }
+
+@keyframes toastIn { from{opacity:0;transform:translateX(80px) scale(.9)} to{opacity:1;transform:translateX(0) scale(1)} }
+@keyframes toastOut { from{opacity:1;transform:translateX(0) scale(1)} to{opacity:0;transform:translateX(80px) scale(.9)} }
+
+/* ── Alert Dialog ── */
+.fx-alert-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:10001; display:flex; align-items:center; justify-content:center; padding:1rem; }
+.fx-alert-dialog { background:rgba(25,25,50,.98); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:2rem; max-width:420px; width:100%; box-shadow:0 24px 64px rgba(0,0,0,.5); }
+.fx-alert-header { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
+.fx-alert-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:1.1rem; flex-shrink:0; }
+.fx-alert-info .fx-alert-icon, .fx-alert-confirm .fx-alert-icon { background:rgba(102,126,234,.15); color:#7b93ff; }
+.fx-alert-warning .fx-alert-icon { background:rgba(241,196,15,.15); color:#f1c40f; }
+.fx-alert-error .fx-alert-icon { background:rgba(231,76,60,.15); color:#e74c3c; }
+.fx-alert-title { font-size:1.15rem; font-weight:700; color:#fff; margin:0; }
+.fx-alert-message { font-size:.9rem; color:rgba(255,255,255,.7); line-height:1.6; margin:0 0 1.5rem; }
+.fx-alert-actions { display:flex; gap:.75rem; justify-content:flex-end; }
+.fx-alert-btn { padding:.6rem 1.5rem; border-radius:10px; font-size:.88rem; font-weight:600; cursor:pointer; border:none; transition:all .2s; font-family:inherit; }
+.fx-alert-ok { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
+.fx-alert-ok:hover { transform:translateY(-1px); box-shadow:0 4px 15px rgba(102,126,234,.3); }
+.fx-alert-cancel { background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.1); }
+.fx-alert-cancel:hover { background:rgba(255,255,255,.12); color:#fff; }
+
+@keyframes alertIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
+@keyframes alertOut { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.95)} }
+
+/* ── Mobile ── */
+@media(max-width:480px) {
+  .fx-toast-container { left:.5rem; right:.5rem; max-width:none; }
+}