codeplay-common 4.8.2 → 4.8.4

package/README.md

@@ -33,6 +33,21 @@ If `onesignal-cordova-plugin` is declared or installed, the pre-build script war
 runs `npm uninstall onesignal-cordova-plugin`. It stops if removal fails or active
 package imports remain. Legacy OneSignal patching and helper downloads are disabled.
 
+## Screenshot data
+
+Shared screenshot helpers are installed into `scripts/screenshot/` and updated with
+the package. App-specific data is not bundled with the package.
+During an upgrade, cleanup removes only the two legacy helpers `frame-samples.js`
+and `background-decorations.js` from `scripts-screenshot/screenshot/`, preserving
+the folder, JSON data, and other app files.
+
+`take-screen-image.js` creates `scripts-screenshot/screenshot/` and empty
+`screenshot-copy.json` and `screenshot-info.json` files when needed. Existing files
+are preserved during initialization, package installation, and cleanup. Capture
+updates screenshot information; the AI text-generation workflow fills screenshot
+copy. `--delete` removes matching records, and screenshot runs reconcile records
+against the captured images (except dry runs and `--refresh-info`).
+
 ## Agent instructions
 
 Agent instructions are updated during `npm run build`, not during npm installation.

package/files/take-screen-image.js

@@ -26,12 +26,12 @@ const path = require('node:path');
 const readline = require('node:readline/promises');
 const { spawn, spawnSync } = require('node:child_process');
 const sharp = require('sharp');
-const { frameStyles, createFrameSamples } = require('./scripts-screenshot/screenshot/frame-samples.js');
+const { frameStyles, createFrameSamples } = require('./scripts/screenshot/frame-samples.js');
 const {
   getDecorationSeed,
   createPromotionalDecorations,
   getPromotionalDecorationStyles,
-} = require('./scripts-screenshot/screenshot/background-decorations.js');
+} = require('./scripts/screenshot/background-decorations.js');
 
 const screenshotDirectory = path.join(__dirname, 'Auto-Screenshot', 'Store-image-Screenshot');
 const inFrameDirectory = path.join(__dirname, 'Auto-Screenshot', 'Store-image-Frame');
@@ -727,6 +727,20 @@ function deleteMatchingImages(input) {
   for (const filePath of deletedFiles) console.log(`Deleted: ${filePath}`);
 }
 
+function initializeScreenshotData() {
+  for (const [filePath, version] of [
+    [screenshotCopyPath, 1],
+    [screenshotInfoPath, 2],
+  ]) {
+    fs.mkdirSync(path.dirname(filePath), { recursive: true });
+    try {
+      fs.writeFileSync(filePath, `${JSON.stringify({ version, screenshots: {} }, null, 2)}\n`, { flag: 'wx' });
+    } catch (error) {
+      if (error.code !== 'EEXIST') throw error;
+    }
+  }
+}
+
 function readScreenshotRecordSource(filePath) {
   if (!fs.existsSync(filePath)) return { screenshots: {} };
 
@@ -913,21 +927,21 @@ async function getWebViewTarget(localPort) {
     && target.url !== 'about:blank'
   ));
 
-  const visibleTarget = pageTargets.find((target) => {
+  for (const target of pageTargets) {
+    const client = new CdpClient(target.webSocketDebuggerUrl);
     try {
-      return JSON.parse(target.description || '{}').visible !== false;
+      await client.connect();
+      const details = await getPageDetails(client);
+      if (details.width > 0 && details.height > 0 && details.hasAppPage) {
+        return target;
+      }
     } catch {
-      return true;
+      // A target may close while discovering the active app WebView.
+    } finally {
+      client.close();
     }
-  });
-
-  const target = visibleTarget || pageTargets[0];
-
-  if (!target) {
-    throw new Error('No rendered page was found in the app WebView.');
   }
-
-  return target;
+  throw new Error('No visible Framework7 app page was found. Open the app page and retry; ad WebViews cannot be captured.');
 }
 
 async function getPageDetails(client) {
@@ -938,6 +952,14 @@ async function getPageDetails(client) {
       width: innerWidth,
       height: innerHeight,
       devicePixelRatio: devicePixelRatio,
+      hasAppPage: [...document.querySelectorAll('.view .page')].some((page) => {
+        const bounds = page.getBoundingClientRect();
+        const style = getComputedStyle(page);
+        return style.display !== 'none' && style.visibility !== 'hidden'
+          && bounds.width > 0 && bounds.height > 0
+          && bounds.bottom > 0 && bounds.right > 0
+          && bounds.top < innerHeight && bounds.left < innerWidth;
+      }),
       readyState: document.readyState
     })`,
     returnByValue: true,
@@ -1027,7 +1049,7 @@ async function capturePageSnapshot(client) {
           ? element.closest('label, .item-content, .input')
           : element;
         const preferredLabel = labelRoot?.querySelector(
-          '.item-title, .button-label, strong, .dialog-button-text',
+          '.item-title, .button-label, strong, .dialog-button-text, .homeboxtitle',
         );
         const textRoot = preferredLabel || labelRoot || element;
         const clone = textRoot.cloneNode(true);
@@ -1051,7 +1073,7 @@ async function capturePageSnapshot(client) {
         if (!root) return [];
         const records = [];
         const seen = new Set();
-        const selector = 'button, a.button, [role="button"], .list-button, .dialog-button';
+        const selector = 'button, .button, [role="button"], .list-button, .dialog-button';
         for (const element of root.querySelectorAll(selector)) {
           if (!isVisible(element)) continue;
           const label = getElementLabel(element);
@@ -1123,6 +1145,9 @@ async function capturePageSnapshot(client) {
       const activePage = visiblePages.find((page) => page.classList.contains('page-current'))
         || visiblePages[visiblePages.length - 1]
         || null;
+      if (!activePage) {
+        throw new Error('No visible app page was found; screenshot information was not captured.');
+      }
       const overlaySelector = [
         '.dialog.modal-in',
         '.popup.modal-in',
@@ -1147,12 +1172,12 @@ async function capturePageSnapshot(client) {
       ].join(',');
       const pageHeadings = collectUiText(
         activePage,
-        'h1, h2, h3, .navbar .title, .t-section-heading, .headTitle',
+        'h1, h2, h3, .navbar .title, .t-section-heading, .headTitle, .home-hero-title, .home-section-title',
         10,
       );
       const pageControls = collectUiText(
         activePage,
-        'button, [role="button"], label, .item-title, .item-subtitle, .list-button, option:checked',
+        'button, [role="button"], label, .item-title, .item-subtitle, .list-button, option:checked, .homeboxtitle',
         30,
       );
       const overlayText = collectUiText(activeOverlay, textSelector, 35);
@@ -1170,6 +1195,8 @@ async function capturePageSnapshot(client) {
         params: Object.keys(f7Route.params || {}),
         query: Object.keys(f7Route.query || {}),
       } : null;
+      const themeAttribute = document.documentElement.getAttribute('data-theme')
+        || document.body.getAttribute('data-theme');
       const screenInfo = {
         documentTitle: normalizeUiText(document.title),
         route: {
@@ -1181,16 +1208,16 @@ async function capturePageSnapshot(client) {
           dataName: activePage.getAttribute('data-name') || '',
           id: activePage.id || '',
           classes: getStableClasses(activePage),
-          navbarTitle: collectUiText(activePage, '.navbar .title', 1)[0] || '',
+          navbarTitle: collectUiText(activePage, '.navbar .title, .navbar .home-brand-text', 1)[0] || '',
           headings: pageHeadings,
           sections: collectUiText(
             activePage,
-            'h1, h2, h3, legend, .t-section-heading, .t-output-choice-heading, .headTitle',
+            'h1, h2, h3, legend, .t-section-heading, .t-output-choice-heading, .headTitle, .home-hero-title, .home-section-title',
             20,
           ),
           descriptions: collectUiText(
             activePage,
-            'p, small, .item-subtitle, .item-after, .t-settings-footnote',
+            'p, small, .item-subtitle, .item-after, .t-settings-footnote, .home-hero-kicker, .home-hero-subtitle, .home-stat, .homebox-meta',
             30,
           ),
           controls: pageControls,
@@ -1218,10 +1245,12 @@ async function capturePageSnapshot(client) {
           )),
           inputs: overlayInputs,
         } : null,
-        theme: document.documentElement.classList.contains('theme-dark')
-          || document.body.classList.contains('theme-dark')
-          ? 'dark'
-          : 'light',
+        theme: themeAttribute === 'dark' || themeAttribute === 'light'
+          ? themeAttribute
+          : document.documentElement.classList.contains('theme-dark')
+            || document.body.classList.contains('theme-dark')
+            ? 'dark'
+            : 'light',
         viewport: {
           width: innerWidth,
           height: innerHeight,
@@ -3351,7 +3380,25 @@ async function captureFramedScreenshot(
   await client.send('Runtime.evaluate', {
     expression: `new Promise((resolve) => {
       const image = document.querySelector('img');
-      const ready = () => requestAnimationFrame(() => requestAnimationFrame(resolve));
+      const ready = () => requestAnimationFrame(() => {
+        const copy = document.querySelector('.promo-copy');
+        const device = document.querySelector('.device');
+        if (copy && device && window.innerHeight > window.innerWidth) {
+          const gap = Math.max(16, Math.min(40, window.innerHeight * 0.02));
+          const deviceTop = copy.getBoundingClientRect().bottom + gap;
+          const deviceBounds = device.getBoundingClientRect();
+          const availableHeight = window.innerHeight * 0.97 - deviceTop;
+          const availableWidth = window.innerWidth * 0.9;
+          const scale = Math.min(1, availableHeight / deviceBounds.height, availableWidth / deviceBounds.width);
+          if (scale > 0) {
+            device.style.top = deviceTop + 'px';
+            device.style.bottom = 'auto';
+            device.style.transformOrigin = 'top center';
+            device.style.transform = 'translateX(-50%) scale(' + scale + ')';
+          }
+        }
+        requestAnimationFrame(resolve);
+      });
       if (image.complete) ready();
       else {
         image.addEventListener('load', ready, { once: true });
@@ -3793,6 +3840,10 @@ async function main() {
 
   options = await getInteractiveOptions(options);
 
+  if (!options.dryRun) {
+    initializeScreenshotData();
+  }
+
   if (!options.dryRun && !options.refreshInfo) {
     reconcileScreenshotRecords();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeplay-common",
-  "version": "4.8.2",
+  "version": "4.8.4",
   "description": "Common build scripts and files",
   "scripts": {
 	"postinstall": "node scripts/sync-files.js",

package/scripts/sync-files.js

@@ -25,6 +25,8 @@ function copyFolderSync(source, destination) {
 
 // Copy all files from `common-build-files/files/` to the project root
 fs.readdirSync(commonBuildPath).forEach(file => {
+    // Never distribute or overwrite app-owned screenshot data.
+    if (file === "scripts-screenshot") return;
     const sourcePath = path.join(commonBuildPath, file);
     const destPath = path.join(projectRoot, file);
 

package/scripts/uninstall.js

@@ -70,7 +70,8 @@ filesInProject.forEach(file => {
 if (fs.existsSync(commonBuildPath)) {
     fs.readdirSync(commonBuildPath).forEach(file => {
         const destPath = path.join(projectRoot, file);
-        if (file === "scripts" || isAgentInstructionAsset(file)) {
+        // Screenshot data belongs to the app, including folders from older releases.
+        if (file === "scripts" || file === "scripts-screenshot" || isAgentInstructionAsset(file)) {
             return;
         }
         if (fs.existsSync(destPath)) {
@@ -88,6 +89,19 @@ if (fs.existsSync(commonBuildPath)) {
     });
 }
 
+for (const helperDirectory of [
+    path.join(projectRoot, "scripts", "screenshot"),
+    path.join(projectRoot, "scripts-screenshot", "screenshot")
+]) {
+    for (const helperName of ["frame-samples.js", "background-decorations.js"]) {
+        const helperPath = path.join(helperDirectory, helperName);
+        if (fs.existsSync(helperPath)) {
+            fs.unlinkSync(helperPath);
+            process.stdout.write(`🗑️ Removed file: ${helperPath}\n`);
+        }
+    }
+}
+
 if (fs.existsSync(baselineProfileSetupScript)) {
     try {
         fs.unlinkSync(baselineProfileSetupScript);

package/files/scripts-screenshot/screenshot/screenshot-copy.json

@@ -1,3 +0,0 @@
-{
-  
-}