heroshot 0.0.2-alpha.1 → 0.0.2-alpha.3

package/README.md

@@ -0,0 +1,29 @@
+<p align="center">
+  <img src="assets/icon-128.svg" alt="heroshot logo" width="128" height="128">
+</p>
+
+<h1 align="center">heroshot</h1>
+
+<p align="center">
+  <strong>Keep your product screenshots always up to date.</strong><br>
+  No more stale images in docs, landing pages, or blog posts.
+</p>
+
+**How it works:**
+
+1. Run `npx heroshot` - opens a browser with a visual picker
+2. Click on elements you want to screenshot
+3. Close browser - screenshots are captured automatically
+
+**Why heroshot?**
+
+- **Visual picker** - Point and click to select elements, no DevTools needed
+- **Zero config** - No YAML to write, config is auto-generated
+- **Element-precise** - Capture specific UI components, not just full pages
+- **One command** - Regenerate all screenshots anytime your UI changes
+
+---
+
+[![npm](https://img.shields.io/npm/v/heroshot)](https://www.npmjs.com/package/heroshot)
+
+**Status:** Early alpha. [See releases](https://github.com/omachala/heroshot/releases) for current version.

package/dist/cli.js

@@ -14,7 +14,7 @@ import { chromium } from "playwright";
 import { existsSync, readFileSync, writeFileSync } from "fs";
 import path from "path";
 
-// src/config.ts
+// src/schema.ts
 import { z } from "zod";
 function generateUid() {
   return Math.random().toString(36).slice(2, 10);
@@ -23,41 +23,47 @@ var viewportSchema = z.object({
   width: z.number().int().positive().default(1280),
   height: z.number().int().positive().default(800)
 });
-var beautifySchema = z.object({
-  shadow: z.boolean().default(false),
-  radius: z.number().int().nonnegative().default(0),
-  background: z.string().default("transparent"),
-  padding: z.number().int().nonnegative().default(0)
-});
 var colorSchemeSchema = z.enum(["light", "dark", "both"]);
+var outputFormatSchema = z.enum(["png", "jpeg"]).default("png");
+var paddingSchema = z.object({
+  top: z.number().int().min(0).default(0),
+  right: z.number().int().min(0).default(0),
+  bottom: z.number().int().min(0).default(0),
+  left: z.number().int().min(0).default(0)
+});
+var scrollPositionSchema = z.object({
+  x: z.number().int().min(0).default(0),
+  y: z.number().int().min(0).default(0)
+});
 var screenshotSchema = z.object({
   id: z.string().min(1).default(generateUid),
   name: z.string().min(1),
   url: z.url(),
   filename: z.string().min(1),
   selector: z.string().optional(),
-  viewport: viewportSchema.optional(),
-  waitFor: z.string().optional(),
-  delay: z.number().int().nonnegative().optional(),
-  colorScheme: colorSchemeSchema.optional(),
-  beautify: beautifySchema.partial().optional()
+  /** Padding to expand capture area beyond element bounds */
+  padding: paddingSchema.optional(),
+  /** Scroll position to restore when capturing */
+  scroll: scrollPositionSchema.optional()
 });
 var browserSchema = z.object({
   viewport: viewportSchema.optional(),
-  colorScheme: colorSchemeSchema.optional(),
-  cdp: z.url().optional()
-  // Connect to existing Chrome
+  colorScheme: colorSchemeSchema.optional()
 });
 var configSchema = z.object({
-  // Output directory for screenshots (relative to config file)
+  /** Output directory for screenshots (relative to config file) */
   outputDirectory: z.string().default("."),
-  // Default browser settings
+  /** Output format for screenshots (png or jpeg) */
+  outputFormat: outputFormatSchema.optional(),
+  /** JPEG quality (1-100), only used when outputFormat is 'jpeg' */
+  jpegQuality: z.number().int().min(1).max(100).default(80),
+  /** Browser settings (viewport, colorScheme) */
   browser: browserSchema.optional(),
-  // Default beautification
-  beautify: beautifySchema.partial().optional(),
-  // Screenshot definitions
+  /** Screenshot definitions */
   screenshots: z.array(screenshotSchema).default([])
 });
+
+// src/config.ts
 function parseConfig(input) {
   return configSchema.parse(input);
 }
@@ -80,6 +86,23 @@ function saveConfig(configPath, config) {
   writeFileSync(configPath, content, "utf8");
 }
 
+// src/logger.ts
+var verboseEnabled = false;
+function setVerbose(enabled) {
+  verboseEnabled = enabled;
+}
+function log(message) {
+  console.log(message);
+}
+log.verbose = (message) => {
+  if (verboseEnabled) {
+    console.log(message);
+  }
+};
+log.error = (message) => {
+  console.error(message);
+};
+
 // src/browser.ts
 var PROFILE_DIR = path2.join(homedir(), ".heroshot", "browser-profile");
 var TOOLBAR_DIR = path2.join(import.meta.dirname, "..", "toolbar");
@@ -121,7 +144,8 @@ async function launchPersistentBrowser(options = {}) {
   throw new Error(message);
 }
 var exposedPages = /* @__PURE__ */ new WeakSet();
-async function injectToolbar(page, initialScreenshots, pendingJob, onEvent) {
+async function injectToolbar(page, options) {
+  const { screenshots, pendingJob, selectedId, sidebarVisible, onEvent } = options;
   if (!exposedPages.has(page)) {
     await page.exposeFunction("__heroshotEmit", (eventJson) => {
       const event = JSON.parse(eventJson);
@@ -129,8 +153,9 @@ async function injectToolbar(page, initialScreenshots, pendingJob, onEvent) {
     });
     exposedPages.add(page);
   }
-  const screenshotsJson = JSON.stringify(initialScreenshots);
+  const screenshotsJson = JSON.stringify(screenshots);
   const pendingJobJson = JSON.stringify(pendingJob);
+  const selectedIdJson = JSON.stringify(selectedId);
   const alreadyInitialized = await page.evaluate("globalThis.__heroshot?.initialized === true");
   if (alreadyInitialized) {
     await page.evaluate(`
@@ -145,6 +170,8 @@ async function injectToolbar(page, initialScreenshots, pendingJob, onEvent) {
       initialized: false,
       screenshots: ${screenshotsJson},
       pendingJob: ${pendingJobJson},
+      selectedId: ${selectedIdJson},
+      sidebarVisible: ${sidebarVisible},
       emit: function(event) {
         globalThis.__heroshotEmit(JSON.stringify(event));
       },
@@ -154,54 +181,64 @@ async function injectToolbar(page, initialScreenshots, pendingJob, onEvent) {
   const script = readFileSync2(scriptPath, "utf8");
   await page.addScriptTag({ content: script });
 }
-async function captureUrl(url, output) {
-  console.log(`Capturing: ${url}`);
-  const context = await launchPersistentBrowser({ headless: true });
-  const page = await context.newPage();
-  await page.goto(url, { waitUntil: "networkidle" });
-  await page.screenshot({ path: output, fullPage: false });
-  await context.close();
-  console.log(`Saved: ${output}`);
-}
 async function setup() {
-  console.log("Opening browser for setup...");
-  console.log(`Profile will be saved to: ${PROFILE_DIR}`);
-  console.log("");
+  log.verbose("Opening browser...");
+  log.verbose(`Profile: ${PROFILE_DIR}`);
   const configPath = getConfigPath();
   const config = loadConfig(configPath);
   const viewport = config.browser?.viewport ?? DEFAULT_VIEWPORT;
-  const allScreenshots = config.screenshots.map((screenshot) => ({
+  const allScreenshots = config.screenshots.map((screenshot, index) => ({
     id: screenshot.id,
     name: screenshot.name,
     url: screenshot.url,
-    selector: screenshot.selector ?? ""
+    selector: screenshot.selector ?? "",
+    // Use index as fallback createdAt for existing items (older items first)
+    createdAt: index,
+    ...screenshot.padding && { padding: screenshot.padding },
+    ...screenshot.scroll && { scroll: screenshot.scroll }
   }));
   const newlyAddedIds = /* @__PURE__ */ new Set();
   let pendingJob = null;
+  let selectedId = null;
+  let sidebarVisible = false;
   const context = await launchPersistentBrowser({ headless: false, viewport });
   const handleEvent = (event) => {
     switch (event.type) {
       case "screenshot-added": {
         allScreenshots.push(event.data);
         newlyAddedIds.add(event.data.id);
-        console.log(`
-Added: ${event.data.name} (${event.data.selector})`);
-        console.log(`URL: ${event.data.url}`);
+        log.verbose(`Added: ${event.data.name}`);
+        break;
+      }
+      case "screenshot-updated": {
+        const index = allScreenshots.findIndex((item) => item.id === event.data.id);
+        if (index !== -1) {
+          allScreenshots[index] = event.data;
+          newlyAddedIds.add(event.data.id);
+          log.verbose(`Renamed: ${event.data.name}`);
+        }
         break;
       }
       case "screenshot-selected": {
         const [currentPage] = context.pages();
         if (!currentPage) break;
+        selectedId = event.id;
+        sidebarVisible = true;
         const currentUrl = currentPage.url();
         if (currentUrl === event.url) {
-          pendingJob = { type: "highlight", selector: event.selector };
+          pendingJob = { type: "highlight", selector: event.selector, screenshotId: event.id };
           void currentPage.evaluate(`
             window.dispatchEvent(new CustomEvent('heroshot-job', {
-              detail: { type: 'highlight', selector: ${JSON.stringify(event.selector)} }
+              detail: { type: 'highlight', selector: ${JSON.stringify(event.selector)}, screenshotId: ${JSON.stringify(event.id)} }
             }));
           `);
         } else {
-          pendingJob = { type: "navigate-and-highlight", url: event.url, selector: event.selector };
+          pendingJob = {
+            type: "navigate-and-highlight",
+            url: event.url,
+            selector: event.selector,
+            screenshotId: event.id
+          };
           void currentPage.goto(event.url, { waitUntil: "domcontentloaded" });
         }
         break;
@@ -221,7 +258,13 @@ Added: ${event.data.name} (${event.data.selector})`);
       const url = page2.url();
       if (!url.startsWith("http")) return;
       try {
-        await injectToolbar(page2, allScreenshots, pendingJob, handleEvent);
+        await injectToolbar(page2, {
+          screenshots: allScreenshots,
+          pendingJob,
+          selectedId,
+          sidebarVisible,
+          onEvent: handleEvent
+        });
       } catch {
       }
     });
@@ -232,18 +275,13 @@ Added: ${event.data.name} (${event.data.selector})`);
   const existingPages = context.pages();
   const page = existingPages[0] ?? await context.newPage();
   setupPage(page);
-  console.log("Browser is open.");
-  console.log("1. Navigate to any site (e.g., https://example.com)");
-  console.log("2. Click the picker icon in the toolbar to select elements");
-  console.log("3. Click Done or close the browser when finished");
-  console.log("");
+  await page.goto("https://heroshot.sh/welcome", { waitUntil: "domcontentloaded" });
+  log("Pick elements to screenshot. Close browser or click Done when finished.");
   await new Promise((resolve) => {
     context.once("close", () => resolve());
   });
-  console.log("");
   if (newlyAddedIds.size > 0) {
     const latestConfig = loadConfig(configPath);
-    console.log("Saved screenshots:");
     for (const element of allScreenshots) {
       if (!newlyAddedIds.has(element.id)) continue;
       const filename = element.name.toLowerCase().replaceAll(/[^a-z0-9]+/g, "-").replaceAll(/(?:^-|-$)/g, "") + ".png";
@@ -252,22 +290,23 @@ Added: ${event.data.name} (${event.data.selector})`);
         name: element.name,
         url: element.url,
         selector: element.selector,
-        filename
+        filename,
+        ...element.padding && { padding: element.padding },
+        ...element.scroll && { scroll: element.scroll }
       };
       const existingIndex = latestConfig.screenshots.findIndex((item) => item.id === element.id);
       if (existingIndex === -1) {
         latestConfig.screenshots.push(screenshot);
-        console.log(`  + ${element.name}: ${element.selector}`);
+        log.verbose(`+ ${element.name}`);
       } else {
         latestConfig.screenshots[existingIndex] = screenshot;
-        console.log(`  ~ ${element.name}: ${element.selector} (updated)`);
+        log.verbose(`~ ${element.name} (updated)`);
       }
     }
     saveConfig(configPath, latestConfig);
-    console.log(`
-Config saved to: ${configPath}`);
+    log.verbose(`Config saved: ${configPath}`);
   }
-  console.log("You can now use `heroshot sync` to capture screenshots.");
+  return { hasScreenshots: allScreenshots.length > 0 };
 }
 
 // src/sync.ts
@@ -308,60 +347,116 @@ async function findElement(page, selector, maxAttempts = 10, intervalMs = 500) {
   }
   return null;
 }
-async function captureScreenshot(page, screenshot, outputDirectory) {
-  const { name, url, selector, filename } = screenshot;
-  console.log(`  ${name}...`);
+function addFilenameSuffix(filename, suffix) {
+  const extension = path3.extname(filename);
+  const base = path3.basename(filename, extension);
+  const directory = path3.dirname(filename);
+  return path3.join(directory, `${base}${suffix}${extension}`);
+}
+async function takeScreenshot(target, outputPath, format, quality, clip) {
+  const isPage = "goto" in target;
+  if (format === "jpeg") {
+    if (isPage && clip) {
+      await target.screenshot({ path: outputPath, type: "jpeg", quality, clip });
+    } else if (isPage) {
+      await target.screenshot({ path: outputPath, type: "jpeg", quality, fullPage: false });
+    } else {
+      await target.screenshot({ path: outputPath, type: "jpeg", quality });
+    }
+  } else if (isPage && clip) {
+    await target.screenshot({ path: outputPath, type: "png", clip });
+  } else if (isPage) {
+    await target.screenshot({ path: outputPath, type: "png", fullPage: false });
+  } else {
+    await target.screenshot({ path: outputPath, type: "png" });
+  }
+}
+async function captureScreenshot(page, screenshot, outputDirectory, captureOptions, filenameSuffix = "") {
+  const { name, url, selector, filename, padding, scroll } = screenshot;
+  const { format, quality } = captureOptions;
+  const finalFilename = filenameSuffix ? addFilenameSuffix(filename, filenameSuffix) : filename;
+  log.verbose(`  ${name}${filenameSuffix}...`);
   try {
-    await page.goto(url, { waitUntil: "networkidle", timeout: 3e4 });
+    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 3e4 });
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
     return { success: false, error: `Failed to navigate: ${message}` };
   }
-  await page.waitForTimeout(1e3);
-  const outputPath = path3.join(outputDirectory, filename);
+  await page.waitForTimeout(2e3);
+  if (scroll) {
+    await page.evaluate(`window.scrollTo(${scroll.x}, ${scroll.y})`);
+    await page.waitForTimeout(100);
+  }
+  const outputPath = path3.join(outputDirectory, finalFilename);
   const outputDirectoryPath = path3.dirname(outputPath);
   if (!existsSync2(outputDirectoryPath)) {
     mkdirSync(outputDirectoryPath, { recursive: true });
   }
-  if (selector) {
-    const element = await findElement(page, selector);
-    if (!element) {
-      return {
-        success: false,
-        error: `Element not found: ${selector}`
-      };
-    }
-    try {
-      await element.screenshot({ path: outputPath });
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      return { success: false, error: `Screenshot failed: ${message}` };
-    }
-  } else {
-    try {
-      await page.screenshot({ path: outputPath, fullPage: false });
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      return { success: false, error: `Screenshot failed: ${message}` };
+  try {
+    if (selector) {
+      const element = await findElement(page, selector);
+      if (!element) {
+        return { success: false, error: `Element not found: ${selector}` };
+      }
+      const hasPadding = padding && (padding.top > 0 || padding.right > 0 || padding.bottom > 0 || padding.left > 0);
+      if (hasPadding) {
+        const box = await element.boundingBox();
+        if (!box) {
+          return { success: false, error: "Could not get element bounding box" };
+        }
+        const clip = {
+          x: Math.max(0, box.x - padding.left),
+          y: Math.max(0, box.y - padding.top),
+          width: box.width + padding.left + padding.right,
+          height: box.height + padding.top + padding.bottom
+        };
+        await takeScreenshot(page, outputPath, format, quality, clip);
+      } else {
+        await takeScreenshot(element, outputPath, format, quality);
+      }
+    } else {
+      await takeScreenshot(page, outputPath, format, quality);
     }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return { success: false, error: `Screenshot failed: ${message}` };
   }
   return { success: true };
 }
+function getColorSchemes(setting) {
+  if (setting === "both") return ["light", "dark"];
+  if (setting) return [setting];
+  return [];
+}
+async function captureAndLog(page, screenshot, outputDirectory, captureOptions, suffix) {
+  const result = await captureScreenshot(page, screenshot, outputDirectory, captureOptions, suffix);
+  const filename = suffix ? addFilenameSuffix(screenshot.filename, suffix) : screenshot.filename;
+  if (result.success) {
+    log.verbose(`    Saved: ${filename}`);
+  } else {
+    log.error(`  ${screenshot.name}${suffix}: ${result.error ?? "Unknown error"}`);
+  }
+  return {
+    id: `${screenshot.id}${suffix}`,
+    name: `${screenshot.name}${suffix}`,
+    success: result.success,
+    error: result.error
+  };
+}
 async function sync(options = {}) {
   const configPath = getConfigPath();
   const config = loadConfig(configPath);
   if (config.screenshots.length === 0) {
-    console.log("No screenshots defined in config.");
+    log("No screenshots defined.");
     return { total: 0, success: 0, failed: 0, results: [] };
   }
   const { id: filterId } = options;
   const screenshots = filterId ? config.screenshots.filter((screenshot) => screenshot.id === filterId) : config.screenshots;
   if (filterId && screenshots.length === 0) {
-    console.log(`No screenshot found with ID: ${filterId}`);
+    log(`No screenshot found with ID: ${filterId}`);
     return { total: 0, success: 0, failed: 0, results: [] };
   }
-  console.log(`Syncing ${screenshots.length} screenshot(s)...`);
-  console.log("");
+  log.verbose(`Syncing ${screenshots.length} screenshot(s)...`);
   const configDirectory = path3.dirname(configPath);
   const outputDirectory = path3.resolve(configDirectory, config.outputDirectory);
   const viewport = config.browser?.viewport ?? { width: 1280, height: 800 };
@@ -370,19 +465,30 @@ async function sync(options = {}) {
     viewport
   });
   const page = await context.newPage();
+  const colorSchemeSetting = config.browser?.colorScheme;
+  const schemes = getColorSchemes(colorSchemeSetting);
+  const captureOptions = {
+    format: config.outputFormat ?? "png",
+    quality: config.jpegQuality
+  };
   const results = [];
   for (const screenshot of screenshots) {
-    const result = await captureScreenshot(page, screenshot, outputDirectory);
-    results.push({
-      id: screenshot.id,
-      name: screenshot.name,
-      success: result.success,
-      error: result.error
-    });
-    if (result.success) {
-      console.log(`    Saved: ${screenshot.filename}`);
+    if (schemes.length === 0) {
+      const result = await captureAndLog(page, screenshot, outputDirectory, captureOptions, "");
+      results.push(result);
     } else {
-      console.log(`    Failed: ${result.error ?? "Unknown error"}`);
+      for (const scheme of schemes) {
+        await page.emulateMedia({ colorScheme: scheme });
+        const suffix = schemes.length > 1 ? `-${scheme}` : "";
+        const result = await captureAndLog(
+          page,
+          screenshot,
+          outputDirectory,
+          captureOptions,
+          suffix
+        );
+        results.push(result);
+      }
     }
   }
   await context.close();
@@ -390,8 +496,11 @@ async function sync(options = {}) {
   const successfulResults = results.filter(({ success }) => success);
   const { length: successCount } = successfulResults;
   const failedCount = totalCount - successCount;
-  console.log("");
-  console.log(`Done: ${successCount} succeeded, ${failedCount} failed`);
+  if (failedCount > 0) {
+    log(`Done: ${successCount}/${totalCount} screenshots (${failedCount} failed)`);
+  } else {
+    log(`Done: ${successCount} screenshot${successCount === 1 ? "" : "s"} captured`);
+  }
   return {
     total: totalCount,
     success: successCount,
@@ -402,30 +511,43 @@ async function sync(options = {}) {
 
 // src/cli.ts
 var program = new Command();
-program.name("heroshot").description("Define your screenshots once, update them forever with one command").version("0.0.2-alpha.1");
-program.command("setup", { isDefault: true }).description("Open browser to log in to sites you want to screenshot").option("--reset", "Clear existing browser profile and start fresh").action(async (options) => {
+program.name("heroshot").description("Define your screenshots once, update them forever with one command").version("0.0.2-alpha.2").option("-v, --verbose", "Show detailed output").hook("preAction", () => {
+  const options = program.opts();
+  setVerbose(options.verbose ?? false);
+});
+program.command("run", { isDefault: true, hidden: true }).description("Run heroshot (setup if no config, otherwise sync)").action(async () => {
+  const configPath = getConfigPath();
+  if (existsSync3(configPath)) {
+    const result = await sync({});
+    if (result.failed > 0) {
+      process.exitCode = 1;
+    }
+  } else {
+    const { hasScreenshots } = await setup();
+    if (hasScreenshots) {
+      log("");
+      const result = await sync({});
+      if (result.failed > 0) {
+        process.exitCode = 1;
+      }
+    }
+  }
+});
+program.command("config").description("Open browser to add/edit screenshot definitions").option("--reset", "Clear existing browser profile and start fresh").option("--only", "Only run config, skip sync afterwards").action(async (options) => {
   if (options.reset) {
     const profilePath = getProfilePath();
     if (existsSync3(profilePath)) {
       rmSync(profilePath, { recursive: true });
-      console.log("Browser profile cleared.");
+      log.verbose("Browser profile cleared.");
     }
   }
-  await setup();
-});
-program.command("capture <url> <output>").description("Capture a screenshot of a URL").action(async (url, output) => {
-  await captureUrl(url, output);
-});
-program.command("init").description("Create a heroshot.json config file").action(() => {
-  console.log("TODO: Create heroshot.json");
-});
-program.command("sync").description("Capture all screenshots defined in config").option("--id <id>", "Only capture a specific screenshot by ID").action(async (options) => {
-  const result = await sync(options);
-  if (result.failed > 0) {
-    process.exitCode = 1;
+  const { hasScreenshots } = await setup();
+  if (hasScreenshots && !options.only) {
+    log("");
+    const result = await sync({});
+    if (result.failed > 0) {
+      process.exitCode = 1;
+    }
   }
 });
-program.command("check").description("Check if screenshots are up-to-date (for CI)").action(() => {
-  console.log("TODO: Check screenshots");
-});
 program.parse();

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "heroshot",
-  "version": "0.0.2-alpha.1",
+  "version": "0.0.2-alpha.3",
   "description": "Define your screenshots once, update them forever with one command",
   "type": "module",
   "author": "Ondrej Machala",
-  "license": "AGPL-3.0-or-later",
+  "license": "MIT",
   "bin": {
     "heroshot": "dist/cli.js"
   },
+  "files": [
+    "dist",
+    "toolbar/dist"
+  ],
   "packageManager": "pnpm@9.15.0",
   "scripts": {
     "dev": "tsx src/cli.ts",
@@ -17,6 +21,7 @@
     "test:run": "vitest run",
     "test:toolbar": "vitest run --config toolbar/vite.config.ts",
     "test:toolbar:coverage": "vitest run --config toolbar/vite.config.ts --coverage",
+    "test:toolbar:e2e": "playwright test --config toolbar/playwright.config.ts",
     "typecheck": "tsc --noEmit --incremental --tsBuildInfoFile node_modules/.cache/tsbuildinfo",
     "typecheck:toolbar": "tsc --noEmit -p toolbar/tsconfig.json --incremental --tsBuildInfoFile node_modules/.cache/tsbuildinfo-toolbar",
     "lint": "eslint --cache --cache-location node_modules/.cache/eslint src/",
@@ -43,7 +48,9 @@
   "devDependencies": {
     "@eslint/js": "^9.16.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^22.10.0",
+    "@vitest/browser": "^4.0.16",
     "@vitest/coverage-v8": "^4.0.16",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
@@ -60,10 +67,12 @@
     "eslint-plugin-unused-imports": "^4.3.0",
     "jsdom": "^26.0.0",
     "knip": "^5.80.0",
+    "postcss": "^8.5.6",
     "prettier": "^3.7.4",
     "simple-git-hooks": "^2.11.1",
     "svelte": "^5.46.1",
     "svelte-eslint-parser": "^1.4.1",
+    "tailwindcss": "^4.1.18",
     "tsup": "^8.3.0",
     "tsx": "^4.19.0",
     "typescript": "^5.7.0",