// @bun
// src/components/docs/getting-started/VSCodeExtensionPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight, ExternalLink } from "lucide-react";
import { CodeBlock } from "@contractspec/lib.design-system";
import { jsx, jsxs } from "react/jsx-runtime";
function VSCodeExtensionPage() {
  const features = [
    {
      category: "Core Functionality",
      items: [
        "Real-time validation with instant feedback on spec errors",
        "Build/Scaffold handlers and components from specs",
        "Interactive spec creation wizard",
        "Watch mode for auto-rebuild on changes",
        "Sync all specs in workspace with one command"
      ]
    },
    {
      category: "Visual Navigation",
      items: [
        "Specs Explorer sidebar with organized tree view",
        "Dependencies view to visualize spec relationships",
        "Build Results tracking with history",
        "Circular dependency detection"
      ]
    },
    {
      category: "Comparison & Export",
      items: [
        "Semantic and text diff between specs",
        "Git comparison with baseline branches",
        "OpenAPI 3.1 specification export"
      ]
    }
  ];
  const commands = [
    {
      name: "Create New Spec",
      description: "Interactive wizard to create specs"
    },
    {
      name: "Validate Current Spec",
      description: "Validate the currently open spec"
    },
    {
      name: "Build/Scaffold from Current Spec",
      description: "Generate handler/component"
    },
    { name: "Toggle Watch Mode", description: "Auto-rebuild on changes" },
    { name: "Sync All Specs", description: "Build all specs in workspace" },
    {
      name: "Analyze Spec Dependencies",
      description: "Visualize spec dependencies"
    },
    {
      name: "Compare Specs",
      description: "Semantic or text diff between specs"
    },
    {
      name: "Export to OpenAPI",
      description: "Generate OpenAPI specification"
    }
  ];
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-2",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "VS Code Extension"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground text-lg",
            children: "Spec-first development directly in VS Code. Validate, scaffold, and explore your contract specifications with real-time feedback."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex flex-wrap gap-3",
        children: [
          /* @__PURE__ */ jsxs("a", {
            href: "https://marketplace.visualstudio.com/items?itemName=lssm.vscode-contractspec",
            target: "_blank",
            rel: "noopener noreferrer",
            className: "btn-primary inline-flex items-center gap-2",
            children: [
              "Install Extension ",
              /* @__PURE__ */ jsx(ExternalLink, {
                size: 16
              })
            ]
          }),
          /* @__PURE__ */ jsx("a", {
            href: "vscode:extension/lssm.vscode-contractspec",
            className: "btn-ghost inline-flex items-center gap-2",
            children: "Open in VS Code"
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-6",
        children: [
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Installation"
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "space-y-2",
                children: [
                  /* @__PURE__ */ jsxs("p", {
                    className: "text-muted-foreground text-sm",
                    children: [
                      /* @__PURE__ */ jsx("strong", {
                        children: "Option 1:"
                      }),
                      " Install from VS Code Marketplace"
                    ]
                  }),
                  /* @__PURE__ */ jsx(CodeBlock, {
                    language: "bash",
                    code: "code --install-extension lssm.vscode-contractspec"
                  }),
                  /* @__PURE__ */ jsxs("p", {
                    className: "text-muted-foreground mt-4 text-sm",
                    children: [
                      /* @__PURE__ */ jsx("strong", {
                        children: "Option 2:"
                      }),
                      ' Search for "ContractSpec" in VS Code Extensions (Ctrl/Cmd+Shift+X)'
                    ]
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-4",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Features"
              }),
              /* @__PURE__ */ jsx("div", {
                className: "grid gap-4 md:grid-cols-3",
                children: features.map((section) => /* @__PURE__ */ jsxs("div", {
                  className: "card-subtle space-y-3 p-4",
                  children: [
                    /* @__PURE__ */ jsx("h3", {
                      className: "font-bold text-violet-400",
                      children: section.category
                    }),
                    /* @__PURE__ */ jsx("ul", {
                      className: "space-y-2",
                      children: section.items.map((item) => /* @__PURE__ */ jsxs("li", {
                        className: "text-muted-foreground flex items-start gap-2 text-sm",
                        children: [
                          /* @__PURE__ */ jsx("span", {
                            className: "mt-1 text-violet-400",
                            children: "-"
                          }),
                          /* @__PURE__ */ jsx("span", {
                            children: item
                          })
                        ]
                      }, item))
                    })
                  ]
                }, section.category))
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-4",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Commands"
              }),
              /* @__PURE__ */ jsxs("p", {
                className: "text-muted-foreground",
                children: [
                  "Access commands via Command Palette (Ctrl/Cmd+Shift+P) with prefix",
                  " ",
                  /* @__PURE__ */ jsx("code", {
                    children: "ContractSpec:"
                  })
                ]
              }),
              /* @__PURE__ */ jsx("div", {
                className: "grid gap-3 md:grid-cols-2",
                children: commands.map((cmd) => /* @__PURE__ */ jsx("div", {
                  className: "card-subtle flex items-center gap-3 p-3",
                  children: /* @__PURE__ */ jsxs("div", {
                    className: "flex-1",
                    children: [
                      /* @__PURE__ */ jsx("p", {
                        className: "font-mono text-sm font-medium",
                        children: cmd.name
                      }),
                      /* @__PURE__ */ jsx("p", {
                        className: "text-muted-foreground text-xs",
                        children: cmd.description
                      })
                    ]
                  })
                }, cmd.name))
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Sidebar Views"
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground",
                children: "The extension adds a ContractSpec activity bar (icon in sidebar) with three views:"
              }),
              /* @__PURE__ */ jsxs("div", {
                className: "grid gap-4 md:grid-cols-3",
                children: [
                  /* @__PURE__ */ jsxs("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx("h4", {
                        className: "font-bold",
                        children: "Specs Explorer"
                      }),
                      /* @__PURE__ */ jsx("p", {
                        className: "text-muted-foreground text-sm",
                        children: "Browse all specs organized by type. Shows name, version, and stability. Click to open, right-click for actions."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx("h4", {
                        className: "font-bold",
                        children: "Dependencies"
                      }),
                      /* @__PURE__ */ jsx("p", {
                        className: "text-muted-foreground text-sm",
                        children: "Visualize spec relationships. Detect circular dependencies. Navigate to referenced specs."
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsxs("div", {
                    className: "card-subtle space-y-2 p-4",
                    children: [
                      /* @__PURE__ */ jsx("h4", {
                        className: "font-bold",
                        children: "Build Results"
                      }),
                      /* @__PURE__ */ jsx("p", {
                        className: "text-muted-foreground text-sm",
                        children: "Track build history (last 20). Success/failure indicators. Click to open generated files."
                      })
                    ]
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "space-y-3",
            children: [
              /* @__PURE__ */ jsx("h2", {
                className: "text-2xl font-bold",
                children: "Getting Started"
              }),
              /* @__PURE__ */ jsxs("ol", {
                className: "text-muted-foreground list-inside list-decimal space-y-2",
                children: [
                  /* @__PURE__ */ jsx("li", {
                    children: "Install the extension from VS Code Marketplace"
                  }),
                  /* @__PURE__ */ jsx("li", {
                    children: "Open a workspace with ContractSpec files (or create one)"
                  }),
                  /* @__PURE__ */ jsx("li", {
                    children: "Start the walkthrough: Help - Welcome - ContractSpec"
                  }),
                  /* @__PURE__ */ jsxs("li", {
                    children: [
                      "Create your first spec: Click ",
                      /* @__PURE__ */ jsx("strong", {
                        children: "+"
                      }),
                      " in Specs Explorer or run ",
                      /* @__PURE__ */ jsx("code", {
                        children: "ContractSpec: Create New Spec"
                      })
                    ]
                  }),
                  /* @__PURE__ */ jsx("li", {
                    children: "Build from it: Click the build icon in the editor title bar"
                  })
                ]
              })
            ]
          }),
          /* @__PURE__ */ jsxs("div", {
            className: "card-subtle space-y-4 p-6",
            children: [
              /* @__PURE__ */ jsx("h3", {
                className: "font-bold",
                children: "Configuration"
              }),
              /* @__PURE__ */ jsx("p", {
                className: "text-muted-foreground text-sm",
                children: "Configure the extension in VS Code Settings:"
              }),
              /* @__PURE__ */ jsx("div", {
                className: "overflow-x-auto",
                children: /* @__PURE__ */ jsxs("table", {
                  className: "text-muted-foreground w-full text-sm",
                  children: [
                    /* @__PURE__ */ jsx("thead", {
                      children: /* @__PURE__ */ jsxs("tr", {
                        className: "border-border border-b",
                        children: [
                          /* @__PURE__ */ jsx("th", {
                            className: "p-2 text-left font-medium",
                            children: "Setting"
                          }),
                          /* @__PURE__ */ jsx("th", {
                            className: "p-2 text-left font-medium",
                            children: "Description"
                          }),
                          /* @__PURE__ */ jsx("th", {
                            className: "p-2 text-left font-medium",
                            children: "Default"
                          })
                        ]
                      })
                    }),
                    /* @__PURE__ */ jsxs("tbody", {
                      children: [
                        /* @__PURE__ */ jsxs("tr", {
                          className: "border-border border-b",
                          children: [
                            /* @__PURE__ */ jsx("td", {
                              className: "p-2 font-mono text-xs",
                              children: "validation.onSave"
                            }),
                            /* @__PURE__ */ jsx("td", {
                              className: "p-2",
                              children: "Run validation on save"
                            }),
                            /* @__PURE__ */ jsx("td", {
                              className: "p-2",
                              children: "true"
                            })
                          ]
                        }),
                        /* @__PURE__ */ jsxs("tr", {
                          className: "border-border border-b",
                          children: [
                            /* @__PURE__ */ jsx("td", {
                              className: "p-2 font-mono text-xs",
                              children: "validation.onOpen"
                            }),
                            /* @__PURE__ */ jsx("td", {
                              className: "p-2",
                              children: "Run validation on open"
                            }),
                            /* @__PURE__ */ jsx("td", {
                              className: "p-2",
                              children: "true"
                            })
                          ]
                        }),
                        /* @__PURE__ */ jsxs("tr", {
                          className: "border-border border-b",
                          children: [
                            /* @__PURE__ */ jsx("td", {
                              className: "p-2 font-mono text-xs",
                              children: "api.baseUrl"
                            }),
                            /* @__PURE__ */ jsx("td", {
                              className: "p-2",
                              children: "Base URL for ContractSpec API"
                            }),
                            /* @__PURE__ */ jsx("td", {
                              className: "p-2",
                              children: "(empty)"
                            })
                          ]
                        })
                      ]
                    })
                  ]
                })
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/getting-started/tools/cli",
            className: "btn-ghost",
            children: "Back: CLI"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/specs",
            className: "btn-primary",
            children: [
              "Next: Core Concepts ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  VSCodeExtensionPage
};
