@pure-ds/core 0.5.4 → 0.5.6

package/src/js/pds-core/pds-enhancers.js

@@ -4,110 +4,21 @@
  * This file defines all progressive enhancements for the Pure Design System.
  * Each enhancer has:
  * - selector: CSS selector to target elements
- * - description: Human-readable explanation
- * - demoHtml: Example usage markup
  * - run: Enhancement function (added at the end)
  */
 
 // ============================================================================
-// ENHANCEMENT METADATA DEFINITIONS
+// ENHANCEMENT RUNTIME DEFINITIONS
 // ============================================================================
 
 const enhancerDefinitions = [
-  {
-    selector: ".accordion",
-    description:
-      "Ensures only one <details> element can be open at a time within the accordion.",
-    demoHtml: `
-      <div class="accordion">
-        <details>
-          <summary>Section 1</summary>
-          <p>Content for section 1</p>
-        </details>
-        <details>
-          <summary>Section 2</summary>
-          <p>Content for section 2</p>
-        </details>
-        <details>
-          <summary>Section 3</summary>
-          <p>Content for section 3</p>
-        </details>
-      </div>
-    `.trim(),
-  },
-  {
-    selector: "nav[data-dropdown]",
-    description:
-      "Enhances a nav element with data-dropdown to function as a dropdown menu.",
-    demoHtml: `
-      <nav data-dropdown>
-        <button class="btn-primary">Menu</button>
-        <menu>
-          <li><a href="#">Item 1</a></li>
-          <li><a href="#">Item 2</a></li>
-        </menu>
-      </nav>
-    `.trim(),
-  },
-  {
-    selector: "label[data-toggle]",
-    description: "Creates a toggle switch element from a checkbox.",
-    demoHtml: `
-      <label data-toggle>
-        <input type="checkbox">
-        <span data-label>Enable notifications</span>
-      </label>
-    `.trim(),
-  },
-  {
-    selector: 'input[type="range"]',
-    description: "Enhances range inputs with an attached <output>.",
-    demoHtml: `
-      <label class="range-output">
-        <span data-label>Volume</span>
-        <input type="range" min="0" max="100" value="40">
-      </label>
-    `.trim(),
-  },
-  {
-    selector: "form[data-required]",
-    description:
-      "Enhances required form fields using an asterisk in the label.",
-    demoHtml: `
-      <form data-required action="#" method="post">
-      <label>
-        <span>Field Label</span>
-        <input type="text" required>
-      </label>
-        <nav class="form-actions">
-          <button type="submit" class="btn-primary">Submit</button>
-        </nav>
-      </form>
-    `.trim(),
-  },
-  {
-    selector: "fieldset[role=group][data-open]",
-    description:
-      "Enhances a checkbox/radio group to be open (have a way to add and remove items).",
-    demoHtml: `
-      <fieldset role="group" data-open>
-        <label>
-          <span data-label>Test</span>
-          <input value="lala" name="test1" type="radio" />
-        </label>
-      </fieldset>
-    `.trim(),
-  },
-  {
-    selector: "button, a[class*='btn-']",
-    description:
-      "Automatically manages spinner icon for buttons with .btn-working class",
-    demoHtml: `
-      <button class="btn-primary btn-working">
-        <span>Saving</span>
-      </button>
-    `.trim(),
-  },
+  { selector: ".accordion" },
+  { selector: "nav[data-dropdown]" },
+  { selector: "label[data-toggle]" },
+  { selector: 'input[type="range"]' },
+  { selector: "form[data-required]" },
+  { selector: "fieldset[role=group][data-open]" },
+  { selector: "button, a[class*='btn-']" },
 ];
 
 // ============================================================================
@@ -507,12 +418,4 @@ export const defaultPDSEnhancers = enhancerDefinitions.map((meta) => ({
   run: enhancerRunners.get(meta.selector) || (() => {}),
 }));
 
-/**
- * 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 = enhancerDefinitions;
+// Metadata lives in pds-enhancers-meta.js (live-mode only).

package/src/js/pds-core/pds-live.js

@@ -6,6 +6,7 @@ import { Generator } from "./pds-generator.js";
 import { applyStyles, adoptLayers, adoptPrimitives } from "./pds-runtime.js";
 import { presets, defaultLog } from "./pds-config.js";
 import { defaultPDSEnhancers } from "./pds-enhancers.js";
+import { defaultPDSEnhancerMetadata } from "./pds-enhancers-meta.js";
 import { resolvePublicAssetURL } from "./pds-paths.js";
 import { loadTypographyFonts } from "../common/font-loader.js";
 import {
@@ -44,6 +45,7 @@ async function __attachLiveAPIs(PDS, { applyResolvedTheme, setupSystemListenerIf
   PDS.enums = enums;
   PDS.common = commonModule || {};
   PDS.presets = presets;
+  PDS.enhancerMetadata = defaultPDSEnhancerMetadata;
   PDS.applyStyles = function(generator) {
     return applyStyles(generator || Generator.instance);
   };

package/src/js/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/src/js/pds.js

@@ -64,6 +64,39 @@ import {
   stripFunctions,
 } from "./pds-core/pds-start-helpers.js";
 
+const __slugifyPreset = (str = "") =>
+  String(str)
+    .toLowerCase()
+    .replace(/&/g, " and ")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+
+const __defaultLog = function (level = "log", message, ...data) {
+  const debug = this?.debug || this?.design?.debug || false;
+  if (debug || level === "error" || level === "warn") {
+    const method = console[level] || console.log;
+    if (data.length > 0) {
+      method(message, ...data);
+    } else {
+      method(message);
+    }
+  }
+};
+
+async function __loadRuntimeConfig(assetRootURL, config = {}) {
+  if (config?.runtimeConfig === false) return null;
+  if (typeof fetch !== "function") return null;
+  const runtimeUrl =
+    config?.runtimeConfigURL || `${assetRootURL}pds-runtime-config.json`;
+  try {
+    const res = await fetch(runtimeUrl, { cache: "no-store" });
+    if (!res.ok) return null;
+    return await res.json();
+  } catch (e) {
+    return null;
+  }
+}
+
 /** Singleton runtime registry. Use `registry.setLiveMode()` to enable live mode or `registry.setStaticMode()` for static assets */
 PDS.registry = registry;
 
@@ -377,8 +410,52 @@ async function staticInit(config) {
     });
 
     // Normalize first-arg to allow { preset, design, enhancers }
-    const { presets, defaultLog } = await import("./pds-core/pds-config.js");
-    const normalized = normalizeInitConfig(config, {}, { presets, defaultLog });
+    const runtimeConfig = await __loadRuntimeConfig(assetRootURL, config);
+    const runtimeDesign =
+      runtimeConfig?.config?.design || runtimeConfig?.design || null;
+    const runtimePresetLabel =
+      runtimeConfig?.config?.preset || runtimeConfig?.preset || "default";
+    const runtimePresetId =
+      runtimeConfig?.presetId || __slugifyPreset(runtimePresetLabel) || "default";
+    const runtimePresets = runtimeDesign
+      ? {
+          [String(runtimePresetId).toLowerCase()]: runtimeDesign,
+          ...(String(runtimePresetId).toLowerCase() !== "default"
+            ? { default: runtimeDesign }
+            : {}),
+        }
+      : null;
+
+    const inlineDesign =
+      config?.design && typeof config.design === "object"
+        ? stripFunctions(config.design)
+        : null;
+    const inlinePresetId = __slugifyPreset(config?.preset || "default") || "default";
+    const inlinePresets = inlineDesign
+      ? {
+          [String(inlinePresetId).toLowerCase()]: inlineDesign,
+          ...(String(inlinePresetId).toLowerCase() !== "default"
+            ? { default: inlineDesign }
+            : {}),
+        }
+      : null;
+
+    const presets = runtimePresets || config?.presets || inlinePresets || {};
+    if (!Object.keys(presets || {}).length) {
+      throw new Error(
+        "PDS static mode requires preset data. Run pds:export or provide config.presets/config.design."
+      );
+    }
+    const normalizedInput = runtimeConfig?.config
+      ? {
+          ...runtimeConfig.config,
+          ...config,
+          preset: config?.preset || runtimePresetId,
+          design: inlineDesign || runtimeDesign || runtimeConfig?.config?.design,
+        }
+      : config;
+
+    const normalized = normalizeInitConfig(normalizedInput, {}, { presets, defaultLog: __defaultLog });
     const userEnhancers = normalized.enhancers;
 
     // 2) Derive static asset URLs from the normalized public root
@@ -389,7 +466,8 @@ async function staticInit(config) {
       utilities: `${assetRootURL}styles/pds-utilities.css.js`,
       styles: `${assetRootURL}styles/pds-styles.css.js`,
     };
-    staticPaths = { ...baseStaticPaths, ...staticPaths };
+    const runtimePaths = runtimeConfig?.paths || {};
+    staticPaths = { ...baseStaticPaths, ...runtimePaths, ...staticPaths };
 
     // 3) Static mode registry
     PDS.registry.setStaticMode(staticPaths);