npm - @datajaddah/course - Versions diffs - 0.0.2 - Mend

@datajaddah/course 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/lib/slide-markdown.js ADDED Viewed

@@ -0,0 +1,505 @@
+const VALID_LAYOUTS = new Set([
+  "default",
+  "two-column",
+  "sidebar-left",
+  "sidebar-right",
+]);
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+function escapeAttribute(value) {
+  return escapeHtml(value).replace(/`/g, "&#96;");
+}
+function normalizeText(value) {
+  return value.replace(/\s+/g, " ").trim();
+}
+function parseAttributeBlock(raw) {
+  const attrs = {};
+  const source = raw.trim().replace(/^\{/, "").replace(/\}$/, "");
+  const pattern = /([a-zA-Z][a-zA-Z0-9_-]*)=("[^"]*"|'[^']*'|[^\s}]+)/g;
+  let match;
+  while ((match = pattern.exec(source))) {
+    const key = match[1];
+    let value = match[2];
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+    attrs[key] = value;
+  }
+  return attrs;
+}
+function extractTrailingAttributeBlock(value) {
+  const match = /^(?<body>.*?)(?:\s*(?<attrs>\{[a-zA-Z][^{}]*\}))$/.exec(value.trim());
+  if (!match?.groups) {
+    return { body: value.trim(), attrs: {} };
+  }
+  return {
+    body: match.groups.body.trim(),
+    attrs: parseAttributeBlock(match.groups.attrs),
+  };
+}
+function createInlinePlaceholder(index) {
+  return `__INLINE_TOKEN_${index}__`;
+}
+function appendInlineCodePlaceholders(text) {
+  const placeholders = [];
+  const replaced = text.replace(/`([^`]+)`/g, (_, code) => {
+    const placeholder = createInlinePlaceholder(placeholders.length);
+    placeholders.push(`<code>${escapeHtml(code)}</code>`);
+    return placeholder;
+  });
+  return { replaced, placeholders };
+}
+function renderInlineMarkdown(text) {
+  const { replaced, placeholders } = appendInlineCodePlaceholders(text);
+  let html = replaced.replace(
+    /==(?<body>.+?)==(?<attrs>\{[a-zA-Z][^{}]*\})/g,
+    (match, _body, _attrs, _offset, _source, groups) => {
+      const step = parseAttributeBlock(groups?.attrs ?? "").highlight;
+      if (!step) {
+        return match;
+      }
+      const placeholder = createInlinePlaceholder(placeholders.length);
+      placeholders.push(
+        `<span data-highlight-step="${escapeAttribute(step)}" class="step-highlight-mark">${renderInlineMarkdown(
+          groups?.body ?? ""
+        )}</span>`
+      );
+      return placeholder;
+    }
+  );
+  html = escapeHtml(html);
+  html = html.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_, label, url) => {
+    const safeUrl = escapeAttribute(url);
+    return `<a href="${safeUrl}" target="_blank" rel="noreferrer">${escapeHtml(label)}</a>`;
+  });
+  html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, "$1<em>$2</em>");
+  placeholders.forEach((placeholder, index) => {
+    html = html.replace(createInlinePlaceholder(index), placeholder);
+  });
+  return html;
+}
+function buildBlockAttributeString(attrs = {}) {
+  const rendered = [];
+  if (attrs.delay != null) {
+    rendered.push(` data-delay="${escapeAttribute(attrs.delay)}"`);
+  }
+  if (attrs.highlight != null) {
+    rendered.push(` data-highlight="${escapeAttribute(attrs.highlight)}"`);
+  }
+  return rendered.join("");
+}
+function buildImageAttributeString(attrs = {}) {
+  const rendered = [buildBlockAttributeString(attrs)];
+  const styleFragments = [];
+  if (attrs.width != null) {
+    rendered.push(` data-width="${escapeAttribute(attrs.width)}"`);
+    styleFragments.push(`width:${/^\d+$/.test(String(attrs.width)) ? `${attrs.width}px` : attrs.width}`);
+  }
+  if (attrs.height != null) {
+    rendered.push(` data-height="${escapeAttribute(attrs.height)}"`);
+    styleFragments.push(
+      `height:${/^\d+$/.test(String(attrs.height)) ? `${attrs.height}px` : attrs.height}`
+    );
+  }
+  if (attrs.align != null) {
+    rendered.push(` data-align="${escapeAttribute(attrs.align)}"`);
+  }
+  if (styleFragments.length > 0) {
+    rendered.push(` style="${escapeAttribute(styleFragments.join(";"))}"`);
+  }
+  return rendered.join("");
+}
+function isHeadingLine(line) {
+  return /^(#{1,6})\s+/.test(line.trim());
+}
+function isFenceStart(line) {
+  return line.trim().startsWith("```");
+}
+function isBlockQuoteLine(line) {
+  return /^>\s?/.test(line.trim());
+}
+function isHorizontalRule(line) {
+  return /^---+$/.test(line.trim());
+}
+function parseImageLine(line) {
+  const trimmed = line.trim();
+  const { body, attrs } = extractTrailingAttributeBlock(trimmed);
+  const match = /^!\[(?<alt>[^\]]*)\]\((?<src>[^\s)]+)(?:\s+"(?<title>[^"]*)")?\)$/.exec(body);
+  if (!match?.groups) {
+    return null;
+  }
+  return {
+    alt: match.groups.alt || "",
+    src: match.groups.src || "",
+    title: match.groups.title || "",
+    attrs,
+  };
+}
+function buildImageHtml(image) {
+  const extraAttrs = [];
+  if (image.alt) {
+    extraAttrs.push(` alt="${escapeAttribute(image.alt)}"`);
+  }
+  if (image.title) {
+    extraAttrs.push(` title="${escapeAttribute(image.title)}"`);
+  }
+  if (image.src.startsWith("slot:")) {
+    extraAttrs.push(` data-image-slot="${escapeAttribute(image.src.slice("slot:".length))}"`);
+  }
+  return `<img src="${escapeAttribute(image.src)}"${extraAttrs.join("")}${buildImageAttributeString(
+    image.attrs
+  )} />`;
+}
+function renderParagraph(lines, lineNumber) {
+  const paragraphLines = [...lines];
+  const lastLine = paragraphLines.pop() || "";
+  const { body: lastBody, attrs } = extractTrailingAttributeBlock(lastLine);
+  paragraphLines.push(lastBody);
+  const body = normalizeText(paragraphLines.join(" "));
+  if (!body) {
+    return "";
+  }
+  return `<p${buildBlockAttributeString(attrs)}>${renderInlineMarkdown(body)}</p>`;
+}
+function renderList(lines, startIndex, onError) {
+  const ordered = /^\d+\.\s+/.test(lines[startIndex].trim());
+  const items = [];
+  let index = startIndex;
+  while (index < lines.length) {
+    const current = lines[index].trim();
+    const currentMatch = ordered
+      ? /^(\d+)\.\s+(.*)$/.exec(current)
+      : /^([-*+])\s+(.*)$/.exec(current);
+    if (!currentMatch) {
+      break;
+    }
+    const lineNumber = index + 1;
+    const itemLines = [currentMatch[2]];
+    index += 1;
+    while (index < lines.length) {
+      const nextLine = lines[index];
+      const trimmed = nextLine.trim();
+      if (!trimmed) {
+        break;
+      }
+      if (isHeadingLine(nextLine) || isFenceStart(nextLine) || isBlockQuoteLine(nextLine)) {
+        break;
+      }
+      if (parseImageLine(nextLine)) {
+        break;
+      }
+      if (isHorizontalRule(nextLine)) {
+        break;
+      }
+      if (/^([-*+])\s+/.test(trimmed) || /^\d+\.\s+/.test(trimmed)) {
+        break;
+      }
+      itemLines.push(trimmed);
+      index += 1;
+    }
+    const { body, attrs } = extractTrailingAttributeBlock(normalizeText(itemLines.join(" ")));
+    if (!body) {
+      onError("List items cannot be empty", lineNumber);
+    }
+    items.push(`<li${buildBlockAttributeString(attrs)}>${renderInlineMarkdown(body)}</li>`);
+    if (!lines[index]?.trim()) {
+      break;
+    }
+  }
+  return {
+    html: `<${ordered ? "ol" : "ul"}>${items.join("")}</${ordered ? "ol" : "ul"}>`,
+    nextIndex: index,
+  };
+}
+function renderBlocks(lines, onError, lineOffset = 0) {
+  const blocks = [];
+  let index = 0;
+  while (index < lines.length) {
+    const rawLine = lines[index];
+    const trimmed = rawLine.trim();
+    const lineNumber = lineOffset + index + 1;
+    if (!trimmed) {
+      index += 1;
+      continue;
+    }
+    if (isFenceStart(rawLine)) {
+      const language = trimmed.slice(3).trim();
+      const codeLines = [];
+      index += 1;
+      while (index < lines.length && !lines[index].trim().startsWith("```")) {
+        codeLines.push(lines[index]);
+        index += 1;
+      }
+      if (index < lines.length) {
+        index += 1;
+      } else {
+        onError("Code fence is missing a closing ```", lineNumber);
+      }
+      const className = language ? ` class="language-${escapeAttribute(language)}"` : "";
+      blocks.push(`<pre><code${className}>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+      continue;
+    }
+    if (isHeadingLine(rawLine)) {
+      const headingMatch = /^(#{1,6})\s+(.*)$/.exec(trimmed);
+      const level = headingMatch[1].length;
+      const { body, attrs } = extractTrailingAttributeBlock(headingMatch[2]);
+      blocks.push(
+        `<h${level}${buildBlockAttributeString(attrs)}>${renderInlineMarkdown(body)}</h${level}>`
+      );
+      index += 1;
+      continue;
+    }
+    const image = parseImageLine(rawLine);
+    if (image) {
+      blocks.push(buildImageHtml(image));
+      index += 1;
+      continue;
+    }
+    if (/^([-*+])\s+/.test(trimmed) || /^\d+\.\s+/.test(trimmed)) {
+      const { html, nextIndex } = renderList(lines, index, onError);
+      blocks.push(html);
+      index = nextIndex;
+      continue;
+    }
+    if (isBlockQuoteLine(rawLine)) {
+      const quoteLines = [];
+      while (index < lines.length && isBlockQuoteLine(lines[index])) {
+        quoteLines.push(lines[index].trim().replace(/^>\s?/, ""));
+        index += 1;
+      }
+      blocks.push(`<blockquote>${renderBlocks(quoteLines, onError)}</blockquote>`);
+      continue;
+    }
+    if (isHorizontalRule(rawLine)) {
+      blocks.push("<hr />");
+      index += 1;
+      continue;
+    }
+    const paragraphLines = [];
+    while (index < lines.length) {
+      const paragraphLine = lines[index];
+      const paragraphTrimmed = paragraphLine.trim();
+      if (!paragraphTrimmed) {
+        break;
+      }
+      if (
+        isFenceStart(paragraphLine) ||
+        isHeadingLine(paragraphLine) ||
+        isBlockQuoteLine(paragraphLine) ||
+        isHorizontalRule(paragraphLine) ||
+        parseImageLine(paragraphLine) ||
+        /^([-*+])\s+/.test(paragraphTrimmed) ||
+        /^\d+\.\s+/.test(paragraphTrimmed)
+      ) {
+        break;
+      }
+      paragraphLines.push(paragraphLine);
+      index += 1;
+    }
+    blocks.push(renderParagraph(paragraphLines, lineNumber));
+  }
+  return blocks.filter(Boolean).join("");
+}
+function extractLayout(lines, onError) {
+  const normalized = [...lines];
+  let layout = "default";
+  let layoutLine = null;
+  for (let index = 0; index < normalized.length; index += 1) {
+    const trimmed = normalized[index].trim();
+    if (!trimmed) {
+      continue;
+    }
+    if (trimmed.startsWith("@layout:")) {
+      layout = trimmed.slice("@layout:".length).trim();
+      layoutLine = index + 1;
+      normalized.splice(index, 1);
+    }
+    break;
+  }
+  if (!VALID_LAYOUTS.has(layout)) {
+    onError(
+      "layout must be one of `default`, `two-column`, `sidebar-left`, or `sidebar-right`",
+      layoutLine || 1
+    );
+  }
+  return { layout, lines: normalized };
+}
+function splitColumns(lines, onError) {
+  const columns = { 1: [], 2: [] };
+  let currentColumn = null;
+  let seenFirst = false;
+  let seenSecond = false;
+  for (let index = 0; index < lines.length; index += 1) {
+    const trimmed = lines[index].trim();
+    if (trimmed === "@column: 1") {
+      if (seenFirst) {
+        onError("`@column: 1` can appear only once", index + 1);
+      }
+      seenFirst = true;
+      currentColumn = 1;
+      continue;
+    }
+    if (trimmed === "@column: 2") {
+      if (!seenFirst) {
+        onError("`@column: 2` must come after `@column: 1`", index + 1);
+      }
+      if (seenSecond) {
+        onError("`@column: 2` can appear only once", index + 1);
+      }
+      seenSecond = true;
+      currentColumn = 2;
+      continue;
+    }
+    if (currentColumn == null) {
+      if (trimmed) {
+        onError("Column layouts must start with `@column: 1`", index + 1);
+      }
+      continue;
+    }
+    columns[currentColumn].push(lines[index]);
+  }
+  if (!seenFirst || !seenSecond) {
+    onError("Column layouts must include both `@column: 1` and `@column: 2`", 1);
+  }
+  return columns;
+}
+export function renderSlideMarkdown(markdown, { onError } = {}) {
+  const fail =
+    onError ||
+    ((message, line) => {
+      const error = new Error(message);
+      error.line = line;
+      throw error;
+    });
+  const source = (markdown || "").replace(/\r\n/g, "\n");
+  const baseLines = source.split("\n");
+  const { layout, lines } = extractLayout(baseLines, fail);
+  if (layout === "default") {
+    if (lines.some((line) => line.trim().startsWith("@column:"))) {
+      fail("`@column` markers require a non-default `@layout`", 1);
+    }
+    return {
+      layout,
+      html: renderBlocks(lines, fail),
+    };
+  }
+  const columns = splitColumns(lines, fail);
+  return {
+    layout,
+    html:
+      `<div data-type="columns" class="layout-${layout}">` +
+      `<div data-type="column" data-position="left">${renderBlocks(columns[1], fail)}</div>` +
+      `<div data-type="column" data-position="right">${renderBlocks(columns[2], fail)}</div>` +
+      `</div>`,
+  };
+}
+export function replaceSlotImagesForPreview(html) {
+  return String(html || "").replace(
+    /<img\b([^>]*)\bsrc="slot:([^"]+)"([^>]*)>/gi,
+    (_match, before, slotRef, after) => {
+      const altMatch = /\balt="([^"]*)"/i.exec(`${before} ${after}`);
+      const titleMatch = /\btitle="([^"]*)"/i.exec(`${before} ${after}`);
+      const widthMatch = /\bdata-width="([^"]*)"/i.exec(`${before} ${after}`);
+      const alignMatch = /\bdata-align="([^"]*)"/i.exec(`${before} ${after}`);
+      const style = [];
+      if (widthMatch?.[1]) {
+        style.push(`width:${/^\d+$/.test(widthMatch[1]) ? `${widthMatch[1]}px` : widthMatch[1]}`);
+      }
+      if (alignMatch?.[1] === "left") {
+        style.push("margin-right:auto");
+      } else if (alignMatch?.[1] === "right") {
+        style.push("margin-left:auto");
+      } else {
+        style.push("margin-left:auto", "margin-right:auto");
+      }
+      return (
+        `<div class="slide-image-slot"${style.length ? ` style="${escapeAttribute(style.join(";"))}"` : ""}>` +
+        `<div class="slide-image-slot__badge">Image slot</div>` +
+        `<div class="slide-image-slot__ref">${escapeHtml(slotRef)}</div>` +
+        `${altMatch?.[1] ? `<div class="slide-image-slot__alt">${escapeHtml(altMatch[1])}</div>` : ""}` +
+        `${titleMatch?.[1] ? `<div class="slide-image-slot__title">${escapeHtml(titleMatch[1])}</div>` : ""}` +
+        `</div>`
+      );
+    }
+  );
+}

package/package.json ADDED Viewed

@@ -0,0 +1,41 @@
+{
+  "name": "@datajaddah/course",
+  "version": "0.0.2",
+  "description": "CLI for authoring, validating, and previewing Datajaddah courses from GitHub repositories",
+  "license": "UNLICENSED",
+  "author": "Datajaddah",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BasimAlsaedi-analytics/jaddat-al-bayanat.git",
+    "directory": "packages/course"
+  },
+  "keywords": [
+    "datajaddah",
+    "course",
+    "authoring",
+    "cli",
+    "validation"
+  ],
+  "type": "module",
+  "bin": {
+    "datajaddah-course": "./bin/datajaddah-course.js"
+  },
+  "files": [
+    "bin/",
+    "lib/",
+    "scaffold/",
+    "preview-dist/"
+  ],
+  "scripts": {
+    "validate": "node ./bin/datajaddah-course.js validate",
+    "scaffold": "node ./bin/datajaddah-course.js init",
+    "preview": "node ./bin/datajaddah-course.js preview",
+    "build": "npm run build:preview",
+    "build:preview": "cd preview-app && npm install && npm run build",
+    "lint": "node --check ./bin/datajaddah-course.js && node --check ./lib/init.js && node --check ./lib/repo-contract.js && node --check ./lib/preview.js && node --check ./test/repo-contract.test.mjs && node --check ./test/preview.test.mjs",
+    "test": "node --test ./test/repo-contract.test.mjs ./test/preview.test.mjs"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/preview-dist/assets/index-CJUgarn8.css ADDED Viewed

@@ -0,0 +1 @@

+ *,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:15px;-webkit-font-smoothing:antialiased}body{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:#111827;background:#f9fafb;line-height:1.6}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}code{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;background:#f3f4f6;padding:.15em .4em;border-radius:4px;font-size:.875em}pre{margin:0}pre code{background:transparent;padding:0;border-radius:0;font-size:.875em}img{max-width:100%}table{border-collapse:collapse;width:100%;font-size:.875rem}th,td{border:1px solid #e5e7eb;padding:.5rem .75rem;text-align:left}th{background:#f9fafb;font-weight:600}blockquote{border-left:3px solid #d1d5db;padding-left:1rem;color:#6b7280;margin:.75rem 0}hr{border:none;border-top:1px solid #e5e7eb;margin:1rem 0}h1,h2,h3,h4,h5,h6{line-height:1.3;margin-bottom:.5rem}h1{font-size:1.5rem;font-weight:700}h2{font-size:1.25rem;font-weight:600}h3{font-size:1.1rem;font-weight:600}p{margin-bottom:.5rem}p:last-child{margin-bottom:0}ul,ol{margin:.5rem 0;padding-left:1.5rem}li{margin-bottom:.25rem}.app{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;min-height:100vh}.topbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.25rem;background:#fff;border-bottom:1px solid #e5e7eb}.topbar-title{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-meta{font-size:.8rem;color:#6b7280;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.sidebar{grid-row:2 / 4;border-right:1px solid #e5e7eb;background:#fff;overflow-y:auto;padding:.75rem}.main{grid-row:2;padding:1.25rem;overflow-y:auto}.footer{grid-column:2;padding:.5rem 1.25rem;font-size:.8rem;color:#6b7280;border-top:1px solid #e5e7eb;background:#fff}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem;color:#6b7280}.loading-spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:#2563eb;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-screen{display:grid;place-items:center;min-height:100vh;padding:2rem;background:#f9fafb}.error-card{max-width:680px;width:100%;background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:2rem}.error-card h1{font-size:1.25rem;margin:.5rem 0}.error-card pre{white-space:pre-wrap;word-break:break-word;background:#1e1e2e;color:#cdd6f4;border-radius:.5rem;padding:1rem;font-size:.85rem;margin:1rem 0}.error-card p{color:#6b7280}.outline-chapter+.outline-chapter{margin-top:.75rem}.outline-chapter-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;padding:.25rem .5rem}.outline-chapter-lessons{display:flex;flex-direction:column;gap:2px}.outline-lesson{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;border:none;background:transparent;border-radius:.5rem;padding:.5rem;cursor:pointer;font:inherit;color:inherit;transition:background .1s}.outline-lesson:hover{background:#f3f4f6}.outline-lesson.is-active{background:#eff6ff;color:#1d4ed8}.outline-lesson-icon{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#f3f4f6;color:#6b7280}.outline-lesson.is-active .outline-lesson-icon{background:#dbeafe;color:#2563eb}.outline-lesson-info{display:flex;flex-direction:column;min-width:0}.outline-lesson-title{font-size:.85rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.outline-lesson-kind{font-size:.7rem;color:#9ca3af}.outline-lesson.is-active .outline-lesson-kind{color:#60a5fa}.card{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;overflow:hidden}.card-inset{padding:1rem}.card-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:.5rem}.card-value{font-weight:500}.badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;padding:.2rem .6rem;border-radius:999px;background:#f3f4f6;color:#374151;white-space:nowrap}.badge-blue{background:#eff6ff;color:#2563eb}.badge-green{background:#ecfdf5;color:#059669}.badge-kind{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}.btn{display:inline-flex;align-items:center;gap:.25rem;font:inherit;font-size:.85rem;font-weight:500;padding:.45rem 1rem;border:1px solid #d1d5db;border-radius:.5rem;background:#fff;color:#111827;cursor:pointer;transition:background .1s}.btn:hover{background:#f9fafb}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-sm{padding:.3rem .7rem;font-size:.8rem}.btn-ghost{border-color:transparent;background:transparent;color:#6b7280}.btn-ghost:hover{background:#f3f4f6}.tab-bar{display:flex;gap:2px;background:#f3f4f6;border-radius:.5rem;padding:2px}.tab{font:inherit;font-size:.8rem;font-weight:500;padding:.35rem .75rem;border:none;border-radius:.375rem;background:transparent;color:#6b7280;cursor:pointer;white-space:nowrap}.tab:hover{color:#111827}.tab-active{background:#fff;color:#111827;box-shadow:0 1px 2px #0000000f}.lesson-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.lesson-title{margin-bottom:.15rem}.lesson-summary{margin-bottom:1rem}.text-muted{color:#6b7280}.text-xs{font-size:.75rem}.slide-container{display:flex;flex-direction:column;gap:.75rem}.slide-toolbar{display:flex;align-items:center;justify-content:space-between}.slide-nav{display:flex;gap:.35rem;align-items:center}.slide-stage{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:2rem;min-height:280px;aspect-ratio:16 / 9;overflow:auto}.slide-stage h1,.slide-stage h2,.slide-stage h3{margin-top:0}.slide-stage [data-type=columns]{display:grid;gap:1.5rem}.slide-stage [data-type=columns].layout-two-column{grid-template-columns:1fr 1fr}.slide-stage [data-type=columns].layout-sidebar-left{grid-template-columns:40fr 60fr}.slide-stage [data-type=columns].layout-sidebar-right{grid-template-columns:60fr 40fr}.slide-stage img{max-width:100%;border-radius:.5rem;display:block;margin:1rem auto}.slide-stage .slide-image-slot{border:2px dashed #d1d5db;border-radius:.5rem;padding:1rem;background:#f9fafb}.slide-stage .slide-image-slot__badge{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:.25rem}.slide-stage .slide-image-slot__ref{font-weight:600}.slide-stage .slide-image-slot__alt,.slide-stage .slide-image-slot__title{color:#6b7280;margin-top:.25rem}.slide-meta{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.narration-text{font-style:italic;color:#374151;line-height:1.7;white-space:pre-wrap}.video-container{display:flex;flex-direction:column;gap:.75rem}.video-frame{border-radius:.75rem;overflow:hidden;aspect-ratio:16 / 9;background:#111}.video-frame iframe,.video-frame video{width:100%;height:100%;border:0;display:block}.video-link{padding:2rem;background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;text-align:center}.quiz-container{display:flex;flex-direction:column;gap:1rem}.question-card{background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.question-header{display:flex;align-items:center;gap:.5rem}.question-counter{font-size:.8rem;font-weight:600;color:#6b7280}.question-prompt{color:#374151}.separator{font-size:.7rem;font-weight:700;letter-spacing:.08em;color:#9ca3af;border-top:1px solid #e5e7eb;padding-top:.75rem}.choices-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.choice{display:flex;align-items:flex-start;gap:.6rem;padding:.75rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#fff;cursor:pointer;transition:border-color .1s}.choice:hover{border-color:#93c5fd}.choice input{margin-top:.2rem;flex-shrink:0}.choice-body{flex:1;min-width:0}.choice-feedback{margin-top:.35rem;font-size:.85rem;color:#6b7280}.choice-correct{border-color:#86efac;background:#f0fdf4}.choice-wrong{border-color:#fca5a5;background:#fef2f2}.question-actions{display:flex;gap:.5rem}.quiz-result{padding:.75rem 1rem;border-radius:.5rem;font-weight:500;font-size:.9rem}.quiz-result-correct{background:#ecfdf5;color:#065f46}.quiz-result-wrong{background:#fef2f2;color:#991b1b}.exercise-split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #e5e7eb;border-radius:.75rem;overflow:hidden;min-height:400px}.exercise-left{padding:1rem;overflow-y:auto;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;gap:.75rem}.exercise-right{display:flex;flex-direction:column;background:#fafafa}.exercise-prompt{flex:1}.code-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid #e5e7eb;background:#fff}.code-block{flex:1;padding:1rem;overflow:auto;background:#1e1e2e;color:#cdd6f4;font-size:.85rem;line-height:1.6;border-radius:0;margin:0}.checks-list{display:flex;flex-direction:column;gap:.5rem}.check-item{padding:.5rem .75rem;border:1px solid #e5e7eb;border-radius:.375rem;background:#fff}.check-label{font-weight:500;margin-bottom:.25rem}.check-meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.wb-container{flex:1;overflow:auto;padding:.75rem}.wb-table{font-size:.8rem;border-collapse:collapse}.wb-table th,.wb-table td{border:1px solid #e5e7eb;padding:.25rem .5rem;min-width:60px}.wb-table th{background:#f3f4f6;text-align:center;font-weight:600;color:#6b7280;font-size:.75rem}.wb-table .row-num{background:#f3f4f6;text-align:center;font-weight:600;color:#6b7280;font-size:.75rem;width:32px}.wb-table .cell-formula{color:#2563eb;font-family:ui-monospace,monospace;font-size:.8rem}.sheet-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7280;margin-bottom:.25rem}.sheet-label+.table-scroll{margin-bottom:.75rem}.table-scroll{overflow-x:auto}.warnings-bar{background:#fffbeb;border:1px solid #fde68a;border-radius:.75rem;padding:.75rem 1rem;margin-bottom:1rem;font-size:.85rem;color:#92400e}.warnings-bar ul{margin:.5rem 0 0;padding-left:1.25rem}.task-list{list-style:none;padding-left:0}.task-item{display:flex;align-items:baseline;gap:.4rem}.task-item input{flex-shrink:0}@media(max-width:860px){.app{grid-template-columns:1fr}.sidebar{grid-row:auto;border-right:0;border-bottom:1px solid #e5e7eb;max-height:240px}.footer{grid-column:1}.slide-meta,.exercise-split{grid-template-columns:1fr}.exercise-left{border-right:0;border-bottom:1px solid #e5e7eb}.choices-grid{grid-template-columns:1fr}}@media print{.sidebar,.topbar,.footer{display:none}.app{display:block}.main{padding:0}.card,.question-card,.exercise-split{break-inside:avoid}}