30:T450,viewof img = { let images = [ "data-behind-notebook-5.jpg", "creative-control-5.jpg", "group-pointing-5.jpg", "magic-notebook-8.jpg", "private-notebooks-4.jpg", "collaborate-4.jpg", "mug-5.jpg", "paper-airplane-3.jpg", "briefcase-2.jpg" ].map(img => { let version = +img.match(/(\d).jpg$/)[1]; let slug = img.replace(/(\d).jpg$/, ""); return { slug, version }; }); let options = images.map((img, i) => { let opt = html`

`; opt.addEventListener("click", function() { ui.value = img; ui.dispatchEvent(new CustomEvent("input")); for (let im of ui.querySelectorAll("div")) { im.style.opacity = im === this ? 1 : 0.5; } }); return opt; }); let ui = html`

${options}

`; ui.value = images[0]; return ui; }31:T5c0,viewof screen = { let data = [ {screen: "07370E45-5687-4DDB-97AC-ECAD1DCAF117.png", description: "screen A"}, {screen: "5718D3FC-53E6-4A4C-8EC9-1BDFCE71CD35.png", description: "screen B"}, {screen: "BF02B323-C5D8-4365-90B2-C649D3B6CF83.png", description: "screen C"}, {screen: "2CC85CBA-CD9D-4E10-A7AC-78AFB3C790AB.png", description: "screen D"}, {screen: "8BBF5728-E460-499E-9356-83EAA4DE882B.png", description: "screen E"}, {screen: "2D8340C3-46CD-444E-B559-F44C6B7BFFA7.png", description: "screen F"}, {screen: "9CF05069-BB81-41C5-B727-477357410A09.png", description: "screen G"}, {screen: "3BF551DC-FBD6-43D6-B6E3-550CCCFCCB2D.png", description: "screen H"}, {screen: "538F0F60-F612-435E-897A-1DAA77CDC698.png", description: "screen J"} ]; let options = data.map((d, i) => { let opt = html`

`; opt.addEventListener("click", function(e) { ui.value = d; ui.dispatchEvent(new CustomEvent("input")); for (let im of ui.querySelectorAll("div")) { im.style.opacity = im === this ? 1 : 0.5; } }); return opt; }); let ui = html`

${options}

`; ui.value = data[0]; return ui; }32:[] 2e:{"title":"Screen Picker","cells":[{"id":0,"value":"md`# Screen Picker\n\ninspired by awesome [@tmcw/watercolor-versions](https://observablehq.com/@tmcw/watercolor-versions) notebook 💖`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"img","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"screen","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"html`