@pure-ds/core 0.6.9 → 0.6.11

package/src/js/pds-live-manager/import-contract.js

@@ -0,0 +1,57 @@
+const DEFAULT_CONFIDENCE = 0.5;
+
+function normalizeConfidence(value) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) return DEFAULT_CONFIDENCE;
+  return Math.max(0, Math.min(1, parsed));
+}
+
+function normalizeIssues(issues) {
+  if (!Array.isArray(issues)) return [];
+  return issues
+    .map((issue) => {
+      if (!issue) return null;
+      const severity = String(issue.severity || "info").toLowerCase();
+      return {
+        severity,
+        message: String(issue.message || ""),
+        path: issue.path ? String(issue.path) : "",
+      };
+    })
+    .filter((issue) => issue && issue.message);
+}
+
+export function createImportResult(input = {}) {
+  const source = String(input.source || "unknown");
+  const type = String(input.type || "generic");
+  const confidence = normalizeConfidence(input.confidence);
+  const issues = normalizeIssues(input.issues);
+  const designPatch =
+    input.designPatch && typeof input.designPatch === "object"
+      ? input.designPatch
+      : {};
+  const template =
+    input.template && typeof input.template === "object" ? input.template : null;
+
+  return {
+    source,
+    type,
+    confidence,
+    issues,
+    designPatch,
+    template,
+    meta: input.meta && typeof input.meta === "object" ? input.meta : {},
+  };
+}
+
+export function isImportResult(value) {
+  return Boolean(
+    value &&
+      typeof value === "object" &&
+      "source" in value &&
+      "type" in value &&
+      "confidence" in value &&
+      "issues" in value &&
+      "designPatch" in value
+  );
+}

package/src/js/pds-live-manager/import-history-service.js

@@ -0,0 +1,145 @@
+const IMPORT_HISTORY_DB_NAME = "pds-live-import-history";
+const IMPORT_HISTORY_DB_VERSION = 1;
+const IMPORT_HISTORY_STORE = "imports";
+
+let dbPromise = null;
+
+function supportsIndexedDb() {
+  return typeof globalThis !== "undefined" && typeof globalThis.indexedDB !== "undefined";
+}
+
+function sanitizeText(value) {
+  return typeof value === "string" ? value : "";
+}
+
+function sanitizeArray(value) {
+  return Array.isArray(value) ? value : [];
+}
+
+function sanitizeObject(value) {
+  return value && typeof value === "object" ? value : {};
+}
+
+function openDb() {
+  if (!supportsIndexedDb()) return Promise.resolve(null);
+  if (dbPromise) return dbPromise;
+
+  dbPromise = new Promise((resolve, reject) => {
+    const request = globalThis.indexedDB.open(IMPORT_HISTORY_DB_NAME, IMPORT_HISTORY_DB_VERSION);
+
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(IMPORT_HISTORY_STORE)) {
+        const store = db.createObjectStore(IMPORT_HISTORY_STORE, {
+          keyPath: "id",
+          autoIncrement: true,
+        });
+        store.createIndex("createdAt", "createdAt", { unique: false });
+        store.createIndex("sourceType", "sourceType", { unique: false });
+        store.createIndex("fileName", "fileName", { unique: false });
+      }
+    };
+
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error || new Error("Failed to open import history database."));
+  });
+
+  return dbPromise;
+}
+
+function requestToPromise(request) {
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error || new Error("IndexedDB operation failed."));
+  });
+}
+
+function normalizeHistoryEntry(input = {}) {
+  const now = Date.now();
+  const createdAt = Number.isFinite(Number(input.createdAt)) ? Number(input.createdAt) : now;
+  const createdAtIso = new Date(createdAt).toISOString();
+
+  const issues = sanitizeArray(input.issues).map((issue) => ({
+    severity: sanitizeText(issue?.severity || "info"),
+    message: sanitizeText(issue?.message || ""),
+  }));
+
+  const notes = sanitizeArray(input.notes).filter((note) => typeof note === "string");
+  const unknownTailwindTokens = sanitizeArray(input.unknownTailwindTokens).filter(
+    (token) => typeof token === "string"
+  );
+  const appliedRules = sanitizeArray(input.appliedRules).filter((rule) => typeof rule === "string");
+
+  return {
+    createdAt,
+    createdAtIso,
+    sourceType: sanitizeText(input.sourceType || "unknown"),
+    importMode: sanitizeText(input.importMode || "convert-only"),
+    source: sanitizeText(input.source || "unknown"),
+    type: sanitizeText(input.type || "unknown"),
+    fileName: sanitizeText(input.fileName || ""),
+    fileSize: Number.isFinite(Number(input.fileSize)) ? Number(input.fileSize) : 0,
+    mimeType: sanitizeText(input.mimeType || ""),
+    fileContents: sanitizeText(input.fileContents || ""),
+    convertedHtml: sanitizeText(input.convertedHtml || ""),
+    confidence: Number.isFinite(Number(input.confidence)) ? Number(input.confidence) : 0,
+    notes,
+    issues,
+    coverage: sanitizeObject(input.coverage),
+    unknownTailwindTokens,
+    appliedRules,
+    importStyleSheetInjected: Boolean(input.importStyleSheetInjected),
+    templateName: sanitizeText(input.templateName || ""),
+    designPatch: sanitizeObject(input.designPatch),
+    meta: sanitizeObject(input.meta),
+    resultSnapshot: sanitizeObject(input.resultSnapshot),
+  };
+}
+
+export async function saveLiveImportHistory(input = {}) {
+  const db = await openDb();
+  if (!db) return null;
+
+  const entry = normalizeHistoryEntry(input);
+  const tx = db.transaction(IMPORT_HISTORY_STORE, "readwrite");
+  const store = tx.objectStore(IMPORT_HISTORY_STORE);
+  const id = await requestToPromise(store.add(entry));
+
+  return { id, ...entry };
+}
+
+export async function listLiveImportHistory(options = {}) {
+  const db = await openDb();
+  if (!db) return [];
+
+  const limit = Number.isFinite(Number(options.limit)) ? Math.max(1, Number(options.limit)) : 30;
+  const tx = db.transaction(IMPORT_HISTORY_STORE, "readonly");
+  const store = tx.objectStore(IMPORT_HISTORY_STORE);
+  const items = (await requestToPromise(store.getAll())) || [];
+
+  return items
+    .sort((a, b) => Number(b?.createdAt || 0) - Number(a?.createdAt || 0))
+    .slice(0, limit);
+}
+
+export async function getLiveImportHistoryEntry(id) {
+  const db = await openDb();
+  if (!db) return null;
+
+  const parsedId = Number(id);
+  if (!Number.isFinite(parsedId)) return null;
+
+  const tx = db.transaction(IMPORT_HISTORY_STORE, "readonly");
+  const store = tx.objectStore(IMPORT_HISTORY_STORE);
+  const entry = await requestToPromise(store.get(parsedId));
+  return entry || null;
+}
+
+export async function clearLiveImportHistory() {
+  const db = await openDb();
+  if (!db) return;
+
+  const tx = db.transaction(IMPORT_HISTORY_STORE, "readwrite");
+  const store = tx.objectStore(IMPORT_HISTORY_STORE);
+  await requestToPromise(store.clear());
+}

package/src/js/pds-live-manager/import-service.js

@@ -0,0 +1,255 @@
+import { createImportResult } from "./import-contract.js";
+import {
+  buildTemplateImportResult,
+  listLiveTemplates,
+  loadLiveTemplateCatalog,
+} from "./template-service.js";
+import {
+  convertTailwindHtmlToPds,
+  convertBrandGuidelinesToPatch,
+  inferPdsDesignFromHtml,
+  convertHtmlLikeInputToPdsTemplate,
+} from "./conversion-service.js";
+import { validateDesign } from "../pds-core/pds-generator.js";
+
+const IMPORT_MODE_CONVERT_ONLY = "convert-only";
+const IMPORT_MODE_ADOPT_AND_CONVERT = "adopt-design-and-convert";
+
+function normalizeImportMode(value) {
+  const normalized = String(value || "").trim().toLowerCase();
+  if (normalized === IMPORT_MODE_ADOPT_AND_CONVERT) return IMPORT_MODE_ADOPT_AND_CONVERT;
+  return IMPORT_MODE_CONVERT_ONLY;
+}
+
+function combineIssues(...issueLists) {
+  const items = issueLists.flat().filter(Boolean);
+  if (!items.length) return [];
+  const seen = new Set();
+  return items.filter((issue) => {
+    const key = `${String(issue?.severity || "info")}::${String(issue?.path || "")}::${String(issue?.message || "")}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+function combineConfidence(values = []) {
+  const list = values.map((value) => Number(value)).filter((value) => Number.isFinite(value));
+  if (!list.length) return 0;
+  return Math.max(0, Math.min(1, list.reduce((sum, value) => sum + value, 0) / list.length));
+}
+
+function mergeMeta(base = {}, extra = {}) {
+  return {
+    ...(base && typeof base === "object" ? base : {}),
+    ...(extra && typeof extra === "object" ? extra : {}),
+  };
+}
+
+function deepMerge(target = {}, source = {}) {
+  if (!source || typeof source !== "object") return target;
+  const out = Array.isArray(target) ? [...target] : { ...target };
+  Object.entries(source).forEach(([key, value]) => {
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      out[key] = deepMerge(
+        out[key] && typeof out[key] === "object" ? out[key] : {},
+        value
+      );
+    } else {
+      out[key] = value;
+    }
+  });
+  return out;
+}
+
+function cloneValue(value) {
+  if (typeof structuredClone === "function") {
+    try {
+      return structuredClone(value);
+    } catch (error) {}
+  }
+  return JSON.parse(JSON.stringify(value || {}));
+}
+
+function normalizeValidationIssue(issue = {}) {
+  const ratio = Number(issue?.ratio);
+  const min = Number(issue?.min);
+  const ratioLabel = Number.isFinite(ratio) ? ratio.toFixed(2) : "n/a";
+  const minLabel = Number.isFinite(min) ? min.toFixed(2) : "n/a";
+  return {
+    severity: "error",
+    path: String(issue?.path || "/colors"),
+    message: `${String(issue?.message || "Color contrast validation failed.")} (ratio=${ratioLabel}, required=${minLabel})`,
+  };
+}
+
+function validateAdoptedDesignPatch(baseDesign = {}, designPatch = {}, options = {}) {
+  const patchKeys = designPatch && typeof designPatch === "object" ? Object.keys(designPatch) : [];
+  if (!patchKeys.length) {
+    return { ok: true, blocked: false, issues: [], report: { ok: true, issues: [] } };
+  }
+
+  const minContrast = Number(options.minContrast);
+  const threshold = Number.isFinite(minContrast) ? minContrast : 4.5;
+  const mergedDesign = deepMerge(cloneValue(baseDesign || {}), cloneValue(designPatch || {}));
+  const report = validateDesign(mergedDesign, {
+    minContrast: threshold,
+    minMutedContrast: 3,
+    extendedChecks: true,
+  });
+  const issues = Array.isArray(report?.issues)
+    ? report.issues.map((issue) => normalizeValidationIssue(issue))
+    : [];
+
+  return {
+    ok: Boolean(report?.ok),
+    blocked: !report?.ok,
+    issues,
+    report: {
+      ok: Boolean(report?.ok),
+      minContrast: threshold,
+      issues: Array.isArray(report?.issues) ? report.issues : [],
+    },
+  };
+}
+
+export function getLiveImportSources() {
+  return [
+    { id: "template", name: "Templates" },
+    { id: "tailwind-html", name: "Tailwind HTML" },
+    { id: "brand-guidelines", name: "Brand Guidelines" },
+    { id: "figma-json", name: "Figma Tokens JSON (planned)" },
+    { id: "ux-pilot", name: "UX Pilot (planned)" },
+    { id: "google-stitch", name: "Google Stitch (planned)" },
+  ];
+}
+
+export async function runLiveImport(request = {}) {
+  const sourceType = String(request.sourceType || "");
+  const importMode = normalizeImportMode(request.importMode);
+  const input = String(request.input || "");
+  const config = request.config || null;
+
+  if (sourceType === "template") {
+    const result = buildTemplateImportResult(request.templateId, request);
+    result.meta = mergeMeta(result.meta, { importMode });
+    return result;
+  }
+
+  if (sourceType === "tailwind-html") {
+    const conversionResult = convertTailwindHtmlToPds({ html: input, config });
+    if (importMode === IMPORT_MODE_CONVERT_ONLY) {
+      conversionResult.meta = mergeMeta(conversionResult.meta, { importMode });
+      return conversionResult;
+    }
+
+    const inferred = inferPdsDesignFromHtml({ html: input, config, sourceType });
+    const validation = validateAdoptedDesignPatch(config || {}, inferred.designPatch || {});
+    const safeDesignPatch = validation.blocked ? {} : inferred.designPatch;
+    const validationIssues = validation.blocked
+      ? [
+          {
+            severity: "error",
+            path: "/colors",
+            message: "Import blocked: inferred design patch failed accessibility contrast validation.",
+          },
+          ...validation.issues,
+        ]
+      : [];
+
+    return createImportResult({
+      source: conversionResult.source || "tailwind",
+      type: sourceType,
+      confidence: combineConfidence([conversionResult.confidence, inferred.confidence]),
+      issues: combineIssues(conversionResult.issues, inferred.issues, validationIssues),
+      template: conversionResult.template,
+      designPatch: safeDesignPatch,
+      meta: mergeMeta(conversionResult.meta, {
+        importMode,
+        inference: inferred.meta,
+        validation: validation.report,
+        validationBlocked: validation.blocked,
+      }),
+    });
+  }
+
+  if (sourceType === "brand-guidelines") {
+    const templateResult = convertHtmlLikeInputToPdsTemplate({ input, sourceType, config });
+    if (importMode === IMPORT_MODE_CONVERT_ONLY) {
+      templateResult.meta = mergeMeta(templateResult.meta, { importMode });
+      return templateResult;
+    }
+
+    const heuristicPatch = convertBrandGuidelinesToPatch({ text: input });
+    const inferred = inferPdsDesignFromHtml({ html: input, config, sourceType });
+    const designPatch = {
+      ...(heuristicPatch.designPatch && typeof heuristicPatch.designPatch === "object"
+        ? heuristicPatch.designPatch
+        : {}),
+      ...(inferred.designPatch && typeof inferred.designPatch === "object" ? inferred.designPatch : {}),
+    };
+    const validation = validateAdoptedDesignPatch(config || {}, designPatch || {});
+    const safeDesignPatch = validation.blocked ? {} : designPatch;
+    const validationIssues = validation.blocked
+      ? [
+          {
+            severity: "error",
+            path: "/colors",
+            message: "Import blocked: inferred design patch failed accessibility contrast validation.",
+          },
+          ...validation.issues,
+        ]
+      : [];
+
+    return createImportResult({
+      source: "brand",
+      type: sourceType,
+      confidence: combineConfidence([
+        templateResult.confidence,
+        heuristicPatch.confidence,
+        inferred.confidence,
+      ]),
+      issues: combineIssues(
+        templateResult.issues,
+        heuristicPatch.issues,
+        inferred.issues,
+        validationIssues
+      ),
+      template: templateResult.template,
+      designPatch: safeDesignPatch,
+      meta: mergeMeta(templateResult.meta, {
+        importMode,
+        inference: inferred.meta,
+        brandHeuristics: heuristicPatch.meta,
+        validation: validation.report,
+        validationBlocked: validation.blocked,
+      }),
+    });
+  }
+
+  if (sourceType === "figma-json" || sourceType === "ux-pilot" || sourceType === "google-stitch") {
+    return createImportResult({
+      source: sourceType,
+      type: sourceType,
+      confidence: 0,
+      issues: [
+        {
+          severity: "info",
+          message: `${sourceType} adapter is not implemented yet in this phase.`,
+        },
+      ],
+      meta: { importMode },
+    });
+  }
+
+  return createImportResult({
+    source: sourceType || "unknown",
+    type: "unknown",
+    confidence: 0,
+    issues: [{ severity: "error", message: "Unsupported import source type." }],
+    meta: { importMode },
+  });
+}
+
+export { listLiveTemplates };
+export { loadLiveTemplateCatalog };