@pure-ds/core 0.5.10 → 0.5.12

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

@@ -1,5 +1,5 @@
-export { nt as startLive };
-declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setupSystemListenerIfNeeded: r }: {
+export { it as startLive };
+declare function it(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setupSystemListenerIfNeeded: r }: {
     emitReady: any;
     applyResolvedTheme: any;
     setupSystemListenerIfNeeded: any;
@@ -604,8 +604,8 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
         };
         "__#private@#l"(t: any): number;
         "__#private@#c"(t: any, e: any): number;
-        "__#private@#m"(t: any, e?: number): string;
         "__#private@#h"(t: any, e?: number): string;
+        "__#private@#m"(t: any, e?: number): string;
         "__#private@#z"(t: any, e: any, a?: number): string;
         "__#private@#M"(t: any, e: any, a: any): string;
         "__#private@#F"(t: any): {
@@ -718,10 +718,10 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
             externalPath: any;
         };
         "__#private@#D"(t: any): string;
-        "__#private@#N"(t: any): string;
         "__#private@#P"(t: any): string;
-        "__#private@#I"(t: any): string;
+        "__#private@#N"(t: any): string;
         "__#private@#U"(t: any): string;
+        "__#private@#I"(t: any): string;
         "__#private@#O"(t: any): string;
         "__#private@#H"(t: any): string;
         "__#private@#q"(t: any): string;
@@ -748,8 +748,8 @@ declare function nt(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
         "__#private@#pe"(): string;
         "__#private@#ue"(): string;
         "__#private@#ge"(): string;
-        "__#private@#me"(): string;
         "__#private@#he"(): string;
+        "__#private@#me"(): string;
         "__#private@#o"(t: any): {
             h: number;
             s: number;

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":"AAyMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6NC;0BAlayB,oBAAoB"}
+{"version":3,"file":"pds-live.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-live.js"],"names":[],"mappings":"AAwKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6NC;0BAjYyB,oBAAoB"}

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

@@ -48,6 +48,9 @@ export function resolveThemeAndApply({ manageTheme, themeStorageKey, applyResolv
     resolvedTheme: string;
     storedTheme: string;
 };
+export function createSetTheme({ PDS, defaultStorageKey, setupSystemListenerIfNeeded, onApply, }?: {
+    defaultStorageKey?: string;
+}): (theme: any, options?: {}) => Promise<any>;
 export function resolveRuntimeAssetRoot(config: any, { resolvePublicAssetURL }: {
     resolvePublicAssetURL: any;
 }): any;

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

@@ -1 +1 @@
-{"version":3,"file":"pds-start-helpers.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-start-helpers.js"],"names":[],"mappings":"AAmBA,sEAgCC;AAiBD,mDASC;AA6BD,8CAsBC;AAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGC;AAGD;;;;;;;;EAmCC;AAED;;QASC;AAGD;;;;;GAmIC;AAnZM,qDAGI"}
+{"version":3,"file":"pds-start-helpers.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-start-helpers.js"],"names":[],"mappings":"AAmBA,sEAgCC;AAiBD,mDASC;AA6BD,8CAsBC;AAGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGC;AAGD;;;;;;;;EAmCC;AAGD;;KAMiC,UAAK,EAAE,YAAY,kBAmDnD;AAED;;QASC;AAGD;;;;;GAmIC;AA/cM,qDAGI"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pure-ds/core",
   "shortname": "pds",
-  "version": "0.5.10",
+  "version": "0.5.12",
   "description": "Pure Design System - Why develop a Design System when you can generate one?",
   "repository": {
     "type": "git",

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

@@ -42,7 +42,7 @@ async function writePackageJson(pkgPath, pkg) {
   await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
 }
 
-function buildIndexHtml() {
+function buildIndexHtml({ version, generatedAt }) {
   return `<!doctype html>
 <html lang="en">
   <head>
@@ -62,15 +62,16 @@ function buildIndexHtml() {
       }
     </script>
 
+    <!-- Dev live-reload (safe in production, no-op without server) -->
+    <script type="module" src="/assets/js/dev-reload.js" defer></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>
+      <p class="auto-gen">Auto-generated by PDS ${version} at ${generatedAt}</p>
     </header>
 
     <main></main>
@@ -83,46 +84,209 @@ function buildIndexHtml() {
 `;
 }
 
+function buildDevReloadJs() {
+  return `const shouldConnect =
+  location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+
+if (shouldConnect) {
+  const reloadPort = 4174;
+  const endpoint = 'http://localhost:' + reloadPort + '/events';
+  const source = new EventSource(endpoint);
+
+  source.onmessage = (event) => {
+    if (event.data === 'reload') {
+      location.reload();
+    }
+  };
+
+  source.onerror = () => {
+    source.close();
+  };
+}
+`;
+}
+
 function buildAppCss() {
   return `html:not(.pds-ready) {
   opacity: 0;
 }
 
 main {
-  margin-top: var(--spacing-8);
+  margin: auto;
+}
+
+h1 {
+  background: linear-gradient(var(--gradient-angle, 135deg),
+    var(--color-primary-400),
+    var(--color-accent-400)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100dvh;
+  padding: 0;
+}
+
+header, footer {
+  padding: var(--spacing-4);
+}
+
+footer {
+  text-align: center;
+}
+
+.auto-gen {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+#settings-btn {
+  position: fixed;
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+}
+
+.hero {
+  padding: var(--spacing-8);
+  zoom: 1.15;
+  text-align: center;
+  border: var(--border-width-medium) solid transparent;
+  background: linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(var(--gradient-angle, 135deg), var(--color-primary-400), var(--color-accent-400)) border-box;
+  max-width: var(--max-w-lg);
+  border-radius: var(--radius-lg);
+  border-width: 3px;
+}
+
+.hero > div {
+  margin: var(--spacing-10) 0;
 }
 `;
 }
 
-function buildWcHome() {
-  return `customElements.define(
-  "wc-home",
+function buildMyHome() {
+  return `/**
+ * @file my-home.js
+ * @description A simple home component for the app.
+ */
+customElements.define(
+  "my-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 class="text-muted">Build on What Lasts</h2>
-          </header>
-          <div class="stack-lg">
+        <article class="hero">
+          <h1>Welcome to your new App</h1>
+          <div>
             <p>
-              This is a demo of a web component using Pure Design System.
-              It showcases the design tokens, components, and utilities provided by PDS.
+              This <code>&lt;my-home&gt;</code> Web Component is lazy-loaded and styled with Pure Design System.
+            </p>
+            <p>
+              You can start building your app by editing the files in <code>public/assets/my/</code> and <code>src/js/</code>.
             </p>
           </div>
-          <nav class="flex justify-center gap-sm">
-            <button class="btn-primary btn-lg" data-enhanced-btn-working="true">
-              Get Started
-            </button>
-            <a href="https://pureweb.dev" class="btn btn-secondary btn-lg" data-enhanced-btn-working="true">
-              Learn More
+          <nav>
+            <a target="_blank" href="https://github.com/Pure-Web-Foundation/pure-ds/blob/main/packages/pds-storybook/stories/GettingStarted.md" class="btn btn-primary btn-lg">
+              <pds-icon icon="rocket"></pds-icon> Get Started
+            </a>
+            <a target="_blank" href="https://puredesignsystem.z6.web.core.windows.net/storybook/" class="btn btn-secondary btn-lg">
+              <pds-icon icon="book-open"></pds-icon> Storybook
             </a>
           </nav>
         </article>
       \`;
     }
-  }
+  },
+);
+`;
+}
+
+function buildMyTheme() {
+  return `/**
+ * my-theme Web Component - allows users to select the app theme (light, dark, system)
+ *
+ * Uses Pure Design System (PDS) for styling and theming.
+ */
+customElements.define(
+  "my-theme",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+    }
+
+    async connectedCallback() {
+      const componentStyles = PDS.createStylesheet(\`
+        :host {
+          display: block;
+        }
+      \`);
+
+      await PDS.adoptLayers(
+        this.shadowRoot,
+        ["tokens", "primitives", "components", "utilities"],
+        [componentStyles],
+      );
+
+      this.shadowRoot.innerHTML += /*html*/ \`
+        <form>
+          <fieldset role="radiogroup" aria-label="Theme" class="buttons">
+            <legend>Theme</legend>
+            <label>
+              <input type="radio" name="theme" value="system">
+              <span>
+                <pds-icon icon="moon-stars"></pds-icon>
+                System
+              </span>
+            </label>
+            <label>
+              <input type="radio" name="theme" value="light">
+              <span>
+                <pds-icon icon="sun"></pds-icon>
+                Light
+              </span>
+            </label>
+            <label>
+              <input type="radio" name="theme" value="dark">
+              <span>
+                <pds-icon icon="moon"></pds-icon>
+                Dark
+              </span>
+            </label>
+          </fieldset>
+        </form>\`;
+
+      this.#updateCheckedState();
+
+      this.shadowRoot.addEventListener("change", (e) => {
+        if (e.target.type === "radio" && e.target.name === "theme") {
+          PDS.setTheme(e.target.value, { persist: true });
+          PDS.toast(\`Theme changed to \${e.target.value}\`, { duration: 2000 });
+        }
+      });
+
+      const observer = new MutationObserver(() => {
+        this.#updateCheckedState();
+      });
+
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["data-theme"],
+      });
+    }
+
+    #updateCheckedState() {
+      const currentTheme = PDS.theme || "system";
+      const radios = this.shadowRoot.querySelectorAll('input[type="radio"]');
+      radios.forEach((radio) => {
+        radio.checked = radio.value === currentTheme;
+      });
+    }
+  },
 );
 `;
 }
@@ -134,19 +298,132 @@ 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>';
+if (main && !main.querySelector('my-home')) {
+  main.innerHTML = '<my-home></my-home>';
 }
+
+const settingsBtn = document.createElement('button');
+settingsBtn.id = 'settings-btn';
+settingsBtn.className = 'icon-only btn-xs btn-outline';
+settingsBtn.setAttribute('aria-label', 'Settings');
+settingsBtn.innerHTML = '<pds-icon icon="gear"></pds-icon>';
+document.body.appendChild(settingsBtn);
+
+const drawer = document.createElement('pds-drawer');
+drawer.setAttribute('position', 'right');
+drawer.innerHTML = `
+  <div slot="drawer-header">Settings</div>
+  <div slot="drawer-content">
+    <my-theme></my-theme>
+  </div>
+`;
+document.body.appendChild(drawer);
+
+settingsBtn.addEventListener('click', () => {
+  drawer.open = true;
+});
+`;
+}
+
+function buildPdsConfig() {
+  return `let defaultEnhancers = [];
+if (typeof window !== "undefined") defaultEnhancers = PDS.defaultEnhancers;
+
+export const config = {
+  mode: "static",
+  preset: "social-feed",
+
+  autoDefine: {
+    predefine: ["pds-icon", "pds-drawer", "pds-toaster"],
+
+    // Custom component paths
+    mapper: (tag) => {
+      if (tag.startsWith("my-")) return "/assets/my/\${tag}.js";
+
+      // Return nothing to use PDS default mapping
+    },
+
+    enhancers: [
+      ...defaultEnhancers,
+      {
+        selector: ".hero",
+        description: "Adds tooltip on hover",
+        run: (element) => {
+          let angle = 135;
+          const speed = 0.5;
+
+          function animate() {
+            angle = (angle + speed) % 360;
+            element.style.setProperty("--gradient-angle", \`\${angle}deg\`);
+            requestAnimationFrame(animate);
+          }
+
+          animate();
+        },
+      },
+    ],
+  },
+};
 `;
 }
 
 function buildEsbuildDevCjs() {
   return `const esbuild = require('esbuild');
+const http = require('http');
+
+const reloadPort = 4174;
+const reloadClients = new Set();
+
+function startReloadServer() {
+  const server = http.createServer((req, res) => {
+    if (req.url !== '/events') {
+      res.writeHead(404);
+      res.end();
+      return;
+    }
+
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+      'Access-Control-Allow-Origin': '*'
+    });
+
+    res.write('retry: 1000\n\n');
+    reloadClients.add(res);
+
+    req.on('close', () => {
+      reloadClients.delete(res);
+    });
+  });
+
+  server.listen(reloadPort, () => {
+    console.log('Live reload listening on http://localhost:' + reloadPort + '/events');
+  });
+}
+
+function notifyReload() {
+  for (const client of reloadClients) {
+    client.write('data: reload\n\n');
+  }
+}
+
+function liveReloadPlugin() {
+  return {
+    name: 'live-reload',
+    setup(build) {
+      build.onEnd((result) => {
+        if (!result.errors.length) {
+          notifyReload();
+        }
+      });
+    }
+  };
+}
 
 async function start() {
+  startReloadServer();
   const ctx = await esbuild.context({
     entryPoints: ['src/js/app.js'],
     outdir: 'public/assets/js',
@@ -154,8 +431,9 @@ async function start() {
     format: 'esm',
     sourcemap: true,
     publicPath: '/assets/js',
-    external: ['/assets/wc/*'],
-    logLevel: 'info'
+    external: ['/assets/my/*'],
+    logLevel: 'info',
+    plugins: [liveReloadPlugin()]
   });
 
   await ctx.watch();
@@ -172,6 +450,59 @@ start().catch((err) => {
 
 function buildEsbuildDevEsm() {
   return `import esbuild from 'esbuild';
+import http from 'http';
+
+const reloadPort = 4174;
+const reloadClients = new Set();
+
+function startReloadServer() {
+  const server = http.createServer((req, res) => {
+    if (req.url !== '/events') {
+      res.writeHead(404);
+      res.end();
+      return;
+    }
+
+    res.writeHead(200, {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+      'Access-Control-Allow-Origin': '*'
+    });
+
+    res.write('retry: 1000\n\n');
+    reloadClients.add(res);
+
+    req.on('close', () => {
+      reloadClients.delete(res);
+    });
+  });
+
+  server.listen(reloadPort, () => {
+    console.log('Live reload listening on http://localhost:' + reloadPort + '/events');
+  });
+}
+
+function notifyReload() {
+  for (const client of reloadClients) {
+    client.write('data: reload\n\n');
+  }
+}
+
+function liveReloadPlugin() {
+  return {
+    name: 'live-reload',
+    setup(build) {
+      build.onEnd((result) => {
+        if (!result.errors.length) {
+          notifyReload();
+        }
+      });
+    }
+  };
+}
+
+startReloadServer();
 
 const ctx = await esbuild.context({
   entryPoints: ['src/js/app.js'],
@@ -180,13 +511,13 @@ const ctx = await esbuild.context({
   format: 'esm',
   sourcemap: true,
   publicPath: '/assets/js',
-  external: ['/assets/wc/*'],
-  logLevel: 'info'
+  external: ['/assets/my/*'],
+  logLevel: 'info',
+  plugins: [liveReloadPlugin()]
 });
 
 await ctx.watch();
 const { host, port } = await ctx.serve({ servedir: 'public', port: 4173 });
-console.log('Dev server running at http://' + host + ':' + port);
 `;
 }
 
@@ -294,12 +625,27 @@ async function main() {
   await ensurePackageScripts(pkg, pkgPath);
   await ensureEsbuildDependency(pkg, pkgPath);
 
-  await writeFileIfMissing(path.join(projectRoot, 'public', 'index.html'), buildIndexHtml());
+  const version = await getPdsCoreVersion();
+  const generatedAt = new Date().toLocaleString();
+
+  await writeFileIfMissing(
+    path.join(projectRoot, 'public', 'index.html'),
+    buildIndexHtml({ version, generatedAt })
+  );
   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, 'pds.config.js'), buildPdsConfig());
+  await writeFileIfMissing(
+    path.join(projectRoot, 'public', 'assets', 'js', 'dev-reload.js'),
+    buildDevReloadJs()
+  );
+  await writeFileIfMissing(
+    path.join(projectRoot, 'public', 'assets', 'my', 'my-home.js'),
+    buildMyHome()
+  );
   await writeFileIfMissing(
-    path.join(projectRoot, 'public', 'assets', 'wc', 'wc-home.js'),
-    buildWcHome()
+    path.join(projectRoot, 'public', 'assets', 'my', 'my-theme.js'),
+    buildMyTheme()
   );
 
   const esbuildDevPath = path.join(projectRoot, 'esbuild-dev.js');