@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/manifest.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Generate a build manifest from compiled pages and assets.
+ */
+export declare function generateManifest(routes: ManifestRoute[], assets: ManifestAssets, outputDir: string): BuildManifest;
+/**
+ * Write the manifest to disk.
+ */
+export declare function writeManifest(manifest: BuildManifest, outputDir: string): void;
+/**
+ * Load and validate a build manifest from disk.
+ * Returns null if the manifest doesn't exist or is invalid.
+ */
+export declare function loadManifest(outputDir: string): BuildManifest | null;
+/**
+ * A route entry in the build manifest.
+ */
+export declare interface ManifestRoute {
+  pattern: string
+  compiledPath: string
+  fragmentPath: string
+  isDynamic: boolean
+  hasParams: boolean
+}
+/**
+ * Asset entries in the build manifest.
+ */
+export declare interface ManifestAssets {
+  runtime: string
+  router: string
+  css?: string
+}
+/**
+ * The complete build manifest.
+ */
+export declare interface BuildManifest {
+  version: 1
+  buildTime: string
+  routes: ManifestRoute[]
+  assets: ManifestAssets
+  outputDir: string
+}

package/dist/manifest.js

@@ -0,0 +1,31 @@
+import fs from "node:fs";
+import path from "node:path";
+export function generateManifest(routes, assets, outputDir) {
+  return {
+    version: 1,
+    buildTime: new Date().toISOString(),
+    routes,
+    assets,
+    outputDir
+  };
+}
+export function writeManifest(manifest, outputDir) {
+  const manifestPath = path.join(outputDir, "manifest.json");
+  fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+}
+export function loadManifest(outputDir) {
+  const manifestPath = path.join(outputDir, "manifest.json");
+  if (!fs.existsSync(manifestPath))
+    return null;
+  try {
+    const content = fs.readFileSync(manifestPath, "utf-8"), manifest = JSON.parse(content);
+    if (manifest.version !== 1) {
+      console.warn(`[stx] Manifest version mismatch: expected 1, got ${manifest.version}`);
+      return null;
+    }
+    return manifest;
+  } catch (error) {
+    console.warn("[stx] Failed to load manifest:", error);
+    return null;
+  }
+}

package/dist/markdown-view.d.ts

@@ -0,0 +1,25 @@
+/** Whether a path should be treated as a markdown view. */
+export declare function isMarkdownPath(filePath: string): boolean;
+/**
+ * Wrap code blocks so the stx pass leaves their contents alone.
+ *
+ * Applies to `<pre>` (fenced blocks) and to any `<code>` not already inside
+ * one (inline spans). Without this, a page documenting a directive executes it.
+ */
+export declare function protectCodeBlocks(html: string): string;
+/**
+ * Turn markdown source into HTML the stx pipeline can process.
+ *
+ * Frontmatter is returned rather than injected, so the caller decides how it
+ * merges with the rest of the render context.
+ */
+export declare function renderMarkdownView(source: string, options?: MarkdownViewOptions): Promise<MarkdownView>;
+export declare interface MarkdownViewOptions {
+  renderer?: MarkdownRenderer
+}
+export declare interface MarkdownView {
+  html: string
+  frontmatter: Record<string, any>
+}
+/** Converts markdown source to HTML. */
+export type MarkdownRenderer = (source: string) => string | Promise<string>;

package/dist/markdown-view.js

@@ -0,0 +1,39 @@
+import { parseFrontmatter, parseMarkdown } from "./internal-markdown.js";
+export function isMarkdownPath(filePath) {
+  return filePath.endsWith(".md") || filePath.endsWith(".markdown");
+}
+export function protectCodeBlocks(html) {
+  const protectedRanges = [];
+  collect(/<pre\b[^>]*>[\s\S]*?<\/pre>/gi);
+  const preRanges = [...protectedRanges];
+  collect(/<code\b[^>]*>[\s\S]*?<\/code>/gi, preRanges);
+  function collect(re, skipWithin) {
+    let m;
+    while ((m = re.exec(html)) !== null) {
+      const start = m.index, end = start + m[0].length;
+      if (skipWithin?.some((r) => start >= r.start && end <= r.end))
+        continue;
+      protectedRanges.push({ start, end });
+    }
+  }
+  if (protectedRanges.length === 0)
+    return html;
+  protectedRanges.sort((a, b) => a.start - b.start);
+  let out = "", cursor = 0;
+  for (const range of protectedRanges) {
+    if (range.start < cursor)
+      continue;
+    out += html.slice(cursor, range.start);
+    out += `@raw${html.slice(range.start, range.end)}@endraw`;
+    cursor = range.end;
+  }
+  out += html.slice(cursor);
+  return out;
+}
+export async function renderMarkdownView(source, options = {}) {
+  const { data, content } = parseFrontmatter(source), html = await (options.renderer ?? ((md) => parseMarkdown(md)))(content);
+  return {
+    html: protectCodeBlocks(html),
+    frontmatter: data ?? {}
+  };
+}

package/dist/markdown.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Process markdown directives in templates
+ * Converts markdown content to HTML
+ */
+export declare function processMarkdownDirectives(template: string, context: Record<string, any>, filePath?: string): Promise<string>;
+/**
+ * Custom directive handler for markdown
+ * Can be registered as a custom directive
+ */
+export declare function markdownDirectiveHandler(content: string, params: string[], _context: Record<string, any>, _filePath: string): Promise<string>;

package/dist/markdown.js

@@ -0,0 +1,68 @@
+import { parseMarkdown } from "./internal-markdown.js";
+import { createDetailedErrorMessage } from "./utils.js";
+export async function processMarkdownDirectives(template, context, filePath = "") {
+  let output = template;
+  const matches = [], mdOpenRe = /@markdown(?:\([^)]*\))?/g;
+  let mdMatch;
+  while ((mdMatch = mdOpenRe.exec(template)) !== null) {
+    const startIdx = mdMatch.index, optMatch = mdMatch[0].match(/@markdown\(([^)]*)\)/), options = optMatch ? optMatch[1] : "", contentStart = startIdx + mdMatch[0].length;
+    let depth = 1, searchPos = contentStart, endPos = -1;
+    while (depth > 0 && searchPos < template.length) {
+      const nextOpen = template.indexOf("@markdown", searchPos), nextClose = template.indexOf("@endmarkdown", searchPos);
+      if (nextClose === -1)
+        break;
+      if (nextOpen !== -1 && nextOpen < nextClose && nextOpen !== startIdx) {
+        const charAfter = template[nextOpen + 9];
+        if (charAfter === "(" || charAfter === `
+` || charAfter === "\r" || charAfter === " " || charAfter === void 0)
+          depth++;
+        searchPos = nextOpen + 9;
+      } else {
+        depth--;
+        if (depth === 0) {
+          endPos = nextClose;
+          break;
+        }
+        searchPos = nextClose + 12;
+      }
+    }
+    if (endPos === -1)
+      continue;
+    const content = template.slice(contentStart, endPos), fullMatch = template.slice(startIdx, endPos + 12);
+    matches.push({ fullMatch, options, content, index: startIdx });
+    mdOpenRe.lastIndex = endPos + 12;
+  }
+  for (const { fullMatch, options, content, index } of matches)
+    try {
+      const optionsObj = {};
+      if (options)
+        options.split(",").forEach((opt) => {
+          const trimmed = opt.trim();
+          if (trimmed)
+            optionsObj[trimmed] = !0;
+        });
+      const parserOptions = {
+        gfm: optionsObj.gfm ?? !0,
+        breaks: optionsObj.breaks ?? !1
+      }, html = parseMarkdown(content.trim(), parserOptions);
+      output = output.split(fullMatch).join(html);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error), errorHtml = createDetailedErrorMessage("Markdown Directive", `Error processing markdown: ${errorMessage}`, filePath, template, index, fullMatch);
+      output = output.split(fullMatch).join(errorHtml);
+    }
+  return output;
+}
+export async function markdownDirectiveHandler(content, params, _context, _filePath) {
+  const options = {
+    gfm: !0,
+    breaks: !1
+  };
+  params.forEach((param) => {
+    const trimmed = param.trim().replace(/['"]/g, "");
+    if (trimmed === "breaks")
+      options.breaks = !0;
+    if (trimmed === "no-gfm")
+      options.gfm = !1;
+  });
+  return parseMarkdown(content.trim(), options);
+}

package/dist/media/client/blur-up.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Initialize blur-up effect for an image
+ *
+ * @example
+ * ```typescript
+ * const img = document.querySelector('img.has-placeholder')
+ * initBlurUp(img, { duration: 500 })
+ * ```
+ */
+export declare function initBlurUp(img: HTMLImageElement, options?: BlurUpOptions): void;
+/**
+ * Render a thumbhash to a canvas element
+ *
+ * Based on https://github.com/evanw/thumbhash
+ */
+export declare function renderThumbhashToCanvas(hash: Uint8Array, canvas: HTMLCanvasElement): void;
+/**
+ * Decode a thumbhash to RGBA pixel data
+ *
+ * This is a minimal decoder based on the thumbhash spec.
+ * Returns a 32x32 RGBA image.
+ */
+export declare function thumbHashToRGBA(hash: Uint8Array): { w: number; h: number; rgba: Uint8ClampedArray };
+/**
+ * Convert a thumbhash to a data URL
+ */
+export declare function thumbHashToDataURL(hash: Uint8Array): string;
+/**
+ * Parse a base64-encoded thumbhash string
+ */
+export declare function parseThumbhashString(base64: string): Uint8Array;
+/**
+ * Crossfade transition between two elements
+ */
+export declare function crossfadeTransition(from: HTMLElement, to: HTMLElement, duration?: number): Promise<void>;
+/**
+ * Initialize blur-up for all elements with data-stx-blur-up
+ */
+export declare function initAllBlurUp(options?: BlurUpOptions): void;
+/**
+ * Generate the client-side blur-up runtime script
+ */
+export declare function generateBlurUpRuntime(): string;
+/**
+ * Generate CSS for blur-up effect
+ */
+export declare function generateBlurUpCSS(): string;
+/* eslint-disable prefer-const, style/max-statements-per-line, no-super-linear-backtracking, regexp/no-unused-capturing-group */
+/**
+ * STX Media - Client-Side Blur-Up Animation
+ *
+ * Smooth blur-up transition from placeholder to full image.
+ * Supports thumbhash, blur LQIP, and color placeholders.
+ *
+ * @module media/client/blur-up
+ */
+// =============================================================================
+// Types
+// =============================================================================
+export declare interface BlurUpOptions {
+  duration?: number
+  easing?: string
+  removePlaceholder?: boolean
+  loadedClass?: string
+  loadingClass?: string
+}

package/dist/media/client/blur-up.js

@@ -0,0 +1,217 @@
+const DEFAULT_OPTIONS = {
+  duration: 300,
+  easing: "ease-out",
+  removePlaceholder: !1,
+  loadedClass: "stx-img-loaded",
+  loadingClass: "stx-img-loading"
+};
+export function initBlurUp(img, options = {}) {
+  const opts = { ...DEFAULT_OPTIONS, ...options }, wrapper = img.closest(".stx-img-placeholder");
+  if (!wrapper) {
+    handleImageLoad(img, opts);
+    return;
+  }
+  wrapper.style.setProperty("--stx-img-transition-duration", `${opts.duration}ms`);
+  wrapper.style.setProperty("--stx-img-transition-easing", opts.easing);
+  if (opts.loadingClass)
+    wrapper.classList.add(opts.loadingClass);
+  if (img.complete && img.naturalWidth > 0)
+    onImageLoaded(img, wrapper, opts);
+  else {
+    img.addEventListener("load", () => onImageLoaded(img, wrapper, opts), { once: !0 });
+    img.addEventListener("error", () => onImageError(img, wrapper, opts), { once: !0 });
+  }
+}
+function handleImageLoad(img, options) {
+  const handleLoad = () => {
+    img.style.transition = `opacity ${options.duration}ms ${options.easing}`;
+    img.style.opacity = "1";
+    img.classList.remove(options.loadingClass);
+    img.classList.add(options.loadedClass);
+  };
+  if (img.complete && img.naturalWidth > 0)
+    handleLoad();
+  else {
+    img.style.opacity = "0";
+    img.classList.add(options.loadingClass);
+    img.addEventListener("load", handleLoad, { once: !0 });
+  }
+}
+function onImageLoaded(img, wrapper, options) {
+  if (options.loadingClass)
+    wrapper.classList.remove(options.loadingClass);
+  if (options.loadedClass)
+    wrapper.classList.add(options.loadedClass);
+  img.style.opacity = "1";
+  if (options.removePlaceholder)
+    setTimeout(() => {
+      wrapper.style.backgroundImage = "none";
+    }, options.duration);
+}
+function onImageError(img, wrapper, options) {
+  if (options.loadingClass)
+    wrapper.classList.remove(options.loadingClass);
+  wrapper.classList.add("stx-img-error");
+  img.classList.add("stx-img-error");
+}
+export function renderThumbhashToCanvas(hash, canvas) {
+  const rgba = thumbHashToRGBA(hash), ctx = canvas.getContext("2d");
+  if (!ctx)
+    return;
+  canvas.width = rgba.w;
+  canvas.height = rgba.h;
+  const imageData = ctx.createImageData(rgba.w, rgba.h);
+  imageData.data.set(rgba.rgba);
+  ctx.putImageData(imageData, 0, 0);
+}
+export function thumbHashToRGBA(hash) {
+  const header = hash[0] | hash[1] << 8 | hash[2] << 16, l_dc = (header & 63) / 63, p_dc = (header >> 6 & 63) / 31.5 - 1, q_dc = (header >> 12 & 63) / 31.5 - 1, l_scale = (header >> 18 & 31) / 31, hasAlpha = header >> 23 !== 0, header2 = hash[3] | hash[4] << 8, p_scale = (header2 >> 3 & 63) / 63, q_scale = (header2 >> 9 & 63) / 63, isLandscape = header2 >> 15 !== 0, lx = Math.max(3, isLandscape ? hasAlpha ? 5 : 7 : hasAlpha ? 5 : 5), ly = Math.max(3, isLandscape ? hasAlpha ? 5 : 5 : hasAlpha ? 5 : 7), w = 32, h = 32, rgba = new Uint8ClampedArray(w * h * 4);
+  for (let y = 0;y < h; y++)
+    for (let x = 0;x < w; x++) {
+      const i = (y * w + x) * 4, fx = x / (w - 1), fy = y / (h - 1), l = l_dc + (fx - 0.5) * l_scale * 0.5 + (fy - 0.5) * l_scale * 0.5, p = p_dc * (1 - fx * 0.3), q = q_dc * (1 - fy * 0.3), b = l - 0.6666666666666666 * p, r = (3 * l - b + q) / 2, g = r - q;
+      rgba[i] = Math.max(0, Math.min(255, Math.round(r * 255)));
+      rgba[i + 1] = Math.max(0, Math.min(255, Math.round(g * 255)));
+      rgba[i + 2] = Math.max(0, Math.min(255, Math.round(b * 255)));
+      rgba[i + 3] = 255;
+    }
+  return { w, h, rgba };
+}
+export function thumbHashToDataURL(hash) {
+  const rgba = thumbHashToRGBA(hash), canvas = document.createElement("canvas");
+  canvas.width = rgba.w;
+  canvas.height = rgba.h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return "";
+  const imageData = ctx.createImageData(rgba.w, rgba.h);
+  imageData.data.set(rgba.rgba);
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
+}
+export function parseThumbhashString(base64) {
+  const binary = atob(base64), bytes = new Uint8Array(binary.length);
+  for (let i = 0;i < binary.length; i++)
+    bytes[i] = binary.charCodeAt(i);
+  return bytes;
+}
+export function crossfadeTransition(from, to, duration = 300) {
+  return new Promise((resolve) => {
+    from.style.transition = `opacity ${duration}ms ease-out`;
+    to.style.transition = `opacity ${duration}ms ease-out`;
+    to.style.opacity = "0";
+    to.offsetWidth;
+    from.style.opacity = "0";
+    to.style.opacity = "1";
+    setTimeout(resolve, duration);
+  });
+}
+export function initAllBlurUp(options = {}) {
+  document.querySelectorAll("[data-stx-blur-up], .stx-img-placeholder img").forEach((img) => {
+    initBlurUp(img, options);
+  });
+}
+export function generateBlurUpRuntime() {
+  return `
+(function() {
+  'use strict';
+
+  if (typeof window === 'undefined') return;
+
+  var defaultOptions = {
+    duration: 300,
+    easing: 'ease-out',
+    loadedClass: 'stx-img-loaded'
+  };
+
+  function initBlurUp(img, options) {
+    options = Object.assign({}, defaultOptions, options);
+    var wrapper = img.closest('.stx-img-placeholder');
+
+    if (!wrapper) {
+      if (img.complete && img.naturalWidth > 0) {
+        img.style.opacity = '1';
+      }
+else {
+        img.style.opacity = '0';
+        img.style.transition = 'opacity ' + options.duration + 'ms ' + options.easing;
+        img.onload = function() { img.style.opacity = '1'; };
+      }
+      return;
+    }
+
+    wrapper.style.setProperty('--stx-img-transition-duration', options.duration + 'ms');
+    wrapper.style.setProperty('--stx-img-transition-easing', options.easing);
+
+    var onLoaded = function() {
+      wrapper.classList.add(options.loadedClass);
+      img.style.opacity = '1';
+    };
+
+    if (img.complete && img.naturalWidth > 0) {
+      onLoaded();
+    }
+else {
+      img.addEventListener('load', onLoaded, { once: true });
+    }
+  }
+
+  function init() {
+    var elements = document.querySelectorAll('.stx-img-placeholder img, [data-stx-blur-up]');
+    elements.forEach(function(img) { initBlurUp(img); });
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  }
+else {
+    init();
+  }
+
+  // Expose for manual use
+  window.STX = window.STX || {};
+  window.STX.initBlurUp = initBlurUp;
+  window.STX.initAllBlurUp = init;
+})();
+`.trim();
+}
+export function generateBlurUpCSS() {
+  return `
+.stx-img-placeholder {
+  position: relative;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.stx-img-placeholder img {
+  display: block;
+  width: 100%;
+  height: auto;
+  opacity: 0;
+  transition: opacity var(--stx-img-transition-duration, 300ms) var(--stx-img-transition-easing, ease-out);
+}
+
+.stx-img-placeholder.stx-img-loaded img {
+  opacity: 1;
+}
+
+.stx-img-blur {
+  filter: blur(20px);
+  transform: scale(1.1);
+  transition: filter var(--stx-img-transition-duration, 300ms) var(--stx-img-transition-easing, ease-out),
+              transform var(--stx-img-transition-duration, 300ms) var(--stx-img-transition-easing, ease-out);
+}
+
+.stx-img-loaded .stx-img-blur,
+.stx-img-blur.stx-img-loaded {
+  filter: blur(0);
+  transform: scale(1);
+}
+
+.stx-img-error {
+  opacity: 0.5;
+}
+`.trim();
+}

package/dist/media/client/index.d.ts

@@ -0,0 +1,93 @@
+import { generateBlurUpRuntime, generateBlurUpCSS } from './blur-up';
+import { generateLazyLoadRuntime } from './lazy-load';
+import { generateUploadRuntime } from './upload-handler';
+/**
+ * Generate the complete media client runtime
+ */
+export declare function generateMediaRuntime(): { script: string; css: string };
+/**
+ * Generate minified media runtime for production
+ */
+export declare function generateMinifiedMediaRuntime(): { script: string; css: string };
+/**
+ * STX Media - Client-Side Runtime
+ *
+ * Client-side utilities for lazy loading, blur-up effects, and file uploads.
+ *
+ * @module media/client
+ */
+// =============================================================================
+// Lazy Loading
+// =============================================================================
+export {
+  // Types
+  type LazyLoadOptions,
+
+  // Feature detection
+  isNativeLazySupported,
+  isIntersectionObserverSupported,
+
+  // Initialization
+  initLazyLoading,
+  loadElement,
+
+  // Manual loading
+  lazyLoad,
+  lazyLoadAll,
+
+  // Observer utilities
+  createLazyObserver,
+  observeElement,
+  disconnectObserver,
+
+  // Runtime generation
+  generateLazyLoadRuntime,
+} from './lazy-load';
+// =============================================================================
+// Blur-Up Effects
+// =============================================================================
+export {
+  // Types
+  type BlurUpOptions,
+
+  // Initialization
+  initBlurUp,
+  initAllBlurUp,
+
+  // Thumbhash utilities
+  renderThumbhashToCanvas,
+  thumbHashToRGBA,
+  thumbHashToDataURL,
+  parseThumbhashString,
+
+  // Transitions
+  crossfadeTransition,
+
+  // Runtime generation
+  generateBlurUpRuntime,
+  generateBlurUpCSS,
+} from './blur-up';
+// =============================================================================
+// Upload Handler
+// =============================================================================
+export {
+  // Types
+  type UploadHandlerOptions,
+  type UploadProgress,
+  type UploadResult,
+  type FileValidationResult,
+
+  // Validation
+  validateFile,
+
+  // Upload functions
+  uploadFile,
+  uploadFiles,
+
+  // Preview generation
+  generateImagePreview,
+  generateVideoPreview,
+
+  // Runtime generation
+  generateUploadRuntime,
+} from './upload-handler';

package/dist/media/client/index.js

@@ -0,0 +1,53 @@
+export {
+  isNativeLazySupported,
+  isIntersectionObserverSupported,
+  initLazyLoading,
+  loadElement,
+  lazyLoad,
+  lazyLoadAll,
+  createLazyObserver,
+  observeElement,
+  disconnectObserver,
+  generateLazyLoadRuntime
+} from "./lazy-load.js";
+export {
+  initBlurUp,
+  initAllBlurUp,
+  renderThumbhashToCanvas,
+  thumbHashToRGBA,
+  thumbHashToDataURL,
+  parseThumbhashString,
+  crossfadeTransition,
+  generateBlurUpRuntime,
+  generateBlurUpCSS
+} from "./blur-up.js";
+export {
+  validateFile,
+  uploadFile,
+  uploadFiles,
+  generateImagePreview,
+  generateVideoPreview,
+  generateUploadRuntime
+} from "./upload-handler.js";
+import { generateLazyLoadRuntime } from "./lazy-load.js";
+import { generateBlurUpRuntime, generateBlurUpCSS } from "./blur-up.js";
+import { generateUploadRuntime } from "./upload-handler.js";
+export function generateMediaRuntime() {
+  return {
+    script: [
+      generateLazyLoadRuntime(),
+      generateBlurUpRuntime(),
+      generateUploadRuntime()
+    ].join(`
+
+`),
+    css: generateBlurUpCSS()
+  };
+}
+export function generateMinifiedMediaRuntime() {
+  const { script, css } = generateMediaRuntime(), minScript = script.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "").replace(/\s+/g, " ").replace(/\s*([{};,:])\s*/g, "$1").trim(), minCss = css.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{};,:])\s*/g, "$1").trim();
+  return {
+    script: minScript,
+    css: minCss
+  };
+}