@pure-ds/core 0.5.20 → 0.5.22

package/dist/types/pds.d.ts

@@ -298,7 +298,6 @@ export class PDS extends EventTarget {
   readonly autoDefiner?: any;
 
   // Instance helpers
-  setTheme?(theme: 'light' | 'dark' | 'system', options?: { storageKey?: string; persist?: boolean }): Promise<string>;
   preloadCritical?(config: any, options?: { theme?: string; layers?: string[] }): void;
 }
 

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

@@ -1,5 +1,5 @@
-export { it as startLive };
-declare function it(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;
@@ -604,8 +604,8 @@ declare function it(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
         };
         "__#private@#l"(t: any): number;
         "__#private@#c"(t: any, e: any): number;
-        "__#private@#h"(t: any, e?: number): string;
         "__#private@#m"(t: any, e?: number): string;
+        "__#private@#h"(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): {
@@ -732,8 +732,8 @@ declare function it(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
         "__#private@#Z"(t: any): string;
         "__#private@#J"(t: any): string;
         "__#private@#Y"(t: any): string;
-        "__#private@#K"(): string;
         "__#private@#X"(): string;
+        "__#private@#K"(): string;
         "__#private@#ee"(): "" | "/* Liquid glass utility (opt-in via options.liquidGlassEffects) */\n.liquid-glass {\n  border-radius: var(--radius-lg);\n  /* Subtle translucent fill blended with surface */\n  background: color-mix(in oklab, var(--color-surface-subtle) 45%, transparent);\n\n  background-image: linear-gradient(\n    135deg,\n    rgba(255,255,255,0.35),\n    rgba(255,255,255,0.12)\n  );\n  /* Frosted glass blur + saturation */\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\n  backdrop-filter: blur(12px) saturate(140%);\n  /* Soft inner highlight and outer depth */\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,0.6),\n    inset 0 -40px 80px rgba(255,255,255,0.12),\n    0 10px 30px rgba(0,0,0,0.10);\n  /* Glossy border with slight light and dark edges */\n  border: 1px solid color-mix(in oklab, var(--color-primary-500) 22%, transparent);\n  outline: 1px solid color-mix(in oklab, #ffffff 18%, transparent);\n  outline-offset: -1px;\n}\n\nhtml[data-theme=\"dark\"] .liquid-glass {\n  background: color-mix(in oklab, var(--color-surface-inverse) 45%, transparent);\n  background-image: linear-gradient(\n    135deg,\n    color-mix(in oklab, var(--color-primary-300) 40%, transparent),\n    color-mix(in oklab, var(--color-surface-overlay) 48%, transparent)\n  );\n  box-shadow:\n    inset 0 1px 0 rgba(255,255,255,0.12),\n    inset 0 -40px 80px rgba(0,0,0,0.55),\n    0 18px 38px rgba(0,0,0,0.65);\n  border: 1px solid color-mix(in oklab, var(--color-primary-300) 26%, transparent);\n  outline: 1px solid color-mix(in oklab, #ffffff 16%, transparent);\n}\n\n/* Fallback when backdrop-filter isn't supported */\n@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {\n  .liquid-glass {\n    /* Strengthen fill a bit to compensate for lack of blur */\n    background: color-mix(in oklab, var(--color-surface-subtle) 70%, rgba(255,255,255,0.4));\n    box-shadow:\n      inset 0 1px 0 rgba(255,255,255,0.6),\n      0 10px 24px rgba(0,0,0,0.08);\n  }\n\n  html[data-theme=\"dark\"] .liquid-glass {\n    background: color-mix(in oklab, var(--color-surface-inverse) 70%, transparent);\n    box-shadow:\n      inset 0 1px 0 rgba(255,255,255,0.1),\n      0 18px 32px rgba(0,0,0,0.58);\n  }\n}\n";
         "__#private@#te"(): string;
         "__#private@#re"(): string;
@@ -748,8 +748,8 @@ declare function it(n: any, t: any, { emitReady: e, applyResolvedTheme: a, setup
         "__#private@#pe"(): string;
         "__#private@#ue"(): string;
         "__#private@#ge"(): string;
-        "__#private@#he"(): string;
         "__#private@#me"(): string;
+        "__#private@#he"(): string;
         "__#private@#o"(t: any): {
             h: number;
             s: number;

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

@@ -1,7 +1,9 @@
-export { b as PDS };
 declare var b: {
     addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: AddEventListenerOptions | boolean): void;
     dispatchEvent(event: Event): boolean;
     removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
 };
+declare function qs(t: any): void;
+declare function Hs(t: any): void;
+export { b as PDS, qs as applyResolvedTheme, Hs as setupSystemListenerIfNeeded };
 //# sourceMappingURL=pds.d.ts.map

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":";AA+BooB;;;;EAAQ"}
+{"version":3,"file":"pds.d.ts","sourceRoot":"","sources":["../../../../../public/assets/js/pds.js"],"names":[],"mappings":"AA+BooB;;;;EAAQ;AAAwyC,kCAAkX;AAAA,kCAA6pB"}

package/dist/types/public/assets/pds/components/pds-drawer.d.ts

@@ -19,6 +19,7 @@ declare const PDS: any;
  * @csspart content - The drawer content section
  */
 declare class PdsDrawer extends HTMLElement {
+    static "__#private@#idCounter": number;
     static get observedAttributes(): string[];
     _open: boolean;
     _position: string;

package/dist/types/public/assets/pds/components/pds-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds-drawer.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-drawer.js"],"names":[],"mappings":"AAAA,uBAAuB;AAEvB;;;;;;;;;;;;;;;;;;GAkBG;AACH;IA2BE,0CASC;IAhBC,eAAkB;IAClB,kBAAyB;IACzB,cAAqB;IACrB,mBAAoB;IACpB,mBAAoB;IACpB,oBAAuB;IAuBzB,cANU,OAAO,EAoBhB;IAtBD;;;;OAIG;IACH,YAHU,OAAO,CAKhB;IA0BD,kBAPU,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,EAc5C;IAhBD;;;;;OAKG;IACH,gBAJU,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAM5C;IAmBD,cAPU,QAAQ,GAAG,MAAM,EAY1B;IAdD;;;;;OAKG;IACH,YAJU,QAAQ,GAAG,MAAM,CAM1B;IAiBD,mBAPU,MAAM,EAkBf;IApBD;;;;;OAKG;IACH,iBAJU,MAAM,CAMf;IAuBD,mBAPU,MAAM,EAkBf;IApBD;;;;;OAKG;IACH,iBAJU,MAAM,CAMf;IAuBD,mBAPU,OAAO,EAYhB;IAdD;;;;;OAKG;IACH,iBAJU,OAAO,CAMhB;IAQD,iEAyCC;IAED,mCAgLC;IAED,6BAWC;IAID;;;;OAIG;IACH,0BAEC;IAED;;;;OAIG;IACH,2BAEC;IAED;;;;OAIG;IACH,4BAEC;IAED;;;;;;;;;;;;;;OAcG;IACH,yBAXW,GAAG,GAAC,WAAW,GAAC,MAAM,YAE9B;QAAyC,MAAM,GAAvC,GAAG,GAAC,WAAW,GAAC,MAAM;QACkB,QAAQ,GAAhD,QAAQ,GAAC,KAAK,GAAC,MAAM,GAAC,OAAO;QACZ,SAAS,GAA1B,MAAM;QACW,SAAS,GAA1B,MAAM;QACY,SAAS,GAA3B,OAAO;QACW,YAAY,GAA9B,OAAO;QACU,YAAY,GAA7B,MAAM;KACd,GAAU,OAAO,CAAC,IAAI,CAAC,CA6BzB;IAED;;;;OAIG;IACH;;;;;;;OAOG;IACH,+BAJW,GAAG,GAAC,WAAW,GAAC,MAAM,kBACtB,GAAG,GAAC,WAAW,GAAC,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CAyDzB;IAED;;;;OAIG;IACH,4BAEC;;CAqSF"}
+{"version":3,"file":"pds-drawer.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-drawer.js"],"names":[],"mappings":"AAAA,uBAAuB;AAEvB;;;;;;;;;;;;;;;;;;GAkBG;AACH;IACE,uCAAsB;IA8BtB,0CASC;IAhBC,eAAkB;IAClB,kBAAyB;IACzB,cAAqB;IACrB,mBAAoB;IACpB,mBAAoB;IACpB,oBAAuB;IAuBzB,cANU,OAAO,EAoBhB;IAtBD;;;;OAIG;IACH,YAHU,OAAO,CAKhB;IA0BD,kBAPU,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,EAc5C;IAhBD;;;;;OAKG;IACH,gBAJU,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAM5C;IAmBD,cAPU,QAAQ,GAAG,MAAM,EAY1B;IAdD;;;;;OAKG;IACH,YAJU,QAAQ,GAAG,MAAM,CAM1B;IAiBD,mBAPU,MAAM,EAkBf;IApBD;;;;;OAKG;IACH,iBAJU,MAAM,CAMf;IAuBD,mBAPU,MAAM,EAkBf;IApBD;;;;;OAKG;IACH,iBAJU,MAAM,CAMf;IAuBD,mBAPU,OAAO,EAYhB;IAdD;;;;;OAKG;IACH,iBAJU,OAAO,CAMhB;IAQD,iEA0CC;IAED,mCAgLC;IAED,6BAeC;IAID;;;;OAIG;IACH,0BAEC;IAED;;;;OAIG;IACH,2BAEC;IAED;;;;OAIG;IACH,4BAEC;IAED;;;;;;;;;;;;;;OAcG;IACH,yBAXW,GAAG,GAAC,WAAW,GAAC,MAAM,YAE9B;QAAyC,MAAM,GAAvC,GAAG,GAAC,WAAW,GAAC,MAAM;QACkB,QAAQ,GAAhD,QAAQ,GAAC,KAAK,GAAC,MAAM,GAAC,OAAO;QACZ,SAAS,GAA1B,MAAM;QACW,SAAS,GAA1B,MAAM;QACY,SAAS,GAA3B,OAAO;QACW,YAAY,GAA9B,OAAO;QACU,YAAY,GAA7B,MAAM;KACd,GAAU,OAAO,CAAC,IAAI,CAAC,CA6BzB;IAED;;;;OAIG;IACH;;;;;;;OAOG;IACH,+BAJW,GAAG,GAAC,WAAW,GAAC,MAAM,kBACtB,GAAG,GAAC,WAAW,GAAC,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CAyDzB;IAED;;;;OAIG;IACH,4BAEC;;CAwaF"}

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

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

@@ -48,9 +48,6 @@ 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;AAGD;;KAMiC,UAAK,EAAE,YAAY,kBAmDnD;AAED;;QASC;AAGD;;;;;GAmIC;AA/cM,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;AAED;;QASC;AAGD;;;;;GAmIC;AAnZM,qDAGI"}

package/dist/types/src/js/pds.d.ts

@@ -1,3 +1,5 @@
+export function applyResolvedTheme(raw: any): void;
+export function setupSystemListenerIfNeeded(raw: any): void;
 /**
  * Public PDS runtime object exported to consumers.
  *

package/dist/types/src/js/pds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds.d.ts","sourceRoot":"","sources":["../../../../src/js/pds.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;cAuBc,OAAO,4BAA4B,EAAE,WAAW;;;;iBAChD,CAAC,SAAS,CAAC,EAAE,OAAO,6BAA6B,EAAE,SAAS,KAAK,IAAI;;;;iBACrE,CAAC,UAAU,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,gBAAgB,CAAC,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC;;;;qBAChG,CAAC,UAAU,EAAE,UAAU,EAAE,gBAAgB,CAAC,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC;;;;sBAC7E,CAAC,GAAG,EAAC,MAAM,KAAK,aAAa;;AAW3C,+BAA+B;AAC/B,kBADW,MAAM,GAAG,OAAO,CACD;AArC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH;;;;GAIG;AACH;CAAoC"}
+{"version":3,"file":"pds.d.ts","sourceRoot":"","sources":["../../../../src/js/pds.js"],"names":[],"mappings":"AA6KA,mDAsBC;AAGD,4DAuCC;;;;;;;;;;;;;;;;;;;;;;;;;cAtNa,OAAO,4BAA4B,EAAE,WAAW;;;;iBAChD,CAAC,SAAS,CAAC,EAAE,OAAO,6BAA6B,EAAE,SAAS,KAAK,IAAI;;;;iBACrE,CAAC,UAAU,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,gBAAgB,CAAC,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC;;;;qBAChG,CAAC,UAAU,EAAE,UAAU,EAAE,gBAAgB,CAAC,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC;;;;sBAC7E,CAAC,GAAG,EAAC,MAAM,KAAK,aAAa;;AAW3C,+BAA+B;AAC/B,kBADW,MAAM,GAAG,OAAO,CACD;AArC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH;;;;GAIG;AACH;CAAoC"}

package/package.json

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

package/packages/pds-cli/bin/generate-css-data.js

@@ -395,14 +395,19 @@ function extractDataAttributes(ontology) {
 
   if (ontology.enhancements) {
     for (const enhancement of ontology.enhancements) {
+      const selector = typeof enhancement === 'string'
+        ? enhancement
+        : enhancement?.selector || enhancement?.demoHtml || '';
+      if (typeof selector !== 'string') continue;
+
       // Extract data attributes from selectors like "[data-dropdown]"
-      const matches = enhancement.match(/\[data-([^\]]+)\]/g);
+      const matches = selector.match(/\[data-([^\]]+)\]/g);
       if (matches) {
         for (const match of matches) {
           const attrName = match.slice(1, -1); // Remove [ and ]
           attributes.push({
             name: attrName,
-            description: `Enhancement: ${enhancement}`,
+            description: `Enhancement: ${selector}`,
             category: 'Data Enhancements'
           });
         }

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

@@ -4,6 +4,7 @@ import { readFile, writeFile, mkdir, access } from 'fs/promises';
 import { existsSync } from 'fs';
 import path from 'path';
 import { spawn } from 'child_process';
+import { buildStarterPdsConfig } from './templates/starter-templates.js';
 
 const projectRoot = process.cwd();
 
@@ -201,7 +202,7 @@ customElements.define(
             </p>
           </div>
           <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">
+            <a target="_blank" href="https://github.com/Pure-Web-Foundation/pure-ds/blob/main/getting-started.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">
@@ -231,11 +232,9 @@ customElements.define(
     }
 
     async connectedCallback() {
-      const componentStyles = PDS.createStylesheet(\`
-        :host {
-          display: block;
-        }
-      \`);
+      const componentStyles = PDS.createStylesheet(
+        "\n        :host {\n          display: block;\n        }\n      "
+      );
 
       await PDS.adoptLayers(
         this.shadowRoot,
@@ -243,40 +242,15 @@ customElements.define(
         [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.shadowRoot.innerHTML +=
+        "\n        <form>\n          <fieldset role=\"radiogroup\" aria-label=\"Theme\" class=\"buttons\">\n            <legend>Theme</legend>\n            <label>\n              <input type=\"radio\" name=\"theme\" value=\"system\">\n              <span>\n                <pds-icon icon=\"moon-stars\"></pds-icon>\n                System\n              </span>\n            </label>\n            <label>\n              <input type=\"radio\" name=\"theme\" value=\"light\">\n              <span>\n                <pds-icon icon=\"sun\"></pds-icon>\n                Light\n              </span>\n            </label>\n            <label>\n              <input type=\"radio\" name=\"theme\" value=\"dark\">\n              <span>\n                <pds-icon icon=\"moon\"></pds-icon>\n                Dark\n              </span>\n            </label>\n          </fieldset>\n        </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 });
+          PDS.theme = e.target.value;
+          PDS.toast("Theme changed to " + e.target.value, { duration: 2000 });
         }
       });
 
@@ -323,8 +297,9 @@ const parseHTML = (html) => {
 };
 
 const settingsBtn = parseHTML(
-  /*html*/
-  \`\n  <button id="settings-btn" class="icon-only btn-xs btn-outline" aria-label="Settings">\n    <pds-icon icon="gear"></pds-icon>\n  </button>\`,
+  \`<button id="settings-btn" class="icon-only btn-xs btn-outline" aria-label="Settings">
+    <pds-icon icon="gear"></pds-icon>  
+  </button>\`,
 )[0];
 
 document.body.appendChild(settingsBtn);
@@ -342,46 +317,7 @@ settingsBtn.addEventListener("click", () => {
 }
 
 function buildPdsConfig() {
-  return `const defaultEnhancers = Array.isArray(globalThis.PDS?.defaultEnhancers)
-  ? globalThis.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();
-        },
-      },
-    ],
-  },
-};
-`;
+  return buildStarterPdsConfig();
 }
 
 function buildEsbuildDevCjs() {

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

@@ -10,6 +10,7 @@ import { readFileSync } from 'fs';
 import { createHash } from 'crypto';
 import path from 'path';
 import { fileURLToPath, pathToFileURL } from 'url';
+import { buildStarterPdsConfig } from './templates/starter-templates.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const repoRoot = path.resolve(__dirname, '../../../');
@@ -156,67 +157,7 @@ async function ensurePdsConfig(consumerRoot, force = false) {
       // File doesn't exist, create it
     }
     
-    const defaultConfig = `const defaultEnhancers = Array.isArray(globalThis.PDS?.defaultEnhancers)
-  ? globalThis.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) => {
-          // make the border-gradient in PDS rotate slowly
-          let angle = 135;
-          const speed = 0.5; // degrees per frame (~30 degrees/second at 60fps)
-
-          function animate() {
-            angle = (angle + speed) % 360;
-            element.style.setProperty("--gradient-angle", \`\${angle}deg\`);
-            requestAnimationFrame(animate);
-          }
-
-          animate();
-        },
-      },
-    ],
-  },
-
-  // Uncomment to override preset design tokens:
-  // design: {
-  //   colors: {
-  //     primary: '#007acc',
-  //     secondary: '#5c2d91',
-  //     accent: '#ec4899'
-  //   },
-  //   typography: {
-  //     fontFamilyHeadings: 'Inter, sans-serif',
-  //     fontFamilyBody: 'Inter, sans-serif',
-  //     baseFontSize: 16,
-  //     fontScale: 1.25
-  //   },
-  //   spatialRhythm: {
-  //     baseUnit: 8,
-  //     scaleRatio: 1.5
-  //   }
-  // }
-  
-};
-`;
+    const defaultConfig = buildStarterPdsConfig();
     
     await writeFile(configPath, defaultConfig, 'utf8');
     console.log('📝 Created default pds.config.js');

package/packages/pds-cli/bin/templates/starter-templates.js

@@ -0,0 +1,62 @@
+export function buildStarterPdsConfig() {
+  return `const defaultEnhancers = Array.isArray(globalThis.PDS?.defaultEnhancers)
+  ? globalThis.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: "Make PDS border-gradient rotate slowly",
+        run: (element) => {
+          let angle = 135;
+          const speed = 0.5; // degrees per frame (~30 degrees/second at 60fps)
+
+          function animate() {
+            angle = (angle + speed) % 360;
+            element.style.setProperty("--gradient-angle", \`\${angle}deg\`);
+            requestAnimationFrame(animate);
+          }
+
+          animate();
+        },
+      },
+    ],
+  },
+
+  // Uncomment to override preset design tokens:
+  // design: {
+  //   colors: {
+  //     primary: '#007acc',
+  //     secondary: '#5c2d91',
+  //     accent: '#ec4899'
+  //   },
+  //   typography: {
+  //     fontFamilyHeadings: 'Inter, sans-serif',
+  //     fontFamilyBody: 'Inter, sans-serif',
+  //     baseFontSize: 16,
+  //     fontScale: 1.25
+  //   },
+  //   spatialRhythm: {
+  //     baseUnit: 8,
+  //     scaleRatio: 1.5
+  //   }
+  // }
+  
+};
+`;
+}