@vcgstudiosy-beep/dlof 1.0.0 → 1.0.2

package/dist/player/renderPlayerHtml.js

@@ -4,6 +4,7 @@ exports.renderPlayerHtml = renderPlayerHtml;
 const theme_1 = require("../viewer/theme");
 const renderContent_1 = require("../viewer/renderContent");
 const loopUtils_1 = require("../loop/loopUtils");
+const brand_1 = require("../viewer/brand");
 const DEFAULT_MAX_INLINE = 20 * 1024 * 1024;
 const MIME_BY_EXT = {
     mp4: "video/mp4",
@@ -28,10 +29,12 @@ function isAudio(mime) {
     return mime.startsWith("audio/");
 }
 /**
- * مشغّل dlof: يبني تطبيق HTML/JS تفاعلي واحد لسلسلة أو حلقة كاملة من ملفات .dlof.
- * يوفر: قائمة تصفح جانبية، أزرار التالي/السابق (تتبع loopLinks)، تشغيل الوسائط
- * المرجعية (mediaRef / mediaFolder) مع شريط تقدّم قابل للسحب، وحفظ آخر موضع
- * تصفح في التخزين المحلي للمتصفح بين الجلسات.
+ * مشغّل dlof: يبني تطبيق HTML/JS تفاعلي واحد لسلسلة أو حلقة كاملة من ملفات .dlof،
+ * بنفس الهوية البصرية لتطبيق DLoF الأصلي. يوفر: قائمة "الملفات" الجانبية (مطابقة
+ * لشاشة "ملفاتي" في التطبيق: بطاقات بأيقونة/لون حسب نوع المحتوى، شارة المجال،
+ * وبحث فوري)، أزرار التالي/السابق (تتبع loopLinks)، تشغيل الوسائط المرجعية
+ * (mediaRef / mediaFolder) مع شريط تقدّم قابل للسحب، وحفظ آخر موضع تصفح في
+ * التخزين المحلي للمتصفح بين الجلسات.
  */
 function renderPlayerHtml(series, options = {}) {
     const chain = (0, loopUtils_1.resolveLoopChain)(series.documents, series.rootFileName);
@@ -62,22 +65,29 @@ function renderPlayerHtml(series, options = {}) {
                 mediaHtml = `<p class="tag">📁 مرجع وسائط خارجي: ${(0, theme_1.escapeHtml)(normalized)}</p>`;
             }
         }
+        const kindInfo = brand_1.CONTENT_KIND_INFO[document.content.kind] ?? brand_1.CONTENT_KIND_INFO.genericItem;
+        const navLabel = document.content.kind === "episodeItem" ? document.content.episodeTitle : document.metadata.title;
         return {
             fileName,
             title: document.metadata.title,
-            navLabel: document.content.kind === "episodeItem"
-                ? document.content.episodeTitle
-                : document.metadata.title,
+            navLabel: navLabel || document.metadata.title || fileName,
+            domain: (0, brand_1.domainLabel)(document.metadata.domain),
+            kindIcon: kindInfo.icon,
+            kindColor: kindInfo.color,
             duration: document.content.kind === "episodeItem" ? document.content.duration ?? 0 : 0,
             cardHtml: (0, renderContent_1.renderDocumentCard)(document, theme.layout),
             mediaHtml,
             hasMedia: !!mediaHtml && mediaHtml.includes('data-role="media"'),
         };
     });
+    // ── قائمة "الملفات" الجانبية — بطاقات مطابقة لشاشة ملفاتي في التطبيق الأصلي ──
     const navListHtml = items
-        .map((it, idx) => `<li data-index="${idx}" class="nav-item${idx === 0 ? " active" : ""}">
-        <span class="nav-num">${idx + 1}</span>
-        <span class="nav-title">${(0, theme_1.escapeHtml)(it.navLabel || it.title || it.fileName)}</span>
+        .map((it, idx) => `<li data-index="${idx}" data-search="${(0, theme_1.escapeHtml)((it.navLabel + " " + it.domain).toLowerCase())}" class="file-card nav-item${idx === 0 ? " active" : ""}" role="button" tabindex="0">
+        <div class="file-icon" style="background:${it.kindColor}22;color:${it.kindColor}">${it.kindIcon}</div>
+        <div class="file-info">
+          <div class="file-name">${(0, theme_1.escapeHtml)(it.navLabel)}</div>
+          <div class="file-meta"><span>${idx + 1} / ${items.length}</span><span>${(0, theme_1.escapeHtml)(it.domain)}</span></div>
+        </div>
       </li>`)
         .join("");
     const panelsHtml = items
@@ -93,32 +103,59 @@ function renderPlayerHtml(series, options = {}) {
       </section>`)
         .join("");
     const playerCss = `
-    .layout { display: flex; gap: 24px; align-items: flex-start; }
+    .layout { display: flex; gap: 22px; align-items: flex-start; }
     .sidebar {
-      width: 220px; flex-shrink: 0; max-height: 80vh; overflow-y: auto;
-      border-inline-start: 1px solid rgba(0,0,0,.08); padding-inline-start: 12px;
-    }
-    .nav-item {
-      display: flex; align-items: center; gap: 8px; padding: 8px 6px;
-      border-radius: 10px; cursor: pointer; font-size: .9rem; list-style: none;
-    }
-    .nav-item:hover { background: rgba(0,0,0,.05); }
-    .nav-item.active { background: var(--primary); color: #fff; }
-    .nav-num {
-      display: inline-flex; align-items: center; justify-content: center;
-      width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.08);
-      font-size: .75rem; flex-shrink: 0;
-    }
-    .nav-item.active .nav-num { background: rgba(255,255,255,.3); }
-    ul#navList { padding: 0; margin: 0; }
+      width: 260px; flex-shrink: 0; max-height: 80vh; overflow-y: auto;
+      border-inline-start: 1px solid var(--border); padding-inline-start: 14px;
+    }
+    .files-search {
+      width: 100%; padding: 9px 12px; margin-bottom: 10px;
+      border-radius: 10px; border: 1px solid var(--border);
+      background: var(--surface); color: var(--text); font-family: var(--font); font-size: .85rem;
+    }
+    .nav-item { cursor: pointer; margin-bottom: 8px; }
+    .nav-item:hover { border-color: var(--primary); }
+    .nav-item.active { background: var(--primary); border-color: var(--primary); }
+    .nav-item.active .file-name, .nav-item.active .file-meta { color: #fff; }
+    .nav-item.active .file-icon { background: rgba(255,255,255,.25) !important; color: #fff !important; }
+    .nav-item[hidden] { display: none !important; }
+    ul#navList { padding: 0; margin: 0; list-style: none; }
     .main { flex: 1; min-width: 0; }
     .player-media { width: 100%; border-radius: 14px; background: #000; margin-bottom: 4px; }
     .progress-wrap { margin-bottom: 16px; }
     .seek { width: 100%; accent-color: var(--primary); }
-    .time-row { display: flex; justify-content: space-between; font-size: .75rem; opacity: .7; }
+    .time-row { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
+
+    /* ── شريط تقدّم الحلقات — يعرض الموضع الحالي ضمن كامل الحلقة ويُسحب للانتقال مباشرة ── */
+    .loop-progress { margin: 2px 0 22px; user-select: none; }
+    .loop-progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
+    .loop-progress-label { font-size: .78rem; color: var(--muted); font-weight: 600; transition: color .15s; }
+    .loop-progress-label.dragging { color: var(--secondary); }
+    .loop-progress-count {
+      font-size: .8rem; font-weight: 800; color: var(--secondary);
+      background: color-mix(in srgb, var(--secondary) 16%, transparent);
+      border-radius: 20px; padding: 2px 11px;
+    }
+    .loop-progress-track {
+      position: relative; height: 10px; border-radius: 999px;
+      background: var(--surface-variant); cursor: pointer; touch-action: none;
+    }
+    .loop-progress-fill {
+      position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0%;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--primary), var(--secondary));
+    }
+    .loop-progress-thumb {
+      position: absolute; top: 50%; inset-inline-start: 0%;
+      width: 18px; height: 18px; border-radius: 50%;
+      background: #fff; border: 3px solid var(--primary);
+      box-shadow: 0 1px 5px rgba(0,0,0,.35);
+      transform: translate(-50%, -50%); transition: transform .15s;
+    }
+    .loop-progress-thumb.dragging { transform: translate(-50%, -50%) scale(1.35); border-color: var(--secondary); }
     @media (max-width: 720px) {
       .layout { flex-direction: column; }
-      .sidebar { width: 100%; max-height: 220px; border-inline-start: none; border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 8px; }
+      .sidebar { width: 100%; max-height: 260px; border-inline-start: none; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
     }
   `;
     const script = `
@@ -129,6 +166,13 @@ function renderPlayerHtml(series, options = {}) {
     const panels = document.querySelectorAll(".panel");
     const prevBtn = document.getElementById("prevBtn");
     const nextBtn = document.getElementById("nextBtn");
+    const searchInput = document.getElementById("filesSearch");
+    const progressTrack = document.getElementById("loopProgressTrack");
+    const progressFill = document.getElementById("loopProgressFill");
+    const progressThumb = document.getElementById("loopProgressThumb");
+    const progressLabel = document.querySelector('[data-role="progress-label"]');
+    const progressCount = document.querySelector('[data-role="progress-count"]');
+    let progressDragging = false;
 
     function fmt(t) {
       if (!isFinite(t)) return "0:00";
@@ -136,6 +180,29 @@ function renderPlayerHtml(series, options = {}) {
       return m + ":" + String(s).padStart(2, "0");
     }
 
+    function setProgressVisual(frac) {
+      if (!progressTrack) return;
+      const pct = Math.round(frac * 1000) / 10 + "%";
+      progressFill.style.width = pct;
+      progressThumb.style.insetInlineStart = pct;
+    }
+
+    function syncProgressBar(index) {
+      if (!progressTrack) return;
+      const frac = total > 1 ? index / (total - 1) : 0;
+      setProgressVisual(frac);
+      progressCount.textContent = (index + 1) + "/" + total;
+    }
+
+    function fracFromClientX(clientX) {
+      const rect = progressTrack.getBoundingClientRect();
+      // اتجاه الصفحة RTL: بداية الحلقة (الحلقة 1) تقع أقصى اليمين
+      return Math.min(1, Math.max(0, (rect.right - clientX) / rect.width));
+    }
+    function indexFromFrac(frac) {
+      return Math.round(frac * (total - 1));
+    }
+
     function setupMedia(panel) {
       const media = panel.querySelector('[data-role="media"]');
       const seek = panel.querySelector('[data-role="seek"]');
@@ -177,6 +244,7 @@ function renderPlayerHtml(series, options = {}) {
       });
       prevBtn.disabled = index === 0;
       nextBtn.disabled = index === total - 1;
+      syncProgressBar(index);
       try {
         const data = JSON.parse(localStorage.getItem(STATE_KEY) || "{}");
         data.lastIndex = index;
@@ -188,6 +256,9 @@ function renderPlayerHtml(series, options = {}) {
     }
 
     navItems.forEach((el) => el.addEventListener("click", () => goTo(Number(el.dataset.index))));
+    navItems.forEach((el) => el.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") { e.preventDefault(); goTo(Number(el.dataset.index)); }
+    }));
     prevBtn.addEventListener("click", () => goTo(current - 1));
     nextBtn.addEventListener("click", () => goTo(current + 1));
     document.addEventListener("keydown", (e) => {
@@ -195,15 +266,78 @@ function renderPlayerHtml(series, options = {}) {
       if (e.key === "ArrowLeft") goTo(current + 1);  // RTL: يسار = التالي
     });
 
+    if (searchInput) {
+      searchInput.addEventListener("input", () => {
+        const q = searchInput.value.trim().toLowerCase();
+        navItems.forEach((el) => {
+          const matches = !q || (el.dataset.search || "").includes(q);
+          el.hidden = !matches;
+        });
+      });
+    }
+
+    if (progressTrack) {
+      const startDrag = (e) => {
+        progressDragging = true;
+        progressTrack.setPointerCapture(e.pointerId);
+        progressLabel.classList.add("dragging");
+        progressThumb.classList.add("dragging");
+        progressLabel.textContent = "اسحب للانتقال إلى حلقة أخرى";
+        const frac = fracFromClientX(e.clientX);
+        setProgressVisual(frac);
+        progressCount.textContent = (indexFromFrac(frac) + 1) + "/" + total;
+      };
+      const moveDrag = (e) => {
+        if (!progressDragging) return;
+        const frac = fracFromClientX(e.clientX);
+        setProgressVisual(frac);
+        progressCount.textContent = (indexFromFrac(frac) + 1) + "/" + total;
+      };
+      const endDrag = (e) => {
+        if (!progressDragging) return;
+        progressDragging = false;
+        progressLabel.classList.remove("dragging");
+        progressThumb.classList.remove("dragging");
+        progressLabel.textContent = "تقدّم الحلقات";
+        goTo(indexFromFrac(fracFromClientX(e.clientX)));
+      };
+      progressTrack.addEventListener("pointerdown", startDrag);
+      progressTrack.addEventListener("pointermove", moveDrag);
+      progressTrack.addEventListener("pointerup", endDrag);
+      progressTrack.addEventListener("pointercancel", endDrag);
+    }
+
     // استئناف آخر موضع تصفح محفوظ
     try {
       const data = JSON.parse(localStorage.getItem(STATE_KEY) || "{}");
       if (typeof data.lastIndex === "number") goTo(data.lastIndex);
-      else setupMedia(panels[0]);
-    } catch (e) { setupMedia(panels[0]); }
+      else { setupMedia(panels[0]); syncProgressBar(0); }
+    } catch (e) { setupMedia(panels[0]); syncProgressBar(0); }
     prevBtn.disabled = current === 0;
     nextBtn.disabled = current === total - 1;
   `;
+    const header = `<header class="dlof-header">
+      ${(0, theme_1.loopLogoSvg)(36, "var(--secondary)", "var(--primary)")}
+      <div>
+        <div class="logo-title">DLoF <span class="accent">Player</span></div>
+        <div class="logo-sub">${(0, theme_1.escapeHtml)(title)}</div>
+      </div>
+      <div style="margin-inline-start:auto">
+        <span class="badge">${items.length} ملف</span>
+      </div>
+    </header>`;
+    const loopProgressHtml = items.length > 1
+        ? `<div class="loop-progress">
+          <div class="loop-progress-head">
+            <span class="loop-progress-label" data-role="progress-label">تقدّم الحلقات</span>
+            <span class="loop-progress-count" data-role="progress-count">1/${items.length}</span>
+          </div>
+          <div class="loop-progress-track" id="loopProgressTrack">
+            <div class="loop-progress-fill" id="loopProgressFill"></div>
+            <div class="loop-progress-thumb" id="loopProgressThumb"></div>
+          </div>
+        </div>`
+        : "";
     return `<!DOCTYPE html>
 <html lang="${(0, theme_1.escapeHtml)(firstDoc.metadata.language ?? "ar")}" dir="rtl">
 <head>
@@ -214,10 +348,12 @@ function renderPlayerHtml(series, options = {}) {
 </head>
 <body>
   <div class="app">
-    <div class="badge">DLoF Player</div>
-    <h1 style="margin-top:6px">${(0, theme_1.escapeHtml)(title)}</h1>
+    ${header}
+    ${loopProgressHtml}
     <div class="layout">
       <aside class="sidebar">
+        <div class="files-section-title">📁 الملفات</div>
+        <input id="filesSearch" class="files-search" type="search" placeholder="بحث في الملفات…"/>
         <ul id="navList">${navListHtml}</ul>
       </aside>
       <main class="main">

package/dist/viewer/brand.d.ts

@@ -0,0 +1,50 @@
+/**
+ * الهوية البصرية الرسمية لـ DLoF — مطابقة لتطبيق Android الأصلي (ui/theme/Theme.kt)
+ * ولأداة web-signature (App.jsx): أخضر داكن "Copper" كلون أساسي، ذهبي/برتقالي
+ * "Moss" كلون ثانوي، وخلفية حبرية للوضع الليلي. تُستخدم هذه الألوان كافتراضيات
+ * لعارض HTML ومشغّل الحلقات في حزمة npm، بحيث يظهر الناتج بنفس هوية DLoF الأصلية.
+ */
+export declare const BRAND_LIGHT: {
+    primary: string;
+    secondary: string;
+    background: string;
+    surface: string;
+    surfaceVariant: string;
+    text: string;
+    muted: string;
+    border: string;
+};
+export declare const BRAND_DARK: {
+    primary: string;
+    secondary: string;
+    background: string;
+    surface: string;
+    surfaceVariant: string;
+    text: string;
+    muted: string;
+    border: string;
+};
+/** شعار الحلقة (نقاط متقطعة + نواة) — نفس شعار أداة web-signature، بلون قابل للتخصيص */
+export declare function loopLogoSvg(size?: number, color?: string, dim?: string): string;
+/** تسميات المجالات بالعربية — مطابقة لـ model/DlofDocument.kt (enum Domain) */
+export declare const DOMAIN_LABELS: Record<string, string>;
+export declare function domainLabel(domain?: string): string;
+/** تسميات وأيقونات وألوان أنواع المحتوى (content kind) — تُستخدم في قوائم الملفات */
+export declare const CONTENT_KIND_INFO: Record<string, {
+    label: string;
+    icon: string;
+    color: string;
+}>;
+export interface FileTypeInfo {
+    icon: string;
+    color: string;
+    label: string;
+}
+/**
+ * توزيع أيقونة ولون على امتداد ملف معطى — مطابق لـ FileTypeIcons.kt في تطبيق
+ * Android الأصلي (نفس الألوان تقريباً)، لكن بأيقونات نصية (بلا اعتماد خارجي)
+ * بدل أيقونات Material كي تعمل الأداة بلا أي اعتماديات.
+ */
+export declare function fileTypeInfo(fileName: string, mimeHint?: string): FileTypeInfo;
+/** ينسّق حجم الملف بالبايت إلى نص مقروء بالعربية — مطابق لـ formatFileSize في FileTypeIcons.kt */
+export declare function formatFileSize(bytes?: number): string;

package/dist/viewer/brand.js

@@ -0,0 +1,118 @@
+"use strict";
+/**
+ * الهوية البصرية الرسمية لـ DLoF — مطابقة لتطبيق Android الأصلي (ui/theme/Theme.kt)
+ * ولأداة web-signature (App.jsx): أخضر داكن "Copper" كلون أساسي، ذهبي/برتقالي
+ * "Moss" كلون ثانوي، وخلفية حبرية للوضع الليلي. تُستخدم هذه الألوان كافتراضيات
+ * لعارض HTML ومشغّل الحلقات في حزمة npm، بحيث يظهر الناتج بنفس هوية DLoF الأصلية.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTENT_KIND_INFO = exports.DOMAIN_LABELS = exports.BRAND_DARK = exports.BRAND_LIGHT = void 0;
+exports.loopLogoSvg = loopLogoSvg;
+exports.domainLabel = domainLabel;
+exports.fileTypeInfo = fileTypeInfo;
+exports.formatFileSize = formatFileSize;
+exports.BRAND_LIGHT = {
+    primary: "#1D7A3F", // DlofCopper
+    secondary: "#D2A020", // DlofMoss
+    background: "#EDEFF7", // DlofParchment
+    surface: "#F9FAFD",
+    surfaceVariant: "#E3E7F0",
+    text: "#0B0B14", // DlofInk
+    muted: "#5B5F6E",
+    border: "rgba(11,11,20,.10)",
+};
+exports.BRAND_DARK = {
+    primary: "#4CC47B",
+    secondary: "#E8C24A",
+    background: "#0A0A14", // DlofSurfaceDark
+    surface: "#15151F",
+    surfaceVariant: "#232336",
+    text: "#ECEEF6", // DlofInkLight
+    muted: "#9A9DB0",
+    border: "rgba(236,238,246,.10)",
+};
+/** شعار الحلقة (نقاط متقطعة + نواة) — نفس شعار أداة web-signature، بلون قابل للتخصيص */
+function loopLogoSvg(size = 34, color = exports.BRAND_LIGHT.secondary, dim) {
+    const d = dim ?? color;
+    return `<svg width="${size}" height="${size}" viewBox="0 0 38 38" aria-hidden="true">
+    <circle cx="19" cy="19" r="16" fill="none" stroke="${color}" stroke-width="2.5" stroke-dasharray="6 3"/>
+    <circle cx="19" cy="19" r="8" fill="${d}" opacity="0.55"/>
+    <circle cx="19" cy="19" r="3.5" fill="${color}"/>
+    <path d="M19 7 L19 3 M19 35 L19 31 M7 19 L3 19 M35 19 L31 19" stroke="${color}" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>`;
+}
+/** تسميات المجالات بالعربية — مطابقة لـ model/DlofDocument.kt (enum Domain) */
+exports.DOMAIN_LABELS = {
+    education: "تعليم",
+    book: "كتاب",
+    infoApp: "تطبيق معلومات",
+    infoLoop: "حلقة معلومات",
+    recipe: "وصفة طعام",
+    journal: "يوميات",
+    series: "مسلسل / سلسلة",
+    comic: "قصة مصورة",
+    podcast: "بودكاست",
+    characters: "شخصيات",
+    custom: "مخصص",
+};
+function domainLabel(domain) {
+    if (!domain)
+        return exports.DOMAIN_LABELS.custom;
+    return exports.DOMAIN_LABELS[domain] ?? domain;
+}
+/** تسميات وأيقونات وألوان أنواع المحتوى (content kind) — تُستخدم في قوائم الملفات */
+exports.CONTENT_KIND_INFO = {
+    bookChapter: { label: "فصل كتاب", icon: "📖", color: "#6A1B9A" },
+    qaItem: { label: "سؤال وجواب", icon: "❓", color: "#0277BD" },
+    termDefinition: { label: "تعريف مصطلح", icon: "🔤", color: "#2E7D32" },
+    infoExplain: { label: "شرح معلومة", icon: "💡", color: "#D2A020" },
+    episodeItem: { label: "حلقة", icon: "🎬", color: "#2D5C6B" },
+    genericItem: { label: "عنصر عام", icon: "📄", color: "#455A64" },
+};
+/**
+ * توزيع أيقونة ولون على امتداد ملف معطى — مطابق لـ FileTypeIcons.kt في تطبيق
+ * Android الأصلي (نفس الألوان تقريباً)، لكن بأيقونات نصية (بلا اعتماد خارجي)
+ * بدل أيقونات Material كي تعمل الأداة بلا أي اعتماديات.
+ */
+function fileTypeInfo(fileName, mimeHint) {
+    const ext = (fileName.split(".").pop() ?? "").toLowerCase();
+    const mime = mimeHint ?? "";
+    if (ext === "dlof" || ext === "dloftemplate")
+        return { icon: "🔁", color: "#AA5B2E", label: "ملف DLoF" };
+    if (ext === "dlofcomic")
+        return { icon: "📚", color: "#4B5D3A", label: "قصة مصورة" };
+    if (ext === "dlofvideo")
+        return { icon: "📺", color: "#2D5C6B", label: "مسلسل فيديو" };
+    if (mime.startsWith("image/") || ["jpg", "jpeg", "png", "webp", "gif", "bmp", "heic", "svg"].includes(ext))
+        return { icon: "🖼️", color: "#2E7D32", label: "صورة" };
+    if (mime.startsWith("video/") || ["mp4", "mkv", "webm", "avi", "mov", "3gp"].includes(ext))
+        return { icon: "🎬", color: "#6A1B9A", label: "فيديو" };
+    if (mime.startsWith("audio/") || ["mp3", "wav", "ogg", "m4a", "flac", "aac"].includes(ext))
+        return { icon: "🎵", color: "#0277BD", label: "صوت" };
+    if (ext === "pdf")
+        return { icon: "📕", color: "#C62828", label: "PDF" };
+    if (["zip", "rar", "7z", "tar", "gz"].includes(ext))
+        return { icon: "🗜️", color: "#8D6E63", label: "أرشيف" };
+    if (["xls", "xlsx", "csv", "tsv"].includes(ext))
+        return { icon: "📊", color: "#2E7D32", label: "جدول بيانات" };
+    if (["json", "xml", "yaml", "yml", "kt", "java", "py", "js", "ts", "html", "css"].includes(ext))
+        return { icon: "🧩", color: "#455A64", label: "بيانات/كود" };
+    if (["txt", "md", "doc", "docx"].includes(ext))
+        return { icon: "📃", color: "#1976D2", label: "مستند" };
+    return { icon: "📁", color: "#757575", label: "ملف" };
+}
+/** ينسّق حجم الملف بالبايت إلى نص مقروء بالعربية — مطابق لـ formatFileSize في FileTypeIcons.kt */
+function formatFileSize(bytes) {
+    if (bytes === undefined || bytes === null || Number.isNaN(bytes))
+        return "";
+    if (bytes < 1024)
+        return `${bytes} بايت`;
+    const kb = bytes / 1024;
+    if (kb < 1024)
+        return `${kb.toFixed(1)} ك.ب`;
+    const mb = kb / 1024;
+    if (mb < 1024)
+        return `${mb.toFixed(1)} م.ب`;
+    const gb = mb / 1024;
+    return `${gb.toFixed(2)} غ.ب`;
+}

package/dist/viewer/renderContent.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderDocumentCard = renderDocumentCard;
 const theme_1 = require("./theme");
+const brand_1 = require("./brand");
 function attachmentSrc(a) {
     if (a.data)
         return `data:${a.mimeType};base64,${a.data}`;
@@ -9,46 +10,63 @@ function attachmentSrc(a) {
         return a.uri;
     return undefined;
 }
+/** يعرض مرفقاً واحداً كبطاقة ملف (أيقونة + اسم + حجم)، مطابقة لشكل بطاقة الملف
+ *  في شاشة "ملفاتي" بتطبيق DLoF الأصلي، مع معاينة مضمّنة أسفلها للصور والفيديو. */
 function renderAttachment(a) {
     const src = attachmentSrc(a);
+    const info = (0, brand_1.fileTypeInfo)(a.fileName, a.mimeType);
+    const size = (0, brand_1.formatFileSize)(a.sizeBytes);
+    const card = `<div class="file-card">
+      <div class="file-icon" style="background:${info.color}22;color:${info.color}">${info.icon}</div>
+      <div class="file-info">
+        <div class="file-name">${(0, theme_1.escapeHtml)(a.fileName)}</div>
+        <div class="file-meta"><span>${(0, theme_1.escapeHtml)(info.label)}</span>${size ? `<span>${size}</span>` : ""}</div>
+      </div>
+    </div>`;
     if (!src)
-        return "";
-    const caption = a.caption ? `<div class="tag">${(0, theme_1.escapeHtml)(a.caption)}</div>` : "";
+        return card;
+    let preview = "";
     if (a.kind === "image") {
-        return `<div class="attachment"><img src="${src}" alt="${(0, theme_1.escapeHtml)(a.fileName)}" loading="lazy"/>${caption}</div>`;
+        preview = `<div class="attachment-preview"><img src="${src}" alt="${(0, theme_1.escapeHtml)(a.fileName)}" loading="lazy"/></div>`;
     }
-    if (a.kind === "video") {
-        return `<div class="attachment"><video controls src="${src}"></video>${caption}</div>`;
+    else if (a.kind === "video") {
+        preview = `<div class="attachment-preview"><video controls src="${src}"></video></div>`;
     }
-    return `<div class="attachment"><a href="${src}" download="${(0, theme_1.escapeHtml)(a.fileName)}">📎 ${(0, theme_1.escapeHtml)(a.fileName)}</a>${caption}</div>`;
+    const caption = a.caption ? `<div class="attachment-caption">${(0, theme_1.escapeHtml)(a.caption)}</div>` : "";
+    return `${card}${preview}${caption}`;
 }
 function contentHtml(doc) {
     const c = doc.content;
+    const kindInfo = brand_1.CONTENT_KIND_INFO[c.kind] ?? brand_1.CONTENT_KIND_INFO.genericItem;
+    const kindBadge = `<span class="badge outline">${kindInfo.icon} ${(0, theme_1.escapeHtml)(kindInfo.label)}</span>`;
     switch (c.kind) {
         case "bookChapter":
             return `
-        ${c.chapterNumber !== undefined ? `<div class="tag">الفصل ${c.chapterNumber}</div>` : ""}
+        <div style="margin-bottom:8px">${kindBadge}${c.chapterNumber !== undefined ? `<span class="badge ghost">الفصل ${c.chapterNumber}</span>` : ""}</div>
         <h1>${(0, theme_1.escapeHtml)(c.chapterTitle)}</h1>
         ${c.summary ? `<p class="tag">${(0, theme_1.escapeHtml)(c.summary)}</p>` : ""}
         <div class="body-text">${(0, theme_1.escapeHtml)(c.text)}</div>`;
         case "qaItem":
             return `
+        <div style="margin-bottom:8px">${kindBadge}${c.difficulty ? `<span class="badge ghost">${(0, theme_1.escapeHtml)(c.difficulty)}</span>` : ""}</div>
         <h2>❓ ${(0, theme_1.escapeHtml)(c.question)}</h2>
         <div class="body-text">${(0, theme_1.escapeHtml)(c.answer)}</div>
-        ${c.explanation ? `<p class="tag">${(0, theme_1.escapeHtml)(c.explanation)}</p>` : ""}
-        ${c.difficulty ? `<span class="badge">${(0, theme_1.escapeHtml)(c.difficulty)}</span>` : ""}`;
+        ${c.explanation ? `<p class="tag">${(0, theme_1.escapeHtml)(c.explanation)}</p>` : ""}`;
         case "termDefinition":
             return `
+        <div style="margin-bottom:8px">${kindBadge}</div>
         <h1>${(0, theme_1.escapeHtml)(c.term)}</h1>
         <div class="body-text">${(0, theme_1.escapeHtml)(c.definition)}</div>
         ${c.example ? `<p class="tag">مثال: ${(0, theme_1.escapeHtml)(c.example)}</p>` : ""}`;
         case "infoExplain":
             return `
+        <div style="margin-bottom:8px">${kindBadge}</div>
         <h1>${(0, theme_1.escapeHtml)(c.topic)}</h1>
         <div class="body-text">${(0, theme_1.escapeHtml)(c.explanation)}</div>
         ${c.source ? `<p class="tag">المصدر: ${(0, theme_1.escapeHtml)(c.source)}</p>` : ""}`;
         case "episodeItem":
             return `
+        <div style="margin-bottom:8px">${kindBadge}</div>
         <div class="tag">${c.seriesTitle ? (0, theme_1.escapeHtml)(c.seriesTitle) + " · " : ""}${c.seasonNumber !== undefined ? "الموسم " + c.seasonNumber + " · " : ""}${c.episodeNumber !== undefined ? "الحلقة " + c.episodeNumber : ""}</div>
         <h1>${(0, theme_1.escapeHtml)(c.episodeTitle)}</h1>
         ${c.synopsis ? `<p class="tag">${(0, theme_1.escapeHtml)(c.synopsis)}</p>` : ""}
@@ -56,8 +74,8 @@ function contentHtml(doc) {
         case "genericItem":
         default:
             return `
+        <div style="margin-bottom:8px">${kindBadge}${c.type ? `<span class="badge ghost">${(0, theme_1.escapeHtml)(c.type)}</span>` : ""}</div>
         <h1>${(0, theme_1.escapeHtml)(doc.metadata.title || "مستند")}</h1>
-        ${c.type ? `<span class="badge">${(0, theme_1.escapeHtml)(c.type)}</span>` : ""}
         ${c.element ? `<p class="tag">${(0, theme_1.escapeHtml)(c.element)}</p>` : ""}
         ${c.body ? `<div class="body-text">${(0, theme_1.escapeHtml)(c.body)}</div>` : ""}`;
     }
@@ -65,13 +83,18 @@ function contentHtml(doc) {
 /** يبني كتلة HTML كاملة (بطاقة) لمستند DocumentLoop واحد مع مرفقاته */
 function renderDocumentCard(doc, layout) {
     const tags = (doc.metadata.tags ?? []).map((t) => `<span class="tag">#${(0, theme_1.escapeHtml)(t)}</span>`).join("");
-    const meta = `<div class="meta-row">${(0, theme_1.escapeHtml)(doc.metadata.author ?? "")}${doc.metadata.author && doc.metadata.createdAt ? " · " : ""}${doc.metadata.createdAt ? (0, theme_1.escapeHtml)(doc.metadata.createdAt.slice(0, 10)) : ""}</div>`;
-    const attachmentsHtml = (doc.attachments ?? []).map(renderAttachment).join("\n");
+    const meta = `<div class="meta-row">${doc.metadata.author ? `<span>👤 ${(0, theme_1.escapeHtml)(doc.metadata.author)}</span>` : ""}${doc.metadata.createdAt ? `<span>📅 ${(0, theme_1.escapeHtml)(doc.metadata.createdAt.slice(0, 10))}</span>` : ""}</div>`;
+    const attachments = doc.attachments ?? [];
+    const attachmentsHtml = attachments.length
+        ? `<div class="files-section-title">📎 المرفقات (${attachments.length})</div>${attachments
+            .map(renderAttachment)
+            .join("\n")}`
+        : "";
     return `
     <div class="card ${(0, theme_1.escapeHtml)(layout)}">
       ${meta}
       ${contentHtml(doc)}
       ${tags ? `<div style="margin-top:10px">${tags}</div>` : ""}
-      ${attachmentsHtml}
-    </div>`;
+    </div>
+    ${attachmentsHtml}`;
 }

package/dist/viewer/renderViewerHtml.d.ts

@@ -5,7 +5,8 @@ export interface ViewerOptions {
 }
 /**
  * عارض dlofpkg / dlof: يبني صفحة HTML مستقلة واحدة (بلا اعتماديات خارجية)
- * تعرض بيانات meta.json الوصفية، محتوى المستند، مرفقاته، وتصميمه المخصّص (template).
- * الصفحة الناتجة قابلة للفتح مباشرة في أي متصفح دون خادم.
+ * بنفس الهوية البصرية لتطبيق DLoF الأصلي (الشعار، الألوان، بطاقات الملفات)،
+ * تعرض بيانات meta.json الوصفية، محتوى المستند، مرفقاته كبطاقات ملفات، وتصميمه
+ * المخصّص (template) إن وُجد. الصفحة الناتجة قابلة للفتح مباشرة في أي متصفح دون خادم.
  */
 export declare function renderViewerHtml(input: DlofPkg | DocumentLoop, options?: ViewerOptions): string;