Playground Improvements

Changes Made

1. Fixed Property Updates Not Applying ✅

• Improved property listener logic to handle different input types correctly
• Added explicit property setter in addition to setAttribute for better component compatibility
• Boolean attributes now properly set/remove (empty string for true, removed for false)
• Empty values now properly remove attributes instead of setting them to empty string

2. Badges Only for Non-UI Components ✅

• Added logic to detect non-UI components by category: state, routing, data, devtools, advanced, auth
• Non-UI components (like pan-bus, pan-store, pan-computed-state) now show a badge and description
• UI components (like pan-card, pan-button, pan-tabs) render cleanly without badges
• Canvas is now a clean, functional preview area

3. Clean Canvas for UI Components ✅

• Removed the generic fallback that added hints to all components
• UI components now render naturally with their default content
• Pre-defined demo content for common components (cards, forms, tables, tabs, modals)
• Canvas feels like a real preview area, not a debug interface

4. Per-Component Help Text System ✅

• Added helpText field support at both component and attribute levels
• Component-level help text shows in an expandable "Usage Guide" section
• Attribute-level help text shows as "Show example" expandable details
• Uses
  elements for clean, collapsible help
• Help text is displayed in monospace for code examples

5. Better Input Types for Complex Data ✅

• Added support for json, object, array, and textarea input types
• These render as </code> elements with appropriate styling</li> <li>Monospace font for easier JSON editing</li> <li>Updates on blur to avoid constant re-rendering while typing</li> </ul> <h2>How to Use Help Text</h2> <h3>Component-Level Help Text</h3> <p>Edit the <code>component-registry.json</code> or add to your component metadata:</p> <pre><code class="language-json">{ "name": "pan-tabs", "displayName": "Tabs", "description": "Tabbed interface component", "helpText": "<p>To add tabs, use the <code>tabs</code> attribute with a JSON array:</p><pre>[\n { \"label\": \"Tab 1\", \"content\": \"Content 1\" },\n { \"label\": \"Tab 2\", \"content\": \"Content 2\" }\n]</pre><p>Or add tab elements as children in HTML.</p>", "attributes": [...] }</code></pre> <h3>Attribute-Level Help Text</h3> <p>For complex attributes that need examples:</p> <pre><code class="language-json">{ "name": "config", "type": "json", "description": "Configuration object", "helpText": "{\n \"theme\": \"dark\",\n \"autoSave\": true,\n \"interval\": 5000\n}", "required": false }</code></pre> <h3>Supported Input Types</h3> <ul><li><code>string</code> (default) - Text input</li> <li><code>number</code> - Number input</li> <li><code>boolean</code> - Checkbox</li> <li><code>select</code> - Dropdown (requires <code>options</code> array)</li> <li><code>json</code> / <code>object</code> / <code>array</code> - Textarea with monospace font</li> <li><code>textarea</code> - Multiline text input</li> </ul> <h2>Examples</h2> <h3>State Management Component (Non-UI)</h3> <pre><code class="language-json">{ "name": "pan-computed-state", "displayName": "Computed State", "description": "Derived state with automatic dependency tracking", "category": "state", "helpText": "<p>Use to create computed values from other state:</p><pre>&lt;pan-computed-state sources=\"todos.list\" output=\"todos.stats\"&gt;\n &lt;script&gt;\n (todos) => ({\n total: todos.length,\n completed: todos.filter(t => t.completed).length\n })\n &lt;/script&gt;\n&lt;/pan-computed-state&gt;</pre>", "attributes": [ { "name": "sources", "type": "string", "description": "Comma-separated list of topics to watch", "helpText": "todos.list,user.preferences", "required": true }, { "name": "output", "type": "string", "description": "Topic to publish computed result to", "required": true } ] }</code></pre> <h3>UI Component (Shows Cleanly)</h3> <pre><code class="language-json">{ "name": "pan-card", "displayName": "Card", "description": "Card container with header and content", "category": "ui", "attributes": [ { "name": "header", "type": "string", "description": "Card header text", "default": "Card Title" }, { "name": "elevation", "type": "select", "description": "Shadow depth", "options": ["0", "1", "2", "3"], "default": "1" } ] }</code></pre> <h2>Testing the Changes</h2> <li>Start the playground:</li> <pre><code class="language-bash">cd playground python3 -m http.server 8080</code></pre> <li>Open http://localhost:8080/</li> <li>Try adding components:</li> - <strong>UI Component</strong> (like <code>pan-card</code>): Should render cleanly without badges - <strong>State Component</strong> (like <code>pan-store</code>): Should show a badge at the top <li>Select a component and test property editing:</li> - Text inputs should update on typing - Checkboxes should toggle attributes - Textareas should update on blur - Changes should reflect in the component immediately <li>Look for help text:</li> - Check if any components have the "💡 Usage Guide" section - Check if attributes have "Show example" links <h2>Future Enhancements</h2> <ul><li>Add more pre-defined demo content for components</li> <li>Create a help text generator script</li> <li>Add validation for JSON inputs with error messages</li> <li>Add "Copy example" button for help text code snippets</li> <li>Create templates for common component configurations</li> </ul> </article> <footer class="docs-footer"> <a href="https://github.com/chrisrobison/pan/edit/main/playground/IMPROVEMENTS.md" target="_blank"> Edit this page on GitHub </a> </footer> </main> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" integrity="sha384-F/bZzf7p3Joyp5psL90p/p89AZJsndkSoGwRpXcZhleCWhd8SnRuoYo4d0yirjJp" crossorigin="anonymous"></script> <script src="../assets/docs.js"></script> <pan-theme-provider></pan-theme-provider> </body> </html>