npm - screencraft - Versions diffs - 0.1.0 - Mend

screencraft 0.1.0

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 (40) hide show

package/.claude/settings.local.json +30 -0
package/.env.example +3 -0
package/MCP_README.md +200 -0
package/README.md +148 -0
package/bin/screencraft.js +61 -0
package/package.json +31 -0
package/src/auth/keystore.js +148 -0
package/src/commands/init.js +119 -0
package/src/commands/launch.js +405 -0
package/src/detectors/detectBrand.js +1222 -0
package/src/detectors/simulator.js +317 -0
package/src/generators/analyzeStyleReference.js +471 -0
package/src/generators/compositePSD.js +682 -0
package/src/generators/copy.js +147 -0
package/src/mcp/index.js +394 -0
package/src/pipeline/aeSwap.js +369 -0
package/src/pipeline/download.js +32 -0
package/src/pipeline/queue.js +101 -0
package/src/server/index.js +627 -0
package/src/server/public/app.js +738 -0
package/src/server/public/index.html +255 -0
package/src/server/public/style.css +751 -0
package/src/server/session.js +36 -0
package/templates/ae/(Footage)/Assets/This Hip-Hop Upbeat (Short version).wav +0 -0
package/templates/ae/(Footage)/Assets/screen_01_raw.png +0 -0
package/templates/ae/(Footage)/Assets/screen_02_raw.png +0 -0
package/templates/ae/(Footage)/Assets/screen_03_raw.png +0 -0
package/templates/ae/(Footage)/Assets/screen_04_raw.png +0 -0
package/templates/ae/(Footage)/Assets/screen_05_raw.png +0 -0
package/templates/ae/(Footage)/Assets/screen_06_raw.png +0 -0
package/templates/ae/Motion Forge Test 1.0 (converted).aep +0 -0
package/templates/ae_swap.jsx +284 -0
package/templates/layouts/minimal.psd +0 -0
package/templates/screencraft.config.example.js +165 -0
package/test/output/layout_test.png +0 -0
package/test/output/style_profile.json +64 -0
package/test/reference.png +0 -0
package/test/test_brand.js +69 -0
package/test/test_psd.js +83 -0
package/test/test_style_analysis.js +114 -0

package/src/server/public/index.html ADDED Viewed

@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ScreenCraft</title>
+  <link rel="stylesheet" href="/style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div class="app">
+    <!-- Logo -->
+    <div class="logo">
+      <h1><span class="diamond">&#9670;</span>ScreenCraft</h1>
+      <p>App Store launch kit generator</p>
+    </div>
+    <!-- Progress bar -->
+    <div class="progress-bar" id="progressBar">
+      <div class="seg" data-step="0"></div>
+      <div class="seg" data-step="1"></div>
+      <div class="seg" data-step="2"></div>
+      <div class="seg" data-step="3"></div>
+      <div class="seg" data-step="4"></div>
+      <div class="seg" data-step="5"></div>
+      <div class="seg" data-step="6"></div>
+      <div class="seg" data-step="7"></div>
+    </div>
+    <!-- Step 0: Project Path -->
+    <div class="step active" id="step-0">
+      <div class="step-header">
+        <div class="step-number">1</div>
+        <h2>Project Directory</h2>
+      </div>
+      <div class="card">
+        <p class="text-dim text-sm mb-16">Enter the path to your app project. ScreenCraft will detect your framework, brand colors, and assets.</p>
+        <input type="text" class="full" id="projectPath" placeholder="/Users/you/projects/my-app" autofocus>
+      </div>
+      <div class="btn-row">
+        <button class="btn btn-primary" onclick="detectProject()">Detect Project</button>
+      </div>
+    </div>
+    <!-- Step 1: Brand Detection -->
+    <div class="step" id="step-1">
+      <div class="step-header">
+        <div class="step-number">2</div>
+        <h2>Brand Detection</h2>
+        <span class="step-sub" id="frameworkBadge"></span>
+      </div>
+      <div class="card">
+        <div class="card-row">
+          <span class="label">App Name</span>
+          <input type="text" id="brandAppName" style="text-align:right; width: 200px;">
+        </div>
+        <div class="card-row">
+          <span class="label">Framework</span>
+          <span class="value" id="brandFramework"></span>
+        </div>
+        <div class="card-row">
+          <span class="label">Icon</span>
+          <span class="value" id="brandIconStatus"></span>
+        </div>
+        <div class="card-row">
+          <span class="label">Font</span>
+          <span class="value" id="brandFont"></span>
+        </div>
+      </div>
+      <div class="card">
+        <p class="text-dim text-sm">Click a swatch to change the color</p>
+        <div class="color-grid">
+          <div class="color-swatch">
+            <div class="swatch" id="swatchPrimary">
+              <input type="color" id="colorPrimary" onchange="updateColor('primary', this.value)">
+            </div>
+            <div class="name">Primary</div>
+            <div class="hex" id="hexPrimary"></div>
+          </div>
+          <div class="color-swatch">
+            <div class="swatch" id="swatchSecondary">
+              <input type="color" id="colorSecondary" onchange="updateColor('secondary', this.value)">
+            </div>
+            <div class="name">Secondary</div>
+            <div class="hex" id="hexSecondary"></div>
+          </div>
+          <div class="color-swatch">
+            <div class="swatch" id="swatchAccent">
+              <input type="color" id="colorAccent" onchange="updateColor('accent', this.value)">
+            </div>
+            <div class="name">Accent</div>
+            <div class="hex" id="hexAccent"></div>
+          </div>
+          <div class="color-swatch">
+            <div class="swatch" id="swatchBackground">
+              <input type="color" id="colorBackground" onchange="updateColor('background', this.value)">
+            </div>
+            <div class="name">Background</div>
+            <div class="hex" id="hexBackground"></div>
+          </div>
+        </div>
+      </div>
+      <div id="brandIconPreview" style="display:none" class="card text-center">
+        <img id="iconImg" style="width:80px; height:80px; border-radius:18px; margin: 8px auto; display:block;">
+      </div>
+      <div class="btn-row">
+        <button class="btn btn-secondary" onclick="goStep(0)">Back</button>
+        <button class="btn btn-primary" onclick="loadTemplates()">Next: Template</button>
+      </div>
+    </div>
+    <!-- Step 2: Template Selection -->
+    <div class="step" id="step-2">
+      <div class="step-header">
+        <div class="step-number">3</div>
+        <h2>Template</h2>
+        <span class="step-sub">Choose a layout style</span>
+      </div>
+      <div id="templateLoading" class="loading">
+        <div class="render-spinner"></div>
+        <span>Loading templates...</span>
+      </div>
+      <div class="template-grid" id="templateGrid" style="display:none"></div>
+      <div class="btn-row" id="templateBtns" style="display:none">
+        <button class="btn btn-secondary" onclick="goStep(1)">Back</button>
+        <button class="btn btn-primary" onclick="captureScreenshots()">Next: Screenshots</button>
+      </div>
+    </div>
+    <!-- Step 3: Screenshots -->
+    <div class="step" id="step-3">
+      <div class="step-header">
+        <div class="step-number">4</div>
+        <h2>Screenshots</h2>
+        <span class="step-sub" id="screenshotCount"></span>
+      </div>
+      <div id="screenshotLoading" class="loading">
+        <div class="render-spinner"></div>
+        <span>Checking for screenshots...</span>
+      </div>
+      <!-- Simulator capture mode -->
+      <div id="captureMode" style="display:none">
+        <div class="card">
+          <p class="text-dim text-sm mb-16" id="captureInstructions">
+            Navigate your app in the Simulator, then click "Capture Screen" to take each screenshot. Up to 6 screens.
+          </p>
+          <div class="btn-row" style="margin-top:16px; justify-content: center;">
+            <button class="btn btn-primary" id="captureBtn" onclick="captureOne()">Capture Screen</button>
+          </div>
+        </div>
+        <div class="screenshot-grid" id="screenshotGrid" style="margin-top:16px"></div>
+      </div>
+      <!-- Manual mode (already loaded) -->
+      <div id="manualMode" style="display:none">
+        <div class="screenshot-grid" id="manualGrid"></div>
+      </div>
+      <div class="btn-row" id="screenshotBtns" style="display:none">
+        <button class="btn btn-secondary" onclick="goStep(2)">Back</button>
+        <button class="btn btn-primary" onclick="generateHeadlines()">Next: AI Headlines</button>
+      </div>
+    </div>
+    <!-- Step 4: Headlines -->
+    <div class="step" id="step-4">
+      <div class="step-header">
+        <div class="step-number">5</div>
+        <h2>Headlines</h2>
+        <span class="step-sub">Pick or customize for each screen</span>
+      </div>
+      <div id="headlineLoading" class="loading">
+        <div class="render-spinner"></div>
+        <span>Generating headline suggestions with AI...</span>
+      </div>
+      <div id="headlineEditor" style="display:none"></div>
+      <div id="headlineBtns" style="display:none">
+        <div class="headline-nav">
+          <button class="btn btn-secondary" id="headlinePrev" onclick="headlineNav(-1)">Previous</button>
+          <div class="headline-dots" id="headlineDots"></div>
+          <button class="btn btn-primary" id="headlineNext" onclick="headlineNav(1)">Next Screen</button>
+        </div>
+      </div>
+    </div>
+    <!-- Step 5: Preview -->
+    <div class="step" id="step-5">
+      <div class="step-header">
+        <div class="step-number">6</div>
+        <h2>Preview</h2>
+        <span class="step-sub">Review your App Store screenshots</span>
+      </div>
+      <div class="screenshot-grid" id="previewGrid"></div>
+      <div class="btn-row">
+        <button class="btn btn-secondary" onclick="goStep(4); currentHeadline = 0; showHeadline();">Edit Headlines</button>
+        <button class="btn btn-primary" onclick="checkLicense()">Generate Launch Kit</button>
+      </div>
+    </div>
+    <!-- Step 6: License -->
+    <div class="step" id="step-6">
+      <div class="step-header">
+        <div class="step-number">7</div>
+        <h2>License</h2>
+      </div>
+      <div class="card" id="licenseContent"></div>
+      <div class="btn-row" id="licenseBtns"></div>
+    </div>
+    <!-- Step 7: Render -->
+    <div class="step" id="step-7">
+      <div class="step-header">
+        <div class="step-number">8</div>
+        <h2>Generating</h2>
+      </div>
+      <div id="renderProgress" class="card render-progress">
+        <div class="render-spinner"></div>
+        <div class="render-bar"><div class="fill" id="renderFill" style="width:0%"></div></div>
+        <div class="render-message" id="renderMessage">Starting...</div>
+      </div>
+      <div id="outputSection" style="display:none">
+        <div class="step-header" style="margin-top:32px">
+          <h2>Launch Kit Ready</h2>
+        </div>
+        <div class="output-grid" id="outputGrid"></div>
+        <div class="btn-row">
+          <button class="btn btn-primary" onclick="openOutputFolder()">Open Folder</button>
+          <button class="btn btn-secondary" onclick="location.reload()">Start Over</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="/app.js"></script>
+</body>
+</html>