@pure-ds/core 0.4.23 → 0.4.24

package/public/assets/pds/components/pds-form.js

@@ -11,7 +11,7 @@ function getStep(value) {
 // Default options for pds-form
 const DEFAULT_OPTIONS = {
   widgets: {
-    booleans: "toggle", // 'toggle' | 'checkbox'
+    booleans: "toggle", // 'toggle' | 'toggle-with-icons' | 'checkbox'
     numbers: "input", // 'input' | 'range'
     selects: "standard", // 'standard' | 'dropdown'
   },
@@ -669,10 +669,9 @@ export class SchemaForm extends LitElement {
       return useRange ? "input-range" : "input-number";
     }
     if (schema.type === "boolean") {
-      // Check if toggle should be used
-      const useToggle =
-        this.#getOption("widgets.booleans", "toggle") === "toggle";
-      return useToggle ? "toggle" : "checkbox";
+      // Return the actual boolean widget type
+      const booleanWidget = this.#getOption("widgets.booleans", "toggle");
+      return booleanWidget === "checkbox" ? "checkbox" : booleanWidget;
     }
     return "input-text";
   }
@@ -1489,14 +1488,20 @@ export class SchemaForm extends LitElement {
       this.#emit("pw:after-render-field", { path, schema: node.schema })
     );
 
-    // Add data-toggle for toggle switches
-    const isToggle = node.widgetKey === "toggle";
+    // Add data-toggle for toggle switches (both toggle and toggle-with-icons)
+    const isToggle = node.widgetKey === "toggle" || node.widgetKey === "toggle-with-icons";
+    const useIconToggle = node.widgetKey === "toggle-with-icons";
 
     // Add range-output class for range inputs if enabled
     const isRange = node.widgetKey === "input-range";
     const useRangeOutput =
       isRange && this.#getOption("enhancements.rangeOutput", true);
-    const labelClass = useRangeOutput ? "range-output" : undefined;
+    
+    // Build class list for label
+    const labelClasses = [];
+    if (useRangeOutput) labelClasses.push("range-output");
+    if (useIconToggle) labelClasses.push("with-icons");
+    const labelClass = labelClasses.length > 0 ? labelClasses.join(" ") : undefined;
 
     const renderControlAndLabel = (isToggle) => {
       if (isToggle) return html`${controlTpl} <span data-label>${label}</span>`;
@@ -1855,6 +1860,22 @@ export class SchemaForm extends LitElement {
       `
     );
 
+    // Toggle switch with icons (same as toggle, styling comes from .with-icons class on label)
+    this.defineRenderer(
+      "toggle-with-icons",
+      ({ id, path, value, attrs, set }) => html`
+        <input
+          id=${id}
+          name=${path}
+          type="checkbox"
+          .checked=${!!value}
+          ?disabled=${!!attrs.disabled}
+          ?required=${!!attrs.required}
+          @change=${(e) => set(!!e.target.checked)}
+        />
+      `
+    );
+
     this.defineRenderer(
       "select",
       ({ id, path, value, attrs, set, schema, ui, host }) => {

package/readme.md

@@ -246,10 +246,18 @@ Auto-defined when used. Lazy-loaded via dynamic imports. Styled by your tokens.
 npm install @pure-ds/core
 ```
 
-Assets (components, icons) are auto-copied to your project during install. To manually sync:
+**Post-install automation:**
+
+During installation, PDS automatically:
+- Creates a default `pds.config.js` (if one doesn't exist)
+- Copies Copilot/AI instructions to `.github/copilot-instructions.md`
+- Adds `pds:export` and `pds:build-icons` scripts to your `package.json`
+- Runs `pds:export` to generate static assets
+
+To manually re-sync assets:
 
 ```bash
-node node_modules/@pure-ds/core/packages/pds-cli/bin/postinstall.js
+npm run pds:export
 ```
 
 ### Lit Import Convention
@@ -1560,6 +1568,27 @@ await PDS.start({ design: myPreset });
 | `npm run pds:css-data` | Generate CSS IntelliSense (tokens, classes, attributes) |
 | `npm run pds:build-icons` | Build custom icon sprite |
 | `npm run sync-assets` | Sync assets between locations |
+| `npx pds-init-config` | Create default `pds.config.js` with helpful examples |
+
+### Initialize Configuration
+
+Create a starter `pds.config.js` file with commented examples:
+
+```bash
+# Create config in current directory
+npx pds-init-config
+
+# Force overwrite existing config
+npx pds-init-config --force
+```
+
+This generates a `pds.config.js` with:
+- Basic `mode` and `preset` settings
+- Commented examples for design token overrides
+- Template for custom progressive enhancers
+- Template for lazy-loaded component configuration
+
+**Note:** During `npm install`, PDS automatically creates this file if it doesn't exist.
 
 ### Export Static Assets
 
@@ -1859,10 +1888,61 @@ export default {
 ### Components Not Loading
 
 1. Verify components directory exists
-2. Check import map for `#pds/lit`
+2. Check import map for `#pds/lit` (required for Lit components - see below)
 3. Manually sync: `node node_modules/pure-ds/packages/pds-cli/bin/postinstall.js`
 4. Check browser console for errors
 
+### Lit Components Not Working
+
+**Symptoms:** `<pds-form>` or other Lit-based components fail to load with module resolution errors.
+
+**Components requiring Lit:**
+- `<pds-form>` - JSON Schema forms
+- `<pds-drawer>` - Drawer/sidebar panels
+
+**Solution:** Add import map to your HTML `<head>`:
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "#pds/lit": "/assets/js/lit.js"
+  }
+}
+</script>
+```
+
+Or in bundlers (Vite, Webpack, etc.):
+
+```javascript
+// vite.config.js
+export default {
+  resolve: {
+    alias: { '#pds/lit': 'lit' }
+  }
+};
+
+// webpack.config.js
+module.exports = {
+  resolve: {
+    alias: { '#pds/lit': 'lit' }
+  }
+};
+```
+
+**Note:** Wait for components to load before accessing their APIs:
+
+```javascript
+// ❌ Don't do this
+const form = document.querySelector('pds-form');
+form.getFormData(); // May fail if component not loaded yet
+
+// ✅ Do this instead
+await customElements.whenDefined('pds-form');
+const form = document.querySelector('pds-form');
+form.getFormData(); // Safe
+```
+
 ### Flash of Unstyled Content
 
 ```javascript

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

@@ -737,7 +737,6 @@ export const presets = {
       "Data-dense business intelligence app interface with organized hierarchy and professional polish",
     options: {
       liquidGlassEffects: false,
-      backgroundMesh: 2,
     },
     colors: {
       primary: "#0066cc", // corporate blue for primary actions
@@ -815,7 +814,7 @@ presets.default = {
   form: {
     options: {
       widgets: {
-        booleans: "toggle",      // 'toggle' | 'checkbox'
+        booleans: "toggle",      // 'toggle' | 'toggle-with-icons' | 'checkbox'
         numbers: "input",        // 'input' | 'range'
         selects: "standard",     // 'standard' | 'dropdown'
       },

package/src/js/pds.js

@@ -961,10 +961,27 @@ async function __setupAutoDefinerAndEnhancers(options) {
       enhancers: mergedEnhancers,
       onError: (tag, err) => {
         if (typeof tag === "string" && tag.startsWith("pds-")) {
-          // No config available in this context, using console
-          console.warn(
-            `⚠️ PDS component <${tag}> not found. Assets may not be installed.`
-          );
+          // Check if this is a Lit-dependent component with missing #pds/lit import map
+          const litDependentComponents = ['pds-form', 'pds-drawer'];
+          const isLitComponent = litDependentComponents.includes(tag);
+          const isMissingLitError = err?.message?.includes('#pds/lit') || 
+                                     err?.message?.includes('Failed to resolve module specifier');
+          
+          if (isLitComponent && isMissingLitError) {
+            console.error(
+              `❌ PDS component <${tag}> requires Lit but #pds/lit is not in import map.\n` +
+              `Add this to your HTML <head>:\n` +
+              `<script type="importmap">\n` +
+              `  { "imports": { "#pds/lit": "./path/to/lit.js" } }\n` +
+              `</script>\n` +
+              `See: https://github.com/pure-ds/core#lit-components`
+            );
+          } else {
+            // Generic component not found warning
+            console.warn(
+              `⚠️ PDS component <${tag}> not found. Assets may not be installed.`
+            );
+          }
         } else {
           console.error(`❌ Auto-define error for <${tag}>:`, err);
         }