screenshot-beautify 1.0.0 → 1.1.0

package/dist/index.js

@@ -4,7 +4,7 @@
 import { Command } from "commander";
 
 // src/beautify.ts
-import sharp5 from "sharp";
+import sharp4 from "sharp";
 
 // src/background.ts
 import sharp2 from "sharp";
@@ -164,16 +164,18 @@ async function createFrame(options) {
   const {
     width,
     height,
-    titleBarHeight = 32,
-    cornerRadius = 10,
-    buttonSize = 12
+    titleBarHeight = 40,
+    cornerRadius = 12,
+    buttonSize = 14
   } = options;
   const buttonY = titleBarHeight / 2;
-  const buttonSpacing = 20;
-  const firstButtonX = 16;
-  const closeColor = "#FF5F56";
-  const minimizeColor = "#FFBD2E";
-  const maximizeColor = "#27C93F";
+  const buttonSpacing = 22;
+  const firstButtonX = 20;
+  const closeColor = "#FF5F57";
+  const minimizeColor = "#FEBC2E";
+  const maximizeColor = "#28C840";
+  const titleBarColor = "#3C3C3C";
+  const contentBgColor = "#2D2D2D";
   const svg = `
     <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
       <defs>
@@ -183,14 +185,14 @@ async function createFrame(options) {
       </defs>
 
       <!-- Window background with rounded corners -->
-      <rect x="0" y="0" width="${width}" height="${height}" rx="${cornerRadius}" ry="${cornerRadius}" fill="#FFFFFF" />
+      <rect x="0" y="0" width="${width}" height="${height}" rx="${cornerRadius}" ry="${cornerRadius}" fill="${contentBgColor}" />
 
       <!-- Title bar -->
-      <rect x="0" y="0" width="${width}" height="${titleBarHeight}" rx="${cornerRadius}" ry="${cornerRadius}" fill="#E8E8E8" />
+      <rect x="0" y="0" width="${width}" height="${titleBarHeight}" rx="${cornerRadius}" ry="${cornerRadius}" fill="${titleBarColor}" />
       <!-- Fill bottom corners of title bar -->
-      <rect x="0" y="${cornerRadius}" width="${width}" height="${titleBarHeight - cornerRadius}" fill="#E8E8E8" />
+      <rect x="0" y="${cornerRadius}" width="${width}" height="${titleBarHeight - cornerRadius}" fill="${titleBarColor}" />
 
-      <!-- Window buttons -->
+      <!-- Window buttons with subtle inner shadows for depth -->
       <circle cx="${firstButtonX}" cy="${buttonY}" r="${buttonSize / 2}" fill="${closeColor}" />
       <circle cx="${firstButtonX + buttonSpacing}" cy="${buttonY}" r="${buttonSize / 2}" fill="${minimizeColor}" />
       <circle cx="${firstButtonX + buttonSpacing * 2}" cy="${buttonY}" r="${buttonSize / 2}" fill="${maximizeColor}" />
@@ -199,50 +201,18 @@ async function createFrame(options) {
   return sharp3(Buffer.from(svg)).png().toBuffer();
 }
 
-// src/shadow.ts
-import sharp4 from "sharp";
-async function createShadow(options) {
-  const {
-    width,
-    height,
-    blur = 30,
-    opacity = 0.5,
-    cornerRadius = 10
-  } = options;
-  const shadowWidth = width + blur;
-  const shadowHeight = height + blur;
-  const offsetForSize = blur / 2;
-  const svg = `
-    <svg width="${shadowWidth}" height="${shadowHeight}" xmlns="http://www.w3.org/2000/svg">
-      <rect
-        x="${offsetForSize}"
-        y="${offsetForSize}"
-        width="${width}"
-        height="${height}"
-        rx="${cornerRadius}"
-        ry="${cornerRadius}"
-        fill="rgba(0, 0, 0, ${opacity})"
-      />
-    </svg>
-  `;
-  return sharp4(Buffer.from(svg)).blur(blur).png().toBuffer();
-}
-
 // src/beautify.ts
 async function beautify(inputPath, outputPath, options = {}) {
   const {
     padding = 80,
-    cornerRadius = 10,
-    titleBarHeight = 32,
-    shadowBlur = 30,
-    shadowOffsetX = 0,
-    shadowOffsetY = 20,
+    cornerRadius = 12,
+    titleBarHeight = 40,
     backgroundImage,
     backgroundPreset,
     gradientStart = "#2d3436",
     gradientEnd = "#636e72"
   } = options;
-  const inputImage = sharp5(inputPath);
+  const inputImage = sharp4(inputPath);
   const metadata = await inputImage.metadata();
   if (!metadata.width || !metadata.height) {
     throw new Error("Could not determine image dimensions");
@@ -251,11 +221,8 @@ async function beautify(inputPath, outputPath, options = {}) {
   const imgHeight = metadata.height;
   const framedWidth = imgWidth;
   const framedHeight = imgHeight + titleBarHeight;
-  const totalWidth = framedWidth + padding * 2;
-  const totalHeight = framedHeight + padding * 2;
-  const shadowPadding = shadowBlur * 2 + Math.abs(shadowOffsetY);
-  const canvasWidth = totalWidth + shadowPadding;
-  const canvasHeight = totalHeight + shadowPadding;
+  const canvasWidth = framedWidth + padding * 2;
+  const canvasHeight = framedHeight + padding * 2;
   const background = await createBackground({
     width: canvasWidth,
     height: canvasHeight,
@@ -270,16 +237,8 @@ async function beautify(inputPath, outputPath, options = {}) {
     titleBarHeight,
     cornerRadius
   });
-  const shadow = await createShadow({
-    width: framedWidth,
-    height: framedHeight,
-    blur: shadowBlur,
-    cornerRadius
-  });
-  const frameX = padding + shadowPadding / 2;
-  const frameY = padding + shadowPadding / 2;
-  const shadowX = frameX + shadowOffsetX - shadowBlur / 2;
-  const shadowY = frameY + shadowOffsetY - shadowBlur / 2;
+  const frameX = padding;
+  const frameY = padding;
   const screenshotX = frameX;
   const screenshotY = frameY + titleBarHeight;
   const cornerMask = Buffer.from(`
@@ -298,19 +257,13 @@ async function beautify(inputPath, outputPath, options = {}) {
       <rect x="${imgWidth - cornerRadius}" y="0" width="${cornerRadius}" height="${cornerRadius}" fill="white"/>
     </svg>
   `);
-  const roundedScreenshot = await sharp5(inputPath).ensureAlpha().composite([
+  const roundedScreenshot = await sharp4(inputPath).ensureAlpha().composite([
     {
-      input: await sharp5(cornerMask).png().toBuffer(),
+      input: await sharp4(cornerMask).png().toBuffer(),
       blend: "dest-in"
     }
   ]).png().toBuffer();
-  await sharp5(background).composite([
-    // Shadow layer
-    {
-      input: shadow,
-      left: Math.round(shadowX),
-      top: Math.round(shadowY)
-    },
+  await sharp4(background).composite([
     // Window frame
     {
       input: frame,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "screenshot-beautify",
-  "version": "1.0.0",
-  "description": "CLI tool to beautify screenshots with window frames, backgrounds, and shadows",
+  "version": "1.1.0",
+  "description": "CLI tool to beautify screenshots with macOS-style window frames and gradient backgrounds",
   "type": "module",
   "main": "dist/index.js",
   "bin": {
@@ -21,7 +21,8 @@
     "cli",
     "image",
     "frame",
-    "shadow"
+    "macos",
+    "gradient"
   ],
   "author": "",
   "license": "MIT",