@pure-ds/core 0.5.5 → 0.5.7

package/INTELLISENSE.md

@@ -20,14 +20,14 @@ Pure Design System provides comprehensive IntelliSense support for both HTML and
 
 ## 📦 Generation
 
-IntelliSense data is automatically generated when you export PDS assets:
+IntelliSense data is automatically generated when you build PDS assets:
 
 ```bash
 # Generate all IntelliSense data (recommended)
 npm run pds:dx
 
-# Or as part of full export
-npm run pds:export
+# Or as part of full build
+npm run pds:build
 
 # Or generate individually
 npm run pds:manifest    # HTML IntelliSense only

package/dist/types/pds.d.ts

@@ -168,6 +168,8 @@ export class PDS extends EventTarget {
   static isLiveMode: () => boolean;
   static findComponentForElement?: (el: Element) => ComponentDef | null;
   static presets?: Record<string, any>;
+  static enhancerMetadata?: Array<{ selector: string; description?: string; demoHtml?: string }>;
+  static defaultEnhancers?: Array<any>;
   static ontology?: any;
   static enums?: Record<string, any>;
   static common?: Record<string, any>;

package/dist/types/public/assets/js/pds-manager.d.ts

@@ -1,5 +1,5 @@
-export { ot as startLive };
-declare function ot(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setupSystemListenerIfNeeded: r }: {
+export { nt as startLive };
+declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setupSystemListenerIfNeeded: r }: {
     emitReady: any;
     applyResolvedTheme: any;
     setupSystemListenerIfNeeded: any;

package/dist/types/public/assets/js/pds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds.js"],"names":[],"mappings":";AAqFooB;;;;EAAQ"}
+{"version":3,"file":"pds.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds.js"],"names":[],"mappings":";AA+BooB;;;;EAAQ"}

package/dist/types/src/js/pds-core/pds-enhancers-meta.d.ts

@@ -0,0 +1,13 @@
+/**
+ * PDS Enhancer Metadata (live mode only)
+ *
+ * This file contains description and demoHtml for runtime inspection tools.
+ * It is intentionally kept separate from pds-enhancers.js to keep the
+ * production pds.js bundle lean.
+ */
+export const defaultPDSEnhancerMetadata: {
+    selector: string;
+    description: string;
+    demoHtml: string;
+}[];
+//# sourceMappingURL=pds-enhancers-meta.d.ts.map

package/dist/types/src/js/pds-core/pds-enhancers-meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-enhancers-meta.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-enhancers-meta.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;IA+FE"}

package/dist/types/src/js/pds-core/pds-enhancers.d.ts

@@ -7,21 +7,6 @@
 export const defaultPDSEnhancers: {
     run: typeof enhanceAccordion;
     selector: string;
-    description: string;
-    demoHtml: string;
-}[];
-/**
- * Metadata-only export for build tools and documentation.
- * This is semantically identical to enhancerDefinitions but exported
- * for tooling that wants to explicitly access metadata without run functions.
- *
- * Build tools can safely import defaultPDSEnhancers too - Node.js won't
- * execute browser-only DOM code in the run functions.
- */
-export const defaultPDSEnhancerMetadata: {
-    selector: string;
-    description: string;
-    demoHtml: string;
 }[];
 declare function enhanceAccordion(elem: any): void;
 export {};

package/dist/types/src/js/pds-core/pds-enhancers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds-enhancers.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-enhancers.js"],"names":[],"mappings":"AAkfA;;;;;GAKG;AACH;;;;;IAGI;AAEJ;;;;;;;GAOG;AACH;;;;IAA8D;AAjZ9D,mDAeC"}
+{"version":3,"file":"pds-enhancers.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-enhancers.js"],"names":[],"mappings":"AAyZA;;;;;GAKG;AACH;;;IAGI;AAvYJ,mDAeC"}

package/dist/types/src/js/pds-core/pds-live.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds-live.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-live.js"],"names":[],"mappings":"AAuMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6NC;0BAhayB,oBAAoB"}
+{"version":3,"file":"pds-live.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-live.js"],"names":[],"mappings":"AAyMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6NC;0BAlayB,oBAAoB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pure-ds/core",
   "shortname": "pds",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "Pure Design System - Why develop a Design System when you can generate one?",
   "repository": {
     "type": "git",
@@ -26,11 +26,12 @@
   "module": "./public/assets/js/pds.js",
   "types": "./dist/types/pds.d.ts",
   "bin": {
-    "pds-export": "packages/pds-cli/bin/pds-static.js",
+    "pds-build": "packages/pds-cli/bin/pds-static.js",
     "pds-sync-assets": "packages/pds-cli/bin/sync-assets.js",
     "pds-build-icons": "packages/pds-cli/bin/pds-build-icons.js",
     "pds-setup-copilot": "packages/pds-cli/bin/pds-setup-copilot.js",
-    "pds-init-config": "packages/pds-cli/bin/pds-init-config.js"
+    "pds-init-config": "packages/pds-cli/bin/pds-init-config.js",
+    "pds-bootstrap": "packages/pds-cli/bin/pds-bootstrap.js"
   },
   "exports": {
     ".": {
@@ -75,9 +76,10 @@
     "build": "node esbuild-build.js",
     "types": "tsc -p tsconfig.json && node scripts/sync-types.mjs",
     "postinstall": "node packages/pds-cli/bin/postinstall.mjs",
-    "prepds:export": "npm run types",
-    "pds:export": "node packages/pds-cli/bin/pds-static.js",
+    "prepds:build": "npm run types",
+    "pds:build": "node packages/pds-cli/bin/pds-static.js",
     "pds:build-icons": "node packages/pds-cli/bin/pds-build-icons.js",
+    "pds:bootstrap": "node packages/pds-cli/bin/pds-bootstrap.js",
     "pds:manifest": "node packages/pds-cli/bin/generate-manifest.js",
     "pds:css-data": "node packages/pds-cli/bin/generate-css-data.js",
     "pds:dx": "node packages/pds-cli/bin/pds-dx.js",

package/packages/pds-cli/bin/pds-bootstrap.js

@@ -0,0 +1,291 @@
+#!/usr/bin/env node
+
+import { readFile, writeFile, mkdir, access } from 'fs/promises';
+import path from 'path';
+import { spawn } from 'child_process';
+
+const projectRoot = process.cwd();
+
+function log(message) {
+  console.log(message);
+}
+
+async function ensureDir(dirPath) {
+  await mkdir(dirPath, { recursive: true });
+}
+
+async function writeFileIfMissing(filePath, content) {
+  try {
+    await access(filePath);
+    log(`↪️  Skipping existing ${path.relative(projectRoot, filePath)}`);
+    return false;
+  } catch {
+    await ensureDir(path.dirname(filePath));
+    await writeFile(filePath, content, 'utf8');
+    log(`✅ Created ${path.relative(projectRoot, filePath)}`);
+    return true;
+  }
+}
+
+function getNpmCommand() {
+  return process.platform === 'win32' ? 'npm.cmd' : 'npm';
+}
+
+async function readPackageJson() {
+  const pkgPath = path.join(projectRoot, 'package.json');
+  const raw = await readFile(pkgPath, 'utf8');
+  return { pkgPath, pkg: JSON.parse(raw) };
+}
+
+async function writePackageJson(pkgPath, pkg) {
+  await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+}
+
+function buildIndexHtml() {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pure Design System</title>
+
+    <!-- PDS Styles -->
+    <link rel="stylesheet" href="/assets/css/app.css" />
+
+    <!-- Import Map for Lit components -->
+    <script type="importmap">
+      {
+        "imports": {
+          "#pds/lit": "/assets/js/lit.js"
+        }
+      }
+    </script>
+
+    <!-- App Script -->
+    <script type="module" src="/assets/js/app.js" defer></script>
+  </head>
+
+  <body class="container">
+    <header class="stack-sm">
+      <p class="badge">Pure Design System</p>
+      <h1>Design systems, generated.</h1>
+      <p class="text-muted">This starter is ready for your custom tokens, components, and brand.</p>
+    </header>
+
+    <main></main>
+
+    <footer class="text-sm text-muted">
+      <small>&copy; 2026 Pure Design System</small>
+    </footer>
+  </body>
+</html>
+`;
+}
+
+function buildAppCss() {
+  return `html:not(.pds-ready) {
+  opacity: 0;
+}
+
+main {
+  margin-top: var(--spacing-8);
+}
+`;
+}
+
+function buildWcHome() {
+  return `customElements.define(
+  "wc-home",
+  class extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = /*html*/ \`
+        <article class="card text-center border-gradient surface-translucent-50">
+          <header>
+            <h1>Welcome to Pure Design System</h1>
+            <h2>Beautiful backgrounds generated from your color palette</h2>
+          </header>
+          <div class="stack-lg">
+            <p>
+              This is a demo of a web component using Pure Design System.
+              It showcases the design tokens, components, and utilities provided by PDS.
+            </p>
+          </div>
+          <nav class="flex justify-center gap-sm">
+            <button class="btn-primary btn-lg" data-enhanced-btn-working="true">
+              Get Started
+            </button>
+            <button class="btn-secondary btn-lg" data-enhanced-btn-working="true">
+              Learn More
+            </button>
+          </nav>
+        </article>
+      \`;
+    }
+  }
+);
+`;
+}
+
+function buildAppJs() {
+  return `import { PDS } from '@pure-ds/core';
+import { config } from '../../pds.config.js';
+
+await PDS.start(config);
+PDS.theme = 'light';
+
+await import('/assets/wc/wc-home.js');
+
+const main = document.querySelector('main');
+if (main && !main.querySelector('wc-home')) {
+  main.innerHTML = '<wc-home></wc-home>';
+}
+`;
+}
+
+function buildEsbuildDevCjs() {
+  return `const esbuild = require('esbuild');
+
+async function start() {
+  const ctx = await esbuild.context({
+    entryPoints: ['src/js/app.js'],
+    outdir: 'public/assets/js',
+    bundle: true,
+    format: 'esm',
+    sourcemap: true,
+    publicPath: '/assets/js',
+    external: ['/assets/wc/*'],
+    logLevel: 'info'
+  });
+
+  await ctx.watch();
+  const { host, port } = await ctx.serve({ servedir: 'public', port: 4173 });
+  console.log('Dev server running at http://' + host + ':' + port);
+}
+
+start().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});
+`;
+}
+
+function buildEsbuildDevEsm() {
+  return `import esbuild from 'esbuild';
+
+const ctx = await esbuild.context({
+  entryPoints: ['src/js/app.js'],
+  outdir: 'public/assets/js',
+  bundle: true,
+  format: 'esm',
+  sourcemap: true,
+  publicPath: '/assets/js',
+  external: ['/assets/wc/*'],
+  logLevel: 'info'
+});
+
+await ctx.watch();
+const { host, port } = await ctx.serve({ servedir: 'public', port: 4173 });
+console.log('Dev server running at http://' + host + ':' + port);
+`;
+}
+
+async function ensurePackageScripts(pkg, pkgPath) {
+  pkg.scripts = pkg.scripts || {};
+  let changed = false;
+
+  if (!pkg.scripts.dev) {
+    pkg.scripts.dev = 'node esbuild-dev.js';
+    changed = true;
+  }
+
+  if (!pkg.scripts['pds:bootstrap']) {
+    pkg.scripts['pds:bootstrap'] = 'pds-bootstrap';
+    changed = true;
+  }
+
+  if (changed) {
+    await writePackageJson(pkgPath, pkg);
+    log('✅ Updated package.json scripts');
+  } else {
+    log('↪️  package.json scripts already configured');
+  }
+}
+
+async function ensureEsbuildDependency(pkg, pkgPath) {
+  const version = '^0.19.0';
+  const hasDev = pkg.devDependencies && pkg.devDependencies.esbuild;
+  const hasDep = pkg.dependencies && pkg.dependencies.esbuild;
+
+  if (hasDev || hasDep) {
+    log('↪️  esbuild already installed');
+    return false;
+  }
+
+  const npmCmd = getNpmCommand();
+  log('📦 Installing esbuild...');
+
+  await new Promise((resolve, reject) => {
+    const child = spawn(npmCmd, ['install', '--save-dev', `esbuild@${version}`], {
+      cwd: projectRoot,
+      stdio: 'inherit',
+      shell: true
+    });
+
+    child.on('exit', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`npm install failed with code ${code}`));
+    });
+  });
+
+  const updated = JSON.parse(await readFile(pkgPath, 'utf8'));
+  Object.assign(pkg, updated);
+  return true;
+}
+
+async function runDevServer() {
+  const npmCmd = getNpmCommand();
+  log('🚀 Starting dev server...');
+
+  await new Promise((resolve, reject) => {
+    const child = spawn(npmCmd, ['run', 'dev'], {
+      cwd: projectRoot,
+      stdio: 'inherit',
+      shell: true
+    });
+
+    child.on('exit', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`npm run dev exited with code ${code}`));
+    });
+  });
+}
+
+async function main() {
+  log('\n⚡ PDS Bootstrap\n');
+
+  const { pkgPath, pkg } = await readPackageJson();
+  const isModule = pkg.type === 'module';
+
+  await ensurePackageScripts(pkg, pkgPath);
+  await ensureEsbuildDependency(pkg, pkgPath);
+
+  await writeFileIfMissing(path.join(projectRoot, 'public', 'index.html'), buildIndexHtml());
+  await writeFileIfMissing(path.join(projectRoot, 'public', 'assets', 'css', 'app.css'), buildAppCss());
+  await writeFileIfMissing(path.join(projectRoot, 'src', 'js', 'app.js'), buildAppJs());
+  await writeFileIfMissing(
+    path.join(projectRoot, 'public', 'assets', 'wc', 'wc-home.js'),
+    buildWcHome()
+  );
+
+  const esbuildDevPath = path.join(projectRoot, 'esbuild-dev.js');
+  const esbuildDevContent = isModule ? buildEsbuildDevEsm() : buildEsbuildDevCjs();
+  await writeFileIfMissing(esbuildDevPath, esbuildDevContent);
+
+  log('\n✅ Bootstrap files ready.\n');
+  await runDevServer();
+}
+
+main().catch((err) => {
+  console.error('❌ Bootstrap failed:', err?.message || err);
+  process.exit(1);
+});

package/packages/pds-cli/bin/pds-static.js

@@ -601,7 +601,7 @@ if (process.argv[1]) {
   const scriptPath = fileURLToPath(import.meta.url);
   const argPath = process.argv[1];
   // Check if this is the main module being executed
-  if (argPath === scriptPath || argPath.endsWith('pds-static.js') || argPath.endsWith('pds-export')) {
+  if (argPath === scriptPath || argPath.endsWith('pds-static.js') || argPath.endsWith('pds-build')) {
     main();
   }
 }

package/packages/pds-cli/bin/postinstall.mjs

@@ -110,9 +110,9 @@ async function findConsumerRoot() {
 }
 
 /**
- * Ensure consumer package.json contains a handy export script
+ * Ensure consumer package.json contains a handy build script
  */
-async function ensureExportScript(consumerRoot) {
+async function ensureBuildScript(consumerRoot) {
   try {
     const consumerPkgPath = path.join(consumerRoot, 'package.json');
     const consumerPkgRaw = await readFile(consumerPkgPath, 'utf8');
@@ -120,8 +120,8 @@ async function ensureExportScript(consumerRoot) {
 
     consumerPkg.scripts = consumerPkg.scripts || {};
 
-  const desiredScriptName = 'pds:export';
-  const desiredScriptCmd = 'pds-export';
+  const desiredScriptName = 'pds:build';
+  const desiredScriptCmd = 'pds-build';
 
     if (!consumerPkg.scripts[desiredScriptName]) {
       consumerPkg.scripts[desiredScriptName] = desiredScriptCmd;
@@ -131,7 +131,7 @@ async function ensureExportScript(consumerRoot) {
       console.log(`🔧 Script "${desiredScriptName}" already present in consumer package.json`);
     }
   } catch (e) {
-    console.warn('⚠️  Could not ensure pds:export script in consumer package.json:', e.message);
+    console.warn('⚠️  Could not ensure pds:build script in consumer package.json:', e.message);
   }
 }
 
@@ -418,8 +418,8 @@ async function copyPdsAssets() {
     // Copy Copilot instructions to consumer project
     await copyCopilotInstructions(consumerRoot);
 
-    // Proactively add export & build-icons scripts to consumer package.json (still helpful)
-    await ensureExportScript(consumerRoot);
+    // Proactively add build & build-icons scripts to consumer package.json (still helpful)
+    await ensureBuildScript(consumerRoot);
     try {
       const consumerPkgPath = path.join(consumerRoot, 'package.json');
       const pkgRaw = await readFile(consumerPkgPath, 'utf8');
@@ -432,26 +432,34 @@ async function copyPdsAssets() {
         await writeFile(consumerPkgPath, JSON.stringify(pkgJson, null, 2) + '\n');
         console.log(`🧩 Added "${buildIconsName}" script to consumer package.json`);
       }
+
+      const bootstrapName = 'pds:bootstrap';
+      const bootstrapCmd = 'pds-bootstrap';
+      if (!pkgJson.scripts[bootstrapName]) {
+        pkgJson.scripts[bootstrapName] = bootstrapCmd;
+        await writeFile(consumerPkgPath, JSON.stringify(pkgJson, null, 2) + '\n');
+        console.log(`🧩 Added "${bootstrapName}" script to consumer package.json`);
+      }
     } catch (e) {
       console.warn('⚠️  Could not ensure pds:build-icons script in consumer package.json:', e?.message || e);
     }
 
     // NEW BEHAVIOR: We no longer copy web components automatically to /auto-define/.
-    // Reason: static export (pds:export) is now the single source of truth for placing
+    // Reason: static build (pds:build) is now the single source of truth for placing
     // components under [static.root]/components/ (see pds.config.js). This reduces
     // side-effects during npm install and avoids stale/legacy /auto-define/ layout.
     console.log('🚫 Skipping legacy auto-copy of components to ./public/auto-define/.');
     
-    // Auto-run pds:export by default (can be disabled with PDS_SKIP_EXPORT)
+    // Auto-run pds:build by default (can be disabled with PDS_SKIP_EXPORT)
     if (
       process.env.PDS_SKIP_EXPORT === '1' ||
       process.env.PDS_SKIP_EXPORT === 'true' ||
       process.env.npm_config_pds_skip_export === 'true'
     ) {
-      console.log('⏭️  Skipping pds:export (PDS_SKIP_EXPORT set)');
-      console.log('📦 To generate static assets run:   npm run pds:export');
+      console.log('⏭️  Skipping pds:build (PDS_SKIP_EXPORT set)');
+      console.log('📦 To generate static assets run:   npm run pds:build');
     } else {
-      console.log('🚀 Running pds:export automatically...');
+      console.log('🚀 Running pds:build automatically...');
       const staticModuleUrl = pathToFileURL(path.join(__dirname, 'pds-static.js')).href;
       const previousEnv = {
         PDS_POSTINSTALL: process.env.PDS_POSTINSTALL,
@@ -467,8 +475,8 @@ async function copyPdsAssets() {
         const { runPdsStatic } = await import(staticModuleUrl);
         await runPdsStatic({ cwd: consumerRoot });
       } catch (e) {
-        console.error('❌ Auto-export failed:', e?.message || e);
-        console.log('💡 You can run it manually: npm run pds:export');
+        console.error('❌ Auto-build failed:', e?.message || e);
+        console.log('💡 You can run it manually: npm run pds:build');
       } finally {
         if (previousEnv.PDS_POSTINSTALL === undefined) {
           delete process.env.PDS_POSTINSTALL;
@@ -510,7 +518,7 @@ async function copyPdsAssets() {
     }
   } catch (error) {
     console.error('❌ PDS postinstall failed (non-fatal):', error.message);
-    console.log('💡 Static export still available via: npm run pds:export');
+    console.log('💡 Static build still available via: npm run pds:build');
     process.exitCode = 1;
   }
 }

package/packages/pds-cli/bin/sync-assets.js

@@ -199,7 +199,7 @@ async function syncAssets(options = {}) {
   }
   await syncDirectory(autoDefineSource, autoDefineTarget, 'components/');
   
-  // Note: icons are not synced in this flow; use pds:export if needed
+  // Note: icons are not synced in this flow; use pds:build if needed
   
   // Update tracking file
   if (!dryRun) {