Avoid redundant dev-server generation and batch watcher updates.

frontend/components/studioFeature.ts

@@ -32,6 +32,8 @@ const studioFeatureTemplate = html`<Panel
     r-if="href"
     class="text-link"
     :href="href"
+    target="_blank"
+    rel="noopener"
     tone="accent"
     variant="link"
     icon="tabler:arrow-up-right"

frontend/components/studioPackage.ts

@@ -8,7 +8,7 @@ export interface StudioPackage {
   href?: RefOrValue<string>
 }
 
-const studioPackageTemplate = html`<a class="package-card" :href="href">
+const studioPackageTemplate = html`<a class="package-card" :href="href" target="_blank" rel="noopener">
   <span class="package-number">{{ number }}</span>
   <SectionHeader :title="title" :subtitle="summary" titleTag="h3">
     <code>{{ packageName }}</code>

frontend/docs/componentGuide.ts

@@ -28,7 +28,7 @@ export function defineComponentGuideComponents() {
         <div class="component-header__identity"><code>{{ name }}</code><span>{{ kind }}</span></div>
         <nav class="component-header__links" aria-label="Component resources">
           <a href="#api-reference">API <span aria-hidden="true">↗</span></a>
-          <a :href="source" target="_blank" rel="noopener noreferrer">Source <span aria-hidden="true">↗</span></a>
+          <a :href="source" target="_blank" rel="noopener">Source <span aria-hidden="true">↗</span></a>
         </nav>
       </div>
       <p class="component-header__summary">{{ summary }}</p>

frontend/purestack.studio/components/actions/buttons/buttons.mdx

@@ -321,7 +321,7 @@ The form handles `@reset.prevent` so its reactive value stays synchronized with
   </nav>
 </div>
 
-[Open the playground](#playground) · [Read the component definition](https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-components/src/standard/btn/btn.ts)
+[Open the playground](#playground) · <a href="https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-components/src/standard/btn/btn.ts" target="_blank" rel="noopener">Read the component definition</a>
 
 ### Appearance
 

frontend/purestack.studio/components/footer.mdx

@@ -4,5 +4,8 @@
   tone="neutral"
   variant="none"
 >
-  <template #legal> </template>
+  <template #social>
+    <a href="https://github.com/PureStackStudio/PureStack" target="_blank" rel="noopener" aria-label="PureStack GitHub repository"><Icon name="tabler:brand-github"/></a>
+    <a href="https://x.com/purestackstudio" target="_blank" rel="noopener" aria-label="PureStack Studio on X"><Icon name="tabler:brand-x"/></a>
+  </template>
 </SiteFooter>

frontend/purestack.studio/components/header.mdx

@@ -1 +1,10 @@
-<TopBar tone="neutral" variant="glass" class="spotlight-from-top-right"/>
+<TopBar tone="neutral" variant="glass" class="spotlight-from-top-right">
+  <template #actions>
+    <a class="topbar__icon" href="https://github.com/PureStackStudio/PureStack" target="_blank" rel="noopener" aria-label="PureStack GitHub repository">
+      <Icon name="tabler:brand-github"/>
+    </a>
+    <a class="topbar__icon" href="https://x.com/purestackstudio" target="_blank" rel="noopener" aria-label="PureStack Studio on X">
+      <Icon name="tabler:brand-x"/>
+    </a>
+  </template>
+</TopBar>

frontend/purestack.studio/components/site/top-bar/top-bar.mdx

@@ -231,7 +231,8 @@ TopBar renders a fixed doc-nav-toggle ID and should appear once per document. It
 
 <div class="api-contract">
   <p>
-    No slots. Register defineTopBarComponents and the selected logo component,
+    Use the actions slot to add links or controls beside the theme toggle.
+    Register defineTopBarComponents and the selected logo component,
     SearchBox, ThemeToggle, SignIn, Flex and Icon families. Standard SSG
     registration provides these dependencies.
   </p>

frontend/purestack.studio/footer.mdx

@@ -13,11 +13,11 @@
       </div>
       <div>
         <span class="footer-label">OPEN SOURCE</span
-        ><a href="https://github.com/PureStackStudio/PureStack">GitHub ↗</a
-        ><a href="https://github.com/PureStackStudio/PureStack/issues"
+        ><a href="https://github.com/PureStackStudio/PureStack" target="_blank" rel="noopener">GitHub ↗</a
+        ><a href="https://github.com/PureStackStudio/PureStack/issues" target="_blank" rel="noopener"
           >Issues ↗</a
         ><a
-          href="https://github.com/PureStackStudio/PureStack/blob/main/LICENSE"
+          href="https://github.com/PureStackStudio/PureStack/blob/main/LICENSE" target="_blank" rel="noopener"
           >MIT license ↗</a
         >
       </div>
@@ -29,6 +29,8 @@
       ><span class="status-dot"></span>Made for what comes next.</span
     ><span class="footer-actions"
       ><span class="consent-settings-teleport-area"></span
+      ><a href="https://github.com/PureStackStudio/PureStack" target="_blank" rel="noopener" aria-label="PureStack GitHub repository"><Icon name="tabler:brand-github"/></a
+      ><a href="https://x.com/purestackstudio" target="_blank" rel="noopener" aria-label="PureStack Studio on X"><Icon name="tabler:brand-x"/></a
       ><a href="#main">Back to top ↑</a></span
     >
   </Flex>

frontend/purestack.studio/guides/extending/plugins.mdx

@@ -177,7 +177,7 @@ Besides the prepared `head` and the page's `bodyHtml`, a template receives the p
 
 ## Transform Markdown
 
-`markdown` adds [remark](https://github.com/remarkjs/remark) plugins, which change the Markdown tree, and [rehype](https://github.com/rehypejs/rehype) plugins, which change the HTML tree. Every page, header, and footer goes through these steps:
+`markdown` adds <a href="https://github.com/remarkjs/remark" target="_blank" rel="noopener">remark</a> plugins, which change the Markdown tree, and <a href="https://github.com/rehypejs/rehype" target="_blank" rel="noopener">rehype</a> plugins, which change the HTML tree. Every page, header, and footer goes through these steps:
 
 1. PureStack reads the Markdown. Regor markup, such as `<Badge tone="success">`, stays raw HTML.
 2. Your remark plugins run.
@@ -506,4 +506,4 @@ Every field except `name` is optional.
 
 ## A complete example
 
-The PureStack Studio site you are reading uses one plugin for its skin, components, page layout, styles, and generated previews. Read the [Studio plugin](https://github.com/PureStackStudio/PureStack/blob/main/frontend/studioPlugin.ts) and the [config that adds it](https://github.com/PureStackStudio/PureStack/blob/main/frontend/purestack.studio/purestack.config.ts); the CLI builds and serves the site with no other code.
+The PureStack Studio site you are reading uses one plugin for its skin, components, page layout, styles, and generated previews. Read the <a href="https://github.com/PureStackStudio/PureStack/blob/main/frontend/studioPlugin.ts" target="_blank" rel="noopener">Studio plugin</a> and the <a href="https://github.com/PureStackStudio/PureStack/blob/main/frontend/purestack.studio/purestack.config.ts" target="_blank" rel="noopener">config that adds it</a>; the CLI builds and serves the site with no other code.

frontend/purestack.studio/guides/extending/regor.mdx

@@ -17,7 +17,7 @@ highlights:
 
 # Regor
 
-[Regor](https://github.com/koculu/Regor) is the component framework PureStack is built on. It runs in two places:
+<a href="https://github.com/koculu/Regor" target="_blank" rel="noopener">Regor</a> is the component framework PureStack is built on. It runs in two places:
 
 <Grid columns="1" columnsSm="2" class="gap-3 mb-4">
   <Panel tone="neutral" bodyClass="p-3">
@@ -55,6 +55,8 @@ A PureStack page can load any browser library, including React or Vue, because P
 <Flex wrap="true" align="center">
   <BtnLink
     href="https://github.com/koculu/Regor"
+    target="_blank"
+    rel="noopener"
     tone="neutral"
     variant="surface"
     icon="tabler:brand-github"

frontend/purestack.studio/guides/footer.mdx

@@ -4,5 +4,8 @@
   tone="neutral"
   variant="none"
 >
-  <template #legal> </template>
+  <template #social>
+    <a href="https://github.com/PureStackStudio/PureStack" target="_blank" rel="noopener" aria-label="PureStack GitHub repository"><Icon name="tabler:brand-github"/></a>
+    <a href="https://x.com/purestackstudio" target="_blank" rel="noopener" aria-label="PureStack Studio on X"><Icon name="tabler:brand-x"/></a>
+  </template>
 </SiteFooter>

frontend/purestack.studio/guides/getting-started/purestack-cli.mdx

@@ -15,7 +15,7 @@ nav:
 
 The `purestack` command builds a static site from a content directory. It discovers Markdown and Regor MDX pages, creates routes and navigation, generates theme styles, copies assets, and builds a search index when enabled. The same command also runs a development server and prepares a clean folder for publishing.
 
-Install `purestack` in your project with `yarn add purestack`. The commands below use the installed `purestack` executable through Yarn. Run them from your project root. You can also explore the [repository's sample site](https://github.com/PureStackStudio/PureStack/tree/main/packages/ts-ssg/sample-content).
+Install `purestack` in your project with `yarn add purestack`. The commands below use the installed `purestack` executable through Yarn. Run them from your project root. You can also explore the <a href="https://github.com/PureStackStudio/PureStack/tree/main/packages/ts-ssg/sample-content" target="_blank" rel="noopener">repository's sample site</a>.
 
 ## Build a first site
 

frontend/purestack.studio/guides/getting-started/site-config.mdx

@@ -27,7 +27,7 @@ content/
     _nav.json
 ```
 
-The CLI requires this file. A custom TypeScript runner can also pass site configuration directly. Most runner values take precedence over file values; for `navigation`, the file values take precedence where both specify the same field. Omitted fields use the defaults described below. The [JSON Schema](https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-ssg/schema/siteConfig.schema.json) lists every supported field and is useful for editor completion.
+The CLI requires this file. A custom TypeScript runner can also pass site configuration directly. Most runner values take precedence over file values; for `navigation`, the file values take precedence where both specify the same field. Omitted fields use the defaults described below. The <a href="https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-ssg/schema/siteConfig.schema.json" target="_blank" rel="noopener">JSON Schema</a> lists every supported field and is useful for editor completion.
 
 ## Start with a small config
 
@@ -93,7 +93,7 @@ The `--content` CLI option chooses the content directory. A custom runner can se
 }
 ```
 
-The logo can use `imageSrc` and `imageSrcDark` instead of an icon, or a `monogram` mark. `imageSrc` takes priority over `icon`. `subtitle`, `appearance`, `wordmarkStyle`, `shape`, `tone`, colors, and size fields let you tune the mark and wordmark. Set `logo.href` to `null` or `""` for a noninteractive logo. For the full set of presentation fields, use the [schema](https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-ssg/schema/siteConfig.schema.json) alongside the [SiteLogo component](/components/site/site-logo/).
+The logo can use `imageSrc` and `imageSrcDark` instead of an icon, or a `monogram` mark. `imageSrc` takes priority over `icon`. `subtitle`, `appearance`, `wordmarkStyle`, `shape`, `tone`, colors, and size fields let you tune the mark and wordmark. Set `logo.href` to `null` or `""` for a noninteractive logo. For the full set of presentation fields, use the <a href="https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-ssg/schema/siteConfig.schema.json" target="_blank" rel="noopener">schema</a> alongside the [SiteLogo component](/components/site/site-logo/).
 
 Relative paths in `siteConfig.json`, such as `imageSrc`, `style.href`, or `privacyPolicyUrl`, start at the content directory, where the file lives. `assets/logo.svg` becomes `/assets/logo.svg` on every page.
 

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

@@ -35,7 +35,7 @@ To develop the extension or install a local build, run this command from a PureS
 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 [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 <a href="https://github.com/PureStackStudio/PureStack/tree/main/packages/ts-ssg-vscode" target="_blank" rel="noopener">source README</a> also describes the Extension Development Host workflow.
 
 ## Pick the right file
 
@@ -81,7 +81,7 @@ export function defineMetricItemComponent() {
 }
 ```
 
-The editor highlights the expressions inside the double braces, recognizes directives such as `r-if` and `:tone`, and can navigate from the component or its public props to their TypeScript declarations. Formatting preserves the interpolation text while arranging the surrounding markup. [View the source](https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-components/src/standard/landing/metricItem.ts).
+The editor highlights the expressions inside the double braces, recognizes directives such as `r-if` and `:tone`, and can navigate from the component or its public props to their TypeScript declarations. Formatting preserves the interpolation text while arranging the surrounding markup. <a href="https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-components/src/standard/landing/metricItem.ts" target="_blank" rel="noopener">View the source</a>.
 
 ## Find and use components
 

frontend/purestack.studio/guides/header.mdx

@@ -1 +1,10 @@
-<TopBar tone="neutral" variant="glass" class="spotlight-from-top-right"/>
+<TopBar tone="neutral" variant="glass" class="spotlight-from-top-right">
+  <template #actions>
+    <a class="topbar__icon" href="https://github.com/PureStackStudio/PureStack" target="_blank" rel="noopener" aria-label="PureStack GitHub repository">
+      <Icon name="tabler:brand-github"/>
+    </a>
+    <a class="topbar__icon" href="https://x.com/purestackstudio" target="_blank" rel="noopener" aria-label="PureStack Studio on X">
+      <Icon name="tabler:brand-x"/>
+    </a>
+  </template>
+</TopBar>

frontend/purestack.studio/guides/styling/themes.mdx

@@ -88,4 +88,4 @@ themes.forEach((theme, palette) => {
 })
 ```
 
-Register such styles from a plugin's `onConfigResolved` hook, which runs before the build writes theme assets. For a real example, inspect the [Studio plugin](https://github.com/PureStackStudio/PureStack/blob/main/frontend/studioPlugin.ts), with its [skin](https://github.com/PureStackStudio/PureStack/blob/main/frontend/theme/studioSkin.ts) and [styles](https://github.com/PureStackStudio/PureStack/blob/main/frontend/theme/studioStyles.ts).
+Register such styles from a plugin's `onConfigResolved` hook, which runs before the build writes theme assets. For a real example, inspect the <a href="https://github.com/PureStackStudio/PureStack/blob/main/frontend/studioPlugin.ts" target="_blank" rel="noopener">Studio plugin</a>, with its <a href="https://github.com/PureStackStudio/PureStack/blob/main/frontend/theme/studioSkin.ts" target="_blank" rel="noopener">skin</a> and <a href="https://github.com/PureStackStudio/PureStack/blob/main/frontend/theme/studioStyles.ts" target="_blank" rel="noopener">styles</a>.

frontend/purestack.studio/guides/styling/utility-css-classes.mdx

@@ -112,7 +112,7 @@ PureStack also has editorial role classes. They set a combination of font size,
 <p class="text-attribution">PureStack team</p>
 ```
 
-These roles include their own vertical margins. If one sits inside a tight component, adjust that margin explicitly with `m-0` or a side-specific spacing class. The [text utility sample](https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-ssg/sample-content/guide/text-utilities-sample.mdx) shows the roles in full editorial sections.
+These roles include their own vertical margins. If one sits inside a tight component, adjust that margin explicitly with `m-0` or a side-specific spacing class. The <a href="https://github.com/PureStackStudio/PureStack/blob/main/packages/ts-ssg/sample-content/guide/text-utilities-sample.mdx" target="_blank" rel="noopener">text utility sample</a> shows the roles in full editorial sections.
 
 ### Larger text contexts
 

frontend/purestack.studio/header.mdx

@@ -9,15 +9,27 @@
       <a href="#getting-started">Get started</a>
     </nav>
     <div class="header-actions">
-      <ThemeToggle/>
-      <a
-        class="header-source"
-        href="https://github.com/PureStackStudio/PureStack"
-        aria-label="PureStack GitHub repository"
-      >
-        <Icon name="tabler:brand-github"/><span>GitHub</span
-        ><span aria-hidden="true">↗</span>
-      </a>
+      <div class="topbar__actions">
+        <ThemeToggle/>
+        <a
+          class="topbar__icon"
+          href="https://github.com/PureStackStudio/PureStack"
+          target="_blank"
+          rel="noopener"
+          aria-label="PureStack GitHub repository"
+        >
+          <Icon name="tabler:brand-github"/>
+        </a>
+        <a
+          class="topbar__icon"
+          href="https://x.com/purestackstudio"
+          target="_blank"
+          rel="noopener"
+          aria-label="PureStack Studio on X"
+        >
+          <Icon name="tabler:brand-x"/>
+        </a>
+      </div>
       <details class="mobile-menu">
         <summary aria-label="Toggle navigation">
           <Icon name="tabler:menu-2"/>
@@ -28,7 +40,15 @@
           <a href="/guides/">Guides</a>
           <a href="/components/">Components</a>
           <a href="#getting-started">Get started</a>
-          <a href="https://github.com/PureStackStudio/PureStack">GitHub ↗</a>
+          <a
+            href="https://github.com/PureStackStudio/PureStack"
+            target="_blank"
+            rel="noopener"
+            >GitHub ↗</a
+          >
+          <a href="https://x.com/purestackstudio" target="_blank" rel="noopener"
+            >X ↗</a
+          >
         </nav>
       </details>
     </div>

frontend/purestack.studio/index.mdx

@@ -14,7 +14,7 @@ nav:
 <section class="hero" aria-labelledby="hero-title">
   <div class="hero-grid" aria-hidden="true"></div>
   <div class="container hero-content">
-    <a class="release-note" href="https://github.com/PureStackStudio/PureStack">
+    <a class="release-note" href="https://github.com/PureStackStudio/PureStack" target="_blank" rel="noopener">
       <span class="status-dot"></span
       ><span>PURESTACK IS NOW OPEN SOURCE.</span
       ><span aria-hidden="true">↗</span>
@@ -38,6 +38,8 @@ nav:
       <BtnLink
         class="button"
         href="https://github.com/PureStackStudio/PureStack"
+        target="_blank"
+        rel="noopener"
         tone="neutral"
         variant="solid"
         icon="tabler:brand-github"
@@ -371,6 +373,8 @@ card.<span class="syntax-blue">toCSS</span>()</code></pre>
       <BtnLink
         class="text-link"
         href="https://github.com/PureStackStudio/PureStack#why-purestack-exists"
+        target="_blank"
+        rel="noopener"
         tone="accent"
         variant="link"
         icon="tabler:arrow-up-right"
@@ -455,6 +459,8 @@ card.<span class="syntax-blue">toCSS</span>()</code></pre>
     ><BtnLink
       class="text-link"
       href="https://github.com/PureStackStudio/PureStack#package-map"
+      target="_blank"
+      rel="noopener"
       tone="accent"
       variant="link"
       icon="tabler:arrow-up-right"
@@ -535,6 +541,8 @@ card.<span class="syntax-blue">toCSS</span>()</code></pre>
       <a
         class="terminal-footer"
         href="https://github.com/PureStackStudio/PureStack#development"
+        target="_blank"
+        rel="noopener"
         >Setup details in the README <span aria-hidden="true">↗</span></a
       >
     </div>
@@ -598,6 +606,8 @@ card.<span class="syntax-blue">toCSS</span>()</code></pre>
     <BtnLink
       class="button"
       href="https://github.com/PureStackStudio/PureStack"
+      target="_blank"
+      rel="noopener"
       tone="accent"
       variant="solid"
       icon="tabler:arrow-up-right"

frontend/theme/navigationStyles.ts

@@ -21,7 +21,7 @@ export function registerNavigationStyles(root: Style, palette: ThemePalette) {
   root.select('.studio .header-actions').css({
     display: 'flex',
     alignItems: 'center',
-    gap: '8px',
+    gap: '0rem',
     flexShrink: '0',
   })
   root.select('.studio .desktop-nav').css({