@terra-symposium/docs 0.1.80 → 0.1.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terra-symposium/docs",
-  "version": "0.1.80",
+  "version": "0.1.81",
   "description": "Terra Docs workspace and Markdown site generator.",
   "repository": {
     "type": "git",

package/site/astro.config.mjs

@@ -1,6 +1,6 @@
 import { terraErrorBoundaryIntegration as __terraErrorBoundaryIntegration } from '@terra-symposium/standards-error-boundaries/astro-integration';
 import { fileURLToPath } from 'node:url';
-import { resolve } from 'node:path';
+import { dirname, resolve } from 'node:path';
 import { readFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { defineConfig } from 'astro/config';
@@ -13,11 +13,9 @@ import { docsContentPlugin } from './docs-content-plugin.mjs';
 
 const packageRoot = fileURLToPath(new URL('../', import.meta.url));
 const requireFromPackage = createRequire(import.meta.url);
-const stylingEntry = requireFromPackage.resolve('@terra-symposium/styling');
-const requireFromStyling = createRequire(stylingEntry);
-const astroManifest = JSON.parse(
-  readFileSync(requireFromPackage.resolve('astro/package.json'), 'utf8'),
-);
+const astroManifestPath = requireFromPackage.resolve('astro/package.json');
+const astroManifest = JSON.parse(readFileSync(astroManifestPath, 'utf8'));
+const astroPackageRoot = dirname(astroManifestPath);
 const docsManifest = JSON.parse(readFileSync(resolve(packageRoot, 'package.json'), 'utf8'));
 const projectRoot = process.env.TERRA_DOCS_ROOT ?? process.cwd();
 const publicDir = resolve(projectRoot, '.terra-docs/public');
@@ -32,7 +30,6 @@ const projectManifest = (() => {
   }
 })();
 const requireFromProject = createRequire(resolve(projectRoot, 'package.json'));
-
 function packageExportAliases() {
   if (!projectManifest.name || !projectManifest.exports) return [];
   const escapeRegex = (value) => value.replace(/[|\\{}()[\]^$+?.]/g, '\\$&');
@@ -51,36 +48,53 @@ function packageExportAliases() {
 }
 
 function astroPackageExportAliases() {
-  return Object.keys(astroManifest.exports)
+  return [
+    {
+      // Astro's MDX renderer imports this internal runtime path, which Astro
+      // does not expose through package exports. Resolve it from Docs' Astro.
+      find: /^astro\/runtime\/(.+)$/,
+      replacement: resolve(astroPackageRoot, 'dist/runtime/$1'),
+    },
+    ...Object.keys(astroManifest.exports)
     .filter((key) => key.startsWith('./') && !key.includes('*'))
     .map((key) => {
       const specifier = `astro${key.slice(1)}`;
-      try {
-        requireFromProject.resolve(specifier);
-        return null;
-      } catch {
-        // Package-owned Astro installation is the fallback for content-only repos.
-      }
       return {
         find: new RegExp(`^${specifier.replace(/[|\\{}()[\]^$+?.]/g, '\\$&')}$`),
         replacement: requireFromPackage.resolve(specifier),
       };
-    })
-    .filter(Boolean);
+    }),
+  ];
+}
+
+function dependencyManifest(name, resolver = requireFromPackage) {
+  let entry;
+  try {
+    entry = resolver.resolve(name);
+  } catch {
+    return null;
+  }
+  let directory = resolve(entry, '..');
+  while (directory !== resolve(directory, '..')) {
+    const manifestPath = resolve(directory, 'package.json');
+    try {
+      const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+      if (manifest.name === name) return manifest;
+    } catch {
+      // Keep walking through package subdirectories until the owning manifest is found.
+    }
+    directory = resolve(directory, '..');
+  }
+  return null;
 }
 
 function packageDependencyAliases() {
   return Object.keys(docsManifest.dependencies ?? {})
     .filter((name) => name !== 'astro')
     .flatMap((name) => {
-      const manifestPath = resolve(packageRoot, 'node_modules', name, 'package.json');
-      let dependencyManifest;
-      try {
-        dependencyManifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
-      } catch {
-        return [];
-      }
-      const subpaths = Object.keys(dependencyManifest.exports ?? {}).filter(
+      const manifest = dependencyManifest(name);
+      if (!manifest) return [];
+      const subpaths = Object.keys(manifest.exports ?? {}).filter(
         (key) => key.startsWith('./') && !key.includes('*'),
       );
       return [name, ...subpaths.map((key) => `${name}${key.slice(1)}`)].flatMap((specifier) => {
@@ -98,6 +112,35 @@ function packageDependencyAliases() {
     });
 }
 
+function stylingDependencyAliases() {
+  const stylingManifest =
+    projectManifest.name === '@terra-symposium/styling'
+      ? projectManifest
+      : dependencyManifest('@terra-symposium/styling', requireFromProject);
+  if (!stylingManifest) return [];
+  return Object.keys(stylingManifest.dependencies ?? {})
+    .filter((name) => name !== 'react' && name !== 'react-dom' && (name.includes('react') || ['cmdk', 'vaul'].includes(name)))
+    .flatMap((name) => {
+      const manifest = dependencyManifest(name, requireFromProject);
+      if (!manifest) return [];
+      const subpaths = Object.keys(manifest.exports ?? {}).filter(
+        (key) => key.startsWith('./') && !key.includes('*'),
+      );
+      return [name, ...subpaths.map((key) => `${name}${key.slice(1)}`)].flatMap((specifier) => {
+        try {
+          return [
+            {
+              find: new RegExp(`^${specifier.replace(/[|\\{}()[\]^$+?.]/g, '\\$&')}$`),
+              replacement: requireFromProject.resolve(specifier),
+            },
+          ];
+        } catch {
+          return [];
+        }
+      });
+    });
+}
+
 function sharedReactAliases() {
   const specifiers = [
     'react',
@@ -106,14 +149,32 @@ function sharedReactAliases() {
     'react/jsx-runtime',
     'react-dom',
     'react-dom/client',
-    'react-dom/server',
   ];
-  return specifiers.map((specifier) => {
+  return [
+    ...specifiers.map((specifier) => {
+    let replacement;
+    try {
+      // Externalized component dependencies resolve React from the consumer's
+      // installation during SSR. Prefer that same copy for bundled imports.
+      replacement = requireFromProject.resolve(specifier);
+    } catch {
+      // Content-only repositories can rely on the React runtime shipped by Docs.
+      replacement = requireFromPackage.resolve(specifier);
+    }
     return {
       find: new RegExp(`^${specifier.replace(/[|\\{}()[\]^$+?.]/g, '\\$&')}$`),
-      replacement: requireFromPackage.resolve(specifier),
+      replacement,
     };
-  });
+    }),
+    {
+      // The Docs editor imports `react-dom/server` for Markdown previews. Its
+      // Node entrypoint pulls `util.TextEncoder` into browser chunks, where
+      // `util` is externalized and the Docs workspace fails to hydrate. The
+      // browser server renderer also works during Node prerendering.
+      find: /^react-dom\/server$/,
+      replacement: requireFromProject.resolve('react-dom/server.browser'),
+    },
+  ];
 }
 
 export default defineConfig({
@@ -139,12 +200,12 @@ export default defineConfig({
         ...sharedReactAliases(),
         ...astroPackageExportAliases(),
         ...packageDependencyAliases(),
+        ...stylingDependencyAliases(),
       ],
       dedupe: ['react', 'react-dom'],
     },
     ssr: {
-      // Bundle React peer consumers with the package-owned React runtime so
-      // static rendering does not load two copies across pnpm virtual stores.
+      // Bundle the shared UI packages while retaining their peer runtime.
       noExternal: ['@terra-symposium/styling', '@terra-symposium/standards-error-boundaries'],
     },
     server: { fs: { allow: [projectRoot, packageRoot] } },

package/site/src/components/SkillsExplorer.tsx

@@ -9,9 +9,6 @@ IMPORTS
 // API
 import { useMemo, useState } from 'react';
 
-// COMPONENTS
-import { Button, Input, Label } from '@terra-symposium/styling/ui';
-
 /*//////////////////////////////////////////////////
 CONFIG
 //////////////////////////////////////////////////*/
@@ -133,8 +130,11 @@ export function SkillsExplorer({ skills }: { skills: SkillRecord[] }) {
             className="max-h-[78vh] min-w-0 overflow-auto rounded-xl border border-gray-6 bg-gray-1 p-3"
           >
             <div>
-              <Label htmlFor="skills-explorer-filter">Filter skills</Label>
-              <Input
+              <label className="text-sm font-medium text-gray-11" htmlFor="skills-explorer-filter">
+                Filter skills
+              </label>
+              <input
+                className="mt-1 w-full rounded-md border border-gray-6 bg-gray-1 px-3 py-2 text-sm text-gray-12 shadow-sm outline-none placeholder:text-gray-9 focus-visible:ring-2 focus-visible:ring-primary-8"
                 id="skills-explorer-filter"
                 onChange={(event) => setQuery(event.currentTarget.value)}
                 placeholder="Name, topic, or text"
@@ -154,17 +154,14 @@ export function SkillsExplorer({ skills }: { skills: SkillRecord[] }) {
                   <ul className="m-0 grid list-none gap-1 p-0">
                     {entries.map((skill) => (
                       <li key={skill.sourcePath}>
-                        <Button
-                          aria-current={
-                            selectedSkill?.sourcePath === skill.sourcePath ? 'true' : undefined
-                          }
-                          className="h-auto w-full justify-start px-3 py-2 text-left"
-                          onClick={() => setActivePath(skill.sourcePath)}
-                          variant={
+                        <button
+                          aria-pressed={selectedSkill?.sourcePath === skill.sourcePath}
+                          className={`grid h-auto w-full min-w-0 justify-start rounded-md border px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-8 ${
                             selectedSkill?.sourcePath === skill.sourcePath
-                              ? 'primary-tonal'
-                              : 'gray-ghost'
-                          }
+                              ? 'border-primary-7 bg-primary-3 text-primary-12'
+                              : 'border-transparent bg-transparent text-gray-11 hover:border-gray-6 hover:bg-gray-2 hover:text-gray-12'
+                          }`}
+                          onClick={() => setActivePath(skill.sourcePath)}
                           type="button"
                         >
                           <span className="grid min-w-0 gap-1">
@@ -176,7 +173,7 @@ export function SkillsExplorer({ skills }: { skills: SkillRecord[] }) {
                               {skill.directory}
                             </span>
                           </span>
-                        </Button>
+                        </button>
                       </li>
                     ))}
                   </ul>