@ai.to.design/prototype 1.6.0

package/README.md

@@ -0,0 +1,25 @@
+# @ai.to.design/prototype
+
+In-browser variant-picker runtime for the [`ai-to-prototype`](https://github.com/I2olanD/ai.to.prototype) Claude Code plugin.
+
+It renders a carousel toolbar that lets you flip through generated UI component variants.
+The `prototype` skill injects the built bundle into a page temporarily while you pick variants, then strips it out on cleanup.
+
+## What it is
+
+A single self-contained IIFE (`dist/prototype.min.js`, ~8 KB, no dependencies) that scans the DOM for `data-aitd-*` attributes and mounts a variant picker.
+
+## Contract
+
+The runtime discovers variants via data attributes on the page:
+
+- Container: `data-aitd-variants`
+- Per variant: `data-aitd-variant` (1-based index), `data-aitd-label`, optional `data-aitd-description`
+- Optional container config: `data-aitd-transition`, `data-aitd-theme`, `data-aitd-position`, `data-aitd-branding`
+- Managed at runtime: `data-aitd-active` on the visible variant
+
+See the [DOM contract](https://github.com/I2olanD/ai.to.prototype/blob/main/plugin/skills/prototype/references/dom-contract-v1.md) for the full spec.
+
+## License
+
+MIT

package/dist/prototype.min.js

@@ -0,0 +1 @@
+var aitdPrototype=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={transition:`crossfade`,theme:`auto`,branding:!0,position:`bottom-center`},n=[`crossfade`,`slide`,`none`],r=[`light`,`dark`,`auto`],i=[`bottom-center`,`bottom-left`,`bottom-right`,`top-center`];function a(e){let a={transition:e.getAttribute(`data-aitd-transition`),theme:e.getAttribute(`data-aitd-theme`),branding:e.getAttribute(`data-aitd-branding`),position:e.getAttribute(`data-aitd-position`)},o=n.includes(a.transition)?a.transition:t.transition,s=r.includes(a.theme)?a.theme:t.theme,c=i.includes(a.position)?a.position:t.position;return{transition:o,theme:s,branding:a.branding===`false`?!1:a.branding===`true`?!0:t.branding,position:c}}var o=0;function s(){return o+=1,`aitd-group-${o}`}function c(e){let t=e.getAttribute(`data-aitd-variant`);if(t===null)return null;let n=parseInt(t,10);return Number.isNaN(n)?null:{element:e,index:n,label:e.getAttribute(`data-aitd-label`)??`Variant ${n}`,description:e.getAttribute(`data-aitd-description`)}}function l(e){let t=e.getAttribute(`data-aitd-variants`),n=t!==null&&t.length>0?t:s(),r=[];for(let t of Array.from(e.children))if(t instanceof HTMLElement){let e=c(t);e!==null&&r.push(e)}return r.sort((e,t)=>e.index-t.index),{container:e,id:n,variants:r,activeIndex:0,config:a(e)}}function u(){let e=document.querySelectorAll(`[data-aitd-variants]`);return Array.from(e).map(l)}function d(e){for(let t=0;t<e.variants.length;t++){let n=e.variants[t];t===0?(n.element.style.display=``,n.element.setAttribute(`data-aitd-active`,``)):n.element.style.setProperty(`display`,`none`,`important`)}}function f(e,t){if(t===e.activeIndex)return;let n=e.variants[e.activeIndex],r=e.variants[t];n.element.removeAttribute(`data-aitd-active`),r.element.setAttribute(`data-aitd-active`,``),e.activeIndex=t,p(e.config)?m(n.element,r.element):(n.element.style.setProperty(`display`,`none`,`important`),r.element.style.display=``)}function p(e){if(e.transition!==`crossfade`)return!1;try{return!window.matchMedia(`(prefers-reduced-motion: reduce)`).matches}catch{return!1}}function m(e,t){e.style.transition=`opacity 150ms ease`,e.style.opacity=`0`,t.style.display=``,t.style.opacity=`0`;let n=()=>{e.removeEventListener(`transitionend`,n),e.style.setProperty(`display`,`none`,`important`),e.style.removeProperty(`transition`),e.style.removeProperty(`opacity`),t.style.transition=`opacity 150ms ease`,t.style.opacity=`1`;let r=()=>{t.removeEventListener(`transitionend`,r),t.style.removeProperty(`transition`),t.style.removeProperty(`opacity`)};t.addEventListener(`transitionend`,r)};e.addEventListener(`transitionend`,n)}function h(e,t,n){e.textContent=`Showing variant: ${t.label} (${t.index} of ${n})`}function g(e,t,n){let r=e.querySelector(`[role='toolbar']`);r&&r.addEventListener(`keydown`,e=>{_(e,t,n)})}function _(e,t,n){let r=t.variants.length;if(e.key===`ArrowRight`)e.preventDefault(),n((t.activeIndex+1)%r);else if(e.key===`ArrowLeft`)e.preventDefault(),n((t.activeIndex-1+r)%r);else{let t=parseInt(e.key,10);t>=1&&t<=9&&t<=r&&(e.preventDefault(),n(t-1))}}function v(e){let t=`--bg:rgba(30,30,30,.9);--border:rgba(255,255,255,.12);--text:#eee;--muted:#999;--hover:rgba(255,255,255,.07)`,n=`--bg:rgba(255,255,255,.88);--border:rgba(0,0,0,.1);--text:#111;--muted:#666;--hover:rgba(0,0,0,.05)`,r=e.theme===`dark`?t:e.theme===`light`?n:``;return`.w{${r||n};display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:10px;padding:6px 12px;box-shadow:0 2px 12px rgba(0,0,0,.15);font:12px system-ui,-apple-system,sans-serif;color:var(--text);box-sizing:border-box;user-select:none}${r?``:`@media(prefers-color-scheme:dark){.w{${t}}}`}.nav-btn{all:unset;cursor:pointer;padding:4px 6px;border-radius:4px;opacity:.6;flex-shrink:0;font-size:14px;line-height:1}.nav-btn:hover{opacity:1;background:var(--hover)}.nav-btn:focus-visible{outline:2px solid var(--text);outline-offset:1px}.nav-btn:disabled{opacity:.2;cursor:default}.label{font-weight:600;white-space:nowrap;max-width:180px;text-overflow:ellipsis;overflow:hidden}.counter{color:var(--muted);font-size:11px;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.branding{opacity:.4;flex-shrink:0;display:flex;align-items:center}`}var y={"bottom-center":`bottom:16px;left:50%;transform:translateX(-50%)`,"bottom-left":`bottom:16px;left:16px`,"bottom-right":`bottom:16px;right:16px`,"top-center":`top:16px;left:50%;transform:translateX(-50%)`};function b(e){let t=document.createElement(`div`);return t.setAttribute(`style`,`position:fixed;z-index:2147483640;${y[e.position]}`),t}function x(){let e=document.createElement(`span`);return e.className=`branding`,e.setAttribute(`aria-hidden`,`true`),e.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="16" height="16" role="img" aria-label="ai.to.design"><defs><radialGradient id="aitd-c1" cx="50%" cy="5%" r="75%"><stop offset="0%" stop-color="#00FF9C" stop-opacity="1"/><stop offset="100%" stop-color="#00FF9C" stop-opacity="0"/></radialGradient><radialGradient id="aitd-c2" cx="95%" cy="62%" r="75%"><stop offset="0%" stop-color="#00D9FF" stop-opacity="1"/><stop offset="100%" stop-color="#00D9FF" stop-opacity="0"/></radialGradient><radialGradient id="aitd-c3" cx="72%" cy="97%" r="75%"><stop offset="0%" stop-color="#BF6FFF" stop-opacity="1"/><stop offset="100%" stop-color="#BF6FFF" stop-opacity="0"/></radialGradient><radialGradient id="aitd-c4" cx="28%" cy="97%" r="75%"><stop offset="0%" stop-color="#FF4D1C" stop-opacity="1"/><stop offset="100%" stop-color="#FF4D1C" stop-opacity="0"/></radialGradient><radialGradient id="aitd-c5" cx="5%" cy="62%" r="75%"><stop offset="0%" stop-color="#FF8A75" stop-opacity="1"/><stop offset="100%" stop-color="#FF8A75" stop-opacity="0"/></radialGradient><clipPath id="aitd-clip"><circle cx="200" cy="200" r="200"/></clipPath></defs><circle cx="200" cy="200" r="200" fill="#00FF9C"/><g clip-path="url(#aitd-clip)"><rect x="0" y="0" width="400" height="400" fill="url(#aitd-c1)"/><rect x="0" y="0" width="400" height="400" fill="url(#aitd-c2)"/><rect x="0" y="0" width="400" height="400" fill="url(#aitd-c3)"/><rect x="0" y="0" width="400" height="400" fill="url(#aitd-c4)"/><rect x="0" y="0" width="400" height="400" fill="url(#aitd-c5)"/></g></svg>`,e}function S(e,t){let n=document.createElement(`button`);return n.setAttribute(`type`,`button`),n.setAttribute(`aria-label`,t),n.className=`nav-btn`,n.textContent=e,n}function C(e,t){let n=e.querySelector(`.label`),r=e.querySelector(`.counter`);n&&(n.textContent=t.variants[t.activeIndex].label),r&&(r.textContent=`${t.activeIndex+1}/${t.variants.length}`)}function w(e){let t=b(e.config),n=t.attachShadow({mode:`closed`}),r=document.createElement(`style`);r.textContent=v(e.config),n.appendChild(r);let i=document.createElement(`div`);i.setAttribute(`role`,`toolbar`),i.setAttribute(`aria-label`,`UI prototype picker`),i.className=`w`,e.config.branding&&i.appendChild(x());let a=S(`◀`,`Previous variant`),o=S(`▶`,`Next variant`),s=document.createElement(`span`);s.className=`label`,s.textContent=e.variants[e.activeIndex].label;let c=document.createElement(`span`);c.className=`counter`,c.textContent=`${e.activeIndex+1}/${e.variants.length}`,i.appendChild(a),i.appendChild(s),i.appendChild(c),i.appendChild(o),n.appendChild(i);let l=document.createElement(`div`);l.setAttribute(`aria-live`,`polite`),l.setAttribute(`aria-atomic`,`true`),l.className=`sr-only`,n.appendChild(l);let u=t=>{f(e,t),C(n,e),h(l,e.variants[e.activeIndex],e.variants.length)};return a.addEventListener(`click`,()=>{let t=e.variants.length;u((e.activeIndex-1+t)%t)}),o.addEventListener(`click`,()=>{let t=e.variants.length;u((e.activeIndex+1)%t)}),g(n,e,u),document.body.appendChild(t),{host:t,shadow:n,liveRegion:l}}function T(){let e=u();for(let t of e)t.variants.length<2||(d(t),w(t))}function E(e){for(let t of e)for(let e of t.addedNodes)if(e instanceof HTMLElement&&e.hasAttribute(`data-aitd-variants`)){let t=l(e);t.variants.length>=2&&(d(t),w(t))}}return document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,T):T(),new MutationObserver(E).observe(document.body,{childList:!0,subtree:!0}),e.init=T,e})({});

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@ai.to.design/prototype",
+  "version": "1.6.0",
+  "description": "In-browser variant-picker runtime for ai.to.prototype: renders a carousel toolbar to flip through generated UI component variants via data-aitd-* attributes.",
+  "main": "dist/prototype.min.js",
+  "unpkg": "dist/prototype.min.js",
+  "jsdelivr": "dist/prototype.min.js",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "demo": "vite build && open demo/index.html",
+    "serve": "vite build && npx serve . -p 3333",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check --error-on-warnings src",
+    "lint:fix": "biome check --write src",
+    "format": "biome format --write src",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.13",
+    "jsdom": "^29.0.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "vitest": "^4.1.5"
+  },
+  "keywords": [
+    "ui",
+    "prototype",
+    "variant-picker",
+    "design",
+    "carousel",
+    "components"
+  ],
+  "license": "MIT",
+  "author": "Roland Wallner",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/I2olanD/ai.to.prototype.git",
+    "directory": "packages/prototype"
+  },
+  "homepage": "https://github.com/I2olanD/ai.to.prototype/tree/main/packages/prototype#readme",
+  "bugs": {
+    "url": "https://github.com/I2olanD/ai.to.prototype/issues"
+  }
+}