vs-code extension is published to the marketplace.

Author: koculu

frontend/purestack.studio/guides/index.mdx

@@ -30,6 +30,7 @@ These guides follow the path from a content folder to a finished interface. Star
     <h2 class="mt-0">VS Code extension</h2>
     <p>Find component source, complete props and frontmatter, and format markup on save.</p>
     <BtnLink href="/guides/vscode-extension/" tone="accent" variant="link">Set up the editor</BtnLink>
+    <BtnLink href="https://marketplace.visualstudio.com/items?itemName=purestack.purestack-component-navigation" tone="accent" variant="link">Install from Marketplace</BtnLink>
   </Panel>
   <Panel tone="neutral" bodyClass="p-3">
     <h2 class="mt-0">Regor</h2>

frontend/purestack.studio/guides/vscode-extension.mdx

@@ -15,15 +15,27 @@ nav:
 
 PureStack Component Tools brings component knowledge into VS Code. As you write a page or a Regor template, it can suggest component names and props, open their declarations, explain frontmatter fields, format markup on save, and mark broken HTML structure.
 
-## Install from the repository
+## Install from the Marketplace
 
-The extension is currently packaged locally. Use VS Code 1.85 or newer, then run this command from a PureStack repository checkout:
+Use VS Code 1.85 or newer and install [PureStack Component Tools from the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=purestack.purestack-component-navigation). You can also open the Extensions view with **Ctrl+Shift+X**, search for **PureStack Component Tools**, and click **Install** on the extension published by `purestack`.
+
+To install from a terminal:
+
+```sh
+code --install-extension purestack.purestack-component-navigation
+```
+
+Open your project folder after installation. The extension uses your project's TypeScript installation when available and otherwise uses its bundled TypeScript runtime.
+
+## Build from source
+
+To develop the extension or install a local build, run this command from a PureStack repository checkout:
 
 ```sh
 yarn pack-vscode-ext
 ```
 
-In VS Code, run **Extensions: Install from VSIX...** from the Command Palette and select the generated `.vsix` in `packages/ts-ssg-vscode/`. Reload the window and open your project folder. The project must have `typescript` installed so the extension can resolve its TypeScript runtime. For extension development, the [source README](https://github.com/PureStackStudio/PureStack/tree/main/packages/ts-ssg-vscode) also describes the Extension Development Host workflow.
+In VS Code, run **Extensions: Install from VSIX...** from the Command Palette and select the generated `.vsix` in `packages/ts-ssg-vscode/`. Reload the window and open your project folder. The [source README](https://github.com/PureStackStudio/PureStack/tree/main/packages/ts-ssg-vscode) also describes the Extension Development Host workflow.
 
 ## Pick the right file
 

frontend/purestack.studio/index.mdx

@@ -340,6 +340,10 @@ card.<span class="syntax-blue">toCSS</span>()</code></pre>
         ><span class="syntax-muted">&gt;</span><span class="editor-caret"></span
         ><small><Icon name="tabler:check"/>SemanticTone</small>
       </div>
+      <BtnLink
+        href="https://marketplace.visualstudio.com/items?itemName=purestack.purestack-component-navigation"
+        tone="accent"
+        variant="link">Install the VS Code extension</BtnLink>
     </StudioFeature>
   </Grid>
 </section>

packages/ts-components/src/standard/virtualList/variableMeasurement.test.ts

@@ -65,7 +65,9 @@ describe('variable row measurements', () => {
       throw new Error('Measurement did not settle')
     }
     let context: VariableVirtualList | VariableVirtualTable | undefined
-    const recordContext = <T extends VariableVirtualList | VariableVirtualTable>(
+    const recordContext = <
+      T extends VariableVirtualList | VariableVirtualTable,
+    >(
       candidate: Component<T>,
     ) => {
       const original = candidate.context
@@ -79,7 +81,9 @@ describe('variable row measurements', () => {
     const component =
       kind === 'list'
         ? recordContext(defineVirtualListComponents().variableVirtualList)
-        : recordContext(defineVariableVirtualTableComponents().variableVirtualTable)
+        : recordContext(
+            defineVariableVirtualTableComponents().variableVirtualTable,
+          )
     const viewportHeight = ref(160)
     let rowMounts = 0
     const app = createApp(

packages/ts-ssg-vscode/README.md

@@ -1,5 +1,7 @@
 # PureStack Component Tools
 
+[Website](https://purestack.studio) · [GitHub Source](https://github.com/PureStackStudio/PureStack/tree/main/packages/ts-ssg-vscode)
+
 PureStack Component Tools turns VS Code into a real authoring environment for PureStack and Regor.
 
 It understands component tags in Markdown and MDX, understands Regor markup inside TypeScript `html` and `svg` tagged templates, and adds the editing behavior that makes those files feel first-class instead of “HTML inside a string”.

packages/ts-ssg-vscode/package.json

@@ -4,8 +4,12 @@
   "description": "Component navigation, prop IntelliSense, lit-html syntax highlighting, and template formatting for Markdown, Regor MDX, and TypeScript templates.",
   "version": "1.1.0",
   "private": true,
-  "publisher": "purestack-local",
+  "publisher": "purestack",
   "license": "MIT",
+  "homepage": "https://purestack.studio",
+  "bugs": {
+    "url": "https://github.com/PureStackStudio/PureStack/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/PureStackStudio/PureStack.git",