@nuraly/lumenjs 0.1.2 → 0.1.4

package/dist/editor/text-toolbar.js

@@ -0,0 +1,327 @@
+/**
+ * Text Toolbar — floating toolbar for text formatting (font size, weight, color, alignment, i18n).
+ */
+import { applyAstModification, makeTranslatable } from './editor-api-client.js';
+import { generateI18nKey } from './i18n-key-gen.js';
+const TEXT_TAGS = new Set(['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'SPAN', 'A', 'LABEL', 'LI', 'BUTTON']);
+let textToolbar;
+let selectedElementRef = { current: null };
+export function setTextToolbarSelectedElement(ref) {
+    selectedElementRef = ref;
+}
+export function getTextToolbar() {
+    return textToolbar;
+}
+export { TEXT_TAGS };
+export function createTextToolbar() {
+    const tb = document.createElement('div');
+    tb.id = 'nk-text-toolbar';
+    tb.innerHTML = `
+    <div class="nk-tt-row">
+      <select class="nk-tt-select nk-tt-font-size" title="Font size">
+        <option value="">Size</option>
+        <option value="12px">12</option>
+        <option value="14px">14</option>
+        <option value="16px">16</option>
+        <option value="18px">18</option>
+        <option value="20px">20</option>
+        <option value="24px">24</option>
+        <option value="28px">28</option>
+        <option value="32px">32</option>
+        <option value="36px">36</option>
+        <option value="48px">48</option>
+        <option value="64px">64</option>
+      </select>
+      <select class="nk-tt-select nk-tt-font-weight" title="Font weight">
+        <option value="">Weight</option>
+        <option value="300">Light</option>
+        <option value="400">Normal</option>
+        <option value="500">Medium</option>
+        <option value="600">Semi</option>
+        <option value="700">Bold</option>
+        <option value="800">Extra</option>
+      </select>
+      <span class="nk-tt-sep"></span>
+      <button class="nk-tt-btn" data-style="fontStyle:italic" title="Italic"><em>I</em></button>
+      <button class="nk-tt-btn" data-style="textDecoration:underline" title="Underline"><u>U</u></button>
+      <span class="nk-tt-sep"></span>
+      <button class="nk-tt-btn" data-style="textAlign:left" title="Align left">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
+      </button>
+      <button class="nk-tt-btn" data-style="textAlign:center" title="Align center">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="6" y1="12" x2="18" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
+      </button>
+      <button class="nk-tt-btn" data-style="textAlign:right" title="Align right">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg>
+      </button>
+      <span class="nk-tt-sep"></span>
+      <label class="nk-tt-color-wrap" title="Text color">
+        <span class="nk-tt-color-label">A</span>
+        <input type="color" class="nk-tt-color" value="#000000">
+      </label>
+      <span class="nk-tt-sep nk-tt-i18n-sep" style="display:none"></span>
+      <button class="nk-tt-btn nk-tt-translate" title="Make translatable" style="display:none">
+        <span style="font-size:11px;font-family:system-ui">T<sub>i</sub></span>
+      </button>
+    </div>
+  `;
+    const style = document.createElement('style');
+    style.textContent = `
+    #nk-text-toolbar {
+      position: fixed; z-index: 100000; display: none;
+      background: #1e1b2e; border: 1px solid #334155; border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.4); padding: 6px 8px;
+      font-family: system-ui, -apple-system, sans-serif; font-size: 12px;
+      user-select: none; -webkit-user-select: none;
+    }
+    #nk-text-toolbar::after {
+      content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
+      border-left: 6px solid transparent; border-right: 6px solid transparent;
+      border-top: 6px solid #1e1b2e;
+    }
+    .nk-tt-row { display: flex; align-items: center; gap: 4px; }
+    .nk-tt-select {
+      background: #0f0d1a; color: #e2e8f0; border: 1px solid #334155; border-radius: 4px;
+      padding: 4px 6px; font-size: 11px; font-family: inherit; cursor: pointer; outline: none;
+    }
+    .nk-tt-select:hover { border-color: #475569; }
+    .nk-tt-btn {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 28px; height: 28px; background: transparent; border: 1px solid transparent;
+      border-radius: 4px; color: #e2e8f0; cursor: pointer; font-size: 13px;
+      font-family: Georgia, serif; transition: all 0.1s;
+      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
+    }
+    .nk-tt-btn:hover { background: #334155; border-color: #475569; }
+    .nk-tt-btn.active { background: #7c3aed; border-color: #7c3aed; }
+    .nk-tt-sep { width: 1px; height: 20px; background: #334155; margin: 0 2px; }
+    .nk-tt-translate { font-family: system-ui !important; }
+    .nk-tt-color-wrap {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 28px; height: 28px; cursor: pointer; position: relative;
+      border: 1px solid transparent; border-radius: 4px;
+    }
+    .nk-tt-color-wrap:hover { background: #334155; border-color: #475569; }
+    .nk-tt-color-label {
+      font-size: 14px; font-weight: 700; color: #e2e8f0; pointer-events: none;
+      font-family: Georgia, serif;
+    }
+    .nk-tt-color {
+      position: absolute; bottom: 0; left: 2px; width: 24px; height: 4px;
+      border: none; padding: 0; cursor: pointer; opacity: 0;
+    }
+    .nk-tt-color-bar {
+      position: absolute; bottom: 2px; left: 4px; right: 4px; height: 3px;
+      background: #e2e8f0; border-radius: 1px; pointer-events: none;
+    }
+    @media (max-width: 640px) {
+      #nk-text-toolbar { padding: 4px 6px; }
+      .nk-tt-select { padding: 3px 4px; font-size: 10px; }
+      .nk-tt-btn { width: 26px; height: 26px; font-size: 12px; }
+    }
+  `;
+    document.head.appendChild(style);
+    // Add color bar indicator under the "A" label
+    const colorWrap = tb.querySelector('.nk-tt-color-wrap');
+    const colorBar = document.createElement('span');
+    colorBar.className = 'nk-tt-color-bar';
+    colorWrap.appendChild(colorBar);
+    document.body.appendChild(tb);
+    textToolbar = tb;
+    return tb;
+}
+export function positionTextToolbar(el) {
+    const rect = el.getBoundingClientRect();
+    const tbRect = textToolbar.getBoundingClientRect();
+    const tbWidth = tbRect.width || 360;
+    const tbHeight = tbRect.height || 40;
+    let left = rect.left + rect.width / 2 - tbWidth / 2;
+    let top = rect.top - tbHeight - 10;
+    // Keep within viewport
+    if (left < 8)
+        left = 8;
+    if (left + tbWidth > window.innerWidth - 8)
+        left = window.innerWidth - 8 - tbWidth;
+    if (top < 52) {
+        // Show below element instead (44px toolbar + 8px gap)
+        top = rect.bottom + 10;
+    }
+    Object.assign(textToolbar.style, {
+        display: 'block',
+        left: `${left}px`,
+        top: `${top}px`,
+    });
+}
+export function hideTextToolbar() {
+    textToolbar.style.display = 'none';
+}
+function rgbToHex(rgb) {
+    const m = rgb.match(/(\d+)/g);
+    if (!m || m.length < 3)
+        return '#000000';
+    return '#' + [m[0], m[1], m[2]].map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
+}
+function readCurrentStyles(el) {
+    const cs = window.getComputedStyle(el);
+    // Font size select
+    const sizeSelect = textToolbar.querySelector('.nk-tt-font-size');
+    sizeSelect.value = '';
+    const currentSize = cs.fontSize;
+    for (const opt of Array.from(sizeSelect.options)) {
+        if (opt.value === currentSize) {
+            sizeSelect.value = currentSize;
+            break;
+        }
+    }
+    // Font weight select
+    const weightSelect = textToolbar.querySelector('.nk-tt-font-weight');
+    weightSelect.value = '';
+    const currentWeight = cs.fontWeight;
+    for (const opt of Array.from(weightSelect.options)) {
+        if (opt.value === currentWeight) {
+            weightSelect.value = currentWeight;
+            break;
+        }
+    }
+    // Toggle buttons
+    textToolbar.querySelectorAll('.nk-tt-btn[data-style]').forEach(btn => {
+        const [prop, val] = btn.dataset.style.split(':');
+        const camelProp = prop;
+        btn.classList.toggle('active', cs[camelProp] === val);
+    });
+    // Color
+    const colorInput = textToolbar.querySelector('.nk-tt-color');
+    const colorBar = textToolbar.querySelector('.nk-tt-color-bar');
+    const rgb = cs.color;
+    const hex = rgbToHex(rgb);
+    colorInput.value = hex;
+    colorBar.style.background = hex;
+}
+function applyStyleToSelected(prop, value) {
+    const selectedElement = selectedElementRef.current;
+    if (!selectedElement)
+        return;
+    // Apply visually immediately
+    selectedElement.style[prop] = value;
+    // Persist via AST modification
+    const sourceAttr = selectedElement.getAttribute('data-nk-source');
+    if (!sourceAttr)
+        return;
+    const lastColon = sourceAttr.lastIndexOf(':');
+    const sourceFile = sourceAttr.substring(0, lastColon);
+    const line = parseInt(sourceAttr.substring(lastColon + 1), 10);
+    // Build full inline style string from the element
+    const styleStr = selectedElement.getAttribute('style') || '';
+    // Clean up internal editor styles before saving
+    const cleanStyle = styleStr
+        .split(';')
+        .map(s => s.trim())
+        .filter(s => s && !s.startsWith('outline') && !s.startsWith('outline-offset') && !s.startsWith('border-radius') && !s.startsWith('min-width'))
+        .join('; ');
+    applyAstModification(sourceFile, {
+        type: 'setAttribute',
+        elementSelector: selectedElement.tagName.toLowerCase(),
+        sourceLine: line,
+        attributeName: 'style',
+        attributeValue: cleanStyle || undefined,
+    }).catch(() => {
+        // Silent fail — visual change still applied
+    });
+}
+export function setupTextToolbarHandlers() {
+    // Font size
+    textToolbar.querySelector('.nk-tt-font-size').addEventListener('change', (e) => {
+        const val = e.target.value;
+        if (val)
+            applyStyleToSelected('fontSize', val);
+    });
+    // Font weight
+    textToolbar.querySelector('.nk-tt-font-weight').addEventListener('change', (e) => {
+        const val = e.target.value;
+        if (val)
+            applyStyleToSelected('fontWeight', val);
+    });
+    // Toggle buttons (italic, underline, alignment)
+    textToolbar.querySelectorAll('.nk-tt-btn[data-style]').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const [prop, val] = (btn.dataset.style).split(':');
+            const cs = selectedElementRef.current ? window.getComputedStyle(selectedElementRef.current) : null;
+            const camelProp = prop;
+            const current = cs ? cs[camelProp] : '';
+            // For italic/underline: toggle. For alignment: always set.
+            if (prop === 'fontStyle' || prop === 'textDecoration') {
+                const newVal = current === val ? 'normal' : val;
+                applyStyleToSelected(prop, newVal);
+                btn.classList.toggle('active', newVal === val);
+            }
+            else {
+                // Alignment — deactivate siblings, activate this one
+                textToolbar.querySelectorAll('.nk-tt-btn[data-style^="textAlign"]').forEach(b => b.classList.remove('active'));
+                applyStyleToSelected(prop, val);
+                btn.classList.add('active');
+            }
+        });
+    });
+    // Color picker
+    const colorInput = textToolbar.querySelector('.nk-tt-color');
+    const colorBar = textToolbar.querySelector('.nk-tt-color-bar');
+    const colorLabel = textToolbar.querySelector('.nk-tt-color-label');
+    colorInput.addEventListener('input', () => {
+        const val = colorInput.value;
+        colorBar.style.background = val;
+        colorLabel.style.color = val;
+        applyStyleToSelected('color', val);
+    });
+    // Make translatable button
+    textToolbar.querySelector('.nk-tt-translate').addEventListener('click', (e) => {
+        e.stopPropagation();
+        const selectedElement = selectedElementRef.current;
+        if (!selectedElement)
+            return;
+        const isAlready = !!selectedElement.getAttribute('data-nk-i18n-key') || !!selectedElement.closest('[data-nk-i18n-key]') || selectedElement.hasAttribute('data-nk-dynamic');
+        if (isAlready)
+            return;
+        const sourceAttr = selectedElement.getAttribute('data-nk-source');
+        if (!sourceAttr)
+            return;
+        const text = selectedElement.textContent || '';
+        if (!text.trim())
+            return;
+        const lastColon = sourceAttr.lastIndexOf(':');
+        const sourceFile = sourceAttr.substring(0, lastColon);
+        const line = parseInt(sourceAttr.substring(lastColon + 1), 10);
+        const tag = selectedElement.tagName.toLowerCase();
+        const i18nKey = generateI18nKey(sourceFile, tag, text);
+        const config = window.__nk_i18n_config__;
+        const locales = config?.locales || ['en'];
+        const translateBtnEl = textToolbar.querySelector('.nk-tt-translate');
+        makeTranslatable({ sourceFile, elementSelector: tag, sourceLine: line, i18nKey, text, locales })
+            .then(() => {
+            translateBtnEl.classList.add('active');
+        })
+            .catch((err) => console.error('[editor] Make translatable failed:', err));
+    });
+    // Prevent toolbar clicks from deselecting
+    textToolbar.addEventListener('click', (e) => e.stopPropagation());
+    textToolbar.addEventListener('mousedown', (e) => e.stopPropagation());
+}
+export function showTextToolbarForElement(el) {
+    if (TEXT_TAGS.has(el.tagName)) {
+        readCurrentStyles(el);
+        // Show/hide translate button based on i18n availability
+        const translateBtn = textToolbar.querySelector('.nk-tt-translate');
+        const translateSep = textToolbar.querySelector('.nk-tt-i18n-sep');
+        const hasI18nConfig = !!window.__nk_i18n_config__;
+        const isI18n = !!el.getAttribute('data-nk-i18n-key') || !!el.closest('[data-nk-i18n-key]');
+        const isDynamic = el.hasAttribute('data-nk-dynamic');
+        const alreadyTranslatable = isI18n || isDynamic;
+        translateBtn.style.display = hasI18nConfig ? '' : 'none';
+        translateSep.style.display = hasI18nConfig ? '' : 'none';
+        translateBtn.classList.toggle('active', alreadyTranslatable);
+        positionTextToolbar(el);
+    }
+    else {
+        hideTextToolbar();
+    }
+}

package/dist/editor/toolbar-styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Toolbar and file panel CSS styles.
+ */
+export declare function injectToolbarStyles(): void;

package/dist/editor/toolbar-styles.js

@@ -0,0 +1,198 @@
+/**
+ * Toolbar and file panel CSS styles.
+ */
+export function injectToolbarStyles() {
+    const style = document.createElement('style');
+    style.textContent = `
+    #nk-editor-toolbar {
+      position: fixed; top: 0; left: 0; right: 0; height: 44px;
+      background: #1e1b2e; color: #e2e8f0; font-family: system-ui, -apple-system, sans-serif;
+      font-size: 12px; z-index: 99999; box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+      user-select: none; -webkit-user-select: none; touch-action: manipulation;
+    }
+    .nk-toolbar-inner {
+      display: flex; align-items: center; height: 44px; padding: 0 12px; gap: 8px;
+    }
+    .nk-toolbar-left, .nk-toolbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+    .nk-toolbar-center { flex: 1; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+    .nk-tb-hint { color: #64748b; }
+    .nk-tb-mode { color: #7c3aed; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .nk-tb-divider { width: 1px; height: 16px; background: #334155; }
+    .nk-tb-btn {
+      display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px;
+      background: transparent; border: 1px solid #334155; border-radius: 6px;
+      color: #e2e8f0; cursor: pointer; font-size: 11px; font-family: inherit;
+      transition: all 0.15s; -webkit-tap-highlight-color: transparent;
+      touch-action: manipulation;
+    }
+    .nk-tb-btn:hover { background: #334155; border-color: #475569; }
+    .nk-tb-btn:active { background: #475569; }
+    .nk-tb-btn.active { background: #7c3aed; border-color: #7c3aed; }
+    .nk-tb-project-ai-label { font-size: 11px; font-weight: 600; }
+    .nk-tb-page-ai {
+      display: flex; align-items: center; gap: 0;
+      background: #0f0d1a; border: 1px solid #334155; border-radius: 8px;
+      padding: 0 2px 0 8px; height: 30px; transition: border-color 0.15s;
+    }
+    .nk-tb-page-ai:focus-within { border-color: #7c3aed; }
+    .nk-tb-page-ai-icon { color: #7c3aed; font-size: 12px; flex-shrink: 0; margin-right: 4px; }
+    .nk-tb-page-ai-input {
+      background: transparent; border: none; color: #e2e8f0; font-size: 12px;
+      font-family: inherit; outline: none; width: 180px; padding: 0;
+    }
+    .nk-tb-page-ai-input::placeholder { color: #64748b; }
+    .nk-tb-page-ai-send {
+      background: #7c3aed; border: none; color: #fff; width: 24px; height: 24px;
+      border-radius: 6px; cursor: pointer; font-size: 10px; flex-shrink: 0;
+      display: flex; align-items: center; justify-content: center; transition: opacity 0.15s;
+    }
+    .nk-tb-page-ai-send:disabled { opacity: 0.3; cursor: default; }
+    .nk-tb-page-ai-send:not(:disabled):hover { background: #6d28d9; }
+    @media (max-width: 640px) {
+      .nk-tb-project-ai-label { display: none; }
+      .nk-tb-page-ai-input { width: 100px; }
+    }
+    .nk-tb-toggle {
+      display: inline-flex; align-items: center; padding: 2px; gap: 0;
+      background: #0f0d1a; border: 1px solid #334155; border-radius: 6px;
+      cursor: pointer; font-family: inherit;
+      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
+    }
+    .nk-tb-toggle span {
+      padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600;
+      color: #64748b; transition: all 0.15s; letter-spacing: 0.03em;
+    }
+    .nk-tb-toggle span.active { background: #7c3aed; color: #fff; }
+    .nk-tb-tag { color: #67e8f9; font-family: 'SF Mono', ui-monospace, monospace; }
+    .nk-tb-source { color: #86efac; font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; }
+    .nk-tb-attrs { color: #94a3b8; font-size: 11px; }
+
+    /* File panel — sidebar on desktop, full-width sheet on mobile */
+    #nk-file-panel {
+      position: fixed; top: 44px; left: 0; width: 320px; max-height: calc(100vh - 44px);
+      background: #1e1b2e; border-right: 1px solid #334155; border-bottom: 1px solid #334155;
+      z-index: 99999; display: none; flex-direction: column; font-family: system-ui, -apple-system, sans-serif;
+      box-shadow: 4px 0 16px rgba(0,0,0,0.3);
+      padding-bottom: env(safe-area-inset-bottom, 0); touch-action: manipulation;
+    }
+    #nk-file-panel.open { display: flex; }
+    .nk-fp-header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 10px 12px; border-bottom: 1px solid #334155; color: #e2e8f0; font-size: 13px; font-weight: 600;
+    }
+    .nk-fp-close-btn {
+      display: none; background: none; border: none; color: #94a3b8; cursor: pointer;
+      padding: 4px; -webkit-tap-highlight-color: transparent;
+    }
+    .nk-fp-list {
+      flex: 1; overflow-y: auto; padding: 4px 0;
+      -webkit-overflow-scrolling: touch;
+    }
+    .nk-fp-item {
+      display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
+      color: #94a3b8; font-size: 12px; font-family: 'SF Mono', ui-monospace, monospace;
+      transition: background 0.1s; -webkit-tap-highlight-color: transparent;
+      touch-action: manipulation;
+    }
+    .nk-fp-item:hover { background: #262338; color: #e2e8f0; }
+    .nk-fp-item:active { background: #334155; }
+    .nk-fp-item.active { background: #7c3aed22; color: #c084fc; }
+    .nk-fp-icon { width: 14px; text-align: center; flex-shrink: 0; }
+
+    /* Tabs in file panel header */
+    .nk-fp-tabs {
+      display: flex; gap: 2px; background: #0f0d1a; border-radius: 6px; padding: 2px;
+    }
+    .nk-fp-tab {
+      padding: 4px 12px; border: none; border-radius: 4px; font-size: 11px; font-weight: 600;
+      font-family: inherit; color: #64748b; background: transparent; cursor: pointer;
+      transition: all 0.15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
+    }
+    .nk-fp-tab:hover { color: #e2e8f0; }
+    .nk-fp-tab.active { background: #7c3aed; color: #fff; }
+
+    /* Pages view */
+    .nk-fp-pages {
+      flex: 1; overflow-y: auto; padding: 4px 0; -webkit-overflow-scrolling: touch;
+    }
+    .nk-fp-layout-group { margin-bottom: 4px; }
+    .nk-fp-layout-label {
+      padding: 8px 12px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 0.05em; color: #7c3aed; font-family: system-ui, sans-serif;
+    }
+    .nk-fp-route {
+      display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 24px; cursor: pointer;
+      color: #94a3b8; font-size: 12px; font-family: 'SF Mono', ui-monospace, monospace;
+      transition: background 0.1s; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
+    }
+    .nk-fp-route:hover { background: #262338; color: #e2e8f0; }
+    .nk-fp-route:active { background: #334155; }
+    .nk-fp-route.active { background: #7c3aed22; color: #c084fc; }
+
+    /* File editor — right of sidebar on desktop, full-width on mobile */
+    #nk-file-editor {
+      position: fixed; top: 44px; left: 320px; right: 0; max-height: calc(100vh - 44px);
+      background: #0f0d1a; border-bottom: 1px solid #334155; z-index: 99999;
+      display: none; flex-direction: column;
+      padding-bottom: env(safe-area-inset-bottom, 0);
+    }
+    #nk-file-editor.open { display: flex; }
+    .nk-fe-header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 8px 12px; border-bottom: 1px solid #334155; color: #e2e8f0; font-size: 12px;
+      gap: 8px; flex-wrap: wrap;
+    }
+    .nk-fe-header .nk-fe-path {
+      font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; color: #86efac;
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1;
+    }
+    .nk-fe-btns { display: flex; gap: 6px; flex-shrink: 0; }
+    .nk-fe-editor {
+      flex: 1; width: 100%; background: #0f0d1a; color: #e2e8f0; border: none; padding: 12px;
+      font-family: 'SF Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.6;
+      overflow: auto; outline: none; tab-size: 2; min-height: 250px;
+      -webkit-overflow-scrolling: touch;
+    }
+    .nk-hl-k { color: #ff7b72; }
+    .nk-hl-s { color: #a5d6ff; }
+    .nk-hl-c { color: #8b949e; font-style: italic; }
+    .nk-hl-n, .nk-hl-l { color: #79c0ff; }
+    .nk-fe-save {
+      padding: 6px 14px; background: #7c3aed; color: white; border: none; border-radius: 6px;
+      cursor: pointer; font-size: 12px; font-family: inherit; font-weight: 500;
+      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
+    }
+    .nk-fe-save:hover { background: #6d28d9; }
+    .nk-fe-save:active { background: #5b21b6; }
+    .nk-fe-cancel {
+      padding: 6px 14px; background: transparent; color: #94a3b8; border: 1px solid #334155;
+      border-radius: 6px; cursor: pointer; font-size: 12px; font-family: inherit;
+      -webkit-tap-highlight-color: transparent; touch-action: manipulation;
+    }
+    .nk-fe-cancel:hover { background: #334155; color: #e2e8f0; }
+
+    /* Mobile responsive (<640px) */
+    @media (max-width: 640px) {
+      .nk-tb-files-label { display: none; }
+      .nk-tb-source { display: none; }
+      .nk-tb-attrs { display: none; }
+      .nk-tb-hint { font-size: 11px; }
+
+      #nk-file-panel {
+        width: 100%; right: 0; border-right: none;
+        max-height: 50vh;
+      }
+      .nk-fp-close-btn { display: block; }
+      .nk-fp-item { padding: 10px 12px; font-size: 13px; }
+
+      #nk-file-editor {
+        left: 0; max-height: 60vh;
+      }
+      .nk-fe-editor { font-size: 14px; min-height: 200px; }
+    }
+
+    /* Push page content down so toolbar doesn't cover it */
+    body { padding-top: 44px !important; }
+  `;
+    document.head.appendChild(style);
+}

package/dist/email/index.d.ts

@@ -0,0 +1,32 @@
+import type { EmailConfig, EmailMessage, TemplateData, TemplateRenderer } from './types.js';
+export type { EmailConfig, EmailMessage, EmailProvider, EmailTemplates, TemplateData, TemplateRenderer } from './types.js';
+export { renderVerifyEmail } from './templates/verify-email.js';
+export { renderPasswordReset } from './templates/password-reset.js';
+export { renderWelcome } from './templates/welcome.js';
+export { renderTemplate, renderButton, escapeHtml } from './templates/base.js';
+export { compileTemplate } from './template-engine.js';
+/** Set the project directory for file-based template loading */
+export declare function setEmailProjectDir(dir: string): void;
+/**
+ * Get a template renderer. Resolution order:
+ * 1. HTML file in emails/ directory (compiled with {{variable}} engine)
+ * 2. Custom function in config.templates
+ * 3. Built-in template
+ */
+export declare function getTemplate(config: EmailConfig, name: string): TemplateRenderer | undefined;
+/**
+ * Render a named template with data. Returns HTML string or null if template not found.
+ */
+export declare function renderEmailTemplate(config: EmailConfig, name: string, data: TemplateData): string | null;
+/**
+ * Send an email using the configured provider.
+ */
+export declare function sendEmail(config: EmailConfig, message: EmailMessage): Promise<void>;
+/**
+ * Create a reusable email sender function.
+ */
+export declare function createEmailSender(config: EmailConfig): (message: EmailMessage) => Promise<void>;
+/**
+ * Load email config from lumenjs.email.ts.
+ */
+export declare function loadEmailConfig(projectDir: string, ssrLoadModule?: (id: string) => Promise<any>): Promise<EmailConfig | null>;