@pure-ds/core 0.4.36 → 0.4.37

package/getting-started.md

@@ -48,6 +48,32 @@ await PDS.start(config); // That's it! Start writing semantic HTML.
 # Create or regenerate config with examples
 npx pds-init-config
 
+# Update AI assistant instructions
+npx pds-setup-copilot
+```
+
+---
+
+## 🤖 AI Assistant Integration (GitHub Copilot, Cursor, etc.)
+
+**PDS includes comprehensive LLM instructions that teach AI assistants to use PDS patterns correctly.**
+
+During installation, instructions are automatically copied to:
+- `.github/copilot-instructions.md` (GitHub Copilot)
+- `.cursorrules` (Cursor AI)
+
+These instructions teach your AI to:
+- ✅ Reference actual source files (`custom-elements.json`, `pds.css-data.json`, `pds-ontology.js`) instead of guessing
+- ✅ Use PDS primitives (`.card`, `.btn-primary`, etc.) instead of creating custom CSS
+- ✅ Apply progressive enhancements (`data-dropdown`, `data-toggle`) correctly
+- ✅ Use web components only when necessary (`<pds-tabstrip>`, `<pds-form>`)
+- ✅ Follow PDS best practices for forms, toasts, dialogs, and more
+
+**To manually install or update:**
+
+```bash
+npx pds-setup-copilot
+
 # Force overwrite existing config
 npx pds-init-config --force
 ```
@@ -316,14 +342,15 @@ PDS components auto-load when used:
 
 <!-- Tabs -->
 <pds-tabstrip>
-  <button slot="tab">Overview</button>
-  <div slot="panel">Overview content</div>
-  <button slot="tab">Details</button>
-  <div slot="panel">Details content</div>
+  <pds-tabpanel label="Overview">
+    <p>Overview content</p>
+  </pds-tabpanel>
+  <pds-tabpanel label="Details">
+    <p>Details content</p>
+  </pds-tabpanel>
 </pds-tabstrip>
 
-<!-- Toast notifications -->
-<pds-toaster id="toaster"></pds-toaster>
+<!-- Toast notifications (auto-created, no manual setup needed) -->
 <script>
   PDS.toast("Saved successfully!", { type: "success" });
 </script>

package/package.json

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

package/readme.md

@@ -628,11 +628,12 @@ Methods:
 **`<pds-tabstrip>`** - Accessible tab interface
 ```html
 <pds-tabstrip>
-  <button slot="tab">Overview</button>
-  <div slot="panel">Overview content</div>
-  
-  <button slot="tab">Details</button>
-  <div slot="panel">Details content</div>
+  <pds-tabpanel label="Overview">
+    <p>Overview content</p>
+  </pds-tabpanel>
+  <pds-tabpanel label="Details">
+    <p>Details content</p>
+  </pds-tabpanel>
 </pds-tabstrip>
 ```
 
@@ -663,14 +664,21 @@ Events:
 
 **`<pds-toaster>`** - Toast notifications
 ```html
-<pds-toaster id="toaster"></pds-toaster>
-
+<!-- No manual setup needed - PDS.toast() auto-creates the component -->
 <script>
-  const toaster = document.getElementById('toaster');
-  toaster.show({
-    message: 'Saved successfully!',
-    type: 'success',
-    duration: 3000
+  // Simple usage
+  await PDS.toast('Saved successfully!', { type: 'success' });
+  
+  // With custom duration
+  await PDS.toast('Processing...', { 
+    type: 'information',
+    duration: 5000 
+  });
+  
+  // Persistent (must be manually closed)
+  await PDS.toast('Important notice', { 
+    type: 'warning',
+    persistent: true 
   });
 </script>
 ```