qumra-engine 2.0.90 → 2.0.92

package/dist/extensions/logic/content.js

@@ -45,7 +45,7 @@ exports.default = new (class WidgetExtension {
                     context: ctx.context,
                     globals: ctx.globals,
                     widget: {
-                        id: widget.id,
+                        id: widget._id,
                         type: widget.widget,
                         data: widget.data,
                         blocks: widget.blocks ?? [],
@@ -57,7 +57,7 @@ exports.default = new (class WidgetExtension {
                 }
                 if (isIframe) {
                     renderedWidgets.push(`
-            <section widget-id="${widget.id}" id="qumra-widget-id-${widget.id}">
+            <section content-type="widget" widget-id="${widget._id}" id="qumra-widget-id-${widget._id}">
               ${html}
             </section>
           `);

package/dist/extensions/logic/qumra-scripts.d.ts

@@ -2,6 +2,6 @@ import { runtime } from "nunjucks";
 declare const _default: {
     tags: string[];
     parse(parser: any, nodes: any): any;
-    run({ env, ctx }: any): runtime.SafeString;
+    run({ env }: any): runtime.SafeString;
 };
 export default _default;

package/dist/extensions/logic/qumra-scripts.js

@@ -11,42 +11,366 @@ exports.default = new (class SeoExtension {
         parser.advanceAfterBlockEnd(tok.value);
         return new nodes.CallExtension(this, "run", null);
     }
-    run({ env, ctx }) {
+    run({ env }) {
         const injectionCode = (0, globals_1.getGlobal)("injectionCode");
-        let isIframe = false;
-        if (env.getGlobal("isIframe")) {
-            isIframe = env.getGlobal("isIframe");
-        }
+        const isIframe = !!env.getGlobal("isIframe");
         let scripts = `
       ${injectionCode.body}
     `;
         if (isIframe) {
             scripts += `
+              <style>
+
+            /* مربع التحديد الاحترافي */
+            #selector-outline {
+                position: absolute;
+                border: 2px solid #2563eb;
+                background: transparent;
+                pointer-events: none;
+                display: none;
+                z-index: 9999;
+                border-radius: 6px;
+                box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2), 0 4px 24px rgba(37, 99, 235, 0.15);
+                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            }
+
+            /* شريط الأدوات العلوي */
+            #selector-toolbar {
+                position: absolute;
+                top: -45px;
+                left: 50%;
+                transform: translateX(-50%);
+                background: rgba(255, 255, 255, 0.95);
+                backdrop-filter: blur(20px);
+                border-radius: 12px;
+                padding: 8px 12px;
+                display: flex;
+                gap: 8px;
+                box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+                border: 1px solid rgba(37, 99, 235, 0.2);
+                pointer-events: all;
+                opacity: 0;
+                animation: toolbarSlideIn 0.3s ease-out forwards;
+            }
+
+            @keyframes toolbarSlideIn {
+                from {
+                    opacity: 0;
+                    transform: translateX(-50%) translateY(-10px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateX(-50%) translateY(0);
+                }
+            }
+
+            .control-btn {
+                width: 32px;
+                height: 32px;
+                border-radius: 8px;
+                border: none;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+                transition: all 0.2s ease;
+                position: relative;
+                overflow: hidden;
+            }
+
+            .control-btn::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: -100%;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+                transition: left 0.5s;
+            }
+
+            .control-btn:hover::before {
+                left: 100%;
+            }
+
+            .btn-edit {
+                background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+                color: white;
+            }
+
+            .btn-edit:hover {
+                transform: scale(1.1);
+                box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
+            }
+
+            .btn-delete {
+                background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+                color: white;
+            }
+
+            .btn-delete:hover {
+                transform: scale(1.1);
+                box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
+            }
+
+            .btn-copy {
+                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+                color: white;
+            }
+
+            .btn-copy:hover {
+                transform: scale(1.1);
+                box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
+            }
+
+            .btn-settings {
+                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+                color: white;
+            }
+
+            .btn-settings:hover {
+                transform: scale(1.1);
+                box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
+            }
+
+            /* تأثير النبض اللطيف */
+            #selector-outline::before {
+                content: '';
+                position: absolute;
+                top: -2px;
+                left: -2px;
+                right: -2px;
+                bottom: -2px;
+                background: linear-gradient(45deg, #2563eb, #3b82f6, #60a5fa, #2563eb);
+                background-size: 400% 400%;
+                border-radius: 8px;
+                z-index: -1;
+                animation: gradientShift 3s ease infinite;
+                opacity: 0.6;
+            }
+
+            @keyframes gradientShift {
+                0% {
+                    background-position: 0 50%;
+                }
+                50% {
+                    background-position: 100% 50%;
+                }
+                100% {
+                    background-position: 0 50%;
+                }
+            }
+
+            /* مؤشرات الزوايا */
+            .corner-dot {
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                background: #2563eb;
+                border: 2px solid rgba(255, 255, 255, 0.9);
+                border-radius: 50%;
+                box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
+                transition: all 0.2s ease;
+            }
+
+            .corner-dot.top-left {
+                top: -4px;
+                left: -4px;
+                animation: cornerPulse 2s ease-in-out infinite;
+            }
+            .corner-dot.top-right {
+                top: -4px;
+                right: -4px;
+                animation: cornerPulse 2s ease-in-out infinite 0.5s;
+            }
+            .corner-dot.bottom-left {
+                bottom: -4px;
+                left: -4px;
+                animation: cornerPulse 2s ease-in-out infinite 1s;
+            }
+            .corner-dot.bottom-right {
+                bottom: -4px;
+                right: -4px;
+                animation: cornerPulse 2s ease-in-out infinite 1.5s;
+            }
+
+            @keyframes cornerPulse {
+                0%,
+                100% {
+                    transform: scale(1);
+                    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
+                }
+                50% {
+                    transform: scale(1.2);
+                    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.5);
+                }
+            }
+
+            /* خطوط الحواف */
+            .edge-line {
+                position: absolute;
+                background: rgba(37, 99, 235, 0.4);
+                pointer-events: none;
+            }
+
+            .edge-line.top {
+                top: -1px;
+                left: 20px;
+                right: 20px;
+                height: 2px;
+                background: linear-gradient(90deg, transparent, #2563eb, transparent);
+            }
+
+            .edge-line.bottom {
+                bottom: -1px;
+                left: 20px;
+                right: 20px;
+                height: 2px;
+                background: linear-gradient(90deg, transparent, #2563eb, transparent);
+            }
+
+            .edge-line.left {
+                left: -1px;
+                top: 20px;
+                bottom: 20px;
+                width: 2px;
+                background: linear-gradient(180deg, transparent, #2563eb, transparent);
+            }
+
+            .edge-line.right {
+                right: -1px;
+                top: 20px;
+                bottom: 20px;
+                width: 2px;
+                background: linear-gradient(180deg, transparent, #2563eb, transparent);
+            }
+
+            /* تأثير التوهج الداخلي */
+            #selector-outline::after {
+                content: '';
+                position: absolute;
+                top: 2px;
+                left: 2px;
+                right: 2px;
+                bottom: 2px;
+                background: rgba(255, 255, 255, 0.05);
+                border-radius: 4px;
+                pointer-events: none;
+            }
+        </style>
+        <div id="selector-outline">
+          <div id="selector-toolbar">
+            <button class="control-btn btn-edit" title="تحرير" id="btn-edit">✏️</button>
+            <button class="control-btn btn-copy" title="نسخ" id="btn-copy">📋</button>
+            <button class="control-btn btn-settings" title="إعدادات" id="btn-settings">⚙️</button>
+            <button class="control-btn btn-delete" title="حذف" id="btn-delete">🗑️</button>
+          </div>
+          <div class="corner-dot top-left"></div>
+          <div class="corner-dot top-right"></div>
+          <div class="corner-dot bottom-left"></div>
+          <div class="corner-dot bottom-right"></div>
+          <div class="edge-line top"></div>
+          <div class="edge-line bottom"></div>
+          <div class="edge-line left"></div>
+          <div class="edge-line right"></div>
+        </div>
+
         <script>
-          function attachIframeLinkListeners(root = document) {
-            const links = root.querySelectorAll("a");
-            links.forEach(link => {
-              if (link.dataset._iframeHandled) return;
-              link.dataset._iframeHandled = "true";
-              
-              link.addEventListener("click", function (e) {
-                const href = link.getAttribute("href");
-                if (!href || href === "#") return;
-
-                e.preventDefault();
-                e.stopPropagation();
+          document.addEventListener("DOMContentLoaded", () => {
+            const outline = document.getElementById('selector-outline');
+            const btnEdit = document.getElementById('btn-edit');
+            const btnDelete = document.getElementById('btn-delete');
+            const btnCopy = document.getElementById('btn-copy');
+            const btnSettings = document.getElementById('btn-settings');
+            let selectedElement = null;
+            let hoverTimeout = null;
+
+            const widgets = document.querySelectorAll('[widget-id]');
 
-                window.parent.postMessage(
-                  { type: "iframeLinkClick", href },
-                  "*"
-                );
+            function showSelector(element) {
+              selectedElement = element;
+              const rect = element.getBoundingClientRect();
+              outline.style.display = 'block';
+              outline.style.top = \`\${rect.top + window.scrollY - 4}px\`;
+              outline.style.left = \`\${rect.left + window.scrollX - 4}px\`;
+              outline.style.width = \`\${rect.width + 8}px\`;
+              outline.style.height = \`\${rect.height + 8}px\`;
+            }
+
+            function hideSelector() {
+              outline.style.display = 'none';
+              selectedElement = null;
+            }
+
+            widgets.forEach(el => {
+              el.addEventListener('mouseenter', () => {
+                clearTimeout(hoverTimeout);
+                showSelector(el);
+              });
+
+              el.addEventListener('mouseleave', () => {
+                hoverTimeout = setTimeout(() => {
+                  const hovered = document.querySelector(':hover');
+                  if (!outline.contains(hovered) && hovered !== el) hideSelector();
+                }, 50);
               });
             });
-          }
 
-          document.addEventListener("DOMContentLoaded", function () {
-            attachIframeLinkListeners();
+            outline.addEventListener('mouseenter', () => clearTimeout(hoverTimeout));
+            outline.addEventListener('mouseleave', () => {
+              hoverTimeout = setTimeout(hideSelector, 50);
+            });
 
+            // أزرار التحكم
+            const btnActions = {
+              'btn-edit': el => alert(\`تحرير العنصر: \${el.getAttribute('widget-id')}\`),
+              'btn-copy': el => alert(\`نسخ العنصر: \${el.getAttribute('widget-id')}\`),
+              'btn-settings': el => alert(\`إعدادات العنصر: \${el.getAttribute('widget-id')}\`),
+              'btn-delete': el => {
+                if (confirm('هل أنت متأكد من حذف هذا العنصر؟')) {
+                  el.remove();
+                  hideSelector();
+                }
+              }
+            };
+
+            Object.entries(btnActions).forEach(([id, fn]) => {
+              const btn = document.getElementById(id);
+              btn?.addEventListener('click', e => {
+                e.stopPropagation();
+                if (selectedElement) fn(selectedElement);
+              });
+            });
+
+            // تحديث موقع outline عند scroll
+            window.addEventListener('scroll', () => {
+              if (!selectedElement || outline.style.display === 'none') return;
+              const rect = selectedElement.getBoundingClientRect();
+              outline.style.top = \`\${rect.top + window.scrollY - 4}px\`;
+              outline.style.left = \`\${rect.left + window.scrollX - 4}px\`;
+              outline.style.width = \`\${rect.width + 8}px\`;
+              outline.style.height = \`\${rect.height + 8}px\`;
+            });
+
+            // التعامل مع روابط iframe
+            function attachIframeLinkListeners(root = document) {
+              const links = root.querySelectorAll("a");
+              links.forEach(link => {
+                if (link.dataset._iframeHandled) return;
+                link.dataset._iframeHandled = "true";
+
+                link.addEventListener("click", function (e) {
+                  const href = link.getAttribute("href");
+                  if (!href || href === "#") return;
+                  e.preventDefault();
+                  e.stopPropagation();
+                  window.parent.postMessage({ type: "iframeLinkClick", href }, "*");
+                });
+              });
+            }
+
+            attachIframeLinkListeners();
             const observer = new MutationObserver(() => attachIframeLinkListeners());
             observer.observe(document.body, { childList: true, subtree: true });
           });

package/dist/extensions/logic/template.js

@@ -45,7 +45,7 @@ exports.default = new (class WidgetExtension {
                     context: ctx.context,
                     globals: ctx.globals,
                     widget: {
-                        id: widget.id,
+                        id: widget._id,
                         type: widget.widget,
                         data: widget.data,
                         blocks: widget.blocks ?? [],
@@ -57,7 +57,7 @@ exports.default = new (class WidgetExtension {
                 }
                 if (isIframe) {
                     renderedWidgets.push(`
-            <section widget-id="${widget.id}" id="qumra-widget-id-${widget.id}">
+            <section widget-id="${widget._id}" id="qumra-widget-id-${widget._id}">
               ${html}
             </section>
           `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qumra-engine",
-  "version": "2.0.90",
+  "version": "2.0.92",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {