package.json

{
  "name": "vscode-live-ui-editor",
  "displayName": "Live UI Editor",
  "description": "Visual UI editing in VS Code: Static HTML + App Mode (React/Vite/Next/Angular/Astro/SvelteKit and more). Click-to-code, drag/resize, inline text editing, property inspector, element tree, CSS cascade, diff preview, responsive breakpoints, undo/redo, page redesign (Figma-like), and the @ui-wizard chat participant.",
  "version": "0.3.3",
  "publisher": "TheImmersiveSaga",
  "icon": "images/icon.png",
  "markdown": "github",
  "galleryBanner": {
    "color": "#0b1220",
    "theme": "dark"
  },
  "badges": [
    {
      "url": "https://img.shields.io/badge/Discord-Join-5865F2?style=flat&logo=discord&logoColor=white",
      "href": "https://discord.gg/QHnHhCjWDQ",
      "description": "Join the Discord"
    },
    {
      "url": "https://img.shields.io/badge/GitHub-Repo-111827?style=flat&logo=github&logoColor=white",
      "href": "https://github.com/ChaosTimTom/VSC-Live-UI-Editor",
      "description": "Source repository"
    }
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/ChaosTimTom/VSC-Live-UI-Editor"
  },
  "homepage": "https://github.com/ChaosTimTom/VSC-Live-UI-Editor#readme",
  "bugs": {
    "url": "https://github.com/ChaosTimTom/VSC-Live-UI-Editor/issues"
  },
  "license": "MIT",
  "engines": {
    "vscode": "^1.85.0"
  },
  "categories": [
    "Programming Languages",
    "Visualization"
  ],
  "keywords": [
    "click to code",
    "react",
    "vite",
    "nextjs",
    "angular",
    "svelte",
    "vue",
    "astro",
    "nuxt",
    "gatsby",
    "remix",
    "tauri",
    "html",
    "css editor",
    "visual css",
    "jsx",
    "tsx",
    "tailwind",
    "ui",
    "visual",
    "editor",
    "design tool",
    "frontend",
    "web design",
    "prototype",
    "inspector",
    "devtools",
    "drag",
    "drop",
    "live",
    "wysiwyg",
    "no code",
    "live preview",
    "responsive",
    "webview",
    "app mode",
    "stable ids",
    "apply to code",
    "chat",
    "ui wizard",
    "page redesign",
    "figma"
  ],
  "activationEvents": [
    "onCommand:liveUI.open",
    "onCommand:liveUI.openAppMode",
    "onChatParticipant:live-ui.ui-wizard"
  ],
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "liveUI.open",
        "title": "Live UI: Open"
      },
      {
        "command": "liveUI.openAppMode",
        "title": "Live UI: Open (App Mode)"
      }
    ],
    "chatParticipants": [
      {
        "id": "live-ui.ui-wizard",
        "name": "ui-wizard",
        "fullName": "UI Wizard",
        "description": "Edit UI via natural language — element styles, layout, bulk apply, structure helpers, and full page redesign (Figma-like with live CSS streaming).",
        "isSticky": true
      }
    ],
    "walkthroughs": [
      {
        "id": "liveUI.getStarted",
        "title": "Get Started with Live UI Editor",
        "description": "Learn the basics of visual UI editing inside VS Code.",
        "steps": [
          {
            "id": "openFolder",
            "title": "Open a project folder",
            "description": "Live UI Editor needs a folder open so it can detect your project.\n\n[Open Folder](command:vscode.openFolder)",
            "media": {
              "markdown": "docs/help/getting-started.md"
            }
          },
          {
            "id": "runOpen",
            "title": "Run Live UI: Open",
            "description": "Open the Command Palette and run **Live UI: Open** to launch the Welcome screen.\n\n[Run Live UI: Open](command:liveUI.open)",
            "media": {
              "markdown": "docs/help/getting-started.md"
            }
          },
          {
            "id": "pickTarget",
            "title": "Pick a target",
            "description": "Choose an HTML file for Static HTML mode, or a detected app for App Mode. The Welcome screen shows the best match.",
            "media": {
              "markdown": "docs/help/getting-started.md"
            }
          },
          {
            "id": "firstEdit",
            "title": "Make your first edit",
            "description": "Click an element to select it, then change text (double-click), adjust styles in the Inspector, or drag to move.",
            "media": {
              "markdown": "docs/help/static-html-mode.md"
            }
          },
          {
            "id": "exploreTools",
            "title": "Explore the tool panels",
            "description": "Open the Inspector, Element Tree, Diff Preview, CSS Cascade, and Responsive Bar from the toolbar to inspect and debug your UI.",
            "media": {
              "markdown": "docs/help/keyboard-shortcuts.md"
            }
          }
        ]
      }
    ]
  },
  "scripts": {
    "clean": "npx --yes rimraf dist",
    "clean:all": "npx --yes rimraf dist webview-ui/dist",
    "typecheck": "tsc -p . --noEmit",
    "build:webview": "npm --prefix webview-ui run build",
    "build:extension": "npm run clean && node ./esbuild.extension.mjs",
    "build": "npm run build:webview && npm run typecheck && npm run build:extension",
    "watch:extension": "npm run typecheck && node ./esbuild.extension.mjs --watch",
    "package:webview": "npm --prefix webview-ui run build",
    "package:vsix": "npm run build && npx --yes @vscode/vsce package",
    "publish:vsce": "npm run build && npx --yes @vscode/vsce publish",
    "test": "vitest run",
    "test:watch": "vitest"
  },
  "dependencies": {
    "cheerio": "^1.0.0-rc.12",
    "http-proxy": "^1.18.1",
    "markdown-it": "^14.1.0",
    "markdown-it-anchor": "^9.2.0",
    "parse5": "^7.2.1",
    "ts-morph": "^23.0.0"
  },
  "devDependencies": {
    "@types/http-proxy": "^1.17.16",
    "@types/node": "^20.11.30",
    "@types/vscode": "^1.85.0",
    "esbuild": "^0.27.2",
    "rimraf": "^6.1.2",
    "typescript": "^5.4.5",
    "vitest": "^1.6.0"
  }
}