pulumi-package-docs 0.2.0 → 0.4.0

package/src/routes/__root.tsx

@@ -6,8 +6,14 @@ import {
 } from '@tanstack/react-router'
 
 import { PulumiLogo } from '@/components/PulumiLogo'
+import { ThemeToggle } from '@/components/ThemeToggle'
 import appCss from '../styles.css?url'
 
+// Runs before hydration so an explicit theme choice applies before first
+// paint (no flash of the wrong theme). Absent (system default) is a no-op —
+// styles.css's prefers-color-scheme rules already handle that case.
+const themeInitScript = `try{var t=localStorage.getItem('theme');if(t==='light'||t==='dark'){document.documentElement.dataset.theme=t}}catch(e){}`
+
 export const Route = createRootRoute({
   head: () => ({
     meta: [
@@ -19,7 +25,7 @@ export const Route = createRootRoute({
         content: 'width=device-width, initial-scale=1',
       },
       {
-        title: 'Local Provider Docs',
+        title: 'Pulumi Package Docs',
       },
     ],
     links: [
@@ -38,17 +44,21 @@ export const Route = createRootRoute({
 
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
         <HeadContent />
       </head>
       <body>
         <header className="site-header">
-          <Link to="/" className="site-brand">
-            <PulumiLogo height={22} />
-            <span className="site-brand-divider" aria-hidden="true" />
-            <span className="site-brand-name">Local Provider Docs</span>
-          </Link>
+          <div className="site-header-inner">
+            <Link to="/" className="site-brand">
+              <PulumiLogo height={22} />
+              <span className="site-brand-divider" aria-hidden="true" />
+              <span className="site-brand-name">Package Docs</span>
+            </Link>
+            <ThemeToggle />
+          </div>
         </header>
         {children}
 

package/src/routes/index.tsx

@@ -13,7 +13,7 @@ function Home() {
   if (!project) {
     return (
       <main>
-        <h1>Local Provider Docs</h1>
+        <h1>Pulumi Package Docs</h1>
         <p className="empty-state">
           No Pulumi project was found at <code>{targetDir}</code> (or any parent
           directory). Run this from inside a Pulumi project directory, or with{' '}
@@ -25,7 +25,7 @@ function Home() {
 
   return (
     <main>
-      <h1>Local Provider Docs</h1>
+      <h1>Pulumi Package Docs</h1>
       <p className="subtitle">
         {project.name ?? 'Pulumi project'} &middot; <code>{project.root}</code>
       </p>

package/src/styles.css

@@ -47,8 +47,16 @@
   --radius-lg: 14px;
 }
 
+/*
+ * Theme resolution: system preference by default; an explicit choice (from
+ * ThemeToggle, via `data-theme` on <html>) overrides it either way. The
+ * dark values below are duplicated across the media query and the
+ * `[data-theme='dark']` rule rather than shared, since a media query can't
+ * be combined into one selector list with a plain attribute selector -
+ * keep both blocks in sync.
+ */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme='light']) {
     --color-bg: #1f1b21; /* service black */
     --color-fg: #fafafa; /* gray-950 dark */
     --color-fg-muted: #e0dfe2; /* gray-800 dark */
@@ -87,6 +95,44 @@
   }
 }
 
+:root[data-theme='dark'] {
+  --color-bg: #1f1b21; /* service black */
+  --color-fg: #fafafa; /* gray-950 dark */
+  --color-fg-muted: #e0dfe2; /* gray-800 dark */
+  --color-fg-subtle: #cbcace; /* gray-700 dark */
+  --color-border: #46434c; /* gray-100 dark */
+  --color-border-strong: #56535a; /* gray-200 dark */
+
+  --color-primary: #dedbff; /* violet-800 dark: body-safe accent */
+  --color-primary-strong: #f5f5ff; /* violet-950 dark */
+  --color-accent: #9077f3; /* violet-500, symmetric */
+  --color-accent-bg: #231f33; /* violet-50 dark */
+  --color-accent-border: #492e8e; /* violet-200 dark */
+
+  --color-code-bg: rgb(35 31 51 / 55%); /* violet-950 (dark theme) @ 50% */
+  --color-code-border: #492e8e; /* violet-800 (dark theme) */
+
+  --badge-resource-bg: #392960; /* violet-100 dark */
+  --badge-resource-fg: #c3bdff; /* violet-700 dark */
+  --badge-resource-border: #492e8e; /* violet-200 dark */
+
+  --badge-function-bg: #114642; /* aqua-100 dark */
+  --badge-function-fg: #1efad9; /* aqua-700 dark */
+  --badge-function-border: #075f59; /* aqua-200 dark */
+
+  --badge-warning-bg: #723213; /* yellow-100 dark */
+  --badge-warning-fg: #fde38a; /* yellow-800 dark */
+  --badge-warning-border: #933d0d; /* yellow-200 dark */
+
+  --badge-failure-bg: #611f22; /* red-100 dark */
+  --badge-failure-fg: #ffc7ca; /* red-800 dark */
+  --badge-failure-border: #96171e; /* red-200 dark */
+
+  --badge-info-bg: #28448a; /* blue-100 dark */
+  --badge-info-fg: #cce4ff; /* blue-800 dark */
+  --badge-info-border: #1e47c2; /* blue-200 dark */
+}
+
 * {
   box-sizing: border-box;
 }
@@ -163,22 +209,26 @@ main {
   position: sticky;
   top: 0;
   z-index: 10;
-  display: flex;
-  align-items: center;
   padding: 0.85rem 1rem;
   background: color-mix(in srgb, var(--color-bg) 88%, transparent);
   backdrop-filter: blur(8px);
   border-bottom: 1px solid var(--color-border);
 }
 
+.site-header-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 auto;
+  width: min(56rem, calc(100% - 2rem));
+}
+
 .site-brand {
   display: flex;
   align-items: center;
   gap: 0.7rem;
   text-decoration: none;
   color: var(--color-fg);
-  margin: 0 auto;
-  width: min(56rem, calc(100% - 2rem));
 }
 
 .pulumi-logo {
@@ -192,17 +242,25 @@ main {
 }
 
 @media (prefers-color-scheme: light) {
-  .pulumi-logo-light {
+  :root:not([data-theme='dark']) .pulumi-logo-light {
     display: block;
   }
 }
 
 @media (prefers-color-scheme: dark) {
-  .pulumi-logo-dark {
+  :root:not([data-theme='light']) .pulumi-logo-dark {
     display: block;
   }
 }
 
+:root[data-theme='light'] .pulumi-logo-light {
+  display: block;
+}
+
+:root[data-theme='dark'] .pulumi-logo-dark {
+  display: block;
+}
+
 .site-brand-divider {
   width: 1px;
   height: 1.1rem;
@@ -215,6 +273,68 @@ main {
   letter-spacing: -0.01em;
 }
 
+.theme-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.15rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.theme-switch-option {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-fg-subtle);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.theme-switch-option:hover {
+  color: var(--color-primary);
+}
+
+.theme-switch-option[aria-pressed='true'] {
+  background: var(--color-accent-bg);
+  border-color: var(--color-accent-border);
+  color: var(--color-primary);
+}
+
+.theme-switch-option::after {
+  content: attr(aria-label);
+  position: absolute;
+  top: calc(100% + 0.45rem);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  background: var(--color-fg);
+  color: var(--color-bg);
+  font-size: 0.7rem;
+  font-weight: 500;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+  z-index: 20;
+}
+
+.theme-switch-option:hover::after,
+.theme-switch-option:focus-visible::after {
+  opacity: 1;
+}
+
 /* subtitles, badges, banners */
 
 .subtitle {

package/vite.config.ts

@@ -1,12 +1,46 @@
 import { defineConfig } from 'vite'
+import type { Plugin, PreviewServer, ViteDevServer } from 'vite'
 
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 
 import viteReact from '@vitejs/plugin-react'
 
+// Matches the ANSI styling Vite's own CLI uses for its "Local"/"Network"
+// bullets (picocolors' green/bold/cyan), so this reads as one more item in
+// that same list rather than a separately-styled line.
+const green = (s: string) => `\x1b[32m${s}\x1b[39m`
+const bold = (s: string) => `\x1b[1m${s}\x1b[22m`
+const cyan = (s: string) => `\x1b[36m${s}\x1b[39m`
+const colorUrl = (url: string) =>
+  cyan(url.replace(/:(\d+)\//, (_, port) => `:${bold(port)}/`))
+
+/** Prints the MCP endpoint alongside Vite's own "Local"/"Network" bullets. */
+function printMcpUrl(): Plugin {
+  function withMcpUrl(server: ViteDevServer | PreviewServer) {
+    const printUrls = server.printUrls.bind(server)
+    server.printUrls = () => {
+      printUrls()
+      const base = server.resolvedUrls?.local[0]
+      if (!base) return
+      const url = new URL('mcp', base).toString()
+      // Padded to the same 9-column label width Vite uses ("Local:   " /
+      // "Network: " are both 9 characters before the URL).
+      server.config.logger.info(
+        `  ${green('➜')}  ${bold('MCP')}:     ${colorUrl(url)}`,
+      )
+    }
+  }
+
+  return {
+    name: 'print-mcp-url',
+    configureServer: withMcpUrl,
+    configurePreviewServer: withMcpUrl,
+  }
+}
+
 const config = defineConfig({
   resolve: { tsconfigPaths: true },
-  plugins: [tanstackStart(), viteReact()],
+  plugins: [tanstackStart(), viteReact(), printMcpUrl()],
 })
 
 export default config

package/dist/client/assets/providers._name-DpU324kz.js

@@ -1 +0,0 @@
-import{o as e}from"./useSelector-BIt42tGI.js";import{a as t}from"./index-CZRUHwIq.js";var n=e(),r=()=>(0,n.jsx)(t,{});export{r as component};

package/dist/client/assets/styles-CWDprFhI.css

@@ -1 +0,0 @@
-:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--font-sans:Inter, "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"Monaspace Neon", Menlo, Consolas, ui-monospace, monospace;--color-bg:#fff;--color-fg:#2e2932;--color-fg-muted:#56535a;--color-fg-subtle:#6a6675;--color-border:#e0dfe2;--color-border-strong:#cbcace;--color-primary:#5a30c5;--color-primary-strong:#492e8e;--color-accent:#9077f3;--color-accent-bg:#f5f5ff;--color-accent-border:#dedbff;--color-code-bg:#f5f5ff8c;--color-code-border:#dedbff;--badge-resource-bg:#ebebff;--badge-resource-fg:#5a30c5;--badge-resource-border:#dedbff;--badge-function-bg:#ccfff5;--badge-function-fg:#00756c;--badge-function-border:#5cffde;--badge-warning-bg:#fef2c7;--badge-warning-fg:#933d0d;--badge-warning-border:#fde38a;--badge-failure-bg:#ffe0e1;--badge-failure-fg:#96171e;--badge-failure-border:#ffc7ca;--badge-info-bg:#e5f1ff;--badge-info-fg:#1e47c2;--badge-info-border:#cce4ff;--radius-sm:6px;--radius-md:10px;--radius-lg:14px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--color-bg:#1f1b21;--color-fg:#fafafa;--color-fg-muted:#e0dfe2;--color-fg-subtle:#cbcace;--color-border:#46434c;--color-border-strong:#56535a;--color-primary:#dedbff;--color-primary-strong:#f5f5ff;--color-accent:#9077f3;--color-accent-bg:#231f33;--color-accent-border:#492e8e;--color-code-bg:#231f338c;--color-code-border:#492e8e;--badge-resource-bg:#392960;--badge-resource-fg:#c3bdff;--badge-resource-border:#492e8e;--badge-function-bg:#114642;--badge-function-fg:#1efad9;--badge-function-border:#075f59;--badge-warning-bg:#723213;--badge-warning-fg:#fde38a;--badge-warning-border:#933d0d;--badge-failure-bg:#611f22;--badge-failure-fg:#ffc7ca;--badge-failure-border:#96171e;--badge-info-bg:#28448a;--badge-info-fg:#cce4ff;--badge-info-border:#1e47c2}}*{box-sizing:border-box}html{background:var(--color-bg)}body{font-family:var(--font-sans);font-feature-settings:"liga" 1, "calt" 1, "cv11" 1;color:var(--color-fg);background:var(--color-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;line-height:1.3}h1,h2,h3{letter-spacing:-.02em;color:var(--color-fg);font-weight:600;line-height:1.1}h1{margin:0 0 .4rem;font-size:1.9rem}h2{text-transform:uppercase;letter-spacing:.05em;color:var(--color-fg-subtle);border-left:3px solid var(--color-accent);margin:2.5rem 0 1rem;padding-left:.65rem;font-size:.8rem;font-weight:600}p{line-height:1.6}a{color:var(--color-primary)}code{font-family:var(--font-mono);background:var(--color-accent-bg);border:1px solid var(--color-accent-border);border-radius:var(--radius-sm);padding:.1rem .4rem;font-size:.9em;font-weight:500}main{width:min(56rem,100% - 2rem);margin:2.5rem auto 6rem}.site-header{z-index:10;background:color-mix(in srgb, var(--color-bg) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border);align-items:center;padding:.85rem 1rem;display:flex;position:sticky;top:0}.site-brand{color:var(--color-fg);align-items:center;gap:.7rem;width:min(56rem,100% - 2rem);margin:0 auto;text-decoration:none;display:flex}.pulumi-logo{align-items:center;display:inline-flex}.pulumi-logo-mark{width:auto;display:none}@media (prefers-color-scheme:light){.pulumi-logo-light{display:block}}@media (prefers-color-scheme:dark){.pulumi-logo-dark{display:block}}.site-brand-divider{background:var(--color-border-strong);width:1px;height:1.1rem}.site-brand-name{letter-spacing:-.01em;font-size:.95rem;font-weight:600}.subtitle{color:var(--color-fg-muted);margin-top:-.35rem;font-size:.95rem}.back-link{color:var(--color-fg-muted);align-items:center;gap:.35rem;margin-bottom:1.25rem;font-size:.875rem;font-weight:500;text-decoration:none;display:inline-flex}.back-link:hover{color:var(--color-primary)}.empty-state{color:var(--color-fg-muted)}.badge{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;border:1px solid #0000;border-radius:999px;align-items:center;padding:.15rem .5rem;font-size:.7rem;font-weight:500;display:inline-flex}.badge-resource{background:var(--badge-resource-bg);color:var(--badge-resource-fg);border-color:var(--badge-resource-border)}.badge-function{background:var(--badge-function-bg);color:var(--badge-function-fg);border-color:var(--badge-function-border)}.badge-warning{background:var(--badge-warning-bg);color:var(--badge-warning-fg);border-color:var(--badge-warning-border)}.badge-failure{background:var(--badge-failure-bg);color:var(--badge-failure-fg);border-color:var(--badge-failure-border)}.badge-info{background:var(--badge-info-bg);color:var(--badge-info-fg);border-color:var(--badge-info-border)}.banner{border-radius:var(--radius-md);border:1px solid #0000;margin:.75rem 0 1.25rem;padding:.7rem .9rem;font-size:.9rem}.banner-failure{background:var(--badge-failure-bg);color:var(--badge-failure-fg);border-color:var(--badge-failure-border)}.banner-warning{background:var(--badge-warning-bg);color:var(--badge-warning-fg);border-color:var(--badge-warning-border)}.banner-info{background:var(--badge-info-bg);color:var(--badge-info-fg);border-color:var(--badge-info-border)}.provider-list{gap:.75rem;padding:0;list-style:none;display:grid}.provider-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);padding:1.1rem 1.25rem;transition:border-color .15s,background-color .15s,transform .15s}.provider-card:hover{border-color:var(--color-accent-border);background:var(--color-accent-bg)}.provider-card a{color:inherit;justify-content:space-between;align-items:baseline;gap:1rem;text-decoration:none;display:flex}.provider-name{letter-spacing:-.01em;font-size:1.1rem;font-weight:600}.provider-source{color:var(--color-fg-subtle);font-size:.85rem;font-family:var(--font-mono)}.provider-stats{color:var(--color-fg-muted);margin:.6rem 0 0;font-size:.85rem}.doc-list{gap:.6rem;margin-bottom:2rem;padding:0;list-style:none;display:grid}.doc-list-item{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.75rem 1rem;transition:border-color .15s,background-color .15s}.doc-list-item:hover{border-color:var(--color-accent-border);background:var(--color-accent-bg)}.doc-list-item a{color:var(--color-fg);font-weight:500;text-decoration:none}.doc-list-item a:hover{color:var(--color-primary)}.doc-list-item .badge{margin-top:.4rem}.doc-summary{color:var(--color-fg-muted);margin:.35rem 0 0;font-size:.9rem}.code-example{margin-bottom:1.5rem}.code-example-lang{font-family:var(--font-mono);color:var(--color-fg-subtle);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;font-size:.7rem;display:inline-block}.code-example pre{background:var(--color-code-bg);border:1px solid var(--color-code-border);border-radius:var(--radius-md);margin:0;padding:1rem 1.1rem;overflow-x:auto}.code-example code{background:0 0;border:none;border-radius:0;padding:0;font-size:.85rem;line-height:1.6}.props-table{border-collapse:collapse;border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;margin-bottom:1rem;font-size:.875rem;overflow:hidden}.props-table th,.props-table td{text-align:left;border-bottom:1px solid var(--color-border);vertical-align:top;padding:.55rem .75rem}.props-table tr:last-child td{border-bottom:none}.props-table th{color:var(--color-fg-subtle);text-transform:uppercase;letter-spacing:.04em;background:var(--color-accent-bg);font-size:.75rem;font-weight:600}.props-table code{font-size:.85em}