npm - claw-design - Versions diffs - 1.0.1 - Mend

claw-design 1.0.1

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

package/LICENSE +21 -0
package/README.md +72 -0
package/dist/cli/commands/start.d.ts +7 -0
package/dist/cli/commands/start.d.ts.map +1 -0
package/dist/cli/commands/start.js +176 -0
package/dist/cli/commands/start.js.map +1 -0
package/dist/cli/index.d.ts +3 -0
package/dist/cli/index.d.ts.map +1 -0
package/dist/cli/index.js +20 -0
package/dist/cli/index.js.map +1 -0
package/dist/cli/utils/claude.d.ts +21 -0
package/dist/cli/utils/claude.d.ts.map +1 -0
package/dist/cli/utils/claude.js +42 -0
package/dist/cli/utils/claude.js.map +1 -0
package/dist/cli/utils/dev-server.d.ts +14 -0
package/dist/cli/utils/dev-server.d.ts.map +1 -0
package/dist/cli/utils/dev-server.js +57 -0
package/dist/cli/utils/dev-server.js.map +1 -0
package/dist/cli/utils/electron.d.ts +7 -0
package/dist/cli/utils/electron.d.ts.map +1 -0
package/dist/cli/utils/electron.js +36 -0
package/dist/cli/utils/electron.js.map +1 -0
package/dist/cli/utils/output.d.ts +6 -0
package/dist/cli/utils/output.d.ts.map +1 -0
package/dist/cli/utils/output.js +21 -0
package/dist/cli/utils/output.js.map +1 -0
package/dist/cli/utils/port-detect.d.ts +30 -0
package/dist/cli/utils/port-detect.d.ts.map +1 -0
package/dist/cli/utils/port-detect.js +95 -0
package/dist/cli/utils/port-detect.js.map +1 -0
package/dist/cli/utils/preflight.d.ts +20 -0
package/dist/cli/utils/preflight.d.ts.map +1 -0
package/dist/cli/utils/preflight.js +33 -0
package/dist/cli/utils/preflight.js.map +1 -0
package/dist/cli/utils/process.d.ts +23 -0
package/dist/cli/utils/process.d.ts.map +1 -0
package/dist/cli/utils/process.js +57 -0
package/dist/cli/utils/process.js.map +1 -0
package/out/main/index.js +1123 -0
package/out/preload/overlay.cjs +56 -0
package/out/preload/sidebar.cjs +29 -0
package/out/renderer/assets/overlay-Bsx1u_qg.css +449 -0
package/out/renderer/assets/overlay-DZl3I3jq.js +689 -0
package/out/renderer/assets/sidebar-Bt34gvPU.js +563 -0
package/out/renderer/assets/sidebar-BxEPS84k.css +515 -0
package/out/renderer/assets/toast-CLlgwMU_.js +110 -0
package/out/renderer/overlay.html +131 -0
package/out/renderer/sidebar.html +64 -0
package/package.json +67 -0
package/resources/icon.icns +0 -0
package/resources/icon.png +0 -0
package/scripts/postinstall.cjs +56 -0

package/out/renderer/overlay.html ADDED Viewed

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'">
+  <title>claw-design overlay</title>
+  <script type="module" crossorigin src="./assets/overlay-DZl3I3jq.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/overlay-Bsx1u_qg.css">
+</head>
+<body>
+  <!-- Selection rectangle (positioned absolutely by JS) -->
+  <div id="claw-selection-rect" class="claw-selection-rect" hidden></div>
+  <!-- Element hover highlight (positioned absolutely by JS) -->
+  <div id="claw-element-highlight" class="claw-element-highlight" hidden></div>
+  <!-- Instruction input bar (appears after selection committed) — per D-08, D-09 -->
+  <div id="claw-input-bar" class="claw-input-bar" hidden>
+    <div class="claw-input-bar__inner">
+      <textarea
+        id="claw-input-textarea"
+        class="claw-input-bar__textarea"
+        placeholder="Describe the change you want..."
+        aria-label="Change instruction"
+        rows="1"
+      ></textarea>
+      <button
+        id="claw-input-submit"
+        class="claw-input-bar__submit"
+        aria-label="Send instruction"
+        disabled
+      >
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M3 10L17 10M17 10L11 4M17 10L11 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    </div>
+    <div class="claw-input-bar__footer">
+      <select id="claw-model-select" class="claw-input-bar__model" aria-label="Claude model">
+        <option value="claude-sonnet-4-6">Sonnet</option>
+        <option value="claude-opus-4-6">Opus</option>
+        <option value="claude-haiku-4-5-20251001">Haiku</option>
+      </select>
+      <span class="claw-input-bar__hint">Enter to submit &middot; Paste images</span>
+    </div>
+  </div>
+  <!-- Toast notification container (D-08, D-09, D-10) -->
+  <div id="claw-toast-container" class="claw-toast-container" aria-live="polite"></div>
+  <div id="claw-toolbar" class="claw-toolbar">
+    <!-- Drag handle (non-interactive indicator) -->
+    <div class="claw-toolbar-handle" aria-hidden="true">
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+        <circle cx="5" cy="5" r="1.5" fill="currentColor"/>
+        <circle cx="9" cy="5" r="1.5" fill="currentColor"/>
+        <circle cx="13" cy="5" r="1.5" fill="currentColor"/>
+        <circle cx="5" cy="9" r="1.5" fill="currentColor"/>
+        <circle cx="9" cy="9" r="1.5" fill="currentColor"/>
+        <circle cx="13" cy="9" r="1.5" fill="currentColor"/>
+        <circle cx="5" cy="13" r="1.5" fill="currentColor"/>
+        <circle cx="9" cy="13" r="1.5" fill="currentColor"/>
+        <circle cx="13" cy="13" r="1.5" fill="currentColor"/>
+      </svg>
+    </div>
+    <!-- Rectangle selection mode trigger -->
+    <button id="claw-select-btn" class="claw-toolbar-btn" aria-label="Select region" data-tooltip="Region select">
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <!-- Dotted selection rectangle -->
+        <rect x="2" y="6" width="12" height="12" rx="1" stroke="currentColor" stroke-width="1.5" stroke-dasharray="2 2" fill="none"/>
+        <!-- Cursor arrow -->
+        <path d="M11 2L11 11.5L13.8 9L16.5 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M11 2L11 11.5L13.8 9" fill="currentColor"/>
+      </svg>
+    </button>
+    <!-- Element select mode trigger (per D-02) -->
+    <button id="claw-elem-btn" class="claw-toolbar-btn" aria-label="Select element" data-tooltip="Element select">
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <!-- Pointer cursor with element bounding box (browser inspector icon style) -->
+        <rect x="6" y="6" width="12" height="12" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
+        <path d="M2 2L2 10L4.5 7.5L7 12L8.5 11.2L6 6.5L9 6.5Z" fill="currentColor"/>
+      </svg>
+    </button>
+    <!-- Viewport divider (D-01) -->
+    <div class="claw-toolbar-divider" aria-hidden="true"></div>
+    <!-- Viewport toggle: single button that expands to show preset options -->
+    <button id="claw-viewport-toggle-btn" class="claw-toolbar-btn" aria-label="Viewport presets" data-tooltip="Viewports">
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <rect x="2" y="4" width="16" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
+        <path d="M7 16H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        <path d="M10 14V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+      </svg>
+    </button>
+    <!-- Collapsible viewport preset buttons (hidden by default) -->
+    <div id="claw-viewport-group" class="claw-viewport-group">
+      <button id="claw-viewport-desktop-btn" class="claw-toolbar-btn claw-toolbar-btn--active" aria-label="Desktop viewport" data-viewport="desktop" data-tooltip="Desktop (1280 x 800)">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <rect x="2" y="4" width="16" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5" fill="none"/>
+          <path d="M7 16H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          <path d="M10 14V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+      <button id="claw-viewport-tablet-btn" class="claw-toolbar-btn" aria-label="Tablet viewport" data-viewport="tablet" data-tooltip="Tablet (768 x 1024)">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <rect x="4" y="2" width="12" height="16" rx="2" stroke="currentColor" stroke-width="1.5" fill="none"/>
+          <circle cx="10" cy="16" r="0.75" fill="currentColor"/>
+        </svg>
+      </button>
+      <button id="claw-viewport-mobile-btn" class="claw-toolbar-btn" aria-label="Mobile viewport" data-viewport="mobile" data-tooltip="Mobile (375 x 812)">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <rect x="5" y="2" width="10" height="16" rx="2" stroke="currentColor" stroke-width="1.5" fill="none"/>
+          <path d="M8.5 16H11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+  <!-- Tooltip element (D-22) -->
+  <div id="claw-tooltip" class="claw-tooltip" role="tooltip" hidden></div>
+  <!-- Loading indicator: visible until site finishes loading -->
+  <div id="claw-loading" class="claw-loading">
+    <div class="claw-loading__spinner" aria-label="Loading site"></div>
+  </div>
+</body>
+</html>

package/out/renderer/sidebar.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'">
+  <title>Sidebar</title>
+  <script type="module" crossorigin src="./assets/sidebar-Bt34gvPU.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/sidebar-BxEPS84k.css">
+</head>
+<body>
+  <!-- Minimized state: icon + badge -->
+  <div id="sidebar-minimized" class="sidebar-minimized" style="display:none;">
+    <div id="sidebar-drag-handle" class="sidebar-drag-handle" aria-hidden="true">
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <circle cx="4" cy="4" r="1.2" fill="currentColor"/>
+        <circle cx="10" cy="4" r="1.2" fill="currentColor"/>
+        <circle cx="4" cy="7" r="1.2" fill="currentColor"/>
+        <circle cx="10" cy="7" r="1.2" fill="currentColor"/>
+        <circle cx="4" cy="10" r="1.2" fill="currentColor"/>
+        <circle cx="10" cy="10" r="1.2" fill="currentColor"/>
+      </svg>
+    </div>
+    <button id="sidebar-expand-btn" class="sidebar-expand-btn" aria-label="Show task sidebar">
+      <!-- Inline SVG: sidebar panel icon, 16x16 -->
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="1.5" y="2.5" width="13" height="11" rx="2" stroke="currentColor" stroke-width="1.5" fill="none"/>
+        <line x1="6" y1="2.5" x2="6" y2="13.5" stroke="currentColor" stroke-width="1.5"/>
+      </svg>
+    </button>
+    <div id="sidebar-badge" class="sidebar-badge" style="display:none;">
+      <span id="sidebar-badge-text">0/0</span>
+    </div>
+  </div>
+  <!-- Expanded state: full panel -->
+  <div id="sidebar-expanded" class="sidebar-expanded" style="display:none;">
+    <div class="sidebar-header">
+      <div id="sidebar-expanded-drag-handle" class="sidebar-drag-handle" aria-hidden="true">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <circle cx="4" cy="4" r="1.2" fill="currentColor"/>
+          <circle cx="10" cy="4" r="1.2" fill="currentColor"/>
+          <circle cx="4" cy="7" r="1.2" fill="currentColor"/>
+          <circle cx="10" cy="7" r="1.2" fill="currentColor"/>
+          <circle cx="4" cy="10" r="1.2" fill="currentColor"/>
+          <circle cx="10" cy="10" r="1.2" fill="currentColor"/>
+        </svg>
+      </div>
+      <span class="sidebar-header-label">Tasks</span>
+      <button id="sidebar-clear-btn" class="sidebar-clear-btn" aria-label="Clear finished tasks" title="Clear finished tasks">Clear</button>
+      <button id="sidebar-minimize-btn" class="sidebar-minimize-btn" aria-label="Minimize task sidebar">
+        <!-- Inline SVG: chevron pointing right, 14x14 -->
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5 3L9 7L5 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    </div>
+    <div id="sidebar-task-list" class="sidebar-task-list" aria-live="polite">
+      <!-- Task rows rendered dynamically by sidebar.ts -->
+    </div>
+  </div>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,67 @@
+{
+  "name": "claw-design",
+  "productName": "Claw Design",
+  "version": "1.0.1",
+  "description": "Point at your running website, describe changes in plain English, and watch Claude Code edit the source live",
+  "type": "module",
+  "main": "./dist/main/index.js",
+  "bin": {
+    "clawdesign": "./dist/cli/index.js"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.cli.json && electron-vite build",
+    "build:cli": "tsc -p tsconfig.cli.json",
+    "build:electron": "electron-vite build",
+    "dev": "electron-vite dev",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "postinstall": "node scripts/postinstall.cjs"
+  },
+  "files": [
+    "dist/",
+    "out/",
+    "resources/",
+    "scripts/",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/prodoxx/claw-design"
+  },
+  "keywords": [
+    "visual-development",
+    "web-development",
+    "electron",
+    "claude-code",
+    "developer-tools",
+    "ai-coding",
+    "design-to-code"
+  ],
+  "homepage": "https://github.com/prodoxx/claw-design",
+  "author": {
+    "name": "prodoxx",
+    "url": "https://github.com/prodoxx"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "@anthropic-ai/claude-agent-sdk": "^0.2.0",
+    "commander": "^14.0.0",
+    "electron": "^36.0.0",
+    "ora": "^9.0.0",
+    "picocolors": "^1.1.0",
+    "tree-kill": "^1.2.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "electron-vite": "^5.0.0",
+    "happy-dom": "^20.8.9",
+    "jsdom": "^29.0.1",
+    "tsx": "^4.21.0",
+    "typescript": "~5.7",
+    "vitest": "^4.0.0"
+  },
+  "license": "MIT"
+}

package/resources/icon.icns ADDED Viewed

Binary file

package/resources/icon.png ADDED Viewed

Binary file

package/scripts/postinstall.cjs ADDED Viewed

@@ -0,0 +1,56 @@
+/**
+ * Patch Electron.app on macOS so the menu bar, dock tooltip, about dialog,
+ * and dock icon all show "Claw Design" instead of "Electron".
+ *
+ * This modifies files inside node_modules/electron/dist/Electron.app:
+ * - Info.plist: CFBundleName and CFBundleDisplayName
+ * - Resources/electron.icns: replaced with our custom icon
+ *
+ * Re-applies on every `npm install` since node_modules is ephemeral.
+ */
+'use strict';
+if (process.platform !== 'darwin') process.exit(0);
+const fs = require('fs');
+const path = require('path');
+const { execFileSync } = require('child_process');
+const electronAppDir = path.join(
+  __dirname,
+  '..',
+  'node_modules',
+  'electron',
+  'dist',
+  'Electron.app',
+  'Contents',
+);
+const plistPath = path.join(electronAppDir, 'Info.plist');
+if (!fs.existsSync(plistPath)) {
+  // Electron not yet downloaded (e.g. CI with --ignore-scripts on electron)
+  process.exit(0);
+}
+// 1. Patch bundle name in Info.plist
+const plistBuddy = '/usr/libexec/PlistBuddy';
+try {
+  execFileSync(plistBuddy, ['-c', 'Set :CFBundleName Claw Design', plistPath]);
+  execFileSync(plistBuddy, ['-c', 'Set :CFBundleDisplayName Claw Design', plistPath]);
+} catch {
+  // Non-fatal -- menu bar will show "Electron" but everything else works
+}
+// 2. Replace Electron icon with Claw Design icon
+const customIcon = path.join(__dirname, '..', 'resources', 'icon.icns');
+const electronIcon = path.join(electronAppDir, 'Resources', 'electron.icns');
+try {
+  if (fs.existsSync(customIcon) && fs.existsSync(electronIcon)) {
+    fs.copyFileSync(customIcon, electronIcon);
+  }
+} catch {
+  // Non-fatal -- about dialog and dock will show Electron atom icon
+}