cssprobe-cli 0.2.5 → 0.2.6

package/README.md

@@ -142,6 +142,7 @@ Options:
   --brief                     Compact output: tree sketch + warnings/errors only
   --layout                    ASCII layout diagram showing element positions and sizes
   --wait                      Wait for user interaction before collecting (implies --headed)
+  --viewport <WxH>            Viewport size (e.g. 375x812, default 1280x720)
 ```
 
 ---
@@ -189,6 +190,7 @@ The report header shows: `confidence: DEFINITE 8 | INDEFINITE 0 | UNVERIFIABLE 1
 # Set values
 cssprobe-cli config-set browser chromium
 cssprobe-cli config-set depth 8
+cssprobe-cli config-set viewport 375x812
 
 # Show current config
 cssprobe-cli config-show
@@ -206,6 +208,7 @@ Priority: CLI flags > Environment variables > Config file
 --browser       CSSPROBE_BROWSER
 --depth         CSSPROBE_DEPTH
 --headed        CSSPROBE_HEADED
+--viewport      CSSPROBE_VIEWPORT
 -p, --profile   CSSPROBE_PROFILE
 ```
 

package/dist/browser/launcher.d.ts

@@ -4,6 +4,11 @@ export interface LauncherOptions {
     headed?: boolean;
     /** Path to a Playwright storage state file (cookies + localStorage). */
     state?: string;
+    /** Custom viewport size. Defaults to 1280×720. */
+    viewport?: {
+        width: number;
+        height: number;
+    };
 }
 export declare class BrowserLauncher {
     private options;

package/dist/browser/launcher.js

@@ -75,7 +75,8 @@ class BrowserLauncher {
         }
         this.browser = await factory.launch(launchOptions);
         // Load saved state if provided
-        const contextOptions = { viewport: { width: 1280, height: 720 } };
+        const vp = this.options.viewport || { width: 1280, height: 720 };
+        const contextOptions = { viewport: vp };
         if (this.options.state && fs_1.default.existsSync(this.options.state)) {
             contextOptions.storageState = this.options.state;
         }
@@ -212,7 +213,8 @@ class BrowserLauncher {
         if (execPath)
             launchOptions.executablePath = execPath;
         this.browser = await factory.launch(launchOptions);
-        this.context = await this.browser.newContext({ viewport: { width: 1280, height: 720 } });
+        const vp = this.options.viewport || { width: 1280, height: 720 };
+        this.context = await this.browser.newContext({ viewport: vp });
         this.page = await this.context.newPage();
         // Navigate to the target URL
         if (url.startsWith('http://') || url.startsWith('https://')) {

package/dist/cli/commands.d.ts

@@ -24,6 +24,7 @@ export declare const inspectCommand: import("./command").CommandSchema<z.ZodObje
     brief: z.ZodOptional<z.ZodBoolean>;
     layout: z.ZodOptional<z.ZodBoolean>;
     wait: z.ZodOptional<z.ZodBoolean>;
+    viewport: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     json?: boolean | undefined;
     headed?: boolean | undefined;
@@ -36,6 +37,7 @@ export declare const inspectCommand: import("./command").CommandSchema<z.ZodObje
     brief?: boolean | undefined;
     layout?: boolean | undefined;
     wait?: boolean | undefined;
+    viewport?: string | undefined;
 }, {
     json?: boolean | undefined;
     headed?: boolean | undefined;
@@ -48,4 +50,5 @@ export declare const inspectCommand: import("./command").CommandSchema<z.ZodObje
     brief?: boolean | undefined;
     layout?: boolean | undefined;
     wait?: boolean | undefined;
+    viewport?: string | undefined;
 }>>;

package/dist/cli/commands.js

@@ -65,6 +65,7 @@ const inspect = (0, command_1.declareCommand)({
         brief: z.boolean().optional().describe('compact output: tree sketch + warnings/errors only'),
         layout: z.boolean().optional().describe('ASCII layout diagram showing element positions and sizes'),
         wait: z.boolean().optional().describe('wait for user interaction before collecting (implies --headed)'),
+        viewport: z.string().optional().describe('viewport size as WxH (e.g. 375x812, default 1280x720)'),
     }),
 });
 const login = (0, command_1.declareCommand)({
@@ -93,7 +94,7 @@ const configSet = (0, command_1.declareCommand)({
     category: 'config',
     description: 'Set a configuration value',
     args: z.object({
-        key: z.string().describe('Config key (browser, depth, headed)'),
+        key: z.string().describe('Config key (browser, depth, headed, viewport)'),
         value: z.string().describe('Config value'),
     }),
     options: z.object({
@@ -170,6 +171,7 @@ const interactive = (0, command_1.declareCommand)({
         browser: z.enum(['chromium', 'firefox', 'webkit']).optional().describe('browser engine (default chromium)'),
         state: z.string().optional().describe('path to saved state file (cookies + localStorage)'),
         depth: numberArg.optional().describe('DOM tree depth (default: auto, max 20)'),
+        viewport: z.string().optional().describe('viewport size as WxH (e.g. 375x812, default 1280x720)'),
     }),
 });
 const commandsArray = [

package/dist/cli/program.js

@@ -125,7 +125,7 @@ async function handleInspect(command, cmdEntry, args, output) {
         // Auto-detect root selector if not provided
         let rootSelector = selector;
         if (!rootSelector) {
-            const detected = await autoDetectRoot(url, { browser, headed, state });
+            const detected = await autoDetectRoot(url, { browser, headed, state, viewport: config.viewport });
             if (!detected) {
                 output.error('Could not auto-detect a root element. Please provide a selector: cssprobe-cli inspect <url> <selector>');
                 return;
@@ -133,7 +133,7 @@ async function handleInspect(command, cmdEntry, args, output) {
             rootSelector = detected;
             console.error(`Auto-detected root: ${rootSelector}`);
         }
-        const launcher = new launcher_1.BrowserLauncher({ browser, headed, state });
+        const launcher = new launcher_1.BrowserLauncher({ browser, headed, state, viewport: config.viewport });
         await launcher.open(url);
         // Wait for user interaction if --wait
         if (wait) {
@@ -427,7 +427,8 @@ async function handleInteractive(command, cmdEntry, args, _output) {
         console.error('Error: URL is required. Usage: cssprobe-cli interactive <url>');
         process.exit(1);
     }
-    const launcher = new launcher_1.BrowserLauncher({ browser, headed: true, state });
+    const config = (0, config_1.loadConfig)(args);
+    const launcher = new launcher_1.BrowserLauncher({ browser, headed: true, state, viewport: config.viewport });
     await launcher.open(url);
     let currentUrl = url;
     // Resolve auto depth

package/dist/config/config.d.ts

@@ -3,11 +3,16 @@ export interface ProfileConfig {
     browser?: string;
     depth?: string;
     headed?: string;
+    viewport?: string;
 }
 export interface Config {
     browser: string;
     depth: number;
     headed: boolean;
+    viewport?: {
+        width: number;
+        height: number;
+    };
     output: 'text' | 'json';
     raw: boolean;
 }

package/dist/config/config.js

@@ -77,16 +77,29 @@ function resolveProfile(args) {
     const rc = readRcFile();
     return rc.profiles[name] || {};
 }
+function parseViewport(raw) {
+    const match = raw.match(/^(\d+)\s*[xX*](\d+)$/);
+    if (!match)
+        return undefined;
+    const width = Number(match[1]);
+    const height = Number(match[2]);
+    if (width > 0 && height > 0)
+        return { width, height };
+    return undefined;
+}
 function loadConfig(args) {
     const profile = resolveProfile(args);
     const browser = args.browser || process.env.CSSPROBE_BROWSER || profile.browser || 'chromium';
     const depthRaw = args.depth ?? process.env.CSSPROBE_DEPTH ?? profile.depth;
     const depth = depthRaw ? Number(depthRaw) : 6;
     const headed = !!(args.headed || process.env.CSSPROBE_HEADED === 'true' || profile.headed === 'true');
+    const viewportRaw = args.viewport || process.env.CSSPROBE_VIEWPORT || profile.viewport;
+    const viewport = viewportRaw ? parseViewport(viewportRaw) : undefined;
     return {
         browser,
         depth: Number.isNaN(depth) ? 6 : depth,
         headed,
+        viewport,
         output: args.json ? 'json' : 'text',
         raw: !!args.raw,
     };
@@ -96,6 +109,7 @@ function maskConfig(config) {
         browser: config.browser,
         depth: String(config.depth),
         headed: String(config.headed),
+        ...(config.viewport ? { viewport: `${config.viewport.width}x${config.viewport.height}` } : {}),
     };
 }
 function writeRcConfig(key, value, profileName) {

package/dist/help.json

@@ -2,7 +2,7 @@
   "global": "Usage: cssprobe-cli <command> [args] [options]\n\n\nInspection:\n  inspect <url> [selector]    inspect the runtime css of a page (layout, scroll, colors, fonts, backgrounds)\n  login <url>                 open browser for interactive login, then save state for later use\n  state-import [file]         import cookies from netscape format file into a playwright state file\n  interactive <url>           open browser and inspect interactively (repl mode)\n\nConfiguration:\n  config-show                 show current configuration\n  config-set <key> <value>    set a configuration value\n  config-list                 list all profiles\n  config-use <name>           switch active profile\n  config-new <name>           create a new profile\n  config-path                 show configuration file path\n\nAgent Skills:\n  skill-install               install agent skill for cssprobe-cli (teaches agents how to use the cli)\n  skill-uninstall             remove agent skill for cssprobe-cli\n\nGlobal options:\n  --help [command]            print help\n  --json                      output response as JSON\n  --raw                       output only the result value\n  --version                   print version\n  -p, --profile <name>        use named profile (or CSSPROBE_PROFILE env)",
   "commands": {
     "inspect": {
-      "help": "cssprobe-cli inspect <url> [selector]\n\nInspect the runtime CSS of a page (layout, scroll, colors, fonts, backgrounds)\n\nArguments:\n  <url>                       url, file:// path, or local html file path\n  [selector]                  css selector for the root element (auto-detected if omitted)\nOptions:\n  --json                      output structured json instead of markdown\n  --headed                    show the browser window\n  --browser                   browser engine (default chromium)\n  --zoom                      run 1x/0.5x viewport diagnosis\n  --depth                     dom tree depth (default: auto, max 20)\n  --max-nodes                 node count cap (default 60)\n  --up-to                     ancestor stop tag (default html)\n  --state                     path to saved state file (cookies + localstorage)\n  --brief                     compact output: tree sketch + warnings/errors only\n  --layout                    ascii layout diagram showing element positions and sizes\n  --wait                      wait for user interaction before collecting (implies --headed)\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
+      "help": "cssprobe-cli inspect <url> [selector]\n\nInspect the runtime CSS of a page (layout, scroll, colors, fonts, backgrounds)\n\nArguments:\n  <url>                       url, file:// path, or local html file path\n  [selector]                  css selector for the root element (auto-detected if omitted)\nOptions:\n  --json                      output structured json instead of markdown\n  --headed                    show the browser window\n  --browser                   browser engine (default chromium)\n  --zoom                      run 1x/0.5x viewport diagnosis\n  --depth                     dom tree depth (default: auto, max 20)\n  --max-nodes                 node count cap (default 60)\n  --up-to                     ancestor stop tag (default html)\n  --state                     path to saved state file (cookies + localstorage)\n  --brief                     compact output: tree sketch + warnings/errors only\n  --layout                    ascii layout diagram showing element positions and sizes\n  --wait                      wait for user interaction before collecting (implies --headed)\n  --viewport                  viewport size as wxh (e.g. 375x812, default 1280x720)\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
       "flags": {
         "json": "boolean",
         "headed": "boolean",
@@ -14,7 +14,8 @@
         "state": "string",
         "brief": "boolean",
         "layout": "boolean",
-        "wait": "boolean"
+        "wait": "boolean",
+        "viewport": "string"
       },
       "args": [
         "url",
@@ -42,11 +43,12 @@
       ]
     },
     "interactive": {
-      "help": "cssprobe-cli interactive <url>\n\nOpen browser and inspect interactively (REPL mode)\n\nArguments:\n  <url>                       url, file:// path, or local html file path\nOptions:\n  --browser                   browser engine (default chromium)\n  --state                     path to saved state file (cookies + localstorage)\n  --depth                     dom tree depth (default: auto, max 20)\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
+      "help": "cssprobe-cli interactive <url>\n\nOpen browser and inspect interactively (REPL mode)\n\nArguments:\n  <url>                       url, file:// path, or local html file path\nOptions:\n  --browser                   browser engine (default chromium)\n  --state                     path to saved state file (cookies + localstorage)\n  --depth                     dom tree depth (default: auto, max 20)\n  --viewport                  viewport size as wxh (e.g. 375x812, default 1280x720)\n\nGlobal options:\n  --json                      output as JSON\n  --profile, -p <name>        use named profile",
       "flags": {
         "browser": "string",
         "state": "string",
-        "depth": "string"
+        "depth": "string",
+        "viewport": "string"
       },
       "args": [
         "url"
@@ -60,7 +62,7 @@
       "args": []
     },
     "config-set": {
-      "help": "cssprobe-cli config-set <key> <value>\n\nSet a configuration value\n\nArguments:\n  <key>                       config key (browser, depth, headed)\n  <value>                     config value\nOptions:\n  --profile                   profile name",
+      "help": "cssprobe-cli config-set <key> <value>\n\nSet a configuration value\n\nArguments:\n  <key>                       config key (browser, depth, headed, viewport)\n  <value>                     config value\nOptions:\n  --profile                   profile name",
       "flags": {
         "profile": "string"
       },

package/docs/guide/installation.md

@@ -238,12 +238,13 @@ confidence: DEFINITE 8 | INDEFINITE 0 | UNVERIFIABLE 1
 export CSSPROBE_BROWSER=chromium
 export CSSPROBE_DEPTH=6
 export CSSPROBE_HEADED=true
+export CSSPROBE_VIEWPORT=375x812
 export CSSPROBE_PROFILE=default
 ```
 
 Priority (highest to lowest):
-1. CLI flags: `--browser`, `--depth`, `--headed`
-2. Environment variables: `CSSPROBE_BROWSER`, `CSSPROBE_DEPTH`, `CSSPROBE_HEADED`
+1. CLI flags: `--browser`, `--depth`, `--headed`, `--viewport`
+2. Environment variables: `CSSPROBE_BROWSER`, `CSSPROBE_DEPTH`, `CSSPROBE_HEADED`, `CSSPROBE_VIEWPORT`
 3. Config file: `~/.cssprobe-clirc`
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssprobe-cli",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Runtime CSS probe — inspect layout, colors, backgrounds, fonts and more in a live browser. AI agents and shell automation.",
   "keywords": [
     "css",