Oat kitchensink dashboard demo

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_267":268,"_269":270},"routes/_app.x.$handle.$name",{"_101":100,"_32":44,"_109":87,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":59,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",35,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","index.html","latestPath","fileId","01a03514-76ac-76e3-8213-a88fd71c2b1b","name","fileType","content","\n\n \n \n \n Oat kitchensink dashboard demo — Oat UI\n\n \n \n \n\n \n \n \n \n \n\n \n

\n \n \n \n \n \n \n \n\n \n $\"Oat$ \n

\n\n

\n Home\n Demo\n GitHub\n \n \n More\n \n \n \n \n \n \n

\n GitHub\n
Home
Demo
Usage
Recipes
Customizing
Other tiny libs
Extensions
\n
\n
\n \n \n \n \n \n \n Components\n
\n
- All components
- \n Typography\n \n
- \n Accordion\n \n
- \n Alert\n \n
- \n Avatar\n \n
- \n Badge\n \n
- \n Breadcrumb\n \n
- \n Button\n \n
- \n Card\n \n
- \n Dialog\n \n
- \n Dropdown\n ^WC\n
- \n TagInput\n ^WC\n
- \n Form elements\n \n
- \n Upload\n ^WC\n
- \n Meter\n \n
- \n Pagination\n \n
- \n Progress\n \n
- \n Spinner\n \n
- \n Skeleton\n \n
- \n Sidebar\n \n
- \n Switch\n \n
- \n Table\n \n
- \n Tabs\n ^WC\n
- \n Tooltip\n \n
- \n Toast\n \n
- \n Grid\n \n
- \n Utils and helpers\n \n
\n
\n

\n \n

\n\n

\n \n","\n\n \n \n \n Oat kitchensink dashboard demo — Oat UI\n\n \n \n \n\n \n \n \n \n \n\n \n

\n \n \n \n \n \n \n \n\n \n $\"Oat$ \n

\n\n

\n Home\n Demo\n GitHub\n \n \n More\n \n \n \n \n \n \n

\n GitHub\n
Home
Demo
Usage
Recipes
Customizing
Other tiny libs
Extensions
\n
\n
\n \n \n \n \n \n \n Components\n
\n
- All components
- \n Typography\n \n
- \n Accordion\n \n
- \n Alert\n \n
- \n Avatar\n \n
- \n Badge\n \n
- \n Breadcrumb\n \n
- \n Button\n \n
- \n Card\n \n
- \n Dialog\n \n
- \n Dropdown\n ^WC\n
- \n TagInput\n ^WC\n
- \n Form elements\n \n
- \n Upload\n ^WC\n
- \n Meter\n \n
- \n Pagination\n \n
- \n Progress\n \n
- \n Spinner\n \n
- \n Skeleton\n \n
- \n Sidebar\n \n
- \n Switch\n \n
- \n Table\n \n
- \n Tabs\n ^WC\n
- \n Tooltip\n \n
- \n Toast\n \n
- \n Grid\n \n
- \n Utils and helpers\n \n
\n
\n

\n \n

\n\n

\n \n","createdAt",["D",1787597435401],"branchVersion","branchId","804b7fcc-f106-41da-8a94-f691e0da014e","id","e8f7429c-3476-45f0-bc9c-d4e3170650e0","oat-demo",["D",1787596928590],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Basic HTML starter template based on Glitch's starter","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/1e130d76-f5f9-42d2-df67-91517700ff00/square512?exp=1789581599&sig=8bdaadf0b7f2942f23620dd289d9b24f71599ef3d3f6caba05e68d9114961607","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","01a03514-76ac-76e3-8213-aed770b8b1c2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":55,"_105":106,"_107":25},"branch",{"_13":86,"_32":87,"_42":41,"_88":43,"_89":90,"_91":92,"_93":49,"_94":95,"_96":97,"_98":44,"_99":100},"isOwned",46,"main","projectId","forkedBranchId","7a3b261a-4186-11f0-ae9b-76b3cceeab13","forkedBranchVersion",76,"forkedProjectPrivacy","forkedProjectId","7a3abcf2-4186-11f0-ae9b-76b3cceeab13","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","nbbaier","handle","displayName","avatar","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":263,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":264,"_81":265,"_83":266,"_85":25},"tree",[226,227,228,229,230,231,232,233,234],"files",[226,227,228,229,230,231,232,233,234],"counts",{"_216":63,"_217":158,"_218":63,"_219":220,"_221":222},"contents",[142,143,144,145,146,147,148,149,150],"upstreamProject",{"_42":95,"_32":139,"_51":52,"_53":54,"_48":49,"_79":140},"upstreamBranch",{"_42":90,"_37":133,"_134":135,"_32":87,"_88":95,"_13":92,"_89":-5,"_91":-5,"_136":137,"_46":-5,"_85":25,"_48":49,"_99":138,"_64":97,"_98":139},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1749070628054],"updatedAt",["D",1779896149804],"lockfileKey","1779896350378-esm.town_v_templates_basic-html-starter@76-main","templates","basic-html-starter",{"_101":138,"_108":141},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789581599&sig=bed85510764f48a9de82762af4b4ce99c525d0ab75e5b57f327c71a53e183d4a",{"_42":210,"_32":211,"_30":212,"_154":-5,"_40":41,"_39":158,"_156":59,"_37":213,"_13":63,"_33":20,"_34":214,"_24":25,"_160":-5,"_27":215},{"_42":204,"_32":205,"_30":206,"_154":-5,"_40":41,"_39":158,"_156":59,"_37":207,"_13":63,"_33":20,"_34":208,"_24":25,"_160":-5,"_27":209},{"_42":196,"_32":197,"_30":198,"_154":-5,"_40":41,"_39":199,"_156":59,"_37":200,"_13":201,"_33":20,"_34":202,"_24":25,"_160":-5,"_27":203},{"_42":192,"_32":28,"_30":31,"_154":-5,"_40":41,"_39":14,"_156":25,"_37":193,"_13":194,"_33":20,"_34":36,"_24":25,"_160":-5,"_27":195},{"_42":186,"_32":187,"_30":57,"_154":-5,"_40":41,"_39":188,"_156":59,"_37":189,"_13":158,"_33":190,"_34":184,"_24":25,"_160":-5,"_27":191},{"_42":178,"_32":179,"_30":180,"_154":-5,"_40":41,"_39":181,"_156":59,"_37":182,"_13":183,"_33":20,"_34":184,"_24":25,"_160":-5,"_27":185},{"_42":170,"_32":171,"_30":172,"_154":-5,"_40":41,"_39":173,"_156":59,"_37":174,"_13":175,"_33":167,"_34":176,"_24":25,"_160":-5,"_27":177},{"_42":162,"_32":163,"_30":164,"_154":-5,"_40":41,"_39":165,"_156":59,"_37":166,"_13":158,"_33":167,"_34":168,"_24":25,"_160":-5,"_27":169},{"_42":151,"_32":152,"_30":153,"_154":-5,"_40":41,"_39":155,"_156":59,"_37":157,"_13":158,"_33":20,"_34":159,"_24":25,"_160":-5,"_27":161},"09ca7194-b9a0-4bf1-a35a-7468050f3646","style.css","01a03514-76ac-76e3-8213-b678dc2d8f42","parentId",8,"latest",["D",1787596994002],1,"body.home {\n section {\n margin-bottom: var(--space-18);\n }\n\n nav[data-topnav] {\n .favicon {\n display: inline-block;\n }\n .logo {\n display: none;\n }\n }\n}\nbody:not(.home) {\n nav[data-topnav] {\n .favicon {\n display: none;\n }\n .logo {\n display: inline-block;\n }\n }\n}\n\nnav[data-topnav] {\n font-size: var(--text-7);\n\n button[data-sidebar-toggle] {\n margin-left: calc(-1.1 * var(--space-4));\n left: 0;\n height: 100%;\n border: 0;\n margin-right: 10px;\n padding: 6px 10px;\n line-height: 1;\n color: var(--foreground);\n transition:\n background-color var(--transition-fast),\n transform var(--transition-fast);\n\n &:hover {\n background-color: var(--accent);\n }\n\n &:active {\n transform: translateY(1px);\n }\n\n svg {\n opacity: 0.8;\n }\n }\n\n a,\n button {\n color: var(--muted-foreground);\n }\n\n img {\n height: 24px;\n }\n\n .branding {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n }\n\n .favicon {\n line-height: 1;\n }\n\n .hstack {\n gap: var(--space-6);\n }\n}\n\n.footer {\n margin: var(--space-6) 0;\n}\n\n.intro {\n margin-bottom: var(--space-12);\n .logo img {\n max-height: 60px;\n }\n .title {\n margin-bottom: var(--space-2);\n }\n .slogan {\n margin: 0 0 var(--space-12) 0;\n font-weight: normal;\n }\n}\n\n.features {\n display: grid;\n gap: var(--space-8);\n grid-template-columns: repeat(2, 1fr);\n margin-bottom: var(--space-12);\n}\n\n.main-sidebar {\n .logo {\n border-bottom: none;\n padding-bottom: var(--space-4);\n img {\n max-height: 40px;\n }\n }\n nav sup {\n color: var(--muted-foreground);\n font-size: var(--text-8);\n margin-left: var(--space-1);\n }\n footer button {\n width: 100%;\n }\n}\n\n/* Component demo styles */\n.demo-section {\n margin-bottom: var(--space-18);\n padding-bottom: var(--space-8);\n}\n\n.demo-section:last-child {\n border-bottom: none;\n}\n\n.demo-box {\n border: 1px solid var(--border);\n padding: var(--space-5);\n border-radius: 3px;\n margin-top: var(--space-4);\n\n p {\n margin: 0;\n }\n}\n\n.demo-box .demo-content {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n align-items: center;\n}\n\n#accordion .demo-content,\n#typography .demo-content,\n#tabs .demo-content,\n#skeleton .demo-content {\n display: block;\n}\n#alert .demo-content {\n display: grid;\n}\n\n#typography .demo-box,\n.demo-section[id=\"typography\"] .demo-box {\n display: block;\n}\n\n.ot-demo {\n &.compact .demo-content {\n max-width: 400px;\n }\n\n pre {\n display: none;\n }\n\n /* Fullscreen side-by-side editor */\n &.fullscreen {\n background: rgb(from var(--background) r g b / 0.95);\n position: fixed;\n z-index: 9999;\n inset: 0;\n padding: var(--space-4);\n overflow: hidden;\n\n ot-tabs {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n height: 100%;\n\n [role=\"tablist\"] {\n display: none;\n }\n\n [role=\"tabpanel\"],\n [role=\"tabpanel\"][hidden] {\n display: flex !important;\n flex-direction: column;\n overflow: auto;\n min-height: 0;\n }\n }\n\n .demo-box {\n flex: 1;\n margin-top: 0;\n overflow: auto;\n }\n\n pre {\n flex: 1;\n overflow: auto;\n margin: 0;\n padding-top: 40px;\n\n menu.actions {\n opacity: 1;\n }\n }\n }\n}\n\n.demo-grid {\n gap: var(--space-2);\n [class*=\"col-\"] {\n background: var(--primary);\n color: var(--primary-foreground);\n padding: var(--space-2);\n text-align: center;\n border-radius: 3px;\n }\n\n .row:not(:last-child) {\n margin-bottom: var(--space-4);\n }\n}\n\n/* Swap theme icons */\nhtml[data-theme=\"dark\"] .icon-dark {\n display: none;\n}\nhtml:not([data-theme=\"dark\"]) .icon-light {\n display: none;\n}\n\n@layer components {\n .container {\n max-width: 900px;\n }\n}\n\n.section-permalink {\n display: block;\n margin-top: var(--space-4);\n font-size: var(--text-7);\n color: var(--muted-foreground);\n}\n\n.section-permalink:hover {\n color: var(--foreground);\n}\n\n.sidebar-example .demo-box {\n position: relative;\n height: 300px;\n border: 1px solid var(--border);\n border-radius: var(--radius-medium);\n overflow: hidden;\n\n padding: 0;\n}\n\npre {\n position: relative;\n\n code {\n display: block;\n }\n\n menu.actions {\n opacity: 0;\n position: absolute;\n top: var(--space-3);\n right: var(--space-3);\n transition: opacity 150ms ease-in-out;\n }\n\n &:hover menu.actions {\n opacity: 1;\n }\n\n menu.actions button {\n background: rgba(0, 0, 0, 0.4);\n color: #bbb;\n border: 1px solid #bbb;\n padding: 2px var(--space-3);\n margin-left: 5px;\n &:hover {\n background-color: rgba(0, 0, 0);\n }\n }\n\n [contenteditable] {\n outline: none;\n }\n}\n\n@media (max-width: 768px) {\n .features {\n grid-template-columns: 1fr;\n }\n nav[data-topnav] .hstack {\n display: none;\n }\n}\n@media (max-width: 450px) {\n menu.actions button {\n &.btn-edit {\n display: none;\n }\n }\n}","label",[152],"0517ce8f-ee1a-4b2b-b500-8d9ec396ea2b","script.js","01a03514-76ac-76e3-8213-b0a050ea258a",12,["D",1787597038928],"script","document.addEventListener(\"DOMContentLoaded\", () => {\n // Iterate over Zola syntax highlighte code blocks and create 'Preview' and 'Code' tabs.\n document.querySelectorAll(\"pre\").forEach((pre) => {\n // Insert the buttons menu before the code block.\n const menu = document.createElement(\"menu\");\n menu.className = \"actions buttons\";\n pre.prepend(menu);\n\n // 'Copy' button.\n {\n const b = document.createElement(\"button\");\n b.className = \"ghost small\";\n b.textContent = \"Copy\";\n b.setAttribute(\"aria-label\", \"Copy code to clipboard\");\n b.addEventListener(\"click\", () => {\n navigator.clipboard.writeText(\n pre.querySelector(\"code\").textContent.trim(),\n ).then(() => {\n b.textContent = \"Copied\";\n setTimeout(() => b.textContent = \"Copy\", 2000);\n });\n });\n menu.appendChild(b);\n }\n\n // Demo code block or just a normal code block?\n const demo = pre.closest(\".ot-demo\");\n if (!demo) {\n return;\n }\n\n pre.style.display = \"block\";\n const code = pre.querySelector(\"code\");\n const rawHTML = code.textContent;\n\n demo.innerHTML = `\n \n

\n \n \n

${rawHTML}

\n \n `;\n\n const panel = demo.querySelector(\n ':scope > ot-tabs > [role=\"tabpanel\"]:last-child',\n );\n panel.appendChild(pre);\n\n // Make the code block editable and update the preview on change.\n const content = demo.querySelector(\".demo-content\");\n const el = code || pre;\n const highlighted = el.innerHTML;\n el.setAttribute(\"contenteditable\", \"plaintext-only\");\n el.setAttribute(\"spellcheck\", \"false\");\n el.addEventListener(\"input\", () => content.innerHTML = el.textContent);\n\n // 'Reset' button.\n {\n const b = document.createElement(\"button\");\n b.className = \"ghost small btn-reset\";\n b.textContent = \"Reset\";\n b.setAttribute(\"aria-label\", \"Reset code to original\");\n b.addEventListener(\"click\", () => {\n el.innerHTML = highlighted;\n content.innerHTML = rawHTML;\n });\n menu.prepend(b);\n }\n\n // 'Edit' button to toggle fullscreen side-by-side editubg.\n {\n const b = document.createElement(\"button\");\n b.className = \"ghost small btn-edit\";\n b.textContent = \"Edit\";\n b.setAttribute(\"aria-label\", \"Toggle fullscreen editor\");\n b.addEventListener(\"click\", () => {\n const isFull = demo.classList.toggle(\"fullscreen\");\n\n b.textContent = isFull ? \"Close\" : \"Edit\";\n if (isFull) {\n demo.querySelectorAll('[role=\"tabpanel\"]').forEach((p) =>\n p.removeAttribute(\"hidden\")\n );\n } else {\n const active = demo.querySelector(\n '[role=\"tab\"][aria-selected=\"true\"]',\n );\n if (active) active.click();\n }\n });\n menu.prepend(b);\n }\n });\n\n // On Esc, close fullscreen editor if open.\n document.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\") {\n const isFull = document.querySelector(\".ot-demo.fullscreen\");\n if (isFull) {\n isFull.classList.remove(\"fullscreen\");\n isFull.querySelector(\".btn-edit\").textContent = \"Edit\";\n const active = isFull.querySelector(\n '[role=\"tab\"][aria-selected=\"true\"]',\n );\n if (active) active.click();\n }\n }\n });\n\n // Highlight sidebar items.\n highlightNav();\n window.addEventListener(\"hashchange\", highlightNav);\n\n // Highlight sidebar link based on scroll position in demo sections.\n const sections = document.querySelectorAll(\".demo-section\");\n const side = document.querySelector(\"aside[data-sidebar]\");\n if (sections.length && side) {\n const ob = new IntersectionObserver((items) => {\n const ok = items.filter((e) =>\n e.isIntersecting\n ).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];\n if (!ok) {\n return;\n }\n\n side.querySelector(\"[aria-current]\")?.removeAttribute(\"aria-current\");\n side.querySelector(`a[href$=\"#${ok.target.id}\"]`)?.setAttribute(\n \"aria-current\",\n \"page\",\n );\n }, { rootMargin: \"0px 0px -60% 0px\" });\n\n // Attach a scroll observer to all sections.\n sections.forEach((s) => ob.observe(s));\n }\n});\n\nfunction highlightNav() {\n const sb = document.querySelector(\"aside[data-sidebar]\");\n if (!sb) return;\n\n // Remove current highlight.\n sb.querySelector('[aria-current=\"page\"]')?.removeAttribute(\"aria-current\");\n\n // Check direct match with hash, direct URI, then the /components/#$id URI.\n const p = location.pathname.replace(/\\/$/, \"\");\n const a =\n (location.hash &&\n sb.querySelector(\n `a[href=\"${p}/${location.hash}\"], a[href=\"${p}${location.hash}\"]`,\n )) ||\n sb.querySelector(`a[href=\"${p}/\"], a[href=\"${p}\"]`) ||\n sb.querySelector(\n `a[href=\"/components/#${p.split(\"/\").filter(Boolean).pop()}\"]`,\n );\n\n if (a) {\n a.setAttribute(\"aria-current\", \"page\");\n }\n}\n\nfunction toggleTheme() {\n var cs = document.documentElement.style.colorScheme;\n var isDark = cs === \"dark\" ||\n (!cs && matchMedia(\"(prefers-color-scheme: dark)\").matches);\n var theme = isDark ? \"light\" : \"dark\";\n document.documentElement.style.colorScheme = theme;\n document.documentElement.setAttribute(\"data-theme\", theme);\n localStorage.setItem(\"theme\", theme);\n}\n\nclass Fruit {\n constructor(id, name) {\n this.id = id;\n this.name = name;\n }\n toString() {\n return this.name;\n }\n}\n\nfunction tagInputAutoComplete(el) {\n const fruits = [\n \"Apple\",\n \"Apricot\",\n new Fruit(1, \"Banana\"),\n new Fruit(2, \"Cherry\"),\n \"Mango\",\n \"Melon\",\n ];\n\n const val = el.value.trim().toLowerCase();\n const out = val\n ? fruits.filter((f) => String(f).toLowerCase().startsWith(val))\n : fruits;\n\n el.list.replaceChildren(...out.map((f) => {\n const o = new Option(f);\n o.data = f;\n return o;\n }));\n}",[163],"fde151e1-f88b-4e52-8bda-8c7c19ed75fe","oat.min.js","ca7cb2aa-9feb-11f1-b37c-1607ee4eb77e",18,["D",1787597115030],2,"(() => {\n var d = class extends HTMLElement {\n #t = !1;\n connectedCallback() {\n this.#t ||\n (document.readyState === \"loading\"\n ? document.addEventListener(\"DOMContentLoaded\", () => this.#e(), {\n once: !0,\n })\n : this.#e());\n }\n #e() {\n this.#t || (this.#t = !0, this.init());\n }\n disconnectedCallback() {\n this.cleanup();\n }\n cleanup() {}\n handleEvent(t) {\n let e = this[`on${t.type}`];\n e && e.call(this, t);\n }\n keyNav(t, e, i, n, a, r = !1) {\n let { key: o } = t, l = -1;\n return o === a\n ? l = (e + 1) % i\n : o === n\n ? l = (e - 1 + i) % i\n : r && (o === \"Home\" ? l = 0 : o === \"End\" && (l = i - 1)),\n l >= 0 && t.preventDefault(),\n l;\n }\n emit(t, e = null) {\n return this.dispatchEvent(\n new CustomEvent(t, {\n bubbles: !0,\n composed: !0,\n cancelable: !0,\n detail: e,\n }),\n );\n }\n uid() {\n return Math.random().toString(36).slice(2, 10);\n }\n };\n \"commandForElement\" in HTMLButtonElement.prototype ||\n document.addEventListener(\"click\", (s) => {\n let t = s.target.closest(\"button[commandfor]\");\n if (!t) return;\n let e = document.getElementById(t.getAttribute(\"commandfor\"));\n if (!e) return;\n let i = t.getAttribute(\"command\") || \"toggle\";\n e instanceof HTMLDialogElement &&\n (i === \"show-modal\"\n ? e.showModal()\n : i === \"close\" || e.open\n ? e.close()\n : e.showModal());\n });\n document.addEventListener(\"touchstart\", (s) => {\n s.target instanceof HTMLDialogElement &&\n (s.preventDefault(), s.target.close());\n }, { passive: !1 });\n var c = class extends d {\n #t = [];\n #e = [];\n #i;\n #s = [];\n init() {\n let t = this.querySelector(':scope > [role=\"tablist\"]');\n if (\n this.#t = t ? [...t.querySelectorAll('[role=\"tab\"]')] : [],\n this.#e = [...this.querySelectorAll(':scope > [role=\"tabpanel\"]')],\n this.#t.length === 0 || this.#e.length === 0\n ) {\n console.warn(\"ot-tabs: Missing tab or tabpanel elements\");\n return;\n }\n this.#i = this.dataset.anchor,\n this.#t.forEach((n, a) => {\n let r = this.#e[a];\n r &&\n (this.#s[a] = n.id || \"\",\n n.id ||= `ot-tab-${this.uid()}`,\n r.id ||= `ot-panel-${this.uid()}`,\n n.setAttribute(\"aria-controls\", r.id),\n r.setAttribute(\"aria-labelledby\", n.id));\n }),\n t.addEventListener(\"click\", this),\n t.addEventListener(\"keydown\", this),\n this.#i && window.addEventListener(\"hashchange\", this);\n let e = this.#t.findIndex((n) => n.ariaSelected === \"true\"),\n i = this.#a();\n this.#n(Math.max(0, i >= 0 ? i : e), !1);\n }\n cleanup() {\n window.removeEventListener(\"hashchange\", this);\n }\n onclick(t) {\n let e = this.#t.indexOf(t.target.closest('[role=\"tab\"]'));\n e >= 0 && this.#n(e);\n }\n onkeydown(t) {\n if (!t.target.closest('[role=\"tab\"]')) return;\n let e = this.keyNav(\n t,\n this.activeIndex,\n this.#t.length,\n \"ArrowLeft\",\n \"ArrowRight\",\n );\n e >= 0 && (this.#n(e), this.#t[e].focus());\n }\n onhashchange() {\n let t = this.#a();\n t >= 0 && this.#n(t, !1);\n }\n #n(t, e = !0) {\n this.#t.forEach((i, n) => {\n let a = n === t;\n i.ariaSelected = String(a), i.tabIndex = a ? 0 : -1;\n }),\n this.#e.forEach((i, n) => i.hidden = n !== t),\n e && this.#r(t),\n this.emit(\"ot-tab-change\", { index: t, tab: this.#t[t] });\n }\n #a() {\n let t = this.#i &&\n new URLSearchParams(location.hash.slice(1)).get(this.#i);\n return t ? this.#s.indexOf(t) : -1;\n }\n #r(t) {\n if (!this.#i) return;\n let e = new URLSearchParams(location.hash.slice(1));\n e.set(this.#i, this.#s[t]);\n for (let [n, a] of [...e]) a || e.delete(n);\n let i = e.toString();\n history.replaceState(\n null,\n \"\",\n i ? `#${i}` : location.pathname + location.search,\n );\n }\n get activeIndex() {\n return this.#t.findIndex((t) => t.ariaSelected === \"true\");\n }\n set activeIndex(t) {\n t >= 0 && t < this.#t.length && this.#n(t);\n }\n };\n customElements.define(\"ot-tabs\", c);\n var u = class extends d {\n #t;\n #e;\n #i;\n #s;\n init() {\n this.#t = this.querySelector(\"[popover]\"),\n this.#e = this.querySelector(\"[popovertarget]\"),\n !(!this.#t || !this.#e) && (this.#t.addEventListener(\"toggle\", this),\n this.#t.addEventListener(\"keydown\", this),\n this.#i = () => {\n let t = this.#e.getBoundingClientRect(),\n e = this.#t.getBoundingClientRect();\n this.#t.style.top = `${\n t.bottom + e.height > window.innerHeight\n ? t.top - e.height\n : t.bottom\n }px`,\n this.#t.style.left = `${\n t.left + e.width > window.innerWidth\n ? t.right - e.width\n : t.left\n }px`;\n });\n }\n ontoggle(t) {\n t.newState === \"open\"\n ? (this.#i(),\n window.addEventListener(\"scroll\", this.#i, !0),\n window.addEventListener(\"resize\", this.#i),\n this.#s = [...this.querySelectorAll('[role=\"menuitem\"]')],\n this.#s[0]?.focus(),\n this.#e.ariaExpanded = \"true\")\n : (this.cleanup(),\n this.#s = null,\n this.#e.ariaExpanded = \"false\",\n this.#e.focus());\n }\n onkeydown(t) {\n if (!t.target.matches('[role=\"menuitem\"]')) return;\n let e = this.#s.indexOf(t.target),\n i = this.keyNav(t, e, this.#s.length, \"ArrowUp\", \"ArrowDown\", !0);\n i >= 0 && this.#s[i].focus();\n }\n cleanup() {\n window.removeEventListener(\"scroll\", this.#i, !0),\n window.removeEventListener(\"resize\", this.#i);\n }\n };\n customElements.define(\"ot-dropdown\", u);\n var f = class extends d {\n #t;\n #e;\n #i;\n init() {\n if (this.#t = this.querySelector('input[type=\"file\"]'), !!this.#t) {\n this.#e = this.querySelector(\"[data-files]\"),\n this.#i = this.#e ? [...this.#e.childNodes] : [],\n this.classList.add(\"card\", \"vstack\", \"align-center\"),\n this.#e?.classList.add(\"hstack\", \"justify-center\");\n for (let t of [\"click\", \"dragover\", \"dragleave\", \"drop\", \"change\"]) {\n this.addEventListener(t, this);\n }\n }\n }\n onclick(t) {\n if (this.#t.disabled) return;\n let e = t.target.closest(\"button\");\n if (e && this.#e?.contains(e)) {\n return this.#s([...this.#t.files].filter((i, n) =>\n n !== [...this.#e.children].indexOf(e.parentElement)\n ));\n }\n t.target !== this.#t && this.#t.click();\n }\n ondragover(t) {\n this.#t.disabled ||\n (t.preventDefault(),\n t.dataTransfer.dropEffect = \"copy\",\n this.toggleAttribute(\"data-drag\", !0));\n }\n ondragleave(t) {\n this.contains(t.relatedTarget) || this.removeAttribute(\"data-drag\");\n }\n ondrop(t) {\n this.#t.disabled ||\n (t.preventDefault(),\n this.removeAttribute(\"data-drag\"),\n this.#s(\n [...t.dataTransfer.files].slice(0, this.#t.multiple ? 1 / 0 : 1),\n ));\n }\n onchange() {\n if (!this.#e) return;\n let t = [...this.#t.files].map((e) => {\n let i = document.createElement(\"span\");\n i.className = \"badge\",\n i.dataset.variant = \"secondary\",\n i.textContent = e.name;\n let n = document.createElement(\"button\");\n return n.type = \"button\",\n n.ariaLabel = `Remove ${e.name}`,\n n.textContent = \"\\xD7\",\n i.append(n),\n i;\n });\n this.#e.replaceChildren(...t.length ? t : this.#i);\n }\n #s(t) {\n let e = new DataTransfer();\n t.forEach((i) => e.items.add(i)),\n this.#t.files = e.files,\n this.#t.dispatchEvent(new Event(\"change\", { bubbles: !0 }));\n }\n };\n customElements.define(\"ot-upload\", f);\n document.addEventListener(\"DOMContentLoaded\", () => {\n let s = \"title\",\n t = \"[title]\",\n e = (i) => {\n let n = i.getAttribute(s);\n n &&\n (i.setAttribute(\"data-tooltip\", n),\n i.hasAttribute(\"aria-label\") || i.setAttribute(\"aria-label\", n),\n i.removeAttribute(s));\n };\n document.querySelectorAll(t).forEach(e),\n new MutationObserver((i) => {\n for (let n of i) {\n e(n.target);\n for (let a of n.addedNodes) {\n a.nodeType === 1 && (e(a), a.querySelectorAll(t).forEach(e));\n }\n }\n }).observe(document.body, {\n childList: !0,\n subtree: !0,\n attributes: !0,\n attributeFilter: [s],\n });\n });\n document.addEventListener(\"click\", (s) => {\n let t = s.target.closest(\"[data-sidebar-toggle]\");\n if (t) {\n t.closest(\"[data-sidebar-layout]\")?.toggleAttribute(\"data-sidebar-open\");\n return;\n }\n if (!s.target.closest(\"[data-sidebar]\")) {\n let e = document.querySelector(\n \"[data-sidebar-layout][data-sidebar-open]\",\n );\n e && window.matchMedia(\"(max-width: 768px)\").matches &&\n e.removeAttribute(\"data-sidebar-open\");\n }\n });\n var b = (s) => document.createElement(s),\n g = (s) => String(s).trim(),\n p = class extends d {\n static observedAttributes = [\"disabled\"];\n #t = new WeakMap();\n init() {\n if (this.input = this.querySelector(\"input\"), !this.input) return;\n this.input.readOnly || (this.input.addEventListener(\"keydown\", this),\n this.input.addEventListener(\"input\", (e) => {\n e.stopPropagation();\n let i = this.input.value,\n n = this.input.list,\n a = n &&\n (e.inputType === \"insertReplacementText\" ||\n i.length - (this.prev || \"\").length > 1);\n if (this.prev = i, a) {\n let r = [...n.options].find((o) => o.value === i);\n if (r) return requestAnimationFrame(() => this.add(r.data ?? i));\n }\n }),\n this.input.addEventListener(\"change\", (e) => e.stopPropagation()),\n this.input.addEventListener(\"focus\", this),\n this.addEventListener(\"click\", this));\n let t = this.getAttribute(\"value\");\n t && (this.value = [t]), this.attributeChangedCallback();\n }\n attributeChangedCallback() {\n this.input && (this.input.disabled = this.disabled),\n this.setAttribute(\"aria-disabled\", this.disabled);\n }\n get disabled() {\n return this.hasAttribute(\"disabled\");\n }\n set disabled(t) {\n this.toggleAttribute(\"disabled\", !!t);\n }\n onkeydown(t) {\n if (t.key === \"Backspace\" && !this.input.value) {\n return this.remove(this.input.previousElementSibling);\n }\n (t.key === \"Enter\" || t.key === \",\") &&\n (t.preventDefault(), this.add(this.input.value));\n }\n onfocus() {\n this.input.list &&\n (this.input.dispatchEvent(new Event(\"input\", { bubbles: !0 })),\n requestAnimationFrame(() => {\n try {\n this.input.showPicker();\n } catch {}\n }));\n }\n onclick(t) {\n if (this.disabled) return;\n let e = t.target.closest(\"button\");\n e ? this.remove(e.parentElement) : this.input.focus();\n }\n add(t, e) {\n let i = g(t);\n if (!i || this.value.some((a) => g(a) === i)) return;\n let n = b(\"span\");\n if (\n n.className = \"badge\",\n n.dataset.variant = \"secondary\",\n n.textContent = i,\n t && typeof t == \"object\" && this.#t.set(n, t),\n this.input.readOnly\n ) this.insertBefore(n, this.input);\n else {\n let a = b(\"button\");\n a.type = \"button\",\n a.ariaLabel = `Remove ${i}`,\n a.textContent = \"\\xD7\",\n n.appendChild(a),\n this.insertBefore(n, this.input),\n this.input.value = this.prev = \"\",\n this.input.list?.replaceChildren();\n }\n e || this.emit(\"input\", this.value);\n }\n remove(t) {\n t && (t.remove(), this.emit(\"input\", this.value));\n }\n get value() {\n return [...this.querySelectorAll(\".badge\")].map((t) =>\n this.#t.get(t) ?? t.firstChild.data\n );\n }\n set value(t) {\n this.input ??= this.querySelector(\"input\"),\n this.querySelectorAll(\".badge\").forEach((e) => e.remove()),\n (Array.isArray(t) ? t : []).forEach((e) => {\n typeof e == \"string\"\n ? e.split(\",\").forEach((i) => this.add(i, !0))\n : this.add(e, !0);\n });\n }\n };\n customElements.define(\"ot-taginput\", p);\n var h = {};\n function A(s) {\n if (!h[s]) {\n let t = document.createElement(\"div\");\n t.className = \"toast-container\",\n t.setAttribute(\"popover\", \"manual\"),\n t.setAttribute(\"data-placement\", s),\n document.body.appendChild(t),\n h[s] = t;\n }\n return h[s];\n }\n function v(s, t = {}) {\n let { placement: e = \"top-right\", duration: i = 4e3 } = t, n = A(e);\n s.classList.add(\"toast\");\n let a,\n r = () => {\n i > 0 && (a = setTimeout(() => x(s, n), i));\n };\n return s.onmouseenter = () => clearTimeout(a),\n s.onmouseleave = r,\n s.setAttribute(\"data-entering\", \"\"),\n n.appendChild(s),\n n.showPopover(),\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n s.removeAttribute(\"data-entering\");\n });\n }),\n r(),\n s;\n }\n function x(s, t) {\n if (s.hasAttribute(\"data-exiting\")) return;\n s.setAttribute(\"data-exiting\", \"\");\n let e = () => {\n s.remove(), t.children.length || t.hidePopover();\n };\n s.addEventListener(\"transitionend\", e, { once: !0 });\n let i = getComputedStyle(s).getPropertyValue(\"--transition\").trim(),\n n = parseFloat(i),\n a = i.endsWith(\"ms\") ? n : n * 1e3;\n setTimeout(e, a);\n }\n function E(s, t, e = {}) {\n let { variant: i = \"info\", ...n } = e, a = document.createElement(\"output\");\n if (a.setAttribute(\"data-variant\", i), t) {\n let o = document.createElement(\"h6\");\n o.className = \"toast-title\", o.textContent = t, a.appendChild(o);\n }\n let r = document.createElement(\"div\");\n return r.className = \"toast-message\",\n r.textContent = s,\n a.appendChild(r),\n v(a, n);\n }\n function y(s, t = {}) {\n let e;\n if (\n s instanceof HTMLTemplateElement\n ? e = s.content.firstElementChild?.cloneNode(!0)\n : s && (e = s.cloneNode(!0)), !!e\n ) return e.removeAttribute(\"id\"), v(e, t);\n }\n function w(s) {\n (s ? [h[s]] : Object.values(h)).forEach((t) => {\n t && (t.innerHTML = \"\", t.hidePopover());\n });\n }\n var m = window.ot || (window.ot = {});\n m.toast = E;\n m.toast.el = y;\n m.toast.clear = w;\n})();",[171],"161aa273-e254-4cc5-b1c2-f31a0c6573a4","oat.min.css","af9937d8-9feb-11f1-a9eb-1607ee4eb77e",22,["D",1787597130492],7,"import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer();",[179],"4bff3c8c-f19b-421f-8d5a-ae4f294000a6","main.tsx",20,["D",1787597126623],"http",[187],"f9230877-2063-44fe-b560-59edaf8958bc",["D",1787597435401],16,[28],"422c109b-fe37-4b2d-bbe1-8e6eeba8cdcf","github.svg","58bce04e-9fec-11f1-9217-1607ee4eb77e",31,["D",1787597293088],3,"",[197],"81d995b8-31a6-480e-bb34-1d9b3e2de104","favicon.svg","01a03514-76ac-76e3-8213-a643883a760c",["D",1787596928590],"",[205],"2e673827-9ce0-4f96-ad45-60d49faa5a6f","README.md","01a03514-76ac-76e3-8213-a1a0967c41e6",["D",1787596928590],"# Welcome to Val Town\n\nVal Town is the simplest way to get code running in the cloud.\n\nThis is a basic HTML starter template.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| **[`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter)** *(you're here)* | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| [`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter) | Client-side React SPA with a Hono API backend. |\n\n## Getting started\n\n1. Click `Remix` on this val to get a copy of it\n2. Click `main.tsx` to view the website\n3. Saves to any file will instantly deploy\n\n### ← main.tsx\n\nThis HTTP server hosts all of the other files in this val.\n\nTo view your site in a new tab, click on the `...` menu of `main.tsx` to copy\nyour live HTTP endpoint.\n\n### ← README.md\n\nThat's this file, where you can tell people what your cool website does and how\nyou built it.\n\n### ← index.html\n\nWhere you'll write the content of your website.\n\n### ← style.css\n\nCSS files add styling rules to your content.\n\n### ← script.js\n\nIf you're feeling fancy you can add interactivity to your site with JavaScript.\n\n### ← favicon.svg\n\nThe icon that shows up in the brower tab. Tip: AIs are pretty good at writing\nSVG favicons.\n\n---\n\nThis template was inspired by https://glitch.new/blank.\n",[211],"pulls","branches","forks","envVars",{"_223":63,"_225":63},"connections",{"_223":63,"_224":63},"count","unfilledCount","emptyCount",{"_42":210,"_32":211,"_30":212,"_154":-5,"_40":41,"_39":158,"_156":59,"_37":260,"_13":63,"_33":20,"_34":214,"_24":25,"_160":-5,"_236":261,"_27":262},{"_42":204,"_32":205,"_30":206,"_154":-5,"_40":41,"_39":158,"_156":59,"_37":257,"_13":63,"_33":20,"_34":208,"_24":25,"_160":-5,"_236":258,"_27":259},{"_42":196,"_32":197,"_30":198,"_154":-5,"_40":41,"_39":199,"_156":59,"_37":254,"_13":201,"_33":20,"_34":202,"_24":25,"_160":-5,"_236":255,"_27":256},{"_42":192,"_32":28,"_30":31,"_154":-5,"_40":41,"_39":14,"_156":25,"_37":251,"_13":194,"_33":20,"_34":36,"_24":25,"_160":-5,"_236":252,"_27":253},{"_42":186,"_32":187,"_30":57,"_154":-5,"_40":41,"_39":188,"_156":59,"_37":248,"_13":158,"_33":190,"_34":184,"_24":25,"_160":-5,"_236":249,"_27":250},{"_42":178,"_32":179,"_30":180,"_154":-5,"_40":41,"_39":181,"_156":59,"_37":245,"_13":183,"_33":20,"_34":184,"_24":25,"_160":-5,"_236":246,"_27":247},{"_42":170,"_32":171,"_30":172,"_154":-5,"_40":41,"_39":173,"_156":59,"_37":242,"_13":175,"_33":167,"_34":176,"_24":25,"_160":-5,"_236":243,"_27":244},{"_42":162,"_32":163,"_30":164,"_154":-5,"_40":41,"_39":165,"_156":59,"_37":239,"_13":158,"_33":167,"_34":168,"_24":25,"_160":-5,"_236":240,"_27":241},{"_42":151,"_32":152,"_30":153,"_154":-5,"_40":41,"_39":155,"_156":59,"_37":235,"_13":158,"_33":20,"_34":159,"_24":25,"_160":-5,"_236":237,"_27":238},["D",1787596994002],"children",[],[152],["D",1787597038928],[],[163],["D",1787597115030],[],[171],["D",1787597130492],[],[179],["D",1787597126623],[],[187],["D",1787597435401],[],[28],["D",1787597293088],[],[197],["D",1787596928590],[],[205],["D",1787596928590],[],[211],["D",1787596928590],{"_101":100,"_108":104},{"_101":100,"_102":-5,"_103":104,"_18":55,"_105":106,"_107":25},{"_13":86,"_32":87,"_42":41,"_88":43,"_89":90,"_91":92,"_93":49,"_94":95,"_96":97,"_98":44,"_99":100},"ctx",{"_79":-5,"_130":300,"_301":302,"_303":304,"_305":25,"_306":25,"_307":25,"_308":59,"_309":-5,"_310":-7,"_311":-7,"_312":63,"_313":25,"_314":25,"_315":-5,"_316":25,"_317":25,"_318":25,"_319":-5},"ENV",{"_271":272,"_273":274,"_275":87,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v35