@vcgstudiosy-beep/dlof 1.0.0

package/dist/player/renderPlayerHtml.js

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderPlayerHtml = renderPlayerHtml;
+const theme_1 = require("../viewer/theme");
+const renderContent_1 = require("../viewer/renderContent");
+const loopUtils_1 = require("../loop/loopUtils");
+const DEFAULT_MAX_INLINE = 20 * 1024 * 1024;
+const MIME_BY_EXT = {
+    mp4: "video/mp4",
+    webm: "video/webm",
+    mov: "video/quicktime",
+    mkv: "video/x-matroska",
+    mp3: "audio/mpeg",
+    wav: "audio/wav",
+    ogg: "audio/ogg",
+    m4a: "audio/mp4",
+    aac: "audio/aac",
+    flac: "audio/flac",
+};
+function guessMime(path) {
+    const ext = path.split(".").pop()?.toLowerCase() ?? "";
+    return MIME_BY_EXT[ext] ?? "application/octet-stream";
+}
+function isVideo(mime) {
+    return mime.startsWith("video/");
+}
+function isAudio(mime) {
+    return mime.startsWith("audio/");
+}
+/**
+ * مشغّل dlof: يبني تطبيق HTML/JS تفاعلي واحد لسلسلة أو حلقة كاملة من ملفات .dlof.
+ * يوفر: قائمة تصفح جانبية، أزرار التالي/السابق (تتبع loopLinks)، تشغيل الوسائط
+ * المرجعية (mediaRef / mediaFolder) مع شريط تقدّم قابل للسحب، وحفظ آخر موضع
+ * تصفح في التخزين المحلي للمتصفح بين الجلسات.
+ */
+function renderPlayerHtml(series, options = {}) {
+    const chain = (0, loopUtils_1.resolveLoopChain)(series.documents, series.rootFileName);
+    if (!chain.length) {
+        throw new Error("لا يمكن بناء المشغّل: لم يُعثر على أي حلقة صالحة من المستندات");
+    }
+    const maxInline = options.maxInlineMediaBytes ?? DEFAULT_MAX_INLINE;
+    const firstDoc = chain[0].document;
+    const theme = (0, theme_1.resolveTheme)(firstDoc.template);
+    const title = options.title ?? firstDoc.metadata.title ?? series.name;
+    const items = chain.map(({ fileName, document }) => {
+        let mediaHtml = "";
+        const mediaRef = document.content.kind === "episodeItem" ? document.content.mediaRef : undefined;
+        if (mediaRef) {
+            const normalized = mediaRef.replace(/^\.?\//, "");
+            const asset = series.assets[normalized] ?? series.assets[normalized.split("/").pop() ?? ""];
+            const mime = guessMime(normalized);
+            if (asset && asset.length <= maxInline && (isVideo(mime) || isAudio(mime))) {
+                const dataUrl = `data:${mime};base64,${asset.toString("base64")}`;
+                mediaHtml = isVideo(mime)
+                    ? `<video class="player-media" data-role="media" src="${dataUrl}"></video>`
+                    : `<audio class="player-media" data-role="media" src="${dataUrl}"></audio>`;
+            }
+            else if (asset) {
+                mediaHtml = `<p class="tag">⚠️ ملف الوسائط "${(0, theme_1.escapeHtml)(normalized)}" أكبر من الحد المسموح للتضمين المباشر في هذا المشغّل.</p>`;
+            }
+            else {
+                mediaHtml = `<p class="tag">📁 مرجع وسائط خارجي: ${(0, theme_1.escapeHtml)(normalized)}</p>`;
+            }
+        }
+        return {
+            fileName,
+            title: document.metadata.title,
+            navLabel: document.content.kind === "episodeItem"
+                ? document.content.episodeTitle
+                : document.metadata.title,
+            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>
+      </li>`)
+        .join("");
+    const panelsHtml = items
+        .map((it, idx) => `<section class="panel" data-index="${idx}" style="${idx === 0 ? "" : "display:none"}">
+        ${it.mediaHtml}
+        ${it.hasMedia
+        ? `<div class="progress-wrap">
+                <input type="range" class="seek" min="0" max="1000" value="0" data-role="seek"/>
+                <div class="time-row"><span data-role="current">0:00</span><span data-role="duration">0:00</span></div>
+               </div>`
+        : ""}
+        ${it.cardHtml}
+      </section>`)
+        .join("");
+    const playerCss = `
+    .layout { display: flex; gap: 24px; 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; }
+    .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; }
+    @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; }
+    }
+  `;
+    const script = `
+    const STATE_KEY = "dlof-player-progress::${(0, theme_1.escapeHtml)(series.name)}";
+    let current = 0;
+    const total = ${items.length};
+    const navItems = document.querySelectorAll(".nav-item");
+    const panels = document.querySelectorAll(".panel");
+    const prevBtn = document.getElementById("prevBtn");
+    const nextBtn = document.getElementById("nextBtn");
+
+    function fmt(t) {
+      if (!isFinite(t)) return "0:00";
+      const m = Math.floor(t / 60), s = Math.floor(t % 60);
+      return m + ":" + String(s).padStart(2, "0");
+    }
+
+    function setupMedia(panel) {
+      const media = panel.querySelector('[data-role="media"]');
+      const seek = panel.querySelector('[data-role="seek"]');
+      const curEl = panel.querySelector('[data-role="current"]');
+      const durEl = panel.querySelector('[data-role="duration"]');
+      if (!media || !seek) return;
+      let seeking = false;
+      media.addEventListener("loadedmetadata", () => { durEl.textContent = fmt(media.duration); });
+      media.addEventListener("timeupdate", () => {
+        if (!seeking) seek.value = String(Math.floor((media.currentTime / (media.duration || 1)) * 1000));
+        curEl.textContent = fmt(media.currentTime);
+        savePosition(media.currentTime);
+      });
+      seek.addEventListener("input", () => { seeking = true; });
+      seek.addEventListener("change", () => {
+        media.currentTime = (Number(seek.value) / 1000) * (media.duration || 0);
+        seeking = false;
+      });
+      media.addEventListener("ended", () => { if (current < total - 1) goTo(current + 1); });
+    }
+
+    function savePosition(t) {
+      try {
+        const data = JSON.parse(localStorage.getItem(STATE_KEY) || "{}");
+        data[current] = t;
+        data.lastIndex = current;
+        localStorage.setItem(STATE_KEY, JSON.stringify(data));
+      } catch (e) {}
+    }
+
+    function goTo(index) {
+      if (index < 0 || index >= total) return;
+      current = index;
+      navItems.forEach((el) => el.classList.toggle("active", Number(el.dataset.index) === index));
+      panels.forEach((el) => {
+        const match = Number(el.dataset.index) === index;
+        el.style.display = match ? "" : "none";
+        if (match) setupMedia(el);
+      });
+      prevBtn.disabled = index === 0;
+      nextBtn.disabled = index === total - 1;
+      try {
+        const data = JSON.parse(localStorage.getItem(STATE_KEY) || "{}");
+        data.lastIndex = index;
+        localStorage.setItem(STATE_KEY, JSON.stringify(data));
+        const media = panels[index].querySelector('[data-role="media"]');
+        if (media && data[index]) media.currentTime = data[index];
+      } catch (e) {}
+      panels[index].scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+
+    navItems.forEach((el) => el.addEventListener("click", () => goTo(Number(el.dataset.index))));
+    prevBtn.addEventListener("click", () => goTo(current - 1));
+    nextBtn.addEventListener("click", () => goTo(current + 1));
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowRight") goTo(current - 1); // RTL: يمين = السابق
+      if (e.key === "ArrowLeft") goTo(current + 1);  // RTL: يسار = التالي
+    });
+
+    // استئناف آخر موضع تصفح محفوظ
+    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]); }
+    prevBtn.disabled = current === 0;
+    nextBtn.disabled = current === total - 1;
+  `;
+    return `<!DOCTYPE html>
+<html lang="${(0, theme_1.escapeHtml)(firstDoc.metadata.language ?? "ar")}" dir="rtl">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<title>${(0, theme_1.escapeHtml)(title)} — مشغّل DLoF</title>
+<style>${(0, theme_1.baseCss)(theme)}${playerCss}</style>
+</head>
+<body>
+  <div class="app">
+    <div class="badge">DLoF Player</div>
+    <h1 style="margin-top:6px">${(0, theme_1.escapeHtml)(title)}</h1>
+    <div class="layout">
+      <aside class="sidebar">
+        <ul id="navList">${navListHtml}</ul>
+      </aside>
+      <main class="main">
+        ${panelsHtml}
+        <div class="footer-nav">
+          <button id="prevBtn" class="nav-btn">◀ السابق</button>
+          <button id="nextBtn" class="nav-btn secondary">التالي ▶</button>
+        </div>
+      </main>
+    </div>
+  </div>
+  <script>${script}</script>
+</body>
+</html>`;
+}

package/dist/types.d.ts

@@ -0,0 +1,141 @@
+/**
+ * الأنواع الأساسية لصيغة DLoF (Document Loop Format)
+ * مطابقة لـ docs/SPECIFICATION.md و spec/schema/dlof.xsd
+ */
+export type Domain = "education" | "book" | "infoApp" | "infoLoop" | "series" | "custom";
+export interface Metadata {
+    title: string;
+    domain: Domain | string;
+    author?: string;
+    createdAt?: string;
+    updatedAt?: string;
+    language?: string;
+    tags?: string[];
+}
+export interface LoopLink {
+    ref: string;
+    title?: string;
+}
+export interface LoopLinks {
+    previous?: LoopLink;
+    next?: LoopLink;
+    loopRoot: boolean;
+}
+export interface GenericItem {
+    kind: "genericItem";
+    customType?: string;
+    type?: string;
+    element?: string;
+    body?: string;
+}
+export interface QaItem {
+    kind: "qaItem";
+    question: string;
+    answer: string;
+    explanation?: string;
+    difficulty?: string;
+}
+export interface BookChapter {
+    kind: "bookChapter";
+    chapterTitle: string;
+    text: string;
+    chapterNumber?: number;
+    summary?: string;
+}
+export interface TermDefinition {
+    kind: "termDefinition";
+    term: string;
+    definition: string;
+    example?: string;
+}
+export interface InfoExplain {
+    kind: "infoExplain";
+    topic: string;
+    explanation: string;
+    source?: string;
+}
+export interface EpisodeItem {
+    kind: "episodeItem";
+    episodeNumber?: number;
+    seasonNumber?: number;
+    episodeTitle: string;
+    synopsis?: string;
+    duration?: number;
+    seriesTitle?: string;
+    mediaRef?: string;
+    releaseDate?: string;
+    body?: string;
+    thumbnailBase64?: string;
+}
+export type Content = GenericItem | QaItem | BookChapter | TermDefinition | InfoExplain | EpisodeItem;
+export type AttachmentKind = "image" | "video" | "file";
+export interface Attachment {
+    id: string;
+    fileName: string;
+    mimeType: string;
+    kind: AttachmentKind;
+    sizeBytes?: number;
+    data?: string;
+    uri?: string;
+    caption?: string;
+}
+export type TemplateLayout = "standard" | "card" | "magazine" | "minimal";
+export interface Template {
+    ref?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    fontFamily?: string;
+    layout?: TemplateLayout | string;
+    headerAttachmentRef?: string;
+}
+export type MediaKind = "image" | "video" | "audio" | "subtitle" | "file";
+export interface MediaFile {
+    path: string;
+    kind: MediaKind;
+    label?: string;
+}
+export interface DocumentLoop {
+    version: string;
+    id: string;
+    metadata: Metadata;
+    loopLinks: LoopLinks;
+    content: Content;
+    attachments?: Attachment[];
+    template?: Template;
+    mediaFolder?: MediaFile[];
+    /** اسم الملف الأصلي إن كان معروفاً (يفيد أدوات الحلقة والعارض) */
+    sourceFileName?: string;
+}
+export interface DlofTemplatePackage {
+    id: string;
+    name: string;
+    author?: string;
+    version: string;
+    design: Omit<Template, "ref" | "headerAttachmentRef">;
+}
+export interface DlofPkgMeta {
+    id: string;
+    title: string;
+    domain: string;
+    version: string;
+    author?: string;
+    language?: string;
+    createdAt?: string;
+    dlofpkg_version: string;
+}
+export interface DlofPkg {
+    meta: DlofPkgMeta;
+    document: DocumentLoop;
+    attachments: Record<string, Buffer>;
+}
+export interface DlofSeries {
+    name: string;
+    /** خريطة اسم الملف (نسبي داخل السلسلة) -> المستند المحلَّل */
+    documents: Record<string, DocumentLoop>;
+    /** اسم ملف نقطة انطلاق الحلقة (loopRoot) إن وُجد */
+    rootFileName?: string;
+    /** ملفات إضافية غير .dlof (خطوط، وسائط، إلخ) -> بايتات خام */
+    assets: Record<string, Buffer>;
+}

package/dist/types.js

@@ -0,0 +1,6 @@
+"use strict";
+/**
+ * الأنواع الأساسية لصيغة DLoF (Document Loop Format)
+ * مطابقة لـ docs/SPECIFICATION.md و spec/schema/dlof.xsd
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/viewer/renderContent.d.ts

@@ -0,0 +1,3 @@
+import { DocumentLoop } from "../types";
+/** يبني كتلة HTML كاملة (بطاقة) لمستند DocumentLoop واحد مع مرفقاته */
+export declare function renderDocumentCard(doc: DocumentLoop, layout: string): string;

package/dist/viewer/renderContent.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderDocumentCard = renderDocumentCard;
+const theme_1 = require("./theme");
+function attachmentSrc(a) {
+    if (a.data)
+        return `data:${a.mimeType};base64,${a.data}`;
+    if (a.uri)
+        return a.uri;
+    return undefined;
+}
+function renderAttachment(a) {
+    const src = attachmentSrc(a);
+    if (!src)
+        return "";
+    const caption = a.caption ? `<div class="tag">${(0, theme_1.escapeHtml)(a.caption)}</div>` : "";
+    if (a.kind === "image") {
+        return `<div class="attachment"><img src="${src}" alt="${(0, theme_1.escapeHtml)(a.fileName)}" loading="lazy"/>${caption}</div>`;
+    }
+    if (a.kind === "video") {
+        return `<div class="attachment"><video controls src="${src}"></video>${caption}</div>`;
+    }
+    return `<div class="attachment"><a href="${src}" download="${(0, theme_1.escapeHtml)(a.fileName)}">📎 ${(0, theme_1.escapeHtml)(a.fileName)}</a>${caption}</div>`;
+}
+function contentHtml(doc) {
+    const c = doc.content;
+    switch (c.kind) {
+        case "bookChapter":
+            return `
+        ${c.chapterNumber !== undefined ? `<div class="tag">الفصل ${c.chapterNumber}</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 `
+        <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>` : ""}`;
+        case "termDefinition":
+            return `
+        <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 `
+        <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 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>` : ""}
+        ${c.body ? `<div class="body-text">${(0, theme_1.escapeHtml)(c.body)}</div>` : ""}`;
+        case "genericItem":
+        default:
+            return `
+        <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>` : ""}`;
+    }
+}
+/** يبني كتلة 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");
+    return `
+    <div class="card ${(0, theme_1.escapeHtml)(layout)}">
+      ${meta}
+      ${contentHtml(doc)}
+      ${tags ? `<div style="margin-top:10px">${tags}</div>` : ""}
+      ${attachmentsHtml}
+    </div>`;
+}

package/dist/viewer/renderViewerHtml.d.ts

@@ -0,0 +1,11 @@
+import { DlofPkg, DocumentLoop } from "../types";
+export interface ViewerOptions {
+    /** يعرض تحذيرات التحقق أسفل البطاقة إن وُجدت (افتراضي: true) */
+    showValidation?: boolean;
+}
+/**
+ * عارض dlofpkg / dlof: يبني صفحة HTML مستقلة واحدة (بلا اعتماديات خارجية)
+ * تعرض بيانات meta.json الوصفية، محتوى المستند، مرفقاته، وتصميمه المخصّص (template).
+ * الصفحة الناتجة قابلة للفتح مباشرة في أي متصفح دون خادم.
+ */
+export declare function renderViewerHtml(input: DlofPkg | DocumentLoop, options?: ViewerOptions): string;

package/dist/viewer/renderViewerHtml.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderViewerHtml = renderViewerHtml;
+const theme_1 = require("./theme");
+const renderContent_1 = require("./renderContent");
+const validate_1 = require("../dlof/validate");
+/**
+ * عارض dlofpkg / dlof: يبني صفحة HTML مستقلة واحدة (بلا اعتماديات خارجية)
+ * تعرض بيانات meta.json الوصفية، محتوى المستند، مرفقاته، وتصميمه المخصّص (template).
+ * الصفحة الناتجة قابلة للفتح مباشرة في أي متصفح دون خادم.
+ */
+function renderViewerHtml(input, options = {}) {
+    const doc = "document" in input ? input.document : input;
+    const meta = "meta" in input ? input.meta : undefined;
+    const theme = (0, theme_1.resolveTheme)(doc.template);
+    const validation = (0, validate_1.validateDlof)(doc);
+    const showValidation = options.showValidation ?? true;
+    const issuesHtml = showValidation && validation.issues.length
+        ? `<div class="card minimal" style="border:1px dashed ${validation.valid ? "#999" : "#c62828"}">
+          <strong>${validation.valid ? "ملاحظات التحقق" : "أخطاء في الملف"}</strong>
+          <ul>${validation.issues
+            .map((i) => `<li>[${i.level === "error" ? "خطأ" : "تنبيه"}] ${(0, theme_1.escapeHtml)(i.message)}</li>`)
+            .join("")}</ul>
+        </div>`
+        : "";
+    const packageInfo = meta
+        ? `<div class="meta-row">حزمة dlofpkg · الإصدار ${(0, theme_1.escapeHtml)(meta.dlofpkg_version)} · المعرّف: ${(0, theme_1.escapeHtml)(meta.id)}</div>`
+        : "";
+    return `<!DOCTYPE html>
+<html lang="${(0, theme_1.escapeHtml)(doc.metadata.language ?? "ar")}" dir="rtl">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<title>${(0, theme_1.escapeHtml)(doc.metadata.title || "عارض DLoF")}</title>
+<style>${(0, theme_1.baseCss)(theme)}</style>
+</head>
+<body>
+  <div class="app">
+    <div class="badge">DLoF Viewer</div>
+    ${packageInfo}
+    ${(0, renderContent_1.renderDocumentCard)(doc, theme.layout)}
+    ${issuesHtml}
+  </div>
+</body>
+</html>`;
+}

package/dist/viewer/theme.d.ts

@@ -0,0 +1,13 @@
+import { Template } from "../types";
+export interface ResolvedTheme {
+    primaryColor: string;
+    secondaryColor: string;
+    backgroundColor: string;
+    textColor: string;
+    fontFamily: string;
+    layout: string;
+}
+export declare function resolveTheme(template?: Template): ResolvedTheme;
+/** يبني كتلة CSS أساسية مشتركة بين العارض والمشغّل، بدعم كامل للـ RTL */
+export declare function baseCss(theme: ResolvedTheme): string;
+export declare function escapeHtml(input: string): string;

package/dist/viewer/theme.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveTheme = resolveTheme;
+exports.baseCss = baseCss;
+exports.escapeHtml = escapeHtml;
+const DEFAULTS = {
+    primaryColor: "#6750A4",
+    secondaryColor: "#1E88E5",
+    backgroundColor: "#FFFFFF",
+    textColor: "#212121",
+    fontFamily: "sans-serif",
+    layout: "standard",
+};
+const FONT_STACKS = {
+    serif: "'Amiri', 'Noto Naskh Arabic', Georgia, serif",
+    "sans-serif": "'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif",
+    monospace: "'Cascadia Code', 'Courier New', monospace",
+    cursive: "'Aref Ruqaa', cursive",
+};
+function resolveTheme(template) {
+    const t = template ?? {};
+    const fontFamily = t.fontFamily ? FONT_STACKS[t.fontFamily] ?? t.fontFamily : FONT_STACKS["sans-serif"];
+    return {
+        primaryColor: t.primaryColor ?? DEFAULTS.primaryColor,
+        secondaryColor: t.secondaryColor ?? DEFAULTS.secondaryColor,
+        backgroundColor: t.backgroundColor ?? DEFAULTS.backgroundColor,
+        textColor: t.textColor ?? DEFAULTS.textColor,
+        fontFamily,
+        layout: t.layout ?? DEFAULTS.layout,
+    };
+}
+/** يبني كتلة CSS أساسية مشتركة بين العارض والمشغّل، بدعم كامل للـ RTL */
+function baseCss(theme) {
+    return `
+    :root {
+      --primary: ${theme.primaryColor};
+      --secondary: ${theme.secondaryColor};
+      --bg: ${theme.backgroundColor};
+      --text: ${theme.textColor};
+      --font: ${theme.fontFamily};
+    }
+    * { box-sizing: border-box; }
+    html, body {
+      margin: 0; padding: 0;
+      background: var(--bg);
+      color: var(--text);
+      font-family: var(--font);
+      direction: rtl;
+    }
+    body { min-height: 100vh; }
+    a { color: var(--secondary); }
+    .app {
+      max-width: 860px;
+      margin: 0 auto;
+      padding: 24px 20px 64px;
+    }
+    .badge {
+      display: inline-block;
+      background: var(--primary);
+      color: #fff;
+      border-radius: 999px;
+      padding: 2px 12px;
+      font-size: 12px;
+      margin-inline-end: 6px;
+    }
+    .card {
+      background: color-mix(in srgb, var(--bg) 92%, #000 4%);
+      border-radius: 16px;
+      padding: 20px 22px;
+      box-shadow: 0 1px 3px rgba(0,0,0,.08);
+      margin-bottom: 18px;
+    }
+    .card.magazine { border-inline-start: 6px solid var(--primary); }
+    .card.minimal { box-shadow: none; background: transparent; padding: 8px 0; }
+    h1 { font-size: 1.6rem; margin: .2em 0; }
+    h2 { font-size: 1.2rem; color: var(--primary); }
+    .meta-row { font-size: .85rem; opacity: .75; margin-bottom: 12px; }
+    .tag { font-size: .75rem; opacity: .7; margin-inline-end: 8px; }
+    .attachment img { max-width: 100%; border-radius: 12px; margin: 10px 0; }
+    .attachment video, .attachment audio { width: 100%; margin: 10px 0; }
+    .footer-nav {
+      display: flex; justify-content: space-between; gap: 12px;
+      margin-top: 24px;
+    }
+    .nav-btn {
+      flex: 1; text-align: center; padding: 12px 16px;
+      background: var(--primary); color: #fff; border-radius: 12px;
+      text-decoration: none; font-weight: 600; cursor: pointer; border: none;
+      font-family: var(--font); font-size: 1rem;
+    }
+    .nav-btn.secondary { background: var(--secondary); }
+    .nav-btn:disabled { opacity: .4; cursor: not-allowed; }
+    .body-text { white-space: pre-wrap; line-height: 1.9; }
+  `;
+}
+function escapeHtml(input) {
+    return input
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}

package/dist/xml/parser.d.ts

@@ -0,0 +1,22 @@
+/**
+ * محلّل XML خفيف بلا اعتمادات خارجية.
+ * غير مصمم كمحلل XML عام كامل المواصفة، بل مخصّص لتغطية كل ما تحتاجه صيغة DLoF:
+ * عناصر متداخلة، صفات، نص، CDATA، تعليقات، عناصر ذاتية الإغلاق، وترميز UTF-8.
+ */
+export interface XmlNode {
+    tag: string;
+    attrs: Record<string, string>;
+    children: XmlNode[];
+    text: string;
+}
+export declare function encodeEntities(input: string): string;
+/**
+ * يحلّل مستند XML كاملاً ويعيد العنصر الجذر.
+ */
+export declare function parseXml(source: string): XmlNode;
+/** يبحث عن أول عنصر فرعي مباشر بالاسم المحدد */
+export declare function child(node: XmlNode | undefined, tag: string): XmlNode | undefined;
+/** يعيد كل العناصر الفرعية المباشرة بالاسم المحدد */
+export declare function children(node: XmlNode | undefined, tag: string): XmlNode[];
+/** نص عنصر فرعي مباشر، أو undefined إن لم يوجد */
+export declare function childText(node: XmlNode | undefined, tag: string): string | undefined;