@fuzionx/framework 0.1.46 → 0.1.47

package/cli/templates/make/app-spa/views/default/spa/src/views/ChatView.vue

@@ -0,0 +1,317 @@
+<!--
+  ChatView.vue — WebSocket 채팅 페이지.
+  
+  SSR chat.html 완전 복제:
+  Join Screen (닉네임 입력 → 접속) + Chat Room (사이드바 유저 리스트 + 메시지 영역).
+  useWebSocket composable로 WASM FuzionXSocket 사용.
+-->
+<template>
+  <div class="container">
+    <!-- ── Join Screen ── -->
+    <div v-if="!joined" class="chat-join-screen">
+      <div class="glass-card chat-join-card">
+        <div class="chat-join-icon">💬</div>
+        <h1 class="chat-join-title">WebSocket <span class="gradient-text">{{ t('chat.demo_title', 'Chat Demo') }}</span></h1>
+        <p class="chat-join-sub">
+          {{ t('chat.demo_sub', 'Experience FuzionX real-time WebSocket in action.') }}<br>
+          {{ t('chat.demo_tech', 'Built with') }} <code>WsHandler</code> + <code>FuzionXSocket</code> WASM client.
+        </p>
+        <div class="form-group" style="margin-top:2rem;">
+          <input
+            ref="nicknameInput"
+            v-model="nickname"
+            type="text"
+            class="chat-nickname-input"
+            :placeholder="t('chat.nickname_placeholder', 'Enter your nickname...')"
+            maxlength="20"
+            autocomplete="off"
+            @keydown.enter="joinChat"
+          />
+        </div>
+        <button
+          class="btn btn-hero-primary btn-full"
+          :disabled="joining"
+          @click="joinChat"
+        >
+          <span>{{ joining ? t('chat.connecting', 'connecting...') : t('chat.btn_join', 'Join Chat') }}</span>
+        </button>
+        <div class="chat-join-tech">
+          <span class="feature-tag tag-ws">FuzionXSocket</span>
+          <span class="feature-tag tag-rust">WASM</span>
+          <span class="feature-tag tag-node">Auto ASP</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Chat Room ── -->
+    <div v-else class="chat-room">
+      <div class="chat-layout">
+        <!-- Sidebar: User List -->
+        <aside class="chat-sidebar glass-card">
+          <div class="chat-sidebar-header">
+            <h3>{{ t('chat.online', 'Online') }} <span class="chat-user-count">{{ userCount }}</span></h3>
+          </div>
+          <ul class="chat-user-list">
+            <li
+              v-for="user in users"
+              :key="user.sid"
+              :class="['chat-user-item', { 'is-me': user.sid === mySessionId }]"
+            >
+              <span class="chat-user-dot"></span>
+              <span class="chat-user-name">{{ user.name }}</span>
+              <span v-if="user.sid === mySessionId" class="chat-user-me">you</span>
+            </li>
+          </ul>
+          <div class="chat-sidebar-footer">
+            <button class="btn btn-outline btn-full" style="font-size:0.85rem;" @click="leaveChat">
+              {{ t('chat.btn_leave', 'Leave Chat') }}
+            </button>
+          </div>
+        </aside>
+
+        <!-- Main: Messages -->
+        <div class="chat-main glass-card">
+          <div class="chat-messages-header">
+            <h3>💬 {{ t('chat.room_title', 'Chat Room') }}</h3>
+            <span :class="['chat-status', `chat-status-${statusClass}`]">{{ statusText }}</span>
+          </div>
+          <div ref="messagesContainer" class="chat-messages">
+            <template v-for="(msg, i) in messages" :key="i">
+              <div v-if="msg.system" class="chat-msg-system">{{ msg.text }}</div>
+              <div v-else :class="['chat-msg', msg.isMe ? 'chat-msg-me' : 'chat-msg-other']">
+                <div class="chat-msg-bubble">
+                  <span v-if="!msg.isMe" class="chat-msg-sender">{{ msg.sender }}</span>
+                  <span class="chat-msg-text">{{ msg.message }}</span>
+                  <span class="chat-msg-time">{{ msg.time }}</span>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div v-if="typingUser" class="chat-typing">{{ typingUser }} {{ t('chat.typing', 'is typing...') }}</div>
+          <form class="chat-input-form" @submit.prevent="sendMessage">
+            <input
+              ref="messageInput"
+              v-model="messageText"
+              type="text"
+              class="chat-message-input"
+              :placeholder="t('chat.msg_placeholder', 'Type a message...')"
+              autocomplete="off"
+              maxlength="500"
+              @input="onTyping"
+            />
+            <button type="submit" class="btn btn-primary chat-send-btn">{{ t('chat.btn_send', 'Send') }}</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── Footer ── -->
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-content">
+        <span class="footer-brand">FuzionX</span>
+        <span class="footer-text">{{ t('chat.footer', 'Powered by WsHandler') }} — <router-link to="/features#websocket" style="color:var(--accent-solid);">{{ t('chat.footer_link', 'WebSocket Features') }}</router-link></span>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, onMounted, onUnmounted, inject } from 'vue';
+import { useLocale } from '../composables/useLocale.js';
+import { useAuthStore } from '../stores/auth.js';
+
+const { t } = useLocale();
+const authStore = useAuthStore();
+const fxConfig = inject('fxConfig', {});
+const injectedMasterSecret = inject('masterSecret', '');
+
+/* ── State ── */
+const joined = ref(false);
+const joining = ref(false);
+const nickname = ref('');
+const mySessionId = ref(null);
+const users = ref([]);
+const messages = ref([]);
+const messageText = ref('');
+const statusClass = ref('connecting');
+const statusText = ref(t('chat.connecting', 'connecting...'));
+const typingUser = ref('');
+const nicknameInput = ref(null);
+const messageInput = ref(null);
+const messagesContainer = ref(null);
+
+let ws = null;
+let typingTimeout = null;
+let lastTypingSent = 0;
+
+const userCount = computed(() => users.value.length);
+
+/* ── HTML 이스케이프 ── */
+const ESC_MAP = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ESC_MAP[c]); }
+
+/* ── 로그인 사용자 닉네임 자동 입력 ── */
+onMounted(() => {
+  if (authStore.user?.name) {
+    nickname.value = authStore.user.name;
+  }
+});
+
+/* ── 컴포넌트 언마운트 시 정리 ── */
+onUnmounted(() => {
+  if (ws) { ws.disconnect(); ws = null; }
+  if (typingTimeout) clearTimeout(typingTimeout);
+});
+
+/* ── Join Chat ── */
+async function joinChat() {
+  const name = nickname.value.trim();
+  if (!name) {
+    nicknameInput.value?.focus();
+    return;
+  }
+  joining.value = true;
+  await connectWS();
+}
+
+/* ── WebSocket 연결 ── */
+async function connectWS() {
+  const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const url = `${wsProto}//${location.host}/ws/chat`;
+
+  // WASM 로드 대기
+  if (window._aspReady) await window._aspReady;
+
+  // FuzionXSocket이 아직 없으면 직접 WASM 로드
+  if (!window.FuzionXSocket) {
+    try {
+      const _v = Date.now();
+      const mod = await import(/* @vite-ignore */ `/wasm/fuzionx_client_wasm.js?v=${_v}`);
+      await mod.default({ module_or_path: `/wasm/fuzionx_client_wasm_bg.wasm?v=${_v}` });
+      window.FuzionXSocket = mod.FuzionXSocket;
+    } catch (e) {
+      console.error('[Chat] WASM load failed:', e);
+      joining.value = false;
+      return;
+    }
+  }
+
+  // masterSecret는 main.js에서 inject('masterSecret')로 제공됨
+  const masterSecret = injectedMasterSecret || '';
+  
+  ws = new window.FuzionXSocket(url, masterSecret, window.__FX_ENC_ENABLED__);
+
+  ws.on('connect', () => { setStatus('connected', window.__FX_ENC_ENABLED__ ? 'connected (ASP 🔐)' : 'connected'); });
+
+  ws.on('message', (raw) => { console.log('[Chat] raw:', JSON.stringify(raw)); });
+
+  ws.on('chat_ready', (data) => {
+    if (!data || !data.sessionId) return;
+    mySessionId.value = data.sessionId;
+    joined.value = true;
+    joining.value = false;
+    appendSystemMessage(`${nickname.value} 접속`);
+    nextTick(() => { messageInput.value?.focus(); });
+
+    // 서버에 사용자 정보 전송
+    const payload = { name: nickname.value };
+    if (authStore.user?.email) payload.email = authStore.user.email;
+    if (authStore.user?.id) payload.id = authStore.user.id;
+    ws.send('setUser', payload);
+  });
+
+  ws.on('userlist', (data) => {
+    users.value = data.users || [];
+  });
+
+  ws.on('user_joined', (data) => {
+    if (!users.value.find(u => u.sid === data.sid)) {
+      users.value.push(data);
+    }
+    appendSystemMessage(`${data.name || 'unknown'} 입장`);
+  });
+
+  ws.on('user_left', (data) => {
+    users.value = users.value.filter(u => u.sid !== data.sid);
+    appendSystemMessage(`${data.name || 'unknown'} 퇴장`);
+  });
+
+  ws.on('system', (data) => { appendSystemMessage(data.text); });
+
+  ws.on('typing', (data) => {
+    typingUser.value = data.user;
+    clearTimeout(typingTimeout);
+    typingTimeout = setTimeout(() => { typingUser.value = ''; }, 2000);
+  });
+
+  ws.on('broadcast', (data) => { appendSystemMessage(`📢 ${data.user}: ${data.text}`); });
+
+  ws.on('chat_msg', (data) => {
+    appendMsg({ sender: data.user, message: data.text, timestamp: data.timestamp }, false);
+  });
+
+  ws.on('disconnect', () => { setStatus('disconnected', 'disconnected'); });
+  ws.on('reconnect', () => { setStatus('connecting', 'reconnecting...'); });
+  ws.on('error', () => { setStatus('error', 'connection error'); joining.value = false; });
+
+  ws.connect();
+}
+
+/* ── 메시지 전송 ── */
+function sendMessage() {
+  const text = messageText.value.trim();
+  if (!text || !ws || !ws.is_connected()) return;
+  ws.send('message', { text });
+  appendMsg({ sender: nickname.value, message: text, timestamp: Date.now() }, true);
+  messageText.value = '';
+  messageInput.value?.focus();
+}
+
+/* ── 타이핑 인디케이터 ── */
+function onTyping() {
+  if (!ws || !ws.is_connected()) return;
+  const now = Date.now();
+  if (now - lastTypingSent > 1500) {
+    ws.send('typing', {});
+    lastTypingSent = now;
+  }
+}
+
+/* ── Leave Chat ── */
+function leaveChat() {
+  if (ws) { ws.disconnect(); ws = null; }
+  mySessionId.value = null;
+  joined.value = false;
+  joining.value = false;
+  users.value = [];
+  messages.value = [];
+}
+
+/* ── Helpers ── */
+function setStatus(cls, text) {
+  statusClass.value = cls;
+  statusText.value = text;
+}
+
+function appendMsg(data, isMe) {
+  const time = data.timestamp
+    ? new Date(data.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+    : '';
+  messages.value.push({ sender: data.sender, message: data.message, time, isMe, system: false });
+  scrollToBottom();
+}
+
+function appendSystemMessage(text) {
+  messages.value.push({ text, system: true });
+  scrollToBottom();
+}
+
+function scrollToBottom() {
+  nextTick(() => {
+    const el = messagesContainer.value;
+    if (el) el.scrollTop = el.scrollHeight;
+  });
+}
+</script>

package/cli/templates/make/app-spa/views/default/spa/src/views/FeaturesView.vue

@@ -0,0 +1,242 @@
+<!--
+  FeaturesView.vue — 기능 소개 페이지.
+  
+  SSR features.html 완전 복제:
+  7개 feature 섹션 (Bridge, ORM, SSR+SPA, WebSocket, TaskQueue, Security, DX)
+  각 섹션에 4개 카드 + 코드 블록 포함. CTA + Footer.
+-->
+<template>
+  <!-- ── Page Header ── -->
+  <section class="section">
+    <div class="container">
+      <div class="section-header">
+        <div class="hero-badge" style="margin-bottom:1rem;">📖 {{ t('feat.badge', 'Framework Features') }}</div>
+        <h1 class="section-title">{{ t('feat.header_title_1', 'Built for') }} <span class="gradient-text">{{ t('feat.header_title_2', 'Production') }}</span></h1>
+        <p class="section-subtitle">{{ t('feat.header_sub', 'Every feature designed for performance, developer experience, and enterprise readiness.') }}</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Feature Sections ── -->
+  <section
+    v-for="(feat, idx) in featureSections"
+    :key="feat.id"
+    :id="feat.id"
+    :class="['section', { 'section-dark': idx % 2 === 0 }]"
+  >
+    <div class="container">
+      <div class="feat-detail">
+        <div class="feat-detail-header">
+          <span class="feat-detail-icon">{{ feat.icon }}</span>
+          <div>
+            <h2 class="feat-detail-title">{{ feat.title }}</h2>
+            <p class="feat-detail-sub">{{ feat.sub }}</p>
+          </div>
+        </div>
+        <div :class="['feat-detail-grid', { 'feat-detail-grid-3': feat.cards.length === 3 }]">
+          <div v-for="card in feat.cards" :key="card.title" class="feat-detail-card">
+            <h4 v-html="card.title"></h4>
+            <p v-html="card.desc"></p>
+          </div>
+        </div>
+        <CodeBlock v-if="feat.code" :title="feat.code.title">
+          <span v-html="feat.code.body"></span>
+        </CodeBlock>
+        <!-- WebSocket 섹션 — Try Chat 버튼 -->
+        <div v-if="feat.id === 'websocket'" style="text-align:center; margin-top:2rem;">
+          <router-link to="/chat" class="btn btn-hero-primary"><span>{{ t('feat.btn_try_chat', 'Try Live Chat Demo →') }}</span></router-link>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── CTA ── -->
+  <section class="cta-section">
+    <div class="container">
+      <div class="cta-card glass-card">
+        <h2 class="cta-title">{{ t('feat.cta_title_1', 'Start Building') }} <span class="gradient-text">{{ t('feat.cta_title_2', 'Today') }}</span></h2>
+        <p class="cta-subtitle">{{ t('feat.cta_sub', 'One command to scaffold. Zero configuration to start.') }}</p>
+        <div class="cta-install"><code>npx create-fuzionx my-app</code></div>
+        <div class="hero-actions" style="margin-top: 1.5rem;">
+          <router-link to="/" class="btn btn-hero-outline"><span>← {{ t('feat.btn_back', 'Back to Home') }}</span></router-link>
+          <router-link to="/chat" class="btn btn-hero-primary"><span>{{ t('feat.btn_chat', 'Try Chat Demo') }}</span></router-link>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ── Footer ── -->
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-content">
+        <span class="footer-brand">FuzionX</span>
+        <span class="footer-text">{{ t('home.footer', 'Rust-powered Node.js framework for the modern web.') }}</span>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useLocale } from '../composables/useLocale.js';
+import CodeBlock from '../components/CodeBlock.vue';
+
+const { t } = useLocale();
+
+/** 7개 Feature 섹션 데이터 — SSR features.html */
+const featureSections = computed(() => [
+  {
+    id: 'bridge', icon: '⚡',
+    title: t('feat.bridge_title', 'Rust N-API Bridge'),
+    sub: t('feat.bridge_sub', 'Native performance for core operations — no JavaScript overhead.'),
+    cards: [
+      { title: '500K+ RPS', desc: t('feat.bridge_rps', 'The HTTP engine runs entirely in Rust through N-API, delivering throughput that JavaScript-based servers cannot match. Request parsing, routing, and response serialization happen at native speed.') },
+      { title: t('feat.bridge_zerocopy', 'Zero-Copy File Uploads'), desc: t('feat.bridge_zerocopy_desc', 'Multipart parsing happens in Rust. Files are written directly to disk — the file buffer never enters JavaScript memory, making large file uploads safe and efficient.') },
+      { title: t('feat.bridge_crypto', 'Native Crypto'), desc: t('feat.bridge_crypto_desc', 'bcrypt, argon2id, AES-256-GCM, SHA-256, MD5, UUID v4 — all executed in Rust. No crypto module overhead, no C++ addon compilation issues.') },
+      { title: t('feat.bridge_media', 'Media Processing'), desc: t('feat.bridge_media_desc', 'Image resizing (Lanczos3), WebP conversion, and video thumbnail extraction powered by Rust image crate and ffmpeg bindings.') },
+    ],
+    code: {
+      title: t('feat.bridge_code_title', 'Native Performance — Zero JS Overhead'),
+      body: `<span class="code-cmt">// All these operations run in Rust — no JS overhead</span>
+<span class="code-kw">const</span> hash = app.hash.<span class="code-fn">argon2</span>(password);           <span class="code-cmt">// Rust argon2id</span>
+<span class="code-kw">const</span> id   = app.crypto.<span class="code-fn">uuid</span>();                   <span class="code-cmt">// Rust UUID v4</span>
+<span class="code-kw">const</span> enc  = app.crypto.<span class="code-fn">encrypt</span>(key, plaintext);   <span class="code-cmt">// Rust AES-256-GCM</span>
+app.media.<span class="code-fn">resize</span>(input, output, <span class="code-num">800</span>, <span class="code-num">600</span>, <span class="code-str">'webp'</span>); <span class="code-cmt">// Rust image crate</span>`,
+    },
+  },
+  {
+    id: 'orm', icon: '🗄️',
+    title: t('feat.orm_title', 'Multi-Database ORM'),
+    sub: t('feat.orm_sub', 'One API for MariaDB, PostgreSQL, and MongoDB. Model = Schema = Single source of truth.'),
+    cards: [
+      { title: t('feat.orm_unified', 'Unified Query API'), desc: t('feat.orm_unified_desc', "Write User.where('active', true).paginate(1, 20) and it works across all databases. No database-specific code needed for CRUD operations.") },
+      { title: t('feat.orm_schema', 'Model-Based Schema Sync'), desc: t('feat.orm_schema_desc', 'Define columns in the model with static columns, then run fx db:sync. No more writing migration files — the model IS the schema.') },
+      { title: t('feat.orm_relations', 'Relationships'), desc: t('feat.orm_relations_desc', "hasMany, hasOne, belongsTo, belongsToMany — define relations as methods. Eager loading with .with('posts.comments').") },
+      { title: t('feat.orm_access', '3-Level Access'), desc: t('feat.orm_access_desc', 'Unified API for 99% of cases → Raw Query for DB-specific features → Native driver access when you need full control.') },
+    ],
+    code: {
+      title: 'models/User.js',
+      body: `<span class="code-kw">import</span> { Model } <span class="code-kw">from</span> <span class="code-str">'@fuzionx/framework'</span>;
+
+<span class="code-kw">export default class</span> <span class="code-fn">User</span> <span class="code-kw">extends</span> Model {
+    <span class="code-kw">static</span> table = <span class="code-str">'users'</span>;
+    <span class="code-kw">static</span> timestamps = <span class="code-num">true</span>;
+
+    <span class="code-kw">static</span> columns = {
+        id:    { type: <span class="code-str">'increments'</span> },
+        name:  { type: <span class="code-str">'string'</span>, length: <span class="code-num">100</span> },
+        email: { type: <span class="code-str">'string'</span>, length: <span class="code-num">150</span>, unique: <span class="code-num">true</span> },
+    };
+
+    <span class="code-fn">posts</span>()   { <span class="code-kw">return</span> <span class="code-kw">this</span>.hasMany(<span class="code-str">'Post'</span>); }
+    <span class="code-fn">profile</span>() { <span class="code-kw">return</span> <span class="code-kw">this</span>.hasOne(<span class="code-str">'Profile'</span>); }
+}`,
+    },
+  },
+  {
+    id: 'rendering', icon: '🎨',
+    title: t('feat.ssr_title', 'SSR + SPA Hybrid'),
+    sub: t('feat.ssr_sub', 'Server-rendered pages and single-page apps in one project with domain routing.'),
+    cards: [
+      { title: t('feat.ssr_tera', 'Tera Template Engine'), desc: t('feat.ssr_tera_desc', 'Jinja2-compatible template engine compiled in Rust. Layouts, blocks, inheritance, filters, and macros for fast SSR rendering.') },
+      { title: t('feat.ssr_theme', 'Theme System'), desc: t('feat.ssr_theme_desc', 'Multiple view themes with views/{theme}/ structure. Switch themes via config without changing any controller code.') },
+      { title: t('feat.ssr_multiapp', 'Multi-App Routing'), desc: t('feat.ssr_multiapp_desc', 'Route different domains to different apps: api.example.com → spa, www.example.com → ssr. One codebase, multiple frontends.') },
+      { title: t('feat.ssr_i18n', 'Built-in i18n'), desc: t('feat.ssr_i18n_desc', "JSON-based translations with auto-detection, fallback locales, and missing key auto-complete.") + ` <code>ctx.t('key')</code> / <code>{{ '{{' }} t(key="...") }}</code>` },
+    ],
+    code: null,
+  },
+  {
+    id: 'websocket', icon: '🔌',
+    title: t('feat.ws_title', 'Real-time WebSocket'),
+    sub: t('feat.ws_sub', 'Namespace-based event routing with rooms, middleware sharing, and multi-server Hub.'),
+    cards: [
+      { title: t('feat.ws_dsl', 'Event Routing DSL'), desc: t('feat.ws_dsl_desc', 'static events(e) declares event → handler mappings, just like controller routes. Clean, declarative, and auto-scanned from ws/ folder.') },
+      { title: t('feat.ws_rooms', 'Rooms'), desc: t('feat.ws_rooms_desc', "socket.join('room:123'), socket.to('room:123').send({...}) — built-in room management without external libraries.") },
+      { title: t('feat.ws_middleware', 'Middleware Sharing'), desc: t('feat.ws_middleware_desc', 'Reuse the same HTTP middleware for WebSocket handshake. Auth middleware works for both HTTP and WS connections.') },
+      { title: t('feat.ws_hub', 'Hub Broadcasting'), desc: t('feat.ws_hub_desc', 'Multi-server? Just add { hub: true } to broadcast. Messages route through Hub server to all connected instances.') },
+    ],
+    code: {
+      title: 'ws/ChatHandler.js',
+      body: `<span class="code-kw">import</span> { WsHandler } <span class="code-kw">from</span> <span class="code-str">'@fuzionx/framework'</span>;
+
+<span class="code-kw">export default class</span> <span class="code-fn">ChatHandler</span> <span class="code-kw">extends</span> WsHandler {
+    <span class="code-kw">static</span> namespace = <span class="code-str">'/chat'</span>;
+    <span class="code-kw">static</span> middleware = [<span class="code-str">'auth'</span>];
+
+    <span class="code-kw">static</span> <span class="code-fn">events</span>(e) {
+        e.on(<span class="code-str">'chat'</span>,   <span class="code-kw">this</span>.handleChat);
+        e.on(<span class="code-str">'typing'</span>, <span class="code-kw">this</span>.handleTyping);
+    }
+
+    <span class="code-fn">handleChat</span>(socket, data) {
+        socket.to(<span class="code-str">\`room:\${data.roomId}\`</span>).send({
+            type: <span class="code-str">'chat'</span>,
+            data: { user: socket.user, message: data.message }
+        });
+    }
+}`,
+    },
+  },
+  {
+    id: 'queue', icon: '⏰',
+    title: t('feat.queue_title', 'Task Queue + Workers'),
+    sub: t('feat.queue_sub', 'Three ways to handle background work — scheduled, queued, and CPU-isolated.'),
+    cards: [
+      { title: '📅 ' + t('feat.queue_scheduled', 'Scheduled Jobs'), desc: t('feat.queue_scheduled_desc', "Cron-based recurring tasks. static schedule = 'daily:02:00'. Runs on master process with Redis distributed lock for multi-server.") },
+      { title: '📬 ' + t('feat.queue_queued', 'Queued Tasks'), desc: t('feat.queue_queued_desc', "Async dispatch with retries: app.dispatch('SendEmail', data). Memory or Redis backend. Failed tasks call failed() hook.") },
+      { title: '🧵 WorkerPool', desc: t('feat.queue_worker_desc', "CPU-heavy work in worker_threads: app.worker.run('csv-parser', data). Prevents event loop blocking. Timeout + auto-cleanup.") },
+    ],
+    code: {
+      title: 'jobs/SendWelcomeEmail.js',
+      body: `<span class="code-kw">import</span> { Task } <span class="code-kw">from</span> <span class="code-str">'@fuzionx/framework'</span>;
+
+<span class="code-kw">export default class</span> <span class="code-fn">SendWelcomeEmail</span> <span class="code-kw">extends</span> Task {
+    <span class="code-kw">static</span> queue   = <span class="code-str">'emails'</span>;
+    <span class="code-kw">static</span> retries = <span class="code-num">3</span>;
+
+    <span class="code-kw">async</span> <span class="code-fn">handle</span>(data) {
+        <span class="code-kw">const</span> user = <span class="code-kw">await</span> <span class="code-kw">this</span>.db.User.find(data.userId);
+        <span class="code-kw">await</span> <span class="code-kw">this</span>.service(<span class="code-str">'MailService'</span>).sendWelcome(user.email);
+    }
+
+    <span class="code-kw">async</span> <span class="code-fn">failed</span>(data, error) {
+        <span class="code-kw">this</span>.logger.error(<span class="code-str">'Email failed'</span>, { userId: data.userId });
+    }
+}`,
+    },
+  },
+  {
+    id: 'security', icon: '🔐',
+    title: t('feat.sec_title', 'Enterprise Security'),
+    sub: t('feat.sec_sub', 'Production-grade security built into every layer — from wire encryption to password hashing.'),
+    cards: [
+      { title: t('feat.sec_asp', 'ASP Wire Encryption'), desc: t('feat.sec_asp_desc', 'FuzionX Stealth Protocol encrypts all HTTP request/response bodies on the wire. Transparent to application code, impenetrable to MITM attacks.') },
+      { title: t('feat.sec_hash', 'Native Password Hashing'), desc: t('feat.sec_hash_desc', 'bcrypt (cost 12) and argon2id hashing in Rust — orders of magnitude faster than JavaScript implementations with the same security guarantees.') },
+      { title: t('feat.sec_session', 'Session + JWT Auth'), desc: t('feat.sec_session_desc', 'File-based or Redis session store. JWT access/refresh token rotation. Built-in auth() middleware with route guards.') },
+      { title: t('feat.sec_rate', 'Rate Limiting + CSRF'), desc: t('feat.sec_rate_desc', 'Per-IP rate limiting in the Rust bridge layer. CSRF token generation and validation. IP whitelist/blacklist. HSTS and CSP headers.') },
+    ],
+    code: null,
+  },
+  {
+    id: 'dx', icon: '🛠️',
+    title: t('feat.dx_title', 'Developer Experience'),
+    sub: t('feat.dx_sub', 'CLI scaffolding, auto-scanning, hot reload, OpenAPI docs — everything to keep you productive.'),
+    cards: [
+      { title: t('feat.dx_cli', 'CLI Code Generator'), desc: t('feat.dx_cli_desc', 'fx make:controller, fx make:model, fx make:service — scaffold any component instantly with proper boilerplate.') },
+      { title: t('feat.dx_autoscan', 'Auto-Scanning'), desc: t('feat.dx_autoscan_desc', 'Drop a file in controllers/, services/, ws/, or jobs/ — the framework discovers and registers it automatically. Zero manual wiring.') },
+      { title: t('feat.dx_openapi', 'OpenAPI Auto-Generation'), desc: t('feat.dx_openapi_desc', 'Swagger UI at /docs with zero configuration. Route definitions are automatically converted to OpenAPI 3.0 spec.') },
+      { title: t('feat.dx_test', 'Testing Helpers'), desc: t('feat.dx_test_desc', 'In-process HTTP test client, database transaction rollbacks, isolated test contexts. vitest integration out of the box.') },
+    ],
+    code: {
+      title: 'Terminal',
+      body: `<span class="code-cmt">$ npx create-fuzionx my-app</span>
+<span class="code-cmt">$ cd my-app</span>
+<span class="code-cmt">$ fx make:controller User</span>     <span class="code-str"># → controllers/UserController.js</span>
+<span class="code-cmt">$ fx make:model User</span>          <span class="code-str"># → models/User.js</span>
+<span class="code-cmt">$ fx make:service User</span>        <span class="code-str"># → services/UserService.js</span>
+<span class="code-cmt">$ fx db:sync --apply</span>          <span class="code-str"># → Schema synced ✓</span>
+<span class="code-cmt">$ fx dev</span>                       <span class="code-str"># → 🚀 Running on http://localhost:3000</span>`,
+    },
+  },
+]);
+</script>