@lingxia/bridge 0.5.0 → 0.5.1

package/dist/es2020/ui/modal.js

@@ -0,0 +1,170 @@
+const ANIMATION_MS = 200;
+const STYLE_ID = 'lx-modal-style';
+let activeModal = null;
+function ensureModalStyle() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+.lx-modal-backdrop {
+  position: fixed; inset: 0; z-index: 99999;
+  background: rgba(0,0,0,0.4);
+  opacity: 0; transition: opacity ${ANIMATION_MS}ms ease;
+  display: flex; align-items: center; justify-content: center;
+}
+.lx-modal-backdrop.lx-modal-visible { opacity: 1; }
+
+.lx-modal-dialog {
+  width: min(92vw, 320px);
+  background: #fff;
+  border-radius: 14px;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  transform: scale(0.95); opacity: 0;
+  transition: transform ${ANIMATION_MS}ms ease, opacity ${ANIMATION_MS}ms ease;
+}
+.lx-modal-backdrop.lx-modal-visible .lx-modal-dialog {
+  transform: scale(1); opacity: 1;
+}
+
+.lx-modal-body {
+  padding: 24px 20px 16px;
+  text-align: center;
+}
+.lx-modal-title {
+  margin: 0 0 8px;
+  font-size: 17px;
+  font-weight: 600;
+  color: #000;
+  line-height: 1.35;
+}
+.lx-modal-content {
+  margin: 0;
+  font-size: 14px;
+  color: #666;
+  line-height: 1.5;
+  word-break: break-word;
+}
+.lx-modal-body:has(.lx-modal-title:empty) .lx-modal-content {
+  font-size: 17px;
+  font-weight: 600;
+  color: #000;
+}
+
+.lx-modal-footer {
+  display: flex;
+  border-top: 1px solid #E0E0E0;
+}
+.lx-modal-btn {
+  flex: 1;
+  height: 44px;
+  line-height: 44px;
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: 17px;
+  text-align: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.lx-modal-btn:active { background: rgba(0,0,0,0.06); }
+.lx-modal-btn + .lx-modal-btn {
+  border-left: 1px solid #E0E0E0;
+}
+.lx-modal-btn-cancel {
+  color: #666;
+  font-weight: 400;
+}
+.lx-modal-btn-confirm {
+  font-weight: 600;
+}
+
+@media (prefers-color-scheme: dark) {
+  .lx-modal-dialog { background: #2c2c2e; }
+  .lx-modal-title { color: #f5f5f7; }
+  .lx-modal-content { color: #ababab; }
+  .lx-modal-body:has(.lx-modal-title:empty) .lx-modal-content {
+    color: #f5f5f7;
+  }
+  .lx-modal-footer { border-top-color: #3a3a3c; }
+  .lx-modal-btn:active { background: rgba(255,255,255,0.08); }
+  .lx-modal-btn + .lx-modal-btn { border-left-color: #3a3a3c; }
+  .lx-modal-btn-cancel { color: #ababab; }
+}
+`;
+    document.head.appendChild(style);
+}
+export function showModal(params) {
+    const p = params;
+    const title = p?.title ?? '';
+    const content = p?.content ?? '';
+    const showCancel = p?.showCancel ?? true;
+    const cancelText = p?.cancelText ?? 'Cancel';
+    const cancelColor = p?.cancelColor;
+    const confirmText = p?.confirmText ?? 'OK';
+    const confirmColor = p?.confirmColor ?? '#007AFF';
+    const task = (activeModal ?? Promise.resolve()).then(() => renderModal(title, content, showCancel, cancelText, cancelColor, confirmText, confirmColor), () => renderModal(title, content, showCancel, cancelText, cancelColor, confirmText, confirmColor));
+    activeModal = task;
+    return task;
+}
+function renderModal(title, content, showCancel, cancelText, cancelColor, confirmText, confirmColor) {
+    return new Promise((resolve) => {
+        let dismissed = false;
+        ensureModalStyle();
+        const backdrop = document.createElement('div');
+        backdrop.className = 'lx-modal-backdrop';
+        const dialog = document.createElement('div');
+        dialog.className = 'lx-modal-dialog';
+        // Body
+        const body = document.createElement('div');
+        body.className = 'lx-modal-body';
+        const titleEl = document.createElement('div');
+        titleEl.className = 'lx-modal-title';
+        titleEl.textContent = title;
+        body.appendChild(titleEl);
+        if (content) {
+            const contentEl = document.createElement('p');
+            contentEl.className = 'lx-modal-content';
+            contentEl.textContent = content;
+            body.appendChild(contentEl);
+        }
+        dialog.appendChild(body);
+        // Footer
+        const footer = document.createElement('div');
+        footer.className = 'lx-modal-footer';
+        if (showCancel) {
+            const cancelBtn = document.createElement('button');
+            cancelBtn.className = 'lx-modal-btn lx-modal-btn-cancel';
+            cancelBtn.textContent = cancelText;
+            if (cancelColor)
+                cancelBtn.style.color = cancelColor;
+            cancelBtn.addEventListener('click', () => dismiss(false));
+            footer.appendChild(cancelBtn);
+        }
+        const confirmBtn = document.createElement('button');
+        confirmBtn.className = 'lx-modal-btn lx-modal-btn-confirm';
+        confirmBtn.textContent = confirmText;
+        confirmBtn.style.color = confirmColor;
+        confirmBtn.addEventListener('click', () => dismiss(true));
+        footer.appendChild(confirmBtn);
+        dialog.appendChild(footer);
+        backdrop.appendChild(dialog);
+        document.body.appendChild(backdrop);
+        // Trigger enter animation
+        requestAnimationFrame(() => {
+            backdrop.classList.add('lx-modal-visible');
+        });
+        function dismiss(confirmed) {
+            if (dismissed)
+                return;
+            dismissed = true;
+            backdrop.classList.remove('lx-modal-visible');
+            setTimeout(() => {
+                backdrop.remove();
+                resolve({ confirm: confirmed, cancel: !confirmed });
+            }, ANIMATION_MS);
+        }
+    });
+}

package/dist/es2020/ui/toast.js

@@ -0,0 +1,145 @@
+const ANIMATION_MS = 200;
+const STYLE_ID = 'lx-toast-style';
+let currentToast = null;
+const SVG_SUCCESS = `<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18" cy="18" r="17" stroke="currentColor" stroke-width="2"/><path d="M11 18l5 5 9-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+const SVG_ERROR = `<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="18" cy="18" r="17" stroke="currentColor" stroke-width="2"/><path d="M13 13l10 10M23 13l-10 10" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>`;
+const SVG_LOADING = `<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 4a14 14 0 0 1 14 14" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.8s" repeatCount="indefinite"/></path></svg>`;
+function ensureToastStyle() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+.lx-toast-mask {
+  position: fixed; inset: 0; z-index: 99998;
+}
+.lx-toast-container {
+  position: fixed; left: 0; right: 0; z-index: 99999;
+  display: flex; justify-content: center;
+  pointer-events: none;
+}
+.lx-toast-container.lx-toast-top { top: 0; padding-top: 80px; }
+.lx-toast-container.lx-toast-center { top: 0; bottom: 0; align-items: center; }
+.lx-toast-container.lx-toast-bottom { bottom: 0; padding-bottom: 80px; }
+
+.lx-toast-box {
+  display: flex; flex-direction: column; align-items: center; gap: 10px;
+  min-width: 120px; max-width: 280px;
+  padding: 20px;
+  background: rgba(0,0,0,0.8);
+  border-radius: 12px;
+  color: #fff;
+  pointer-events: auto;
+  transform: scale(0.8); opacity: 0;
+  transition: transform ${ANIMATION_MS}ms ease, opacity ${ANIMATION_MS}ms ease;
+}
+.lx-toast-box.lx-toast-no-icon {
+  min-width: auto; min-height: auto;
+  padding: 12px 20px;
+}
+.lx-toast-box.lx-toast-visible {
+  transform: scale(1); opacity: 1;
+}
+.lx-toast-icon {
+  width: 36px; height: 36px;
+  color: #fff;
+  line-height: 0;
+}
+.lx-toast-title {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
+  font-size: 16px; font-weight: 500;
+  text-align: center;
+  line-height: 1.4;
+  word-break: break-word;
+  -webkit-font-smoothing: antialiased;
+}
+`;
+    document.head.appendChild(style);
+}
+export function showToast(params) {
+    const p = params;
+    const title = p?.title ?? '';
+    const icon = p?.icon ?? 'none';
+    const duration = p?.duration ?? 1500;
+    const mask = p?.mask ?? false;
+    const position = p?.position ?? 'center';
+    // Hide existing toast first
+    if (currentToast) {
+        currentToast.dismiss();
+        currentToast = null;
+    }
+    ensureToastStyle();
+    // Mask (prevents interaction)
+    let maskEl = null;
+    if (mask) {
+        maskEl = document.createElement('div');
+        maskEl.className = 'lx-toast-mask';
+        document.body.appendChild(maskEl);
+    }
+    // Container
+    const container = document.createElement('div');
+    container.className = 'lx-toast-container';
+    if (position === 'top')
+        container.classList.add('lx-toast-top');
+    else if (position === 'bottom')
+        container.classList.add('lx-toast-bottom');
+    else
+        container.classList.add('lx-toast-center');
+    // Toast box
+    const box = document.createElement('div');
+    box.className = 'lx-toast-box';
+    const hasIcon = icon !== 'none';
+    if (!hasIcon)
+        box.classList.add('lx-toast-no-icon');
+    // Icon
+    if (hasIcon) {
+        const iconEl = document.createElement('div');
+        iconEl.className = 'lx-toast-icon';
+        if (icon === 'success')
+            iconEl.innerHTML = SVG_SUCCESS;
+        else if (icon === 'error')
+            iconEl.innerHTML = SVG_ERROR;
+        else if (icon === 'loading')
+            iconEl.innerHTML = SVG_LOADING;
+        box.appendChild(iconEl);
+    }
+    // Title
+    const titleEl = document.createElement('div');
+    titleEl.className = 'lx-toast-title';
+    titleEl.textContent = title;
+    box.appendChild(titleEl);
+    container.appendChild(box);
+    document.body.appendChild(container);
+    // Animate in
+    requestAnimationFrame(() => {
+        box.classList.add('lx-toast-visible');
+    });
+    let dismissed = false;
+    function dismiss() {
+        if (dismissed)
+            return;
+        dismissed = true;
+        if (currentToast?.dismiss === dismiss)
+            currentToast = null;
+        box.classList.remove('lx-toast-visible');
+        if (timer)
+            clearTimeout(timer);
+        setTimeout(() => {
+            container.remove();
+            maskEl?.remove();
+        }, ANIMATION_MS);
+    }
+    let timer = null;
+    if (duration > 0) {
+        timer = setTimeout(dismiss, duration);
+    }
+    currentToast = { dismiss, timer };
+    return Promise.resolve();
+}
+export function hideToast() {
+    if (currentToast) {
+        currentToast.dismiss();
+        currentToast = null;
+    }
+    return Promise.resolve();
+}

package/dist/es5/boot.js

@@ -0,0 +1,34 @@
+import { initBridge } from './bridge';
+import { hasError, getErrorInfo, renderErrorUI } from './error';
+var domReadyListener = {
+    handleEvent: function () { return maybeRenderErrorUI(); },
+};
+function maybeRenderErrorUI() {
+    if (hasError()) {
+        var errorInfo = getErrorInfo();
+        if (errorInfo) {
+            renderErrorUI(errorInfo);
+        }
+    }
+}
+/**
+ * Immediately initialize bridge and render error UI if present.
+ * Use this when DOM is already ready.
+ */
+export function boot() {
+    initBridge();
+    maybeRenderErrorUI();
+}
+/**
+ * Initialize bridge immediately, but wait for DOM to render error UI.
+ * Use this at page load time.
+ */
+export function bootWhenReady() {
+    initBridge();
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', domReadyListener);
+    }
+    else {
+        maybeRenderErrorUI();
+    }
+}