[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_206":207,"_208":209},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_155":-5,"_20":156,"_22":157,"_158":159,"_160":161,"_26":162,"_24":163,"_164":-5,"_165":-5,"_166":54,"_167":168,"_169":46,"_170":-5,"_171":-5,"_172":173},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","kamalnrf","name","val-tool-playground-skill","branchName","main","version","path","references","project",{"_34":100,"_13":14,"_47":101,"_102":-5,"_103":54,"_104":105,"_106":105,"_107":108,"_109":-5,"_110":111,"_112":-5,"_113":54,"_114":-5,"_115":-5,"_116":49,"_117":118,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":133,"_134":135,"_136":137,"_138":54},"tree",[61,62,63,64],"file",{"_34":57,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":58,"_17":49,"_50":59,"_51":-5,"_53":54,"_55":-5,"_18":60},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":56},"id","98359832-30cb-11f1-9e09-42dde27851f2","pico-ui-patterns.md","fileId","983598f0-30cb-11f1-9e09-42dde27851f2","parentId","c32c39bf-9164-48f7-89fc-01465b8ba17e","branchId","08dbd314-30ca-11f1-9c88-42dde27851f2","branchVersion",3,"latest",true,"createdAt",["D",1775378641522],0,"fileType","content","# Pico CSS UI Patterns Reference\n\nReference for building tool val UIs with Pico CSS v2. Read this when implementing the UI layer.\n\n## Base Template\n\n```html\n\n\n\n \n \n \n Tool Name\n \n \n\n\n

\n\n\n```\n\nKey rules:\n- System theme only — never force light or dark. Include ``.\n- No external images or favicons — use emoji or inline SVG\n- No frameworks (React, etc.) for simple tools — vanilla HTML/CSS/JS\n\n## Header\n\nUse `` — Pico automatically mutes the subtitle:\n\n```html\n\n

📄 Tool Name

\n

What it does. Link to underlying library if wrapping one.

\n\n```\n\n## Tabs (custom — Pico has no tab component)\n\nThis is the one pattern we always write custom CSS for. Use ARIA roles:\n\n```html\n

\n \n \n

\n

...

\n

...

\n```\n\n```css\n[role=\"tablist\"] { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.5rem; }\n[role=\"tab\"] {\n background: none; border: none;\n border-bottom: 3px solid transparent; border-radius: 0;\n padding: 0.75rem 1.5rem; margin: 0;\n color: var(--pico-muted-color); font-weight: 500; cursor: pointer;\n}\n[role=\"tab\"][aria-selected=\"true\"] { color: var(--pico-primary); border-bottom-color: var(--pico-primary); }\n[role=\"tab\"]:hover { color: var(--pico-primary); }\n[role=\"tabpanel\"] { display: none; }\n[role=\"tabpanel\"].active { display: block; }\n```\n\n```javascript\ndocument.querySelectorAll('[role=\"tab\"]').forEach(tab => {\n tab.addEventListener('click', () => {\n document.querySelectorAll('[role=\"tab\"]').forEach(t => t.setAttribute('aria-selected', 'false'));\n document.querySelectorAll('[role=\"tabpanel\"]').forEach(p => p.classList.remove('active'));\n tab.setAttribute('aria-selected', 'true');\n document.getElementById(tab.getAttribute('aria-controls')).classList.add('active');\n });\n});\n```\n\n## Input Patterns\n\n**URL input with action button** — use Pico's fieldset group:\n```html\n

\n \n \n

\n```\n\n**Loading state** — Pico's `aria-busy` adds a spinner to buttons:\n```javascript\nfunction setLoading(btn, loading) {\n btn.setAttribute('aria-busy', loading);\n btn.disabled = loading;\n}\n```\n\n**Enter key to submit:**\n```javascript\nurlInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') fetchBtn.click(); });\n```\n\n## Output Patterns\n\n**Code/markdown output with copy button** (custom — no Pico equivalent):\n\n```html\n

\n \n

\n

\n```\n\n```css\n.output-wrap { position: relative; }\n.copy-btn {\n position: absolute; top: 0.5rem; right: 0.5rem;\n background: var(--pico-secondary-background); border: 1px solid var(--pico-muted-border-color);\n border-radius: 4px; padding: 0.3rem 0.6rem; font-size: 0.8rem; z-index: 1; cursor: pointer;\n}\npre.result {\n max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word;\n padding: 1rem; padding-top: 2.5rem; margin: 0; font-size: 0.85rem;\n}\n```\n\n**Metadata bar** (custom — no Pico equivalent):\n```css\n.meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8rem; color: var(--pico-muted-color); }\n```\n\n## Pico Native Components — Don't Reinvent\n\nBefore writing custom CSS, check if Pico already handles it:\n\n- **Cards** — `

` with `

` and `